@font-face { font-family: "Rubik Spray Paint"; src: url("fonts/RubikSprayPaint-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
.arcade { max-width: 680px; margin-inline: auto; }
#snake { display: block; width: 100%; height: auto; touch-action: none; }
.snake-controls { display: flex; justify-content: center; gap: 8px; padding: 16px; }
.snake-controls button { width: 56px; height: 52px; border: 1px solid #ffb500; background: #161616; color: #ffb500; font-size: 1.5rem; touch-action: manipulation; }
.snake-controls button:hover { background: #ffb500; color: #161616; }
button:focus-visible, a:focus-visible { outline: 3px solid #ffb500; outline-offset: 3px; }

#snake { border: 3px dotted #ff1701; }

.pause-listen { display: inline-block; margin-top: 14px; padding: 12px 20px; border: 1px solid #ffb500; color: #ffb500; font-size: 0.8rem; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.pause-listen:hover { background: #ffb500; color: #161616; }
.pause-listen[hidden] { display: none; }
#pause { min-height: 44px; padding: 8px 16px; cursor: pointer; }

/* A square board and thumb-sized direction pad that fit the phone screen. */
@media (max-width: 700px) {
  main { height: auto; min-height: 100dvh; }
  .arcade { height: auto; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding-bottom: env(safe-area-inset-bottom); }
  .hud { width: 100%; flex-shrink: 0; padding-top: max(8px, env(safe-area-inset-top)); }
  .cabinet { width: min(100%, calc(100dvh - 230px)); height: auto; aspect-ratio: 1; flex-shrink: 0; margin: auto 0; }
  #snake { width: 100%; height: auto; }
  .snake-controls { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 60px); gap: 6px; padding: 12px; flex-shrink: 0; }
  .snake-controls button { width: 64px; height: 60px; font-size: 2rem; border-width: 2px; user-select: none; -webkit-user-select: none; }
  .snake-controls [data-direction="up"] { grid-column: 2; grid-row: 1; }
  .snake-controls [data-direction="left"] { grid-column: 1; grid-row: 2; }
  .snake-controls [data-direction="down"] { grid-column: 2; grid-row: 2; }
  .snake-controls [data-direction="right"] { grid-column: 3; grid-row: 2; }
  .snake-controls button:active { background: #ffb500; color: #161616; }
  .status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .game-message h2 { font-size: clamp(2rem, 10vw, 4rem); }
}
@media (max-width: 700px) and (max-height: 480px) and (orientation: landscape) {
  .arcade { position: relative; padding-right: 220px; justify-content: center; }
  .hud { position: absolute; top: 0; left: 0; }
  .cabinet { width: min(calc(100vw - 230px), calc(100dvh - 70px)); margin-top: 60px; }
  .snake-controls { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
}

.swipe-hint { display: none; }
@media (max-width: 700px) {
  .swipe-hint { display: block; margin: 8px 0 0; color: #c9c9c6; font-size: 0.8rem; text-align: center; }
  .cabinet { width: min(100%, calc(100dvh - 256px)); }
}
@media (max-width: 700px) and (max-height: 480px) and (orientation: landscape) {
  .swipe-hint { position: absolute; right: 8px; bottom: 8px; width: 204px; }
  .cabinet { width: min(calc(100vw - 230px), calc(100dvh - 70px)); }
}