:root{
  --bg:#0b0f14; --panel:#0f1722; --panel2:#101a28;
  --text:#e6edf3; --muted:#9aa4b2; --border:#223044;
  --accent:#00bcd4; --accent2:#00e5ff;
  --good:#24d18a; --bad:#ff5b6e;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --link: var(--accent2);
  --radius:16px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

html[data-theme="darktv"]{
  --bg:#0b0f14; --panel:#0f1722; --panel2:#101a28;
  --text:#e6edf3; --muted:#9aa4b2; --border:#223044;
  --accent:#00bcd4; --accent2:#00e5ff; --link:#00e5ff;
}
html[data-theme="midnight"]{
  --bg:#070a12; --panel:#0b1120; --panel2:#0e162b;
  --text:#e8eefc; --muted:#9aa4b2; --border:#1d2a45;
  --accent:#7c3aed; --accent2:#a78bfa; --link:#a78bfa;
}
html[data-theme="ocean"]{
  --bg:#07131a; --panel:#0b1f28; --panel2:#0a2834;
  --text:#e6f7ff; --muted:#9fb4bf; --border:#123544;
  --accent:#00d4ff; --accent2:#22c1ff; --link:#22c1ff;
}
html[data-theme="semidark"]{
  --bg:#10141b; --panel:#151b25; --panel2:#182033;
  --text:#e9eef5; --muted:#a3adbb; --border:#2a3548;
  --accent:#f59e0b; --accent2:#fbbf24; --link:#fbbf24;
}
html[data-theme="semilight"]{
  --bg:#e9eef6; --panel:#ffffff; --panel2:#f3f6fb;
  --text:#0f172a; --muted:#475569; --border:#d9e2ef;
  --accent:#2563eb; --accent2:#60a5fa; --link:#2563eb;
  --shadow: 0 10px 30px rgba(2,6,23,.10);
}
html[data-theme="paper"]{
  --bg:#f7f2e8; --panel:#ffffff; --panel2:#faf7f1;
  --text:#1f2937; --muted:#6b7280; --border:#e8dfd2;
  --accent:#10b981; --accent2:#34d399; --link:#0ea5e9;
  --shadow: 0 10px 30px rgba(31,41,55,.12);
}
html[data-theme="light"]{
  --bg:#f6f8fb; --panel:#ffffff; --panel2:#f3f6fb;
  --text:#0f172a; --muted:#475569; --border:#d9e2ef;
  --accent:#0ea5e9; --accent2:#38bdf8; --link:#0ea5e9;
  --shadow: 0 10px 30px rgba(2,6,23,.10);
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text)}
a{color:var(--link);text-decoration:none}
a:hover{opacity:.9}
code{background:rgba(255,255,255,.06);padding:2px 6px;border-radius:8px;border:1px solid var(--border)}
.wrap{max-width:1100px;margin:0 auto;padding:18px}

.top{position:sticky;top:0;z-index:10;background:rgba(0,0,0,.10);backdrop-filter: blur(8px);border-bottom:1px solid var(--border)}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:800;color:#001018}
.title{font-weight:800}
.subtitle{font-size:13px;color:var(--muted);margin-top:2px}
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.navLink{padding:8px 10px;border-radius:12px}
.navLink.active{background:rgba(255,255,255,.06);border:1px solid var(--border)}
.themeSelect{background:var(--panel);color:var(--text);border:1px solid var(--border);padding:8px 10px;border-radius:12px}

.smallBtn{background:var(--panel);color:var(--text);border:1px solid var(--border);padding:8px 10px;border-radius:12px;cursor:pointer}
.smallBtn:hover{background:var(--panel2)}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start;margin-top:8px}
@media(max-width:900px){.hero{grid-template-columns:1fr}}

.section{margin-top:22px}
.sectionHead h2{margin:0}
.sectionHead p{margin:6px 0 0 0}

