@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,700&display=swap');

:root { color-scheme: dark; --ink:#f8f3e8; --muted:#aaa2b2; --panel:#24202d; --line:#3a3345; --coral:#ff7657; --yellow:#ffd166; --violet:#a78bfa; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:#18151f; color:var(--ink); font-family:"DM Sans",sans-serif; background-image:radial-gradient(circle at 10% 20%,#2e2134 0,transparent 36%),radial-gradient(circle at 90% 80%,#1d2c35 0,transparent 38%); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { position:relative; width:min(680px,calc(100% - 32px)); margin:auto; padding:28px 0 56px; }
header { display:flex; align-items:center; justify-content:space-between; margin-bottom:48px; }
.brand { color:var(--ink); font-weight:700; text-decoration:none; letter-spacing:-.04em; font-size:1.15rem; }.brand span { color:var(--coral); }
.connection { color:var(--muted); font-size:.8rem; }
.card { background:rgba(36,32,45,.9); border:1px solid var(--line); border-radius:28px; padding:clamp(28px,7vw,56px); box-shadow:0 28px 80px #09070c66; }
.eyebrow { margin:0 0 12px; color:var(--yellow); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; }
h1 { font-family:"Fraunces",serif; font-size:clamp(2.75rem,9vw,5.2rem); line-height:.94; letter-spacing:-.055em; margin:0 0 24px; }
h1 em { color:var(--coral); font-style:normal; }
.lede { color:var(--muted); font-size:1.03rem; line-height:1.65; max-width:480px; margin:0 0 32px; }
label { display:block; color:var(--ink); font-size:.86rem; font-weight:600; margin-bottom:14px; } label span { color:var(--muted); font-weight:400; float:right; }
input { display:block; width:100%; margin-top:9px; border:1px solid var(--line); border-radius:14px; padding:15px 16px; background:#18151f; color:var(--ink); outline:none; } input:focus { border-color:var(--violet); box-shadow:0 0 0 3px #a78bfa22; }
.primary,.secondary { border:0; border-radius:14px; font-weight:700; }
.primary { display:flex; justify-content:space-between; width:100%; padding:16px 18px; background:var(--coral); color:#21161a; box-shadow:0 9px 24px #ff76572c; }.primary:hover { transform:translateY(-1px); filter:brightness(1.06); }.primary:disabled { opacity:.48; cursor:not-allowed; transform:none; }
.secondary { background:transparent; border:1px solid var(--line); color:var(--ink); padding:10px 13px; }.secondary:hover { border-color:var(--muted); }
.game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.game-tile { position:relative; aspect-ratio:1; min-height:0; padding:18px; border:1px solid var(--line); border-radius:18px; background:#18151f; color:var(--ink); text-align:left; display:flex; flex-direction:column; justify-content:space-between; transition:transform .16s,border-color .16s,background .16s; }
.game-tile:hover { transform:translateY(-3px); border-color:var(--coral); background:#211b28; }.game-tile:disabled { opacity:.5; cursor:wait; transform:none; }
.game-tile > span:last-of-type { display:flex; flex-direction:column; }.game-tile strong { font-size:1.05rem; }.game-tile small { color:var(--muted); margin-top:3px; }.game-tile b { position:absolute; right:18px; bottom:22px; color:var(--coral); font-size:1.25rem; }
.chess-icon { display:grid!important; place-items:center; width:76px; aspect-ratio:1; border:1px solid var(--line); border-radius:16px; color:var(--yellow); font-family:Georgia,serif; font-size:3.5rem; line-height:1; }
.quiet-link { display:block; color:var(--muted); text-align:center; margin-top:20px; font-size:.85rem; }
.room-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }.room-bar .eyebrow { margin-bottom:4px; }.room-bar strong { font-family:"Fraunces",serif; font-size:1.7rem; letter-spacing:.05em; }
.players { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }.player { background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:14px; min-width:0; color:var(--ink); text-align:left; font:inherit; }.player.mine { cursor:pointer; }.player.mine:hover { border-color:var(--violet); background:#2e2839; }.player.active { border-color:var(--yellow); }.player small { display:block; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }.player strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:4px; }.player .mark { float:right; color:var(--coral); font-family:"Fraunces"; font-size:1.5rem; line-height:1; }
.status { min-height:46px; text-align:center; font-weight:600; color:var(--muted); padding:8px 0 16px; }.status strong { color:var(--ink); }
.board { aspect-ratio:1; width:100%; max-width:480px; margin:0 auto 22px; }
.chess-board { position:relative; overflow:hidden; border:2px solid #6c6250; border-radius:14px; background-color:#cbbf9f; background-image:linear-gradient(#6c625022 1px,transparent 1px),linear-gradient(90deg,#6c625022 1px,transparent 1px),radial-gradient(circle at 50% 50%,#fff8df55,transparent 65%); background-size:12.5% 12.5%,12.5% 12.5%,100% 100%; touch-action:none; box-shadow:inset 0 0 42px #4437212b,0 18px 50px #09070c55; }
.chess-board::after { content:""; position:absolute; inset:3.125%; border:1px dashed #3f372c35; border-radius:50%; pointer-events:none; }
.move-rays { position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; pointer-events:none; }.move-ray { stroke:#d94f36; stroke-width:1.05; stroke-linecap:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 1px 1px #fff8); }.move-ray.leap { stroke-dasharray:2.2 1.5; }.move-ray.capture { stroke:#6f48d9; stroke-width:1.45; }.ray-end { fill:#d94f36; stroke:#fff3; stroke-width:.4; }.ray-end.capture { fill:#6f48d9; }
.chess-piece { position:absolute; z-index:2; transform:translate(-50%,-50%); display:grid; place-items:center; width:7.4%; aspect-ratio:1; padding:0; border:1px solid #2d2925; border-radius:50%; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.55rem,7vw,2.35rem); line-height:1; box-shadow:0 3px 7px #1e171166; transition:left .18s,top .18s,transform .12s; touch-action:none; user-select:none; -webkit-user-select:none; }
.chess-piece.white { color:#28231e; background:#f5efdf; text-shadow:0 1px #fff; }.chess-piece.black { color:#f7eed9; background:#29251f; text-shadow:0 1px #000; }
.chess-piece:hover { z-index:3; transform:translate(-50%,-50%) scale(1.13); }.chess-piece.selected { z-index:4; outline:3px solid var(--coral); outline-offset:3px; transform:translate(-50%,-50%) scale(1.13); }
.chess-piece.dragging { transition:none; cursor:grabbing; transform:translate(-50%,-50%) scale(1.18); }
.compact { max-width:480px; margin:0 auto; justify-content:center; }
.rules-link { display:block; width:max-content; margin:-8px auto 22px; color:var(--muted); font-size:.82rem; text-underline-offset:3px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,18px); background:var(--ink); color:#18151f; padding:10px 16px; border-radius:999px; font-weight:700; opacity:0; pointer-events:none; transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:520px) { header { margin-bottom:28px; }.card { border-radius:22px; }.room-bar { align-items:flex-start; }.secondary { font-size:.78rem; }.chess-piece { width:8.5%; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }