@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  /* Wire to Wire dark theme */
  --bg: #08100B;         /* Near-black green — strong contrast for panels */
  --panel: #1B2B20;      /* Brand forest green — card surfaces */
  --panel-2: #274232;    /* Brand primary green — button/keypad backgrounds */
  --line: #324E40;       /* Subtle border */
  --text: #EFE6D0;       /* Cream — primary text */
  --muted: #B08A3E;      /* Brass — secondary text */
  --accent: #B08A3E;     /* Brass — primary accent (constant) */
  --accent-2: #B08A3E;
  --danger: #f43f5e;
  /* The opposite theme, filled into the card of whoever is throwing. A solid
     block of the other colour reads from the oche at a glance, where a thin
     border around the card does not. */
  --active-bg: #EFE6D0;   /* light surface */
  --active-fg: #274232;   /* light text */
  --active-sub: #4A5F4C;  /* labels on that light surface */
  --gold: #B08A3E;
  --on-accent: #08100B;  /* Near-black — readable text on brass */
}

/* Page column, shared by main and the wide overlays so a pop-up always lines up
   with the scoring table behind it. */
:root {
  --page-max: 760px;
  --page-pad: 16px;
}

:root[data-theme="light"] {
  /* Wire to Wire light theme */
  --bg: #EFE6D0;          /* Cream background */
  --panel: #FFFFFF;       /* White — panel surfaces */
  --panel-2: #F5F0E0;     /* Light cream — button/keypad backgrounds */
  --line: #E0D6BC;        /* Subtle border */
  --text: #274232;        /* Forest green — primary text */
  --muted: #5A6F5C;       /* Muted sage — secondary text */
  --accent: #B08A3E;      /* Brass — primary accent (constant) */
  --accent-2: #B08A3E;
  --danger: #e11d48;
  /* Light mode keeps the thrower's card light and sends everyone else dark:
     the single bright card in a dark row marks the turn. */
  --active-bg: #FFFFFF;   /* light surface (the normal light panel) */
  --active-fg: #274232;   /* forest green text */
  --active-sub: #5A6F5C;  /* sage labels, as elsewhere in light mode */
  --gold: #B08A3E;
  --on-accent: #1B2B20;   /* Forest green — readable text on brass */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--page-pad)
    calc(24px + env(safe-area-inset-bottom, 0px));
}

/* ---------- branding header ---------- */
.brand-header {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}
.brand-logo {
  width: 100%;
  max-width: 200px;
  height: auto;
}
.brand-logo[data-theme="light"] { display: none; }
:root[data-theme="light"] .brand-logo[data-theme="dark"] { display: none; }
:root[data-theme="light"] .brand-logo[data-theme="light"] { display: block; }
@media (max-width: 420px) {
  .brand-logo { max-width: 160px; }
}

.panel h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin: 20px 0 8px;
}

.hidden { display: none !important; }

button {
  font: inherit;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  padding: 10px 14px;
  touch-action: manipulation;
  user-select: none;
  transition: transform .08s ease, background .1s ease, box-shadow .1s ease;
}
/* A tap must read as a tap even on buttons (keypad, cricket board) that get
   rebuilt from scratch the instant the click fires - so the press state is
   a snappy, high-contrast flash rather than a subtle transform. !important
   because scoring buttons (pad-btn, mbtn, game-btn.selected, ...) each set
   their own resting background/color at higher specificity than this. */
button:active {
  transform: scale(.92);
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
  box-shadow: 0 0 0 3px rgba(176, 138, 62, .35);
  transition: none;
}
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
button.ghost { background: transparent; }
button.big { width: 100%; padding: 16px; font-size: 18px; margin-top: 24px; }
button:disabled { opacity: .35; cursor: not-allowed; }
button:disabled:active { transform: none; background: var(--panel-2); border-color: var(--line); color: var(--text); box-shadow: none; }

/* ---------- setup ---------- */
.game-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.game-btn { padding: 16px; font-size: 16px; }
.game-btn small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 3px; letter-spacing: .02em; }
.game-btn.selected { background: rgba(176, 138, 62, .15); border-color: var(--accent); color: var(--accent); font-weight: 700; }

.hint { color: var(--muted); font-size: 13px; margin: 10px 2px 0; min-height: 18px; }

.player-inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.player-row { display: flex; gap: 8px; }
.player-row input {
  flex: 1; font: inherit; padding: 12px 16px; border-radius: 0;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
}
.player-row button { border-color: transparent; color: var(--danger); }
/* Shown when a typed name matches a registered player's nickname exactly. */
.player-linked {
  align-self: center; font-size: 11px; font-weight: 700; color: var(--accent);
  white-space: nowrap;
}

