/* ==========
  Chamber of Vision — Styles
  Palette: Black #0b0e0c, Emerald #2aff88, Gold #d4af37
========== */
:root{
  --bg:#0b0e0c;
  --fg:#eef2ef;
  --muted:#9aa19c;
  --emerald:#2aff88;
  --gold:#d4af37;
  --panel:#101412;
  --panel-2:#0f1412;
  --line:#1b221e;
  --ring:#0b2619;
  --shadow: 0 12px 40px rgba(0,0,0,0.5);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";overflow:hidden}

#codeRain{position:fixed;inset:0;z-index:0;opacity:0.35;}

.view{position:fixed;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .9s ease}
.view-active{opacity:1;pointer-events:auto}

#gate .crest-wrap{position:relative;display:grid;place-items:center;filter:drop-shadow(0 0 30px rgba(42,255,136,.15));}
#gate .crest{width:220px;height:220px;animation:spin 24s linear infinite;opacity:.9}
#gate .halo{position:absolute;width:360px;height:360px;border-radius:50%;box-shadow:0 0 120px 40px rgba(212,175,55,.15) inset, 0 0 60px rgba(212,175,55,.25);filter:blur(3px);animation:pulse 7s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.75;transform:scale(1.06)}}

.lines{margin-top:20px;text-align:center;font-weight:600;letter-spacing:.5px}
.lines .line{font-size:clamp(18px,3vw,26px);opacity:0;transform:translateY(10px);animation:fadeUp .9s ease forwards}
.lines .line:nth-child(1){animation-delay:.3s}
.lines .line:nth-child(2){animation-delay:.7s}
.lines .line:nth-child(3){animation-delay:1.1s}
@keyframes fadeUp{to{opacity:1;transform:none}}

.btn{appearance:none;border:none;cursor:pointer;border-radius:14px;padding:14px 20px;font-weight:700;letter-spacing:.4px;transition:transform .08s ease, box-shadow .2s ease, background .3s ease}
.btn:active{transform:translateY(1px)}

.btn-primary{background:linear-gradient(135deg, #10381f, #0a2215);color:#e9ffef;border:1px solid #1c3b2a;box-shadow:0 0 0 2px rgba(42,255,136,.15), var(--shadow)}
.btn-primary:hover{box-shadow:0 0 0 3px rgba(42,255,136,.25), 0 12px 36px rgba(42,255,136,.12)}

.btn-secondary{background:linear-gradient(135deg, #17120b, #0e0b07);color:#fff;border:1px solid #3c2d12}
.btn-secondary:hover{box-shadow:0 0 0 3px rgba(212,175,55,.25), 0 12px 36px rgba(212,175,55,.12)}

.btn-ghost{background:transparent;color:#cfd3cf;border:1px solid #2a322d}
.btn-ghost:hover{background:#111512}

.btn-glow{background:radial-gradient(120px 40px at 50% 120%, rgba(42,255,136,.25), transparent), linear-gradient(135deg, #0e2517, #153622);border:1px solid #224232;color:#eafff4;box-shadow:0 0 0 2px rgba(42,255,136,.15), 0 10px 40px rgba(0,0,0,.4)}

#btnInitiate{margin-top:28px}
.voice-toggle{position:absolute;right:24px;top:24px;opacity:.85}
.voice-toggle input{accent-color:var(--emerald)}

.footnote{position:absolute;bottom:26px;opacity:.7;font-size:13px;letter-spacing:.3px}

/* Initiation */
#initiation .init-wrap{width:min(720px,92vw);background:linear-gradient(180deg, rgba(16,20,18,.7), rgba(12,15,13,.8));border:1px solid #1a241e;border-radius:20px;box-shadow:var(--shadow);padding:28px 24px 22px}
.init-title{margin:0 0 6px;font-size:clamp(22px,3vw,28px);letter-spacing:.6px}
.init-sub{margin:0 0 18px;color:var(--muted)}

.field{display:flex;flex-direction:column;margin:12px 0}
.field span{font-size:13px;color:#c4c9c5;margin-bottom:6px}
.field input{background:#0e1311;color:#eaf3ec;border:1px solid #25342b;border-radius:12px;padding:12px 14px;outline:none}
.field input:focus{border-color:#2d4b3a;box-shadow:0 0 0 3px rgba(42,255,136,.12)}
.field.toggle{flex-direction:row;align-items:center;gap:10px}
.field.toggle .toggle-label{color:#cbd2cd}

.ai-scroll{margin-top:18px;border-left:2px solid #1f3a2c;padding:10px 14px 6px 16px;min-height:44px;color:#dbe7df;max-height:160px;overflow:auto;background:linear-gradient(180deg, rgba(18,24,20,.4), rgba(12,16,14,.4));border-radius:10px}

.chamber-header{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid #15201a;background:linear-gradient(180deg, rgba(12,16,14,.9), rgba(12,16,14,.6));backdrop-filter:blur(6px)}
.crest-mini{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 50% 50%, rgba(42,255,136,.6), rgba(42,255,136,0) 70%);box-shadow:0 0 20px rgba(42,255,136,.4)}
.brand-top{font-size:13px;color:#c9d2cb}
.brand-sub{font-weight:700;letter-spacing:.5px}

.status-dot{margin-left:auto;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle, #2aff88, #2aff88 40%, #0e1a14 60%);box-shadow:0 0 12px #2aff88}

.orbital-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.stars{position:absolute;inset:-10%;background:radial-gradient(circle at 10% 20%, rgba(255,255,255,.12), transparent 20%), radial-gradient(circle at 80% 30%, rgba(255,255,255,.08), transparent 20%), radial-gradient(circle at 50% 80%, rgba(255,255,255,.1), transparent 20%);filter:blur(1px);opacity:.25}
.galaxy{position:absolute;inset:0;background:radial-gradient(40% 60% at 60% 40%, rgba(42,255,136,.06), transparent 60%), radial-gradient(30% 40% at 40% 60%, rgba(212,175,55,.06), transparent 60%)}

.ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(42,255,136,.12);animation:ring-spin 40s linear infinite;opacity:.5}
.ring-1{width:60vmin;height:60vmin}
.ring-2{width:80vmin;height:80vmin;animation-duration:55s}
.ring-3{width:100vmin;height:100vmin;animation-duration:70s}
@keyframes ring-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.chamber-main{position:relative;z-index:1;display:grid;place-items:center;text-align:center;padding:7vh 16px 10vh}
.chamber-main h1{margin:14px 0 6px;font-size:clamp(26px,4vw,38px)}
.time,.host{margin:2px 0 12px;color:#c8d1cb}

.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:12px 0 14px}
.badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.badge{border:1px solid #203428;padding:6px 10px;border-radius:999px;color:#d7e2da;background:linear-gradient(180deg,#101612,#0c110f)}

.badge.vix{border-color:#3b2a12;background:linear-gradient(180deg,#15110a,#0f0c07);color:#ffe7bd}

.chamber-footer{position:relative;z-index:1;text-align:center;padding:22px 12px;border-top:1px solid #15201a;background:linear-gradient(180deg, rgba(12,16,14,.6), rgba(12,16,14,.9));backdrop-filter:blur(6px)}
.glyphs{opacity:.5;margin-bottom:6px;letter-spacing:4px}
.tagline{opacity:.85;margin-bottom:4px}
.legal{opacity:.55;font-size:12px}

/* Modal */
dialog{border:none;border-radius:16px;max-width:min(560px,92vw);padding:18px;background:#0f1412;color:#e7efe9;border:1px solid #203428;box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.timeline{margin:0 0 12px 0;padding:0 0 0 16px}
.timeline li{margin:8px 0}

/* Responsive fallback for very small screens */
@media (max-width:420px){
  .lines .line{font-size:18px}
  .btn{padding:12px 14px}
  .field input{padding:10px 12px}
}