/* Layout: one pixel stage (16:9) with a slim control bar; terminal, Code-Dex phone and dialogs float above it. */
:root{
  --ink:#130f1c; --panel:#1e1730; --line:#3b2e55; --paper:#f4e9d8; --muted:#a898c0;
  --amber:#ffb454; --amber-dim:#8a5a1e; --coral:#ff6f61; --sky:#7fd4ff; --leaf:#86d08a; --violet:#b48cff;
  --crt:#140d07;
  --f-pix:"Silkscreen", "Courier New", monospace;
  --f-term:"VT323", "Courier New", monospace;
  --f-body:"Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;background:var(--ink);color:var(--paper)}
body{font-family:var(--f-body);overflow:hidden}
#app{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding-block:8px;padding-inline:16px;box-sizing:border-box}
#stage{--ar:calc(16 / 9);position:relative;width:min(100%, calc((100dvh - 70px) * var(--ar)));aspect-ratio:var(--ar);max-width:100%;border:2px solid var(--line);border-radius:6px;overflow:hidden;background:#000;box-shadow:0 0 0 6px #0c0912, 0 18px 50px #0008}
#cv{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair;touch-action:none}
#bar{width:min(100%, calc((100dvh - 70px) * var(--ar, 16 / 9)));display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:var(--f-pix);font-size:11px;color:var(--muted)}
#bar .sp{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn{font-family:var(--f-pix);font-size:11px;background:var(--panel);color:var(--paper);border:1px solid var(--line);border-radius:4px;padding:6px 10px;cursor:pointer;letter-spacing:.04em}
.btn:hover{border-color:var(--amber);color:var(--amber)}
.btn:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.btn.primary{background:var(--amber);color:#24160a;border-color:var(--amber)}
.btn.primary:hover{background:#ffc778;color:#24160a}

.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#0a0710cc;z-index:20;box-sizing:border-box}
/* Title */
#title .card{max-width:620px;width:100%;background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:26px 26px 22px;display:grid;gap:14px}
#title h1{font-family:var(--f-pix);font-weight:700;font-size:clamp(26px,6vw,44px);line-height:1;margin:0;color:var(--amber);letter-spacing:.02em;text-shadow:3px 3px 0 #5a2d12}
#title h1 small{display:block;font-size:.36em;color:var(--sky);text-shadow:none;margin-top:10px;letter-spacing:.12em}
#title p{margin:0;line-height:1.55;max-width:60ch;color:#e6dbcc}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px 16px;font-size:13px;color:var(--muted)}
.keys b{font-family:var(--f-pix);font-weight:400;color:var(--paper);font-size:11px;background:#2b2142;border:1px solid var(--line);border-radius:3px;padding:1px 5px;margin-right:6px}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* Dialog */
#dialog .card{max-width:560px;width:100%;background:#f2e6cf;color:#2a1e14;border-radius:6px;padding:22px 24px;box-shadow:6px 6px 0 #0007;display:grid;gap:12px;max-height:85dvh;overflow:auto}
#dialog h2{font-family:var(--f-pix);font-size:16px;margin:0;color:#7a3b12;text-wrap:balance}
#dialog .body{line-height:1.6;white-space:pre-wrap;font-size:15px}
#dialog .tag{font-family:var(--f-pix);font-size:10px;letter-spacing:.12em;color:#9a6b3b;text-transform:uppercase}
#dialog .btn{justify-self:start;background:#2a1e14;color:#f2e6cf;border-color:#2a1e14}

/* Terminal */
#term .win{width:min(1040px,100%);height:min(88dvh,680px);background:var(--crt);border:2px solid var(--amber-dim);border-radius:10px;display:grid;grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:auto minmax(0,1fr);overflow:hidden;box-shadow:0 0 40px #ffb45422}
#term header{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:8px 12px;background:#24170b;border-bottom:1px solid var(--amber-dim);font-family:var(--f-pix);font-size:11px;color:var(--amber);flex-wrap:wrap}
#term header .nm{font-size:13px}
.badge{border:1px solid currentColor;border-radius:3px;padding:1px 6px;font-size:10px;letter-spacing:.08em}
#term header .sp{flex:1}
#tMain{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;background:repeating-linear-gradient(0deg,#0000 0 2px,#ffffff05 2px 3px)}
#tOut{flex:1;overflow:auto;padding:10px 14px;font-family:var(--f-term);font-size:20px;line-height:1.12;color:var(--amber);white-space:pre-wrap;word-break:break-word;text-shadow:0 0 6px #ffb45455}
#tOut .cmd{color:#ffe0b0}
#tOut .err{color:var(--coral);text-shadow:0 0 6px #ff6f6155}
#tOut .ok{color:var(--leaf);text-shadow:0 0 6px #86d08a55}
#tOut .sys{color:var(--sky);text-shadow:0 0 6px #7fd4ff44}
#tOut .dim{color:#b88a4f}
#tForm{display:flex;gap:6px;align-items:center;padding:8px 14px;border-top:1px solid #3a2410;font-family:var(--f-term);font-size:20px;color:var(--amber)}
#tPrompt{white-space:nowrap;max-width:50%;overflow:hidden;text-overflow:ellipsis}
#tIn{flex:1;min-width:0;background:transparent;border:0;color:#ffe0b0;font:inherit;caret-color:var(--amber);outline:none}
#tEd{display:flex;flex-direction:column;border-top:1px solid #3a2410;max-height:52%}
#tEd .edbar{display:flex;gap:8px;align-items:center;padding:6px 10px;background:#1f150a;font-family:var(--f-pix);font-size:10px;color:var(--amber);flex-wrap:wrap}
#tEd .edbar .sp{flex:1}
#tCode{flex:1;min-height:150px;resize:none;background:#0d0804;color:#ffe0b0;border:0;padding:10px 14px;font-family:var(--f-term);font-size:20px;line-height:1.15;tab-size:4;outline:none}
#tSide{border-left:1px solid #3a2410;display:flex;flex-direction:column;min-height:0;background:#1a1109}
#tSide h3{font-family:var(--f-pix);font-size:10px;letter-spacing:.14em;color:#c88f4a;margin:12px 12px 6px;font-weight:400;text-transform:uppercase}
#tGoal{margin:0 12px;color:#f3d9b3;font-size:13.5px;line-height:1.45}
#tBlocks{flex:1;overflow:auto;padding:0 10px 10px;display:grid;gap:6px;align-content:start}
.blk{text-align:left;background:#2a1b0d;border:1px solid #4d3216;border-radius:6px;padding:7px 9px;color:#ffe0b0;cursor:pointer;font-family:var(--f-term);font-size:17px;line-height:1.1;white-space:pre-wrap;word-break:break-word}
.blk small{display:block;font-family:var(--f-pix);font-size:9px;color:#c88f4a;letter-spacing:.06em;margin-bottom:3px}
.blk:hover{border-color:var(--amber)}
.tside-btns{display:flex;gap:6px;padding:10px;border-top:1px solid #3a2410;flex-wrap:wrap}
.tbtn{font-family:var(--f-pix);font-size:10px;background:#2a1b0d;color:var(--amber);border:1px solid #6b4520;border-radius:4px;padding:5px 9px;cursor:pointer}
.tbtn:hover{background:#3b260f}
@media (max-width:760px){
  #term .win{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;height:94dvh}
  #tSide{border-left:0;border-top:1px solid #3a2410;max-height:34dvh}
  #tOut,#tForm,#tCode{font-size:17px}
  #tPrompt{max-width:42%}
}

/* Code-Dex phone */
#dex{background:#0a071099;align-items:flex-end}
#dex .phone{width:min(390px,100%);height:min(780px,92dvh);background:#05040a;border:3px solid #2c2440;border-radius:42px;box-shadow:0 0 0 2px #0e0b18, 0 30px 80px #000c, inset 0 0 0 6px #0b0914;position:relative;overflow:hidden;display:flex;flex-direction:column;animation:rise .34s cubic-bezier(.2,1.2,.4,1) both;margin-bottom:max(0px, calc((100dvh - 780px)/2))}
@keyframes rise{from{transform:translateY(110%) rotate(4deg)}to{transform:none}}
@media (prefers-reduced-motion:reduce){#dex .phone{animation:none}}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:14px 26px 4px;font-family:var(--f-pix);font-size:11px;color:#d6cdea;position:relative;z-index:2}
.ph-notch{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:96px;height:24px;background:#000;border-radius:14px;z-index:3}
.ph-head{padding:6px 20px 8px;position:relative;z-index:2}
.ph-head h2{margin:0;font-family:var(--f-pix);font-size:20px;color:#fff;letter-spacing:.02em}
.ph-head h2 span{color:var(--violet)}
.ph-head p{margin:2px 0 0;font-size:12.5px;color:#9a8fbf}
.ph-body{flex:1;min-height:0;position:relative;overflow:hidden}
.ph-body .pane{position:absolute;inset:0;overflow:auto;padding:4px 16px 16px}
#dexGraph{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.ph-card{position:absolute;left:12px;right:12px;bottom:12px;background:#151026ee;border:1px solid #3a2f66;border-radius:18px;padding:14px 14px 12px;backdrop-filter:blur(8px);display:grid;gap:8px;box-shadow:0 10px 30px #0009}
.ph-card .k{font-family:var(--f-pix);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.ph-card h4{margin:0;font-size:17px;color:#fff}
.ph-card p{margin:0;font-size:13.5px;line-height:1.45;color:#cfc6e6}
.ph-card pre{margin:0;background:#07050d;border:1px solid #2a2248;border-radius:10px;padding:8px 10px;font-family:var(--f-term);font-size:18px;color:#ffe0b0;white-space:pre-wrap;word-break:break-word;max-height:130px;overflow:auto}
.ph-card .row .tbtn{background:#241c42;color:#d9cfff;border-color:#4a3d80}
.ph-legend{position:absolute;left:14px;top:4px;display:flex;flex-wrap:wrap;gap:4px 10px;font-family:var(--f-pix);font-size:9px;color:#9a8fbf;pointer-events:none}
.ph-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;vertical-align:0}
.ph-nav{display:grid;grid-template-columns:repeat(4,1fr);padding:8px 10px 18px;border-top:1px solid #1d1733;background:#08060f;position:relative;z-index:2}
.ph-nav button{background:none;border:0;color:#7d73a3;font-family:var(--f-pix);font-size:9px;letter-spacing:.06em;display:grid;justify-items:center;gap:4px;cursor:pointer;padding:4px}
.ph-nav button svg{width:20px;height:20px}
.ph-nav button[aria-selected="true"]{color:#fff}
.ph-nav button[aria-selected="true"] svg{filter:drop-shadow(0 0 6px var(--violet))}
.ph-x{position:absolute;right:18px;top:44px;z-index:4;background:#1d1733;border:1px solid #3a2f66;color:#cfc6e6;border-radius:50%;width:30px;height:30px;cursor:pointer;font-family:var(--f-pix);font-size:12px}
.lore{border-left:2px solid var(--violet);padding:2px 0 2px 12px;margin:14px 0}
.lore h5{margin:0 0 4px;font-family:var(--f-pix);font-size:11px;color:var(--violet);font-weight:400}
.lore p{margin:0;font-size:13.5px;line-height:1.5;color:#d8d0ec;white-space:pre-wrap}
.lore.locked h5,.lore.locked p{color:#4f466f}
.stack{display:grid;gap:8px;margin-top:6px}
.layer{border:1px solid #2c2450;border-radius:14px;padding:10px 12px;background:#0f0b1d}
.layer.on{border-color:var(--c);box-shadow:0 0 18px -6px var(--c)}
.layer h6{margin:0;font-family:var(--f-pix);font-size:11px;font-weight:400;color:var(--c)}
.layer p{margin:3px 0 0;font-size:12.5px;line-height:1.4;color:#a79dc8}
.layer.off h6{color:#4f466f}
.rank{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px dashed #241d40}
.rank b{font-family:var(--f-pix);font-weight:400;font-size:11px;color:#fff;min-width:0}
.rank span{font-size:12.5px;color:#9a8fbf}
.rank.cur b{color:var(--amber)}
.rank.lock b{color:#4f466f}
.pstat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 4px}
.pstat div{background:#0f0b1d;border:1px solid #2c2450;border-radius:12px;padding:8px;text-align:center}
.pstat b{display:block;font-family:var(--f-pix);font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.pstat span{font-size:10.5px;color:#8a80b0}



/* ───────── touch devices ───────── */
#pad{display:none}
.touch-keys{display:none}
body.touch .touch-keys{display:grid}
body.touch .desk-keys{display:none}
body.touch{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body.touch #app{gap:8px;padding-inline:max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right))}
body.touch #pad{display:grid;gap:8px;width:100%;touch-action:none}
#pad button,.pad-move{touch-action:none;-webkit-user-select:none;user-select:none;font-family:var(--f-pix);color:var(--paper)}
.pad-move{display:grid;grid-template-columns:1fr 1fr;border-radius:999px;background:#0d0a16cc;border:1px solid #ffffff2a;overflow:hidden;min-height:64px}
.pad-move span{display:grid;place-items:center;font-size:22px;color:#e9e0f5}
.pad-move span.on{background:#ffb45433;color:var(--amber)}
.pad-move span+span{border-left:1px solid #ffffff1c}
.pad-act{display:grid;grid-template-columns:1fr 1.15fr 1.25fr;gap:8px}
.pb{border-radius:16px;background:#0d0a16cc;border:1px solid #ffffff2a;min-height:64px;display:grid;place-content:center;gap:2px;padding:4px}
.pb b{font-size:13px;font-weight:700;letter-spacing:.06em}
.pb small{font-family:var(--f-body);font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pb.on{background:#86d08a33;border-color:var(--leaf)}.pb.on b{color:var(--leaf)}
.pb.use.ready{background:#ffb45430;border-color:var(--amber)}.pb.use.ready b{color:var(--amber)}
.pb.use:not(.ready){opacity:.55}
.pb.jump{background:#7fd4ff1f;border-color:#7fd4ff66}
.pb:active,.pb.down{transform:scale(.96);filter:brightness(1.3)}
.pad-slots{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.slot{position:relative;border-radius:12px;background:#0d0a16cc;border:1px solid #ffffff22;min-height:52px;display:grid;justify-items:center;align-content:center;gap:1px;padding:4px 2px}
.slot canvas{width:28px;height:28px;image-rendering:pixelated}
.slot span{font-size:9px;letter-spacing:.04em;color:var(--muted)}
.slot i{position:absolute;right:5px;top:3px;font-style:normal;font-size:10px;color:#e0c27a}
.slot i.short{color:var(--coral)}
.slot.sel{border-color:var(--amber);background:#ffb45426}.slot.sel span{color:var(--amber)}

/* portrait phone: game on top, controls at the bottom where thumbs are */
@media (orientation:portrait){
  body.touch #app{justify-content:flex-start;padding-block:max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom))}
  body.touch #stage{width:100%}
  body.touch #bar{width:100%;order:2}
  body.touch #pad{order:3;margin-top:auto;grid-template-columns:minmax(0,0.9fr) minmax(0,1.6fr);grid-template-areas:"slots slots" "move act"}
  body.touch #pad .pad-slots{grid-area:slots}
  body.touch .pad-move{grid-area:move;min-height:80px}
  body.touch .pad-act{grid-area:act}
  body.touch .pb{min-height:80px}
}
/* landscape phone: handheld layout, controls in the side gutters, nothing over the game */
@media (orientation:landscape){
  body.touch #app{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"slots stage act" "bar stage act" "move stage act";gap:8px 10px;align-items:stretch;justify-content:stretch;
    padding-block:max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-bottom))}
  body.touch #pad{display:contents}
  body.touch #stage{grid-area:stage;align-self:center;width:min(calc(100vw - 330px - env(safe-area-inset-left) - env(safe-area-inset-right)), calc((100dvh - 14px) * var(--ar)))}
  body.touch #bar{grid-area:bar;width:auto;flex-direction:column;align-items:stretch;justify-content:center;gap:6px}
  body.touch #bar .sp{display:none}
  body.touch #bar .btn{padding:7px 6px;font-size:10px}
  body.touch .pad-slots{grid-area:slots;grid-template-columns:repeat(3,1fr);gap:5px}
  body.touch .slot{min-height:46px}body.touch .slot canvas{width:22px;height:22px}
  body.touch .slot span{display:none}
  body.touch .pad-move{grid-area:move;min-height:70px}
  body.touch .pad-act{grid-area:act;grid-template-columns:1fr;grid-template-rows:1fr 1fr 1.2fr}
  body.touch .pb{min-height:0}
}
/* terminal quick keys */
#tKeys{display:none;gap:6px;padding:6px 10px;border-top:1px solid #3a2410;overflow-x:auto;scrollbar-width:none}
#tKeys button{flex:none;font-family:var(--f-term);font-size:19px;min-width:40px;min-height:36px;background:#2a1b0d;color:#ffe0b0;border:1px solid #6b4520;border-radius:8px;padding:0 10px;touch-action:manipulation}
body.touch #tKeys{display:flex}
#tGo{font-family:var(--f-pix);font-size:10px;background:var(--amber);color:#24160a;border:0;border-radius:6px;padding:8px 10px;cursor:pointer}
#tSideBtn{display:none}
body.touch #tIn{font-size:18px}
@media (max-width:760px){
  #tSideBtn{display:inline-block}
  #term .win.noside{grid-template-rows:auto minmax(0,1fr)}
  #term .win.noside #tSide{display:none}
  #term{padding:0;align-items:stretch}
  #term .win{width:100%;height:100%;border-radius:0;border-width:0}
}

/* Code-Dex: full-screen sheet on phones */
@media (max-width:520px), (max-height:520px){
  #dex{padding:0;align-items:stretch}
  #dex .phone{width:100%;height:100%;max-height:none;border-radius:0;border:0;box-shadow:none;margin:0;padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px)}
  .ph-notch{display:none}
  .ph-status{padding-top:10px}
  .ph-x{top:max(14px, env(safe-area-inset-top))}
}
@media (max-height:520px){
  .ph-status{display:none}
  .ph-head{padding:8px 60px 4px 20px}.ph-head p{display:none}.ph-head h2{font-size:16px}
  .ph-x{top:8px}
  .ph-nav{padding-bottom:max(6px, env(safe-area-inset-bottom))}
  .ph-card{max-height:70%;overflow:auto}
}

/* overlays never trap content off-screen: centered when they fit, scrollable when they don't */
.overlay{overflow-y:auto;align-items:flex-start}
.overlay>.card,.overlay>.win{margin-block:auto}
@media (max-height:520px){
  #title .card{padding:14px 18px;gap:8px}
  #title h1{font-size:24px}
  #title h1 small{margin-top:4px}
  #title p+p{display:none}
  #title p{font-size:13.5px;line-height:1.4}
  #title .keys{font-size:12px;gap:2px 12px}
}

@media (max-width:520px){
  #term header{gap:6px;padding:8px 10px;flex-wrap:nowrap}
  #term header .nm{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #tShell{display:none}
  #term header .sp{flex:1 1 0;min-width:0}
  #term header .tbtn{padding:5px 7px;white-space:nowrap}
}