@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: 22px; text-align: center; }

/* Reference visibility */
.visibility-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; justify-content: center; align-items: center; }
.vis-btn {
  background: var(--card-bg); border: 1px solid var(--border); color: var(--dim);
  font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.08em;
  padding: 6px 14px; cursor: pointer; transition: all 0.2s; border-radius: 4px;
}
.vis-btn.active, .vis-btn:hover { border-color: var(--gold); color: var(--gold); background: #f5efd8; }
.vis-label { font-family: 'Cinzel', serif; font-size: 0.78rem; color: var(--dim); letter-spacing: 0.1em; }

/* Reference text */
.reference-text {
  max-width: 820px; width: 100%;
  font-family: 'GentiumAlt', 'Gentium Plus', 'Gentium', 'Georgia', 'Times New Roman', serif;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-style: italic; line-height: 2; text-align: center;
  color: var(--ink); border: 1px solid var(--border); border-radius: 8px;
  padding: 20px 28px; margin-bottom: 8px; transition: opacity 0.4s;
  background: var(--card-bg); box-shadow: 0 2px 8px var(--shadow);
}
.reference-text.faded  { opacity: 0.18; }
.reference-text.hidden { opacity: 0; pointer-events: none; }

/* Progress */
.progress-bar { width: 100%; max-width: 820px; height: 6px; background: var(--border); border-radius: 3px; margin-bottom: 16px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold-light), var(--green)); border-radius: 3px; transition: width 0.3s; }

/* Stats */
.stats-row { display: flex; gap: 28px; margin-bottom: 16px; flex-wrap: wrap; justify-content: center; }
.stat { text-align: center; font-family: 'Cinzel', serif; }
.stat-val   { font-size: 1.5rem; color: var(--gold); display: block; }
.stat-label { font-size: 0.7rem; letter-spacing: 0.2em; color: var(--dim); text-transform: uppercase; }

/* ── TYPING SECTION ── */
#typing-section { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: 14px; align-items: center; }

.typing-instruction {
  color: var(--dim); font-size: 1rem; font-style: italic; line-height: 1.7; text-align: center; max-width: 720px;
}
.typing-instruction a { color: var(--gold); }
.typing-instruction strong { color: var(--ink); font-style: normal; }

.setup-box {
  width: 100%; max-width: 720px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 18px 24px; box-shadow: 0 2px 8px var(--shadow); margin-bottom: 4px;
}
.setup-box summary {
  font-family: 'Cinzel', serif; font-size: 0.82rem; letter-spacing: 0.12em;
  color: var(--gold); cursor: pointer; text-transform: uppercase;
}
.setup-box summary:hover { color: var(--gold-light); }
.setup-box .setup-content {
  margin-top: 14px; font-size: 0.95rem; line-height: 1.8; color: var(--ink);
}
.setup-box .setup-content ol { margin-left: 20px; }
.setup-box .setup-content li { margin-bottom: 6px; }
.setup-box .setup-content .platform-label {
  font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.15em;
  color: var(--dim); text-transform: uppercase; margin-top: 14px; margin-bottom: 4px;
}
.setup-box .setup-content .platform-label:first-child { margin-top: 0; }

/* Beta code mode toggle */
.mode-bar { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.mode-btn {
  background: var(--card-bg); border: 1px solid var(--border); color: var(--dim);
  font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.08em;
  padding: 6px 14px; cursor: pointer; transition: all 0.2s; border-radius: 4px;
}
.mode-btn.active { border-color: var(--gold); color: var(--gold); background: #f5efd8; }
.mode-btn:hover  { border-color: var(--gold); color: var(--gold); background: #f5efd8; }
.mode-indicator {
  font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--dim); padding: 4px 0; text-align: center;
}
.mode-indicator .mode-active-label { color: var(--gold); font-weight: 700; }

#paste-area {
  width: 100%;
  font-family: 'GentiumAlt', 'Gentium Plus', 'Gentium', 'Georgia', 'Times New Roman', serif;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-style: italic;
  line-height: 1.9; padding: 20px 24px;
  border: 2px solid var(--border); border-radius: 8px; background: white; color: var(--ink);
  resize: vertical; min-height: 110px; box-shadow: 0 2px 8px var(--shadow); transition: border-color 0.2s;
}
#paste-area:focus { outline: none; border-color: var(--gold-light); }
#paste-area::placeholder { color: #b0a898; font-style: italic; }
#paste-area.beta-active { border-color: var(--gold-light); background: #fffdf5; }

#paste-result {
  width: 100%;
  font-family: 'GentiumAlt', 'Gentium Plus', 'Gentium', 'Georgia', 'Times New Roman', serif;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-style: italic; line-height: 2;
  padding: 20px 24px; border: 2px solid var(--border); border-radius: 8px; background: var(--card-bg);
  min-height: 80px; word-wrap: break-word; box-shadow: 0 2px 8px var(--shadow); display: none;
}

.char-correct { color: var(--ink); }

.char-wrong {
  color: #000;
  background: #ff0 !important;
  border-radius: 2px;
  font-weight: bold !important;
}

.complete-msg {
  font-family: 'Cinzel', serif; font-size: 1.05rem; letter-spacing: 0.08em;
  margin: 10px 0; text-align: center; min-height: 1.6em;
}

.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: #fff; border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); }

.controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Beta code quick-ref */
.beta-ref-content {
  margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 20px; font-size: 0.92rem; line-height: 1.7; color: var(--ink);
}
.beta-ref-content .ref-section-title {
  grid-column: 1 / -1; font-family: 'Cinzel', serif; font-size: 0.75rem;
  letter-spacing: 0.15em; color: var(--dim); text-transform: uppercase;
  margin-top: 10px; border-bottom: 1px solid var(--border); padding-bottom: 3px;
}
.beta-ref-content .ref-section-title:first-child { margin-top: 0; }
.beta-ref-content .ref-item { display: flex; gap: 8px; align-items: baseline; }
.beta-ref-content .ref-key {
  font-family: 'Courier New', monospace; background: #eae6df; padding: 1px 6px;
  border-radius: 3px; font-size: 0.85rem; min-width: 36px; text-align: center;
}
.beta-ref-content .ref-greek { font-style: italic; }

/* Styles related to drawing */
.drawing-section { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 40px; }

.drawing-canvas {
  width: 100%;
  height: 700px;
  border: 2px solid var(--border);
  border-radius: 8px;
}

.drawing-instruction { color: var(--dim); font-size: 1rem; font-style: italic; line-height: 1.7; text-align: center; max-width: 720px; }

.drawing-controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }