/* Themes. The arcade page uses the theme the player picks. Each game sets
   its own theme while it's open (Number Muncher is always retro). */
@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/press-start-2p-v1.woff2") format("woff2");
  font-display: swap;
}
:root {
  --bg: #07071c;
  --panel: #10103a;
  --line: #2d2dff;
  --pop: #ffe14d;
  --pink: #ff3ea5;
  --cyan: #22e4ff;
  --good: #39ff7a;
  --text: #ffffff;
  --ink: #000000;
  --board: #000000;
  --tile: #0b0b26;
  --tile-text: var(--pop);
  --hint-bg: #000000;
  --logo: var(--pop);
  --heading: var(--pop);
  --dot-radius: 0;
  --board-border: 8px double var(--line);
  --logo-shadow: 4px 4px 0 var(--pink);
  --star: var(--pop);
  --radius: 0px;
  --scan: .16;
  --card-outline: 4px solid var(--ink);
  --card-shadow: 0 0 0 8px var(--line), 10px 10px 0 8px var(--ink);
  --glow: 0 0 24px rgba(45, 45, 255, .45);
  --bg-image:
    radial-gradient(2px 2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 42% 72%, #cfd3ff 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 64%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 24% 88%, #cfd3ff 50%, transparent 51%),
    radial-gradient(2px 2px at 62% 38%, #fff 50%, transparent 51%);
  --bg-size: 420px 420px;
  --font: "Press Start 2P", ui-monospace, monospace;
  --text-scale: 1;
  --weight: 400;
}
[data-theme="bright"] {
  --bg: #b9a7ff;
  --panel: #ffffff;
  --line: #1d1a3a;
  --pop: #ffd23f;
  --pink: #ff5d8f;
  --cyan: #6a3cf0;
  --good: #3bd16f;
  --text: #1d1a3a;
  --ink: #1d1a3a;
  --board: #8a5cff;
  --tile: #ffffff;
  --tile-text: #1d1a3a;
  --hint-bg: #ffffff;
  --logo: #8a5cff;
  --heading: #6a3cf0;
  --star: #6a3cf0;
  --dot-radius: 50%;
  --board-border: 6px solid var(--ink);
  --logo-shadow: 4px 4px 0 var(--pop);
  --radius: 22px;
  --scan: 0;
  --card-outline: none;
  --card-shadow: 0 10px 0 var(--ink);
  --glow: 0 8px 0 var(--ink);
  --bg-image: linear-gradient(160deg, #7fd3ff, #b9a7ff 55%, #ff5d8f);
  --bg-size: cover;
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --text-scale: 1.45;
  --weight: 800;
}
[data-theme="candy"] {
  --bg: #ffd6ea;
  --panel: #fff8fc;
  --line: #c2255c;
  --pop: #ffe066;
  --pink: #ff6fae;
  --cyan: #c2255c;
  --good: #7ee8b5;
  --text: #5a1e3d;
  --ink: #5a1e3d;
  --board: #ffb3d6;
  --tile: #ffffff;
  --tile-text: #5a1e3d;
  --hint-bg: #ffffff;
  --logo: #d6336c;
  --heading: #c2255c;
  --star: #c2255c;
  --dot-radius: 50%;
  --board-border: 6px solid var(--line);
  --logo-shadow: 4px 4px 0 var(--pop);
  --radius: 30px;
  --scan: 0;
  --card-outline: none;
  --card-shadow: 0 10px 0 var(--line);
  --glow: 0 8px 0 var(--line);
  --bg-image:
    radial-gradient(circle at 15% 20%, #fff 0 40px, transparent 41px),
    radial-gradient(circle at 80% 70%, #bff5dc 0 70px, transparent 71px),
    linear-gradient(160deg, #ffd6ea, #ffe8f3 50%, #d7f7e9);
  --bg-size: cover;
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --text-scale: 1.45;
  --weight: 800;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { font-size: calc(16px * var(--text-scale)); }
body {
  font-family: var(--font);
  font-weight: var(--weight);
  color: var(--text);
  line-height: 1.5;
  background-color: var(--bg);
  background-image: var(--bg-image);
  background-size: var(--bg-size);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: none;
  overscroll-behavior: none;
}
/* Soft CRT scanlines over everything. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, var(--scan)) 2px 4px);
}
button { font-family: inherit; font-weight: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---- Screens ---- */
.screen {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.screen.active { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.card {
  width: 100%;
  max-width: 760px;
  background: var(--panel);
  border: 4px solid var(--line);
  border-radius: var(--radius);
  outline: var(--card-outline);
  box-shadow: var(--card-shadow);
  padding: 32px 24px;
  margin: 12px;
}
.center { text-align: center; }
.logo {
  margin: 0 0 20px;
  font-size: clamp(1.6rem, 6.5vw, 3.4rem);
  line-height: 1.2;
  color: var(--logo);
  text-shadow: var(--logo-shadow);
  overflow-wrap: anywhere;
}
h2 { font-size: clamp(1.1rem, 4vw, 1.8rem); margin: 0 0 16px; color: var(--heading); line-height: 1.3; text-shadow: 3px 3px 0 var(--pink); }
[data-theme="bright"] h2, [data-theme="candy"] h2 { text-shadow: none; }
.big { font-size: clamp(.85rem, 2.8vw, 1.15rem); margin: 0 0 20px; line-height: 1.7; }
.small { font-size: .75rem; margin: 16px 0 0; color: var(--cyan); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px;
  padding: 12px 22px;
  font-size: clamp(.85rem, 2.6vw, 1.05rem);
  line-height: 1.3;
  color: var(--text);
  background: var(--panel);
  border: 4px solid var(--cyan);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.btn:focus-visible, .tile-btn:focus-visible, .mute:focus-visible { outline: 4px solid var(--pink); outline-offset: 5px; }
.btn-pop { background: var(--pop); color: var(--ink); border-color: var(--ink); }
.btn-go { background: var(--good); color: var(--ink); border-color: var(--ink); }
.btn-big { min-height: 76px; font-size: clamp(1.05rem, 3.6vw, 1.4rem); padding: 16px 32px; }
.btn-small { min-height: 52px; padding: 8px 14px; font-size: .75rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 24px; }
.btn-col { display: flex; flex-direction: column; gap: 20px; align-items: stretch; max-width: 440px; margin: 24px auto 0; }

/* ---- Mute ---- */
.mute {
  position: fixed; z-index: 30;
  top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: 60px; height: 60px;
  border: 4px solid var(--cyan);
  background: var(--panel); box-shadow: 4px 4px 0 var(--ink); border-radius: var(--radius);
  cursor: pointer; touch-action: manipulation;
  display: grid; place-items: center;
}
.mute-icon { width: 34px; height: 34px; background: var(--text); -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z' fill='%23000'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E"); mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z' fill='%23000'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E"); }
.mute.is-muted .mute-icon { background: var(--pink); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z' fill='%23000'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z' fill='%23000'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E"); }

/* ---- Arcade ---- */
#arcade.active { justify-content: flex-start; padding-top: max(32px, env(safe-area-inset-top)); }
.arcade-head { text-align: center; margin: 8px 70px 28px; }
.arcade-head .big { color: var(--cyan); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; gap: 36px; width: 100%; max-width: 1000px; }
.game-tile { display: flex; flex-direction: column; background: var(--panel); border: 4px solid var(--line); border-radius: var(--radius); overflow: hidden; outline: var(--card-outline); box-shadow: var(--card-shadow); }
.game-art { position: relative; background: var(--board); aspect-ratio: 3 / 2; border-bottom: 4px solid var(--line); display: grid; place-items: center; }
.game-art img.hero { width: 42%; height: auto; }
.game-art .chip { position: absolute; width: 17%; aspect-ratio: 1; display: grid; place-items: center; font-size: clamp(1rem, 3vw, 1.4rem); color: var(--tile-text); background: var(--tile); border: 3px solid var(--line); border-radius: calc(var(--radius) / 2); }
.game-art .chip.long { font-size: clamp(.7rem, 2vw, 1rem); }
.game-art .chip.sym { font-family: system-ui, sans-serif; font-weight: 900; font-size: clamp(1.3rem, 3.6vw, 1.8rem); }
.game-art .chaser-art { position: absolute; width: 20%; right: 22%; bottom: 8%; }
.game-info { flex: 1; display: flex; flex-direction: column; padding: 20px 16px 24px; text-align: center; }
.game-info h2 { margin: 0 0 10px; text-wrap: balance; }
.game-info .by { margin: 0 0 10px; font-size: .75rem; color: var(--cyan); }
.game-info p { font-size: .8rem; line-height: 1.7; margin: 0 0 16px; text-wrap: balance; }
/* Pin Play and About to the bottom so they line up across cards, and make them the same width. */
.game-info .btn-row { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 280px; align-self: center; }

/* ---- Theme picker ---- */
.arcade-tools { margin-top: 0; }
.song-pick { justify-content: space-between; }
.song-pick .mood { font-size: .7em; opacity: .75; }
.theme-pick { min-width: 150px; flex-direction: column; gap: 12px; padding: 16px; }
.theme-pick .swatch { display: flex; gap: 4px; }
.theme-pick .swatch i { width: 22px; height: 22px; border: 2px solid var(--ink); }
.theme-pick[aria-pressed="true"] { outline: 4px solid var(--pink); outline-offset: 4px; }

/* ---- Menu ---- */
.level-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 460px; margin: 20px auto 0; }
.menu-hero { width: 112px; height: 112px; margin-bottom: 8px; }

/* ---- About card ---- */
.about-facts { display: inline-grid; grid-template-columns: auto auto; gap: 10px 14px; font-size: .9rem; margin: 0 0 20px; text-align: left; }
.about-facts dt { color: var(--cyan); }
.about-facts dd { margin: 0; }

/* ---- Play ---- */
#play.active { justify-content: flex-start; gap: 14px; }
#play {
  touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  height: 100vh; height: 100dvh; overflow: hidden;
}
.play-top { width: 100%; max-width: 1000px; display: flex; align-items: center; gap: 14px; padding-right: 72px; }
.rule {
  flex: 1; text-align: center;
  font-size: clamp(.8rem, 2.6vw, 1.3rem); line-height: 1.4;
  color: var(--ink); background: var(--pop);
  border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--pink); border-radius: var(--radius);
  padding: 12px;
}
.play-stats { font-size: .75rem; line-height: 1.8; text-align: right; white-space: nowrap; color: var(--cyan); }
.play-stats .stars, .play-stats .hearts { color: var(--star); letter-spacing: 2px; font-family: system-ui, sans-serif; font-size: 1.1rem; }
.board-wrap { flex: 1; min-height: 0; width: 100%; max-width: 1000px; display: grid; place-items: center; container-type: size; }
/* The board looks like a maze wall: a double blue line. */
.board {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1.2%;
  aspect-ratio: 5 / 4;
  width: min(100cqw, 125cqh);
  padding: 1.4%;
  background: var(--board);
  border: var(--board-border);
  border-radius: var(--radius);
  box-shadow: 0 0 0 4px var(--ink), var(--glow);
}
@supports not (aspect-ratio: 1) { .board { height: 60vh; } }
.tile-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--tile-text); background: var(--tile);
  border: 3px solid var(--line); border-radius: calc(var(--radius) * .6);
  font-size: clamp(1.1rem, 4.4vmin, 2.6rem); line-height: 1;
  padding: 0; cursor: pointer; touch-action: none;
}
.tile-btn.long { font-size: clamp(.8rem, 3vmin, 1.7rem); }
.tile-btn.eaten { background: transparent; border-style: dashed; border-color: var(--line); opacity: .45; color: transparent; }
.tile-btn .dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 9%; width: 62%; }
.tile-btn .dots i { display: block; aspect-ratio: 1; background: var(--pink); border-radius: var(--dot-radius); }
.tile-btn.eaten .dots { display: none; }
.tile-btn.wrong { animation: wiggle .5s ease-in-out; }
.tile-btn.wrong::after {
  content: "?"; position: absolute; top: -14px; right: -12px;
  width: 34px; height: 34px;
  background: var(--pink); border: 3px solid var(--ink); color: var(--ink);
  font-size: .9rem; display: grid; place-items: center;
}
@keyframes wiggle {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.sprite {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  pointer-events: none;
  transition: transform .14s ease-out;
  will-change: transform;
  z-index: 2;
}
.sprite img { width: 82%; height: 82%; object-fit: contain; }
/* The muncher sits in the corner so you can still read the number under it. */
.sprite.hero { place-items: end end; }
.sprite.hero img { width: 54%; height: 54%; transform: translate(22%, 18%); }
.sprite.chaser img { width: 70%; height: 70%; }
.sprite.hero.chomp img { animation: chomp .24s ease-in-out; }
@keyframes chomp { 50% { transform: translate(22%, 18%) scale(1.3); } }
.sprite.hero.safe::before { content: ""; position: absolute; inset: 4%; border: 4px dashed var(--cyan); }
.sprite.chaser { z-index: 3; transition-duration: .3s; transition-timing-function: ease-in-out; }
.sprite.chaser.arrive img { animation: arrive .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes arrive { from { transform: scale(0); } }
.play-bottom { width: 100%; max-width: 1000px; display: flex; align-items: center; gap: 16px; }
.hint {
  flex: 1; min-height: 64px;
  display: flex; align-items: center;
  font-size: clamp(.7rem, 2.2vw, 1rem); line-height: 1.6;
}
.hint.show { background: var(--hint-bg); border: 4px solid var(--pink); border-radius: var(--radius); padding: 8px 14px; }
.btn-munch { background: var(--good); color: var(--ink); border-color: var(--ink); min-height: 76px; min-width: 190px; font-size: clamp(1rem, 3.4vw, 1.4rem); }

/* ---- Overlay ---- */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .72);
  overflow-y: auto;
}
.overlay .card { max-width: 640px; }
.howto-pic { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 12px 0 20px; min-height: 110px; }
.howto-pic img { width: 88px; height: 88px; }
.key {
  display: inline-grid; place-items: center;
  min-width: 52px; height: 52px; padding: 0 12px;
  color: var(--text); background: var(--panel);
  border: 3px solid var(--text); box-shadow: 4px 4px 0 var(--ink); border-radius: calc(var(--radius) / 2);
  font-size: 1rem;
}
.key.arrow { font-family: system-ui, sans-serif; font-size: 1.5rem; font-weight: 900; }
/* Arrow keys like a keyboard: up on top, left, down and right below. */
.keys-arrows { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 52px); gap: 6px; }
.keys-arrows .up { grid-column: 2; grid-row: 1; }
.keys-arrows .left { grid-column: 1; grid-row: 2; }
.keys-arrows .down { grid-column: 2; grid-row: 2; }
.keys-arrows .right { grid-column: 3; grid-row: 2; }
.or { font-size: .8rem; color: var(--cyan); }
.pic-tile { width: 72px; height: 72px; display: inline-grid; place-items: center; color: var(--tile-text); background: var(--tile); border: 3px solid var(--line); border-radius: calc(var(--radius) / 2); font-size: 1.5rem; }
.pic-finger { font-size: 3rem; }
.dots-progress { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.dots-progress i { width: 14px; height: 14px; border: 3px solid var(--text); }
.dots-progress i.on { background: var(--pop); border-color: var(--pop); }
.celebrate-hero { width: 140px; height: 140px; animation: bounce 1s ease-in-out infinite; }
@keyframes bounce { 50% { transform: translateY(-16px); } }
.score-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.score-box { border: 4px solid var(--ink); border-radius: var(--radius); padding: 12px 16px; color: var(--ink); background: var(--pop); font-size: .75rem; box-shadow: 4px 4px 0 var(--pink); }
.score-box b { display: block; font-size: 1.6rem; margin-top: 8px; font-weight: 400; }

/* Toast for "Board cleared!" */
.toast {
  position: fixed; left: 50%; top: 40%; z-index: 15;
  transform: translate(-50%, -50%);
  color: var(--ink); background: var(--pop);
  border: 6px solid var(--ink); box-shadow: 8px 8px 0 var(--pink); border-radius: var(--radius);
  padding: 22px 30px; font-size: clamp(1.1rem, 4.4vw, 2rem); text-align: center; white-space: nowrap;
  animation: pop-in .3s cubic-bezier(.3, 1.5, .5, 1);
  pointer-events: none;
}
@keyframes pop-in { from { transform: translate(-50%, -50%) scale(.4); } }

@media (max-height: 560px) and (orientation: landscape) {
  .rule { font-size: .8rem; padding: 6px 10px; }
  .btn-munch { min-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tile-btn.wrong { outline: 5px dashed var(--pink); outline-offset: -8px; }
}

/* ---- Pocket Pets (the pet shop) ---- */
#play[data-kind="shop"] .board {
  display: flex; flex-direction: column; gap: 2.5cqh;
  aspect-ratio: auto; width: min(100cqw, 900px); height: 100cqh;
  padding: 2.5cqh 2cqw;
}
.shop { display: contents; }
.shop .label { font-size: .8rem; color: var(--heading); margin-right: 10px; white-space: nowrap; }
.pet-house {
  display: flex; align-items: center; min-height: 11cqh;
  background: var(--panel); border: 4px solid var(--line); border-radius: var(--radius); padding: 4px 14px;
}
.house-pets { display: flex; flex-wrap: wrap; gap: 4px; font-size: clamp(1.4rem, 7cqh, 2.6rem); line-height: 1; font-family: system-ui, sans-serif; }
.house-pet.rare, .pet-spot.rare .pet { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px var(--pop)); }
.counter {
  flex: 1; min-height: 0; display: flex; align-items: center; gap: 3cqw;
  background: var(--tile); border: 4px solid var(--line); border-radius: var(--radius); padding: 2cqh 3cqw;
}
.pet-spot { position: relative; display: grid; place-items: center; flex: none; }
.pet-spot .pet { font-size: clamp(3rem, 24cqh, 9rem); line-height: 1; font-family: system-ui, sans-serif; }
.pet-spot.arrive .pet { animation: arrive .6s cubic-bezier(.3, 1.5, .5, 1); }
.pet-spot.bought .pet { animation: hop .9s ease-in forwards; }
@keyframes hop { 30% { transform: translateY(-20%); } 100% { transform: translateY(-160%) scale(.3); opacity: 0; } }
.price-tag {
  display: inline-block; padding: 6px 14px; margin-top: 6px;
  color: var(--ink); background: var(--pop); border: 4px solid var(--ink); border-radius: 12px;
  font-size: clamp(1.1rem, 5cqh, 2rem); transform: rotate(-4deg); box-shadow: 4px 4px 0 var(--pink);
}
.tray-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2cqh; align-self: stretch; justify-content: center; }
.tray {
  min-height: 15cqh; display: flex; flex-wrap: wrap; align-content: center; gap: 10px; padding: 10px;
  border: 4px dashed var(--line); border-radius: var(--radius);
}
.sum { font-size: clamp(.9rem, 4.2cqh, 1.6rem); text-align: center; color: var(--text); }
.sum.empty { opacity: .6; }
.bank-wrap {
  display: flex; align-items: center; min-height: 18cqh;
  background: var(--panel); border: 4px solid var(--line); border-radius: var(--radius); padding: 8px 14px;
}
.bank { display: flex; flex-wrap: wrap; gap: 10px; }
/* Coins: real colors and sizes, with their value written on them. */
.coin {
  --size: clamp(52px, 11cqh, 84px);
  width: var(--size); height: var(--size); flex: none;
  display: inline-grid; place-items: center; border-radius: 50%;
  font-size: calc(var(--size) * .3); line-height: 1; color: #2b2b2b;
  border: 4px solid rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .45), 3px 3px 0 var(--ink);
  cursor: pointer; touch-action: none;
}
.coin-penny { background: radial-gradient(circle at 35% 30%, #f3b27a, #c46a2b 70%); }
.coin-nickel { --size: clamp(58px, 12.5cqh, 94px); background: radial-gradient(circle at 35% 30%, #f4f4f4, #a9adb3 70%); }
.coin-dime { --size: clamp(48px, 10cqh, 76px); background: radial-gradient(circle at 35% 30%, #fbfbfb, #b8bcc2 70%); }
.coin-quarter { --size: clamp(64px, 14cqh, 104px); background: radial-gradient(circle at 35% 30%, #ffffff, #9ea3aa 70%); }
.coin.kb, .btn.kb { outline: 5px solid var(--pink); outline-offset: 4px; }
.coin.wrong { animation: wiggle .5s ease-in-out; }
.howto-pic .coin { cursor: default; }
.pic-pet { font-size: 4rem; line-height: 1; font-family: system-ui, sans-serif; }
.pic-sum { font-size: 1.4rem; }
.hearts-pic { font-size: 2.6rem; color: var(--star); letter-spacing: 6px; font-family: system-ui, sans-serif; }
.end-house { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 2.6rem; margin: 6px 0 8px; font-family: system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) {
  .coin.wrong { outline: 5px dashed var(--pink); outline-offset: 2px; }
  .pet-spot.bought .pet { opacity: 0; }
}

/* ---- Candy Claw (the claw machine) ---- */
#play[data-kind="claw"] .board {
  display: flex; flex-direction: column; align-items: center; gap: 2cqh;
  aspect-ratio: auto; width: min(100cqw, 1000px); height: 100cqh;
  padding: 2cqh 2cqw;
}
.claw { display: contents; }
.machine-wrap { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; container-type: size; }
.machine {
  --n: 4;
  position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1;
  background: var(--tile); border: 4px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .25);
}
.floor { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); }
.cell {
  display: grid; place-items: center; line-height: 1;
  font-size: calc(min(100cqw, 100cqh) / var(--n) * .55); font-family: system-ui, sans-serif;
  border: 2px dashed color-mix(in srgb, var(--line) 35%, transparent);
}
.cell.start { background: color-mix(in srgb, var(--pop) 30%, transparent); }
.cell.wall {
  margin: 6%; border: 4px solid var(--ink); border-radius: calc(var(--radius) * .5);
  background: repeating-linear-gradient(0deg, #b5563a 0 22%, #7a2f1c 22% 26%), #b5563a;
}
.cell.worm.wiggle { animation: wiggle .5s ease-in-out 2; }
.claw-piece {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  width: calc(100% / var(--n)); height: calc(100% / var(--n));
  display: grid; place-items: center;
  transform: translate(calc(var(--c, 0) * 100%), calc(var(--r, 0) * 100%));
  transition: transform .32s ease-in-out;
}
.claw-piece.no-anim { transition: none; }
.claw-piece img { width: 88%; height: 88%; filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, .25)); transition: transform .3s; }
.claw-piece .held { position: absolute; bottom: 4%; font-size: calc(min(100cqw, 100cqh) / var(--n) * .4); font-family: system-ui, sans-serif; line-height: 1; }
.claw-piece.drop img { animation: drop .7s ease-in-out; }
@keyframes drop { 50% { transform: scale(.7); } }
.claw-piece.got img, .claw-piece.got .held { animation: lift 1.2s ease-in forwards; }
@keyframes lift { 40% { transform: scale(1.2); } 100% { transform: translateY(-40%) scale(1.2); } }
.claw-piece.bump img { animation: wiggle .5s ease-in-out; }
.claw-controls { width: 100%; display: flex; align-items: center; justify-content: center; gap: 3cqw; flex-wrap: wrap; }
.plan { display: grid; grid-template-columns: repeat(4, auto); gap: 8px; }
.claw-card {
  width: clamp(44px, 8.5cqh, 66px); aspect-ratio: 1; padding: 0;
  display: inline-grid; place-items: center;
  font: 900 clamp(1.3rem, 5cqh, 2.2rem)/1 system-ui, sans-serif;
  color: var(--ink); background: var(--pop); border: 4px solid var(--ink); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--pink); cursor: pointer; touch-action: none;
}
.claw-card.empty { background: transparent; border: 3px dashed var(--line); box-shadow: none; cursor: default; }
.claw-card.pop { animation: arrive .25s ease-out; }
.claw-card.now { transform: translateY(-8px) scale(1.12); outline: 5px solid var(--pink); outline-offset: 3px; }
.claw-card.done { opacity: .45; }
.claw-card.gone { opacity: .35; border-style: dashed; }
.claw.running .claw-card, .claw.running .pad-btn { cursor: default; }
.claw.running .pad { opacity: .5; }
.pad { display: grid; grid-template-columns: repeat(3, clamp(54px, 10cqh, 76px)); grid-template-rows: repeat(2, clamp(54px, 10cqh, 76px)); gap: 6px; }
.pad-btn { min-width: 0; min-height: 0; padding: 0; font: 900 clamp(1.4rem, 5cqh, 2.2rem)/1 system-ui, sans-serif; touch-action: none; }
.pad .up { grid-column: 2; grid-row: 1; }
.pad .left { grid-column: 1; grid-row: 2; }
.pad .down { grid-column: 2; grid-row: 2; }
.pad .right { grid-column: 3; grid-row: 2; }
.pad .pad-clear { grid-column: 3; grid-row: 1; min-height: 0; padding: 0 4px; font-size: .6rem; }
.howto-pic .claw-card { cursor: default; }
.pic-claw { width: 90px; height: 90px; }
.pic-big { font-size: 4rem; line-height: 1; font-family: system-ui, sans-serif; }
.end-candy { font-size: 2rem; line-height: 1.2; margin: 6px 0 8px; font-family: system-ui, sans-serif; word-break: break-all; }
/* Wide screens: the machine on the left, cards and arrows on the right. */
@container (min-aspect-ratio: 5/4) {
  #play[data-kind="claw"] .board { flex-direction: row; }
  .claw-controls { width: auto; flex-direction: column; flex: none; }
  .machine-wrap { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .claw-piece.bump img, .cell.worm.wiggle { outline: 5px dashed var(--pink); }
  .claw-card.now { transform: none; }
}