:root {
  --cream: #f8f3ea;
  --amber: #f0b052;
  --ink: #0a0b0e;
  --panel: rgba(10, 11, 14, 0.82);
  --parchment: #e6d6b5;
  --brown: #2e2117;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--cream);
  font-family: Roboto, Arial, sans-serif; -webkit-tap-highlight-color: transparent; user-select: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: 700 15px Roboto, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream);
  background: var(--panel); border: 1px solid rgba(240, 176, 82, 0.45); border-radius: 6px; padding: 10px 14px; cursor: pointer; }
button:active { background: var(--amber); color: var(--ink); }
[hidden] { display: none !important; }

#reticle { position: fixed; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4); pointer-events: none; }
#status { position: fixed; left: 16px; top: 14px; font: 900 13px Roboto; letter-spacing: 0.12em; color: var(--amber); pointer-events: none;
  padding-top: env(safe-area-inset-top); }
#label { position: fixed; left: 0; top: 0; pointer-events: none; text-align: center; padding: 6px 12px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.55); white-space: nowrap; }
#label b { display: block; font: 900 20px Roboto; letter-spacing: 0.02em; text-transform: uppercase; }
#label span { font: 300 italic 15px Roboto; color: var(--amber); }
#hint { position: fixed; left: 50%; top: calc(50% + 40px); transform: translateX(-50%); font: 700 14px Roboto; color: #ffe9cc;
  text-shadow: 0 1px 4px #000; pointer-events: none; white-space: nowrap; }
#toast { position: fixed; left: 50%; top: 18px; transform: translate(-50%, -20px); opacity: 0; transition: 0.25s;
  background: var(--panel); padding: 12px 22px; border-radius: 6px; font: 700 16px Roboto; max-width: 92vw; text-align: center; pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

#topbar { position: fixed; right: 12px; top: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 70vw;
  padding-top: env(safe-area-inset-top); }
#topbar button { padding: 8px 12px; font-size: 13px; }
.teacher-only, .lecture-only { display: none; }
body.teacher .teacher-only, body.lecture .lecture-only { display: inline-block; }
[data-ui="mic"].off { opacity: 0.5; text-decoration: line-through; }

#actions { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px;
  flex-wrap: wrap; justify-content: center; max-width: 96vw; }
#actions .title { width: 100%; text-align: center; font: 900 14px Roboto; letter-spacing: 0.06em; text-transform: uppercase;
  text-shadow: 0 1px 4px #000; }

#stick { position: fixed; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); display: none; pointer-events: none; }
#stick.on { display: block; }
#stick .knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(240, 176, 82, 0.6); }

#quest { position: fixed; right: 16px; top: 60px; width: min(440px, 92vw); max-height: 78vh; overflow: auto; padding: 22px 26px;
  background: var(--parchment); color: var(--brown); border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
#quest h2 { margin: 0; font: 900 24px Roboto; letter-spacing: 0.08em; }
#quest .sub { margin: 2px 0 12px; color: #8a7a62; font-size: 14px; }
#quest ol { margin: 0; padding-left: 22px; line-height: 1.55; font-size: 17px; }
#quest li.found { color: #8a7a62; }
#quest li em { font: 900 12px Roboto; color: #b5482f; font-style: normal; letter-spacing: 0.08em; }
#quest button { margin-top: 14px; color: var(--brown); background: transparent; border-color: #8a7a62; }

#viewer { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 16px; gap: 12px; }
#viewer img { max-width: 96vw; max-height: 74vh; object-fit: contain; box-shadow: 0 0 40px rgba(60, 120, 220, 0.25); }
#viewer p { margin: 0; text-align: center; font-size: 18px; max-width: 900px; }
#viewer small { color: #cfc6b8; font-size: 14px; }

#lecture-dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 92vw); padding: 24px;
  background: #121318; border: 1px solid rgba(240, 176, 82, 0.4); border-radius: 8px; display: flex; flex-direction: column; gap: 12px;
  user-select: text; }
#lecture-dialog h2 { margin: 0 0 4px; font: 900 22px Roboto; letter-spacing: 0.1em; color: var(--amber); }
#lecture-dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #cfc6b8; }
#lecture-dialog label.check { flex-direction: row; align-items: center; gap: 8px; }
#lecture-dialog input:not([type]), #lecture-dialog input[inputmode] { font: 400 17px Roboto; padding: 10px; border-radius: 4px; border: 1px solid #444;
  background: #0b0c10; color: var(--cream); }
#lecture-dialog .row { display: flex; gap: 8px; justify-content: flex-end; }

#loading { position: fixed; inset: 0; background: radial-gradient(circle at 50% 40%, #1c2232, #07080b 70%); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 24px; transition: opacity 0.8s; z-index: 10; }
#loading.done { opacity: 0; pointer-events: none; }
#loading h1 { margin: 0; font: 900 clamp(34px, 7vw, 72px) Roboto; line-height: 0.95; letter-spacing: 0.02em; }
#loading .text { color: var(--amber); font: 300 clamp(15px, 2.4vw, 20px) Roboto; }
#loading .progress { width: min(360px, 80vw); height: 3px; background: #333; margin: 18px 0; }
#loading .bar { height: 100%; width: 0; background: var(--amber); transition: width 0.3s; }
#loading .help { color: #9a9488; font-size: 14px; max-width: 640px; }
.touch-device #loading .desktop, body:not(.touch-device) #loading .touch { display: none; }
@media (pointer: coarse) { #loading .desktop { display: none; } #loading .touch { display: block; } #reticle, #hint { display: none; } }
@media (pointer: fine) { #loading .touch { display: none; } }