/* EO Wayback: one theme, the 0.0.28 client chrome rebuilt for the web.
   Palette sources, spacing scale (4 8 12 16 24 40) and the DOM contract: docs/ui-design.md.
   Bevels are colour steps and 1px lines, as in the bitmaps; never gradients. */

/* 1. Tokens */
:root {
  color-scheme: dark;
  /* sampled from gfx002 #149 #144 #101 #125 #158 */
  --ink: #000;
  --hairline: #313131;
  --rail: #a57331;
  --plank: #4a3119;
  --board: #7b5a31;
  --well-0: #291908;
  --well: #312108;
  --well-2: #3a2919;
  --well-3: #423119;
  --trim: #a56b31;
  --felt: #9c7331;
  --parch: #b59463;
  --parch-hi: #cead7b;
  --gold: #d6a55a;
  --gold-lo: #a56b31;
  --cream: #efdece;
  --tag: #b59c73;
  --gdi: #f0f0c8;
  --ink-text: #28140a;
  /* derived */
  --night: #150e07;
  --gold-hi: #efc27a;
  --gold-text: #e6b04a;
  --ink-soft: #3a2610;
  --seal: #8c2410;
  --focus: #ffe9a8;

  --f-ui: Tahoma, Verdana, "DejaVu Sans", "Segoe UI", sans-serif;
  --f-win: Arial, "Liberation Sans", Helvetica, sans-serif;
  --f-show: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --gutter: 24px;
  --wrap: 1180px;
  --ring: 0 0 0 1px var(--trim), 0 0 0 2px var(--ink); /* with border:1px ink = black|gold|black */
  --lift: 0 12px 32px rgb(0 0 0 / .55);
  --outline: -1px 0 var(--ink), 1px 0 var(--ink), 0 -1px var(--ink), 0 1px var(--ink);
}

/* 2. Base */
*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--cream); font: 14px/1.5 var(--f-ui);
  background: radial-gradient(ellipse 80% 40% at 50% 0, rgb(214 156 58 / .08), transparent) no-repeat var(--night);
}
a { color: var(--gold-text); }
a:hover { color: var(--cream); }
h1, h2, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; }
[hidden] { display: none !important; }
abbr[title] { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.app:focus, [tabindex="-1"]:focus-visible { outline: none; } /* headings that only take focus from the router */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; z-index: 70; left: 8px; top: -48px; padding: 8px 12px; color: var(--ink-text); background: var(--gold); border: 1px solid var(--ink); }
.skip:focus { top: 8px; }
.app { flex: 1; padding-block: 24px 40px; }

