/* Darts - one page, no framework, no external font.  Everything the app draws in 3D is in
   render.js; this is the furniture around it.                                                  */
:root {
  --bg: #080b0e;
  --panel: rgba(16, 20, 26, 0.90);
  --edge: rgba(255, 255, 255, 0.10);
  --ink: #e9eef6;
  --dim: #97a3b4;
  --gold: #f6c13b;
  --red: #d1443f;
  --green: #38a169;
  --blue: #4a9bdc;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font-family: var(--font); overflow: hidden; -webkit-text-size-adjust: 100%; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }

button {
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  border-radius: 9px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--edge);
  background: rgba(28, 34, 44, 0.88); color: var(--ink); transition: background 0.12s, transform 0.06s;
}
button:hover { background: rgba(42, 50, 62, 0.94); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button.minor { background: rgba(22, 27, 35, 0.88); color: #cbd4e0; font-weight: 600; }
button.minor:hover { background: rgba(38, 45, 57, 0.94); color: var(--ink); }
button.primary { background: var(--gold); color: #1b1405; border-color: transparent; }
button.primary:hover { background: #ffd25c; }
button:disabled { opacity: 0.45; cursor: default; }

#topbar {
  position: absolute; top: 10px; left: 10px; display: flex; gap: 7px; flex-wrap: wrap; z-index: 5;
}

#board {
  position: absolute; top: 56px; left: 10px; z-index: 4;
  display: flex; flex-direction: column; gap: 7px; min-width: 200px;
}
.pl {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 12px;
  padding: 9px 12px 8px; backdrop-filter: blur(7px);
}
.pl.on { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(246, 193, 59, 0.35); }
.plt { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.plt .nm { font-weight: 700; color: var(--ink); flex: 1; }
.plt .legs, .plt .sets { color: var(--dim); font-size: 11px; }
.pl .score { font-family: var(--mono); font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.pl.on .score { color: var(--gold); }
.pl .sub { display: flex; gap: 10px; font-size: 11px; color: var(--dim); }

#readout {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 999px;
  padding: 7px 16px; font-size: 12.5px; backdrop-filter: blur(7px); max-width: 62vw;
}
#ro-turn { font-weight: 700; }
#ro-left { color: var(--dim); }
#ro-checkout { color: var(--gold); font-family: var(--mono); font-weight: 700; letter-spacing: 0.03em; }

#msg {
  position: absolute; bottom: 148px; left: 50%; transform: translateX(-50%); z-index: 4;
  font-size: 15px; font-weight: 600; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  pointer-events: none; max-width: 84vw;
}
#msg.big { font-size: 26px; color: var(--gold); }

#visit {
  position: absolute; bottom: 108px; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; gap: 7px;
}
.dt {
  min-width: 52px; text-align: center; font-family: var(--mono); font-size: 13px; font-weight: 700;
  padding: 5px 9px; border-radius: 8px; background: var(--panel); border: 1px solid var(--edge);
}
.dt.empty { color: rgba(151, 163, 180, 0.45); }
.dt.bust { color: var(--red); border-color: rgba(209, 68, 63, 0.55); }
.dt.win { color: #1b1405; background: var(--gold); border-color: transparent; }
.dt.out { color: var(--dim); text-decoration: line-through; }

#controls {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: 9px; align-items: center;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 14px;
  padding: 11px 14px; backdrop-filter: blur(7px); width: min(460px, 92vw);
}
#meters { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.meter { display: flex; align-items: center; gap: 9px; }
.mlab { font-size: 11px; color: var(--dim); width: 46px; text-transform: uppercase; letter-spacing: 0.06em; }
.mbar {
  position: relative; flex: 1; height: 14px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.07); overflow: hidden; border: 1px solid var(--edge);
}
.mbar .mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--gold); opacity: 0.75; }
.mbar .target { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--gold); opacity: 0.85; }
#m-sway-mark {
  position: absolute; top: 1px; bottom: 1px; width: 8px; border-radius: 4px;
  background: var(--blue); left: 50%; transform: translateX(-50%);
}
#m-power-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #2f6f9e, var(--gold)); }
.meter.locked .mbar { opacity: 0.55; }
.ctl-row { display: flex; gap: 9px; width: 100%; }
.ctl-row button { flex: 1; }

#practice {
  position: absolute; top: 56px; right: 10px; z-index: 4; width: 216px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 12px;
  padding: 11px 12px; backdrop-filter: blur(7px); flex-direction: column; gap: 7px;
}
#practice h2 { margin: 0 0 3px; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
#pr-stats { display: flex; flex-direction: column; gap: 3px; }
.pr { display: flex; justify-content: space-between; font-size: 12px; }
.pr .k { color: var(--dim); }
.pr .v { font-family: var(--mono); font-weight: 700; }

