/* v105: Items paper doll (dh/stage18.js) */
.doll18{--t18:46px;--g18:5px;display:grid;grid-template-columns:var(--t18) minmax(0,1fr) var(--t18);gap:0 8px;padding:7px 8px;border-radius:14px;
  height:calc(var(--t18) * 6 + var(--g18) * 5 + 14px);box-sizing:border-box;
  background:radial-gradient(ellipse 60% 55% at 50% 58%,rgba(120,86,190,.28),rgba(23,15,41,0) 70%),#170f29;
  border:1px solid rgba(212,175,55,.25);box-shadow:inset 0 0 18px rgba(0,0,0,.55)}
.d18col{display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.d18hero{position:relative;display:flex;align-items:flex-end;justify-content:center;min-width:0;min-height:0;overflow:visible}
.d18hero>.av{position:relative;width:min(100%,calc(var(--t18) * 6 - 4px))!important;height:auto!important;aspect-ratio:1;margin:0 auto 2px;flex:none;
  animation:idleSway 5.6s ease-in-out infinite;transform-origin:50% 96%}
.d18plat{position:absolute;left:50%;bottom:4px;width:72%;height:22px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(212,175,55,.38),rgba(212,175,55,.08) 70%,transparent);box-shadow:0 0 0 1px rgba(212,175,55,.18)}
/* a slot */
.dh .d18s{position:relative;display:grid;place-items:center;width:var(--t18);height:var(--t18);min-width:0;min-height:0;padding:0;margin:0;border-radius:10px;flex:none;
  color:#cbb98a;background-color:#1d1430;background-image:linear-gradient(180deg,rgba(255,240,210,.08),rgba(255,255,255,0) 45%,rgba(0,0,0,.3));
  border:1.5px solid rgba(212,175,55,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 3px rgba(0,0,0,.5);cursor:pointer;-webkit-tap-highlight-color:transparent}
.d18s .d18ic{width:62%;height:62%;opacity:.34}
.d18s .itico{width:78%;height:78%;object-fit:contain;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))}
.dh .d18s.full18{border-color:var(--rc);background-image:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--rc) 30%,transparent),transparent 72%),linear-gradient(180deg,rgba(255,240,210,.08),rgba(0,0,0,.3));
  box-shadow:0 0 8px color-mix(in srgb,var(--rc) 55%,transparent),inset 0 0 8px color-mix(in srgb,var(--rc) 28%,transparent)}
