*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --navy:#0A0F1E;--gold:#C9A44C;--gold-light:#E8C87A;--stone:#C4A882;
  --orange:#FF9500;--blue:#3D8EF0;--blue-light:#7EB8F7;
  --green:#34C759;--red:#ef4444;--muted:#475569;
}
html,body{height:100%;overflow:hidden;background:var(--navy);color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;}

/* ── AUTH ─────────────────────────────────── */
#sAuth{background:linear-gradient(180deg,#050818 0%,#0A1628 60%,#050818 100%);
  justify-content:center;align-items:center;padding:40px 28px;overflow-y:auto;}
.auth-inner{width:100%;max-width:420px;}
.auth-logo{text-align:center;margin-bottom:36px;}
.auth-logo .moji{font-size:52px;display:block;margin-bottom:10px;}
.auth-logo h1{font-size:38px;font-weight:900;color:var(--gold);letter-spacing:8px;
  text-shadow:0 0 40px rgba(201,164,76,.5);}
.auth-logo p{font-size:11px;color:var(--stone);letter-spacing:3px;margin-top:6px;opacity:.8;}
.auth-card{background:rgba(13,20,33,.9);border:1px solid rgba(201,164,76,.25);
  border-radius:20px;padding:28px;backdrop-filter:blur(20px);}
.tabs{display:flex;margin-bottom:22px;border-bottom:1px solid rgba(201,164,76,.15);}
.tab{flex:1;padding:11px;text-align:center;font-size:12px;font-weight:700;letter-spacing:2px;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;
  font-family:'SF Mono',monospace;}
.tab.on{color:var(--gold);border-bottom-color:var(--gold);}
.inp{width:100%;padding:14px 16px;background:rgba(255,255,255,.07);
  border:1px solid rgba(201,164,76,.2);border-radius:12px;color:#fff;font-size:15px;
  outline:none;transition:border-color .2s;margin-bottom:12px;font-family:inherit;}
.inp:focus{border-color:var(--gold);}
.inp::placeholder{color:rgba(255,255,255,.3);}
select.inp{appearance:none;}
.auth-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--gold),#A8833A);
  border:none;border-radius:12px;color:var(--navy);font-size:15px;font-weight:800;
  cursor:pointer;letter-spacing:1px;margin-top:4px;font-family:'SF Mono',monospace;}
.auth-err{color:var(--red);font-size:13px;text-align:center;min-height:18px;margin-bottom:8px;}

/* ── INTRO ─────────────────────────────────── */
#sIntro{background:linear-gradient(180deg,#030510 0%,#080F20 50%,#030510 100%);
  justify-content:center;align-items:center;}
.rcard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;padding:0 36px;z-index:5;width:90%;max-width:380px;
  opacity:0;transition:opacity .8s;}
#card1 h1{font-size:68px;font-weight:900;color:#fff;letter-spacing:14px;
  text-shadow:0 0 80px rgba(201,164,76,.7);}
#card1 p{font-size:13px;color:var(--stone);letter-spacing:4px;margin-top:10px;opacity:.8;}
#card2 .iq-text{font-size:20px;font-weight:300;color:rgba(255,255,255,.92);
  line-height:1.8;font-style:italic;}
#card2 .iq-attr{font-size:13px;color:var(--gold);letter-spacing:2px;
  margin-top:20px;font-family:Georgia,serif;}
.door-wrap{position:absolute;inset:0;display:flex;overflow:hidden;z-index:10;pointer-events:none;}
.door-l{width:50%;height:100%;background-image:url('https://dev.cubecast.app/door_left.jpg');
  background-size:cover;background-position:right center;}
.door-r{width:50%;height:100%;background-image:url('https://dev.cubecast.app/door_right.jpg');
  background-size:cover;background-position:left center;}
.petals-wrap{position:absolute;inset:0;pointer-events:none;z-index:15;overflow:hidden;}
.petal{position:absolute;top:-20px;animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:0;}}

