/* $BAG · bag-game.css: "Hold the Bag" mini-game.
   Everything is namespaced under #bag-game / .bg-*. Page tokens are always used with fallbacks. */

#bag-game,
.bg-root {
  --bg-kraft: var(--kraft, #c49a6c);
  --bg-kraft-2: var(--kraft-2, #a87c4f);
  --bg-kraft-light: var(--kraft-light, #e3c9a2);
  --bg-kraft-dark: var(--kraft-dark, #7a5532);
  --bg-grease: var(--grease, rgba(92, 58, 20, .32));
  --bg-sheen: var(--grease-sheen, #fff3cf);
  --bg-ink: var(--ink, #2a1a0e);
  --bg-paper: var(--paper, #fffaf0);
  --bg-adobo: var(--adobo, #a8361c);
  --bg-foil: var(--foil, #c9cdd3);
  --bg-foil-2: var(--foil-2, #eef0f3);
  --bg-cilantro: var(--cilantro, #3f7d33);
  --bg-lime: var(--lime, #b8d63a);
  --bg-display: var(--font-display, "Lilita One", "Arial Black", Impact, system-ui, sans-serif);
  --bg-body: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --bg-mono: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
}

#bag-game.bg-root {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding: 10px;
  color: var(--bg-ink);
  font-family: var(--bg-body);
  border: 3px solid var(--bg-ink);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--bg-ink);
  background-color: var(--bg-kraft);
  /* appetizing grease: translucent soaked blotches with darker rims + a wet glint, plus paper fibre */
  background-image:
    radial-gradient(40px 12px at 8% 13%, rgba(255, 243, 207, .6), transparent 70%),
    radial-gradient(160px 115px at 10% 19%, rgba(92, 58, 20, .2) 0%, rgba(92, 58, 20, .27) 62%, rgba(66, 40, 12, .36) 69%, transparent 71%),
    radial-gradient(30px 9px at 86% 80%, rgba(255, 243, 207, .55), transparent 70%),
    radial-gradient(130px 95px at 89% 85%, rgba(92, 58, 20, .18) 0%, rgba(92, 58, 20, .25) 62%, rgba(66, 40, 12, .33) 69%, transparent 71%),
    radial-gradient(70px 52px at 64% 6%, rgba(92, 58, 20, .16) 0%, rgba(92, 58, 20, .22) 62%, rgba(66, 40, 12, .3) 69%, transparent 71%),
    repeating-linear-gradient(93deg, rgba(42, 26, 14, .035) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(42, 26, 14, .08));
}
#bag-game.bg-root *,
#bag-game.bg-root *::before,
#bag-game.bg-root *::after { box-sizing: border-box; }
#bag-game [hidden] { display: none !important; }

/* ---------- HUD ---------- */
#bag-game .bg-hud { display: grid; gap: 8px; margin-bottom: 10px; }
#bag-game .bg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#bag-game .bg-stat {
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
  padding: 5px 8px 6px;
  background: var(--bg-paper);
  border: 2px solid var(--bg-ink);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--bg-ink);
  transition: background-color .2s;
}
#bag-game .bg-stat.is-hot { background: var(--bg-lime); }
#bag-game .bg-k {
  font: 700 10px/1.15 var(--bg-mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--bg-ink); opacity: .78;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bag-game .bg-v {
  font-family: var(--bg-display); font-weight: 400;
  font-size: clamp(18px, 4.8vw, 26px); line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bag-game .bg-stat--best .bg-v { color: var(--bg-adobo); }

#bag-game .bg-bar { display: flex; align-items: stretch; gap: 6px; }
#bag-game .bg-meter {
  flex: 1; min-width: 0; min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  background: var(--bg-paper);
  border: 2px solid var(--bg-ink);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--bg-ink);
}
#bag-game .bg-meter-k { font: 700 11px/1 var(--bg-mono); letter-spacing: .08em; text-transform: uppercase; }
#bag-game .bg-meter-track {
  position: relative; flex: 1; min-width: 40px; height: 16px;
  border: 2px solid var(--bg-ink); border-radius: 999px; overflow: hidden;
  background: repeating-linear-gradient(-45deg, rgba(42, 26, 14, .07) 0 6px, transparent 6px 12px), var(--bg-kraft-light);
}
#bag-game .bg-meter-fill {
  position: absolute; inset: 0;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(180deg, #f0c565 0%, #c98b2e 55%, #a8691d 100%);
  box-shadow: inset 0 3px 0 rgba(255, 243, 207, .75);
  transition: transform .14s linear, background .25s;
}
#bag-game .bg-meter.is-warn .bg-meter-fill { background: linear-gradient(180deg, #f1a25a 0%, #d0661f 60%, #a84e14 100%); }
#bag-game .bg-meter.is-crit .bg-meter-fill { background: linear-gradient(180deg, #e2654a 0%, var(--bg-adobo) 60%, #7c2412 100%); }
#bag-game .bg-meter-tick { position: absolute; left: 85%; top: 0; bottom: 0; width: 2px; background: var(--bg-ink); opacity: .55; }
#bag-game .bg-meter-pct {
  min-width: 3.6ch; text-align: right;
  font-family: var(--bg-display); font-size: 18px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
#bag-game .bg-meter.is-crit { animation: bg-crit .5s ease-in-out infinite alternate; }
#bag-game .bg-meter.is-crit .bg-meter-pct { color: var(--bg-adobo); }
@keyframes bg-crit { from { background: var(--bg-paper); } to { background: #ffe0d6; } }

#bag-game .bg-icon {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  color: var(--bg-ink); background: var(--bg-paper);
  border: 2px solid var(--bg-ink); border-radius: 12px;
  box-shadow: 0 3px 0 var(--bg-ink);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, background-color .15s;
}
#bag-game .bg-icon svg { width: 22px; height: 22px; fill: currentColor; }
#bag-game .bg-icon[aria-pressed="true"] { background: var(--bg-lime); }
#bag-game .bg-icon:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--bg-ink); }
#bag-game .bg-icon:disabled { opacity: .45; cursor: default; }

/* ---------- stage ---------- */
#bag-game .bg-stage {
  position: relative;
  height: clamp(400px, calc(100vh - 280px), 600px);
  overflow: hidden;
  border: 3px solid var(--bg-ink);
  border-radius: 16px;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background:
    radial-gradient(18px 5px at 79% 25%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(64px 44px at 82% 28%, rgba(214, 150, 60, .13) 0%, rgba(200, 136, 50, .18) 62%, rgba(160, 100, 30, .26) 69%, transparent 71%),
    radial-gradient(12px 4px at 10% 58%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(44px 32px at 12% 60%, rgba(214, 150, 60, .11) 0%, rgba(200, 136, 50, .15) 62%, rgba(160, 100, 30, .22) 69%, transparent 71%),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(42, 26, 14, .05) 27px 28px),
    linear-gradient(180deg, var(--bg-paper) 0%, #f6ecda 100%);
}
@supports (height: 1svh) {
  #bag-game .bg-stage { height: clamp(400px, calc(100svh - 280px), 600px); }
}
#bag-game .bg-stage::before {
  content: "HOT FOOD \00B7  HANDLE WITH CARE";
  position: absolute; top: 10px; right: 12px; z-index: 0;
  font: 700 10px/1 var(--bg-mono); letter-spacing: .14em;
  color: var(--bg-ink); opacity: .32;
  pointer-events: none;
}
#bag-game.is-playing .bg-stage { touch-action: none; cursor: ew-resize; }
#bag-game .bg-stage:focus-visible {
  outline: 3px solid var(--bg-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--bg-lime);
}
#bag-game .bg-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; }

#bag-game .bg-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 5px 12px;
  font-family: var(--bg-display); font-size: 15px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--bg-ink); background: var(--bg-lime);
  border: 2px solid var(--bg-ink); border-radius: 999px;
  box-shadow: 0 3px 0 var(--bg-ink);
  pointer-events: none;
}

/* ---------- cards (receipts) ---------- */
#bag-game .bg-card {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 22px 12px 24px;
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(42, 26, 14, .34);
}
#bag-game .bg-card > * { margin: auto; }

#bag-game .bg-receipt {
  position: relative;
  width: min(100%, 380px);
  padding: 14px 16px 14px;
  color: var(--bg-ink);
  font-family: var(--bg-mono);
  border-radius: 6px 6px 0 0;
  filter: drop-shadow(0 7px 0 rgba(42, 26, 14, .38));
  background:
    radial-gradient(22px 7px at 88% 6%, rgba(255, 243, 207, .9), transparent 70%),
    radial-gradient(58px 40px at 92% 8%, rgba(150, 96, 30, .14) 0%, rgba(150, 96, 30, .18) 62%, rgba(110, 68, 20, .24) 69%, transparent 71%),
    var(--bg-paper);
}
#bag-game .bg-receipt::after {
  /* torn zigzag bottom edge */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
  background:
    linear-gradient(45deg, transparent 50%, var(--bg-paper) 50%) 0 -8px / 16px 16px repeat-x,
    linear-gradient(-45deg, transparent 50%, var(--bg-paper) 50%) 0 -8px / 16px 16px repeat-x;
}
#bag-game .bg-r-head {
  display: flex; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; padding-bottom: 7px;
  font: 700 11px/1.2 var(--bg-mono); letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 2px dashed rgba(42, 26, 14, .5);
}
#bag-game .bg-torn { color: var(--bg-adobo); }
#bag-game .bg-title {
  margin: 0 0 6px;
  font-family: var(--bg-display); font-weight: 400;
  font-size: clamp(32px, 8.4vw, 46px); line-height: .95;
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--bg-ink);
}
#bag-game .bg-title--sm { font-size: clamp(24px, 6.6vw, 32px); line-height: 1; }
#bag-game .bg-sub { margin: 0 0 10px; font: 13px/1.4 var(--bg-body); }
#bag-game .bg-legend {
  list-style: none; margin: 0 0 12px; padding: 8px 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px;
  border-top: 2px dashed rgba(42, 26, 14, .5);
  border-bottom: 2px dashed rgba(42, 26, 14, .5);
}
#bag-game .bg-leg { display: flex; align-items: center; gap: 5px; min-width: 0; font: 12px/1.15 var(--bg-mono); }
#bag-game .bg-ico { flex: none; width: 30px; height: 30px; }
#bag-game .bg-leg-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bag-game .bg-leg-v { font-weight: 700; white-space: nowrap; }
#bag-game .bg-leg--bad .bg-leg-v { color: var(--bg-adobo); }
#bag-game .bg-r-foot { margin: 10px 0 0; font: 11px/1.35 var(--bg-mono); text-align: center; opacity: .82; }

