/* =============================================================
   F12 — FROM 1 TO 2   ·   styles.css
   ============================================================= */

@font-face{
  font-family:'AbarHigh';
  src:url('../assets/AbarHighFaNum-Bold.ttf') format('truetype');
  font-weight:400 900;
  font-display:swap;
}

:root{
  --bg:#050912; --bg2:#101c33; --gold:#e8a94b; --gold-soft:#f0c37e; --blue:#4fa8e0;
  --line:#2f3c5c; --cream:#f3f6fa; --cream-dim:#9fabc2; --danger:#e2897a;
  --glass:rgba(255,255,255,.06);
  --glass-brd:rgba(255,255,255,.18);
  --radius:18px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{height:100%;}
body{
  margin:0;
  font-family:'AbarHigh','Vazirmatn','Segoe UI',system-ui,sans-serif;
  background:var(--bg); color:var(--cream);
  font-size:16px; line-height:1.85; letter-spacing:.1px;
  overscroll-behavior:none;
}
body[dir="ltr"]{ letter-spacing:.2px; }

h1,h2,h3,p{margin:0;}
p{word-break:keep-all; overflow-wrap:break-word;}

.app{
  max-width:440px; margin:0 auto; min-height:100vh; min-height:100dvh;
  position:relative; overflow:hidden;
}

/* ---------------- screens ---------------- */
.screen{
  display:none;
  padding:calc(26px + var(--safe-top)) 22px calc(26px + var(--safe-bottom));
  min-height:100vh; min-height:100dvh;
}
.screen.active{display:flex; flex-direction:column;}
.content{position:relative; z-index:3; flex:1; display:flex; flex-direction:column; gap:16px;}

/* ---------------- backgrounds ---------------- */
.bg-slot{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;}
.bg-gate     {background-image:linear-gradient(180deg,rgba(0,0,0,.15),rgba(2,2,4,.55) 65%,#030405), url('../assets/img/gate.jpg');}
.bg-marble   {background-image:linear-gradient(180deg,rgba(2,2,4,.55),rgba(2,2,4,.85)), url('../assets/img/marble.jpg');}
.bg-corridor {background-image:linear-gradient(180deg,rgba(0,0,0,.35),rgba(2,2,4,.75) 70%,#030405), url('../assets/img/corridor.jpg');}

/* ---------------- liquid glass ---------------- */
.card, .ornate-frame, .text-glass{
  position:relative; overflow:hidden;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--glass-brd);
  border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.28),
             inset 0 0 40px rgba(232,169,75,.045);
}
.card{padding:20px;}
.ornate-frame{padding:22px 18px; border-color:rgba(232,169,75,.5);}
.text-glass{padding:14px 16px; border-radius:14px;}

/* specular highlight — the "liquid" sheen */
.card::before, .ornate-frame::before, .text-glass::before, .btn::before{
  content:''; position:absolute; inset:0 0 auto 0; height:52%;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));
  pointer-events:none;
}

/* ---------------- buttons ---------------- */
.btn{
  width:100%; padding:16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(16px) saturate(170%); -webkit-backdrop-filter:blur(16px) saturate(170%);
  color:var(--cream); font-size:16px; font-weight:700;
  font-family:'AbarHigh','Vazirmatn',sans-serif;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 4px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.36);
  line-height:1.5; position:relative; overflow:hidden;
  transition:transform .14s ease, box-shadow .2s ease;
}
.btn:active{transform:scale(.975);}
.btn-solid{
  background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  color:#1a1408; border:1px solid rgba(255,255,255,.4);
  box-shadow:0 4px 20px rgba(232,169,75,.35), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-ghost{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); color:var(--cream-dim);}
.btn:disabled{opacity:.4; pointer-events:none;}

/* ---------------- inputs ---------------- */
input[type=text], textarea{
  width:100%; background:rgba(255,255,255,.06);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-brd); color:var(--cream);
  border-radius:12px; padding:14px 16px; font-size:16px;
  font-family:'AbarHigh','Vazirmatn',sans-serif; line-height:1.7;
}
textarea{min-height:92px; resize:vertical;}
input::placeholder, textarea::placeholder{color:var(--cream-dim); opacity:.75;}

