/* ==========================================================================================
   RASCALS POCKET — dedicated phone UI (landscape). Loaded LAST; only active on body.mobile.
   One system for every window:
     · App bar 44px (title + close), no desktop ornaments.
     · Navigation = left icon rail (tabs stacked), content right.
     · Master–detail: list/grid left, detail column right, primary action pinned at the bottom.
     · Type scale 10/11/12/13/15, touch targets >= 40px, nothing scrolls the page sideways.
   Textures and palette stay the game's (aestethic.md); only layout, density and hierarchy change.
   ========================================================================================== */
body.mobile {
  --pk-bar: 44px;
  --pk-body-h: calc(var(--mobile-ui-height, 100dvh) - var(--pk-bar));
  --pk-rail: 92px;
  --pk-side: clamp(220px, 32vw, 300px);
  --pk-pad: 8px;
  --pk-ink: #0b1013;
  --pk-line: #3a3324;
  --pk-line2: #5a4a30;
  --pk-gold: #e1c77d;
  --pk-gold2: #c9a35c;
  --pk-fs-xs: 10px;
  --pk-fs-sm: 11px;
  --pk-fs: 12px;
  --pk-fs-md: 13px;
  --pk-fs-lg: 15px;
}

/* ---------------------------------------------------------------- shell */
html body.mobile #windows > .win { border-radius: 0 !important; flex-direction: column !important; min-width: 0; overflow: hidden; }
html body.mobile #windows > .win:only-child { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
html body.mobile #windows > .win:not(:only-child) { flex: 1 1 0 !important; width: auto !important; max-width: none !important; }

/* app bar */
html body.mobile #windows .win > .win-title {
  flex: 0 0 var(--pk-bar) !important; height: var(--pk-bar) !important; min-height: var(--pk-bar) !important; max-height: var(--pk-bar) !important;
  padding: 0 0 0 calc(12px + var(--mobile-safe-left, 0px)) !important; margin: 0 !important; gap: 8px !important;
  display: flex !important; align-items: center !important; box-sizing: border-box !important;
  border-bottom: 1px solid var(--pk-line2) !important; box-shadow: inset 0 -1px 0 #000, 0 2px 6px rgba(0,0,0,.45) !important;
  font: 700 var(--pk-fs-md)/1 'Cinzel', serif !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--pk-gold) !important;
  cursor: default !important;
}
html body.mobile #windows .win > .win-title::before, html body.mobile #windows .win > .win-title::after { display: none !important; content: none !important; }
html body.mobile #windows .win > .win-title > span:first-child { flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; overflow-wrap: normal !important; }
html body.mobile #windows .win > .win-title .x {
  flex: 0 0 var(--pk-bar) !important; width: var(--pk-bar) !important; height: var(--pk-bar) !important; min-width: var(--pk-bar) !important; min-height: var(--pk-bar) !important;
  margin: 0 0 0 auto !important; padding: 0 !important; display: grid !important; place-items: center !important;
  font: 400 18px/1 system-ui, sans-serif !important; color: var(--pk-gold) !important; background: transparent !important; border: 0 !important;
  border-left: 1px solid var(--pk-line) !important; box-shadow: none !important;
}
html body.mobile #windows .win > .win-title .x:active { background: rgba(255,106,92,.18) !important; color: #fff !important; }
html body.mobile #windows .win > .win-title .win-min { display: none !important; }

/* body */
html body.mobile #windows .win > .win-body { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: var(--pk-pad) !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: none !important; overscroll-behavior: contain; }
html body.mobile #windows .win > .win-body::-webkit-scrollbar { display: none !important; }
html body.mobile #windows .win * { scrollbar-width: none; }
html body.mobile #windows .win *::-webkit-scrollbar { display: none; }

/* shared controls */
html body.mobile #windows .win .rpg-btn { min-height: 40px; font-size: var(--pk-fs); letter-spacing: .04em; }
html body.mobile #windows .win .rpg-btn.sm { min-height: 40px; min-width: 40px; font-size: var(--pk-fs-sm); }
html body.mobile #windows .win :is(input[type=text], input[type=number], input[type=search], input:not([type]), select, textarea) { font-size: 16px; min-height: 36px; box-sizing: border-box; } /* 16px: iOS does not zoom on focus */

/* ---------------------------------------------------------------- NPC function windows */
/* The decorative craft banner repeats the app-bar title: gone on phones. */
html body.mobile #windows .npc-fn-win .fn-banner { display: none !important; }

/* ---------------------------------------------------------------- Cook (Bucătar / Cuptor / Foc)
   rail: tabs + oven queue · centre: recipe grid · right: recipe detail with COOK pinned. */
html body.mobile #windows .cook-win > .win-body { padding: 0 !important; overflow: hidden !important; }
html body.mobile #windows .cook-win .ck-page {
  display: grid !important; height: 100% !important; max-height: none !important; min-height: 0;
  grid-template-columns: var(--pk-rail) minmax(0, 1fr) var(--pk-side);
  grid-template-rows: 40px minmax(0, 1fr) auto;
  grid-template-areas: "tabs top top" "tabs main main" "side main main";
}
html body.mobile #windows .cook-win .ck-top { grid-area: top; display: flex !important; align-items: center; gap: 8px; padding: 0 8px !important; min-height: 0; border-bottom: 1px solid var(--pk-line) !important; }
html body.mobile #windows .cook-win .ck-title { display: none !important; }
html body.mobile #windows .cook-win .ck-chef { flex: 1 1 auto; gap: 8px !important; min-width: 0; }
html body.mobile #windows .cook-win .ck-lvl { width: 28px !important; height: 28px !important; font-size: 14px !important; flex: none; }
html body.mobile #windows .cook-win .ck-chef-mid { flex: 1 1 auto; min-width: 0 !important; display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; column-gap: 8px; }
html body.mobile #windows .cook-win .ck-chef-mid b { font-size: var(--pk-fs-xs) !important; }
html body.mobile #windows .cook-win .ck-xp { margin: 0 !important; }
html body.mobile #windows .cook-win .ck-chef-mid small { font-size: var(--pk-fs-xs) !important; white-space: nowrap; }
html body.mobile #windows .cook-win .ck-tree { min-height: 30px; padding: 0 12px !important; font-size: var(--pk-fs-xs) !important; }
html body.mobile #windows .cook-win .ck-silver { padding: 0 10px !important; height: 30px; box-sizing: border-box; font-size: var(--pk-fs) !important; }

/* tabs -> vertical rail */
html body.mobile #windows .cook-win .ck-tabs { grid-area: tabs; display: flex !important; flex-direction: column !important; gap: 4px; padding: 6px !important; border-bottom: 0 !important; border-right: 1px solid var(--pk-line) !important; overflow-y: auto; min-height: 0; }
html body.mobile #windows .cook-win .ck-tab { position: relative; flex: 0 0 auto; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; min-height: 46px !important; padding: 4px 2px !important; font-size: var(--pk-fs-xs) !important; letter-spacing: 0 !important; text-align: center; line-height: 1.15 !important; border: 1px solid transparent !important; border-bottom-width: 1px !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: auto; }
html body.mobile #windows .cook-win .ck-tab.on { border-color: var(--ember, #ff8a4c) !important; box-shadow: inset 3px 0 0 var(--ember, #ff8a4c) !important; }
html body.mobile #windows .cook-win .ck-badge { position: absolute; top: 2px; right: 2px; padding: 0 4px !important; font-size: 10px !important; line-height: 14px; }

/* main: grid | detail (the queue column moves into the rail) */
html body.mobile #windows .cook-win .ck-main { display: contents !important; }
html body.mobile #windows .cook-win .ck-pane { grid-area: main; display: grid !important; grid-template-columns: minmax(0, 1fr) var(--pk-side) !important; min-height: 0; overflow: hidden; border: 0 !important; }
html body.mobile #windows .cook-win .ck-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; gap: 6px !important; padding: 8px !important; max-height: none !important; height: 100%; box-sizing: border-box; overflow-y: auto !important; }
html body.mobile #windows .cook-win .ck-card { padding: 6px 4px !important; gap: 2px !important; min-height: 0 !important; }
html body.mobile #windows .cook-win .ck-card .icimg { width: 36px !important; height: 36px !important; }
html body.mobile #windows .cook-win .ck-cname { font-size: var(--pk-fs-sm) !important; min-height: 26px !important; letter-spacing: .02em !important; }
html body.mobile #windows .cook-win .ck-cbuff { font-size: var(--pk-fs-xs) !important; }
html body.mobile #windows .cook-win .ck-detail { gap: 6px !important; padding: 8px !important; max-height: none !important; height: 100%; box-sizing: border-box; overflow-y: auto !important; }
html body.mobile #windows .cook-win .ck-dhead { gap: 8px !important; }
html body.mobile #windows .cook-win .ck-dicon { width: 44px !important; height: 44px !important; }
html body.mobile #windows .cook-win .ck-dicon .icimg { width: 36px !important; height: 36px !important; }
html body.mobile #windows .cook-win .ck-dname { font-size: var(--pk-fs-lg) !important; margin-bottom: 2px !important; }
html body.mobile #windows .cook-win .ck-mat { padding: 4px 8px !important; font-size: var(--pk-fs) !important; }
html body.mobile #windows .cook-win .ck-stats { gap: 4px !important; }
html body.mobile #windows .cook-win .ck-stats > div { padding: 4px 8px !important; font-size: var(--pk-fs) !important; }
html body.mobile #windows .cook-win .ck-go { position: sticky; bottom: 0; margin-top: auto !important; min-height: 44px; padding: 0 12px !important; font-size: var(--pk-fs-md) !important; box-shadow: 0 -8px 12px var(--pk-ink) !important; }
html body.mobile #windows .cook-win .ck-lab { padding: 10px !important; gap: 8px !important; max-height: none !important; height: 100%; box-sizing: border-box; }
html body.mobile #windows .cook-win .ck-sell { gap: 4px !important; }
html body.mobile #windows .cook-win .ck-sellrow { gap: 8px !important; padding: 6px 8px !important; }

/* oven queue: compact tiles under the rail tabs */
html body.mobile #windows .cook-win .ck-side { grid-area: side; display: flex !important; flex-direction: column; gap: 4px !important; padding: 6px !important; border-right: 1px solid var(--pk-line); border-top: 1px solid var(--pk-line); overflow: visible !important; }
html body.mobile #windows .cook-win .ck-sidehead { font-size: 10px !important; letter-spacing: .08em !important; }
html body.mobile #windows .cook-win .ck-qslot { min-height: 34px !important; padding: 2px 4px !important; gap: 4px !important; font-size: 0 !important; justify-content: center; }
html body.mobile #windows .cook-win .ck-qslot .icimg { width: 24px !important; height: 24px !important; }
html body.mobile #windows .cook-win .ck-qslot .cq-time { margin: 0 !important; font-size: var(--pk-fs-sm) !important; }
html body.mobile #windows .cook-win .ck-qempty { font-size: 10px !important; }
html body.mobile #windows .cook-win .ck-vip { display: none !important; }

/* several visible windows: "Close all" sits in the last window's app bar, beside its X */
html body.mobile #windows { padding-top: 0 !important; }
html body.mobile #windows #win-closeall {
  position: static !important; inset: auto !important; transform: none !important; flex: 0 0 auto; align-self: center;
  height: 40px !important; min-height: 40px !important; margin: 0 4px 0 0 !important; padding: 0 10px !important; border-radius: 0 !important;
  font: 700 var(--pk-fs-xs)/1 'Outfit', sans-serif !important; letter-spacing: .1em !important; text-transform: uppercase;
  color: #ffd7c8 !important; background: rgba(140, 36, 28, .45) !important; border: 1px solid #a8483a !important; box-shadow: none !important; z-index: auto !important;
}

/* ---------------------------------------------------------------- Inventory
   left: character with equipment slots around it · wallet · stations │ right: bag/sort · filters · search · item grid. */
html body.mobile #windows #win-inv > .win-body {
  display: grid !important; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: 40px 40px 40px minmax(0, 1fr);
  column-gap: 10px; row-gap: 6px; height: 100% !important; overflow: hidden !important; padding: 8px 0 0 calc(8px + var(--mobile-safe-left, 0px)) !important; box-sizing: border-box;
}
html body.mobile #windows #win-inv > .win-body > * { grid-column: 2; min-width: 0; margin: 0 !important; }
html body.mobile #windows #win-inv > .win-body > .inv-tabs { grid-row: 1; }
html body.mobile #windows #win-inv > .win-body > .inv-filters { grid-row: 2; }
html body.mobile #windows #win-inv > .win-body > .inv-search-row { grid-row: 3; }
html body.mobile #windows #win-inv > .win-body > .inv-side {
  grid-column: 1; grid-row: 1 / -1; position: static !important; width: auto !important; height: auto !important; min-height: 0;
  display: flex !important; flex-direction: column; gap: 6px; padding: 0 0 10px !important; background: none !important; border: 0 !important; box-shadow: none !important;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none; touch-action: pan-y; overscroll-behavior: contain;
}
html body.mobile #windows #win-inv .inv-side::-webkit-scrollbar { display: none; }
html body.mobile #windows #win-inv .inv-side > * { flex-shrink: 0; margin: 0 !important; }
html body.mobile #windows #win-inv .inv-side .eq-doll {
  position: relative !important; inset: auto !important; transform: none !important; width: auto !important; height: auto !important; margin: 0 !important;
  display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-rows: repeat(5, 44px); gap: 5px; padding: 6px !important;
  background: rgba(0,0,0,.24) !important; border: 1px solid var(--pk-line) !important; border-radius: 4px; box-shadow: none !important; box-sizing: border-box;
}
html body.mobile #windows #win-inv .inv-side .eq-doll::before, html body.mobile #windows #win-inv .inv-side .eq-doll::after { display: none !important; }
html body.mobile #windows #win-inv .inv-side .eq-doll .eq-doll-model {
  grid-column: 2; grid-row: 1 / -1; position: static !important; inset: auto !important; width: 100% !important; height: 100% !important; min-width: 0; object-fit: contain; image-rendering: pixelated; pointer-events: none;
}
html body.mobile #windows #win-inv .inv-side .eq-slot { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; transform: none !important; translate: none !important; scale: none !important; width: 44px !important; height: 44px !important; margin: 0 !important; box-sizing: border-box; }
html body.mobile #windows #win-inv .inv-side .eq-slot .icimg { width: 32px !important; height: 32px !important; }
html body.mobile #windows #win-inv .inv-side .eq-slot.eq-empty .eq-ghost { opacity: .28; }
html body.mobile #windows #win-inv .eq-slot[data-eqslot="helmet"]     { grid-area: 1 / 1; }
html body.mobile #windows #win-inv .eq-slot[data-eqslot="armor"]      { grid-area: 2 / 1; }
html body.mobile #windows #win-inv .eq-slot[data-eqslot="weapon"]     { grid-area: 3 / 1; }
html body.mobile #windows #win-inv .eq-slot[data-eqslot="boots"]      { grid-area: 4 / 1; }
html body.mobile #windows #win-inv .eq-slot[data-eqslot="dice"]       { grid-area: 5 / 1; }
html body.mobile #windows #win-inv .eq-slot[data-eqslot="necklace"]   { grid-area: 1 / 3; }
html body.mobile #windows #win-inv .eq-slot[data-eqslot="shield"]     { grid-area: 2 / 3; }
html body.mobile #windows #win-inv .eq-slot[data-eqslot="ring"]       { grid-area: 3 / 3; }
html body.mobile #windows #win-inv .eq-slot[data-eqslot="fishingRod"] { grid-area: 4 / 3; }
html body.mobile #windows #win-inv .eq-slot[data-eqslot="pickaxe"]    { grid-area: 5 / 3; }
html body.mobile #windows #win-inv .inv-tabs { display: grid !important; grid-template-columns: 1fr auto; gap: 6px; height: 40px; }
html body.mobile #windows #win-inv .inv-space { height: 40px; display: flex; align-items: center; gap: 4px; font-size: var(--pk-fs) !important; }
html body.mobile #windows #win-inv .inv-sort { height: 40px !important; min-height: 40px !important; padding: 0 12px !important; font-size: var(--pk-fs-sm) !important; white-space: nowrap; }
html body.mobile #windows #win-inv .inv-filters { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; grid-auto-flow: row !important; gap: 4px !important; height: 38px; }
html body.mobile #windows #win-inv .inv-filter-btn { height: 40px !important; min-height: 40px !important; min-width: 0 !important; padding: 0 !important; }
html body.mobile #windows #win-inv .inv-filter-btn > :not(svg):not(img):last-child { display: none !important; }
html body.mobile #windows #win-inv .inv-search-row { height: 40px; position: relative; }
html body.mobile #windows #win-inv .inv-search { height: 40px !important; min-height: 40px !important; width: 100% !important; }
html body.mobile #windows #win-inv .inv-currency { display: flex !important; flex-wrap: wrap; gap: 4px !important; padding: 0 !important; background: none !important; border: 0 !important; }
html body.mobile #windows #win-inv .inv-currency::before { display: none !important; }
html body.mobile #windows #win-inv .cur-chip { height: 28px; padding: 0 8px !important; font-size: var(--pk-fs-sm) !important; display: flex; align-items: center; gap: 4px; border: 1px solid var(--pk-line) !important; background: rgba(0,0,0,.28) !important; }
html body.mobile #windows #win-inv .inv-station-buttons { display: flex !important; gap: 4px; }
html body.mobile #windows #win-inv .inv-station-btn { flex: 1 1 0; min-height: 40px !important; font-size: var(--pk-fs-sm) !important; padding: 0 6px !important; }
html body.mobile #windows #win-inv > .win-body > .inv-grid {
  grid-column: 2 !important; grid-row: 4 !important; align-self: stretch; height: 100% !important; max-height: none !important;
  display: grid !important; grid-template-columns: repeat(auto-fill, 54px) !important; grid-template-rows: none !important; grid-auto-flow: row !important; grid-auto-rows: 54px !important; grid-auto-columns: auto !important;
  gap: 6px !important; align-content: start; justify-content: start; padding: 0 calc(8px + var(--mobile-safe-right, 0px)) 12px 0 !important; box-sizing: border-box;
  overflow-x: hidden !important; overflow-y: auto !important; touch-action: pan-y; overscroll-behavior: contain;
}
html body.mobile #windows #win-inv .inv-grid > .inv-slot { width: 54px !important; height: 54px !important; min-width: 0 !important; min-height: 0 !important; }
html body.mobile #windows #win-inv .inv-ornaments { display: none !important; }

/* ---------------------------------------------------------------- Rail (shared tab column)
   Every tabbed window uses the same stacked icon + label tab. */
html body.mobile #windows :is(#win-char .character-nav) {
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 4px !important;
  width: auto !important; height: 100% !important; max-height: none !important; margin: 0 !important; padding: 6px !important; box-sizing: border-box;
  overflow-y: auto !important; overflow-x: hidden !important; border-right: 1px solid var(--pk-line) !important; background: rgba(0,0,0,.22) !important;
}
html body.mobile #windows :is(#win-char .character-nav) > :is(button, .inv-tab) {
  flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 44px !important; margin: 0 !important; padding: 4px 2px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important;
  font: 700 var(--pk-fs-xs)/1.1 'Outfit', sans-serif !important; letter-spacing: 0 !important; text-align: center !important;
  white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: auto;
}
html body.mobile #windows :is(#win-char .character-nav) > :is(button, .inv-tab) :is(.ct-lb) { display: block !important; max-width: 100%; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; }

/* ---------------------------------------------------------------- Character
   rail │ identity strip (portrait · name · HP/MP/XP) over scrolling tab content. */
html body.mobile #windows #win-char > .win-body {
  display: grid !important; grid-template-columns: var(--pk-rail) minmax(0, 1fr); grid-template-rows: 60px minmax(0, 1fr);
  height: 100% !important; padding: 0 !important; overflow: hidden !important; gap: 0 !important;
}
html body.mobile #windows #win-char .character-nav { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
html body.mobile #windows #win-char .hero-banner {
  grid-column: 2 !important; grid-row: 1 !important; height: 60px !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px 0 8px !important; box-sizing: border-box;
  display: grid !important; grid-template-columns: 44px minmax(90px, auto) minmax(0, 1fr) !important; gap: 10px !important; align-items: center !important;
  border: 0 !important; border-bottom: 1px solid var(--pk-line) !important; border-radius: 0 !important; box-shadow: none !important;
}
html body.mobile #windows #win-char .hero-banner::before, html body.mobile #windows #win-char .hero-banner::after { display: none !important; }
html body.mobile #windows #win-char .hb-portrait { position: relative; width: 44px !important; height: 56px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible; }
html body.mobile #windows #win-char .hb-portrait::before, html body.mobile #windows #win-char .hb-portrait::after { display: none !important; }
html body.mobile #windows #win-char .character-portrait { width: 36px !important; height: 56px !important; margin: 0 auto !important; display: block; position: static !important; }
html body.mobile #windows #win-char .hb-lv-ring { position: absolute !important; left: auto !important; right: -6px !important; bottom: 0 !important; top: auto !important; transform: none !important; width: 22px !important; height: 22px !important; font-size: 11px !important; line-height: 20px !important; }
html body.mobile #windows #win-char .hb-info { display: contents !important; }
html body.mobile #windows #win-char .hb-name { font-size: var(--pk-fs-lg) !important; line-height: 1.1 !important; height: auto !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; grid-column: 2; grid-row: 1; padding-bottom: 22px; }
html body.mobile #windows #win-char .hb-meta { display: block !important; grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 8px !important; font-size: var(--pk-fs-sm) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.mobile #windows #win-char .hb-bars { grid-column: 3; grid-row: 1; display: grid !important; gap: 3px !important; margin: 0 !important; }
html body.mobile #windows #win-char .hb-bars > * { height: 13px !important; min-height: 0 !important; margin: 0 !important; font-size: 10px !important; line-height: 13px !important; }
html body.mobile #windows #win-char .hb-bars * { line-height: 13px !important; font-size: 10px !important; }
html body.mobile #windows #win-char .char-tab-content { grid-column: 2 !important; grid-row: 2 !important; min-height: 0; height: 100%; overflow-y: auto !important; overflow-x: hidden !important; padding: 8px 10px 16px calc(10px) !important; box-sizing: border-box; margin: 0 !important; }
html body.mobile #windows #win-char .hb-portrait { width: 40px !important; height: 40px !important; }
html body.mobile #windows #win-char .character-portrait { display: none !important; }
html body.mobile #windows #win-char .hb-lv-ring { inset: 0 !important; width: 40px !important; height: 40px !important; font-size: 16px !important; line-height: 38px !important; }
html body.mobile #windows #win-char .hero-banner { grid-template-columns: 40px minmax(90px, auto) minmax(0, 1fr) !important; }

/* Stats tab: Combat | Attributes side by side, Journey below; compact cells. */
html body.mobile #windows #win-char .char-tab-content:has(> .character-combat) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-content: start; }
html body.mobile #windows #win-char .character-journey { grid-column: 1 / -1; }
html body.mobile #windows #win-char .character-section { margin: 0 !important; padding: 8px 10px !important; min-width: 0; }
html body.mobile #windows #win-char .character-section::before, html body.mobile #windows #win-char .character-section::after { display: none !important; }
html body.mobile #windows #win-char .character-section > h3 { margin: 0 0 6px !important; padding: 0 0 4px !important; font: 700 var(--pk-fs-xs)/1.2 'Outfit', sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--pk-gold2) !important; }
html body.mobile #windows #win-char .character-section > h3::after, html body.mobile #windows #win-char .character-section > h3::before { display: none !important; }
html body.mobile #windows #win-char .combat-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
html body.mobile #windows #win-char .combat-cell { min-height: 0 !important; height: 52px; padding: 4px 8px !important; display: grid !important; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; align-items: center; text-align: left !important; }
html body.mobile #windows #win-char .combat-cell::before, html body.mobile #windows #win-char .combat-cell::after { display: none !important; }
html body.mobile #windows #win-char .combat-cell > svg { grid-row: 1 / span 2; width: 22px !important; height: 22px !important; position: static !important; }
html body.mobile #windows #win-char .cc-k { font-size: var(--pk-fs-xs) !important; position: static !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.mobile #windows #win-char .cc-v { font-size: 18px !important; line-height: 1 !important; position: static !important; }
html body.mobile #windows #win-char .stat-pts-row { min-height: 0 !important; padding: 4px 8px !important; margin: 0 0 6px !important; font-size: var(--pk-fs) !important; }
html body.mobile #windows #win-char .character-stat-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
html body.mobile #windows #win-char .character-stat-grid .stat-row { min-height: 0 !important; height: 44px; padding: 0 4px 0 8px !important; font-size: var(--pk-fs) !important; }
html body.mobile #windows #win-char .character-stat-grid .stat-row button { width: 40px !important; height: 40px !important; min-width: 40px !important; }
html body.mobile #windows #win-char .character-journey .stat-row { min-height: 0 !important; height: 34px; font-size: var(--pk-fs) !important; }
html body.mobile #windows #win-char .rep-row { margin: 0 0 6px !important; }
html body.mobile #windows #win-char .rep-perks { flex-wrap: wrap; gap: 3px !important; }
html body.mobile #windows #win-char .rep-perk { font-size: var(--pk-fs-xs) !important; }

/* Bonuses tab: dense 3-up grid */
html body.mobile #windows #win-char .char-tab-content:has(> .stat-row) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start; }
html body.mobile #windows #win-char .char-tab-content:has(> .stat-row) > :not(.stat-row) { grid-column: 1 / -1; margin: 2px 0 !important; }
html body.mobile #windows #win-char .char-tab-content > .stat-row { min-height: 0 !important; height: 46px; padding: 4px 10px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 2px !important; box-sizing: border-box; }
html body.mobile #windows #win-char .char-tab-content > .stat-row > span { font-size: var(--pk-fs-xs) !important; line-height: 1.1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html body.mobile #windows #win-char .char-tab-content > .stat-row > b { font-size: 16px !important; line-height: 1 !important; }
html body.mobile #windows #win-char .char-tab-content > .stat-row.is-zero { opacity: .55; }

