@layer app {
/* ============================================================
   Shop screen (shop_daily mode, issue #525) - Cafe Car menu
   ============================================================ */
.shop-screen {
  --shop-paper: #fff8eb;
  --shop-ink: #2a1f12;
  --shop-rail: #c0a064;
  --shop-rail-soft: rgba(192, 160, 100, 0.35);
  --shop-disabled: rgba(42, 31, 18, 0.35);
  --shop-accent: #b4351b;
  /* Text on the always-orange accent surfaces (cart pill, in-cart button).
     Constant across modes - paper flips in dark mode, but the accent doesn't. */
  --shop-on-accent: #fff8eb;
}

/* Dark mode: paper/ink are a light/dark pair (menu text uses ink; the Buy
   button fills with ink and prints paper text), so on the dark screen
   background the dark ink text and dark button disappear. Swapping the two
   values keeps every contrast pairing intact - text turns light, the button
   turns light with dark text. Mirrors the os-default + forced-dark scoping in
   base/tokens.css. */
@media (prefers-color-scheme: dark) {
  .shop-screen {
    --shop-paper: #1a1814;
    --shop-ink: #f0ece4;
    --shop-disabled: rgba(240, 236, 228, 0.4);
  }
}

:root[data-theme="dark"] .shop-screen {
  --shop-paper: #1a1814;
  --shop-ink: #f0ece4;
  --shop-disabled: rgba(240, 236, 228, 0.4);
}

/* ── Layout: catalog scrolls in place of the tracks panel, with the
   banner, items, hand, and Back button pinned around it (same shape as
   the play screen). ─────────────────────────────────────────────── */
.shop-menu-form {
  display: contents;
}

/* The catalog scrolls; the native scrollbar is a 0-width overlay bar on
   macOS/mobile that stays hidden until you scroll, so it wasn't obvious the
   menu scrolls. We hide the native bar and render our own always-visible one
   (see shop_scrollbar_controller). */
.shop-catalog-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
}

.shop-catalog {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.shop-catalog::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.shop-scrollbar {
  position: absolute;
  top: 6px;
  right: 3px;
  bottom: 6px;
  width: 6px;
  border-radius: 999px;
  background: var(--shop-rail-soft);
  pointer-events: none;
}

.shop-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 24px;
  border-radius: 999px;
  background: var(--shop-rail);
  pointer-events: auto;
  cursor: grab;
}

.shop-scrollbar-thumb:active {
  cursor: grabbing;
}

.shop-screen .shop-banner,
.shop-screen .shop-inventory {
  flex-shrink: 0;
}

/* ── Footer actions bar (title + spent pill left, Back right) ──── */
.hand-actions-bar.shop-actions-bar {
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.shop-actions-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.shop-actions-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.shop-actions-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-flap);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--shop-ink);
}

.shop-actions-icon {
  font-size: 20px;
  line-height: 1;
}

.shop-actions-spent {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px;
  background: var(--shop-accent);
  color: var(--shop-on-accent);
  border-radius: 999px;
  font-family: var(--font-flap);
}

.shop-actions-spent-num {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

/* Cart total exceeds the balance. Keep the number light (the disabled Checkout
   is the real "you can't afford this" cue); nudge the pill to a constant dark
   so it reads as flagged in both light and dark mode. */
.shop-actions-spent:has(.shop-actions-spent-num--over) {
  background: #3a2416;
}

.shop-actions-spent-label {
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.85;
}

.shop-perk {
  padding: 8px 16px;
  background: rgba(192, 160, 100, 0.18);
  color: var(--shop-ink);
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid var(--shop-rail-soft);
}

/* ── Inventory chip rows ─────────────────────────────────────── */
/* The voucher strip and the swap-voucher instructions occupy the same slot on
   the round screen - tapping a swap voucher replaces the strip with the
   instructions. They share this height so the page doesn't resize on the swap. */
.stop-screen {
  --voucher-strip-h: 46px;
}

.shop-inventory {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  /* Match .hand-section's horizontal padding so the chips line up at the
     same inset from the screen edge as the hand below. */
  padding: 0 12px;
  min-height: var(--voucher-strip-h);
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 12px;
}

/* Single line that scrolls sideways - vertical space is tight, so the chips
   never wrap onto a second row. Native scrollbar hidden to save more height. */
.shop-inventory-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.shop-inventory-row::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.shop-inventory-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  /* Match the rest of the in-game buttons (Send, Shop, Pass) */
  font-family: var(--font-flap);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.shop-inventory-chip--action {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-brd);
}

.shop-inventory-chip--action:hover {
  background: var(--row-hover);
}

.shop-inventory-icon {
  font-size: 14px;
  line-height: 1;
}

.shop-inventory-text {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* Swap-voucher instructions stand in for the voucher strip while a swap is in
   progress, so they reserve the same height (see --voucher-strip-h) and the
   game screen keeps a constant height across the swap. */
.hand-label--voucher {
  height: var(--voucher-strip-h);
  margin-bottom: 0;
  align-items: center;
}

/* ── Menu sections ───────────────────────────────────────────── */
.shop-menu-section {
  padding: 8px 14px 16px;
}

.shop-menu-section-heading {
  font-family: var(--font-flap);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--shop-ink);
  opacity: 0.65;
  padding: 12px 4px 6px;
  border-bottom: 1px solid var(--shop-rail-soft);
}