/* 3. Chrome: plank bars, labels, buttons, fields */
.topbar, .foot { background: var(--plank); border: 0 solid var(--ink); }
.topbar { margin-bottom: 6px; border-bottom-width: 1px; box-shadow: 0 5px 0 var(--rail), 0 6px 0 var(--hairline); }
.foot { margin-top: 6px; border-top-width: 1px; box-shadow: 0 -5px 0 var(--rail), 0 -6px 0 var(--hairline); font-size: 12px; }
.topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--cream); text-decoration: none; }
.brand:hover { color: var(--cream); }
.brand__mark, .compass { filter: drop-shadow(1px 0 var(--ink)) drop-shadow(-1px 0 var(--ink)) drop-shadow(0 1px var(--ink)) drop-shadow(0 -1px var(--ink)); }
.brand__mark { width: 32px; height: 16px; }
.brand__mark::before, .compass::before { content: ""; display: block; height: 100%; background: var(--gold); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.brand__text { display: grid; }
.brand__name { font: italic bold 24px/1.05 var(--f-show); text-shadow: var(--outline), 0 2px var(--ink); }
.brand__tag { font-size: 12px; color: var(--tag); }
.foot__inner { display: grid; gap: 4px; padding-block: 16px 24px; }
.foot a { color: var(--cream); }

.label, .win__title, .stats__title { display: block; padding: 0; font: bold 12px/1 var(--f-ui); color: var(--tag); text-transform: lowercase; }
.label { margin-bottom: 6px; }
.win__title { width: fit-content; margin-bottom: -1px; padding: 4px 10px; background: var(--well-2); border: 1px solid var(--ink); border-radius: 3px 3px 0 0; box-shadow: inset 1px 1px var(--board); text-shadow: 1px 1px var(--ink); }

.btn, .seg :where(label) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 16px;
  color: var(--ink-text); font: bold 13px/1 var(--f-ui); text-decoration: none; cursor: pointer;
  background: var(--gold); border: 1px solid var(--ink); border-radius: 2px;
  box-shadow: inset 1px 1px var(--gold-hi), inset -1px -1px var(--gold-lo);
}
.btn:hover, .seg :where(label):hover { color: var(--ink-text); background: var(--gold-hi); }
.btn:active { transform: translateY(1px); box-shadow: inset 1px 1px var(--gold-lo); }
.btn:is([aria-current="page"], [aria-selected="true"]), .seg input:checked + label { color: var(--gold-text); background: var(--well); box-shadow: inset 1px 1px var(--ink); cursor: default; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn--ghost { color: var(--cream); background: var(--well-2); box-shadow: inset 1px 1px var(--well-3), inset -1px -1px var(--ink); }
.btn--ghost:hover { color: var(--cream); background: var(--well-3); }
.btn--icon { width: 36px; padding: 0; font-size: 18px; }
.seg { min-width: 0; margin: 0; padding: 0; border: 0; }
.seg__opts { display: flex; }
.seg__opts > * { padding-inline: 12px; border-radius: 0; }
.seg__opts > * + * { margin-left: -1px; }
.seg input:focus-visible + label { position: relative; outline: 2px solid var(--focus); outline-offset: 2px; }

.field__input, .select { height: 36px; color: var(--ink-text); background-color: var(--parch); border: 1px solid var(--ink); border-radius: 2px; box-shadow: inset 1px 1px var(--board), inset -1px -1px var(--parch-hi); -webkit-appearance: none; appearance: none; }
.field__input { width: 100%; min-width: 0; padding: 0 12px; }
.field__input::placeholder { color: var(--ink-soft); font-style: italic; opacity: 1; }
.select {
  min-width: 11rem; max-width: 100%; padding: 0 32px 0 12px; cursor: pointer;
  background: linear-gradient(45deg, transparent 50%, var(--ink-text) 0) calc(100% - 17px) 50% / 5px 5px no-repeat,
    linear-gradient(135deg, var(--ink-text) 50%, transparent 0) calc(100% - 12px) 50% / 5px 5px no-repeat var(--parch);
}
.select option { color: var(--cream); background: var(--well); }

/* 4. Search + typeahead: one form, compact on character pages, a hero on browse */
.search { position: relative; flex: 0 1 400px; margin-left: auto; }
.search__field { display: flex; gap: 8px; }
body[data-view="browse"] .search { flex: 1 1 480px; max-width: 720px; margin-inline: auto; }
body[data-view="browse"] :is(.field__input, .search__go) { height: 48px; font-size: 17px; }
.suggest, .roster, .notice, .state__card, .tip, .plinth, .lvl { border: 1px solid var(--ink); box-shadow: var(--ring); background: var(--well); }
.suggest, .roster, .state__card, .tip { box-shadow: var(--ring), var(--lift); }
.suggest { position: absolute; z-index: 40; inset: calc(100% + 6px) 2px auto; max-height: min(60vh, 24rem); overflow-y: auto; padding-block: 4px; }
.suggest > li { display: flex; align-items: baseline; gap: 12px; padding: 7px 12px; }
.suggest__opt { cursor: pointer; }
.suggest__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: bold; }
.suggest__meta, .suggest__note { color: var(--tag); font-size: 12px; white-space: nowrap; }
.suggest__opt[aria-selected="true"] { background: var(--well-3); box-shadow: inset 3px 0 var(--gold-text); }
.suggest__opt[aria-selected="true"] .suggest__name, .suggest mark, .suggest__all { color: var(--gold-text); }
.suggest mark { background: none; text-decoration: underline; }
.suggest__all { border-top: 1px solid var(--ink); }

