:root {
  --bg-base: #080a0e;
  --bg-1: #0d1018;
  --bg-2: #121621;
  --bg-3: #1a1f2e;
  --bg-4: #222840;
  --accent: #ff2d78;
  --accent-dim: rgba(255, 45, 120, 0.12);
  --accent-glow: rgba(255, 45, 120, 0.35);
  --text-1: #f0f2ff;
  --text-2: #8a93b2;
  --text-3: #4a5270;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.12);
  --green: #00ff88;
  --green-dim: rgba(0, 255, 136, 0.12);
  --red: #ff5252;
  --red-dim: rgba(255, 82, 82, 0.12);
  --yellow: #ffcc00;
  --font-head: "Orbitron", monospace;
  --font-body: "Rajdhani", sans-serif;
  --font-mono: "Share Tech Mono", monospace;
  --shell-width: min(1380px, calc(100vw - 24px));
  --reader-width: min(1720px, calc(100vw - 20px));
  --clip-sm: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  --clip-md: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  --clip-lg: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 0 28px var(--accent-glow);
  --game-card-width: 214px;
  --game-card-height: 344px;
}

html[data-theme-accent="pink"],
body[data-theme-accent="pink"],
html[data-theme-accent="yellow"],
body[data-theme-accent="yellow"] {
  --accent: #ff2d78;
  --accent-dim: rgba(255, 45, 120, 0.12);
  --accent-glow: rgba(255, 45, 120, 0.35);
}

html[data-theme-accent="blue"],
body[data-theme-accent="blue"] {
  --accent: #00b4ff;
  --accent-dim: rgba(0, 180, 255, 0.12);
  --accent-glow: rgba(0, 180, 255, 0.35);
}

html[data-theme-accent="green"],
body[data-theme-accent="green"] {
  --accent: #00ff88;
  --accent-dim: rgba(0, 255, 136, 0.12);
  --accent-glow: rgba(0, 255, 136, 0.35);
}

html[data-theme-accent="purple"],
body[data-theme-accent="purple"] {
  --accent: #c855ff;
  --accent-dim: rgba(200, 85, 255, 0.12);
  --accent-glow: rgba(200, 85, 255, 0.35);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text-1);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at top right, var(--accent-dim), transparent 22%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.03), transparent 18%),
    linear-gradient(180deg, var(--bg-base) 0%, var(--bg-1) 26%, var(--bg-2) 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
}

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

a {
  color: inherit;
}

button {
  cursor: pointer;
}

main,
.subpage-main,
.reading-main {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
}

.page-shell,
.book-reader-shell {
  position: relative;
  z-index: 2;
}

.page-shell {
  width: var(--shell-width);
  margin: 0 auto;
  padding: 0 0 72px;
}

.reader-page-shell {
  width: var(--reader-width);
}

.book-reader-shell {
  width: min(100vw, 100%);
  min-height: 100vh;
  padding: 16px 16px 28px;
}

.book-reader-page-body,
.reader-page-body,
.game-page-body {
  background:
    radial-gradient(circle at top right, var(--accent-dim), transparent 20%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.03), transparent 18%),
    linear-gradient(180deg, var(--bg-base) 0%, var(--bg-1) 30%, var(--bg-2) 100%);
}

.auth-shell {
  padding-top: 28px;
}

.topbar,
.reading-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin-bottom: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-strong);
  background: rgba(8, 10, 14, 0.92);
  backdrop-filter: blur(12px);
}

.reading-topbar {
  padding-inline: 8px;
}

.reading-topbar-group,
.reading-topbar-actions,
.game-header-control-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar .topnav,
.reading-topbar .topnav {
  flex: 1;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.brand-home-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  clip-path: var(--clip-md);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.brand-home-mark-core {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.brand-home-lockup {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-home-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand-home-main-accent,
.brand-home-divider {
  color: var(--accent);
}

.brand-home-lockup strong,
.brand-home-lockup small {
  display: block;
}

.brand-home-lockup strong {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-1);
}

.brand-home-lockup small {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.topnav a {
  position: relative;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 6px 12px;
  clip-path: var(--clip-sm);
  transition: color 0.15s ease, background 0.15s ease;
}

.topnav a:hover,
.topnav a.active,
.topnav a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-dim);
}

.diamond-button,
.secondary-button,
.ghost-button,
.hero-button,
.nav-cta,
.turn-btn,
.friend-challenge,
.run-event-option,
.knowledge-state-button,
.knowledge-tag-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  clip-path: var(--clip-md);
  transition:
    opacity 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.diamond-button,
.nav-cta,
.turn-btn,
.friend-challenge,
.run-event-option,
.knowledge-state-button.is-active,
.knowledge-tag-button.is-active {
  color: var(--bg-base);
  background: var(--accent);
  box-shadow: var(--shadow-glow);
}

.diamond-button:hover,
.nav-cta:hover,
.turn-btn:hover,
.friend-challenge:hover,
.run-event-option:hover {
  opacity: 0.86;
  transform: translateY(-1px);
}

.secondary-button,
.ghost-button,
.hero-button.secondary,
.knowledge-state-button,
.knowledge-tag-button {
  color: var(--text-2);
  background: transparent;
  border-color: var(--line-strong);
}

.secondary-button:hover,
.ghost-button:hover,
.hero-button.secondary:hover,
.knowledge-state-button:hover,
.knowledge-tag-button:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

.ghost-button.danger {
  border-color: rgba(255, 82, 82, 0.24);
  color: #ff9f9f;
}

.ghost-button.danger:hover {
  color: white;
  border-color: var(--red);
  background: var(--red-dim);
}

.reading-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-2);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  clip-path: var(--clip-md);
}

.reading-back-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

.heart-button {
  width: 46px;
  min-width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  clip-path: var(--clip-md);
  box-shadow: var(--shadow-glow);
}

.heart-button span {
  font-size: 1rem;
  line-height: 1;
}

.square-button {
  min-height: 40px;
}

.topbar-app-button,
.topbar-game-button {
  white-space: nowrap;
}

button:disabled,
a[aria-disabled="true"],
.secondary-button:disabled,
.diamond-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
  box-shadow: none;
}

.panel,
.tool-section,
.account-card,
.overview-card,
.hero-stat,
.mini-panel,
.progress-panel,
.score-card,
.stat-card,
.deck-card,
.saved-entry-card,
.saved-pos-group,
.detail-card,
.mood-card,
.learn-card-shell,
.learn-prompt-card,
.learn-stat-card,
.book-catalog-card,
.book-catalog-cover,
.run-node-card,
.run-modifier-panel,
.run-event-panel,
.battle-hp-card,
.battle-round-card,
.battle-stage-panel,
.player-hand-panel,
.combat-log-panel,
.friend-panel,
.recall-feedback-card,
.deck-pick-card {
  background: rgba(18, 22, 33, 0.92);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.panel,
.tool-section,
.progress-panel,
.account-card,
.saved-entry-card,
.learn-card-shell,
.learn-prompt-card,
.run-modifier-panel,
.run-event-panel,
.battle-stage-panel,
.player-hand-panel,
.combat-log-panel,
.friend-panel {
  padding: 16px;
}

.section-heading,
.progress-head,
.saved-pos-group-head,
.col-head,
.game-column-head,
.study-header,
.learn-card-top,
.learn-feedback-strip,
.reading-status,
.book-page-head,
.saved-entry-head,
.result-header,
.mastery-strip,
.knowledge-column-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.section-heading.compact,
.col-head,
.game-column-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.section-heading h2,
.progress-head h2,
.saved-pos-group-head h3,
.account-card h3,
.game-column-head h3,
.overview-card h2,
.result-header h2,
.book-reader-title,
.book-catalog-copy h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.02em;
}

h1,
.hero-h1,
.page-h1 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.08;
  font-weight: 900;
  text-wrap: balance;
}

h2,
.section-heading h2,
.progress-head h2 {
  font-size: 1.15rem;
}

h3 {
  font-size: 1rem;
}

p {
  margin: 0;
}

.eyebrow,
.mini-label,
.detail-label,
.card-meta,
.book-kicker,
.player-name,
.lane-label,
.friend-status,
.hp-label,
.hero-stat-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.eyebrow::before,
.mini-label::before,
.detail-label::before,
.hero-stat-label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}

