/* K13 Kickoff (js/haxball13.js): top-down physics football on the workbench. Tokens come from css/site.css.
   The card, head, reset pill, status line and footnote reuse the .wb rules in css/workbench.css and the bench subgrid;
   this file only adds the stage (HUD strip on top, pitch in the middle, control bar underneath) and the panel.
   Nothing sits over the buttons: the pitch is its own box, the panel lives inside it, the bar is below it. */
.hx-stage{display:flex;flex-direction:column;padding:0;background:var(--paper-2);-webkit-user-select:none;user-select:none}
.bench .wb-stage.hx-stage{min-height:0}

/* HUD: score, clock and record as plain chips above the pitch; the right side leaves room for the Restart pill */
.hx-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:54px;padding:10px 120px 10px 10px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.hx-chip{font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.4;color:var(--ink);background:var(--paper-3);border:1px solid var(--line-2);border-radius:100px;padding:3px 10px;white-space:nowrap}
.hx-a{background:var(--wash-peach);border-color:var(--blue);color:var(--ink)}
.hx-b{background:#1F2023;border-color:var(--line-3);color:#F6F2EA}
.hx-rec{color:var(--muted)}

/* the pitch keeps its own shape, 812 by 380 world units */
.hx-view{position:relative;width:100%;aspect-ratio:812/380;background:var(--paper-3)}
.hx-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hx-cv:focus-visible{outline:3px solid var(--blue);outline-offset:-4px}

/* controls: real buttons below the pitch */
.hx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;background:var(--paper-2);border-top:1px solid var(--line)}
.hx-lab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.hx-btn{font-family:var(--body);font-weight:600;font-size:14px;min-height:40px;padding:0 16px;border-radius:100px;color:var(--ink);background:var(--paper-3);border:1px solid var(--line-2);touch-action:manipulation;
  transition:color .3s var(--work,ease),border-color .3s var(--work,ease),background .3s var(--work,ease),transform .3s var(--pop)}
.hx-btn:hover:not(:disabled){color:var(--blue);border-color:var(--blue)}
.hx-btn:active:not(:disabled){transform:scale(.97)}
.hx-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.hx-btn:disabled{opacity:.4;cursor:not-allowed}
.hx-pause{margin-left:auto}
.hx-kick{min-width:150px;min-height:48px;font-size:16px;color:#fff;background:var(--blue);border-color:var(--blue);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hx-kick:hover:not(:disabled){color:#fff;background:var(--ink);border-color:var(--ink)}
:root[data-theme="dark"] .hx-kick{color:#1A1B1E}
:root[data-theme="dark"] .hx-kick:hover:not(:disabled){color:#1A1B1E;background:var(--blue-2);border-color:var(--blue-2)}
.hx-btn:focus-visible,.hx-obtn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* the panel: ready, paused, full time. It covers the pitch only, never the bar */
.hx-over{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:12px;background:rgba(31,32,35,.42)}
.hx-over[hidden]{display:none}
.hx-panel{width:min(100%,400px);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:20px 20px 18px;border-radius:18px;
  background:var(--paper-2);color:var(--ink);border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(31,32,35,.6)}
.hx-over-t{font-family:var(--disp);font-weight:600;font-size:24px;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.hx-over-s{font-size:14.5px;line-height:1.5;color:var(--muted)}
.hx-over-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.hx-obtn{font-family:var(--body);font-weight:600;font-size:15px;min-height:44px;padding:0 22px;border-radius:100px;color:#fff;background:var(--blue);border:1.5px solid var(--blue);transition:background .3s var(--work,ease),transform .3s var(--pop)}
.hx-obtn:hover{background:var(--ink);border-color:var(--ink)}
.hx-obtn.ghost{color:var(--ink);background:transparent;border-color:var(--line-3)}
.hx-obtn.ghost:hover{color:var(--blue);background:transparent;border-color:var(--blue)}
:root[data-theme="dark"] .hx-obtn:not(.ghost){color:#1A1B1E}
:root[data-theme="dark"] .hx-obtn:not(.ghost):hover{background:var(--blue-2);border-color:var(--blue-2)}
:root[data-theme="dark"] .hx-over{background:rgba(10,10,12,.55)}
:root[data-theme="dark"] .hx-b{background:#1F2023;border-color:rgba(246,242,234,.4)}

@media(prefers-reduced-motion:no-preference){
  .hx-panel{animation:hx-rise .45s var(--ease) both}
}
@keyframes hx-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hx-btn,.hx-obtn{transition:none}
  .hx-btn:active:not(:disabled){transform:none}
}

/* on a phone the pitch is small, so the panel tucks its copy in and the Kick button takes its own full row for a thumb */
@media(max-width:560px){
  .hx-top{padding:8px 104px 8px 8px;gap:4px;min-height:50px}
  .hx-chip{padding:2px 8px;font-size:10.5px}
  .hx-panel{padding:12px 12px 10px;gap:3px}
  .hx-over-t{font-size:19px}
  .hx-over-s{font-size:12.5px;line-height:1.4}
  .hx-obtn{min-height:40px;font-size:14px;padding:0 18px}
  .hx-over-row{margin-top:4px}
  .hx-bar{padding:8px;gap:6px}
  .hx-lab{display:none}
  .hx-kick{order:5;flex:1 1 100%;min-height:56px}
  .hx-pause{margin-left:0}
}

/* phones: the pitch is short, so the panel keeps to its title and buttons (the status line under the board says the rest)
   and nothing can spill over the mode buttons below */
@media(max-width:560px){
  .hx-view{overflow:hidden}
  .hx-over-s{display:none}
}