/* ==========================================================================
   SPLASH Arcade — Hourly Draw
   Builds on splash-tokens.css and splash.css. No inline styles anywhere.
   Seen from above rather than side-on: the clock is a ripple on the pool
   floor, and the drama is pace, not size.
   ========================================================================== */

.is-hourly main a { color: #D9F79B; }
.is-hourly main a:hover { color: #EEFCCB; }

.hour__intro { padding-top: 18px; padding-bottom: 12px; }
.hour__heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hour__title { font: 800 30px/1.1 var(--font-display); }
.hour__window { font: var(--type-proof); color: var(--splash-text-2); white-space: nowrap; }
.hour__sub { margin-top: 4px; font: 400 15px/1.45 var(--font-body); color: var(--splash-text-2); }
.hour__h2 { font: 800 20px/1.2 var(--font-display); }

/* ---- The lagoon: shallow water seen from above ---------------------------- */
.lagoon {
  --clock: min(290px, 74vw);
  position: relative;
  height: 330px;
  overflow: hidden;
  background-color: #2BC8DC;
  background-image:
    linear-gradient(rgba(5, 40, 60, .12) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(5, 40, 60, .12) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  background-position: 15px 15px;
}
.lagoon__light { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(221, 252, 255, .35), rgba(221, 252, 255, 0) 60%); }

/* A fresh ripple leaves the middle every second */
.lagoon__ripple {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--clock) * 1.1); aspect-ratio: 1;
  border: 2px solid var(--splash-foam);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: hour-ripple 3s linear infinite;
}
.lagoon__ripple--2 { animation-delay: 1s; }
.lagoon__ripple--3 { animation-delay: 2s; }
@keyframes hour-ripple {
  0% { transform: translate(-50%, -50%) scale(.42); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(1.18); opacity: 0; }
}
/* The last ten seconds: quicker, stronger */
.lagoon.is-final .lagoon__ripple { animation-duration: 1s; border-width: 3px; }
.lagoon.is-final .lagoon__ripple--2 { animation-delay: .33s; }
.lagoon.is-final .lagoon__ripple--3 { animation-delay: .66s; }
.lagoon.is-drawing .lagoon__ripple,
.lagoon.is-drawn .lagoon__ripple { animation-play-state: paused; opacity: 0; }

