/* ═══════════════════════════════════════════════════════════════════════
   AutoBattle — 80s/90s Trading Card Game Theme
   Pure CSS, no external resources. Loaded via inc/nav.php (cached).
═══════════════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --bg:          #07081a;
  --surface:     #0d0e22;
  --surface2:    #12132c;
  --border:      #212240;
  --bdr-g:       #a07818;   /* antique gold border */
  --bdr-g-hi:    #d0a028;   /* bright gold highlight */
  --text:        #d4cfe8;   /* warm card-stock white */
  --text-g:      #d0a028;   /* gold text */
  --muted:       #8892b8;
  --accent:      #f97316;   /* brand orange — unchanged */
  --danger:      #c02828;
  --success:     #22c55e;
  --c-common:    #9ca3af;
  --c-uncommon:  #4ade80;
  --c-rare:      #60a5fa;
  --c-mythic:    #c084fc;
  --c-legendary: #fbbf24;
  --c-infinite:  #22d3ee;
  --c-token:     #f472b6;
  /* Tells the browser this site already has its own deliberate dark theme,
     so it stops auto-inverting/graying anything it thinks is "unstyled"
     (mobile browsers' forced-dark heuristics do this to any element they
     can't otherwise explain -- see the html/body notes below, this is the
     other half of the same fix). Also fixes native form controls/scrollbars
     to render dark instead of a jarring light-theme default. */
  color-scheme: dark;
}

/* html/body never had their default 8px user-agent margin reset, and html
   itself never had a background set at all -- on a phone this showed up as
   persistent grey bars hugging every edge of the page in both orientations
   (reported by Fry Guy 2026-07-27: "large grey bars top/bottom and/or
   sides" -- present in portrait AND landscape is the tell that it's a
   constant, orientation-independent gap like a margin, not a viewport-
   height quirk). Fixing both here, once, for every page instead of
   per-element. */
html, body { margin: 0; }
html { background: var(--bg); min-height: 100%; }

/* Follow-up (Fry Guy, same day): the margin/background fix above wasn't
   what he actually meant -- on a landscape phone, the page's own <main>
   was still capping itself to whatever fixed max-width that specific page
   happens to use (560px-1400px across the site, each page's own inline
   <style>, see game/decks.php etc.) -- deliberate on desktop for
   readability, but on a landscape phone that constraint is what's leaving
   a big unused strip down one side. One central override here beats every
   page's own later-loaded main{} rule (extra selector specificity, not
   !important) rather than editing 45 individual per-page <style> blocks.
   Second follow-up (kkoechel, same day): a plain max-width breakpoint
   can't actually distinguish "a big phone in landscape" from "a real
   desktop window resized narrow" -- both land in the same few-hundred-px
   range, and a real device confirmed a landscape width wide enough to
   slip past the original 980px cutoff entirely. pointer:coarse (touch-
   primary input) is the right signal instead of a width guess: it's true
   for phones/tablets in any orientation/size and false for every real
   desktop/laptop (even a narrow, resized browser window still has a
   mouse), so this can't misfire either direction regardless of how wide a
   given touch device's landscape viewport turns out to be. */
@media (pointer: coarse) {
  html body main { max-width: 100%; }
}