/* Skills tab: two columns */
html body.mobile #windows #win-char .cs-skill-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
html body.mobile #windows #win-char .skills-header-container { min-height: 0 !important; padding: 4px 8px !important; margin: 0 0 6px !important; }

/* Collections · Titles · Cosmetics: compact header, chip filters, list | detail that scroll on their own */
html body.mobile #windows #win-char .char-tab-content:has(> .ct-layout) { display: flex !important; flex-direction: column; gap: 6px; overflow: hidden !important; padding-bottom: 8px !important; }
html body.mobile #windows #win-char .ct-head { flex: 0 0 auto; display: flex !important; align-items: baseline; gap: 10px; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
html body.mobile #windows #win-char .ct-head > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
html body.mobile #windows #win-char .ct-head h3 { margin: 0 !important; font-size: var(--pk-fs-lg) !important; white-space: nowrap; }
html body.mobile #windows #win-char .ct-head p { margin: 0 !important; font-size: var(--pk-fs-sm) !important; white-space: nowrap; }
html body.mobile #windows #win-char .ct-head small { margin-left: auto; font-size: var(--pk-fs-sm) !important; white-space: nowrap; }
html body.mobile #windows #win-char :is(.ct-filters, .ct-cosmetic-tools) { flex: 0 0 auto; display: flex !important; gap: 4px !important; margin: 0 !important; overflow-x: auto; flex-wrap: nowrap !important; }
html body.mobile #windows #win-char .ct-filter { flex: 0 0 auto !important; height: 40px !important; min-height: 40px !important; padding: 0 12px !important; font-size: var(--pk-fs-xs) !important; white-space: nowrap; }
html body.mobile #windows #win-char .ct-category { height: 40px !important; min-height: 40px !important; margin-left: auto; font-size: 16px !important; }
html body.mobile #windows #win-char .ct-layout { flex: 1 1 0; min-height: 0; display: grid !important; grid-template-columns: minmax(0, 1fr) var(--pk-side) !important; gap: 8px !important; margin: 0 !important; height: auto !important; }
html body.mobile #windows #win-char .ct-list { min-height: 0; max-height: none !important; height: 100%; overflow-y: auto !important; display: flex; flex-direction: column; gap: 4px !important; }
html body.mobile #windows #win-char .ct-row { flex: 0 0 auto; min-height: 42px !important; height: auto !important; padding: 4px 10px !important; font-size: var(--pk-fs) !important; }
html body.mobile #windows #win-char .ct-detail { position: relative; min-height: 0; max-height: none !important; height: 100% !important; box-sizing: border-box; overflow-y: auto !important; padding: 8px 10px 0 !important; display: flex; flex-direction: column; gap: 6px; }
html body.mobile #windows #win-char .ct-detail h4 { margin: 0 !important; font-size: var(--pk-fs-lg) !important; }
html body.mobile #windows #win-char .ct-detail .ct-kicker { margin: 0 !important; }
html body.mobile #windows #win-char .ct-detail p { margin: 0 !important; font-size: var(--pk-fs) !important; }
html body.mobile #windows #win-char .ct-cosmetic-preview { flex: 0 0 auto; height: auto !important; min-height: 0 !important; padding: 6px !important; }
html body.mobile #windows #win-char .ct-cosmetic-preview .cos-fig { width: 120px !important; height: 120px !important; margin: 0 auto !important; }
html body.mobile #windows #win-char .ct-cosmetic-preview .cos-plate { height: auto !important; min-height: 0 !important; padding: 2px 6px !important; }
html body.mobile #windows #win-char .ct-activate { position: sticky; bottom: 0; flex: 0 0 auto; margin: auto 0 0 !important; min-height: 42px !important; box-shadow: 0 -8px 10px var(--pk-ink) !important; }

/* ---------------------------------------------------------------- Skills
   rail: filters │ top strip: class · ultimates · tools │ tree | detail (each scrolls). */
html body.mobile #windows #win-skills > .win-body {
  display: grid !important; grid-template-columns: var(--pk-rail) auto minmax(0, 1fr) auto; grid-template-rows: 44px minmax(0, 1fr);
  height: 100% !important; padding: 0 !important; overflow: hidden !important; gap: 0 !important;
}
html body.mobile #windows #win-skills .sk-bar { display: contents !important; }
html body.mobile #windows #win-skills .sk-filters {
  grid-column: 1; grid-row: 1 / span 2; display: flex !important; flex-direction: column !important; gap: 4px !important; width: auto !important; height: 100% !important;
  padding: 6px !important; box-sizing: border-box; overflow-y: auto; border-right: 1px solid var(--pk-line); background: rgba(0,0,0,.22);
}
html body.mobile #windows #win-skills .sk-filter {
  flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 44px !important; padding: 4px 2px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important;
  writing-mode: horizontal-tb !important; font: 700 var(--pk-fs-xs)/1.1 'Outfit', sans-serif !important; letter-spacing: 0 !important; white-space: normal !important; text-align: center;
}
html body.mobile #windows #win-skills .sk-banner {
  grid-column: 2; grid-row: 1; height: 44px !important; min-height: 0 !important; padding: 0 8px !important; margin: 0 !important; box-sizing: border-box;
  display: flex !important; align-items: center; gap: 8px; border: 0 !important; border-bottom: 1px solid var(--pk-line) !important; background: none !important; box-shadow: none !important;
}
html body.mobile #windows #win-skills .sk-banner::before, html body.mobile #windows #win-skills .sk-banner::after { display: none !important; }
html body.mobile #windows #win-skills .sb-emj { width: 28px !important; height: 28px !important; flex: none; font-size: 16px !important; margin: 0 !important; }
html body.mobile #windows #win-skills .sb-mid { min-width: 0; }
html body.mobile #windows #win-skills .sb-cls { font-size: var(--pk-fs-md) !important; white-space: nowrap; }
html body.mobile #windows #win-skills .sb-meta { display: none !important; }
html body.mobile #windows #win-skills .sb-pts { height: 30px !important; padding: 0 8px !important; display: flex !important; align-items: center; gap: 6px; flex: none; }
html body.mobile #windows #win-skills .sb-pts-k { font-size: 10px !important; }
html body.mobile #windows #win-skills .sb-pts-v { font-size: 16px !important; line-height: 1 !important; height: auto !important; }
html body.mobile #windows #win-skills .sk-ults { grid-column: 3; grid-row: 1; height: 44px !important; min-height: 0 !important; margin: 0 !important; padding: 0 8px !important; display: flex !important; align-items: center; gap: 6px; overflow-x: auto; border: 0 !important; border-bottom: 1px solid var(--pk-line) !important; background: none !important; box-sizing: border-box; }
html body.mobile #windows #win-skills .sk-ults .sp-section { font-size: var(--pk-fs-xs) !important; white-space: nowrap; margin: 0 !important; }
html body.mobile #windows #win-skills .sk-util { grid-column: 4; grid-row: 1; display: flex !important; gap: 4px !important; align-items: center; height: 44px !important; width: auto !important; padding: 0 8px 0 0 !important; border-bottom: 1px solid var(--pk-line); box-sizing: border-box; }
html body.mobile #windows #win-skills .sk-util-btn { height: 40px !important; min-height: 40px !important; width: auto !important; padding: 0 10px !important; font-size: var(--pk-fs-xs) !important; line-height: 1.1 !important; white-space: nowrap; }
html body.mobile #windows #win-skills .sk-list { grid-column: 2 / -1; grid-row: 2; min-height: 0; height: 100% !important; max-height: none !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; }
html body.mobile #windows #win-skills .journal-layout { height: 100% !important; min-height: 0 !important; max-height: none !important; display: grid !important; grid-template-columns: minmax(220px, 38%) minmax(0, 1fr) !important; gap: 0 !important; }
html body.mobile #windows #win-skills .sk-tree-wrap { height: 100% !important; max-height: none !important; overflow-y: auto !important; border-right: 1px solid var(--pk-line); box-sizing: border-box; }
html body.mobile #windows #win-skills .journal-detail { position: relative; height: 100% !important; max-height: none !important; overflow-y: auto !important; padding: 10px 12px 64px !important; box-sizing: border-box; }

/* ---------------------------------------------------------------- Generic: top tab strip -> rail
   Any window whose body starts with an .inv-tabs strip (quests, social, bank…) gets the rail layout. */
html body.mobile #windows .win > .win-body:not(.inv-body):has(> .inv-tabs:first-child) {
  position: relative !important; display: flex !important; flex-direction: column !important; gap: 6px !important;
  height: 100% !important; padding: 0 0 0 var(--pk-rail) !important; overflow: hidden !important; box-sizing: border-box;
}
html body.mobile #windows .win > .win-body:not(.inv-body) > .inv-tabs:first-child {
  position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: var(--pk-rail) !important;
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 4px !important;
  height: auto !important; max-height: none !important; margin: 0 !important; padding: 6px !important; box-sizing: border-box;
  overflow-y: auto !important; overflow-x: hidden !important; border: 0 !important; border-right: 1px solid var(--pk-line) !important; background: rgba(0,0,0,.22) !important;
}
html body.mobile #windows .win > .win-body:not(.inv-body) > .inv-tabs:first-child > :is(.inv-tab, button) {
  flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 44px !important; margin: 0 !important; padding: 4px 2px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important;
  font: 700 var(--pk-fs-xs)/1.1 'Outfit', sans-serif !important; letter-spacing: 0 !important; text-align: center !important;
  white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: auto; border-bottom-width: 1px !important;
}
/* content children stack to the right of the rail; the last one takes the remaining height and scrolls */
html body.mobile #windows .win > .win-body:not(.inv-body):has(> .inv-tabs:first-child) > :not(.inv-tabs) { flex: 0 0 auto; min-width: 0; margin: 0 !important; padding-left: 8px; padding-right: 8px; box-sizing: border-box; }
html body.mobile #windows .win > .win-body:not(.inv-body):has(> .inv-tabs:first-child) > :not(.inv-tabs):first-of-type { padding-top: 8px; }
html body.mobile #windows .win > .win-body:not(.inv-body):has(> .inv-tabs:first-child) > :not(.inv-tabs):last-child { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }

/* ---------------------------------------------------------------- Journal (index | detail), used by Quests and Skills */
html body.mobile #windows .win .journal-layout { display: grid !important; grid-template-columns: minmax(200px, 34%) minmax(0, 1fr) !important; gap: 0 !important; height: 100% !important; min-height: 0 !important; max-height: none !important; }
html body.mobile #windows .win .journal-index { height: 100% !important; max-height: none !important; overflow-y: auto !important; border-right: 1px solid var(--pk-line) !important; box-sizing: border-box; padding: 4px !important; display: flex; flex-direction: column; gap: 3px; }
html body.mobile #windows .win .journal-entry { flex: 0 0 auto; min-height: 44px !important; height: auto !important; padding: 6px 10px !important; margin: 0 !important; font-size: var(--pk-fs) !important; text-align: left; }
html body.mobile #windows .win .journal-entry small, html body.mobile #windows .win .journal-entry span small { font-size: var(--pk-fs-xs) !important; }
html body.mobile #windows .win .journal-detail { position: relative; height: 100% !important; max-height: none !important; overflow-y: auto !important; box-sizing: border-box; padding: 10px 12px !important; }

/* Quests */
html body.mobile #windows #win-quests .win-body > div:not(.inv-tabs) { padding: 0 !important; overflow: hidden !important; }
html body.mobile #windows #win-quests .quest-list { height: 100% !important; max-height: none !important; overflow: hidden !important; padding: 0 !important; }
html body.mobile #windows #win-quests .qcard:not(.journal-inactive) { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; display: grid !important; grid-template-columns: 52px minmax(0, 1fr); gap: 10px !important; }
html body.mobile #windows #win-quests .qcard::before, html body.mobile #windows #win-quests .qcard::after { display: none !important; }
html body.mobile #windows #win-quests .qc-icon { width: 52px !important; height: 52px !important; }
html body.mobile #windows #win-quests .qc-main { min-width: 0; }
html body.mobile #windows #win-quests .qc-main h3, html body.mobile #windows #win-quests .qc-main .qc-title { font-size: var(--pk-fs-lg) !important; margin: 0 0 4px !important; }
html body.mobile #windows #win-quests .qc-act { grid-column: 1 / -1; position: sticky; bottom: 0; padding: 8px 0 0 !important; background: linear-gradient(transparent, var(--pk-ink) 30%) !important; }
html body.mobile #windows #win-quests .qc-act .rpg-btn { min-height: 42px; }
html body.mobile #windows .journal-detail > .journal-inactive { display: none !important; }

/* ---------------------------------------------------------------- NPC dialogue: bottom dialogue box, the world stays visible above */
html body.mobile #windows > #win-npc { align-self: flex-end !important; height: auto !important; max-height: 78% !important; flex: 0 1 min(720px, 100%) !important; width: min(720px, 100%) !important; margin: 0 auto !important; border: 1px solid var(--pk-line2) !important; border-bottom: 0 !important; box-shadow: 0 -10px 30px rgba(0,0,0,.6) !important; }
html body.mobile #windows > #win-npc > .win-body {
  display: grid !important; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-content: start;
  padding: 10px 12px calc(10px + var(--mobile-safe-bottom, 0px)) !important;
}
html body.mobile #windows > #win-npc .npc-head { display: contents !important; }
html body.mobile #windows > #win-npc .npc-portrait { grid-column: 1; grid-row: 1 / span 2; width: 52px !important; height: 52px !important; margin: 0 !important; font-size: 26px !important; align-self: start; }
html body.mobile #windows > #win-npc .npc-head-info { grid-column: 2; grid-row: 1; display: flex !important; align-items: baseline; gap: 8px; min-width: 0; margin: 0 !important; }
html body.mobile #windows > #win-npc .npc-head-name { display: none !important; } /* already in the app bar */
html body.mobile #windows > #win-npc .npc-head-role { font-size: var(--pk-fs-xs) !important; letter-spacing: .12em; }
html body.mobile #windows > #win-npc .npc-speech { grid-column: 2; grid-row: 2; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: var(--pk-fs-md) !important; line-height: 1.4 !important; }
html body.mobile #windows > #win-npc .win-body > :not(.npc-head):not(.npc-speech) { grid-column: 1 / -1; margin: 0 !important; }
html body.mobile #windows > #win-npc .npc-open-fn { min-height: 44px !important; width: 100%; }
html body.mobile #windows > #win-npc .bank-npc-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; }
html body.mobile #windows > #win-npc .quest-list-npc { display: grid !important; gap: 6px !important; }

/* ---------------------------------------------------------------- NPC vendor shelf: chip tabs · item grid · buy bar pinned */
html body.mobile #windows .npc-fn-win > .win-body:has(> .shop-vitrine) { display: flex !important; flex-direction: column !important; padding: 0 !important; overflow: hidden !important; }
html body.mobile #windows .shop-vitrine { flex: 1 1 0; min-height: 0; display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html body.mobile #windows .sv-tabs { flex: 0 0 auto; display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; padding: 6px 8px !important; overflow-x: auto; border-bottom: 1px solid var(--pk-line) !important; }
html body.mobile #windows .sv-tab { flex: 0 0 auto !important; height: 40px !important; min-height: 40px !important; padding: 0 12px !important; display: flex !important; align-items: center; font-size: var(--pk-fs-xs) !important; letter-spacing: .06em !important; white-space: nowrap; border: 1px solid var(--pk-line) !important; }
html body.mobile #windows .sv-tab.on { border-color: var(--pk-gold2) !important; color: var(--pk-gold) !important; }
html body.mobile #windows .sv-grid { flex: 1 1 0; min-height: 0; overflow-y: auto !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important; gap: 6px !important; padding: 8px !important; margin: 0 !important; align-content: start; }
html body.mobile #windows .sv-item { padding: 6px 4px !important; gap: 3px !important; min-height: 0 !important; height: auto !important; }
html body.mobile #windows .sv-item .sv-slot { width: 44px !important; height: 44px !important; }
html body.mobile #windows .sv-item .sv-slot .icimg { width: 34px !important; height: 34px !important; }
html body.mobile #windows .sv-iname { font-size: var(--pk-fs-sm) !important; line-height: 1.15 !important; min-height: 26px !important; }
html body.mobile #windows .sv-plate { font-size: var(--pk-fs-sm) !important; padding: 2px 6px !important; }
html body.mobile #windows .sv-foot { flex: 0 0 auto; margin: 0 !important; padding: 6px 8px calc(6px + var(--mobile-safe-bottom, 0px)) !important; border-top: 1px solid var(--pk-line2) !important; display: grid !important; gap: 6px !important; box-shadow: 0 -6px 12px rgba(0,0,0,.4); }
html body.mobile #windows .sv-detail { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
html body.mobile #windows .sv-detail .sv-slot { width: 40px !important; height: 40px !important; }
html body.mobile #windows .sv-dname { font-size: var(--pk-fs-md) !important; }
html body.mobile #windows .sv-ddesc { display: none !important; }
html body.mobile #windows .sv-qty { gap: 3px !important; margin: 0 !important; }
html body.mobile #windows .sv-qty .ibtn { min-width: 40px !important; height: 40px !important; padding: 0 6px !important; font-size: var(--pk-fs-sm) !important; }
html body.mobile #windows .sv-buyrow { display: flex !important; align-items: center; gap: 8px !important; margin: 0 !important; }
html body.mobile #windows .sv-buy { min-height: 40px !important; padding: 0 16px !important; font-size: var(--pk-fs-md) !important; }
html body.mobile #windows .sv-bal, html body.mobile #windows .sv-hint { font-size: var(--pk-fs) !important; padding: 0 !important; margin: 0 !important; }
html body.mobile #windows .sv-foot:has(> .sv-hint) { display: flex !important; justify-content: space-between; align-items: center; }

/* ---------------------------------------------------------------- Split view: inventory beside a station/shop/trade window */
html body.mobile #windows > #win-inv:not(:only-child) > .win-body {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
  padding: 6px 0 0 8px !important; gap: 6px !important;
}
html body.mobile #windows > #win-inv:not(:only-child) .inv-side, html body.mobile #windows > #win-inv:not(:only-child) .inv-currency { display: none !important; }
html body.mobile #windows > #win-inv:not(:only-child) > .win-body > * { grid-column: auto; }
html body.mobile #windows > #win-inv:not(:only-child) .inv-tabs { grid-column: 1 / -1 !important; grid-row: 1; margin-right: 8px !important; }
html body.mobile #windows > #win-inv:not(:only-child) .inv-filters { grid-column: 1 !important; grid-row: 2; }
html body.mobile #windows > #win-inv:not(:only-child) .inv-search-row { grid-column: 2 !important; grid-row: 2; margin-right: 8px !important; }
html body.mobile #windows > #win-inv:not(:only-child) .inv-station-buttons { display: none !important; }
html body.mobile #windows > #win-inv:not(:only-child) > .win-body > .inv-grid { grid-column: 1 / -1 !important; grid-row: 3 !important; height: 100% !important; grid-template-columns: repeat(auto-fill, 52px) !important; grid-auto-rows: 52px !important; justify-content: center; }
html body.mobile #windows > #win-inv:not(:only-child) .inv-grid > .inv-slot { width: 52px !important; height: 52px !important; }

/* ---------------------------------------------------------------- Smith / forge stations: piece card on top, actions pinned at the bottom */
html body.mobile #windows .smith-station > .win-body { display: flex !important; flex-direction: column !important; padding: 0 !important; overflow: hidden !important; }
html body.mobile #windows .smith-station .smith-workspace { flex: 1 1 0; min-height: 0; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 8px !important; overflow-y: auto !important; box-sizing: border-box; }
html body.mobile #windows .smith-station .smith-work { flex: 1 0 auto; display: flex; flex-direction: column; margin: 0 !important; }
html body.mobile #windows .smith-station .smith-preview {
  flex: 1 0 auto; display: grid !important; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px 10px !important;
  margin: 0 !important; padding: 8px !important; align-items: start;
}
html body.mobile #windows .smith-station .smith-visual { grid-column: 1; grid-row: 1; width: 76px !important; height: 100px !important; min-height: 0 !important; padding: 0 !important; }
html body.mobile #windows .smith-station .smith-info { grid-column: 2; grid-row: 1; min-width: 0; }
html body.mobile #windows .smith-station .smith-item { font-size: var(--pk-fs-lg) !important; line-height: 1.2 !important; margin: 0 0 4px !important; }
html body.mobile #windows .smith-station :is(.smith-stat, .smith-cost, .smith-chance) { font-size: var(--pk-fs) !important; margin: 2px 0 !important; }
html body.mobile #windows .smith-station .smith-stats-cur { font-size: var(--pk-fs-xs) !important; }
html body.mobile #windows .smith-station .smith-actions {
  grid-column: 1 / -1; grid-row: 2; position: sticky; bottom: -8px; z-index: 2; flex: none !important; width: auto !important;
  display: grid !important; grid-template-columns: 2fr 1fr; gap: 6px !important; margin: 0 -8px -8px !important; padding: 8px !important;
  background: linear-gradient(transparent, var(--pk-ink) 35%) !important;
}
html body.mobile #windows .smith-station .smith-act-btn { min-height: 44px !important; height: 44px; padding: 0 8px !important; font-size: var(--pk-fs-md) !important; line-height: 1.1 !important; display: flex !important; align-items: center; justify-content: center; gap: 6px; }
html body.mobile #windows .smith-station .smith-act-btn br { display: none; }
html body.mobile #windows .smith-station .smith-idle { padding: 10px !important; margin: 0 !important; }
html body.mobile #windows .smith-station .smith-idle h3, html body.mobile #windows .smith-station .smith-idle b:first-of-type { font-size: var(--pk-fs-lg) !important; }

/* piece picker (split partner): header is the app bar, list as two columns */
html body.mobile #windows #win-smithinv > .win-body { padding: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column; }
html body.mobile #windows #win-smithinv .smith-picker { flex: 1 1 0; min-height: 0; display: flex !important; flex-direction: column; margin: 0 !important; padding: 0 !important; height: auto !important; max-height: none !important; border: 0 !important; }
html body.mobile #windows #win-smithinv .smith-picker-head { flex: none; min-height: 0 !important; padding: 6px 10px !important; margin: 0 !important; border-bottom: 1px solid var(--pk-line) !important; }
html body.mobile #windows #win-smithinv .smith-picker-head > :not(small), html body.mobile #windows #win-smithinv .smith-picker-head::before { display: none !important; }
html body.mobile #windows #win-smithinv .smith-picker-head small { font-size: var(--pk-fs-sm) !important; margin: 0 !important; padding: 0 !important; }
html body.mobile #windows #win-smithinv .smith-picker-list { flex: 1 1 0; min-height: 0; max-height: none !important; height: auto !important; overflow-y: auto !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px !important; padding: 6px 8px !important; align-content: start; }
html body.mobile #windows #win-smithinv .smith-pick { min-height: 44px !important; height: auto !important; margin: 0 !important; padding: 4px 8px !important; font-size: var(--pk-fs-sm) !important; }

/* ---------------------------------------------------------------- Clan: rail │ banner strip (emblem · name · XP) over the tab body */
html body.mobile #windows #win-guild > .win-body {
  display: grid !important; grid-template-columns: var(--pk-rail) minmax(0, 1fr) !important; grid-template-rows: 48px minmax(0, 1fr) !important;
  height: 100% !important; padding: 0 !important; overflow: hidden !important; gap: 0 !important; column-gap: 0 !important;
}
html body.mobile #windows #win-guild .guild-banner {
  grid-column: 2 !important; grid-row: 1 !important; height: 48px !important; min-height: 0 !important; margin: 0 !important; padding: 0 10px !important; gap: 10px !important;
  display: flex !important; align-items: center !important; border: 0 !important; border-bottom: 1px solid var(--pk-line) !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box; overflow: hidden !important;
}
html body.mobile #windows #win-guild .guild-banner::before, html body.mobile #windows #win-guild .guild-banner::after { display: none !important; }
html body.mobile #windows #win-guild .guild-banner > svg, html body.mobile #windows #win-guild .gb-emblem { width: 26px !important; height: 30px !important; flex: none; }
html body.mobile #windows #win-guild .gb-main { flex: 1 1 auto; min-width: 0; display: grid !important; grid-template-columns: auto minmax(80px, 1fr); align-items: center; gap: 10px !important; height: auto !important; }
html body.mobile #windows #win-guild .gb-name { font-size: var(--pk-fs-lg) !important; line-height: 1.1 !important; height: auto !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; }
html body.mobile #windows #win-guild .gb-meta { display: none !important; }
html body.mobile #windows #win-guild .gb-xp { height: 14px !important; margin: 0 !important; }
html body.mobile #windows #win-guild .gb-xp .lbl { font-size: 10px !important; line-height: 12px !important; }
html body.mobile #windows #win-guild .guild-tabs {
  grid-column: 1 !important; grid-row: 1 / span 2 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; width: auto !important; flex: none !important;
  height: 100% !important; margin: 0 !important; padding: 6px !important; box-sizing: border-box; overflow-y: auto !important; border: 0 !important; border-right: 1px solid var(--pk-line) !important; background: rgba(0,0,0,.22) !important;
}
html body.mobile #windows #win-guild .guild-tab {
  position: relative; flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 44px !important; margin: 0 !important; padding: 4px 2px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important;
  font: 700 var(--pk-fs-xs)/1.1 'Outfit', sans-serif !important; letter-spacing: 0 !important; text-align: center; white-space: normal !important;
}
html body.mobile #windows #win-guild .gtb-b { position: absolute !important; top: 2px; right: 2px; margin: 0 !important; font-size: 10px !important; }
html body.mobile #windows #win-guild .guild-tab-body { grid-column: 2 !important; grid-row: 2 !important; min-height: 0; height: 100% !important; max-height: none !important; overflow-y: auto !important; padding: 8px 10px 12px !important; margin: 0 !important; box-sizing: border-box; }
html body.mobile #windows #win-guild .g-hint { display: none !important; }
html body.mobile #windows #win-guild .guild-motd { padding: 6px 8px !important; margin: 0 0 8px !important; min-height: 0 !important; font-size: var(--pk-fs) !important; }
html body.mobile #windows #win-guild .fr-section { margin: 0 0 8px !important; }
html body.mobile #windows #win-guild .fr-row { min-height: 0 !important; padding: 6px 8px !important; }

/* ---------------------------------------------------------------- Bank: slim head · tabs · silver as one compact transfer card */
html body.mobile #windows #win-bank > .win-body { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 6px 8px !important; overflow-y: auto !important; }
html body.mobile #windows #win-bank .bank-head { flex: none; min-height: 0 !important; height: 40px; padding: 0 8px !important; margin: 0 !important; gap: 8px !important; display: flex !important; align-items: center; }
html body.mobile #windows #win-bank .bh-vault { width: 26px !important; height: 26px !important; flex: none; }
html body.mobile #windows #win-bank .bh-txt { min-width: 0; flex: 1; }
html body.mobile #windows #win-bank .bh-t1 { font-size: var(--pk-fs-md) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.mobile #windows #win-bank .bh-t2 { display: none !important; }
html body.mobile #windows #win-bank .bh-total { font-size: var(--pk-fs-md) !important; flex: none; }
html body.mobile #windows #win-bank .bank-tabs { flex: none; margin: 0 !important; gap: 4px !important; flex-wrap: nowrap !important; }
html body.mobile #windows #win-bank .bank-tab { height: 40px !important; min-height: 40px !important; font-size: var(--pk-fs-xs) !important; }
html body.mobile #windows #win-bank .bank-silver-panel { flex: none; margin: 0 !important; padding: 8px !important; display: grid !important; gap: 8px !important; }
html body.mobile #windows #win-bank .bsp-cols { display: grid !important; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 4px !important; padding: 0 !important; margin: 0 !important; }
html body.mobile #windows #win-bank .bsp-col { height: auto !important; min-height: 0 !important; padding: 6px 4px !important; margin: 0 !important; display: grid !important; justify-items: center; gap: 2px; }
html body.mobile #windows #win-bank .bsp-k { font-size: var(--pk-fs-xs) !important; position: static !important; }
html body.mobile #windows #win-bank .bsp-v { font-size: var(--pk-fs-lg) !important; position: static !important; }
html body.mobile #windows #win-bank .bsp-arrow { position: static !important; transform: none !important; width: 28px !important; height: 28px !important; inset: auto !important; display: grid !important; place-items: center; writing-mode: horizontal-tb !important; }
html body.mobile #windows #win-bank .bsp-amt { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) 96px; gap: 4px !important; margin: 0 !important; }
html body.mobile #windows #win-bank .bsp-quick { min-width: 0 !important; height: 40px !important; padding: 0 2px !important; font-size: var(--pk-fs-xs) !important; }
html body.mobile #windows #win-bank .bsp-field { height: 40px !important; min-height: 40px !important; width: 100% !important; }
html body.mobile #windows #win-bank .bsp-btns { gap: 6px !important; margin: 0 !important; }
html body.mobile #windows #win-bank .bsp-btn { min-height: 42px !important; }
html body.mobile #windows > .win { padding: 0 !important; margin: 0 !important; border: 0 !important; border-image: none !important; }
html body.mobile #windows > .win:not([style*="display: none"]) + .win { border-left: 2px solid var(--pk-line2) !important; } /* the NPC chat hides itself under its function panel */

/* ---------------------------------------------------------------- Social: rail Mail | Friends (social-switch) │ mailbox = folder chips + list │ reading pane */
html body.mobile #windows .social-win > .win-body > .social-content { padding: 0 !important; overflow: hidden !important; }
html body.mobile #windows .friends-win > .win-body > .social-content { padding: 8px 10px !important; overflow-y: auto !important; }
html body.mobile #windows .mail-win .social-content {
  display: grid !important; height: 100% !important; max-height: none !important; margin: 0 !important;
  grid-template-columns: minmax(220px, 38%) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "tabs read" "pag read" "list read";
}
html body.mobile #windows .mail-win .mail-tabs { grid-area: tabs; display: flex !important; flex-direction: row !important; gap: 4px !important; padding: 6px 8px !important; margin: 0 !important; height: auto !important; border-right: 1px solid var(--pk-line); }
html body.mobile #windows .mail-win .mail-tab { flex: 1 1 0 !important; min-width: 0; height: 40px !important; min-height: 40px !important; padding: 0 4px !important; display: flex !important; align-items: center; justify-content: center; gap: 4px; font: 700 var(--pk-fs-xs)/1 'Outfit', sans-serif !important; letter-spacing: .02em !important; white-space: nowrap; overflow: hidden; }
html body.mobile #windows .mail-win .mail-tab .pk-ic { display: inline !important; font-size: 13px !important; width: auto !important; height: auto !important; }
html body.mobile #windows .mail-win .mail-pagination { grid-area: pag; height: 40px !important; min-height: 0 !important; margin: 0 !important; padding: 0 8px !important; gap: 8px !important; border-right: 1px solid var(--pk-line); box-sizing: border-box; }
html body.mobile #windows .mail-win .mail-pagination:has(> .rpg-btn:disabled ~ .rpg-btn:disabled) { display: none !important; }
html body.mobile #windows .mail-win .mail-panes { display: contents !important; }
html body.mobile #windows .mail-win .mail-list { grid-area: list; min-height: 0; height: auto !important; max-height: none !important; overflow-y: auto !important; margin: 0 !important; border: 0 !important; border-right: 1px solid var(--pk-line) !important; border-top: 1px solid var(--pk-line) !important; }
html body.mobile #windows .mail-win .mail-read { grid-area: read; min-height: 0; height: auto !important; max-height: none !important; overflow-y: auto !important; margin: 0 !important; padding: 10px 12px 64px !important; border: 0 !important; box-sizing: border-box; }
html body.mobile #windows .mail-win .mail-row { min-height: 48px !important; padding: 6px 10px !important; }
html body.mobile #windows .mail-win .mail-empty { min-height: 0 !important; padding: 24px 8px !important; font-size: var(--pk-fs) !important; }
html body.mobile #windows .mail-win .mail-quill { position: absolute !important; right: calc(12px + var(--mobile-safe-right, 0px)) !important; bottom: calc(12px + var(--mobile-safe-bottom, 0px)) !important; width: 48px !important; height: 48px !important; z-index: 3; }

/* ---------------------------------------------------------------- Lists (friends, clan members…) */
html body.mobile #windows .fr-head { min-height: 0 !important; height: 26px; margin: 4px 0 2px !important; padding: 0 !important; font: 700 var(--pk-fs-xs)/26px 'Outfit', sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--pk-gold2) !important; }
html body.mobile #windows .fr-row { min-height: 44px !important; padding: 4px 6px 4px 10px !important; gap: 8px !important; box-sizing: border-box; }
html body.mobile #windows .fr-row .rpg-btn.sm { min-width: 40px !important; min-height: 40px !important; }
html body.mobile #windows .fr-add { gap: 6px !important; margin: 0 0 4px !important; }
html body.mobile #windows .fr-add .rpg-btn { min-height: 40px !important; }

/* ---------------------------------------------------------------- Season pass: progress + quests left │ horizontal tier track (free above, premium below) */
html body.mobile #windows #win-rewards.bp-win > .win-body { padding: 0 !important; overflow: hidden !important; }
html body.mobile #windows #win-rewards.bp-win .rewards-content {
  display: grid !important; height: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important;
  grid-template-columns: 260px minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; grid-template-areas: none !important; gap: 0 !important;
}
html body.mobile #windows #win-rewards.bp-win .rewards-content > .muted { display: none !important; }
html body.mobile #windows #win-rewards.bp-win .bp-head { grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; padding: 8px !important; display: grid !important; gap: 6px !important; width: auto !important; border: 0 !important; border-right: 1px solid var(--pk-line) !important; border-bottom: 1px solid var(--pk-line) !important; border-radius: 0 !important; }
html body.mobile #windows #win-rewards.bp-win .bp-head > .muted, html body.mobile #windows #win-rewards .bp-head .bp-prem-on { display: none !important; }
html body.mobile #windows #win-rewards.bp-win .bp-head-row { margin: 0 !important; }
html body.mobile #windows #win-rewards.bp-win .bp-sum-toggle, html body.mobile #windows #win-rewards.bp-win .bp-claim-all { min-height: 40px !important; height: 40px; margin: 0 !important; font-size: var(--pk-fs-xs) !important; }
html body.mobile #windows #win-rewards.bp-win .bp-quests { grid-column: 1 !important; grid-row: 2 !important; min-height: 0; overflow-y: auto !important; margin: 0 !important; padding: 0 8px 8px !important; border-right: 1px solid var(--pk-line); }
html body.mobile #windows #win-rewards.bp-win .bp-section-h { min-height: 0 !important; height: 30px; margin: 0 !important; padding: 0 !important; font: 700 var(--pk-fs-xs)/30px 'Outfit', sans-serif !important; letter-spacing: .14em !important; }
html body.mobile #windows #win-rewards.bp-win .bp-quest { min-height: 0 !important; padding: 6px 8px !important; margin: 0 0 4px !important; font-size: var(--pk-fs) !important; }

html body.mobile #windows #win-rewards.bp-win .bp-track {
  grid-column: 2 !important; grid-row: 1 / span 2 !important; min-height: 0; height: 100% !important; max-height: none !important; margin: 0 !important; padding: 8px !important; box-sizing: border-box;
  display: flex !important; flex-direction: row !important; align-items: stretch; gap: 6px !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain; touch-action: pan-x; scroll-snap-type: x proximity;
}
html body.mobile #windows #win-rewards.bp-win .bp-track > .bp-section-h { display: none !important; }
html body.mobile #windows #win-rewards.bp-win .bp-collapse { flex: 0 0 44px; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 8px 0 !important; writing-mode: vertical-rl; display: flex !important; align-items: center; justify-content: center; gap: 6px; font-size: var(--pk-fs-xs) !important; }
html body.mobile #windows #win-rewards.bp-win .bp-row {
  flex: 0 0 118px; scroll-snap-align: start; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: 26px minmax(0, 1fr) minmax(0, 1fr) !important; gap: 4px !important;
  height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
}
html body.mobile #windows #win-rewards.bp-win .bp-tnum { width: auto !important; height: 26px !important; min-height: 0 !important; display: grid !important; place-items: center; font-size: var(--pk-fs-md) !important; margin: 0 !important; }
html body.mobile #windows #win-rewards.bp-win .bp-cell {
  position: relative; min-width: 0; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 6px 5px !important; box-sizing: border-box;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; text-align: center;
}
html body.mobile #windows #win-rewards.bp-win .bp-cell > .reward-ui-icon { position: absolute; top: 3px; left: 3px; width: 14px !important; height: 14px !important; }
html body.mobile #windows #win-rewards.bp-win .bp-chip { display: flex !important; flex-direction: column !important; align-items: center; gap: 3px !important; padding: 0 !important; background: none !important; border: 0 !important; font-size: var(--pk-fs-xs) !important; line-height: 1.2 !important; white-space: normal !important; max-width: 100%; }
html body.mobile #windows #win-rewards.bp-win .bp-chip > .reward-ui-icon { width: 28px !important; height: 28px !important; }
html body.mobile #windows #win-rewards.bp-win .bp-ck { position: absolute; top: 3px; right: 3px; }
html body.mobile #windows #win-rewards.bp-win .bp-ck .reward-ui-icon { width: 16px !important; height: 16px !important; }
html body.mobile #windows #win-rewards.bp-win .bp-claim { width: 100%; min-height: 30px !important; height: 30px; padding: 0 4px !important; font-size: var(--pk-fs-xs) !important; white-space: nowrap; margin: 0 !important; }

/* ---------------------------------------------------------------- Premium shop: category rail │ product grid │ product detail (Buy pinned) */
html body.mobile #windows #win-premium > .win-body {
  display: grid !important; grid-template-columns: var(--pk-rail) minmax(0, 1fr) var(--pk-side); grid-template-rows: 36px minmax(0, 1fr);
  height: 100% !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important;
}
html body.mobile #windows #win-premium .premium-balance { grid-column: 2 / -1; grid-row: 1; height: 36px !important; min-height: 0 !important; margin: 0 !important; padding: 0 10px !important; display: flex !important; justify-content: flex-end; align-items: center; gap: 8px; border-bottom: 1px solid var(--pk-line) !important; box-sizing: border-box; position: static !important; width: auto !important; inset: auto !important; }
html body.mobile #windows #win-premium .premium-balance > span { font-size: var(--pk-fs-sm) !important; padding: 0 8px !important; height: 26px; display: flex !important; align-items: center; gap: 4px; }
html body.mobile #windows #win-premium .premium-layout { display: contents !important; }
html body.mobile #windows #win-premium .premium-nav {
  grid-column: 1; grid-row: 1 / span 2; display: flex !important; flex-direction: column !important; gap: 4px !important; height: 100% !important; width: auto !important; margin: 0 !important; padding: 6px !important;
  box-sizing: border-box; overflow-y: auto; border: 0 !important; border-right: 1px solid var(--pk-line) !important; background: rgba(0,0,0,.22) !important;
}
html body.mobile #windows #win-premium .premium-nav-btn {
  flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 50px !important; margin: 0 !important; padding: 4px 2px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important;
  font: 700 var(--pk-fs-xs)/1.1 'Outfit', sans-serif !important; letter-spacing: 0 !important; text-align: center; white-space: normal !important;
}
html body.mobile #windows #win-premium .premium-catalog { grid-column: 2; grid-row: 2; min-height: 0; height: 100% !important; max-height: none !important; overflow-y: auto !important; padding: 8px !important; margin: 0 !important; box-sizing: border-box; }
html body.mobile #windows #win-premium .premium-hero, html body.mobile #windows #win-premium .premium-note { display: none !important; }
html body.mobile #windows #win-premium .pshop-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; gap: 6px !important; height: auto !important; }
html body.mobile #windows #win-premium .premium-detail { grid-column: 3; grid-row: 2; min-height: 0; height: 100% !important; max-height: none !important; overflow-y: auto !important; margin: 0 !important; padding: 8px 10px 0 !important; box-sizing: border-box; display: flex !important; flex-direction: column; align-items: stretch; gap: 6px !important; border: 0 !important; border-left: 1px solid var(--pk-line) !important; }
html body.mobile #windows #win-premium .pd-showroom { width: 84px !important; height: 84px !important; margin: 0 auto !important; flex: none; }
html body.mobile #windows #win-premium .pd-name { font-size: var(--pk-fs-lg) !important; text-align: center; }
html body.mobile #windows #win-premium .pd-desc { font-size: var(--pk-fs) !important; }
html body.mobile #windows #win-premium .pd-buy { position: sticky; bottom: 0; margin-top: auto !important; min-height: 44px !important; box-shadow: 0 -8px 10px var(--pk-ink) !important; }
/* rail labels never break inside a word */
html body.mobile #windows :is(.premium-nav-btn, .guild-tab, .sk-filter, .mail-tab, .ck-tab, .character-nav > .inv-tab, .win-body > .inv-tabs:first-child > *) { overflow-wrap: normal !important; word-break: normal !important; }

/* ---------------------------------------------------------------- Game menu (pause): hero + continue + quick settings left │ tile grid right */
html body.mobile #windows #win-menu > .win-body.camp-menu {
  display: grid !important; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr);
  column-gap: 10px; row-gap: 8px; height: 100% !important; padding: 8px calc(8px + var(--mobile-safe-right, 0px)) 8px calc(8px + var(--mobile-safe-left, 0px)) !important; overflow: hidden !important; box-sizing: border-box;
}
html body.mobile #windows #win-menu .camp-hero { grid-column: 1; grid-row: 1; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 8px !important; display: grid !important; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; position: relative; }
html body.mobile #windows #win-menu .camp-portrait { position: static !important; width: 52px !important; height: 52px !important; margin: 0 !important; transform: none !important; }
html body.mobile #windows #win-menu .camp-portrait img { width: 48px !important; height: 48px !important; }
html body.mobile #windows #win-menu .camp-info { position: static !important; min-width: 0; width: auto !important; display: grid; gap: 3px; }
html body.mobile #windows #win-menu .camp-name { font-size: var(--pk-fs-lg) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.mobile #windows #win-menu .camp-sub { display: flex; flex-wrap: wrap; gap: 3px; }
html body.mobile #windows #win-menu .camp-pill { font-size: 10px !important; }
html body.mobile #windows #win-menu .camp-where { font-size: var(--pk-fs-xs) !important; display: flex; flex-wrap: wrap; gap: 2px 6px; }
html body.mobile #windows #win-menu .camp-continue { grid-column: 1; grid-row: 2; min-height: 46px !important; height: 46px; margin: 0 !important; font-size: var(--pk-fs-md) !important; }
html body.mobile #windows #win-menu .camp-continue kbd { display: none !important; }
html body.mobile #windows #win-menu .camp-quick { grid-column: 1; grid-row: 3; margin: 0 !important; padding: 6px !important; display: grid !important; gap: 6px !important; }
html body.mobile #windows #win-menu .camp-langs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px !important; }
html body.mobile #windows #win-menu .camp-q-lbl { display: none !important; }
html body.mobile #windows #win-menu .camp-chip { height: 40px !important; min-height: 40px !important; padding: 0 2px !important; min-width: 0 !important; white-space: nowrap; overflow: hidden; font-size: var(--pk-fs-xs) !important; flex: 1 1 auto; }
html body.mobile #windows #win-menu .camp-sound { display: flex !important; align-items: center; gap: 6px; width: auto !important; }
html body.mobile #windows #win-menu .camp-sound .camp-chip { flex: 0 0 36px; }
html body.mobile #windows #win-menu .camp-vol { flex: 1 1 auto; width: auto !important; height: 28px; }
html body.mobile #windows #win-menu .camp-session { grid-column: 1; grid-row: 4; align-self: end; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap; gap: 4px !important; }
html body.mobile #windows #win-menu .camp-sbtn { flex: 1 1 auto; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 8px !important; font-size: var(--pk-fs-xs) !important; justify-content: center; }
html body.mobile #windows #win-menu .camp-tiles { grid-column: 2; grid-row: 1 / span 4; min-height: 0; overflow-y: auto; margin: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; grid-auto-rows: 64px; gap: 6px !important; align-content: start; }
html body.mobile #windows #win-menu .camp-tile { height: 64px !important; min-height: 0 !important; margin: 0 !important; padding: 0 10px !important; gap: 10px !important; }
html body.mobile #windows #win-menu .camp-tile b { font-size: var(--pk-fs-md) !important; }
html body.mobile #windows #win-menu .camp-tile small { font-size: var(--pk-fs-xs) !important; }

/* ---------------------------------------------------------------- Settings: category rail │ page (always split, no intermediate list) */
html body.mobile #windows .graphics-remake > .win-body { padding: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column; }
html body.mobile #windows .graphics-remake .settings-shell { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; display: grid !important; grid-template-columns: var(--pk-rail) minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; margin: 0 !important; padding: 0 !important; }
html body.mobile #windows .graphics-remake .settings-nav { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 6px !important; overflow-y: auto !important; border-right: 1px solid var(--pk-line) !important; border-bottom: 0 !important; }
html body.mobile #windows .graphics-remake .settings-tab {
  flex: 0 0 auto; height: auto !important; min-height: 50px !important; margin: 0 !important; padding: 4px 2px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; text-align: center;
}
html body.mobile #windows .graphics-remake .settings-tab small, html body.mobile #windows .graphics-remake .settings-tab-chevron { display: none !important; }
html body.mobile #windows .graphics-remake .settings-tab b { font: 700 var(--pk-fs-xs)/1.1 'Outfit', sans-serif !important; letter-spacing: 0 !important; }
html body.mobile #windows .graphics-remake .settings-tab-icon { font-size: 16px !important; width: auto !important; height: auto !important; margin: 0 !important; }
html body.mobile #windows .graphics-remake .settings-pages { display: block !important; min-height: 0; overflow-y: auto !important; padding: 8px 10px 16px !important; }
html body.mobile #windows .graphics-remake .settings-page:not(.active) { display: none !important; }
html body.mobile #windows .graphics-remake .settings-page.active { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; align-items: start; }
html body.mobile #windows .graphics-remake .settings-page-head { grid-column: 1 / -1; margin: 0 !important; padding: 0 0 4px !important; min-height: 0 !important; }
html body.mobile #windows .graphics-remake .settings-page-head > span { display: none !important; }
html body.mobile #windows .graphics-remake .settings-page-head h3 { display: none !important; }
html body.mobile #windows .graphics-remake .settings-page-head p { margin: 0 !important; font-size: var(--pk-fs-sm) !important; }
html body.mobile #windows .graphics-remake .graphics-section { margin: 0 !important; padding: 6px 8px !important; }
html body.mobile #windows .graphics-remake .graphics-section-title { font: 700 var(--pk-fs-xs)/1.2 'Outfit', sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--pk-gold2) !important; margin: 0 0 4px !important; padding: 0 !important; min-height: 0 !important; }
html body.mobile #windows .graphics-remake .graphics-section label { min-height: 44px !important; height: auto !important; padding: 4px 8px !important; margin: 0 0 4px !important; font-size: var(--pk-fs) !important; box-sizing: border-box; }
html body.mobile #windows .graphics-remake .gs-footer { display: none !important; }

/* ---------------------------------------------------------------- Atlas: the map is the screen; controls float over it */
html body.mobile .fullmap-overlay { padding: 0 !important; }
html body.mobile .fullmap-overlay .fullmap-box { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-image: none !important; border-radius: 0 !important; box-sizing: border-box; }
html body.mobile .fullmap-overlay .atlas-map-viewport { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; }
html body.mobile .fullmap-overlay .fullmap-head { position: absolute !important; top: 8px; left: calc(8px + var(--mobile-safe-left, 0px)); right: calc(8px + var(--mobile-safe-right, 0px)); height: 40px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; z-index: 3; pointer-events: none; display: flex !important; align-items: center; background: none !important; border: 0 !important; }
html body.mobile .fullmap-overlay .fullmap-head > * { pointer-events: auto; }
html body.mobile .fullmap-overlay .fullmap-head > span:first-child { padding: 0 12px; height: 34px; display: flex; align-items: center; background: rgba(11,16,19,.85); border: 1px solid var(--pk-line2); font: 700 var(--pk-fs-md)/1 'Cinzel', serif; color: var(--pk-gold); letter-spacing: .08em; text-transform: uppercase; }
html body.mobile .fullmap-overlay .fullmap-head .x { margin-left: auto !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; position: static !important; display: grid !important; place-items: center; background: rgba(11,16,19,.85) !important; border: 1px solid var(--pk-line2) !important; }
html body.mobile .fullmap-overlay .atlas-tabs { position: absolute !important; top: 11px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex !important; gap: 0 !important; width: auto !important; height: 34px !important; margin: 0 !important; }
html body.mobile .fullmap-overlay .atlas-tabs .rpg-btn { width: auto !important; height: 40px !important; min-height: 40px !important; padding: 0 14px !important; font-size: var(--pk-fs-xs) !important; white-space: nowrap; }
html body.mobile .fullmap-overlay .atlas-zoom-controls { position: absolute !important; right: calc(8px + var(--mobile-safe-right, 0px)); top: 56px; z-index: 3; display: flex !important; flex-direction: column !important; gap: 4px !important; width: 40px !important; height: auto !important; margin: 0 !important; }
html body.mobile .fullmap-overlay .atlas-zoom-controls .rpg-btn { width: 40px !important; height: 40px !important; min-height: 40px !important; min-width: 0 !important; padding: 0 !important; }
html body.mobile .fullmap-overlay .atlas-zoom-controls > span { text-align: center; font-size: var(--pk-fs-xs) !important; background: rgba(11,16,19,.85); padding: 2px 0; }
html body.mobile .fullmap-overlay .atlas-info-toggle { position: absolute !important; right: calc(8px + var(--mobile-safe-right, 0px)) !important; bottom: calc(8px + var(--mobile-safe-bottom, 0px)) !important; width: auto !important; height: 38px !important; min-height: 38px !important; padding: 0 12px !important; z-index: 3 !important; font-size: var(--pk-fs-xs) !important; }
/* world atlas mode: globe left, regions as chips under it, region details right */
html body.mobile .fullmap-overlay .world-map-open .atlas-zoom-controls { display: none !important; }
html body.mobile .fullmap-overlay .world-atlas {
  position: absolute !important; inset: 56px 0 0 0 !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 0 0 var(--mobile-safe-left, 0px) !important; overflow: hidden !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr) var(--pk-side); grid-template-rows: minmax(0, 1fr) auto auto; gap: 0 !important;
}
html body.mobile .fullmap-overlay .world-atlas .atlas-layout { display: contents !important; }
html body.mobile .fullmap-overlay .world-atlas .atlas-chart { grid-column: 1; grid-row: 1; min-height: 0; width: auto !important; height: auto !important; display: grid !important; place-items: center; overflow: hidden; }
html body.mobile .fullmap-overlay .world-atlas .atlas-chart > * { max-width: 100%; max-height: 100%; }
html body.mobile .fullmap-overlay .world-atlas .atlas-details { grid-column: 2; grid-row: 1 / span 3; min-height: 0; height: auto !important; max-height: none !important; overflow-y: auto !important; padding: 0 calc(8px + var(--mobile-safe-right, 0px)) 12px 8px !important; border-left: 1px solid var(--pk-line); box-sizing: border-box; }
html body.mobile .fullmap-overlay .world-atlas .atlas-globe-regions { grid-column: 1; grid-row: 2; display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; overflow-x: auto; padding: 6px 8px !important; margin: 0 !important; }
html body.mobile .fullmap-overlay .world-atlas .atlas-globe-regions .rpg-btn { flex: 0 0 auto !important; width: auto !important; height: 40px !important; min-height: 40px !important; padding: 0 12px !important; font-size: var(--pk-fs-xs) !important; white-space: nowrap; }
html body.mobile .fullmap-overlay .world-atlas .atlas-home { grid-column: 1; grid-row: 3; margin: 0 !important; padding: 0 8px 8px !important; font-size: var(--pk-fs-sm) !important; }
html body.mobile .fullmap-overlay .world-atlas > small { display: none !important; }

