/* =============================================================================
   layout.css — Korean Vocabulary PWA
   Arcade Button & Touch UI Standards
   All colors via CSS variables only. No hardcoded values.
   ============================================================================= */


/* =============================================================================
   1. SCREEN CONTAINER BASE
   Full-viewport, scroll-locked, CRT-field ready
   ============================================================================= */

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--color-background);
  color: var(--color-text);
}

#app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
}

/* Screen-level container: each screen fills the full viewport */
.screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
}

/* CRT flicker on router navigation — class added/removed by router.js */
#app.screen-flash {
  animation: crt-switch 80ms ease-out;
}

@keyframes crt-switch {
  0%   { filter: brightness(3); }
  100% { filter: brightness(1); }
}


/* =============================================================================
   2. BUTTONS — Arcade Rectangle Standard
   Sharp, glowing, uppercase. No rounded corners beyond --border-radius-sm (2px).
   ============================================================================= */

.btn {
  /* Typography */
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;

  /* Visual */
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-sm);

  /* Spacing — ensures 48px minimum touch target */
  padding: var(--space-sm) var(--space-md);
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Interaction */
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  /* Transitions */
  transition:
    transform var(--transition-speed),
    box-shadow var(--transition-speed),
    background-color var(--transition-speed),
    color var(--transition-speed),
    border-color var(--transition-speed),
    opacity var(--transition-speed);
}

/* --- Active / Press State --- */
.btn:active,
.btn.active {
  transform: scale(0.96);
  box-shadow:
    0 0 12px var(--color-primary),
    0 0 24px rgba(255, 45, 120, 0.4);
}

/* --- Selected State --- */
.btn.selected {
  background: var(--color-primary);
  color: var(--color-background);
  box-shadow: 0 0 12px var(--color-primary);
}

/* --- Disabled State --- */
.btn:disabled,
.btn[disabled] {
  opacity: 0.25;
  pointer-events: none;
  box-shadow: none;
}

/* --- Focus (keyboard / D-pad) --- */
.btn:focus-visible,
.btn.menu-focus {
  outline: none;
  animation: arcade-pulse 1.2s ease-in-out infinite;
}

@keyframes arcade-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--color-primary); }
  50%       { box-shadow: 0 0 18px var(--color-primary), 0 0 30px rgba(255, 45, 120, 0.4); }
}


/* =============================================================================
   2a. FILLED / PRIMARY BUTTON VARIANT
   Used for primary game-flow paths (Start Session, Confirm, etc.)
   ============================================================================= */

.btn-primary {
  background: var(--color-primary);
  color: var(--color-background);
  border-color: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}

.btn-primary:active,
.btn-primary.active {
  transform: scale(0.96);
  box-shadow:
    0 0 20px var(--color-primary),
    0 0 40px rgba(255, 45, 120, 0.3);
}

.btn-primary.selected {
  background: var(--color-primary);
  color: var(--color-background);
  box-shadow:
    0 0 16px var(--color-primary),
    0 0 32px rgba(255, 45, 120, 0.4);
}

.btn-primary:disabled,
.btn-primary[disabled] {
  opacity: 0.25;
  pointer-events: none;
  box-shadow: none;
}


/* =============================================================================
   2b. SECONDARY & ICON BUTTON VARIANTS
   ============================================================================= */

.btn-secondary {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary:active,
.btn-secondary.active {
  transform: scale(0.96);
  box-shadow:
    0 0 12px var(--color-secondary),
    0 0 24px rgba(0, 255, 224, 0.4);
}

.btn-secondary.selected {
  background: var(--color-secondary);
  color: var(--color-background);
  box-shadow: 0 0 12px var(--color-secondary);
}

/* Square icon button (pause, back, etc.) — enforces equal 48×48 minimum */
.icon-btn {
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: var(--font-size-md);
}


/* =============================================================================
   3. SEGMENTED CONTROLS
   Single combined box split into equal tiles with zero rounding on inner edges.
   Outer container has --border-radius-sm only on its outer corners.
   ============================================================================= */

.segmented-control {
  display: flex;
  flex-direction: row;
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-sm);
  overflow: hidden; /* clips inner edges to produce the combined-box look */
  width: 100%;
}