/* 5. Browse */
.browse { max-width: 880px; margin-inline: auto; }
.h1, .ident__name, .state__title { font: italic bold 32px/1.1 var(--f-show); text-shadow: var(--outline), 0 3px var(--ink); }
.lead { margin-top: 8px; max-width: 62ch; color: var(--tag); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin: 24px 0 16px; }
.browse__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.count { color: var(--tag); }
.count strong { color: var(--cream); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; gap: 6px; padding: 3px 10px; font-size: 12px; color: var(--ink-text); text-decoration: none; background: var(--parch); border: 1px solid var(--ink); border-radius: 99px; }
.chip:hover { color: var(--ink-text); background: var(--parch-hi); }
.chip--clear, .chip--clear:hover { color: var(--gold-text); background: none; border-color: transparent; text-decoration: underline; }

.roster, .roster-head { --cols: 30px minmax(0, 1fr) 4rem minmax(0, 9rem) minmax(0, 6rem) 2rem; margin-inline: 2px; }
.roster-head, .row { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 12px; padding: 0 16px; }
.roster-head { margin-inline: 3px; padding-bottom: 6px; font: bold 12px/1 var(--f-ui); color: var(--tag); text-transform: lowercase; }
.roster > li + li { border-top: 1px solid rgb(0 0 0 / .7); }
.row { min-height: 44px; color: var(--cream); text-decoration: none; }
.roster > li:nth-child(even) .row { background: rgb(255 220 150 / .03); }
.roster > li .row:hover { color: var(--cream); background: var(--well-3); box-shadow: inset 3px 0 var(--gold-text); }
.row:hover .row__name { color: var(--gold-text); }
.row:focus-visible { outline-offset: -2px; }
.row > :not(.glyph, .row__lvl) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tag); }
.row .row__name { font-weight: bold; color: inherit; }
.row__lvl { text-align: right; }
.row .row__lvl { font-weight: bold; color: var(--gold-text); }
.row__sex { text-align: center; }
.glyph { display: grid; place-items: center; width: 30px; height: 22px; font: bold 11px/1 var(--f-ui); color: var(--ink-text); background: var(--gold); border: 1px solid var(--ink); border-radius: 2px; box-shadow: inset 1px 1px var(--gold-hi), inset -1px -1px var(--gold-lo); }
.skel { height: 44px; background: linear-gradient(90deg, transparent 35%, rgb(255 220 150 / .07) 50%, transparent 65%) 100% 0 / 300% 100% no-repeat; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { background-position: 0 0; } }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.pager__pages { display: flex; gap: 4px; }
.pager__num { min-width: 36px; padding-inline: 8px; }
.pager__gap, .pager__status { align-self: center; padding-inline: 4px; color: var(--tag); }
.pager__status { display: none; }

/* 6. Character: header and stats */
.cv { --px: 2px; } /* one CSS pixel size per art pixel; the JS snaps it to whole device pixels */
.cv__head { display: grid; gap: 16px 24px; margin: 12px 0 24px; }
.ident__name { font-size: clamp(30px, 5vw, 44px); overflow-wrap: anywhere; }
.ident__title { margin-top: 4px; font: italic 18px/1.3 var(--f-show); color: var(--tag); }
.ident__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 12px; }
.ident__meta > li + li::before { content: "\B7"; content: "\B7" / ""; margin-inline: 8px; color: var(--tag); }
.ident__meta > .lvl + li::before { content: none; }
.lvl { display: inline-flex; align-items: baseline; gap: 6px; margin: 2px 12px 2px 2px; padding: 2px 10px; }
.lvl__label, .ident__none, .ident__asof, .plinth__cap { font-size: 12px; color: var(--tag); }
.lvl__num { font: bold 20px/1.2 var(--f-ui); color: var(--gold-text); }
.gtag { margin-left: 6px; padding: 0 5px; font: bold 11px/1.5 var(--f-ui); color: var(--gold-text); border: 1px solid var(--trim); border-radius: 2px; }
.ident__asof { margin-top: 8px; }
.stats { align-self: end; max-width: 30rem; padding: 12px 16px; color: var(--ink-text); background: var(--parch); border: 1px solid var(--ink); border-radius: 2px; box-shadow: inset 1px 1px var(--parch-hi), inset -1px -1px var(--board), var(--lift); }
.stats__title { margin-bottom: 8px; color: var(--ink-soft); }
.stats__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: 8px 12px; }
.stat { display: flex; flex-direction: column-reverse; }
.stat dt { font: bold 11px/1.2 var(--f-ui); color: var(--ink-soft); }
.stat dd { font: bold 16px/1.25 var(--f-ui); }
.stat--wide { grid-column: span 2; }
@media (min-width: 900px) { .cv__head { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); align-items: end; } }

