:root{
  --cy:#19e3ff; --mg:#ff2bd6; --pp:#a36bff; --gr:#3dff8e; --yl:#ffd23d; --rd:#ff4d5e;
  --bg:#04050c; --panel:rgba(9,12,28,.93);
  --font-ko:'Jua','Malgun Gothic',sans-serif;
  --font-en:'Orbitron','Jua',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg)}
body{font-family:var(--font-ko);color:#dffaff;user-select:none;-webkit-user-select:none;touch-action:none}
canvas#c{position:fixed;inset:0;display:block}

/* ============ HUD ============ */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s}
#hud.on{opacity:1}
#xpbar{position:fixed;top:0;left:0;right:0;height:6px;background:rgba(255,255,255,.06)}
#xpfill{height:100%;width:0%;background:linear-gradient(90deg,#ff4d5e,#ffb13d,#ffd23d,#3dff8e,#19e3ff,#a36bff,#ff2bd6,#ff4d5e);background-size:240% 100%;box-shadow:0 0 14px rgba(25,227,255,.75),0 0 24px rgba(255,43,214,.35);transition:width .15s;animation:xpRainbow 2.4s linear infinite}
@keyframes xpRainbow{0%{background-position:0% 50%}100%{background-position:240% 50%}}
#hpwrap{position:fixed;top:16px;left:16px;display:flex;align-items:center;gap:10px}
#lvbadge{--level-tier:var(--cy);--level-tier-soft:#7fd6e8;--level-tier-bg:rgba(25,227,255,.10);--level-tier-glow:rgba(25,227,255,.25);
  min-width:46px;height:46px;border-radius:12px;background:linear-gradient(160deg,rgba(10,16,40,.88),var(--level-tier-bg));border:1px solid var(--level-tier);
  display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 14px var(--level-tier-glow);padding:0 6px;transition:border-color .25s,box-shadow .25s,background .25s}
#lvbadge .t{font-size:9px;color:var(--level-tier-soft);font-family:var(--font-en);letter-spacing:1px}
#lvbadge .v{font-size:19px;line-height:1;color:#fff;text-shadow:0 0 8px var(--level-tier)}
#hpbar{width:230px;height:17px;border-radius:9px;background:rgba(60,8,18,.75);border:1px solid rgba(255,255,255,.18);overflow:hidden;position:relative}
#hpfill{height:100%;width:100%;border-radius:8px;background:linear-gradient(90deg,#37ff8b,#b6ff4d);box-shadow:0 0 10px rgba(80,255,140,.5);transition:width .12s}
#hpfill.mid{background:linear-gradient(90deg,#ffd23d,#ff9d3d)}
#hpfill.low{background:linear-gradient(90deg,#ff4d5e,#ff2bd6)}
#hptext{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;text-shadow:0 1px 2px #000;font-family:Arial,sans-serif;font-weight:bold}
#timer{position:fixed;top:10px;left:50%;transform:translateX(-50%);font-family:var(--font-en);font-weight:900;color:#fff;text-shadow:0 0 16px var(--cy),0 0 38px rgba(25,227,255,.5);
  display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1;white-space:nowrap}