/* Someone gets in: a splash lands somewhere on the water */
.lagoon__splashes { position: absolute; inset: 0; pointer-events: none; }
.splash {
  position: absolute; left: var(--x); top: var(--y);
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border: 2px solid var(--splash-foam);
  border-radius: 50%;
  animation: splash 900ms ease-out forwards;
}
@keyframes splash { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

/* ---- The clock ------------------------------------------------------------------ */
.clock {
  position: absolute; left: 50%; top: 50%;
  width: var(--clock); aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.clock__ring { width: 100%; height: 100%; }
.clock__track { fill: none; stroke: rgba(5, 40, 60, .22); stroke-width: 14; }
.clock__edge, .clock__arc { fill: none; stroke-linecap: round; stroke-dasharray: 804.25; transition: stroke-dashoffset 900ms linear; }
.clock__edge { stroke: var(--splash-ink); stroke-width: 16; }
.clock__arc { stroke: var(--mode-hourly); stroke-width: 11; }
.clock__inner { fill: none; stroke: var(--splash-foam); stroke-width: 1.5; opacity: .7; }
.clock__face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  color: var(--splash-ink);
}
.clock__time { font: 800 clamp(56px, 18vw, 80px)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.clock__label { margin-top: 6px; font: 700 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.clock__block { margin-top: 4px; font: 600 12px var(--font-proof); }
.lagoon.is-drawing .clock__time { font-size: 30px; }
.lagoon.is-drawn .clock__face { visibility: hidden; }

.lagoon__winner {
  position: absolute; left: 50%; top: 50%;
  z-index: 2;
  max-width: min(250px, 70vw);
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--mode-hourly);
  color: var(--splash-ink);
  font: 800 17px/1.25 var(--font-display);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: hour-winner 700ms var(--ease-water) both;
}
@keyframes hour-winner { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }

.lagoon__status {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 0 var(--gutter);
  text-align: center;
  color: var(--splash-ink);
  font: 600 15px/1.4 var(--font-body);
}
.lagoon__status .btn-quiet { color: var(--splash-ink); border-color: var(--splash-ink); }
.lagoon__status p { max-width: min(210px, 56vw); }
body:not(.is-loading):not(.is-offline) .lagoon__status { display: none; }
body.is-loading .clock__face,
body.is-offline .clock__face { visibility: hidden; }

/* ---- Pot, you, getting in ---------------------------------------------------------- */
.hpot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 18px var(--gutter) 0; }
.hpot__label { color: #D9F79B; }
.hpot__amount { margin-top: 4px; font: 800 48px/1 var(--font-display); }
.hpot__unit { font-size: 18px; }
.hpot__side { text-align: right; font: 400 13.5px/1.5 var(--font-body); color: var(--splash-text-2); }
.hpot__side strong { color: var(--splash-text); }

.hgetin { padding: 18px var(--gutter) 0; }
.picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.pick {
  height: 48px;
  border-radius: 24px;
  border: 2px solid #4C6B2A;
  background: transparent;
  color: var(--splash-text);
  font: 800 17px var(--font-display);
}
.pick[aria-pressed="true"] { border-color: var(--mode-hourly); background: var(--mode-hourly); color: var(--splash-ink); }
.pick--other { width: 100%; min-width: 0; padding: 0 8px; text-align: center; font: 700 15px var(--font-body); -moz-appearance: textfield; appearance: textfield; }
.pick--other::-webkit-outer-spin-button,
.pick--other::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pick--other::placeholder { color: var(--splash-text-3); font-weight: 600; }
.pick--other:focus { outline: none; border-color: var(--mode-hourly); box-shadow: 0 0 0 3px rgba(200, 242, 106, .25); }
.pick--other.is-on { border-color: var(--mode-hourly); background: rgba(200, 242, 106, .12); }
.hgetin__cost { margin-top: 12px; font: 400 14px var(--font-body); color: var(--splash-text-2); }
.hgetin__cost strong { color: var(--splash-text); font: var(--type-figure); }
.btn-primary--hourly { background: var(--mode-hourly); box-shadow: 0 5px 0 var(--mode-hourly-press); }
.btn-primary--hourly:active { box-shadow: 0 2px 0 var(--mode-hourly-press); }
.hgetin .btn-primary { margin-top: 14px; }

/* ---- Proof and the last few hours ------------------------------------------------------ */
.hfair { margin-top: 24px; padding: 18px var(--gutter); background: var(--splash-deck-deep); }
.hfair .hour__h2 { font-size: 18px; }
.hfair__realm { margin-top: 12px; font: 600 12px var(--font-proof); color: var(--splash-text-2); overflow-wrap: anywhere; }
.hfair__list { margin-top: 10px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; font: 400 13.5px/1.45 var(--font-body); }
.hfair__list dt { font: 600 11.5px/1.6 var(--font-proof); color: #D9F79B; text-transform: uppercase; }

.hhist { padding: 22px var(--gutter) 0; }
.hhist__list { list-style: none; margin: 8px 0 0; padding: 0; }
.hhist__item { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--splash-divider); }
.hhist__item:last-child { border-bottom: 0; }
.hhist__win { font: 700 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #D9F79B; }
.hhist__who { font: 500 12px/1.5 var(--font-proof); color: var(--splash-text-2); }
.hhist__who strong { display: block; font-weight: 500; color: var(--splash-text); }
.hhist__amount { font: 800 18px var(--font-display); }
.hhist__empty { margin-top: 10px; font-size: 14px; color: var(--splash-text-2); }

/* ---- Before the realm answers ---------------------------------------------------------- */
body.is-loading .hgetin, body.is-offline .hgetin,
body.is-loading .hour__info, body.is-offline .hour__info { opacity: .45; pointer-events: none; }
body.is-loading .lagoon__ripple, body.is-offline .lagoon__ripple { animation-play-state: paused; opacity: 0; }

/* ---- 600px and up ------------------------------------------------------------------------ */
@media (min-width: 600px) {
  .hour__below { max-width: 680px; margin: 0 auto; }
  .hfair { background: transparent; border-top: 1px solid var(--splash-divider); }
}

/* ---- 1024px and up: the clock gets room; getting in stays in view ---------------------- */
@media (min-width: 1024px) {
  .lagoon { --clock: 340px; height: 400px; }
  .hour__below {
    max-width: 1200px;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  .hour__act { position: sticky; top: 16px; padding-top: 10px; }
  .hpot, .hgetin, .hhist { padding-left: 0; padding-right: 0; }
  .hfair { margin-top: 0; padding: 28px 0 0; border-top: 0; }
  .hour__h2, .hfair .hour__h2 { font-size: 24px; }
}