* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #07030c;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
body { position: fixed; inset: 0; }

#wrap {
  --u: 1px; /* one game pixel in CSS px, set from JS */
  position: absolute;
  left: 0; top: 0;
  width: 320px; height: 180px;
  background: #000;
  box-shadow: 0 0 calc(var(--u) * 24) rgba(122, 59, 154, .28);
  overflow: hidden;
}
#game { display: block; width: 100%; height: 100%; }

/* subtle CRT: one dark line every other game pixel, plus a soft vignette */
#crt {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .14) 50%, transparent 50%);
  background-size: 100% calc(var(--u) * 2);
}
#crt::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .42) 100%);
}

#hud-btns {
  position: absolute;
  top: calc(var(--u) * 1);
  right: calc(var(--u) * 1);
  display: flex;
  gap: calc(var(--u) * 2);
}
#hud-btns button {
  width: max(30px, calc(var(--u) * 12));
  height: max(30px, calc(var(--u) * 12));
  min-width: 0;
  display: grid; place-items: center;
  background: rgba(13, 6, 20, .55);
  border: max(1px, calc(var(--u) * .75)) solid rgba(216, 196, 58, .55);
  color: #fff3a0;
  cursor: pointer;
  padding: 0;
}
#hud-btns button:hover, #hud-btns button:focus-visible { border-color: #fff3a0; outline: none; }
#hud-btns svg { width: 62%; height: 62%; fill: currentColor; }
#btn-mute .off { display: none; }
#btn-mute.muted .on { display: none; }
#btn-mute.muted .off { display: inline; }
#btn-mute.muted { color: #e0303e; border-color: rgba(224, 48, 62, .6); }

#credit {
  position: absolute;
  display: none;
  cursor: pointer;
}
#credit:focus-visible { outline: 2px solid #fff3a0; }

/* ---------- touch controls ---------- */
#touch {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 max(18px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  pointer-events: none;
  z-index: 5;
}
body.touch #touch { display: flex; }
.pad { display: flex; gap: 14px; }
#touch button {
  pointer-events: auto;
  touch-action: none;
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 3px solid rgba(216, 196, 58, .7);
  background: rgba(42, 18, 64, .5);
  color: #fff3a0;
  font: bold 15px/1 ui-monospace, Menlo, monospace;
  letter-spacing: 1px;
  display: grid; place-items: center;
  transition: transform .05s;
}
#touch button svg { width: 42%; height: 42%; fill: currentColor; }
#touch button.active { background: rgba(122, 59, 154, .85); transform: scale(.93); }
#touch .jump { width: 90px; height: 90px; border-color: rgba(224, 48, 62, .8); }
body.portrait #touch { padding-bottom: max(34px, env(safe-area-inset-bottom)); }
body.portrait #touch button { width: 86px; height: 86px; }
body.portrait #touch .jump { width: 104px; height: 104px; }

#rotate {
  position: fixed;
  left: 0; right: 0;
  display: none;
  text-align: center;
  color: #d8c43a;
  font-size: 13px;
  letter-spacing: .5px;
  padding: 0 20px;
  opacity: .85;
  pointer-events: none;
}
body.touch.portrait #rotate { display: block; }

.nojs { color: #fff3a0; padding: 24px; text-align: center; }