/* The cartoon race. Small overlays live in #epic-layer inside the stage; the big ones (cut-ins,
   the ultimate, the spotlight) live in #epic-page over the whole window with a hole cut over the
   stage (set from JS), so they spill off the screen edges without hiding the race. */
.epic-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.epic-page { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.comic { font-weight: 900; color: #fff; -webkit-text-stroke: 2px #3a2a2a; paint-order: stroke fill; text-shadow: 5px 5px 0 #ef5a3c, 8px 8px 0 #3a2a2a33; letter-spacing: -1px; line-height: 1.05; transform: rotate(-5deg) skewX(-6deg); }

/* Stage-wide effects */
.stage.final .lanes { transform: scale(1.06); transform-origin: 100% 50%; transition: transform .9s cubic-bezier(.3,1.2,.4,1); }
.stage.final { box-shadow: inset 0 0 0 6px #ef5a3c; }
.stage.ult-storm { background: radial-gradient(circle at 50% 40%, #ffd1c7, #ef5a3c 70%); }
.stage.ult-storm .lane .track { background: repeating-linear-gradient(90deg, #ffb8aa 0 2px, transparent 2px 28px), #ffd9cf; }
.lanes { transition: transform .6s; }


@keyframes count-pop { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Entrances */
.epic-intro { position: absolute; inset: 0; background: linear-gradient(180deg, #3a2a2ab8, #3a2a2a80); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 14px; }
.epic-title { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.epic-title .comic { font-size: clamp(30px, 7vw, 56px); animation: count-pop .4s cubic-bezier(.2,1.6,.4,1); }
.epic-sub { color: #ffd9cf; font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.intro-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.intro-card { width: 86px; text-align: center; color: #fff; font-size: 14px; animation: card-in .45s cubic-bezier(.2,1.5,.4,1) both; }
.intro-card svg { width: 72px; height: 72px; display: block; margin: 0 auto 2px; filter: drop-shadow(0 6px 0 #0004); }
@keyframes card-in { from { transform: translateX(120px) rotate(30deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Racer extras */
.racer.leader::after { content: "👑"; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-size: 18px; animation: crown-bob .5s ease-in-out infinite alternate; }
.lanes[data-size="lg"] .racer.leader::after { top: -18px; font-size: 13px; } .lanes[data-size="xl"] .racer.leader::after { top: -14px; font-size: 11px; }
@keyframes crown-bob { from { transform: translate(-50%, 0) rotate(-8deg); } to { transform: translate(-50%, -4px) rotate(8deg); } }
.racer.splashed .face-normal { display: none; }
.racer.splashed .face-dizzy { display: block; }
.racer.splashed::after { content: "🍅"; position: absolute; left: 50%; top: -24px; transform: translateX(-50%); font-size: 16px; animation: splat .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes splat { from { transform: translate(-50%, -30px) scale(2); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }

/* Skill cut-ins: a tint over the page, the portrait leaning in from a corner, the lettering in
   the free band above, below or beside the stage (placed by JS). */
.cutin { position: absolute; inset: 0; background: #3a2a2a66; animation: tint-in .25s ease-out both; }
@keyframes tint-in { from { opacity: 0; } to { opacity: 1; } }
.cutin-burst { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, #ffffff1f 0 6deg, transparent 6deg 14deg); animation: burst-spin 1.6s linear infinite; }
@keyframes burst-spin { to { transform: rotate(60deg); } }
.cutin-portrait, .spot-portrait { position: absolute; left: -4vw; bottom: -8vh; width: clamp(200px, 38vmin, 400px); filter: drop-shadow(0 10px 0 #0005); animation: portrait-in .45s cubic-bezier(.2,1.6,.4,1) both; transform-origin: 50% 100%; }
.cutin-portrait.right, .spot-portrait.right { left: auto; right: -4vw; animation-name: portrait-in-right; }
.cutin-portrait.top, .spot-portrait.top { bottom: auto; top: -8vh; transform-origin: 50% 0; }
.cutin-portrait svg, .spot-portrait svg { width: 100%; height: auto; display: block; }
.cutin-portrait .plate, .spot-portrait .plate { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%) rotate(-4deg); padding: 2px 16px; border-radius: 10px; background: #fff; color: #3a2a2a; font-size: clamp(20px, 4vmin, 34px); font-weight: 900; white-space: nowrap; box-shadow: 4px 4px 0 #3a2a2a; border: 3px solid #3a2a2a; }
.cutin-portrait.top .plate, .spot-portrait.top .plate { bottom: auto; top: 62%; }
/* The portrait leans 8vh out of the bottom edge, so its name plate sits above that, on screen. */
.cutin-portrait:not(.top) .plate, .spot-portrait:not(.top) .plate { bottom: calc(8vh + 14px); }
@keyframes portrait-in { from { transform: translate(-60%, 40%) rotate(-30deg) scale(.4); } to { transform: none; } }
@keyframes portrait-in-right { from { transform: translate(60%, 40%) rotate(30deg) scale(.4); } to { transform: none; } }
.cutin-text, .spot-text { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: max-content; max-width: 96vw; text-align: center; --band: 160px; }
.cutin-text.side, .spot-text.side { transform: translate(-50%, -50%); max-width: calc(var(--band) - 16px); }
.cutin-name { color: #fff; font-weight: 900; font-size: clamp(18px, 3vmin, 28px); letter-spacing: 1px; padding: 0 12px; border-radius: 999px; background: var(--c, #ef5a3c); box-shadow: 3px 3px 0 #3a2a2a; text-shadow: 0 2px 0 #3a2a2a88; }
.cutin .skill { font-size: clamp(24px, min(calc(var(--band) * .42), 9vw), 64px); white-space: nowrap; animation: count-pop .4s cubic-bezier(.2,1.6,.4,1) .1s both; }
.cutin .onoma { font-size: clamp(18px, min(calc(var(--band) * .24), 5vw), 34px); color: #fff35c; text-shadow: 4px 4px 0 #3a2a2a; align-self: flex-end; animation: count-pop .4s cubic-bezier(.2,1.6,.4,1) .25s both; }
.cutin.ult { background: radial-gradient(circle at 50% 50%, #ff6a3d99, #b5261ab3 60%, #3a1d1dcc 100%); animation: ult-in .4s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes ult-in { from { transform: scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } }
.cutin.ult .cutin-burst { background: repeating-conic-gradient(from 0deg, #fff35c40 0 5deg, transparent 5deg 12deg); animation-duration: .9s; }
.cutin.ult .cutin-portrait { width: clamp(260px, 54vmin, 560px); animation-name: ult-portrait; }
.cutin.ult .cutin-portrait.right { animation-name: ult-portrait-right; }
@keyframes ult-portrait { 0% { transform: translate(-40%, 40%) scale(.2) rotate(-30deg); } 60% { transform: scale(1.12) rotate(3deg); } 100% { transform: rotate(-3deg); } }
@keyframes ult-portrait-right { 0% { transform: translate(40%, 40%) scale(.2) rotate(30deg); } 60% { transform: scale(1.12) rotate(-3deg); } 100% { transform: rotate(3deg); } }
.cutin.ult .cutin-name { font-size: 20px; color: #fff35c; }
.cutin.ult .cutin-name::before { content: "궁극기 발동 "; color: #fff; }
.cutin.ult .skill { font-size: clamp(30px, min(calc(var(--band) * .5), 11vw), 84px); text-shadow: 6px 6px 0 #3a1d1d, 10px 10px 0 #fff35c; }
.cutin.ult .onoma { color: #fff; font-size: clamp(22px, min(calc(var(--band) * .3), 6vw), 44px); }

/* Comic banner and spotlight */
.comic.banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-5deg) skewX(-6deg); font-size: clamp(34px, 8vw, 64px); animation: banner-pop .5s cubic-bezier(.2,1.6,.4,1) both; white-space: nowrap; }
@keyframes banner-pop { from { transform: translate(-50%, -50%) scale(3) rotate(-5deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1) rotate(-5deg) skewX(-6deg); opacity: 1; } }
.epic-spot { position: absolute; inset: 0; background: #3a2a2a80; animation: tint-in .3s ease-out both; }
.spot-rays { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg, #ffffff1c 0 8deg, transparent 8deg 18deg); animation: burst-spin 3s linear infinite; }
.spot-portrait { width: clamp(220px, 44vmin, 460px); animation-name: ult-portrait; animation-duration: .6s; }
.spot-portrait.right { animation-name: ult-portrait-right; }
.epic-spot.loser .spot-portrait svg { animation: sob 1.2s ease-in-out infinite alternate; }
@keyframes sob { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(4deg) translateY(-6px); } }
.spot-text { font-size: clamp(22px, min(calc(var(--band) * .36), 6vw), 52px); animation: count-pop .4s cubic-bezier(.2,1.6,.4,1) .2s both; }
.epic-spot.winner .spot-text { text-shadow: 5px 5px 0 var(--leaf-deep), 8px 8px 0 #3a2a2a33; }

@media (prefers-reduced-motion: reduce) {
  .cutin-burst, .spot-rays, .racer.leader::after, .epic-spot.loser .spot-portrait svg { animation: none !important; }
}

/* ---- The other four modes (src/modes-epic.js) ---------------------------------------------- */
/* Big lettering around the stage, placed by placeText like the cut-ins. */
.epic-callout { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: max-content; max-width: 96vw; text-align: center; --band: 160px; animation: callout-in .35s cubic-bezier(.2,1.6,.4,1) both; }
.epic-callout.side { transform: translate(-50%, -50%); max-width: calc(var(--band) - 16px); }
.epic-callout { max-width: 92vw; }
.epic-callout .comic { font-size: clamp(24px, min(calc(var(--band) * .42), 8vw), 60px); white-space: normal; word-break: keep-all; -webkit-text-stroke: 3px #3a2a2a; text-shadow: 5px 5px 0 #3a2a2a, 9px 9px 0 #ef5a3c88; }
.epic-callout.hit .comic { text-shadow: 6px 6px 0 #3a1d1d, 10px 10px 0 #fff35c; }
@keyframes callout-in { from { opacity: 0; scale: 2.2; } to { opacity: 1; scale: 1; } }

/* 돌림판: spin streaks that fade as it slows, a throb when it is close, a slam at the pointer. */
.wheel-wrap::before { content: ""; position: absolute; inset: -5%; z-index: 1; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(from 0deg, transparent 0 7deg, #ffffffb0 7deg 8.5deg); -webkit-mask: radial-gradient(circle, transparent 0 14%, #000 30%, #000 70%, transparent 74%); mask: radial-gradient(circle, transparent 0 14%, #000 30%, #000 70%, transparent 74%); opacity: calc(var(--spin, 0) * .85); animation: burst-spin .2s linear infinite; }
.wheel-wrap .slice { transform-box: view-box; transform-origin: 100px 100px; transition: filter .15s; }
.wheel-wrap .slice.lit { filter: brightness(1.3) saturate(1.2); }
.wheel-wrap .slice.pop { animation: slice-pop .45s cubic-bezier(.2,1.6,.4,1) infinite alternate; filter: brightness(1.25); }
@keyframes slice-pop { from { scale: 1; } to { scale: 1.07; } }
.wheel-wrap.tense svg { animation: wheel-throb .3s ease-in-out infinite alternate; }
@keyframes wheel-throb { from { scale: 1; } to { scale: 1.02; } }
.wheel-wrap.tense .pointer { animation-duration: .08s !important; }
.wheel-wrap.hit .pointer { animation: pointer-hit .5s cubic-bezier(.2,1.6,.4,1) !important; }
@keyframes pointer-hit { 0% { scale: 1.8; } 100% { scale: 1; } }

/* 마블 레이스: afterimages, pegs that light up, the picked marble in the spotlight. */
.marble-ghost { position: absolute; width: 5px; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: var(--c); opacity: .28; pointer-events: none; }
.marble-ghost.g2 { opacity: .13; scale: .8; }
.pit .peg { transition: fill .2s; }
.pit .peg.lit { fill: #ffb300; transition: none; filter: drop-shadow(0 0 1px #ffd23b); }
.marble { transition: opacity .25s; }
.marble.tense { box-shadow: 0 0 0 .6px #ffd23b, 0 0 4px #ffd23b; z-index: 2; }
.marble.picked { scale: 1.8; z-index: 3; box-shadow: 0 0 0 .6px #fff, 0 0 0 1.4px #ff6a3d, 0 0 6px #ffd23b; }
.marbles.spot .marble:not(.picked), .marbles.spot .marble-ghost { opacity: .18; }
.marbles.spot .pit { box-shadow: inset 0 0 0 3px #ffcc33, 0 0 26px #ffcc33aa; }
.standings li.tense { background: #fff3c4; animation: row-pulse .35s ease-in-out infinite alternate; }
@keyframes row-pulse { to { scale: 1.05; } }

/* 캡슐 뽑기: a rumbling machine, tumbling capsules, landing dust, a gold capsule, the bang. */
.machine.rumble .machine-body { animation: rumble .09s linear infinite alternate; }
.machine.rumble .dome { animation: rumble .11s linear infinite alternate-reverse; }
@keyframes rumble { from { translate: -2px 0; rotate: -.6deg; } to { translate: 2px -1px; rotate: .6deg; } }
/* The capsules are moved by a little physics in JS (each turns about its own middle). */
.dome .capsule { width: var(--cap, 44px); height: var(--cap, 44px); }
.dome.physics .capsule { animation: none !important; will-change: transform; }
.dome .capsule.leaving { transition: opacity .4s, scale .4s; opacity: 0; scale: .3; }
.chute-dust { position: absolute; left: 50%; bottom: 22px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #d9bfae; pointer-events: none; animation: dust-out .6s ease-out forwards; }
@keyframes dust-out { from { translate: 0 0; scale: .6; opacity: .9; } to { translate: var(--dx, 0) -16px; scale: 1.9; opacity: 0; } }
.capsule-rays { position: absolute; left: 50%; bottom: 48px; width: 340px; height: 340px; margin: 0 0 -170px -170px; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(from 0deg, #ff5e5e66 0 10deg, #ffd23b66 10deg 20deg, #5fd27f66 20deg 30deg, #5fc7ff66 30deg 40deg, #c9a7ff66 40deg 50deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: burst-spin 4s linear infinite; }
.capsule-open.golden .half.top { background: linear-gradient(135deg, #fff6b0, #ffd23b 40%, #e0a100); }
.capsule-open.golden { filter: drop-shadow(0 0 14px #ffe680); }
.capsule-open.waiting:not(.opened) .half { animation: capsule-wobble 1s ease-in-out infinite; }
.capsule-open.waiting:not(.opened) .half.top { transform-origin: 30px 30px; }
.capsule-open.waiting:not(.opened) .half.bottom { transform-origin: 30px 0; }
@keyframes capsule-wobble { 0%, 55%, 100% { rotate: 0deg; } 65% { rotate: -14deg; } 75% { rotate: 11deg; } 85% { rotate: -6deg; } }
.tap-hint { position: absolute; left: calc(50% + 38px); bottom: 30px; font-size: 30px; font-style: normal; pointer-events: none; animation: tap-poke .5s ease-in-out infinite alternate; }
@keyframes tap-poke { from { translate: 0 0; } to { translate: -10px 0; } }
.capsule-pop { position: absolute; left: 50%; top: 0; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0 16%, #ffe65a 30%, transparent 62%); animation: capsule-pop .6s ease-out forwards; }
@keyframes capsule-pop { from { scale: .2; opacity: 1; } to { scale: 1.7; opacity: 0; } }

/* 복불복 컵: leaps while swapping, SAFE stamps, trembling when few are left, the flying cup. */
.cup.hop .cup-body { animation: cup-leap var(--hop, .3s) ease-out; }
@keyframes cup-leap { 0%, 100% { translate: 0 0; rotate: 0deg; } 45% { translate: 0 -34px; rotate: -10deg; } }
.cup.safe::after { content: "세이프!"; position: absolute; left: 50%; top: 66px; translate: -50% 0; rotate: -12deg; padding: 1px 8px; border: 3px solid #2f9b57; border-radius: 8px; color: #2f9b57; background: #ffffffe6; font-weight: 900; font-size: 15px; white-space: nowrap; pointer-events: none; animation: safe-in .3s cubic-bezier(.2,1.6,.5,1) both; }
@keyframes safe-in { from { scale: 2.4; opacity: 0; } to { scale: 1; opacity: 1; } }
.cup.safe .tag { color: #2f9b57; }
.cups.tense .cup:not(.revealed) .cup-body { animation: cup-tremble .1s linear infinite alternate; }
@keyframes cup-tremble { from { translate: -2px 0; rotate: -2deg; } to { translate: 2px 0; rotate: 2deg; } }
.cups.tense .cup:not(.revealed) .tag { color: var(--tomato-deep); }
.cup.blast { z-index: 3; }
.cup.blast .cup-body { animation: cup-fly .75s cubic-bezier(.2,.8,.4,1) forwards; }
@keyframes cup-fly { to { translate: 40px -240px; rotate: 560deg; opacity: 0; } }
.cup.blast .under { font-size: 46px; animation: tomato-bounce .5s cubic-bezier(.2,1.6,.4,1) .1s both; }
@keyframes tomato-bounce { 0% { scale: .3; } 60% { scale: 1.5; } 100% { scale: 1.2; } }

@media (prefers-reduced-motion: reduce) {
  .wheel-wrap::before, .wheel-wrap.tense svg, .machine.rumble .machine-body, .machine.rumble .dome, .machine.rumble .capsule,
  .capsule-rays, .cups.tense .cup:not(.revealed) .cup-body, .dome .capsule, .standings li.tense, .capsule-open.waiting .half { animation: none !important; }
}

/* 안 열고 다시 뽑기: the shelf of closed capsules and the button beside the chute */
.capsule-tray { position: absolute; left: 12px; bottom: 16px; width: calc(50% - 140px); max-height: 330px; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; gap: 8px; }
.tray-capsule { position: relative; width: 46px; height: 46px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.tray-capsule .half { position: absolute; left: 0; width: 46px; height: 23px; background: var(--c, var(--tomato)); transition: transform .35s cubic-bezier(.3,1.3,.5,1); }
.tray-capsule .half.top { top: 0; border-radius: 23px 23px 0 0; }
.tray-capsule .half.bottom { top: 23px; background: #fff; border-radius: 0 0 23px 23px; box-shadow: inset 0 -3px 6px #0000001a; }
.tray-capsule .no { position: absolute; right: -4px; top: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.tray-capsule:not(.opened):hover { filter: brightness(1.08); translate: 0 -3px; }
.tray-capsule.arrive { animation: tray-arrive .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes tray-arrive { from { translate: 180px 40px; scale: .6; rotate: 200deg; } to { translate: 0 0; scale: 1; rotate: 0deg; } }
.tray-capsule.opened .half.top, .capsule-open.spared .half.top { transform: translate(-10px, -16px) rotate(-28deg); }
.tray-capsule.opened .half.bottom, .capsule-open.spared .half.bottom { transform: translate(10px, 4px) rotate(14deg); }
.tray-capsule .who, .capsule-open .who { position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; font-size: 12px; font-weight: 900; color: var(--ink); background: #fff; padding: 1px 6px; border-radius: 999px; box-shadow: 0 2px 0 #3a2a2a33; opacity: 0; transition: opacity .3s .15s; }
.tray-capsule.spared .who, .capsule-open.spared .who { opacity: 1; }
.tray-capsule.opened:not(.spared) { filter: drop-shadow(0 0 10px #ffd23b); }
.capsule-again { position: absolute; right: 12px; bottom: 26px; max-width: calc(50% - 140px); border: 0; border-radius: 14px; padding: 10px 12px; font: inherit; font-size: 14px; font-weight: 900; color: #fff; background: linear-gradient(180deg, #a98bff, #7a5ad8); box-shadow: 0 5px 0 #4f3a99; cursor: pointer; animation: cheer-in .35s cubic-bezier(.3,1.5,.5,1) both; }
.capsule-again:active { translate: 0 3px; box-shadow: 0 2px 0 #4f3a99; }
.capsule-last { position: absolute; right: 12px; bottom: 30px; max-width: calc(50% - 140px); margin: 0; font-size: 13px; font-weight: 800; color: var(--tomato-deep); text-align: right; }
/* Phones: the machine grows a strip at the bottom for the button, the shelf goes up the left side. */
@media (max-width: 560px) {
  .machine { height: 456px; padding-bottom: 66px; }
  .capsule-open { bottom: 68px; }
  .chute-dust { bottom: 72px; }
  .capsule-again, .capsule-last { left: 50%; right: auto; bottom: 10px; translate: -50% 0; max-width: 92%; width: max-content; text-align: center; }
  .capsule-again:active { translate: -50% 3px; }
  .capsule-tray { left: 6px; top: 10px; bottom: auto; width: 46px; max-height: 360px; flex-direction: column; flex-wrap: nowrap; overflow: hidden; }
  .tray-capsule { width: 38px; height: 38px; } .tray-capsule .half { width: 38px; height: 19px; } .tray-capsule .half.top { border-radius: 19px 19px 0 0; } .tray-capsule .half.bottom { top: 19px; border-radius: 0 0 19px 19px; }
}
.result-order li.opened { font-weight: 900; color: var(--tomato-deep); }