/* Design tokens live in tokens.css and are shared with seo.css, so the public
   pages and the app cannot drift apart (#361). Declare custom properties on
   `:root` there, never here. */
@import url('./tokens.css');

/* Breakpoints — the whole app uses these six and no others (#360). Media queries
   cannot read custom properties, so they are written out, but write out one of
   these and nothing else; a new value narrows one screen on its own terms and is
   how eleven of them accumulated here in the first place. `anki-import.css`
   follows the same set.

     max-width: 479px   small phone
     max-width: 759px   phone and portrait tablet — the main mobile breakpoint
     max-width: 979px   landscape tablet
     min-width: 760px   past the mobile layout
     min-width: 980px   desktop
     min-width: 1180px  wide desktop

   Viewport height goes in `dvh`, never `vh`: mobile browsers count the URL bar
   into `vh`, which put the bottom of a modal — its buttons — underneath it. */

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: linear-gradient(180deg, var(--bg-base), var(--bg-secondary));
  color: var(--text-strong);
  overflow-x: hidden;
}

/* Held while a full-screen overlay is open (services/scrollLock.ts, #377). The
   pin has to be `position: fixed` — `overflow: hidden` alone does not stop iOS
   Safari — and `top` is set inline to the scroll offset so the page does not jump
   to zero on the way in or out. */
body.is-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

body,
button,
input,
textarea,
select {
  font: inherit;
}

button,
input,
textarea,
select {
  color: inherit;
}

button {
  border: 0;
  background: none;
  padding: 0;
}

button,
input,
textarea,
select,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select:focus-visible,
a:focus-visible {
  outline: none;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  box-shadow: 0 0 0 3px var(--ring);
}

a {
  color: inherit;
}

svg {
  display: block;
}

code {
  padding: 0.14rem 0.36rem;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--accent);
  font-size: 0.85em;
}

.app-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.app-backdrop__glow {
  position: absolute;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  filter: blur(16px);
  opacity: 0.9;
}

.app-backdrop__glow--left {
  left: -12rem;
  top: -16rem;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 68%);
}

.app-backdrop__glow--right {
  right: -10rem;
  top: 10rem;
  background: radial-gradient(circle, rgba(110, 147, 231, 0.16) 0%, transparent 66%);
}

.app-backdrop__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.12;
  mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82) 18%, rgba(0, 0, 0, 0.82) 82%, transparent);
}

.main-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100dvh;
  padding: 18px 16px calc(var(--dock-height) + 28px);
}

.nav-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: calc(var(--overlay-z) + 5);
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg-panel-strong);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
}

.nav-brand {
  display: none;
}

.brand-copy {
  min-width: 0;
}

.logo,
.shell-title,
.page-title,
.dictionary-title,
.games-title,
.panel-title,
.search-input,
.translated-word,
.memo-card-text {
  font-family: var(--font-display);
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-strong);
}

.nav-tagline {
  margin: 6px 0 0;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 0.92rem;
}

.nav-list,
.nav-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.nav-panel a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 72px;
  padding: 10px 6px;
  border: 1px solid transparent;
  border-radius: 18px;
  text-decoration: none;
  color: var(--text-soft);
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.nav-panel a:hover,
.nav-panel a.active {
  color: var(--text-strong);
  background: var(--bg-inset);
  border-color: var(--border);
}

.nav-panel a.active::after {
  content: "";
  position: absolute;
  left: 40%;
  right: 40%;
  bottom: 5px;
  height: 3px;
  border-radius: 999px;
  background: var(--bg-accent);
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--bg-muted);
}

.nav-icon svg {
  width: 18px;
  height: 18px;
}

.nav-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}

.nav-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-description {
  display: none;
}

.nav-user-section {
  display: none;
}

.nav-user-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.nav-user-email {
  color: var(--text-base);
  word-break: break-word;
  line-height: 1.5;
}

.nav-signout-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(207, 104, 91, 0.28);
  background: rgba(207, 104, 91, 0.08);
  color: var(--danger);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.nav-signout-btn:hover {
  background: rgba(207, 104, 91, 0.14);
  border-color: rgba(207, 104, 91, 0.4);
}

.content-area {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-header--between {
  gap: 12px;
}

.page-heading,
.dictionary-title,
.games-title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.page-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel-soft);
  color: var(--text-base);
  font-size: 0.84rem;
  font-weight: 600;
}

.page-note {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

.section-title {
  margin: 0 0 12px;
  color: var(--text-strong);
  font-size: 1rem;
  font-weight: 700;
}

.section-title--small {
  margin-bottom: 10px;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.shell-topbar,
.page-hero,
.panel,
.dictionary-grid,
.profile-layout {
  min-width: 0;
}

.shell-topbar {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg-panel);
  box-shadow: var(--shadow-md);
}

.shell-eyebrow,
.page-kicker,
.panel-kicker,
.hero-metric-label,
.profile-stat-label {
  display: inline-block;
  margin: 0;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shell-title {
  margin: 8px 0 0;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.shell-status {
  display: grid;
  gap: 8px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-copy {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.page-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.page-view.hidden {
  display: none;
}

.page-hero {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg-panel-strong);
  box-shadow: var(--shadow-sm);
}

.page-hero--compact {
  padding-block: 18px;
}

.page-title {
  margin: 8px 0 0;
  font-size: clamp(1.8rem, 4vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.page-description {
  margin: 10px 0 0;
  max-width: 62ch;
  color: var(--text-muted);
  line-height: 1.65;
}

.page-hero-meta {
  display: grid;
  gap: 12px;
}

.hero-metric,
.page-stat,
.profile-stat-tile,
.library-card,
.game-card,
.profile-menu-item {
  border: 1px solid var(--border);
  background: var(--bg-panel-soft);
  box-shadow: var(--shadow-sm);
}

.hero-metric {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
}

.hero-metric strong {
  font-size: 0.96rem;
  line-height: 1.5;
}

.page-stat {
  display: grid;
  gap: 4px;
  align-content: start;
  width: fit-content;
  min-width: 150px;
  padding: 14px 16px;
  border-radius: 18px;
}

.page-stat-number {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.3rem, 4vw, 2rem);
  line-height: 1;
  color: var(--text-strong);
}

.page-stat-label {
  color: var(--text-muted);
  line-height: 1.5;
}

.layout-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.layout-container--translator {
  align-items: flex-start;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.card-sidebar {
  min-width: 0;
}

/* The profile owns the learning pair; the translator only switches direction. */
.lang-toggle-bar {
  display: none;
}

.lang-dropdown-wrap {
  position: relative;
  flex: 1 1 220px;
}

.lang-toggle-btn,
.lang-swap-btn,
.tool-button,
.toolbar-chip,
.theme-option,
.profile-menu-item,
.nav-signout-btn {
  cursor: pointer;
}

.lang-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 62px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-panel);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
  transition: border-color 160ms ease, transform 160ms ease;
}

.lang-toggle-btn:hover,
.lang-swap-btn:hover,
.tool-button:hover,
.toolbar-chip:hover:not(:disabled),
.theme-option:hover,
.profile-menu-item:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.lang-toggle-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.lang-toggle-caption {
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lang-swap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-panel);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.dropdown-arrow {
  color: var(--text-soft);
}

.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-panel-strong);
  box-shadow: var(--shadow-md);
  z-index: 20;
}

.language-menu li {
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--text-base);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.language-menu li:hover,
.language-menu li.active {
  background: var(--bg-muted);
  color: var(--text-strong);
}

.pump-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  min-height: 56px;
}

.pump-bar[hidden] {
  display: none;
}

.pump-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  border: none;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: filter 160ms ease;
}

.pump-bar__chip:hover {
  filter: brightness(1.08);
}

.pump-bar__chip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.pump-bar__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.pump-bar__progress-text {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  flex-shrink: 0;
  color: var(--text-base);
  font-size: 0.86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.pump-bar__progress-done-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(119, 199, 160, 0.18);
  color: var(--success);
  flex-shrink: 0;
}

.pump-bar__progress-done-icon svg {
  width: 15px;
  height: 15px;
}

.pump-bar__progress-position {
  color: var(--text-strong);
}

.pump-bar__progress-divider {
  margin: 0 2px;
  color: var(--text-soft);
  font-weight: 500;
}

.pump-bar__progress-total {
  color: var(--text-soft);
}

.pump-bar__progress-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 24px;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden;
}

.pump-bar__progress-fill {
  display: block;
  width: var(--pump-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--bg-accent);
  transition: width 240ms ease;
}

.pump-bar__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 9px 14px;
  border: none;
  border-radius: 14px;
  background: var(--bg-accent);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

/* ~34px tall inside a 52px bar; the area fills the room the bar already has
   rather than growing the button and reflowing the row (#360). */
.pump-bar__cta::after {
  content: '';
  position: absolute;
  inset: -5px -2px;
}

.pump-bar__cta:hover {
  background: var(--bg-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.pump-bar__cta:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.pump-bar__cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pump-bar__cta-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.pump-bar__cta-icon--done,
.pump-bar__cta-icon--rebuilding {
  display: none;
}

.pump-bar[data-pump-state="done"] .pump-bar__progress-fill {
  background: var(--success);
}

.pump-bar[data-pump-state="done"] .pump-bar__progress-text {
  display: none;
}

.pump-bar[data-pump-state="done"] .pump-bar__progress-done-icon {
  display: inline-flex;
}

.pump-bar[data-pump-state="done"] .pump-bar__cta-icon--active {
  display: none;
}

.pump-bar[data-pump-state="done"] .pump-bar__cta-icon--done {
  display: inline-block;
}

.pump-bar[data-pump-state="loading"] .pump-bar__cta {
  cursor: progress;
  opacity: 0.78;
}

/* While the queue is preparing, swap the numbers + bar for a rotating,
   plain-language phrase so new users learn what this row does. */
.pump-bar__progress-phrase {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-soft);
  font-size: 0.86rem;
  font-weight: 500;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pump-bar[data-pump-state="loading"] .pump-bar__progress-phrase {
  display: block;
  animation: pump-phrase-pulse 1.6s ease-in-out infinite;
}

.pump-bar[data-pump-state="loading"] .pump-bar__progress-text,
.pump-bar[data-pump-state="loading"] .pump-bar__progress-track,
.pump-bar[data-pump-state="loading"] .pump-bar__progress-done-icon {
  display: none;
}

@keyframes pump-phrase-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pump-bar[data-pump-state="loading"] .pump-bar__progress-phrase {
    animation: none;
  }
}

.pump-bar[data-pump-state="loading"] .pump-bar__cta-icon--active,
.pump-bar[data-pump-state="loading"] .pump-bar__cta-icon--done {
  display: none;
}

.pump-bar[data-pump-state="loading"] .pump-bar__cta-icon--rebuilding {
  display: inline-block;
  animation: pump-spin 0.9s linear infinite;
}

.pump-bar[data-pump-state="rebuilding"] .pump-bar__cta {
  cursor: progress;
  opacity: 0.78;
}

.pump-bar[data-pump-state="rebuilding"] .pump-bar__cta-icon--active,
.pump-bar[data-pump-state="rebuilding"] .pump-bar__cta-icon--done {
  display: none;
}

.pump-bar[data-pump-state="rebuilding"] .pump-bar__cta-icon--rebuilding {
  display: inline-block;
  animation: pump-spin 0.9s linear infinite;
}

.pump-bar[data-pump-state="rebuilding"] .pump-bar__progress-fill {
  background: var(--bg-muted);
}

@keyframes pump-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 479px) {
  .pump-bar {
    gap: 8px;
    padding: 6px 8px 6px 10px;
    min-height: 52px;
  }

  .pump-bar__chip {
    padding: 5px 10px;
    font-size: 0.72rem;
    gap: 4px;
  }

  .pump-bar__progress {
    gap: 8px;
  }

  .pump-bar__progress-text {
    font-size: 0.82rem;
  }

  .pump-bar__cta {
    padding: 8px 12px;
    font-size: 0.84rem;
    border-radius: 12px;
  }

  .pump-bar__cta-icon {
    display: none;
  }
}

.translation-sections {
  position: relative;
  display: grid;
  gap: 16px;
}

/* Swap button floats over the gap between the input and output panels
   (horizontally between them on desktop, vertically on stacked mobile).
   Absolutely positioned, so it is not a grid item and never disturbs the
   two-column track layout. The descendant selector keeps it square against
   the breakpoint rules that stretch the old in-bar swap button. */
.translation-sections .lang-swap-btn--between {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-width: 2px;
}

@media (max-width: 759px) {
  /* Panels stack vertically here, so spin the arrows to point up/down. */
  .translation-sections .lang-swap-btn--between {
    width: 44px;
    height: 44px;
  }

  .translation-sections .lang-swap-btn--between svg {
    transform: rotate(90deg);
  }
}

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.panel--compact .panel-body {
  padding: 6px 8px 8px;
}

.panel--compact .panel-footer {
  padding: 14px 18px 18px;
}

.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  opacity: 0.9;
}

.panel-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 18px;
  padding: 18px 20px 0;
}

.panel-title {
  margin: 8px 0 0;
  font-size: 1.45rem;
  line-height: 1.15;
}

.panel-note {
  max-width: 28ch;
  color: var(--text-soft);
  line-height: 1.5;
  text-align: right;
}

.panel-body {
  padding: 6px 8px 8px;
  flex: 1;
}

.panel-footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
  border-top: 1px solid var(--border);
}

.search-box,
.translation-box {
  position: relative;
  min-height: 216px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-inset);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.search-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-panel-soft);
  color: var(--text-base);
  transition: border-color 160ms ease, transform 160ms ease, color 160ms ease;
}

.tool-button span {
  font-size: 0.9rem;
  font-weight: 600;
}

.panel-word-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  flex: 1;
  padding: 18px 18px 10px;
}

.translation-box .panel-word-group {
  padding-block: 14px;
}

.search-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  font-size: clamp(2.45rem, 3.2vw, 2.2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.search-input::placeholder {
  color: var(--text-soft);
}

.translated-word {
  display: block;
  min-height: 1em;
  font-size: clamp(1.45rem, 3.2vw, 2.2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--text-strong);
  word-break: break-word;
  transition: opacity 180ms ease;
}

/* The machine translation of a pair without English, before its meaning is resolved (#587). */
.translated-word--provisional {
  opacity: 0.55;
}

.translated-word--loading {
  color: transparent !important;
  position: relative;
}

.translated-word--loading::after {
  content: "";
  display: block;
  width: 58%;
  max-width: 280px;
  height: 1.05em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(130, 147, 176, 0.18) 0%, rgba(224, 232, 244, 0.48) 50%, rgba(130, 147, 176, 0.18) 100%);
  background-size: 220px 100%;
  animation: shimmer 1.2s linear infinite;
}

.translit-display {
  min-height: 1.2em;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-box-footer,
.translation-box-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
}

.search-box-footer {
  justify-content: space-between;
}

.translation-box-footer {
  justify-content: space-between;
}

.translation-pos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.translation-pos-button {
  min-height: 36px;
  max-width: 100%;
  padding: 7px 12px;
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
}

.translation-pos-list > li {
  min-width: 0;
  max-width: 100%;
}

.translation-sense-button {
  min-height: 36px;
  padding: 0 14px;
  white-space: normal;
}

.search-button,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 242, 219, 0.14);
  background: var(--bg-accent);
  color: #fff9f0;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(212, 138, 43, 0.22);
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}

.search-button {
  min-height: 46px;
}

.search-button:hover,
.primary-button:hover {
  transform: translateY(-1px);
  background: var(--bg-accent-hover);
  filter: saturate(1.04);
}

.search-button--loading,
.search-button--loading:hover {
  transform: none;
  filter: none;
  opacity: 0.7;
  cursor: wait;
}

.primary-button {
  width: 100%;
}

.primary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.primary-button.btn--saved {
  background: linear-gradient(180deg, #4eb785, #3e9369);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 24px rgba(78, 183, 133, 0.16);
  opacity: 1;
  cursor: default;
}

.tts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel-soft);
  color: var(--accent);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
}

