:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --card-hover: #f8fafc;
  --ink: #1f2a44;
  --ink-soft: #2d3a5c;
  --muted: #6b7a99;
  --border: rgba(31,42,68,0.08);
  --border-strong: rgba(31,42,68,0.18);
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --accent: #f59e0b;
  --accent-soft: #fef3c7;
  --accent-deep: #d97706;
  --good: #16a34a;
  --good-soft: #d1fae5;
  --bad: #dc2626;
  --bad-soft: #fee2e2;
  --streak: #f97316;
  --streak-soft: #fff7ed;
  --bg-grad: linear-gradient(135deg, #dbeafe 0%, #f5d0fe 100%);
  --shadow: 0 6px 24px rgba(31, 42, 68, 0.08);
  --shadow-sm: 0 2px 8px rgba(31, 42, 68, 0.08);
  --radius: 16px;
}

[data-theme="dark"] {
  --bg: #14171f;
  --card: #1d212c;
  --card-hover: #252937;
  --ink: #e6e9ef;
  --ink-soft: #b8bdc9;
  --muted: #828a9c;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.18);
  --primary: #5b8def;
  --primary-dark: #4577e0;
  --accent: #f59e0b;
  --accent-soft: #2a2418;
  --accent-deep: #fbbf24;
  --good: #34d399;
  --good-soft: #1a2a23;
  --bad: #f87171;
  --bad-soft: #2a1a1a;
  --streak: #fb923c;
  --streak-soft: #2a1f17;
  --bg-grad: linear-gradient(135deg, #14171f 0%, #1a1422 100%);
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #14171f;
    --card: #1d212c;
    --card-hover: #252937;
    --ink: #e6e9ef;
    --ink-soft: #b8bdc9;
    --muted: #828a9c;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.18);
    --primary: #5b8def;
    --primary-dark: #4577e0;
    --accent-soft: #2a2418;
    --accent-deep: #fbbf24;
    --good: #34d399;
    --good-soft: #1a2a23;
    --bad: #f87171;
    --bad-soft: #2a1a1a;
    --streak: #fb923c;
    --streak-soft: #2a1f17;
    --bg-grad: linear-gradient(135deg, #14171f 0%, #1a1422 100%);
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--card);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
}

#title {
  font-size: 22px;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #2563eb, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  cursor: pointer;
  border: none;
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
  font-family: inherit;
  transition: opacity 0.15s;
}
.title-btn:hover { opacity: 0.75; }
.title-btn:active { opacity: 0.55; }
.title-logo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  margin-bottom: 2px;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.topbar-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .title-logo { width: 22px; height: 22px; margin-right: 6px; }
  .topbar-icon { width: 20px; height: 20px; }
}

#score-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color: white;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(245,158,11,0.35);
  line-height: 1;
  height: 32px;
}
#score-pill .pill-star { font-size: 14px; }

#home-btn {
  visibility: hidden;
}
#home-btn.visible { visibility: visible; }

#user-area {
  display: none;
  align-items: center;
  gap: 8px;
  justify-self: end;
}
#user-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dashboard-btn, #logout-btn {
  font-size: 22px;
  background: transparent;
  padding: 6px 10px;
  border-radius: 10px;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#logout-btn svg {
  display: block;
  color: var(--ink);
  opacity: 0.75;
  transition: opacity 0.15s, color 0.15s;
}
#logout-btn:hover svg {
  opacity: 1;
  color: var(--bad);
}
#dashboard-btn:hover, #logout-btn:hover {
  background: rgba(0,0,0,0.06);
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  font-weight: 600;
}

button.primary {
  background: var(--primary);
  color: white;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
  transition: transform 0.1s, box-shadow 0.1s;
}
button.primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
button.primary:active { transform: translateY(1px); }

button.ghost {
  background: transparent;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
}
button.ghost:hover { background: rgba(0,0,0,0.05); }

#screen {
  flex: 1;
  padding: 32px 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

#footer {
  text-align: center;
  padding: 22px 16px 20px;
  color: var(--ink);
  background: transparent;
  margin-top: 32px;
}
#footer .footer-line {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 6px;
  opacity: 0.7;
}
#footer .footer-copy {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.6;
  letter-spacing: 0.3px;
}

/* Когато се играе игра - скриваме footer-а за по-малко разсейване */
#screen:has(.game-area) ~ #footer {
  display: none;
}

/* На mobile - намаляваме font + предотвратяваме wrap на „Разработен в съответствие..." */
@media (max-width: 600px) {
  #footer .footer-line {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #footer .footer-copy {
    font-size: 11px;
  }
  #footer { padding: 16px 8px 14px; }
}

/* ===== LOGIN ===== */
.login-card {
  max-width: 400px;
  margin: 48px auto;
  background: var(--card);
  border-radius: 20px;
  padding: 40px 32px 32px;
  box-shadow: var(--shadow);
  text-align: center;
  animation: cardEnter 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-icon {
  font-size: 68px;
  margin-bottom: 6px;
  display: inline-block;
  animation: iconFloat 3s ease-in-out infinite;
}
.login-logo {
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  display: inline-block;
  animation: iconFloat 3s ease-in-out infinite;
  object-fit: contain;
}
@media (max-width: 480px) {
  .login-logo { width: 48px; height: 48px; }
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.login-card h2 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #2563eb, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-subtitle {
  color: var(--muted);
  margin: 0 0 28px;
  font-size: 15px;
}
.login-card form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-card input {
  font-family: inherit;
  font-size: 16px;
  padding: 14px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  outline: none;
  background: #fafbff;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.login-card input:focus {
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}
.login-card button[type="submit"] {
  padding: 14px;
  font-size: 16px;
  margin-top: 10px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.login-card button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.login-error {
  color: var(--bad);
  font-size: 14px;
  min-height: 20px;
  font-weight: 600;
  margin-top: 4px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.login-error:not(:empty)::before {
  content: "⚠️";
  font-size: 14px;
  flex-shrink: 0;
}
.login-card input.invalid {
  border-color: var(--bad) !important;
  background: #fff5f5 !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10) !important;
  animation: invalidShake 0.35s ease-out;
}
@keyframes invalidShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* === Login/Register tabs === */
.login-tabs {
  display: flex;
  gap: 0;
  margin: 18px 0 22px;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
}
.login-tab {
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.login-tab.active {
  background: white;
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(31,42,68,0.08);
}
.login-tab:hover:not(.active) {
  color: var(--ink);
}
.login-form-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
  text-align: center;
}

/* === Guest pill в topbar-а === */
.topbar-guest-btn {
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  min-height: 0 !important;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .topbar-guest-btn {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
}

/* === Guest register wall modal === */
.guest-wall-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: guestWallFade 0.25s ease-out;
}
@keyframes guestWallFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.guest-wall-card {
  background: white;
  border-radius: 24px;
  padding: 36px 28px 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  text-align: center;
  position: relative;
  animation: guestWallPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes guestWallPop {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.guest-wall-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s;
}
.guest-wall-close:hover {
  background: #f1f5f9;
  color: var(--ink);
}
.guest-wall-emoji {
  font-size: 56px;
  margin-bottom: 8px;
  display: inline-block;
  animation: emojiPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.guest-wall-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.4px;
  background: linear-gradient(135deg, #2563eb, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.guest-wall-body {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 24px;
}
.guest-wall-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guest-wall-actions button {
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
}

.loading {
  text-align: center;
  padding: 80px 20px;
  font-size: 24px;
  color: var(--muted);
}
.loading::after {
  content: " ⏳";
  display: inline-block;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .login-card { margin: 24px 16px; padding: 32px 24px 24px; }
  .login-icon { font-size: 60px; }
  .login-card h2 { font-size: 24px; }
}

/* ===== RESUME PROMPT ===== */
.resume-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31,42,68,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600; /* resume-overlay: над toast (300) и streak-celebration (400) */
  animation: revealIn 0.2s;
}
.resume-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 32px 36px;
  text-align: center;
  max-width: 420px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  position: relative;
}
.resume-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bad);
  color: white;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220,38,38,0.35);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  padding: 0;
  padding-bottom: 3px;
}
.resume-close:hover {
  background: #b91c1c;
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(220,38,38,0.5);
}
.resume-close:active { transform: scale(0.95); }
.resume-icon {
  font-size: 56px;
  margin-bottom: 8px;
}
.resume-card h2 {
  margin: 0 0 12px;
  font-size: 22px;
}
.resume-card p {
  color: var(--muted);
  font-size: 17px;
  margin: 0 0 24px;
}
.resume-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.resume-actions button {
  padding: 12px 22px;
  font-size: 16px;
}