.dh .d18s.r-common{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 3px rgba(0,0,0,.5)}
.dh .d18s.r-unique{animation:uniqGlow 2.4s ease-in-out infinite}
.dh .d18s.empty18{border-style:dashed;border-color:rgba(212,175,55,.3)}
.dh .d18s.lock18{opacity:.62;cursor:default;border-color:rgba(255,255,255,.12);background-color:#140d22;color:#9a90b0;grid-template-rows:1fr auto;padding:5px 0 3px}
.d18s.lock18 .d18ic{width:17px;height:17px;opacity:.8;align-self:end}
.d18s.lock18 small{font:800 9px/1 system-ui,sans-serif;letter-spacing:.02em;color:#c9c1dc;white-space:nowrap}
.dh .d18s.pick18{border:1.5px solid #d4af37;border-style:solid;box-shadow:0 0 0 1px rgba(212,175,55,.5),0 0 12px rgba(212,175,55,.5)}
.dh .d18s.pick18 .d18ic{opacity:.75;color:#ffe9b0}
.d18p{position:absolute;top:-5px;right:-5px;padding:1px 3px;border-radius:6px;background:#1a1028;border:1px solid rgba(212,175,55,.65);color:#ffe9b0;font:800 9px/1.15 system-ui,sans-serif;font-style:normal;pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.6)}
.dh .d18s.new18{animation:d18in .7s ease-out}
@keyframes d18in{0%{transform:scale(.8);filter:brightness(2)}60%{transform:scale(1.08)}100%{transform:none;filter:none}}
.dh .d18s:focus-visible{outline:2px solid #ffe9b0;outline-offset:2px}
/* the selected bag filter: the Look page's gold-selected style instead of the bright blue fill */
.dh .invwin .itabs .btn.on{background:#2a1a48!important;background-image:linear-gradient(180deg,rgba(255,240,210,.12),rgba(255,255,255,0) 45%,rgba(0,0,0,.22))!important;
  border-color:#d4af37!important;box-shadow:0 0 0 1px rgba(212,175,55,.5),0 0 14px rgba(212,175,55,.45)!important;color:#fff4d6!important}
.dh .invwin .itabs .btn.on span{color:#fff4d6}
/* short phones: smaller slots, same layout */
@media (max-height:700px){.doll18{--t18:36px;--g18:3px;padding:6px 8px}.d18s .itico{width:82%;height:82%}.d18s.lock18 .d18ic{width:14px;height:14px}.d18s.lock18 small{font-size:8.5px}}
@media (max-width:359px) and (min-height:701px){.doll18{--t18:40px}}
.d18m{position:absolute;left:2px;bottom:2px;display:flex;gap:1px;pointer-events:none}
.d18el{display:block;width:7px;height:7px;border-radius:50%;background:var(--ec,#fde68a);box-shadow:0 0 0 1px #1a1028,0 0 4px var(--ec,#fde68a)}
.d18el.d18br{--ec:#ffe9b0;border-radius:1px;transform:rotate(45deg);width:6px;height:6px}
/* short phones: the doll leaves less room under the filters, so the empty-bag picture shrinks instead of being cut off */
@media (max-height:700px){.invwin .scroll.inv>.empty3{padding:4px 8px;gap:6px}.invwin .scroll.inv>.empty3 .eic{font-size:2.6rem}}
/* v107 fix: the doll is sized by the height the panel really has (100dvh, minus the iPhone notch and home bar), not by the
   media-query height. On an iPhone the media height is the tall viewport while the panel is the short one (Safari bars,
   Home Screen safe areas), so the 315px doll left the bag ~100-170px and the first card's Equip / Melt / Sell row was cut
   off at the bottom. The bag now always keeps ~200px: one whole card. */
@supports (height:100dvh){
  .doll18{--t18:clamp(32px, calc((100dvh - var(--safe-t,0px) - var(--safe-b,0px) - 500px) / 6), 46px)}
  @media (max-width:359px) and (min-height:701px){.doll18{--t18:clamp(32px, calc((100dvh - var(--safe-t,0px) - var(--safe-b,0px) - 500px) / 6), 40px)}}
  @media (max-height:700px){.doll18{--t18:clamp(30px, calc((100dvh - var(--safe-t,0px) - var(--safe-b,0px) - 494px) / 6), 36px)}}
}
/* v106b fix, restored in v110b (Nov 9, Dragon, iPhone Home Screen app): `.hall1 > *{position:relative}` turned the header's safe-area
   `top` offset into a visual shift that does not move the rest, so with the notch (safe-t ~59px) the floor header slid down onto the
   battle dots. The floor screen stacks from the bottom, so the header needs no offset; it keeps its gap with margin. */
.hall1>.top{top:auto;margin-bottom:2px}
/* v110b: older update notes fold away in the red update window */
.sysred .olderup{margin-top:10px;border-top:1px solid rgba(255,255,255,.15);padding-top:8px}
.sysred .olderup summary{cursor:pointer;font-weight:700;opacity:.85;padding:6px 0;min-height:32px;list-style-position:inside}

/* v110d: update window = one row per update (version + name), details on tap */
.sysred .rels{display:flex;flex-direction:column;gap:6px}
.sysred details.rel{border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.04)}
.sysred details.rel>summary{display:flex;gap:8px;align-items:baseline;padding:9px 10px;min-height:36px;cursor:pointer;list-style:none}
.sysred details.rel>summary::-webkit-details-marker{display:none}
.sysred details.rel>summary::after{content:'▾';margin-left:auto;opacity:.6}
.sysred details.rel[open]>summary::after{content:'▴'}
.sysred details.rel>summary b{color:#ffd56a;font-size:.85em;white-space:nowrap}
.sysred details.rel>summary span{font-weight:600;line-height:1.25;text-align:left}
.sysred details.rel .notes{margin:0;padding:2px 12px 10px 26px;opacity:.9;font-size:.92em}
.sysred details.rel .notes li{margin:4px 0}