/* ========== HAND-DRAWN THEME ========== */
html.theme-handdrawn {
  --hand-bg: #fbf6e8;
  --hand-bg-strong: #fffdf7;
  --hand-card: #ffffff;
  --hand-ink: #2b2b2b;
  --hand-ink-soft: #4a4a4a;
  --hand-muted: #6b6b6b;
  --hand-outline: #2b2b2b;
  --hand-accent: #f2b705;
  --hand-accent-2: #5fb86e;
  --hand-accent-3: #f57f6c;
  --hand-blue: #5a8dee;
  --hand-shadow: rgba(43, 43, 43, 0.2);
}

html.theme-handdrawn body {
  background: var(--hand-bg);
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 24px 24px, 120px 120px;
  color: var(--hand-ink);
  font-family: "Patrick Hand", "Comic Sans MS", "Segoe Print", "Chalkboard SE", "Bradley Hand", cursive;
  font-size: 18px;
  line-height: 1.5;
}

html.theme-handdrawn h1,
html.theme-handdrawn .page-title {
  font-family: "Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: none;
}

html.theme-handdrawn h2,
html.theme-handdrawn h3 {
  font-family: "Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;
  color: var(--hand-ink);
}

html.theme-handdrawn a {
  color: var(--hand-blue);
}

html.theme-handdrawn .topbar {
  background: var(--hand-bg-strong);
  color: var(--hand-ink);
  border: 3px solid var(--hand-outline);
  border-radius: 18px;
  box-shadow: 3px 3px 0 var(--hand-outline);
}

html.theme-handdrawn .topbar-logo-block {
  background: transparent;
  color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1;
  padding: 0;
  min-width: 0;
  position: relative;
  margin-right: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  width: auto;
  height: auto;
}
html.theme-handdrawn .topbar-logo-block::before,
html.theme-handdrawn .topbar-logo-block::after {
  position: relative;
  display: inline-block;
  text-shadow:
    1px 1px 0 rgba(15, 23, 42, 0.35),
    2px 2px 0 rgba(15, 23, 42, 0.15);
}
html.theme-handdrawn .topbar-logo-block::before {
  content: "K";
  color: var(--hand-accent);
  font-size: 54px;
  font-weight: 900;
  margin-right: -6px;
}
html.theme-handdrawn .topbar-logo-block::after {
  content: "ontrolno";
  color: var(--hand-ink);
  font-weight: 800;
}

html.theme-handdrawn .topbar-burger,
html.theme-handdrawn .topbar-level,
html.theme-handdrawn .topbar .nav-link,
html.theme-handdrawn .topbar .logout-link {
  background: var(--hand-card);
  color: var(--hand-ink);
  border: 2px solid var(--hand-outline);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--hand-outline);
  font-family: "Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;
}

html.theme-handdrawn .topbar .nav-link:hover,
html.theme-handdrawn .topbar .logout-link:hover,
html.theme-handdrawn .topbar-level:hover,
html.theme-handdrawn .topbar-burger:hover {
  background: #fff3cc;
}

html.theme-handdrawn .topbar .nav-link-active {
  background: var(--hand-accent);
  color: var(--hand-ink);
}

html.theme-handdrawn .nav-badge {
  background: var(--hand-accent-2);
  color: #0f3b1e;
  border: 2px solid var(--hand-outline);
}

html.theme-handdrawn .card,
html.theme-handdrawn .guest-tab,
html.theme-handdrawn .guest-question,
html.theme-handdrawn .admin-card,
html.theme-handdrawn .theme-option,
html.theme-handdrawn .settings-option,
html.theme-handdrawn .home-random-question-card,
html.theme-handdrawn .results-filters-card,
html.theme-handdrawn .results-table-card,
html.theme-handdrawn .xp-popover {
  background: var(--hand-card);
  border: 3px solid var(--hand-outline);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--hand-outline);
  color: var(--hand-ink);
}

html.theme-handdrawn .home-answer-option {
  background: var(--hand-card);
  border: 2px solid var(--hand-outline);
  border-radius: 14px;
  box-shadow: 2px 2px 0 var(--hand-outline);
  color: var(--hand-ink);
  padding: 8px 10px;
}

html.theme-handdrawn .home-answer-option label {
  color: var(--hand-ink);
}