.tts-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.tts-btn--disabled,
.tts-btn:disabled {
  color: var(--text-soft);
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

/* Parts of the word page that are still being filled in (#615): a shimmer in the
   part's own place and no text, so it reads as on its way. */
.translit-display--filling::after {
  content: "";
  display: inline-block;
  width: 7ch;
  height: 0.8em;
  border-radius: 999px;
  vertical-align: middle;
}

.translit-display--filling::after,
.tts-btn--filling:disabled,
.save-to-learn-btn--reserved.save-to-learn-btn--filling {
  background: linear-gradient(90deg, rgba(130, 147, 176, 0.18) 0%, rgba(224, 232, 244, 0.48) 50%, rgba(130, 147, 176, 0.18) 100%);
  background-size: 220px 100%;
  animation: shimmer 1.2s linear infinite;
}

.tts-btn--filling:disabled {
  opacity: 0.8;
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .translit-display--filling::after,
  .tts-btn--filling:disabled,
  .save-to-learn-btn--reserved.save-to-learn-btn--filling {
    animation: none;
  }
}

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-base);
  line-height: 1.4;
}

.chip--neutral {
  cursor: default;
}

.chip--action {
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}

.chip--action:hover {
  transform: translateY(-1px);
  background: var(--accent-soft);
  color: var(--accent);
}

.suggestions-hint {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.chip--skeleton,
.image-item--skeleton,
.example-line {
  background: linear-gradient(90deg, rgba(130, 147, 176, 0.18) 0%, rgba(224, 232, 244, 0.48) 50%, rgba(130, 147, 176, 0.18) 100%);
  background-size: 220px 100%;
  animation: shimmer 1.2s linear infinite;
}

.chip--skeleton {
  min-width: 92px;
  color: transparent;
}

.chip--skeleton:nth-child(2n) {
  min-width: 124px;
}

.enrichment-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.enrichment-sense {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Meaning tabs (#457). They sit above the synonyms they change, and the lexeme chips stay up
   by the translated word — two selectors, two places, so neither can suppress the other. */
.enrichment-sense-tabs {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0 0 2px;
  border-bottom: 1px solid var(--paper-line);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.enrichment-sense-tab {
  position: relative;
  padding: 8px 12px 10px;
  border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.enrichment-sense-tab:hover {
  background: var(--accent-soft);
  color: var(--text-base);
}

.enrichment-sense-tab:focus-visible {
  outline: 2px solid var(--paper-leather);
  outline-offset: -2px;
}

.enrichment-sense-tab--active {
  color: var(--text-base);
}

/* Drawn on the tab, overlapping the list's own border, so the active tab reads as joined to
   the content below it. */
.enrichment-sense-tab--active::after {
  content: '';
  position: absolute;
  right: 8px;
  bottom: -3px;
  left: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--paper-leather);
}

.enrichment-gloss {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* Examples and synonyms behind a drawer (#583): the page answers what the word means first. */
.enrichment-more__summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.enrichment-more__summary::-webkit-details-marker {
  display: none;
}

.enrichment-more__summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.enrichment-more[open] > .enrichment-more__summary::before {
  transform: rotate(45deg);
}

.enrichment-more__summary:hover,
.enrichment-more__summary:focus-visible {
  color: var(--text-base);
}

.enrichment-more__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 10px;
}

.enrichment-empty-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.enrichment-synonym {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  height: auto;
  min-height: 48px;
  padding-block: 7px;
}

.enrichment-synonym__word {
  color: var(--text-base);
}

.enrichment-synonym__description {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.enrichment-synonym:hover .enrichment-synonym__word,
.enrichment-synonym:hover .enrichment-synonym__description {
  color: var(--accent);
}

.enrichment-sense--numbered + .enrichment-sense--numbered {
  padding-top: 20px;
  border-top: 1px solid var(--paper-line);
}

.enrichment-sense-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.enrichment-sense-heading[role="button"] {
  margin: -7px;
  padding: 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.enrichment-sense-heading[role="button"]:hover,
.enrichment-sense.is-selected .enrichment-sense-heading {
  background: var(--accent-soft);
}

.enrichment-sense-heading[role="button"]:focus-visible {
  outline: 2px solid var(--paper-leather);
  outline-offset: 2px;
}

.enrichment-sense.is-selected .enrichment-sense-number {
  border-color: var(--paper-leather);
  background: var(--paper-leather);
  color: var(--paper-canvas);
}

.enrichment-sense-number,
.dict-row-sense-number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--paper-line);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.enrichment-sense-words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px 10px;
  min-width: 0;
}

.enrichment-sense-headword {
  margin: 0;
  color: var(--text-base);
  font-size: 1.12rem;
  line-height: 1.35;
}

.enrichment-sense-transliteration,
.dict-row-sense-transliteration {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.enrichment-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.enrichment-title {
  margin: 0;
  color: var(--text-base);
  font-size: 1rem;
}

.enrichment-description {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.enrichment-source-synonyms {
  margin: -6px 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.enrichment-source-synonyms span {
  color: var(--paper-leather);
  font-weight: 700;
}

.sense-form-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sense-form-filter {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.sense-form-filter:hover,
.sense-form-filter.is-active {
  border-color: var(--paper-leather);
  background: rgba(var(--tint-rgb), 0.10);
  color: var(--text-base);
}

.sense-form-filter:focus-visible {
  outline: 2px solid var(--paper-leather);
  outline-offset: 2px;
}

.examples-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.example-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-inset);
}

.example-source,
.example-translation {
  margin: 0;
  line-height: 1.6;
}

.example-source {
  color: var(--text-strong);
}

.example-translation {
  color: var(--text-muted);
}

.example-highlight {
  padding: 0 4px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
}

.example-item--skeleton {
  gap: 10px;
}

.example-line {
  height: 12px;
  border-radius: 999px;
}

.example-line.short {
  width: 66%;
}

.preview-panel-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.memo-card-section {
  display: flex;
  justify-content: center;
}

.memo-flip-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.memo-card {
  display: block;
  width: min(100%, 340px);
  perspective: 1000px;
  cursor: pointer;
}

.memo-card-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 11 / 14;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.memo-flip-input:checked + .memo-card .memo-card-inner {
  transform: rotateY(180deg);
}

.memo-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--bg-panel-strong);
  box-shadow: var(--shadow-md);
  backface-visibility: hidden;
}

.memo-card-back {
  transform: rotateY(180deg);
}

.memo-card-image {
  position: relative;
  flex: 1;
  min-height: 0;
  background: linear-gradient(135deg, rgba(90, 114, 146, 0.28), rgba(13, 19, 31, 0.88));
  overflow: hidden;
}

.memo-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--image-overlay);
}

.memo-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memo-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 88px;
  padding: 18px 18px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  text-align: center;
}

.memo-card-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--text-strong);
}

.memo-card-back .memo-card-footer {
  justify-content: space-between;
  text-align: left;
}

.memo-word-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.memo-word-block--center {
  align-items: center;
  text-align: center;
}

.memo-card-back .memo-card-text {
  color: var(--accent-strong);
}

.memo-card-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.memo-card-translit {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.memo-flip-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(7, 12, 22, 0.34);
  color: #f7f1e7;
  backdrop-filter: blur(10px);
}

:root[data-theme='light'] .memo-flip-icon {
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(69, 94, 126, 0.14);
}

.images-panel {
  border: 1px dashed var(--border);
  border-radius: 20px;
  background: var(--bg-inset);
}

.images-panel .panel-body {
  padding: 16px;
}

.sidebar-section-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.sidebar-section-heading span {
  font-weight: 700;
  color: var(--text-base);
}

.sidebar-section-heading small {
  color: var(--text-soft);
  line-height: 1.5;
}

.image-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.image-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(101, 119, 147, 0.22), rgba(18, 28, 46, 0.82));
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.image-item:hover {
  transform: translateY(-1px);
}

.image-item.selected {
  border-color: #82c144;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-width: thick;
}

.image-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-item--skeleton {
  cursor: default;
}

.image-item--skeleton img {
  display: none;
}

.preview-panel-footer {
  gap: 16px;
}

.preview-panel-footer .btn-tooltip-wrap {
  width: 100%;
}

.card-action-copy p,
.games-note-copy,
.profile-footer-note {
  margin: 6px 0 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.btn-tooltip-wrap {
  position: relative;
}

.btn-tooltip-wrap[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--bg-panel-strong);
  border: 1px solid var(--border);
  color: var(--text-base);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  box-shadow: var(--shadow-sm);
}

.btn-tooltip-wrap[data-tooltip]:hover::after {
  opacity: 1;
}

.page-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.toolbar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel-soft);
  color: var(--text-base);
  font-weight: 600;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
}

.toolbar-chip--active {
  border-color: var(--border-strong);
  background: var(--accent-soft);
  color: var(--accent);
}

.toolbar-chip:disabled {
  opacity: 0.56;
  cursor: default;
}

.toolbar-note {
  color: var(--text-muted);
  line-height: 1.6;
}

.dictionary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}

.dict-card-wrap {
  position: relative;
}

.dict-card-wrap .memo-card {
  width: 100%;
}

.dict-card-wrap .memo-card-footer {
  min-height: 74px;
  padding: 14px 14px 12px;
}

.dict-card-wrap .memo-card-text {
  font-size: 1.18rem;
}

.dict-card-wrap .memo-card:hover {
  transform: translateY(-3px);
}

.dict-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: 20px;
  background: var(--bg-panel);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}

.library-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.library-toolbar {
  margin-bottom: 18px;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.library-grid--decks {
  grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
  justify-content: start;
}

.library-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
}

@supports (content-visibility: auto) {
  .library-card {
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 280px 360px;
  }
}

.library-card-media {
  aspect-ratio: 16 / 10;
  min-height: 160px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg-inset);
}

.library-card-media--travel {
  background-color: rgba(240, 181, 92, 0.18);
}

.library-card-media--kitchen {
  background-color: rgba(222, 121, 80, 0.18);
}

.library-card-media--desk {
  background-color: rgba(86, 124, 205, 0.18);
}

.library-card-media--sunrise {
  background-color: rgba(241, 163, 111, 0.18);
}

.library-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.library-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.library-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.library-card-count {
  color: var(--text-soft);
  font-size: 0.86rem;
}

.library-card-title {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.library-card-copy {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.library-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.library-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.library-target {
  margin-left: auto;
}

.library-card-media {
  position: relative;
}

.library-deck-pair {
  position: absolute;
  top: 10px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.55);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.library-deck-pair {
  left: 10px;
  letter-spacing: 0.08em;
}

.library-card-media--cover {
  overflow: hidden;
}

.library-deck-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Card art is portrait with the subject up top — bias the crop upward so faces
     and focal points survive instead of being sliced out of a wide landscape box. */
  object-position: center 12%;
  display: block;
}

/* Deck covers frame portrait art better in a squarer box than the 16/10 pack media. */
.library-deck-card .library-card-media {
  aspect-ratio: 4 / 3;
}

/* Decks section heading/note */
.library-section-head {
  margin: 2px 2px 16px;
}

.library-section-head--actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.library-section-title {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: var(--text-strong);
}

.library-section-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.anki-import-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease;
}

.anki-import-open svg {
  width: 18px;
  height: 18px;
}

.anki-import-open:hover {
  transform: translateY(-1px);
  background: rgba(239, 180, 94, 0.26);
}

.library-subsection-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 2px 12px;
}

.library-subsection-head h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.98rem;
}

.library-subsection-head span {
  color: var(--text-soft);
  font-size: 0.78rem;
}

.library-owned-decks[hidden] {
  display: none;
}

.library-deck-group + .library-deck-group {
  margin-top: 4px;
}

.library-owned-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 56px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--bg-inset) 72%, transparent);
}

.library-owned-empty strong {
  color: var(--text-strong);
  font-size: 0.82rem;
}

.library-owned-empty span {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.library-owned-deck-card--draft {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}

/* "Show in Drafts" after an Anki import lands here: a short pulse so the eye finds
   the deck the result screen just named (#493). */
.library-owned-deck-card--spotlight {
  animation: library-owned-deck-spotlight 1.8s ease-out 1;
}

@keyframes library-owned-deck-spotlight {
  0%, 35% { box-shadow: 0 0 0 3px var(--accent), 0 12px 28px color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.library-owned-deck-card__icon {
  position: absolute;
  right: 18px;
  bottom: 13px;
  width: 54px;
  height: 54px;
  color: color-mix(in srgb, currentColor 28%, transparent);
}

.library-owned-deck-state {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
  color: var(--success);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 9px rgba(35, 27, 18, 0.08);
}

.library-owned-deck-state--draft,
.library-owned-deck-state--partially_added {
  color: var(--accent-strong);
}

.library-owned-deck-visibility {
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 700;
}

.library-owned-progress {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.library-owned-progress > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.library-owned-progress strong {
  color: var(--text-strong);
  font-size: 0.75rem;
}

.library-owned-progress > div span,
.library-owned-deck-summary {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.library-owned-progress > div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-owned-progress__track {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-inset);
}

.library-owned-progress__track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.library-owned-deck-summary {
  margin: 12px 0 0;
}

.library-owned-deck-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 800;
}

/* Whole deck card is a preview trigger */
.library-deck-card {
  cursor: pointer;
}

.library-deck-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* + / checkmark add button, pinned to the cover */
.library-deck-add {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(8, 12, 20, 0.35);
  transition: transform 0.12s ease, background 0.12s ease;
}

.library-deck-add svg {
  width: 20px;
  height: 20px;
}

.library-deck-add.is-loading::after {
  content: '';
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: app-loading-spin 0.7s linear infinite;
}

.library-deck-import-status {
  margin: 10px 0 0;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.library-deck-add:hover {
  transform: scale(1.08);
}

.library-deck-add--done {
  background: rgba(8, 12, 20, 0.6);
  cursor: default;
}

.library-deck-add--done:hover {
  transform: none;
}

/* Deck peek modal */
.deck-peek-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--overlay-z) + 60);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 12, 20, 0.6);
  backdrop-filter: blur(4px);
}

.deck-peek-overlay.hidden {
  display: none;
}

