.game-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:22px}.game-hero .section-title{max-width:none}.game-headline{font-size:clamp(2rem,3vw,3rem)}.game-headline .headline-line{line-height:1.1}.game-hero .copy{margin:10px 0 0;max-width:680px}.prototype-label{align-self:start}

.route-card{padding:20px;margin-bottom:16px}.route-grid{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr) auto;gap:10px;align-items:end}.route-field label{display:block;margin:0 0 7px 4px;color:var(--muted);font-size:.72rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.select-shell{position:relative}.route-select{width:100%;min-height:58px;appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink-strong);padding:0 44px 0 15px;font-weight:950;outline:none;box-shadow:0 5px 0 color-mix(in srgb,var(--line-strong) 68%,transparent);cursor:pointer}.select-shell::after{content:"⌄";position:absolute;right:15px;top:50%;transform:translateY(-55%);color:var(--muted);font-size:1.1rem;pointer-events:none}.route-swap{width:50px;height:50px;border:1px solid var(--line);border-radius:17px;background:var(--surface-lilac);color:var(--purple);font-size:1.3rem;font-weight:950;cursor:pointer;box-shadow:0 5px 0 color-mix(in srgb,var(--purple) 24%,var(--line));}.route-swap:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--purple) 24%,var(--line))}.route-swap:disabled{opacity:.42;cursor:not-allowed}.mix-toggle{min-height:58px;display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:18px;background:var(--surface-soft);cursor:pointer}.mix-toggle input{position:absolute;opacity:0;pointer-events:none}.switch{width:45px;height:27px;border-radius:999px;background:var(--line-strong);padding:3px;transition:background .16s ease;flex:0 0 auto}.switch::after{content:"";display:block;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.16);transition:transform .16s ease}.mix-toggle input:checked + .switch{background:var(--purple)}.mix-toggle input:checked + .switch::after{transform:translateX(18px)}.mix-copy{display:flex;flex-direction:column;line-height:1.15}.mix-copy strong{font-size:.78rem}.mix-copy span{margin-top:4px;color:var(--muted);font-size:.67rem}

.stats-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}.stat-card{min-width:0;padding:13px 12px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 5px 0 rgba(85,107,145,.07);text-align:center}.stat-card span{display:block}.stat-value{font-family:var(--font-ui);font-size:1.2rem;font-weight:950;letter-spacing:-.03em;color:var(--ink-strong)}.stat-label{margin-top:3px;color:var(--muted);font-size:.66rem;font-weight:820;line-height:1.25}

.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;align-items:start}.stage{position:relative;padding:clamp(18px,3.5vw,34px);overflow:hidden}.stage::before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-85px;top:-96px;background:radial-gradient(circle,rgba(255,215,90,.23),transparent 68%);pointer-events:none}.stage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.exercise-meta{display:flex;flex-wrap:wrap;gap:8px}.exercise-count{font-size:.75rem;font-weight:900;color:var(--muted)}.type-badge{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:999px;background:var(--surface-lilac);color:var(--purple);font-size:.72rem;font-weight:950}.stage-controls{display:flex;gap:7px}.mini-toggle{min-height:38px;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:0 10px;font-weight:900;font-size:.72rem;cursor:pointer}.mini-toggle[aria-pressed="false"]{color:var(--muted)}
.progress-track{height:11px;margin-top:16px;border-radius:999px;background:var(--surface-soft);overflow:hidden}.progress-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--purple),var(--pink));transition:width .22s ease}
.question-zone{text-align:center;padding:clamp(28px,5vw,54px) 0 28px}.flags{font-size:1.4rem;letter-spacing:.15em}.prompt{margin-top:10px;color:var(--muted);font-size:.92rem;font-weight:800}.word{margin-top:9px;font-family:var(--font-ui);font-size:clamp(2.8rem,8vw,5.8rem);font-weight:950;line-height:.95;letter-spacing:-.055em;overflow-wrap:anywhere;color:var(--ink-strong)}.listen-only{margin-top:14px;font-size:4.2rem}.listen-btn{margin-top:18px;min-height:50px;border:1px solid var(--line);border-radius:17px;background:var(--surface-soft);padding:0 17px;display:inline-flex;align-items:center;gap:9px;font-weight:950;cursor:pointer;box-shadow:0 5px 0 color-mix(in srgb,var(--line-strong) 66%,transparent)}.listen-btn svg{color:var(--blue)}.listen-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line-strong)}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.answer{min-height:66px;border:1px solid var(--line);border-radius:19px;background:var(--surface);color:var(--ink-strong);padding:12px 15px;font-weight:950;font-size:1rem;cursor:pointer;box-shadow:0 6px 0 color-mix(in srgb,var(--line-strong) 74%,transparent),0 11px 20px rgba(48,74,112,.07);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.answer:hover{border-color:color-mix(in srgb,var(--blue) 55%,var(--line))}.answer:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line-strong),0 6px 12px rgba(48,74,112,.05)}.answer:disabled{cursor:default;opacity:.72}
.spelling{margin-top:4px}.built{min-height:74px;border:2px dashed color-mix(in srgb,var(--purple) 38%,var(--line));border-radius:20px;background:var(--surface-lilac);display:flex;align-items:center;justify-content:center;padding:12px;font-family:var(--font-ui);font-size:clamp(1.5rem,5vw,2.15rem);font-weight:950;letter-spacing:.14em;white-space:pre-wrap}.letters{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:14px}.letter{min-width:50px;min-height:50px;border:1px solid var(--line);border-radius:16px;background:var(--surface);font-family:var(--font-ui);font-weight:950;font-size:1.05rem;cursor:pointer;box-shadow:0 5px 0 color-mix(in srgb,var(--line-strong) 72%,transparent)}.letter:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line-strong)}.letter:disabled{opacity:.35;cursor:default}.spelling-hint{text-align:center;margin-top:10px;color:var(--muted);font-size:.74rem;font-weight:800}.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:13px}
.feedback{min-height:60px;margin-top:17px;border-radius:18px;padding:12px 15px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:950}.feedback:empty{min-height:0;margin-top:0;padding:0}.feedback.ok{background:var(--surface-mint);color:var(--success);border:1px solid color-mix(in srgb,var(--success) 25%,var(--line))}.feedback.try{background:var(--surface-pink);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 25%,var(--line))}.next-wrap{display:flex;justify-content:center;margin-top:12px}