/* ---------------------------------------------------------------- Sheets & modals: same app bar language as windows */
html body.mobile #mob-sheet .mob-sheet-head { min-height: 0 !important; height: var(--pk-bar) !important; padding: 0 0 0 12px !important; gap: 10px !important; box-sizing: border-box; }
html body.mobile #mob-sheet .mob-sheet-head::after, html body.mobile #mob-sheet .mob-sheet-head::before { display: none !important; }
html body.mobile #mob-sheet .mob-sheet-head .ic { width: 28px !important; height: 28px !important; }
html body.mobile #mob-sheet .mob-sheet-head .nm { font: 700 var(--pk-fs-md)/1.1 'Cinzel', serif !important; letter-spacing: .06em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal !important; }
html body.mobile #mob-sheet .mob-sheet-head .x { width: var(--pk-bar) !important; height: var(--pk-bar) !important; min-height: var(--pk-bar) !important; display: grid !important; place-items: center; border-left: 1px solid var(--pk-line); }
html body.mobile #mob-sheet .mob-sheet-body { font-size: var(--pk-fs-md) !important; line-height: 1.5 !important; padding: 10px 12px !important; }
html body.mobile #mob-sheet .mob-sheet-acts { padding: 8px !important; gap: 6px !important; }
html body.mobile #mob-sheet .mob-act { min-height: 44px !important; font-size: var(--pk-fs) !important; }

/* ---------------------------------------------------------------- Trade: two offers side by side, silver + Accept/Decline in one bottom bar */
html body.mobile #windows #win-trade > .win-body { display: grid !important; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px 8px !important; padding: 6px 8px calc(6px + var(--mobile-safe-bottom, 0px)) !important; overflow: hidden !important; }
html body.mobile #windows #win-trade > .win-body > p.muted { grid-column: 1 / -1; margin: 0 !important; font-size: var(--pk-fs-sm) !important; text-align: center; }
html body.mobile #windows #win-trade .trade-cols { grid-column: 1 / -1; min-height: 0; display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; margin: 0 !important; }
html body.mobile #windows #win-trade .trade-col { min-height: 0; padding: 6px !important; margin: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
html body.mobile #windows #win-trade .trade-h { margin: 0 !important; padding: 0 !important; min-height: 0 !important; font-size: var(--pk-fs-xs) !important; letter-spacing: .12em; }
html body.mobile #windows #win-trade .trade-slots-grid { grid-template-columns: repeat(4, 46px) !important; gap: 4px !important; margin: 0 !important; }
html body.mobile #windows #win-trade .trade-grid-slot { width: 46px !important; height: 46px !important; }
html body.mobile #windows #win-trade .trade-yang { font-size: var(--pk-fs) !important; margin: 0 !important; }
html body.mobile #windows #win-trade .trade-yangrow { grid-column: 1; grid-row: 3; margin: 0 !important; display: flex !important; align-items: center; gap: 6px; }
html body.mobile #windows #win-trade .trade-yangrow .qty { width: 110px !important; height: 42px !important; }
html body.mobile #windows #win-trade .trade-actions { display: contents !important; }
html body.mobile #windows #win-trade .trade-actions .rpg-btn { grid-row: 3; min-height: 42px !important; margin: 0 !important; }

/* ---------------------------------------------------------------- Card windows: short decisions stay a centred card, the world stays visible */
html body.mobile #windows > :is(#win-invite, #win-barbut, #win-abyssReady, .wbench-win, #win-guildpeek, #win-mailCompose, #win-loot, #win-socialMenu):only-child {
  flex: 0 1 min(560px, 100%) !important; width: min(560px, 100%) !important; height: auto !important; max-height: 100% !important; align-self: center !important; margin: 0 auto !important;
  border: 1px solid var(--pk-line2) !important; box-shadow: 0 12px 40px rgba(0,0,0,.7) !important;
}
html body.mobile #windows > :is(#win-invite, #win-barbut, #win-abyssReady, .wbench-win, #win-guildpeek, #win-mailCompose, #win-loot, #win-socialMenu) > .win-body { width: auto !important; max-width: none !important; }

/* invite: ring left, who/what right, buttons below */
html body.mobile #windows #win-invite .rpg-invite-content { display: grid !important; grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 6px 4px 0 !important; margin: 0 !important; min-height: 0 !important; }
html body.mobile #windows #win-invite .rpg-invite-bgorn, html body.mobile #windows #win-invite .inv-divider, html body.mobile #windows #win-invite .inv-title { display: none !important; }
html body.mobile #windows #win-invite .rpg-invite-content > :not(.rpg-invite-ring):not(.rpg-invite-buttons) { grid-column: 2; text-align: left !important; margin: 0 !important; }
html body.mobile #windows #win-invite .rpg-invite-ring { grid-column: 1; grid-row: 1 / span 5; margin: 0 !important; }
html body.mobile #windows #win-invite .inv-opp { font-size: 20px !important; justify-content: flex-start !important; }
html body.mobile #windows #win-invite .rpg-invite-buttons { grid-column: 1 / -1; margin: 10px 0 0 !important; gap: 8px !important; }
html body.mobile #windows #win-invite .rpg-invite-buttons .rpg-btn { min-height: 44px !important; }

/* dice */
html body.mobile #windows #win-barbut .bb-arena { margin: 6px 0 !important; }
html body.mobile #windows #win-barbut .bb-roll { min-height: 44px !important; }

/* ---------------------------------------------------------------- Large overlay windows (achievements, inspect, player shop, pets…): same full-screen shell */
html body.mobile .rpg-confirm-overlay:has(> .win:not(.rpg-confirm-box):not(.evolve-result-box)) { padding: 0 !important; }
html body.mobile .rpg-confirm-overlay > .win:not(.rpg-confirm-box):not(.evolve-result-box) {
  width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; margin: 0 !important; border: 0 !important; border-image: none !important; border-radius: 0 !important;
  display: flex !important; flex-direction: column !important; overflow: hidden !important; transform: none !important;
}
html body.mobile .rpg-confirm-overlay > .win:not(.rpg-confirm-box) > .win-title {
  flex: 0 0 var(--pk-bar) !important; height: var(--pk-bar) !important; min-height: var(--pk-bar) !important; padding: 0 0 0 calc(12px + var(--mobile-safe-left, 0px)) !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important; box-sizing: border-box;
  font: 700 var(--pk-fs-md)/1 'Cinzel', serif !important; letter-spacing: .08em !important; color: var(--pk-gold) !important; border-bottom: 1px solid var(--pk-line2) !important;
}
html body.mobile .rpg-confirm-overlay > .win:not(.rpg-confirm-box) > .win-title::before, html body.mobile .rpg-confirm-overlay > .win:not(.rpg-confirm-box) > .win-title::after { display: none !important; }
html body.mobile .rpg-confirm-overlay > .win:not(.rpg-confirm-box) > .win-title > span:first-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.mobile .rpg-confirm-overlay > .win:not(.rpg-confirm-box) > .win-title .x { position: static !important; transform: none !important; margin: 0 0 0 auto !important; flex: 0 0 var(--pk-bar) !important; width: var(--pk-bar) !important; height: var(--pk-bar) !important; min-height: var(--pk-bar) !important; display: grid !important; place-items: center !important; border: 0 !important; border-left: 1px solid var(--pk-line) !important; background: transparent !important; font-size: 18px !important; color: var(--pk-gold) !important; }
html body.mobile .rpg-confirm-overlay > .win:not(.rpg-confirm-box) > .win-body { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 8px calc(10px + var(--mobile-safe-right, 0px)) 12px calc(10px + var(--mobile-safe-left, 0px)) !important; }

/* achievements */
html body.mobile .achievement-win .achievement-header { min-height: 0 !important; padding: 0 0 6px !important; margin: 0 !important; display: flex !important; align-items: center; gap: 10px; }
html body.mobile .achievement-win .achievement-header > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
html body.mobile .achievement-win .achievement-header h3 { margin: 0 !important; font-size: var(--pk-fs-lg) !important; }
html body.mobile .achievement-win .achievement-header small, html body.mobile .achievement-win .achievement-header p { margin: 0 !important; font-size: var(--pk-fs-sm) !important; }
html body.mobile .achievement-win .achievement-header strong { margin-left: auto; font-size: 20px !important; display: flex; align-items: baseline; gap: 2px; }
html body.mobile .achievement-win .achievement-header strong span { font-size: var(--pk-fs-sm) !important; }
html body.mobile .achievement-win .achievement-meter { margin: 0 0 6px !important; }
html body.mobile .achievement-win :is(.achievement-filters, .achievement-categories) { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; overflow-x: auto; margin: 0 0 6px !important; }
html body.mobile .achievement-win :is(.achievement-filters, .achievement-categories) .rpg-btn { flex: 0 0 auto !important; height: 40px !important; min-height: 40px !important; padding: 0 12px !important; font-size: var(--pk-fs-xs) !important; white-space: nowrap; }
html body.mobile .achievement-win .achievement-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 6px !important; }
html body.mobile .achievement-win .achievement-card { min-height: 0 !important; height: 52px !important; padding: 0 8px !important; gap: 8px !important; }
html body.mobile .achievement-win .achievement-card img { width: 32px !important; height: 32px !important; }
html body.mobile .achievement-win .achievement-card span { font-size: var(--pk-fs) !important; line-height: 1.15 !important; }

/* ---------------------------------------------------------------- Player stall (shop-win overlay): tabs rail │ owner + sort strip │ goods grid */
html body.mobile .shop-win > .win-body {
  display: grid !important; grid-template-columns: var(--pk-rail) minmax(0, 1fr) minmax(160px, 34%); grid-template-rows: 40px auto minmax(0, 1fr);
  padding: 0 !important; gap: 0 !important; overflow: hidden !important;
}
html body.mobile .shop-win .shop-tabs { grid-column: 1; grid-row: 1 / span 3; display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 6px !important; margin: 0 !important; height: 100% !important; box-sizing: border-box; border-right: 1px solid var(--pk-line) !important; }
html body.mobile .shop-win .shop-tabs .inv-tab { flex: 0 0 auto !important; width: 100% !important; min-height: 44px !important; height: auto !important; padding: 4px 2px !important; font: 700 var(--pk-fs-xs)/1.1 'Outfit', sans-serif !important; letter-spacing: 0 !important; }
html body.mobile .shop-win .shop-sub { grid-column: 2; grid-row: 1; align-self: center; margin: 0 !important; padding: 0 10px !important; font-size: var(--pk-fs-sm) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.mobile .shop-win .shop-sort { grid-column: 3; grid-row: 1; margin: 0 !important; padding: 0 8px 0 0 !important; display: flex !important; align-items: center; gap: 6px; }
html body.mobile .shop-win .shop-sort > span { display: none !important; }
html body.mobile .shop-win .shop-sort select { height: 40px !important; min-height: 40px !important; width: 100% !important; font-size: 16px !important; }
html body.mobile .shop-win .shop-mob-tip { grid-column: 2 / -1; grid-row: 2; margin: 0 8px 6px 10px !important; padding: 4px 8px !important; font-size: var(--pk-fs-xs) !important; }
html body.mobile .shop-win .shop-grid { grid-column: 2 / -1; grid-row: 3; min-height: 0; overflow-y: auto !important; margin: 0 !important; padding: 0 calc(8px + var(--mobile-safe-right, 0px)) 10px 10px !important; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important; gap: 6px !important; align-content: start; }
html body.mobile .shop-win .shop-grid > :not(.shop-slot) { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- Wiki: labelled rail │ article in two columns (demo stays in view | steps) */
html body.mobile #windows #win-wiki > .win-body { padding: 0 !important; overflow: hidden !important; }
html body.mobile #windows #win-wiki .wiki-layout { display: grid !important; grid-template-columns: var(--pk-rail) minmax(0, 1fr) !important; height: 100% !important; gap: 0 !important; margin: 0 !important; }
html body.mobile #windows #win-wiki .wiki-nav { display: flex !important; flex-direction: column !important; gap: 4px !important; width: auto !important; height: 100% !important; padding: 6px !important; box-sizing: border-box; overflow-y: auto !important; border-right: 1px solid var(--pk-line); background: rgba(0,0,0,.22); }
html body.mobile #windows #win-wiki .wiki-tab {
  flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 48px !important; margin: 0 !important; padding: 4px 2px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; text-align: center !important;
  font: 700 var(--pk-fs-xs)/1.1 'Outfit', sans-serif !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important;
}
html body.mobile #windows #win-wiki .wiki-tab span:not(.wiki-tab-ic) { display: block !important; }
html body.mobile #windows #win-wiki .wiki-tab-ic { width: auto !important; font-size: 16px !important; }
html body.mobile #windows #win-wiki .wiki-content {
  height: 100% !important; max-height: none !important; overflow-y: auto !important; padding: 8px calc(10px + var(--mobile-safe-right, 0px)) 16px 10px !important; box-sizing: border-box;
  display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-content: start; align-items: start;
}
html body.mobile #windows #win-wiki .wiki-content > * { grid-column: 1 / -1; margin: 0 !important; min-width: 0; }
html body.mobile #windows #win-wiki .wiki-h { grid-row: 1; font-size: var(--pk-fs-lg) !important; padding: 0 !important; min-height: 0 !important; }
html body.mobile #windows #win-wiki .wiki-content:has(> .wiki-media-host) > .wiki-media-host { grid-column: 1; grid-row: 2 / span 6; position: sticky; top: 0; zoom: 1 !important; max-height: none !important; }
html body.mobile #windows #win-wiki .wiki-content:has(> .wiki-media-host) > :not(.wiki-h):not(.wiki-media-host) { grid-column: 2; }
html body.mobile #windows #win-wiki .wiki-guide-steps { padding-left: 0 !important; }
html body.mobile #windows #win-wiki .wiki-guide-steps li { min-height: 0 !important; padding: 6px 8px !important; margin: 0 0 6px !important; font-size: var(--pk-fs) !important; }
html body.mobile #windows #win-wiki .wiki-guide-note { padding: 6px 8px !important; font-size: var(--pk-fs) !important; }

/* ---------------------------------------------------------------- Leaderboard: categories rail (lives on .win) │ ranking list */
html body.mobile #windows > .leaderboard-win { display: grid !important; grid-template-columns: var(--pk-rail) minmax(0, 1fr); grid-template-rows: var(--pk-bar) minmax(0, 1fr); }
html body.mobile #windows > .leaderboard-win > .win-title { grid-column: 1 / -1; grid-row: 1; }
html body.mobile #windows > .leaderboard-win > .leaderboard-tabs {
  grid-column: 1; grid-row: 2; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 4px !important; width: auto !important; height: auto !important; min-height: 0;
  margin: 0 !important; padding: 6px !important; box-sizing: border-box; overflow-y: auto !important; border: 0 !important; border-right: 1px solid var(--pk-line) !important; background: rgba(0,0,0,.22) !important;
}
html body.mobile #windows > .leaderboard-win .lb-tab {
  flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 48px !important; margin: 0 !important; padding: 4px 2px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important;
  font: 700 var(--pk-fs-xs)/1.1 'Outfit', sans-serif !important; letter-spacing: 0 !important; text-align: center !important; white-space: normal !important; overflow-wrap: normal !important;
}
html body.mobile #windows > .leaderboard-win .lb-tab .ct-lb { display: block !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; max-width: 100%; }
html body.mobile #windows > .leaderboard-win > .win-body { grid-column: 2; grid-row: 2; min-height: 0; }
html body.mobile #windows > .leaderboard-win .lb-heading { min-height: 0 !important; padding: 0 0 6px !important; margin: 0 !important; }
html body.mobile #windows > .leaderboard-win .lb-row { min-height: 0 !important; height: 56px; padding: 0 8px !important; margin: 0 0 4px !important; }
html body.mobile #windows > .leaderboard-win .lb-rank-art { transform: scale(.7); transform-origin: center; }

/* ---------------------------------------------------------------- Caravan: one segmented tab row, stats as a 2-up grid, cargo grid below */
html body.mobile #windows #win-caravan .cv-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; margin: 0 0 6px !important; }
html body.mobile #windows #win-caravan .cv-tab { height: 40px !important; min-height: 40px !important; padding: 0 4px !important; font-size: var(--pk-fs-xs) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; }
html body.mobile #windows #win-caravan .cv-tab-panel:not([hidden]) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px 10px; align-content: start; }
html body.mobile #windows #win-caravan .cv-tab-panel > :not(.cv-head) { grid-column: 1 / -1; }
html body.mobile #windows #win-caravan .cv-head { margin: 0 !important; font-size: var(--pk-fs-sm) !important; line-height: 1.3 !important; }
html body.mobile #windows #win-caravan .cv-grid { gap: 6px !important; margin-top: 4px !important; }

/* ---------------------------------------------------------------- Character select (phone): list scrolls, Create + Back share one bottom row clear of the home indicator */
@media (orientation: landscape) and (max-height: 500px) {
  html body.mobile #screen-chars .char-select-list { display: flex !important; flex-direction: column !important; gap: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box; }
  html body.mobile #screen-chars #char-list { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  html body.mobile #screen-chars #chars-msg:empty { display: none; }
  html body.mobile #screen-chars .chars-panel .char-select-list :is(#btn-new-char, #btn-char-back) { flex: 0 0 auto !important; min-height: 42px !important; height: 42px !important; max-height: 42px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 6px !important; font-size: 11px !important; letter-spacing: .02em !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
}
/* rail icon split out of "📖 Label" text by mobile-ui.ts splitRailIcons */
html body.mobile #windows .pk-ic { display: block; font-size: 16px; line-height: 1; letter-spacing: 0; }

/* ---------------------------------------------------------------- Portal card (phone): right-side sheet, details scroll, Enter pinned — never taller than the screen */
html body.mobile #portal-info:not(.hidden) {
  position: fixed !important; left: auto !important; right: var(--mobile-safe-right, 0px) !important; top: var(--mobile-ui-top, 0px) !important; bottom: var(--mobile-safe-bottom, 0px) !important;
  transform: none !important; width: min(340px, 46vw) !important; max-width: none !important; min-width: 0 !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; flex-direction: column !important; border-radius: 0 !important; pointer-events: auto !important; box-sizing: border-box;
}
html body.mobile #portal-info::after { display: none !important; }
html body.mobile #portal-info .pi-hero { flex: 0 0 auto; min-height: 0 !important; height: 64px; padding: 6px 48px 6px 10px !important; display: flex !important; align-items: center; gap: 10px; box-sizing: border-box; }
html body.mobile #portal-info .pi-hero::after, html body.mobile #portal-info .pi-hero::before { display: none !important; }
html body.mobile #portal-info .pi-art { width: 40px !important; height: 48px !important; }
html body.mobile #portal-info .pi-close { position: absolute !important; top: 0 !important; right: 0 !important; width: 44px !important; height: 44px !important; }
html body.mobile #portal-info .pi-content { flex: 1 1 0; min-height: 0; overflow-y: auto !important; padding: 6px 10px !important; scrollbar-width: none; }
html body.mobile #portal-info .pi-actions { flex: 0 0 auto; padding: 6px 10px calc(6px + var(--mobile-safe-bottom, 0px)) !important; margin: 0 !important; }
html body.mobile #portal-info .pi-enter { min-height: 44px !important; width: 100%; }

/* ==========================================================================================
   ROUND 2 — review fixes
   ========================================================================================== */
/* no desktop corner ornaments on phone frames */
html body.mobile #windows > .win::before, html body.mobile #windows > .win::after,
html body.mobile .rpg-confirm-overlay > .win:not(.rpg-confirm-box)::before, html body.mobile .rpg-confirm-overlay > .win:not(.rpg-confirm-box)::after,
html body.mobile #windows #win-guild .guild-banner > :is(.gb-corner, .gb-orn), html body.mobile #windows .inv-ornaments { display: none !important; content: none !important; }

/* safe areas: the notch never covers rails, slots or the close button */
html body.mobile #windows > .win { padding-left: var(--mobile-safe-left, 0px) !important; padding-right: var(--mobile-safe-right, 0px) !important; box-sizing: border-box; }
html body.mobile #windows > .win > .win-title { padding-left: 12px !important; }

/* ---- one rail component: 20px icon over a 10px label (max 2 lines), badge in the top-right corner */
html body.mobile #windows :is(.ck-tab, .guild-tab, .sk-filter, .mail-tab, .premium-nav-btn, .settings-tab, .wiki-tab, .lb-tab, .character-nav > .inv-tab, .shop-tabs > .inv-tab, .win-body > .inv-tabs:first-child > *) {
  position: relative !important; min-height: 50px !important; padding: 5px 3px !important; gap: 3px !important; font-size: var(--pk-fs-xs) !important; line-height: 1.15 !important; text-transform: uppercase;
}
html body.mobile #windows :is(.pk-ic, .ct-ic, .wiki-tab-ic, .settings-tab-icon, .lb-tab .ct-ic) { display: grid !important; place-items: center; width: 22px !important; height: 20px !important; margin: 0 !important; font-size: 17px !important; line-height: 1 !important; border: 0 !important; background: none !important; }
html body.mobile #windows :is(.ct-ic, .lb-tab .ct-ic) :is(svg, img) { width: 20px !important; height: 20px !important; }
html body.mobile #windows .graphics-remake .settings-tab .settings-tab-icon { display: grid !important; }
html body.mobile #windows :is(.ck-badge, .gtb-b, .sk-filter .badge, .inv-tab .badge, .inv-tab .tab-badge, .mail-tab .badge) {
  position: absolute !important; top: 3px !important; right: 3px !important; left: auto !important; margin: 0 !important; min-width: 16px; height: 16px; padding: 0 4px !important; box-sizing: border-box;
  display: grid !important; place-items: center; font: 700 10px/1 'Outfit', sans-serif !important; border-radius: 8px !important;
}

/* ---- touch targets >= 40px */
html body.mobile #windows :is(.inv-filter-btn, .inv-sort, .bsp-quick, .bank-tab, .ct-filter, .sk-util-btn, .ck-tree, .bp-claim, .camp-chip, .cv-tab, .fr-row .rpg-btn.sm, .mail-pagination .rpg-btn, .stat-row button.small, .lb-eye) { min-height: 40px !important; height: 40px !important; }
html body.mobile #windows :is(.stat-row button.small, .lb-eye) { min-width: 40px !important; width: 40px !important; }
html body.mobile #windows .fr-row .rpg-btn.sm { min-width: 40px !important; width: auto !important; padding: 0 10px !important; white-space: nowrap !important; }
html body.mobile #windows #win-inv .inv-filters, html body.mobile #windows #win-inv .inv-tabs, html body.mobile #windows #win-inv .inv-space { height: 40px !important; }
html body.mobile #windows #win-closeall { height: 40px !important; min-height: 40px !important; }
html body.mobile #windows #win-menu .camp-vol { height: 40px !important; }
html body.mobile .fullmap-overlay :is(.atlas-tabs .rpg-btn, .atlas-globe-regions .rpg-btn) { height: 40px !important; min-height: 40px !important; }
html body.mobile #hud-target :is(.x, .tgt-close, button) { min-width: 40px; min-height: 40px; }

/* ---- 10px floor for all text */
html body.mobile #windows #win-char .hb-bars, html body.mobile #windows #win-char .hb-bars * { font-size: 10px !important; }
html body.mobile #windows #win-char .hb-bars > * { height: 14px !important; line-height: 14px !important; }
html body.mobile #windows :is(.cur-chip small, .smith-pick small, .gb-xp .lbl, .ck-sidehead, .ck-qempty, .pc-tag, .inspect-empty, .sb-pts-k, .camp-pill, .bp-chip, .ck-qslot .cq-time) { font-size: 10px !important; }
html body.mobile .rpg-confirm-overlay :is(.inspect-empty, .pc-tag) { font-size: 10px !important; }
html body.mobile .mob-menu-lbl { font-size: 10px !important; }
html body.mobile #windows #win-guild .gb-xp { height: 16px !important; }
html body.mobile #windows #win-guild .gb-xp .lbl { line-height: 14px !important; }

/* ---- Character master–detail tabs: the identity strip steps aside, detail footer never covers text */
html body.mobile #windows #win-char > .win-body:has(.ct-layout) { grid-template-rows: 0 minmax(0, 1fr) !important; }
html body.mobile #windows #win-char > .win-body:has(.ct-layout) .hero-banner { display: none !important; }
html body.mobile #windows #win-char > .win-body:has(.ct-layout) .character-nav { grid-row: 1 / span 2 !important; }
html body.mobile #windows #win-char .ct-detail { padding-bottom: 0 !important; scroll-padding-bottom: 56px; }
html body.mobile #windows #win-char .ct-detail > :not(.ct-activate):last-of-type { margin-bottom: 8px !important; }
html body.mobile #windows #win-char .ct-activate { position: sticky !important; bottom: 0 !important; z-index: 2; margin: auto -10px 0 !important; width: calc(100% + 20px) !important; border-radius: 0 !important; box-shadow: 0 -10px 14px 2px #0b1013 !important; }
html body.mobile #windows #win-char .ct-progress { height: 8px !important; }
html body.mobile #windows #win-char .ct-rewards { gap: 4px !important; }