.deck-peek {
  position: relative;
  width: min(560px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.deck-peek__close {
  position: absolute;
  top: 6px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.deck-peek__title {
  margin: 0 40px 4px 0;
  font-size: 1.3rem;
  color: var(--text-strong);
}

.deck-peek__desc {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.deck-peek__meta {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.deck-peek__cards {
  display: grid;
  /* A fixed pair of columns gave each card ~145px at 390px wide, and the target
     word is `nowrap` — so it was clipped mid-word on every phone. Auto-fill keeps
     the two columns wherever they fit and falls back to one where they do not. */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.deck-peek-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-base);
}

.deck-peek-card__img {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center 12%;
  flex-shrink: 0;
}

.deck-peek-card__img--empty {
  background: var(--bg-inset);
}

.deck-peek-card__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.deck-peek-card__source {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.deck-peek-card__target {
  font-weight: 700;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-peek-card__translit {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* The picture's place while it loads; the card around it is the real one (#456). */
.deck-peek-card__skeleton-img {
  display: block;
  background: linear-gradient(90deg, var(--bg-inset) 25%, var(--bg-muted) 50%, var(--bg-inset) 75%);
  background-size: 200% 100%;
  animation: library-skeleton-shimmer 1.1s ease-in-out infinite;
}

.deck-peek__more {
  margin: 12px 0 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.deck-peek__footer {
  margin-top: 16px;
}

.deck-peek__import {
  width: 100%;
}

.deck-peek__import.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.deck-peek__import.is-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: app-loading-spin 0.7s linear infinite;
}

.library-card-meta--solo {
  justify-content: flex-end;
}

.packs-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(8, 12, 20, 0.5);
  backdrop-filter: blur(3px);
}

.packs-overlay.hidden {
  display: none;
}

.packs-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(520px, 100%);
  max-height: min(82vh, 720px);
  padding: 22px 20px 24px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

@media (min-width: 720px) {
  .packs-overlay {
    align-items: center;
  }

  .packs-sheet {
    border-bottom: 1px solid var(--border);
    border-radius: 20px;
  }
}

.packs-sheet__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.packs-sheet__close:hover {
  background: var(--bg-inset);
  color: var(--text-strong);
}

.packs-sheet__head h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  color: var(--text-strong);
}

.packs-sheet__lead {
  margin: 0;
  padding-right: 32px;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.packs-sheet__target {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 600;
}

.packs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.pack-empty {
  margin: 0;
  padding: 24px 0;
  color: var(--text-muted);
  text-align: center;
}

.pack-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-inset);
  transition: border-color 160ms ease;
}

.pack-row--subscribed {
  border-color: var(--accent);
}

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

.pack-row__naming {
  min-width: 0;
}

.pack-row__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
  color: var(--text-strong);
}

.pack-row__meta {
  display: block;
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.pack-row__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.pack-row__toggle:hover {
  color: var(--text-strong);
}

.pack-row__toggle-check {
  width: 13px;
  height: 13px;
  opacity: 0;
  transition: opacity 160ms ease;
}

.pack-row__toggle[aria-pressed="true"] {
  border-color: transparent;
  background: var(--bg-accent);
  color: #ffffff;
}

.pack-row__toggle[aria-pressed="true"] .pack-row__toggle-check {
  opacity: 1;
}

.pack-row--pending .pack-row__toggle {
  pointer-events: none;
  animation: pack-row-pending-pulse 1.4s ease-in-out infinite;
}

@keyframes pack-row-pending-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

.pack-row__track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(8, 12, 20, 0.08);
}

.pack-row__fill {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 240ms ease;
}

.pack-row__fill--saved {
  width: var(--pack-tier-saved, 0%);
  background: var(--text-soft);
  opacity: 0.55;
  z-index: 1;
}

.pack-row__fill--xp {
  width: var(--pack-tier-xp, 0%);
  background: var(--bg-accent);
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

.pack-row__stats {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.pack-row__advance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--bg-accent);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.pack-row__advance svg {
  width: 15px;
  height: 15px;
}

.pack-row__advance--disabled,
.pack-row__advance[aria-disabled="true"] {
  background: var(--bg-muted);
  color: var(--text-soft);
  cursor: not-allowed;
}

.pack-row--skeleton {
  pointer-events: none;
}

.pack-row__skeleton-line {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--bg-muted);
  animation: library-skeleton-shimmer 1.4s ease-in-out infinite;
}

.pack-row__skeleton-line--title {
  width: 45%;
  height: 14px;
}

/* Skeleton placeholders while fetching */

.library-deck-card--skeleton {
  pointer-events: none;
}

.library-skeleton-media {
  position: relative;
  overflow: hidden;
  filter: saturate(0.6);
}

.library-skeleton-media::after,
.library-skeleton-line::after,
.library-skeleton-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: library-skeleton-shimmer 1.4s ease-in-out infinite;
}

.library-skeleton-line,
.library-skeleton-pill {
  position: relative;
  display: block;
  border-radius: 6px;
  background: var(--bg-muted);
  overflow: hidden;
}

.library-skeleton-line {
  height: 12px;
  width: 80%;
}

.library-skeleton-line--title {
  height: 18px;
  width: 60%;
  margin-top: 4px;
}

.library-skeleton-line--short {
  width: 45%;
}

.library-skeleton-line--mid {
  width: 70%;
}

.library-skeleton-pill {
  width: 96px;
  height: 28px;
  border-radius: 999px;
  background: var(--bg-muted);
}

@keyframes library-skeleton-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .pack-row--pending .pack-row__toggle,
  .pack-row__skeleton-line,
  .library-skeleton-media::after,
  .library-skeleton-line::after,
  .library-skeleton-pill::after {
    animation: none;
  }
}

.library-deck-card .library-card-body {
  gap: 12px;
}

.library-deck-version {
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.library-deck-guidance {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.5;
}

.library-deck-import {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
  color: var(--text-strong);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.library-deck-import svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.library-deck-import:hover:not(:disabled) {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.library-deck-import:disabled {
  cursor: default;
  opacity: 0.7;
}

.library-deck-card--imported .library-deck-import svg {
  color: var(--success);
}

/* Touch sizing for the control a finger reaches for in the pack sheet. */
@media (max-width: 759px) {
  .pack-row__toggle {
    height: 36px;
  }
}

.games-note {
  display: flex;
  align-items: center;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 20px;
}

.game-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.6rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.game-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.game-card-title {
  margin: 0;
  font-size: 1.1rem;
}

.game-card-override-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #f59e0b;
  color: #1a1a1a;
  border-radius: 4px;
  vertical-align: middle;
}

.game-card-desc {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.game-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.game-card-btn {
  width: auto;
  min-width: 110px;
}

.game-card-caption {
  color: var(--text-soft);
  font-size: 0.84rem;
}

.game-card-disabled {
  opacity: 0.7;
}

.game-card-tooltip {
  color: var(--danger);
  font-size: 0.82rem;
  line-height: 1.5;
}

.game-empty-state {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: 20px;
  background: var(--bg-panel);
  color: var(--text-muted);
  line-height: 1.6;
}

/* Profile page — a single centered settings column: identity header panel,
   then the getting-started quest (while active), then preference sections.
   One typeface (--font-body) throughout; the accent color speaks only in the
   avatar and the primary auth action. */
.profile-layout {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.profile-layout .panel-body {
  padding: 18px 20px;
}

.profile-identity {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--bg-accent);
  color: #fffaf2;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(212, 138, 43, 0.2);
}

.profile-identity-main {
  flex: 1;
  min-width: 220px;
}

.profile-summary-name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

.profile-state-badge {
  padding: 2px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-summary-email {
  margin: 3px 0 0;
  color: var(--text-base);
  font-size: 0.88rem;
  word-break: break-word;
}

.profile-summary-meta {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.profile-summary-member {
  margin: 2px 0 0;
  color: var(--text-soft);
  font-size: 0.78rem;
}

.profile-identity-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin-left: auto;
}

.profile-stats {
  display: flex;
  gap: 22px;
  margin: 0;
}

.profile-stats[hidden] {
  display: none;
}

.profile-stat {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.profile-stat__value {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text-strong);
}

.profile-stat__label {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.profile-auth-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  border: 1px solid rgba(255, 242, 219, 0.14);
  border-radius: 999px;
  background: var(--bg-accent);
  color: #fff9f0;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(212, 138, 43, 0.18);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.profile-auth-btn:hover {
  filter: saturate(1.05) brightness(1.02);
  transform: translateY(-1px);
}

.profile-auth-actions .google-auth-btn {
  width: auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.profile-footer-note[hidden] {
  display: none;
}

@media (max-width: 759px) {
  /* Stats and auth actions each get their own full-width row — sharing one
     row squeezed the Google button into a three-line wrap. */
  .profile-identity-aside {
    width: 100%;
    margin-left: 0;
    align-items: stretch;
  }

  .profile-stats {
    justify-content: flex-start;
    gap: 28px;
  }

  .profile-auth-actions {
    justify-content: stretch;
  }

  .profile-auth-actions > * {
    flex: 1 1 0;
  }

  /* Both sign-in buttons sit at 36px, and on a phone they are the only way into
     an account. Full height here rather than a hidden tap area: they already own
     a full-width row of their own, so nothing is displaced (#360). */
  .profile-auth-actions .profile-auth-btn,
  .profile-auth-actions .google-auth-btn {
    min-height: 44px;
  }
}

.profile-stats-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.profile-stat-tile {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
}

.profile-stat-tile strong {
  font-size: 1.05rem;
}

.profile-stat-tile small {
  color: var(--text-muted);
  line-height: 1.5;
}

.theme-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.theme-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-inset);
  color: var(--text-base);
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.theme-option[aria-pressed='true'] {
  border-color: var(--border-strong);
  background: var(--accent-soft);
  color: var(--text-strong);
}

.theme-option-label {
  font-weight: 700;
}

.profile-menu-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  color: var(--text-base);
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease;
}

.profile-menu-item small {
  color: var(--text-soft);
}

.profile-menu-item:disabled {
  cursor: default;
  opacity: 0.78;
}

.keyboard {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--dock-height) + 18px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel-strong);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--overlay-z) + 2);
}

.keyboard-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.key {
  flex: 1 1 0;
  min-width: 0;
  height: 42px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-inset);
  color: var(--text-strong);
  font-size: 1rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.key:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--bg-muted);
}

.key.wide {
  flex: 3 1 0;
}

.shift-key.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--border-strong);
}

.auth-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 9, 16, 0.58);
  /* Authentication is the recovery path from both first-run overlays. Keep it
     above the welcome picker and the onboarding seam so that fallback is usable. */
  z-index: 2300;
}

:root[data-theme='light'] .auth-modal-overlay {
  background: rgba(50, 65, 82, 0.2);
}

.auth-modal {
  width: min(100%, 420px);
  /* The card is ~540px tall and the keyboard leaves about 500px. Without these it
     centred itself past both edges of the viewport with no way to reach either
     end — same guard `.save-modal` and `.deck-peek` already carry. */
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg-panel-strong);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-soft);
  cursor: pointer;
}

/* 36px box, 44px tap area (#360). */
.auth-modal-close::after {
  content: '';
  position: absolute;
  inset: -4px;
}

.auth-modal-close:hover {
  border-color: var(--border);
  background: var(--bg-muted);
  color: var(--text-strong);
}

.auth-modal-title {
  margin: 0;
  font-size: 1.7rem;
  font-family: var(--font-display);
}

.auth-modal-note {
  margin: -6px 0 2px;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-inset);
  color: var(--text-strong);
}

.auth-input::placeholder {
  color: var(--text-soft);
}

.auth-error,
.auth-confirm {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  line-height: 1.6;
}

.auth-error {
  background: rgba(196, 88, 79, 0.12);
  color: var(--danger);
}

.auth-confirm {
  background: rgba(85, 168, 119, 0.12);
  color: var(--success);
}

.auth-confirm p {
  margin: 0 0 4px;
}

.auth-confirm p:last-child {
  margin-bottom: 0;
}

.auth-toggle-btn {
  align-self: flex-start;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-secondary-action {
  align-self: flex-start;
  /* A bare underlined line of text is only as tall as its line box — 19px, the
     smallest target in the app. The box gives it a 44px one without moving the
     label, which stays where the text sits (#360). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}

.auth-secondary-action:hover,
.auth-toggle-btn:hover {
  color: var(--accent-strong);
}

.auth-secondary-action:disabled {
  cursor: wait;
  opacity: 0.6;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 8px;
  color: var(--text-muted);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--paper-line, rgba(123, 87, 48, 0.18));
}

.google-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--paper-line, rgba(123, 87, 48, 0.22));
  border-radius: 10px;
  background: #ffffff;
  color: #3c4043;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.google-auth-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 2px 6px rgba(60, 64, 67, 0.16);
}

.google-auth-btn:active {
  transform: translateY(1px);
}

.google-auth-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.google-auth-btn .google-icon {
  flex: 0 0 auto;
}

.game-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  z-index: 2000;
  /* A gesture that runs out of room inside the game must stop here rather than
     scroll whatever is behind it (#377). The body lock covers the host page; this
     covers the overlay's own chain. */
  overscroll-behavior: contain;
}

.game-overlay.hidden {
  display: none;
}

/* No in-game chrome: the game fills the overlay. Exit is browser/gesture Back. */
.game-frame {
  flex: 1;
  width: 100%;
  border: 0;
  transition: opacity 160ms ease;
}

/* While the game's own page is still on its way, a spinner stands where the game will
   be, instead of a blank frame (#623). */
.game-frame--loading {
  opacity: 0;
}

.game-overlay--loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: app-loading-spin 0.8s linear infinite;
}

/* A single host-owned exit from a bounded onboarding practice run. The game
   pauses on its milestone before this appears, so no hidden gameplay continues.

   This one keeps its shape rather than filling the screen the way the picker and
   the seam do (#323): the ground under it is the paused game showing through a
   translucent scrim, not the overlay's own empty ground, so a sheet standing off
   the bottom edge is what it is supposed to look like. What it did need from that
   issue is the tall case — see the scroller below. */
.practice-summary {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: end center;
  /* #317 made Continue sticky, but nothing here scrolled, so a sticky box had no
     scrollport to stick to and the declaration was inert. On a short viewport (a
     landscape phone: 740x360) the card ran 24px past the bottom edge and the only
     way out of the summary was clipped off with no way to reach it. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  background: linear-gradient(180deg, rgba(23, 18, 35, 0.12), rgba(23, 18, 35, 0.72));
}

.practice-summary[hidden] {
  display: none;
}

.practice-summary__card {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-secondary);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  text-align: center;
}

.practice-summary__mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--success);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
}

.practice-summary__kicker,
.practice-summary__card h2,
.practice-summary__card p {
  margin: 0;
}

.practice-summary__kicker {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.practice-summary__card > p {
  max-width: 38ch;
  color: var(--text-muted);
  line-height: 1.5;
}

.practice-summary__list {
  width: 100%;
  max-height: min(330px, 40dvh);
  display: grid;
  gap: 9px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.practice-summary__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-panel-soft);
  text-align: left;
}

.practice-summary__media {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  background: var(--bg-secondary);
}

.practice-summary__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.practice-summary__media--fallback {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 850;
}

.practice-summary__item-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
}

.practice-summary__words {
  overflow: hidden;
  color: var(--text-strong);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-summary__progress-copy {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 750;
}

.practice-summary__track {
  position: relative;
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-secondary);
}

.practice-summary__track i,
.practice-summary__track b {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: inherit;
}

.practice-summary__track i {
  width: var(--practice-before);
  background: var(--accent);
  opacity: 0.55;
}

.practice-summary__track b {
  left: var(--practice-before);
  width: max(0%, calc(var(--practice-after) - var(--practice-before)));
  background: var(--success);
}

.practice-summary__gain {
  max-width: 105px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
}

.practice-summary__gain--positive {
  color: var(--success);
}

.practice-summary__gain--retry {
  color: var(--accent);
}

.practice-summary__loading {
  min-height: 92px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  color: var(--text-muted);
}

.practice-summary__loading span {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: practice-summary-spin 750ms linear infinite;
}

.practice-summary__loading p {
  margin: 0;
  font-size: 0.84rem;
}

@keyframes practice-summary-spin {
  to { transform: rotate(360deg); }
}

/* The post-game actions (#181): what to do next, not just a way out. The row
   pins as one block so "Back to games" keeps the sticky behaviour it had alone. */
.practice-summary__actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-top: 6px;
}

.practice-summary__secondary {
  width: min(320px, 100%);
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 15px;
  background: var(--bg-panel-soft);
  color: var(--text-strong);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.practice-summary__secondary:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.practice-summary__secondary[hidden] {
  display: none;
}

#practiceSummaryContinue {
  width: min(320px, 100%);
  min-height: 50px;
  border: 1px solid var(--action-line);
  border-radius: 15px;
  background: var(--action);
  box-shadow: 0 4px 0 var(--action-shadow);
  color: #fff;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

#practiceSummaryContinue:hover {
  transform: translateY(-1px);
}

@media (max-width: 759px) {
  .practice-summary {
    padding: 12px;
  }

  .practice-summary__card {
    padding: 20px 16px;
  }

  .practice-summary__item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .practice-summary__gain {
    grid-column: 2;
    max-width: none;
    text-align: left;
  }
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-name-edit {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.profile-name-edit:hover {
  color: var(--accent);
  border-color: var(--border);
}

.profile-name-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0;
}

/* `display: flex` would otherwise override the `hidden` attribute and leave
   the editor permanently open (the quest panel had the same bug). */
.profile-name-form[hidden] {
  display: none;
}

.profile-name-form .auth-input {
  min-width: 12rem;
}

.profile-name-error {
  color: var(--danger, #c0392b);
  font-size: 0.85em;
  flex-basis: 100%;
}

.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: calc(var(--overlay-z) + 20);
  pointer-events: none;
}

.toast {
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-panel-strong);
  color: var(--text-base);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateX(calc(100% + 16px));
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: auto;
}

.toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.toast--error {
  border-color: rgba(196, 88, 79, 0.32);
  color: var(--danger);
}

.toast--info {
  border-color: var(--border-strong);
  color: var(--accent);
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes shimmer {
  0% {
    background-position: -220px 0;
  }
  100% {
    background-position: 220px 0;
  }
}

@media (min-width: 760px) {
  .page-header--between {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .translation-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .main-container {
    display: grid;
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
    gap: 24px;
    padding: 28px;
  }

  .nav-panel {
    position: sticky;
    top: 28px;
    align-self: start;
    left: auto;
    right: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: calc(100dvh - 56px);
    padding: 22px 14px;
  }

  .nav-brand {
    display: flex;
    align-items: flex-start;
    padding: 0 8px;
  }

  .nav-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .nav-panel a {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    padding: 12px 10px;
  }

  .nav-panel a.active::after {
    top: 12px;
    bottom: 12px;
    left: 6px;
    right: auto;
    width: 3px;
    height: auto;
  }

  .nav-copy {
    align-items: flex-start;
  }

  .nav-label {
    font-size: 0.76rem;
  }

  .nav-user-section {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--bg-inset);
  }

  .keyboard {
    left: calc(var(--nav-width) + 52px);
    right: 28px;
    bottom: 28px;
  }
}

@media (min-width: 1180px) {
  .layout-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 332px;
    gap: 22px;
  }

  /* The word page stops being one long column once there is room for two (#458). Examples get
     the wider half - they are full sentences - and the grammar chips and synonyms stack in the
     narrower one. Applied only to a meaning that has both, so neither column can come out
     empty; the class is set in `createEnrichmentSense`. */
  #translatorPage .enrichment-more__body--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    column-gap: 28px;
    align-items: start;
  }

  .card-sidebar {
    position: sticky;
    top: 28px;
    align-self: start;
  }

}

