/* Theme typefaces, bundled (licences in fonts/). */
@font-face { font-family: "Press Start 2P"; src: url("fonts/press-start-2p.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Luckiest Guy"; src: url("fonts/luckiest-guy.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/fredoka-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ui-scale: 1;
  --ink: #fff;
  --muted: #9fb3c8;
  --accent: #ffd166;
  --accent-ink: #2a1a00;
  --panel: rgba(10, 15, 36, 0.86);
  --edge: rgba(255, 255, 255, 0.14);
  font-family: "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #05070f;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

canvas#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  touch-action: none;
}

body.in-game canvas#game { cursor: none; }

/* Menus are laid out on the same 450x800 logical playfield as the game,
   then scaled and placed over it (main.js sets the variables). */
#ui {
  position: fixed;
  left: var(--ui-x, 0px);
  top: var(--ui-y, 0px);
  width: 450px;
  height: 800px;
  transform-origin: 0 0;
  transform: scale(var(--ui-scale));
  pointer-events: none;
}

.screen {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: auto;
}
.screen.open { display: flex; }

.screen.panel { background: rgba(5, 7, 15, 0.55); }
.screen.panel { padding: 0 34px; }
.screen.panel > * { max-width: 382px; }
.screen.panel::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 80px;
  left: 16px;
  right: 16px;
  background: var(--panel);
  border: 2px solid var(--edge);
  border-radius: 24px;
  z-index: -1;
}
.screen.panel { isolation: isolate; }