.segmented-control .seg-option {
  /* Reset btn defaults that conflict with the combined-box look */
  flex: 1;
  min-height: 48px;
  min-width: 48px;
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--transition-speed),
    background-color var(--transition-speed),
    box-shadow var(--transition-speed),
    color var(--transition-speed),
    opacity var(--transition-speed);
}

/* Remove the trailing divider on the last tile */
.segmented-control .seg-option:last-child {
  border-right: none;
}

.segmented-control .seg-option:active,
.segmented-control .seg-option.active {
  transform: scale(0.96);
  box-shadow:
    inset 0 0 12px var(--color-primary),
    0 0 12px var(--color-primary);
}

.segmented-control .seg-option.selected {
  background: var(--color-primary);
  color: var(--color-background);
  box-shadow: 0 0 12px var(--color-primary);
}

.segmented-control .seg-option:disabled,
.segmented-control .seg-option[disabled] {
  opacity: 0.25;
  pointer-events: none;
  box-shadow: none;
}


/* =============================================================================
   4. UNIT GRID
   Pixel-perfect tile grid. Zero rounding. Each tile is a standalone 48px target.
   ============================================================================= */

.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 2px; /* hair-thin gap between tiles — pixel grid energy */
  width: 100%;
}

.unit-tile {
  min-height: 48px;
  min-width: 48px;
  border: 2px solid var(--color-primary);
  border-radius: 0; /* strictly zero — no rounding on grid tiles */
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--transition-speed),
    background-color var(--transition-speed),
    box-shadow var(--transition-speed),
    color var(--transition-speed),
    opacity var(--transition-speed);
}

.unit-tile:active,
.unit-tile.active {
  transform: scale(0.96);
  box-shadow:
    0 0 12px var(--color-primary),
    0 0 24px rgba(255, 45, 120, 0.4);
}

.unit-tile.selected {
  background: var(--color-primary);
  color: var(--color-background);
  box-shadow: 0 0 12px var(--color-primary);
}

.unit-tile:disabled,
.unit-tile[disabled] {
  opacity: 0.25;
  pointer-events: none;
  box-shadow: none;
}

/* Locked unit tile */
.unit-tile.locked {
  opacity: 0.25;
  pointer-events: none;
  border-style: dashed;
  box-shadow: none;
}


/* =============================================================================
   5. WORD LIST CARDS
   Sharp surface cards for master-deck and current-deck list views.
   ============================================================================= */

.word-card {
  background: var(--color-surface);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: 64px;
  user-select: none;
  transition:
    border-color var(--transition-speed),
    box-shadow var(--transition-speed);
}

.word-card:active,
.word-card.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}

.word-card__hangul {
  font-family: var(--font-korean);
  font-weight: 900;
  font-size: var(--font-size-xl);
  color: var(--color-text);
  flex-shrink: 0;
}

.word-card__english {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.word-card__badge {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 0; /* square leitner dot — hard edge */
}

/* Scrollable word list container */
.word-list {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  padding: var(--space-sm);
}


/* =============================================================================
   6. BANNERS & NOTIFICATION BARS
   Phase banners, unlock notifications, session-end callouts.
   ============================================================================= */

.banner {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-sm);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  text-align: center;
  box-shadow: 0 0 10px var(--color-primary), 0 0 20px rgba(255, 45, 120, 0.2);
}

.banner--correct {
  border-color: var(--color-correct);
  color: var(--color-correct);
  box-shadow: 0 0 10px var(--color-correct), 0 0 20px rgba(57, 255, 20, 0.2);
}

.banner--incorrect {
  border-color: var(--color-incorrect);
  color: var(--color-incorrect);
  box-shadow: 0 0 10px var(--color-incorrect), 0 0 20px rgba(255, 45, 45, 0.2);
}

.banner--unlock {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent), 0 0 20px rgba(255, 230, 0, 0.2);
  animation: arcade-pulse-accent 1.2s ease-in-out 3;
}

