:root {
  color-scheme: light;
  --ink: #25243b;
  --muted: #65687a;
  --deep: #24253f;
  --deep-2: #343455;
  --mint: #66e5c3;
  --mint-light: #e5fbf4;
  --line: #e3e4eb;
  color: var(--ink);
  background: #f5f6f9;
}
body { color: var(--ink); background: #f5f6f9; }
button:focus-visible, input:focus-visible, select:focus-visible { outline-color: #28bd99; }
.app { padding-top: 16px; }
.top {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 0 0 22px;
  padding: 13px 17px;
  min-height: 64px;
  box-shadow: 0 4px 18px #1b1a3910;
}
.brand { color: var(--deep); font-size: 1.03rem; letter-spacing: -.015em; }
.pill {
  background: var(--mint-light);
  border: 0;
  color: #176e5a;
  border-radius: 8px;
  font-weight: 750;
}
h1, .fixtures h2, .history h2, .settings-card h2 { color: var(--deep); }
h1 { letter-spacing: -.035em; font-weight: 800; }
.muted, .bottom p { color: var(--muted); }
.timer {
  color: #fff;
  background: var(--deep);
  border: 0;
  border-radius: 22px;
  box-shadow: 0 14px 28px #24253f2b;
}
.age-picker, .duration { color: #ced6e8; }
.age-picker select {
  color: #fff;
  background: var(--deep-2);
  border: 1px solid #6c718e;
  border-radius: 10px;
}
.phase { color: var(--mint); letter-spacing: .08em; }
.clock { color: #fff; text-shadow: 0 0 32px #66e5c330; }
.progress { background: #4a4a67; height: 7px; }
.progress>span { background: var(--mint); }
.possession { background: #ffffff19; color: #fff; }
.possession button { color: var(--mint); }
.primary, .save-game {
  color: #16372f;
  background: var(--mint);
  border-radius: 12px;
  box-shadow: none;
}
.primary:hover, .save-game:hover { background: #94f2d8; }
.secondary {
  color: var(--deep);
  background: #e9eaf2;
  border: 1px solid #d8d9e4;
  border-radius: 12px;
}
.secondary:hover { background: #dbdeeb; }
.timer .secondary { color: #fff; background: #ffffff19; border-color: #ffffff52; }
.timer .secondary:hover { background: #ffffff29; }
.score, .fixtures, .history, .settings-card {
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 4px 18px #1b1a3910;
}
.score { padding: 18px 14px; }
.team input { color: var(--ink); border-color: #a7aabb; }
.number { color: var(--deep); }
.dash { color: #afb3c2; }
.logo-btn, .scorebuttons button { border-color: #d6d8e1; color: var(--deep); }
.scorebuttons button.plus { color: #16372f; background: var(--mint); border-color: var(--mint); }
.scorebuttons button:disabled { opacity: .36; }
.score-lock { color: var(--deep); }
.score-lock button, .clock-footer button, .fixture-row button {
  color: var(--deep);
  background: #fff;
  border: 1px solid #cbd0db;
  border-radius: 10px;
}
.kickoff-status, .kickoff-status strong { color: var(--deep); }
.bottom-menu {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 6px 12px calc(8px + env(safe-area-inset-bottom));
}
.bottom-menu-inner {
  padding: 5px;
  gap: 3px;
  background: var(--deep);
  border-radius: 18px;
  box-shadow: 0 8px 26px #15172d52;
}
.bottom-menu button { color: #e5e7f3; border-radius: 13px; }
.bottom-menu button[aria-current="page"] {
  color: #16372f;
  background: var(--mint);
  box-shadow: none;
}
.fixtures-head p, .history-head p, .fixture-status, .fixture-row small,
.saved-game small, .empty-history, .settings-card p { color: var(--muted); }
.fixture-row, .saved-game { border-color: var(--line); }
.fixture-row button:disabled { color: #858999; background: #f2f3f6; }
.link, .saved-actions button, .settings-card .calendar-current,
.settings-card .setting-message, .save-status { color: #176e5a; }
.saved-actions .remove { color: var(--muted); }
.settings-card input { color: var(--ink); background: #fff; border-color: #bcc1cf; }
.rules-dialog { color: var(--ink); background: #f5f6f9; }
.rules-view .rules-panel { max-width: none; padding: 0 0 18px; }
.rules-view .rules-head { top: 0; }
.rules-dialog::backdrop, .modal::backdrop { background: #191a2dbb; }
.rules-head { background: #f5f6f9; border-bottom: 1px solid var(--line); }
.rules-head h2 { color: var(--deep); }
.rules-head button, .rules-chips button {
  color: var(--deep);
  background: #fff;
  border-color: #cbd0db;
  border-radius: 12px;
}
.rules-intro, .rules-source, .rules-empty { color: var(--muted); }
.rules-panel input[type=search] { color: var(--ink); background: #fff; border-color: #bcc1cf; }
.rules-category h3 { color: #176e5a; }
.rule-item { background: #fff; border-color: var(--line); border-radius: 14px; }
.rule-item p { color: #45495a; }
.rules-source a { color: #176e5a; font-weight: 750; }
.modal { color: var(--ink); background: #fff; border-color: var(--line); }
.modal h2 { color: var(--deep); }
.modal p { color: var(--muted); }
.live-card { margin-top: 12px; padding: 14px; color: var(--deep); background: var(--mint-light); border: 1px solid #bdeee1; border-radius: 14px; }
.live-card p { margin: 4px 0 0; color: var(--muted); font-size: .86rem; overflow-wrap: anywhere; }
.live-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.live-actions .btn { min-height: 46px; width: 100%; padding: 9px 11px; font-size: .9rem; }
.live-actions:not(.active) #liveShare { grid-column: 1 / -1; }
.live-actions [hidden] { display: none !important; }
.live-actions #liveManage { grid-column: 1 / -1; }
#managedLivePanel { margin-top: 12px; padding-top: 10px; border-top: 1px solid #bdeee1; }
.managed-live-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid #d5e9e3; }
.managed-live-row span { overflow-wrap: anywhere; }
.managed-live-row button { flex: 0 0 auto; min-height: 40px; border: 1px solid #375a4f; border-radius: 9px; background: #fff; color: #173a34; padding: 7px 12px; font: inherit; font-weight: 700; }
.live-stop { grid-column: 1 / -1; border: 1px solid #bdc4d1; background: #fff; color: #723538; border-radius: 12px; font-weight: 750; }
.live-viewer { max-width: 620px; margin: 15vh auto 0; padding: 28px 20px; text-align: center; color: #fff; background: var(--deep); border-radius: 24px; box-shadow: 0 18px 50px #1b1a3944; }
.live-viewer-mark { color: var(--mint); font-weight: 850; letter-spacing: .14em; font-size: .82rem; }
.live-viewer h2 { color: #fff; font-size: clamp(1.2rem, 4vw, 1.8rem); margin: 16px 0 12px; }
.viewer-score { display: flex; align-items: center; justify-content: center; gap: 18px; color: #fff; font-size: clamp(4rem, 17vw, 7rem); font-weight: 850; line-height: 1; }
.viewer-score b { color: var(--mint); font-size: .55em; }
.viewer-phase { margin-top: 22px; color: var(--mint); font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.viewer-clock { margin-top: 6px; color: #fff; font: 850 clamp(2.2rem, 10vw, 4rem)/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.live-viewer p { margin: 18px 0 0; color: #cbd2e5; font-size: .85rem; }
@media (max-width: 600px) { .live-viewer { margin-top: 10vh; } }
.toss-dialog {
  color: #fff;
  background: radial-gradient(circle at 50% 47%, #454869 0%, #24253f 60%, #191b32 100%);
}
.toss-dialog::backdrop { background: #191b32; }
.toss-heading, .toss-sub { color: var(--mint); }
.toss-dismiss { color: #fff; background: #ffffff19; border-color: #ffffff65; }
.toss-logo { border-radius: 18px; box-shadow: 0 20px 52px #11132799; }
@media (max-width: 600px) {
  .app { padding-top: 10px; }
  .top { min-height: 54px; margin: 0 0 10px; padding: 8px 11px; }
  .brand { font-size: clamp(.78rem, 3.8vw, 1rem); line-height: 1.15; }
  .pill { white-space: nowrap; font-size: .75rem; padding: 5px 6px; }
  .timer, .score { border-radius: 16px; }
  .bottom-menu button { min-height: 50px; }
}