.mini-label::before,
.detail-label::before,
.hero-stat-label::before {
  width: 14px;
}

.hero-text,
.section-text,
.page-desc,
.col-desc,
.game-column-copy,
.mastery-copy,
.learn-support,
.book-meta,
.reader-selection-copy small,
.card-meta,
.overview-card p,
.knowledge-empty p,
.empty-state p,
.status-text,
.source-line {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.5;
}

.status-text,
.empty-state {
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  background: rgba(255, 255, 255, 0.015);
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 120px;
  text-align: center;
}

.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;
}

.hero,
.subpage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.home-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.home-hero,
.auth-hero {
  min-height: 100%;
}

.hero,
.subpage-hero,
.home-hero {
  padding: 18px 0 4px;
}

.hero-copy,
.hero-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-sidebar {
  display: grid;
  gap: 12px;
  width: min(280px, 100%);
}

.hero-right {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-top: 2px solid var(--accent);
  position: relative;
  overflow: hidden;
}

.hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-dim) 0%, transparent 60%);
  pointer-events: none;
}

.hero-h1 .home-hero-accent {
  color: var(--accent);
}

.hero-h1 .home-hero-dim {
  color: var(--text-2);
}

.hero-desc {
  max-width: 520px;
}

.stat-label,
.mini-list-title,
.xp-bar-label,
.prog-card-label,
.section-label,
.ov-num,
.card-type {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stat-label {
  color: var(--accent);
}

.stat-big {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1;
}

.stat-sub {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 0.92rem;
}

.mini-list-panel {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.mini-list-title {
  margin-bottom: 10px;
  color: var(--text-3);
}

.xp-bar-wrap {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
  padding: 16px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}

.xp-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.xp-bar-label {
  color: var(--text-2);
}

.xp-bar-val {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xp-bar-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  background: var(--bg-4);
}

.xp-bar-fill {
  position: relative;
  height: 100%;
  width: 0;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.xp-bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  background: rgba(255, 255, 255, 0.32);
  filter: blur(4px);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text-3);
}

.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.progress-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.prog-card {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  overflow: hidden;
}

.prog-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  width: var(--pct, 40%);
  height: 3px;
  background: var(--accent);
  opacity: 0.32;
}

.prog-card-label {
  color: var(--text-3);
}

.prog-card-val {
  font-family: var(--font-head);
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--text-1);
}

.prog-card-sub {
  color: var(--text-2);
  font-size: 0.82rem;
}

.flashcard-preview {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}

.flashcard-demo {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.home-library-shelf {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}

.home-library-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.home-library-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 148px;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.home-library-card {
  min-width: 0;
}

.home-library-card .book-meta-pct {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-preview-card {
  position: relative;
  display: grid;
  gap: 8px;
  flex-shrink: 0;
  width: 200px;
  min-height: 130px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--accent);
  background: var(--bg-3);
  overflow: hidden;
}

.home-preview-card::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent-dim);
}

.card-type {
  position: relative;
  z-index: 1;
  color: var(--accent);
}

.card-word {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-1);
}

.card-def {
  position: relative;
  z-index: 1;
  color: var(--text-2);
  font-size: 0.82rem;
  line-height: 1.45;
}

.card-xp {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.radar-section {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
}

.radar-head {
  display: grid;
  gap: 14px;
}

.radar-title {
  font-size: 1.1rem;
}

.radar-sub {
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

.radar-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-stat,
.level-badge,
.score-card,
.section-score-card {
  padding: 14px 16px;
  border-top: 2px solid var(--accent);
}

.hero-stat {
  min-width: 132px;
  text-align: center;
}

.hero-stat span,
.level-badge strong,
.score-card strong,
.stat-card-val,
.player-code,
.hero-stat-num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  color: var(--text-1);
}

.hero-stat.compact span {
  font-size: 2rem;
}

.hero-stat p,
.score-card span,
.level-badge span {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.mini-panel,
.progress-panel {
  display: grid;
  gap: 14px;
}

.mini-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mini-list li,
.definition-list li,
.note-list li,
.conjugation-list li {
  color: var(--text-2);
  line-height: 1.45;
}

.radar-wrap {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--accent);
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--accent) 14%, transparent), transparent 54%),
    rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.radar-chart {
  width: 100%;
  max-width: 340px;
  height: auto;
}

.radar-grid-level,
.radar-axis,
.radar-center-ring {
  fill: rgba(255, 255, 255, 0.018);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.radar-center-dot,
.radar-node {
  filter: drop-shadow(0 0 12px var(--accent-glow));
}

.radar-label {
  fill: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.radar-value {
  fill: var(--text-3);
  font-family: var(--font-mono);
  font-size: 8px;
}

.radar-data-shape {
  fill: url(#radarFill);
  stroke: var(--accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}

.score-grid,
.game-summary-grid,
.section-scores,
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.section-scores {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.section-score-card {
  display: grid;
  gap: 8px;
}

.section-score-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  font-size: 0.98rem;
  font-weight: 600;
}

.section-score-copy {
  display: grid;
  gap: 2px;
}

.section-score-copy strong {
  color: var(--text-1);
}

.section-score-copy small {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.section-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--section-accent, var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--section-accent, var(--accent)) 55%, transparent);
}

.overview-grid,
.account-grid,
.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.overview-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-top: 2px solid var(--accent);
}

.ov-card {
  position: relative;
  overflow: hidden;
  border-top: 0;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.ov-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0;
  background: var(--accent);
  transition: opacity 0.15s ease;
}

.ov-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15);
  background: var(--bg-3);
}

.ov-card:hover::before {
  opacity: 1;
}

.ov-num {
  color: var(--accent);
}

.ov-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ov-desc {
  color: var(--text-2);
  font-size: 0.84rem;
  line-height: 1.5;
}

.ov-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.ov-link::after {
  content: "→";
}

.overview-card a {
  color: var(--accent);
  font-family: var(--font-head);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.deck-workspace,
.game-workspace {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.deck-mini-pages,
.game-mini-pages {
  display: grid;
  gap: 16px;
}

.deck-mini-page,
.game-mini-page,
.panel-section {
  display: none;
}

.deck-mini-page.is-active,
.game-mini-page.is-active,
.panel-section.active {
  display: grid;
  gap: 16px;
}

.deck-side-panel,
.game-side-panel,
.side-panel {
  position: sticky;
  top: 74px;
  display: grid;
  gap: 12px;
}

.game-side-head,
.side-head {
  display: grid;
  gap: 8px;
}

.game-side-nav,
.side-nav {
  display: grid;
  gap: 6px;
}

.game-side-button,
.side-btn {
  position: relative;
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: left;
  border: 1px solid var(--line);
  background: transparent;
  clip-path: var(--clip-sm);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.game-side-button:hover,
.side-btn:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.02);
}

.game-side-button.is-active,
.side-btn.active {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.game-side-kicker,
.side-btn .num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.game-side-button strong,
.side-btn strong {
  color: var(--text-1);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.game-side-button small,
.side-btn small {
  color: var(--text-2);
  font-size: 0.9rem;
}

.game-side-button.is-active .game-side-kicker,
.side-btn.active .num,
.game-side-button.is-active strong,
.side-btn.active strong {
  color: var(--accent);
}

.nav-alert-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 1px solid rgba(255, 82, 82, 0.85);
  border-radius: 999px;
  background: rgba(255, 82, 82, 0.92);
  color: #fff7f7;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1;
  letter-spacing: 0.02em;
  box-shadow: 0 0 16px rgba(255, 82, 82, 0.35);
  pointer-events: none;
}

.game-side-button .nav-alert-badge,
.side-btn .nav-alert-badge {
  top: 10px;
  right: 10px;
}

.game-invite-toast-host {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 240;
  width: min(460px, calc(100vw - 24px));
  transform: translate(-50%, -18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.game-invite-toast-host.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.game-invite-toast {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 82, 82, 0.42);
  background: rgba(15, 18, 28, 0.94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32), 0 0 20px rgba(255, 82, 82, 0.18);
  clip-path: var(--clip-md);
}

.game-invite-toast strong {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd6d6;
}

.game-invite-toast span {
  color: var(--text-1);
  font-size: 0.95rem;
}

.lookup-form,
.account-form,
.reader-action-buttons,
.card-actions,
.study-controls,
.knowledge-controls,
.learn-controls,
.battle-result-actions,
.hero-actions,
.battle-stage-badges,
.run-event-options,
.recall-options,
.topbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lookup-form {
  align-items: stretch;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  background: var(--bg-3);
  color: var(--text-1);
  outline: none;
  font-size: 1rem;
  letter-spacing: 0.03em;
}

textarea {
  min-height: 120px;
  padding-block: 12px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-dim);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-3);
}

.lookup-form input {
  flex: 1 1 300px;
}

.chip-row,
.battle-energy-row,
.study-source-row,
.learn-mode-strip,
.learn-feedback-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip,
.battle-stage-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  clip-path: var(--clip-sm);
}

