/* LOKES ONE — Pixel Cartridge House.
   Defense-grade austerity (black field, white ink, crop-mark frames, tactical readouts)
   crossed with Space Invaders (marching formation, score line, notched game tokens).
   Odin is the comic relief. Grid: 8px. Corners: sharp or stepped, never rounded.
   Glow: one crisp ring, never a blur. */

:root{
  --u:8px;
  --patrol:40px;

  --bg:#030403;
  --panel:#080A08;
  --panel-2:#0C100D;
  --ink:#F2F4F1;
  --ink-dim:#A6AEA8;
  --mute:#5F6A62;

  --green:#39FF88;
  --green-deep:#0F5A30;
  --line:#242A26;
  --line-hi:#3A443D;
  --pink:#FF4FD2;
  --amber:#FFB84A;
  --cyan:#5DFFEF;

  --font-body:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-px:"Silkscreen","IBM Plex Mono",ui-monospace,monospace;

  /* stepped pixel corner, 8px notch */
  --notch:polygon(
    var(--u) 0, calc(100% - var(--u)) 0,
    calc(100% - var(--u)) var(--u), 100% var(--u),
    100% calc(100% - var(--u)), calc(100% - var(--u)) calc(100% - var(--u)),
    calc(100% - var(--u)) 100%, var(--u) 100%,
    var(--u) calc(100% - var(--u)), 0 calc(100% - var(--u)),
    0 var(--u), var(--u) var(--u)
  );
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{min-height:100%}
body{
  font-family:var(--font-body);
  font-size:14px;line-height:1.5;
  background:var(--bg);color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--green);color:var(--bg)}
a{color:var(--cyan)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* faint scanline hint only — the surface stays clean */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.18) 0 1px,transparent 1px 4px);
  opacity:0.22;
}

/* pixel starfield sits behind everything */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;image-rendering:pixelated}

/* ---------- primitives ---------- */
/* system frame: sharp corners + crop marks (tactical) */
.frame{position:relative;background:var(--panel);border:2px solid var(--line)}
.frame::after{
  content:"";position:absolute;inset:-6px;pointer-events:none;
  --m:linear-gradient(var(--ink-dim),var(--ink-dim));
  background:
    var(--m) top left/12px 2px,var(--m) top left/2px 12px,
    var(--m) top right/12px 2px,var(--m) top right/2px 12px,
    var(--m) bottom left/12px 2px,var(--m) bottom left/2px 12px,
    var(--m) bottom right/12px 2px,var(--m) bottom right/2px 12px;
  background-repeat:no-repeat;
}
/* game token: stepped pixel corners (arcade) */
.token{position:relative;background:var(--panel);border:2px solid var(--line);clip-path:var(--notch)}
.label{
  font-family:var(--font-px);font-size:10px;line-height:1;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--mute);
}
.icon{display:inline-block;width:32px;height:32px;fill:currentColor;shape-rendering:crispEdges;vertical-align:middle}

/* ---------- shell ---------- */
.shell{
  position:relative;z-index:1;
  max-width:1200px;margin:calc(var(--u)*3) auto calc(var(--u)*6);
  padding:0 calc(var(--u)*2);
  overflow-x:clip;
}

/* HUD bar */
.hud{
  display:flex;align-items:center;gap:calc(var(--u)*2);
  padding:calc(var(--u)*1.5) calc(var(--u)*2);
}
.score{
  display:flex;flex-wrap:wrap;gap:var(--u) calc(var(--u)*3);
  padding:var(--u) calc(var(--u)*2) 0;
  font-family:var(--font-px);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-dim);
}
.score .k{color:var(--mute)}
.score .v{color:var(--ink)}
.score .ini{color:var(--green)}
.score.demo #score{color:var(--mute)}
.score .lives{display:inline-flex;gap:4px;vertical-align:middle}
.score .lives svg{width:14px;height:12px;fill:var(--pink)}
.score .right{margin-left:auto}
.score .coord{color:var(--mute)}
.score .combo{display:none;color:var(--pink)}
.score .combo .v{color:var(--pink)}
.score .combo.on{display:inline;animation:blink 0.5s steps(1,end) 2}
.coin{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--ink-dim);letter-spacing:inherit;text-transform:inherit;
}
.coin:hover,.coin:focus-visible{color:var(--green);outline:none}
.coin-blink{color:var(--amber);animation:blink 1.1s steps(1,end) infinite}

