/* Curling.  One dark theme, no framework, no external font.
   The first rule is not decoration: `[hidden]` is beaten by ANY class rule that sets `display`, and
   the classic symptom is an invisible panel that still eats every click.  This makes the attribute
   the single switch, and tools-harness-page.js asserts the rule is present.                      */
[hidden] { display: none !important; }

:root {
  --ink: #eaf0f6;
  --dim: #93a4b6;
  --bg: #0a0f14;
  --panel: #111a22;
  --edge: #22303c;
  --hot: #f2c94c;
  --a: #d83c2e;
  --b: #f1db3e;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); }
body { overflow: hidden; -webkit-text-size-adjust: 100%; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  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; }

button {
  font: inherit; font-weight: 600; color: #10161c; background: var(--hot);
  border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer;
}
button.minor { background: #1b2732; color: var(--ink); border: 1px solid var(--edge); font-weight: 500; }
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }

#topbar { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
#topbar button { padding: 7px 11px; font-size: 13px; }

#scoreboard {
  position: absolute; top: 12px; right: 12px; background: rgba(10, 16, 22, 0.82);
  border: 1px solid var(--edge); border-radius: 10px; padding: 8px 10px; font-size: 12px;
  backdrop-filter: blur(6px);
}
#scoretable { border-collapse: collapse; font-variant-numeric: tabular-nums; }
#scoretable th, #scoretable td { padding: 2px 6px; text-align: center; font-weight: 500; }
#scoretable th:first-child { text-align: left; padding-right: 10px; }
#scoretable .sc-head th { color: var(--dim); font-weight: 500; font-size: 11px; }
#scoretable .sc-a th:first-child { color: var(--a); }
#scoretable .sc-b th:first-child { color: var(--b); }
#scoretable .sc-total { font-weight: 700; border-left: 1px solid var(--edge); }
.sb-note { color: var(--dim); margin-top: 5px; font-size: 11px; }

#hud {
  position: absolute; left: 12px; bottom: 84px; width: 236px;
  background: rgba(10, 16, 22, 0.82); border: 1px solid var(--edge); border-radius: 10px;
  padding: 10px 12px; font-size: 12px; backdrop-filter: blur(6px);
}
.hud-row { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.hud-k { color: var(--dim); }
.hud-v { font-variant-numeric: tabular-nums; text-align: right; }
.hud-aid { color: var(--dim); font-size: 10px; margin-top: 6px; font-style: italic; }
#hud-shot { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--edge); color: var(--hot); min-height: 1.2em; }
#meter { position: relative; height: 7px; margin: 8px 0; background: #16212b; border-radius: 4px; overflow: visible; }
#meter-weight { height: 100%; width: 40%; background: linear-gradient(90deg, #2f7d5e, var(--hot)); border-radius: 4px; }
#meter-broom { position: absolute; top: -4px; width: 2px; height: 15px; background: #7fd4ff; left: 50%; }
.hud-dial { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.hud-dial label { color: var(--dim); width: 48px; flex: none; }
.hud-dial input[type="range"] { flex: 1; min-width: 0; margin: 0; height: 22px; accent-color: var(--hot); touch-action: none; }
#sweep-lamp {
  margin-top: 6px; font-size: 10px; letter-spacing: 0.14em; color: #2b3a48;
  border: 1px solid #22303c; border-radius: 5px; padding: 3px 6px; text-align: center;
}
#sweep-lamp.on { color: #0a0f14; background: #7fd4ff; border-color: #7fd4ff; }

#controls { position: absolute; left: 50%; transform: translateX(-50%); bottom: 44px; display: flex; gap: 8px; }
#keyhint {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px;
  color: var(--dim); font-size: 11px; text-align: center; pointer-events: none;
}

/* Panels.  Note there is deliberately NO `display` here: the [hidden] attribute is the switch and a
   class that set `display: block` would silently outrank it. */
.panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.panel.wide { width: min(760px, calc(100vw - 32px)); }
.panel h2 { margin: 0 0 12px; font-size: 19px; }
.panel h3 { margin: 18px 0 6px; font-size: 14px; color: var(--hot); }
.panel p, .panel li { font-size: 13px; line-height: 1.58; color: #cfdae6; }
.panel p { margin: 8px 0; }
.panel ul { margin: 8px 0; padding-left: 20px; }
.panel li { margin: 4px 0; }
.panel strong { color: var(--ink); }
.panel .dim { color: var(--dim); font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12px; color: #a9d8ff; }
.panel-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; align-items: center; font-size: 13px; }
.grid label { color: #cfdae6; }
.grid select, .grid input[type="number"] {
  font: inherit; font-size: 13px; color: var(--ink); background: #0d151c;
  border: 1px solid var(--edge); border-radius: 7px; padding: 6px 9px; min-width: 132px;
}
.grid input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--hot); justify-self: end; }
#mechtable { border-collapse: collapse; width: 100%; margin: 10px 0 4px; font-size: 12px; }
#mechtable th, #mechtable td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--edge); }
#mechtable th { font-weight: 600; }
#mechtable .sc-head th { color: var(--dim); font-weight: 500; }
#mechtable td { font-variant-numeric: tabular-nums; color: #cfdae6; }

@media (max-width: 720px) {
  #hud { width: 176px; bottom: 78px; font-size: 11px; padding: 8px 9px; }
  #scoreboard { font-size: 11px; padding: 6px 7px; }
  #keyhint { display: none; }
  #controls { bottom: 16px; }
  #topbar button { padding: 6px 9px; font-size: 12px; }
  /* Portrait phones: the toolbar and the scoreboard both sat at the top and the scoreboard covered
     the toolbar buttons.  The toolbar now wraps inside the width and the scoreboard sits below it,
     scrolling sideways rather than off the screen when extra ends widen it. */
  #topbar { right: 12px; }
  #scoreboard { top: 84px; max-width: calc(100vw - 24px); overflow-x: auto; }
  #scoretable th, #scoretable td { padding: 2px 4px; }
  /* and the HUD stops below the scoreboard, scrolling inside itself on the shortest phones */
  #hud { max-height: calc(100vh - 256px); overflow-y: auto; }
  #hud-projected { display: none; }
}
/* Short landscape screens (a phone on its side): the HUD grew up into the toolbar. */
@media (max-height: 520px) {
  #keyhint { display: none; }
  #controls { bottom: 12px; }
  #hud { top: 52px; bottom: auto; max-height: calc(100vh - 64px); overflow-y: auto; font-size: 11px; padding: 6px 9px; }
}
@media (pointer: coarse) { #keyhint { display: none; } }