/* Wordji — skinned to match brenopaiva.com, same system as Chordji.
   Wordji is a separate repo, so the portfolio's palette tokens are copied
   here verbatim rather than imported.

   The portfolio has no dark mode, but Wordji's theme toggle is real,
   pre-existing functionality — so instead of dropping it, only the page
   backdrop and the nav/header/footer bands get a dark variant (--page-bg /
   --band-bg). Every panel, button and piece of text keeps the exact same
   color in both themes, so nothing that already reads correctly against
   its own fill can lose contrast. */

:root {
  --primary-0: #809EC0;
  --primary-1: #CADFF7;
  --primary-2: #A3C1E1;
  --primary-3: #647F9D;
  --primary-4: #39516B;
  --secondary-1-0: #ABE692;
  --secondary-1-1: #D9FCCA;
  --secondary-1-2: #C0F3AB;
  --secondary-1-3: #96CF7E;
  --secondary-1-4: #5B8C46;
  --secondary-2-0: #A183C5;
  --secondary-2-1: #DFCBF8;
  --secondary-2-2: #C1A5E3;
  --secondary-2-3: #8368A3;
  --secondary-2-4: #533B6F;

  /* The site has no red. Tuned to the saturation/softness of the ramps
     above so it reads as a missing member of the same family. */
  --wrong-0: #E08585;
  --wrong-1: #A34B4B;

  --ink: #14202c;
  --panel-radius-x: 140px;
  --panel-radius-y: 44px;

  --page-bg: var(--primary-2);
  --band-bg: var(--primary-4);
}

:root[data-theme="dark"] {
  --page-bg: #141b24;
  --band-bg: #1c2733;
}

* { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--page-bg);
  color: var(--ink);
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  line-height: 1.5;
  transition: background 0.2s ease;
}

.hidden { display: none !important; }

a { color: var(--ink); }

kbd {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72em;
  padding: 1px 5px;
  border: 1px solid var(--primary-4);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--primary-4);
  white-space: nowrap;
}

/* ---------- Nav + header ---------- */

.site-nav {
  background: var(--band-bg);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nav-brand {
  color: var(--secondary-1-0);
  font-family: 'VT323', monospace;
  font-size: 26px;
  letter-spacing: 1px;
}

.nav-back {
  color: white;
  text-decoration: none;
  font-size: 15px;
}
.nav-back:hover { color: var(--secondary-1-0); }

.space-header {
  background: var(--band-bg);
  padding: 34px 20px 30px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.text-header {
  margin: 0;
  text-align: center;
  font-family: 'VT323', monospace;
  font-weight: normal;
  font-size: clamp(44px, 12vw, 80px);
  line-height: 1;
  color: var(--secondary-1-0);
  letter-spacing: clamp(3px, 1.4vw, 10px);
  text-shadow: -3px 0 #222, 0 3px #222, 3px 0 #222, 0 -3px #222;
}

.tagline {
  margin: 14px 0 0;
  color: var(--primary-1);
  letter-spacing: 2px;
  font-size: 15px;
  text-align: center;
}

/* While a question is up the title band collapses so the game sits above
   the fold on a phone. */
body.is-playing .space-header { padding: 12px 20px 14px; }
body.is-playing .text-header { font-size: clamp(26px, 7vw, 38px); letter-spacing: clamp(2px, 1vw, 6px); }
body.is-playing .tagline { display: none; }

.site-footer {
  margin-top: 40px;
  background: var(--band-bg);
  color: var(--primary-1);
  text-align: center;
  padding: 18px 20px;
  font-size: 14px;
}
.site-footer a { color: var(--secondary-1-0); }

/* ---------- Layout ---------- */

.app {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 16px 8px;
}

.screen {
  display: flex;
  flex-flow: column;
  gap: 22px;
}

.panel {
  background: var(--secondary-2-2);
  border: 2px solid var(--secondary-2-3);
  border-radius: var(--panel-radius-x) / var(--panel-radius-y);
  box-shadow: 0 1px 13px 1px rgba(0, 0, 0, 0.28);
  padding: 40px clamp(24px, 5vw, 48px);
  display: flex;
  flex-flow: column;
  gap: 22px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.panel--wide { max-width: 100%; }

.panel-title {
  margin: 0;
  font-family: 'VT323', monospace;
  font-weight: normal;
  font-size: clamp(30px, 5vw, 40px);
  text-align: center;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  letter-spacing: 1px;
}

/* ---------- Buttons ---------- */

.btn {
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  color: var(--ink);
  background: var(--primary-1);
  border: 2px solid var(--primary-0);
  border-radius: 20px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.08s ease;
}

.btn:hover:not(:disabled) { background: white; }
.btn:active:not(:disabled) { transform: translateY(2px); }

.btn:focus-visible,
.toggle-btn:focus-visible,
.mode-btn:focus-visible,
input:focus-visible {
  outline: 3px solid var(--secondary-2-4);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--secondary-1-1);
  border: 2px solid var(--secondary-1-0);
  font-size: 20px;
}
.btn-primary:hover:not(:disabled) { background: var(--secondary-1-2); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid var(--secondary-2-3);
}
.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.8); }