/* 7. Stage: rail + paperdoll side by side where the 760px window fits beside it; the windows scroll inside their frames below that */
.stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: center; justify-content: center; }
.win--items { grid-column: 1 / -1; }
@media (min-width: 1100px) { .stage { grid-template-columns: 15rem auto; } }
.rail {
  place-self: stretch; display: grid; grid-template-rows: 1fr auto; gap: 12px; padding: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(13rem, calc(86 * var(--px) + 3rem))), 1fr));
  background: repeating-conic-gradient(rgb(0 0 0 / .07) 0 25%, transparent 0 50%) 0 0 / 2px 2px var(--felt);
  border: 1px solid var(--ink); border-radius: 2px 28px 2px 2px; box-shadow: inset 1px 1px var(--parch), var(--lift);
}
.plinth { display: grid; grid-template-rows: 1fr auto; place-items: center; gap: 8px; min-height: calc(84 * var(--px) + 4.5rem); margin: 2px; padding: 16px 8px 8px;
  background: radial-gradient(ellipse 60% 45% at 50% 45%, rgb(255 205 130 / .1), transparent 70%) var(--well); }
.plinth__stage { background: radial-gradient(ellipse 34% 7% at 50% 93%, rgb(0 0 0 / .6), transparent); }
.plinth__canvas { display: block; width: calc(86 * var(--px)); height: calc(84 * var(--px)); image-rendering: pixelated; }
.plinth__canvas:focus-visible { outline-offset: 4px; }
.controls { display: grid; align-content: center; justify-items: center; gap: 12px; }
.note { color: var(--ink); text-align: center; }
.note { grid-column: 1 / -1; font-size: 12px; }
.turn { display: flex; align-items: center; gap: 12px; }
.compass { position: relative; display: grid; grid-template: 1fr 1fr / 1fr 1fr; width: 96px; height: 48px; margin: 0; padding: 0; border: 0; }
.compass::before { position: absolute; inset: 0; background: var(--well-2); }
.compass label { position: relative; display: grid; place-items: center; cursor: pointer; }
.compass label::before { content: ""; width: 10px; height: 10px; border: 1px solid var(--ink); border-radius: 50%; background: var(--board); }
.compass label:hover::before { background: var(--gold); }
.compass input:checked + label::before { width: 12px; height: 12px; background: var(--gold-text); box-shadow: 0 0 0 3px rgb(230 176 74 / .3); }
.compass input:focus-visible + label::before { outline: 2px solid var(--focus); outline-offset: 2px; }
.compass [data-dir="1"] { grid-area: 1 / 1; }
.compass [data-dir="2"] { grid-area: 1 / 2; }
.compass [data-dir="0"] { grid-area: 2 / 1; }
.compass [data-dir="3"] { grid-area: 2 / 2; }

