/* Special Delivery — original platformer. No external fonts or CDNs. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #1a1c24;
  color: #eee;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1c24;
}

#wrap.fill-wide #game {
  box-shadow: none;
}

#game {
  display: block;
  /* Internal height stays 480. In landscape fill / fullscreen / iframe the
     width grows with the screen aspect so the world is shown wider, not stretched. */
  width: auto;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  background: #7eb8d0;
  outline: none;
  box-shadow: 0 0 0 2px #0e1016, 0 8px 32px rgba(0, 0, 0, 0.45);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* =========================================================================
   Fullscreen button — small, bottom-centre, between the D-pad and A/B.
   Safe-area aware so it clears the iPhone home indicator / notch.
   ========================================================================= */
#btn-fs {
  position: absolute;
  left: 50%;
  /* Sit on the same baseline as the left ◀ ▶ cluster (8px + home-bar). */
  bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 6px));
  transform: translateX(-50%);
  z-index: 10;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  background: rgba(16, 18, 26, 0.48);
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
#btn-fs svg { display: block; width: 16px; height: 16px; }
#btn-fs:hover,
#btn-fs:focus-visible {
  background: rgba(16, 18, 26, 0.75);
  border-color: rgba(255, 255, 255, 0.8);
  outline: none;
}
#btn-fs:active,
#btn-fs.is-fs {
  background: rgba(255, 255, 255, 0.3);
}
#btn-fs .fs-exit { display: none; }
#btn-fs.is-fs .fs-enter { display: none; }
#btn-fs.is-fs .fs-exit { display: block; }

/* iOS Safari (and any browser that refuses element fullscreen): pin #wrap
   to the visual viewport. JS sets exact top/left/width/height from
   window.visualViewport; these rules are the CSS fallback (100dvh / 100svh). */
html.pseudo-fs,
body.pseudo-fs {
  position: fixed !important;
  inset: 0;
  width: 100%;
  width: 100dvw;
  height: 100%;
  height: 100dvh;
  height: 100svh;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
  margin: 0;
  padding: 0;
}
#wrap.pseudo-fs {
  position: fixed !important;
  inset: 0;
  top: 0;
  left: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  z-index: 99999;
  background: #1a1c24;
}

/* Portrait fullscreen uses the same "controls-below" stack as portrait
   play (canvas at the top, controls just under it). */
#wrap.portrait-fs #game { box-shadow: none; }

/* Banner shown when a new-tab open is needed (iframe on iPhone) or blocked. */
#fs-open {
  position: absolute;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  padding: 8px 10px 8px 14px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  background: rgba(16, 18, 26, 0.88);
  color: #f4f0e6;
  font: 700 13px/1.3 ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  pointer-events: auto;
}
#fs-open.hidden, #fs-open[hidden] { display: none !important; }
#fs-open-link {
  color: #f0d060;
  text-decoration: none;
  white-space: nowrap;
}
#fs-open-link:hover, #fs-open-link:active { color: #fff0b0; text-decoration: underline; }
#fs-open-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #f4f0e6;
  font: 700 18px/1 ui-monospace, Menlo, Consolas, monospace;
  cursor: pointer;
}

/* Portrait "rotate your phone" hint — dismissable, does not block play after. */
#rotate-hint {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 18, 0.62);
  pointer-events: auto;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
