/* Rootling Rumble — prototype UI skin. Playful top-down veggie-garden survival.
   Palette: warm soil + fresh leaf green + seed cream. Original look for this
   project (not derived from any source game art). */

:root {
  --soil: #241c14;
  --soil-2: #2f251a;
  --leaf: #6fbf3a;
  --leaf-d: #4f9427;
  --carrot: #f08a2e;
  --carrot-d: #c96b17;
  --cream: #f6efdd;
  --cream-dim: #d9cfb4;
  --danger: #e04b3a;
  --hp: #e8524a;
  --xp: #5bc0ec;
  --gold: #f4c542;
  --panel: rgba(28, 22, 15, 0.92);
  --panel-2: rgba(46, 37, 26, 0.95);
  --line: rgba(246, 239, 221, 0.14);
  --font: 'Trebuchet MS', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;

  /* ---- B+ cut-paper chrome tokens (game-feel pass) ----
     A tiny grayscale paper-grain (inline SVG feTurbulence — no external asset),
     warm kraft card faces, and a cream cut-paper rim echoing the sprite art. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --kraft: linear-gradient(158deg, #3c2d1d 0%, #2e2216 52%, #261b11 100%);
  --kraft-card: linear-gradient(158deg, #43331f 0%, #34271a 55%, #2b2013 100%);
  --rim: rgba(246, 239, 221, 0.28);
  --rim-soft: rgba(246, 239, 221, 0.06);
  --stitch: rgba(246, 239, 221, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--soil);
  color: var(--cream);
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #1b2915;
  touch-action: none;
}

/* ---- overlay screens ---- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  /* justify-content:center + overflow:auto is the classic flexbox trap: when
     content is taller than the viewport, the browser still centers it and the
     overflow hanging off the TOP is unreachable by scrolling (you can only
     scroll down into the bottom overflow) — so tall screens (shop with a full
     owned-grid, level-up, crate) clip their top content with no way to see it.
     `safe center` (Chrome 133+/Safari 17.4+/Firefox 129+) keeps the same
     centered look while short, but falls back to top-aligned + fully
     scrollable once content overflows. Unsupported browsers simply ignore
     the second (invalid-value) declaration and keep plain `center` — same
     old behavior, no regression. */
  justify-content: center;
  justify-content: safe center;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
}
.screen.active { display: flex; }
.screen.menu {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(111, 191, 58, 0.16), transparent 60%),
    linear-gradient(180deg, #2c2117 0%, #1c1610 100%);
}

.title-big {
  font-size: clamp(38px, 8vw, 84px);
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--leaf);
  text-shadow: 0 4px 0 var(--leaf-d), 0 8px 22px rgba(0, 0, 0, 0.5);
  margin: 0 0 6px;
}
.title-sub {
  color: var(--cream-dim);
  font-size: clamp(14px, 2.6vw, 20px);
  letter-spacing: 6px;
  margin: 0 0 34px;
  text-transform: uppercase;
}
.screen-title {
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 800;
  color: var(--cream);
  margin: 4px 0 18px;
}

