@font-face {
  font-family: "Fraktur";
  src: url("../assets/unifrakturcook-bold.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #f8fbff;
  --night: #050915;
  --panel: #0a1120;
  --cyan: #68f7ff;
  --blue: #4ba3ff;
  --violet: #9c66ff;
  --yellow: #ffe75f;
  --orange: #ff9a3c;
  --danger: #ff4773;
  --muted: rgba(225, 239, 255, .55);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overscroll-behavior: none;
}

body {
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 10%, rgba(46, 94, 148, .18), transparent 38%),
    linear-gradient(135deg, #080d17, #03050b 70%);
}

button,
a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

.cabinet {
  display: grid;
  grid-template-columns: minmax(12rem, 17rem) minmax(20rem, 44rem) minmax(12rem, 17rem);
  justify-content: center;
  min-height: 100svh;
  gap: clamp(1rem, 2.2vw, 2.5rem);
  padding: clamp(.65rem, 1.4vw, 1.15rem);
}

.side-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(.6rem, 1.4vw, 1.2rem) 0;
  color: rgba(238, 246, 255, .8);
}

.studio-mark {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .65rem;
  color: inherit;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.35;
  text-decoration: none;
  text-transform: uppercase;
}

.studio-mark img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  filter: invert(1);
  opacity: .85;
}

.side-copy { margin-block: auto; }
.side-panel h2 { margin: .45rem 0 1.5rem; font-size: clamp(1.65rem, 2.3vw, 2.7rem); line-height: .92; letter-spacing: -.06em; text-transform: uppercase; }
.kicker { margin: 0; color: var(--cyan); font-family: "Courier New", monospace; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

.side-copy ol {
  display: grid;
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}

.side-copy li { position: relative; padding-left: 2rem; counter-increment: steps; }
.side-copy li::before { content: "0" counter(steps); position: absolute; left: 0; color: var(--cyan); font-family: "Courier New", monospace; }
.side-copy b { color: var(--ink); }
.prototype-note { margin: 0; color: rgba(225, 239, 255, .35); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }

.game-stage {
  position: relative;
  align-self: center;
  width: min(100%, calc((100svh - 1.3rem) * .5625));
  max-height: calc(100svh - 1.3rem);
  aspect-ratio: 9 / 16;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(159, 218, 255, .23);
  border-radius: clamp(.55rem, 1.2vw, 1.1rem);
  background: #091527;
  box-shadow: 0 1.3rem 6rem rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  isolation: isolate;
  touch-action: none;
  user-select: none;
}

#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.game-stage::after {
  content: "";
  position: absolute;
  z-index: 40;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.04), transparent 12%, transparent 88%, rgba(0,0,0,.12));
  box-shadow: 0 0 3rem rgba(0, 0, 0, .4) inset;
}

