@font-face {
  font-family: "Workshop Pixel";
  src: url("/fonts/workshop-pixel.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --p8-black: #000;
  --p8-navy: #1d2b53;
  --p8-purple: #7e2553;
  --p8-silver: #c2c3c7;
  --p8-white: #fff1e8;
  --p8-yellow: #ffec27;
  --p8-green: #00e436;
  --p8-lavender: #83769c;
  --p8-pink: #ff77a8;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; background: var(--p8-navy); color: var(--p8-white); font: 12px/1.6 "Workshop Pixel", "PingFang SC", "Microsoft YaHei", sans-serif; overscroll-behavior: none; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, canvas:focus-visible { outline: 3px solid var(--p8-yellow); outline-offset: -3px; }
button:disabled { opacity: .45; cursor: default; }
main { width: 100%; max-width: 768px; height: 100vh; height: 100dvh; margin: auto; padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left)); }
.stage { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) 132px 44px; gap: 16px; }
.game-area { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 4px 4px 0; }
.console { position: relative; width: min(100%, calc(100vh - 236px - var(--safe-top) - var(--safe-bottom))); width: min(100%, calc(100dvh - 236px - var(--safe-top) - var(--safe-bottom))); aspect-ratio: 1; flex-shrink: 0; border: 4px solid var(--p8-black); box-shadow: 4px 4px var(--p8-black); background: var(--p8-black); overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; background: rgb(29 43 83 / 45%); }
.prompt { max-width: 100%; max-height: 100%; overflow: auto; }
#status { margin: 0 0 16px; overflow-wrap: anywhere; }
#status:last-child { margin-bottom: 0; }
#start { min-height: 48px; padding: 10px 24px; background: var(--p8-yellow); color: var(--p8-navy); box-shadow: 4px 4px var(--p8-black); font-size: 24px; line-height: 1.2; margin: 0 4px 4px 0; }
#start:hover { background: var(--p8-white); }
#start:active { transform: translate(2px, 2px); box-shadow: 2px 2px var(--p8-black); }
.toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 512px; justify-self: center; }
.toolbar button { min-width: 0; min-height: 44px; padding: 4px; background: var(--p8-black); color: var(--p8-silver); }
.toolbar button:not(:disabled):hover { background: var(--p8-purple); color: var(--p8-white); }
#sound[aria-pressed="true"] { color: var(--p8-green); }
.controls { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 512px; justify-self: center; padding: 0 4px; user-select: none; -webkit-user-select: none; touch-action: none; }
.dpad { display: grid; grid-template: repeat(3, 44px) / repeat(3, 44px); filter: drop-shadow(0 4px var(--p8-black)); }
.dpad button { min-width: 44px; min-height: 44px; color: var(--p8-navy); background: var(--p8-silver); font-size: 24px; line-height: 1; }
.dpad .up { grid-area: 1 / 2; }
.dpad .left { grid-area: 2 / 1; }
.dpad .center { grid-area: 2 / 2; background: var(--p8-silver); position: relative; }
.dpad .center::after { content: ""; position: absolute; width: 8px; height: 8px; left: calc(50% - 4px); top: calc(50% - 4px); background: var(--p8-lavender); }
.dpad .right { grid-area: 2 / 3; }
.dpad .down { grid-area: 3 / 2; }
.actions { display: flex; gap: 14px; align-items: center; }
.actions button { width: 60px; height: 60px; color: var(--p8-navy); background: var(--p8-pink); box-shadow: 0 4px var(--p8-black); font-size: 24px; }
.actions button:first-child { margin-top: 28px; background: var(--p8-yellow); }
.controls button.active { background: var(--p8-white); transform: translateY(3px); box-shadow: none; }
@media (max-width: 359px) {
  .actions { gap: 10px; }
  .actions button { width: 52px; height: 52px; }
}
@media (orientation: landscape) {
  main { max-width: none; }
  .stage { grid-template-columns: 132px minmax(0, 1fr) 132px; grid-template-rows: minmax(0, 1fr) 44px; column-gap: 16px; row-gap: 12px; }
  .game-area { grid-column: 2; grid-row: 1; }
  .console { width: min(100%, calc(100vh - 84px - var(--safe-top) - var(--safe-bottom)), 768px); width: min(100%, calc(100dvh - 84px - var(--safe-top) - var(--safe-bottom)), 768px); }
  .controls { display: contents; }
  .dpad { grid-column: 1; grid-row: 1; justify-self: center; }
  .actions { grid-column: 3; grid-row: 1; justify-self: center; gap: 12px; }
  .actions button { width: 56px; height: 56px; }
  .toolbar { grid-column: 2; grid-row: 2; }
}
@media (pointer: fine) and (min-width: 900px) {
  main { max-width: 1024px; }
  .stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 44px; gap: 12px; }
  .game-area, .toolbar { grid-column: 1; }
  .controls { display: none; }
  .console { width: min(100%, calc(100vh - 84px - var(--safe-top) - var(--safe-bottom)), 768px); width: min(100%, calc(100dvh - 84px - var(--safe-top) - var(--safe-bottom)), 768px); }
}