:root{--bg:#0b1118;--panel:#141d27;--line:#243445;--text:#e6edf3;--dim:#8b9bab;--acc:#46d39a;--warn:#f0a030;--bad:#e5534b;--sel:#4cc3ff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.screen{max-width:560px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-left)) 40px}
.screen[hidden],[hidden]{display:none!important}
h1{letter-spacing:.35em;font-weight:800;margin:24px 0 4px;text-align:center}
h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:22px 0 8px}
.sub{color:var(--dim);text-align:center;margin:0 0 24px}
input{width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:1rem;margin-bottom:10px}
#code{text-transform:uppercase;text-align:center;letter-spacing:.3em;margin:0}
button{padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:1rem;cursor:pointer}
button:active{transform:scale(.98)}
button.primary{background:var(--acc);color:#04130c;border-color:var(--acc);font-weight:700;width:100%}
button:disabled{opacity:.45}
.row{display:flex;gap:10px}.row>*{flex:1}
.or{text-align:center;color:var(--dim);margin:16px 0 8px;font-size:.9rem}
.hint{color:var(--dim);font-size:.85rem;text-align:center}
.game{padding-top:8px}
header{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px}
#status{font-weight:600}#round{color:var(--dim);font-size:.85rem;white-space:nowrap}
#timer{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin:2px 0 8px}
#timer i{display:block;height:100%;width:0;background:var(--sel)}
#timer.run i{width:100%;transition:width var(--t) linear}
#timer.run.go i{width:0}
.board-wrap{background:#0f1720;border:1px solid var(--line);border-radius:12px;padding:4px}
#board{display:block;width:100%;height:auto;max-height:78vh;touch-action:manipulation;user-select:none}
#board text{font-family:system-ui,sans-serif;pointer-events:none}
.tok{transition:transform .65s cubic-bezier(.4,.1,.2,1)}
.tok.dead{opacity:.35}
.hl{fill:rgba(76,195,255,.22);stroke:var(--sel);stroke-width:.05;cursor:pointer;animation:pulse 1.1s ease-in-out infinite}
.hl.stim{stroke:#c58cff;fill:rgba(197,140,255,.2)}
.hl.mon{stroke:var(--bad);fill:rgba(229,83,75,.2)}
@keyframes pulse{50%{fill-opacity:.55}}
.cardback{fill:#1d3a4a;stroke:#4d7f99;stroke-width:.04}
.flash{animation:flash .9s ease-out}
@keyframes pop{from{opacity:0}to{opacity:1}}
.pop{animation:pop .7s ease-out}
@keyframes flash{0%{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(1.8)}100%{opacity:1;transform:scale(1)}}
#decision{background:var(--panel);border:1px solid var(--sel);border-radius:12px;padding:12px;margin:10px 0}
#decision-title{font-weight:600;margin-bottom:8px}
#decision-buttons{display:flex;flex-wrap:wrap;gap:8px}
#decision-buttons button{flex:1 1 40%}
.dash{display:grid;grid-template-columns:120px 1fr;gap:10px;margin-top:10px}
.wheel-box{position:relative;width:120px;height:130px;padding-top:12px}
.pointer{position:absolute;top:-2px;left:50%;transform:translateX(-50%);color:var(--warn);font-size:1rem;z-index:2}
#wheel{width:120px;height:120px;transition:transform 1.5s cubic-bezier(.15,.7,.2,1)}
#die{position:absolute;left:50%;top:calc(50% + 6px);transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--bg);border:2px solid var(--warn);display:grid;place-items:center;font-weight:800;font-size:1.2rem}
#heroes-panel{display:flex;flex-direction:column;gap:6px}
.hp{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:.85rem;border-left:5px solid var(--c)}
.hp.me{border-color:var(--acc);border-left:5px solid var(--c)}
.hp.act{box-shadow:0 0 0 2px var(--warn) inset}
.hp.dead{opacity:.55}
.hp .t{display:flex;justify-content:space-between;gap:6px}
.hp .inv{color:var(--dim);font-size:.75rem}
#log{list-style:none;padding:0;margin:12px 0 0;font-size:.85rem;color:var(--dim);max-height:200px;overflow:auto;display:flex;flex-direction:column-reverse}
#log li{padding:2px 0;border-bottom:1px dashed #1b2733}#log li.b{color:var(--text)}
#end{position:fixed;inset:0;background:rgba(5,9,13,.9);display:grid;place-items:center;text-align:center;padding:24px;z-index:9}
#end h1{margin:0 0 10px}
#toast{position:fixed;left:50%;top:10px;transform:translateX(-50%);background:var(--bad);color:#fff;padding:8px 14px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:20;max-width:90vw}
#toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){.tok,#wheel{transition:none}.hl{animation:none}}

/* 3D-доска: с первого раунда вместо плоской */
#board3d{display:none;width:100%;aspect-ratio:1/1;max-height:78vh;border-radius:9px;touch-action:none}
.board-wrap.d3 #board3d{display:block}
.board-wrap.d3 #board{display:none}
.fly-item{position:fixed;width:80px;height:80px;z-index:30;pointer-events:none;transition:transform .7s cubic-bezier(.5,0,.7,1),opacity .7s ease-in;filter:drop-shadow(0 0 10px #ffd24a)}
#bag.got{animation:bagGot .5s ease-out}@keyframes bagGot{40%{transform:scale(1.18)}}

/* начальный экран и лобби: живой 3D-фон или рисованный запасной */
body:not(.game-on){background:radial-gradient(ellipse at 50% 30%,#1c2a3c 0%,#0b1118 60%),#0b1118}
body:not(.game-on)::before{content:"";position:fixed;inset:0;background:url(img/world/room_out.webp) center/cover;opacity:.22;filter:blur(1px) saturate(.8);z-index:0;pointer-events:none}
#title3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
#title-veil{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#0b111866 0%,#0b111800 30%,#0b111800 55%,#0b1118cc 100%)}
body.game-on #title3d,body.game-on #title-veil{display:none}
#screen-start,#screen-lobby{position:relative;z-index:1}
#screen-start .logo{display:flex;flex-direction:column;align-items:center;margin-top:18px}
#screen-start .logo img{width:84px;height:84px;filter:drop-shadow(0 0 16px #37e6ff88);animation:logoSpin 8s ease-in-out infinite}
@keyframes logoSpin{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) scale(1.04)}}
#screen-start h1{margin-top:8px;font-size:2.4rem;color:#e8fbff;text-shadow:0 0 18px #37e6ffaa,0 3px 0 #000}
#screen-start .sub{text-shadow:0 1px 3px #000;color:#c8d6e2}
#screen-start input,#screen-lobby input{background:#141d27e6;backdrop-filter:blur(4px)}
.or,.hint{text-shadow:0 1px 3px #000,0 0 8px #000}

#opts .op-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
#opts .op-row button{text-align:left;padding:10px 12px;background:#141d27e0}
#opts .op-row button small{display:block;color:var(--dim);font-size:.75rem}
#opts .op-row button.mine{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
#opts .op-exp{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
#opts .op-exp label{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:#141d27e0;font-size:.85rem}
#opts .op-exp label.on{border-color:var(--acc)}
#opts .op-exp input{width:auto;margin:0;accent-color:var(--acc)}

/* ---------- лобби: всё на одном экране, герой виден в середине ---------- */
#screen-lobby{display:flex;flex-direction:column;gap:8px;height:100dvh;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
.lb-top{display:flex;gap:8px;align-items:stretch}
.code-box{display:flex;align-items:center;gap:10px;padding:6px 14px;border-radius:12px;border:1px solid var(--line);background:#141d27e0;backdrop-filter:blur(4px)}
.code-box span{color:var(--dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.code-box b{font-size:1.5rem;letter-spacing:.25em}
.lb-chip{flex:1;text-align:right;padding:8px 12px;font-size:.9rem;background:#141d27e0;backdrop-filter:blur(4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#players{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
#players li{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;border:1px solid var(--line);background:#141d27d0;backdrop-filter:blur(4px);font-size:.85rem;max-width:48%}
#players li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#players li.me{border-color:var(--acc)}#players li.off{opacity:.5}
#players li img,#players li i{width:28px;height:28px;border-radius:50%;background:#0b1118;object-fit:cover;flex:none;display:grid;place-items:center;font-style:normal;color:var(--dim)}
#pick{flex:1;min-height:120px;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
#pick-info{flex:1;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,#0b1118d8,#0b111860);border-left:4px solid var(--hc,#46d39a)}
#pick-info b{display:block;font-size:1.2rem;text-shadow:0 2px 4px #000}#pick-info small{display:block;color:#c8d6e2;font-size:.82rem;line-height:1.25}
#sex{display:flex;flex-direction:column;gap:6px;pointer-events:auto}
#sex button{width:46px;height:40px;padding:0;font-size:1.3rem;background:#141d27e0}
#sex button.mine{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset;color:var(--acc)}
#heroes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
#heroes button{position:relative;padding:4px 2px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;background:#141d27d8;backdrop-filter:blur(4px);border-radius:12px;min-width:0}
#heroes img{width:100%;max-width:60px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--hc) 45%,#0b1118),#0b1118);object-fit:contain;border:2px solid color-mix(in srgb,var(--hc) 60%,transparent)}
#heroes span{font-size:.62rem;line-height:1.1;text-align:center;color:#d6e2ec;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#heroes button.mine{border-color:var(--hc);box-shadow:0 0 0 2px var(--hc) inset,0 0 14px color-mix(in srgb,var(--hc) 60%,transparent)}
#heroes button.taken{opacity:.45;filter:grayscale(.8)}
#heroes em{position:absolute;top:2px;left:2px;right:2px;font-style:normal;font-size:.55rem;background:#000b;border-radius:6px;padding:1px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-bar{display:flex;gap:8px}.lb-bar>*{flex:1}.lb-bar .primary{flex:1.6;width:auto}
#lobby-hint{margin:0;min-height:0}#lobby-hint:empty{display:none}
#opts-sheet{position:fixed;inset:0;z-index:20;background:#0008;display:flex;align-items:flex-end;justify-content:center}
.os-box{width:100%;max-width:560px;background:#101821f2;border:1px solid var(--line);border-radius:16px 16px 0 0;padding:12px 16px max(16px,env(safe-area-inset-bottom));max-height:80dvh;overflow:auto}
.os-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.os-head button{padding:6px 12px}