/* ==========================================================================
   ECONOMY.CSS — Surge Coins, the shop, Speed Surge, and every bought skin.

   Rules of the file: every colour has a high-contrast answer under
   body.high-contrast-mode, every animation is short and stops under reduced
   motion, and nothing here runs while nothing is happening.
   ========================================================================== */

/* --- The coin pill in the header ------------------------------------- */
.coin-pill {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
  font-weight: 800;
  gap: 6px;
}

.coin-pill .coin-pill-icon { font-size: 1rem; line-height: 1; }
.coin-pill .coin-pill-value { font-variant-numeric: tabular-nums; min-width: 2ch; text-align: left; }
.coin-pill.is-offline { opacity: 0.75; }
.coin-pill.is-bumping { animation: coin-bump 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }

@keyframes coin-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); box-shadow: 0 0 22px rgba(251, 191, 36, 0.7); }
  100% { transform: scale(1); }
}

/* --- The coin toast ---------------------------------------------------- */
.coin-toast-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.coin-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--radius-full);
  background: rgba(20, 12, 4, 0.94);
  border: 2px solid #fbbf24;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.45), 0 10px 30px rgba(0, 0, 0, 0.6);
  animation: coin-toast 2.1s ease-out forwards;
}

.coin-toast-amount { font-size: 1.6rem; color: #fde68a; font-variant-numeric: tabular-nums; }
.coin-toast-icon { font-size: 1.5rem; }
.coin-toast-label { font-size: 0.85rem; color: #fde68a; font-weight: 700; letter-spacing: 0.5px; }

@keyframes coin-toast {
  0% { opacity: 0; transform: translateY(30px) scale(0.8); }
  12% { opacity: 1; transform: translateY(0) scale(1.06); }
  20% { transform: translateY(0) scale(1); }
  75% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.9); }
}

/* --- Menu cards for the two new doors ---------------------------------- */
.menu-card.speed-card { border-color: rgba(96, 165, 250, 0.4); }
.menu-card.speed-card:hover { border-color: rgba(96, 165, 250, 0.8); box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25), 0 0 0 1px rgba(96, 165, 250, 0.35); }
.menu-card.speed-card .arrow-indicator { color: #60a5fa; }
.menu-card.shop-card { border-color: rgba(251, 191, 36, 0.4); }
.menu-card.shop-card:hover { border-color: rgba(251, 191, 36, 0.8); box-shadow: 0 12px 30px rgba(217, 119, 6, 0.25), 0 0 0 1px rgba(251, 191, 36, 0.35); }
.menu-card.shop-card .arrow-indicator { color: #fbbf24; }

/* --- Puzzle hub: pack tabs and the unlock line ------------------------- */
.puzzle-pack-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.puzzle-pack-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-subtle);
  background: var(--bg-surface);
  color: #ffffff;
  cursor: pointer;
  font-weight: 800;
  min-height: 64px;
}

