/* RIG QUEST: the course is a motherboard. Solder-mask green, gold traces, silkscreen white, status LEDs. */
:root{
  --mask:#0d3b2c; --mask-2:#114a37; --mask-3:#0a2e22;
  --gold:#ffcd12; --gold-dim:#b8941a; --silk:#f3f1e6; --silk-dim:#a9c2b4;
  --led:#00b7a7; --red:#d1262b; --blue:#16317d; --plum:#721b3e;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--mask);color:var(--silk);font-family:Roboto,system-ui,sans-serif;font-size:17px;line-height:1.5}
body{background:
  radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0/22px 22px,
  linear-gradient(160deg,var(--mask-2),var(--mask) 55%,var(--mask-3));min-height:100vh;user-select:none}
input,textarea{user-select:text}
h1,h2,h3,.logo,.btn,.chip,.hud .name,.rank{font-family:Nunito,"Segoe UI",system-ui,sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;position:sticky;top:0;z-index:20;background:rgba(10,46,34,.85);backdrop-filter:blur(6px);border-bottom:2px solid rgba(255,205,18,.18)}
.logo{background:none;border:0;font-weight:900;font-size:26px;letter-spacing:.04em;color:var(--silk);padding:0}
.logo span{color:var(--gold);margin-left:4px}
.hud{display:flex;align-items:center;gap:18px;font-size:15px}
.hud .name{font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-weight:800;font-size:17px}
.xp{display:flex;align-items:center;gap:10px}
.xpbar{width:160px;height:12px;border-radius:6px;background:var(--mask-3);border:1px solid rgba(255,205,18,.35);overflow:hidden}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.rank{font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-weight:800;color:var(--gold)}
.sync{display:flex;align-items:center;gap:6px;color:var(--silk-dim);font-size:14px}
.sync b{width:9px;height:9px;border-radius:50%;background:var(--silk-dim)}
.sync.cloud b{background:var(--led);box-shadow:0 0 8px var(--led)}
.sync.local b{background:var(--gold)}
.sync.err b{background:var(--red)}
main{max-width:1180px;margin:0 auto;padding:28px}

/* ---------- map ---------- */
.mapHead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:8px 0 22px}
.mapHead h1{font-size:54px;line-height:1;margin:0;font-weight:900;letter-spacing:-.01em}
.mapHead h1 em{font-style:normal;color:var(--gold)}
.mapHead p{margin:8px 0 0;color:var(--silk-dim);font-size:18px}
.board{width:100%;height:auto;display:block;border-radius:22px;filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
.board .pcb{fill:#0f4231;stroke:rgba(255,205,18,.25);stroke-width:2}
.board .hole{fill:var(--mask-3);stroke:var(--gold-dim);stroke-width:3}
.trace{fill:none;stroke:rgba(255,205,18,.18);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.trace.lit{stroke:var(--gold);opacity:.75}
.trace.flow{stroke:var(--led);stroke-dasharray:4 18;animation:flow 1.1s linear infinite;opacity:.9}
@keyframes flow{to{stroke-dashoffset:-22}}
.comp{cursor:pointer;transition:transform .2s}
.comp .body{fill:#17271f;stroke:#2d4d3d;stroke-width:3;rx:10}
.comp text{font-family:Nunito,"Segoe UI",system-ui,sans-serif;fill:var(--silk)}
.comp .ref{font-size:14px;font-weight:800;fill:var(--silk-dim);letter-spacing:.12em}
.comp .nm{font-size:22px;font-weight:900}
.comp .pt{font-size:14px;font-weight:600;fill:var(--silk-dim)}
.comp .ledc{fill:#3b0d0e}
.comp.open .body{stroke:var(--led)}
.comp.open .ledc{fill:var(--led);animation:pulse 1.6s ease-in-out infinite}
.comp.done .body{stroke:var(--gold);fill:#1d2a17}
.comp.done .ledc{fill:var(--gold)}
.comp.locked{cursor:not-allowed}.comp.locked text,.comp.locked .deco{opacity:.4}
.comp.locked .ledc{fill:var(--red)}
.comp:not(.locked):hover{transform:translateY(-3px)}
.comp .deco{fill:none;stroke:#3a5a4a;stroke-width:2}
.comp.done .deco{stroke:var(--gold-dim)}
.comp.open .deco{stroke:#2f8d80}
@keyframes pulse{50%{opacity:.35}}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.continue{display:flex;align-items:center;gap:18px;margin-top:22px;padding:18px 22px;border-radius:var(--r);background:var(--mask-3);border:2px solid rgba(0,183,167,.5)}
.continue .what{flex:1}
.continue .what b{font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-size:22px;font-weight:900;display:block}
.continue .what span{color:var(--silk-dim)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;padding:14px 26px;font-weight:900;font-size:19px;letter-spacing:.02em;background:var(--gold);color:#2a2100;box-shadow:0 5px 0 var(--gold-dim);transition:transform .08s, box-shadow .08s, opacity .2s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--gold-dim)}
.btn.ghost{background:transparent;color:var(--silk);box-shadow:inset 0 0 0 2px rgba(243,241,230,.35)}
.btn.teal{background:var(--led);color:#00211e;box-shadow:0 5px 0 #007e73}
.btn[disabled]{opacity:.35;cursor:not-allowed;transform:none;box-shadow:0 5px 0 rgba(0,0,0,.2)}
.btn.small{padding:9px 16px;font-size:16px}

/* ---------- module player ---------- */
.rail{display:flex;gap:8px;margin:0 0 22px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-weight:800;font-size:15px;letter-spacing:.08em;background:var(--mask-3);color:var(--silk-dim);border:2px solid transparent}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--red)}
.chip.done{color:var(--gold);cursor:pointer}.chip.done i{background:var(--gold)}
.chip.now{color:var(--silk);border-color:var(--led)}.chip.now i{background:var(--led);animation:pulse 1.4s infinite}
.modTitle{display:flex;align-items:baseline;gap:16px;margin-bottom:6px}
.modTitle .ref{font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-weight:900;color:var(--gold);font-size:18px;letter-spacing:.14em}
.modTitle h2{margin:0;font-size:40px;font-weight:900;line-height:1.1}
.back{background:none;border:0;color:var(--silk-dim);font-size:16px;padding:0;margin-bottom:14px}
.panel{background:rgba(10,46,34,.75);border:2px solid rgba(255,205,18,.18);border-radius:22px;padding:34px}
.stepFoot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px}
.hint{color:var(--silk-dim);font-size:16px}

/* read */
.card{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;min-height:220px}
.card .ic{font-size:86px;text-align:center;line-height:1}
.card h3{font-size:34px;margin:0 0 10px;font-weight:900}
.card p{font-size:22px;line-height:1.55;margin:0;max-width:60ch}
.dots{display:flex;gap:8px}.dots i{width:28px;height:6px;border-radius:3px;background:var(--mask-3)}.dots i.on{background:var(--gold)}
.ring{--p:0;width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*1%),rgba(255,255,255,.1) 0);display:inline-block;vertical-align:middle}

/* listen */
.listen{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;padding:20px 0}
.byte{width:120px;height:120px;border-radius:28px;background:var(--blue);display:grid;place-items:center;font-size:62px;box-shadow:0 0 0 6px rgba(22,49,125,.35)}
.byte.talk{animation:talk .5s ease-in-out infinite alternate}
@keyframes talk{to{box-shadow:0 0 0 16px rgba(0,183,167,.25);transform:scale(1.04)}}
.subtitle{font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-size:28px;font-weight:800;max-width:30ch;min-height:2.6em}
.bars{display:flex;gap:6px}.bars i{width:22px;height:8px;border-radius:4px;background:var(--mask-3)}.bars i.on{background:var(--led)}

/* watch */
.vwrap{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;border:3px solid #1d2a17}
.vwrap iframe,#yt{position:absolute;inset:0;width:100%;height:100%}
.shield{position:absolute;inset:0;z-index:2;cursor:pointer}
.vover{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;background:rgba(10,46,34,.92);padding:20px}
.vover.show{display:flex}
.vover h3{font-size:32px;margin:0;font-weight:900}
.vover p{margin:0;font-size:19px;color:var(--silk-dim)}
.checkBtn{position:absolute;font-size:44px;width:84px;height:84px;border-radius:50%;border:0;background:var(--gold);box-shadow:0 0 0 8px rgba(255,205,18,.25);animation:pulse 1s infinite}
.vctl{display:flex;align-items:center;gap:16px;margin-top:16px}
.vbar{flex:1;height:14px;border-radius:7px;background:var(--mask-3);overflow:hidden;position:relative}
.vbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#007e73,var(--led))}
.vbar b{position:absolute;top:0;bottom:0;width:3px;background:var(--silk)}
.vtime{font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-weight:800;min-width:110px;text-align:right}
.vmeta{margin-top:10px;color:var(--silk-dim);font-size:15px}

/* mission */
.mission h3{font-size:30px;margin:0 0 18px;font-weight:900}
.mstep{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:var(--mask-3);margin-bottom:12px;border:2px solid transparent;font-size:19px;cursor:pointer;width:100%;text-align:left}
.mstep .box{flex:none;width:30px;height:30px;border-radius:8px;border:3px solid var(--silk-dim);display:grid;place-items:center;font-weight:900;color:#2a2100}
.mstep.on{border-color:var(--gold)}.mstep.on .box{background:var(--gold);border-color:var(--gold)}
label.q{display:block;font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-weight:800;font-size:21px;margin:22px 0 10px}
.field{width:100%;font:inherit;font-size:19px;padding:14px 16px;border-radius:12px;border:2px solid rgba(243,241,230,.25);background:var(--mask-3);color:var(--silk)}
.field:focus{outline:none;border-color:var(--led)}

/* quiz */
.qhead{display:flex;justify-content:space-between;color:var(--silk-dim);font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-weight:800;margin-bottom:10px}
.qq{font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-size:32px;font-weight:900;margin:0 0 24px;line-height:1.2}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.opt{padding:20px;border-radius:14px;border:2px solid rgba(243,241,230,.2);background:var(--mask-3);font-size:20px;font-weight:500;text-align:left}
.opt:hover:not([disabled]){border-color:var(--led)}
.opt.right{border-color:var(--gold);background:#2b3a12}
.opt.wrong{border-color:var(--red);background:#3a1515}
.opt[disabled]{cursor:default}
.why{margin-top:18px;font-size:19px;min-height:1.6em}
.result{text-align:center;padding:10px 0}
.score{font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:110px;line-height:1;color:var(--gold)}
.score small{font-size:44px;color:var(--silk-dim)}
.result h3{font-size:34px;margin:10px 0}
.badge{display:inline-grid;place-items:center;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,var(--gold) 45%,var(--gold-dim));color:#2a2100;font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-weight:900;font-size:22px;box-shadow:0 0 0 10px rgba(255,205,18,.18);animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.2) rotate(-30deg);opacity:0}}

/* setup + parent */
.setup{max-width:620px;margin:40px auto}
.setup h1{font-size:56px;margin:0 0 6px;font-weight:900;line-height:1}
.setup h1 em{font-style:normal;color:var(--gold)}
.setup p{color:var(--silk-dim);font-size:18px}
.row{display:flex;gap:12px;align-items:center}
.err{color:#ff8a8a;min-height:1.5em;margin-top:10px}
.tabs{display:flex;gap:10px;margin:22px 0}
.tabs button{flex:1}
.ptable{width:100%;border-collapse:collapse;font-size:16px;margin:14px 0}
.ptable td,.ptable th{padding:10px;text-align:left;border-bottom:1px solid rgba(243,241,230,.12);vertical-align:top}
.ptable th{font-family:Nunito,"Segoe UI",system-ui,sans-serif;color:var(--silk-dim)}
.pin{display:flex;gap:10px;justify-content:center;margin:18px 0}
.pin input{width:64px;height:72px;text-align:center;font-size:34px;font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-weight:900}

/* certificate */
.cert{background:var(--silk);color:#1c2b22;border-radius:22px;padding:56px;text-align:center;border:10px double var(--gold-dim)}
.cert h1{font-size:62px;margin:0;font-weight:900;color:var(--mask)}
.cert .who{font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-size:54px;font-weight:900;color:var(--red);margin:16px 0}
.cert p{font-size:20px}
@media print{header,.noprint{display:none!important}body{background:#fff}main{padding:0}}

#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,40px);opacity:0;background:var(--silk);color:#16241c;padding:14px 22px;border-radius:12px;font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-weight:800;font-size:18px;transition:.3s;z-index:50;pointer-events:none}
#toast.show{transform:translate(-50%,0);opacity:1}
@media (max-width:760px){.mapHead h1{font-size:38px}.card{grid-template-columns:1fr;text-align:center}.opts{grid-template-columns:1fr}.xpbar{width:90px}.panel{padding:22px}header{padding:12px 16px}main{padding:18px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}