/* arcade button: chunky offset, presses in */
.arcade-btn{box-shadow:3px 3px 0 var(--line-hi)}
.arcade-btn:active{transform:translate(3px,3px);box-shadow:none}
.hud .cart{white-space:nowrap;
  display:flex;align-items:center;gap:var(--u);
  font-family:var(--font-px);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);
}
.hud .cart .bit{width:10px;height:10px;background:var(--green);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--green-deep)}
.hud .cart .sub{color:var(--mute)}
.readouts{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--u) calc(var(--u)*2)}
.ro{display:flex;align-items:center;gap:6px;font-family:var(--font-px);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
.ro .k{color:var(--mute)}
.ro .pip{display:inline-block;width:8px;height:8px;border:2px solid var(--ink-dim)}
.ro.on .pip{background:var(--green);border-color:var(--green);animation:blink 1.6s steps(1,end) infinite}
.ro.on{color:var(--green)}
.ro.warn .pip{background:var(--amber);border-color:var(--amber)}
.ro.warn{color:var(--amber)}
.ro.off .pip{border-color:var(--mute)}
.ro.off{color:var(--mute)}
.ro .pips{display:inline-flex;gap:3px}
.ro .pips i{display:block;width:6px;height:6px;background:var(--green)}

/* one pink laser under the HUD */
.laser{
  height:2px;margin:calc(var(--u)*1) calc(var(--u)*3) 0;
  background:linear-gradient(90deg,transparent 0%,var(--pink) 18%,var(--pink) 82%,transparent 100%);
  opacity:0.55;animation:laser 5s steps(6,end) infinite;
}
@keyframes laser{0%,100%{opacity:0.3}50%{opacity:0.75}}

/* ---------- marquee: the cabinet's name plate, above the screen ---------- */
.marquee{
  display:grid;grid-template-columns:auto 1fr auto;gap:calc(var(--u)*2) calc(var(--u)*4);align-items:center;
  margin-top:calc(var(--u)*3);padding:0 calc(var(--u)*3);
}
.marquee .mark{display:flex;flex-direction:column;gap:var(--u)}
.marquee-copy{display:flex;flex-direction:column;gap:var(--u);min-width:0}

/* ---------- stage (hero) ---------- */
.hero{
  position:relative;
  display:grid;grid-template-columns:1fr;justify-items:center;align-items:end;
  margin-top:calc(var(--u)*2);
  padding:calc(var(--u)*30) calc(var(--u)*3) 0;   /* top airspace is the invaders' lane: sky + five rows clear of the ears */
  border-top:2px solid var(--line);
  border-bottom:2px solid var(--line);
}
/* invader formation marches across the whole stage, behind Odin and the copy */
#invaders{position:absolute;inset:0;z-index:0;pointer-events:none;image-rendering:pixelated}
.hero>*{position:relative;z-index:1}
.hero.playing .odin .stage,.hero.playing .odin .flip,
.hero.attract .odin .stage,.hero.attract .odin .flip{animation:none}
.hero.playing .odin{cursor:crosshair}
.hero.playing{cursor:crosshair;touch-action:none}
.hero.shake{animation:shake 0.24s steps(4,end) 1}
@keyframes shake{
  0%{transform:translate(0,0)}25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,-2px)}100%{transform:translate(0,0)}
}
.hero.flash::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--pink);opacity:0.14;animation:blink 0.12s steps(1,end) 2;
}
.stage-tag{
  position:absolute;left:calc(var(--u)*3);bottom:var(--u);z-index:2;
  display:flex;align-items:center;gap:var(--u);
}
.stage-tag .mode{
  font-family:var(--font-px);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--bg);background:var(--ink-dim);padding:2px 6px;
}
.hero.attract .stage-tag .mode{background:var(--amber)}
.hero.playing .stage-tag .mode{background:var(--green)}
.play{
  align-self:center;
  font-family:var(--font-px);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  background:var(--panel);color:var(--ink);border:2px solid var(--line-hi);padding:var(--u) calc(var(--u)*2);cursor:pointer;
  clip-path:var(--notch);
}
.play:hover{color:var(--bg);background:var(--green);border-color:var(--green)}
.play .blink{animation:blink 1.2s steps(1,end) infinite}
body.attract .play{color:var(--green);border-color:var(--green)}
body.playing .play{color:var(--pink);border-color:var(--pink)}
.game-msg{
  position:absolute;left:50%;top:27%;transform:translateX(-50%);z-index:3;pointer-events:none;
  font-family:var(--font-px);font-size:clamp(14px,2.6vw,24px);letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);
  text-align:center;white-space:nowrap;display:none;
  padding:var(--u) calc(var(--u)*2);background:var(--bg);border:2px solid var(--line);
}
.game-msg.show{display:block}
.game-msg.pulse{animation:blink 0.9s steps(1,end) infinite}
.game-msg.pink{color:var(--pink);border-color:var(--pink)}
.game-msg.green{color:var(--green);border-color:var(--green-deep)}
.game-msg small{display:block;font-size:9px;color:var(--ink-dim);margin-top:var(--u);letter-spacing:0.1em}

