/* =========================================================
   Quest Log // HUD — styles
   Designed for a 600x600 wearable display.
   On an additive display black renders as "see-through",
   so the background stays pure black.
   ========================================================= */

/* ---------- Color + type tokens (tweak the theme here) ---------- */
:root {
  --bg: #000000;
  --text: #f8f8f2;          /* Dracula foreground */
  --dim: #8a8fa3;           /* secondary text */
  --faint: #2a2d36;         /* borders, empty bar */
  --green: #50fa7b;         /* Dracula green: main accent */
  --gold: #ffd166;          /* loot / gold rewards */
  --red: #ff5555;           /* warnings / fail only */
  --cyan: #8be9fd;
  --purple: #bd93f9;

  /* Rarity colors */
  --rarity-common: var(--text);
  --rarity-uncommon: var(--green);
  --rarity-rare: var(--gold);
  --rarity-epic: var(--purple);

  --font: "Roboto", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ---------- The 600x600 stage ---------- */
.hud {
  position: relative;
  width: 600px;
  height: 600px;
  /* Generous inner padding keeps content away from the display edges */
  padding: 44px 48px 36px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  outline: 1px solid #1a1c22;   /* shows display bounds in a desktop browser */
}

/* Browser-only test panel below the HUD */
.dev-panel {
  width: 600px;
  padding: 0 48px;
}

.preview-caption {
  margin: 10px 0 0;
  text-align: center;
  color: #555a6a;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* When the viewport IS the display (the glasses), show only the HUD */
@media (max-width: 640px), (max-height: 640px) {
  .hud { outline: none; }
  .dev-panel { display: none; }
  /* Never scroll on the display (e.g. while the chest shakes the HUD) */
  html, body { overflow: hidden; }
}

/* ---------- Header ---------- */
.hud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}

/* Clock + date (+ a running timer) in the top-left */
.clock { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.clock-time { font-size: 22px; font-weight: 800; color: var(--text); }
.clock-date { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; color: var(--green); }

.timer-badge {
  padding: 2px 8px;
  border: 2px solid var(--cyan);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.timer-badge[hidden] { display: none; }
.timer-badge.is-paused { border-color: var(--gold); color: var(--gold); }

.stats { display: flex; gap: 20px; }
.stat b { font-weight: 700; }
.stat-gold { color: var(--gold); }
.stat-streak { color: var(--text); }

/* ---------- Screen area ---------- */
.screen-area {
  position: relative;
  flex: 1;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  animation: screen-in 260ms ease-out;
}

.screen[hidden] { display: none; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Screen 1: current quest ---------- */
.quest-type {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--green);
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 6px 16px;
}

.quest-type[data-type="side"]  { color: var(--cyan); }
.quest-type[data-type="daily"] { color: var(--gold); }
.quest-type[data-type="done"]  { color: var(--dim); }

.quest-title {
  margin: 6px 0 4px;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  max-width: 480px;
}

.quest-title.is-done {
  color: var(--dim);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}

/* Counter quests: one pip per step (e.g. 8 glasses of water) */
.progress[hidden] { display: none; }
.progress { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.pips { display: flex; gap: 6px; }

.pip {
  width: 34px;
  height: 14px;
  border: 2px solid var(--faint);
  border-radius: 3px;
}
.pip.is-filled { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 8px rgba(139, 233, 253, 0.5); }
.pip.is-new    { animation: pop-in 360ms cubic-bezier(.2, 1.6, .4, 1); }

.progress-text { font-size: 20px; font-weight: 700; color: var(--cyan); }

/* Floating "+5 XP" after a counter step */
.toast {
  position: absolute;
  left: 0;
  right: 0;
  top: 8%;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--green);
  opacity: 0;
  pointer-events: none;
}
.toast.is-active { animation: toast 1100ms ease-out; }

@keyframes toast {
  0%   { opacity: 0; transform: translateY(12px); }
  20%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-18px); }
}

.reward-label {
  font-size: 15px;
  letter-spacing: 0.25em;
  color: var(--dim);
}

.reward-row { display: flex; gap: 28px; font-size: 28px; font-weight: 700; }
.reward-xp   { color: var(--green); }
.reward-gold { color: var(--gold); }

.pager {
  margin-top: 6px;
  font-size: 16px;
  color: var(--dim);
  letter-spacing: 0.15em;
}

/* Two-pinch confirm: replaces the pager line while armed. The gold bar
   drains over the confirm window (--confirm-ms is set from app.js). */
.confirm-bar {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.hud.is-armed .confirm-bar { display: flex; }
.hud.is-armed .pager,
.hud.is-armed .allclear-hint { display: none; }

.confirm-text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold);
  animation: pop-in 260ms cubic-bezier(.2, 1.6, .4, 1);
}

.confirm-timer {
  width: 240px;
  height: 6px;
  border-radius: 3px;
  background: var(--faint);
  overflow: hidden;
}
.confirm-fill {
  height: 100%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  transform-origin: left;
  animation: confirm-drain var(--confirm-ms, 3000ms) linear forwards;
}

@keyframes confirm-drain {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* The quest title glows gold while armed */
.hud.is-armed .quest-title:not(.is-done) { color: var(--gold); text-shadow: 0 0 20px rgba(255, 209, 102, 0.5); }

/* ---------- Screen 2: quest complete ---------- */
.complete-heading {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--green);
  text-shadow: 0 0 24px rgba(80, 250, 123, 0.45);
  animation: pop-in 420ms cubic-bezier(.2, 1.4, .4, 1);
}

