:root {
  --bg: #000000;
  --panel: rgba(255,255,255,.08);
  --panel-2: rgba(255,255,255,.16);
  --text: #ffffff;
  --line: rgba(255,255,255,.34);
  --good: #67f28c;
  --bad: #ff6f6f;
  --focus: #00d4ff;
}
* { box-sizing: border-box; }
html, body {
  margin:0;
  width:600px;
  height:600px;
  overflow:hidden;
  background:#000;
  color:var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body {
  position: relative;
}
button { font: inherit; }
.app {
  width:600px;
  height:600px;
  overflow:hidden;
  padding:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}
.splash {
  position: absolute;
  inset: 0;
  width: 600px;
  height: 600px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 180ms ease;
}
.splash-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.splash.hidden {
  opacity: 0;
  pointer-events: none;
}
.screen {
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}
.list {
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.row,
.choice {
  position:relative;
  overflow:hidden;
  border:2px solid var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:22px;
  min-height:88px;
  padding:10px 18px;
  font-size:30px;
  line-height:1.05;
  font-weight:750;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  outline:none;
}
.focusable { transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease; }
.focusable.selected,
.focusable:focus {
  outline:none;
  border-color:var(--focus);
  background:var(--panel-2);
  box-shadow:0 0 20px rgba(0,212,255,.42);
}
.category-list { align-content:center; }
.category-row {
  isolation:isolate;
  min-height:88px;
  justify-content:flex-start;
}
.category-row .coverage-fill,
.category-row .correct-fill {
  position:absolute;
  inset:0 auto 0 0;
  pointer-events:none;
  transition:width .2s ease;
}
.category-row .coverage-fill {
  width:var(--coverage);
  background:rgba(103,242,140,.18);
  z-index:-2;
}
.category-row .correct-fill {
  width:var(--correct);
  background:rgba(103,242,140,.48);
  z-index:-1;
}
.category-row.selected .coverage-fill { background:rgba(103,242,140,.24); }
.category-row.selected .correct-fill { background:rgba(103,242,140,.60); }
.category-name {
  position:relative;
  z-index:1;
  width:100%;
  text-align:left;
  white-space:normal;
}
.drill { display:grid; grid-template-rows:auto 1fr; gap:14px; height:100%; }
.prompt {
  border:2px solid var(--line);
  background:var(--panel);
  border-radius:24px;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.word {
  font-size:62px;
  line-height:1.05;
  font-weight:800;
  word-break:break-word;
}
.word.alphabet-word {
  font-size:122px;
  line-height:1;
}
.choices {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-content:center;
}
.choice {
  min-height:118px;
  padding:12px;
  font-size:38px;
  transition: border-color 110ms ease, box-shadow 110ms ease, transform 90ms ease, background 110ms ease;
}
.choice.armed {
  border-color: #32e7ff;
  box-shadow: 0 0 26px rgba(0, 212, 255, .44);
  transform: scale(1.03);
  background: rgba(0, 212, 255, .12);
}
.choice.correct { border-color:var(--good); box-shadow:0 0 30px rgba(103,242,140,.36); }
.choice.wrong { border-color:var(--bad); box-shadow:0 0 30px rgba(255,111,111,.32); }
.footer { height:8px; }
.bar {
  width:100%;
  height:8px;
  background:rgba(255,255,255,.14);
  border-radius:999px;
  overflow:hidden;
}
.fill {
  height:100%;
  width:0%;
  background:var(--good);
  border-radius:999px;
  transition:width .2s ease;
}
.feedback {
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  text-align:center;
  font-size:46px;
  line-height:1.05;
  font-weight:800;
  color:var(--text);
  opacity:0;
  transform:translateY(8px);
  transition:.16s ease;
  pointer-events:none;
  background:rgba(0,0,0,.76);
  border-radius:20px;
  padding:14px 16px;
}
.feedback.show { opacity:1; transform:translateY(0); }
.language-list { align-content:center; }
.language-row .category-name { text-align:center; }
.mode-list {
  grid-template-columns:1fr;
  align-content:center;
  gap:18px;
}
.mode-row {
  min-height:140px;
}
.mode-name {
  text-align:center;
  font-size:48px;
}
.category-screen .list { grid-template-columns:1fr 1fr; gap:12px; }
.category-toolbar {
  width:100%;
  display:flex;
  justify-content:flex-end;
  margin-bottom:2px;
}
.toolbar-btn {
  border:2px solid var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:999px;
  padding:8px 18px;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  outline:none;
  transition:border-color 150ms,background 150ms,box-shadow 150ms;
}
.toolbar-btn:hover,
.toolbar-btn:focus {
  border-color:var(--focus);
  background:var(--panel-2);
  box-shadow:0 0 16px rgba(0,212,255,.36);
}
.with-back {
  position:relative;
}
.screen-back-btn {
  position:absolute;
  top:0;
  left:0;
  z-index:4;
}
.with-back .drill {
  padding-top:48px;
}
.phrase-screen.with-back {
  padding-top:48px;
}
/* Difficulty toggle */
.difficulty-section { display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:4px; }
.difficulty-toggle { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.diff-btn { border:2px solid var(--line); background:var(--panel); color:var(--text); border-radius:999px; padding:8px 20px; font-size:20px; font-weight:600; cursor:pointer; outline:none; transition:border-color 150ms,background 150ms; }
.diff-btn.diff-active { border-color:var(--focus); background:var(--panel-2); box-shadow:0 0 16px rgba(0,212,255,.36); }
.difficulty-hint { margin:0; font-size:13px; color:rgba(255,255,255,.5); text-align:center; }
/* Timer bar */
.prompt-wrap { display:flex; flex-direction:column; gap:6px; }
.timer-bar-track { width:100%; height:6px; background:rgba(255,255,255,.14); border-radius:999px; overflow:hidden; }
.timer-bar { height:100%; width:100%; background:var(--focus); border-radius:999px; transition:width .95s linear, background .3s ease; }

.phrase-screen {
  justify-content:space-between;
  gap:10px;
}
.phrase-top {
  flex:0 0 25%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.phrase-english {
  border:2px solid var(--line);
  background:var(--panel);
  border-radius:20px;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:42px;
  font-weight:800;
  line-height:1.1;
  padding:12px 16px;
}
.phrase-middle {
  flex:0 0 35%;
  border:2px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:20px;
  padding:10px;
  display:flex;
  align-items:center;
}
.phrase-bottom {
  flex:0 0 40%;
  border:2px solid var(--line);
  background:rgba(255,255,255,.05);
  border-radius:20px;
  padding:10px;
  display:flex;
  align-items:center;
}
.phrase-chip-wrap {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  align-content:flex-start;
  justify-content:center;
}
.phrase-chip {
  border:2px solid var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:14px;
  min-height:54px;
  padding:10px 16px;
  font-size:28px;
  font-weight:760;
  line-height:1.05;
  max-width:100%;
  word-break:break-word;
}
.placed-chip {
  background:rgba(255,255,255,.18);
}
.jumble-chip {
  background:rgba(255,255,255,.1);
}
.phrase-chip.selected,
.phrase-chip:focus {
  outline:none;
  border-color:var(--focus);
  box-shadow:0 0 18px rgba(0,212,255,.38);
}
.phrase-timer-track {
  height:5px;
}