/* Jugami Code Club (grades 6-8) by Grace. Circuit-board + green-screen terminal theme.
   Swap the whole look by editing these custom properties. */
:root{
  --board:#06251a; --board2:#0a2f22; --panel:#0f3b2a; --panel2:#04170f; --line:#2a6b4e;
  --ink:#effff5; --muted:#b9dcc8; --phosphor:#7dffb0; --phosphorD:#3fd88a;
  --copper:#e9a56a; --copperD:#b8733a; --solder:#d4dde0; --led:#ff8f8f; --cyan:#7fe7ff; --gold:#ffd166;
  --radius:10px;
  --sans:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","Cascadia Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background-color:var(--board);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.65;
  background-image:
   radial-gradient(circle at 12px 12px,rgba(233,165,106,.16) 2px,transparent 2.6px),
   linear-gradient(90deg,rgba(125,255,176,.035) 1px,transparent 1px),
   linear-gradient(rgba(125,255,176,.035) 1px,transparent 1px);
  background-size:48px 48px,24px 24px,24px 24px}
a{color:var(--phosphor);text-underline-offset:3px}
a:hover{color:var(--gold)}
img,svg{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--mono);line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(2rem,6vw,3.1rem);margin:.15em 0 .2em;color:var(--phosphor);text-shadow:0 0 18px rgba(125,255,176,.35)}
h2{font-size:clamp(1.45rem,3.6vw,1.8rem);margin:2.4em 0 .5em;color:var(--ink);scroll-margin-top:72px}
h2 .num{color:var(--copper);margin-right:.5em;font-size:.8em}
h3{font-size:1.18rem;margin:1.5em 0 .35em;color:var(--copper)}
p,li{max-width:68ch}
code,kbd,.mono{font-family:var(--mono);font-variant-ligatures:none}
code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:.05em .35em;font-size:.88em;color:var(--phosphor)}
kbd{background:var(--solder);color:#102018;border-radius:4px;padding:0 .4em;font-size:.85em;border-bottom:2px solid #8fa0a6}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#111;padding:6px 12px;z-index:30;border-radius:6px;font-weight:700}
.skip:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 18px}
.prose{max-width:44rem}

