@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:560px; line-height:1.6; }

/* Stats panel */
.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 */
.card-area { max-width:720px; width:100%; min-height:200px; 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; box-shadow:0 3px 10px var(--shadow); }
.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-translation { color:var(--dim); font-size:0.95rem; font-style:italic; margin-top:14px; text-align:center; line-height:1.6; }

/* Recorder controls */
.recorder-controls { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center; margin-bottom:20px; }
.rec-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:14px 30px; cursor:pointer; transition:all 0.2s; border-radius:4px; display:flex; align-items:center; gap:8px; }
.rec-btn:hover { background:#f5efd8; border-color:var(--gold); }
.rec-btn:disabled { opacity:0.35; cursor:default; }
.rec-btn.recording { background:var(--red-bg); border-color:var(--red); color:var(--red); }
.rec-btn.recording:hover { background:#f8d5d2; }
.rec-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--red); flex-shrink:0; }
.rec-dot.pulse { animation:pulse-dot 1s ease infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

.status-line { font-family:'Cinzel',serif; font-size:0.85rem; letter-spacing:0.12em; color:var(--dim); text-align:center; margin-bottom:16px; min-height:1.4em; }
.status-line .val { color:var(--gold); }

.playback-area { max-width:500px; width:100%; margin-bottom:24px; text-align:center; }
.playback-area audio { width:100%; margin-top:8px; }

/* Rating buttons */
.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 */
.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); }

.instructions { max-width:560px; width:100%; color:var(--dim); font-size:0.88rem; font-style:italic; text-align:center; line-height:1.7; margin-top:20px; }