#timer .clockline{font-size:32px;letter-spacing:3px}
#timer #timeGoal{font-size:15px;color:#9fd9ff;letter-spacing:1px;text-shadow:0 0 10px rgba(25,227,255,.55)}
#timer .mark{font-size:9px;letter-spacing:2px;color:#ffd23d;text-shadow:0 0 10px rgba(255,210,61,.45)}
#killwrap{position:fixed;top:16px;right:16px;text-align:right;font-size:18px;line-height:1.45;text-shadow:0 0 8px rgba(255,80,120,.6)}
#killwrap .best{font-size:12px;color:#8fa3c8;text-shadow:none}
#slotwrap{position:fixed;left:16px;bottom:14px;display:flex;flex-direction:column;gap:7px}
.weaponCount{align-self:flex-start;font-family:var(--font-en);font-size:11px;letter-spacing:1px;color:#bdefff;background:rgba(10,14,34,.72);border:1px solid rgba(25,227,255,.3);border-radius:999px;padding:3px 9px;box-shadow:0 0 10px rgba(25,227,255,.12)}
.slotrow{display:flex;gap:7px}
.slot{width:46px;height:46px;border-radius:11px;background:rgba(10,14,34,.82);border:1px solid rgba(25,227,255,.35);
  display:flex;align-items:center;justify-content:center;font-size:23px;position:relative;box-shadow:0 0 10px rgba(25,227,255,.12)}
.slot.p{width:38px;height:38px;font-size:18px;border-color:rgba(61,255,142,.35)}
.slot.max{border-color:var(--yl);box-shadow:0 0 12px rgba(255,210,61,.45)}
.slot .pips{position:absolute;bottom:2px;left:0;right:0;display:flex;justify-content:center;gap:2px}
.slot .pips i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.18)}
.slot .pips i.on{background:var(--cy);box-shadow:0 0 4px var(--cy)}
.slot.p .pips i.on{background:var(--gr);box-shadow:0 0 4px var(--gr)}
.slot .overlv{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 4px;border-radius:999px;
  background:linear-gradient(135deg,#ff2bd6,#ffd23d);border:1px solid rgba(255,255,255,.7);
  color:#061026;font-family:var(--font-en);font-size:10px;font-weight:900;line-height:18px;box-shadow:0 0 10px rgba(255,43,214,.55)}
#combo{position:fixed;right:7%;top:38%;font-size:48px;color:var(--mg);text-shadow:0 0 18px var(--mg),0 0 44px rgba(255,43,214,.6);
  opacity:0;transform:scale(.6);font-family:var(--font-en);font-weight:900}
#combo.pop{animation:comboPop .22s ease-out forwards}
#combo .lbl{font-size:15px;display:block;text-align:center;letter-spacing:4px;color:#ffb6ec}
@keyframes comboPop{0%{opacity:.4;transform:scale(1.5)}100%{opacity:1;transform:scale(1)}}
#bosswrap{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);width:46%;min-width:300px;display:none}
#bosswrap.on{display:block}
#bossname{text-align:center;font-size:15px;color:#ffc4cc;text-shadow:0 0 10px var(--rd);margin-bottom:4px;letter-spacing:2px}
#bossbar{height:15px;border-radius:8px;background:rgba(40,5,14,.8);border:1px solid rgba(255,77,94,.5);overflow:hidden;box-shadow:0 0 16px rgba(255,77,94,.3)}
#bossfill{height:100%;width:100%;background:linear-gradient(90deg,#ff4d5e,#ff2bd6);transition:width .15s}
#bannerwrap{position:fixed;top:17%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.banner{font-size:27px;padding:10px 34px;border-radius:999px;background:rgba(10,12,30,.85);border:1px solid rgba(255,255,255,.2);
  text-shadow:0 0 12px currentColor;animation:bannerIn 3s ease forwards}
.banner.warn{color:#ff7281;border-color:rgba(255,77,94,.6);box-shadow:0 0 28px rgba(255,40,70,.35)}
.banner.good{color:#7dffc1;border-color:rgba(61,255,142,.55);box-shadow:0 0 28px rgba(61,255,142,.3)}
.banner.info{color:#9fd9ff;border-color:rgba(25,227,255,.5);box-shadow:0 0 28px rgba(25,227,255,.3)}
@keyframes bannerIn{0%{opacity:0;transform:translateY(-22px) scale(.92)}8%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(8px)}}
.vin{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,8,.55) 100%)}
#hurtfx{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(255,20,50,.5) 100%);opacity:0}
#lvlfx{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(120,255,255,.28),transparent 70%);opacity:0}
#dangerfx{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 140px rgba(255,30,60,.55);opacity:0}
#dangerfx.on{animation:dangerPulse 1s ease-in-out 3}
@keyframes dangerPulse{0%,100%{opacity:0}50%{opacity:1}}

/* ============ 오버레이/메뉴 ============ */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(3,4,12,.6);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.overlay.hide{display:none}
.panel{background:var(--panel);border:1px solid rgba(25,227,255,.28);border-radius:22px;padding:24px 44px;text-align:center;
  box-shadow:0 0 60px rgba(25,227,255,.14),0 24px 80px rgba(0,0,0,.6);max-width:min(92vw,760px);max-height:92vh;overflow-y:auto}
