/* ─── Pico CSS variable overrides (light) ─── */
:root {
  --pico-font-family:                          "Nunito Sans", sans-serif;
  --pico-font-size:                            1rem;
  --pico-border-radius:                        0.625rem;   /* 10px */

  --pico-primary:                              #0d6efd;
  --pico-primary-background:                  #0d6efd;
  --pico-primary-border:                       #0d6efd;
  --pico-primary-hover:                        #0b5ed7;
  --pico-primary-hover-background:             #0b5ed7;
  --pico-primary-focus:                        rgba(13, 110, 253, 0.25);
  --pico-primary-inverse:                      #ffffff;

  --pico-secondary:                            #e9ecef;
  --pico-secondary-background:                 #e9ecef;
  --pico-secondary-border:                     #dddddd;
  --pico-secondary-hover-background:           #d8dbe0;
  --pico-secondary-inverse:                    #333333;

  --pico-color:                                #222222;
  --pico-muted-color:                          #666666;
  --pico-border-color:                         #dddddd;

  --pico-form-element-background-color:        #ffffff;
  --pico-form-element-border-color:            #cccccc;
  --pico-form-element-color:                   #222222;
  --pico-form-element-placeholder-color:       #666666;
  --pico-form-element-active-border-color:     #0d6efd;
  --pico-form-element-focus-color:             rgba(13, 110, 253, 0.25);
}

/* ─── Pico CSS variable overrides (dark) ─── */
[data-theme="dark"],
body.force-dark {
  --pico-primary:                              #4a6fff;
  --pico-primary-background:                  #4a6fff;
  --pico-primary-border:                       #4a6fff;
  --pico-primary-hover:                        #3a5fdf;
  --pico-primary-hover-background:             #3a5fdf;
  --pico-primary-focus:                        rgba(74, 111, 255, 0.25);
  --pico-primary-inverse:                      #ffffff;

  --pico-secondary:                            #2a2a3e;
  --pico-secondary-background:                 #2a2a3e;
  --pico-secondary-border:                     #3a3a5c;
  --pico-secondary-hover-background:           #333350;
  --pico-secondary-inverse:                    #c0c0d0;

  --pico-color:                                #e0e0f0;
  --pico-muted-color:                          #9090b0;
  --pico-border-color:                         #3a3a5c;

  --pico-form-element-background-color:        #252538;
  --pico-form-element-border-color:            #4a4a6a;
  --pico-form-element-color:                   #e0e0f0;
  --pico-form-element-placeholder-color:       #9090b0;
  --pico-form-element-active-border-color:     #4a6fff;
  --pico-form-element-focus-color:             rgba(74, 111, 255, 0.25);
}

/* ─── CSS Variables ─── */
:root {
  --cell-size:      44px;
  --card-bg:        #ffffff;
  --card-shadow:    0 15px 30px rgba(0,0,0,0.4);
  --text:           #222222;
  --text-muted:     #666666;
  --border:         #dddddd;
  --btn-bg:         #0d6efd;
  --btn-text:       #ffffff;
  --btn-sec-bg:     #e9ecef;
  --btn-sec-text:   #333333;
  --num-bg:         #eef1ff;
  --num-border:     #b0bcff;
  --num-text:       #0d6efd;
  --header-bg:      #0d6efd;
  --header-text:    #ffffff;
  --square-bg:      #f8f9fa;
  --square-hover:   #dde4ff;
  --game-card-bg:   #f8f9fa;
  --game-card-sel:  #dde4ff;
  --input-bg:       #ffffff;
  --input-border:   #cccccc;
  --link:           #0d6efd;
  --body-bg:        #2a2a3e;
}

/* System dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --card-bg:        #1e1e2e;
    --card-shadow:    0 15px 30px rgba(0,0,0,0.7);
    --text:           #e0e0f0;
    --text-muted:     #9090b0;
    --border:         #3a3a5c;
    --btn-bg:         #4a6fff;
    --btn-sec-bg:     #2a2a3e;
    --btn-sec-text:   #c0c0d0;
    --num-bg:         #252540;
    --num-border:     #4a4a8e;
    --num-text:       #7a9fff;
    --header-bg:      #3a5fff;
    --square-bg:      #252538;
    --square-hover:   #303055;
    --game-card-bg:   #252538;
    --game-card-sel:  #2a2a55;
    --input-bg:       #252538;
    --input-border:   #4a4a6a;
    --link:           #7a9fff;
    --body-bg:        #12121e;
  }
}

/* Manual overrides */
body.force-dark {
  --card-bg:        #1e1e2e;
  --card-shadow:    0 15px 30px rgba(0,0,0,0.7);
  --text:           #e0e0f0;
  --text-muted:     #9090b0;
  --border:         #3a3a5c;
  --btn-bg:         #4a6fff;
  --btn-sec-bg:     #2a2a3e;
  --btn-sec-text:   #c0c0d0;
  --num-bg:         #252540;
  --num-border:     #4a4a8e;
  --num-text:       #7a9fff;
  --header-bg:      #3a5fff;
  --square-bg:      #252538;
  --square-hover:   #303055;
  --game-card-bg:   #252538;
  --game-card-sel:  #2a2a55;
  --input-bg:       #252538;
  --input-border:   #4a4a6a;
  --link:           #7a9fff;
  --body-bg:        #12121e;
}
body.force-light {
  --card-bg:        #ffffff;
  --card-shadow:    0 15px 30px rgba(0,0,0,0.4);
  --text:           #222222;
  --text-muted:     #666666;
  --border:         #dddddd;
  --btn-bg:         #0d6efd;
  --btn-text:       #ffffff;
  --btn-sec-bg:     #e9ecef;
  --btn-sec-text:   #333333;
  --num-bg:         #eef1ff;
  --num-border:     #b0bcff;
  --num-text:       #0d6efd;
  --header-bg:      #0d6efd;
  --square-bg:      #f8f9fa;
  --square-hover:   #dde4ff;
  --game-card-bg:   #f8f9fa;
  --game-card-sel:  #dde4ff;
  --input-bg:       #ffffff;
  --input-border:   #cccccc;
  --link:           #0d6efd;
  --body-bg:        #2a2a3e;
}

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

