/* Tennis - one page, no framework. */
:root{
  --bg:#0b1620; --bar:#12222f; --ink:#eaf2f8; --dim:#9fb6c6; --line:#22384a;
  --accent:#d8e84a; --accent2:#5fa8dc; --shadow:0 10px 34px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); overflow:hidden;
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
#wrap{display:flex; flex-direction:column; height:100dvh}
#bar{
  display:flex; align-items:center; gap:14px; padding:8px 14px;
  background:var(--bar); border-bottom:1px solid var(--line); flex:0 0 auto; min-height:56px;
}
#bar h1{
  margin:0; font-size:19px; letter-spacing:.10em; text-transform:uppercase; font-weight:700;
  color:var(--accent); white-space:nowrap;
}
#barScore{display:flex; align-items:baseline; gap:14px; flex:1 1 auto; min-width:0}
#scoreCall{font-size:17px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#scoreSets{display:flex; gap:6px; flex-wrap:wrap}
.setbox{
  font-variant-numeric:tabular-nums; font-size:14px; padding:1px 7px; border-radius:5px;
  background:#0d1b26; border:1px solid var(--line); color:var(--dim);
}
.setbox.live{color:var(--ink); border-color:var(--accent2)}
.setbox sup{font-size:10px; color:var(--accent2)}
#barBtns{display:flex; gap:8px; flex:0 0 auto}
button{
  font:inherit; font-size:14px; color:var(--ink); background:#1b2f3f; border:1px solid var(--line);
  padding:7px 13px; border-radius:8px; cursor:pointer;
}
button:hover{background:#244054}
button:focus-visible{outline:2px solid var(--accent2); outline-offset:2px}
button.primary{background:var(--accent2); border-color:var(--accent2); color:#06131d; font-weight:650}
button.primary:hover{background:#78bbe8}
#stage{position:relative; flex:1 1 auto; min-height:0}
#glcanvas{display:block; width:100%; height:100%; background:#9eb7cc}
#hud{
  position:absolute; left:12px; top:10px; pointer-events:none; max-width:min(58%,560px);
  text-shadow:0 1px 3px rgba(0,0,0,.75);
}
#serveLine{font-size:15px; font-weight:600}
#eventLine{font-size:14px; color:var(--accent); margin-top:3px; min-height:1.4em}
#hudRight{
  position:absolute; right:12px; top:10px; display:flex; flex-direction:column; gap:5px;
  align-items:flex-end; pointer-events:none;
}
.chip{
  font-size:12px; color:var(--dim); background:rgba(8,18,26,.62); border:1px solid var(--line);
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.chip b{color:var(--ink); font-weight:650}
#statLine{
  position:absolute; left:12px; bottom:10px; font-size:12px; color:var(--dim);
  background:rgba(8,18,26,.62); padding:3px 9px; border-radius:999px; pointer-events:none;
  font-variant-numeric:tabular-nums;
}
#bootErr{
  position:absolute; inset:auto 12px 12px 12px; padding:12px 14px; border-radius:10px;
  background:#3a1620; border:1px solid #7a2b3c; color:#ffd9e0; font-size:14px;
}
#touchPad{display:none}
/* Touch pad: shown only once the page knows it is on a touch device (body.touch). */
body.touch #touchPad{
  display:flex; position:absolute; left:0; right:0; bottom:0; padding:10px 14px;
  padding-bottom:max(10px, env(safe-area-inset-bottom)); justify-content:space-between;
  align-items:flex-end; pointer-events:none; z-index:5;
}
body.touch #glcanvas{touch-action:none}
body.touch #statLine, body.touch #keys{display:none}
.tpStick{
  pointer-events:auto; touch-action:none; width:clamp(104px,30vmin,150px); aspect-ratio:1;
  border-radius:50%; background:rgba(8,18,26,.45); border:2px solid rgba(234,242,248,.35);
  display:flex; align-items:center; justify-content:center; -webkit-user-select:none; user-select:none;
}
.tpKnob{
  width:42%; height:42%; border-radius:50%; background:rgba(234,242,248,.75);
  box-shadow:0 2px 8px rgba(0,0,0,.4); pointer-events:none;
}
.tpBtns{
  display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; gap:8px;
  align-items:end; pointer-events:none;
}
.tpBtn{
  pointer-events:auto; touch-action:none; -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; background:rgba(27,47,63,.82); border-color:rgba(234,242,248,.35);
}
.tpBtn.on{background:var(--accent2); color:#06131d}
.tpSmall{font-size:13px; padding:8px 10px; min-height:44px; white-space:nowrap}
.tpBig{
  grid-column:2; grid-row:1 / span 2; width:clamp(84px,24vmin,116px); aspect-ratio:1;
  border-radius:50%; font-weight:700; font-size:16px; background:rgba(216,232,74,.85);
  color:#0b1620; border-color:var(--accent);
}
.tpBig.on{background:var(--accent)}
#tpSpin{grid-column:1; grid-row:1}
#tpDeep{grid-column:1; grid-row:2}
#keys{
  flex:0 0 auto; display:flex; gap:18px; flex-wrap:wrap; padding:7px 14px; font-size:12px;
  color:var(--dim); background:var(--bar); border-top:1px solid var(--line);
}
kbd{
  font:inherit; font-size:11px; background:#0d1b26; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:4px; padding:1px 5px; margin:0 1px; color:var(--ink);
}
/* Dialogs. [hidden] is respected because NOTHING here sets display on .dlg by class. */
.dlg{
  position:fixed; inset:0; background:rgba(4,10,15,.72); z-index:40;
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.dlg[hidden]{display:none!important}
.dlgInner{
  background:var(--bar); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:20px 22px; width:min(560px,100%); max-height:88dvh; overflow:auto;
}
.dlgInner.wide{width:min(760px,100%)}
.dlgInner h2{margin:0 0 14px; font-size:20px; color:var(--accent)}
.dlgInner h3{margin:18px 0 6px; font-size:15px; color:var(--accent2)}
.dlgInner p{margin:8px 0; color:#d6e4ee}
.dlgInner ul{margin:8px 0; padding-left:20px; color:#d6e4ee}
.dlgInner li{margin:5px 0}
.dlgInner label{display:block; margin:11px 0; font-size:14px; color:var(--dim)}
.dlgInner label.chk{display:flex; align-items:center; gap:8px; color:#d6e4ee}
select{
  display:block; width:100%; margin-top:5px; font:inherit; font-size:14px; color:var(--ink);
  background:#0d1b26; border:1px solid var(--line); border-radius:8px; padding:8px 10px;
}
.dlgBtns{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}
@media (max-width:720px){
  #bar{flex-wrap:wrap; gap:8px}
  #bar h1{font-size:16px}
  #scoreCall{font-size:15px}
  #hud{max-width:calc(100% - 190px)}
  #serveLine{font-size:14px}
  #eventLine{font-size:13px}
  #hudRight .chip:nth-child(n+4){display:none}
  #keys{font-size:11px; gap:10px}
}
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto} }