.pal-game {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  margin-top: 40px;
}

/* ---- The handheld: an egg-shaped shell, sized with container units so it scales ---- */
.pal-device {
  position: relative;
  width: min(380px, 84vw);
  /* room above for the key ring */
  margin: calc(min(380px, 84vw) * 0.6) auto 0;
  aspect-ratio: 360 / 430;
  container-type: inline-size;
}
/* Key ring with keys and charms the egg hangs from */
.pal-keyring {
  position: absolute;
  left: 0;
  bottom: calc(100% - 2cqw);
  width: 100%;
  overflow: visible;
  pointer-events: none;
}
.pal-keyring .sway {
  transform-box: view-box;
  transform-origin: 180px 34px;
  animation: sway 5s ease-in-out infinite;
}
.pal-keyring .dangle {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: dangle 3.2s ease-in-out infinite;
}
@keyframes sway {
  50% {
    transform: rotate(2deg);
  }
}
@keyframes dangle {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
.pal-chain {
  position: absolute;
  top: -8cqw;
  left: 50%;
  width: 14cqw;
  height: 14cqw;
  translate: -50% 0;
  border: 2.4cqw solid #c9ccd1;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 0.6cqw #8b9097,
    0 0 0 0.6cqw #8b9097;
}
.pal-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0.9cqw solid #12324d;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 34% 24%, #b5ecff 0, #4fc0f0 38%, #2a93d4 78%, #1f74b3);
  box-shadow:
    inset -3cqw -4cqw 0 rgba(10, 40, 80, 0.18),
    inset 2.5cqw 3cqw 0 rgba(255, 255, 255, 0.35),
    0 24px 50px rgba(0, 0, 0, 0.45);
}
.pal-decor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pal-logo {
  position: absolute;
  top: 7%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: #ff4fa8;
  font:
    400 9.5cqw/1 "Pacifico",
    cursive;
  rotate: -4deg;
  text-shadow:
    0.5cqw 0.5cqw 0 #6d0f45,
    -0.3cqw -0.3cqw 0 #fff;
}
/* Pink starburst frame around the screen */
.pal-frame {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 82cqw;
  aspect-ratio: 1;
  translate: -50% 0;
  display: grid;
  place-items: center;
  background: #e2389a;
  clip-path: polygon(
    50% 0%,
    59% 9%,
    72% 3%,
    76% 16%,
    90% 14%,
    88% 28%,
    100% 34%,
    92% 45%,
    100% 56%,
    89% 64%,
    93% 78%,
    79% 80%,
    76% 94%,
    63% 89%,
    52% 100%,
    42% 90%,
    29% 96%,
    25% 82%,
    10% 82%,
    12% 68%,
    0% 60%,
    9% 49%,
    1% 37%,
    13% 30%,
    10% 16%,
    24% 15%,
    28% 2%,
    40% 9%
  );
}
.pal-lcd {
  width: 56cqw;
  padding: 1.6cqw;
  display: grid;
  gap: 1.2cqw;
  border: 0.8cqw solid #5b1240;
  border-radius: 1.6cqw;
  background: linear-gradient(160deg, #d5ddb4, #b9c596);
  box-shadow: inset 0 0.8cqw 1.6cqw rgba(0, 0, 0, 0.25);
}
.pal-icons {
  display: flex;
  justify-content: space-between;
}
.arcade .pal-icon {
  display: grid;
  place-items: center;
  width: 10cqw;
  height: 8cqw;
  padding: 1cqw;
  border: 0;
  border-radius: 1cqw;
  background: transparent;
  color: rgba(24, 32, 18, 0.32);
  cursor: pointer;
}
.pal-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  shape-rendering: crispEdges;
}
.arcade .pal-icon:hover,
.arcade .pal-icon.selected {
  color: rgba(24, 32, 18, 0.92);
}
.arcade .pal-icon.selected {
  background: rgba(24, 32, 18, 0.12);
}
.arcade .pal-icon:focus-visible {
  outline: 0.6cqw solid #5b1240;
  outline-offset: 0;
}
.pal-alert {
  cursor: default !important;
}
.pal-alert.lit {
  color: rgba(24, 32, 18, 0.92) !important;
  animation: blink 0.8s steps(1) infinite;
}
.pal-screen-wrap {
  position: relative;
}
#pal-screen {
  display: block;
  width: 100%;
  aspect-ratio: 48 / 32;
}
/* Words on the little screen */
.lcd-overlay,
.lcd-bubble {
  color: #182012;
  font-family: "VT323", "DM Mono", monospace;
  line-height: 1;
  text-align: center;
}
.lcd-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 1cqw;
  background: #c4cfa1;
  font-size: 6cqw;
}
.lcd-overlay.see-through {
  align-content: start;
  padding-top: 0.5cqw;
  background: transparent;
}
.lcd-overlay p {
  margin: 0;
}
.lcd-overlay small,
.lcd-hint {
  font-size: 4.2cqw;
  opacity: 0.75;
}
.lcd-hearts {
  letter-spacing: 0.4cqw;
}
.arcade .lcd-item,
.arcade .lcd-choices button {
  padding: 0 1cqw;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lcd-choices {
  display: flex;
  justify-content: space-between;
  margin-top: 10cqw;
}
.arcade .lcd-choices button {
  padding: 0.4cqw 1.4cqw;
  border: 0.4cqw solid #182012;
  border-radius: 1cqw;
  font-size: 5cqw;
}
.lcd-bubble {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  padding: 0.6cqw 0.8cqw;
  background: rgba(196, 207, 161, 0.92);
  border-bottom: 0.4cqw dashed rgba(24, 32, 18, 0.5);
  font-size: 4.8cqw;
}

/* Three yellow buttons, the middle one sitting lower */
.pal-buttons {
  position: absolute;
  bottom: 6%;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: flex-start;
  gap: 5cqw;
}
.arcade .pal-buttons button {
  position: relative;
  width: 10.5cqw;
  aspect-ratio: 1;
  padding: 0;
  border: 0.7cqw solid #6b5200;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b3, #ffd23f 50%, #e0a800);
  box-shadow: 0 1cqw 0 #6b5200;
  transition:
    translate 0.08s,
    box-shadow 0.08s;
}
.arcade .pal-buttons button:nth-child(2) {
  margin-top: 3cqw;
}
.arcade .pal-buttons button:active {
  translate: 0 0.8cqw;
  box-shadow: 0 0.2cqw 0 #6b5200;
}
.pal-buttons span {
  position: absolute;
  top: 110%;
  left: 50%;
  translate: -50% 0;
  color: #12324d;
  font: 500 3.4cqw var(--mono);
}

/* ---- Side panel ---- */
.pal-side .arcade-label {
  display: block;
  margin-bottom: 10px;
}
.pal-name {
  width: min(100%, 280px);
  margin-bottom: 26px;
  padding: 10px 12px;
  border: 1.5px solid rgba(251, 248, 241, 0.4);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font:
    28px "VT323",
    var(--mono);
}
.pal-name[aria-invalid="true"] {
  border-color: #ff5fb4;
}
.pal-name-note {
  margin: -16px 0 22px;
  color: #ff8cc8;
  font: 500 13px var(--mono);
  letter-spacing: 0.06em;
}
.pal-name:focus-visible {
  outline: 3px solid var(--lav);
  outline-offset: 2px;
}
.pal-key,
.pal-buttons-key {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  font-size: 15px;
}
.pal-key li,
.pal-buttons-key li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* Each icon sits on a little patch of LCD so it looks like it does on the device */
.pal-key-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 1.5px solid #5b1240;
  border-radius: 6px;
  background: linear-gradient(160deg, #d5ddb4, #b9c596);
  color: #182012;
}
.pal-key-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  shape-rendering: crispEdges;
}
.pal-key b {
  display: block;
  margin-bottom: 1px;
  color: #ffd23f;
}
.pal-key span b:not(:first-child) {
  display: inline;
  color: inherit;
}
.pal-key-button {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid #6b5200;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b3, #ffd23f 50%, #e0a800);
  color: #3d2f00;
  font: 600 12px var(--mono);
}
.pal-buttons-key li {
  align-items: center;
}
.pal-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.pal-controls button {
  padding: 9px 14px;
}

/* The pal escaping the screen after a naughty name */
.pal-escape {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  transform-origin: 50% 60%;
}
.pal-escape canvas {
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.35));
}
.pal-escape-bubble {
  position: absolute;
  bottom: 92%;
  left: 50%;
  margin: 0;
  padding: 6px 12px;
  translate: -50% 0;
  white-space: nowrap;
  border: 3px solid #182012;
  border-radius: 14px;
  background: #fff;
  color: #d0156f;
  font:
    32px/1 "VT323",
    monospace;
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
@media (max-width: 860px) {
  .pal-game {
    grid-template-columns: 1fr;
  }
}