html.theme-handdrawn .home-answer-option input {
  accent-color: var(--hand-accent);
}

html.theme-handdrawn .home-answer-correct {
  background: #e7f8ee;
  border-color: #3d8f54;
  box-shadow: 2px 2px 0 #3d8f54;
}

html.theme-handdrawn .home-answer-wrong {
  background: #ffe6e1;
  border-color: var(--hand-accent-3);
  box-shadow: 2px 2px 0 var(--hand-accent-3);
}

html.theme-handdrawn .home-answer-missed {
  background: #e5f0ff;
  border-color: var(--hand-blue);
  box-shadow: 2px 2px 0 var(--hand-blue);
}

html.theme-handdrawn .home-answer-summary.ok {
  color: #1f6f3f;
}

html.theme-handdrawn .home-answer-summary.bad {
  color: #b94a3d;
}

html.theme-handdrawn .home-question-answer {
  border-top-color: rgba(43, 43, 43, 0.25);
  color: var(--hand-blue);
}

html.theme-handdrawn .admin-card h2,
html.theme-handdrawn .admin-card p {
  color: var(--hand-ink);
}

html.theme-handdrawn details {
  background: var(--hand-card) !important;
  border: 3px solid var(--hand-outline) !important;
  border-radius: 16px;
  color: var(--hand-ink);
  padding: 10px 12px;
}

html.theme-handdrawn details summary {
  color: var(--hand-ink);
  cursor: pointer;
  font-weight: 700;
}

html.theme-handdrawn details p,
html.theme-handdrawn details ol,
html.theme-handdrawn details ul {
  border-left: 3px solid var(--hand-outline);
  padding-left: 12px;
  color: var(--hand-muted);
}

html.theme-handdrawn input[type="text"],
html.theme-handdrawn input[type="email"],
html.theme-handdrawn input[type="password"],
html.theme-handdrawn input[type="number"],
html.theme-handdrawn select,
html.theme-handdrawn textarea {
  background: var(--hand-card);
  border: 2px solid var(--hand-outline);
  border-radius: 12px;
  color: var(--hand-ink);
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
}

html.theme-handdrawn input:focus,
html.theme-handdrawn select:focus,
html.theme-handdrawn textarea:focus {
  border-color: var(--hand-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.2);
}

html.theme-handdrawn .mc-btn,
html.theme-handdrawn .pixel-btn,
html.theme-handdrawn button,
html.theme-handdrawn input[type="submit"],
html.theme-handdrawn input[type="button"],
html.theme-handdrawn .btn-primary,
html.theme-handdrawn .btn-secondary,
html.theme-handdrawn .btn-admin-accent,
html.theme-handdrawn .btn-outline-red,
html.theme-handdrawn .btn-green,
html.theme-handdrawn .btn-red,
html.theme-handdrawn .btn-small,
html.theme-handdrawn .btn-link,
html.theme-handdrawn .settings-btn,
html.theme-handdrawn .settings-btn-primary,
html.theme-handdrawn .settings-btn-secondary,
html.theme-handdrawn .hero-btn,
html.theme-handdrawn .hero-btn-primary,
html.theme-handdrawn .hero-btn-secondary,
html.theme-handdrawn .hero-btn-ghost,
html.theme-handdrawn .hero-button.hero-button-primary,
html.theme-handdrawn .guest-cta,
html.theme-handdrawn .guest-cta-primary,
html.theme-handdrawn .guest-cta-secondary,
html.theme-handdrawn .timer-toggle,
html.theme-handdrawn .auth-submit,
html.theme-handdrawn .results-clear-btn {
  background: var(--hand-card);
  color: var(--hand-ink);
  border: 3px solid var(--hand-outline);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--hand-outline);
  font-family: "Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;
  letter-spacing: 0.3px;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

