@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Press+Start+2P&display=swap');

/* ─────────────────────────  tokens  ───────────────────────── */
:root{
  --bg:            #060a07;
  --bg-panel:      #0c130d;
  --bg-panel-alt:  #101a11;
  --bg-inset:      #08100a;

  --green:         #4ef08a;
  --green-soft:    #2c8f5a;
  --green-dim:     #1c5738;
  --amber:         #ffb300;
  --amber-soft:    #9c7000;
  --red:           #ff5f56;
  --blue:          #64b5f6;

  --text:          #d9ffe8;
  --text-dim:      #7fa891;
  --text-faint:    #4a6656;

  --border:        #1c3323;
  --border-bright: #2c5138;

  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-pixel: 'Press Start 2P', var(--font-mono);

  --radius: 10px;
  --radius-sm: 6px;

  --shadow-glow: 0 0 24px -6px rgba(78,240,138,.35);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ color-scheme: dark; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(78,240,138,.08), transparent 60%),
    radial-gradient(ellipse 100% 60% at 100% 100%, rgba(255,179,0,.05), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* subtle scanlines + vignette, purely decorative */
.crt-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:60; mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse 140% 140% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}

#fx-canvas{
  position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:70;
}

::selection{ background: var(--green-soft); color:#04140a; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg-inset); }
::-webkit-scrollbar-thumb{ background: var(--border-bright); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: var(--green-soft); }

/* ─────────────────────────  topbar  ───────────────────────── */
.topbar{
  position: sticky; top:0; z-index: 50;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(6,10,7,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand{ margin:0; display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.5px; font-size:1.05rem; white-space:nowrap; }

.page-tagline{
  max-width: 1180px;
  margin: 14px auto 0;
  padding: 0 24px;
  color: var(--text-dim);
  font-size: .85rem;
  line-height: 1.6;
}
.page-tagline strong{ color: var(--text); font-weight:600; }
.brand-mark{ filter: drop-shadow(0 0 6px rgba(78,240,138,.5)); }
.brand-slash{ color: var(--amber); }
.cursor-blink{ color: var(--green); animation: blink 1.1s steps(1) infinite; }

@keyframes blink{ 50%{ opacity:0; } }

.stat-cluster{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

.stat{ display:flex; align-items:baseline; gap:6px; }
.stat-icon{ font-size:1rem; filter: drop-shadow(0 0 4px rgba(255,179,0,.5)); }
.stat-icon.flame{ animation: flicker 1.8s ease-in-out infinite; }
@keyframes flicker{
  0%,100%{ transform: scale(1) rotate(0deg); }
  25%{ transform: scale(1.08) rotate(-3deg); }
  50%{ transform: scale(.96) rotate(2deg); }
  75%{ transform: scale(1.05) rotate(-1deg); }
}
.stat-value{ font-family: var(--font-pixel); font-size: .8rem; color: var(--green); text-shadow: 0 0 10px rgba(78,240,138,.5); }
.stat-label{ font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }

.xp-track{ display:flex; align-items:center; gap:10px; }
.xp-bar-bg{ width: 140px; height: 10px; border-radius: 6px; background: var(--bg-inset); border:1px solid var(--border); overflow:hidden; }
.xp-bar-fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--green-soft), var(--green)); box-shadow: 0 0 10px rgba(78,240,138,.6); transition: width .6s cubic-bezier(.22,.9,.3,1.3); }
.xp-text{ font-size:.72rem; color: var(--text-dim); white-space:nowrap; }

/* ─────────────────────────  layout  ───────────────────────── */
.layout{
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 60px;
  display:grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 22px;
  align-items:start;
}

@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; }
}

.side-column{ display:flex; flex-direction:column; gap:22px; }

/* ─────────────────────────  panel shell  ───────────────────────── */
.panel{
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-alt));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.7);
}

.panel-head{
  display:flex; align-items:center; gap:8px;
  padding: 10px 14px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
}
.terminal-dot{ width:9px; height:9px; border-radius:50%; opacity:.85; }
.terminal-dot.red{ background: var(--red); }
.terminal-dot.amber{ background: var(--amber); }
.terminal-dot.green{ background: var(--green); }
.panel-head-title{ margin-left:6px; font-size:.72rem; color: var(--text-faint); letter-spacing:.03em; }

.panel-body{ padding: 22px; }

/* ─────────────────────────  lesson panel  ───────────────────────── */
.lesson-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom: 14px; }

.tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  padding: 4px 9px; border-radius: 999px; border:1px solid var(--border-bright);
  color: var(--text-dim);
}
.tag.cat-HTML{ color:#ff8a65; border-color:#5c3323; background: rgba(255,138,101,.08); }
.tag.cat-CSS{ color:#64b5f6; border-color:#1f3d5c; background: rgba(100,181,246,.08); }
.tag.cat-JS{ color:#ffe066; border-color:#5c5323; background: rgba(255,224,102,.08); }
.tag.xp-tag{ color: var(--green); border-color: var(--green-dim); background: rgba(78,240,138,.08); }

.lesson-title{
  font-size: 1.35rem;
  margin: 0 0 18px;
  color: var(--text);
  line-height:1.3;
}

.lesson-explain p{
  margin: 0 0 12px;
  color: var(--text-dim);
  opacity:0;
  animation: reveal .5s ease forwards;
}
.lesson-explain p:nth-child(1){ animation-delay: .05s; }
.lesson-explain p:nth-child(2){ animation-delay: .22s; }
@keyframes reveal{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

.code-block{
  margin: 16px 0 22px;
  padding: 16px 18px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-dim);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: .85rem;
  line-height: 1.6;
  white-space: pre;
}
.tok-kw{ color: var(--amber); }
.tok-str{ color: #a6e3a1; }
.tok-com{ color: var(--text-faint); font-style: italic; }
.tok-tag{ color: #ff8a65; }
.tok-attr{ color: #64b5f6; }
.tok-num{ color: #cba6f7; }

.quiz-box{
  margin-top: 8px;
  padding: 18px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.quiz-q{ margin: 0 0 14px; font-weight:600; }
.quiz-options{ display:grid; gap:9px; }

.quiz-opt{
  text-align:left;
  font-family: inherit; font-size: .88rem;
  padding: 11px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor:pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.quiz-opt:hover:not(:disabled){ border-color: var(--green-soft); background: var(--bg-panel-alt); transform: translateX(2px); }
.quiz-opt:disabled{ cursor: default; }
.quiz-opt.correct{ border-color: var(--green); background: rgba(78,240,138,.12); color: var(--green); }
.quiz-opt.wrong{ border-color: var(--red); background: rgba(255,95,86,.1); color: #ff9a94; animation: shake .35s; }
@keyframes shake{ 20%,60%{ transform: translateX(-4px); } 40%,80%{ transform: translateX(4px); } }

.quiz-feedback{
  margin-top: 14px; padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  background: rgba(78,240,138,.08);
  border: 1px solid var(--green-dim);
  color: var(--text-dim);
  display:none;
}
.quiz-feedback.show{ display:block; animation: reveal .35s ease; }

.challenge-box{
  margin-top: 20px;
  padding: 18px;
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius-sm);
  display:none;
}
.challenge-box.unlocked{ display:block; animation: reveal .4s ease; }
.challenge-box.done{ border-style: solid; border-color: var(--green-dim); }
.challenge-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--amber); margin-bottom:8px; }
.challenge-instructions{ margin: 0 0 12px; color: var(--text-dim); font-size:.88rem; }

textarea.code-input{
  width:100%; min-height: 96px; resize: vertical;
  background: var(--bg-inset); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: .85rem; padding: 12px;
}
textarea.code-input:focus{ outline:none; border-color: var(--green-soft); }

.challenge-actions{ display:flex; align-items:center; gap:12px; margin-top: 12px; flex-wrap:wrap; }
.challenge-feedback{ font-size: .82rem; color: var(--text-dim); }
.challenge-feedback.ok{ color: var(--green); }
.challenge-feedback.bad{ color: #ff9a94; }

.done-banner{
  margin-top: 4px; padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(78,240,138,.14), rgba(78,240,138,.03));
  border: 1px solid var(--green-dim);
  display:flex; align-items:center; gap:12px;
}
.done-banner .icon{ font-size: 1.4rem; }
.done-banner strong{ color: var(--green); }
.done-banner p{ margin:2px 0 0; color: var(--text-dim); font-size:.85rem; }

.extra-practice{ margin-top: 18px; }

/* ─────────────────────────  buttons  ───────────────────────── */
.btn{
  font-family: inherit; font-size: .82rem; font-weight:600;
  padding: 9px 16px; border-radius: var(--radius-sm);
  border:1px solid var(--border-bright);
  background: var(--bg-panel);
  color: var(--text);
  cursor:pointer;
  transition: transform .1s, border-color .15s, box-shadow .2s;
}
.btn:hover{ border-color: var(--green-soft); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: linear-gradient(180deg, var(--green-soft), var(--green-dim)); border-color: var(--green-soft); color: #04140a; font-weight:700; }
.btn-primary:hover{ box-shadow: var(--shadow-glow); }
.btn-ghost{ background: transparent; }
.btn-sm{ padding: 8px 12px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

.link-btn{
  background:none; border:none; color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px;
  font-family: inherit; font-size: inherit; cursor:pointer;
}
.link-btn:hover{ color: var(--red); }

/* ─────────────────────────  mentor panel  ───────────────────────── */
.mentor-log{
  display:flex; flex-direction:column; gap:10px;
  max-height: 260px; overflow-y:auto;
  margin-bottom: 14px; padding-right: 4px;
}
.mentor-msg{
  font-size: .85rem; line-height:1.5;
  padding: 10px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-dim);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  animation: reveal .3s ease;
}
.mentor-msg .who{ color: var(--green); font-weight:700; margin-right:6px; }
.mentor-msg.user{ border-left-color: var(--amber); }
.mentor-msg.user .who{ color: var(--amber); }

.mentor-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }

.mentor-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 14px; }
.chip{
  font-size:.72rem; padding: 6px 10px; border-radius:999px;
  background: var(--bg-inset); border:1px solid var(--border);
  color: var(--text-dim); cursor:pointer;
}
.chip:hover{ border-color: var(--amber); color: var(--amber); }

.mentor-ask{ display:flex; gap:8px; }
.mentor-ask input{
  flex:1; font-family: inherit; font-size:.85rem;
  background: var(--bg-inset); border:1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px;
}
.mentor-ask input:focus{ outline:none; border-color: var(--green-soft); }

/* ─────────────────────────  progress panel  ───────────────────────── */
.mini-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-bottom:22px; }
.mini-stat{ text-align:center; padding: 12px 6px; background: var(--bg-inset); border:1px solid var(--border); border-radius: var(--radius-sm); }
.mini-stat-value{ display:block; font-family: var(--font-pixel); font-size:.85rem; color: var(--amber); margin-bottom:6px; }
.mini-stat-label{ font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); }

.block-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--text-faint); margin: 0 0 10px; }

.heatmap{
  display:grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 12px;
  gap: 3px;
  margin-bottom: 22px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.heat-cell{ width:12px; height:12px; border-radius:3px; background: var(--bg-inset); border:1px solid var(--border); }
.heat-cell.empty{ visibility:hidden; }
.heat-cell.done{ background: var(--green-dim); border-color: var(--green-soft); }
.heat-cell.bonus{ background: var(--green); border-color: var(--green); box-shadow: 0 0 6px rgba(78,240,138,.6); }
.heat-cell.today-empty{ border-color: var(--amber); border-style: dashed; }

.badge-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(64px,1fr)); gap:10px; }
.badge{
  position:relative;
  aspect-ratio: 1;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  background: var(--bg-inset); border:1px solid var(--border); border-radius: var(--radius-sm);
  filter: grayscale(1); opacity:.35;
}
.badge.unlocked{ filter:none; opacity:1; border-color: var(--amber); box-shadow: 0 0 12px -2px rgba(255,179,0,.5); animation: reveal .4s ease; }
.badge::after{
  content: attr(data-name);
  position:absolute; bottom:calc(100% + 6px); left:50%; transform: translateX(-50%);
  background:#000; color:#fff; font-size:.65rem; padding:5px 8px; border-radius:5px;
  white-space:nowrap; opacity:0; pointer-events:none; transition: opacity .15s;
  border: 1px solid var(--border-bright);
  z-index: 5;
}
.badge:hover::after{ opacity:1; }

/* ─────────────────────────  toasts  ───────────────────────── */
.toast-region{ position:fixed; top:16px; right:16px; z-index:90; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.toast{
  background: linear-gradient(135deg, var(--bg-panel-alt), var(--bg-panel));
  border:1px solid var(--amber); border-radius: var(--radius-sm);
  padding: 12px 16px; min-width: 220px; max-width:300px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6);
  animation: toast-in .35s cubic-bezier(.2,.9,.3,1.4), toast-out .4s ease 3.6s forwards;
}
.toast strong{ display:block; color: var(--amber); font-size:.82rem; margin-bottom:2px; }
.toast span{ font-size:.78rem; color: var(--text-dim); }
@keyframes toast-in{ from{ opacity:0; transform: translateX(30px); } to{ opacity:1; transform:none; } }
@keyframes toast-out{ to{ opacity:0; transform: translateX(30px); } }

/* ─────────────────────────  footer  ───────────────────────── */
.page-footer{ text-align:center; padding: 20px 24px 40px; color: var(--text-faint); font-size:.76rem; }