/* ==========================================================================
   FANCODE.BET — shared inner-page components (sport pages + live casino)
   Loaded AFTER style.css. Reuses every token, button, glass and HUD primitive
   defined there; this file only adds what an inner sport page needs.

   1.  Page hero
   2.  Breadcrumbs + quick jump
   3.  Live score card
   4.  Match board
   5.  Formats
   6.  Tournaments
   7.  Markets
   8.  FAQ accordion (in style.css, shared with the homepage)
   9.  Live casino tables
   10. Aviator game panel
   11. Long-form prose + legal
   12. Blog
   13. Forms + contact
   14. Responsive
   15. Reduced motion
   ========================================================================== */

/* ============ 1. PAGE HERO ============ */
.phero {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(38px, 5vw, 70px)) clamp(52px, 6vw, 88px);
  overflow: hidden;
}

.phero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.phero__glow {
  position: absolute;
  top: -28%;
  right: -8%;
  width: min(58vw, 700px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 0, .28), transparent 66%);
  filter: blur(80px);
}
.phero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 76% 64% at 52% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 76% 64% at 52% 40%, #000 30%, transparent 78%);
}

.phero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(36px, 5vw, 68px);
}

.phero__title {
  font-size: clamp(2.3rem, 4.3vw, 4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  margin-bottom: 20px;
}
.phero__title .grad {
  background: linear-gradient(100deg, var(--gold) 4%, var(--orange-light) 40%, var(--orange) 66%, #ff9a4a 98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.phero__lede {
  max-width: 56ch;
  margin-bottom: 30px;
  color: var(--muted-2);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
}

.phero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 38px;
}

.phero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3.2vw, 44px);
  padding-top: 26px;
  border-top: 1px solid var(--border-soft);
}
.phero__stat-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-head);
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #c9c9c9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.phero__stat-value i {
  font-style: normal;
  font-size: .62em;
  color: var(--orange);
  -webkit-text-fill-color: var(--orange);
}
.phero__stat dd {
  margin-top: 8px;
  color: var(--dim);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* single-column hero, used by the legal, blog and contact pages. It carries no
   visual or quick-jump row, so it needs far less bottom padding than the
   two-column sport hero. */
.phero--compact { padding-bottom: clamp(22px, 2.6vw, 38px); }

.phero__narrow { position: relative; z-index: 2; max-width: 800px; }
.phero__narrow .phero__lede { margin-bottom: 26px; }

/* framed artwork + floating score card */
.phero__visual { position: relative; }
.phero__frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.phero__frame img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  transform: scale(1.06);
  transform-origin: 50% 62%;
}
.phero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, .3) 0%, transparent 34%, rgba(5, 5, 5, .78) 100%);
  pointer-events: none;
}

/* ============ 2. BREADCRUMBS + QUICK JUMP ============ */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--dim);
  font-size: .82rem;
}
.crumbs a {
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.crumbs a:hover { color: var(--orange-light); }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--dim);
  border-right: 1px solid var(--dim);
  transform: rotate(45deg);
}
.crumbs [aria-current="page"] { color: var(--white); }

.quickjump {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: clamp(34px, 4vw, 52px);
}
.qjump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--glass);
  color: var(--muted-2);
  font-family: var(--font-head);
  font-size: .84rem;
  font-weight: 500;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.qjump .ic { width: 15px; height: 15px; color: var(--orange-light); }
.qjump:hover {
  transform: translateY(-2px);
  color: var(--white);
  border-color: rgba(255, 122, 0, .5);
  background: rgba(255, 90, 0, .1);
}

/* ============ 3. LIVE SCORE CARD ============ */
.scorecard {
  position: absolute;
  right: clamp(-10px, -1vw, 0px);
  bottom: -26px;
  z-index: 3;
  width: min(300px, 82%);
  padding: 18px 20px;
  border-radius: var(--radius);
}
.scorecard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.scorecard__meta {
  color: var(--dim);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.scorecard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 7px;
}
.scorecard__side {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 600;
}
.scorecard__score {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.scorecard__note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: .78rem;
}

/* pulsing live indicator */
.livedot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border: 1px solid rgba(255, 90, 0, .45);
  border-radius: 999px;
  background: rgba(255, 90, 0, .12);
  color: var(--orange-light);
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.livedot::before {
  content: "";
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(255, 90, 0, .7);
  animation: livePulse 2s var(--ease) infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 90, 0, .65); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 90, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 0, 0); }
}