#title { justify-content: flex-start; padding-top: 110px; }
/* ---------- Title: read at the top, tap at the bottom (docs/TITLE-UI.md) ---------- */
#title { padding-top: 96px; }
.stat-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 999px; background: rgba(0, 0, 0, 0.32); }
.stat-chip .tag { margin: 0; font-size: 16px; color: var(--ink); }
.chip-bar { position: relative; width: 210px; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.chip-bar span { position: absolute; inset: 0 auto 0 0; background: var(--accent); opacity: 0.85; }
.chip-bar b { position: relative; display: block; font-size: 11px; line-height: 16px; font-weight: 800; color: var(--ink); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.title-cta { width: 418px; margin: auto 0 150px; display: flex; flex-direction: column; gap: 14px; }
.cta-row { display: flex; gap: 10px; }
.new-run { flex: 0 0 120px; height: 84px; padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 14px; letter-spacing: 0; line-height: 1.1; }
.new-run .icon { width: 24px; height: 24px; }
/* the one primary button: biggest, brightest, nearest the thumb, breathing gently */
#title .play { position: relative; flex: 1; min-width: 0; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--play-bg, var(--accent)); color: var(--accent-ink); }
.play-label { font-size: 34px; letter-spacing: 3px; text-transform: uppercase; line-height: 1; }
.play-sub { font-size: 14px; letter-spacing: 1px; opacity: 0.8; }
#title .play::before { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 3px solid var(--accent); opacity: 0; animation: breathe 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes breathe { 0%, 100% { opacity: 0; transform: scale(0.98); } 50% { opacity: 0.7; transform: scale(1.02); } }
.dock { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.dock-btn { min-width: 0; height: 66px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 12px; letter-spacing: 0; line-height: 1.1; border-radius: 16px; }
.dock-btn .icon { width: 26px; height: 26px; flex: none; }
.dock-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flag-slot { line-height: 0; }
.flag-slot svg { width: 33px; height: 22px; border-radius: 4px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
#collection-btn { position: relative; }
#collection-btn.has-new::after { content: ""; position: absolute; top: 6px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: #ff3b6b; box-shadow: 0 0 0 2px #fff; }
/* ---------- Coins, shop bar, shop and pause ---------- */
.coin { display: inline-block; flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2a8, #ffc928 45%, #e09a00); box-shadow: inset 0 0 0 2.5px #b87900, 0 1px 0 rgba(0, 0, 0, 0.4); vertical-align: -5px; }
/* The shop: a tiny storefront, a quarter of the width, on the right */
.shop-row { display: flex; justify-content: flex-end; }
#title .shopfront, #title .shopfront:hover, #title .shopfront:focus { position: relative; display: block; width: 104px; height: 112px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-text-stroke: 0; color: #fff; }
#title .shopfront:hover, #title .shopfront:focus { transform: scale(1.06); }
.shopfront .awning { position: absolute; left: 0; right: 0; top: 0; height: 18px; border-radius: 8px 8px 0 0; background: repeating-linear-gradient(90deg, var(--awning-a, #ff4d6d) 0 13px, var(--awning-b, #fff4e6) 13px 26px); z-index: 2; }
/* scalloped edge: alternating half-circles in the two stripe colours */
.shopfront .awning::after { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 7px; background: radial-gradient(circle at 6.5px 0, var(--awning-a, #ff4d6d) 6px, transparent 6.5px) 0 0 / 26px 7px repeat-x, radial-gradient(circle at 19.5px 0, var(--awning-b, #fff4e6) 6px, transparent 6.5px) 0 0 / 26px 7px repeat-x; }
.shopfront .facade { position: absolute; left: 5px; right: 5px; top: 16px; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding: 0 4px 6px; border-radius: 0 0 8px 8px; background: var(--shop-wall, #34406a); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25); }
.shopfront .sign { padding: 1px 8px; border-radius: 5px; border: 2px solid #8a5a00; background: #ffd166; color: #3a1f00; font-size: 13px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.2; }
.shopfront .till { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.shopfront .till .coin { width: 14px; height: 14px; vertical-align: 0; box-shadow: inset 0 0 0 2px #b87900; }
.shopfront .shop-window { display: grid; grid-template-columns: repeat(5, 14px); grid-auto-rows: 14px; gap: 2px; justify-content: center; align-content: center; width: 86px; min-height: 20px; padding: 2px; border: 2px solid #c9a46b; border-radius: 3px; background: linear-gradient(135deg, rgba(170, 225, 255, 0.35), rgba(170, 225, 255, 0.12) 60%); }
.shopfront .shop-window canvas { width: 14px; height: 14px; }
.shopfront .shop-window .heart-tag { grid-column: span 2; color: #ff4d6d; font-size: 11px; font-weight: 900; line-height: 14px; text-align: center; white-space: nowrap; }
#title .shopfront:focus .facade { box-shadow: 0 0 0 3px var(--accent), inset 0 -4px 0 rgba(0, 0, 0, 0.25); }
.coins-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 6px; font-size: 22px; font-weight: 800; }
#shop-hint { max-width: 360px; margin: 0 0 8px; }
.hearts-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; width: 360px; margin: 0 0 6px; padding: 4px 8px; border-radius: 14px; background: rgba(255, 77, 109, 0.16); }
.hearts-info { display: flex; align-items: center; gap: 6px; text-align: left; min-width: 0; }
.hearts-info b { font-size: 14px; line-height: 1.1; margin-right: 6px; }
.hearts-info small { font-size: 11px; opacity: 0.85; }
.hearts-info { flex: 1 1 100%; } /* label on its own line, buttons below */
.hearts-buy { margin-left: auto; }
.heart-icon { color: #ff4d6d; font-size: 20px; line-height: 1; }
.hearts-buy { display: flex; gap: 4px; flex: none; }
.hearts-buy button { display: flex; flex-direction: column; align-items: center; padding: 2px 6px; min-width: 50px; font-size: 13px; line-height: 1.1; letter-spacing: 0; border-radius: 10px; }
.hearts-buy button small { font-size: 10px; opacity: 0.85; display: flex; align-items: center; gap: 2px; }
.hearts-buy .coin { width: 10px; height: 10px; box-shadow: inset 0 0 0 1.5px #b87900; vertical-align: 0; }
.hearts-buy .hearts-refund { min-width: 0; font-size: 11px; }
.hearts-buy .hearts-refund[hidden] { display: none; }
#gameover .over-shop { display: flex; align-items: center; justify-content: center; gap: 8px; }
body[data-theme="pixel"] .hearts-info b { font-size: 9px; }
body[data-theme="pixel"] .hearts-info small, body[data-theme="pixel"] .hearts-buy button small { font-size: 7px; }
body[data-theme="pixel"] .hearts-buy button { font-size: 9px; border-width: 3px; padding: 3px 4px; min-width: 44px; }
body[data-theme="pixel"] .hearts-row { border-radius: 0; }
body[data-theme="cartoon"] .hearts-buy button { font-size: 14px; border-width: 3px; -webkit-text-stroke: 0; }
.shop-cards .card canvas { width: 50px !important; height: 50px !important; } /* room for the hearts row */
.shop-cards .card { padding: 4px 2px 5px; gap: 2px; font-size: 11px; }
#shop-hint { font-size: 13px; line-height: 1.3; }
.cards.small.shop-cards { max-height: 450px; gap: 6px; } /* all 11 fit without scrolling on a normal phone */
.shop-cards .card .price { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 800; }
.shop-cards .card .price .coin { width: 14px; height: 14px; box-shadow: inset 0 0 0 2px #b87900; }
.shop-cards .card.owned { box-shadow: 0 0 0 3px var(--accent); }
.shop-cards .card.owned .price { color: var(--accent); }
.shop-cards .card.poor { opacity: 0.55; }
.card-wrap { position: relative; min-width: 0; display: flex; }
.card-wrap > .card { flex: 1; }
.count-badge { position: absolute; top: 2px; right: 2px; min-width: 22px; padding: 1px 5px; border-radius: 10px; background: #ff3b6b; color: #fff; font-size: 12px; font-weight: 900; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.minus-btn { position: absolute; top: 0; left: 0; width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; letter-spacing: 0; display: flex; align-items: center; justify-content: center; }
body[data-theme="pixel"] .count-badge { border-radius: 0; font-size: 8px; }
body[data-theme="pixel"] .minus-btn { border-radius: 0; border-width: 3px; font-size: 12px; }
body[data-theme="cartoon"] .count-badge { box-shadow: 0 0 0 2px #14081f; }
body[data-theme="cartoon"] .minus-btn { border-width: 3px; font-size: 18px; }
#pause .pause-menu { width: 382px; margin: auto 0 96px; gap: 10px; }
#pause .pause-menu button { font-size: 18px; padding: 10px 16px; }
#pause .buy-btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
#pause .primary { height: 72px; font-size: 28px !important; text-transform: uppercase; letter-spacing: 2px; background: var(--play-bg, var(--accent)); color: var(--accent-ink); }
#pause { justify-content: flex-start; padding-top: 70px; }
.pause-btn { display: none; position: absolute; left: 6px; bottom: 4px; width: 50px; height: 42px; padding: 0; align-items: center; justify-content: center; border-radius: 12px; background: rgba(0, 0, 0, 0.45); color: #fff; pointer-events: auto; }
.pause-btn svg { width: 24px; height: 24px; }
body.in-game .pause-btn { display: flex; }
.admin .menu.admin-coins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 340px; }
.admin .menu.admin-coins button { margin: 0; min-width: 0; padding: 8px; font-size: 15px; }
.admin .menu.admin-coins #admin-shop-all { grid-column: 1 / -1; }
body[data-theme="pixel"] .shopfront .awning, body[data-theme="pixel"] .shopfront .facade, body[data-theme="pixel"] .shopfront .sign, body[data-theme="pixel"] .shopfront .shop-window { border-radius: 0; }
body[data-theme="pixel"] .shopfront .awning::after { background: linear-gradient(90deg, var(--awning-a) 0 13px, var(--awning-b) 13px 26px) 0 0 / 26px 6px repeat-x; height: 6px; } /* square teeth */
body[data-theme="pixel"] { --awning-a: #FF004D; --awning-b: #FFF1E8; --shop-wall: #1D2B53; }
body[data-theme="pixel"] .shopfront .facade { box-shadow: inset 0 0 0 3px #FFF1E8; }
body[data-theme="pixel"] .shopfront .sign { font-size: 8px; letter-spacing: 0; padding: 3px 5px; }
body[data-theme="pixel"] .shopfront .till { font-size: 8px; }
body[data-theme="pixel"] .coins-line { font-size: 16px; }
body[data-theme="pixel"] .coin { border-radius: 0; }
body[data-theme="pixel"] #pause .pause-menu button { font-size: 12px; }
body[data-theme="pixel"] #pause .primary { font-size: 20px !important; color: #000; }
body[data-theme="pixel"] .shop-cards .card .price { font-size: 8px; }
body[data-theme="pixel"] .shop-cards .card canvas { width: 54px; height: 54px; }
body[data-theme="pixel"] .shop-cards .card { font-size: 8px; padding: 4px 2px 6px; }
body[data-theme="pixel"] .admin .menu.admin-coins button { font-size: 10px; }
body[data-theme="cartoon"] { --awning-a: #ff2e93; --awning-b: #ffffff; --shop-wall: #7b2ff7; }
body[data-theme="cartoon"] .shopfront .awning, body[data-theme="cartoon"] .shopfront .facade, body[data-theme="cartoon"] .shopfront .sign, body[data-theme="cartoon"] .shopfront .shop-window { border: 3px solid #14081f; }
body[data-theme="cartoon"] .shopfront .awning::after { top: 15px; }
body[data-theme="cartoon"] .shopfront .facade { gap: 2px; padding-bottom: 4px; }
body[data-theme="cartoon"] .shopfront .shop-window, body[data-theme="cartoon"] .shopfront .sign { border-width: 2px; }
body[data-theme="cartoon"] .shopfront .sign { font-weight: 400; font-size: 14px; }
body[data-theme="cartoon"] #pause .primary { color: #14081f; -webkit-text-stroke: 0; }

.flag { display: inline-block; vertical-align: -4px; margin-right: 8px; line-height: 0; }
.flag svg { width: 27px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.8); }

.logo {
  margin: 0 0 16px;
  font-size: 72px;
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9fd3ff;
  -webkit-text-stroke: 4px #0a0f24;
  paint-order: stroke fill;
  text-shadow: 0 8px 0 #0a0f24, 0 14px 24px rgba(0, 0, 0, 0.5);
}
.logo .bottom { color: #5ff6ff; font-size: 76px; }

/* The lightning bolt behind the logo. It glows softly, and strikes (two
   flashes, well under three a second, plus a white sky flash) whenever the
   title screen is opened afresh (main.js adds .strike). Each theme sets the
   --bolt-* colours. pointer-events: none keeps the logo's admin taps working. */
/* The logo's shape: a trapezoid, narrow at the top and wide at the bottom
   (tipped back in 3D, like an arcade marquee). Themes that add
   their own transform repeat --logo-shape. */
.logo .top, .logo .bottom { display: inline-block; }
/* main.js fitLogo sizes the lines (THUNDER smaller, THUMB bigger and spaced
   out, same fonts) so the two lines fill the trapezoid. */
.logo { --logo-shape: perspective(340px) rotateX(24deg); transform: var(--logo-shape); transform-origin: 50% 40%; }
.logo { position: relative; z-index: 0; --bolt-fill: #fff6a8; --bolt-ink: #0a0f24; --bolt-glow: rgba(95, 246, 255, 0.85); --bolt-ink-w: 6px; }
.logo .bolt {
  position: absolute; z-index: -1; left: 50%; top: 50%; width: 150px; height: 240px;
  margin: -150px 0 0 -70px; transform: rotate(12deg); pointer-events: none; overflow: visible;
  fill: var(--bolt-fill); stroke: var(--bolt-ink); stroke-width: var(--bolt-ink-w); stroke-linejoin: round; paint-order: stroke fill;
  filter: drop-shadow(0 0 10px var(--bolt-glow));
  animation: bolt-glow 3s ease-in-out infinite;
}
#title.strike .logo .bolt { animation: bolt-strike 1s ease-out; }
.sky-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
#title.strike .sky-flash { animation: sky-flash 1s ease-out; }
@keyframes bolt-glow {
  50% { filter: drop-shadow(0 0 18px var(--bolt-glow)) brightness(1.12); }
}
@keyframes bolt-strike {
  0% { opacity: 0; transform: rotate(12deg) scale(0.6); }
  8% { opacity: 1; transform: rotate(12deg) scale(1.12); filter: drop-shadow(0 0 30px #fff) brightness(1.8); }
  20% { opacity: 0.2; transform: rotate(12deg) scale(1.04); filter: drop-shadow(0 0 4px var(--bolt-glow)); }
  34% { opacity: 1; transform: rotate(12deg) scale(1.08); filter: drop-shadow(0 0 30px #fff) brightness(1.8); }
  60%, 100% { opacity: 1; transform: rotate(12deg) scale(1); filter: drop-shadow(0 0 10px var(--bolt-glow)); }
}
@keyframes sky-flash {
  0% { opacity: 0; }
  8% { opacity: 0.5; }
  20% { opacity: 0; }
  34% { opacity: 0.3; }
  55%, 100% { opacity: 0; }
}

h2 {
  margin: 0 0 16px;
  font-size: 38px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
}

p { font-size: 17px; line-height: 1.4; margin: 6px 0; }
p.small { font-size: 15px; color: var(--muted); }
.tag { color: var(--muted); font-size: 17px; margin-bottom: 14px; }

.menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  min-width: 260px;
}

button {
  font: inherit;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 12px 22px;
  border-radius: 14px;
  border: 3px solid transparent;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.08s, background 0.08s;
}
button:hover, button:focus-visible, button:focus {
  outline: none;
  background: var(--accent);
  color: var(--accent-ink);
  transform: scale(1.04);
}

.slider {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 360px;
  font-size: 18px;
  font-weight: 700;
  margin: 8px 0;
}
input[type="range"] { width: 170px; height: 32px; accent-color: var(--accent); }
input[type="range"]:focus { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.legend {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  text-align: left;
  font-size: 16px;
}
.legend li { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.dot { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-block; }
.dot.blob { background: hsl(200, 70%, 58%); }
.dot.zippy { background: hsl(320, 85%, 62%); }
.dot.armor { background: #7d8ea3; box-shadow: inset 0 0 0 5px #56667a; }
.dot.tnt { background: #c0392b; border-radius: 4px; }
.dot.bolt { background: #ffd84d; }
.dot.spread { background: #ff6bd6; }
.dot.pierce { background: #6bff9e; }
.dot.twin { background: #6bb8ff; }
.dot.homing { background: #ff9a3b; }
.dot.mega { background: #ff4d4d; box-shadow: inset 0 0 0 5px #b02020; }
.dot.slowmo { background: #b48cff; }
.dot.shield { background: #4de8ff; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; }
.dot.double { background: #f4f4f4; }
.dot.cannon { background: #c9d6e8; box-shadow: inset 0 -6px 0 #5d7086; }
#howto h2 { margin-bottom: 4px; }
#howto h3 { font-size: 17px; margin: 10px 0 4px; }
#howto p { margin: 6px 0; }
.howto-body { max-height: 560px; overflow-y: auto; padding-right: 6px; } /* longer languages (fr, de) scroll instead of pushing Back off-screen */
.legend.compact { margin: 4px 0; font-size: 15px; }
.powers {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  text-align: left;
  font-size: 14px;
}
.powers li { display: flex; align-items: center; gap: 8px; }
.powers .dot { width: 16px; height: 16px; }

#achievement-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  text-align: left;
  width: 360px;
}
#achievement-list { max-height: 520px; overflow-y: auto; padding-right: 6px; } /* QA fix: 16 entries overflowed the panel */
#achievement-list li { display: flex; flex-direction: column; opacity: 0.45; font-size: 13px; }
#achievement-list li.got { opacity: 1; }
#achievement-list strong { font-size: 16px; color: var(--accent); }

/* ---------- Collection ---------- */
#collection h2 { margin-bottom: 6px; }
.completion { width: 300px; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.completion span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #ff6bd6); transition: width 0.4s; }
#collection-progress { margin: 6px 0 8px; }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tabs button { margin: 0; min-width: 0; padding: 8px 12px; font-size: 15px; opacity: 0.6; }
.tabs button[aria-selected="true"] { opacity: 1; background: var(--accent); color: var(--accent-ink); }
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 360px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
}
.cards.small { grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 350px; }
.cards h3 { grid-column: 1 / -1; margin: 6px 0 0; font-size: 15px; text-align: left; color: var(--muted); }
.card {
  position: relative;
  margin: 0;
  min-width: 0;
  padding: 6px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid transparent;
  font-size: 12px;
  line-height: 1.15;
}
.card canvas { width: 92px; height: 92px; display: block; }
.cards.small .card canvas { width: 70px; height: 70px; }
.card.locked { color: var(--muted); }
.card.equipped { border-color: var(--accent); }
.card.equipped::before { content: "✓"; position: absolute; top: 2px; left: 8px; color: var(--accent); font-weight: 900; }
.card .new { position: absolute; top: 4px; right: 4px; background: #ff3b6b; color: #fff; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 6px; }
.card.selected { outline: 3px solid #fff; outline-offset: 1px; }
.detail { min-height: 44px; margin: 8px 0 0; font-size: 13px; line-height: 1.35; max-width: 360px; }
/* Boss story card: a comic panel over the Collection */
.story {
  position: absolute;
  inset: 70px 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
  border-radius: 18px;
  border: 4px solid #fff;
  background:
    radial-gradient(rgba(255, 255, 255, 0.07) 1.5px, transparent 1.6px) 0 0 / 10px 10px,
    linear-gradient(160deg, #1b1f4a, #3b1a4a);
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.45);
  text-align: center;
}
.story[hidden] { display: none; }
.screen.panel > .story { max-width: none; }
.story-num { margin: 0; font-size: 13px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
#story-art { width: 120px; height: 120px; }
.story h3 { margin: 0; font-size: 32px; color: var(--accent); line-height: 1.05; }
.story-title { margin: 0 0 6px; font-size: 16px; font-style: italic; color: #ffb3e6; }
.story-text {
  position: relative;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  color: #1a1030;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}
.story-text::before { /* speech-bubble tail pointing up at the boss */
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 0;
  border-bottom: 12px solid #fff;
}
.story-fact { margin: 8px 0 0; font-size: 13px; line-height: 1.35; text-align: left; }
.story-fact strong { color: var(--accent); }
.story-attacks { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.story button { margin-top: auto; }
body[data-theme="pixel"] .story { border-radius: 0; background: #1D2B53; box-shadow: 8px 8px 0 #000; }
body[data-theme="pixel"] .story h3 { font-size: 18px; }
body[data-theme="pixel"] .story-text { border-radius: 0; font-size: 10px; line-height: 1.7; }
body[data-theme="pixel"] .story-title, body[data-theme="pixel"] .story-num, body[data-theme="pixel"] .story-attacks, body[data-theme="pixel"] .story-fact { font-size: 9px; line-height: 1.6; }
body[data-theme="cartoon"] .story { border: 5px solid #14081f; background: radial-gradient(rgba(20, 8, 31, 0.18) 2px, transparent 2.2px) 0 0 / 12px 12px, #ffd400; box-shadow: 0 10px 0 #14081f; }
body[data-theme="cartoon"] .story h3 { color: #ff2e93; -webkit-text-stroke: 1.5px #14081f; }
body[data-theme="cartoon"] .story-title, body[data-theme="cartoon"] .story-num, body[data-theme="cartoon"] .story-attacks, body[data-theme="cartoon"] .story-fact { color: #14081f; }
body[data-theme="cartoon"] .story-fact strong { color: #ff2e93; }
body[data-theme="cartoon"] .story-text { border: 4px solid #14081f; }
body[data-theme="juicy"] .story { border: 0; background: linear-gradient(160deg, #3d1c73, #14082e); box-shadow: 0 0 30px rgba(180, 107, 255, 0.5); }

body[data-theme="pixel"] .tabs button, body[data-theme="pixel"] .card { font-size: 9px; border-radius: 0; }
body[data-theme="pixel"] .completion { border-radius: 0; }
body[data-theme="cartoon"] .tabs button { font-size: 17px; }
body[data-theme="cartoon"] .card { border-radius: 16px; border: 3px solid #14081f; background: rgba(255, 255, 255, 0.18); box-shadow: 0 4px 0 #14081f; -webkit-text-stroke: 0; font-size: 13px; }
body[data-theme="cartoon"] .card.equipped { border-color: #ffd400; }
body[data-theme="juicy"] .card { background: rgba(255, 255, 255, 0.1); box-shadow: none; color: #fff; }
body[data-theme="juicy"] .card.locked { color: #c9b8ff; }

.final-score { font-size: 76px; font-weight: 900; margin: 0; line-height: 1; }
.new-best { color: var(--accent); font-weight: 800; font-size: 28px; }
#final-stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px 24px;
  font-size: 18px;
  margin: 14px 0 0;
}
#final-stats dt { color: var(--muted); text-align: right; }
#final-stats dd { margin: 0; text-align: left; font-weight: 800; }
/* compact, so Continue + Shop + Play Again + Title fit on short screens and in every language */
#gameover h2 { margin-bottom: 4px; }
#gameover .final-score { font-size: 58px; }
#gameover .new-best { margin: 2px 0; }
#gameover #final-stats { margin: 8px 0 4px; gap: 1px 14px; font-size: 14px; }
#gameover .menu { gap: 8px; margin-top: 10px; }
#gameover .menu button { padding-top: 8px; padding-bottom: 8px; }
#gameover .revive-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 18px; background: var(--play-bg, var(--accent)); color: var(--accent-ink); }
#gameover .revive-btn[hidden] { display: none; }
.revive-top { display: flex; align-items: center; gap: 14px; font-size: 26px; text-transform: uppercase; letter-spacing: 1px; }
.revive-price { display: flex; align-items: center; gap: 5px; font-size: 20px; }
.revive-sub { font-size: 13px; opacity: 0.85; }
#gameover .revive-btn:disabled { opacity: 0.5; filter: grayscale(0.6); cursor: not-allowed; }
body[data-theme="pixel"] .revive-top { font-size: 16px; }
body[data-theme="pixel"] .revive-price { font-size: 12px; }
body[data-theme="pixel"] .revive-sub { font-size: 8px; }
body[data-theme="pixel"] #gameover .revive-btn { color: #000; }
body[data-theme="cartoon"] #gameover .revive-btn { color: #14081f; -webkit-text-stroke: 0; }

#toast {
  position: absolute;
  left: 50%;
  top: 118px;
  width: max-content;
  max-width: 400px;
  transform: translate(-50%, -20px);
  opacity: 0;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 800;
  transition: opacity 0.25s, transform 0.25s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Over a menu panel (game over, pause, shops…) the toast goes to the top edge, so an
   "Achievement unlocked" doesn't cover the panel's heading on short phones. */
#ui:has(.screen.panel.open) #toast { top: 30px; }

/* ---------- Admin panel (theme switcher) ---------- */
.admin {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 40px;
  background: rgba(5, 7, 15, 0.9);
  pointer-events: auto;
}
.admin .menu button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.admin .menu button[aria-pressed="true"]::after { content: "  ✓"; }
.admin p.small { font-size: 13px; }
.admin { overflow-y: auto; justify-content: safe center; padding-top: 16px; padding-bottom: 16px; } /* the coin tools made it taller than short screens */
.admin .menu { margin-top: 8px; }
.admin .tag { margin: 10px 0 0; }
.admin #theme-list, .admin .menu.skins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 340px; }
.admin #theme-list button, .admin .menu.skins button { margin: 0; min-width: 0; padding-left: 8px; padding-right: 8px; font-size: 15px; }

[hidden] { display: none !important; }

/* =========================================================
   Theme skins for the menus. The canvas is themed in render.js;
   these make the buttons, panels and type match it.
   ========================================================= */

/* ---- Pixel: square corners, hard borders, stepped shadows ---- */
body[data-theme="pixel"] { --accent: #FFEC27; --accent-ink: #000; --muted: #C2C3C7; --panel: #1D2B53; --edge: #FFF1E8; }
body[data-theme="pixel"] #ui { font-family: "Press Start 2P", monospace; }
body[data-theme="pixel"] .logo { font-family: "Press Start 2P", monospace; font-size: 48px; line-height: 1.25; letter-spacing: 0; color: #FFF1E8; -webkit-text-stroke: 0; text-shadow: 4px 4px 0 #FF004D, 8px 8px 0 #000; }
body[data-theme="pixel"] .logo .bottom { font-size: 52px; color: #29ADFF; }
body[data-theme="pixel"] .logo { --bolt-fill: #FFEC27; --bolt-ink: #000; --bolt-glow: rgba(255, 236, 39, 0.6); --bolt-ink-w: 8px; }
body[data-theme="pixel"] .logo .bolt { stroke-linejoin: miter; shape-rendering: crispEdges; }
body[data-theme="pixel"] h2 { font-size: 24px; letter-spacing: 0; text-shadow: 3px 3px 0 #000; }
body[data-theme="pixel"] p, body[data-theme="pixel"] .tag, body[data-theme="pixel"] .legend { font-size: 11px; line-height: 1.8; }
body[data-theme="pixel"] .powers { font-size: 9px; line-height: 1.6; }
body[data-theme="pixel"] #howto h3 { font-size: 11px; line-height: 1.6; }
body[data-theme="pixel"] #howto p { font-size: 9px; line-height: 1.7; }
body[data-theme="pixel"] button { font-size: 14px; letter-spacing: 0; border-radius: 0; border: 4px solid #FFF1E8; background: #1D2B53; box-shadow: 4px 4px 0 #000; transform: none; transition: none; }
body[data-theme="pixel"] button:hover, body[data-theme="pixel"] button:focus { background: #FF004D; color: #FFF1E8; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
body[data-theme="pixel"] .screen.panel::before { border-radius: 0; border: 4px solid #FFF1E8; box-shadow: 8px 8px 0 #000; }
body[data-theme="pixel"] .slider { font-size: 11px; }
body[data-theme="pixel"] #toast { border-radius: 0; font-size: 10px; border-width: 4px; }
body[data-theme="pixel"] .final-score { font-size: 40px; }
body[data-theme="pixel"] #final-stats, body[data-theme="pixel"] #achievement-list li { font-size: 10px; }
body[data-theme="pixel"] #achievement-list strong { font-size: 11px; }
body[data-theme="pixel"] .dot { border-radius: 0; }
body[data-theme="pixel"] #collection-btn.has-new::after { border-radius: 0; }
body[data-theme="pixel"] .dock-btn { font-size: 7px; gap: 7px; padding: 4px 0; border-width: 3px; }
body[data-theme="pixel"] .new-run { font-size: 8px; line-height: 1.6; }
body[data-theme="pixel"] .play-label { font-size: 26px; letter-spacing: 0; }
body[data-theme="pixel"] .play-sub { font-size: 9px; letter-spacing: 0; }
body[data-theme="pixel"] #title .play { color: #000; }
body[data-theme="pixel"] #title .play:hover, body[data-theme="pixel"] #title .play:focus { background: #FF004D; color: #FFF1E8; }
body[data-theme="pixel"] .stat-chip { border-radius: 0; }
body[data-theme="pixel"] .stat-chip .tag, body[data-theme="pixel"] .chip-bar b { font-size: 8px; }
body[data-theme="pixel"] .chip-bar { border-radius: 0; }
body[data-theme="pixel"] .icon { shape-rendering: crispEdges; stroke-linecap: square; stroke-linejoin: miter; }
body[data-theme="pixel"] .flag-slot svg, body[data-theme="pixel"] .flag svg { border-radius: 0; shape-rendering: crispEdges; }

/* ---- Cartoon: chunky ink outlines, loud colour, tilted type ---- */
body[data-theme="cartoon"] { --accent: #ffd400; --accent-ink: #14081f; --muted: #fff3c4; --panel: #7b2ff7; --edge: #14081f; }
body[data-theme="cartoon"] #ui { font-family: "Luckiest Guy", "Trebuchet MS", sans-serif; }
body[data-theme="cartoon"] .logo { font-family: "Luckiest Guy", sans-serif; font-weight: 400; font-size: 78px; color: #ffffff; -webkit-text-stroke: 7px #14081f; transform: rotate(-5deg) var(--logo-shape); text-shadow: 0 8px 0 #14081f; }
body[data-theme="cartoon"] .logo .bottom { color: #ffd400; font-size: 84px; }
body[data-theme="cartoon"] .logo { --bolt-fill: #ff8a00; --bolt-ink: #14081f; --bolt-glow: rgba(255, 255, 255, 0.9); --bolt-ink-w: 9px; }
body[data-theme="cartoon"] h2 { font-weight: 400; font-size: 44px; color: #ffd400; -webkit-text-stroke: 3px #14081f; paint-order: stroke fill; transform: rotate(-3deg); }
body[data-theme="cartoon"] p, body[data-theme="cartoon"] .tag { font-family: "Trebuchet MS", sans-serif; font-weight: 700; }
body[data-theme="cartoon"] button { font-weight: 400; font-size: 24px; letter-spacing: 1px; border: 4px solid #14081f; border-radius: 18px; background: #ff2e93; color: #fff; box-shadow: 0 6px 0 #14081f; -webkit-text-stroke: 1px #14081f; }
body[data-theme="cartoon"] button:hover, body[data-theme="cartoon"] button:focus { background: #ffd400; color: #14081f; transform: rotate(-2deg) scale(1.06); }
body[data-theme="cartoon"] .screen.panel::before { border: 5px solid #14081f; border-radius: 28px; box-shadow: 0 10px 0 #14081f; }
body[data-theme="cartoon"] .screen.panel { background: rgba(255, 176, 0, 0.35); }
body[data-theme="cartoon"] #toast { border: 4px solid #14081f; background: #ffd400; color: #14081f; font-weight: 400; }
body[data-theme="cartoon"] .admin { background: rgba(123, 47, 247, 0.92); }
body[data-theme="cartoon"] .dock-btn { font-size: 11px; letter-spacing: 0; padding: 4px 0; border-width: 3px; border-radius: 16px; -webkit-text-stroke: 0; }
body[data-theme="cartoon"] .dock-btn .icon, body[data-theme="cartoon"] .new-run .icon { stroke-width: 2.6; }
body[data-theme="cartoon"] .new-run { font-size: 15px; }
body[data-theme="cartoon"] .play-label { font-size: 40px; }
body[data-theme="cartoon"] #title .play { color: #14081f; -webkit-text-stroke: 0; }
body[data-theme="cartoon"] .stat-chip { background: rgba(20, 8, 31, 0.55); }
body[data-theme="cartoon"] #collection-btn.has-new::after { background: var(--accent); box-shadow: 0 0 0 3px #14081f; }

/* ---- Juicy: candy pills, glossy gradients, glow ---- */
body[data-theme="juicy"] { --accent: #ffd23b; --accent-ink: #2a0f55; --muted: #c9b8ff; --panel: rgba(42, 18, 87, 0.92); --edge: rgba(255, 107, 214, 0.6); }
body[data-theme="juicy"] #ui { font-family: "Fredoka", "Trebuchet MS", sans-serif; }
body[data-theme="juicy"] .logo { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 76px; color: #ffffff; -webkit-text-stroke: 5px #2a0f55; text-shadow: 0 0 24px rgba(59, 240, 255, 0.8), 0 6px 0 #2a0f55; }
body[data-theme="juicy"] .logo .bottom { color: #ff3b6b; text-shadow: 0 0 24px rgba(255, 59, 107, 0.9), 0 6px 0 #2a0f55; }
body[data-theme="juicy"] .logo { --bolt-fill: #fff36b; --bolt-ink: #2a0f55; --bolt-glow: rgba(255, 59, 107, 0.9); }
body[data-theme="juicy"] h2 { font-weight: 700; color: #ffd23b; text-shadow: 0 0 18px rgba(255, 210, 59, 0.7); }
body[data-theme="juicy"] button { font-weight: 700; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(180deg, #ff6b8f, #ff3b6b 55%, #d11e4f); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 5px 0 #7a1239, 0 0 18px rgba(255, 59, 107, 0.45); }
body[data-theme="juicy"] button:hover, body[data-theme="juicy"] button:focus { background: linear-gradient(180deg, #ffe680, #ffd23b 55%, #e6a800); color: #2a0f55; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), 0 5px 0 #8a5a00, 0 0 22px rgba(255, 210, 59, 0.6); transform: scale(1.06); }
body[data-theme="juicy"] .screen.panel::before { border-radius: 32px; box-shadow: 0 0 40px rgba(255, 107, 214, 0.35); }
body[data-theme="juicy"] #toast { border-radius: 999px; }
body[data-theme="juicy"] { --play-bg: linear-gradient(180deg, #ffe680, #ffd23b 55%, #e6a800); }
body[data-theme="juicy"] { --awning-a: #ff3b6b; --awning-b: #ffe680; --shop-wall: #4a1f8f; }
body[data-theme="juicy"] .shopfront .facade { border-radius: 0 0 16px 16px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.2), 0 0 16px rgba(255, 107, 214, 0.4); }
body[data-theme="juicy"] .shopfront .sign { border-radius: 999px; border-color: #e6a800; }
body[data-theme="juicy"] .dock-btn { border-radius: 22px; }
body[data-theme="juicy"] #title .play { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6), 0 5px 0 #8a5a00, 0 0 22px rgba(255, 210, 59, 0.6); }
body[data-theme="juicy"] #collection-btn.has-new::after { background: var(--accent); box-shadow: 0 0 0 2px #2a0f55; }

/* Chinese and Hindi in the pixel theme: those characters come from the system
   font, not the wide pixel font the tiny pixel sizes were tuned for, so go bigger. */
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] p,
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] .tag,
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] .legend { font-size: 14px; }
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] #howto p,
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] .powers { font-size: 13px; }
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] #howto h3 { font-size: 15px; }
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] button { font-size: 18px; }
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] .dock-btn { font-size: 12px; }
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] .new-run,
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] .shopfront .sign,
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] .card { font-size: 12px; }
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] .stat-chip .tag,
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] .chip-bar b,
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] .shop-cards .card .price { font-size: 11px; }
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] #pause .pause-menu button { font-size: 16px; }
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] .play-label { font-size: 32px; }
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] .play-sub { font-size: 13px; }
html:is([lang="zh"], [lang|="hi"]) body[data-theme="pixel"] #toast { font-size: 14px; }

/* Devanagari letters join up: letter-spacing would pull them apart */
html[lang|="hi"] #ui, html[lang|="hi"] #ui * { letter-spacing: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  button, #toast { transition: none; }
  #title .play::before { animation: none; }
  .logo .bolt, #title.strike .logo .bolt, #title.strike .sky-flash { animation: none; }
}
body[data-theme="pixel"] .admin .menu.skins button { font-size: 10px; }
body[data-theme="pixel"] #collection .detail { font-size: 8px; line-height: 1.6; }
body[data-theme="pixel"] .cards.small { max-height: 310px; }
body[data-theme="pixel"] .cards.small.shop-cards { max-height: 450px; }

/* "Watch an ad" pair on the game over screen (only with an ad provider, see ads.js) */
#gameover .ad-row { display: flex; gap: 8px; }
#gameover .ad-row[hidden], #gameover .ad-btn[hidden] { display: none; }
#gameover .ad-btn { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; }
.ad-play { font-size: 0.8em; opacity: 0.85; }
body[data-theme="pixel"] #gameover .ad-btn { font-size: 9px; }

/* A boost bought up to its limit: highlighted, with "Limit reached" for a price */
.shop-cards .card.maxed { box-shadow: 0 0 0 3px #ffd84d, 0 0 14px rgba(255, 216, 77, 0.75); }
.shop-cards .card.maxed .price { background: #ffd84d; color: #14081f; border-radius: 6px; padding: 1px 5px; font-weight: 800; text-transform: uppercase; font-size: 0.8em; line-height: 1.15; }

/* Wide screens (PC): the logo and the power-up guide fill the side bands
   during a run. --band is the band's width in CSS px (main.js resize). */
.side-panel { display: none; position: fixed; top: 0; bottom: 0; width: var(--band, 0px); align-items: center; justify-content: center; pointer-events: none; padding: 24px; }
.side-left { left: 0; }
.side-right { right: 0; }
html.wide-bands body.in-run .side-left, html.wider-bands body.in-run .side-right { display: flex; }
body[data-theme] .side-panel .side-logo { margin: 0; transform: scale(var(--side-scale, 1)) rotate(-5deg) var(--logo-shape); transform-origin: 50% 50%; }
.side-card { width: 300px; transform: scale(var(--side-scale, 1)); transform-origin: 50% 50%; background: rgba(20, 8, 31, 0.78); border: 4px solid #14081f; border-radius: 18px; box-shadow: 0 6px 0 #14081f; padding: 16px 18px; color: #fff; }
.side-card h3 { margin: 0 0 10px; font: 400 20px/1.1 "Luckiest Guy", "Fredoka", sans-serif; color: #ffd400; -webkit-text-stroke: 0; }
.side-card .powers { margin: 0; font-size: 15px; }