/* Your clones as Rust storage boxes (js/clone-box.js): Large Wood Box panels of 6 x 8 inventory slots. Our own
   drawing of the look (dark panel, condensed header strip, grey gradient slots), no game art. Slots pop out on hover
   and keyboard focus like the loot sim's .slot.
   Sharp pops: nothing here scales the clone sprite (or anything around it) with a CSS transform, which stretches the
   small bitmap and blurs it. A slot's face is its own layer (::before) and scales; the sprite GROWS with real
   width/height (drawn sharp at the bigger size, js asks for an HD source) and only lifts and tilts. */
.cb {
  --cb-panel: rgba(24, 22, 20, .96); --cb-head-bg: rgba(0, 0, 0, .28); --cb-head-text: #cfc8bc; --cb-head-dim: #a39b8d;
  --cb-slot: #3a3834; --cb-slot-hi: #4b4843; --cb-slot-empty: #2c2a27; --cb-num: #f1ece2; --cb-num-shadow: 0 1px 2px #000, 0 0 3px #000;
  --cb-inset: inset 0 0 0 1px rgba(0, 0, 0, .28), inset 0 2px 6px rgba(0, 0, 0, .3);
  --cb-edge: rgba(255, 255, 255, .22); --cb-lift: 0 10px 22px rgba(0, 0, 0, .65);
  --cb-ic-lift: drop-shadow(0 9px 7px rgba(0, 0, 0, .6)) brightness(1.12);
  --cb-sel: #4a86cf; --cb-sel-bg: #2f4561;          /* Rust's selected-slot blue */
  --cb-mark: var(--accent);
  --cb-spring: cubic-bezier(.3, 1.9, .5, 1); --cb-pop: cubic-bezier(.3, 1.7, .5, 1);
  position: relative; display: grid; gap: 14px; min-width: 0;
}
:root[data-theme="light"] .cb {
  --cb-panel: rgba(236, 229, 216, .97); --cb-head-bg: rgba(70, 50, 30, .1); --cb-head-text: #2c251d; --cb-head-dim: #524a3e;
  --cb-slot: #d6ccba; --cb-slot-hi: #e7dfcf; --cb-slot-empty: #cbc0ac; --cb-num: #221d17; --cb-num-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  --cb-inset: inset 0 0 0 1px rgba(70, 50, 30, .22), inset 0 2px 5px rgba(70, 50, 30, .2);
  --cb-edge: rgba(255, 255, 255, .6); --cb-lift: 0 9px 20px rgba(60, 40, 20, .38);
  --cb-ic-lift: drop-shadow(0 8px 6px rgba(60, 40, 20, .45)) brightness(1.05);
  --cb-sel: #1f5fbf; --cb-sel-bg: #c5d3e6;
}
/* the stack (not each box) is the size container, so a popped slot in box 1 still paints over box 2 */
.cb-stack { display: grid; gap: 14px; min-width: 0; container: cbstack / inline-size; }

/* ---- one box: a Rust inventory panel ---- */
.cb-box {
  min-width: 0; max-width: 640px; border: 1px solid var(--line-strong); border-radius: 2px;
  background: url(../img/noise.svg), var(--cb-panel); box-shadow: var(--shadow);
}
.cb-box.is-new { animation: cb-box-in .28s ease-out; }
@keyframes cb-box-in { from { opacity: 0; transform: translateY(-8px); } }
.cb-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .3rem .8rem; flex-wrap: wrap;
  padding: .45rem .7rem .4rem; background: var(--cb-head-bg); border-bottom: 1px solid var(--line);
  font-family: var(--head-font); font-stretch: 87.5%; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
.cb-title { font-size: .98rem; color: var(--cb-head-text); }
.cb-bn:not(:empty) { margin-left: .45em; color: var(--cb-head-dim); }
.cb-bn:not(:empty)::before { content: "#"; }
.cb-range { font-size: .78rem; color: var(--cb-head-dim); letter-spacing: .05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 9px; }

