/* Mobile controls: a portrait handheld matching the supplied MOVIECUTS mockup,
   plus the compact landscape controller used by the existing game. */
.handheld-frame-art,
.handheld-frame-art img { display: none; }

html[data-handheld="portrait"],
html[data-handheld="landscape"] {
  --handheld-cyan: #55edf3;
}

html[data-handheld="portrait"] body,
html[data-handheld="landscape"] body {
  display: block;
  width: 100%;
  min-height: 100dvh;
  padding: 0;
}

html[data-handheld="portrait"] .keyboard-controls,
html[data-handheld="landscape"] .keyboard-controls { display: none; }

html[data-handheld="portrait"] .handheld-controls,
html[data-handheld="landscape"] .handheld-controls { display: contents; }

html[data-handheld="portrait"] canvas,
html[data-handheld="landscape"] canvas { image-rendering: auto; }

/* Portrait -------------------------------------------------------------- */
html[data-handheld="portrait"],
html[data-handheld="portrait"] body { background: transparent; }

html[data-handheld="portrait"] body { overflow: hidden; }

html[data-handheld="portrait"] .shell {
  position: relative;
  width: min(100%, 560px);
  min-height: 0;
  aspect-ratio: 941 / 1572;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

html[data-handheld="portrait"] .handheld-frame-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .72));
}

html[data-handheld="portrait"] .handheld-frame-art .handheld-frame-portrait {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* The frame contains the complete bezel. Only the live canvas is placed
   into its empty 10:9 opening. */
html[data-handheld="portrait"] .screen-housing {
  position: absolute;
  z-index: 1;
  top: 12.48%;
  left: 19.12%;
  width: 64.72%;
  height: 35.43%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.8% / 2%;
  background: #071019;
  box-shadow: none;
}

html[data-handheld="portrait"] .screen-housing::before,
html[data-handheld="portrait"] .screen-housing::after { display: none; }

html[data-handheld="portrait"] .game-frame {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  contain: paint;
  border: 0;
  border-radius: 0;
  background: #071019;
  box-shadow: none;
}

html[data-handheld="portrait"] canvas {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* The photographed controls stay visually untouched. Transparent hit areas
   sit exactly over them and retain tactile pressed/focus feedback. */
html[data-handheld="portrait"] .controls,
html[data-handheld="portrait"] .shell.is-name-entry .controls {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  display: block;
  pointer-events: none;
}

html[data-handheld="portrait"] .handheld-controls {
  display: block;
  position: absolute;
  inset: 0;
}

html[data-handheld="portrait"] .handheld-controls .control-button {
  position: absolute;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: rgba(0, 0, 0, .001);
  box-shadow: none;
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

html[data-handheld="portrait"] .handheld-controls .control-button:focus-visible {
  outline: 2px solid rgba(115, 223, 255, .9);
  outline-offset: 3px;
}

html[data-handheld="portrait"] .handheld-controls .control-button.is-pressed,
html[data-handheld="portrait"] .handheld-controls .control-button:active {
  border: 0;
  background: rgba(80, 188, 255, .1);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .65), 0 0 9px rgba(65, 191, 255, .18);
  transform: translateY(1px);
}

html[data-handheld="portrait"] .direction,
html[data-handheld="portrait"] .handheld-label { display: none; }

html[data-handheld="portrait"] .dpad {
  position: absolute;
  top: 56.72%;
  left: 7.2%;
  width: 32%;
  height: auto;
  aspect-ratio: 1;
}

html[data-handheld="portrait"] .dpad .control-button {
  width: 33.34%;
  height: 33.34%;
  border-radius: 10%;
}

html[data-handheld="portrait"] .dpad-up { top: 0; left: 33.33%; }
html[data-handheld="portrait"] .dpad-down { top: 66.66%; left: 33.33%; }
html[data-handheld="portrait"] .dpad-left { top: 33.33%; left: 0; }
html[data-handheld="portrait"] .dpad-right { top: 33.33%; left: 66.66%; }

html[data-handheld="portrait"] .dpad-center {
  position: absolute;
  top: 33.33%;
  left: 33.33%;
  width: 33.34%;
  height: 33.34%;
  background: transparent;
  pointer-events: none;
}

html[data-handheld="portrait"] .action-buttons,
html[data-handheld="portrait"] .system-buttons {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  pointer-events: none;
}

html[data-handheld="portrait"] .action-buttons .control-button {
  width: 14.2%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

html[data-handheld="portrait"] .action-jump {
  top: 57.78%;
  right: 8.2%;
  left: auto;
}

html[data-handheld="portrait"] .action-fire {
  top: 64.75%;
  left: 59.75%;
  bottom: auto;
}

html[data-handheld="portrait"] .system-buttons .control-button {
  top: 81.35%;
  width: 12.8%;
  height: auto;
  aspect-ratio: 2.35;
  border-radius: 999px;
}

html[data-handheld="portrait"] .system-select { left: 33.45%; }
html[data-handheld="portrait"] .system-start { left: 51.05%; }

html[data-handheld="portrait"] .dpad .control-button::after,
html[data-handheld="portrait"] .action-buttons .control-button::after,
html[data-handheld="portrait"] .system-buttons .control-button::after {
  content: "";
  position: absolute;
  inset: -4px;
}

html[data-handheld="portrait"] .name-controls { display: none !important; }

/* Landscape ------------------------------------------------------------- */
html[data-handheld="landscape"],
html[data-handheld="landscape"] body { background: #05070a; }

html[data-handheld="landscape"] .shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  padding: 0 88px 0 84px;
  display: grid;
  align-items: center;
  border-radius: 14px;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, .05), transparent 28%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .012) 0 1px, rgba(0, 0, 0, .025) 1px 3px),
    linear-gradient(145deg, #20252b 0%, #151a20 52%, #0c1015 100%);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .16), inset 0 -4px 0 rgba(0, 0, 0, .4);
}

html[data-handheld="landscape"] .screen-housing {
  position: relative;
  width: min(100%, calc(100dvh * 16 / 9));
  padding: 0;
  margin: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html[data-handheld="landscape"] .game-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  contain: paint;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-handheld="landscape"] canvas { height: auto; aspect-ratio: 16 / 9; }

html[data-handheld="landscape"] .shell::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 18px;
  width: 7px;
  height: 7px;
  border: 2px solid #ff9ba8;
  border-radius: 50%;
  background: #ff244d;
  box-shadow: 0 0 0 2px #370614, 0 0 7px #ff174b;
}

