:root { --s: 3; --font: 'Press Start 2P', ui-monospace, monospace; --ink: #e6eeff; --gold: #f2c14e; --bg: #04030c; }
* { box-sizing: border-box; }
/* no double-tap zoom anywhere on the page, and no gestures at all over the game itself */
html, body { touch-action: manipulation; }
.screen, canvas { touch-action: none; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font);
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
}
.screen { position: relative; }
canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
#labels { position: absolute; inset: 0; pointer-events: none; }
#labels span {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-size: calc(4px * var(--s)); color: var(--gold); text-shadow: 0 calc(1px * var(--s)) 0 #000;
}
#hud {
  position: absolute; top: calc(4px * var(--s)); left: calc(6px * var(--s));
  font-size: calc(5px * var(--s)); color: var(--ink); text-shadow: 0 calc(1px * var(--s)) 0 #000; pointer-events: none;
}
body:not([data-mode="play"]) #hud { display: none; }
#hud { left: auto; right: calc(6px * var(--s)); }
#msg {
  position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none;
  text-shadow: 0 calc(1px * var(--s)) 0 #000; animation: msg-in 0.4s steps(4) backwards;
}
#msg:empty { display: none; }
#msg b { display: block; font-weight: normal; color: var(--gold); font-size: calc(9px * var(--s)); }
#msg span { display: block; margin-top: calc(5px * var(--s)); font-size: calc(4px * var(--s)); color: #a9b0e6; }
@keyframes msg-in { from { opacity: 0; } }
body:not([data-mode="play"]) #msg { display: none; }
#boss {
  position: absolute; left: 0; right: 0; top: calc(158px * var(--s)); text-align: center; pointer-events: none;
  font-size: calc(5px * var(--s)); color: #7dffb0; text-shadow: 0 calc(1px * var(--s)) 0 #000;
}
#boss:empty, body:not([data-mode="play"]) #boss { display: none; }
#hint { /* training help beside the dummies */
  position: absolute; left: 0; right: 0; top: calc(150px * var(--s)); text-align: center; pointer-events: none;
  font-size: calc(5px * var(--s)); color: #fff0a8; text-shadow: 0 calc(1px * var(--s)) 0 #000;
}
#hint:empty, body:not([data-mode="play"]) #hint { display: none; }
.help { margin: 12px 16px 0; font-size: 9px; line-height: 2; color: #8d99c9; text-align: center; }
.help b { color: var(--gold); font-weight: normal; }
.help .devkeys { display: none; }
body.dev .help .devkeys { display: inline; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 300px; padding: 14px; overflow-y: auto;
  background: rgba(8, 7, 32, 0.94); border-left: 2px solid #322a72; font-size: 8px;
  transform: translateX(100%); transition: transform 0.15s;
}
.panel.open { transform: none; }
.panel h2 { font-size: 10px; color: var(--gold); margin: 0 0 12px; font-weight: normal; }
.panel label { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 6px; margin: 0 0 8px; }
.panel input[type=range] { width: 100%; accent-color: var(--gold); }
.panel output { text-align: right; color: var(--gold); }
.panel .checks label { display: flex; gap: 8px; }
.panel .btns { display: flex; gap: 8px; margin: 12px 0; }
.panel button {
  font: inherit; color: var(--bg); background: var(--gold); border: 0; padding: 8px 10px; cursor: pointer;
}
.panel pre { font: inherit; line-height: 1.8; color: #a9b0e6; white-space: pre-wrap; }

/* the thanks box after Act 1: the homepage's black dialog with a pixel border */
.thanks {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(calc(220px * var(--s)), 92%); padding: calc(9px * var(--s)) calc(10px * var(--s));
  font-size: calc(5px * var(--s)); line-height: 2; text-align: center; color: #fff;
  background: #05040f; border: calc(1px * var(--s)) solid #f4f1e6;
  box-shadow: inset 0 0 0 calc(1px * var(--s)) #05040f, inset 0 0 0 calc(2px * var(--s)) #3a3f7a, calc(1px * var(--s)) calc(2px * var(--s)) 0 rgba(0, 0, 0, 0.45);
  animation: msg-in 0.4s steps(4) backwards;
}
.thanks[hidden] { display: none; }
.thanks { max-height: calc(100% - 8px); overflow-y: auto; overscroll-behavior: contain; }
/* the Act II signup inside the thanks box */
.signup { margin: 0 0 calc(6px * var(--s)); }
.signup label { display: block; color: #fff0a8; margin-bottom: calc(2px * var(--s)); }
.su-row { display: flex; gap: calc(3px * var(--s)); justify-content: center; }
.su-row input { font: inherit; width: 58%; min-width: 0; padding: calc(2px * var(--s)) calc(3px * var(--s)); color: #fff; background: #0e0d1c; border: calc(1px * var(--s)) solid #3a3f7a; border-radius: 0; }
.su-row input:focus { outline: none; border-color: #f2c14e; }
.su-row button { font: inherit; color: #05040f; background: var(--gold); border: 0; padding: calc(2px * var(--s)) calc(4px * var(--s)); cursor: pointer; }
.su-row button:disabled { opacity: 0.6; cursor: default; }
.signup small { display: block; margin-top: calc(2px * var(--s)); font-size: 0.75em; color: #8d99c9; line-height: 1.7; }
.signup.done .su-row { display: none; }
.signup.done small { color: #7dffb0; font-size: 1em; }
.signup.err small { color: #ff9fb5; }
.su-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.thanks h2 { margin: 0 0 calc(4px * var(--s)); font-size: calc(8px * var(--s)); font-weight: normal; color: var(--gold); }
.thanks p { margin: 0 0 calc(6px * var(--s)); color: #a9b0e6; }
.thanks-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 0 calc(10px * var(--s)); margin: 0 0 calc(6px * var(--s)); }
.thanks-stats div { display: flex; flex-direction: column; align-items: center; }
.thanks-stats dt { color: #a9b0e6; font-size: 0.8em; }
.thanks-stats dd { margin: 0; color: #fff; }
.thanks-stats .secret { grid-column: 1 / -1; margin-top: calc(3px * var(--s)); color: #7dffb0; font-size: 0.9em; }
.thanks-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(3px * var(--s)) calc(10px * var(--s)); }
.thanks-menu a, .thanks-menu button {
  font: inherit; color: #fff; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.thanks-menu a:hover, .thanks-menu a:focus-visible, .thanks-menu button:hover, .thanks-menu button:focus-visible { color: #fff0a8; outline: none; }
.thanks-menu a:hover::before, .thanks-menu a:focus-visible::before, .thanks-menu button:hover::before, .thanks-menu button:focus-visible::before { content: '\25B6\FE0E  '; font-size: 0.8em; }
body:not([data-mode="play"]) .thanks { display: none; }

/* ---------- touch controls ---------- */
.touch, .rotate { display: none; }
body.is-touch { touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.is-touch .help { display: none; }
body.is-touch #hud { right: auto; left: 50%; transform: translateX(-50%); } /* clear of the pause and full-screen buttons */
body.is-touch[data-mode="play"] .touch { display: block; }
.touch { --tb: clamp(54px, 15vh, 84px); position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.touch .pad, .touch .btns, .touch .tbtn { pointer-events: auto; touch-action: none; }
.pad {
  position: absolute; width: calc(var(--tb) * 2.6); height: calc(var(--tb) * 2.6);
  left: calc(env(safe-area-inset-left, 0px) + 10px); bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
}
.pad .arm, .pad .hub { position: absolute; background: rgba(28, 26, 64, 0.55); border: 3px solid rgba(244, 241, 230, 0.55); }
.pad .hub { left: 33%; top: 33%; width: 34%; height: 34%; border-color: transparent; background: rgba(28, 26, 64, 0.55); }
.pad .l { left: 2%; top: 33%; width: 32%; height: 34%; border-right: 0; }
.pad .r { right: 2%; top: 33%; width: 32%; height: 34%; border-left: 0; }
.pad .d { left: 33%; bottom: 2%; width: 34%; height: 32%; border-top: 0; }
.pad .u { left: 33%; top: 2%; width: 34%; height: 32%; border-bottom: 0; }
.pad .arm::after { /* a pixel arrow pointing outward */
  content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 40%; transform: translate(-50%, -50%);
  background: rgba(244, 241, 230, 0.75);
}
.pad .l::after { clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.pad .r::after { clip-path: polygon(100% 50%, 0 0, 0 100%); }
.pad .d::after { width: 40%; height: 30%; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.pad .u::after { width: 40%; height: 30%; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.btns {
  position: absolute; width: calc(var(--tb) * 2.7); height: calc(var(--tb) * 2.2);
  right: calc(env(safe-area-inset-right, 0px) + 8px); bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
}
.btn {
  position: absolute; width: var(--tb); height: var(--tb); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: calc(var(--tb) * 0.34); line-height: 1; color: #f4f1e6;
  background: rgba(28, 26, 64, 0.55); border: 3px solid rgba(244, 241, 230, 0.55);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.btn small { font-size: calc(var(--tb) * 0.12); margin-top: 0.5em; color: #a9b0e6; }
.btn.a { right: 6%; bottom: 8%; }
.btn.b { right: 50%; bottom: 36%; }
.pad .on, .btn.on { background: rgba(242, 193, 78, 0.75); border-color: #fff0a8; }
.btn.on { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.pad .on::after { background: #05040f; }
.tbtn {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); min-width: 44px; height: 36px; padding: 0 10px;
  font: 10px var(--font); color: #f4f1e6; background: rgba(28, 26, 64, 0.6); border: 2px solid rgba(244, 241, 230, 0.55);
}
.tbtn.pause { right: calc(env(safe-area-inset-right, 0px) + 8px); }
.tbtn.full { right: calc(env(safe-area-inset-right, 0px) + 64px); }
.tbtn[hidden] { display: none; }
/* portrait on a phone: ask for landscape (the game waits) */
@media (orientation: portrait) {
  body.is-touch .rotate {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
    position: fixed; inset: 0; z-index: 20; padding: 24px; text-align: center; line-height: 2;
    font-size: 11px; color: #f4f1e6; background: rgba(4, 3, 12, 0.92);
  }
  .rotate .phone { width: 34px; height: 56px; border: 3px solid #f2c14e; border-radius: 6px; animation: tip 1.6s steps(4) infinite; }
}
@keyframes tip { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* full-screen help for iPhones (their browsers have no full-screen mode for pages).
   Sized to the screen in either orientation; numbers sit inside the frame; scrolls if a screen is very short. */
.homescreen {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(4, 3, 12, 0.85);
}
.homescreen[hidden] { display: none; }
.hs-box {
  width: min(460px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(10px, 3vmin, 18px) clamp(12px, 4vmin, 20px);
  font-size: clamp(8px, 2.6vmin, 11px); line-height: 1.9; color: #fff; text-align: left;
  background: #05040f; border: 2px solid #f4f1e6; box-shadow: inset 0 0 0 2px #05040f, inset 0 0 0 4px #3a3f7a;
}
.hs-box h2 { margin: 0 0 0.7em; font-size: 1.15em; font-weight: normal; color: var(--gold); }
.hs-box p { margin: 0 0 0.7em; color: #a9b0e6; }
.hs-box ol { margin: 0 0 1em; padding: 0; list-style: none; counter-reset: step; }
.hs-box li { counter-increment: step; display: grid; grid-template-columns: 2.2em 1fr; }
.hs-box li::before { content: counter(step) '.'; color: var(--gold); }
.hs-ok { font: inherit; color: #05040f; background: var(--gold); border: 0; padding: 0.8em 1.3em; cursor: pointer; }