/* THE GOD TERMINAL — the costume's Recycling Bin (js/costume-bin.js).
 * Off-palette like the rest of the costume: an XP task pane on the left, and the bin itself seen from
 * above — a glossy mint plastic rim, perforated walls, a clean floor with the chasing-arrows emblem —
 * holding a 7×5 (or 5×7) board of sticker-style items. Sizes come from --cell/--gap/--pad, set by the app. */

.cs-bin .cs-app-body { background: var(--cs-face); }

.crb {
  --crb-spring: cubic-bezier(.2, 1.6, .4, 1);
  --crb-ink: #2d2440;
  --crb-pop: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif;
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: 'side main' 'status status';
  overflow: hidden;
  outline: none;
}
.crb.is-narrow {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'tools' 'main' 'status';
}
.crb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.crb-ico { display: block; width: 100%; height: 100%; overflow: visible; }
.crb-art { display: block; width: 100%; height: 100%; overflow: visible; }
.crb-art .o { stroke: var(--crb-ink, #2d2440); stroke-width: calc(2.2px * var(--k, 1)); stroke-linejoin: round; stroke-linecap: round; }
.crb-art .t { font-family: Tahoma, Verdana, 'Segoe UI', sans-serif; font-weight: 700; }

/* ───────── task pane ───────── */
.crb-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
  padding: 0.85rem 0.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #7ba2e7 0%, #6a8ae0 50%, #6375d6 100%);
  border-right: 1px solid #4b5fb8;
}
.crb.is-narrow .crb-side { display: none; }
.crb-group { flex: none; border-radius: 0.4rem 0.4rem 0 0; box-shadow: 0 1px 3px rgba(18, 38, 120, 0.35); }
.crb-group-head {
  display: flex;
  align-items: center;
  min-height: 1.85rem;
  margin: 0;
  padding: 0.2rem 0.75rem;
  border-radius: 0.4rem 0.4rem 0 0;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 30%, #c6d3f7 100%);
  color: #215dc6;
  font-size: 0.875rem;
  font-weight: 700;
}
.crb-group-body { padding: 0.55rem; border: 1px solid #fff; border-top: 0; background: #d6dff7; }
.crb-tasks .crb-group-body { display: flex; flex-direction: column; gap: 0.15rem; }
.crb-task {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  background: none;
  color: #0c2f8f;
  font-size: 0.9375rem;
  text-align: left;
  transition: transform 140ms var(--crb-spring), background-color 140ms, border-color 140ms;
  transform-origin: 25% 50%;
}
.crb-task:hover { background: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.85); }
.crb-task:hover .crb-task-label { text-decoration: underline; }
.crb-task.is-pressed { transform: scale(1.07); background: rgba(255, 255, 255, 0.75); }
.crb-task:focus-visible { outline: 1px dotted #0c2f8f; outline-offset: 1px; }
.crb-task-ico { flex: none; width: 1.8rem; height: 1.8rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }

/* Details: the file's deadpan properties. */
.crb-hint { margin: 0; color: #1d3f9a; font-size: 0.9375rem; line-height: 1.4; }
.crb-det-head { display: flex; align-items: center; gap: 0.65rem; }
.crb-det-art {
  flex: none;
  width: 4.2rem;
  height: 4.2rem;
  padding: 0.25rem;
  border-radius: 0.6rem;
  background: radial-gradient(circle at 50% 40%, #ffffff, #e3ebfb);
  box-shadow: inset 0 0 0 1px rgba(29, 63, 154, 0.2), 0 1px 2px rgba(18, 38, 120, 0.2);
}
.crb-det-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.crb-det-name b { color: #000; font-size: 0.9375rem; overflow-wrap: anywhere; }
.crb-det-name small { color: #4a5a7e; font-size: 0.875rem; }
.crb-det-rows { margin: 0.6rem 0 0; color: #000; font-size: 0.875rem; line-height: 1.35; }
.crb-det-row { margin-top: 0.2rem; }
.crb-det-row dt { display: inline; color: #1d3f9a; font-weight: 700; }
.crb-det-row dt::after { content: ': '; }
.crb-det-row dd { display: inline; margin: 0; overflow-wrap: anywhere; }
.crb-det-desc {
  margin: 0.6rem 0 0;
  padding: 0.45rem 0.6rem;
  border-left: 3px solid var(--chain, #316ac5);
  border-radius: 0 0.3rem 0.3rem 0;
  background: rgba(255, 255, 255, 0.7);
  color: #1b1b1b;
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.38;
}

/* Collection: an XP progress bar and the sticker album. */
.crb-meter-row { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.65rem; }
.crb-meter {
  position: relative;
  flex: 1;
  height: 1.4rem;
  overflow: hidden;
  border: 1px solid #5a6a8e;
  border-radius: 3px;
  background: linear-gradient(180deg, #e3e8f1, #f4f6fa);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.crb-meter-back, .crb-meter-fill { position: absolute; inset: 2px; border-radius: 1px; clip-path: inset(0 100% 0 0); }
.crb-meter-back { background: #fff; box-shadow: 0 0 6px #fff; transition: clip-path 140ms ease-out; }
.crb-meter-fill {
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, 0.85) 8px 10px),
    linear-gradient(180deg, #e2fbe2 0%, #7de57d 22%, #33c033 52%, #22a822 78%, #6bd86b 100%);
  transition: clip-path 560ms cubic-bezier(.3, .9, .3, 1);
}
.crb-count { flex: none; min-width: 3.6em; color: #0c2a7a; font-size: 0.9375rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crb-dex { display: flex; flex-direction: column; gap: 0.25rem; }
.crb-dex-row { display: flex; align-items: center; gap: 0.4rem; }
.crb-dex-cells { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.crb-dex-cell {
  aspect-ratio: 1;
  padding: 2px;
  border: 0;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.55);
  transition: transform 140ms var(--crb-spring), background-color 140ms;
}
.crb-dex-cell:hover { background: #fff; }
.crb-dex-cell.is-pressed { transform: scale(1.2); }
.crb-dex-cell:focus-visible { outline: 2px dotted #1d3f9a; outline-offset: 1px; }
.crb-dex-cell.is-unknown { background: rgba(255, 255, 255, 0.3); }
.crb-dex-cell.is-unknown .crb-art { filter: brightness(0) opacity(0.2); }
.crb-dex-name { flex: none; color: var(--chain); font-size: 0.9375rem; font-weight: 700; }

/* ───────── toolbar (narrow windows) ───────── */
.crb-tools {
  grid-area: tools;
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #c9c5b4;
  background: linear-gradient(180deg, #fdfcf9 0%, #f3f1e8 55%, #e2dfd0 100%);
  box-shadow: inset 0 1px 0 #fff;
}
.crb.is-narrow .crb-tools { display: flex; }
.crb-tool {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.2rem 0.6rem 0.2rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: #1b1b1b;
  font-size: 0.9375rem;
  transition: transform 120ms var(--crb-spring), background-color 120ms, border-color 120ms;
}
.crb-tool:hover, .crb-tool.is-on { border-color: #cbc6b2; background: linear-gradient(#fff, #f1efe6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.crb-tool.is-on { background: linear-gradient(#e6e3d6, #f8f7f2); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); }
.crb-tool.is-pressed { transform: scale(1.1); }
.crb-tool-ico { flex: none; width: 1.8rem; height: 1.8rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22)); }
.crb-tool.is-coll { margin-left: auto; gap: 0.45rem; padding-right: 0.5rem; }
.crb-tool.is-coll .crb-count { min-width: 0; font-size: 0.875rem; }
.crb-meter.is-mini { flex: none; width: 3.6rem; height: 1.15rem; }

/* ───────── the bin, seen from above ───────── */
.crb-main {
  grid-area: main;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 75% at 50% 45%, #ffffff 0%, #f0f4f6 60%, #dce4e9 100%);
}
.crb-bin {
  position: relative;
  isolation: isolate;
  border-radius: calc(var(--pad, 20px) * 1.15);
  /* The inner walls: perforated mint plastic, shaded under the far rim, lit on the near side. */
  background:
    radial-gradient(circle, rgba(36, 86, 82, 0.34) 0 1.3px, transparent 1.8px) 0 0 / 7px 7px,
    linear-gradient(180deg, #8fbfb8 0%, #b4d9d3 34%, #c9e6e1 70%, #d8efeb 100%);
  box-shadow:
    0 0 0 2px #4f7e79,
    0 1.4rem 2.2rem -1rem rgba(20, 60, 60, 0.55),
    0 0.3rem 0.6rem rgba(20, 60, 60, 0.18);
  transform-origin: 50% 100%;
}
/* Moulded side handles. */
.crb-bin::before, .crb-bin::after {
  content: '';
  position: absolute;
  top: 50%;
  z-index: -1;
  width: max(0.9rem, calc(var(--pad, 20px) * 0.75));
  height: max(3rem, 24%);
  border: 2px solid #4f7e79;
  background:
    linear-gradient(#3d6b66, #3d6b66) 50% 50% / 26% 56% no-repeat,
    linear-gradient(180deg, #f2fbf9, #b6d8d2);
  box-shadow: 0 0.4rem 0.8rem -0.3rem rgba(20, 60, 60, 0.45);
  translate: 0 -50%;
}
.crb-bin::before { right: 100%; border-right: 0; border-radius: 0.9rem 0 0 0.9rem; }
.crb-bin::after { left: 100%; border-left: 0; border-radius: 0 0.9rem 0.9rem 0; }
.crb.is-narrow .crb-bin::before, .crb.is-narrow .crb-bin::after { content: none; }
/* The rim: a glossy lip around the top edge. */
.crb-lip {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: calc(var(--pad, 20px) * 0.3);
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, #f2fbf9 0%, #cfe7e3 55%, #aed3cd 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.crb-lip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(40, 90, 85, 0.25);
}
.crb-floor {
  position: absolute;
  /* Seen from a little in front: more of the far wall shows than the near one. */
  inset: calc(var(--pad, 20px) * 0.9) calc(var(--pad, 20px) * 0.7) calc(var(--pad, 20px) * 0.56);
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: calc(var(--pad, 20px) * 0.75);
  background: radial-gradient(ellipse 85% 80% at 50% 38%, #f6fcfb 0%, #e3f2ef 55%, #cde5e1 100%);
  box-shadow:
    inset 0 calc(var(--pad, 20px) * 0.55) calc(var(--pad, 20px) * 0.6) calc(var(--pad, 20px) * -0.25) rgba(30, 80, 75, 0.38),
    inset 0 -2px 4px rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(60, 110, 105, 0.35);
}
.crb-emblem { width: 44%; max-width: 60%; aspect-ratio: 1; color: #3fae6a; opacity: 0.22; }
.crb-grid {
  position: absolute;
  left: var(--pad, 20px);
  top: var(--pad, 20px);
  z-index: 2;
  outline: none;
  touch-action: none;
}
.crb-cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 7), var(--cw, var(--cell, 80px)));
  grid-auto-rows: var(--ch, var(--cell, 80px));
  gap: var(--gap, 7px);
}
.crb-cell {
  border-radius: 24%;
  background: rgba(108, 166, 158, 0.15);
  box-shadow: inset 0 2px 3px rgba(40, 90, 85, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.8);
  transition: background-color 120ms, box-shadow 120ms;
}
.crb-cell.is-drop { background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 2px rgba(49, 106, 197, 0.6), 0 0 12px rgba(49, 106, 197, 0.35); }
.crb-cell.is-nope { background: rgba(230, 70, 70, 0.12); }
.crb-cell.is-source { background: rgba(255, 255, 255, 0.4); outline: 2px dashed rgba(45, 36, 64, 0.3); outline-offset: -5px; }
.crb-items { position: absolute; inset: 0; }
.crb-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 60;
  width: var(--cell, 80px);
  height: var(--cell, 80px);
  border: 3px dashed #316ac5;
  border-radius: 24%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 14px rgba(49, 106, 197, 0.6);
  pointer-events: none;
  transition: translate 120ms cubic-bezier(.3, .7, .4, 1);
}

/* ───────── items ───────── */
.crb-item { position: absolute; left: 0; top: 0; z-index: 1; width: var(--cell, 80px); height: var(--cell, 80px); touch-action: none; }
.crb-shadow {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 2%;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(25, 60, 58, 0.4), rgba(25, 60, 58, 0));
  transition: transform 160ms, opacity 160ms;
}
.crb-body { position: absolute; inset: 7%; transform-origin: 50% 88%; }
/* Phone cells are taller than wide, so the art can take a little more of the width. */
.crb.is-narrow .crb-body { inset: 3%; }
.crb-pose { position: absolute; inset: 0; transition: transform 170ms var(--crb-spring); }
.crb-lv {
  position: absolute;
  right: -7%;
  bottom: -5%;
  z-index: 2;
  min-width: 1.55em;
  padding: 0.16em 0.36em;
  border: 2px solid #fff;
  border-radius: 1em;
  background: var(--chain, #316ac5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  color: #fff;
  font: 700 max(13px, 0.8rem)/1.05 Tahoma, Verdana, sans-serif;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.crb-item.is-max .crb-lv { background: linear-gradient(180deg, #ffe066, #f0a514); color: #7a4a00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.crb-white { position: absolute; inset: 0; filter: brightness(0) invert(1); pointer-events: none; }
.crb-item { cursor: grab; }
.crb-item.is-dragging { z-index: 50; cursor: grabbing; }
@media (hover: hover) {
  .crb-item:not(.is-dragging):hover .crb-pose { transform: translateY(-4%) scale(1.05); }
  .crb-item:not(.is-dragging):hover .crb-shadow { transform: scale(0.9); opacity: 0.8; }
}
.crb-item.is-dragging .crb-pose { transition: none; }
.crb-item.is-dragging .crb-shadow { transform: translateY(40%) scale(1.3); opacity: 0.5; }
/* Selected like a real file: sunk in translucent blue. */
.crb-item.is-selected::before {
  content: '';
  position: absolute;
  inset: 2%;
  border-radius: 24%;
  background: rgba(49, 106, 197, 0.16);
  box-shadow: inset 0 0 0 2px #316ac5;
}
/* Hovering a carried item over its twin: the twin glows and wiggles. */
.crb-item.is-match::before, .crb-item.is-hint::before {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 30%;
  background: radial-gradient(closest-side, rgba(255, 252, 214, 0.98), rgba(255, 214, 64, 0.6) 62%, rgba(255, 214, 64, 0));
  animation: crb-glow 0.55s ease-in-out infinite alternate;
}
.crb-item.is-match .crb-pose { animation: crb-wiggle 0.42s ease-in-out infinite; }
.crb-item.is-hint .crb-pose { animation: crb-wiggle 0.5s ease-in-out 3; }
.crb-item.is-perched .crb-pose { animation: crb-teeter 0.9s ease-in-out infinite; }
.crb-item.is-sad .crb-pose { animation: crb-tremble 0.2s linear infinite; }
/* The top of a chain wears a slow sunburst. */
.crb-rays {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 60, 0.6) 0 9deg, rgba(255, 210, 60, 0) 9deg 30deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 100%);
  mask: radial-gradient(closest-side, #000 25%, transparent 100%);
  animation: crb-spin 9s linear infinite;
}
.crb-new {
  position: absolute;
  left: -8%;
  top: -6%;
  z-index: 3;
  padding: 0.12em 0.4em 0.14em;
  border: 2px solid #fff;
  border-radius: 0.35em;
  background: linear-gradient(180deg, #ff4a62, #d8172f);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: #fff;
  font: 900 max(13px, 0.78rem)/1.1 Tahoma, Verdana, sans-serif;
  letter-spacing: 0.04em;
  transform: rotate(-12deg);
}

/* Sad (and then relieved) faces for the Empty Recycling Bin guilt trip. */
.crb-face { position: absolute; left: 50%; top: 40%; z-index: 2; width: 56%; height: 26%; translate: -50% -50%; pointer-events: none; }
.crb-face i {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  border: 2px solid var(--crb-ink, #2d2440);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 50%, #ffffff 0 10%, transparent 11%),
    radial-gradient(circle at 50% 64%, #1c1c28 0 34%, transparent 36%),
    #ffffff;
}
.crb-face i:first-child { left: 2%; }
.crb-face i:nth-child(2) { right: 2%; }
.crb-face i::before {
  content: '';
  position: absolute;
  left: 0;
  top: -42%;
  width: 100%;
  height: max(2px, 14%);
  border-radius: 2px;
  background: var(--crb-ink, #2d2440);
  transform: rotate(-20deg);
}
.crb-face i:nth-child(2)::before { transform: rotate(20deg); }
.crb-face b {
  position: absolute;
  left: 13%;
  top: 92%;
  width: 15%;
  aspect-ratio: 3 / 4;
  border: 1.5px solid #2d6fb8;
  border-radius: 50% 50% 50% 50% / 60% 60% 42% 42%;
  background: #6fbaff;
  opacity: 0;
  animation: crb-tear 1.2s ease-in infinite;
}
.is-happy .crb-face i { border-color: transparent; background: none; }
.is-happy .crb-face i::before {
  top: 25%;
  height: 75%;
  border: 3px solid var(--crb-ink, #2d2440);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background: none;
  transform: none;
}
.is-happy .crb-face b { display: none; }

/* The idle hint: a ghost of an item and a hand, dragging it onto its twin. */
.crb-ghost { position: absolute; left: 0; top: 0; z-index: 55; width: var(--cell, 80px); height: var(--cell, 80px); padding: 7%; pointer-events: none; }
.crb-hand { position: absolute; right: -10%; bottom: -16%; width: 54%; height: 54%; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.35)); }

/* ───────── the "Deleting…" chip on the rim ───────── */
.crb-chute {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: calc(100% - 1rem);
  padding: 0.3rem 0.7rem 0.35rem 0.45rem;
  border: 1px solid #0b3cb6;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, #ffffff, #eaf1fc);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 #fff;
  color: #1b1b1b;
  font-size: 0.875rem;
  white-space: nowrap;
  translate: -50% -58%;
  pointer-events: none;
}
.crb-chute.is-full { border-color: #a31515; background: linear-gradient(180deg, #fff6f4, #ffd8d0); }
.crb-chute-anim { position: relative; flex: none; display: flex; align-items: center; gap: 1.5rem; }
.crb-chute-ico { width: 1.4rem; height: 1.4rem; }
.crb-chute-paper { position: absolute; left: 0.3rem; top: 0.1rem; width: 1rem; height: 1rem; animation: crb-paper 0.7s ease-in-out infinite; }
.crb-chute-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.crb-chute-text { overflow: hidden; text-overflow: ellipsis; }
.crb-chute-bar { display: block; height: 0.4rem; overflow: hidden; border-radius: 2px; background: #dbe3ee; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15); }
.crb-chute-bar b { display: block; height: 100%; background: linear-gradient(90deg, #4f9cf5, #1c63cf); transform: scaleX(0); transform-origin: 0 50%; }
.crb-chute.is-full .crb-chute-bar b { background: linear-gradient(90deg, #ff7b6b, #d0281a); }

/* ───────── floating things: particles, text, tips, cards ───────── */
.crb-fx { position: absolute; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }
.crb-layer { position: absolute; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.crb-float {
  position: absolute;
  z-index: 5;
  color: #fff;
  font: 900 1.4rem/1 var(--crb-pop);
  white-space: nowrap;
  -webkit-text-stroke: 0.2em #ffffff;
  paint-order: stroke fill;
  text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.25);
  translate: -50% -50%;
}
.crb-float.is-gold { color: #ffc400; -webkit-text-stroke-color: #7a3e00; }
.crb-float.is-burp { letter-spacing: 0.05em; -webkit-text-stroke-width: 0.16em; text-shadow: 0 0.12em 0 #4a2a9a, 0 0.2em 0.4em rgba(0, 0, 0, 0.3); }
.crb-tip {
  position: absolute;
  z-index: 8;
  max-width: min(17rem, calc(100% - 12px));
  padding: 0.5rem 0.75rem 0.55rem;
  border: 1px solid #000;
  border-radius: 0.45rem;
  background: #ffffe1;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.35);
  color: #000;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.crb-tip b { display: block; margin-bottom: 0.12rem; overflow-wrap: anywhere; }
.crb-tip::after, .crb-tip::before {
  content: '';
  position: absolute;
  left: var(--ax, 50%);
  width: 1rem;
  height: 0.6rem;
  margin-left: -0.5rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.crb-tip::after { bottom: -0.6rem; background: #000; }
.crb-tip::before { bottom: calc(-0.6rem + 1.5px); z-index: 1; background: #ffffe1; }
.crb-tip.is-below::after { top: -0.6rem; bottom: auto; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.crb-tip.is-below::before { top: calc(-0.6rem + 1.5px); bottom: auto; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.crb-toast {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.7rem;
  z-index: 7;
  width: fit-content;
  max-width: calc(100% - 1.5rem);
  margin: 0 auto;
  padding: 0.55rem 0.95rem;
  border: 1px solid #000;
  border-radius: 0.5rem;
  background: #ffffe1;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.4);
  color: #000;
  font-size: 0.9375rem;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}
/* The bin talks: a comic speech bubble on its rim. */
.crb-say {
  position: absolute;
  z-index: 9;
  width: max-content;
  max-width: 15rem;
  padding: 0.55rem 0.85rem;
  border: 2px solid var(--crb-ink);
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  color: var(--crb-ink);
  font: 700 1.0625rem/1.3 var(--crb-pop);
  translate: -50% -100%;
  transform-origin: 30% 130%;
}
.crb-say.is-right { transform-origin: 70% 130%; }
.crb-say.is-right::after { left: auto; right: 28%; }
.crb.is-narrow .crb-say { max-width: 14rem; padding: 0.45rem 0.7rem; font-size: 0.9375rem; }
.crb-say::after {
  content: '';
  position: absolute;
  left: 28%;
  bottom: -0.62rem;
  width: 1.1rem;
  height: 1.1rem;
  border-right: 2px solid var(--crb-ink);
  border-bottom: 2px solid var(--crb-ink);
  background: #fff;
  transform: rotate(45deg) skew(12deg, 12deg);
}
/* "New item!" */
.crb-card {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 15.5rem;
  max-width: calc(100% - 1rem);
  padding: 1.5rem 1rem 0.95rem;
  border: 3px solid var(--chain, #316ac5);
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  box-shadow: 0 0.9rem 2rem -0.5rem rgba(20, 30, 70, 0.5), inset 0 0 0 2px #fff;
  text-align: center;
  translate: -50% -50%;
}
.crb-card-rays {
  position: absolute;
  left: 50%;
  top: 4.3rem;
  width: 11.5rem;
  height: 11.5rem;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--chain-l, #ffe58a) 0 11deg, rgba(255, 255, 255, 0) 11deg 30deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  translate: -50% -50%;
  animation: crb-spin 7s linear infinite;
}
.crb-card-ribbon {
  position: absolute;
  top: -0.95rem;
  left: 50%;
  padding: 0.35rem 1rem;
  border: 2px solid #fff;
  border-radius: 0.45rem;
  background: linear-gradient(180deg, #ff5a6e, #d81b3a);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  color: #fff;
  font: 900 1.0625rem/1 var(--crb-pop);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  translate: -50% 0;
}
.crb-card-art { position: relative; width: 5.6rem; height: 5.6rem; }
.crb-card-name { position: relative; margin-top: 0.3rem; color: #111; font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.crb-card-tier { position: relative; color: #4a5a7e; font-size: 0.875rem; }
.crb-card-desc { position: relative; margin: 0.45rem 0 0; color: #2a2a2a; font-size: 0.9375rem; font-style: italic; line-height: 1.35; }
.crb-flyer { position: absolute; left: 0; top: 0; z-index: 12; width: 2.8rem; height: 2.8rem; margin: -1.4rem 0 0 -1.4rem; filter: drop-shadow(0 0 6px rgba(255, 214, 64, 0.95)); }
.crb-drive { position: absolute; z-index: 6; translate: -50% -50%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3)); }
.crb-whiteout { position: absolute; inset: 0; z-index: 4; background: #fff; }

/* ───────── the guilt-trip dialog ───────── */
.crb-modal { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(16, 32, 60, 0.24); }
.crb-dlg {
  width: min(27rem, 100%);
  border: 3px solid var(--cs-frame, #0a3ed6);
  border-top: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  background: var(--cs-face, #ece9d8);
  box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.45);
}
.crb-dlg-bar {
  display: flex;
  align-items: center;
  min-height: 2.1rem;
  margin: 0 -3px;
  padding: 0 0.65rem;
  border-radius: 0.5rem 0.5rem 0 0;
  background: linear-gradient(180deg, #0a5ef7 0%, #3d8cff 8%, #0b5ff2 22%, #0656ea 60%, #0353e8 85%, #0447c9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.crb-dlg-title { overflow: hidden; color: #fff; font-size: 0.9375rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; text-shadow: 1px 1px 1px #0f1a63; }
.crb-dlg-body { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1rem 1.1rem 0.3rem; }
.crb-dlg-ico { flex: none; width: 2.7rem; height: 2.7rem; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2)); }
.crb-dlg-text p { margin: 0.1rem 0 0; color: #000; font-size: 1rem; line-height: 1.4; }
.crb-dlg-text .crb-dlg-sub { margin-top: 0.35rem; color: #3a3a3a; font-style: italic; }
.crb-dlg-items { display: flex; justify-content: center; gap: 0.7rem; padding: 0.55rem 1rem 0.1rem; }
.crb-dlg-item { position: relative; width: 3.8rem; height: 3.8rem; animation: crb-tremble 0.2s linear infinite; }
.crb-dlg-items.is-big .crb-dlg-item { width: 6.2rem; height: 6.2rem; }
.crb-dlg-btns { display: flex; justify-content: center; gap: 0.6rem; padding: 0.8rem 1rem 1rem; }
.crb-dlg-btn.cs-btn { min-width: 6.5rem; min-height: 2.4rem; font-size: 0.9375rem; }

/* ───────── status bar ───────── */
.crb-status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  min-height: 2rem;
  padding: 0 0.6rem;
  border-top: 1px solid #fff;
  box-shadow: inset 0 1px 0 #c9c5b4;
  background: var(--cs-face, #ece9d8);
  color: #222;
  font-size: 0.875rem;
}
.crb-st-ico { flex: none; width: 1.2rem; height: 1.2rem; }
.crb-st { white-space: nowrap; transition: color 300ms; }
.crb-st + .crb-st { padding-left: 0.6rem; border-left: 1px solid #c9c5b4; box-shadow: inset 1px 0 0 #fff; }
.crb-st.is-up { color: #138a3a; font-weight: 700; }
.crb-st.is-mood { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.crb-st.is-alarm { color: #c3202b; font-weight: 700; }
.crb.is-narrow .crb-st-ico { display: none; }
.crb.is-narrow .crb-status { gap: 0.4rem; padding: 0 0.45rem; }
.crb.is-narrow .crb-st + .crb-st { padding-left: 0.4rem; }

/* ───────── the collection sheet (narrow windows) ───────── */
.crb-sheet {
  position: absolute;
  inset: 0.4rem;
  z-index: 25;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #4b5fb8;
  border-radius: 0.55rem;
  background: linear-gradient(180deg, #7ba2e7 0%, #6375d6 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.crb-sheet-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.35rem 0.3rem 0.7rem; background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #c6d3f7 100%); color: #215dc6; font-size: 1.0625rem; }
.crb-sheet-ico { flex: none; width: 1.7rem; height: 1.7rem; }
.crb-sheet-head .crb-count { margin-left: auto; min-width: 0; }
.crb-sheet-x {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.65rem;
  border: 0;
  border-radius: 0.4rem;
  background: none;
  color: #215dc6;
  transition: transform 120ms var(--crb-spring), background-color 120ms;
}
.crb-sheet-x:hover { background: rgba(33, 93, 198, 0.12); }
.crb-sheet-x.is-pressed { transform: scale(1.15); }
.crb-sheet .crb-dex { flex: 1; gap: 0.5rem; padding: 0.6rem; overflow-y: auto; overscroll-behavior: contain; }
.crb-dex.is-big .crb-dex-row { flex-direction: column; align-items: stretch; gap: 0.3rem; padding: 0.45rem 0.5rem 0.5rem; border: 1px solid #fff; border-radius: 0.4rem; background: #d6dff7; }
.crb-dex.is-big .crb-dex-cells { gap: 4px; }

/* ───────── motion ───────── */
@keyframes crb-wiggle { 0%, 100% { transform: rotate(0) scale(1.05); } 25% { transform: rotate(-7deg) scale(1.1); } 75% { transform: rotate(7deg) scale(1.1); } }
@keyframes crb-glow { from { opacity: 0.55; transform: scale(0.9); } to { opacity: 1; transform: scale(1.08); } }
@keyframes crb-teeter { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes crb-tremble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.2px) rotate(-1.2deg); } 75% { transform: translateX(1.2px) rotate(1.2deg); } }
@keyframes crb-tear { 0% { opacity: 0; transform: translateY(0) scale(0.4); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(170%); } }
@keyframes crb-spin { to { rotate: 360deg; } }
@keyframes crb-paper {
  0% { opacity: 0; transform: translate(0, 0.1rem) rotate(-20deg); }
  15%, 85% { opacity: 1; }
  50% { transform: translate(1.25rem, -0.6rem) rotate(12deg); }
  100% { opacity: 0; transform: translate(2.5rem, 0.15rem) rotate(40deg); }
}

/* ───────── touch & reduced motion ───────── */
@media (pointer: coarse) {
  .crb-task { min-height: 2.9rem; }
  .crb-dex-cell { border-radius: 0.4rem; }
}
html[data-reduced-motion="on"] .crb-item.is-match .crb-pose,
html[data-reduced-motion="on"] .crb-item.is-hint .crb-pose,
html[data-reduced-motion="on"] .crb-item.is-perched .crb-pose,
html[data-reduced-motion="on"] .crb-item.is-sad .crb-pose,
html[data-reduced-motion="on"] .crb-item.is-match::before,
html[data-reduced-motion="on"] .crb-item.is-hint::before,
html[data-reduced-motion="on"] .crb-rays,
html[data-reduced-motion="on"] .crb-card-rays,
html[data-reduced-motion="on"] .crb-chute-paper,
html[data-reduced-motion="on"] .crb-dlg-item { animation: none; }
html[data-reduced-motion="on"] .crb-face b { animation: none; opacity: 1; }
html[data-reduced-motion="on"] .crb-cursor { transition: none; }