.puzzle-pack-tab .pack-tab-icon { font-size: 1.3rem; }
.puzzle-pack-tab .pack-tab-name { font-size: 0.85rem; letter-spacing: 0.5px; }
.puzzle-pack-tab .pack-tab-count { font-size: 0.75rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.puzzle-pack-tab.active.pack-purple { border-color: #d946ef; background: rgba(217, 70, 239, 0.16); }
.puzzle-pack-tab.active.pack-green { border-color: #34d399; background: rgba(52, 211, 153, 0.16); }
.puzzle-pack-tab.active.pack-mixed { border-color: #c084fc; background: linear-gradient(135deg, rgba(217, 70, 239, 0.16), rgba(52, 211, 153, 0.16)); }

.tier-tab-unlock {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fde68a;
}

.puzzle-tier-tab.locked { opacity: 0.8; filter: none; cursor: pointer; }
.puzzle-tier-tab.locked .tier-tab-name { color: var(--text-secondary); }
.puzzle-verified { font-size: 0.8rem; }

.surge-tag.p-flip {
  background: rgba(52, 211, 153, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.45);
}

/* --- Speed Surge screen -------------------------------------------------- */
.speed-container,
.shop-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.speed-main-title,
.shop-main-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.speed-main-title { background-image: linear-gradient(135deg, #bfdbfe, #60a5fa, #f0abfc); }
.shop-main-title { background-image: linear-gradient(135deg, #fde68a, #fbbf24, #f0abfc); }

.speed-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.speed-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-subtle);
  background: var(--bg-surface);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  min-height: 110px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.speed-mode-card:hover { transform: translateY(-2px); }
.speed-mode-icon { font-size: 1.6rem; }
.speed-mode-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.speed-mode-blurb { font-size: 0.8rem; color: var(--text-secondary); }
.speed-mode-best { margin-top: auto; font-size: 0.78rem; font-weight: 800; color: #fde68a; }
.speed-mode-card.active.pack-purple { border-color: #d946ef; box-shadow: 0 0 18px rgba(217, 70, 239, 0.35); }
.speed-mode-card.active.pack-green { border-color: #34d399; box-shadow: 0 0 18px rgba(52, 211, 153, 0.35); }
.speed-mode-card.active.pack-mixed { border-color: #c084fc; box-shadow: 0 0 18px rgba(192, 132, 252, 0.35); }
.speed-mode-card.active.pack-ultimate { border-color: #60a5fa; box-shadow: 0 0 18px rgba(96, 165, 250, 0.45); }

.speed-start-btn { font-size: 1.1rem; padding: 16px; }

.speed-board-box {
  background: rgba(18, 24, 38, 0.75);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.speed-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.speed-board-title { font-family: var(--font-display); font-weight: 900; letter-spacing: 2px; font-size: 1rem; }
.speed-scope-tabs { display: flex; gap: 6px; }

.speed-scope-tab {
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 800;
  cursor: pointer;
  min-height: 40px;
}

.speed-scope-tab.active { border-color: #60a5fa; color: #ffffff; background: rgba(96, 165, 250, 0.15); }
.speed-your-rank { margin-top: 8px; font-weight: 800; color: #fde68a; font-size: 0.9rem; }
.speed-board { margin-top: 8px; }
.speed-board-empty { color: var(--text-secondary); font-size: 0.9rem; padding: 12px 0; }
.speed-board-note { margin-top: 10px; font-size: 0.75rem; color: var(--text-muted); }
.speed-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.speed-board-row {
  display: grid;
  grid-template-columns: 2.2rem 1.6rem 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.95rem;
}

.speed-board-row.is-you { background: rgba(251, 191, 36, 0.14); border: 1px solid rgba(251, 191, 36, 0.5); }
.speed-board-rank { font-weight: 900; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.speed-board-row:nth-child(1) .speed-board-rank { color: #fde68a; }
.speed-board-avatar { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--swatch, #d946ef); box-shadow: 0 0 8px var(--swatch, #d946ef); }
.speed-board-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speed-board-name em { font-style: normal; color: #fde68a; font-size: 0.8rem; }
.speed-board-solved { font-weight: 900; font-variant-numeric: tabular-nums; }
.speed-board-solved small { font-weight: 600; color: var(--text-secondary); font-size: 0.7rem; }
.speed-board-time { font-family: 'DM Mono', monospace; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* --- Speed HUD in the arena --------------------------------------------- */
.speed-hud {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 620px;
  margin: 4px auto 6px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgba(8, 12, 24, 0.9);
  border: 2px solid rgba(96, 165, 250, 0.55);
}

.speed-hud-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.speed-hud-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 1px; color: #93c5fd; text-transform: uppercase; }
.speed-hud-count { font-size: 0.95rem; color: #ffffff; }
.speed-hud-count strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.speed-hud-streak { font-size: 0.85rem; font-weight: 800; color: #fb923c; min-height: 1em; }

.speed-hud-clock {
  font-family: 'DM Mono', var(--font-display), monospace;
  font-size: 2.4rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(96, 165, 250, 0.7);
}

.speed-hud-clock.is-low { color: #fb7185; text-shadow: 0 0 18px rgba(251, 113, 133, 0.8); animation: speed-low 1s steps(2, start) infinite; }
@keyframes speed-low { 50% { opacity: 0.55; } }

.speed-hud-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.speed-hud-actions .subtle-btn { min-height: 36px; padding: 6px 12px; font-weight: 800; }

.speed-bonus-pop {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translate(-50%, 0);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  opacity: 0;
  pointer-events: none;
}

.speed-bonus-pop.is-good { color: #6ee7b7; text-shadow: 0 0 16px rgba(52, 211, 153, 0.9); }
.speed-bonus-pop.is-bad { color: #fb7185; text-shadow: 0 0 16px rgba(251, 113, 133, 0.9); }
.speed-bonus-pop.is-live { animation: speed-pop 0.9s ease-out forwards; }
@keyframes speed-pop {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1); }
}

/* While a run is live the replay bar and the round buttons are noise. */
body.speedrun-live #move-nav-bar,
body.speedrun-live #btn-reset-round { display: none; }

.speed-result-rank { font-weight: 800; color: #93c5fd; margin-top: 6px; }
.speed-result-coins { font-weight: 900; color: #fde68a; font-size: 1.1rem; margin-top: 4px; }

/* --- The shop ----------------------------------------------------------- */
.shop-balance-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.shop-balance-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; color: var(--text-secondary); }
.shop-balance { font-size: 1.8rem; font-weight: 900; color: #fde68a; font-variant-numeric: tabular-nums; }
.shop-balance::before { content: '🪙 '; }
.shop-ledger-btn { min-height: 36px; }
.shop-ledger { margin-top: 10px; text-align: left; max-height: 240px; overflow: auto; background: rgba(0, 0, 0, 0.3); border-radius: var(--radius-sm); padding: 8px 12px; }
.shop-ledger-list { list-style: none; margin: 0; padding: 0; }
.shop-ledger-list li { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.85rem; }
.shop-ledger-list .earn { color: #6ee7b7; font-weight: 800; }
.shop-ledger-list .spend { color: #fb7185; font-weight: 800; }
.shop-ledger-list time { color: var(--text-muted); font-size: 0.75rem; }
.shop-ledger-empty { color: var(--text-secondary); font-size: 0.85rem; }

.shop-earn-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.shop-earn-strip span { font-size: 0.78rem; font-weight: 700; padding: 6px 10px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); color: var(--text-secondary); }

.shop-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }

.shop-tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-subtle);
  background: var(--bg-surface);
  color: #ffffff;
  cursor: pointer;
  min-height: 52px;
}

.shop-tab.active { border-color: #fbbf24; background: rgba(251, 191, 36, 0.14); }
.shop-tab-name { font-weight: 800; font-size: 0.85rem; white-space: nowrap; }
.shop-tab-count { font-size: 0.72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }

.shop-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-subtle);
  background: var(--bg-surface);
}

.shop-card.owned { border-color: rgba(52, 211, 153, 0.45); }
.shop-card.worn { border-color: #fbbf24; box-shadow: 0 0 18px rgba(251, 191, 36, 0.3); }
.shop-card.just-bought { animation: coin-bump 0.6s ease-out; }
.shop-card-preview {
  height: 84px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.shop-card-name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; }
.shop-card-blurb { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.35; }
.shop-card-actions { margin-top: auto; }
.shop-card-actions .action-btn { width: 100%; min-height: 44px; }
.shop-price { font-weight: 900; }

/* Previews: a strip of "board" in the skin's light, a coin with the trim, a
   card in the theme's gradient, a row of confetti colours. */
.preview-board { position: relative; }
.preview-board-inner { width: 70%; height: 60%; border-radius: 8px; background: var(--board-black, #0d1117); box-shadow: 0 0 0 3px var(--preview-neon, #38bdf8), 0 0 22px var(--preview-neon, #38bdf8); }
.preview-board.theme-white { --preview-neon: #ffffff; }
.preview-board.theme-cobalt { --preview-neon: #3b82f6; }
.preview-board.theme-obsidian { --preview-neon: #e5e7eb; }
.preview-board.theme-sunset { --preview-neon: #fb923c; }
.preview-board.theme-emerald { --preview-neon: #34d399; }
.preview-board.theme-gold { --preview-neon: #fbbf24; }
.preview-board.theme-rose { --preview-neon: #f472b6; }
.preview-board.theme-lava { --preview-neon: #f97316; }
.preview-board.theme-toxic { --preview-neon: #a3e635; }
.preview-board.theme-ultraviolet { --preview-neon: #a855f7; }
.preview-board.theme-cherry { --preview-neon: #ef4444; }
.preview-board.theme-slate { --preview-neon: #94a3b8; }
.preview-board.theme-arctic { --preview-neon: #a5f3fc; }
.preview-board.theme-bubblegum { --preview-neon: #f9a8d4; }
.preview-board.theme-void { --preview-neon: #6366f1; }
.preview-board.theme-vapour { --preview-neon: #2dd4bf; }
.preview-board.theme-amber { --preview-neon: #f59e0b; }
.preview-board.theme-bloodmoon { --preview-neon: #dc2626; }
.preview-token { width: 64px; height: 64px; position: relative; }
.preview-fx { gap: 8px; }
.preview-fx svg { display: inline-block; filter: drop-shadow(0 0 6px currentColor); }
.preview-sound { flex-direction: column; gap: 2px; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.preview-sound small { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-secondary); text-transform: uppercase; }
.preview-sound:hover, .preview-sound:focus-visible { background: rgba(255, 255, 255, 0.08); transform: scale(1.04); outline: none; }
.preview-share span { font-size: 2rem; }

/* --- Bought board skins. Each one only moves the chassis light. ---------- */
body.theme-obsidian { --board-neon: #e5e7eb; --board-neon-glow: rgba(229, 231, 235, 0.45); --board-black: #050608; --board-bezel: #0b0d12; }
body.theme-sunset { --board-neon: #fb923c; --board-neon-glow: rgba(251, 146, 60, 0.6); --board-bezel: #1f1014; }
body.theme-emerald { --board-neon: #34d399; --board-neon-glow: rgba(52, 211, 153, 0.6); --board-bezel: #0b1a15; }
body.theme-gold { --board-neon: #fbbf24; --board-neon-glow: rgba(251, 191, 36, 0.6); --board-bezel: #1a1408; }
body.theme-rose { --board-neon: #f472b6; --board-neon-glow: rgba(244, 114, 182, 0.6); --board-bezel: #1c0f18; }
body.theme-lava { --board-neon: #f97316; --board-neon-glow: rgba(249, 115, 22, 0.65); --board-black: #0c0503; --board-bezel: #1f0d08; }
body.theme-toxic { --board-neon: #a3e635; --board-neon-glow: rgba(163, 230, 53, 0.6); --board-bezel: #101a06; }
body.theme-ultraviolet { --board-neon: #a855f7; --board-neon-glow: rgba(168, 85, 247, 0.65); --board-bezel: #170a2a; }
body.theme-cherry { --board-neon: #ef4444; --board-neon-glow: rgba(239, 68, 68, 0.6); --board-bezel: #1f0a0a; }
body.theme-slate { --board-neon: #94a3b8; --board-neon-glow: rgba(148, 163, 184, 0.5); --board-bezel: #101318; }
body.theme-arctic { --board-neon: #a5f3fc; --board-neon-glow: rgba(165, 243, 252, 0.55); --board-bezel: #0a1a1f; }
body.theme-bubblegum { --board-neon: #f9a8d4; --board-neon-glow: rgba(249, 168, 212, 0.6); --board-bezel: #22101b; }
body.theme-void { --board-neon: #6366f1; --board-neon-glow: rgba(99, 102, 241, 0.65); --board-black: #04040c; --board-bezel: #0c0c22; }
body.theme-vapour { --board-neon: #2dd4bf; --board-neon-glow: rgba(45, 212, 191, 0.6); --board-bezel: #081a1a; }
body.theme-amber { --board-neon: #f59e0b; --board-neon-glow: rgba(245, 158, 11, 0.6); --board-bezel: #1c1204; }
body.theme-bloodmoon { --board-neon: #dc2626; --board-neon-glow: rgba(220, 38, 38, 0.7); --board-black: #0a0203; --board-bezel: #200606; }

/* --- Coin trims: a rim on the player's own coins. --------------------------
   The coin is an octagon, so the rim is one too: `::after` is a solid fill
   cut to an octagonal ring by an SVG mask, and `::before` is the same ring,
   wider and blurred, for the glow. Each trim only sets two
   variables, the fill and the glow. Dashes and dots are conic gradients in
   the fill; the rainbow rims turn by animating the gradient's start angle.
   --------------------------------------------------------------------- */
@property --trim-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

body[data-coin-trim] .token-piece.red::after,
.preview-token[data-trim]::after {
  content: '';
  position: absolute;
  inset: -4%;
  pointer-events: none;
  background: var(--trim-fill, #ffffff);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='white' fill-rule='evenodd' d='M29.3 0H70.7L100 29.3V70.7L70.7 100H29.3L0 70.7V29.3Z M33 9H67L91 33V67L67 91H33L9 67V33Z'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='white' fill-rule='evenodd' d='M29.3 0H70.7L100 29.3V70.7L70.7 100H29.3L0 70.7V29.3Z M33 9H67L91 33V67L67 91H33L9 67V33Z'/></svg>") center / 100% 100% no-repeat;
}
body[data-coin-trim] .token-piece.red::before,
.preview-token[data-trim]::before {
  content: '';
  position: absolute;
  inset: -12%;
  pointer-events: none;
  background: var(--trim-glow, transparent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='white' fill-rule='evenodd' d='M29.3 0H70.7L100 29.3V70.7L70.7 100H29.3L0 70.7V29.3Z M33 9H67L91 33V67L67 91H33L9 67V33Z'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='white' fill-rule='evenodd' d='M29.3 0H70.7L100 29.3V70.7L70.7 100H29.3L0 70.7V29.3Z M33 9H67L91 33V67L67 91H33L9 67V33Z'/></svg>") center / 100% 100% no-repeat;
  filter: blur(6px);
  opacity: 0.85;
}
/* On the board the bezel laps the token's edge (the hole is smaller than the
   token), so the rim sits a little way in, where the eye can see it. */
body[data-coin-trim] .token-piece.red::after { inset: 7%; }
body[data-coin-trim] .token-piece.red::before { inset: 2%; filter: blur(4px); }

/* The plain coin has no rim. */
.preview-token[data-trim=""]::after, .preview-token[data-trim=""]::before { content: none; }

body[data-coin-trim="gold"] .token-piece.red, .preview-token[data-trim="gold"] { --trim-fill: linear-gradient(160deg, #fde68a, #f59e0b 45%, #fde68a 70%, #d97706); --trim-glow: #fbbf24; }
body[data-coin-trim="neon"] .token-piece.red, .preview-token[data-trim="neon"] { --trim-fill: var(--p1-light, #ff3b5c); --trim-glow: var(--p1-light, #ff3b5c); }
body[data-coin-trim="chrome"] .token-piece.red, .preview-token[data-trim="chrome"] { --trim-fill: linear-gradient(150deg, #ffffff, #9ca3af 35%, #ffffff 55%, #6b7280 80%, #e5e7eb); --trim-glow: #e5e7eb; }
body[data-coin-trim="stripe"] .token-piece.red, .preview-token[data-trim="stripe"] { --trim-fill: repeating-conic-gradient(#ffffff 0 11.25deg, #ef4444 11.25deg 22.5deg); --trim-glow: #ffffff; }
body[data-coin-trim="fire"] .token-piece.red, .preview-token[data-trim="fire"] { --trim-fill: linear-gradient(180deg, #fde047, #f97316 50%, #dc2626); --trim-glow: #f97316; }
body[data-coin-trim="ice"] .token-piece.red, .preview-token[data-trim="ice"] { --trim-fill: linear-gradient(160deg, #ffffff, #a5f3fc 40%, #22d3ee 75%, #e0f2fe); --trim-glow: #67e8f9; }
body[data-coin-trim="shadow"] .token-piece.red, .preview-token[data-trim="shadow"] { --trim-fill: linear-gradient(160deg, #1f2937, #000000 60%, #111827); --trim-glow: #000000; }
body[data-coin-trim="double"] .token-piece.red, .preview-token[data-trim="double"] { --trim-fill: #ffffff; --trim-glow: #ffffff; }
body[data-coin-trim="double"] .token-piece.red::after, .preview-token[data-trim="double"]::after { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='white' fill-rule='evenodd' d='M29.3 0H70.7L100 29.3V70.7L70.7 100H29.3L0 70.7V29.3Z M31 4H69L96 31V69L69 96H31L4 69V31Z M32.2 7H67.8L93 32.2V67.8L67.8 93H32.2L7 67.8V32.2Z M33.9 11H66.1L89 33.9V66.1L66.1 89H33.9L11 66.1V33.9Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='white' fill-rule='evenodd' d='M29.3 0H70.7L100 29.3V70.7L70.7 100H29.3L0 70.7V29.3Z M31 4H69L96 31V69L69 96H31L4 69V31Z M32.2 7H67.8L93 32.2V67.8L67.8 93H32.2L7 67.8V32.2Z M33.9 11H66.1L89 33.9V66.1L66.1 89H33.9L11 66.1V33.9Z'/></svg>"); }
body[data-coin-trim="silver"] .token-piece.red, .preview-token[data-trim="silver"] { --trim-fill: linear-gradient(160deg, #f8fafc, #94a3b8 55%, #e2e8f0); --trim-glow: #e2e8f0; }
body[data-coin-trim="dotted"] .token-piece.red, .preview-token[data-trim="dotted"] { --trim-fill: repeating-conic-gradient(#ffffff 0 7deg, transparent 7deg 15deg); --trim-glow: #ffffff; }
body[data-coin-trim="royal"] .token-piece.red, .preview-token[data-trim="royal"] { --trim-fill: linear-gradient(160deg, #c084fc, #7c3aed 50%, #a855f7); --trim-glow: #fbbf24; }
body[data-coin-trim="ghost"] .token-piece.red, .preview-token[data-trim="ghost"] { --trim-fill: rgba(255, 255, 255, 0.9); --trim-glow: #ffffff; }
body[data-coin-trim="ghost"] .token-piece.red::after, .preview-token[data-trim="ghost"]::after,
body[data-coin-trim="ghost"] .token-piece.red::before, .preview-token[data-trim="ghost"]::before { animation: trim-pulse 1.8s ease-in-out infinite; }
body[data-coin-trim="toxic"] .token-piece.red, .preview-token[data-trim="toxic"] { --trim-fill: repeating-conic-gradient(#a3e635 0 15deg, #1a2e05 15deg 22.5deg); --trim-glow: #a3e635; }

/* Turning rims: the conic gradient starts at --trim-angle, which the
   animation sweeps round. Browsers without @property show it still. */
body[data-coin-trim="holo"] .token-piece.red::after, .preview-token[data-trim="holo"]::after,
body[data-coin-trim="plasma"] .token-piece.red::after, .preview-token[data-trim="plasma"]::after,
body[data-coin-trim="sunset"] .token-piece.red::after, .preview-token[data-trim="sunset"]::after { animation: trim-turn 3s linear infinite; }
body[data-coin-trim="holo"] .token-piece.red::after, .preview-token[data-trim="holo"]::after { background: conic-gradient(from var(--trim-angle), #f472b6, #fbbf24, #34d399, #60a5fa, #a855f7, #f472b6); }
body[data-coin-trim="holo"] .token-piece.red, .preview-token[data-trim="holo"] { --trim-glow: #ffffff; }
body[data-coin-trim="plasma"] .token-piece.red::after, .preview-token[data-trim="plasma"]::after { background: conic-gradient(from var(--trim-angle), #22d3ee, #d946ef, #22d3ee, #d946ef, #22d3ee); }
body[data-coin-trim="plasma"] .token-piece.red, .preview-token[data-trim="plasma"] { --trim-glow: #d946ef; }
body[data-coin-trim="sunset"] .token-piece.red::after, .preview-token[data-trim="sunset"]::after { background: conic-gradient(from var(--trim-angle), #f97316, #fb7185, #f472b6, #fbbf24, #f97316); }
body[data-coin-trim="sunset"] .token-piece.red, .preview-token[data-trim="sunset"] { --trim-glow: #fb7185; }

@keyframes trim-turn { to { --trim-angle: 360deg; } }
@keyframes trim-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  body[data-coin-trim] .token-piece.red::after, .preview-token[data-trim]::after,
  body[data-coin-trim] .token-piece.red::before, .preview-token[data-trim]::before { animation: none; }
}

/* --- Mascot on the scoreboard ------------------------------------------- */
.player-mascot { font-size: 1.1rem; line-height: 1; margin-right: 2px; }

/* --- Enhanced vision -------------------------------------------------------- */
body.high-contrast-mode .coin-pill,
body.high-contrast-mode .coin-toast { background: #000000; border-color: #ffffff; color: #ffffff; }
body.high-contrast-mode .coin-toast-amount,
body.high-contrast-mode .coin-toast-label,
body.high-contrast-mode .shop-balance,
body.high-contrast-mode .speed-mode-best,
body.high-contrast-mode .speed-your-rank,
body.high-contrast-mode .tier-tab-unlock,
body.high-contrast-mode .speed-result-coins { color: #ffe066; }
body.high-contrast-mode .speed-hud { background: #000000; border-color: #ffffff; }
body.high-contrast-mode .speed-hud-clock { text-shadow: none; }
body.high-contrast-mode .speed-hud-clock.is-low { color: #ff8fa3; }
body.high-contrast-mode .speed-board-row.is-you { background: #1f1a00; border-color: #ffe066; }
body.high-contrast-mode .shop-card-blurb,
body.high-contrast-mode .speed-mode-blurb,
body.high-contrast-mode .speed-board-note,
body.high-contrast-mode .shop-tab-count,
body.high-contrast-mode .pack-tab-count { color: #e2e8f0; }
body.high-contrast-mode .speed-main-title,
body.high-contrast-mode .shop-main-title { -webkit-text-fill-color: #ffffff; background: none; }

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .coin-pill.is-bumping, .shop-card.just-bought { animation: none; }
  .coin-toast { animation: coin-toast-still 2.1s linear forwards; }
  .speed-bonus-pop.is-live { animation: speed-pop-still 0.9s linear forwards; }
  .speed-hud-clock.is-low { animation: none; }
  .speed-mode-card:hover { transform: none; }
}

@keyframes coin-toast-still { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes speed-pop-still { 0%, 80% { opacity: 1; transform: translate(-50%, -14px); } 100% { opacity: 0; } }

/* --- Small screens ------------------------------------------------------- */
@media (max-width: 600px) {
  .speed-hud { grid-template-columns: 1fr auto; }
  .speed-hud-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
  .speed-hud-clock { font-size: 2rem; }
  .speed-board-row { grid-template-columns: 1.8rem 1.2rem 1fr auto; font-size: 0.85rem; }
  .speed-board-time { display: none; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .puzzle-pack-tab .pack-tab-name { font-size: 0.72rem; }
  .coin-pill .btn-label { display: inline; }
}