.side-panel{display:grid;gap:13px}.side-card{padding:18px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow-soft)}.side-card h3{margin:0;font-family:var(--font-ui);font-size:1rem;letter-spacing:-.02em}.side-card p{margin:8px 0 0;color:var(--muted);font-size:.8rem;line-height:1.55}.session-score{margin-top:13px;display:flex;align-items:center;gap:12px}.score-orb{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--yellow),var(--orange));box-shadow:0 5px 0 var(--orange-edge);font-weight:950;color:#51331d}.session-score strong{display:block;font-family:var(--font-ui);font-size:1.15rem}.session-score span{display:block;margin-top:3px;color:var(--muted);font-size:.7rem}.prototype-tip{background:linear-gradient(145deg,var(--surface-lilac),var(--surface))}.tip-word{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);display:grid;gap:4px}.tip-word small{color:var(--muted);font-weight:800}.tip-word strong{font-family:var(--font-ui);font-size:1.45rem}.tip-word b{color:var(--purple)}

.finish{padding:clamp(24px,5vw,42px);text-align:center}.finish-icon{width:84px;height:84px;margin:auto;border-radius:28px;display:grid;place-items:center;background:linear-gradient(145deg,var(--yellow),var(--orange));box-shadow:0 7px 0 var(--orange-edge);color:#5a3a1f}.finish-icon svg{width:44px;height:44px}.finish h2{margin:22px 0 0;font-family:var(--font-ui);font-size:clamp(2rem,6vw,3.6rem);letter-spacing:-.045em}.final-result{margin-top:10px;color:var(--muted);font-weight:850}.summary{max-width:630px;margin:20px auto;display:grid;gap:8px;text-align:left}.summary div{padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft)}
.library{margin-top:16px;padding:17px 20px}.library summary{cursor:pointer;font-weight:950;min-height:42px;display:flex;align-items:center}.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.library-group{padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--surface-soft)}.library-group h3{margin:0 0 8px;font-size:.78rem}.library-list{display:grid;gap:6px}.library-list button{min-height:42px;border:1px solid var(--line);border-radius:13px;background:var(--surface);font-weight:850;cursor:pointer;text-align:left;padding:0 10px}
.celebrate{position:absolute;inset:0;pointer-events:none;overflow:hidden}.star{position:absolute;font-size:1.4rem;animation:star-pop .82s ease-out forwards}@keyframes star-pop{0%{opacity:0;transform:translateY(20px) scale(.55)}30%{opacity:1}100%{opacity:0;transform:translateY(-72px) scale(1.12) rotate(16deg)}}
.hidden{display:none!important}.loading{min-height:280px;display:grid;place-items:center;color:var(--muted);font-weight:850}

