/* ============================================================
   Prime - super.css
   Super Delivery Guy. Standalone: this page loads no other
   stylesheet. The game draws itself; this file only places the
   canvas and the touch pad, which is dressed as a navy handheld
   with Base blue buttons.
   ============================================================ */

@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-800-900.woff2') format('woff2'); font-weight:800 900; font-display:swap; }

:root {
  --nav:#0A1024; --nav-2:#141D3D; --nav-3:#1D2850;
  --blue:#0052FF; --blue-hi:#3D7DFF; --blue-lo:#003AB8;
  --yellow:#FFD21F; --ink:#0E1120; --paper:#FFFDF8;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body {
  background:var(--nav); color:#fff; font-family:var(--sans);
  overflow:hidden; overscroll-behavior:none; touch-action:none;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}

.shell { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#stage {
  display:block; image-rendering:pixelated; image-rendering:crisp-edges;
  background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.5);
}
.loader { position:absolute; font:800 14px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#9CC7FF; }
.nojs { position:fixed; inset:auto 0 40% 0; text-align:center; color:#fff; font:800 16px var(--sans); }

.back {
  position:fixed; left:max(12px, env(safe-area-inset-left)); bottom:max(10px, env(safe-area-inset-bottom));
  font:800 12px/1 var(--sans); letter-spacing:.04em; color:#9CC7FF; text-decoration:none; opacity:.7;
  padding:8px 10px; border-radius:8px;
}
@media (hover:hover) { .back:hover { opacity:1; background:rgba(255,255,255,.06); } }

/* ---------- the touch pad ---------- */
.pads { display:none; }
body.touch .pads { display:flex; }
body.touch .back { display:none; }

.pads {
  align-items:center; justify-content:space-between; gap:12px;
  touch-action:none;
}
.dpad {
  position:relative; width:150px; height:150px; flex:none; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--nav-3), var(--nav-2) 70%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06), 0 6px 0 rgba(0,0,0,.35);
}
.dpad i, .dpad b { position:absolute; background:#2A3560; border-radius:6px; box-shadow:0 3px 0 #0A0F22; }
.dpad i.u, .dpad i.d { left:50%; width:44px; height:48px; margin-left:-22px; }
.dpad i.u { top:14px; } .dpad i.d { bottom:14px; }
.dpad i.l, .dpad i.r { top:50%; width:48px; height:44px; margin-top:-22px; }
.dpad i.l { left:14px; } .dpad i.r { right:14px; }
.dpad b { left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:4px; box-shadow:none; }
.dpad[data-dir*="l"] i.l, .dpad[data-dir*="r"] i.r, .dpad[data-dir*="u"] i.u, .dpad[data-dir*="d"] i.d { background:var(--blue); box-shadow:0 1px 0 #0A0F22; transform:translateY(2px); }

.ab { display:flex; gap:16px; align-items:center; transform:rotate(-14deg); }
.btn {
  position:relative; width:74px; height:74px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 40% 35%, var(--blue-hi), var(--blue) 55%, var(--blue-lo));
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.25), 0 6px 0 #001E66, 0 10px 18px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.btn em { font:900 26px/1 var(--sans); font-style:normal; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.25); }
.btn small {
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); white-space:nowrap;
  font:800 10px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:#9CC7FF;
}
.btn.on { transform:translateY(4px); box-shadow:inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 0 #001E66; }
.btn.a { margin-top:-34px; }

.mid { display:flex; flex-direction:column; gap:10px; align-items:center; }
.pill {
  display:inline-block; padding:9px 16px; border-radius:20px; background:#2A3560; color:#C7D8FF;
  font:800 11px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; box-shadow:0 3px 0 #0A0F22;
}
.pill.on { background:var(--blue); color:#fff; transform:translateY(2px); box-shadow:0 1px 0 #0A0F22; }

/* portrait phone: the screen on top, the pad below, a handheld */
body.touch.portrait .shell { justify-content:flex-start; padding-top:max(8px, env(safe-area-inset-top)); }
body.touch.portrait .pads {
  flex:1; width:100%; max-width:520px;
  padding:16px max(18px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
body.touch.portrait .pads { position:relative; gap:8px; }
body.touch.portrait .mid { position:absolute; top:14px; left:50%; transform:translateX(-50%); }
body.touch.portrait .dpad { width:min(150px, 38vw); height:min(150px, 38vw); }
body.touch.portrait .btn { width:min(74px, 18vw); height:min(74px, 18vw); }
body.touch.portrait .ab { gap:min(16px, 3vw); margin-right:6px; }

/* landscape phone: the pad floats over the corners of the picture */
body.touch:not(.portrait) .pads {
  position:fixed; inset:auto 0 0 0; pointer-events:none;
  padding:0 max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
body.touch:not(.portrait) .pads > * { pointer-events:auto; }
body.touch:not(.portrait) .dpad { width:124px; height:124px; opacity:.6; }
body.touch:not(.portrait) .btn { width:62px; height:62px; opacity:.72; }
body.touch:not(.portrait) .btn small { display:none; }
body.touch:not(.portrait) .mid { position:fixed; top:max(8px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); }
body.touch:not(.portrait) .pill { opacity:.7; }

body.still .back { display:none; }
body.still #stage { box-shadow:none; }