/* ─── Body ─── */
body {
  min-height: 100vh;
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
  color: var(--text);
  padding: 20px 16px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/resources/images/bg.jpg") center / cover no-repeat var(--body-bg);
}

/* ─── Accessibility ─── */
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}

/* ─── Dark Mode Toggle ─── */
#dark-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 200;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.2s, color 0.2s;
}
#dark-toggle:hover { opacity: 0.85; }

/* ─── Card ─── */
.card {
  background: var(--card-bg);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
  max-width: 640px;
  width: 100%;
  padding: 24px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
  transition: background 0.2s;
}

/* ─── Section titles ─── */
.section-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  width: 100%;
}

/* ─── Week Navigation ─── */
.week-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
}
.week-info {
  flex: 1;
  text-align: center;
}
#week-label {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
#season-year-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}
.nav-btn {
  padding: 8px 14px;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Season Type Toggle ─── */
.season-type-toggle {
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
}
.toggle-btn {
  padding: 7px 20px;
  font-size: 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--btn-sec-bg);
  color: var(--btn-sec-text);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.toggle-btn.active {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-bg);
}
.toggle-btn:hover:not(.active) { opacity: 0.8; }

/* ─── Loading / Error ─── */
.loading-msg, .error-msg {
  width: 100%;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: var(--text-muted);
}
.error-msg { color: #dc3545; }

/* ─── Game List ─── */
.game-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

/* ─── Game Card ─── */
.game-card {
  width: 100%;
  background: var(--game-card-bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.game-card:hover {
  border-color: var(--btn-bg);
  background: var(--square-hover);
  transform: translateY(-1px);
}
.game-card:active { transform: translateY(0); }
.game-card.selected {
  border-color: var(--btn-bg);
  background: var(--game-card-sel);
}
.game-card-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.game-card-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 70px;
}
.game-team-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.game-abbrev {
  font-size: 14px;
  font-weight: 700;
}
.game-name {
  font-size: 11px;
  color: var(--text-muted);
}
.game-at {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.game-time {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 5px;
}

/* ─── Section Divider ─── */
.section-divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
}

/* ─── No-game message ─── */
.no-game-hint {
  text-align: center;
  padding: 10px 0;
  font-size: 15px;
  color: var(--text-muted);
}

/* ─── Teams Section ─── */
.teams-section {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.team-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 150px;
}
.team-logo { max-width: 90px; height: auto; }
.team-block h2 { font-size: 16px; }
.team-name { font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.3; }

/* ─── Number Cells ─── */
.num-row {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.num-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 32px;
  border-radius: 6px;
  background: var(--num-bg);
  border: 1px solid var(--num-border);
  color: var(--num-text);
  font-size: 16px;
  font-weight: 700;
}
.num-cell.spinning {
  animation: spin-shake 0.15s infinite;
  color: var(--text-muted);
}
.num-cell.landed { animation: pop 0.25s ease-out; }

@keyframes spin-shake {
  0%   { transform: translateY(-2px) scale(1.05); }
  50%  { transform: translateY(2px)  scale(0.95); }
  100% { transform: translateY(-2px) scale(1.05); }
}
@keyframes pop {
  0%   { transform: scale(1.35); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1);    }
}

/* ─── Buttons ─── */
/* Pico handles base styles, focus ring, disabled state — we add our colours + motion */
button {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 22px;
  border-radius: 10px;
  cursor: pointer;
  /* colours */
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-bg);
  /* motion */
  transition: opacity 0.15s, transform 0.1s, background 0.15s;
}
button:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }

button.secondary {
  background: var(--btn-sec-bg);
  color: var(--btn-sec-text);
  border-color: var(--border);
}
button.secondary:hover:not(:disabled) {
  background: var(--btn-sec-bg);  /* keep fill; let opacity + transform do the work */
}
button.danger { color: #dc3545; }

#btn { font-size: 17px; padding: 14px 28px; }

/* ─── Share Section ─── */
#share-section {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── Generic Section ─── */
section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
section h3 {
  font-size: 17px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ─── Download ─── */
.download-section { align-items: center; text-align: center; }
.download-section a { color: var(--link); font-size: 15px; text-decoration: none; }
.download-section a:hover { text-decoration: underline; }

/* ─── Names ─── */
/* Pico handles input/textarea base styling via its variables */
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ─── Squares Grid ─── */
.grid-scroll {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}
.squares-grid {
  display: grid;
  grid-template-columns: repeat(11, var(--cell-size));
  grid-template-rows:    repeat(11, var(--cell-size));
  gap: 2px;
  width: fit-content;
  margin: 0 auto;
}
.grid-cell {
  width: var(--cell-size);
  height: var(--cell-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 10px;
  text-align: center;
  overflow: hidden;
  word-break: break-word;
  padding: 2px;
  line-height: 1.2;
}
.corner-cell {
  background: var(--square-bg);
  flex-direction: column;
  font-size: 8px;
  color: var(--text-muted);
  gap: 1px;
}
.corner-cell span { display: block; }
.header-cell {
  background: var(--header-bg);
  color: var(--header-text);
  font-weight: 700;
  font-size: 15px;
}
.square-cell {
  background: var(--square-bg);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
  font-size: 9px;
  color: var(--text);
}
.square-cell:hover { background: var(--square-hover); }

/* ─── Winner Highlights (legend only — grid cells use inline styles) ─── */
.winner-q1 { background: #ffd700; color: #333; }
.winner-q2 { background: #a8c8ff; color: #333; }
.winner-q3 { background: #ffa07a; color: #333; }
.winner-q4 { background: #4caf50; color: #fff; }

/* ─── Scores Header ─── */
.scores-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  gap: 10px;
  flex-wrap: wrap;
}
.scores-header h3 {
  border-bottom: none;
  padding-bottom: 0;
}
.scores-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
#fetch-scores-btn {
  font-size: 12px;
  padding: 5px 12px;
}
.score-status-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  display: inline-block;
}
.score-status-badge:empty { display: none; }
.score-status-badge.live {
  background: #dc3545;
  color: #ffffff;
  animation: pulse-badge 1.5s ease-in-out infinite;
}
.score-status-badge.final {
  background: var(--num-bg);
  color: var(--text-muted);
}
.score-status-badge.scheduled {
  background: var(--square-bg);
  color: var(--text-muted);
}
.score-status-badge.error {
  background: #fff3cd;
  color: #856404;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ─── Score Tracker ─── */
.quarters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 420px) {
  .quarters { grid-template-columns: repeat(4, 1fr); }
}
.quarter-input {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}
.quarter-input label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}
.quarter-input input {
  width: 100%;
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}
.quarter-input input:focus { outline: 2px solid var(--btn-bg); }
.quarter-input input::placeholder { font-size: 11px; color: var(--text-muted); }

/* ─── Legend ─── */
.legend { display: flex; gap: 6px; flex-wrap: wrap; }
.legend-item {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* ─── Active game wrapper ─── */
#active-game-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

/* ─── Participant Count Section ─── */
.count-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 220px;
  overflow-x: hidden;        /* clip to rounded corners */
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--square-bg);
  transition: background 0.15s;
}
.count-row:last-child { border-bottom: none; }
.count-row:nth-child(even) { background: var(--card-bg); }
.count-name {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.count-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.count-bar-wrap {
  width: 64px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.count-bar {
  height: 100%;
  background: var(--btn-bg);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.count-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 20px;
  text-align: right;
}

/* ─── Responsive / Mobile ─── */

/* Tablets and large phones: shrink card padding a touch */
@media (max-width: 600px) {
  .card { padding: 20px 14px 28px; }
  .game-card-team { min-width: 60px; }
  .game-team-logo { width: 36px; height: 36px; }
}

/* Phones: scale the grid to fit, tighten all padding */
@media (max-width: 540px) {
  :root {
    /* Exact fit: (viewport - 8px body sides - 8px card sides - 20px gaps) / 11 cells */
    --cell-size: min(44px, calc((100vw - 52px) / 11));
  }

  body  { padding: 10px 8px 40px; }
  .card { padding: 16px 8px 24px; }

  /* Scale grid text with the smaller cells */
  .header-cell { font-size: 12px; }
  .corner-cell { font-size: 6px; }
  .square-cell { font-size: 7px; }

  /* Teams block: allow them to shrink and stack if needed */
  .team-block  { min-width: 110px; }
  .team-logo   { max-width: 70px; }
  .team-name   { font-size: 12px; }

  /* Week nav: tighter buttons so the label has room */
  .nav-btn     { padding: 7px 10px; font-size: 13px; }
  #week-label  { font-size: 16px; }

  /* Score quarter inputs: smaller on mobile */
  .quarter-input input { padding: 5px 2px; font-size: 13px; }
}