@font-face {
  font-family: 'Press Start 2P';
  src: url('assets/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --bg: #140f24;
  --bg2: #221840;
  --ink: #0b0818;
  --white: #fff8ec;
  --gold: #ffcc33;
  --gold2: #e08a12;
  --red: #ff4f5e;
  --pink: #ff5fa8;
  --cyan: #3ee6ff;
  --green: #5ff27a;
  --purple: #8b5cff;
  --pixel: 'Press Start 2P', monospace;
  --body: 'VT323', 'Courier New', monospace;
  --px: 4px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--body);
  font-size: 22px;
  line-height: 1.2;
  overflow-x: hidden;
  -webkit-font-smoothing: none;
}
button { font: inherit; color: inherit; }
img { image-rendering: pixelated; }

/* ---------- background layers ---------- */
#bg, #fx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#bg { z-index: 0; image-rendering: pixelated; }
#fx { z-index: 1; image-rendering: pixelated; }
.crt {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 4px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(5,2,15,.75) 100%);
  mix-blend-mode: multiply;
}

header, main, footer { position: relative; z-index: 3; }

/* ---------- HUD ---------- */
.hud {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px clamp(16px, 3vw, 32px);
  font-family: var(--pixel); font-size: 12px;
}
.hud-left, .hud-right { display: flex; align-items: center; gap: 14px; }
.hearts { display: flex; gap: 6px; }
.heart, .coin { display: inline-block; width: 28px; height: 24px; background-size: 100% 100%; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 var(--ink)); }
.heart { animation: beat 1.6s steps(2) infinite; }
.heart:nth-child(2) { animation-delay: .2s; } .heart:nth-child(3) { animation-delay: .4s; }
@keyframes beat { 50% { transform: scale(1.12); } }
.coin { width: 18px; height: 24px; animation: spin 1s steps(4) infinite; }
@keyframes spin { 0%,100% { transform: scaleX(1); } 25% { transform: scaleX(.6); } 50% { transform: scaleX(.15); } 75% { transform: scaleX(.6); } }
.coins { display: flex; align-items: center; gap: 8px; text-shadow: 3px 3px 0 var(--ink); }

.qblock {
  width: 40px; height: 40px; padding: 0; cursor: pointer; position: relative;
  background: linear-gradient(var(--gold), var(--gold2));
  border: 3px solid var(--ink);
  box-shadow: inset 3px 3px 0 #fff3a0, inset -3px -3px 0 #a3530a, 3px 3px 0 var(--ink);
  font-family: var(--pixel); font-size: 18px; color: #fff; text-shadow: 2px 2px 0 #a3530a;
}
.qblock span { display: block; animation: qblink 1.2s steps(1) infinite; }
@keyframes qblink { 50% { opacity: .55; } }
.qblock.bump { animation: bump .22s steps(3); }
@keyframes bump { 50% { transform: translateY(-10px); } }
.coin-pop { position: absolute; left: 50%; top: -6px; width: 18px; height: 24px; margin-left: -9px; background-size: 100% 100%; image-rendering: pixelated; pointer-events: none; animation: coinpop .55s steps(8) forwards; }
@keyframes coinpop { 0% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(-46px); opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }

.hud-btn {
  font-family: var(--pixel); font-size: 10px; cursor: pointer;
  padding: 9px 10px; background: var(--bg2); color: var(--white);
  border: 3px solid var(--white); box-shadow: 3px 3px 0 var(--ink);
}
.hud-btn:hover, .hud-btn:focus-visible { background: var(--pink); outline: none; }
.hud-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.hud-btn b { color: var(--gold); font-weight: normal; }