.title-en{font-family:var(--font-en);font-weight:900;font-size:50px;letter-spacing:4px;line-height:1.05;
  background:linear-gradient(180deg,#aef6ff 15%,var(--cy) 45%,var(--mg) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(25,227,255,.55)) drop-shadow(0 0 50px rgba(255,43,214,.3))}
.title-ko{font-size:20px;letter-spacing:12px;color:#9fe9ff;margin:6px 0 3px;text-shadow:0 0 14px rgba(25,227,255,.6)}
.subtitle{color:#8fa3c8;font-size:13px;margin-bottom:12px}
.publicLink{display:inline-flex;align-items:center;gap:7px;margin:3px auto 9px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045);color:#bdefff;text-decoration:none;font-family:var(--font-en);font-size:11px;letter-spacing:1px;transition:transform .12s,box-shadow .12s,border-color .12s,color .12s}
.publicLink svg{width:15px;height:15px;filter:drop-shadow(0 0 7px rgba(25,227,255,.35))}.publicLink:hover,.publicLink:focus-visible{color:#fff;border-color:rgba(25,227,255,.62);box-shadow:0 0 18px rgba(25,227,255,.28);transform:translateY(-1px);outline:none}
.bestline{margin:3px 0 10px;font-size:15px;color:#ffd9a8;text-shadow:0 0 10px rgba(255,210,61,.35)}
.languageBox{margin:0 auto 8px;max-width:440px;padding:8px 14px;border:1px solid rgba(25,227,255,.22);border-radius:16px;background:rgba(25,227,255,.035);text-align:left}
.languageLabel{display:block;color:#9fe9ff;font-size:13px;margin-bottom:6px;letter-spacing:1px}
.languageChoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.languageChoice{height:36px;border-radius:11px;border:1px solid rgba(25,227,255,.34);background:rgba(2,8,20,.7);color:#cfe9ff;padding:0 8px;font-family:var(--font-ko);font-size:14px;cursor:pointer;outline:none;transition:transform .12s,box-shadow .12s,border-color .12s,background .12s,color .12s}
.languageChoice:hover,.languageChoice:focus-visible{border-color:var(--cy);box-shadow:0 0 16px rgba(25,227,255,.22);transform:translateY(-1px)}
.languageChoice.active{color:#03131c;background:linear-gradient(135deg,var(--cy),#6df0ff);border-color:transparent;box-shadow:0 0 18px rgba(25,227,255,.45);font-weight:bold}
.languageHint{margin-top:5px;color:#6f87a8;font-size:12px;text-align:center;line-height:1.35}
.profileBox{margin:0 auto 8px;max-width:440px;padding:9px 14px;border:1px solid rgba(25,227,255,.22);border-radius:16px;background:rgba(255,255,255,.035);text-align:left}
.profileBox label{display:block;color:#9fe9ff;font-size:13px;margin-bottom:6px;letter-spacing:1px}
.nickRow{display:flex;gap:8px}
.nickRow input{flex:1;min-width:0;height:39px;border-radius:11px;border:1px solid rgba(25,227,255,.42);background:rgba(2,8,20,.76);color:#fff;
  padding:0 12px;font-family:var(--font-ko);font-size:16px;outline:none;box-shadow:inset 0 0 12px rgba(25,227,255,.08)}
.nickRow input:focus{border-color:var(--cy);box-shadow:0 0 16px rgba(25,227,255,.22),inset 0 0 12px rgba(25,227,255,.12)}
.miniBtn{height:39px;border-radius:11px;border:1px solid rgba(255,210,61,.55);background:rgba(255,210,61,.08);color:#ffe9a8;
  padding:0 13px;font-family:var(--font-ko);cursor:pointer}
.miniBtn:hover{background:rgba(255,210,61,.16);box-shadow:0 0 14px rgba(255,210,61,.28)}
.profileHint{margin-top:6px;color:#6f87a8;font-size:12px;text-align:center}
.profileTitle{font-family:var(--font-en);letter-spacing:2px;text-align:center;color:#eaffff;font-size:13px;margin-bottom:8px;text-shadow:0 0 12px rgba(25,227,255,.4)}
.profileSpeedHint{margin-top:6px;color:#ffd23d;font-size:11px;text-align:center;text-shadow:0 0 10px rgba(255,210,61,.22)}
.leaderboard{margin:8px auto 10px;max-width:520px;padding:12px 14px;border-radius:16px;background:rgba(2,8,20,.54);border:1px solid rgba(255,255,255,.12)}
.resultLb{margin-top:0;margin-bottom:16px}
.lbHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#dffaff;font-size:15px}
.lbHead em{font-style:normal;font-family:var(--font-en);font-size:10px;color:#07121d;background:#7dffc1;border-radius:999px;padding:3px 8px;letter-spacing:1px}
.lbRow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 0;border-top:1px solid rgba(255,255,255,.06);font-size:13px}
.lbRow:first-of-type{border-top:0}
.lbRank{font-family:var(--font-en);color:#ffd23d;font-size:11px}
.lbName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;text-align:left}
.lbStat{color:#94abc9;text-align:right;font-family:Arial,sans-serif;font-size:12px}
.lbEmpty{color:#6f87a8;font-size:13px;padding:6px 0}
.btn{display:inline-block;font-family:var(--font-ko);font-size:19px;color:#cffcff;background:rgba(25,227,255,.06);
  border:2px solid rgba(25,227,255,.55);border-radius:999px;padding:11px 36px;margin:5px;cursor:pointer;letter-spacing:2px;
  transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{background:rgba(25,227,255,.16);box-shadow:0 0 22px rgba(25,227,255,.45);transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.primary{font-size:24px;padding:15px 56px;color:#03131c;font-weight:bold;border:none;
  background:linear-gradient(135deg,var(--cy),#6df0ff);box-shadow:0 0 30px rgba(25,227,255,.55)}
.btn.primary:hover{box-shadow:0 0 46px rgba(25,227,255,.85);transform:translateY(-3px) scale(1.02)}
.btn.ghost{font-size:15px;padding:8px 22px;border-color:rgba(255,255,255,.25);color:#b9c9e8}
.help{display:grid;grid-template-columns:auto auto;gap:7px 18px;justify-content:center;align-items:center;
  margin:10px auto 4px;font-size:15px;color:#a8c8d8;text-align:left}
.help kbd{font-family:var(--font-en);font-size:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  border-bottom-width:3px;border-radius:6px;padding:3px 9px;color:#fff;margin:0 2px}
.tip{font-size:12px;color:#6f87a8;margin-top:10px}
.mobileHelp{display:none;margin:14px auto 6px;max-width:300px;color:#9fc5dd;font-size:13px;line-height:1.45}
h2.ovtitle{font-family:var(--font-en);font-weight:900;font-size:38px;letter-spacing:3px;margin-bottom:6px}
#lvOv h2{color:#9ff3ff;text-shadow:0 0 18px var(--cy),0 0 50px rgba(25,227,255,.4)}
#lvOv .sub{color:#8fa3c8;font-size:14px;margin-bottom:8px}
.lvWeaponCount{display:inline-block;margin:0 0 18px;padding:4px 12px;border-radius:999px;border:1px solid rgba(25,227,255,.36);background:rgba(25,227,255,.07);color:#9ff3ff;font-family:var(--font-en);font-size:12px;letter-spacing:1px;box-shadow:0 0 14px rgba(25,227,255,.12)}
#cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.card{width:196px;min-height:252px;border-radius:16px;padding:18px 14px;cursor:pointer;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)),linear-gradient(150deg,var(--tier-bg,rgba(25,227,255,.08)),transparent 58%),linear-gradient(180deg,#0c1126,#080b1c);border:2px solid var(--rar,#3aa0ff);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .14s,box-shadow .14s;animation:cardIn .3s ease backwards}
.card.tiered{box-shadow:inset 0 0 28px var(--tier-glow,rgba(25,227,255,.08))}
.card.newCard{border-style:solid;box-shadow:inset 0 0 34px var(--tier-glow,rgba(255,210,61,.16)),0 0 18px rgba(255,210,61,.16)}
.card:nth-child(2){animation-delay:.07s}.card:nth-child(3){animation-delay:.14s}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1}}
.card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 0 26px var(--rar,#3aa0ff),0 18px 40px rgba(0,0,0,.5)}
.card .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:2px;
  background:var(--rar,#3aa0ff);color:#020815;border-radius:999px;padding:3px 12px;font-weight:bold;white-space:nowrap}
.card .newBadge{position:absolute;top:10px;right:10px;font-family:var(--font-en);font-size:10px;letter-spacing:1px;color:#07121d;
  background:linear-gradient(135deg,#fff4aa,#ffd23d);border-radius:999px;padding:3px 7px;box-shadow:0 0 13px rgba(255,210,61,.55);z-index:1}
.card .ico{font-size:46px;margin-top:12px;filter:drop-shadow(0 0 12px var(--rar,#3aa0ff))}
.card .nm{font-size:20px;color:#fff;letter-spacing:1px}
.card .lv{font-family:var(--font-en);font-size:12px;color:var(--rar,#3aa0ff);letter-spacing:1px}
.card .ds{font-size:13.5px;color:#9fb6d4;line-height:1.5;word-break:keep-all}
.card .key{position:absolute;bottom:8px;right:10px;font-family:var(--font-en);font-size:11px;color:#5e7390}
.statgrid{display:grid;grid-template-columns:auto auto;gap:9px 30px;justify-content:center;margin:18px 0 20px;font-size:17px}
.statgrid .k{color:#8fa3c8;text-align:right}
.statgrid .v{color:#fff;text-align:left;font-family:var(--font-en);font-weight:700}
.newbest{display:inline-block;margin-bottom:14px;color:#ffd23d;font-size:18px;text-shadow:0 0 14px rgba(255,210,61,.7);animation:pulseG 1s ease-in-out infinite}
@keyframes pulseG{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
#buildList{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0 18px;max-width:520px}
#buildList .bslot{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(25,227,255,.3);
  display:flex;align-items:center;justify-content:center;font-size:21px;position:relative}
#buildList .bslot em{position:absolute;bottom:-2px;right:-2px;font-style:normal;font-size:10px;font-family:var(--font-en);
  background:#0a1a2e;border:1px solid rgba(25,227,255,.4);border-radius:6px;padding:0 4px;color:#9ff3ff}
#buildList .companionSlot{box-shadow:0 0 12px rgba(125,255,193,.22)}
.companionInfo{flex-basis:100%;display:grid;gap:6px;margin-top:8px;text-align:left}
.companionInfoRow{display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px;align-items:center;padding:7px 9px;border:1px solid rgba(125,255,193,.22);border-radius:11px;background:rgba(125,255,193,.045);font-size:12px;color:#b8d3e8}
.companionInfoRow b{color:#eafff4;font-weight:400;white-space:nowrap}.companionInfoRow span{line-height:1.32}
.mutebtn,.pausebtn{position:fixed;bottom:14px;right:14px;z-index:30;width:46px;height:46px;border-radius:50%;font-size:20px;
  background:rgba(10,14,34,.8);border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pausebtn{display:none;bottom:68px;color:#9ff3ff;border-color:rgba(25,227,255,.42);box-shadow:0 0 12px rgba(25,227,255,.16)}
.speedControls{display:none;position:fixed;bottom:14px;right:68px;z-index:30;gap:5px;padding:5px;border-radius:999px;background:rgba(10,14,34,.82);border:1px solid rgba(255,255,255,.18);box-shadow:0 0 16px rgba(25,227,255,.14)}
.speedControls.on{display:flex}.speedBtn{min-width:36px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045);color:#9fb3ce;font-family:var(--font-en);font-size:12px;cursor:pointer}.speedBtn.active{color:#06101c;background:linear-gradient(135deg,#9ff3ff,#ffb6ec);border-color:rgba(255,255,255,.65);box-shadow:0 0 14px rgba(255,43,214,.32)}
.mutebtn:hover,.pausebtn:hover,.speedBtn:hover{border-color:var(--cy);box-shadow:0 0 14px rgba(25,227,255,.4)}
#joy{position:fixed;width:120px;height:120px;border-radius:50%;border:2px solid rgba(25,227,255,.35);
  background:rgba(25,227,255,.05);display:none;z-index:8;pointer-events:none}
#knob{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;transform:translate(-50%,-50%);
  background:rgba(25,227,255,.3);border:2px solid rgba(25,227,255,.6);box-shadow:0 0 16px rgba(25,227,255,.5)}
#movePad{display:none;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:156px;border-radius:24px;z-index:7;pointer-events:none;
  border:0;background:transparent;box-shadow:none;color:transparent;text-align:center}
#movePad .padTitle,#movePad .padHint{display:none}
#overOv h2{color:#ff8492;text-shadow:0 0 18px var(--rd),0 0 50px rgba(255,40,70,.4)}
#winOv h2{color:#ffe9a8;text-shadow:0 0 18px var(--yl),0 0 60px rgba(255,210,61,.5)}
.wver{font-size:11px;color:#3e4f6e;margin-top:16px;font-family:var(--font-en)}
@media (max-width:760px){
  .panel{padding:24px 18px}
  .title-en{font-size:38px}.title-ko{font-size:17px;letter-spacing:8px}
  .languageChoices{grid-template-columns:repeat(2,minmax(0,1fr))}
  #timer .clockline{font-size:24px;letter-spacing:2px}
  #timer #timeGoal{font-size:12px}
  #timer .mark{font-size:8px}
  #hpbar{width:150px}
  #cards{gap:7px;flex-wrap:nowrap}
  .card{width:calc((100% - 14px)/3);min-width:0;min-height:214px;padding:14px 7px}
  .card .tag{font-size:9px;letter-spacing:1px;padding:2px 7px;max-width:92%;overflow:hidden;text-overflow:ellipsis}
  .card .ico{font-size:34px;margin-top:10px}
  .card .nm{font-size:15px;line-height:1.15;word-break:keep-all}
  .card .lv{font-size:9px;line-height:1.25}
  .card .ds{font-size:11px;line-height:1.35}
  .card .key{font-size:9px;bottom:6px;right:7px}
  .help{font-size:13px}
  .desktopHelp{display:none}
  .mobileHelp{display:block}
  #combo{font-size:34px;right:5%}
  .lbRow{grid-template-columns:36px minmax(0,1fr);gap:5px}
  .lbStat{grid-column:2;text-align:left;font-size:11px}
  #movePad{display:block;height:calc(150px + env(safe-area-inset-bottom,0px))}
  #slotwrap{left:8px;right:62px;bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:4px;max-width:calc(100vw - 78px)}
  .weaponCount{font-size:10px;padding:2px 7px;background:rgba(10,14,34,.62)}
  .slotrow{flex-wrap:wrap;gap:4px;max-width:100%}
  .slot{width:36px;height:36px;border-radius:9px;font-size:19px}
  .slot.p{width:31px;height:31px;font-size:15px}
  .slot .pips{gap:1px}.slot .pips i{width:3px;height:3px}
  .slot .overlv{top:-6px;right:-6px;min-width:16px;height:16px;font-size:8px;line-height:15px}
  .mutebtn{right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:42px;height:42px}
  .speedControls{right:58px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:4px;gap:3px}.speedBtn{min-width:31px;height:32px;font-size:11px}
  .pausebtn.on{display:flex;right:10px;bottom:calc(58px + env(safe-area-inset-bottom,0px));width:42px;height:42px}
  #timer{top:66px}
  #bosswrap{top:104px;bottom:auto;min-width:230px;width:72%}
  #bannerwrap{top:12%;gap:5px}
  .banner{max-width:86vw;font-size:16px;line-height:1.25;padding:7px 14px;text-align:center}
  .companionInfoRow{grid-template-columns:1fr;font-size:11px;gap:3px}
}
@media (pointer:coarse) and (max-height:520px) and (max-width:920px){
  #movePad{display:block;height:calc(96px + env(safe-area-inset-bottom,0px));left:14px;right:14px}
  #slotwrap{left:8px;right:62px;bottom:calc(8px + env(safe-area-inset-bottom,0px));gap:3px;max-width:calc(100vw - 78px)}
  .slotrow{flex-wrap:wrap;gap:4px;max-width:100%}
  .slot{width:34px;height:34px;border-radius:8px;font-size:18px}
  .slot.p{width:29px;height:29px;font-size:14px}
  .mutebtn{right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:40px;height:40px}
  .speedControls{right:56px;bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:3px;gap:2px}.speedBtn{min-width:29px;height:30px;font-size:10px}
  .pausebtn.on{display:flex;right:58px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:40px;height:40px}
  #bosswrap{top:70px;bottom:auto;min-width:230px;width:54%}
  #bannerwrap{top:12%;gap:4px}
  .banner{max-width:78vw;font-size:14px;line-height:1.22;padding:5px 12px}
  #hpwrap{top:10px;left:10px}#hpbar{width:132px}#timer{top:8px}#timer .clockline{font-size:22px}#killwrap{top:10px;right:10px;font-size:15px}
  #joy{width:88px;height:88px}
  #knob{width:38px;height:38px}
}