/* Mobile-first gameplay and store pass. Keep every swipe/wheel surface usable,
   but never draw a browser scrollbar over the game's chrome. */
*{scrollbar-width:none}
*::-webkit-scrollbar{width:0;height:0;display:none}

:root{
  --text-s:14px;
  --text-m:16px;
  --text-l:19px;
  --text-xl:23px;
}

.continueBtn{pointer-events:auto;margin-top:12px;border:0;background:none;color:var(--accent-bright);
  font:700 14px var(--font-head);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:10px 16px}
.orientationCard{width:min(460px,92vw);padding:28px;text-align:center;background:rgba(20,23,34,.98)}
.orientationCard h2{font:700 clamp(22px,6vw,30px) var(--font-head);color:var(--accent-bright)}
.orientationCard p{font-size:18px;line-height:1.4;color:var(--ink-soft);margin-top:10px}
.orientationCard .gbtn{margin-top:22px}
#orientationUI{z-index:80;background:rgba(7,9,14,.94)}
.updatePrompt{position:fixed;z-index:90;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;gap:12px;align-items:center;background:rgba(24,28,42,.98);border:1px solid var(--accent);border-radius:12px;
  padding:12px 14px;color:var(--ink-hi);font:700 14px var(--font-head);box-shadow:0 10px 32px rgba(0,0,0,.55)}
.updatePrompt button{border:1px solid var(--accent-edge);border-radius:8px;background:var(--accent);color:var(--ink-on-gold);
  font:700 13px var(--font-head);padding:9px 12px;cursor:pointer}

/* The catalog is a page, not a tiny window onto a long list. */
#shopUI .sheetPanel{max-height:min(94dvh,900px)}
#shopScroll{overflow-y:auto;overflow-x:clip;min-height:0;width:100%;max-width:100%}
#shopScroll>.shopPane,#shopGrid{min-width:0;width:100%;max-width:100%;overflow-x:clip}
#shopGrid{align-content:start}
.shopFilter{flex-wrap:wrap;margin-bottom:10px}
.shopFilter .flab{flex-basis:100%;font-size:13px}
.shopFilterBtn{font-size:15px;min-width:0;min-height:42px;padding:9px 14px}
.shopFilterBtn.scale{min-height:36px;font-size:13px;padding:7px 11px}
.shopPager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;min-height:44px}
.shopPager button{pointer-events:auto;min-width:48px;min-height:42px;border:1px solid var(--edge-bright);border-radius:9px;
  background:rgba(40,46,68,.82);color:var(--accent-bright);font:700 18px var(--font-head);cursor:pointer}
.shopPager button:disabled{opacity:.35}
.shopPager span{min-width:110px;text-align:center;color:var(--ink-soft);font:700 14px var(--font-head)}
.icard[hidden],.catLab[hidden]{display:none!important}
.iDesc,.is{font-size:15.5px;line-height:1.38}
.buyBtn{font-size:15px;min-height:42px}
.forgeOutD,.forgeHint,.invD,.fuseHintTxt{font-size:14.5px;line-height:1.35}

/* Skill cards are an explicit accordion on touch-size layouts. */
.dSkill{cursor:pointer}
.dSkill::after{content:'+';margin-left:auto;color:var(--accent);font:700 20px var(--font-head);align-self:center}
.dSkill.open::after{content:'−'}
.dSkill.open{border-color:var(--accent);background:rgba(50,54,72,.78)}
.dSkill.open .dSkFx{max-height:240px;opacity:1;margin-top:6px}
.dSkDesc{font-size:15px;line-height:1.4}
.dSkName{font-size:16px}
.dSkTag,.dSkKey{font-size:11px}
.dSkMeta{font-size:13px}
.heroFilter{font-size:11.5px;min-height:38px;padding:8px 11px}
.hgn{font-size:14px}.hgr{font-size:11.5px}.heroCount{font-size:12px}