.lookup-result,
.study-area,
.deck-list,
.my-deck-groups,
.learn-session,
.game-arena,
.game-run-map {
  display: grid;
  gap: 14px;
}

.result-shell,
.study-card {
  display: grid;
  gap: 16px;
}

.result-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.translation-line strong,
.mastery-title,
.friend-name,
.recall-question span {
  color: var(--accent);
}

.details-grid,
.moods-grid,
.builder-grid,
.game-builder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-card,
.mood-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-top: 2px solid var(--accent);
}

.definition-list,
.note-list,
.conjugation-list {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  margin: 0;
}

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

.mastery-strip,
.knowledge-panel {
  padding: 14px;
  border: 1px solid var(--accent);
  background: linear-gradient(180deg, var(--accent-dim), rgba(255, 255, 255, 0.02));
}

.knowledge-panel {
  display: grid;
  gap: 12px;
}

.deck-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.knowledge-column {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(18, 22, 33, 0.92);
}

.knowledge-card-stack,
.saved-card-grid,
.combat-log-list,
.friend-list {
  display: grid;
  gap: 10px;
}

.deck-card,
.saved-entry-card,
.deck-pick-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-left: 2px solid var(--accent);
}

.deck-card h3,
.saved-entry-head h3,
.deck-pick-card h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
}

.knowledge-mini-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.saved-pos-group {
  overflow: hidden;
}

.saved-pos-group summary {
  list-style: none;
  cursor: pointer;
  padding: 16px;
}

.saved-pos-group summary::-webkit-details-marker {
  display: none;
}

.saved-pos-group[open] .saved-pos-chevron {
  transform: rotate(180deg);
}

.saved-pos-group-head-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.saved-pos-chevron {
  color: var(--accent);
  transition: transform 0.15s ease;
}

.saved-card-scroll {
  padding: 0 16px 16px;
}

.saved-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.flashcard-shell {
  perspective: 1200px;
}

.flashcard {
  position: relative;
  min-height: 320px;
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
}

.flashcard.is-flipped {
  transform: rotateY(180deg);
}

.flashcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: grid;
  gap: 14px;
  align-content: center;
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    rgba(18, 22, 33, 0.96);
  text-align: center;
}

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

.flashcard-face h3,
.flashcard-face p {
  margin-inline: auto;
}

.learn-session {
  gap: 16px;
}

.learn-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.learn-stat-card {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.learn-stat-card.is-current {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.learn-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.learn-choice-grid button {
  justify-content: flex-start;
  text-align: left;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-1);
  clip-path: var(--clip-sm);
}

.learn-choice-grid button:hover {
  border-color: var(--accent);
}

.learn-choice-grid button.is-selected,
.learn-choice-grid button.is-correct {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.learn-choice-grid button.is-wrong {
  border-color: var(--red);
  background: var(--red-dim);
}

.choice-marker {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.learn-feedback-strip,
.recall-feedback-card,
.recall-panel {
  padding: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
}

.learn-feedback-strip.is-correct,
.recall-feedback-card.is-correct {
  border-color: rgba(0, 255, 136, 0.28);
  background: var(--green-dim);
}

.learn-feedback-strip.is-wrong,
.recall-feedback-card.is-wrong {
  border-color: rgba(255, 82, 82, 0.28);
  background: var(--red-dim);
}

.library-panel,
.pdf-panel,
.account-panel,
.learn-panel {
  display: grid;
  gap: 16px;
}

.library-screen {
  gap: 22px;
}

.lib-title {
  font-size: 1.5rem;
  text-transform: uppercase;
}

.lib-hero,
.filter-strip,
.shelf-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.lib-hero-left,
.lib-hero-right,
.filter-right,
.shelf-label-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lib-hero-left {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

.search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  background: rgba(18, 22, 33, 0.92);
  clip-path: var(--clip-sm);
}

.search-wrap input {
  width: 220px;
  min-height: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.search-icon {
  font-size: 0.88rem;
  color: var(--text-3);
}

.btn-ghost,
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 38px;
  padding: 0 16px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-head);
  font-size: 0.64rem;
  font-weight: 700;
  clip-path: var(--clip-sm);
}

.btn-ghost {
  color: var(--text-2);
  border: 1px solid var(--line-strong);
  background: transparent;
}

.btn-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

.btn-accent {
  color: var(--bg-base);
  border: 0;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent-glow);
}

.btn-accent:hover {
  opacity: 0.88;
}

.lib-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.lib-stat {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  background: rgba(18, 22, 33, 0.92);
  box-shadow: var(--shadow-soft);
}

.lib-stat.is-green {
  border-top-color: var(--green);
}

.lib-stat.is-green .lib-stat-val {
  color: var(--green);
}

.lib-stat-val {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 900;
}

.lib-stat-label,
.shelf-tag,
.shelf-count,
.shelf-more,
.book-cover-author,
.book-meta-words,
.continue-eyebrow,
.continue-author,
.continue-progress-labels span,
.continue-words-label,
.book-list-author,
.book-list-pct,
.book-list-words,
.book-list-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.lib-stat-label,
.shelf-count,
.continue-author,
.continue-words-label,
.book-list-author,
.book-list-pct {
  color: var(--text-3);
}

.filter-strip {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.filter-tabs,
.view-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.ftab,
.view-btn {
  border: 1px solid transparent;
  background: transparent;
}

.ftab {
  padding: 6px 13px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 700;
  clip-path: var(--clip-sm);
}

.ftab:hover {
  color: var(--text-1);
  background: var(--bg-3);
}

.ftab.active {
  color: var(--accent);
  border-color: rgba(255, 255, 255, 0.04);
  background: var(--accent-dim);
}

.sort-select {
  width: auto;
  min-height: 34px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.view-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  border-color: var(--line);
  background: var(--bg-2);
}

.divider {
  height: 1px;
  background: var(--line);
}

.side-head-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.side-head-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
}

.side-head-desc {
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.45;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 68, 68, 0.35);
  background: rgba(255, 68, 68, 0.08);
  color: var(--red);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-head);
  font-size: 0.64rem;
  font-weight: 700;
  clip-path: var(--clip-sm);
}

.btn-danger:hover {
  border-color: rgba(255, 68, 68, 0.55);
  background: rgba(255, 68, 68, 0.12);
}

.flashcards-page .flashcards-main {
  display: grid;
  gap: 20px;
}

.flashcards-page .page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.flashcards-page .page-h1 {
  font-size: clamp(1.7rem, 4vw, 2.15rem);
}

.flashcards-page .page-desc {
  max-width: 500px;
  font-size: 0.92rem;
}

.flashcards-page .hero-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.flashcards-page .hero-stat {
  min-width: 118px;
  background: rgba(18, 22, 33, 0.92);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  box-shadow: var(--shadow-soft);
}

.flashcards-page .hero-stat-num {
  font-size: clamp(1.8rem, 4vw, 2.1rem);
}

.flashcards-page .hero-stat-label {
  display: block;
  color: var(--accent);
  font-size: 0.56rem;
}

.flashcards-page .hero-stat-label::before {
  display: none;
}

.flashcards-hero-stat-success {
  border-top-color: var(--green);
}

.flashcards-hero-stat-success .hero-stat-num,
.flashcards-hero-stat-success .hero-stat-label {
  color: var(--green);
}