/* ===== DASHBOARD ===== */
.dashboard {
  max-width: 900px;
  margin: 0 auto;
}
.dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  padding: 22px 26px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  box-shadow: 0 12px 32px rgba(37,99,235,0.3);
  gap: 12px;
}
.dash-name {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  min-width: 0;
}
.dash-stars {
  font-size: 22px;
  font-weight: 800;
  background: rgba(255,255,255,0.22);
  padding: 6px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.dash-section {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.dash-section h3 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.dash-empty {
  color: var(--muted);
  font-style: italic;
  margin: 0;
  padding: 8px 0;
}

/* === Незавършени игри === */
.dash-inprogress { border-left: 4px solid var(--accent); }
.dash-achievements { border-left: 4px solid #fb923c; }
.dash-daily-fact {
  border-left: 4px solid var(--primary);
  background: linear-gradient(135deg, var(--card) 0%, var(--card-hover) 100%);
}
.fact-header {
  font-size: 11px;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fact-text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.3px;
}
@media (max-width: 600px) {
  .fact-text { font-size: 16px; }
}
.achv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 600px) {
  .achv-grid { grid-template-columns: 1fr; }
}
.achv-card {
  background: var(--streak-soft);
  border: 1px solid var(--streak);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  transition: transform 0.15s;
}
.achv-card:hover { transform: translateY(-3px); }
.achv-icon { font-size: 32px; margin-bottom: 6px; }
.achv-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--streak);
  line-height: 1.1;
  margin-bottom: 4px;
}
.achv-label { color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.achv-grades h4 { margin: 0 0 10px; color: var(--ink); font-size: 15px; }
.achv-grade-row {
  display: grid;
  grid-template-columns: 80px 1fr 50px;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.achv-grade-label { font-weight: 700; color: var(--ink); font-size: 14px; }
.achv-grade-bar {
  height: 10px;
  background: rgba(31,42,68,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.achv-grade-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #fb923c);
  border-radius: 999px;
  transition: width 0.5s ease;
}
.achv-grade-pct { color: var(--muted); font-size: 13px; text-align: right; font-weight: 600; }

.inprogress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.inprogress-card {
  display: grid;
  grid-template-columns: 48px 1fr 16px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fffbeb;
  border: 2px solid #fde68a;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.inprogress-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245,158,11,0.25);
  border-color: var(--accent);
  background: #fef3c7;
}
.inprogress-card:active { transform: translateY(0); }

.ip-icon {
  font-size: 34px;
  line-height: 1;
  text-align: center;
}
.ip-body { min-width: 0; }
.ip-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.2px;
}
.ip-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  font-weight: 500;
}
.ip-bar {
  height: 6px;
  background: rgba(245,158,11,0.18);
  border-radius: 999px;
  margin-top: 10px;
  overflow: hidden;
}
.ip-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #fbbf24);
  border-radius: 999px;
  transition: width 0.4s;
}
.ip-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  color: #92400e;
  font-weight: 600;
}
.ip-stat-sep { opacity: 0.5; }
.ip-stat-time { color: var(--muted); font-weight: 500; }
.ip-arrow {
  font-size: 14px;
  color: var(--accent);
  align-self: center;
  opacity: 0.7;
  transition: transform 0.15s, opacity 0.15s;
}
.inprogress-card:hover .ip-arrow { transform: translateX(3px); opacity: 1; }

.subject-progress-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.subject-progress {
  background: var(--card-hover);
  color: var(--ink);
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.sp-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sp-name { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--ink); }
.sp-name small { color: var(--muted); font-weight: 500; font-size: 12px; }
.sp-stats { font-size: 12px; color: var(--muted); font-weight: 500; }

.sp-bar {
  height: 10px;
  background: var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.sp-fill {
  height: 100%;
  transition: width 0.4s ease-out;
  border-radius: 999px;
}
.sp-fill.sp-good { background: linear-gradient(90deg, var(--good), #84cc16); }
.sp-fill.sp-ok   { background: linear-gradient(90deg, var(--accent), #fbbf24); }
.sp-fill.sp-bad  { background: linear-gradient(90deg, var(--bad), #f87171); }

.sp-footer { font-size: 12px; color: var(--muted); font-weight: 500; }
.sp-avg { font-size: 13px; font-weight: 800; }
.sp-avg.sp-good { color: var(--good); }
.sp-avg.sp-ok   { color: var(--accent); }
.sp-avg.sp-bad  { color: var(--bad); }

/* === Dashboard responsive за тесни екрани === */
@media (max-width: 600px) {
  .dashboard { max-width: 100%; }
  .dash-hero {
    padding: 18px 18px;
    margin-bottom: 14px;
  }
  .dash-name { font-size: 17px; }
  .dash-stars { font-size: 18px; padding: 5px 12px; }
  .dash-section {
    padding: 18px 14px;
    margin-bottom: 14px;
    border-radius: 14px;
  }
  .dash-section h3 { font-size: 16px; margin-bottom: 12px; }
  .inprogress-grid, .recs-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .inprogress-card, .rec-card {
    grid-template-columns: 40px 1fr 14px;
    gap: 12px;
    padding: 13px 13px;
  }
  .ip-icon, .rec-icon { font-size: 28px; }
  .ip-title, .rec-title { font-size: 15px; }
  .ip-meta, .rec-meta { font-size: 11px; }
  .ip-stats { font-size: 11px; gap: 5px; }
  .rec-reason { font-size: 12px; }
  .subject-progress { padding: 12px 14px; }
  .sp-name { font-size: 14px; }
  .sp-stats, .sp-footer { font-size: 11px; }
}

/* ===== RECOMMENDATIONS ===== */
.dash-recommendations { border-left: 4px solid #6366f1; }
.recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.rec-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr 16px;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 14px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.rec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.rec-card:active { transform: translateY(0); }
.rec-tag {
  position: absolute;
  top: -10px;
  left: 12px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 999px;
  letter-spacing: 0.4px;
  background: white;
  border: 2px solid;
  text-transform: uppercase;
}
.rec-card.rec-weak { border-color: #fecaca; background: #fef2f2; }
.rec-card.rec-weak .rec-tag { border-color: var(--bad); color: var(--bad); }
.rec-card.rec-weak:hover { border-color: var(--bad); }
.rec-card.rec-new { border-color: #c7d2fe; background: #eef2ff; }
.rec-card.rec-new .rec-tag { border-color: var(--primary); color: var(--primary); }
.rec-card.rec-new:hover { border-color: var(--primary); }
.rec-card.rec-stale { border-color: #d1fae5; background: #f0fdf4; }
.rec-card.rec-stale .rec-tag { border-color: var(--good); color: var(--good); }
.rec-card.rec-stale:hover { border-color: var(--good); }
.rec-icon { font-size: 34px; line-height: 1; text-align: center; }
.rec-body { min-width: 0; }
.rec-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.2px;
}
.rec-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  font-weight: 500;
}
.rec-reason {
  font-size: 13px;
  color: var(--ink);
  margin-top: 6px;
  font-style: italic;
  opacity: 0.85;
}
.rec-arrow {
  font-size: 14px;
  align-self: center;
  opacity: 0.6;
  transition: transform 0.15s, opacity 0.15s;
}
.rec-card.rec-weak .rec-arrow { color: var(--bad); }
.rec-card.rec-new .rec-arrow { color: var(--primary); }
.rec-card.rec-stale .rec-arrow { color: var(--good); }
.rec-card:hover .rec-arrow { transform: translateX(3px); opacity: 1; }

.recent-list, .weak-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recent-item, .weak-item {
  display: grid;
  grid-template-columns: 2fr 2fr 80px auto;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card-hover);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: center;
}
.recent-item .recent-game, .weak-item .weak-game {
  font-weight: 700;
}
.recent-meta, .weak-meta {
  color: var(--muted);
  font-size: 13px;
}
.recent-score {
  font-weight: 800;
  text-align: center;
  padding: 4px 8px;
  border-radius: 8px;
}
.recent-score.good { color: var(--good); background: #f0fdf4; }
.recent-score.ok   { color: var(--accent); background: #fffbeb; }
.recent-score.bad  { color: var(--bad); background: #fef2f2; }
.recent-date {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}
.weak-item {
  grid-template-columns: 2fr 2fr 60px 2fr;
}
.weak-score {
  font-weight: 800;
  color: var(--bad);
  text-align: center;
}
.weak-hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .recent-item, .weak-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .recent-date, .recent-score { text-align: left; }
}

/* ===== STAGE PICKER (entry page) ===== */
.stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto 24px;
}
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.stage-card {
  border-radius: 20px;
  padding: 32px 24px 28px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(31,42,68,0.14);
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.05), box-shadow 0.22s;
  color: white;
  position: relative;
  overflow: hidden;
  animation: cardSlideIn 0.5s both;
}
.stage-card:nth-child(1) { animation-delay: 0.05s; }
.stage-card:nth-child(2) { animation-delay: 0.15s; }
.stage-card:nth-child(3) { animation-delay: 0.25s; }
.stage-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.stage-card.stage-primary {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 60%, #4ade80 100%);
}
.stage-card.stage-progymnasium {
  background: linear-gradient(135deg, #2563eb 0%, #6366f1 60%, #a855f7 100%);
}
.stage-card.stage-gymnasium {
  background: linear-gradient(135deg, #db2777 0%, #ec4899 50%, #f97316 100%);
}
.stage-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 24px 52px rgba(31,42,68,0.28);
}
.stage-card:active { transform: translateY(-4px) scale(1); }
.stage-card.is-soon {
  opacity: 0.7;
  cursor: not-allowed;
}
.stage-card.is-soon:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(31,42,68,0.18);
}
.stage-icon {
  font-size: 60px;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
  display: inline-block;
  transition: transform 0.3s;
}
.stage-card:hover .stage-icon { transform: scale(1.08) rotate(-3deg); }
.stage-name {
  margin: 0 0 8px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.stage-classes {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 8px;
  letter-spacing: -0.8px;
  line-height: 1;
}
.stage-desc {
  font-size: 14px;
  opacity: 0.95;
  margin-bottom: 2px;
  font-weight: 500;
}
.stage-ages {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 16px;
}
.stage-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.25);
  color: white;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.18);
}
.stage-badge.ready { background: rgba(255,255,255,0.32); }
.stage-badge.active { background: rgba(255,255,255,0.25); }
.stage-badge.soon { background: rgba(0,0,0,0.22); }

@media (max-width: 600px) {
  .stage-card { padding: 28px 22px 24px; border-radius: 18px; }
  .stage-icon { font-size: 56px; }
  .stage-name { font-size: 21px; }
  .stage-classes { font-size: 32px; }
  .stage-desc { font-size: 15px; }
}

/* ===== GRADE PICKER ===== */
.grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 24px;
}
.grade-card {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: white;
  border-radius: 18px;
  padding: 30px 18px 24px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(37,99,235,0.22);
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.05), box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  animation: cardSlideIn 0.45s both;
}
.grade-card:nth-child(1) { animation-delay: 0.05s; }
.grade-card:nth-child(2) { animation-delay: 0.1s; }
.grade-card:nth-child(3) { animation-delay: 0.15s; }
.grade-card:nth-child(4) { animation-delay: 0.2s; }
.grade-card:nth-child(n+5) { animation-delay: 0.25s; }
.grade-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.16), transparent 60%);
  pointer-events: none;
}
.grade-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 44px rgba(37, 99, 235, 0.45);
}
.grade-card:active { transform: translateY(-2px) scale(1); }
.grade-card .grade-num {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  text-shadow: 0 4px 12px rgba(0,0,0,0.22);
  position: relative;
}
.grade-card.is-soon {
  background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
  opacity: 0.7;
  cursor: not-allowed;
}
.grade-card.is-soon:hover {
  transform: translateY(-2px) scale(1);
  box-shadow: 0 10px 22px rgba(31,42,68,0.18);
}
.grade-card .grade-label {
  font-size: 17px;
  opacity: 0.9;
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: -0.2px;
  position: relative;
}
.grade-card .grade-info {
  margin-top: 14px;
  font-size: 13px;
  opacity: 0.92;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  position: relative;
}