@media(max-width:999px){
  .titleRow{max-width:390px}
  .titleRow .gbtn.ghost{font-size:13px;min-height:44px;padding:10px 14px}
  #modeCards{flex:none;min-height:max-content;max-height:none;overflow:visible;margin:0 auto}
  #modeSelect{justify-content:flex-start;overflow-y:auto;padding-top:calc(env(safe-area-inset-top) + 24px)}
  .modeGrid{grid-template-columns:1fr 1fr}
  .mcard{padding:14px;min-height:118px}
  .mcard .mcn{font-size:17px}.mcard .mcd{font-size:14.5px}.mtag{font-size:11px}
  #shopUI .sheetPanel{max-height:96dvh;padding-inline:14px}
  #shopNote{font-size:15px;line-height:1.25}
  #shopGold{font-size:18px}.shopHead h3{font-size:19px}
  .shopTab{font-size:14px}
  #shopGrid{grid-template-columns:1fr;gap:9px}
  .icard{padding:10px 11px}
  .in{font-size:17px}.chip{font-size:13.5px}.iDesc,.is{font-size:15px}
  .catLab{font-size:15px;position:static}
  .dHead{align-items:flex-start}.dHead canvas{width:112px;height:112px}
  .dName{font-size:26px}.dFull{font-size:15px}.dDesc,.dPassive .ptx,.dTip{font-size:15px}
  .dSkill:not(.open) .dSkDesc,.dSkill:not(.open) .dSkFx{display:none}
  .dSkill{min-height:62px;padding:11px}
  .dSkill .abic{width:48px;height:48px}
  .dSkName{font-size:17px}.dSkDesc{font-size:16px}.dSkMeta{font-size:14px}
}

@media(max-width:520px){
  .modeGrid{grid-template-columns:1fr}
  .mcard{min-height:0}
  .shopFilter{gap:7px}
  .shopFilterBtn.scale{display:none}
  .shopFilterBtn{flex:1 1 calc(33% - 7px);padding-inline:8px}
  .shopFilterBtn.scale{flex:0 1 auto}
  .icard{grid-template-columns:auto minmax(0,1fr)!important}
  .icard .buyBtn{grid-column:1/-1!important;grid-row:auto!important;width:100%!important;min-height:44px}
  .icard .iDrawer{grid-row:auto!important}
  .buildRow{gap:14px 8px}.buildCell{width:50px;height:50px}
}

@media(max-height:480px) and (orientation:landscape){
  #shopUI .sheetPanel{max-height:100dvh;border-radius:0;padding:8px 12px calc(env(safe-area-inset-bottom) + 8px)}
  .shopHead{margin-bottom:2px}.shopHead.divider-under{padding-bottom:9px!important}
  #shopNote{font-size:13.5px;margin-bottom:3px}.shopTab{min-height:38px;padding:7px 4px}
  #buildStrip .buildRow{display:none}#buildStrip .secLab{display:none}.quickBuy{margin-top:2px;min-height:38px}
  .shopFilter{margin-bottom:5px;gap:5px}.shopFilter .flab{display:none}.shopFilterBtn{min-height:34px;font-size:12.5px;padding:5px 8px}
  .shopFilterBtn.scale{display:none}
  .shopPager{margin-top:4px;min-height:34px}.shopPager button{min-height:34px}.shopPager span{font-size:12px}
  .icard{padding:6px 8px}.icard .ihd canvas{width:42px;height:42px}.in{font-size:15px}.chip{font-size:11.5px}
}
.modeMore{margin-top:14px;border:1px solid var(--edge-dim);border-radius:12px;background:rgba(18,21,31,.6);overflow:hidden}
.modeMore summary{pointer-events:auto;cursor:pointer;list-style:none;padding:14px 16px;color:var(--accent-bright);font:700 15px var(--font-head)}
.modeMore summary::after{content:'+';float:right}.modeMore[open] summary::after{content:'−'}
.modeMore .modeGrid{padding:0 12px 12px}