/* ============ 4. MATCH BOARD ============ */
.board__panels { position: relative; }

.mpanel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.mpanel.is-active { position: relative; opacity: 1; transform: none; }
.mpanel[hidden] { display: block; pointer-events: none; } /* keep rendered for the crossfade */

.matches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}

.match {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 26px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease),
              background-color var(--t-mid) var(--ease);
}
.match::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 90, 0, .1), transparent 58%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
  pointer-events: none;
}
.match:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 122, 0, .4);
  background: rgba(255, 255, 255, .07);
}
.match:hover::before { opacity: 1; }
.match.is-live { border-color: rgba(255, 90, 0, .32); }

.match__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.match__tour {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .06em;
}
.match__tour .ic { width: 16px; height: 16px; flex: none; color: var(--orange-light); }
.match__tour span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match__when {
  flex: none;
  color: var(--dim);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.match__teams { display: grid; gap: 12px; margin-bottom: 20px; }
.team {
  display: flex;
  align-items: center;
  gap: 13px;
}
.team__badge {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid rgba(255, 122, 0, .3);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 90, 0, .24), rgba(255, 176, 0, .06));
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #ffd7b8;
}
.team__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-head);
  font-size: .98rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team__score {
  flex: none;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
}
.team.is-batting .team__score { color: var(--gold); }
.team.is-batting .team__name::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--orange);
  vertical-align: middle;
}

.match__odds {
  display: grid;
  /* adapts to 2 outcomes (limited overs) or 3 (Test match, with the draw) */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: auto;
}
.odd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 11px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .04);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.odd__label {
  color: var(--dim);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.odd__value {
  font-family: var(--font-head);
  font-size: .98rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.odd:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 122, 0, .55);
  background: rgba(255, 90, 0, .1);
}
.odd.is-picked {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange-light), var(--orange));
  box-shadow: 0 10px 24px -12px var(--glow);
}
.odd.is-picked .odd__label { color: rgba(255, 255, 255, .8); }

.board__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.board__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 62ch;
  color: var(--dim);
  font-size: .82rem;
  line-height: 1.6;
}
.board__note .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--orange); }

/* ============ 5. FORMATS ============ */
.formats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}
.format {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 30px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease),
              background-color var(--t-mid) var(--ease);
}
.format:hover {
  transform: translateY(-7px);
  border-color: rgba(255, 122, 0, .42);
  background: rgba(255, 255, 255, .07);
}
.format__tag {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 122, 0, .35);
  border-radius: 999px;
  background: rgba(255, 90, 0, .1);
  color: var(--orange-light);
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.format h3 { font-size: 1.14rem; margin-bottom: 10px; }
.format p { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.format__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  color: var(--dim);
  font-size: .78rem;
}
.format__meta b {
  display: block;
  color: var(--silver);
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============ 6. TOURNAMENTS ============ */
.tours {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.tour {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.tour:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 122, 0, .45);
  background: rgba(255, 90, 0, .08);
}
.tour__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid rgba(255, 176, 0, .3);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 176, 0, .18), rgba(255, 90, 0, .06));
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold);
}
.tour__name {
  display: block;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
}
.tour__when {
  display: block;
  margin-top: 3px;
  color: var(--dim);
  font-size: .78rem;
}

/* ============ 7. MARKETS ============ */
.markets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.market {
  position: relative;
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: var(--radius);
  transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease),
              background-color var(--t-mid) var(--ease);
}
.market:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 122, 0, .42);
  background: rgba(255, 255, 255, .07);
}
.market__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 122, 0, .26);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 90, 0, .18), rgba(255, 176, 0, .05));
  color: var(--orange-light);
  transition: transform var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.market:hover .market__icon { transform: translateY(-3px) scale(1.06); color: var(--gold); }
.market h3 { font-size: 1.02rem; margin-bottom: 8px; }
.market p { color: var(--muted); font-size: .87rem; line-height: 1.58; }

/* ============ 8. FAQ ACCORDION ============
   Lives in style.css (section 20) — the homepage uses it too. */

/* ============ 9. LIVE CASINO TABLES ============
   A casino floor has no fixtures, so it gets its own card rather than reusing
   the match board. Accent leans gold here — warm table light rather than the
   orange energy used across the sport pages. */
.tables {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}