/* ---------------- decorative ---------------- */
.divider{display:flex; align-items:center; justify-content:center; gap:10px; margin:10px 0;}
.divider::before,.divider::after{content:''; flex:1; height:1px; max-width:70px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.divider span{color:var(--gold); font-size:12px;}
.kicker{font-size:13px; letter-spacing:.5px; color:var(--gold); margin-bottom:12px; font-weight:700;}

/* ---------------- top nav ---------------- */
.topnav{display:flex; align-items:center; gap:10px; margin:-4px 0 12px; z-index:6;}
.navbtn{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1; cursor:pointer; color:var(--cream);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(16px) saturate(170%); -webkit-backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px rgba(0,0,0,.28);
  transition:transform .14s ease;
}
.navbtn:active{transform:scale(.93);}
.navspacer{flex:1;}
body[dir="rtl"] .nav-back{transform:scaleX(1);}
body[dir="ltr"] .nav-back{transform:scaleX(-1);}

/* language + sound pills */
.pill-mini{
  height:42px; padding:0 14px; border-radius:999px; display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; cursor:pointer; color:var(--cream);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(16px) saturate(170%); -webkit-backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px rgba(0,0,0,.28);
}
.pill-mini:active{transform:scale(.95);}

/* ---------------- avatar ---------------- */
.avatar-ring{
  width:150px; height:150px; border-radius:50%; border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 0 0 6px rgba(232,169,75,.08), 0 0 30px rgba(232,169,75,.22);
  background:radial-gradient(circle,rgba(232,169,75,.08),transparent 70%);
}
.avatar-ring-inner{
  width:126px; height:126px; border-radius:50%; border:1px solid var(--gold); overflow:hidden;
  background-size:112%; background-position:center 18%; background-repeat:no-repeat;
}
.avatar-nav-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--gold); color:var(--gold);
  background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center;
  font-size:17px; cursor:pointer; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.avatar-mini{
  width:58px; height:58px; border-radius:50%; border:1px solid var(--gold); cursor:pointer; opacity:.5;
  background-size:112%; background-position:center 18%; background-repeat:no-repeat;
  transition:opacity .2s ease, box-shadow .2s ease;
}
.avatar-mini.active{opacity:1; box-shadow:0 0 16px rgba(232,169,75,.35);}

/* ---------------- goal pills ---------------- */
.pill-option{
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(16px) saturate(165%); -webkit-backdrop-filter:blur(16px) saturate(165%);
  border:1px solid rgba(232,169,75,.55); border-radius:999px; padding:16px 18px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 4px 16px rgba(0,0,0,.25);
  transition:box-shadow .2s ease, transform .14s ease;
}
.pill-option:active{transform:scale(.985);}
.pill-option.selected{box-shadow:0 0 0 2px var(--gold) inset, 0 0 22px rgba(232,169,75,.28);}
.pill-option .ic{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--gold); flex-shrink:0;
}
.pill-option .chev{color:var(--gold); font-size:16px;}

/* ---------------- xp bar ---------------- */
.xp-bar-track{height:10px; background:rgba(255,255,255,.07); border-radius:5px; overflow:hidden;
  border:1px solid var(--glass-brd);}
.xp-bar-fill{height:100%; width:0; border-radius:5px; transition:width .35s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg,var(--gold),var(--blue));}

/* ---------------- splash video ---------------- */
#intro-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  opacity:0; transition:opacity .7s ease; pointer-events:none;
}
#intro-video::-webkit-media-controls,
#intro-video::-webkit-media-controls-enclosure,
#intro-video::-webkit-media-controls-panel,
#intro-video::-webkit-media-controls-start-playback-button,
#intro-video::-webkit-media-controls-overlay-play-button,
#intro-video::-webkit-media-controls-play-button{
  display:none !important; -webkit-appearance:none !important; opacity:0 !important;
}
.splash-fade{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(3,3,5,.5) 76%,#030405 100%);
}

/* dust canvas */
#dust-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2;}

/* very subtle glow sweep — only on splash */
@keyframes glowSweep{
  0%  {transform:translateX(-130%) rotate(16deg); opacity:0;}
  18% {opacity:.10;}
  50% {opacity:.06;}
  82% {opacity:0;}
  100%{transform:translateX(230%) rotate(16deg); opacity:0;}
}
.glow-sweep{
  position:absolute; top:-30%; left:0; width:34%; height:160%; z-index:2; pointer-events:none; display:none;
  background:linear-gradient(90deg,transparent,rgba(255,244,220,.16),rgba(255,255,255,.2),rgba(255,240,205,.12),transparent);
  filter:blur(14px); animation:glowSweep 16s ease-in-out infinite;
}
#s-splash .glow-sweep{display:block;}

/* entrance motion */
@keyframes riseIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.rise{animation:riseIn 1s cubic-bezier(.2,.8,.2,1) both;}
.rise-d1{animation-delay:.12s;} .rise-d2{animation-delay:.3s;}

/* ---------------- lessons & exercises ---------------- */
.lesson-media{width:100%; border-radius:14px; display:block; margin-top:10px;}
.section-title{font-size:15px; font-weight:700; color:var(--gold); margin:4px 0 2px;}

/* ---------------- proof form ---------------- */
.proof-wrap{display:none; margin-top:12px;}
.proof-wrap.open{display:block;}
.proof-saved{font-size:13px; color:#8fd9b0;}

@media (prefers-reduced-motion: reduce){
  .rise,.glow-sweep{animation:none !important;}
  #dust-canvas{display:none;}
}