/* cape.monster: inked cartoon stickers on cream paper. Flat color, hard shadows, no glow. */

@font-face { font-family: "Luckiest Guy"; src: url("/fonts/luckiest-guy.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Creepster"; src: url("/fonts/creepster.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ink: #221a33;
  --paper: #fff3d6;
  --white: #fffdf6;
  --slime: #7bd957;
  --slime-dk: #4fae3b;
  --slime-lt: #e3fbd3;
  --bubble: #ff6fae;
  --bubble-lt: #ffd3e6;
  --tang: #ff8a3d;
  --sky: #5ec8ff;
  --sky-lt: #d8f3ff;
  --butter: #ffd23f;
  --butter-lt: #fff0b3;
  --grape: #9b6bff;
  --grape-dk: #7a4be0;
  --mouth: #5a1f3f;
  --tongue: #ff7fa8;
  --blush: #ff9cc0;
  --goo: #a6e57c;
  --rock: #d7c39a;
  --head: "Luckiest Guy", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --body: "Fredoka", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(34, 26, 51, 0.08) 1.3px, transparent 1.5px);
  background-size: 18px 18px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--grape-dk); }
:focus-visible { outline: 3px dashed var(--grape-dk); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2 { font-family: var(--head); font-weight: 400; line-height: 1.02; letter-spacing: 0.01em; margin: 0 0 14px; }
h2 { font-size: clamp(28px, 4.4vw, 40px); }
p { margin: 0 0 14px; }

/* ---- the ink ---- */
.ink { stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.ink-thin { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ink-line { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ink-line.thick { stroke-width: 7; }
.ink-slime { stroke: var(--ink); stroke-width: 4; vector-effect: non-scaling-stroke; }
.c-slime { fill: var(--slime); } .c-slime-dk { fill: var(--slime-dk); }
.c-bubble { fill: var(--bubble); } .c-bubble-lt { fill: var(--bubble-lt); }
.c-tang { fill: var(--tang); } .c-sky { fill: var(--sky); } .c-sky-lt { fill: var(--sky-lt); }
.c-butter { fill: var(--butter); } .c-grape { fill: var(--grape); } .c-grape-dk { fill: var(--grape-dk); }
.c-mouth { fill: var(--mouth); } .c-tongue { fill: var(--tongue); } .c-blush { fill: var(--blush); opacity: 0.85; }
.c-white { fill: #fff; } .c-goo { fill: var(--goo); } .c-rock { fill: var(--rock); }
.i-white { fill: #fff; stroke: var(--ink); stroke-width: 4; }
.i-ink { fill: var(--ink); } .i-shine { fill: #fff; }
.bub { fill: rgba(255, 255, 255, 0.75); }
.fish-text { font-family: var(--head); font-size: 17px; fill: var(--ink); }

/* Blinks. Each eye gets its own delay from app.js. */
.eye { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 5.4s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.08); } }

/* ---- top ---- */
.slime-top { position: absolute; top: 0; left: 0; width: 100%; height: 78px; z-index: 0; pointer-events: none; }
.top {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto; padding: 50px 16px 0;
  display: flex; flex-direction: column; align-items: center;
}
.sound {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  font-family: var(--head); font-size: 14px; color: var(--ink); cursor: pointer;
  background: var(--white); border: 3px solid var(--ink); border-radius: 999px; padding: 6px 11px 3px;
  box-shadow: 3px 3px 0 var(--ink);
}
.sound[aria-pressed="false"] { background: #e9e2d2; color: #6c6178; }
@media (min-width: 900px) { .top { padding-top: 22px; } }
/* the ticker: says what this is, over and over */
.ticker { position: relative; z-index: 4; overflow: hidden; background: var(--ink); border-bottom: 4px solid var(--ink); }
.ticker-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker span, .ticker i {
  font-family: var(--head); font-style: normal; font-size: 17px; line-height: 1; white-space: nowrap;
  padding: 10px 14px 7px; color: var(--butter);
}
.ticker span:nth-of-type(3n+2) { color: var(--slime); }
.ticker span:nth-of-type(3n) { color: var(--sky); }
.ticker b { font-weight: 400; color: var(--bubble); }
.ticker i { color: var(--white); padding: 10px 2px 7px; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.slime-top { top: 36px; }

/* the headline: CAPE CELLULAR REFERRAL CODES, impossible to miss */
.headline { margin: 6px auto 0; text-align: center; font-weight: 400; }
.hl-big {
  display: block; font-family: var(--head); font-size: clamp(31px, 8.6vw, 62px); line-height: 1; letter-spacing: 0.01em;
  color: var(--butter); -webkit-text-stroke: 0.12em var(--ink); paint-order: stroke fill; text-shadow: 0.06em 0.07em 0 var(--ink);
  transform: rotate(-1.5deg);
}
/* the headline's "Cape Cellular": the same hot pink and stars as every other one, only huge */
.cc-big {
  position: relative; display: inline-block; color: var(--bubble); margin-right: 0.12em;
  font-size: 1.16em; transform-origin: 50% 60%; will-change: transform;
  filter: drop-shadow(0 0 0.12em rgba(255, 111, 174, 0.85));
  animation: cc-pump 1.6s ease-in-out infinite;
}
/* the owner asked for this one to glow (2026-10-15): a pink and gold halo that swells with each pump.
   Only transform and opacity move, so phones animate it without repainting. */
.cc-glow {
  position: absolute; inset: -0.32em -0.4em; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 111, 174, 0.75), rgba(255, 210, 63, 0.4) 62%, rgba(255, 210, 63, 0));
  will-change: transform, opacity; animation: cc-halo 1.6s ease-in-out infinite;
}
@keyframes cc-pump { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes cc-halo { 0%, 100% { transform: scale(0.85); opacity: 0.25; } 50% { transform: scale(1.12); opacity: 0.95; } }
.cc-big::before, .cc-big::after, .hl-rest::after {
  content: ""; position: absolute; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C13.2 8.4 15.6 10.8 22.5 12C15.6 13.2 13.2 15.6 12 22.5C10.8 15.6 8.4 13.2 1.5 12C8.4 10.8 10.8 8.4 12 1.5Z' fill='%23ffd23f' stroke='%23221a33' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: cc-twinkle 2.4s ease-in-out infinite;
}
.cc-big::before { width: 0.62em; height: 0.62em; left: -0.42em; top: -0.34em; }
.cc-big::after { width: 0.4em; height: 0.4em; right: -0.12em; top: -0.3em; animation-duration: 2.9s; animation-delay: -1.1s; }
.hl-rest { position: relative; display: inline-block; }
.hl-rest::after { width: 0.46em; height: 0.46em; right: -0.4em; bottom: -0.12em; animation-duration: 3.3s; animation-delay: -2s; }
.hl-small {
  text-align: center; display: inline-block; margin-top: 12px; max-width: 34em; font-family: var(--body); font-size: clamp(16px, 2.3vw, 21px); font-weight: 600; line-height: 1.35;
  background: var(--white); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink);
  padding: 9px 16px 7px; transform: rotate(1deg); letter-spacing: 0;
}
.hero-title { font-family: var(--head); font-size: clamp(30px, 5.6vw, 52px); line-height: 1.02; margin: 0; }

/* THE GIANT GOOFY WORDMARK */
.wordmark {
  margin: 0; text-align: center; user-select: none; cursor: pointer;
  font-family: var(--head); line-height: 0.92; letter-spacing: -0.01em;
  font-size: clamp(62px, 19.5vw, 112px);
}
.wm-line { display: block; white-space: nowrap; }
@media (min-width: 760px) {
  .wordmark { font-size: min(9.4vw, 116px); }
  .wm-line { display: inline; }
}
.L {
  display: inline-block; position: relative;
  color: var(--c, var(--slime));
  -webkit-text-stroke: 0.085em var(--ink); paint-order: stroke fill;
  text-shadow: 0.05em 0.06em 0 var(--ink);
  rotate: var(--r, 0deg);
  animation: bobble 2.8s ease-in-out infinite; animation-delay: var(--d, 0s);
  transition: scale 0.15s ease;
  margin: 0 -0.015em;
}
.L:hover { scale: 1.14; }
.wordmark.jump .L { animation: boing 0.6s ease both; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes bobble { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.05em; } }
@keyframes boing { 0% { translate: 0 0; } 35% { translate: 0 -0.32em; scale: 1.1 0.92; } 70% { translate: 0 0.03em; scale: 0.94 1.08; } 100% { translate: 0 0; scale: 1; } }
.L1 { --c: var(--slime); --r: -7deg; --d: 0s; --n: 0; }
.L2 { --c: var(--bubble); --r: 5deg; --d: -0.3s; --n: 1; translate: 0 0.04em; }
.L3 { --c: var(--butter); --r: -3deg; --d: -0.6s; --n: 2; }
.L4 { --c: var(--sky); --r: 8deg; --d: -0.9s; --n: 3; }
.Ldot { --c: var(--tang); --r: 0deg; --d: -1.1s; --n: 4; }
.L5 { --c: var(--grape); --r: -6deg; --d: -1.3s; --n: 5; }
.LO { --d: -1.5s; --n: 6; width: 0.74em; height: 0.74em; vertical-align: -0.02em; margin: 0 0.02em; text-shadow: none; }
.LO svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0.05em 0.06em 0 var(--ink)); }
.LO .i-white { stroke-width: 9; }
.L6 { --c: var(--tang); --r: 4deg; --d: -1.7s; --n: 7; }
.L7 { --c: var(--slime); --r: -5deg; --d: -1.9s; --n: 8; translate: 0 0.03em; }
.L8 { --c: var(--bubble); --r: 7deg; --d: -2.1s; --n: 9; }
.L9 { --c: var(--butter); --r: -4deg; --d: -2.3s; --n: 10; }
.L10 { --c: var(--sky); --r: 9deg; --d: -2.5s; --n: 11; }

main { position: relative; z-index: 1; padding: 0 16px; }

/* ---- hero ---- */
/* the hero: the monster and the code card, front and center */
.hero { max-width: 760px; margin: 0 auto; padding: 14px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.hero .kicker { margin: 0; font-size: 22px; }
.hero-more { max-width: 40em; margin: 26px auto 0; text-align: center; }

/* the two big buttons under the headline: nobody has to read anything to find them */
.quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin: 16px 0 0; width: 100%; max-width: 540px; }
.quick .btn { flex: 1 1 140px; max-width: 250px; font-size: clamp(18px, 2.6vw, 24px); padding: 14px 14px 11px; box-shadow: 5px 5px 0 var(--ink); }
.quick .quick-get { background: var(--bubble); transform: rotate(-1.5deg); }
.quick .quick-share { background: var(--slime); transform: rotate(1.5deg); }
.quick .btn:hover { transform: rotate(0) translate(-1px, -1px); }
.hero + .feed { margin-top: 46px; }
.kicker, .level { font-family: "Creepster", var(--head); font-size: 26px; color: var(--grape-dk); margin: 0 0 4px; letter-spacing: 0.04em; }

.lede { font-size: clamp(18px, 2.2vw, 21px); max-width: 34em; }
.lede-2 { font-size: 17px; font-weight: 600; }
.level { font-size: 22px; margin: 0 0 4px; }
mark { background: linear-gradient(transparent 52%, var(--butter) 52%, var(--butter) 92%, transparent 92%); color: inherit; padding: 0 2px; }
/* "Cape Cellular", everywhere: a hot pink highlighter with a shine that sweeps across it and two
   inked stars that twinkle at its corners. app.js staggers each one with --tw so they never pulse in step. */
mark.cc {
  --tw: 0s;
  position: relative; display: inline-block; line-height: 1.22; font-weight: 700; padding: 0 4px; border-radius: 3px; white-space: nowrap;
  transform-origin: 50% 55%; filter: drop-shadow(0 0 4px rgba(255, 111, 174, 0.75));
  background:
    linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 255, 0.95) 44% 49%, transparent 53%) 100% 80% / 260% 80% no-repeat,
    linear-gradient(var(--bubble), var(--bubble)) 0 80% / 100% 80% no-repeat;
}
mark.cc.on { will-change: transform; animation: cc-shine 3.6s ease-in-out infinite, cc-beat 1.6s ease-in-out infinite; animation-delay: var(--tw), 0s; }
@keyframes cc-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
mark.cc::before, mark.cc::after {
  content: ""; position: absolute; pointer-events: none; animation-play-state: paused;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C13.2 8.4 15.6 10.8 22.5 12C15.6 13.2 13.2 15.6 12 22.5C10.8 15.6 8.4 13.2 1.5 12C8.4 10.8 10.8 8.4 12 1.5Z' fill='%23ffd23f' stroke='%23221a33' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: cc-twinkle 2.4s ease-in-out infinite;
}
mark.cc.on::before, mark.cc.on::after { animation-play-state: running; }
mark.cc::before { width: 0.9em; height: 0.9em; left: -0.5em; top: -0.55em; animation-delay: var(--tw); }
mark.cc::after { width: 0.66em; height: 0.66em; right: -0.42em; top: -0.3em; animation-duration: 3.1s; animation-delay: calc(var(--tw) - 1.3s); }
@keyframes cc-shine { 0% { background-position: 100% 80%, 0 80%; } 32%, 100% { background-position: 0% 80%, 0 80%; } }
@keyframes cc-twinkle {
  0%, 100% { transform: scale(0.15) rotate(-40deg); }
  22% { transform: scale(1.18) rotate(8deg); }
  34%, 58% { transform: scale(1) rotate(0deg); }
  80% { transform: scale(0.15) rotate(45deg); }
}
h2 mark.cc, h3 mark.cc, .hero-title mark.cc { font-weight: 400; }

/* the scoreboard */
.hud-wrap { position: relative; z-index: 2; width: 100%; max-width: 560px; margin: 34px auto 0; text-align: left; }
.blinky { position: absolute; width: 70px; top: -44px; left: 6px; z-index: 3; cursor: pointer; }
.hud {
  margin: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--ink); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--grape);
  overflow: hidden;
}
.hud > div { padding: 10px 8px 8px; text-align: center; border-left: 3px dashed rgba(255, 255, 255, 0.18); }
.hud > div:first-child { border-left: 0; }
.hud dt { font-family: var(--head); font-size: 12px; letter-spacing: 0.08em; color: var(--butter); }
.hud dd { margin: 2px 0 0; font-family: var(--mono); font-weight: 800; font-size: clamp(22px, 6vw, 30px); color: var(--slime); line-height: 1.1; }
.hud dd.bump { animation: bump 0.4s ease; }
#hud-spot { font-size: clamp(15px, 4.4vw, 26px); white-space: nowrap; }
@keyframes bump { 50% { transform: scale(1.35); color: var(--white); } }

