/* The original HUD resource-frame.webp, action-frame.webp and mounted crystal.
   These are the shipped assets, with no new raster artwork or painted gems. */
.shared-metal-frame {
  --frame-unit:26px;
  display:grid;position:absolute;inset:0;z-index:0;pointer-events:none;
  grid-template-columns:var(--frame-unit) minmax(0,1fr) var(--frame-unit) minmax(0,1fr) var(--frame-unit);
  grid-template-rows:var(--frame-unit) minmax(0,1fr) var(--frame-unit);
}
/* Each piece is a plain box in the grid; its SVG fills that box absolutely.
   WebKit (iPhone) resolved height:100% of an SVG grid item against the whole
   frame, stretching the strips over the window and eating its top edge. */
.shared-metal-frame > .frame-piece { display:block;position:relative;min-width:0;min-height:0;overflow:hidden; }
.shared-metal-frame > .frame-piece > svg { position:absolute;left:0;top:0;display:block;width:100%;height:100%;overflow:hidden;fill:none;stroke:none;filter:none; }
.frame-tl { grid-area:1/1; }.frame-top { grid-area:1/2/2/5; }.frame-tr { grid-area:1/5; }
.frame-left { grid-area:2/1; }.frame-center { grid-area:2/2/3/5; }.frame-right { grid-area:2/5; }
.frame-bl { grid-area:3/1; }.frame-bottom-left { grid-area:3/2; }.frame-jewel { grid-area:3/3; }.frame-bottom-right { grid-area:3/4; }.frame-br { grid-area:3/5; }
#sheet:not([data-type="bag"]) > .shared-metal-frame { display:none; }
#sheet[data-type="bag"],#itemSheet { isolation:isolate;border-color:transparent;border-radius:12px;background:none;box-shadow:0 22px 65px #000c; }
#sheet[data-type="bag"] .sheethead,#sheet[data-type="bag"] #sheetBody,#itemSheet #itemBody { position:relative;z-index:1; }
.bag-frame-corners,.bag-slot-corners,#itemSheet .item-card-corners { display:none!important; }
.bag-slot,.bag-slot--empty,.bag-slot--empty:hover { isolation:isolate;border:1px solid transparent;border-radius:0;background:none;box-shadow:none; }
.bag-slot > .shared-metal-frame { --frame-unit:14px; }
.bag-slot::before,.bag-slot::after { display:none; }
.bag-art { z-index:1;inset:9px 8px 12px; }
.bag-count { bottom:7px;right:9px; }
.bag-category-badge { top:8px;left:9px; }
.bag-empty-mark { z-index:1; }
.bag-slot:hover > .shared-metal-frame { filter:brightness(1.12); }
#itemSheet .item-display { position:relative;isolation:isolate;border-color:transparent;border-radius:0;background:none;box-shadow:none; }
#itemSheet .item-display > .shared-metal-frame { --frame-unit:21px; }
#itemSheet .item-display > img,#itemSheet .item-display > svg { position:relative;z-index:1; }
.bag-footer::before,#itemSheet .item-sale::before {
  width:20px;height:20px;top:-10px;left:calc(50% - 10px);transform:none;
  background:url('/assets/ui-mmorpg/crystal-mounted.webp') center/contain no-repeat;
  border:0;box-shadow:none;
}
#sheet[data-type="bag"] .sheethead button,#itemSheet .item-close,
#itemSheet .item-quantity-stepper button,#itemSheet .item-presets button,
#itemSheet #itemQuantity,#itemSheet .item-primary,.bag-tabs {
  border:1px solid transparent;border-image:url('/assets/ui-mmorpg/action-frame.webp') 64 fill / 9px / 0 stretch;
  border-radius:0;background:none;box-shadow:none;
}
#sheet[data-type="bag"] .sheethead button,#itemSheet .item-close { border-image-width:7px; }
#itemSheet .item-close { z-index:3; }
#itemSheet .item-presets button[aria-pressed="true"] { outline:1px solid #4dddec;outline-offset:-3px;filter:brightness(1.23); }
#itemSheet .item-primary { border-image-width:12px;color:#e6fbff;filter:drop-shadow(0 0 3px #17acc644); }
.bag-tabs { padding:4px; }
.bag-tab { border-color:#41607266;background:transparent; }
.bag-tab.is-active { border-color:#58dbed;background:#08677b55;box-shadow:inset 0 0 12px #1d829033; }
@media(max-width:350px) { .bag-slot > .shared-metal-frame { --frame-unit:12px; }.bag-art { inset:8px 7px 11px; }.bag-count { right:7px;bottom:6px; } }
@media(max-height:660px) { #itemSheet .item-display > .shared-metal-frame { --frame-unit:17px; } }

/* Review: compact header meter, breathable footer, aligned silver close controls. */
#sheet[data-type="bag"] .sheethead {
  display:grid;grid-template-columns:minmax(0,1fr) 100px 32px;gap:10px;
  margin:1px 5px 14px;min-height:48px;
}
#sheet[data-type="bag"] .sheethead h2 { font-size:25px;gap:6px;white-space:nowrap; }
#sheet[data-type="bag"] .sheethead h2::before { width:35px;height:41px;flex:none; }
#sheet[data-type="bag"] .bag-capacity { display:flex;flex-direction:column;align-items:stretch;gap:5px;margin:0;min-width:0; }
#sheet[data-type="bag"] .bag-capacity>b { font:700 13px/1.1 "Dig Digits","Kopai Serif",Georgia,serif; }
#sheet[data-type="bag"] .bag-capacity-track { flex:none;height:7px;width:100%;box-sizing:border-box; }
#sheet[data-type="bag"] #sheetBody>.bag-footer { margin:15px 5px 0;padding:20px 0 13px;line-height:1.4; }
#sheet[data-type="bag"] .sheethead button,#itemSheet .item-close {
  box-sizing:border-box;width:32px;height:32px;min-width:32px;min-height:32px;
  padding:0;display:grid;place-items:center;aspect-ratio:1;border-radius:0;
  border:0;border-image:none;background:url('/assets/ui-mmorpg/action-frame.webp') center/100% 100% no-repeat;
  box-shadow:none;color:#c5d6df;font-size:0;line-height:1;transform:none;
}
#sheet[data-type="bag"] .sheethead button>.ui-icon { display:none; }
#sheet[data-type="bag"] .sheethead button::after,#itemSheet .item-close::after {
  content:'';width:15px;height:15px;
  background:linear-gradient(150deg,#f4f7f8 5%,#c4d2d9 35%,#82939f 49%,#dde7eb 60%,#a2b3bf 100%);
  clip-path:polygon(12% 0,50% 38%,88% 0,100% 12%,62% 50%,100% 88%,88% 100%,50% 62%,12% 100%,0 88%,38% 50%,0 12%);
}
#itemSheet .item-close { top:16px;right:16px; }
#itemSheet .item-quantity-error { min-height:0;margin:0; }
#itemSheet .item-quantity-error:not(:empty) { margin:5px 0; }
#itemSheet .item-presets { margin-bottom:12px; }
#itemSheet .item-price { gap:5px;line-height:1.3;font-size:12px;min-height:22px; }
#itemSheet .item-price b { font:700 16px/1.3 "Dig Digits","Kopai Serif",Georgia,serif;gap:3px; }
#itemSheet .item-total { margin:2px 0 12px; }
#itemSheet .item-total b { font-size:17px; }
#itemSheet .item-coin { width:19px;height:19px; }
#itemSheet .item-primary {
  min-height:42px;padding:8px 10px;font-size:17px;
  border-image:url('/assets/ui-mmorpg/action-frame.webp') 64 / 9px / 0 stretch;
  background:radial-gradient(ellipse at 50% 0,#b68e4b55,transparent 80%),linear-gradient(180deg,#6e522d,#46351f);
  color:#fff0d4;text-shadow:0 1px 2px #251708;filter:none;
}
@media(max-width:350px) {
  #sheet[data-type="bag"] .sheethead { grid-template-columns:minmax(0,1fr) 78px 32px;gap:7px;margin-left:3px;margin-right:3px; }
  #sheet[data-type="bag"] .sheethead h2 { font-size:21px;gap:4px; }
  #sheet[data-type="bag"] .sheethead h2::before { width:27px;height:34px; }
  #sheet[data-type="bag"] .bag-capacity>b { font-size:12px; }
}
@media(max-height:620px) {
  #sheet[data-type="bag"] .sheethead { margin-bottom:10px;min-height:42px; }
  #sheet[data-type="bag"] #sheetBody>.bag-footer { margin-top:10px;padding-top:15px;padding-bottom:10px; }
}

#itemSheet .item-primary { position:relative;isolation:isolate;background:none;border-image:url('/assets/ui-mmorpg/action-frame.webp') 64 fill / 9px / 0 stretch; }
#itemSheet .item-primary::before { content:'';position:absolute;inset:5px;z-index:-1;border-radius:4px;background:radial-gradient(ellipse at 50% 0,#b68e4b55,transparent 80%),linear-gradient(180deg,#6e522d,#46351f); }

/* Segmented category selector: the existing metal surround, quiet text-only tabs. */
#sheet[data-type="bag"] .bag-tabs {
  display:flex;gap:0;margin:0 0 10px;padding:5px;
  border-image:url('/assets/ui-mmorpg/action-frame.webp') 64 fill / 9px / 0 stretch;
  box-shadow:0 -4px 16px #0005;
}
#sheet[data-type="bag"] .bag-tab {
  position:relative;flex:1;min-width:0;min-height:40px;
  display:flex;align-items:center;justify-content:center;
  padding:10px 3px;gap:0;border:0;border-radius:0;
  background:linear-gradient(180deg,#104556,#0a3444);
  box-shadow:inset 0 1px 0 #ffffff0a;
  color:#91b0c4;font-size:13px;font-weight:500;line-height:1.2;
  text-shadow:none;transition:background .2s,color .2s;
}
#sheet[data-type="bag"] .bag-tab+.bag-tab { border-left:1px solid #41607288;box-shadow:inset 1px 0 0 #ffffff09,inset 0 1px 0 #ffffff0a; }
#sheet[data-type="bag"] .bag-tab:first-child { border-radius:5px 0 0 5px; }
#sheet[data-type="bag"] .bag-tab:last-child { border-radius:0 5px 5px 0; }
#sheet[data-type="bag"] .bag-tab.is-active { color:#ecfcff;background:linear-gradient(180deg,#05202c,#062937);box-shadow:inset 0 3px 8px #001018bb; }
#sheet[data-type="bag"] .bag-tab.is-active::after { content:'';position:absolute;bottom:4px;left:28%;right:28%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#58dbed,transparent); }
#sheet[data-type="bag"] .bag-tab:hover { color:#fff; }
#sheet[data-type="bag"] .bag-tab:focus-visible { outline:2px solid #ccebf3;outline-offset:-3px; }
@media(max-width:350px) { #sheet[data-type="bag"] .bag-tab { font-size:11px;padding:9px 2px;min-height:34px; } }

#sheet[data-type="bag"] .bag-tab.is-active::after { content:none; }

/* 1.5.6 — compact backpack: narrower window, four visible rows, tighter
   header/footer, lighter backdrop so the mine stays visible around it.
   Kept last so it wins over the 1.5.2–1.5.5 backpack rules above. */
#sheet[data-type="bag"] {
  --bag-width:min(336px, calc(100vw - 32px));
  --bag-slot:calc((var(--bag-width) - 50px) / 4);
  width:var(--bag-width); max-width:336px; max-height:calc(100dvh - 40px);
  padding:12px 11px 10px;
}
#sheet[data-type="bag"]::backdrop { background:#020b1266; backdrop-filter:none; }
#sheet[data-type="bag"] .sheethead { min-height:36px; margin:0 2px 8px; }
#sheet[data-type="bag"] .sheethead h2 { font-size:20px; gap:5px; }
#sheet[data-type="bag"] .sheethead h2::before { width:27px; height:32px; }
#sheet[data-type="bag"] .bag-capacity>b { font-size:12px; }
#sheet[data-type="bag"] .bag-tabs { margin-bottom:8px; }
#sheet[data-type="bag"] .bag-tab { min-height:32px; padding-top:6px; padding-bottom:6px; font-size:11px; }
#sheet[data-type="bag"] .bag-grid { gap:6px; }
#sheet[data-type="bag"] .bag-grid-scroll { height:calc(var(--bag-slot) * 4 + 22px); max-height:calc(100dvh - 180px); }
#sheet[data-type="bag"] .bag-slot > .shared-metal-frame { --frame-unit:12px; }
#sheet[data-type="bag"] .bag-count { font-size:14px; }
#sheet[data-type="bag"] #sheetBody>.bag-footer { margin:8px 4px 0; padding:10px 0 4px; font-size:10px!important; line-height:1.2; }
@media(max-width:350px) {
  #sheet[data-type="bag"] { --bag-width:calc(100vw - 28px); --bag-slot:calc((var(--bag-width) - 46px) / 4); padding-left:9px; padding-right:9px; }
  #sheet[data-type="bag"] .sheethead h2 { font-size:18px; }
}