/* ── PRACTICE ──────────────────────────────── */
#sPractice{background:var(--navy);}
.mtn-bg{position:absolute;inset:0;
  background:url('https://dev.cubecast.app/mountain_door.jpg') center/cover;
  filter:brightness(.35) blur(2px);transform:scale(1.05);z-index:0;}
.hdr{display:flex;align-items:center;padding:13px 16px;
  background:rgba(13,20,33,.92);backdrop-filter:blur(10px);
  border-bottom:1.5px solid transparent;
  border-image:linear-gradient(90deg,var(--blue),var(--gold)) 1;
  gap:8px;flex-shrink:0;position:relative;z-index:2;}
.hbrand{flex:1;}
.hbrand h1{font-size:18px;font-weight:900;color:var(--gold);letter-spacing:4px;}
.hbrand p{font-size:9px;color:var(--blue-light);letter-spacing:1px;}
.lang-sel{padding:6px 10px;background:rgba(13,20,33,.8);
  border:1px solid rgba(201,164,76,.4);border-radius:10px;
  color:var(--gold);font-size:11px;font-weight:700;cursor:pointer;
  font-family:'SF Mono',monospace;appearance:none;}
.lvl-badge{background:linear-gradient(180deg,var(--blue),#2D6FD4);border-radius:8px;
  padding:4px 9px;text-align:center;box-shadow:0 0 8px rgba(61,142,240,.5);}
.lvl-badge .ll{font-size:7px;font-weight:700;letter-spacing:1px;}
.lvl-badge .ln{font-size:13px;font-weight:700;font-family:'SF Mono',monospace;}
.q-btn{padding:6px 10px;background:rgba(13,20,33,.8);border:1px solid var(--gold);
  border-radius:14px;color:#fff;font-size:10px;cursor:pointer;
  font-family:'SF Mono',monospace;flex-shrink:0;}
.out-btn{background:none;border:none;color:var(--muted);font-size:9px;letter-spacing:1px;
  cursor:pointer;font-family:'SF Mono',monospace;flex-shrink:0;}
.parea{flex:1;overflow-y:auto;padding:20px;position:relative;z-index:1;
  display:flex;flex-direction:column;}

/* empty */
.sec-empty{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;color:var(--muted);}
.sec-empty .big-q{font-size:48px;opacity:.4;}
.sec-empty .elbl{font-size:11px;font-weight:700;letter-spacing:3px;
  font-family:'SF Mono',monospace;}
.tap-btn{padding:12px 24px;background:none;border:1.5px solid var(--gold);
  border-radius:20px;color:var(--gold);font-size:12px;font-weight:700;
  letter-spacing:2px;cursor:pointer;font-family:'SF Mono',monospace;margin-top:8px;}

/* quote in progress */
.tier-tag{font-size:9px;color:var(--muted);letter-spacing:2px;
  font-family:'SF Mono',monospace;text-align:center;text-transform:uppercase;}
.author-tag{font-size:10px;color:var(--gold);letter-spacing:3px;
  font-family:'SF Mono',monospace;text-align:center;}
.lvl-dots{display:flex;gap:8px;justify-content:center;margin-bottom:4px;}
.ldot{width:8px;height:8px;border-radius:50%;background:rgba(201,164,76,.2);transition:all .3s;}
.ldot.active{background:var(--gold);transform:scale(1.3);}
.ldot.done{background:var(--green);}
.qcard{background:linear-gradient(135deg,rgba(26,26,62,.9),rgba(13,27,42,.8));
  border:1.5px solid rgba(201,164,76,.4);border-radius:16px;padding:24px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);}
.qcard-text{font-size:22px;font-weight:700;color:#fff;line-height:1.5;
  font-family:'SF Mono',monospace;}