.complete-title {
  font-size: 26px;
  color: var(--text);
  max-width: 460px;
}

.complete-rewards { display: flex; gap: 32px; margin-top: 8px; }
.big { font-size: 40px; font-weight: 800; }

/* Gold pops in 700ms after the XP starts counting, with the coin sound */
.complete-rewards .reward-gold { animation: pop-in 320ms 700ms cubic-bezier(.2, 1.6, .4, 1) both; }

.combo {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--gold);
  animation: pop-in 360ms 200ms cubic-bezier(.2, 1.6, .4, 1) both;
}
.combo[hidden] { display: none; }

/* ---------- Screen 2b: LEVEL UP ---------- */
/* Timings match the fanfare (see showLevelUpScreen in app.js):
   letters drop in 0–0.8s, impact at 0.96s, title + bonus at 2.0s. */
.levelup { gap: 6px; }

/* Slowly turning light rays behind everything (black = see-through,
   so on the glasses these read as beams of light). */
.levelup-rays {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 209, 102, 0.22) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 68%);
  mask-image: radial-gradient(circle, #000 12%, transparent 68%);
  animation: rays-in 800ms ease-out both, rays-spin 9s linear infinite;
  pointer-events: none;
}

@keyframes rays-in   { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes rays-spin { to { rotate: 360deg; } }

/* Shockwave ring, fired at the impact */
.levelup-ring {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border: 5px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.levelup.is-impact .levelup-ring { animation: shockwave 700ms ease-out; }

@keyframes shockwave {
  from { opacity: 1; transform: scale(0.3); }
  to   { opacity: 0; transform: scale(3.2); }
}

/* "LEVEL UP!" — each letter drops in, one after another */
.levelup-heading {
  position: relative;
  font-size: 58px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(255, 209, 102, 0.7);
}
.levelup-heading span {
  display: inline-block;
  animation: letter-drop 420ms cubic-bezier(.2, 1.6, .4, 1) both;
  animation-delay: calc(var(--i) * 55ms + 80ms);
}

@keyframes letter-drop {
  from { opacity: 0; transform: translateY(-60px) scale(1.4); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* The level number: flips to the new level with a punch at impact */
.levelup-number {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 900;
  line-height: 1;
  color: var(--text);
  animation: pop-in 400ms 300ms cubic-bezier(.2, 1.4, .4, 1) both;
}
.levelup-lv { font-size: 36px; color: var(--gold); }
#levelUpNumber { font-size: 120px; text-shadow: 0 0 30px rgba(255, 209, 102, 0.55); }

.levelup.is-impact #levelUpNumber { animation: number-punch 520ms cubic-bezier(.2, 1.8, .4, 1); }
.levelup.is-pulse  #levelUpNumber { animation: number-pulse 220ms ease-out; }

@keyframes number-punch {
  0%   { transform: scale(0.4); color: var(--gold); }
  55%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes number-pulse {
  50% { transform: scale(1.08); }
}

/* Title + bonus land with the final chord */
.levelup-title,
.levelup-bonus {
  position: relative;
  animation: pop-in 380ms 2000ms cubic-bezier(.2, 1.5, .4, 1) both;
}
.levelup-title { font-size: 24px; font-weight: 700; color: var(--text); }
.levelup-bonus { font-size: 22px; font-weight: 800; color: var(--gold); animation-delay: 2150ms; }

/* Gold version of the full-screen flash */
.flash[data-color="white"] {
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.6), transparent 70%);
}
.flash[data-color="gold"] {
  background: radial-gradient(circle at 50% 45%, rgba(255, 209, 102, 0.45), transparent 65%);
}

/* ---------- Screen 3: treasure chest ---------- */
/* app.js sets data-rarity and data-phase on #screenLoot:
   drop → rattle → rattle2 → open → spin → landed → result.
   Each phase shows one layer; the motion lives here, and the timings
   match showChestScreen(). Deliberately over the top. */
.chest { --rarity: var(--rarity-common); }
.chest[data-rarity="uncommon"] { --rarity: var(--rarity-uncommon); }
.chest[data-rarity="rare"]     { --rarity: var(--rarity-rare); }
.chest[data-rarity="epic"]     { --rarity: var(--rarity-epic); }

/* Three stacked layers: the chest, the reel, the result */
.chest-stage,
.reel,
.chest-result {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 300ms ease, transform 300ms ease;
}
.reel,
.chest-result { opacity: 0; visibility: hidden; }

/* -- Light rays turning behind everything; they build up with the tension -- */
.chest-rays {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--rarity) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 66%);
  mask-image: radial-gradient(circle, #000 8%, transparent 66%);
  opacity: 0;
  transition: opacity 400ms ease;
  animation: rays-spin 8s linear infinite;
  pointer-events: none;
}
/* Before the lid opens the rays are neutral gold, so they don't spoil it */
.chest[data-phase="rattle"]  .chest-rays,
.chest[data-phase="rattle2"] .chest-rays { --rarity: var(--gold); }
.chest[data-phase="rattle"]  .chest-rays { opacity: 0.12; }
.chest[data-phase="rattle2"] .chest-rays { opacity: 0.25; animation-duration: 4s; }
.chest[data-phase="open"]    .chest-rays { opacity: 0.55; animation-duration: 3s; }
.chest[data-phase="spin"]    .chest-rays { opacity: 0.18; }
.chest[data-phase="landed"]  .chest-rays { opacity: 0.6; animation-duration: 3s; }
.chest[data-phase="result"]  .chest-rays { opacity: 0.35; }

/* -- The chest: drops in, rattles (twice, harder), lid flies open -- */
.chest-svg {
  position: relative;
  filter: drop-shadow(0 0 12px rgba(255, 209, 102, 0.35));
  transition: filter 300ms ease, transform 300ms ease;
}
.chest[data-phase="drop"]    .chest-svg { animation: chest-drop 450ms cubic-bezier(.3, 1.4, .5, 1) both; }
.chest[data-phase="rattle"]  .chest-svg { animation: chest-rattle 350ms linear; filter: drop-shadow(0 0 18px rgba(255, 209, 102, 0.6)); }
.chest[data-phase="rattle2"] .chest-svg { animation: chest-rattle 300ms linear, chest-swell 350ms ease-in forwards; filter: drop-shadow(0 0 30px var(--gold)); }
.chest[data-phase="open"]    .chest-svg { filter: drop-shadow(0 0 36px var(--rarity)); transform: scale(1.15); }

.chest-lid {
  transform-box: fill-box;
  transform-origin: 85% 100%;
  transition: transform 220ms cubic-bezier(.2, 1.6, .4, 1);
}
.chest:not([data-phase="drop"]):not([data-phase="rattle"]):not([data-phase="rattle2"]) .chest-lid {
  transform: translateY(-12px) rotate(-30deg);
}

@keyframes chest-drop {
  0%   { transform: translateY(-260px) scale(0.8); opacity: 0; }
  60%  { transform: translateY(0) scale(1.05, 0.9); opacity: 1; }
  78%  { transform: translateY(-16px) scale(1); }
  100% { transform: translateY(0); }
}
@keyframes chest-rattle {
  0%, 100% { rotate: 0deg; }
  15% { rotate: -8deg; }
  30% { rotate: 8deg; }
  45% { rotate: -7deg; }
  60% { rotate: 7deg; }
  80% { rotate: -4deg; }
}
@keyframes chest-swell { to { transform: scale(1.12); } }

/* A fan of five light beams that bursts out of the chest */
.chest-beams {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.chest-beam {
  position: absolute;
  left: -32px;
  bottom: 0;
  width: 64px;
  height: 340px;
  background: linear-gradient(to top, var(--rarity), transparent 90%);
  filter: blur(5px);
  opacity: 0;
  transform-origin: bottom center;
  transform: rotate(var(--a)) scaleY(0);
  transition: transform 400ms cubic-bezier(.2, 1.3, .4, 1), opacity 300ms;
}
.chest-beam:nth-child(3) { width: 90px; left: -45px; }        /* centre beam is widest */
.chest[data-phase="open"] .chest-beam { opacity: 0.7; transform: rotate(var(--a)) scaleY(1); }

/* Once the reel starts, the chest fades up and away */
.chest[data-phase="spin"]   .chest-stage,
.chest[data-phase="landed"] .chest-stage,
.chest[data-phase="result"] .chest-stage { opacity: 0; transform: scale(0.7) translateY(-60px); }

/* -- The slot reel: 3 rows visible, the prize stops in the middle -- */
.chest[data-phase="spin"]   .reel,
.chest[data-phase="landed"] .reel { opacity: 1; visibility: visible; }

.reel-window {
  width: 460px;
  height: 192px;                 /* 3 × 64px rows (REEL_ROW_PX in app.js) */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.reel-strip { will-change: transform; }

.reel-row {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  font-size: 24px;
  font-weight: 700;
  color: var(--rarity-common);
  white-space: nowrap;
  overflow: hidden;
}
.reel-row[data-rarity="uncommon"] { color: var(--rarity-uncommon); }
.reel-row[data-rarity="rare"]     { color: var(--rarity-rare); }
.reel-row[data-rarity="epic"]     { color: var(--rarity-epic); }
.reel-icon { width: 44px; font-size: 34px; text-align: center; }

/* The frame around the middle row, with slot-machine chase lights */
.reel-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 470px;
  height: 68px;
  margin: -34px 0 0 -235px;
  border: 3px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 0 18px -4px var(--gold);
  pointer-events: none;
}
.bulb {
  position: absolute;
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  opacity: 0.25;
  animation: bulb-chase 1080ms steps(1) infinite;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes bulb-chase {
  0%, 20% { opacity: 1; }
  21%, 100% { opacity: 0.25; }
}

.chest[data-phase="landed"] .reel-frame {
  border-color: var(--rarity);
  box-shadow: 0 0 34px var(--rarity), inset 0 0 22px -8px var(--rarity);
  animation: frame-flash 300ms ease-out 3;
}
.chest[data-phase="landed"] .bulb {
  background: var(--rarity);
  box-shadow: 0 0 10px var(--rarity);
  animation: bulb-flash 200ms steps(1) infinite;
  animation-delay: 0ms;
}
@keyframes frame-flash { 50% { transform: scale(1.06); } }
@keyframes bulb-flash { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.2; } }

/* "NICE!" / "BIG WIN!" / "JACKPOT!!" above the reel */
.chest-shout {
  position: absolute;
  top: -4px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--rarity);
  text-shadow: 0 0 20px var(--rarity);
  opacity: 0;
  transform: scale(0.3);
}
.chest-shout:empty { display: none; }
.chest[data-phase="landed"] .chest-shout { animation: shout-pop 500ms cubic-bezier(.2, 1.8, .4, 1) forwards; }
@keyframes shout-pop {
  0%   { opacity: 0; transform: scale(0.3) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.25) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* -- The result: rarity, the item, bonus gold -- */
.chest[data-phase="result"] .chest-result { opacity: 1; visibility: visible; }
.chest-result { gap: 10px; }

.loot-rarity {
  --rarity: var(--rarity-common);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--rarity);
  text-shadow: 0 0 22px var(--rarity);
}
/* Each letter bounces in a little wave */
.loot-rarity span { display: inline-block; }
.chest[data-phase="result"] .loot-rarity span {
  animation: letter-wave 900ms ease-in-out infinite;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes letter-wave {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
}

.loot-card {
  --rarity: var(--rarity-common);
  position: relative;
  padding: 12px 28px 16px;
  border: 3px solid var(--rarity);
  border-radius: 10px;
  box-shadow: 0 0 28px -6px var(--rarity), inset 0 0 24px -12px var(--rarity);
  max-width: 470px;
}

/* The prize icon, with a spinning halo behind it */
.loot-icon-wrap { position: relative; display: inline-block; }
.loot-icon-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--rarity) 0deg 10deg, transparent 10deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%);
  mask-image: radial-gradient(circle, #000 20%, transparent 70%);
  opacity: 0.6;
  animation: rays-spin 4s linear infinite;
}
.loot-icon { position: relative; font-size: 52px; line-height: 1.1; }
.chest[data-phase="result"] .loot-icon { animation: icon-bounce 700ms cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes icon-bounce {
  0%   { transform: scale(0) rotate(-40deg); }
  60%  { transform: scale(1.35) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

.loot-name   { font-size: 28px; font-weight: 700; }
.loot-effect { margin-top: 6px; font-size: 21px; color: var(--dim); line-height: 1.3; }
.chest-gold  { font-size: 22px; font-weight: 800; color: var(--gold); }

/* "NEW!" sticker the first time you find an item */
.new-badge {
  position: absolute;
  top: -14px;
  right: -18px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--red);
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.08em;
  transform: rotate(12deg);
  display: none;
}
.chest.is-new .new-badge { display: block; }
.chest[data-phase="result"] .new-badge { animation: sticker-slap 400ms 300ms cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes sticker-slap {
  0%   { transform: rotate(40deg) scale(2.5); opacity: 0; }
  100% { transform: rotate(12deg) scale(1); opacity: 1; }
}

.chest[data-phase="result"] .loot-rarity { animation: pop-in 420ms cubic-bezier(.2, 1.5, .4, 1) both; }
.chest[data-phase="result"] .loot-card   { animation: pop-in 420ms 100ms cubic-bezier(.2, 1.4, .4, 1) both; }
.chest[data-phase="result"] .chest-gold  { animation: pop-in 320ms 250ms cubic-bezier(.2, 1.6, .4, 1) both; }

/* Rarity variants for the result card */
[data-rarity="uncommon"] .loot-rarity, [data-rarity="uncommon"] .loot-card { --rarity: var(--rarity-uncommon); }
[data-rarity="rare"]     .loot-rarity, [data-rarity="rare"]     .loot-card { --rarity: var(--rarity-rare); }
[data-rarity="epic"]     .loot-rarity, [data-rarity="epic"]     .loot-card { --rarity: var(--rarity-epic); }

/* -- EPIC: everything goes rainbow (after the lid opens) -- */
.chest[data-rarity="epic"][data-phase="open"] .chest-rays,
.chest[data-rarity="epic"][data-phase="spin"] .chest-rays,
.chest[data-rarity="epic"][data-phase="landed"] .chest-rays,
.chest[data-rarity="epic"][data-phase="result"] .chest-rays,
.chest[data-rarity="epic"] .loot-icon-wrap::before {
  animation: rays-spin 3s linear infinite, rainbow 1.2s linear infinite;
}
.chest[data-rarity="epic"] .chest-beam { animation: rainbow 1.2s linear infinite; }
.chest[data-rarity="epic"] .chest-shout {
  background: linear-gradient(90deg, #ff5555, #ffd166, #50fa7b, #8be9fd, #bd93f9, #ff79c6, #ff5555);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px var(--purple));
}
.chest[data-rarity="epic"][data-phase="landed"] .chest-shout {
  animation: shout-pop 500ms cubic-bezier(.2, 1.8, .4, 1) forwards, rainbow-slide 800ms linear infinite;
}
@keyframes rainbow { to { filter: hue-rotate(360deg); } }
@keyframes rainbow-slide { to { background-position: 200% 0; } }

/* -- Shared bling pieces (spawned by app.js into the particle layer) -- */

/* Gold coins: fly up, then fall with gravity */
.coin {
  position: absolute;
  font-size: var(--size, 20px);
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold);
  pointer-events: none;
  animation: coin-arc 1100ms both;
}
@keyframes coin-arc {
  0%   { transform: translate(0, 0) rotate(0) scale(0.5); opacity: 0; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  8%   { opacity: 1; }
  45%  { transform: translate(calc(var(--dx) * 0.5), var(--peak)) rotate(200deg) scale(1); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  100% { transform: translate(var(--dx), 260px) rotate(420deg) scale(0.8); opacity: 0; }
}

/* Twinkling stars */
.sparkle {
  position: absolute;
  font-size: 22px;
  color: var(--sparkle-color, var(--text));
  text-shadow: 0 0 10px var(--sparkle-color, var(--text));
  pointer-events: none;
  animation: twinkle 800ms ease-in-out both;
}
@keyframes twinkle {
  0%, 100% { transform: scale(0) rotate(0); opacity: 0; }
  50%      { transform: scale(1.3) rotate(90deg); opacity: 1; }
}

/* Shockwave ring */
.shock-ring {
  position: absolute;
  left: 50%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border: 5px solid var(--ring-color, var(--gold));
  border-radius: 50%;
  box-shadow: 0 0 20px var(--ring-color, var(--gold));
  pointer-events: none;
  animation: shockwave 700ms ease-out forwards;
}

/* Screen shake (the whole HUD) */
.hud.is-shaking { animation: hud-shake 320ms linear; }
@keyframes hud-shake {
  0%, 100% { translate: 0 0; }
  15% { translate: calc(var(--shake) * -1) calc(var(--shake) * 0.5); }
  30% { translate: var(--shake) calc(var(--shake) * -0.5); }
  45% { translate: calc(var(--shake) * -0.7) 0; }
  60% { translate: calc(var(--shake) * 0.6) calc(var(--shake) * 0.4); }
  80% { translate: calc(var(--shake) * -0.3) 0; }
}

/* Power-up chips next to the level ("☕ 12m  🛡️ ×1") */
.buff-bar {
  font-size: 15px;
  font-weight: 700;
  color: var(--cyan);
  white-space: nowrap;
}
.buff-bar[hidden] { display: none; }

/* "⚡ ×1.5 XP" on Quest Complete when a power-up boosted it */
.complete-boost {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--cyan);
  animation: pop-in 300ms 500ms cubic-bezier(.2, 1.6, .4, 1) both;
}
.complete-boost[hidden] { display: none; }

/* ---------- Screen 4: all clear ---------- */
.allclear-sub  { font-size: 24px; }
.allclear-hint { font-size: 18px; color: var(--dim); }

/* ---------- Schedules + timers on the quest card ---------- */
.quest-schedule {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cyan);
}
.quest-schedule[hidden] { display: none; }
.quest-schedule.is-overdue { color: var(--red); }        /* red = warning only */

.quest-timer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.quest-timer[hidden] { display: none; }

.quest-timer-time {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;     /* digits don't jiggle as they change */
  color: var(--dim);
}
.quest-timer-bar { width: 260px; height: 6px; border-radius: 3px; background: var(--faint); overflow: hidden; }
.quest-timer-fill { height: 100%; width: 0; background: var(--cyan); transition: width 1s linear; }

.quest-timer[data-state="running"] .quest-timer-time { color: var(--cyan); }
.quest-timer[data-state="paused"]  .quest-timer-time { color: var(--gold); animation: blink 1s steps(2) infinite; }
.quest-timer[data-state="paused"]  .quest-timer-fill { background: var(--gold); }
.quest-timer[data-state="done"]    .quest-timer-time { color: var(--green); }
.quest-timer[data-state="done"]    .quest-timer-fill { background: var(--green); }

@keyframes blink { 50% { opacity: 0.35; } }

/* The timer takes the space of the "REWARD" label */
.screen.has-timer .reward-label { display: none; }

/* ---------- Screen 6: add quest ---------- */
/* Small "▲ Settings" reminder at the top of the Add page */
.nav-up-hint {
  position: absolute;
  top: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #4a4e5c;
}

.draft-extras { font-size: 18px; font-weight: 700; color: var(--cyan); }
.draft-extras[hidden] { display: none; }

/* ---------- Screen 7: settings ---------- */
.quest-type[data-type="settings"] { color: var(--dim); }

.setting-value {
  padding: 10px 28px;
  border: 3px solid var(--green);
  border-radius: 10px;
  font-size: 30px;
  font-weight: 800;
  color: var(--green);
  animation: pop-in 260ms cubic-bezier(.2, 1.6, .4, 1);
}
.setting-value[hidden] { display: none; }
.setting-note { font-size: 18px; color: var(--dim); }

#screenSettings.is-danger .quest-title { color: var(--red); }

.add-entry,
.add-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.add-entry[hidden],
.add-preview[hidden] { display: none; }

.quest-type[data-type="new"] { color: var(--green); }

/* The text box. Transparent background: black is see-through on the
   glasses, so only the dashed outline and the text are visible. */
.add-input {
  width: 460px;
  padding: 18px 20px;
  background: transparent;
  border: 3px dashed var(--green);
  border-radius: 12px;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}
.add-input::placeholder { color: var(--dim); font-weight: 500; }

/* Focus stays visible (required on the glasses: no cursor). */
.add-input:focus {
  border-style: solid;
  box-shadow: 0 0 24px -6px var(--green), inset 0 0 18px -10px var(--green);
}

.add-examples { font-size: 17px; line-height: 1.6; color: var(--dim); }

.add-preview .quest-title { animation: pop-in 360ms cubic-bezier(.2, 1.4, .4, 1); }

/* ---------- Screen 5: notification ---------- */
.alert-label {
  --alert: var(--green);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--alert);
  animation: pop-in 380ms cubic-bezier(.2, 1.4, .4, 1);
}

.alert-title {
  --alert: var(--green);
  padding: 20px 28px;
  border: 3px solid var(--alert);
  border-radius: 10px;
  box-shadow: 0 0 26px -8px var(--alert);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  max-width: 480px;
  animation: pop-in 420ms 80ms cubic-bezier(.2, 1.4, .4, 1) both;
}

.alert-detail { font-size: 22px; font-weight: 700; color: var(--gold); white-space: pre-wrap; max-width: 480px; }

[data-kind="info"] .alert-label, [data-kind="info"] .alert-title       { --alert: var(--cyan); }
[data-kind="reminder"] .alert-label, [data-kind="reminder"] .alert-title { --alert: var(--cyan); }
[data-kind="reminder"] .alert-detail { color: var(--cyan); }
[data-kind="warning"] .alert-label, [data-kind="warning"] .alert-title { --alert: var(--red); }
[data-kind="info"] .alert-detail { color: var(--dim); }

/* ---------- Idle mode ---------- */
/* Everything fades out (black = see-through on the glasses) except the
   one-line glance. The first gesture wakes the HUD. */
.hud > * { transition: opacity 600ms ease; }
.hud.is-idle > :not(.glance) { opacity: 0; }

.glance {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 56px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.hud.is-idle .glance { opacity: 1; }

.glance-show {
  font-size: 12px;
  color: #3d6b4a;                 /* dimmed green: "swipe up to show" */
  margin-bottom: 4px;
}

.glance-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #3d6b4a;                 /* dimmed green */
}

.glance-text {
  margin-top: 4px;
  font-size: 20px;
  color: #6b7080;                 /* dim, so it doesn't pull focus */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* An unread notification is brighter than the normal glance */
.hud[data-glance="alert"] .glance-label { color: var(--green); }
.hud[data-glance="alert"] .glance-text  { color: var(--text); }

/* ---------- XP bar ---------- */
.xp { margin-bottom: 22px; }

.xp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.xp-level { font-size: 24px; font-weight: 700; letter-spacing: 0.08em; }
.xp-title { margin-left: 6px; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; }
.xp-text  { font-size: 18px; color: var(--dim); }

.xp-bar {
  position: relative;
  height: 22px;
  border: 2px solid var(--faint);
  border-radius: 4px;
  overflow: hidden;
}

.xp-fill {
  height: 100%;
  width: 0%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(80, 250, 123, 0.6);
  transition: width 600ms cubic-bezier(.3, .8, .3, 1);
}

.xp-fill.no-transition { transition: none; }
.xp-fill.level-glow { background: var(--gold); box-shadow: 0 0 18px var(--gold); }

/* Retro segmented look: dark gaps drawn over the bar */
.xp-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(10% - 3px),
    var(--bg) calc(10% - 3px) 10%);
  pointer-events: none;
}

/* ---------- Gesture hints (shown on the glasses) ---------- */
.hints {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}

.hint {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 150ms;
}

.hint-key {
  padding: 5px 10px;
  border: 2px solid var(--dim);
  border-radius: 6px;
  color: var(--dim);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.hint-label {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
}

/* The pinch hint is the main call to action */
.hint-primary .hint-key   { background: var(--green); border-color: var(--green); color: var(--bg); }
.hint-primary .hint-label { color: var(--green); }

/* Armed (after the 1st pinch): the pinch hint turns gold and pulses */
.hint-primary.is-armed .hint-key   { background: var(--gold); border-color: var(--gold); animation: armed-pulse 600ms ease-in-out infinite; }
.hint-primary.is-armed .hint-label { color: var(--gold); }

@keyframes armed-pulse {
  50% { box-shadow: 0 0 16px var(--gold); transform: scale(1.06); }
}

/* "BACK Undo" for a few seconds after a +1 step */
.hint.is-undo .hint-key   { border-color: var(--cyan); color: var(--cyan); }
.hint.is-undo .hint-label { color: var(--cyan); }

/* Gesture not available on this screen */
.hint.is-off { opacity: 0; }
.hint.is-disabled .hint-key   { background: transparent; border-color: var(--faint); color: #4a4e5c; }
.hint.is-disabled .hint-label { color: var(--dim); }

/* Quick pulse when the gesture is received */
.hint.is-pressed .hint-key { animation: hint-press 220ms ease-out; }

@keyframes hint-press {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.86); filter: brightness(1.6); }
  100% { transform: scale(1); }
}

/* ---------- Browser test controls (dev panel) ---------- */
.controls { display: flex; gap: 12px; margin-top: 16px; }

.btn {
  height: 64px;
  border: 2px solid var(--faint);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: transform 80ms, border-color 120ms, opacity 120ms;
}

.btn:hover:not(:disabled)  { border-color: var(--green); }
.btn:active:not(:disabled) { transform: scale(0.96); }
.btn:disabled { opacity: 0.3; cursor: default; }

.btn-nav { width: 72px; }

.btn-primary {
  flex: 1;
  background: var(--green);
  border-color: var(--green);
  color: var(--bg);
}

.btn-primary:disabled {
  background: transparent;
  color: var(--dim);
  border-color: var(--faint);
  opacity: 1;
}

/* Dev tools row: small and dim on purpose */
.dev-row {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.dev-btn {
  background: none;
  border: none;
  padding: 2px 0;
  color: #4a4e5c;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.15em;
  cursor: pointer;
}
.dev-btn:hover { color: var(--dim); }

/* ---------- Effects ---------- */
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* Full-screen flash on completion */
.flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 40%, rgba(80, 250, 123, 0.35), transparent 65%);
}
.flash.is-active { animation: flash 450ms ease-out; }

@keyframes flash {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Particle burst: each particle gets --dx/--dy set from JS */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--particle-color, var(--green));
  box-shadow: 0 0 8px var(--particle-color, var(--green));
  animation: particle 750ms ease-out forwards;
}

