:root{
  --bg:#090711; --text:#f5edf7; --muted:#b7a9c4; --gold:#d6ad60;
  --violet:#a66cff; --pink:#ff6fb1; --line:rgba(255,255,255,.13);
  --safe-bottom: env(safe-area-inset-bottom);
}
*{box-sizing:border-box}
html,body{height:100%; overflow:hidden; overscroll-behavior:none}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 20% 5%, rgba(166,108,255,.28), transparent 30%),
    radial-gradient(circle at 80% 15%, rgba(255,111,177,.18), transparent 32%),
    linear-gradient(180deg,#090711,#07050c);
  color:var(--text);
}
.grain{
  position:fixed; inset:0; pointer-events:none; opacity:.1; z-index:5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app{height:100dvh; width:100vw; position:relative; overflow:hidden}
.screen{
  position:absolute; inset:0; height:100dvh; width:100vw;
  opacity:0; pointer-events:none; transform:translateX(30px) scale(.985);
  transition:opacity .35s ease, transform .35s ease;
}
.screen.active{opacity:1; pointer-events:auto; transform:translateX(0) scale(1)}
.screen-inner{
  min-height:100dvh; display:flex; flex-direction:column; justify-content:center;
  padding:36px 20px calc(92px + var(--safe-bottom));
  max-width:720px; margin:0 auto;
}
.eye{font-size:86px; color:var(--gold); margin:8px 0 4px; text-shadow:0 0 45px rgba(214,173,96,.32)}
.eyebrow{color:var(--gold); letter-spacing:.16em; text-transform:uppercase; font-weight:800; font-size:11px; margin:0 0 10px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(44px,13vw,86px); line-height:.9; margin-bottom:18px}
h1 span{color:transparent; background:linear-gradient(90deg,var(--gold),var(--pink),var(--violet)); -webkit-background-clip:text; background-clip:text}
h2{font-size:clamp(34px,9vw,58px); line-height:.95; margin-bottom:18px}
h3{font-size:20px; margin-bottom:8px}
.lead{font-size:18px; color:var(--muted); line-height:1.45; margin-bottom:22px}
.lead.small{font-size:16px}
.button{
  width:100%; min-height:52px; margin-top:10px; border-radius:999px;
  border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.055);
  font-weight:900; font-size:15px; cursor:pointer;
}
.primary{background:linear-gradient(90deg,var(--gold),#9b6cff); color:#100b16; border:0}
.ghost{background:rgba(255,255,255,.04)}
.button:disabled{opacity:.35; cursor:not-allowed}
.choice-list,.stack{display:grid; gap:12px}
.choice-list button{
  min-height:72px; padding:14px; border-radius:22px; border:1px solid var(--line);
  background:rgba(255,255,255,.055); color:var(--text); font-size:17px; font-weight:850; text-align:left;
}
.choice-list button.selected{border-color:rgba(214,173,96,.8); background:rgba(214,173,96,.12)}
.result,.mini-card,.prompt-box,.level-card,.message{
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border-radius:24px; padding:18px;
}
.result{margin:14px 0; color:var(--muted); line-height:1.5}
.hidden{display:none}
.level-card{margin:4px 0 14px}
.fraction{color:var(--gold); letter-spacing:.16em; text-transform:uppercase; font-weight:900; font-size:12px; margin-bottom:8px}
.unlock-prompt{color:var(--muted); line-height:1.45; margin-bottom:12px}
textarea,input,select{
  width:100%; border-radius:18px; border:1px solid var(--line); background:#0c0914;
  color:var(--text); padding:14px; font-size:16px;
}
textarea{min-height:130px; resize:none}
label{color:var(--gold); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.1em}
.prompt-box{display:grid; gap:12px}
.chat-demo{display:grid; gap:12px}
.message strong{display:block; color:var(--gold); margin-bottom:5px}
.message span,.mini-card p{color:var(--muted); line-height:1.45}
.progress{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  padding:10px 16px calc(12px + var(--safe-bottom));
  background:rgba(9,7,17,.78); backdrop-filter:blur(16px); border-top:1px solid var(--line);
}
.bar{height:8px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden}
.bar span{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--pink),var(--violet)); transition:width .3s ease}
#progressText{color:var(--muted); font-size:12px; margin-top:6px; text-align:center}


