@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; --red:#8b1a0e; --red-bg:#fdecea; --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; max-width:520px; line-height:1.6; }
.stats-panel { max-width:720px; width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:3px; margin-bottom:20px; }
.stat-box { background:var(--card-bg); padding:18px 12px; text-align:center; border:1px solid var(--border); border-radius:4px; }
.stat-box .val { font-family:'Cinzel',serif; font-size:1.5rem; color:var(--gold); display:block; margin-bottom:4px; }
.stat-box .lbl { font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--dim); font-family:'Cinzel',serif; }
.next-review { font-family:'Cinzel',serif; font-size:0.9rem; letter-spacing:0.08em; color:var(--dim); margin-bottom:16px; text-align:center; min-height:1.4em; }
.next-review .val { color:var(--gold); }
.card-area { max-width:720px; width:100%; min-height:260px; background:var(--card-bg); border:2px solid var(--border); border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 34px; margin-bottom:20px; cursor:pointer; transition:border-color 0.2s; box-shadow:0 3px 10px var(--shadow); }
.card-area:hover { border-color:var(--gold-light); }
.card-prompt { font-family:'Cinzel',serif; font-size:0.8rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--dim); margin-bottom:20px; }
.card-content { font-family:"GentiumAlt","Gentium Plus","Gentium","Noto Serif","Times New Roman",serif; font-size:clamp(1.1rem,2.3vw,1.55rem); font-style:italic; text-align:center; line-height:2; max-width:640px; }
.card-back { display:none; flex-direction:column; align-items:center; width:100%; }
.card-back.shown { display:flex; }
.flip-hint { color:var(--dim); font-size:0.9rem; font-style:italic; margin-top:18px; }
.rating-area { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:28px; }
.rate-btn { border:none; border-radius:6px; padding:14px 22px; font-family:'Cinzel',serif; font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:all 0.2s; display:flex; flex-direction:column; align-items:center; gap:5px; }
.rate-btn .int { font-size:0.7rem; opacity:0.75; letter-spacing:0.05em; }
.btn-again { background:var(--red-bg); color:var(--red); border:2px solid #e0b0aa; }
.btn-again:hover { background:#f8d5d2; }
.btn-hard  { background:#fef3dc; color:#7a5500; border:2px solid #e0c870; }
.btn-hard:hover { background:#fdecc5; }
.btn-good  { background:var(--green-bg); color:var(--green); border:2px solid #a0d0b8; }
.btn-good:hover { background:#ceeadb; }
.btn-easy  { background:#e8f0fb; color:#1a4a8a; border:2px solid #a8c0e8; }
.btn-easy:hover { background:#d0e0f5; }
.history { max-width:720px; width:100%; }
.history h2 { font-family:'Cinzel',serif; font-size:0.78rem; letter-spacing:0.25em; color:var(--dim); text-transform:uppercase; margin-bottom:14px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.log-entry { display:flex; gap:12px; font-size:0.9rem; color:var(--dim); padding:9px 0; border-bottom:1px solid rgba(0,0,0,0.05); align-items:center; }
.log-time { color:var(--dim); font-size:0.82rem; min-width:120px; opacity:0.7; }
.log-rating { font-family:'Cinzel',serif; font-size:0.78rem; min-width:55px; }
.log-rating.again{color:var(--red)} .log-rating.hard{color:#7a5500} .log-rating.good{color:var(--green)} .log-rating.easy{color:#1a4a8a}
.log-interval { color:var(--dim); font-style:italic; font-size:0.88rem; }
.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); }