/* ---- the slots (the face is ::before, under the sprite, genes and number) ---- */
.cb-slot {
  appearance: none; position: relative; isolation: isolate; display: block; width: 100%; min-width: 0; aspect-ratio: 1;
  margin: 0; padding: 0; border: 0; border-radius: 2px; background: none; font: inherit; color: var(--cb-num); text-align: left;
  container: cbslot / inline-size;
  transition: opacity .12s;
}
.cb-slot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .14)), var(--cb-slot);
  box-shadow: var(--cb-inset);
  transition: transform .18s var(--cb-pop), box-shadow .18s, background-color .12s;
}
.cb-slot.is-empty::before { background: var(--cb-slot-empty); }
button.cb-slot { cursor: pointer; }
/* the focus ring goes on the face: the popped face would cover a ring on the slot itself */
.cb-slot:focus-visible { outline: none; }
.cb-slot:focus-visible::before { outline: 2px solid var(--focus); outline-offset: 1px; }

/* clone number, top left (js gives it a tooltip, so it takes the pointer; a click still reaches the slot) */
.cb-num {
  position: absolute; left: 5%; top: 3%; z-index: 2; font: 700 11px/1 var(--head-font); font-stretch: 87.5%;
  font-size: clamp(9px, 13cqi, 12.5px); font-variant-numeric: tabular-nums; text-shadow: var(--cb-num-shadow);
  transition: transform .18s var(--cb-pop);
}
.cb-hash { opacity: .75; }

/* clone sprite, upper middle (the pop grows it: left/top/width/height move together so it stays centred) */
.cb-slot .cb-ic {
  position: absolute; left: 20%; top: 6%; width: 60%; height: 60%; max-width: none; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55));
  transition: left .22s var(--cb-spring), top .22s var(--cb-spring), width .22s var(--cb-spring), height .22s var(--cb-spring),
    transform .22s var(--cb-spring), filter .22s;
}
.cb-slot.is-new .cb-ic { animation: cb-drop .38s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cb-drop { from { opacity: 0; transform: translateY(-10px); } }

/* genes: Rust circles (base.css .genes/.gene) in ONE row of six along the bottom (Sean asked for one row), spanning
   the slot edge to edge: 1.5cqi at each side, circles 1px apart with no chain dashes, so a circle is (97cqi - 5px) / 6
   and the row always fits. The letter fills .82 of its circle, bold, with a dark outline (Sean: "hard to read"): 8px
   and up from 66px slots. Smaller slots (phones) show colour only; the hover/tap card shows the letters big. */
.cb-genes {
  position: absolute; left: 0; right: 0; bottom: 5%; z-index: 1; display: flex; justify-content: center;
  pointer-events: none; transition: transform .18s var(--cb-pop);
}
.cb-genes .genes { --chip: 9px; --chip: clamp(5px, calc((97cqi - 5px) / 6), 18px); --gap: 1px; }
.cb-genes .gene {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45); font-size: calc(var(--chip) * .82); font-weight: 800;
  text-shadow: 0 0 2px rgba(0, 0, 0, .85), 0 1px 1px rgba(0, 0, 0, .9);
}
.cb-genes .gene.q { text-shadow: none; box-shadow: inset 0 0 0 1px var(--line-strong); }
.cb-genes .gene + .gene::before { display: none; }
@container cbslot (max-width: 65.9px) {
  .cb-genes .gene { font-size: 0; text-shadow: none; }
  .cb-hash { display: none; }
}

/* the empty spot after the last clone: a faint plus */
.cb-plus { position: absolute; inset: 0; opacity: .3; transition: opacity .15s; }
.cb-plus::before, .cb-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 34%; height: 3px; border-radius: 2px;
  background: var(--cb-num); transform: translate(-50%, -50%);
}
.cb-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.cb-slot.is-add:hover .cb-plus, .cb-slot.is-add:focus-visible .cb-plus { opacity: .8; }