.qcard-trans{font-size:16px;color:#fff;font-style:italic;line-height:1.7;border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:12px 14px;margin-top:14px;
  margin-top:12px;padding-top:10px;border-top:1px solid rgba(61,142,240,.2);}
.listen-btn{display:flex;align-items:center;gap:5px;background:none;
  border:1.5px solid var(--gold);border-radius:20px;padding:5px 12px;
  color:var(--gold);font-size:9px;font-weight:700;letter-spacing:1px;
  cursor:pointer;font-family:'SF Mono',monospace;align-self:flex-end;margin-top:8px;}

/* result */
.score-num{font-size:64px;font-weight:900;font-family:'SF Mono',monospace;line-height:1;}
.score-lbl{font-size:10px;color:var(--muted);letter-spacing:3px;
  font-family:'SF Mono',monospace;margin-top:4px;}
.teach-card{background:rgba(13,20,33,.8);border:1px solid rgba(201,164,76,.25);
  border-radius:10px;padding:14px;margin:12px 0;overflow:visible;}
.teach-lbl{font-size:9px;font-weight:700;color:var(--gold);letter-spacing:2px;
  font-family:'SF Mono',monospace;margin-bottom:8px;}
.teach-txt{font-size:14px;line-height:1.6;color:rgba(255,255,255,.9);}
.next-btn{padding:14px 28px;background:var(--green);border:none;border-radius:22px;
  color:#080d14;font-size:13px;font-weight:800;letter-spacing:1px;cursor:pointer;
  font-family:'SF Mono',monospace;box-shadow:0 0 20px rgba(52,199,89,.3);}
.try-btn{padding:12px 24px;background:none;border:1.5px solid var(--gold);
  border-radius:22px;color:var(--gold);font-size:11px;font-weight:700;
  letter-spacing:1px;cursor:pointer;font-family:'SF Mono',monospace;}
.skip-btn{background:none;border:none;color:var(--muted);font-size:13px;
  cursor:pointer;font-family:'SF Mono',monospace;}

/* trans bar */
.trans-bar{padding:8px 20px;background:rgba(8,10,20,.9);
  border-top:1px solid rgba(61,142,240,.3);backdrop-filter:blur(10px);
  position:relative;z-index:2;
  transition:transform .3s ease;}
.trans-bar-txt{font-size:14px;color:#fff;font-style:italic;
  line-height:1.5;text-align:center;}

/* bottom controls */
.bot{padding:14px 20px 36px;display:flex;flex-direction:column;align-items:center;
  gap:12px;flex-shrink:0;position:relative;z-index:2;
  background:rgba(10,15,30,.85);backdrop-filter:blur(10px);}
.idle-msg{color:var(--muted);font-size:11px;letter-spacing:1px;
  font-family:'SF Mono',monospace;padding:8px 0;}
.spk-icon{font-size:40px;animation:sp 1.3s ease-in-out infinite;}
@keyframes sp{0%,100%{transform:scale(.88);opacity:.7;}50%{transform:scale(1.1);opacity:1;}}
.phase-lbl{font-size:9px;font-weight:700;letter-spacing:3px;font-family:'SF Mono',monospace;}
.spd-wrap{width:100%;}
.spd-lbl{font-size:10px;color:var(--orange);letter-spacing:1px;text-align:center;
  margin-bottom:4px;font-family:'SF Mono',monospace;}
.spd-row{display:flex;align-items:center;gap:8px;}
.spd-row input[type=range]{flex:1;accent-color:var(--orange);}
.mic-btn{width:72px;height:72px;border-radius:50%;border:3px solid var(--green);
  background:rgba(52,199,89,.1);color:var(--green);font-size:26px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 20px rgba(52,199,89,.5);animation:gp 1.1s ease-in-out infinite;}
