@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

@font-face {
    font-family: "GentiumAlt";
    src: url("Fonts/genar102.ttf");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "GentiumAlt";
    src: url("Fonts/genai102.ttf");
    font-style: italic;
    font-weight: normal;
}

:root { --bg:#f0eeeb; --card-bg:#faf9f7; --border:#d0c8bc; --ink:#1e1a14; --dim:#6b6055; --gold:#8b6914; --gold-light:#c9a84c; --shadow:rgba(0,0,0,0.08); }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); min-height:100vh; font-family:'Crimson Text',serif; color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px 24px; font-size:18px; }
.back { position:fixed; top:20px; left:20px; }
.back a { color:var(--dim); text-decoration:none; font-size:1rem; font-family:'Cinzel',serif; }
.back a:hover { color:var(--gold); }
h1 { font-family:'Cinzel',serif; font-size:1rem; letter-spacing:0.3em; color:var(--gold); text-transform:uppercase; margin-bottom:40px; margin-top:14px; }
.progress-bar { width:420px; max-width:90%; height:5px; background:var(--border); border-radius:3px; margin-bottom:12px; overflow:hidden; }
.progress-fill { height:100%; background:var(--gold-light); border-radius:3px; transition:width 0.4s ease; }
.counter { font-size:0.85rem; color:var(--dim); letter-spacing:0.15em; margin-bottom:24px; font-family:'Cinzel',serif; }
.stage { max-width:860px; width:100%; text-align:center; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-bottom:36px; background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:36px 30px; box-shadow:0 2px 8px var(--shadow); }
.verse-display { font-family:'GentiumAlt','Gentium Plus','Gentium','Georgia',serif; font-size:clamp(1.3rem,2.8vw,1.9rem); line-height:2.2; font-style:italic; color:var(--ink); }
.word { display:inline; transition:opacity 0.4s ease; }
.word.hidden { opacity:0; }
.word.new { color:var(--gold); animation:arrive 0.8s ease forwards; }
@keyframes arrive { from{opacity:0;transform:translateY(-6px);color:var(--gold)} 80%{color:var(--gold)} to{opacity:1;transform:translateY(0);color:var(--ink)} }
.translation-line { margin-top:16px; font-size:1rem; color:var(--dim); font-style:italic; min-height:1.4em; }
.btn { background:var(--card-bg); border:2px solid var(--gold-light); color:var(--ink); font-family:'Cinzel',serif; font-size:0.9rem; letter-spacing:0.15em; padding:12px 32px; cursor:pointer; transition:all 0.2s; margin:8px; border-radius:4px; }
.btn:hover { background:#f5efd8; border-color:var(--gold); }
.btn:disabled { opacity:0.35; cursor:default; }
.btn.primary { background:var(--gold); color:white; border-color:var(--gold); }
.btn.primary:hover { background:#7a5c10; }
.hint { margin-top:28px; font-size:0.95rem; color:var(--dim); font-style:italic; text-align:center; max-width:500px; }
.controls { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }