:root{color-scheme:dark;--bg:#070b15;--gold:#dfc38f;--cream:#f8e8c9;--cold:#a8e6da}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{height:100%;width:100%;margin:0;background:var(--bg);color:var(--cream);font-family:system-ui,'Segoe UI',sans-serif;overflow:hidden}
button,a{color:inherit;font:inherit}a{text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.realm{position:relative;height:100dvh;min-height:430px;overflow:hidden;background:radial-gradient(ellipse at 50% 46%,#1b2940,#090e1d 68%,#050812)}
#space{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.noise{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 54%,transparent 28%,#03070ed8 100%)}
.header{position:absolute;z-index:5;top:0;left:0;right:0;padding:25px clamp(15px,3vw,40px);display:flex;justify-content:space-between;align-items:center;gap:12px}
.header>a{font-family:Georgia,serif;letter-spacing:.13em;font-size:22px;white-space:nowrap}.header>a:first-letter{color:var(--gold)}.header>a span{font-size:14px}
.chapter{font-family:Georgia,serif;letter-spacing:.17em;font-size:13px;color:#c7b995}.chapter .dot{color:#7d877f}
.tools{display:flex;gap:8px}.tools>*{height:42px;width:42px;display:grid;place-items:center;background:#0e192c8f;border:1px solid #dfc38f4d;border-radius:11px;font-size:21px}.tools>*:hover{background:#cbab7325}
.centerpiece{position:absolute;z-index:3;top:16%;bottom:33%;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.symbol-aura{position:absolute;width:min(450px,75vw);height:min(450px,75vw);border-radius:50%;background:radial-gradient(circle,#f5ce9b27 1%,#a3ccdb16 39%,transparent 72%);filter:blur(22px);transition:background 1s,transform 1s;animation:breathe 5s ease-in-out infinite}
.rune{pointer-events:auto;position:relative;z-index:3;background:transparent;border:0;font:clamp(135px,26vw,280px)/.9 Georgia,'Times New Roman',serif;color:#e9cf9c;text-shadow:0 0 32px #e7c78d91,0 0 130px #b0c8cd50;min-width:180px;min-height:210px;filter:drop-shadow(0 20px 25px #0008);transition:color .6s,transform .6s,text-shadow .6s;animation:float 5s ease-in-out infinite}
.rune:hover{color:#fff0cd;text-shadow:0 0 38px #efd5b1,0 0 160px #bde9e267}.rune.marked{color:#fdf0ce}.rune.done{color:#9ae8df;text-shadow:0 0 45px #a9e8df,0 0 120px #77d8eabb;transform:scale(.8)}
.instruction{position:relative;font-size:11px;letter-spacing:.3em;color:#cfbe9d;text-shadow:0 0 15px #050b12;margin-top:8px}
.answers{position:absolute;inset:10% 0;pointer-events:none;overflow:hidden;max-width:1100px;margin:auto;z-index:2}
.answers>span{position:absolute;font:clamp(20px,5vw,50px) Georgia,serif;color:#dfc592;opacity:0;text-shadow:0 0 24px #d4bc8e;animation:echo 2.8s ease forwards}
@keyframes echo{5%{opacity:.76}80%{opacity:.32}100%{opacity:0;transform:translateY(-32px)}}
.archive-clock{position:relative;z-index:3;font:11px system-ui,sans-serif;letter-spacing:.24em;color:#ecd5a2;
 text-shadow:0 0 22px #e7ba7a;min-height:15px}
.mirror-evidence{position:relative;z-index:4;display:flex;align-items:center;gap:17px;padding:9px 17px;
 background:linear-gradient(110deg,#071521b5,#123343a1);border:1px solid #a7d9cb6c;border-radius:13px;
 box-shadow:0 0 28px #82d8c139;animation:appear .65s ease-out;pointer-events:none}
.mirror-evidence span{font-size:10px;letter-spacing:.11em;color:#d4e7d7}
.mirror-evidence strong{font:35px Georgia,serif;color:#adf1df;text-shadow:0 0 28px #a0e8dc}
.reveal-proof{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:min(520px,95vw);width:100%}
.reveal-proof span{border:1px solid #d9ba826a;border-radius:12px;background:#0e2433ad;padding:14px 10px;
 font:11px system-ui,sans-serif;letter-spacing:.08em;color:#9bd6d2}
.reveal-proof b{display:block;margin-top:9px;font-size:11px;color:#f0d6a4}
@media(max-width:640px){.archive-clock{font-size:10px}.mirror-evidence{gap:10px;padding:6px 11px}.mirror-evidence span{font-size:9px}
 .mirror-evidence strong{font-size:27px}.reveal-proof{gap:7px}.reveal-proof span{font-size:9px;padding:12px 8px}}
.floorline{position:absolute;left:18%;right:18%;top:70%;height:1px;background:radial-gradient(ellipse,#eacb9363,transparent 65%);box-shadow:0 0 65px 15px #abdfbd14;pointer-events:none}
.hud{position:absolute;z-index:4;bottom:90px;left:50%;transform:translateX(-50%);min-width:min(500px,90vw);padding:16px 20px;display:flex;align-items:center;justify-content:space-around;gap:11px;background:#0a1525b0;backdrop-filter:blur(12px);border:1px solid #c8a87c42;border-radius:17px}
.hud-item{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;font:22px Georgia,serif;min-width:90px;white-space:nowrap}.hud-item small{font:8px/1.4 system-ui,sans-serif;letter-spacing:.18em;color:#a9b5b5}.hud-divider{height:35px;width:1px;background:#dec39333}.hud-icon{color:#a8e4db;font-size:18px}
.way{position:absolute;z-index:5;bottom:24px;left:clamp(10px,2vw,34px);display:flex;align-items:center;gap:10px}.way button{width:43px;height:43px;display:grid;place-items:center;background:#0d192abf;border:1px solid #e1c38f53;border-radius:11px;font-size:25px}.way-move{font:9px system-ui,sans-serif;letter-spacing:.1em;color:#b8b4a9}.way-move span{padding:0 5px;color:#dfc38f}
.footer{position:absolute;z-index:4;bottom:15px;right:20px;display:flex;align-items:center;gap:20px;color:#a8a796;font:9px system-ui,sans-serif;letter-spacing:.1em}.footer>span:last-child{display:none}
.micro{position:absolute;z-index:9;top:95px;left:50%;transform:translate(-50%,-9px);opacity:0;transition:.3s;pointer-events:none;background:#0c1c2bcf;border:1px solid #e4c39155;border-radius:10px;padding:11px 17px;font-size:11px;letter-spacing:.1em;text-align:center;white-space:nowrap}.micro.show{opacity:1;transform:translate(-50%,0)}
.reveal{position:absolute;z-index:10;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;background:radial-gradient(ellipse at center,#173a47f4,#070c17fa 70%);text-align:center;animation:appear .9s ease}
.reveal-small{font:12px Georgia,serif;letter-spacing:.18em;color:#d3b886}.reveal-glyph{font:clamp(95px,22vw,220px)/1 Georgia,serif;color:#f0dcac;text-shadow:0 0 35px #a3ecdf88}.reveal-glyph span{color:#93ded7}
.reveal p{font:21px/1.6 Georgia,serif;letter-spacing:.19em}.reveal-link{padding:15px 24px;border-radius:9px;border:1px solid #e5d3a5;background:#ddc494;color:#121b24;font-size:11px;font-weight:700;letter-spacing:.12em}
#dismiss{position:absolute;top:25px;right:25px;font-size:26px;background:transparent;border:0}
@keyframes breathe{50%{opacity:.5;transform:scale(1.1)}}@keyframes float{50%{translate:0 -8px}}@keyframes appear{from{opacity:0}to{opacity:1}}
@media(max-width:640px){.header{padding:15px 12px}.header>a span{display:none}.header>a{font-size:28px}.chapter{font-size:11px}.tools>*{height:38px;width:38px}.centerpiece{top:17%;bottom:36%}.rune{min-height:170px}.hud{bottom:104px;padding:13px 10px;gap:5px;min-width:90vw}.hud-item{font-size:19px;min-width:75px}.hud-item small{font-size:7px}.way{bottom:45px;left:12px}.way-move{max-width:195px;font-size:8px;line-height:1.4}.footer{bottom:15px;left:13px;right:auto;font-size:8px}.reveal p{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* The queue is a genuine live WebSocket state, not a loading animation. */
.queue-screen{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;
  background:radial-gradient(ellipse at 50% 38%,#23354b,#0b1423 52%,#050811 100%);
  padding:80px 20px 50px;transition:opacity .65s,visibility .65s}
.queue-screen.entered{opacity:0;visibility:hidden;pointer-events:none}
.queue-aura{pointer-events:none;position:absolute;width:min(500px,95vw);height:min(500px,95vw);
  border-radius:50%;background:radial-gradient(circle,#f6d29d33,#b5deda17 40%,transparent 72%);
  filter:blur(26px);animation:breathe 5s ease-in-out infinite}
.queue-sigil{position:relative;color:#e6c894;font:80px Georgia,serif;line-height:1;text-shadow:0 0 45px #e8d2a890;animation:float 5s ease-in-out infinite}
.queue-world{font:14px Georgia,serif;letter-spacing:.2em;color:#d3c1a2}
.queue-caption{font-size:11px;letter-spacing:.24em;color:#c6c9c5;min-height:16px}
.queue-position-wrap{display:flex;justify-content:center;align-items:baseline;gap:3px;min-height:130px}
.queue-prefix{font:22px Georgia,serif;color:#bfa67f}
.queue-position{font:clamp(92px,19vw,140px)/1 Georgia,serif;color:#f8dfae;
  text-shadow:0 0 32px #e6c892aa,0 0 100px #b6e1dd35;font-variant-numeric:tabular-nums}
.queue-position.shift{animation:queue-advance .52s ease-out}
@keyframes queue-advance{0%{opacity:.3;transform:translateY(24px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
.queue-progress{width:min(350px,80vw);height:3px;border-radius:9px;overflow:hidden;background:#a8b4b52a}
.queue-progress-fill{width:0%;height:100%;background:linear-gradient(90deg,#7ec4c4,#ecd29f);transition:width .8s}
.queue-details{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:8px}
.queue-details>span:not(.queue-separator){display:flex;flex-direction:column;gap:8px;min-width:105px}
.queue-details b{font:26px Georgia,serif;color:#eddbba;font-variant-numeric:tabular-nums}
.queue-details small{font-size:9px;letter-spacing:.13em;color:#a9b8bc}
.queue-separator{font:22px Georgia,serif;color:#d6b889}
.queue-footnote{margin-top:14px;font-size:10px;letter-spacing:.16em;color:#aeb8b9}
.queue-return{position:absolute;left:25px;bottom:25px;border:1px solid #e5cd9561;border-radius:11px;width:45px;height:45px;display:grid;place-items:center;font-size:27px}
@media(max-width:600px){.queue-screen{gap:12px}.queue-sigil{font-size:64px}.queue-position-wrap{min-height:110px}.queue-world{font-size:12px}.queue-details{gap:12px}.queue-details>span:not(.queue-separator){min-width:88px}.queue-footnote{font-size:9px}}

/* The chamber is always alive: a GPU-friendly, touch-through Canvas layer. */
#living{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.96}
#parallaxVeil{position:absolute;z-index:2;inset:-10%;pointer-events:none;
  background:radial-gradient(ellipse at 55% 35%,rgba(154,234,222,.065),transparent 54%);
  will-change:transform;transition:opacity .8s;opacity:.85}
.tools{align-items:center}
.tools button.sensor-on{border-color:#91e0d0;background:#173b4269;color:#b9faed;box-shadow:0 0 17px #80dedb30}
.tools button.broadcast-on{border-color:#e6b973;background:#5b3f287d;color:#fff2ca;box-shadow:0 0 25px #f2bd7880;animation:breathe 3s ease-in-out infinite}
.tools button.sensor-denied{opacity:.45}
.senses-status{position:absolute;left:50%;transform:translateX(-50%);z-index:6;bottom:192px;
  display:flex;justify-content:center;align-items:center;gap:8px;max-width:95%;
  white-space:nowrap;text-align:center;font:9px system-ui,sans-serif;letter-spacing:.09em;
  color:#c4d6ce;text-shadow:0 0 13px #000;background:#071520ae;
  border:1px solid #bcdfc43c;border-radius:25px;padding:10px 14px;backdrop-filter:blur(10px)}
.senses-status .listening{color:#a9ffdd}
.senses-status .broadcasting{color:#f7cb88;font-weight:bold}
.gesture-discovery{position:absolute;z-index:4;left:50%;top:calc(50% + 16vh);transform:translateX(-50%);
  color:#d9cca4;font-size:13px;letter-spacing:.15em;opacity:.3;
  pointer-events:none;transition:opacity .7s,filter .7s}
.gesture-discovery.awake{opacity:.95;filter:drop-shadow(0 0 15px #a0e7d0)}
#symbolAura{transition:transform .12s linear,opacity .18s}
.realm.resonating .rune{text-shadow:0 0 35px #fce3b4,0 0 100px #9af0e4,0 0 200px #7ae9e5!important}
.realm.resonating .symbol-aura{background:radial-gradient(circle,#fce9b588,#c6dfff44 45%,transparent 77%)}
@media(max-width:640px){
  .tools{gap:4px}
  .tools>*{width:35px;height:35px;min-width:35px;font-size:18px}
  .chapter{font-size:10px;letter-spacing:.12em}
  .senses-status{bottom:194px;gap:6px;padding:8px 10px;font-size:8px;letter-spacing:.02em}
  .gesture-discovery{top:calc(50% + 15vh)}
}
@media(max-width:380px){
  .header{gap:6px}.header>a{font-size:24px}.tools>*{width:32px;min-width:32px;height:32px}
  .chapter{font-size:9px}
  .senses-status{font-size:7px}
}

.chapter-question{position:relative;z-index:4;max-width:92%;font:clamp(15px,1.6vw,20px)/1.35 Georgia,serif;
 color:#f4e5c9;text-align:center;text-shadow:0 4px 18px #000;margin:0 0 12px}
.reveal p small{display:block;font:11px/1.6 system-ui,sans-serif;color:#aee6d9;letter-spacing:.11em;margin-top:13px}

.solo-entry{position:absolute;z-index:7;top:106px;left:50%;transform:translateX(-50%);
  display:grid;place-items:center;white-space:nowrap;min-width:225px;min-height:45px;
  border-radius:30px;border:1px solid #e4c794c9;background:linear-gradient(110deg,#243e3cfa,#715033e8);
  color:#ffe7b3;font-size:11px;font-weight:800;letter-spacing:.13em;
  box-shadow:0 0 30px #d9c28b53;text-shadow:0 0 10px #24272b}
.solo-entry:hover{background:#335955}
@media(max-width:640px){.solo-entry{top:79px;min-height:38px;min-width:182px;font-size:10px}}