/* Responsive, touch and accessibility polish */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{min-width:0;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
pre,code,.code-output,.builder-target,.sql-answer{overflow-wrap:anywhere;word-break:normal}
pre,.code-output{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
button,a,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}
button,.btn,[role="button"],select,summary{touch-action:manipulation}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline:3px solid rgba(243,207,120,.72);outline-offset:3px}
textarea,input,select{font-size:max(16px,1em)}
main{padding-left:max(1.15rem,var(--safe-left));padding-right:max(1.15rem,var(--safe-right))}
header nav{padding-left:max(1.15rem,var(--safe-left));padding-right:max(1.15rem,var(--safe-right))}
footer{padding-bottom:max(2rem,calc(1rem + var(--safe-bottom)))}

/* Fixed return control: safe-area aware and never covers mobile content. */
.back,.site-back{
  max-width:min(78vw,320px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:720px){
  .back,.site-back{left:max(10px,var(--safe-left))!important;top:max(10px,var(--safe-top))!important;min-height:44px;display:inline-flex!important;align-items:center!important}
  header + main .back{top:calc(max(10px,var(--safe-top)) + 72px)!important}
}

/* Navigation remains usable without squeezing links into unreadable rows. */
@media(max-width:760px){
  header nav{min-height:64px;align-items:center!important;gap:.65rem!important;padding-top:.55rem!important;padding-bottom:.55rem!important}
  .brand{font-size:.86rem;flex:0 0 auto}
  .navlinks{flex:1;min-width:0;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;justify-content:flex-end!important;padding:.25rem 0}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{white-space:nowrap;min-height:42px;display:inline-flex;align-items:center;padding:.35rem .25rem}
}

/* Core page density and card layout. */
@media(max-width:720px){
  main{padding-top:1.25rem;padding-bottom:calc(4rem + var(--safe-bottom))}
  h1{font-size:clamp(2.55rem,13vw,4.25rem)!important;line-height:.94!important;letter-spacing:-.052em!important}
  h2{font-size:clamp(1.8rem,9vw,2.7rem)!important}
  .lead{line-height:1.65}
  .hero,.tool-hero,.path-picker,.read-grid,.level-overview{grid-template-columns:1fr!important}
  .hero-copy,.hero-side,.helper,.game-card,.discipline-card,.score-strip,.inner-panel,.request-panel,.solution-panel,.practice-panel,.study-panel,.level-panel,.result-panel{border-radius:20px!important}
  .hero-copy{padding:1.35rem!important}
  .hero-side{grid-template-columns:1fr 1fr!important;padding:.85rem!important}
  .mini-stat{padding:.85rem!important;min-width:0}
  .mini-stat strong{font-size:1.35rem!important;overflow-wrap:anywhere}
  .section-head{margin-top:2.6rem!important}
  .discipline-grid,.games-grid,.prof-course-grid{grid-template-columns:1fr!important}
  .score-strip{align-items:flex-start!important}
  .score-pills{width:100%}
  .pill{min-height:38px;display:inline-flex;align-items:center}
}
@media(max-width:420px){
  .hero-side{grid-template-columns:1fr!important}
}

/* Forms: no giant action buttons; no iOS zoom; keyboard-friendly spacing. */
.helper-form,.request-row{min-width:0}
.helper-form input,.request-row textarea,.discipline-combobox input,.finder-control input,.path-control input{min-width:0;width:100%}
textarea{line-height:1.5}
@media(max-width:640px){
  .helper-form,.request-row{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:.65rem!important}
  .helper-form .btn,.request-row .btn{align-self:flex-end!important;width:auto!important;min-width:0!important;min-height:44px!important;padding:.68rem .9rem!important}
  textarea{min-height:112px!important}
  input,textarea,select{scroll-margin-bottom:35vh}
}

/* Searchable menus: viewport-aware, finger-friendly, unclipped. */
.discipline-options,.finder-list,.path-list{max-height:min(420px,55dvh)!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch}
.discipline-option,.finder-option,.path-option{min-height:56px}
@media(max-width:640px){
  .discipline-options,.finder-list,.path-list{max-height:min(390px,52dvh)!important;border-radius:16px!important}
  .discipline-option,.finder-option,.path-option{min-height:60px;padding:.72rem!important}
  .discipline-preview{grid-template-columns:1fr!important;gap:.75rem!important}
  .preview-icon,.preview-orb{width:54px!important;height:54px!important}
  .preview-open{width:auto!important;justify-self:start}
}

/* Dedicated games become comfortable full-screen sheets on phones. */
.modal{padding:max(10px,var(--safe-top)) max(10px,var(--safe-right)) max(10px,var(--safe-bottom)) max(10px,var(--safe-left))!important}
.modal-shell{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.game-zone{min-width:0}
canvas.game{width:auto;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.controls button,.choice,.prof-option,.memory-card,.memory-tile,.sql-part,.builder-part,.option,.review-option{min-height:48px}
.controls button{min-width:52px!important;font-size:1.05rem;touch-action:none}
@media(max-width:640px){
  .modal{padding:0!important;align-items:end!important}
  .modal-shell{width:100%!important;max-width:none!important;max-height:100dvh!important;border-radius:22px 22px 0 0!important;padding-bottom:var(--safe-bottom)}
  .modal-head{padding:.8rem .9rem!important}
  .modal-body{padding:.85rem!important}
  .game-zone{min-height:330px!important;padding:.7rem!important;border-radius:18px!important}
  .game-ui{width:100%!important}
  .choices{grid-template-columns:1fr!important;gap:.55rem!important}
  .choice,.prof-option{padding:.85rem!important}
  .memory-board,.memory-grid{gap:.42rem!important}
  .memory-card,.memory-tile{border-radius:12px!important}
  .big-signal,.reaction{min-height:240px!important}
  canvas.game{max-height:52dvh!important}
  .controls{position:relative;z-index:4;gap:.45rem!important}
}

/* Professional-course visuals/tables stay readable on narrow screens. */
.data-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mini-data-table{min-width:520px}
.learning-chart{min-width:0}
@media(max-width:560px){
  .professional-play{padding-left:.85rem!important;padding-right:.85rem!important;padding-bottom:calc(3rem + var(--safe-bottom))!important}
  .professional-play .study-panel{min-height:0!important}
  .level-map{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.42rem!important}
  .level-node{height:48px!important;min-width:0!important}
  .stage-summary{grid-template-columns:1fr!important}
  .game-stage-banner{align-items:flex-start!important;flex-direction:column!important}
  .result-score{font-size:2.3rem!important}
  .mini-data-table{font-size:.82rem}
}

/* Dense utility grids from later stages collapse predictably. */
@media(max-width:760px){
  .principles,.review-stats,.stats-grid,.skill-grid,.passport-grid,.project-grid,.library-grid,.project-steps,.task-grid{grid-template-columns:1fr!important}
  .stage-head,.review-top,.practice-top{align-items:flex-start!important}
  .stage-select{width:100%!important;min-width:0!important}
  .path-actions,.answer-actions,.study-actions,.game-controls{gap:.45rem!important}
  .path-actions .btn,.answer-actions .btn,.study-actions .btn{min-height:44px}
}

/* Hover effects should not get stuck after a tap. */
@media(hover:none){
  .btn:hover,.choice:hover,.prof-option:hover,.discipline-option:hover,.path-option:hover,.game-card:hover{transform:none!important}
}

/* Respect device/accessibility preferences and reduce GPU work on small devices. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  #page-pattern{opacity:.55!important}
}
@media(max-width:520px) and (prefers-reduced-motion:no-preference){
  #page-pattern{filter:none!important}
}

/* Landscape phones: use the available width without hiding controls. */
@media(max-height:520px) and (orientation:landscape){
  .modal-shell{max-height:100dvh!important}
  .modal-body{padding:.6rem!important}
  .game-zone{min-height:250px!important}
  canvas.game{max-height:64dvh!important;max-width:78vw!important}
  .back,.site-back{top:max(6px,var(--safe-top))!important}
}

/* === Final mobile text-safety hardening (2026-08-08) ===
   Shared by every HTML page. Prevents clipped/oversized/hidden copy on narrow phones. */
:where(main,section,article,aside,div,form,fieldset,nav,header,footer){min-width:0}
:where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,legend,small,strong,b,em,a,button,.btn,.pill,.chip,.tag,.option,.choice,.feedback,.helper-result,.cross-result,.code-output){max-width:100%}
:where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,legend,small,strong,b,em,.feedback,.helper-result,.cross-result){overflow-wrap:anywhere;word-break:normal}
:where(.card,.glow,.hero-copy,.hero-side,.helper,.request-panel,.solution-panel,.practice-panel,.study-panel,.level-panel,.result-panel,.game-card,.discipline-card,.record,.skill-row,.next-card){min-width:0;max-width:100%}
button,.btn,.option,.choice,.prof-option,.filter,.suggestion{white-space:normal;overflow-wrap:anywhere;word-break:normal;text-align:center}
input,textarea,select{max-width:100%;min-width:0}

@media(max-width:600px){
  body{width:100%;max-width:100vw;overflow-x:hidden}
  main{width:100%;max-width:100vw;padding-left:max(.9rem,var(--safe-left))!important;padding-right:max(.9rem,var(--safe-right))!important;padding-bottom:calc(7rem + var(--safe-bottom))!important}
  header nav{width:100%;max-width:100vw;padding-left:max(.9rem,var(--safe-left))!important;padding-right:max(.9rem,var(--safe-right))!important}
  h1{font-size:clamp(2rem,10.4vw,3.15rem)!important;line-height:1.02!important;letter-spacing:-.04em!important;text-wrap:balance}
  h2{font-size:clamp(1.5rem,7.6vw,2.25rem)!important;line-height:1.08!important;letter-spacing:-.03em!important;text-wrap:balance}
  h3{font-size:clamp(1.12rem,5.4vw,1.55rem)!important;line-height:1.2!important}
  .lead{font-size:clamp(.96rem,4.1vw,1.08rem)!important;line-height:1.62!important}
  .brand{font-size:clamp(.72rem,3.6vw,.86rem)!important;letter-spacing:.075em!important;white-space:nowrap;max-width:48vw;overflow:hidden;text-overflow:clip}
  .navlinks{max-width:50vw}
  .navlinks a{font-size:.78rem!important}
  .card,.hero-copy,.hero-side,.request-panel,.solution-panel,.practice-panel,.study-panel,.level-panel,.result-panel,.helper,.sim-card,.section{padding-left:1rem!important;padding-right:1rem!important}
  .btn,.option,.choice,.prof-option{max-width:100%;min-height:44px;line-height:1.25!important}
  .pill,.chip,.tag,.skill-strip span,.tech-cloud span{white-space:normal!important;overflow-wrap:anywhere}
  .back,.site-back{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;margin:.15rem 0 1rem!important;max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;min-height:40px!important;padding:.55rem .72rem!important}
  .rdns-global-back{left:max(10px,var(--safe-left));bottom:max(12px,calc(var(--safe-bottom) + 6px));max-width:42vw;white-space:nowrap;overflow:visible;text-overflow:clip}
  .novaguide-float{right:max(10px,var(--safe-right));top:calc(var(--safe-top) + 68px);bottom:auto;max-width:46vw;white-space:nowrap}
  footer{padding-left:max(.9rem,var(--safe-left));padding-right:max(.9rem,var(--safe-right));padding-bottom:calc(5.5rem + var(--safe-bottom))!important;overflow-wrap:anywhere}
  pre,.code-output,.builder-target,.sql-answer{font-size:.84rem!important;max-width:100%!important;overflow-x:auto!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important}
  table{max-width:100%}
}

@media(max-width:380px){
  h1{font-size:clamp(1.82rem,10vw,2.45rem)!important}
  h2{font-size:clamp(1.4rem,7.4vw,1.9rem)!important}
  .brand{max-width:44vw;font-size:.7rem!important}
  .navlinks{max-width:54vw}
  .rdns-global-back{font-size:12px;padding:.52rem .68rem}
  .novaguide-float{font-size:.68rem!important;padding:0!important;width:36px!important;height:36px!important;min-height:36px!important;border-radius:50%!important}.novaguide-float .novaguide-label{display:none!important}.novaguide-float .novaguide-icon{font-size:.95rem!important;line-height:1!important}
}

/* V93: compact inline Nova web escalation */
.nova-inline-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.8rem}.nova-inline-actions .nova-web-retry{width:auto!important;max-width:100%;min-height:40px;padding:.6rem .9rem;font-size:.92rem;white-space:normal}.nova-inline-answer,.nova-inline-answer *{overflow-wrap:anywhere;word-break:normal;hyphens:none}@media(max-width:480px){.nova-inline-actions .nova-web-retry{width:100%!important;font-size:.9rem}}