/* Table Football - styles.  One file, no framework, no external font.
   NOTE ON [hidden]: every rule below that sets `display` is scoped so it cannot beat
   `[hidden]`, and the explicit `[hidden]{display:none !important}` at the top settles it.  An
   invisible sheet that still eats every click is the classic symptom of getting this wrong. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  --bg: #0d1411;
  --panel: #16221c;
  --panel2: #1d2c24;
  --ink: #e8f0ea;
  --dim: #9fb3a7;
  --line: #2b3d33;
  --you: #d43737;
  --them: #3266cc;
  --hot: #f0b83c;
  --acc: #4fbf7a;
  --radius: 10px;
}
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}
a { color: var(--acc); }
kbd {
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #0a1310; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; padding: 2px 5px; color: var(--ink);
}
.bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.bar h1 { font-size: 19px; margin: 0; letter-spacing: 0.01em; }
.bar .sub { margin: 0; color: var(--dim); font-size: 12.5px; }
.bar .spacer { flex: 1 1 auto; }
.pick { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); }
select, button {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
select { padding: 5px 8px; }
button:hover { background: #26382e; }
button:active { transform: translateY(1px); }
button:focus-visible, select:focus-visible, canvas:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px;
}
button[aria-pressed="true"] { background: #2c4b39; border-color: var(--acc); }
main {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px;
  padding: 14px 16px 20px; align-items: start;
}
@media (max-width: 900px) { main { grid-template-columns: minmax(0, 1fr); } }
.tablewrap {
  background: #0a1310; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; position: relative;
}
canvas {
  display: block; width: 100%; height: min(64vh, 620px); min-height: 300px;
  background: #0e130f; touch-action: none;
}
.nogl { margin: 0; padding: 16px; color: var(--hot); }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px;
}
.scoreline { text-align: center; }
.team { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.team .tag { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.team .tag:first-child { color: var(--you); }
.team .tag:last-child { color: var(--them); }
.score { font-size: 34px; font-weight: 650; font-variant-numeric: tabular-nums; }
.meta { color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.state {
  margin: 10px 0 8px; padding: 7px 10px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px; text-align: center;
  min-height: 34px;
}
.rods { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rods button { flex: 1 1 auto; font-size: 12px; padding: 6px 6px; }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 10px; }
.stats dt { color: var(--dim); font-size: 12px; }
.stats dd { margin: 0; font-size: 13px; }
.stats dd.val { font-variant-numeric: tabular-nums; }
.stats dd.sub2 { color: var(--dim); font-size: 11.5px; }
.stats dd.val.hot { color: var(--hot); font-weight: 600; }
.barwrap { background: #0a1310; border: 1px solid var(--line); border-radius: 5px; height: 8px; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0%; background: var(--acc); }
button.wide { width: 100%; margin-bottom: 10px; }
.log {
  background: #0a1310; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 9px; min-height: 96px; font-size: 12px; color: var(--dim);
}
.logline { padding: 1px 0; }
.logline:first-child { color: var(--ink); }
.fps { margin: 6px 0 0; text-align: right; color: #5d7367; font-size: 11px; min-height: 14px; }
.sheet {
  position: fixed; inset: 0; background: rgba(4, 9, 7, 0.82); z-index: 40;
  overflow: auto; padding: 24px 14px;
}
.sheetinner {
  max-width: 760px; margin: 0 auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px 22px;
}
.sheetinner h2 { margin-top: 0; font-size: 22px; }
.sheetinner h3 { margin: 18px 0 6px; font-size: 15px; color: var(--acc); }
.sheetinner ul { padding-left: 20px; }
.sheetinner li { margin-bottom: 6px; }
.sheetinner span[id^="n-"] { font-variant-numeric: tabular-nums; color: var(--hot); }
.foot { padding: 10px 16px 22px; color: #5d7367; font-size: 12px; text-align: center; }