/* Safari must not inflate selected labels independently of the game UI. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.mobile-viewport-host > :not(#game-viewport) { display: none !important; }
#game-viewport {
  position: fixed;
  inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  background: #0c0a14;
}
#game-viewport-frame {
  position: absolute;
  top: 0;
  display: block;
  border: 0;
  transform-origin: 0 0;
  max-width: none;
  color-scheme: dark;
}

.fullscreen-help {
  width: min(530px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 24px;
  overflow: auto;
  color: #f5efdd;
  background: #112334;
  border: 2px solid #c8b47e;
  font: 14px/1.6 var(--pixel-font, sans-serif);
}
.fullscreen-help::backdrop { background: #050b15b8; }
.fullscreen-help h2 { margin: 0 0 12px; font-size: 22px; }
.fullscreen-help ol { padding-left: 24px; }
.fullscreen-help li { margin: 8px 0; }
.fullscreen-help button { display: block; margin: 20px 0 0 auto; padding: 8px 24px; min-height: 40px; font: inherit; color: #14202b; background: #d8bd7b; border: 1px solid #bca674; }
.fullscreen-help :focus-visible { outline: 2px solid #ffe4a2; outline-offset: 3px; }

/* 바깥 문서는 절대 스크롤·바운스하지 않는다(사파리 주소창 접힘·당겨서 새로고침이 스와이프를 먹지 않게). */
html:has(body.mobile-viewport-host), body.mobile-viewport-host { overscroll-behavior: none; touch-action: none; position: fixed; inset: 0; width: 100%; }

/* 게임 안쪽(아이폰 프레임): 스크롤 영역의 맨 아래 줄이 화면 가장자리에 붙지 않게 여백을 두고, 스크롤이 바깥으로 번지지 않게 한다. */
html.vp-touch { overscroll-behavior: none; }
html.vp-touch .menu :is(.hd-info, .mcol, .tw-body, .pool, .settings, .prep, .res-box, .wm-panel, .gp-list, .hgrid, .ql-list) {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 24px;
}
html.vp-touch .menu :is(.hd-info, .mcol, .tw-body, .pool, .settings, .prep, .gp-list) { padding-bottom: max(28px, calc(24px / var(--vs, 1))); }
html.vp-touch #qlog .ql-list, html.vp-touch dialog { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* 축소된 프레임에서 작아지는 탭·아이콘 버튼: 실제 화면 기준 최소 높이(≈34px)를 보장한다. */
html.vp-touch .menu :is(.ctab, .sm-tabs button, [data-c], .tier, .back, .sqb) { min-height: calc(34px / var(--vs, 1)); }
html.vp-touch .menu :is(.back, .sqb) { min-width: calc(34px / var(--vs, 1)); }
html.vp-touch .menu :is(.nbtn.sm, .tok, .pot) { min-height: calc(32px / var(--vs, 1)); }

/* 세로로 든 아이폰에서는 프레임이 90도 돌아 있다. touch-action 은 프레임의 회전을 반영하지 않고 실제 화면 축 기준이라,
   pan-y(세로 스크롤만 허용)는 게임 안에서 "가로로 끌기"만 되는 스크롤 막힘이 된다. 스크롤 영역은 방향 제한을 풀어 둔다. */
html.vp-touch .menu :is(.hd, .hd-info) { touch-action: auto; }

/* 좁은 프레임(폭 1100 미만: 세로로 든 아이폰·SE)에서 편성 오른쪽 패널의 아래 버튼이 잘리지 않게 패널 안에서 스크롤한다. */
html.vp-touch .form-bot > .form-side { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 20px; }
html.vp-touch .form-bot > .pool { padding-bottom: 20px; }

/* Readability is measured in physical CSS pixels, after the landscape frame is
   scaled. Desktop sizes do not apply inside the phone's 0.6–0.8 scale frame. */
