/* ==========================================================================
   The reveal film: a short animated scene after every game.
   Letterbox → clapperboard → title card → two animals walk on, the meter
   swings, the verdict card flips, and the ending plays out:
   dawn + hug (+ crown) · daylight high-five · thin ice · storm + block wall.
   Hooks used by tests: .show.is-in/.is-meter/.is-card/.is-revealed/.is-done,
   .show-title, .show-actor, .show-bubble, [data-needle], .flip-title.
   ========================================================================== */

body.show-open { overflow: hidden; }
body.show-open #fx { z-index: 136; }

.show {
  --bar: clamp(28px, 7.5vh, 76px);
  --aw: clamp(104px, min(38vw, 30vh), 244px);
  --gap: min(28vw, 270px);
  --ground: calc(var(--bar) + clamp(16px, 4.5vh, 44px));
  --hill-far: #3b1f70;
  --hill-near: #27124f;
  --soil: #1a0d36;
  --edge: #6a3fb0;
  position: fixed; inset: 0; z-index: 130;
  /* clip, not just hidden: focus or scrollIntoView must never scroll the film frame */
  overflow: hidden; overflow: clip; isolation: isolate;
  color: #fff; background: #07040f;
}
.show[data-sky="dawn"] { --hill-far: #a3478f; --hill-near: #6c2b78; --soil: #43195a; --edge: #ff9fb8; }
.show[data-sky="day"] { --hill-far: #2e8c91; --hill-near: #1e6973; --soil: #134752; --edge: #8ff0d0; }
.show[data-sky="ice"] { --hill-far: #2d6496; --hill-near: #1d4573; --soil: #a9d9f5; --edge: #ffffff; }
.show[data-sky="storm"] { --hill-far: #2a0d1d; --hill-near: #190810; --soil: #0e050a; --edge: #5a1426; }

.show-bg { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 42%, #1e1244 0%, #07040f 72%); }

/* ------------------------------------------------------------------ the world (camera) */
.sc-world {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; transform: scale(1.22); transform-origin: 50% 82%;
  transition: opacity 1.1s ease, transform 3.6s cubic-bezier(.16, 1, .3, 1);
}
.show.is-scene .sc-world { opacity: 1; transform: scale(1); }
.show.is-meter .sc-world { transform: scale(1.06) translateY(1.2%); transition-duration: 1.1s, 1.8s; }
.show.is-card .sc-world { transform: scale(1.03); }
.show.is-revealed .sc-world { animation: scPunch .8s cubic-bezier(.2, .9, .3, 1); }
.show.is-done .sc-world { transform: scale(1); transition-duration: 1.1s, 2.6s; }
@keyframes scPunch { 0% { transform: scale(1.03); } 22% { transform: scale(1.13); } 100% { transform: scale(1.03); } }

.sc-sky { position: absolute; inset: 0; }
.sc-sky i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.sc-sky .s-night { opacity: 1; background: linear-gradient(180deg, #0c0624 0%, #21114c 36%, #57288a 68%, #c4568f 100%); }
.sc-sky .s-dawn { background: linear-gradient(180deg, #2b2783 0%, #8b49a6 34%, #ff7f8f 66%, #ffd28a 100%); }
.sc-sky .s-day { background: linear-gradient(180deg, #1b3276 0%, #2d8ab0 44%, #6fd8bf 76%, #ffe8a6 100%); }
.sc-sky .s-ice { background: linear-gradient(180deg, #071830 0%, #163d6c 44%, #4e96c8 78%, #c4ebff 100%); }
.sc-sky .s-storm { background: linear-gradient(180deg, #040206 0%, #12070f 40%, #370a1b 74%, #661327 100%); }
.show[data-sky="dawn"] .s-dawn, .show[data-sky="day"] .s-day, .show[data-sky="ice"] .s-ice, .show[data-sky="storm"] .s-storm { opacity: 1; }

.sc-stars { position: absolute; inset: 0 0 34%; transition: opacity 1.6s; }
.sc-stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px #ffffffaa; animation: scTwinkle 3s ease-in-out infinite; animation-delay: var(--d); }
.show:is([data-sky="dawn"], [data-sky="day"]) .sc-stars { opacity: .12; }
.show[data-sky="storm"] .sc-stars { opacity: 0; }
@keyframes scTwinkle { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }

.sc-moon {
  position: absolute; right: 13%; top: calc(var(--bar) + 6vh);
  width: clamp(40px, 10vw, 84px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffdf0 0%, #ffeeb4 55%, #f3cd72 100%);
  box-shadow: 0 0 40px 10px #ffe9a84d, 0 0 120px 46px #ff9fd02e;
  transition: transform 2s var(--ease-in), opacity 1.4s;
}
.sc-moon::before, .sc-moon::after { content: ""; position: absolute; border-radius: 50%; background: #e8bf62; opacity: .45; }
.sc-moon::before { width: 22%; height: 22%; left: 54%; top: 26%; }
.sc-moon::after { width: 14%; height: 14%; left: 30%; top: 60%; }
.show[data-sky]:not([data-sky="night"]) .sc-moon { transform: translateY(46vh); opacity: 0; }

.sc-sun {
  position: absolute; left: 50%; bottom: calc(var(--ground) + 4vh);
  width: clamp(130px, 38vw, 300px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle, #fff8d4 0 34%, #ffd56e 50%, #ffae6e66 62%, #ff8f8f00 72%);
  opacity: 0; transform: translateY(70%) scale(.8);
  transition: transform 2.6s var(--ease-out), opacity 1.2s;
}
.sc-sun::after { content: ""; position: absolute; inset: -40%; border-radius: 50%; background: repeating-conic-gradient(#fff3c066 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 28%, transparent 66%); mask: radial-gradient(circle, #000 28%, transparent 66%); animation: spin 30s linear infinite; }
.show:is([data-sky="dawn"], [data-sky="day"]) .sc-sun { opacity: 1; transform: none; }

.sc-hills { position: absolute; left: -2%; width: 104%; pointer-events: none; transition: translate 3.6s cubic-bezier(.16, 1, .3, 1); }
.sc-hills path { transition: fill 1.8s ease; }
.sc-hills--far { bottom: calc(var(--ground) - 2px); height: 30vh; translate: 0 9vh; }
.sc-hills--far path { fill: var(--hill-far); }
.sc-hills--near { bottom: calc(var(--ground) - 2px); height: 17vh; translate: 0 15vh; }
.sc-hills--near path { fill: var(--hill-near); }
.show.is-scene .sc-hills { translate: 0 0; }
.sc-ground { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--ground) + 2px); background-color: var(--soil); box-shadow: inset 0 3px 0 var(--edge); transition: background-color 1.8s, box-shadow 1.8s; }
.show[data-sky="ice"] .sc-ground { background-image: linear-gradient(100deg, transparent 20%, #ffffff66 35%, transparent 50%); }

/* Fairy lights strung under the top bar. */
.sc-lights { position: absolute; left: 0; right: 0; top: calc(var(--bar) - 6px); height: 13vh; pointer-events: none; }
.sc-lights svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-lights i { position: absolute; width: 9px; height: 12px; margin: -2px 0 0 -4.5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--c); box-shadow: 0 0 10px 3px color-mix(in srgb, var(--c) 70%, transparent); animation: scBulb 2.4s ease-in-out infinite; animation-delay: var(--d); transition: opacity .6s; }
@keyframes scBulb { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.show[data-sky="storm"] .sc-lights i { animation: scFlicker 1.3s steps(2) infinite; animation-delay: var(--d); }
@keyframes scFlicker { 0%, 100% { opacity: .15; } 50% { opacity: .6; } }

/* Stage spotlights during the suspense, sun rays for real friends. */
.show-beams { position: absolute; inset: 0; opacity: 0; transition: opacity 1s .2s; pointer-events: none; mix-blend-mode: screen; }
.show.is-scene .show-beams { opacity: .8; }
.show.is-revealed .show-beams { opacity: 0; }
.show-beams i { position: absolute; top: -10%; left: 50%; width: 200px; height: 130%; transform-origin: 50% 0; background: linear-gradient(180deg, #ffffff40, #ffffff00 78%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); animation: beam 5s ease-in-out infinite; }
.show-beams i:nth-child(1) { --a: -30deg; }
.show-beams i:nth-child(2) { --a: 0deg; animation-delay: -1.6s; background: linear-gradient(180deg, #ffd77a4d, transparent 78%); }
.show-beams i:nth-child(3) { --a: 30deg; animation-delay: -3.2s; background: linear-gradient(180deg, #ff8cc84d, transparent 78%); }
.show.is-meter .show-beams i { animation-duration: 2.2s; }
@keyframes beam { 0%, 100% { transform: translateX(-50%) rotate(calc(var(--a) - 12deg)); } 50% { transform: translateX(-50%) rotate(calc(var(--a) + 12deg)); } }

.show-rays { position: absolute; left: 50%; bottom: calc(var(--ground) + var(--aw) * .45); width: 900px; height: 900px; margin: 0 0 -450px -450px; border-radius: 50%; opacity: 0; transform: scale(.3); background: repeating-conic-gradient(#fff1a640 0 8deg, transparent 8deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); transition: opacity .8s, transform 1.4s var(--ease-out); pointer-events: none; }
.show.is-real.is-revealed .show-rays { opacity: 1; transform: scale(1); animation: spin 18s linear infinite; }

/* ------------------------------------------------------------------ actors */
.show-stage { position: absolute; z-index: 6; left: 0; right: 0; bottom: var(--ground); height: calc(var(--aw) * 1.1); }
.show-actor {
  --x: -80vw;
  position: absolute; bottom: 0; left: 50%;
  width: var(--aw); margin-left: calc(var(--aw) / -2);
  translate: var(--x) 0;
  transition: translate 1.7s cubic-bezier(.25, .8, .3, 1);
}
.show-actor--b { --x: 80vw; }
.show-actor.is-in { --x: calc(var(--gap) * -1); }
.show-actor--b.is-in { --x: var(--gap); }
.show.is-near .show-actor--a { --x: calc(var(--aw) * -.6); }
.show.is-near .show-actor--b { --x: calc(var(--aw) * .6); }
.show.is-hug .show-actor--a { --x: calc(var(--aw) * -.33); }
.show.is-hug .show-actor--b { --x: calc(var(--aw) * .33); }
.show.is-hug .show-actor--a { z-index: 2; }
.show-actor .cr { position: relative; z-index: 1; filter: drop-shadow(0 12px 10px #0006); transition: filter 1.2s; }
.show.is-beat .show-actor .cr { animation: scHop .3s ease-out; }
@keyframes scHop { 40% { transform: translateY(-6px) scale(1.02, .98); } }
.show[data-sky="storm"] .show-actor--b .cr { filter: saturate(.55) brightness(.85) drop-shadow(0 12px 10px #0006); }
.show-tag {
  position: absolute; z-index: 3; left: 50%; bottom: -15px; translate: -50% 0;
  display: flex; align-items: center; gap: 5px; max-width: calc(var(--aw) + 16px);
  padding: 2px 11px 2px 3px; border: 2px solid var(--ink); border-radius: 99px;
  background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink);
  font: 700 13px var(--f-display); white-space: nowrap;
}
.show-tag b { overflow: hidden; text-overflow: ellipsis; }
.show-tag .sc-mini { flex: none; width: 24px; height: 24px; border-width: 1.5px; box-shadow: none; }

/* Speech bubbles ride along with their actor. */
.show-bubble {
  position: absolute; z-index: 4; bottom: calc(100% + 6px);
  width: max-content; max-width: min(62vw, 300px);
  padding: 10px 14px; border: var(--line); border-radius: 18px;
  background: #fff; color: var(--ink); box-shadow: var(--sh-sm);
  font: 600 16px/1.25 var(--f-display);
  opacity: 0; transform: scale(.3); pointer-events: none;
}
.show-bubble::after { content: ""; position: absolute; bottom: -11px; width: 17px; height: 17px; background: #fff; border-right: var(--line); border-bottom: var(--line); transform: rotate(45deg); }
.show-bubble--a { left: 2%; transform-origin: 20% 100%; }
.show-bubble--a::after { left: 26%; }
.show-bubble--b { right: 2%; transform-origin: 80% 100%; }
.show-bubble--b::after { right: 26%; }
.show-bubble.is-on { animation: bubbleIn .42s var(--ease-spring) forwards; }
.show-bubble.is-out { animation: bubbleOut .25s var(--ease-in) forwards; }

/* Hug heart, high-five spark, crown, rain cloud, ice and the wall. */
.sc-love { position: absolute; z-index: 5; left: 50%; bottom: calc(var(--aw) * 1.02); width: calc(var(--aw) * .46); translate: -50% 0; opacity: 0; transform: scale(0); }
.show.is-love .sc-love { animation: scLove 2.6s cubic-bezier(.3, .9, .4, 1) forwards; }
@keyframes scLove {
  0% { opacity: 0; transform: translateY(30px) scale(0) rotate(-20deg); }
  16% { opacity: 1; transform: scale(1.12) rotate(4deg); }
  24% { transform: scale(1); }
  34% { transform: scale(1.14); }
  42%, 62% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(-90px) scale(.7); }
}

.sc-five { position: absolute; z-index: 5; left: 50%; bottom: calc(var(--aw) * .62); width: calc(var(--aw) * .6); translate: -50% 0; opacity: 0; transform: scale(0); }
.show.is-five .sc-five { animation: scFive .9s var(--ease-spring) forwards; }
@keyframes scFive { 0% { opacity: 0; transform: scale(0) rotate(-40deg); } 60% { opacity: 1; transform: scale(1.15) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

.show.is-crowned .show-actor--b .cr-crown { animation: scCrown .9s cubic-bezier(.3, 1.4, .5, 1) both, scCrownShine 2s ease-in-out .9s infinite; }
@keyframes scCrown { 0% { opacity: 0; transform: translateY(-140px) rotate(-30deg) scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes scCrownShine { 50% { filter: brightness(1.25) drop-shadow(0 0 6px #ffe27a); } }

.sc-raincloud { position: absolute; z-index: 4; left: 50%; bottom: calc(100% - var(--aw) * .16); width: 70%; translate: -50% 0; opacity: 0; transform: translateY(-30px) scale(.5); transition: opacity .5s, transform .7s var(--ease-spring); }
.show.is-cloud .show-actor--b .sc-raincloud { opacity: 1; transform: none; }
.sc-raincloud svg { width: 100%; overflow: visible; }
.sc-raincloud .drop { animation: scCloudDrop .7s linear infinite; animation-delay: var(--d); }
@keyframes scCloudDrop { from { transform: translateY(-4px); opacity: 1; } to { transform: translateY(46px); opacity: 0; } }

.sc-ice { position: absolute; z-index: 0; left: 50%; bottom: -12px; width: calc(var(--aw) * 1.5); height: calc(var(--aw) * .3); margin-left: calc(var(--aw) * -.75); translate: var(--gap) 0; opacity: 0; transform: scaleX(.3); transition: opacity .5s, transform .6s var(--ease-out); }
.sc-ice svg { width: 100%; height: 100%; overflow: visible; }
.sc-ice .crack { stroke-dasharray: 160; stroke-dashoffset: 160; }
.show.is-ice .sc-ice { opacity: 1; transform: none; }
.show.is-ice .sc-ice .crack { animation: scCrack .9s var(--ease-out) .25s forwards; }
@keyframes scCrack { to { stroke-dashoffset: 0; } }

.sc-wall {
  --b: calc(var(--aw) * .19);
  position: absolute; z-index: 5; left: 50%; bottom: 0;
  display: grid; grid-template-columns: repeat(3, var(--b)); grid-auto-rows: var(--b);
  translate: -50% 0; pointer-events: none;
}
.sc-block { position: relative; opacity: 0; border: 2.5px solid var(--ink); border-radius: 6px; background: linear-gradient(180deg, #ff7186, #e2364f); box-shadow: inset 0 3px 0 #ffffff59, inset 0 -3px 0 #0000002e; }
.sc-block--1 { background: linear-gradient(180deg, #ff9a68, #f06b33); }
.sc-block--2 { background: linear-gradient(180deg, #ff7fb0, #e44686); }
.sc-block::after { content: ""; position: absolute; left: 30%; top: 26%; width: 40%; height: 26%; border-radius: 50%; background: #ffffff40; }
.show.is-wall .sc-block { animation: scBlock .55s cubic-bezier(.3, 1.4, .55, 1) calc(var(--i) * 85ms) both; }
@keyframes scBlock { 0% { opacity: 1; transform: translateY(-115vh) rotate(var(--r)); } 70% { opacity: 1; transform: translateY(3px) rotate(0) scale(1.04, .94); } 100% { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ weather and lens */
.sc-weather { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; transition: opacity 1.2s; overflow: hidden; overflow: clip; }
.show[data-weather] .sc-weather { opacity: 1; }
.sc-weather i { position: absolute; top: -12vh; left: var(--x); }
.sc-weather--rain i { width: 1.6px; height: 9vh; background: linear-gradient(#bcd2ff00, #bcd2ffb0); rotate: 12deg; animation: scRain var(--t) linear infinite; animation-delay: var(--d); }
@keyframes scRain { to { transform: translateY(125vh); } }
.sc-weather--snow i { width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: .85; animation: scSnow var(--t) linear infinite; animation-delay: var(--d); }
@keyframes scSnow { 0% { transform: translate(0, 0); } 50% { transform: translate(18px, 60vh); } 100% { transform: translate(-8px, 125vh); } }

.sc-bolt { position: absolute; inset: 0; z-index: 18; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 30% 10%, #f3e6ff 0%, #b9a4ff88 40%, transparent 75%); }
.sc-bolt svg { position: absolute; left: 22%; top: var(--bar); width: 18%; max-width: 120px; }
.sc-bolt.is-on { animation: scBolt .9s ease-out; }
@keyframes scBolt { 0% { opacity: 0; } 6% { opacity: 1; } 12% { opacity: .2; } 18% { opacity: .95; } 100% { opacity: 0; } }

.sc-vignette { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 58%, #000000a0 100%); }
.sc-grain {
  position: absolute; inset: -60%; z-index: 10; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: scGrain .6s steps(3) infinite;
}
@keyframes scGrain { 0% { transform: translate(0, 0); } 33% { transform: translate(-7%, 4%); } 66% { transform: translate(5%, -6%); } 100% { transform: translate(-3%, 8%); } }
.sc-leak { position: absolute; inset: 0; z-index: 11; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 35%, #ff9c6a55 48%, #ffd46a33 55%, transparent 68%); background-size: 260% 100%; }
.show.is-in .sc-leak { animation: scLeak 2.6s ease-in-out .5s; }
@keyframes scLeak { 0% { opacity: 0; background-position: 100% 0; } 30% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }

.show-flash { position: absolute; inset: 0; z-index: 20; background: #fff; opacity: 0; pointer-events: none; }
.show-flash.is-on { animation: whiteFlash .6s ease-out; }
@keyframes whiteFlash { 0% { opacity: 0; } 15% { opacity: .92; } 100% { opacity: 0; } }
.show-crack { position: absolute; inset: 0; z-index: 19; opacity: 0; pointer-events: none; }
.show.is-fake.is-revealed .show-crack { opacity: 1; animation: fadeIn .12s; }
.sc-pulse { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 40%, #ff7ab855 0%, #8f6bff22 45%, transparent 75%); }
.show.is-beat .sc-pulse { animation: scPulse .38s ease-out; }
@keyframes scPulse { 30% { opacity: 1; } 100% { opacity: 0; } }

/* Letterbox bars: the film frame. */
.sc-bars i { position: absolute; z-index: 22; left: 0; right: 0; height: var(--bar); background: #000; transition: transform .9s cubic-bezier(.7, 0, .2, 1); }
.sc-bars i:first-child { top: 0; transform: translateY(-101%); }
.sc-bars i:last-child { bottom: 0; transform: translateY(101%); }
.show.is-in .sc-bars i { transform: none; }

/* ------------------------------------------------------------------ opening: clapperboard + title card */
.sc-clap { position: absolute; z-index: 15; left: 50%; top: 50%; width: min(64vw, 300px); translate: -50% -50%; opacity: 0; transform: translateY(40px) scale(.7) rotate(-6deg); pointer-events: none; }
.sc-clap svg { width: 100%; overflow: visible; filter: drop-shadow(0 18px 24px #0009); }
.sc-clap-arm { transform-box: view-box; transform-origin: 14px 58px; rotate: -24deg; transition: rotate .14s cubic-bezier(.6, 0, 1, .4); }
.sc-slate { position: absolute; left: 7%; right: 7%; top: 47%; bottom: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; font: 700 clamp(15px, 4.6vw, 22px)/1.1 var(--f-display); text-align: center; }
.sc-slate b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-slate span { color: #ff8cc0; font-size: .8em; }
.show.is-clap .sc-clap { opacity: 1; transform: none; transition: opacity .3s, transform .55s var(--ease-spring); }
.show.is-snap .sc-clap-arm { rotate: 0deg; }
.show.is-clapped .sc-clap { opacity: 0; transform: translateY(-50px) scale(.9) rotate(5deg); transition: opacity .35s, transform .45s var(--ease-in); }

.show-title {
  position: absolute; z-index: 14; top: 42%; left: 0; right: 0; translate: 0 -50%;
  margin: 0; padding: 0 22px; text-align: center;
  font: 700 clamp(32px, 9vw, 66px)/1.08 var(--f-display);
  color: #fff4e4; text-shadow: 0 0 30px #ff9fd066, 0 4px 0 #0007;
  transition: opacity .6s, transform 1.2s var(--ease-out), filter .6s;
}
.show-title span { display: inline-block; opacity: 0; }
.show-title.is-in span { animation: scWord 1.1s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes scWord { 0% { opacity: 0; letter-spacing: .4em; filter: blur(10px); transform: translateY(14px); } 100% { opacity: 1; letter-spacing: normal; filter: blur(0); transform: none; } }
.show-title.is-up { opacity: 0; transform: scale(1.12); filter: blur(8px); }

/* ------------------------------------------------------------------ meter, card, words */
.meter { position: absolute; z-index: 12; top: calc(var(--bar) + 4.5vh); left: 50%; width: min(84vw, 360px); transform: translate(-50%, 40px) scale(.6); opacity: 0; transition: transform .8s var(--ease-spring), opacity .45s; text-align: center; }
.show.is-meter .meter { transform: translate(-50%, 0) scale(1); opacity: 1; }
.show.is-card .meter { transform: translate(-50%, -60px) scale(.7); opacity: 0; }
.meter svg { width: 100%; overflow: visible; filter: drop-shadow(0 8px 0 #0000004d) drop-shadow(0 0 30px #ff9fd040); }
.meter-labels { display: flex; justify-content: space-between; margin-top: -6px; font: 700 15px var(--f-display); letter-spacing: .08em; }
.meter-labels span { padding: 4px 12px; border: 2px solid var(--ink); border-radius: 99px; transition: transform .4s var(--ease-spring), box-shadow .4s; }
.meter-labels .is-fake { background: var(--red); }
.meter-labels .is-real { background: var(--mint-d); }
.show.is-lean-real .meter-labels .is-real, .show.is-lean-fake .meter-labels .is-fake { transform: scale(1.25); box-shadow: 0 0 0 6px #ffffff59; }
.meter-score { margin-top: 10px; font: 700 54px/1 var(--f-display); text-shadow: 0 4px 0 #00000059; }
.meter-score small { font-size: 26px; opacity: .8; }

.flip { position: absolute; z-index: 13; top: calc(var(--bar) + 5vh); left: 50%; width: min(80vw, 320px); height: 210px; margin-left: calc(min(80vw, 320px) / -2); perspective: 1200px; opacity: 0; transform: translateY(70vh) scale(.5) rotate(-10deg); transition: transform .9s var(--ease-spring), opacity .4s; }
.show.is-card .flip { opacity: 1; transform: none; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 10px 0 var(--ink), 0 0 60px #ffd77a40; -webkit-backface-visibility: hidden; backface-visibility: hidden; text-align: center; }
.flip-front { background: radial-gradient(circle at 50% 40%, #a98bff 0, #7b55ff 60%, #5a37d6 100%); overflow: hidden; }
.flip-front::before { content: ""; position: absolute; inset: 10px; border: 2px dashed #ffffff55; border-radius: 18px; }
.flip-front span { position: relative; font: 700 110px/1 var(--f-display); text-shadow: 0 6px 0 var(--ink); animation: heartbeat .8s ease-in-out infinite; }
.flip-back { transform: rotateY(180deg); overflow: hidden; }
.is-real .flip-back { background: linear-gradient(160deg, #6ff7c8 0%, #19cf97 50%, #0fa77a 100%); }
.is-fake .flip-back { background: linear-gradient(160deg, #ff8a99 0%, #ff3d57 50%, #c41733 100%); }
.flip-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, #ffffff8c 45%, transparent 60%); transform: translateX(-130%); }
.show.is-revealed .flip-back::after { animation: shine 2.6s ease-in-out .3s infinite; }
.flip-emoji { font-size: 52px; }
.show.is-revealed .flip-emoji { animation: popIn .6s var(--ease-spring) both; }
.flip-title { font: 700 clamp(26px, 8.4vw, 42px)/1.05 var(--f-display); overflow-wrap: anywhere; text-wrap: balance; color: #fff; text-shadow: 0 4px 0 var(--ink); letter-spacing: .02em; }
.flip-tier { padding: 4px 14px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; color: var(--ink); font: 700 16px var(--f-display); }
.show.is-done .flip { transform: scale(.82); transform-origin: 50% 0; }

.show-sub { position: absolute; z-index: 13; top: calc(var(--bar) + 5vh + 228px); left: 0; right: 0; margin: 0; padding: 0 24px; text-align: center; font: 700 20px/1.3 var(--f-display); text-shadow: 0 3px 0 #00000066, 0 0 18px #0008; min-height: 1.3em; transition: top .8s var(--ease-out); }
.show.is-done .show-sub { top: calc(var(--bar) + 5vh + 196px); }

/* ------------------------------------------------------------------ buttons and the ending */
.show-skip { position: absolute; z-index: 30; top: calc(var(--bar) / 2 + env(safe-area-inset-top) / 2); right: 14px; translate: 0 -50%; min-height: 34px; padding: 4px 14px; font-size: 14px; box-shadow: 0 3px 0 var(--ink); opacity: .9; }
.show-continue { position: absolute; z-index: 30; bottom: calc(var(--bar) / 2 + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 160%); opacity: 0; transition: transform .6s var(--ease-spring), opacity .3s; white-space: nowrap; pointer-events: none; }
.show.is-done .show-continue { transform: translate(-50%, 50%); opacity: 1; pointer-events: auto; animation: scContinue 1.6s ease-in-out .6s infinite; }
@keyframes scContinue { 0%, 100% { box-shadow: 0 6px 0 var(--ink), 0 0 0 0 #ff4f9a66; } 50% { box-shadow: 0 6px 0 var(--ink), 0 0 0 12px #ff4f9a00; } }
.show.is-leaving { animation: showOut .4s var(--ease-in) forwards; }
@keyframes showOut { to { opacity: 0; } }
.sc-curtain { position: fixed; inset: 0; z-index: 129; background: #000; pointer-events: none; }

@media (max-height: 700px) {
  .flip { height: 176px; }
  .show-sub { top: calc(var(--bar) + 5vh + 192px); font-size: 18px; }
  .show.is-done .show-sub { top: calc(var(--bar) + 5vh + 166px); }
  .meter { width: min(76vw, 300px); }
  .meter-score { font-size: 42px; }
  .show-bubble { font-size: 14px; padding: 8px 11px; }
}
@media (min-width: 900px) {
  .show-bubble { font-size: 18px; }
  .show-tag { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .show *, .show *::before, .show *::after { animation: none !important; transition: none !important; }
}