/* 8. Pixel windows: every size is native px x --px */
.win { min-width: 0; max-width: 100%; }
.frame { width: fit-content; max-width: 100%; overflow: auto hidden; overscroll-behavior-x: contain; background: var(--night); border: 1px solid var(--ink); box-shadow: var(--lift); scrollbar-color: var(--trim) var(--well); }
.pd, .inv { position: relative; image-rendering: pixelated; background: 0 0 / auto 100% no-repeat; }
.pd { width: calc(380 * var(--px)); height: calc(290 * var(--px)); background-image: url("../assets/gfx002/00149-0.png"); }
.pd[data-gender="male"] { background-image: url("../assets/gfx002/00149-1.png"); }
.inv { width: calc(485 * var(--px)); height: calc(119 * var(--px)); overflow: hidden; background-image: url("../assets/gfx002/00144.png"); }
.pin { position: absolute; left: calc(var(--x) * var(--px)); top: calc(var(--y) * var(--px)); width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); }
.slot, .stack { display: grid; place-items: center; padding: 0; color: inherit; background: none; border: 0; }
.slot:hover, .stack:hover, [aria-describedby="tip"] { background: rgb(255 214 140 / .12); box-shadow: 0 0 0 var(--px) rgb(255 214 140 / .55); }
.icon { display: block; width: calc(var(--iw) * var(--px)); height: calc(var(--ih) * var(--px)); max-width: none; image-rendering: pixelated; pointer-events: none; }
.stack__amt { position: absolute; right: var(--px); bottom: 0; font: bold max(10px, calc(9 * var(--px)))/1 var(--f-win); color: var(--gdi); text-shadow: var(--outline); pointer-events: none; }
.pd__field, .inv__note { color: var(--gdi); font: calc(11 * var(--px))/1.25 var(--f-win); }
.pd__field { padding-inline: calc(3 * var(--px)); line-height: calc(var(--h) * var(--px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv__note { display: grid; place-content: center; text-align: center; text-shadow: var(--outline); }
.inv__note b { color: var(--gold-text); }
.unknown {
  display: grid; place-content: center; justify-items: center; width: 100%; height: 100%; font: bold calc(12 * var(--px))/1 var(--f-win); color: var(--gold-text);
  background: repeating-linear-gradient(45deg, rgb(206 140 49 / .22) 0 calc(2 * var(--px)), transparent 0 calc(6 * var(--px))) var(--well-0);
  outline: var(--px) dashed; outline-offset: calc(-1 * var(--px));
}
.unknown__id { font-size: calc(8 * var(--px)); color: var(--cream); }
.stack .unknown__id { display: none; }

.itembar { display: flex; margin-bottom: 8px; }
.tab__n { padding: 0 5px; font-size: 11px; border: 1px solid; border-radius: 2px; }
.notice { max-width: 62ch; margin: 12px 2px 0; padding: 8px 12px; font-size: 13px; box-shadow: var(--ring), inset 3px 0 var(--tag); }
.notice--warn { box-shadow: var(--ring), inset 3px 0 var(--gold-text); }
.spill { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; color: var(--tag); }

/* 9. Tooltip, states, sample badge */
.tip { position: fixed; z-index: 50; left: var(--tip-x, 0); top: var(--tip-y, 0); width: max-content; max-width: min(18rem, 100vw - 16px); padding: 8px 12px; font-size: 12px; line-height: 1.4; background: var(--well-0); pointer-events: none; }
.tip__name { font-size: 13px; font-weight: bold; color: var(--gold-text); }
.tip__kind, .tip__req { font-size: 11px; color: var(--tag); }
.tip__kind { margin-bottom: 6px; }
.tip__stats { display: grid; grid-template-columns: auto auto; gap: 1px 16px; }
.tip__stats dt { color: var(--tag); }
.tip__stats dd { text-align: right; }
.tip__req { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--well-3); }

.state { display: grid; place-items: center; padding-block: 40px; }
.state__card { max-width: 36rem; padding: 24px; text-align: center; }
.state--error .state__card { box-shadow: 0 0 0 1px var(--seal), 0 0 0 2px var(--ink), var(--lift); }
.state__title { margin-bottom: 8px; font-size: 26px; }
.state__list, .state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin-top: 12px; }

.sample__tag, .sample::before { font: bold 11px/1.4 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); background: var(--seal); border: 1px solid var(--ink); }
.sample__tag { margin-right: 6px; padding: 0 6px; }
.sample::before {
  content: "Sample data"; content: "Sample data" / "";
  position: fixed; z-index: 60; top: 20px; right: -46px; width: 180px; padding: 3px 0; rotate: 45deg; border-inline: 0;
  text-align: center; box-shadow: 0 2px 8px rgb(0 0 0 / .5); pointer-events: none;
}