html[data-handheld="landscape"] .shell::after {
  content: "POWER";
  position: absolute;
  top: 13px;
  left: 32px;
  color: #8695a6;
  font-size: 7px;
  letter-spacing: .04em;
}

html[data-handheld="landscape"] .controls { display: contents; }

html[data-handheld="landscape"] .handheld-controls .control-button {
  position: absolute;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid #526777;
  border-radius: 2px;
  background: linear-gradient(135deg, #243240, #111922 60%);
  box-shadow: inset 1px 1px 0 #c3e8ff25, inset -2px -2px 0 #03070b, 0 0 0 2px #090e15, 0 0 0 3px #30414f, 0 3px 0 3px #05090e;
}

html[data-handheld="landscape"] .dpad {
  --arm: 26px;
  position: absolute;
  left: 11px;
  top: calc(50% - 39px);
  width: calc(var(--arm) * 3);
  height: calc(var(--arm) * 3);
}

html[data-handheld="landscape"] .dpad .control-button { width: var(--arm); height: var(--arm); }
html[data-handheld="landscape"] .dpad-up { top: 0; left: var(--arm); }
html[data-handheld="landscape"] .dpad-down { bottom: 0; left: var(--arm); }
html[data-handheld="landscape"] .dpad-left { top: var(--arm); left: 0; }
html[data-handheld="landscape"] .dpad-right { top: var(--arm); right: 0; }
html[data-handheld="landscape"] .dpad-center { position: absolute; z-index: 1; top: calc(var(--arm) - 1px); left: calc(var(--arm) - 1px); width: calc(var(--arm) + 2px); height: calc(var(--arm) + 2px); background: #18232e; pointer-events: none; }
html[data-handheld="landscape"] .direction { color: #f4f6f7; font-size: 16px; text-shadow: 0 1px 0 #ffffff20; }
html[data-handheld="landscape"] .dpad-left .direction,
html[data-handheld="landscape"] .dpad-right .direction { color: #516579; }

html[data-handheld="landscape"] .action-buttons { position: absolute; width: 70px; height: 82px; right: 15px; top: calc(50% - 65px); }
html[data-handheld="landscape"] .action-buttons .control-button {
  width: 36px;
  height: 36px;
  border: 2px solid #3e5669;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #1e2a35, #101820 72%);
}
html[data-handheld="landscape"] .action-jump { top: 0; right: 0; }
html[data-handheld="landscape"] .action-fire { bottom: 0; left: 0; }
html[data-handheld="landscape"] .action-buttons .control-button::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }

html[data-handheld="landscape"] .system-buttons { position: absolute; display: flex; gap: 6px; right: 15px; left: auto; top: calc(50% + 50px); bottom: auto; transform: none; }
html[data-handheld="landscape"] .system-buttons .control-button { position: relative; width: 32px; height: 12px; border-radius: 5px; }
html[data-handheld="landscape"] .system-buttons .control-button::after { content: ""; position: absolute; inset: -12px 0; }
html[data-handheld="landscape"] .handheld-label { display: none; }
html[data-handheld="landscape"] .handheld-controls .control-button.is-pressed,
html[data-handheld="landscape"] .handheld-controls .control-button:active { transform: translateY(2px); border-color: #b1e4ed; }

html[data-handheld="landscape"] .is-name-entry { padding-right: 154px; padding-left: 4px; }
html[data-handheld="landscape"] .is-name-entry .controls { display: none; }
html[data-handheld="landscape"] .name-controls { position: absolute; right: 8px; width: 134px; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0; }
html[data-handheld="landscape"] .name-controls .control-button { min-height: 40px; padding: 4px; }
html[data-handheld="landscape"] .name-controls .control-label { font-size: 9px; }
html[data-handheld="landscape"] .name-controls .keycap + .control-label { display: none; }

/* The wide MOVIECUTS LR-90 shell from the supplied landscape mockup. These
   final overrides replace the compact legacy landscape controller above. */
html[data-handheld="landscape"],
html[data-handheld="landscape"] body { background: transparent; }

html[data-handheld="landscape"] body {
  min-height: 100%;
  overflow: hidden;
}

html[data-handheld="landscape"] .shell,
html[data-handheld="landscape"] .shell.is-name-entry {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1672 / 812;
  margin: 8px auto 0;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

html[data-handheld="landscape"] .shell::before,
html[data-handheld="landscape"] .shell::after { display: none; }

html[data-handheld="landscape"] .handheld-frame-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .78));
  transform: scaleX(1.032);
  transform-origin: 50% 50%;
}

html[data-handheld="landscape"] .handheld-frame-art .handheld-frame-landscape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

html[data-handheld="landscape"] .screen-housing {
  position: absolute;
  z-index: 1;
  top: 15.02%;
  left: 27.11%;
  width: 45.74%;
  height: 63.67%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 3% / 4%;
  background: #071019;
  box-shadow: none;
}

html[data-handheld="landscape"] .game-frame {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  contain: paint;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: #071019;
  box-shadow: none;
}

html[data-handheld="landscape"] canvas {
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 16 / 9;
}

html[data-handheld="landscape"] .controls,
html[data-handheld="landscape"] .shell.is-name-entry .controls {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  display: block;
  pointer-events: none;
}

html[data-handheld="landscape"] .handheld-controls {
  position: absolute;
  inset: 0;
  display: block;
}

html[data-handheld="landscape"] .handheld-controls .control-button {
  position: absolute;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: rgba(0, 0, 0, .001);
  box-shadow: none;
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

html[data-handheld="landscape"] .handheld-controls .control-button:focus-visible {
  outline: 2px solid rgba(115, 223, 255, .9);
  outline-offset: 2px;
}

html[data-handheld="landscape"] .direction,
html[data-handheld="landscape"] .handheld-label { display: none; }

html[data-handheld="landscape"] .dpad {
  position: absolute;
  top: 29.75%;
  left: 3.27%;
  width: 14.88%;
  height: auto;
  aspect-ratio: 1;
}

html[data-handheld="landscape"] .dpad .control-button {
  width: 33.34%;
  height: 33.34%;
  border-radius: 12%;
}

html[data-handheld="landscape"] .dpad-up { top: 0; left: 33.33%; }
html[data-handheld="landscape"] .dpad-down { top: 66.66%; bottom: auto; left: 33.33%; }
html[data-handheld="landscape"] .dpad-left { top: 33.33%; left: 0; }
html[data-handheld="landscape"] .dpad-right { top: 33.33%; right: auto; left: 66.66%; }

html[data-handheld="landscape"] .dpad-center {
  position: absolute;
  top: 33.33%;
  left: 33.33%;
  width: 33.34%;
  height: 33.34%;
  background: transparent;
  pointer-events: none;
}

html[data-handheld="landscape"] .action-buttons,
html[data-handheld="landscape"] .system-buttons {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  pointer-events: none;
}

html[data-handheld="landscape"] .action-buttons .control-button {
  width: 9.13%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

html[data-handheld="landscape"] .action-jump {
  top: 27.82%;
  right: 2.34%;
  left: auto;
}

html[data-handheld="landscape"] .action-fire {
  top: 42.12%;
  left: 81.30%;
  bottom: auto;
}

html[data-handheld="landscape"] .system-buttons .control-button {
  position: absolute;
  left: 80.86%;
  width: 5.52%;
  height: auto;
  aspect-ratio: 1.75;
  border-radius: 999px;
}

html[data-handheld="landscape"] .system-start { top: 69.05%; }
html[data-handheld="landscape"] .system-select { top: 78.55%; }

html[data-handheld="landscape"] .dpad .control-button::after,
html[data-handheld="landscape"] .action-buttons .control-button::after,
html[data-handheld="landscape"] .system-buttons .control-button::after {
  content: "";
  position: absolute;
  inset: -4px;
}

html[data-handheld="landscape"] .handheld-controls .control-button.is-pressed,
html[data-handheld="landscape"] .handheld-controls .control-button:active {
  border: 0;
  background: rgba(80, 188, 255, .1);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .68), 0 0 8px rgba(65, 191, 255, .18);
  transform: translateY(1px);
}

html[data-handheld="landscape"] .name-controls { display: none !important; }

/* Device size follows the stable layout width. The page can scroll to the
   bottom of a tall portrait frame even as browser chrome appears or hides. */
html:is([data-handheld="portrait"], [data-handheld="landscape"]) body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
html[data-handheld="portrait"] .shell {
  width: min(calc(100% - 8px), 560px);
  margin: 12px auto 0;
  overflow: visible;
}
html[data-handheld="landscape"] .shell,
html[data-handheld="landscape"] .shell.is-name-entry {
  width: calc((100% - 8px) / 1.032);
  margin: 12px auto 0;
  overflow: visible;
}
html:is([data-handheld="portrait"], [data-handheld="landscape"]) .game-frame {
  container-type: size;
  display: grid;
  place-items: center;
  background: #071019;
}
html:is([data-handheld="portrait"], [data-handheld="landscape"]) canvas {
  width: min(100cqw, calc(100cqh * 4 / 3));
  height: auto;
  max-height: none;
  aspect-ratio: 4 / 3;
}

/* Gamebox: an invisible switch covers the speaker grille. The status sits
   separately in the lower-right corner, without button chrome. */
html[data-handheld="portrait"] .handheld-music-toggle {
  top: 79.5%;
  right: 4%;
  width: 29%;
  height: 17%;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
html[data-handheld="portrait"] .handheld-music-toggle svg,
html[data-handheld="portrait"] .handheld-music-toggle span { display: none; }
html[data-handheld="portrait"] .gamebox-music-status {
  position: absolute;
  z-index: 4;
  right: 4.5%;
  bottom: 9%;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #202226;
  font: 800 clamp(9px, 2.6vw, 12px) ui-monospace, monospace;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transform: rotate(-34deg);
  transform-origin: right center;
}
html[data-handheld="portrait"] .gamebox-music-status svg { width: 17px; height: 17px; }
html[data-handheld="portrait"] .gamebox-music-status .music-cross { display: none; }
html[data-handheld="portrait"] .handheld-music-toggle[aria-pressed="true"] + .gamebox-music-status .music-cross { display: block; }
html[data-handheld="portrait"] .handheld-music-toggle[aria-pressed="true"] + .gamebox-music-status .music-waves { display: none; }

/* Game Gear: sound control sits on the speaker opening at lower left. */
html[data-handheld="landscape"] .handheld-music-toggle {
  top: 67%;
  left: 5%;
  width: 15%;
  height: 23%;
  display: flex;
  flex-direction: column;
  border: 0;
  background: transparent;
  color: #c4c9ce;
  font-size: clamp(8px, 1.2vw, 11px);
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
}
html[data-handheld="landscape"] .handheld-music-toggle svg { width: 22px; height: 22px; }
html[data-handheld="landscape"] .handheld-music-toggle[aria-pressed="true"] { color: #aeb6bd; }