@media (max-width: 600px) {
  .grade-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grade-card { padding: 24px 16px 20px; border-radius: 16px; }
  .grade-card .grade-num { font-size: 56px; }
  .grade-card .grade-label { font-size: 15px; }
  .grade-card .grade-info { font-size: 12px; margin-top: 10px; }
}
@media (max-width: 380px) {
  .grade-grid { grid-template-columns: 1fr; }
}
.ready-badge {
  background: rgba(255,255,255,0.25);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.hint-text {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 24px 0 0;
}

/* ===== SUBJECT PICKER ===== */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
}
.subject-card {
  background: var(--card);
  border-radius: 16px;
  padding: 18px 16px 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(31,42,68,0.06);
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.05), box-shadow 0.18s, border-color 0.18s;
  border: 2px solid transparent;
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
  animation: cardSlideIn 0.4s both;
}
.subject-card:nth-child(1) { animation-delay: 0.02s; }
.subject-card:nth-child(2) { animation-delay: 0.05s; }
.subject-card:nth-child(3) { animation-delay: 0.08s; }
.subject-card:nth-child(4) { animation-delay: 0.11s; }
.subject-card:nth-child(5) { animation-delay: 0.14s; }
.subject-card:nth-child(6) { animation-delay: 0.17s; }
.subject-card:nth-child(n+7) { animation-delay: 0.2s; }
.subject-card.is-ready:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 14px 32px rgba(37,99,235,0.18);
}
.subject-card.is-ready:active { transform: translateY(-1px); }
.subject-card.is-matura {
  border-color: #f59e0b;
  background: linear-gradient(180deg, #fffbeb, #fff);
  position: relative;
}
.subject-card.is-matura:hover {
  border-color: #d97706;
  box-shadow: 0 14px 32px rgba(245,158,11,0.25);
}
.matura-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(245,158,11,0.4);
}
.subject-card.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.subject-card.is-soon:hover {
  transform: translateY(-1px);
  border-color: #e2e8f0;
}
.subject-card .subject-icon {
  font-size: 40px;
  margin-bottom: 8px;
  line-height: 1;
  transition: transform 0.2s;
}
.subject-card.is-ready:hover .subject-icon { transform: scale(1.1) rotate(-2deg); }
.subject-card h3 {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.status-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: auto;
}
.status-tag.ready {
  background: #d1fae5;
  color: #065f46;
}
.status-tag.soon {
  background: #fef3c7;
  color: #92400e;
}

@media (max-width: 600px) {
  .subject-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .subject-card { padding: 14px 12px 12px; border-radius: 14px; }
  .subject-card .subject-icon { font-size: 32px; margin-bottom: 6px; }
  .subject-card h3 { font-size: 13px; margin-bottom: 10px; }
  .status-tag { font-size: 10px; padding: 3px 9px; }
}

/* ===== "SOON" PLACEHOLDER ===== */
.soon-screen {
  text-align: center;
  padding: 56px 24px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  max-width: 540px;
  margin: 0 auto;
  animation: cardSlideIn 0.45s both;
}
.soon-icon {
  font-size: 80px;
  margin-bottom: 16px;
  display: inline-block;
  animation: iconFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.15));
}
.soon-screen h2 {
  font-size: 28px;
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: -0.4px;
}
.soon-msg {
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 6px;
  font-weight: 500;
}
.soon-sub {
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 14px;
}
@media (max-width: 480px) {
  .soon-screen { padding: 40px 18px; border-radius: 16px; }
  .soon-icon { font-size: 68px; }
  .soon-screen h2 { font-size: 24px; }
  .soon-msg { font-size: 16px; }
}

/* ===== MENU (games list, reused) ===== */
.menu-intro {
  text-align: center;
  margin-bottom: 28px;
  animation: cardSlideIn 0.4s both;
}
.menu-intro h2 {
  font-size: 30px;
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.menu-intro p {
  color: var(--muted);
  margin: 0;
  font-size: 16px;
}
@media (max-width: 600px) {
  .menu-intro { margin-bottom: 20px; }
  .menu-intro h2 { font-size: 24px; }
  .menu-intro p { font-size: 14px; }
}

/* === Home page: Videos banner (above stage cards) === */
.home-videos-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 28px;
  margin: 0 auto 26px;
  max-width: 1100px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.4, 0, .2, 1),
              box-shadow 0.25s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.22);
  animation: cardSlideIn 0.4s both;
}
.home-videos-banner::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.home-videos-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(139, 92, 246, 0.35);
}
.home-videos-banner-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
}
.home-videos-banner-text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.home-videos-banner-text h3 {
  margin: 0 0 3px;
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
}
.home-videos-banner-text p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}
.home-videos-banner-arrow {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: #6366f1;
  font-weight: 900;
  background: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.25s;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.home-videos-banner:hover .home-videos-banner-arrow {
  transform: translateX(4px);
}

/* === Video Library page === */
.video-library {
  max-width: 1100px;
  margin: 0 auto;
  animation: cardSlideIn 0.4s both;
}
.video-filters {
  margin: 0 0 22px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid rgba(31,42,68,0.06);
  border-radius: 14px;
}
.video-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.video-filter-row:last-child { margin-bottom: 0; }
.video-filter-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 4px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.video-filter-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(31,42,68,0.10);
  background: white;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.video-filter-chip:hover {
  border-color: var(--primary);
}
.video-filter-chip.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.video-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
  gap: 16px;
  justify-content: start;
}
@media (min-width: 1100px) {
  .video-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1200px;
  }
}
@media (min-width: 1600px) {
  .video-library-grid {
    grid-template-columns: repeat(3, minmax(0, 420px));
    max-width: 1400px;
  }
}
.video-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.video-card-badge {
  display: inline-block;
  padding: 3px 8px;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.video-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
}

/* === Subject view: Videos section (below games) === */
.subject-videos {
  margin: 40px 0 24px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  animation: cardSlideIn 0.4s both;
}
.subject-videos-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 22px;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.video-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
  gap: 14px;
  justify-content: start;
}
.video-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 360px;
  padding: 0;
  border: 1px solid rgba(31,42,68,0.08);
  background: var(--card);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(31,42,68,0.07);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  font-family: inherit;
}
.video-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(31,42,68,0.12);
  border-color: var(--primary);
}
.video-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #f1f5f9;
  overflow: hidden;
}
.video-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.92);
  color: white;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  padding-left: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}
