:root{
  /* Global palette */
  --bg:#14161a; --panel:#1f2228; --ink:#eef1f6; --muted:#b4bac6;
  --edge:#333844; --accent:#ff8800; /* Study orange */
  --green:#06D6A0; --red:#E63946; --yellow:#FFD60A; --blue:#118AB2;
  --quiz-bg:#2B2D42;         /* Quiz background */
  --study-bg:#121212;        /* Study background */
  --library-bg:#F8F9FA;      /* Library background */
  --library-ink:#111111;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:linear-gradient(#121316,#0e0f12);color:var(--ink);
     font:16px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--edge);background:#0f1014aa;backdrop-filter:blur(4px)}
.brand{display:flex;align-items:center;gap:10px}
.brand-icon{width:86px;height:86px}
.tabs{display:flex;gap:8px}
.tab{background:#242731;border:1px solid #2f3340;border-radius:10px;padding:8px 12px;color:var(--ink);cursor:pointer}
.tab.active,.tab:hover{filter:brightness(1.12)}
.belt-box{display:flex;align-items:center;gap:12px}
.belt{height:48px;filter:drop-shadow(0 0 6px rgba(0,0,0,.6))}
.timer{color:var(--muted);font-size:.95rem}

.view{display:none;padding:16px}
.view.active{display:block}

/* Home hero — translucent (no clouds) so the background art is visible */
.card-translucent{
  border:1px solid var(--edge);border-radius:16px;padding:20px;margin:12px 0;
  background:rgba(15,17,21,.62); backdrop-filter:saturate(120%) blur(2px);
}
.hero .accent{color:var(--accent)}
.row{display:flex;gap:10px;align-items:center}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between}
.row.gap{gap:8px}
.tiny{margin-top:10px}
.btn{background:#2e3442;border:1px solid #3a4150;border-radius:10px;padding:10px 14px;color:var(--ink);cursor:pointer}
.btn.primary{background:var(--accent);color:#1b1100;border:none;font-weight:800}
.btn.danger{background:#7a2732;border:none}
.file input{display:none}

/* Quiz mode visuals */
#quiz.view{background:var(--quiz-bg)}
.goal{font-weight:900;font-size:1.6rem}
.position{font-weight:700;color:var(--blue)}
.meta{color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:14px;padding:14px;margin:12px 0}
.qtext{font-size:1.15rem;margin-bottom:10px}
.answers{display:grid;grid-template-columns:1fr;gap:8px}
.answer{padding:12px;border:1px solid var(--edge);border-radius:10px;background:#262a33;color:var(--ink);text-align:left;cursor:pointer}
.answer.correct{background:rgba(6,214,160,.12);border-color:var(--green)}
.answer.wrong{background:rgba(230,57,70,.12);border-color:var(--red)}
.hidden{display:none}

.grid{display:grid;grid-template-columns:1fr 360px;gap:14px}
.quote{font-style:italic;color:var(--muted)}
.artbox{
  display:flex;justify-content:flex-end;align-items:center;margin-top:8px;height:240px;
  border:1px dashed var(--edge);border-radius:12px;overflow:hidden;background:#14161a;
}
.artbox img{max-width:320px;height:auto;border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,.25)}
.move-desc{margin:.75rem 0;padding:.5rem .75rem;border-left:4px solid var(--yellow);background:#181b20;color:#ddd;border-radius:8px}
.move-desc.hidden{display:none}

/* Study mode paneling */
#study.view{background:var(--study-bg)}
.panel{background:#181b20;border:1px solid var(--edge);border-radius:12px;padding:12px}
.study-wrap{display:grid;grid-template-columns:260px 1fr;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* NEW: Read-only study view styles */
.study-var-block{border-bottom:1px solid var(--edge);padding-bottom:1rem;margin-bottom:1rem}
.study-var-block:last-child{border-bottom:none;margin-bottom:0}
.study-desc{background:#14161a;border-left:3px solid var(--accent);padding:.75rem 1rem;margin:.75rem 0;border-radius:0 8px 8px 0;white-space:pre-wrap;max-height:400px;overflow-y:auto}
.study-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.study-links > a{margin-top:0}

/* Light Library */
#library.view{background:var(--library-bg);color:var(--library-ink)}
#library .card{background:#fff;color:#111;border:1px solid #e5e7eb}
#library .btn{background:#eef2f7;color:#111;border:1px solid #d0d7e2}
#library .muted{color:#6b7280}
#library .card.subtle{background:#fafbff}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--edge);padding:8px;text-align:left}
.build{color:var(--muted)}

@media (max-width: 720px){
  .grid{grid-template-columns:1fr}
  .brand-icon{width:64px;height:64px}
}

/* Background image (visible through translucent hero) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: image-set(url("./assets/bg2x.png") 2x, url("./assets/bg.png") 1x), url("./assets/clouds.svg");
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  opacity: 0.95;
}

/* Flashcard overlay */
#flashOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:9999;}
#flashOverlay .card{max-width:800px;width:92%;background:#111;border:1px solid #333;border-radius:16px;padding:18px;}
#fcFront{margin-bottom:12px}
#fcBack{margin-top:8px;opacity:.9}
.fc-answer{margin-top:8px;padding:10px;border:2px solid var(--green);border-radius:12px;background:#132018}
#fcProceed.hidden{display:none}









/* === Enhancements (study/lib refopt) === */
.pos-btn.active{ outline:2px solid var(--accent); filter:brightness(1.1); }
.pill{
  display:inline-block; padding:2px 8px; border-radius:999px;
  border:1px solid var(--edge); color:var(--muted); font-size:.9rem; margin-left:.35rem;
}
.study-head{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }



/* --- Quiz feedback improvements --- */
.feedback-grid{ display:grid; grid-template-columns: 1fr 320px; gap:14px; }
.yt-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.yt-links > a{ margin-top:0; }

/* Move description: full-width, readable */
#feedback .move-desc{
  width:100%;
  white-space:pre-wrap;
  font-size:1rem;
  line-height:1.5;
}

/* Footer with quote + art at bottom of feedback */
.feedback-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--edge);
  margin-top:12px;
  padding-top:10px;
}
.feedback-foot .quote{ margin:0; }
.feedback-foot .artbox{ margin:0; flex:0 0 320px; height:220px; }