/* Candi's Swamp Hop — UI layer. The world is drawn on the canvas; every menu, HUD and sheet is DOM on top.
   Look: night swamp teal glass + candy pink, chunky "toy" buttons, Lilita One display / Fredoka text. */
@font-face { font-family: 'Lilita One'; src: url('../assets/fonts/LilitaOne.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Fredoka'; src: url('../assets/fonts/Fredoka.woff2') format('woff2'); font-weight: 300 700; font-display: block; }

:root {
  --swamp-950: #031416;
  --swamp-900: #062628;
  --swamp-800: #0a3a3d;
  --swamp-600: #17666a;
  --glass: rgba(6, 38, 40, 0.78);
  --glass-edge: rgba(190, 255, 245, 0.16);
  --pink: #ff4fb3;
  --pink-hi: #ff8fd0;
  --pink-deep: #b8186f;
  --candy-red: #e5354f;
  --moss: #a6e05a;
  --moss-deep: #4f8a22;
  --gold: #ffc839;
  --cream: #fff4fa;
  --muted: rgba(225, 250, 246, 0.66);
  --ink: #3a0a2a;
  --display: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --text: 'Fredoka', 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--swamp-950); }
body {
  display: flex; align-items: center; justify-content: center;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; /* holding to float is a long press: no iOS callout or magnifier */
  /* Desktop letterbox: a blurred, darkened swamp behind the portrait game. */
  background: radial-gradient(ellipse at 50% 40%, #0d4a4e 0%, var(--swamp-950) 70%);
}
#frame { position: relative; overflow: hidden; box-shadow: 0 0 80px rgba(0, 0, 0, 0.6); }
/* Starting up: just the swamp's dark colour (as the phones' launch screens) until the title art is in, so nothing
   half-drawn shows first (the desktop glow, or the play area before it has its size). */
html.booting body { background: var(--swamp-950); }
html.booting #frame { visibility: hidden; }
canvas { display: block; touch-action: none; }
/* The 3D swamp (world3d.js) sits under the game canvas, which stays on top for input and the 2D effects. */
#world3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#game { position: relative; z-index: 1; }

#ui {
  z-index: 2;
  position: absolute; inset: 0; pointer-events: none;
  font-family: var(--text); color: var(--cream); font-size: 16px; line-height: 1.3;
}
:where(#ui button) { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }
#ui button:focus-visible { outline: 0.15em solid var(--cream); outline-offset: 0.15em; }
#ui svg { display: block; }

/* ---------------------------------------------------------------- screens */
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.screen.show { opacity: 1; visibility: visible; transition: opacity .35s ease; pointer-events: auto; }
.screen.passthrough.show { pointer-events: none; }
.screen.passthrough.show .hit { pointer-events: auto; }

/* ---------------------------------------------------------------- buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  font-family: var(--display) !important; letter-spacing: 0.03em; text-transform: uppercase;
  border-radius: 1em; transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.btn:active, .btn.pressed { transform: translateY(0.18em); }
.btn-primary {
  font-size: 1.45em; padding: 0.38em 1.25em 0.42em; color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #ff9fd6 0%, var(--pink) 52%, #ea3d9e 100%);
  /* Fine light rim, thin candy edge, soft pink glow. */
  box-shadow: inset 0 0 0 0.07em rgba(255, 235, 247, 0.55), inset 0 0.1em 0 rgba(255, 255, 255, 0.5),
    0 0.1em 0 var(--pink-deep), 0 0.35em 1.1em rgba(255, 79, 179, 0.35), 0 0.3em 0.6em rgba(0, 0, 0, 0.35);
  text-shadow: 0 0.06em 0.12em rgba(120, 0, 60, 0.35);
  letter-spacing: 0.05em;
}
.btn-primary:active { transform: translateY(0.08em); box-shadow: inset 0 0 0 0.07em rgba(255, 235, 247, 0.55), inset 0 0.1em 0 rgba(255, 255, 255, 0.5),
    0 0.02em 0 var(--pink-deep), 0 0.2em 0.7em rgba(255, 79, 179, 0.3), 0 0.15em 0.4em rgba(0, 0, 0, 0.3); }