@keyframes arcade-pulse-accent {
  0%, 100% { box-shadow: 0 0 6px var(--color-accent); }
  50%       { box-shadow: 0 0 18px var(--color-accent), 0 0 30px rgba(255, 230, 0, 0.4); }
}


/* =============================================================================
   7. HUD BARS
   Fixed top bar for main-game. Hard-edge. High contrast. Always on top.
   ============================================================================= */

#game-hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-sm);
  background: var(--color-background);
  border-bottom: 2px solid var(--color-text-muted);
  gap: var(--space-sm);
}

.hud-left,
.hud-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
}

.hud-right {
  justify-content: flex-end;
}

.hud-center {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Timer display */
.hud-timer {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  letter-spacing: 0.05em;
}

/* Urgent timer pulse — JS adds .urgent when < 60s remaining */
#hud-timer.urgent {
  color: var(--color-incorrect);
  animation: hud-pulse 1s ease-in-out infinite;
}

@keyframes hud-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* Phase badge */
.hud-phase-badge {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  color: var(--color-background);
  line-height: 1;
}

.hud-phase-badge.phase-decoding    { background: var(--color-primary); }
.hud-phase-badge.phase-recognition { background: var(--color-secondary); }
.hud-phase-badge.phase-blitz       { background: var(--color-accent); }

/* Streak / stat group */
.hud-streak-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hud-label {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.hud-value {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  color: var(--color-accent);
  line-height: 1;
}

/* HUD spacer: pushes screen content below the fixed HUD */
.hud-spacer {
  height: 56px;
  flex-shrink: 0;
}


/* =============================================================================
   8. GAME FIELD & LANE LAYOUT
   ============================================================================= */

#game-field {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    #0a0a14 0%,
    #0f0f1e 100%
  );
  display: flex;
  flex-direction: row;
}

/* --- Lane containers --- */
.lane {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-right: 1px solid rgba(106, 106, 154, 0.4); /* --color-text-muted at 40% */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: background-color 80ms ease-out;
  /* Minimum touch target — lanes fill viewport height so this is always met,
     but we enforce minimum width per lane */
  min-width: 48px;
}

.lane:last-child {
  border-right: none;
}

/* Lane tap flash — JS adds/removes .tapped with a 150ms setTimeout */
.lane.tapped {
  background-color: rgba(255, 45, 120, 0.4); /* --color-primary at 40% opacity */
  transition: background-color 0ms; /* instant on */
}

/* Remove the transition when tapped class is stripped, so it fades out */
.lane:not(.tapped) {
  background-color: transparent;
  transition: background-color 150ms ease-out;
}

/* Lane choice label — rendered at the bottom of each lane */
.lane-choice {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  padding: var(--space-sm) var(--space-xs);
  margin-bottom: var(--space-sm);
  pointer-events: none; /* tap goes to .lane, not the label */
  line-height: 1.3;
  transition:
    color var(--transition-speed),
    text-shadow var(--transition-speed);
}

/* Proximity signal: JS adds .in-range when block enters bottom 30% */
.lane-choice.in-range {
  color: var(--color-accent);
  text-shadow: 0 0 6px var(--color-accent);
}

/* Falling word block */
#active-block {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--color-surface);
  border: 2px solid var(--color-secondary);
  border-radius: var(--border-radius-sm);
  box-shadow:
    0 0 10px var(--color-secondary),
    0 0 20px rgba(0, 255, 224, 0.2);
  font-family: var(--font-korean);
  font-weight: 900;
  font-size: 48px;
  color: var(--color-text);
  text-align: center;
  pointer-events: none;
  z-index: 10;
  min-width: 120px;
  white-space: nowrap;
  will-change: transform;
}

/* Game field flash feedback — JS adds class then removes after 300ms */
#game-field.flash-correct {
  background: linear-gradient(
    to bottom,
    rgba(57, 255, 20, 0.4) 0%,
    rgba(57, 255, 20, 0.1) 40%,
    #0f0f1e 100%
  );
}