.tablecard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease),
              background-color var(--t-mid) var(--ease);
}
.tablecard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 50% 0%, rgba(255, 176, 0, .12), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
  pointer-events: none;
}
.tablecard:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 176, 0, .42);
  background: rgba(255, 255, 255, .07);
}
.tablecard:hover::before { opacity: 1; }

.tablecard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tablecard__seats {
  color: var(--dim);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.tablecard__seats b { color: var(--silver); font-weight: 600; }

/* gold "open table" pill, mirroring .livedot without the alarm-red urgency */
.opendot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border: 1px solid rgba(255, 176, 0, .45);
  border-radius: 999px;
  background: rgba(255, 176, 0, .1);
  color: var(--gold);
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.opendot::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(255, 176, 0, .7);
  animation: openPulse 2.4s var(--ease) infinite;
}
@keyframes openPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 176, 0, .6); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 176, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 176, 0, 0); }
}
.tablecard.is-full .opendot {
  border-color: var(--border);
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
}
.tablecard.is-full .opendot::before { background: var(--dim); animation: none; }

/* emblem stands in for a table photo — vector, on-brand, never repetitive */
.tablecard__art {
  display: grid;
  place-items: center;
  height: 128px;
  margin-block: 6px 18px;
}
.tablecard__emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(255, 176, 0, .38);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 176, 0, .28), rgba(12, 12, 12, .8) 68%);
  color: var(--gold);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9), inset 0 0 24px rgba(255, 122, 0, .16);
  transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.tablecard__emblem .ic { width: 38px; height: 38px; }
.tablecard__emblem::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(255, 176, 0, .18);
  border-radius: 50%;
  border-top-color: rgba(255, 176, 0, .7);
}
.tablecard:hover .tablecard__emblem {
  transform: translateY(-4px) scale(1.05);
  border-color: rgba(255, 176, 0, .7);
}
.tablecard:hover .tablecard__emblem::after { animation: spin 6s linear infinite; }

.tablecard__name { font-size: 1.08rem; margin-bottom: 8px; }
.tablecard__desc {
  min-height: 3.1em; /* two lines — keeps the meta strip aligned across a row */
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
}

.tablecard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  color: var(--dim);
  font-size: .76rem;
}
.tablecard__meta b {
  display: block;
  color: var(--silver);
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tablecard__join {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 176, 0, .35);
  border-radius: 999px;
  background: rgba(255, 176, 0, .1);
  color: var(--gold);
  font-family: var(--font-head);
  font-size: .86rem;
  font-weight: 600;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.tablecard__join .ic { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.tablecard:hover .tablecard__join {
  background: linear-gradient(135deg, var(--gold), var(--orange));
  border-color: transparent;
  color: #1a1000;
}
.tablecard:hover .tablecard__join .ic { transform: translateX(4px); }
.tablecard.is-full .tablecard__join {
  border-color: var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--muted);
}
.tablecard:hover.is-full .tablecard__join {
  background: rgba(255, 255, 255, .07);
  color: var(--muted-2);
}

/* numbered "how it works" steps reuse the .format card shell */
.format__tag--step {
  border-color: rgba(255, 176, 0, .38);
  background: rgba(255, 176, 0, .1);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ============ 10. AVIATOR GAME PANEL ============
   The trajectory chart, HUD and animation all come from style.css (section 12)
   and main.js — this only adds the dedicated page's panel layout, the
   read-only round readout and the round-history strip. */
.gamepanel {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .9fr);
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
}

.gamepanel__side {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 16px);
}
.gamepanel__side .aviator__hud { max-width: none; margin: 0; }

/* Read-only round readout. Deliberately not buttons — nothing here is
   wired to a betslip, so it must not look tappable. */
.statrows {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 6px clamp(18px, 2vw, 22px);
  border-radius: var(--radius);
}
.statrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: clamp(13px, 1.7vw, 22px);
  border-bottom: 1px solid var(--border-soft);
}
.statrow:last-child { border-bottom: 0; }
.statrow dt {
  color: var(--dim);
  font-size: .8rem;
  letter-spacing: .06em;
}
.statrow dd {
  font-family: var(--font-head);
  font-size: .98rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--silver);
}
.statrow dd.is-gold { color: var(--gold); }