.btn-primary svg { width: 0.72em; height: 0.72em; }
/* An occasional shine sweeping across. */
.btn-primary::after {
  content: ""; position: absolute; inset: -20% auto -20% -40%; width: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg); animation: sheen 4.5s ease-in-out infinite;
}
.btn-secondary {
  font-size: 1.05em; padding: 0.6em 1em; color: var(--cream);
  background: linear-gradient(180deg, #1b6f73, #0f4d51);
  box-shadow: 0 0.2em 0 #062e31, 0 0.35em 0.7em rgba(0, 0, 0, 0.35), inset 0 0.1em 0 rgba(255, 255, 255, 0.2);
}
.btn-secondary:active { box-shadow: 0 0.04em 0 #062e31, inset 0 0.1em 0 rgba(255, 255, 255, 0.2); }
.btn-secondary svg { width: 1.15em; height: 1.15em; }
.icon-btn {
  width: 3em; height: 3em; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(30, 110, 114, 0.95), rgba(10, 62, 66, 0.95));
  box-shadow: 0 0.18em 0 #052628, 0 0.35em 0.7em rgba(0, 0, 0, 0.35), inset 0 0.1em 0 rgba(255, 255, 255, 0.22);
  transition: transform .08s ease;
}
.icon-btn:active { transform: translateY(0.15em) scale(0.97); }
.icon-btn svg { width: 1.35em; height: 1.35em; }
.icon-btn.small { width: 2.5em; height: 2.5em; }
.icon-btn.small svg { width: 1.15em; height: 1.15em; }
.labeled { display: flex; flex-direction: column; align-items: center; gap: 0.35em; font-weight: 600; font-size: 0.82em; color: var(--cream); letter-spacing: 0.02em; text-shadow: 0 0.1em 0.35em rgba(0, 0, 0, 0.9); }
.labeled .icon-btn { font-size: 1.22em; }

/* ---------------------------------------------------------------- title / tap to start */
#screen-title { background: var(--swamp-950); }
#screen-title .art { position: absolute; inset: 0; background: var(--art) center top / cover no-repeat; } /* top-anchored so the painted logo never crops */
/* Wide frames: show the whole cover, with a soft blurred copy filling the sides. */
#screen-title.wide .art { background-size: contain; background-position: center; }
#screen-title.wide::before { content: ""; position: absolute; inset: -5%; background: var(--art) center / cover no-repeat; filter: blur(18px) brightness(0.55); }
#screen-title .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3, 20, 22, 0.85) 92%); }
#screen-title .bottom { position: absolute; left: 0; right: 0; bottom: max(1.6em, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 0.9em; }
#screen-title .studio { width: 5.2em; opacity: 0.85; }
#screen-title .progress { width: 11em; height: 0.55em; border-radius: 1em; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
#screen-title .progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--pink-hi)); transition: width .2s; }
#screen-title .tap { font-family: var(--display); font-size: 1.6em; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.6); display: none; animation: pulse 1.4s ease-in-out infinite; }
#screen-title.ready .tap { display: block; }
#screen-title.ready .progress { display: none; }

/* ---------------------------------------------------------------- menu */
#screen-menu .logo { position: absolute; left: 50%; top: max(0.8em, env(safe-area-inset-top)); width: 19em; max-width: 92%; transform: translateX(-50%); animation: bob 4s ease-in-out infinite; filter: drop-shadow(0 0.4em 0.8em rgba(0, 0, 0, 0.45)); }
#screen-menu .logo img { display: block; width: 100%; }
/* Best stays where it was when Play sat above it: the group is shifted down by Play's height (and the gap). */
#screen-menu { container-type: inline-size; }
#screen-menu .center { --play-h: 4.034em; /* keeps Best where it was above the Play button */ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% - 2.95em + var(--play-h) + 1.1em)); display: flex; flex-direction: column; align-items: center; gap: 1.1em; }
#screen-menu .btn-primary { font-size: 1.75em; padding: 0.34em 1.45em 0.38em; animation: glow 2.6s ease-in-out infinite; }
#screen-menu .best-chip { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35em 0.9em 0.35em 0.4em; border-radius: 2em; background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 600; }
#screen-menu .best-chip b { font-family: var(--display); font-weight: 400; font-size: 1.25em; color: var(--gold); letter-spacing: 0.03em; }
#screen-menu .best-chip .medal { width: 2.4em; margin: -0.5em 0 -0.5em -0.15em; }
/* The menu buttons sit in a row on the swamp, fixed to the bottom of the screen. */
#screen-menu .nav { position: absolute; left: 0; right: 0; bottom: max(1.2em, env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 1.3em; }

/* ---------------------------------------------------------------- HUD */
#hud .top { position: absolute; left: 0; right: 0; top: max(0.6em, env(safe-area-inset-top)); display: grid; grid-template-columns: 3em 1fr 3em; align-items: start; padding: 0 max(0.8em, env(safe-area-inset-right)) 0 max(0.8em, env(safe-area-inset-left)); }
#hud .top [data-act=pause] { justify-self: end; }
#hud .score { text-align: center; font-family: var(--display); font-size: 3.6em; line-height: 1; color: #fff; letter-spacing: 0.02em;
  -webkit-text-stroke: 0.06em var(--ink); paint-order: stroke fill; text-shadow: 0 0.06em 0 var(--ink), 0 0.12em 0.25em rgba(0, 0, 0, 0.45); font-variant-numeric: tabular-nums; }