.flashcards-hero-stat-warn {
  border-top-color: var(--yellow);
}

.flashcards-hero-stat-warn .hero-stat-num,
.flashcards-hero-stat-warn .hero-stat-label {
  color: var(--yellow);
}

.flashcards-workspace {
  align-items: start;
}

.flashcards-sidebar {
  padding: 16px;
  background: rgba(18, 22, 33, 0.94);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.flashcards-side-head,
.flashcards-side-section {
  display: grid;
  gap: 8px;
}

.side-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.side-btn.is-active .num,
.side-btn.is-active strong {
  color: var(--accent);
}

.flashcards-breakdown-label {
  margin-bottom: 2px;
}

.flashcards-mastery-breakdown {
  display: grid;
  gap: 8px;
}

.mastery-item {
  display: grid;
  gap: 4px;
}

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

.mastery-label,
.mastery-val {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mastery-label {
  color: var(--text-3);
}

.mastery-track {
  height: 4px;
  background: var(--bg-4);
  overflow: hidden;
}

.mastery-fill {
  height: 100%;
}

.flashcards-streak-value {
  font-family: var(--font-head);
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 18px var(--accent-glow);
}

.flashcards-streak-meta {
  color: var(--text-3);
  font-size: 0.78rem;
  line-height: 1.45;
}

.flashcards-clear-button {
  width: 100%;
}

.flashcards-main-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flashcards-page .panel-section,
.flashcards-page .deck-mini-page {
  display: none;
}

.flashcards-page .panel-section.is-active,
.flashcards-page .deck-mini-page.is-active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flashcards-page .sec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.flashcards-page .sec-title {
  margin: 4px 0 0;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
}

.flashcards-page .sec-desc {
  max-width: 560px;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.45;
}

.flashcards-stats-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.flashcards-stat-learning {
  border-top-color: var(--yellow);
}

.flashcards-stat-learning .stat-card-val {
  color: var(--yellow);
}

.flashcards-stat-mastered {
  border-top-color: var(--green);
}

.flashcards-stat-mastered .stat-card-val {
  color: var(--green);
}

.flashcards-stat-due {
  border-top-color: var(--red);
}

.flashcards-stat-due .stat-card-val {
  color: var(--red);
}

.flashcards-lookup-form {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(18, 22, 33, 0.92);
}

.flashcards-lookup-form input {
  flex: 1 1 320px;
}

.flashcards-status-text {
  padding: 10px 14px;
}

.flashcards-lookup-result {
  min-height: 110px;
}

.flashcards-lookup-result.is-collapsed {
  display: none;
}

.flashcard-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.flashcard-detail-modal.is-open {
  display: flex;
}

.flashcard-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 18, 0.74);
  backdrop-filter: blur(8px);
}

.flashcard-detail-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(860px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 40px));
  overflow: hidden;
  padding: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5), 0 0 34px var(--accent-glow);
}

.flashcard-detail-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.flashcard-detail-content {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding-right: 6px;
}

body.has-modal-open {
  overflow: hidden;
}

.flashcards-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: rgba(18, 22, 33, 0.92);
}

.flashcards-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.fc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--accent);
  background: rgba(26, 31, 46, 0.98);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.fc::after {
  content: "";
  position: absolute;
  top: -24px;
  right: -24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-dim);
}

.fc:hover,
.fc:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 24px var(--accent-glow);
  outline: none;
}

.fc.mastered {
  border-top-color: var(--green);
}

.fc.mastered::after {
  background: rgba(0, 255, 136, 0.08);
}

.fc.mastered .fc-type {
  color: var(--green);
}

.fc.learning {
  border-top-color: var(--yellow);
}

.fc.learning::after {
  background: rgba(255, 204, 0, 0.08);
}

.fc.learning .fc-type {
  color: var(--yellow);
}

.fc-type {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.fc-word {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-1);
}

.fc-def {
  position: relative;
  z-index: 1;
  flex: 1;
  color: var(--text-2);
  font-size: 0.83rem;
  line-height: 1.45;
}

.fc-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.fc-xp {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--green);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fc-mastery {
  display: flex;
  gap: 4px;
}

.fc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-4);
}

.fc-dot.filled {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 4px var(--accent-glow);
}

.fc-dot.done {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 4px rgba(0, 255, 136, 0.4);
}

.study-arena {
  align-items: center;
  padding: 32px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  background: rgba(18, 22, 33, 0.94);
  gap: 24px;
}

