/* Viewport units refer to the player iframe, not the surrounding X page. */
:root {
  --viewport-gap: clamp(6px, 2vmin, 12px);
  --shell-edge: clamp(6px, 1.5vmin, 10px);
  --header-height: clamp(30px, 6dvh, 40px);
  --bottom-clearance: 0px;
}

.console {
  --available-width: calc(100vw - 2 * var(--viewport-gap));
  --available-height: calc(100dvh - 2 * var(--viewport-gap));
  --frame-size: calc(2 * var(--shell-edge) + 2px);
  --top-space: calc(var(--header-height) + 4px + env(safe-area-inset-top, 0px));

  /* Screen height / width + the fixed controller height / width (0.7535). */
  --device-height-per-width: 1.6535;
  --device-width-per-height: 0.6047777442;
  --fit-width: calc(
    (var(--available-height) - var(--frame-size) - var(--top-space) - var(--bottom-clearance))
    * var(--device-width-per-height) + var(--frame-size)
  );
  --fit-height: calc(
    (var(--available-width) - var(--frame-size)) * var(--device-height-per-width)
    + var(--frame-size) + var(--top-space) + var(--bottom-clearance)
  );

  width: min(var(--available-width), var(--fit-width));
  height: min(var(--available-height), var(--fit-height));
  padding: var(--shell-edge);
  border-radius: clamp(20px, 6vmin, 34px);
}

.console.gba {
  --device-height-per-width: 1.4201666667;
  --device-width-per-height: 0.7041427063;
}

.console.gba.rotated {
  --device-height-per-width: 2.2535;
  --device-width-per-height: 0.4437541602;
}

.shell {
  border-radius: clamp(14px, 4cqw, 25px);
  padding-bottom: var(--bottom-clearance);
}

.face {
  padding-top: var(--top-space);
}

/* Scale the header with the handheld, including short landscape embeds. */
.cartridge-slot {
  width: clamp(56px, 15%, 72px);
  height: var(--header-height);
  justify-content: center;
  gap: clamp(8px, 2cqw, 12px);
  padding-inline: clamp(4px, 1.4cqw, 8px);
  font-size: clamp(6px, 1.8cqw, 8px);
  letter-spacing: .1em;
}

#slot-icon, #slot-icon .cart {
  width: clamp(14px, 5cqw, 20px);
}

/* The button's accessible description still includes the selected game. */
#slot-label {
  display: none;
}

.slot-eject {
  font-size: clamp(10px, 3cqw, 12px);
}

.keyboard-shortcut {
  left: 2.8%;
  top: 4px;
  width: 19%;
  max-width: none;
  min-width: 0;
  height: calc(var(--header-height) - 8px);
  padding-inline: 3px;
  gap: 4px;
  font-size: clamp(8px, 2.8cqw, 11px);
}

.sound-toggle {
  position: absolute;
  z-index: 6;
  left: calc(21.8% + clamp(4px, 1cqw, 8px));
  top: 4px;
  width: clamp(24px, 7cqw, 30px);
  height: calc(var(--header-height) - 8px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #2b2235;
  color: #b9aac8;
}

.sound-toggle svg {
  width: 16px;
  height: 16px;
}

.sound-toggle:hover, .sound-toggle[aria-pressed=true] {
  background: #352b40;
  color: #f1eaf7;
}

.sound-toggle.nudge {
  border-color: #a28bb366;
}

.play-external {
  right: 0;
  top: -1px;
  width: clamp(44px, 16%, 72px);
  max-width: none;
  min-height: var(--header-height);
  padding: 4px;
  white-space: nowrap;
}

/* A short iframe can make the whole handheld narrower than a phone. */
@container console (max-width: 220px) {
  .keyboard-shortcut { width: 16px; padding: 0; gap: 0; }
  #players-badge { display: none; }
  .sound-toggle { left: calc(2.8% + 20px); width: 20px; }
  .sound-toggle svg { width: 12px; height: 12px; }
  .cartridge-slot { width: 32px; gap: 4px; padding-inline: 2px; }
  #slot-icon, #slot-icon .cart { width: 12px; }
  .play-external { width: 24px; font-size: 0; }
  .play-external::after { content: '↗'; font: 12px/1 system-ui; }
}

/* Only a touch-first portrait device needs room for web-view toolbars.
   Width alone cannot distinguish a phone from a narrow desktop iframe. */
@media (pointer: coarse) and (orientation: portrait) {
  :root {
    --viewport-gap: 0px;
    --bottom-clearance: calc(clamp(48px, 8svh, 80px) + env(safe-area-inset-bottom, 0px));
  }

  .console {
    height: var(--available-height);
  }

  /* Extend the plain color below the deck. Never stretch the controller art. */
  .deck::after {
    display: block;
    left: -6.82%;
    right: -6.82%;
    width: auto;
    top: 100%;
    bottom: auto;
    height: var(--bottom-clearance);
    background: #5d48a1;
    filter: var(--skin-filter, none);
  }
}