*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{height:100%;background:#0b0d14;color:#e8ecf5;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;overscroll-behavior:none;touch-action:none}
canvas{touch-action:none;position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#hud{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:17px;background:linear-gradient(#0b0d14ee,#0b0d1400);pointer-events:none;z-index:5}
#hearts{color:#ff5470;letter-spacing:2px;min-width:90px}
#hudRight{display:flex;gap:10px;min-width:90px;justify-content:flex-end;color:#7fd8ff}
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 56px);transform:translateX(-50%);padding:6px 14px;border-radius:20px;background:#1b2133cc;font-size:15px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:6;max-width:92vw;width:max-content;text-align:center}
#toast.show{opacity:1}
#skills{position:fixed;left:0;right:0;bottom:0;padding:10px 12px calc(env(safe-area-inset-bottom) + 14px);display:flex;gap:12px;justify-content:center;z-index:5;pointer-events:none}
.skill{pointer-events:auto;min-width:0;padding:0;width:72px;height:72px;border-radius:20px;border:2px solid #3a4565;background:#161b2bdd;color:#e8ecf5;font-size:26px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.skill small{font-size:10px;font-weight:600;opacity:.8;margin-top:2px}
.skill .cd{position:absolute;left:0;right:0;bottom:0;background:#000a;transition:height .15s}
.skill .cdn{position:absolute;top:4px;right:7px;font-size:12px;font-weight:700}
.skill.ready{border-color:#7fd8ff;box-shadow:0 0 12px #7fd8ff55}
.skill.armed{border-color:#ffd84a;box-shadow:0 0 16px #ffd84a99}
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:calc(env(safe-area-inset-top) + 20px) 22px calc(env(safe-area-inset-bottom) + 20px);background:#0b0d14e8;text-align:center;overflow-y:auto}
h1{font-size:44px;letter-spacing:8px;color:#7fd8ff;text-shadow:0 0 24px #7fd8ff88}
h2{font-size:26px;color:#7fd8ff}
.sub{opacity:.6;margin-top:-8px;margin-bottom:14px;letter-spacing:2px}
.muted{opacity:.6;font-size:14px}
.bank{font-size:22px;font-weight:800;color:#7fd8ff;margin:6px 0}
button{font:inherit;font-size:18px;font-weight:700;color:#e8ecf5;background:#1b2133;border:2px solid #3a4565;border-radius:16px;padding:12px 18px;min-width:220px}
button:active{transform:scale(.97)}
button.big{background:#7fd8ff;color:#0b0d14;border-color:#7fd8ff;font-size:22px;padding:16px 18px}
.card{display:flex;align-items:center;gap:14px;text-align:left;width:min(360px,92vw);padding:14px;margin:6px 0;border-radius:18px;min-width:0}
.card .ic{font-size:30px;width:44px;text-align:center;flex:none}
.card b{display:block;font-size:17px}
.card span{display:block;font-size:13px;font-weight:500;opacity:.75;margin-top:2px}
.card.syn{border-color:#ffd84a}
.card.owned{opacity:.5}
.card .price{margin-left:auto;color:#7fd8ff;font-weight:800;flex:none}
.help{text-align:left;max-width:380px;line-height:1.45;font-size:15px;display:flex;flex-direction:column;gap:8px;padding-left:18px}
#summary{font-size:17px;line-height:1.7;margin-bottom:10px}
#floorLabel{text-align:center;line-height:1.15}
#floorLabel small{display:block;font-size:11px;font-weight:600;opacity:.75;margin-top:2px;white-space:nowrap}
.skill.empty{opacity:.45}
#bossBar{position:fixed;top:calc(env(safe-area-inset-top) + 58px);left:50%;transform:translateX(-50%);width:min(320px,80vw);z-index:5;text-align:center;pointer-events:none}
#bossName{font-size:13px;font-weight:800;color:#ffb3a3;text-shadow:0 1px 3px #000;margin-bottom:3px}
#bossBar .track{height:10px;border-radius:6px;background:#2a1418;border:1px solid #5a2a30;overflow:hidden}
#bossFill{height:100%;width:100%;background:linear-gradient(90deg,#ff5470,#ff8a3d);transition:width .25s}
#tests .row{display:flex;gap:10px;justify-content:center;margin:4px 0 10px}
#tests .opt{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:30px;width:min(160px,42vw);min-width:0;padding:12px 6px;border-radius:16px}
#tests .opt b{font-size:15px}
#tests .opt.sel{border-color:#ffd84a;box-shadow:0 0 0 2px #ffd84a inset;background:#2a2a1a}
.skill.sword{opacity:.9}
body.boss #toast{top:calc(env(safe-area-inset-top) + 96px)}

#upsBanner{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.96);padding:12px 18px;border-radius:14px;background:#1b2133e6;border:1px solid #3a4a7a;font-size:15px;line-height:1.7;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none;z-index:7;min-width:220px}
#upsBanner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#upsBanner b{display:block;text-align:center;color:#ffd84a;margin-bottom:4px}
#upsBanner .ic{display:inline-block;width:1.6em;text-align:center}

/* v18: джойстик слева, кнопки «Атака»/«Действие» справа, ⇄ над ними — симметрично */
#joy{position:fixed;left:0;bottom:0;width:min(58vw,calc(100vw - 212px - env(safe-area-inset-right)));height:min(46vh,340px);z-index:5;touch-action:none;-webkit-user-select:none;user-select:none}
#joyBase{position:absolute;left:calc(env(safe-area-inset-left) + 22px);bottom:calc(env(safe-area-inset-bottom) + 26px);width:116px;height:116px;border-radius:50%;background:radial-gradient(#7fd8ff10,#161b2b88);border:2px solid #3a456599;opacity:.55;transition:opacity .15s;pointer-events:none}
#joyBase.active{opacity:1;transition:none;border-color:#7fd8ff88;box-shadow:0 0 18px #7fd8ff33}
#joyKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#7fd8ff55;border:2px solid #7fd8ffaa;box-shadow:0 0 12px #7fd8ff44}
#pad{position:fixed;right:calc(env(safe-area-inset-right) + 14px);bottom:calc(env(safe-area-inset-bottom) + 20px);width:184px;height:156px;z-index:5;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none}
#pad button{pointer-events:auto;position:absolute;min-width:0;margin:0;padding:0;border-radius:50%;border:2px solid #3a4565;background:#161b2bcc;color:#e8ecf5;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform .06s,opacity .2s}
#pad button.down{transform:scale(.92);background:#1f2740ee}
#pad .pb::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(#0b0d14cc calc(var(--cd,0) * 360deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%);pointer-events:none}
#pad .pb i{font-style:normal;font-size:32px;line-height:1}
#pad .pb small{font-size:10px;font-weight:700;opacity:.85;margin-top:3px;letter-spacing:.02em}
#pad .atk{right:0;bottom:0;width:92px;height:92px;border-color:#ffd84a99;box-shadow:0 0 14px #ffd84a33}
#pad .atk.empty{opacity:.5;border-color:#3a4565;box-shadow:none}
#pad .act{right:106px;bottom:9px;width:74px;height:74px}
#pad .act i{font-size:26px}
#pad .act.ready{border-color:#7fd8ff;box-shadow:0 0 12px #7fd8ff55}
#pad .act.empty{opacity:.4}
#pad .cnt,#pad .cdn{position:absolute;top:2px;right:6px;font-size:12px;font-weight:800;color:#ffd84a;background:#0b0d14cc;border-radius:8px;padding:0 4px;line-height:16px}
#pad .cdn{color:#7fd8ff}
#pad .sw{width:46px;height:46px;bottom:108px}
#pad .sw i{font-style:normal;font-size:19px;line-height:1}
#pad .sw .sw-mark{position:absolute;left:-3px;bottom:-3px;font-size:11px;color:#7fd8ff;background:#0b0d14;border:1px solid #3a4565;border-radius:50%;width:18px;height:18px;line-height:16px;text-align:center}
#pad .sw .cnt{top:-4px;right:-6px;font-size:10px;line-height:14px}
#pad .sw.empty{opacity:.35}
#btnWeapon{right:23px}
#btnAbil{right:120px}
@media (orientation:landscape) and (max-height:500px){
  #joy{height:70vh;width:min(45vw,calc(100vw - 240px))}
  #joyBase{bottom:calc(env(safe-area-inset-bottom) + 16px)}
  #pad{bottom:calc(env(safe-area-inset-bottom) + 12px)}
}

#tests{gap:8px}
#tests h2{margin:0}
#tests p.muted{margin:2px 0}
#tests .row{margin:2px 0 6px}
#tests .grid{flex-wrap:wrap;max-width:340px;margin-left:auto;margin-right:auto}
#tests .opt{font-size:26px;padding:9px 6px;width:min(150px,40vw)}
#tests .opt small{font-size:11px;opacity:.7}
#tests .opt.sm{font-size:15px}
#depthRow{transition:opacity .2s}
#depthRow.dim{opacity:.35}

#parLabel{color:#ffd84a;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.7;align-self:center}
#parLabel.miss{color:#8a8f9c;opacity:.6}
#pickInfo{line-height:1.5;margin:4px 0}
#pickInfo .fast{color:#5ef2a0}
.wallet{color:#7fd8ff;font-weight:800;font-size:18px;margin:6px 0}
.offer{display:flex;flex-direction:column;align-items:center;margin:4px 0}
.offer .card{margin:2px 0}
.card.poor .price{color:#6b7385}
.card.rare{border-color:#c9a2ff}
.card .tag{display:block;font-style:normal;font-size:12px;color:#ffd84a;margin-top:3px}
.hold{min-width:0;font-size:13px;padding:6px 12px;border-radius:12px;opacity:.85;width:auto}
.hold.on{color:#ffd84a;opacity:1}
.hold:disabled:not(.on){opacity:.35}
.next{margin-top:10px}
#bootsLabel{font-size:13px;opacity:.6;align-self:center;font-variant-numeric:tabular-nums}
#bootsLabel:empty{display:none}
#pad .cdn small{font-size:8px;font-weight:600;opacity:.75;margin-left:1px}
#bootsLabel .slot{font-style:normal;opacity:.45;letter-spacing:2px;margin-left:2px}
.card .tag.swap{color:#ffb08a}