/* 1.5.6 — backpack categories: plain text tabs, the active one glows and
   gets a light underline. No boxed control inside the already framed window. */
#sheet[data-type="bag"] .bag-tabs {
  display:flex;gap:0;margin:0 0 12px;padding:0;position:relative;
  border:0;border-image:none;background:none;box-shadow:none;border-bottom:1px solid #35535f;
}
#sheet[data-type="bag"] .bag-tab,
#sheet[data-type="bag"] .bag-tab+.bag-tab,
#sheet[data-type="bag"] .bag-tab:first-child,
#sheet[data-type="bag"] .bag-tab:last-child {
  flex:1;min-height:34px;padding:4px 2px 9px;border:0;border-radius:0;
  background:none;box-shadow:none;color:#6f8d9b;font-size:13px;font-weight:600;letter-spacing:.3px;
}
#sheet[data-type="bag"] .bag-tab:hover { color:#cfe6ef; }
#sheet[data-type="bag"] .bag-tab.is-active { background:none;box-shadow:none;border:0;color:#f1fbff;text-shadow:0 0 8px #56e6ff88; }
#sheet[data-type="bag"] .bag-tab.is-active::after {
  content:'';position:absolute;left:18%;right:18%;bottom:-1px;height:3px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,transparent,#4fe6f7 20%,#c9fbff 50%,#4fe6f7 80%,transparent);box-shadow:0 0 10px #3fe3f5cc;
}
@media(max-width:350px) { #sheet[data-type="bag"] .bag-tab,#sheet[data-type="bag"] .bag-tab+.bag-tab { font-size:12px; } }

/* 1.5.6 — header/footer polish: wider frame without taller content, tighter
   "359/460" sitting just above its bar, smaller close button away from the
   frame edge, more air under the footer hint. */
#sheet[data-type="bag"] {
  --bag-width:min(352px, calc(100vw - 24px));
  --bag-slot:calc((var(--bag-width) - 66px) / 4);
  max-width:352px; padding-left:19px; padding-right:19px;
}
#sheet[data-type="bag"] .sheethead { grid-template-columns:minmax(0,1fr) 96px 26px; gap:10px; margin-right:4px; }
#sheet[data-type="bag"] .bag-capacity { gap:2px; align-self:center; padding-top:4px; }
#sheet[data-type="bag"] .bag-capacity>b { white-space:nowrap; }
#sheet[data-type="bag"] .bag-capacity-sep { margin:0 1px; }
#sheet[data-type="bag"] .sheethead button { width:26px;height:26px;min-width:26px;min-height:26px; }
#sheet[data-type="bag"] .sheethead button::after { width:11px;height:11px; }
#sheet[data-type="bag"] #sheetBody>.bag-footer { margin:10px 4px 0; padding:11px 0 14px; }
@media(max-width:350px) {
  #sheet[data-type="bag"] { --bag-width:calc(100vw - 20px); --bag-slot:calc((var(--bag-width) - 54px) / 4); padding-left:13px; padding-right:13px; }
  #sheet[data-type="bag"] .sheethead { grid-template-columns:minmax(0,1fr) 78px 26px; gap:7px; }
}
/* Tab divider matches the footer divider: same 4px side insets. */
#sheet[data-type="bag"] .bag-tabs { margin-left:4px; margin-right:4px; }
/* Both dividers barely visible; no crystal on the footer divider. */
#sheet[data-type="bag"] .bag-tabs { border-bottom-color:#8cc3d61f; }
#sheet[data-type="bag"] #sheetBody>.bag-footer { border-top-color:#8cc3d61f; }
#sheet[data-type="bag"] .bag-footer::before { content:none; display:none; }
/* Slightly larger backpack (still four visible rows). */
#sheet[data-type="bag"] { --bag-width:min(380px, calc(100vw - 20px)); max-width:380px; }
#sheet[data-type="bag"] .sheethead h2 { font-size:22px; }
#sheet[data-type="bag"] .sheethead h2::before { width:30px; height:35px; }
@media(max-width:350px) { #sheet[data-type="bag"] { --bag-width:calc(100vw - 16px); } #sheet[data-type="bag"] .sheethead h2 { font-size:19px; } }

/* 1.5.6 — item card sized like the backpack: same width, never taller than
   it, compact typography and controls, title clear of the close button. */
#itemSheet {
  width:min(380px, calc(100vw - 20px)); max-width:380px; max-height:calc(100dvh - 40px);
  padding:14px 19px 16px;
}
#itemSheet::backdrop { background:#010910c4; backdrop-filter:blur(2px); }
#itemSheet #itemTitle { font-size:22px; margin:2px 34px 10px; line-height:1.15; }
#itemSheet .item-close { top:13px; right:14px; width:26px; height:26px; min-width:26px; min-height:26px; }
#itemSheet .item-close::after { width:11px; height:11px; }
#itemSheet .item-display { width:92px; height:92px; margin:0 auto 8px; }
#itemSheet .item-display > img,#itemSheet .item-display > svg { width:76px; height:76px; max-width:76px; max-height:76px; }
#itemSheet .item-display > .shared-metal-frame { --frame-unit:15px; }
#itemSheet .item-owned { font-size:15px; margin:0 0 3px; }
#itemSheet .item-purpose { font-size:12px; line-height:1.3; margin:0 auto 10px; }
#itemSheet .item-sale,#itemSheet .item-use { padding-top:8px; border-top-color:#8cc3d61f; }
#itemSheet .item-sale::before,#itemSheet .item-use::before { content:none; display:none; }
#itemSheet .item-quantity-label { display:block; text-align:center; font-size:14px; margin:0 0 6px; }
#itemSheet .item-quantity-stepper { grid-template-columns:34px minmax(60px,1fr) 34px; gap:9px; max-width:210px; margin-bottom:4px; }
#itemSheet .item-quantity-stepper button { min-height:34px; font-size:24px; }
#itemSheet #itemQuantity { font-size:20px; min-height:34px; }
#itemSheet .item-range-row { font-size:12px; }
#itemSheet #itemQuantityRange { margin:4px 0; }
#itemSheet .item-presets { gap:6px; margin-bottom:8px; }
#itemSheet .item-presets button { min-height:30px; font-size:14px; padding:3px 1px; }
#itemSheet .item-price { font-size:11px; min-height:18px; line-height:1.25; }
#itemSheet .item-price b { font-size:14px; }
#itemSheet .item-total { margin:1px 0 9px; }
#itemSheet .item-total b { font-size:15px; }
#itemSheet .item-coin { width:16px; height:16px; }
#itemSheet .item-primary { min-height:38px; padding:6px 10px; font-size:15px; border-image-width:10px; }
#itemSheet .item-action-note { font-size:12px; line-height:1.3; margin:0 0 9px; }
@media(max-width:350px) { #itemSheet { width:calc(100vw - 16px); padding-left:13px; padding-right:13px; } #itemSheet #itemTitle { font-size:19px; } }

/* 1.5.6 — item card controls: solid buttons without the inner metal gap.
   Bronze primary action, dark secondary buttons, cyan selected preset. */
#itemSheet .item-quantity-stepper button,#itemSheet .item-presets button,#itemSheet #itemQuantity,#itemSheet .item-primary{border-image:none!important;filter:none}
#itemSheet .item-quantity-stepper button>.shared-metal-frame,#itemSheet .item-presets button>.shared-metal-frame,#itemSheet .item-primary>.shared-metal-frame,#itemSheet #itemQuantity>.shared-metal-frame{display:none!important}
#itemSheet .item-primary::before{content:none!important}
#itemSheet .item-primary{position:relative;min-height:40px;border:1px solid #d9b26a;border-radius:8px;background:linear-gradient(180deg,#b8894a,#8a6230 55%,#6d4b22);box-shadow:inset 0 1px 0 #ffe3a866,inset 0 -2px 0 #0003,0 2px 6px #0007;color:#fff4dc;font:700 16px/1 "Dig Digits","Kopai Serif",Georgia,serif;text-shadow:0 1px 1px #3a2408}
#itemSheet .item-presets button,#itemSheet .item-quantity-stepper button{border:1px solid #3d6272;border-radius:7px;background:linear-gradient(180deg,#123646,#0a2230);box-shadow:inset 0 1px 0 #ffffff12;color:#cfe6ef}
#itemSheet .item-presets button[aria-pressed="true"]{border-color:#4fe0ee;background:linear-gradient(180deg,#0f5566,#0a3645);box-shadow:0 0 8px #2fd6e844,inset 0 1px 0 #bff6ff33;color:#fff;outline:0}
#itemSheet #itemQuantity{border:1px solid #3d6272;border-radius:7px;background:#04141c;box-shadow:inset 0 2px 4px #0008}
/* Breathing room around the primary action. */
#itemSheet { padding-bottom:28px; }
#itemSheet .item-total { margin-bottom:14px; }
#itemSheet .item-action-note { margin-bottom:14px; }
#itemSheet .item-primary { display:block; margin:0; }
/* Close button off the frame; title nearer the item art; single unit-price
   line; total shown inside the sell button. */
#itemSheet .item-close { top:19px; right:20px; }
#itemSheet #itemTitle { margin:10px 38px 6px; }
#itemSheet .item-price { gap:4px; margin:2px 0 14px; font-size:12px; color:#7f9eae; }
#itemSheet .item-price b { font-size:14px; }
#itemSheet .item-primary { display:flex; align-items:center; justify-content:center; gap:6px; }
#itemSheet .item-primary #itemTotalValue { color:#fff4dc; }
#itemSheet .item-primary .item-coin { width:18px; height:18px; }
/* Unit price as a row: label left, value right, aligned with the presets. */
#itemSheet .item-price { justify-content:space-between; padding:0 2px; font-size:13px; }
#itemSheet .item-price b { gap:5px; font-size:15px; }
#itemSheet .item-price { margin-top:12px; }
#itemSheet .item-price { padding:0; margin:16px 0 18px; }
/* 1.5.6 — sale success state of the bronze button. */
#itemSheet .item-primary.is-success,#itemSheet .item-primary.is-success:disabled {
  opacity:1; cursor:default; border-color:#f3d48f;
  background:linear-gradient(180deg,#c99a55,#9a6f37 55%,#7a5427);
  box-shadow:inset 0 1px 0 #fff0c888,0 0 14px #f0c46a66,0 2px 6px #0007;
  animation:item-success-pop .32s ease-out;
}
#itemSheet .item-success-icon { width:20px; height:20px; flex:none; color:#fff4dc; filter:drop-shadow(0 1px 1px #3a2408); }
@keyframes item-success-pop { 0% { transform:scale(.96); } 55% { transform:scale(1.03); } 100% { transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { #itemSheet .item-primary.is-success { animation:none; } }
/* One light sheen sweeps across the button when the sale succeeds. */
#itemSheet .item-primary { overflow:hidden; isolation:isolate; }
#itemSheet .item-primary.is-success::after {
  content:''; position:absolute; top:-20%; bottom:-20%; left:0; width:38%; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff6dd00 10%,#fff6ddaa 50%,#fff6dd00 90%,transparent);
  transform:translateX(-130%) skewX(-20deg); animation:item-success-sheen .45s ease-out .05s both;
}
#itemSheet .item-primary.is-success > * { position:relative; z-index:1; }
@keyframes item-success-sheen { to { transform:translateX(330%) skewX(-20deg); } }
@media(prefers-reduced-motion:reduce) { #itemSheet .item-primary.is-success::after { animation:none; display:none; } }

/* 1.5.6 — backpack slots as soft recessed wells: no per-slot metal frame or
   corner crystals; the grid reads as one panel with sockets. */
#sheet[data-type="bag"] .bag-slot > .shared-metal-frame { display:none !important; }
#sheet[data-type="bag"] .bag-slot::before,#sheet[data-type="bag"] .bag-slot::after { display:none !important; }
#sheet[data-type="bag"] .bag-slot {
  border:1px solid #0a1a22; border-radius:9px;
  background:radial-gradient(ellipse at 50% 45%,#0f3342 0%,#081d27 70%);
  box-shadow:inset 0 3px 7px #000c,inset 0 -1px 0 #ffffff10,0 1px 0 #7fc6dc22;
}
#sheet[data-type="bag"] .bag-slot--empty,#sheet[data-type="bag"] .bag-slot--empty:hover {
  border-color:#0a1a22; background:#071820; box-shadow:inset 0 3px 7px #000b,0 1px 0 #7fc6dc18;
}
#sheet[data-type="bag"] .bag-slot:not(.bag-slot--empty):hover { border-color:#2f6474; background:radial-gradient(ellipse at 50% 45%,#134050 0%,#092330 70%); }
#sheet[data-type="bag"] .bag-slot:not(.bag-slot--empty):hover > .shared-metal-frame { filter:none; }
#sheet[data-type="bag"] .bag-art { inset:8px 8px 11px; }
#sheet[data-type="bag"] .bag-count { bottom:4px; right:7px; }
#itemSheet .item-purpose { white-space:pre-line; }
/* 1.5.6 — item art sits in the same recessed well as the backpack slots. */
#itemSheet .item-display > .shared-metal-frame { display:none !important; }
#itemSheet .item-display {
  border:1px solid #0a1a22; border-radius:12px;
  background:radial-gradient(ellipse at 50% 45%,#0f3342 0%,#081d27 70%);
  box-shadow:inset 0 4px 10px #000c,inset 0 -1px 0 #ffffff10,0 1px 0 #7fc6dc22;
}
/* 1.5.6 — close buttons as small recessed wells, matching the slots. */
#sheet[data-type="bag"] .sheethead button,#itemSheet .item-close {
  background:#081d27; border:1px solid #0a1a22; border-radius:8px; border-image:none;
  box-shadow:inset 0 3px 6px #000c,0 1px 0 #7fc6dc22;
}
#sheet[data-type="bag"] .sheethead button > .shared-metal-frame,#itemSheet .item-close > .shared-metal-frame { display:none !important; }
#sheet[data-type="bag"] .sheethead button:hover,#itemSheet .item-close:hover { border-color:#2f6474; }

/* 1.5.6 — layout mechanics are the proven 1.5.5 ones (fit-content flex
   dialog, 28px screen margin). The grid keeps the 1.5.5 208px reserve for the
   header/tabs/footer, so the content always fits even when WebKit does not
   shrink the grid inside a fit-content dialog. */
#sheet[data-type="bag"] { max-height:calc(100dvh - 28px); }
#sheet[data-type="bag"] .bag-grid-scroll { max-height:calc(100dvh - 208px); }
#itemSheet { max-height:calc(100dvh - 28px); }
@media(max-height:640px) {
  #itemSheet { padding-top:10px; padding-bottom:18px; }
  #itemSheet #itemTitle { font-size:19px; margin-bottom:6px; }
  #itemSheet .item-display { width:72px; height:72px; margin-bottom:6px; }
  #itemSheet .item-display > img,#itemSheet .item-display > svg { width:60px; height:60px; max-width:60px; max-height:60px; }
  #itemSheet .item-owned { font-size:14px; }
  #itemSheet .item-purpose { margin-bottom:8px; }
  #itemSheet .item-quantity-label { margin-bottom:4px; }
  #itemSheet .item-price { margin:10px 0 12px; }
}

/* 1.5.6 — backpack centred again, without height:fit-content. On iPhone WebKit
   computed the fit-content height of this flex dialog shorter than its
   content, the dialog scrolled inside itself and the top of the frame
   disappeared. Now: plain block, height from content, centred with
   top/transform, overflow visible (the dialog is not a scroll container and
   can never be scrolled). The grid limit keeps the whole window on screen. */
#sheet[data-type="bag"] {
  inset:auto !important; top:50% !important; left:0 !important; right:0 !important;
  margin:0 auto !important; height:auto !important; transform:translateY(-50%);
  overflow:visible !important;
}
#sheet[data-type="bag"][open] { display:block; }
#sheet[data-type="bag"] #sheetBody { display:block; }

/* 1.5.6 — backpack multi-select selling. */
#sheet[data-type="bag"] .bag-slot { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
#sheet[data-type="bag"] .bag-slot.is-selected {
  border-color:#4fe0ee; background:radial-gradient(ellipse at 50% 45%,#12495a 0%,#0a2b38 70%);
  box-shadow:inset 0 3px 7px #000a,0 0 0 1px #4fe0ee66,0 0 10px #2fd6e855;
}
#sheet[data-type="bag"] .bag-check {
  position:absolute; top:4px; right:4px; z-index:3; display:grid; place-items:center; width:18px; height:18px; border-radius:50%;
  background:#2fc3d6; box-shadow:0 0 0 1.5px #06202b,0 1px 3px #0009;
}
#sheet[data-type="bag"] .bag-check svg { width:13px; height:13px; fill:none; stroke:#fff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
#sheet[data-type="bag"].bag-selecting .bag-slot[data-target]:not(.is-selected) .bag-art { opacity:.72; }
#sheet[data-type="bag"] .bag-slot.is-denied { animation:bag-slot-deny .32s ease-in-out; }
@keyframes bag-slot-deny { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-4px); } 50% { transform:translateX(4px); } 75% { transform:translateX(-2px); } }
#sheet[data-type="bag"] #sheetBody>.bag-footer.bag-sellbar { display:flex; gap:8px; padding:10px 0 26px; font-size:14px !important; }
/* The sell bar is taller than the hint: keep the whole window on short screens. */
#sheet[data-type="bag"].bag-selecting .bag-grid-scroll { max-height:calc(100dvh - 256px); }
.bag-sellbar button { min-height:38px; border-radius:8px; font:700 15px/1 "Dig Digits","Kopai Serif",Georgia,serif; cursor:pointer; }
.bag-sellbar .bag-sell-go {
  position:relative; flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 10px; overflow:hidden;
  border:1px solid #d9b26a; background:linear-gradient(180deg,#b8894a,#8a6230 55%,#6d4b22);
  box-shadow:inset 0 1px 0 #ffe3a866,inset 0 -2px 0 #0003,0 2px 6px #0007; color:#fff4dc; text-shadow:0 1px 1px #3a2408;
}
.bag-sellbar .bag-sell-go:disabled { opacity:.55; cursor:default; }
.bag-sellbar .bag-sell-go.is-success:disabled { opacity:1; }
.bag-sellbar .bag-sell-go.is-success { border-color:#f3d48f; background:linear-gradient(180deg,#c99a55,#9a6f37 55%,#7a5427); box-shadow:inset 0 1px 0 #fff0c888,0 0 14px #f0c46a66,0 2px 6px #0007; animation:item-success-pop .32s ease-out; }
.bag-sellbar .bag-sell-coin { width:18px; height:18px; object-fit:contain; }
.bag-sellbar .bag-sell-check { width:19px; height:19px; flex:none; }
@media(max-width:350px) { .bag-sellbar button { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { #sheet[data-type="bag"] .bag-slot.is-denied,.bag-sellbar .bag-sell-go.is-success { animation:none; } }

/* Bottom rhythm: divider close to the slots (6px). The sell button sits 24px
   above the visible metal frame line (its padding is set on .bag-sellbar). */
#sheet[data-type="bag"] #sheetBody>.bag-footer { margin-top:6px; padding-bottom:12px; }
#sheet[data-type="bag"] #sheetBody>.bag-footer.bag-sellbar { padding-bottom:26px; }

/* 1.5.6 — the footer has one fixed height whether it shows the hint or the
   sell button, so the backpack never jumps when selection starts or ends.
   Content box 36px (= button height); the hint is centred where the button
   sits; 26px bottom padding keeps the button 24px above the frame line. */
#sheet[data-type="bag"] #sheetBody>.bag-footer,
#sheet[data-type="bag"] #sheetBody>.bag-footer.bag-sellbar {
  box-sizing:border-box; height:71px; min-height:0; margin-top:6px; padding:8px 0 26px;
  display:flex; align-items:center; justify-content:center;
}
#sheet[data-type="bag"] .bag-sellbar .bag-sell-go { height:36px; min-height:36px; }
#sheet[data-type="bag"] .bag-grid-scroll,
#sheet[data-type="bag"].bag-selecting .bag-grid-scroll { max-height:calc(100dvh - 256px); }