/* Dopa Word Gacha - theme layer "Americana x Britannia" (loaded after app.css). Packs, coin toss, jackpot, comic callouts,
   stage backgrounds, stamps. Everything here is CSS / inline SVG: no images. */

:root {
  --navy: #14224f; --navy2: #0b1536; --brass: #d9a521; --brass2: #8a5e0d; --cream: #fff6dc;
  --usred: #d42b2b; --usblue: #1d4fd8; --legal: #fff3a0;
}

/* ============================================================ pre-reveal: foil booster packs, boxes, the case */
.pk-stage { position: relative; width: 340px; height: 440px; animation: pkStageIn 380ms cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes pkStageIn { from { transform: translateY(60px) scale(0.75); opacity: 0; } }
.pk-title { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); text-align: center; z-index: 5; transition: opacity 240ms ease, translate 240ms ease; width: max-content; max-width: 100vw; }
.pk-title.away { opacity: 0; translate: 0 -14px; }
.pk-main { font-weight: 900; font-size: 30px; line-height: 1.1; white-space: nowrap; color: var(--yellow); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.pk-sub { margin-top: 1px; font-weight: 900; font-size: 15px; letter-spacing: 0.06em; white-space: nowrap; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.pk-title.bump { animation: pkBump 380ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pkBump { from { scale: 1.25; } }
.pk-world { position: absolute; left: 0; right: 0; top: 58px; height: 340px; }
.pk-caption { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font-weight: 900; font-size: 26px; letter-spacing: 0.04em; white-space: nowrap; color: var(--usred); -webkit-text-stroke: 6px #fff; paint-order: stroke fill; z-index: 5; }
.pk-caption.bump { animation: pkCapBump 420ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pkCapBump { from { scale: 1.28; rotate: -5deg; } }

/* foil colour variables, shared by packs, boxes and the case */
.pk, .bxo, .cso {
  --f1: #f6f2e7; --f2: #e0d9c5; --f3: #b3ab92; --em: #d42b2b; --glow: rgba(0, 0, 0, 0);
}
.pk.c1, .bxo.c1, .cso.c1 { --f1: #c6e4ff; --f2: #4aa3ff; --f3: #1456b8; --em: #ffd93b; --glow: rgba(60, 150, 255, 0.85); }
.pk.c2, .bxo.c2, .cso.c2 { --f1: #c5f7de; --f2: #2fcf86; --f3: #0e7a4a; --em: #fff06a; --glow: rgba(40, 210, 130, 0.85); }
.pk.c3, .bxo.c3, .cso.c3 { --f1: #ffc3bb; --f2: #ff4a3d; --f3: #9c130b; --em: #ffe14d; --glow: rgba(255, 60, 50, 0.9); }
.pk.c4, .bxo.c4, .cso.c4 { --f1: #fff6cf; --f2: #f4bb12; --f3: #a8731a; --em: #d42b2b; --glow: rgba(255, 200, 40, 1); }
.pk.c5, .bxo.c5, .cso.c5 { --f1: #ffd6ec; --f2: #b99cff; --f3: #5f7bff; --em: #ffffff; --glow: rgba(255, 150, 220, 1); }

.pk-slot { position: absolute; left: calc(50% - 80px); top: calc(50% - 120px); width: 160px; height: 240px;
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1)); transition: transform 380ms cubic-bezier(.3, 1.4, .5, 1); }
.pk-world.spread .pk-slot { transform: translate(calc(var(--x, 0px) * 1.14), var(--y, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1)); }
.pk { position: absolute; left: 0; top: 0; width: 160px; height: 240px; transform-origin: 50% 62%; transition: transform 420ms cubic-bezier(.2, 1.4, .4, 1);
  filter: drop-shadow(0 0 14px var(--glow)) drop-shadow(0 12px 10px rgba(0, 0, 0, 0.35)); }
.pk.shk { animation: pkShake 560ms ease-in-out; }
@keyframes pkShake { 10% { transform: translate(-5px, 2px) rotate(-5deg); } 25% { transform: translate(6px, -3px) rotate(6deg); } 40% { transform: translate(-7px, 2px) rotate(-7deg); } 55% { transform: translate(6px, -2px) rotate(6deg); } 70% { transform: translate(-4px, 1px) rotate(-4deg); } 85% { transform: translate(3px, 0) rotate(3deg); } }
.pk.zoom { transform: scale(1.2) translateY(-8px); }
.pk-lay { position: absolute; inset: 0; border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 3px var(--ink); }
.pk-foil { position: absolute; inset: 0; background: linear-gradient(112deg, var(--f1) 0%, var(--f2) 36%, var(--f3) 52%, var(--f2) 68%, var(--f1) 100%); }
.pk.c0 .pk-foil { background: linear-gradient(160deg, #f9f6ec, #ece6d4 60%, #ddd5bd); }
.pk.c0 .pk-foil::after { content: ""; position: absolute; inset: 0; opacity: 0.35; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 4px); }
.pk.c5 .pk-foil { background: linear-gradient(120deg, #ff8fbf, #ffe066, #8ff0c0, #8fd9ff, #c7a6ff, #ff8fbf); background-size: 300% 100%; animation: pkHolo 2.4s linear infinite; }
@keyframes pkHolo { to { background-position: -300% 0; } }
.pk-lay::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 140% 0; animation: pkShine 2.6s linear infinite; }
.pk.c0 .pk-lay::after { opacity: 0; }
@keyframes pkShine { from { background-position: 140% 0; } to { background-position: -60% 0; } }
.pk-lay::before { content: ""; position: absolute; inset: -30%; z-index: 4; opacity: 0; pointer-events: none; mix-blend-mode: overlay;
  background: repeating-radial-gradient(circle at 50% 56%, rgba(255, 255, 255, 0.95) 0 5px, rgba(255, 255, 255, 0) 5px 24px); }
.pk.up .pk-lay { animation: pkFoilFlash 680ms ease-out; }
.pk.up .pk-lay::before { animation: pkRipple 680ms ease-out; }
@keyframes pkFoilFlash { 0% { filter: brightness(1); } 28% { filter: brightness(2.4) saturate(1.6); } 100% { filter: brightness(1); } }
@keyframes pkRipple { 0% { opacity: 0.95; transform: scale(0.15); } 100% { opacity: 0; transform: scale(1.5); } }
.pk-crimp { position: absolute; left: 0; right: 0; height: 15px; z-index: 2; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0 2px, rgba(255, 255, 255, 0.4) 2px 3px, transparent 3px 6px), linear-gradient(var(--f2), var(--f3)); }
.pk-crimp.t { top: 0; border-bottom: 2px solid rgba(0, 0, 0, 0.35); } .pk-crimp.b { bottom: 0; border-top: 2px solid rgba(0, 0, 0, 0.35); }
.pk-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; }
.pk-perf { stroke: rgba(0, 0, 0, 0.42); stroke-width: 2; stroke-dasharray: 5 4; }
.pk-burst { fill: var(--em); stroke: #1d1b24; stroke-width: 3; stroke-linejoin: round; }
.pk-burst2 { fill: rgba(255, 255, 255, 0.38); }
.pk-t1 { font: 900 38px var(--ui); fill: #fff; stroke: #1d1b24; stroke-width: 7px; paint-order: stroke; stroke-linejoin: round; letter-spacing: 0.03em; }
.pk-t2 { font: 900 27px var(--ui); fill: #1d1b24; stroke: #fff; stroke-width: 5px; paint-order: stroke; stroke-linejoin: round; letter-spacing: 0.1em; }
.pk-star { fill: #fff; stroke: #1d1b24; stroke-width: 1.6; stroke-linejoin: round; }
.pk-band { fill: #1d1b24; }
.pk-t3 { font: 800 9.5px var(--ui); fill: #fff; letter-spacing: 0.06em; }
.pk-fan { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pk-card { position: absolute; left: 30px; top: 78px; width: 100px; height: 140px; border-radius: 8px; border: 3px solid #0d1a3b; transform-origin: 50% 100%;
  background: radial-gradient(60% 40% at 50% 50%, rgba(243, 217, 138, 0.25), transparent 70%), radial-gradient(120% 90% at 30% 20%, #2f5497 0%, #1b3166 55%, #111f45 100%); }
.pk-card::after { content: "Aa"; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 2px solid #e6b93c; color: #f3d98a; display: grid; place-items: center; font: 600 22px/1 var(--serif-fallback); }
/* tear: the strip flies off, the body drops away, the cards fan out of the opening */
.pk.tear .pk-top, .bxo.burst .pk .pk-top { animation: pkTop 640ms cubic-bezier(.2, .8, .3, 1) forwards; transform-origin: 90% 20%; }
.pk.tear .pk-body, .bxo.burst .pk .pk-body { animation: pkBody 560ms ease-out forwards; }
.pk.tear .pk-card, .bxo.burst .pk .pk-card { animation: pkCardUp 760ms cubic-bezier(.2, 1.2, .4, 1) forwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes pkTop { 0% { transform: none; opacity: 1; } 100% { transform: translate(60px, -120px) rotate(34deg); opacity: 0; } }
@keyframes pkBody { 0% { transform: none; opacity: 1; } 60% { opacity: 1; } 100% { transform: translateY(46px) scale(0.94); opacity: 0; } }
@keyframes pkCardUp { 0% { transform: translateY(0) scale(0.92); opacity: 1; } 100% { transform: translate(calc(var(--i) * 30px - 60px), -118px) rotate(calc(var(--i) * 13deg - 26deg)) scale(1.06); opacity: 1; } }

/* the booster box */
.bxo { position: absolute; left: calc(50% - 110px); top: calc(50% - 70px); width: 220px; height: 178px; transform-origin: 50% 80%; filter: drop-shadow(0 0 16px var(--glow)) drop-shadow(0 14px 10px rgba(0, 0, 0, 0.4)); }
.bxo.dbl0 { left: calc(50% - 190px); scale: 0.72; } .bxo.dbl1 { left: calc(50% - 30px); scale: 0.72; }
.bxo.shk { animation: pkShake 560ms ease-in-out; }
.bxo-in { position: absolute; left: 0; top: 0; width: 220px; height: 50px; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); background: linear-gradient(#020208, #0d0d1c); z-index: 1; }
.bxo-packs { position: absolute; inset: 0; z-index: 2; }
.bxo-front { position: absolute; left: 0; top: 44px; width: 220px; height: 134px; z-index: 3; border: 4px solid #070b1c; border-radius: 4px 4px 8px 8px; display: grid; align-content: center; justify-items: center; gap: 2px; text-align: center;
  background: linear-gradient(160deg, #27408f, var(--navy) 55%, var(--navy2)); box-shadow: inset 0 0 0 3px var(--brass), inset 0 0 0 5px #070b1c; }
.bxo-front b { font-weight: 900; font-size: 25px; letter-spacing: 0.06em; color: #ffe08a; -webkit-text-stroke: 4px #070b1c; paint-order: stroke fill; text-shadow: 0 3px 0 var(--usred); }
.bxo-front span { font-weight: 800; font-size: 11px; letter-spacing: 0.1em; color: #fff; }
.bxo-band { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 14px; border-radius: 3px; border: 2px solid #070b1c; background: linear-gradient(90deg, var(--f1), var(--f2), var(--f3), var(--f2), var(--f1)); }
.bxo-lid { position: absolute; left: 0; top: 0; width: 220px; height: 52px; z-index: 4; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); background: linear-gradient(#3b57b4, #1f3a8f); transition: transform 560ms cubic-bezier(.3, 1.2, .4, 1), opacity 480ms ease; transform-origin: 50% 100%; }
.bxo-lid i { position: absolute; inset: 6px 14px; border: 2px solid var(--brass); border-radius: 2px; clip-path: inherit; opacity: 0.7; }
.bxo.open .bxo-lid { transform: translateY(-130px) rotate(-26deg) scale(0.9); opacity: 0; }
.bxo .pk.mini { position: absolute; left: calc(50% - 80px + var(--x0, 0px)); top: 10px; transform-origin: 50% 0; transform: scale(0.34); filter: none; transition: none; }
.bxo.open .pk.mini { animation: pkPeek 500ms ease-out forwards; animation-delay: calc(var(--k, 0) * 18ms); }
@keyframes pkPeek { to { transform: translateY(-8px) scale(0.34); } }
.bxo.fountain .bxo-packs { z-index: 6; }
.bxo.fountain .pk.mini { animation: pkFount 780ms cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes pkFount { 0% { transform: translate(0, 0) scale(0.34) rotate(0deg); } 100% { transform: translate(var(--tx), var(--ty)) scale(0.46) rotate(var(--rot)); } }
.bxo.burst .pk.mini { transform: translate(var(--tx), var(--ty)) scale(0.46) rotate(var(--rot)); animation: none; }
.bxo.burst .pk.mini .pk-card { left: 30px; }

/* the cardboard case */
.cso { position: absolute; left: calc(50% - 130px); top: calc(50% - 56px); width: 260px; height: 206px; perspective: 700px; filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.45)); }
.cso.shk { animation: pkShake 560ms ease-in-out; }
.cso-in { position: absolute; left: 0; top: 0; width: 260px; height: 56px; clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%); background: linear-gradient(#050300, #1b1206); z-index: 1; }
.cso-boxes { position: absolute; inset: 0; z-index: 2; }
.cso-front { position: absolute; left: 0; top: 50px; width: 260px; height: 156px; z-index: 3; border: 4px solid #3b2410; border-radius: 3px; display: grid; align-content: center; justify-items: center; gap: 4px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 3px, transparent 3px 7px), linear-gradient(#cf9c5e, #a8763f); }
.cso-front b { font: 900 22px var(--ui); letter-spacing: 0.08em; color: #3b2410; border: 3px solid #3b2410; padding: 2px 10px; border-radius: 4px; transform: rotate(-2deg); }
.cso-front span { font: 800 11px var(--ui); letter-spacing: 0.2em; color: #5a3a1c; }
.cso-tape { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(#f3e0b0, #dcc088); border-bottom: 2px solid rgba(0, 0, 0, 0.2); }
.cso-cut { display: none; }
.cso-flap { position: absolute; left: 0; width: 260px; height: 30px; z-index: 4; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 3px, transparent 3px 7px), linear-gradient(#d9a965, #bd8a4e); border: 3px solid #3b2410; transition: transform 520ms cubic-bezier(.3, 1.3, .4, 1); }
.cso-flap.l { top: 0; transform-origin: 50% 0; clip-path: polygon(7% 0, 93% 0, 98% 100%, 2% 100%); }
.cso-flap.r { top: 26px; transform-origin: 50% 100%; clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%); }
.cso-tape-top { position: absolute; left: 0; top: 22px; width: 260px; height: 12px; z-index: 5; background: linear-gradient(#f3e0b0, #dcc088); border-top: 2px solid rgba(0, 0, 0, 0.18); border-bottom: 2px solid rgba(0, 0, 0, 0.18); transition: opacity 200ms; }
.cso.cutting .cso-tape-top { background: linear-gradient(90deg, #1a0f05 var(--cut, 0%), #f3e0b0 var(--cut, 0%)); animation: csCutLine 800ms linear forwards; }
@keyframes csCutLine { from { --cut: 0%; } to { --cut: 100%; } }
@property --cut { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.cso-cutter { position: absolute; left: -26px; top: 6px; width: 70px; height: 40px; z-index: 7; opacity: 0; pointer-events: none; }
.cso-cutter i { position: absolute; left: 0; top: 8px; width: 70px; height: 24px; background: linear-gradient(90deg, #ffd23f 0 62%, #c9c9d3 62% 100%); border: 3px solid #1d1b24; border-radius: 4px 12px 12px 4px; clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%); }
.cso.cutting .cso-cutter { animation: csCutter 800ms linear forwards; }
@keyframes csCutter { 0% { opacity: 1; transform: translateX(0) rotate(-8deg); } 100% { opacity: 1; transform: translateX(300px) rotate(-8deg); } }
.cso.open .cso-cutter { opacity: 0; animation: none; }
.cso.open .cso-flap.l { transform: rotateX(-125deg); } .cso.open .cso-flap.r { transform: rotateX(125deg); }
.cso.open .cso-tape-top { opacity: 0; animation: none; }
.cso.open .cso-flap.l { z-index: 0; }   /* the back flap folds up BEHIND the boxes that rise out of the mouth */
.cso-boxes .bxo.cmini { left: calc(50% - 110px + var(--bx) * 34px); top: 36px; transform: translateY(-14px) scale(0.3); opacity: 0; transform-origin: 50% 100%; filter: none; }
.cso-boxes .bxo.cmini .bxo-packs { display: none; }
.cso-boxes .bxo.cmini .bxo-lid { opacity: 0; }
.cso.pop .cso-boxes .bxo.cmini { animation: csPop 760ms cubic-bezier(.2, 1.2, .4, 1) forwards; animation-delay: calc((var(--bx) + 2.5) * 70ms); }
@keyframes csPop { 0% { transform: translateY(-14px) scale(0.3); opacity: 1; } 100% { transform: translate(calc(var(--bx) * 4px), -190px) rotate(calc(var(--bx) * 5deg)) scale(0.3); opacity: 1; } }
.cso.rain .cso-boxes .bxo.cmini { opacity: 0; transform: translate(calc(var(--bx) * 4px), -190px) rotate(calc(var(--bx) * 5deg)) scale(0.45); transition: opacity 240ms, transform 240ms; animation: none; }
.rain-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.pk.rainp { position: absolute; top: -140px; left: 50%; width: 160px; height: 240px; transform: translateX(-80px) scale(0.34); transform-origin: 50% 50%; filter: none; animation: pkRain 1100ms cubic-bezier(.4, 0, .9, .6) both; transition: none; }
.pk.rainp .pk-top { animation: pkTop 520ms ease-out forwards; animation-delay: calc(var(--d, 0ms) + 480ms); }
.pk.rainp .pk-body { animation: pkBody 520ms ease-out forwards; animation-delay: calc(var(--d, 0ms) + 480ms); }
.pk.rainp .pk-card { animation: pkCardUp 700ms ease-out forwards; animation-delay: calc(var(--d, 0ms) + 520ms + var(--i) * 30ms); }
@keyframes pkRain { 0% { transform: translate(-80px, 0) scale(0.34) rotate(0deg); opacity: 1; } 100% { transform: translate(-80px, 62vh) scale(0.34) rotate(var(--rot)); opacity: 1; } }
/* BONUS PACK: one more pack drops into the pile */
.pk.bonusdrop { position: absolute; left: calc(50% - 80px); top: 110px; z-index: 9; transform-origin: 50% 50%; animation: pkBonus 700ms cubic-bezier(.3, .2, .6, 1) both; filter: drop-shadow(0 0 16px rgba(255, 210, 60, 0.95)) drop-shadow(0 12px 10px rgba(0, 0, 0, 0.4)); }
@keyframes pkBonus { 0% { transform: translateY(-420px) scale(0.55) rotate(-24deg); opacity: 1; } 62% { transform: translateY(10px) scale(0.55) rotate(6deg); opacity: 1; } 78% { transform: translateY(-14px) scale(0.52) rotate(-3deg); } 100% { transform: translateY(14px) scale(0.1); opacity: 0; } }
.pk-stage[data-bx] .pk-world { filter: drop-shadow(0 0 22px rgba(255, 205, 80, 0.85)); }
.pk-stage[data-bx] .pk-main { color: #ffe9a0; -webkit-text-stroke-color: #3a2504; }

html.reduce .pk-lay::after, html.reduce .pk.c5 .pk-foil, html.reduce .pk.shk, html.reduce .bxo.shk, html.reduce .cso.shk { animation: none !important; }

/* dim backdrop while packs are on stage */
#overlay.active:has(.pk-stage)::before { content: ""; position: fixed; inset: 0; z-index: -1; animation: pkDim 320ms ease-out both;
  background: radial-gradient(ellipse at 50% 46%, rgba(32, 52, 120, 0.72), rgba(6, 9, 28, 0.93) 78%); }
@keyframes pkDim { from { opacity: 0; } }
.cso-front::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; border-top: 3px solid #3b2410; background: linear-gradient(90deg, var(--f1), var(--f2), var(--f3), var(--f2), var(--f1)); }

/* ============================================================ coin toss */
.judge.coin-ov { background: radial-gradient(ellipse at 50% 45%, rgba(40, 56, 120, 0.82), rgba(5, 8, 24, 0.95) 80%); }
.judge.coin-ov.bx1 { background: radial-gradient(ellipse at 50% 45%, rgba(70, 48, 8, 0.75), rgba(10, 6, 0, 0.92) 80%); }
.judge.coin-ov.bx2, .judge.coin-ov.bx3 { background: rgba(0, 0, 0, 0.88); }
.coin-row { display: flex; gap: 14px; perspective: 900px; margin: 18px 0 8px; min-height: 170px; align-items: center; }
.coin-wrap { width: clamp(120px, 34vw, 160px); aspect-ratio: 1; perspective: 700px; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.5)); transition: transform var(--t, 100ms) ease-out; }
.coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform var(--t, 100ms) linear; }
.cf { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(circle at 34% 28%, #fff6c0, #f4bb12 38%, #b9810f 78%, #7a520a); box-shadow: inset 0 0 0 3px #7a520a, inset 0 0 10px 3px rgba(255, 255, 255, 0.5); }
.cf.t { transform: rotateY(180deg); background: radial-gradient(circle at 34% 28%, #ffffff, #cfd5e6 40%, #8a93ad 80%, #59617a); box-shadow: inset 0 0 0 3px #4a526b, inset 0 0 10px 3px rgba(255, 255, 255, 0.6); }
.cf svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cn-rim { fill: none; stroke: rgba(80, 52, 6, 0.55); stroke-width: 1.6; stroke-dasharray: 2.2 2; }
.cn-in { fill: rgba(255, 255, 255, 0.12); stroke: rgba(80, 52, 6, 0.5); stroke-width: 1; }
.cn-star { fill: #d42b2b; stroke: #5a0e0e; stroke-width: 1.6; stroke-linejoin: round; }
.cn-wing { fill: #fff6d0; stroke: #7a520a; stroke-width: 1.3; stroke-linejoin: round; }
.cf.t .cn-in { stroke: rgba(40, 46, 70, 0.55); } .cf.t .cn-rim { stroke: rgba(40, 46, 70, 0.6); }
.cn-crown { fill: #7a1fa2; stroke: #2a0a40; stroke-width: 1.6; stroke-linejoin: round; }
.cn-gem { fill: #ffd93b; stroke: #2a0a40; stroke-width: 1; } .cn-gem.g2 { fill: #3ee8ff; }
.coin-wrap.land { animation: coinLand 460ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes coinLand { 0% { transform: translateY(-26px) scale(1.2); } 55% { transform: translateY(6px) scale(0.96); } 100% { transform: none; } }
.coin-wrap:has(.coin.heads) { filter: drop-shadow(0 0 22px rgba(255, 210, 60, 0.95)) drop-shadow(0 10px 8px rgba(0, 0, 0, 0.5)); }
.coin-wrap:has(.coin.tails) { filter: drop-shadow(0 0 16px rgba(160, 175, 230, 0.8)) drop-shadow(0 10px 8px rgba(0, 0, 0, 0.5)); }
.coin-tag { min-height: 1.3em; font-weight: 900; font-size: clamp(30px, 9vw, 52px); letter-spacing: 0.04em; color: #fff; -webkit-text-stroke: 0.14em var(--ink); paint-order: stroke fill; opacity: 0; }
.coin-tag.on { opacity: 1; animation: pkBump 380ms cubic-bezier(.2, 1.6, .4, 1); transform: rotate(-3deg); }
.coin-tag.h { color: var(--yellow); text-shadow: 0 0.06em 0 var(--usred); } .coin-tag.t { color: #dfe4f5; }
.coin-key { display: grid; grid-template-columns: auto auto auto auto; gap: 6px 8px; align-items: center; font-weight: 800; font-size: 13px; color: #fff; background: rgba(0, 0, 0, 0.42); border-radius: 999px; padding: 4px 14px; }
.coin-key .ck { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff6c0, #f4bb12 60%, #b9810f); border: 2px solid #4a3006; }
.coin-key .ck.t { background: radial-gradient(circle at 34% 28%, #fff, #cfd5e6 60%, #8a93ad); border-color: #3b4260; }
.coin-key.h span:nth-child(2) { color: var(--yellow); } .coin-key.t span:nth-child(4) { color: #dfe4f5; }

/* ============================================================ JACKPOT: slot reels */
.jp-ov { position: fixed; inset: 0; z-index: 48; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, rgba(120, 20, 60, 0.78), rgba(10, 4, 20, 0.94) 82%); animation: pkDim 260ms ease-out both; }
.jp-ov.out { opacity: 0; transition: opacity 240ms; }
.jp-box { position: relative; display: grid; justify-items: center; gap: 12px; padding: 26px 22px 20px; border-radius: 22px; border: 5px solid #1d1b24; width: min(92vw, 400px);
  background: linear-gradient(#e83a52, #a3142e); box-shadow: 0 0 0 4px #ffd23f, 0 0 50px rgba(255, 70, 110, 0.7); animation: pkStageIn 380ms cubic-bezier(.2, 1.5, .4, 1) both; }
.jp-lamps { position: absolute; inset: 6px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.jp-lamps i { width: 9px; height: 9px; border-radius: 50%; background: #fff6b0; box-shadow: 0 0 8px 2px #ffd23f; animation: jpLamp 560ms steps(1) infinite; }
.jp-lamps i:nth-child(even) { animation-delay: 280ms; }
@keyframes jpLamp { 50% { opacity: 0.25; box-shadow: none; } }
.jp-win { display: flex; gap: 8px; padding: 10px; background: #0b0b14; border-radius: 12px; border: 4px solid #ffd23f; }
.jp-reel { width: clamp(70px, 22vw, 96px); height: clamp(96px, 30vw, 128px); background: linear-gradient(#cfcfd8, #ffffff 25%, #ffffff 75%, #cfcfd8); border-radius: 8px; border: 3px solid #1d1b24; display: grid; place-items: center; overflow: hidden; }
.jp-sym { font-weight: 900; font-size: clamp(40px, 12vw, 58px); line-height: 1; filter: blur(0.6px); animation: jpWob 90ms linear infinite; }
.jp-reel.stop .jp-sym { filter: none; animation: jpStop 260ms cubic-bezier(.2, 1.8, .4, 1); }
@keyframes jpWob { 50% { transform: translateY(5px); } }
@keyframes jpStop { 0% { transform: translateY(-24px); } 60% { transform: translateY(5px); } 100% { transform: none; } }
.jp-sym.s7 { color: #d42b2b; -webkit-text-stroke: 3px #1d1b24; paint-order: stroke fill; font-style: italic; font-size: clamp(52px, 15vw, 76px); }
.jp-sym.bar { font-size: clamp(22px, 7vw, 32px); color: #fff; background: #1d1b24; padding: 2px 8px; border-radius: 4px; }
.jp-sym.star { color: #f4bb12; } .jp-sym.crown { color: #7a1fa2; } .jp-sym.dia { color: #1d4fd8; } .jp-sym.heart { color: #d42b2b; }
.jp-title { min-height: 1.1em; font-weight: 900; font-size: clamp(38px, 12vw, 60px); line-height: 1; color: var(--yellow); -webkit-text-stroke: 0.1em #1d1b24; paint-order: stroke fill; text-shadow: 0 0.06em 0 #7a1244; opacity: 0; }
.jp-title.on { opacity: 1; animation: pkBump 460ms cubic-bezier(.2, 1.7, .4, 1); }
.jp-sub { font-weight: 800; font-size: 15px; color: #fff; -webkit-text-stroke: 0.2em #1d1b24; paint-order: stroke fill; }
.jp-ov.win .jp-box { animation: jpFlash 220ms steps(2) 6; }
@keyframes jpFlash { 50% { filter: brightness(1.35); } }

/* ============================================================ the gentleman in the top hat */
.ch-pic { background: none !important; display: block; }
.ch-pic svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-fog { animation: chFog 3s ease-in-out infinite alternate; }
@keyframes chFog { from { transform: translateX(-4px); } to { transform: translateX(6px); } }
.ch-man { animation: chMan 900ms ease-out both; transform-origin: 80px 90px; }
@keyframes chMan { from { opacity: 0; transform: translateX(-14px) scale(0.94); } to { opacity: 1; transform: none; } }
.ch-glint { animation: chGlint 700ms 300ms ease-out both; }
@keyframes chGlint { 0%, 30% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0.3; } }
.ch-eye { animation: chEye 800ms ease-out both; }
@keyframes chEye { from { filter: brightness(0.3); } 50% { filter: brightness(1.6); } }
.ch-h1 { transform-origin: 80px 46px; animation: chHand 900ms ease-out both; }
@keyframes chHand { from { transform: rotate(-200deg); } }
.chara-c .ch-stamp { right: 14%; bottom: 14%; font-size: clamp(20px, 6.4vw, 46px); color: #fff3d6; -webkit-text-stroke: 0; padding: 0.35em 0.7em; border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 34% 30%, #ff6a5e, #b3121f 60%, #6d0610); box-shadow: 0 6px 0 #3a0308, 0 0 24px rgba(255, 60, 60, 0.7); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.35); }
.chara .ch-band { border-color: #e6b93c; }

/* ============================================================ comic callouts (WOW! / KAPOW!! / JACKPOT!!!) */
.cutin { left: 50%; right: auto; top: 36%; width: min(118vw, 520px); aspect-ratio: 1.45; padding: 0; transform: translate(-50%, -50%) rotate(-6deg); border: 0; z-index: 45;
  clip-path: polygon(50.0% 3.4%,55.3% 13.4%,62.9% 6.1%,65.4% 16.3%,76.1% 9.4%,74.2% 22.0%,84.3% 20.3%,81.1% 30.0%,93.4% 30.2%,85.5% 39.6%,96.4% 43.3%,87.0% 50.0%,94.8% 56.4%,85.5% 60.4%,93.2% 69.7%,81.1% 70.0%,84.2% 79.6%,74.2% 78.0%,75.5% 89.7%,65.4% 83.7%,62.8% 93.5%,55.3% 86.6%,50.0% 95.5%,44.7% 86.6%,36.7% 95.2%,34.6% 83.7%,23.4% 91.3%,25.8% 78.0%,15.5% 79.9%,18.9% 70.0%,8.1% 69.2%,14.5% 60.4%,2.4% 56.9%,13.0% 50.0%,0.8% 42.9%,14.5% 39.6%,6.4% 30.1%,18.9% 30.0%,14.5% 19.2%,25.8% 22.0%,23.0% 8.0%,34.6% 16.3%,37.3% 6.6%,44.7% 13.4%); background: #1d1b24; animation: comicPop 900ms cubic-bezier(.2, 1.5, .4, 1) both; }
.cutin::after { content: ""; position: absolute; inset: 3.4%; clip-path: polygon(50.0% 3.4%,55.3% 13.4%,62.9% 6.1%,65.4% 16.3%,76.1% 9.4%,74.2% 22.0%,84.3% 20.3%,81.1% 30.0%,93.4% 30.2%,85.5% 39.6%,96.4% 43.3%,87.0% 50.0%,94.8% 56.4%,85.5% 60.4%,93.2% 69.7%,81.1% 70.0%,84.2% 79.6%,74.2% 78.0%,75.5% 89.7%,65.4% 83.7%,62.8% 93.5%,55.3% 86.6%,50.0% 95.5%,44.7% 86.6%,36.7% 95.2%,34.6% 83.7%,23.4% 91.3%,25.8% 78.0%,15.5% 79.9%,18.9% 70.0%,8.1% 69.2%,14.5% 60.4%,2.4% 56.9%,13.0% 50.0%,0.8% 42.9%,14.5% 39.6%,6.4% 30.1%,18.9% 30.0%,14.5% 19.2%,25.8% 22.0%,23.0% 8.0%,34.6% 16.3%,37.3% 6.6%,44.7% 13.4%); background: radial-gradient(rgba(255, 255, 255, 0.5) 18%, transparent 20%) 0 0 / 14px 14px, linear-gradient(135deg, var(--c1, #2ec5e8), var(--c2, #1d4fd8)); }
.cutin span { position: relative; z-index: 2; font-size: inherit; color: #fff; -webkit-text-stroke: 0.1em #1d1b24; paint-order: stroke fill; text-shadow: 0.05em 0.07em 0 #1d1b24; font-style: italic; letter-spacing: 0.02em; transform: rotate(-2deg); }
.cutin { font-size: clamp(40px, 12vw, 84px); }
.cutin.chance { --c1: #5be0ff; --c2: #1d6bff; } .cutin.chance span { color: #fff; }
.cutin.hot { --c1: #ffb23d; --c2: #e0261b; background: #1d1b24; } .cutin.hot span { color: #ffe14d; -webkit-text-stroke-color: #1d1b24; }
.cutin.sure { --c1: #ffe14d; --c2: #ff4fa8; background: #1d1b24; } .cutin.sure span { color: #fff; -webkit-text-stroke-color: #1d1b24; }
@keyframes comicPop { 0% { transform: translate(-50%, -50%) rotate(-30deg) scale(0); opacity: 0; } 18% { transform: translate(-50%, -50%) rotate(-6deg) scale(1.12); opacity: 1; } 28% { transform: translate(-50%, -50%) rotate(-6deg) scale(1); } 82% { transform: translate(-50%, -50%) rotate(-6deg) scale(1.03); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-3deg) scale(1.4); opacity: 0; } }

/* neon WORD RUSH sign */
.neon-sign { position: fixed; left: 50%; top: 24%; z-index: 44; transform: translateX(-50%) rotate(-3deg); pointer-events: none; font-weight: 900; font-size: clamp(34px, 11vw, 72px); letter-spacing: 0.06em; white-space: nowrap;
  color: #fff; text-shadow: 0 0 6px #fff, 0 0 14px #ff3fb4, 0 0 30px #ff3fb4, 0 0 60px #ff3fb4; animation: neonOn 1500ms steps(1) both; font-family: var(--ui); }
@keyframes neonOn { 0% { opacity: 0; } 8% { opacity: 1; } 14% { opacity: 0.1; } 20% { opacity: 1; } 28% { opacity: 0.2; } 34%, 88% { opacity: 1; } 100% { opacity: 0; } }

/* banners: comic lettering */
.banner .b-main { font-style: italic; color: var(--yellow); -webkit-text-stroke: 0.1em #1d1b24; text-shadow: 0.05em 0.08em 0 var(--usred); }
.banner.pink .b-main { color: #fff; text-shadow: 0.05em 0.08em 0 var(--usred); }
.banner .b-sub { font-style: italic; letter-spacing: 0.04em; }

/* STREAK x n: a little neon sign in the level meter */
.chain-tag { font-weight: 900; font-style: italic; letter-spacing: 0.04em; color: #fff; background: #1b0b2e; border: 2px solid #ff3fb4; border-radius: 6px; padding: 0 9px;
  text-shadow: 0 0 5px #ff3fb4, 0 0 12px #ff3fb4; box-shadow: 0 0 8px rgba(255, 63, 180, 0.8), inset 0 0 6px rgba(255, 63, 180, 0.5); animation: tagFlick 3.2s infinite; }
@keyframes tagFlick { 0%, 94%, 100% { opacity: 1; } 95% { opacity: 0.55; } 96% { opacity: 1; } 97% { opacity: 0.6; } }
body[data-bx] .chain-tag { background: linear-gradient(#f7dc7a, #c8932b); color: #2a1a02; border-color: #2a1a02; text-shadow: none; box-shadow: 0 0 10px rgba(255, 210, 80, 0.8); }
body[data-bx="2"] .chain-tag, body[data-bx="3"] .chain-tag { background: #000; color: #ffe08a; border: 1.5px solid #e6b93c; }
html.reduce .chain-tag, html.reduce .neon-sign, html.reduce .jp-lamps i, html.reduce .jp-sym, html.reduce .ch-fog { animation: none !important; }
html.reduce .neon-sign { opacity: 1; }
.ch-pic { scale: 1.02 !important; }
.chara-b .ch-pic { scale: 1.06 !important; }
.chara-c .ch-stamp { right: 27%; bottom: 8%; font-size: clamp(18px, 5.2vw, 40px); }

/* ============================================================ stage backgrounds (scenes.js) */
#bg[data-scene] .bg-cosmos { opacity: 0; }
#bg[data-scene] .bg-rays { opacity: 0.07; mix-blend-mode: screen; z-index: 1; }
#bg[data-scene] .bg-rainbow { opacity: 0.07; z-index: 1; }
#bg[data-scene][data-bx="1"] .bg-rays { opacity: 0.08 !important; }
#bg[data-scene][data-bx="2"] .bg-rays, #bg[data-scene][data-bx="3"] .bg-rays, #bg[data-scene][data-bx="4"] .bg-rays { opacity: 0.02 !important; }
#bg[data-scene][data-bx] .bg-rainbow { opacity: 0 !important; }
#bg[data-scene="vegas"] .bg-rays, #bg[data-scene="broadway"] .bg-rays, #bg[data-scene="slots"] .bg-rays { opacity: 0.06; }
#bg[data-scene="diner"] .bg-rays, #bg[data-scene="london"] .bg-rays, #bg[data-scene="vault"] .bg-rays, #bg[data-scene="stonehenge"] .bg-rays, #bg[data-scene="rocket"] .bg-rays { opacity: 0; }
#bg[data-scene="diner"] .bg-rainbow, #bg[data-scene="london"] .bg-rainbow, #bg[data-scene="vault"] .bg-rainbow, #bg[data-scene="stonehenge"] .bg-rainbow, #bg[data-scene="rocket"] .bg-rainbow { opacity: 0; }
.bg-scene .sc-pic { animation: scDrift 46s ease-in-out infinite alternate; }
.bg-scene .sc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg-scene .sc-pic > .rk-ship { position: absolute; inset: 0; }

/* bulbs (chase lights), neon tubes, searchlights */
.bulb { fill: #ffe9a0; animation: bulbChase 900ms steps(1) infinite; filter: drop-shadow(0 0 4px #ffcf4a); }
.bulb.b1 { animation-delay: 300ms; } .bulb.b2 { animation-delay: 600ms; }
@keyframes bulbChase { 0% { opacity: 1; } 34% { opacity: 0.18; } 100% { opacity: 0.18; } }
.tube { fill: none; stroke: var(--tc, #ff5bd8); stroke-width: 7; stroke-linejoin: round; filter: drop-shadow(0 0 7px var(--tc, #ff5bd8)) drop-shadow(0 0 16px var(--tc, #ff5bd8)); animation: tubeFlick 5s infinite; }
.tube-s { stroke: var(--tc, #ffe14d); filter: drop-shadow(0 0 7px var(--tc, #ffe14d)); fill: var(--tc, #ffe14d); stroke-width: 4; }
polygon.tube-s[points^="600"] { fill: #0b0818; stroke-width: 7; }
@keyframes tubeFlick { 0%, 90%, 100% { opacity: 1; } 92% { opacity: 0.4; } 94% { opacity: 1; } 96% { opacity: 0.55; } }
.nrow { animation: nrow 900ms steps(1) infinite; } .nrow.n1 { animation-delay: 300ms; } .nrow.n2 { animation-delay: 600ms; }
@keyframes nrow { 0% { opacity: 1; } 34% { opacity: 0.15; } }
.bm { transform-box: fill-box; transform-origin: 50% 100%; animation: bmSweep 7s ease-in-out infinite alternate; }
.bm.bm2 { animation-duration: 9s; animation-direction: alternate-reverse; } .bm.bm3 { animation-duration: 11s; }
@keyframes bmSweep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.roul { animation: spin 40s linear infinite; }
.jl { animation: jlBlink 1.4s steps(1) infinite; } .jl.l1 { animation-delay: 0.45s; } .jl.l2 { animation-delay: 0.9s; }
@keyframes jlBlink { 50% { opacity: 0.35; } }
.tw { animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: 0.15; } }
.lever { transform-box: fill-box; transform-origin: 50% 100%; animation: lever 6s ease-in-out infinite; }
@keyframes lever { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(28deg); } 86% { transform: rotate(0); } }
.glare { animation: glare 3.4s linear infinite; } @keyframes glare { 0% { transform: translateX(-30px); opacity: 0; } 50% { opacity: 0.2; } 100% { transform: translateX(30px); opacity: 0; } }
.lamp .halo { animation: lampFlick 3.6s infinite; } @keyframes lampFlick { 0%, 100% { opacity: 1; } 40% { opacity: 0.8; } 44% { opacity: 1; } 70% { opacity: 0.85; } }
.wheel { animation: spin 60s linear infinite; transform-box: fill-box; transform-origin: center; }
.gem { animation: gemTw 2.4s ease-in-out infinite; } .gem.g1 { animation-delay: 0.5s; } .gem.g2 { animation-delay: 1s; } .gem.g3 { animation-delay: 1.5s; }
@keyframes gemTw { 50% { filter: brightness(1.7) drop-shadow(0 0 6px #fff); } }
.rays-v { animation: raysV 5s ease-in-out infinite alternate; } @keyframes raysV { from { opacity: 0.2; } to { opacity: 0.45; } }
.aur { animation: aur 18s ease-in-out infinite alternate; } @keyframes aur { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
.ray { animation: rayP 6s ease-in-out infinite alternate; } @keyframes rayP { from { opacity: 0.35; } to { opacity: 0.65; } }
.steam circle { animation: steam 3.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; } @keyframes steam { to { transform: scale(1.15) translateY(-10px); } }

/* coin waterfall (slots), fog (London), mist (stone circle), gem sparkles (vault) */
.sc-coins, .sc-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sc-coins i { position: absolute; top: -8%; left: var(--x); width: clamp(14px, 3.4vmax, 30px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff6c0, #f4bb12 55%, #9a6a0c); border: 2px solid #6a470a;
  animation: coinFall var(--t) linear var(--d) infinite; }
@keyframes coinFall { 0% { transform: translateY(0) rotateY(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(118vh) rotateY(900deg); opacity: 1; } }
.sc-fog { position: absolute; left: -40%; width: 180%; height: 38%; pointer-events: none; filter: blur(14px); animation: fogDrift 40s linear infinite alternate; }
.sc-fog.f0 { bottom: 10%; background: radial-gradient(50% 60% at 30% 50%, rgba(200, 205, 230, 0.55), transparent), radial-gradient(40% 50% at 75% 60%, rgba(200, 205, 230, 0.45), transparent); }
.sc-fog.f1 { bottom: 28%; opacity: 0.7; animation-duration: 56s; animation-direction: alternate-reverse; background: radial-gradient(45% 50% at 55% 50%, rgba(190, 195, 225, 0.5), transparent); }
.sc-fog.f2 { bottom: -4%; opacity: 0.9; animation-duration: 34s; background: radial-gradient(60% 60% at 40% 60%, rgba(210, 214, 238, 0.6), transparent); }
@keyframes fogDrift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.sc-mist { position: absolute; left: -20%; bottom: 8%; width: 140%; height: 22%; pointer-events: none; filter: blur(12px); background: radial-gradient(55% 60% at 50% 60%, rgba(220, 226, 245, 0.5), transparent); animation: fogDrift 30s linear infinite alternate; }
.sc-sparks i { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: spark 2.6s ease-in-out var(--d) infinite; opacity: 0; }
@keyframes spark { 0%, 100% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.6); } }

/* the rocket: pad -> lift-off -> space */
.rk-count { position: absolute; left: 30%; top: 14%; transform: translateX(-50%); z-index: 3; font-weight: 900; font-size: clamp(60px, 22vmin, 180px); line-height: 1; color: #fff; text-shadow: 0 0 12px #ff3f1f, 0 0 36px #ff3f1f; font-family: var(--ui); opacity: 0; }
.rk-count.pop { animation: rkPop 520ms ease-out both; } @keyframes rkPop { from { transform: translateX(-50%) scale(1.6); opacity: 1; } to { transform: translateX(-50%) scale(1); opacity: 0.85; } }
.bg-scene.rk-cd .rk-count { opacity: 1; }
.rk-googol { position: absolute; left: 0; right: 0; top: 36%; z-index: 3; text-align: center; font-weight: 900; font-size: clamp(40px, 15vw, 150px); letter-spacing: 0.08em; color: #fff6c8; opacity: 0; font-family: var(--ui);
  text-shadow: 0 0 10px #fff, 0 0 30px #ffd23f, 0 0 70px #ff8a3d; transform: scale(0.6); transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2, 1.4, .4, 1); }
.rk-ship { transition: transform 3.4s cubic-bezier(.5, 0, .9, .4); }
.rk-ship .rk-flame { opacity: 0; transition: opacity 0.4s; transform-box: fill-box; transform-origin: 50% 0; }
.bg-scene.rk-go .rk-flame, .bg-scene.rk-space .rk-flame { opacity: 1; animation: flame 0.12s linear infinite alternate; }
@keyframes flame { to { transform: scaleY(1.18); } }
.bg-scene.rk-go .rk-ship, .bg-scene.rk-space .rk-ship { transform: translateY(-130%); }
.bg-scene .rk-sky { transition: opacity 3s ease 0.6s, transform 3.4s ease-in; }
.bg-scene.rk-go .rk-sky, .bg-scene.rk-space .rk-sky { opacity: 0; transform: translateY(40%); }
.bg-scene .rk-earth { opacity: 0; transition: opacity 2.5s ease 1s; }
.bg-scene.rk-space .rk-earth { opacity: 1; }
.bg-scene.rk-space .rk-googol { opacity: 1; transform: scale(1); }
.bg-scene.rk-pad .rk-googol { opacity: 0.9; transform: scale(1); font-size: clamp(22px, 7vw, 56px); top: 6%; }
.bg-scene .steam { transition: opacity 2s; } .bg-scene.rk-go .steam { opacity: 0; }

/* writing on the blank surfaces */
.sc-mark { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: visible; line-height: 1.04; white-space: nowrap; text-align: center; font-family: var(--ui); font-weight: 800; pointer-events: none; }
.sc-mark.v { flex-direction: row-reverse; } .sc-mark.v .sc-w { writing-mode: vertical-rl; }
.sc-w { display: block; }
.sc-k-neon { color: #fff; text-shadow: 0 0 4px #fff, 0 0 10px var(--glow, #ff5bd8), 0 0 22px var(--glow, #ff5bd8), 0 0 44px var(--glow, #ff5bd8); letter-spacing: 0.06em; animation: tubeFlick 6s infinite; }
.sc-k-marquee { color: #fff4c0; text-shadow: 0 0 3px #fff, 0 0 12px #ffcf4a, 0 0 28px #ff9a1f; letter-spacing: 0.08em; font-style: italic; animation: tubeFlick 7s infinite; }
.sc-k-billboard { color: #fff; text-shadow: 0 0 4px #fff, 0 0 14px #3ee8ff, 0 3px 0 #d42b2b; letter-spacing: 0.05em; font-style: italic; }
.sc-k-reel { color: #ffb000; text-shadow: 0 0 6px #ff9a00, 0 0 16px #ff7a00; letter-spacing: 0.12em; font-weight: 900; }
.sc-k-chalk { color: #f3f1e6; font-family: var(--ui); font-weight: 600; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); transform: rotate(-1.5deg); opacity: 0.92; }
.sc-k-lamp { color: #f3d9a0; font-family: dew-serif, Georgia, serif; font-style: italic; font-weight: 700; text-shadow: 0 1px 0 #1a0f06, 0 0 8px rgba(255, 200, 100, 0.55); }
.sc-k-plaque { color: #3a2606; font-family: dew-serif, Georgia, serif; font-weight: 800; letter-spacing: 0.1em; text-shadow: 0 1px 0 #ffe9a8, 0 -1px 0 rgba(60, 40, 6, 0.35); }
.sc-k-stone { color: rgba(32, 30, 40, 0.88); font-weight: 900; letter-spacing: 0.1em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 1px rgba(0, 0, 0, 0.5); }
.sc-k-hull { color: #1d2a6b; font-weight: 900; letter-spacing: 0.12em; }
.sc-k-patch { color: #1d4fd8; font-weight: 900; letter-spacing: 0.04em; border-radius: 50%; }
html.reduce .bulb, html.reduce .tube, html.reduce .nrow, html.reduce .bm, html.reduce .roul, html.reduce .jl, html.reduce .tw, html.reduce .lever, html.reduce .glare, html.reduce .lamp .halo, html.reduce .wheel,
html.reduce .gem, html.reduce .rays-v, html.reduce .aur, html.reduce .ray, html.reduce .steam circle, html.reduce .sc-coins i, html.reduce .sc-fog, html.reduce .sc-mist, html.reduce .sc-sparks i,
html.reduce .sc-k-neon, html.reduce .sc-k-marquee, html.reduce .rk-ship .rk-flame { animation: none !important; }
html.reduce .bulb { opacity: 1; } html.reduce .sc-coins { display: none; }
html.reduce .sc-sparks i { opacity: 0.8; transform: scale(1); }

/* Lv0: a yellow legal pad (plain CSS) */
#bg { background: var(--legal); }
.bg-grid { background-color: var(--legal);
  background-image:
    linear-gradient(to right, transparent 44px, rgba(212, 43, 43, 0.5) 44px, rgba(212, 43, 43, 0.5) 46px, transparent 46px, transparent 50px, rgba(212, 43, 43, 0.5) 50px, rgba(212, 43, 43, 0.5) 52px, transparent 52px),
    linear-gradient(to bottom, transparent 82px, rgba(212, 43, 43, 0.45) 82px, rgba(212, 43, 43, 0.45) 84px, transparent 84px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(60, 110, 190, 0.38) 31px 33px);
  background-position: 0 0, 0 0, 0 12px; }
.bg-grid::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(120, 90, 0, 0.14)); pointer-events: none; }

/* ============================================================ CHIPS, foil-pack meter, stamps, region badges */
.ri-ink { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #1d1b24; background: radial-gradient(circle, #d42b2b 0 38%, #fff 39% 46%, #d42b2b 47%); position: relative; box-shadow: inset 0 0 0 3px #d42b2b, inset 0 0 0 5px #fff; }
.ri-ink::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: repeating-conic-gradient(#fff 0 12deg, transparent 12deg 45deg); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); }
.schip.ink { background: #0e5a36; color: #fff; padding-left: 20px; position: relative; border: 2px solid #1d1b24; }
.schip.ink::before { content: ""; position: absolute; left: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, #d42b2b 32%); box-shadow: 0 0 0 1.5px #1d1b24; }
.ri-pack { width: 20px; height: 28px; border-radius: 3px; border: 3px solid var(--ink); background: linear-gradient(112deg, #ff8fbf, #ffe066 40%, #8fd9ff 70%, #c7a6ff); clip-path: none; position: relative; }
.ri-pack::before { content: ""; position: absolute; left: -3px; right: -3px; top: 3px; height: 4px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0 2px, transparent 2px 4px); }
.ri-ticket { background: linear-gradient(90deg, #ffd23f, #fff3a8 50%, #ffd23f); border-color: #8a5e0d; clip-path: polygon(0 0, 100% 0, 100% 35%, 94% 50%, 100% 65%, 100% 100%, 0 100%, 0 65%, 6% 50%, 0 35%); border-radius: 0; }
/* the pack meter: little foil packs */
.pkp { width: 11px; height: 16px; border-radius: 2px; border: 2px solid var(--ink); position: relative; }
.pkp.full { background: linear-gradient(112deg, #ff8fbf, #ffe066 38%, #8fd9ff 68%, #c7a6ff); }
.pkp.full::before { content: ""; position: absolute; left: -2px; right: -2px; top: 2px; height: 3px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 1.5px, transparent 1.5px 3px); }
/* NEW: a rubber stamp */
.face .new, .fcard .newb { color: #d42b2b; background: rgba(255, 255, 255, 0.55); border: 2px solid #d42b2b; border-radius: 4px; letter-spacing: 0.1em; font-weight: 900; text-shadow: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55), inset 0 0 0 2.5px #d42b2b; mix-blend-mode: multiply; transform: rotate(-9deg); font-family: var(--ui); }
.face .new { padding: 0 3px; }
.fcard .newb { padding: 0 7px; font-size: 13px; }
/* region badges: star badge (American English) and wax seal (British English) instead of flags */
.rbadge { display: inline-grid; place-items: center; border-radius: 50%; font-weight: 900; line-height: 1; color: #fff; filter: none; }
.rbadge[data-reg="A"] { width: 1.5em; height: 1.5em; background: radial-gradient(circle at 35% 30%, #4f7cff, #1d3fa8); border: 1.5px solid #fff; box-shadow: 0 0 0 1.5px #14224f, 0 1px 2px rgba(0, 0, 0, 0.4); font-size: clamp(7px, 10cqw, 13px); }
.rbadge[data-reg="E"] { width: 1.7em; height: 1.7em; font-size: clamp(5px, 7cqw, 9px); letter-spacing: 0; color: #ffd2d2; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.35); font-family: dew-serif, Georgia, serif;
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; background: radial-gradient(circle at 34% 28%, #ff6a5e, #b3121f 58%, #6d0610); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.fcard .rbadge[data-reg="A"] { font-size: 15px; } .fcard .rbadge[data-reg="E"] { font-size: 11px; }

/* ---- rank ladder list (trophy room > All Ranks) */
.rk-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 24px; }
.rk-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border: 2px solid rgba(255, 255, 255, .14); border-radius: 8px; background: rgba(10, 14, 40, .55); color: #d9e2ff; opacity: .62; }
.rk-row.done { opacity: .95; border-color: rgba(120, 200, 255, .5); }
.rk-row.done .rk-n::after { content: ""; }
.rk-row.now { opacity: 1; border-color: #ffd23f; background: linear-gradient(90deg, #5a1230, #1a1a5a); color: #fff; box-shadow: 0 0 14px rgba(255, 210, 63, .55); }
.rk-row.k-m, .rk-row.k-num { border-style: double; border-width: 4px; }
.rk-n { font: 700 12px/1 "Trebuchet MS", sans-serif; text-align: center; color: #9fb4ff; }
.rk-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-name { font: 900 15px/1.1 Impact, "Arial Black", sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.rk-row.now .rk-name { color: #ffd23f; text-shadow: 0 0 8px #ff3b5c; }
.rk-gloss { font-size: 11px; line-height: 1.25; opacity: .85; }
.rk-r { text-align: right; display: flex; flex-direction: column; gap: 2px; font-size: 11px; white-space: nowrap; }
.rk-gift { color: #ffd23f; font-weight: 700; }
.reward-gloss { font-size: 13px; opacity: .9; margin: -2px 0 6px; text-align: center; }

/* ---- title screen: marquee bulbs around the logo, stars, a stripe band */
.logo { position: relative; padding: 16px 22px 20px; margin-bottom: 8px; }
.logo::before { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background:
    radial-gradient(circle, #fff 0 2.4px, #ff3b5c 3px 4.2px, transparent 4.5px) 0 0 / 22px 22px repeat-x,
    radial-gradient(circle, #fff 0 2.4px, #ff3b5c 3px 4.2px, transparent 4.5px) 0 100% / 22px 22px repeat-x;
  filter: drop-shadow(0 0 4px #ffb300); animation: bulbs 1s steps(1) infinite; }
.logo::after { content: "\2605  \2605  \2605"; position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; color: #e8264a; letter-spacing: .3em; font-size: 14px; text-shadow: 0 1px 0 #fff; }
@keyframes bulbs { 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) { .logo::before { animation: none; } }
:root[data-reduce="1"] .logo::before { animation: none; }

/* ---- while a pack / box / case / coin toss / jackpot animation runs, the stage covers the home UI completely: the scene behind is all that shows */
body:has(.judge.coin-ov) #stage, body:has(.jp-ov) #stage, body:has(#overlay.active .pk-stage) #stage,
body:has(.judge.coin-ov) #summary-bar, body:has(.jp-ov) #summary-bar, body:has(#overlay.active .pk-stage) #summary-bar,
body:has(.judge.coin-ov) .controls, body:has(.jp-ov) .controls, body:has(#overlay.active .pk-stage) .controls { visibility: hidden; }
.judge.coin-ov.fade .judge-box { opacity: 0; transition: opacity 260ms ease; }
/* the bulb groups of the scene signs: one animation per blink phase instead of one per bulb */
.bgp { animation: bulbChase 900ms steps(1) infinite; filter: drop-shadow(0 0 4px #ffcf4a); }
.bgp.b1 { animation-delay: 300ms; } .bgp.b2 { animation-delay: 600ms; }
.bgp .bulb { animation: none; filter: none; fill: #ffe9a0; }
html.reduce .bgp { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bgp { animation: none; opacity: 1; } }
/* title screen stripe (a fixed band: the screen is a centred flex column) */
#title-screen:not([hidden])::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 10px; z-index: 3; background: repeating-linear-gradient(90deg, #e8264a 0 24px, #fff 24px 48px, #2f62d0 48px 72px); display: block; }

/* ---- one compact toast at a time (trophies are summed up: "3 trophies unlocked" + first name) */
.toast.compact { padding: 4px 12px 4px 8px; gap: 8px; border-radius: 12px; }
.toast.compact .toast-t { line-height: 1.2; }
.toast.compact .toast-t b { font-size: 10px; }
.toast.compact .toast-t span { font-size: 13px; }
.toast.tap { pointer-events: auto; cursor: pointer; }

/* ---- how-to: the frequency table must fit a phone card (it used to push the whole body wider than the modal and clip the text) */
.howto-body { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.howto-body > * { min-width: 0; max-width: 100%; }
.how-table { table-layout: fixed; width: 100%; font-size: 12px; }
.how-table th:nth-child(1), .how-table td:nth-child(1) { width: 46px; }
.how-table th:nth-child(2), .how-table td:nth-child(2) { width: 54px; }
.how-table th { font-size: 10px; }
.how-table th:nth-child(4), .how-table td:nth-child(4) { width: 34%; }
.how-table td, .how-table th { padding: 5px 4px; overflow-wrap: anywhere; }
.how-table .how-ex { font-size: 15px; overflow-wrap: anywhere; }

/* ---- ad break (rewarded pack refill): our own promos unless a Zucks id is set in CFG.ad */
#rwm { position: fixed; inset: 0; z-index: 95; background: rgba(12, 8, 28, 0.82); display: grid; place-items: center; padding: 10px; }
#rwm[hidden] { display: none; }
.rw-panel { width: min(100%, 440px); max-height: calc(100dvh - 20px); display: flex; flex-direction: column; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 8px 0 var(--ink); overflow: hidden; }
.rw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 12px 8px; text-align: center; }
.rw-title { margin: 0; font-weight: 800; font-size: 12px; color: var(--ink-2); letter-spacing: 0.08em; }
.rw-slot { position: relative; margin: 8px auto 0; width: 100%; max-width: 360px; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rw-slot > div[id] { width: 100%; display: flex; justify-content: center; }
.rw-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 12px; color: var(--ink-2); pointer-events: none; }
.rw-foot { flex: 0 0 auto; display: grid; gap: 4px; justify-items: center; border-top: 2px solid var(--ink); background: var(--paper); padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px); }
.rw-claim { width: 100%; font-size: 17px; padding: 10px 14px; }
.rw-cancel { font-size: 12px; }
.wgp, .kjp { width: 100%; display: grid; gap: 8px; justify-items: center; padding: 22px 16px; border-radius: 14px; border: 2px solid var(--ink); background: linear-gradient(160deg, #eef4ff, #fff3d6); text-align: center; }
.kjp { background: linear-gradient(160deg, #fff0f3, #fff3d6); }
.wgp .wgp-tag, .kjp .kjp-tag { justify-self: start; font-size: 10px; font-weight: 800; color: var(--ink-2); border: 1px solid var(--ink-2); border-radius: 4px; padding: 0 5px; }
.wgp b, .kjp b { font-size: 26px; font-weight: 900; text-wrap: balance; }
.wgp p, .kjp p { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); text-wrap: balance; }
.wgp a, .kjp a { display: inline-block; margin-top: 4px; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 20px; font-weight: 900; color: #fff; background: linear-gradient(#5aa7ff, #2f62d0); text-decoration: none; box-shadow: 0 4px 0 var(--ink); }
.kjp a { background: linear-gradient(#ff7a8a, #d42b4a); }
.wgp-packs { position: relative; width: 260px; height: 210px; margin: 2px 0 6px; }
.wgp-packs .pp { position: absolute; bottom: 0; height: 176px; width: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); }
.wgp-packs .pp0 { left: 0; transform: rotate(-12deg); transform-origin: bottom center; }
.wgp-packs .pp2 { right: 0; transform: rotate(12deg); transform-origin: bottom center; }
.wgp-packs .pp1 { left: 50%; height: 200px; margin-left: -50px; z-index: 2; }
.kjp-card { position: relative; width: 132px; height: 176px; margin: 2px 0 6px; display: grid; place-items: center; border: 5px solid #e5402f; border-radius: 12px; background: linear-gradient(#fffdf5, #ffe9b8); box-shadow: 0 6px 0 var(--ink), 0 10px 18px rgba(0, 0, 0, 0.25); transform: rotate(-4deg); }
.kjp-c { font-size: 92px; font-weight: 900; line-height: 1; color: var(--ink); font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif; }
.kjp-t { position: absolute; top: 5px; left: 8px; font-weight: 900; font-size: 16px; color: #e5402f; }
.wgp-lic { margin-top: 8px; font-size: 10px; line-height: 1.5; color: var(--ink-2); text-align: center; }
.wgp-lic p { margin: 0 0 2px; }
.wgp-lic a { color: var(--ink-2); }
select.say-sel { max-width: 100%; }

/* ---- performance (LR / UR cut-ins): same look, cheaper to paint ---- */
/* the spinning ray discs only need to cover the screen's diagonal; no blend mode on the second one */
#cut .rays { width: 112vmax; height: 112vmax; margin: -56vmax 0 0 -56vmax; will-change: transform; }
#cut .rays2 { mix-blend-mode: normal; will-change: transform; background: repeating-conic-gradient(from 4deg, rgba(255, 255, 255, 0.2) 0deg 3deg, transparent 3deg 22deg); }
.lr-beam { filter: none; will-change: transform, opacity; }
/* the LR card's aura pulsed a big box-shadow (a repaint every frame): a static shadow plus a pseudo-element whose opacity pulses */
.fcard.lr-card { animation: lrPop 600ms cubic-bezier(.2, 1.5, .4, 1) both; box-shadow: 0 0 30px 8px rgba(255, 210, 90, 0.85), 0 16px 40px rgba(0, 0, 0, 0.35); }
.fcard.lr-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 0 52px 16px rgba(255, 228, 140, 1); opacity: 0; animation: lrAuraOp 0.9s ease-in-out 0.6s infinite alternate both; will-change: opacity; }
@keyframes lrAuraOp { from { opacity: 0; } to { opacity: 1; } }
html.reduce .fcard.lr-card::before { animation: none; opacity: 0.6; }

/* ---- pictures (CFG.art): cut-in art of the masked editor, the focus point of the pictures, and kinds of surface that only the pictures have ---- */
.chara.art .ch-pic { background-size: cover !important; background-repeat: no-repeat !important; background-position: 30% 8% !important; }
.chara.chara-b.art .ch-pic { background-position: 50% 44% !important; }
.sc-pic { top: calc((100vh - 100vmax) * var(--py, 0.5)); }
.sc-k-scroll { color: #3a2410; font-family: dew-serif, Georgia, serif; font-style: italic; font-weight: 700; opacity: 0.88; mix-blend-mode: multiply; text-shadow: 0 0 1px rgba(58, 36, 16, 0.4); }
.sc-k-road { font-weight: 700; letter-spacing: 0.02em; }
.sc-k-board { color: #2a0c08; font-weight: 900; letter-spacing: 0.06em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
.bg-scene[data-img] .sc-pic { background-size: cover; background-position: center; }

/* ======================================================================== polish 1: title screen v2
   One solid card (no ruled lines / drifting words behind the text), a marquee header band, grouped controls, equal rhythm. */
#title-screen { justify-content: flex-start; align-items: center; gap: 0; padding: 28px 14px 24px; overflow-y: auto; overflow-x: hidden; }
.tcard { width: min(620px, 100%); margin: auto; position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  background: #fffdf4; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 var(--ink), 0 24px 48px rgba(20, 10, 60, 0.32); }
.thead { align-self: stretch; position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 16px 24px; text-align: center;
  background: radial-gradient(120% 100% at 50% 0%, #4d3cae 0%, #2b2074 46%, #130d36 100%); border-bottom: 4px solid #e6b93c; box-shadow: inset 0 -3px 0 #8a5d0a; }
.thead::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(circle at 12% 30%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 86% 24%, #ffe9a0 0 1.4px, transparent 2.2px), radial-gradient(circle at 70% 78%, #fff 0 1px, transparent 2px), radial-gradient(circle at 24% 80%, #ffe9a0 0 1.2px, transparent 2px), radial-gradient(circle at 50% 8%, #fff 0 1px, transparent 2px); }
.thead .logo { position: relative; z-index: 1; margin: 0; padding: 32px 30px 38px; }
.thead .logo .top { font-size: clamp(44px, 13vw, 76px); -webkit-text-stroke: 4px #fff; text-shadow: 0 5px 0 #b3165f; }
.thead .logo .main { margin-top: 10px; background: linear-gradient(#2a2733, #14121a); color: #fff; border: 3px solid #e6b93c; box-shadow: 0 6px 0 #8a5d0a, 0 0 0 2px #14121a; padding: 8px 16px 10px; font-size: clamp(30px, 9.4vw, 56px); }
.thead .logo::before { filter: drop-shadow(0 0 5px #ffb300); }
.thead .logo::after { content: none; }
.thead .tagline { position: relative; z-index: 1; margin: 0; color: #fff; font-size: 17px; line-height: 1.4; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.thead .tagline::before, .thead .tagline::after { content: "\2605"; color: #ffd23f; margin: 0 .7em; font-size: .8em; }
.tbody { display: grid; justify-items: center; gap: 6px; padding: 22px 26px 4px; }
.tbody .title-note { margin: 0; max-width: 31em; color: #46424f; font-size: 14px; line-height: 1.75; }
.tbody .link-btn { padding: 6px 10px; }
.tctl { align-self: stretch; display: grid; justify-items: center; gap: 16px; padding: 14px 22px 4px; }
.tctl .chips { max-width: 100%; }
.tctl .rset { max-width: 100%; }
#start-btn { width: min(100%, 340px); padding: 14px 20px; font-size: 24px; letter-spacing: .08em; position: relative; overflow: hidden;
  background: linear-gradient(#78bcff, #2f62d0 55%, #2450ad); box-shadow: 0 7px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.55); }
#start-btn::after { content: ""; position: absolute; left: 6%; right: 6%; top: 4px; height: 38%; border-radius: 999px; background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); pointer-events: none; }
#start-btn:active { box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, 0.55); }
.tfoot { align-self: stretch; display: grid; justify-items: center; gap: 12px; margin-top: 20px; padding: 16px 20px 20px; background: #f3ecd2; border-top: 2px dashed rgba(29, 27, 36, 0.22); }
.tfoot .legal { margin: 0; }
@media (max-width: 480px) {
  #title-screen { padding: 22px 10px 20px; }
  .thead { padding: 22px 10px 20px; }
  .thead .logo { padding: 28px 18px 34px; }
  .tbody { padding: 18px 16px 2px; } .tctl { padding: 12px 14px 2px; } .tfoot { margin-top: 16px; padding: 14px 12px 18px; }
}

/* ======================================================================== polish 2: LR card - the corner flourishes stay in the corners; text sits on its own backing */
.fcard[data-tier="6"] > .orn { background-size: 27% auto, 27% auto, 27% auto, 27% auto; }
.fcard[data-tier="6"] .row1 { padding: 10px 12px 0; }
.fcard[data-tier="6"] .one { opacity: 1; color: #f6e3a0; background: rgba(8, 6, 3, 0.82); border: 1px solid rgba(230, 185, 60, 0.45); border-radius: 999px; padding: 0 9px; line-height: 1.55; position: relative; z-index: 3; }
.fcard[data-tier="6"] .nm, .fcard[data-tier="6"] .rd { text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.9); }
.fcard[data-tier="6"] .st { margin: 2px 22px 14px; padding: 3px 10px; background: rgba(8, 6, 3, 0.84); border: 1px solid rgba(230, 185, 60, 0.4); border-radius: 10px; color: #f6e3a0; gap: 2px 12px; }
.fcard[data-tier="6"] .st b { opacity: .9; color: #e6b93c; }
.fcard[data-tier="6"] .rbadge { z-index: 3; }
.fcard[data-tier="4"] .nm, .fcard[data-tier="4"] .rd, .fcard[data-tier="4"] .st { color: #33200a; opacity: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }
.fcard[data-tier="4"] .rd .pos, .fcard[data-tier="4"] .rd .ipa, .fcard[data-tier="4"] .st b { opacity: 1; color: #4a2f05; }

/* ======================================================================== polish 3: collection chips - plain flex-wrap, nothing scaled, glow kept inside the gap, long words get an ellipsis */
.dex-grid { display: flex; flex-wrap: wrap; gap: 14px 12px; align-items: flex-start; padding: 4px 2px 10px; }
.dex-grid .mini { transform: none !important; flex: 0 1 auto; width: auto; min-width: 40px; max-width: min(100%, 210px); height: 34px; padding: 0 12px; font-size: 15px; grid-template-columns: minmax(0, 1fr); margin: 0; }
.dex-grid .mini .mw { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dex-grid .mini[data-tier="3"], .dex-grid .mini[data-tier="4"], .dex-grid .mini[data-tier="5"], .dex-grid .mini[data-tier="6"] { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 2px 5px rgba(0, 0, 0, 0.28); }
.dex-grid .mini[data-tier="6"] { border-width: 2px; box-shadow: 0 0 0 1px #3a2504, 0 2px 6px rgba(230, 185, 60, 0.55); }
.dex-grid .mini .n { bottom: -9px; right: -5px; z-index: 2; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.dex-grid .mini .fv { top: -5px; right: -4px; z-index: 2; }
.dex-grid .mini.is-new::after { top: -4px; left: -4px; right: auto; }

/* polish 4: trophies toolbar + character gallery entry */
.tro-new-wrap { display: grid; gap: 8px; margin-top: 6px; }
.tro-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px; }
.tro-toolbar-n { font-weight: 900; font-size: 13px; color: #fff; background: var(--shu); border-radius: 6px; padding: 1px 8px; letter-spacing: .06em; }
.tro-toolbar .tro-readall { grid-column: auto; width: auto; margin: 0; white-space: nowrap; padding: 6px 14px; font-size: 13px; }
.tro-new-wrap .tro-list { margin-top: 0; }
.cast-entry { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 10px; padding: 10px 14px; text-align: left; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink);
  background: linear-gradient(100deg, #2b2074, #4d3cae 60%, #6a4fd0); color: #fff; }
.cast-entry:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.cast-entry .ce-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffd23f; color: #3a2504; font-size: 18px; border: 2px solid #3a2504; }
.cast-entry .ce-t { flex: 1; display: grid; gap: 1px; min-width: 0; }
.cast-entry .ce-t b { font-size: 15px; line-height: 1.3; }
.cast-entry .ce-t small { font-size: 12px; color: #ffe9a0; font-weight: 800; }
.cast-entry .ce-go { font-size: 26px; font-weight: 900; color: #ffd23f; line-height: 1; }
.cast-pic.sil { filter: brightness(0) contrast(2) opacity(0.5); }
.cast-face .cast-q { position: relative; z-index: 2; }
.cast-card.miss { opacity: 1; }
.cast-card.miss .cast-face { background: radial-gradient(circle at 50% 38%, #9a86d6, #3b2c80 78%); border-color: #6c5aa8; }
.cast-pic.sil { filter: brightness(0.22) saturate(0) blur(2.5px); transform: scale(1.12); }
.cast-card.miss .cast-q { color: #fff; font-size: 26px; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.cast-card.miss b { color: #b9afd8; }

/* ============================================================ polish 5: chain text, one announcement at a time (banner / unit board / coin toss / jackpot) */
/* a dark plate behind every banner: the yellow / white lettering always has the contrast of a title card */
.banner { padding: 0.18em 0.55em 0.22em; font-size: clamp(14px, 4vw, 24px); background: linear-gradient(180deg, rgba(22, 10, 44, 0.9), rgba(8, 4, 20, 0.92)); border: 2px solid rgba(255, 255, 255, 0.28); border-radius: 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 3px rgba(0, 0, 0, 0.35); max-width: 96vw; }
.banner.bxb { border-color: rgba(230, 185, 60, 0.7); background: linear-gradient(180deg, rgba(30, 20, 4, 0.92), rgba(6, 4, 0, 0.94)); }
.banner .b-sub { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); font-style: normal; font-size: clamp(14px, 3.8vw, 24px); }
.banner.bxb .b-sub { color: #ffe9a0; }
.banner .b-main { line-height: 1.12; }
/* the coin toss panel: the lettering sits on a dark card instead of straight on the dimmed game */
.judge-box { background: rgba(10, 8, 28, 0.86); border: 2px solid rgba(255, 255, 255, 0.22); border-radius: 22px; padding: 14px 20px 16px; max-width: min(94vw, 560px); box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6); gap: 8px; }
.judge-title { -webkit-text-stroke: 0; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55); font-size: clamp(22px, 6vw, 38px); text-align: center; }
.modal-card > .judge-title { color: var(--ink); text-shadow: 0 3px 0 var(--yellow); }
.judge-rate { -webkit-text-stroke: 0; text-shadow: none; font-size: clamp(14px, 3.7vw, 18px); line-height: 1.35; color: #fff; max-width: 100%; }
.judge-rate.lock { color: var(--yellow); font-size: clamp(16px, 4.4vw, 22px); }
.judge-note { margin-top: 0; max-width: 100%; font-size: clamp(12px, 3.3vw, 14px); line-height: 1.45; background: rgba(255, 255, 255, 0.1); color: #fff; border-radius: 10px; padding: 6px 12px; }
.judge.coin-ov .coin-tag { text-align: center; }
/* when the toss is over the whole card goes (not just the box), so the banner after it is not under the dark veil */
.judge.coin-ov.fade { opacity: 0; transition: opacity 260ms ease; pointer-events: none; }
.judge.coin-ov.fade .judge-box { opacity: 1; }
/* the announcements share one place: the pack title, caption and chain label step aside while a banner / unit board / cut-in is up */
body:has(.banner, .unit-announce) .pk-title, body:has(.banner, .unit-announce) .pk-caption { visibility: hidden; }
body:has(.cutin) .pk-caption { opacity: 0; }
.unit-announce { top: 17%; animation-duration: 1800ms; max-width: 94vw; background: rgba(12, 8, 30, 0.92); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55); }
.unit-announce .up { color: #d9d4ff; font-size: 13px; }
.unit-announce .uk { color: #ffe08a; }
.unit-announce .ur { color: #fff; font-size: 15px; }
.judge.coin-ov .coin-row { margin: 30px 0 12px; }
/* the card tally and the skip button get their own strip above the falling chips */
.fall { padding-top: 34px; }
.fall-count { top: 6px; left: 14px; font-size: 20px; }

/* ============================================================ phase 2: premium foil packs, boxes, case and coins */
/* ---- rarity colours: deep, saturated metals (silver / sapphire / emerald / ruby / gold / prism) */
.pk.c0 { --f1: #ffffff; --f2: #b8c1d1; --f3: #566176; --em: #e23a3a; }
.pk.c1, .bxo.c1, .cso.c1 { --f1: #a9d6ff; --f2: #1f7bff; --f3: #06236b; --em: #ffd93b; --glow: rgba(60, 150, 255, 0.95); }
.pk.c2, .bxo.c2, .cso.c2 { --f1: #9af2c6; --f2: #10b86a; --f3: #033f26; --em: #fff06a; --glow: rgba(40, 220, 130, 0.95); }
.pk.c3, .bxo.c3, .cso.c3 { --f1: #ffa89c; --f2: #e4271b; --f3: #560500; --em: #ffe14d; --glow: rgba(255, 60, 50, 1); }
.pk.c4, .bxo.c4, .cso.c4 { --f1: #fff3a8; --f2: #f2b300; --f3: #6e4200; --em: #d42b2b; --glow: rgba(255, 205, 40, 1); }
/* ---- the foil: brushed metal bands, a hot streak, puffy pillow shading, serrated crimps */
.pk .pk-foil, .pk.c0 .pk-foil {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.6) 9%, rgba(255, 255, 255, 0) 21%),
    repeating-linear-gradient(97deg, rgba(255, 255, 255, 0.11) 0 1.5px, rgba(0, 0, 0, 0.07) 1.5px 3px, transparent 3px 7px),
    linear-gradient(105deg, var(--f3) 0%, var(--f2) 12%, var(--f1) 24%, var(--f2) 38%, var(--f3) 52%, var(--f2) 66%, var(--f1) 80%, var(--f2) 92%, var(--f3) 100%); }
.pk.c0 .pk-foil::after { display: none; }
.pk.c5 .pk-foil {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.55) 9%, rgba(255, 255, 255, 0) 21%),
    repeating-linear-gradient(97deg, rgba(255, 255, 255, 0.18) 0 1.5px, rgba(0, 0, 0, 0.08) 1.5px 3px, transparent 3px 7px),
    linear-gradient(120deg, #ff6fb4, #ffd54a, #5cf0b0, #4cc4ff, #a98aff, #ff6fb4);
  background-size: auto, auto, 300% 100%; background-position: 0 0, 0 0, 0 0; animation: pkHolo2 2.6s linear infinite; }
@keyframes pkHolo2 { to { background-position: 0 0, 0 0, -300% 0; } }
.pk-holo { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.7;
  background: linear-gradient(112deg, transparent 0 34%, rgba(255, 90, 190, 0.5) 40%, rgba(255, 226, 90, 0.55) 45%, rgba(90, 255, 190, 0.55) 50%, rgba(90, 190, 255, 0.55) 55%, rgba(170, 120, 255, 0.5) 60%, transparent 66% 100%);
  background-size: 280% 100%; background-position: 130% 0; animation: pkSheen 3.6s ease-in-out infinite; }
.pk.c0 .pk-holo { opacity: 0.55; }
.pk.c5 .pk-holo { opacity: 0.35; }
@keyframes pkSheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -40% 0; } }
.pk-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0, rgba(255, 255, 255, 0.3) 9%, rgba(255, 255, 255, 0) 27%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.16) 84%, rgba(0, 0, 0, 0.52) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 76%, rgba(0, 0, 0, 0.3) 100%);
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4.5px rgba(255, 255, 255, 0.4), inset 3px 3px 4px rgba(255, 255, 255, 0.35), inset -3px -5px 7px rgba(0, 0, 0, 0.4); }
.pk-lay { box-shadow: none; }
.pk-crimp { height: 16px; z-index: 2;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0 1.5px, rgba(255, 255, 255, 0.6) 1.5px 3px, rgba(0, 0, 0, 0.1) 3px 4.5px), linear-gradient(var(--f1), var(--f2) 45%, var(--f3));
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35); }
.pk-crimp.t { clip-path: var(--pk-zt, none); border-bottom: 0; } .pk-crimp.b { clip-path: var(--pk-zb, none); border-top: 0; top: auto; }
/* logo: one big word in the burst, the second word on a ribbon */
.pk-burst { stroke-width: 3.2; }
.pk-burst2 { fill: rgba(255, 255, 255, 0.34); }
.pk-t1s { font: 900 40px var(--ui); fill: #1d1b24; stroke: #1d1b24; stroke-width: 9px; stroke-linejoin: round; }
.pk-t1 { font: 900 40px var(--ui); fill: #fff; stroke: #1d1b24; stroke-width: 6px; paint-order: stroke; stroke-linejoin: round; letter-spacing: 0; }
.pk-rib { fill: #17141f; stroke: #f7dc7a; stroke-width: 1.6; stroke-linejoin: round; }
.pk-t2 { font: 900 17px var(--ui); fill: #ffe08a; stroke: none; letter-spacing: 0.18em; }
.pk-band { fill: #14121c; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
.pk-t3 { font: 800 9.5px var(--ui); fill: #fff; letter-spacing: 0.14em; }
/* thickness: a darker back sheet peeks out under the pack (it goes when the pack tears open) */
.pk::before { content: ""; position: absolute; inset: 0; border-radius: 9px; background: linear-gradient(135deg, var(--f3), #000); transform: translate(3px, 4px); z-index: -1; }
.pk.tear::before, .bxo.burst .pk::before, .pk.rainp::before, .pk.mini::before { opacity: 0; }
.pk.rainp.tear::before { opacity: 0; }
.pk { filter: drop-shadow(0 0 16px var(--glow)) drop-shadow(0 14px 10px rgba(0, 0, 0, 0.45)); }
/* the many small packs (inside boxes, raining, bonus drop) do not animate the sheen: cheaper */
.pk.mini .pk-holo, .pk.rainp .pk-holo, html.lite .pk-holo, html.reduce .pk-holo { animation: none; background-position: 40% 0; }
html.lite .pk-lay::after { animation: none; }

/* ---- the booster box: foil-stamped frame, shrink-wrap gloss, a visible right side (thickness) */
.bxo-front { background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 16%, transparent 16% 38%, rgba(255, 255, 255, 0.07) 38% 44%, transparent 44%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #2c4aa6, var(--navy) 55%, var(--navy2));
  border-color: #04060f; border-radius: 4px 4px 8px 8px;
  box-shadow: inset 0 0 0 3px #e6b93c, inset 0 0 0 4px #5a3a06, inset 0 0 0 8px #070b1c, inset 0 0 0 9.5px rgba(247, 220, 122, 0.85), inset 0 0 22px rgba(0, 0, 0, 0.5); }
.bxo-front::after { content: ""; position: absolute; top: -4px; bottom: -4px; right: -17px; width: 17px; z-index: -1;
  background: linear-gradient(90deg, #121c4c, #04060f); clip-path: polygon(0 0, 100% 9px, 100% calc(100% - 9px), 0 100%); border-radius: 0 3px 3px 0; }
.bxo-front b { font-size: 22.5px; letter-spacing: 0.04em; color: transparent; -webkit-text-stroke: 0; text-shadow: none; padding: 0 2px;
  background: linear-gradient(180deg, #fff6cf 0, #f7dc7a 34%, #b98417 52%, #ffe9a0 74%, #c8932b 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 #3a2504) drop-shadow(0 0 7px rgba(255, 196, 70, 0.45)); }
.bxo-front span { color: #e9dfc0; letter-spacing: 0.14em; font-size: 10.5px; text-shadow: 0 1px 0 #000; }
.bxo-band { border-color: #04060f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, var(--f3), var(--f2), var(--f1), var(--f2), var(--f3)); }
.bxo-lid { background: linear-gradient(180deg, #4b69cc 0, #2a4aa6 45%, #1a3180 100%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.28); }
.bxo-lid i { border-color: #f7dc7a; opacity: 0.9; border-width: 1.5px; }
.bxo-lid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #8a5a12, #fff3c4, #8a5a12); }
.bxo.cmini .bxo-front::after { right: -17px; }

/* ---- the cardboard case: corrugated board, packing tape with print, a red stamp, a shipping label, a visible side */
.cso-front { background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 2px, rgba(255, 255, 255, 0.05) 2px 5px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0 3px, transparent 3px 8px),
    radial-gradient(circle at 18% 30%, rgba(0, 0, 0, 0.06) 0 1.5px, transparent 2px) 0 0 / 23px 19px,
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.09) 0 1.5px, transparent 2px) 0 0 / 31px 27px,
    linear-gradient(#d3a164, #a97a42 70%, #94672f);
  box-shadow: inset 0 0 0 2px rgba(255, 235, 190, 0.25), inset 0 -10px 14px rgba(60, 30, 5, 0.35); }
.cso-front::after { content: ""; position: absolute; top: -4px; bottom: -4px; right: -18px; width: 18px; z-index: -1;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 5px), linear-gradient(90deg, #8a5e2c, #5a3a16);
  clip-path: polygon(0 0, 100% 10px, 100% calc(100% - 10px), 0 100%); }
.cso-front::before { content: "FRAGILE\A HANDLE WITH CARE"; white-space: pre; position: absolute; right: 10px; bottom: 9px; z-index: 2; text-align: center; font: 900 8px/1.25 var(--ui); letter-spacing: 0.1em; color: #c2271b; border: 2px solid #c2271b; border-radius: 3px; padding: 2px 5px; transform: rotate(5deg); opacity: 0.88; mix-blend-mode: multiply; }
.cso-front b { color: #3b2410; opacity: 0.88; text-shadow: 0 0 1px rgba(59, 36, 16, 0.6); font-size: 20px; }
.cso-front span { color: #4a2f14; }
.cso-tape { height: 15px; top: 0; background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(120, 70, 10, 0.28) 34px 35px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%), linear-gradient(#f0d9a0, #d9b66f);
  border-bottom: 2px solid rgba(0, 0, 0, 0.22); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); }
.cso-tape::after { content: "DOPA WORD  \2736  DOPA WORD  \2736  DOPA WORD"; position: absolute; inset: 0; display: block; overflow: hidden; white-space: nowrap; text-align: center; font: 900 8px/15px var(--ui); letter-spacing: 0.18em; color: rgba(150, 40, 20, 0.7); }
.cso-tape-top { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%), linear-gradient(#f0d9a0, #d9b66f); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
.cso-flap { background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 3px, transparent 3px 7px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 5px), linear-gradient(#dcae6c, #b98649); }

/* ---- the coin: milled edge, a real thickness, metal sheen that turns with the toss, engraved art; gold HEADS is clearly richer than silver TAILS */
.coin-wrap { filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.55)); }
.cf { box-shadow: none; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(4px); }
.cf.t { transform: rotateY(180deg) translateZ(4px); }
.cf.h { background:
    conic-gradient(from 30deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.4) 9%, rgba(255, 255, 255, 0) 20%, rgba(90, 50, 0, 0.4) 36%, rgba(255, 255, 255, 0.34) 56%, rgba(255, 255, 255, 0) 68%, rgba(90, 50, 0, 0.3) 88%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 34% 26%, #fff3a0, #ffc81e 32%, #d08800 70%, #7a4a02); }
.cf.t { background:
    conic-gradient(from 60deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.6) 9%, rgba(255, 255, 255, 0) 20%, rgba(40, 50, 80, 0.3) 36%, rgba(255, 255, 255, 0.5) 56%, rgba(255, 255, 255, 0) 68%, rgba(40, 50, 80, 0.3) 88%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 34% 26%, #f6f8ff, #c6cde0 36%, #838ca8 76%, #4f5873); filter: saturate(0.75); }
.cf::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.38) 0 1.6deg, rgba(255, 255, 255, 0.42) 1.6deg 3.2deg);
  -webkit-mask: radial-gradient(circle, transparent 86%, #000 87.5%); mask: radial-gradient(circle, transparent 86%, #000 87.5%); }
.cf::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), inset 0 0 0 5px rgba(90, 55, 0, 0.35), inset 0 0 0 6px rgba(255, 255, 255, 0.45), inset 0 -4px 8px rgba(0, 0, 0, 0.35), inset 0 4px 8px rgba(255, 255, 255, 0.4); }
.cf.t::after { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), inset 0 0 0 5px rgba(40, 50, 80, 0.4), inset 0 0 0 6px rgba(255, 255, 255, 0.45), inset 0 -4px 8px rgba(0, 0, 0, 0.35), inset 0 4px 8px rgba(255, 255, 255, 0.4); }
.cf svg { z-index: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.75)) drop-shadow(0 -1px 0 rgba(70, 36, 0, 0.55)); }
.cn-dot { fill: rgba(110, 66, 4, 0.7); }
.cn-feather { fill: none; stroke: rgba(122, 82, 10, 0.75); stroke-width: 0.9; stroke-linecap: round; }
.cn-facet { display: none; }
.cn-star { fill: #e0302b; stroke: #5a0e0e; }
.cf.t .cn-crown { fill: #6b2d93; }
.coin .ce { position: absolute; inset: 0; border-radius: 50%; transform: translateZ(calc(var(--z) * 1px)); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, #8a5a06 0 2deg, #e9b32a 2deg 4deg); }
.coin:has(.cf.t) .ce { }
.coin-wrap.land .coin { animation: none; }
/* spin highlight: the sheen sweeps over the faces while the coin is in the air */
.coin-ov:not(.fade) .coin-wrap:not(.land) .cf::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.85) 48%, transparent 66%) 0 0 / 260% 100%; animation: coinGlint 560ms linear infinite; }
@keyframes coinGlint { from { background-position: 130% 0; } to { background-position: -60% 0; } }
html.lite .coin-ov .coin-wrap:not(.land) .cf::after { animation: none; }
/* HEADS: rays and a bigger golden glow; TAILS: a cool, quiet silver glow */
.coin-wrap:has(.coin.heads) { filter: drop-shadow(0 0 26px rgba(255, 214, 70, 1)) drop-shadow(0 0 60px rgba(255, 170, 30, 0.6)) drop-shadow(0 12px 8px rgba(0, 0, 0, 0.55)); }
.coin-wrap:has(.coin.tails) { filter: drop-shadow(0 0 10px rgba(150, 165, 220, 0.55)) drop-shadow(0 12px 8px rgba(0, 0, 0, 0.55)); }
.coin-wrap:has(.coin.heads)::before { content: ""; position: absolute; left: 50%; top: 50%; width: 230%; aspect-ratio: 1; margin: -115% 0 0 -115%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 226, 120, 0.55) 0 4deg, transparent 4deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 14%, transparent 56%); mask: radial-gradient(circle, #000 14%, transparent 56%); animation: spin 14s linear infinite; }
html.lite .coin-wrap:has(.coin.heads)::before, html.reduce .coin-wrap:has(.coin.heads)::before { animation: none; }
.coin-wrap { position: relative; }

/* ============================================================ phase 2: stage atmosphere (gold 9-12 / abyss 13-15 / 16 / 17) */
#bg > .bx-atmo { inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1000ms ease; overflow: hidden; }
body[data-bx] #bg > .bx-atmo { opacity: 1; }
.bx-atmo > * { position: absolute; inset: 0; }
/* colour grade: one clear tone per stage, getting stronger with each step (--bxi 0..1) */
body[data-bx="1"] .ba-tint { background: radial-gradient(120% 90% at 50% 42%, rgba(255, 214, 110, calc(0.04 + var(--bxi, 0) * 0.12)) 0%, rgba(120, 66, 0, calc(0.18 + var(--bxi, 0) * 0.34)) 100%); }
body[data-bx="2"] .ba-tint { background: radial-gradient(75% 62% at 50% 46%, rgba(30, 10, 70, 0.12) 0%, rgba(2, 0, 14, calc(0.4 + var(--bxi, 0) * 0.3)) 100%), rgba(10, 0, 44, calc(0.16 + var(--bxi, 0) * 0.14)); }
body[data-bx="3"] .ba-tint { background: linear-gradient(120deg, rgba(0, 240, 255, 0.2), rgba(8, 0, 30, 0.45) 45%, rgba(255, 40, 170, 0.24)); animation: baGlitchTint 1.6s steps(1) infinite; }
body[data-bx="4"] .ba-tint { background: radial-gradient(70% 60% at 50% 44%, rgba(255, 252, 224, 0.62) 0%, rgba(255, 206, 96, 0.3) 38%, rgba(255, 90, 170, 0.3) 100%); animation: baBloom 2.4s ease-in-out infinite alternate; }
@keyframes baGlitchTint { 0% { transform: none; } 70% { transform: translateX(-6px); filter: hue-rotate(40deg); } 74% { transform: translateX(7px); filter: hue-rotate(-40deg); } 78% { transform: none; filter: none; } }
@keyframes baBloom { from { opacity: 0.65; } to { opacity: 1; } }
.ba-scan { opacity: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px); }
body[data-bx="3"] .ba-scan { opacity: 1; }
/* light pillars: warm rising beams (gold), thin god-rays from above (abyss), cyan/magenta (16), rainbow (17) */
.ba-pillars { opacity: 0; transition: opacity 800ms ease; }
body[data-bx] .ba-pillars { opacity: 1; }
.ba-pillars i { -webkit-mask: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent); mask: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent); mix-blend-mode: screen; position: absolute; top: -8%; bottom: -8%; left: var(--x); width: calc((4vw + var(--w) * 5vw) * (0.5 + var(--bxi, 0) * 0.5)); margin-left: -2vw; opacity: 0; transform-origin: 50% 100%;
  animation: baBeam var(--d, 3s) ease-in-out infinite alternate; }
@keyframes baBeam { from { transform: skewX(-7deg) scaleX(0.8); } to { transform: skewX(5deg) scaleX(1.12); } }
body[data-bx="1"] .ba-pillars i { background: linear-gradient(0deg, rgba(255, 224, 130, 0), rgba(255, 222, 120, 0.85) 35%, rgba(255, 250, 220, 0.35) 80%, rgba(255, 255, 255, 0)); opacity: calc(0.3 + var(--bxi, 0) * 0.7); }
body[data-bx="1"] .ba-pillars i:nth-child(n+6) { opacity: calc(var(--bxi, 0) * 0.5 - 0.15); }
body[data-bx="2"] .ba-pillars i { top: -8%; background: linear-gradient(180deg, rgba(255, 244, 210, 0.6), rgba(255, 236, 170, 0.14) 55%, rgba(255, 230, 150, 0)); width: calc((1.4vw + var(--w) * 2vw) * (0.6 + var(--bxi, 0) * 0.4)); opacity: calc(0.25 + var(--bxi, 0) * 0.45); transform-origin: 50% 0; animation-duration: calc(var(--d, 3s) * 2); }
body[data-bx="2"] .ba-pillars i:nth-child(n+7) { opacity: 0; }
body[data-bx="3"] .ba-pillars i { background: linear-gradient(0deg, rgba(0, 240, 255, 0), rgba(0, 240, 255, 0.55) 40%, rgba(0, 240, 255, 0)); opacity: 0.75; animation-duration: calc(var(--d, 3s) * 0.35); }
body[data-bx="3"] .ba-pillars i:nth-child(2n) { background: linear-gradient(0deg, rgba(255, 40, 170, 0), rgba(255, 40, 170, 0.55) 40%, rgba(255, 40, 170, 0)); }
body[data-bx="4"] .ba-pillars i { background: linear-gradient(0deg, rgba(255, 111, 180, 0), rgba(255, 111, 180, 0.7) 22%, rgba(255, 213, 74, 0.7) 40%, rgba(92, 240, 176, 0.7) 58%, rgba(76, 196, 255, 0.7) 76%, rgba(169, 138, 255, 0)); width: calc(8vw + var(--w) * 6vw); opacity: 0.85; animation-duration: calc(var(--d, 3s) * 0.6); }
/* the stage lands: a flash through the atmosphere and a punch-in zoom of the scene */
.ba-flash { opacity: 0; background: radial-gradient(circle at 50% 44%, #fff 0%, rgba(255, 236, 170, 0.85) 25%, rgba(255, 200, 90, 0) 70%); }
body[data-bx="2"] .ba-flash { background: radial-gradient(circle at 50% 44%, rgba(255, 240, 200, 0.7) 0%, rgba(255, 220, 140, 0.25) 22%, transparent 55%); }
body[data-bx="3"] .ba-flash { background: linear-gradient(90deg, rgba(0, 240, 255, 0.7), rgba(255, 40, 170, 0.7)); }
.bx-atmo.hit .ba-flash { animation: baFlash 900ms ease-out; }
@keyframes baFlash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
#bg.bx-punch { animation: bxPunch 900ms cubic-bezier(.15, 1.2, .4, 1); }
@keyframes bxPunch { 0% { transform: scale(var(--zp, 1.06)); } 100% { transform: none; } }
/* ornate frame over the screen edge */
.bx-frame { position: fixed; inset: 0; z-index: 43; pointer-events: none; display: none; }
body[data-bx] .bx-frame { display: block; }
body[data-bx="1"] .bx-frame { border: calc(3px + var(--bxi, 0) * 7px) solid; border-image: linear-gradient(135deg, #8a5a12, #fff3c4 28%, #c8932b 50%, #fff3c4 72%, #8a5a12) 1; box-shadow: inset 0 0 calc(18px + var(--bxi, 0) * 40px) rgba(255, 200, 70, calc(0.3 + var(--bxi, 0) * 0.4)); }
body[data-bx="2"] .bx-frame { border: 2px solid rgba(230, 185, 60, 0.85); margin: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 236, 170, 0.35), 0 0 0 9999px rgba(0, 0, 8, 0); }
body[data-bx="3"] .bx-frame { border: 3px solid; border-image: linear-gradient(90deg, #00f0ff, #ff2fb4, #00f0ff) 1; box-shadow: inset 3px 0 0 rgba(255, 47, 180, 0.8), inset -3px 0 0 rgba(0, 240, 255, 0.8), inset 0 0 40px rgba(0, 240, 255, 0.35); animation: baFrameFlick 2.4s steps(1) infinite; }
@keyframes baFrameFlick { 0%, 100% { opacity: 1; } 60% { opacity: 0.55; } 64% { opacity: 1; } 90% { opacity: 0.7; } }
body[data-bx="4"] .bx-frame { border: 11px solid; border-image: linear-gradient(135deg, #ff6fb4, #ffd54a, #5cf0b0, #4cc4ff, #a98aff, #ff6fb4) 1; box-shadow: inset 0 0 60px rgba(255, 220, 120, 0.8); }
.bx-frame .fc { position: absolute; width: 34px; height: 34px; background: conic-gradient(from 45deg, #fff3c4, #c8932b, #8a5a12, #c8932b, #fff3c4); border: 2px solid #3a2504; transform: rotate(45deg); display: none; }
body[data-bx="1"] .bx-frame .fc, body[data-bx="4"] .bx-frame .fc { display: block; }
.bx-frame .fc0 { left: -17px; top: -17px; } .bx-frame .fc1 { right: -17px; top: -17px; } .bx-frame .fc2 { left: -17px; bottom: -17px; } .bx-frame .fc3 { right: -17px; bottom: -17px; }
body[data-bx="1"] .bx-frame .fc { transform: rotate(45deg) scale(calc(0.5 + var(--bxi, 0) * 0.7)); }
/* the chips themselves take the stage's colours */
body[data-bx="1"] .fall:not(.dense) .mini { box-shadow: 0 0 calc(3px + var(--bxi, 0) * 6px) rgba(255, 214, 90, 0.75); }
body[data-bx="2"] .fall:not(.dense) .mini { box-shadow: 0 0 7px rgba(255, 238, 180, 0.4); }
body[data-bx="3"] .fall:not(.dense) .mini { box-shadow: -1.5px 0 0 rgba(255, 47, 180, 0.8), 1.5px 0 0 rgba(0, 240, 255, 0.8); }
body[data-bx="4"] .fall:not(.dense) .mini { box-shadow: 0 0 8px rgba(255, 220, 120, 0.9), 0 0 2px #fff; }
/* light machines: fewer / still beams */
html.lite .ba-pillars i { animation: none; mix-blend-mode: normal; }
html.lite .ba-pillars i:nth-child(2n) { display: none; }
html.lite .ba-tint, html.lite .bx-frame { animation: none !important; }
html.reduce .ba-pillars i, html.reduce .ba-tint, html.reduce .bx-frame, html.reduce #bg.bx-punch, html.reduce .bx-atmo.hit .ba-flash { animation: none !important; }
/* light machines (auto, from the measured frame time): no masks / blends / scan lines / blurred frame glow on the stage layers */
html.lite .ba-pillars i { -webkit-mask: none; mask: none; }
html.lite .ba-scan { display: none; }
html.lite .bx-frame { box-shadow: none !important; }
html.lite .ba-flash { display: none; }

/* ===== contrast pass (WCAG AA): every text/background pair below is checked by tests/audit (normal text >= 4.5, large >= 3) ===== */
/* tier chips and stamps: white only on dark enough fills, dark ink on the light (gold / pastel-rainbow) ones */
.tchip.t0 { background: #6f6a60; }
.tchip.t4, .stamp[data-tier="4"] { background: linear-gradient(135deg, #f3c957, #d9a52a); color: #2b1a00; }
.stamp[data-tier="5"] { background: linear-gradient(90deg, #ff8fbf, #ffb86b, #7ee0b0, #7cc8ff, #b99cff); color: #22123a; }
.stamp[data-tier="0"] { background: #7a5f30; }
/* red notification chips: white on a deeper vermilion */
.tr-new, .badge, .tro-toolbar-n, .chain-tag { background: #c8301f; }
.hd-t b, .dopa .unit { color: var(--shu-text); }
.hd-t small, .pk-extra { color: var(--pink-text); }
.dopa .label { color: var(--pink-text); -webkit-text-stroke: 3px #fff; paint-order: stroke fill; }
.m-none { color: #5f5b6b; }
/* trophy rank ladder: solid dark rows (no opacity wash on a light panel) */
.rk-row { opacity: 1; background: #1c2146; }
.rk-row.done { background: #243061; }
.rk-n { color: #c3d0ff; }
.rk-gloss { opacity: 1; color: #c9d5ff; }
/* card corner badges */
.face .new, .fcard .newb { color: #a81a1a; background: #fff; border-color: #b01e1e; mix-blend-mode: normal; }
.rbadge[data-reg="A"] { background: radial-gradient(circle at 35% 30%, #3659d9, #1d3fa8); }
.rbadge[data-reg="E"] { color: #fff; font-size: clamp(7px, 7cqw, 9px); background: radial-gradient(circle at 34% 28%, #d8352a, #a30f1c 58%, #6d0610); }
/* effect captions that sit on bright light rays get their own dark plate */
.coin-key { background: rgba(8, 6, 24, 0.84); }
.cut-hint { opacity: 1; color: #fff; background: rgba(14, 10, 30, 0.78); border-radius: 999px; padding: 3px 14px; }
.lr-sub { background: rgba(18, 10, 0, 0.74); border-radius: 8px; padding: 2px 14px 2px calc(14px + 0.42em); }
.bx-veil:not(.p4) .bx-exp { background: rgba(10, 6, 24, 0.72); border-radius: 8px; padding: 2px 12px; }
#pull-btn { background: linear-gradient(#e8468f, #cf2373); }
.share-btn { background: linear-gradient(#3366d6, #1f4fb8); }
.jp-sym.star, .jp-sym.crown, .jp-sym.dia, .jp-sym.heart { -webkit-text-stroke: 4px #1d1b24; paint-order: stroke fill; }
.jp-sym.star { color: #ffd23f; } .jp-sym.crown { color: #c27cff; } .jp-sym.dia { color: #4f8cff; } .jp-sym.heart { color: #ff5a5a; }
/* pack logo text always carries its own dark outline, whatever foil colour is behind it */
.pk-t2 { stroke: #17141f; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }
.pk-t3 { stroke: #14121c; stroke-width: 2.6px; paint-order: stroke; stroke-linejoin: round; }
/* not-yet-collected words: a pale dashed tag in plain colours instead of a 38% opacity wash */
.dex-grid .mini.miss, .dex-grid.missview .mini.miss { opacity: 1; filter: none; background: #f3f2f6; color: #5f5b6b; border-color: #a9a5b5; }
.dex-grid .mini.miss:hover { background: #fff; opacity: 1; }
.bxo-front b { -webkit-text-stroke: 3.5px #070b1c; paint-order: stroke fill; }
/* card details: no opacity washes on the stat labels / odds pill; dark plate behind the tiny card names so the comic burst can never sit under them */
.fcard .one, .fcard .st b, .fcard .rd .pos, .fcard .rd .ipa { opacity: 1; }
.fcard[data-tier="6"] .st b { opacity: 1; }
.fcard[data-tier="6"] .one, .fcard[data-tier="6"] .st { background: rgba(8, 6, 3, 0.92); }
.fcard[data-tier="6"] .rd { background: rgba(8, 6, 3, 0.72); border-radius: 8px; padding: 2px 8px; }
.face .nm { background: var(--nmbg, transparent); border-radius: 3px; margin: 0 2px 2px; padding-bottom: 1px; }
.face[data-tier="0"] { --nmbg: #ede2c4; } .face[data-tier="1"] { --nmbg: #122656; }
.face[data-tier="2"] { --nmbg: #4a1020; } .face[data-tier="3"] { --nmbg: #3c246e; }
.face[data-tier="4"] { --nmbg: #eedeb0; } .face[data-tier="5"] { --nmbg: #fffdfb; }
.face[data-tier="6"] { --nmbg: #0c0906; }
.face[data-tier="3"], .fcard[data-tier="3"] { --wfill: #fffaf0; }
/* holo / gold headwords carry a dark outline so the colour stops can never melt into a pale or glowing background */
.face[data-tier="5"] .g, .fcard[data-tier="5"] .g { background: conic-gradient(from var(--holo, 0deg), #ff3d8b, #ff9d3d, #2fbf80, #1fb3dd, #8a66ff, #ff3d8b); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: max(0.08em, 1.5px) #2a1650; paint-order: stroke fill; }
.face[data-tier="6"] .g, .fcard[data-tier="6"] .g { -webkit-text-stroke: max(0.08em, 1.5px) #000; paint-order: stroke fill; }

.bxo-front span { background: rgba(4, 6, 18, 0.7); border-radius: 4px; padding: 0 6px; }
/* NEW rubber stamp: border + outer outline keeps the stamp look; no inner ring over the letters */
.face .new, .fcard .newb { box-shadow: none; outline: 1px solid rgba(176, 30, 30, 0.55); outline-offset: 1.5px; }

/* the foil sheen on SSR / LR cards sweeps under the lettering, not over it */
.face[data-tier="4"]::after, .fcard[data-tier="4"]::after, .face[data-tier="6"]::after, .fcard[data-tier="6"]::after { z-index: 1; }
.fcard[data-tier="3"] .one { background: rgba(32, 16, 70, 0.9); color: #fff; border-radius: 999px; padding: 0 9px; }
.face[data-tier="1"], .fcard[data-tier="1"] { --wfill-a: #ffe680; }
.home .stats { color: var(--ink-2); }

/* ======================================================================== low / short screens (browser chrome, landscape, small phones)
   Cause of the cut-off title card: .tcard is a flex child with overflow:hidden, so it shrank to the screen height (min-height 0) and clipped its own
   content instead of letting #title-screen scroll. It now never shrinks; the screen scrolls, and on short screens the layout is compact with a sticky start button. */
.tcard { flex: none; }
@supports (overflow: clip) { .tcard { overflow: clip; } }
#title-screen { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.panel-body, .rw-body, .modal-card { overscroll-behavior: contain; }
@media (max-height: 760px) {
  #title-screen { padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .thead { gap: 8px; padding: 14px 10px 12px; }
  .thead .logo { padding: 14px 14px 18px; }
  .thead .logo .top { font-size: clamp(34px, 10vw, 52px); -webkit-text-stroke-width: 3px; }
  .thead .logo .main { margin-top: 6px; padding: 5px 12px 7px; font-size: clamp(24px, 7.6vw, 40px); }
  .thead .tagline { font-size: 14px; }
  .tbody { padding: 12px 16px 0; gap: 2px; }
  .tbody .title-note { font-size: 12.5px; line-height: 1.55; }
  .tctl { gap: 10px; padding: 8px 16px 0; }
  .tfoot { margin-top: 12px; padding: 10px 12px 12px; gap: 8px; }
  #start-btn { font-size: 21px; padding: 11px 18px; }
}
@supports (overflow: clip) {
  @media (max-height: 760px) {
    /* the start button stays on screen (sticky to the bottom of the scrolling title screen) while the rest scrolls underneath */
    .tctl { display: contents; }
    .tcard > .chips, .tcard > .rset { margin-top: 10px; }
    .tcard #lang-chips { margin: 10px 14px 0; }
    .tcard #rset { margin: 10px 14px 0; }
    #start-btn { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 4; margin: 12px auto 0;
      box-shadow: 0 6px 0 var(--ink), 0 0 0 5px #fffdf4, inset 0 2px 0 rgba(255, 255, 255, 0.55); }
  }
}
@media (max-height: 480px) {
  .thead { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding: 8px 10px; }
  .thead .logo { padding: 8px 12px 10px; }
  .thead .logo .top { font-size: 30px; }
  .thead .logo .main { font-size: 22px; margin-top: 3px; }
  .thead .tagline { font-size: 12.5px; }
  .tbody { padding: 8px 14px 0; } .tbody .title-note { font-size: 12px; line-height: 1.45; }
  #title-screen { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
}
/* coin toss on short screens: the box shrinks with the height and can scroll as a last resort */
.judge-box { max-height: calc(100dvh - 12px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 700px) {
  .judge.coin-ov .coin-row { margin: 10px 0 4px; min-height: 0; }
  .coin-wrap { width: clamp(84px, 24vh, 130px); }
  .coin-tag { font-size: clamp(24px, 6.4vh, 40px); }
  .judge-box { padding: 10px 16px 12px; gap: 6px; }
  .judge-title { font-size: clamp(20px, 4.6vh, 32px); }
}
@media (max-height: 460px) {
  .judge.coin-ov .coin-row { margin: 4px 0 2px; gap: 10px; }
  .coin-wrap { width: clamp(64px, 20vh, 96px); }
  .coin-tag { font-size: 22px; }
  .judge-box { padding: 6px 14px 8px; gap: 3px; border-radius: 16px; }
  .judge-title { font-size: 20px; }
  .judge-rate { font-size: 13px; } .judge-rate.lock { font-size: 14px; }
  .judge-note { font-size: 11px; padding: 3px 10px; }
  .coin-key { font-size: 11px; padding: 2px 10px; }
}

/* ============================================================ short screens: fit the full-screen reveals (landscape phones, iOS toolbars) */
/* LR/SSR cut-in: scale the whole tier + card + hint block to the height available */
@media (max-height: 640px) { .cut-body { scale: .92; } }
@media (max-height: 580px) { .cut-body { scale: .84; } }
@media (max-height: 520px) { .cut-body { scale: .74; } }
@media (max-height: 460px) { .cut-body { scale: .66; } }
@media (max-height: 420px) { .cut-body { scale: .6; } }
@media (max-height: 380px) { .cut-body { scale: .54; } }
/* pack / box / case stage (340x440 + title + caption): scale around its centre */
.pk-stage { --pks-h: 1; --pks-w: 1; scale: min(var(--pks-h), var(--pks-w)); }
@media (max-width: 359px) { .pk-stage { --pks-w: .9; } }
@media (max-height: 560px) { .pk-stage { --pks-h: .95; } }
@media (max-height: 500px) { .pk-stage { --pks-h: .88; } }
@media (max-height: 450px) { .pk-stage { --pks-h: .8; } }
@media (max-height: 410px) { .pk-stage { --pks-h: .72; } }
@media (max-height: 370px) { .pk-stage { --pks-h: .64; } }
/* grid centring: let the row track be the viewport so oversized children overflow evenly (not only downward) */
#cut, #overlay { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
@media (max-height: 760px) { #title-screen { scroll-padding-bottom: 96px; } }