:root{
  --bg:#120d1f;--panel:#1d1630;--panel2:#2a2045;--line:#3a2f5c;--ink:#f6f1e7;--muted:#a99fc4;
  --gold:#f0c040;--silver:#cfd3dc;--bronze:#c98048;--accent:#ff4f8b;
  --q:#4b3394;--studio:#c96a22;--shop:#178a7c;--control:#2a62c4;--penalty:#b42f45;--back:#7d2a3a;--bonus:#2f8a40;--corner:#3a2d62;
  --display:'Bungee',Impact,'Arial Black',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(circle at 20% 0%,#2a1650 0%,var(--bg) 55%) fixed;color:var(--ink);font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
.btn{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;transition:transform .08s,background .15s}
.btn:hover:not(:disabled){background:#352a57}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,#ffd35a,#e3a51f);color:#2a1a00;border-color:#ffd35a}
.btn.primary:hover:not(:disabled){background:linear-gradient(180deg,#ffe07d,#f0b42a)}
.btn.danger{background:#5a1f2c;border-color:#8d2c41}
.btn.small{padding:6px 10px;font-size:13px}
.btn.big{font-size:20px;padding:14px 28px;font-family:var(--display);letter-spacing:.5px}

/* ---------- setup ---------- */
.setup{max-width:640px;margin:0 auto;padding:28px 16px 60px}
.logo{font-family:var(--display);font-size:clamp(34px,8vw,64px);line-height:.95;margin:0;text-align:center;background:linear-gradient(180deg,#ffe58a,#f0a020 60%,#c96a22);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #000)}
.tag{text-align:center;color:var(--muted);margin:8px 0 22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:14px}
.card h3{margin:0 0 12px;font-size:15px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.count{display:flex;gap:8px;flex-wrap:wrap}
.count button{width:48px;height:48px;border-radius:12px;font-size:20px;font-weight:800}
.count button.on{background:var(--gold);color:#2a1a00;border-color:var(--gold)}
.prow{display:grid;grid-template-columns:44px 1fr 150px;gap:8px;align-items:center;margin-bottom:8px}
.prow .dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:20px}
input,select,textarea{background:#140f24;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit;width:100%}
textarea{min-height:64px;resize:vertical}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.err{color:#ff8a9c;min-height:20px;text-align:center;font-weight:600}

/* ---------- game layout ---------- */
.game{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;max-width:1360px;margin:0 auto;padding:10px}
@media (max-width:960px){.game{grid-template-columns:1fr}}
.boardwrap{display:flex;justify-content:center}
.board{display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);gap:2px;aspect-ratio:1/1;width:min(100%,calc(100vh - 28px));background:#0a0713;padding:4px;border-radius:14px;box-shadow:0 10px 40px #0008;position:relative}
@media (max-width:960px){.board{width:100%}}
.sq{position:relative;border-radius:4px;background:var(--panel2);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.05;cursor:pointer;font-size:clamp(6px,.85vw,10.5px);font-weight:600;padding:1px}
.sq .ic{font-size:clamp(11px,1.9vw,24px);line-height:1}
.sq .lb{margin-top:2px;max-width:100%;overflow:hidden}
.sq .pr{opacity:.8;font-weight:400;margin-top:1px}
@media (max-width:640px){.sq .lb,.sq .pr{display:none}.sq .ic{font-size:4.2vw}}
.sq.q{background:linear-gradient(160deg,#5a3fae,var(--q))}
.sq.studio{background:linear-gradient(160deg,#e07e30,var(--studio))}
.sq.shop{background:linear-gradient(160deg,#1fa695,var(--shop))}
.sq.control{background:linear-gradient(160deg,#3a7ae0,var(--control))}
.sq.penalty{background:linear-gradient(160deg,#d23d55,var(--penalty))}
.sq.back{background:linear-gradient(160deg,#9b3346,var(--back))}
.sq.bonus{background:linear-gradient(160deg,#3aa74e,var(--bonus))}
.sq.rest,.sq.start{background:linear-gradient(160deg,#4a3a7a,var(--corner))}
.sq.corner .ic{font-size:clamp(14px,2.6vw,34px)}
.sq.corner{font-size:clamp(6.5px,.95vw,12px)}
.sq .own{position:absolute;left:0;right:0;bottom:0;height:18%;min-height:3px}
.sq .ownt{position:absolute;left:1px;top:1px;font-size:clamp(7px,1vw,12px)}
.sq.hl{outline:3px solid #fff;outline-offset:-3px;z-index:2}
.tokens{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center;gap:1px;padding:1px;pointer-events:none}
.tok{width:clamp(12px,2.1vw,26px);height:clamp(12px,2.1vw,26px);border-radius:50%;display:grid;place-items:center;font-size:clamp(8px,1.4vw,17px);border:2px solid #fff;box-shadow:0 2px 4px #000a;transition:transform .2s}
.tok.cur{transform:scale(1.2);z-index:3}
@media (max-width:640px){.tok{width:4vw;height:4vw;font-size:2.6vw;border-width:1px}}

.centre{grid-row:2/11;grid-column:2/11;border-radius:10px;background:radial-gradient(circle at 50% 50%,#2b2148 0 8%,#0d0a17 8.5% 9.5%,#1a1430 10% 70%,#120d22 71%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1.2vw,14px);padding:clamp(6px,2vw,24px);overflow:hidden;text-align:center}
.centre .logo{font-size:clamp(16px,4vw,48px)}
.turn{font-size:clamp(13px,2vw,24px);font-weight:800;display:flex;align-items:center;gap:8px}
.turn .tok{width:clamp(22px,3.4vw,40px);height:clamp(22px,3.4vw,40px);font-size:clamp(14px,2.2vw,26px);transform:none}
.dice{display:flex;gap:clamp(6px,1.5vw,16px)}
.die{width:clamp(36px,6vw,72px);height:clamp(36px,6vw,72px);background:#fdfaf2;border-radius:18%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:14%;box-shadow:0 4px 0 #b9ae95,0 6px 14px #000a}
.die i{display:block;width:70%;height:70%;margin:auto;border-radius:50%;background:transparent}
.die i.p{background:#1b1430}
.die.roll{animation:shake .12s infinite}
@keyframes shake{0%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}100%{transform:rotate(-8deg)}}
.lastlog{font-size:clamp(10px,1.2vw,14px);color:var(--muted);max-width:90%;min-height:2.6em}
.lastlog div:first-child{color:var(--ink)}
.centre .btn.big{font-size:clamp(14px,2vw,22px);padding:clamp(8px,1.2vw,14px) clamp(16px,2.6vw,30px)}

.side{display:flex;flex-direction:column;gap:10px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;position:relative}
.pcard.cur{border-color:var(--gold);box-shadow:0 0 0 2px #f0c04055,0 0 24px #f0c04022}
.pcard .tok{width:36px;height:36px;font-size:20px;grid-row:1/3}
.pcard .nm{font-weight:800}
.pcard .st{font-size:12px;color:var(--muted)}
.pcard .cash{font-family:var(--display);font-size:20px;text-align:right}
.pcard .coins{grid-column:2/4;display:flex;gap:6px;flex-wrap:wrap;font-size:12px}
.pcard .props{grid-column:1/4;display:flex;gap:4px;flex-wrap:wrap}
.chip{font-size:11px;padding:2px 7px;border-radius:999px;background:#ffffff14;border:1px solid #ffffff22}
.coin{display:inline-flex;align-items:center;gap:3px}
.coin b{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:inset 0 -2px 0 #0004,0 0 0 1px #0006}
.coin.g b{background:radial-gradient(circle at 35% 35%,#fff3b0,var(--gold) 60%,#a77c10)}
.coin.s b{background:radial-gradient(circle at 35% 35%,#fff,var(--silver) 60%,#7d828c)}
.coin.b b{background:radial-gradient(circle at 35% 35%,#ffd2a8,var(--bronze) 60%,#7a451c)}
.tools{display:flex;gap:6px;flex-wrap:wrap}
.log{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;max-height:240px;overflow:auto;font-size:13px;color:var(--muted)}
.log div{padding:3px 0;border-bottom:1px solid #ffffff0d}
.log div:first-child{color:var(--ink)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:#05030bcc;backdrop-filter:blur(4px);display:grid;place-items:center;z-index:50;padding:14px}
.modal.hidden{display:none}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;width:min(520px,100%);max-height:92vh;overflow:auto;box-shadow:0 20px 60px #000c;animation:pop .18s ease-out}
.mcard.wide{width:min(760px,100%)}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.mcard h2{margin:0 0 10px;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.15}
.mcard p{line-height:1.45;margin:8px 0}
.mbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.mbtns .btn{flex:1 1 auto}
.pilehead{display:inline-block;padding:4px 10px;border-radius:999px;background:#ffffff14;font-weight:700;font-size:13px;margin-bottom:10px}
.qtext{font-family:Inter,system-ui,sans-serif!important;font-weight:800!important;font-size:20px!important}
.opts{display:grid;gap:8px;margin-top:12px}
.opt{background:#140f24;border:2px solid var(--line);border-radius:12px;padding:12px 14px;text-align:left;font-weight:600;cursor:pointer;font-size:16px}
.opt:hover:not(:disabled){border-color:var(--gold)}
.opt.right{border-color:#4ade80;background:#14361f}
.opt.wrong{border-color:#f87171;background:#3b1219}
.opt:disabled{cursor:default}
.result{margin-top:12px;font-size:17px;min-height:1px}
.ok{color:#4ade80}.bad{color:#f87171}
.piles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.piles button{padding:14px 10px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;font-weight:700;text-align:center}
.piles button:hover{border-color:var(--gold)}
.piles button .pi{font-size:28px;display:block}
.piles button small{display:block;color:var(--muted);font-weight:400;margin-top:3px}
.gamecard{border-radius:16px;padding:18px;margin-bottom:6px;text-align:center;border:2px solid #ffffff33}
.gamecard .big{font-size:44px}
.gamecard.control{background:linear-gradient(160deg,#3a7ae0,#1d3f86)}
.gamecard.penalty{background:linear-gradient(160deg,#d23d55,#701b2a)}
.gamecard.info{background:linear-gradient(160deg,#4a3a7a,#241a46)}
.pick{display:grid;gap:8px;margin-top:10px}
.pick button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);cursor:pointer;font-weight:700;text-align:left}
.pick button:hover{border-color:var(--gold)}
.pick button .tok{width:30px;height:30px;font-size:17px}
.pick button small{margin-left:auto;color:var(--muted);font-weight:400}
table.bids{width:100%;border-collapse:collapse;margin-top:8px}
table.bids td{padding:6px 4px;border-bottom:1px solid #ffffff14}
table.bids td:last-child{text-align:right;font-weight:800}
table.bids tr.win td{color:var(--gold)}
.podium{display:grid;gap:8px;width:min(100%,420px)}
.podium .pl{display:flex;align-items:center;gap:10px;background:#ffffff0d;border-radius:12px;padding:8px 12px;font-weight:700;font-size:clamp(12px,1.6vw,18px)}
.podium .pl:first-child{background:linear-gradient(90deg,#f0c04044,#ffffff0d);border:1px solid var(--gold)}
.podium .pl .m{margin-left:auto;font-family:var(--display)}
.rules h3{font-family:var(--display);font-weight:400;color:var(--gold);margin:16px 0 4px;font-size:16px}
.rules ul{margin:4px 0;padding-left:20px;line-height:1.5}
.qlist{max-height:260px;overflow:auto;margin-top:8px}
.qlist .qi{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px solid #ffffff12;font-size:13px}
.qlist .qi span{flex:1}
.formgrid{display:grid;gap:8px}
.formgrid .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#000d;border:1px solid var(--line);padding:10px 16px;border-radius:12px;z-index:60;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1}
.muted{color:var(--muted)}