/* score pops: DOM so the pixel font stays crisp */
.pops{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.pop{
  position:absolute;font-family:var(--font-px);font-size:11px;letter-spacing:0.06em;color:var(--ink);
  animation:pop-up 0.8s steps(6,end) 1 forwards;white-space:nowrap;
}
.pop.pink{color:var(--pink)}
.pop.green{color:var(--green)}
.pop.big{font-size:16px}
@keyframes pop-up{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-40px);opacity:0}}

/* over / win screen */
.screen{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  width:min(calc(100% - var(--u)*6),520px);max-height:calc(100% - var(--u)*4);overflow:auto;
  padding:calc(var(--u)*3);background:var(--bg);border-color:var(--line-hi);
  text-align:center;scrollbar-width:thin;scrollbar-color:var(--line-hi) transparent;
  touch-action:auto;cursor:default;
}
.screen[hidden]{display:none}
.screen-title{
  font-family:var(--font-px);font-size:clamp(20px,4vw,32px);letter-spacing:0.12em;text-transform:uppercase;color:var(--ink);line-height:1;
}
.screen.win .screen-title{color:var(--green)}
.screen.over .screen-title{color:var(--pink)}
.screen-sub{margin-top:var(--u);font-family:var(--font-px);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-dim)}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--u);margin-top:calc(var(--u)*2);
  padding:var(--u) 0;border-top:2px solid var(--line);border-bottom:2px solid var(--line);
}
.stats div{display:flex;flex-direction:column;gap:4px}
.stats dt{font-family:var(--font-px);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--mute)}
.stats dd{font-family:var(--font-px);font-size:14px;color:var(--ink)}
.initials{margin-top:calc(var(--u)*2);display:flex;flex-direction:column;align-items:center;gap:var(--u)}
.initials[hidden]{display:none}
.initials .label{color:var(--pink)}
.slots{display:flex;gap:var(--u)}
.slot{display:flex;flex-direction:column;align-items:center;gap:2px}
.slot button{
  width:40px;height:24px;background:transparent;border:2px solid var(--line);color:var(--ink-dim);
  font-family:var(--font-px);font-size:10px;cursor:pointer;padding:0;
}
.slot button:hover{border-color:var(--green);color:var(--green)}
.slot .ch{
  width:40px;height:48px;display:grid;place-items:center;
  font-family:var(--font-px);font-size:24px;color:var(--ink);border:2px solid var(--line-hi);background:var(--panel);
}
.slot.cur .ch{border-color:var(--green);color:var(--green)}
.initials .ok{
  margin-top:var(--u);font-family:var(--font-px);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  background:var(--green);color:var(--bg);border:2px solid var(--green);padding:6px 14px;cursor:pointer;clip-path:var(--notch);
}
.table{list-style:none;margin-top:calc(var(--u)*2);display:flex;flex-direction:column;gap:4px;text-align:left}
.table li{
  display:grid;grid-template-columns:24px 1fr auto auto;gap:calc(var(--u)*2);
  font-family:var(--font-px);font-size:11px;letter-spacing:0.06em;color:var(--ink-dim);
}
.table li .n{color:var(--mute)}
.table li .s{color:var(--ink)}
.table li .w{color:var(--mute)}
.table li.you{color:var(--green)}
.table li.you .s{color:var(--green)}
.table:empty{display:none}
.screen-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--u);margin-top:calc(var(--u)*3)}
.screen-actions button{
  font-family:var(--font-px);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  background:var(--panel);color:var(--ink);border:2px solid var(--line-hi);padding:var(--u) calc(var(--u)*2);cursor:pointer;
  clip-path:var(--notch);
}
.screen-actions button:hover{background:var(--green);color:var(--bg);border-color:var(--green)}
.screen-actions .go{border-color:var(--green);color:var(--green)}