@media (max-width: 479px) {
  .main-container {
    padding-inline: 12px;
  }

  .nav-panel {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 8px;
  }

  .nav-panel a {
    min-height: 66px;
    padding-inline: 2px;
  }

  .nav-label {
    font-size: 0.62rem;
  }

  .search-box-footer {
    flex-wrap: wrap;
  }

  .search-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 14% 10%, rgba(216, 198, 158, 0.36), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(var(--tint-rgb), 0.14), transparent 24rem),
    linear-gradient(180deg, var(--bg-base), var(--bg-secondary));
}

.app-backdrop__grid {
  background-image:
    linear-gradient(rgba(123, 87, 48, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 87, 48, 0.10) 1px, transparent 1px);
  opacity: 0.16;
}

.app-backdrop__glow--right {
  background: radial-gradient(circle, rgba(77, 107, 61, 0.18) 0%, transparent 66%);
}

.logo,
.shell-title,
.page-title,
.dictionary-title,
.games-title,
.panel-title,
.search-input,
.translated-word,
.memo-card-text {
  font-family: var(--font-display);
}

.logo {
  font-family: var(--font-brand);
  max-width: 76px;
  overflow: hidden;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-align: center;
  text-transform: none;
}

.nav-panel {
  border-color: rgba(216, 198, 158, 0.18);
  background: linear-gradient(180deg, #1f2d35 0%, #142126 100%);
  color: #f0e2bf;
}

.nav-panel a {
  color: rgba(240, 226, 191, 0.72);
}

.nav-panel a:hover,
.nav-panel a.active {
  color: #f7f2e8;
  background: rgba(216, 198, 158, 0.10);
  border-color: rgba(216, 198, 158, 0.18);
}

.nav-panel a.active::after {
  background: #d8c69e;
}

.nav-icon {
  background: rgba(216, 198, 158, 0.10);
  color: #d8c69e;
}

.nav-label {
  letter-spacing: 0;
  text-transform: none;
}

#translatorPage {
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - 56px);
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid rgba(123, 87, 48, 0.18);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 7%, rgba(255, 255, 255, 0.86), transparent 26rem),
    radial-gradient(circle at 15% 12%, rgba(216, 198, 158, 0.28), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(243, 239, 228, 0.72)),
    var(--paper-canvas);
  box-shadow: var(--shadow-lg);
}

:root[data-theme='dark'] #translatorPage {
  background:
    radial-gradient(circle at 78% 7%, rgba(216, 198, 158, 0.12), transparent 26rem),
    radial-gradient(circle at 15% 12%, rgba(var(--tint-rgb), 0.14), transparent 28rem),
    linear-gradient(180deg, rgba(38, 51, 58, 0.72), rgba(20, 33, 38, 0.94)),
    var(--paper-canvas);
}

#translatorPage::before,
#translatorPage::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

#translatorPage::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 280px;
  background:
    linear-gradient(135deg, transparent 0 12%, rgba(38, 51, 58, 0.20) 12% 28%, transparent 28%),
    linear-gradient(125deg, transparent 0 36%, rgba(77, 107, 61, 0.18) 36% 51%, transparent 51%),
    linear-gradient(225deg, transparent 0 18%, rgba(38, 51, 58, 0.18) 18% 34%, transparent 34%),
    linear-gradient(180deg, transparent, rgba(38, 51, 58, 0.22));
}

#translatorPage::after {
  inset: 0;
  background-image: radial-gradient(rgba(123, 87, 48, 0.10) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.24;
}

#translatorPage > * {
  position: relative;
  z-index: 1;
}

.translator-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

.translator-title-block {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.translator-title-rule {
  width: clamp(32px, 8vw, 92px);
  height: 1px;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent, var(--paper-line-strong), transparent);
}

.translator-kicker,
.translator-page-copy,
.translator-status-card span,
.translator-panel-heading small,
.preview-panel-heading small {
  margin: 0;
  color: var(--text-muted);
}

.translator-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--paper-leather);
}

.translator-page-title {
  margin: 0;
  font-family: var(--font-brand);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--text-strong);
  text-transform: uppercase;
}

.translator-page-copy {
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
}

.translator-status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 288px);
  padding: 12px 14px;
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  background: rgba(255, 252, 243, 0.62);
  box-shadow: var(--shadow-sm);
}

.translator-status-card strong,
.translator-status-card span {
  display: block;
}

.translator-status-card strong {
  font-size: 0.86rem;
  color: var(--text-strong);
}

.translator-status-card span:not(.translator-status-dot) {
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.45;
}

.translator-status-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--paper-pine);
  box-shadow: 0 0 0 5px rgba(77, 107, 61, 0.14);
}

.layout-container--translator {
  align-items: stretch;
  width: 100%;
  gap: 18px;
}

.layout-container--translator .main-content {
  width: 100%;
}

.lang-toggle-bar {
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background: rgba(255, 252, 243, 0.62);
  box-shadow: var(--shadow-sm);
}

.lang-dropdown-wrap {
  flex: 1 1 180px;
}

.lang-toggle-btn {
  min-height: 48px;
  border-radius: 7px;
  background: var(--paper-panel-strong);
  box-shadow: none;
}

.lang-toggle-caption {
  color: var(--paper-leather);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.lang-swap-btn {
  width: 48px;
  height: 48px;
  border-radius: 7px;
  background: var(--paper-slate);
  color: #f7f2e8;
  box-shadow: none;
}

.language-menu {
  border-color: var(--paper-line);
  border-radius: 10px;
  background: var(--paper-panel-strong);
}

#translatorPage .panel {
  border-color: var(--paper-line);
  border-radius: 10px;
  background: rgba(255, 252, 243, 0.64);
  box-shadow: var(--shadow-sm);
}

#translatorPage .panel::before {
  left: 22px;
  right: 22px;
  background: linear-gradient(90deg, transparent, var(--paper-line-strong), transparent);
}

.translator-panel-heading,
.preview-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px 0;
}

.translator-panel-heading span,
.preview-panel-heading span {
  color: var(--paper-leather);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.translator-panel-heading small,
.preview-panel-heading small {
  font-size: 0.72rem;
  line-height: 1.45;
}

.search-box,
.translation-box {
  min-height: 254px;
  border-color: var(--paper-line-strong);
  border-radius: 8px;
  background: rgba(255, 252, 243, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.search-box:focus-within {
  border-color: rgba(123, 87, 48, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 0 0 3px rgba(123, 87, 48, 0.08);
}

.panel-word-group {
  padding: 18px 22px 18px;
  min-height: 0;
  overflow: visible;
}

.translation-box .panel-word-group {
  padding-block: 18px 18px;
}

.search-input,
.translated-word {
  font-family: var(--font-body);
  font-size: clamp(2.8rem, 4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.4;
  padding-block: 0.18em;
  display: block;
}

.search-input:focus-visible {
  box-shadow: none;
}

.translated-word:empty::before {
  content: "";
  color: var(--text-soft);
  font-weight: 500;
}

.translit-display {
  color: var(--paper-leather);
}

.search-box-footer,
.translation-box-footer {
  border-top-color: var(--paper-line);
}

.tool-button,
.tts-btn {
  background: rgba(255, 252, 243, 0.72);
  border-color: var(--paper-line);
  color: var(--paper-slate);
}

.search-button,
.primary-button {
  border-radius: 7px;
  background: linear-gradient(180deg, #8a6b3e, #6e4f2d);
  box-shadow: 0 12px 24px rgba(123, 87, 48, 0.16);
}

.search-button:hover,
.primary-button:hover {
  background: linear-gradient(180deg, #957649, #775735);
}

.primary-button:disabled,
.search-button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  background: linear-gradient(180deg, #b9ad97, #9c907c);
  color: rgba(23, 19, 15, 0.58);
  box-shadow: none;
  filter: saturate(0.7);
  transform: none;
}

.suggestions-panel,
.enrichment-panel {
  background: rgba(255, 252, 243, 0.66) !important;
}

.section-title--small,
.enrichment-title {
  color: var(--paper-leather);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chip {
  min-height: 32px;
  background: rgba(38, 51, 58, 0.08);
  color: var(--text-base);
}

#translatorPage .enrichment-chips {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

#translatorPage .enrichment-chips .chip {
  width: 100%;
  justify-content: flex-start;
  border-radius: 8px;
}

#translatorPage .enrichment-grammar {
  flex-direction: row;
  flex-wrap: wrap;
}

#translatorPage .enrichment-grammar .chip {
  width: auto;
}

.chip--action:hover {
  background: rgba(var(--tint-rgb), 0.12);
  color: var(--tint-text);
}

.example-item {
  border-color: var(--paper-line);
  border-radius: 8px;
  background: rgba(255, 252, 243, 0.70);
}

.example-highlight {
  background: rgba(var(--tint-rgb), 0.12);
  /* --tint-solid, not --tint-text: .example-item is a sand plate at both themes,
     so this text never sits on the dark page (#301). */
  color: var(--tint-solid);
}

.card-sidebar {
  width: 100%;
  position: static;
}

.preview-panel-heading {
  padding-bottom: 0;
}

.preview-panel-heading > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.preview-panel-body {
  gap: 14px;
}

.preview-action-row {
  display: flex;
  justify-content: flex-end;
}

#translatorPage #makeCardBtn {
  width: auto;
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.82rem;
}

#translatorPage .memo-card-section {
  display: none;
}

.image-suggestion-placeholder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px dashed var(--paper-line);
  border-radius: 10px;
  background: rgba(255, 252, 243, 0.52);
}

.image-suggestion-placeholder p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.placeholder-art {
  min-height: 160px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(20, 33, 38, 0.92) 0%, rgba(77, 107, 61, 0.68) 42%, rgba(216, 198, 158, 0.62) 43%, rgba(var(--tint-rgb), 0.18) 100%),
    var(--paper-panel);
}

.preview-panel-body:has(.images-panel:not(.hidden)) .image-suggestion-placeholder {
  display: none;
}

.memo-card {
  width: min(100%, 360px);
}

.memo-card-face {
  border-color: var(--paper-line);
  border-radius: 14px;
  background: rgba(255, 252, 243, 0.86);
  box-shadow: var(--shadow-md);
}

.memo-card-image {
  min-height: 190px;
  background:
    linear-gradient(135deg, rgba(20, 33, 38, 0.94), rgba(216, 198, 158, 0.64) 48%, rgba(77, 107, 61, 0.76));
}

.memo-card-footer {
  min-height: 74px;
  border-top-color: var(--paper-line);
  background: rgba(255, 252, 243, 0.88);
}

.memo-card-text {
  font-family: var(--font-body);
  font-size: 1.45rem;
  font-weight: 700;
}

.memo-card-back .memo-card-text {
  color: var(--paper-leather);
}

.memo-flip-icon {
  border-color: rgba(216, 198, 158, 0.32);
  background: rgba(38, 51, 58, 0.46);
}

.images-panel {
  border-style: solid;
  border-color: var(--paper-line);
  border-radius: 10px;
  background: rgba(255, 252, 243, 0.56);
}

.images-panel .panel-body {
  padding: 14px;
}

.image-list {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 12px;
}

.image-item {
  min-height: 118px;
  border-width: 1px;
  border-color: rgba(123, 87, 48, 0.12);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 33, 38, 0.78), rgba(216, 198, 158, 0.58));
}

.image-item.selected {
  border-color: #82c144;
  box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.12);
  border-width: thick;
}

@media (min-width: 760px) {
  .translation-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .main-container {
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
    gap: 20px;
    padding: 22px;
  }

  .nav-panel {
    align-items: center;
    gap: 22px;
    border-radius: 2px;
    padding: 24px 10px;
  }

  .nav-brand {
    justify-content: center;
    padding: 0;
    text-align: center;
  }

  .nav-list {
    width: 100%;
    align-items: center;
  }

  .nav-panel a {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    width: 76px;
    padding: 10px 4px;
    text-align: center;
  }

  .nav-panel a.active::after {
    left: 18px;
    right: 18px;
    top: auto;
    bottom: 4px;
    width: auto;
    height: 2px;
  }

  .nav-copy {
    align-items: center;
  }

  .nav-icon {
    width: 34px;
    height: 34px;
  }
}

@media (min-width: 1180px) {
  .layout-container--translator {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .layout-container--translator .card-sidebar {
    position: static;
  }

  #translatorPage .image-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 759px) {
  #translatorPage {
    padding: 16px;
    border-radius: 20px;
  }

  .translator-page-header {
    flex-direction: column;
  }

  .translator-title-block {
    width: 100%;
    justify-content: center;
  }

  .translator-title-rule {
    width: 28px;
  }

  .translator-status-card {
    width: 100%;
  }

  .lang-toggle-bar {
    align-items: stretch;
  }

  .lang-swap-btn {
    width: 100%;
  }

  .translator-panel-heading {
    flex-direction: column;
    gap: 3px;
  }

  .search-box,
  .translation-box {
    min-height: 210px;
  }
}

/* Paper dictionary UI ----------------------------------------------------- */
#dictionaryPage {
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - 56px);
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(123, 87, 48, 0.18);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.84), transparent 24rem),
    radial-gradient(circle at 84% 12%, rgba(216, 198, 158, 0.22), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(243, 239, 228, 0.8)),
    var(--paper-canvas);
  box-shadow: var(--shadow-lg);
}

:root[data-theme='dark'] #dictionaryPage {
  background:
    radial-gradient(circle at 16% 8%, rgba(216, 198, 158, 0.10), transparent 24rem),
    radial-gradient(circle at 84% 12%, rgba(var(--tint-rgb), 0.14), transparent 24rem),
    linear-gradient(180deg, rgba(38, 51, 58, 0.8), rgba(20, 33, 38, 0.96)),
    var(--paper-canvas);
}

#dictionaryPage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(123, 87, 48, 0.08) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.18;
}

#dictionaryPage > * {
  position: relative;
  z-index: 1;
}

#dictionaryPage .panel {
  border-color: var(--paper-line);
  border-radius: 10px;
  background: rgba(255, 252, 243, 0.66);
  box-shadow: var(--shadow-sm);
}

#dictionaryPage .panel::before {
  left: 22px;
  right: 22px;
  background: linear-gradient(90deg, transparent, var(--paper-line-strong), transparent);
}

.dictionary-page-header {
  display: flex;
  justify-content: center;
}

.dictionary-title-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dictionary-title-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--text-base);
}

.dictionary-title {
  font-family: var(--font-brand);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dictionary-title-rule {
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--paper-line-strong), transparent);
}

.dictionary-layout {
  gap: 18px;
  margin-top: 0px;
}

.dictionary-main-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.dictionary-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.dictionary-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  flex: 1 1 auto;
  padding: 0 14px;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: rgba(255, 252, 243, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.dictionary-search-field:focus-within {
  border-color: rgba(123, 87, 48, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 0 0 3px rgba(123, 87, 48, 0.08);
}

.dictionary-search-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--text-muted);
}

.dictionary-search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-base);
  font-size: 0.98rem;
}

.dictionary-search-field input::placeholder {
  color: var(--text-soft);
}

.dictionary-search-field input:focus-visible {
  box-shadow: none;
}