/* the stage: Gloop holds the card */
.stage { position: relative; max-width: 520px; width: 100%; margin: 0 auto; padding-top: 6px; text-align: left; }
.gloop-btn { display: block; width: 56%; max-width: 270px; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; position: relative; z-index: 1; }
.gloop-btn:focus-visible { outline-offset: -6px; }
.gloop { display: block; width: 100%; height: auto; }
.gloop-btn.wiggle .gloop { animation: wiggle 0.6s ease; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) scale(1.04); } 60% { transform: rotate(5deg); } }
.bubble {
  position: absolute; z-index: 3; top: 0; right: 0; max-width: 46%;
  margin: 0; padding: 9px 13px 7px;
  font-family: var(--head); font-size: 16px; line-height: 1.15;
  background: var(--white); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(4deg);
}
.bubble::after {
  content: ""; position: absolute; left: 18px; bottom: -14px; width: 18px; height: 18px;
  background: var(--white); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: skewX(30deg) rotate(45deg);
}
.bubble.pop { animation: pop 0.35s ease; }
@keyframes pop { 0% { transform: rotate(4deg) scale(0.6); } 70% { transform: rotate(4deg) scale(1.08); } 100% { transform: rotate(4deg) scale(1); } }

.card {
  position: relative; z-index: 2; margin-top: -58px;
  background: var(--white); border: 5px solid var(--ink); border-radius: 28px; box-shadow: 9px 9px 0 var(--ink);
  padding: 30px 20px 18px;
}
.claw { position: absolute; top: -26px; width: 58px; z-index: 3; }
.claw-l { left: 15%; transform: rotate(-8deg); }
.claw-r { right: 15%; transform: rotate(8deg) scaleX(-1); }
.card-label { margin: 0 0 12px; text-align: center; }
#card-label {
  display: inline-block; font-family: var(--head); font-size: 17px; color: var(--white);
  background: var(--grape); border: 3px solid var(--ink); border-radius: 10px; padding: 5px 12px 2px;
  box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg);
}
.tiles { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 0 0 18px; }
.tile {
  display: grid; place-items: center; aspect-ratio: 3 / 4;
  font-family: var(--mono); font-weight: 800; font-size: clamp(21px, 6.2vw, 34px);
  background: var(--butter-lt); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink);
}
.tile:nth-child(odd) { transform: rotate(-2.5deg); }
.tile:nth-child(even) { transform: rotate(2deg) translateY(2px); }
.tiles.spin .tile { background: var(--white); color: var(--grape-dk); }
.card[data-state="back"] .tile {
  color: var(--white); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill;
  background: var(--grape) radial-gradient(rgba(255, 255, 255, 0.22) 2px, transparent 2.5px) 0 0 / 9px 9px;
}
.card[data-state="back"] .dealt-only { display: none; }
.card[data-state="dealt"] .btn-deal { display: none; }
.card.flip { animation: flip 0.6s ease; }
@keyframes flip { 0% { transform: perspective(900px) rotateY(0); } 50% { transform: perspective(900px) rotateY(90deg) scale(0.96); } 100% { transform: perspective(900px) rotateY(0); } }
.card .btn-deal {
  width: 100%; font-size: clamp(24px, 6.4vw, 32px); padding: 18px 16px 14px; border-width: 4px; border-radius: 18px;
  background: var(--bubble); box-shadow: 6px 6px 0 var(--ink); animation: throb 1.6s ease-in-out infinite;
}
.card .btn-deal:hover { animation-play-state: paused; }
@keyframes throb { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
.card .dealt-only .btn-dud { width: 100%; margin-top: 10px; background: var(--white); font-size: 15px; box-shadow: 3px 3px 0 var(--ink); }
.card .dealt-only .btn-friend { width: 100%; margin-top: 10px; background: var(--sky); font-size: 16px; box-shadow: 3px 3px 0 var(--ink); }
/* a peek card (past 12 cards an hour) can't be reported */
.card[data-peek="1"] .btn-dud { display: none; }
.go-row { display: flex; gap: 10px; flex-wrap: wrap; }
.go-row .btn-go { flex: 1 1 230px; }
.go-row .btn-copy { flex: 1 0 auto; }
.card-note { margin: 14px 0 0; text-align: center; font-size: 15px; font-weight: 500; min-height: 1.5em; }
.card.chomp { animation: chomp 0.5s ease-in forwards; }
.card.spit { animation: spit 0.45s ease-out; }
@keyframes chomp { 0% { transform: none; } 40% { transform: rotate(-4deg) scale(0.96); } 100% { transform: translateY(-60px) rotate(6deg) scale(0.5); opacity: 0; } }
@keyframes spit { 0% { transform: translateY(-50px) scale(0.6); opacity: 0; } 70% { transform: translateY(6px) scale(1.02); opacity: 1; } 100% { transform: none; } }

.mon-btn { padding: 0; margin: 0; border: 0; background: none; cursor: pointer; display: block; }
.mon-btn svg, .blinky { transition: transform 0.12s ease; }
.squish { animation: squish 0.45s ease; }
@keyframes squish { 0% { transform: scale(1); } 30% { transform: scale(1.18, 0.78); } 60% { transform: scale(0.9, 1.12); } 100% { transform: scale(1); } }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--head); font-size: 18px; line-height: 1.1; color: var(--ink); text-decoration: none; text-align: center;
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink);
  padding: 13px 16px 10px; cursor: pointer; background: var(--white);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); color: var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn[disabled] { opacity: 0.6; cursor: wait; }