/* Odin — the whole point */
.odin{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  min-height:0;
  cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;   /* the page still scrolls over the rabbit; during play .hero.playing takes the touches */
}
.odin .stage{position:relative;animation:patrol 16s steps(48,end) infinite;will-change:transform}
.odin .flip{animation:flip 16s steps(1,end) infinite}   /* snaps, never squishes */
.odin .body{animation:idle 6s steps(1,end) infinite;transform-origin:50% 100%}
.odin.face-left .flip{transform:scaleX(-1)}
.odin img{
  display:block;
  width:clamp(300px,46vw,600px);height:auto;aspect-ratio:1/1;
  image-rendering:pixelated;image-rendering:crisp-edges;
  filter:drop-shadow(6px 6px 0 rgba(57,255,136,0.16));
  transform-origin:50% 100%;
}
.odin.hop .body{animation:hop 0.72s steps(6,end) 1}
.odin.spin .stage{animation:spin 1.2s steps(12,end) 1}
/* play reactions: recoil on fire, ouch on hit, cheer on sector clear */
.odin.recoil .body{animation:recoil 0.16s steps(2,end) 1}
.odin.ouch .body{animation:ouch 0.4s steps(4,end) 1}
.odin.ouch img{filter:drop-shadow(6px 6px 0 rgba(255,79,210,0.6))}
.odin.cheer .body{animation:cheer 1.2s steps(8,end) 1}
.odin.iframes img{animation:blink 0.28s steps(1,end) 5}
@keyframes recoil{0%{transform:translateY(0)}50%{transform:translateY(6px) scaleY(0.97)}100%{transform:translateY(0)}}
@keyframes ouch{0%{transform:rotate(0)}25%{transform:rotate(-6deg) translateX(-6px)}50%{transform:rotate(5deg) translateX(6px)}75%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
@keyframes cheer{
  0%{transform:translateY(0)}20%{transform:translateY(-48px)}40%{transform:translateY(0)}
  60%{transform:translateY(-32px)}80%{transform:translateY(0)}100%{transform:translateY(0)}
}
.odin .ground{
  position:relative;
  width:min(100%,640px);height:4px;margin-top:-6px;
  background:repeating-linear-gradient(90deg,var(--line-hi) 0 var(--u),transparent var(--u) calc(var(--u)*2));
}
/* while JS drives Odin across the stage the long ground line would slide under the copy; keep only his shadow */
.hero.attract .odin .ground,.hero.playing .odin .ground{background:none}
.odin .ground .shadow{
  position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:clamp(140px,20vw,260px);height:8px;
  background:repeating-linear-gradient(90deg,var(--green-deep) 0 4px,transparent 4px 8px);
  opacity:0.7;pointer-events:none;
}
.odin .cap{margin-top:calc(var(--u)*2);display:flex;align-items:center;gap:var(--u)}
.odin .cap .label{color:var(--ink-dim)}
.odin .cap .hint{font-family:var(--font-px);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--mute)}
.odin:hover .cap .hint,.odin:focus-visible .cap .hint{color:var(--green)}

