/* ---------- Tokens ---------- */
:root {
  --bg: #fff4e6;
  --bg-2: #ffe9d2;
  --card: #fffaf3;
  --ink: #2b1a12;
  --muted: #6e5546;
  --accent: #ff6a3d;
  --pink: #ffb3c8;
  --butter: #ffd866;
  --mint: #a6e8cc;
  --sky: #b9dcff;
  --grape: #cdb4ff;
  --mug: #ffd866;
  --coffee: #c98652;
  --steam: #d9bfa9;
  --shadow: #2b1a12;
  --sec-hero: #fff4e6;
  --sec-shop: #fff0bd;
  --sec-kk: #ddf5e8;
  --sec-faq: #efe5ff;
  --radius: 26px;
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1411; --bg-2: #2a1d17; --card: #2a1e18; --ink: #fff0e0; --muted: #d1b7a3;
    --accent: #ff7a50; --pink: #ff8fb0; --butter: #ffcf4a; --mint: #6fd3ab; --sky: #7fb8f0; --grape: #a98bf0;
    --mug: #ffcf4a; --coffee: #b8733f; --steam: #6d5446; --shadow: #000;
    --sec-hero: #1d1411; --sec-shop: #241b0a; --sec-kk: #0f1f18; --sec-faq: #1b1427;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1d1411; --bg-2: #2a1d17; --card: #2a1e18; --ink: #fff0e0; --muted: #d1b7a3;
  --accent: #ff7a50; --pink: #ff8fb0; --butter: #ffcf4a; --mint: #6fd3ab; --sky: #7fb8f0; --grape: #a98bf0;
  --mug: #ffcf4a; --coffee: #b8733f; --steam: #6d5446; --shadow: #000;
  --sec-hero: #1d1411; --sec-shop: #241b0a; --sec-kk: #0f1f18; --sec-faq: #1b1427;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 "DM Sans", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(92px + var(--safe-b));
  transition: background-color .8s ease;
}
/* Sisään liukuvat kortit ja nauhat ei saa levittää sivua mobiilissa */
main, .footer { overflow-x: hidden; overflow-x: clip; }
h1, h2, h3, .logo {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}
h2 { font-size: clamp(2rem, 8vw, 3rem); font-weight: 800; }
p { margin: 0; }
a { color: inherit; }
small { font-size: .78em; opacity: .8; }
.muted { color: var(--muted); }
.eyebrow {
  display: inline-block;
  font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .6rem;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 12px; }

/* ---------- Taustat: möykyt, leijuvat emojit, scroll-palkki ---------- */
.blobs, .floaters { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blobs span {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(60px); opacity: .42;
  animation: drift 22s ease-in-out infinite alternate;
}
.blobs span:nth-child(1) { background: var(--pink); top: -25vmax; left: -20vmax; }
.blobs span:nth-child(2) { background: var(--butter); top: 30vh; right: -30vmax; animation-duration: 28s; }
.blobs span:nth-child(3) { background: var(--mint); bottom: -30vmax; left: 0; animation-duration: 34s; opacity: .3; }
@keyframes drift { to { transform: translate(8vmax, 6vmax) scale(1.15); } }

.floaters span { position: absolute; bottom: -80px; opacity: .2; animation: floatUp linear infinite; }
@keyframes floatUp {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(26px, -30vh) rotate(90deg); }
  50% { transform: translate(-20px, -62vh) rotate(180deg); }
  75% { transform: translate(22px, -92vh) rotate(270deg); }
  100% { transform: translate(0, -128vh) rotate(360deg); }
}

.progress {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 5px; z-index: 50;
  transform-origin: 0 50%; transform: scaleX(0);
  background: repeating-linear-gradient(-45deg, var(--accent) 0 10px, var(--butter) 10px 20px, var(--pink) 20px 30px);
  animation: candyStripe .8s linear infinite;
}
@keyframes candyStripe { to { background-position: 42.4px 0; } }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.logo { font-size: 1.6rem; font-weight: 900; text-decoration: none; }
.logo span { color: var(--accent); display: inline-block; animation: hop 2.4s var(--ease-bounce) infinite; }
@keyframes hop { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-6px); } }
.nav nav { display: none; gap: 6px; }
.nav nav a { text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 999px; transition: background .2s, transform .3s var(--ease-bounce); }
.nav nav a:hover { background: var(--bg-2); transform: rotate(-4deg) scale(1.06); }

/* ---------- Napit ---------- */
.btn {
  --bg-btn: var(--card);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 54px; padding: 0 22px;
  font: 800 1.02rem/1 "DM Sans", system-ui, sans-serif;
  color: var(--ink); text-decoration: none;
  background: var(--bg-btn);
  border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: 0 5px 0 var(--shadow);
  cursor: pointer; user-select: none; touch-action: manipulation;
  transition: transform .15s var(--ease-bounce), box-shadow .15s;
}
.btn.primary { --bg-btn: var(--accent); color: #fff; }
.btn.primary::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; width: 38%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-20deg);
  animation: shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--shadow); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--shadow); }
.btn.big { width: 100%; min-height: 62px; font-size: 1.15rem; }
.btn.jelly { animation: jelly .55s var(--ease-bounce); }
@keyframes jelly {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.18, .82); }
  50% { transform: scale(.9, 1.12); }
  70% { transform: scale(1.05, .95); }
  100% { transform: scale(1, 1); }
}