html.vp-touch {
  --read-small: max(12px, calc(12px / var(--vs, 1)));
  --read-body: max(14px, calc(14px / var(--vs, 1)));
  --read-dialog: max(16px, calc(16px / var(--vs, 1)));
  --read-title: max(20px, calc(18px / var(--vs, 1)));
  --read-hit: max(40px, calc(40px / var(--vs, 1)));
}
html.vp-touch :is(.menu, dialog, #qlog, #qreward, #story, #cine) { font-size: var(--read-body); }
html.vp-touch :is(.menu, dialog) :is(p, label, input, select, textarea) { font-size: var(--read-body); line-height: 1.55; }
html.vp-touch :is(.menu, dialog) small { font-size: var(--read-small); line-height: 1.45; }
html.vp-touch :is(.menu, dialog) button { font-size: var(--read-body); }
html.vp-touch .menu :is(.nbtn, .gbtn, .pot, .tok, .ctab, .tier, .settings button, .prep-actions button, .grow button, .sm-tabs button) {
  height: auto; min-height: var(--read-hit); line-height: 1.4; white-space: normal;
}
html.vp-touch .menu :is(.dim, .bio, .syn, .sk, .lk, .sk-level, .gc-st, .gp-own, .hd-cls, .hero-tag, .counter-hero, .gimmick-title, .tq, .np-b, .rw, table) { font-size: var(--read-small); line-height: 1.5; }
html.vp-touch .menu :is(.sk b, .lk b, .gc-t b, .syn b, .st b, .si b, .dg b, .tq b, .np-h b, .ht-skills strong) { font-size: var(--read-body); }
html.vp-touch .menu :is(.sk small, .sk .sk-up small, .gc-t p, .eq-slot span, .eq-slot small, .tq.gq > button small, .qol-enhance > .nbtn small, .ht-skills span, .ht-skills small, .ht-note) { font-size: var(--read-small); line-height: 1.5; opacity: 1; }
html.vp-touch .menu :is(.sk em, .lk em, .hd-cls em, .gc-t b em, .hero-tag, .counter-hero em) { font-size: var(--read-small); }
html.vp-touch .menu .sk, html.vp-touch .menu .lk { grid-template-columns: calc(48px / var(--vs, 1)) minmax(0, 1fr); gap: 8px 12px; padding-block: 12px; }
html.vp-touch .menu .mtop { min-height: calc(44px / var(--vs, 1)); padding-block: 6px; }
html.vp-touch .menu .mtop .mt { font-size: var(--read-title); }
html.vp-touch .menu .mtop :is(.cur, .acc, .hd-nav small) { font-size: var(--read-small); }
html.vp-touch .menu .mtop :is(.back, .hd-nav button) { min-width: var(--read-hit); min-height: var(--read-hit); }
html.vp-touch .menu :is(.settings, .gp-win, .wm-panel) { width: min(calc(480px / var(--vs, 1)), calc(100% - 32px)); }
html.vp-touch .menu .settings { margin-block: 12px; padding: 16px 22px; gap: 18px; }
html.vp-touch .menu .settings :is(button, label) { flex-wrap: wrap; gap: 8px 14px; }
html.vp-touch .menu .settings input[type=range] { min-height: calc(20px / var(--vs, 1)); }
html.vp-touch .menu .settings :is(.cutin-manage, .skill-voice-toggle) small { font-size: var(--read-small); }
html.vp-touch .menu .eq-row { grid-template-columns: 1fr; }
html.vp-touch .menu .eq-slot { align-items: center; gap: 12px; padding: 10px; }
html.vp-touch .menu .eq-slot b { font-size: var(--read-body); white-space: normal; }
html.vp-touch .menu .eq-slot span { display: block; overflow: visible; }
html.vp-touch .menu .gp-h { flex-wrap: wrap; }
html.vp-touch .menu .gp-h b { font-size: var(--read-title); }
html.vp-touch .menu .gp-x { min-width: var(--read-hit); min-height: var(--read-hit); }
html.vp-touch .menu .gp-row { padding: 12px; align-items: flex-start; }
html.vp-touch .menu .gp-row > button { min-width: calc(62px / var(--vs, 1)); }
html.vp-touch .menu .shop { grid-template-columns: repeat(auto-fill, minmax(calc(170px / var(--vs, 1)), 1fr)); }
html.vp-touch .menu .si { gap: 8px; padding: 14px; }
html.vp-touch .menu .quest-banner { gap: 14px; padding-block: 12px; }
html.vp-touch .menu .quest-banner h2 { font-size: var(--read-title); }
html.vp-touch .menu .quest-banner p { font-size: var(--read-small); }
html.vp-touch .menu .quest-count span { font-size: var(--read-small); }
html.vp-touch .menu .quest-count { min-width: 0; padding-left: 14px; }
html.vp-touch .menu .mcol h3 { flex-wrap: wrap; font-size: var(--read-body); }
html.vp-touch .menu .mcol h3 small { font-size: var(--read-small); }
html.vp-touch .menu .ms { grid-template-columns: calc(23px / var(--vs, 1)) minmax(0, 1fr) auto calc(44px / var(--vs, 1)); min-height: calc(62px / var(--vs, 1)); gap: 8px; }
html.vp-touch .menu .ms > b { font-size: var(--read-small); line-height: 1.5; }
html.vp-touch .menu .ms > span { font-size: var(--read-small); }
html.vp-touch .menu .ms > button { font-size: var(--read-body); min-height: var(--read-hit); }
html.vp-touch .menu .ms > button small { font-size: var(--read-small); }
html.vp-touch .menu .tw-body { min-height: 0; }
html.vp-touch .menu .pixel-town .tf { width: calc(48px / var(--vs, 1)); height: calc(48px / var(--vs, 1)); padding-block: 4px; }
html.vp-touch .menu .pixel-town .tf b { font-size: var(--read-small); }
html.vp-touch .menu .pixel-town .tf small { display: none; }
html.vp-touch .menu .pixel-town .tw-talk b { font-size: var(--read-small); }
html.vp-touch .menu .pixel-town .tw-body { top: calc(61px / var(--vs, 1)); }
html.vp-touch .menu .tq { flex-wrap: wrap; gap: 12px; padding-block: 12px; }
html.vp-touch .menu .tq .gcard { flex-basis: 65%; }
html.vp-touch .menu .tq.gq > .qol-enhance { min-width: calc(110px / var(--vs, 1)); }
html.vp-touch .menu :is(.hd-info, .tw-body, .mcol, .pool, .settings, .prep, .gp-list, .res-box, .g-info) { scrollbar-width: thin; scrollbar-color: #adbbbe #142331; }
html.vp-touch .menu .g-info { min-width: 0; max-height: calc(100% - 24px); overflow-y: auto; justify-content: flex-start; margin-block: 12px; }
html.vp-touch .menu .res-box { min-height: 0; max-height: calc(100% - 20px); overflow-y: auto; gap: 10px; }
html.vp-touch .menu .res-box :is(table, .dim, .mvpl) { font-size: var(--read-small); }
html.vp-touch .menu .res-box .row { flex-wrap: wrap; }
html.vp-touch .menu .res-box .row button { min-height: var(--read-hit); font-size: var(--read-body); white-space: normal; }

/* Cards reserve room for their larger labels; lists keep scrolling instead of
   squeezing all owned heroes or equipment into one phone screen. */
html.vp-touch .menu :is(.hgrid, .pool, .pp-party) .hc { width: calc(86px / var(--vs, 1)); height: calc(120px / var(--vs, 1)); }
html.vp-touch .menu .hc b { font-size: var(--read-small); }
html.vp-touch .menu .hc :is(.rar, .lv, .hcl) { font-size: calc(10px / var(--vs, 1)); }
html.vp-touch .menu .hc .hcl { bottom: calc(20px / var(--vs, 1)); }
html.vp-touch .menu .hc .stars { bottom: calc(36px / var(--vs, 1)); }
html.vp-touch .menu .hc.lead::after { font-size: calc(10px / var(--vs, 1)); }
html.vp-touch .menu .slots { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; flex-shrink: 0; padding: 2px 4px 10px; }
html.vp-touch .menu .slots .hc { width: calc(74px / var(--vs, 1)); height: calc(100px / var(--vs, 1)); }
html.vp-touch .menu .form-side { width: 40%; }
html.vp-touch .menu .clsbar { flex-wrap: wrap; }
html.vp-touch .menu .clsbar button { font-size: var(--read-small); min-height: calc(30px / var(--vs, 1)); }
html.vp-touch .menu .slots .hc.empty { text-align: center; font-size: var(--read-small); overflow-wrap: anywhere; padding: 6px; }

/* Lobby panels use the extra width of a landscape phone without letting the
   larger currency row overlap banners and navigation. */
html.vp-touch .menu.scr-lobby .lb-top { min-height: calc(46px / var(--vs, 1)); padding-block: 6px; }
html.vp-touch .menu.scr-lobby :is(.lb-left, .lb-right) { top: calc(53px / var(--vs, 1)); }
html.vp-touch .menu.scr-lobby .lb-left { width: min(31vw, calc(235px / var(--vs, 1))); }
html.vp-touch .menu.scr-lobby .lb-right { bottom: calc(63px / var(--vs, 1)); width: min(34vw, calc(255px / var(--vs, 1))); }
html.vp-touch .menu.scr-lobby :is(.lb-pi b, .pill b, .mi-h, .nb b, .lb-card b) { font-size: var(--read-small); }
html.vp-touch .menu.scr-lobby .lb-pi b { max-width: calc(150px / var(--vs, 1)); }
html.vp-touch .menu.scr-lobby .lb-pi small { font-size: var(--read-small); }
html.vp-touch .menu.scr-lobby .pill { height: calc(30px / var(--vs, 1)); }
html.vp-touch .menu.scr-lobby .pill button { width: calc(26px / var(--vs, 1)); height: calc(26px / var(--vs, 1)); }
html.vp-touch .menu.scr-lobby .lb-ban { min-height: calc(84px / var(--vs, 1)); }
html.vp-touch .menu.scr-lobby .bn-t { right: 28%; padding: 6px; gap: 6px; }
html.vp-touch .menu.scr-lobby .bn-t b { font-size: var(--read-body); white-space: normal; line-height: 1.35; }
html.vp-touch .menu.scr-lobby .bn-t small { font-size: var(--read-small); line-height: 1.35; }
html.vp-touch .menu.scr-lobby .bn-t em { font-size: calc(10px / var(--vs, 1)); }
html.vp-touch .menu.scr-lobby .lb-sub { grid-template-columns: 1fr 1fr; }
html.vp-touch .menu.scr-lobby .lb-card { min-height: calc(42px / var(--vs, 1)); height: auto; }
html.vp-touch .menu.scr-lobby .lb-card small { display: none; }
html.vp-touch .menu.scr-lobby .lb-card .card-ic { width: calc(27px / var(--vs, 1)); height: calc(27px / var(--vs, 1)); flex-basis: calc(27px / var(--vs, 1)); }
html.vp-touch .menu.scr-lobby .adv-t :is(em, small), html.vp-touch .menu.scr-lobby .adv-go { font-size: var(--read-small); line-height: 1.45; }
html.vp-touch .menu.scr-lobby .adv-t b { font-size: calc(25px / var(--vs, 1)); }
html.vp-touch .menu.scr-lobby .nb { min-width: calc(61px / var(--vs, 1)); }
html.vp-touch .menu.scr-lobby .nb.big { min-width: calc(72px / var(--vs, 1)); }
html.vp-touch .menu.scr-lobby .nb small { font-size: calc(10px / var(--vs, 1)); top: calc(-13px / var(--vs, 1)); }
html.vp-touch .menu.scr-lobby .lb-bubble { max-width: 32vw; }
html.vp-touch .menu.scr-lobby .lb-bubble b { font-size: var(--read-small); }
html.vp-touch .menu.scr-lobby .lb-bubble p { font-size: var(--read-body); }
html.vp-touch #title :is(.t-server, .t-links button, .help, .tap) { font-size: var(--read-small); }
html.vp-touch #title .t-links button { min-height: var(--read-hit); }
html.vp-touch #title .help { box-sizing: border-box; width: 92vw; max-height: 52vh; overflow-y: auto; opacity: 1; color: #f5e6ba; }

/* Field navigation and nearby-place panel. Keep the centre available for play. */
html.vp-touch .fh-reg { max-width: min(52vw, calc(370px / var(--vs, 1))); }
html.vp-touch .fh-reg b { font-size: var(--read-title); }
html.vp-touch .fh-reg :is(small, .fh-goal) { font-size: var(--read-small); line-height: 1.45; }
html.vp-touch .fh-mini canvas { width: calc(118px / var(--vs, 1)); }
html.vp-touch .fh-btns { gap: 6px; }
html.vp-touch .fh-btns button { width: calc(44px / var(--vs, 1)); height: calc(52px / var(--vs, 1)); font-size: var(--read-small); line-height: 1.25; }
html.vp-touch .fh-btns button .ico { width: calc(17px / var(--vs, 1)); height: calc(17px / var(--vs, 1)); }
html.vp-touch .fh-panel { width: min(calc(310px / var(--vs, 1)), 49vw); max-height: calc(100vh - 28px); padding: 14px 16px; }
html.vp-touch .fh-panel :is(.fp-b, .fp-h small, .fp-h em, .fp-gimmicks small, .fp-tiers button small, .hero-tag) { font-size: var(--read-small); line-height: 1.5; }
html.vp-touch .fh-panel :is(.fp-h b, .fp-row b) { font-size: var(--read-body); }
html.vp-touch .fh-panel :is(.nbtn, .gbtn) { height: auto; min-height: var(--read-hit); font-size: var(--read-body); white-space: normal; }
html.vp-touch :is(.fh-toast, #mtoast, #toast) { font-size: var(--read-body); line-height: 1.5; max-width: 85vw; white-space: normal; text-align: center; }

/* Dialogue is the primary reading surface: a real 16px minimum, comfortable
   line spacing and independent scrolling for unusually long translated text. */
html.vp-touch #story .st-box,
html.vp-touch #cine:is(.full, .scene, .over) .cn-box { box-sizing: border-box; width: 92vw; min-height: calc(94px / var(--vs, 1)); max-height: 54vh; padding: calc(19px / var(--vs, 1)) calc(18px / var(--vs, 1)) calc(14px / var(--vs, 1)); bottom: 5%; }
html.vp-touch #story .st-text,
html.vp-touch #cine:is(.full, .scene, .over) .cn-text { font-size: var(--read-dialog); line-height: 1.65; max-height: 38vh; overflow-y: auto; overflow-wrap: anywhere; }
html.vp-touch #story .st-name,
html.vp-touch #cine:is(.full, .scene, .over) .cn-name { font-size: var(--read-body); top: calc(-16px / var(--vs, 1)); padding: 4px 16px; }
html.vp-touch #story .st-skip,
html.vp-touch #cine .cn-ui button { font-size: var(--read-small); min-height: var(--read-hit); min-width: calc(62px / var(--vs, 1)); }
html.vp-touch #cine .cn-hint { font-size: var(--read-small); }

/* Quest journal, quest rewards and modal settings retain their own scroll area. */
html.vp-touch :is(.ql-box, .qr-box, dialog) { box-sizing: border-box; width: min(calc(510px / var(--vs, 1)), 90vw); max-height: 88vh; }
html.vp-touch .ql-h { flex-shrink: 0; }
html.vp-touch .ql-h b { font-size: var(--read-title); }
html.vp-touch .ql-x { min-width: var(--read-hit); min-height: var(--read-hit); font-size: var(--read-title); }
html.vp-touch .ql-list { min-height: 0; }
html.vp-touch .ql-q { flex-shrink: 0; padding: 14px; gap: 8px 14px; }
html.vp-touch .ql-q:disabled { opacity: .85; }
html.vp-touch .ql-q b, html.vp-touch .qr-it b { font-size: var(--read-body); }
html.vp-touch :is(.ql-q em, .ql-q small, .ql-foot, .qr-it.gear p, .qr-it.gear small, .qr-tap) { font-size: var(--read-small); line-height: 1.5; }
html.vp-touch .ql-q.track b::after { font-size: var(--read-small); }
html.vp-touch .ql-foot { flex-shrink: 0; color: #c5d5df; }
html.vp-touch .qr-box { overflow-y: auto; padding: 12px; }
html.vp-touch .qr-box > em { font-size: var(--read-small); }
html.vp-touch .qr-tap { color: #d3dce3; }
html.vp-touch dialog :is(button, input) { min-height: var(--read-hit); }
html.vp-touch dialog h2, html.vp-touch dialog h3 { font-size: var(--read-title); }

/* Battle labels can grow without covering the action buttons or command bar. */
html.vp-touch #topL { width: min(36vw, calc(270px / var(--vs, 1))); }
html.vp-touch #topL :is(.sth b, .sth em, .obj) { font-size: var(--read-small); line-height: 1.4; }
html.vp-touch #hud #sys button { min-height: calc(32px / var(--vs, 1)); font-size: var(--read-small); }
html.vp-touch #hud #leader .ln b { font-size: var(--read-body); }
html.vp-touch #hud #leader .ln small { font-size: var(--read-small); }
html.vp-touch #hud #cmds button { min-width: calc(43px / var(--vs, 1)); height: calc(43px / var(--vs, 1)); font-size: var(--read-small); }
html.vp-touch:not(.kbd) #hud #cmds kbd, html.vp-touch:not(.kbd) #hud .sb kbd { display: none; }
html.vp-touch #hud .sb .nm { font-size: calc(11px / var(--vs, 1)); }
html.vp-touch #hud .sb.ult .nm { font-size: var(--read-small); }
html.vp-touch #hud #bossbar .bn { font-size: var(--read-small); }
html.vp-touch #hud #chain small { font-size: var(--read-small); }

/* Account entry is created inside the scaled game frame just like the lobby.
   Keep its text and controls readable without letting the form escape the view. */
html.vp-touch #entry-dialog {
  box-sizing: border-box;
  width: min(calc(620px / var(--vs, 1)), 94vw);
  max-width: calc(100vw - 24px);
  max-height: 96vh;
  overflow: auto;
  font-size: var(--read-body);
  line-height: 1.45;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html.vp-touch #entry-dialog h2 { font-size: var(--read-title); line-height: 1.25; }
html.vp-touch #entry-dialog :is(p, label, input, select, textarea) { font-size: var(--read-body); line-height: 1.45; }
html.vp-touch #entry-dialog :is(header small, .entry-note) { font-size: var(--read-small); line-height: 1.45; }
html.vp-touch #entry-dialog #entry-status { font-size: var(--read-small); line-height: 1.45; }
html.vp-touch #entry-dialog :is(button, input) { box-sizing: border-box; min-height: var(--read-hit); }
html.vp-touch #entry-dialog label { gap: 6px; margin-block: 8px; }
html.vp-touch #entry-dialog input { padding: 8px 10px; }

/* The chat can expand above the bottom navigation. Its message log scrolls
   inside the panel while the composer and connection status stay reachable. */
html.vp-touch .lb .lb-chat {
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 110px);
  font-size: var(--read-small);
  line-height: 1.45;
}
html.vp-touch .lb-chat :is(button, input) { box-sizing: border-box; min-height: var(--read-hit); font-size: var(--read-body); line-height: 1.35; }
html.vp-touch .lb-chat :is([data-chat-count], [data-chat-arrow], [data-chat-status], [data-chat-save], time) { font-size: var(--read-small); line-height: 1.45; }
html.vp-touch .lb-chat [data-chat-status], html.vp-touch .lb-chat [data-chat-save] { overflow-wrap: anywhere; }
html.vp-touch .lb-chat #lobby-chat-body:not([hidden]) { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
html.vp-touch .lb-chat [data-chat-log] { box-sizing: border-box; flex: 1 1 auto; min-height: 0; height: min(calc(160px / var(--vs, 1)), 28vh); }
html.vp-touch .lb-chat [data-chat-log] p { font-size: var(--read-body); line-height: 1.45; }

html.vp-touch .menu .gem-supply{padding:12px;gap:8px}
html.vp-touch .menu .gem-supply h3,html.vp-touch .gem-supply .supply-row b,html.vp-touch .gem-supply .supply-row button{font-size:var(--read-body)}
html.vp-touch .gem-supply :is(p,small){font-size:var(--read-small)}
html.vp-touch .gem-supply .supply-row button{min-height:var(--read-hit)}

/* Compact chat launcher remains above the bottom navigation. */
.lb .lb-chat:not(.is-expanded) { width: auto; }
.lb-chat:not(.is-expanded) :is([data-chat-count], [data-chat-arrow], [data-chat-save]) { display: none; }
.lb-chat:not(.is-expanded) .chat-toggle { padding: 8px 14px; }
html.vp-touch .lb .lb-chat { right: 12px; left: auto; bottom: calc(66px / var(--vs, 1)); width: min(48vw, calc(330px / var(--vs, 1))); max-height: calc(100% - 160px / var(--vs, 1)); }
html.vp-touch .lb .lb-chat:not(.is-expanded) { width: auto; }
html.vp-iphone .menu.scr-lobby .lb:not(.lb-event) .lb-char { left: 43%; top: calc(54px / var(--vs, 1)); bottom: auto; height: 180%; transform: translateX(-50%); }
html.vp-iphone .menu.scr-lobby .lb:not(.lb-event) .lb-art { height: 100%; width: auto; max-width: none; animation: none; }
.lb .lb-chat { bottom: 12px; }
html.vp-touch .lb .lb-chat { bottom: calc(12px / var(--vs, 1)); }
/* Battle utilities fold into a small tab on the left edge. */
#hud #sys { left: 4px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); z-index: 9; display: flex; align-items: center; justify-content: flex-start; gap: 4px; max-width: calc(100% - 8px); }
#hud #sys-controls { display: flex; flex-direction: column; gap: 4px; padding: 6px; max-height: 70vh; overflow-y: auto; background: #102334ed; border: 1px solid #ac9467; pointer-events: auto; }
#hud #sys-controls[hidden] { display: none; }
#hud #sys button { min-height: 36px; height: auto; }
#hud #sys [data-sys-toggle] { min-width: 36px; justify-content: center; padding: 6px; }
#hud #sys-controls button.sq { width: 100%; }
html.vp-touch #hud #sys button { min-height: var(--read-hit); }
html.vp-touch #hud #sys [data-sys-toggle] { min-width: var(--read-hit); }