/* A shared visual rhythm for the live clock and the four draw horizons. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: center;
  border-color: #36404a;
  background: #080f1b;
}
.hero .hero-art {
  inset: 0 0 auto auto;
  width: 66%;
  height: calc(100% - 100px);
  object-fit: cover;
  object-position: 70% center;
  opacity: .27;
}
.hero::before {
  background: linear-gradient(90deg, #080f1b 4%, #080f1be8 37%, #080f1b64 73%, #080f1b88);
}
.hero .hero-main {
  max-width: none;
  min-width: 0;
  padding: 44px clamp(26px, 3.4vw, 48px);
}
.hero .hero-main h1 {
  margin-block: 23px 19px;
  font-size: clamp(46px, 5.2vw, 76px);
  line-height: 1.02;
}
.hero .hero-main > p {
  max-width: 390px;
  font-size: 15px;
  line-height: 1.65;
  color: #bdc7d4;
}
.hero .hero-actions {gap: 19px; margin-block-start: 26px;}
.live-clock {
  position: relative;
  min-width: 0;
  margin: 32px 34px 32px 0;
  padding: 24px 25px 20px;
  border: 1px solid #5a513e;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 56%, #d8c18c0a, transparent 70%), #0a111bea;
  box-shadow: 0 14px 38px #00000020, inset 0 1px 0 #f2d69d0d;
}
.live-clock::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 25px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e8d1a270, transparent);
}
.live-clock-head {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px 14px;}
.live-clock-head .eyebrow {color: var(--gold); font-size: 10px; letter-spacing: .1em;}
.live-clock-head .status {font-size: 11px; font-weight: 550;}
.live-clock #hero-round {display: block; margin-block-start: 7px; color: #a0acbc; font-size: 11px;}
.clock-display {
  position: relative;
  display: grid;
  align-items: center;
  min-width: 0;
  min-height: 144px;
  margin-block: 17px 12px;
  direction: ltr;
  isolation: isolate;
}
.clock-fallback {
  grid-area: 1 / 1;
  display: block;
  color: #f8e5be;
  text-align: center;
  font: 550 clamp(52px, 7vw, 90px)/1.15 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.clock-display.particle-ready .clock-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.clock-display[data-numeric='false'] .clock-fallback {font-size: clamp(28px, 4vw, 46px); letter-spacing: -.035em;}
#particle-clock {grid-area: 1 / 1; min-width: 0; width: 100%;}
#particle-clock:empty {display: none;}
#particle-clock :is(svg, canvas) {display: block; width: 100%; max-width: 100%; height: auto;}
.clock-legend {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: -5px 4% 19px; color: #8f9daf; font: 500 9px/1.4 var(--body); letter-spacing: .13em; text-align: center; direction: ltr;}
.clock-legend span {unicode-bidi: isolate;}
.clock-legend[hidden] {display: grid !important; visibility: hidden;}
.live-clock-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 9px 16px;
  padding-block-start: 14px;
  border-block-start: 1px solid #303744;
}
.live-clock #minute-time {color: #a8b4c4; font: 500 11px/1.5 var(--body); font-variant-numeric: tabular-nums;}
.live-clock #clock-zone {display: block; margin-block-start: 2px; color: #7f90a4; font: 400 10px/1.5 var(--body);}
.clock-link {display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-size: 12px; font-weight: 600;}
.clock-link:hover {text-decoration: underline; text-underline-offset: 4px;}
#hero-admission {min-height: 2.8em; margin-block-start: 12px; color: #a4b2c1; font: 500 11px/1.45 var(--body);}
.live-clock[data-entry-state='closed'] #hero-admission {color: #e6cb98;}
.hero .ticker {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.23fr);
  min-height: 98px;
  gap: 22px;
  padding: 20px clamp(26px, 3.4vw, 48px) 23px;
  background: #101923e8;
  border-color: #303a46;
}
.hero .ticker .data-field {min-width: 0; padding: 0; border: 0;}
.hero .ticker .data-field + .data-field {padding-inline-start: 25px; border-inline-start: 1px solid #313b47;}
.hero .ticker strong {font-size: clamp(24px, 2.5vw, 34px); overflow-wrap: anywhere;}
.ticker-note {margin: 0; padding-inline-start: 25px; border-inline-start: 1px solid #313b47; color: #aebdcb; font-size: 12px; line-height: 1.5;}
.hero .ticker .ticker-note :is(strong, b) {display: block; margin-block-end: 2px; color: #e3cfab; font: 600 13px/1.5 var(--body); letter-spacing: normal;}
.hero .clock-track {height: 2px; background: #1e2934;}
.hero .clock-track i {background: #dbbc81;}

.lane-grid {gap: 14px; align-items: stretch;}
.lane {display: flex; flex-direction: column; min-width: 0; padding: 23px 20px 18px; border-radius: 12px; background: #111a25;}
.lane.annual {background: linear-gradient(145deg, #24231f, #141b24 75%);}
.lane h3 {margin-block: 18px 7px; font-size: 30px;}
.lane-end {font-size: 11px;}
.lane-countdown {margin-block: 25px 21px; min-width: 0;}
.countdown-label {display: block; margin-block-end: 10px; color: #9eafc0; font: 500 10px/1.4 var(--body);}
.countdown-units {display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; min-width: 0; direction: ltr; unicode-bidi: isolate;}
.clock-unit {display: flex; flex: var(--clock-digits, 2) 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 8px; padding-inline: 3px;}
.clock-unit:first-child {padding-inline-start: 0;}
.clock-unit:last-child {padding-inline-end: 0;}
.clock-unit + .clock-unit {border-inline-start: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);}
.clock-unit-display {position: relative; display: grid; place-items: center; width: 100%; height: 54px; min-width: 0;}
.clock-unit b {grid-area: 1 / 1; color: var(--accent); font: 570 clamp(23px, 2.35vw, 32px)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.045em; white-space: nowrap;}
.unit-particles {grid-area: 1 / 1; width: 100%; max-width: calc(var(--clock-digits, 2) * 34px); min-width: 0;}
.unit-particles canvas {width: 100%; height: auto;}
.clock-unit-display.particle-ready b {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.lane-countdown {padding: 13px 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 3%, #0a111b);}
.lane-countdown .countdown-label {margin-inline: 5px; color: var(--accent);}
.clock-unit small {display: block; max-width: 100%; color: #97a7b9; font: 500 9px/1.3 var(--body); text-align: center; overflow-wrap: anywhere;}
.lane.swift .clock-unit b, .lane.annual .clock-unit b {color: var(--accent);}
.countdown-state {display: block; min-height: 49px; padding-block: 7px 5px; color: #b2bdcb; font: 500 16px/1.5 var(--body); overflow-wrap: anywhere;}
.countdown-state:empty {display: none;}
.lane .lane-amounts {margin: 0; padding-block: 17px 2px; gap: 13px; border-color: #2c3845;}
.lane-amounts div:first-child dd {margin-block-start: 4px; font-size: 23px;}
.lane-amounts div:last-child {display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px;}
.lane-amounts div:last-child dt {font-size: 11px;}
.lane-amounts div:last-child dd {font-size: 14px;}
.lane p::before {content: none;}
.lane .lane-admission {position: relative; margin-block: 17px 0; padding-block-start: 12px; padding-inline-start: 12px; color: #bac8d2; font-size: 11px; line-height: 1.5; border-color: #2b3744;}
.lane .lane-admission::before {content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 18px; width: 5px; height: 5px; border-radius: 50%; background: #97c6ad;}
.lane[data-entry-state='closed'] .lane-admission {color: #e2c99c;}
.lane[data-entry-state='closed'] .lane-admission::before {background: #d9b87a;}
.lane [data-next] {margin-block: 14px 0; padding-block-start: 10px; color: #91a1b3; font: 400 10px/1.5 var(--body); border-color: #293542;}
.lane .lane-odds {margin-block-start: 16px; border-color: #2b3744;}

html[dir='rtl'] .hero .hero-art {inset-inline: auto 0;}
html[dir='rtl'] .live-clock {margin-inline: 0 34px;}
html[dir='rtl'] .hero .ticker .data-field {padding: 0; border: 0;}
html[dir='rtl'] .hero .ticker .data-field + .data-field {padding-inline-start: 25px; border-inline-start: 1px solid #313b47;}
html:is(:lang(ar), :lang(ur), :lang(hi), :lang(bn)) :is(.live-clock-head .eyebrow, .clock-legend) {letter-spacing: normal;}
html:is(:lang(ar), :lang(ur), :lang(hi), :lang(bn)) .hero .hero-main h1 {letter-spacing: normal; line-height: 1.22;}

@media (max-width: 1000px) {
  .lane-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;}
  .lane {padding: 24px;}
  .clock-unit b {font-size: 32px;}
  .hero .hero-main {padding: 30px 25px;}
  .hero .hero-main h1 {font-size: clamp(43px, 5.1vw, 58px);}
  .hero .hero-main > p {font-size: 14px;}
  .hero .hero-actions {gap: 12px;}
  .live-clock {margin: 26px 25px 26px 0; padding: 20px 18px 17px;}
  html[dir='rtl'] .live-clock {margin-inline: 0 25px;}
  .clock-display {min-height: 114px; margin-block: 15px 11px;}
  .hero .ticker {padding-inline: 25px; gap: 17px;}
  .ticker-note {padding-inline-start: 18px; font-size: 11px;}
}
@media (max-width: 760px) {
  .hero {grid-template-columns: minmax(0, 1fr);}
  .hero .hero-main {padding: 30px 26px 22px;}
  .hero .hero-main h1 {font-size: clamp(47px, 8vw, 63px); margin-block: 18px 15px;}
  .hero .hero-main > p {max-width: 470px; font-size: 14px;}
  .hero .hero-actions {margin-block-start: 22px; gap: 22px;}
  .hero .hero-art {inset: 10% 0 auto auto; width: 100%; height: 70%; opacity: .16;}
  .hero::before {background: linear-gradient(180deg, #080f1ba8, #080f1b45 55%, #080f1bf2);}
  .live-clock, html[dir='rtl'] .live-clock {margin: 2px 24px 25px; padding: 22px 22px 17px;}
  .clock-display {min-height: 150px; margin-block: 16px 14px;}
  #particle-clock {max-width: 470px; justify-self: center;}
  .clock-fallback {font-size: 82px;}
  #hero-admission {min-height: 2.8em;}
  .hero .ticker {grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 19px 25px 21px; gap: 15px 20px;}
  .hero .ticker .data-field + .data-field, html[dir='rtl'] .hero .ticker .data-field + .data-field {padding-inline-start: 20px;}
  .ticker-note {grid-column: 1 / -1; padding: 12px 0 0; border-inline-start: 0; border-block-start: 1px solid #293541; font-size: 12px;}
  .hero .ticker .ticker-note :is(strong, b) {display: inline; margin-inline-end: 6px; font-size: 12px;}
  .lane {padding: 21px 18px;}
  .clock-unit b {font-size: clamp(25px, 4.4vw, 32px);}
  .clock-unit {padding-inline: 4px;}
}
@media (max-width: 520px) {
  .lane-grid {grid-template-columns: minmax(0, 1fr); gap: 14px;}
  .lane {padding: 23px;}
  .lane-countdown {margin-block: 24px 22px;}
  .clock-unit b {font-size: 36px;}
  .clock-unit small {font-size: 10px;}
  .countdown-label {font-size: 11px; margin-block-end: 13px;}
  .hero .hero-main {padding: 27px 21px 22px;}
  .hero .hero-main h1 {font-size: clamp(43px, 11vw, 57px);}
  .hero .hero-main > p {max-width: none; font-size: 13px;}
  .live-clock, html[dir='rtl'] .live-clock {margin: 0 17px 20px; padding: 19px 16px 16px;}
  .live-clock-head .eyebrow {font-size: 9px;}
  .live-clock-head .status {font-size: 10px;}
  .clock-display {min-height: 116px; margin-block: 13px 11px;}
  .clock-fallback {font-size: 66px;}
  .hero .ticker {padding: 18px 21px 20px; gap: 15px 14px;}
  .hero .ticker .eyebrow {font-size: 8px; letter-spacing: .07em;}
  .hero .ticker strong {font-size: 26px;}
  .hero .ticker .data-field + .data-field, html[dir='rtl'] .hero .ticker .data-field + .data-field {padding-inline-start: 14px;}
}
.draw-settlement {color: #a9b5c6; font-size: 11px; line-height: 1.5; margin-block-start: 8px;}
@media (max-width: 360px) {
  .hero .hero-main {padding-inline: 17px;}
  .hero .hero-main h1 {font-size: 40px;}
  .hero .hero-actions {gap: 14px;}
  .live-clock, html[dir='rtl'] .live-clock {margin-inline: 12px; padding-inline: 13px;}
  .live-clock-head {gap: 6px 10px;}
  .clock-display {min-height: 100px;}
  .clock-fallback {font-size: 56px;}
  .hero .ticker {padding-inline: 17px;}
  .hero .ticker strong {font-size: 24px;}
  .lane {padding-inline: 20px;}
  .clock-unit b {font-size: 31px;}
}