#rotate-hint.hidden, #rotate-hint[hidden] { display: none !important; }
.rotate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 26px 18px;
  border: 2px solid rgba(244, 240, 230, 0.45);
  border-radius: 12px;
  background: rgba(16, 18, 26, 0.92);
  color: #f4f0e6;
  text-align: center;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
}
.rotate-title {
  margin: 8px 0 0;
  font: 800 16px/1.2 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  color: #f4f0e6;
}
.rotate-sub {
  margin: 0;
  font: 700 12px/1.3 ui-monospace, Menlo, Consolas, monospace;
  color: #f0d060;
}
#rotate-dismiss {
  margin-top: 6px;
  padding: 8px 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #f4f0e6;
  font: 800 12px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
  touch-action: manipulation;
}
#rotate-dismiss:active { background: rgba(255, 255, 255, 0.28); }
/* Little phone glyph that tips into landscape. */
.rotate-phone {
  width: 22px;
  height: 34px;
  border: 2.5px solid #f4f0e6;
  border-radius: 5px;
  position: relative;
  animation: rotate-tip 1.6s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.rotate-phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 6px;
  height: 3px;
  margin-left: -3px;
  border-radius: 1px;
  background: #f4f0e6;
}
@keyframes rotate-tip {
  0%, 25% { transform: rotate(0deg); }
  50%, 85% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

/* =========================================================================
   On-screen touch controls — staggered diagonal pairs (original art).
   Left pair:  ◀ outer + HIGHER, ▶ inner + LOWER.
   Right pair: B (jump) outer + HIGHER, A (down) inner + LOWER.
   Portrait (#wrap.controls-below): both pairs sit in the space just under
   the game (JS sets --ctl-top). Landscape / fullscreen: overlaid on the
   lower corners. Every button is a separate circle; hit boxes never overlap.
   ========================================================================= */
#touch {
  --btn: clamp(52px, 17vmin, 76px);
  --gap: calc(var(--btn) * 0.16);
  --drop: calc(var(--btn) * 0.5);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
#touch.hidden { display: none; }

#touch .cluster {
  position: absolute;
  width: calc(var(--btn) * 2 + var(--gap));
  height: calc(var(--btn) + var(--drop));
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.left-cluster {
  left: max(12px, calc(env(safe-area-inset-left, 0px) + 6px));
  bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 6px));
}
.right-cluster {
  right: max(12px, calc(env(safe-area-inset-right, 0px) + 6px));
  bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 6px));
}
/* Portrait: controls directly under the game, not at the foot of the screen. */
#wrap.controls-below #touch .cluster {
  top: var(--ctl-top, auto);
  bottom: auto;
}

#touch button {
  position: absolute;
  width: var(--btn);
  height: var(--btn);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
  font: 700 18px/1 ui-monospace, Menlo, Consolas, monospace;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
#btn-left  { left: 0; top: 0; }
#btn-right { left: calc(var(--btn) + var(--gap)); top: var(--drop); }
#btn-jump  { right: 0; top: 0; }
#btn-down  { right: calc(var(--btn) + var(--gap)); top: var(--drop); }

#touch .face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 60ms ease-out;
}
#touch .btn-dir .face {
  background: rgba(255, 255, 255, 0.42);
  border: 2px solid rgba(255, 255, 255, 0.66);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: rgba(20, 22, 30, 0.88);
  font-size: calc(var(--btn) * 0.36);
}
#touch .btn-nes .face {
  background: rgba(176, 44, 52, 0.62);
  border: 2px solid rgba(255, 200, 200, 0.6);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 220, 220, 0.28);
  color: #fff;
}
#touch .btn-nes .letter {
  font: 800 calc(var(--btn) * 0.34)/1 ui-monospace, Menlo, Consolas, monospace;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
#touch .btn-nes .hint {
  font: 700 calc(var(--btn) * 0.13)/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  opacity: 0.92;
  margin-top: 2px;
}
#touch .btn-a .face {
  background: rgba(140, 48, 150, 0.6);
  border-color: rgba(230, 180, 240, 0.6);
}
#touch button:active .face,
#touch button.held .face {
  transform: scale(0.93);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#touch .btn-dir:active .face,
#touch .btn-dir.held .face {
  background: rgba(255, 255, 255, 0.75);
  color: rgba(16, 18, 26, 0.95);
}
#touch .btn-nes:active .face,
#touch .btn-nes.held .face { background: rgba(230, 90, 90, 0.86); }
#touch .btn-a:active .face,
#touch .btn-a.held .face { background: rgba(190, 90, 200, 0.86); }

/* Portrait stack: canvas pinned to the top (under the notch / status bar),
   controls follow it. */
#wrap.controls-below {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: env(safe-area-inset-top, 0px);
}
#wrap.controls-below #game { box-shadow: none; }

/* Safe-area probe (read by JS). */
#safe-probe {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* "Add to Home Screen" hint (iPhone Safari, not standalone). */
#a2hs-hint {
  position: absolute;
  left: 50%;
  bottom: calc(max(10px, calc(env(safe-area-inset-bottom, 0px) + 6px)) + 40px);
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(330px, calc(100% - 20px));
  padding: 10px 8px 10px 12px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  background: rgba(16, 18, 26, 0.94);
  color: #f4f0e6;
  font: 700 13px/1.35 -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
#a2hs-hint.hidden, #a2hs-hint[hidden] { display: none !important; }
#a2hs-hint p { margin: 0; }
#a2hs-hint b { color: #f0d060; }
#a2hs-hint .a2hs-icon { flex: 0 0 auto; color: #6ab8ff; display: flex; }
#a2hs-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #f4f0e6;
  font: 700 20px/1 -apple-system, system-ui, Arial, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
#a2hs-close:active { background: rgba(255, 255, 255, 0.3); }