:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0d10;
  color: #f4f4f5;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #0b0d10; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; padding: 20px; max-width: 920px; margin: 0 auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.brand { font-weight:750; letter-spacing:.02em; }
.meta { color:#a1a1aa; font-size:.9rem; }
.panel { background:#13161b; border:1px solid #262a31; border-radius:18px; padding:18px; }
.stack { display:grid; gap:14px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px){ .grid2{grid-template-columns:1fr;} }
input, select { width:100%; background:#0e1116; color:#fff; border:1px solid #303640; border-radius:12px; padding:12px 14px; }
button { border:0; border-radius:12px; padding:11px 14px; background:#f4f4f5; color:#111318; font-weight:700; }
button.secondary { background:#232730; color:#f5f5f5; }
button.danger { background:#8f1d1d; color:#fff; }
button:disabled { opacity:.45; cursor:not-allowed; }
.code { font:800 2.5rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.22em; }
.players { display:grid; gap:8px; }
.player { display:flex; justify-content:space-between; padding:10px 12px; border-radius:11px; background:#0e1116; }
.dials { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:640px){ .dials{grid-template-columns:repeat(2,1fr);} }
.dial { border-radius:18px; padding:18px; text-align:center; border:1px solid rgba(255,255,255,.12); }
.dial .name { font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; opacity:.8; }
.dial .value { font-size:3.2rem; font-weight:800; line-height:1.1; }
.dial.orange{background:#5b2b08}.dial.yellow{background:#5b4b08}.dial.blue{background:#0b355b}.dial.red{background:#5b1010}
.choice-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.choice-card { display:flex; align-items:center; justify-content:center; min-height:54px; cursor:pointer; font-weight:700; border:1px solid #303640; border-radius:12px; background:#0e1116; transition:transform .12s, outline .12s; }
.choice-card:hover { transform:translateY(-1px); }
.choice-card.selected { outline:3px solid #fff; border-color:#fff; }
.choice-card input { position:absolute; opacity:0; width:1px; height:1px; }
.effect-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.role-heading, .section-title, .role-card { display:flex; gap:12px; align-items:center; }
.role-svg { width:42px; height:42px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.role-card { background:#0e1116; border-radius:12px; padding:11px; }
.role-card .role-svg { width:28px; height:28px; }
.role-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
@media (max-width:640px){ .role-grid{grid-template-columns:1fr;} }
.small { font-size:.88rem; color:#a1a1aa; }
.card-list { display:grid; gap:8px; }
.card-line { background:#0e1116; border-radius:10px; padding:9px 11px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.78); display:grid; place-items:center; padding:18px; z-index:10; }
.modal-card { width:min(520px,100%); background:#15181e; border:1px solid #303640; border-radius:20px; padding:20px; }
.role-title { font-size:1.8rem; font-weight:800; margin:0 0 10px; }
.notice { padding:12px; border-radius:12px; background:#272b34; }
.win { font-size:1.8rem; font-weight:800; }
hr { border:0; border-top:1px solid #2a2e36; margin:8px 0; }
.legal { max-width:920px; margin:0 auto; padding:0 20px 20px; color:#717784; font-size:.76rem; line-height:1.4; text-align:center; }