.options { display: flex; flex-wrap: wrap; gap: 12px; }
.opt {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line);
  padding: 10px 14px; border-radius: 0; font-size: 14px;
}
.opt select { font: inherit; background: transparent; color: var(--text); border: none; }

/* ---------- scoreboard ---------- */
.scoreboard { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: 12px; position: relative; text-align: center;
}
/* Whoever is throwing gets a solid block of the opposite theme, so the turn is
   obvious from the oche instead of a thin border that is easy to miss.
   .pscore has no colour of its own, so it follows --active-fg. */
.pcard.active {
  background: var(--active-bg);
  border-color: var(--active-bg);
  color: var(--active-fg);
}
.pcard.active .pname,
.pcard.active .pmeta,
.pcard.active .checkout,
.pcard.active .sets,
.pcard.active .mpr { color: var(--active-sub); }
.pcard.active .legs { color: var(--active-fg); }
/* Light mode only: the waiting players' cards go dark so the one light card
   (the thrower) stands out against them. */
:root[data-theme="light"] .pcard:not(.active) {
  background: #1B2B20;
  border-color: #1B2B20;
  color: #EFE6D0;
}
:root[data-theme="light"] .pcard:not(.active) .pname,
:root[data-theme="light"] .pcard:not(.active) .pmeta,
:root[data-theme="light"] .pcard:not(.active) .checkout,
:root[data-theme="light"] .pcard:not(.active) .sets,
:root[data-theme="light"] .pcard:not(.active) .mpr { color: #B08A3E; }
:root[data-theme="light"] .pcard:not(.active) .legs { color: #EFE6D0; }
.pcard .pname { font-size: 15px; color: var(--muted); display: flex; justify-content: center; gap: 8px; }
.pcard .pscore { font-size: 72px; font-weight: 700; line-height: 1.1; }
.pcard .pmeta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pcard .checkout { font-size: 13px; color: var(--gold); margin-top: 4px; min-height: 18px; }
/* MPR sits bottom-left, leg wins bottom-right, with room between them. */
.pcard .pstats { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; gap: 12px; }
.pcard .mpr { color: var(--muted); font-size: 12px; }
.pcard .legs { color: var(--gold); font-weight: 700; font-size: 14px; }
.sets { color: var(--muted); font-size: 12px; }

/* Brand lockup between the two score cards — same size as the setup header. */
.brand-mid { display: flex; justify-content: center; align-items: center; }
.brand-logo.brand-sm { max-width: 200px; width: 100%; height: auto; }

/* ---------- cricket grid ---------- */
.cricket-board {
  margin-top: 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 0; overflow: hidden;
}
.cricket-board table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cricket-board th, .cricket-board td {
  padding: 8px 4px; text-align: center; border-bottom: 1px solid var(--line); font-size: 14px;
}
.cricket-board th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.cricket-board th.active { color: var(--accent); }
.cricket-board td.target { font-weight: 700; color: var(--muted); }
.cricket-board .marks { font-size: 58px; line-height: 1; letter-spacing: 3px; font-weight: 700; }
.cricket-board .closed { color: var(--accent); }
.cricket-board tr.dead td { opacity: .35; }

/* ---------- turn strip ---------- */
.turn-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 14px 0 10px; min-height: 44px;
}
.turn-darts { display: flex; gap: 8px; }
.dart-chip {
  min-width: 52px; text-align: center; padding: 8px 6px; border-radius: 0;
  background: var(--panel-2); border: 1px dashed var(--line); color: var(--muted); font-size: 14px;
}
.dart-chip.filled { border-style: solid; color: var(--text); font-weight: 600; }
.turn-info { text-align: right; font-size: 14px; color: var(--muted); }
.turn-info .bust { color: var(--danger); font-weight: 700; }

/* ---------- round log (X01) ---------- */
.round-log {
  background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  max-height: 330px; overflow-y: auto; margin: 10px 0;
}
.round-log:empty { display: none; }
.round-log table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.round-log th {
  position: sticky; top: 0; background: var(--panel); color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 4px; border-bottom: 1px solid var(--line);
}
.round-log th.active { color: var(--accent); }
.round-log td {
  text-align: center; padding: 6px 4px; font-size: 28px; font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.round-log td.round-no { font-size: 14px; font-weight: 400; color: var(--muted); }
.round-log td.bust { color: var(--danger); font-size: 14px; }

.score-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  padding: 8px 2px;
}
.score-actions button { min-height: 48px; padding: 8px 10px; }
.score-actions #btn-theme { font-size: 20px; line-height: 1; }

/* ---------- number pad (X01) ---------- */
.keypad { display: grid; gap: 8px; }
.pad-actions { display: grid; gap: 8px; }
.pad-actions.idle { grid-template-columns: 1fr 2.5fr 1fr; }
.pad-actions.typing { grid-template-columns: 1fr 2.5fr 1fr; }
.pad-action {
  min-height: 54px; padding: 6px 4px; font-size: 22px; font-weight: 700;
  border-radius: 0; text-transform: uppercase;
}
.pad-action.back, .pad-action.miss, .pad-action.undo, .pad-action.enter {
  background: #a9000d; border-color: #d36b73; color: #fff;
}
.pad-action.mode { background: var(--panel-2); border-color: var(--line); color: var(--accent); font-size: 24px; text-transform: none; }
.pad-action.entry { background: var(--panel-2); border-color: var(--line); color: var(--text); font-size: 34px; }
.pad-display {
  background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: 10px; text-align: center; font-size: 34px; font-weight: 700; line-height: 1.1;
}
.pad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pad-btn { padding: 18px 0; font-size: 22px; font-weight: 700; }
.pad-btn.action { font-size: 20px; color: var(--muted); }
.pad-btn.enter { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); font-size: 18px; }
.pad-btn.quick { background: #12854a; border-color: #12854a; color: #fff; }
.pad-btn.q180 { background: #a3251a; border-color: #a3251a; }
.pad-btn.calc { background: var(--panel-2); border-color: var(--line); color: var(--accent); font-size: 26px; }
/* The quick scores and the calculator keys share one row: idle shows
   100 / 180 / 140, typing swaps in + / 0 / x in the same three cells. */
.pad-btn.q100, .pad-btn.q180, .pad-btn.q140,
.pad-btn.calc-plus, .pad-btn.zero-key, .pad-btn.calc-mult {
  grid-row: 4;
}
.pad-btn.q100, .pad-btn.calc-plus { grid-column: 1; }
.pad-btn.q180, .pad-btn.zero-key { grid-column: 2; }
.pad-btn.q140, .pad-btn.calc-mult { grid-column: 3; }
.pad-action.entry.long { font-size: 24px; }
.pad-display {
  background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: 10px; text-align: center; font-size: 34px; font-weight: 700; line-height: 1.1;
}

.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.controls.three { grid-template-columns: repeat(3, 1fr); }
.controls.one { grid-template-columns: 1fr; }
.controls.two { grid-template-columns: 1fr 1fr; }
.controls.two #btn-undo { order: -1; }
.controls button { min-height: 64px; font-size: 20px; font-weight: 700; }

/* ---------- in-board scoring buttons ---------- */
.cricket-board td.target { padding: 6px 2px; }
.target-cell {
  display: grid;
  grid-template-columns: 40px 64px 40px;
  column-gap: 16px;
  justify-content: center;
  align-items: stretch;
}
.mbtn { padding: 10px 0; border-radius: 0; }
.mbtn.num { min-width: 64px; font-size: 42px; line-height: 1; font-weight: 700; }
.mbtn.mult { min-width: 40px; font-size: 12px; color: var(--muted); }
.mbtn.spacer { visibility: hidden; }
.mbtn.extra { width: 100%; padding: 8px 0; font-size: 32px; line-height: 1; font-weight: 700; }

.choice-options { display: grid; gap: 8px; margin-bottom: 12px; }
.choice-options.grid { grid-template-columns: repeat(4, 1fr); }
.choice-options button { padding: 14px 8px; }
.choice-options.grid button { padding: 12px 0; font-weight: 700; }
.choice-options small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }

/* ---------- overlay ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(8, 16, 11, .85);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto;
}
:root[data-theme="light"] .overlay { background: rgba(39, 66, 50, .5); }
.overlay-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: 24px; text-align: center; max-width: 380px; width: 100%;
  /* auto margins keep a tall pop-up scrollable instead of clipped at the top */
  margin: auto;
}
.overlay-card h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; text-transform: lowercase; color: var(--gold); font-size: 24px; margin: 0 0 8px; }
.overlay-card p { color: var(--muted); margin: 0 0 20px; }
.overlay-actions { display: flex; flex-direction: column; gap: 8px; }