.video-card:hover .video-card-play {
  transform: translate(-50%, -50%) scale(1.1);
}
.video-card-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
}
.video-card-body {
  padding: 14px 14px 16px;
}
.video-card-body h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.2px;
  line-height: 1.3;
}
.video-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* === Dedicated video page === */
.video-page {
  max-width: 920px;
  margin: 0 auto;
  animation: cardSlideIn 0.4s both;
}
.video-breadcrumb {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: 0.1px;
}
.video-page-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -0.4px;
  color: var(--ink);
  line-height: 1.25;
}
.video-player-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(31,42,68,0.15);
}
.video-player-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-meta {
  margin: 12px auto 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  max-width: 720px;
  text-align: center;
}
.video-description {
  margin: 14px auto 18px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
  max-width: 720px;
}
.video-section {
  margin-top: 28px;
}
.video-section > h3 {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.video-learn {
  margin: 0;
  padding: 0 0 0 22px;
  list-style: disc;
}
.video-learn li {
  margin: 6px 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
.video-rec-games {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.video-rec-card {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  text-align: left;
  background: var(--card);
}
.video-sources-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 28px;
}
.video-sources-intro {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.video-mon-note {
  margin: 20px 0 24px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--brand-300, #ccd);
  border-radius: 4px;
}
.video-sources {
  margin: 0;
  padding: 0 0 0 22px;
  list-style: disc;
}
.video-sources li {
  margin: 4px 0;
  color: var(--ink);
  font-size: 14px;
}
.video-other-placements {
  margin-top: 24px;
  padding: 16px 18px;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 12px;
}
.video-other-placements strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
}
.video-other-placements ul {
  margin: 0;
  padding: 0 0 0 22px;
}
.video-other-placements li {
  font-size: 14px;
  color: var(--ink);
}
@media (max-width: 600px) {
  .video-page-title { font-size: 22px; }
  .video-section > h3 { font-size: 17px; }
  .video-cards-row { grid-template-columns: 1fr; }
  .video-library-grid { grid-template-columns: 1fr; }
  .video-cards-row .video-card,
  .video-library-grid .video-card { max-width: 100%; }
  .video-rec-games { grid-template-columns: 1fr 1fr; }
  .video-filter-row { gap: 6px; }
  .video-filter-label { font-size: 12px; }
  .video-filter-chip { padding: 5px 10px; font-size: 12px; }
  .home-videos-banner { padding: 14px 16px; gap: 12px; }
  .home-videos-banner-icon { font-size: 32px; }
  .home-videos-banner-text h3 { font-size: 16px; }
}

/* === Subject view: Continue banner === */
.subj-continue {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 14px 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 14px;
  animation: cardSlideIn 0.4s both;
  animation-delay: 0.1s;
}
.subj-continue[hidden] { display: none !important; }
.subj-cont-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.subj-cont-body { flex: 1; min-width: 0; }
.subj-cont-title {
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
}
.subj-cont-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.subj-cont-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 14px;
}
@media (max-width: 600px) {
  .subj-continue { padding: 12px 14px; gap: 10px; }
  .subj-cont-icon { font-size: 28px; }
  .subj-cont-title { font-size: 14px; }
  .subj-cont-btn { padding: 8px 12px; font-size: 13px; }
}

/* === Subject view: Bonus secn под grid (daily fact) === */
.subj-bonus {
  max-width: 1200px;
  margin: 32px auto 0;
  animation: cardSlideIn 0.4s both;
  animation-delay: 0.2s;
}
.subj-bonus:empty { display: none; }
.subj-bonus .dash-daily-fact {
  margin: 0;
}

/* ===== SETTINGS ===== */
.settings-page { max-width: 640px; margin: 0 auto; }
.settings-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.settings-card h3 {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
}
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.setting-label { flex: 1; }
.setting-name { font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.setting-desc { font-size: 13px; color: var(--muted); }
.setting-control { flex-shrink: 0; }

.seg-control {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg-btn {
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active {
  background: var(--primary);
  color: white;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--border-strong);
  border-radius: 999px;
  transition: 0.25s;
}
.switch-slider::before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .switch-slider { background: var(--primary); }
.switch input:checked + .switch-slider::before { transform: translateX(22px); }

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 160px;
  height: 6px;
  background: var(--border-strong);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--primary);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

html[data-text-size="small"] { font-size: 14px; }
html[data-text-size="medium"] { font-size: 16px; }
html[data-text-size="large"] { font-size: 18.5px; }
@media print { html[data-text-size] { font-size: 11pt !important; } }

.profile-info { font-size: 14px; line-height: 1.8; color: var(--ink); margin-bottom: 16px; }
.pi-label { font-weight: 600; color: var(--muted); margin-right: 6px; }
.profile-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s;
}
.profile-input:focus { border-color: var(--primary); }
.name-status { font-size: 13px; margin-bottom: 12px; min-height: 18px; }
.name-status-ok { color: var(--good); font-weight: 600; }
.name-status-err { color: var(--bad); font-weight: 600; }
.settings-logout {
  background: var(--bad-soft);
  color: var(--bad);
  border: 1px solid var(--bad);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.settings-logout:hover { background: var(--bad); color: white; }

.settings-version {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 20px;
}

@media (max-width: 600px) {
  .setting-row { flex-direction: column; align-items: stretch; }
  .seg-control { width: 100%; justify-content: center; }
  .seg-btn { flex: 1; }
}

.continue-banner {
  margin: 0 auto 24px;
  max-width: 480px;
  padding: 12px 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 14px;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.continue-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245,158,11,0.35);
}
.continue-banner .cb-icon { font-size: 18px; }
.continue-banner strong { color: var(--accent-deep); }

.daily-challenge {
  margin: 0 auto 24px;
  max-width: 480px;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  border-radius: 18px;
  color: white;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(37,99,235,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.daily-challenge:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(37,99,235,0.35);
}
.daily-challenge.daily-done {
  background: linear-gradient(135deg, var(--good), #059669);
  cursor: default;
  opacity: 0.85;
}
.daily-challenge.daily-done:hover { transform: none; box-shadow: 0 8px 24px rgba(22,163,74,0.25); }
.daily-label {
  font-size: 11px;
  letter-spacing: 0.25em;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 6px;
}
.daily-title { font-size: 20px; font-weight: 800; margin-bottom: 3px; letter-spacing: -0.3px; }
.daily-meta { font-size: 13px; opacity: 0.85; margin-bottom: 10px; }
.daily-go {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.daily-go:hover { background: rgba(255,255,255,0.28); }
.daily-done-msg { font-size: 14px; font-weight: 700; }

@media (max-width: 600px) {
  .continue-banner { font-size: 14px; padding: 10px 14px; }
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
@media (min-width: 1400px) {
  .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 320px));
    justify-content: start;
  }
}

.game-card {
  background: var(--card);
  border-radius: 16px;
  padding: 22px 20px 18px;
  box-shadow: 0 4px 14px rgba(31,42,68,0.06);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.05), box-shadow 0.18s, border-color 0.18s;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  position: relative;
  animation: cardSlideIn 0.4s both;
}
.game-print-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: white;
  border: 1px solid rgba(31,42,68,0.12);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  opacity: 0.6;
  z-index: 2;
}
.game-print-btn:hover {
  opacity: 1;
  background: var(--ink);
  border-color: var(--ink);
  color: white;
  transform: scale(1.08);
}
.subject-print-btn {
  margin-top: 14px;
  background: white;
  border: 1px solid rgba(31,42,68,0.18);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}
.subject-print-btn:hover {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
  transform: translateY(-1px);
}
.game-card:nth-child(1) { animation-delay: 0.03s; }
.game-card:nth-child(2) { animation-delay: 0.06s; }
.game-card:nth-child(3) { animation-delay: 0.09s; }
.game-card:nth-child(4) { animation-delay: 0.12s; }
.game-card:nth-child(5) { animation-delay: 0.15s; }
.game-card:nth-child(6) { animation-delay: 0.18s; }
.game-card:nth-child(n+7) { animation-delay: 0.21s; }
.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(37,99,235,0.16);
  border-color: var(--primary);
}
.game-card:active { transform: translateY(-2px); }
.game-card .icon {
  font-size: 46px;
  margin-bottom: 12px;
  line-height: 1;
  transition: transform 0.25s;
}
.game-card:hover .icon { transform: scale(1.1) rotate(-3deg); }
.game-card h3 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.3;
  word-wrap: break-word;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.game-card p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
}
.game-card .skill-tag {
  display: inline-block;
  background: #eef2ff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: auto;
}
.game-card .best {
  float: right;
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
}

/* ===== GAME SHELL ===== */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
.game-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.game-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.game-context-line {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.1px;
}
.game-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.timer, .progress-text {
  background: white;
  padding: 7px 13px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(31,42,68,0.08);
  letter-spacing: -0.2px;
  border: 1px solid rgba(31,42,68,0.04);
}
.timer.warning { color: var(--bad); animation: pulse 0.6s infinite; }
@keyframes pulse { 50% { transform: scale(1.05); } }

.game-progress-bar {
  flex-basis: 100%;
  height: 6px;
  background: rgba(31,42,68,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.game-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}

.streak-pill {
  background: linear-gradient(135deg, #fb923c, #f97316);
  color: white;
  padding: 7px 13px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(249,115,22,0.35);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}
.streak-pill.in-record {
  background: linear-gradient(135deg, #dc2626, #f59e0b, #fb923c);
  background-size: 200% 200%;
  animation: recordShimmer 2s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(220,38,38,0.5), 0 0 0 2px rgba(245,158,11,0.4);
  transform: scale(1.08);
}
.streak-record-pulse {
  display: inline-block;
  animation: recordPulse 1s ease-in-out infinite;
}
.streak-record-tag {
  font-size: 9px;
  font-weight: 900;
  background: rgba(255,255,255,0.25);
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
@keyframes recordShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes recordPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
.streak-pill {
  animation: streakBeat 0.3s;
}
@keyframes streakBeat {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.streak-celebration {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: linear-gradient(135deg, #fb923c, #ea580c);
  color: white;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(234,88,12,0.45);
  opacity: 0;
  z-index: 400; /* streak-celebration: над toast (300), под resume-overlay (600) */
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.6);
  pointer-events: none;
  white-space: nowrap;
}
.streak-celebration.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.streak-celebration strong {
  font-size: 16px;
  margin: 0 4px;
}

.game-area {
  background: var(--card);
  color: var(--ink);
  border-radius: 18px;
  padding: 26px;
  box-shadow: var(--shadow);
  min-height: 420px;
  animation: cardSlideIn 0.35s both;
}

.city-reveal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700; /* city-reveal-overlay: най-висок modal слой */
  animation: revealFade 0.25s;
}
.city-reveal-overlay.closing { animation: revealFade 0.2s reverse; }
.city-reveal-card {
  background: var(--card);
  color: var(--ink);
  border-radius: 18px;
  padding: 20px 22px 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.4);
  text-align: center;
  max-width: 360px;
  width: calc(100% - 40px);
  animation: revealPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.city-reveal-card img {
  width: 100%;
  max-width: 320px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}
.city-no-img {
  font-size: 80px;
  color: var(--good);
  margin: 8px 0;
}
.city-reveal-name {
  font-size: 24px;
  font-weight: 800;
  margin-top: 12px;
  color: var(--good);
}
.city-reveal-hint {
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}
.city-reveal-next {
  margin-top: 14px;
  padding: 10px 24px;
  font-size: 15px;
}
@keyframes revealFade { from { opacity: 0; } }
@keyframes revealPop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 16px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 300; /* toast: background notification, най-нисък слой */
  animation: toastIn 0.3s, toastOut 0.3s 1.2s forwards;
}
.toast.good { background: var(--good); color: white; }
.toast.bad { background: var(--bad); color: white; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -20px); } }
@keyframes toastOut { to { opacity: 0; transform: translate(-50%, -20px); } }

/* ===== BLIND MAP ===== */
.map-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 800px) {
  .map-wrap { grid-template-columns: 1fr; }
}

