/* App-level layout for the HEVRYN web app. Tokens only (BRD-004): no
   colour, size or motion value appears here that is not a --hv-* token. */

.hv-skip {
  position: absolute; left: var(--hv-space-2); top: -100px;
  padding: var(--hv-space-2) var(--hv-space-3); border-radius: var(--hv-radius-sm);
  background: var(--hv-color-accent); color: var(--hv-color-text-on-accent); z-index: 100;
}
.hv-skip:focus { top: var(--hv-space-2); }

.hv-main { padding: var(--hv-space-5) 0 var(--hv-space-8); }
.hv-main:focus { outline: none; }
.hv-footer {
  border-top: 1px solid var(--hv-color-line); padding: var(--hv-space-5) var(--hv-space-4);
  color: var(--hv-color-text-faint); font-size: var(--hv-size-xs);
  display: flex; flex-wrap: wrap; gap: var(--hv-space-3) var(--hv-space-5); align-items: center;
}
.hv-footer a { color: var(--hv-color-text-muted); }

/* Grid items default to min-width:auto, so an overflowing header would widen
   the whole shell past the viewport; pin every row to the viewport instead. */
.hv-shell > * { min-width: 0; }
.hv-nav { flex-wrap: wrap; }
.hv-nav__links { min-width: 0; }
@media (max-width: 767px) {
  .hv-nav__links { margin-left: 0; flex: 1 1 100%; order: 3; flex-wrap: wrap; overflow: visible; }
  .hv-nav__search { order: 4; flex-basis: 100%; max-width: none; }
}
.hv-nav__utility { display: flex; gap: var(--hv-space-2); align-items: center; margin-left: auto; }
.hv-nav__utility a, .hv-nav__utility button { color: var(--hv-color-text-muted); min-height: 36px; padding: var(--hv-space-1) var(--hv-space-2); }
.hv-nav__utility .hv-button { min-height: 36px; padding-inline: var(--hv-space-3); color: var(--hv-color-text); }
.hv-nav__utility .hv-button--primary { color: var(--hv-color-text-on-accent); }
.hv-nav__search { flex: 1 1 160px; max-width: 320px; }
.hv-nav__search input { min-height: 36px; }

.hv-page-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--hv-space-3); margin-bottom: var(--hv-space-5); }
.hv-page-title h1 { margin: 0; }
.hv-page-title .hv-hint { flex-basis: 100%; }
.hv-section { margin-top: var(--hv-space-6); }
.hv-section > h2 { margin-bottom: var(--hv-space-4); }
.hv-actions { display: flex; flex-wrap: wrap; gap: var(--hv-space-3); align-items: center; }
.hv-inline { display: inline-flex; gap: var(--hv-space-2); align-items: center; flex-wrap: wrap; }

.hv-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--hv-space-2) var(--hv-space-4); margin: 0; font-size: var(--hv-size-sm); }
.hv-dl dt { color: var(--hv-color-text-muted); }
.hv-dl dd { margin: 0; overflow-wrap: anywhere; }

/* --- home --- */
.hv-hero { padding: var(--hv-space-8) 0 var(--hv-space-6); }
.hv-hero h1 { font-size: var(--hv-size-display); letter-spacing: -0.02em; margin-bottom: var(--hv-space-3); }
.hv-hero p { color: var(--hv-color-text-muted); font-size: var(--hv-size-lg); max-width: 40ch; }
.hv-brand-tile { display: grid; gap: var(--hv-space-2); padding: var(--hv-space-5); border-radius: var(--hv-radius-lg); border: 1px solid var(--hv-color-line); background: var(--hv-color-bg2); color: var(--hv-color-text); min-height: 140px; }
.hv-brand-tile:hover { border-color: var(--hv-color-line-strong); color: var(--hv-color-text); }
.hv-brand-tile__name { font-family: var(--hv-font-display); font-weight: var(--hv-weight-bold); letter-spacing: 0.08em; }
.hv-brand-tile[data-brand="arena"] .hv-brand-tile__name { color: var(--hv-color-arena); }
.hv-brand-tile[data-brand="proof"] .hv-brand-tile__name { color: var(--hv-color-proof); }
.hv-brand-tile[data-brand="vault"] .hv-brand-tile__name { color: var(--hv-color-vault); }
.hv-brand-tile p { color: var(--hv-color-text-muted); margin: 0; font-size: var(--hv-size-sm); }

