:root { --deep:#0b2a3a; --teal:#1f8a8a; --gold:#e8c26a; --ink:#f6efe0; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:#000; color:var(--ink); overflow:hidden;
  font-family: Georgia, "Times New Roman", serif; }
#ar { position:fixed; inset:0; }
#ar video { object-fit:cover; }
.screen { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:32px; text-align:center;
  background: radial-gradient(120% 80% at 50% 0%, #1b4f6b 0%, var(--deep) 55%, #061820 100%); transition:opacity .6s ease; }
.screen.leaving { opacity:0; pointer-events:none; }
.moon { width:92px; height:92px; border-radius:50%; background: radial-gradient(circle at 38% 36%, #fff6d8, var(--gold) 70%);
  box-shadow:0 0 60px 18px rgba(232,194,106,.35); margin-bottom:10px; }
h1 { font-weight:400; letter-spacing:.06em; font-size:clamp(28px,8vw,44px); margin:0; text-wrap:balance; }
.tag { margin:0; color:var(--gold); font-style:italic; font-size:18px; }
.hint { max-width:28ch; margin:6px 0 0; font:15px/1.45 system-ui, sans-serif; opacity:.8; }
.error { max-width:32ch; font:15px/1.45 system-ui, sans-serif; color:#ffd7c9; }
button { font:600 17px system-ui, sans-serif; color:var(--deep); background:var(--gold); border:0; border-radius:999px;
  padding:14px 44px; margin-top:16px; min-height:48px; cursor:pointer; }
button:active { transform:scale(.97); }
button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
button[disabled] { opacity:.6; }
#hud { position:fixed; inset:0; z-index:5; pointer-events:none; font:15px system-ui, sans-serif; }
#scanning, #caption { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(28px + env(safe-area-inset-bottom));
  background:rgba(6,24,32,.72); padding:10px 18px; border-radius:999px; display:flex; align-items:center; gap:10px;
  max-width:calc(100% - 32px); text-align:center; }
#caption { font-family:Georgia, serif; font-style:italic; font-size:17px; color:var(--gold); }
.pulse { width:10px; height:10px; border-radius:50%; background:var(--gold); flex:none; animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:.35; transform:scale(.8);} 50% { opacity:1; transform:scale(1.15);} }
#sound { pointer-events:auto; position:absolute; right:16px; top:calc(16px + env(safe-area-inset-top)); margin:0; padding:10px 16px;
  min-height:44px; font-size:14px; background:rgba(6,24,32,.72); color:var(--ink); }
[hidden] { display:none !important; }
@media (prefers-reduced-motion: reduce) { .pulse { animation:none; } .screen { transition:none; } }