/* ---- Rewards shortcut popover: centred pair of tiles, never over the player frame */
html body.mobile #rewards-shortcuts { position: fixed !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: min(440px, 90vw) !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; padding: 12px !important; box-shadow: 0 0 0 100vmax rgba(0,0,0,.5), 0 12px 40px rgba(0,0,0,.7) !important; }
html body.mobile #rewards-shortcuts .reward-shortcut { min-height: 96px !important; }

/* ---- Cook cards grow with their text; names 2 lines, buff 1 line */
html body.mobile #windows .cook-win .ck-grid { grid-auto-rows: auto !important; }
html body.mobile #windows .cook-win .ck-card { height: auto !important; min-height: 92px !important; align-content: start; }
html body.mobile #windows .cook-win .ck-cname { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0 !important; height: 28px; }
html body.mobile #windows .cook-win .ck-cbuff { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.mobile #windows .cook-win .ck-card .icimg { width: 40px !important; height: 40px !important; }

/* ---- Trade grid: real gaps, Decline secondary */
html body.mobile #windows #win-trade .trade-slots-grid { grid-auto-rows: 46px !important; gap: 6px !important; height: auto !important; }
html body.mobile #windows #win-trade .btn-cancel { filter: saturate(.35) brightness(.85); }

/* ---- Bonuses: zero values readable, summary pair fills the row */
html body.mobile #windows #win-char .char-tab-content > .stat-row.is-zero { opacity: 1 !important; }
html body.mobile #windows #win-char .char-tab-content > .stat-row.is-zero > b { color: #aab6a7 !important; }
html body.mobile #windows #win-char .char-tab-content > .stat-row.is-zero > span { color: #c8ccbb !important; }
html body.mobile #windows #win-char .char-tab-content:has(> .stat-row) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
html body.mobile #windows #win-char .char-tab-content > .stat-row { grid-column: span 2 !important; }
html body.mobile #windows #win-char .char-tab-content > p + .stat-row, html body.mobile #windows #win-char .char-tab-content > p + .stat-row + .stat-row { grid-column: span 3 !important; }

/* ---------------------------------------------------------------- Forge / anvil (craft list): category rail │ silver strip + compact recipe rows, Forge button on every row */
html body.mobile #windows .npc-fn-win > .win-body:has(> .craft-list) {
  display: grid !important; grid-template-columns: var(--pk-rail) minmax(0, 1fr); grid-template-rows: 34px minmax(0, 1fr); padding: 0 !important; gap: 0 !important; overflow: hidden !important;
}
html body.mobile #windows .npc-fn-win > .win-body:has(> .craft-list) > .fn-banner { display: none !important; }
html body.mobile #windows .craft-bar { grid-column: 2; grid-row: 1; height: 34px !important; min-height: 0 !important; margin: 0 !important; padding: 0 10px !important; display: flex !important; align-items: center; justify-content: flex-end; gap: 8px; border-bottom: 1px solid var(--pk-line) !important; box-sizing: border-box; font-size: var(--pk-fs) !important; }
html body.mobile #windows .craft-tabs { grid-column: 1; grid-row: 1 / span 2; display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 6px !important; margin: 0 !important; border: 0 !important; border-right: 1px solid var(--pk-line) !important; overflow-y: auto; background: rgba(0,0,0,.22); }
html body.mobile #windows .craft-tabs .sv-tab { flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 50px !important; justify-content: center; text-align: center; white-space: normal !important; padding: 4px 3px !important; }
html body.mobile #windows .npc-fn-win > .win-body:not(:has(> .craft-tabs)) > .craft-list { grid-column: 1 / -1; }
html body.mobile #windows .npc-fn-win > .win-body:not(:has(> .craft-tabs)) > .craft-bar { grid-column: 1 / -1; }
html body.mobile #windows .craft-list { grid-column: 2; grid-row: 2; min-height: 0; overflow-y: auto !important; display: flex !important; flex-direction: column; gap: 6px !important; padding: 8px !important; margin: 0 !important; max-height: none !important; }
html body.mobile #windows .craft-row {
  flex: 0 0 auto; width: auto !important; height: auto !important; min-height: 64px !important; margin: 0 !important; padding: 8px 10px !important; box-sizing: border-box;
  display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 132px; align-items: center; gap: 10px !important;
}
html body.mobile #windows .craft-row::before, html body.mobile #windows .craft-row::after { display: none !important; }
html body.mobile #windows .craft-row .cr-ic { width: 44px !important; height: 44px !important; margin: 0 !important; display: grid; place-items: center; }
html body.mobile #windows .craft-row .cr-ic img { width: 36px !important; height: 36px !important; }
html body.mobile #windows .craft-row .cr-mid { min-width: 0; display: grid; gap: 4px; margin: 0 !important; }
html body.mobile #windows .craft-row .cr-nm { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: var(--pk-fs-md) !important; margin: 0 !important; }
html body.mobile #windows .craft-row .cr-nm b { font-size: var(--pk-fs-md) !important; }
html body.mobile #windows .craft-row :is(.cr-lv, .cr-rar) { font-size: var(--pk-fs-xs) !important; }
html body.mobile #windows .craft-row .cr-mats { display: flex !important; flex-wrap: wrap; gap: 4px !important; margin: 0 !important; }
html body.mobile #windows .craft-row .cr-chip { height: 24px; padding: 0 6px !important; display: inline-flex !important; align-items: center; gap: 4px; font-size: var(--pk-fs-sm) !important; margin: 0 !important; }
html body.mobile #windows .craft-row .cr-chip img { width: 16px !important; height: 16px !important; }
html body.mobile #windows .craft-row .cr-act { margin: 0 !important; padding: 0 !important; width: auto !important; }
html body.mobile #windows .craft-row .cr-btn { width: 100% !important; min-height: 42px !important; padding: 0 8px !important; font-size: var(--pk-fs) !important; margin: 0 !important; }
html body.mobile #windows .craft-row { grid-template-columns: 44px minmax(0, 1fr) 132px !important; grid-template-rows: auto !important; grid-template-areas: none !important; align-content: center !important; }
html body.mobile #windows .craft-row > .cr-ic { grid-column: 1 !important; grid-row: 1 !important; }
html body.mobile #windows .craft-row > .cr-mid { grid-column: 2 !important; grid-row: 1 !important; }
html body.mobile #windows .craft-row > .cr-act { grid-column: 3 !important; grid-row: 1 !important; align-self: center !important; }
html body.mobile #windows .craft-row .cr-mats { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; }
html body.mobile #windows .craft-row .cr-chip { width: auto !important; justify-content: flex-start !important; border-radius: 0 !important; }
html body.mobile #windows .craft-row { padding: 8px 10px !important; gap: 10px !important; min-height: 64px !important; }
html body.mobile #windows .craft-row .cr-mid { text-align: left !important; justify-items: start !important; align-content: center; }
html body.mobile #windows .craft-row .cr-nm { justify-content: flex-start !important; text-align: left !important; position: static !important; width: auto !important; }
html body.mobile #windows .craft-row .cr-mid { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; grid-template-columns: none !important; }
html body.mobile #windows .craft-row .cr-nm { flex-direction: row !important; align-items: baseline !important; }
html body.mobile #windows .craft-row .cr-nm > * { grid-column: auto !important; grid-row: auto !important; margin: 0 !important; }

/* ---------------------------------------------------------------- Smelter: full-width rows (material · result · lots · 44px 🔥), "Smelt all" pinned at the bottom */
html body.mobile #windows .npc-fn-win > .win-body:has(> .smelt-tbl) { display: flex !important; flex-direction: column !important; padding: 0 !important; overflow: hidden !important; }
html body.mobile #windows .npc-fn-win > .win-body:has(> .smelt-tbl) > p.muted { flex: none; margin: 0 !important; padding: 8px 12px 4px !important; font-size: var(--pk-fs-sm) !important; }
html body.mobile #windows .smelt-tbl { flex: 1 1 0; min-height: 0; overflow-y: auto; align-content: start; margin: 0 !important; padding: 0 10px !important; grid-template-columns: minmax(0, 1fr) minmax(120px, 30%) 64px 52px !important; row-gap: 4px !important; }
html body.mobile #windows .smelt-tbl .st-h { position: sticky; top: 0; z-index: 1; height: 28px; display: flex; align-items: center; font: 700 var(--pk-fs-xs)/1 'Outfit', sans-serif !important; letter-spacing: .12em; background: #0f1519; }
html body.mobile #windows .smelt-tbl .st-h.st-c { justify-content: center; }
html body.mobile #windows .smelt-tbl :is(.st-mat, .st-cell) { min-height: 52px; display: flex; align-items: center; gap: 8px; font-size: var(--pk-fs-md) !important; padding: 0 6px !important; }
html body.mobile #windows .smelt-tbl .st-c { justify-content: center; }
html body.mobile #windows .smelt-tbl .icimg { width: 32px !important; height: 32px !important; }
html body.mobile #windows .smelt-tbl .st-lots { font-size: var(--pk-fs-lg) !important; font-weight: 700; }
html body.mobile #windows .smelt-tbl .smelt-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; font-size: 18px !important; }
html body.mobile #windows .smelt-all { flex: none; margin: 0 !important; padding: 8px 10px calc(8px + var(--mobile-safe-bottom, 0px)) !important; border-top: 1px solid var(--pk-line2); box-shadow: 0 -6px 12px rgba(0,0,0,.4); display: flex !important; justify-content: stretch; }
html body.mobile #windows .smelt-all .rpg-btn { flex: 1 1 auto; width: 100% !important; min-height: 44px !important; font-size: var(--pk-fs-md) !important; }
html body.mobile #windows .smelt-empty { margin: auto !important; padding: 24px !important; text-align: center; font-size: var(--pk-fs-md) !important; }

/* ---------------------------------------------------------------- Reborn path choice: full screen, two path cards side by side with their CTA pinned, Cancel in the app bar */
html body.mobile .news-overlay:has(> .reborn-choice-modal) { padding: 0 !important; }
html body.mobile .reborn-choice-modal {
  position: relative !important; width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-image: none !important; border-radius: 0 !important; transform: none !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--pk-bar) auto minmax(0, 1fr) auto; overflow: hidden !important; box-sizing: border-box;
}
html body.mobile .reborn-choice-modal::before, html body.mobile .reborn-choice-modal::after { display: none !important; }
html body.mobile .reborn-choice-modal .news-title { grid-column: 1; grid-row: 1; height: var(--pk-bar); min-height: 0 !important; margin: 0 !important; padding: 0 12px !important; display: flex !important; align-items: center; justify-content: flex-start !important; gap: 8px; border-bottom: 1px solid var(--pk-line2); font: 700 var(--pk-fs-md)/1 'Cinzel', serif !important; letter-spacing: .08em; }
html body.mobile .reborn-choice-modal .news-title svg { width: 20px !important; height: 20px !important; }
html body.mobile .reborn-choice-modal .news-title small { font-size: var(--pk-fs-sm) !important; }
html body.mobile .reborn-choice-modal .rb-choice-cancel { grid-column: 2; grid-row: 1; align-self: stretch; height: var(--pk-bar) !important; min-height: 0 !important; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-left: 1px solid var(--pk-line) !important; border-bottom: 1px solid var(--pk-line2) !important; border-radius: 0 !important; font-size: var(--pk-fs-sm) !important; }
html body.mobile .reborn-choice-modal .rb-choice-intro { grid-column: 1 / -1; grid-row: 2; margin: 0 !important; padding: 6px 12px !important; font-size: var(--pk-fs-sm) !important; line-height: 1.4 !important; text-align: left !important; }
html body.mobile .reborn-choice-modal .rb-path-grid { grid-column: 1 / -1; grid-row: 3; min-height: 0; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 !important; padding: 0 calc(10px + var(--mobile-safe-right, 0px)) 0 calc(10px + var(--mobile-safe-left, 0px)) !important; }
html body.mobile .reborn-choice-modal .rb-path { min-height: 0; height: 100% !important; display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 8px 10px !important; margin: 0 !important; box-sizing: border-box; overflow: hidden; }
html body.mobile .reborn-choice-modal .rb-choice-watermark { display: none !important; }
html body.mobile .reborn-choice-modal .rb-path-h { flex: none; min-height: 0 !important; gap: 8px !important; margin: 0 !important; }
html body.mobile .reborn-choice-modal .rb-choice-sigil { width: 32px !important; height: 32px !important; }
html body.mobile .reborn-choice-modal .rb-benefits { flex: 1 1 0; min-height: 0; overflow-y: auto; margin: 0 !important; display: grid; gap: 4px; align-content: start; }
html body.mobile .reborn-choice-modal .rb-line { min-height: 0 !important; padding: 4px 8px !important; font-size: var(--pk-fs) !important; }
html body.mobile .reborn-choice-modal .rb-max-note { flex: none; margin: 0 !important; font-size: var(--pk-fs-xs) !important; }
html body.mobile .reborn-choice-modal .rb-path > .rpg-btn { flex: none; min-height: 44px !important; height: 44px; margin: 0 !important; font-size: var(--pk-fs) !important; }
html body.mobile .reborn-choice-modal .rb-choice-footer { grid-column: 1 / -1; grid-row: 4; margin: 0 !important; padding: 6px 12px calc(6px + var(--mobile-safe-bottom, 0px)) !important; font-size: var(--pk-fs-xs) !important; line-height: 1.4; }
html body.mobile .reborn-choice-modal .rb-path-grid { grid-template-rows: minmax(0, 1fr) !important; overflow: hidden; padding-bottom: 6px !important; }
html body.mobile .reborn-choice-modal .rb-path { height: auto !important; max-height: none !important; align-self: stretch; }
html body.mobile .reborn-choice-modal :is(.rb-path, .rb-benefits) { min-height: 0 !important; }
html body.mobile .reborn-choice-modal .rb-benefits { flex: 1 1 0 !important; overflow-y: auto !important; }

/* ---------------------------------------------------------------- Reborn mystic: compact 5-step track, temple as one row, Reborn button pinned */
html body.mobile #windows .npc-fn-win > .win-body:has(> .reborn-tier-tabs) { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 6px 10px 0 !important; }
html body.mobile #windows .npc-fn-win > .win-body:has(> .reborn-tier-tabs) > :is(p, div.muted) { margin: 0 !important; padding: 0 !important; font-size: var(--pk-fs-sm) !important; line-height: 1.4 !important; }
html body.mobile #windows .reborn-tier-tabs { flex: none; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 4px !important; margin: 0 !important; }
html body.mobile #windows .reborn-tier-tab { height: 52px !important; min-height: 0 !important; padding: 4px 2px !important; display: flex !important; flex-direction: column !important; align-items: center; justify-content: center; gap: 2px !important; margin: 0 !important; }
html body.mobile #windows .reborn-tier-tab .reborn-tier-rank { font-size: 16px !important; height: auto !important; line-height: 1 !important; }
html body.mobile #windows .reborn-tier-tab b { font-size: var(--pk-fs-xs) !important; line-height: 1.1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html body.mobile #windows .reborn-tier-tab small { font-size: 10px !important; }
html body.mobile #windows .reborn-tier-details { flex: none; margin: 0 !important; padding: 6px 10px !important; }
html body.mobile #windows .reborn-tier-heading, html body.mobile #windows .reborn-tier-bonuses { font-size: var(--pk-fs) !important; }
html body.mobile #windows .npc-fn-win > .win-body > div:has(> .reborn-open-temple) { flex: none; display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 6px 8px !important; }
html body.mobile #windows .npc-fn-win > .win-body > div:has(> .reborn-open-temple) > p { flex: 1 1 auto; margin: 0 !important; font-size: var(--pk-fs-sm) !important; }
html body.mobile #windows .reborn-open-temple { flex: 0 0 auto; width: auto !important; min-height: 40px !important; padding: 0 14px !important; margin: 0 !important; }
html body.mobile #windows .reborn-go { position: sticky; bottom: 0; z-index: 2; flex: none; margin: auto -10px 0 !important; width: calc(100% + 20px) !important; min-height: 46px !important; border-radius: 0 !important; box-shadow: 0 -10px 14px 2px #0b1013 !important; }
html body.mobile #windows .reborn-go + p.muted { order: -1; }

/* ---------------------------------------------------------------- Achievements: categories rail │ header (name · filters · count) over the tile grid */
html body.mobile .achievement-win > .win-body { display: grid !important; grid-template-columns: var(--pk-rail) minmax(0, 1fr) !important; grid-template-rows: auto auto minmax(0, 1fr) !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important; }
html body.mobile .achievement-win .achievement-categories {
  grid-column: 1; grid-row: 1 / span 3; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 4px !important; margin: 0 !important; padding: 6px !important;
  overflow-y: auto !important; overflow-x: hidden !important; border-right: 1px solid var(--pk-line); background: rgba(0,0,0,.22);
}
html body.mobile .achievement-win .achievement-categories .rpg-btn { flex: 0 0 auto !important; width: 100% !important; height: auto !important; min-height: 44px !important; padding: 4px 3px !important; white-space: normal !important; font-size: var(--pk-fs-xs) !important; line-height: 1.15 !important; }
html body.mobile .achievement-win .achievement-header { grid-column: 2; grid-row: 1; padding: 6px 10px 4px !important; }
html body.mobile .achievement-win .achievement-meter { grid-column: 2; grid-row: 2; display: none !important; }
html body.mobile .achievement-win .achievement-filters { grid-column: 2; grid-row: 2; margin: 0 !important; padding: 0 10px 6px !important; }
html body.mobile .achievement-win .achievement-filters .rpg-btn { height: 40px !important; min-height: 40px !important; }
html body.mobile .achievement-win .achievement-grid { grid-column: 2; grid-row: 3; min-height: 0; overflow-y: auto !important; padding: 0 calc(10px + var(--mobile-safe-right, 0px)) 10px 10px !important; margin: 0 !important; align-content: start; }
html body.mobile .achievement-win .achievement-categories .rpg-btn { overflow-wrap: normal !important; word-break: normal !important; letter-spacing: -.01em !important; }

/* ---------------------------------------------------------------- Companion (pet picker): tabs rail │ status row + scrolling pane */
html body.mobile .pet-picker-win > .win-body { display: grid !important; grid-template-columns: var(--pk-rail) minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; padding: 0 !important; gap: 0 !important; overflow: hidden !important; }
html body.mobile .pet-picker-win > .win-body > div:first-child { grid-column: 2; grid-row: 1; margin: 0 !important; padding: 6px 10px !important; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--pk-line); }
html body.mobile .pet-picker-win .pet-tabs { grid-column: 1; grid-row: 1 / span 2; display: flex !important; flex-direction: column !important; gap: 4px !important; margin: 0 !important; padding: 6px !important; border: 0 !important; border-right: 1px solid var(--pk-line) !important; background: rgba(0,0,0,.22); overflow-y: auto; }
html body.mobile .pet-picker-win .pet-tabs > button { flex: 0 0 auto !important; width: 100% !important; min-height: 48px !important; height: auto !important; padding: 4px 3px !important; font: 700 var(--pk-fs-xs)/1.15 'Outfit', sans-serif !important; text-transform: uppercase; white-space: normal !important; }
html body.mobile .pet-picker-win .pet-tabpane { grid-column: 2; grid-row: 2; min-height: 0; overflow-y: auto !important; padding: 8px 10px 12px !important; margin: 0 !important; }
html body.mobile .pet-picker-win .pet-tabpane:not(:has(*)) , html body.mobile .pet-picker-win .pet-tabpane[hidden] { display: none !important; }
html body.mobile .pet-picker-win .pet-card { display: grid !important; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
html body.mobile .pet-picker-win .pet-card .pc-img { width: 88px !important; height: 88px !important; }

/* ---------------------------------------------------------------- Riki's bag: app bar · loot grid + Take all (left) · rarity chips + exclusions (right) */
html body.mobile .rpg-confirm-overlay > .win.riki-stash-win:not(.rpg-confirm-box) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) var(--pk-side) !important; grid-template-rows: var(--pk-bar) minmax(0, 1fr) auto !important; padding: 0 !important; gap: 0 !important;
}
html body.mobile .riki-stash-win > div { display: contents !important; }
html body.mobile .riki-stash-win .riki-stash-head { grid-column: 1 / -1; grid-row: 1; height: var(--pk-bar); margin: 0 !important; padding: 0 56px 0 12px !important; display: flex !important; align-items: center; gap: 10px; border-bottom: 1px solid var(--pk-line2); box-sizing: border-box; }
html body.mobile .riki-stash-win .riki-stash-head img { width: 28px !important; height: 28px !important; }
html body.mobile .riki-stash-win .riki-stash-head > div { display: flex; align-items: baseline; gap: 10px; }
html body.mobile .riki-stash-win .riki-stash-head strong { font: 700 var(--pk-fs-md)/1 'Cinzel', serif !important; letter-spacing: .08em; color: var(--pk-gold); }
html body.mobile .riki-stash-win .riki-stash-head p { margin: 0 !important; font-size: var(--pk-fs-sm) !important; }
html body.mobile .riki-stash-win .riki-stash-close { position: absolute !important; top: 0 !important; right: 0 !important; width: var(--pk-bar) !important; height: var(--pk-bar) !important; z-index: 3; border-left: 1px solid var(--pk-line) !important; border-radius: 0 !important; }
html body.mobile .riki-stash-win .riki-stash-grid { grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto; margin: 0 !important; padding: 8px 10px !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important; grid-auto-rows: 64px !important; gap: 6px !important; align-content: start; }
html body.mobile .riki-stash-win .riki-stash-slot { width: auto !important; height: 64px !important; min-height: 0 !important; padding: 0 !important; }
html body.mobile .riki-stash-win .riki-stash-slot img { width: 40px !important; height: 40px !important; }
html body.mobile .riki-stash-win .riki-stash-hint { grid-column: 1; grid-row: 3; display: none !important; }
html body.mobile .riki-stash-win .riki-take-all { grid-column: 1; grid-row: 3; margin: 0 10px calc(8px + var(--mobile-safe-bottom, 0px)) !important; min-height: 44px !important; width: auto !important; }
html body.mobile .riki-stash-win .riki-rarities { grid-column: 2; grid-row: 2; align-self: start; margin: 0 !important; padding: 8px 10px !important; border: 0 !important; border-left: 1px solid var(--pk-line) !important; display: flex !important; flex-wrap: wrap; gap: 6px !important; }
html body.mobile .riki-stash-win .riki-rarities legend { float: left; width: 100%; padding: 0 !important; margin: 0 0 2px !important; font: 700 var(--pk-fs-xs)/1.2 'Outfit', sans-serif !important; letter-spacing: .12em; text-transform: uppercase; color: var(--pk-gold2); }
html body.mobile .riki-stash-win .riki-rarities label { height: 40px; padding: 0 10px; display: inline-flex !important; align-items: center; gap: 6px; border: 1px solid var(--pk-line); background: rgba(0,0,0,.25); font-size: var(--pk-fs) !important; }
html body.mobile .riki-stash-win .riki-rarities input { width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: #c9a35c; }
html body.mobile .riki-stash-win .pet-exclusions { grid-column: 2; grid-row: 2 / span 2; margin: 150px 0 0 !important; padding: 8px 10px !important; border-left: 1px solid var(--pk-line); overflow-y: auto; min-height: 0; }
html body.mobile .riki-stash-win .pet-exclusions h3 { font: 700 var(--pk-fs-xs)/1.2 'Outfit', sans-serif !important; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 4px !important; }
html body.mobile .riki-stash-win .pet-exclusions p { font-size: var(--pk-fs-sm) !important; margin: 0 0 6px !important; }
html body.mobile #windows .smith-station .smith-stats-cur { display: none !important; }

/* ---------------------------------------------------------------- Item / info sheets: bottom sheet (full width), actions column: primary first, danger last */
html body.mobile #mob-sheet { display: flex !important; align-items: flex-end !important; justify-content: center !important; padding: 0 !important; }
html body.mobile #mob-sheet .mob-sheet-panel {
  width: min(760px, 100%) !important; max-width: 100% !important; max-height: 78% !important; margin: 0 !important; border-radius: 0 !important; border-bottom: 0 !important;
  padding-bottom: var(--mobile-safe-bottom, 0px) !important; box-shadow: 0 -12px 36px rgba(0,0,0,.75) !important; animation: pkSheetUp .18s ease-out;
}
@keyframes pkSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
html body.mobile #mob-sheet .sheet-itemdetail { grid-template-columns: minmax(0, 1fr) 220px !important; }
html body.mobile #mob-sheet .mob-sheet-acts { display: flex !important; flex-direction: column !important; }
html body.mobile #mob-sheet .mob-act.good { order: -1; }
html body.mobile #mob-sheet .mob-act:is(.danger, .bad) { order: 9; margin-top: auto !important; }

/* ---------------------------------------------------------------- NPC shelf cards fill the row */
html body.mobile #windows .sv-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; }
html body.mobile #windows .sv-item { width: auto !important; }

/* ---------------------------------------------------------------- Settings rows: label left, control right, whole row tappable; selects never clip their value */
html body.mobile #windows .graphics-remake .graphics-section label { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-height: 46px !important; }
html body.mobile #windows .graphics-remake .graphics-section label > :is(select, input[type=range]) { flex: 0 0 min(250px, 52%) !important; width: min(250px, 52%) !important; max-width: none !important; }
html body.mobile #windows .graphics-remake .graphics-section select { font-size: 16px !important; height: 40px !important; padding: 0 28px 0 8px !important; text-overflow: ellipsis; }
html body.mobile #windows .graphics-remake .graphics-section label :is(input[type=checkbox], .switch, .toggle) { transform: scale(1.2); transform-origin: right center; }
html body.mobile #windows .graphics-remake .settings-page.active { grid-template-columns: minmax(0, 1fr) !important; }

