:root{--bg:#0b0f14;--card:rgba(255,255,255,.06);--text:rgba(255,255,255,.92);--muted:rgba(255,255,255,.65);--line:rgba(255,255,255,.12);--shadow:0 10px 40px rgba(0,0,0,.35);--radius:18px;--accent:#69ff3b;--accent2:rgba(105,255,59,.22)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:radial-gradient(1200px 700px at 20% 0%, rgba(105,255,59,.12), transparent 60%),radial-gradient(900px 600px at 100% 10%, rgba(255,77,109,.10), transparent 55%),var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}.topbar{position:sticky;top:0;z-index:10;backdrop-filter:blur(12px);background:rgba(10,14,20,.75);border-bottom:1px solid var(--line);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;gap:12px;align-items:center}.dot{width:14px;height:14px;border-radius:999px;background:var(--accent);box-shadow:0 0 18px var(--accent)}.title{font-weight:800;letter-spacing:.2px}.subtitle{font-size:12px;color:var(--muted);max-width:56ch}.container{max-width:980px;margin:0 auto;padding:16px;display:grid;gap:14px}.card{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}h2{margin:0 0 12px;font-size:18px}.grid2{display:grid;grid-template-columns:1fr;gap:12px}@media(min-width:720px){.grid2{grid-template-columns:1fr 1fr}.actions{grid-column:1/-1}}.field span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}input,select{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.25);color:var(--text);outline:none}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent2)}.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--text);padding:12px 14px;border-radius:14px;cursor:pointer;font-weight:650}.btn:hover{background:rgba(255,255,255,.10)}.btn.primary{border-color:rgba(255,255,255,.22);background:linear-gradient(180deg,var(--accent2),rgba(255,255,255,.06))}.btn.subtle{background:transparent;border-color:rgba(255,255,255,.12);color:var(--muted)}.btn:disabled{opacity:.45;cursor:not-allowed}.hint{margin-top:10px;color:var(--muted);font-size:13px}.row{display:flex;align-items:center;gap:12px}.row.between{justify-content:space-between}.row.wrap{flex-wrap:wrap}.gap{gap:10px}.stack{display:flex;flex-direction:column;gap:8px}.stack.right{align-items:flex-end;text-align:right}.badge{font-size:12px;color:var(--muted);border:1px solid rgba(255,255,255,.14);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05)}.pill{border:1px solid rgba(255,255,255,.14);padding:8px 10px;border-radius:999px;color:var(--muted);font-size:12px}.qr{width:180px;height:180px;background:rgba(255,255,255,.06);border-radius:14px;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;overflow:hidden}.qr svg{width:100%;height:100%}.players{display:flex;flex-direction:column;gap:8px;margin-top:8px}.player{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}.pname{display:flex;align-items:center;gap:10px;min-width:0}.swatch{width:12px;height:12px;border-radius:999px;background:var(--accent);box-shadow:0 0 14px var(--accent);flex:0 0 auto}.pname .nick{font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pname .meta{font-size:12px;color:var(--muted)}.pstats{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;display:flex;gap:10px;align-items:center}.dead{opacity:.45}.note{color:var(--muted);font-size:12px}.label{color:var(--muted);font-size:12px}.turnline{font-size:16px;font-weight:800}.stepline{color:var(--muted);font-size:13px;margin-top:2px}.seqline{color:var(--muted);font-size:13px}.board{margin:14px 0;width:100%;max-width:420px;aspect-ratio:1/1;display:grid;gap:10px;touch-action:none;user-select:none}.tile{border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);position:relative;overflow:hidden}.tile::after{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 55%);opacity:.8;transform:rotate(20deg)}.tile.active{border-color:color-mix(in srgb,var(--accent) 65%, rgba(255,255,255,.2));box-shadow:0 0 0 3px rgba(0,0,0,.12) inset,0 0 24px color-mix(in srgb,var(--accent) 80%, transparent);background:color-mix(in srgb,var(--accent2) 55%, rgba(255,255,255,.06))}.tile.play{animation:pop .18s ease-out}@keyframes pop{from{transform:scale(.96)}to{transform:scale(1)}}.divider{height:1px;background:var(--line);margin:14px 0}.preview{display:flex;flex-direction:column;gap:8px;margin-top:8px;max-width:420px}.move{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.16);border-radius:14px;padding:10px 12px}.move .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.move .by{display:flex;align-items:center;gap:8px;min-width:0}.move .by .swatch{width:10px;height:10px}.move .by .name{font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.move .kind{color:var(--muted);font-size:12px}.move .tiles{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(10,14,20,.92);border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow);padding:12px 14px;border-radius:14px;color:var(--text);max-width:min(520px, calc(100% - 24px))}.hidden{display:none!important}.tiny{color:var(--muted);font-size:12px}.winner{font-size:16px;font-weight:800;margin:8px 0 12px}

.qr img{width:100%;height:100%;object-fit:contain;display:block}

.tile.flash{
  border-color: color-mix(in srgb, var(--flash, var(--accent)) 65%, rgba(255,255,255,.2));
  box-shadow: 0 0 0 3px rgba(0,0,0,.12) inset, 0 0 24px color-mix(in srgb, var(--flash, var(--accent)) 80%, transparent);
  background: color-mix(in srgb, var(--flash, var(--accent)) 20%, rgba(255,255,255,.06));
}

.tile.held{
  border-color: color-mix(in srgb, var(--flash, var(--accent)) 65%, rgba(255,255,255,.2));
  box-shadow: 0 0 0 3px rgba(0,0,0,.12) inset, 0 0 24px color-mix(in srgb, var(--flash, var(--accent)) 80%, transparent);
  background: color-mix(in srgb, var(--flash, var(--accent)) 20%, rgba(255,255,255,.06));
}