/* =====================================================================
   The look of KORO, lifted out of index.html so that a second page can
   wear it without owning a copy.

   It was 146KB of <style> inside a 168KB document, which was fine while
   there was one page. There are two now — the game, and the standalone
   Pong — and a duplicated stylesheet is two stylesheets that agree on the
   day they are written and never again. One file, linked twice, cannot
   drift.

   It is also cacheable now, which 146KB inlined into every page load was
   not. The ?v= on the link is bumped by tools/bump.js with everything
   else, so a changed stylesheet still reaches a browser that has the old
   one.
   ===================================================================== */

*{box-sizing:border-box}
:root{
  /* pastel-arcade: soft world, deep plum UI so the HUD still reads over it */
  --ink:#241d38; --panel:#2e2547; --panel2:#3b3059; --line:#5a4b85;
  --accent:#8fd3ff; --good:#a8e6cf; --warn:#ffd8a8; --bad:#ff9aa2; --star:#ffe9a8;
  --mint:#a8e6cf; --peach:#ffb4a2; --lav:#cdb4f6; --blush:#ffc8dd; --sky:#8fd3ff;
  --text:#f4f0ff; --muted:#bdb2d8;

  /* ---------------------------------------------- THE GAME IS SET IN CODE
     This is a game about writing programs, and until now it was lettered in
     Trebuchet while the only part that mattered — the console — was in
     Menlo. Two typefaces, and the one a student is learning to read was the
     one quarantined in a box.

     It is monospace throughout now, in THREE faces that each do one job (see
     the @font-face block above for what they are and why they are bundled
     rather than linked). Every one of them falls back to the system mono, so
     a machine that somehow cannot load them still gets code type — only less
     of a difference between the roles. */
  --mono-fallback: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
                   "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
  --font:      'Ubuntu Mono',    var(--mono-fallback);   /* words */
  --font-disp: 'Space Mono',     var(--mono-fallback);   /* titles */
  --font-code: 'JetBrains Mono', var(--mono-fallback);   /* programs */
}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--text);font-family:var(--font);
  -webkit-user-select:none;user-select:none}
canvas{display:block;width:100%;height:100%}
.hidden{display:none !important}
button{font-family:var(--font);cursor:pointer}
/* ------------------------------------------------------- the three roles
   Monospace is uniform by definition, so a heading cannot stand out by
   being a different shape — it stands out by being OPENED UP. Tracking is
   doing the job a display face would do in a proportional design. */
h1,h2,h3,.scrtitle,.koro,.nuhead,.teach-card h2{
  font-family:var(--font-disp);letter-spacing:.07em}
.btn,.tab,.langbtn,.jumpbtn,.modebtn,.waytile{letter-spacing:.045em}
/* Programs are set tight and unspaced: code is read as a shape, and letter
   spacing is what stops a nine-year-old seeing `repeat 8` as one thing. */
pre,code,textarea,#conText,#conTA,.blk,.palblk,#tape,.mk-line .op{
  font-family:var(--font-code);letter-spacing:0}
/* Anything that is a NUMBER a student is watching change — a shield, a
   budget, a countdown, a coin total — holds its column while it counts. */
.cnt-n,.con-budget,#conBudget,.dmg,#dFill,.d-clock,.coins,.wal-n,.hp-top,
#objList b,.iter{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.btn{background:var(--accent);color:#123045;border:none;border-radius:14px;padding:12px 20px;
  font-size:18px;font-weight:bold;box-shadow:0 4px 0 #5aa8d6}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #5aa8d6}
.btn.small{font-size:14px;padding:8px 12px;box-shadow:0 3px 0 #5aa8d6}
.btn.ghost{background:var(--panel2);color:var(--text);box-shadow:0 3px 0 #221b36}
.btn.good{background:var(--good);color:#13402f;box-shadow:0 4px 0 #6fc4a6}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#crosshair{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px}
#crosshair::before,#crosshair::after{content:"";position:absolute;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.6);border-radius:2px}
#crosshair::before{left:11px;top:0;width:4px;height:26px}
#crosshair::after{top:11px;left:0;height:4px;width:26px}
#crosshair.on::before,#crosshair.on::after{background:var(--peach);box-shadow:0 0 10px var(--peach)}
#crosshair.hit{animation:xhair .22s ease-out}
@keyframes xhair{0%{transform:scale(1.7);opacity:.4}100%{transform:scale(1);opacity:1}}
#focus{position:absolute;left:50%;top:calc(50% + 26px);transform:translateX(-50%);font-size:19px;
  background:rgba(8,12,20,.8);border:2px solid var(--line);border-radius:10px;padding:6px 14px;white-space:nowrap}
#focus small{display:block;font-size:14px;color:var(--star);text-align:center}

#objectives{position:absolute;right:14px;top:14px;width:290px;background:rgba(15,22,36,.92);
  border:3px solid var(--line);border-radius:14px;padding:12px;pointer-events:auto}
#objectives h2{margin:0 0 4px;font-size:17px;color:var(--accent);letter-spacing:1px}
#missionName{font-size:14px;color:var(--muted);margin-bottom:8px}
#objList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
#objList li{font-size:14.5px;padding:7px 9px;border-radius:9px;background:#111a29;border-left:5px solid var(--line);color:var(--muted)}
#objList li.cur{border-left-color:var(--star);color:var(--text);background:#1b2740}
#objList li.done{border-left-color:var(--good);color:var(--good);text-decoration:line-through}
/* the rungs a long ladder has folded away: a row of its own, so the list
   reads as continuing rather than as stopping */
#objList li.gap{background:none;border-left-color:transparent;padding:0 9px;letter-spacing:3px;text-align:center}

/* The brief sits ABOVE the [C] Code Console button, never on it. Both are
   bottom-centre, and at 110px the bubble's lower edge came down over the
   button's top half in every mission that uses this bubble — the button was
   read by whatever the bubble did not cover. 134 clears a two-line bubble
   off a button whose top is at 120; the health bar below both is untouched. */
#briefing{position:absolute;left:50%;bottom:134px;transform:translateX(-50%);max-width:620px;
  background:#fff6fb;color:#2a2140;border:3px solid var(--blush);border-radius:18px;padding:12px 18px;
  font-size:19px;line-height:1.35;box-shadow:0 12px 34px rgba(0,0,0,.55)}
#briefing b{color:#a4407a}
/* and never under the code console — see CODE.show() */
body.con-open #briefing{display:none}
#briefing:empty{display:none}
/* ---- CORNERED. On a board you read by counting squares, the brief cannot
   sit across the middle of the screen. Flight School puts it under the level
   list in the top right, where it reads as one column of information with
   the mission panel rather than as something laid over the work. ---- */
#briefing.corner{left:auto;right:14px;bottom:auto;top:var(--brief-top,232px);
  transform:none;max-width:320px;font-size:16px;line-height:1.42;padding:11px 14px}

#mapwrap{position:absolute;left:14px;top:14px;background:rgba(15,22,36,.92);border:3px solid var(--line);
  border-radius:14px;padding:8px}
#mapwrap h3{margin:0 0 6px;font-size:13px;color:var(--muted);letter-spacing:1px;text-align:center}
#map{display:block;border-radius:8px;background:#0d1626}
#maplegend{font-size:11.5px;color:var(--muted);text-align:center;margin-top:5px;line-height:1.35}

#keys{position:absolute;left:14px;bottom:14px;background:rgba(15,22,36,.9);border:2px solid var(--line);
  border-radius:12px;padding:9px 12px;font-size:13.5px;color:var(--muted);line-height:1.6}
#keys b{color:var(--text)}
#topbar{position:absolute;right:14px;bottom:14px;display:flex;gap:8px;pointer-events:auto}
/* the emote button, while the emote is running: it is the one control that
   says something about the world rather than about the menus */
#btnEmote{font-size:17px;line-height:1}
#btnEmote.on{background:var(--star);color:#4a3b12;box-shadow:0 3px 0 #c9ae5e}


/* ---------- health, damage, hit feedback ---------- */
/* the zombie warning: a word, a countdown and a bar that empties as it closes.
   It only appears once it is actually coming for you, so it means something. */
#danger{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:54;
  background:rgba(38,10,14,.92);border:3px solid var(--warn);border-radius:16px;
  padding:7px 20px 10px;text-align:center;min-width:210px;pointer-events:none}
#danger.near{border-color:var(--bad);background:rgba(58,8,12,.94);animation:dangShake .5s infinite}
#danger .d-row{display:flex;align-items:center;justify-content:center;gap:8px}
#danger .d-face{font-size:20px}
#danger .d-word{font-size:12.5px;letter-spacing:2.4px;color:var(--warn)}
#danger.near .d-word{color:var(--bad)}
#danger .d-clock{font-size:31px;font-weight:bold;color:var(--warn);
  font-variant-numeric:tabular-nums;line-height:1.05}
#danger.near .d-clock{color:var(--bad);animation:dangBlink .42s steps(1) infinite}
#dBar{height:8px;border-radius:6px;background:rgba(255,255,255,.16);overflow:hidden;margin-top:5px}
#dFill{height:100%;width:100%;background:var(--warn);transition:width .12s linear}
#danger.near #dFill{background:var(--bad)}
@keyframes dangBlink{50%{opacity:.35}}
@keyframes dangShake{0%,100%{transform:translateX(-50%)}
  25%{transform:translateX(calc(-50% - 3px))}75%{transform:translateX(calc(-50% + 3px))}}
/* the whole screen reddens as it gets close, so it warns you even if your
   eyes are down in the console */
#dread{position:fixed;inset:0;pointer-events:none;z-index:52;opacity:0;
  transition:opacity .2s linear;
  box-shadow:inset 0 0 130px 40px rgba(190,20,30,.85)}
@media (prefers-reduced-motion:reduce){
  #danger.near,#danger.near .d-clock{animation:none}
}
#health{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:340px;
  background:rgba(46,37,71,.9);border:3px solid var(--line);border-radius:16px;padding:8px 12px}
#health .hp-top{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);letter-spacing:1px}
#hpBar{height:16px;background:#1d1730;border-radius:9px;overflow:hidden;margin-top:5px;border:2px solid #4a3d70}
#hpFill{height:100%;width:100%;background:linear-gradient(90deg,#a8e6cf,#8fd3ff);transition:width .25s}
#hpFill.low{background:linear-gradient(90deg,#ffb4a2,#ff9aa2)}
#hurt{position:fixed;inset:0;pointer-events:none;z-index:15;opacity:0;
  box-shadow:inset 0 0 140px 40px rgba(255,120,150,.85);transition:opacity .25s}
#hurt.on{opacity:1}
#dmgNums{position:fixed;inset:0;pointer-events:none;z-index:16}
.dmg{position:absolute;font-size:22px;font-weight:bold;color:var(--peach);text-shadow:0 2px 6px #000;
  animation:floatup .8s ease-out forwards}
@keyframes floatup{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-46px);opacity:0}}
#downed{position:fixed;inset:0;z-index:35;background:rgba(40,20,45,.86);display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:14px;font-size:26px;text-align:center}
/* mission door lock */
.lockbadge{position:absolute;pointer-events:none}


/* ---------- skill panel + teach card + trigger state ---------- */
#skill{position:absolute;right:14px;top:214px;width:290px;background:rgba(46,37,71,.94);
  border:3px solid var(--mint);border-radius:14px;padding:11px 13px}
#skill .lbl{font-size:11px;letter-spacing:2px;color:var(--mint)}
#skill h4{margin:3px 0 5px;font-size:19px}
#skill p{margin:0 0 8px;font-size:13.5px;color:var(--muted);line-height:1.4}
#skill pre{margin:0;background:#1d1730;border:2px solid var(--line);border-radius:9px;padding:7px 9px;
  font-family:var(--font-code);font-size:12.5px;color:#8fd3ff;white-space:pre}
#trigger{position:absolute;left:50%;top:calc(50% + 52px);transform:translateX(-50%);font-size:12px;
  letter-spacing:1.5px;color:var(--mint);text-shadow:0 2px 5px #000}
#trigger.cool{color:var(--muted)}
#crosshair.cool::before,#crosshair.cool::after{background:#8a80a8}
#pause{z-index:44}
.p-lbl{font-size:11px;letter-spacing:2px;color:var(--mint);margin:12px 0 4px}
.p-objs{margin:6px 0;padding-left:18px;font-size:14.5px;color:var(--muted)}
.p-objs li{list-style:none;padding:4px 0}
.p-hint{background:#1d1730;border:2px solid var(--line);border-radius:10px;padding:9px 11px;font-size:15px}
.p-hint pre{margin:6px 0 0;color:#8fd3ff;font-family:var(--font-code);font-size:13px}
#teach{position:fixed;inset:0;z-index:45;background:rgba(28,20,45,.86);display:flex;align-items:center;justify-content:center;padding:20px}
.teach-card{width:min(600px,94%);background:var(--panel);border:3px solid var(--mint);border-radius:20px;
  padding:24px;text-align:center;box-shadow:0 26px 60px rgba(0,0,0,.6)}
.teach-card .kicker{font-size:12px;letter-spacing:2.5px;color:var(--mint)}
.teach-card h2{margin:6px 0 10px;font-size:28px}
.teach-card p{font-size:17.5px;line-height:1.45;color:var(--text);margin:0 0 12px}
.teach-card pre{text-align:left;background:#1d1730;border:3px solid var(--line);border-radius:12px;
  padding:12px 14px;font-family:var(--font-code);font-size:15px;color:#8fd3ff;
  white-space:pre;overflow:auto;margin:0 0 14px}
.teach-card .why{font-size:14.5px;color:var(--muted);margin-bottom:14px}


/* ---------- sign-in, menu, chat ---------- */
.tabs{display:flex;gap:6px;justify-content:center;margin:14px 0 10px}
.tab{background:var(--panel2);border:3px solid var(--line);color:var(--muted);border-radius:12px;
  padding:8px 18px;font-size:16px}
.tab.on{background:var(--accent);color:#123045;border-color:#fff;font-weight:bold}
.authform{display:flex;flex-direction:column;gap:8px;align-items:center}
.authform input{width:min(340px,90%);padding:13px 15px;font-size:18px;border-radius:12px;
  border:3px solid var(--line);background:#1d1730;color:var(--text);text-align:center}
.authform input:focus{outline:none;border-color:var(--accent)}
.authmsg{min-height:24px;font-size:15px;color:var(--bad);margin:8px 0}
.authmsg.good{color:var(--good)}
/* who you are, on the sign-up form. Two faces the size of the boxes above
   them, so it reads as one more question on the form and not as a shop. */
.whopick{width:min(340px,90%);margin-top:2px}
.wholbl{font-size:12px;letter-spacing:1.6px;color:var(--muted);font-weight:bold;
  text-align:center;margin-bottom:6px}
.whorow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.whotile{border:3px solid var(--line);border-radius:14px;background:#1d1730;
  padding:8px 4px 6px;cursor:pointer;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.5),border-color .16s,box-shadow .16s,color .16s}
.whotile img{width:100%;height:82px;object-fit:contain;object-position:center top}
.whotile b{font-size:14px;letter-spacing:.4px}
.whotile:hover{transform:translateY(-3px);border-color:var(--sky)}
/* the chosen one has to keep reading as chosen with the mouse on it */
.whotile.on,.whotile.on:hover{border-color:var(--mint);background:#2b3a4e;color:var(--mint);
  box-shadow:0 0 0 3px rgba(168,230,207,.45)}
.menucard{max-width:940px;width:min(940px,96%)}
.menutop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:left}
.menubtns{display:flex;gap:6px}
.misgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:18px 0 10px}
.mis{background:var(--panel2);border:3px solid var(--line);border-radius:16px;padding:14px;text-align:left;
  color:var(--text);display:flex;flex-direction:column;gap:6px;min-height:132px}
.mis:hover:not(.locked){border-color:var(--accent);transform:translateY(-2px)}
.mis .em{font-size:34px}
.mis b{font-size:18px}
.mis small{font-size:13px;color:var(--muted);line-height:1.35}
.mis .tagrow{margin-top:auto;font-size:12px;color:var(--mint);letter-spacing:1px}
.mis.locked{opacity:.55;cursor:not-allowed}
.mis.done .tagrow{color:var(--star)}
  border:3px solid var(--line);border-radius:14px;padding:9px;pointer-events:auto;z-index:12}

/* ---------- character picker ---------- */
.charpick{margin-top:14px;text-align:left}
#charRow{display:flex;gap:8px;overflow-x:auto;padding:8px 2px}
.chr{flex:none;width:74px;height:84px;border-radius:14px;border:3px solid var(--line);
  background:#1d1730;padding:4px;cursor:pointer}
.chr img{width:100%;height:100%;object-fit:contain;image-rendering:auto}
.chr:hover{border-color:var(--sky)}
.chr.on{border-color:var(--mint);background:#26364a;box-shadow:0 0 0 3px rgba(168,230,207,.35)}
.chint{font-size:12.5px;color:var(--muted)}

#usePrompt{position:absolute;left:50%;top:58%;transform:translateX(-50%);background:rgba(29,23,48,.94);
  border:3px solid var(--mint);border-radius:14px;padding:9px 16px;font-size:17px}

/* ---------- key prompts ---------- */
.keyhint{margin-top:10px;font-size:14px;color:var(--muted);letter-spacing:.5px}
.keyhint kbd,.codebtn kbd{background:#1d1730;border:2px solid var(--line);border-bottom-width:4px;
  border-radius:8px;padding:1px 9px;font-family:inherit;font-weight:bold;color:var(--star)}
.codebtn{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);pointer-events:auto;
  display:flex;align-items:center;gap:10px;background:rgba(46,37,71,.96);color:var(--text);
  border:3px solid var(--mint);border-radius:16px;padding:11px 20px;font-size:19px;font-weight:bold;
  box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:pointer}
.codebtn kbd{font-size:20px;color:var(--mint)}
.codebtn.nudge{animation:nudge 1.5s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(-50%) scale(1);box-shadow:0 8px 24px rgba(0,0,0,.5)}
  50%{transform:translateX(-50%) scale(1.05);box-shadow:0 8px 30px rgba(168,230,207,.55)}}
#escHint{position:absolute;right:14px;bottom:78px;font-size:12.5px;color:var(--muted);
  background:rgba(29,23,48,.85);border-radius:9px;padding:5px 10px}

/* ---------- overlays ---------- */
.screen{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 600px at 50% 30%,#1b2c47,#0a0f18 70%);padding:20px}
.card{width:min(680px,94%);background:var(--panel);border:3px solid var(--line);border-radius:20px;
  padding:26px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.card h1{margin:6px 0 4px;font-size:32px}
.card p{font-size:18px;line-height:1.45;color:var(--text)}
.card .sub{color:var(--muted);font-size:16px}
.langrow{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.langbtn{background:var(--panel2);border:3px solid var(--line);color:var(--text);border-radius:12px;padding:8px 16px;font-size:16px}
.langbtn.on{background:var(--accent);color:#04121f;border-color:#fff}
.ctrlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin:14px 0;text-align:left}
.ctrlgrid div{background:#111a29;border:2px solid var(--line);border-radius:10px;padding:8px 10px;font-size:14.5px;color:var(--muted)}
.ctrlgrid b{color:var(--star);display:inline-block;min-width:74px}
@keyframes tick{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.08)}}

/* ---------- the code sandbox ----------
   Two columns. The palette is fixed and narrow; the script gets the rest,
   because the script is the work. The world shows between them. */
#coder{position:fixed;inset:0;z-index:28;pointer-events:none;font-size:13px}
#cBar{position:absolute;left:50%;top:10px;transform:translateX(-50%);pointer-events:auto;
  display:flex;align-items:center;gap:8px;background:rgba(20,15,36,.95);
  border:2px solid var(--line);border-radius:14px;padding:7px 10px;max-width:min(940px,95vw)}
.chint{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
/* "running" is a state, not a footnote — it says so in the accent colour
   and with a dot that breathes, so the bar reads as live from across a
   classroom rather than by reading a number. */
.chint.live{color:var(--good);font-weight:bold}
.chint.live::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--good);margin-right:6px;vertical-align:middle;animation:cpulse 1.1s ease-in-out infinite}
@keyframes cpulse{0%,100%{opacity:1}50%{opacity:.25}}
.chint.dim{color:var(--muted)} .chint.bad{color:var(--bad)}
/* THE PANELS SIT UNDER THE BAR, AND THE BAR IS NOT A FIXED HEIGHT.
   These were four hard-coded offsets that all assumed one — and adding a
   button to the bar made it taller than every one of them, so the
   walkthrough card slid up underneath it and had its first line clipped.
   coder.js measures the bar and the card and writes those two numbers
   here; the values below are only what to use before it has. */
#cPal{position:absolute;left:10px;top:calc(var(--cbar,62px) + 8px);bottom:10px;width:252px;overflow:auto;pointer-events:auto;
  background:rgba(20,15,36,.96);border:2px solid var(--line);border-radius:14px;padding:10px}
/* THE WALKTHROUGH TALKS INSIDE THE EDITOR. A card floating over the middle
   of the screen is a card sitting on top of the block it is telling you to
   click; this sits across the top of the panel a student is already looking
   at, and the ring around the target does the pointing. */
#cCoach{position:absolute;left:10px;right:10px;top:calc(var(--cbar,62px) + 6px);z-index:4;
  pointer-events:auto;
  background:linear-gradient(180deg,#3b3059,#2e2547);border:1px solid var(--star);
  border-radius:12px;padding:9px 13px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  box-shadow:0 10px 26px rgba(0,0,0,.45)}
#cCoach.ok{border-color:var(--good)}
#cCoach .ctstep{font-size:10.5px;letter-spacing:1.6px;color:var(--star);font-weight:bold}
#cCoach.ok .ctstep{color:var(--good)}
#cCoach .cttext{flex:1;min-width:200px;font-size:14px;line-height:1.4;color:var(--text)}
#cCoach .cttext b{color:var(--star)}
#cCoach .ctskip{background:none;border:0;color:var(--muted);font-size:11px;
  text-decoration:underline;cursor:pointer;font-family:inherit}
/* and the panels move down to make room for it — by the card's own
   height, because that grows with the length of the step's sentence */
#coder.walking #cPal,#coder.walking #cScript{
  top:calc(var(--cbar,62px) + var(--ccoach,54px) + 14px)}

#cScript{position:absolute;right:10px;top:calc(var(--cbar,62px) + 8px);bottom:10px;width:min(560px,46vw);overflow:auto;
  pointer-events:auto;background:rgba(20,15,36,.96);border:2px solid var(--line);
  border-radius:14px;padding:10px}
#cObj{display:none}

/* object chips sit over the scripts they belong to */
.cchips{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:9px;
  padding-bottom:8px;border-bottom:2px solid var(--line)}
.cchip{display:flex;align-items:center;gap:5px;background:var(--panel2);border:2px solid var(--line);
  border-radius:20px;padding:3px 10px;color:var(--text);font-size:12px}