/* ---------- hero ---------- */
.hero { text-align: center; padding: clamp(8px, 3vh, 36px) 16px 8px; }
.logo {
  margin: 0; font-family: var(--pixel); font-weight: normal;
  font-size: clamp(26px, 7.2vw, 84px); line-height: 1.1; letter-spacing: .02em;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .5em;
}
.logo .word { display: inline-flex; }
.logo .ch {
  display: inline-block; color: var(--c);
  text-shadow:
    0 .06em 0 var(--d), .04em .1em 0 var(--d), .08em .14em 0 var(--ink),
    0 0 .45em color-mix(in srgb, var(--c) 55%, transparent);
  animation: wave 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.14s);
}
@keyframes wave { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-.12em) rotate(2deg); } }
.tagline { font-family: var(--pixel); font-size: clamp(9px, 1.4vw, 13px); color: #cfc6ff; margin: 18px 0 0; text-shadow: 2px 2px 0 var(--ink); letter-spacing: .08em; }
.press { font-family: var(--pixel); font-size: clamp(11px, 1.8vw, 16px); color: var(--gold); margin: 22px 0 0; text-shadow: 3px 3px 0 var(--ink), 0 0 18px rgba(255,204,51,.6); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 60% { opacity: 0; } }

/* ---------- deck ---------- */
.deck { display: flex; justify-content: center; }
.row {
  display: flex; flex-direction: column; align-items: center;
  gap: 64px; padding: 76px 16px 30px; width: 100%;
  perspective: 1200px;
}

/* Desktop "fit" mode: the whole page fills exactly one screen, the card row is zoomed to fit (set in app.js) */
html.fit, html.fit body { height: 100%; overflow: hidden; }
html.fit body { display: flex; flex-direction: column; height: 100dvh; }
html.fit main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.fit .deck { flex: 1; min-height: 0; align-items: center; }
html.fit .row { flex-direction: row; align-items: stretch; flex: none; width: auto; gap: 48px; padding: 72px 24px 22px; }
html.fit .card { flex: none; width: 380px; }
html.fit .hud { padding-top: 10px; padding-bottom: 0; }
html.fit .hero { padding: 0 16px; }
html.fit .logo { font-size: clamp(22px, min(6.4vw, 8.2vh), 84px); }
html.fit .tagline { margin-top: min(16px, 1.6vh); font-size: clamp(8px, min(1.3vw, 1.6vh), 13px); }
html.fit .press { margin-top: min(18px, 1.8vh); font-size: clamp(9px, min(1.6vw, 2vh), 16px); }
html.fit .help { padding: 0 16px min(14px, 1.4vh); }
html.fit .dialog { min-height: 0; padding: min(14px, 1.4vh) 22px min(16px, 1.6vh); font-size: clamp(9px, min(1.3vw, 1.6vh), 12px); }
html.fit .foot { padding: 4px clamp(16px, 3vw, 32px) min(12px, 1.2vh); }

.card {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --lift: 0px; --rot: 0deg;
  position: relative; width: min(400px, 100%);
  transform-style: preserve-3d;
  animation: idle 4s ease-in-out infinite; animation-delay: var(--delay, 0s);
  outline: none; cursor: pointer;
}
@keyframes idle { 0%,100% { translate: 0 0; rotate: var(--rot); } 50% { translate: 0 -8px; rotate: calc(var(--rot) * -1); } }
.card-tilt {
  position: relative;
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease-out, filter .2s;
  filter: drop-shadow(8px 10px 0 rgba(5,2,15,.7));
  will-change: transform;
}
.card.is-hot { animation-play-state: paused; z-index: 5; }
.card.is-hot .card-tilt { --lift: -14px; filter: drop-shadow(10px 18px 0 rgba(5,2,15,.6)) drop-shadow(0 0 26px var(--glow)); }
.card.is-sel .card-tilt { filter: drop-shadow(10px 18px 0 rgba(5,2,15,.6)) drop-shadow(0 0 26px var(--glow)); }

/* pixel-stepped corners */
.face {
  position: relative; overflow: hidden;
  clip-path: polygon(0 12px, 4px 12px, 4px 8px, 8px 8px, 8px 4px, 12px 4px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 4px, calc(100% - 8px) 4px, calc(100% - 8px) 8px, calc(100% - 4px) 8px, calc(100% - 4px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 4px) calc(100% - 12px), calc(100% - 4px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 4px), 8px calc(100% - 4px), 8px calc(100% - 8px), 4px calc(100% - 8px), 4px calc(100% - 12px), 0 calc(100% - 12px));
  background: var(--frame);
  padding: 8px;
}
.face-in {
  position: relative; background: var(--paper); color: var(--text);
  padding: 14px 14px 16px;
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
}
/* holographic shine (Balatro foil) */
.shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 4; mix-blend-mode: soft-light; opacity: 0; transition: opacity .25s;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.75), rgba(255,255,255,0) 45%),
    linear-gradient(115deg, transparent 20%, rgba(255,95,168,.55) 36%, rgba(62,230,255,.55) 50%, rgba(255,204,51,.55) 64%, transparent 80%);
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, var(--mx) var(--my);
}
.card.is-hot .shine, .card.is-sel .shine { opacity: .9; }

