/* SmirkHouse's shared visual system.
   Loaded after page layout styles on every page. Keep component styling here;
   page styles own artwork, positioning, spacing and responsive grid layouts. */
:root {
  --background: #090909;
  --surface: #151112;
  --surface-raised: #211719;
  --surface-input: #191415;
  --contest-surface: var(--surface);
  --burgundy: #350d14;
  --text: #f4f0e7;
  --muted: #bcb3a6;
  --gold: #d7b466;
  --gold-bright: #f4dea3;
  --gold-border: #8f7647;
  --border: #554632;
  --border-subtle: #342a25;
  --font-body: Manrope, Arial, sans-serif;
  --font-display: Anton, Impact, 'Arial Narrow', sans-serif;
  --font-section-size: clamp(30px, 3vw, 40px);
  --font-card-size: clamp(20px, 2vw, 24px);
  --radius-control: 8px;
  --radius-panel: 12px;
  --gold-fill: linear-gradient(110deg, #f4dea3, #d7b466);
  --gold-fill-hover: linear-gradient(110deg, #fff0c5, #e5c47d);
  --gold-lettering: linear-gradient(180deg, #fff0be 5%, #edcf82 48%, #c99944 100%);
  --panel-fill: linear-gradient(145deg, #23191b, #151112 75%);
}

/* The same type roles on every surface, including native form controls. */
body, button, input, select, textarea { font-family: var(--font-body); }
body { color: var(--text); }
.page-width { max-width: 1200px; width: calc(100% - 80px); }
.section-heading h2, .contest-section h2, .contact-section h2 {
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--font-section-size);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.8px;
  text-transform: none;
}
.game-card h3, .streamer-name {
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--font-card-size);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.4px;
  text-transform: none;
}
.more-games-banner h3, .signup-banner h2 {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
}
.contest-dialog h2 {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.25;
}
.studio-banner h1 { color: var(--text); font-family: var(--font-display); font-weight: 400; }
.studio-banner .gold-text,
.hero-stage .draw-jackpot > strong,
.contest-hero .draw-jackpot > strong > span {
  color: var(--gold);
  background: var(--gold-lettering);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* The draw amount has separate currency/amount spans; avoid double gradients. */
.contest-hero .draw-jackpot > strong {
  background: none;
  color: var(--gold);
  -webkit-text-fill-color: currentColor;
}
.studio-banner .draw-jackpot > span { color: var(--text); font-weight: 600; }
.studio-banner .draw-jackpot > strong { filter: drop-shadow(0 2px 8px #0006); }
.studio-banner .studio-banner-footer .draw-schedule { color: var(--text); }
.studio-banner .draw-schedule.draw-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.studio-banner .draw-date strong { color: var(--gold-bright); font-weight: 800; }
.studio-banner .draw-date .icon { width: 20px; height: 20px; color: var(--gold); }
.how-it-works h2 span, .more-games-banner h3 span, .signup-banner h2 span,
.signup-eyebrow, .step-number, .streamer-votes strong, .registration-entry-message {
  color: var(--gold);
}
.registration-entry-message { font-weight: 800; }

/* One button family: a gold primary and a burgundy outline secondary.
   Layout rules may set width/margins; never give individual CTAs a new skin. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: 800 14px/1.4 var(--font-body);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.button-gold {
  color: #211708;
  border-color: #efdbab;
  background: var(--gold-fill);
  box-shadow: inset 0 1px 0 #fff0c660;
}
.button-gold:hover {
  color: #211708;
  border-color: #fff0c5;
  background: var(--gold-fill-hover);
  box-shadow: 0 5px 18px #d7b46620;
}
.button-outline {
  color: var(--text);
  border-color: var(--gold-border);
  background: #160d0f;
  box-shadow: none;
}
.button-outline:hover {
  color: var(--text);
  border-color: var(--gold);
  background: var(--burgundy);
  box-shadow: none;
}
.button:hover { transform: translateY(-1px); text-decoration: none; }
.button .icon { width: 18px; height: 18px; margin: 0; }
.button:disabled, .button[aria-disabled=true],
.button:disabled:hover, .button[aria-disabled=true]:hover {
  color: var(--muted);
  border-color: var(--border);
  background: var(--surface-raised);
  box-shadow: none;
  transform: none;
  cursor: default;
}
.main-navigation .button { white-space: nowrap; }
.main-navigation .stake-link { padding-inline: 14px; gap: 8px; }
.button.stake-link { gap: 8px; }
.button .stake-wordmark { width: 52px; height: 26px; }
.studio-banner .studio-banner-footer .button { margin: 0; }

/* Shared surfaces make the games, draw steps, profiles and table feel related. */
.featured-game, .how-it-works .draw-steps li, .voting-section .streamer-card,
.leaderboard-panel, .no-streamers, .contest-dialog {
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--panel-fill);
  box-shadow: inset 0 1px 0 #f4dea30a;
}
.more-games-banner, .signup-section .signup-banner {
  border-color: var(--border);
  border-radius: var(--radius-panel);
}
.voting-section .streamer-card:hover, .voting-section .streamer-card:focus-within {
  border-color: var(--gold-border);
  box-shadow: 0 6px 20px #0004;
}
.voting-section .streamer-avatar { box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--gold-border), 0 8px 24px #0005; }
.how-it-works .step-copy { border-color: var(--border); }
.leaderboard-panel .leaderboard-table th {
  color: var(--gold-bright);
  background: var(--surface-raised);
  border-color: var(--border);
}
.leaderboard-panel .leaderboard-table td { border-color: var(--border-subtle); }
.leaderboard-panel .leaderboard-table td:last-child { color: var(--text); }
.leaderboard-panel .leaderboard-table tbody tr[data-rank="1"] { background: #d7b46612; }
.leaderboard-panel .leaderboard-table tbody tr[data-rank="1"] td { border-color: var(--border); }
.leaderboard-panel .leaderboard-table tbody tr[data-rank="1"] td:last-child { color: var(--gold); }
.leaderboard-rank-disc { color: var(--text); background: var(--surface); border-color: var(--gold-border); }
.leaderboard-panel tbody tr[data-rank="1"] .leaderboard-rank-disc { color: #211708; background: var(--gold-fill); border-color: var(--gold-bright); }
.leaderboard-panel .streamer-avatar { border-color: var(--gold-border); }

.section-heading p, .contact-section p, .game-description, .game-caption .game-status,
.voting-benefit, .how-it-works .draw-steps p, .signup-section .signup-description,
.streamer-results, .streamer-votes, .voting-section .channel-link,
.leaderboard-section .leaderboard-caption, .leaderboard-section .draw-explanation,
.faq-section details p, #dialog-copy, .registration-email-help,
.vote-contact-help, .vote-terms-notice { color: var(--muted); }
.leaderboard-section .draw-explanation strong, .vote-consent { color: var(--text); }
.voting-section .channel-link:hover, .vote-terms-link { color: var(--gold); }
.vote-terms-link:hover { color: var(--gold-bright); }

/* Search, sort and both dialogs share the same fields and focus state. */
.streamer-search-wrap input, .streamer-sort-wrap select,
.dialog-field input, .dialog-field select {
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-input);
  color: var(--text);
  font: 400 16px/1.4 var(--font-body);
}
.streamer-search-wrap input::placeholder, .dialog-field input::placeholder { color: var(--muted); opacity: 1; }
.contact-choice { color: var(--text); border-color: var(--border); border-radius: var(--radius-control); background: var(--surface-input); }
.contact-choice:hover { border-color: var(--gold-border); }
.contact-choice:has(input:checked) { border-color: var(--gold); background: var(--burgundy); box-shadow: none; }
.contact-choice input:checked + span { color: var(--gold-bright); font-weight: 800; }
.vote-form input[type=radio], .vote-form input[type=checkbox] { accent-color: var(--gold); }
.contest-dialog { box-shadow: 0 25px 80px #0009; }
a:focus-visible, button:focus-visible, .vote-terms-link:focus-visible,
.contest-page :is(input, select, summary):focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}

@media(max-width:900px) {
  .studio-banner .draw-schedule.draw-date { font-size: 15px; }
  .page-width { width: calc(100% - 40px); }
}
@media(min-width:701px) and (max-width:820px) {
  .header-inner { gap: 12px; }
  .main-navigation { gap: 12px; }
}
@media(max-width:700px) {
  .button { padding-inline: 14px; }
  .studio-banner .studio-banner-footer .button { padding-inline: 10px; }
  .voting-section .streamer-name { font-size: 20px; }
}
@media(max-width:400px) {
  .studio-banner-actions--pair .button-gold .icon { display: none; }
}
@media(max-width:359px) {
  :root { --font-section-size: 27px; }
  .page-width { width: calc(100% - 32px); }
  .studio-banner .studio-banner-actions--pair .button { padding-inline: 6px; }
  .voting-section .streamer-name { font-size: 18px; }
}
@media(prefers-reduced-motion:reduce) { .button:hover { transform: none; } }