/* The flashcard reviewer, built on theme.css. */

/* --- top bar --------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px 10px;
}
.topbar .qs-logo { margin: 0 14px 0 6px; }

/* The big corner wordmark (2026-10-23). The top bar is 1100px wide and
   centred with 24px padding, so the home button starts at
   (100vw - 1100px) / 2 + 24px; the wordmark's box spans from the window's
   left edge to there and centres the word inside it. Font size follows that
   width (the word is about 3.7 times as wide as its font size), capped at 84px.
   Shown only once the corner is at least ~200px wide. */
.corner-logo { display: none; }
@media (min-width: 1452px) {
  .topbar .qs-logo { display: none; }
  .corner-logo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: calc((100% - 1100px) / 2 + 24px);  /* % of the viewport, which excludes the scrollbar (vw does not) */
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: min(84px, calc(((100vw - 1100px) / 2 - 24px) / 3.7));
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
  }
  .corner-logo small { font-size: 0.78em; }
}
.spacer { flex: 1; }

.set-bar { display: flex; align-items: center; gap: 2px; }
/* Rename/delete do nothing for "All cards"; hide them rather than grey them out. */
.set-bar .icon-btn:disabled { display: none; }
.set-picker {
  font: 500 14px var(--font-ui);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  /* Explicit colours, not transparent/inherit: the open dropdown list is
     drawn by the OS and does not inherit the page's colours, which left the
     options white on white in dark mode (2026-09-28). */
  background: var(--surface);
  color: var(--text);
  max-width: 320px;
  margin-right: 4px;
  cursor: pointer;
}
.set-picker option { background: var(--surface); color: var(--text); }

/* --- progress -------------------------------------------------------------- */
.progress {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.status { font-size: 13px; color: var(--muted); white-space: nowrap; min-width: 64px; }
.bar { flex: 1; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s ease; }

/* --- blurred screenshot background (setting review_background) ------------- */
/* Behind everything. inset is negative so the blur's soft edge falls off-screen
   instead of leaving a dark rim. The card keeps its solid panel, so text
   contrast does not depend on the picture behind it. */
.bg-shot {
  position: fixed;
  inset: -60px;
  z-index: -1;
  background-size: cover;
  background-position: center;
  filter: blur(36px) brightness(0.42) saturate(1.3);
  opacity: 0;
  transition: opacity 0.25s ease;
}
body.has-bg-shot { background: transparent; }
body.has-bg-shot .bg-shot { opacity: 1; }
html { background: var(--bg); }

/* --- session counter -------------------------------------------------------- */
/* A self-contained badge (own background and border) in a fixed corner, so it
   crops cleanly out of a recording as a "sticker". */
.counter {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 22px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.counter-value {
  font: 400 40px var(--font-display);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums; /* digits don't jiggle as they change */
}
@media (max-width: 720px) { .counter { right: 16px; bottom: 16px; padding: 8px 14px 6px; } .counter-value { font-size: 28px; } }

/* XP bar inside the counter badge (celebrate.js). */
.xp-bar {
  position: relative;
  width: 100%;
  min-width: 150px;
  height: 12px;
  margin-top: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}
.xp-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--good), #b6e45a);
  transition: width 0.35s cubic-bezier(.2, 1.3, .4, 1);
}
.xp-bar span {
  position: absolute;
  right: 6px;
  top: -2px;
  font: 400 10px var(--font-display);
  letter-spacing: 0.08em;
  color: var(--text);
  mix-blend-mode: difference;
}