.banner {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 10px 12px; margin: 0 0 12px;
  font-family: var(--pixel); font-weight: normal; font-size: 18px; letter-spacing: .04em;
}
.media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mediabg);
}
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.media .pv { opacity: 0; }
.card.is-hot .media .pv.ready { opacity: 1; }
.media .static {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 2;
  background-image: var(--noise); background-size: 128px 128px; image-rendering: pixelated; mix-blend-mode: hard-light;
}
.media .static.on { animation: staticflash .28s steps(4) forwards; }
@keyframes staticflash { 0% { opacity: .95; background-position: 0 0; } 33% { background-position: 40px 70px; } 66% { opacity: .7; background-position: 90px 20px; } 100% { opacity: 0; background-position: 10px 100px; } }
.media .scan { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.12) 2px 3px); }
.rec {
  position: absolute; left: 8px; top: 8px; z-index: 4; display: flex; align-items: center; gap: 6px;
  font-family: var(--pixel); font-size: 8px; color: #fff; background: rgba(0,0,0,.55); padding: 5px 6px;
  opacity: 0; transition: opacity .15s;
}
.rec::before { content: ''; width: 8px; height: 8px; background: var(--red); animation: blink .9s steps(1) infinite; }
.card.is-hot .rec { opacity: 1; }
.sprite-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; image-rendering: pixelated; }

