.mode-switch{display:flex;align-items:center;gap:3px;border:1px solid var(--color-border);border-radius:999px;padding:3px;background:color-mix(in srgb,var(--color-background) 58%,transparent);box-shadow:inset 0 1px #ffffff0b}.mode-btn{min-height:30px;border:0;border-radius:999px;padding:0 12px;background:transparent;color:var(--color-text-muted);font-size:.76rem;font-weight:850;line-height:1;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}.mode-btn--active{background:var(--color-text-primary);color:var(--color-background);box-shadow:0 8px 20px #0607093d}.mode-btn:hover:not(.mode-btn--active){background:var(--color-surface-hover);color:var(--color-text-primary)}.mode-btn:active{transform:translateY(1px) scale(.98)}@media(prefers-color-scheme:light){.mode-switch{background:#ffffff8a}}@media(max-width:420px){.mode-btn{min-height:27px;padding:0 10px;font-size:.72rem}}.header{position:sticky;top:0;z-index:900;width:100%;border-bottom:1px solid var(--color-border);background:var(--color-chrome);box-shadow:0 1px #ffffff09;backdrop-filter:blur(22px) saturate(150%)}.header-container{width:100%;max-width:76rem;min-height:var(--app-header-height);margin:0 auto;padding:10px 18px;display:grid;grid-template-columns:minmax(150px,1fr) max-content max-content max-content;align-items:center;gap:14px}.header-pill{display:inline-flex;min-height:28px;align-items:center;border:1px solid color-mix(in srgb,var(--color-correct) 42%,var(--color-border));border-radius:999px;padding:0 11px;background:color-mix(in srgb,var(--color-correct) 12%,transparent);color:var(--color-correct-strong);font-size:.72rem;font-weight:800}.header-play{display:flex;align-items:center;justify-content:center;gap:10px}.header-nav{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}.brand-link{display:flex;align-items:center;gap:10px;min-width:0;color:var(--color-text-primary);text-decoration:none}.brand-mark{display:grid;width:38px;height:38px;flex:0 0 auto;place-items:center;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:linear-gradient(145deg,color-mix(in srgb,var(--color-correct) 88%,white 5%),var(--color-correct)),var(--color-correct);color:#fff;font-family:var(--font-display);font-size:1.15rem;font-weight:850;line-height:1;box-shadow:0 12px 28px #1c352142}.brand-copy{min-width:0;display:flex;flex-direction:column}.title{font-family:var(--font-display);font-size:1.34rem;font-weight:850;line-height:1;text-transform:uppercase}.title-subtitle{margin-top:3px;color:var(--color-text-muted);font-size:.64rem;font-weight:800;line-height:1;text-transform:uppercase}.header-auth{min-width:0;display:flex;justify-content:flex-end}.header-user{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.header-username{max-width:138px;min-height:36px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--color-border);border-radius:999px;padding:0 11px;background:color-mix(in srgb,var(--color-surface) 82%,transparent);overflow:hidden;color:var(--color-text-secondary);font-size:.82rem;font-weight:700}.header-username span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--color-border);border-radius:999px;padding:0 13px;background:color-mix(in srgb,var(--color-surface) 84%,transparent);color:var(--color-text-primary);font-size:.82rem;font-weight:800;line-height:1;cursor:pointer;transition:transform var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast)}.header-btn svg{flex:0 0 auto}.header-btn--primary{border-color:#4c9059a8;background:var(--color-correct);color:#fff}.header-btn--ghost{color:var(--color-text-secondary)}.header-btn--tool{min-height:36px;padding:0 12px;color:var(--color-text-secondary);font-size:.76rem}.header-btn:hover{border-color:var(--color-border-strong);background:var(--color-surface-hover)}.header-btn--primary:hover{background:var(--color-correct-strong)}.header-btn:active{transform:translateY(1px) scale(.98)}@media(prefers-color-scheme:light){.brand-mark{box-shadow:0 12px 28px #406d4933}}@media(max-width:1180px){.header-container{grid-template-columns:minmax(132px,1fr) auto auto;grid-template-areas:"brand play auth" "nav nav nav";gap:9px 10px;padding:9px 12px}.brand-link{grid-area:brand}.header-play{grid-area:play}.header-nav{grid-area:nav;justify-content:stretch}.header-nav .header-btn{flex:1 1 0}.header-auth{grid-area:auth}}@media(max-width:640px){.header-container{min-height:var(--app-header-height);grid-template-columns:minmax(104px,1fr) auto auto;gap:8px;padding-inline:10px}.header-pill{display:none}.brand-link{gap:8px}.brand-copy{max-width:76px}.brand-mark{width:34px;height:34px;font-size:1rem}.title{font-size:1.05rem}.title-subtitle{font-size:.56rem}.header-username{max-width:42px;padding-inline:9px}.header-username span{display:none}.header-btn{min-height:34px;padding:0 10px;font-size:.76rem}.header-btn--tool{min-height:30px;min-width:0;padding:0;font-size:.7rem}.header-nav{gap:6px}.header-nav .header-btn{min-width:0}.header-nav .header-btn span,.header-auth .header-btn span{display:none}.header-btn--primary,.header-btn--ghost{width:36px;padding:0}}@media(max-height:760px){.header-container{padding-top:8px;padding-bottom:8px}}.cell{width:100%;aspect-ratio:1;min-height:50px;display:flex;align-items:center;justify-content:center;border:2px solid var(--color-empty);border-radius:var(--radius-xs);background:#12141757;color:var(--color-text-primary);font-size:2rem;font-weight:800;line-height:1;text-transform:uppercase;user-select:none;transform-style:preserve-3d;transition:border-color var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast)}.cell.filled{border-color:var(--color-border-strong);background:#272a306b;animation:tile-pop .11s ease-out}.cell.correct,.cell.present,.cell.absent{animation:tile-flip .7s cubic-bezier(.22,1,.36,1) forwards;box-shadow:inset 0 1px #ffffff1f}.cell.correct{border-color:var(--color-correct);background:var(--color-correct)}.cell.present{border-color:var(--color-present);background:var(--color-present)}.cell.absent{border-color:var(--color-absent);background:var(--color-absent)}@keyframes tile-pop{0%{transform:scale(.96)}70%{transform:scale(1.045)}to{transform:scale(1)}}@keyframes tile-flip{0%{transform:rotateX(0)}48%{transform:rotateX(90deg)}52%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@media(max-width:380px){.cell{min-height:46px;font-size:1.65rem}}@media(max-height:760px){.cell{min-height:44px;font-size:1.7rem}}.row{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}@media(max-width:640px){.row{gap:5px}}.game-board{width:min(100%,350px);display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:6px;margin:auto 0;padding:8px 0}@media(max-width:640px){.game-board{width:min(100%,320px);gap:5px;padding:6px 0}}@media(max-height:760px){.game-board{width:min(100%,304px);gap:5px;padding:4px 0}}.key{flex:1 1 0;min-width:0;height:58px;border:1px solid hsl(220 7% 62% / .18);border-radius:var(--radius-sm);padding:0 4px;background:#7b808a;color:#fff;font-size:.92rem;font-weight:800;line-height:1;text-transform:uppercase;cursor:pointer;touch-action:manipulation;user-select:none;box-shadow:inset 0 1px #ffffff1f;transition:transform var(--transition-fast),filter var(--transition-fast),background var(--transition),opacity var(--transition)}.key.wide{flex:1.52 1 0;font-size:.76rem}.key:hover:not(:disabled){filter:brightness(1.08)}.key:active:not(:disabled){transform:translateY(1px) scale(.96)}.key.correct{border-color:#65ae746b;background:var(--color-correct)}.key.present{border-color:#e0bb4d66;background:var(--color-present)}.key.absent{border-color:#4c505770;background:var(--color-absent);color:#e6e6e6c2}.key:disabled{cursor:not-allowed;opacity:.62}@media(max-width:640px){.key{height:56px;border-radius:var(--radius-xs);font-size:.86rem}.key.wide{font-size:.7rem}}@media(max-width:380px){.key{height:52px;font-size:.78rem}}@media(max-height:760px){.key{height:48px;font-size:.82rem}.key.wide{font-size:.68rem}}.keyboard{width:min(100%,520px);display:flex;flex-direction:column;gap:8px;margin:0 auto;padding:4px 0 2px}.keyboard-row{width:100%;display:flex;justify-content:center;gap:6px}@media(max-width:640px){.keyboard{gap:7px}.keyboard-row{gap:4px}}@media(max-height:760px){.keyboard{width:min(100%,500px);gap:5px;padding-bottom:0}.keyboard-row{gap:5px}}.toast{position:fixed;top:calc(var(--app-header-height) + 14px);left:50%;z-index:1100;display:inline-flex;align-items:center;gap:8px;max-width:min(92vw,420px);transform:translate(-50%);border:1px solid var(--color-border);border-radius:999px;padding:10px 14px;background:var(--color-panel);color:var(--color-text-primary);box-shadow:var(--shadow-pop);backdrop-filter:blur(16px) saturate(145%);font-size:.86rem;font-weight:850;line-height:1.2;pointer-events:none;animation:toast-in .18s ease,toast-out .26s ease 2.7s forwards}.toast svg{flex:0 0 auto}.toast--warning{border-color:#ddb64061;color:var(--color-present-strong)}.toast--error{border-color:#ef617961;color:var(--color-danger)}.toast--success{border-color:#51a96361;color:var(--color-correct-strong)}.toast--info{border-color:#56c2e657;color:var(--color-info)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-6px) scale(.98)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@keyframes toast-out{to{opacity:0;transform:translate(-50%) translateY(-6px) scale(.98)}}@media(max-width:640px){.toast{top:calc(var(--app-header-height) + 10px);font-size:.78rem}}.App{--app-shell-max-width: 44rem;width:100%;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden}.game-shell{width:100%;max-width:var(--app-shell-max-width);min-height:calc(100dvh - var(--app-header-height));margin:0 auto;padding:18px 16px 20px;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:space-between;gap:16px}.game-status-strip{width:min(100%,352px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--color-border) 86%,var(--color-correct));border-radius:999px;background:color-mix(in srgb,var(--color-surface) 86%,transparent);color:var(--color-text-secondary);box-shadow:inset 0 1px #ffffff0e,var(--shadow-pop);backdrop-filter:blur(16px) saturate(140%);font-size:.82rem;font-weight:700;line-height:1}.game-status-strip span:first-child{color:var(--color-text-primary);font-weight:850}.game-status-strip span:last-child{color:var(--color-text-muted);font-variant-numeric:tabular-nums}.see-results-section{display:flex;justify-content:center;width:min(100%,352px);padding:22px 0 8px}.see-results-btn{width:100%;min-height:54px;border:1px solid hsl(132 31% 43% / .72);border-radius:999px;padding:0 28px;background:linear-gradient(180deg,var(--color-correct-strong),var(--color-correct));color:#fff;font-family:var(--font-display);font-size:1rem;font-weight:850;line-height:1;cursor:pointer;box-shadow:0 16px 34px #1c352147;transition:filter var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}.see-results-btn:hover{filter:brightness(1.06);box-shadow:0 20px 42px #1c352157}.see-results-btn:active{transform:translateY(1px) scale(.98)}.app-loading,.app-error{width:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;color:var(--color-text-secondary);text-align:center}.App .app-error{min-height:calc(100dvh - var(--app-header-height))}.spinner{width:42px;height:42px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-correct) 0 50%,var(--color-present) 50% 100%);box-shadow:var(--shadow-pop);animation:spin .94s cubic-bezier(.76,0,.24,1) infinite}.app-loading p,.app-error p{color:var(--color-text-secondary);font-size:.95rem;font-weight:600}.app-error button{min-height:42px;padding:0 22px;border:1px solid hsl(132 31% 43% / .58);border-radius:var(--radius-md);background:var(--color-correct);color:#fff;font-weight:800;cursor:pointer;transition:transform var(--transition-fast),filter var(--transition-fast),box-shadow var(--transition-fast)}.app-error button:hover{filter:brightness(1.08);box-shadow:0 10px 22px #23432a38}.app-error button:active{transform:translateY(1px) scale(.98)}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1180px){.App{--app-header-height: 114px}}@media(max-width:640px){.game-shell{min-height:calc(100dvh - var(--app-header-height));padding:12px 10px 14px;gap:10px}.game-status-strip{width:min(100%,320px);font-size:.76rem}}@media(max-height:760px){.game-shell{min-height:calc(100dvh - var(--app-header-height));padding-top:8px;padding-bottom:4px;gap:8px}.game-status-strip{padding:7px 11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:1ms!important}}*{box-sizing:border-box;margin:0;padding:0}:root{color-scheme:dark;font-family:Aptos,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-synthesis:none;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-display: "Aptos Display", "Aptos", "Segoe UI", system-ui, sans-serif;--app-header-height: 68px;--color-background: hsl(215 14% 7%);--color-background-soft: hsl(214 12% 10%);--color-chrome: hsl(214 13% 8% / .78);--color-surface: hsl(214 10% 15% / .74);--color-surface-strong: hsl(214 10% 17% / .96);--color-surface-hover: hsl(214 9% 24% / .9);--color-panel: hsl(214 10% 16% / .96);--color-panel-raised: hsl(214 10% 20% / .94);--color-border: hsl(214 8% 31% / .68);--color-border-strong: hsl(214 7% 47% / .72);--color-text-primary: hsl(0 0% 98%);--color-text-secondary: hsl(214 8% 72%);--color-text-muted: hsl(214 7% 55%);--color-correct: hsl(132 31% 43%);--color-correct-strong: hsl(132 35% 49%);--color-present: hsl(45 54% 47%);--color-present-strong: hsl(45 70% 56%);--color-absent: hsl(220 7% 28%);--color-empty: hsl(220 8% 31%);--color-danger: hsl(350 82% 66%);--color-info: hsl(195 68% 61%);--shadow-soft: 0 28px 72px hsl(214 18% 3% / .46);--shadow-pop: 0 14px 30px hsl(214 18% 3% / .28);--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 16px;--radius-xl: 22px;--transition-fast: .14s ease;--transition: .22s ease}@media(prefers-color-scheme:light){:root{color-scheme:light;--color-background: hsl(42 14% 96%);--color-background-soft: hsl(42 13% 92%);--color-chrome: hsl(42 16% 96% / .82);--color-surface: hsl(0 0% 100% / .78);--color-surface-strong: hsl(0 0% 100% / .96);--color-surface-hover: hsl(210 13% 92% / .95);--color-panel: hsl(0 0% 100% / .96);--color-panel-raised: hsl(42 15% 98% / .98);--color-border: hsl(215 10% 78% / .82);--color-border-strong: hsl(215 9% 62% / .86);--color-text-primary: hsl(214 18% 12%);--color-text-secondary: hsl(214 9% 35%);--color-text-muted: hsl(214 7% 47%);--color-absent: hsl(214 8% 70%);--color-empty: hsl(214 9% 74%);--shadow-soft: 0 24px 64px hsl(214 18% 22% / .16);--shadow-pop: 0 12px 28px hsl(214 18% 22% / .12)}}html{min-height:100%;background:var(--color-background);letter-spacing:0}body{min-width:320px;min-height:100dvh;background:linear-gradient(180deg,var(--color-background-soft) 0%,var(--color-background) 44%,var(--color-background) 100%);color:var(--color-text-primary);transition:background-color var(--transition),color var(--transition)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--color-present-strong);outline-offset:3px}::selection{background:#4c905959}#root{width:100%;min-height:100dvh}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}