/* V18 layout (UI-REDESIGN-V18 section 4). Loaded after layout-v15.css and owns the home composition:
   grid, hero size and feet line, side rails, mini ranking. No new !important. */
:root{--hud-h:104px;--card-w:100%;--feet-y:64%;--hero-h:min(40%,calc(100cqw*.9))}
@media (orientation:landscape){:root{--hud-h:72px;--card-w:min(38%,340px);--feet-y:80%;--hero-h:min(44%,330px)}}
@media (orientation:landscape) and (max-height:620px){:root{--card-w:250px}}
@media (orientation:landscape) and (max-height:520px){:root{--hud-h:58px}}

/* Home grid: HUD / empty / stage card. Landscape: the card sits in a right column. */
.j-world.home{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top" "." "start"}
@media (orientation:landscape){
  .j-world.home{grid-template-columns:minmax(0,1fr) var(--card-w);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top top" ". start";column-gap:18px}
}

/* Side rails and mini ranking hang from --hud-h instead of fixed pixel tops. */
.j-side{top:calc(var(--hud-h) + 24px)}
@media (orientation:landscape){
  .j-side-l{left:calc(var(--v15-rail) + 14px)}
}
@media (orientation:portrait){.j-mini-rank{top:calc(var(--hud-h) + 8px);bottom:auto;left:50%;transform:translateX(-50%)}}

/* Hero on the dais (moved from layout-v15.css; position and size come from the vars above). */
.j-world.home>.j-home-hero{all:unset;box-sizing:border-box;position:absolute;z-index:4;left:50%;top:var(--feet-y);height:calc(var(--hero-h) * 460 / 420);aspect-ratio:300/460;transform:translate(-50%,-91%);display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.j-world.home>.j-home-hero:focus-visible{outline:3px solid #fff;outline-offset:-3px;border-radius:18px}
.j-world.home>.j-home-hero .j-hero{display:block;width:100%;height:100%;filter:none}
.j-world.home>.j-home-hero:hover .j-hero{filter:brightness(1.08)}
.j-home-hero .j-equipped-hero,.j-wd-hero .j-equipped-hero{display:block;width:100%;height:100%;animation:none}
.j-hero-loading{display:block;width:100%;height:100%}
.j-home-shadow{position:absolute;left:50%;top:91%;width:52%;height:6%;transform:translate(-50%,-40%);border-radius:50%;background:radial-gradient(ellipse,rgba(10,6,2,.55),rgba(10,6,2,0) 70%);pointer-events:none;z-index:-1}
/* Floating poses: the shadow stays on the ground and breathes opposite the bob. data-fake=1 means no pose art yet, so the rig bobs in code. */
.j-home-hero[data-float="1"] .j-home-shadow,.j-wd-hero[data-float="1"] .j-wd-shadow{animation:j-shadow-bob 3.2s ease-in-out infinite}
.j-home-hero[data-float="1"][data-fake="1"] .j-hero{animation:j-hero-bob 3.2s ease-in-out infinite}
@keyframes j-hero-bob{0%,100%{transform:translateY(-3%)}50%{transform:translateY(-8%)}}
@keyframes j-shadow-bob{0%,100%{transform:translate(-50%,-40%) scale(1);opacity:1}50%{transform:translate(-50%,-40%) scale(.68);opacity:.55}}
@media (prefers-reduced-motion:reduce){.j-home-hero[data-float="1"] .j-home-shadow,.j-wd-hero[data-float="1"] .j-wd-shadow,.j-home-hero[data-float="1"][data-fake="1"] .j-hero{animation:none}}

/* Home stage art (set 16): bg is cover + center bottom, so --bgs (rendered px per image px) places the hero on the painted dais.
   Landscape art 1672x941, dais top centre (50%,78%); portrait art 941x1672, dais top centre (50%,65.5%). Feet land a touch inside the dais.
   Old home*.webp stay as the second layer (fallback if the stage art fails to load). */
.j-world.home{background:linear-gradient(180deg,rgba(6,16,14,.4),transparent 22%,transparent 64%,rgba(6,16,14,.5)),url('assets/bg/home-stage-portrait.webp') center bottom/cover no-repeat,url('assets/bg/home-portrait.webp') center bottom/cover no-repeat;
  --bgs:max(calc(100vw / var(--ui-z,1) / 941),calc(100vh / var(--ui-z,1) / 1672))}
.j-world.home>.j-home-hero{left:50%;top:calc(100% - 568 * var(--bgs))}
@media (orientation:landscape){
  .j-world.home{background:linear-gradient(180deg,rgba(6,16,14,.4),transparent 22%,transparent 64%,rgba(6,16,14,.5)),url('assets/bg/home-stage.webp') center bottom/cover no-repeat,url('assets/bg/home.webp') center bottom/cover no-repeat;
    --bgs:max(calc(100vw / var(--ui-z,1) / 1672),calc(100vh / var(--ui-z,1) / 941))}
  .j-world.home>.j-home-hero{left:50%;top:calc(100% - 202 * var(--bgs))}
  .j-world.home>.j-stage-card{align-self:end;margin:0}
  .j-world.home>.j-side-r{top:calc(var(--hud-h) + 24px);bottom:auto;left:auto;right:14px}
  .j-mini-rank{bottom:16px}
}
@media (orientation:landscape) and (max-height:520px){:root{--hero-h:min(36%,330px)}.j-world.home>.j-side-r{right:12px}}

/* Popup close button: 44px hit area, 24px icon-close.webp (D8, O13). */
.j-modal-close{width:44px;height:44px;border-radius:50%;background:#3a2410;color:#ffe9b0;border:2px solid #c48a3a;line-height:1;display:grid;place-items:center;padding:0}
.j-modal-close .j-ic{width:24px;height:24px}

/* ---- T1: currency popover (section 1) ---- */
/* HUD above hero (z4), rails (z8), mini rank (z3) and stage card, so the popover is never covered. */
.j-world.home>.j-hud-top,.j-eq>.j-hud-top{position:relative;z-index:30}
.j-res-wrap{position:static}
.j-res-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:12px;right:12px;box-sizing:border-box;padding:10px 12px 12px;border-radius:12px;border:3px solid #8a5410;background:var(--v16-paper);color:#3a2410;box-shadow:0 10px 24px #0008;max-height:calc(100vh - 140px);overflow:auto;animation:j-pop-in .12s ease-out}
.j-res-pop .j-res-head{display:flex;align-items:center;gap:8px}
.j-res-pop .j-res-head .j-ui{width:24px;height:24px}
.j-res-pop .j-res-head b{flex:1;font-size:15px}
.j-res-pop .j-res-head strong{font-size:16px;color:#a3231a}
.j-res-what{margin:4px 0 6px;font-size:12.5px;color:#6a4a22}
.j-res-pop dl{margin:0}
.j-res-pop dt{font-size:11px;font-weight:800;color:#7a4a12}
.j-res-pop dd{margin:0 0 6px;font-size:12.5px;line-height:1.35}
.j-res-pop .jp-btn{width:100%;height:36px!important;max-height:36px;margin-top:2px}
@media (orientation:landscape){.j-res-pop{left:auto;right:0;width:300px}}
@media (max-width:419px){.j-res-wrap.gem{display:none}}
@keyframes j-pop-in{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.j-res-pop{animation:none}}

/* ---- T2: settings popup + reset confirm (section 2) ---- */
.j-pop{width:min(460px,100%);max-height:100%;overflow:hidden;display:flex;flex-direction:column;padding:0!important;gap:0!important}
.j-pop-body{min-height:0;overflow:auto;display:grid;align-content:start;gap:10px;padding:16px 18px 14px;overscroll-behavior:contain}
.j-pop-body>h2{position:sticky;top:-16px;z-index:2;margin:-16px -18px 0;padding:16px 64px 6px 18px;background:#f4e3bb;font-size:20px;line-height:1.2}
.j-pop .j-modal-close{z-index:3}
.j-set-sec{display:grid;gap:4px;margin-top:2px}
.j-set-sec>h3{margin:0 0 2px;font-size:12px;letter-spacing:.08em;color:#7a4a12}
.j-set-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:4px 8px;border-radius:10px;background:rgba(255,248,228,.55)}
.j-set-row[aria-disabled=true]{opacity:.55}
.j-set-row .j-ui{width:24px;height:24px;justify-self:center}
.j-set-txt{display:grid;min-width:0}
.j-set-txt b{font-size:14px}
.j-set-txt small{font-size:11.5px;color:#6a4a22;font-weight:400}
.j-set-chip{font-size:11px;padding:2px 8px;border-radius:99px;background:rgba(58,36,16,.12)}
.j-set-row .jp-btn{min-width:84px}
.j-switch{all:unset;box-sizing:border-box;position:relative;width:52px;height:30px;border-radius:15px;background:#6b5a46;border:2px solid #2b170a;cursor:pointer;flex:none}
.j-switch i{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff8e4;box-shadow:0 2px 0 #0006;transition:transform .15s}
.j-switch[aria-checked=true]{background:linear-gradient(180deg,#6fbf5a,#2f7a2a)}
.j-switch[aria-checked=true] i{transform:translateX(22px)}
.j-switch::after{content:"";position:absolute;inset:-7px}
.j-switch:focus-visible,.j-set-credits-btn:focus-visible{outline:3px solid #c46a00;outline-offset:2px}
.j-set-sec.danger{border:2px solid #b3261e;border-radius:12px;padding:8px;background:rgba(179,38,30,.07)}
.j-set-sec.danger>h3{color:#b3261e}
.jp-btn.danger{background:linear-gradient(180deg,#d8453a,#8f1c14);border-color:#4a0c08;color:#fff}
.jp-btn.danger:disabled{opacity:.55}
.j-set-foot{border-top:1px dashed rgba(90,60,20,.35);padding-top:8px;text-align:center;font-size:11px;color:#6a4a22}
.j-set-foot p{margin:0 0 4px}
.j-set-credits-btn{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:#7a4a12;padding:8px 12px;min-height:28px;box-sizing:border-box}
.j-rst-sum{margin:0;font-size:14px}.j-rst-warn{margin:0;font-size:14px;font-weight:800;color:#b3261e}
.j-rst-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.j-rst-btns .jp-btn{width:100%}
html[data-motion=reduce] *{animation:none!important}
@media (orientation:portrait){
  .j-modal-overlay:has(>.j-pop){align-items:end;padding:0}
  .j-pop{width:100%;max-height:88%;border-radius:18px 18px 0 0}
}
@media (orientation:landscape) and (max-height:520px){
  .j-pop-body{padding:10px 14px 8px;gap:6px}.j-pop-body>h2{top:-10px;margin:-10px -14px 0;padding:10px 60px 4px 14px;font-size:17px}
  .j-set-row{min-height:40px}.j-set-sec{gap:2px}
}

/* ---- T3: stage card v2 (section 3.1) ---- */
.j-world.home>.j-stage-card{grid-area:start;display:grid;gap:4px;padding:6px 10px 8px;margin:0 8px 4px;border-width:3px;text-align:left;justify-items:stretch}
.j-stage-card.hard{border-color:#b3261e;background:linear-gradient(180deg,#f6e7c4,#e3cb96) padding-box,linear-gradient(160deg,#ff9a8a,#b3261e) border-box}
.j-sc-head{display:flex;align-items:center;gap:6px;min-width:0;min-height:0}
.j-stage-card .j-sc-step{all:unset;box-sizing:border-box;flex:none;width:40px;height:40px;min-height:0;display:grid;place-items:center;border-radius:10px;background:var(--v16-wood);border:2px solid #2b170a;cursor:pointer}
.j-sc-step:disabled{visibility:hidden}
.j-sc-step:focus-visible,.j-sc-btn:focus-visible,.j-seg:focus-visible,.j-sc-chest:focus-visible{outline:3px solid #fff;outline-offset:1px}
.j-sc-step .j-ui{width:20px;height:20px}
.j-sc-title{flex:1;min-width:0;display:grid;line-height:1.15}
.j-sc-title b{font-size:15px;color:#3a2410;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.j-sc-seg{display:grid;grid-template-columns:1fr 1fr;flex:none;border-radius:99px;overflow:hidden;border:2px solid #8a5410}
.j-stage-card .j-seg{all:unset;box-sizing:border-box;cursor:pointer;min-width:44px;height:30px;min-height:0;padding:0 10px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#3a2410;background:rgba(58,36,16,.1)}
.j-seg[aria-pressed=true]{background:#f0cf7a}.j-seg.hard[aria-pressed=true]{background:#b3261e;color:#fff}
.j-sc-goals{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.j-goal{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:rgba(58,36,16,.1);font-size:12px;font-weight:700;color:#3a2410;white-space:nowrap}
.j-goal .j-ui{width:16px;height:16px}
.j-goal.met{background:#fff3c4;border:1px solid #e2a233}
.j-sc-goals.hard .j-goal{background:rgba(179,38,30,.12);color:#a3231a}
.j-stage-card .j-hardmod{margin:0;font-size:11.5px;color:#a3231a;font-weight:700}
.j-stage-card .j-sc-power{margin:0;font-size:12.5px;line-height:1.2;color:#3a2410}
.j-sc-power b{font-size:13px}
.j-verdict{font-weight:800;margin-left:2px}.j-verdict.high{color:#2f7a2a}.j-verdict.even{color:#b8862f}.j-verdict.low{color:#b3261e}
.j-sc-chests{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;font-size:11.5px;font-weight:800;color:#6a4a22}
.j-sc-bar{position:relative;height:8px;margin:9px 16px 9px 4px;border-radius:99px;background:rgba(58,36,16,.2)}
.j-sc-bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(180deg,#ffd77a,#e2a233)}
.j-sc-chest{all:unset;box-sizing:border-box;position:absolute;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);display:grid;place-items:center}
.j-sc-bar>.j-sc-chest:last-child{transform:translate(-100%,-50%)}
.j-sc-chest .j-ui{width:100%;height:100%;object-fit:contain}
.j-sc-chest.locked{opacity:.5;filter:grayscale(.7)}
.j-sc-chest.claimed .j-ui{opacity:.55}
.j-sc-chest.claimed i{position:absolute;right:-2px;bottom:-2px;font-style:normal;font-size:11px;line-height:1;background:#2f7a2a;color:#fff;border-radius:50%;width:14px;height:14px;display:grid;place-items:center}
button.j-sc-chest.ready{cursor:pointer;border-radius:50%;animation:j-chest-glow 1.4s ease-in-out infinite}
.j-card-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.j-stage-card .j-sc-btn{all:unset;box-sizing:border-box;cursor:pointer;height:44px;min-height:0;display:grid;place-items:center;border-radius:14px;font-size:20px;font-weight:800;color:#fff;-webkit-text-stroke:3px var(--v16-out);paint-order:stroke fill;border:3px solid #2b170a;text-align:center}
.j-sc-btn.map{background:var(--v16-wood);font-size:18px;color:#fff0bd}
.j-sc-btn.go{background:linear-gradient(180deg,#fff0a6,#ffc84a 45%,#e48c17);border-color:#4a2806;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 0 #4a2806}
.j-sc-btn:active{transform:translateY(2px)}
@media (orientation:landscape){
  .j-world.home>.j-stage-card{padding:10px 12px;gap:6px;border-width:4px}
  .j-sc-btn{height:52px}
  .j-sc-step{width:40px;height:40px}
}
@media (orientation:landscape) and (max-height:520px){
  .j-sc-chests,.j-sc-power{display:none}
  .j-world.home>.j-stage-card{padding:6px 8px;gap:4px}
  .j-sc-btn{height:40px;font-size:16px}.j-sc-step{width:32px;height:32px}
  .j-goal{font-size:11px;padding:1px 6px}.j-stage-card .j-seg{min-width:34px;padding:0 6px;font-size:11px;height:28px}.j-sc-ch{display:none}.j-stage-card .j-sc-step:disabled{display:none}
  .j-stage-card .j-sc-btn{font-size:15px;white-space:nowrap;-webkit-text-stroke-width:2px}.j-stage-card .j-sc-btn.map{font-size:14px}
}
@media (max-width:359px){.j-sc-seg{display:none}}
@media (orientation:portrait){
  /* hard mode on a phone: the red card and the mod line say it; drop the chip so the card keeps the normal height */
  .j-sc-goals.hard{display:none}
  .j-stage-card .j-hardmod{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px}
}

/* ================================================================ V18 equipment page (UI-REDESIGN-V18 sections 5, 6; T6/T7 + desktop layout pass)
   Replaces the old v15 equipment blocks (deleted by content). All sizes are effective CSS px (the screen is zoomed by --ui-z). */
.j-eq.wide{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.92fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top top top" "doll detail bag";gap:12px;padding-bottom:12px;min-width:0;max-width:100%}

/* ---- doll: two slot columns hugging a big front-facing hero ---- */
.j-eq .j-eq-doll{container-type:inline-size;container-name:eqdoll;--eq-s:clamp(40px,min(21cqw,calc(100vh / var(--ui-z,1) / 6 - 54px)),84px);grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto auto;gap:6px 8px;padding:10px}
.j-eq .j-eq-col{display:grid;grid-template-rows:repeat(6,auto);align-content:space-evenly;justify-items:center;gap:2px;min-height:0}
.j-eq.wide .j-eq-item,.j-eq.wide .j-eq-doll .j-eq-item{width:var(--eq-s);height:var(--eq-s)}
.j-eq.wide .j-eq-glyph{font-size:calc(var(--eq-s) * .5)}
.j-eq .j-eq-slot small{font-size:clamp(11px,calc(var(--eq-s) * .17),14px);line-height:1.15}
.j-eq-mid{grid-template-rows:minmax(0,1fr) auto;align-items:end;gap:4px}
.j-eq-hero .j-hero canvas,.j-eq-hero .j-hero img{object-fit:contain;object-position:50% 100%}
.j-eq.wide .j-eq-hero{align-items:end}
.j-eq .j-eq-stats{margin-top:2px}
.j-eq.wide .j-eq-stats span{font-size:clamp(12px,calc(var(--eq-s) * .17),15px);padding:5px 8px}
.j-eq.wide .j-eq-stats b{font-size:clamp(13px,calc(var(--eq-s) * .2),18px)}
.j-eq .j-eq-setsum{font-size:13px}

/* ---- detail: sticky head / scrolling body / sticky foot (5.1) ---- */
.j-eq-detail,.j-eq-dialog{display:flex;flex-direction:column;min-height:0;overflow:hidden;color:#3a2410;font-size:14px;line-height:1.4}
.j-eq-detail{position:relative;padding:12px 14px;border-radius:12px;background:linear-gradient(180deg,#f6e7c4,#e6cf9c);box-shadow:inset 0 0 0 2px rgba(120,80,30,.3),0 8px 20px rgba(0,0,0,.4)}
.j-eq-dialog{width:min(420px,calc(100vw - 20px));max-height:calc(100% - 24px);padding:14px 14px 12px;border-radius:16px;border:6px solid transparent;
  background:linear-gradient(180deg,#f6e7c4,#e6cf9c) padding-box,linear-gradient(160deg,#fff2b8,#e2a233 30%,#8a5410 60%,#ffd77a 85%,#8a5410) border-box;box-shadow:0 0 0 2px #3b2208,0 20px 40px rgba(0,0,0,.6)}
.j-eq-dhead{flex:none;display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center;padding:0 0 8px;border-bottom:1px solid rgba(120,80,30,.28)}
.j-eq-dialog .j-eq-dhead{padding-right:50px}
.j-eq-dhead .j-eq-item,.j-eq .j-eq-dhead .j-eq-item,.j-eq.wide .j-eq-dhead .j-eq-item{width:64px;height:64px;cursor:default}
.j-eq-dhead h2{margin:0;padding:0;font-size:clamp(18px,1.5vw,22px);line-height:1.2;color:#3a2410}
.j-eq-tags{gap:5px;margin-top:5px}
.j-eq-tags span{font-size:12.5px;padding:1px 9px}
.j-eq-dbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:8px 4px 8px 0}
.j-eq-dfoot{flex:none;padding-top:8px;border-top:1px solid rgba(120,80,30,.28);box-shadow:0 -8px 12px -10px #0006}
.j-eq-dfoot .j-eq-notice{margin:0 0 6px}
.j-eq-dialog .j-status{overflow-y:auto;min-height:0}
.j-eq-desc{margin:0;font-size:14px}
.j-eq-box{padding:8px 10px;font-size:14px}
.j-eq-box>b{font-size:13.5px;margin-bottom:4px}
.j-eq-stat2{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.j-eq-stat2>div,.j-eq-orow{display:flex;justify-content:space-between;align-items:center;gap:8px}
.j-eq-orow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;min-height:28px}
.j-eq-orow:not(:has(button)){grid-template-columns:minmax(0,1fr) auto}
.j-eq-options b small{display:inline-flex;align-items:center;gap:3px;float:right;font-weight:700}
.j-ui-s{width:16px;height:16px;display:inline-block;vertical-align:-3px}
.j-world .j-eq-reroll{all:unset;box-sizing:border-box;box-shadow:none;min-height:0;cursor:pointer;width:32px;height:28px;display:grid;place-items:center;border-radius:7px;background:rgba(58,36,16,.12)}
.j-world .j-eq-reroll .j-ui{width:18px;height:18px;filter:none}
.j-world .j-eq-reroll[aria-disabled=true]{opacity:.35;cursor:not-allowed}
.j-eq-cmph{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.j-eq-cmph>b{margin:0;display:block;min-width:0}
.j-world .j-eq-link{all:unset;box-sizing:border-box;box-shadow:none;min-height:32px;cursor:pointer;flex:none;min-height:32px;display:inline-flex;align-items:center;color:#7a3b10;font-weight:800;font-size:13px;text-decoration:underline}
.j-world .j-eq-link:focus-visible{outline:2px solid #c46a00;border-radius:4px}
.j-eq-cmp{font-size:14px;gap:2px 12px}
.j-eq-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0}
.j-eq-row{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:8px}
.j-eq-actions .j-eq-btn{height:54px;min-height:54px;max-height:54px;border-radius:12px;font-size:16px;padding:0 6px;text-align:center;align-content:center}
.j-eq-btn small{font-size:10.5px}

/* ---- set box (5.2) ---- */
.j-eq-set{padding:9px 10px}
.j-set-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.j-set-head>b{margin:0;display:block;flex:none;font-size:14.5px;color:#7a3b10}
.j-set-dots{display:flex;gap:3px;flex:1;min-width:0;justify-content:center}
.j-set-dots i{width:7px;height:7px;border-radius:50%;background:rgba(58,36,16,.22)}
.j-set-dots i.owned{background:#9a6a34}.j-set-dots i.equipped{background:#e2a233;box-shadow:0 0 0 1px #4a2806}
.j-set-count{flex:none;font-size:12.5px;font-weight:800;padding:1px 9px;border-radius:99px;background:rgba(58,36,16,.14)}
.j-eq-set .j-set-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0 0 8px}
.j-world .j-set-piece{all:unset;box-sizing:border-box;box-shadow:none;min-height:0;cursor:pointer;display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:8px;min-width:0;position:relative;overflow:hidden}
.j-world .j-set-piece:focus-visible{outline:2px solid #c46a00;outline-offset:1px}
.j-set-piece img{width:84%;height:84%;object-fit:contain}
.j-set-piece .j-eq-glyph{font-size:22px;color:#3a2410;text-shadow:none}
.j-world .j-set-piece.equipped{background:linear-gradient(180deg,#fff0a6,#ffc84a);box-shadow:0 0 0 2px #4a2806}
.j-world .j-set-piece.owned{background:rgba(255,255,255,.25);box-shadow:inset 0 0 0 2px #7a4a22}
.j-set-piece.missing{background:rgba(58,36,16,.1);border:2px dashed rgba(226,178,74,.9)}
.j-set-piece.missing .j-eq-silhouette{width:64%!important;height:64%!important;opacity:.35!important;filter:brightness(0)!important}
.j-set-piece.sel{outline:2px solid #c46a00;outline-offset:1px}
.j-set-tiers{display:grid;gap:3px}
.j-set-tier{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;align-items:start;padding:3px 4px;border-radius:6px;opacity:.55}
.j-set-tier>i{font-style:normal;justify-self:start;min-width:52px;box-sizing:border-box;text-align:center;font-size:12px;font-weight:800;line-height:22px;padding:0 4px;border-radius:6px;background:rgba(58,36,16,.14);color:#5a4224}
.j-set-tier>span{font-size:13.5px;line-height:1.4;overflow-wrap:anywhere;padding-top:1px}
.j-set-tier.on{opacity:1}
.j-set-tier.on>i{background:linear-gradient(180deg,#fff0a6,#ffc84a);color:#3a2306;box-shadow:0 0 0 1px #4a2806}
.j-set-tier.on>span{color:#2f5d1f;font-weight:700}
.j-set-tier.cur{box-shadow:inset 3px 0 0 #2f7a2a;background:rgba(47,122,42,.12)}
.j-eq-set .j-set-buy{margin:0 0 8px}
.j-set-flex{margin:6px 0 0;font-size:13px}

/* ---- bag: full tab labels, 3-4 columns, forge pill on the materials line ---- */
.j-eq-bag{container-type:inline-size;container-name:eqbag}
.j-eq .j-eq-bar{display:block;padding:6px 8px 0}
.j-eq .j-eq-filters{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:4px;min-width:0}
.j-eq .j-eq-filters button{flex:none;display:flex;align-items:center;justify-content:center;gap:5px;height:36px;padding:0 4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(12px,3.6cqi,15px)}
.j-eq .j-eq-mats{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;margin:6px 10px 0;font-size:clamp(12px,3.4cqi,14px);text-align:left}
.j-eq-mats>span{flex:1 1 auto;min-width:0}
.j-world .j-forge-pill{all:unset;box-sizing:border-box;box-shadow:none;cursor:pointer;flex:none;margin-left:auto;min-height:28px;display:inline-flex;align-items:center;gap:3px;padding:0 10px;border-radius:99px;border:2px solid #4a2806;background:linear-gradient(180deg,#fff0a6,#ffc84a);color:#3a2306;font-weight:800;font-size:12px;line-height:1;white-space:nowrap}
.j-eq-mats .j-forge-pill:focus-visible{outline:3px solid #fff}
.j-eq .j-eq-bag .j-eq-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,2.2cqi,10px);padding:10px 10px 12px;justify-items:stretch;align-content:start;grid-auto-rows:auto}
@container eqbag (min-width:250px){.j-eq .j-eq-bag .j-eq-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.j-eq .j-eq-bag .j-eq-grid .j-eq-item{width:100%;height:auto;aspect-ratio:1;min-width:0}
.j-eq .j-eq-bag .j-eq-lv{font-size:clamp(11px,3.6cqi,14px)}
.j-eq .j-eq-bag .j-eq-worn{font-size:clamp(9.5px,2.8cqi,12px);line-height:1.3}

/* ---- replace chooser (6.2) ---- */
.j-rep-new{display:flex;align-items:center;gap:10px;font-size:14px}
.j-rep-new>span:last-child{display:grid;min-width:0}.j-rep-new small,.j-rep-card small{font-size:12.5px;color:#6a4a22}
.j-rep-ico{flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:10px;background:radial-gradient(circle at 50% 35%,var(--r,#555),var(--r2,#222) 78%);border:2px solid #1b0d05;box-sizing:border-box}
.j-rep-ico img{width:84%;height:84%;object-fit:contain}.j-rep-ico .j-eq-glyph{font-size:24px}
.j-rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.j-rep-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;border-radius:12px;background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(120,80,30,.3);text-align:center;min-width:0}
.j-rep-card.best{outline:2px solid #e2a233;background:rgba(255,236,170,.6)}
.j-rep-card .j-rep-ico{width:56px;height:56px}
.j-rep-card>b{font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.j-rep-delta{display:grid;gap:1px;font-size:13px;width:100%;margin-bottom:2px}
.j-rep-rec{font-style:normal;font-weight:800;font-size:12.5px;color:#8a4a00}
.j-rep-card .j-eq-btn{margin-top:auto;width:100%;height:46px;font-size:16px}
#journeyUI .j-pop .j-rep-grid+.j-eq-btn{width:100%;height:46px}

/* ---- codex set pieces reuse the tile look ---- */
.cx-piece.locked .j-eq-silhouette{width:66%!important;height:66%!important;opacity:.6!important;filter:none!important}

/* ---- short landscape (800x470) ---- */
@media (max-height:560px){
  .j-eq .j-eq-doll{--eq-s:clamp(38px,min(21cqw,calc(100vh / var(--ui-z,1) / 6 - 30px)),60px);padding:6px;gap:4px 6px}
  .j-eq-detail{font-size:12.5px;padding:8px 10px}
  .j-eq-dhead{grid-template-columns:44px minmax(0,1fr);gap:8px;padding-bottom:5px}.j-eq-dhead .j-eq-item,.j-eq .j-eq-dhead .j-eq-item,.j-eq.wide .j-eq-dhead .j-eq-item{width:44px;height:44px}
  .j-eq-dhead h2{font-size:16px}.j-eq-tags span{font-size:11px}
  .j-eq-dbody{gap:5px;padding:5px 4px 5px 0}.j-eq-box{padding:4px 8px;font-size:12.5px}.j-eq-desc,.j-eq-cmp{font-size:12.5px}
  .j-set-tier>span{font-size:12px}.j-set-tier>i{font-size:11px;line-height:20px}
  .j-eq-actions{gap:6px}.j-eq-row{gap:6px}
  .j-eq-actions .j-eq-btn{height:40px;min-height:40px;max-height:40px;font-size:14px}
  .j-eq .j-eq-filters button{height:28px}
  .j-eq .j-eq-stats span{padding:3px 5px}
}
@media (orientation:portrait) and (max-width:699px){
  .j-modal-overlay:has(>.j-eq-dialog){align-items:end;padding:0}
  .j-eq-dialog{width:100%;max-height:92%;border-radius:18px 18px 0 0;border-width:5px}
}
@media (orientation:portrait){.j-eq.tall{padding-bottom:calc(var(--v15-nav,74px) + env(safe-area-inset-bottom,0px) + 6px)}}

/* narrow panels (2560 centred column, 800x470): scale labels with the panel instead of wrapping */
.j-eq-detail{container-type:inline-size;container-name:eqdet}
.j-eq-actions .j-eq-btn{white-space:nowrap;overflow:hidden;font-size:clamp(13px,5cqi,16px)}
.j-eq-actions .j-eq-btn small{white-space:nowrap;font-size:clamp(9.5px,3.4cqi,10.5px)}
.j-eq-dialog .j-eq-actions .j-eq-btn{font-size:16px}
@container eqbag (max-width:260px){.j-eq-cnt{display:none}.j-eq .j-eq-filters{grid-template-columns:repeat(4,1fr)}.j-eq .j-eq-filters button{padding:0 2px;font-size:12px}}
@media (max-height:560px){.j-eq-actions .j-eq-btn{font-size:13px}}

/* ---- V18 forge sheet (section 9) ---- */
.j-eq-dialog.j-forge-dlg{width:min(760px,calc(100vw - 20px));padding:12px 14px 12px}
.j-forge{display:flex;flex-direction:column;min-height:0;flex:1;gap:8px}
.j-forge h2{margin:-4px 0 0;padding-right:50px;min-height:46px;display:flex;align-items:center;font-size:20px;color:#3a2410;flex:none}
.j-forge-rule{margin:0;font-size:13px;line-height:1.4;flex:none;color:#4a3118}
.j-forge-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 4px 0}
.j-forge-left,.j-forge-right{display:grid;gap:8px;align-content:start;min-width:0}
@media (orientation:landscape) and (min-width:700px){
  .j-forge-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;overflow:hidden}
  .j-forge-left,.j-forge-right{overflow-y:auto;min-height:0;overscroll-behavior:contain;padding:2px 4px 4px 2px}
}
.j-forge-slots{display:grid;grid-template-columns:repeat(3,64px) 20px 64px;gap:8px;justify-content:center;align-items:center;padding:6px 0}
.j-forge-slots .j-eq-item,.j-forge-slot{width:64px;height:64px;box-sizing:border-box}
.j-forge-slot.empty{display:grid;place-items:center;border:3px dashed #8a5410;border-radius:10px;background:rgba(255,255,255,.3);color:#8a5410;font-size:26px;font-weight:800}
.j-forge-x{position:absolute;right:-7px;top:-7px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#b3261e;color:#fff;font-size:11px;font-weight:900;border:2px solid #fff3d0;line-height:1;z-index:2}
.j-forge-arrow{text-align:center;color:#8a5410;font-size:16px}
.j-forge-prev{cursor:default!important;filter:brightness(.7) saturate(.8);animation:j-forge-shimmer 2s ease-in-out infinite}
.j-forge-prev b{font-size:28px;color:#fff;-webkit-text-stroke:3px #000;paint-order:stroke fill}
@keyframes j-forge-shimmer{50%{filter:brightness(1) saturate(1)}}
.j-forge-out{margin:0;text-align:center;font-size:14px}
.j-forge-out .j-eq-rarity{background:var(--r);color:#fff;-webkit-text-stroke:2px var(--r2);paint-order:stroke fill;padding:0 8px;border-radius:6px;font-weight:800}
.j-forge-chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.j-forge-chip{font-size:12px;font-weight:800;padding:1px 9px;border-radius:99px;background:rgba(58,36,16,.14)}
.j-forge-chip.set{background:#fff3c4;box-shadow:0 0 0 1px #e2a233;color:#6a4000}
.j-forge-chip.better{background:#d9f3d3;color:#1f6a1a;box-shadow:0 0 0 1px #2f7a2a}
.j-forge-chip.lost{background:#fde0dc;color:#b3261e;box-shadow:0 0 0 1px #b3261e}
.j-forge-odds{font-size:12.5px;border-radius:8px;background:rgba(255,255,255,.35);padding:4px 8px}
.j-forge-odds summary{cursor:pointer;font-weight:800;padding:3px 0}
.j-forge-odds>div{display:grid;gap:3px;padding:4px 0}
.j-forge-odds>div>div{display:grid;grid-template-columns:62px minmax(0,1fr) 44px;gap:6px;align-items:center}
.j-forge-odds b{text-align:right;font-size:12px}
.j-fo-bar{display:block;height:8px;border-radius:99px;background:rgba(58,36,16,.18);overflow:hidden}
.j-fo-bar i{display:block;height:100%;background:linear-gradient(90deg,#e2a233,#ffd36b)}
.j-forge-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.j-world .j-forge-tab{all:unset;box-sizing:border-box;cursor:pointer;height:36px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;background:rgba(58,36,16,.16);color:#3a2410;font-weight:700;font-size:13.5px;white-space:nowrap;min-width:0;overflow:hidden}
.j-world .j-forge-tab[aria-pressed=true]{background:linear-gradient(180deg,#fff0a6,#ffc84a);box-shadow:0 0 0 2px #4a2806}
.j-world .j-forge-tab:focus-visible{outline:3px solid #c46a00}
.j-forge-need{margin:0;font-size:12.5px;color:#7a3b10;font-weight:700}
.j-forge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;padding:6px 4px}
.j-forge-grid .j-eq-item{width:100%;height:auto;aspect-ratio:1;min-width:0}
.j-forge-cell.picked{box-shadow:0 0 0 3px #ff9a3c,0 0 10px rgba(255,154,60,.7)!important}
.j-forge-cell[aria-disabled=true]{opacity:.45;filter:grayscale(.8);cursor:not-allowed}
.j-forge-setmark{position:absolute;right:2px;bottom:2px;font-size:9.5px;font-weight:800;line-height:1;padding:1px 4px;border-radius:5px;background:#fff3c4;color:#6a4000;box-shadow:0 0 0 1px #e2a233}
.j-forge-cell .j-eq-worn{font-size:9.5px}
.j-forge-empty{display:grid;gap:6px;justify-items:start;font-size:13.5px}.j-forge-empty p{margin:0}
.j-forge-actions{flex:none;display:grid;grid-template-columns:1fr 2fr;gap:10px;padding-top:8px;border-top:1px solid rgba(120,80,30,.28)}
.j-forge-actions.one{grid-template-columns:1fr}
.j-forge-autobox{display:grid;gap:3px;justify-items:center}
.j-world .j-forge-auto{all:unset;box-sizing:border-box;cursor:pointer;height:36px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;border:2px solid #7a4a14;background:linear-gradient(180deg,#a8742e,#7a4a14);color:#fff3d0;font-weight:800;font-size:14px;white-space:nowrap;box-shadow:0 2px 0 #4a2806}
.j-world .j-forge-auto.clear{background:transparent;color:#5a3512;box-shadow:none}
.j-world .j-forge-auto[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.j-world .j-forge-auto:focus-visible{outline:3px solid #c46a00}
.j-forge-autobox small{font-size:11.5px;color:#6a4a28;text-align:center;line-height:1.3}
.j-forge-warn{margin:0;text-align:center;font-size:12.5px;font-weight:800;color:#8a4a00;background:#fff3c4;border-radius:8px;padding:4px 8px;box-shadow:0 0 0 1px #e2a233}
.j-forge-actions .j-eq-btn{height:54px;min-height:54px;max-height:54px;border-radius:12px;font-size:16px;padding:0 6px;white-space:nowrap}
.j-forge-actions .j-eq-btn[aria-disabled=true]{filter:grayscale(.7) brightness(.85);cursor:not-allowed}
.j-forge .j-eq-notice{margin:0;flex:none}
/* reveal */
.j-forge-done{align-items:stretch}
.j-forge-result{flex:1;min-height:0;overflow-y:auto;display:grid;justify-items:center;align-content:center;gap:8px;padding:8px 4px;text-align:center}
.j-forge-result h3{margin:0;font-size:20px;color:#3a2410}
.j-forge-reveal{padding:10px;border-radius:50%;background:radial-gradient(circle,var(--r) 0,transparent 68%);animation:j-forge-pop .45s cubic-bezier(.2,1.4,.4,1) both,j-forge-glow 1.6s ease-in-out .45s 2}
.j-forge-reveal .j-eq-item.j-forge-big{width:96px;height:96px;cursor:default}
.j-forge-reveal .j-eq-lv{font-size:14px}
@keyframes j-forge-pop{from{transform:scale(.55);opacity:0}}
@keyframes j-forge-glow{50%{box-shadow:0 0 28px var(--r)}}
.j-forge-result .j-eq-tags{justify-content:center}
.j-forge-stats{list-style:none;margin:0;padding:8px 12px;width:min(320px,100%);box-sizing:border-box;border-radius:10px;background:rgba(255,255,255,.4);display:grid;gap:3px;font-size:14px;text-align:left}
.j-forge-stats li{display:flex;justify-content:space-between;gap:10px}
.j-forge-stats b{color:#2f7a2a}
@media (prefers-reduced-motion:reduce){.j-forge-reveal,.j-forge-prev{animation:none}}
:root[data-motion=reduce] .j-forge-reveal,:root[data-motion=reduce] .j-forge-prev{animation:none}
@media (max-height:560px){
  .j-eq-dialog.j-forge-dlg{padding:8px 12px}
  .j-forge h2{font-size:16px}.j-forge-rule{font-size:11.5px;line-height:1.3}
  .j-forge-slots{grid-template-columns:repeat(3,48px) 14px 48px;gap:6px;padding:2px 0}.j-forge-slots .j-eq-item,.j-forge-slot{width:48px;height:48px}
  .j-forge-actions .j-eq-btn{height:40px;min-height:40px;max-height:40px;font-size:14px}
  .j-forge-tab{height:30px!important}
  .j-forge-reveal .j-eq-item.j-forge-big{width:64px;height:64px}.j-forge-result{gap:4px}.j-forge-result h3{font-size:16px}.j-forge-stats{font-size:12.5px;padding:5px 10px}
}
@media (orientation:portrait) and (max-width:699px){.j-eq-dialog.j-forge-dlg{max-height:94%}.j-forge-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container eqbag (max-width:200px){.j-eq .j-eq-filters{gap:2px}.j-eq .j-eq-filters button{padding:0;font-size:11px}}

/* ---- V18 map v2 (3.2): chapter tabs, one path per chapter, chest row, selection bar ---- */
.j-world.map{gap:8px!important;padding-top:8px!important;padding-right:12px!important;padding-bottom:10px!important}
.j-map-top{flex:none;display:grid;gap:8px;padding:8px 10px;border-radius:14px;background:rgba(32,20,8,.86);border:2px solid rgba(255,220,160,.3);color:#f3e7cb}
.j-map-tabs{gap:6px}
.j-map-tabs .jp-btn.j-map-tab{height:44px!important;max-height:44px;gap:6px;font-size:14px;white-space:nowrap;overflow:hidden;min-width:0}
.j-map-tab .j-tab-name{overflow:hidden;text-overflow:ellipsis;font-weight:700}
.j-map-tab small{font-size:12px;color:#ffcf40;font-weight:800}
.j-map-tab[aria-pressed=true]{background:linear-gradient(180deg,#fff0a6,#ffc84a);color:#3a2306;border-color:#4a2806}
.j-map-tab[aria-pressed=true] small{color:#7a4a00}
.j-map-tab.locked{opacity:.55;filter:grayscale(.6);cursor:not-allowed}
.j-map-tab.locked .j-ui{width:18px;height:18px}
.j-map-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.j-map-head h2{margin:0;flex:1 1 auto;min-width:0;font-size:18px;color:#ffe3a0}
.j-map-head .j-chap-stars{font-size:14px}
.j-map-seg .j-seg{all:unset;box-sizing:border-box;cursor:pointer;min-width:52px;height:32px;padding:0 12px;display:grid;place-items:center;font-size:13px;font-weight:800;color:#f3e7cb;background:rgba(255,255,255,.1)}
.j-map-seg .j-seg[aria-pressed=true]{background:#f0cf7a;color:#3a2410}.j-map-seg .j-seg.hard[aria-pressed=true]{background:#b3261e;color:#fff}
.j-map-seg{border-color:#f0cf7a}
.j-map-seg .j-seg:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.j-map-head .j-hardmod{flex:1 0 100%;margin:0;font-size:12.5px;color:#ff9a8a;font-weight:700}
.j-world.map .j-map-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(32,20,8,.62);border:2px solid rgba(255,220,160,.3);color:#f3e7cb;justify-content:center;overscroll-behavior:contain}
.j-world.map .j-map-body.hard{border-color:#b3261e;box-shadow:0 0 16px rgba(179,38,30,.5)}
.j-map-path{position:relative;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:6px 0 2px}
.j-map-path::before{content:"";position:absolute;left:10%;right:10%;top:calc(6px + 15px + 2px);border-top:3px dashed rgba(255,220,160,.45);z-index:0}
.j-map-body.hard .j-map-path::before{border-top-color:rgba(255,120,100,.55)}
.j-map-path .j-node{z-index:1;width:100%;max-width:130px;justify-self:center;min-height:0;gap:3px;padding:0 4px 6px;border:2px solid transparent;background:transparent;box-shadow:none}
.j-map-path .j-node-n{width:30px;height:30px;font-size:15px;box-shadow:0 0 0 3px rgba(32,20,8,.9)}
.j-map-path .j-node b{font-size:11px;line-height:1.2;min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:700;margin-top:2px}
.j-map-path .j-node .j-stars{font-size:14px}
.j-map-path .j-node small{font-size:10.5px}
.j-map-path .j-node.selected{border-color:#ffd36b;background:rgba(110,70,14,.9);box-shadow:0 0 12px rgba(255,200,90,.65)}
.j-map-path .j-node.selected .j-node-n{border-color:#ffd36b}
.j-map-path .j-node.locked{opacity:.5;filter:grayscale(.6)}
.j-map-path .j-node .j-redmark{top:-4px;right:2px}
.j-world.map .j-chests{gap:8px}
.j-world.map .j-chest{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"i b" "i s" "i r";align-items:center;column-gap:8px;row-gap:0;padding:6px 8px;text-align:left}
.j-chest img{grid-area:i;width:44px;height:44px}
.j-chest b{grid-area:b;font-size:13px}.j-chest small{grid-area:s;font-size:12px;font-weight:700}
.j-chest .j-chest-rw{grid-area:r;font-style:normal;font-size:11.5px;color:#d8c79c;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.j-chest-rw .j-ui-s{width:14px;height:14px;vertical-align:-2px}
.j-chest.ready small{color:#ffe9a8}.j-chest.claimed{opacity:.6}
.j-world.map .j-sel-bar{padding:8px 14px;gap:14px;font-size:14px}
.j-sel-info{min-width:0;display:block;line-height:1.35}
.j-sel-info b{color:#fff0bd}.j-sel-pow b{color:#fff0bd}
.j-world.map .j-sel-bar .j-primary{min-height:48px;padding:6px 26px;white-space:nowrap}
@media (orientation:portrait),(max-width:700px){
  .j-world.map{padding-top:6px!important;padding-right:8px!important;padding-left:8px!important;padding-bottom:calc(var(--v15-nav,74px) + env(safe-area-inset-bottom,0px) + 8px)!important}
  .j-map-path{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:12px}
  .j-map-path::before{display:none}
  .j-map-path .j-node{grid-column:span 2;max-width:none}
  .j-map-path .j-node:nth-child(4){grid-column:2/span 2}.j-map-path .j-node:nth-child(5){grid-column:4/span 2}
  .j-world.map .j-chests{grid-template-columns:1fr}
  .j-world.map .j-chest{grid-template-columns:44px auto auto minmax(0,1fr);grid-template-areas:"i b s r";column-gap:8px}
  .j-world.map .j-sel-bar{flex-wrap:wrap;gap:8px}.j-sel-info{flex:1 1 100%}
  .j-world.map .j-sel-bar .j-primary{flex:1 1 100%;min-height:46px}
}
@media (max-width:480px){.j-map-tab .j-tab-name{display:none}.j-map-tabs .jp-btn.j-map-tab{font-size:13px;gap:4px;padding:0 6px}.j-map-head h2{font-size:16px}}
@media (max-height:520px){
  .j-world.map{gap:4px!important;padding-top:4px!important;padding-right:8px!important;padding-bottom:6px!important}
  .j-map-top{padding:4px 8px;gap:4px}.j-map-tabs .jp-btn.j-map-tab{height:32px!important;max-height:32px;font-size:12.5px}
  .j-map-head h2{font-size:15px}.j-map-seg .j-seg{height:26px}.j-map-head .j-hardmod{display:none}
  .j-world.map .j-map-body{padding:4px 10px;gap:4px}
  .j-map-path{gap:6px;padding-top:2px}.j-map-path::before{top:calc(2px + 12px)}.j-map-path .j-node-n{width:24px;height:24px;font-size:13px}.j-map-path .j-node b{font-size:10px;min-height:0;-webkit-line-clamp:1}.j-map-path .j-node .j-stars{font-size:11px}
  .j-world.map .j-chest{padding:3px 6px}.j-chest img{width:30px;height:30px}.j-world.map .j-chest{grid-template-columns:30px minmax(0,1fr);grid-template-areas:"i b" "i s"}.j-chest .j-chest-rw{display:none}
  .j-world.map .j-sel-bar{padding:4px 10px;font-size:12px}.j-world.map .j-sel-bar .j-primary{min-height:34px;padding:4px 18px}
}
/* forge: auto-pick and cancel must stand out from the parchment (user: "กลืนไปกับพื้นหลัง") */
.j-world .j-forge-auto{height:40px;padding:0 18px;border:2px solid #0c3b30;background:linear-gradient(180deg,#3fb89b,#1b6f5b);color:#fff;text-shadow:0 1px 0 #0c3b30;box-shadow:inset 0 1px 0 #9ff0d8,0 3px 0 #0c3b30,0 4px 8px rgba(0,0,0,.25)}
.j-world .j-forge-auto:hover:not([aria-disabled=true]){filter:brightness(1.08)}
.j-world .j-forge-auto.clear{background:#fff8e8;color:#8f1c14;border-color:#8f1c14;text-shadow:none;box-shadow:0 2px 0 #8f1c14}
.j-forge-autobox small{color:#5a3a14;font-weight:600}
.r-Uncommon{--r:#5fbf5a;--r2:#1d4d1a}
.j-world .j-forge-tab:not([aria-pressed=true]){background:#e9d3a3;color:#3a2410;border:2px solid #8a5410;box-shadow:inset 0 -3px 0 rgba(90,52,10,.25)}
.j-world .j-forge-tab:not([aria-pressed=true]) b{color:#7a3b08}
.j-world .j-forge-actions .j-eq-btn:not(.gold):not(.blue){background:linear-gradient(180deg,#7a4a1e,#4a2806);color:#fff0bd;border:2px solid #2b170a;box-shadow:0 3px 0 #2b170a}

/* glyph -> painted art (glyph2art) */
.j-eq-stats .j-ic,.j-eq-mats .j-ic,.j-eq-btn small .j-ic{width:1.25em;height:1.25em;vertical-align:-.3em}
.j-stars .j-ic{width:1em;height:1em;vertical-align:-.12em}
.j-stars i{display:inline-flex}
.j-res-stars b{display:inline-flex}.j-res-stars b .j-ic{width:18px;height:18px}
.j-chap-stars .j-ic,.j-tab-name+small .j-ic,.j-chest .j-ic{width:1em;height:1em;vertical-align:-.15em}
.j-forge h2 .j-ic{width:1.1em;height:1.1em;vertical-align:-.2em}
.j-forge-x .j-ic{width:12px;height:12px;vertical-align:middle}
.j-forge-auto .j-ic{width:1em;height:1em}
.detail-pager .j-ic,.skill-page .j-ic{width:22px;height:22px;vertical-align:middle}
.j-node-n .j-ui{width:18px;height:18px}
.j-wd-thumb img.j-wd-pose{width:100%;height:100%;object-fit:contain}
.j-sc-chest.claimed i{background:none;width:16px;height:16px;right:-3px;bottom:-3px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.j-sc-chest.claimed i .j-ic{width:16px;height:16px;vertical-align:0}
.j-wd-thumb:has(img.j-wd-pose) .j-wd-glyph{display:none}
.j-eq-stats .j-ic{width:1.6em;height:1.6em;vertical-align:middle}
/* left rail: the active item stays centred inside the rail (was shifted 6px toward the edge) */
@media (orientation:landscape){.j-nav-item.active{transform:none!important;margin-inline:0!important;box-sizing:border-box;max-width:100%}}

/* ---- stage card v3: full-width title, controls row, chest glow / popup / tooltip ---- */
.j-sc-title{display:grid;gap:0;line-height:1.2;min-width:0}
.j-sc-title .j-sc-ch{font-size:11px;font-weight:800;color:#8a5410;letter-spacing:.04em}
.j-sc-title b{font-size:16px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.j-sc-head{justify-content:space-between}
.j-sc-gap{flex:1}
.j-sc-head .j-sc-step{width:44px;height:32px}
.j-sc-head .j-seg{height:28px}
.j-sc-chest{--bob:0}
.j-sc-chest::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,102,.75) 0,rgba(255,196,64,.35) 40%,rgba(255,190,60,0) 70%);opacity:0;pointer-events:none}
button.j-sc-chest{cursor:pointer}
button.j-sc-chest.ready{border-radius:0;animation:none;z-index:2}
button.j-sc-chest.ready::before{opacity:1;animation:j-chest-halo 1.6s ease-in-out infinite}
button.j-sc-chest.ready .j-ui{position:relative;animation:j-chest-bob 1.6s ease-in-out infinite;filter:drop-shadow(0 0 3px rgba(255,200,70,.8))}
button.j-sc-chest.ready::after{content:"✦";position:absolute;top:-8px;right:-6px;font-size:11px;color:#fff3b0;text-shadow:0 0 4px #ffb520;animation:j-chest-spark 1.6s ease-in-out infinite;pointer-events:none}
@keyframes j-chest-halo{0%,100%{transform:scale(.85);opacity:.7}50%{transform:scale(1.1);opacity:1}}
@keyframes j-chest-bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.08)}}
@keyframes j-chest-spark{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(30deg)}}
.j-sc-chest.locked{opacity:.75;filter:grayscale(.35) brightness(.9)}
.j-sc-chest.claimed{filter:grayscale(.85) brightness(.85)}
.j-sc-chest.claimed i{filter:none}
.j-sc-bar{overflow:visible}
.j-sc-tip{position:absolute;z-index:30;bottom:calc(100% + 14px);left:var(--x);transform:translateX(-50%);box-sizing:border-box;width:max-content;max-width:min(230px,72vw);padding:7px 10px 8px;border-radius:12px;border:3px solid #8a5410;background:var(--v16-paper,#f4e3bb);color:#3a2410;font-size:12px;line-height:1.3;box-shadow:0 4px 12px rgba(0,0,0,.35);display:grid;gap:4px;text-align:left}
.j-sc-tip.t2{transform:translateX(-88%)}
.j-sc-tip.t0{transform:translateX(-30%)}
.j-sc-tip::after{content:"";position:absolute;top:100%;left:var(--x);width:0;height:0;border:7px solid transparent;border-top-color:#8a5410}
.j-sc-tip.t0::after,.j-sc-tip.t1::after,.j-sc-tip.t2::after{left:auto}
.j-sc-tip.t0::after{left:30%;transform:translateX(-50%)}.j-sc-tip.t1::after{left:50%;transform:translateX(-50%)}.j-sc-tip.t2::after{left:88%;transform:translateX(-50%)}
.j-rw-list{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.j-rw{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.j-rw b{font-size:13px}.j-rw small{font-size:11px;color:#6a4a22}
.j-rw-sub{margin:0;color:#6a4a22;font-weight:700}
#chestTitle~.j-rw-list{justify-content:center;gap:10px 18px;padding:6px 0}
#chestTitle~.j-rw-list .j-ui-s{width:36px;height:36px}
#chestTitle~.j-rw-list .j-rw{flex-direction:column;gap:2px}
#chestTitle~.j-rw-list .j-rw b{font-size:18px}
@media (prefers-reduced-motion:reduce){button.j-sc-chest.ready::before,button.j-sc-chest.ready .j-ui,button.j-sc-chest.ready::after{animation:none}button.j-sc-chest.ready::after{opacity:1}}
@media (orientation:landscape) and (max-height:520px){
  .j-sc-title{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:6px}
  .j-sc-head .j-sc-step{height:28px;width:40px}
}
.j-world .j-sc-chest{min-height:0;min-width:0;box-shadow:none;background:none;border:0;padding:0}

/* GEAR-LOOK-V1 s4: wardrobe "show worn gear" switch + equipment link */
.j-wd-play>.j-wd-gear{grid-column:1/-1;height:40px!important;max-height:40px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px}
.j-wd-gear b{font-weight:800;display:inline-flex;align-items:center;gap:8px}
.j-wd-gear b::before{content:"";width:34px;height:18px;border-radius:99px;border:2px solid #2b170a;background:#8a6a42 radial-gradient(circle at 9px 50%,#fff0bd 0 6px,transparent 7px);box-sizing:border-box;transition:background-position .15s}
.j-wd-gear[aria-pressed="true"] b::before{background:#3c9a62 radial-gradient(circle at calc(100% - 9px) 50%,#fff0bd 0 6px,transparent 7px)}
.j-wd-gear.paused{opacity:.6}
.j-wd-gearcap{font-size:clamp(13px,1.3vw,16px)!important}
.j-eq-gearlink{all:unset;box-sizing:border-box;justify-self:center;padding:4px 12px;min-height:28px;border-radius:99px;border:2px solid #2b170a;background:#3c6b4a;color:#fff0bd;font:800 12px/1.2 'Noto Sans Thai',sans-serif;cursor:pointer;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.4)}
.j-eq-gearlink:hover{filter:brightness(1.12)}.j-eq-gearlink:focus-visible{outline:3px solid #fff}
@media (max-height:520px){.j-wd-play>.j-wd-gear{height:32px!important;max-height:32px}}
/* Narrow portrait: the five play buttons showed neither glyph nor label (v15 container rule hid the glyph while the media rule hid the label). Glyph-only. */
@media (max-width:600px){.jp-btn.j-wd-playbtn span{display:inline!important;font-size:20px}.jp-btn.j-wd-playbtn b{display:none!important}}

/* ---- UX audit 2026-10-03 fixes ---- */
/* UX-05 locked tiles: lock badge + "เร็วๆ นี้" + dimmed, same language as the nav. */
.j-side-btn.locked{position:relative;filter:grayscale(.7) brightness(.8);cursor:not-allowed}
.j-side-btn.locked .j-side-ico>.j-ui:first-child{opacity:.5}
.j-side-ico{position:relative;display:grid;place-items:center}
.j-side-btn.locked .j-side-ico .j-ui-lock{position:absolute;right:-8px;bottom:-4px;width:24px!important;height:24px!important;filter:drop-shadow(0 1px 1px #000)}
.j-lock-tag{font-style:normal;font-size:9px;font-weight:700;line-height:1;color:#ffe9a8;-webkit-text-stroke:2px var(--v16-out);paint-order:stroke fill;text-align:center;white-space:nowrap}
.j-nav-item .j-lock-tag{margin-top:-1px}
/* UX-15 / UX-16 stage card */
.j-stage-card .j-sc-boost,.j-sel-bar .j-sc-boost{all:unset;box-sizing:border-box;cursor:pointer;justify-self:start;font-size:12px;font-weight:800;color:#a3231a;text-decoration:underline;text-underline-offset:2px;padding:0;min-height:0;height:22px;display:inline-flex;align-items:center;box-shadow:none}
.j-sc-boost:focus-visible{outline:2px solid #a3231a;outline-offset:2px;border-radius:4px}
.j-sel-bar .j-sc-boost{margin-left:6px;color:#ffb3a6;height:auto}
.j-sc-rw{margin:0;font-size:11.5px;font-weight:700;color:#6a4a22;line-height:1.3}
.j-stage-card.hard .j-sc-rw{color:#a3231a}
@media (max-height:620px) and (orientation:landscape){.j-sc-rw,.j-sc-boost{font-size:10.5px;line-height:1.2;min-height:0}}
/* UX-19 locked chapter note */
.j-map-note{margin:4px 0 0;padding:4px 10px;border-radius:8px;background:rgba(255,233,168,.14);border:1px solid rgba(226,178,74,.6);font-size:12px;font-weight:700;color:#ffe9a8;text-align:center}
/* UX-01 defeat cause + UX-14 loot badges */
.j-res-cause{margin:0;padding:6px 10px;border-radius:10px;background:rgba(120,20,16,.35);border:1px solid rgba(255,140,120,.5);font-size:13px;line-height:1.4;text-align:center;color:#fff1d4}
.j-res-cause b{color:#ffd0c4}
.j-res-tile{position:relative}
.j-res-up{font-style:normal;font-size:10.5px;font-weight:800;line-height:1.1;padding:2px 6px;border-radius:8px;color:#103a1a;background:#8be28b;box-shadow:0 1px 0 #1f6a2c}
/* UX-09 upgrade preview, UX-04 codex buy row */
.j-up-next{font-size:.82em;font-weight:700;opacity:.9;white-space:nowrap}
.cx-pieces button.cx-piece{all:unset;box-sizing:border-box;cursor:pointer}
.cx-pieces button.cx-piece.sel{outline:3px solid #e2a233;outline-offset:1px}
.cx-pieces button.cx-piece:focus-visible{outline:3px solid #fff;outline-offset:1px}
.j-cx-detail .j-set-buy,.j-cx-sheet .j-set-buy{display:grid;gap:4px;margin:8px 0}
.j-set-hint{margin:8px 0 0;font-size:12px;font-weight:700;color:#6a4a22}
/* UX-06 give up (combat HUD) */
.give-up{position:absolute;z-index:6;top:88px;right:8px;min-width:64px;height:30px;padding:0 10px;font-size:11px;font-weight:800;border-radius:10px;border:3px solid #2b170a;background:#5a2a22;color:#fff;-webkit-text-stroke:2px var(--v16-out);paint-order:stroke fill;box-shadow:0 2px 0 rgba(0,0,0,.5)}
.give-up[hidden]{display:none}
.give-up[data-arm]{background:linear-gradient(180deg,#e0574a,#a3231a);border-color:#4a0f0a}
main:not([data-journey="combat"])>.give-up{display:none}
.jp-sim{margin:4px 0 0;font-size:11px;font-weight:700;text-align:center;color:#6a4a22;opacity:.85}

/* IDLE-V1: auto-repeat row (result screen), stage-card chip, offline chest tile + popup. */
.j-repeat{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:8px 12px;border-radius:12px;background:rgba(58,36,16,.12);border:2px solid rgba(58,36,16,.3);color:#3a2410}
.j-repeat.on{background:rgba(63,140,60,.14);border-color:rgba(47,122,42,.55)}
.j-repeat-t{display:flex;align-items:center;gap:6px;font-size:14px}
.j-repeat-t .j-ic{width:20px;height:20px}
.j-repeat .j-switch{grid-column:2;grid-row:1}
.j-repeat-line{grid-column:1;text-align:left;font-size:12px;font-weight:700;line-height:1.3;color:#5a3d1a}
.j-repeat-cancel{all:unset;box-sizing:border-box;grid-column:2;justify-self:end;min-height:34px;padding:0 14px;display:flex;align-items:center;font-size:12px;font-weight:800;color:#fff;border-radius:10px;background:linear-gradient(180deg,#8a6a4a,#5a4028);border:2px solid #2b170a;cursor:pointer}
.j-repeat-cancel:focus-visible{outline:3px solid #c46a00;outline-offset:2px}
@media (max-height:520px) and (orientation:landscape){.j-repeat{padding:4px 10px}}
.j-sc-autorow{display:flex;justify-content:flex-end;min-height:0}
.j-sc-auto{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:800;color:#6a4a22;background:rgba(58,36,16,.12);border:2px solid rgba(58,36,16,.3);cursor:pointer}
.j-sc-auto .j-ic{width:16px;height:16px}
.j-sc-auto.on{color:#1d5a1a;background:rgba(63,140,60,.2);border-color:#2f7a2a}
.j-sc-auto:focus-visible{outline:3px solid #c46a00;outline-offset:2px}
.j-off-tile{height:auto!important;min-height:76px;gap:1px!important;padding:3px 2px 4px!important;cursor:pointer!important}
.j-off-tile .j-side-ico .j-ui:first-child{width:34px!important;height:34px!important}
.j-off-tile.locked{cursor:pointer!important}
.j-off-bar{display:block;width:80%;height:6px;border-radius:3px;background:#2b170a;border:1px solid #0006;overflow:hidden}
.j-off-bar i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(180deg,#ffd77a,#e2a233)}
.j-off-sub{opacity:.9;font-weight:600!important}
.j-off-tile.full .j-side-ico{animation:j-off-pulse 1.6s ease-in-out infinite}
@keyframes j-off-pulse{50%{transform:scale(1.1)}}
:root[data-motion="reduce"] .j-off-tile.full .j-side-ico{animation:none}
.j-off-alt{display:none!important}
.j-off-meter{position:relative;height:18px;border-radius:9px;background:rgba(58,36,16,.25);border:2px solid #2b170a;overflow:hidden;margin:4px 0}
.j-off-meter i{display:block;height:100%;background:linear-gradient(180deg,#ffd77a,#e2a233)}
.j-off-meter span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:800;color:#3a2410}
.j-off-chips{justify-content:center;gap:10px 18px;padding:4px 0}
.j-off-chips .j-rw{flex-direction:column;gap:2px}.j-off-chips .j-rw b{font-size:18px}.j-off-chips .j-ui-s{width:36px;height:36px}
.j-off-basis,.j-off-rate,.j-off-wait{margin:2px 0;font-size:12px;font-weight:700;color:#6a4a22;text-align:center}
.j-off-gearline{display:flex;align-items:center;justify-content:center;gap:6px;margin:2px 0;font-size:13px;font-weight:800;color:#3a2410}
.j-off-gear ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,max-content));justify-content:center;gap:8px;padding:0;margin:6px 0}
.j-off-gear .j-res-tile i{width:56px;height:56px}
.j-off-trim{text-align:center}

/* In-run pause button + sheet (replaces the two-tap give-up button). */
.give-up.pause-btn{min-width:0;width:40px;height:36px;padding:0;display:grid;place-items:center;background:var(--v16-wood);border-radius:10px}
.give-up.pause-btn[hidden]{display:none}
.pause-btn img{width:22px;height:22px;display:block;pointer-events:none}
#pauseMenu{width:min(340px,92vw);padding:20px 20px 22px}
#pauseMenu::backdrop{background:rgba(8,12,10,.62)}
#pauseMenu h2{margin:0 0 12px;font-size:22px;text-align:center;color:#3a2410}
#pauseMenu .pm-warn{margin:0 0 14px;font-size:14px;font-weight:700;line-height:1.4;text-align:center;color:#5a3d1a}
#pauseMenu .pm-btns{display:grid;gap:10px}
#pauseMenu .pm-btns .ui-btn{width:100%}