/* --- celebrations (celebrate.js) ------------------------------------------- */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
/* The 覚 ("learned") seal: hanko red, the one place that colour is used. */
.fx-hanko {
  position: fixed;
  z-index: 61;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 5px solid #d8342c;
  border-radius: 50%;
  color: #d8342c;
  background: rgba(216, 52, 44, 0.08);
  font: 700 50px var(--font-study);
  pointer-events: none;
  animation: fx-stamp 1.3s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
@keyframes fx-stamp {
  0% { opacity: 0; transform: scale(2.6) rotate(-22deg); }
  18% { opacity: 1; transform: scale(.92) rotate(-12deg); }
  26% { transform: scale(1) rotate(-12deg); }
  80% { opacity: .95; }
  100% { opacity: 0; transform: scale(1) rotate(-12deg); }
}
.fx-levelup {
  position: fixed;
  z-index: 61;
  font: 400 30px var(--font-display);
  letter-spacing: 0.06em;
  color: #b6e45a;
  text-shadow: 0 0 18px rgba(182, 228, 90, 0.7);
  pointer-events: none;
  animation: fx-rise 1.2s ease-out forwards;
}
@keyframes fx-rise {
  0% { opacity: 0; transform: translateY(0) scale(.8); }
  20% { opacity: 1; transform: translateY(-14px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-70px) scale(1); }
}
.fx-banner {
  position: fixed;
  z-index: 62;
  transform: translate(-50%, -50%);
  font: 400 64px var(--font-display);
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: fx-banner 1.6s cubic-bezier(.2, 1.2, .3, 1) forwards;
}
.fx-banner em { color: var(--accent); font-style: normal; }
@keyframes fx-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-4deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(-2deg); }
  30% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-hanko, .fx-levelup, .fx-banner { animation-duration: 0.01s; }
}

/* --- the card -------------------------------------------------------------- */
#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px 48px;
}