#hud .score.pop { animation: pop .3s ease-out; }
#hud .best { text-align: center; font-weight: 600; font-size: 0.8em; color: var(--muted); margin-top: 0.15em; letter-spacing: 0.04em; }
#hud .best b { color: var(--gold); font-weight: 700; }
#hud .combo { display: flex; justify-content: center; gap: 0.3em; margin-top: 0.45em; }
#hud .combo i { width: 0.95em; height: 0.6em; border-radius: 0.6em 0.6em 0.25em 0.25em; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 -0.1em 0 rgba(0, 0, 0, 0.25); transition: background .2s, transform .2s; }
#hud .combo i.on { background: linear-gradient(180deg, #c8f57f, var(--moss)); transform: translateY(-0.1em); box-shadow: 0 0 0.6em rgba(166, 224, 90, 0.7); }
#hud .combo.flash i { animation: comboflash .6s ease-out; }

#banner { position: absolute; left: 0; right: 0; top: 34%; text-align: center; pointer-events: none; opacity: 0; }
#banner.show { animation: banner 1.3s ease-out forwards; }
#banner .big { font-family: var(--display); font-size: 3.4em; line-height: 1; color: var(--moss); -webkit-text-stroke: 0.07em #1d3a0a; paint-order: stroke fill; text-shadow: 0 0.07em 0 #1d3a0a, 0 0 0.6em rgba(166, 224, 90, 0.6); }
#banner .small { font-family: var(--display); font-size: 1.25em; letter-spacing: 0.08em; color: #fff; -webkit-text-stroke: 0.08em var(--ink); paint-order: stroke fill; margin-top: 0.15em; }

/* ---------------------------------------------------------------- coach marks */
/* Tips sit just under the score, well clear of the stumps and the landing area. */
#coach { position: absolute; left: 0; right: 0; top: calc(max(0.6em, env(safe-area-inset-top)) + 7em); display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0.5em; padding: 0 1em; pointer-events: none; opacity: 0; transition: opacity .3s; }
#coach.show { opacity: 1; }
#coach .hand { flex: none; width: 2.6em; height: 2.6em; filter: drop-shadow(0 0.2em 0.3em rgba(0, 0, 0, 0.5)); }
#coach[data-step="hold"] .hand { animation: press 1.4s ease-in-out infinite; }
#coach[data-step="release"] .hand { animation: lift 0.9s ease-in-out infinite; }
#coach[data-step="moss"] .hand { display: none; }
#coach .bubble { max-width: 14em; text-align: center; padding: 0.5em 0.9em; border-radius: 1em; background: var(--cream); color: var(--ink); font-weight: 600; font-size: 0.95em; box-shadow: 0 0.3em 0.8em rgba(0, 0, 0, 0.35); }
#coach .bubble b { color: #d4157f; }