/* ---------------------------------------------------------------- Menu: session row quiet, Log out away from the thumb (top-right of the tiles, small, red outline) */
html body.mobile #windows #win-menu .camp-session { order: 0; }
html body.mobile #windows #win-menu .camp-sbtn.danger { flex: 0 0 auto !important; background: transparent !important; border: 1px solid #a8483a !important; color: #ffb3a7 !important; }

/* ---------------------------------------------------------------- Clan members: one 48px line per member, actions inline right */
html body.mobile #windows #win-guild .fr-section { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px 6px !important; }
html body.mobile #windows #win-guild .fr-section > .fr-head { grid-column: 1 / -1; }
html body.mobile #windows #win-guild .fr-row { height: 48px !important; min-height: 48px !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; padding: 0 4px 0 8px !important; overflow: hidden; }
html body.mobile #windows #win-guild .fr-row .fr-nm { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; order: 1; }
html body.mobile #windows #win-guild .fr-row :is(.fr-dot, .g-ric) { order: 0; flex: none; }
html body.mobile #windows #win-guild .fr-row .g-lv { order: 2; flex: none; }
html body.mobile #windows #win-guild .fr-row .g-role { order: 3; flex: none; font-size: var(--pk-fs-xs) !important; }
html body.mobile #windows #win-guild .fr-row .rpg-btn { order: 4; flex: none; }
/* no keyboard key badges on phone (skills are bound to touch buttons) */
html body.mobile #windows :is(.skill-key-badge, .sk-key, .cs-key) { display: none !important; }
html body.mobile #windows #win-skills .bind-btn { position: sticky; bottom: 0; }
/* season: sticky row labels (Free on top, Premium below) at the start of the horizontal track */
html body.mobile #windows #win-rewards.bp-win .bp-track::before {
  content: attr(data-prem) "  " attr(data-free); position: sticky; left: 0; z-index: 2; flex: 0 0 28px; margin: 0; padding: 8px 0 34px;
  writing-mode: vertical-rl; transform: rotate(180deg); text-align: justify; text-align-last: justify; white-space: nowrap;
  font: 700 var(--pk-fs-xs)/26px 'Outfit', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--pk-gold2);
  background: #0b1013; border-right: 1px solid var(--pk-line); box-sizing: border-box;
}
html body.mobile #windows #win-rewards.bp-win .bp-track { padding-left: 0 !important; }
html body.mobile #windows #win-rewards.bp-win .bp-cell > .reward-ui-icon { width: 18px !important; height: 18px !important; }
/* split view: one shared "Close all" — the last window's own X steps aside */
html body.mobile #windows > .win:not(.pk-over) #win-closeall + .x { display: none !important; }
/* a window opened over another keeps its own ✕ (back to the one underneath) next to "Închide tot" */
html body.mobile #windows > .win.pk-over #win-closeall { margin-right: 6px !important; }
/* NPC shelf: short description (2 lines) under the name */
html body.mobile #windows .sv-ddesc { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--pk-fs-sm) !important; margin: 2px 0 0 !important; }
/* menu tiles: titles may wrap to 2 lines */
html body.mobile #windows #win-menu .camp-tile b { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.15 !important; }
/* invite: the ring already shows the countdown */
html body.mobile #windows #win-invite .inv-expiry { display: none !important; }
/* dice big enough to read */
html body.mobile #windows #win-barbut .bb-dice { height: 52px !important; gap: 8px !important; }
html body.mobile #windows #win-barbut .bb-dice > * { width: 48px !important; height: 48px !important; font-size: 30px !important; }
/* portal tag never clipped */
html body.mobile #portal-info .pi-heading { padding-top: 2px; }
html body.mobile #windows #win-inv .inv-currency { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body.mobile #windows #win-inv .cur-chip { padding: 0 6px !important; justify-content: center; height: 32px !important; }
html body.mobile #windows #win-inv .cur-chip small { display: none !important; }
html body.mobile #windows #win-char .ct-cosmetic-preview :is(canvas, img) { width: 112px !important; height: 112px !important; image-rendering: pixelated; }
html body.mobile #windows #win-inv .inv-currency { grid-template-columns: 1fr 1fr !important; }
html body.mobile #windows #win-inv .cur-chip:first-child { grid-column: 1 / -1; }
html body.mobile #windows #win-inv .cur-chip { white-space: nowrap; }
/* bank quick amounts: 3 amounts + 2 "all" buttons on two rows, custom amount beside */
html body.mobile #windows #win-bank .bsp-amt { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
html body.mobile #windows #win-bank .bsp-quick { grid-column: span 2; font-size: var(--pk-fs-sm) !important; white-space: nowrap; }
html body.mobile #windows #win-bank .bsp-quick:nth-child(n+4) { grid-column: span 2; }
html body.mobile #windows #win-bank .bsp-field { grid-column: span 2; }
/* quests: route button spans the detail */
html body.mobile #windows #win-quests .qc-act .rpg-btn { width: 100% !important; }
html body.mobile #windows #win-quests .qc-icon { position: relative; overflow: visible; }
/* trade beside the inventory (the real flow): smaller slots, offers stacked */
html body.mobile #windows > #win-trade:not(:only-child) .trade-slots-grid { grid-template-columns: repeat(4, 40px) !important; grid-auto-rows: 40px !important; gap: 4px !important; }
html body.mobile #windows > #win-trade:not(:only-child) .trade-grid-slot { width: 40px !important; height: 40px !important; }
html body.mobile #windows > #win-trade:not(:only-child) > .win-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) auto auto !important; }
html body.mobile #windows > #win-trade:not(:only-child) .trade-yangrow { grid-column: 1 / -1 !important; grid-row: 3 !important; justify-content: center; }
html body.mobile #windows > #win-trade:not(:only-child) .trade-actions .rpg-btn { grid-row: 4 !important; }
html body.mobile #windows #win-wiki .wiki-content { grid-template-rows: 30px !important; }
html body.mobile #windows #win-wiki .wiki-h { height: 30px !important; display: flex !important; align-items: center; gap: 8px; overflow: hidden; }
html body.mobile #windows #win-wiki .wiki-content:has(> .wiki-media-host) > .wiki-media-host { top: 30px; }

/* ==========================================================================================
   ROUND 3 — second review fixes
   ========================================================================================== */
/* clan rail: never wraps into a hidden second column */
html body.mobile #windows #win-guild .guild-tabs { flex-wrap: nowrap !important; overflow-y: auto !important; }
html body.mobile #windows #win-guild .guild-tab { min-height: 46px !important; flex: 0 0 auto !important; }
html body.mobile #windows #win-guild .gb-xp { margin-right: 26px !important; }
html body.mobile #windows #win-guild .guild-motd .rpg-btn { min-width: 40px !important; min-height: 40px !important; }

/* cook buff line: full height, up to 2 lines */
html body.mobile #windows .cook-win .ck-cbuff { flex-shrink: 0 !important; min-height: 13px; line-height: 1.3 !important; white-space: normal !important; text-overflow: clip !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body.mobile #windows .cook-win .ck-card { min-height: 104px !important; }
html body.mobile #windows .cook-win .ck-sidehead { white-space: nowrap; font-size: 10px !important; gap: 4px; }

/* ---- pinned footers that never cover content: the scroll area ends above the button */
/* Character master–detail (Collections / Titles / Cosmetics) */
html body.mobile #windows #win-char .ct-layout { position: relative !important; }
html body.mobile #windows #win-char .ct-detail { margin-bottom: 52px !important; height: auto !important; }
html body.mobile #windows #win-char .ct-activate { position: absolute !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: var(--pk-side) !important; margin: 0 !important; height: 46px; box-shadow: none !important; }
/* Cook detail */
html body.mobile #windows .cook-win .ck-pane { position: relative !important; }
html body.mobile #windows .cook-win .ck-detail { margin-bottom: 54px !important; height: auto !important; }
html body.mobile #windows .cook-win .ck-detail .ck-go { position: absolute !important; right: 8px !important; bottom: 6px !important; width: calc(var(--pk-side) - 16px) !important; margin: 0 !important; box-shadow: none !important; }
html body.mobile #windows .cook-win .ck-lab .ck-go { position: static !important; width: auto !important; min-width: 180px; margin: 4px 0 0 !important; box-shadow: none !important; }
html body.mobile #windows .cook-win .ck-lab { padding-bottom: 16px !important; }
/* Premium detail */
html body.mobile #windows #win-premium > .win-body { position: relative !important; }
html body.mobile #windows #win-premium .premium-detail { margin-bottom: 56px !important; height: auto !important; }
html body.mobile #windows #win-premium .pd-buy { position: absolute !important; right: 8px !important; bottom: 6px !important; left: auto !important; width: calc(var(--pk-side) - 16px) !important; margin: 0 !important; box-shadow: none !important; }
html body.mobile #windows #win-premium .pd-desc { overflow: visible !important; max-height: none !important; display: block !important; -webkit-line-clamp: unset !important; }
html body.mobile #windows #win-premium .pd-showroom { position: relative !important; display: grid !important; place-items: center; overflow: hidden; }
html body.mobile #windows #win-premium .pd-showroom .pd-icon { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; width: 56px !important; height: 56px !important; }
html body.mobile #windows #win-premium .pshop-card .pc-tag { z-index: 3 !important; }
html body.mobile #windows #win-premium .pd-kicker { font-size: 10px !important; }
/* Skills: bind button pinned under the detail column, never over the rank rows */
html body.mobile #windows #win-skills .journal-layout { position: relative !important; }
html body.mobile #windows #win-skills .journal-detail { margin-bottom: 54px !important; height: auto !important; padding-bottom: 10px !important; }
html body.mobile #windows #win-skills .journal-detail .skill-card { position: static !important; }
html body.mobile #windows #win-skills .journal-detail .bind-btn { position: absolute !important; right: 10px !important; bottom: 6px !important; left: calc(max(220px, 38%) + 10px) !important; top: auto !important; width: auto !important; min-height: 42px !important; margin: 0 !important; }
html body.mobile #windows #win-skills .journal-detail .skill-key-badge { display: none !important; }
/* Portal: drop the wallet chips (irrelevant here) so the cost row shows without scrolling */
html body.mobile #portal-info .pi-wallet { display: none !important; }

/* achievements grid fills to the bottom */
html body.mobile .achievement-win .achievement-grid { max-height: none !important; height: 100% !important; }
/* season: the first card snaps after the sticky label column */
html body.mobile #windows #win-rewards.bp-win .bp-track { scroll-padding-left: 30px; }
/* forge: locked recipes stay readable, missing materials red */
html body.mobile #windows .craft-row.locked { filter: none !important; opacity: .86 !important; }
html body.mobile #windows .craft-row .cr-chip.no { color: #ff8a7a !important; border-color: #8a3a30 !important; }
/* caravan tabs: 2 lines allowed */
html body.mobile #windows #win-caravan .cv-tab { height: 44px !important; min-height: 44px !important; white-space: normal !important; line-height: 1.1 !important; text-overflow: clip !important; }
/* character: identity strip only on the Stats tab */
html body.mobile #windows #win-char > .win-body:not(:has(.character-combat)) { grid-template-rows: 0 minmax(0, 1fr) !important; }
html body.mobile #windows #win-char > .win-body:not(:has(.character-combat)) .hero-banner { display: none !important; }
html body.mobile #windows #win-char .rep-perk { color: #b8a684 !important; }
/* shop shelf: no background band between grid and buy bar */
html body.mobile #windows .shop-vitrine, html body.mobile #windows .sv-grid { background: transparent !important; }

/* ---- 10px floor (second pass) */
html body.mobile #windows :is(.sb-pts-k, .pd-kicker, .camp-pill, .gtb-b, .gb-xp .lbl, .dj-flame small, .ck-badge) { font-size: 10px !important; }
html body.mobile .reborn-choice-modal .rb-choice-intro small { font-size: 10px !important; }
html body.mobile :is(.char-lvl, .ch-tag, .act-btn .lbl, .act-pvp span, .act-pvp small) { font-size: 10px !important; }
html body.mobile #target-contributions :is(small, .tc-sub, .muted) { font-size: 10px !important; }
html body.mobile #screen-chars em { font-size: 10px !important; }
html body.mobile .arena-result :is(small, .ar-k, .ar-label) { font-size: 10px !important; }
html body.mobile .reborn-choice-modal .rb-warning { display: inline-flex; align-items: flex-start; gap: 6px; }

/* ---- targets >= 40px (second pass) */
html body.mobile #windows :is(.inv-sort, .inv-search, .ct-filter, .sk-util-btn, .bank-tab, .cv-tab, .bsp-field, .camp-sbtn, .bp-sum-toggle, .bp-claim-all) { min-height: 40px !important; height: 40px !important; }
html body.mobile #windows #win-inv .inv-search-row { height: 40px !important; }
html body.mobile #windows #win-inv .inv-tabs { height: 40px !important; }
html body.mobile #windows #win-closeall { height: 40px !important; min-height: 40px !important; }
html body.mobile #windows #win-char .stat-row button.small { width: 40px !important; min-width: 40px !important; height: 40px !important; }
html body.mobile .fullmap-overlay .world-atlas .atlas-details .rpg-btn { min-height: 40px !important; }
html body.mobile #windows #win-menu .camp-langs { grid-template-columns: 1fr 1fr !important; }
html body.mobile #windows #win-menu .camp-chip { height: 40px !important; min-height: 40px !important; }
html body.mobile #windows #win-menu .camp-sound .camp-chip { flex: 0 0 40px; width: 40px; }
html body.mobile #windows #win-menu .camp-vol { accent-color: #c9a35c; background: transparent !important; height: 40px !important; }
html body.mobile #death-overlay #death-cause { min-height: 40px; display: inline-flex; align-items: center; }
html body.mobile #screen-chars #char-backdrop { min-height: 40px !important; }
html body.mobile .fullmap-overlay .atlas-center-player { font-size: 20px !important; }
/* every rail label uppercase, same rhythm */
html body.mobile #windows .graphics-remake .settings-tab b, html body.mobile .achievement-win .achievement-categories .rpg-btn, html body.mobile .pet-picker-win .pet-tabs > button, html body.mobile #windows .craft-tabs .sv-tab { text-transform: uppercase !important; letter-spacing: .02em !important; font: 700 var(--pk-fs-xs)/1.15 'Outfit', sans-serif !important; }
/* quests: daily empty state like the Messages one */
html body.mobile #windows #win-quests .win-body > :not(.inv-tabs) > p.muted:only-child, html body.mobile #windows #win-quests .quest-list > p.muted:only-child { margin: auto !important; padding: 40px 16px !important; text-align: center; font-size: var(--pk-fs-md) !important; }
/* pinned-footer pattern: the detail column stretches to (track − footer) and is NOT the positioning parent */
html body.mobile #windows #win-char .ct-detail, html body.mobile #windows #win-premium .premium-detail, html body.mobile #windows #win-skills .journal-detail, html body.mobile #windows .cook-win .ck-detail {
  position: static !important; align-self: stretch !important; min-height: 0 !important; overflow-y: auto !important;
}
html body.mobile #windows #win-skills .journal-detail .bind-btn { left: calc(max(220px, 38%) + 10px) !important; }
html body.mobile #windows #win-guild .guild-tab { height: 46px !important; min-height: 46px !important; }
html body.mobile #mob-sheet .sheet-buy .tip-price { display: none !important; }
html body.mobile #mob-sheet .mob-act :is(img, svg) { margin-right: 6px; vertical-align: -2px; }
html body.mobile #mob-sheet .mob-buy-price { font-size: var(--pk-fs-md) !important; text-align: center; padding: 4px 0 !important; }

/* ==========================================================================================
   ROUND 4 — third review fixes
   ========================================================================================== */
