/* =====================================================================
   BANGBOWBING OS — STORE + CASES styles
   Lifted out of os/os.css byte-for-byte by the v3 scene phase (ledger item 33's
   css split, kept under the item 44-47 game frame) so phase-2 app workers edit
   disjoint files. Shell, the shared app kit, the emote/rarity tokens and the
   lightbox stay in os.css; this file owns Store and the Cases window + reveal (ledger item 37 merges them).
   Linked from desktop.html AFTER os.css — same cascade order for ties.
   ===================================================================== */

/* --- the CASES rack inside the Store (ledger item 37) ---------------
   The rack body (.cases) is height:100% BY DESIGN — it scrolls itself so the
   reveal overlay covers the visible body and not the middle of a tall column
   (see the .cases note below). So the pane that hosts it has to hand it a
   DEFINITE height: the Store root turns into a flex column while the rack is
   the open tab, drops its own padding (the rack brings its own .pad) and lets
   the pane take the rest. Every other tab is untouched content-height grid. */
.store.on-cases {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 0;
}
.store.on-cases > .tabs { flex: 0 0 auto; padding: 16px 16px 0; }
.store.on-cases > .flashline { flex: 0 0 auto; margin: 10px 16px 0; }
.store-cases-pane { flex: 1 1 auto; min-height: 0; }
.store-cases-pane[hidden] { display: none; }

/* --- store -------------------------------------------------------- */
.store { container-type: inline-size; container-name: store; }
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
/* >=720px panel width (item 38): lock to 3-4 across rather than whatever
   auto-fill happens to squeeze in at very wide panels. */
@container store (min-width: 720px) {
  .prods { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@container store (min-width: 1040px) {
  .prods { grid-template-columns: repeat(4, 1fr); }
}
.prod {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 11px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2b2d51, var(--screen-2));
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.prod.is-coming, .prod.is-out { opacity: 0.72; }
.prod-artbtn { display: block; padding: 0; background: none; border: 0; border-radius: 10px; overflow: hidden; }
.prod-art {
  display: block;
  width: 100%;
  height: 128px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  filter: saturate(1.08);
}
.prod-art.empty {
  display: grid;
  place-items: center;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.25);
  background: linear-gradient(150deg, #33355c, #1b1c31);
}
.prod-sticker {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 4px 11px;
  border-radius: 999px;
  transform: rotate(-6deg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: #3d0524;
  background: linear-gradient(180deg, #fff2b8, #ffd166);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 9px rgba(0, 0, 0, 0.45);
}
.prod-title { margin: 2px 0 0; font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; color: #fff; }
.prod-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--screen-dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartlist { display: grid; gap: 5px; }
.cartrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.cartrow.gone { color: #ff9ab5; }
.cartrow .grow { display: grid; gap: 2px; }
.cart-title { font-size: 13px; font-weight: 700; color: #fff; }
.cart-qty { min-width: 22px; text-align: center; font-weight: 700; }
.cart-line { min-width: 62px; text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--tang); }
.cart-total {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  background: linear-gradient(180deg, #2b2d51, var(--screen-2));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.cart-total strong { font-family: var(--font-display); font-size: 19px; color: var(--tang); }
.shipgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; }
.shipgrid .ship-note { grid-column: 1 / -1; margin: 0; }
.orderlist { display: grid; gap: 7px; }
.orderrow {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #262848, var(--screen-2));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 3px solid var(--aqua);
}

/* --- the cases window ------------------------------------------------
   The window owns its own scroll instead of letting .win-body do it, so the
   reveal overlay (.case-stage, inset:0) covers exactly the VISIBLE body. If
   the app root were content-height the overlay would be pinned to the middle
   of a 900px column and a scrolled-down reader would open a case they could
   not see. --- */
.cases {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cases > .case-head, .cases > .tabs { flex: 0 0 auto; }
.case-body { flex: 1 1 auto; min-height: 0; overflow: auto; align-content: start; }
.case-head .col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.col.tight { gap: 6px; }

.case-grid { display: grid; gap: 12px; }
@container store (min-width: 720px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); }
}
.case-tile {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--screen-2);
  border: 1px solid var(--screen-rim);
}
.case-tile.has-free { border-color: var(--candy); box-shadow: 0 0 0 1px rgba(255, 95, 200, 0.3); }
.case-art {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 10px;
  background: linear-gradient(180deg, #3a2a5e, #1d1533);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.case-art.fallback { display: grid; place-items: center; font-size: 30px; color: #ffd166; }
.case-name { font-size: 14px; letter-spacing: 0.02em; }

.odds-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #0d0e1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.odds-bar i { display: block; min-width: 2px; background: var(--rar, var(--rar-common)); }
.odds-detail tr.is-off td { opacity: 0.45; }

/* --- the reveal ------------------------------------------------------ */
.case-stage {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(9, 8, 18, 0.9);
  backdrop-filter: blur(3px);
}
.case-stage[hidden] { display: none; }
.case-stage-in {
  position: relative;
  width: 100%;
  max-width: 540px;
  display: grid;
  gap: 12px;
}
.case-reel {
  position: relative;
  overflow: hidden;
  height: 92px;
  border-radius: 12px;
  background: linear-gradient(180deg, #191a30, #0d0e1a);
  border: 1px solid var(--screen-rim);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6);
}
.case-track { display: flex; height: 100%; will-change: transform; }
.case-cell {
  width: 76px;                      /* MUST match CELL in os/apps/cases.js */
  flex: 0 0 76px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--rar) 26%, transparent), transparent 78%);
}
.case-cell img { width: 48px; height: 48px; object-fit: contain; }
.case-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, var(--tang), #fff6, var(--tang));
  box-shadow: 0 0 12px rgba(255, 154, 61, 0.85);
}
/* the reel fades at both ends so the strip reads as endless */
.case-reel::before, .case-reel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46px;
  pointer-events: none;
  z-index: 2;
}
.case-reel::before { left: 0; background: linear-gradient(90deg, #0d0e1a, transparent); }
.case-reel::after { right: 0; background: linear-gradient(270deg, #0d0e1a, transparent); }

.case-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  /* plain fill first: a browser without color-mix() keeps a real background
     and just loses the rarity wash */
  background: var(--screen-2);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--rar) 20%, var(--screen-2)), var(--screen-2));
  border: 1px solid var(--rar, var(--rar-common));
}
.case-card[hidden] { display: none; }
.case-card.is-big { animation: caseWin 0.5s ease-out; box-shadow: 0 0 26px var(--rar); }
@keyframes caseWin {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); }
}
.case-win-img { width: 72px; height: 72px; object-fit: contain; }
.case-win-name { font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--screen-ink); }

.case-burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.case-burst i {
  position: absolute;
  top: -12px;
  width: 7px;
  height: 12px;
  border-radius: 2px;
  animation: caseFall 2.1s linear forwards;
}
@keyframes caseFall {
  to { transform: translateY(420px) rotate(540deg); opacity: 0; }
}

/* --- narrow windows / phones -------------------------------------- */
@media (max-width: 759px) {
  .case-tile { flex-direction: column; }
  .case-art { width: 100%; height: 64px; }
  .case-reel { height: 78px; }
  .case-cell, .case-track .case-cell { width: 76px; flex-basis: 76px; }
  .case-card { flex-direction: column; align-items: flex-start; }
  .packs, .prods { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  /* the case reel lands instantly (os/apps/cases.js checks reducedMotion too);
     these keep the decoration from moving even if a transition slips through */
  .case-track { transition: none !important; }
  .case-burst i { display: none; }
  .case-card.is-big { animation: none; }
}