/* --- wallet --- */
.hv-balance { display: grid; gap: var(--hv-space-1); }
.hv-balance__asset { color: var(--hv-color-text-muted); font-size: var(--hv-size-sm); letter-spacing: 0.06em; }
.hv-balance__value { font-size: var(--hv-size-xl); }
.hv-balance__sub { display: flex; flex-wrap: wrap; gap: var(--hv-space-3); font-size: var(--hv-size-xs); color: var(--hv-color-text-faint); }
.hv-steps { display: flex; gap: var(--hv-space-2); flex-wrap: wrap; margin-bottom: var(--hv-space-4); }
.hv-step { padding: var(--hv-space-1) var(--hv-space-3); border-radius: var(--hv-radius-pill); border: 1px solid var(--hv-color-line); font-size: var(--hv-size-xs); color: var(--hv-color-text-faint); }
.hv-step[aria-current="step"] { border-color: var(--hv-color-accent); color: var(--hv-color-text); }
.hv-step--done { color: var(--hv-color-positive); border-color: var(--hv-color-positive); }
.hv-progress { display: grid; gap: var(--hv-space-2); }
.hv-progress__row { display: grid; grid-template-columns: 24px 1fr; gap: var(--hv-space-3); align-items: start; font-size: var(--hv-size-sm); }
.hv-progress__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--hv-color-bg3); margin-top: 4px; justify-self: center; }
.hv-progress__row--done .hv-progress__dot { background: var(--hv-color-positive); }
.hv-progress__row--now .hv-progress__dot { background: var(--hv-color-accent); box-shadow: var(--hv-shadow-focus); }
.hv-progress__row--bad .hv-progress__dot { background: var(--hv-color-negative); }