/* Flat surface sized to its content -- no drop shadow, no full-height box. */
.card {
  width: 100%;
  max-width: 760px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 44px 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: card-in 0.2s ease;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.sentence {
  font-family: var(--font-study);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.8;
  text-align: center;
  width: 100%;
}

/* The studied word: a tint plus an orange underline. */
.highlight {
  background: var(--hl);
  box-shadow: inset 0 -3px 0 var(--accent);
  border-radius: 6px 6px 2px 2px;
  padding: 0 3px;
}

.front-actions {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hint { font-size: 12px; color: var(--muted); }

/* --- kanji panel (beside the card's back) ----------------------------------- */
/* The card stays centred; the panel hangs off its left edge on a wide window
   and moves above it when there is no room beside it. */
.card-wrap { position: relative; width: 100%; max-width: 760px; }
.kanji-panel {
  position: absolute;
  top: 0;
  right: calc(100% + 20px);
  width: 260px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  animation: card-in 0.18s ease;
}
@media (max-width: 1340px) {
  .kanji-panel { position: static; width: 100%; max-height: none; margin-bottom: 14px; }
}
.kanji-panel > .qs-label { display: block; margin-bottom: 8px; }
.kanji-entry + .kanji-entry { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.kanji-head { display: flex; align-items: center; gap: 12px; }
.kanji-char { font: 700 46px/1 var(--font-study); color: var(--text); }
.kanji-meanings { font-size: 15px; line-height: 1.35; }
.kanji-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.kanji-readings { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; font-family: var(--font-study); }
.kanji-reading {
  font-size: 13px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--furigana);
}
.kanji-reading.on { font-weight: 500; }
/* The reading this word uses. */
.kanji-reading.used { background: var(--hl); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.kanji-parts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.kanji-part {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 8px;
}
.kanji-part b { font: 700 18px var(--font-study); color: var(--text); }

/* --- back ------------------------------------------------------------------ */
.back { width: 100%; display: flex; flex-direction: column; align-items: center; animation: card-in 0.18s ease; }

.word-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.word-text { font-family: var(--font-study); font-weight: 700; font-size: 48px; line-height: 1.3; }
.word-text ruby { ruby-position: over; }
.word-text rt { font-size: 0.4em; font-weight: 500; color: var(--furigana); user-select: none; }

.sentence-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.furigana {
  font-family: var(--font-study);
  font-weight: 500;
  font-size: 26px;
  line-height: 2.4;
  text-align: center;
}
.furigana ruby { ruby-position: over; }
.furigana rt { font-size: 0.5em; font-weight: 500; color: var(--furigana); user-select: none; }

.play-btn {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.play-btn:hover { border-color: var(--accent); color: var(--accent); }
.play-btn .qs-icon { width: 17px; height: 17px; }

/* Translation on top, definition below; each starts as a button. */
.reveal-stack { width: 100%; display: flex; flex-direction: column; margin-top: 18px; }
.reveal-slot { width: 100%; }
.reveal-slot + .reveal-slot, .reveal-divider + .reveal-slot { margin-top: 8px; }
.reveal-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 400 15px var(--font-ui);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
}
.reveal-btn:hover { background: var(--surface-2); color: var(--text); }

.sentence-translation, .translation-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.55;
  animation: card-in 0.15s ease;
}
.sentence-translation::before, .translation-panel::before {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 4px;
}
.sentence-translation::before { content: "TRANSLATION"; }
.translation-panel::before { content: "DEFINITION"; }
.sentence-translation.pending, .sentence-translation.failed { color: var(--muted); }
.definition-word { font-family: var(--font-study); font-weight: 700; font-size: 28px; line-height: 1.9; margin-top: 6px; }
.definition-word ruby { ruby-position: over; }
.definition-word rt { font-size: 0.55em; font-weight: 500; color: var(--furigana); user-select: none; }
.reading { font-family: var(--font-study); font-size: 15px; color: var(--furigana); }
.definition { margin-top: 2px; }

/* Colour-matched translation (setting translation_colors): a piece of the
   Japanese and the English piece it means share one of these. A tint plus a
   solid underline, so it reads on both themes. */
.al {
  background: color-mix(in srgb, var(--c) 18%, transparent);
  box-shadow: inset 0 -3px 0 var(--c);
  border-radius: 5px 5px 2px 2px;
  padding: 0 2px;
}
.al-0 { --c: var(--chunk-0); }
.al-1 { --c: var(--chunk-1); }
.al-2 { --c: var(--chunk-2); }
.al-3 { --c: var(--chunk-3); }
.al-4 { --c: var(--chunk-4); }
.al-5 { --c: var(--chunk-5); }
/* The studied word inside a coloured piece keeps its orange mark, as an
   underline under the piece's own. */
.al .highlight { background: none; box-shadow: none; padding: 0;
                 text-decoration: underline 2px var(--accent); text-underline-offset: 7px; }
.sentence-translation { line-height: 1.9; }

/* Only drawn once BOTH are open (app.js). */
.reveal-divider { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 10px 0 2px; }

.screenshot-wrap { margin-top: 16px; width: 100%; display: flex; justify-content: center; }
/* Capped so the grade buttons stay on screen in a ~1000px-tall window. */
.screenshot { max-width: 100%; max-height: 280px; border-radius: var(--r-md); border: 1px solid var(--line); }

.word-hint { font-size: 12px; color: var(--muted); margin: 14px 0 0; text-align: center; }

/* Grading: neutral buttons, the colour is on the word only. */
.ratings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin-top: 18px; }
.rating {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 11px 0 10px;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-ui);
  transition: border-color 0.12s ease, transform 0.05s ease;
}
.rating:active { transform: scale(0.98); }
.rating b { display: block; font: 400 18px var(--font-display); letter-spacing: 0.06em; }
.rating > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.interval:empty { display: none; }
.rating-again b { color: var(--again); }
.rating-hard b { color: var(--hard); }
.rating-good b { color: var(--good); }
.rating-easy b { color: var(--easy); }
/* The grade pulse: the pressed button fills with its own colour (app.js holds
   the card for GRADE_PULSE_MS so it is seen). */