#bag-game .bg-summary { margin: 0 0 8px; font-family: var(--bg-display); font-size: 19px; line-height: 1.15; color: var(--bg-adobo); }
#bag-game .bg-lines {
  margin: 0; padding: 6px 0;
  font: 13px/1.65 var(--bg-mono);
  border-top: 2px dashed rgba(42, 26, 14, .5);
  border-bottom: 2px dashed rgba(42, 26, 14, .5);
}
#bag-game .bg-lines > div { display: flex; align-items: baseline; gap: 6px; }
#bag-game .bg-lines dt {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
#bag-game .bg-lines dt::after { content: ""; flex: 1; min-width: 12px; border-bottom: 2px dotted rgba(42, 26, 14, .4); transform: translateY(-3px); }
#bag-game .bg-lines dd { margin: 0; font-weight: 700; text-align: right; }
#bag-game .bg-stamp {
  position: absolute; top: -16px; left: 58%;
  padding: 3px 10px;
  font-family: var(--bg-display); font-size: 18px; line-height: 1.1; text-transform: uppercase;
  color: var(--bg-adobo); background: rgba(255, 250, 240, .9);
  border: 3px solid var(--bg-adobo); border-radius: 8px;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-5deg);
  animation: bg-stamp .4s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes bg-stamp {
  from { transform: translateX(-50%) rotate(-5deg) scale(1.8); opacity: 0; }
  to { transform: translateX(-50%) rotate(-5deg) scale(1); opacity: 1; }
}