.top-chrome {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(.72rem, env(safe-area-inset-top)) .9rem .7rem;
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(rgba(3, 7, 15, .82), rgba(3, 7, 15, .2));
  font-size: clamp(.46rem, 1.7vw, .6rem);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.top-chrome a { color: var(--ink); text-decoration: none; }
.live-dot { display: flex; align-items: center; gap: .38rem; color: rgba(255,255,255,.62); }
.live-dot::before { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 .6rem var(--cyan); animation: live-pulse 1.7s ease-in-out infinite; }

.hud {
  position: absolute;
  z-index: 15;
  top: clamp(2.65rem, 7.5%, 4.2rem);
  left: .78rem;
  right: .78rem;
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  overflow: hidden;
  border: 1px solid rgba(150, 222, 255, .23);
  border-radius: .35rem;
  background: rgba(3, 9, 19, .68);
  backdrop-filter: blur(8px);
}

.hud-cell { display: flex; min-width: 0; flex-direction: column; align-items: center; padding: .45rem .3rem .38rem; }
.hud-cell + .hud-cell { border-left: 1px solid rgba(150, 222, 255, .17); }
.hud-label { margin-bottom: .12rem; color: rgba(225,239,255,.55); font-size: clamp(.42rem, 1.6vw, .54rem); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hud strong { font-size: clamp(.82rem, 3.2vw, 1.25rem); line-height: 1; font-variant-numeric: tabular-nums; }
.hud-cell--score strong { color: var(--yellow); }
.hud-cell--combo strong { color: var(--cyan); }

.charge-readout {
  position: absolute;
  z-index: 15;
  top: clamp(5.7rem, 13.3%, 7.2rem);
  left: 50%;
  width: 62%;
  transform: translateX(-50%);
  color: rgba(229,244,255,.72);
  font-size: clamp(.42rem, 1.55vw, .52rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.charge-heading { display: flex; align-items: baseline; justify-content: space-between; }
.charge-heading strong { color: var(--yellow); font-size: clamp(.64rem, 2.4vw, .9rem); font-variant-numeric: tabular-nums; text-shadow: 0 0 .8rem rgba(255,231,95,.55); }
.charge-readout > div:not(.charge-heading) { height: .48rem; margin-top: .25rem; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; background: repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 calc(10% - 2px), transparent calc(10% - 2px) 10%); }
.charge-readout i { display: block; width: 8%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan), var(--yellow)); box-shadow: 0 0 .7rem var(--cyan); transition: width 280ms cubic-bezier(.2,.8,.3,1); }
.charge-readout small { display: block; margin-top: .28rem; color: rgba(225,239,255,.48); font-size: clamp(.38rem, 1.35vw, .46rem); letter-spacing: .08em; text-align: center; }

.position-ui {
  position: absolute;
  z-index: 18;
  top: 19%;
  left: 50%;
  min-width: 54%;
  transform: translateX(-50%);
  padding: .48rem .7rem;
  border: 1px solid rgba(104,247,255,.4);
  border-radius: .35rem;
  background: rgba(3,9,19,.78);
  box-shadow: 0 0 1.2rem rgba(104,247,255,.12);
  text-align: center;
  backdrop-filter: blur(8px);
}

.position-ui span,
.position-ui small { display: block; color: rgba(225,239,255,.52); font-size: clamp(.38rem, 1.35vw, .47rem); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.position-ui strong { display: block; margin: .14rem 0; color: var(--cyan); font-size: clamp(.76rem, 3vw, 1.05rem); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 0 .8rem currentColor; }
#positionClouds { color: rgba(245,251,255,.9); font-size: clamp(.46rem, 1.65vw, .57rem); letter-spacing: .07em; }

.storm-ui {
  position: absolute;
  z-index: 18;
  top: clamp(8.2rem, 19%, 9.8rem);
  left: 50%;
  width: 62%;
  transform: translateX(-50%);
  color: rgba(229,244,255,.72);
  font-size: clamp(.42rem, 1.55vw, .52rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.storm-heading { display: flex; align-items: baseline; justify-content: space-between; }
.storm-heading strong { color: var(--cyan); font-size: clamp(.58rem, 2.1vw, .78rem); text-shadow: 0 0 .8rem currentColor; }
.storm-track { height: .48rem; margin-top: .25rem; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; background: repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 calc(10% - 2px), transparent calc(10% - 2px) 10%); }
.storm-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue), var(--violet), var(--danger)); box-shadow: 0 0 .8rem var(--violet); transition: width 120ms linear; }
.storm-ui small { display: block; margin-top: .28rem; color: rgba(225,239,255,.48); font-size: clamp(.38rem, 1.35vw, .46rem); letter-spacing: .06em; text-align: center; }
.storm-ui.is-erupting .storm-heading strong { color: var(--danger); }
.storm-ui.is-erupting .storm-track { box-shadow: 0 0 1.1rem rgba(255,71,115,.35); }

.tension-ui {
  position: absolute;
  z-index: 18;
  right: .8rem;
  bottom: 13.5%;
  left: .8rem;
  padding: .68rem .8rem .62rem;
  border: 2px solid rgba(255,255,255,.22);
  border-radius: .4rem;
  background: rgba(3,8,18,.72);
  backdrop-filter: blur(8px);
}

.tension-ui.is-hot { border-color: rgba(255,231,95,.75); box-shadow: 0 0 1.25rem rgba(255,185,62,.2); }
.tension-ui.is-danger { border-color: var(--danger); background: rgba(46,5,22,.82); box-shadow: 0 0 1.8rem rgba(255,71,115,.35); animation: tension-alarm .58s ease-in-out infinite alternate; }

