/* Aurora Thunder: an aurora over a night prairie, three pots of gold for
   its coloured Thunder Coins, and the four-row reels. Colours stay scoped
   to the machine, its help pages and its free games' screen. */
.app.aurora, .aurora-show, .aurora-pot, .aurora-fly, .aurora-flash, .aurora-spill, .pt-aurora, .paytable .aurora-coin {
  --aurora-sky: #060a26;
  --aurora-night: #120a33;
  --aurora-green: #3dffb4;
  --aurora-teal: #29d3e8;
  --aurora-violet: #a56bff;
  --aurora-magenta: #ff5fd6;
  --aurora-glass: #0b1238;
  --aurora-glass-light: #1a2a5e;
  --aurora-veil: #050a1eeb;
  --aurora-go-light: #79ed8d;
  --aurora-go: #28a34b;
  --aurora-go-deep: #124b28;
  --pot-violet: #8a3cff;
  --pot-violet-deep: #33106e;
  --pot-ruby: #e0234e;
  --pot-ruby-deep: #5e0a20;
  --pot-sapphire: #2a6dff;
  --pot-sapphire-deep: #0a2470;
  --pot-gold: #f2b631;
  --pot-gold-deep: #7a4a06;
}

/* The hall: green and violet curtains of light over the night. */
.app.aurora::before {
  background:
    radial-gradient(ellipse 60% 22% at 30% 12%, #3dffb433, transparent 70%),
    radial-gradient(ellipse 55% 20% at 72% 18%, #a56bff40, transparent 70%),
    radial-gradient(ellipse 80% 30% at 50% 30%, #29d3e826, transparent 70%),
    linear-gradient(var(--aurora-sky), var(--aurora-night) 50%, var(--bg-deep));
}

/* Four rows: each as tall as the room under the sign allows. During
   Double Up free games the two matrices share that room. */
.app.aurora {
  --cell: calc((min(100vw, 520px) - 32px - 34px - 24px) / 5);
  --aurora-cell-height: min(var(--cell), calc((100dvh - var(--safe-top) - var(--safe-bottom) - 410px) / 4));
}
.app.aurora.doubling {
  --aurora-cell-height: min(var(--cell), calc((100dvh - var(--safe-top) - var(--safe-bottom) - 376px) / 8));
}
.aurora .reel, .aurora-top-reel {
  height: calc(var(--aurora-cell-height) * 4);
  background:
    linear-gradient(180deg, #0009, transparent 22%, #ffffff0d 50%, transparent 78%, #0009),
    radial-gradient(ellipse at 50% 50%, var(--aurora-glass-light), var(--aurora-glass) 82%);
}
.aurora .cell, .aurora-top .cell { height: var(--aurora-cell-height); }
.aurora .cell.letter, .aurora-top .cell.letter { font-size: calc(var(--aurora-cell-height) * .7); }
.aurora .sym-img, .aurora-top .sym-img { max-height: var(--aurora-cell-height); }
.aurora .letter-9 .glyph, .aurora-top .letter-9 .glyph, .pt-aurora .letter-9 .glyph { color: var(--jade); }

/* The reel window's pillars turn from red lacquer to the aurora's
   midnight teal, keeping their gold medallions. */
.app.aurora .grid::before {
  background:
    radial-gradient(circle, #06343a 0 2px, var(--gold-light) 2px 4px, var(--gold) 4px 6px, var(--gold-deep) 6px 7px, transparent 7.5px) left 0 top 14px / 18px 48px repeat-y,
    radial-gradient(circle, #06343a 0 2px, var(--gold-light) 2px 4px, var(--gold) 4px 6px, var(--gold-deep) 6px 7px, transparent 7.5px) right 0 top 14px / 18px 48px repeat-y,
    var(--gold-bevel) left top / 18px 8px no-repeat,
    var(--gold-bevel) right top / 18px 8px no-repeat,
    var(--gold-bevel) left bottom / 18px 8px no-repeat,
    var(--gold-bevel) right bottom / 18px 8px no-repeat,
    linear-gradient(90deg, #031a26, #0e6f7a 35%, #7af2e0 50%, #0b5464 70%, #021420) left top / 18px 100% no-repeat,
    linear-gradient(90deg, #031a26, #0e6f7a 35%, #7af2e0 50%, #0b5464 70%, #021420) right top / 18px 100% no-repeat;
}

/* Painted symbols glow in their own colours. */
.cell.as-bison { --glow: #ff9a4a99; }
.cell.as-eagle { --glow: #ffd24a80; }
.cell.as-cougar { --glow: #ffb14a80; }
.cell.as-wolf { --glow: #a56bff80; }
.cell.as-elk { --glow: #3dffb466; }
.cell.as-dawn { --glow: #ffd860cc; }

/* ---- The sign ---- */
.aurora-sign {
  flex: 1;
  min-height: 134px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 4px;
  position: relative;
  margin: 5px 0 22px;
  container-type: size;
}
.aurora-sign[hidden] { display: none; }
.aurora-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.aurora-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  opacity: .55;
  border-radius: var(--radius);
  mask-image: linear-gradient(transparent, #000 12%, #000 45%, transparent 92%);
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 45%, transparent 92%);
}
.aurora-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

/* MAJOR, the live GRAND (larger, in the middle) and MINOR. */
.aurora-jackpots { flex: none; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 4px; align-items: end; }
.aurora-jackpot {
  min-width: 0;
  padding: 2px 6px;
  text-align: center;
  border: 2px solid var(--gold);
  border-radius: 8px;
  background: linear-gradient(var(--aurora-glass-light), var(--bg-deep));
  box-shadow: inset 0 1px 0 #fff3, 0 2px 0 var(--gold-deep);
}
.aurora-jackpot.grand { border-color: var(--gold-light); box-shadow: inset 0 1px 0 #fff4, 0 2px 0 var(--gold-deep), 0 0 10px #ffd24a66; }
.aurora-jackpot-name { display: block; font: 12px/1.05 var(--display); letter-spacing: .05em; color: var(--jade); text-shadow: 0 1px 0 #000; }
.aurora-jackpot.grand .aurora-jackpot-name { color: var(--ruby); }
.aurora-jackpot.minor .aurora-jackpot-name { color: var(--neon-cyan); }
.aurora-jackpot-value { display: block; font: 17px/1.1 var(--display); font-variant-numeric: tabular-nums; color: var(--gold-light); text-shadow: 0 1px 0 #000; white-space: nowrap; overflow: hidden; }
.aurora-jackpot.grand .aurora-jackpot-value { font-size: 21px; }
.aurora-jackpot.flare { animation: aurora-flare 1.2s ease-out; }
@keyframes aurora-flare { 30% { transform: scale(1.08); filter: brightness(1.6); } }

.aurora-title { font: 22px/1.05 var(--display); letter-spacing: .06em; text-align: center; }
.aurora-title, .aurora-show-panel h2, .aurora-show-main {
  color: transparent;
  background: var(--gold-bevel);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 1px 0 var(--gold-deep)) drop-shadow(0 2px 1px #000b);
}
.aurora-status { flex: none; text-align: center; color: var(--text); font: 11px/1.2 var(--display); letter-spacing: .03em; text-shadow: 0 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- The pots ---- */
/* Each pot as large as the row's height lets it be, never wider than its
   third of the sign. */
.aurora-pots { flex: 1 1 0; min-height: 44px; max-height: 118px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: end; container-type: size; }
.aurora-pot {
  position: relative;
  justify-self: center;
  width: min(100%, 120cqh);
  aspect-ratio: 120 / 100;
  transition: opacity .3s, filter .3s;
}
.aurora-pot.violet, .aurora-show-pot.violet, .aurora-fly.violet, .aurora-flash.violet { --pot-band: var(--pot-violet); --pot-deep: var(--pot-violet-deep); }
.aurora-pot.ruby, .aurora-show-pot.ruby, .aurora-fly.ruby, .aurora-flash.ruby { --pot-band: var(--pot-ruby); --pot-deep: var(--pot-ruby-deep); }
.aurora-pot.sapphire, .aurora-show-pot.sapphire, .aurora-fly.sapphire, .aurora-flash.sapphire { --pot-band: var(--pot-sapphire); --pot-deep: var(--pot-sapphire-deep); }
.aurora-fly.gold, .aurora-flash.gold { --pot-band: var(--pot-gold); --pot-deep: var(--pot-gold-deep); }
.aurora-pot-art { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.aurora-pot-name {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 61%;
  height: 17%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font: 11px/1 var(--display);
  letter-spacing: .04em;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000, 0 0 4px #000;
}
/* The pot's light: a glow drawn once and faded in, so it never repaints. */
.aurora-pot-glow {
  position: absolute;
  inset: -12% -8% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--pot-band), transparent);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.aurora-pot.fill .aurora-pot-art { animation: aurora-pot-bump .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes aurora-pot-bump { 40% { transform: translateY(-4%) scale(1.08); } }
.aurora-pot.burst .aurora-pot-glow { opacity: 1; animation: aurora-pot-burst .9s ease-in-out infinite alternate; }
@keyframes aurora-pot-burst { from { transform: scale(.85); } to { transform: scale(1.12); } }
.aurora-pot.on .aurora-pot-glow { opacity: .7; }
.aurora-pot.off { opacity: .38; filter: saturate(.35); }

/* A coin flying up into its pot, and the gold that spills out. */
.aurora-fly, .aurora-spill, .aurora-flash { position: fixed; pointer-events: none; z-index: 2; }
.aurora-fly {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--pot-band);
  color: var(--gold-deep);
  font: 16px/1 var(--display);
  background: radial-gradient(circle at 35% 25%, var(--gold-light), var(--gold) 45%, var(--gold-dark));
  box-shadow: 0 0 0 2px var(--pot-deep), 0 0 14px var(--pot-band);
}
.aurora-spill {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  box-shadow: 0 0 0 1px var(--gold-deep);
  animation: aurora-spill .75s cubic-bezier(.2, .7, .4, 1) both;
}
@keyframes aurora-spill {
  60% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
  to { transform: translate(var(--dx), calc(var(--dy) + 26px)); opacity: 0; }
}
/* A coin landing on its reel: a starburst in its colour. */
.aurora-flash {
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 12%, var(--gold-light) 22%, transparent 48%),
    repeating-conic-gradient(from 10deg, #fff9 0 6deg, transparent 6deg 30deg);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  animation: aurora-flash .5s ease-out both;
}
@keyframes aurora-flash {
  from { transform: scale(.3) rotate(0deg); opacity: 1; }
  to { transform: scale(1.15) rotate(35deg); opacity: 0; }
}

/* ---- Thunder Coins on the reels ---- */
.cell.aurora-coin {
  --coin: var(--pot-gold);
  --coin-deep: var(--pot-gold-deep);
  background: radial-gradient(circle at 50% 40%, var(--coin), var(--coin-deep) 78%);
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 3px var(--gold-deep);
  border-radius: 6px;
}
.cell.aurora-coin.violet { --coin: var(--pot-violet); --coin-deep: var(--pot-violet-deep); }
.cell.aurora-coin.ruby { --coin: var(--pot-ruby); --coin-deep: var(--pot-ruby-deep); }
.cell.aurora-coin.sapphire { --coin: var(--pot-sapphire); --coin-deep: var(--pot-sapphire-deep); }
.cell.aurora-coin.gold { --coin: #b47a14; --coin-deep: #3a2204; }
.aurora-coin-face {
  width: min(78%, calc(var(--aurora-cell-height, var(--cell)) * .82));
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px double var(--gold-light);
  background: radial-gradient(circle at 35% 25%, var(--gold-light), var(--gold) 45%, var(--gold-dark));
  box-shadow: inset 0 0 0 1px var(--gold-deep), 0 2px 4px #0008;
}
.aurora-coin-star { color: var(--gold-deep); font: calc(var(--aurora-cell-height, var(--cell)) * .42)/1 var(--display); text-shadow: 0 1px 0 #fff6; }
.aurora-fly .aurora-coin-star { font-size: 18px; }
.cell.aurora-coin.lit { box-shadow: inset 0 0 0 2px var(--gold-light), inset 0 0 0 3px var(--gold-deep), 0 0 10px var(--coin); }
/* Landed coins stay bright through the win show: they are about to fly. */
.app.aurora .grid.has-win .cell.aurora-coin.lit, .app.aurora .grid.cycling .cell.aurora-coin.lit { opacity: 1; }

/* Surge's bison, Jackpots' prize bison and their values. */
.cell.aurora-surged { box-shadow: inset 0 0 0 2px var(--aurora-violet), inset 0 0 12px var(--pot-violet); }
.reel.aurora-surging { box-shadow: 0 0 0 1px var(--aurora-violet), 0 0 14px var(--pot-violet), inset 0 0 18px var(--pot-violet); }
.aurora-prize .sym-face { transform: scale(.82) translateY(-6%); }
.aurora-value {
  position: absolute;
  bottom: 3%;
  left: 4%;
  right: 4%;
  color: var(--gold-light);
  background: var(--bg-deep);
  border: 1px solid var(--gold-deep);
  border-radius: 6px;
  padding: 1px 2px;
  text-align: center;
  font: 11px/1 var(--display);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 1px 0 #000;
}
.aurora-value.jp.minor { color: var(--neon-cyan); }
.aurora-value.jp.major { color: var(--jade); }
.aurora-value.jp.grand { color: var(--ruby); border-color: var(--gold); }
.aurora-prize.hit .aurora-value { border-color: var(--gold-light); box-shadow: 0 0 8px var(--gold); }
.aurora-prize.missed .aurora-value { opacity: .5; }
.aurora-dark { background: var(--bg-deep); }

/* ---- Double Up's matrix, over the reels in the sign's place ---- */
.aurora-top { display: none; position: relative; flex: none; align-self: center; }
.aurora-sign.double .aurora-top { display: block; }
.aurora-sign.double .aurora-pots, .aurora-sign.double .aurora-title, .aurora-sign.double .aurora-scene { display: none; }
.aurora-top-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, var(--cell));
  gap: 3px;
  padding: 4px;
  border: 2px solid var(--gold);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--aurora-glass), var(--bg-deep));
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 12px #2a6dff80;
  transition: filter .3s;
}
.aurora-top-reel { position: relative; overflow: hidden; border-radius: 3px; }
.aurora-top-strip { display: flex; flex-direction: column; will-change: transform; }
.aurora-top-strip .cell { width: var(--cell); }
.aurora-top-strip.copied { animation: aurora-copied .5s ease-out; }
@keyframes aurora-copied { from { filter: brightness(2.2); } }
.aurora-top:not(.live) .aurora-top-grid { filter: brightness(.45) saturate(.4); }
/* While dark: a label, and one body-text note on what lights it. */
.aurora-top-note {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 12px;
  text-align: center;
  text-shadow: 0 1px 0 #000, 0 0 6px #000;
}
.aurora-top-label {
  color: var(--gold-light);
  font: 1rem/1.1 var(--display);
  letter-spacing: .06em;
}
.aurora-top-hint {
  color: var(--text);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.3;
}
.aurora-top.live .aurora-top-note { display: none; }
.aurora-top-wins { position: absolute; inset: 0; pointer-events: none; }
.aurora-top-wins.off { display: none; }
.aurora-top-box { position: absolute; border: 2px solid var(--gold-light); border-radius: 6px; box-shadow: 0 0 8px var(--gold), inset 0 0 8px #ffd24a80; }

/* ---- The free games' screens ---- */
.aurora-show { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: max(20px, var(--safe-top)) 20px max(20px, var(--safe-bottom)); z-index: 25; background: var(--aurora-veil); }
.aurora-show.show { display: flex; }
.aurora-show-panel { width: min(100%, 380px); max-height: 100%; overflow-y: auto; padding: 20px 16px; text-align: center; color: var(--text); }
.aurora-show-panel h2 { margin: 0 0 10px; font: 28px/1.1 var(--display); letter-spacing: .04em; }
.aurora-show-pots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: 92px; margin: 0 auto 10px; max-width: 320px; }
.aurora-show-pot { position: relative; justify-self: center; height: 100%; aspect-ratio: 120 / 100; max-width: 100%; opacity: .35; filter: saturate(.35); }
.aurora-show-pot.on { opacity: 1; filter: none; }
.aurora-show-pot.on .aurora-pot-glow { opacity: .85; }
.aurora-show-main { font: 40px/1.2 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.aurora-show-sub { margin: 12px auto 18px; max-width: 300px; font: 400 13px/1.4 system-ui, sans-serif; color: var(--muted); }
.aurora-show-panel button { display: block; width: min(100%, 240px); min-height: 56px; margin: 0 auto 4px; padding: 8px 20px; color: var(--text); border: 3px solid var(--gold); border-radius: var(--radius); background: linear-gradient(var(--aurora-go-light), var(--aurora-go)); box-shadow: 0 0 0 1px var(--gold-deep), 0 4px 0 var(--aurora-go-deep), inset 0 1px 0 #fff6; font: 20px/1 var(--display); letter-spacing: .08em; text-shadow: 0 1px 0 #000; }

/* Help pages. */
.paytable .pt-page .aurora-coin { width: 44px; height: 44px; }
.paytable .pt-page .aurora-coin-star { font-size: 18px; }

/* A short sign: the title goes, then the pots shrink. */
@container (max-height: 176px) {
  .aurora-title { display: none; }
}
@media (max-height: 700px) {
  .aurora-show-pots { height: 72px; }
  .aurora-show-panel h2 { font-size: 24px; }
  .aurora-show-main { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-pot.fill .aurora-pot-art, .aurora-pot.burst .aurora-pot-glow, .aurora-jackpot.flare, .aurora-top-strip.copied { animation: none; }
}