:root { color-scheme: dark; font-family: ui-monospace, monospace; background: #111419; color: #fff2ce; }
* { box-sizing: border-box; }
body { margin: 0; padding: 12px; }
main { max-width: 460px; margin: auto; }
header { margin-bottom: 10px; container-type: inline-size; }
.eyebrow { color: #f8c668; font-size: .75rem; letter-spacing: .1em; margin: 0 0 4px; }
h1 {
  font-size: min(5.5vw, 26px);
  font-size: min(6cqi, 2.5rem);
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.screen { width: min(100%, calc((100svh - 322px) * 7 / 9)); margin-inline: auto; position: relative; background: #132027; border: 2px solid #d1a44c; }
canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.overlay { position: absolute; inset: 0; padding: 8px; display: grid; place-content: center; justify-items: center; text-align: center; background: rgb(12 20 25 / 94%); }
.overlay[hidden] { display: none; }
.overlay h2 { font-size: clamp(1rem, 4vw, 1.5rem); margin: 0; color: #ffce6e; }
.overlay p { max-width: 34ch; margin: .55em 0; font-size: clamp(.8rem, 3vw, 1rem); }
button { font: inherit; color: inherit; background: #25383e; border: 1px solid #d1a44c; min-height: 44px; padding: 4px 12px; cursor: pointer; }
button:focus-visible { outline: 3px solid #fff2ce; outline-offset: 2px; }
button:disabled { opacity: .45; cursor: default; }
#action { background: #a32837; margin-top: 12px; }
.controls { text-align: center; }
#hint { font-size: .8rem; }
.pad { display: grid; grid-template-columns: repeat(3, 52px); justify-content: center; gap: 4px; touch-action: none; user-select: none; }
.pad button { min-height: 52px; touch-action: none; }
.pad button[data-direction="up"] { grid-column: 2; }
.pad button[data-direction="left"] { grid-column: 1; }
.actions {
  display: grid;
  grid-template-columns: auto max-content;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}
#start, #restart { grid-area: 1 / 2; }
.actions button[hidden] { display: block; visibility: hidden; }
#start { background: #a32837; }
.greeting { margin: 4px 0 0; font-size: .8rem; line-height: 1.3; }
@media (max-width: 480px) {
  body { padding: 8px; }
  #hint { margin-block: 6px; }
}
@media (min-width: 540px) and (orientation: landscape) and (max-height: 620px) {
  main { max-width: 720px; }
  .cabinet {
    display: grid;
    grid-template-columns: minmax(0, min(65%, calc((100svh - 120px) * 7 / 9))) minmax(0, 1fr);
    justify-content: center;
    align-items: center;
    gap: 12px;
  }
  .screen { width: 100%; }
}

#lives, #demo-label { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); margin: 0; padding: 2px 5px; background: #36242b; font-size: .7rem; white-space: nowrap; z-index: 1; pointer-events: none; }

#pet-noise { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); margin: 0; padding: 2px 5px; background: #36242b; color: #ffe276; font-size: .7rem; white-space: nowrap; z-index: 1; pointer-events: none; }
#pet-noise:empty { padding: 0; }