/* Approved Club direction. Version 2: the giveaway total leads the hero. */
:root { --accent: #b7f881; --accent-fill: #b7f881; --f-total: 6rem; --mine-tile: #314652; --mine-edge: #21323c; --game-bg: #0b131b; --mint: #80efa8; }
button:disabled { cursor: default; opacity: .4; transform: none; }
.hero { padding: var(--s12) 0 var(--s12); }
.hero-art { width: 84%; object-fit: cover; object-position: center; opacity: 1; }
.hero::after { background: linear-gradient(90deg,var(--bg) 0%,rgba(16,24,32,.98) 23%,rgba(16,24,32,.74) 40%,rgba(16,24,32,.05) 60%,rgba(16,24,32,0) 82%,var(--bg) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(16,24,32,0) 24%,rgba(16,24,32,0) 85%,rgba(16,24,32,.65)); }
.hero h1 { font-size: var(--f-lg); letter-spacing: -.035em; line-height: 1.15; margin-bottom: var(--s8); }
.hero h1 span { color: var(--ink); }
.hero-kicker { margin-bottom: var(--s5); }
.hero-total { position: relative; max-width: 560px; }
.hero-total .eyebrow { display: flex; align-items: center; gap: var(--s3); color: var(--ink); font-size: var(--f-sm); }
.hero-total .eyebrow svg { color: var(--gold); }
.hero-total strong { display: block; font-size: var(--f-total); color: var(--gold); margin: var(--s3) 0; letter-spacing: -.065em; text-shadow: 0 2px 24px var(--bg); }
.hero-total > small { color: var(--muted); }
.hero-copy { margin-top: var(--s6); }
.hero-buttons { margin-top: var(--s6); }
.hero-caption { color: var(--mint); bottom: var(--s8); right: var(--s8); }
.race-meta { flex-wrap: wrap; gap: var(--s4); }
.month-picker { display: flex; align-items: center; gap: var(--s2); }
.month-picker > span { min-width: 184px; text-align: center; color: var(--gold); font-size: var(--f-sm); }
.month-button { display: grid; place-items: center; width: 44px; height: 44px; padding: var(--s2); border-radius: var(--r-sm); background: var(--surface); }
.month-button svg { width: 16px; height: 16px; }
.month-button.previous svg { transform: rotate(180deg); }
.race-toolbar { display:flex; justify-content:space-between; align-items:center; gap:var(--s6); margin-bottom:var(--s8); padding:var(--s5) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.race-toolbar p { color:var(--muted); font-size:var(--f-base); }
.race-toolbar .btn { flex-shrink:0; }
.archive-summary { text-align:right; padding:var(--s4) 0; }
.archive-summary strong { display:block; font-size:var(--f-md); color:var(--gold); }
.archive-summary small { color:var(--muted); }
.mines-section { scroll-margin-top:var(--s6); }
.mines-section .section-head { margin-bottom:var(--s6); }
.mines-section .section-head .eyebrow { color:var(--accent); }
.mines-layout { display:grid; grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); background:var(--surface); border-radius:var(--r-lg); overflow:clip; }
.mines-info { padding:var(--s10); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s6); }
.mines-info h3 { font-size:var(--f-xl); line-height:1.1; }
.mines-info p { color:var(--muted); font-size:var(--f-base); }
.mines-counter { display:flex; gap:var(--s5); align-items:center; }
.mines-counter .mine-symbol { width:48px; height:48px; }
.mines-counter strong { font-size:var(--f-lg); font-variant-numeric:tabular-nums; display:block; }
.mines-counter small { color:var(--muted); }
.mines-info .btn { width:100%; }
.mines-info .mines-note { font-size:var(--f-sm); }
.mines-board-wrap { padding:var(--s8); background:var(--game-bg); }
.mines-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s3); max-width:520px; margin:auto; }
.mine-cell { width:100%; min-width:0; aspect-ratio:1; background:var(--mine-tile); border-radius:var(--r-sm); display:grid; place-items:center; box-shadow:0 5px 0 var(--mine-edge); padding:var(--s2); transition:transform var(--fast) var(--ease),opacity var(--fast) var(--ease); }
.mine-cell:hover:not([aria-disabled="true"]) { transform:translateY(-3px); background:#3c5563; opacity:1; }
.mine-cell[aria-disabled="true"] { cursor:default; }
.mine-cell.revealed { background:var(--bg); box-shadow:none; }
.mine-cell.found { background:#273226; }
.cell-unopened { width:12px; height:12px; background:#6a8492; border-radius:3px; transform:rotate(45deg); opacity:.55; }
.mine-symbol, .gem-symbol { display:block; width:64%; height:64%; min-width:24px; min-height:24px; object-fit:contain; object-position:center; }
.mines-board-caption { display:flex; justify-content:space-between; gap:var(--s4); max-width:520px; margin:var(--s6) auto 0; font-size:var(--f-sm); color:var(--muted); }
.mines-status { padding:var(--s4); border-radius:var(--r-sm); border:1px solid var(--line); color:var(--accent); font-weight:700; width:100%; }
.join-steps { display:flex; gap:var(--s2); margin:var(--s6) 0; font-size:var(--f-xs); color:var(--muted); }
.join-steps span { flex:1; border-top:3px solid var(--line); padding-top:var(--s3); }
.join-steps span.current { color:var(--accent); border-color:var(--accent); }
.join-check { display:flex; align-items:flex-start; gap:var(--s3); margin-top:var(--s4); font-size:var(--f-base); cursor:pointer; }
.join-check input { min-height:24px; min-width:24px; width:24px; height:24px; margin:0; accent-color:var(--accent); }
.join-rules { padding-left:var(--s6); font-size:var(--f-base); color:var(--muted); }
.join-rules li { margin-bottom:var(--s3); }
.join-rules li:last-child { margin-bottom:0; }
.join-success { color:var(--accent); }
@media (max-width:1150px) { .hero-total strong { font-size:var(--f-hero); } .hero-art { width:88%; } .mines-info { padding:var(--s8); } }
@media (max-width:850px) { .hero-total strong { font-size:var(--f-display); } .hero-art { width:100%; } .hero::after { background:linear-gradient(90deg,var(--bg),rgba(16,24,32,.85) 35%,rgba(16,24,32,.05) 75%,var(--bg)),linear-gradient(0deg,var(--bg),transparent 32%); } .mines-layout { grid-template-columns:1fr 1.15fr; } .mines-info { padding:var(--s6); } .mines-info h3 { font-size:var(--f-lg); } .mines-board-wrap { padding:var(--s6); } .mines-grid { gap:var(--s2); } }
/* Stack throughout narrow and tablet widths so the board stays centered. */
@media (max-width:1024px) {
  .mines-layout { grid-template-columns:minmax(0,1fr); }
  .mines-section .section-head { flex-direction:column; align-items:flex-start; gap:var(--s4); }
  .mines-board-wrap { min-width:0; width:100%; }
  .mines-grid { width:100%; }
  .home-race .section-head { flex-direction:column; align-items:flex-start; }
  .home-race .countdown-label { text-align:left; }
  .footer-bottom .age-mark, .footer-bottom .copyright { flex-shrink:0; }
}
@media (max-width:600px) {
  .hero { padding:var(--s8) 0; }
  .hero-art { top:0; right:calc(-1 * var(--s5)); width:calc(100% + var(--s10)); max-width:none; height:340px; object-position:center; opacity:.8; mask-image:linear-gradient(to bottom,#000 55%,transparent 100%); }
  .hero::after { inset:0 calc(-1 * var(--s5)); background:linear-gradient(90deg,rgba(16,24,32,.7),rgba(16,24,32,.3) 55%,rgba(16,24,32,.15)),linear-gradient(0deg,var(--bg) 5%,rgba(16,24,32,.86) 32%,rgba(16,24,32,.08) 90%); }
  .hero h1 { font-size:var(--f-md); margin-bottom:var(--s12); }
  .hero-total .eyebrow { font-size:var(--f-xs); }
  .hero-total strong { font-size:var(--f-display); }
  .hero-copy { font-size:var(--f-base); max-width:32ch; }
  .hero-caption { display:none; }
  .race-meta { gap:var(--s3); }
  .month-picker { gap:var(--s1); }
  .month-picker > span { min-width:168px; }
  .race-toolbar { flex-direction:column; align-items:stretch; gap:var(--s4); }
  .race-toolbar .btn { width:100%; }
  .archive-summary { text-align:left; padding:0; }
  .mines-layout { grid-template-columns:1fr; }
  .mines-info { gap:var(--s5); }
  .mines-board-wrap { padding:var(--s4); }
  .mines-grid { gap:var(--s2); }
  .mines-board-caption { font-size:var(--f-xs); }
  .mines-section .section-head { gap:var(--s4); }
  .mines-info h3 { font-size:var(--f-lg); }
}
@media (prefers-reduced-motion:reduce) { .mine-cell:hover:not([aria-disabled="true"]) { transform:none; } }
@media (max-width:360px) { .mines-board-wrap { padding:var(--s3); } }
@media (forced-colors:active) { .mine-cell, .join-steps span { border:1px solid ButtonText; } .mine-cell.found { outline:2px solid Highlight; } }

/* Dedicated admin preview shares the approved Club design tokens. */
body[data-view="admin"] main { padding-bottom:var(--s12); }
.admin-header-label { color:var(--muted); font-size:var(--f-sm); }
body[data-view="admin"] .header-actions { margin-left:auto; }
.review-nav [aria-current="page"] { color:var(--accent); text-decoration:underline; text-underline-offset:5px; }
@media(max-width:600px) {
  .admin-header-label { display:none; }
  body[data-view="admin"] .header-inner { padding-block:var(--s4); }
  body[data-view="admin"] .header-actions .btn { padding-inline:var(--s3); }
  body[data-view="admin"] .admin-stats { grid-template-columns:1fr; }
  body[data-view="admin"] .tabs { flex-wrap:wrap; }
}
/* Working forms use the approved spacing and type scale. */
.tabs [aria-pressed="true"] { color:var(--ink); border-bottom:2px solid var(--accent); }
.form-error { color:var(--gold); margin-block:var(--s4); }
.prize-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); margin-block:var(--s4); }
.prize-fields input { min-width:0; width:100%; }
.admin-actions { margin-block:var(--s5); }
.dialog form > .field { margin-block:var(--s4); }
.dialog details { margin-block:var(--s4); }
.dialog .btn { margin-top:var(--s3); }
body[data-view="admin"] td { max-width:360px; overflow-wrap:anywhere; white-space:normal; }
@media(max-width:600px) { .prize-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
body[data-view="admin"] table { min-width:720px; }
body[data-view="admin"] th:first-child,
body[data-view="admin"] td:first-child { width:28%; min-width:200px; }
body[data-view="admin"] td:last-child .btn { margin:var(--s1); }