@keyframes particle {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

/* =========================================================
   COSMETICS (bought in the Shop — see SHOP_ITEMS in app.js)
   ========================================================= */

/* ---------- Chest skins (data-skin on the chest SVG) ---------- */
.chest-svg {
  --c-outline: #3b2412;
  --c-wood: #8b5a2b;
  --c-dark: #5c3a1a;
  --c-light: #c47f3c;
  --c-trim: #ffd166;
  --c-lock: #ffd166;
}
.c-outline { fill: var(--c-outline); }
.c-keyhole { fill: var(--c-outline); }
.c-wood    { fill: var(--c-wood); }
.c-dark    { fill: var(--c-dark); }
.c-light   { fill: var(--c-light); }
.c-trim    { fill: var(--c-trim); }
.c-lock    { fill: var(--c-lock); }
.c-mimic   { display: none; }
.c-tooth   { fill: #f8f8f2; }
.c-tongue  { fill: #ff5577; }
.c-eye     { fill: #ffd166; }
.c-pupil   { fill: #000; }

/* Soggy Cardboard Box: tan, tape instead of metal, no lock */
.chest-svg[data-skin="cardboard"] {
  --c-outline: #5a4630; --c-wood: #c8a26b; --c-dark: #a07e4a;
  --c-light: #dcc08c; --c-trim: #e9dcb4;
}
.chest-svg[data-skin="cardboard"] .c-lock,
.chest-svg[data-skin="cardboard"] .c-keyhole { display: none; }

/* Golden Chest */
.chest-svg[data-skin="gold"] {
  --c-outline: #6b4e00; --c-wood: #e6b422; --c-dark: #b8860b;
  --c-light: #ffe066; --c-trim: #fff3b0; --c-lock: #ffffff;
}

/* Crystal Chest */
.chest-svg[data-skin="crystal"] {
  --c-outline: #1d5a73; --c-wood: #7fe7ff; --c-dark: #3aa6c8;
  --c-light: #d9fbff; --c-trim: #ffffff; --c-lock: #bd93f9;
}

/* Mimic: dark wood, teeth, eyes, and a tongue when it opens */
.chest-svg[data-skin="mimic"] {
  --c-outline: #1e0f08; --c-wood: #6b3f2a; --c-dark: #40241a;
  --c-light: #8a5438; --c-trim: #9a9a9a; --c-lock: #9a9a9a;
}
.chest-svg[data-skin="mimic"] .c-mimic { display: inline; }

/* ---------- Colour themes (data-theme on <html>) ---------- */
/* Background always stays black (see-through on the glasses). Red stays
   red: it means "warning" in every theme. */
:root[data-theme="gameboy"] {
  --text: #e0f8d0; --dim: #88c070; --faint: #2f4a2a;
  --green: #9bbc0f; --gold: #c8e070; --cyan: #8bac0f; --purple: #d0f0a0;
}
:root[data-theme="arctic"] {
  --text: #f0fbff; --dim: #7c98a8; --faint: #22323a;
  --green: #7fe7ff; --gold: #e6f7ff; --cyan: #b3f0ff; --purple: #a0b8ff;
}
:root[data-theme="vapor"] {
  --text: #fdf6ff; --dim: #9a8fbf; --faint: #2e2440;
  --green: #ff71ce; --gold: #fffb96; --cyan: #01cdfe; --purple: #b967ff;
}
:root[data-theme="ember"] {
  --text: #fff1e0; --dim: #a8866a; --faint: #3a2618;
  --green: #ff9e3d; --gold: #ffd166; --cyan: #ffb385; --purple: #ff5e87;
}
:root[data-theme="gold"] {
  --text: #fffaf0; --dim: #b8a070; --faint: #3a3220;
  --green: #ffd166; --gold: #fff2a8; --cyan: #ffe08a; --purple: #ffb347;
}
:root[data-theme="crt"] {
  --text: #c8ffd4; --dim: #4f8a5f; --faint: #16301e;
  --green: #33ff66; --gold: #d4ff33; --cyan: #66ffcc; --purple: #aaff88;
}

/* Scuffed CRT: scanlines, colour fringing, and the odd flicker/jitter */
:root[data-theme="crt"] .hud {
  text-shadow: 1px 0 rgba(255, 40, 90, 0.5), -1px 0 rgba(40, 200, 255, 0.5);
  animation: crt-jitter 7s infinite;
}
:root[data-theme="crt"] .hud::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0 1px, transparent 1px 3px);
  animation: crt-flicker 5s steps(1) infinite;
}
:root[data-theme="crt"] .hud.is-shaking { animation: hud-shake 320ms linear; }   /* shake still wins */
@keyframes crt-flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: 0.5; } 98% { opacity: 0.9; } }
@keyframes crt-jitter  { 0%, 93%, 100% { translate: 0 0; } 94% { translate: 2px 0; } 95% { translate: -2px 1px; } 96% { translate: 1px 0; } }

/* ---------- Fonts (data-font on <html>) ---------- */
/* Bundled in fonts/ (open licences, see the *-OFL / LICENSE files). The
   browser only downloads a font when it's actually used. */
@font-face { font-family: "QL Pixel";    src: url("fonts/pressstart2p.woff2") format("woff2");    font-display: swap; }
@font-face { font-family: "QL Terminal"; src: url("fonts/vt323.woff2") format("woff2");           font-display: swap; }
@font-face { font-family: "QL Loud";     src: url("fonts/bungee.woff2") format("woff2");          font-display: swap; }
@font-face { font-family: "QL Marker";   src: url("fonts/permanentmarker.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "QL Glitch";   src: url("fonts/rubikglitch.woff2") format("woff2");     font-display: swap; }

/* Wide fonts are only used for "display" text (headings, numbers, tags);
   font-size-adjust shrinks them so they fit the same space. */
:root { --font-display: var(--font); --display-adjust: none; }
:root[data-font="pixel"]    { --font-display: "QL Pixel", var(--font);   --display-adjust: 0.4; }
:root[data-font="loud"]     { --font-display: "QL Loud", var(--font);    --display-adjust: 0.44; }
:root[data-font="marker"]   { --font-display: "QL Marker", var(--font);  --display-adjust: 0.5; }
:root[data-font="glitch"]   { --font-display: "QL Glitch", var(--font);  --display-adjust: 0.5; }
:root[data-font="terminal"] { --font-display: "QL Terminal", var(--font); --display-adjust: 0.55; }
/* Terminal is narrow enough for everything, so it replaces the body font too */
:root[data-font="terminal"] body { font-family: "QL Terminal", var(--font); font-size-adjust: 0.55; }

.clock-time, .quest-type, .complete-heading, .big, .reward-row, .combo,
.levelup-heading, .levelup-number, .loot-rarity, .chest-shout, .alert-label,
.xp-level, .setting-value, .shop-price, .hint-key, .confirm-text,
.quest-timer-time, .toast, .quest-title, .loot-name, .reel-name {
  font-family: var(--font-display);
  font-size-adjust: var(--display-adjust);
}

/* ---------- Screen 8: shop ---------- */
.shop { gap: 8px; }
.shop .quest-title { font-size: 38px; }          /* long names + wide fonts must fit */
.quest-type[data-type="shop"] { color: var(--gold); }

.shop-preview {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-icon { font-size: 58px; line-height: 1; filter: drop-shadow(0 0 14px var(--gold)); }
.shop-icon[hidden] { display: none; }
.shop-chest .chest-svg.mini { width: 84px; height: 74px; }
.shop-chest .chest-svg.mini.is-bouncing { animation: chest-drop 450ms cubic-bezier(.3, 1.4, .5, 1) both; }

.shop-price {
  padding: 6px 22px;
  border: 3px solid var(--gold);
  border-radius: 10px;
  font-size: 28px;
  font-weight: 800;
  color: var(--gold);
}
.shop-price[data-state="owned"] { border-color: var(--green); color: var(--green); }
.shop-price[data-state="poor"]  { border-color: var(--faint); color: var(--dim); }

/* "UNLOCKED!" stamp after buying */
.shop-stamp {
  position: absolute;
  top: 40%;
  padding: 8px 22px;
  border: 5px solid var(--gold);
  border-radius: 10px;
  color: var(--gold);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 0 20px var(--gold);
  box-shadow: 0 0 30px var(--gold);
  opacity: 0;
  pointer-events: none;
}
.shop.is-bought .shop-stamp { animation: stamp-slam 1600ms cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes stamp-slam {
  0%   { opacity: 0; transform: rotate(-30deg) scale(3); }
  18%  { opacity: 1; transform: rotate(-10deg) scale(1); }
  75%  { opacity: 1; transform: rotate(-10deg) scale(1); }
  100% { opacity: 0; transform: rotate(-10deg) scale(1.1); }
}

/* Emoji coins (pizza, ducks...) don't need the gold glow */
.coin.is-emoji { text-shadow: none; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4)); }

/* Gamble result on the chest card ("You scratched 212 ◆!") */
.chest-note { font-size: 20px; font-weight: 800; color: var(--gold); }
.chest-note:empty { display: none; }

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  .levelup-rays { animation: none !important; }
  /* Looping chest bling would flicker at 1ms: switch it off instead */
  .chest-rays, .chest-beam, .bulb, .loot-icon-wrap::before,
  .loot-rarity span, .chest-shout { animation: none !important; }
  .chest-shout { opacity: 1 !important; transform: none !important; }
  :root[data-theme="crt"] .hud, :root[data-theme="crt"] .hud::after { animation: none !important; }
  .hint-primary.is-armed .hint-key { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
  /* The confirm countdown is information, not decoration: keep its timing. */
  .confirm-fill { animation-duration: var(--confirm-ms, 3000ms) !important; }
  .quest-timer[data-state="paused"] .quest-timer-time { animation: none !important; }
}