.dictionary-view-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background: rgba(255, 252, 243, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.dictionary-view-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dictionary-view-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.dictionary-view-button.is-active {
  background: rgba(38, 51, 58, 0.12);
  color: var(--text-base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.dictionary-view-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(123, 87, 48, 0.08);
}

.dictionary-filter-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: rgba(255, 252, 243, 0.78);
  color: var(--text-base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.dictionary-filter-toggle svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.dictionary-filter-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--paper-slate);
  color: #f7f2e8;
  font-size: 0.72rem;
  font-weight: 700;
}

.dictionary-control-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.dictionary-sort-direction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  background: rgba(255, 252, 243, 0.78);
  color: var(--text-base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease;
}

.dictionary-sort-direction:hover {
  background: rgba(38, 51, 58, 0.06);
}

.dictionary-sort-direction svg {
  width: 18px;
  height: 18px;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dictionary-sort-direction[data-direction='asc'] svg {
  transform: scaleY(-1);
}

.dictionary-sort-field-shell {
  flex: 0 0 auto;
  width: 200px;
}

.dictionary-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  background: var(--paper-panel);
  color: var(--text-base);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease;
}

.dictionary-export:hover {
  background: rgba(var(--tint-rgb), 0.08);
}

.dictionary-export:disabled {
  cursor: progress;
  opacity: 0.6;
}

.dictionary-export svg {
  width: 18px;
  height: 18px;
}

.dictionary-export-wrap {
  position: relative;
  flex: 0 0 auto;
}

/* Fixed, placed under the button by script: the panel clips with `overflow: hidden`, and an
   empty collection is shorter than the menu. */
.dictionary-export-menu {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 230px;
  padding: 6px;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background: var(--bg-base);
  box-shadow: var(--shadow-md);
}

.dictionary-export-menu[hidden] {
  display: none;
}

.dictionary-export-menu button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-base);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dictionary-export-menu button:hover,
.dictionary-export-menu button:focus-visible {
  background: rgba(var(--tint-rgb), 0.1);
}

.dictionary-export-menu strong {
  font-size: 0.88rem;
}

.dictionary-export-menu span {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.dictionary-progress-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.dictionary-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: rgba(255, 252, 243, 0.78);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.dictionary-chip:hover {
  background: rgba(38, 51, 58, 0.06);
  color: var(--text-base);
}

.dictionary-chip.is-active {
  background: var(--paper-slate, #2c3a44);
  color: #f7f2e8;
  border-color: var(--paper-slate, #2c3a44);
}

.dictionary-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(123, 87, 48, 0.18);
}

.dictionary-select-shell {
  min-width: 0;
}

.dictionary-select-shell select {
  width: 100%;
  min-height: 42px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  appearance: none;
  background:
    rgba(255, 252, 243, 0.78)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237B5730' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 12px center / 12px;
  color: var(--text-base);
}

.dictionary-select-shell select:focus-visible {
  box-shadow: 0 0 0 3px rgba(123, 87, 48, 0.08);
}

.dictionary-summary {
  margin: 0;
  color: var(--paper-leather);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Reads as an aside to the count, not a second heading: the collection is scoped to
   one study language, and this is what says so when that hides something (#324). */
.dictionary-summary__note {
  margin-left: 0.75em;
  color: var(--text-soft);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
}

.dictionary-summary__note[hidden] {
  display: none;
}

.dictionary-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dictionary-grid--card-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 18px;
}

.dict-card-wrap {
  position: relative;
}

.dictionary-grid--card-layout .dict-card-wrap {
  min-width: 0;
  height: 100%;
}

@supports (content-visibility: auto) {
  .dictionary-grid--card-layout .dict-card-wrap {
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 220px 340px;
  }

  .dictionary-grid:not(.dictionary-grid--card-layout) .dict-row-wrap {
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 100% 68px;
  }
}

/* Pagination — "Load more" */

.dictionary-load-more-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 14px 0 4px;
}

.dictionary-grid:not(.dictionary-grid--card-layout) .dictionary-load-more-row {
  border-top: 1px dashed rgba(123, 87, 48, 0.14);
  margin-top: 8px;
  padding-top: 16px;
}

.dictionary-load-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.dictionary-load-more:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.dictionary-load-more:active {
  transform: translateY(0);
  box-shadow: none;
}

.dictionary-load-more__count {
  color: var(--text-soft);
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

@media (max-width: 479px) {
  .dictionary-load-more {
    padding: 9px 18px;
    font-size: 0.92rem;
  }
}

.dict-card-row {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1.55fr) 118px 48px 36px;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.dict-row-wrap--expanded .dict-card-row,
.dict-card-row:hover {
  background: rgba(var(--tint-rgb), 0.05);
}

.dict-row-main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.dict-row-foreign {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dict-row-source {
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dict-row-sense-context,
.dict-card-sense-gloss {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.35;
}

.dict-row-transliteration {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dict-row-sep {
  color: var(--paper-leather);
  opacity: 0.4;
  font-size: 0.86rem;
  user-select: none;
}

.dict-row-tts,
.dict-card-tts,
.dict-row-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  background: rgba(255, 252, 243, 0.88);
  color: var(--paper-slate);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.dict-row-tts svg,
.dict-card-tts svg {
  width: 17px;
  height: 17px;
}

.dict-row-tts.is-disabled,
.dict-card-tts.is-disabled {
  opacity: 0.42;
}

.dict-row-toggle {
  color: var(--paper-leather);
}

.dict-row-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 200ms ease;
}

.dict-row-toggle[aria-expanded='true'] {
  background: rgba(38, 51, 58, 0.08);
  color: var(--text-base);
}

.dict-row-toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.dict-row-toggle.is-loading svg {
  animation: dict-row-toggle-spin 720ms linear infinite;
}

@keyframes dict-row-toggle-spin {
  to { transform: rotate(360deg); }
}

.dict-row-tts:focus-visible,
.dict-card-tts:focus-visible,
.dict-row-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(123, 87, 48, 0.08);
}

.dict-row-details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  will-change: grid-template-rows, opacity;
  transition:
    grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
}

.dict-row-details.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.dict-row-details-inner {
  min-height: 0;
  overflow: hidden;
}

.dict-row-example-source mark.example-highlight,
.dict-row-example-translation mark.example-highlight {
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(239, 180, 94, 0.22);
  color: #b87a26;
  font-weight: 600;
}

.dict-row-examples {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 8px 54px;
  padding: 14px 16px;
  border: 1px solid rgba(123, 87, 48, 0.14);
  border-radius: 14px;
  background: rgba(255, 252, 243, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.dict-row-detail-label {
  color: var(--paper-leather);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dict-row-detail-state {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.dict-row-sense {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dict-row-sense--numbered + .dict-row-sense--numbered {
  padding-top: 14px;
  border-top: 1px solid rgba(123, 87, 48, 0.14);
}

.dict-row-sense-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dict-row-sense-number {
  width: 22px;
  height: 22px;
  font-size: 0.68rem;
}

.dict-row-sense-headword {
  color: var(--text-base);
  font-size: 0.96rem;
}

.dict-row-sense-gloss {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.dict-row-source-synonyms {
  margin: -4px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.dict-row-synonyms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dict-row-synonyms li {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(38, 51, 58, 0.07);
  color: var(--text-muted);
  font-size: 0.78rem;
}

.sense-form-filters--compact .sense-form-filter {
  min-height: 27px;
  padding: 3px 8px;
  font-size: 0.72rem;
}

.dict-row-examples-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.dict-row-example-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(123, 87, 48, 0.10);
}

.dict-row-example-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.dict-row-example-source {
  color: var(--text-base);
  font-size: 0.94rem;
  line-height: 1.45;
}

.dict-row-example-translation {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.dict-card-term {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dict-card-translation,
.dict-card-transliteration {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dict-card-translation {
  color: var(--text-base);
  font-size: 1.6rem;
}

.dict-card-transliteration {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.dict-card-meta {
  display: flex;
  align-items: center;
}

.dict-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(38, 51, 58, 0.08);
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.dict-card-progress {
  height: 5px;
  border-radius: 999px;
  background: #d8d3c7;
  overflow: hidden;
}

.dict-card-progress-fill {
  height: 100%;
  border-radius: inherit;
}

.dict-card-progress-fill--green {
  background: #4d6b3d;
}

.dict-card-progress-fill--gold {
  background: #cda34b;
}

.dict-card-percent {
  color: var(--text-base);
  font-size: 0.92rem;
  text-align: right;
}

.dict-card-visual {
  width: 100%;
  min-height: 320px;
  height: 100%;
  position: relative;
  cursor: pointer;
  perspective: 1200px;
  outline: none;
  transition: transform 180ms ease;
}

.dict-card-wrap:hover .dict-card-visual {
  transform: translateY(-2px);
}

.dict-card-visual:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.18);
  border-radius: 24px;
}

.dict-card-visual-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

.dict-card-visual.is-flipped .dict-card-visual-inner {
  transform: rotateY(180deg);
}

.dict-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(123, 87, 48, 0.16);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
    rgba(255, 252, 243, 0.94);
  backface-visibility: hidden;
  box-shadow:
    0 16px 34px rgba(38, 51, 58, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.dict-card-face--back {
  transform: rotateY(180deg);
}

.dict-card-media {
  position: relative;
  flex: 1 1 210px;
  min-height: 210px;
}

.dict-card-media-image {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(255, 252, 243, 0.92);
  box-shadow: none;
}

.dict-card-media-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dict-card-progress--divider {
  height: 1px;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid rgba(123, 87, 48, 0.18);
  box-shadow: none;
}

.dict-card-progress--prominent {
  height: 8px;
  border-radius: 0;
  background: rgba(123, 87, 48, 0.10);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.dict-card-progress--prominent .dict-card-progress-fill {
  position: relative;
  border-radius: 0;
  box-shadow: 0 0 8px rgba(205, 163, 75, 0.3);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dict-card-progress--prominent .dict-card-progress-fill--gold {
  background: linear-gradient(90deg, #cda34b, #e8c578);
}

.dict-card-progress--prominent .dict-card-progress-fill--green {
  background: linear-gradient(90deg, #4d6b3d, #7ea662);
}

.dict-card-body {
  --dict-card-audio-size: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 0;
  padding: 4px 16px 16px;
  background: rgba(255, 252, 243, 0.98);
  text-align: center;
  flex: 0 0 auto;
}

.dict-card-word-row,
.dict-card-word-row--front {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  column-gap: 10px;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: 100%;
  padding: 0;
}

.dict-card-word-spacer {
  display: none;
}

.dict-card-meta-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 0;
  margin-top: 12px;
}

.dict-card-meta-line .dict-card-transliteration--back {
  order: -1;
}

.dict-pos-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Letter-spacing is added after the last letter as well, so symmetric padding
     leaves the label sitting visibly left of centre. The right side gives that
     tracking back. */
  padding: 3px calc(8px - 0.26em) 3px 8px;
  /* It sits on the card's own paper beside the word (#489), where an ivory fill would
     vanish; the outline carries it instead. Sized by content, never a fixed box (#238). */
  border: 1px solid currentColor;
  border-radius: 6px;
  color: var(--paper-leather);
  white-space: nowrap;
  align-self: center;
  font-family: var(--font-brand);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.78;
}

.dict-card-transliteration-placeholder {
  display: none;
}

.dict-card-term--front,
.dict-card-term--back {
  grid-column: 1;
  display: -webkit-box;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.28;
  padding-bottom: 0.12em;
  letter-spacing: -0.01em;
  color: var(--text-base);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  text-align: center;
  text-wrap: pretty;
}

.dict-card-transliteration--back {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-style: italic;
  letter-spacing: 0;
  color: var(--text-muted);
  opacity: 0.82;
  white-space: normal;
  text-align: center;
  max-width: 100%;
}

.dict-card-tts {
  grid-column: 2;
  justify-self: start;
  align-self: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--paper-leather);
  opacity: 0.55;
  transition: opacity 160ms ease, transform 160ms ease;
}

.dict-card-tts:hover,
.dict-card-tts:focus-visible {
  opacity: 1;
  transform: scale(1.12);
  background: transparent;
  box-shadow: none;
}

.dict-card-tts svg {
  width: 15px;
  height: 15px;
}

/* Delete: a quiet corner button on the back of the card, red only under the pointer. */
.dict-card-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: rgba(255, 252, 243, 0.9);
  color: var(--paper-leather);
  box-shadow: 0 2px 8px rgba(38, 51, 58, 0.12);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

/* 44px to the finger, 34px to the eye (#360). */
.dict-card-delete::before {
  content: '';
  position: absolute;
  inset: -5px;
}

.dict-card-delete svg,
.dict-row-delete svg {
  width: 16px;
  height: 16px;
}

.dict-card-delete:hover,
.dict-card-delete:focus-visible,
.dict-row-delete:hover,
.dict-row-delete:focus-visible {
  color: var(--danger);
}

.dict-card-delete:disabled,
.dict-row-delete:disabled {
  opacity: 0.5;
  cursor: progress;
}

.dict-row-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid rgba(123, 87, 48, 0.12);
}

.dict-row-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.dict-empty {
  margin: 0;
  padding: 28px 20px;
  border: 1px dashed var(--paper-line);
  border-radius: 12px;
  background: rgba(255, 252, 243, 0.52);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}

.dict-empty--actionable {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.dict-empty--actionable p {
  margin: 0;
}

.dict-empty-action {
  min-height: 42px;
  padding-inline: 22px;
}

.dictionary-sidebar .panel-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dictionary-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dictionary-sidebar-title {
  margin: 0;
  color: var(--text-base);
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dictionary-sidebar-clear {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--tint-text);
  font-size: 0.74rem;
  cursor: pointer;
}

.dictionary-filter-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dictionary-filter-label {
  margin: 0;
  color: var(--paper-leather);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dictionary-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-base);
  font-size: 0.92rem;
}

.dictionary-check-input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--paper-slate);
}

.dictionary-apply-button {
  min-height: 40px;
  font-size: 0.86rem;
}

.dictionary-filters-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--overlay-z) + 1);
  border: 0;
  background: rgba(20, 33, 38, 0.24);
}

@media (min-width: 980px) {
  .dictionary-layout {
    grid-template-columns: minmax(0, 1fr) 248px;
    align-items: start;
  }

  .dictionary-sidebar {
    position: sticky;
    top: 22px;
    display: block !important;
  }
}

@media (max-width: 979px) {
  #dictionaryPage {
    padding: 5px;
    border-radius: 20px;
  }

  .dictionary-title-icon,
  .dictionary-title-rule {
    display: none;
  }

  .dictionary-title {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }

  .dictionary-filter-toggle {
    width: 48px;
    padding: 0;
  }

  .dictionary-search-field {
    flex-basis: 100%;
  }

  .dictionary-view-toggle {
    flex: 1 1 auto;
  }

  .dictionary-view-button {
    flex: 1 1 0;
    min-width: 0;
  }

  .dictionary-filter-toggle-label {
    display: none;
  }

  .dictionary-filter-toggle-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 0.66rem;
  }

  .dictionary-summary {
    display: none;
  }

  .dictionary-grid--card-layout {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
  }

  .dict-card-visual {
    min-height: 260px;
  }

  .dict-card-face {
    border-radius: 16px;
  }

  .dict-card-row {
    grid-template-columns: 36px minmax(0, 1fr) 46px 32px;
    gap: 10px;
  }

  .dict-card-meta {
    display: none;
  }

  .dict-row-examples {
    margin-left: 46px;
  }

  .dict-row-transliteration,
  .dict-row-sep--translit {
    display: none;
  }

  .dict-card-term--front,
  .dict-card-term--back {
    font-size: 1.85rem;
  }

  .dictionary-sidebar {
    display: none;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: calc(var(--overlay-z) + 2);
    max-height: min(70dvh, 520px);
    overflow: auto;
  }

  .dictionary-layout--filters-open .dictionary-sidebar {
    display: block;
  }
}

@media (max-width: 759px) {
  /* `.dictionary-control-row` is a flex row, so the `grid-template-columns` that
     used to sit here never applied. What it wraps into instead: sort direction and
     the sort field on one line with ~85px spare, the chips on the next with ~110px
     spare. Let each line spend the width it is given. */
  .dictionary-control-row {
    gap: 8px;
  }

  .dictionary-sort-field-shell {
    flex: 1 1 auto;
    width: auto;
  }

  .dictionary-progress-chips {
    flex: 1 1 100%;
    margin-left: 0;
    /* After the export button, so the button shares the first line with the sort field. */
    order: 1;
  }

  /* The first line has about 85px to spare (see above): the icon fits, the label does not. */
  .dictionary-export {
    width: 42px;
    padding: 0;
    justify-content: center;
  }

  .dictionary-export span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .dictionary-progress-chips .dictionary-chip {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 0 8px;
  }

  .dictionary-select-shell select {
    min-height: 38px;
    padding-left: 10px;
  }

  .dictionary-view-button span {
    display: none;
  }

  .dictionary-grid--card-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .dict-card-visual {
    min-height: 240px;
  }

  .dict-card-face {
    border-radius: 14px;
    box-shadow:
      0 6px 18px rgba(38, 51, 58, 0.08),
      0 1px 2px rgba(38, 51, 58, 0.04);
  }

  .dict-card-media {
    flex: 1 1 auto;
    min-height: 0;
  }

  .dict-card-body {
    --dict-card-audio-size: 22px;
    position: relative;
    min-height: 0;
    padding: 6px 12px 16px;
    gap: 2px;
    flex: 0 0 auto;
    background: rgba(255, 252, 243, 0.98);
  }

  .dict-card-word-row,
  .dict-card-word-row--front {
    grid-template-columns: minmax(0, auto) auto;
    column-gap: 8px;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: auto;
    max-width: 100%;
  }

  .dict-card-word-row .dict-card-word-spacer {
    display: none;
  }

  .dict-card-term--front,
  .dict-card-term--back {
    grid-column: 1;
    font-size: 1.7rem;
    line-height: 1.3;
    padding-bottom: 0.16em;
  }

  .dict-card-transliteration--back {
    font-size: 0.8rem;
  }

  .dict-card-meta-line {
    min-height: 0;
    gap: 6px;
    margin-top: 12px;
  }

  .dict-card-progress--divider {
    height: 2px;
    background: transparent;
    border-top: 1px solid rgba(123, 87, 48, 0.18);
  }

  /* Only what differs from the base rule. It used to restate the whole block,
     which is how the fixed-size bug survived a fix in one place (#238). */
  .dict-pos-chip {
    padding: 3px calc(8px - 0.24em) 3px 8px;
    font-size: 0.56rem;
    letter-spacing: 0.24em;
  }

  .dict-card-tts {
    grid-column: 2;
    justify-self: start;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--paper-leather);
    opacity: 0.55;
    transition: opacity 160ms ease, transform 160ms ease;
    align-self: center;
  }

  .dict-card-tts:hover,
  .dict-card-tts:focus-visible {
    opacity: 1;
    transform: scale(1.12);
    background: transparent;
    box-shadow: none;
  }

  .dict-card-tts svg {
    width: 14px;
    height: 14px;
  }

  .dict-card-row {
    grid-template-columns: 32px minmax(0, 1fr) 38px 28px;
    gap: 8px;
    padding: 8px 0;
  }

  .dict-card-percent {
    font-size: 0.82rem;
  }

  .dict-row-tts,
  .dict-row-toggle {
    width: 30px;
    height: 30px;
  }

  .dict-row-tts svg {
    width: 15px;
    height: 15px;
  }

  .dict-row-examples {
    margin-left: 40px;
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dict-card-visual,
  .dict-card-visual-inner,
  .dict-row-details {
    transition: none;
  }
}

/* iOS Safari backface fix ------------------------------------------------- */
.memo-card-inner,
.dict-card-visual-inner {
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1200px;
}

.memo-card-face,
.dict-card-face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  isolation: isolate;
  will-change: transform;
  -webkit-mask: -webkit-linear-gradient(top, #000, #000);
}

.memo-card-back,
.dict-card-face--back {
  -webkit-transform: rotateY(180deg) translate3d(0, 0, 0);
  transform: rotateY(180deg) translate3d(0, 0, 0);
}

.memo-flip-input:checked + .memo-card .memo-card-inner {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* Save-to-learn glow button ---------------------------------------------- */
/* Save-to-learn button -- lives inside .translation-box-footer */
.translation-box-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.translation-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.translation-tools .tts-btn {
  flex-shrink: 0;
}

.save-to-learn-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(216, 198, 158, 0.55);
  border-radius: 7px;
  background: linear-gradient(180deg, #c4a960, #402e1a);
  color: #fff9f0;
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 14px rgba(58, 38, 20, 0.28);
  transition: transform 160ms ease, filter 160ms ease;
}

.save-to-learn-btn[hidden] { display: none; }

/* Holds Save's place while the result on screen cannot be saved yet (#409). */
.save-to-learn-btn--reserved {
  visibility: hidden;
  pointer-events: none;
}

.save-to-learn-btn--reserved.save-to-learn-btn--filling {
  visibility: visible;
  border-color: transparent;
  box-shadow: none;
  color: transparent;
}

.save-to-learn-btn--filling > * {
  visibility: hidden;
}

.save-to-learn-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.save-to-learn-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 38%, rgba(255, 232, 178, 0.55) 50%, transparent 62%);
  background-size: 220% 100%;
  animation: saveSheen 3.2s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

.save-to-learn-icon {
  color: #f5c557;
}

.save-to-learn-label {
  position: relative;
}

@keyframes saveSheen {
  0%, 100% { background-position: 220% 0; }
  50%      { background-position: -20% 0; }
}

/* Save modal -------------------------------------------------------------- */
.save-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--overlay-z) + 30);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 12, 18, 0.62);
  backdrop-filter: blur(8px);
  animation: fadeIn 220ms ease;
}

.save-modal-overlay.hidden { display: none; }

.save-modal {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 26px 26px 22px;
  border: 1px solid rgba(216, 198, 158, 0.32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(245, 197, 87, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(255, 252, 243, 0.98), rgba(243, 235, 218, 0.98));
  color: var(--paper-ink);
  box-shadow: 0 30px 80px rgba(8, 12, 18, 0.45);
  animation: modalRise 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalRise {
  from { transform: translateY(18px) scale(0.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.save-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--paper-leather);
  cursor: pointer;
  transition: background-color 160ms ease;
}
/* 32px circle, 44px tap area (#360). Shared by the save, game-info and
   game-study modals, so the three closes flagged in the mobile pass are one rule. */
.save-modal-close::after {
  content: '';
  position: absolute;
  inset: -6px;
}

.save-modal-close:hover { background: rgba(123, 87, 48, 0.1); }

.save-modal-header { padding-right: 28px; }
.save-modal-title {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.save-modal-sub {
  margin: 6px 0 0;
  color: var(--paper-leather);
  font-size: 0.88rem;
}

.save-modal-card-preview {
  display: flex;
  justify-content: center;
  margin: 18px 0 14px;
}

.save-modal-card {
  width: min(220px, 70%);
  border: 1px solid rgba(123, 87, 48, 0.22);
  border-radius: 14px;
  background: #fffaee;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(38, 51, 58, 0.18);
}

.save-modal-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(20, 33, 38, 0.8), rgba(216, 198, 158, 0.6));
}
.save-modal-card-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.save-modal-card-text {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 10px 12px 14px;
  text-align: center;
}
.save-modal-card-foreign {
  font-family: var(--font-body);
  font-size: 1.15rem; font-weight: 700;
  color: var(--paper-ink);
}
.save-modal-card-translit {
  font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper-leather);
}
.save-modal-card-english {
  font-size: 0.85rem; color: var(--paper-muted);
  font-style: italic;
}

.save-modal-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin: 8px 0 18px;
  padding: 0;
  list-style: none;
}

.save-modal-image {
  position: relative;
  width: 100%;
  height: 110px;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper-panel);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.save-modal-image img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.save-modal-image:hover {
  transform: translateY(-2px);
  border-color: rgba(123, 87, 48, 0.36);
}
.save-modal-image.is-selected {
  border-color: var(--tint-solid);
  box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.22);
}