#game-field.flash-incorrect {
  background: linear-gradient(
    to bottom,
    rgba(255, 45, 45, 0.4) 0%,
    rgba(255, 45, 45, 0.1) 40%,
    #0f0f1e 100%
  );
}


/* =============================================================================
   9. FLASHCARD LAYOUT
   Outer/inner wrapper for 3D flip. Rating buttons below card.
   ============================================================================= */

.flashcard-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--space-md);
  gap: var(--space-lg);
}

.card-outer {
  perspective: 1000px;
  width: 100%;
  max-width: 480px;
  min-width: 360px;
}

.card-inner {
  position: relative;
  width: 100%;
  min-height: 240px;
  transform-style: preserve-3d;
  transition: transform var(--transition-speed-slow) ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.card-inner.flipped {
  animation: card-flip-arcade 0.4s ease forwards;
}

@keyframes card-flip-arcade {
  0%   { transform: rotateY(0deg);   filter: brightness(1); }
  45%  { transform: rotateY(90deg);  filter: brightness(2.5); }
  55%  { transform: rotateY(90deg);  filter: brightness(2.5); }
  100% { transform: rotateY(180deg); filter: brightness(1); }
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--color-surface);
  border: 2px solid var(--color-secondary);
  border-radius: var(--border-radius-sm);
  box-shadow:
    0 0 10px var(--color-secondary),
    0 0 20px rgba(0, 255, 224, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

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

/* Rating buttons row — hidden until flip */
.rating-row {
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  width: 100%;
  max-width: 480px;
}

.rating-row .btn {
  flex: 1;
  min-height: 56px;
}

/* Rating button color overrides */
.btn-rating-miss     { color: var(--color-incorrect);  border-color: var(--color-incorrect); }
.btn-rating-hard     { color: var(--color-text-muted); border-color: var(--color-text-muted); }
.btn-rating-moderate { color: var(--color-secondary);  border-color: var(--color-secondary); }
.btn-rating-easy     { color: var(--color-correct);    border-color: var(--color-correct); }

.btn-rating-miss:active,
.btn-rating-miss.active {
  transform: scale(0.96);
  box-shadow: 0 0 12px var(--color-incorrect), 0 0 24px rgba(255, 45, 45, 0.4);
}

.btn-rating-hard:active,
.btn-rating-hard.active {
  transform: scale(0.96);
  box-shadow: 0 0 12px var(--color-text-muted);
}

.btn-rating-moderate:active,
.btn-rating-moderate.active {
  transform: scale(0.96);
  box-shadow: 0 0 12px var(--color-secondary), 0 0 24px rgba(0, 255, 224, 0.4);
}

.btn-rating-easy:active,
.btn-rating-easy.active {
  transform: scale(0.96);
  box-shadow: 0 0 12px var(--color-correct), 0 0 24px rgba(57, 255, 20, 0.4);
}

.btn-rating-miss.selected     { background: var(--color-incorrect);  color: var(--color-background); box-shadow: 0 0 12px var(--color-incorrect); }
.btn-rating-hard.selected     { background: var(--color-text-muted); color: var(--color-background); }
.btn-rating-moderate.selected { background: var(--color-secondary);  color: var(--color-background); box-shadow: 0 0 12px var(--color-secondary); }
.btn-rating-easy.selected     { background: var(--color-correct);    color: var(--color-background); box-shadow: 0 0 12px var(--color-correct); }


/* =============================================================================
   10. LEITNER COLOR UTILITY CLASSES
   Applied to word-card badges, strength indicators, group labels.
   ============================================================================= */

/* Background fill utilities */
.leitner-1 { background-color: var(--color-leitner-1); }
.leitner-2 { background-color: var(--color-leitner-2); }
.leitner-3 { background-color: var(--color-leitner-3); }
.leitner-4 { background-color: var(--color-leitner-4); }
.leitner-5 { background-color: var(--color-leitner-5); }

/* Text color utilities */
.leitner-text-1 { color: var(--color-leitner-1); }
.leitner-text-2 { color: var(--color-leitner-2); }
.leitner-text-3 { color: var(--color-leitner-3); }
.leitner-text-4 { color: var(--color-leitner-4); }
.leitner-text-5 { color: var(--color-leitner-5); }

/* Border color utilities */
.leitner-border-1 { border-color: var(--color-leitner-1); }
.leitner-border-2 { border-color: var(--color-leitner-2); }
.leitner-border-3 { border-color: var(--color-leitner-3); }
.leitner-border-4 { border-color: var(--color-leitner-4); }
.leitner-border-5 { border-color: var(--color-leitner-5); }

/* Glow utilities — neon box-shadow per group */
.leitner-glow-1 { box-shadow: 0 0 8px var(--color-leitner-1), 0 0 16px rgba(255, 45, 45, 0.3); }
.leitner-glow-2 { box-shadow: 0 0 8px var(--color-leitner-2), 0 0 16px rgba(255, 140, 0, 0.3); }
.leitner-glow-3 { box-shadow: 0 0 8px var(--color-leitner-3), 0 0 16px rgba(255, 230, 0, 0.3); }
.leitner-glow-4 { box-shadow: 0 0 8px var(--color-leitner-4), 0 0 16px rgba(57, 255, 20, 0.3); }
.leitner-glow-5 { box-shadow: 0 0 8px var(--color-leitner-5), 0 0 16px rgba(0, 255, 224, 0.3); }

/* Strength bar fill — used on main menu deck-health bar */
.strength-bar {
  height: 4px;
  width: 100%;
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
  position: relative;
  overflow: hidden;
}

.strength-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--color-accent);
  /* No smooth transition — digital, not fluid, per spec */
  transition: none;
}


/* =============================================================================
   11. SCROLL CONTAINERS (word list, deck list views)
   ============================================================================= */

.scroll-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Hide scrollbar visually but keep it functional */
.scroll-container::-webkit-scrollbar {
  width: 3px;
}

.scroll-container::-webkit-scrollbar-track {
  background: var(--color-background);
}

.scroll-container::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
}


/* =============================================================================
   12. SHARED LAYOUT PRIMITIVES
   ============================================================================= */

/* Vertical stack with standard gap */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stack--sm { gap: var(--space-sm); }
.stack--lg { gap: var(--space-lg); }

/* Horizontal row */
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
}

.row--between { justify-content: space-between; }
.row--center  { justify-content: center; }

/* Full-bleed padding wrapper */
.screen-pad {
  padding: var(--space-md);
}

/* Section heading — screen titles */
.screen-title {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  text-shadow: 0 0 10px var(--color-accent), 0 0 30px rgba(255, 230, 0, 0.5);
  text-align: center;
  line-height: 1.3;
}

/* Sub-heading / section label */
.section-label {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* Korean display text — large hangul hero element */
.hangul-hero {
  font-family: var(--font-korean);
  font-weight: 900;
  font-size: 56px;
  color: var(--color-text);
  text-align: center;
  line-height: 1.1;
}

/* Divider — 1px horizontal line in muted color */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-text-muted);
  opacity: 0.3;
  flex-shrink: 0;
}


/* =============================================================================
   13. TAPPED TRANSITION UTILITY (standalone class)
   For JS flashLane() usage. Can be applied to any container.
   ============================================================================= */

.tapped {
  background-color: rgba(255, 45, 120, 0.4) !important; /* --color-primary at 40% */
}


/* =============================================================================
   14. MOBILE SAFETY — Global tap highlight suppression
   Covers all interactive selectors in one pass.
   ============================================================================= */

button,
[role="button"],
a,
label,
input,
select,
textarea,
.btn,
.seg-option,
.unit-tile,
.lane,
.word-card,
.card-inner {
  -webkit-tap-highlight-color: transparent;
}
.due-now-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--border-radius-sm);
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 0 16px var(--color-accent);
  min-width: 280px;
  max-width: 90vw;
  text-align: center;
}

.due-now-toast .toast-title {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.due-now-toast .toast-subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}