:root {
  --ground: #0B0609;
  --gold: #FDCA3C;
  --purple: #964DB1;
  --bone: #F5E6C9;
  --bone-dim: #A89C88;
  --purple-deep: #5A2C6B;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ground);
  color: var(--bone);
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  height: 100dvh;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* the whole page is one low-res canvas, scaled by an integer number of
   device pixels so every art pixel is a crisp square */
#screen {
  position: absolute;
  left: 0; top: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: translateZ(0);
}

/* shown until the art has loaded, so a slow connection never sees a blank page */
#placeholder {
  position: absolute;
  left: 50%; top: 50%;
  height: min(78vh, 78dvh, 160vw);
  aspect-ratio: 142 / 240;
  transform: translate(-50%, -54%);
  background: var(--purple);
  border-radius: 8.5% / 5%;
  box-shadow: inset 0 0 0 3px var(--purple-deep);
}
#placeholder::after {
  content: "";
  position: absolute;
  left: 21.8%; top: 7.5%;
  width: 56.3%; height: 30%;
  background: #2A2525;
  outline: 6px solid #231126;
}

/* invisible hit areas over the drawn buttons; the art lives in the canvas */
#device {
  position: absolute;
  touch-action: none;
}
#device button,
#device a {
  position: absolute;
  margin: 0; padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#device button:focus-visible,
#device a:focus-visible,
#mute:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
#device [hidden] { display: none; }

/* hit boxes in shell pixels (142 x 240), from casa-boy.py's button centres */
.dpad { position: absolute; left: 12.68%; top: 53.75%; width: 23.24%; height: 13.75%; touch-action: none; }
.dpad [data-btn="up"]    { left: 33.3%; top: 0;     width: 33.4%; height: 36%; }
.dpad [data-btn="down"]  { left: 33.3%; top: 64%;   width: 33.4%; height: 36%; }
.dpad [data-btn="left"]  { left: 0;     top: 33.3%; width: 36%;   height: 33.4%; }
.dpad [data-btn="right"] { left: 64%;   top: 33.3%; width: 36%;   height: 33.4%; }
[data-btn="a"]      { left: 72.54%; top: 53.75%; width: 15.49%; height: 9.17%; }
[data-btn="b"]      { left: 57.04%; top: 58.75%; width: 15.49%; height: 9.17%; }
[data-btn="start"]  { left: 50.70%; top: 75%;    width: 15.49%; height: 5.83%; }
[data-btn="select"] { left: 26.76%; top: 75%;    width: 15.49%; height: 5.83%; }
#lcd-link           { left: 21.83%; top: 7.5%;   width: 56.34%; height: 30%; }

#mute {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: 44px; height: 44px;
  padding: 11px 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
#mute svg { display: block; width: 100%; height: 100%; }
#mute .spk, #mute .on { fill: var(--bone-dim); }
#mute .off { fill: var(--bone-dim); display: none; }
#mute[aria-pressed="true"] .on { display: none; }
#mute[aria-pressed="true"] .off { display: block; }

#fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 16px;
  text-align: center;
  overflow: auto;
  touch-action: auto;
}
#fallback img { width: min(320px, 80vw); height: auto; image-rendering: pixelated; }
#fallback p { margin: 0; line-height: 1.6; color: var(--bone-dim); }
#fallback a {
  color: var(--ground);
  background: var(--gold);
  padding: 12px 20px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.08em;
}
body.failed #fallback { display: flex; }
body.failed #placeholder { display: none; }