/* hearts */
.hearts{position:absolute;inset:0;pointer-events:none;overflow:visible}
.heart{
  position:absolute;width:28px;height:24px;color:var(--pink);fill:currentColor;
  animation:heart-up 1.1s steps(8,end) 1 forwards;
}
@keyframes heart-up{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx,0),-140px);opacity:0}}

@keyframes idle{
  0%,100%{transform:translateY(0)}
  12%{transform:translateY(-4px)}
  24%{transform:translateY(0)}
  36%{transform:translateY(-4px)}
  48%{transform:translateY(0)}
  70%{transform:translateY(0) rotate(0deg)}
  73%{transform:translateY(0) rotate(-2deg)}
  76%{transform:translateY(0) rotate(0deg)}
}
@keyframes patrol{
  0%{transform:translateX(calc(var(--patrol)*-1))}
  22%{transform:translateX(var(--patrol))}
  25%{transform:translateX(var(--patrol))}
  47%{transform:translateX(calc(var(--patrol)*-1))}
  50%,100%{transform:translateX(calc(var(--patrol)*-1))}
}
@keyframes flip{
  0%,23.4%{transform:scaleX(1)}
  23.5%,48.4%{transform:scaleX(-1)}
  48.5%,100%{transform:scaleX(1)}
}
@keyframes hop{
  0%{transform:translateY(0) scaleY(1)}
  15%{transform:translateY(-12px) scaleY(1.04)}
  40%{transform:translateY(-72px) scaleY(1)}
  60%{transform:translateY(-72px) scaleY(1)}
  85%{transform:translateY(-12px) scaleY(1)}
  100%{transform:translateY(0) scaleY(0.98)}
}
@keyframes spin{0%{transform:rotateY(0)}100%{transform:rotateY(720deg)}}

/* on-screen pad — shown during play on coarse pointers / narrow screens */
.pad{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:calc(var(--u)*2);gap:var(--u);
  background:var(--bg);border-top:2px solid var(--line);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.pad button{
  height:64px;min-width:64px;flex:1;
  font-family:var(--font-px);font-size:20px;color:var(--ink);background:var(--panel);border:2px solid var(--line-hi);
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;padding:0;
}
.pad button:active,.pad button.down{background:var(--green);color:var(--bg);border-color:var(--green)}
.pad .fire{flex:2;color:var(--pink);border-color:var(--pink)}
.pad .fire:active,.pad .fire.down{background:var(--pink);border-color:var(--pink)}
.pad .quit{flex:0 0 64px;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-dim)}
@media (pointer:coarse),(max-width:900px){
  body.playing .pad{display:flex}
  body.playing.screen-open .pad{display:none}
  body.playing{padding-bottom:104px}
}

/* marquee copy */
.wordmark{color:var(--ink);fill:currentColor;width:min(100%,296px);height:auto;display:block;shape-rendering:crispEdges}
.wordmark-sub{
  font-family:var(--font-px);font-size:11px;letter-spacing:0.5em;text-transform:uppercase;color:var(--green);
}
.chips{display:flex;flex-wrap:wrap;gap:var(--u)}
.chip{
  font-family:var(--font-px);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;
  padding:6px 10px;border:2px solid var(--line);background:var(--panel);color:var(--ink-dim);
  display:inline-flex;align-items:center;gap:6px;
}
.chip::before{content:"";width:6px;height:6px;background:currentColor}
.chip.on{color:var(--green);border-color:var(--green-deep)}
.chip.warn{color:var(--amber)}
.chip.mute{color:var(--mute)}
.chip.oneup{color:var(--pink);border-color:var(--pink)}
.koan{color:var(--ink);font-size:15px;line-height:1.55;max-width:60ch}
.koan .am{color:var(--amber)}
.meta{color:var(--mute);font-size:11px;letter-spacing:0.14em;text-transform:uppercase}