/* header */
.site-head{background:rgba(4,23,15,.96);border-bottom:2px solid var(--copperD);position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 18px;max-width:1060px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--mono);font-weight:700;font-size:1.08rem}
.brand img{width:34px;height:34px}
.brand:hover{color:var(--phosphor)}
.brand .cursor{color:var(--phosphor);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.head-nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.head-nav a{font-family:var(--mono);font-size:.86rem;color:var(--muted);text-decoration:none;padding:5px 10px;border-radius:6px;border:1px solid var(--line)}
.head-nav a:hover,.head-nav a[aria-current]{color:var(--board);background:var(--phosphor);border-color:var(--phosphor)}

.crumbs{font-family:var(--mono);font-size:.86rem;color:var(--muted);margin:18px 0 0}
.crumbs a{color:var(--muted)}

/* hero */
.hero{display:grid;gap:26px;align-items:center;margin:14px 0 10px}
@media (min-width:820px){.hero{grid-template-columns:1.15fr .85fr}}
.kicker{font-family:var(--mono);color:var(--copper);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;margin:0}
.tagline{font-size:1.22rem;color:var(--muted);margin:.2em 0 1em}
.hero figure{margin:0}
.screen{background:var(--panel2);border:2px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 0 0 4px rgba(233,165,106,.15),0 10px 30px rgba(0,0,0,.35)}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.btn{display:inline-block;font-family:var(--mono);font-weight:700;background:var(--phosphor);color:#04170f;text-decoration:none;padding:10px 16px;border-radius:8px;border:2px solid var(--phosphor)}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#04170f}
.btn.ghost{background:transparent;color:var(--phosphor)}
.btn.ghost:hover{color:#04170f}

/* cards */
.cards{list-style:none;padding:0;margin:18px 0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);padding:16px;position:relative}
.card h3{margin:.4em 0 .2em;font-size:1.15rem}
.card p{margin:.3em 0;font-size:1rem;color:var(--muted)}
.card svg{width:64px;height:64px;display:block}
.card.live{border-color:var(--phosphor);box-shadow:0 0 18px rgba(125,255,176,.18)}
.card.soon{opacity:.92;border-style:dashed}
.card.soon h3{color:var(--solder)}
.tag{font-family:var(--mono);font-size:.75rem;padding:2px 8px;border-radius:999px;background:var(--panel2);color:var(--muted);border:1px solid var(--line);position:absolute;top:14px;right:14px}
.tag.on{background:var(--phosphor);color:#04170f;border-color:var(--phosphor);font-weight:700}
.card a.stretch{color:var(--phosphor)}

/* callouts */
.callout{background:var(--panel);border-left:5px solid var(--copper);border-radius:0 var(--radius) var(--radius) 0;padding:12px 16px;margin:18px 0;max-width:44rem}
.callout.dyk{border-left-color:var(--cyan)}
.callout.dyk b:first-child{color:var(--cyan);font-family:var(--mono)}
.callout.term{border-left-color:var(--phosphor)}
.callout p{margin:.4em 0}
dl.terms{display:grid;gap:6px 14px;grid-template-columns:max-content 1fr;max-width:44rem}
dl.terms dt{font-family:var(--mono);color:var(--phosphor);font-weight:700}
dl.terms dd{margin:0}
@media (max-width:560px){dl.terms{grid-template-columns:1fr}dl.terms dd{margin-bottom:8px}}
.toc{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 18px;max-width:44rem}
.toc h2{font-size:1rem;margin:.4em 0;color:var(--copper)}
.toc ol{margin:.2em 0 .5em;padding-left:1.4em;columns:2 15rem}
.toc li{font-family:var(--mono);font-size:.92rem}

/* code-ish listings (static programs) */
.prog{font-family:var(--mono);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 14px;list-style:none;margin:12px 0;max-width:30rem}
.prog li{padding:1px 0}
.prog .in{padding-left:1.6em}
.prog .kw{color:var(--copper)}
.compare{display:grid;gap:14px;max-width:44rem}
@media (min-width:640px){.compare{grid-template-columns:1fr 1fr}}
.compare h3{margin-top:.2em;font-size:1rem}
figure.art{margin:18px 0;max-width:44rem}
figure.art figcaption{font-size:.95rem;color:var(--muted);margin-top:6px}

/* game */
.game{background:var(--panel);border:2px solid var(--copperD);border-radius:14px;padding:14px;margin:16px 0}
.game-help{background:var(--panel2);border:1px dashed var(--line);border-radius:8px;padding:8px 14px;font-size:1rem}
.game-help p{margin:.35em 0}
.levels{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.levels button{min-width:3.2em}
.game-grid{display:grid;gap:14px}
@media (min-width:860px){.game-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.stage{background:var(--panel2);border-radius:10px;padding:8px;border:1px solid var(--line)}
.stage svg{display:block;width:100%;max-height:420px}
.level-goal{margin:.2em 0 .4em;font-weight:700}
.status{font-family:var(--mono);font-size:.95rem;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;margin:6px 0}
.status b{color:var(--ink)}
.palette,.controls{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
button{font:inherit;font-family:var(--mono);font-size:.95rem;cursor:pointer;border-radius:8px;border:2px solid var(--line);background:var(--board2);color:var(--ink);padding:7px 12px;min-height:44px}
button:hover{border-color:var(--phosphor)}
button[aria-pressed="true"],button.current{background:var(--phosphor);color:#04170f;border-color:var(--phosphor);font-weight:700}
button:disabled{opacity:.45;cursor:not-allowed}
button.blk-F{border-color:var(--phosphorD)}
button.blk-L,button.blk-R{border-color:var(--cyan)}
button.blk-rep{border-color:var(--copper)}
button.go{background:var(--phosphor);color:#04170f;border-color:var(--phosphor);font-weight:700}
button.go:hover{background:var(--gold);border-color:var(--gold)}
.rep-pick{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.95rem}
.rep-pick select{font:inherit;min-height:44px;background:var(--board2);color:var(--ink);border:2px solid var(--copper);border-radius:8px;padding:4px 8px}
.program{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px;min-height:120px;font-family:var(--mono);max-height:420px;overflow:auto}
.program ol{list-style:none;margin:0;padding:0}
.program ol ol{margin:4px 0 4px 10px;padding:4px 0 4px 10px;border-left:3px solid var(--copper);border-radius:0 0 0 6px}
.program li{margin:3px 0}
.pblk{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pblk>button.tok{min-height:38px;padding:4px 10px;text-align:left}
.pblk .cnt{min-height:38px;min-width:38px;padding:2px 8px}
.pblk.running>button.tok{background:var(--gold);color:#04170f;border-color:var(--gold)}
.caret{display:block;font-size:.8rem;color:var(--gold);padding:2px 6px;border:1px dashed var(--gold);border-radius:6px;margin:3px 0;animation:blink 1.1s steps(1) infinite}
.slot{min-height:34px;font-size:.82rem;border-style:dashed;color:var(--muted)}
.msg{min-height:1.6em;font-weight:700;margin:8px 0;padding:6px 10px;border-radius:8px;background:var(--panel2)}
.msg.win{color:var(--phosphor)}.msg.bad{color:var(--led)}
.stars{color:var(--gold);letter-spacing:.1em}
.best{font-size:.95rem;color:var(--muted)}
.noscript{background:#3a1515;border:1px solid var(--led);color:#ffe3e3;padding:10px 14px;border-radius:8px}
details.how{margin:10px 0}
details.how summary{cursor:pointer;font-family:var(--mono);color:var(--copper)}

/* find the bug */
.bugbox{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:12px 16px;margin:12px 0;max-width:44rem}
.bugbox ol{font-family:var(--mono);list-style:none;padding:0;margin:8px 0}
.bugbox li{margin:4px 0}
.bugbox li.in{padding-left:1.6em}
.bugbox button.line{width:100%;text-align:left;min-height:40px;padding:4px 10px}
.bugbox button.line.right{background:var(--phosphor);color:#04170f;border-color:var(--phosphor)}
.bugbox button.line.wrong{border-color:var(--led);color:var(--led)}
.bugbox .linetxt{display:inline-block;padding:4px 10px}

/* quiz */
.quiz fieldset{border:1px solid var(--line);border-radius:10px;margin:0 0 14px;padding:10px 14px;background:var(--panel);max-width:44rem}
.quiz legend{font-weight:700;padding:0 6px}
.quiz label{display:flex;gap:10px;align-items:flex-start;padding:6px 4px;border-radius:6px;cursor:pointer}
.quiz label:hover{background:var(--board2)}
.quiz input{margin-top:.4em;accent-color:var(--phosphor);width:18px;height:18px}
.quiz .fb{font-size:1rem;margin:4px 0 0;min-height:1.2em}
.quiz .fb.ok{color:var(--phosphor)}.quiz .fb.no{color:var(--led)}
.score{font-family:var(--mono);font-size:1.1rem}
.talk li{margin:8px 0}

/* sources, pager, footer */
.sources li{margin:8px 0;font-size:1rem;overflow-wrap:anywhere}
.pager{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;font-family:var(--mono);margin:36px 0 10px;padding:12px 0;border-top:1px dashed var(--line)}
.pager a,.pager span{padding:8px 12px;border:1px solid var(--line);border-radius:8px;text-decoration:none;font-size:.95rem}
.pager span{color:var(--muted)}
.site-foot{margin-top:40px;background:var(--panel2);border-top:2px solid var(--copperD);padding:20px 0 26px;font-size:1rem;color:var(--muted)}
.site-foot p{margin:.4em 0}
.jugami-more{margin-top:12px;font-family:var(--mono);font-size:.95rem;line-height:2}
.jugami-more span{color:var(--ink);margin-right:4px}
/* unit page extras */
figure.art svg{display:block;width:100%;height:auto;border-radius:10px}
blockquote.callout{margin:14px 0}
.bugbox .fbmsg{min-height:1.4em;margin:6px 0;font-weight:600}
.stage .bot{transform-box:view-box}
@media (prefers-reduced-motion:reduce){.stage .bot{transition:none!important}}
.levels button[aria-pressed="true"] .stars{color:#5a3a00}
/* v2: 44px touch targets (reviewer round 1) */
.skip,.head-nav a,.crumbs a,.toc a,.site-foot a,.jugami-more a,.pager a{min-height:44px;display:inline-flex;align-items:center;vertical-align:middle}
.crumbs a{padding:0 4px}
.toc li{margin:0}
.toc a{padding:0 2px}
.jugami-more{line-height:1.4}
.jugami-more a{padding:0 2px;margin:2px 0}
.skip:focus{top:8px}
summary{min-height:44px;display:flex;align-items:center;gap:.5em;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸";color:var(--copper);font-family:var(--mono)}
details[open]>summary::before{content:"▾"}
.bugbox button.line{min-height:44px}
.pblk>button.tok,.pblk .cnt,.slot{min-height:44px}
.pblk .cnt{min-width:44px}
.slot[aria-pressed="true"]{background:transparent;font-weight:700;border-style:solid;border-color:var(--gold);color:var(--gold)}
.card h3 a,h3>a,.sources a{min-height:44px;display:inline-flex;align-items:center;vertical-align:middle;overflow-wrap:anywhere}
@media (max-width:640px){.site-head{position:static}.head-nav{gap:4px}.head-nav a{padding:0 8px}}
[id]{scroll-margin-top:72px}
.jugami-more .sep{color:var(--muted);margin:0}
@media (max-width:640px){.jugami-more{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.jugami-more .sep{display:none}}