/* Glass HUD: arcade-style frosted panels floating over the play field (portrait) or standing in the side
   gutters beside it (landscape, aspect >= 5:4). Structure and layout live here; each game themes it through
   the --g-* variables below so every game keeps its own palette and fonts.
   Needs trackField() from shared/arcade/glass-hud.js, which publishes the field rectangle (--fx/--fy/--fw/--fh).

   <div class="ghud">
     <div class="gpanel g-tl"> ...rows... </div>      top-left of the field   | left gutter in landscape
     <div class="gpanel g-tr"> ...rows... </div>      top-right of the field  | right gutter in landscape
     <div class="g-tc"> ...chips... </div>            top-centre (transient)  | under the right panel
   </div>
   Rows: <div class="g-row"><small class="g-lab">1UP</small><b class="g-val">0</b></div>, .g-row.g-sub for a
   secondary line, .g-bar > i for a progress bar (width set inline), .g-chip for small transient badges. */
.play {
  --g-tint: #0b1030;        /* glass body */
  --g-edge: #7dd3fc;        /* rim light */
  --g-glow: #22d3ee;        /* outer glow and value glow */
  --g-ink: #f8fafc;         /* values */
  --g-lab: #a5b4cf;         /* labels */
  --g-font: var(--font-display);
  --g-lab-font: var(--font-ui);
  --g-gap: 6px;             /* inset from the field edge */
  --g-fs: clamp(10px, calc(var(--fw, 360px) * .032), 22px); /* scales with the field, so tablets get a bigger HUD */
}
.ghud { position: absolute; z-index: 3; pointer-events: none; left: var(--fx, 0px); top: var(--fy, 0px); width: var(--fw, 100%); height: var(--fh, 100%); font-size: var(--g-fs); }
.gpanel { position: absolute; display: flex; flex-direction: column; gap: .28em; padding: .5em .75em .55em; border-radius: .9em; min-width: 0; overflow: hidden;
  color: var(--g-ink);
  background:
    linear-gradient(155deg, rgb(255 255 255 / .16) 0%, rgb(255 255 255 / .04) 38%, transparent 60%),
    color-mix(in oklab, var(--g-tint) 42%, transparent);
  -webkit-backdrop-filter: blur(9px) saturate(1.5); backdrop-filter: blur(9px) saturate(1.5);
  border: 1px solid color-mix(in oklab, var(--g-edge) 30%, transparent);
  border-top-color: color-mix(in oklab, white 42%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -10px 18px -12px color-mix(in oklab, var(--g-glow) 45%, transparent),
    0 6px 20px rgb(0 0 0 / .35), 0 0 18px color-mix(in oklab, var(--g-glow) 18%, transparent); }
/* specular streak across the glass */
.gpanel::before { content: ""; position: absolute; inset: -40% auto auto -30%; width: 60%; height: 180%; transform: rotate(24deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .07), transparent); }
.g-tl { left: var(--g-gap); top: var(--g-gap); }
.g-tr { right: var(--g-gap); top: var(--g-gap); align-items: flex-end; text-align: right; }
.g-tc { position: absolute; left: 50%; top: var(--g-gap); transform: translateX(-50%); display: flex; gap: .4em; flex-wrap: wrap; justify-content: center; max-width: 42%; }
.g-row { display: flex; align-items: baseline; gap: .45em; white-space: nowrap; line-height: 1.05; }
.g-tr .g-row { justify-content: flex-end; }
.g-lab { font-family: var(--g-lab-font); font-size: .62em; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--g-lab); }
.g-val { font-family: var(--g-font); font-weight: 700; font-size: 1.25em; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--g-ink);
  text-shadow: 0 0 .5em color-mix(in oklab, var(--g-glow) 75%, transparent); }
.g-sub .g-val { font-size: .9em; opacity: .85; text-shadow: none; }
.g-bar { position: relative; height: .3em; min-width: 6em; border-radius: 1em; background: rgb(255 255 255 / .10); overflow: hidden; }
.g-bar > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--g-edge), var(--g-glow)); box-shadow: 0 0 .5em var(--g-glow); transition: width .25s ease-out; }
.g-chip { position: relative; display: inline-flex; align-items: center; height: 1.6em; padding: 0 .6em; border-radius: .5em; font-family: var(--g-lab-font); font-size: .66em; font-weight: 800; letter-spacing: .1em; overflow: hidden;
  color: var(--c, var(--g-ink)); background: color-mix(in oklab, var(--c, var(--g-glow)) 16%, color-mix(in oklab, var(--g-tint) 45%, transparent));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c, var(--g-glow)) 55%, transparent), 0 0 12px color-mix(in oklab, var(--c, var(--g-glow)) 30%, transparent); }

/* light theme: frosted white glass, dark ink */
:root[data-theme="light"] .play { --g-tint: #ffffff; --g-ink: #0f172a; --g-lab: #475569; }
:root[data-theme="light"] .gpanel { background: linear-gradient(155deg, rgb(255 255 255 / .7), rgb(255 255 255 / .35)), color-mix(in oklab, #fff 50%, transparent);
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgb(15 23 42 / .14); border-color: color-mix(in oklab, var(--g-edge) 45%, #cbd5e1); }
:root[data-theme="light"] .g-val { text-shadow: none; }

/* landscape: the field stands full height in the middle, panels stand in the gutters, hugging the field */
@media (min-aspect-ratio: 5/4) {
  .play { --g-fs: clamp(11px, 1.9vh, 18px); }
  .ghud { inset: 0; width: auto; height: auto; left: 0; top: 0; }
  .g-tl, .g-tr { top: calc(var(--fy, 0px) + 56px); min-width: 9.5em; max-width: 16em; padding: .8em 1em; gap: .5em; }
  .g-tl { left: auto; right: calc(100% - var(--fx, 0px) + 14px); align-items: flex-end; text-align: right; }
  .g-tl .g-row { justify-content: flex-end; }
  .g-tr { right: auto; left: calc(var(--fx, 0px) + var(--fw, 0px) + 14px); align-items: flex-start; text-align: left; }
  .g-tr .g-row { justify-content: flex-start; }
  .g-tc { left: calc(var(--fx, 0px) + var(--fw, 0px) + 14px); top: auto; bottom: calc(100% - var(--fy, 0px) - var(--fh, 0px) + 90px); transform: none; justify-content: flex-start; max-width: 16em; }
  .g-val { font-size: 1.5em; }
  .play .stage { padding: max(8px, env(safe-area-inset-top)) clamp(150px, 24vw, 340px) max(8px, env(safe-area-inset-bottom)) !important; }
}
:root[data-motion="reduced"] .gpanel::before { display: none; }