/* ── Menu item card ──────────────────────────────────────────── */
.shop-menu-item {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px dotted var(--shop-rail-soft);
  color: var(--shop-ink);
}

.shop-menu-item:last-child {
  border-bottom: none;
}

.shop-menu-icon {
  font-size: 28px;
  line-height: 1;
  text-align: center;
}

.shop-menu-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.shop-menu-name {
  font-family: var(--font-flap);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.shop-menu-blurb {
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.75;
}

.shop-menu-price {
  font-family: var(--font-flap);
  font-size: 18px;
  font-weight: 900;
  color: var(--shop-accent);
  min-width: 56px;
  text-align: right;
  /* Dotted leader the eye follows from name to price - classic menu touch */
  position: relative;
}

.shop-menu-price-unit {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  opacity: 0.7;
}

/* ── Buy button ──────────────────────────────────────────────── */
.shop-menu-btn {
  font-family: var(--font-flap);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 6px;
  border: 0;
  background: var(--shop-ink);
  color: var(--shop-paper);
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  /* Fixed width so toggling "Buy" <-> "In Cart" doesn't resize the action
     column and reflow the blurb (which would jump from one line to two). */
  box-sizing: border-box;
  min-width: 92px;
}

.shop-menu-btn:hover:not(.shop-menu-btn--disabled):not(:disabled) {
  background: var(--shop-accent);
  color: var(--shop-on-accent);
}

.shop-menu-btn--disabled,
.shop-menu-btn:disabled {
  background: var(--shop-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Queued in the cart: filled accent so it reads as "added, tap to remove". */
.shop-menu-btn--in-cart,
.shop-menu-btn--in-cart:hover {
  background: var(--shop-accent);
  color: var(--shop-on-accent);
  box-shadow: inset 0 0 0 2px var(--shop-ink);
}

/* ── State overrides ─────────────────────────────────────────── */
.shop-menu-item--free .shop-menu-price {
  color: #2f7a2f;
}

.shop-menu-item--disabled {
  opacity: 0.5;
}

.shop-menu-item--disabled .shop-menu-name,
.shop-menu-item--disabled .shop-menu-blurb {
  color: var(--shop-disabled);
}

.shop-menu-item--soldout {
  opacity: 0.45;
}

.shop-menu-item--soldout .shop-menu-price {
  color: var(--shop-disabled);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Bought specials shown in the swap picker but locked from selection. */
.hand-cell--locked {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Wildcard tile in hand ───────────────────────────────────── */
.hand-cell--wildcard {
  background: linear-gradient(135deg, rgba(255, 200, 80, 0.35), rgba(255, 200, 80, 0.05));
  border: 1px dashed rgba(180, 130, 0, 0.7);
}

/* ── Hotdog filler tile in hand ──────────────────────────────── */
.hand-cell--hotdog {
  background: linear-gradient(135deg, rgba(214, 90, 60, 0.28), rgba(214, 90, 60, 0.05));
  border: 1px dashed rgba(170, 60, 40, 0.7);
}

/* ── Wildcard letter picker (modal on the play screen) ───────── */
.wildcard-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 20px;
}

.wildcard-picker-btn {
  font-family: var(--font-flap);
  font-weight: 700;
  font-size: 18px;
  color: var(--flap-text);
  padding: 10px 0;
  border-radius: 6px;
  border: 1px solid var(--cell-brd);
  background: var(--screen-bg);
  cursor: pointer;
}

.wildcard-picker-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ── Modifier / fill-or-bust picker ──────────────────────────── */
.shop-modifier-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 14px;
}

.shop-modifier-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  font-size: 14px;
}

.shop-modifier-row legend {
  font-weight: 700;
}

.shop-modifier-field {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.shop-modifier-field > label:first-child {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.shop-modifier-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.shop-modifier-modifier-row {
  padding: 8px 14px;
}

/* ── Applied-item trak coloring ──────────────────────────────────
   A trak with a shop item applied wears that item's color: a colored
   spine on the group, tinted empty-cell borders, and a tinted watermark. */
.trak-item--reverse { --trak-color: #7c3aed; }          /* purple */
.trak-item--hoptoad { --trak-color: #2f7a2f; }          /* green */
.trak-item--extra_stop { --trak-color: #b4351b; }       /* red */
.trak-item--fill_or_bust_trak { --trak-color: #1d6fb8; } /* blue */

.trak-item {
  box-shadow: inset 3px 0 0 var(--trak-color);
}

/* Shop menu rows for trak items carry the same color as the on-board trak. */
.shop-menu-item--trak {
  box-shadow: inset 3px 0 0 var(--trak-color);
  padding-left: 10px;
}

.shop-menu-item--trak .shop-menu-name {
  color: var(--trak-color);
}

.trak-item .train-cell.cell-empty {
  border-color: var(--trak-color);
}

.trak-item .train-group-label {
  color: var(--trak-color);
  opacity: 0.4;
}

.trak-used-badge {
  font-family: var(--font-flap);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--trak-color, var(--shop-accent));
}

/* ── Recap breakdown ─────────────────────────────────────────── */
.shop-recap-breakdown {
  display: flex;
  gap: 16px;
  justify-content: center;
  font-size: 13px;
  color: var(--page-sub);
  margin-top: 8px;
}
}