/* ===========================
   Theme: notebook (default)
   =========================== */
[data-theme="notebook"] {
  --bg: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f0f0f8;
  --text: #2C3E50;
  --line: #333;
  --line-subtle: #BDC3C7;
  --accent: #3498DB;
  --accent-bg: #EBF5FB;
  --btn-bg: #2C3E50;
  --btn-text: #fff;
  --font-main: 'Caveat', cursive;
  --font-mono: 'Caveat', cursive;
  --notebook-line: #7777bb;
  --notebook-margin: #cc0000;
}

[data-theme="notebook"] .bg-theme-bg {
  background-color: var(--bg);
}
[data-theme="notebook"] .bg-theme-card { background-color: var(--bg-card); }
[data-theme="notebook"] .bg-theme-hover { background-color: var(--bg-hover); }
[data-theme="notebook"] .text-theme-text { color: var(--text); }
[data-theme="notebook"] .border-theme-line { border-color: var(--line); }
[data-theme="notebook"] .border-theme-accent { border-color: var(--accent); }
[data-theme="notebook"] .bg-theme-accent-bg { background-color: var(--accent-bg); }
[data-theme="notebook"] .bg-theme-btn { background-color: var(--btn-bg); }
[data-theme="notebook"] .text-theme-btn-text { color: var(--btn-text); }
[data-theme="notebook"] .result-area-theme { background: var(--bg-card); }

[data-theme="notebook"] .font-theme { font-family: var(--font-main); }
[data-theme="notebook"] .text-sm { font-size: 1.1rem; }

/* Notebook page: horizontal lines with alternating 5mm/10mm gaps */
[data-theme="notebook"] main {
  position: relative;
  background-image:
    repeating-linear-gradient(
      var(--notebook-line) 0px,
      var(--notebook-line) 1px,
      transparent 1px,
      transparent 20px,
      var(--notebook-line) 20px,
      var(--notebook-line) 21px,
      transparent 21px,
      transparent 58px
    );
  background-size: 100% 58px;
}

/* Red vertical margin line on the right */
[data-theme="notebook"] main::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 120px;
  width: 2px;
  background: var(--notebook-margin);
  z-index: 0;
  pointer-events: none;
}

/* Diagonal lines overlay on the whole page — only here, not duplicated */
[data-theme="notebook"] .diagonal-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      -65deg,
      transparent,
      transparent 90px,
      var(--notebook-line) 90px,
      var(--notebook-line) 91px
    );
}

