:root {
  --ink: #080604;
  --panel: #fff8ec;
  --orange: #ff831f;
  --orange-deep: #d64a00;
  --gold: #ffd65c;
  --mint: #7dffbd;
  --steel: #454955;
  --shadow: rgba(10, 8, 6, 0.28);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--panel);
  background:
    linear-gradient(90deg, var(--orange-deep) 0 8%, transparent 8% 92%, var(--orange-deep) 92% 100%),
    radial-gradient(circle at 50% 0%, #423b31 0, #16120e 44rem, #070605 100%);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.page {
  display: grid;
  min-height: 100svh;
  padding: clamp(12px, 2vw, 28px);
  place-items: center;
}

.game-card {
  width: min(100%, 1180px);
}

.console {
  position: relative;
  display: grid;
  grid-template-columns: minmax(54px, 0.17fr) minmax(0, 1fr) minmax(54px, 0.17fr);
  gap: clamp(10px, 1.4vw, 20px);
  align-items: center;
  min-height: 54vw;
  max-height: 760px;
  padding: clamp(12px, 2.5vw, 30px);
  border: clamp(5px, 0.75vw, 9px) solid var(--ink);
  border-radius: clamp(22px, 4vw, 58px);
  background:
    linear-gradient(90deg, var(--orange) 0 11%, var(--panel) 11% 89%, var(--orange) 89% 100%);
  box-shadow:
    0 28px 70px var(--shadow),
    inset 0 0 0 clamp(4px, 0.6vw, 8px) rgba(255, 255, 255, 0.68);
  overflow: hidden;
}

.console::before,
.console::after {
  position: absolute;
  top: 50%;
  width: clamp(92px, 13vw, 158px);
  aspect-ratio: 1;
  border: clamp(7px, 1.1vw, 13px) solid var(--ink);
  border-radius: 999px;
  background: var(--panel);
  content: "";
  transform: translateY(-50%);
}

.console::before {
  left: calc(clamp(92px, 13vw, 158px) * -0.5);
}

.console::after {
  right: calc(clamp(92px, 13vw, 158px) * -0.5);
}

.screen-bezel {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  padding: clamp(9px, 1.4vw, 16px);
  border: clamp(5px, 0.7vw, 8px) solid var(--ink);
  border-radius: clamp(12px, 2.8vw, 36px);
  background: var(--panel);
  box-shadow:
    inset 0 0 0 clamp(3px, 0.45vw, 5px) rgba(255, 131, 31, 0.18),
    0 18px 30px rgba(0, 0, 0, 0.18);
}

canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: clamp(4px, 0.55vw, 7px) solid var(--ink);
  border-radius: clamp(6px, 1.2vw, 14px);
  background: #020100;
  cursor: pointer;
  touch-action: none;
}

.screen-shine {
  position: absolute;
  inset: clamp(13px, 1.8vw, 22px);
  border-radius: clamp(5px, 1vw, 12px);
  background: linear-gradient(122deg, rgba(255, 255, 255, 0.09), transparent 22% 68%, rgba(255, 214, 92, 0.05));
  pointer-events: none;
  mix-blend-mode: screen;
}

.speaker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1 / 1.9;
}

.speaker-left {
  grid-column: 1;
  grid-row: 1;
}

.speaker-right {
  grid-column: 3;
  grid-row: 1;
}

.speaker::before,
.speaker::after {
  display: block;
  border: clamp(5px, 0.75vw, 9px) solid var(--ink);
  content: "";
}

.speaker-left::before {
  width: clamp(42px, 6.5vw, 78px);
  aspect-ratio: 1;
  border-radius: 999px 999px 999px 18px;
  background: var(--panel);
  transform: rotate(45deg);
}

.speaker-left::after {
  position: absolute;
  left: 48%;
  width: clamp(30px, 4vw, 50px);
  aspect-ratio: 1;
  border-width: clamp(4px, 0.55vw, 7px);
  background: transparent;
  transform: rotate(45deg);
}

.speaker-right::before {
  width: clamp(42px, 6.5vw, 78px);
  aspect-ratio: 1;
  border-radius: 999px 999px 18px 999px;
  background: var(--panel);
  transform: rotate(-45deg);
}

.speaker-right::after {
  position: absolute;
  right: 48%;
  width: clamp(30px, 4vw, 50px);
  aspect-ratio: 1;
  border-width: clamp(4px, 0.55vw, 7px);
  background: transparent;
  transform: rotate(-45deg);
}

.controls {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 4vw, 54px);
  bottom: clamp(18px, 2.8vw, 40px);
  display: flex;
  gap: clamp(8px, 1vw, 12px);
}

.icon-button {
  display: grid;
  width: clamp(36px, 4.4vw, 52px);
  aspect-ratio: 1;
  place-items: center;
  border: clamp(3px, 0.38vw, 5px) solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

.icon-button:hover,
.icon-button:focus-visible {
  background: var(--gold);
  outline: none;
}

.icon-button:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--ink);
}

.icon-button svg {
  width: 58%;
  height: 58%;
  fill: currentColor;
}

@media (max-width: 720px) {
  body {
    background:
      linear-gradient(90deg, var(--orange-deep) 0 5%, transparent 5% 95%, var(--orange-deep) 95% 100%),
      #090705;
  }

  .page {
    padding: 10px;
  }

  .console {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding-bottom: 74px;
  }

  .speaker {
    display: none;
  }

  .screen-bezel {
    grid-column: 1;
    grid-row: 1;
  }

  .controls {
    left: 50%;
    right: auto;
    bottom: 18px;
    transform: translateX(-50%);
  }
}