.game-root{display:flex;flex-direction:column;align-items:center}.game-head{position:relative;width:100%;display:flex;align-items:center;justify-content:center;gap:var(--s3);min-height:40px;margin-bottom:var(--s5)}.game-head .close-btn{position:absolute;left:0}.game-head .combo{position:absolute;right:44px;font-family:var(--font-ui);font-size:var(--fs-caption);color:var(--accent);font-weight:600}.game-head .mute-btn{position:absolute;right:0}.game-head .mute-btn.muted{color:var(--text-faint)}.game-head .mute-btn.muted:after{content:"";position:absolute;left:9px;right:9px;top:50%;height:2px;background:currentColor;transform:rotate(-45deg);border-radius:2px}.dot-rail{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:70%}.dot-rail .dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--surface-muted);border:1px solid var(--border-subtle)}.dot-rail .dot.done{background:var(--accent-fill);border-color:transparent}.dot-rail .dot.miss{background:var(--danger);border-color:transparent}.dot-rail .dot.now{background:var(--accent);border-color:transparent;transform:scale(1.4)}.game-card{width:100%;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}.game-card.deal-in{animation:dealIn .2s var(--ease-out)}.game-card .instruction{font-family:var(--font-ui);font-size:var(--fs-label);color:var(--text-muted)}.game-card .prompt{font-family:var(--font-serif);font-size:var(--fs-display);line-height:1.3;color:var(--text)}.game-card .prompt.eng{font-family:var(--font-ui);font-weight:600;font-size:var(--fs-h1)}.prompt-audio{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s4) 0;border:0;background:transparent;color:var(--accent);cursor:pointer;font-family:var(--font-ui);font-size:var(--fs-label);width:100%}.prompt-audio svg{width:44px;height:44px}.choices{display:flex;flex-direction:column;gap:var(--s2)}.choice{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;min-height:52px;padding:0 var(--s4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-fast) var(--ease-settle),border-color var(--dur-fast)}.choice .c-text{font-family:var(--font-serif);font-size:var(--fs-body-lg)}.choice:active{transform:scale(.985)}.choice:disabled{cursor:default}.choice.correct{border-color:var(--success);background:var(--success-bg)}.choice.wrong{border-color:var(--danger);background:var(--danger-bg)}.choice .c-spk{color:var(--accent);display:inline-flex}.wordbank-answer{min-height:52px;display:flex;flex-wrap:wrap;gap:var(--s2);align-content:flex-start;padding:var(--s2);border-bottom:2px solid var(--border)}.wordbank-tray{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}.tile{min-height:44px;padding:var(--s2) var(--s4);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-muted);color:var(--text);font-family:var(--font-serif);font-size:var(--fs-body-lg);cursor:pointer;-webkit-tap-highlight-color:transparent}.tile:active{transform:scale(.96)}.tile.used{visibility:hidden}.tile.placed{background:color-mix(in oklab,var(--accent) 10%,var(--surface-muted))}.match-cols{display:flex;gap:var(--s2)}.match-col{flex:1;display:flex;flex-direction:column;gap:var(--s2)}.match-tile{min-height:58px;padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;transition:transform var(--dur-fast) var(--ease-settle),border-color var(--dur-fast) var(--ease-soft),opacity var(--dur-base) var(--ease-soft)}.match-tile[lang=es]{font-family:var(--font-serif);font-size:var(--fs-body-lg)}.match-tile[lang=en]{font-family:var(--font-ui);font-size:var(--fs-label)}.match-tile:active{transform:scale(.97)}.match-tile.sel{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 10%,var(--surface))}.match-tile.miss{border-color:var(--danger);background:var(--danger-bg)}.match-tile.matched{opacity:0;pointer-events:none}.game-input{width:100%;font-family:var(--font-serif);font-size:var(--fs-h2);background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s3) var(--s4);color:var(--text)}.game-input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent)}.feedback{border-radius:var(--r-md);padding:var(--s4);transform:translateY(8px);opacity:0;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}.feedback.show{transform:translateY(0);opacity:1}.feedback.ok{background:var(--success-bg)}.feedback.no{background:var(--danger-bg)}.feedback.warn{background:var(--warning-bg)}.feedback .verdict{font-family:var(--font-ui);font-weight:600}.feedback.ok .verdict{color:var(--success)}.feedback.no .verdict{color:var(--danger)}.feedback.warn .verdict{color:var(--warning)}.feedback .fb-answer{font-family:var(--font-serif);font-size:var(--fs-h2);margin-top:var(--s1)}.feedback .fb-echo{font-family:var(--font-ui);font-size:var(--fs-caption);color:var(--text-muted);margin-top:var(--s1)}.feedback .fb-tip{font-family:var(--font-serif);font-style:italic;font-size:var(--fs-label);color:var(--text-muted);margin-top:var(--s2)}.feedback .fb-prov{font-style:italic;font-size:var(--fs-caption);color:var(--accent-cool);margin-top:var(--s2)}.grad-moment{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:color-mix(in oklab,var(--bg) 86%,transparent);backdrop-filter:blur(6px);opacity:0;transition:opacity var(--dur-base) var(--ease-out);padding:var(--gutter);text-align:center}.grad-moment.show{opacity:1}.grad-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--s3);max-width:420px;transform:translateY(10px) scale(.98);transition:transform var(--dur-base) var(--ease-spring)}.grad-moment.show .grad-inner{transform:none}.grad-bloom{position:absolute;width:70vw;max-width:460px;aspect-ratio:1;border-radius:var(--r-full);background:radial-gradient(circle,color-mix(in oklab,var(--accent-cool) 30%,transparent) 0%,transparent 68%);transform:scale(.4);opacity:0;transition:transform .8s var(--ease-out),opacity .8s var(--ease-out)}.grad-moment.show .grad-bloom{transform:scale(1);opacity:1}.grad-eyebrow{font-family:var(--font-ui);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.08em;color:var(--accent-cool)}.grad-word{font-size:var(--fs-hero);line-height:1.1;color:var(--text)}.grad-sub{font-family:var(--font-ui);font-size:var(--fs-body);color:var(--text-muted)}.grad-go{margin-top:var(--s3)}.grad-moment.rm .grad-bloom,.grad-moment.rm .grad-inner{transition:none;transform:none}.game-done{text-align:center;padding:var(--s6) var(--s5);display:flex;flex-direction:column;align-items:center}.game-done h2{font-family:var(--font-serif);font-size:var(--fs-display);margin:var(--s4) 0 var(--s2)}.done-produced{font-family:var(--font-ui);font-size:var(--fs-body-lg);color:var(--text);margin:var(--s2) 0}.done-produced b{color:var(--accent-cool)}.done-new{font-size:var(--fs-label);color:var(--success);font-weight:600;margin-left:var(--s1)}