.save-modal-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.save-modal-footer-spacer {
  flex: 1 1 auto;
}

/* The one-off note about a tab (#362). It borrows the save modal's frame so the
   two read as the same kind of object, and only says what is different: a short
   list of what the tab is for, and one way out. */
.tab-intro {
  width: min(460px, 100%);
}

.tab-intro-points {
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.tab-intro-points li {
  position: relative;
  padding-left: 20px;
  color: var(--paper-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.tab-intro-points li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper-leather);
}

.tab-intro .save-modal-footer {
  justify-content: stretch;
}

.tab-intro .save-modal-footer .primary-button {
  flex: 1 1 auto;
  min-height: 44px;
}

.save-modal-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  background: transparent;
  color: var(--paper-leather);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 240ms ease;
}
.save-modal-refresh:hover {
  background: rgba(123, 87, 48, 0.08);
  color: var(--paper-ink);
}
.save-modal-refresh:active svg {
  transform: rotate(180deg);
  transition: transform 360ms ease;
}

.save-modal-cancel {
  padding: 10px 18px;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  background: transparent;
  color: var(--paper-ink);
  cursor: pointer;
  transition: background 160ms ease;
}
.save-modal-cancel:hover { background: rgba(123, 87, 48, 0.08); }

.save-modal-save {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  background: linear-gradient(180deg, #8a6b3e, #6e4f2d);
  color: #fff9f0;
  font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(123, 87, 48, 0.28);
  transition: transform 160ms ease, filter 160ms ease;
}
.save-modal-save:hover { transform: translateY(-1px); filter: saturate(1.06); }
.save-modal-save:disabled { opacity: 0.6; cursor: wait; }
/* Disabled here means "nothing selected", not "saving" — avoid the busy cursor. */
.game-study-modal .save-modal-save:disabled { cursor: not-allowed; }
/* Select all / Clear: nothing left to do, so say so instead of looking clickable. */
.game-study-modal .save-modal-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.game-study-modal .save-modal-cancel:disabled:hover { background: transparent; }

/* Every save-modal footer is `[leading?] [spacer] [cancel] [save]`, right-aligned
   on one line by the spacer. On a phone the line cannot hold them: the row wraps,
   the spacer keeps claiming a slot even at zero height, and the buttons land on
   ragged half-rows. Below the breakpoint the row stops pretending to be a line —
   the spacer goes, the primary takes a row of its own, and whatever is left
   shares the row above it. Shared by the save, game-info and game-study modals. */
@media (max-width: 759px) {
  .save-modal-footer {
    row-gap: 10px;
  }

  .save-modal-footer-spacer {
    display: none;
  }

  .save-modal-cancel {
    flex: 1 1 auto;
    min-height: 44px;
  }

  .save-modal-save {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 44px;
  }
}

/* Scribe overlay --------------------------------------------------------- */
.scribe-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--overlay-z) + 40);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 18, 0.55);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.scribe-overlay.hidden { display: none; }

.scribe-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: scribeStageIn 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes scribeStageIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.scribe-gif {
  width: min(220px, 60vw);
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));
}

.scribe-message {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: #f8e9c4;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
  opacity: 0;
}
.scribe-overlay.is-playing .scribe-message {
  animation: scribeMessageIn 0.32s ease-out forwards;
}

@keyframes scribeMessageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* The base-language block lays out as if its wrapper were not there. */
.profile-language-block {
  display: contents;
}

.profile-language-block[hidden] {
  display: none;
}

/* Profile main language tiles -------------------------------------------- */
.profile-language-hint {
  margin: 4px 0 14px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.profile-language-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}

.profile-language-tile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-inset);
  color: var(--text-base);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.profile-language-tile:hover {
  border-color: var(--border-strong);
  background: var(--bg-panel);
}
.profile-language-tile.is-active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(245, 197, 87, 0.14), transparent), var(--bg-inset);
  box-shadow: 0 0 0 1px rgba(245, 197, 87, 0.22);
}
.profile-language-tile-glyph {
  flex: none;
  width: 26px;
  font-family: var(--font-brand);
  font-size: 1.25rem;
  color: var(--accent);
  line-height: 1;
  text-align: center;
}
.profile-language-tile-name {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Profile main-language dropdown + confirm step ---------------------------
   (The tile grid above still serves the first-run welcome overlay.) */

/* `.panel` clips overflow for its rounded corners, which would truncate the
   open dropdown menu. */
.profile-language-panel {
  overflow: visible;
}

.profile-language-control {
  max-width: 320px;
}

.profile-language-dropdown-wrap {
  position: relative;
}

.profile-language-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-inset);
  color: var(--text-strong);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.profile-language-btn:hover {
  border-color: var(--border-strong);
}

.profile-language-btn .dropdown-arrow {
  margin-left: auto;
  color: var(--text-soft);
}

.profile-language-btn-glyph,
.profile-language-option-glyph {
  flex: none;
  width: 24px;
  font-family: var(--font-brand);
  font-size: 1.05rem;
  color: var(--accent);
  line-height: 1;
  text-align: center;
}

.profile-language-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  /* Solid base under the (slightly translucent) panel gradient so page
     content can't ghost through the open menu. */
  background-color: var(--bg-base);
  background-image: var(--bg-panel-strong);
  box-shadow: var(--shadow-md);
}

.profile-language-menu.hidden {
  display: none;
}

.profile-language-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}

.profile-language-menu li:hover {
  background: var(--bg-muted);
}

.profile-language-menu li.active {
  color: var(--accent);
  font-weight: 700;
}

.profile-language-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--accent-soft);
}

.profile-language-confirm[hidden] {
  display: none;
}

.profile-language-confirm-text {
  flex: 1;
  min-width: 180px;
  margin: 0;
  color: var(--text-strong);
  font-size: 0.84rem;
  line-height: 1.4;
}

.profile-language-confirm-actions {
  display: flex;
  gap: 8px;
}

.profile-language-confirm-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: var(--bg-accent);
  color: #fff9f0;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.profile-language-cancel-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
}

/* Games — image tiles ---------------------------------------------------- */
.game-study-panel {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 8px 6px 10px;
  border: 1px solid rgba(123, 87, 48, 0.14);
  border-radius: 999px;
  background: rgba(255, 252, 243, 0.72);
}

.game-study-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.game-study-eyebrow {
  color: var(--paper-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-study-title {
  color: var(--paper-ink);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
}

.game-study-summary {
  color: var(--paper-leather);
  font-size: 0.78rem;
  line-height: 1.35;
}

.game-study-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.game-study-mode,
.game-study-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: rgba(255, 252, 243, 0.88);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.game-study-mode:hover,
.game-study-edit:hover {
  background: rgba(38, 51, 58, 0.06);
  color: var(--paper-ink);
}

.game-study-mode.is-active {
  border-color: var(--paper-slate, #2c3a44);
  background: var(--paper-slate, #2c3a44);
  color: #f7f2e8;
}

.game-study-edit {
  border-color: rgba(var(--tint-rgb), 0.28);
  color: var(--tint-solid);
}

.game-study-mode:focus-visible,
.game-study-edit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(123, 87, 48, 0.18);
}

.guided-games-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(155, 107, 34, 0.34);
  border-radius: 16px;
  background: rgba(255, 248, 231, 0.92);
  color: var(--paper-ink);
  box-shadow: 0 8px 24px rgba(123, 87, 48, 0.12);
}

.guided-games-notice[hidden] {
  display: none;
}

.guided-games-notice strong {
  font-size: 1rem;
  font-weight: 800;
}

.guided-games-notice button {
  padding: 5px 4px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guided-games-notice button:disabled {
  opacity: 0.55;
  cursor: progress;
}

.games-page--guided .game-study-panel,
.games-page--guided .games-toolbar {
  opacity: 0.4;
  pointer-events: none;
}

.onboarding-games-guided .nav-list a:not([data-page="games"]) {
  opacity: 0.36;
  pointer-events: none;
}

.games-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.games-toolbar[hidden] { display: none; }

.games-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: rgba(255, 252, 243, 0.78);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.games-filter-chip:hover {
  background: rgba(38, 51, 58, 0.06);
  color: var(--text-base);
}

.games-filter-chip.is-active {
  background: var(--paper-slate, #2c3a44);
  color: #f7f2e8;
  border-color: var(--paper-slate, #2c3a44);
}

.games-filter-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(123, 87, 48, 0.18);
}

.games-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
  justify-content: start;
  gap: 16px;
}

.game-card {
  position: relative;
  display: block;
  padding: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(123, 87, 48, 0.18);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #1a2632 0%, #0f1a23 100%);
  box-shadow: 0 10px 24px rgba(8, 12, 18, 0.18);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}

.game-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 22px 44px rgba(8, 12, 18, 0.34);
}

/* Pressed, and the game is being prepared (#623). */
.game-card--launching > * {
  opacity: 0.55;
}

.game-card--launching::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: app-loading-spin 0.8s linear infinite;
  pointer-events: none;
}

.game-card--onboarding-blocked {
  opacity: 0.36;
  filter: grayscale(0.72) saturate(0.45);
  cursor: default;
  pointer-events: none;
}

.game-card--onboarding-blocked:hover {
  transform: none;
  box-shadow: 0 10px 24px rgba(8, 12, 18, 0.18);
}

.game-card--onboarding-target {
  z-index: 1;
  border-color: #c89432;
  box-shadow:
    0 0 0 3px rgba(245, 197, 87, 0.52),
    0 0 28px rgba(200, 148, 50, 0.48),
    0 16px 34px rgba(8, 12, 18, 0.28);
  animation: onboarding-game-glow 1.8s ease-in-out infinite;
}

.game-card--onboarding-target:hover {
  box-shadow:
    0 0 0 4px rgba(245, 197, 87, 0.66),
    0 0 34px rgba(200, 148, 50, 0.58),
    0 20px 42px rgba(8, 12, 18, 0.32);
}

.games-page--guided .game-card--onboarding-target .game-card-overlay {
  opacity: 1;
}

.games-page--guided-launching .game-card--onboarding-target {
  opacity: 0.72;
  cursor: progress;
  pointer-events: none;
}

.game-card-onboarding-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f5c557;
  color: #302515;
  box-shadow: 0 0 16px rgba(245, 197, 87, 0.62);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

@keyframes onboarding-game-glow {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(245, 197, 87, 0.42),
      0 0 22px rgba(200, 148, 50, 0.36),
      0 14px 30px rgba(8, 12, 18, 0.24);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(245, 197, 87, 0.68),
      0 0 34px rgba(200, 148, 50, 0.56),
      0 18px 38px rgba(8, 12, 18, 0.30);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-card--onboarding-target {
    animation: none;
  }
}

.game-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(123, 87, 48, 0.32), 0 22px 44px rgba(8, 12, 18, 0.34);
}