.study-hud {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.study-progress-wrap {
  flex: 1;
}

.study-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.study-progress-label,
.study-progress-val,
.study-counter,
.session-xp-label,
.flashcards-inline-meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.study-progress-label {
  color: var(--text-3);
}

.study-progress-val {
  color: var(--accent);
}

.study-progress-track {
  height: 5px;
  background: var(--bg-4);
}

.study-progress-fill {
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.study-counter {
  color: var(--text-1);
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.flip-card-wrap {
  width: 100%;
  max-width: 540px;
  perspective: 1000px;
}

.flip-card {
  width: 100%;
  cursor: pointer;
  position: relative;
}

.flip-front,
.flip-back {
  position: relative;
  display: none;
  min-height: 280px;
  padding: 40px 36px;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  background: rgba(26, 31, 46, 0.98);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  text-align: center;
}

.flip-front::before,
.flip-back::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--accent-dim);
}

.flip-front::after {
  content: "\25B8 TAP TO FLIP";
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.flip-back {
  border-top-color: var(--green);
}

.flip-back::before {
  background: rgba(0, 255, 136, 0.08);
}

.flip-card:not(.flipped) .flip-front,
.flip-card.flipped .flip-back {
  display: flex;
}

.flip-card-type {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.flip-back .flip-card-type {
  color: var(--green);
}

.flip-card-word {
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 5vw, 2.25rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--text-1);
  text-align: center;
}

.flip-card-hint {
  font-family: var(--font-mono);
  font-size: 0.81rem;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.flip-card-def {
  max-width: 380px;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}

.flip-card-example {
  width: 100%;
  padding: 10px 14px;
  border-left: 2px solid var(--green);
  background: var(--bg-4);
  color: var(--text-2);
  font-size: 0.84rem;
  font-style: italic;
  line-height: 1.5;
  text-align: left;
}

.flip-card-example em {
  color: var(--green);
  font-style: normal;
}

.answer-row {
  width: 100%;
  max-width: 540px;
  display: flex;
  gap: 10px;
}

.ans-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border: 1px solid;
  clip-path: var(--clip-sm);
  font-family: var(--font-head);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 8px;
}

.ans-btn small {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
}

.ans-no {
  color: var(--red);
  background: rgba(255, 68, 68, 0.08);
  border-color: rgba(255, 68, 68, 0.35);
}

.ans-hard {
  color: var(--yellow);
  background: rgba(255, 204, 0, 0.08);
  border-color: rgba(255, 204, 0, 0.35);
}

.ans-ok {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.ans-yes {
  color: var(--green);
  background: rgba(0, 255, 136, 0.08);
  border-color: rgba(0, 255, 136, 0.35);
}

.flashcards-study-controls {
  width: 100%;
  max-width: 540px;
  align-items: center;
  justify-content: space-between;
}

.study-ctrl-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ctrl-btn {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  clip-path: var(--clip-sm);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ctrl-btn:hover {
  color: var(--text-1);
  border-color: var(--line-strong);
}

.session-xp {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--green);
}

.session-xp-label {
  color: var(--text-3);
}

.session-xp-value {
  font-family: var(--font-head);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--green);
}

.learn-card {
  display: grid;
  gap: 20px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  background: rgba(18, 22, 33, 0.94);
}

.learn-question-label {
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.learn-question {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 900;
  color: var(--text-1);
}

.learn-question-sub {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.55;
}

.learn-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.choice-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  background: rgba(26, 31, 46, 0.98);
  text-align: left;
  cursor: pointer;
  clip-path: var(--clip-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.choice-btn:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.choice-btn.correct {
  border-color: var(--green);
  background: rgba(0, 255, 136, 0.08);
}

.choice-btn.wrong {
  border-color: var(--red);
  background: rgba(255, 68, 68, 0.08);
}

.choice-key {
  width: 20px;
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
}

.choice-btn.correct .choice-key {
  color: var(--green);
}

.choice-text {
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.45;
}

.choice-btn.correct .choice-text {
  color: var(--text-1);
}

.learn-feedback-panel {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.learn-feedback-panel.is-correct {
  border-color: rgba(0, 255, 136, 0.28);
  background: rgba(0, 255, 136, 0.08);
}

.learn-feedback-panel.is-wrong {
  border-color: rgba(255, 68, 68, 0.28);
  background: rgba(255, 68, 68, 0.08);
}

.learn-feedback-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
}

.learn-feedback-copy {
  color: var(--text-2);
  line-height: 1.5;
}

.learn-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.learn-streak {
  display: flex;
  align-items: center;
  gap: 6px;
}

.streak-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.streak-dot.off {
  background: var(--bg-4);
  border: 1px solid var(--line);
  box-shadow: none;
}

.streak-label {
  color: var(--green);
}

.flashcards-inline-meta {
  color: var(--text-3);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.srs-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  background: rgba(18, 22, 33, 0.94);
}

.srs-card.is-clickable {
  cursor: pointer;
}

.srs-card.mastered {
  border-top-color: var(--green);
}

.srs-card.learning {
  border-top-color: var(--yellow);
}

.srs-card-top,
.srs-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.srs-card-word {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
}

.srs-card-def {
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

.flashcards-page .result-shell,
.flashcards-page .study-card,
.flashcards-page .detail-card {
  background: rgba(18, 22, 33, 0.92);
}

@media (max-width: 980px) {
  .flashcards-page .page-hero,
  .flashcards-page .sec-head,
  .flashcards-filter-bar,
  .learn-hud,
  .study-hud,
  .flashcards-study-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .flashcards-stats-row,
  .learn-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .answer-row {
    flex-wrap: wrap;
  }

  .run-map-topline {
    flex-direction: column;
    align-items: flex-start;
  }

  .map-tier-row {
    width: min(100%, calc(var(--tier-max-nodes) * 76px + max(0, var(--tier-max-nodes) - 1) * 26px));
  }

  .flashcard-detail-modal {
    padding: 12px;
  }

  .flashcard-detail-dialog {
    width: min(100vw - 16px, 860px);
    max-height: calc(100vh - 16px);
    padding: 14px;
  }
}

@media (max-width: 760px) {
  .flashcards-stats-row,
  .learn-choices,
  .review-grid {
    grid-template-columns: 1fr;
  }

  .study-arena,
  .learn-card {
    padding: 22px 18px;
  }

  .flip-front,
  .flip-back {
    min-height: 250px;
    padding: 28px 20px;
  }

  .search-wrap input {
    width: 100%;
  }

  .run-map-wrap {
    padding: 16px 12px;
  }

  .run-map-status-copy {
    margin-bottom: 6px;
  }

  .map-node {
    padding-left: 8px;
    padding-right: 8px;
  }

  .map-tier-row {
    width: min(100%, calc(var(--tier-max-nodes) * 62px + max(0, var(--tier-max-nodes) - 1) * 16px));
  }

  .map-line {
    max-width: 18px;
  }
}

.view-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

.continue-card {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  background: rgba(18, 22, 33, 0.92);
  box-shadow: var(--shadow-soft);
}

.continue-card::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 220px;
  background: linear-gradient(90deg, transparent, var(--accent-dim));
  pointer-events: none;
}

.continue-thumb {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 138px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  background: var(--bg-3);
}

.continue-thumb img,
.library-book-cover img,
.book-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.continue-thumb-glow,
.book-cover-glow,
.book-list-thumb-glow {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(22px);
  opacity: 0.18;
}

.continue-thumb-glow {
  top: -16px;
  right: -16px;
  width: 72px;
  height: 72px;
}

.continue-thumb-title {
  position: absolute;
  inset: auto 8px 8px 8px;
  font-family: var(--font-head);
  font-size: 0.64rem;
  line-height: 1.3;
}

.continue-info,
.continue-actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
}

.continue-title,
.shelf-title,
.book-cover-title,
.book-list-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text-1);
}

.continue-title {
  font-size: 1.15rem;
  line-height: 1.2;
}

.continue-chapter,
.book-meta-pct {
  color: var(--text-2);
}

.continue-progress-wrap {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.continue-progress-track,
.book-list-bar-track {
  height: 4px;
  background: var(--bg-4);
}

.continue-progress-fill,
.book-list-bar-fill,
.cover-progress-fill {
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.continue-progress-labels {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.continue-progress-labels .hi {
  color: var(--accent);
}

.continue-actions {
  align-items: stretch;
  min-width: 164px;
}

.continue-actions .btn-accent,
.continue-actions .btn-ghost {
  width: 100%;
}

.continue-words {
  font-family: var(--font-head);
  font-size: 1rem;
  text-align: right;
  color: var(--green);
}

.shelf-section {
  display: grid;
  gap: 14px;
}

.shelf-tag {
  padding: 3px 8px;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.shelf-more {
  color: var(--accent);
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 16px;
}

.book-list {
  display: grid;
  gap: 8px;
}

.library-book-card {
  display: grid;
  gap: 8px;
}

.library-book-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 12px 10px;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  background: var(--bg-3);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.library-book-cover:hover,
.book-list-row:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}

.library-book-cover.has-image {
  padding: 0;
}

.library-book-cover.tone-blue,
.book-list-thumb.tone-blue {
  --cover-tone: #00b4ff;
}

.library-book-cover.tone-green,
.book-list-thumb.tone-green {
  --cover-tone: #00ff88;
}

.library-book-cover.tone-purple,
.book-list-thumb.tone-purple {
  --cover-tone: #c855ff;
}

.library-book-cover.tone-pink,
.book-list-thumb.tone-pink,
.library-book-cover,
.book-list-thumb {
  --cover-tone: var(--accent);
}

.book-cover-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.45));
  opacity: 0.3;
}

.book-cover-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 12px 12px;
}

.book-cover-glow {
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  background: var(--cover-tone);
}

.book-cover-label,
.book-list-badge {
  position: relative;
  z-index: 2;
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
}

.book-cover-label {
  position: absolute;
  top: 8px;
  right: 8px;
}

.label-reading {
  color: var(--green);
  border-color: var(--green);
  background: rgba(0, 255, 136, 0.12);
}

.label-new {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

.library-book-cover-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2px;
}

.book-cover-title {
  font-size: 0.72rem;
  line-height: 1.25;
}

.book-cover-author {
  color: var(--accent);
}

.cover-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--bg-4);
}

.library-book-meta {
  display: grid;
  gap: 2px;
}

.book-meta-words {
  color: var(--green);
}

.book-list-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 120px 86px auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: rgba(18, 22, 33, 0.92);
  clip-path: var(--clip-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.book-list-thumb {
  position: relative;
  width: 36px;
  height: 54px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--accent);
  background: var(--bg-3);
}

.book-list-thumb-glow {
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  background: var(--cover-tone);
}

.book-list-info {
  min-width: 0;
}

.book-list-title {
  font-size: 0.84rem;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-list-progress-wrap {
  display: grid;
  gap: 4px;
}

.file-dropzone {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 24px;
  border: 1px dashed var(--accent);
  background: linear-gradient(180deg, var(--accent-dim), rgba(255, 255, 255, 0.02));
  text-align: center;
  color: var(--text-2);
  clip-path: var(--clip-md);
}

.file-dropzone input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pdf-quick-action,
.reading-quick-action {
  position: sticky;
  bottom: 18px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  background: rgba(13, 16, 24, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glow);
}

.reader-selection-copy {
  display: grid;
  gap: 4px;
}

.reader-selection-copy span,
.reader-page-indicator {
  font-family: var(--font-head);
  font-size: 0.9rem;
}

.reader-pages {
  display: grid;
  gap: 16px;
}

.book-reader-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.book-reader-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.reader-spread-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.reader-turn-zone {
  width: 54px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-2);
  clip-path: var(--clip-sm);
}

.reader-turn-zone:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.book-reader-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.page-card,
.book-page {
  min-height: 70vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    rgba(18, 22, 33, 0.94);
}

