/* Table Tennis - the whole stylesheet.  Dark hall, one accent, nothing that moves on its own. */
:root {
  --bg: #080b0e;
  --ink: #eef3f8;
  --dim: #96a3b4;
  --line: #1c232c;
  --panel: #101519;
  --accent: #4fd1c5;
  --warm: #f0c020;
  --red: #d94a4a;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); }
body { overflow: hidden; }
.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; }

#topbar { position: absolute; top: 10px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 4; }
button {
  font: inherit; font-size: 13px; color: var(--ink); background: #18202880; border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 11px; cursor: pointer; backdrop-filter: blur(6px);
}
button:hover { background: #223039cc; border-color: #33424e; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.minor { color: var(--dim); }
button.link { background: none; border: none; color: var(--accent); padding: 0 3px; text-decoration: underline; }

#scoreboard {
  position: absolute; top: 10px; right: 12px; z-index: 4; min-width: 232px;
  background: #0d1217d9; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  font-variant-numeric: tabular-nums; backdrop-filter: blur(6px);
}
.sb-row { display: grid; grid-template-columns: 1fr 28px 34px 14px; align-items: center; gap: 4px; padding: 2px 0; }
.sb-name { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-row.lead .sb-name { color: var(--ink); }
.sb-games { font-size: 13px; color: var(--dim); text-align: right; }
.sb-pts { font-size: 21px; font-weight: 600; text-align: right; }
.sb-serve { width: 9px; height: 9px; border-radius: 50%; justify-self: center; background: transparent; }
.sb-serve.on { background: var(--warm); box-shadow: 0 0 8px #f0c02088; }
#sb-note { font-size: 11.5px; color: var(--dim); margin-top: 5px; min-height: 15px; line-height: 1.35; }

#hud {
  position: absolute; left: 12px; bottom: 46px; z-index: 4; display: flex; flex-direction: column; gap: 5px;
  font-size: 12.5px; color: var(--dim); pointer-events: none;
}
#hud-stroke { color: var(--ink); font-size: 14px; font-weight: 600; }
#hud-stroke .hint { color: var(--dim); font-weight: 400; font-size: 12px; margin-left: 6px; }
#hud-trims, #hud-spin { font-family: var(--mono); font-size: 11.5px; }
#hud-spin .top { color: var(--warm); }
#hud-spin .back { color: var(--accent); }

#prompt {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 5;
  font-size: 26px; font-weight: 600; text-align: center; pointer-events: none;
  text-shadow: 0 2px 18px #000a; opacity: 0; transition: opacity 140ms;
}
#prompt.show { opacity: 1; }
#prompt .sub { display: block; font-size: 14px; font-weight: 400; color: var(--dim); margin-top: 7px; }

#ticker {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 4;
  font-size: 12.5px; color: var(--dim); text-align: center; max-width: 74vw; pointer-events: none;
}

#foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 7px 12px;
  font-size: 11px; color: #6d798a; background: linear-gradient(to top, #080b0edd, #080b0e00);
}
#foot a { color: #8fa0b3; }

.panel {
  position: absolute; inset: 0; z-index: 10; background: #04070ac4;
  display: flex; align-items: center; justify-content: center; padding: 18px; overflow: auto;
  backdrop-filter: blur(3px);
}
/* [hidden] must win over the flex above: a class or id rule that sets display beats it silently,
   and an invisible panel that still eats every click is the classic symptom. */
.panel[hidden] { display: none !important; }
.panel-in {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px; max-width: 720px; width: 100%; max-height: 92vh; overflow: auto;
}
.panel-in h2 { margin: 0 0 14px; font-size: 20px; }
.panel-in h3 { margin: 20px 0 7px; font-size: 14px; color: var(--accent); letter-spacing: .02em; }
.panel-in p { margin: 8px 0; font-size: 13.5px; line-height: 1.55; color: #c8d3de; }
.panel-in label { display: block; margin: 9px 0; font-size: 13px; color: var(--dim); }
.panel-in label.chk { display: flex; align-items: flex-start; gap: 8px; }
.panel-in select, .panel-in input[type=number] {
  font: inherit; font-size: 13px; margin-left: 8px; background: #161d24; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px;
}
.panel-buttons { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.fine { font-size: 11.5px !important; color: #7f8b9a !important; }
.eq { font-family: var(--mono); color: var(--accent); white-space: nowrap; }
ul.keys { margin: 6px 0; padding-left: 18px; font-size: 13px; color: #c8d3de; line-height: 1.7; }
ul.keys b { font-family: var(--mono); color: var(--ink); background: #1a222a; padding: 1px 5px; border-radius: 4px; }
table.spec { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 8px 0; }
table.spec th { text-align: left; font-weight: 600; color: var(--dim); padding: 5px 10px 5px 0; vertical-align: top; white-space: nowrap; }
table.spec td { padding: 5px 10px 5px 0; color: #c8d3de; vertical-align: top; line-height: 1.45; }
table.spec td:last-child { font-family: var(--mono); color: #7f8b9a; text-align: right; white-space: nowrap; }
table.spec b { color: var(--ink); }
table.spec tr + tr { border-top: 1px solid #151b21; }

@media (max-width: 640px) {
  :root { --sbw: 176px; }
  #scoreboard { min-width: var(--sbw); padding: 7px 9px; }
  .sb-pts { font-size: 18px; }
  #prompt { font-size: 20px; }
  .panel-in { padding: 16px; }
  /* the buttons wrap in the room left of the scoreboard instead of sliding underneath it */
  #topbar { max-width: calc(100vw - var(--sbw) - 36px); }
  #topbar button { font-size: 12px; padding: 5px 9px; }
  /* bottom stack, lowest first: footer, HUD, then the ticker above the HUD - never on top of it */
  .foot-long { display: none; }
  #hud { bottom: 50px; font-size: 11.5px; }
  #ticker { bottom: 112px; max-width: calc(100vw - 24px); width: max-content; }
}
@media (max-width: 420px) {
  :root { --sbw: 156px; }
}
/* short landscape phones: the ticker sits to the right of the HUD rather than above it */
@media (max-height: 460px) and (min-width: 480px) {
  #ticker { left: 240px; right: 12px; bottom: 44px; transform: none; max-width: none; width: auto; }
}