/* --- games --- */
.hv-game-tile { display: grid; gap: var(--hv-space-2); padding: var(--hv-space-4); border-radius: var(--hv-radius-lg); border: 1px solid var(--hv-color-line); background: var(--hv-color-bg2); color: var(--hv-color-text); }
.hv-game-tile:hover { border-color: var(--hv-color-accent-soft); color: var(--hv-color-text); }
.hv-game-tile__name { font-family: var(--hv-font-display); font-weight: var(--hv-weight-bold); font-size: var(--hv-size-lg); }
.hv-game-tile__meta { display: flex; gap: var(--hv-space-2); flex-wrap: wrap; align-items: center; font-size: var(--hv-size-xs); color: var(--hv-color-text-faint); }
.hv-game-shell { display: grid; gap: var(--hv-space-5); }
@media (min-width: 1080px) { .hv-game-shell { grid-template-columns: 2fr 1fr; align-items: start; } }
.hv-game-board { display: grid; gap: var(--hv-space-4); padding: var(--hv-space-5); border-radius: var(--hv-radius-lg); background: var(--hv-color-bg1); border: 1px solid var(--hv-color-line); min-height: 320px; }
.hv-game-status { font-family: var(--hv-font-display); font-size: var(--hv-size-xl); font-weight: var(--hv-weight-semibold); }
.hv-game-status--won { color: var(--hv-color-positive); }
.hv-game-status--lost { color: var(--hv-color-negative); }
.hv-grid25 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--hv-space-2); max-width: 420px; }
.hv-cell { aspect-ratio: 1; border-radius: var(--hv-radius-md); border: 1px solid var(--hv-color-line-strong); background: var(--hv-color-bg2); color: var(--hv-color-text); font: inherit; font-weight: var(--hv-weight-semibold); cursor: pointer; min-height: 44px; }
.hv-cell:hover:not(:disabled) { border-color: var(--hv-color-accent); }
.hv-cell--safe { background: var(--hv-color-accent-soft); border-color: var(--hv-color-accent); cursor: default; }
.hv-cell--trap { background: var(--hv-color-negative); color: var(--hv-color-text-on-accent); cursor: default; }
.hv-cell:disabled { cursor: not-allowed; opacity: var(--hv-state-disabled-opacity); }
.hv-cell--safe:disabled, .hv-cell--trap:disabled { opacity: 1; }
.hv-doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-3); max-width: 480px; }
.hv-door { min-height: 96px; border-radius: var(--hv-radius-md); border: 2px solid var(--hv-color-line-strong); background: var(--hv-color-bg2); color: var(--hv-color-text); font: inherit; font-weight: var(--hv-weight-semibold); cursor: pointer; }
.hv-door:hover:not(:disabled) { border-color: var(--hv-color-vault); }
.hv-door:disabled { cursor: not-allowed; opacity: var(--hv-state-disabled-opacity); }
.hv-stages { display: flex; gap: var(--hv-space-2); flex-wrap: wrap; }
.hv-stage { padding: var(--hv-space-2) var(--hv-space-3); border-radius: var(--hv-radius-sm); border: 1px solid var(--hv-color-line); font-size: var(--hv-size-sm); font-family: var(--hv-font-mono); color: var(--hv-color-text-muted); }
.hv-stage--done { border-color: var(--hv-color-positive); color: var(--hv-color-positive); }
.hv-stage--now { border-color: var(--hv-color-accent); color: var(--hv-color-text); }
.hv-cards { display: flex; gap: var(--hv-space-2); flex-wrap: wrap; min-height: 72px; }
.hv-card-face { width: 52px; height: 72px; border-radius: var(--hv-radius-sm); background: var(--hv-color-text); color: var(--hv-color-bg0); display: grid; place-items: center; font-family: var(--hv-font-mono); font-weight: var(--hv-weight-bold); font-size: var(--hv-size-lg); }
.hv-card-face--hidden { background: var(--hv-color-bg3); color: var(--hv-color-text-faint); }
.hv-pulse-target { display: grid; gap: var(--hv-space-3); }
.hv-pulse-target output { font-family: var(--hv-font-mono); font-size: var(--hv-size-xxl); font-weight: var(--hv-weight-bold); }
input[type="range"].hv-range { width: 100%; accent-color: var(--hv-color-accent); min-height: 44px; }

/* --- arena --- */
.hv-arena-hero { padding: var(--hv-space-6) 0 var(--hv-space-4); border-bottom: 1px solid var(--hv-color-line); margin-bottom: var(--hv-space-5); }
.hv-arena-hero h1 { color: var(--hv-color-arena); letter-spacing: 0.08em; }
.hv-versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--hv-space-4); align-items: center; }
.hv-versus__side { display: grid; gap: var(--hv-space-2); padding: var(--hv-space-4); border-radius: var(--hv-radius-lg); background: var(--hv-color-bg2); border: 1px solid var(--hv-color-line); }
.hv-versus__side--you { border-color: var(--hv-color-arena); }
.hv-versus__vs { font-family: var(--hv-font-display); font-weight: var(--hv-weight-bold); color: var(--hv-color-arena); letter-spacing: 0.1em; }
.hv-versus__alias { font-family: var(--hv-font-display); font-weight: var(--hv-weight-semibold); font-size: var(--hv-size-lg); }
.hv-bracket { display: grid; grid-auto-flow: column; gap: var(--hv-space-5); overflow-x: auto; padding-bottom: var(--hv-space-3); }
.hv-bracket__round { display: grid; gap: var(--hv-space-3); align-content: space-around; min-width: 180px; }
.hv-bracket__pair { display: grid; gap: 2px; border: 1px solid var(--hv-color-line); border-radius: var(--hv-radius-md); overflow: hidden; }
.hv-bracket__seat { padding: var(--hv-space-2) var(--hv-space-3); background: var(--hv-color-bg2); font-size: var(--hv-size-sm); display: flex; justify-content: space-between; }
.hv-bracket__seat--won { color: var(--hv-color-arena); font-weight: var(--hv-weight-semibold); }
.hv-rank { display: grid; grid-template-columns: 2.5em 1fr auto auto; gap: var(--hv-space-3); padding: var(--hv-space-2) 0; border-bottom: 1px solid var(--hv-color-line); align-items: center; font-size: var(--hv-size-sm); }
.hv-rank__pos { font-family: var(--hv-font-mono); color: var(--hv-color-text-faint); }
.hv-rank__rating { font-family: var(--hv-font-mono); font-weight: var(--hv-weight-semibold); }