/* round history — the standard crash-game result strip */
.hist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--border-soft);
}
.hist__label {
  margin-right: 6px;
  color: var(--dim);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hist__chip {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--muted-2);
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hist__chip:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .24); }
.hist__chip--mid {
  border-color: rgba(255, 122, 0, .42);
  background: rgba(255, 90, 0, .1);
  color: var(--orange-light);
}
.hist__chip--high {
  border-color: rgba(255, 176, 0, .55);
  background: rgba(255, 176, 0, .13);
  color: var(--gold);
  box-shadow: 0 0 18px -6px rgba(255, 176, 0, .5);
}

/* ============ 11. LONG-FORM PROSE + LEGAL ============ */
.legal {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: clamp(30px, 4vw, 64px);
}

.legal__toc {
  position: sticky;
  top: calc(var(--nav-h) + 22px);
  padding: 22px 24px;
  border-radius: var(--radius);
}
.legal__toc h2 {
  margin-bottom: 14px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.legal__toc ol { display: grid; gap: 2px; counter-reset: toc; }
.legal__toc a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.legal__toc a::before {
  counter-increment: toc;
  content: counter(toc) ". ";
  color: var(--dim);
}
.legal__toc a:hover { color: var(--white); background: rgba(255, 255, 255, .05); }
.legal__toc a.is-current {
  color: var(--orange-light);
  background: rgba(255, 90, 0, .1);
}
.legal__toc a.is-current::before { color: var(--orange); }

.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(1.28rem, 2vw, 1.55rem);
  scroll-margin-top: calc(var(--nav-h) + 26px);
}
.prose h3 {
  margin-top: 1.9em;
  font-size: 1.05rem;
  color: var(--silver);
}
.prose p,
.prose li {
  color: var(--muted-2);
  font-size: .96rem;
  line-height: 1.8;
}
.prose p { margin-top: 1em; }
.prose ul,
.prose ol { margin-top: 1em; padding-left: 1.35em; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li { margin-top: .55em; }
.prose li::marker { color: var(--orange); }
.prose strong { color: var(--white); font-weight: 600; }
.prose a {
  color: var(--orange-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose blockquote {
  margin-top: 1.6em;
  padding: 18px 24px;
  border-left: 2px solid var(--orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 255, 255, .04);
}
.prose blockquote p { margin: 0; color: var(--silver); font-style: italic; }
.prose figure { margin-top: 1.8em; }
.prose figure img { width: 100%; border-radius: var(--radius); }
.prose figcaption {
  margin-top: 10px;
  color: var(--dim);
  font-size: .82rem;
  text-align: center;
}

.prose__section + .prose__section {
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: clamp(30px, 3.4vw, 44px);
  border-top: 1px solid var(--border-soft);
}

.updated {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--glass);
  color: var(--muted);
  font-size: .82rem;
}
.updated .ic { width: 15px; height: 15px; color: var(--orange-light); }

/* review / placeholder banner */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 176, 0, .34);
  border-radius: var(--radius);
  background: rgba(255, 176, 0, .07);
}
.notice .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--gold); }
.notice p { color: var(--muted-2); font-size: .88rem; line-height: 1.65; }
.notice strong { color: var(--white); }

/* ============ 12. BLOG ============ */
.featured {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.featured:hover { border-color: rgba(255, 122, 0, .45); background: rgba(255, 255, 255, .07); }
.featured__media { position: relative; overflow: hidden; }
.featured__media img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1s var(--ease-out);
}
.featured:hover .featured__media img { transform: scale(1.11); }
.featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 3.2vw, 46px);
}
.featured__body h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  margin-block: 14px 12px;
}
.featured__body p { color: var(--muted); font-size: .96rem; line-height: 1.7; }

.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
}

.post {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease),
              background-color var(--t-mid) var(--ease);
}
.post:hover,
.post:focus-within {
  transform: translateY(-6px);
  border-color: rgba(255, 122, 0, .42);
  background: rgba(255, 255, 255, .07);
}
.post__media { overflow: hidden; }
.post__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1s var(--ease-out);
}
.post:hover .post__media img { transform: scale(1.12); }

.post__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 2.2vw, 26px);
}
.post__title {
  font-size: 1.08rem;
  line-height: 1.35;
  margin-block: 12px 10px;
}
.post__excerpt {
  flex: 1;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  color: var(--dim);
  font-size: .78rem;
}
.post__meta .ic { width: 14px; height: 14px; }
.post__meta span { display: inline-flex; align-items: center; gap: 6px; }

.tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 13px;
  border: 1px solid rgba(255, 122, 0, .38);
  border-radius: 999px;
  background: rgba(255, 90, 0, .1);
  color: var(--orange-light);
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* whole card is one link target */
.post__link,
.featured__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.featured { position: relative; }

/* -- article -- */
.article { max-width: 800px; margin-inline: auto; }
.article__head { text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.article__title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  margin-block: 16px 18px;
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  color: var(--dim);
  font-size: .84rem;
}
.article__meta span { display: inline-flex; align-items: center; gap: 7px; }
.article__meta .ic { width: 15px; height: 15px; color: var(--orange-light); }

.article__hero {
  margin-bottom: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.article__hero img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

.article__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid var(--border-soft);
}
.share { display: flex; align-items: center; gap: 10px; }
.share__label {
  color: var(--dim);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ============ 13. FORMS + CONTACT ============ */
.contactgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr);
  align-items: start;
  gap: clamp(24px, 3vw, 42px);
}

.formcard { padding: clamp(24px, 3vw, 38px); border-radius: var(--radius-lg); }

.form { display: grid; gap: 18px; }
.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field { display: grid; gap: 8px; }
.field > label {
  color: var(--muted-2);
  font-size: .84rem;
  font-weight: 500;
}
.field > label .req { color: var(--orange); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .04);
  color: var(--white);
  font-size: .94rem;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ff7a00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
/* the native dropdown list is drawn by the OS — keep it readable on dark */
.field select option { background: #121212; color: #fff; }

.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(255, 255, 255, .2); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(255, 122, 0, .6);
  background: rgba(255, 90, 0, .06);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: rgba(255, 90, 0, .7); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.55;
}
.check input {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--orange);
}
.check a { color: var(--orange-light); text-decoration: underline; text-underline-offset: 3px; }

.form__status {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 176, 0, .34);
  border-radius: var(--radius-sm);
  background: rgba(255, 176, 0, .08);
  color: var(--muted-2);
  font-size: .87rem;
  line-height: 1.6;
}
.form__status .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--gold); }

.infocards { display: grid; gap: clamp(12px, 1.4vw, 16px); }
.infocard {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 22px 24px;
  border-radius: var(--radius);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.infocard:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 122, 0, .42);
  background: rgba(255, 255, 255, .07);
}
.infocard__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid rgba(255, 122, 0, .26);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 90, 0, .18), rgba(255, 176, 0, .05));
  color: var(--orange-light);
}
.infocard h3 { font-size: 1rem; margin-bottom: 6px; }
.infocard p { color: var(--muted); font-size: .88rem; line-height: 1.6; }
.infocard a { color: var(--orange-light); }
.infocard a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============ 14. RESPONSIVE ============ */
@media (max-width: 1023px) {
  .phero__inner { grid-template-columns: 1fr; gap: 44px; }
  .phero__visual { order: 2; max-width: 560px; }
  .scorecard { right: 0; bottom: -20px; }

  .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tours   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tables  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gamepanel { grid-template-columns: 1fr; }
  .legal { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured { grid-template-columns: 1fr; }
  .featured__media img { min-height: 240px; aspect-ratio: 16 / 9; }
  .contactgrid { grid-template-columns: 1fr; }
  .markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .phero { padding-block: calc(var(--nav-h) + 34px) 56px; }
  .phero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .phero__stat { flex: 1 1 92px; }

  .scorecard {
    position: static;
    width: 100%;
    margin-top: 14px;
  }

  .matches { grid-template-columns: 1fr; }
  .formats { grid-template-columns: 1fr; }
  .tables  { grid-template-columns: 1fr; }
  .posts   { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .article__foot { flex-direction: column; align-items: flex-start; }
  .markets { grid-template-columns: 1fr; }
  .tours   { grid-template-columns: 1fr; }

  .match__odds { gap: 6px; }
  .odd { padding: 10px 4px; }
  .odd__label { font-size: .64rem; letter-spacing: .04em; }

  .board__foot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .phero__stats { gap: 16px; }
  .phero__stat dd { font-size: .72rem; letter-spacing: .06em; }
  .team__badge { width: 34px; height: 34px; font-size: .7rem; }
  .team__name { font-size: .9rem; }
}

/* ============ 15. REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .livedot::before,
  .opendot::before { animation: none; }
  .tablecard:hover .tablecard__emblem::after { animation: none; }
}