.game-card-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.game-card-cover--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background:
    radial-gradient(circle at 50% 40%, rgba(245, 197, 87, 0.32), transparent 65%),
    linear-gradient(180deg, #213244, #131e2a);
  color: #f5c557;
}

.game-card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 14px 12px;
  background: linear-gradient(180deg, rgba(8, 12, 18, 0) 0%, rgba(8, 12, 18, 0.78) 100%);
  color: #fff;
  pointer-events: none;
}

/* Always visible. It used to fade in only on hover on a desktop, which left the
   Games tab a grid of covers to hover one by one to find a game by name (#495). */
.game-card-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 0;
}

/* What a card can say about itself before it is opened (#180). */
.game-card-badges {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 20px);
  margin: 0;
  pointer-events: none;
}

.game-card-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.82);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.game-card-badge--cards {
  background: var(--bg-accent);
  color: #fff9f0;
}

.game-card-badge[hidden] {
  display: none;
}

/* The title sits above the badge row rather than under it. */
.game-card-overlay {
  padding-bottom: 40px;
}

/* Short of cards: the card says so and stops launching. Muted rather than
   hidden — the game is a real destination once the collection grows, and the
   info button still explains what it wants. */
.game-card--needs-cards {
  cursor: default;
}

.game-card--needs-cards .game-card-cover {
  filter: grayscale(0.55);
  opacity: 0.72;
}

.game-card--needs-cards:hover {
  transform: none;
  box-shadow: 0 10px 24px rgba(8, 12, 18, 0.18);
}

.game-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  /* Wide enough that the two 44px tap areas below cannot overlap: at 6px they did,
     and a tap that landed between them went to whichever button sat higher in the
     DOM rather than the one under the finger (#360). */
  gap: 16px;
  z-index: 2;
}

.game-card-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(8, 12, 18, 0.62);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 160ms ease, transform 160ms ease, color 160ms ease;
}

/* Tap area to 44px without growing the button: the card is dense on a phone and
   the card itself launches the game, so a miss is not "nothing happened" but "the
   wrong thing opened". 8px is the button's own inset from the card edge, so the
   area stays inside the card — `.game-card` clips its overflow, and a hit area
   past that edge would not receive the tap. */
.game-card-action::after {
  content: '';
  position: absolute;
  inset: -8px;
}

.game-card-action:hover {
  background: rgba(8, 12, 18, 0.86);
  transform: scale(1.06);
}

.game-card-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(245, 197, 87, 0.7);
}

.game-card-fav {
  color: rgba(255, 255, 255, 0.7);
}

.game-card-fav.is-active {
  color: #ff5779;
}

.game-card-override-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #f59e0b;
  color: #1a1a1a;
  border-radius: 4px;
  vertical-align: middle;
}

.game-card--locked .game-card-cover {
  filter: grayscale(0.7) brightness(0.6);
}

.game-card-lock-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(20, 20, 24, 0.82);
  color: #fff;
  border-radius: 999px;
  backdrop-filter: blur(2px);
  pointer-events: none;
}

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

.game-card-disabled:hover {
  transform: none;
}

.game-card-tooltip {
  display: none;
}

/* Game info modal -------------------------------------------------------- */
.game-info-modal {
  width: min(520px, 100%);
}

.game-info-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0 0 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(123, 87, 48, 0.22);
  background: linear-gradient(160deg, #1a2632 0%, #0f1a23 100%);
}

.game-info-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.game-info-cover--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-info-cover-icon {
  font-size: 4.5rem;
  color: #f5c557;
}

.game-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 12px;
}

/* Play sits next to the title, not under the description, so the reason the
   player opened this window is on screen without scrolling (#683). */
.game-info-play {
  flex: 0 0 auto;
}

.game-info-desc {
  margin: 0 0 14px;
  color: var(--paper-leather);
  line-height: 1.55;
  font-size: 0.92rem;
}

.game-info-howto {
  margin: 0 0 14px;
}

.game-info-howto[hidden] {
  display: none;
}

.game-info-howto-title {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-muted);
}

.game-info-howto-steps {
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--paper-ink);
}

.game-info-requirements {
  list-style: none;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(123, 87, 48, 0.14);
  border-radius: 14px;
  background: rgba(255, 252, 243, 0.74);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.game-info-requirement {
  font-size: 0.88rem;
  color: var(--paper-ink);
}

.game-info-requirement strong {
  color: var(--paper-ink);
  font-weight: 700;
}

.game-info-requirement--empty {
  color: var(--paper-muted);
  font-style: italic;
}

.game-study-modal {
  width: min(720px, 100%);
}

.game-study-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 12px;
}

.game-study-search {
  flex: 1 1 auto;
  min-width: 0;
}

.game-study-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(123, 87, 48, 0.18);
  border-radius: 10px;
  background: rgba(255, 252, 243, 0.9);
  color: var(--paper-ink);
  font: inherit;
}

.game-study-search input:focus-visible {
  outline: none;
  border-color: rgba(var(--tint-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--tint-rgb), 0.16);
}

.game-study-count {
  flex: 0 0 auto;
  color: var(--paper-leather);
  font-size: 0.78rem;
  font-weight: 800;
}

.game-study-picker-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}

.game-study-sort-field-shell {
  width: 180px;
}

.game-study-progress-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

/* "Selected" review toggle — distinct accent so it reads apart from the XP filters. */
.game-study-selected-chip {
  margin-left: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--paper-line);
  border-radius: 999px;
}

.game-study-selected-chip.is-active {
  background: var(--tint-solid);
  border-color: var(--tint-solid);
  color: #fff9f0;
}

.game-study-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  max-height: min(48dvh, 430px);
  overflow-y: auto;
  padding: 2px 2px 12px;
}

.game-study-card-option {
  display: grid;
  grid-template-columns: auto 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 8px;
  border: 1px solid rgba(123, 87, 48, 0.14);
  border-radius: 12px;
  background: rgba(255, 252, 243, 0.7);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.game-study-card-option:hover {
  border-color: rgba(var(--tint-rgb), 0.34);
  background: rgba(255, 252, 243, 0.94);
  transform: translateY(-1px);
}

.game-study-card-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--tint-solid);
}

.game-study-card-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(38, 51, 58, 0.1);
}

.game-study-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.game-study-card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.game-study-card-term {
  color: var(--paper-ink);
  font-size: 0.86rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.game-study-card-meta {
  color: var(--paper-muted);
  font-size: 0.74rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.game-study-card-xp {
  align-self: flex-start;
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(123, 87, 48, 0.14);
  border-radius: 999px;
  background: rgba(255, 252, 243, 0.84);
  color: var(--paper-leather);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.game-study-card-xp--learning {
  border-color: rgba(179, 126, 39, 0.24);
  color: #87601d;
}

.game-study-card-xp--strong {
  border-color: rgba(62, 120, 73, 0.24);
  color: #3e7849;
}

.game-study-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px;
  border: 1px dashed rgba(123, 87, 48, 0.22);
  border-radius: 12px;
  color: var(--paper-leather);
  text-align: center;
}

@media (max-width: 759px) {
  .game-study-panel {
    width: 100%;
    align-items: center;
    border-radius: 16px;
  }
  /* Three pills need ~300px and the panel gives 236-291px, so the row wraps and
     "Choose cards" sat alone against the right edge. Let the pair split the first
     row and give the third one of its own, filled. */
  .game-study-actions {
    flex: 1;
    justify-content: flex-end;
  }
  .game-study-mode {
    flex: 1 1 0;
    min-width: 0;
  }
  .game-study-edit {
    flex: 1 1 100%;
    min-height: 40px;
  }
  .game-study-picker-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .game-study-picker-controls {
    align-items: stretch;
  }
  .game-study-sort-field-shell {
    flex: 1 1 180px;
    width: auto;
  }
  .game-study-progress-chips {
    flex: 1 1 100%;
    margin-left: 0;
  }
  /* The chips and the Selected toggle each wrap onto a row of their own here;
     without this they sat at 56-82px in a 266px row and read as strays. */
  .game-study-progress-chips .game-study-chip {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 0 8px;
  }
  .game-study-selected-chip {
    flex: 1 1 100%;
    min-height: 40px;
    margin-left: 0;
    padding-left: 14px;
    border-left: none;
    align-self: stretch;
  }
  .game-study-count {
    align-self: flex-start;
  }
}

@media (max-width: 759px) {
  .games-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
  .game-card-overlay {
    padding: 14px 10px 30px;
  }
  .game-card-title { font-size: 0.86rem; }

  /* Two badges do not fit a card that is half a phone wide, and only one of them
     is news: "Solo" repeats what the game already is, "needs four more cards" is
     the reason the card will not open (#180). */
  .game-card-badge--mode {
    display: none;
  }

  .game-card-badges {
    left: 8px;
    bottom: 8px;
  }

  .game-card-badge {
    padding: 2px 7px;
    font-size: 0.62rem;
  }
  .game-card-action { width: 28px; height: 28px; }
}

@media (max-width: 479px) {
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* Mobile fixes: swap/search/keyboard ------------------------------------ */
@media (max-width: 759px) {
  .lang-toggle-bar {
    align-items: center;
    gap: 8px;
  }
  .lang-toggle-btn {
    min-height: 42px;
    padding: 4px 12px;
    border-radius: 10px;
  }
  .lang-toggle-caption { font-size: 0.6rem; }
  .lang-swap-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    min-height: 0;
    padding: 0;
    border-radius: 10px;
  }
  .lang-swap-btn svg { width: 16px; height: 16px; }
}

/* Translator result card — stacked-mobile layout ------------------------- */
@media (max-width: 759px) {
  /* Drop the swap button into the flow *between* the two stacked cards rather
     than absolutely centering it over the section. Absolute centering tracked
     the section's mid-point, which drifts onto the translated word as the POS
     list grows — so the button appeared to jump when switching part of speech.
     Reordering it as a real grid row pins it in the gap regardless of how tall
     either card becomes. */
  .translation-sections .lang-swap-btn--between {
    position: static;
    transform: none;
    order: 1;
    justify-self: center;
    margin-block: -2px;
  }
  .translation-sections .translation-panel {
    order: 2;
  }

  /* Footer reads as two tidy rows — the part-of-speech chips on their own line,
     then a full-width Save action — instead of a cramped, ragged single row. */
  .translation-box-footer {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .translation-tools {
    flex: 1 1 100%;
  }
  /* Smaller chips so the common 2–3 senses sit on one line beside the speaker
     button instead of wrapping into a ragged stack. */
  .translation-pos-button {
    min-height: 32px;
    padding: 0 11px;
    font-size: 0.85rem;
  }
  .save-to-learn-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .search-button {
    width: auto;
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.86rem;
    flex: 0 0 auto;
  }
  .search-box-footer {
    flex-wrap: nowrap;
    align-items: center;
  }
  .save-to-learn-btn {
    height: 40px;
    padding: 0 16px;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
  }
}

/* Keyboard mobile fit ---------------------------------------------------- */
@media (max-width: 759px) {
  .keyboard {
    left: 8px;
    right: 8px;
    bottom: calc(var(--dock-height) + 8px);
    padding: 8px;
    gap: 5px;
    max-height: calc(100dvh - var(--dock-height) - 24px);
    overflow-y: auto;
    border-radius: 6px;
  }
  .keyboard-row {
    gap: 3px;
  }
  .key {
    height: 38px;
    padding: 0 2px;
    font-size: 0.92rem;
    border-radius: 4px;
  }
  .key.wide {
    flex: 3 1 0;
  }
}
@media (max-width: 479px) {
  .key {
    height: 34px;
    font-size: 0.84rem;
  }
}

/* Bottom-clip fix: search/translation text descenders on mobile -------- */
@media (max-width: 759px) {
  .search-box,
  .translation-box {
    min-height: 0;
    overflow: visible;
  }
  .search-box .panel-word-group,
  .translation-box .panel-word-group {
    padding: 16px 18px 22px;
    overflow: visible;
  }
  .search-input,
  .translated-word {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    line-height: 1.45;
    padding-block: 0.2em;
  }
}

/* Shared page title block (library, games, profile) ---------------------- */
.page-title-header {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.page-title-block {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.page-title-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--text-base);
}

.page-title {
  margin: 0;
  font-family: var(--font-brand);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.page-title-rule {
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--paper-line-strong), transparent);
}

.page-title-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: rgba(255, 252, 243, 0.66);
  color: var(--paper-leather);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 759px) {
  .page-title-icon,
  .page-title-rule {
    display: none;
  }
  .page-title {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }
}

/* Full-screen boot / post-login loading overlay -------------------------- */
.app-loading {
  position: fixed;
  inset: 0;
  z-index: calc(var(--overlay-z) + 50);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--bg-base), var(--bg-secondary));
  opacity: 1;
  transition: opacity 320ms ease;
}

.app-loading.is-hiding {
  opacity: 0;
  pointer-events: none;
}

.app-loading[hidden] {
  display: none;
}

.app-loading__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.app-loading__mark {
  font-family: var(--font-brand);
  font-size: 1.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.app-loading__spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: app-loading-spin 0.8s linear infinite;
}

.app-loading__text {
  color: var(--text-muted);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

@keyframes app-loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading__spinner { animation-duration: 1.6s; }
}

/* First-run welcome (study-language picker) ------------------------------ */
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--overlay-z) + 40);
  display: flex;
  /* The card centers itself with auto margins so it can never clip off-screen
     when it grows taller than the viewport — the overlay just scrolls. */
  overflow-y: auto;
  padding: 16px;
  background: linear-gradient(180deg, var(--bg-base), var(--bg-secondary));
}

.welcome-overlay[hidden] {
  display: none;
}

.welcome-overlay__card {
  position: relative;
  width: min(620px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 28px 26px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-secondary);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  text-align: center;
}

/* Top left of the card, on the line of the brand mark: where a step back is expected,
   and out of the way of the one primary action at the bottom (#624). */
.welcome-overlay__back {
  position: absolute;
  top: 22px;
  left: 18px;
  min-height: 36px;
  padding: 4px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.welcome-overlay__back[hidden] {
  display: none;
}

.welcome-overlay__back:hover {
  color: var(--text-strong);
}

.welcome-overlay__step {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.welcome-overlay__step[hidden] {
  display: none;
}

.welcome-overlay__step--intro {
  min-height: 270px;
  justify-content: center;
}

.welcome-overlay__step--intro .welcome-overlay__title {
  max-width: 22ch;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
}

.welcome-overlay__step--intro .welcome-overlay__subtitle {
  max-width: 48ch;
  font-size: 1rem;
  line-height: 1.55;
}

.welcome-overlay__mark {
  font-family: var(--font-brand);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.welcome-overlay__title {
  margin: 0;
  font-size: 1.4rem;
  color: var(--text-strong);
}

.welcome-overlay__subtitle {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.welcome-overlay__grid {
  width: 100%;
  margin-top: 4px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  text-align: left;
}

.welcome-overlay__grid .profile-language-tile.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(77, 107, 61, 0.20);
}

/* Own language: a short radio list named in each language itself, unlike the study grid. */
.welcome-base-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, 100%);
  margin-top: 4px;
}

.welcome-base-option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-inset);
  color: var(--text-base);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.welcome-base-option:hover {
  border-color: var(--border-strong);
  background: var(--bg-panel);
}