/* ---- panels ---------------------------------------------------------------------------------- */
.sheet {
  position: fixed; inset: 0; z-index: 20; background: rgba(4, 6, 9, 0.72);
  align-items: flex-start; justify-content: center; overflow-y: auto; padding: 20px 12px 40px;
  backdrop-filter: blur(3px);
}
.sheet-in {
  width: min(720px, 96vw); background: #0f141b; border: 1px solid var(--edge);
  border-radius: 16px; padding: 20px 22px 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.sheet-in h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: -0.01em; }
.sheet-in h3 { margin: 20px 0 8px; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); }
.sheet-in p { margin: 8px 0; font-size: 13.5px; line-height: 1.62; color: #ccd5e2; }
.sheet-in p.note { font-size: 12px; color: var(--dim); line-height: 1.55; }
.sheet-in p.big { font-size: 16px; font-weight: 700; color: var(--gold); }
.sheet-in b { color: var(--ink); }
.sheet-in i { color: #b9c4d3; }
ul.facts { margin: 8px 0; padding-left: 18px; }
ul.facts li { font-size: 13.5px; line-height: 1.6; color: #ccd5e2; margin-bottom: 6px; }
ul.facts.src li { font-size: 12.5px; color: var(--dim); }
.row { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
.row label { font-size: 13px; color: #ccd5e2; min-width: 168px; }
.row.check label { min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.row select {
  flex: 1; font-family: inherit; font-size: 13px; padding: 7px 9px; border-radius: 8px;
  background: #161c25; color: var(--ink); border: 1px solid var(--edge);
}
.row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); }
.sheet-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 16px; }
#over-body table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; }
#over-body th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--dim); padding: 5px 7px; border-bottom: 1px solid var(--edge); font-weight: 600;
}
#over-body td { padding: 6px 7px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
#over-body td.n { font-family: var(--mono); text-align: right; }
#over-body tr.won td { color: var(--gold); font-weight: 700; }

/* ---- small screens --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  #board { top: 52px; left: 8px; min-width: 132px; }
  .pl .score { font-size: 26px; }
  .pl .sub { font-size: 10px; gap: 7px; }
  #readout { top: auto; bottom: 176px; max-width: 94vw; font-size: 11.5px; padding: 6px 12px; }
  #msg { bottom: 214px; font-size: 13px; }
  #visit { bottom: 142px; }
  .dt { min-width: 44px; font-size: 12px; }
  #practice { top: auto; bottom: 176px; right: 8px; width: 160px; padding: 8px 9px; }
  .pr { font-size: 11px; }
  #topbar { gap: 5px; }
  #topbar button { padding: 6px 9px; font-size: 12px; }
  .row { flex-direction: column; align-items: stretch; gap: 5px; }
  .row label { min-width: 0; }
  .row.check { flex-direction: row; }
}
/* Phones: the practice panel sat bottom-right over half the board and the aim point, and its last
   stats row ran under its own Reset button; it moves to a compact strip under the top bar (the
   scoreboard it would collide with is empty in practice).  The readout keeps to one line where it
   can, and the message sits high enough that a readout which does wrap cannot run into it. */
@media (max-width: 720px) {
  #practice {
    top: 52px; left: 8px; right: 8px; bottom: auto; width: auto;
    flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 7px 9px;
  }
  #practice h2 { display: none; }
  #practice .row { flex: 1; flex-direction: row; align-items: center; margin: 0; gap: 7px; min-width: 0; }
  #practice .row label { font-size: 12px; white-space: nowrap; }
  #practice .row select { min-width: 0; padding: 5px 7px; }
  #pr-reset { padding: 6px 10px; flex: none; }
  #pr-stats { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 12px; }
  .pr { gap: 6px; min-width: 0; }
  .pr .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pr .v { white-space: nowrap; }
  #pr-stats .pr:nth-child(9) { grid-column: 1 / -1; }
  #readout { gap: 2px 9px; }
}
@media (max-width: 420px) {
  #msg { bottom: 236px; }
}
@media (max-width: 360px) {
  #topbar { gap: 4px; left: 8px; }
  #topbar button { padding: 6px 7px; font-size: 11.5px; }
  #readout { font-size: 11px; padding: 5px 10px; }
}
@media (max-height: 560px) {
  #msg { bottom: 132px; font-size: 13px; }
  #visit { bottom: 96px; }
  #controls { padding: 8px 11px; gap: 6px; }
}