/* Thunder Drums: the second machine. It shares the machine screen (top
   bar, reels, console) with Golden Pagoda; js/render.js puts `drums` on
   #app and `at-drums` on the body while it is on screen. A storm-blue
   night with silver and electric trim instead of the red lacquer, its
   storm sign where the pagoda's tower stands, and the free games screen. */

/* ---------- The storm ---------- */

/* Only on the machine: the lobby (body.in-lobby) keeps the red lacquer. */
body.at-drums:not(.in-lobby) {
  background:
    radial-gradient(60% 30% at 20% 12%, rgba(120, 220, 255, 0.22), transparent 70%),
    radial-gradient(60% 30% at 80% 14%, rgba(150, 120, 255, 0.22), transparent 70%),
    radial-gradient(120% 60% at 50% 100%, #02061a, transparent 70%),
    linear-gradient(180deg, #13205a, #0a1238 40%, #030614) fixed;
}

/* The reel frame: steel-blue pillars with silver bands, under the gold
   eave the machines share. */
.app.drums .grid {
  background: linear-gradient(180deg, #0a1440, #02051a);
  border-color: #9fd8ff;
  box-shadow: 0 0 0 1px #10305a, 0 0 18px rgba(66, 230, 255, 0.4), inset 0 0 18px rgba(0, 0, 0, 0.8);
}

.app.drums .grid::before {
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, #10305a 30px 31px, #e8f6ff 31px 34px, #6a9ac8 34px 37px) left top / 13px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 30px, #10305a 30px 31px, #e8f6ff 31px 34px, #6a9ac8 34px 37px) right top / 13px 100% no-repeat,
    linear-gradient(90deg, #020a2a, #1a4ac8 35%, #7ac8ff 50%, #1238a0 70%, #020a26) left top / 13px 100% no-repeat,
    linear-gradient(90deg, #020a2a, #1a4ac8 35%, #7ac8ff 50%, #1238a0 70%, #020a26) right top / 13px 100% no-repeat;
}

.app.drums .reel {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.55)),
    linear-gradient(180deg, #1a2c7a, #0a1446 50%, #1a2c7a);
}

/* ---------- Storm sign (where the pagoda's tower stands) ---------- */

.storm {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(3px, 1vh, 8px);
  padding: 4px 0 18px;
  overflow: hidden;
}

.storm[hidden],
.tower[hidden] {
  display: none;
}

/* The sky scene above the sign, sized by the height it gets. */
.storm-sky {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  max-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  container-type: size;
}

.storm-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: min(74cqh, 26cqw);
  height: min(74cqh, 26cqw);
  border-radius: 50%;
  font-size: min(44cqh, 15cqw);
  line-height: 1;
}

/* Rays turning behind each disc. */
.storm-disc::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--ray) 0 8deg, transparent 8deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  animation: rays 14s linear infinite;
}

.storm-disc.thunder {
  --ray: rgba(255, 211, 77, 0.35);
  background: radial-gradient(circle at 40% 35%, #fff6c8, #ffd34d 40%, #c88a10 70%, #6a4400);
  box-shadow: 0 0 0 3px #6a4400, 0 0 24px rgba(255, 200, 40, 0.8);
}

.storm-disc.wind {
  --ray: rgba(66, 200, 255, 0.35);
  background: radial-gradient(circle at 40% 35%, #e8f8ff, #7ad0ff 40%, #2a70c8 70%, #082a6a);
  box-shadow: 0 0 0 3px #082a6a, 0 0 24px rgba(66, 200, 255, 0.8);
}

.storm-disc.wind::before {
  animation-direction: reverse;
}

.storm-disc span {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

.storm-drum {
  font-size: min(70cqh, 26cqw);
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(120, 200, 255, 0.7)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.7));
  animation: storm-drum 1.8s ease-in-out infinite alternate;
}

/* Too little height for the scene to read: leave it out. */
@container (max-height: 46px) {
  .storm-disc,
  .storm-drum {
    display: none;
  }
}

.storm-sign {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.storm-title {
  font-family: var(--display);
  font-size: clamp(1.7rem, min(9.5vw, 5.2vh), 2.6rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.03em;
  line-height: 1.05;
  white-space: nowrap;
  background-image: linear-gradient(180deg, #ffffff 0%, #c8f0ff 30%, #42b6ff 50%, #1a5ac8 54%, #bfe8ff 78%, #3a7ad8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #08205a) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 12px rgba(66, 230, 255, 0.6));
}

.storm-god {
  font-size: clamp(1.6rem, min(9vw, 5vh), 2.4rem);
  line-height: 1;
  animation: storm-god 2.4s ease-in-out infinite alternate;
}

.storm-god.thunder {
  filter: drop-shadow(0 0 10px rgba(255, 211, 77, 0.9));
}

.storm-god.wind {
  filter: drop-shadow(0 0 10px rgba(66, 230, 255, 0.9));
  animation-delay: -1.2s;
}

.storm-ladder-head {
  flex: none;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(0.7rem, 3.4vw, 0.9rem);
  letter-spacing: 0.08em;
  color: #bfe8ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.storm-ladder-head span {
  letter-spacing: 0;
}

/* Free games for scatters on 2 to 5 reels, as four plaques. */
.storm-ladder {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.storm-plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 2px 4px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 45%),
    linear-gradient(180deg, #1c3a9a, #08164a);
  border: 2px solid #7ac8ff;
  box-shadow: 0 0 0 1px #08205a, 0 3px 6px rgba(0, 0, 0, 0.5);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.storm-plaque-count {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #bfe8ff;
}

.storm-plaque-games {
  font-family: var(--display);
  font-size: clamp(1.1rem, min(6vw, 3.4vh), 1.5rem);
  font-weight: 900;
  line-height: 1.05;
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 var(--gold-deep)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.7));
}

.storm-plaque-games::after {
  content: " FREE";
  font-size: 0.6em;
}

.storm-plaque.lit {
  transform: scale(1.08);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 16px rgba(255, 211, 77, 0.9);
  animation: storm-lit 500ms ease-in-out infinite alternate;
}

/* Lines and line bet, or during free games the game and what they won. */
.storm-board {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(2, 6, 26, 0.7);
  border: 1px solid rgba(122, 200, 255, 0.5);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.storm-status {
  font-family: var(--display);
  font-size: clamp(0.95rem, 4.6vw, 1.2rem);
  letter-spacing: 0.04em;
  color: #e8f6ff;
}

.storm-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.7rem, 3.3vw, 0.85rem);
  font-weight: 800;
  color: #9fd8ff;
}

.storm.free .storm-board {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(90, 40, 0, 0.75), rgba(30, 10, 0, 0.85));
  box-shadow: 0 0 14px rgba(255, 211, 77, 0.6), inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.storm.free .storm-status {
  color: var(--gold);
}

.storm.free .storm-detail {
  color: var(--gold-light);
}

/* ---------- Symbols ---------- */

.cell.dsym-thunder { --glow: rgba(255, 200, 40, 0.85); }
.cell.dsym-wind { --glow: rgba(66, 200, 255, 0.85); }
.cell.dsym-cloud { --glow: rgba(180, 190, 255, 0.6); }
.cell.dsym-tiger { --glow: rgba(255, 120, 30, 0.7); }
.cell.dsym-drum { --glow: rgba(255, 60, 80, 0.6); }
.cell.dsym-bell { --glow: rgba(255, 200, 60, 0.55); }
.cell.dsym-chime { --glow: rgba(90, 230, 200, 0.55); }

/* The wilds burn brighter and carry a WILD tag. */
.cell.wild .sym-face {
  font-size: calc(var(--cell) * 0.78);
  filter: drop-shadow(0 0 6px var(--glow));
}

.wild-tag {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  padding: 0 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff6c8, #ffd34d 50%, #b8860b);
  color: #3a1a00;
  font-family: var(--display);
  font-size: calc(var(--cell) * 0.17);
  line-height: 1.15;
  letter-spacing: 0.06em;
}

.cell.dsym-wind .wild-tag {
  background: linear-gradient(180deg, #e8f8ff, #7ad0ff 50%, #2a70c8);
  color: #021a40;
}

/* Storm Clouds rumble before they turn; what they turn into keeps a ring
   of cloud light. */
.cell.clouded .sym-face {
  animation: cloud-rumble 160ms ease-in-out infinite alternate;
}

.cell.revealed {
  box-shadow: inset 0 0 0 2px rgba(190, 200, 255, 0.55);
  border-radius: 8px;
}

.cell.reveal {
  animation: cloud-reveal 420ms cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* Card letters on this machine (A, K and Q are the pagoda's). */
.letter-J { --l1: #fff2c8; --l2: #ff9a1f; --l3: #6a3000; }
.letter-10 { --l1: #f0d6ff; --l2: #a64dff; --l3: #34006a; }
.letter-9 { --l1: #d6fff8; --l2: #1fc4b0; --l3: #04443e; }

.cell.letter-10 {
  font-size: calc(var(--cell) * 0.5);
  letter-spacing: -0.06em;
}

/* Scatters that won free games or pay pulse in gold. */
.cell.scatter-win {
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px var(--gold), 0 0 14px rgba(255, 211, 77, 0.9);
}

/* ---------- Paylines ---------- */

.drum-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.drum-lines svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.drum-line,
.drum-line-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drum-line {
  stroke-width: 4;
  opacity: 0.95;
}

.drum-line-glow {
  stroke-width: 10;
  opacity: 0.35;
  animation: payline 650ms ease-in-out infinite alternate;
}

.drum-line-dot {
  stroke: #fff;
  stroke-width: 1.5;
}

.drum-line-no {
  fill: #fff;
  font-family: var(--display);
  font-size: 11px;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.7);
  stroke-width: 2px;
}

.float-text.free-pop {
  font-size: 1.6rem;
  color: var(--gold);
  animation-duration: 1400ms;
}

/* ---------- Free games screen ---------- */

.free-show {
  position: fixed;
  inset: 0;
  z-index: 44;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) 16px var(--safe-bottom);
  background: radial-gradient(circle at 50% 45%, rgba(30, 70, 200, 0.75), rgba(2, 6, 26, 0.94) 70%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
  touch-action: manipulation;
}

.free-show.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

.free-show-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(100%, 340px);
  padding: 18px 16px 16px;
  border-radius: 18px;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(120, 220, 255, 0.35), transparent 70%),
    linear-gradient(180deg, #1a3a9a, #060e36);
  border: 4px solid var(--gold);
  box-shadow: 0 0 0 2px var(--gold-deep), inset 0 0 0 2px var(--gold-deep), 0 0 30px rgba(66, 230, 255, 0.6), 0 12px 30px rgba(0, 0, 0, 0.7);
  text-align: center;
}

.free-show.show .free-show-panel {
  animation: winner-in 420ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.free-show-gods {
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: 0.2em;
  filter: drop-shadow(0 0 10px rgba(66, 230, 255, 0.8));
}

.free-show-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 9vw, 2.6rem);
  font-style: italic;
  line-height: 1.05;
  white-space: nowrap;
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 0 12px rgba(255, 140, 0, 0.8));
}

.free-show-main {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--display);
  font-size: clamp(2.6rem, 16vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 #000, 0 0 16px var(--neon-cyan);
}

.free-show.end .free-show-main {
  font-size: clamp(2rem, 11vw, 3.2rem);
  text-shadow: 0 3px 0 #000, 0 0 16px var(--gold);
}

.free-show-sub {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--gold-light);
}

.free-show-tap {
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #9fd8ff;
  animation: blink 1.2s ease-in-out infinite;
}

/* ---------- Animations ---------- */

@keyframes storm-god {
  from { transform: translateY(0) rotate(-6deg); }
  to { transform: translateY(-3px) rotate(6deg); }
}

@keyframes storm-drum {
  from { transform: scale(1) rotate(-3deg); }
  to { transform: scale(1.06) rotate(3deg); }
}

@keyframes storm-lit {
  from { filter: brightness(1); }
  to { filter: brightness(1.35); }
}

@keyframes cloud-rumble {
  from { transform: translateX(-2px); }
  to { transform: translateX(2px); }
}

@keyframes cloud-reveal {
  0% { transform: scale(0.3) rotate(-20deg); opacity: 0.3; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .storm-god,
  .storm-drum,
  .storm-disc::before,
  .storm-plaque.lit,
  .cell.clouded .sym-face,
  .cell.reveal {
    animation: none;
  }
}