/* Design tokens shared with questorial.com. Three themes: "gamer" (colorful light, default), "adventurer" (beige, serif) and "hacker" (retro terminal), plus "blueprint", "zen" and "comic". */
:root, :root[data-theme="gamer"] {
  --bg:#F5F2FF; --ink:#1A1433; --muted:#4B4570; --card:#FFFFFF; --line:#1A1433;
  --accent:#C6FF3D; --accentText:#5B2EE0; --pink:#FF5CA8; --pinkText:#B5105F; --blueText:#1F5FD6;
  --btnBorder:#1A1433; --onAccent:#0E0B1F; --danger:#B5105F; --ok:#1F7A3A;
  --px:'Pixelify Sans', sans-serif; --sans:'DM Sans', sans-serif; --sub:var(--px);
  color-scheme:light;
}
:root[data-theme="adventurer"] {
  --bg:#EFE4CE; --ink:#33281C; --muted:#675840; --card:#F8F0DF; --line:#33281C;
  --accent:#D9BF7F; --accentText:#6B4A12; --pink:#2F6F6A; --pinkText:#7A2E3A; --blueText:#2F5D7C;
  --btnBorder:#33281C; --onAccent:#2B2118; --danger:#8E2B2B; --ok:#3F6B3A;
  --px:'Fraunces', Georgia, serif; --sans:'Fraunces', Georgia, serif; --sub:'Special Elite', 'Courier New', monospace;
  color-scheme:light;
}
/* Blueprint: engineering drawing, white lines on blue paper with a faint grid. */
:root[data-theme="blueprint"] {
  --bg:#0B3A6B; --ink:#EAF4FF; --muted:#A9C7E8; --card:#0D4378; --line:#BFE0FF;
  --accent:#8CCBFF; --accentText:#BFE0FF; --pink:#3E8FD6; --pinkText:#FFD36B; --blueText:#8CCBFF;
  --btnBorder:#EAF4FF; --onAccent:#05213F; --danger:#FFB3A7; --ok:#9BF0C0;
  --px:'IBM Plex Mono', ui-monospace, Menlo, monospace; --sans:'IBM Plex Mono', ui-monospace, Menlo, monospace; --sub:var(--px);
  color-scheme:dark;
}
/* Zen Garden: quiet paper, hairlines, moss green and one red stamp. */
:root[data-theme="zen"] {
  --bg:#F4F2EC; --ink:#2B2B28; --muted:#6B6A62; --card:#FAF9F5; --line:#CFCCC0;
  --accent:#7A8B6A; --accentText:#56684A; --pink:#B3362F; --pinkText:#B3362F; --blueText:#4A6073;
  --btnBorder:#56684A; --onAccent:#FFFFFF; --danger:#B3362F; --ok:#56684A;
  --px:'Cormorant Garamond', Georgia, serif; --sans:Georgia, 'Times New Roman', serif; --sub:var(--px);
  color-scheme:light;
}
/* Paper Comic: halftone page, thick outlines, flat primaries. */
:root[data-theme="comic"] {
  --bg:#FFFBEA; --ink:#111111; --muted:#444444; --card:#FFFFFF; --line:#111111;
  --accent:#FFD600; --accentText:#D0141B; --pink:#1E4DD8; --pinkText:#D0141B; --blueText:#1E4DD8;
  --btnBorder:#111111; --onAccent:#111111; --danger:#D0141B; --ok:#1B7F2E;
  --px:'Bangers', Impact, sans-serif; --sans:'Trebuchet MS', 'Segoe UI', Verdana, sans-serif; --sub:var(--px);
  color-scheme:light;
}
:root[data-theme="hacker"] {
  --bg:#020B05; --ink:#B6FFCB; --muted:#6FCF8E; --card:#04170A; --line:#0F7A35;
  --accent:#39FF14; --accentText:#39FF14; --pink:#FF2BD6; --pinkText:#FF2BD6; --blueText:#00F0FF;
  --btnBorder:#39FF14; --onAccent:#001A07; --danger:#FF4D6D; --ok:#39FF14;
  --px:'VT323', 'Courier New', monospace; --sans:ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
  color-scheme:dark;
}
:root[data-theme="hacker"] body { font-family:var(--sans); text-shadow:0 0 6px rgba(57,255,20,.35); }
:root[data-theme="hacker"] body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:2000;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px); }
:root[data-theme="hacker"] .logo, :root[data-theme="hacker"] h1, :root[data-theme="hacker"] h2 { text-shadow:0 0 8px var(--accent); }
:root[data-theme="hacker"] .btn, :root[data-theme="hacker"] button, :root[data-theme="hacker"] input[type=submit] { box-shadow:0 0 10px var(--accent); }
:root[data-theme="hacker"] input:focus { box-shadow:0 0 10px var(--accent); }
@media (prefers-reduced-motion:no-preference) {
  :root[data-theme="hacker"] .logo::after { content:"_"; animation:blink 1s steps(1) infinite; }
}
@keyframes blink { 50% { opacity:0; } }

