:root { --bg:#0e0e0f; --card:#151517; --text:#e6e6e6; --muted:#9aa0a6; --accent:#7c4dff; --accent2:#00d4ff; --green:#27c93f; --red:#ff5555; }
* { box-sizing:border-box }
html,body { height:100% }
body { margin:0; background:radial-gradient(1200px 600px at 15% 10%, rgba(124,77,255,.06), transparent), radial-gradient(900px 400px at 85% 20%, rgba(0,212,255,.07), transparent), linear-gradient(180deg, #101013, #0b0b0c); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial; }
.hidden { display:none }
.wrap { max-width:1100px; margin:40px auto; padding:0 16px }
.card { background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border:1px solid #1a1a1a; border-radius:16px; padding:20px; box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04) }
.title { font-size:28px; font-weight:700; letter-spacing:.5px; margin-bottom:10px; background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.row { display:flex; gap:8px; margin:10px 0 }
.row.small { color:var(--muted); font-size:13px }
input { background:#0c0c0d; border:1px solid #242428; color:var(--text); padding:10px 12px; border-radius:10px; outline:none; flex:1; min-width:0 }
button { background:linear-gradient(180deg, #1e1e22, #151518); color:var(--text); border:1px solid #2a2a2e; padding:10px 14px; border-radius:10px; cursor:pointer; transition:transform .05s ease, box-shadow .15s ease; box-shadow:0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03) }
button:hover { box-shadow:0 6px 18px rgba(0,0,0,.45) }
button:active { transform:translateY(1px) }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:8px 0 16px; border-bottom:1px solid #1a1a1a; margin-bottom:16px }
.roomcode { font-weight:700; letter-spacing:.5px }
.badge { display:inline-block; background:#232329; border:1px solid #2a2a2e; padding:2px 6px; border-radius:8px; font-size:12px; margin-left:8px }
.cols { display:grid; grid-template-columns: 320px 1fr; gap:16px }
.section { background:#101014; border:1px solid #1a1a1a; border-radius:12px; padding:12px; margin-bottom:12px }
.section-title { font-size:14px; color:var(--muted); margin-bottom:8px }
#players { display:flex; flex-direction:column; gap:6px }
.player { display:flex; justify-content:space-between; align-items:center; background:#0d0d10; border:1px solid #1c1c20; border-radius:10px; padding:8px 10px }
.player .name { display:flex; align-items:center; gap:8px }
.dot { width:8px; height:8px; border-radius:50%; background:#666 }
.dot.on { background:var(--green) }
.score { font-weight:700 }
.black { background:#0a0a0b; color:#fff; border:1px solid #202023; border-radius:10px; padding:14px; line-height:1.4; font-weight:700; min-height:76px }
.hand { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px }
.white { background:#f8f8f8; color:#111; border-radius:10px; padding:12px; min-height:72px; cursor:pointer; border:2px solid transparent; user-select:none }
.white.sel { border-color:var(--accent) }
#submitRow { display:flex; justify-content:flex-end; margin-top:8px }
#subs { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px }
.sub { background:#0d0d10; border:1px solid #1c1c20; border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px }
.sub .chip { background:#f8f8f8; color:#111; padding:8px; border-radius:8px; font-weight:600 }
#status { color:var(--muted) }
#share { margin-top:12px; padding:8px 10px; border-radius:10px; background:#0e0e10; border:1px solid #1a1a1a }
@media (max-width: 900px) {
  .cols { grid-template-columns:1fr }
  .hand { grid-template-columns: repeat(2, 1fr) }
  #subs { grid-template-columns: 1fr }
}