/* Nyza Cricket: Duels — UI base. "The Long Room" tokens.
   ui/hud.js and ui/screens.js may append component styles via <style> or extend here. */
:root {
  --field: #0c382b; --field-deep: #082a20; --paper: #f2ecdc; --paper-warm: #ece4cf;
  --ball: #a63a28; --ball-deep: #7e2418; --brass: #c6a15b; --brass-soft: rgba(198, 161, 91, 0.38);
  --ink: #17211c; --cream: #efe7d2; --cream-dim: rgba(239, 231, 210, 0.72);
  --font-display: "Graduate", "Copperplate", serif;
  --font-body: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", Menlo, monospace;

  /* v0.2 premium tokens ------------------------------------------------ */
  --tile-bg: #0a1510; --tile-top: #12211a; --tile-bot: #060d0a;   /* flip-tile face shades */
  --tile-hi: rgba(239, 231, 210, 0.12); --tile-lo: rgba(0, 0, 0, 0.55);
  --perf-ink: #9fdcc8;                        /* ?perf=1 debug HUD readout */
  --touch-min: 44px;                          /* research: >=44px touch targets */
  --safe-t: env(safe-area-inset-top, 0px);  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);  --safe-r: env(safe-area-inset-right, 0px);

  /* LOWER-CENTER CLUSTER — the timing ring (ui/timing.js, #feedback layer) and the
     shot compass (ui/input.js overlay) share this anchor + scale so the shrinking
     reticle passes THROUGH the compass into the perfect band. ONE source of truth:
     both modules read these; do not fork the numbers. Sits in the thumb/eye zone. */
  --woc-cluster-cx: 50%; --woc-cluster-cy: 61%; --woc-cluster-scale: 1;
  --woc-ring-outer: 128px;   /* reticle max radius — timing.js mirrors as R_OUTER  */
  --woc-ring-perfect: 34px;  /* perfect-band radius — timing.js mirrors as R_PERFECT */
  --woc-compass-r: 150px;    /* compass label ring — just outside the ring's outer  */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--field-deep); font-family: var(--font-body); color: var(--cream); }

#app { position: fixed; inset: 0; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* layers */
.hud, .screens, .feedback, .perf { position: absolute; inset: 0; pointer-events: none; }
.screens { pointer-events: auto; }
.hud[hidden], .perf[hidden] { display: none; }

/* shared bits the UI modules build on */
.btn {
  pointer-events: auto; cursor: pointer; border: 1px solid var(--brass);
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.95rem 1.6rem; background: transparent; color: var(--cream);
  transition: background-color 140ms ease, transform 120ms ease;
  min-height: var(--touch-min); min-width: var(--touch-min);   /* thumb-friendly */
}
.btn:hover { background: rgba(198, 161, 91, 0.14); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ball); border-color: var(--ball); color: var(--paper); }
.btn-primary:hover { background: var(--ball-deep); }
:focus-visible { outline: 3px solid var(--ball); outline-offset: 3px; }

.panel {
  background: color-mix(in srgb, var(--field-deep) 92%, black);
  border: 1px solid var(--brass-soft);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}

/* Top-right music / sound mute toggle — "Long Room" sibling of the settings gear
   (mirrors .woc-gear in screens.js: 44px brass roundel, field-deep fill). Always on
   top of the canvas + HUD, pointer-events auto so it's clickable in any game state. */
.woc-mute {
  position: absolute; z-index: 65; pointer-events: auto; cursor: pointer;
  top: calc(var(--safe-t) + 14px); right: calc(var(--safe-r) + 14px);
  width: var(--touch-min); height: var(--touch-min); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--field-deep) 84%, black); color: var(--brass);
  border: 1px solid var(--brass-soft); font-size: 1.2rem; line-height: 1;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
  transition: background-color .14s ease, transform .12s ease, color .14s ease;
}
.woc-mute:hover { background: rgba(198, 161, 91, .16); }
.woc-mute:active { transform: translateY(1px); }
.woc-mute.is-muted { color: var(--ball); border-color: color-mix(in srgb, var(--ball) 55%, var(--brass-soft)); }

/* Recenter-camera button — sibling of the mute roundel, sitting one slot to its LEFT.
   Snaps the drag-to-look orbit back to the default batting view. Shown only in play. */
.woc-cambtn {
  position: absolute; z-index: 65; pointer-events: auto; cursor: pointer;
  top: calc(var(--safe-t) + 14px); right: calc(var(--safe-r) + 14px + var(--touch-min) + 10px);
  width: var(--touch-min); height: var(--touch-min); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--field-deep) 84%, black); color: var(--brass);
  border: 1px solid var(--brass-soft); font-size: 1.35rem; line-height: 1;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
  transition: background-color .14s ease, transform .12s ease, color .14s ease;
}
.woc-cambtn:hover { background: rgba(198, 161, 91, .16); }
.woc-cambtn:active { transform: translateY(1px); }
.woc-cambtn[hidden] { display: none; }

.mono-label {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream-dim);
}
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.03em; }

.perf {
  inset: auto auto 8px 8px; width: auto; height: auto;
  font-family: var(--font-mono); font-size: 11px; color: var(--perf-ink);
  background: rgba(4, 29, 21, 0.8); padding: 6px 9px; border: 1px solid var(--brass-soft);
  pointer-events: none; white-space: pre; z-index: 60;
}

/* Portrait / small-screen: shrink the cluster so the compass stays inside the
   thumb arc and never spills off a narrow viewport. Both modules inherit this. */
@media (max-width: 480px), (max-height: 560px) { :root { --woc-cluster-scale: 0.82; } }
@media (max-width: 360px)                       { :root { --woc-cluster-scale: 0.70; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  /* Kill the shrinking ring; ui/timing.js swaps in a numeric countdown instead. */
  .woc-ring-reticle, .woc-ring-burst { display: none !important; }
  .woc-ring-count { display: block !important; }
}