/* Subheadlines use the secondary face (Special Elite in "adventurer"). */
:root[data-theme="adventurer"] :is(h3, h4, h5, h6, .lead, .subtitle, .eyebrow) { font-family:var(--sub); font-weight:400; }

/* Blueprint */
:root[data-theme="blueprint"] body {
  background-color:var(--bg);
  background-image:linear-gradient(rgba(191,224,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(191,224,255,.09) 1px, transparent 1px);
  background-size:24px 24px;
}
:root[data-theme="blueprint"] :is(.card, main.auth-card, .public .screen, .public .plan, .public .game-card, .public .feat-main, .public .block, .public .feature, .modal-content, .dropdown-menu) {
  border-radius:0 !important; box-shadow:none !important; border-style:dashed !important; border-width:2px !important;
}
:root[data-theme="blueprint"] :is(.btn, button, input[type=submit]) { box-shadow:none !important; border-radius:0 !important; letter-spacing:.5px; }
:root[data-theme="blueprint"] :is(h1, h2, h3) { text-transform:uppercase; letter-spacing:1px; }

/* Zen Garden */
:root[data-theme="zen"] body { font-size:17px; line-height:1.65; }
:root[data-theme="zen"] :is(h1, h2, h3, .logo) { font-weight:500; letter-spacing:.5px; }
:root[data-theme="zen"] :is(.card, main.auth-card, .public .screen, .public .plan, .public .game-card, .public .feat-main, .public .block, .public .feature, .modal-content, .dropdown-menu, .btn, button, input, select, textarea, .form-control, .form-select, .theme-toggle, .navbar-toggler, .error, .notice, .site-navbar) {
  border-width:1px !important; box-shadow:none !important; border-radius:2px !important;
}
:root[data-theme="zen"] .site-navbar { border-width:0 0 1px !important; }
:root[data-theme="zen"] a { font-weight:400; }
:root[data-theme="zen"] .logo { font-weight:600; }
:root[data-theme="zen"] :is(.btn, button, input[type=submit]) { transform:none !important; }
:root[data-theme="zen"] .logo::after { content:""; display:inline-block; width:8px; height:8px; margin-left:6px; background:var(--pink); border-radius:1px; vertical-align:middle; }

/* Paper Comic */
:root[data-theme="comic"] body {
  background-image:radial-gradient(rgba(17,17,17,.13) 1.2px, transparent 1.5px); background-size:11px 11px;
}
:root[data-theme="comic"] :is(h1, h2, h3, .logo) { letter-spacing:1.5px; font-weight:400; }
:root[data-theme="comic"] .logo { text-shadow:2px 2px 0 var(--pink); }
:root[data-theme="comic"] :is(.card, main.auth-card, .public .screen, .public .plan, .public .game-card, .public .feat-main, .public .block, .public .feature, .modal-content) {
  border-width:4px !important; border-radius:18px !important; box-shadow:6px 6px 0 #111 !important;
}
:root[data-theme="comic"] :is(.btn, button, input[type=submit]) { border-width:3px !important; border-radius:999px !important; box-shadow:3px 3px 0 #111 !important; text-transform:uppercase; letter-spacing:1px; }
:root[data-theme="comic"] :is(.btn, button, input[type=submit]):hover { transform:translate(2px,2px); box-shadow:1px 1px 0 #111 !important; }
:root[data-theme="comic"] :is(input, select, textarea, .form-control, .form-select) { border-radius:12px !important; }
/* Speech-bubble tail */
:root[data-theme="comic"] :is(.card, main.auth-card) { position:relative; }
:root[data-theme="comic"] :is(.card, main.auth-card)::after {
  content:""; position:absolute; left:28px; bottom:-22px; width:22px; height:22px; background:var(--card);
  border-right:4px solid #111; border-bottom:4px solid #111; transform:skewX(-35deg) rotate(0deg); clip-path:polygon(0 0, 100% 0, 100% 100%);
}

/* Theme dropdown with preview (shared by both headers) */
.theme-toggle { height:44px; padding:0 12px; display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--ink); border:3px solid var(--line); border-radius:0; cursor:pointer; box-shadow:none; min-height:0; font-weight:700; }
.theme-toggle:hover, .theme-toggle:focus-visible, .theme-toggle.show { border-color:var(--accentText); color:var(--accentText); }
.theme-menu { min-width:240px; padding:8px; }
.theme-option { display:flex; align-items:center; gap:12px; width:100%; padding:8px; text-align:left; }
.theme-option.active { outline:3px solid var(--accentText); outline-offset:-3px; }
.theme-option .name { display:block; font-weight:700; }
.theme-option .tag { display:block; font-size:.8em; opacity:.8; }
.theme-preview { flex:none; width:64px; height:44px; display:flex; flex-direction:column; gap:4px; padding:5px; border:2px solid; background:var(--p-bg); border-color:var(--p-line); }
.theme-preview i { display:block; height:6px; background:var(--p-ink); width:70%; }
.theme-preview i + i { background:var(--p-accent); width:45%; box-shadow:2px 2px 0 var(--p-pink); }
.theme-preview i:last-child { background:var(--p-line); width:85%; box-shadow:none; }
.theme-preview.gamer { --p-bg:#F5F2FF; --p-ink:#1A1433; --p-line:#1A1433; --p-accent:#C6FF3D; --p-pink:#FF5CA8; }
.theme-preview.adventurer { --p-bg:#EFE4CE; --p-ink:#33281C; --p-line:#33281C; --p-accent:#D9BF7F; --p-pink:#2F6F6A; }
.theme-preview.blueprint { --p-bg:#0B3A6B; --p-ink:#EAF4FF; --p-line:#BFE0FF; --p-accent:#8CCBFF; --p-pink:#3E8FD6; }
.theme-preview.zen { --p-bg:#F4F2EC; --p-ink:#2B2B28; --p-line:#CFCCC0; --p-accent:#7A8B6A; --p-pink:#B3362F; }
.theme-preview.comic { --p-bg:#FFFBEA; --p-ink:#111; --p-line:#111; --p-accent:#FFD600; --p-pink:#1E4DD8; }
.theme-preview.hacker { --p-bg:#020B05; --p-ink:#B6FFCB; --p-line:#0F7A35; --p-accent:#39FF14; --p-pink:#FF2BD6; }
.theme-preview.hacker i + i { box-shadow:0 0 6px #39FF14; }

/* Wordmark, as on questorial.com */
.logo { font:700 30px/1 var(--px); color:var(--accentText); text-decoration:none; letter-spacing:1px; }
.logo:hover { color:var(--ink); }

/* The navbar brand keeps the questorial.com wordmark color (Bootstrap would make it the body color). */
.navbar .navbar-brand.logo { color:var(--accentText); }
.navbar .navbar-brand.logo:hover, .navbar .navbar-brand.logo:focus { color:var(--ink); }

/* Hacker theme: softly rounded boxes with a faint CRT glass look (curved corners, inner glow, slight vignette). */
:root[data-theme="hacker"] :is(.card, main.auth-card, .dropdown-menu, .alert, .error, .notice, .block, .feature, .game-card, .contact-grid > *, .legal section, .theme-preview, .modal-content, .list-group, table) {
  border-radius:14px !important;
  box-shadow:inset 0 0 18px rgba(57,255,20,.12), inset 0 0 2px rgba(57,255,20,.5), 0 0 10px rgba(57,255,20,.18);
  background-image:radial-gradient(ellipse at center, rgba(57,255,20,.05) 0%, rgba(0,0,0,.28) 100%);
}
:root[data-theme="hacker"] :is(.btn, button, input, select, textarea, .form-control, .form-select, .theme-toggle, .dropdown-item, .navbar-toggler) { border-radius:10px !important; }
:root[data-theme="hacker"] .dropdown-menu { background-color:var(--card); }
:root[data-theme="hacker"] .theme-preview { border-radius:8px !important; }

/* Light Gamer: flat rounded cards, no shadow; right and bottom border twice as thick. */
:root[data-theme="gamer"] :is(.card, main.auth-card, .public .screen, .public .plan, .public .game-card, .public .feat-main, .public .block, .public .feature, .modal-content) {
  border-radius:14px !important;
  box-shadow:none !important;
  border-right-width:6px !important;
  border-bottom-width:6px !important;
}
:root[data-theme="gamer"] .public .game-card:hover { box-shadow:none !important; }

/* Admin client list: drag handle and drop feedback. */
.clients-handle-col { width:40px; }
.clients-handle { cursor:grab; color:var(--muted); text-align:center; }
.clients-handle:active { cursor:grabbing; }
#clients-sortable tr.dragging { opacity:.45; }