html.theme-handdrawn .mc-btn:hover,
html.theme-handdrawn .pixel-btn:hover,
html.theme-handdrawn button:hover,
html.theme-handdrawn input[type="submit"]:hover,
html.theme-handdrawn input[type="button"]:hover,
html.theme-handdrawn .btn-primary:hover,
html.theme-handdrawn .btn-secondary:hover,
html.theme-handdrawn .btn-admin-accent:hover,
html.theme-handdrawn .btn-outline-red:hover,
html.theme-handdrawn .btn-green:hover,
html.theme-handdrawn .btn-red:hover,
html.theme-handdrawn .btn-small:hover,
html.theme-handdrawn .btn-link:hover,
html.theme-handdrawn .settings-btn:hover,
html.theme-handdrawn .settings-btn-primary:hover,
html.theme-handdrawn .settings-btn-secondary:hover,
html.theme-handdrawn .hero-btn:hover,
html.theme-handdrawn .hero-btn-primary:hover,
html.theme-handdrawn .hero-btn-secondary:hover,
html.theme-handdrawn .hero-btn-ghost:hover,
html.theme-handdrawn .hero-button.hero-button-primary:hover,
html.theme-handdrawn .guest-cta:hover,
html.theme-handdrawn .guest-cta-primary:hover,
html.theme-handdrawn .guest-cta-secondary:hover,
html.theme-handdrawn .timer-toggle:hover,
html.theme-handdrawn .auth-submit:hover,
html.theme-handdrawn .results-clear-btn:hover {
  background: #fff3cc;
}

html.theme-handdrawn .mc-btn:active,
html.theme-handdrawn .pixel-btn:active,
html.theme-handdrawn button:active,
html.theme-handdrawn input[type="submit"]:active,
html.theme-handdrawn input[type="button"]:active,
html.theme-handdrawn .btn-primary:active,
html.theme-handdrawn .btn-secondary:active,
html.theme-handdrawn .btn-admin-accent:active,
html.theme-handdrawn .btn-outline-red:active,
html.theme-handdrawn .btn-green:active,
html.theme-handdrawn .btn-red:active,
html.theme-handdrawn .btn-small:active,
html.theme-handdrawn .btn-link:active,
html.theme-handdrawn .settings-btn:active,
html.theme-handdrawn .settings-btn-primary:active,
html.theme-handdrawn .settings-btn-secondary:active,
html.theme-handdrawn .hero-btn:active,
html.theme-handdrawn .hero-btn-primary:active,
html.theme-handdrawn .hero-btn-secondary:active,
html.theme-handdrawn .hero-btn-ghost:active,
html.theme-handdrawn .hero-button.hero-button-primary:active,
html.theme-handdrawn .guest-cta:active,
html.theme-handdrawn .guest-cta-primary:active,
html.theme-handdrawn .guest-cta-secondary:active,
html.theme-handdrawn .timer-toggle:active,
html.theme-handdrawn .auth-submit:active,
html.theme-handdrawn .results-clear-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--hand-outline);
}

html.theme-handdrawn .guest-tab {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 34px;
}

html.theme-handdrawn .guest-tab-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  border: 3px solid var(--hand-outline);
  background: #fff6dd;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 34px 34px;
  box-shadow: 2px 2px 0 var(--hand-outline);
}

html.theme-handdrawn .guest-tab-text {
  margin-top: 6px;
}

html.theme-handdrawn .guest-tab-icon-lessons {
  background-color: #eef3ff;
  border-color: var(--hand-blue);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2b2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h7a2 2 0 0 1 2 2v12a3 3 0 0 0-2-.8H4z'/><path d='M20 5h-7a2 2 0 0 0-2 2v12a3 3 0 0 1 2-.8h7z'/><path d='M4 7h7'/><path d='M13 7h7'/></svg>");
}

