/* =====================================================================
   GameCosts26.ascx.css - what a game costs (KG/Claude 10/3/2026)
   A white card on the night surface of the Home/game pages, like the open-league cards. Colors are --sw-* only; the amounts wear the game's color via --sw-theme.
   Everything is scoped to .gc26-*.
   ===================================================================== */

.gc26 {
  box-sizing: border-box;
  padding: 24px 26px 22px;
  text-align: left;
  color: var(--sw-ink);
  background: var(--sw-surface);
  border-top: 4px solid var(--sw-red);
  border-radius: 16px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .22);
}
.gc26 *, .gc26 *::before, .gc26 *::after { box-sizing: border-box; }
.gc26 h3 { margin: 0 0 4px; font: 700 30px/1.05 var(--sw-font-cond); letter-spacing: .01em; color: var(--sw-navy); }
.gc26-sub { margin: 0 0 18px; font-size: 15px; color: var(--sw-muted); }

.gc26-rows { margin: 0 0 16px; padding: 0; list-style: none; border-top: 1px solid var(--sw-line); }
.gc26-rows li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: center; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--sw-line); }
.gc26-amt { font: 700 38px/1 var(--sw-font-cond); letter-spacing: .01em; color: var(--sw-theme); }
.gc26-amt.is-free { color: var(--sw-success); }
.gc26-amt.is-plus { color: var(--sw-success); font-size: 30px; }
.gc26-what { font-size: 15px; line-height: 1.5; color: var(--sw-ink-soft); }
.gc26-what b { display: block; font-size: 16px; color: var(--sw-ink); }

.gc26-how { margin: 0 0 18px; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--sw-ink-soft); background: var(--sw-panel); border-radius: var(--sw-radius); }
.gc26-how b { color: var(--sw-ink); }

.gc26-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gc26 a.gc26-btn, .gc26 input.gc26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  font: 700 15px var(--sw-font-sans);
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--sw-radius);
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.gc26 .gc26-btn:active { transform: translateY(1px); }
.gc26 .gc26-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--sw-theme) 45%, transparent); outline-offset: 2px; }
.gc26 .gc26-btn-primary {
  color: var(--sw-surface);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sw-red) 92%, white), color-mix(in srgb, var(--sw-red) 82%, black));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--sw-red) 30%, transparent);
}
.gc26 a.gc26-btn-primary:hover, .gc26 input.gc26-btn-primary:hover { color: var(--sw-surface); background: linear-gradient(180deg, color-mix(in srgb, var(--sw-red) 82%, white), var(--sw-red)); }
.gc26 .gc26-btn.gc26-btn-ghost { color: var(--sw-navy); background: var(--sw-surface); border-color: var(--sw-line-strong); }
.gc26 .gc26-btn.gc26-btn-ghost:hover { background: var(--sw-panel); }
.gc26-fine { margin: 12px 0 0; font-size: 13px; color: var(--sw-muted); }

@media (max-width: 640px) {
  .gc26 { padding: 18px 16px 16px; border-radius: 14px; }
  .gc26-rows li { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; }
  .gc26-amt { font-size: 32px; }
  .gc26 a.gc26-btn, .gc26 input.gc26-btn { width: 100%; }
}