.mascot {
  position: absolute; left: 50%; top: 0; z-index: -1; width: 72px; height: 72px; margin-left: -36px;
  background-size: 100% 100%; image-rendering: pixelated;
  transform: translateY(20px); transition: transform .3s cubic-bezier(.3,1.8,.5,1);
  filter: drop-shadow(4px 4px 0 rgba(5,2,15,.6));
}
.card.is-hot .mascot { transform: translateY(-58px); animation: hop .5s steps(2) .3s infinite; }
@keyframes hop { 50% { translate: 0 -6px; } }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.tag { font-family: var(--pixel); font-size: 8px; padding: 6px 7px 5px; }
.desc { margin: 0 0 12px; font-size: 22px; line-height: 1.05; min-height: 3.2em; }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin: 0 0 14px; font-family: var(--pixel); font-size: 8px; }
.pips { display: flex; gap: 3px; }
.pips i { width: 14px; height: 10px; background: var(--pipoff); }
.pips i.on { background: var(--pipon); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.card.is-hot .pips i.on { animation: pipfill .35s steps(2) backwards; animation-delay: calc(var(--n) * 50ms); }
@keyframes pipfill { from { background: var(--pipoff); } }
.meta { display: flex; justify-content: space-between; font-family: var(--pixel); font-size: 8px; opacity: .8; margin: 0 0 12px; gap: 8px; flex-wrap: wrap; }
.actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--pixel); font-size: 14px; text-decoration: none; cursor: pointer;
  padding: 14px 12px 12px; border: 0;
}
.btn.info { font-size: 11px; padding: 14px 14px 12px; }
.btn .tri { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.card.is-hot .btn.play .tri, .card.is-sel .btn.play .tri { animation: nudge .5s steps(2) infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }
.btn:active { transform: translateY(3px); }
.btn:focus-visible { outline: 3px dashed var(--gold); outline-offset: 3px; }

/* ===== Theme: BugBloom (cream paper, hedge green, gold) ===== */
.t-bugbloom {
  --frame: #2d3a2e; --paper: #f7f1e3; --text: #2d3a2e; --mediabg: #ebe2cc; --glow: rgba(156,176,67,.75);
  --pipon: #5d9a5f; --pipoff: #d3c5a3; --rot: -1.5deg;
}
.t-bugbloom .face-in { background: repeating-linear-gradient(to bottom, #f7f1e3 0 6px, #f1e9d6 6px 7px); }
.t-bugbloom .banner {
  color: #f7f1e3; background: #4b7354; text-shadow: 0 3px 0 #2f4a36;
  box-shadow: inset 0 -5px 0 #3c5d45, inset 0 3px 0 #5e8862, 0 4px 0 #c8b88a;
  clip-path: polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px));
}
.t-bugbloom .media { box-shadow: inset 0 0 0 4px #2d3a2e; }
.t-bugbloom .media img { padding: 4px; }
.t-bugbloom .tag { background: #e6dbc0; color: #45574a; box-shadow: inset 0 -3px 0 #d3c5a3; }
.t-bugbloom .tag:nth-child(1) { background: #7fa36f; color: #f7f1e3; box-shadow: inset 0 -3px 0 #4b7354; }
.t-bugbloom .tag:nth-child(2) { background: #5f8fa8; color: #f7f1e3; box-shadow: inset 0 -3px 0 #3f6a80; }
.t-bugbloom .tag:nth-child(3) { background: #d6a23a; color: #f7f1e3; box-shadow: inset 0 -3px 0 #a87a22; }
.t-bugbloom .btn { border-radius: 6px; }
.t-bugbloom .btn.play { background: #4b7354; color: #f7f1e3; box-shadow: inset 0 -5px 0 #2f4a36, inset 0 3px 0 #5e8862, 0 0 0 3px #2d3a2e; text-shadow: 0 2px 0 #2f4a36; }
.t-bugbloom .btn.play:hover, .t-bugbloom .btn.play:focus-visible { background: #5d9a5f; }
.t-bugbloom .btn.info { background: #d6a23a; color: #f7f1e3; box-shadow: inset 0 -5px 0 #a87a22, 0 0 0 3px #2d3a2e; text-shadow: 0 2px 0 #a87a22; }
.t-bugbloom .rarity { color: #b0821f; }

/* ===== Theme: Hardwood Legacy (Game Boy navy, white double border, orange) ===== */
.t-hardwood {
  --frame: #ffffff; --paper: #1e3a8a; --text: #ffffff; --mediabg: #1e3a8a; --glow: rgba(249,115,22,.8);
  --pipon: #f97316; --pipoff: #142a63; --rot: 1.5deg;
}
.t-hardwood .face { padding: 4px; }
.t-hardwood .face-in { box-shadow: inset 0 0 0 4px #1e3a8a, inset 0 0 0 7px #ffffff; padding: 18px 18px 20px; }
.t-hardwood .banner { color: #f97316; background: #142a63; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #142a63, inset 0 0 0 7px #fff; font-size: 17px; text-shadow: 3px 3px 0 #0b1026; }
.t-hardwood .banner .w { color: #fff; margin-right: .5em; }
.t-hardwood .media { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #1e3a8a, inset 0 0 0 7px #fff; }
.t-hardwood .media img { padding: 8px; }
.t-hardwood .tag { background: #142a63; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.t-hardwood .tag:nth-child(1) { background: #f97316; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.t-hardwood .desc { font-size: 21px; }
.t-hardwood .stats { color: #fff; }
.t-hardwood .btn.play { background: #1e3a8a; color: #fff; box-shadow: inset 0 0 0 3px #fff, 4px 4px 0 #0b1026; }
.t-hardwood .btn.play:hover, .t-hardwood .btn.play:focus-visible { background: #f97316; }
.t-hardwood .btn.info { background: #142a63; color: #f97316; box-shadow: inset 0 0 0 3px #f97316, 4px 4px 0 #0b1026; }
.t-hardwood .btn.info:hover { background: #f97316; color: #fff; }
.t-hardwood .rarity { color: #f97316; }

/* ===== Locked card (card back) ===== */
.t-locked { --frame: #0b0818; --paper: #2a1f4d; --text: #cfc6ff; --glow: rgba(139,92,255,.8); --rot: -1deg; cursor: default; }
.t-locked .card-tilt, .t-locked .face { height: 100%; }
.t-locked .face-in {
  height: 100%; min-height: 420px;
  background:
    repeating-conic-gradient(from 45deg, #2a1f4d 0 25%, #33265e 0 50%) 0 0 / 24px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 34px 18px;
}
.t-locked .lockbox { width: 128px; height: 128px; display: grid; place-items: center; font-family: var(--pixel); font-size: 54px; color: #fff; background: linear-gradient(var(--gold), var(--gold2)); border: 5px solid var(--ink); box-shadow: inset 6px 6px 0 #fff3a0, inset -6px -6px 0 #a3530a, 6px 6px 0 var(--ink); text-shadow: 4px 4px 0 #a3530a; animation: qblink 1.4s steps(1) infinite; }
.t-locked h3 { font-family: var(--pixel); font-weight: normal; font-size: 16px; margin: 0; color: #fff; text-shadow: 3px 3px 0 var(--ink); }
.t-locked p { margin: 0; font-size: 22px; max-width: 26ch; }
.t-locked .chain { font-family: var(--pixel); font-size: 9px; color: var(--gold); }

/* ---------- dialog box (Zelda / Pokemon) ---------- */
.help { display: flex; justify-content: center; padding: 10px 16px 30px; }
.dialog {
  position: relative; width: min(760px, 100%); min-height: 96px;
  background: #0b0818; color: #fff; padding: 18px 22px 22px;
  border: 4px solid #fff; box-shadow: 0 0 0 4px #0b0818, 0 0 0 8px #8b5cff, 8px 12px 0 8px rgba(5,2,15,.6);
  font-family: var(--pixel); font-size: clamp(10px, 1.5vw, 13px); line-height: 2;
}
.dialog p { margin: 0; min-height: 2em; }
.dialog { cursor: pointer; user-select: none; }
.dialog:hover { box-shadow: 0 0 0 4px #0b0818, 0 0 0 8px var(--pink), 8px 12px 0 8px rgba(5,2,15,.6); }
.dialog:focus-visible { outline: 3px dashed var(--gold); outline-offset: 10px; }
.logo .ch { cursor: pointer; }
.logo .ch.jump { animation: jump .35s steps(4); }
@keyframes jump { 50% { transform: translateY(-.35em) rotate(-8deg); } }
.heart { cursor: pointer; }
.gallery img { cursor: zoom-in; }
.gallery img.big { grid-column: 1 / -1; grid-row: 1; aspect-ratio: auto; cursor: zoom-out; }
.dialog-caret { position: absolute; right: 16px; bottom: 10px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid var(--gold); animation: hop .6s steps(2) infinite; }

/* ---------- footer ---------- */
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px clamp(16px, 3vw, 32px) 26px; font-family: var(--pixel); font-size: 9px; color: #a99fd6; text-shadow: 2px 2px 0 var(--ink); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-back { position: absolute; inset: 0; background: rgba(8,4,20,.72); backdrop-filter: blur(3px); }
.modal-win {
  position: relative; width: min(820px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column;
  background: var(--paper, #1e3a8a); color: var(--text, #fff);
  border: 4px solid var(--frame, #fff); box-shadow: 0 0 0 4px var(--ink), 10px 14px 0 4px rgba(5,2,15,.7);
  animation: pop .25s steps(4);
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--headbg, #142a63); color: var(--headfg, #f97316); }
.modal-head h2 { margin: 0; font-family: var(--pixel); font-weight: normal; font-size: clamp(12px, 2.4vw, 18px); }
.modal-x { font-family: var(--pixel); font-size: 12px; width: 36px; height: 36px; padding: 0; cursor: pointer; background: transparent; color: inherit; border: 3px solid currentColor; }
.modal-x:hover { background: var(--headfg, #f97316); color: var(--headbg, #142a63); }
.modal-body { overflow-y: auto; padding: 16px 18px 20px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 16px; }
.gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border: 3px solid var(--frame, #fff); background: var(--mediabg); }
.gallery img { object-fit: contain; }
.modal-body h3 { font-family: var(--pixel); font-weight: normal; font-size: 11px; margin: 18px 0 8px; color: var(--accent, #f97316); }
.modal-body ul { margin: 0; padding: 0; list-style: none; }
.modal-body li { padding-left: 22px; position: relative; margin: 4px 0; font-size: 22px; line-height: 1.05; }
.modal-body li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 8px; height: 8px; background: var(--accent, #f97316); }
.modal-body .btn { margin-top: 18px; width: 100%; }

/* ---------- launch transition: pixel wipe ---------- */
.wipe { position: fixed; inset: 0; z-index: 50; pointer-events: none; display: grid; }
.wipe i { background: var(--wipe, #000); transform: scale(0); }
.wipe.go i { animation: wipein .5s steps(5) forwards; animation-delay: var(--d); }
@keyframes wipein { to { transform: scale(1.02); } }
.wipe .label { position: fixed; inset: 0; display: grid; place-items: center; font-family: var(--pixel); font-size: clamp(14px, 3vw, 28px); color: #fff; text-shadow: 4px 4px 0 #000; opacity: 0; }
.wipe.go .label { animation: lbl .2s steps(2) .55s forwards; }
@keyframes lbl { to { opacity: 1; } }

/* ---------- tip / donate ---------- */
.tip-btn {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--pixel); font-size: 10px; color: var(--ink);
  padding: 7px 12px 7px 8px; border: 3px solid var(--ink);
  background: linear-gradient(var(--gold), var(--gold2));
  box-shadow: inset 3px 3px 0 #fff3a0, inset -3px -3px 0 #a3530a, 3px 3px 0 var(--ink), 0 0 18px rgba(255,204,51,.45);
  animation: tipglow 2.4s ease-in-out infinite;
}
@keyframes tipglow { 50% { box-shadow: inset 3px 3px 0 #fff3a0, inset -3px -3px 0 #a3530a, 3px 3px 0 var(--ink), 0 0 30px rgba(255,204,51,.8); } }
.tip-btn:hover, .tip-btn:focus-visible { background: linear-gradient(#fff07a, var(--gold)); outline: none; transform: translateY(-2px); }
.tip-btn:active { transform: translate(2px, 2px); }
.cup { display: inline-block; width: 24px; height: 22px; background-size: 100% 100%; image-rendering: pixelated; }
.tip-hero { display: flex; justify-content: center; padding: 6px 0 4px; }
.tip-cup { width: 96px; height: 88px; background: var(--f0) center / 100% 100% no-repeat; image-rendering: pixelated; animation: cupsteam .9s steps(1) infinite, hop .6s steps(2) infinite; filter: drop-shadow(6px 6px 0 rgba(0,0,0,.45)); }
@keyframes cupsteam { 50% { background-image: var(--f1); } }
.t-tip .desc { font-size: 23px; text-align: center; max-width: 34ch; margin: 8px auto 0; }
.t-tip h3 { text-align: center; }
.tip-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tip-amt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; cursor: pointer;
  font-family: var(--pixel); font-size: 12px; color: #fff8ec; background: #1a1236;
  border: 3px solid #8b7fd0; box-shadow: 4px 4px 0 #0b0818; padding: 8px 4px;
}
.tip-amt:hover { border-color: var(--gold); }
.tip-amt.on { background: var(--gold); color: var(--ink); border-color: #fff3a0; box-shadow: 4px 4px 0 #0b0818, 0 0 18px rgba(255,204,51,.6); }
.tip-amt:focus-visible, .tip-amt:focus-within { outline: 3px dashed var(--gold); outline-offset: 3px; }
.cup-s { width: 24px; height: 22px; background-size: 100% 100%; image-rendering: pixelated; }
.tip-custom span { font-size: 9px; }
.tip-custom input {
  width: 100%; max-width: 90px; font-family: var(--pixel); font-size: 12px; text-align: center;
  color: inherit; background: rgba(0,0,0,.25); border: 2px solid currentColor; padding: 6px 2px; outline: none;
  -moz-appearance: textfield; appearance: textfield;
}
.tip-custom input::-webkit-outer-spin-button, .tip-custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tip-custom input::placeholder { color: inherit; opacity: .6; }
.t-tip .btn.tip-go { background: var(--gold); color: var(--ink); box-shadow: inset 0 -5px 0 var(--gold2), 0 0 0 3px var(--ink), 6px 6px 0 3px rgba(0,0,0,.4); }
.t-tip .btn.tip-go:hover { background: #fff07a; }
.t-tip .btn.tip-go.off { opacity: .5; cursor: not-allowed; }
.t-tip .btn.tip-go b { font-weight: normal; }
.tip-note { text-align: center; font-size: 19px; opacity: .75; margin: 12px 0 0; }
.tip-missing { opacity: 1; color: var(--gold); border: 3px dashed var(--gold); padding: 12px; margin-top: 18px; }
.rain-coin { position: fixed; top: -30px; z-index: 60; width: 18px; height: 24px; background-size: 100% 100%; image-rendering: pixelated; pointer-events: none; animation: rain 1.4s linear forwards; }
@keyframes rain { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- responsive ---------- */
@media (max-width: 900px) { .tip-btn span { display: none; } .tip-btn { padding: 6px; } }
@media (max-width: 560px) {
  .tip-amounts { grid-template-columns: 1fr 1fr; }
  .hud-left { gap: 8px; }
  body { font-size: 20px; }
  .hud { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .hud-left .hearts { gap: 3px; }
  .hud-right { gap: 6px; }
  .hud-btn { font-size: 8px; padding: 7px 6px; }
  .qblock { width: 32px; height: 32px; font-size: 14px; }
  .coins { gap: 4px; font-size: 10px; }
  .hearts .heart { width: 18px; height: 16px; }
  .tip-btn .cup { width: 20px; height: 18px; }
  .banner { font-size: 14px; }
  .gallery { grid-template-columns: 1fr; }
  .t-locked .face-in { min-height: 300px; }
  .card { animation: none; }
  .mascot { width: 56px; height: 56px; margin-left: -28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}