.book-page-head {
  align-items: center;
}

.reader-page-content {
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.reader-page-placeholder {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.paper-text {
  color: var(--text-1);
  font-size: 1.06rem;
  line-height: 1.85;
}

.reader-word {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.reader-word:hover,
.reader-word.selected {
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
}

.reader-punctuation,
.reader-space {
  color: inherit;
}

.reader-page-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reading-status {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.reading-stage {
  display: grid;
  gap: 16px;
}

.book-reader-shell {
  padding-bottom: 132px;
}

.reader-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.reader-breadcrumb strong,
.reader-breadcrumb span,
.reader-breadcrumb a:hover {
  color: var(--accent);
}

.reader-breadcrumb-sep {
  color: var(--text-3);
}

.reader-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.reader-strip-stat {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    rgba(18, 22, 33, 0.9);
}

.reader-strip-stat-success {
  border-top-color: #49ffb3;
}

.reader-strip-stat-value {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--text-1);
  letter-spacing: 0.02em;
}

.reader-strip-stat-value span {
  margin-left: 2px;
  font-size: 0.78rem;
  color: var(--text-2);
}

.reader-strip-stat-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reader-layout-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}

.reader-book-sidebar,
.reader-utility-sidebar {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 84px;
}

.reader-book-sidebar {
  max-height: calc(100vh - 228px);
  overflow: auto;
  padding-right: 2px;
}

.reader-book-sidebar::-webkit-scrollbar {
  width: 4px;
}

.reader-book-sidebar::-webkit-scrollbar-thumb {
  background: var(--accent-dim);
}

.reader-stage-immersive {
  gap: 12px;
}

.reader-side-card,
.reader-book-sidebar {
  padding: 14px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    rgba(18, 22, 33, 0.9);
}

.reader-panel-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
}

.reader-book-cover-mini {
  position: relative;
  display: flex;
  align-items: end;
  min-height: 248px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  background:
    linear-gradient(180deg, rgba(10, 12, 18, 0.1), rgba(10, 12, 18, 0.82)),
    linear-gradient(135deg, var(--accent-dim), rgba(255, 255, 255, 0.02));
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.reader-book-cover-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 25%, rgba(8, 10, 14, 0.85));
  pointer-events: none;
}

.reader-book-cover-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
}

.reader-book-cover-content strong {
  font-family: var(--font-head);
  font-size: 0.92rem;
  line-height: 1.25;
}

.reader-book-cover-content small {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reader-progress-wrap,
.reader-book-meta {
  display: grid;
  gap: 6px;
}

.reader-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reader-progress-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.reader-progress-pct {
  font-family: var(--font-head);
  font-size: 0.88rem;
  color: var(--accent);
}

.reader-progress-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.reader-progress-fill {
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.reader-divider {
  height: 1px;
  background: var(--line);
}

.reader-segment-list {
  display: grid;
  gap: 4px;
}

.reader-segment-status {
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.78rem;
  color: var(--text-3);
  clip-path: var(--clip-sm);
}

.reader-segment-item {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-2);
  text-align: left;
  clip-path: var(--clip-sm);
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 140ms ease;
}

.reader-segment-item:hover {
  border-color: var(--line-strong);
  color: var(--text-1);
  transform: translateX(2px);
}

.reader-segment-item.is-active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--text-1);
}

.reader-segment-item span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reader-segment-item strong {
  font-size: 0.84rem;
  font-weight: 700;
}

.reader-book-meta p {
  font-size: 0.82rem;
  color: var(--text-2);
}

.reader-utility-sidebar .reading-quick-action {
  position: static;
  bottom: auto;
  z-index: auto;
  flex-direction: column;
  align-items: stretch;
  padding: 14px;
}

.reader-utility-sidebar .reader-action-buttons {
  display: grid;
  gap: 8px;
}

.reader-toolbar-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    rgba(18, 22, 33, 0.9);
}

.reader-toolbar-copy {
  display: grid;
  gap: 4px;
}

.reader-toolbar-page {
  display: grid;
  justify-items: end;
  gap: 4px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.reader-toolbar-page span {
  font-size: 0.64rem;
  color: var(--text-3);
}

.reader-toolbar-page strong {
  font-size: 0.78rem;
  color: var(--accent);
}

.reader-lookup-shell,
.reader-saved-shell {
  display: grid;
  gap: 10px;
}

.reader-lookup-word {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.15;
}

.reader-lookup-type,
.reader-lookup-tags span,
.reader-saved-row small {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reader-lookup-type {
  color: var(--accent);
}

.reader-lookup-def,
.reader-lookup-translation {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-2);
}

.reader-lookup-translation strong {
  color: var(--text-1);
}

.reader-lookup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reader-lookup-tags span {
  padding: 4px 7px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-3);
}

.reader-saved-list {
  display: grid;
  gap: 6px;
}

.reader-saved-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-1);
  text-align: left;
  clip-path: var(--clip-sm);
  transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
}

.reader-saved-row:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: translateY(-1px);
}

.reader-saved-row strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.9rem;
}

.reader-saved-row small {
  color: var(--accent);
}

.reader-saved-row span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: #49ffb3;
  white-space: nowrap;
}

.reader-side-empty {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-2);
}

.reader-audio-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 78px;
  padding: 12px 18px;
  border-top: 1px solid var(--line-strong);
  background: rgba(8, 10, 14, 0.96);
  backdrop-filter: blur(16px);
}

.reader-audio-track {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}

.reader-audio-art {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  width: 44px;
  height: 44px;
  padding: 10px 8px;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  clip-path: var(--clip-sm);
}

.reader-audio-art span {
  width: 3px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  border-radius: 999px;
  animation: readerAudioPulse 0.9s ease-in-out infinite alternate;
}

.reader-audio-art span:nth-child(1) { height: 12px; animation-delay: 0s; }
.reader-audio-art span:nth-child(2) { height: 18px; animation-delay: 0.12s; }
.reader-audio-art span:nth-child(3) { height: 10px; animation-delay: 0.22s; }
.reader-audio-art span:nth-child(4) { height: 16px; animation-delay: 0.08s; }
.reader-audio-art span:nth-child(5) { height: 8px; animation-delay: 0.18s; }

@keyframes readerAudioPulse {
  from { transform: scaleY(0.45); }
  to { transform: scaleY(1); }
}

.reader-audio-meta {
  display: grid;
  gap: 3px;
}

.reader-audio-meta strong {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.reader-audio-meta small,
.reader-audio-helper {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--text-2);
}

.reader-audio-player-wrap {
  display: grid;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.reader-audio-player {
  width: 100%;
  min-width: 220px;
  height: 40px;
  filter: hue-rotate(-12deg) saturate(1.15);
}

.reader-audio-player.is-empty {
  opacity: 0.4;
  pointer-events: none;
}

.reader-audio-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.account-card {
  display: grid;
  gap: 12px;
}

.account-form {
  display: grid;
  gap: 10px;
}

.account-storage-meter {
  position: relative;
  height: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  clip-path: var(--clip-sm);
}

.account-storage-fill {
  height: 100%;
  width: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 72%, #ffffff 10%), color-mix(in srgb, var(--accent) 48%, transparent)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 12px, transparent 12px 20px);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: width 180ms ease;
}

.account-storage-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-2);
  font-family: "Share Tech Mono", monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.theme-accent-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.theme-accent-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-2);
  clip-path: var(--clip-sm);
}

.theme-accent-option.is-active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.theme-accent-chip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.theme-accent-option[data-theme-accent="pink"] .theme-accent-chip {
  color: #ff2d78;
}

.theme-accent-option[data-theme-accent="blue"] .theme-accent-chip {
  color: #00b4ff;
}

.theme-accent-option[data-theme-accent="green"] .theme-accent-chip {
  color: #00ff88;
}

.theme-accent-option[data-theme-accent="purple"] .theme-accent-chip {
  color: #c855ff;
}

.game-builder-flow,
.flow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.game-builder-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.game-column-actions,
.game-sort-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.game-sort-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.game-sort-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.game-sort-select {
  min-width: 138px;
}

.game-flow-step,
.flow-step {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(18, 22, 33, 0.92);
}

.game-flow-step span,
.flow-num {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent);
  opacity: 0.55;
}