.searchRow{display:flex;gap:10px;flex-wrap:wrap}
input[type="search"], input[type="text"]{
  background:var(--panel);color:var(--text);
  border:1px solid var(--border);
  padding:12px 12px;border-radius:14px;outline:none;min-width:220px;flex:1
}
select{
  background:var(--panel);color:var(--text);
  border:1px solid var(--border);
  padding:12px 10px;border-radius:14px;outline:none
}
.btn{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#001018;border:0;padding:12px 14px;border-radius:14px;
  cursor:pointer;font-weight:800
}
.btn.secondary{
  background:transparent;color:var(--text);border:1px solid var(--border);font-weight:700
}
.btn.secondary:hover{background:rgba(255,255,255,.06)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.tile{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)
}
.step{width:28px;height:28px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-weight:800}
.tile h3{margin:10px 0 8px 0}
.tile ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.7}

.card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)
}
.cardHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cardTitle{font-weight:800}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--border)}
.muted{color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--border);cursor:pointer;font-size:13px}
.chip:hover{background:rgba(255,255,255,.09)}
.chip.active{outline:2px solid rgba(255,255,255,.14)}

.list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.item{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)
}
.itemTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.itemTitle{font-weight:900;font-size:16px}
.itemMeta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:6px}
.tag{padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04)}
.itemDesc{margin-top:10px;color:var(--muted);line-height:1.7}
.markBtn{
  display:flex;align-items:center;gap:8px;
  background:transparent;border:1px solid var(--border);
  color:var(--text);padding:9px 12px;border-radius:12px;cursor:pointer
}
.markBtn:hover{background:rgba(255,255,255,.06)}
.markBtn.on{border-color:rgba(36,209,138,.45);background:rgba(36,209,138,.08)}
.check{font-weight:900;color:var(--good)}

.hidden{display:none}
.empty{padding:18px;border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);margin-top:12px}

.newsList{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.news{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)
}
.news a{text-decoration:underline}
.footer{color:var(--muted);text-align:center;padding:20px 0}

.modalOverlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:18px}
.modalOverlay.open{display:flex}
.modal{width:min(620px,100%);background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.modalHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px;border-bottom:1px solid var(--border)}
.modalBody{padding:14px}
.modalTitle{font-weight:900}

#toTop{
  position:fixed;right:16px;bottom:16px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  color:var(--text);padding:10px 12px;border-radius:14px;
  cursor:pointer;display:none
}
#toTop.show{display:block}

.gridCards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:980px){.gridCards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gridCards{grid-template-columns:1fr}}
.cardLink{display:inline-flex;gap:8px;align-items:center;text-decoration:underline}
/* === Quiz (game.html) === */
.quizCard { padding:16px; border-radius:14px; }
.quizQ { font-size:18px; font-weight:700; line-height:1.5; }
.quizOptions { display:grid; gap:10px; margin-top:12px; }
.quizOpt{
  width:100%;
  text-align:left;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  transition: transform .06s ease, border-color .12s ease, background .12s ease;
}
.quizOpt:hover { transform: translateY(-1px); }
.quizOpt.selected{
  font-weight:800;
  border-color: currentColor;
  background: rgba(255,255,255,.08);
}
.quizOpt.correct{
  border-color: rgba(0,255,140,.55);
  background: rgba(0,255,140,.10);
  font-weight:800;
}
.quizOpt.wrong{
  border-color: rgba(255,80,80,.55);
  background: rgba(255,80,80,.10);
  font-weight:800;
}

/* === Quiz (game.html) OVERRIDES v2 === */
.quizWrap { display:grid; grid-template-columns: 1.35fr .65fr; gap:16px; }
@media (max-width: 980px){ .quizWrap{ grid-template-columns: 1fr; } }

