/* ---- layout & chrome only; all gameplay visuals live on the canvas ---- */
:root {
  --red:  #ff5d6e;
  --blue: #58a6ff;
  --bg:   #07080f;
  --panel:#11131f;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  background: var(--bg);
  color: #dfe6ff;
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- scoreboard (hidden: HUD now lives inside the canvas launch zone) ----
   DOM kept so updateHUD() keeps working without JS changes. */
#scoreboard {
  display: none;
  width: min(560px, 100vw);
  align-items: stretch;
  justify-content: space-between;
  padding: 8px 14px 4px;
  gap: 10px;
}
.score-card {
  flex: 1;
  background: var(--panel);
  border: 1px solid #222742;
  border-radius: 10px;
  padding: 6px 12px;
  text-align: center;
  transition: box-shadow .25s, border-color .25s;
}
.score-card .name { font-size: 11px; letter-spacing: 2px; opacity: .75; }
.score-card .pts  { font-size: 26px; font-weight: 700; line-height: 1.1; }
.score-card .proj { font-size: 11px; min-height: 14px; opacity: .85; }
#card-red  .name, #card-red  .pts { color: var(--red); }
#card-blue .name, #card-blue .pts { color: var(--blue); }
/* glow derives from the CSS variable so custom marble colors carry through */
.score-card.active-red  { border-color: var(--red);  box-shadow: 0 0 14px color-mix(in srgb, var(--red) 35%, transparent); }
.score-card.active-blue { border-color: var(--blue); box-shadow: 0 0 14px color-mix(in srgb, var(--blue) 35%, transparent); }
#round-info {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: 120px; text-align: center;
}
#round-label { font-size: 12px; letter-spacing: 1px; opacity: .8; }
#shot-label  { font-size: 14px; font-weight: 600; }

/* ---- table canvas ---- */
#table-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 8px 0 4px;
}
canvas#table {
  display: block;
  touch-action: none;       /* we handle all pointer gestures ourselves */
  border-radius: 12px;
}

/* ---- footer buttons ---- */
#footer {
  width: min(560px, 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 10px;
}
#footer .hint { display: none; } /* premium view: hint lives off-screen */
#footer.dev-hidden { display: none; }
button {
  background: var(--panel);
  color: #dfe6ff;
  border: 1px solid #2c3252;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 13px;
  cursor: pointer;
}
button:hover { border-color: #4a5380; }

/* ---- live physics tuning panel (toggle with T) ---- */
#tuner {
  position: fixed;
  top: 60px; right: 10px;
  width: 230px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #0d0f1add;
  border: 1px solid #2c3252;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  display: none;
  z-index: 10;
  backdrop-filter: blur(4px);
}
#tuner.open { display: block; }
#tuner h3 { font-size: 12px; margin-bottom: 6px; letter-spacing: 1px; }
#tuner h3.section { margin-top: 12px; padding-top: 8px; border-top: 1px solid #2c3252; }
#tuner label { display: block; margin-top: 7px; opacity: .85; }
#tuner input[type=range] { width: 100%; }
#tuner input[type=color] {
  width: 100%; height: 22px; margin-top: 2px;
  border: 1px solid #2c3252; border-radius: 4px;
  background: none; padding: 0; cursor: pointer;
}
#tuner .val { float: right; opacity: .7; }
#aim-debug {
  margin-top: 8px; padding-top: 6px; border-top: 1px solid #2c3252;
  font-size: 10px; opacity: .7; font-family: monospace;
}