/* 10. Narrow screens, motion */
@media (min-width: 720px) and (max-width: 1399px) { body:has(.sample:not([hidden])) .topbar__inner { padding-right: 96px; } }
@media (max-width: 719px) {
  :root { --gutter: 16px; }
  .roster-head, .pager__pages { display: none; }
  .pager__status { display: block; }
  .row { grid-template-columns: 30px auto auto 1fr auto; grid-template-areas: "g n n n l" "g c u x l"; gap: 0 8px; padding-block: 7px; font-size: 12px; }
  .glyph { grid-area: g; } .row__name { grid-area: n; font-size: 14px; } .row__lvl { grid-area: l; } .row__class { grid-area: c; } .row__guild { grid-area: u; } .row__sex { grid-area: x; text-align: left; }
  .row__lvl::before { content: "Lv "; content: "Lv " / ""; font-weight: normal; color: var(--tag); }
  .sample::before { position: absolute; top: 18px; right: var(--gutter); width: auto; padding: 0 6px; rotate: none; border-inline: 1px solid var(--ink); box-shadow: none; }
}
@media (max-width: 520px) {
  .filters > * { flex: 1 1 40%; }
  .select { width: 100%; min-width: 0; }
}
@media (max-width: 420px) {
  :root { --gutter: 12px; }
  .brand__tag { display: none; }
  .search__go { padding-inline: 12px; }
  .frame { max-width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); border-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Item search + sorting (owned by the item-search feature: suggest groups, item pages, sort values) */
.ithumb { flex: none; display: grid; place-items: center; width: 34px; height: 34px; object-fit: scale-down; image-rendering: pixelated; font: bold 12px/1 var(--f-win); color: var(--gold-text); }
.ithumb--none { background: var(--well-0); border: 1px dashed var(--well-3); }
.suggest > .suggest__group { display: block; padding: 0; border-top: 1px solid var(--ink); }
.suggest__group li { display: flex; align-items: center; gap: 12px; padding: 4px 12px; }
.suggest__head { padding-block: 8px 2px; font: bold 12px/1 var(--f-ui); color: var(--tag); text-transform: lowercase; }
.suggest__item .ithumb { width: 28px; height: 28px; }

.roster--val { --cols: 30px minmax(0, 1fr) 4rem 7.5rem minmax(0, 8rem) minmax(0, 5rem) 2rem; }
.row__val { text-align: right; }
.row .row__val { font-weight: bold; color: var(--cream); }

.crumbs + .h1 { margin-top: 12px; }
.irow { --cols: 34px minmax(0, 1fr) 6rem 7rem; }
.irow__ico { display: grid; place-items: center; }
.irow__total { text-align: right; }
.hrow { --cols: 30px minmax(0, 1fr) 3.5rem minmax(0, 7rem) minmax(0, 12rem) 5rem; }
.item-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 24px; margin: 12px 0 8px; }
.item-hero { --px: 2px; display: grid; place-items: center; min-width: 80px; min-height: 80px; padding: 8px; border: 1px solid var(--ink); box-shadow: var(--ring); background: var(--well-0); }
.item-hero .unknown { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }
.item-head__text { min-width: 0; }
.item-head .h1 { overflow-wrap: anywhere; }
.rarity { margin-top: 6px; color: var(--tag); }
.rarity strong { font: bold 20px/1.2 var(--f-ui); color: var(--gold-text); }
.item-card { grid-column: 1 / -1; width: fit-content; max-width: 100%; padding: 8px 12px; font-size: 12px; line-height: 1.4; border: 1px solid var(--ink); box-shadow: var(--ring); background: var(--well-0); }
.item-card > .tip__kind:first-child { margin-bottom: 4px; }
.tip__held { margin-top: 6px; padding-top: 6px; font-size: 11px; color: var(--gold-text); border-top: 1px solid var(--well-3); }
.unheld { margin-top: 24px; }
.items .notice { margin-top: 16px; }
.item-gold .state__actions { justify-content: flex-start; }
.items .seg__opts { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 520px) { .items .filters > .seg { flex-basis: 100%; } }
@media (max-width: 719px) {
  .roster--val .row { grid-template-columns: 30px auto auto 1fr auto; grid-template-areas: "g n n n l" "g c u x v"; }
  .row__val { grid-area: v; }
  .row.irow { grid-template-columns: 34px 1fr auto; grid-template-areas: "i n v" "i t t"; }
  .irow .irow__ico { grid-area: i; } .irow .row__name { grid-area: n; } .irow .row__val { grid-area: v; } .irow .irow__total { grid-area: t; text-align: left; }
  .irow__total::before { content: "total "; content: "total " / ""; }
  .row.hrow { grid-template-columns: 30px auto 1fr auto; grid-template-areas: "g n n l" "g c w v"; }
  .hrow .hrow__where { grid-area: w; } .hrow .row__val { grid-area: v; }
  .item-head { grid-template-columns: 1fr; }
  .item-hero { justify-self: start; }
}