.btn-go { background: var(--slime); font-size: 20px; }
.btn-copy { background: var(--butter); }
.btn-copy.copied { background: var(--slime); }

/* ---- panels ---- */
.panel {
  position: relative; max-width: 1000px; margin: 64px auto;
  background: var(--white); border: 4px solid var(--ink); border-radius: 30px; box-shadow: 8px 8px 0 var(--ink);
  padding: 30px 22px;
}
@media (min-width: 700px) { .panel { padding: 38px 40px; } }

.feed { background: var(--sky-lt); transform: rotate(-0.5deg); display: grid; gap: 18px; align-items: center; scroll-margin-top: 20px; }
@media (min-width: 760px) { .feed { grid-template-columns: 220px minmax(0, 1fr); gap: 34px; } }
.feed-mon { width: 170px; margin: -70px auto 0; }
@media (min-width: 760px) { .feed-mon { width: 220px; margin: 0; } }
.chompy { width: 100%; height: auto; display: block; overflow: visible; }
.jaw { transition: transform 0.18s ease; }
.chompy.snap .jaw { animation: snap 0.22s ease 3; }
@keyframes snap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(26px); } }
.feed-body, .hero > *, .panel > * { min-width: 0; }
.feed-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
#feed-input {
  flex: 1 1 200px; min-width: 0; width: 100%;
  font-family: var(--mono); font-weight: 800; font-size: 26px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); background: var(--white); border: 4px solid var(--ink); border-radius: 14px; padding: 10px 14px;
  box-shadow: inset 3px 3px 0 rgba(34, 26, 51, 0.12);
}
#feed-input::placeholder { color: #b3a8c2; letter-spacing: 0.1em; }
.feed-help { font-size: 15px; margin: 0 0 8px; }
.ts-box:empty { display: none; }
.ts-box { margin: 4px 0 10px; }
.feed-msg:empty { display: none; }
.feed-msg {
  margin: 8px 0 0; padding: 12px 14px; font-weight: 600;
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); background: var(--white);
}
.feed-msg.ok { background: var(--slime-lt); }
.feed-msg.err { background: var(--bubble-lt); }
.feed-msg .place-big { font-family: var(--head); font-weight: 400; font-size: 30px; color: var(--grape-dk); display: block; line-height: 1.1; }
.my-code { margin: 14px 0 0; font-size: 15px; font-weight: 500; }
.my-code b { font-family: var(--mono); }

