:root{

/* If you want to hard-force no dimming anywhere */
html, body, .container, .card, .topbar { opacity: 1 !important; }
* { opacity: 1; } /* optional - usually not needed */

  /* Solid text colors (no alpha = no “faded” look) */
  --bg: #F7F8FF;
  --panel: rgba(255,255,255,.90);
  --panel2: rgba(255,255,255,.97);
  --text: #12182C;     /* solid */
  --muted: #4B5568;    /* solid */
  --line: rgba(18, 24, 44, .12);

  --good: #16A34A;
  --warn: #F59E0B;
  --bad:  #E11D48;

  --accent:  #7C3AED; /* violet */
  --accent2: #06B6D4; /* cyan */
  --accent3: #F97316; /* orange */

  --radius: 18px;
  --shadow: 0 16px 44px rgba(16, 24, 40, .10);
  --max: 1050px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);

  /* crisp text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* bright, fun background */
  background:
    radial-gradient(1200px 700px at 14% 10%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(900px 650px at 86% 18%, rgba(6,182,212,.14), transparent 58%),
    radial-gradient(900px 650px at 55% 95%, rgba(249,115,22,.12), transparent 62%),
    linear-gradient(180deg, #FFFFFF, var(--bg));
}

a{ color: inherit; text-decoration:none; }
.container{ max-width: var(--max); margin:0 auto; padding: 22px; }

/* Topbar (light + readable) */
.topbar{
  position: sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid var(--line);
}
.topbar .row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding: 14px 22px;
  max-width: var(--max); margin:0 auto;
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand .mark{ width:34px; height:34px; }

.brand .title{
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text);
}
.brand .sub{
  font-size: 12px;
  color: var(--muted);
  margin-top:2px;
}

.pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.82);
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
}

/* Grid + card */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.card{
  grid-column: span 12;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .hd{ padding: 18px 18px 0 18px; }
.card .bd{ padding: 16px 18px 18px 18px; }

/* Root theme cards (no inline colors) */
.cardTitle{
  font-weight: 900;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}
.cardSub{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.h1{
  font-size: 28px;
  margin:0 0 6px 0;
  letter-spacing:.2px;
  color: var(--text);
}
.h2{
  font-size: 18px;
  margin:0 0 6px 0;
  color: var(--text);
}
.p{
  margin:0;
  color: var(--muted);
  line-height: 1.55;
}

.hr{ height:1px; background: var(--line); margin:14px 0; }

/* Boxes (learn/quest/quiz) */
.box{
  grid-column: span 12;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.90);
  border-radius: 16px;
  padding: 14px;
}
.box .k{
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing:.12em;
}
.box .v{
  margin-top:6px;
  font-size: 14px;
  color: var(--text);
  line-height:1.55;
}

/* Buttons (gamey + colorful) */
.btns{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  cursor:pointer;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 850;
  transition: transform .10s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(16,24,40,.10);
  border-color: rgba(124,58,237,.22);
}
.btn:active{ transform: translateY(0px) scale(.985); }

.btn.primary{
  border-color: rgba(124,58,237,.25);
  background: linear-gradient(90deg, rgba(124,58,237,.96), rgba(6,182,212,.82));
  color: #FFFFFF;
  box-shadow: 0 16px 34px rgba(124,58,237,.18);
}
.btn.good{
  border-color: rgba(22,163,74,.25);
  background: rgba(22,163,74,.10);
}

/* Quiz options (more playful) */
.quiz .opt{
  margin-top:10px;
  display:flex; align-items:flex-start; gap:10px;
  padding: 12px 12px;
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  cursor:pointer;
  transition: transform .10s ease, border-color .12s ease, background .12s ease;
}
.quiz .opt:hover{
  transform: translateY(-1px);
  border-color: rgba(6,182,212,.35);
  background: rgba(6,182,212,.06);
}
.quiz .opt.correct{
  border-color: rgba(22,163,74,.38);
  background: rgba(22,163,74,.10);
}
.quiz .opt.wrong{
  border-color: rgba(225,29,72,.35);
  background: rgba(225,29,72,.08);
}

/* LEVEL CLEAR TOAST */
.levelToast{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border: 1px solid rgba(22,163,74,.28);
  background: rgba(22,163,74,.10);
  color: var(--text);
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(16,24,40,.10);
  animation: toastPop .22s ease;
}
@keyframes toastPop{
  0%{ transform: translateY(6px); opacity:0; }
  100%{ transform: translateY(0); opacity:1; }
}

.confetti i{
  position:absolute;
  top:-10px;
  width:6px;
  height:10px;
  border-radius: 3px;
  opacity:.90;
  filter: blur(.2px);
  animation: confettiFall 2400ms linear forwards;
  transform: translateY(0) rotate(0deg);
}

.confetti{
  position: fixed;
  inset: 0;
  pointer-events:none;
  overflow:hidden;
  z-index: 9999;
}

@keyframes confettiFall{
  0%{ transform: translateY(-10px) rotate(0deg); opacity: 0; }
  15%{ opacity: .85; }
  100%{ transform: translateY(105vh) rotate(220deg); opacity: .55; }
}

/* “Unlocked” pulse */
.unlockPulse{ animation: unlockPulse .6s ease; }
@keyframes unlockPulse{
  0%{ transform: scale(1); box-shadow: 0 0 0 rgba(124,58,237,0); }
  40%{ transform: scale(1.02); box-shadow: 0 18px 44px rgba(124,58,237,.18); }
  100%{ transform: scale(1); }
}

.footer{
  padding: 18px 22px;
  color: var(--muted);
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.70);
}

/* --- Light mode: remove wash-out from backdrop blur --- */
.topbar{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,.94) !important; /* more solid */
}

/* Also tighten the card glass effect a bit */
.card{
  background: rgba(255,255,255,.96) !important;
}

/* Optional: make pills less “ghosty” */
.pill{
  background: rgba(255,255,255,.92) !important;
}

@media (min-width: 900px){
  .box.half{ grid-column: span 6; }
}
@media (prefers-reduced-motion: reduce){
  .btn, .quiz .opt{ transition:none; }
  .btn:hover, .quiz .opt:hover{ transform:none; }
}