/* Bank locker + tall inventory (docs/ui-design.md 12.5; geometry in src/shared/ui028.js) */
/* Tall inventory: #144 spliced into two columns (cut at x = 378), each a top, a repeated band and a bottom
   (TALL_PARTS). Tops and bottoms are opaque layers over the repeat-y bands, so the band only shows between them. */
.inv--tall {
  height: calc(var(--inv-h) * var(--px));
  background-image: url("../assets/gfx002/00144-0.png"), url("../assets/gfx002/00144-2.png"), url("../assets/gfx002/00144-3.png"),
    url("../assets/gfx002/00144-5.png"), url("../assets/gfx002/00144-1.png"), url("../assets/gfx002/00144-4.png");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y;
  background-size: calc(378 * var(--px)) calc(35 * var(--px)), calc(378 * var(--px)) calc(32 * var(--px)), calc(107 * var(--px)) calc(84 * var(--px)),
    calc(107 * var(--px)) calc(25 * var(--px)), calc(378 * var(--px)) calc(26 * var(--px)), calc(107 * var(--px)) calc(10 * var(--px));
  background-position: 0 0, 0 100%, calc(378 * var(--px)) 0, calc(378 * var(--px)) 100%, 0 calc(35 * var(--px)), calc(378 * var(--px)) calc(84 * var(--px));
}
.notice--grown { color: var(--tag); }

/* Bank tab: the Account Balance strip (#153 top + bottom) and the private locker (#152) */
.bank { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bal, .locker { position: relative; image-rendering: pixelated; background-repeat: no-repeat; }
.bal {
  width: calc(272 * var(--px)); height: calc(53 * var(--px));
  background-image: url("../assets/gfx002/00153-0.png"), url("../assets/gfx002/00153-1.png");
  background-size: calc(272 * var(--px)) calc(44 * var(--px)), calc(272 * var(--px)) calc(9 * var(--px));
  background-position: 0 0, 0 100%;
}
.locker { width: calc(284 * var(--px)); height: calc(290 * var(--px)); background-image: url("../assets/gfx002/00152.png"); background-size: 100% 100%; }
.locker__title { padding-inline: calc(4 * var(--px)); color: var(--gdi); font: bold calc(11 * var(--px))/calc(19 * var(--px)) var(--f-win); text-shadow: var(--outline); white-space: nowrap; overflow: hidden; }
.locker__list { overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
.locker__list::-webkit-scrollbar { display: none; }
.locker__row {
  display: flex; align-items: center; justify-content: flex-start; gap: calc(4 * var(--px)); width: 100%;
  height: calc(var(--h) * var(--px)); padding: 0 calc(3 * var(--px)); text-align: left; cursor: pointer;
}
.locker li + li .locker__row { box-shadow: inset 0 var(--px) rgb(0 0 0 / .35); }
.locker li + li .locker__row:is(:hover, [aria-describedby="tip"]) { box-shadow: 0 0 0 var(--px) rgb(255 214 140 / .55); }
.locker__row:focus-visible { outline-offset: calc(-1 * var(--px)); }
.locker__icon { display: grid; place-items: center; flex: none; width: calc(49 * var(--px)); }
.locker__icon .unknown { width: calc(23 * var(--px)); height: calc(23 * var(--px)); }
.locker__text { display: grid; min-width: 0; font: calc(11 * var(--px))/1.25 var(--f-win); text-shadow: var(--outline); }
.locker__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gdi); }
.locker__amt { color: var(--gold-text); }
.locker__arrow { cursor: pointer; }
.locker__arrow:hover { background: rgb(255 214 140 / .18); }
.locker__track { pointer-events: none; }
.locker__thumb {
  position: absolute; left: var(--px); right: var(--px); height: calc(var(--size) * 100%); top: calc(var(--at) * (100% - var(--size) * 100%));
  background: var(--gold-lo); border: var(--px) solid var(--ink); box-shadow: inset var(--px) var(--px) var(--gold);
}