*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{background:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100dvh;font-family:Outfit,system-ui,sans-serif;overflow-x:hidden}:root{--bg-base:#17191c;--bg-surface:#202327;--bg-raised:#292c32;--bg-glass:#25272dd9;--bg-glass-dark:#191b1feb;--text-primary:#e7e2da;--text-secondary:#afa99d;--text-muted:#6a707c;--accent-cyan:#47b6d1;--accent-purple:#996bc7;--accent-gold:#d7a542;--accent-danger:#d74242;--accent-success:#3db866;--border-subtle:#675e4c40;--border-medium:#8a7a5c59;--border-glow:#d7a54280;--tile-red:#833f3f;--tile-blue:#476b85;--tile-green:#437043;--tile-yellow:#947838;--tile-purple:#654979;--tile-orange:#8d5a35;--tile-teal:#407773;--tile-pink:#8b4b6b;--tile-size:min(9vw, 70px);--tile-gap:min(.8vw, 6px);--board-padding:18px;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--dur-fast:.15s;--dur-normal:.28s;--dur-slow:.45s;--z-board:10;--z-hud:20;--z-popup:50;--z-overlay:100}.visually-hidden{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.flex-center{justify-content:center;align-items:center;display:flex}.flex-col{flex-direction:column;display:flex}.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{background:var(--bg-raised);border-radius:3px}#app{flex-direction:column;min-height:100dvh;display:flex}.screen{animation:screen-enter var(--dur-slow) var(--ease-out) both;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:1.5rem;display:flex}@keyframes screen-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.glass-panel{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:0 4px 24px #0006,inset 0 1px #ffffff0f}.btn{border-radius:var(--radius-md);cursor:pointer;transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;user-select:none;letter-spacing:.01em;border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.75rem;font-family:inherit;font-size:1rem;font-weight:600;display:inline-flex}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg, var(--accent-cyan), #3494f4);color:#0e121b;box-shadow:0 2px 16px #3dd0f559}.btn-primary:hover:not(:disabled){transform:translateY(-1px)scale(1.02);box-shadow:0 4px 24px #3dd0f580}.btn-secondary{background:var(--bg-raised);color:var(--text-primary);border:1px solid var(--border-medium)}.btn-secondary:hover:not(:disabled){border-color:var(--border-glow);color:var(--accent-cyan);background:#2b2e3b}.btn-danger{background:linear-gradient(135deg, var(--accent-danger), #e85e30);color:#fff}.btn-ghost{color:var(--text-secondary);border:1px solid var(--border-subtle);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--text-primary);border-color:var(--border-medium)}.btn-lg{border-radius:var(--radius-lg);padding:1rem 2.5rem;font-size:1.125rem}.btn-sm{padding:.5rem 1.25rem;font-size:.875rem}.btn-full{width:100%}.input{background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;outline:none;padding:.75rem 1rem;font-family:inherit;font-size:1rem}.input:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 3px #3dd0f52e}.input::placeholder{color:var(--text-muted)}.input-code{letter-spacing:.25em;text-align:center;text-transform:uppercase;max-width:220px;font-size:1.5rem;font-weight:700}.logo{letter-spacing:-.04em;background:linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 60%, var(--accent-gold) 100%);-webkit-text-fill-color:transparent;user-select:none;background-clip:text;font-size:clamp(3rem,8vw,5.5rem);font-weight:800;line-height:1}.tagline{color:var(--text-secondary);letter-spacing:.02em;text-align:center;font-size:clamp(.875rem,2vw,1.125rem);font-weight:400}.heading-1{letter-spacing:-.02em;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700}.heading-2{letter-spacing:-.01em;font-size:clamp(1.125rem,3vw,1.75rem);font-weight:600}.heading-3{text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);font-size:1rem;font-weight:600}.menu-screen{text-align:center;gap:2.5rem}.menu-logo-area{flex-direction:column;align-items:center;gap:.75rem;display:flex}.menu-panel{flex-direction:column;gap:1rem;width:100%;max-width:360px;padding:2rem 2.5rem;display:flex}.menu-divider{color:var(--text-muted);align-items:center;gap:1rem;font-size:.8125rem;display:flex}.menu-divider:before,.menu-divider:after{content:"";background:var(--border-subtle);flex:1;height:1px}.join-row{gap:.5rem;display:flex}.join-row .input{flex:1}.lobby-screen{align-items:stretch;gap:1.5rem;width:100%;max-width:700px;margin:0 auto}.lobby-header{justify-content:space-between;align-items:center;gap:1rem;display:flex}.lobby-code-display{background:var(--bg-raised);border:1px solid var(--border-medium);border-radius:var(--radius-lg);align-items:center;gap:.75rem;padding:.6rem 1.25rem;display:flex}.lobby-code-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);font-size:.75rem;font-weight:600}.lobby-code-value{letter-spacing:.2em;color:var(--accent-cyan);font-family:Courier New,monospace;font-size:1.5rem;font-weight:800}.lobby-grid{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}@media (width<=600px){.lobby-grid{grid-template-columns:1fr}}.lobby-panel{flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.player-list{flex-direction:column;gap:.5rem;display:flex}.player-item{background:var(--bg-raised);border-radius:var(--radius-md);border:1px solid var(--border-subtle);transition:border-color var(--dur-fast);align-items:center;gap:.75rem;padding:.625rem .875rem;display:flex}.player-item.is-ready{border-color:#2fda7666}.player-avatar{background:linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2rem;height:2rem;font-size:.875rem;font-weight:700;display:flex}.player-name{flex:1;font-size:.9375rem;font-weight:500}.player-status{text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;font-weight:600}.player-status.ready{color:var(--accent-success)}.player-status.waiting{color:var(--text-muted)}.player-status.disconnected{color:var(--accent-danger)}.badge-host{text-transform:uppercase;letter-spacing:.1em;background:linear-gradient(135deg, var(--accent-gold), var(--accent-orange,#f48d34));-webkit-text-fill-color:transparent;background-clip:text;font-size:.6875rem;font-weight:700}.settings-grid{flex-direction:column;gap:.875rem;display:flex}.setting-row{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.setting-label{color:var(--text-secondary);font-size:.875rem;font-weight:500}.setting-value{color:var(--text-primary);font-size:.875rem;font-weight:600}.lobby-actions{justify-content:flex-end;gap:.75rem;display:flex}.game-screen{justify-content:flex-start;gap:0;height:100dvh;padding:0;overflow:hidden}.game-layout{grid-template-rows:auto 1fr auto;gap:.75rem;width:100%;max-width:1200px;height:100dvh;margin:0 auto;padding:.75rem;display:grid}.game-top-bar{border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--bg-glass-dark);backdrop-filter:blur(16px);justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}.game-center{justify-content:center;align-items:center;display:flex;overflow:hidden}.game-bottom-bar{border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--bg-glass-dark);backdrop-filter:blur(16px);align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}.board{gap:var(--tile-gap);padding:var(--board-padding);border-radius:var(--radius-xl);background:radial-gradient(circle,#202327,#121417);border:3px solid #34373d;display:grid;box-shadow:0 10px 40px #000c,inset 0 0 15px #000000e6,0 0 0 1px #8a7a5c4d}.tile{width:var(--tile-size);height:var(--tile-size);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur-normal) ease;user-select:none;will-change:transform;border:2px solid #0000;justify-content:center;align-items:center;display:flex;position:relative}.tile:hover:not(.tile--disabled){z-index:2;transform:scale(1.08)}.tile.tile--selected{z-index:3;border-color:#fff;transform:scale(1.1);box-shadow:0 0 0 3px #ffffff4d,0 4px 20px #ffffff26}.tile.tile--matched{animation:tile-shatter .65s var(--ease-out) forwards}.tile.tile--highlight{z-index:10;animation:tile-scale-highlight .4s var(--ease-spring) forwards;border-color:#fff;box-shadow:0 0 25px 6px #ffffffe6,inset 0 0 15px #fffc}.tile.tile--falling{animation:tile-fall-bounce .5s var(--ease-spring) both}.tile.tile--entering{animation:tile-enter .45s var(--ease-spring) both}.tile.tile--swapping-3d{z-index:5;animation:.35s ease-in-out both tile-swap-3d}.tile.tile--rejected{animation:tile-reject var(--dur-slow) ease both}@keyframes tile-scale-highlight{0%{filter:brightness();transform:scale(1)}50%{filter:brightness(1.7);transform:scale(1.18)}to{filter:brightness(1.5);transform:scale(1.15)}}@keyframes tile-shatter{0%{opacity:1;filter:brightness(1.5);transform:scale(1.15)}30%{opacity:.9;transform:scale(1.3)rotate(8deg)}to{opacity:0;transform:scale(0)rotate(25deg)}}@keyframes tile-swap-3d{0%{transform:scale(1)rotateY(0)}50%{transform:scale(1.2)rotateY(180deg)}to{transform:scale(1)rotateY(360deg)}}@keyframes tile-fall-bounce{0%{opacity:0;transform:translateY(-120%)}70%{opacity:1;transform:translateY(8%)}85%{transform:translateY(-3%)}to{transform:translateY(0)}}@keyframes tile-enter{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes tile-reject{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.tile{border:1px solid #0006;box-shadow:inset 1px 1px 1px #ffffff26,inset -2px -2px 4px #0009,0 4px 10px #00000080}.tile--red{background:linear-gradient(145deg,#8b4b4b,#602e2e)}.tile--blue{background:linear-gradient(145deg,#4f7692,#2e4c60)}.tile--green{background:linear-gradient(145deg,#497949,#2b502b)}.tile--yellow{background:linear-gradient(145deg,#9d8243,#685427)}.tile--purple{background:linear-gradient(145deg,#705086,#462e56)}.tile--orange{background:linear-gradient(145deg,#966440,#603d24)}.tile--teal{background:linear-gradient(145deg,#47857f,#295652)}.tile--pink{background:linear-gradient(145deg,#985275,#602e47)}.tile-shape{color:#e0dbd1e6;filter:drop-shadow(0 -1px #000000e6)drop-shadow(0 1px #fff3);pointer-events:none;flex-shrink:0;width:58%;height:58%}.turn-indicator{align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;display:flex}.turn-dot{background:var(--accent-cyan);width:10px;height:10px;box-shadow:0 0 8px var(--accent-cyan);border-radius:50%;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}.turn-name{color:var(--text-primary)}.is-my-turn .turn-name{color:var(--accent-cyan)}.timer-bar-wrap{align-items:center;gap:.75rem;display:flex}.timer-number{text-align:right;tabular-nums:true;font-variant-numeric:tabular-nums;min-width:2.25rem;color:var(--text-primary);transition:color var(--dur-fast) ease;font-size:1.5rem;font-weight:800}.timer-number.warning{color:var(--accent-danger)}.timer-ring{width:40px;height:40px;transform:rotate(-90deg)}.timer-ring-track{fill:none;stroke:var(--bg-raised);stroke-width:4px}.timer-ring-fill{fill:none;stroke:var(--accent-cyan);stroke-width:4px;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear, stroke var(--dur-fast) ease}.timer-ring-fill.warning{stroke:var(--accent-danger)}.secret-badge{border-radius:var(--radius-md);border:1px solid var(--border-medium);background:var(--bg-raised);align-items:center;gap:.5rem;padding:.5rem .875rem;display:flex}.secret-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-size:.6875rem;font-weight:600}.secret-tile{border-radius:4px;justify-content:center;align-items:center;width:28px;height:28px;display:flex;box-shadow:0 2px 8px #0000004d}.secret-tile .tile-shape{width:60%;height:60%}.score-bar-section{flex-direction:column;flex:1;gap:.375rem;display:flex}.score-bar-track{background:#1c1e22;border:1px solid #675e4c66;border-radius:999px;height:12px;position:relative;overflow:visible;box-shadow:inset 0 2px 4px #000c}.score-bar-fill{height:100%;transition:width .6s var(--ease-out);background:linear-gradient(90deg,#7345a1,#c69739);border-radius:999px;box-shadow:0 0 10px #d7a54266}.score-bar-marker{width:14px;height:22px;transition:left .6s var(--ease-out);border:1px solid #fff6;border-radius:4px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 6px #0009}.score-bar-marker--me{background:#8c59c0}.score-bar-marker--leader{background:#d29b2d}.score-bar-labels{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;justify-content:space-between;font-size:.6875rem;font-weight:500;display:flex}#popup-layer{pointer-events:none;z-index:var(--z-popup);position:fixed;inset:0}.score-popup{color:#fff;text-shadow:0 2px 8px #0009;pointer-events:none;white-space:nowrap;animation:popup-rise 2s var(--ease-out) forwards;font-size:1.5rem;font-weight:800;position:absolute}.score-popup:before{content:attr(data-label);text-align:center;opacity:.8;font-size:.875rem;font-weight:600;display:block}@keyframes popup-rise{0%{opacity:0;transform:translateY(0)scale(.8)}15%{opacity:1;transform:translateY(-20px)scale(1.1)}60%{opacity:1;transform:translateY(-60px)scale(1)}to{opacity:0;transform:translateY(-90px)scale(.9)}}.results-screen{gap:2rem;width:100%;max-width:700px;margin:0 auto}.results-header{text-align:center}.winner-crown{font-size:3rem;line-height:1}.winner-name{color:var(--accent-gold);font-size:1.5rem;font-weight:800}.results-list{flex-direction:column;gap:.625rem;display:flex}.result-item{background:var(--bg-raised);border-radius:var(--radius-md);border:1px solid var(--border-subtle);transition:border-color var(--dur-fast);align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.result-item.is-winner{background:#fac0380f;border-color:#fac03880}.result-rank{color:var(--text-muted);min-width:1.75rem;font-size:1.25rem;font-weight:800}.result-rank.gold{color:var(--accent-gold)}.result-name{flex:1;font-weight:600}.result-secret{border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.result-secret .tile-shape{width:60%;height:60%}.result-score{color:var(--accent-cyan);font-size:1.25rem;font-weight:800}.results-actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.cascade-badge{background:linear-gradient(135deg, var(--accent-gold), var(--accent-orange,#f48d34));color:#261a0d;border-radius:var(--radius-xl);z-index:var(--z-overlay);pointer-events:none;animation:cascade-badge-show 1.2s var(--ease-spring) forwards;padding:.5rem 1.5rem;font-size:2rem;font-weight:900;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(0);box-shadow:0 8px 40px #fac03880}@keyframes cascade-badge-show{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}20%{opacity:1;transform:translate(-50%,-50%)scale(1.15)}70%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.8)}}.loading-spinner{border:3px solid var(--border-subtle);border-top-color:var(--accent-cyan);border-radius:50%;width:40px;height:40px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.bg-orbs{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.bg-orb{filter:blur(80px);opacity:.12;border-radius:50%;position:absolute}.bg-orb-1{background:var(--accent-purple);width:60vw;height:60vw;top:-20%;left:-20%}.bg-orb-2{background:var(--accent-cyan);width:50vw;height:50vw;bottom:-15%;right:-15%}.bg-orb-3{background:var(--accent-gold);width:30vw;height:30vw;top:40%;left:40%}@media (width<=480px){:root{--tile-size:min(11vw, 52px);--tile-gap:3px;--board-padding:10px}.game-top-bar,.game-bottom-bar{gap:.5rem;padding:.5rem .75rem}.timer-number{font-size:1.25rem}}@media (width>=900px){:root{--tile-size:68px;--tile-gap:6px}}