:root{
  --bg: #0B0F1A;
  --bg-elev: #121826;
  --gold: #D9A441;
  --red: #C4302B;
  --ink: #F3F1EA;
  --ink-dim: #9AA3B5;
  --line: rgba(255,255,255,0.08);
  --radius: 20px;
  --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{
  margin:0; padding:0; height:100%; background:var(--bg); color:var(--ink);
  font-family:'Poppins', system-ui, sans-serif;
  overscroll-behavior-y: none;
}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; margin:0;}
p{margin:0;}
button{font-family:inherit; border:none; cursor:pointer; background:none; color:inherit;}

.screen{position:fixed; inset:0; display:flex; flex-direction:column;}
.hidden{display:none !important;}

/* ---------- SPLASH ---------- */
.splash{
  align-items:center; justify-content:center; text-align:center;
  background:
    radial-gradient(circle at 50% 15%, rgba(217,164,65,0.18), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(196,48,43,0.14), transparent 50%),
    var(--bg);
  padding: calc(var(--safe-top) + 24px) 32px calc(var(--safe-bottom) + 24px);
}
.splash-inner{max-width:420px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.splash-logo{width:112px; height:112px; border-radius:28px; box-shadow:0 12px 40px rgba(0,0,0,0.5); margin-bottom:6px;}
.splash-title{font-size:2.1rem; line-height:1.15; color:var(--ink);}
.splash-title .accent{color:var(--gold); font-style:italic;}
.splash-sub{color:var(--ink-dim); font-size:1rem; margin-bottom:10px;}
.splash-note{color:var(--ink-dim); font-size:0.78rem; letter-spacing:.02em; margin-top:6px;}

.btn-primary{
  background:linear-gradient(135deg, var(--gold), #b8842f);
  color:#1a1305; font-weight:700; font-size:1.05rem;
  padding:15px 34px; border-radius:999px;
  box-shadow:0 10px 24px rgba(217,164,65,0.28);
  transition:transform .15s ease;
}
.btn-primary:active{transform:scale(0.96);}
.btn-primary.small{padding:10px 22px; font-size:0.9rem;}

/* ---------- HOME ---------- */
#home{background:var(--bg); overflow-y:auto;}
.home-header{padding:calc(var(--safe-top) + 20px) 24px 6px;}
.home-header-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.brand-mark{font-size:0.75rem; color:var(--gold); letter-spacing:.04em; font-weight:600;}
.progress-mark{font-size:0.75rem; color:var(--ink-dim);}
.home-header h2{font-size:1.5rem;}
.home-sub{color:var(--ink-dim); font-size:0.9rem; margin-top:4px;}

.chapter-grid{
  padding:18px 20px calc(var(--safe-bottom) + 30px);
  display:grid; grid-template-columns:1fr; gap:12px;
}
.chapter-card{
  display:flex; align-items:center; gap:14px;
  background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px;
  text-align:left;
}
.chapter-card:active{transform:scale(0.98);}
.chapter-dot{
  width:44px; height:44px; min-width:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:600; font-size:1.1rem; color:#fff;
}
.chapter-info{flex:1; min-width:0;}
.chapter-info .num{font-size:0.72rem; color:var(--ink-dim); letter-spacing:.06em; text-transform:uppercase;}
.chapter-info .title{font-family:'Poppins',sans-serif; font-weight:600; font-size:1.02rem; margin-top:1px;}
.chapter-info .count{font-size:0.8rem; color:var(--ink-dim); margin-top:2px;}
.chapter-arrow{color:var(--ink-dim); font-size:1.2rem;}
.chapter-card.all-card{border-color:var(--gold); background:linear-gradient(135deg, rgba(217,164,65,0.12), var(--bg-elev));}

/* ---------- FEED ---------- */
#feed{background:var(--bg);}
.feed-header{
  display:flex; align-items:center; gap:12px;
  padding:calc(var(--safe-top) + 14px) 16px 12px;
  z-index:5; background:linear-gradient(to bottom, rgba(11,15,26,0.95), transparent);
  position:relative;
}
.icon-btn{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.feed-title{flex:1; display:flex; flex-direction:column; align-items:center; line-height:1.2;}
.feed-title #feedChapterTitle{font-weight:600; font-size:0.95rem;}
.feed-progress{font-size:0.72rem; color:var(--ink-dim);}
.lang-toggle{width:auto; padding:0 14px; border-radius:999px; font-weight:700; font-size:0.8rem; background:rgba(217,164,65,0.18); color:var(--gold);}

.card-scroll{
  flex:1; overflow-y:scroll; scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
}
.card-slide{
  scroll-snap-align:start; scroll-snap-stop:always;
  height:100%; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:6px 18px calc(var(--safe-bottom) + 90px);
}
.card{
  width:100%; max-width:440px; background:var(--bg-elev);
  border-radius:26px; border:1px solid var(--line);
  padding:22px 20px 20px; display:flex; flex-direction:column; gap:14px;
  max-height:100%; overflow-y:auto;
}
.card-top{display:flex; align-items:center; justify-content:space-between;}
.context-chip{
  font-size:0.72rem; font-weight:600; padding:5px 12px; border-radius:999px; color:#fff;
}
.card-index{font-size:0.72rem; color:var(--ink-dim);}

.lines{display:flex; flex-direction:column; gap:10px;}
.line{
  display:flex; flex-direction:column; gap:4px; max-width:88%;
  padding:12px 14px; border-radius:16px; background:rgba(255,255,255,0.05);
}
.line.speakerA{align-self:flex-start; border-bottom-left-radius:4px;}
.line.speakerB{align-self:flex-end; border-bottom-right-radius:4px; background:rgba(217,164,65,0.12);}
.line-de{font-size:1.05rem; font-weight:500; line-height:1.4;}
.line-en{font-size:0.86rem; color:var(--ink-dim); line-height:1.35;}
.line-audio{display:flex; gap:8px; margin-top:2px;}
.audio-btn{
  width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem;
}
.audio-btn.playing{background:var(--gold); color:#1a1305;}

.tip-box{
  background:rgba(196,48,43,0.1); border:1px solid rgba(196,48,43,0.25);
  border-radius:14px; padding:10px 14px; font-size:0.84rem; color:#f0c9c7; line-height:1.4;
}
.tip-box strong{color:var(--red);}

.card-hint{text-align:center; color:var(--ink-dim); font-size:0.72rem; padding-top:2px;}

/* ---------- TUTORIAL / OVERLAYS ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.72); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:50; padding:24px;
}
.overlay-card{
  background:var(--bg-elev); border-radius:22px; padding:28px 24px; max-width:320px;
  text-align:center; display:flex; flex-direction:column; gap:12px; border:1px solid var(--line);
}
.tutorial-swipe-icon{font-size:2rem; color:var(--gold); animation:bob 1.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

.ios-banner{
  position:fixed; left:12px; right:12px; bottom:calc(var(--safe-bottom) + 12px);
  background:var(--bg-elev); border:1px solid var(--gold);
  border-radius:16px; padding:12px 14px; display:flex; align-items:center; gap:10px;
  font-size:0.82rem; z-index:60; box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.ios-banner button{font-size:1rem; color:var(--ink-dim); padding:4px;}
.ios-share-icon{color:var(--gold);}

@media (prefers-reduced-motion: reduce){
  .tutorial-swipe-icon{animation:none;}
}