html.theme-handdrawn .guest-tab-icon-progress {
  background-color: #fff1d1;
  border-color: var(--hand-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2b2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19V5'/><path d='M4 19h16'/><rect x='6.5' y='12' width='3.5' height='5' fill='%23f7d45e' stroke='%232b2b2b'/><rect x='11' y='9' width='3.5' height='8' fill='%23f2b705' stroke='%232b2b2b'/><rect x='15.5' y='6' width='3.5' height='11' fill='%23f57f6c' stroke='%232b2b2b'/><path d='M6 10l4-3l4 2l4-4'/></svg>");
}

html.theme-handdrawn .guest-tab-icon-missions {
  background-color: #e9f7ef;
  border-color: var(--hand-accent-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2b2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3v18'/><path d='M5 4h12l-3 4l3 4H5z'/><path d='M9 9l1.2 2.2l2.5.3l-1.8 1.6l.6 2.4L9 14l-2.5 1.5l.6-2.4L5.3 11l2.5-.3z' fill='%23f2b705' stroke='%232b2b2b'/></svg>");
}

html.theme-handdrawn .btn-primary,
html.theme-handdrawn .hero-btn-primary,
html.theme-handdrawn .guest-cta-primary {
  background: var(--hand-accent);
  color: #2b2b2b;
}

html.theme-handdrawn .btn-green {
  background: var(--hand-accent-2);
  color: #0f3b1e;
}

html.theme-handdrawn .btn-red,
html.theme-handdrawn .btn-outline-red {
  background: var(--hand-accent-3);
  color: #3d1612;
}

html.theme-handdrawn .muted,
html.theme-handdrawn .guest-hero-subtitle,
html.theme-handdrawn .auth-subtitle {
  color: var(--hand-muted);
}

html.theme-handdrawn .xp-popover-title {
  color: var(--hand-ink);
  font-weight: 700;
}

html.theme-handdrawn .xp-popover-row {
  color: var(--hand-muted);
}

html.theme-handdrawn .xp-popover-row span:last-child {
  color: var(--hand-ink);
}

html.theme-handdrawn .xp-popover-bar {
  background: #f2e6c8;
  border: 2px solid var(--hand-outline);
}

html.theme-handdrawn .xp-popover-bar-fill,
html.theme-handdrawn .daily-xp-progress-bar {
  background: linear-gradient(90deg, #f2b705, #f7d45e);
}

html.theme-handdrawn .daily-xp-total {
  background: #fff7d1;
  color: var(--hand-ink);
  border: 2px solid var(--hand-outline);
  border-radius: 14px;
  box-shadow: 2px 2px 0 var(--hand-outline);
}

html.theme-handdrawn .daily-xp-total-label {
  color: var(--hand-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
}

html.theme-handdrawn .daily-xp-total-value {
  color: var(--hand-ink);
}

html.theme-handdrawn .daily-xp-level,
html.theme-handdrawn .daily-xp-next {
  color: var(--hand-muted);
}

html.theme-handdrawn .daily-xp-progress {
  background: #f0e6d1;
  border: 2px solid var(--hand-outline);
}

html.theme-handdrawn .daily-xp-summary {
  color: var(--hand-muted);
}

html.theme-handdrawn .daily-xp-item {
  background: #fffdf5;
  border: 2px solid var(--hand-outline);
  border-radius: 14px;
  box-shadow: 2px 2px 0 var(--hand-outline);
  color: var(--hand-ink);
}

html.theme-handdrawn .daily-xp-item.is-done {
  background: #e7f8ee;
  border-color: var(--hand-accent-2);
}

html.theme-handdrawn .daily-xp-reward {
  color: #1f6f3f;
}

html.theme-handdrawn #answersContainer label,
html.theme-handdrawn #quiz.multi-question #answersContainer label {
  background: var(--hand-card);
  border: 2px solid var(--hand-outline);
  color: var(--hand-ink);
}

html.theme-handdrawn #answersContainer label:hover {
  background: #fff7d1;
}

html.theme-handdrawn #answersContainer label.answer-selected {
  background: #fff1b3;
  border-color: var(--hand-outline);
}

html.theme-handdrawn .site-footer .page-shell {
  background: var(--hand-bg-strong);
  color: var(--hand-ink);
  border: 3px solid var(--hand-outline);
  border-radius: 18px;
  box-shadow: 3px 3px 0 var(--hand-outline);
}

html.theme-handdrawn .site-footer a,
html.theme-handdrawn .footer-col h4 {
  color: var(--hand-ink);
}

html.theme-handdrawn .cookie-banner {
  background: var(--hand-bg-strong);
  border: 3px solid var(--hand-outline);
  color: var(--hand-ink);
  border-radius: 18px;
}

@media (max-width: 767px) {
  html.theme-handdrawn .card,
  html.theme-handdrawn .guest-tab,
  html.theme-handdrawn .guest-question,
  html.theme-handdrawn .admin-card,
  html.theme-handdrawn .theme-option,
  html.theme-handdrawn .settings-option,
  html.theme-handdrawn .home-random-question-card,
  html.theme-handdrawn .results-filters-card,
  html.theme-handdrawn .results-table-card,
  html.theme-handdrawn .xp-popover,
  html.theme-handdrawn .topbar {
    box-shadow: 2px 2px 0 var(--hand-outline);
  }
}