/* ---------- C3i dialog box ---------- */
.dialog{
  margin-top:calc(var(--u)*4);
  border-color:var(--line-hi);
}
.dialog .head{
  display:flex;align-items:center;gap:var(--u);
  padding:calc(var(--u)*1.5) calc(var(--u)*2);
  border-bottom:2px solid var(--line);
}
.dialog .head .label{color:var(--green)}
.dialog .head .arrow{color:var(--green);font-family:var(--font-px);font-size:10px;animation:blink 1s steps(1,end) infinite}
.dialog .head button{
  margin-left:auto;font-family:var(--font-px);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;
  background:transparent;color:var(--ink);border:2px solid var(--line-hi);
  padding:6px 10px;cursor:pointer;
}
.dialog .head button:hover{background:var(--green);color:var(--bg);border-color:var(--green)}
.term-out{
  min-height:120px;max-height:260px;overflow-y:auto;
  padding:calc(var(--u)*1.5) calc(var(--u)*2);
  font-size:13px;line-height:1.6;color:var(--ink-dim);
  scrollbar-width:thin;scrollbar-color:var(--line-hi) transparent;
}
.term-out .sys{color:var(--mute);font-size:11px}
.term-out .me{color:var(--ink-dim)}
.term-out .c3i{color:var(--ink)}
.term-out .c3i .tag{color:var(--green)}
.term-out .am{color:var(--amber)}
.term-out .typing::after{content:"▮";color:var(--green);animation:blink 0.6s steps(1,end) infinite}
.term-in{
  display:flex;align-items:center;gap:var(--u);
  padding:calc(var(--u)*1.5) calc(var(--u)*2);border-top:2px solid var(--line);background:var(--panel-2);
}
.term-in .ps1{font-family:var(--font-px);font-size:11px;color:var(--green);white-space:nowrap}
.term-in input{
  flex:1;min-width:0;background:transparent;border:0;outline:none;
  font-family:var(--font-body);font-size:14px;color:var(--ink);caret-color:var(--green);
}
.term-in input::placeholder{color:var(--mute);opacity:1}

/* ---------- section labels ---------- */
.section{margin-top:calc(var(--u)*4)}
.section-head{display:flex;align-items:center;gap:calc(var(--u)*2);margin-bottom:calc(var(--u)*2)}
.section-head .label{color:var(--ink-dim)}
.section-head .rule{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 var(--u),transparent var(--u) calc(var(--u)*2))}

/* ---------- doors: level select ---------- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*2)}
.door{
  position:relative;display:grid;grid-template-columns:40px 1fr;gap:var(--u) calc(var(--u)*1.5);align-items:center;
  padding:calc(var(--u)*2);min-height:96px;
  background:var(--panel);border:2px solid var(--line);clip-path:var(--notch);
  color:inherit;text-decoration:none;
  transition:none;
}
.door .icon{grid-row:1/3;color:var(--ink-dim)}
.door .name{font-family:var(--font-px);font-size:11px;letter-spacing:0.04em;color:var(--ink);word-break:break-word}
.door .desc{font-size:12px;color:var(--mute);align-self:start}
.door .perm{position:absolute;right:calc(var(--u)*2);top:calc(var(--u)*1.5);font-size:9px;letter-spacing:0.08em;color:var(--green-deep)}
.door .lvl{position:absolute;right:calc(var(--u)*2);bottom:calc(var(--u)*1.5);font-family:var(--font-px);font-size:9px;color:var(--line-hi)}
.door:hover,.door:focus-visible{border-color:var(--green);background:var(--panel-2);outline:none;transform:translate(0,-4px)}
.door:hover .icon,.door:focus-visible .icon{color:var(--green)}
.door:hover .name,.door:focus-visible .name{color:var(--green)}
.door:hover .lvl,.door:focus-visible .lvl{color:var(--green)}
.door.soon .name{color:var(--ink-dim)}
.door.soon:hover .name{color:var(--amber)}
.door.soon:hover{border-color:var(--amber)}
.door.soon:hover .icon{color:var(--amber)}

/* ---------- readme scroll ---------- */
.scroll{
  padding:calc(var(--u)*2) calc(var(--u)*3);
  font-size:13px;line-height:1.7;color:var(--ink-dim);
}
.scroll .cmd{font-family:var(--font-px);font-size:10px;color:var(--mute);letter-spacing:0.06em;margin-bottom:var(--u)}
.scroll .hl{color:var(--ink)}
.scroll .am{color:var(--amber)}
.scroll .gr{color:var(--green)}
.scroll a{color:var(--cyan);text-decoration:none}
.scroll a:hover{color:var(--green)}

