/* Cosmic Cargo presentation. Every moving effect is owned by presentation.js;
   the only perpetual CSS loops (idle/win symbols, end of file) are gated by the
   .cc-idle / .cc-win-dim classes, which a presentation scope adds and removes. */
.cc-presentation-reels .cell,
.cc-presentation-reels .cell .symbol-art {
  animation: none !important;
}
.cc-presentation-reels .cell .symbol-art { opacity: 1; filter: drop-shadow(0 6px 5px #0005); }
/* The board under the rolling covers keeps its look: no filter swap (and full repaint) as a spin starts. */
.is-spinning .cc-presentation-reels .cell .symbol-art { opacity: 1; filter: drop-shadow(0 6px 5px #0005); }
.cc-reel-cover {
  position: absolute; inset: 0; z-index: 12; overflow: hidden;
  border-radius: 14px; pointer-events: none; contain: paint;
  background: linear-gradient(90deg,#082234,#103c4b 48%,#082234);
  box-shadow: inset 0 12px 18px #021523, inset 0 -12px 18px #021523;
}
.cc-reel-cover::before,.cc-reel-cover::after {
  content: ''; position: absolute; left: 0; right: 0; height: 30px; z-index: 2;
  background: linear-gradient(#031827,transparent);
}
.cc-reel-cover::before { top: 0; }
.cc-reel-cover::after { bottom: 0; transform: rotate(180deg); }
.cc-reel-track { display: flex; flex-direction: column; gap: var(--cc-cell-gap,6px); will-change: transform; transform: translate3d(0,0,0); }
.cc-strip-cell { display: grid; place-items: center; height: var(--cc-cell-height,76px); flex-shrink: 0; opacity: .9; }
/* No filter on the moving track: it would be re-run every frame. The blur sits on each tile,
   so it is painted once into the track's layer, which then only translates. */
.cc-strip-cell .symbol-art { width: min(95%,96px); height: 100%; object-fit: contain; filter: blur(1.2px); }
.cc-speed-edge { position: absolute; inset: 0; border: 1px solid #94ffe033; border-radius: inherit; background: repeating-linear-gradient(90deg,transparent 0 32%,#aeffed0c 33%,transparent 34% 66%,#aeffed0c 67%,transparent 68%); }
.cc-still .cc-reel-track { opacity: .65; }
.cc-still .cc-strip-cell .symbol-art { filter: none; }
.cc-reels-revealing > .reel > .cell.is-winning { background: linear-gradient(150deg,#39717921,#24465d05); box-shadow: none; border-color: #7fc7bd14; }
.cc-reels-revealing > .reel > .cell.cc-win-mark { border-color: #ffe2a3; background: radial-gradient(ellipse,#cf983956,#326c5240); box-shadow: inset 0 0 16px #ffc14644,0 0 20px #ffbe4540; }
.cc-reel-stopped::before { content: ''; pointer-events: none; position: absolute; inset: -2px; border: 1px solid #eac28238; border-radius: 14px; }
.cc-payline-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 22; pointer-events: none; overflow: visible; }
.cc-payline { fill: none; stroke: #ffdb8e; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px #ffba41); }
.cc-line-1 { stroke: #a1ffe2; filter: drop-shadow(0 0 5px #66d8c6); }
.cc-line-2 { stroke: #f7f0c2; }
.cc-collection-tally { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 27; min-width: 142px; text-align: center; padding: 8px 20px; border: 1px solid #f4d38c; border-radius: 24px; color: #ffe7ae; background: linear-gradient(#234b46,#102d38); box-shadow: 0 4px 24px #000a,0 0 20px #d3b86b33; pointer-events: none; }
.cc-collection-tally span { display: block; font-size: 8px; letter-spacing: 1.6px; }
.cc-collection-tally strong { font: 700 18px/1.2 var(--display,system-ui); font-variant-numeric: tabular-nums; }
.cc-flying-cargo { position: absolute; width: 65px; height: 65px; z-index: 28; pointer-events: none; filter: drop-shadow(0 0 12px #ffcf6e); will-change: transform,opacity; }
.cc-flying-cargo .symbol-art { width: 100%; height: 100%; }
.cc-collected { border-color: #ffe39b !important; }
.cc-showcase { --cc-gold: #ffd87f; --cc-soft: #d9f6de; font-family: var(--display,'Space Grotesk',system-ui,sans-serif); text-align: center; color: #fff0c9; isolation: isolate; }
.cc-fullscreen { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; align-items: safe center; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 50% 48%,#284b42f0 0%,#061729ed 54%,#030d1bf5 100%); }
.cc-fullscreen::before { content: ''; position: absolute; inset: 16px; border: 1px solid #dbc18b33; border-radius: 28px; pointer-events: none; z-index: -1; }
.cc-fullscreen::after { content: ''; position: absolute; inset: 23px; border-top: 1px solid #d9c38216; border-bottom: 1px solid #d9c38216; border-radius: 24px; pointer-events: none; z-index: -1; }
.cc-decoration-layer { position: absolute; inset: 0; overflow: hidden; contain: paint; pointer-events: none; z-index: -1; }
.cc-award-card { position: relative; width: min(920px,100%); min-width: 0; max-width: 100%; box-sizing: border-box; z-index: 3; padding: 30px 0; margin: auto; }
.cc-award-eyebrow { font-size: 10px; line-height: 1.5; font-weight: 700; color: var(--cc-soft); letter-spacing: .34em; margin: 0 0 20px; }
.cc-metal-title { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; font-size: clamp(40px,8.6vw,110px); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; margin: 0 auto 22px; color: #ffe3a0; background: none; -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; filter: none; text-shadow: none; text-wrap: balance; }
.cc-award-amount { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: clamp(48px,9vw,108px); font-weight: 800; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1,"lnum" 1; line-height: 1.16; letter-spacing: 0; color: #fffaf0; text-shadow: none; filter: none; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.cc-award-unit { margin: 16px 0 0; font-size: 10px; line-height: 1.65; color: #c1d3be; letter-spacing: .18em; }
.cc-award-hint { color: #a6bbb6; font: 400 11px/1.5 var(--font,system-ui); letter-spacing: .06em; margin: 26px 0 12px; }
.cc-award-continue { min-width: 160px; min-height: 44px; padding: 12px 24px; font: 700 12px/1.2 var(--font,system-ui); letter-spacing: .08em; color: #f6e2b8; border: 1px solid #f3d49666; border-radius: 28px; background: linear-gradient(#365247cc,#203a3acc); box-shadow: inset 0 1px 0 #fff1b922,0 3px 12px #0004; cursor: pointer; }
.cc-award-continue:hover { background: #42665b; border-color: #ffe5aa; }
.cc-award-continue:focus-visible { outline: 2px solid #b2ffe5; outline-offset: 5px; }
.cc-preview-mark { width: fit-content; margin: 22px auto 0; padding: 9px 15px; border: 1px solid #ffcf7c; border-radius: 6px; font: 700 11px/1.5 var(--font,system-ui); letter-spacing: .06em; color: #fff0b6; background: #593c19e6; }
.cc-final-spin { color: #a9c2bd; font: 400 12px/1.5 var(--font,system-ui); margin: 15px 0 0; }
.cc-award-halo { position: absolute; left: calc(50% - 46vmax); top: calc(50% - 46vmax); width: 92vmax; height: 92vmax; z-index: -1; pointer-events: none; border-radius: 50%; opacity: .35; background: repeating-conic-gradient(from 18deg,transparent 0deg 18deg,#d8c37c19 20deg 24deg,transparent 26deg 45deg); mask-image: radial-gradient(circle,#000 15%,transparent 65%); }
.cc-orbit { position: absolute; left: 50%; top: 50%; width: min(73vw,690px); aspect-ratio: 1; border: 1px solid #d9d39b2e; border-radius: 50%; pointer-events: none; z-index: -1; }
.cc-orbit-a { transform: translate(-50%,-50%) rotate(-24deg) scaleY(.5); box-shadow: 0 0 38px #badcc20b; }
.cc-orbit-b { transform: translate(-50%,-50%) rotate(39deg) scaleY(.58); border-style: dashed; opacity: .6; }
.cc-tier-mega { --cc-soft: #b5ffe5; background: radial-gradient(ellipse at 50% 48%,#2f6650ef,#082b32f5 48%,#030e1af8); }
.cc-tier-mega .cc-metal-title { font-size: clamp(44px,10vw,118px); }
.cc-tier-super { --cc-soft: #ffe8ad; background: radial-gradient(ellipse at 50% 48%,#654d30f2,#292735f5 48%,#100f24f8); }
.cc-tier-super .cc-metal-title { color: #ffe3a0; }
.cc-tier-super .cc-orbit { border-color: #f9cc805c; }
.cc-tier-feature .cc-metal-title,.cc-tier-summary .cc-metal-title { font-size: clamp(36px,7vw,82px); }
.cc-tier-feature .cc-award-amount { font-size: clamp(82px,15vw,150px); line-height: 1; }
.cc-tier-feature .cc-award-unit { font-size: 12px; letter-spacing: .05em; }
.cc-run-manifest { display: flex; justify-content: center; gap: 7px; margin: 20px 0 12px; }
.cc-run-crate { display: grid; place-items: center; width: clamp(28px,5vw,45px); height: clamp(32px,6vw,49px); border: 1px solid #edce8b; border-radius: 7px; background: linear-gradient(135deg,#ffe5a5 0%,#dba54e 7%,#486259 8%,#23443f 88%,#d2a350 89%); color: #fbe5af; font-size: 11px; font-weight: 700; box-shadow: 0 3px 0 #112b2c; }
.cc-particle-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.cc-particle { position: absolute; left: 50%; top: 43%; display: block; width: 11px; height: 17px; background: linear-gradient(135deg,#ffefb1,#d99130); border: 1px solid #fff0b7aa; border-radius: 2px; box-shadow: 0 0 7px #eabc5844; will-change: transform,opacity; }
.cc-particle-1 { width: 7px; height: 7px; border-radius: 50%; background: #bdf5dd; border-color: #e3fff5; }
.cc-particle-2 { width: 5px; height: 19px; background: #f4d184; border: 0; }
.cc-small-win { position: absolute; z-index: 35; inset: 0; margin: auto; width: min(80%,370px); height: fit-content; border: 1px solid #cfbd7c66; border-radius: 20px; background: radial-gradient(ellipse,#1c493fee,#092334e8); box-shadow: 0 8px 30px #0007; pointer-events: none; overflow: hidden; }
.cc-small-win .cc-award-card { padding: 18px 10px; }
.cc-small-win .cc-award-eyebrow { font-size: 8px; letter-spacing: .15em; margin-bottom: 10px; }
.cc-small-win .cc-metal-title { font-size: 18px; letter-spacing: .1em; margin-bottom: 12px; -webkit-text-stroke: 0; }
.cc-small-win .cc-award-amount { font-size: clamp(30px,5vw,46px); }
.cc-small-win .cc-award-unit { font-size: 8px; margin-top: 9px; }
.cc-small-win .cc-orbit,.cc-small-win .cc-award-halo { display: none; }
.cc-small-win .cc-preview-mark { font-size: 9px; padding: 6px 8px; margin-top: 12px; }
.cc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cc-motion-reduced .cc-award-halo,.cc-motion-reduced .cc-orbit { display: none; }
@media(max-width:600px) {
  .cc-fullscreen { padding-left: 20px; padding-right: 20px; }
  .cc-fullscreen::before { inset: 9px; border-radius: 20px; }
  .cc-fullscreen::after { inset: 14px; }
  .cc-award-eyebrow { font-size: 8px; letter-spacing: .2em; margin-bottom: 20px; }
  .cc-metal-title { line-height: 1.15; margin-bottom: 26px; }
  .cc-award-unit { font-size: 9px; }
  .cc-preview-mark { max-width: 290px; font-size: 10px; }
  .cc-award-card { padding: 25px 0; }
  .cc-award-hint { font-size: 10px; }
  .cc-collection-tally { bottom: 8px; padding: 5px 14px; min-width: 125px; }
  .cc-flying-cargo { width: 50px; height: 50px; }
  .cc-run-manifest { gap: 5px; }
}
@media(max-height:600px) and (min-width:601px) {
  .cc-fullscreen { padding: 12px 25px; }
  .cc-award-card { padding: 12px 0; }
  .cc-metal-title { font-size: 52px; margin-bottom: 10px; }
  .cc-award-amount { font-size: 62px; }
  .cc-award-eyebrow { margin-bottom: 10px; }
  .cc-award-unit { margin-top: 8px; }
  .cc-award-hint { margin-top: 14px; }
  .cc-tier-feature .cc-award-amount { font-size: 76px; }
  .cc-tier-feature .cc-metal-title,.cc-tier-summary .cc-metal-title { font-size: 38px; }
  .cc-run-manifest { margin: 10px 0; }
}
@media(prefers-reduced-motion:reduce) {
  .cc-reel-track { filter: none; }
  .cc-particle-field,.cc-award-halo,.cc-orbit { display: none; }
  .cc-showcase * { transition: none !important; }
}
/* Free spins begin after the intro; Skip and Pause remain available throughout.
   No paid spin is initiated by this presentation. */
.cc-tier-feature .cc-award-card { padding-top: 12px; padding-bottom: 12px; }
.cc-tier-feature .cc-metal-title { font-size: clamp(28px,5.4vw,64px); margin-bottom: 8px; }
.cc-tier-feature .cc-award-amount { font-size: clamp(62px,10vw,94px); }
.cc-tier-feature .cc-award-eyebrow { color: #ffdc92; font-size: clamp(12px,2vw,20px); letter-spacing: .2em; }
.cc-tier-feature .cc-award-unit { max-width: 420px; margin-left: auto; margin-right: auto; }
.cc-tier-feature .cc-award-hint { margin-top: 18px; }
.cc-tier-feature .cc-award-continue { background: linear-gradient(#ffe4aa,#e5ac57); color: #253b36; border-color: #fff0c5; font-size: 14px; min-width: 220px; box-shadow: 0 3px 0 #806137,0 8px 25px #0004; }
.cc-feature-later { display: block; margin: 16px auto 0; min-height: 36px; padding: 5px 18px; background: transparent; color: #b5ccc3; text-decoration: underline; text-underline-offset: 4px; font: 400 12px/1.5 var(--font,system-ui); border: 0; }
.cc-feature-later:focus-visible { outline: 2px solid #b2ffe5; outline-offset: 3px; }
.cc-energy-gate { position: relative; width: 185px; height: 140px; margin: 0 auto 6px; isolation: isolate; }
.cc-energy-gate::before { content: ''; position: absolute; inset: 8px 28px; border-radius: 50%; background: radial-gradient(ellipse,#c7ffde77,#66cebb22 45%,transparent 70%); box-shadow: 0 0 38px #9df8ce25; }
.cc-gate-ring { position: absolute; inset: 7px 20px; border: 3px solid #e7d08b; border-radius: 50%; transform: rotate(-22deg) scaleX(.92); box-shadow: 0 0 0 5px #183f42,0 0 0 6px #acffda55,inset 0 0 18px #68d3b755,0 0 25px #80e8ca44; }
.cc-gate-ring-inner { inset: 15px 29px; border-width: 1px; border-style: dashed; border-color: #acf4d1; transform: rotate(23deg) scaleX(.92); box-shadow: none; }
.cc-gate-captain { position: absolute; inset: 14px 33px; filter: drop-shadow(0 6px 8px #031625); }
.cc-gate-captain .symbol-art { width: 100%; height: 100%; }
@media(max-height:700px) {
  .cc-tier-feature .cc-metal-title { font-size: clamp(26px,5vw,45px); }
  .cc-tier-feature .cc-award-amount { font-size: 54px; }
  .cc-energy-gate { height: 105px; width: 150px; margin-bottom: 0; }
  .cc-gate-captain { inset: 10px 28px; }
  .cc-tier-feature .cc-award-eyebrow { margin-bottom: 10px; }
  .cc-tier-feature .cc-run-manifest { margin-top: 10px; }
}
/* Decorative film belongs only to the bonus entrance. Poster remains
   behind it for slow loads, playback rejection and reduced motion. */
.cc-feature-film { position: relative; width: min(100%,400px); aspect-ratio: 16 / 9; height: auto; margin: 0 auto 15px; overflow: hidden; border: 1px solid #e7ce8b66; border-radius: 15px; background: #102b32; box-shadow: 0 5px 24px #0005,0 0 20px #b9dca51a; pointer-events: none; }
.cc-feature-poster,.cc-feature-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-feature-video { opacity: 0; }
.cc-feature-film.is-playing .cc-feature-video { opacity: 1; }
.cc-feature-film ~ .cc-energy-gate { display: none; }
@media(max-width:600px) {
  .cc-feature-film { width: min(100%,320px); margin-bottom: 12px; border-radius: 12px; }
}
@media(max-height:700px) {
  .cc-feature-film { width: min(100%,280px); margin-bottom: 8px; }
}
@media(max-height:560px) {
  .cc-feature-film { width: min(100%,240px); }
}
/* Phone-first reading sizes. Keep text readable on 360/390px screens;
   the fullscreen layer scrolls vertically instead of shrinking the content. */
@media(max-width:600px) {
  .cc-fullscreen .cc-award-card { padding: 18px 0; }
  .cc-fullscreen .cc-award-eyebrow,
  .cc-small-win .cc-award-eyebrow { font-size: 12px; line-height: 1.55; letter-spacing: .08em; overflow-wrap: anywhere; }
  .cc-tier-feature .cc-award-eyebrow { font-size: 16px; letter-spacing: .08em; }
  .cc-fullscreen .cc-award-unit,
  .cc-small-win .cc-award-unit { font-size: 14px; line-height: 1.65; letter-spacing: .025em; overflow-wrap: anywhere; }
  .cc-fullscreen .cc-award-hint { font-size: 12px; line-height: 1.6; letter-spacing: .02em; }
  .cc-fullscreen .cc-final-spin { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .cc-fullscreen .cc-preview-mark,
  .cc-small-win .cc-preview-mark { max-width: 100%; box-sizing: border-box; font-size: 12px; line-height: 1.6; letter-spacing: .02em; overflow-wrap: anywhere; }
  .cc-fullscreen .cc-metal-title { max-width: 100%; line-height: 1.18; letter-spacing: -.025em; white-space: normal; overflow-wrap: anywhere; }
  .cc-tier-feature .cc-metal-title { font-size: 32px; }
  .cc-tier-summary .cc-metal-title { font-size: clamp(32px,9vw,40px); }
  .cc-small-win .cc-metal-title { font-size: 20px; line-height: 1.3; letter-spacing: .02em; overflow-wrap: anywhere; }
  .cc-fullscreen .cc-award-continue { min-height: 48px; min-width: min(220px,100%); max-width: 100%; padding: 13px 20px; box-sizing: border-box; font-size: 14px; line-height: 1.4; letter-spacing: .025em; white-space: normal; overflow-wrap: anywhere; }
  .cc-fullscreen .cc-feature-later { min-height: 44px; max-width: 100%; padding: 10px 20px; font-size: 14px; line-height: 1.5; }
  .cc-run-crate { font-size: 12px; }
  .cc-collection-tally span { font-size: 12px; line-height: 1.4; letter-spacing: .035em; }
}
/* Each major tier has a distinct, finite energy treatment behind sharp text. */
.cc-tier-energy { position: absolute; inset: 0; overflow: hidden; contain: paint; pointer-events: none; z-index: 1; }
.cc-energy-ring { position: absolute; left: 50%; top: 43%; width: min(82vw,620px); aspect-ratio: 1; border: 2px solid #ffdc8f; border-radius: 50%; box-shadow: 0 0 12px #f4bd4b30,inset 0 0 10px #f4bd4b20; }
.cc-energy-big .cc-energy-ring { border-width: 3px; }
.cc-energy-mega .cc-energy-ring { border-width: 2px; border-left-color: transparent; border-right-color: transparent; }
.cc-energy-mega .cc-energy-ring:nth-child(2) { width: min(70vw,530px); border-color: #fff0b9 transparent; }
.cc-energy-super .cc-energy-ring { border-width: 3px; border-color: #fff0b4; box-shadow: 0 0 16px #f6c56333; }
.cc-tier-mega .cc-particle { width: 7px; height: 7px; border-radius: 50%; background: #ffe5a1; }
.cc-tier-super .cc-particle { width: 4px; height: 24px; border: 0; border-radius: 3px; background: linear-gradient(#fff3c6,#e9b45000); }
.cc-tier-super .cc-particle-1 { width: 6px; height: 14px; }
@media(prefers-reduced-motion:reduce) { .cc-tier-energy { display: none; } }
/* A single real-round award travels to the balance; no scales, glow or input hitbox. */
.cc-win-transfer { position: fixed; z-index: 1200; transform: translate(-50%,-50%); max-width: calc(100vw - 24px); box-sizing: border-box; padding: 8px 13px; border: 1px solid #ffe4a7; border-radius: 12px; background: #102d38; color: #fff9e9; font: 800 32px/1.15 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1,"lnum" 1; letter-spacing: 0; text-align: center; text-shadow: none; filter: none; overflow-wrap: anywhere; pointer-events: none; }
@media(max-width:600px) { .cc-win-transfer { padding: 7px 11px; font-size: 28px; } }

/* Anticipation: running crate count, last-reel suspense, landing flares, coin rain.
   All motion is WAAPI owned by presentation.js; these rules are static styling. */
.cc-crate-meter { position: absolute; z-index: 30; transform: translate(-50%,-50%); display: flex; align-items: baseline; gap: 7px; padding: 5px 14px 6px; border: 1px solid #e8c77d99; border-radius: 20px; color: #f7e3b2; background: linear-gradient(#1d4440f2,#0c2433f2); box-shadow: 0 3px 14px #0009; pointer-events: none; white-space: nowrap; transition: border-color .2s,box-shadow .2s,opacity .2s; }
.cc-crate-label { font: 700 10px/1 var(--font,system-ui); letter-spacing: .16em; }
.cc-crate-count { font: 800 17px/1 var(--display,system-ui); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cc-crate-meter.is-hot { border-color: #ffd877; color: #fff2c9; box-shadow: 0 0 0 1px #ffd87766,0 0 22px #ffc24a99,0 3px 14px #0009; }
.cc-crate-meter.is-complete { border-color: #fff0b8; color: #3c2706; background: linear-gradient(#ffe7a6,#f0b84c); box-shadow: 0 0 24px #ffcf5fbb,0 3px 14px #0009; }
.cc-crate-meter.is-near { opacity: .72; border-color: #c9d6cf66; color: #d7e2dc; }
.cc-cargo-burst { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border: 2px solid #ffe39a; border-radius: 50%; box-shadow: 0 0 22px #ffc95c,inset 0 0 18px #ffd77c88; pointer-events: none; opacity: 0; }
.cc-cargo-spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px #ffcb55; pointer-events: none; opacity: 0; }
.cc-anticipating .cc-reel-cover { box-shadow: inset 0 0 0 2px #ffd36e,inset 0 0 26px #ffc24a88,inset 0 12px 18px #021523,inset 0 -12px 18px #021523; }
.cc-anticipation-frame { position: absolute; inset: -4px; z-index: 13; border: 2px solid #ffd877; border-radius: 16px; box-shadow: 0 0 18px #ffc24acc,inset 0 0 22px #ffcf6a77; pointer-events: none; }
.cc-land-flare { position: absolute; inset: 4% 8%; z-index: 3; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle,#fff6d0cc 0%,#ffd36e66 38%,transparent 70%); mix-blend-mode: screen; }
.cc-flare-wild { background: radial-gradient(circle,#fff3c9cc 0%,#ffbf4d77 40%,transparent 70%); }
.cc-flare-ship { background: radial-gradient(circle,#e9feffcc 0%,#7fe9ff66 40%,transparent 70%); }
.cc-flare-planet { background: radial-gradient(circle,#f6eaffcc 0%,#c79bff66 40%,transparent 70%); }
.cc-coin-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; perspective: 600px; }
.cc-coin { position: absolute; top: 0; display: block; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff7cf 0 12%,#ffd970 30%,#d99a2b 68%,#9c6514 100%); border: 1px solid #fff0b4; box-shadow: inset 0 0 0 4px #e9b0456b,0 0 9px #ffcc5c66; opacity: 0; will-change: transform,opacity; }
.cc-coin::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid #a7701c99; }
.cc-coin-1 { width: 20px; height: 20px; }
.cc-coin-2 { width: 32px; height: 32px; }
@media(max-width:600px) { .cc-crate-meter { margin-top: 8px; padding: 2px 10px 3px; gap: 5px; } .cc-crate-label { font-size: 9px; } .cc-crate-count { font-size: 14px; } .cc-coin-2 { width: 26px; height: 26px; } }
@media(prefers-reduced-motion:reduce) { .cc-coin-rain,.cc-land-flare,.cc-cargo-burst,.cc-cargo-spark { display: none; } .cc-crate-meter { transition: none; } }

/* Big-win captain stage: the crate-opening climax in a gold portal. The glow is static per
   tier and the light sweep only translates, so the card never repaints per frame (an animated
   120px box-shadow and background-position used to cost the Super card a frame in two).
   Text layers are never scaled. */
.cc-bigwin-film { width: min(100%,380px); border: 2px solid #f3d38a; border-radius: 20px;
  box-shadow: 0 0 0 5px #f3d38a2a, 0 0 46px #f6c45a66, 0 10px 30px #0009; }
.cc-bigwin-film .cc-feature-poster, .cc-bigwin-film .cc-feature-video { object-position: 50% 42%; transform: scale(1.12); }
.cc-bigwin-film::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 45%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent, #fff4d24d 50%, transparent); animation: cc-bigwin-sweep 2.4s ease-in-out infinite; }
.cc-tier-mega .cc-bigwin-film { border-color: #b7ffe3; box-shadow: 0 0 0 4px #b7ffe326, 0 0 44px #6ff0c766, 0 10px 30px #0009; }
.cc-tier-mega .cc-bigwin-film::after { animation-duration: 1.8s; }
.cc-tier-super .cc-bigwin-film { border-color: #ffe39a; box-shadow: 0 0 0 5px #ffd77a33, 0 0 60px #ffbf4a80, 0 0 120px #ff8fd033, 0 10px 30px #0009; }
.cc-tier-super .cc-bigwin-film::after { animation-duration: 1.4s; }
@keyframes cc-bigwin-sweep { from { translate: -110% 0; } to { translate: 230% 0; } }
.cc-tier-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, #fff6d6d9, #ffd56a59 32%, transparent 66%); }
@media(max-width:600px) { .cc-bigwin-film { width: min(100%,300px); border-radius: 16px; } }
@media(max-height:700px) { .cc-bigwin-film { width: min(100%,250px); } }
@media(max-height:560px) { .cc-bigwin-film { width: min(100%,200px); } }
.cc-motion-reduced .cc-bigwin-film, .cc-motion-reduced .cc-bigwin-film::after { animation: none; }
@media(prefers-reduced-motion:reduce) { .cc-bigwin-film, .cc-bigwin-film::after { animation: none; } .cc-tier-flash { display: none; } }

/* Sticky cargo run (v4): locked crates sit above the rolling strip and never spin;
   only empty spaces roll. The breathing glow is WAAPI owned by presentation.js. */
.cc-presentation-reels .cell.cc-locked { z-index: 14; border-color: #ffd877; background: radial-gradient(ellipse at 50% 45%,#5b4519f2,#1b2c38f5 74%); box-shadow: inset 0 0 12px #ffcf6a44,0 0 10px #ffc24a44; }
.cc-presentation-reels .cell.cc-locked::before { background: radial-gradient(ellipse,#ffcf6a40,transparent 70%); opacity: 1; }
.cc-presentation-reels .cell.cc-locked .symbol-art { opacity: 1; filter: drop-shadow(0 0 6px #ffcf6a77) drop-shadow(0 4px 4px #0006); }
.cc-presentation-reels .cell.cc-locked .prize-value { border-color: #ffe39b; color: #fff4c6; }
.cc-sticky-run .cc-reel-cover { background: linear-gradient(90deg,#071c2c,#0d3341 48%,#071c2c); }
.cc-hold-meter { padding-left: 16px; padding-right: 16px; }

/* Excitement pass: Nice Win card, winning-symbol flares, last-reel impact, cargo alert,
   final-spin banner and full-hold flash. Motion is WAAPI owned by presentation.js. */
.cc-small-win.cc-skippable { pointer-events: auto; cursor: pointer; }
.cc-tier-nice.cc-small-win { overflow: visible; width: min(84%,400px); border: 1px solid #ffd877; background: radial-gradient(ellipse at 50% 35%,#5a4517f2,#173a36f2 58%,#0a2232f2); box-shadow: 0 0 0 1px #ffe7a344,0 0 34px #ffc24a77,0 10px 34px #000a; }
.cc-tier-nice .cc-award-card { padding: 20px 12px 18px; }
.cc-tier-nice .cc-metal-title { font-size: clamp(24px,5vw,34px); letter-spacing: .06em; color: #ffe39b; text-shadow: 0 2px 0 #5b3a0b,0 0 18px #ffbf4a88; margin-bottom: 8px; }
.cc-tier-nice .cc-award-eyebrow { color: #fff0c2; }
.cc-tier-nice .cc-award-amount { font-size: clamp(34px,6vw,52px); color: #fffaf0; }
.cc-coin-pop { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; z-index: 4; perspective: 500px; }
.cc-coin-pop .cc-coin { left: 0; top: 0; }
.cc-win-flare { position: absolute; inset: -12%; z-index: 3; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle,#fffbe0ee 0%,#ffd36e77 38%,transparent 70%); }
.cc-win-ring { position: absolute; inset: 12%; z-index: 3; border: 2px solid #ffe7a3; border-radius: 50%; pointer-events: none; opacity: 0; background: none !important; box-shadow: 0 0 14px #ffd36e; }
.cc-win-ring.cc-flare-ship { border-color: #9ff6ff; box-shadow: 0 0 14px #7fe9ff; }
.cc-win-ring.cc-flare-planet { border-color: #e1c2ff; box-shadow: 0 0 14px #c79bff; }
.cc-impact-flash { position: absolute; inset: 0; z-index: 25; border-radius: inherit; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(ellipse at 50% 55%,#fff3c8cc,#ffc24a55 45%,transparent 75%); }
.cc-cargo-alarm { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.cc-alarm-edge { position: absolute; inset: 0; border: 3px solid #ff5a3a; box-shadow: inset 0 0 60px 18px #ff3b2fcc,inset 0 0 150px 46px #ffb02e66; }
.cc-alarm-text { position: absolute; left: 50%; top: 24%; transform: translate(-50%,-50%); padding: 10px 26px; white-space: nowrap; border: 2px solid #ffcf6a; border-radius: 10px; background: repeating-linear-gradient(-45deg,#8a1414e8 0 14px,#5a0c0ce8 14px 28px); color: #fff0c2; font: 900 clamp(24px,6vw,48px)/1.1 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif; letter-spacing: .12em; text-shadow: 0 0 12px #ff5a3a,0 2px 0 #3d0606; box-shadow: 0 0 30px #ff3b2f99; }
.cc-final-banner { position: absolute; z-index: 31; transform: translate(-50%,-50%) skewX(-6deg); padding: 14px 40px; white-space: nowrap; pointer-events: none; color: #fff4cf; font: 900 clamp(30px,7vw,64px)/1 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif; letter-spacing: .06em; text-shadow: 0 3px 0 #6b0d0d,0 0 18px #ffb03a; background: linear-gradient(90deg,transparent,#a3141bdd 12%,#e0402a 50%,#a3141bdd 88%,transparent); border-top: 2px solid #ffd877; border-bottom: 2px solid #ffd877; }
.cc-fullhold { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle,#fff1c0d9 0%,#ffcb5a8c 34%,#b07a1a40 68%,transparent 100%); }
.cc-fullhold.cc-still { background: radial-gradient(circle,#4a3510e6,#120c04cc 70%); }
.cc-fullhold-text { color: #fff8e1; font: 900 clamp(56px,14vw,150px)/1 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif; letter-spacing: .04em; -webkit-text-stroke: 2px #6b3f08; paint-order: stroke fill; text-shadow: 0 0 26px #ffb83f,0 5px 0 #8a5a12; }
@media(prefers-reduced-motion:reduce) { .cc-coin-pop,.cc-win-flare,.cc-win-ring,.cc-impact-flash { display: none; } }

/* Full-hold bonus line: spins left and the whole-hold multiplier, under FULL HOLD! */
.cc-fullhold { grid-auto-flow: row; align-content: center; gap: 14px; }
.cc-fullhold-bonus { justify-self: center; padding: 8px 18px; border-radius: 999px; background: #3a2306e6; border: 2px solid #ffd77a;
  color: #fff3cf; font: 800 clamp(20px,4.6vw,40px)/1.1 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif;
  letter-spacing: .02em; box-shadow: 0 0 24px #ffc24a99; text-align: center; }
/* Crate opening: the closed crate overlay bursts away; rare crates add a starburst. */
.cc-crate-lid { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.cc-crate-lid > .symbol-art { width: min(100%, calc(var(--cell-height) + 4px)); height: calc(var(--cell-height) - 4px); object-fit: contain; }
.cc-crate-burst { position: absolute; inset: -18%; z-index: 1; pointer-events: none; opacity: 0; border-radius: 50%; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, #fff3b8cc 0 6deg, transparent 6deg 30deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); }
.cc-crate-burst-cosmic { inset: -34%; background: repeating-conic-gradient(from 0deg, #fff6c8 0 5deg, #5be3ff99 5deg 9deg, transparent 9deg 24deg); }
@media(prefers-reduced-motion:reduce) { .cc-crate-lid,.cc-crate-burst { display: none; } }

/* Living board. presentation.js puts .cc-idle on the reels once they settle (removed by a
   spin, cancel, a hidden page and destroy; never added under reduced motion). Each symbol
   loops a small move of its own; only translate/rotate/scale/opacity animate, so the loops
   stay on the compositor. --cc-phase staggers the cells so the board never moves in sync. */
.cc-presentation-reels > .reel:nth-child(2) { --cc-col: 1; }
.cc-presentation-reels > .reel:nth-child(3) { --cc-col: 2; }
.cc-presentation-reels > .reel > .cell:nth-child(2) { --cc-row: 1; }
.cc-presentation-reels > .reel > .cell:nth-child(3) { --cc-row: 2; }
.cc-presentation-reels > .reel > .cell:nth-child(4) { --cc-row: 3; }
.cc-presentation-reels > .reel > .cell { --cc-phase: calc(var(--cc-col, 0) * -1.37s + var(--cc-row, 0) * -.61s); }
.cc-idle > .reel > .cell > .symbol-art { transform-origin: 50% 55%; }
.cc-idle > .reel > .cell[data-symbol='ship'] > .symbol-art { animation: ccIdleShip 3.2s ease-in-out var(--cc-phase) infinite !important; }
.cc-idle > .reel > .cell[data-symbol='planet'] > .symbol-art { animation: ccIdlePlanet 6s ease-in-out var(--cc-phase) infinite !important; }
.cc-idle > .reel > .cell[data-symbol='crystal'] > .symbol-art { animation: ccIdleCrystal 2.8s ease-in-out var(--cc-phase) infinite !important; }
.cc-idle > .reel > .cell[data-symbol='fuel'] > .symbol-art { transform-origin: 50% 88%; animation: ccIdleFuel 2.4s ease-in-out var(--cc-phase) infinite !important; }
.cc-idle > .reel > .cell[data-symbol='bolt'] > .symbol-art { animation: ccIdleBolt 2.9s linear var(--cc-phase) infinite !important; }
.cc-idle > .reel > .cell[data-symbol='star'] > .symbol-art { animation: ccIdleStar 4.2s ease-in-out var(--cc-phase) infinite !important; }
.cc-idle > .reel > .cell[data-symbol='prize'] > .ai-symbol { transform-origin: 50% 100%; animation: ccIdleCrate 2.6s ease-in-out var(--cc-phase) infinite !important; }
.cc-idle > .reel > .cell[data-symbol='prize'] > .open-crate { animation: ccIdleFloat 3.4s ease-in-out var(--cc-phase) infinite !important; }
.cc-idle > .reel > .cell > .open-crate > .crate-plate { animation: ccIdlePlate 3.4s ease-in-out var(--cc-phase) infinite; }
.cc-idle > .reel > .cell[data-symbol='wild'] > .symbol-art { animation: ccIdleWild 2.6s ease-in-out var(--cc-phase) infinite !important; }
.cc-idle > .reel > .cell > .ai-wild > img { transform-origin: 50% 20%; animation: ccIdleCaptain 2.6s ease-in-out var(--cc-phase) infinite; }
.cc-presentation-reels .ai-wild::after { content: ''; position: absolute; inset: -10% auto -10% 0; width: 45%; pointer-events: none; opacity: 0; background: linear-gradient(100deg, #fff0, #fff6d699 50%, #fff0); }
.cc-idle > .reel > .cell > .ai-wild::after { animation: ccSheen 3.6s ease-in-out var(--cc-phase) infinite; }
/* High-value symbols, the captain and crates also breathe a halo behind the art. */
.cc-idle > .reel > .cell:is([data-symbol='ship'],[data-symbol='planet'],[data-symbol='wild'],[data-symbol='prize'],[data-symbol='crystal'])::before { animation: ccHalo 3.2s ease-in-out var(--cc-phase) infinite; }
/* After a win: losers dim, winners swap to their own stronger loop. */
.cc-presentation-reels.cc-win-dim > .reel > .cell:not(.is-winning):not([data-symbol='blank']) { opacity: .4; transition: opacity .3s; }
.cc-win-dim.cc-idle > .reel > .cell.is-winning[data-symbol='ship'] > .symbol-art { animation: ccWinShip 1.2s ease-in-out var(--cc-phase) infinite !important; }
.cc-win-dim.cc-idle > .reel > .cell.is-winning[data-symbol='planet'] > .symbol-art { animation: ccWinPlanet 1.8s ease-in-out var(--cc-phase) infinite !important; }
.cc-win-dim.cc-idle > .reel > .cell.is-winning[data-symbol='crystal'] > .symbol-art { animation: ccWinCrystal 1.1s ease-in-out var(--cc-phase) infinite !important; }
.cc-win-dim.cc-idle > .reel > .cell.is-winning[data-symbol='fuel'] > .symbol-art { animation: ccWinFuel 1s ease-in-out var(--cc-phase) infinite !important; }
.cc-win-dim.cc-idle > .reel > .cell.is-winning[data-symbol='bolt'] > .symbol-art { animation: ccWinBolt .9s linear var(--cc-phase) infinite !important; }
.cc-win-dim.cc-idle > .reel > .cell.is-winning[data-symbol='star'] > .symbol-art { animation: ccWinStar 2.4s linear infinite !important; }
.cc-win-dim.cc-idle > .reel > .cell.is-winning[data-symbol='prize'] > .ai-symbol { animation: ccWinCrate 1s ease-in-out var(--cc-phase) infinite !important; }
.cc-win-dim.cc-idle > .reel > .cell.is-winning[data-symbol='prize'] > .open-crate { animation: ccIdleFloat 1.4s ease-in-out var(--cc-phase) infinite !important; }
.cc-win-dim.cc-idle > .reel > .cell.is-winning[data-symbol='wild'] > .symbol-art { animation: ccWinWild 1.2s ease-in-out var(--cc-phase) infinite !important; }
.cc-win-dim.cc-idle > .reel > .cell.is-winning > .ai-wild::after { animation-duration: 1.4s; }
.cc-win-dim.cc-idle > .reel > .cell.is-winning:not([data-symbol='blank'])::before { opacity: 1; animation: ccHaloWin 1.2s ease-in-out infinite; }
.cc-win-spark { position: absolute; left: 50%; top: 50%; z-index: 9; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; background: var(--cc-spark, #ffd36e); box-shadow: 0 0 8px var(--cc-spark, #ffd36e); }
.cc-spark-ship { --cc-spark: #8ff3ff; }
.cc-spark-planet { --cc-spark: #d6a8ff; }
.cc-spark-crystal { --cc-spark: #7cc8ff; width: 8px; height: 12px; border-radius: 1px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cc-spark-fuel { --cc-spark: #74ff9a; width: 10px; height: 10px; background: radial-gradient(circle at 35% 35%, #eafff0, #74ff9a 60%, #2fae5a); }
.cc-spark-bolt { --cc-spark: #ffbe45; width: 4px; height: 14px; border-radius: 2px; }
.cc-spark-star { --cc-spark: #ffe680; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); width: 13px; height: 13px; border-radius: 0; }
.cc-spark-wild { --cc-spark: #ffcf66; }
/* Spinning strip: symbols stretch with the motion, on top of the track's blur. */
.cc-reel-cover:not(.cc-still) .cc-strip-cell .symbol-art { transform: scale(.94, 1.14); }
/* One crate short of the set: the suspense frame turns hotter. */
.cc-near-miss .cc-anticipation-frame { border-color: #ffef9a; box-shadow: inset 0 0 22px #ff9d3acc, 0 0 22px #ffb54a99; }
@keyframes ccIdleShip { 0%, 100% { translate: 0 1px; rotate: -1.6deg; } 50% { translate: 0 -3px; rotate: 1.6deg; } }
@keyframes ccIdlePlanet { 0%, 100% { rotate: -4deg; scale: 1; } 50% { rotate: 4deg; scale: 1.035; } }
@keyframes ccIdleCrystal { 0%, 100% { scale: 1; rotate: 0deg; opacity: 1; } 30% { scale: 1.035; rotate: 2deg; } 55% { opacity: .82; } 70% { scale: .99; rotate: -2deg; opacity: 1; } }
@keyframes ccIdleFuel { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
@keyframes ccIdleBolt { 0%, 70%, 100% { translate: 0 0; scale: 1; opacity: 1; } 74% { translate: -1.5px 0; scale: 1.05; opacity: .75; } 78% { translate: 1.5px 0; opacity: 1; } 82% { translate: -1px 0; scale: 1.03; opacity: .8; } 86% { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes ccIdleStar { 0%, 100% { rotate: -5deg; scale: 1; } 50% { rotate: 6deg; scale: 1.05; } }
@keyframes ccIdleCrate { 0%, 62%, 100% { translate: 0 0; scale: 1 1; } 70% { translate: 0 0; scale: 1.06 .93; } 80% { translate: 0 -5px; scale: .97 1.04; } 90% { translate: 0 0; scale: 1.04 .96; } }
@keyframes ccIdleFloat { 0%, 100% { translate: 0 1px; } 50% { translate: 0 -3px; } }
@keyframes ccIdlePlate { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
@keyframes ccIdleWild { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
@keyframes ccIdleCaptain { 0%, 100% { scale: 1; rotate: 0deg; } 35% { scale: 1.03; rotate: -1deg; } 70% { scale: 1.015; rotate: 1deg; } }
@keyframes ccSheen { 0%, 55% { opacity: 0; translate: -120% 0; } 62% { opacity: 1; } 85%, 100% { opacity: 0; translate: 260% 0; } }
@keyframes ccHalo { 0%, 100% { opacity: .35; scale: .92; } 50% { opacity: .95; scale: 1.08; } }
@keyframes ccHaloWin { 0%, 100% { opacity: .6; scale: 1; } 50% { opacity: 1; scale: 1.2; } }
@keyframes ccWinShip { 0%, 100% { translate: -2px 2px; rotate: -4deg; scale: 1.04; } 50% { translate: 3px -6px; rotate: 3deg; scale: 1.1; } }
@keyframes ccWinPlanet { 0%, 100% { rotate: -10deg; scale: 1.05; } 50% { rotate: 10deg; scale: 1.12; } }
@keyframes ccWinCrystal { 0%, 100% { scale: 1.02; rotate: -3deg; opacity: 1; } 40% { scale: 1.14; rotate: 4deg; opacity: .85; } 60% { opacity: 1; } }
@keyframes ccWinFuel { 0%, 100% { rotate: -7deg; scale: 1.05; } 25% { rotate: 6deg; } 50% { rotate: -4deg; scale: 1.1; } 75% { rotate: 7deg; } }
@keyframes ccWinBolt { 0%, 100% { translate: 0 0; scale: 1.06; opacity: 1; } 20% { translate: -2px 1px; scale: 1.14; opacity: .7; } 30% { translate: 2px -1px; opacity: 1; } 45% { translate: -1px 0; scale: 1.1; opacity: .8; } 60% { translate: 0 0; opacity: 1; } }
@keyframes ccWinStar { from { rotate: 0deg; scale: 1.08; } 50% { scale: 1.16; } to { rotate: 360deg; scale: 1.08; } }
@keyframes ccWinCrate { 0%, 100% { translate: 0 0; scale: 1.04 .96; } 45% { translate: 0 -9px; scale: .96 1.06; } 75% { translate: 0 1px; scale: 1.06 .94; } }
@keyframes ccWinWild { 0%, 100% { scale: 1.04; rotate: -2deg; } 50% { scale: 1.12; rotate: 2deg; } }
@media (prefers-reduced-motion: reduce) {
  .cc-presentation-reels .cell > .symbol-art, .cc-presentation-reels .cell > .open-crate > .crate-plate, .cc-presentation-reels .ai-wild > img, .cc-presentation-reels .cell::before, .cc-presentation-reels .ai-wild::after { animation: none !important; }
  .cc-win-spark { display: none; }
  .cc-reel-cover .cc-strip-cell .symbol-art { transform: none; }
}

/* Big-win count: opens on Nice inside the full-screen card, then every live tier-up swaps the
   title and backdrop colour, pushes the backdrop in and throws its own coins. */
.cc-fullscreen.cc-tier-nice { background: radial-gradient(ellipse at 50% 48%,#1f4a52ef,#061f2cf3 54%,#030d1bf5); }
.cc-fullscreen.cc-tier-nice .cc-award-card { padding: 30px 0; }
.cc-fullscreen.cc-tier-nice .cc-metal-title { font-size: clamp(36px,7.4vw,92px); letter-spacing: -.02em; margin: 0 auto 22px; text-shadow: none; }
.cc-fullscreen.cc-tier-nice .cc-award-amount { font-size: clamp(48px,9vw,108px); }
.cc-fullscreen.cc-tier-big { background: radial-gradient(ellipse at 50% 48%,#5a4a1ff0,#14283af3 52%,#050d1cf6); }
.cc-fullscreen.cc-tier-big .cc-metal-title { color: #ffd77a; }
.cc-award-amount { position: relative; }
.cc-land-ring { position: absolute; left: 50%; top: 50%; z-index: -1; width: 1.6em; height: 1.6em; border: 3px solid #fff3c4; border-radius: 50%; pointer-events: none; box-shadow: 0 0 24px #ffd77a, inset 0 0 18px #ffd77a88; }
.cc-land-mega { border-color: #c6ffe9; box-shadow: 0 0 24px #7af0c8, inset 0 0 18px #7af0c888; }
.cc-land-super { border-width: 4px; box-shadow: 0 0 34px #ffcf6a, 0 0 70px #ff9ad566, inset 0 0 22px #ffd77a99; }
.cc-land-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(circle at 50% 50%,#fffef6 0,#fff4cc88 30%,transparent 70%); opacity: 0; }
@media(prefers-reduced-motion:reduce) { .cc-land-ring,.cc-land-flash { display: none; } }

/* Board impact (big wins, bonus trigger): white flash and radial rays inside the reel window.
   Painted once; only opacity and transform animate. */
.cc-impact-white { mix-blend-mode: normal; background: radial-gradient(ellipse at 50% 50%,#ffffffee,#fff6dc99 40%,#ffffff22 70%,transparent 85%); }
.cc-impact-rays { position: absolute; left: 50%; top: 50%; z-index: 24; width: 150%; aspect-ratio: 1; pointer-events: none; opacity: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,#fff4c800 0deg 7deg,#fff4c8aa 9deg 11deg,#fff4c800 13deg 22.5deg);
  -webkit-mask: radial-gradient(circle,#000 8%,transparent 62%); mask: radial-gradient(circle,#000 8%,transparent 62%); }
.cc-rays-trigger { background: repeating-conic-gradient(from 0deg,#ff8a6a00 0deg 7deg,#ffd27acc 9deg 11deg,#ff8a6a00 13deg 22.5deg); }
.cc-rays-super { background: repeating-conic-gradient(from 0deg,#fff4c800 0deg 6deg,#fff8e0dd 8deg 11deg,#fff4c800 13deg 15deg); }
@media(prefers-reduced-motion:reduce) { .cc-impact-white { display: block; } .cc-impact-rays { display: none; } }

/* Cargo-run entrance gate: hatch doors part over a lit cargo bay, then the title slams in. */
.cc-cargo-gate { position: fixed; inset: 0; z-index: 1001; overflow: hidden; cursor: pointer; opacity: 0;
  background: radial-gradient(ellipse at 50% 55%,#2b4a5c 0,#0c1d33 55%,#030812 100%); font-family: var(--display,system-ui); }
.cc-gate-bay { position: absolute; left: 50%; top: 50%; display: flex; gap: clamp(8px,2.4vw,22px); transform: translate(-50%,calc(-50% + clamp(70px,13vh,120px))); }
.cc-bay-light { width: clamp(14px,3.4vw,26px); aspect-ratio: 1; border-radius: 50%; opacity: .15; background: radial-gradient(circle,#fffbe6,#ffd35a 45%,#ff9f1f 70%,transparent 72%); box-shadow: 0 0 18px #ffc24a, 0 0 40px #ff9f1f66; }
.cc-gate-door { position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 2;
  background: repeating-linear-gradient(0deg,#0000 0 46px,#ffffff08 46px 48px), linear-gradient(90deg,#16263c,#24405c 45%,#132339); box-shadow: inset 0 0 0 2px #d9b86a55; }
.cc-door-left { left: 0; border-right: 4px solid #e6c47a; }
.cc-door-right { right: 0; border-left: 4px solid #e6c47a; }
.cc-door-left::after, .cc-door-right::after { content: ''; position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 3px solid #e6c47a; background: radial-gradient(circle,#6ff3ff,#1b5a7a 60%); box-shadow: 0 0 16px #6ff3ff88; }
.cc-door-left::after { right: 18px; }
.cc-door-right::after { left: 18px; }
.cc-gate-title { position: absolute; left: 50%; top: 46%; z-index: 3; display: flex; align-items: baseline; gap: .25em; white-space: nowrap; opacity: 0; transform: translate(-50%,-50%);
  color: #ffe39a; font-weight: 900; font-size: clamp(34px,8.5vw,96px); letter-spacing: .02em; text-shadow: 0 4px 0 #6b3f08, 0 0 30px #ffbf4a99; }
.cc-gate-count { color: #fffbe8; font-size: 1.25em; font-variant-numeric: tabular-nums; text-shadow: 0 4px 0 #6b3f08, 0 0 34px #6ff3ffaa; }
.cc-gate-skip { position: absolute; left: 0; right: 0; bottom: max(24px,env(safe-area-inset-bottom)); z-index: 3; text-align: center; color: #c7d8df; font: 600 12px/1.4 var(--font,system-ui); letter-spacing: .08em; opacity: .75; }
.cc-cargo-gate.cc-still .cc-gate-door { display: none; }
.cc-cargo-gate.cc-still .cc-gate-title { opacity: 1; }
.cc-cargo-gate.cc-still .cc-bay-light { opacity: 1; }
@media(prefers-reduced-motion:reduce) { .cc-gate-door { display: none; } .cc-gate-title { opacity: 1; } }