.quizCard { padding:18px; border-radius:16px; }
.quizTopRow{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.quizControls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.quizSelect{
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: inherit;
  outline: none;
}

.quizQ { font-size:18px; font-weight:800; line-height:1.55; margin-top:10px; white-space:pre-line; }
.quizOptions { display:grid; gap:10px; margin-top:14px; }

.quizOpt{
  width:100%;
  text-align:left;
  padding:13px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  transition: transform .06s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease, filter .12s ease;
}
.quizOpt:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* VERY clear selected */
.quizOpt.selected{
  font-weight:900;
  border-color: rgba(120,180,255,.85);
  background: rgba(120,180,255,.14);
  box-shadow: 0 0 0 3px rgba(120,180,255,.18);
}

/* After submit */
.quizOpt.correct{
  border-color: rgba(0,255,140,.65);
  background: rgba(0,255,140,.13);
  box-shadow: 0 0 0 3px rgba(0,255,140,.18);
  font-weight:900;
}
.quizOpt.wrong{
  border-color: rgba(255,80,80,.65);
  background: rgba(255,80,80,.13);
  box-shadow: 0 0 0 3px rgba(255,80,80,.18);
  font-weight:900;
}
.quizOpt.dimmed{ opacity:.55; }

.quizExplainBox{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  line-height:1.75;
  white-space:pre-line;
}

/* === QUIZ FORCE SELECTED VISIBILITY (wins over everything) === */
#quizOptions .quizOpt.selected{
  font-weight: 900 !important;
  outline: 4px solid rgba(120,180,255,.95) !important;
  outline-offset: 2px !important;
  border-color: rgba(120,180,255,.95) !important;
  background: rgba(120,180,255,.18) !important;
  box-shadow: 0 0 0 4px rgba(120,180,255,.22) !important;
}

/* === QUIZ SELECTED: ULTRA VISIBLE (GLOBAL) === */
.quizOpt.selected,
.quizOpt[data-selected="1"]{
  font-weight: 900 !important;
  transform: scale(1.02) !important;
  outline: 5px solid rgba(80,160,255,.98) !important;
  outline-offset: 3px !important;
  border-color: rgba(80,160,255,.98) !important;
  background: rgba(80,160,255,.22) !important;
  color: rgba(235,245,255,1) !important;
  box-shadow:
    0 0 0 6px rgba(80,160,255,.20),
    0 0 18px rgba(80,160,255,.45) !important;
}

/* If you mark correct/wrong, still keep selected outline */
.quizOpt.selected.correct,
.quizOpt[data-selected="1"].correct{
  outline-color: rgba(60,220,140,.98) !important;
  border-color: rgba(60,220,140,.98) !important;
  box-shadow:
    0 0 0 6px rgba(60,220,140,.20),
    0 0 18px rgba(60,220,140,.40) !important;
}

.quizOpt.selected.wrong,
.quizOpt[data-selected="1"].wrong{
  outline-color: rgba(255,90,120,.98) !important;
  border-color: rgba(255,90,120,.98) !important;
  box-shadow:
    0 0 0 6px rgba(255,90,120,.20),
    0 0 18px rgba(255,90,120,.35) !important;
}

/* If disabled after answering, still show selection */
.quizOpt.selected:disabled,
.quizOpt[data-selected="1"]:disabled{
  opacity: 1 !important;
  filter: none !important;
}

/* === QUIZ SELECTED: BULLETPROOF (works even if class name differs) === */
#quizOptions .selected,
#quizOptions [aria-pressed="true"],
#quizOptions [data-selected="1"]{
  font-weight: 900 !important;
  outline: 5px solid rgba(80,160,255,.98) !important;
  outline-offset: 3px !important;
  border-color: rgba(80,160,255,.98) !important;
  background: rgba(80,160,255,.22) !important;
  color: rgba(235,245,255,1) !important;
  box-shadow: 0 0 0 6px rgba(80,160,255,.20), 0 0 18px rgba(80,160,255,.45) !important;
}

/* Make options feel clickable (even if your base CSS missed it) */
#quizOptions button,
#quizOptions .quizOpt,
#quizOptions .quizOption,
#quizOptions .opt{
  cursor: pointer;
  user-select: none;
}