@font-face {
  font-family: 'Press Start 2P';
  src: url('fonts/PressStart2P.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'DotGothic16';
  src: url('fonts/DotGothic16.ttf') format('truetype');
  font-display: swap;
}

:root {
  --bg: #171331;
  --card: #241f42;
  --card-alt: #2c2650;
  --wood: #4a4270;
  --wood-dark: #0d0a1c;
  --text: #ece7f5;
  --muted: #9b93bd;
  --accent: #e3a63e;
  --accent-ink: #1a1430;
  --accent-dark: #b8821f;
  --good: #4fae82;
  --good-soft: #1f3a30;
  --bad: #d1503e;
  --bad-soft: #3a2018;
  --pixel: 'Press Start 2P', monospace;
  --readable: 'DotGothic16', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--readable);
  font-size: 18px;
  background: var(--bg);
  color: var(--text);
  image-rendering: pixelated;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 20px 16px 60px;
}

h1, h2, h3 {
  margin: 0 0 14px;
  font-family: var(--pixel);
  font-weight: normal;
  line-height: 1.5;
}
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 13px; }

.section-label {
  font-family: var(--pixel);
  font-size: 11px;
  color: var(--muted);
  margin: 26px 0 14px;
}

.card {
  background: var(--card);
  border: 3px solid var(--wood-dark);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 4px 4px 0 var(--wood-dark);
}

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

button {
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1.7;
  border: 3px solid var(--wood-dark);
  border-radius: 0;
  padding: 14px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 3px 3px 0 var(--wood-dark);
  cursor: pointer;
}
button:active { box-shadow: 0 0 0 var(--wood-dark); transform: translate(3px, 3px); }
button.secondary { background: var(--card-alt); color: var(--text); }
button.danger { background: var(--bad); color: #fff3ee; }
button:disabled { background: var(--card-alt); color: var(--muted); cursor: default; box-shadow: 3px 3px 0 var(--wood); opacity: 0.7; }
button:disabled:active { transform: none; }

button.full { width: 100%; margin-bottom: 10px; }

input[type=text] {
  font-family: var(--readable);
  font-size: 18px;
  padding: 11px 13px;
  border: 3px solid var(--wood-dark);
  background: var(--card);
  color: var(--text);
  border-radius: 0;
  width: 100%;
  margin-bottom: 10px;
}
input[type=text]:focus { outline: none; border-color: var(--accent); }

.muted { color: var(--muted); font-size: 15px; }
.topic-meta { font-size: 12px; }
.prompt-label { font-size: 12px; }
.example-translation { font-size: 12px; }
.streak { font-family: var(--pixel); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.streak img { image-rendering: pixelated; width: 23px; height: 18px; }

.topic-card { cursor: pointer; }
.topic-card:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--wood-dark); }
.topic-title { font-family: var(--pixel); font-size: 13px; line-height: 1.6; margin-bottom: 4px; }

.option-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  color: var(--text);
  font-family: var(--readable);
  font-size: 18px;
  border: 3px solid var(--wood-dark);
  margin-bottom: 10px;
  box-shadow: 3px 3px 0 var(--wood-dark);
}
.option-btn.correct { background: var(--good); color: #fff; border-color: var(--wood-dark); }
.option-btn.wrong { background: var(--bad); color: #fff; border-color: var(--wood-dark); }

.word-token {
  display: inline-block;
  background: var(--card);
  border: 3px solid var(--wood-dark);
  padding: 8px 12px;
  margin: 4px;
  cursor: pointer;
  font-family: var(--readable);
  font-size: 18px;
  box-shadow: 2px 2px 0 var(--wood-dark);
}
.word-token.used { opacity: 0.3; pointer-events: none; box-shadow: none; }

.assembled {
  min-height: 44px;
  border-bottom: 3px dashed var(--wood);
  margin-bottom: 14px;
  padding-bottom: 8px;
  font-family: var(--readable);
  font-size: 20px;
}

.exercise-word {
  font-family: var(--pixel);
  font-size: 24px;
  line-height: 1.6;
  margin-bottom: 18px;
  color: var(--accent);
}

.feedback {
  padding: 12px 14px;
  border: 3px solid var(--wood-dark);
  margin-bottom: 10px;
  font-family: var(--readable);
  font-size: 18px;
  font-weight: normal;
}
.feedback.good { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.feedback.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.feedback.note {
  background: var(--card-alt);
  color: var(--text);
  line-height: 1.5;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.feedback.note .knight-avatar { flex: none; margin-top: 2px; }
.feedback.note strong { font-family: var(--pixel); font-size: 11px; display: block; margin-bottom: 6px; color: var(--accent); }

.progress-bar {
  height: 10px;
  background: var(--card-alt);
  border: 2px solid var(--wood-dark);
  overflow: hidden;
  margin-bottom: 18px;
}
.progress-bar > div { height: 100%; background: var(--accent); }

.top-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; }
.top-nav strong { font-family: var(--pixel); font-size: 13px; }
.top-nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.top-nav .knight-row { display: flex; align-items: center; gap: 8px; }

.word-row { border-bottom: 2px dotted var(--wood); padding: 10px 0; font-size: 17px; }
.word-row:last-child { border-bottom: none; }

.edit-topic {
  color: var(--muted);
  text-decoration: none;
  font-size: 18px;
  padding: 4px 6px;
}

.group-card {
  cursor: pointer;
  background: var(--card-alt);
  border-style: dashed;
}
.group-chevron { color: var(--accent); font-size: 18px; }
.group-nested { padding-left: 14px; border-left: 3px dashed var(--wood); margin: -4px 0 14px 6px; }
.group-nested .topic-card { margin-top: 14px; }

.knight-avatar {
  image-rendering: pixelated;
  width: 32px;
  height: 26px;
}
.knight-hero {
  image-rendering: pixelated;
  width: 96px;
  height: 78px;
  display: block;
  margin: 0 auto 14px;
}

.scene-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.star {
  position: absolute;
  background: #f1ecff;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
.star { animation-name: twinkle; animation-iteration-count: infinite; animation-timing-function: steps(2); }

.campfire {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  width: 140px;
  height: 140px;
}
.campfire .glow {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 166, 62, 0.4) 0%, rgba(227, 166, 62, 0) 70%);
  animation: glow-pulse 1.6s steps(4) infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.campfire img {
  image-rendering: pixelated;
  width: 70px;
  height: 75px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  animation: flicker 0.5s steps(2) infinite;
  transform-origin: 50% 30%;
}
@keyframes flicker {
  0%, 100% { transform: translateX(-50%) scaleY(1) scaleX(1); }
  50% { transform: translateX(-50%) scaleY(0.97) scaleX(1.02); }
}
.ember {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--accent);
  bottom: 60px;
  animation-name: rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx, 10px), -90px); opacity: 0; }
}