[data-theme="notebook"] .word-clickable {
  font-family: var(--font-main);
  font-size: 2.8rem;
  position: relative;
  z-index: 1;
}
[data-theme="notebook"] .word-clickable:hover {
  background: rgba(52, 152, 219, 0.1);
}
[data-theme="notebook"] .selected-word-effect {
  background: rgba(52, 152, 219, 0.2) !important;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

[data-theme="notebook"] .word-correct {
  background: rgba(39, 174, 96, 0.2) !important;
}
[data-theme="notebook"] .word-wrong {
  background: rgba(231, 76, 60, 0.2) !important;
}

[data-theme="notebook"] .member-btn-theme {
  background: var(--bg-card);
  padding: 14px 24px;
  min-width: 160px;
}
[data-theme="notebook"] .member-btn-theme .font-semibold {
  font-size: 1.3rem;
}
[data-theme="notebook"] .member-btn-theme .text-xs {
  font-size: 1rem;
}
[data-theme="notebook"] .member-btn-active {
  background: var(--accent-bg) !important;
}

/* Notebook branding */
[data-theme="notebook"] .brand-title {
  font-family: 'Caveat', cursive;
  font-size: 2.2rem;
  font-weight: 700;
  color: #2C3E50;
  letter-spacing: 0.5px;
}

/* ===========================
   Theme: hacker
   =========================== */
[data-theme="hacker"] {
  --bg: #1a1b26;
  --bg-card: #24283b;
  --bg-hover: #2f3349;
  --text: #a9b1d6;
  --line: #414868;
  --line-subtle: #3b4261;
  --accent: #7aa2f7;
  --accent-bg: rgba(122, 162, 247, 0.15);
  --btn-bg: #7aa2f7;
  --btn-text: #1a1b26;
  --font-main: 'Fira Code', monospace;
  --font-mono: 'Fira Code', monospace;
  --neon-green: #9ece6a;
  --neon-cyan: #7dcfff;
  --neon-magenta: #bb9af7;
  --neon-orange: #ff9e64;
  --neon-red: #f7768e;
}

[data-theme="hacker"] .bg-theme-bg { background-color: var(--bg); }
[data-theme="hacker"] .bg-theme-card { background-color: var(--bg-card); }
[data-theme="hacker"] .bg-theme-hover { background-color: var(--bg-hover); }
[data-theme="hacker"] .text-theme-text { color: var(--text); }
[data-theme="hacker"] .border-theme-line { border-color: var(--line); }
[data-theme="hacker"] .border-theme-accent { border-color: var(--accent); }
[data-theme="hacker"] .bg-theme-accent-bg { background-color: var(--accent-bg); }
[data-theme="hacker"] .bg-theme-btn { background-color: var(--btn-bg); }
[data-theme="hacker"] .text-theme-btn-text { color: var(--btn-text); }
[data-theme="hacker"] .result-area-theme { background: var(--bg-card); }

[data-theme="hacker"] .font-theme { font-family: var(--font-main); }

[data-theme="hacker"] main {
  position: relative;
}

[data-theme="hacker"] .word-clickable {
  font-family: var(--font-main);
  font-size: 1.5rem;
}
[data-theme="hacker"] .word-clickable:hover {
  background: rgba(122, 162, 247, 0.1);
}
[data-theme="hacker"] .selected-word-effect {
  background: rgba(122, 162, 247, 0.2) !important;
  box-shadow: 0 0 12px rgba(122, 162, 247, 0.4);
}

[data-theme="hacker"] .word-correct {
  background: rgba(158, 206, 106, 0.2) !important;
}
[data-theme="hacker"] .word-wrong {
  background: rgba(247, 118, 142, 0.2) !important;
}

[data-theme="hacker"] .member-btn-theme {
  background: var(--bg-card);
  color: var(--text);
}
[data-theme="hacker"] .member-btn-active {
  background: var(--accent-bg) !important;
  border-color: var(--accent) !important;
}

/* Hacker branding */
[data-theme="hacker"] .brand-title {
  font-family: 'Fira Code', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  color: #7aa2f7;
  text-shadow: 0 0 10px rgba(122, 162, 247, 0.5), 0 0 20px rgba(122, 162, 247, 0.3);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ===========================
   Underline styles — notebook
   =========================== */
[data-theme="notebook"] .underline-subject {
  text-decoration: underline;
  text-decoration-color: #3498DB;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
[data-theme="notebook"] .underline-predicate {
  text-decoration: underline double;
  text-decoration-color: #27AE60;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
[data-theme="notebook"] .underline-attribute {
  text-decoration: underline wavy;
  text-decoration-color: #9B59B6;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
[data-theme="notebook"] .underline-object {
  text-decoration: underline dashed;
  text-decoration-color: #E67E22;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
[data-theme="notebook"] .underline-adverbial {
  text-decoration: underline dotted;
  text-decoration-color: #E74C3C;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

/* ===========================
   Underline styles — hacker (neon glow)
   =========================== */
[data-theme="hacker"] .underline-subject {
  text-decoration: underline;
  text-decoration-color: #7dcfff;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-shadow: 0 0 8px rgba(125, 207, 255, 0.6);
}
[data-theme="hacker"] .underline-predicate {
  text-decoration: underline double;
  text-decoration-color: #9ece6a;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-shadow: 0 0 8px rgba(158, 206, 106, 0.6);
}
[data-theme="hacker"] .underline-attribute {
  text-decoration: underline wavy;
  text-decoration-color: #bb9af7;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-shadow: 0 0 8px rgba(187, 154, 247, 0.6);
}
[data-theme="hacker"] .underline-object {
  text-decoration: underline dashed;
  text-decoration-color: #ff9e64;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-shadow: 0 0 8px rgba(255, 158, 100, 0.6);
}
[data-theme="hacker"] .underline-adverbial {
  text-decoration: underline dotted;
  text-decoration-color: #f7768e;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
  text-shadow: 0 0 8px rgba(247, 118, 142, 0.6);
}

/* ===========================
   POS sticker colors (both themes)
   =========================== */
.pos-sticker {
  pointer-events: none;
  font-family: inherit;
  line-height: 1;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 768px) {
  [data-theme="notebook"] main::after { right: 40px; }
  [data-theme="notebook"] .word-clickable { font-size: 2rem; }
  [data-theme="notebook"] .member-btn-theme { min-width: 120px; padding: 10px 16px; }
  [data-theme="notebook"] .member-btn-theme .font-semibold { font-size: 1.1rem; }
  [data-theme="hacker"] .word-clickable { font-size: 1.1rem; }
}