/* ---------- buttons ---------- */
#bag-game .bg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px;
  font-family: var(--bg-display); font-weight: 400; font-size: 20px; line-height: 1;
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none; text-align: center;
  border: 3px solid var(--bg-ink); border-radius: 14px;
  box-shadow: 0 4px 0 var(--bg-ink);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
#bag-game .bg-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 5px 0 var(--bg-ink); }
#bag-game .bg-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bg-ink); }
#bag-game .bg-btn--go { width: 100%; color: var(--bg-paper); background: var(--bg-adobo); }
#bag-game .bg-btn--x { color: var(--bg-paper); background: var(--bg-ink); }
#bag-game .bg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
#bag-game .bg-actions .bg-btn { width: 100%; padding-inline: 8px; font-size: clamp(16px, 4.6vw, 20px); white-space: nowrap; }

#bag-game .bg-btn:focus-visible,
#bag-game .bg-icon:focus-visible {
  outline: 3px solid var(--bg-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--bg-lime), 0 4px 0 var(--bg-ink);
}

/* ---------- footer copy ---------- */
#bag-game .bg-help { margin: 10px 4px 0; font: 13px/1.4 var(--bg-body); color: var(--bg-ink); }
#bag-game .bg-legal {
  display: inline-block; margin: 8px 0 2px;
  padding: 6px 12px;
  font: 700 12px/1.3 var(--bg-mono);
  color: var(--bg-ink); background: var(--bg-paper);
  border: 2px solid var(--bg-ink); border-radius: 999px;
}
#bag-game .bg-vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
#bag-game.bg-nocanvas .bg-stage::after {
  content: "This browser can't draw the game. The bag is safe, for now.";
  position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center;
  font: 700 14px/1.4 var(--bg-mono);
}

/* ---------- sizes ---------- */
@media (max-width: 380px) {
  #bag-game.bg-root { padding: 8px; border-radius: 18px; }
  #bag-game .bg-stats { gap: 4px; }
  #bag-game .bg-stat { padding: 4px 6px 5px; }
  #bag-game .bg-meter-k { display: none; }
  #bag-game .bg-receipt { padding-inline: 12px; }
  #bag-game .bg-leg { font-size: 11px; }
  #bag-game .bg-ico { width: 26px; height: 26px; }
}
@media (min-width: 760px) {
  #bag-game.bg-root { padding: 14px; border-radius: 26px; box-shadow: 0 8px 0 var(--bg-ink); }
  #bag-game .bg-stage { height: clamp(480px, calc(100vh - 260px), 640px); border-radius: 18px; }
  #bag-game .bg-card { align-items: center; }
}
@media (min-width: 960px) {
  #bag-game .bg-hud { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
  #bag-game .bg-bar .bg-meter { min-height: 100%; }
  #bag-game .bg-k { font-size: 11px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #bag-game *, #bag-game *::before, #bag-game *::after { animation: none !important; transition: none !important; }
}
.no-motion #bag-game *, .no-motion #bag-game *::before, .no-motion #bag-game *::after { animation: none !important; transition: none !important; }