/* ---------------------------------------------------------------- sheets (pause, settings, credits, wardrobe, shop) */
.sheet-wrap { background: rgba(2, 14, 16, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1em; }
.card {
  position: relative; width: 100%; max-width: 19.5em; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.4em 1.25em 1.3em; border-radius: 1.5em; background: linear-gradient(180deg, rgba(14, 64, 68, 0.94), rgba(5, 33, 36, 0.96));
  border: 1px solid var(--glass-edge); box-shadow: 0 1.2em 2.5em rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(1.2em) scale(0.96); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.screen.show .card { transform: none; }
.card h2 { margin: 0 0 0.8em; text-align: center; font-family: var(--display); font-weight: 400; font-size: 1.9em; letter-spacing: 0.03em; line-height: 1; color: #fff; text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.35); }
.card .close { position: absolute; top: 0.7em; right: 0.7em; }
.card .stack { display: flex; flex-direction: column; gap: 0.7em; }
.card .row { display: flex; gap: 0.7em; justify-content: center; }
.card .row > .btn { flex: 1; }

.setting { display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; gap: 0.7em; padding: 0.7em 0.8em; border-radius: 1em; background: rgba(0, 0, 0, 0.22); }
.setting svg { width: 1.4em; height: 1.4em; color: var(--pink-hi); }
.setting label { font-weight: 600; }
.setting .val { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85em; min-width: 2.4em; text-align: right; }
.setting input[type=range] { grid-column: 1 / -1; width: 100%; height: 1.8em; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 100%; }
.setting input[type=range]::-webkit-slider-runnable-track { height: 0.55em; border-radius: 1em; background: linear-gradient(90deg, var(--pink) var(--p), rgba(255, 255, 255, 0.15) var(--p)); }
.setting input[type=range]::-moz-range-track { height: 0.55em; border-radius: 1em; background: linear-gradient(90deg, var(--pink) var(--p), rgba(255, 255, 255, 0.15) var(--p)); }
.setting input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.4em; height: 1.4em; margin-top: -0.43em; border-radius: 50%; background: #fff; box-shadow: 0 0.12em 0.3em rgba(0, 0, 0, 0.45), inset 0 -0.15em 0 #f3c6e0; }
.setting input[type=range]::-moz-range-thumb { width: 1.4em; height: 1.4em; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0.12em 0.3em rgba(0, 0, 0, 0.45); }
.toggle { width: 3em; height: 1.7em; border-radius: 1em; background: rgba(255, 255, 255, 0.18); position: relative; transition: background .2s; }
.toggle::after { content: ""; position: absolute; top: 0.2em; left: 0.2em; width: 1.3em; height: 1.3em; border-radius: 50%; background: #fff; box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.4); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.toggle[aria-checked=true] { background: var(--pink); }
.toggle[aria-checked=true]::after { transform: translateX(1.3em); }
.link-btn { font-weight: 600 !important; color: var(--muted) !important; font-size: 0.85em !important; padding: 0.5em !important; text-decoration: underline; text-underline-offset: 0.2em; }
.link-btn.danger.armed { color: #ff8a9b !important; }


.credits { text-align: center; display: flex; flex-direction: column; gap: 0.85em; }
.credits .role { font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink-hi); font-weight: 600; }
.credits .name { font-family: var(--display); font-size: 1.25em; letter-spacing: 0.03em; color: #fff; }
.credits hr { border: 0; height: 1px; background: var(--glass-edge); margin: 0.2em 0; }
.credits .note { font-size: 0.78em; color: var(--muted); }
.credits .privacy { align-self: center; }

/* ---------------------------------------------------------------- game over */
#screen-over { background: rgba(2, 14, 16, 0.45); display: flex; align-items: center; justify-content: center; padding: 1em; }
#screen-over .card { padding-top: 1.1em; }
#screen-over .headline { text-align: center; font-family: var(--display); font-size: 2.6em; line-height: 1; color: var(--pink); -webkit-text-stroke: 0.07em var(--ink); paint-order: stroke fill; text-shadow: 0 0.08em 0 var(--ink); letter-spacing: 0.02em; margin: 0 0 0.35em; transform: rotate(-3deg); }
#screen-over .quote { display: grid; grid-template-columns: 3.2em 1fr; gap: 0.6em; align-items: center; margin-bottom: 1em; }
#screen-over .quote .face { width: 3.2em; height: 3.2em; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffd2ea, var(--pink) 75%); overflow: hidden; position: relative; box-shadow: 0 0 0 0.15em #fff; }
#screen-over .quote .face img { position: absolute; width: 140%; left: -20%; top: 50%; transform: translateY(-44%); max-width: none; }
#screen-over .quote p { position: relative; margin: 0; padding: 0.55em 0.75em; border-radius: 0.9em; background: var(--cream); color: var(--ink); font-weight: 600; font-size: 0.85em; line-height: 1.25; }
#screen-over .quote p::before { content: ""; position: absolute; left: -0.45em; top: 50%; margin-top: -0.45em; border: 0.45em solid transparent; border-right-color: var(--cream); border-left: 0; }
#screen-over .scores { margin-top: 0.4em; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6em; padding: 0.8em 0.6em; border-radius: 1.1em; background: rgba(0, 0, 0, 0.25); margin-bottom: 0.8em; }
#screen-over .scores .k { font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--muted); text-align: center; }
#screen-over .scores .v { font-family: var(--display); font-size: 2.6em; line-height: 1.05; text-align: center; color: #fff; font-variant-numeric: tabular-nums; }
#screen-over .scores .v.gold { color: var(--gold); }
#screen-over .scores .mid { display: flex; flex-direction: column; align-items: center; gap: 0.25em; }
#screen-over .newbest { position: absolute; top: -1.25em; z-index: 1; left: 50%; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; font-family: var(--display); font-size: 1.05em; letter-spacing: 0.06em; padding: 0.3em 0.9em; border-radius: 0.6em; color: var(--ink); background: linear-gradient(180deg, #ffe58a, var(--gold)); box-shadow: 0 0.2em 0 #b8860f, 0 0.4em 0.8em rgba(0, 0, 0, 0.35); display: none; }
#screen-over.best .newbest { display: block; animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1) .35s both; }
#screen-over .board-line { display: flex; align-items: center; justify-content: center; gap: 0.45em; width: 100%; margin: -0.3em 0 0.8em; padding: 0.5em 0.8em !important;
  border-radius: 0.9em; background: linear-gradient(180deg, rgba(255, 200, 57, 0.22), rgba(255, 200, 57, 0.1)); box-shadow: inset 0 0 0 0.08em rgba(255, 200, 57, 0.5);
  color: #fff; font-weight: 700; font-size: 0.9em; line-height: 1.2; animation: stamp-in .4s ease-out both; }
#screen-over .board-line[hidden] { display: none; }
#screen-over .board-line svg { width: 1.2em; height: 1.2em; flex: none; color: var(--gold); }
@keyframes stamp-in { from { opacity: 0; transform: translateY(0.3em); } to { opacity: 1; transform: none; } }
#screen-over .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; margin-bottom: 1.1em; }
#screen-over .stats div { text-align: center; padding: 0.45em 0.2em; border-radius: 0.8em; background: rgba(255, 255, 255, 0.06); }
#screen-over .stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.35em; color: #fff; }
#screen-over .stats span { font-size: 0.68em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
#screen-over .actions { display: flex; align-items: center; justify-content: center; gap: 0.8em; }
#screen-over .actions .btn-primary { font-size: 1.3em; padding: 0.38em 1em 0.42em; }

/* medal */
.medal { display: block; width: 3.6em; height: auto; filter: drop-shadow(0 0.15em 0.25em rgba(0, 0, 0, 0.45)); }
.medal-name { font-size: 0.7em; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
#screen-over .medal { animation: spin-in .7s cubic-bezier(.2, 1.4, .4, 1) .2s both; }

/* ---------------------------------------------------------------- wardrobe + shop */
.wardrobe, .shop { max-width: 20.5em; }
.wardrobe .profile { display: grid; grid-template-columns: 4.6em 1fr; gap: 0.8em; align-items: center; margin: 0 2.4em 0.9em 0; }
.wardrobe .profile h2 { text-align: left; margin: 0 0 0.2em; font-size: 1.55em; }
.wardrobe .profile .tag { font-weight: 600; font-size: 0.85em; color: var(--pink-hi); }
.wardrobe .avatar { position: relative; width: 4.6em; height: 4.6em; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffd2ea, var(--pink) 75%); box-shadow: 0 0 0 0.16em #fff; overflow: hidden; }
.wardrobe .avatar img { position: absolute; height: 92%; left: 50%; bottom: -2%; transform: translateX(-50%); }
.wardrobe .avatar .crown { display: none; position: absolute; top: -0.05em; left: 50%; transform: translateX(-50%); width: 2.3em; height: auto; bottom: auto; filter: drop-shadow(0 0.1em 0.1em rgba(0, 0, 0, 0.4)); }
.supporter-on .wardrobe .avatar { overflow: visible; box-shadow: 0 0 0 0.16em var(--gold), 0 0 1em rgba(255, 200, 57, 0.5); }
.supporter-on .wardrobe .avatar .crown { display: block; top: -1.15em; }
.wardrobe .lifetime { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; margin-bottom: 0.9em; }
.wardrobe .lifetime div { text-align: center; padding: 0.45em 0.2em; border-radius: 0.8em; background: rgba(0, 0, 0, 0.22); }
.wardrobe .lifetime b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.35em; color: var(--gold); }
.wardrobe .lifetime span { font-size: 0.66em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.wardrobe h3, .shop h3 { margin: 0 0 0.45em; font-family: var(--display); font-weight: 400; font-size: 1.1em; letter-spacing: 0.04em; color: #fff; }
.wardrobe .items, .shop .items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5em; margin-bottom: 0.9em; }
.item { display: flex; flex-direction: column; align-items: center; gap: 0.3em; padding: 0.5em 0.3em 0.45em !important; border-radius: 1em; background: rgba(0, 0, 0, 0.22) !important; box-shadow: inset 0 0 0 0.12em transparent; transition: transform .08s, box-shadow .15s; }
.item:active { transform: scale(0.96); }
.item.on { box-shadow: inset 0 0 0 0.14em var(--pink), 0 0 0.8em rgba(255, 79, 179, 0.3); }
.item .pic { width: 100%; height: 4.4em; display: grid; place-items: center; border-radius: 0.7em; background: linear-gradient(180deg, #0e4f53, #082f32); overflow: hidden; }
.item .pic img { height: 4em; width: auto; max-width: 92%; object-fit: contain; }
.item .pic img.stump { height: auto; width: 30%; align-self: start; margin-top: 0.4em; }
.item .pic svg { width: 2.6em; height: 2.6em; }
.item .name { font-weight: 600; font-size: 0.85em; line-height: 1.1; }
.item .tag { display: inline-flex; align-items: center; gap: 0.25em; font-size: 0.72em; font-weight: 700; letter-spacing: 0.03em; color: var(--muted); }
.item .tag svg { width: 1em; height: 1em; }
.item.on .tag { color: var(--pink-hi); }
.item.owned .tag { color: var(--moss); }
.shop .restore { display: block; margin: 0 auto; }
.shop .sign { margin: -0.5em 1.6em 0.5em -0.4em; }
.shop .sign img { display: block; width: 100%; filter: drop-shadow(0 0.3em 0.5em rgba(0, 0, 0, 0.45)); }
.shop .packs { display: flex; flex-direction: column; gap: 0.5em; margin: -0.3em -0.6em 0.6em; }
.shop .pack { position: relative; display: block; width: 100%; padding: 0 !important; container-type: inline-size; transition: transform .08s; }
button.pack:active { transform: scale(0.97); }
.shop .pack img { display: block; width: 100%; filter: drop-shadow(0 0.4em 0.8em rgba(0, 0, 0, 0.45)); }
/* The price, written on the card's blank pill (same spot on every card). */
.shop .pack .pill { position: absolute; display: flex; align-items: center; justify-content: center; gap: 0.25em;
  padding-top: 0.16em; font-family: var(--display); font-size: 9cqw; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; color: #fff8e6;
  -webkit-text-stroke: 0.09em #6b0f3d; paint-order: stroke fill; text-shadow: 0 0.06em 0 #6b0f3d, 0 0.12em 0.2em rgba(0, 0, 0, 0.35); }
.shop .pack.owned .pill { font-size: 5.6cqw; }
.shop .pack.owned .pill.long { font-size: 4.4cqw; }
.shop .pack .pill svg { width: 0.8em; height: 0.8em; flex: none; }
.wardrobe .to-shop { width: 100%; }

/* ---------------------------------------------------------------- leaderboard */
.leaders { max-width: 20.5em; display: flex; flex-direction: column; }
.leaders h2 { display: flex; align-items: center; justify-content: center; gap: 0.3em; }
.leaders h2 .cup { width: 1.15em; filter: drop-shadow(0 0.08em 0 rgba(0, 0, 0, 0.35)); }
.leaders .tabs { display: flex; padding: 0.2em; gap: 0.2em; border-radius: 1em; background: rgba(0, 0, 0, 0.25); margin-bottom: 0.7em; }
.leaders .tabs button { flex: 1; padding: 0.45em 0 !important; border-radius: 0.8em; font-weight: 600 !important; color: var(--muted) !important; }
.leaders .tabs button[aria-selected=true] { background: var(--pink); color: #fff !important; box-shadow: 0 0.1em 0 var(--pink-deep); }
.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3em; max-height: 21em; overflow-y: auto; overscroll-behavior: contain; }
.board li { display: grid; grid-template-columns: 2.3em 2.1em 1fr auto; align-items: center; gap: 0.5em; padding: 0.35em 0.7em 0.35em 0.4em; border-radius: 0.8em; background: rgba(0, 0, 0, 0.2); }
.board .rank { position: relative; display: grid; place-items: center; }
.board .rank b { font-family: var(--display); font-weight: 400; font-size: 1.05em; color: var(--muted); }
.board .rank img { position: absolute; width: 2.1em; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 0.08em 0.06em rgba(0, 0, 0, 0.4)); }
.board .top .rank b { position: relative; color: var(--ink); font-size: 0.75em; top: 0.85em; left: 0.75em; min-width: 1.35em; line-height: 1.35em; text-align: center; border-radius: 50%; background: #fff; box-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.35); }
.board .top2 .rank img { filter: grayscale(1) brightness(1.25) drop-shadow(0 0.08em 0.06em rgba(0, 0, 0, 0.4)); }
.board .top3 .rank img { filter: sepia(0.6) hue-rotate(-25deg) saturate(1.3) brightness(0.85) drop-shadow(0 0.08em 0.06em rgba(0, 0, 0, 0.4)); }
.board .top1 { background: linear-gradient(90deg, rgba(255, 200, 57, 0.28), rgba(0, 0, 0, 0.2)); }
.board .top2 { background: linear-gradient(90deg, rgba(220, 220, 214, 0.2), rgba(0, 0, 0, 0.2)); }
.board .top3 { background: linear-gradient(90deg, rgba(242, 149, 95, 0.22), rgba(0, 0, 0, 0.2)); }
.board .me { box-shadow: inset 0 0 0 0.12em var(--pink); }
.leaders .pic { display: block; width: 2.1em; height: 2.1em; border-radius: 50%; overflow: hidden; position: relative; background: radial-gradient(circle at 50% 35%, #ffd2ea, var(--pink) 75%); box-shadow: 0 0 0 0.1em rgba(255, 255, 255, 0.8); }
.leaders .pic img { position: absolute; width: 140%; left: -20%; top: 50%; transform: translateY(-44%); max-width: none; }
.leaders .who { position: relative; display: block; width: 2.1em; height: 2.1em; flex: none; }
.leaders .who .crown { position: absolute; width: 1.15em; left: 50%; top: -0.55em; transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(0 0.06em 0.05em rgba(0, 0, 0, 0.45)); }
.board .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .score { font-family: var(--display); font-size: 1.15em; color: var(--gold); font-variant-numeric: tabular-nums; }
.leaders .you { display: flex; align-items: center; gap: 0.6em; margin-top: 0.7em; padding: 0.65em 0.7em; border-radius: 1em;
  background: linear-gradient(160deg, rgba(255, 79, 179, 0.3), rgba(255, 200, 57, 0.18)); box-shadow: inset 0 0 0 0.1em rgba(255, 200, 57, 0.5); }
.leaders .you > div { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.leaders .you b { font-family: var(--display); font-weight: 400; font-size: 1.1em; letter-spacing: 0.02em; }
.leaders .you small { font-size: 0.8em; color: var(--muted); font-weight: 500; }
.leaders .you .btn-primary { font-size: 1em; padding: 0.45em 0.9em 0.5em; }
.board .msg { display: block; padding: 1.4em 0.6em; text-align: center; color: var(--muted); background: none; }
.leaders .you .link-btn { font-size: 0.75em !important; }
.signin { text-align: center; max-width: 18em; }
.signin form { display: none; flex-direction: column; gap: 0.6em; }
.signin form.on { display: flex; }
.signin p { margin: 0; color: var(--muted); font-weight: 500; }
.signin p b { color: #fff; word-break: break-all; }
.signin input { font: inherit; font-size: 1.05em; padding: 0.6em 0.8em; border-radius: 0.8em; border: 0; outline: 0; color: var(--ink); background: var(--cream);
  box-shadow: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.25); text-align: center; -webkit-user-select: text; user-select: text; }
.signin input:focus { box-shadow: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.25), 0 0 0 0.15em var(--pink); }
.signin input[name=code] { font-family: var(--display); font-size: 1.6em; letter-spacing: 0.3em; }
.signin .hint { color: var(--muted); font-size: 0.75em; margin-top: -0.3em; }
.signin .btn-primary { font-size: 1.15em; }
.signin .btn-primary:disabled { filter: grayscale(0.6) brightness(0.8); }
.signin .providers { display: flex; flex-direction: column; gap: 0.5em; margin-bottom: 0.2em; }
.signin.no-providers .providers, .signin .provider[hidden] { display: none; }
.signin .provider { display: flex; align-items: center; justify-content: center; gap: 0.6em; font-size: 1em; padding: 0.6em 0.8em; border-radius: 0.8em; font-weight: 600; }
.signin .provider svg { width: 1.2em; height: 1.2em; flex: none; }
.signin .provider.google { background: #fff; color: #1f1f1f; }
.signin .provider.apple { background: #000; color: #fff; }
.signin .or { display: flex; align-items: center; gap: 0.6em; color: var(--muted); font-size: 0.8em; margin: 0.3em 0; }
.signin .or::before, .signin .or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.2); }
.signin .err { min-height: 1.2em; margin-top: 0.6em; color: #ffb3c4; font-weight: 600; font-size: 0.85em; }
#sheet-settings .link-btn[data-act=credits] { display: inline-flex; align-items: center; gap: 0.35em; align-self: center; }
#sheet-settings .link-btn[data-act=credits] svg { width: 1em; height: 1em; }

/* ---------------------------------------------------------------- test purchase, test ad */
/* "Keep going" on the game-over card: a quiet offer above Again that slides away after 8 seconds. */
.chance-btn { position: relative; display: none; width: 100%; margin: -0.3em 0 0.8em; padding: 0.75em 0.6em 0.9em !important; border-radius: 0.9em; overflow: visible;
  background: linear-gradient(180deg, rgba(255, 200, 57, 0.22), rgba(255, 200, 57, 0.1)) !important; box-shadow: inset 0 0 0 0.12em rgba(255, 200, 57, 0.6); color: #fff !important; }
.chance-btn.open { display: block; animation: chance-in .35s ease-out; }
.chance-btn .lbl { display: flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--display); font-size: 1.5em; letter-spacing: 0.03em; }
.chance-btn .lbl > span { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.chance-btn .lbl .floatie { position: relative; z-index: 1; width: 3.4em; height: auto; margin: -0.9em -0.1em -0.9em -0.6em; filter: drop-shadow(0 0.1em 0.15em rgba(0, 0, 0, 0.4)); animation: floatie-bob 1.8s ease-in-out infinite; }
.chance-btn .lbl small { margin-top: 0.2em; white-space: nowrap; font-family: var(--text); font-size: 0.46em; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
/* The timer bar runs along the bottom inside the rounded box; the floatie may bob out past the edges. */
.chance-btn .track { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.chance-btn .timer { position: absolute; left: 0; right: 0; bottom: 0; height: 0.22em; background: var(--gold); transform-origin: left; }
.chance-btn.open .timer { animation: drain 8s linear forwards; }
.chance-btn:active { transform: scale(0.98); }
.modal { z-index: 5; }
.buy { text-align: center; max-width: 17em; }
.buy h2 { margin-bottom: 0.3em; }
.buy p { margin: 0 0 0.6em; color: var(--muted); }
.buy .price { font-family: var(--display); font-size: 2.2em; color: var(--gold); margin-bottom: 0.4em; }
.buy .note { font-size: 0.75em; margin-bottom: 1em; }
#modal-ad { background: radial-gradient(ellipse at 50% 40%, #3a1030, #0a0208 75%); display: flex; flex-direction: column; }
#modal-ad .ad-top { display: flex; justify-content: space-between; align-items: center; padding: max(0.8em, env(safe-area-inset-top)) 1em 0.5em; font-weight: 600; font-size: 0.85em; color: var(--muted); }
#modal-ad .chip { padding: 0.15em 0.55em; border-radius: 0.4em; background: var(--gold); color: var(--ink); font-weight: 700; letter-spacing: 0.06em; }
#modal-ad .ad-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.6em; padding: 1em; }
#modal-ad .ad-candi { position: relative; width: 8em; height: 8em; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffd2ea, var(--pink) 75%); box-shadow: 0 0 0 0.2em var(--gold), 0 0 2.5em rgba(255, 200, 57, 0.45); animation: bob-ad 1.6s ease-in-out infinite; }
#modal-ad .ad-candi img { position: absolute; height: 92%; left: 50%; bottom: -2%; transform: translateX(-50%); }
#modal-ad .ad-candi .crown { position: absolute; top: -1.6em; left: 50%; transform: translateX(-50%); width: 3.4em; height: auto; bottom: auto; filter: drop-shadow(0 0.15em 0.15em rgba(0, 0, 0, 0.5)); }
#modal-ad .t { font-family: var(--display); font-size: 2em; color: #fff; line-height: 1.05; margin-top: 0.3em; }
#modal-ad p { margin: 0; color: var(--pink-hi); font-weight: 600; }
#modal-ad .fake-cta { margin-top: 0.6em; padding: 0.5em 1.2em; border-radius: 1em; font-family: var(--display); letter-spacing: 0.04em; color: #fff; background: linear-gradient(180deg, #ff9fd6, var(--pink)); box-shadow: 0 0.12em 0 var(--pink-deep); }
#modal-ad .note { margin-top: 1.2em; font-size: 0.72em; color: rgba(225, 250, 246, 0.45); }
#modal-ad .ad-bar { height: 0.35em; margin: 0 0 env(safe-area-inset-bottom); background: rgba(255, 255, 255, 0.12); }
#modal-ad .ad-bar i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
#modal-ad.show .ad-bar i { animation: fill var(--ad-time, 5s) linear forwards; }

/* ---------------------------------------------------------------- toast + fade */
#toast { position: absolute; left: 50%; bottom: max(1.2em, env(safe-area-inset-bottom)); transform: translate(-50%, 1em); padding: 0.55em 1em; border-radius: 2em; background: var(--cream); color: var(--ink); font-weight: 600; font-size: 0.9em; box-shadow: 0 0.3em 0.9em rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity .25s, transform .25s; white-space: nowrap; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#error { position: absolute; left: 0.8em; right: 0.8em; top: max(0.8em, env(safe-area-inset-top)); padding: 0.6em 0.8em; border-radius: 0.8em; background: #ffe3ea; color: #7a0021; font-size: 0.8em; font-weight: 600; pointer-events: auto; z-index: 10; }
#fade { position: absolute; inset: 0; background: var(--swamp-950); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
#fade.on { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- motion */
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bob-ad { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.4em); } }
/* Bobs on the water: rests a little low, rises gently and settles back. */
@keyframes floatie-bob { 0%, 100% { transform: translateY(0.22em) rotate(-5deg); } 50% { transform: translateY(-0.28em) rotate(4deg); } }
@keyframes play-pulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.04); filter: brightness(1.06) drop-shadow(0 0 0.5em rgba(255, 120, 200, 0.5)); } }
@keyframes chance-in { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.97); } }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0) rotate(-1deg); } 50% { transform: translate(-50%, 0.4em) rotate(1deg); } }
@keyframes glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08) drop-shadow(0 0 0.35em rgba(255, 120, 200, 0.55)); } }
@keyframes sheen { 0%, 60% { left: -40%; } 85%, 100% { left: 120%; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes comboflash { 0% { transform: scale(1.6); filter: brightness(2); } 100% { transform: scale(1); } }
@keyframes banner { 0% { opacity: 0; transform: scale(0.4) rotate(-6deg); } 18% { opacity: 1; transform: scale(1.12) rotate(2deg); } 30% { transform: scale(1) rotate(-1deg); } 75% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-1.5em); } }
@keyframes press { 0%, 100% { transform: translateY(0) scale(1); } 40%, 70% { transform: translateY(0.35em) scale(0.92); } }
@keyframes lift { 0%, 100% { transform: translateY(0.35em) scale(0.92); } 50% { transform: translateY(-0.2em) scale(1); } }
@keyframes stamp { from { opacity: 0; transform: translateX(-50%) rotate(-12deg) scale(2); } to { opacity: 1; transform: translateX(-50%) rotate(-2deg) scale(1); } }
@keyframes spin-in { from { transform: scale(0) rotate(-200deg); } to { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  #screen-menu .logo, #screen-menu .btn-primary, #screen-title .tap, #coach .hand, .btn-primary::after { animation: none !important; }
}