.btn-danger {
  background: var(--wrong-0);
  border: 2px solid var(--wrong-1);
  color: #2b1010;
}
.btn-danger:hover:not(:disabled) { background: #eb9b9b; }

.btn-large {
  font-size: clamp(20px, 3.4vw, 24px);
  padding: 13px 30px;
  align-self: center;
}

.btn-small { font-size: 14px; padding: 6px 14px; }

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Persistent utility icons — mute, settings, theme, high scores, help.
   Fixed to the corner since they're reachable from every screen. */
.icon-stack {
  position: fixed;
  top: 70px;
  right: max(14px, env(safe-area-inset-right));
  z-index: 30;
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.btn-icon-circle {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Fields, toggle groups, mode cards ---------- */

.field {
  display: flex;
  flex-flow: column;
  gap: 10px;
}

.field-label {
  font-family: 'VT323', monospace;
  font-size: 26px;
  color: var(--secondary-2-4);
  letter-spacing: 1px;
}

.field-note {
  margin: 0;
  font-size: 14px;
  color: var(--secondary-2-4);
}

.mode-group {
  display: grid;
  gap: 10px;
}

.mode-btn {
  font-family: 'Share Tech Mono', monospace;
  text-align: left;
  display: grid;
  gap: 3px;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid var(--secondary-2-3);
  border-radius: 18px;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.15s ease, transform 0.08s ease;
}
.mode-btn:hover { background: rgba(255, 255, 255, 0.8); }
.mode-btn.active {
  background: var(--secondary-1-1);
  border-color: var(--secondary-1-4);
  box-shadow: inset 0 0 0 2px var(--secondary-1-0);
}

.mode-name {
  font-family: 'VT323', monospace;
  font-size: 26px;
  line-height: 1.1;
}
.mode-blurb { font-size: 14px; }

.toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.toggle-btn {
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid var(--secondary-2-3);
  border-radius: 20px;
  padding: 8px 20px;
  cursor: pointer;
  flex: 1 1 auto;
  transition: background 0.15s ease, transform 0.08s ease;
}
.toggle-btn:hover { background: rgba(255, 255, 255, 0.8); }
.toggle-btn:active { transform: translateY(2px); }
.toggle-btn.active {
  background: var(--secondary-1-1);
  border-color: var(--secondary-1-4);
  box-shadow: inset 0 0 0 2px var(--secondary-1-0);
}

/* Second tier of the round-length control — the values under the type. The
   rule reads as an indent so the two rows don't scan as one long group. */
.toggle-group--sub {
  padding-left: 14px;
  border-left: 2px solid rgba(83, 59, 111, 0.3);
}

.toggle-group--sub .toggle-btn {
  font-size: 15px;
  padding: 6px 16px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.checkbox-row input { accent-color: var(--secondary-2-4); width: 18px; height: 18px; }

/* Multi-select chips (Verb Settings' tenses/pronouns) — a real checkbox
   under a styled label, so focus/keyboard toggling comes for free. */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkbox-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 2px solid var(--secondary-2-3);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 15px;
  transition: background 0.15s ease, transform 0.08s ease;
}
.checkbox-chip:hover { background: rgba(255, 255, 255, 0.8); }

.checkbox-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.checkbox-chip .check-mark {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--secondary-2-3);
  border-radius: 4px;
  background: white;
  color: transparent;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-chip:has(input:checked) {
  background: var(--secondary-1-1);
  border-color: var(--secondary-1-4);
  box-shadow: inset 0 0 0 2px var(--secondary-1-0);
}
.checkbox-chip:has(input:checked) .check-mark {
  background: var(--secondary-1-0);
  border-color: var(--secondary-1-4);
  color: var(--ink);
}
.checkbox-chip:has(input:focus-visible) {
  outline: 3px solid var(--secondary-2-4);
  outline-offset: 2px;
}

.verb-custom-fields {
  display: flex;
  flex-flow: column;
  gap: 22px;
}

/* ---------- Game screen ---------- */

/* Skip left, status centered, Quit right. Three fixed columns keep the status
   cluster optically centered whether or not the progress pill is showing, and
   keep the round's two buttons at opposite ends — Skip gets pressed every few
   seconds, so it must never sit within a mis-tap of Quit. */
.play-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.play-header #skip-btn { grid-column: 1; justify-self: start; }
.play-header .play-status { grid-column: 2; justify-self: center; }
.play-header #quit-btn { grid-column: 3; justify-self: end; }

.play-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-pill {
  font-family: 'VT323', monospace;
  font-size: 24px;
  letter-spacing: 1px;
  padding: 2px 16px;
  border: 2px solid var(--secondary-2-3);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--secondary-2-4);
  white-space: nowrap;
}

.timer-pill {
  font-family: 'VT323', monospace;
  font-size: 30px;
  letter-spacing: 1px;
  padding: 2px 22px;
  border: 2px solid var(--primary-4);
  border-radius: 30px;
  background: var(--primary-1);
  color: var(--primary-4);
}
.timer-pill.low { color: var(--wrong-1); border-color: var(--wrong-1); }

.game-panel {
  align-items: center;
  text-align: center;
}

.category-tag {
  margin: 0;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--secondary-2-4);
  min-height: 1.2em;
}
.category-tag.tense-badge {
  font-family: 'VT323', monospace;
  font-size: 22px;
  letter-spacing: 1px;
  text-transform: none;
}

.word-display {
  margin: 0;
  font-family: 'VT323', monospace;
  font-size: clamp(30px, 8vw, 52px);
  line-height: 1.1;
  color: white;
  text-shadow: -2px 0 #222, 0 2px #222, 2px 0 #222, 0 -2px #222;
  letter-spacing: 1px;
  min-height: 1.2em;
}

.infinitive-label {
  margin: 0;
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: var(--secondary-2-4);
}

.box-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}