.bg-map {
  position: relative;
  background: #e8f5e9;
  border-radius: 12px;
  aspect-ratio: 1.5 / 1;
  overflow: hidden;
  border: 2px solid #c8e6c9;
}
.bg-map svg { width: 100%; height: 100%; display: block; }
.bg-map .target {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.15);
  border: 2px dashed var(--primary);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.bg-map .target.filled {
  background: var(--good);
  color: white;
  border-style: solid;
  border-color: var(--good);
}
.bg-map .target.active {
  background: var(--accent);
  border-color: var(--accent);
  animation: glow 1.2s infinite;
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
}

.label-pool {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.label-pool h3 { margin: 0 0 8px; font-size: 16px; color: var(--muted); }
.draggable {
  background: var(--card);
  border: 2px solid var(--primary);
  color: var(--primary);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  cursor: grab;
  text-align: center;
  user-select: none;
  transition: transform 0.1s;
}
.draggable:hover { transform: scale(1.03); }
.draggable.dragging { opacity: 0.5; }
.draggable.placed { display: none; }

/* ===== CHRONO ===== */
.chrono-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto;
}
.chrono-item {
  background: var(--card-hover);
  color: var(--ink);
  border: 2px solid var(--border-strong);
  border-radius: 12px;
  padding: 16px;
  cursor: grab;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.15s, border-color 0.15s;
}
.chrono-item:hover { border-color: var(--primary); }
.chrono-item.dragging { opacity: 0.5; }
.chrono-item .drag-handle { color: var(--muted); font-size: 20px; }
.chrono-item .label { flex: 1; color: var(--ink); font-weight: 600; }
.chrono-item.correct { border-color: var(--good); background: var(--good-soft); }
.chrono-item.wrong { border-color: var(--bad); background: var(--bad-soft); }
.chrono-item .year { font-weight: 700; color: var(--muted); font-size: 14px; }
.chrono-item .year.revealed { color: var(--ink); }