.rating-again { --grade: var(--again); }
.rating-hard { --grade: var(--hard); }
.rating-good { --grade: var(--good); }
.rating-easy { --grade: var(--easy); }
.rating.pulse { animation: grade-pulse 260ms ease-out forwards; border-color: var(--grade); }
.rating.pulse b, .rating.pulse > span, .rating.pulse kbd { color: #0a0a0a; }
.rating.pulse kbd { background: rgba(0, 0, 0, 0.12); border-color: rgba(0, 0, 0, 0.2); }
@keyframes grade-pulse {
  0% { background: var(--surface-2); transform: scale(1); }
  35% { background: var(--grade); transform: scale(1.05); }
  100% { background: var(--grade); transform: scale(1); }
}
.rating-again:hover { border-color: var(--again); }
.rating-hard:hover { border-color: var(--hard); }
.rating-good:hover { border-color: var(--good); }
.rating-easy:hover { border-color: var(--easy); }

/* --- clickable words + the definition popup -------------------------------- */
.rv-word { cursor: pointer; border-radius: 4px; transition: background-color 120ms; }
.rv-word:hover { background: var(--surface-2); }
.word-popup {
  position: fixed;
  z-index: 50;
  /* Enlarged 2026-10-23 (Connor: everything bigger, the Japanese more than
     the English). Was 360px wide, 14px English, 18px word, ~10px readings. */
  max-width: min(440px, calc(100vw - 32px));
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-size: 17px;            /* English: +21% */
  line-height: 1.5;
}
.word-popup-head { font-family: var(--font-study); font-size: 28px; font-weight: 700; margin-bottom: 8px; } /* kanji: +56% */
/* Readings sit above the word as furigana, like everywhere else on the card. */
.word-popup-head { line-height: 1.9; }
.word-popup ruby { ruby-position: over; }
.word-popup rt { font-size: 0.58em; font-weight: 500; color: var(--furigana); user-select: none; } /* ~16px: +60% */
.word-popup-entry .entry-head { line-height: 1.9; font-size: 22px; }
.word-popup-asis { font: 400 13px var(--font-ui); color: var(--muted); line-height: 1.3; margin-top: 2px; }
/* Conjugated words: the breakdown line and the dictionary form under it. */
.conj-line { font: 400 14px var(--font-ui); color: var(--muted); line-height: 1.6; margin-top: 2px; }
.conj-base { font-family: var(--font-study); color: var(--text); }
.conj-tag {
  display: inline-block;
  font-size: 12px;
  line-height: 1.5;
  padding: 0 7px;
  margin-left: 5px;
  border-radius: 6px;
  background: var(--hl);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.conj-dict {
  font-size: 20px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 4px;
}
.word-popup-body { max-height: 300px; overflow-y: auto; }
.word-popup-entry + .word-popup-entry { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.word-popup-entry .entry-head { font-family: var(--font-study); font-weight: 600; }
.word-popup-entry ul { margin: 2px 0 0 18px; padding: 0; }
.word-popup-empty { color: var(--muted); }

/* --- done ------------------------------------------------------------------ */
.empty { display: flex; flex-direction: column; align-items: center; padding: 80px 20px; text-align: center; }
.empty-title { font-family: var(--font-display); font-size: 40px; letter-spacing: 0.04em; color: var(--accent); }
.empty-text { color: var(--muted); margin-top: 6px; }
.recap { display: flex; gap: 48px; margin-top: 28px; }
.recap-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.recap-value { font: 400 32px var(--font-display); color: var(--text); }

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; padding: 12px 16px 8px; }
  .progress { padding: 0 16px; }
  #app { padding: 20px 16px 40px; }
  .card { padding: 28px 18px 22px; }
  .sentence { font-size: 26px; }
  .ratings { grid-template-columns: repeat(2, 1fr); }
}

/* --- phones (2026-10-26, for the web reviewer) ---------------------------------
   Only at phone widths, so the desktop app's window keeps its layout. */
@media (max-width: 600px) {
  .topbar { flex-wrap: nowrap; gap: 0; padding: 10px 12px 6px; }
  .topbar .icon-btn { width: 34px; height: 34px; }
  .progress { padding: 0 12px; }
  #app { padding: 14px 12px 32px; }
  /* The card first, the kanji panel under it: on a phone the panel is extra
     reading, not something to scroll past before the card. */
  .card-wrap { display: flex; flex-direction: column; }
  .kanji-panel { order: 2; margin: 14px 0 0; }
  /* The progress line above already shows the same count; the big badge
     would sit on top of the grade buttons. */
  .counter { display: none; }
  .card { padding: 22px 14px 18px; }
}
/* Touch screens: there is no keyboard to press, and a quick double tap must
   not zoom the page instead of pressing a button twice. */
@media (hover: none) {
  .hint, kbd { display: none; }
}
button, a, .rv-word { touch-action: manipulation; }