@keyframes gp{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
.stop-btn{width:78px;height:78px;border-radius:50%;border:3px solid var(--red);
  background:rgba(239,68,68,.1);color:var(--red);font-size:28px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 20px rgba(239,68,68,.4);animation:rp .72s ease-in-out infinite;}
@keyframes rp{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
.rec-ctrl{display:flex;align-items:flex-end;gap:24px;}
.sm-btn{display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;}
.sm-circle{width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(71,85,105,.5);display:flex;align-items:center;
  justify-content:center;font-size:18px;color:var(--muted);}
.sm-btn span{font-size:8px;color:var(--muted);letter-spacing:1px;
  font-family:'SF Mono',monospace;}

/* ── SHEET ─────────────────────────────────── */
.sheet-ov{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:100;
  display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .3s;}
.sheet-ov.open{opacity:1;pointer-events:all;}
.sheet{width:100%;background:#060810;border-radius:20px 20px 0 0;
  border-top:1px solid rgba(201,164,76,.3);padding-bottom:40px;
  max-height:85vh;overflow-y:auto;transform:translateY(100%);transition:transform .3s ease;}
.sheet-ov.open .sheet{transform:translateY(0);}
.sheet-hdr{display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid rgba(201,164,76,.15);
  position:sticky;top:0;background:#060810;z-index:2;}
.sheet-hdr h2{font-size:20px;font-weight:700;letter-spacing:3px;}
.sheet-close{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;}
.tier-sec{padding:16px 20px 0;}
.tier-hdr{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:3px;
  font-family:'SF Mono',monospace;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.tier-hdr::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08);}
.qpick{background:linear-gradient(135deg,rgba(20,20,50,.95),rgba(13,20,33,.9));
  border:1px solid rgba(201,164,76,.25);border-radius:12px;padding:16px;
  margin-bottom:10px;cursor:pointer;transition:border-color .2s;}
.qpick:active{border-color:var(--gold);}
.qpick-author{font-size:10px;color:var(--gold);letter-spacing:2px;
  font-family:'SF Mono',monospace;margin-bottom:8px;}
.qpick-text{font-size:15px;color:#fff;line-height:1.5;}
.qpick-meta{font-size:10px;color:var(--muted);margin-top:8px;font-family:'SF Mono',monospace;}

/* ── WATER DRAIN ───────────────────────────── */
.water-ov{position:fixed;inset:0;z-index:200;overflow:hidden;
  background:linear-gradient(180deg,#1a2a40 0%,#2a4060 40%,#3d5070 100%);}
.wq-box{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);
  width:88%;text-align:center;z-index:2;opacity:0;transition:opacity 1.5s;}
.wq-box.show{opacity:1;}
.wq-text{font-size:21px;font-weight:300;color:rgba(255,255,255,.9);
  line-height:1.55;margin:14px 0;font-style:italic;}
.wq-auth{font-size:14px;font-weight:500;color:var(--gold-light);}
.water-body{position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(180deg,rgba(30,100,180,.85) 0%,rgba(15,60,130,.95) 100%);
  z-index:3;}
.wave{position:absolute;top:-12px;left:0;right:0;height:24px;overflow:hidden;}
.wave svg{animation:wm 2s linear infinite;}
@keyframes wm{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── LANG SELECT ── */
.lang-card{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:20px 12px;background:rgba(13,20,33,.85);
  border:1.5px solid rgba(201,164,76,.3);border-radius:16px;
  color:#fff;font-size:28px;cursor:pointer;transition:border-color .2s;
  backdrop-filter:blur(10px);}
.lang-card:active{border-color:var(--gold);}
.lang-card span{font-size:12px;font-weight:700;letter-spacing:2px;
  font-family:'SF Mono',monospace;color:var(--gold);}

/* share button */
.share-btn{margin-top:12px;width:100%;padding:10px;background:none;
  border:1px solid rgba(201,164,76,.4);border-radius:10px;
  color:var(--gold);font-size:11px;font-weight:700;letter-spacing:2px;
  cursor:pointer;font-family:'SF Mono',monospace;}