:root { --u: 3px; --lime: #b3d334; --ink: #0b0814; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); overflow: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior: none; }
body { background:
  repeating-conic-gradient(#120c20 0% 25%, #0b0814 0% 50%) 0 0 / calc(var(--u) * 2) calc(var(--u) * 2); }
#app { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 8);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#stage { position: relative; width: min(calc(100vw - 40px), calc((100vh - 70px) * 16 / 9)); aspect-ratio: 16 / 9; flex: none;
  outline: var(--u) solid #000; box-shadow: 0 0 0 calc(var(--u) * 2) #ff2d7a, 0 0 0 calc(var(--u) * 3) #000, calc(var(--u) * 4) calc(var(--u) * 4) 0 calc(var(--u) * 3) #000; }
canvas, img { image-rendering: pixelated; image-rendering: crisp-edges; }
#game { width: 100%; height: 100%; display: block; touch-action: none; }
/* CRT: scanlines + vignette */
#crt { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(100% / 360), rgba(0,0,0,.16) calc(100% / 360), rgba(0,0,0,.16) calc(100% / 180)),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%); }

.overlay { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 10;
  background: repeating-conic-gradient(rgba(0,0,0,.78) 0% 25%, rgba(0,0,0,.35) 0% 50%) 0 0 / calc(var(--u) * 2) calc(var(--u) * 2); }
.overlay.show { display: flex; }
#title.overlay { position: absolute; background: none; z-index: 2; pointer-events: none; }
#title .btns { position: absolute; top: 82%; left: 0; right: 0; margin: 0; pointer-events: auto; gap: 3%; }
#regionNote { position: absolute; top: 15%; pointer-events: none; }
#crewNote { position: absolute; top: 0; left: 0; right: 0; line-height: 0; pointer-events: none; }
.box { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 6);
  background: #1a1428; outline: var(--u) solid #000; box-shadow: inset var(--u) var(--u) 0 #5a4b7e, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #0b0814,
  0 0 0 calc(var(--u) * 2) #ff2d7a, 0 0 0 calc(var(--u) * 3) #000; max-width: 96vw; max-height: 96vh; overflow: auto; }
.px { line-height: 0; }
.btns { display: flex; gap: calc(var(--u) * 3); flex-wrap: wrap; justify-content: center; }
button { all: unset; cursor: pointer; line-height: 0; }
button canvas { pointer-events: none; display: block; }
button .dn, button.pressed .up { display: none; }
button.pressed .dn { display: block; }
button:focus-visible { outline: var(--u) dashed #ffe14a; outline-offset: var(--u); }
.hidden { display: none !important; }

form.box { align-items: stretch; width: min(96vw, calc(var(--u) * 210)); }
form label { display: flex; flex-direction: column; gap: var(--u); }
form input[type=email], form input:not([type]) { font: 700 16px/1 ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .1em;
  padding: calc(var(--u) * 2.5); border: var(--u) solid #000; border-radius: 0; background: #fff; color: #000; outline: none;
  box-shadow: inset var(--u) var(--u) 0 #b8b8cc; }
form input:focus { background: #fff7b0; }
form .chk { flex-direction: row; align-items: center; gap: calc(var(--u) * 2); cursor: pointer; }
form .chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
form .chk i { flex: none; width: calc(var(--u) * 7); height: calc(var(--u) * 7); background: #fff; outline: var(--u) solid #000; box-shadow: inset var(--u) var(--u) 0 #b8b8cc; }
form .chk input:checked + i { background: #ff2d7a; box-shadow: inset var(--u) var(--u) 0 #ff8ab4, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #a8104a; }
form .chk input:focus-visible + i { outline-color: #ffe14a; }
.termslink { align-self: flex-start; }

#tapzone { display: none; }
@media (orientation: portrait) {
  #app { justify-content: flex-start; padding-top: max(env(safe-area-inset-top), calc(var(--u) * 4)); }
  #stage { width: calc(100vw - var(--u) * 8); }
  #tapzone { display: flex; flex: 1; width: calc(100% - var(--u) * 12); align-items: center; justify-content: center; margin-top: calc(var(--u) * 4);
    background: repeating-conic-gradient(#1e1630 0% 25%, #140e22 0% 50%) 0 0 / calc(var(--u) * 4) calc(var(--u) * 4); outline: var(--u) dashed #5a4b7e; }
}
body.boxed #mute { display: none; }
#toast { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; cursor: pointer; }
#toast.show { display: flex; }
#toast .box { box-shadow: inset var(--u) var(--u) 0 #5a4b7e, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #0b0814, 0 0 0 calc(var(--u) * 2) #5fff6a, 0 0 0 calc(var(--u) * 3) #000; }
#mute { position: fixed; right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); z-index: 20; }

.box > .close { position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 2); z-index: 2; }

/* 'press start' splash: the first tap unlocks sound (browsers require it) */
#splash.overlay { position: absolute; z-index: 5; cursor: pointer; background: rgba(8,4,16,0.82); }
#splash #splashText { animation: blink 1s steps(2, start) infinite; }
#splash #splashHint { margin-top: calc(var(--u) * 6); }
@keyframes blink { to { visibility: hidden; } }

/* ---- phones: big arcade JUMP buttons (not shown on desktop) ---- */
.jump { display: none; }
@media (pointer: coarse) {
  html, body { -webkit-touch-callout: none; }
  .jump { display: block; position: fixed; z-index: 4; background-size: contain; background-repeat: no-repeat; background-position: center;
    image-rendering: pixelated; touch-action: none; -webkit-tap-highlight-color: transparent; }
  /* portrait: game full width at the top, two buttons side by side underneath, one per thumb */
  @media (orientation: portrait) {
    #app { justify-content: flex-start; padding-top: max(env(safe-area-inset-top), 8px); }
    #stage { width: 100vw; box-shadow: none; outline: 0; border-bottom: 4px solid #ff2d7a; }
    .jump { width: 40vw; height: 40vw; bottom: max(6vh, env(safe-area-inset-bottom)); }
    #jumpL { left: 6vw; } #jumpR { right: 6vw; }
    #mute { top: auto; bottom: 1vh; right: 50%; transform: translateX(50%); }
  }
  /* landscape: game in the middle, one button either side */
  @media (orientation: landscape) {
    #stage { width: min(calc(100vw - 52vh), calc(100vh * 16 / 9)) !important; height: auto !important; outline: 0; box-shadow: none; }
    .jump { width: 22vh; height: 22vh; top: 50%; transform: translateY(-50%); }
    #jumpL { left: 2vh; } #jumpR { right: 2vh; }
  }
}

/* 'turn your phone' prompt (iPhone can't be rotated by a web page) */
#rotate.overlay { z-index: 30; }
#rotate .phone { width: 18vw; height: 32vw; border: 4px solid #ffe14a; border-radius: 10px; box-shadow: 4px 4px 0 #000;
  animation: turn 1.6s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }
#splash.overlay { position: fixed; z-index: 25; }

/* embedded in a vollebak.com page: fill the frame, no border of our own */
body.embed #app { gap: 0; }
body.embed #stage { width: min(100vw, calc(100vh * 16 / 9)) !important; outline: 0; box-shadow: none; }
body.embed #tapzone { display: none; }