*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--app-h:100vh}@supports (height:100dvh){:root{--app-h:100dvh}}html,body{height:var(--app-h);max-height:var(--app-h);overscroll-behavior:none;-webkit-font-smoothing:antialiased;font-family:Outfit,system-ui,sans-serif;overflow:hidden}body{transition:background .3s,color .3s}body.light{color:#1a1a2e;background:#f7f7f2}body.dark{color:#e8e8f0;background:#12121e}#root{width:100%;height:var(--app-h);max-height:var(--app-h);overflow:hidden}.game-shell{width:100%;height:var(--app-h);max-height:var(--app-h);flex-direction:column;align-items:center;display:flex;overflow:hidden}.game-grid-area{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;width:100%;min-height:0;padding:20px 16px 0;display:flex;overflow-y:auto}.game-keyboard-area{--kbd-w:100%;--kbd-gap:5px;width:100%;max-width:500px;padding:16px 8px max(24px, env(safe-area-inset-bottom,0px));isolation:isolate;contain:layout style;flex-shrink:0;overflow-x:hidden}.game-kb-row{justify-content:center;align-items:center;gap:var(--kbd-gap);width:100%;max-width:100%;margin-bottom:5px;display:flex;overflow-x:hidden}.game-kb-row:last-child{margin-bottom:0}.game-kb-row--10{--kbd-row-unit:calc((100% - 9 * var(--kbd-gap)) / 10)}.game-kb-row--enter{--kbd-row-unit:calc((100% - 8 * var(--kbd-gap)) / 10.26)}@media (width<=420px){.game-kb-row--enter{--kbd-gap:4px}}.game-key{flex:0 1 var(--kbd-row-unit);min-width:0;width:var(--kbd-row-unit);max-width:var(--kbd-row-unit);height:min(54px, max(44px, calc(var(--kbd-row-unit) * 1.42)));cursor:pointer;letter-spacing:.05em;min-height:44px;font-family:Outfit,sans-serif;font-weight:600;font-size:clamp(11px, calc(var(--kbd-row-unit) * .395), 15px);touch-action:manipulation;border-radius:6px;padding:0 6px;transition:background .15s,transform 80ms;overflow:hidden}.game-key:active{transform:scale(.93)}.game-key--wide{flex:0 1 calc(var(--kbd-row-unit) * 1.63);width:calc(var(--kbd-row-unit) * 1.63);max-width:calc(var(--kbd-row-unit) * 1.63);letter-spacing:.04em;font-size:clamp(9px, calc(var(--kbd-row-unit) * .316), 12px)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes tile-reveal{0%{background:var(--pre-bg);border-color:var(--pre-border);color:var(--pre-color);transform:perspective(300px)scale(1)rotateX(0)}12%{background:var(--pre-bg);border-color:var(--pre-border);color:var(--pre-color);transform:perspective(300px)scale(1.1)rotateX(0)}45%{background:var(--pre-bg);border-color:var(--pre-border);color:var(--pre-color);transform:perspective(300px)scale(1.05)rotateX(-90deg)}55%{background:var(--post-bg);border-color:var(--post-border);color:var(--post-color);transform:perspective(300px)scale(1.05)rotateX(-90deg)}85%{background:var(--post-bg);border-color:var(--post-border);color:var(--post-color);transform:perspective(300px)scale(1)rotateX(0)}93%{background:var(--post-bg);border-color:var(--post-border);color:var(--post-color);transform:perspective(300px)scale(1.04)rotateX(2deg)}to{background:var(--post-bg);border-color:var(--post-border);color:var(--post-color);transform:perspective(300px)scale(1)rotateX(0)}}@keyframes bounce-in{0%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.08)}to{transform:scale(1)}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(-8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.tile-reveal{animation:.7s ease-in-out both tile-reveal}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.5}}.timer-pulse{animation:1s ease-in-out infinite timer-pulse}.tile-pop{animation:.1s pop}.row-shake{animation:.4s shake}.header-stats-row{justify-content:space-between;align-items:center;max-width:500px;min-height:56px;margin:0 auto;display:flex;overflow:hidden}.header-side{flex:1 1 0;align-items:center;gap:16px;min-width:0;display:flex}.header-side-right{justify-content:flex-end;gap:8px}.header-center{text-align:center;flex:0 auto;min-width:0;overflow:hidden}.header-player-row{border-top:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;gap:8px;width:100%;min-width:0;max-width:500px;margin:0 auto;padding:4px 8px 10px;display:flex}body.dark .header-player-row{border-top-color:#1e1e2e}body.light .header-player-row{border-top-color:#e5e7eb}.header-title{letter-spacing:.24em;text-overflow:ellipsis;white-space:nowrap;font-size:28px;overflow:hidden}.header-badge-value{font-size:22px}@media (width<=420px){.header-logout{display:none}.header-title{letter-spacing:.14em;font-size:22px}.header-badge-value{font-size:18px}}