.savings { background: var(--butter-lt); transform: rotate(0.4deg); }
.fang-btn { position: absolute; width: 130px; right: 26px; top: -84px; }
.fang { width: 100%; height: auto; display: block; }
.ladder { list-style: none; margin: 18px 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 820px) { .ladder { grid-template-columns: repeat(4, 1fr); } }
.rung { display: flex; flex-direction: column; gap: 4px; }
.rung .tag {
  display: block; font-family: var(--head); font-size: clamp(40px, 7vw, 56px); line-height: 1; text-align: center;
  background: var(--white); border: 4px solid var(--ink); border-radius: 18px; padding: 18px 8px 12px;
}
.tag-wrap { display: block; filter: drop-shadow(4px 4px 0 var(--ink)); }
.rung span:last-child { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; text-align: center; padding: 6px 4px 0; }
.r1 .tag { text-decoration: line-through; text-decoration-color: var(--bubble); text-decoration-thickness: 6px; }
.r2 .tag { background: var(--sky-lt); }
.r3 .tag { background: var(--slime-lt); }
.r4 .tag { background: var(--slime); }
/* bite marks: the monster has been at the prices (more bites as the price drops) */
.r2 .tag {
  -webkit-mask: radial-gradient(circle 16px at calc(100% - 4px) 4px, transparent 15px, #000 16px);
  mask: radial-gradient(circle 16px at calc(100% - 4px) 4px, transparent 15px, #000 16px);
}
.r3 .tag {
  -webkit-mask: radial-gradient(circle 15px at calc(100% - 2px) 6px, transparent 14px, #000 15px), radial-gradient(circle 12px at calc(100% - 26px) -2px, transparent 11px, #000 12px);
  mask: radial-gradient(circle 15px at calc(100% - 2px) 6px, transparent 14px, #000 15px), radial-gradient(circle 12px at calc(100% - 26px) -2px, transparent 11px, #000 12px);
}
.r4 .tag {
  -webkit-mask: radial-gradient(circle 16px at calc(100% - 2px) 8px, transparent 15px, #000 16px), radial-gradient(circle 13px at calc(100% - 28px) -2px, transparent 12px, #000 13px), radial-gradient(circle 14px at 0 100%, transparent 13px, #000 14px);
  mask: radial-gradient(circle 16px at calc(100% - 2px) 8px, transparent 15px, #000 16px), radial-gradient(circle 13px at calc(100% - 28px) -2px, transparent 12px, #000 13px), radial-gradient(circle 14px at 0 100%, transparent 13px, #000 14px);
}
.r3 .tag, .r4 .tag { -webkit-mask-composite: source-in; mask-composite: intersect; }
.fine { font-size: 14px; margin: 0; }

.promo { background: var(--white); }
.promo p { font-size: 19px; max-width: 46em; margin: 0; }
.names { background: var(--bubble-lt); transform: rotate(0.3deg); }
.deals { margin: 16px 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 52em; }
.deals li { position: relative; padding: 10px 14px 9px 40px; background: var(--white); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); }
.deals li::before { content: "$"; position: absolute; left: 12px; top: 8px; font-family: var(--head); font-size: 20px; color: var(--slime-dk); }
.use { background: var(--sky-lt); transform: rotate(0.3deg); }

/* nerd stats: big arcade numbers */
.nerd { background: var(--ink); color: var(--white); }
.nerd .level { color: var(--butter); }
.nerd h2 { color: var(--white); }
.nerd .fine { color: #d9cfe8; margin-top: 16px; }
.nerd-grid { margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 10px; }
.nerd-grid > div { background: #2f2545; border: 3px solid #4a3d66; border-radius: 14px; padding: 10px 10px 8px; text-align: center; container-type: inline-size; }
.nerd-grid dt { font-family: var(--head); font-size: 13px; letter-spacing: 0.06em; color: var(--butter); }
.nerd-grid dd { margin: 4px 0 0; font-family: var(--mono); font-weight: 800; font-size: clamp(22px, 4vw, 30px); color: var(--slime); line-height: 1.1; white-space: nowrap; }
/* Room to grow: a long number (--len characters, set by the page and app.js) shrinks until it fits
   its tile, so 1,234,567,890 page loads still fit on a phone. Monospace digits are ~0.62em wide. */
.nerd-grid dd { font-size: min(30px, calc(100cqi / (var(--len, 4) * 0.62))); }
.hud > div { container-type: inline-size; }
.hud dd { white-space: nowrap; font-size: min(clamp(22px, 6vw, 30px), calc(100cqi / (var(--len, 4) * 0.62))); }
.nerd-grid dd.bump { animation: bump 0.4s ease; }
.names p { max-width: 46em; }
.names p:last-child { margin: 0; }

.how { background: var(--slime-lt); transform: rotate(-0.3deg); padding-bottom: 0; overflow: hidden; }
.shag-walk { position: absolute; top: 14px; right: 14px; width: 84px; }
.shag { width: 100%; height: auto; display: block; }
.shag .legs path:first-child { animation: step 0.5s ease-in-out infinite alternate; transform-origin: 46px 104px; }
.shag .legs path:last-child { animation: step 0.5s ease-in-out infinite alternate-reverse; transform-origin: 84px 104px; }
@keyframes step { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.steps { list-style: none; counter-reset: step; margin: 18px 0 8px; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; gap: 16px 26px; } }
.steps li { counter-increment: step; position: relative; padding: 4px 0 4px 58px; min-height: 46px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--head); font-size: 24px; padding-top: 4px;
  background: var(--butter); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink);
}
.steps li:nth-child(2)::before { background: var(--sky); }
.steps li:nth-child(3)::before { background: var(--bubble); }
.steps li:nth-child(4)::before { background: var(--slime); }
.pool { display: block; width: calc(100% + 80px); max-width: none; margin: 10px -40px 0; height: auto; }
.terry { transform-box: fill-box; transform-origin: 50% 100%; animation: wave 3.2s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
.peek { animation: peek 4s ease-in-out infinite; }
@keyframes peek { 0%, 100% { transform: translateY(6px); } 40%, 60% { transform: translateY(-8px); } }
.bob { animation: bob 3.6s ease-in-out infinite; }
.bob.b2 { animation-delay: -1.2s; } .bob.b3 { animation-delay: -2.4s; animation-duration: 4.4s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bub { animation: rise 3.4s ease-in infinite; }
.bub.s2 { animation-delay: -0.8s; } .bub.s3 { animation-delay: -1.6s; } .bub.s4 { animation-delay: -2.2s; } .bub.s5 { animation-delay: -2.9s; }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-90px); opacity: 0; } }

.faq { background: var(--white); }
.faq details { border-top: 3px dashed rgba(34, 26, 51, 0.25); padding: 4px 0; }
.faq details:first-of-type { border-top: 0; }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 14px 44px 12px 0; }
.faq summary h3 { display: inline; margin: 0; font-family: var(--head); font-weight: 400; font-size: 21px; line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 9px; width: 32px; height: 32px; display: grid; place-items: center; padding-top: 3px;
  font-size: 24px; background: var(--butter); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--bubble); }
.faq details p { margin: 0 0 14px; max-width: 46em; }

/* ---- footer ---- */
.foot { position: relative; margin-top: 110px; background: var(--slime); border-top: 5px solid var(--ink); padding: 0 18px 30px; }
.peek-btn { position: absolute; width: 240px; left: 50%; top: -80px; transform: translateX(-50%); }
.peeker { width: 100%; height: auto; display: block; }
.foot-text { max-width: 760px; margin: 0 auto; padding-top: 30px; text-align: center; font-size: 15px; font-weight: 500; }
.foot-text p { margin: 0 0 8px; }

/* ---- confetti (teeth, eyeballs, stars) ---- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti svg { position: absolute; width: 26px; height: 26px; }
.pop-word {
  position: absolute; white-space: nowrap; pointer-events: none;
  font-family: var(--head); font-size: 30px; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
}

/* ---- 404 ---- */
.lost { display: grid; place-items: center; min-height: 100vh; text-align: center; padding: 20px; }
.lost-main { max-width: 520px; }
.lost-mon { width: 240px; max-width: 70%; margin: 10px auto; display: block; }
.lost-home { text-decoration: none; display: block; }
.lost-home .wordmark { font-size: clamp(44px, 12vw, 84px); }
.lost-home .wm-line { display: inline; }
.lost h1 { font-size: clamp(34px, 7vw, 52px); }

@media (max-width: 420px) {
  .top-link { font-size: 15px; padding: 7px 11px 4px; }
  .card { padding: 28px 14px 16px; }
  .tiles { gap: 4px; }
  .bubble { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- level 2: the race to the front ---- */
.quest { margin-top: 16px; background: var(--white); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); padding: 12px 14px; }
.quest-title { font-family: var(--head); font-size: 18px; margin: 0 0 10px; }
.quest-title span { font-family: var(--mono); font-weight: 800; }
.track {
  position: relative; height: 34px; border: 3px solid var(--ink); border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--butter-lt) 0 18px, var(--white) 18px 36px);
}
.flag {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-family: var(--head); font-size: 13px;
  background: var(--slime); border: 2px solid var(--ink); border-radius: 6px; padding: 2px 6px 0;
}
.runner {
  position: absolute; top: 50%; width: 34px; height: 34px; margin-left: -17px; left: 100%;
  transform: translateY(-50%); border-radius: 50%; border: 3px solid var(--ink); background: var(--grape);
  transition: left 1.2s cubic-bezier(.3, 1.4, .5, 1);
}
.runner::before, .runner::after {
  content: ""; position: absolute; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid var(--ink);
}
.runner::before { left: 5px; } .runner::after { right: 5px; }
.quest-note { margin: 8px 0 0; font-size: 15px; font-weight: 600; }

/* ---- bonus round: bust your bill ---- */
.buster { display: grid; gap: 16px; align-items: center; margin: 14px 0 20px; }
@media (min-width: 700px) { .buster { grid-template-columns: 1.3fr 1fr; } }
.buster-controls { display: grid; gap: 10px; }
.switch { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.switch input { width: 24px; height: 24px; accent-color: var(--slime-dk); }
.slide-label { font-weight: 600; }
.slide-label b { font-family: var(--head); font-weight: 400; font-size: 24px; color: var(--grape-dk); }
#refs { width: 100%; accent-color: var(--bubble); height: 30px; }
.bill {
  text-align: center; background: var(--white); border: 4px solid var(--ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--ink);
  padding: 12px 10px 10px; display: grid;
}
.bill-label { font-family: var(--head); font-size: 15px; }
.bill-amt { font-family: var(--head); font-size: clamp(56px, 12vw, 80px); line-height: 1; color: var(--slime-dk); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.bill-amt.busted { color: var(--bubble); }
.bill-amt.bump { animation: bump 0.4s ease; }
.bill-sub { font-size: 14px; font-weight: 500; }

/* ---- trophies ---- */
.trophies { background: var(--butter-lt); }
.trophy-count { font-weight: 600; }
.trophy-count b { font-family: var(--head); font-weight: 400; font-size: 24px; color: var(--grape-dk); }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .shelf { grid-template-columns: repeat(4, 1fr); } }
.trophy {
  display: grid; justify-items: center; text-align: center; gap: 2px; padding: 12px 8px 10px;
  background: #efe7d4; border: 3px dashed #b9ad94; border-radius: 16px; color: #7d7385;
}
.trophy b { font-family: var(--head); font-weight: 400; font-size: 16px; }
.trophy span:last-child { font-size: 13px; font-weight: 500; line-height: 1.25; }
.trophy-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--head); font-size: 22px; background: #ddd3bd; border: 3px solid #b9ad94; padding-top: 3px;
}
.trophy.got { background: var(--white); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); }
.trophy.got .trophy-icon { background: var(--butter); border-color: var(--ink); }
.trophy.got.new { animation: squish 0.6s ease; }

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 18px; z-index: 60; transform: translateX(-50%);
  max-width: calc(100% - 32px); width: max-content;
  background: var(--butter); border: 4px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink);
  padding: 10px 16px 8px; font-weight: 600; text-align: center;
}
.toast b { display: block; font-family: var(--head); font-weight: 400; font-size: 14px; letter-spacing: 0.06em; color: var(--grape-dk); }
.toast.show { animation: toast-in 0.4s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes toast-in { from { transform: translate(-50%, 140%); } to { transform: translate(-50%, 0); } }

/* phones: the deal button belongs on the first screen */
@media (max-width: 600px) {
  .top { padding-top: 46px; }
  .wordmark { font-size: clamp(56px, 17.5vw, 100px); }
  .hl-small { font-size: 15px; padding: 7px 12px 5px; margin-top: 10px; }
  .ticker span, .ticker i { font-size: 15px; padding-top: 9px; padding-bottom: 6px; }
  .hud-wrap { margin-top: 26px; }
  .blinky { width: 54px; top: -34px; }
  .hud > div { padding: 7px 4px 5px; }
  .hud dt { font-size: 10.5px; }
  .hud dd { font-size: min(22px, calc(100cqi / (var(--len, 4) * 0.62))); }
  .hero { padding-top: 8px; gap: 8px; }
  .kicker { font-size: 19px; margin: 0; }
  .hero-title { font-size: clamp(24px, 6.8vw, 30px); }
  .gloop-btn { width: 50%; }
  .bubble { font-size: 13px; max-width: 44%; padding: 7px 10px 5px; }
  .card { margin-top: -46px; padding-top: 26px; }
  .card-label { margin-bottom: 8px; }
  #card-label { font-size: 15px; }
  .tiles { margin-bottom: 12px; }
}