.game-card-grid,
.game-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--game-card-width), var(--game-card-width)));
  gap: 12px;
  justify-content: start;
  align-items: start;
  max-height: min(68vh, 920px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  align-content: start;
}

.game-card-groups,
.game-deck-groups {
  display: grid;
  gap: 18px;
  max-height: min(68vh, 920px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  align-content: start;
  isolation: isolate;
}

.game-card-grid::-webkit-scrollbar,
.game-deck-grid::-webkit-scrollbar,
.game-card-groups::-webkit-scrollbar,
.game-deck-groups::-webkit-scrollbar {
  width: 10px;
}

.game-card-grid::-webkit-scrollbar-thumb,
.game-deck-grid::-webkit-scrollbar-thumb,
.game-card-groups::-webkit-scrollbar-thumb,
.game-deck-groups::-webkit-scrollbar-thumb {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
}

.game-card-group {
  display: grid;
  gap: 12px;
}

.game-card-group-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.game-card-group-head h4 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 0.94rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-card-group-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

.game-card-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--game-card-width), var(--game-card-width)));
  gap: 12px;
  justify-content: start;
  align-items: start;
  overflow: visible;
}

.tcg-card {
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --hover-y: 0px;
  --card-scale: 1;
  position: relative;
  z-index: 1;
  width: min(100%, var(--game-card-width));
  aspect-ratio: 214 / 344;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--accent);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 18%, transparent), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(26, 31, 46, 0.96);
  overflow: hidden;
  transform:
    perspective(1000px)
    translate3d(var(--base-x, 0px), calc(var(--base-y, 0px) + var(--hover-y)), 0)
    rotateX(var(--rotate-x))
    rotateY(var(--rotate-y))
    scale(var(--card-scale));
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
  flex: 0 0 auto;
}

.tcg-card:hover {
  z-index: 12;
  border-color: var(--accent);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.32), 0 0 24px var(--accent-glow);
}

.tcg-card.is-ability-affected {
  border-color: #e7c45a;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.32), 0 0 18px rgba(231, 196, 90, 0.35);
}

.tcg-card.is-ability-affected .tcg-card-frame {
  border-color: rgba(231, 196, 90, 0.78);
  box-shadow: inset 0 0 0 1px rgba(231, 196, 90, 0.22);
}

.tcg-card.is-ability-affected .tcg-card-backdrop {
  border-color: rgba(231, 196, 90, 0.24);
}

.tcg-card.is-face-down-card {
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--accent) 14%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
    rgba(18, 22, 33, 0.98);
}

.tcg-card.is-foil-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 32%,
      rgba(255, 255, 255, 0.16) 50%,
      rgba(255, 255, 255, 0.04) 68%,
      transparent 100%
    );
  pointer-events: none;
  mix-blend-mode: screen;
}

.tcg-card-backdrop,
.tcg-card-overlay,
.tcg-card-foil,
.tcg-card-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tcg-card-backdrop {
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.tcg-card-overlay {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.24), transparent 30%);
}

.tcg-card-frame {
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tcg-card-inner,
.tcg-card-back-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto minmax(78px, 1fr) auto auto;
  gap: 10px;
  min-height: 100%;
  padding: 14px;
}

.tcg-card-topline,
.tcg-card-footer,
.tcg-action-row,
.tcg-lane-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.tcg-card-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  padding-bottom: 2px;
}

.pixel-mini-panel,
.tcg-type-pill,
.tcg-corner-gem,
.tcg-corner-rank,
.tcg-stat-badge {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-2);
  clip-path: var(--clip-sm);
}

.tcg-corner-gem,
.tcg-corner-rank,
.tcg-type-pill {
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tcg-title-band {
  display: grid;
  gap: 8px;
  align-content: start;
}

.pixel-title-stack h4 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(0.86rem, 1.8vw, 1rem);
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.tcg-card-body {
  display: grid;
  align-content: start;
  min-height: 0;
}

.tcg-art-panel {
  min-height: 72px;
  height: 100%;
  border: 1px dashed var(--line-strong);
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--accent) 18%, transparent), transparent 54%),
    rgba(255, 255, 255, 0.015);
}

.tcg-ability-strip {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  align-content: start;
}

.tcg-rule-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.tcg-ability-strip strong {
  color: var(--text-1);
  font-size: clamp(0.75rem, 1.7vw, 0.88rem);
  line-height: 1.16;
}

.tcg-stat-badge {
  display: grid;
  gap: 2px;
  padding: 7px 9px 9px;
  min-width: 0;
  width: 100%;
  text-align: center;
  align-content: start;
}

.game-deck-builder-card {
  border-left: 1px solid var(--line-strong);
}

.tcg-stat-badge span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

.tcg-stat-badge strong {
  font-family: var(--font-head);
  font-size: 1rem;
  line-height: 1.1;
}

.tcg-card-back-core {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 100%;
  gap: 12px;
  text-align: center;
}

.tcg-card-back-emblem {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  clip-path: var(--clip-md);
  box-shadow: 0 0 20px var(--accent-glow);
}

.tcg-card-back-emblem span {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.tcg-card-back-copy {
  display: grid;
  gap: 4px;
}

.tcg-card-back-copy strong {
  font-family: var(--font-head);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tcg-card-back-copy p {
  color: var(--text-2);
  font-size: 0.82rem;
}

.game-lane-empty,
.reserve-pile,
.game-hand-grid {
  gap: 12px;
}

.game-hand-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: visible;
  padding: 6px 4px 14px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.game-hand-grid .hand-card {
  flex: 0 0 var(--game-card-width);
}

.reserve-pile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: calc(var(--game-card-height) + 84px);
  padding: 6px 4px 14px;
  overflow: visible;
  touch-action: pan-x;
}

.reserve-pile .reserve-card {
  flex: 0 0 var(--game-card-width);
}

.hand-card.is-draggable-card,
.reserve-card.is-draggable-card {
  touch-action: pan-x;
  -webkit-user-select: none;
  user-select: none;
}

.reserve-pile .reserve-card + .reserve-card {
  margin-top: calc(var(--game-card-height) * -0.8);
}

.reserve-card.is-below-reserve-card {
  filter: saturate(0.8) brightness(0.9);
}

.reserve-card.is-top-reserve-card {
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34), 0 0 24px var(--accent-glow);
}

.game-lane-empty {
  min-height: 120px;
  place-items: center;
  border: 1px dashed var(--line-strong);
  background: rgba(255, 255, 255, 0.015);
  color: var(--text-3);
}

.run-map-wrap {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}

.run-map-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.run-map-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.run-map-status-copy {
  color: var(--text-2);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

.map-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
}

.map-node:disabled {
  cursor: default;
}

