/* Danfo Code styles. CodeMirror's own stylesheet loads separately from vendor/. */
/* Layout: one focused stage per screen. Title is a centred bus-stop poster; map is a serpentine route board;
   a level is street canvas (left) beside the driver's code panel (right), stacking on phones. */
:root{
  --lagoon:#0D5C61;      /* page ground: Lagos lagoon teal */
  --lagoon-2:#0A4B50;    /* raised panels */
  --lagoon-3:#073A3E;    /* deepest ground */
  --danfo:#F7B500;       /* danfo yellow, the one bold colour */
  --danfo-ink:#241C06;   /* text on yellow */
  --asphalt:#24262E;     /* code panel, roads, bus stripes */
  --asphalt-2:#2F323C;
  --kerb:#F4F2EA;        /* primary light text */
  --muted:#9DC2BF;       /* quiet text on teal */
  --hibiscus:#FF5A64;    /* crash, errors */
  --palm:#52C873;        /* success */
  --f-display:"Bungee","Arial Black",Impact,sans-serif;
  --f-body:"Lexend","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-code:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--lagoon-3);color:var(--kerb);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-tap-highlight-color:transparent}
#app{min-height:100%;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:12px 28px;background:radial-gradient(120% 70% at 50% 0%,var(--lagoon) 0%,var(--lagoon-3) 70%)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--danfo);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto}

/* buttons */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:12px;font-weight:600;font-size:15px;transition:transform .08s ease,filter .15s}
.btn:active{transform:translateY(2px)}
.btn-go{background:var(--danfo);color:var(--danfo-ink);box-shadow:inset 0 -5px 0 var(--asphalt);padding-bottom:4px;font-family:var(--f-display);font-weight:400;letter-spacing:.02em;font-size:17px}
.btn-go:hover{filter:brightness(1.06)}
.btn-ghost{background:rgba(244,242,234,.08);border:1px solid rgba(244,242,234,.18)}
.btn-ghost:hover{background:rgba(244,242,234,.14)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.icon-btn{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(244,242,234,.08);border:1px solid rgba(244,242,234,.16)}
.icon-btn svg{width:20px;height:20px}

/* top bar */
.bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-height:44px}
.bar .grow{flex:1;min-width:0}
.bar h2{font-family:var(--f-display);font-weight:400;font-size:clamp(18px,4.4vw,24px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .sub{color:var(--muted);font-size:13px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:rgba(0,0,0,.22);font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip .s{color:var(--danfo)}

/* ---------- title ---------- */
#scr-title{max-width:620px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding-top:8px}
.poster{width:100%;border-radius:20px;overflow:hidden;background:var(--lagoon-2);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.poster canvas{display:block;width:100%;height:auto;aspect-ratio:12/5}
.logo{font-family:var(--f-display);font-weight:400;font-size:clamp(52px,15vw,96px);line-height:.9;color:var(--danfo);text-shadow:0 5px 0 var(--asphalt);letter-spacing:.01em}
.tagline{font-size:clamp(16px,4vw,19px);max-width:30ch;color:var(--kerb)}
.namefield{display:flex;flex-direction:column;gap:6px;width:100%;max-width:340px;text-align:left}
.namefield label{font-size:13px;color:var(--muted);font-weight:600}
.namefield input{height:48px;border-radius:12px;border:2px solid rgba(244,242,234,.22);background:rgba(0,0,0,.25);color:var(--kerb);padding:0 14px;font:inherit;font-size:17px}
.namefield input::placeholder{color:rgba(244,242,234,.4)}
.title-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
.title-actions .btn{width:100%}
.fineprint{font-size:12.5px;color:var(--muted);max-width:44ch}
.challenge{width:100%;max-width:440px;border-radius:14px;padding:12px 14px;background:var(--danfo);color:var(--danfo-ink);font-weight:600;text-align:left;display:flex;gap:12px;align-items:center}
.challenge b{font-family:var(--f-display);font-weight:400}

/* ---------- map ---------- */
.map-layout{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:20px;align-items:start}
.board{position:relative;width:100%;aspect-ratio:5/6;border-radius:22px;overflow:hidden;background:var(--lagoon-2);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.board svg.roads{position:absolute;inset:0;width:100%;height:100%}
.stop{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;width:96px}
.stop .badge{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-size:22px;background:var(--kerb);color:var(--asphalt);border:4px solid var(--asphalt);box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .12s}
.stop:hover .badge{transform:scale(1.06)}
.stop.done .badge{background:var(--danfo);color:var(--danfo-ink)}
.stop.current .badge{background:var(--danfo);color:var(--danfo-ink);animation:pulse 1.6s ease-in-out infinite}
.stop.boss .badge{width:72px;height:72px;font-size:16px;border-radius:18px}
.stop.locked{cursor:not-allowed}
.stop.locked .badge{background:#5D7F80;color:#2B4446;border-color:#2B4446}
.stop .name{font-size:12px;font-weight:600;line-height:1.15;text-align:center;background:rgba(7,58,62,.82);padding:3px 7px;border-radius:7px;max-width:100%}
.stop .stars{display:flex;gap:1px;height:14px}
.stop .stars svg{width:14px;height:14px}
@keyframes pulse{0%,100%{box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 0 0 rgba(247,181,0,.55)}50%{box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 0 12px rgba(247,181,0,0)}}
.side{display:flex;flex-direction:column;gap:16px;min-width:0}
.panel{background:var(--lagoon-2);border-radius:var(--r);padding:16px}
.panel h3{font-size:15px;font-weight:700;margin-bottom:10px}
.panel p.q{color:var(--muted);font-size:13.5px}
.worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.world{text-align:left;border-radius:10px;padding:9px 10px;background:rgba(0,0,0,.2);font-size:13px;line-height:1.3}
.world b{display:block;font-size:13.5px}
.world span{color:var(--muted)}
.world.on{background:var(--danfo);color:var(--danfo-ink)}
.world.on span{color:var(--danfo-ink);opacity:.75}
.world.open{background:rgba(247,181,0,.16);outline:1px solid rgba(247,181,0,.5)}
button.world:hover{filter:brightness(1.1)}
.paints{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.paint{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;font-size:11.5px;text-align:center;line-height:1.2;color:var(--muted)}
.paint .sw{width:100%;max-width:64px;height:38px;border-radius:9px;border:3px solid transparent;position:relative;overflow:hidden}
.paint.sel .sw{border-color:var(--kerb)}
.paint.sel{color:var(--kerb)}
.paint.lock .sw{filter:grayscale(1) brightness(.6)}
.progress-line{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- level ---------- */
.play{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.stage{display:flex;flex-direction:column;gap:12px;min-width:0}
.canvas-wrap{position:relative;border-radius:18px;overflow:hidden;background:#D8C9A6;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.canvas-wrap canvas{display:block;width:100%}
.hud{display:flex;gap:8px;flex-wrap:wrap}
.hud .chip{background:rgba(0,0,0,.25)}
.fuel{display:inline-flex;align-items:center;gap:8px}
.fuel .tank{width:64px;height:10px;border-radius:6px;background:rgba(244,242,234,.15);overflow:hidden}
.fuel .tank i{display:block;height:100%;background:var(--palm);border-radius:6px;transition:width .2s}
.fuel.low .tank i{background:var(--hibiscus)}
.conductor{display:flex;gap:12px;align-items:flex-start}
.conductor svg.face{flex:0 0 54px;width:54px;height:54px}
.bubble{position:relative;background:var(--kerb);color:var(--asphalt);border-radius:14px;padding:10px 14px;font-weight:500;font-size:15px;line-height:1.4;min-height:44px;flex:1;min-width:0}
.bubble::before{content:"";position:absolute;left:-7px;top:16px;width:14px;height:14px;background:inherit;transform:rotate(45deg);border-radius:2px}
.bubble.bad{background:#FFE1E3}
.bubble.good{background:#DDF6E3}
.bubble small{display:block;font-size:12.5px;color:#4A5560;margin-top:2px}
.code{background:var(--asphalt);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.code-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 4px}
.code-head .file{font-family:var(--f-code);font-size:13px;color:#A9B0BF}
.code-head .lines{font-family:var(--f-code);font-size:13px;font-variant-numeric:tabular-nums;color:#A9B0BF}
.code-head .lines.over{color:var(--hibiscus)}
.palette{display:flex;flex-wrap:wrap;gap:6px}
.cmd{font-family:var(--f-code);font-size:13.5px;padding:7px 10px;border-radius:9px;background:var(--asphalt-2);color:#FFD866;border:1px solid #3E4250}
.cmd:hover{background:#383C48}
.cmd.loop{color:#FF7AA2}
.cmd.new{border-color:var(--danfo);box-shadow:0 0 0 2px rgba(247,181,0,.25)}
.editor{border-radius:12px;overflow:hidden;border:1px solid #3A3E4A;min-height:220px}
.symbar{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.sym{flex:0 0 auto;min-width:40px;height:38px;border-radius:9px;background:var(--asphalt-2);font-family:var(--f-code);font-size:16px;color:var(--kerb)}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.controls .btn-go{flex:1 1 140px}
.controls .btn-ghost{min-height:46px}
.hint-btn.ready{border-color:var(--danfo);color:var(--danfo)}

/* CodeMirror theme */
.CodeMirror{height:auto;min-height:220px;font-family:var(--f-code);font-size:16px;line-height:1.6;background:#1C1E25;color:#E8E6DF}
.CodeMirror-gutters{background:#1C1E25;border-right:1px solid #2E313B}
.CodeMirror-linenumber{color:#5B6170}
.CodeMirror-cursor{border-left:2px solid var(--danfo)}
.CodeMirror-selected,.CodeMirror-focused .CodeMirror-selected{background:#3A3F52}
.cm-s-default .cm-keyword{color:#FF7AA2}
.cm-s-default .cm-builtin,.cm-s-default .cm-variable{color:#FFD866}
.cm-s-default .cm-number{color:#7FD7F7}
.cm-s-default .cm-comment{color:#6F7686;font-style:italic}
.cm-s-default .cm-string{color:#A5E075}
.cm-s-default .cm-operator,.cm-s-default .cm-punctuation{color:#E8E6DF}
.cm-s-default .cm-def{color:#7FD7F7}
.cm-run-line{background:rgba(247,181,0,.16)!important;box-shadow:inset 3px 0 0 var(--danfo)}
.cm-fail-line{background:rgba(255,90,100,.18)!important;box-shadow:inset 3px 0 0 var(--hibiscus)}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(3,25,27,.72);display:grid;place-items:center;z-index:50;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow-y:auto}
.sheet{width:100%;max-width:460px;background:var(--lagoon-2);border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);animation:pop .28s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.sheet .band{height:22px;background:linear-gradient(var(--danfo) 0 30%,var(--asphalt) 30% 48%,var(--danfo) 48% 62%,var(--asphalt) 62% 80%,var(--danfo) 80%)}
.sheet .body{padding:20px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.sheet h3{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.1}
.big-stars{display:flex;gap:8px}
.big-stars svg{width:52px;height:52px}
.big-stars svg.on{animation:starIn .45s cubic-bezier(.2,1.6,.4,1) both}
.big-stars svg:nth-child(2){animation-delay:.18s}
.big-stars svg:nth-child(3){animation-delay:.36s}
@keyframes starIn{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.stat{background:rgba(0,0,0,.22);border-radius:12px;padding:10px;text-align:left;font-size:13px;color:var(--muted)}
.stat b{display:block;font-size:20px;color:var(--kerb);font-variant-numeric:tabular-nums}
.stat.miss b{color:var(--hibiscus)}
.sheet .row{display:flex;gap:8px;width:100%;flex-wrap:wrap}
.sheet .row .btn{flex:1 1 170px}
.sheet .note{font-size:13px;color:var(--muted)}
.cardimg{width:100%;border-radius:14px;display:block;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.msgbox{width:100%;text-align:left;background:rgba(0,0,0,.25);border-radius:12px;padding:10px 12px;font-size:13.5px;user-select:all;word-break:break-word}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--kerb);color:var(--asphalt);padding:10px 16px;border-radius:12px;font-weight:600;z-index:60;box-shadow:0 10px 24px rgba(0,0,0,.35)}

/* drivers on this device */
.drivers{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:440px}
.driver{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:999px;background:rgba(0,0,0,.25);border:2px solid transparent;font-weight:600;font-size:14px}
.driver .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-size:13px;color:var(--danfo-ink)}
.driver small{color:var(--muted);font-weight:500}
.driver.sel{border-color:var(--danfo)}
.driver.new{padding:0 14px;color:var(--muted);border:2px dashed rgba(244,242,234,.25)}
.who{font-size:13px;color:var(--muted);font-weight:600}
/* compete panel */
.wk{display:flex;gap:12px;align-items:center}
.wk .tag{flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:var(--danfo);color:var(--danfo-ink);display:grid;place-items:center;font-family:var(--f-display);font-size:11px;line-height:1.05;text-align:center}
.wk b{display:block;font-size:16px}
.wk span{font-size:13px;color:var(--muted)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.btnrow .btn{flex:1 1 130px}
.rank-pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:rgba(247,181,0,.16);color:var(--danfo);white-space:nowrap}
/* leaderboard */
.seg{display:inline-flex;padding:4px;border-radius:12px;background:rgba(0,0,0,.25);gap:4px}
.seg button{height:38px;padding:0 14px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--kerb);color:var(--asphalt)}
.lb-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.lb-select{height:42px;border-radius:12px;border:1px solid rgba(244,242,234,.2);background:var(--lagoon-2);color:var(--kerb);font:inherit;font-weight:600;padding:0 12px;max-width:100%}
.lb-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.lb{display:flex;flex-direction:column;gap:6px}
.lb-row{box-sizing:border-box;display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.2);text-align:left;width:100%;font-variant-numeric:tabular-nums}
.lb-row.me{background:rgba(247,181,0,.14);outline:2px solid rgba(247,181,0,.6)}
.lb-row .pos{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:rgba(244,242,234,.1)}
.lb-row .pos.g1{background:#F7B500;color:var(--danfo-ink)}
.lb-row .pos.g2{background:#C9D3D6;color:var(--asphalt)}
.lb-row .pos.g3{background:#D08A4E;color:var(--asphalt)}
.lb-row .who2{min-width:0}
.lb-row .who2 b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-row .num{text-align:right;font-size:13px;color:var(--muted);line-height:1.2}
.lb-row .num b{display:block;font-size:17px;color:var(--kerb)}
.lb-code{grid-column:1/-1;margin:4px 0 0}
.lb-empty{padding:18px;border-radius:12px;background:rgba(0,0,0,.18);color:var(--muted);font-size:14px}
.lb-note{font-size:12.5px;color:var(--muted);margin-top:10px}
/* handbook */
.sheet.wide{max-width:560px}
.hb-list{display:flex;flex-direction:column;gap:14px;width:100%;text-align:left}
.hb-group h4{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:600}
.hb-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.hb-term{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 12px;border-radius:10px;background:rgba(0,0,0,.22);text-align:left;font-weight:600;font-size:14px}
.hb-term small{font-weight:500;color:var(--muted);font-size:12px}
.hb-term.locked{opacity:.55;cursor:not-allowed}
.hb-term.fresh{outline:2px solid var(--danfo)}
.card-term{font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.05;color:var(--danfo)}
.card-def{font-size:16px;line-height:1.55;text-align:left;width:100%}
.card-def p+p{margin-top:8px}
.card-steps{margin:0;padding-left:22px;text-align:left;width:100%;display:flex;flex-direction:column;gap:4px}
pre.ex{margin:0;width:100%;text-align:left;background:#1C1E25;border-radius:12px;padding:12px 14px;font-family:var(--f-code);font-size:15px;line-height:1.6;color:#E8E6DF;overflow-x:auto}
.ex .k{color:#FF7AA2}.ex .f{color:#FFD866}.ex .n{color:#7FD7F7}.ex .c{color:#6F7686;font-style:italic}
.trace{width:100%;text-align:left;display:flex;flex-direction:column;gap:4px;max-height:260px;overflow-y:auto;background:rgba(0,0,0,.22);border-radius:12px;padding:10px}
.trace .st{display:flex;gap:8px;align-items:center;font-size:14px}
.trace .ln{flex:0 0 auto;font-family:var(--f-code);font-size:12px;padding:1px 6px;border-radius:6px;background:var(--asphalt);color:#A9B0BF}
.trace .again{font-size:12px;color:var(--danfo);font-weight:600;padding:2px 0 2px 2px}
.trace .bad{color:var(--hibiscus)}
.learn{display:inline-flex;margin-top:6px;font-size:13px;font-weight:600;color:#0D5C61;text-decoration:underline;text-underline-offset:3px}
.rival{width:100%;border-radius:12px;padding:10px 12px;background:rgba(247,181,0,.14);font-weight:600;font-size:14px;text-align:left}
.rival.won{background:rgba(82,200,115,.18)}
@media (max-width:900px){ .lb-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:420px){ .hb-term{font-size:13.5px;padding:8px 10px} .lb-row{grid-template-columns:34px minmax(0,1fr) auto} .lb-row .fuelcol{display:none} }

.loading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}

@media (max-width:900px){
  .map-layout{grid-template-columns:minmax(0,1fr)}
  .board{max-width:560px;margin:0 auto}
  .play{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .stop{width:80px}
  .stop .badge{width:48px;height:48px;font-size:18px;border-width:3px}
  .stop.boss .badge{width:60px;height:60px;font-size:14px}
  .stop .name{font-size:11px}
  .bar .hide-sm{display:none}
  .CodeMirror{font-size:15px;min-height:170px}
  .editor{min-height:170px}
  .controls .btn-go{flex:1 1 100%}
  .controls .btn-ghost{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}