/* ---- states (the tag has a tooltip that says what it means) ---- */
.cb-tag {
  position: absolute; right: 4%; top: 3%; z-index: 2; padding: 2px 3px 1px; border-radius: 2px;
  font: 700 9px/1 var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .05em;
  color: var(--on-accent); background: var(--cb-mark); box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  transition: transform .18s var(--cb-pop);
}
.cb-slot.st-in-planter::before, .cb-slot.st-highlight::before { box-shadow: inset 0 0 0 2px var(--cb-mark), var(--cb-inset); }
.cb-slot.st-highlight::before { background-color: color-mix(in srgb, var(--cb-mark) 22%, var(--cb-slot)); }
.cb-slot.st-selected::before { background-color: var(--cb-sel-bg); box-shadow: inset 0 0 0 2px var(--cb-sel), var(--cb-inset); }
.cb-slot.st-dupe :is(.cb-ic, .cb-genes) { opacity: .42; filter: grayscale(.6); }
.cb-slot.st-dupe .cb-tag { color: var(--cb-num); background: var(--cb-slot-empty); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* small slots: the tag becomes a dot (the slot's name still says it) */
@container cbslot (max-width: 65.9px) {
  .cb-tag { width: 8px; height: 8px; padding: 0; border-radius: 50%; font-size: 0; right: 6%; top: 6%; }
}

/* ---- pop: hover (real pointers only) and keyboard focus ----
   The face springs out, the sprite grows (60% → 74% of the slot), lifts and tilts; the number, tag and genes ride out
   with the face's edges (cqi: % of the slot's width). */
.cb-slot:is(.is-filled, .is-add):focus-visible { z-index: 3; }
.cb-slot:is(.is-filled, .is-add):focus-visible::before {
  transform: scale(1.12); background-color: var(--cb-slot-hi); box-shadow: inset 0 0 0 1px var(--cb-edge), var(--cb-lift);
}
.cb-slot.is-filled:focus-visible .cb-ic {
  left: 13%; top: -1%; width: 74%; height: 74%; transform: translateY(-3px) rotate(-4deg); filter: var(--cb-ic-lift);
}
.cb-slot.is-filled:focus-visible .cb-genes { transform: translateY(4cqi); }
.cb-slot.is-filled:focus-visible .cb-num { transform: translate(-4cqi, -4cqi); }
.cb-slot.is-filled:focus-visible .cb-tag { transform: translate(4cqi, -4cqi); }
@media (hover: hover) {
  .cb-slot:is(.is-filled, .is-add):hover { z-index: 3; }
  .cb-slot:is(.is-filled, .is-add):hover::before {
    transform: scale(1.12); background-color: var(--cb-slot-hi); box-shadow: inset 0 0 0 1px var(--cb-edge), var(--cb-lift);
  }
  .cb-slot.is-filled:hover .cb-ic {
    left: 13%; top: -1%; width: 74%; height: 74%; transform: translateY(-3px) rotate(-4deg); filter: var(--cb-ic-lift);
  }
  .cb-slot.is-filled:hover .cb-genes { transform: translateY(4cqi); }
  .cb-slot.is-filled:hover .cb-num { transform: translate(-4cqi, -4cqi); }
  .cb-slot.is-filled:hover .cb-tag { transform: translate(4cqi, -4cqi); }
  .cb-slot:is(.st-in-planter, .st-highlight):hover::before { box-shadow: inset 0 0 0 2px var(--cb-mark), var(--cb-lift); }
  .cb-slot.st-selected:hover::before { box-shadow: inset 0 0 0 2px var(--cb-sel), var(--cb-lift); }
}
.cb-slot:is(.st-in-planter, .st-highlight):focus-visible::before { box-shadow: inset 0 0 0 2px var(--cb-mark), var(--cb-lift); }
.cb-slot.st-selected:focus-visible::before { box-shadow: inset 0 0 0 2px var(--cb-sel), var(--cb-lift); }
.cb-slot:is(.is-filled, .is-add):active::before { transform: scale(1.04); }

/* busy (a search is running): look, don't touch */
.cb.is-disabled button.cb-slot { cursor: not-allowed; }
.cb.is-disabled .cb-slot.is-add { opacity: .45; }

/* ---- item-info card: fixed, placed by js beside the slot and kept on screen ---- */
.cb-card {
  position: fixed; left: 0; top: 0; z-index: 60; width: min(17.5rem, calc(100vw - 16px)); pointer-events: none;
  background: url(../img/noise.svg), var(--panel-solid); color: var(--text);
  border: 1px solid var(--line-strong); border-top: 2px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.cb-card[hidden] { display: none; }
.cb-card.is-on { animation: cb-card-in .14s ease-out; }
@keyframes cb-card-in { from { opacity: 0; transform: translateY(4px); } }
.cb-card-head { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; background: var(--head); border-bottom: 1px solid var(--line); }
.cb-card-ic {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .14)), var(--cb-slot); box-shadow: var(--cb-inset);
}
.cb-card-ic .item-ic { width: 46px; height: 46px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }
.cb-card-title { display: grid; gap: .15rem; min-width: 0; }
.cb-card-name { font: 700 1.08rem/1.1 var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .05em; }
.cb-card-sub { font-size: .8rem; color: var(--muted); }
.cb-card-body { display: grid; gap: .5rem; padding: .7rem .75rem .75rem; }
.cb-card .genes-lg { --chip: 32px; --gap: 6px; }
.cb-card-genes { margin: 0; font-size: .76rem; color: var(--muted); }
.cb-card-score { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.cb-card-k { font: 700 .72rem/1 var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cb-card-score b { font: 700 1.2rem/1 var(--head-font); font-stretch: 87.5%; font-variant-numeric: tabular-nums; }
.cb-card-note {
  margin: 0; padding-top: .45rem; border-top: 1px solid var(--line); font-size: .86rem; color: var(--text);
  white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}

/* ---- phones: tighter panel, the 6 columns stay ---- */
@media (max-width: 520px) {
  .cb-grid { padding: 6px; }
  .cb-head { padding: .4rem .55rem .35rem; }
  .cb-title { font-size: .9rem; }
  .cb-card .genes-lg { --chip: 30px; --gap: 5px; }
}
/* narrow boxes (phones, and the two-column Calculator / Lab on ~1000-1180px windows): a thinner panel edge gives each
   slot ~1.7px more, so the 66px slots that show gene letters fit a 416px box instead of 426px. The column widths in
   calc.css / lab.css decide the rest. */
@container cbstack (max-width: 440px) {
  .cb-grid { padding: 4px; }
}

/* less motion (OS setting or the site's switch): no pop, no growing or tilting, no drop-in; base.css already stops the
   transitions and animations. The light and shadow still change. */
@media (prefers-reduced-motion: reduce) {
  .cb-slot::before, .cb-slot .cb-ic, .cb-genes, .cb-num, .cb-tag { transform: none !important; }
  .cb-slot .cb-ic { left: 20% !important; top: 6% !important; width: 60% !important; height: 60% !important; }
}
:root[data-motion="reduce"] .cb-slot::before,
:root[data-motion="reduce"] :is(.cb-slot .cb-ic, .cb-genes, .cb-num, .cb-tag) { transform: none !important; }
:root[data-motion="reduce"] .cb-slot .cb-ic { left: 20% !important; top: 6% !important; width: 60% !important; height: 60% !important; }

@media (forced-colors: active) {
  .cb-box, .cb-card { border: 1px solid CanvasText; }
  .cb-slot::before { border: 1px solid ButtonText; }
  /* a marked slot gets a thick Highlight border on its face, and keyboard focus keeps its own ring outside it, so a
     focused marked slot shows both (one outline could only show one of them) */
  .cb-slot:is(.st-in-planter, .st-highlight, .st-selected)::before { border: 3px solid Highlight; }
  .cb-slot:focus-visible::before { outline: 3px solid CanvasText; outline-offset: 2px; }
  .cb-plus::before, .cb-plus::after { background: ButtonText; }
  .cb .gene { forced-color-adjust: none; }
}