.box-row.shake { animation: shake 0.36s ease-in-out; }

.letter-box {
  width: 42px;
  height: 50px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid var(--secondary-2-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 24px;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* One wide box for a typed conjugated form, instead of one letter box per
   letter used for translating. */
.letter-box.wide {
  width: auto;
  min-width: 140px;
  padding: 0 20px;
  letter-spacing: 0.02em;
}

.letter-box.flash-correct { animation: flash-correct 0.5s ease; }
.letter-box.flash-wrong { animation: flash-wrong 0.5s ease; }
.letter-box.flash-skip { animation: flash-skip 0.7s ease; }
.letter-box.reveal {
  background: var(--secondary-1-1);
  border-color: var(--secondary-1-4);
}

@keyframes flash-correct {
  0% { background: rgba(255, 255, 255, 0.6); border-color: var(--secondary-2-3); }
  40% { background: var(--secondary-1-0); border-color: var(--secondary-1-4); }
  100% { background: rgba(255, 255, 255, 0.6); border-color: var(--secondary-2-3); }
}
@keyframes flash-wrong {
  0% { background: rgba(255, 255, 255, 0.6); border-color: var(--secondary-2-3); }
  40% { background: var(--wrong-0); border-color: var(--wrong-1); }
  100% { background: rgba(255, 255, 255, 0.6); border-color: var(--secondary-2-3); }
}
@keyframes flash-skip {
  0% { background: rgba(255, 255, 255, 0.6); border-color: var(--secondary-2-3); }
  30% { background: var(--primary-1); border-color: var(--primary-0); }
  70% { background: var(--primary-1); border-color: var(--primary-0); }
  100% { background: rgba(255, 255, 255, 0.6); border-color: var(--secondary-2-3); }
}

.shake { animation: shake 0.36s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.status-line {
  margin: 0;
  min-height: 1.6em;
  font-size: 15px;
  font-weight: bold;
  color: var(--wrong-1);
}
.status-line.reveal-text {
  font-family: 'VT323', monospace;
  font-size: 24px;
  color: var(--secondary-2-4);
}

/* Hidden text input that actually receives keystrokes (and pops the mobile
   keyboard) while the letter boxes show the visible state. Must stay
   >=16px: iOS Safari auto-zooms the page on focus of any input with a
   computed font-size under 16px. Positioned at 0,0 rather than off-screen
   so focusing it can never trigger a scroll-into-view jump either. */
.hidden-input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  font-size: 16px;
}

.bonus-popup {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  font-family: 'VT323', monospace;
  font-size: 32px;
  color: var(--secondary-1-4);
  background: var(--secondary-1-1);
  border: 2px solid var(--secondary-1-0);
  border-radius: 20px;
  padding: 10px 26px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 50;
  animation: popup-in 0.6s ease forwards;
  pointer-events: none;
}
@keyframes popup-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  35% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

/* ---------- Score screen ---------- */

.score-value {
  margin: 0;
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: clamp(40px, 10vw, 60px);
  color: var(--secondary-1-0);
  text-shadow: -2px 0 #222, 0 2px #222, 2px 0 #222, 0 -2px #222;
}

.round-detail {
  margin: -14px 0 0;
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: var(--secondary-2-4);
}

.high-score-line {
  margin: 0;
  text-align: center;
  font-size: 16px;
  color: var(--secondary-2-4);
}
.high-score-line.new-high-score {
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: var(--wrong-1);
  animation: pop 0.5s ease;
}
@keyframes pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

.result-message {
  margin: 0;
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: 22px;
}
.result-message.tier-fire { color: var(--wrong-1); }
.result-message.tier-good { color: var(--secondary-1-4); }
.result-message.tier-meh { color: var(--secondary-2-4); }
.result-message.tier-bad { color: var(--primary-4); }

/* ---------- Answers list / high scores (shared panel look) ---------- */

.answers-list,
.highscore-panel {
  width: 100%;
  max-height: 40vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid var(--secondary-2-3);
  border-radius: 20px;
  padding: 6px 18px;
  text-align: left;
}
.highscore-panel .settings-section-label:first-child { margin-top: 8px; }

.answers-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(20, 32, 44, 0.15);
}
.answers-row:last-child { border-bottom: none; }
.answers-mark { font-weight: bold; flex-shrink: 0; }
.answers-row.correct .answers-mark { color: var(--secondary-1-4); }
.answers-row.wrong .answers-mark { color: var(--wrong-1); }
.answers-row.neutral .answers-mark { color: var(--primary-3); }
.answers-empty {
  padding: 16px 4px;
  color: var(--primary-3);
}

/* ---------- Help screen ---------- */

.instructions-box {
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid var(--secondary-2-3);
  border-radius: 20px;
  padding: 6px 22px 18px;
  text-align: left;
}
.instructions-box ul {
  margin: 6px 0 0;
  padding-left: 20px;
  line-height: 1.8;
}

.settings-section-label {
  margin: 16px 0 6px;
  font-family: 'VT323', monospace;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--secondary-2-4);
}
.instructions-box .settings-section-label:first-child,
.highscore-panel .settings-section-label:first-child { margin-top: 12px; }