.tension-heading { display: flex; justify-content: space-between; margin-bottom: .38rem; font-size: clamp(.45rem, 1.6vw, .54rem); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.tension-heading strong { color: var(--cyan); }
.tension-track { position: relative; height: .68rem; border-radius: 1rem; background: linear-gradient(90deg, #42bdff, #66ffbd 42%, #ffe75f 68%, #ff4773 88%); }
.safe-zone { position: absolute; top: -.15rem; bottom: -.15rem; left: 31%; width: 35%; border: 1px solid rgba(255,255,255,.68); border-radius: .2rem; }
.tension-track i { position: absolute; top: 50%; left: 50%; width: .34rem; height: 1.35rem; transform: translate(-50%, -50%); border-radius: 1rem; background: #fff; box-shadow: 0 0 .75rem #fff; transition: left 80ms linear; }

.screen { position: absolute; z-index: 25; inset: 0; }

.screen--intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15% 7% max(5%, env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(2, 5, 12, .15), rgba(2, 5, 12, .18) 42%, rgba(2, 5, 12, .93) 84%),
    url("../assets/storm-hero.webp") 59% center / auto 100% no-repeat;
}

.intro-weather { position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(104deg, transparent 0 1.8rem, rgba(174,225,255,.06) 1.85rem 1.9rem); animation: rain-slide 1.1s linear infinite; }
.intro-title { margin-top: 8%; text-align: center; text-shadow: 0 .2rem 1rem #000; }
.intro-title p { margin: 0 0 .45rem; color: var(--cyan); font-size: clamp(.5rem, 1.9vw, .67rem); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.intro-title h1 { margin: 0; font-size: clamp(3rem, 12.7vw, 6rem); line-height: .7; letter-spacing: -.08em; text-transform: uppercase; }
.intro-title h1 span { display: block; font-family: "Fraktur", Georgia, serif; font-size: .66em; font-weight: 400; letter-spacing: -.015em; text-transform: none; }
.title-rule { display: flex; align-items: center; justify-content: center; gap: .65rem; margin-top: .85rem; color: rgba(239,247,255,.8); font-size: clamp(.45rem, 1.8vw, .6rem); letter-spacing: .24em; text-transform: uppercase; }
.title-rule i { width: 14%; height: 1px; background: rgba(255,255,255,.48); }
.intro-instructions { text-align: center; }
.intro-promise { max-width: 25rem; margin: 0 auto .85rem; color: rgba(237,246,255,.75); font-family: Georgia, serif; font-size: clamp(.75rem, 2.8vw, 1rem); font-style: italic; line-height: 1.35; }
.prototype-label { margin: .65rem 0 0; color: rgba(229,239,255,.42); font-size: clamp(.42rem, 1.5vw, .5rem); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.action-button,
.game-action {
  border: 1px solid rgba(255,255,255,.65);
  border-radius: .25rem;
  background: var(--yellow);
  color: #06101b;
  box-shadow: 0 .25rem 0 #a87816, 0 .7rem 2rem rgba(255, 209, 53, .25);
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.action-button { min-width: min(100%, 18rem); padding: .82rem 1.2rem .75rem; font-size: clamp(.78rem, 2.9vw, 1rem); }
.action-button small,
.game-action small { display: block; margin-top: .16rem; font-size: .48em; letter-spacing: .12em; opacity: .66; }
.action-button:active,
.game-action:active { transform: translateY(.18rem); box-shadow: 0 .08rem 0 #a87816; }
.action-button:focus-visible,
.game-action:focus-visible,
.mute-button:focus-visible,
.text-button:focus-visible { outline: .18rem solid #fff; outline-offset: .18rem; }

.game-action {
  position: absolute;
  z-index: 22;
  right: 50%;
  bottom: max(4%, env(safe-area-inset-bottom));
  min-width: 54%;
  padding: .66rem 1rem .58rem;
  transform: translateX(50%);
  font-size: clamp(.72rem, 2.9vw, 1rem);
}

.game-action:active { transform: translate(50%, .18rem); }
.mute-button {
  position: absolute;
  z-index: 31;
  right: .7rem;
  bottom: max(.7rem, env(safe-area-inset-bottom));
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(2, 7, 15, .65);
  color: rgba(255,255,255,.75);
  cursor: pointer;
}

.mute-button[aria-pressed="true"] span { opacity: .3; text-decoration: line-through; }

.announcement {
  position: absolute;
  z-index: 23;
  top: 20.5%;
  left: 50%;
  width: 90%;
  transform: translateX(-50%);
  pointer-events: none;
  color: #fff;
  font-size: clamp(1.35rem, 7vw, 3rem);
  font-weight: 1000;
  letter-spacing: -.04em;
  text-align: center;
  text-shadow: 0 .1rem 0 #111a31, 0 0 1.6rem currentColor;
  text-transform: uppercase;
  white-space: pre-line;
}
.announcement.is-positioning { top: 34%; }

#timeValue { position: relative; }
#timeValue.time-bump { animation: timer-kick .46s ease-out; }
#timeValue.time-bump::after { content: attr(data-bump); position: absolute; top: 58%; left: 110%; color: var(--cyan); font-size: .52em; white-space: nowrap; animation: timer-bump .8s ease-out both; }

.announcement.burst { animation: announcement-burst .95s cubic-bezier(.12,.75,.18,1) both; }

.screen--result {
  overflow-y: auto;
  padding: 12% 7% max(5%, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 35%, rgba(54,157,215,.3), transparent 30%), rgba(2,6,15,.94);
  text-align: center;
  scrollbar-width: none;
  touch-action: pan-y;
  animation: result-screen-in .62s ease-out both;
}

.screen--result::-webkit-scrollbar { display: none; }
.result-flare { position: absolute; z-index: -1; top: 8%; left: 50%; width: 120%; aspect-ratio: 1; transform: translateX(-50%); background: repeating-conic-gradient(from 0deg, rgba(112,239,255,.12) 0 2deg, transparent 2deg 14deg); border-radius: 50%; animation: flare-spin 18s linear infinite; mask-image: radial-gradient(circle, #000, transparent 66%); }
.result-heading p { margin: 0; color: var(--cyan); font-size: clamp(.48rem, 1.7vw, .6rem); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.result-heading h2 { margin: .2rem 0 0; font-size: clamp(1.5rem, 6vw, 2.8rem); line-height: .92; letter-spacing: -.06em; text-transform: uppercase; }
.bottle-stage { position: relative; width: clamp(6.8rem, 30%, 11rem); margin: .2rem auto -.2rem; }
.result-bottle { position: relative; z-index: 2; display: block; width: 100%; overflow: visible; filter: drop-shadow(0 0 .7rem rgba(90,236,255,.75)); animation: bottle-land .8s cubic-bezier(.15,.75,.2,1) both; }
.cork { fill: #ac7440; stroke: #ffe1a8; stroke-width: 2; }
.bottle-outline { fill: rgba(47,205,255,.12); stroke: rgba(220,252,255,.88); stroke-width: 4; }
.bottle-glass { fill: url(#glass); stroke: rgba(100,220,255,.35); stroke-width: 1.5; }
.bottle-bolt { fill: var(--yellow); filter: drop-shadow(0 0 8px var(--cyan)); animation: bottle-bolt 1s ease-in-out infinite alternate; }
.bottle-glow { position: absolute; top: 31%; left: 50%; width: 70%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: var(--cyan); filter: blur(1.8rem); opacity: .5; animation: glow-pulse 1.15s ease-in-out infinite; }
.final-number { display: block; color: var(--yellow); font-size: clamp(2rem, 9vw, 4.1rem); line-height: 1; letter-spacing: -.07em; text-shadow: 0 0 1.5rem rgba(255,221,69,.48); font-variant-numeric: tabular-nums; }

.result-section { max-width: 24rem; margin: .9rem auto 0; text-align: left; }
.result-section--stats { animation: result-detail-in .38s .42s ease-out both; }
.result-section--ledger { animation: result-detail-in .42s 1.05s ease-out both; }
.result-section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: .42rem; }
.result-section-heading span { color: rgba(230,241,255,.38); font-size: clamp(.43rem, 1.55vw, .52rem); letter-spacing: .12em; text-transform: uppercase; }
.result-section-heading h3 { margin: 0; color: #fff; font-size: clamp(.72rem, 2.6vw, .95rem); letter-spacing: .06em; text-transform: uppercase; }
.result-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .38rem; }
.result-stat { min-width: 0; padding: .52rem .58rem; border: 1px solid rgba(109,237,255,.2); border-radius: .3rem; background: rgba(77,196,255,.055); }
.result-stat span { display: block; overflow: hidden; color: rgba(230,241,255,.47); font-size: clamp(.43rem, 1.55vw, .52rem); letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.result-stat strong { display: block; margin-top: .16rem; overflow: hidden; color: var(--cyan); font-size: clamp(.8rem, 3vw, 1.04rem); line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.result-stat--circuit { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.result-stat--circuit strong { max-width: 72%; overflow: visible; color: var(--violet); font-size: clamp(.7rem, 2.4vw, .9rem); text-align: right; text-overflow: clip; white-space: normal; }

.score-breakdown { display: grid; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: .3rem; background: rgba(2,8,18,.34); }
.breakdown-row { display: flex; justify-content: space-between; padding: .42rem .58rem; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(230,241,255,.62); font-size: clamp(.52rem, 1.85vw, .64rem); letter-spacing: .055em; text-transform: uppercase; }
.breakdown-row:last-child { border-bottom: 0; }
.breakdown-row strong { color: #fff; font-variant-numeric: tabular-nums; }
.breakdown-row--subtotal { background: rgba(255,255,255,.035); color: rgba(230,241,255,.8); }
.breakdown-row--loss strong { color: var(--danger); }
.breakdown-row--total { padding-block: .56rem; background: rgba(255,231,95,.1); color: #fff; font-weight: 900; }
.breakdown-row--total strong { color: var(--yellow); font-size: 1.12em; }

.future-reward { display: flex; max-width: 24rem; align-items: center; justify-content: space-between; margin: .7rem auto 0; padding: .58rem .7rem; border: 1px dashed rgba(109,237,255,.35); border-radius: .3rem; background: rgba(77,196,255,.06); font-size: clamp(.48rem, 1.7vw, .58rem); letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.future-reward span { color: var(--cyan); }
.future-reward strong { color: rgba(255,255,255,.55); }
.result-actions { display: grid; gap: .65rem; max-width: 18rem; margin: .85rem auto 0; }
.text-button { border: 0; background: none; color: rgba(255,255,255,.65); cursor: pointer; font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.side-panel--right { justify-content: center; gap: 3rem; }
.side-panel--right h2 { margin: .45rem 0 1rem; font-size: clamp(1.3rem, 2vw, 2rem); text-transform: uppercase; }
.leaderboard { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: rank; border-top: 1px solid rgba(255,255,255,.14); }
.leaderboard li { display: grid; grid-template-columns: 1.3rem 1fr auto; gap: .5rem; padding: .66rem 0; border-bottom: 1px solid rgba(255,255,255,.1); counter-increment: rank; font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.leaderboard li::before { content: counter(rank); color: rgba(255,255,255,.35); font-family: "Courier New", monospace; }
.leaderboard strong { color: var(--yellow); font-variant-numeric: tabular-nums; }
.leaderboard .is-player { color: var(--cyan); }
.forecast-card { padding: .85rem; border: 1px solid rgba(107,226,255,.2); border-radius: .35rem; background: rgba(76,165,221,.06); }
.forecast-card > span,
.forecast-card small { display: block; color: rgba(255,255,255,.45); font-size: .52rem; letter-spacing: .13em; text-transform: uppercase; }
.forecast-card strong { display: block; margin: .35rem 0 .55rem; font-size: .8rem; text-transform: uppercase; }
.forecast-card div { display: flex; gap: .22rem; margin-bottom: .5rem; }
.forecast-card i { width: 1.4rem; height: .28rem; background: var(--cyan); box-shadow: 0 0 .6rem rgba(90,240,255,.5); }
.forecast-card i:last-child { background: rgba(255,255,255,.14); box-shadow: none; }

@keyframes rain-slide { to { transform: translate3d(-1.9rem, 2rem, 0); } }
@keyframes live-pulse { 50% { opacity: .35; } }
@keyframes announcement-burst { 0% { opacity: 0; transform: translate(-50%, 1rem) scale(.35) rotate(-2deg); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.2) rotate(1deg); } 40% { transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 2.5rem) scale(.94); } }
@keyframes flare-spin { to { transform: translateX(-50%) rotate(1turn); } }
@keyframes bottle-land { from { opacity: 0; transform: translateY(-3rem) scale(.55) rotate(-7deg); } 65% { opacity: 1; transform: translateY(.4rem) scale(1.08) rotate(2deg); } to { transform: none; } }
@keyframes result-detail-in { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
@keyframes result-screen-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bottle-bolt { to { opacity: .55; transform: scale(.94); transform-origin: center; } }
@keyframes glow-pulse { 50% { opacity: .78; transform: translate(-50%,-50%) scale(1.22); } }
@keyframes tension-alarm { to { box-shadow: 0 0 2.2rem rgba(255,71,115,.62); } }
@keyframes timer-kick { 45% { transform: scale(1.22); color: var(--cyan); } }
@keyframes timer-bump { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-1.15rem); } }

@media (max-width: 980px) {
  .cabinet { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .side-panel { display: none; }
  .game-stage { width: min(100vw, calc(100svh * .5625)); max-height: 100svh; border-radius: 0; border-top: 0; border-bottom: 0; }
}

@media (max-aspect-ratio: 9/16) {
  .game-stage { width: 100vw; height: 100svh; aspect-ratio: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}