.cchip.on{border-color:var(--accent);background:#2b2350;font-weight:bold}
.cchip.add{padding:3px 9px;color:var(--mint)}
.cdot{width:10px;height:10px;border-radius:50%;flex:none}

.ctabs{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px}
.ctab{background:var(--panel2);border:2px solid var(--line);border-radius:8px;
  color:var(--muted);font-size:11px;padding:3px 7px}
.ctab.on{background:var(--a);color:#241d38;border-color:#fff;font-weight:bold}
.cmake{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.cmake .btn{flex:1;min-width:96px}
.cvar{display:flex;align-items:center;gap:6px;font-size:12px;padding:2px 4px;color:var(--muted)}
.cvar b{color:var(--text);font-weight:normal;flex:1}
.cprocrow{display:flex;align-items:center;gap:3px;margin:3px 0}
.cprocrow .cblk{flex:1}

.cblocks{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.cblk{display:flex;align-items:center;gap:4px;flex-wrap:wrap;text-align:left;
  background:var(--a);color:#241d38;border:none;border-radius:8px;padding:5px 8px;
  font-size:12px;font-weight:bold;line-height:1.55;width:100%}
.cblk.k-report,.cblk.k-bool{border-radius:14px}
.cblk.k-hat{border-radius:12px 12px 8px 8px}
.cblk.k-cap{border-radius:8px 8px 12px 12px}
.cblk.live{width:auto;cursor:pointer}
.cblk.live.sel{outline:3px solid var(--star);outline-offset:1px}
.cblk .bx{margin-left:auto;color:#241d38;opacity:.45;padding:0 3px}
.cblk .bx:hover{opacity:1;color:#7a1020}
.cslot{background:rgba(255,255,255,.75);border-radius:9px;padding:1px 6px;font-style:normal;
  font-weight:normal;color:#241d38;font-size:11.5px}
.cslot.bool{border-radius:3px;transform:rotate(45deg);display:inline-block;width:11px;height:11px;
  padding:0;text-indent:-99px;overflow:hidden;background:rgba(255,255,255,.8)}
.cslot.bool.on{background:var(--star);box-shadow:0 0 0 2px #fff}
.cin{background:#fff;border:1px solid rgba(0,0,0,.25);border-radius:9px;padding:1px 5px;
  font-size:11.5px;color:#241d38;font-family:inherit;max-width:130px}
.cin.on{box-shadow:0 0 0 2px var(--star)} .cin.ccol{padding:0;width:26px;height:18px}
.cnest{display:inline-flex;align-items:center;gap:3px;background:var(--a);border-radius:12px;
  padding:1px 6px;font-size:11.5px}
.cscript{margin-bottom:14px}
.cstack{margin-left:6px;border-left:2px dashed var(--line);padding-left:6px}
.cwrap{margin:2px 0}
.cmouth{margin-left:14px;border-left:3px solid var(--line);padding-left:6px;min-height:8px}
.celse{font-size:11px;color:var(--muted);margin-left:6px}
.cdrop{height:8px;border-radius:4px;margin:1px 0;cursor:pointer}
.cdrop:hover{background:rgba(255,255,255,.16)}
.cdrop.on{background:var(--star);height:5px}
/* THE MISSION CONSOLE'S OWN DRAG. A copy of the block rides under the
   finger and a line shows the gap it would drop into, so "where will this
   land" is answered before you let go rather than after. */
#dropLine{position:fixed;display:none;height:4px;border-radius:3px;z-index:119;
  background:var(--star);box-shadow:0 0 10px 2px rgba(255,233,168,.65);
  pointer-events:none}
.blk.dragging{opacity:.92;transform:rotate(-1.5deg) scale(1.03);
  box-shadow:0 10px 26px rgba(0,0,0,.55)}
.blk.lifted{opacity:.32}
/* held back over the shelf: about to be let go of */
.dragging.discard{opacity:.4;transform:rotate(-1.5deg) scale(.96)}
#conScript .blk{cursor:grab;touch-action:none}
/* the shelf is picked up from as well as clicked, on a tablet too */
#conPalette .palblk{cursor:grab;touch-action:none}
#conScript .blk:active{cursor:grabbing}
#conScript .blk button,#conScript .blk input{cursor:pointer;touch-action:auto}
/* dragging: a ghost under the cursor, and the gap it would land in */
.cghost{position:fixed;z-index:60;pointer-events:none;opacity:.9;
  background:var(--accent);color:#241d38;border-radius:8px;padding:5px 8px;
  font-size:12px;font-weight:bold;box-shadow:0 8px 18px rgba(0,0,0,.5);
  display:flex;align-items:center;gap:4px;max-width:280px}
.cghost.k-report,.cghost.k-bool{border-radius:14px}
.cghost .bx{display:none}
body.cdragging{cursor:grabbing}
body.cdragging .cin,body.cdragging .cblk{pointer-events:none}
.cdrop.hot{background:var(--star);height:14px;box-shadow:0 0 0 2px rgba(255,233,168,.4)}
.cslot.hot,.cin.hot{box-shadow:0 0 0 3px var(--star)}
.cblk.live{cursor:grab}
/* the magnifying glass: the whole editor changes cursor so you cannot
   forget the tool is on, and blocks lift slightly under the pointer */
#coder.magnify .cblk{cursor:help}
#coder.magnify .cblk:hover{outline:2px solid var(--star);outline-offset:1px}
.cexplain{position:fixed;z-index:62;width:300px;background:var(--panel);
  border:3px solid var(--line);border-radius:14px;padding:11px;
  box-shadow:0 18px 40px rgba(0,0,0,.6);pointer-events:auto}
.cxtop{display:flex;align-items:center;margin-bottom:7px}
.cxcat{font-size:10.5px;letter-spacing:1.6px;color:var(--a);font-weight:bold;flex:1}
.cxbody{font-size:13.5px;line-height:1.5;color:var(--text);margin:9px 0 6px}
.cxshape{font-size:11.5px;color:var(--muted);border-top:2px solid var(--line);padding-top:6px}
@media (max-width:1150px){ #cPal{width:210px} #cScript{width:44vw} }

/* the walkthrough: a ring round the thing to touch, and a note beside it */
/* The thing the walkthrough is pointing at, lit from inside. The ring is
   drawn over the top of the page; this is on the element, so it survives
   the element moving and reads as the button asking to be pressed rather
   than as a box hovering near one. */
/* No brightness filter. Lifting a mint-green block's luminance also lifts
   the white label printed on it, and the words on the one thing you are
   being told to press came out fainter than the words on everything else.
   The ring supplies the glow; this supplies the movement. */
/* ------------------------------------------------------------- THE DECKS
   Along the BOTTOM, not across the middle. The grid is one instrument and
   the room behind it is the other half of it — a panel in the middle of the
   screen is a panel standing between the DJ and the floor. */
#deck{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;
  width:min(760px,96vw);background:rgba(20,12,34,.94);border:3px solid #4a2a5e;
  border-radius:18px;padding:12px 14px 10px;color:var(--text);
  box-shadow:0 18px 50px rgba(0,0,0,.65),0 0 40px rgba(255,106,213,.12);
  font-family:var(--font)}
.dk-head{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.dk-head>b{font-size:17px;color:#ff8fdd;letter-spacing:.4px}
.dk-bpm{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:15px}
.dk-bpm i{font-style:normal;font-weight:bold;color:var(--star);min-width:34px;
  text-align:center}
.dk-bpm small{color:var(--muted);font-size:11px;letter-spacing:.6px}
.dk-b{width:26px;height:26px;border-radius:8px;background:#2a1c48;color:var(--text);
  border:2px solid #4a2a5e;font-size:15px;line-height:1;font-family:var(--font)}
.dk-b:hover{border-color:#ff6ad5}
/* A name, then sixteen squares. One grid rather than four rows of markup, so
   the columns line up down the whole kit and the playhead is a straight bar. */
.dk-grid{display:grid;grid-template-columns:64px repeat(16,1fr);gap:3px;
  align-items:center}
.dk-name{font-size:11.5px;letter-spacing:.8px;color:var(--c);text-align:right;
  padding-right:7px}
.dk-cell{aspect-ratio:1;min-height:22px;border-radius:6px;border:2px solid #33244f;
  background:#191030;padding:0;transition:background .08s linear}
/* Every fourth square is where a beat lands, so it is drawn one shade up —
   counting to four is how anybody finds the pulse of a sixteen-step bar. */
.dk-cell[data-c="0"],.dk-cell[data-c="4"],.dk-cell[data-c="8"],.dk-cell[data-c="12"]{
  background:#22163f}
.dk-cell.on{background:var(--c);border-color:#fff;box-shadow:0 0 10px var(--c)}
.dk-cell.at{border-color:#fff9}
.dk-cell.on.at{filter:brightness(1.35)}
.dk-cell.cur{outline:2px solid var(--star);outline-offset:1px}
.dk-cell:hover{border-color:var(--c)}
.dk-foot{display:flex;align-items:center;gap:14px;margin-top:10px}
.dk-flt{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);
  letter-spacing:.7px}
.dk-flt input{width:130px;accent-color:#ff6ad5}
.dk-crowd{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);
  letter-spacing:.7px;flex:1}
.dk-crowd i{flex:1;height:9px;border-radius:5px;background:#221640;overflow:hidden;
  border:1px solid #3a2a5e}
.dk-crowd b{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,#8ff0ff,#ff6ad5);transition:width .18s linear}
.dk-tip{margin-top:8px;font-size:12px;color:var(--muted);line-height:1.4}
.dk-tip b{color:var(--star)}
@media (max-width:620px){
  .dk-grid{grid-template-columns:44px repeat(16,1fr);gap:2px}
  .dk-name{font-size:9.5px;padding-right:4px}
  .dk-cell{min-height:15px}
  .dk-tip{display:none}
}

/* No position here: the Code Console button is absolutely positioned and
   centred with a transform, and a `position:relative` from this rule sent it
   off the top of the screen the moment the walkthrough pointed at it. COACH
   sets position inline, and only on elements that are actually static.
   The lift uses `translate`/`scale` rather than `transform` for the same
   reason — those compose with an element's own transform instead of
   replacing it. */
.coach-target{z-index:2;
  animation:coachLift 1.5s ease-in-out infinite}
@keyframes coachLift{
  0%,100%{ translate:0 0; scale:1 }
  50%    { translate:0 -2px; scale:1.025 }
}
@media (prefers-reduced-motion:reduce){ .coach-target{animation:none} }
#coachRing{position:fixed;z-index:66;border:3px solid var(--star);border-radius:12px;
  pointer-events:none;box-shadow:0 0 0 4px rgba(255,233,168,.22),0 0 22px rgba(255,233,168,.5);
  animation:coachpulse 1.25s ease-in-out infinite}
@keyframes coachpulse{
  0%,100%{box-shadow:0 0 0 4px rgba(255,233,168,.22),0 0 22px rgba(255,233,168,.45)}
  50%    {box-shadow:0 0 0 9px rgba(255,233,168,.10),0 0 30px rgba(255,233,168,.75)}
}
#coachTip{position:fixed;z-index:67;width:232px;background:var(--panel);
  border:3px solid var(--star);border-radius:14px;padding:11px 12px;
  box-shadow:0 18px 40px rgba(0,0,0,.6)}
#coachTip.ok{border-color:var(--good)}
.ctstep{font-size:10.5px;letter-spacing:1.7px;color:var(--star);font-weight:bold}
#coachTip.ok .ctstep{color:var(--good)}
.cttext{font-size:13.5px;line-height:1.5;color:var(--text);margin:6px 0 8px}
.ctskip{background:none;border:0;color:var(--muted);font:inherit;font-size:11.5px;
  text-decoration:underline;cursor:pointer;padding:0}
.ctskip:hover{color:var(--text)}

/* what comes next, after you solve one */
#nextUp{position:fixed;z-index:68;left:50%;bottom:96px;transform:translateX(-50%);
  width:min(430px,88vw);background:var(--panel);border:3px solid var(--good);
  border-radius:16px;padding:13px 15px;box-shadow:0 20px 46px rgba(0,0,0,.6)}
.nuhead{font-size:15px;font-weight:bold;color:var(--good);margin-bottom:6px}
.nubody{font-size:13.5px;line-height:1.5;color:var(--text)}
.nuteach{display:inline-block;margin-left:6px;font-size:10px;letter-spacing:1.4px;
  background:var(--panel2);color:var(--muted);border-radius:6px;padding:2px 7px;font-weight:bold}
.nubar{height:5px;background:var(--panel2);border-radius:3px;margin:10px 0 11px;overflow:hidden}
.nubar i{display:block;height:100%;background:var(--good);transition:width .9s linear}
.nurow{display:flex;gap:8px}

/* mission cards: the number and what it teaches, before the blurb */
.mis .mno{position:absolute;top:9px;right:12px;font-size:11px;letter-spacing:1.5px;
  color:var(--muted);font-weight:bold}
.mis .teach{display:inline-block;margin-top:5px;font-size:10.5px;letter-spacing:1.4px;
  color:var(--ink);background:var(--a);border-radius:6px;padding:2px 7px;font-weight:bold}
.mis.soon{opacity:.5}
.mis.solved .tagrow{color:var(--good)}

/* the costume picker: shelves across the top, the kit itself underneath */
#cPick{position:fixed;inset:0;z-index:64;background:rgba(10,14,24,.72);
  display:flex;align-items:center;justify-content:center;pointer-events:auto}
.cpwrap{width:min(760px,90vw);max-height:80vh;display:flex;flex-direction:column;
  background:var(--panel);border:3px solid var(--line);border-radius:16px;padding:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.cphead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cphead b{font-size:15px;color:var(--text)}
.cptabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cptab{background:#1d1730;color:var(--muted);border:2px solid var(--line);border-radius:9px;
  padding:5px 10px;font:inherit;font-size:12px;cursor:pointer}
.cptab.on{background:var(--mint);color:var(--ink);font-weight:bold;border-color:var(--mint)}
.cpgrid{overflow-y:auto;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.cpit{background:#1d1730;border:2px solid var(--line);border-radius:12px;padding:7px 5px;
  color:var(--text);font:inherit;font-size:11.5px;cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:5px}
.cpit:hover{border-color:var(--mint)}
.cpit.on{border-color:var(--star);background:#3b3059}
.cpimg{height:62px;display:flex;align-items:center;justify-content:center}
.cpimg img{max-height:62px;max-width:88px;image-rendering:auto}
.cpname{opacity:.9;line-height:1.25}
/* the four primitives have no photograph — they are drawn */
.cpshape{width:34px;height:34px;background:var(--mint);display:block}
.cpshape.ball{border-radius:50%}
.cpshape.cylinder{border-radius:14px/7px}
.cpshape.cone{background:none;width:0;height:0;border-left:19px solid transparent;
  border-right:19px solid transparent;border-bottom:34px solid var(--mint)}

/* ---------- the workbench ---------- */
#bench{position:fixed;inset:0;z-index:28;pointer-events:none;font-size:13px}
#bench .bhead{font-size:11px;letter-spacing:2px;color:var(--mint);font-weight:bold;
  display:flex;align-items:center;gap:6px;margin-bottom:8px}
#bench .bhead2{font-size:10.5px;letter-spacing:1.6px;color:var(--muted);margin:12px 0 6px}
#bench .bspace{flex:1}
#bench .bnote{font-size:12px;color:var(--muted);line-height:1.45;margin:4px 0}
#bench .bwarn{font-size:11.5px;color:var(--warn);margin:4px 0}
#bBar{position:absolute;left:50%;top:10px;transform:translateX(-50%);pointer-events:auto;
  display:flex;align-items:center;gap:8px;background:rgba(20,15,36,.94);
  border:2px solid var(--line);border-radius:14px;padding:7px 10px;max-width:min(760px,92vw)}
.bhintbox{font-size:12px;color:var(--muted)} .bhintbox.bad{color:var(--bad)}
#bPal,#bInsp{position:absolute;top:60px;bottom:210px;width:230px;overflow:auto;pointer-events:auto;
  background:rgba(20,15,36,.94);border:2px solid var(--line);border-radius:14px;padding:10px}
#bPal{left:10px} #bInsp{right:10px}
#bProg{position:absolute;left:10px;right:10px;bottom:10px;height:192px;overflow:auto;pointer-events:auto;
  background:rgba(20,15,36,.95);border:2px solid var(--line);border-radius:14px;padding:10px}
.bcat{margin-bottom:10px} .bcatname{font-size:11.5px;color:var(--a);margin-bottom:4px;font-weight:bold}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.btile{position:relative;background:var(--panel2);border:2px solid var(--line);border-radius:9px;
  padding:5px 4px;color:var(--text);font-size:10.5px;display:flex;flex-direction:column;
  align-items:center;gap:2px;line-height:1.15;text-align:center}
.btile:hover{border-color:var(--a)} .btile.on{border-color:var(--a);background:#2b2350}
.bem{font-size:17px}
.binert{position:absolute;top:2px;right:4px;color:var(--warn);font-style:normal}
.bname{width:100%;padding:6px 8px;border-radius:9px;border:2px solid var(--line);
  background:#1d1730;color:var(--text);font-size:14px;font-weight:bold}
.bstate{font-size:12px;color:var(--muted);margin:6px 0}
.bstate .yes{color:var(--good)} .bstate .no{color:var(--muted)}
.bprop{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:3px 0;font-size:12px}
.bprop span{color:var(--muted)}
.bprop input,.bprop select{width:96px;padding:4px 6px;border-radius:8px;border:2px solid var(--line);
  background:#1d1730;color:var(--text);font-size:12px}
.bprop input:disabled{opacity:.7}
.brow{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.brow .btn{flex:1;min-width:88px} .btn.bad{background:var(--bad);color:#4a1720;box-shadow:0 3px 0 #c96b78}
.bprogs{display:flex;flex-direction:column;gap:8px}
.bcard{background:#241d38;border:2px solid var(--line);border-radius:12px;padding:8px}
.bcardtop{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.bpname{flex:1;background:#1d1730;border:2px solid var(--line);border-radius:8px;
  color:var(--text);padding:4px 7px;font-size:13px;font-weight:bold}
.bswitch{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:4px}
.bx{background:none;border:none;color:var(--muted);font-size:14px;padding:2px 5px}
.bx:hover{color:var(--bad)}
.bline{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:3px 0}
.bline select,.bline input{padding:3px 6px;border-radius:7px;border:2px solid var(--line);
  background:#1d1730;color:var(--text);font-size:12px}
.bnum{width:66px}
.bstep{margin-left:14px}
.binner{width:100%;margin-left:16px;border-left:2px solid var(--line);padding-left:8px}
.bkw{font-size:10px;font-weight:bold;letter-spacing:1.3px;padding:2px 7px;border-radius:6px;
  background:#1d1730;border:1px solid var(--line);min-width:52px;text-align:center}
.bkw.when{color:var(--star)} .bkw.iff{color:var(--mint)} .bkw.then{color:var(--accent)}
.bkw.do{color:var(--accent)} .bkw.wait{color:var(--muted)} .bkw.rep{color:var(--lav)}
.bkw.call{color:var(--peach)}
.badd{margin-top:6px}
@media (max-width:900px){ #bPal,#bInsp{width:170px} #bProg{height:150px} }

/* ---------- quiz + certificate ---------- */
.card .kicker{font-size:12px;letter-spacing:2.5px;color:var(--mint);font-weight:bold}
#qOpts button{font-size:16px;padding:12px 16px;border-radius:12px;text-align:left}
#qOpts button:disabled{cursor:default}
.certbox{margin:18px 0;padding:22px 18px;border:3px solid var(--star);border-radius:16px;
  background:linear-gradient(180deg,#241d38,#1a1428)}
.certname{font-size:26px;font-weight:bold;color:var(--star)}
.certline{font-size:14.5px;color:var(--muted);margin-top:6px}
.certtopic{font-size:21px;font-weight:bold;margin-top:4px}
.certmeta{font-size:13.5px;color:var(--muted);margin-top:10px}

/* ---------- KORO landing ------------------------------------------------
   The first thing a student sees. It should look like somewhere you want
   to be, and it should move — but slowly, so it never fights the reading. */
#menu{background:linear-gradient(180deg,#4db3f5 0%,#7fd0ff 45%,#cdeeff 100%)}
.korobg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.korobg i{position:absolute;display:block;border-radius:50%;filter:blur(64px);opacity:.5;
  animation:koroDrift 26s ease-in-out infinite}
.korobg i:nth-child(1){width:46vmax;height:46vmax;left:-13vmax;top:-15vmax;
  background:radial-gradient(circle,#7c5cff,transparent 68%)}
.korobg i:nth-child(2){width:38vmax;height:38vmax;right:-11vmax;top:4vmax;
  background:radial-gradient(circle,#ff7ab8,transparent 68%);animation-duration:33s;animation-delay:-9s}
.korobg i:nth-child(3){width:41vmax;height:41vmax;left:24vmax;bottom:-19vmax;
  background:radial-gradient(circle,#3ddcc4,transparent 68%);animation-duration:29s;animation-delay:-17s}
@keyframes koroDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  34%{transform:translate3d(6vmax,4vmax,0) scale(1.13)}
  67%{transform:translate3d(-5vmax,7vmax,0) scale(.93)}
}
.menucard{max-width:1010px;width:min(1010px,96%);position:relative;
  background:rgba(31,24,54,.74);border-color:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.koro{font-size:clamp(46px,7vw,78px);font-weight:900;letter-spacing:.15em;margin:0 0 2px;line-height:1;
  background:linear-gradient(100deg,#a8e6cf,#8fd3ff 28%,#cdb4f6 52%,#ffb4d8 74%,#a8e6cf);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:koroSweep 9s linear infinite, koroFloat 5.5s ease-in-out infinite}
@keyframes koroSweep{to{background-position:280% 0}}
@keyframes koroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.korotag{color:var(--muted);font-size:15px;margin-top:2px}

.misgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px;margin:18px 0 10px}
/* A group heading spans the whole grid, so the cards under it read as a set
   rather than as wherever auto-fit happened to drop them. */
.misgroup{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;
  margin:10px 0 -2px;padding-bottom:6px;border-bottom:2px solid rgba(255,255,255,.10)}
.misgroup:first-child{margin-top:0}
.misgroup b{font-size:12.5px;letter-spacing:2.6px;color:var(--star)}
.misgroup span{font-size:12.5px;color:var(--muted)}
.mis{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:3px solid var(--line);border-radius:20px;padding:16px 15px 14px;text-align:left;
  display:flex;flex-direction:column;gap:7px;min-height:176px;color:var(--text);cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.34);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4),box-shadow .18s,border-color .18s}
.mis::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(158deg,var(--a,#8fd3ff),transparent 64%);opacity:.18;transition:opacity .18s}
.mis>*{position:relative}
.mis:hover:not(.locked),.mis:focus-visible:not(.locked){transform:translateY(-6px);border-color:var(--a,#8fd3ff);
  box-shadow:0 16px 30px rgba(0,0,0,.45),0 6px 0 rgba(0,0,0,.34)}
.mis:hover:not(.locked)::before{opacity:.36}
.mis:hover:not(.locked) .em{transform:translateY(-3px) rotate(-7deg) scale(1.12)}
.mis .em{font-size:40px;line-height:1;transition:transform .26s cubic-bezier(.2,.9,.3,1.5)}
.mis b{font-size:19px;letter-spacing:.2px}
.mis small{font-size:13px;color:var(--muted);line-height:1.4}
.mis .tagrow{margin-top:auto;font-size:12px;letter-spacing:1.4px;color:var(--a,#8fd3ff);font-weight:bold}
.mis.locked{opacity:.5;cursor:not-allowed;filter:grayscale(.55)}
.mis.done{border-color:var(--star)} .mis.done .tagrow{color:var(--star)}
/* a mission you were part way through, and the way back to its first level.
   The chip sits in the corner rather than under the tag, so the big obvious
   thing to press is still "carry on" and starting over is a decision you
   have to aim at. */
.mis.resume{border-color:var(--a,#8fd3ff)}
.mis .misover{position:absolute;top:10px;right:10px;z-index:2;
  font-size:10px;letter-spacing:1.3px;font-weight:bold;
  color:var(--muted);background:rgba(0,0,0,.34);
  border:2px solid var(--line);border-radius:999px;padding:3px 9px;
  transition:color .15s,border-color .15s,background .15s}
.mis .misover:hover{color:var(--text);border-color:var(--a,#8fd3ff);background:rgba(0,0,0,.6)}

/* ---------- the arcade ------------------------------------------------ */
.argrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;margin:14px 0 4px;max-height:56vh;overflow-y:auto;padding:2px}
.arnote{grid-column:1/-1;text-align:center;color:var(--muted);font-size:14px;padding:26px 8px}
.cab{position:relative;display:flex;flex-direction:column;gap:5px;text-align:left;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:3px solid var(--line);border-radius:16px;padding:13px 13px 11px;
  color:var(--text);cursor:pointer;min-height:132px;
  box-shadow:0 5px 0 rgba(0,0,0,.32);
  transition:transform .16s cubic-bezier(.2,.9,.3,1.4),border-color .16s,box-shadow .16s}
.cab:hover,.cab:focus-visible{transform:translateY(-4px);border-color:var(--sky);outline:none;
  box-shadow:0 13px 26px rgba(0,0,0,.42),0 5px 0 rgba(0,0,0,.32)}
.cab b{font-size:16.5px;line-height:1.2;word-break:break-word}
.cab small{font-size:12.5px;color:var(--muted);line-height:1.35;word-break:break-word}
.cab-top{position:absolute;top:9px;right:11px;font-size:10px;letter-spacing:1.4px;
  font-weight:bold;color:var(--ink);background:var(--mint);border-radius:999px;padding:2px 7px}
.cab-by{font-size:11.5px;color:var(--sky);letter-spacing:.3px}
.cab-row{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cab-stars{color:var(--star);font-size:13px;letter-spacing:1px}
.cab.down{opacity:.6}
.cab-down{font-size:11px;color:#ff8a8a;letter-spacing:.3px}
.cab-plays{font-size:11px;color:var(--muted)}
.cab.own{border-color:var(--mint)}
.cab-edit{position:absolute;bottom:9px;right:10px;font-size:10px;letter-spacing:1.2px;
  font-weight:bold;color:var(--ink);background:var(--mint);border-radius:999px;padding:3px 9px}
/* room UNDER the stats for the chip, rather than beside them: the stats
   wrap on a narrow card and a chip sharing that line lands on top of them */
.cab.own{padding-bottom:32px}
.arhead{grid-column:1/-1;font-size:11.5px;letter-spacing:2.4px;color:var(--mint);
  font-weight:bold;margin:4px 0 -4px}
/* the strip along the top of somebody else's game */
#arBar{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:58;
  display:flex;align-items:center;gap:12px;
  background:var(--panel2);border:3px solid var(--line);border-top:0;
  border-radius:0 0 16px 16px;padding:8px 14px;box-shadow:0 8px 20px rgba(0,0,0,.4)}
#arBar.hidden{display:none}
#arBar b{font-size:15px}
.ab-by{font-size:12px;color:var(--muted)}
.starrow{display:flex;gap:6px;justify-content:center;margin:12px 0 6px}
.starbtn{font-size:34px;line-height:1;background:none;border:0;cursor:pointer;
  color:var(--line);padding:0 2px;transition:transform .12s,color .12s}
.starbtn:hover{transform:scale(1.16)}
.starbtn.on{color:var(--star)}
.aratein{width:min(380px,92%);padding:11px 14px;font-size:16px;border-radius:12px;
  border:3px solid var(--line);background:#1d1730;color:var(--text);text-align:center}
.aratein:focus{outline:none;border-color:var(--accent)}
.apubrow{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);
  width:min(340px,90%);cursor:pointer}
.apubrow input{width:20px;height:20px;accent-color:var(--mint)}

/* ---------- the quick change ----------------------------------------
   A strip along the bottom rather than a card in the middle: you are
   looking at yourself standing on the planet, and a panel over the middle
   of the screen covers the one thing you are trying to look at. */
#swap,#travel,#who{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:5vh;pointer-events:none;
  background:linear-gradient(to top,rgba(8,10,18,.72),rgba(8,10,18,0) 42%)}
#swap.hidden,#travel.hidden,#who.hidden{display:none}
/* who is here */
.whorow{display:flex;gap:12px;align-items:flex-start;max-width:min(1000px,92vw);
  max-height:46vh;overflow:auto;padding:2px}
.whonote{color:var(--muted);font-size:13px;padding:14px 10px;text-align:center;width:100%}
.whoroom{min-width:184px;border:3px solid var(--line);border-radius:14px;
  background:rgba(20,16,38,.5);padding:8px 9px 7px;border-top-color:var(--a,#8fd3ff)}
.whohead{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.whohead b{font-size:13px;letter-spacing:.3px;color:var(--a,#8fd3ff)}
.whoem{font-size:15px;line-height:1}
.whocount{margin-left:auto;font-size:11px;color:var(--muted)}
.whoperson{display:flex;align-items:center;gap:7px;padding:3px 2px}
.whoperson img{width:26px;height:32px;object-fit:contain;object-position:center top;
  border-radius:6px;background:rgba(255,255,255,.05);flex:0 0 auto}
.whonames{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.whoname{font-size:13px;font-weight:bold;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.whodoing{font-size:10.5px;color:var(--muted)}
.whoperson.you .whoname{color:var(--mint)}
.wayrow{display:flex;gap:10px}
.waytile{width:118px;height:96px;border:3px solid var(--line);border-radius:16px;
  background:rgba(20,16,38,.55);cursor:pointer;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  font:bold 13px system-ui;letter-spacing:.4px;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.5),border-color .16s,box-shadow .16s,color .16s}
.wayem{font-size:32px;line-height:1}
.waytile:hover,.waytile:focus-visible{transform:translateY(-4px);border-color:var(--sky);
  color:var(--text);outline:none}
.waytile.on,.waytile.on:hover{border-color:var(--mint);color:var(--mint);
  box-shadow:0 0 0 3px rgba(168,230,207,.4)}
.waytile.locked{cursor:not-allowed;filter:grayscale(.7);opacity:.55}
.swapcard{pointer-events:auto;background:var(--panel2);border:3px solid var(--line);
  border-radius:20px;padding:12px 16px 10px;box-shadow:0 18px 40px rgba(0,0,0,.5);
  animation:swapIn .18s cubic-bezier(.2,.9,.3,1.4)}
@keyframes swapIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
#swapTitle{margin:0 0 8px;font-size:12.5px;letter-spacing:2.6px;color:var(--mint);
  text-align:center;font-weight:bold}
.swaprow{position:relative;display:flex;gap:10px}
/* the canvas lies under the buttons and is never clicked: every tile is a
   real button, so focus, Enter and a screen reader all work as normal */
#swapView{position:absolute;left:0;top:0;pointer-events:none}
.swaptile{position:relative;z-index:1;width:104px;height:150px;
  border:3px solid var(--line);border-radius:16px;background:rgba(20,16,38,.55);
  cursor:pointer;color:var(--muted);display:flex;flex-direction:column-reverse;
  align-items:center;padding-bottom:6px;font:bold 12.5px system-ui;letter-spacing:.4px;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.5),border-color .16s,box-shadow .16s,color .16s}
.swaptile:hover,.swaptile:focus-visible{transform:translateY(-4px);border-color:var(--sky);
  color:var(--text);outline:none}
.swaptile.on,.swaptile.on:hover{border-color:var(--mint);color:var(--mint);
  box-shadow:0 0 0 3px rgba(168,230,207,.4)}
.swaptile.on::after{content:'✓';position:absolute;top:5px;right:7px;
  width:19px;height:19px;border-radius:50%;background:var(--mint);color:#14312a;
  font-size:12px;line-height:19px;text-align:center}
.swaptile.locked{cursor:not-allowed;filter:grayscale(.7);opacity:.6}
.swaptile .price{position:absolute;top:5px;left:7px;font-size:10.5px;color:var(--star)}
.swaphint{text-align:center;font-size:11.5px;color:var(--muted);margin-top:8px;letter-spacing:.3px}
.swaphint b{color:var(--text)}

/* ---------- the closet (closet.js) ---------- */
#closet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4vh;pointer-events:none;
  background:linear-gradient(to top,rgba(8,10,18,.72),rgba(8,10,18,0) 46%)}
#closet.hidden{display:none}
.closetcard{max-width:min(980px,96vw)}
#closetTitle{margin:0 0 8px;font-size:12.5px;letter-spacing:2.6px;color:var(--mint);text-align:center;font-weight:bold}
.closetbody{display:flex;gap:14px;align-items:stretch}
#closetView{width:150px;height:200px;flex:0 0 auto;border:3px solid var(--line);border-radius:16px;background:rgba(20,16,38,.55);cursor:grab;touch-action:none}
#closetView:active{cursor:grabbing}
.closetmain{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.closettabs{display:flex;gap:6px;flex-wrap:wrap}
.ctab{position:relative;border:2px solid var(--line);border-radius:999px;background:rgba(20,16,38,.55);color:var(--muted);
  font:bold 12px system-ui;letter-spacing:.3px;padding:5px 12px;cursor:pointer}
.ctab.on{border-color:var(--mint);color:var(--mint)}
.ctab i{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--mint)}
.closetrow{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 6px;min-height:92px}
.citem{flex:0 0 auto;width:150px;min-height:84px;border:3px solid var(--line);border-radius:14px;background:rgba(20,16,38,.55);
  color:var(--text);cursor:pointer;text-align:left;padding:8px 10px;display:flex;flex-direction:column;gap:4px;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.5),border-color .16s,box-shadow .16s}
.citem b{font-size:13px;letter-spacing:.2px}
.citem small{font-size:11px;color:var(--muted);line-height:1.3}
.citem:hover,.citem:focus-visible{transform:translateY(-3px);border-color:var(--sky);outline:none}
.citem.on{border-color:var(--mint);box-shadow:0 0 0 3px rgba(168,230,207,.4)}
.citem.on b::after{content:' ✓';color:var(--mint)}
.citem.locked{cursor:not-allowed;filter:grayscale(.7);opacity:.55}
.citem.off{border-style:dashed}
.closetfits{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.cfit{display:inline-flex;border:2px solid var(--line);border-radius:999px;overflow:hidden;background:rgba(20,16,38,.55)}
.cfit button,button.cfit{border:0;background:none;color:var(--text);font:bold 12px system-ui;padding:5px 11px;cursor:pointer}
.cfit .x{color:var(--muted);padding:5px 9px;border-left:2px solid var(--line)}
button.cfit.plain{border:2px dashed var(--line);border-radius:999px;color:var(--muted)}
#closetSave{display:inline-flex;gap:5px}
#closetSave input{width:150px;border:2px solid var(--line);border-radius:999px;background:rgba(10,8,20,.6);color:var(--text);padding:5px 11px;font:12px system-ui}
#closetSave button{border:2px solid var(--mint);border-radius:999px;background:none;color:var(--mint);font:bold 12px system-ui;padding:5px 12px;cursor:pointer}

/* ---------- difficulty picker ---------- */
.difflbl{font-size:11.5px;letter-spacing:2.2px;color:var(--mint);font-weight:bold;margin-top:4px}
.diffrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px;margin:8px 0 2px}
.diffbtn{background:var(--panel2);border:3px solid var(--line);border-radius:14px;
  padding:9px 10px;text-align:left;color:var(--text);cursor:pointer;display:flex;
  flex-direction:column;gap:2px;transition:transform .16s cubic-bezier(.2,.9,.3,1.5),border-color .16s,box-shadow .16s}
.diffbtn .dem{font-size:20px;line-height:1}
.diffbtn b{font-size:14.5px}
.diffbtn small{font-size:11.5px;color:var(--muted);line-height:1.3}
.diffbtn:hover{transform:translateY(-3px);border-color:var(--a,#8fd3ff)}
.diffbtn.on{border-color:var(--a,#8fd3ff);background:#2b2350;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--a,#8fd3ff) 30%, transparent)}
.diffbtn.on b{color:var(--a,#8fd3ff)}
.diffbtn.lock{opacity:.5;cursor:not-allowed;filter:grayscale(.6)}
.diffbtn.lock:hover{transform:none;border-color:var(--line)}

#charRow{display:flex;gap:9px;overflow-x:auto;padding:9px 2px 4px}
.chr{flex:none;width:76px;height:88px;border-radius:18px;border:3px solid var(--line);
  background:#221a3c;padding:3px;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.5),border-color .16s,box-shadow .16s}
.chr:hover{transform:translateY(-4px);border-color:var(--sky)}
.chr.on{border-color:var(--mint);background:#2b3a4e;box-shadow:0 0 0 3px rgba(168,230,207,.32)}
.chr.on img{animation:chrBob 2.4s ease-in-out infinite}
@keyframes chrBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* screens hand over with a short cross-fade so nothing ever just snaps */
.screen.anim-in{animation:scrIn .42s cubic-bezier(.2,.85,.3,1) both}
.screen.anim-out{animation:scrOut .26s ease-in both;pointer-events:none}
@keyframes scrIn{from{opacity:0;transform:scale(.965) translateY(16px)}to{opacity:1;transform:none}}
@keyframes scrOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(1.03)}}
.screen.anim-in .card,.screen.anim-in .hero{animation:cardIn .5s cubic-bezier(.2,.9,.3,1.15) both .06s}
@keyframes cardIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- start: the planet, live, with the logo in its sky ---------- */
/* The whole backdrop is one canvas now. The photo it replaced brought a
   bundle of CSS with it — clouds blowing across, a glint tuned to a coin in
   the top right, shimmer tuned to a waterfall on the left — and every one of
   those was pinned to a feature of that particular JPEG. None of them
   survived it, and nothing here replaces them: the sky is space, the light
   moves because a real light is moving, and the clouds are gone because the
   camera is above them. */
#start{background:#03050e}
#titleView{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
/* Dark at the top so the logo has something to sit on, dark again at the
   very bottom for the small print, and out of the way across the middle
   where the planet's own limb is the picture. */
.bgfade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 65% at 50% 108%, rgba(90,160,255,.16) 0%, rgba(3,5,14,0) 62%),
    linear-gradient(180deg, rgba(3,5,14,.82) 0%, rgba(3,5,14,.30) 26%,
      rgba(3,5,14,0) 48%, rgba(3,5,14,.55) 100%)}

/* The screen is centred flex for every OTHER card in the game; this one
   wants the full height so the logo can sit in the sky and the controls can
   sit down on the planet, with the world itself left alone in between. */
#start{align-items:stretch;justify-content:stretch;padding:0}
.hero{position:relative;z-index:2;text-align:center;flex:1;display:flex;
  flex-direction:column;align-items:center;
  padding:min(7vh,72px) 20px min(4vh,36px)}

/* KORO, in orbit. The old logo was navy-on-sky: a dark extrusion to lift it
   off bright blue. Over space that reads as a hole, so it is inverted —
   ice-white face, a cold rim, and a wide soft bloom doing the job the drop
   shadow used to do. */
.koro-xl{
  /* THE LOGO, IN THE GAME'S OWN FACE. It was Arial Black — the one piece of
     lettering on the landing screen that had nothing to do with what the
     game is. Monospace at its heaviest weight, opened right out: a word
     where every letter occupies the same column reads as something typed,
     which is the whole idea. */
  font-family:var(--font-disp);
  font-size:clamp(46px,10.5vw,124px);font-weight:900;letter-spacing:.17em;
  /* the tracking adds a trailing gap, so shift back by half of it to stay
     optically centred */
  text-indent:.17em;
  margin:0;line-height:.95;
  color:#eef6ff;
  -webkit-text-stroke:clamp(2px,.5vw,5px) rgba(143,211,255,.55);
  paint-order:stroke fill;
  text-shadow:
     0 2px 0 rgba(60,110,190,.55),
     0 4px 0 rgba(40,80,150,.40),
     0 0 26px rgba(143,211,255,.55),
     0 0 76px rgba(96,170,255,.40),
     0 14px 48px rgba(0,10,30,.60);
  animation:koroFloat 6.5s ease-in-out infinite;
  transform-origin:50% 100%}
.koro-sub{font-weight:900;letter-spacing:.34em;font-size:clamp(11px,1.7vw,15px);
  color:#a8c8e8;text-transform:uppercase;margin:22px 0 0;opacity:.85;
  text-shadow:0 2px 14px rgba(0,10,30,.9)}

/* The controls ride at the bottom, over the planet's own night side, so the
   middle of the frame is left to the thing worth looking at. */
/* THE WORDS LIVE IN THE SKY. Pushing the buttons to the foot of the screen
   put START across the middle of the planet — punched a hole through the one
   thing this screen has to show. Everything stacks from the top instead, and
   the bottom half of the frame belongs to the world. */
.hero .langrow{margin-top:18px}

.btn.bigplay{font-size:clamp(20px,3vw,28px);padding:16px 56px;border-radius:22px;letter-spacing:4px;
  font-weight:900;background:#ffd44d;color:#5a3d00;border:4px solid #fff;
  box-shadow:0 9px 0 #d9a600, 0 14px 30px rgba(0,10,30,.55), 0 0 54px rgba(255,212,77,.30);
  animation:playPulse 2.6s ease-in-out infinite;margin-top:26px}
.btn.bigplay:active{transform:translateY(5px);box-shadow:0 4px 0 #d9a600}
@keyframes playPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes koroFloat{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-9px) rotate(.6deg)}}
.hero .langrow{margin-top:20px}
/* quiet enough that it never competes with START, legible over the photo */
.signlink{margin-top:14px;background:rgba(10,30,55,.42);border:2px solid rgba(255,255,255,.5);
  color:#fff;border-radius:12px;padding:7px 18px;font-size:14.5px;font-weight:bold;
  letter-spacing:.4px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.signlink:hover{background:rgba(10,30,55,.62);border-color:#fff}
#start .langbtn{background:rgba(255,255,255,.86);border-color:#fff;color:#12405e;font-weight:bold}
#start .langbtn.on{background:#ffd44d;color:#5a3d00}

/* ---------- choose your character ---------- */
#chars{background:linear-gradient(180deg,#4db3f5 0%,#7fd0ff 45%,#cdeeff 100%)}
.charcard{max-width:880px;width:min(880px,96%);position:relative;
  background:rgba(31,24,54,.74);border-color:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.scrtitle{font-size:clamp(22px,3.4vw,32px);letter-spacing:.13em;margin:0 0 4px;color:var(--text)}
.charstage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(closest-side,rgba(143,211,255,.16),transparent 72%);border-radius:20px;
  padding:6px 0 2px}
#charView{width:100%;max-width:380px;height:250px;display:block}
.charname{text-align:center;font-size:17px;letter-spacing:2.4px;color:var(--muted);
  margin-top:-6px;min-height:22px}
/* the turntable follows your mouse, so say out loud whether the one turning
   in front of you is the one you actually chose */
.charname.sel{color:var(--mint)}
.charname .tag{display:block;font-size:11.5px;letter-spacing:1.4px;color:var(--muted)}
.charname.sel .tag{color:var(--mint)}
/* A CAP AS WELL AS A FLOOR. auto-fit with only a minimum was right for a
   roster of twenty — it packed them in and they filled the row. With two
   people it stretched each tile to half the card, five hundred pixels of
   portrait with the head cropped off the top. A tile has a size it wants to
   be; the row is centred rather than justified so two of them sit together
   instead of at opposite ends. */
.chargrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(66px,148px));
  gap:9px;margin:14px 0 4px;justify-content:center}
.chrtile{position:relative;aspect-ratio:1/1.12;border-radius:16px;border:3px solid var(--line);
  background:#221a3c;padding:3px;cursor:pointer;overflow:hidden;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.5),border-color .16s,box-shadow .16s}
.chrtile img{width:100%;height:76%;object-fit:contain;object-position:center top}
.chrname{display:block;font-size:11px;letter-spacing:.4px;color:var(--muted);
  margin-top:-2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrtile.on .chrname{color:var(--mint);font-weight:bold}
.chrtile:hover:not(.lock){transform:translateY(-5px) rotate(-3deg);border-color:var(--sky)}
.chrtile:hover:not(.lock) img{animation:chrBob 1s ease-in-out infinite}
/* the one you picked has to still read as picked while the mouse is sitting on
   it — otherwise clicking looks like nothing happened — so it outranks :hover */
.chrtile.on,.chrtile.on:hover:not(.lock){border-color:var(--mint);background:#2b3a4e;
  box-shadow:0 0 0 4px rgba(168,230,207,.55),0 10px 20px rgba(0,0,0,.38);
  transform:translateY(-5px)}
.chrtile.on img{animation:chrBob 2.4s ease-in-out infinite}
.chrtile.on::before{content:'✓';position:absolute;top:3px;right:3px;z-index:2;
  width:21px;height:21px;border-radius:50%;background:var(--mint);color:#14312a;
  font-size:13px;font-weight:bold;line-height:1;display:flex;align-items:center;
  justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.chrtile.lock{cursor:not-allowed;filter:grayscale(1) brightness(.5)}
.chrtile.lock::after{content:'🔒';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:22px}
.ckeys{margin-top:10px;font-size:12px;letter-spacing:.6px;color:var(--muted);text-align:center}
.ckeys b{color:var(--text);font-weight:bold}
.charfoot{display:flex;justify-content:space-between;gap:10px;margin-top:8px}

@media (prefers-reduced-motion:reduce){
  .korobg i,.koro,.chr.on img,.bigplay,.chrtile:hover img,.chrtile.on img{animation:none}
  .mis,.chr,.mis .em,.chrtile{transition:none}
  .screen.anim-in,.screen.anim-out,.screen.anim-in .card,.screen.anim-in .hero{animation:none}
  .koro-xl,.btn.bigplay{animation:none}
}


/* the mission shortcut folded into the pause menu */
.jumprow{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:7px;margin:4px 0 2px}
.jumpbtn{background:var(--panel2);border:2px solid var(--line);border-left:5px solid var(--a);
  border-radius:11px;padding:7px 9px;text-align:left;color:var(--text);
  display:flex;align-items:center;gap:7px;font-size:13px}
.jumpbtn:hover:not(.lock){border-color:var(--a);transform:translateY(-1px)}
.jumpbtn .jem{font-size:17px}
.jumpbtn.lock{opacity:.45;cursor:not-allowed}
.jumpbtn.done b::after{content:' ⭐'}

/* ---------- the player dashboard, and the map of the world ---------- */
#dash{position:absolute;left:14px;top:14px;z-index:12;width:190px;
  background:rgba(15,22,36,.92);border:3px solid var(--line);border-radius:14px;
  padding:9px 10px;pointer-events:none}
#dash .d-who{display:flex;align-items:center;gap:8px}
#dash #dFace{width:34px;height:34px;object-fit:contain;background:#221a3c;
  border-radius:9px;border:2px solid var(--line)}
#dash .d-id{min-width:0}
#dash .d-id b{display:block;font-size:14px;line-height:1.15}
#dash .d-id span{font-size:11px;color:var(--muted);letter-spacing:.4px}
#dash .d-row{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:11.5px;color:var(--muted)}
#dash .d-bar{flex:1;height:7px;background:rgba(255,255,255,.13);border-radius:5px;overflow:hidden}
#dash .d-bar b{display:block;height:100%;background:var(--mint);width:0}
#dash .d-co{color:var(--star);font-size:14px}
#dash .d-co b{font-size:16px}
/* the whole planet on one disc: you in the middle, the far side at the rim */
#pmap{position:absolute;left:14px;top:132px;z-index:12;pointer-events:none;
  background:rgba(15,22,36,.92);border:3px solid var(--line);border-radius:14px;padding:7px}
#pmap canvas{display:block;width:190px;height:190px}
#pmap .pm-lbl{text-align:center;font-size:10.5px;letter-spacing:1.8px;
  color:var(--muted);margin-top:3px}

/* ---------- the library ---------- */
#library{position:fixed;inset:0;z-index:58;background:rgba(6,10,18,.84);
  display:flex;align-items:center;justify-content:center;padding:20px}
.lib-card{width:min(940px,96%);max-height:88vh;background:var(--panel);
  border:3px solid var(--line);border-radius:18px;display:flex;flex-direction:column;
  overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.65)}
.lib-head{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#1b2740}
.lib-head b{font-size:17px;letter-spacing:1.4px;white-space:nowrap}
#libQ{flex:1;padding:9px 13px;border-radius:11px;border:2px solid var(--line);
  background:#0e1626;color:var(--text);font-size:15px}
#libQ:focus{outline:none;border-color:var(--mint)}
.lib-cats{display:flex;flex-wrap:wrap;gap:5px;padding:9px 14px 4px}
.libcat{background:#221a3c;border:2px solid var(--line);border-radius:9px;
  padding:4px 10px;font-size:12px;color:var(--muted)}
.libcat.on{border-color:var(--mint);color:var(--text)}
.lib-body{flex:1;overflow-y:auto;padding:10px 14px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:9px;align-content:start}
.libit{background:#0e1626;border:2px solid var(--line);border-left:5px solid var(--a);
  border-radius:12px;padding:9px 11px}
.libit .li-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.libit .li-top b{font-size:15px;color:var(--text)}
.libit .li-top span{font-size:10.5px;letter-spacing:1.2px;color:var(--a)}
.libit p{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.42}
.libit pre{margin:7px 0 0;background:#141d31;border-radius:8px;padding:7px 9px;
  font-family:var(--font-code);font-size:12.5px;color:#8ff0ff;
  white-space:pre-wrap;overflow-x:auto}
.lib-none{grid-column:1/-1;text-align:center;color:var(--muted);padding:26px;font-size:15px}
.lib-foot{padding:8px 14px;background:#1b2740;font-size:12px;color:var(--muted)}

/* ---------- wallet, purse and shop ---------- */
/* the earn banner: what you got and what for */
#wallet{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:61;
  background:rgba(12,20,38,.94);border:3px solid var(--mint);border-radius:16px;
  padding:9px 20px;text-align:center;pointer-events:none;min-width:190px}
#wallet.up{border-color:var(--star);box-shadow:0 0 0 4px rgba(255,233,168,.28)}
#wallet .wl-up{font-size:19px;font-weight:bold;letter-spacing:2px;color:var(--star)}
#wallet .wl-row{font-size:17px;color:var(--text)}
#wallet .wl-row b{color:var(--mint)}
#wallet .wl-c{color:var(--star);margin-left:9px;font-weight:bold}
#wallet .wl-why{font-size:12px;color:var(--muted);letter-spacing:.4px}
/* level, bar and coins, over the roster */
.purse{display:flex;align-items:center;gap:10px;margin:12px 0 2px;
  font-size:13px;color:var(--muted)}
.purse .pz-lv b{color:var(--text);font-size:16px}
.purse .pz-bar{flex:1;height:9px;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden}
.purse .pz-bar i{display:block;height:100%;background:var(--mint)}
.purse .pz-co{color:var(--star);font-size:15px}
.purse .pz-co b{font-size:17px}
.shop{margin-top:10px;max-height:210px;overflow-y:auto}
.shelf h4{margin:10px 0 5px;font-size:12px;letter-spacing:2.2px;color:var(--star);font-weight:bold}
.shelf h4 small{letter-spacing:.4px;color:var(--muted);font-weight:normal;margin-left:6px}
.shelfrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:7px}
/* A shelf with nothing on it, because what used to be on it moved. Left in
   as a signpost: an aisle that quietly disappears is how you lose somebody
   who came in specifically to buy a car. */
.shelf.ghost h4{color:var(--muted);opacity:.75}
.shopit{background:#221a3c;border:2px solid var(--line);border-left:5px solid var(--a);
  border-radius:12px;padding:7px 9px;text-align:left;color:var(--text);
  display:flex;flex-direction:column;gap:2px;position:relative}
.shopit:hover{border-color:var(--a);transform:translateY(-2px)}
.shopit b{font-size:14px}
.shopit small{font-size:11px;color:var(--muted);line-height:1.3}
.shopit .si-swatch{position:absolute;right:8px;top:8px;width:12px;height:12px;
  border-radius:50%;background:var(--a)}
.shopit .si-tag{margin-top:3px;font-size:11px;letter-spacing:1.2px;color:var(--star)}
.shopit.on{border-color:var(--mint);background:#2b3a4e}
.shopit.on .si-tag{color:var(--mint)}
.shopit.buy .si-tag{color:var(--star)}
/* Keyboard focus has to be obvious, because on this screen it is the cursor.
   :focus-visible only, so a mouse click does not leave a ring behind. */
.chrtile:focus-visible,.shopit:focus-visible,#cBack:focus-visible,#cGo:focus-visible{
  outline:3px solid var(--star);outline-offset:3px}
.chrtile:focus-visible{transform:translateY(-5px)}
.shopit:focus-visible{transform:translateY(-2px)}
/* a character you have not bought yet wears its price */
.chrtile.buy{filter:grayscale(.75) brightness(.66)}
.chrtile.buy:hover{filter:none}
.chrprice{position:absolute;top:3px;right:3px;background:var(--star);color:#4a3800;
  font-size:10px;font-weight:bold;border-radius:7px;padding:1px 5px}
#cHint.warn{color:var(--bad)}

/* ---------- spaceflight ---------- */
/* The beat counter rides over the windscreen AND over the code console —
   the whole point is that the field keeps arriving while you are writing. */
#fbeat{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:54;
  background:rgba(8,14,34,.9);border:3px solid #8ff0ff;border-radius:16px;
  padding:6px 22px 9px;text-align:center;min-width:150px;pointer-events:none}
#fbeat .fb-lbl{font-size:11px;letter-spacing:2.6px;color:#8ff0ff}
#fbeat .fb-n{font-size:29px;font-weight:bold;color:#fff;font-variant-numeric:tabular-nums;
  line-height:1.05}
#fbeat .fb-n small{font-size:15px;color:var(--muted);font-weight:normal}
#fbeat .fb-lane{font-size:12px;letter-spacing:1.2px;color:var(--muted)}
/* THE RADAR — three walls, nearest biggest, so the panel reads as depth
   coming at you rather than as a list of cards. Same markup on the
   windscreen and inside the console. */
/* A button the walkthrough has shut. Visibly off, not just unresponsive —
   a dead button that looks alive is worse than one that looks dead. */
.btn.railed,.modebtn.railed{opacity:.35;filter:grayscale(.7);cursor:not-allowed;
  box-shadow:none;transform:none}
#radar{position:fixed;left:14px;top:14px;z-index:54;pointer-events:none}
/* The caption under the phantom. The three grids of nine squares that used
   to live here were a second, worse drawing of a wall that is already in
   front of you at full size — so the picture moved into the field, and what
   is left up here is one sentence saying how far the plan gets. */
.rline{background:rgba(8,14,34,.86);border:3px solid rgba(143,240,255,.5);
  border-radius:14px;padding:8px 15px;font-size:14px;font-weight:bold;
  letter-spacing:.4px;color:#8ff0ff;max-width:min(64vw,430px)}
.rline.warn{color:#ffb4a2;border-color:rgba(255,107,107,.6)}
.cg-txt .rline{margin-top:10px;font-size:15px;background:rgba(8,14,34,.55)}
/* A CORRIDOR, not a row. Three cards side by side is a list of three
   things; three cards stacked into the screen, each smaller and dimmer
   than the one in front, is the field you are flying down. Solving a wall
   then reads as travel: everything steps toward you a size, the front one
   grows and passes the camera, and a new one appears in the distance. */
/* The gaps have to clear each card's HEIGHT, not just look roomy: stack
   them too close and the front card swallows the two behind it and all you
   can see of the field ahead is three labels. */
.radar{position:relative;height:196px;
  background:rgba(8,14,34,.86);border:3px solid rgba(143,240,255,.5);
  border-radius:16px;padding:8px 10px}
/* The WRAPPER owns the place in the stack; the card inside owns nothing, so
   the animation has its transform entirely to itself. */
.rwrap{position:absolute;left:0;right:0;display:flex;justify-content:center}
.rwrap.big{top:82px;z-index:3}
.rwrap.mid{top:36px;z-index:2}
.rwrap.far{top:2px;z-index:1}
.cg-txt .radar{margin-top:10px;background:rgba(8,14,34,.55);gap:14px;padding:11px 16px 10px}
/* bigger inside the console: this is where you are actually reading it to
   decide what to write, rather than glancing at it mid-flight */
.cg-txt .rw.big .rgrid{grid-template-columns:repeat(var(--cols,3),var(--cbig));grid-auto-rows:var(--cbig)}
.cg-txt .rw.mid .rgrid{grid-template-columns:repeat(var(--cols,3),var(--cmid));grid-auto-rows:var(--cmid)}
.cg-txt .rw.far .rgrid{grid-template-columns:repeat(var(--cols,3),var(--cfar));grid-auto-rows:var(--cfar)}
.cg-txt .rw b{font-size:10.5px}
.cg-txt .radar + .rlegend{text-align:center;margin-top:2px}
.rlegend{font-size:12.5px;color:var(--star)}
.rw{text-align:center}
.rw b{display:block;font-size:9.5px;letter-spacing:1.6px;color:#8ff0ff;margin-bottom:3px}
.rw b small{color:var(--muted);letter-spacing:0}
.rw.mid{opacity:.72} .rw.far{opacity:.45}
/* Solve a wall and the panels SLIDE: +1 walks up into NOW, +2 into +1, a
   new one arrives from the right and the solved one leaves to the left.
   This used to be a keyframe that popped each card in place from nowhere,
   which shows that something changed without showing what — the travel is
   done from JS now, measured from where each panel actually was. */
.radar{--cols:3;
  /* One panel width, however many lanes divide it. At three these come out
     at the sizes they were hand-set to; at five they shrink to fit rather
     than pushing the console's aside wider than it is allowed to be. */
  --rbig:calc(57px / var(--cols)); --rmid:calc(36px / var(--cols));
  --rfar:calc(24px / var(--cols));
  --cbig:calc(75px / var(--cols)); --cmid:calc(48px / var(--cols));
  --cfar:calc(33px / var(--cols));
  --abig:calc(102px / var(--cols)); --amid:calc(66px / var(--cols));
  --afar:calc(45px / var(--cols))}
.rgrid{display:grid;gap:2px}
.rw.big .rgrid{grid-template-columns:repeat(var(--cols,3),var(--rbig));grid-auto-rows:var(--rbig)}
.rw.mid .rgrid{grid-template-columns:repeat(var(--cols,3),var(--rmid));grid-auto-rows:var(--rmid)}
.rw.far .rgrid{grid-template-columns:repeat(var(--cols,3),var(--rfar));grid-auto-rows:var(--rfar)}
/* open sky reads as empty, rock as solid, and YOU as a ring on top of
   whichever you are sitting in */
/* A CELL IS A PIECE OF SPACE. What is in it is drawn as the thing it is:
   an asteroid that turns, and a ship that points. The old version filled
   the whole square with a colour and asked a child to remember that beige
   meant rock and a cyan outline meant you — which is a key, and a picture
   that needs a key is not doing its job. */
/* No overflow:hidden. The rock is drawn at 78% and never reaches the edge,
   so the clip was only ever cutting the collision light off at the cell
   wall — and an alarm that stops at the edge of the thing it is warning
   about is a small red square, not a warning. */
/* The cell is a FRAME, and what is in it is placed against the frame. It
   used to be a grid with centred items, which sizes its tracks to their
   contents — so "88% wide" resolved against the widest child rather than
   against the cell, and the asteroid came out ten pixels across in a
   thirty-four pixel square. */
.rgrid i{position:relative;background:#0e1730;border:1px solid rgba(143,240,255,.18);
  border-radius:3px}
.rgrid i.me.rock{z-index:4}
.rgrid i.rock{background:#141d33}
/* the rock itself: a lumpy polygon, turning slowly, each at its own rate */
.ast{position:absolute;left:11%;top:11%;width:78%;height:78%;
  background:linear-gradient(150deg,#c6b393,#8e7c62 62%,#6d5f4b);
  clip-path:polygon(50% 2%,78% 12%,95% 38%,88% 70%,64% 95%,33% 96%,9% 74%,3% 42%,20% 14%);
  animation:astSpin var(--sp,7s) linear infinite;
  box-shadow:inset -2px -3px 0 rgba(0,0,0,.28)}
.ast.rev{animation-direction:reverse}
@keyframes astSpin{ to{ transform:rotate(360deg) } }
/* and you: a little ship, nose up the screen, the way the field runs */
.mini{position:absolute;left:14%;top:12%;width:72%;height:76%;z-index:2;
  filter:drop-shadow(0 0 4px rgba(143,240,255,.8))}
.shipico{width:100%;height:100%;display:block}
.shipico .s-hull{fill:#dff4ff}
.shipico .s-wing{fill:#4fb8d8}
.shipico .s-glass{fill:#1b3b63}
.shipico .s-fire{fill:#ffd27f}
.rgrid i.me.rock .shipico .s-hull{fill:#ffd8d8}
.rgrid i.me.rock .shipico .s-wing{fill:#e0656c}
.rgrid i.me{background:#12294a;box-shadow:inset 0 0 0 2px rgba(143,240,255,.55)}
.rgrid i.me.rock{box-shadow:inset 0 0 0 2px var(--bad)}
.rgrid i.me.rock .mini{border-bottom-color:#ff9aa2}
@media (prefers-reduced-motion:reduce){ .ast{animation:none} }
/* the sentence under the panels, where a whole panel of prose used to be */
/* The panels are being READ here, to decide what to write — so they get the
   room the old guide panel used to take, rather than the glance-sized
   version that lives on the windscreen. */
#conAside .radar{background:none;border:none;padding:0;height:292px}
#conAside .rwrap.big{top:130px}
#conAside .rwrap.mid{top:54px}
#conAside .rwrap.far{top:2px}
/* The console's own copy of the radar, and the THIRD place these cells are
   sized. An id selector, so it beats both of the others — which is exactly
   why a five-wide field came out here as three columns of nine rows,
   overflowing the aside and running through the brief underneath it. */
#conAside .rw.big .rgrid{grid-template-columns:repeat(var(--cols,3),var(--abig));grid-auto-rows:var(--abig)}
#conAside .rw.mid .rgrid{grid-template-columns:repeat(var(--cols,3),var(--amid));grid-auto-rows:var(--amid)}
#conAside .rw.far .rgrid{grid-template-columns:repeat(var(--cols,3),var(--afar));grid-auto-rows:var(--afar)}
/* the ship scales with the cell it is in, so it is a ship in the big panel
   and still a ship two panels back */
#conAside .rw.big .mini{border-left-width:7px;border-right-width:7px;border-bottom-width:13px}
#conAside .rw b{font-size:10.5px}
#conAside .rlegend{font-size:12.5px;color:var(--star);white-space:normal}
/* a shelf entry the walkthrough has filled in for you: the number in the
   block is the answer, so the block is marked as being handed over */
.palblk.pinned{box-shadow:0 0 0 2px var(--star),0 3px 0 #221b36}
/* The block that flew you into the rock, still sitting in your program. */
.blk.blame{outline:3px solid #ff5a5a;outline-offset:2px;
  animation:blamePulse 1s ease-in-out infinite}
@keyframes blamePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,90,90,.55) }
  50%    { box-shadow:0 0 16px 3px rgba(255,90,90,.8) }
}
@media (prefers-reduced-motion:reduce){ .blk.blame{animation:none} }
/* The crash notice, above the walls, where the student is about to look
   anyway. It stays until the next RUN — a line that fades after three
   seconds is a line nobody reading the blocks underneath it ever saw. */
.ascrash{margin:0 0 9px;padding:8px 11px;border-radius:10px;font-size:13px;
  line-height:1.4;font-weight:bold;color:#ffd8d8;
  background:rgba(255,70,70,.16);border:2px solid rgba(255,90,90,.55)}
.asbrief{margin:10px 2px 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.asbrief b{color:var(--star)}
.rw.warn b{color:var(--bad)}
/* a slot wall: the gap at its angle, and your ship at yours. Lined up means
   the two bars are parallel, which you can see without reading anything. */
.rslot{position:relative;width:100%;aspect-ratio:1/1;border-radius:4px;
  background:#b3a184;overflow:hidden}
.rw.big .rslot{width:61px} .rw.mid .rslot{width:40px} .rw.far .rslot{width:28px}
.rslot .rs-gap{position:absolute;left:-25%;top:50%;width:150%;height:20%;
  margin-top:-10%;background:#16203a;transform:rotate(var(--sa))}
.rslot .rs-ship{position:absolute;left:22%;top:50%;width:56%;height:0;
  border-top:3px solid #8ff0ff;transform:rotate(var(--pa))}
.rw.warn .rslot .rs-ship{border-top-color:var(--bad)}
/* the verdict per wall: does your program get through this one */
.rmark{display:block;font-size:13px;font-style:normal;line-height:1.1;margin-top:2px;color:var(--mint)}
.rw.warn .rmark{color:var(--bad)}
.rw.clear .rmark{color:var(--muted)}
/* a wall your program says nothing about: no verdict, and the card sits back */
.rw.unsaid .rmark{color:var(--muted)}
.rw.unsaid .rgrid i.me,.rw.unsaid .rslot .rs-ship{opacity:.45}
/* ------------------------------------------------- the collision warning
   A cell holding BOTH the ship and a rock is the whole problem stated in
   one square, so both have to be legible in it. The ship shrinks and the
   rock stays its full size behind — you can see what you are about to hit,
   which is the entire reason to move.

   And it sounds an alarm, in the only way a picture can. A red light
   sweeps out of the cell, the rock behind it is lit by it, and the border
   flashes. Filling the square with flat pink, which is what this did
   before, hid the rock completely and left a child looking at a blank red
   box with no idea what was wrong with it. */
/* Not concentric. A ship centred on a rock is a ship with a four-pixel ring
   of rock round it, and at this size that is nothing — the two shapes have
   to be in different places to be two shapes. The rock takes the cell and
   the ship sits under it, nose pointing straight into it, which is a
   picture of the next second rather than a symbol for it. */
/* square, or a rotating polygon reads as a stretched blob rather than a rock */
.rgrid i.me.rock .ast{left:19%;top:-2%;width:62%;height:62%;
  filter:saturate(1.4) brightness(1.15)}
.rgrid i.me.rock .mini{left:29%;top:56%;width:42%;height:46%}
.rgrid i.me.rock::after{content:'';position:absolute;inset:-30%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,70,70,.85) 0%,rgba(255,70,70,.34) 42%,rgba(255,70,70,0) 70%);
  animation:siren .82s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes siren{
  0%,100%{ opacity:.18; transform:scale(.72) }
  50%    { opacity:.95; transform:scale(1.12) }
}
.rw.warn .rgrid i.me{box-shadow:inset 0 0 0 2px var(--bad);
  animation:radarHit .82s ease-in-out infinite}
@keyframes radarHit{
  0%,100%{ box-shadow:inset 0 0 0 2px var(--bad), 0 0 0 0 rgba(255,70,70,.5) }
  50%    { box-shadow:inset 0 0 0 3px #ff5a5a, 0 0 14px 3px rgba(255,70,70,.75) }
}
/* the wall you are about to meet shouts; the ones behind it only mutter */
.rw.big .rgrid i.me.rock::after{animation-duration:.62s}
.rw.mid .rgrid i.me.rock::after{opacity:.6;animation-duration:1.1s}
.rw.far .rgrid i.me.rock::after{opacity:.4;animation-duration:1.4s}
.rlegend{align-self:flex-end;font-size:11px;letter-spacing:.6px;color:var(--muted);
  padding-bottom:2px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .rw.warn .rgrid i.me{animation:none}
  .rgrid i.me.rock::after{animation:none;opacity:.7}
}
/* a coordinate block reads as an instruction with a number you type into */
.blk.num .blk-name{letter-spacing:.3px}
.blk.num .cnt-n{min-width:30px}
.numin{width:56px;padding:3px 7px;border-radius:8px;border:2px solid rgba(0,0,0,.3);
  background:rgba(0,0,0,.28);color:#fff;font-size:17px;font-weight:bold;text-align:center;
  font-family:var(--font-code)}
.numin:focus{outline:none;border-color:#fff;background:rgba(0,0,0,.45)}
.cnt[disabled]{opacity:.3}

/* ---------- code console (block based) ---------- */
#console{position:fixed;inset:0;z-index:50;background:rgba(6,10,18,.82);display:flex;align-items:center;justify-content:center;padding:18px}
.con-card{width:min(1080px,97%);max-height:88vh;background:var(--panel);border:3px solid var(--line);
  border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.65)}
.con-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#1b2740;font-size:17px;letter-spacing:1px}
.con-body{display:flex;gap:12px;padding:12px;overflow:auto;flex:1}
/* The columns do NOT shrink. On a narrow window three flexible columns
   squeezed the block shelf to about a hundred pixels, and "point in
   direction" came out as three words on three lines inside a block that is
   meant to be read at a glance. The body already scrolls; scrolling to a
   legible block beats reading a squashed one. */
.con-col{flex:0 0 250px;display:flex;flex-direction:column;gap:6px;min-height:0}
.con-col.grow{flex:1 1 260px;width:auto}
.con-lbl{font-size:12px;letter-spacing:1.6px;color:var(--muted)}
#conPalette{display:flex;flex-direction:column;gap:8px}
.palblk{background:var(--c);border:none;border-radius:12px;padding:10px 12px;color:#fff;text-align:left;
  box-shadow:0 4px 0 rgba(0,0,0,.35)}
.palblk b{display:block;font-size:17px}
.palblk small{font-size:12px;opacity:.9}
.palblk:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
#conScript{flex:1;overflow:auto;background:#0e1626;border:3px dashed var(--line);border-radius:12px;padding:10px;min-height:190px}
.blk{background:var(--c);border-radius:10px;padding:9px 12px;margin:0 0 7px;color:#fff;font-size:17px;
  display:flex;align-items:center;gap:8px;box-shadow:0 3px 0 rgba(0,0,0,.35);position:relative}
.blk.on{outline:4px solid #8ff0ff;transform:scale(1.03)}
.blk.rep{display:block;padding:0;background:transparent;box-shadow:none}
.blk.rep .blk-head{background:var(--c);border-radius:10px 10px 0 0;padding:8px 12px;display:flex;align-items:center;gap:7px;font-size:17px}
.blk.rep .blk-body{margin-left:22px;border-left:8px solid var(--c);padding:8px 0 8px 10px;background:rgba(124,92,255,.10)}
.blk.rep .blk-foot{height:14px;background:var(--c);border-radius:0 0 10px 10px;margin-right:auto}
/* A FOREVER HAS NO NOTCH. Every other C-block's foot is a tab you can read
   as "the next block goes under here"; a forever never reaches one, so its
   foot is squared off and runs the full width instead. The shape is the
   lesson — a student who cannot find the bump under it does not stack
   anything there and never writes the block that silently never runs. */
.blk.rep.flat .blk-foot{border-radius:0 0 10px 10px;margin-right:0;height:16px;
  background:repeating-linear-gradient(135deg,var(--c) 0 7px,rgba(0,0,0,.22) 7px 14px)}
.blk.rep.target .blk-head{outline:3px dashed #fff}
.blk-x{margin-left:auto;background:rgba(0,0,0,.28);border:none;color:#fff;border-radius:7px;width:26px;height:26px;font-size:14px}
.cnt{background:rgba(0,0,0,.3);border:none;color:#fff;border-radius:6px;width:26px;height:26px;font-size:17px;line-height:1}
.cnt-n{min-width:26px;text-align:center;font-size:19px;font-weight:bold}
.blk-times{font-size:14px;opacity:.85}
.iter{margin-left:6px;font-size:14px;background:rgba(0,0,0,.35);border-radius:8px;padding:1px 7px}
.blk-empty{color:var(--muted);font-size:14px;padding:6px 8px;border:2px dashed var(--line);border-radius:8px}
.blk-empty.big{text-align:center;padding:22px 8px;font-size:16px}
#conText{flex:1;background:#0e1626;border:3px solid var(--line);border-radius:12px;padding:10px;margin:0;
  font-family:var(--font-code);font-size:15px;color:#8ff0ff;white-space:pre;overflow:auto}
.con-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;background:#1b2740}
.con-hint{font-size:13.5px;color:var(--muted)}
.con-budget{display:inline-block;background:#1d1730;border:2px solid var(--line);border-radius:9px;
  padding:3px 10px;font-size:14px;margin-right:10px}
.con-budget b{color:var(--mint)} .con-budget b.over{color:var(--bad)}
/* puzzle timer */
#ptimer{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:rgba(46,37,71,.92);
  border:3px solid var(--line);border-radius:16px;padding:8px 18px;text-align:center;min-width:190px}
#ptimer .lbl{font-size:11px;letter-spacing:2px;color:var(--muted)}
#ptimer .clock{font-size:30px;font-weight:bold;color:var(--mint);font-variant-numeric:tabular-nums}
#ptimer .clock.warn{color:var(--warn)} #ptimer .clock.bad{color:var(--bad);animation:pulseT .6s infinite}
@keyframes pulseT{50%{opacity:.55}}
#ptimer .sub{font-size:12.5px;color:var(--muted)}
.stars{font-size:30px;letter-spacing:4px}
/* running program strip */
#tape{position:fixed;left:14px;bottom:80px;z-index:20;width:250px;max-height:52vh;overflow:auto;
  background:rgba(10,16,28,.94);border:3px solid var(--line);border-radius:14px;padding:10px;font-size:14px}
#tape .tape-lbl{font-size:11px;letter-spacing:1.6px;color:var(--star);margin-bottom:6px}
#tape .blk{font-size:14px;padding:6px 9px}
#tape .blk.rep .blk-head{font-size:14px;padding:6px 9px}
#tape .blk-x,#tape .cnt{display:none}

/* console: the walkthrough strip, the blocks/typing switch, and the word bank */
.con-mode{display:flex;gap:2px;background:#121c30;border:2px solid var(--line);border-radius:11px;
  padding:3px;margin-left:auto;margin-right:10px}
.modebtn{background:none;border:none;color:var(--muted);font:inherit;font-size:13px;letter-spacing:.5px;
  padding:5px 13px;border-radius:8px;cursor:pointer}
.modebtn.on{background:var(--line);color:var(--text)}
/* The walkthrough, INSIDE the console. Same words as the floating card, but
   in the one place the student is already looking instead of on top of the
   button they are being told to press. */
#conCoach{margin:10px 14px 0;padding:9px 13px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,233,168,.14),rgba(255,233,168,.06));
  border:2px solid rgba(255,233,168,.5);display:flex;align-items:center;gap:12px;
  flex-wrap:wrap}
#conCoach .ctstep{font-size:10.5px;letter-spacing:1.6px;color:var(--star);font-weight:bold}
#conCoach .cttext{flex:1;min-width:200px;font-size:14.5px;line-height:1.4;color:var(--text)}
#conCoach .cttext b{color:var(--star)}
#conCoach .ctskip{background:none;border:none;color:var(--muted);font-size:11.5px;
  text-decoration:underline;cursor:pointer;padding:0}
#conCoach.ok{border-color:rgba(168,230,207,.6)}
#conGuide{padding:11px 14px 0}
.cg-row{display:flex;gap:12px;align-items:flex-start;background:rgba(46,37,71,.62);
  border:2px solid var(--line);border-radius:12px;padding:9px 12px;margin-top:4px}
.cg-txt{flex:1;font-size:13.5px;color:var(--muted);line-height:1.45}
.cg-brief{color:var(--text);font-size:15px;line-height:1.5}
.cg-brief b{color:var(--peach)}
.cg-skill{margin-top:8px;padding-top:8px;border-top:2px solid var(--line);font-size:13px}
/* ONLY THE FIRST ONE IS THE HEADING. The card is built as
   `<b>name</b>text`, and this rule used to catch every <b> in it — so a
   mission that emphasised a word in its own sentence got that word thrown
   onto its own line in mint, with the rest of the clause orphaned under it.
   The name is the first child; anything a mission bolds inside its own prose
   is emphasis, and stays in the line. */
.cg-skill > b:first-child{display:block;color:var(--mint);font-size:15px;margin-bottom:2px}
.cg-skill b{color:var(--text)}
.cg-code{margin:0;background:#1d1730;border:2px solid var(--line);border-radius:9px;padding:7px 11px;
  font-size:13.5px;color:var(--sky);white-space:pre;min-width:140px}
/* THE HINT. It sits where the answer used to sit, so the card does not
   change shape when it is pressed — a panel that jumps when you ask for
   help is a panel that has moved the thing you were reading. */
.cg-hint{background:#2a1c48;border:2px solid var(--line);border-bottom-width:4px;
  color:var(--star);border-radius:11px;padding:9px 15px;font-family:var(--font);
  font-size:14.5px;white-space:nowrap;align-self:flex-start}
.cg-hint:hover{border-color:var(--star);background:#33215a}
.cg-hinted{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cg-hintlbl{font-size:11px;letter-spacing:1.4px;color:var(--muted)}
.wordbank{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.word{background:var(--c);border:none;border-radius:9px;padding:7px 10px;color:#fff;font:inherit;
  font-size:15px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.word:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
#conTA{flex:1;min-height:230px;background:#12192b;border:2px solid var(--line);border-radius:12px;
  padding:11px 13px;color:#eef3ff;font-family:var(--font-code);font-size:16px;
  line-height:1.55;resize:none;outline:none}
#conTA:focus{border-color:var(--mint)}
.con-hint b{color:var(--text)}
.con-hint.err{color:var(--bad)} .con-hint.ok{color:var(--mint)}

/* ---------- flat-mode transfer check ---------- */
#flat{position:fixed;inset:0;z-index:40;background:linear-gradient(160deg,#12324a,#101a2c 55%,#0b1120);
  display:flex;flex-direction:column}
#flatTop{height:34px;background:rgba(8,12,20,.92);display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;font-size:14px;color:var(--muted);flex:none}
#flatDesk{flex:1;position:relative;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,104px);
  grid-auto-rows:104px;gap:6px;align-content:start}
#flatDock{height:56px;background:rgba(8,12,20,.92);display:flex;align-items:center;gap:10px;padding:0 12px;flex:none;font-size:15px}
.fi{width:104px;height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border-radius:12px;border:3px solid transparent;background:transparent;color:#fff;text-align:center}
.fi .em{font-size:42px}.fi .nm{font-size:13px;text-shadow:0 2px 4px #000}
.fi:hover{background:rgba(255,255,255,.1)}
.fi.sel{background:rgba(62,166,255,.3);border-color:var(--accent)}
.fwin{position:absolute;left:120px;top:70px;width:390px;height:250px;background:var(--panel);border:3px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.6);display:flex;flex-direction:column}
.fwin-bar{height:40px;background:#2a3550;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px;font-size:15px}
.fwin-x{width:32px;height:32px;border-radius:8px;border:none;background:#b23b3b;color:#fff;font-size:17px;font-weight:bold}
.fwin-body{flex:1;padding:12px;font-size:16px;color:var(--muted)}
#flatMsg{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:#fffbe8;color:#1a1a1a;
  border:3px solid var(--star);border-radius:14px;padding:10px 16px;font-size:18px;max-width:560px;text-align:center}
/* ---------- MECH LEAGUE ----------
   The battle overlay. Two mechs across the top, the fight in the middle of
   the screen behind it, the log down the right, and the transport along the
   bottom. Everything is pointer-events:none except the controls, because the
   arena underneath is the thing being watched. */
/* ---- CRUISE: the interplanetary flight. Everything here is a readout —
   nothing is clickable, because both hands are on the ship. ---- */
/* ---- SONAR: the sub's three returns, on the left where a real one is.
   A lamp is dark when the trench does not offer that sensor at all, so the
   panel never advertises a block the mission has not handed you. ---- */
/* On the RIGHT. The left is where the running program's tape unrolls, and
   two panels in one corner is a panel nobody reads. */
#sonar{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:54;
  pointer-events:none;font-family:var(--font);display:flex;flex-direction:column;
  gap:6px;align-items:stretch;min-width:96px}
#sonar b{font-size:10.5px;letter-spacing:2.6px;color:#8ff0ff;text-align:center;
  margin-bottom:2px;text-shadow:0 2px 8px #000}
#sonar i{font-style:normal;font-size:11.5px;letter-spacing:1.8px;text-align:center;
  padding:7px 10px;border-radius:9px;border:1px solid rgba(143,240,255,.28);
  background:rgba(6,26,38,.72);color:#6f93a6;transition:background .12s,color .12s,
  border-color .12s,box-shadow .12s}
#sonar i.on{background:#ff9aa2;border-color:#ffd8d8;color:#2a0d12;font-weight:bold;
  box-shadow:0 0 16px rgba(255,154,162,.75)}
#sonar i.off{opacity:.25}
#cruise{position:fixed;inset:0;z-index:56;pointer-events:none;font-family:var(--font);
  color:#dff3ff;text-shadow:0 2px 10px rgba(0,0,0,.85)}
#cruise .cnav{position:absolute;left:50%;top:16px;transform:translateX(-50%);
  text-align:center;min-width:260px}
#cruise .cnav b{display:block;font-size:12px;letter-spacing:3px;color:#8ff0ff}
#cruise .cnav span{font-size:26px;font-weight:bold;font-variant-numeric:tabular-nums}
#cruise .cnav em{display:block;margin-top:4px;font-style:normal;font-size:12px;
  letter-spacing:1.6px;color:#8ff0ff;opacity:.85;font-variant-numeric:tabular-nums}
#cruise .cbar{margin-top:6px;height:5px;border-radius:3px;background:rgba(143,240,255,.18);
  overflow:hidden}
#cruise .cbar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,#8ff0ff,#cdb4f6);transition:width .25s linear}
#cruise .cthr{position:absolute;left:22px;bottom:74px;font-size:12px;letter-spacing:1.6px}
#cruise .cthr .cbar.sm{width:120px;margin-top:4px}
/* wraps rather than running off the edge: the line is long and a narrow
   window is a lab window */
#cruise .ckeys{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  font-size:12px;letter-spacing:.4px;color:#b9d6e6;text-align:center;
  max-width:min(94vw,900px);line-height:1.7}
#cruise .ckeys b{color:#ffd23f;letter-spacing:1px}
/* the course marker: a ring on the planet ahead, an arrow at the edge when
   it is behind you */
#cruise .cmark{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px}
#cruise .cmark i{display:block;width:100%;height:100%;border:2px solid #8ff0ff;
  border-radius:50%;opacity:.85;animation:cpulse 1.9s ease-in-out infinite}
#cruise .cmark.edge i{border-radius:4px;transform:rotate(45deg);border-color:#ffd23f}
@keyframes cpulse{0%,100%{transform:scale(.8);opacity:.5}50%{transform:scale(1.05);opacity:.95}}
#mech{position:fixed;inset:0;z-index:56;pointer-events:none;font-family:var(--font)}
#mkTop{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;
  justify-content:space-between;gap:12px;padding:12px 14px}
.mk-side{width:min(300px,30vw);background:rgba(15,22,36,.93);border:3px solid var(--line);
  border-radius:14px;padding:10px 12px}
.mk-side.r{text-align:right}
.mk-name{font-size:17px;font-weight:bold;letter-spacing:.5px;display:flex;gap:8px;align-items:center}
.mk-side.r .mk-name{flex-direction:row-reverse}
.mk-chassis{font-size:12px;color:var(--muted);letter-spacing:1.4px;margin:2px 0 7px}
.mk-meter{height:13px;border-radius:7px;background:#111a29;overflow:hidden;margin-bottom:5px;
  border:1px solid #0b1220}
.mk-meter i{display:block;height:100%;width:100%;transition:width .18s linear}
.mk-hp i{background:linear-gradient(90deg,#ff9aa2,#ffc8dd)}
.mk-en i{background:linear-gradient(90deg,#ffe9a8,#ffd8a8)}
.mk-nums{font-size:13px;color:var(--muted);display:flex;gap:12px}
.mk-side.r .mk-nums{justify-content:flex-end}
.mk-nums b{color:var(--text)}
.mk-dead{color:var(--bad);font-weight:bold;letter-spacing:2px}
#mkTurn{background:rgba(15,22,36,.93);border:3px solid var(--line);border-radius:14px;
  padding:8px 16px;text-align:center;min-width:120px}
#mkTurn .n{font-size:26px;font-weight:bold;color:var(--star);line-height:1}
#mkTurn .l{font-size:11px;color:var(--muted);letter-spacing:2px}

/* the log. One block of the running program per line, with the answer the
   test gave, because "why did it do that" is the whole point of watching. */
#mkLog{position:absolute;right:14px;top:120px;width:min(330px,32vw);max-height:52vh;
  overflow:hidden;background:rgba(15,22,36,.93);border:3px solid var(--line);
  border-radius:14px;padding:10px 12px;pointer-events:auto}
#mkLog h4{margin:0 0 7px;font-size:12px;letter-spacing:2px;color:var(--accent)}
.mk-turn{border-top:1px solid #3b3059;padding-top:6px;margin-top:6px}
.mk-turn:first-of-type{border:none;margin-top:0;padding-top:0}
.mk-tn{font-size:11px;letter-spacing:2px;color:var(--muted)}
.mk-line{font-size:13.5px;line-height:1.45;display:flex;gap:6px;align-items:baseline}
.mk-line .who{font-weight:bold;min-width:14px}
.mk-line.a .who{color:var(--sky)} .mk-line.b .who{color:var(--peach)}
.mk-line .op{font-family:var(--font-code)}
.mk-t{color:var(--muted)} .mk-yes{color:var(--good);font-weight:bold} .mk-no{color:var(--bad);font-weight:bold}
.mk-hit{color:var(--star);font-weight:bold} .mk-why{color:var(--muted);font-size:12.5px;font-style:italic}

/* the transport: play, step, scrub. A battle you cannot pause is a battle
   you cannot learn anything from. */
#mkBar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;
  gap:8px;align-items:center;background:rgba(15,22,36,.94);border:3px solid var(--line);
  border-radius:16px;padding:8px 12px;pointer-events:auto}
#mkBar button{background:var(--panel2);color:var(--text);border:none;border-radius:10px;
  padding:8px 12px;font-size:15px;font-weight:bold;box-shadow:0 3px 0 #221b36}
#mkBar button:active{transform:translateY(2px);box-shadow:0 1px 0 #221b36}
#mkBar button.on{background:var(--accent);color:#123045;box-shadow:0 3px 0 #5aa8d6}
#mkBar input[type=range]{width:min(260px,26vw);accent-color:var(--accent)}
#mkBar .sc{font-size:13px;color:var(--muted);min-width:74px;text-align:center}

#mkCount{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;background:rgba(20,14,34,.55)}
#mkCount .big{font-size:min(24vw,220px);font-weight:bold;color:var(--star);
  text-shadow:0 10px 40px rgba(0,0,0,.7);line-height:1;animation:mkpop .6s ease-out}
#mkCount .sub{font-size:22px;color:var(--text);letter-spacing:6px;margin-top:10px}
@keyframes mkpop{0%{transform:scale(2.2);opacity:0}45%{transform:scale(1);opacity:1}100%{opacity:1}}

/* Waiting for somebody to fight. Your program is already at the server, so
   this is the one screen in the game where the right thing to do is nothing
   — it says so, and it keeps both ways out in reach. */
#mkWait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,14,34,.62)}
#mkWait .card{background:rgba(15,22,36,.97);border:3px solid var(--line);border-radius:18px;
  padding:22px 26px;text-align:center;max-width:440px;pointer-events:auto}
#mkWait h3{margin:0 0 6px;font-size:20px;letter-spacing:3px;color:var(--star)}
#mkWait p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.5}
#mkWait .dots{font-size:34px;letter-spacing:8px;color:var(--accent);margin-bottom:10px}
#mkWait .dots i{animation:mkblink 1.2s infinite;font-style:normal}
#mkWait .dots i:nth-child(2){animation-delay:.2s}
#mkWait .dots i:nth-child(3){animation-delay:.4s}
@keyframes mkblink{0%,100%{opacity:.25}50%{opacity:1}}
#mkWait .row{display:flex;gap:10px;justify-content:center}

/* =====================================================================
   THE INTRO. Letterbox bars, one line of copy per cut, and a black flash
   on the cuts themselves — the three cheapest things that make ten
   seconds of 3D read as a film rather than as a demo somebody left on.
   Everything here is pointer-events:none except the way out.
   ===================================================================== */
#intro{position:fixed;inset:0;z-index:70;pointer-events:none;font-family:var(--font);
  transition:opacity .55s ease}
#intro.in-out{opacity:0}
#intro .in-bar{position:absolute;left:0;right:0;height:9vh;background:#05060f;
  animation:inbar .7s ease-out}
#intro .in-bar.top{top:0}
#intro .in-bar.bottom{bottom:0}
@keyframes inbar{from{height:0}to{height:9vh}}
#intro .in-cap{position:absolute;left:0;right:0;bottom:13vh;text-align:center;
  font-size:clamp(17px,2.5vw,30px);font-weight:bold;color:#eef3ff;letter-spacing:.6px;
  text-shadow:0 4px 24px rgba(0,0,0,.9);padding:0 8vw;opacity:0;transform:translateY(10px)}
#intro .in-cap.in-show{animation:incap 2.4s ease-out forwards}
@keyframes incap{
  0%{opacity:0;transform:translateY(10px)}
  12%{opacity:1;transform:translateY(0)}
  82%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-6px)}}
/* One line, always. A two-word title left to wrap sat across the middle
   of the closing shot in two big slabs, with the planet it is announcing
   behind them. It goes in the top third and stays on one line. */
#intro .in-title{position:absolute;left:0;right:0;top:14%;text-align:center;
  white-space:nowrap;
  font-family:var(--font);font-size:clamp(22px,5vw,64px);font-weight:bold;color:#ffe9a8;
  letter-spacing:.1em;text-shadow:0 12px 50px rgba(0,0,0,.85);opacity:0;
  transition:opacity .8s ease,transform .8s ease;transform:scale(1.12)}
#intro .in-title.in-show{opacity:1;transform:scale(1)}
#intro .in-skip{position:absolute;right:16px;bottom:calc(9vh + 14px);pointer-events:auto;
  background:rgba(15,22,36,.8);border:2px solid var(--line);color:var(--muted);
  border-radius:10px;padding:6px 14px;font-family:var(--font);font-size:13px;cursor:pointer}
#intro .in-skip:hover{color:var(--text);border-color:var(--accent)}
#intro .in-fade{position:absolute;inset:0;background:#05060f;opacity:0}
#intro .in-fade.in-flash{animation:inflash .34s ease-out}
@keyframes inflash{0%{opacity:1}100%{opacity:0}}


/* the console's third column while you are writing: the map you will fight
   on, what everything costs, and what your chassis is made of */
.mk-prev{display:grid;gap:2px;margin-bottom:10px}
.mk-prev i{aspect-ratio:1;border-radius:3px;background:#1b2740}
.mk-prev i.w{background:#5a4b85} .mk-prev i.e{background:var(--star)}
.mk-prev i.h{background:var(--bad)} .mk-prev i.a{background:var(--sky)}
.mk-prev i.b{background:var(--peach)}
.mk-cost{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.mk-cost span{font-size:12.5px;background:#1b2740;border:1px solid #3b3059;border-radius:8px;
  padding:3px 7px}
.mk-cost b{color:var(--star)}
.mk-stat{font-size:13px;color:var(--muted);line-height:1.6}
.mk-stat b{color:var(--text)}

/* damage, floating off the machine that took it. margin rather than
   transform, because the float animation owns transform already. */
.mkdmg{position:absolute;font-size:21px;font-weight:bold;color:var(--bad);
  text-shadow:0 2px 8px #000;margin-top:-10px;animation:mkfloat .86s ease-out forwards}
.mkdmg.them{color:var(--star)}
@keyframes mkfloat{0%{opacity:0;margin-top:0}18%{opacity:1}100%{opacity:0;margin-top:-58px}}
.mk-streak{color:var(--star)}
.mk-streak b{color:var(--star)}
/* the streak, in the log */
.mk-combo{color:var(--star);font-weight:bold}

/* somebody in your room just fought. An offer, not an interruption:
   a strip along the bottom that waits, rather than a card in the way. */
#mkOffer{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);display:flex;
  gap:10px;align-items:center;background:rgba(15,22,36,.95);border:3px solid var(--line);
  border-radius:14px;padding:8px 12px;pointer-events:auto;font-size:14px}
#mkOffer b{color:var(--star);letter-spacing:1.5px;font-size:12px}
#mkOffer span{color:var(--muted)}

/* the setup screen reuses .mis cards; this is only the extra row of stats */
.mk-pick{display:flex;gap:6px;justify-content:center;font-size:12px;color:var(--muted);
  margin-top:6px;flex-wrap:wrap}
.mk-pick b{color:var(--text)}

/* =====================================================================
   THE PIT. Pick a robot, then click the bit of him you want to give
   orders to. Two columns on a laptop, one on anything narrower, because
   a lab has whatever screens the lab has.
   ===================================================================== */
#pit{position:fixed;inset:0;z-index:60;background:#141024;overflow:auto;
  font-family:var(--font);padding:14px}
#pit .pit-wrap{max-width:1180px;margin:0 auto}
#pit h1{margin:0;font-size:26px;letter-spacing:4px;color:var(--star)}
#pit .pit-sub{color:var(--muted);font-size:14px;margin:4px 0 12px}

/* the two robots, side by side and measured on the same bars */
.pit-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media (max-width:760px){ .pit-pick{grid-template-columns:1fr} }
.pit-card{text-align:left;font-family:var(--font);color:var(--text);cursor:pointer;
  background:var(--panel2);border:3px solid var(--line);border-radius:16px;padding:12px 14px;
  border-left:10px solid var(--plate,#2f3f6b);transition:border-color .12s,transform .12s}
.pit-card:hover{border-color:var(--accent);border-left-color:var(--trim,#8fd3ff)}
.pit-card.on{border-color:var(--star);border-left-color:var(--trim,#8fd3ff);background:#2a2140}
.pit-cardtop{display:flex;align-items:center;gap:10px}
.pit-cardtop b{display:block;font-size:19px;letter-spacing:3px;color:var(--trim,#8fd3ff)}
.pit-cardtop small{display:block;font-size:11px;letter-spacing:1.5px;color:var(--muted)}
.pit-em{font-size:26px}
.pit-tick{margin-left:auto;color:var(--star);font-size:18px}
.pit-card p{margin:8px 0;font-size:13px;color:var(--muted);line-height:1.5}
.pit-bars{display:grid;gap:4px}
.pit-bar{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.5px;color:var(--muted)}
.pit-bar span{width:54px;flex:none}
.pit-bar i{flex:1;height:7px;border-radius:4px;background:#0f1626;overflow:hidden}
.pit-bar i b{display:block;height:100%;background:var(--trim,#8fd3ff)}

.pit-cols{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
@media (max-width:880px){ #pit .pit-cols{grid-template-columns:1fr} }
.pit-bot{background:var(--panel2);border:3px solid var(--line);border-radius:16px;padding:14px}
.pit-fig{display:grid;grid-template-columns:58px 1fr 58px;grid-template-rows:auto auto auto;
  gap:6px;justify-items:stretch;margin-bottom:10px}
.pit-part{width:100%;border:3px solid var(--line);border-radius:12px;background:#1d1730;
  color:var(--text);font-family:var(--font);padding:7px 4px;cursor:pointer;text-align:center}
.pit-part:hover{border-color:var(--accent)}
.pit-part.on{border-color:var(--trim,#8fd3ff);background:#2a2140}
.pit-part b{display:block;font-size:11px;letter-spacing:1.5px}
.pit-part .pit-n{font-size:11px;color:var(--muted);margin-top:3px}
.pit-part .pit-hp{font-size:11px;color:var(--trim,#8fd3ff);margin-top:2px;letter-spacing:1px}
.pit-head{grid-column:2}
.pit-larm{grid-column:1;grid-row:2}
.pit-core{grid-column:2;grid-row:2}
.pit-rarm{grid-column:3;grid-row:2}
.pit-legs{grid-column:2;grid-row:3}
.pit-key{font-size:12px;color:var(--muted);line-height:1.5}

.pit-code{background:var(--panel2);border:3px solid var(--line);border-radius:16px;padding:14px;
  min-height:420px}
.pit-codehead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.pit-codehead b{font-size:17px;letter-spacing:2px;color:var(--accent)}
.pit-codehead .pit-budget{margin-left:auto;font-size:12px;color:var(--muted)}
.pit-editor{display:grid;grid-template-columns:210px 1fr;gap:12px}
@media (max-width:700px){ .pit-editor{grid-template-columns:1fr} }
.pit-pal{display:flex;flex-direction:column;gap:6px}
.pit-pal h4{margin:6px 0 2px;font-size:11px;letter-spacing:2px;color:var(--muted)}
.pit-blk{border:none;border-radius:10px;padding:8px 10px;font-family:var(--font);font-size:13px;
  font-weight:bold;text-align:left;color:#231c33;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.pit-blk:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.pit-blk small{display:block;font-weight:normal;font-size:11px;opacity:.8}
.pit-prog{background:#100c1e;border-radius:12px;padding:10px;min-height:300px}
.pit-row{display:flex;align-items:center;gap:6px;margin:3px 0;font-size:13px}
.pit-row .pit-body{flex:1;display:flex;align-items:center;gap:6px;border-radius:9px;padding:7px 10px;
  color:#231c33;font-weight:bold;flex-wrap:wrap;font-size:13px;letter-spacing:1px}
.pit-row select,.pit-row input{font-family:var(--font);font-size:12px;border-radius:7px;
  border:2px solid rgba(0,0,0,.25);padding:2px 4px;background:#fff8;color:#231c33}
.pit-row .pit-x,.pit-row .pit-up,.pit-row .pit-dn{background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:13px;padding:2px 4px}
.pit-row .pit-x:hover{color:var(--bad)}
.pit-add{background:#1d1730;border:2px dashed #3b3059;color:var(--muted);border-radius:9px;
  font-family:var(--font);font-size:12px;padding:4px 10px;margin:3px 0;cursor:pointer}
.pit-add:hover,.pit-add.on{border-color:var(--star);color:var(--star)}
.pit-empty{color:var(--muted);font-size:13px;padding:8px 4px}
.pit-err{color:var(--bad);font-size:12px;margin-top:6px;line-height:1.6}
.pit-err .warn{color:var(--star)}
.pit-foot{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;align-items:center}
/* the worked examples, and the numbers in them worth changing */
.pit-temps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@media (max-width:820px){ .pit-temps{grid-template-columns:1fr} }
.pit-temp{text-align:left;font-family:var(--font);color:var(--text);cursor:pointer;
  background:#1d1730;border:3px solid var(--line);border-radius:14px;padding:10px 12px}
.pit-temp:hover{border-color:var(--accent)}
.pit-temp.on{border-color:var(--star);background:#2a2140}
.pit-temphead{display:flex;align-items:center;gap:8px}
.pit-temphead span:first-child{font-size:20px}
.pit-temphead b{font-size:14px;letter-spacing:2.5px;color:var(--star)}
.pit-temphead .pit-tick{margin-left:auto;color:var(--star);font-size:15px}
.pit-temp p{margin:6px 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.pit-teach{font-size:11px;letter-spacing:.5px;color:var(--accent);margin-bottom:6px}
.pit-tune{display:grid;gap:3px;border-top:2px solid var(--line);padding-top:6px}
.pit-tune div{display:flex;gap:8px;align-items:baseline;font-size:11.5px}
.pit-tune code{flex:none;background:#100c1e;border-radius:6px;padding:1px 6px;
  color:#ffd8a8;font-family:var(--font)}
.pit-tune span{color:var(--muted);line-height:1.45}

/* the referee's numbers — the half of the game the student cannot move */
.pit-rules{margin-top:12px;border:3px solid #4a3f7a;border-radius:14px;padding:10px 12px;
  background:#16112a;display:grid;gap:4px}
.pit-ruleshead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.pit-ruleshead b{font-size:12px;letter-spacing:2.5px;color:#ffb4a2}
.pit-rules div{display:flex;gap:8px;align-items:baseline;font-size:12px}
.pit-rules code{flex:none;min-width:104px;color:#ffb4a2;font-family:var(--font)}
.pit-rules span{color:var(--muted);line-height:1.5}

.pit-eg{background:#100c1e;border-left:4px solid #ffb4a2;border-radius:0 10px 10px 0;
  margin:10px 0;padding:10px 12px;font-family:var(--font);font-size:12.5px;line-height:1.7;
  color:var(--text);white-space:pre;overflow-x:auto}

/* =====================================================================
   THE RING. The fight is the 3D scene; this is everything drawn over it.
   Both robots' parts across the top, the clock between them, and down
   the left the thing the whole mode exists for — your own code's
   reasoning, printed as it happens.
   ===================================================================== */
#ring{position:fixed;inset:0;z-index:56;pointer-events:none;font-family:var(--font)}
.ring-side.foe{border-color:#5a3428}
.ring-side.foe .ring-name b{color:#ffb4a2}
.ring-p.sta i b{background:linear-gradient(90deg,#ffe9a8,#ffd8a8)}
.ring-p.low i b{background:var(--bad)}
.ring-banner{flex:none;align-self:center;background:rgba(16,12,30,.92);
  border:3px solid var(--star);border-radius:14px;padding:8px 18px;
  font-size:18px;letter-spacing:3px;color:var(--star);text-transform:uppercase}
#ringTop{position:absolute;top:10px;left:0;right:0;display:flex;align-items:flex-start;
  justify-content:center;gap:16px;padding:0 14px}
.ring-side{flex:1;max-width:340px;background:rgba(16,12,30,.82);border:3px solid var(--line);
  border-radius:14px;padding:8px 10px}
.ring-name{font-size:13px;letter-spacing:2px;color:var(--star);display:flex;gap:8px;align-items:baseline}
.ring-name small{font-size:10px;letter-spacing:1px;color:var(--muted)}
.ring-parts{display:grid;gap:3px;margin-top:5px}
.ring-p{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:1px;color:var(--muted)}
.ring-p span{width:52px;flex:none}
.ring-p i b{transition:width .08s linear}
.ring-p i{flex:1;height:8px;border-radius:4px;background:#0f1626;overflow:hidden}
.ring-p i b{display:block;height:100%;background:#a8e6cf;transition:width .12s linear}

/* your own code, thinking out loud */
#ringFeed{position:absolute;left:14px;top:150px;bottom:90px;width:290px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:3px}
.ring-line{background:rgba(16,12,30,.8);border-left:4px solid var(--line);border-radius:0 9px 9px 0;
  padding:4px 8px;font-size:11px;line-height:1.45;color:var(--muted)}
.ring-line b{color:var(--text)}
.ring-line.ev{border-left-color:#cdb4f6}
.ring-line.test{border-left-color:#a8e6cf}
.ring-line.act{border-left-color:#ffb4a2;color:var(--text)}
.ring-line.stall{border-left-color:var(--bad)}
.ring-part{font-size:9px;letter-spacing:1.5px;color:var(--accent);display:block}

#ringKeys{position:absolute;left:0;right:0;bottom:56px;text-align:center;font-size:12px;
  color:var(--muted);line-height:1.6}
#ringKeys b{color:var(--star)}

/* EVERY PANEL IN THE EDITOR HAS TO SWITCH POINTER EVENTS BACK ON.
   #coder covers the whole screen and is pointer-events:none so the game
   behind it stays usable; each panel inside it re-enables them for
   itself. A panel that forgets is not invisible and not broken-looking —
   it just quietly cannot be clicked, and the click lands on whatever is
   behind it. Both the tutor and the walkthrough card forgot, which cost
   the Ask box its text field and the walkthrough its skip link.

   ASK — the tutor, in the editor, because that is where being stuck is.
   Bottom-right over the script pane: near the blocks it is talking about,
   and not on top of the walkthrough card along the top. */
/* A WINDOW, not a panel bolted to a corner. It is dragged by its title
   bar, rolled up to that bar, and resized from its own corner — because
   pinned to the bottom right it sat on top of whichever block the
   walkthrough was pointing at, and the only way out was to close it.

   `resize:both` is the browser's own grip and wants an overflow that is
   not visible, which this already has. The minimums stop it being
   dragged down to a sliver nobody can find again. */
#tutor{position:absolute;right:10px;bottom:10px;width:min(370px,42vw);max-height:62%;
  min-width:250px;min-height:120px;resize:both;
  z-index:6;display:flex;flex-direction:column;pointer-events:auto;
  background:linear-gradient(180deg,#332a52,#2a2243);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.55);overflow:hidden}
/* while it is being dragged: no text selection, and no transition lag */
#tutor.moving{user-select:none;cursor:grabbing}
#tutor.moving *{cursor:grabbing}
/* ROLLED UP is the title bar and nothing else. min-height and the resize
   grip both have to stand down, or it springs back open. */
#tutor.rolled{height:auto!important;min-height:0;resize:none}
#tutor.rolled .tut-log,#tutor.rolled .tut-ask{display:none}
.tut-head{display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid var(--line);flex:none;cursor:grab;touch-action:none}
#tutor.rolled .tut-head{border-bottom:none}
.tut-head:active{cursor:grabbing}
.tut-head b{font-family:var(--font-disp);font-size:13px;letter-spacing:1.6px;color:var(--star)}
.tut-key{flex:1;font-size:10.5px;color:var(--muted);letter-spacing:.3px}
.tut-log{flex:1;overflow-y:auto;padding:10px 12px;display:grid;gap:8px;min-height:90px}
.tut-hello{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.tut-line{font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;
  padding:7px 10px;border-radius:11px}
.tut-line.you{background:var(--panel2);color:var(--text);justify-self:end;max-width:85%}
.tut-line.tutor{background:rgba(16,12,30,.6);border-left:3px solid var(--good);
  color:var(--text);max-width:95%}
/* a block named in an answer, drawn as the block. Inline, so it sits in
   the sentence rather than breaking it, and it does not stretch the way
   a palette block does. */
.tut-blk{display:inline-flex;width:auto;vertical-align:middle;margin:1px 2px;
  padding:2px 6px;font-size:11px;line-height:1.4;border-radius:7px}
.tut-blk.k-report,.tut-blk.k-bool{border-radius:11px}
.tut-blk .cslot{font-size:10px;padding:0 4px}
.tut-ask{display:flex;gap:6px;padding:9px 10px;border-top:1px solid var(--line);flex:none}
#tutIn{flex:1;background:rgba(16,12,30,.8);border:1px solid var(--line);border-radius:10px;
  padding:7px 10px;color:var(--text);font-family:var(--font-code);font-size:12px}
#tutIn:focus{outline:none;border-color:var(--star)}
#tutorBtn.hidden{display:none}

/* THE STAGE CARD — what this room wants, and how far you have got.
   Down the left, where the (never-populated) feed used to sit. The
   checklist is the load-bearing part: a row that ticks itself the
   instant the world satisfies it says which HALF is missing, which a
   goal sentence cannot. */
#ringStage{position:absolute;left:14px;top:112px;width:236px;pointer-events:auto;
  display:grid;gap:8px}

/* THE WAY IN, as a button and not a sentence about a key. A student who
   has to be told "press C" has been given a thing to remember; a button
   that glows when the walkthrough points at it has been given a thing to
   press. The key still works. */
#ringOpen{position:absolute;left:14px;top:60px;pointer-events:auto;
  background:var(--star);color:#241d38;border:0;border-radius:11px;
  padding:9px 15px;font-family:var(--font-disp);font-size:14px;letter-spacing:1.4px;
  font-weight:bold;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.45)}
#ringOpen small{opacity:.6;font-size:11px;margin-left:6px}

/* LOOKING STRAIGHT DOWN, which is the picture the language is named for:
   x across the screen, y up it, and the height pointing at you. Sits
   under the blocks button because they are the two things you do to the
   room rather than to the program. */
#ringFlat{position:absolute;left:14px;top:104px;pointer-events:auto;
  background:rgba(16,12,30,.85);color:var(--muted);border:1px solid var(--line);
  border-radius:11px;padding:7px 13px;font-family:var(--font-disp);font-size:12px;
  letter-spacing:1.3px;cursor:pointer;transition:background .12s,color .12s}
#ringFlat:hover{background:rgba(52,42,84,.95);color:var(--text)}
#ringFlat.on{background:var(--accent);color:#241d38;border-color:var(--accent);font-weight:bold}
/* the stage card moves down to make room for it */
#ringStage{top:150px}
/* ------------------------------------------------------ 2D or 3D
   THE FIRST SCREEN IN A LEVEL, AND IT HOLDS TWO THINGS. Everything the
   room normally puts on top of itself — the bars, the blocks button, the
   stage card, the axis legend, the walkthrough — stands down while this
   is up, because a choice between two things does not need a heads-up
   display around it and a nine-year-old reading five panels is a
   nine-year-old not making the choice.

   The room is still behind it, dimmed rather than hidden: the thing being
   chosen is how to LOOK at that room, and you can see it while you
   choose. */
#ringPick{position:absolute;inset:0;z-index:4;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,7,20,.72);backdrop-filter:blur(3px)}
.rp-row{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.rp{width:210px;padding:30px 18px 24px;display:grid;gap:7px;justify-items:center;
  background:rgba(22,17,40,.92);border:1px solid var(--line);border-radius:18px;
  color:var(--text);cursor:pointer;font-family:var(--font);
  transition:transform .12s,border-color .12s,background .12s}
.rp:hover,.rp:focus-visible{transform:translateY(-4px);border-color:var(--accent);
  background:rgba(38,30,68,.96);outline:none}
.rp-em{font-size:40px;line-height:1;color:var(--accent)}
.rp b{font-family:var(--font-disp);font-size:30px;letter-spacing:3px;color:var(--star)}
.rp small{font-size:12px;color:var(--muted);letter-spacing:.4px}
@media (max-width:620px){ .rp{width:150px;padding:22px 12px 18px} .rp-row{gap:16px} }
/* --------------------------------------------------------------- PONG
   A SCOREBOARD AND A WAY IN, and that is the whole overlay. The court is
   the scene, the paddles are objects, and everything else a student needs
   is in the editor — so the only things drawn on top are the score and
   the button that opens the blocks. */
#pong{position:fixed;inset:0;z-index:56;pointer-events:none;font-family:var(--font)}
#pongScore{position:absolute;left:50%;top:14px;transform:translateX(-50%);
  display:flex;align-items:center;gap:18px;padding:9px 20px;
  background:rgba(16,12,30,.82);border:1px solid var(--line);border-radius:13px;
  font-family:var(--font-disp);font-size:13px;letter-spacing:2px;color:var(--muted)}
#pongScore b{font-size:22px;letter-spacing:1px}
#pongScore .pg-you{color:#8fd3ff}
#pongScore .pg-them{color:#ffb4a2}
#pongScore .pg-mid{font-size:10.5px;letter-spacing:1.4px;opacity:.75}
#pongScore.pg-over{border-color:var(--star)}
#pongScore.pg-over .pg-mid{color:var(--star);opacity:1}
#pongOpen{position:absolute;left:14px;top:14px;pointer-events:auto;
  background:rgba(16,12,30,.85);color:var(--star);border:1px solid var(--line);
  border-radius:11px;padding:9px 15px;font-family:var(--font-disp);font-size:13px;
  letter-spacing:1.6px;cursor:pointer}
#pongOpen:hover{background:rgba(52,42,84,.95)}
#pongOpen small{color:var(--muted);margin-left:7px;letter-spacing:1px}
#pongAxes{position:absolute;right:14px;bottom:70px;display:grid;gap:5px;
  padding:9px 12px;background:rgba(16,12,30,.78);border:1px solid var(--line);
  border-radius:11px;font-size:11px;color:var(--muted)}
/* HOW FAR THROUGH, as dots rather than a number — it says "nearly there"
   at a glance and costs no reading. */
.ring-stage-dots{display:flex;gap:4px;flex-wrap:wrap}
.ring-stage-dots i{width:9px;height:9px;border-radius:50%;background:var(--line);
  transition:background .15s,transform .15s}
.ring-stage-dots i.on{background:var(--good)}
.ring-stage-dots i.now{background:var(--star);transform:scale(1.35)}
.ring-stage-card{background:rgba(16,12,30,.86);border:1px solid var(--line);
  border-left:4px solid var(--a);border-radius:12px;padding:10px 12px;display:grid;gap:7px}
.ring-stage-head{display:flex;align-items:center;gap:8px}
.ring-stage-em{font-size:19px}
.ring-stage-head b{display:block;font-size:13px;letter-spacing:1.2px;color:var(--text)}
.ring-stage-head small{display:block;font-size:10px;letter-spacing:.6px;color:var(--a)}
#ringNext{justify-self:start}

/* THE FIVE MISSIONS, as a row you pick from. */
/* an empty rule sheet is not a thin empty box */
.pit-rules:empty{display:none}
.pit-missions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;
  margin-top:14px}
.pit-mis{position:relative;text-align:left;background:rgba(16,12,30,.7);
  border:1px solid var(--line);border-left:4px solid var(--a);border-radius:12px;
  padding:10px 12px;cursor:pointer;color:var(--muted);font-family:inherit;
  display:grid;gap:2px;transition:background .12s,border-color .12s}
.pit-mis:hover{background:rgba(40,32,66,.9)}
.pit-mis.on{background:rgba(52,42,84,.95);border-color:var(--star)}
.pit-mis-n{position:absolute;right:10px;top:8px;font-family:var(--font-code);
  font-size:11px;color:var(--line)}
.pit-mis.on .pit-mis-n{color:var(--star)}
.pit-mis-em{font-size:17px}
.pit-mis b{font-size:12.5px;letter-spacing:1.1px;color:var(--text)}
.pit-mis small{font-size:10.5px;line-height:1.35;color:var(--muted)}

/* WHICH LETTER IS WHICH DIRECTION. The arrows on the floor say it in the
   room; this says it in words, because an arrow pointing at the camera is
   a dot and a dot explains nothing. Bottom right, out of the feed's way. */
#ringAxes{position:absolute;right:14px;bottom:86px;background:rgba(16,12,30,.8);
  border:1px solid var(--line);border-radius:11px;padding:7px 10px;display:grid;gap:4px}
.ring-ax{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);
  letter-spacing:.5px}
.ring-ax i{width:14px;height:3px;border-radius:2px;flex:none}
.ring-ax b{color:var(--text);font-family:var(--font-code);width:8px;flex:none}

/* ---------- THE ENGINEER'S TRAIL ---------------------------------------
   A machine inspector that is NOT an IDE. Everything in here is trying to
   say one thing: a condition is a question, it has two answers, and one of
   them is happening right now. So the source pane is small and the FLOW —
   condition, arrow, true side, false side — is the biggest thing on the
   card, and the side that is live is the side that is lit.

   It is a column down the left rather than a screen over everything,
   because the other half of the lesson is watching the district obey: the
   gate has to be visible, opening, while its rule is still on the screen. */
#insp{position:fixed;left:14px;top:14px;bottom:14px;width:min(560px,48vw);z-index:60;
  display:flex;align-items:flex-start;pointer-events:auto}
/* as tall as it needs and no taller: a two-line conversation in a card the
   height of the window is a card that looks broken */
.mi-card{display:flex;flex-direction:column;width:100%;max-height:100%;
  background:rgba(13,19,34,.97);border:3px solid var(--line);border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden}
.mi-head{display:flex;align-items:center;gap:10px;padding:11px 12px;
  background:linear-gradient(180deg,#2a2141,#211a36);border-bottom:3px solid var(--line)}
.mi-em{font-size:26px;line-height:1}
.mi-id{flex:1;min-width:0}
.mi-id b{display:block;font-family:var(--font-disp);font-size:15px;letter-spacing:.06em;
  color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-id span{display:block;font-size:12.5px;color:var(--muted);line-height:1.35}
.mi-chip{font-size:11px;font-weight:bold;letter-spacing:.12em;padding:4px 9px;border-radius:999px;
  border:2px solid var(--line);background:#111a29;color:var(--muted);white-space:nowrap}
.mi-chip.active{color:var(--sky);border-color:var(--sky)}
.mi-chip.unlocked{color:var(--good);border-color:var(--good)}
.mi-chip.locked{color:var(--warn);border-color:var(--warn)}
.mi-chip.alert,.mi-chip.error{color:var(--bad);border-color:var(--bad)}
.mi-x{background:none;border:none;color:var(--muted);font-size:17px;padding:2px 5px;border-radius:7px}
.mi-x:hover{color:var(--text);background:#31284c}
.mi-tabs{display:flex;gap:4px;padding:8px 10px 0;background:#1a1430}
.mi-tabs button{flex:1;background:#221b36;color:var(--muted);border:2px solid transparent;
  border-bottom:none;border-radius:10px 10px 0 0;padding:7px 6px;font-size:11.5px;
  font-weight:bold;letter-spacing:.08em}
.mi-tabs button.on{background:rgba(13,19,34,.97);color:var(--star);border-color:var(--line)}
.mi-body{flex:1;overflow-y:auto;padding:12px 13px 18px}
.mi-lead{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--text);
  border-left:4px solid var(--star);padding-left:10px}
.mi-sec{margin:0 0 14px}
.mi-sec h4{margin:0 0 7px;font-size:11px;letter-spacing:.16em;color:var(--muted);font-weight:bold}
.mi-n{color:var(--star)}
.mi-note{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.mi-note.good{color:var(--good)}

/* THE RULE, IN THE BLOCKS THE GAME ALREADY SPEAKS.

   Built from the console's own .blk / .blk.rep — head, mouth, foot — so a
   student reads a rule here the same way they read a script they wrote
   themselves. The console's blocks are sized for a full-screen editor, so
   everything below is scoped under #insp and scaled to a side panel; none
   of it touches the editor.

   The Booleans inside a head are pills that LIGHT when that reading is
   true right now, and an and/or is a block round two of them that lights
   when it comes out true. Flipping a switch makes the truth travel up the
   condition in front of you — which is `and` and `or` taught in colour
   rather than in a paragraph. */
#insp .tb-rule{display:flex;flex-direction:column;gap:5px}
#insp .tb-br{--c:#a8e6cf;margin:0}
#insp .tb-br .blk-head{padding:7px 10px;font-size:13.5px;gap:6px;color:#18332a;
  flex-wrap:wrap;align-items:center}
#insp .tb-br .blk-head b{font-family:var(--font-code);font-weight:bold;letter-spacing:.02em}
#insp .tb-br .blk-body{margin-left:16px;border-left-width:7px;padding:6px 0 6px 9px;
  background:rgba(168,230,207,.07)}
#insp .tb-br .blk-foot{height:11px}
#insp .blk.tb-act{--c:#2e3a5c;font-size:13px;padding:6px 10px;margin:0;color:#cfe0ff;
  font-family:var(--font-code);box-shadow:0 2px 0 rgba(0,0,0,.35);display:inline-flex}

/* a reading, and whether it is true at this moment */
#insp .tb-b{display:inline-block;font-family:var(--font-code);font-size:12.5px;
  background:rgba(255,255,255,.62);color:#3a3357;border-radius:999px;padding:2px 9px;
  border:2px solid transparent;transition:background .12s,color .12s,border-color .12s}
#insp .tb-b.t{background:#18332a;color:#8ff0c0;border-color:#4fd39a}
/* and / or, which is a block holding two of them */
#insp .tb-op{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
  background:rgba(0,0,0,.14);border-radius:999px;padding:2px 6px}
#insp .tb-op.t{background:rgba(24,51,42,.55)}
#insp .tb-op i{font-style:normal;font-family:var(--font-code);font-size:11.5px;
  font-weight:bold;color:#2b4a3c;letter-spacing:.06em}
#insp .tb-op.t i{color:#8ff0c0}

/* which way this test went, last time it was asked */
#insp .tb-mark{margin-left:auto;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:#2b4a3c;opacity:.72;white-space:nowrap}
#insp .tb-br.ran{box-shadow:0 0 0 2px var(--good)}
#insp .tb-br.ran .tb-mark{opacity:1;color:#18332a}
#insp .tb-br.no{opacity:.62}
#insp .tb-br.skip{opacity:.34}
#insp .tb-br.skip .tb-mark{font-style:italic}

/* the handles that move a line, in the head of the block they move */
.lmv{display:flex;gap:3px;margin-left:6px}
.lmv button{background:rgba(0,0,0,.22);border:none;color:#18332a;border-radius:6px;
  font-size:10px;line-height:1;padding:5px 7px}
.lmv button:disabled{opacity:.28}
.lmv button:not(:disabled):hover{background:rgba(0,0,0,.4);color:#fff}

/* every combination, worked */
.mi-tbl{margin-top:10px;overflow-x:auto;border:2px solid #2b2350;border-radius:11px}
.mi-tbl table{border-collapse:collapse;width:100%;font-size:11.5px}
.mi-tbl th{background:#1a1430;color:var(--muted);padding:6px 8px;text-align:left;
  font-weight:bold;letter-spacing:.06em;white-space:nowrap}
.mi-tbl td{padding:5px 8px;border-top:1px solid #2b2350;white-space:nowrap}
.mi-tbl td.t{color:var(--good)} .mi-tbl td.f{color:#6f7aa0}
.mi-tbl code{font-size:11.5px;color:#b9c6e8}

/* the answer */
.mi-res{background:#101a2e;border:2px solid var(--good);border-radius:12px;padding:10px 12px}
.mi-res.none{border-color:#4a3f6b}
.mi-res code{font-size:15px;color:var(--good)}
.mi-res.none code{color:var(--muted)}
.mi-res p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--text)}
.mi-res .mi-world{color:var(--star);font-size:12.5px}
.mi-wait .mi-note{margin:0}
.mi-log{margin:0;padding:9px 11px;background:#0a1020;border:2px solid #4a3f6b;border-radius:11px;
  font-size:12px;color:var(--warn);white-space:pre-wrap;word-break:break-word}
.mi-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mi-hist li{font-size:11.5px;color:var(--muted);background:#141d33;border-radius:8px;padding:5px 8px}
.mi-hist i{font-style:normal;font-family:var(--font-code);padding:1px 5px;border-radius:5px;
  margin-right:4px;background:#221b36}
.mi-hist i.t{color:var(--good)} .mi-hist i.f{color:#6f7aa0}
.mi-hist code{color:#b9c6e8}

/* the terminal's readings, which are the notebook rather than switches */
.mi-reads{display:flex;flex-direction:column;gap:6px}
.mi-read{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;
  background:#141d33;border:2px solid #2b2350;border-radius:11px;padding:7px 9px;opacity:.6}
.mi-read.on{opacity:1;border-color:var(--good)}
.mi-read i{width:9px;height:9px;border-radius:50%;background:#4a3f6b}
.mi-read.on i{background:var(--good);box-shadow:0 0 8px var(--good)}
.mi-read code{font-size:13px;color:#b9c6e8}
.mi-read b{font-size:11.5px;color:var(--muted)}
.mi-read.on b{color:var(--good)}
.mi-read small{grid-column:2/-1;font-size:11px;color:var(--muted)}

/* talking to somebody */
.dl-say{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--text);font-style:italic;
  border-left:4px solid var(--sky);padding-left:10px}
.dl-ans{background:#101a2e;border:2px solid #2b2350;border-radius:12px;padding:10px 12px;margin-bottom:13px}
.dl-q{font-size:11px;letter-spacing:.1em;color:var(--star);margin-bottom:5px}
.dl-ans p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text)}
.dl-qs{display:flex;flex-direction:column;gap:6px}
.dl-b{text-align:left;background:#221b36;color:var(--text);border:2px solid #3b3059;
  border-radius:11px;padding:9px 11px;font-size:13px;line-height:1.4}
.dl-b:hover{border-color:var(--star)}
.dl-b.done{color:var(--muted);border-style:dashed}
.fi-body{margin:0;font-size:14px;line-height:1.6;color:var(--text)}

/* the night, in order */
.tl{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:6px;
  counter-reset:tl}
.tlrow{display:flex;align-items:center;gap:9px;background:#101a2e;border:2px solid #2b2350;
  border-radius:12px;padding:8px 10px}
.tlrow::before{counter-increment:tl;content:counter(tl);font-family:var(--font-disp);
  color:var(--star);font-size:15px;width:16px;text-align:center}
.tlem{font-size:20px}
.tltx{flex:1;min-width:0}
.tltx b{display:block;font-size:12.5px;color:var(--text)}
.tltx span{display:block;font-size:11.5px;color:var(--muted);line-height:1.4}
.tlmv{display:flex;flex-direction:column;gap:2px}
.tlmv button{background:#221b36;border:1px solid #3b3059;color:var(--muted);border-radius:5px;
  font-size:9px;padding:3px 6px}
.tlmv button:disabled{opacity:.3}
.tl-done{margin-top:11px;border-top:2px solid #2b2350;padding-top:9px}
.tl-row{font-size:12.5px;color:var(--muted);padding:3px 0}
.tl-row b{color:var(--star);font-family:var(--font-code);margin-right:6px}

/* naming somebody */
.sus{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:11px}
.susb{text-align:left;background:#221b36;color:var(--text);border:2px solid #3b3059;
  border-radius:12px;padding:9px 10px}
.susb b{display:block;font-size:12.5px}
.susb small{display:block;font-size:11px;color:var(--muted);line-height:1.35;margin-top:3px}
.susb.on{border-color:var(--star)}
.susb.right{border-color:var(--good);background:#16342a}
.sus-why{border-radius:12px;padding:10px 12px;border:2px solid}
.sus-why.yes{border-color:var(--good);background:rgba(168,230,207,.08)}
.sus-why.no{border-color:var(--warn);background:rgba(255,216,168,.07)}
.sus-why b{display:block;font-size:13px;margin-bottom:5px}
.sus-why.yes b{color:var(--good)} .sus-why.no b{color:var(--warn)}
.sus-why p{margin:0;font-size:13px;line-height:1.55;color:var(--text)}

/* the map's key: three swatches rather than three words, because the map
   itself is three colours and a word cannot show a colour */
#maplegend i{display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:4px;vertical-align:middle}
#maplegend span{display:inline-block;margin:0 5px;white-space:nowrap}

/* WHERE TO GO NEXT — the first row of the objective panel, because
   "which way" and "what am I doing" are one question. An arrow that turns
   as you turn, the name of the place, and how far. It answers neither
   what the rule is nor what the answer is; a district of rooms and
   corridors simply must not be a maze on top of being a mystery. */
#tAim{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:6px 10px;
  background:#111a29;border:2px solid var(--line);border-radius:10px;
  font-size:13.5px;color:var(--text)}
#tAim i{width:17px;height:17px;flex:none;background:var(--star);
  clip-path:polygon(50% 0,100% 100%,50% 76%,0 100%);   /* a chevron */
  transition:transform .12s linear}
#tAim b{flex:1;letter-spacing:.05em;font-size:12.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#tAim span{color:var(--star);font-variant-numeric:tabular-nums;font-size:12.5px}

/* ---------- the notebook ---------- */
#tnote{position:fixed;right:14px;top:14px;bottom:14px;width:min(400px,40vw);z-index:61;
  display:flex;pointer-events:auto}
.nb-card{display:flex;flex-direction:column;width:100%;background:rgba(13,19,34,.97);
  border:3px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.55);
  overflow:hidden}
.nb-head{display:flex;align-items:center;gap:9px;padding:11px 12px;
  background:linear-gradient(180deg,#2a2141,#211a36);border-bottom:3px solid var(--line)}
.nb-head b{font-family:var(--font-disp);font-size:14px;letter-spacing:.1em}
.nb-head span{flex:1;font-size:11.5px;color:var(--muted)}
.nb-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:9px 10px;border-bottom:2px solid #2b2350}
.nb-tabs button{background:#221b36;color:var(--muted);border:2px solid transparent;border-radius:9px;
  padding:5px 8px;font-size:10.5px;font-weight:bold;letter-spacing:.07em}
.nb-tabs button.on{color:var(--star);border-color:var(--star)}
.nb-list{list-style:none;margin:0;padding:11px 12px 18px;overflow-y:auto;flex:1;
  display:flex;flex-direction:column;gap:8px}
.nb-list li{background:#141d33;border:2px solid #2b2350;border-left-width:5px;
  border-radius:11px;padding:8px 10px}
.nb-list li b{display:block;font-size:12.5px;color:var(--star);margin-bottom:4px}
.nb-list li p{margin:0;font-size:12.5px;line-height:1.55;color:var(--text)}
/* a rule filed in the notebook is the same blocks it is on the machine,
   scaled down — the whole reason to draw one is to be able to compare it
   with the one filed under it */
.nb-rule{margin:0 0 7px}
.nb-rule .tb-rule{gap:4px}
.nb-rule .tb-br{--c:#a8e6cf}
.nb-rule .tb-br .blk-head{padding:5px 8px;font-size:12px;gap:5px;color:#18332a;flex-wrap:wrap}
.nb-rule .tb-br .blk-body{margin-left:13px;border-left-width:6px;padding:5px 0 5px 7px;
  background:rgba(168,230,207,.07)}
.nb-rule .tb-br .blk-foot{height:9px}
.nb-rule .blk.tb-act{--c:#2e3a5c;font-size:11.5px;padding:5px 8px;margin:0;color:#cfe0ff;
  font-family:var(--font-code);display:inline-flex;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.nb-rule .tb-b{display:inline-block;font-family:var(--font-code);font-size:11.5px;
  background:rgba(255,255,255,.62);color:#3a3357;border-radius:999px;padding:1px 7px}
.nb-rule .tb-op{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;
  background:rgba(0,0,0,.14);border-radius:999px;padding:1px 5px}
.nb-rule .tb-op i{font-style:normal;font-family:var(--font-code);font-size:11px;
  font-weight:bold;color:#2b4a3c}
/* the notebook styles every <b> in an entry as its star-coloured heading,
   which caught the if/elif/else keyword inside a block head and left it
   mint on mint. A keyword is part of the block, not a heading. */
.nb-rule .blk-head b{display:inline;margin:0;font-size:12px;color:#18332a;
  font-family:var(--font-code);letter-spacing:.02em}
.nb-rule .tb-mark,.nb-rule .lmv{display:none}   /* no verdicts, no handles: it is a record */
.nb-list li .nb-hint{color:var(--muted);margin-top:5px}
.nb-list li.nb-done{opacity:.55;border-left-color:var(--good)}
.nb-list li.nb-done b{color:var(--good);margin:0}
.nb-list li.nb-none{color:var(--muted);font-size:12.5px;border-left-color:#2b2350}

/* something filed itself: one line, no interruption */
#tToast{position:fixed;left:50%;bottom:112px;transform:translate(-50%,14px);z-index:62;
  background:rgba(13,19,34,.96);border:2px solid var(--star);border-radius:12px;
  padding:8px 14px;font-size:13px;color:var(--text);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;max-width:min(520px,80vw)}
#tToast.on{opacity:1;transform:translate(-50%,0)}
#tToast b{color:var(--star);font-size:11px;letter-spacing:.12em;margin-right:7px}

/* the debrief. Capped and scrolled: the results card does not scroll
   itself, so six lessons and a timeline pushed the title and the button
   clean off the top and bottom of the screen. */
.db{text-align:left;max-height:min(44vh,400px);overflow-y:auto;padding-right:4px}
.db-h{font-size:11px;letter-spacing:.16em;color:var(--star);margin:12px 0 6px}
.db-row{background:#111a29;border-left:4px solid var(--line);border-radius:9px;
  padding:7px 10px;margin-bottom:5px}
.db-row b{display:block;font-size:13px;color:var(--text)}
.db-row span{display:block;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:3px}

@media (max-width:900px){
  #insp{width:calc(100% - 28px)}
  #tnote{width:calc(100% - 28px)}
  .sus{grid-template-columns:1fr}
}



/* ------------------------------------------------------------- the phone
   Where the chat box was: bottom left, over the key list. A phone-shaped
   thing, because it is one — rounded, a notch, a home bar, bubbles. */
#phoneBtn{position:fixed;left:14px;bottom:18px;z-index:30;width:54px;height:54px;border-radius:16px;
  border:2px solid var(--line);background:rgba(29,23,48,.94);color:var(--text);font-size:26px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35)}
#phoneBtn:hover{border-color:var(--accent)}
#phoneBtn.hidden{display:none}
#phoneBtn .ph-badge{position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:#ff4f6d;color:#fff;font:700 12px/22px var(--font,inherit);box-shadow:0 0 0 2px var(--ink)}
#phoneBtn .ph-badge.dot{min-width:12px;width:12px;height:12px;padding:0;top:-3px;right:-3px}
#phoneBtn .ph-badge.hidden{display:none}
#phoneBtn.ring .ph-ico{display:inline-block;animation:phRing 1.6s ease-in-out infinite}
@keyframes phRing{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-14deg)}80%{transform:rotate(12deg)}85%{transform:rotate(-10deg)}90%{transform:rotate(8deg)}}

#phone{position:fixed;left:14px;bottom:14px;z-index:60;width:330px;height:min(600px,calc(100vh - 28px));
  background:#0f0c1c;border:3px solid #3b3059;border-radius:34px;box-shadow:0 18px 50px rgba(0,0,0,.55);
  display:flex;flex-direction:column;overflow:hidden;color:var(--text)}
#phone.hidden{display:none}
#phone .ph-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px 4px;font-size:12px;opacity:.85}
#phone .ph-notch{width:86px;height:18px;border-radius:0 0 12px 12px;background:#000;margin-top:-10px}
#phone .ph-screen{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 12px}
#phone .ph-head{display:flex;align-items:center;gap:8px;padding:8px 2px 10px;border-bottom:1px solid #2a2342}
#phone .ph-head b{font-size:17px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#phone .ph-head small{font-weight:400;color:var(--muted);font-size:12px}
#phone .ph-new,#phone .ph-back{background:none;border:none;color:var(--accent);font:inherit;font-size:14px;cursor:pointer;padding:4px 6px}
#phone .ph-back{font-size:26px;line-height:1}
#phone .ph-threads{overflow:auto;flex:1}
#phone .ph-th{display:flex;gap:10px;align-items:center;width:100%;padding:9px 4px;background:none;border:none;
  border-bottom:1px solid #1d1830;color:inherit;text-align:left;cursor:pointer;font:inherit}
#phone .ph-th:hover{background:#1a1530}
#phone .ph-av{width:38px;height:38px;border-radius:50%;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
#phone .ph-mid{flex:1;min-width:0;display:flex;flex-direction:column}
#phone .ph-mid small{color:var(--muted);font-size:11px}
#phone .ph-mid i{font-style:normal;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#phone .ph-th.unread .ph-mid i{color:var(--text);font-weight:600}
#phone .ph-meta{font-size:11px;color:var(--muted);display:flex;flex-direction:column;align-items:flex-end;gap:4px}
#phone .ph-meta em{font-style:normal;background:#ff4f6d;color:#fff;border-radius:10px;padding:1px 7px;font-weight:700}
#phone .ph-empty{color:var(--muted);text-align:center;padding:26px 10px;font-size:14px;line-height:1.5}
#phone .ph-empty.small{padding:10px;font-size:12px}
#phone .ph-to{display:flex;align-items:center;gap:6px;padding:12px 4px;border-bottom:1px solid #2a2342;color:var(--muted)}
#phone .ph-to span{color:var(--text)}
#phone .ph-who{flex:1;background:#1a1530;border:1px solid var(--line);border-radius:10px;padding:8px;color:var(--text);font:inherit}
#phone .ph-pick{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid #1d1830;color:inherit;
  padding:10px 4px;font:inherit;cursor:pointer}
#phone .ph-pick:hover{background:#1a1530}
#phone .ph-pick small{color:var(--muted)}
#phone .ph-err{color:var(--bad);font-size:12px;min-height:14px;padding:2px 4px}
#phone .ph-msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:10px 2px}
#phone .ph-bub{max-width:78%;align-self:flex-start;background:#2a2342;border-radius:16px 16px 16px 4px;padding:7px 11px;
  font-size:14px;line-height:1.35;word-wrap:break-word}
#phone .ph-bub.me{align-self:flex-end;background:#3a7bd5;border-radius:16px 16px 4px 16px}
#phone .ph-bub small{display:block;font-size:10px;opacity:.6;margin-top:2px}
#phone .ph-bub b{color:var(--mint);margin-right:4px}
#phone .ph-sys{align-self:center;color:var(--muted);font-size:12px;font-style:italic}
#phone .ph-compose{display:flex;gap:6px;padding:8px 12px 4px}
#phone .ph-compose.hidden{display:none}
#phone #chatIn{flex:1;padding:9px 13px;border-radius:18px;border:1px solid var(--line);background:#1a1530;color:var(--text);font:inherit;font-size:14px}
#phone .ph-send{width:38px;border-radius:50%;border:none;background:#3a7bd5;color:#fff;font-size:16px;cursor:pointer}
#phone .ph-foot{font-size:10.5px;color:var(--muted);text-align:center;padding:4px 12px 2px}
#phone .ph-home{display:flex;justify-content:center;padding:6px 0 10px}
#phone .ph-homebtn{width:110px;height:5px;border-radius:3px;background:#6e6590;border:none;cursor:pointer}

#phoneToast{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:70;display:flex;gap:10px;align-items:center;
  background:rgba(20,16,36,.96);border:1px solid var(--line);border-radius:16px;padding:10px 16px;max-width:360px;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.45);animation:phDrop .3s ease-out}
#phoneToast.hidden{display:none}
#phoneToast span{font-size:22px}
#phoneToast small{color:var(--muted)}
#phoneToast i{display:block;font-style:normal;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
@keyframes phDrop{from{transform:translate(-50%,-20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
#phone .ph-call{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 6px;border-radius:10px}
#phone .ph-call:hover{background:#1a1530}

/* ------------------------------------------------- open mics (voice.js)
   Beside the phone. The ring grows with your own voice so you can see the
   mic is hearing you. */
#voiceBtn{position:fixed;left:76px;bottom:18px;z-index:30;width:54px;height:54px;border-radius:16px;border:1px solid var(--line);
  background:rgba(20,16,36,.92);color:#fff;font-size:22px;cursor:pointer;--lvl:0;
  box-shadow:0 0 0 calc(var(--lvl) * 7px) rgba(62,207,142,.45)}
#voiceBtn.hidden{display:none}
#voiceBtn.live{border-color:#3ecf8e}
#voiceBtn.off{opacity:.75}
#voiceBtn.bad{border-color:var(--bad)}
#voiceBtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#voiceNear{position:fixed;left:140px;bottom:22px;z-index:30;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100vw - 160px);pointer-events:none}
#voiceNear.hidden{display:none}
#voiceNear span{background:rgba(20,16,36,.88);border:1px solid var(--line);border-radius:12px;padding:5px 10px;font-size:13px;color:var(--muted)}
#voiceNear span.talking{color:var(--text);border-color:#3ecf8e}

/* ---------------------------------------------------------- a call (call.js)
   One strip at the top of the screen, there whether the phone is open or not. */
#callBar{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:75;display:flex;gap:12px;align-items:center;
  width:min(380px,calc(100vw - 32px));background:rgba(20,16,36,.97);border:1px solid var(--line);border-radius:20px;
  padding:10px 12px 10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:phDrop .3s ease-out}
#callBar.hidden{display:none}
#callBar[data-phase=incoming]{border-color:#3ecf8e}
#callBar .cb-av{width:40px;height:40px;border-radius:50%;background:var(--panel2);display:flex;align-items:center;justify-content:center;
  font-weight:700;flex:none}
#callBar[data-phase=incoming] .cb-av,#callBar[data-phase=ringing] .cb-av{animation:phRing 1.6s ease-in-out infinite}
#callBar .cb-mid{flex:1;min-width:0;display:flex;flex-direction:column}
#callBar .cb-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#callBar .cb-name small{font-weight:400;color:var(--muted);font-size:12px}
#callBar .cb-state{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
#callBar .cb-btns{display:flex;gap:8px}
#callBar .cb-btns button{width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;font-size:17px;color:#fff;background:#2a2342}
#callBar .cb-btns button.hidden{display:none}
#callBar .cb-yes{background:#2fae74 !important}
#callBar .cb-no{background:#e0445e !important}
#callBar .cb-mute.on{background:#6e6590}
#callBar .cb-btns button:hover{filter:brightness(1.15)}
#callBar .cb-btns button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}


/* ---------------------------------------------------- a clear screen
   The mission list, the keys and the top bar live on the pause card now
   (game.js cleanHud / pauseTools). !important because a dozen rooms toggle
   .hidden on these for their own reasons, and none of them should be able
   to put them back over the game. The mission panel returns only where it
   is a live scoreboard (body.hud-live). */
#hud #keys, #hud #topbar{display:none !important}
body:not(.hud-live) #hud #objectives{display:none !important}
#briefing{transition:opacity .8s}
#briefing.brief-faded{opacity:0;pointer-events:none}
#pause .p-tools{display:flex;flex-wrap:wrap;gap:6px}
#pause .p-tools kbd{font-size:10px;opacity:.7;margin-left:2px}

/* ---------- chat rooms ----------------------------------------------
   THE LIST is a card over the middle: you are reading names and typing one
   in, and the room behind you is not the thing you are looking at. THE
   BUILDER is a strip along the bottom, like the quick change, because there
   you ARE looking at the thing you are changing — it is standing in the
   room in front of you. */
#rooms{position:fixed;inset:0;z-index:62;display:flex;align-items:center;
  justify-content:center;background:rgba(8,10,18,.72)}
#rooms.hidden{display:none}
.roomcard{width:min(720px,94vw);max-height:84vh;overflow:auto;
  border:3px solid var(--line);border-radius:18px;background:var(--panel);
  padding:16px 18px 14px;box-shadow:0 18px 60px rgba(0,0,0,.5)}
.roomcard h2{margin:0 0 12px;font-size:16px;letter-spacing:2px;color:var(--sky)}
.rm-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.rm-tab,.rm-acc,.rm-t,.rm-new,.rm-back{font-family:var(--font);cursor:pointer;
  border:2px solid var(--line);border-radius:10px;background:var(--panel2);
  color:var(--muted);padding:6px 11px;font-size:13px}
.rm-tab.on,.rm-acc.on{border-color:var(--sky);color:var(--text);background:#3f3566}
.rm-tab:hover,.rm-acc:hover,.rm-t:hover,.rm-new:hover,.rm-back:hover{color:var(--text)}
.rm-card{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  font-family:var(--font);cursor:pointer;margin-bottom:7px;padding:8px 10px;
  border:2px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text)}
.rm-card:hover{border-color:var(--sky)}
.rm-swatch{width:30px;height:30px;border-radius:8px;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.18)}
.rm-body{display:flex;flex-direction:column;min-width:0}
.rm-body b{font-size:14px}
.rm-body small,.rm-note,.rm-empty,.rm-hint{color:var(--muted);font-size:12px}
.rm-live{color:var(--mint)}
.rm-empty{padding:16px 4px;text-align:center}
.rm-note{margin:6px 0 10px}
.rm-hint{margin-top:12px;text-align:center;opacity:.75}
.rm-find,.rm-name{display:flex;gap:8px;margin-bottom:10px}
.rm-find input,.rm-name input,.roomcard input[type=text]{flex:1;font-family:var(--font);
  font-size:13px;padding:7px 9px;border-radius:10px;border:2px solid var(--line);
  background:#1d1834;color:var(--text)}
.rm-find button,.rm-name button{font-family:var(--font);cursor:pointer;font-size:13px;
  padding:7px 12px;border-radius:10px;border:2px solid var(--line);
  background:var(--panel2);color:var(--text)}
.rm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:6px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.rm-members{list-style:none;margin:0 0 10px;padding:0}
.rm-members li{display:flex;align-items:center;gap:8px;padding:5px 2px;font-size:13px}
.rm-members small{color:var(--muted)}
.rm-kick{margin-left:auto;font-family:var(--font);font-size:11px;cursor:pointer;
  border:2px solid var(--line);border-radius:8px;background:transparent;
  color:var(--bad);padding:3px 8px}
.rm-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.rm-acts button{font-family:var(--font);cursor:pointer;font-size:13px;padding:8px 14px;
  border-radius:11px;border:2px solid var(--line);background:var(--panel2);color:var(--text)}
.rm-go{border-color:var(--mint)!important;color:var(--mint)!important}
.rm-del{border-color:var(--bad)!important;color:var(--bad)!important;margin-left:auto}
.rm-new{width:100%;margin-top:6px}
.rm-tpl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.rm-t{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.rm-t b{color:var(--text);font-size:13px}
.rm-t small{color:var(--muted);font-size:11.5px}
.rm-back{margin-bottom:12px}

#build{position:fixed;left:0;right:0;bottom:0;z-index:58;pointer-events:none}
#build.hidden{display:none}
.buildcard{pointer-events:auto;margin:0 auto;width:min(1040px,96vw);
  border:3px solid var(--line);border-bottom:none;border-radius:16px 16px 0 0;
  background:rgba(34,27,58,.96);padding:10px 14px 12px;max-height:44vh;overflow:auto}
.bd-tabs{display:flex;gap:8px;align-items:center;margin-bottom:9px;flex-wrap:wrap}
.bd-sp{flex:1}
.bd-tab,.bd-cat,.bd-part,.bd-pick,.bd-blk,.bd-save,.bd-done,.bd-try,
.bd-acts button,.bd-add button{font-family:var(--font);cursor:pointer;font-size:12.5px;
  padding:5px 10px;border-radius:9px;border:2px solid var(--line);
  background:var(--panel2);color:var(--muted)}
.bd-tab.on,.bd-cat.on,.bd-part.on,.bd-pick.on{border-color:var(--sky);color:var(--text);background:#3f3566}
.bd-save.hot{border-color:var(--star);color:var(--star)}
.bd-done{border-color:var(--mint);color:var(--mint)}
.bd-cats{display:flex;gap:7px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.bd-count{margin-left:auto;font-size:11.5px;color:var(--muted)}
.bd-parts{display:flex;gap:6px;flex-wrap:wrap}
.bd-keys,.bd-note,.bd-say,.bd-empty{color:var(--muted);font-size:11.5px;margin:8px 0 0}
.bd-say{min-height:15px;color:var(--star)}
.bd-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.bd-head b{color:var(--text);font-size:14px}
.bd-head small{color:var(--muted);font-size:11.5px}
.bd-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted)}
.bd-row>span:first-child{min-width:104px}
.bd-row input[type=text],.bd-row input:not([type]){flex:1;font-family:var(--font);font-size:12.5px;
  padding:5px 8px;border-radius:8px;border:2px solid var(--line);background:#1d1834;color:var(--text)}
.bd-pal{display:flex;gap:4px;flex-wrap:wrap}
.bd-sw{width:20px;height:20px;border-radius:6px;cursor:pointer;
  border:2px solid rgba(255,255,255,.2);padding:0}
.bd-sw.on{border-color:var(--text);transform:scale(1.18)}
.bd-acts{display:flex;gap:8px;margin-top:10px}
.bd-acts .bd-del{border-color:var(--bad);color:var(--bad);margin-left:auto}
.bd-prog{margin-top:10px;border-top:2px solid var(--line);padding-top:8px}
.bd-prog b{font-size:12.5px;color:var(--text)}
.bd-prog ol{margin:6px 0;padding-left:20px}
.bd-prog li{display:flex;align-items:center;gap:6px;margin-bottom:4px;
  font-size:12px;color:var(--text)}
.bd-prog li>span{min-width:190px;color:var(--muted)}
.bd-arg{width:74px;font-family:var(--font);font-size:12px;padding:3px 6px;
  border-radius:7px;border:2px solid var(--line);background:#1d1834;color:var(--text)}
.bd-x{font-family:var(--font);cursor:pointer;border:none;background:transparent;
  color:var(--bad);font-size:12px}
.bd-add{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.bd-try{border-color:var(--mint)!important;color:var(--mint)!important}
.rm-out{width:100%;margin-top:10px;font-family:var(--font);cursor:pointer;font-size:13px;
  padding:8px 12px;border-radius:11px;border:2px solid var(--peach);
  background:var(--panel2);color:var(--peach)}

/* NEON: the cabinet you are playing, filling the window with its pixels square */
#neonPlay{position:fixed;inset:0;z-index:60;background:#000;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:12px}
#neonPlay.on{display:flex}
#neonPlay canvas{width:min(96vw,calc((100vh - 60px)*4/3));aspect-ratio:4/3;
  image-rendering:pixelated;box-shadow:0 0 40px rgba(39,232,255,.35);border-radius:6px}
#neonPlay .neon-foot{color:#8fd3ff;font:14px/1.3 var(--font,system-ui);letter-spacing:.4px;
  text-align:center;padding:0 16px}

/* Kit's talk box (garage.js) */
#talkBox{position:fixed;right:16px;bottom:16px;width:min(420px,calc(100vw - 32px));max-height:60vh;z-index:62;
  display:none;flex-direction:column;background:rgba(24,18,14,.94);border:2px solid #ffb86b;border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);font:14px/1.4 var(--font,system-ui);color:#f7ecde}
#talkBox.on{display:flex}
#talkBox .tb-head{display:flex;gap:8px;align-items:baseline;padding:10px 12px;border-bottom:1px solid #5a4030}
#talkBox .tb-head b{color:#ffb86b;letter-spacing:1px}#talkBox .tb-head span{color:#c9b39a;font-size:12px;flex:1}
#talkBox .tb-x{background:none;border:0;color:#f7ecde;font-size:16px;cursor:pointer}
#talkBox .tb-log{overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:120px}
#talkBox .tb-npc{background:#3a2a1e;border-radius:10px 10px 10px 2px;padding:8px 10px;align-self:flex-start;max-width:88%}
#talkBox .tb-me{background:#1f4a5a;border-radius:10px 10px 2px 10px;padding:8px 10px;align-self:flex-end;max-width:88%}
#talkBox .tb-wait{color:#9aa6c8;font-style:italic}
#talkBox .tb-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #5a4030}
#talkBox input{flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid #6a5040;background:#120d0a;color:#f7ecde}
#talkBox .tb-row button{padding:8px 14px;border-radius:8px;border:0;background:#ffb86b;color:#2a1a0e;font-weight:700;cursor:pointer}

/* ============ SANFRAN, the quest world (sanfran.js): pictures, not paragraphs.
   The corners carry a level, the money and a three-word goal; everything
   else happens in the world — bubbles over heads, numbers where they were
   earned, icons that fly into the bag, keycaps that light when they matter. */
#sf{position:fixed;inset:0;pointer-events:none;z-index:58;font:14px/1.3 var(--font,system-ui);color:#e8f4ff}
#sf.hidden,#sf .hidden{display:none!important}
#sf kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:6px;background:#1a2238;border:1px solid #4a5a82;border-bottom-width:3px;
  font:700 12px/1 var(--font,system-ui);color:#fff;box-sizing:border-box}
#sf .sf-me,#sf .sf-goal{position:absolute;display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(8,10,24,.55);border:1px solid rgba(143,211,255,.25);border-radius:12px;backdrop-filter:blur(4px)}
#sf .sf-me{top:16px;left:16px}
#sf .sf-me b{color:#3ddc84;letter-spacing:1px}#sf .sf-me span{font-weight:700;color:#ffd23d}
#sf .sf-bar{width:90px;height:6px;background:#1a2238;border-radius:3px;overflow:hidden}#sf .sf-bar i{display:block;height:100%;background:linear-gradient(90deg,#3ddc84,#27e8ff);transition:width .4s}
#sf .sf-save{opacity:0;color:#fff!important}#sf .sf-save.on{animation:sfsave 1.2s}
@keyframes sfsave{20%,70%{opacity:1}}
#sf .sf-goal{bottom:16px;left:16px;font-size:16px}
#sf .sf-goal span{font-size:24px}#sf .sf-goal b{letter-spacing:.5px}#sf .sf-goal small{color:#ffd23d;font-weight:700}
#sf .sf-bag{position:absolute;bottom:16px;right:16px;pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:24px;
  background:rgba(8,10,24,.55);border:1px solid rgba(143,211,255,.25);border-radius:12px;color:#fff}
#sf .sf-bag em{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;border-radius:10px;background:#3ddc84;color:#062;font:700 13px/20px var(--font,system-ui);text-align:center;font-style:normal;animation:sfpulse 1s infinite}
#sf .sf-bag.bump{animation:sfbump .3s}
@keyframes sfbump{50%{transform:scale(1.2)}}
@keyframes sfpulse{50%{transform:scale(1.25)}}
#sf .sf-prompt{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;font-size:16px;font-weight:700;
  background:rgba(8,10,24,.8);border:1px solid #27e8ff;border-radius:12px}
#sf .sf-prompt kbd{min-width:32px;height:32px;font-size:15px;border-color:#ffd23d;color:#ffd23d}
/* keycaps along the bottom; the one the moment wants pulses */
#sf .sf-keys{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;padding:6px 10px;background:rgba(8,10,24,.6);border-radius:12px}
#sf .sf-keys .k{display:flex;align-items:center;gap:4px;font-size:18px;opacity:.75;transition:opacity .2s,transform .2s}
#sf .sf-keys .k i{font-style:normal}
#sf .sf-keys .k.hot{opacity:1;transform:scale(1.35)}#sf .sf-keys .k.hot kbd{background:#ffd23d;color:#221a00;border-color:#fff;animation:sfpulse .5s infinite}
#sf .sf-gauge{position:relative;width:54px;height:28px;border-radius:54px 54px 0 0;background:#1a2238;border:1px solid #4a5a82;overflow:hidden;margin-left:4px}
#sf .sf-gauge i{position:absolute;left:50%;bottom:0;width:3px;height:24px;margin-left:-1.5px;background:#ffd23d;transform-origin:50% 100%;transition:transform .15s}
/* bubbles over heads, numbers where things happened, icons on their way to the bag */
#sf .sf-layer{position:absolute;inset:0;overflow:hidden}
#sf .sf-bub{position:absolute;transform:translate(-50%,-100%);max-width:260px;padding:7px 12px;font-size:16px;font-weight:700;text-align:center;white-space:nowrap;
  background:rgba(250,252,255,.96);color:#101628;border:3px solid #8fd3ff;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
#sf .sf-bub::after{content:'';position:absolute;left:50%;bottom:-9px;margin-left:-7px;border:7px solid transparent;border-top-color:inherit;border-bottom:0}
#sf .sf-bub.phone{transform:translateX(-50%);background:rgba(10,16,32,.92);color:#e8f4ff}#sf .sf-bub.phone::after{display:none}
#sf .sf-pop{position:absolute;transform:translate(-50%,-50%);font:800 18px/1 var(--font,system-ui);text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.6);white-space:nowrap}
#sf .sf-pop.big{font-size:30px}
#sf .sf-fly{position:absolute;transform:translate(-50%,-50%);font-size:28px;transition:left .7s cubic-bezier(.5,-.3,.6,1),top .7s cubic-bezier(.3,0,.8,.6),transform .7s;filter:drop-shadow(0 2px 4px #000)}
/* the big word in the middle: 3, 2, 1, FIGHT, K.O., LEVEL 2 */
#sf .sf-banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font:900 88px/1 var(--font,system-ui);letter-spacing:4px;color:#fff;
  text-shadow:0 0 30px rgba(39,232,255,.8),0 6px 0 #000;opacity:0}
#sf .sf-banner.show{animation:sfban .6s ease-out forwards}
#sf .sf-banner.go{color:#ffd23d;text-shadow:0 0 30px rgba(255,210,61,.9),0 6px 0 #000}
#sf .sf-banner.bad{color:#ff5a6a;text-shadow:0 0 30px rgba(255,48,64,.8),0 6px 0 #000}
#sf .sf-banner.ok{color:#3ddc84}#sf .sf-banner.lvl{font-size:56px;color:#3ddc84}
@keyframes sfban{from{opacity:0;transform:translate(-50%,-50%) scale(1.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#sf .sf-fade{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .25s}#sf .sf-fade.on{opacity:1}
/* panels: the bag, the tram, the end of the act */
#sf .sf-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:82vh;display:flex;flex-direction:column;
  background:rgba(6,8,20,.95);border:1px solid #27e8ff;border-radius:16px;pointer-events:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#sf .sf-ph{display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid #1e2a44}#sf .sf-ph b{flex:1;color:#27e8ff;font-size:18px}
#sf .sf-x{background:none;border:0;color:#e8f4ff;font-size:20px;cursor:pointer}
#sf .sf-pb{overflow:auto;padding:14px}
#sf .sf-pb button{cursor:pointer;font:inherit;color:#e8f4ff}
#sf .sf-tabs{display:flex;gap:8px;margin-bottom:12px}
#sf .sf-tabs button{padding:6px 16px;font-size:20px;border-radius:10px;border:1px solid #2a3a5a;background:#101a30}#sf .sf-tabs button.on{border-color:#27e8ff;background:#0f2438}
#sf .sf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
#sf .sf-cell{position:relative;display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:10px;background:#101a30;border:1px solid #1e2a44}
#sf .sf-cell.on{border-color:#3ddc84}
#sf .sf-cell span{font-size:28px}#sf .sf-cell b{position:absolute;top:4px;right:6px;font-size:11px;color:#ffd23d}
#sf .sf-cell small{font-size:10px;color:#8fa6c8;text-align:center;margin-top:2px}
#sf .sf-skills{display:grid;gap:8px}
#sf .sf-skill{display:grid;grid-template-columns:34px 70px 1fr 40px;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:#101a30}
#sf .sf-skill span{font-size:22px}#sf .sf-skill i{font-style:normal;color:#3ddc84;letter-spacing:2px}
#sf .sf-skill button{padding:4px 0;border-radius:8px;border:1px solid #3ddc84;background:#0f2a1c;font-size:18px;font-weight:700}
#sf .sf-big-btns{display:flex;gap:12px;justify-content:center;margin-top:12px}
#sf .sf-big-btns button{min-width:84px;padding:14px 18px;font-size:34px;border-radius:14px;border:1px solid #2a3a5a;background:#101a30}
#sf .sf-big-btns button:hover{border-color:#27e8ff;background:#0f2438}
#sf .sf-big-btns.small button{min-width:0;padding:6px 12px;font-size:20px}
#sf .sf-end{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0}
#sf .sf-end small{letter-spacing:4px;color:#8fa6c8}#sf .sf-end>b{font-size:44px;letter-spacing:6px;color:#3ddc84}
#sf .sf-end-row{display:flex;gap:20px;font-size:22px;font-weight:700;color:#ffd23d;margin:8px 0}
#sf .sf-dim{color:#7a8aaa}
/* the bench: slots on the right, the robot in the middle of the screen */
#sf .sf-bench{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:min(300px,calc(100vw - 32px));padding:10px;pointer-events:auto;
  background:rgba(6,8,20,.88);border:1px solid #3ddc84;border-radius:14px}
#sf .sf-bhead{display:flex;justify-content:space-between;font-size:18px;padding:0 4px 8px}#sf .sf-bhead b{color:#ffd23d}
#sf .sf-brow{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;cursor:pointer;border:1px solid transparent}
#sf .sf-brow.on{background:#0f2438;border-color:#27e8ff}
#sf .sf-brow .i{font-size:20px;width:26px;text-align:center}#sf .sf-brow b{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sf .sf-brow .arr{color:#27e8ff;font-size:11px}
#sf .sf-brow em{font-style:normal;font-weight:700;font-size:13px;display:flex;align-items:center;gap:4px}
#sf .sf-brow em.buy{color:#ffd23d}#sf .sf-brow em.poor{color:#ff8a8a}#sf .sf-brow em.lock{color:#ff8a8a}#sf .sf-brow em.need{animation:sfpulse 1s infinite}
#sf .sf-brow em kbd{min-width:20px;height:20px;font-size:11px}
#sf .sf-bstats{display:grid;gap:5px;margin-top:10px;padding:8px 4px 0;border-top:1px solid #1e2a44}
#sf .sf-bstat{display:grid;grid-template-columns:24px 1fr;align-items:center;gap:6px}
#sf .sf-bstat div{position:relative;height:8px;background:#1a2238;border-radius:4px}
#sf .sf-bstat i{display:block;height:100%;background:#27e8ff;border-radius:4px}
#sf .sf-bstat u{position:absolute;top:0;height:100%;border-radius:4px}#sf .sf-bstat u.up{background:#3ddc84}#sf .sf-bstat u.dn{background:#ff5a6a;opacity:.8}
/* the fight: two small cards of components, icons for names */
#sf .sf-fight{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:14px;justify-content:center}
#sf .sf-fc{background:rgba(6,8,20,.8);border:1px solid #ff3040;border-radius:12px;padding:8px 10px;width:170px}
#sf .sf-fc.me{border-color:#27e8ff}#sf .sf-fc>b{display:block;font-size:12px;letter-spacing:2px;margin-bottom:4px}
#sf .sf-fs{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:6px;font-size:12px;margin:2px 0}
#sf .sf-fs div{height:7px;background:#1a2238;border-radius:4px;overflow:hidden}#sf .sf-fs i{display:block;height:100%;background:#3ddc84;transition:width .15s}
#sf .sf-fc:not(.me) .sf-fs i{background:#ff5a6a}
#sf .sf-fs.heat i{background:#ff8a3d}#sf .sf-fs.pow i{background:#ffd23d}
#sf.fight .sf-me,#sf.fight .sf-goal{opacity:.3}
@media (max-width:600px){#sf .sf-banner{font-size:56px}#sf .sf-fc{width:140px}#sf .sf-keys .k{font-size:14px}}

/* ============ THE OCEAN (ocean.js): how deep you are, the two keys that
   take you up and down, and the card for a creature met for the first time */
#oceanHud{position:fixed;inset:0;pointer-events:none;z-index:40;font:14px/1.2 var(--font,system-ui);color:#e8f8ff}
#oceanHud.hidden,#oceanHud .hidden{display:none!important}
#oceanHud .oc-depth{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:58px;height:220px;border-radius:30px;
  background:linear-gradient(#2a9cc0,#04132a);border:2px solid rgba(160,230,255,.5);box-shadow:0 0 20px rgba(0,40,80,.5);overflow:hidden}
#oceanHud .oc-depth b{position:absolute;left:0;right:0;top:14px;text-align:center;font-size:20px;font-weight:800;z-index:1;text-shadow:0 2px 4px #000}
#oceanHud .oc-depth small{position:absolute;left:0;right:0;top:38px;text-align:center;opacity:.8;z-index:1}
#oceanHud .oc-depth i{position:absolute;left:0;right:0;top:0;background:rgba(255,255,255,.18);border-bottom:2px solid #9ff0ff}
#oceanHud .oc-keys{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:14px;padding:6px 12px;border-radius:12px;background:rgba(4,20,40,.55);font-size:18px}
#oceanHud .oc-keys span{display:flex;align-items:center;gap:6px}
#oceanHud kbd{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 6px;border-radius:6px;background:#0f2a44;border:1px solid #4a7aa2;border-bottom-width:3px;font:700 12px/1 var(--font,system-ui);color:#fff}
#oceanHud .oc-found{position:absolute;left:50%;top:16%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 18px;border-radius:16px;
  background:rgba(4,30,56,.88);border:2px solid #7fe6ff;box-shadow:0 0 30px rgba(80,220,255,.35)}
#oceanHud .oc-found span{font-size:34px}#oceanHud .oc-found b{font-size:20px;letter-spacing:.5px}#oceanHud .oc-found small{color:#7fe6ff;font-weight:700}
#oceanHud .oc-found.pop{animation:ocpop .5s ease-out}
@keyframes ocpop{from{opacity:0;transform:translate(-50%,-10px) scale(1.3)}}

/* =====================================================================
   TSH — the quest's HUD (tsh.js). A film's frame first and a game's HUD
   second: subtitles at the bottom, scene headings the way the script has
   them, a round radar in the corner, the heat as five stars, and the
   letterbox bars when the camera is somebody else's. Teal and lantern
   orange, from the reference; the game's own monospace throughout.
   ===================================================================== */
#tsh{position:fixed;inset:0;pointer-events:none;z-index:58;font:14px/1.35 var(--font,system-ui);color:#e6fff8;--teal:#38ffd0;--orange:#ff7a3a;--panel:rgba(3,12,11,.74)}
#tsh.hidden{display:none}
body.tsh-on #crosshair,body.tsh-on #focus,body.tsh-on #phoneBtn,body.tsh-on #phoneToast,body.tsh-on #wallet:not(.show-in-tsh){display:none!important}
#tsh kbd{display:inline-block;min-width:18px;padding:1px 5px;margin:0 2px;border-radius:4px;background:#0e2622;border:1px solid #2e6a60;border-bottom-width:3px;
  color:#d8fff4;font:700 12px/1.3 var(--font);text-align:center}
/* the objective panel is not shown: the marker in the world says where to go, and the lesson cards say how */
#tsh .tsh-obj{display:none !important}
#tsh .tsh-obj{position:absolute;left:18px;top:18px;max-width:380px;padding:12px 16px;background:linear-gradient(90deg,var(--panel),rgba(3,12,11,.35));border-left:3px solid var(--orange)}
#tsh .tsh-obj small{display:block;font:700 11px var(--font-disp);letter-spacing:.2em;color:var(--orange)}
#tsh .tsh-obj b{display:block;font:700 19px/1.25 var(--font);margin-top:2px;text-shadow:0 2px 6px #000}
#tsh .tsh-obj em{font-style:normal;color:var(--teal);font-weight:700}
#tsh .tsh-obj ul{margin:8px 0 0;padding:0 0 0 16px;color:#a8d8cc;font-size:13px}
#tsh .tsh-obj li{margin:3px 0}
#tsh .tsh-obj.closed ul{display:none}
#tsh .tsh-obj .tsh-tab{margin-top:6px;font-size:11px;color:#6fa89c}
#tsh .tsh-obj.new{animation:tshnew .8s ease-out}
@keyframes tshnew{0%{transform:translateX(-30px);opacity:0}40%{opacity:1}60%{box-shadow:0 0 0 2px var(--orange)}100%{transform:none}}
#tsh .tsh-top{position:absolute;right:18px;top:16px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#tsh .tsh-clock{font:700 28px var(--font-disp);letter-spacing:.06em;text-shadow:0 2px 8px #000;color:#f2fffb}
#tsh .tsh-heat{display:flex;gap:3px;font-size:22px;line-height:1}
#tsh .tsh-heat i{font-style:normal;color:rgba(255,255,255,.18);text-shadow:0 1px 3px #000}
#tsh .tsh-heat i.on{color:#fff;text-shadow:0 0 8px #fff,0 1px 3px #000}
#tsh .tsh-heat.seen i.on{animation:tshseen .5s steps(2) infinite}
@keyframes tshseen{0%{color:#ff4a4a;text-shadow:0 0 12px #ff4a4a}100%{color:#4a8aff;text-shadow:0 0 12px #4a8aff}}
#tsh .tsh-expo{display:flex;align-items:center;gap:6px;font-size:13px}
#tsh .tsh-expo div{width:110px;height:7px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
#tsh .tsh-expo i{display:block;height:100%;background:linear-gradient(90deg,#ffd23d,#ff4a4a);transition:width .4s}
#tsh .tsh-expo em{font-style:normal;color:#ffd9a8;width:34px;text-align:right}
#tsh .tsh-cash{font:700 18px var(--font);color:#9fffc8;text-shadow:0 1px 4px #000}
#tsh .tsh-radar{position:absolute;left:18px;bottom:18px;width:220px;height:220px;border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.6)}
#tsh .tsh-radar canvas{display:block;border-radius:50%}
#tsh .tsh-gad{position:absolute;right:18px;bottom:18px;display:flex;gap:6px}
#tsh .tsh-gad span{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:7px 8px;background:var(--panel);border:1px solid #1f4a44;border-radius:8px;font-size:20px}
#tsh .tsh-gad em{font:700 10px var(--font);font-style:normal;color:#8fd3c8;letter-spacing:.04em}
#tsh .tsh-gad span.on{border-color:var(--teal)} #tsh .tsh-gad span.warn{border-color:#ffb03a} #tsh .tsh-gad span.warn em{color:#ffb03a}
#tsh .tsh-gad span.off{opacity:.45} #tsh .tsh-gad span.cd{opacity:.6}
#tsh .tsh-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:none}
#tsh .tsh-film.on{display:block}
#tsh .tsh-sub{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);max-width:min(900px,80vw);text-align:center;opacity:0;transition:opacity .2s}
#tsh .tsh-sub.on{opacity:1}
#tsh .tsh-sub b{display:block;font:700 12px var(--font-disp);letter-spacing:.18em;margin-bottom:3px;text-shadow:0 1px 4px #000}
#tsh .tsh-sub span{display:inline;padding:3px 10px;font:600 21px/1.45 var(--font);background:rgba(0,0,0,.55);box-decoration-break:clone;-webkit-box-decoration-break:clone;color:#fff}
#tsh.cine .tsh-sub{bottom:4.5%}
/* the words go ON the letterbox, as in a cinema — they used to be drawn under it, and a cutscene played in silence */
#tsh .tsh-sub,#tsh .tsh-talk{z-index:2}
#tsh .tsh-sub .tsh-more{display:block;margin-top:6px;font:700 11px var(--font);font-style:normal;color:#8fd3c8;letter-spacing:.06em;animation:tshnudge 1.2s ease-in-out infinite}
/* a conversation: the line being said, then Robin's turn as a list of choices */
#tsh .tsh-talk{position:absolute;left:50%;bottom:calc(7vh + 14px);transform:translateX(-50%);width:min(780px,calc(100vw - 32px));display:none;flex-direction:column;gap:8px;pointer-events:auto}
#tsh .tsh-talk.on{display:flex;animation:tshin .25s ease-out}
#tsh .tsh-tk-line{position:relative;padding:12px 18px 14px;background:rgba(3,12,11,.88);border:1px solid #1f4a44;border-left:3px solid var(--c,var(--teal));border-radius:8px;cursor:pointer}
#tsh .tsh-tk-line b{display:block;font:700 12px var(--font-disp);letter-spacing:.18em;margin-bottom:4px;text-shadow:0 1px 4px #000}
#tsh .tsh-tk-line p{margin:0;min-height:1.45em;font:600 20px/1.45 var(--font);color:#fff}
#tsh .tsh-tk-line.ctx{cursor:default;opacity:.72;padding:9px 16px 10px} #tsh .tsh-tk-line.ctx p{font-size:16px}
#tsh .tsh-tk-next{position:absolute;right:12px;bottom:8px;font:700 11px var(--font);font-style:normal;color:#8fd3c8;opacity:0;transition:opacity .2s}
#tsh .tsh-tk-next.on{opacity:1;animation:tshnudge 1.2s ease-in-out infinite}
@keyframes tshnudge{50%{transform:translateX(3px)}}
#tsh .tsh-tk-ask{display:flex;flex-direction:column;gap:6px}
#tsh .tsh-tk-ask.grid{display:grid;grid-template-columns:1fr 1fr} #tsh .tsh-tk-ask.grid button.say{grid-column:1/-1}
#tsh .tsh-tk-ask.grid button.do{padding:8px 12px;font-size:15px}
#tsh .tsh-tk-ask button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 14px;background:rgba(3,12,11,.88);border:1px solid #1f4a44;border-radius:8px;font:600 17px/1.35 var(--font);color:#e6fff8;cursor:pointer}
#tsh .tsh-tk-ask button:hover,#tsh .tsh-tk-ask button.sel{background:#0f2f2a;border-color:var(--teal);box-shadow:inset 3px 0 0 var(--teal)}
#tsh .tsh-tk-ask button kbd{flex:0 0 auto}
#tsh .tsh-tk-ask button i{flex:0 0 auto;font-style:normal;font-size:20px;line-height:1}
#tsh .tsh-tk-ask button span{flex:1;min-width:0}
#tsh .tsh-tk-ask button.do span{font-style:italic;color:#ffd9a8}
#tsh .tsh-tk-ask button small{display:block;margin-top:2px;font:600 12px var(--font);font-style:normal;color:#8fb8ae}
#tsh.talking .tsh-bar{height:7vh}
#tsh.talking .tsh-notes{top:calc(7vh + 12px)}
#tsh.talking .tsh-obj,#tsh.talking .tsh-top,#tsh.talking .tsh-radar,#tsh.talking .tsh-gad,#tsh.talking .tsh-prompt,#tsh.talking .tsh-caption,#tsh.talking .tsh-scan,#tsh.talking .tsh-sub{opacity:0;transition:opacity .3s}
#tsh .tsh-prompt{position:absolute;left:50%;top:62%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 14px;background:var(--panel);border:1px solid var(--teal);border-radius:20px;font:700 16px var(--font)}
#tsh .tsh-prompt kbd{font-size:14px;background:var(--teal);color:#012;border-color:#0a6}
#tsh .tsh-layer{position:absolute;inset:0}
#tsh .tsh-bub{position:absolute;transform:translate(-50%,-100%);padding:4px 10px;background:rgba(3,12,11,.85);border:1px solid #8fd3c8;border-radius:12px;font:700 15px var(--font);white-space:nowrap}
#tsh .tsh-mk{position:absolute;width:34px;height:34px;transform:translate(-50%,-100%);display:grid;place-items:center}
#tsh .tsh-mk i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(currentColor var(--k),rgba(255,255,255,.12) 0);-webkit-mask:radial-gradient(circle,transparent 11px,#000 12px);mask:radial-gradient(circle,transparent 11px,#000 12px)}
#tsh .tsh-mk b{position:relative;font:800 18px var(--font);color:currentColor;text-shadow:0 0 6px #000}
#tsh .tsh-mk.suspicious{color:#ffd23d} #tsh .tsh-mk.investigating{color:#ff9a3a} #tsh .tsh-mk.alert{color:#ff3a3a;animation:tshpulse .5s infinite alternate}
#tsh .tsh-mk.film{color:#ffd23d} #tsh .tsh-mk.film b{font-size:16px} #tsh .tsh-mk.stun{color:#bff}
@keyframes tshpulse{to{transform:translate(-50%,-110%) scale(1.15)}}
#tsh .tsh-om{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;color:#ffd23d}
#tsh .tsh-om i{width:14px;height:14px;background:#ffd23d;transform:rotate(45deg);box-shadow:0 0 10px #ffd23d}
#tsh .tsh-om span{font:700 12px var(--font);text-shadow:0 1px 3px #000;white-space:nowrap}
#tsh .tsh-om.off{opacity:.8}
#tsh .tsh-notes{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:min(640px,70vw)}
#tsh .tsh-note{padding:7px 14px;background:var(--panel);border-radius:6px;font:600 15px var(--font);border-left:3px solid var(--teal);animation:tshin .3s ease-out;transition:opacity .6s,transform .6s}
#tsh .tsh-note.warn{border-left-color:#ffb03a} #tsh .tsh-note.bad{border-left-color:#ff4a4a;color:#ffd8d0} #tsh .tsh-note.big{font-size:17px;border-left-color:var(--orange);box-shadow:0 0 24px rgba(255,122,58,.25)}
#tsh .tsh-note.out{opacity:0;transform:translateY(-8px)}
@keyframes tshin{from{opacity:0;transform:translateY(-10px)}}
#tsh .tsh-scan{position:absolute;left:50%;top:40%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font:700 13px var(--font-disp);letter-spacing:.2em;color:#ff6a5a}
#tsh .tsh-scan div{width:120px;height:6px;background:rgba(255,255,255,.15)} #tsh .tsh-scan i{display:block;height:100%;background:#ff6a5a}
#tsh .tsh-grab{position:absolute;left:50%;top:58%;transform:translateX(-50%);min-width:300px;padding:12px 18px;background:rgba(40,4,4,.8);border:2px solid #ff4a4a;border-radius:10px;text-align:center}
#tsh .tsh-grab b{font:700 16px var(--font-disp);letter-spacing:.12em;color:#ffb8a8}
#tsh .tsh-gk{margin:8px 0;display:flex;justify-content:center;gap:14px;font-size:15px}
#tsh .tsh-gm,#tsh .tsh-gt{height:8px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden;margin-top:5px}
#tsh .tsh-gm i{display:block;height:100%;background:var(--teal)} #tsh .tsh-gt i{display:block;height:100%;background:#ff4a4a}
#tsh .tsh-phone{position:absolute;right:18px;bottom:110px;width:190px;padding:12px 14px;background:linear-gradient(180deg,#0b1a18,#050b0a);border:1px solid #2e6a60;border-radius:16px;animation:tshin .3s}
#tsh .tsh-phone small{display:block;color:#8fd3c8;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
#tsh .tsh-phone b{display:block;font:700 16px var(--font);margin-top:3px}
#tsh .tsh-caption{position:absolute;left:18px;bottom:252px;font:700 13px var(--font-code);letter-spacing:.12em;color:#d8fff4;opacity:0;text-shadow:0 1px 4px #000}
#tsh .tsh-caption.on{animation:tshcap 4.5s ease-out}
@keyframes tshcap{0%{opacity:0;transform:translateY(6px)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#tsh .tsh-bar{position:absolute;left:0;right:0;height:0;background:#000;transition:height .6s ease}
#tsh .tsh-bar.top{top:0} #tsh .tsh-bar.bot{bottom:0}
#tsh.cine .tsh-bar{height:11vh}
#tsh.cine .tsh-obj,#tsh.cine .tsh-top,#tsh.cine .tsh-radar,#tsh.cine .tsh-gad,#tsh.cine .tsh-prompt,#tsh.cine .tsh-notes,#tsh.cine .tsh-caption,#tsh.cine .tsh-scan{opacity:0;transition:opacity .4s}
#tsh .tsh-binomask{position:absolute;inset:0;opacity:0;transition:opacity .2s;
  background:radial-gradient(circle at 36% 50%,transparent 0 22vh,#000 22.4vh) ,radial-gradient(circle at 64% 50%,transparent 0 22vh,#000 22.4vh);background-blend-mode:lighten}
#tsh.bino .tsh-binomask{opacity:1;
  -webkit-mask:radial-gradient(circle at 36% 50%,transparent 0 22vh,#000 22.4vh),radial-gradient(circle at 64% 50%,transparent 0 22vh,#000 22.4vh);-webkit-mask-composite:source-in;mask-composite:intersect;background:#000}
#tsh .tsh-panel{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,6,5,.72);pointer-events:auto;backdrop-filter:blur(3px)}
#tsh .tsh-panel.hidden{display:none}
#tsh .tsh-bag{width:min(560px,92vw);max-height:84vh;overflow:auto;padding:20px 24px;background:#07110f;border:1px solid #1f4a44;border-top:3px solid var(--orange);border-radius:10px}
/* the workshop: Robin's bench, the four pieces, and the one being finished */
#tsh .tsh-bench{width:min(740px,94vw);max-height:88vh;overflow:auto;padding:20px 24px;background:#07110f;border:1px solid #1f4a44;border-top:3px solid var(--orange);border-radius:10px}
#tsh .tsh-bench h3{margin:0;font:700 18px var(--font-disp);letter-spacing:.08em}
#tsh .tsh-pcs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 16px}
#tsh .tsh-pc{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;background:#0b1a18;border:1px solid #16332e;border-radius:8px;text-align:center}
#tsh .tsh-pc canvas{width:100%;max-width:120px;height:auto;opacity:.5}
#tsh .tsh-pc.done canvas{opacity:1}
#tsh .tsh-pc.cur{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
#tsh .tsh-pc b{font-size:14px} #tsh .tsh-pc small{color:#8fb8ae;font-size:12px} #tsh .tsh-pc.done small{color:var(--teal)}
#tsh .tsh-wk{padding:14px 16px;background:#0b1a18;border-radius:8px;border-left:3px solid var(--teal)}
#tsh .tsh-wk h4{margin:0 0 6px;font:700 15px var(--font-disp);letter-spacing:.06em}
#tsh .tsh-ask{margin:0 0 10px;color:#cfeee6}
#tsh .tsh-does{margin:0 0 12px;color:#e6fff8;font-size:15px;line-height:1.5}
#tsh .tsh-say{margin:12px 0 0;font:italic 600 15px/1.45 var(--font);color:#ffd9a8}
#tsh .tsh-say b{font:700 11px var(--font-disp);font-style:normal;letter-spacing:.18em;margin-right:10px}
#tsh .tsh-opts{display:flex;flex-direction:column;gap:6px}
#tsh .tsh-opts button{display:flex;gap:10px;align-items:flex-start;text-align:left}
#tsh .tsh-opts button b{display:block} #tsh .tsh-opts small{display:block;margin-top:2px;color:#8fb8ae;font-weight:500;font-size:13px}
#tsh .tsh-opts button.struck{opacity:.45} #tsh .tsh-opts button.struck b{text-decoration:line-through}
#tsh .tsh-meter{position:relative;height:22px;margin:6px 0 10px;background:#12302b;border-radius:11px;overflow:hidden}
#tsh .tsh-meter .band{position:absolute;top:0;bottom:0;background:rgba(56,255,208,.3);border-left:2px solid var(--teal);border-right:2px solid var(--teal)}
#tsh .tsh-meter .needle{position:absolute;top:0;bottom:0;width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 8px #fff;animation:tshsweep .9s linear infinite alternate}
@keyframes tshsweep{from{left:0}to{left:100%}}
#tsh .tsh-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#tsh .tsh-pips{font-size:18px;letter-spacing:4px;color:var(--teal)}
#tsh .tsh-wave{display:block;width:100%;height:auto;margin-bottom:8px;background:#050c0b;border-radius:8px}
#tsh .tsh-match{min-width:96px;text-align:center;color:#b89cff;font-weight:700}
#tsh .tsh-shield{height:90px;display:grid;place-items:center}
#tsh .tsh-shield i{width:60px;height:60px;border-radius:50%;border:2px solid rgba(143,216,255,.25)}
#tsh .tsh-shield.on i{animation:tshshield 1.4s ease-out}
@keyframes tshshield{0%{transform:scale(.3);border-color:#8fd8ff;box-shadow:0 0 0 0 rgba(143,216,255,.9)}100%{transform:scale(1.6);border-color:rgba(143,216,255,0);box-shadow:0 0 40px 10px rgba(143,216,255,0)}}
@media (max-width:600px){#tsh .tsh-pcs{grid-template-columns:repeat(2,1fr)}}
#tsh .tsh-bag h3{margin:0 0 12px;font:700 18px var(--font-disp);letter-spacing:.08em}
#tsh .tsh-it{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #12302b}
#tsh .tsh-it>span{font-size:26px;width:36px;text-align:center}
#tsh .tsh-it b{display:block;font-size:16px} #tsh .tsh-it small{display:block;color:#9fc8be;font-size:13px}
#tsh .tsh-act{margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} #tsh .tsh-act em{color:#6fa89c;font-size:12px}
#tsh button{pointer-events:auto;padding:8px 14px;border-radius:6px;border:1px solid #2e6a60;background:#0e2622;color:#e6fff8;font:700 14px var(--font);cursor:pointer}
#tsh button:hover{background:#15403a;border-color:var(--teal)}
#tsh .tsh-close{margin-top:14px;text-align:right}
#tsh .tsh-keys{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:16px;color:#a8d8cc}
#tsh .tsh-pbtns{display:flex;flex-direction:column;gap:8px}
#tsh .tsh-credit{margin-top:16px;color:#8fb8ae;font-size:13px}
#tsh .tsh-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%)}
#tsh .tsh-title.on{animation:tshtitle 5.2s ease-in-out forwards}
@keyframes tshtitle{0%{opacity:0}15%{opacity:1}80%{opacity:1}100%{opacity:0}}
#tsh .tsh-t1{font:700 120px/1 var(--font-disp);letter-spacing:.2em;color:#e8fff8;text-shadow:0 0 30px rgba(56,255,208,.6),0 0 80px rgba(56,255,208,.3)}
#tsh .tsh-t2{margin-top:14px;font:700 18px var(--font-disp);letter-spacing:.35em;color:var(--orange)}
#tsh .tsh-t3{margin-top:8px;font:13px var(--font);letter-spacing:.3em;color:#8fd3c8}
#tsh .tsh-flash{position:absolute;inset:0;background:#f4fffb;opacity:0}
#tsh .tsh-flash.go{animation:tshflash .6s ease-out}
@keyframes tshflash{0%{opacity:.85}100%{opacity:0}}
#tsh .tsh-fade{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .4s}
#tsh .tsh-fade.on{opacity:1}
#tsh .tsh-black{position:absolute;inset:0;background:#000;opacity:0;transition:opacity 1.2s;display:grid;place-items:center}
#tsh .tsh-black.on{opacity:1;pointer-events:auto}
#tsh .tsh-cut{font:700 22px var(--font-code);letter-spacing:.2em;color:#e8e8e8;animation:tshin 1s}
#tsh .tsh-sting{max-width:560px;text-align:center;animation:tshin 1.2s}
#tsh .tsh-sting i{display:block;width:12px;height:12px;margin:0 auto 18px;border-radius:50%;background:#ff3a2a;box-shadow:0 0 20px #ff3a2a;animation:tshblink 1.2s steps(2) infinite}
#tsh .tsh-sting.clean i{background:#38ffd0;box-shadow:0 0 20px #38ffd0} #tsh .tsh-sting.photo i{background:#d0b4ff;box-shadow:0 0 20px #d0b4ff}
#tsh .tsh-sting b{display:block;font:700 14px var(--font-disp);letter-spacing:.3em;color:var(--orange);text-transform:uppercase}
#tsh .tsh-sting p{margin:10px 0 0;font:600 22px/1.5 var(--font);color:#f0f0f0}
@keyframes tshblink{to{opacity:.15}}
#tsh .tsh-res{width:min(620px,94vw);padding:26px 30px;background:#050c0b;border:1px solid #1f4a44;border-top:3px solid var(--orange);border-radius:10px}
#tsh .tsh-res-t{font:700 64px/1 var(--font-disp);letter-spacing:.2em;text-align:center;color:#e8fff8;text-shadow:0 0 24px rgba(56,255,208,.5)}
#tsh .tsh-res-s{text-align:center;font:700 13px var(--font-disp);letter-spacing:.3em;color:var(--orange);margin:8px 0 16px}
#tsh .tsh-res ul{margin:0;padding-left:18px;color:#cfeee6} #tsh .tsh-res li{margin:6px 0}
#tsh .tsh-res-p{margin-top:16px;padding:10px 12px;background:#0b1a18;border-radius:8px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:#a8d8cc}
#tsh .tsh-res-p b{width:100%;color:#e6fff8}
#tsh .tsh-res-b{margin-top:18px;display:flex;gap:10px;justify-content:center}

/* ---- TSH: the opening — her phone, big; the lesson card */
#tsh .tsh-phoneBig{position:absolute;right:9vw;top:50%;width:min(280px,34vw);aspect-ratio:9/18.5;transform:translate(0,160%) rotate(6deg);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .3s;z-index:3;
  background:#08090b;border:3px solid #2a2d31;border-radius:34px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(120,220,255,.15);overflow:hidden;pointer-events:none}
#tsh .tsh-phoneBig.on{transform:translate(0,-50%) rotate(-4deg);opacity:1}
#tsh .tsh-phoneBig.buzz{animation:tshbuzz .12s linear infinite}
@keyframes tshbuzz{0%{margin-left:0}25%{margin-left:-4px}75%{margin-left:4px}100%{margin-left:0}}
#tsh .pb-screen{position:absolute;inset:0;padding:18px 16px;background:radial-gradient(120% 80% at 30% 10%,#3a1a4a,#0a0f1a 60%,#05070a);color:#f4f6ff;font-family:var(--font)}
#tsh .pb-top{display:flex;justify-content:space-between;font:600 12px var(--font);opacity:.8}
#tsh .pb-big{margin-top:16%;text-align:center;font:200 64px/1 var(--font);letter-spacing:-.02em}
#tsh .pb-big.huge{font-size:84px;margin-top:30%}
#tsh .pb-big.dim{opacity:.45}
#tsh .pb-date{text-align:center;font:600 14px var(--font);opacity:.75;margin-top:8px}
#tsh .pb-alarm{margin:18% 4px 0;padding:14px;border-radius:18px;background:rgba(255,255,255,.12);font:700 12px var(--font);letter-spacing:.14em;color:#ffd23d}
#tsh .pb-alarm b{display:block;margin-top:6px;font:700 20px var(--font);letter-spacing:0;color:#fff;text-transform:none}
#tsh .pb-slide{position:absolute;left:16px;right:16px;bottom:26px;padding:12px;border-radius:30px;background:rgba(255,255,255,.14);text-align:center;font:600 13px var(--font);opacity:.85}
#tsh .pb-note{margin:14% 2px 0;padding:14px;border-radius:18px;background:rgba(240,244,255,.16);backdrop-filter:blur(6px);animation:tshin .35s}
#tsh .pb-note small{display:block;font:600 11px var(--font);letter-spacing:.12em;opacity:.7}
#tsh .pb-note b{display:block;margin-top:6px;font:700 15px var(--font);color:#ff8a6a}
#tsh .pb-note p{margin:6px 0 0;font:500 17px/1.3 var(--font)}
#tsh .tsh-black{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity 1.6s ease;z-index:2}
#tsh .tsh-black.on{opacity:1;transition:none}
#tsh .tsh-sub{z-index:4}
#tsh .pb-caller{margin-top:30%;text-align:center}
#tsh .pb-caller small{display:block;font:600 13px var(--font);opacity:.7;letter-spacing:.04em}
#tsh .pb-caller b{display:block;margin-top:10px;font:300 34px/1.1 var(--font);letter-spacing:.04em}
#tsh .pb-caller span{display:block;margin-top:6px;font:500 13px var(--font);opacity:.6}
#tsh .pb-btns{position:absolute;left:0;right:0;bottom:12%;display:flex;justify-content:space-around}
#tsh .pb-btns.one{justify-content:center}
#tsh .pb-btns i{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font:700 24px var(--font);font-style:normal;color:#fff}
#tsh .pb-btns .no{background:#e8304a}#tsh .pb-btns .yes{background:#30c85a;animation:tshbuzz .5s ease-in-out infinite}
#tsh .tsh-lesson.big b{font-size:44px;letter-spacing:.12em}
#tsh .tsh-lesson.big p{font-size:20px}
#tsh .tsh-lesson{position:absolute;left:50%;top:15%;transform:translateX(-50%);max-width:min(560px,86vw);padding:14px 22px 16px;text-align:center;border-radius:14px;
  background:rgba(4,12,11,.78);border:1px solid rgba(127,240,224,.4);opacity:0;pointer-events:none;transition:opacity .35s}
#tsh .tsh-lesson.on{opacity:1}
#tsh .tsh-lesson small{display:block;font:700 11px var(--font-code);letter-spacing:.2em;color:#7ff0e0}
#tsh .tsh-lesson b{display:block;margin-top:4px;font:800 26px var(--font);letter-spacing:.06em;color:#fff}
#tsh .tsh-lesson p{margin:6px 0 0;font:500 15px/1.4 var(--font);color:#d8fff4}
#tsh .pb-note.me{margin:10px 0 0 28%;background:rgba(56,255,208,.24);animation:tshin .35s}
#tsh .pb-note.me p{margin:0}

/* ---- TSH: the fight in Dragon Alley (tshfight.js) — her health, the combo, the key to press in a slow-motion lesson */
#tsh .tshf{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;z-index:1}
#tsh.fighting .tsh-gad,#tsh.fighting .tsh-obj,#tsh.fighting .tsh-prompt{opacity:0;transition:opacity .3s}
#tsh .tshf.on{opacity:1}
#tsh.cine .tshf{opacity:0}
#tsh .tshf-red{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,rgba(255,30,30,0) 45%,rgba(200,0,20,.55) 100%)}
#tsh .tshf-hp{position:absolute;left:50%;bottom:6.2%;width:min(360px,60vw);height:9px;transform:translateX(-50%);border-radius:5px;background:rgba(0,0,0,.55);border:1px solid rgba(127,240,224,.45);overflow:hidden}
#tsh .tshf-hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#38ffd0,#9ff6ff);transition:width .2s}
#tsh .tshf-hp.low i{background:linear-gradient(90deg,#ff3a4a,#ff8a6a)}
#tsh .tshf-combo{position:absolute;right:7vw;top:34%;font:900 44px/1 var(--font);letter-spacing:.04em;color:#fff;text-shadow:0 0 18px rgba(56,255,208,.8),0 3px 0 #0a3a32;opacity:0;transform:skewX(-8deg)}
#tsh .tshf-combo.on{opacity:1}
#tsh .tshf-combo.pop{animation:tshfpop .22s ease-out}
@keyframes tshfpop{0%{transform:skewX(-8deg) scale(1.45)}100%{transform:skewX(-8deg) scale(1)}}
#tsh .tshf-prompt{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) scale(.8);text-align:center;opacity:0;transition:opacity .15s,transform .2s}
#tsh .tshf-prompt.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#tsh .tshf-prompt kbd{display:inline-block;min-width:64px;padding:10px 18px;border-radius:12px;font:900 30px var(--font);color:#06201b;background:#38ffd0;box-shadow:0 0 0 3px rgba(56,255,208,.35),0 0 40px rgba(56,255,208,.7);animation:tshfkey .7s ease-in-out infinite}
#tsh .tshf-prompt b{display:block;margin-top:12px;font:900 34px var(--font);letter-spacing:.14em;color:#fff;text-shadow:0 2px 12px #000}
#tsh .tshf-prompt small{display:block;margin-top:4px;font:600 15px var(--font);color:#bff8ec;text-shadow:0 1px 6px #000}
@keyframes tshfkey{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
#tsh .tshf-keys{position:absolute;left:50%;bottom:2.2%;transform:translateX(-50%);display:flex;gap:14px;flex-wrap:nowrap;white-space:nowrap;justify-content:center;opacity:0;transition:opacity .4s;font:600 12px var(--font);color:#cfeee6}
#tsh .tshf-keys.on{opacity:.9}
#tsh .tshf-keys kbd{margin-right:5px;padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.55);border:1px solid rgba(127,240,224,.5);font:700 11px var(--font-code);color:#7ff0e0}
#tsh.cine .tsh-lesson{opacity:0}
/* TSH, the morning after: no heat, no exposure, no gadget bar — it is a school day */
#tsh.day .tsh-heat,#tsh.day .tsh-expo,#tsh.day .tsh-gad,#tsh.day .tsh-cash{display:none}
/* in school: no map of the district; the teacher meter */
#tsh.school .tsh-radar{display:none}
#tsh .tsh-seen{position:absolute;left:50%;top:86px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:999px;background:rgba(10,14,16,.6);font:700 12px var(--font-disp);letter-spacing:.12em;color:#ffe08a}
#tsh .tsh-seen div{width:160px;height:7px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}
#tsh .tsh-seen i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd060,#ff5a3a);transition:width .1s}
/* TSH — Robin's bench: the puzzles (tshpuzzle.js) */
#tsh .tsh-puz,.tsh-puz{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(4,10,9,.55),rgba(0,0,0,.82));pointer-events:auto}
.tsh-puz-card{position:relative;width:min(720px,94vw);max-height:96vh;overflow-y:auto;padding:18px 20px 16px;border-radius:22px;background:linear-gradient(160deg,rgba(14,24,22,.96),rgba(6,10,10,.96));border:1px solid rgba(56,255,208,.35);box-shadow:0 0 40px rgba(56,255,208,.15),0 20px 60px rgba(0,0,0,.6);color:#e8fff8}
.tsh-puz-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tsh-puz-h b{font:800 20px var(--font-disp);letter-spacing:.14em;color:#38ffd0;text-shadow:0 0 12px rgba(56,255,208,.6)}
.tsh-puz-lv{font:700 12px var(--font-disp);letter-spacing:.12em;color:#ff9fe8}
.tsh-puz-sub{margin:4px 0 8px;font-size:13px;opacity:.75}
.tsh-puz canvas{display:block;width:auto;max-width:100%;height:auto;max-height:min(58vh,520px);margin:0 auto;aspect-ratio:640/520;border-radius:14px;background:#070b0a;touch-action:none;cursor:pointer}
.tsh-puz-msg{min-height:20px;margin:10px 0 0;font:700 14px var(--font-disp);letter-spacing:.06em;color:#38ffd0;text-align:center}
.tsh-puz-msg.bad{color:#ff6a8a}
.tsh-puz-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.tsh-puz-checks button,.tsh-puz-ans button{font:inherit;color:#e8fff8;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid rgba(56,255,208,.25);background:rgba(56,255,208,.06);cursor:pointer}
.tsh-puz-checks button b{display:block;font:700 13px var(--font-disp);letter-spacing:.08em;color:#38ffd0;margin-bottom:3px}
.tsh-puz-checks button span{font-size:12px;opacity:.85}
.tsh-puz-checks button.seen{background:rgba(56,255,208,.12)}
.tsh-puz-ans{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tsh-puz-ans small{width:100%;font:700 11px var(--font-disp);letter-spacing:.14em;color:#ff9fe8}
.tsh-puz-ans button{border-color:rgba(255,63,208,.4);background:rgba(255,63,208,.08)}
.tsh-puz-ans button:disabled{opacity:.35;cursor:default}
.tsh-puz-dials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.tsh-puz-dial{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;border:1px solid rgba(180,138,255,.35);background:rgba(180,138,255,.07)}
.tsh-puz-dial small{font:700 11px var(--font-disp);letter-spacing:.14em;color:#b48aff;margin-right:2px}
.tsh-puz-dial b{min-width:62px;text-align:center;font:800 16px var(--font-disp);color:#e8fff8}
.tsh-puz-dial button{width:44px;height:44px;border-radius:12px;border:1px solid rgba(56,255,208,.35);background:rgba(56,255,208,.08);color:#38ffd0;font-size:18px;cursor:pointer;touch-action:manipulation}
.tsh-puz-dial button:active{background:rgba(56,255,208,.25)}
.tsh-puz-dial small{display:flex;flex-direction:column;align-items:flex-start}
.tsh-puz-dial small em{font:400 11px var(--font);letter-spacing:0;color:#a8d8cc;font-style:normal;text-transform:none}
.tsh-puz-dial input[type=range]{width:170px;accent-color:#ff3fd0;cursor:pointer}
.tsh-puz-dial i{min-width:118px;font:700 12px var(--font-disp);font-style:normal;color:#ff9be8}
.tsh-puz-dial.ok{border-color:rgba(56,255,208,.6);background:rgba(56,255,208,.08)}
.tsh-puz-dial.ok i{color:#38ffd0}
.tsh-puz-dial.ok input[type=range]{accent-color:#38ffd0}
.tsh-puz-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin-top:10px}
.tsh-puz-part{display:grid;grid-template-columns:1fr auto auto;gap:4px 8px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,63,208,.35);background:rgba(255,63,208,.06)}
.tsh-puz-part.in{border-color:rgba(56,255,208,.45);background:rgba(56,255,208,.06)}
.tsh-puz-part b{font:800 13px var(--font-disp);letter-spacing:.1em;color:#e8fff8}
.tsh-puz-part small{grid-column:1 / -1;font-size:12px;color:#a8d8cc}
.tsh-puz-part small em{color:#38ffd0;font-style:normal}
.tsh-puz-part button{padding:6px 10px;border-radius:9px;border:1px solid rgba(56,255,208,.4);background:rgba(56,255,208,.08);color:#38ffd0;font:700 12px var(--font-disp);cursor:pointer}
.tsh-puz-part button:disabled{opacity:.35;cursor:default}
.tsh-puz-motor{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;border-radius:12px;border:1px solid rgba(56,255,208,.3);background:rgba(56,255,208,.05);color:#e8fff8;cursor:pointer;text-align:left}
.tsh-puz-motor:hover{background:rgba(56,255,208,.12)}
.tsh-puz-motor.in{border-color:#38ffd0;box-shadow:0 0 0 2px rgba(56,255,208,.35)}
.tsh-puz-motor b{font:800 13px var(--font-disp);letter-spacing:.08em}
.tsh-puz-motor small{font-size:12px;color:#a8d8cc}
.tsh-puz-motor .bar{display:block;width:100%;height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.tsh-puz-motor .bar i{display:block;height:100%;background:#ff9be8}
/* TSH: the mute button (M), there through films, fights and puzzles */
#tsh .tsh-mute{position:absolute;top:14px;right:170px;z-index:70;width:42px;height:42px;border-radius:50%;border:1px solid rgba(56,255,208,.4);background:rgba(3,12,11,.7);color:#e6fff8;font-size:19px;line-height:1;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.4)}
#tsh .tsh-mute:hover{border-color:#38ffd0;box-shadow:0 0 12px rgba(56,255,208,.4)}
#tsh .tsh-mute.off{border-color:rgba(255,106,138,.6);background:rgba(40,8,14,.75)}
#tsh.cine .tsh-mute{top:14px;opacity:.75}
@media (max-width:640px){#tsh .tsh-mute{right:auto;left:16px;top:auto;bottom:16px}}
/* a panel (the results after END OF PROLOGUE, the pause card) is always over the black it opens on — the black took its clicks */
#tsh .tsh-panel{z-index:6}
/* ===== ROBIN RYU — the title: 3-D yellow capitals that spin into place letter by letter, then a slash =====
   Each letter is a stack of ten layers, a face and nine behind it stepping back into the screen, darker as
   they go (gold to bronze) — real depth in CSS 3-D, so as a letter turns you see its sides. Each layer is two
   halves, above and below the one diagonal cut through the whole word (fitted per letter by tsh.js rrFit).
   IN: letter by letter they come spinning out of the dark, end over end, and land; the word shudders; a white
   slash tears along the cut with a flash and every letter splits on it; a glint crosses the faces.
   OUT: letter by letter, the top halves are thrown up and right and the bottom halves down and left, tumbling. */
.rr-mark{--rrY:#f7d117;position:relative;display:inline-block;line-height:1;padding:.04em .12em}
.rr-mark{perspective:9em}
.rr-mark .rr-word{position:relative;display:block;font:400 1em/1.02 'Dela Gothic One',Impact,'Arial Black',sans-serif;letter-spacing:.01em;white-space:nowrap;text-transform:uppercase;transform-style:preserve-3d;transform:var(--tilt)}
.rr-mark{--tilt:rotateX(20deg) rotateY(-26deg)}
.rr-mark .rr-l{position:relative;display:inline-block;transform-style:preserve-3d}
.rr-mark .rr-sp{display:inline-block;width:.26em}
.rr-mark .rr-half{position:absolute;left:0;top:0;transform-style:preserve-3d}
.rr-mark .rr-half.rr-t{position:relative;display:block}
.rr-mark .rr-z{position:absolute;left:0;top:0;display:block;color:var(--c);transform:translateZ(calc(var(--k)*-.0105em));-webkit-text-stroke:.012em var(--c)}
.rr-mark .rr-z.rr-f{position:relative;color:transparent;-webkit-text-stroke:.018em #8a5a00;
  background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,252,230,.95) 50%,rgba(255,255,255,0) 58%) 120% 0/300% 100% no-repeat,linear-gradient(180deg,#fff27a 0%,#f7d117 38%,#f0b40a 78%,#d98c00 100%);
  -webkit-background-clip:text;background-clip:text;transform:translateZ(.001em)}
.rr-mark .rr-slash{position:absolute;height:0;transform-origin:0 0;pointer-events:none}
.rr-mark .rr-slash b{position:absolute;left:0;top:-.022em;width:100%;height:.044em;border-radius:.03em;transform-origin:left center;transform:translateZ(.2em);
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 12%,#fff 88%,rgba(255,255,255,0));box-shadow:0 0 .07em #fff,0 0 .25em rgba(255,240,200,.8)}
.rr-mark.static .rr-l{transform:rotateY(-14deg) rotateX(6deg)}
.rr-mark.static .rr-t{transform:translate(.06em,-.026em)}
.rr-mark.static .rr-b{transform:translate(-.06em,.026em)}
/* the title card */
#tsh .tsh-title.rr{z-index:8;background:radial-gradient(ellipse at center,rgba(0,0,0,.72),rgba(0,0,0,.3) 75%);opacity:1;pointer-events:none;visibility:hidden}
#tsh .tsh-title.rr.on{animation:none;visibility:visible}
#tsh .tsh-title.rr .rr-mark{font-size:min(11.5vw,128px)}
#tsh .tsh-title.rr .rr-sub{margin-top:26px;font:700 17px var(--font-disp);letter-spacing:.46em;color:#f7d117;opacity:0;text-shadow:0 2px 10px #000}
#tsh .tsh-title.rr .rr-sub2{margin-top:9px;font:13px var(--font);letter-spacing:.34em;color:#e8e6d8;opacity:0}
#tsh .tsh-title.rr.on .rr-l{animation:rrSpin .85s cubic-bezier(.2,1.25,.35,1) calc(var(--i)*.11s) both}
#tsh .tsh-title.rr.on .rr-word{animation:rrShake .34s linear calc(var(--n)*.11s + .72s) both}
#tsh .tsh-title.rr.on .rr-t{animation:rrTopCut .22s cubic-bezier(.2,1.6,.4,1) calc(var(--n)*.11s + 1.14s) both,rrTopOut .75s cubic-bezier(.55,0,.9,.35) calc(4.65s + var(--i)*.05s) forwards}
#tsh .tsh-title.rr.on .rr-b{animation:rrBotCut .22s cubic-bezier(.2,1.6,.4,1) calc(var(--n)*.11s + 1.14s) both,rrBotOut .75s cubic-bezier(.55,0,.9,.35) calc(4.65s + var(--i)*.05s) forwards}
#tsh .tsh-title.rr.on .rr-f{animation:rrGlint 1.1s ease-in-out calc(var(--n)*.11s + 1.6s) both}
#tsh .tsh-title.rr.on .rr-slash b{animation:rrSlash .2s cubic-bezier(.9,0,.3,1) calc(var(--n)*.11s + .95s) both,rrBurn .5s ease-in 4.6s forwards}
#tsh .tsh-title.rr.on .rr-sub{animation:rrUp .55s cubic-bezier(.2,1,.3,1) calc(var(--n)*.11s + 1.3s) both,rrFade .35s ease 4.6s forwards}
#tsh .tsh-title.rr.on .rr-sub2{animation:rrUp .55s cubic-bezier(.2,1,.3,1) calc(var(--n)*.11s + 1.5s) both,rrFade .35s ease 4.6s forwards}
#tsh .tsh-title.rr.on::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#fff,rgba(255,250,230,.4) 40%,transparent 70%);opacity:0;animation:rrFlash .45s ease-out calc(9*.11s + .97s) both}
#tsh .tsh-title.rr.on{animation:rrOut .45s ease 5.5s forwards}
@keyframes rrSpin{0%{transform:translate3d(var(--dx),var(--dy),-6em) rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(var(--r));opacity:0}
  25%{opacity:1}100%{transform:none;opacity:1}}
@keyframes rrShake{0%,100%{transform:var(--tilt)}15%{transform:var(--tilt) translate(-.02em,.015em) rotate(-.4deg)}30%{transform:var(--tilt) translate(.025em,-.01em) rotate(.3deg)}50%{transform:var(--tilt) translate(-.012em,.008em)}70%{transform:var(--tilt) translate(.008em,-.006em)}}
@keyframes rrSlash{0%{transform:translateZ(.2em) scaleX(0)}100%{transform:translateZ(.2em) scaleX(1)}}
@keyframes rrBurn{0%{opacity:1;transform:translateZ(.2em) scaleY(1)}40%{opacity:1;transform:translateZ(.2em) scaleY(2.2)}100%{opacity:0;transform:translateZ(.2em) scaleY(0)}}
@keyframes rrTopCut{0%{transform:none}100%{transform:translate(.06em,-.026em)}}
@keyframes rrBotCut{0%{transform:none}100%{transform:translate(-.06em,.026em)}}
@keyframes rrTopOut{0%{transform:translate(.06em,-.026em);opacity:1}100%{transform:translate3d(1.9em,-1.1em,2em) rotateX(var(--rt)) rotateZ(25deg);opacity:0}}
@keyframes rrBotOut{0%{transform:translate(-.06em,.026em);opacity:1}100%{transform:translate3d(-1.9em,1.1em,2em) rotateX(var(--rb)) rotateZ(-25deg);opacity:0}}
@keyframes rrGlint{0%{background-position:120% 0,0 0}100%{background-position:-20% 0,0 0}}
@keyframes rrUp{0%{opacity:0;transform:translateY(14px);letter-spacing:.8em}100%{opacity:1;transform:none}}
@keyframes rrFade{to{opacity:0}}
@keyframes rrFlash{0%{opacity:0}2%{opacity:.75}100%{opacity:0}}
@keyframes rrOut{to{opacity:0}}
/* on the results */
#tsh .tsh-res .rr-mark{font-size:54px;margin:0 auto 6px;display:table}
/* ROBIN RYU in solid 3-D (rrtitle.js): the flat letters keep the layout, the blocks are drawn over them */
#tsh .tsh-title.rr .rr-gl{position:absolute;left:0;top:0;pointer-events:none;filter:drop-shadow(0 .5vw .9vw rgba(0,0,0,.65))}
#tsh .tsh-title.rr.rr3d .rr-l,#tsh .tsh-title.rr.rr3d .rr-slash{visibility:hidden}

/* the look-speed readout (- and =) */
.look-toast{position:fixed;left:50%;bottom:18%;transform:translate(-50%,8px);z-index:90;padding:9px 16px;border-radius:12px;background:rgba(6,12,12,.86);border:1px solid rgba(56,255,208,.4);color:#e8fff8;font:700 13px var(--font-disp);letter-spacing:.12em;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.look-toast.on{opacity:1;transform:translate(-50%,0)}

/* --------------------------------------------- the score card (tshscore.js)
   Top right under the clock: level, XP, coins; the chain under it while one is
   going; and what it banked, in the middle of the screen for a moment. */
#tshScore{position:fixed;inset:0;pointer-events:none;z-index:31;font-family:var(--font-disp, monospace)}
#tshScore.hidden{display:none}
#tshScore .sc-card{position:absolute;right:18px;top:116px;display:grid;grid-template-columns:auto 120px;gap:3px 10px;align-items:center;
  background:rgba(4,16,15,.72);border:1px solid rgba(143,240,255,.25);border-radius:10px;padding:8px 12px;color:#dff}
#tshScore .sc-lv{font-size:15px;letter-spacing:.08em;color:#ffd27a}
#tshScore .sc-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
#tshScore .sc-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8ff0ff,#ffd27a);transition:width .4s}
#tshScore .sc-xp{font-size:12px;color:#a8d8cc}
#tshScore .sc-coin{font-size:13px;color:#ffd27a;text-align:right}
#tshScore .sc-chain{position:absolute;right:18px;top:184px;min-width:190px;text-align:right;color:#fff;text-shadow:0 2px 8px #000}
#tshScore .sc-chain.hidden{display:none}
#tshScore .sc-head{display:flex;justify-content:flex-end;gap:10px;align-items:baseline}
#tshScore .sc-mult{font-style:normal;color:#ffd27a;font-size:18px;font-weight:700}
#tshScore .sc-pts{font-size:24px}
#tshScore .sc-chain ul{list-style:none;margin:4px 0 0;padding:0;font-size:13px;letter-spacing:.06em}
#tshScore .sc-chain small{color:#8ff0ff}
#tshScore .sc-bank{position:absolute;left:50%;top:30%;transform:translate(-50%,0);text-align:center;color:#fff;text-shadow:0 3px 14px #000;opacity:0}
#tshScore .sc-bank.on{animation:scBank 2.2s ease-out forwards}
#tshScore .sc-bank.hidden{display:none}
#tshScore .sc-bank b{display:block;font-size:34px;color:#8ff0ff;letter-spacing:.06em}
#tshScore .sc-bank.big b{font-size:44px;color:#ffd27a}
#tshScore .sc-bank.lost b{color:#ff6a5a}
#tshScore .sc-bank small{font-size:14px;color:#cfe}
@keyframes scBank{0%{opacity:0;transform:translate(-50%,14px)}12%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-18px)}}

/* the end of the day: TO BE CONTINUED */
#tsh .tsh-tbc{text-align:center;color:#fff;font-family:var(--font-disp, monospace);letter-spacing:.2em;animation:scBank 5s ease-out forwards}
#tsh .tsh-tbc small{display:block;color:#ffd9a8;font-size:14px;margin-bottom:10px}
#tsh .tsh-tbc b{font-size:34px}
/* the chase: how close she is to losing it */
#tsh .tsh-lose{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:20;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;
  font:700 12px/1 system-ui,sans-serif;letter-spacing:.25em;color:#fff;text-shadow:0 0 8px #000}
#tsh .tsh-lose.on{opacity:1}
#tsh .tsh-lose div{width:min(320px,60vw);height:8px;margin-top:6px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
#tsh .tsh-lose i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff2aa8,#22e8ff);transition:width .15s}