/* assets/css/style.css — dark modern UI */
:root{
  --bg:#0b0f14;
  --panel:#111822;
  --panel-2:#0E141C;
  --text:#E6EEF7;
  --muted:#9BB0C7;
  --accent:#6EE7FF;
  --accent-2:#6fff9b;
  --danger:#ff6e6e;
  --ok:#50fa7b;
  --border:#1e2a39;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:var(--accent);text-decoration:none}
h1{font-size:28px;margin:0 0 16px}
h2{font-size:18px;margin:0 0 12px}
.wrap{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:14px;padding:16px;margin:0 0 16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}

.form label{display:block;margin:0 0 8px;font-weight:600;color:var(--muted)}
.form input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0b121a;color:var(--text);margin:6px 0 12px;outline:none}
.form button,button.primary, button{padding:10px 14px;border:none;border-radius:10px;background:var(--accent);color:#00202c;font-weight:700;cursor:pointer}
button[disabled]{opacity:.5;cursor:not-allowed}
.badge{font-size:12px;color:#001b11;background:var(--accent-2);padding:2px 8px;border-radius:999px;margin-left:8px}
.code{font-weight:700;letter-spacing:2px}
.share{width:100%;font-family:monospace}

.players{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.players li{background:rgba(255,255,255,.04);padding:6px 10px;border-radius:8px;border:1px solid var(--border)}

.muted{color:var(--muted)}
.error{color:var(--danger);margin-left:8px}

/* Scoreboard */
.scoreboard{width:100%;border-collapse:collapse}
.scoreboard th,.scoreboard td{border-bottom:1px solid var(--border);padding:8px}
.scoreboard tr.is-current{background:rgba(110,231,255,.08)}
.scoreboard .opened{color:var(--ok)}

/* Dice */
.dice{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.die{width:76px;height:76px;background:#fff;border-radius:14px;position:relative;box-shadow:inset 0 0 0 2px rgba(0,0,0,.1),0 10px 30px rgba(0,0,0,.25)}
.die .pip{width:12px;height:12px;background:#111;border-radius:50%;position:absolute}
/* pip positions (9-grid) */
.p1{top:10px;left:10px}
.p2{top:10px;left:calc(50% - 6px)}
.p3{top:10px;right:10px}
.p4{top:calc(50% - 6px);left:10px}
.p5{top:calc(50% - 6px);left:calc(50% - 6px)}
.p6{top:calc(50% - 6px);right:10px}
.p7{bottom:10px;left:10px}
.p8{bottom:10px;left:calc(50% - 6px)}
.p9{bottom:10px;right:10px}

.die.selected{outline:3px solid var(--accent);transform:translateY(-2px);}
.actions{display:flex;gap:8px;align-items:center}