/* menu: left column stacks in normal flow (no overlap), body scrolls if a very short phone needs it */
html body.mobile #windows #win-menu > .win-body.camp-menu { grid-template-rows: auto auto auto auto 1fr !important; overflow-y: auto !important; }
html body.mobile #windows #win-menu .camp-session { align-self: start !important; }
html body.mobile #windows #win-menu .camp-tiles { grid-row: 1 / span 5 !important; }
html body.mobile #windows #win-menu .camp-sbtn { height: 40px !important; min-height: 40px !important; }
html body.mobile #windows #win-menu .camp-langs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html body.mobile #windows #win-menu .camp-chip { font-size: 10px !important; padding: 0 2px !important; }
/* inspect: compact figure so the badge row stays on screen */
html body.mobile .inspect-box .inspect-layout { height: auto !important; max-height: none !important; min-height: 0 !important; }
html body.mobile .inspect-box .inspect-fig { max-height: 210px !important; }
/* cook experiments: the Try button pinned under the lab */
html body.mobile #windows .cook-win .ck-lab { display: flex !important; flex-direction: column !important; overflow-y: auto !important; padding-bottom: 8px !important; }
html body.mobile #windows .cook-win .ck-lab > :not(.ck-go) { flex: 0 0 auto; }
html body.mobile #windows .cook-win .ck-lab > .ck-pick { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
html body.mobile #windows .cook-win .ck-lab .ck-go { flex: 0 0 44px; margin-top: auto !important; align-self: stretch !important; width: auto !important; }
html body.mobile #windows .cook-win .ck-cbuff { max-height: none !important; }
html body.mobile #windows .cook-win .ck-card { min-height: 112px !important; }
/* reborn choice: the whole card scrolls, every unlock line visible */
html body.mobile .reborn-choice-modal .rb-path { overflow-y: auto !important; }
html body.mobile .reborn-choice-modal .rb-benefits { flex: 0 0 auto !important; overflow: visible !important; max-height: none !important; }
html body.mobile .reborn-choice-modal .rb-path > .rpg-btn { position: sticky; bottom: 0; z-index: 2; }
/* character skills: maxed bars clamp */
html body.mobile #windows #win-char .cs-bar { overflow: hidden !important; }
html body.mobile #windows #win-char .cs-bar i { max-width: 100% !important; }
html body.mobile #windows #win-char .speed-icon .badge { font-size: 10px !important; }
/* NPC shelf: stats under the name, quantity stepper on its own row with 40px buttons */
html body.mobile #windows .sv-foot { grid-template-columns: minmax(0, 1fr) auto; }
html body.mobile #windows .sv-detail { grid-column: 1 / -1; grid-template-columns: 40px minmax(0, 1fr) !important; align-items: start !important; }
html body.mobile #windows .sv-detail .sv-qty { grid-column: 1 / -1; display: flex !important; gap: 4px !important; }
html body.mobile #windows .sv-qty .ibtn { min-width: 40px !important; height: 40px !important; white-space: nowrap !important; flex: 1 1 0; }
html body.mobile #windows .sv-qty .sv-qnum { min-width: 44px; display: grid; place-items: center; font-size: var(--pk-fs-md); font-weight: 700; }
html body.mobile #windows .sv-dstats { font-size: var(--pk-fs-sm); line-height: 1.35; margin-top: 2px; color: #d9d2bd; }
html body.mobile #windows .sv-buyrow { grid-column: 1 / -1; }
html body.mobile #windows .sv-tabs .sv-tab { padding: 0 9px !important; }
/* settings: rail labels never break mid-word; sliders get a 40px hit area */
html body.mobile #windows .graphics-remake .settings-tab b { word-break: keep-all !important; overflow-wrap: normal !important; letter-spacing: -.03em !important; font-size: 10px !important; white-space: nowrap !important; }
html body.mobile #windows .graphics-remake input[type=range] { height: 40px !important; }
/* guild: shop summary + destructive actions */
html body.mobile #windows #win-guild .guild-shop summary { min-height: 40px !important; display: flex !important; align-items: center; }
html body.mobile #windows #win-guild :is(.danger, .btn-danger) { max-width: 260px; margin-left: auto !important; }
/* atlas: region chips fade at the edge (more to scroll) */
html body.mobile .fullmap-overlay .world-atlas .atlas-globe-regions { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
/* portal: tag + reputation row clear of the action bar */
html body.mobile #portal-info .pi-tag { font-size: 10px !important; }
html body.mobile #portal-info .pi-content { padding-bottom: 12px !important; }
/* arena report heads */
html body.mobile :is(.arena-report, .arena-win, .duel-end) :is(th, .ar-h, small) { font-size: 10px !important; }
/* quests: empty Daily like Messages */
html body.mobile #windows #win-quests .quest-list > p.muted, html body.mobile #windows #win-quests .win-body > div > p.muted { margin: 0 !important; padding: 40px 16px 0 !important; text-align: center !important; font-size: var(--pk-fs-md) !important; }
html body.mobile #windows #win-quests .quest-list > p.muted + p.muted, html body.mobile #windows #win-quests .win-body > div > p.muted + p.muted { padding-top: 6px !important; font-size: var(--pk-fs-sm) !important; }
/* riki: empty slots without numbers, rarity labels capitalised */
html body.mobile .riki-stash-win div.riki-stash-slot { font-size: 0 !important; }
html body.mobile .riki-stash-win .riki-rarities label { text-transform: capitalize; }
html body.mobile #windows .sv-dstats > b:first-child, html body.mobile #windows .sv-dstats > b:first-child + .tip-rar, html body.mobile #windows .sv-dstats .tip-price { display: none !important; }
html body.mobile #windows .sv-dstats > br:first-of-type { display: none; }
html body.mobile #windows .sv-foot { max-height: 60%; overflow-y: auto; }
/* performance test tools (FPS arena, Vulcan test, stutter log) are desktop diagnostics */
html body.mobile #windows .graphics-remake .perf-dev { display: none !important; }
html body.mobile #windows .sv-tabs { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px !important; }

/* ==========================================================================================
   ROUND 5 — fourth review fixes
   ========================================================================================== */
/* scroll columns: children keep their size (no collapsed progress bars / pickers) */
html body.mobile #windows :is(.ck-lab, #win-char .ct-detail, #win-premium .premium-detail, .sv-foot, .ck-detail, .journal-detail) > * { flex-shrink: 0 !important; }
html body.mobile #windows #win-char .ct-progress { height: 8px !important; min-height: 8px !important; }
html body.mobile #windows #win-char .ct-progress > i { height: 100% !important; display: block; }
/* reborn path CTA pinned in both cards (beats frequent-polish position:relative) */
html body.mobile #reborn-path-modal .rb-choice .btn-accept, html body.mobile .reborn-choice-modal .rb-path > .rpg-btn { position: sticky !important; bottom: 0 !important; margin-top: auto !important; }
/* mail compose: a centred card over the mailbox, not a split */
html body.mobile #windows > #win-mailCompose {
  position: fixed !important; left: 50% !important; top: calc(var(--mobile-ui-top, 0px) + 50%) !important; transform: translate(-50%, -50%) !important;
  width: min(620px, 94vw) !important; max-width: 94vw !important; height: auto !important; max-height: calc(var(--mobile-ui-height, 100dvh) - 16px) !important;
  flex: none !important; z-index: 700 !important; border: 1px solid var(--pk-line2) !important; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55), 0 12px 40px rgba(0,0,0,.7) !important;
}
html body.mobile #windows:has(> #win-mailCompose) > .win:not(#win-mailCompose) { flex: 1 1 100% !important; }
html body.mobile #windows #win-mailCompose .rpg-btn { min-height: 44px !important; }
/* skills header: ultimates label may wrap */
html body.mobile #windows #win-skills .sk-ults .sp-section { white-space: normal !important; line-height: 1.2 !important; }
html body.mobile #windows #win-skills .sk-util-btn { height: 40px !important; min-height: 40px !important; }
/* forge rail: full rail width */
html body.mobile #windows .craft-tabs .sv-tab { max-width: none !important; min-width: 0 !important; width: 100% !important; box-sizing: border-box; word-break: keep-all !important; overflow-wrap: normal !important; }
html body.mobile #windows .craft-tabs { width: var(--pk-rail) !important; box-sizing: border-box; }
/* cook queue head: count under the label */
html body.mobile #windows .cook-win .ck-sidehead { flex-direction: column !important; align-items: center !important; letter-spacing: 0 !important; gap: 0 !important; text-align: center; }
/* native checkboxes -> game-styled 22px boxes, rows >= 40px */
html body.mobile :is(.riki-rarities, .pet-picker-win) input[type=checkbox] { appearance: none !important; -webkit-appearance: none !important; width: 22px !important; height: 22px !important; margin: 0 !important; flex: none; border: 1px solid #8a6a3e; background: #0e0b08; display: inline-grid; place-items: center; }
html body.mobile :is(.riki-rarities, .pet-picker-win) input[type=checkbox]:checked { background: #c9a35c; box-shadow: inset 0 0 0 3px #0e0b08; }
html body.mobile .pet-picker-win :is(.pet-filter-row, label) { min-height: 40px !important; display: flex !important; align-items: center !important; gap: 10px !important; }
html body.mobile .pet-picker-win summary { min-height: 40px !important; display: flex !important; align-items: center; }
html body.mobile .riki-stash-win .riki-rarities label { height: 40px !important; }
html body.mobile .riki-stash-win .pet-exclusions { margin-top: 164px !important; }
/* menu: native volume slider with gold accent; hero sizes to content */
html body.mobile #windows #win-menu .camp-vol { appearance: auto !important; -webkit-appearance: auto !important; accent-color: #c9a35c !important; background: none !important; }
html body.mobile #windows #win-menu .camp-hero { height: auto !important; overflow: visible !important; }
/* 10px floor leftovers */
html body.mobile :is(.shop-slot span.pl, .shop-slot .pl, .arena-report-head span) { font-size: 10px !important; }
/* smelter at half width: no vertical stacking */
html body.mobile #windows .smelt-tbl :is(.st-out small, .st-have) { white-space: nowrap !important; }
html body.mobile #windows > .win:not(:only-child) .smelt-tbl { grid-template-columns: minmax(0, 1fr) auto 44px 52px !important; }
html body.mobile #windows > .win:not(:only-child) .smelt-tbl .st-out small { display: none; }
/* character rail fits 7 tabs on 375px-tall phones */
@media (max-height: 380px) { html body.mobile #windows #win-char .character-nav > .inv-tab { min-height: 42px !important; } html body.mobile #windows #win-char .character-nav { gap: 2px !important; padding: 4px 6px !important; } }
/* reborn mystic: footnote after the content; disabled Reborn still reads as a button */
html body.mobile #windows .reborn-go + p.muted { order: 0 !important; }
html body.mobile #windows .reborn-go:disabled { opacity: 1 !important; filter: saturate(.2) brightness(.8); border: 1px dashed #8a6a3e !important; }
/* smith: actions sit right under the piece info */
html body.mobile #windows .smith-station .smith-preview { flex: 0 0 auto !important; grid-template-rows: auto auto !important; }
html body.mobile #windows .smith-station .smith-actions { position: static !important; margin: 4px 0 0 !important; background: none !important; }
/* empty states vertically centred */
html body.mobile #windows #win-quests .quest-list:has(> p.muted:first-child) { display: flex !important; flex-direction: column; justify-content: center; height: 100%; }
/* premium: the price lives on the Buy button; no Silver sell price in the description */
html body.mobile #windows #win-premium .pd-price, html body.mobile #windows #win-premium .tip-price { display: none !important; }
/* cook lab fits 390px: tighter rhythm */
html body.mobile #windows .cook-win .ck-lab { gap: 5px !important; padding-top: 8px !important; }
html body.mobile #windows .cook-win .ck-lab .ck-hint { padding: 5px 10px !important; min-height: 0 !important; font-size: var(--pk-fs) !important; }
html body.mobile #windows .cook-win .ck-lab .ck-note { padding: 5px 10px !important; font-size: var(--pk-fs) !important; }
html body.mobile #windows .cook-win .ck-lab > p.muted { display: none !important; }

/* ==========================================================================================
   ROUND 6 — fifth review fixes
   ========================================================================================== */
/* skills header: one row, never wraps under the detail */
html body.mobile #windows #win-skills .sk-util { flex-wrap: nowrap !important; overflow: hidden; }
html body.mobile #windows #win-skills .sk-util-btn { flex: 0 0 auto !important; }
html body.mobile #windows #win-skills .sk-ults { min-width: 96px; flex-shrink: 0; overflow: hidden; }
@media (max-width: 700px) { html body.mobile #windows #win-skills .sk-ults { display: none !important; } html body.mobile #windows #win-skills > .win-body { grid-template-columns: var(--pk-rail) minmax(0, 1fr) 0 auto !important; } }
/* skill tree labels readable over connector lines */
html body.mobile #windows #win-skills .sk-node b { background: rgba(10, 14, 12, .9); padding: 1px 4px; border-radius: 3px; position: relative; z-index: 1; }
/* mail compose keeps its own X; "Close all" not on this card */
html body.mobile #windows #win-mailCompose #win-closeall { display: none !important; }
html body.mobile #windows #win-mailCompose .win-title .x { display: grid !important; }
/* clan members: one column on narrow phones */
@media (max-width: 700px) { html body.mobile #windows #win-guild .fr-section { grid-template-columns: 1fr !important; } }
html body.mobile #windows #win-guild .fr-row .fr-nm { min-width: 80px !important; }
/* menu: left column rows size to content; very short phones scroll the menu */
html body.mobile #windows #win-menu > .win-body.camp-menu { grid-template-rows: max-content max-content max-content max-content 1fr !important; }
html body.mobile #windows #win-menu .camp-hero { min-height: 68px !important; }
html body.mobile #windows #win-menu .camp-portrait { max-height: 52px; overflow: hidden; }
html body.mobile #windows #win-menu .camp-langs { grid-template-columns: 1fr 1fr !important; }
html body.mobile #windows #win-menu .camp-chip { padding: 0 6px !important; }
/* inventory beside another window: filters get their own full row */
html body.mobile #windows > #win-inv:not(:only-child) > .win-body { grid-template-rows: auto auto auto minmax(0, 1fr) !important; }
html body.mobile #windows > #win-inv:not(:only-child) .inv-filters { grid-column: 1 / -1 !important; grid-row: 2 !important; margin-right: 8px !important; }
html body.mobile #windows > #win-inv:not(:only-child) .inv-search-row { grid-column: 1 / -1 !important; grid-row: 3 !important; }
html body.mobile #windows > #win-inv:not(:only-child) > .win-body > .inv-grid { grid-row: 4 !important; }
/* smelter "Lots" header */
html body.mobile #windows .smelt-tbl { grid-template-columns: minmax(0, 1fr) minmax(120px, 30%) 64px 52px !important; }
html body.mobile #windows .smelt-tbl .st-h { white-space: nowrap !important; letter-spacing: .04em !important; padding: 0 4px !important; overflow: visible !important; }
/* atlas info toggle */
html body.mobile .fullmap-overlay .atlas-info-toggle { height: 40px !important; min-height: 40px !important; }
/* one slider colour */
html body.mobile #windows .graphics-remake input[type=range] { accent-color: #c9a35c !important; }
html body.mobile #windows .graphics-remake .graphics-section select { flex-basis: min(250px, 52%) !important; width: min(250px, 52%) !important; }
html body.mobile #windows .graphics-remake .graphics-section-title, html body.mobile #windows .graphics-remake .graphics-section > div:first-child { font-size: var(--pk-fs-xs) !important; }

/* ==========================================================================================
   ROUND 7 — sixth review fixes
   ========================================================================================== */
/* season: the totals summary replaces the quests in the left column; the track keeps its height */
html body.mobile #windows #win-rewards.bp-win .rewards-content > .bp-summary { grid-column: 1 !important; grid-row: 2 !important; min-height: 0; overflow-y: auto !important; margin: 0 !important; padding: 6px 8px !important; border-right: 1px solid var(--pk-line); }
html body.mobile #windows #win-rewards.bp-win .rewards-content > .bp-summary ~ .bp-quests { display: none !important; }
html body.mobile #windows #win-rewards.bp-win .bp-summary .bp-sum-cols { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
html body.mobile #windows #win-rewards.bp-win .bp-summary * { font-size: var(--pk-fs-sm); }
/* NPC shelf: rows size to their cards, the grid scrolls */
html body.mobile #windows .sv-grid { grid-auto-rows: minmax(110px, auto) !important; grid-template-rows: none !important; }
html body.mobile #windows .sv-item .sv-slot { flex: none !important; height: 44px !important; }
/* skills tree column wide enough for the tree at 667 */
html body.mobile #windows #win-skills .journal-layout { grid-template-columns: minmax(250px, 38%) minmax(0, 1fr) !important; }
html body.mobile #windows #win-skills .journal-detail .bind-btn { left: calc(max(250px, 38%) + 10px) !important; }
/* native selects: 16px (no iOS zoom), 40px */
html body.mobile select { font-size: 16px !important; min-height: 40px !important; }
/* small targets */
html body.mobile #windows .graphics-remake button.small, html body.mobile #windows #win-premium .premium-cosmetic-type, html body.mobile .pet-picker-win .pf-size-btn { min-height: 40px !important; height: 40px !important; min-width: 40px !important; }
/* secondary rails geometry = standard rail */
html body.mobile #windows .npc-fn-win .craft-tabs .sv-tab { height: auto !important; min-height: 50px !important; width: 100% !important; }
html body.mobile :is(.shop-win .shop-tabs, .achievement-win .achievement-categories, .pet-picker-win .pet-tabs) { margin: 0 !important; padding: 6px !important; left: 0 !important; width: var(--pk-rail) !important; box-sizing: border-box !important; }
html body.mobile :is(.shop-win .shop-tabs .inv-tab, .achievement-win .achievement-categories .rpg-btn, .pet-picker-win .pet-tabs > button) { min-height: 50px !important; width: 100% !important; }
/* premium cosmetics: groups and types as single scrolling chip strips */
html body.mobile #windows #win-premium :is(.premium-cosmetic-groups, .premium-cosmetic-types) { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; overflow-x: auto !important; margin: 0 0 6px !important; padding: 0 !important; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
html body.mobile #windows #win-premium :is(.premium-cosmetic-group, .premium-cosmetic-type) { flex: 0 0 auto !important; width: auto !important; height: 40px !important; min-height: 40px !important; padding: 0 12px !important; white-space: nowrap !important; font-size: var(--pk-fs-xs) !important; }
html body.mobile #windows #win-premium .premium-cosmetic-group :is(small, p, .pcg-desc) { display: none !important; }
html body.mobile #windows #win-premium .premium-catalog > :is(header, .premium-cosmetic-head) { margin: 0 0 6px !important; padding: 0 !important; min-height: 0 !important; }
/* reborn choice: benefits scroll inside the card (with fade), note + CTA fixed at the card bottom */
html body.mobile .reborn-choice-modal .rb-path { overflow: hidden !important; }
html body.mobile .reborn-choice-modal .rb-benefits { flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); padding-bottom: 10px !important; }
html body.mobile .reborn-choice-modal .rb-max-note { flex: 0 0 auto !important; }
html body.mobile #reborn-path-modal .rb-choice .btn-accept, html body.mobile .reborn-choice-modal .rb-path > .rpg-btn { position: static !important; flex: 0 0 44px !important; }
/* smith: actions pinned at the pane bottom; "Other item" hidden while the picker is beside it */
html body.mobile #windows .smith-station .smith-work { flex: 1 0 auto !important; }
html body.mobile #windows .smith-station .smith-preview { flex: 1 0 auto !important; grid-template-rows: minmax(0, 1fr) auto !important; }
html body.mobile #windows:has(> #win-smithinv) .smith-back { display: none !important; }
html body.mobile #windows:has(> #win-smithinv) .smith-station .smith-actions { grid-template-columns: 1fr !important; }
/* inventory filters keep the right gutter in split */
html body.mobile #windows > #win-inv:not(:only-child) .inv-filters { width: auto !important; margin-right: 8px !important; }
/* polish */
html body.mobile #windows #win-menu .camp-quick { grid-template-columns: 1fr !important; }
html body.mobile #windows #win-menu .camp-session { display: grid !important; grid-template-columns: 1fr 1fr; }
html body.mobile #windows #win-menu .camp-sbtn.danger { grid-column: 1 / -1; }
html body.mobile #windows #win-bank > .win-body:has(.bank-grid) { overflow: hidden !important; }
html body.mobile #windows #win-bank .bank-grid { flex: 1 1 0; min-height: 0; overflow-y: auto !important; }
html body.mobile #windows .reborn-go + p.muted { order: -1 !important; }
html body.mobile .riki-stash-win .pet-exclusions { margin-top: 172px !important; }
html body.mobile #windows #win-guild .guild-motd { min-height: 48px !important; align-items: center; }
html body.mobile #windows .mail-win .mail-list:has(.mail-empty) ~ .mail-read .mail-empty { visibility: hidden; }
html body.mobile #windows .graphics-remake .graphics-section select { height: 40px !important; }
html body.mobile #windows #win-wiki .wiki-tab { min-height: 54px !important; }
html body.mobile #windows #win-rewards.bp-win .rewards-content > .bp-summary { align-self: stretch !important; height: auto !important; max-height: 100% !important; box-sizing: border-box; }

/* ==========================================================================================
   ROUND 8 — seventh review fixes
   ========================================================================================== */
/* bank items grid: rows keep the slot size (regression from the scroll change) */
html body.mobile #windows #win-bank .bank-grid { grid-auto-rows: max-content !important; grid-template-rows: none !important; align-content: start !important; }
html body.mobile #windows #win-bank .bank-slot { min-height: 52px !important; height: auto !important; aspect-ratio: 1; }
/* premium: section kicker repeats the rail label */
html body.mobile #windows #win-premium .psh-kicker { display: none !important; }
html body.mobile #windows #win-premium .premium-catalog > :first-child:is(.premium-section-head, header, div:has(> b)) { margin-bottom: 4px !important; }
/* exchange (Bursă) amount controls */
html body.mobile #windows #win-premium :is(.mk-step, .mk-quick) { min-width: 44px !important; min-height: 40px !important; height: 40px !important; padding: 0 8px !important; }
html body.mobile #windows #win-premium .mk-input { height: 40px !important; min-height: 40px !important; font-size: 16px !important; }
html body.mobile #windows #win-premium .mk-foot .rpg-btn, html body.mobile #windows #win-premium .mk-foot button { min-width: 140px !important; min-height: 44px !important; }
/* menu fits: languages one row, session buttons one row */
html body.mobile #windows #win-menu .camp-langs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html body.mobile #windows #win-menu .camp-chip { padding: 0 2px !important; font-size: 10px !important; letter-spacing: 0 !important; }
html body.mobile #windows #win-menu .camp-session { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html body.mobile #windows #win-menu .camp-sbtn.danger { grid-column: auto !important; }
html body.mobile #windows #win-menu .camp-sbtn { padding: 0 4px !important; white-space: normal !important; line-height: 1.1 !important; gap: 4px !important; }
html body.mobile #windows #win-menu .camp-sbtn img { flex: none; }
html body.mobile #windows #win-menu .camp-quick { padding: 4px !important; gap: 4px !important; }
/* one rail tab size everywhere: 44px; every rail container x0–92 with a 6px inset */
html body.mobile #windows :is(.ck-tab, .guild-tab, .sk-filter, .mail-tab, .premium-nav-btn, .settings-tab, .lb-tab, .character-nav > .inv-tab, .shop-tabs > .inv-tab, .win-body > .inv-tabs:first-child > *, .craft-tabs .sv-tab),
html body.mobile :is(.shop-win .shop-tabs .inv-tab, .achievement-win .achievement-categories .rpg-btn, .pet-picker-win .pet-tabs > button) { min-height: 44px !important; height: auto !important; }
html body.mobile #windows #win-guild .guild-tab { height: 44px !important; min-height: 44px !important; }
html body.mobile #windows .graphics-remake .settings-tab { min-height: 44px !important; }
html body.mobile #windows #win-premium .premium-nav-btn { min-height: 44px !important; }
html body.mobile #windows .craft-tabs { padding: 6px !important; -webkit-mask-image: none !important; mask-image: none !important; }
html body.mobile .rpg-confirm-overlay > .win:is(.shop-win, .achievement-win, .pet-picker-win):not(.rpg-confirm-box) > .win-body { padding: 0 !important; }
/* empty mailbox: one centred empty state across the content */
html body.mobile #windows .mail-win .social-content:has(.mail-list .mail-empty) { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "tabs" "pag" "list" !important; }
html body.mobile #windows .mail-win .social-content:has(.mail-list .mail-empty) .mail-read { display: none !important; }
html body.mobile #windows .mail-win .social-content:has(.mail-list .mail-empty) :is(.mail-tabs, .mail-pagination, .mail-list) { border-right: 0 !important; }
html body.mobile #windows .mail-win .mail-list:has(.mail-empty) { display: grid; place-items: center; }
html body.mobile #windows .mail-win .social-content:has(.mail-list .mail-empty) .mail-tabs { max-width: 420px; }
/* quests empty state card */
html body.mobile #windows #win-quests .q-empty { margin: 48px auto 0 !important; text-align: center; }
/* reborn mystic: CTA inset like the other pinned buttons, note right above it */
html body.mobile #windows .reborn-go { margin: auto 0 8px !important; width: 100% !important; min-height: 44px !important; border-radius: 0 !important; box-shadow: none !important; order: 2 !important; }
html body.mobile #windows .reborn-go + p.muted { order: 1 !important; }
/* riki: the empty drop box already explains it on phones */
html body.mobile .riki-stash-win .pet-exclusions > p { display: none !important; }
html body.mobile .riki-stash-win .pet-exclusions { margin-top: 160px !important; }
/* smith picker head */
html body.mobile #windows #win-smithinv .smith-picker-head { height: 32px !important; padding: 0 10px !important; display: flex !important; align-items: center !important; }
html body.mobile #windows #win-menu .camp-chip { letter-spacing: -.02em !important; gap: 2px !important; }
html body.mobile #windows #win-premium .premium-catalog > :first-child:has(> b) b { font-size: var(--pk-fs-md) !important; }
html body.mobile .riki-stash-win div.riki-stash-slot { font-size: 10px !important; color: transparent !important; }
html body.mobile .riki-stash-win .pet-exclusions { margin-top: 172px !important; }

/* ==========================================================================================
   ROUND 9 — eighth review fixes
   ========================================================================================== */
/* item/info sheets always above overlay windows (achievements, inspect, stalls…) */
html body.mobile #mob-sheet { z-index: 9500 !important; }
/* season: the "claimed tiers" strip is reachable (snaps right after the sticky label column) */
html body.mobile #windows #win-rewards.bp-win .bp-collapse { scroll-snap-align: start; }
html body.mobile #windows #win-rewards.bp-win .bp-summary .bp-sum-h { min-height: 24px !important; display: flex !important; align-items: center; margin: 0 0 4px !important; }
/* reborn path cards: compact header + benefit lines so 4 benefits fit without scrolling */
html body.mobile .reborn-choice-modal .rb-path-h { min-height: 0 !important; height: auto !important; gap: 8px !important; }
html body.mobile .reborn-choice-modal .rb-path-h > span:not(.rb-choice-sigil) small, html body.mobile .reborn-choice-modal .rb-path-h p { font-size: var(--pk-fs-xs) !important; margin: 0 !important; }
html body.mobile .reborn-choice-modal .rb-choice-sigil { width: 28px !important; height: 28px !important; }
html body.mobile .reborn-choice-modal .rb-line { padding: 3px 8px !important; font-size: var(--pk-fs-sm) !important; line-height: 1.3 !important; min-height: 0 !important; }
html body.mobile .reborn-choice-modal .rb-benefits { gap: 3px !important; }
html body.mobile .reborn-choice-modal .rb-path { gap: 5px !important; padding: 6px 10px !important; }
html body.mobile .reborn-choice-modal .rb-choice-intro small { display: none !important; }
/* cook rail: badge never on the label */
html body.mobile #windows .cook-win .ck-tab:has(.ck-badge) { padding-top: 14px !important; }
/* character master–detail: tighter rhythm so the reward rows are visible at rest */
html body.mobile #windows #win-char .ct-detail { gap: 4px !important; padding-bottom: 8px !important; }
html body.mobile #windows #win-char .ct-detail .ct-kicker { margin: 4px 0 0 !important; }
html body.mobile #windows #win-char .ct-rewards { margin: 0 !important; }
html body.mobile #windows #win-char .ct-rewards > * { min-height: 0 !important; padding: 3px 6px !important; }
html body.mobile #windows #win-char .ct-cosmetic-preview { padding: 4px !important; }
html body.mobile #windows #win-char .ct-cosmetic-preview .cos-fig { width: 96px !important; height: 96px !important; }
html body.mobile #windows #win-char .char-tab-content > div:not([class]):has(+ div:not([class])) { display: none !important; }
/* premium cosmetics: one preview (the zoomable one) */
html body.mobile #windows #win-premium .premium-detail:has(.cos-tip) .pd-showroom { display: none !important; }
/* smith picker head: count only, centred */
html body.mobile #windows #win-smithinv .smith-picker-head { font-size: 0 !important; }
html body.mobile #windows #win-smithinv .smith-picker-head small { font-size: var(--pk-fs-sm) !important; }
/* player stall rail flush like every other rail */
html body.mobile .rpg-confirm-overlay > .win.shop-win > .win-body.win-body { padding: 0 !important; }
/* rail heights: one size */
html body.mobile #windows #win-premium .premium-nav-btn, html body.mobile #windows .graphics-remake .settings-tab { height: 44px !important; min-height: 44px !important; overflow: hidden; }
html body.mobile #windows #win-wiki .wiki-tab { justify-content: flex-start !important; padding-top: 8px !important; line-height: 11px !important; }
/* settings section title is not a 46px row */
html body.mobile #windows .graphics-remake label.graphics-section-title { min-height: 0 !important; padding: 0 !important; margin: 0 0 4px !important; display: block !important; }
/* empty states: centred card with an ornament (quests, pet feeding, locked banquet) */
html body.mobile #windows #win-quests .q-empty::before { content: "📜"; display: block; font-size: 28px; margin-bottom: 8px; opacity: .8; }
html body.mobile .pet-picker-win .pet-feed-empty { margin: 32px auto !important; text-align: center; font-size: var(--pk-fs-md) !important; max-width: 360px; }
html body.mobile .pet-picker-win .pet-feed-empty::before { content: "🍖"; display: block; font-size: 28px; margin-bottom: 8px; opacity: .8; }
html body.mobile #windows .cook-win .ck-lab:has(> .ck-note:only-of-type):not(:has(.ck-pick)) { justify-content: center; align-items: center; text-align: center; }
/* caravan escort buttons even */
html body.mobile #windows #win-caravan .cv-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
html body.mobile #windows #win-caravan .cv-actions .rpg-btn { width: 100% !important; }
/* friend request buttons even */
html body.mobile #friend-request-popup .friend-request-actions { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; }
html body.mobile #windows #win-char .speed-icon { min-width: 40px; min-height: 40px; cursor: pointer; }

/* ==========================================================================================
   ROUND 10 — ninth review fixes
   ========================================================================================== */
/* clan rail: active tab marked like every other rail */
html body.mobile #windows #win-guild .guild-tab.active { border-color: var(--pk-gold2) !important; box-shadow: inset 3px 0 0 var(--pk-gold2) !important; color: var(--pk-gold) !important; background-image: var(--art-wood-selected, none) !important; }
/* menu session buttons: icon over label, labels never break mid-word */
html body.mobile #windows #win-menu .camp-sbtn { flex-direction: column !important; height: 48px !important; min-height: 48px !important; gap: 2px !important; justify-content: center !important; }
html body.mobile #windows #win-menu .camp-sbtn span { overflow-wrap: normal !important; word-break: keep-all !important; white-space: nowrap !important; font-size: 10px !important; letter-spacing: 0 !important; }
/* cook: locked banquet / empty market = centred card with ornament and explanation */
html body.mobile #windows .cook-win .ck-lab.ck-locked { justify-content: center !important; align-items: center !important; text-align: center !important; }
html body.mobile #windows .cook-win .ck-lab.ck-locked > p.muted { display: block !important; max-width: 420px; }
html body.mobile #windows .cook-win .ck-lab.ck-locked::before { content: "🔒"; font-size: 28px; opacity: .8; }
html body.mobile #windows .cook-win .ck-lab.ck-locked .ck-note { border: 0 !important; background: none !important; }
html body.mobile #windows .cook-win .ck-go:disabled { opacity: .5 !important; filter: saturate(.3); }
/* season totals: one column, every row tagged by its column header */
html body.mobile #windows #win-rewards.bp-win .bp-summary .bp-sum-cols { grid-template-columns: 1fr !important; }
/* caravan: game-styled radios/checkbox, start button pinned at the pane bottom */
html body.mobile #windows #win-caravan :is(input[type=radio], input[type=checkbox]) { appearance: none !important; -webkit-appearance: none !important; width: 22px !important; height: 22px !important; margin: 0 !important; flex: none; border: 1px solid #8a6a3e; background: #0e0b08; }
html body.mobile #windows #win-caravan input[type=radio] { border-radius: 50%; }
html body.mobile #windows #win-caravan :is(input[type=radio], input[type=checkbox]):checked { background: #c9a35c; box-shadow: inset 0 0 0 4px #0e0b08; }
html body.mobile #windows #win-caravan :is(.cv-journey-start, .cv-convoy) { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -8px 12px #0b1013 !important; }
/* sheets: info-only sheets use the full width; buy sheets drop the duplicate price line */
html body.mobile #mob-sheet .sheet-itemdetail:not(:has(.mob-sheet-acts)) { grid-template-columns: minmax(0, 1fr) !important; }
html body.mobile #mob-sheet .sheet-buy .mob-sheet-body .price { display: none !important; }
/* character reborn: open/closed caret */
html body.mobile #windows #win-char details[open] .rb-expand-hint { display: inline-block; transform: rotate(180deg); }
/* inspect: readable empty slots, labelled achievements row */
html body.mobile .inspect-box .inspect-empty { color: #9a8c78 !important; }
/* duplicates */
html body.mobile #windows .sv-detail:has(.sv-dstats) .sv-dmeta { display: none !important; }
html body.mobile #windows #win-bank .bh-total { display: none !important; }
html body.mobile #windows #win-premium .pd-desc > b:first-child { display: none !important; }
/* small layout */
html body.mobile .arena-result-content { -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent); mask-image: linear-gradient(180deg, #000 85%, transparent); padding-bottom: 16px !important; }
html body.mobile #portal-info:not(.hidden) { width: min(440px, 54vw) !important; }
html body.mobile .riki-stash-win .riki-rarities { display: grid !important; grid-template-columns: 1fr 1fr; }
html body.mobile .riki-stash-win .riki-rarities legend { grid-column: 1 / -1; }
html body.mobile #hud-buffs :is(.xp-boost, .buff-xp, .hud-xpboost, [class*=xp]) { white-space: nowrap !important; }
html body.mobile .fullmap-overlay .fullmap-head .x { width: 44px !important; height: 44px !important; }

/* ==========================================================================================
   ROUND 11 — tenth review fixes
   ========================================================================================== */
html body.mobile #windows #win-menu .camp-sbtn span { white-space: normal !important; word-break: keep-all !important; overflow-wrap: normal !important; text-align: center; line-height: 1.1 !important; }
html body.mobile #windows #win-menu .camp-sbtn { height: auto !important; min-height: 48px !important; padding: 4px 3px !important; }
html body.mobile #windows .graphics-remake .graphics-section input[type=range] { width: 100% !important; display: block; margin: 2px 0 4px !important; }
html body.mobile #windows #win-premium .premium-layout:has(.premium-cosmetic-groups) .pshop-card :is(.pc-art, .pc-scene, .pc-showroom, img.pc-img) { height: 92px !important; max-height: 92px !important; }
html body.mobile #windows #win-premium .premium-layout:has(.premium-cosmetic-groups) .pshop-card { min-height: 0 !important; height: auto !important; }
html body.mobile #windows #win-premium .premium-detail:has(.cos-tip) .cos-tip > :is(b, .cos-name):first-child { display: none !important; }
html body.mobile #xp-boost-badge { white-space: nowrap !important; width: auto !important; }
html body.mobile #windows .dj-rw { text-wrap: balance; }
html body.mobile #windows :is(.premium-nav-btn, .settings-tab b) { letter-spacing: -.04em !important; }
html body.mobile #windows #win-guild .guild-tab-body > p.muted:only-child, html body.mobile #windows #win-guild .guild-tab-body > .muted:only-child { margin: 48px auto 0 !important; text-align: center; max-width: 420px; font-size: var(--pk-fs-md) !important; }
html body.mobile #windows #win-guild .guild-tab-body > .muted:only-child::before { content: "🛡"; display: block; font-size: 28px; margin-bottom: 8px; opacity: .8; }
html body.mobile #windows #win-guild :is(.danger, .btn-danger) { max-width: none !important; width: 100% !important; margin-left: 0 !important; }
html body.mobile #windows .cook-win .ck-lab.ck-empty::before { content: "🍽"; }
html body.mobile .pet-picker-win .pet-exclude-slot, html body.mobile .riki-stash-win .pet-exclude-slot { position: relative; }
html body.mobile :is(.pet-picker-win, .riki-stash-win) .pet-exclude-slot::after { content: "✕"; position: absolute; top: 1px; right: 3px; font-size: 10px; color: #ff9a8a; }
html body.mobile #mob-sheet .sheet-itemdetail .mob-sheet-body > b:first-child { display: none !important; }
html body.mobile #portal-info .pi-enter { text-transform: uppercase !important; letter-spacing: .06em; }
html body.mobile #windows #win-premium .cosmetics-view .premium-section-head { display: none !important; }
html body.mobile #windows #win-premium .cosmetics-view .pc-showroom { height: 80px !important; }
html body.mobile #windows #win-premium .cosmetics-view .pshop-card { padding-top: 4px !important; padding-bottom: 4px !important; }

/* ---------------------------------------------------------------- Season pass: every tier is a framed card (no collapsed claimed strip, no stray gem badges) */
html body.mobile #windows #win-rewards.bp-win .bp-cell:not(.ready) { background: rgba(0,0,0,.3) !important; border: 1px solid #6b5a38 !important; border-radius: 4px; box-shadow: none !important; }
html body.mobile #windows #win-rewards.bp-win .bp-cell.claimed > * { opacity: .55; }
html body.mobile #windows #win-rewards.bp-win .bp-cell > .reward-ui-icon { display: none !important; }

/* ---------------------------------------------------------------- Login (phone)
   quick step: title + saved accounts + server | "Intră cu contul" · Cont nou · Discord · Google
   form step:  title + back + server          | Cont · Parola · Salvează · Intră
   typing:     only Cont | Parola | Intră, pinned to the top edge so the keyboard never covers them. */
#btn-auth-form, #btn-auth-back { display: none; }
html body.mobile #screen-auth .launcher-download-section { display: none !important; }
/* "Ascunde panoul": small button top-right; hiding the panel reveals the scene and the top guild banner */
html body.mobile #screen-auth #login-panel-toggle { position: fixed !important; top: calc(10px + env(safe-area-inset-top, 0px)) !important; right: calc(10px + env(safe-area-inset-right, 0px)) !important; left: auto !important; bottom: auto !important; z-index: 60 !important; min-height: 40px !important; padding: 0 14px !important; font-size: 12px !important; }
html body.mobile #screen-auth:not(.auth-scene-only) #login-guild-banner { display: none !important; }
html body.mobile #screen-auth.auth-scene-only #login-auth-panel { display: none !important; }
html body.mobile.auth-typing #screen-auth #login-panel-toggle { display: none !important; }
html body.mobile #screen-auth #login-auth-panel {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: 48px 44px 44px 44px !important; grid-auto-rows: auto !important;
  column-gap: 18px !important; row-gap: 8px !important; width: min(100%, 720px) !important; max-width: 100% !important; height: auto !important; max-height: 100% !important;
  padding: 16px 18px !important; margin: auto !important; box-sizing: border-box; position: relative; overflow: visible !important;
}
html body.mobile #screen-auth #login-auth-panel > *, html body.mobile #screen-auth #auth-form > * { margin: 0 !important; min-width: 0; }
html body.mobile #screen-auth #login-auth-panel :is(input:not([type=checkbox]):not([type=range]), select) { font-size: 16px !important; height: 44px !important; min-height: 44px !important; box-sizing: border-box; }
html body.mobile #screen-auth #login-auth-panel :is(button, #btn-discord, #btn-google) { min-height: 44px !important; height: 44px; box-sizing: border-box; font-size: 13px !important; }
/* left column */
html body.mobile #screen-auth #login-auth-panel > .game-title { grid-area: 1 / 1; align-self: center; font-size: 24px !important; line-height: 1.1 !important; text-align: left !important; }
html body.mobile #screen-auth #login-auth-panel > .subtitle { grid-area: 2 / 1 / 4 / 2; align-self: start; text-align: left !important; font-size: 12px !important; }
html body.mobile #screen-auth #login-auth-panel:has(#saved-accounts-section:not(.hidden)) > .subtitle { display: none !important; }
html body.mobile #screen-auth #saved-accounts-section { grid-area: 2 / 1 / 4 / 2; padding: 0 !important; border: 0 !important; min-height: 0; display: flex; flex-direction: column; }
html body.mobile #screen-auth #saved-accounts-section.hidden { display: none !important; }
html body.mobile #screen-auth #saved-accounts-section > .subtitle { margin: 0 0 4px !important; font-size: 11px !important; }
html body.mobile #screen-auth #saved-accounts-list { max-height: none !important; min-height: 0; flex: 1; overflow-y: auto; scrollbar-width: none; padding: 0 !important; gap: 6px !important; }
html body.mobile #screen-auth #saved-accounts-list::-webkit-scrollbar { display: none; }
html body.mobile #screen-auth .saved-account-row { display: flex; gap: 6px; flex-shrink: 0; }
html body.mobile #screen-auth .saved-account-btn { flex: 1; min-width: 0; text-align: left; padding: 0 12px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.mobile #screen-auth .saved-account-del { width: 44px; flex: 0 0 44px; padding: 0 !important; }
html body.mobile #screen-auth #channel-row { grid-area: 4 / 1; align-self: end; }
html body.mobile #screen-auth #channel-row > label { font-size: 11px !important; }
/* right column (quick step) */
html body.mobile #screen-auth #btn-auth-form { display: block; grid-area: 1 / 2; height: 48px !important; font-size: 15px !important; }
html body.mobile #screen-auth #login-auth-panel .auth-actions { grid-area: 2 / 2; display: flex !important; gap: 8px !important; }
html body.mobile #screen-auth #login-auth-panel .auth-actions > button { flex: 1; margin: 0 !important; }
html body.mobile #screen-auth #login-auth-panel:not(.auth-step-form) #btn-login,
html body.mobile #screen-auth #login-auth-panel:not(.auth-step-form) :is(#auth-user, #auth-pass, .auth-remember-row) { display: none !important; }
html body.mobile #screen-auth #btn-discord { grid-area: 3 / 2 !important; }
html body.mobile #screen-auth #btn-google { grid-area: 4 / 2 !important; }
html body.mobile #screen-auth #login-volume-ctrl { display: none !important; } /* sunetul se reglează din Setări în joc */
html body.mobile #screen-auth #btn-exit-game, html body.mobile #screen-auth #dev-editor-links { display: none !important; }
html body.mobile #screen-auth #auth-msg { grid-column: 1 / -1; font-size: 12px !important; min-height: 0; }
html body.mobile #screen-auth #auth-msg:empty { display: none; }
/* form step */
html body.mobile #screen-auth #login-auth-panel.auth-step-form :is(#btn-auth-form, #saved-accounts-section, .subtitle, .auth-divider, #btn-discord, #btn-google, #btn-register) { display: none !important; }
html body.mobile #screen-auth #login-auth-panel.auth-step-form #btn-auth-back { display: block; grid-area: 2 / 1; justify-self: start; width: auto; padding: 0 16px !important; }
html body.mobile #screen-auth #login-auth-panel.auth-step-form #auth-user { grid-area: 1 / 2; align-self: end; }
html body.mobile #screen-auth #login-auth-panel.auth-step-form #auth-pass { grid-area: 2 / 2; }
html body.mobile #screen-auth #login-auth-panel.auth-step-form .auth-remember-row { grid-area: 3 / 2; display: flex !important; align-items: center; min-height: 44px; font-size: 12px !important; }
html body.mobile #screen-auth #login-auth-panel.auth-step-form .auth-actions { grid-area: 4 / 2; }
html body.mobile #screen-auth #login-auth-panel.auth-step-form #btn-login { font-size: 15px !important; }
html body.mobile:not(.auth-typing) #screen-auth { padding: 72px calc(12px + env(safe-area-inset-right, 0px)) 10px calc(12px + env(safe-area-inset-left, 0px)) !important; align-items: flex-start !important; }
/* typing: a single bar on the top edge */
html body.mobile.auth-typing #screen-auth { align-items: flex-start !important; justify-content: stretch !important; padding: 0 !important; }
html body.mobile.auth-typing #screen-auth > :not(#login-auth-panel):not(.login-atmosphere), html body.mobile.auth-typing #login-language-tabs { display: none !important; }
html body.mobile.auth-typing #screen-auth #login-auth-panel {
  position: fixed !important; top: var(--auth-vv-top, 0px) !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; z-index: 50;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px !important; grid-template-rows: 44px !important; grid-auto-rows: auto !important; row-gap: 6px !important; column-gap: 8px !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) 8px calc(10px + env(safe-area-inset-left, 0px)) !important; border-radius: 0 !important;
}
html body.mobile.auth-typing #screen-auth #login-auth-panel > :not(#auth-form):not(#auth-msg), html body.mobile.auth-typing #screen-auth #auth-form > :not(#auth-user):not(#auth-pass):not(.auth-actions) { display: none !important; }
html body.mobile.auth-typing #screen-auth #login-auth-panel #auth-user { display: block !important; grid-area: 1 / 1; }
html body.mobile.auth-typing #screen-auth #login-auth-panel #auth-pass { display: block !important; grid-area: 1 / 2; }
html body.mobile.auth-typing #screen-auth #login-auth-panel .auth-actions { display: flex !important; grid-area: 1 / 3; }
html body.mobile.auth-typing #screen-auth #login-auth-panel #btn-login { display: block !important; height: 44px !important; }
html body.mobile.auth-typing #screen-auth #login-auth-panel #btn-register { display: none !important; }
html body.mobile.auth-typing #screen-auth #auth-msg { grid-area: 2 / 1 / 3 / 4; }

/* ---------------------------------------------------------------- Premium: quantity stepper pinned with Buy (it used to scroll under the button) */
html body.mobile #windows #win-premium .premium-detail:has(.pd-qty) { margin-bottom: 108px !important; }
html body.mobile #windows #win-premium .pd-qty {
  position: absolute !important; right: 8px !important; bottom: 56px !important; left: auto !important; width: calc(var(--pk-side) - 16px) !important; height: 44px !important; margin: 0 !important;
  display: grid !important; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 6px; box-sizing: border-box;
}
html body.mobile #windows #win-premium .pd-qty > button { width: 52px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important; font-size: 24px !important; line-height: 1 !important; }
html body.mobile #windows #win-premium .pd-qty > b { text-align: center; font-size: 17px !important; }

/* Atlas: the page must not steal one-finger drag / two-finger pinch from the map */
html body.mobile .fullmap-overlay .atlas-map-viewport { touch-action: none !important; overscroll-behavior: contain; }

/* ---------------------------------------------------------------- Chat (phone)
   closed: small HUD box, tap it to open.
   open:   input bar pinned to the TOP edge + channel chips + full history down to the keyboard (--chat-vvh). */
html body.mobile #chat { pointer-events: auto !important; }
html body.mobile.chat-open #mob-chat-bar {
  top: 0 !important; bottom: auto !important; z-index: 9600 !important; height: auto; box-sizing: border-box; gap: 6px !important;
  padding: calc(6px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) 6px calc(8px + env(safe-area-inset-left, 0px)) !important;
  background: var(--pk-ink, #0b1013) !important; border-top: 0 !important; border-bottom: 1px solid var(--pk-line, #3a3324) !important;
}
html body.mobile.chat-open #mob-chat-input { height: 44px !important; }
html body.mobile.chat-open :is(#mob-chat-send, #mob-chat-close) { width: 48px !important; height: 44px !important; }
html body.mobile.chat-open #chat {
  position: fixed !important; z-index: 9590 !important; top: calc(57px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important;
  left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important;
  height: calc(var(--chat-vvh, 100dvh) - 57px - env(safe-area-inset-top, 0px)) !important; min-height: 90px;
  display: flex !important; flex-direction: column; gap: 6px; box-sizing: border-box; margin: 0 !important; border-radius: 0 !important; border: 0 !important;
  padding: 6px calc(8px + env(safe-area-inset-right, 0px)) 6px calc(8px + env(safe-area-inset-left, 0px)) !important;
  background: rgba(11,16,19,.96) !important; box-shadow: 0 8px 18px #0009 !important;
}
html body.mobile.chat-open #chat::before, html body.mobile.chat-open #chat-head { display: none !important; }
html body.mobile.chat-open #chat-filters {
  display: flex !important; flex: 0 0 auto; gap: 6px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 1 !important; pointer-events: auto !important;
  overflow-x: auto; scrollbar-width: none;
}
html body.mobile.chat-open #chat-filters::-webkit-scrollbar { display: none; }
html body.mobile.chat-open #chat-filters .chat-filter { flex: 0 0 auto; min-height: 36px !important; height: 36px; padding: 0 14px !important; font-size: 12px !important; white-space: nowrap; }
html body.mobile.chat-open #chat-lines {
  flex: 1 1 auto; min-height: 0; max-height: none !important; opacity: 1 !important; overflow-y: auto !important; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y;
  font-size: 13px !important; line-height: 1.35; gap: 3px !important;
}
html body.mobile.chat-open #chat-lines::-webkit-scrollbar { display: none; }
html body.mobile.chat-open #chat-lines > div { opacity: 1 !important; padding: 3px 6px !important; }

/* ---------------------------------------------------------------- HUD top (phone): FPS lives in the bottom status strip, target + player panel hug the top edge */
html body.mobile #hud-ping #fps-meter { position: static !important; transform: none !important; translate: none !important; margin: 0 6px 0 0 !important; padding: 1px 5px !important; font-size: 10px !important; z-index: auto !important; }
html body.mobile #hud #hud-top, html body.mobile #hud:has(#fps-meter:not(.hidden)) #hud-top { top: calc(2px + env(safe-area-inset-top, 0px)) !important; }
html body.mobile #hud #hud-target, html body.mobile #hud:has(#fps-meter:not(.hidden)) #hud-target { top: calc(2px + env(safe-area-inset-top, 0px)) !important; scale: .85; transform-origin: top center; }
/* skill / attack buttons: player-chosen transparency (Setări → Controale); fully opaque while pressed */
html body.mobile #mobile-host .act-cluster .act-btn { opacity: var(--mob-btn-alpha, .65); transition: opacity .12s; }
html body.mobile #mobile-host .act-cluster .act-btn:active, html body.mobile #mobile-host .act-cluster .act-btn.pressed { opacity: 1; }
html body.mobile #windows .mobile-btn-alpha { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: var(--pk-fs, 12px); }
html body.mobile #windows .mobile-btn-alpha input[type=range] { width: 100%; height: 32px; accent-color: #c9a35c; }
html body.mobile #hud-ping:has(#fps-meter:not(.hidden)) { width: auto !important; max-width: none !important; }

/* layout editor: a column docked on the LEFT edge, so it never sits on the action buttons (they live on the right) */
html body.mobile .mob-edit-banner {
  position: fixed !important; left: calc(6px + env(safe-area-inset-left, 0px)) !important; right: auto !important; transform: none !important; translate: none !important;
  top: calc(var(--mobile-ui-top, 0px) + 6px) !important; bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  width: 220px !important; max-width: 220px !important; height: auto !important; max-height: none !important; box-sizing: border-box;
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-content: flex-start !important; align-items: center !important; justify-content: flex-start !important; gap: 4px 6px !important;
  padding: 8px 10px !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: none; white-space: normal !important; font-size: 11px !important; line-height: 1.3;
}
html body.mobile .mob-edit-banner.hidden { display: none !important; } /* panoul apare DOAR in modul de aranjare */
html body.mobile .mob-edit-banner > * { flex: 1 0 100%; white-space: normal !important; }
html body.mobile .mob-edit-banner input[type=range] { width: 100% !important; min-width: 0; height: 26px; }
html body.mobile .mob-edit-banner select { width: 100% !important; height: 36px !important; font-size: 13px !important; }
html body.mobile .mob-edit-banner .ml { margin: 2px 0 0 !important; color: #c9b07a; }
html body.mobile .mob-edit-banner :is(.save, .reset, .export, .done) { flex: 1 0 calc(50% - 3px) !important; min-height: 40px !important; padding: 0 4px !important; justify-content: center; text-align: center; font-size: 12px !important; }
html body.mobile .mob-edit-banner .ml { flex: 1 0 100%; }
html body.mobile .mob-edit-banner input[type=range] { height: 22px !important; }

/* HUD Chat shortcut: same tile as Busolă (icon over label) */
html body.mobile .mob-chat-shortcut { width: 44px !important; height: 44px !important; flex-direction: column !important; padding: 2px !important; gap: 1px !important; background-image: var(--art-wood); }
html body.mobile .mob-chat-shortcut img { width: 24px !important; height: 24px !important; image-rendering: pixelated; pointer-events: none; }
html body.mobile .mob-chat-shortcut .mob-menu-lbl { display: block !important; }

/* ---------------------------------------------------------------- Tutorial layers (phone)
   item sheet = 9500, chat = 9600: the spotlight, its hint and the tutorial popups must sit above all of them. */
html body.mobile #tut-spot { z-index: 9800 !important; }
html body.mobile #tut-spot .ts-text { font-size: 13px !important; width: min(240px, calc(100vw - 24px)) !important; }
html body.mobile #tut-spot .ts-skip { min-height: 40px; }
html body.mobile #tut-hint {
  z-index: 9800 !important; top: calc(60px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important;
  max-width: min(70vw, 520px); box-sizing: border-box; padding: 8px 14px !important; font-size: 13px !important; text-align: center; white-space: normal;
}
html body.mobile :is(#npctut-modal, #tut-overlay, #quest-progress-popup, .fd-tut, #dv-tut-ov) { z-index: 9900 !important; }
/* character select (phone): the preview renders the hero small inside its frame; scale it up from the feet */
html body.mobile #screen-chars #char-showcase-model { overflow: visible !important; }
html body.mobile #screen-chars #char-showcase-model > canvas { transform: scale(1.6); transform-origin: 50% 85%; }

/* while typing at login: the scene fills whatever the browser scrolled into view (no black band above the keyboard) */
html body.mobile.auth-typing #screen-auth { position: fixed !important; inset: 0 !important; min-height: 100lvh; }

/* ---------------------------------------------------------------- Stations over the inventory (phone)
   Workbench, portable anvil / oven, campfire: a full-screen layer above whatever is open, never a squeezed split. */
html body.mobile #windows > .win.pk-over {
  position: absolute !important; inset: 0 !important; width: 100% !important; max-width: 100% !important; height: 100% !important; flex: none !important;
  z-index: 650 !important; transform: none !important; margin: 0 !important;
}
html body.mobile #windows > .win.pk-over.wbench-win:not(:only-child) { left: 0 !important; top: 0 !important; }
/* overlay windows are opaque: nothing of the window underneath shows through (smith-station frames are translucent) */
html body.mobile #windows > .win.pk-over { background-color: #0d1418 !important; }
/* craft tabs (Armură / Altele…) hide rows with inline display:none — the phone row grid must not override that */
html body.mobile #windows .craft-row[style*="display: none"] { display: none !important; }

/* ---------------------------------------------------------------- Boss TOP DAMAGE (phone): plain text column right of the HP/MP panel,
   names + percent only (no portraits, no box) so it never covers the character. */
html body.mobile #target-contributions {
  position: fixed !important; left: calc(192px + env(safe-area-inset-left, 0px)) !important; top: calc(4px + env(safe-area-inset-top, 0px)) !important;
  right: auto !important; bottom: auto !important; transform: none !important; width: 140px !important; max-width: 140px !important;
  padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; pointer-events: none; z-index: 41;
}
html body.mobile #target-contributions::before, html body.mobile #target-contributions::after { display: none !important; }
html body.mobile #target-contributions .boss-top-heading { border: 0 !important; padding: 0 0 2px !important; margin: 0 !important; font-size: 10px !important; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
html body.mobile #target-contributions .boss-top-heading small, html body.mobile #target-contributions .boss-top-row img, html body.mobile #target-contributions .boss-top-rank { display: none !important; }
html body.mobile #target-contributions .boss-top-row { grid-template-columns: minmax(0, 1fr) auto !important; min-height: 0 !important; gap: 6px !important; padding: 0 !important; background: none !important; font-size: 11px !important; line-height: 1.35 !important; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
html body.mobile #target-contributions .boss-top-row.is-self .boss-top-name { color: #ffe08a; }
html body.mobile #target-contributions .boss-top-empty { font-size: 10px !important; padding: 0 !important; text-shadow: 0 1px 2px #000; }
@media (max-width: 759px) {
  html body.mobile #target-contributions { left: calc(10px + env(safe-area-inset-left, 0px)) !important; top: calc(170px + env(safe-area-inset-top, 0px)) !important; }
  html body.mobile #target-contributions .boss-top-row:nth-child(n+5) { display: none !important; } /* top 3 only: room above the quest tracker */
}

/* ---------------------------------------------------------------- HUD notices off the character (phone)
   Plain text with a shadow at the screen edges instead of boxes in the upper middle. */
/* siege towers (guild tax war): text column under TOP DAUNE, right of the HP/MP panel */
html body.mobile #siege-bar {
  left: calc(192px + env(safe-area-inset-left, 0px)) !important; top: calc(100px + env(safe-area-inset-top, 0px)) !important; transform: none !important;
  min-width: 0 !important; width: 150px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  text-align: left !important; font-size: 11px !important; line-height: 1.3 !important; text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none;
}
html body.mobile #siege-bar > b { justify-content: flex-start !important; font-size: 11px !important; }
html body.mobile #siege-bar .siege-heading-icon { width: 16px !important; height: 16px !important; }
html body.mobile #siege-bar .sb-track { height: 4px !important; margin-top: 3px !important; }
/* boss cast warning: stays under the boss bar, but as bold text, not a wide box */
html body.mobile #boss-warn { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: 180px !important; max-width: 180px !important; text-align: center; text-shadow: 0 1px 2px #000, 0 0 6px #000, 0 0 10px #000; }
html body.mobile #boss-warn .bw-title { font-size: 12px !important; color: #ffd27a !important; }
html body.mobile #boss-warn .bw-action { font-size: 12px !important; color: #ff9a8a !important; font-weight: 700 !important; }
/* big centre notices (level up, events…): just under the top bar, compact */
html body.mobile #center-notices { top: calc(122px + env(safe-area-inset-top, 0px)) !important; transform: translateX(-50%) !important; max-width: 48vw; }
html body.mobile #center-notices .center-notice-item { padding: 6px 12px !important; font-size: 12px !important; }
/* quiz event banner: smaller, near the top */
html body.mobile #quiz-banner { top: calc(72px + env(safe-area-inset-top, 0px)) !important; width: min(440px, 56vw) !important; padding: 8px 12px !important; }
html body.mobile #quiz-banner .qz-q { font-size: 14px !important; margin: 4px 0 8px !important; }
html body.mobile #quiz-banner .qz-opt { padding: 6px !important; font-size: 13px !important; }
html body.mobile #quiz-banner .qz-verdict { padding: 6px !important; font-size: 18px !important; }
@media (max-width: 759px) {
  html body.mobile #siege-bar { left: 50% !important; transform: translateX(-50%) !important; top: calc(74px + env(safe-area-inset-top, 0px)) !important; text-align: center !important; width: 180px !important; }
  html body.mobile #siege-bar > b { justify-content: center !important; }
}

/* inspect (phone): wide card = identity (name, title, guild) on the LEFT, the character big on the RIGHT */
html body.mobile .inspect-box .inspect-fig { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; max-height: none !important; height: 100% !important; min-height: 200px; padding: 10px 14px !important; }
html body.mobile .inspect-box .inspect-identity { flex: 1 1 0 !important; min-width: 0; text-align: left !important; align-self: center; }
html body.mobile .inspect-box .inspect-identity * { text-align: left !important; justify-content: flex-start !important; margin-left: 0 !important; }
html body.mobile .inspect-box .inspect-model { flex: 0 0 46% !important; align-self: stretch !important; min-height: 180px !important; height: auto !important; overflow: visible !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; position: relative !important; }
html body.mobile .inspect-box .inspect-model > img { height: 100% !important; width: auto !important; max-height: 100% !important; }