:root{font-family:Segoe UI,Tahoma,sans-serif;color:#e5ecff;background:radial-gradient(circle at top,#1d2a46,#0b111e 60%)}@keyframes countdown-pulse{0%{opacity:0;transform:translateY(-8px) scale(1.9);filter:blur(1px)}25%{opacity:1;filter:blur(0)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes countdown-go-burst{0%{opacity:0;transform:scale(2.2);letter-spacing:.22em}35%{opacity:1;transform:scale(1.1);letter-spacing:.08em}to{opacity:1;transform:scale(1);letter-spacing:.04em}}@keyframes win-flash{0%{opacity:1;filter:saturate(1)}50%{opacity:.65;filter:saturate(1.5)}to{opacity:1;filter:saturate(1)}}@keyframes win-bounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.02)}}*{box-sizing:border-box}body{margin:0;min-height:100vh}#app{max-width:980px;margin:0 auto;padding:24px}.screen-shell{display:grid;gap:24px}.subtitle{margin:0 0 12px;color:#bfd3ff}.lobby-panel,.game-panel{width:100%}.game-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.ghost-btn{background:transparent;border-color:#bad1ff8c}.status-line,.winner-line{margin:8px 0 10px}.winner-line{color:#ffd58c;font-weight:700}.error-banner,.error-inline{margin:0 0 12px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,125,125,.55);background:#5f101a99;color:#ffd4d4;font-weight:600}.layout{display:grid;grid-template-columns:1fr 340px;gap:24px}.layout.match-live{grid-template-columns:1fr}.layout.match-live .panel{display:none}.panel,.board-wrap{background:#11192cd1;border:1px solid rgba(121,166,255,.28);border-radius:14px;padding:16px;position:relative;overflow:hidden}h1{margin:0 0 16px;font-size:28px}.form-row,.actions{display:flex;gap:8px;margin-bottom:10px;align-items:center}.lobby-room-actions{flex-wrap:nowrap}.lobby-room-actions button{flex:0 0 auto}.lobby-room-actions button+button{margin-left:6px}.lobby-room-actions input{flex:0 0 7ch;min-width:7ch}label{font-weight:600}input,select,button{border-radius:8px;border:1px solid rgba(133,181,255,.6);background:#142642e6;color:#ecf3ff;padding:9px 10px}input,select{flex:1}button{cursor:pointer;font-weight:600}button:hover:enabled{background:#2a4b7cf2}button:disabled:not(.tile){opacity:.45;cursor:not-allowed;border-color:#85b5ff40;background:#14264280}#status,#players{margin:10px 0 0}.celebration{position:relative;z-index:4;margin-top:12px;min-height:24px;color:#9ad8ff;opacity:0;transform:translateY(4px);transition:opacity .22s ease,transform .22s ease}.board-wrap .celebration{margin:0 0 12px}#boards-wrap{margin-top:12px}.match-actions{display:flex;justify-content:center;margin:0 0 12px;position:relative;z-index:5}.rematch-floating{min-width:180px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,214,131,.7);background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.34),transparent 45%),linear-gradient(135deg,#ffc86d,#ff9b58 58%,#ff6f8f);color:#1e1200;font-weight:800;letter-spacing:.2px;box-shadow:0 8px 18px #ff7e6b59}.rematch-floating:hover:enabled{filter:brightness(1.07)}.celebration.visible{opacity:1;transform:translateY(0)}.celebration.fancy{font-size:clamp(18px,2.4vw,30px);font-weight:800;text-align:center;letter-spacing:.4px;color:#fff;text-shadow:0 0 10px rgba(95,212,255,.95),0 0 18px rgba(255,216,106,.85),0 0 28px rgba(255,142,194,.75);animation:win-flash .42s steps(2,end) infinite,win-bounce .7s ease-in-out infinite}.boards{display:grid;grid-template-columns:1fr;gap:16px;position:relative;z-index:2}.confetti-layer{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:3}.countdown-overlay{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:7}.countdown-number{margin:0;font-size:clamp(84px,18vw,200px);font-weight:900;line-height:1;color:#f4fbff;text-shadow:0 0 18px rgba(93,214,255,.95),0 0 34px rgba(78,132,255,.7),0 8px 26px rgba(3,13,34,.7);animation:countdown-pulse .9s cubic-bezier(.16,.85,.24,1) both}.countdown-number.go{color:#fff0b8;text-transform:uppercase;text-shadow:0 0 16px rgba(255,219,118,.95),0 0 34px rgba(255,149,88,.82),0 8px 26px rgba(38,15,2,.62);animation:countdown-go-burst .52s cubic-bezier(.16,.85,.24,1) both}.confetti-piece{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;opacity:.95;animation:confetti-fall 1.2s ease-in forwards}.board-card{background:#091426d9;border:1px solid rgba(121,166,255,.35);border-radius:12px;padding:12px}.board-title{margin:0 0 10px;font-size:16px}.board-grid{display:grid;gap:8px;width:min(100%,420px)}.board-card-opponent .board-grid{width:min(80%,336px)}.tile{--slide-x: 0;--slide-y: 0;aspect-ratio:1 / 1;width:100%;border-radius:14px;border:1px solid rgba(244,250,255,.6);background:radial-gradient(circle at 22% 22%,rgba(255,255,255,.42),transparent 52%),linear-gradient(145deg,#7fe7ff,#44c6ff 40%,#3177f4);color:#fff;font-size:clamp(16px,2.7vw,28px);font-weight:800;text-shadow:0 2px 8px rgba(15,43,120,.55);box-shadow:inset 0 1px #ffffff73,inset 0 -6px 12px #051e5f47,0 8px 12px #02123859;transition:transform .12s ease,filter .12s ease}.tile:hover:enabled{transform:translateY(-1px);filter:brightness(1.09)}.tile-moved{animation:tile-slide .18s cubic-bezier(.2,.8,.22,1)}.tile-opponent-correct{border-color:#ffefb6e6;background:radial-gradient(circle at 24% 20%,rgba(255,255,255,.42),transparent 52%),linear-gradient(145deg,#ffd972,#ffa458 44%,#ff6b5d);text-shadow:0 2px 8px rgba(92,27,7,.45);box-shadow:inset 0 1px #ffffff7a,inset 0 -6px 12px #7c270038,0 8px 14px #892f0f54,0 0 0 1px #ffc96e5c}.tile:disabled{cursor:not-allowed;opacity:1}.tile.empty{background:radial-gradient(circle at 30% 30%,rgba(94,149,255,.2),transparent 55%),#090f1ef2;border:1px dashed rgba(134,182,255,.5);box-shadow:inset 0 0 0 1px #5082dc26}@keyframes tile-pop{0%{transform:scale(.9)}to{transform:scale(1)}}@keyframes tile-slide{0%{transform:translate(calc(var(--slide-x) * (100% + 8px)),calc(var(--slide-y) * (100% + 8px)))}to{transform:translate(0)}}@keyframes confetti-fall{0%{transform:translateZ(0) rotate(0);opacity:1}to{transform:translate3d(0,300px,0) rotate(360deg);opacity:0}}@media (max-width: 860px){.layout{grid-template-columns:1fr}#app{padding:12px}}