:root{--bg:#050b1a;--pan:rgba(8,18,40,.92);--line:rgba(0,229,255,.28);--cy:#00e5ff;--bl:#1e5bff;--tx:#e6f6ff;--mut:#8fb2d6;--sha:#ff3d6e;--gua:#36a3ff;--inn:#3cff9a;--gold:#ffd166}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;height:100dvh;background:var(--bg);color:var(--tx);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
#cv{position:fixed;inset:0;width:100vw;height:100%;height:100dvh;display:block}
[hidden]{display:none!important}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(ellipse at center,rgba(5,11,26,.35),rgba(5,11,26,.85));z-index:10}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(2,6,16,.7);z-index:20}
.panel{background:var(--pan);border:1px solid var(--line);border-radius:18px;padding:20px 20px 16px;width:min(520px,100%);max-height:100%;overflow:auto;box-shadow:0 0 40px rgba(0,229,255,.12),inset 0 0 30px rgba(30,91,255,.08);backdrop-filter:blur(6px)}
.panel.wide{width:min(720px,100%)}
.brandrow{display:flex;align-items:center;gap:8px;cursor:pointer}
.brandtxt{font-weight:900;letter-spacing:.32em;color:var(--cy);font-size:14px}
.gtitle{margin:8px 0 4px;font-size:clamp(28px,7vw,44px);font-weight:900;letter-spacing:.02em;line-height:1.05}
.gtitle span{color:var(--cy);text-shadow:0 0 18px rgba(0,229,255,.7)}
.tag{color:var(--mut);margin:4px 0 12px;font-size:14px}
.wallet{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border-radius:999px;background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.35);color:var(--gold);font-size:15px}
.row{margin:12px 0;display:flex;flex-direction:column;gap:6px}
.row label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.row2{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.row2 .btn{flex:1}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{flex:1 1 auto;padding:9px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(30,91,255,.12);color:var(--tx);font-size:14px;cursor:pointer}
.seg button.on{background:linear-gradient(135deg,var(--bl),#0aa3d9);border-color:var(--cy);box-shadow:0 0 12px rgba(0,229,255,.4)}
.btn{padding:11px 16px;border-radius:14px;border:1px solid var(--cy);background:linear-gradient(135deg,var(--bl),#00b8d9);color:#fff;font-weight:800;font-size:15px;cursor:pointer;letter-spacing:.04em}
.btn.big{width:100%;padding:15px;font-size:20px;margin-top:6px;box-shadow:0 0 22px rgba(0,229,255,.35)}
.btn.ghost{background:rgba(30,91,255,.12);border-color:var(--line)}
.btn.sm{padding:6px 10px;font-size:13px}
.btn:active,.seg button:active{transform:scale(.97)}
.mhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}.mhead h2{margin:0;flex:1}
.x{background:none;border:0;color:var(--mut);font-size:22px;cursor:pointer}
.tabs{display:flex;gap:6px;margin-bottom:10px}.tabs button{flex:1;padding:9px;border-radius:12px;border:1px solid var(--line);background:rgba(30,91,255,.1);color:var(--tx);cursor:pointer;font-size:14px}.tabs button.on{border-color:var(--cy);background:rgba(0,229,255,.18)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.item{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(5,15,35,.8);display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.item .sw{width:100%;height:58px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:30px}
.item .nm{font-weight:800;font-size:14px}.item .pr{color:var(--gold);font-size:13px}.item .rar{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.item .btn{width:100%;padding:8px;font-size:13px}.item.eq{border-color:var(--cy);box-shadow:0 0 12px rgba(0,229,255,.3)}
.odds{width:100%;font-size:13px;color:var(--mut);text-align:left;margin:6px 0}.odds div{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed rgba(143,178,214,.2)}
.crate{grid-column:1/-1}
.fine{color:var(--mut);font-size:12px;margin:12px 0 0}
.howto{padding-left:18px;line-height:1.5;font-size:14px}.howto li{margin:6px 0}
.c-inn{color:var(--inn)}.c-sha{color:var(--sha)}.c-gua{color:var(--gua)}
input[type=range]{width:100%;accent-color:var(--cy)}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
.topbar{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center}
.pill{padding:6px 12px;border-radius:999px;background:rgba(5,12,30,.78);border:1px solid var(--line);font-weight:800;font-size:13px;letter-spacing:.06em;white-space:nowrap}
.pill.dim{color:var(--mut)}.pill.coin{color:var(--gold)}
.pill.r-innocent{color:var(--inn);border-color:rgba(60,255,154,.5)}.pill.r-shadow{color:var(--sha);border-color:rgba(255,61,110,.6)}.pill.r-guardian{color:var(--gua);border-color:rgba(54,163,255,.6)}.pill.r-dead{color:var(--mut)}
.timer{font-size:22px;font-weight:900;padding:4px 14px;border-radius:12px;background:rgba(5,12,30,.78);border:1px solid var(--line);min-width:78px;text-align:center;font-variant-numeric:tabular-nums}
.timer.low{color:var(--sha);border-color:var(--sha)}
.hint{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 46px);left:50%;transform:translateX(-50%);color:var(--tx);font-size:14px;background:rgba(5,12,30,.6);padding:5px 12px;border-radius:10px;text-align:center;max-width:92vw;transition:opacity .4s}
.feed{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 100px);right:max(12px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.feed div{background:rgba(5,12,30,.75);border:1px solid var(--line);border-radius:10px;padding:4px 10px;font-size:13px;animation:fin .25s}
@keyframes fin{from{opacity:0;transform:translateX(20px)}}
.spec{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:rgba(5,12,30,.82);border:1px solid var(--line);border-radius:14px;padding:8px 10px;pointer-events:auto;font-size:14px}
.acts{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));display:flex;gap:12px;align-items:flex-end}
.act{pointer-events:auto;width:92px;height:92px;border-radius:50%;border:2px solid var(--sha);background:radial-gradient(circle at 35% 30%,rgba(255,61,110,.55),rgba(60,0,20,.8));color:#fff;font-weight:900;font-size:15px;letter-spacing:.05em;touch-action:none}
.act.g{border-color:var(--gua);background:radial-gradient(circle at 35% 30%,rgba(54,163,255,.6),rgba(0,20,60,.85))}
.act.throw{width:70px;height:70px;font-size:12px;border-color:#ff9cb7}
.act.cd{opacity:.45}
.pause{pointer-events:auto;position:absolute;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(5,12,30,.78);color:var(--tx);font-size:18px}
.stick{position:absolute;left:max(26px,calc(env(safe-area-inset-left) + 14px));bottom:max(26px,env(safe-area-inset-bottom));width:120px;height:120px;border-radius:50%;border:2px solid rgba(0,229,255,.35);background:rgba(0,229,255,.07);opacity:.55;transition:opacity .15s}
.stick.on{opacity:1}
.stick .knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(0,229,255,.45);box-shadow:0 0 14px rgba(0,229,255,.6)}
.cross{position:absolute;left:50%;top:46%;width:8px;height:8px;margin:-4px;border-radius:50%;border:2px solid rgba(230,246,255,.7)}
.reveal{background:rgba(2,5,14,.9)}
.rcard{text-align:center;animation:pop .5s}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.you{letter-spacing:.4em;color:var(--mut);font-weight:700}
.rrole{font-size:clamp(46px,13vw,90px);font-weight:900;letter-spacing:.06em;margin:6px 0}
.rrole.innocent{color:var(--inn);text-shadow:0 0 30px rgba(60,255,154,.6)}.rrole.shadow{color:var(--sha);text-shadow:0 0 30px rgba(255,61,110,.7)}.rrole.guardian{color:var(--gua);text-shadow:0 0 30px rgba(54,163,255,.7)}
.rdesc{color:var(--tx);max-width:420px;margin:0 auto;font-size:16px}
.rcount{margin-top:18px;font-size:34px;font-weight:900;color:var(--cy)}
#end h2{margin:0;font-size:32px;font-weight:900}
.elist{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}
.elist div{padding:6px 10px;border-radius:10px;background:rgba(30,91,255,.1);font-size:14px;display:flex;justify-content:space-between}
.elist .gone{opacity:.55}
.earn{color:var(--gold);font-weight:800;margin:8px 0}
@media (max-height:500px){.panel{padding:12px}.gtitle{font-size:26px}.row{margin:6px 0}.btn.big{padding:10px}}
.act.jump{width:64px;height:64px;font-size:11px;border-color:var(--inn,#00e5ff);background:radial-gradient(circle at 35% 30%,rgba(0,229,255,.45),rgba(0,30,50,.8))}
#settings select{background:#0e1630;color:inherit;border:1px solid #2a3a66;border-radius:8px;padding:6px 8px;font:inherit}
@media (max-width:600px){.acts{flex-direction:column;align-items:flex-end;gap:10px}.topbar{left:max(8px,env(safe-area-inset-left));right:calc(max(12px,env(safe-area-inset-right)) + 48px);transform:none;justify-content:flex-start;gap:5px;flex-wrap:nowrap;overflow:hidden}.topbar .pill{font-size:11px;padding:5px 8px;letter-spacing:.02em}.topbar .timer{font-size:17px;min-width:56px;padding:3px 8px}}
@media (max-height:400px){.feed div:nth-child(n+4){display:none}}