@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; --green:#2e6b45; --green-bg:#e6f3ec; --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; padding:50px 24px 80px; 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:8px; margin-top:14px; }
.subtitle { color:var(--dim); font-size:0.95rem; margin-bottom:28px; text-align:center; }
.difficulty-bar { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; justify-content:center; }
.diff-btn { background:var(--card-bg); border:2px solid var(--border); color:var(--dim); font-family:'Cinzel',serif; font-size:0.82rem; letter-spacing:0.08em; padding:8px 18px; cursor:pointer; transition:all 0.2s; border-radius:4px; }
.diff-btn.active, .diff-btn:hover { border-color:var(--gold); color:var(--gold); background:#f5efd8; }
.score-bar { font-family:'Cinzel',serif; font-size:0.9rem; color:var(--dim); letter-spacing:0.15em; margin-bottom:18px; }
.score-bar span { color:var(--gold); font-weight:700; }
.verse-box { max-width:860px; width:100%; font-family:"GentiumAlt","Gentium Plus","Gentium","Palatino Linotype","Book Antiqua",Georgia,serif; font-size:clamp(1.25rem,2.5vw,1.75rem); line-height:3; font-style:italic; text-align:center; margin-bottom:24px; min-height:140px; background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:24px 28px; box-shadow:0 2px 8px var(--shadow); }
.gap { display:inline-block; border-bottom:3px solid var(--gold-light); min-width:90px; cursor:pointer; color:transparent; vertical-align:bottom; transition:all 0.2s; background:#f5efd8; padding:0 8px; border-radius:3px 3px 0 0; font-style:italic; user-select:none; }
.gap:hover { background:#ede3c4; }
.gap.revealed { color:var(--green); border-color:var(--green); background:var(--green-bg); }
.controls { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.btn { background:var(--card-bg); border:2px solid var(--gold-light); color:var(--ink); font-family:'Cinzel',serif; font-size:0.88rem; letter-spacing:0.12em; padding:11px 26px; cursor:pointer; transition:all 0.2s; border-radius:4px; margin:6px; }
.btn:hover { background:#f5efd8; border-color:var(--gold); }
.btn.primary { background:var(--gold); color:white; border-color:var(--gold); }
.btn.primary:hover { background:#7a5c10; }
.instruction { color:var(--dim); font-size:0.95rem; font-style:italic; margin-top:22px; text-align:center; max-width:560px; line-height:1.6; }
.result-message { min-height:1.8em; font-family:'Cinzel',serif; font-size:1rem; letter-spacing:0.08em; color:var(--green); margin-top:10px; text-align:center; }