.audio-lock{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.level-audio{
  width:100%;
  filter: drop-shadow(0 0 18px rgba(214,173,96,.12));
}
.audio-status{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
  margin:0;
}
.audio-status.complete{
  color:var(--gold);
  font-weight:800;
}
.audio-status.error{
  color:#ff9b9b;
}
.suno-fallback{
  font-size:13px;
  min-height:44px;
}


.level-counter{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.level-counter strong{
  color:var(--gold);
}
.no-skip{
  color:var(--gold);
  font-size:13px;
  line-height:1.4;
  font-weight:850;
  margin:0;
}
.resume-box{
  margin-top:18px;
  padding:16px;
  border-radius:24px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
}
.resume-box p{
  color:var(--muted);
  line-height:1.4;
  margin-bottom:8px;
}



/* Mobile keyboard and audio debug polish */
.screen-inner{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
body.keyboard-open .screen-inner{
  justify-content:flex-start;
  padding-top:24px;
  padding-bottom:220px;
}
.audio-debug{
  color:var(--muted);
  opacity:.85;
  font-size:12px;
  line-height:1.35;
  margin:0;
}
.level-answer{
  scroll-margin-bottom:220px;
}
.gated{
  scroll-margin-bottom:180px;
}


/* Chamber Lite */
.chamber-inner{
  justify-content:flex-start;
  padding-top:28px;
}
.chamber-tabs{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  margin:8px 0 14px;
}
.tab-btn{
  min-height:42px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  color:var(--muted);
  font-weight:850;
}
.tab-btn.active{
  color:#100b16;
  background:linear-gradient(90deg,var(--gold),#9b6cff);
  border:0;
}
.tab-panel{
  display:none;
  gap:12px;
}
.tab-panel.active{
  display:grid;
}
.reflection-prompt{
  color:var(--gold);
  font-size:20px;
  font-weight:900;
  line-height:1.15;
  margin:8px 0 14px;
}
.quiet-note{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
  margin-bottom:12px;
}
.resource-list{
  display:grid;
  gap:10px;
}
.resource-card{
  display:grid;
  gap:4px;
  text-decoration:none;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border-radius:22px;
  padding:16px;
}
.resource-card strong{
  color:var(--gold);
  line-height:1.25;
}
.resource-card span{
  color:var(--muted);
  line-height:1.35;
}
.comfort-message{
  color:var(--gold);
  font-size:22px;
  font-weight:900;
  line-height:1.2;
  margin:8px 0 12px;
}
.thought-wall{
  display:grid;
  gap:10px;
  margin-top:4px;
}
.thought-card{
  padding:14px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:var(--muted);
  line-height:1.4;
}
.stars{
  display:flex;
  gap:4px;
  margin:8px 0 12px;
}
.stars button{
  font-size:30px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.22);
  cursor:pointer;
}
.stars button.selected{
  color:var(--gold);
}
input{
  width:100%;
  border-radius:18px;
  border:1px solid var(--line);
  background:#0c0914;
  color:var(--text);
  padding:14px;
  font-size:16px;
  margin-bottom:10px;
}



/* Chamber background voice wall */
.chamber-inner{
  position:relative;
  overflow:hidden;
}
.chamber-inner > *:not(.voice-bg){
  position:relative;
  z-index:2;
}
.voice-bg{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:.18;
  mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 82%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 82%, transparent 100%);
}
.voice-track{
  position:absolute;
  inset:auto 0 0 0;
  display:grid;
  gap:18px;
  padding:20px;
  animation: voiceScroll 42s linear infinite;
}
.voice-line{
  color:rgba(255,255,255,.5);
  font-size:clamp(18px, 5vw, 34px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.03em;
  text-shadow:0 0 18px rgba(166,108,255,.18);
  transform:rotate(-1deg);
}
.voice-line:nth-child(2n){
  color:rgba(214,173,96,.42);
  transform:rotate(1deg);
  text-align:right;
}
.voice-line:nth-child(3n){
  color:rgba(255,111,177,.38);
  transform:rotate(0deg);
  text-align:center;
}
@keyframes voiceScroll{
  from{ transform:translateY(45%); }
  to{ transform:translateY(-55%); }
}

/* Better placeholder tone */
textarea::placeholder,
input::placeholder{
  color:rgba(255,255,255,.35);
  font-style:italic;
}
textarea:focus,
input:focus{
  outline:none;
  border-color:rgba(214,173,96,.8);
  box-shadow:0 0 10px rgba(214,173,96,.25);
}


/* Eye of Horus voice funnel effect */
.eye-funnel-bg{
  opacity:.24;
  mask-image:linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
}
.funnel-eye{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  color:rgba(214,173,96,.92);
  font-size:clamp(58px, 18vw, 118px);
  line-height:1;
  z-index:3;
  text-shadow:
    0 0 18px rgba(214,173,96,.55),
    0 0 44px rgba(166,108,255,.35),
    0 0 70px rgba(255,111,177,.16);
}
.funnel-eye::before{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(214,173,96,.22), transparent 62%);
  z-index:-1;
}
.funnel-track{
  position:absolute;
  inset:0;
  display:block;
  padding:0;
  animation:none;
  perspective:900px;
}
.funnel-track .voice-line{
  position:absolute;
  left:50%;
  bottom:-20%;
  width:min(96vw, 920px);
  text-align:center;
  opacity:0;
  transform-origin:center center;
  animation: funnelIntoEye 18s linear infinite;
  color:rgba(255,255,255,.48);
  font-size:clamp(17px, 5vw, 34px);
  font-weight:950;
  line-height:1.04;
  letter-spacing:-.04em;
  text-shadow:
    0 0 18px rgba(166,108,255,.24),
    0 0 36px rgba(0,0,0,.5);
}
.funnel-track .voice-line:nth-child(2n){
  color:rgba(214,173,96,.42);
}
.funnel-track .voice-line:nth-child(3n){
  color:rgba(255,111,177,.36);
}
.funnel-track .voice-line:nth-child(4n){
  color:rgba(166,108,255,.42);
}
.funnel-track .voice-line:nth-child(1){ animation-delay:0s; }
.funnel-track .voice-line:nth-child(2){ animation-delay:-1.4s; }
.funnel-track .voice-line:nth-child(3){ animation-delay:-2.8s; }
.funnel-track .voice-line:nth-child(4){ animation-delay:-4.2s; }
.funnel-track .voice-line:nth-child(5){ animation-delay:-5.6s; }
.funnel-track .voice-line:nth-child(6){ animation-delay:-7s; }
.funnel-track .voice-line:nth-child(7){ animation-delay:-8.4s; }
.funnel-track .voice-line:nth-child(8){ animation-delay:-9.8s; }
.funnel-track .voice-line:nth-child(9){ animation-delay:-11.2s; }
.funnel-track .voice-line:nth-child(10){ animation-delay:-12.6s; }
.funnel-track .voice-line:nth-child(11){ animation-delay:-14s; }
.funnel-track .voice-line:nth-child(12){ animation-delay:-15.4s; }
.funnel-track .voice-line:nth-child(n+13){ animation-delay:-16.8s; }

@keyframes funnelIntoEye{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(0) scaleX(1.85) scaleY(1.1) rotate(-2deg);
    filter:blur(1px);
  }
  10%{
    opacity:.55;
  }
  35%{
    opacity:.46;
    transform:translateX(-50%) translateY(-28vh) scaleX(1.25) scaleY(.95) rotate(1deg);
    filter:blur(.4px);
  }
  65%{
    opacity:.34;
    transform:translateX(-50%) translateY(-58vh) scaleX(.62) scaleY(.72) rotate(-1deg);
    filter:blur(.2px);
  }
  88%{
    opacity:.18;
    transform:translateX(-50%) translateY(-78vh) scaleX(.22) scaleY(.48) rotate(0deg);
    filter:blur(1.2px);
  }
  100%{
    opacity:0;
    transform:translateX(-50%) translateY(-88vh) scaleX(.03) scaleY(.28) rotate(0deg);
    filter:blur(3px);
  }
}

/* Keep Chamber content readable above the animated funnel */
.chamber-inner > *:not(.voice-bg){
  backdrop-filter: blur(1px);
}



/* Readability fix: stronger voices, protected typing zone */
.eye-funnel-bg{
  opacity:.42;
  height:55%;
  bottom:auto;
  overflow:hidden;
  mask-image:linear-gradient(to bottom, black 0%, black 74%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 74%, transparent 100%);
}

.funnel-eye{
  top:6px;
  opacity:.95;
}

.funnel-track .voice-line{
  color:rgba(255,255,255,.72);
  text-shadow:
    0 0 10px rgba(0,0,0,.9),
    0 0 22px rgba(214,173,96,.45),
    0 0 38px rgba(166,108,255,.28);
  font-size:clamp(19px, 5.8vw, 38px);
}

.funnel-track .voice-line:nth-child(2n){
  color:rgba(214,173,96,.76);
}

.funnel-track .voice-line:nth-child(3n){
  color:rgba(255,111,177,.68);
}

.funnel-track .voice-line:nth-child(4n){
  color:rgba(166,108,255,.72);
}

/* Funnel starts higher so it does not pass through the text boxes */
@keyframes funnelIntoEye{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(-8vh) scaleX(1.75) scaleY(1.06) rotate(-2deg);
    filter:blur(.8px);
  }
  10%{
    opacity:.9;
  }
  35%{
    opacity:.78;
    transform:translateX(-50%) translateY(-18vh) scaleX(1.18) scaleY(.92) rotate(1deg);
    filter:blur(.2px);
  }
  65%{
    opacity:.58;
    transform:translateX(-50%) translateY(-34vh) scaleX(.58) scaleY(.72) rotate(-1deg);
    filter:blur(.2px);
  }
  88%{
    opacity:.32;
    transform:translateX(-50%) translateY(-45vh) scaleX(.22) scaleY(.48) rotate(0deg);
    filter:blur(1px);
  }
  100%{
    opacity:0;
    transform:translateX(-50%) translateY(-52vh) scaleX(.03) scaleY(.28) rotate(0deg);
    filter:blur(3px);
  }
}

/* Keep Chamber cards and form fields clean and readable */
.chamber-inner .mini-card,
.chamber-inner .prompt-box,
.chamber-inner .resource-card,
.chamber-inner .thought-card,
.chamber-inner textarea,
.chamber-inner input{
  background-color:rgba(9,7,17,.82);
  backdrop-filter:blur(10px);
}

.chamber-inner textarea,
.chamber-inner input{
  position:relative;
  z-index:4;
}

.chamber-inner .tab-panel{
  position:relative;
  z-index:3;
}

/* Extra breathing room so typing areas sit below the funnel */
.chamber-tabs{
  margin-top:10px;
}

.tab-panel.active{
  padding-top:4px;
}