.map-node:not(:disabled):hover .node-icon {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.map-node:not(:disabled):hover .node-label {
  color: var(--accent);
}

.node-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 1.05rem;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.node-icon.done {
  border-color: var(--text-3);
  opacity: 0.5;
}

.node-icon.current {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 12px var(--accent-glow);
}

.node-icon.ready {
  border-color: var(--line-strong);
}

.node-icon.locked {
  opacity: 0.3;
}

.boss-node-icon {
  width: 54px;
  height: 54px;
  border-color: var(--red);
  color: var(--red);
  font-size: 1.3rem;
}

.node-label {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.node-label.current {
  color: var(--accent);
}

.map-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 8px;
}

.map-row-line {
  margin-bottom: 10px;
}

.map-tier-row {
  width: min(100%, calc(var(--tier-max-nodes) * 86px + max(0, var(--tier-max-nodes) - 1) * 40px));
  margin-left: auto;
  margin-right: auto;
}

.map-line {
  flex: 1 1 auto;
  height: 1px;
  max-width: 40px;
  background: var(--line-strong);
}

.map-line.done {
  background: var(--text-3);
}

.map-line.ready {
  background: var(--line-strong);
}

.map-line.locked {
  opacity: 0.3;
}

.run-modifier-panel-mockup,
.run-event-panel-mockup {
  padding: 16px;
}

.run-event-panel-mockup {
  border-top: 2px solid var(--accent);
}

.battle-scoreboard,
.battlefield-grid {
  display: grid;
  gap: 12px;
}

.battle-scoreboard {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.battle-hp-card,
.battle-round-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-top: 2px solid var(--accent);
}

.battle-hp-card.enemy {
  border-top-color: var(--red);
}

.battle-hp-card strong,
.battle-round-card strong {
  font-family: var(--font-head);
  font-size: 2rem;
}

.battle-stage-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.battlefield-grid {
  grid-template-columns: 1fr;
}

.battle-lane-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.lane-slot {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 260px;
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(18, 22, 33, 0.94);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.lane-slot.has-card {
  border-color: var(--line-strong);
}

.lane-slot.is-drop-hover,
.lane-slot.is-drop-lane:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.battle-center-row {
  display: grid;
  gap: 12px;
}

.battle-result-banner {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
}

.battle-result-banner.is-win {
  border-color: rgba(0, 255, 136, 0.32);
  background: var(--green-dim);
}

.battle-result-banner.is-loss {
  border-color: rgba(255, 82, 82, 0.32);
  background: var(--red-dim);
}

.battle-action-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.battle-hand-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: start;
}

.battle-main-hand-panel,
.reserve-side-panel {
  align-self: start;
}

.battle-main-hand-panel {
  overflow: hidden;
}

.reserve-side-panel {
  min-width: calc(var(--game-card-width) + 32px);
}

.reserve-side-panel .hero-text {
  margin-bottom: 6px;
}

.lane-slot .battle-card {
  width: min(100%, var(--game-card-width));
  margin-inline: auto;
}

.combat-log-list > * + * {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.lane-effect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--red);
  background: var(--red-dim);
  color: white;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lane-effect-frame {
  display: none;
}

.drag-card-ghost {
  position: fixed;
  z-index: 9999;
  width: var(--game-card-width);
  pointer-events: none;
  opacity: 0.92;
}

body.is-dragging-card {
  cursor: grabbing;
}

.is-drag-source {
  opacity: 0.5;
}

.friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.friends-hub-layout,
.friends-hub-sections,
.friends-request-grid,
.friend-request-stack,
.friend-roster-grid,
.friends-lobby-grid {
  display: grid;
  gap: 14px;
}

.friends-top-grid,
.friends-stat-grid,
.friends-request-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.friends-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.friends-player-card,
.friends-invite-card,
.friends-roster-panel,
.friends-lobby-panel,
.friend-request-card,
.friend-roster-card,
.friends-lobby-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%),
    rgba(18, 22, 33, 0.94);
}

.friends-player-card::after,
.friends-invite-card::after,
.friend-roster-card::after {
  content: "";
  position: absolute;
  top: -34px;
  right: -34px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--accent-dim);
  filter: blur(4px);
  pointer-events: none;
}

.friends-player-strip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  width: fit-content;
}

.friend-roster-card,
.friend-request-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.friend-roster-main,
.friend-roster-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.friend-roster-head {
  justify-content: space-between;
  align-items: flex-start;
}

.friend-roster-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 0 18px var(--accent-glow);
}

.friend-roster-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.friend-roster-copy h4,
.friend-request-card h4 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1rem;
}

.friend-roster-code,
.friend-roster-detail,
.friend-request-card p {
  margin: 0;
  color: var(--text-2);
}

.friend-roster-detail {
  color: var(--text-3);
  font-size: 0.82rem;
}

.friend-roster-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.friend-presence-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.friend-presence-chip-online,
.friend-presence-chip-battle {
  color: var(--accent);
  background: var(--accent-dim);
}

.friend-presence-chip-battle {
  color: var(--green);
  border-color: rgba(0, 255, 136, 0.2);
  background: rgba(0, 255, 136, 0.12);
}

.friend-presence-chip-waiting {
  color: var(--yellow);
  border-color: rgba(255, 204, 0, 0.2);
  background: rgba(255, 204, 0, 0.12);
}

.friend-presence-chip-offline {
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.04);
}

.friend-roster-card-online,
.friend-roster-card-battle {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 22px var(--accent-glow);
}

.friend-roster-card-battle {
  box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.08), 0 0 24px rgba(0, 255, 136, 0.18);
}

.friends-lobby-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.friends-lobby-card {
  gap: 12px;
  padding: 16px;
}

.player-code {
  letter-spacing: 0.18em;
  color: var(--accent);
}

.auth-main {
  width: min(900px, 100%);
  margin: 0 auto;
}

.auth-hero {
  grid-template-columns: 1fr;
}

@media (max-width: 1180px) {
  .home-stage,
  .progress-row,
  .radar-section,
  .deck-workspace,
  .game-workspace,
  .battle-hand-row {
    grid-template-columns: 1fr;
  }

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

  .continue-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .continue-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-sidebar {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deck-side-panel,
  .game-side-panel {
    position: static;
  }

  .deck-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .topbar,
  .reading-topbar {
    flex-wrap: wrap;
  }

  .topnav {
    order: 3;
    width: 100%;
  }

  .hero,
  .subpage-hero,
  .home-stage,
  .progress-row,
  .score-grid,
  .reader-stats-strip,
  .friends-top-grid,
  .friends-stat-grid,
  .friends-request-grid,
  .game-summary-grid,
  .game-builder-flow,
  .details-grid,
  .moods-grid,
  .learn-choice-grid,
  .learn-stats,
  .battle-scoreboard,
  .battle-lane-row,
  .book-reader-pages {
    grid-template-columns: 1fr;
  }

  .game-card-grid,
  .game-deck-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--game-card-width)), var(--game-card-width)));
  }

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

  .game-column-head,
  .game-column-actions,
  .game-sort-controls {
    align-items: stretch;
  }

  .book-list-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .book-list-progress-wrap,
  .book-list-words,
  .book-list-badge {
    grid-column: 2 / -1;
  }

  .hero-sidebar {
    grid-template-columns: 1fr;
  }

  .xp-bar-head,
  .radar-section .progress-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .flashcard-demo {
    gap: 12px;
  }

  .home-library-carousel {
    grid-auto-columns: 136px;
    gap: 12px;
  }

  .home-preview-card {
    width: 184px;
  }

  .reader-layout-shell {
    grid-template-columns: 1fr;
  }

  .reader-book-sidebar,
  .reader-utility-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .reader-spread-shell {
    grid-template-columns: 1fr;
  }

  .reader-turn-zone {
    width: 100%;
    min-height: 42px;
  }

  .reader-audio-dock {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    min-height: 0;
  }

  .reader-audio-track {
    min-width: 0;
    width: 100%;
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
  }

  .reader-audio-player-wrap,
  .reader-audio-actions {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .page-shell {
    width: min(100vw - 16px, 100%);
  }

  .book-reader-shell {
    padding-inline: 8px;
  }

  .brand-home-lockup strong,
  .brand-home-lockup small {
    display: none;
  }

  .pdf-quick-action,
  .reading-quick-action,
  .battle-stage-panel,
  .reader-page-controls,
  .book-reader-header,
  .reader-toolbar-panel,
  .reader-audio-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .card-actions,
  .reader-action-buttons,
  .hero-actions,
  .study-controls,
  .learn-controls,
  .knowledge-controls,
  .battle-result-actions {
    flex-direction: column;
  }

  .diamond-button,
  .secondary-button,
  .ghost-button,
  .hero-button,
  .nav-cta {
    width: 100%;
  }

  .lib-stats {
    grid-template-columns: 1fr;
  }

  .continue-card,
  .continue-actions {
    grid-template-columns: 1fr;
  }

  .reader-audio-dock {
    padding: 12px;
  }

  .reader-audio-track,
  .reader-audio-player,
  .reader-audio-actions,
  .reader-strip-stat,
  .reader-side-card,
  .reader-book-sidebar {
    min-width: 0;
  }

  .radar-section,
  .flashcard-preview,
  .xp-bar-wrap {
    padding: 16px;
  }

  .home-library-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-library-carousel {
    grid-auto-columns: 124px;
  }

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

  .book-list-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .game-hand-grid .hand-card,
  .reserve-pile .reserve-card,
  .tcg-card {
    width: min(100%, 190px);
  }

  .reserve-pile {
    min-height: calc(var(--game-card-height) + 40px);
  }
}