/* Hittite cuneiform (Vanseveren fonts) has no glyph coverage in default browser/OS fonts.
   Same three-face setup as custom_interlinear/generator.html, scoped to .cuneiform only --
   these fonts also map ordinary ASCII/Latin glyphs, so applying them to .flashcard-front
   unconditionally would hijack Tocharian's Latin-script word forms too. */
@font-face {
  font-family: "UllikummiA";
  src: url("/static/custom_interlinear/fonts/UllikummiA.d0baacffa803.ttf") format("truetype");
  font-display: swap;
  unicode-range: U+12000-1247F;
}
@font-face {
  font-family: "UllikummiB";
  src: url("/static/custom_interlinear/fonts/UllikummiB.fc248627e709.ttf") format("truetype");
  font-display: swap;
  unicode-range: U+12000-1247F;
}
@font-face {
  font-family: "UllikummiC";
  src: url("/static/custom_interlinear/fonts/UllikummiC.a7fc04c5cb6b.ttf") format("truetype");
  font-display: swap;
  unicode-range: U+12000-1247F;
}

.flashcard-front.cuneiform {
  font-family: UllikummiA, UllikummiB, UllikummiC, sans-serif;
}

.sign-glyph.cuneiform {
  font-family: UllikummiA, UllikummiB, UllikummiC, sans-serif;
}

/* Determinative readings (e.g. the "d" in ᵈIŠTAR) are conventionally smaller and raised
   in Hittitology. 0.85em is a floor, not the mock's 0.7em -- flagged in review as a
   low-vision risk if shrunk further. The second selector is needed because
   .flashcard-reading-list .reading-transliteration (below) is more specific than plain
   .determinative and would otherwise win the font-size cascade in the multi-reading list.
   position/top, not vertical-align, does the raising: #reading-answer is a <p> (block) and
   .reading-transliteration is a CSS grid item (its <li> is display:contents) -- vertical-align
   has no effect on either box type, only on inline/inline-block/table-cell boxes. top shifts
   the glyph without reserving space for it, so margin-top adds that space back (grid row
   auto-sizing counts an item's margin box) -- otherwise the raised glyph paints into the row
   above it. Both values calibrated against a user-supplied reference screenshot: top so the
   glyph's bottom lands at its reading's footnote's vertical midpoint, margin-top so it clears
   the row above by roughly the list's own row-gap. */
.determinative,
.flashcard-reading-list .reading-transliteration.determinative {
  font-size: 0.85em;
  position: relative;
  top: -1.25em;
  margin-top: 1.3em;
}

.flashcard-card {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1.5rem;
  max-width: calc(20rem * 2 + 1.5rem);
  margin: 2.5rem auto 0;
}

.flashcard-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20rem;
  aspect-ratio: 5 / 3;
  padding: 1.5rem;
  background: #f5edd9;
  border: 1px solid #8c7b5c;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.flashcard-front,
.flashcard-back {
  margin: 0;
  text-align: center;
}

.flashcard-front {
  font-size: 2em;
}

.flashcard-back {
  font-size: 1.5em;
  font-style: italic;
}

.flashcard-back-panel {
  display: none;
}

/* Below this, the desktop layout (front+back side by side, fixed 20rem panels) either
   overflows the viewport or leaves the card tiny relative to the screen. Stacking
   vertically frees up the full viewport width for one panel at a time, so the card can
   grow instead of shrink. */
@media (max-width: 40rem) {
  .flashcard-card {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    /* Desktop's 2.5rem top margin plus a full-height card left no room for the
       controls below without scrolling -- tightened so Show/Discard/Keep stay
       reachable on one screen. */
    margin-top: 1rem;
    gap: 0.75rem;
  }

  .flashcard-panel {
    width: 100%;
    max-width: 22rem;
    aspect-ratio: 4 / 3;
  }

  .flashcard-front {
    font-size: 2.3em;
  }

  .flashcard-back {
    font-size: 1.7em;
  }

  #controls {
    margin-top: 0.75rem;
  }

  #deck-piles {
    margin-top: 1.5rem;
  }
}

.flashcard-card.revealed .flashcard-back-panel {
  display: flex;
  animation: flashcard-reveal 0.25s ease;
}

@keyframes flashcard-reveal {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

#controls {
  max-width: calc(20rem * 2 + 1.5rem);
  margin: 1.5rem auto 0;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.flashcard-side-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#deck-piles {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2rem;
  margin-top: 3rem;
}

.pile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pile-stack {
  position: relative;
  width: 70px;
  height: 44px;
}

.card,
.empty-slot {
  width: 70px;
  height: 44px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

.card {
  border: 2px solid #333;
  background: #eee;
}

.pile-stack .card {
  position: absolute;
  left: 0;
}

.empty-slot {
  border: 2px dashed #8a8a8a;
  color: #6b6b6b;
}

.pile-label {
  font-size: 12px;
  color: #555;
  margin-top: 6px;
}

.pile-flying-card {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  transition: transform 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .pile-flying-card {
    transition: none;
  }
}

#session-complete-modal {
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  padding: 2rem;
  max-width: 24rem;
  text-align: center;
  background: #fdfbf6;
}

#session-complete-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

#session-complete-modal a {
  display: inline-block;
  margin: 0 0.75rem;
}

#session-complete-modal h2 {
  margin-top: 0;
}

.flashcard-footnote {
  margin: 0.5rem 0 0;
  font-size: 0.75em;
  font-style: normal;
  text-align: center;
  color: #5a4d38;
}

.flashcard-reading-list {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 1rem;
  row-gap: 0.35rem;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flashcard-reading-list li {
  display: contents;
}

.flashcard-reading-list .reading-transliteration {
  font-size: 1.1em;
  font-style: italic;
  text-align: right;
}

.flashcard-reading-list .flashcard-footnote {
  margin: 0;
  text-align: left;
}

/* features/flashcards/static/flashcards/session.css — new rules, not scoped to a specific id
   so both filter instances share them (compare reading.html's #translation-languages-* rules,
   which are per-widget because that page only has one instance) */
.filter-row { display: flex; gap: 0.5em; }
.multi-select { position: relative; display: inline-block; }
.multi-select-button::after { content: " \25be"; }
.multi-select-list {
  position: absolute;
  z-index: 20;
  background: #fff;
  border: 1px solid #999;
  list-style: none;
  margin: 0;
  padding: 0.3em 0;
  min-width: 12em;
}
.multi-select-list [role="option"] { padding: 0.15em 0.6em; cursor: pointer; }
.multi-select-list [role="option"]::before { content: "\2007\2007"; }
.multi-select-list [role="option"][aria-selected="true"]::before { content: "\2713 "; }
.multi-select-list [role="option"]:hover { background: #eee; }
.multi-select-list [role="option"].active { outline: 2px solid #333; outline-offset: -2px; }

/* Session action buttons (Show / Discard / Keep in deck / More practice) show lowercase with a
   bold first letter, matching their s/d/k/m key shortcuts. */
#controls .btn { text-transform: lowercase; }
#controls .btn::first-letter { font-weight: bold; }