/* BlockQuest Academy — blocky, kid-friendly Minecraft-flavored theme. Offline-first: no web fonts. */
:root{
  --bg:#1b2a1f; --bg2:#22351f; --panel:#2f4a2c; --panel2:#3b5c38;
  --dirt:#6b4a2b; --dirt-d:#4e351d; --grass:#5aa83a; --grass-d:#3d7a25;
  --stone:#8a8a8a; --gold:#f4c430; --gold-d:#b88a14;
  --ink:#f3f0e3; --ink-dim:#c8d0bd; --line:#16210f;
  --sky:#7ec0ee; --water:#3a76c4; --redstone:#c0392b; --diamond:#4fd6c9;
  --shadow:0 0 0 4px var(--line);
  --r:0; /* sharp pixel corners */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Trebuchet MS",Verdana,system-ui,sans-serif;
  background:
    linear-gradient(180deg,#2a3d22 0,#1b2a1f 60%);
  color:var(--ink); min-height:100vh; -webkit-font-smoothing:none;
}
.pixel{font-family:"Courier New",monospace;letter-spacing:1px}
img{image-rendering:pixelated}

/* Top bar */
header.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;background:var(--dirt);
  border-bottom:6px solid var(--dirt-d);
}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer}
.logo .cube{width:34px;height:34px;display:inline-block;
  background:linear-gradient(135deg,var(--grass) 0 50%,var(--grass-d) 50% 100%);
  box-shadow:inset -4px -4px 0 var(--dirt-d), inset 4px 4px 0 #7cc24e;}
.logo h1{font-size:20px;margin:0;text-shadow:2px 2px 0 var(--line)}
.logo small{display:block;font-size:11px;color:#ffe9b0;letter-spacing:1px}
nav{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}

/* Blocky buttons */
.btn{
  font-family:inherit;font-weight:bold;font-size:14px;cursor:pointer;
  color:var(--ink);background:var(--grass);
  border:none;padding:9px 14px;
  box-shadow:inset -4px -4px 0 var(--grass-d), inset 4px 4px 0 #79c455, 0 0 0 3px var(--line);
  text-shadow:1px 1px 0 var(--line);
}
.btn:hover{filter:brightness(1.08)}
.btn:active{box-shadow:inset 4px 4px 0 var(--grass-d), inset -4px -4px 0 #79c455, 0 0 0 3px var(--line)}
.btn.alt{background:var(--stone);box-shadow:inset -4px -4px 0 #5f5f5f, inset 4px 4px 0 #a6a6a6,0 0 0 3px var(--line)}
.btn.gold{background:var(--gold);color:#3a2c00;box-shadow:inset -4px -4px 0 var(--gold-d), inset 4px 4px 0 #ffdf6e,0 0 0 3px var(--line)}
.btn.small{font-size:12px;padding:6px 10px}
.btn.ghost{background:transparent;box-shadow:0 0 0 3px var(--line);color:var(--ink)}
nav .btn{background:var(--panel2);box-shadow:inset -4px -4px 0 #2b4528, inset 4px 4px 0 #4d7048,0 0 0 3px var(--line)}
nav .btn.active{background:var(--gold);color:#3a2c00;box-shadow:inset -4px -4px 0 var(--gold-d), inset 4px 4px 0 #ffdf6e,0 0 0 3px var(--line)}

main{max-width:1080px;margin:0 auto;padding:22px 18px 80px}
.view{display:none;animation:pop .15s ease}
.view.active{display:block}
@keyframes pop{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

.panel{background:var(--panel);border:none;box-shadow:0 0 0 4px var(--line);padding:18px;margin:0 0 18px}
.panel h2{margin:0 0 6px;font-size:22px;text-shadow:2px 2px 0 var(--line)}
.panel p.lead{color:var(--ink-dim);margin:0 0 14px;line-height:1.5}

/* Hero */
.hero{background:linear-gradient(180deg,#3a6f8c,#2f5a73);box-shadow:0 0 0 4px var(--line);padding:26px;margin-bottom:18px;position:relative;overflow:hidden}
.hero h2{font-size:28px;margin:0 0 8px;text-shadow:2px 2px 0 var(--line)}
.hero p{max-width:640px;line-height:1.55;margin:0 0 16px}
.hero .cubes{position:absolute;right:-10px;bottom:-10px;opacity:.5;font-size:64px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}

/* Filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters .lbl{font-size:12px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:1px}
.chip{font-size:12px;padding:5px 10px;cursor:pointer;background:var(--panel2);box-shadow:0 0 0 2px var(--line);user-select:none}
.chip.on{background:var(--gold);color:#3a2c00}

/* Quest grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.qcard{background:var(--panel2);box-shadow:0 0 0 4px var(--line);padding:14px;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:8px}
.qcard:hover{filter:brightness(1.07)}
.qcard.done{outline:0}
.qcard .tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:10px;font-weight:bold;padding:3px 7px;box-shadow:0 0 0 2px var(--line);text-transform:uppercase;letter-spacing:.5px}
.tag.subject{background:var(--diamond);color:#06302c}
.tag.grade{background:var(--gold);color:#3a2c00}
.tag.kind{background:var(--stone);color:#1c1c1c}
.qcard h3{margin:2px 0;font-size:17px;line-height:1.15}
.qcard .obj{font-size:13px;color:var(--ink-dim);line-height:1.4;flex:1}
.qcard .foot{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.stamp{position:absolute;top:8px;right:8px;font-size:11px;background:var(--grass);color:#06320a;padding:3px 8px;box-shadow:0 0 0 2px var(--line);display:none}
.qcard.done .stamp{display:block}
.qcard.done h3{text-decoration:none}

/* Quest detail modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:50;display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:30px 14px}
.modal.open{display:flex}
.sheet{max-width:620px;width:100%;background:var(--panel);box-shadow:0 0 0 5px var(--line);padding:22px}
.sheet .npc{display:flex;gap:12px;background:var(--bg2);box-shadow:inset 0 0 0 3px var(--line);padding:12px;margin:12px 0;align-items:flex-start}
.sheet .npc .av{font-size:34px}
.sheet .npc .say{font-style:italic;line-height:1.45}
.kv{margin:12px 0}
.kv h4{margin:0 0 4px;font-size:13px;color:var(--gold);text-transform:uppercase;letter-spacing:1px}
.kv p{margin:0;line-height:1.5}
.blocklist{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.bk{font-size:11px;font-family:"Courier New",monospace;background:var(--bg);box-shadow:0 0 0 2px var(--line);padding:3px 7px}
.sheet .actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

/* Studio */
.studio-wrap{display:grid;grid-template-columns:1fr 320px;gap:16px}
@media(max-width:820px){.studio-wrap{grid-template-columns:1fr}.studio-wrap .side{order:-1}}
.canvas-box{background:#26331f;box-shadow:0 0 0 4px var(--line);padding:10px;display:flex;flex-direction:column;gap:10px}
#paintGrid{display:grid;gap:2px;background:var(--line);padding:2px;touch-action:none;user-select:none}
.cell{width:100%;aspect-ratio:1/1;background:#3a4a30;cursor:pointer;box-shadow:inset 0 0 0 1px #2c3a24}
.cell:hover{outline:2px solid var(--gold);outline-offset:-2px}
.preview-box{background:#0d1a22;box-shadow:0 0 0 4px var(--line);padding:8px}
#isoCanvas{display:block;width:100%;height:auto;image-rendering:pixelated;background:#0d1a22}
.side .panel{margin-bottom:12px;padding:14px}
.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.swatch{aspect-ratio:1/1;cursor:pointer;box-shadow:0 0 0 2px var(--line);position:relative}
.swatch.on{box-shadow:0 0 0 3px var(--gold)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.row label{font-size:12px;color:var(--ink-dim)}
select,input[type=text],input[type=range]{font-family:inherit;background:var(--bg);color:var(--ink);border:none;box-shadow:0 0 0 2px var(--line);padding:6px}
.stat{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;border-bottom:1px dotted #4a6044}
.layerbar{display:flex;align-items:center;gap:8px}
.layerbar .lv{min-width:54px;text-align:center;font-weight:bold}

/* Generator */
.gen-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.gen-form{grid-template-columns:1fr}.studio-wrap{grid-template-columns:1fr}}
.gen-out{margin-top:16px}

/* Install / parents */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:10px 10px 10px 46px;margin-bottom:8px;background:var(--panel2);box-shadow:0 0 0 3px var(--line);line-height:1.45}
.steps li::before{content:counter(s);position:absolute;left:8px;top:8px;width:28px;height:28px;display:grid;place-items:center;background:var(--gold);color:#3a2c00;font-weight:bold;box-shadow:0 0 0 2px var(--line)}
.progress-wrap{background:var(--bg);box-shadow:inset 0 0 0 3px var(--line);height:24px;margin:10px 0;position:relative}
.progress-bar{height:100%;background:var(--grass);width:0;transition:width .3s}
.progress-wrap span{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:bold;text-shadow:1px 1px 0 var(--line)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--gold);color:#3a2c00;padding:10px 18px;box-shadow:0 0 0 3px var(--line);font-weight:bold;z-index:80;display:none}
.toast.show{display:block;animation:pop .2s}
footer{ text-align:center;color:var(--ink-dim);font-size:12px;padding:24px}
a{color:var(--gold)}
.muted{color:var(--ink-dim)}
.kbd{font-family:"Courier New",monospace;background:var(--bg);box-shadow:0 0 0 2px var(--line);padding:1px 6px}