/* ---------- Settings + name entry ---------- */

.settings-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.settings-value {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--ink);
}

.greeting-line {
  margin: 0;
  text-align: center;
  font-size: 16px;
  color: var(--secondary-2-4);
}

.name-input {
  font-family: 'Share Tech Mono', monospace;
  font-size: 18px;
  padding: 10px 16px;
  border: 2px solid var(--secondary-2-3);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  text-align: center;
  width: 100%;
  max-width: 320px;
  align-self: center;
  outline: none;
}
.name-input:focus { border-color: var(--secondary-2-4); }

.name-error {
  margin: 0;
  min-height: 1.2em;
  text-align: center;
  font-size: 14px;
  color: var(--wrong-1);
}

/* ---------- Modal (clear high scores) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 44, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
}

.modal-card {
  background: var(--secondary-2-2);
  border: 2px solid var(--secondary-2-3);
  border-radius: 28px;
  padding: 26px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.4);
}

.modal-card h2 {
  margin: 0 0 8px;
  font-family: 'VT323', monospace;
  font-weight: normal;
  font-size: 32px;
}

.modal-card p { margin: 0 0 18px; font-size: 15px; }

.modal-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Responsive (works from 360px, no horizontal scroll) ---------- */

@media (max-width: 640px) {
  :root {
    --panel-radius-x: 84px;
    --panel-radius-y: 32px;
  }

  .app { padding: 20px 12px 4px; }
  .panel { padding: 32px 18px; gap: 18px; }
  .toggle-btn { padding: 8px 12px; }
  .field-label { font-size: 23px; }

  .icon-stack { top: 62px; gap: 8px; }
  .btn-icon-circle { width: 36px; height: 36px; font-size: 15px; }

  .letter-box { width: 34px; height: 42px; font-size: 20px; }
  .letter-box.wide { min-width: 110px; padding: 0 14px; }

  /* The icon stack is fixed to the right edge, so the play header's right
     column has to clear it — and four items have to fit in what's left. */
  .play-header { padding-right: 44px; gap: 6px; }
  .play-status { gap: 6px; }
  .play-header .btn-small { font-size: 13px; padding: 6px 10px; }
  .progress-pill { font-size: 20px; padding: 2px 12px; }
  .timer-pill { font-size: 26px; padding: 2px 16px; }
}

@media (max-width: 380px) {
  .btn { font-size: 15px; padding: 9px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:active:not(:disabled),
  .toggle-btn:active {
    transform: none;
  }
}