/* ===== MEMORY MATCH ===== */
.match-board {
  display: grid;
  /* Хоризонтални карти 4 колонки на desktop. PAIRS=5 (10 карти) пуска 5 колонки за чисто 2x5. */
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
.match-board:has(.match-card:nth-child(10):last-child) {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 900px) {
  .match-board { grid-template-columns: repeat(3, 1fr); max-width: 100%; }
  .match-board:has(.match-card:nth-child(10):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .match-board { grid-template-columns: repeat(2, 1fr); }
  .match-board:has(.match-card:nth-child(10):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}
.match-card {
  /* Хоризонтални карти (по-широки от високи) на desktop */
  aspect-ratio: 5 / 3;
  background: var(--primary);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  perspective: 1000px;
  transition: transform 0.15s;
}
@media (max-width: 600px) {
  .match-card { aspect-ratio: 4 / 3; }
}
.match-card:hover { transform: scale(1.03); }
.match-card .face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  backface-visibility: hidden;
  font-weight: 700;
  transition: transform 0.4s;
  font-size: 14px;
}
.match-card .face.back {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  font-size: 32px;
}
.match-card .face.front {
  background: white;
  border: 2px solid var(--primary);
  color: var(--ink);
  transform: rotateY(180deg);
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.match-card .card-portrait {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  border-radius: 8px;
}
.match-card.portrait .card-label {
  font-size: 13px;
  font-weight: 700;
}
.match-card.deed .face.front {
  background: #fef3c7;
  border-color: #f59e0b;
}
.match-card.deed .card-label {
  font-size: 13px;
  line-height: 1.3;
}
.match-card.flipped .face.back { transform: rotateY(180deg); }
.match-card.flipped .face.front { transform: rotateY(0); }
.match-card.matched { animation: matchPop 0.4s; pointer-events: none; }
.match-card.matched .face.front { border-color: var(--good); background: #f0fdf4; }
/* Когато една карта има и .matched и .deed - matched винаги печели (зелено успешно) */
.match-card.matched.deed .face.front { border-color: var(--good); background: #f0fdf4; }
@keyframes matchPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ===== SORT ===== */
.sort-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.sort-falling-area {
  min-height: 120px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.falling-word {
  background: var(--accent);
  color: white;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(245,158,11,0.4);
  animation: bounce 0.6s infinite alternate;
  display: flex;
  align-items: center;
  gap: 14px;
}
.falling-img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid white;
}
@keyframes bounce {
  to { transform: translateY(-8px); }
}
.sort-bins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 800px;
}
.sort-bin {
  background: #f8fafc;
  border: 3px dashed #cbd5e1;
  border-radius: 14px;
  padding: 24px 16px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s;
}
.sort-bin:hover { border-color: var(--primary); background: #eef2ff; transform: translateY(-2px); }
.sort-bin .bin-icon { font-size: 32px; display: block; margin-bottom: 6px; }
.sort-bin.flash-good { border-color: var(--good); background: #f0fdf4; }
.sort-bin.flash-bad { border-color: var(--bad); background: #fef2f2; }

/* ===== QUIZ & VISUAL ===== */
.quiz-stage, .visual-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 700px;
  margin: 0 auto;
}
.quiz-question {
  font-size: 22px;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}
.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
@media (max-width: 600px) {
  .quiz-options { grid-template-columns: 1fr; }
}
.quiz-option {
  background: var(--card);
  border: 2px solid var(--primary);
  color: var(--ink);
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  transition: transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.05), background 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(37,99,235,0.08);
  line-height: 1.3;
}
.quiz-option:hover:not(:disabled) {
  background: var(--card-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(37,99,235,0.18);
}
.quiz-option:active:not(:disabled) { transform: translateY(-1px); }
.quiz-option:disabled { cursor: default; opacity: 0.6; box-shadow: none; }
.quiz-option.quiz-correct {
  background: #f0fdf4 !important;
  border-color: var(--good) !important;
  color: var(--good);
  opacity: 1;
}
.quiz-option.quiz-wrong {
  background: #fef2f2 !important;
  border-color: var(--bad) !important;
  color: var(--bad);
  opacity: 1;
}
.visual-image-wrap {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: var(--shadow);
}
.visual-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== MATH GAMES ===== */
.math-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 24px 0;
}
.math-equation {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--ink);
  background: linear-gradient(135deg, #eef2ff, #fdf4ff);
  padding: 20px 40px;
  border-radius: 16px;
  text-align: center;
  box-shadow: var(--shadow);
}
.math-blank {
  color: var(--accent);
  font-style: italic;
}
.math-options {
  max-width: 540px;
  width: 100%;
}
.math-opt {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
}

.compare-eq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: 64px;
  font-weight: 800;
  padding: 30px;
}
.compare-num {
  background: white;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  color: var(--primary);
}
.compare-slot {
  color: var(--accent);
  width: 80px;
  text-align: center;
}
.compare-buttons {
  display: flex;
  gap: 16px;
}
.compare-btn {
  width: 100px;
  height: 100px;
  font-size: 48px;
  font-weight: 800;
  background: white;
  color: var(--primary);
  border: 3px solid var(--primary);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.compare-btn:hover:not(:disabled) {
  background: var(--primary);
  color: white;
  transform: translateY(-3px);
}
.compare-btn:disabled { opacity: 0.5; cursor: default; }
.compare-btn.quiz-correct {
  background: var(--good) !important;
  border-color: var(--good) !important;
  color: white !important;
  opacity: 1;
}
.compare-btn.quiz-wrong {
  background: var(--bad) !important;
  border-color: var(--bad) !important;
  color: white !important;
  opacity: 1;
}

.compare-expr-eq {
  font-size: 36px;
  gap: 16px;
  flex-wrap: wrap;
}
.compare-expr-eq .compare-num {
  font-size: 32px;
  padding: 12px 18px;
  letter-spacing: 1px;
}

.verify-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.verify-btn {
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  padding: 18px 36px;
  border-radius: 14px;
  border: 3px solid;
  cursor: pointer;
  transition: all 0.15s;
  background: white;
}
.verify-btn.good-btn { border-color: var(--good); color: var(--good); }
.verify-btn.bad-btn  { border-color: var(--bad);  color: var(--bad); }
.verify-btn.good-btn:hover:not(:disabled) { background: var(--good); color: white; }
.verify-btn.bad-btn:hover:not(:disabled)  { background: var(--bad);  color: white; }
.verify-btn:disabled { opacity: 0.5; cursor: default; }
.verify-btn.quiz-correct {
  background: var(--good) !important;
  border-color: var(--good) !important;
  color: white !important;
  opacity: 1;
}
.verify-btn.quiz-wrong {
  background: var(--bad) !important;
  border-color: var(--bad) !important;
  color: white !important;
  opacity: 1;
}

.frac-question {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(135deg, #eef2ff, #fdf4ff);
  padding: 24px 32px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.frac {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  margin: 0 6px;
  line-height: 1;
}
.frac .num {
  border-bottom: 3px solid var(--ink);
  padding: 0 6px 2px;
  font-size: 32px;
}
.frac .den {
  padding: 2px 6px 0;
  font-size: 32px;
}
.frac-question .whole {
  color: var(--primary);
  font-size: 44px;
}

.units-eq {
  font-size: 42px;
  letter-spacing: 2px;
}

.roman-display {
  font-size: 84px;
  letter-spacing: 12px;
  font-family: 'Trajan Pro', 'Times New Roman', serif;
  color: #92400e;
}

.area-stage {
  width: 360px;
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px;
}
.area-stage svg { width: 100%; height: 200px; }

.counting-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #eef2ff, #fdf4ff);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.seq-num {
  background: white;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  min-width: 80px;
  text-align: center;
}
.seq-blank {
  color: var(--accent);
  border: 3px dashed var(--accent);
  background: white;
}
.seq-arrow {
  font-size: 24px;
  color: var(--muted);
  font-weight: 700;
}

.decompose-options {
  grid-template-columns: 1fr 1fr;
  max-width: 720px;
}
.decompose-options .math-opt {
  font-size: 18px;
  letter-spacing: 0;
}

.indirect-problem {
  font-size: 19px;
  line-height: 1.6;
}

.table-title {
  font-size: 20px;
  margin: 0 0 12px;
  color: var(--ink);
  text-align: center;
}
.data-table {
  border-collapse: collapse;
  margin: 0 auto;
  background: white;
  box-shadow: var(--shadow);
  border-radius: 12px;
  overflow: hidden;
  min-width: 320px;
}
.data-table th, .data-table td {
  padding: 10px 18px;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
}
.data-table th {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  font-weight: 700;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #f8fafc; }
.table-question {
  margin: 16px 0 0;
}

.word-stage { max-width: 720px; }
.word-problem {
  font-size: 22px;
  line-height: 1.5;
  background: #fffbeb;
  border-left: 6px solid var(--accent);
  padding: 20px 24px;
  border-radius: 12px;
  margin: 0 0 12px;
}

.shape-display {
  width: 280px;
  height: 280px;
  background: white;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.shape-display svg { width: 100%; height: 100%; }

/* ===== КМ - Компютърно моделиране ===== */
.km-emoji {
  font-size: 120px;
  text-align: center;
  background: linear-gradient(135deg, #eef2ff, #fdf4ff);
  border-radius: 16px;
  padding: 24px;
  margin: 0 auto;
  max-width: 240px;
  box-shadow: var(--shadow);
}
.km-file-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #eef2ff, #fdf4ff);
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.km-file-icon { font-size: 80px; line-height: 1; }
.km-file-ext {
  font-family: 'Consolas', monospace;
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  background: white;
  padding: 4px 18px;
  border-radius: 8px;
  border: 2px solid var(--primary);
}

.km-loop-desc {
  font-size: 22px;
  text-align: center;
  background: #fffbeb;
  border-left: 6px solid var(--accent);
  padding: 24px 28px;
  border-radius: 12px;
}
.km-loop-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.km-loop-btn {
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  padding: 24px 36px;
  border-radius: 16px;
  border: 3px solid;
  cursor: pointer;
  background: white;
  transition: all 0.15s;
  text-align: center;
  line-height: 1.3;
  min-width: 180px;
}
.km-loop-btn:disabled { opacity: 0.5; cursor: default; }
.km-loop-btn.loop { border-color: var(--primary); color: var(--primary); }
.km-loop-btn.seq  { border-color: var(--accent); color: var(--accent); }
.km-loop-btn.loop:hover:not(:disabled) { background: var(--primary); color: white; transform: translateY(-3px); }
.km-loop-btn.seq:hover:not(:disabled)  { background: var(--accent); color: white; transform: translateY(-3px); }
.km-loop-btn .km-loop-btn-icon { display: block; font-size: 36px; line-height: 1; }
.km-loop-btn.quiz-correct { background: var(--good) !important; border-color: var(--good) !important; color: white !important; opacity: 1; }
.km-loop-btn.quiz-wrong   { background: var(--bad)  !important; border-color: var(--bad)  !important; color: white !important; opacity: 1; }

.algo-title {
  text-align: center;
  font-size: 22px;
  margin: 0;
  color: var(--primary);
}
.algo-num {
  font-weight: 800;
  color: var(--accent);
  margin: 0 8px;
  min-width: 24px;
  display: inline-block;
}

/* ===== RESULTS ===== */
.results {
  text-align: center;
  padding: 40px 20px;
  max-width: 600px;
  margin: 0 auto;
  animation: cardSlideIn 0.5s both;
  position: relative;
}
.results-perfect {
  background: linear-gradient(180deg, rgba(251,191,36,0.10), transparent 60%);
  border-radius: 24px;
  padding: 60px 20px 40px;
}
.results-perfect .results-msg {
  background-image: linear-gradient(135deg, #f59e0b, #d97706) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.big-emoji-perfect {
  animation: emojiPopPerfect 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
  filter: drop-shadow(0 12px 32px rgba(245,158,11,0.5)) !important;
}
@keyframes emojiPopPerfect {
  0% { opacity: 0; transform: scale(0.2) rotate(-20deg); }
  50% { opacity: 1; transform: scale(1.3) rotate(8deg); }
  75% { transform: scale(0.95) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1.1) rotate(0); }
}
.perfect-rays {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(251,191,36,0.25), transparent 60%);
  border-radius: 50%;
  animation: rayFadeIn 0.8s ease-out both;
  pointer-events: none;
  z-index: 0;
}
@keyframes rayFadeIn {
  0% { transform: translateX(-50%) scale(0.85); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
.results-perfect .big-emoji, .results-perfect h2, .results-perfect > p, .results-perfect .stats, .results-perfect .actions {
  position: relative;
  z-index: 1;
}
.results .big-emoji {
  font-size: 88px;
  margin-bottom: 8px;
  display: inline-block;
  animation: emojiPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.18));
}
@keyframes emojiPop {
  0% { opacity: 0; transform: scale(0.3) rotate(-10deg); }
  60% { opacity: 1; transform: scale(1.15) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.results h2 {
  font-size: 36px;
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: -0.8px;
  background: linear-gradient(135deg, #2563eb, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.results > p {
  color: var(--muted);
  font-size: 18px;
  margin: 0 0 8px;
  font-weight: 500;
}
.results .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px auto 24px;
  max-width: 480px;
}
.results .stat {
  background: white;
  padding: 18px 12px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(31,42,68,0.08);
  animation: cardSlideIn 0.4s both;
  border: 1px solid rgba(31,42,68,0.04);
}
.results .stat:nth-child(1) { animation-delay: 0.15s; }
.results .stat:nth-child(2) { animation-delay: 0.25s; }
.results .stat:nth-child(3) { animation-delay: 0.35s; }
.results .stat .val {
  font-size: 30px;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.8px;
  margin-bottom: 6px;
}
.results .stat .lbl {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.results .actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
  animation: cardSlideIn 0.4s both;
  animation-delay: 0.45s;
}
.results .actions button {
  min-width: 160px;
}

@media (max-width: 480px) {
  .results { padding: 28px 12px; }
  .results .big-emoji { font-size: 72px; }
  .results h2 { font-size: 28px; }
  .results > p { font-size: 16px; }
  .results .stats { gap: 10px; margin: 20px auto 18px; }
  .results .stat { padding: 14px 8px; border-radius: 14px; }
  .results .stat .val { font-size: 24px; }
  .results .stat .lbl { font-size: 11px; }
  .results .actions { gap: 10px; }
  .results .actions button { flex: 1; min-width: 0; }
}

/* Feedback се появява под бутоните в нормален поток - без преместване на отговорите. */
.game-area.with-feedback > .answer-feedback {
  margin: 20px auto 0;
  max-width: 560px;
}

/* === Answer feedback panel (показва верен отговор + СЛЕДВАЩА бутон) === */
.answer-feedback {
  margin: 20px auto 0;
  max-width: 560px;
  background: white;
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 6px 20px rgba(31, 42, 68, 0.10);
  border-left: 6px solid var(--good);
  animation: fb-slide-in 0.22s ease-out;
}
.answer-feedback.bad { border-left-color: var(--bad); }
.answer-feedback .feedback-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 600;
}
.answer-feedback .feedback-icon {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
  color: white;
  background: var(--good);
  flex-shrink: 0;
}
.answer-feedback.bad .feedback-icon { background: var(--bad); }
.answer-feedback .feedback-text {
  color: var(--ink);
  line-height: 1.35;
}
.answer-feedback .feedback-text strong {
  color: var(--good);
  font-weight: 800;
}
.answer-feedback.bad .feedback-text strong { color: var(--bad); }
.answer-feedback .feedback-explain {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e5e7eb;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.answer-feedback .next-btn {
  display: block;
  margin: 14px auto 0;
  min-width: 180px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
}
@keyframes fb-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === ЧиП 3. клас: показване на обект и кошчета === */
.cp-item-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 24px;
  margin: 8px auto 16px;
  background: linear-gradient(135deg, #ecfeff, #f0fdfa);
  border: 2px solid #67e8f9;
  border-radius: 18px;
  max-width: 360px;
}
.cp-item-emoji {
  font-size: 64px;
  line-height: 1;
}
.cp-item-word {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
}
.cp-bin-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.cp-bin-options.cp-bin-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.cp-bin-btn {
  font-size: 17px;
  font-weight: 700;
  padding: 18px 14px;
  text-align: center;
  line-height: 1.4;
  border-radius: 14px;
}
@media (max-width: 520px) {
  .cp-bin-options { grid-template-columns: 1fr; }
  .cp-bin-options.cp-bin-2 { grid-template-columns: 1fr; }
  .cp-item-emoji { font-size: 56px; }
  .cp-item-word { font-size: 20px; }
}

/* === КМ 4 specific === */
.cp-bin-options.km4-bin-4 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.km4-algo-display {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px auto;
  max-width: 520px;
  padding: 16px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
}
.km4-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: white;
  border-radius: 8px;
}
.km4-step-num {
  font-weight: 800;
  color: var(--primary);
  font-size: 16px;
  min-width: 24px;
}
.km4-step-text {
  flex: 1;
  font-size: 15px;
}
@media (max-width: 520px) {
  .cp-bin-options.km4-bin-4 { grid-template-columns: 1fr; }
}

/* === ЧиП 4: 6-категорийно sort за животни === */
.cp4-bin-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.cp4-bin-6 .cp-bin-btn {
  font-size: 14px;
  padding: 14px 8px;
  line-height: 1.35;
  border-radius: 12px;
  text-align: center;
}
@media (max-width: 640px) {
  .cp4-bin-6 { grid-template-columns: repeat(2, 1fr); }
  .cp4-bin-6 .cp-bin-btn { font-size: 13px; padding: 12px 6px; }
}

/* === ЧиО 4: 5-категорийно sort за природни области === */
.co4-bin-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.co4-bin-5 .cp-bin-btn {
  font-size: 12px;
  padding: 12px 6px;
  line-height: 1.3;
  border-radius: 10px;
  text-align: center;
}
@media (max-width: 720px) {
  .co4-bin-5 { grid-template-columns: repeat(2, 1fr); }
  .co4-bin-5 .cp-bin-btn { font-size: 13px; padding: 12px 8px; }
}

/* === БЕЛ 4: показване на изречение и таргет дума === */
.bel4-sentence {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  margin: 16px auto;
  padding: 18px 22px;
  max-width: 600px;
  background: #fefce8;
  border: 2px solid #fde68a;
  border-radius: 12px;
  line-height: 1.5;
}
.bel4-sentence u {
  background: #fef3c7;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  padding: 0 4px;
  border-radius: 4px;
}
.bel4-target-word {
  font-size: 38px;
  font-weight: 800;
  text-align: center;
  margin: 16px auto 8px;
  padding: 16px;
  max-width: 360px;
  background: linear-gradient(135deg, #ecfeff, #f0fdfa);
  border: 2px solid #67e8f9;
  border-radius: 14px;
  color: var(--ink);
}
.cp-bin-btn small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

/* === Английски 4: word builder horizontal === */
.en4-words {
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.en4-words .en4-word {
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
  background: #eff6ff;
  border: 2px solid #bfdbfe;
  border-radius: 10px;
  min-width: auto;
  cursor: grab;
}
.en4-words .en4-word.dragging {
  cursor: grabbing;
  opacity: 0.6;
}
.en4-words .en4-word .label {
  font-size: 18px;
  font-weight: 600;
}
.en4-words .en4-word .drag-handle {
  margin-right: 6px;
  color: var(--muted);
}

/* === 1. клас: голяма буква / голяма цифра === */
.bel1-big-letter {
  font-size: 120px;
  font-weight: 800;
  text-align: center;
  margin: 16px auto;
  padding: 24px;
  max-width: 220px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 3px solid #f59e0b;
  border-radius: 24px;
  color: var(--ink);
  line-height: 1;
}
.math1-big {
  font-size: 38px !important;
  font-weight: 800;
  text-align: center;
  margin: 16px auto;
}
.math1-big.counting-strip { font-size: 28px !important; }
.math1-big.counting-strip .seq-num { font-size: 30px; padding: 8px 14px; }
.math1-big.compare-eq .compare-num { font-size: 48px; }
.math1-big.compare-eq .compare-slot { font-size: 48px; }

/* === 2. клас Math визуализации === */
.math2-visual {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  padding: 18px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  max-width: 720px;
}
.vis-plus {
  font-size: 36px;
  font-weight: 800;
  color: var(--primary);
  padding: 0 8px;
}
.visual-blocks {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.vb-tens, .vb-ones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.vb-ten {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 3px;
  background: #dbeafe;
  border-radius: 6px;
  border: 2px solid #93c5fd;
}
.vb-block {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.vb-ten-block {
  background: #2563eb;
}
.vb-one-block {
  background: #f59e0b;
  width: 22px;
  height: 22px;
  border-radius: 5px;
}

/* === Multiplication grid === */
.visual-mult-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  margin: 12px auto;
}
.vmg-row {
  display: flex;
  gap: 6px;
}
.vmg-dot {
  font-size: 26px;
  line-height: 1;
}

/* === Клок SVG === */
.math2-clock-wrap {
  max-width: 280px;
  margin: 8px auto 20px;
}
.clock-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(31, 42, 68, 0.12));
}

/* === Геометрични фигури SVG === */
.math2-shape-wrap {
  max-width: 240px;
  margin: 8px auto 16px;
}
.math2-shape-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

/* === Обиколка SVG === */
.perim-svg {
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* === Factory bin layouts (3/4/many) === */
.cp-bin-options.factory-bin-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.cp-bin-options.factory-bin-4 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.cp-bin-options.factory-bin-many {
  grid-template-columns: repeat(3, 1fr);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  .cp-bin-options.factory-bin-3,
  .cp-bin-options.factory-bin-4,
  .cp-bin-options.factory-bin-many {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
}
@media (max-width: 420px) {
  .cp-bin-options.factory-bin-3,
  .cp-bin-options.factory-bin-4,
  .cp-bin-options.factory-bin-many {
    grid-template-columns: 1fr;
  }
}

/* === Topbar responsive за тесни екрани === */
@media (max-width: 600px) {
  #topbar { padding: 10px 12px; gap: 8px; }
  #title { font-size: 18px; padding: 4px 6px; }
  #user-name { display: none; }
  /* Стар: показваме pill в topbar - дубликат на greeting card на dashboard, и кара
     gear-а да се изтласква неравномерно. Скриваме изцяло на mobile - pill-ът се
     показва в greeting card на dashboard, а звездите остават достъпни в Постижения. */
  #score-pill { display: none !important; }
  #dashboard-btn, #logout-btn { padding: 4px 8px; font-size: 20px; }
}
@media (max-width: 380px) {
  #topbar { padding: 8px 8px; gap: 4px; }
  #title { font-size: 16px; }
}

/* === Не позволявай хоризонтален скрол на мобилен === */
html, body { overflow-x: hidden; max-width: 100%; }
#app { overflow-x: hidden; max-width: 100vw; }
#screen { max-width: 100%; }

/* === По-компактен padding в screen и game-area на мобилен (за да се вижда задачата) === */
@media (max-width: 600px) {
  #screen { padding: 16px 12px; }
  .game-area { padding: 16px 14px; min-height: auto; }
  .game-header h2 { font-size: 18px; }
  .game-header { margin-bottom: 10px; }
  .quiz-question { font-size: 18px; }
  .quiz-option { padding: 14px 12px; font-size: 15px; }
  .cp-item-emoji { font-size: 64px !important; }
  .cp-item-word { font-size: 22px; }
  .word-problem { font-size: 15px; }
  .bel4-target-word { font-size: 26px; }
}

/* === Stage cards: по-голям шрифт за лесно четене на мобилен === */
@media (max-width: 600px) {
  .stage-card { padding: 32px 22px; }
  .stage-icon { font-size: 64px; margin-bottom: 14px; }
  .stage-name { font-size: 26px; margin-bottom: 10px; }
  .stage-classes { font-size: 38px; margin-bottom: 12px; }
  .stage-desc { font-size: 17px; margin-bottom: 4px; }
  .stage-ages { font-size: 15px; margin-bottom: 18px; }
  .stage-badge { font-size: 13px; padding: 6px 16px; }
}

/* === БЕЛ 2 разширение: ударение === */
.stress-word {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 24px 0;
  flex-wrap: wrap;
}
.stress-syl {
  background: #eef2ff;
  border: 3px solid transparent;
  padding: 16px 22px;
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.12s, background 0.12s, border-color 0.12s;
  font-family: inherit;
}
.stress-syl:hover:not(:disabled) {
  background: #ddd9fc;
  transform: translateY(-2px);
}
.stress-syl.stress-correct {
  background: #d1fae5;
  border-color: var(--good);
  color: var(--good);
}
.stress-syl.stress-wrong {
  background: #fee2e2;
  border-color: var(--bad);
  color: var(--bad);
}
.syl-sep {
  font-size: 28px;
  color: var(--muted);
}
@media (max-width: 520px) {
  .stress-syl { font-size: 22px; padding: 12px 16px; }
}

/* === БЕЛ 2: съгласуване === */
.agreement-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 28px 0;
  flex-wrap: wrap;
  font-size: 24px;
  font-weight: 700;
}
.agree-word {
  background: #fef3c7;
  padding: 12px 22px;
  border-radius: 12px;
  color: var(--ink);
}
.agree-plus, .agree-arrow {
  color: var(--muted);
  font-size: 26px;
}
.agree-q {
  background: #fde68a;
  padding: 12px 22px;
  border-radius: 12px;
  color: #b45309;
}

/* === БЕЛ 2: образуване на въпрос === */
.qtransform {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 24px 0;
  text-align: center;
}
.qt-label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.qt-sentence {
  background: #eef2ff;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  max-width: 480px;
}
.qt-arrow {
  font-size: 28px;
  color: var(--primary);
}

/* === БЕЛ 2: множествено число === */
.plural-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 28px 0;
  font-size: 20px;
  flex-wrap: wrap;
}
.pl-single {
  background: #eef2ff;
  padding: 14px 22px;
  border-radius: 12px;
}
.pl-arrow {
  font-size: 28px;
  color: var(--primary);
}
.pl-multi {
  background: #fde68a;
  padding: 14px 22px;
  border-radius: 12px;
  color: #b45309;
}

/* === БЕЛ 2: азбучен ред === */
.alphabet-strip {
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, #ddd9fc, #c7d2fe);
  padding: 12px;
  border-radius: 12px;
  margin: 0 auto 20px;
  max-width: 560px;
  letter-spacing: 4px;
  color: var(--ink);
}
@media (max-width: 520px) {
  .alphabet-strip { font-size: 13px; letter-spacing: 2px; padding: 10px; }
}

/* === Dark theme contrast overrides (bulk) === */
/* Mixin: всички светли surface-и с твърдо кодиран фон → tема-aware var(--card-hover). */
[data-theme="dark"] .login-card input,
[data-theme="dark"] .login-card input:focus,
[data-theme="dark"] .inprogress-card,
[data-theme="dark"] .rec-tag,
[data-theme="dark"] .rec-card.rec-weak,
[data-theme="dark"] .rec-card.rec-new,
[data-theme="dark"] .rec-card.rec-stale,
[data-theme="dark"] .timer,
[data-theme="dark"] .progress-text,
[data-theme="dark"] .game-print-btn,
[data-theme="dark"] .subject-print-btn,
[data-theme="dark"] .bg-map,
[data-theme="dark"] .match-card .face.front,
[data-theme="dark"] .sort-bin,
[data-theme="dark"] .visual-image-wrap,
[data-theme="dark"] .compare-num,
[data-theme="dark"] .compare-btn,
[data-theme="dark"] .verify-btn,
[data-theme="dark"] .area-stage,
[data-theme="dark"] .seq-num,
[data-theme="dark"] .seq-blank,
[data-theme="dark"] .data-table,
[data-theme="dark"] .word-problem,
[data-theme="dark"] .shape-display,
[data-theme="dark"] .km-file-ext,
[data-theme="dark"] .km-loop-btn,
[data-theme="dark"] .km4-algo-display,
[data-theme="dark"] .km4-step,
[data-theme="dark"] .results .stat,
[data-theme="dark"] .answer-feedback,
[data-theme="dark"] .cp-item-display,
[data-theme="dark"] .bel4-sentence,
[data-theme="dark"] .bel4-target-word,
[data-theme="dark"] .math2-visual,
[data-theme="dark"] .bel1-big-letter,
[data-theme="dark"] .stress-syl,
[data-theme="dark"] .qt-sentence,
[data-theme="dark"] .pl-single,
[data-theme="dark"] .agree-word,
[data-theme="dark"] .agree-q,
[data-theme="dark"] .pl-multi {
  background: var(--card-hover) !important;
  color: var(--ink) !important;
  border-color: var(--border-strong);
}

/* Specific state surface-и: успех/грешка цветове → тема-aware soft вариант */
[data-theme="dark"] .recent-score.good,
[data-theme="dark"] .match-card.matched .face.front,
[data-theme="dark"] .sort-bin.flash-good,
[data-theme="dark"] .stress-syl.stress-correct,
[data-theme="dark"] .quiz-option.quiz-correct {
  background: var(--good-soft) !important;
  color: var(--ink) !important;
  border-color: var(--good);
}
[data-theme="dark"] .recent-score.bad,
[data-theme="dark"] .sort-bin.flash-bad,
[data-theme="dark"] .stress-syl.stress-wrong,
[data-theme="dark"] .quiz-option.quiz-wrong {
  background: var(--bad-soft) !important;
  color: var(--ink) !important;
  border-color: var(--bad);
}
[data-theme="dark"] .recent-score.ok,
[data-theme="dark"] .match-card.deed .face.front {
  background: var(--accent-soft) !important;
  color: var(--ink) !important;
  border-color: var(--accent);
}
[data-theme="dark"] .sort-bin:hover,
[data-theme="dark"] .data-table tbody tr:hover {
  background: var(--card) !important;
  border-color: var(--primary);
}
[data-theme="dark"] .subject-card.is-matura {
  background: linear-gradient(180deg, #2a2418, var(--card)) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .status-tag.ready {
  background: rgba(52,211,153,0.18) !important;
  color: #86efac !important;
}
[data-theme="dark"] .status-tag.soon {
  background: rgba(245,158,11,0.18) !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .rec-card.rec-weak { border-color: rgba(248,113,113,0.35); }
[data-theme="dark"] .rec-card.rec-new  { border-color: rgba(91,141,239,0.35); }
[data-theme="dark"] .rec-card.rec-stale { border-color: rgba(52,211,153,0.35); }
[data-theme="dark"] .alphabet-strip {
  background: linear-gradient(135deg, #2a2540, #2a2a4a) !important;
  color: var(--ink) !important;
}

/* Mirror в @media за system dark prefer  */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .login-card input,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .login-card input:focus,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .inprogress-card,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .rec-tag,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .rec-card.rec-weak,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .rec-card.rec-new,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .rec-card.rec-stale,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .timer,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .progress-text,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .game-print-btn,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .subject-print-btn,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .bg-map,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .match-card .face.front,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sort-bin,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .visual-image-wrap,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .compare-num,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .compare-btn,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .verify-btn,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .area-stage,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .seq-num,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .seq-blank,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .data-table,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .word-problem,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .shape-display,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .km-file-ext,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .km-loop-btn,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .km4-algo-display,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .km4-step,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .results .stat,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .answer-feedback,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .cp-item-display,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .bel4-sentence,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .bel4-target-word,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .math2-visual,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .bel1-big-letter,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stress-syl,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .qt-sentence,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .pl-single,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .agree-word,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .agree-q,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .pl-multi {
    background: var(--card-hover) !important;
    color: var(--ink) !important;
    border-color: var(--border-strong);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .recent-score.good,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .match-card.matched .face.front,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sort-bin.flash-good,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stress-syl.stress-correct,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .quiz-option.quiz-correct {
    background: var(--good-soft) !important;
    color: var(--ink) !important;
    border-color: var(--good);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .recent-score.bad,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sort-bin.flash-bad,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .stress-syl.stress-wrong,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .quiz-option.quiz-wrong {
    background: var(--bad-soft) !important;
    color: var(--ink) !important;
    border-color: var(--bad);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .recent-score.ok,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .match-card.deed .face.front {
    background: var(--accent-soft) !important;
    color: var(--ink) !important;
    border-color: var(--accent);
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .subject-card.is-matura {
    background: linear-gradient(180deg, #2a2418, var(--card)) !important;
    color: var(--ink) !important;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .status-tag.ready {
    background: rgba(52,211,153,0.18) !important; color: #86efac !important;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .status-tag.soon {
    background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .alphabet-strip {
    background: linear-gradient(135deg, #2a2540, #2a2a4a) !important;
    color: var(--ink) !important;
  }
}

/* === Dark theme: remaining hardcoded light backgrounds === */
[data-theme="dark"] .shape-display,
[data-theme="dark"] .km-loop-desc,
[data-theme="dark"] .en4-words .en4-word,
[data-theme="dark"] .vb-ten {
  background: var(--card-hover) !important;
  color: var(--ink) !important;
  border-color: var(--border-strong);
}
[data-theme="dark"] .km-emoji,
[data-theme="dark"] .km-file-display {
  background: linear-gradient(135deg, var(--card), var(--card-hover)) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .ip-stats { color: var(--accent) !important; }
[data-theme="dark"] .roman-display { color: var(--accent) !important; }
[data-theme="dark"] .agree-q { color: var(--accent) !important; }
[data-theme="dark"] .login-card input,
[data-theme="dark"] .login-card input:focus {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--border-strong);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .shape-display,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .km-loop-desc,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .en4-words .en4-word,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .vb-ten {
    background: var(--card-hover) !important;
    color: var(--ink) !important;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .km-emoji,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .km-file-display {
    background: linear-gradient(135deg, var(--card), var(--card-hover)) !important;
    color: var(--ink) !important;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .ip-stats,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .roman-display,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .agree-q {
    color: var(--accent) !important;
  }
}

/* === Global print rules === */
@media print {
  .topbar, .tabbar, .toast, .streak-celebration,
  .resume-overlay, .city-reveal-overlay,
  .game-print-btn, .subject-print-btn,
  button { display: none !important; }
  body, .game-area, .dashboard { background: white !important; color: black !important; box-shadow: none !important; }
  * { animation: none !important; transition: none !important; }
}

/* === Reduced motion accessibility === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}