/* ---------- Hero ---------- */
.hero {
  display: grid; gap: 8px;
  padding: 8px 16px 26px;
  max-width: 1080px; margin: 0 auto;
  text-align: center;
}
.hero-mug { position: relative; width: min(64vw, 280px); margin: 0 auto; }
.hero-mug .mug { width: 100%; height: auto; cursor: pointer; overflow: visible; }
.bubble {
  position: absolute; top: 34%; right: -22%; z-index: 2;
  background: var(--card); border: 3px solid var(--ink); border-radius: 18px 18px 18px 4px;
  padding: 6px 12px; font-weight: 800; font-size: .85rem;
  width: max-content; max-width: min(46vw, 210px); text-align: center;
  box-shadow: 0 3px 0 var(--shadow);
  animation: bob 3s ease-in-out infinite;
  pointer-events: none;
}
.bubble.pop { animation: bubblePop .45s var(--ease-bounce), bob 3s .45s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes bubblePop { 0% { transform: scale(.4) rotate(-10deg); } 100% { transform: scale(1); } }

.mega {
  position: absolute; left: -14%; bottom: 0; z-index: 2;
  width: 96px; height: 96px; display: grid; place-items: center;
  animation: megaPulse 1.3s ease-in-out infinite;
}
.mega svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: spin 9s linear infinite; }
.mega polygon { fill: var(--accent); stroke: #2b1a12; stroke-width: 3; stroke-linejoin: round; }
.mega span { position: relative; color: #fff; font: 900 .7rem/1.05 "DM Sans", sans-serif; letter-spacing: .05em; text-align: center; transform: rotate(-12deg); }
.mega b { display: block; font: 900 1.25rem/1 "Fraunces", serif; letter-spacing: -.02em; }
@keyframes megaPulse { 50% { transform: scale(1.14) rotate(8deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

h1 { font-size: clamp(2.9rem, 13vw, 6rem); font-weight: 900; margin-bottom: 1rem; }
.name {
  color: var(--accent);
  display: inline-block;
  padding-bottom: .12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 q10 -8 20 0 t20 0' fill='none' stroke='%23ff8fb0' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100% / 30px 10px;
  animation: underline 1.2s linear infinite;
}
@keyframes underline { to { background-position-x: 30px; } }
.name .ch { display: inline-block; }
.name .ch.boing { animation: boing .6s var(--ease-bounce); }
@keyframes boing {
  30% { transform: translateY(-.25em) rotate(-8deg) scale(1.1); }
  60% { transform: translateY(.04em) rotate(4deg); }
}
.lead { font-size: 1.12rem; color: var(--muted); max-width: 32ch; margin: 0 auto; }
.lead em { font-style: normal; font-weight: 800; color: var(--ink); background: linear-gradient(transparent 58%, var(--butter) 58%); padding: 0 3px; }

.timer { margin-top: 1.1rem; font-weight: 800; font-size: .95rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
.timer small { flex-basis: 100%; font-weight: 600; color: var(--muted); }
#ale-timer {
  display: inline-block; font-variant-numeric: tabular-nums;
  background: #2b1a12; color: #ffd866; padding: 3px 10px; border-radius: 10px;
  box-shadow: 0 3px 0 var(--accent);
}
#ale-timer .tick { display: inline-block; animation: tick .4s var(--ease-bounce); }
@keyframes tick { from { transform: translateY(-70%) scale(1.4); opacity: .1; } }
.cta { display: none; gap: 12px; margin-top: 1.4rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Muki: söpöstä hulluun (tasot .l1–.l5) ---------- */
.mug .cup { fill: var(--mug); stroke: var(--ink); stroke-width: 6; transition: fill .6s; }
.mug .handle { fill: none; stroke: var(--ink); stroke-width: 11; stroke-linecap: round; }
.mug .steam path { stroke: var(--steam); animation: steam 2.6s ease-in-out infinite; transition: opacity .3s; }
.mug .steam .s2 { animation-delay: -.9s; }
.mug .steam .s3 { animation-delay: -1.7s; }
@keyframes steam {
  0% { transform: translateY(12px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(-10px); opacity: 0; }
}
.mug .body { transform-box: view-box; transform-origin: 50% 90%; }

/* Söpö (taso 0) */
.mug .cute ellipse { fill: var(--ink); }
.mug .shine { fill: #fff; }
.mug .pupil { transition: transform .1s linear; }
.mug .cute .lid { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: none; } 96% { transform: scaleY(.1); } }
.mug .cute-g { transform-box: fill-box; transform-origin: center; transition: transform .45s var(--ease-bounce), opacity .2s; }
.mug .cheek { fill: var(--pink); opacity: .85; transition: opacity .3s, fill .3s; }
.mug .smile { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease-bounce), opacity .25s; }

/* Hullut osat piilossa alussa */
.mug .zap, .mug .brow, .mug .sweat, .mug .mouth-g, .mug .drool, .mug .veins { opacity: 0; transition: opacity .4s; }
.mug .zap { fill: none; stroke: var(--steam); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.mug .brow { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.mug .sweat { fill: #a8dcff; stroke: #2b1a12; stroke-width: 2; }
.mug .eyeball { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .15s, transform .55s var(--ease-bounce); }
.mug .sclera { fill: #fff; }
.mug .sclera-line { fill: none; stroke: var(--ink); stroke-width: 5; }
.mug .veins path { fill: none; stroke: #e0332b; stroke-width: 2.3; stroke-linecap: round; }
.mug .psize { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s var(--ease-bounce); }
.mug .iris { fill: var(--accent); stroke: #2b1a12; stroke-width: 2; }
.mug .pup { fill: #1a0f0a; }
.mug .mouth { fill: #2b1a12; }
.mug .mouth-line { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.mug .teeth { fill: none; stroke: #fff; stroke-width: 24; }
.mug .gaps { stroke: #2b1a12; stroke-width: 2.5; }
.mug .tongue { fill: #ff8fb0; }
.mug .drool { fill: #a8dcff; stroke: #2b1a12; stroke-width: 2; transform-box: fill-box; transform-origin: 50% 0; }
.mug .mouth-g { transform-box: fill-box; transform-origin: 50% 0; transition: opacity .3s, transform .25s var(--ease-bounce); }

/* Taso 1: tuijotus + hikipisara */
.mug.l1 .cute-g { transform: scale(1.35); }
.mug.l1 .cute .lid { animation: none; }
.mug.l1 .smile { transform: scale(1.1, .25); }
.mug.l1 .cheek { fill: #ff6b8a; }
.mug.l1 .sweat { opacity: 1; animation: sweat 1.6s ease-in infinite; }
@keyframes sweat { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

/* Taso 2: POKS – silmät pullahtaa ulos päästä */
.mug.l2 .cute-g, .mug.l2 .cheek { opacity: 0; }
.mug.l2 .eyeball { opacity: 1; transform: scale(1); }
.mug.l2 .psize { transform: scale(1); }
.mug.l2 .brow { opacity: 1; }
.mug.l2 .steam path { opacity: 0; animation: none; }
.mug.l2 .zap { opacity: 1; animation: zap 1.1s steps(3) infinite; }
@keyframes zap { 0% { transform: translateY(8px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } }

/* Taso 3: suonet, hampaat, nykiminen */
.mug.l3 .veins { opacity: .7; }
.mug.l3 .psize { transform: scale(.8); }
.mug.l3 .smile { opacity: 0; }
.mug.l3 .mouth-g { opacity: 1; }
.mug.l3 .eyeball { animation: bulge 3.2s ease-in-out infinite; }
.mug.l3 .eb-r { animation-duration: 2.5s; animation-delay: -1.1s; }
.mug.l3 .brow { animation: brow 2.2s ease-in-out infinite; }
.mug.l3 .brow-r { animation-delay: -.8s; animation-duration: 1.7s; }
.mug.l3 .body { animation: twitch 5s infinite; }
@keyframes bulge { 0%, 68%, 100% { transform: scale(1); } 76% { transform: scale(1.16); } 82% { transform: scale(.95); } 88% { transform: scale(1.09); } }
@keyframes brow { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-7deg); } }
@keyframes twitch {
  0%, 86%, 100% { transform: none; }
  88% { transform: rotate(-4deg) translateX(-3px); }
  90% { transform: rotate(3deg) translateX(3px); }
  92% { transform: rotate(-2deg); }
}

/* Taso 4: pikkupupillit, kuola, kellastuu */
.mug.l4 .veins { opacity: 1; }
.mug.l4 .veins path { animation: veins 1.6s ease-in-out infinite; }
@keyframes veins { 50% { opacity: .45; } }
.mug.l4 .psize { transform: scale(.62); }
.mug.l4 .jit { animation: jit .16s steps(2) infinite; }
@keyframes jit { 0% { transform: translate(-1.2px, .7px); } 100% { transform: translate(1.2px, -.7px); } }
.mug.l4 .drool { opacity: 1; animation: drool 2.6s ease-in infinite; }
@keyframes drool { 0%, 35% { transform: scaleY(.3); opacity: 1; } 80% { transform: scaleY(1.7); opacity: 1; } 100% { transform: scaleY(1.7) translateY(12px); opacity: 0; } }
.mug.l4 .cup { fill: #ffc24d; }
.mug.l4 .body { animation: twitch 2.4s infinite; }
.mug.l4 .sweat { animation-duration: .9s; }

/* Taso 5: täysi hullu */
.mug.l5 .psize { transform: scale(.5); }
.mug.l5 .cup { fill: #ff9d5c; }
.mug.l5 .zap { animation-duration: .45s; }
.mug.l5 .eyeball { animation-duration: 1.3s; }
.mug.l5 .body { animation: rage .12s linear infinite; }
@keyframes rage {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(1.5px, -1px) rotate(1deg); }
  50% { transform: translate(-1.5px, 1px) rotate(-1deg); }
  75% { transform: translate(1px, 1.5px); }
}

/* Painallus: iloinen suu + pullistus */
.mug.happy .smile { transform: scale(1.3, 1.6); }
.mug.happy .mouth-g { transform: scale(1.08, 1.35); }
.mug.l2.happy .eyeball { animation: none; transform: scale(1.22); }

/* Klikkausliikkeet (viimeisenä, jotta voittaa tasojen animaatiot) */
.mug.jump .body { animation: jump .7s var(--ease-bounce); }
.mug.spin .body { transform-origin: 50% 60%; animation: mugSpin .8s var(--ease-bounce); }
.mug.wobble .body { animation: wobble .8s ease-in-out; }
.mug.squash .body { animation: squash .6s var(--ease-bounce); }
@keyframes jump {
  0% { transform: scale(1.1, .88); }
  40% { transform: translateY(-26px) scale(.94, 1.08) rotate(-4deg); }
  70% { transform: translateY(0) scale(1.06, .95); }
  100% { transform: none; }
}
@keyframes mugSpin { 50% { transform: rotate(200deg) scale(.8); } 100% { transform: rotate(360deg); } }
@keyframes wobble {
  15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); }
  60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); }
}
@keyframes squash { 30% { transform: scale(1.35, .65); } 60% { transform: scale(.8, 1.25); } 80% { transform: scale(1.08, .94); } }

/* ---------- Ristikkäiset uutisnauhat ---------- */
.tickers { position: relative; height: 150px; margin: 0 0 18px; }
.ticker {
  position: absolute; left: -24px; right: -24px; top: 50%;
  overflow: hidden; border-block: 3px solid #2b1a12;
  font-family: "Fraunces", serif; font-weight: 800; font-size: 1.25rem;
  padding: 9px 0;
}
.ticker.news { top: 30%; background: var(--butter); color: #2b1a12; transform: translateY(-50%) rotate(-4deg); }
.ticker.sale-band {
  background: var(--accent); color: #fff; z-index: 1;
  font: 900 1.1rem/1.4 "DM Sans", sans-serif; letter-spacing: .06em;
  top: 70%; transform: translateY(-50%) rotate(3deg);
}
.track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.sale-band .track { animation-duration: 12s; animation-direction: reverse; }
.track span { white-space: pre; }
.track b {
  font: 800 .62em/1 "DM Sans", system-ui, sans-serif; letter-spacing: .1em;
  background: #2b1a12; color: #ffd866;
  padding: 5px 8px 4px; border-radius: 6px; margin-right: .4em;
  vertical-align: .25em;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Osiot ---------- */
.section { padding: 36px 16px; max-width: 1080px; margin: 0 auto; scroll-margin-top: 70px; }
.section-head { text-align: center; margin-bottom: 26px; }
.section-head .muted { max-width: 36ch; margin: .8rem auto 0; }
.card {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 7px 0 var(--shadow);
}
.fine { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 22px; }

/* ---------- Kauppa ---------- */
.shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
.item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 12px 14px; text-align: center;
}
.item.big { grid-column: 1 / -1; padding: 20px 18px 18px; }
.item .art { position: relative; width: 100%; height: 86px; display: grid; place-items: center; }
.item .emo { font-size: 54px; line-height: 1; display: inline-block; }
.item h3 { font-size: 1.18rem; font-weight: 800; }
.item.big h3 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
.item .desc { font-size: .84rem; line-height: 1.35; color: var(--muted); flex: 1; }
.item.big .desc { font-size: 1rem; }
.item .btn { width: 100%; min-height: 48px; padding: 0 10px; }
.item.big .btn { min-height: 62px; font-size: 1.15rem; }

.prices { display: flex; flex-direction: column; align-items: center; line-height: 1.1; margin: 4px 0 6px; }
.was { position: relative; font-size: .8rem; font-weight: 700; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity .3s; }
.was::after {
  content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 2.5px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s .15s;
}
.sold .was { opacity: 1; }
.sold .was::after { transform: scaleX(1); }
.now { font-family: "Fraunces", serif; font-weight: 900; font-size: 1.55rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item.big .now { font-size: clamp(2.4rem, 11vw, 3.2rem); color: var(--accent); }

.sale {
  position: absolute; top: -14px; right: -8px; z-index: 3;
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent); color: #fff;
  border: 3px solid #2b1a12; box-shadow: 0 3px 0 #2b1a12;
  font: 900 .9rem/1 "DM Sans", sans-serif; letter-spacing: -.02em;
  transform: scale(0);
}
.sale.long { font-size: .72rem; }
.sold .sale { animation: slam .6s var(--ease-bounce) forwards, salePulse 1.5s .7s ease-in-out infinite; }
@keyframes slam {
  0% { transform: scale(2.8) rotate(-30deg); opacity: 0; }
  60% { transform: scale(.9) rotate(16deg); opacity: 1; }
  100% { transform: scale(1) rotate(12deg); opacity: 1; }
}
@keyframes salePulse { 0%, 100% { transform: scale(1) rotate(12deg); } 50% { transform: scale(1.14) rotate(4deg); } }

/* Tuotteiden omat animaatiot */
.fx-coffee .emo { animation: jitter .45s steps(2) infinite; }
@keyframes jitter { 0% { transform: translate(-1.5px, 1px) rotate(-4deg); } 100% { transform: translate(1.5px, -1px) rotate(4deg); } }
.puff, .heat { position: absolute; left: 50%; top: 2px; font-size: 20px; opacity: 0; animation: puff 2.4s ease-out infinite; }
.puff.p2 { animation-delay: 1.2s; }
.heat { animation-duration: 1.8s; }
@keyframes puff {
  0% { transform: translate(-50%, 12px) scale(.5); opacity: 0; }
  30% { opacity: .9; }
  100% { transform: translate(-10%, -34px) scale(1.25) rotate(20deg); opacity: 0; }
}

.fx-zap .emo { animation: buzz .1s linear infinite; }
@keyframes buzz {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(2px, -1px) rotate(5deg); }
  50% { transform: translate(-2px, 1px) rotate(-4deg); }
  75% { transform: translate(1px, 2px) rotate(2deg); }
}
.bolt { position: absolute; font-size: 22px; opacity: 0; animation: bolt 1.4s steps(1) infinite; }
.bolt.b1 { left: 10%; top: 4%; }
.bolt.b2 { right: 8%; top: 30%; animation-delay: .45s; }
.bolt.b3 { left: 20%; bottom: 0; animation-delay: .9s; }
@keyframes bolt {
  0% { opacity: 1; transform: scale(1.3) rotate(-12deg); }
  15% { opacity: 0; }
  30% { opacity: 1; transform: scale(.9) rotate(10deg); }
  40%, 100% { opacity: 0; }
}

.fx-bag .emo { animation: bagHop 1.2s var(--ease-bounce) infinite; }
@keyframes bagHop {
  0%, 60%, 100% { transform: translateY(0) scale(1); }
  20% { transform: translateY(-12px) scale(1.05, .95); }
  40% { transform: translateY(0) scale(1.1, .88); }
}
.grocery {
  position: absolute; left: calc(50% + (var(--i) - 1.5) * 22px); top: 26%;
  font-size: 20px; opacity: 0;
  animation: groc 2.4s calc(var(--i) * .6s) ease-out infinite;
}
@keyframes groc {
  0% { transform: translate(-50%, 12px) scale(.3); opacity: 0; }
  20% { transform: translate(-50%, -38px) scale(1.15) rotate(-15deg); opacity: 1; }
  40% { transform: translate(-50%, -48px) scale(1) rotate(12deg); opacity: 0; }
  100% { opacity: 0; }
}

.fx-pizza .emo { animation: spin 4s linear infinite; }

.fx-candy .art {
  height: 150px; margin-bottom: 8px; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 22px 22px 40px 40px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .15) 45%, rgba(255, 255, 255, 0)),
    var(--pink);
}
.candy {
  position: absolute; bottom: 8px; left: calc(var(--x) * .84% + 1%);
  font-size: 28px; line-height: 1;
  animation: popcorn .9s var(--d) infinite;
}
@keyframes popcorn {
  0%, 100% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  50% { transform: translateY(calc(-1 * var(--h))) rotate(170deg); animation-timing-function: cubic-bezier(.6, 0, .8, .3); }
}
.jar-label {
  position: absolute; top: 12px; left: 50%; z-index: 1;
  transform: translateX(-50%) rotate(-5deg);
  background: #fffaf3; color: #2b1a12; border: 3px solid #2b1a12; border-radius: 10px;
  padding: 4px 12px; font: 900 .95rem/1 "DM Sans", sans-serif; letter-spacing: .14em;
  animation: labelWiggle 2s ease-in-out infinite;
}
@keyframes labelWiggle { 50% { transform: translateX(-50%) rotate(4deg) scale(1.08); } }

/* ---------- Tilaukset ---------- */
.tiers { display: grid; gap: 28px; }
.tier { position: relative; padding: 26px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.tier:nth-child(4n+1) { --tint: var(--sky); }
.tier:nth-child(4n+2) { --tint: var(--pink); }
.tier:nth-child(4n+3) { --tint: var(--mint); }
.tier:nth-child(4n+4) { --tint: var(--grape); }
.tier .top { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.tier .emoji {
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center; font-size: 1.9rem;
  background: var(--tint); border: 3px solid var(--ink); border-radius: 18px;
  animation: emojiBob 2.6s ease-in-out infinite;
}
.tier:nth-child(2n) .emoji { animation-delay: -1.3s; }
@keyframes emojiBob { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-6px); } }
.tier h3 { font-size: 1.45rem; font-weight: 800; }
.tier .prices { align-items: flex-start; margin: 0; }
.tier .price { font-family: "Fraunces", serif; font-weight: 900; line-height: 1; }
.tier .now { font-size: 2.5rem; }
.tier .price small { font-family: "DM Sans", sans-serif; font-size: 1rem; font-weight: 700; color: var(--muted); opacity: 1; }
.tier ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tier li { display: flex; gap: 10px; align-items: flex-start; }
.tier li::before {
  content: "✓"; flex: none; width: 22px; height: 22px; margin-top: 1px;
  display: grid; place-items: center; font-size: .8rem; font-weight: 900;
  background: var(--tint); color: #2b1a12; border-radius: 50%;
}
.tier .btn { margin-top: auto; width: 100%; }

.math {
  margin: 0; padding: 10px 14px;
  background: #fffaf3; color: #2b1a12;
  border: 2.5px dashed #2b1a12; border-radius: 14px;
  font: 700 .95rem/1.5 ui-monospace, "SF Mono", Menlo, monospace;
}
.math span {
  display: block; opacity: 0; transform: translateX(-18px) scale(.9);
  transition: opacity .3s, transform .5s var(--ease-bounce);
  transition-delay: calc(1s + var(--j) * .6s);
}
.math span:last-child { font-size: 1.15rem; font-weight: 800; color: #e0552b; }
.tier.in .math span { opacity: 1; transform: none; }

.tier.featured { background: var(--butter); color: #2b1a12; animation: glow 2.2s ease-in-out infinite; }
.tier.featured, .tier.featured .emoji { border-color: #2b1a12; }
.tier.featured .price small, .tier.featured .was { color: #6e5546; }
.tier.featured .btn { --bg-btn: var(--accent); color: #fff; border-color: #2b1a12; }
.tier.featured::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%) no-repeat;
  background-size: 300% 100%;
  animation: holo 3s ease-in-out infinite;
}
@keyframes holo { 0% { background-position: 110% 0; } 60%, 100% { background-position: -10% 0; } }
@keyframes glow {
  0%, 100% { box-shadow: 0 7px 0 #2b1a12, 0 0 0 0 rgba(255, 106, 61, 0); }
  50% { box-shadow: 0 7px 0 #2b1a12, 0 0 36px 8px rgba(255, 106, 61, .5); }
}
.sticker {
  position: absolute; top: -17px; left: 16px; z-index: 3;
  background: #2b1a12; color: #ffd866; font-weight: 900; font-size: .8rem; letter-spacing: .08em;
  padding: 6px 12px; border-radius: 999px;
  transform: rotate(-6deg); animation: wiggle 2.4s ease-in-out infinite;
}
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(-6deg); } 85% { transform: rotate(5deg) scale(1.12); } 90% { transform: rotate(-11deg); } }
.portal { text-align: center; margin-top: 28px; color: var(--muted); }
.portal a { font-weight: 800; color: var(--ink); }

/* ---------- UKK ---------- */
.faq { display: grid; gap: 12px; max-width: 640px; margin: 0 auto; }
.faq details {
  background: var(--card); border: 3px solid var(--ink); border-radius: 20px;
  padding: 0 18px; box-shadow: 0 4px 0 var(--shadow);
  transition: transform .3s var(--ease-bounce);
}
.faq details:nth-child(odd)[open] { transform: rotate(-1deg); }
.faq details:nth-child(even)[open] { transform: rotate(1deg); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-weight: 800; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  font-size: 1.3rem; background: var(--butter); color: #2b1a12; border-radius: 50%;
  transition: transform .4s var(--ease-bounce), background .3s;
}
.faq details[open] summary::after { transform: rotate(135deg) scale(1.1); background: var(--pink); }
.faq details p { padding-bottom: 18px; color: var(--muted); }
.faq details[open] p { animation: faqIn .45s var(--ease-bounce); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } }

/* ---------- Footer ---------- */
.footer { text-align: center; padding: 40px 16px 30px; color: var(--muted); font-size: .9rem; }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.socials a {
  text-decoration: none; font-weight: 800; color: var(--ink);
  padding: 10px 16px; border: 3px solid var(--ink); border-radius: 999px; background: var(--card);
  transition: transform .3s var(--ease-bounce);
}
.socials a:hover { transform: rotate(-5deg) scale(1.08); }

/* ---------- Mobiilin alavalikko ---------- */
.dock {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 6px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 3px solid var(--ink); border-radius: 24px;
  box-shadow: 0 6px 0 var(--shadow);
}
.dock a {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 2px 5px; border-radius: 16px;
  font: 800 .72rem/1.1 "DM Sans", system-ui, sans-serif; text-decoration: none; color: var(--ink);
  transition: background .2s;
}
.dock a span { font-size: 1.45rem; line-height: 1.1; transition: transform .35s var(--ease-bounce); }
.dock a:active span { transform: scale(1.35) rotate(-12deg); }
[data-page="etusivu"] .dock [data-tab="etusivu"],
[data-page="pelit"] .dock [data-tab="pelit"],
[data-page="mina"] .dock [data-tab="mina"],
[data-page="mainos"] .dock [data-tab="mainos"] { background: var(--butter); color: #2b1a12; }
[data-page="etusivu"] .dock [data-tab="etusivu"] span,
[data-page="pelit"] .dock [data-tab="pelit"] span,
[data-page="mina"] .dock [data-tab="mina"] span,
[data-page="mainos"] .dock [data-tab="mainos"] span { animation: tabBob 2s ease-in-out infinite; }
@keyframes tabBob { 50% { transform: translateY(-3px) rotate(-8deg); } }
body.playing .dock { display: none; }

/* ---------- Toast, partikkelit, efektit ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(104px + var(--safe-b)); z-index: 110;
  transform: translate(-50%, 30px) scale(.9); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--bg); font-weight: 800;
  padding: 14px 20px; border-radius: 18px; width: max-content; max-width: calc(100vw - 32px); text-align: center;
  transition: transform .4s var(--ease-bounce), opacity .25s;
}
.toast.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.particle { position: fixed; z-index: 100; pointer-events: none; font-size: 24px; line-height: 1; will-change: transform, opacity; }
.pop-text {
  position: fixed; z-index: 101; pointer-events: none; white-space: nowrap;
  font: 900 2.3rem/1 "Fraunces", serif; color: #ffd866;
  text-shadow: 2px 2px 0 #2b1a12, -2px 2px 0 #2b1a12, 2px -2px 0 #2b1a12, -2px -2px 0 #2b1a12, 0 6px 0 #2b1a12;
}
.flash { position: fixed; inset: 0; z-index: 99; pointer-events: none; }
.pop-text.small { font-size: 1.6rem; }

/* ---------- Scroll-reveal (eri osiot tulee eri tavoin) ---------- */
.reveal { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .6s ease, transform .85s var(--ease-bounce); }
.reveal.in { opacity: 1; transform: none; }
.reveal.enter-left:not(.in) { transform: translateX(-90px) rotate(-8deg); }
.reveal.enter-right:not(.in) { transform: translateX(90px) rotate(8deg); }
.reveal.enter-drop:not(.in) { transform: translateY(-140px) rotate(5deg) scale(.9); }
.reveal.enter-flip:not(.in) { transform: perspective(700px) rotateY(85deg); }
.reveal.enter-zoom:not(.in) { transform: scale(.4) rotate(-10deg); }
.reveal.enter-pop:not(.in) { transform: scale(1.4); }

/* ---------- Isommat näytöt ---------- */
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .dock { display: none; }
  .toast { bottom: 32px; }
  .nav { padding-inline: 28px; }
  .nav nav { display: flex; }
  .hero {
    grid-template-columns: 1.15fr .85fr; align-items: center;
    text-align: left; padding: 40px 28px 60px; min-height: 76vh;
  }
  .hero-mug { order: 2; width: min(100%, 360px); }
  .mega { width: 120px; height: 120px; }
  .lead { margin: 0; }
  .timer { justify-content: flex-start; }
  .cta { display: flex; justify-content: flex-start; }
  .section { padding: 64px 28px; }
  .shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .item.big { grid-column: span 2; }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .item:hover, .tier:hover { transform: translateY(-6px) rotate(-1deg); }
}
@media (min-width: 1100px) {
  .tiers { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 760px) {
  .games { grid-template-columns: repeat(3, 1fr); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-body { max-width: 560px; width: 100%; margin: 0 auto; border-inline: 3px solid var(--ink); }
}

/* ---------- Mainokset ---------- */
.ad-slot { display: block; max-width: 720px; margin: 6px auto 30px; padding: 0 16px; }
.ad-card {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 18px 14px 16px; min-height: 86px;
  text-decoration: none; color: #2b1a12;
  border: 3px solid #2b1a12; border-radius: 18px;
  box-shadow: 0 6px 0 #2b1a12;
  overflow: hidden;
  transition: transform .3s var(--ease-bounce);
}
.ad-card:active { transform: scale(.97); }
.ad-tag {
  position: absolute; top: 6px; right: 8px;
  font: 900 .6rem/1 "DM Sans", sans-serif; letter-spacing: .14em;
  background: #2b1a12; color: #fff; padding: 3px 6px; border-radius: 5px;
}
.ad-emoji { font-size: 2.4rem; line-height: 1; flex: none; animation: adEmoji 1.6s ease-in-out infinite; }
@keyframes adEmoji { 50% { transform: scale(1.18) rotate(-10deg); } }
.ad-text { flex: 1; min-width: 0; font: 900 1.02rem/1.25 "DM Sans", sans-serif; }
.ad-cta {
  flex: none; align-self: flex-end;
  font: 900 .78rem/1 "DM Sans", sans-serif; white-space: nowrap;
  background: #2b1a12; color: #ffd866; padding: 8px 10px; border-radius: 999px;
  animation: ctaPulse 1.2s ease-in-out infinite;
}
@keyframes ctaPulse { 50% { transform: scale(1.08); } }
.ad-buy { display: block; text-align: center; margin-top: 12px; font-size: .78rem; font-weight: 800; color: var(--muted); text-decoration: underline dotted; }

.ad-banner {
  background: repeating-linear-gradient(45deg, #ffd866 0 16px, #ffe79a 16px 32px);
  animation: stripes 1.2s linear infinite;
}
@keyframes stripes { to { background-position: 45.25px 0; } }
.ad-neon {
  background: #1b1030; color: #fff; border-color: #ff4fd8;
  box-shadow: 0 0 0 3px #1b1030, 0 0 22px 4px rgba(255, 79, 216, .6), 0 6px 0 #1b1030;
  animation: neon 1.1s steps(2) infinite;
}
.ad-neon .ad-text { text-shadow: 0 0 8px #ff4fd8, 0 0 2px #fff; }
.ad-neon .ad-tag { background: #ff4fd8; }
.ad-neon .ad-cta { background: #39ff88; color: #1b1030; }
@keyframes neon {
  50% { border-color: #39ff88; box-shadow: 0 0 0 3px #1b1030, 0 0 26px 6px rgba(57, 255, 136, .55), 0 6px 0 #1b1030; }
}
.ad-sticker { background: #ff6a3d; color: #fff; animation: stickerWiggle 3s ease-in-out infinite; }
.ad-sticker .ad-cta { background: #fff; color: #e0552b; }
@keyframes stickerWiggle { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2deg) scale(1.02); } }
.ad-marquee { background: #b9dcff; }
.ad-marquee .ad-text { overflow: hidden; white-space: nowrap; }
.ad-marquee .ad-text-inner { display: inline-block; padding-left: 100%; animation: adMarquee 9s linear infinite; }
@keyframes adMarquee { to { transform: translateX(-100%); } }
.ad-big { flex-direction: column; text-align: center; padding: 28px 18px 20px; background: linear-gradient(135deg, #ffd866, #ffb3c8); }
.ad-big .ad-emoji { font-size: 4rem; }
.ad-big .ad-text { font-size: 1.3rem; }
.ad-big .ad-cta { align-self: center; }

/* ---------- Modaalit ---------- */
.modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 16px;
  background: rgba(24, 14, 10, .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .25s ease;
}
.modal.out { animation: fadeOut .25s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
.modal-box {
  position: relative; width: min(100%, 420px); max-height: calc(100svh - 32px); overflow: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 20px 20px; text-align: center;
  background: var(--card); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 28px; box-shadow: 0 8px 0 var(--shadow);
  animation: boxIn .55s var(--ease-bounce);
}
.paywall .modal-box, .friend-pop .modal-box { overflow: visible; }
@keyframes boxIn { from { transform: scale(.6) rotate(-6deg) translateY(40px); opacity: 0; } }
.modal .fine { margin-top: 0; }
.ad-break-head { display: flex; justify-content: space-between; align-items: center; }
.ad-break-title { font: 900 1rem/1 "DM Sans", sans-serif; letter-spacing: .06em; animation: blinkTitle 1s steps(2) infinite; }
@keyframes blinkTitle { 50% { opacity: .35; } }
.modal-x, .stage-x {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 3px solid var(--ink); background: var(--bg); color: var(--ink);
  font: 900 1.05rem/1 "DM Sans", sans-serif; cursor: pointer;
}
.modal-x:disabled { opacity: .55; cursor: wait; }
.btn.small { min-height: 44px; font-size: .92rem; padding: 0 16px; box-shadow: 0 4px 0 var(--shadow); }
.pw-lock { font-size: 4.5rem; line-height: 1; display: inline-block; margin: 0 auto; animation: lockShake 1.2s ease-in-out infinite; }
.pw-lock.open { animation: lockOpen .5s var(--ease-bounce) forwards; }
@keyframes lockShake { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-14deg); } 80% { transform: rotate(12deg); } 90% { transform: rotate(-6deg); } }
@keyframes lockOpen { 50% { transform: scale(1.6) rotate(-12deg); } 100% { transform: scale(1.2); } }
.paywall h2 { font-size: 2.2rem; }
.pw-prices .now { font-size: 2.6rem; color: var(--accent); }
.paywall .sale { top: -16px; right: -10px; }
.pw-free {
  background: none; border: none; cursor: pointer; padding: 8px;
  color: var(--muted); font: 700 .9rem/1.3 "DM Sans", sans-serif; text-decoration: underline;
}

/* ---------- Alasivujen yläosa ---------- */
.page-hero { text-align: center; padding-top: 18px; padding-bottom: 8px; }
.page-title { font-size: clamp(2.8rem, 13vw, 5rem); font-weight: 900; margin-bottom: .6rem; }
.page-title .wiggle { display: inline-block; animation: artTilt 1.4s ease-in-out infinite; }
.page-hero .lead { margin: 0 auto; }

/* ---------- Pelihalli ---------- */
.games { display: grid; gap: 26px; }
.game-card { position: relative; padding: 24px 18px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.game-art { font-size: 76px; line-height: 1; }
.game-laskut .game-art { animation: artTilt 2.2s ease-in-out infinite; }
.game-karkit .game-art { animation: artBounce 1.3s ease-in-out infinite; }
.game-tehdas .game-art { animation: artSpin 3s var(--ease-bounce) infinite; }
@keyframes artTilt { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg) scale(1.08); } }
@keyframes artBounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px) scale(1.05, .95); } 55% { transform: translateY(0) scale(1.1, .9); } }
@keyframes artSpin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } }
.game-card h3 { font-size: 1.7rem; font-weight: 900; }
.game-best { font-weight: 800; font-size: .9rem; }
.game-card .btn { width: 100%; margin-top: 6px; }
.lock-badge {
  position: absolute; top: -14px; right: -8px;
  width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.6rem;
  background: var(--butter); border: 3px solid #2b1a12; border-radius: 50%; box-shadow: 0 3px 0 #2b1a12;
  animation: lockShake 2.2s ease-in-out infinite;
}
.hof { max-width: 520px; margin: 0 auto; text-align: center; padding: 24px 18px; display: grid; gap: 6px; }
.hof .trophy { font-size: 3.4rem; line-height: 1; animation: artBounce 1.6s ease-in-out infinite; }
.hof h3 { font-size: 1.6rem; font-weight: 900; }

/* Pelinäyttämö */
body.playing { overflow: hidden; }
body.playing .toast { bottom: auto; top: calc(74px + env(safe-area-inset-top, 0px)); }
.stage { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--sec-shop); animation: stageIn .4s var(--ease-bounce); }
.stage[hidden] { display: none; }
@keyframes stageIn { from { transform: translateY(40px) scale(.96); opacity: 0; } }
.stage-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: var(--card); border-bottom: 3px solid var(--ink);
}
.stage-title { font: 900 1.15rem/1 "Fraunces", serif; }
.stage-body { position: relative; flex: 1; overflow: hidden; }

.end-screen {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px 20px calc(24px + var(--safe-b)); text-align: center;
  background: color-mix(in srgb, var(--sec-shop) 94%, transparent);
  animation: stageIn .45s var(--ease-bounce);
}
.end-score { font: 900 clamp(4rem, 22vw, 6rem)/1 "Fraunces", serif; color: var(--accent); animation: scorePop .7s var(--ease-bounce); }
@keyframes scorePop { from { transform: scale(0) rotate(-20deg); } }
.end-unit { font-weight: 800; margin-top: -6px; }
.end-rank { font: 900 1.25rem/1.2 "Fraunces", serif; }
.end-screen .btn { width: min(100%, 320px); }

/* Eeliksen laskut */
.lp { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px 16px calc(18px + var(--safe-b)); }
.lp-hud { display: flex; justify-content: space-between; align-items: center; font: 900 1.2rem/1 "DM Sans", sans-serif; }
.lp-score { font: 900 2rem/1 "Fraunces", serif; font-variant-numeric: tabular-nums; }
.lp-combo { background: var(--ink); color: var(--butter); padding: 6px 12px; border-radius: 999px; }
.lp-combo.hot { background: var(--accent); color: #fff; animation: comboHot .45s ease-in-out infinite alternate; }
@keyframes comboHot { to { transform: scale(1.15) rotate(-4deg); } }
.lp-time { font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.lp-bar { height: 14px; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--card); }
.lp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--butter), var(--mint)); transform-origin: left; transition: transform .1s linear; }
.lp.hurry .lp-bar i { animation: hurry .3s steps(2) infinite; }
@keyframes hurry { 50% { filter: brightness(1.7) saturate(1.5); } }
.lp.hurry .lp-time { color: #e0332b; animation: comboHot .3s ease-in-out infinite alternate; }
.lp-q { flex: 1; display: grid; place-items: center; text-align: center; padding: 0 6px; font: 900 clamp(1.6rem, 8vw, 2.6rem)/1.15 "Fraunces", serif; }
.lp-q.pop-in, .th-ask.pop-in { animation: qIn .4s var(--ease-bounce); }
@keyframes qIn { from { transform: scale(.6) rotate(-4deg); opacity: 0; } }
.lp-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-btn {
  min-height: 74px; padding: 6px;
  font: 900 1.12rem/1.15 "DM Sans", sans-serif; color: var(--ink);
  background: var(--card); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--shadow);
  cursor: pointer; touch-action: manipulation; transition: transform .12s, box-shadow .12s;
}
.lp-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--shadow); }
.lp-btn.right { background: var(--mint); color: #2b1a12; animation: jelly .5s var(--ease-bounce); }
.lp-btn.wrong { background: #ff8a80; color: #2b1a12; animation: wrongShake .4s; }
@keyframes wrongShake { 25% { transform: translateX(-8px) rotate(-3deg); } 75% { transform: translateX(8px) rotate(3deg); } }

/* Karkkisade */
.kk { position: absolute; inset: 0; background: linear-gradient(var(--sec-faq), var(--sec-hero)); }
.kk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.kk-hud { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; justify-content: space-between; font: 900 1.5rem/1 "Fraunces", serif; pointer-events: none; }
.kk-hint { position: absolute; bottom: 130px; left: 0; right: 0; text-align: center; font-weight: 800; color: var(--muted); pointer-events: none; animation: hintBob 1.2s ease-in-out infinite; transition: opacity .4s; }
.kk-hint.gone { opacity: 0; }
@keyframes hintBob { 50% { transform: translateX(16px); } }

/* Kahvitehdas */
.th { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 16px calc(24px + var(--safe-b)); }
.th-top { text-align: center; }
.th-count b { display: block; font: 900 clamp(2.6rem, 14vw, 3.6rem)/1 "Fraunces", serif; font-variant-numeric: tabular-nums; }
.th-count span { font-weight: 800; color: var(--muted); }
.th-rate { display: inline-block; margin-top: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 900; background: var(--ink); color: var(--butter); }
.th-mug { width: min(56vw, 230px); background: none; border: none; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.th-mug .mug { width: 100%; overflow: visible; }
.th-ask { width: 100%; max-width: 420px; display: grid; gap: 8px; padding: 12px; text-align: center; font-weight: 800; background: var(--butter); color: #2b1a12; border: 3px solid #2b1a12; border-radius: 18px; }
.th-ask[hidden] { display: none; }
.th-ask-x { background: none; border: none; cursor: pointer; font: 800 .85rem/1 "DM Sans", sans-serif; color: #6e5546; text-decoration: underline; }
.th-ups { width: 100%; max-width: 420px; display: grid; gap: 10px; }
.th-up {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 10px;
  padding: 10px 12px; text-align: left; font: inherit; color: var(--ink);
  background: var(--card); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--shadow);
  opacity: .55; cursor: pointer; transition: opacity .2s;
}
.th-up.can { opacity: 1; }
.th-up.can .th-up-cost { background: var(--mint); color: #2b1a12; }
.th-up-emoji { grid-row: span 2; font-size: 1.8rem; }
.th-up-body { grid-row: span 2; }
.th-up-body b { display: block; font-size: .95rem; }
.th-up-body small { color: var(--muted); font-weight: 700; opacity: 1; }
.th-up-cost { font-weight: 900; font-size: .85rem; padding: 4px 8px; border-radius: 999px; background: var(--bg-2); white-space: nowrap; }
.th-up-owned { font-weight: 900; font-size: .8rem; text-align: right; color: var(--accent); }
.th-up.bought { animation: jelly .5s var(--ease-bounce); }
.th-up.nope { animation: wrongShake .35s; }
.th-plus { position: fixed; z-index: 101; pointer-events: none; font: 900 1.4rem/1 "Fraunces", serif; color: var(--accent); text-shadow: 0 2px 0 #2b1a12; }

/* ---------- Kuka mä oon ---------- */
.avatar { position: relative; width: 150px; height: 150px; margin: 0 auto 16px; display: grid; place-items: center; font-size: 84px; }
.avatar::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--accent), var(--butter), var(--mint), var(--sky), var(--pink), var(--accent));
  animation: spin 4s linear infinite;
}
.avatar::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--card); border: 3px solid var(--ink); }
.avatar span { position: relative; z-index: 1; line-height: 1; transform-origin: 70% 80%; animation: handWave 2.2s ease-in-out infinite; }
@keyframes handWave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-8deg); } }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fact { position: relative; height: 156px; perspective: 800px; background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--ink); }
.fact .front, .fact .back {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; text-align: center;
  border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--shadow);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .7s var(--ease-bounce);
}
.fact .front { background: var(--card); font-size: 2.3rem; line-height: 1; }
.fact .front b { font: 900 1.02rem/1.2 "DM Sans", sans-serif; }
.fact .front small { font-size: .7rem; font-weight: 800; color: var(--muted); opacity: 1; }
.fact .back { background: var(--butter); color: #2b1a12; font: 800 .98rem/1.3 "DM Sans", sans-serif; transform: rotateY(180deg); }
.fact:nth-child(3n+2) .back { background: var(--pink); }
.fact:nth-child(3n) .back { background: var(--mint); }
.fact.flipped .front { transform: rotateY(-180deg); }
.fact.flipped .back { transform: rotateY(0); }

.skills { max-width: 560px; margin: 0 auto; padding: 20px 18px; display: grid; gap: 16px; }
.skill { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.skill span { font-weight: 800; }
.skill b { color: var(--accent); letter-spacing: .05em; white-space: nowrap; }
.skill i { grid-column: 1 / -1; position: relative; height: 16px; overflow: hidden; border: 3px solid var(--ink); border-radius: 999px; background: var(--bg); }
.skill i::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--v) * 1%);
  background: repeating-linear-gradient(-45deg, var(--accent) 0 8px, var(--butter) 8px 16px);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.3s var(--ease-bounce); transition-delay: calc(var(--n) * .15s + .2s);
  animation: stripeMove .8s linear infinite;
}
@keyframes stripeMove { to { background-position: 22.6px 0; } }
.skills.in .skill i::after { transform: scaleX(1); }

.github-mega {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: 560px; margin: 0 auto; padding: 30px 18px; text-align: center; text-decoration: none;
  color: #fff; background: #1b1030;
  border: 3px solid var(--ink); border-radius: 28px; box-shadow: 0 8px 0 var(--shadow);
}
.github-mega::before {
  content: ""; position: absolute; inset: -60%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 79, 216, .55), transparent 30%, rgba(57, 255, 136, .45), transparent 60%);
  animation: spin 5s linear infinite;
}
.github-mega > * { position: relative; }
.gm-emoji { font-size: 3.6rem; line-height: 1; animation: artBounce 1.4s ease-in-out infinite; }
.gm-text { font: 900 clamp(1.7rem, 8vw, 2.5rem)/1.05 "Fraunces", serif; }
.gm-sub { font-weight: 800; color: #ffd866; }
.follow { display: grid; gap: 12px; max-width: 480px; margin: 0 auto; }
.follow a {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none;
  color: var(--ink); background: var(--card); font-weight: 900;
  border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--shadow);
  transition: transform .3s var(--ease-bounce);
}
.follow a > span { font-size: 1.8rem; line-height: 1; }
.follow a small { display: block; font-weight: 700; color: var(--muted); opacity: 1; }
.follow a:active { transform: scale(.97); }
.follow a.linkedin { background: #0a66c2; color: #fff; }
.follow a.linkedin small { color: #d4e6ff; }

/* ---------- Mainosta ---------- */
.ad-offer { position: relative; max-width: 420px; margin: 18px auto 0; padding: 24px 20px 20px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.ad-offer .now { font-size: clamp(3rem, 16vw, 4.2rem); color: var(--accent); }
.ad-builder { max-width: 520px; margin: 0 auto; padding: 20px 18px; display: grid; gap: 10px; }
.ad-builder label { font-weight: 900; }
.ad-builder input {
  width: 100%; padding: 14px;
  font: 700 1.05rem/1.2 "DM Sans", sans-serif; color: var(--ink);
  background: var(--bg); border: 3px solid var(--ink); border-radius: 14px;
}
.ad-count { justify-self: end; margin-top: -4px; font-size: .8rem; font-weight: 800; color: var(--muted); }
.ad-builder .fine { margin-top: 0; }
.rules { list-style: none; max-width: 560px; margin: 0 auto; padding: 18px; display: grid; gap: 12px; font-weight: 700; }

/* ---------- Otsikot sikin sokin ---------- */
.chaos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .12em .22em; line-height: 1.1; }
.chaos .cw {
  display: inline-block; padding: .04em .2em .1em; border-radius: .18em;
  transform: translateY(var(--y)) rotate(var(--r));
  animation: cwWobble 3.4s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes cwWobble {
  0%, 100% { transform: translateY(var(--y)) rotate(var(--r)); }
  50% { transform: translateY(calc(var(--y) * -1)) rotate(calc(var(--r) * -.6)); }
}
.chaos .c1 { background: var(--butter); color: #2b1a12; }
.chaos .c2 { background: #2b1a12; color: #ffd866; }
.chaos .c3 { background: var(--pink); color: #2b1a12; font-style: italic; }
.chaos .c4 { color: var(--accent); font-size: 1.12em; }
.chaos .c5 { background: var(--mint); color: #2b1a12; font: 900 .72em/1.2 "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .04em; }

/* Tarralaput hyväksytyille vitseille */
.note {
  display: inline-block; max-width: 32ch; margin-top: 18px; padding: 12px 16px;
  font-weight: 800; line-height: 1.35; color: #2b1a12; background: var(--butter);
  border: 3px solid #2b1a12; border-radius: 6px 18px 8px 20px; box-shadow: 0 5px 0 #2b1a12;
  transform: rotate(-2.5deg);
}
.note.pink { background: var(--pink); transform: rotate(2deg); }
.note small { display: block; margin-top: 4px; font-weight: 700; opacity: .75; }

/* ---------- Kaveruus ---------- */
.friend-hands { font-size: 4.2rem; line-height: 1; display: inline-block; margin: 0 auto; animation: handshake .9s ease-in-out infinite; }
@keyframes handshake { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-12deg) translateY(-4px); } 75% { transform: rotate(12deg) translateY(4px); } }
.shout {
  font: 900 1.35rem/1.1 "DM Sans", sans-serif; text-transform: uppercase; letter-spacing: .02em;
  color: var(--accent); animation: shout .7s ease-in-out infinite alternate;
}
@keyframes shout { to { transform: scale(1.08) rotate(-2deg); } }
.friend-pop h2 { font-size: 1.9rem; }
.friend-pop .now, .friend-card .now { font-size: 2.6rem; color: var(--accent); }
.friend-card { position: relative; max-width: 420px; margin: 0 auto; padding: 26px 20px 20px; display: grid; gap: 10px; justify-items: center; text-align: center; }

/* ---------- 3 minuutin mainos ---------- */
.bigad .modal-box { gap: 10px; }
.bigad-time { font: 900 1.6rem/1 "Fraunces", serif; font-variant-numeric: tabular-nums; background: #2b1a12; color: #ffd866; padding: 6px 12px; border-radius: 12px; }
.bigad-bar { height: 10px; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--bg); }
.bigad-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.bigad h2 { font-size: 2.4rem; animation: shout .5s ease-in-out infinite alternate; }
.pw-free.later { opacity: 0; pointer-events: none; transition: opacity .4s; }
.pw-free.later.show { opacity: 1; pointer-events: auto; }

/* ---------- Iso LinkedIn-nappi ---------- */
.linkedin-mega {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: 560px; margin: 0 auto 18px; padding: 30px 18px; text-align: center; text-decoration: none;
  color: #fff; background: #0a66c2;
  border: 3px solid #2b1a12; border-radius: 28px; box-shadow: 0 8px 0 #2b1a12;
  animation: liPulse 1.6s ease-in-out infinite;
}
.linkedin-mega::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 35%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); animation: shine 2.6s ease-in-out infinite;
}
.linkedin-mega > * { position: relative; }
@keyframes liPulse { 50% { transform: scale(1.025) rotate(-.6deg); } }
.lm-emoji { font-size: 3.6rem; line-height: 1; animation: artBounce 1.3s ease-in-out infinite; }
.lm-text { font: 900 clamp(1.6rem, 8vw, 2.4rem)/1.05 "Fraunces", serif; }
.lm-sub { font-weight: 800; color: #d4e6ff; }

/* ---------- Vähemmän liikettä ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
  .reveal, .reveal:not(.in) { opacity: 1; transform: none; }
  .sale { transform: rotate(12deg); }
  .was { opacity: 1; }
  .was::after { transform: scaleX(1); }
  .math span { opacity: 1; transform: none; }
  .floaters { display: none; }
  .pw-free.later { opacity: 1; pointer-events: auto; }
}