/* rules.md: Arial only, minimal text, large. Everything sized in vh/vw so the
   projector's resolution does not matter.
   This is the base layer only — no menu, no HUD, no score. Add your game's
   surfaces below, or copy optional/menu-ui.js and its CSS if you need modes. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: Arial, sans-serif; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
/* stage vignette: a soft frame that guides the eye to the play area */
#ui::before { content: ''; position: absolute; inset: 0; pointer-events: none;
              background: radial-gradient(ellipse 82% 68% at 50% 52%,
                          transparent 62%, rgba(18, 38, 22, .18) 100%); }
#ui * { pointer-events: auto; }
.hidden { display: none !important; }

/* --- the dwell plate: presence over a large static region commits it ------
   Large by default (36vw x 12vh) because a shadow tracker is imprecise and
   the players may be too. Its own edge (a shadow ring, not a border — a
   border would shrink the padding box and inset the fill) so it reads over
   any 3D backdrop: WCAG 1.4.11. */
.dwell-target { position: fixed; z-index: 60; overflow: hidden; display: flex;
                align-items: center; justify-content: center;
                left: 50%; bottom: 3vh; transform: translateX(-50%);
                width: 36vw; min-height: 12vh; background: #35b6b0;
                border-radius: 2vh;
                box-shadow: 0 0 0 .3vh #1b1b1b, 0 0.8vh 2vh rgba(0,0,0,.3); }
/* a plate that has just appeared and is not yet listening (dwell.js ARM_DELAY_MS) */
.dwell-target.arming { opacity: .55; }
.dwell-label { position: relative; z-index: 1; color: #1b1b1b;
               font: bold 6vh Arial, sans-serif; }
/* the fill is SCALED, never resized: `width` is layout and would restyle,
   relayout and repaint the plate's blurred shadow every single frame */
.dwell-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
              transform: scaleX(0); transform-origin: left;
              background: rgba(255,200,74,.85); }

/* asset load failure */
#ui.fatal { display: flex; align-items: center; justify-content: center; padding: 4vh;
            background: #9ad6e8; text-align: center;
            font: bold 6vh Arial, sans-serif; color: #1b1b1b; }

/* dev-only FPS/latency readout — perf.js creates the node, and only in dev */
#perf { position: fixed; top: 8px; right: 8px; color: #fff; background: rgba(0,0,0,.5);
        font: 14px Arial; padding: 6px 10px; border-radius: 6px; pointer-events: none; z-index: 99; }

/* --- operator tuner (C): setup tool with a real mouse, not gameplay --- */
.tuner { position: fixed; top: 8px; left: 8px; z-index: 100; background: rgba(20,20,20,.92);
         color: #fff; padding: 12px 14px; border-radius: 10px; font: 13px Arial; width: 300px; }
.tuner label { display: grid; grid-template-columns: 1fr 110px 44px; gap: 6px; align-items: center; margin: 4px 0; }
.tuner-row { display: flex; gap: 8px; margin-top: 8px; }
.tuner button { flex: 1; padding: 6px; font: 13px Arial; border: 0; border-radius: 6px; cursor: pointer; }
.tuner-rec button { background: #7a2a2a; color: #fff; }
.tuner-rec-status { margin-top: 6px; font: 12px Arial; color: #ffc84a; min-height: 14px; }
.tuner-gear { position: fixed; bottom: 8px; left: 8px; z-index: 100; font-size: 22px;
              cursor: pointer; opacity: .5; user-select: none; }
.tuner-gear:hover { opacity: 1; }