@media(max-width:980px){.route-grid{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);}.mix-toggle{grid-column:1/-1}.game-layout{grid-template-columns:1fr}.side-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.library-grid{grid-template-columns:1fr}}
@media(max-width:680px){.game-hero{grid-template-columns:1fr}.game-headline{font-size:clamp(1.75rem,7.4vw,2.35rem)}.game-headline .headline-line{white-space:normal}.prototype-label{justify-self:start}.stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-row .stat-card:last-child{grid-column:1/-1}.route-card{padding:14px}.route-grid{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:7px}.route-swap{width:42px;height:42px}.route-select{min-height:54px;font-size:.9rem;padding-left:11px}.answers{grid-template-columns:1fr}.stage{padding:17px}.stage-head{flex-direction:column}.stage-controls{width:100%}.mini-toggle{flex:1}.side-panel{grid-template-columns:1fr}.question-zone{padding-top:34px}.library{padding:14px}.library-group{padding:10px}}
@media(max-width:420px){.route-field label{font-size:.62rem}.route-select{font-size:.78rem}.mix-copy span{display:none}.word{font-size:3.15rem}.answer{min-height:62px}.stats-row{gap:7px}.stat-card{padding:11px 7px}.stat-label{font-size:.61rem}}

/* UI-0005 — tactile learning interactions */
.route-card{position:relative;overflow:hidden}.route-card::after{content:"";position:absolute;width:170px;height:170px;right:-80px;top:-90px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 20%,transparent),transparent 70%);pointer-events:none}.route-select{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.route-select:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 35%,var(--line))}.route-swap{transition:transform .2s cubic-bezier(.2,.9,.25,1.3),box-shadow .2s ease,color .2s ease}.route-swap:hover:not(:disabled){transform:translateY(-2px) rotate(-8deg);color:var(--purple);box-shadow:0 7px 0 color-mix(in srgb,var(--purple) 24%,var(--line)),0 14px 24px rgba(48,74,112,.1)}.route-swap.is-swapping{animation:swap-spin .34s cubic-bezier(.2,.9,.25,1.15)}@keyframes swap-spin{0%{transform:scale(.86) rotate(0)}100%{transform:scale(1) rotate(180deg)}}
.mix-toggle{transition:transform .18s ease,border-color .18s ease,background .18s ease}.mix-toggle:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--purple) 30%,var(--line))}
.stat-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.stat-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--blue) 26%,var(--line));box-shadow:0 7px 0 rgba(85,107,145,.07),0 16px 28px rgba(48,74,112,.08)}
.stage{transition:transform .2s ease,box-shadow .2s ease}.stage-success{animation:stage-success .56s cubic-bezier(.2,.9,.25,1.2)}.stage-try{animation:stage-try .42s ease}@keyframes stage-success{0%{transform:scale(1)}38%{transform:scale(1.012) translateY(-2px)}100%{transform:scale(1)}}@keyframes stage-try{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.question-zone.question-enter{animation:question-enter .34s cubic-bezier(.2,.8,.2,1)}@keyframes question-enter{from{opacity:.25;transform:translateY(9px) scale(.99)}to{opacity:1;transform:none}}
.mini-toggle{transition:transform .16s ease,border-color .16s ease,background .16s ease}.mini-toggle:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--purple) 26%,var(--line));background:var(--surface-lilac)}
.listen-btn{position:relative;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.listen-btn:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 32%,var(--line));box-shadow:0 7px 0 color-mix(in srgb,var(--line-strong) 66%,transparent),0 15px 26px rgba(48,74,112,.1)}.listen-btn.is-listening svg{animation:sound-pulse .72s ease-in-out infinite}.listen-btn.is-listening{border-color:color-mix(in srgb,var(--blue) 42%,var(--line));background:color-mix(in srgb,var(--surface-soft) 75%,var(--blue) 25%)}@keyframes sound-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18) rotate(-5deg)}}
.answer{overflow:hidden;position:relative}.answer::after{content:"";position:absolute;inset:-90% -30%;background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.36) 50%,transparent 56%);transform:translateX(-65%);opacity:0;pointer-events:none}.answer:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 9px 0 color-mix(in srgb,var(--line-strong) 74%,transparent),0 17px 28px rgba(48,74,112,.1)}.answer:hover:not(:disabled)::after{animation:answer-sheen .55s ease}@keyframes answer-sheen{20%{opacity:1}100%{opacity:0;transform:translateX(65%)}}.answer.is-correct,.answer.is-correct-answer{border-color:color-mix(in srgb,var(--success) 55%,var(--line));background:var(--surface-mint);color:var(--success)}.answer.is-correct{animation:answer-correct .42s cubic-bezier(.2,.9,.25,1.25)}.answer.is-wrong{border-color:color-mix(in srgb,var(--danger) 55%,var(--line));background:var(--surface-pink);color:var(--danger);animation:answer-wrong .34s ease}@keyframes answer-correct{0%{transform:scale(.97)}55%{transform:scale(1.035) translateY(-3px)}100%{transform:scale(1)}}@keyframes answer-wrong{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
.letter{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.letter:hover:not(:disabled){transform:translateY(-3px) rotate(-2deg);border-color:color-mix(in srgb,var(--purple) 35%,var(--line));box-shadow:0 8px 0 color-mix(in srgb,var(--line-strong) 72%,transparent),0 13px 22px rgba(48,74,112,.08)}.letter:nth-child(even):hover:not(:disabled){transform:translateY(-3px) rotate(2deg)}.letter{animation:letter-arrive .3s cubic-bezier(.2,.9,.25,1.2) both}.letter:nth-child(2){animation-delay:.025s}.letter:nth-child(3){animation-delay:.05s}.letter:nth-child(4){animation-delay:.075s}.letter:nth-child(5){animation-delay:.1s}.letter:nth-child(6){animation-delay:.125s}.letter:nth-child(7){animation-delay:.15s}.letter:nth-child(8){animation-delay:.175s}.letter:nth-child(9){animation-delay:.2s}.letter:nth-child(10){animation-delay:.225s}@keyframes letter-arrive{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}.built-pop{animation:built-pop .2s ease}@keyframes built-pop{50%{transform:scale(1.018)}}
.feedback.ok{animation:feedback-ok .36s cubic-bezier(.2,.9,.25,1.2)}.feedback.try{animation:feedback-try .32s ease}@keyframes feedback-ok{from{opacity:.3;transform:scale(.97)}to{opacity:1;transform:none}}@keyframes feedback-try{0%{opacity:.5;transform:translateX(-2px)}100%{opacity:1;transform:none}}
.session-score.score-pop .score-orb{animation:score-pop .45s cubic-bezier(.2,.9,.25,1.35)}@keyframes score-pop{0%{transform:scale(.85) rotate(-8deg)}65%{transform:scale(1.12) rotate(6deg)}100%{transform:scale(1)}}
.finish-enter{animation:finish-enter .52s cubic-bezier(.2,.8,.2,1)}.finish-enter .finish-icon{animation:trophy-pop .62s cubic-bezier(.2,.9,.25,1.35)}@keyframes finish-enter{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}@keyframes trophy-pop{0%{transform:scale(.6) rotate(-12deg)}70%{transform:scale(1.08) rotate(5deg)}100%{transform:scale(1)}}
.library-list button{transition:transform .16s ease,border-color .16s ease,background .16s ease}.library-list button:hover{transform:translateX(3px);border-color:color-mix(in srgb,var(--blue) 28%,var(--line));background:var(--surface)}
.star-1{left:14%;top:68%;animation-delay:0ms}.star-2{left:30%;top:62%;animation-delay:45ms}.star-3{left:45%;top:70%;animation-delay:90ms}.star-4{left:59%;top:60%;animation-delay:135ms}.star-5{left:72%;top:68%;animation-delay:180ms}.star-6{left:84%;top:64%;animation-delay:225ms}
@media(prefers-reduced-motion:reduce){.route-swap.is-swapping,.stage-success,.stage-try,.question-zone.question-enter,.listen-btn.is-listening svg,.answer.is-correct,.answer.is-wrong,.letter,.built-pop,.feedback.ok,.feedback.try,.session-score.score-pop .score-orb,.finish-enter,.finish-enter .finish-icon{animation:none!important}}
/* UI-0008: deterministic local flags; do not depend on OS emoji rendering. */
.flags{display:flex;align-items:center;justify-content:center;gap:10px}.route-flag{width:27px;height:19px;display:block;border-radius:4px;box-shadow:0 0 0 1px rgba(39,55,88,.09),0 3px 8px rgba(39,55,88,.08)}.route-arrow{color:var(--muted);font-weight:900}.library-group h3{display:flex;align-items:center;gap:8px}.library-flag{width:22px;height:15px;display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(39,55,88,.08)}


/* UI-0022 — learning controls remain comfortable on touch screens. */
.game-hero,.route-card,.route-grid,.route-field,.game-layout,.stage,.side-panel,.library,.library-grid{min-width:0;max-width:100%}
@media(max-width:680px){
  .route-grid{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr)}
  .route-swap{width:48px;height:48px}
  .mini-toggle{min-height:48px;padding-inline:11px}
  .library summary{min-height:48px}
  .library-list button{min-height:48px}
}
@media(max-width:380px){
  .route-card{padding:11px}
  .route-grid{gap:5px;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr)}
  .route-swap{width:46px;height:46px}
  .route-select{min-height:52px;padding-inline:8px;font-size:.76rem}
  .stage{padding:14px}
}