/* ── Body — dark fantasy texture background ────────────────────────────── */
body {
  background-color: var(--bg);
  background-image: linear-gradient(rgba(5,6,18,.7), rgba(5,6,18,.7)), url('/img/body-bg.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  color: var(--text);
  font-family: system-ui, sans-serif;
  min-height: 100vh;
  /* Modern override: 100vh is calculated inconsistently across mobile
     browsers as their address bar shows/hides, sometimes falling short of
     the actual visible area by exactly that much. 100dvh tracks the real,
     current visible viewport -- browsers that don't understand it simply
     ignore the line and keep the 100vh fallback above. */
  min-height: 100dvh;
}

::selection { background: rgba(160,120,24,.38); color: #f0e0b8; }

/* ── Headings — Impact for card-name typography ───────────────────────── */
h1, h2 {
  font-family: Impact, 'Arial Black', 'Haettenschweiler', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Button base ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem 1rem;
  border-radius: 4px;
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: .78rem;
  font-weight: 400;         /* Impact is inherently bold */
  text-transform: uppercase;
  letter-spacing: .07em;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid;
  transition: transform .08s, box-shadow .08s, background .08s;
  white-space: nowrap;
}

/* ── Primary / Orange — fire-gem action button ────────────────────────── */
.btn-primary, .btn-orange {
  background: linear-gradient(180deg, #ff7020 0%, #c04000 55%, #962e00 100%);
  border-color:        #ff8428;
  border-bottom-color: #561800;
  border-right-color:  #561800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
  box-shadow: 0 3px 0 #461200, 0 4px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover, .btn-orange:hover {
  background: linear-gradient(180deg, #ff8030 0%, #d04600 55%, #a43400 100%);
  box-shadow: 0 3px 0 #461200, 0 4px 14px rgba(255,110,20,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:active, .btn-orange:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #461200, inset 0 2px 4px rgba(0,0,0,.35);
}
.btn-primary:disabled, .btn-orange:disabled,
.btn-primary[disabled], .btn-orange[disabled] {
  background: #18182c; border-color: #2c2c44; color: #40405c;
  box-shadow: none; cursor: default; pointer-events: none; text-shadow: none;
}

/* ── Blue — mana-well action button ──────────────────────────────────── */
.btn-blue {
  background: linear-gradient(180deg, #2258d8 0%, #1040a0 55%, #0c3080 100%);
  border-color:        #3a78ff;
  border-bottom-color: #082060;
  border-right-color:  #082060;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  box-shadow: 0 3px 0 #061848, 0 4px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-blue:hover {
  background: linear-gradient(180deg, #3068e8 0%, #1850b0 55%, #103898 100%);
  box-shadow: 0 3px 0 #061848, 0 4px 14px rgba(50,100,255,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-blue:active { transform: translateY(2px); box-shadow: 0 1px 0 #061848; }
.btn-blue:disabled, .btn-blue[disabled] {
  background: #18182c; border-color: #2c2c44; color: #40405c;
  box-shadow: none; cursor: default; pointer-events: none; text-shadow: none;
}

/* ── Ghost — gold-foil secondary button ───────────────────────────────── */
.btn-ghost {
  background: linear-gradient(180deg, #1c1c3a 0%, #101028 100%);
  border-color:        var(--bdr-g);
  border-bottom-color: #4a2e04;
  border-right-color:  #4a2e04;
  color: var(--text-g);
  text-shadow: 0 0 6px rgba(208,160,40,.3);
  box-shadow: 0 2px 0 #2e1c02, 0 3px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-ghost:hover {
  border-color: var(--bdr-g-hi);
  color: #f0c050;
  box-shadow: 0 2px 0 #2e1c02, 0 0 14px rgba(208,160,40,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-ghost:active { transform: translateY(1px); box-shadow: 0 0 0 #2e1c02; }

/* ── Danger / Red ─────────────────────────────────────────────────────── */
.btn-danger, .btn-red {
  background: linear-gradient(180deg, #280c0c 0%, #160404 100%);
  border-color:        #7a1e1e;
  border-bottom-color: #380404;
  border-right-color:  #380404;
  color: #f87171;
  box-shadow: 0 2px 0 #1e0202, inset 0 1px 0 rgba(255,255,255,.05);
}
.btn-danger:hover, .btn-red:hover {
  background: linear-gradient(180deg, #381010 0%, #1e0606 100%);
  border-color: #b02828;
  color: #fca5a5;
  box-shadow: 0 2px 0 #1e0202, 0 0 10px rgba(200,40,40,.2);
}
.btn-danger:active, .btn-red:active { transform: translateY(1px); }
.btn-danger:disabled, .btn-red:disabled {
  background: #18182c; border-color: #2c2c44; color: #40405c;
  box-shadow: none; cursor: default;
}

/* ── Sign-in (Google — keep white/recognizable) ───────────────────────── */
.btn-signin {
  background: linear-gradient(180deg, #fafafa 0%, #e4e4e4 100%);
  border-color:        #c4c4c4;
  border-bottom-color: #909090;
  border-right-color:  #909090;
  color: #1f1f1f;
  text-shadow: none;
  font-family: system-ui, sans-serif; /* keep Google button readable */
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 2px 0 #888, 0 3px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.85);
}
.btn-signin:hover {
  background: linear-gradient(180deg, #fff 0%, #ececec 100%);
  box-shadow: 0 2px 0 #888, 0 3px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn-signin:active { transform: translateY(1px); }

/* ── Panel borders — card-frame gold ─────────────────────────────────── */
.panel      { border-color: rgba(160,120,24,.48); }
.deck-card  { border-color: rgba(160,120,24,.38); }
.deck-card:hover { border-color: rgba(160,120,24,.72); }
.cohort-card { border-color: rgba(160,120,24,.32); }
.modal      { border-color: rgba(160,120,24,.55); }

/* ── Inputs — gold focus ring ─────────────────────────────────────────── */
input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: var(--bdr-g);
  outline: none;
  box-shadow: 0 0 0 2px rgba(160,120,24,.18);
}

/* ── Tables — card-game header style ─────────────────────────────────── */
th {
  font-family: Impact, 'Arial Black', sans-serif;
  letter-spacing: .06em;
  font-size: .68rem;
}