/* Handheld console shell. Sizes come from --u (one control unit, px) and --b (bezel unit),
   and positions from game.js (layout()), so it fits any phone in portrait or landscape. */
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; position: fixed; inset: 0;
  background: #c9c5bd;
  touch-action: none; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#device {
  position: fixed; inset: 0;
  background: linear-gradient(170deg, #dcd8d0 0%, #c9c5bd 55%, #bdb8af 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --u: 4px; --b: 10px;
}

/* ------------------------------------------------------------ screen */
#screen-area { position: absolute; display: flex; flex-direction: column; align-items: center; }
#bezel {
  position: relative;
  background: #5b5d70;
  border-radius: calc(var(--b) * 1) calc(var(--b) * 1) calc(var(--b) * 4.5) calc(var(--b) * 1);
  padding: calc(var(--b) * 2.6) calc(var(--b) * 1.8) calc(var(--b) * 2.4);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 1px 0 rgba(255,255,255,.5);
}
.bezel-top {
  position: absolute; left: calc(var(--b) * 1.2); right: calc(var(--b) * 1.2); top: calc(var(--b) * .75);
  display: flex; align-items: center; gap: calc(var(--b) * .8); justify-content: center;
  color: #c4c5d4; font-size: calc(var(--b) * .95); letter-spacing: .12em; font-weight: 600; white-space: nowrap;
}
.bezel-top i { flex: 1; height: calc(var(--b) * .5); border-top: calc(var(--b) * .2) solid #8a2d5d; border-bottom: calc(var(--b) * .2) solid #2f3c86; }
.led { flex: none; width: calc(var(--b) * 1); height: calc(var(--b) * 1); border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 calc(var(--b) * .8) #ff4d4d; }
#game {
  display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #edf3d6;
  box-shadow: 0 0 0 2px #3c3e4d;
  touch-action: none;
}
.logo {
  margin-top: calc(var(--b) * .7);
  align-self: flex-start;
  color: #2b3990; font-style: italic; font-weight: 700; font-size: calc(var(--b) * 2.1); letter-spacing: .02em;
}
.logo b { font-weight: 900; font-size: 1.15em; }

/* ------------------------------------------------------------ controls */
#controls { position: absolute; left: 0; right: 0; bottom: 0; touch-action: none; }
#dpad, #ab, #meta, .speaker { position: absolute; transform: translate(-50%, -50%); }

#dpad { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
#dpad::before { /* the round well the cross sits in */
  content: ""; position: absolute; inset: calc(var(--u) * -2.5); border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.10) 55%, rgba(0,0,0,0) 72%);
}
.dp { position: absolute; background: #2a2a30; box-shadow: 0 calc(var(--u) * .7) 0 #111; }
.dp-up, .dp-down { left: 33.3%; width: 33.4%; height: 35%; }
.dp-left, .dp-right { top: 33.3%; height: 33.4%; width: 35%; }
.dp-up { top: 0; border-radius: calc(var(--u) * 1) calc(var(--u) * 1) 0 0; }
.dp-down { bottom: 0; border-radius: 0 0 calc(var(--u) * 1) calc(var(--u) * 1); }
.dp-left { left: 0; border-radius: calc(var(--u) * 1) 0 0 calc(var(--u) * 1); }
.dp-right { right: 0; border-radius: 0 calc(var(--u) * 1) calc(var(--u) * 1) 0; }
.dp-center { left: 32%; top: 32%; width: 36%; height: 36%; box-shadow: none; }
.dp-center::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3a42, #1d1d22); }
.dp.pressed { background: #18181c; box-shadow: 0 calc(var(--u) * .2) 0 #111; transform: translateY(calc(var(--u) * .5)); }
.dp-up::after, .dp-down::after, .dp-left::after, .dp-right::after { /* ridges */
  content: ""; position: absolute; left: 30%; right: 30%; top: 30%; bottom: 30%;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 2px, transparent 2px 5px);
}
.dp-left::after, .dp-right::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 5px); }

#ab { display: flex; gap: calc(var(--u) * 5); align-items: center; padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  border-radius: calc(var(--u) * 12); background: rgba(0,0,0,.07); }
#ab.rot { transform: translate(-50%, -50%) rotate(-24deg); }
.btn-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.b-wrap { top: 0; }
.btn {
  width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #d0397a, #a3205a 55%, #861546);
  box-shadow: 0 calc(var(--u) * 1) 0 #5a0d2f, 0 calc(var(--u) * 1.6) calc(var(--u) * 1.4) rgba(0,0,0,.25);
}
.btn.pressed { transform: translateY(calc(var(--u) * .8)); box-shadow: 0 calc(var(--u) * .2) 0 #5a0d2f; filter: brightness(.88); }
.btn-wrap label, .pill-wrap label {
  position: absolute; top: 100%; margin-top: calc(var(--u) * 2.2);
  color: #2b3990; font-weight: 800; font-size: calc(var(--u) * 4); letter-spacing: .08em;
}

#meta { display: flex; gap: calc(var(--u) * 6); }
.pill-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.pill {
  width: calc(var(--u) * 12); height: calc(var(--u) * 3.6); border-radius: calc(var(--u) * 2);
  background: #8f8b95; box-shadow: 0 calc(var(--u) * .5) 0 #615e66, inset 0 1px 0 rgba(255,255,255,.3);
  transform: rotate(-25deg);
}
.pill.pressed { background: #74717a; box-shadow: 0 0 0 #615e66; }
.pill-wrap label { font-size: calc(var(--u) * 2.6); margin-top: calc(var(--u) * 1.4); }

.speaker { display: flex; gap: calc(var(--u) * 2); transform: translate(-50%, -50%) rotate(-28deg); pointer-events: none; }
.speaker i { display: block; width: calc(var(--u) * 1.3); height: calc(var(--u) * 13); border-radius: calc(var(--u) * 1);
  background: #a7a29a; box-shadow: inset 0 1px 1px rgba(0,0,0,.35); }

#device.landscape .logo, #device.landscape .speaker, #device.landscape .bezel-top span:not(.led) { display: none; }

/* ------------------------------------------------------------ cover / splash */
#cover {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #cfe0f4; transition: opacity .45s ease;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
#cover img { max-width: 100%; max-height: calc(100% - 64px); object-fit: contain; image-rendering: pixelated; pointer-events: none; }
#cover .tap {
  margin-top: 14px; padding: 8px 18px; border-radius: 6px;
  background: #062b11; color: #edf3d6; font: 800 16px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em;
  animation: blink 1.1s steps(2, start) infinite;
}
#cover.gone { opacity: 0; pointer-events: none; }
@keyframes blink { to { visibility: hidden; } }