/* ---------- credits ---------- */
.credits{
  margin-top:calc(var(--u)*4);padding-top:calc(var(--u)*2);
  border-top:2px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--u) calc(var(--u)*3);align-items:center;
  font-family:var(--font-px);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--mute);
}
.credits a{color:var(--cyan);text-decoration:none}
.credits a:hover{color:var(--green)}
.credits .right{margin-left:auto}

@keyframes blink{50%{opacity:0}}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .doors{grid-template-columns:repeat(2,1fr)}
  /* phones: the stage comes first so Odin stays in the first fold; the name plate follows it */
  .shell{display:flex;flex-direction:column}
  .shell>*{order:3}
  .hud,.score,.laser{order:0}
  .hero{order:1}
  .marquee{order:2;margin-top:calc(var(--u)*3)}
  .marquee{grid-template-columns:1fr;justify-items:center;text-align:center;padding:0 calc(var(--u)*2)}
  .marquee .mark{align-items:center}
  .marquee-copy{align-items:center}
  .marquee .play{justify-self:center;padding:calc(var(--u)*1.5) calc(var(--u)*3)}
  .wordmark{width:min(100%,360px)}
  .hero{padding:calc(var(--u)*22) calc(var(--u)*2) 0}
  .odin img{width:min(84vw,560px)}
  /* during play Odin becomes a cannon-sized rabbit so he can actually cross the stage, and the lane grows */
  .hero.playing{padding-top:calc(var(--u)*44)}
  .hero.playing .odin img{width:min(44vw,240px)}
  .hero.playing .odin .cap,.hero.playing .odin .ground{display:none}
  .chips{justify-content:center}
  .koan{max-width:none}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  :root{--patrol:12px}
  .shell{margin:calc(var(--u)*1.5) auto calc(var(--u)*4);padding:0 var(--u)}
  .hud{flex-wrap:wrap;gap:var(--u)}
  .readouts{margin-left:0;width:100%;justify-content:space-between}
  .score .coin{margin-left:0}
  .doors{grid-template-columns:1fr}
  .door{min-height:88px}
  .hero{padding-top:calc(var(--u)*20)}
  .hero.playing{padding-top:calc(var(--u)*42)}
  .odin img{width:min(92vw,440px)}
  .hero.playing .odin img{width:min(40vw,200px)}
  .stage-tag .label{display:none}
  .game-msg{white-space:normal;width:calc(100% - var(--u)*4)}
  .screen{padding:calc(var(--u)*2)}
  .term-in input{font-size:16px}
  .koan{font-size:15px}
  .laser{margin:var(--u) var(--u) 0}
}

@media (prefers-reduced-motion:reduce){
  .odin .stage,.odin .flip,.odin .body,.odin.hop .body,.odin.spin .stage,.odin.iframes img{animation:none}
  .laser,.ro.on .pip,.dialog .head .arrow,.coin-blink,.stage-tag .mode,.game-msg.pulse,.score .combo.on{animation:none}
  .hero.shake,.hero.flash::before{animation:none}
  .heart,.pop{animation-duration:0.01s}
  .door:hover,.door:focus-visible{transform:none}
}