.welcome-base-option__mark {
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-secondary);
}

.welcome-base-option__name {
  font-size: 1.15rem;
  font-weight: 700;
}

.welcome-base-option__hint {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.welcome-base-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(77, 107, 61, 0.20);
}

.welcome-base-option.is-selected .welcome-base-option__mark {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 4px var(--bg-secondary);
  background: var(--accent);
}

.welcome-overlay__actions {
  align-self: stretch;
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* Negative margins pull the row out to the card's edges so its ground covers the
     full width; the card gives up its own bottom padding to this row. */
  margin: 6px -28px -26px;
  padding: 14px 28px 18px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 20px 20px;
  background: var(--bg-secondary);
}

.welcome-overlay__start {
  width: min(320px, 100%);
  min-height: 50px;
  margin-top: 8px;
  border: 1px solid var(--action-line);
  border-radius: 15px;
  background: var(--action);
  box-shadow: 0 4px 0 var(--action-shadow);
  color: #fff;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.welcome-overlay__start:disabled {
  border-color: var(--border);
  background: var(--bg-inset);
  box-shadow: none;
  color: var(--text-muted);
  cursor: default;
}

@media (max-width: 479px) {
  .welcome-overlay__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.welcome-overlay__signin {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.welcome-overlay__signin-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.welcome-overlay__signin-btn:hover {
  color: var(--text-strong);
}

/* On a phone this is the whole screen, not a dialog on top of one. #317 pinned the
   action row to the bottom of the card, which is right when the card scrolls — but
   the card centres itself, so on anything shorter than the viewport the row landed
   66-210px above the bottom edge with overlay ground below it, and read as floating
   (#323). Letting the card fill the viewport makes its footer the bottom of the
   screen; the sticky row keeps doing its job for a language grid long enough to
   scroll. Wider screens keep the centred card, where ground around a dialog is
   what it is supposed to look like.

   The onboarding seam takes this same block for the same reason; the practice
   summary does not, because it is a scrim over a live game rather than a screen of
   its own. */
@media (max-width: 759px) {
  .welcome-overlay {
    padding: 0;
  }

  .welcome-overlay__card {
    /* Not `auto`: that is what centres it. Stretch is the flex default once the
       vertical auto margins are gone, and it cannot clip the way centring can.
       Full width too — at 620-759px the capped column left gradient down both
       sides of a card that is otherwise claiming to be the screen. */
    width: 100%;
    margin: 0;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .welcome-overlay__step {
    flex: 1;
  }

  .welcome-overlay__step--intro {
    min-height: 0;
  }

  /* `bottom: 0` only holds the row still while the card scrolls past it; it does
     not move the row down a card that has room to spare. The auto top margin does
     that, and collapses to nothing once the grid is long enough to scroll, which
     hands the job back to sticky. The side and bottom values stay as they are —
     they are the negative margins that pull the row out to the card's edges. */
  .welcome-overlay__actions {
    margin-top: auto;
    border-radius: 0;
  }

  /* A second auto margin, so the free space splits above the content instead of
     all landing between it and the floored row: a short grid then sits centred in
     what is left rather than pinned under the top edge. Both autos collapse
     together once the grid scrolls. */
  .welcome-overlay__step > :first-child {
    margin-top: auto;
  }
}

/* ── First-run path seams ──────────────────────────────────────────────────
   The card shown between two steps of the onboarding run. Deliberately sparse:
   one point, one button, one way out. Sits above the lesson overlay (2100) so a
   seam can never appear behind a step that is closing. */
.onboarding-path-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  background: linear-gradient(180deg, var(--bg-base), var(--bg-secondary));
}

.onboarding-path-overlay[hidden] {
  display: none;
}

.onboarding-path-stage {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
}

.onboarding-path-card {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 28px 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-secondary);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  text-align: center;
}

.onboarding-path-card--finish {
  width: min(920px, 100%);
  align-items: stretch;
}

.onboarding-path-card--finish > .onboarding-path-kicker,
.onboarding-path-card--finish > .onboarding-path-title {
  text-align: center;
}

.onboarding-path-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 20px;
  background: var(--mark);
  box-shadow: 0 12px 30px var(--mark-glow);
  font-size: 1.8rem;
}

.onboarding-path-kicker {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.onboarding-path-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--text-strong);
}

.onboarding-path-body {
  margin: 0 0 6px;
  max-width: 40ch;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* The closing screen of the first run (#375): "get more words" over two lists of
   games. Two columns, because four sources is the usual case; a third tile with
   no fourth takes the full row rather than leaving the right half empty, which is
   what a language without a lesson sees. */
.onboarding-word-sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0 0 4px;
  text-align: left;
}

.onboarding-word-source:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.onboarding-word-source {
  min-width: 0;
  display: grid;
  /* The example is an illustration; the words next to it are the instruction, so
     the copy gets the room — but wide enough that a word of the learner's own
     language fits in it rather than being clipped (#355). */
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-base);
}

/* One frame for every example — before this each tile carried its own treatment
   (a pale card, a filled peach block, a dashed drop zone) and the row read as
   three unrelated components. Only the content inside differs now. */
.onboarding-word-source-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  overflow: hidden;
  /* A floor, not a fixed height: a long word in a non-Latin script wraps to a
     second line, and a frame that could not grow simply hid it (#355). */
  min-height: 84px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-inset);
}

.onboarding-word-source-preview--phrase {
  padding: 0;
}

.onboarding-word-source-preview--phrase img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.onboarding-preview-play {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--action);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  box-shadow: 0 2px 0 var(--action-shadow);
}

/* The learner's own word, so it wraps rather than truncates: an example that
   cuts off mid-word is the very complaint this screen exists to answer. */
.onboarding-preview-word {
  max-width: 100%;
  color: var(--text-strong);
  font-family: var(--font-brand);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.onboarding-preview-romanization {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-preview-romanization[hidden] {
  display: none;
}

.onboarding-preview-save {
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--action);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}

.onboarding-preview-deck-label {
  color: var(--text-soft);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.onboarding-preview-deck-name {
  color: var(--text-strong);
  font-family: var(--font-brand);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.15;
}

.onboarding-preview-deck-add {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}

.onboarding-word-source-preview--anki {
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.onboarding-preview-upload {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 800;
}

.onboarding-preview-file {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.onboarding-word-source-copy {
  align-self: center;
  min-width: 0;
}

/* The badge sits beside the name rather than inside it: as part of the heading it
   pushed the title off its own line. */
.onboarding-word-source-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
}

.onboarding-word-source-name {
  color: var(--text-strong);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.onboarding-word-source-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-word-source-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Where the thing lives, so it can be found once the overlay closes. */
.onboarding-word-source-where {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 0.74rem;
  font-weight: 700;
}

.onboarding-finish-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 0;
  color: var(--text-strong);
  font-size: 0.95rem;
  font-weight: 800;
  text-align: left;
}

.onboarding-finish-heading-note {
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 650;
}

/* Both game lists are one line each: the screen already carries four tiles, a
   footer and a button, and two more columns would push the button off a phone. */
.onboarding-play[hidden] {
  display: none;
}

.onboarding-play-list {
  margin: 4px 0 0;
  color: var(--text-base);
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: left;
}

.onboarding-word-sources-note {
  margin: 2px 0 6px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 650;
  text-align: center;
}

.onboarding-path-actions {
  align-self: stretch;
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px -28px -28px;
  padding: 14px 28px 18px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 20px 20px;
  background: var(--bg-secondary);
}

/* The first card and the deck list under it: the same tile as the closing
   screen's sources, here as a button, one to a row. */
.onboarding-path-choices {
  display: grid;
  gap: 12px;
  width: 100%;
  text-align: left;
}

.onboarding-path-choice {
  position: relative;
  width: 100%;
  min-height: 44px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.onboarding-path-choice:hover:not(:disabled),
.onboarding-path-choice:focus-visible {
  border-color: var(--accent);
}

.onboarding-path-choice:disabled {
  cursor: progress;
}

.onboarding-path-choice:disabled:not([aria-busy="true"]) {
  opacity: 0.55;
}

.onboarding-path-choice[aria-busy="true"] {
  border-color: var(--accent);
  padding-right: 44px;
}

.onboarding-path-choice[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: onboarding-choice-spin 0.8s linear infinite;
}

@keyframes onboarding-choice-spin {
  to {
    transform: rotate(360deg);
  }
}

.onboarding-path-choice .onboarding-word-source-copy {
  display: grid;
  gap: 4px;
}

.onboarding-path-choice-body {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.onboarding-path-actions--links {
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

.onboarding-path-primary {
  width: min(320px, 100%);
  min-height: 50px;
  border: 1px solid var(--action-line);
  border-radius: 15px;
  background: var(--action);
  box-shadow: 0 4px 0 var(--action-shadow);
  color: #fff;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.onboarding-path-primary:hover:not(:disabled) {
  transform: translateY(-1px);
}

.onboarding-path-primary:disabled {
  opacity: 0.7;
  cursor: progress;
}

.onboarding-path-skip {
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.onboarding-path-skip:hover {
  color: var(--text-strong);
  text-decoration: underline;
}

/* The seam is the picker's twin — an opaque full-screen takeover with a sticky
   action row — so it takes the same treatment (#323). It had the bug worse: the
   card is deliberately sparse, so on a phone its row landed ~260px above the
   bottom edge. The stage stretches instead of centring, the card fills it (flex
   stretch, since the stage is a flex container), and the two auto margins split
   what is left above and below the copy. */
@media (max-width: 759px) {
  .onboarding-path-overlay {
    padding: 0;
  }

  .onboarding-path-stage {
    margin: 0;
    min-height: 100%;
  }

  .onboarding-path-card {
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .onboarding-path-card--finish {
    padding-bottom: 0;
  }

  .onboarding-path-card > :first-child {
    margin-top: auto;
  }

  .onboarding-path-actions {
    margin-top: auto;
    border-radius: 0;
  }

  .onboarding-path-card--finish .onboarding-path-actions {
    position: static;
    margin: 4px -28px 0;
  }

  .onboarding-word-sources {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479px) {
  .onboarding-path-card--finish {
    padding-right: 18px;
    padding-left: 18px;
  }

  .onboarding-path-card--finish .onboarding-path-actions {
    margin: 4px -18px 0;
  }

  /* The screen carries two game lists on top of the four tiles now, so the
     examples shrink rather than the copy, and the rows sit closer together
     (#375). Four tiles at the old size pushed the button a screen and a half
     down on a 360-wide phone. */
  .onboarding-path-card--finish {
    gap: 10px;
    padding-top: 26px;
  }

  .onboarding-word-sources {
    gap: 10px;
  }

  .onboarding-word-source {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 11px;
    padding: 10px;
  }

  .onboarding-word-source-preview {
    min-height: 64px;
    padding: 8px;
  }

  .onboarding-preview-word {
    font-size: 0.88rem;
  }

  .onboarding-preview-save,
  .onboarding-preview-play {
    padding: 3px 8px;
    font-size: 0.64rem;
  }

  .onboarding-preview-deck-add {
    width: 22px;
    height: 22px;
    font-size: 0.95rem;
  }

  /* Last of the height budget on a 360-wide phone, so the button that closes the
     screen stays reachable without hunting: the kicker is a nicety over a title
     that already says what the screen is (#375). */
  .onboarding-path-card--finish > .onboarding-path-kicker {
    display: none;
  }

  .onboarding-path-card--finish > .onboarding-path-title {
    font-size: 1.3rem;
  }

  .onboarding-finish-heading {
    margin-top: 2px;
  }
}

/* Site footer ------------------------------------------------------------ */
.site-footer {
  margin-top: auto;
  padding: 28px 0 6px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.site-footer__wordmark {
  font-family: var(--font-brand);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.site-footer__tagline {
  margin: 0;
  max-width: 42ch;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 0.9rem;
}

.site-footer__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 20px 28px;
  width: 100%;
  max-width: 720px;
}

.site-footer__group {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.site-footer__heading {
  margin: 0 0 2px;
  color: var(--text-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer__link {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 160ms ease;
}

.site-footer__link:hover {
  color: var(--text-strong);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.site-footer__copy {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.site-footer__support {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.site-footer__support:hover {
  color: var(--text-strong);
}

@media (min-width: 760px) {
  .site-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .site-footer__links {
    padding-top: 4px;
  }
}

/* Static maturity pages -------------------------------------------------- */
.legal-page {
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--bg-base), var(--bg-secondary));
}

.legal-shell {
  width: min(100% - 32px, 920px);
  margin: 0 auto;
  padding: 40px 0 56px;
}

.legal-header,
.legal-panel {
  border: 1px solid var(--border);
  background: var(--bg-panel-strong);
  box-shadow: var(--shadow-sm);
}

.legal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 22px;
}

.legal-brand {
  font-family: var(--font-brand);
  color: var(--text-strong);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: flex-end;
}

.legal-nav a,
.legal-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.legal-nav a:hover,
.legal-link:hover {
  color: var(--accent-strong);
}

.legal-hero {
  padding: 38px 0 24px;
}

.legal-eyebrow {
  margin: 0 0 10px;
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legal-title {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
}

.legal-subtitle {
  max-width: 68ch;
  margin: 16px 0 0;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.legal-panel {
  display: grid;
  gap: 26px;
  padding: 28px;
  border-radius: 22px;
}

.legal-section {
  display: grid;
  gap: 10px;
}

.legal-section h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 1.2rem;
}

.legal-section p,
.legal-section li {
  margin: 0;
  color: var(--text-base);
  line-height: 1.7;
}

.legal-section ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.2rem;
}

.legal-note {
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  border-radius: 0 14px 14px 0;
  background: var(--accent-soft);
}

.legal-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.legal-grid {
  display: grid;
  gap: 16px;
}

.legal-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-panel-soft);
}

.legal-card h2,
.legal-card h3 {
  margin: 0 0 8px;
  color: var(--text-strong);
  font-size: 1.05rem;
}

.legal-card p {
  margin: 0;
  color: var(--text-base);
  line-height: 1.7;
}

.account-form {
  display: grid;
  gap: 14px;
  max-width: 460px;
}

.account-form label {
  display: grid;
  gap: 7px;
  color: var(--text-strong);
  font-weight: 700;
}

.account-status {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Connecting ChatGPT: one of the two panels shows at a time. */
.connect-page [hidden] {
  display: none !important;
}

.connect-page .connect-error {
  color: var(--danger);
}

.connect-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

@media (min-width: 760px) {
  .legal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 759px) {
  .legal-shell {
    width: min(100% - 24px, 920px);
    padding-top: 24px;
  }

  .legal-header {
    flex-direction: column;
    padding: 18px;
  }

  .legal-nav {
    justify-content: flex-start;
  }

  .legal-panel {
    padding: 20px;
  }
}

/* Games grid loading skeleton ------------------------------------------- */
.game-card-skeleton {
  position: relative;
  min-height: 150px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(
    100deg,
    var(--bg-panel-soft) 30%,
    var(--bg-inset) 50%,
    var(--bg-panel-soft) 70%
  );
  background-size: 440px 100%;
  animation: shimmer 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .game-card-skeleton { animation: none; }
}

/* Copy button in the corner of the word and translation boxes (#37). */
.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--paper-line-strong);
  border-radius: 8px;
  background: rgba(255, 252, 243, 0.92);
  color: var(--paper-leather);
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease;
}

.copy-btn[hidden] {
  display: none;
}

.search-box:hover .copy-btn,
.translation-box:hover .copy-btn,
.copy-btn:focus-visible {
  opacity: 1;
}

.copy-btn:hover {
  color: var(--paper-ink);
  border-color: rgba(123, 87, 48, 0.44);
}

.copy-btn-done {
  display: none;
}

.copy-btn--done .copy-btn-icon {
  display: none;
}

.copy-btn--done .copy-btn-done {
  display: block;
  color: var(--tint-solid);
  animation: copy-btn-pop 220ms ease-out;
}

@keyframes copy-btn-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (hover: none) {
  .copy-btn {
    opacity: 1;
  }
}

/* Room for the button, so a long word does not run under it. */
.search-box .panel-word-group,
.translation-box .panel-word-group {
  padding-right: 56px;
}