/* --- proof --- */
.hv-proof-check { display: grid; grid-template-columns: auto 1fr; gap: var(--hv-space-3); align-items: start; padding: var(--hv-space-3) 0; border-bottom: 1px solid var(--hv-color-line); }
.hv-proof-check__mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--hv-weight-bold); background: var(--hv-color-bg3); color: var(--hv-color-text-muted); }
.hv-proof-check__mark--ok { background: var(--hv-color-positive); color: var(--hv-color-bg0); }
.hv-proof-check__mark--bad { background: var(--hv-color-negative); color: var(--hv-color-text-on-accent); }
.hv-proof-check__mark--pending { background: var(--hv-color-warning); color: var(--hv-color-bg0); }
.hv-code { font-family: var(--hv-font-mono); font-size: var(--hv-size-xs); background: var(--hv-color-bg1); border: 1px solid var(--hv-color-line); border-radius: var(--hv-radius-sm); padding: var(--hv-space-3); overflow-x: auto; white-space: pre; max-height: 360px; }
textarea.hv-input { min-height: 160px; font-family: var(--hv-font-mono); font-size: var(--hv-size-xs); resize: vertical; }

/* --- glasshouse & misc --- */
.hv-stat { display: grid; gap: var(--hv-space-1); }
.hv-stat__label { color: var(--hv-color-text-muted); font-size: var(--hv-size-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.hv-stat__value { font-family: var(--hv-font-mono); font-size: var(--hv-size-xl); font-weight: var(--hv-weight-semibold); }
.hv-notice { display: grid; gap: var(--hv-space-1); padding: var(--hv-space-3) 0; border-bottom: 1px solid var(--hv-color-line); font-size: var(--hv-size-sm); }
.hv-notice time { color: var(--hv-color-text-faint); font-size: var(--hv-size-xs); }
.hv-prose { max-width: 70ch; }
.hv-prose p, .hv-prose li { color: var(--hv-color-text-muted); }
.hv-toggle { display: flex; align-items: center; gap: var(--hv-space-3); min-height: 44px; }
.hv-toggle input { width: 20px; height: 20px; accent-color: var(--hv-color-accent); }

/* ===================================================================== */
/* Commercial surfaces: hero, campaigns, jackpots, tournaments, activity  */
/* ===================================================================== */

.hv-serif { font-family: var(--hv-font-serif); font-weight: var(--hv-weight-semibold); letter-spacing: 0.01em; }
.hv-eyebrow { display: inline-flex; gap: var(--hv-space-2); align-items: center; font-size: var(--hv-size-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hv-color-champagne); font-weight: var(--hv-weight-semibold); }
.hv-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hv-space-4); margin-bottom: var(--hv-space-4); }
.hv-section-head h2 { margin: 0; }
.hv-art { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--hv-color-velvet); }
.hv-button--gold { background: linear-gradient(135deg, var(--hv-color-champagne), var(--hv-color-gold) 55%, var(--hv-color-gold-deep)); color: var(--hv-color-text-on-accent); border: 0; box-shadow: var(--hv-shadow-glow-gold); }
.hv-button--gold:hover { opacity: 1; filter: brightness(1.06); }
.hv-button--ruby { background: var(--hv-color-ruby); color: var(--hv-color-text); }
.hv-button--lg { min-height: 52px; padding-inline: var(--hv-space-6); font-size: var(--hv-size-lg); }