/* ---- buttons ---- */
.btn {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  color: #1c130a;
  background: linear-gradient(180deg, var(--carrot), var(--carrot-d));
  border: none;
  border-radius: 12px;
  padding: 13px 30px;
  cursor: pointer;
  box-shadow: 0 4px 0 #96500f, 0 8px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.1s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #96500f; }
.btn.secondary {
  background: linear-gradient(180deg, #4a3c2a, #382c1d);
  color: var(--cream);
  box-shadow: 0 4px 0 #241a10, 0 8px 16px rgba(0, 0, 0, 0.3);
}
.btn.leaf {
  background: linear-gradient(180deg, var(--leaf), var(--leaf-d));
  box-shadow: 0 4px 0 #367016, 0 8px 16px rgba(0, 0, 0, 0.3);
  color: #12240a;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-row { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
.btn-sm { font-size: 14px; padding: 8px 16px; border-radius: 9px; box-shadow: 0 3px 0 #96500f; }

.toolbar {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--cream-dim);
  z-index: 12;
}
.chip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  user-select: none;
}

/* ---- card grids ---- */
.card-grid {
  display: grid;
  gap: 14px;
  width: min(1040px, 96vw);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
  position: relative;
}
.card:hover { transform: translateY(-3px); border-color: var(--leaf); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.card.selected { border-color: var(--carrot); box-shadow: 0 0 0 2px var(--carrot); }
.card.locked { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.6); }
.card.locked:hover { transform: none; border-color: var(--line); box-shadow: none; }
.card-head { display: flex; align-items: center; gap: 10px; }
.card-icon { width: 48px; height: 48px; flex: 0 0 48px; image-rendering: auto; }
.card-name { font-size: 17px; font-weight: 800; color: var(--cream); }
.card-blurb { font-size: 12.5px; line-height: 1.45; color: var(--cream-dim); }
.card-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.stat-pill {
  font-size: 11px;
  background: rgba(246, 239, 221, 0.08);
  border-radius: 6px;
  padding: 2px 7px;
  color: var(--cream);
}
.lock-hint { font-size: 11.5px; color: var(--carrot); margin-top: 2px; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px;
  background: var(--leaf-d);
  color: #eaffdb;
}
.badge.gift { background: #6b4bd0; color: #f0eaff; }

/* forced gifts strip (weapon select) */
.gift-strip {
  width: min(1040px, 96vw);
  margin: 16px 0 4px;
  padding: 12px 14px;
  border: 1px dashed rgba(107, 75, 208, 0.6);
  border-radius: 12px;
  background: rgba(107, 75, 208, 0.1);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.gift-strip .gift-label { font-weight: 800; color: #cbb8ff; }
.gift-item { display: flex; align-items: center; gap: 8px; }
.gift-item canvas { width: 40px; height: 40px; }

.section-label { width: min(1040px, 96vw); color: var(--cream-dim); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; margin: 8px 0 2px; }

/* ---- HUD ---- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 8; display: none; }
#hud.active { display: block; }
.hud-top {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.hud-wave { font-size: 22px; font-weight: 800; color: var(--cream); text-shadow: 0 2px 6px rgba(0,0,0,0.7); }
.hud-timer { font-size: 30px; font-weight: 800; color: var(--gold); text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.hud-left { position: absolute; left: 16px; bottom: 16px; width: 300px; max-width: 44vw; }
.bar {
  height: 18px;
  border-radius: 10px;
  background: rgba(0,0,0,0.45);
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
  margin-bottom: 7px;
}
.bar > span { position: absolute; inset: 0; display: block; transform-origin: left; }
.bar .fill-hp { background: linear-gradient(90deg, #ff6a5f, var(--hp)); }
.bar .fill-xp { background: linear-gradient(90deg, #7ad4ff, var(--xp)); }
.bar .bar-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.hud-mats {
  position: absolute; left: 16px; top: 14px;
  font-size: 18px; font-weight: 800; color: var(--gold);
  text-shadow: 0 2px 5px rgba(0,0,0,0.7);
}
.hud-weapons {
  position: absolute; right: 16px; bottom: 16px;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 40vw;
}
.hud-weapons canvas {
  width: 34px; height: 34px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}

/* pause / modal panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 26px;
  width: min(1020px, 96vw);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.panel h2 { margin: 0 0 14px; font-size: 24px; color: var(--leaf); }

/* shop layout */
.shop-currency { font-size: 18px; font-weight: 800; color: var(--gold); margin-bottom: 12px; }
.shop-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.slot {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.slot.empty {
  /* sold slot: keep the grid cell (no layout jump) but drop the card face —
     a near-invisible dashed paper outline + faint watermark, not a ghost card. */
  align-items: center; justify-content: center; min-height: 120px;
  background: none; box-shadow: none; border: 1.5px dashed rgba(246, 239, 221, 0.16);
  font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(246, 239, 221, 0.22);
}
.slot.locked-slot { border-color: #fff; box-shadow: 0 0 0 1px #fff; } /* original: white border when locked */
.slot .price { color: var(--gold); font-weight: 800; }
.slot .price.unaffordable { color: var(--danger); } /* price turns red when unaffordable */
.slot .card-cat { font-size: 11px; color: var(--cream-dim); margin: -2px 0 2px; }
.slot-actions { display: flex; gap: 8px; margin-top: auto; }

/* owned gear: two labeled, subordinate, scroll-on-overflow grids. Sized to
   TWO full chip rows: main.js (capOwnedGridRows) measures the actual rendered
   chip heights after each render (weapon chips run taller than item chips —
   they carry an extra set-badge row — and row capacity itself shifts with
   viewport width) and sets a precise inline max-height so exactly two rows
   show without clipping a partial row. The 140px here is only a pre-JS/
   fallback ceiling; the inline style (set on every render + on resize) is
   what actually governs it. Scroll-on-overflow gets a visible custom
   scrollbar (default OS overlay scrollbars are invisible until actively
   dragged on macOS/iOS, which reads as "no more content" rather than
   "scrollable") so a 3rd+ row is discoverable, not just reachable. */
.owned-groups { display: flex; flex-direction: column; }
.owned-group { margin-top: 12px; }
.owned-grid {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-height: 140px; overflow-y: auto; padding: 2px 4px 2px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--leaf-d) rgba(246, 239, 221, 0.08);
}
.owned-grid::-webkit-scrollbar { width: 8px; }
.owned-grid::-webkit-scrollbar-track { background: rgba(246, 239, 221, 0.08); border-radius: 4px; }
.owned-grid::-webkit-scrollbar-thumb { background: var(--leaf-d); border-radius: 4px; }
.owned-grid::-webkit-scrollbar-thumb:hover { background: var(--leaf); }
.owned-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.owned-w {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 8px; display: flex; align-items: center; gap: 8px;
}
.owned-w.combinable { border-color: var(--leaf); box-shadow: 0 0 0 1px var(--leaf); }
.owned-w canvas { width: 32px; height: 32px; }
.owned-w .stack-count { font-size: 11px; font-weight: 800; color: var(--gold); margin-left: 1px; }
.owned-w:focus-visible { outline: 2px solid var(--leaf); outline-offset: 1px; }
.shop-bar { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.spacer { flex: 1; }

.result-stats { list-style: none; padding: 0; margin: 12px 0 4px; color: var(--cream-dim); }
.result-stats li { margin: 4px 0; }
.result-stats b { color: var(--cream); }

/* loading / error */
.loading-msg { font-size: 20px; color: var(--cream-dim); }
.error-box {
  background: #3a0f0c; border: 1px solid #e04b3a; border-radius: 12px;
  padding: 20px 24px; max-width: 720px; color: #ffd9d3;
}
.error-box h2 { color: #ff7a6a; margin-top: 0; }
.error-box pre { white-space: pre-wrap; font-size: 12.5px; max-height: 40vh; overflow: auto; }

.hint { color: var(--cream-dim); font-size: 12.5px; margin-top: 10px; }
.seed-line { color: var(--cream-dim); font-size: 13px; margin-top: 8px; }

/* mobile joystick */
#joystick {
  position: absolute; z-index: 9; display: none;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(246,239,221,0.08); border: 1px solid var(--line);
}
#joystick .knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(246,239,221,0.28); border: 1px solid var(--line);
}

/* ============================================================= R1a additions */

/* ---- tier badge + effect lines (shop cards, popover) ---- */
.tier-badge {
  display: inline-block; font-size: 11px; font-weight: 800; border-radius: 6px;
  padding: 1px 7px; margin-left: 6px; color: #12240a; background: var(--leaf);
  vertical-align: middle;
}
/* Item D — genre-standard tier ramp. JS (screens.TIER_COLORS) applies these
   inline as the single source of truth; these class rules mirror them so any
   badge that renders before JS still matches. */
.tier-badge.t1 { background: #c9d1cc; color: #14201a; }
.tier-badge.t2 { background: #4a9fd8; color: #08131c; }
.tier-badge.t3 { background: #a86fd8; color: #160820; }
.tier-badge.t4 { background: #e05348; color: #2a0806; }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0; }
.mini-chip {
  font-size: 10.5px; padding: 1px 6px; border-radius: 5px;
  background: rgba(246,239,221,0.09); color: var(--cream-dim);
}
.effect-lines { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.effect-line { font-size: 11.5px; line-height: 1.35; }
.effect-line::before { content: '• '; opacity: 0.6; }
.effect-line.pos { color: #8fe06b; }
.effect-line.neg { color: #ff8a7d; }
.effect-line.special { color: #ffd98a; }
.card-scaling { font-size: 11px; color: var(--cream-dim); margin-top: 2px; }
.slot .card-name { font-size: 15px; }
.slot-info { display: flex; flex-direction: column; gap: 4px; }

/* ---- owned weapons: clickable + previews ---- */
.owned-w { cursor: pointer; }
.owned-w .owned-name { font-size: 12px; color: var(--cream); font-weight: 700; }
.owned-w .tier-badge { margin-left: 2px; }
.owned-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.combine-hint { font-size: 11px; color: var(--leaf); margin-top: 4px; }

/* ---- player stats panel ---- */
.stats-panel {
  position: absolute; z-index: 30; top: 62px; left: 16px;
  width: 260px; max-width: 88vw; max-height: 78vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); display: none;
}
.stats-panel.open { display: block; }
/* The stats panel is a fixed top-left overlay (width 260px @ left 16px). On the
   level-up, crate and shop screens it is open on DESKTOP, so shift their content
   clear of it (panel right edge ~276px + gap) AND cap the content width to the
   remaining space so no card/slot overflows the right edge. On mobile (≤500px)
   the level-up/crate panel is kept CLOSED on entry (syncDecisionStatsPanel) and
   the shop panel scrolls, so the default centred/full-width layout applies. */
@media (min-width: 501px) {
  #screen-levelup, #screen-crate, #screen-shop { padding-left: 300px; }
  #screen-levelup .panel, #screen-crate .panel, #screen-shop .panel { width: min(1020px, calc(100vw - 340px)); }
  #screen-levelup .card-grid { width: 100%; } /* fill the (narrower) panel, don't use 96vw */
}
.sp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-weight: 800; color: var(--leaf); position: sticky; top: 0;
  background: var(--panel);
}
.sp-close {
  background: none; border: none; color: var(--cream-dim); font-size: 20px;
  cursor: pointer; line-height: 1; padding: 0 4px;
}
.sp-body { padding: 8px 14px 14px; }
.sp-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed rgba(246,239,221,0.06);
}
.sp-row .sp-k { color: var(--cream-dim); }
.sp-row .sp-v { color: var(--cream); font-weight: 700; }
.sp-row.summary .sp-v { color: var(--gold); }
.sp-sub { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }

/* ---- toast feedback ---- */
.toast-container {
  position: absolute; z-index: 60; left: 50%; bottom: 78px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: max-content; max-width: 92vw;
}
.toast {
  background: #46180f; border: 1px solid var(--danger); color: #ffd9d0;
  padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  animation: toast-in 0.18s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }

/* ---- owned-gear pinned popup (weapon stats/combine/recycle + item description) ----
   A transparent full-inset layer catches click-outside; the card is positioned
   next to its chip by pinPopover() (inline top/left). On mobile it becomes a
   bottom sheet (.sheet + a dim backdrop). */
.popover-backdrop {
  position: absolute; inset: 0; z-index: 50; display: none; background: transparent;
}
.popover-backdrop.open { display: block; }
.popover {
  position: absolute; top: 0; left: 0;
  background: var(--panel-2); border: 1px solid var(--leaf); border-radius: 14px;
  padding: 14px 16px; width: max-content; max-width: 350px; max-height: 80vh; overflow: auto;
  box-shadow: 0 18px 44px rgba(0,0,0,0.6);
}
.popover .card-name { font-size: 18px; }
.popover .card-cat { font-size: 11.5px; color: var(--cream-dim); margin: 2px 0 4px; }
.popover .card-stats { margin: 8px 0; }
.popover .stack-count.big { font-size: 15px; }

/* ---- wave-end interstitial ---- */
.waveend-panel { text-align: center; width: min(520px, 94vw); cursor: pointer; }
.waveend-panel h2 { color: var(--gold); }
.waveend-lines { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; margin: 10px 0 16px; }
.waveend-lines span {
  font-size: 15px; font-weight: 700; color: var(--cream);
  background: rgba(246,239,221,0.07); padding: 6px 12px; border-radius: 9px;
}
.waveend-hint { color: var(--cream-dim); font-size: 13px; }

/* ---- victory rewards ---- */
.rewards-box {
  margin: 6px 0 4px; padding: 10px 16px; border-radius: 12px;
  background: rgba(244,197,66,0.08); border: 1px solid rgba(244,197,66,0.35);
  max-width: 460px; text-align: left;
}
.rewards-box .rw-title { font-weight: 800; color: var(--gold); margin-bottom: 4px; font-size: 14px; }
.rewards-box .rw-line { font-size: 13px; color: var(--cream); margin: 3px 0; }
.rewards-box.empty { opacity: 0.7; }

/* ---- level-up tier colours (Item D: genre-standard ramp, mirrors TIER_COLORS) ---- */
.card.lvl-t1 { border-left: 4px solid #c9d1cc; }
.card.lvl-t2 { border-left: 4px solid #4a9fd8; }
.card.lvl-t3 { border-left: 4px solid #a86fd8; }
.card.lvl-t4 { border-left: 4px solid #e05348; }

/* ---- wave-end per-weapon damage list (Item B) ---- */
.waveend-damage { display: flex; flex-direction: column; gap: 3px; max-width: 340px;
  margin: 0 auto 14px; text-align: left; }
.waveend-damage .wd-title { font-size: 12px; font-weight: 800; color: var(--leaf);
  margin-bottom: 2px; }
.wd-row { display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; padding: 2px 0; border-bottom: 1px dashed rgba(246,239,221,0.06); }
.wd-name { color: var(--cream-dim); }
.wd-val { color: var(--gold); font-weight: 800; }
.card-damage { font-size: 11.5px; color: var(--cream-dim); margin-top: 6px;
  padding-top: 5px; border-top: 1px dashed rgba(246,239,221,0.08); }

/* ---- crate reveal (捡到道具, Item A) ---- */
.crate-panel { text-align: center; width: min(420px, 94vw); }
.crate-panel h2 { color: var(--gold); }
.crate-card { text-align: left; background: rgba(246,239,221,0.05);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  margin: 12px 0 16px; }
.crate-card .card-head { margin-bottom: 6px; }
/* legendary boss-box reveal: a gold accent ring on top of the tier fill. */
.crate-card.legendary-reveal {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(240,196,60,0.45);
}
/* brief crate-open animation frame (crate_open f0→f2), centred in the card
   before the item content is revealed. */
.crate-open-anim {
  display: block; margin: 6px auto; width: 96px; height: 96px;
  image-rendering: auto; object-fit: contain;
}
.crate-actions { display: flex; gap: 12px; justify-content: center; }
.crate-actions .btn { min-width: 120px; }

/* ---- disabled buy (predictable rejection) ---- */
.slot .btn.leaf.blocked { opacity: 0.4; }

/* ---- toolbar collapse (mobile) ---- */
.tb-menu { display: none; }
.tb-chips { display: flex; gap: 10px; align-items: center; }

@media (max-width: 500px) {
  .toolbar { top: 10px; right: 10px; }
  .tb-menu { display: block; }
  .tb-chips {
    position: absolute; top: 40px; right: 0; flex-direction: column;
    align-items: flex-end; gap: 6px; display: none;
    background: var(--panel); padding: 8px; border-radius: 10px;
    border: 1px solid var(--line);
  }
  #tb-toggle:checked ~ .tb-chips { display: flex; }
  .hud-top { top: 8px; }
  .hud-wave { font-size: 17px; }
  .hud-timer { font-size: 24px; }
  .hud-mats { font-size: 15px; top: 10px; }
  .stats-panel { top: 54px; left: 8px; width: 220px; }
  .waveend-lines span { font-size: 13px; padding: 5px 9px; }
  /* pinned popup → bottom sheet on mobile (simpler than anchored positioning) */
  .popover-backdrop.open { background: rgba(10,7,4,0.55); }
  .popover.sheet {
    position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important;
    width: 100%; max-width: none; max-height: 72vh;
    border-radius: 16px 16px 0 0; border-bottom: none;
  }
}

/* =====================================================================
   R17 — B+ CUT-PAPER GAME-FEEL CHROME
   Kraft-paper card faces (grain baked into the BACKGROUND layer so text is
   never veiled), cream cut-paper rims echoing the sprite rim, chunky
   pressed-paper buttons, and warm soil/leaf tones — across every screen and
   popup. Layout structure is unchanged; this is texture + shape language.
   ===================================================================== */

/* menu-screen backdrop: warm garden-soil paper wash */
.screen.menu {
  background:
    radial-gradient(120% 90% at 50% -6%, rgba(111, 191, 58, 0.14), transparent 58%),
    radial-gradient(90% 70% at 50% 108%, rgba(240, 138, 46, 0.08), transparent 60%),
    linear-gradient(180deg, #33261a 0%, #1d160f 100%);
}
.screen.menu::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: 200px 200px;
  opacity: 0.06; mix-blend-mode: overlay;
}

/* ---- paper card faces: cards, slots, panels, chips, crate/wave panels ---- */
.card,
.slot,
.panel,
.crate-card,
.owned-w,
.popover,
.rewards-box,
.gift-strip,
.waveend-lines span,
.set-bonus-list {
  background-image: var(--grain), var(--kraft-card);
  background-size: 160px 160px, auto;
  background-blend-mode: overlay, normal;
}
.card,
.slot,
.crate-card,
.owned-w {
  border: 1.5px solid var(--rim);
  box-shadow:
    inset 0 1px 0 rgba(246, 239, 221, 0.08),
    inset 0 0 0 1px var(--rim-soft),
    0 5px 14px rgba(0, 0, 0, 0.42);
}
.panel,
.popover {
  border: 1.5px solid var(--rim);
  background-image: var(--grain), var(--kraft);
  background-size: 200px 200px, auto;
  background-blend-mode: overlay, normal;
  box-shadow:
    inset 0 1px 0 rgba(246, 239, 221, 0.07),
    0 18px 44px rgba(0, 0, 0, 0.55);
}

/* stitched cut-paper inner rim on the big panels (a dashed cream thread just
   inside the edge — pure decoration, never over the content) */
.panel, .crate-card, .waveend-panel, .popover { position: relative; }
.panel::after,
.crate-card::after,
.waveend-panel::after,
.popover::after {
  content: ''; position: absolute; inset: 6px; pointer-events: none;
  border: 1px dashed var(--stitch); border-radius: 11px; opacity: 0.5;
}

.card:hover {
  transform: translateY(-3px) rotate(-0.15deg);
  border-color: rgba(111, 191, 58, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(246, 239, 221, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.5);
}

/* ---- chunky pressed-paper buttons ---- */
.btn {
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background-image: var(--grain), linear-gradient(180deg, var(--carrot), var(--carrot-d));
  background-size: 120px 120px, auto;
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 4px 0 #96500f, 0 8px 16px rgba(0, 0, 0, 0.35);
}
.btn.leaf {
  background-image: var(--grain), linear-gradient(180deg, var(--leaf), var(--leaf-d));
  background-size: 120px 120px, auto;
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 0 #367016, 0 8px 16px rgba(0, 0, 0, 0.3);
}
.btn.secondary {
  background-image: var(--grain), linear-gradient(180deg, #4a3c2a, #382c1d);
  background-size: 120px 120px, auto;
  background-blend-mode: overlay, normal;
  box-shadow:
    inset 0 1px 0 rgba(246, 239, 221, 0.12),
    0 4px 0 #241a10, 0 8px 16px rgba(0, 0, 0, 0.3);
}
.btn:active { transform: translateY(3px); }
.btn.leaf:active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 0 #367016; }
.btn.secondary:active { box-shadow: inset 0 1px 0 rgba(246,239,221,0.1), 0 1px 0 #241a10; }
.chip {
  background-image: var(--grain), var(--kraft);
  background-size: 120px 120px, auto;
  background-blend-mode: overlay, normal;
  border: 1px solid var(--rim);
}

/* ---- stats panel: hero identity header (Item 2) ---- */
.stats-panel {
  background-image: var(--grain), var(--kraft);
  background-size: 200px 200px, auto;
  background-blend-mode: overlay, normal;
  border: 1.5px solid var(--rim);
}
.sp-hero {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.sp-hero .card-icon,
.sp-hero img {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.28); border: 1.5px solid var(--rim);
  box-shadow: inset 0 0 0 1px var(--rim-soft);
}
.sp-hero-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-hero-name { font-size: 15px; font-weight: 800; color: var(--leaf); }
.sp-hero-wave { font-size: 12px; font-weight: 700; color: var(--gold); }

/* ---- shop offer row: reroll attached to the 4 cards (Item 5) ---- */
/* align-items: flex-start (not stretch) — the reroll button docks top-right of
   the offer row instead of stretching to the grid's full height (was rendering
   as a full-column pillar, worse once offers wrap to a 2nd row). */
.shop-offer { display: flex; gap: 12px; align-items: flex-start; }
.shop-offer .shop-slots { flex: 1 1 auto; min-width: 0; }
.shop-reroll-col { flex: 0 0 118px; display: flex; align-self: flex-start; height: fit-content; }
.btn.shop-reroll {
  flex: none; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 8px; border-radius: 12px; min-height: 0; min-width: 96px;
  text-align: center; line-height: 1.1;
}
.btn.shop-reroll .rr-label { font-size: 14px; font-weight: 800; }
.btn.shop-reroll .rr-cost {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 15px; font-weight: 800; color: var(--gold);
}
.btn.shop-reroll .rr-cost .mat-icon { color: var(--gold); font-size: 14px; }
.btn.shop-reroll.rr-free .rr-cost { color: #b6f08a; }
.btn.shop-reroll.unaffordable {
  background-image: var(--grain), linear-gradient(180deg, #5a2a22, #431e18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 0 #2c110d, 0 8px 16px rgba(0,0,0,0.3);
  border-color: rgba(224, 75, 58, 0.5);
}
.btn.shop-reroll.unaffordable .rr-cost { color: #ff8a7d; }

/* ---- colored weapon-set chips with progress (Item 3) ---- */
.set-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; }
.set-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 8px; border-radius: 999px; border: 1.5px solid;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.set-chip.clickable { cursor: pointer; }
.set-chip.clickable:hover { filter: brightness(1.14); }
.set-chip:focus-visible { outline: 2px solid var(--cream); outline-offset: 1px; }
.set-chip .set-chip-prog {
  font-weight: 800; padding: 0 4px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
}
.set-chip.maxed { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 8px rgba(246,239,221,0.18); }
.set-chip.maxed .set-chip-prog::after { content: ' ✓'; }
.set-chip-row.compact-row .set-chip { font-size: 10px; padding: 2px 6px; }

/* set-bonus popup list */
.set-bonus-list {
  display: flex; flex-direction: column; gap: 4px; margin: 8px 0 4px;
  border-radius: 10px; padding: 8px 10px;
}
.set-bonus-row { display: flex; gap: 8px; align-items: baseline; font-size: 12px; opacity: 0.6; }
.set-bonus-row.active { opacity: 1; }
.set-bonus-count {
  flex: 0 0 auto; font-weight: 800; font-size: 11px; color: var(--cream);
  background: rgba(0, 0, 0, 0.3); border-radius: 6px; padding: 1px 6px;
}
.set-bonus-row.active .set-bonus-count { color: var(--gold); }
.set-bonus-text { color: var(--cream-dim); line-height: 1.35; }
.set-bonus-row.active .set-bonus-text { color: var(--cream); }

/* ---- burst-fire downside line (visible before purchase) ---- */
.effect-line.burst-line {
  color: #ff9a8d; font-weight: 700; margin-top: 4px;
  display: inline-block; align-self: flex-start;
  background: rgba(224, 75, 58, 0.14); border: 1px solid rgba(224, 75, 58, 0.4);
  border-radius: 7px; padding: 2px 8px;
}
.effect-line.burst-line::before { content: '⚠ '; opacity: 0.85; }

/* ---- owned gear chips: weapon chips stack head + set chips ---- */
.owned-w.weapon-chip { flex-direction: column; align-items: stretch; gap: 5px; }
.owned-w-head { display: flex; align-items: center; gap: 8px; }

/* ---- Your Items sort control (Item 4) ---- */
.owned-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sort-btn {
  font-family: var(--font); font-size: 11.5px; font-weight: 700; color: var(--cream-dim);
  background-image: var(--grain), var(--kraft);
  background-size: 100px 100px, auto; background-blend-mode: overlay, normal;
  border: 1px solid var(--rim); border-radius: 999px; padding: 4px 12px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(246, 239, 221, 0.08);
  white-space: nowrap;
}
.sort-btn:hover { color: var(--cream); border-color: rgba(111, 191, 58, 0.6); }
.sort-btn:active { transform: translateY(1px); }

/* level-up loadout uses the shared two-grid inventory (spacing) */
#levelup-loadout { margin-top: 14px; }

/* shop offer row stacks on mobile (reroll below the cards, full width) */
@media (max-width: 560px) {
  .shop-offer { flex-direction: column; align-items: stretch; } /* stretch = full width in column mode, not height */
  .shop-reroll-col { flex-basis: auto; height: auto; }
  .btn.shop-reroll { flex-direction: row; gap: 8px; padding: 10px 14px; }
}