/* Subway Rush win sequence: painted lettering, station steel and rail light. */
#bigWin { --win-color: #ffe345; --win-secondary: #ff31bc; isolation: isolate; }
#bigWin[data-tier="mega"] { --win-color: #ff49cf; --win-secondary: #34edff; }
#bigWin[data-tier="epic"] { --win-color: #4cefff; --win-secondary: #b44dff; }
#bigWin[data-tier="max"] { --win-color: #ffed75; --win-secondary: #ff38ce; }
#bigWin .splash-rays, #bigWin .splash-splats, #bigWinStarL, #bigWinStarR, #bigWin #coinLayer { display: none; }
#bigWin .splash-bg { inset: -4000px; opacity: .97; background: #040919; }
/* The environment covers the whole window, not just the fitted stage: UI.layout() reports the letterbox per edge in --bleed-*. */
#bigWin .win-environment { position: absolute; inset: calc(-1 * var(--bleed-top, 0px)) calc(-1 * var(--bleed-right, 0px)) calc(-1 * var(--bleed-bottom, 0px)) calc(-1 * var(--bleed-left, 0px)); overflow: hidden; pointer-events: none; background: linear-gradient(#04081760, #0408178c 45%, #040817e6), url('../assets/subway-rush/video/station-desktop-poster.webp') center / cover; }
#bigWin .win-environment::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 15%, #020613b8 85%); }
#bigWin .win-rail { position: absolute; left: -15%; width: 130%; height: 3px; top: 25%; background: var(--win-color); box-shadow: 0 0 15px var(--win-color); transform: rotate(-7deg); opacity: .35; }
#bigWin .win-rail:nth-child(2) { top: 77%; transform: rotate(5deg); background: var(--win-secondary); }
#bigWin .win-paint { position: absolute; inset: 0; pointer-events: none; }
#bigWin .win-paint svg { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: auto; aspect-ratio: 1; fill: var(--win-color); opacity: 0; animation: win-paint-hit 850ms cubic-bezier(.16,.8,.2,1) var(--delay) both; }
#bigWin .win-paint svg:nth-child(even) { fill: var(--win-secondary); }
#bigWin .win-headlights { position: absolute; inset: 0; opacity: 0; background: linear-gradient(105deg, transparent 28%, #35e6ff1a 36%, #88f7ff85 40%, transparent 43%, transparent 54%, #ee8eff85 57%, transparent 66%); transform: translateX(-100%); pointer-events: none; }
#bigWin[data-tier="epic"].win-enter .win-headlights, #bigWin[data-tier="max"].win-enter .win-headlights { animation: win-headlight-pass 1150ms ease-out both; }
#bigWin .splash-content { height: calc(var(--stage-h) - 82px); gap: 0; z-index: 1; }
#bigWin .win-brand { font: 900 18px/1 var(--font-heavy); letter-spacing: 7px; color: #b0d2e8; margin-bottom: 27px; }
#bigWin .win-title-wrap { position: relative; width: 90%; max-width: 1000px; }
#bigWin .win-title-wrap::before, #bigWin .win-title-wrap::after { content: ''; position: absolute; left: 10%; right: 6%; top: 32%; bottom: 4%; transform: rotate(-6deg); background: var(--win-secondary); opacity: .3; clip-path: polygon(0 13%, 9% 9%, 8% 0, 87% 7%, 98% 0, 92% 25%, 100% 36%, 95% 83%, 73% 89%, 74% 100%, 14% 88%, 0 100%, 4% 61%); }
#bigWin .win-title-wrap::after { left: 5%; right: 13%; top: 76%; bottom: 0; opacity: .9; background: var(--win-color); transform: rotate(-5deg) scaleY(.28); }
#bigWin .splash-title { position: relative; z-index: 1; display: block; width: 100%; height: auto; transform: rotate(-5deg); filter: drop-shadow(0 8px 0 #020715) drop-shadow(0 0 18px #172a55); animation: none; }
#bigWin .splash-title-text { font-family: Bangers, Impact, sans-serif; letter-spacing: 2px; }
#bigWin .splash-title .pt-outer.thick { stroke: var(--win-secondary); stroke-width: 23px; }
#bigWin .splash-title .pt-fill.thick { stroke: #050a1a; stroke-width: 11px; }
#bigWin .splash-title .pt-shadow { fill: #030615; stroke: #030615; }
#bigWin.win-enter .win-title-wrap { animation: win-tag-arrive 650ms cubic-bezier(.16,.86,.25,1) both; }
#bigWin .count-pill { position: relative; width: min(620px, 82%); height: 118px; margin-top: 34px; border: 2px solid #6992a3; border-top: 4px solid var(--win-color); border-radius: 4px; transform: none; background: linear-gradient(165deg, #1b3447, #091528 38%, #050b19); box-shadow: 0 9px 0 #020611, 0 0 0 7px #050b18, inset 0 0 0 5px #132b3c, 0 13px 40px #0009; animation: none; }
#bigWin .count-pill::before, #bigWin .count-pill::after { display: block; content: ''; position: absolute; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: #8aabb7; box-shadow: 0 79px #557482; }
#bigWin .count-pill::before { left: 12px; }
#bigWin .count-pill::after { right: 12px; }
#bigWin .count-pill .pill-text { inset: 0; width: 100%; height: 100%; animation: none; }
#bigWin .count-pill .poster-text { font-family: var(--font-heavy); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
#bigWin .count-pill .pt-fill.dark { fill: #f2fbff; stroke: none; }
#bigWin .win-route { display: flex; align-items: center; gap: 0; width: min(340px, 50%); margin-top: 34px; }
#bigWin .win-route i { width: 11px; height: 11px; flex: 0 0 11px; border: 2px solid #3b586f; border-radius: 50%; background: #071225; }
#bigWin .win-route b { flex: 1; height: 2px; background: #253d55; }
#bigWin .win-route i:first-child,
#bigWin[data-tier="mega"] .win-route i:nth-of-type(-n+2),
#bigWin[data-tier="epic"] .win-route i:nth-of-type(-n+3),
#bigWin[data-tier="max"] .win-route i { background: var(--win-color); border-color: var(--win-color); box-shadow: 0 0 9px var(--win-color); }
#bigWin .win-continue { margin-top: 24px; font: 700 17px/1.3 var(--font-heavy); letter-spacing: 1px; color: #aacbdb; visibility: hidden; }
#bigWin.win-settled .win-continue { visibility: visible; }
#bigWin.win-settled .count-pill { border-color: var(--win-color); }
#bigWin[data-tier="max"] .win-title-wrap::before { opacity: .6; }
#bigWin[data-tier="max"].win-enter .win-environment { animation: win-max-arrive 1250ms ease-out both; }
#stage.portrait #bigWin .win-environment { background-image: linear-gradient(#04081760, #0408178c 45%, #040817e6), url('../assets/subway-rush/video/station-mobile-poster.webp'); }
#stage.portrait #bigWin .splash-content { height: calc(var(--stage-h) - 185px); }
#stage.portrait #bigWin .win-brand { font-size: 23px; letter-spacing: 6px; margin-bottom: 44px; }
#stage.portrait #bigWin .win-title-wrap { width: 96%; }
#stage.portrait #bigWin .count-pill { width: 80%; height: 120px; margin-top: 48px; }
#stage.portrait #bigWin .win-route { margin-top: 48px; }
#stage.portrait #bigWin .win-continue { font-size: 24px; margin-top: 38px; }
@keyframes win-tag-arrive { 0% { transform: translate(-70px, 22px) scale(1.18) rotate(-4deg); opacity: 0; } 30% { opacity: 1; } 65% { transform: translate(3px, -2px) scale(.99); } 100% { transform: none; opacity: 1; } }
@keyframes win-paint-hit { 0% { transform: scale(.18) rotate(-18deg); opacity: 0; } 22% { opacity: .68; } 55% { transform: scale(1) rotate(8deg); opacity: .38; } 100% { transform: scale(1.08) rotate(10deg); opacity: 0; } }
@keyframes win-headlight-pass { 0% { transform: translateX(-90%); opacity: 0; } 25% { opacity: .65; } 100% { transform: translateX(90%); opacity: 0; } }
@keyframes win-max-arrive { from { transform: scale(1.13); filter: brightness(1.6); } to { transform: none; filter: none; } }
body.page-hidden #bigWin *, body.page-hidden #bigWin *::before, body.page-hidden #bigWin *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  #bigWin *, #bigWin *::before, #bigWin *::after { animation: none !important; transition: none !important; }
  #bigWin .win-headlights, #bigWin .win-paint { display: none; }
}