.hv-preview-ribbon { display: flex; gap: var(--hv-space-2); align-items: center; font-size: var(--hv-size-xs); color: var(--hv-color-text-muted); padding: var(--hv-space-2) var(--hv-space-4); border: 1px dashed var(--hv-color-line-strong); border-radius: var(--hv-radius-md); background: var(--hv-color-bg1); }

/* --- cinematic hero --- */
.hv-cine {
  position: relative; overflow: hidden; border-radius: var(--hv-radius-lg); border: 1px solid var(--hv-color-line);
  min-height: 520px; display: grid; align-items: end; background: var(--hv-color-velvet);
}
.hv-cine__art { position: absolute; inset: 0; }
.hv-cine__art img { width: 100%; height: 100%; object-fit: cover; }
.hv-cine__veil { position: absolute; inset: 0; background: linear-gradient(180deg, var(--hv-overlay-veil-top) 0%, var(--hv-overlay-veil-mid) 55%, var(--hv-overlay-veil-deep) 100%); }
.hv-cine__body { position: relative; padding: var(--hv-space-7) var(--hv-space-6); max-width: 760px; display: grid; gap: var(--hv-space-4); }
.hv-cine__title { font-family: var(--hv-font-serif); font-size: var(--hv-size-hero); line-height: 1.02; letter-spacing: 0.01em; margin: 0; color: var(--hv-color-text); text-shadow: var(--hv-overlay-text-shadow); }
.hv-cine__title em { font-style: normal; color: var(--hv-color-champagne); }
.hv-cine__title--sm { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.hv-cine__lead { color: var(--hv-color-text-muted); font-size: var(--hv-size-lg); max-width: 52ch; margin: 0; }
.hv-cine__trust { display: flex; flex-wrap: wrap; gap: var(--hv-space-3) var(--hv-space-5); font-size: var(--hv-size-xs); color: var(--hv-color-text-faint); letter-spacing: 0.06em; text-transform: uppercase; }
@media (min-width: 1080px) { .hv-cine { min-height: 640px; } .hv-cine__body { padding: var(--hv-space-8); } }
@media (max-width: 767px) { .hv-cine { min-height: 560px; } .hv-cine__body { padding: var(--hv-space-5) var(--hv-space-4); } }

/* --- brand bands (Proof / Vault / VIP / Arena / Live) --- */
.hv-band { position: relative; overflow: hidden; border-radius: var(--hv-radius-lg); border: 1px solid var(--hv-color-line); display: grid; min-height: 320px; background: var(--hv-color-velvet); }
.hv-band__art { position: absolute; inset: 0; }
.hv-band__art img { width: 100%; height: 100%; object-fit: cover; }
.hv-band__veil { position: absolute; inset: 0; background: linear-gradient(90deg, var(--hv-overlay-veil-deep) 0%, var(--hv-overlay-veil-side) 55%, var(--hv-overlay-veil-top) 100%); }
.hv-band__body { position: relative; padding: var(--hv-space-6); display: grid; gap: var(--hv-space-3); align-content: center; max-width: 560px; }
.hv-band__body h2 { font-family: var(--hv-font-serif); font-size: var(--hv-size-xxl); margin: 0; }
.hv-band__body p { color: var(--hv-color-text-muted); margin: 0; }
.hv-band--proof .hv-band__body h2 { color: var(--hv-color-proof); }
.hv-band--vault .hv-band__body h2 { color: var(--hv-color-champagne); }
.hv-band--arena .hv-band__body h2 { color: var(--hv-color-arena); }
.hv-band--vip .hv-band__body h2 { color: var(--hv-color-champagne); }
.hv-band--live .hv-band__body h2 { color: var(--hv-color-live); }
@media (max-width: 767px) { .hv-band__veil { background: linear-gradient(180deg, var(--hv-overlay-veil-soft) 0%, var(--hv-overlay-veil-deep) 70%); } .hv-band__body { align-content: end; } }

/* --- game cards (Originals) --- */
.hv-originals { display: grid; gap: var(--hv-space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .hv-originals { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .hv-originals { grid-template-columns: repeat(5, 1fr); } }
.hv-gcard { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--hv-radius-lg); overflow: hidden; border: 1px solid var(--hv-color-line); background: var(--hv-color-bg2); color: var(--hv-color-text); transition: transform var(--hv-motion-base) var(--hv-motion-ease), border-color var(--hv-motion-base) var(--hv-motion-ease), box-shadow var(--hv-motion-base) var(--hv-motion-ease); }
.hv-gcard:hover { transform: translateY(-4px); border-color: var(--hv-color-gold); box-shadow: var(--hv-shadow-glow-gold); color: var(--hv-color-text); }
.hv-gcard__art { aspect-ratio: 4 / 5; overflow: hidden; background: var(--hv-color-velvet); }
.hv-gcard__art img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--hv-motion-slow) var(--hv-motion-ease); }
.hv-gcard:hover .hv-gcard__art img { transform: scale(1.04); }
.hv-gcard__body { padding: var(--hv-space-3) var(--hv-space-4) var(--hv-space-4); display: grid; gap: var(--hv-space-1); }
.hv-gcard__name { font-family: var(--hv-font-display); font-weight: var(--hv-weight-bold); letter-spacing: 0.08em; }
.hv-gcard__tag { color: var(--hv-color-text-muted); font-size: var(--hv-size-sm); }
.hv-gcard__meta { display: flex; gap: var(--hv-space-2); flex-wrap: wrap; font-size: var(--hv-size-xs); color: var(--hv-color-text-faint); }
.hv-gcard__ribbon { position: absolute; top: var(--hv-space-3); left: var(--hv-space-3); }
.hv-gcard__fav { position: absolute; top: var(--hv-space-2); right: var(--hv-space-2); min-height: 36px; padding-inline: var(--hv-space-2); background: var(--hv-overlay-veil-side); }

