:root{--bg-0: #0e1217;--bg-1: #161b22;--bg-2: #1d242d;--line: #2a323d;--text: #e7ecf3;--muted: #8a96a6;--accent: #d4a45a;--accent-2: #b07b34;--good: #5cc28c;--warn: #e0a040;--danger: #e16060;--board: #4a3322;--board-2: #2f2014;--cell: #d9c19a;--cell-2: #c1a376;--piece-light: #f3e3c4;--piece-light-2: #d8c194;--piece-dark: #2b2e36;--piece-dark-2: #11141a;--shadow: rgba(0, 0, 0, .45)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:radial-gradient(1200px 800px at 20% -10%,rgba(212,164,90,.08),transparent 60%),radial-gradient(900px 700px at 100% 110%,rgba(80,130,200,.07),transparent 60%),linear-gradient(180deg,var(--bg-0),#0a0d12);min-height:100vh;overflow-x:hidden}button{font:inherit;cursor:pointer}input{font:inherit}.lobby{display:grid;place-items:center;min-height:100vh;padding:24px}.lobby-card{width:100%;max-width:460px;background:linear-gradient(180deg,var(--bg-1),var(--bg-2));border:1px solid var(--line);border-radius:18px;padding:32px 28px;box-shadow:0 30px 80px #0006,inset 0 1px #ffffff08}.title{font-family:Cormorant Garamond,serif;font-weight:700;font-size:56px;margin:0;letter-spacing:1px}.title-q{color:var(--accent);background:linear-gradient(180deg,#f0c887,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{color:var(--muted);margin:4px 0 22px}.showcase{display:flex;gap:10px;justify-content:center;align-items:end;height:80px;margin-bottom:24px;padding:14px;border-radius:12px;background:linear-gradient(180deg,#2b1d12,#1a1109);border:1px solid rgba(255,255,255,.04)}.field{margin-bottom:14px}.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}.field input,.code-input{width:100%;background:#0e1218;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s}.field input:focus,.code-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #d4a45a33}.code-input{text-transform:uppercase;letter-spacing:4px;font-weight:700;text-align:center}.lobby-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}.join-row{display:flex;gap:8px}.join-row .code-input{flex:1}.btn{background:var(--bg-2);color:var(--text);border:1px solid var(--line);padding:11px 18px;border-radius:10px;font-weight:600;transition:transform .05s,background .15s,border-color .15s}.btn:hover{background:#232c37}.btn:active{transform:translateY(1px)}.btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#2a1d08;border-color:#0003;box-shadow:0 8px 18px #d4a45a40}.btn-primary:hover{filter:brightness(1.05);background:linear-gradient(180deg,#e8b76e,#c0883a)}.btn-ghost{background:transparent}.error{margin-top:14px;color:var(--danger);background:#e160601a;border:1px solid rgba(225,96,96,.3);padding:8px 12px;border-radius:8px;font-size:14px}.how-to{margin-top:20px;color:var(--muted);font-size:14px}.how-to summary{cursor:pointer;color:var(--text);margin-bottom:6px}.game-wrap{max-width:1100px;margin:0 auto;padding:18px 22px 40px}.topbar{display:flex;align-items:center;gap:16px;margin-bottom:14px}.brand{font-family:Cormorant Garamond,serif;font-size:28px;font-weight:700}.room-pill{margin-left:auto;background:var(--bg-1);border:1px solid var(--line);padding:6px 12px;border-radius:999px;font-size:13px;color:var(--muted);letter-spacing:1px}.room-pill b{color:var(--accent);letter-spacing:2px}.players{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:8px}.player{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--bg-1);border:1px solid var(--line);border-radius:999px;transition:border-color .2s,box-shadow .2s}.player.turn{border-color:var(--accent);box-shadow:0 0 0 3px #d4a45a26}.player.winner{border-color:var(--good);box-shadow:0 0 0 3px #5cc28c33}.player-name{font-weight:600}.dot{width:9px;height:9px;border-radius:50%;background:#555}.dot.on{background:var(--good);box-shadow:0 0 8px var(--good)}.dot.off{background:#555}.vs{color:var(--muted);font-size:12px;letter-spacing:2px}.status{text-align:center;margin:14px 0 22px;font-size:15px;color:var(--muted)}.main{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}@media (max-width: 900px){.main{grid-template-columns:1fr}}.board-side{display:flex;flex-direction:column;align-items:center;gap:18px}.incoming{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--bg-1);border:1px solid var(--line);border-radius:14px;min-height:84px}.incoming-label{color:var(--muted);font-size:13px}.reset{margin-top:6px}.board{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:8px;padding:14px;width:min(92vw,480px);aspect-ratio:1 / 1;background:radial-gradient(120% 80% at 30% 0%,rgba(255,255,255,.05),transparent 60%),linear-gradient(135deg,var(--board),var(--board-2));border-radius:16px;box-shadow:0 30px 60px #00000080,inset 0 1px #ffffff14,inset 0 -2px #00000080;border:1px solid rgba(0,0,0,.4)}.cell{position:relative;min-width:0;min-height:0;overflow:hidden;background:linear-gradient(180deg,var(--cell),var(--cell-2));border-radius:10px;box-shadow:inset 0 2px #fff6,inset 0 -3px 6px #0000002e;display:grid;place-items:center;transition:transform .1s,box-shadow .15s}.cell.empty.playable{cursor:pointer}.cell.empty.playable:after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:8px;border:2px dashed rgba(75,50,20,.35);opacity:0;transition:opacity .15s}.cell.empty.playable:hover:after{opacity:1}.cell.win{box-shadow:inset 0 2px #fff6,inset 0 -3px 6px #0000002e,0 0 0 3px var(--good),0 0 22px #5cc28c80}.piece{position:relative;display:grid;place-items:end center;animation:drop .25s ease-out}@keyframes drop{0%{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}.piece-md{width:72px;height:78px}.piece-sm{width:44px;height:50px}.piece-lg{width:96px;height:108px}.piece-body{position:relative;width:70%;border-radius:50%;background:linear-gradient(180deg,var(--piece-light),var(--piece-light-2));box-shadow:inset 0 2px #fff9,inset 0 -4px 6px #0003,0 4px 6px #0000004d}.piece-top{position:absolute;top:0;left:50%;transform:translate(-50%,-55%);width:100%;height:28%;background:linear-gradient(180deg,var(--piece-light),var(--piece-light-2));border-radius:50%;box-shadow:inset 0 2px #ffffffb3,inset 0 -3px 4px #00000026}.piece-shadow{position:absolute;bottom:-4px;width:60%;height:8px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent 70%);filter:blur(1px);z-index:-1}.piece.tall .piece-body{height:78%}.piece.short .piece-body{height:50%}.piece.dark .piece-body{background:linear-gradient(180deg,var(--piece-dark),var(--piece-dark-2))}.piece.dark .piece-top{background:linear-gradient(180deg,#353841,var(--piece-dark));box-shadow:inset 0 2px #ffffff2e,inset 0 -3px 4px #00000080}.piece.square .piece-body{border-radius:8px}.piece.square .piece-top{border-radius:6px}.piece-hole{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35%;height:35%;border-radius:50%;background:radial-gradient(circle at 50% 35%,#2a1f10,#100a04);box-shadow:inset 0 3px 6px #000000b3}.piece.square .piece-hole{border-radius:4px}.piece.highlighted .piece-body{box-shadow:inset 0 2px #fff9,inset 0 -4px 6px #0003,0 0 0 2px var(--accent),0 0 16px #d4a45a8c}.piece.selectable{cursor:pointer;transition:transform .1s}.piece.selectable:hover{transform:translateY(-3px)}.piece.disabled{cursor:not-allowed;opacity:.55}.piece.selected .piece-body{box-shadow:0 0 0 2px var(--accent),0 0 14px #d4a45a80}.sidebar{background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:16px}.sidebar h3{margin:0 0 10px;font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:1.5px}.tray{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;background:linear-gradient(180deg,#2b1d12,#1a1109);border-radius:10px;border:1px solid rgba(255,255,255,.04)}.tray-slot{display:grid;place-items:center;height:60px;background:#ffffff05;border-radius:8px;border:1px dashed rgba(255,255,255,.05)}.tray-slot.used{opacity:.35}.placed-marker{color:#ffffff26;font-size:18px}.chat{display:flex;flex-direction:column;background:#0e1218;border:1px solid var(--line);border-radius:10px;height:220px}.chat-log{flex:1;overflow-y:auto;padding:10px;font-size:14px;display:flex;flex-direction:column;gap:4px}.chat-empty{color:var(--muted);font-size:13px}.chat-line.me{color:var(--accent)}.chat-line.them{color:var(--text)}.typing-row{display:flex;align-items:center;gap:8px;height:18px;padding:2px 10px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}.typing-label{font-style:italic}.typing-dots{display:inline-flex;gap:3px}.typing-dots i{width:5px;height:5px;background:var(--muted);border-radius:50%;display:inline-block;animation:typingBlink 1.2s infinite ease-in-out}.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}@keyframes typingBlink{0%,80%,to{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}.chat-input{display:flex;border-top:1px solid var(--line)}.chat-input input{flex:1;background:transparent;color:var(--text);border:none;padding:10px;outline:none}.chat-input button{border:none;border-left:1px solid var(--line);border-radius:0}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#e16060f2;color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;box-shadow:0 10px 30px #0006}.player-score{margin-left:10px;font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent);background:#d4a45a1a;padding:2px 8px;border-radius:999px;font-size:13px}.spectator-pill{text-align:center;font-size:12px;color:var(--muted);margin-top:2px}.endgame{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:4px}.replay{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}.replay-step{font-variant-numeric:tabular-nums}.board-stage{position:relative}.reactions-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.floater{position:absolute;font-size:48px;animation:floatUp 2.2s ease-out forwards;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}.floater.from-me{right:12%;bottom:10%}.floater.from-opp{left:12%;bottom:10%}@keyframes floatUp{0%{transform:translateY(0) scale(.5);opacity:0}15%{transform:translateY(-20px) scale(1.2);opacity:1}to{transform:translateY(-220px) scale(1);opacity:0}}.reactions-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.react-btn{background:var(--bg-1);border:1px solid var(--line);border-radius:999px;font-size:20px;width:40px;height:40px;display:grid;place-items:center;transition:transform .1s,background .15s}.react-btn:hover{background:var(--bg-2);transform:translateY(-2px)}.react-btn:active{transform:scale(.95)}.tray-slot.danger{border-color:#e1606099;box-shadow:inset 0 0 0 1px #e1606066,0 0 12px #e1606040;background:#e1606014}.tray-slot.danger:before{content:"⚠";position:absolute;top:2px;right:4px;font-size:10px;color:var(--danger)}.tray-slot{position:relative}.sidebar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.sidebar-head h3{margin:0}.toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer}.toggle input{accent-color:var(--accent)}.chat-line.info{color:var(--muted);font-style:italic}@media (max-width: 700px){.game-wrap{padding:12px 12px 32px}.topbar{gap:8px}.brand{font-size:22px}.room-pill{padding:4px 10px;font-size:12px}.players{flex-wrap:wrap;gap:6px}.vs{order:3;width:100%;text-align:center}.player{padding:6px 10px}.player-name{font-size:14px}.main{gap:16px}.board{width:min(96vw,420px);padding:10px;gap:6px}.piece-md{width:56px;height:64px}.piece-sm{width:38px;height:44px}.sidebar{padding:12px}.tray{gap:6px;padding:8px}.tray-slot{height:52px}.chat{height:180px}.reactions-row{gap:4px}.react-btn{width:36px;height:36px;font-size:18px}}.mute-btn{position:absolute;top:14px;right:14px;background:transparent;border:1px solid var(--line);color:var(--text);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:16px;transition:background .15s,border-color .15s}.mute-btn:hover{background:var(--bg-2);border-color:var(--accent)}.lobby-card{position:relative}.icon-btn{padding:6px 10px;font-size:16px}.loading{display:grid;place-items:center;min-height:60vh;color:var(--muted)}