/* Hands-free chess (play/chess-gaze.html) and the head-and-eyes pointer (gaze-cam.js): big squares and big buttons,
   a ring that fills while you rest on something, and the calibration dots. */
.gz-consent { border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px; background: var(--surface); display: grid; gap: 12px; margin-bottom: 22px; }
.gz-consent p { margin: 0; }
.gz-play { display: grid; gap: 14px; width: min(100%, 680px); }
html.gz-on .gz-play { width: min(100%, 680px, max(320px, calc(100svh - 230px))); }   /* the whole board on screen while the camera steers */
.gz-status { margin: 0; font-family: var(--font-data); font-size: var(--step-0); color: var(--ink); min-height: 1.5em; }
.gz-board { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); aspect-ratio: 1; width: 100%; border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(237, 231, 219, 0.14), 0 18px 40px rgba(0, 0, 0, 0.45); container-type: inline-size; }
.gz-board.is-wait { cursor: progress; }
.gz-sq { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 0; font: inherit; color: inherit; cursor: default; overflow: hidden; }
.gz-sq.l { background: #d9cfbd; }
.gz-sq.d { background: #8a7259; }
.gz-sq.own, .gz-sq.t-dot, .gz-sq.t-cap, .gz-sq.sel { cursor: pointer; }
.gz-sq.last::before { content: ""; position: absolute; inset: 0; background: rgba(255, 174, 74, 0.34); }
.gz-sq.sel::before { content: ""; position: absolute; inset: 0; background: rgba(255, 174, 74, 0.32); box-shadow: inset 0 0 0 4px #ffae4a; }
.gz-sq.t-dot::after { content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(40, 30, 20, 0.42); }
.gz-sq.t-cap::after { content: ""; position: absolute; inset: 5%; border-radius: 50%; box-shadow: inset 0 0 0 6px rgba(40, 30, 20, 0.4); }
.gz-sq.check::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 74, 61, 0.85) 0%, rgba(255, 74, 61, 0.35) 45%, transparent 72%); }
.gz-sq:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #1c63d6, inset 0 0 0 5px #fff; z-index: 1; }
.gz-sq.gz-hover { box-shadow: inset 0 0 0 4px #7fb6ff; z-index: 1; }
.gz-pc { position: relative; z-index: 1; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", "DejaVu Sans", serif; font-size: 10.6cqi; line-height: 1; pointer-events: none; }
.gz-pc.w { color: #fffaf0; text-shadow: 0 0 1px #2c241b, 0 0 1px #2c241b, 0 1px 1px #2c241b, 0 4px 8px rgba(0, 0, 0, 0.35); }
.gz-pc.b { color: #1b1611; text-shadow: 0 0 1px rgba(255, 248, 230, 0.4), 0 4px 8px rgba(0, 0, 0, 0.35); }
.gz-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.gz-big { min-height: 56px; padding: 14px 22px; font-size: var(--step-0); cursor: pointer; }
.gz-big:disabled { opacity: 0.4; cursor: default; }
.gz-big.gz-hover { box-shadow: 0 0 0 4px #7fb6ff; }
.gz-cam-only { display: none; }
html.gz-on .gz-cam-only { display: flex; }
.gz-moves { min-height: 1.4em; overflow-wrap: anywhere; }
.gz-settings { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 14px 18px; align-items: center; margin-top: 18px; max-width: 560px; }
.gz-settings select, .gz-settings input[type="range"] { width: 100%; min-height: 40px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; }
.gz-settings .gz-check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; min-height: 40px; }
@media (max-width: 520px) { .gz-settings { grid-template-columns: minmax(0, 1fr); gap: 6px; } .gz-settings .gz-check { margin-top: 8px; } }

/* the small preview: your face, mirrored, with the points the pointer reads */
.gz-cam { position: fixed; right: 16px; bottom: 16px; width: 168px; height: 126px; border: 1px solid #444; border-radius: 6px; overflow: hidden; background: #000; pointer-events: none; z-index: 900; }
.gz-cam video, .gz-cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gz-cam video { transform: scaleX(-1); opacity: 0.55; }
.gz-cam[hidden] { display: none; }

/* the pointer: the ring snaps to what it will choose and fills as the dwell runs; the dot is where the head points */
.gz-pointer { --p: 0; position: fixed; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; pointer-events: none; z-index: 1000;
  border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 0 18px rgba(127, 182, 255, 0.4);
  background: conic-gradient(rgba(255, 210, 122, 0.85) calc(var(--p) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  transition: transform 90ms linear; }
.gz-pointer.on-target { border-color: #7fb6ff; }
.gz-dot { position: fixed; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(127, 182, 255, 0.75); pointer-events: none; z-index: 1000; }
.gz-pointer[hidden], .gz-dot[hidden] { display: none; }

/* calibration: the screen goes dark and a dot visits each place in turn */
.gz-cal { position: fixed; inset: 0; z-index: 1001; background: rgba(11, 12, 16, 0.97); }
.gz-cal-say { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); width: min(90vw, 560px); margin: 0; text-align: center; font-family: var(--font-data); font-size: var(--step-1); color: var(--ink); }
.gz-cal-dot { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 0 6px rgba(255, 210, 122, 0.25), 0 0 30px rgba(255, 210, 122, 0.6);
  transition: left 0.45s var(--ease-out), top 0.45s var(--ease-out); }
.gz-cal-dot::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #0b0c10; }
.gz-cal-dot.gz-go { animation: gz-shrink 1.8s var(--ease-out) both; }
.gz-cal-dot[hidden] { display: none; }
@keyframes gz-shrink { from { transform: scale(1.6); } to { transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .gz-cal-dot, .gz-pointer { transition: none; } .gz-cal-dot.gz-go { animation: none; } }