/* --- campaigns --- */
.hv-campaign-hero { display: grid; border-radius: var(--hv-radius-lg); overflow: hidden; border: 1px solid var(--hv-color-line); background: var(--hv-color-velvet); }
@media (min-width: 1080px) { .hv-campaign-hero { grid-template-columns: 1.1fr 1fr; min-height: 420px; } }
.hv-campaign-hero__art { min-height: 220px; background: var(--hv-color-velvet); }
.hv-campaign-hero__body { padding: var(--hv-space-6); display: grid; gap: var(--hv-space-3); align-content: center; }
.hv-campaign-hero__body h2 { margin: 0; font-size: var(--hv-size-xxl); }
.hv-campaign-hero__benefit { font-size: var(--hv-size-lg); color: var(--hv-color-champagne); margin: 0; font-weight: var(--hv-weight-semibold); }
.hv-campaign-hero__terms, .hv-campaign__terms { font-size: var(--hv-size-xs); color: var(--hv-color-text-faint); margin: 0; }
.hv-campaign-row { display: grid; gap: var(--hv-space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .hv-campaign-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .hv-campaign-row { grid-template-columns: repeat(3, 1fr); } }
.hv-campaign { display: grid; grid-template-rows: 160px 1fr; border-radius: var(--hv-radius-lg); overflow: hidden; border: 1px solid var(--hv-color-line); background: var(--hv-color-bg2); }
.hv-campaign__art { background: var(--hv-color-velvet); }
.hv-campaign__body { padding: var(--hv-space-4); display: grid; gap: var(--hv-space-2); align-content: start; }
.hv-campaign__body h3 { margin: 0; font-family: var(--hv-font-serif); font-size: var(--hv-size-xl); }
.hv-campaign__benefit { color: var(--hv-color-champagne); font-weight: var(--hv-weight-semibold); margin: 0; }
.hv-placement { display: grid; gap: var(--hv-space-3); }
.hv-placement .hv-campaign { grid-template-rows: 120px 1fr; }
.hv-countdown { font-family: var(--hv-font-mono); color: var(--hv-color-text); }

/* --- jackpots, tournaments, ticker --- */
.hv-jackpots { display: grid; gap: var(--hv-space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .hv-jackpots { grid-template-columns: repeat(3, 1fr); } }
.hv-jackpot { position: relative; display: grid; gap: var(--hv-space-1); align-content: end; min-height: 200px; padding: var(--hv-space-5); border-radius: var(--hv-radius-lg); border: 1px solid var(--hv-color-line); background: var(--hv-color-velvet); color: var(--hv-color-text); overflow: hidden; }
.hv-jackpot__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-jackpot::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--hv-overlay-veil-faint), var(--hv-overlay-veil-strong)); }
.hv-jackpot > :not(.hv-jackpot__art) { position: relative; z-index: 2; }
.hv-jackpot__pool { font-size: var(--hv-size-xxl); color: var(--hv-color-champagne); font-variant-numeric: tabular-nums; }
.hv-jackpot:hover { border-color: var(--hv-color-gold); color: var(--hv-color-text); }
.hv-tournament-row { display: grid; gap: var(--hv-space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .hv-tournament-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .hv-tournament-row { grid-template-columns: repeat(3, 1fr); } }
.hv-tournament { display: grid; grid-template-columns: 120px 1fr; border-radius: var(--hv-radius-lg); overflow: hidden; border: 1px solid var(--hv-color-line); background: var(--hv-color-bg2); }
.hv-tournament__art { background: var(--hv-color-velvet); }
.hv-tournament__body { padding: var(--hv-space-4); display: grid; gap: var(--hv-space-2); align-content: start; }
.hv-tournament__body h3 { margin: 0; }
.hv-tournament__prize { font-size: var(--hv-size-xl); color: var(--hv-color-champagne); margin: 0; }
.hv-ticker { display: flex; gap: var(--hv-space-5); overflow-x: auto; padding: var(--hv-space-2) var(--hv-space-4); border: 1px solid var(--hv-color-line); border-radius: var(--hv-radius-pill); background: var(--hv-color-bg1); font-size: var(--hv-size-sm); white-space: nowrap; scrollbar-width: none; }
.hv-ticker__item { display: inline-flex; gap: var(--hv-space-1); align-items: center; }

/* --- Arena activity --- */
.hv-season { display: flex; flex-wrap: wrap; gap: var(--hv-space-3); align-items: center; padding: var(--hv-space-3) var(--hv-space-4); border-radius: var(--hv-radius-md); border: 1px solid var(--hv-color-arena); background: var(--hv-overlay-tint-arena); }
.hv-versus--compact { grid-template-columns: 1fr auto 1fr; text-align: center; }
.hv-challenge__stake { font-size: var(--hv-size-xl); color: var(--hv-color-champagne); margin: 0; }
.hv-match-card { display: grid; gap: var(--hv-space-2); }

/* --- VIP --- */
.hv-tiers { display: grid; gap: var(--hv-space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .hv-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .hv-tiers { grid-template-columns: repeat(4, 1fr); } }
.hv-tier { display: grid; gap: var(--hv-space-2); padding: var(--hv-space-5); border-radius: var(--hv-radius-lg); border: 1px solid var(--hv-color-line); background: linear-gradient(180deg, var(--hv-color-velvet2), var(--hv-color-bg1)); }
.hv-tier__name { font-family: var(--hv-font-serif); font-size: var(--hv-size-xl); color: var(--hv-color-champagne); }
.hv-tier--invite { border-color: var(--hv-color-gold); box-shadow: var(--hv-shadow-glow-gold); }
.hv-tier ul { margin: 0; padding-left: var(--hv-space-4); color: var(--hv-color-text-muted); font-size: var(--hv-size-sm); }
.hv-host { display: grid; grid-template-columns: 64px 1fr; gap: var(--hv-space-4); align-items: center; }
.hv-host__mark { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--hv-color-gold); display: grid; place-items: center; font-family: var(--hv-font-serif); font-size: var(--hv-size-xl); color: var(--hv-color-champagne); }

/* --- casino category nav --- */
.hv-cats { display: flex; gap: var(--hv-space-2); overflow-x: auto; padding-bottom: var(--hv-space-2); scrollbar-width: none; }
.hv-cats a { flex: 0 0 auto; padding: var(--hv-space-2) var(--hv-space-4); border-radius: var(--hv-radius-pill); border: 1px solid var(--hv-color-line); color: var(--hv-color-text-muted); font-size: var(--hv-size-sm); white-space: nowrap; }
.hv-cats a[aria-current="page"] { border-color: var(--hv-color-gold); color: var(--hv-color-text); background: var(--hv-color-accent-soft); }
.hv-cats a:hover { color: var(--hv-color-text); border-color: var(--hv-color-line-strong); }

/* --- degraded states --- */
.hv-degraded { display: grid; gap: var(--hv-space-2); padding: var(--hv-space-5); border-radius: var(--hv-radius-lg); border: 1px solid var(--hv-color-line); background: var(--hv-color-bg1); }
.hv-degraded h3 { margin: 0; font-family: var(--hv-font-serif); }
.hv-degraded p { margin: 0; color: var(--hv-color-text-muted); }

/* --- outcome motion --- */
@keyframes hv-win { 0% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 6px var(--hv-overlay-ring-proof), var(--hv-shadow-glow-proof); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes hv-lose { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes hv-bank { 0% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 6px var(--hv-overlay-ring-gold), var(--hv-shadow-glow-gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes hv-step { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } }
.hv-fx-win { animation: hv-win 900ms var(--hv-motion-ease); }
.hv-fx-lose { animation: hv-lose 500ms var(--hv-motion-ease); }
.hv-fx-bank { animation: hv-bank 900ms var(--hv-motion-ease); }
.hv-fx-step { animation: hv-step 220ms var(--hv-motion-ease); }
.hv-fade-in { animation: hv-fade 400ms var(--hv-motion-ease) both; }
@keyframes hv-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- feature trio (trust) --- */
.hv-trust { display: grid; gap: var(--hv-space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .hv-trust { grid-template-columns: repeat(3, 1fr); } }
.hv-trust__item { display: grid; gap: var(--hv-space-2); padding: var(--hv-space-5); border-radius: var(--hv-radius-lg); border: 1px solid var(--hv-color-line); background: var(--hv-color-bg1); }
.hv-trust__item h3 { margin: 0; font-family: var(--hv-font-serif); color: var(--hv-color-champagne); }
.hv-trust__item p { margin: 0; color: var(--hv-color-text-muted); font-size: var(--hv-size-sm); }

/* --- catalogue lobby: search, filters, rails, pages --- */
.hv-search { display: flex; gap: var(--hv-space-2); }
.hv-search input { flex: 1 1 auto; }
.hv-filters { display: flex; flex-wrap: wrap; gap: var(--hv-space-2); align-items: center; }
.hv-filters .hv-select { flex: 1 1 140px; max-width: 220px; }
.hv-rail__head { justify-content: space-between; }
.hv-rail__head h2 { margin: 0; }
.hv-rail__more { font-size: var(--hv-size-sm); color: var(--hv-color-gold); }
.hv-rail__scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: var(--hv-space-3); overflow-x: auto; padding-bottom: var(--hv-space-2); scroll-snap-type: x proximity; scrollbar-width: thin; }
.hv-rail__scroll > .hv-gcard { scroll-snap-align: start; }
@media (min-width: 768px) { .hv-rail__scroll { grid-auto-columns: minmax(180px, 1fr); } }
@media (min-width: 1080px) { .hv-rail__scroll { grid-auto-columns: calc((100% - 5 * var(--hv-space-3)) / 6); } }
.hv-pager { display: flex; flex-wrap: wrap; gap: var(--hv-space-2); align-items: center; justify-content: center; }
.hv-gcard--preview { border-style: dashed; }
.hv-gcard--preview .hv-gcard__art img { filter: saturate(0.85); }

/* Identity verification: the partner's WebSDK mounts here (D-0037). */
.hv-verify-sdk { min-height: 32rem; padding: 0; overflow: hidden; }
.hv-verify-sdk iframe { width: 100%; min-height: 32rem; border: 0; }