/* Segment and dart pickers are grids of scoring targets, so that card runs the
   full width of the scoring table and the targets read at scoreboard size
   rather than shrinking into a narrow dialog. */
#choice-overlay { padding-left: var(--page-pad); padding-right: var(--page-pad); }
#choice-overlay .overlay-card { max-width: var(--page-max); }
#choice-overlay .choice-options button { font-size: 26px; }
#choice-overlay .choice-options.grid button { padding: 14px 0; }
#choice-overlay .choice-options small { font-size: 13px; }

/* Compact single-row pickers (e.g. "which dart took out the leg") don't need
   the full-width keypad card, and a fixed 4-column grid left-shifts a short
   row of buttons instead of centering it. */
#choice-overlay .overlay-card.narrow { max-width: 380px; }
#choice-overlay .overlay-card.narrow .choice-options.grid {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  justify-content: center;
}

/* ---------- small screens ---------- */
@media (max-width: 420px) {
  :root { --page-pad: 10px; }
  main {
    padding: calc(12px + env(safe-area-inset-top, 0px)) var(--page-pad)
      calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .pcard .pscore { font-size: 60px; }
  .cricket-board .marks { font-size: 46px; }
  .target-cell { grid-template-columns: 34px 58px 34px; }
  .mbtn.num { min-width: 58px; font-size: 42px; }
  .mbtn.mult { min-width: 34px; }
  .pad-btn { padding: 15px 0; font-size: 20px; }
  .round-log td { font-size: 24px; }
}

/* 2-player matches: Player 1 | brand + buttons | Player 2 across one row.
   The buttons sit side by side under the lockup, at half width. */
.scoreboard.two { grid-template-columns: 1fr auto 1fr; }
.scoreboard.two .brand-mid {
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}
.scoreboard.two .score-actions {
  flex-direction: row;
  gap: 6px;
  width: 100%;
}
.scoreboard.two .score-actions button {
  flex: 1;
  min-height: 40px;
  padding: 6px 6px;
  font-size: 12px;
}
.scoreboard.two .score-actions #btn-theme { font-size: 16px; }
@media (max-width: 420px) {
  .scoreboard.two .brand-logo.brand-sm { max-width: 160px; }
  .scoreboard.two .score-actions button { font-size: 11px; }
}

/* ---------- landing categories ---------- */
.landing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 40px);
}
.landing-title { margin: 4px 0 18px; text-align: center; }
.landing .brand-logo { max-width: 340px; margin-bottom: 24px; }
.cat-picker { display: grid; gap: 12px; grid-template-columns: 1fr; width: 100%; max-width: 380px; }
.landing .account-row { margin-top: 26px; justify-content: center; width: 100%; max-width: 380px; }
.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 18px;
  background: var(--panel-2);
}
.cat-btn .cat-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .01em;
}
.cat-btn .cat-sub { font-size: 13px; color: var(--muted); }
.cat-btn:not(.disabled):hover { border-color: var(--accent); color: var(--accent); }
.cat-btn.disabled { opacity: .45; cursor: not-allowed; }
.back-link { margin-bottom: 10px; padding: 6px 10px; font-size: 13px; }

