/* ============================================================
   PASSGRID DEMO — shared stylesheet
   Palette: warm beige / dark ink / crimson accent / cream cards
   Fonts:   Georgia (headings), Calibri (body/UI)
   Used by: matches.html, grid.html, winner.html, timeout.html,
            pick-locked.html
   (insufficient-funds.html retired to _archive/ — not part of the live flow)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #F3EFE4;
  --header-bg:   #1E1B16;
  --card-bg:     #EAE4D3;
  --accent:      #B4223B;
  --accent-dark: #8A1A2E;
  --text:        #1E1B16;
  --text-light:  #6B5F52;
  --border:      #C9BFB0;
  --shadow:      rgba(30,27,22,0.15);
  --radius:      12px;
  --font-serif:  Georgia, 'Times New Roman', serif;
  --font-sans:   Calibri, Arial, sans-serif;
  --gold-prize:  #F3C74E;
  --green-win:   #4C7A3D;
  --teal:        #2E6E6B;

  /* Grid-specific */
  --cell-taken:      #C9BFB0;
  --cell-winner:     #B4223B;
  --cell-yours:      #1E1B16;
  --cell-open:       #EAE4D3;
  --cell-border:     #C9BFB0;
  --grid-bg:         #F3EFE4;
  --cell-text-taken: #6B5F52;
  --cell-text-open:  #1E1B16;
}

html, body { height: 100%; }

body {
  background-color: #DAD3C2; /* surrounds the phone frame on desktop */
  color: var(--text);
  font-family: var(--font-sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* ── Games nav — sits above the phone frame, links out to the other
   live ScoreBox games. Same row on every page so switching games never
   requires leaving the "device" metaphor behind. ── */
.games-nav {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 10px 12px;
}

.games-nav a {
  color: var(--text-light);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.games-nav a:hover,
.games-nav a:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: rgba(30,27,22,0.05);
  outline: none;
}

.games-nav a.current {
  color: #fff;
  background: var(--header-bg);
  border-color: var(--header-bg);
}

@media (max-width: 380px) {
  .games-nav { gap: 2px; padding: 8px 6px; }
  .games-nav a { font-size: 0.64rem; padding: 4px 7px; letter-spacing: 0.2px; }
}

/* ── Phone frame shell ──
   Every page renders inside this fixed-width "device" so the journey
   feels consistent whether viewed stand-alone or hopping between pages. */
.phone-frame {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 0 1px rgba(30,27,22,0.06);
}

@media (min-width: 431px) {
  body { padding: 24px 12px; background: #DAD3C2; }
  .phone-frame {
    min-height: 844px;
    max-height: 844px;
    border-radius: 34px;
    overflow-y: auto;
    box-shadow: 0 18px 48px rgba(30,27,22,0.35), 0 0 0 8px #14110D, 0 0 0 10px #3A342B;
  }
}

/* ── Shared site header (used by winner / timeout / pick-locked) ── */
.site-header {
  background: var(--header-bg);
  color: #fff;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.site-logo {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.site-nav a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
}

.site-nav a:hover { color: #fff; }

.badge-demo {
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}

/* ── Shared site footer ── */
.site-footer {
  padding: 14px 24px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-light);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}

.site-footer a {
  color: var(--text-light);
  text-decoration: underline;
}

/* ── Live indicator dot — used next to fixture/match names on any
   in-progress gameplay screen (PassGrid, Pundit5, Just Call It) ── */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 6px;
  animation: pulse 1.4s infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── Generic status screen (timeout / pick-locked) ── */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.status-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 28px;
  gap: 4px;
}

.status-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
}

.status-icon.red   { color: var(--accent); border-color: var(--accent); }
.status-icon.amber { color: #B8862E; border-color: #D8B96A; }

.status-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--text);
  margin-bottom: 14px;
}

.status-body {
  font-size: 0.94rem;
  color: var(--text-light);
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: 28px;
}

.btn-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 300px;
}

.btn-primary, .btn-secondary {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.1s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(180,34,59,0.35);
}

.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); }

.btn-secondary {
  background: var(--card-bg);
  color: var(--text);
  border: 1.5px solid var(--border);
}

.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ── Winner celebration screen ── */
.winner-celebration {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px 32px;
}

.winner-badge {
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
}

.winner-celebration .status-title {
  font-size: 1.9rem;
  margin-bottom: 10px;
}

.winner-amount-tag {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: bold;
  color: var(--gold-prize);
  text-shadow: 0 2px 0 rgba(30,27,22,0.15);
  margin: 8px 0 4px;
}

.winner-pool-info {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 24px;
}

.winner-breakdown {
  width: 100%;
  max-width: 340px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 28px;
  box-shadow: 0 2px 8px var(--shadow);
}

.wb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.wb-row:last-child { border-bottom: none; }

.wb-row span:first-child { color: var(--text-light); }
.wb-row span:last-child { font-weight: bold; color: var(--text); }

.winner-celebration .btn-group { max-width: 320px; }