:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #000; color: #f3f3f3; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
main, #results { box-sizing: border-box; width: min(52rem, 92vw); padding: 2rem; background: #111; border-radius: 1rem; }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin-top: 0; }
p { font-size: 1.25rem; line-height: 1.5; }
.warning { color: #ffd36a; font-weight: 700; }
button { font: inherit; font-weight: 700; padding: .9rem 1.25rem; margin: .4rem; border: 0; border-radius: .5rem; color: #171717; background: #eee; }
button:disabled { opacity: .5; }
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.games button { margin: 0; text-align: left; }
.games button.selected { background: #ffd36a; box-shadow: 0 0 0 3px #fff; }
.eye-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.eye-card { padding: 1rem; border: 1px solid #777; border-radius: .7rem; background: #252525; overflow-wrap: anywhere; }
canvas.webxr { position: fixed; inset: 0; width: 100%; height: 100%; }
#status { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); padding: .7rem 1rem; border-radius: .5rem; background: #111b; font-size: 1.1rem; pointer-events: none; z-index: 2; }
#results { margin: 2rem auto; }
.map-wrap { display: inline-block; margin: 1rem; vertical-align: top; }
.map { display: grid; grid-template-columns: repeat(10, 2rem); grid-template-rows: repeat(8, 2rem); gap: 2px; background: #181818; padding: .5rem; }
.cell { border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .65rem; text-shadow: 0 1px 2px #000; }
.time-cell.missed { background-color: transparent !important; border: 3px solid var(--miss-colour, #fff); box-sizing: border-box; font-size: 1rem; }
.time-legend { display: flex; align-items: center; gap: .45rem; margin-top: .5rem; font-size: .85rem; }
.time-legend i { display: inline-block; width: 8rem; height: .75rem; background: linear-gradient(90deg, hsl(220 80% 48%), hsl(0 80% 48%)); }
@media (max-width: 600px) { main, #results { padding: 1.2rem; } .map { grid-template-columns: repeat(10, 1.55rem); grid-template-rows: repeat(8, 1.55rem); } }
/* three.js sets canvas.style.display = "block", which beats the hidden
   attribute: the VR canvas covered the menu from load (George, 7 Nov). */
[hidden] { display: none !important; }

/* Player number (8 Nov): large enough to tap and read in the Quest browser. */
.patient-box input { font-size: 1.5rem; padding: .45rem .7rem; width: 10rem; }
.patient-box button { font-size: 1.2rem; }