/* ---------- login ---------- */
/* Hide the top header while the login screen is up (it carries its own logo). */
body[data-view="login"] .brand-header { display: none; }
body[data-view="landing"] .brand-header { display: none; }

.login-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - 40px);
  padding: 24px 16px;
  margin: 0 auto;
}
.login-screen .brand-logo { max-width: 340px; margin-bottom: 28px; }

.login-head h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text);
}
.login-head p { margin: 0 0 22px; color: var(--muted); font-size: 14px; }

/* Outlined credential card. */
.login-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 340px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 22px 20px;
}
.login-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}
/* Wraps the signup-only fields as one login-card flex item, so its own
   label/input pairs still need their own column layout and gap. */
#signup-fields { display: flex; flex-direction: column; gap: 8px; }
.login-card input {
  font: inherit;
  padding: 13px 14px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  width: 100%;
}
.login-card input::placeholder { color: var(--muted); }
.login-card input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-card button.primary {
  margin-top: 14px;
  padding: 13px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 0;
  width: 100%;
}
.login-link {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px;
}
.login-card .login-link { align-self: center; }
.login-link:hover { color: var(--text); }

.login-message {
  min-height: 18px;
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 0;
  text-align: center;
}
.login-message.error { color: var(--danger); }

/* ---------- profile stats ---------- */
.profile-stats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; width: 100%; max-width: 340px; }
.profile-stat {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--panel-2); border: 1px solid var(--line); padding: 10px 14px;
}
.profile-stat .label { font-size: 13px; color: var(--muted); }
.profile-stat .value { font-size: 20px; font-weight: 700; color: var(--gold); }
.profile-stat .value small { font-size: 11px; font-weight: 400; color: var(--muted); }
.profile-stats-empty { font-size: 13px; color: var(--muted); text-align: center; margin-bottom: 16px; }

.login-alt {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
}

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.account-email {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- first-leg diddle screen ---------- */
#diddle {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 40px);
}
#diddle .brand-logo { max-width: 340px; margin-bottom: 28px; }
#diddle .landing-title { font-size: 22px; }
#diddle .cat-picker { max-width: 420px; margin: 0 auto; }
.diddle-btn { padding: 18px 12px; font-size: 18px; }
.diddle-btn .cat-name { font-size: 26px; }
#btn-diddle-cancel { margin: 18px auto 0; display: block; }