html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #142331; color: #fffdec; font: 13px ui-monospace, monospace; }
body { display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }
#artwork { position: absolute; width: min(100vw,150dvh); height: min(100dvh,66.6667vw); background: url('/assets/scenes/catalogue.webp') 0 0 / 300% 200%; image-rendering: pixelated; }
#screen { display: block; width: min(100vw, calc(100dvh * var(--mgba-aspect, 1.5))); height: auto; max-height: 100%; outline: none; user-select: none; -webkit-user-select: none; }
#overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #142331a8; padding: 15px; text-align: center; }
button { font: inherit; cursor: pointer; color: #fffdec; background: #536f31; border: 1px solid #d7dfb0; border-radius: 3px; box-shadow: inset 1px 1px #87945a, 1px 2px #172733; }
button:focus-visible { outline: 3px solid #f6cb79; outline-offset: 3px; }
@font-face { font-family: StarfrogPixel; src: url('/player/fonts/DynaPuff.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: Dosis; src: url('/player/fonts/Dosis.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
#game-title { font: clamp(28px, 6vw, 48px)/1.05 StarfrogPixel, ui-monospace, monospace; margin: 0 0 18px; }
#game-description { max-width: 420px; font: 500 16px/1.4 Dosis, sans-serif; margin: 0 0 24px; }
#start { font: 750 24px/1.25 Dosis, sans-serif; padding: 8px 18px; min-width: 110px; min-height: 42px; background: #b6ff00; color: #0028e4; border: 2px solid #0028e4; border-radius: 11px 9px 12px 8px; box-shadow: 2px 2px 0 #0028e4; }
#hint { font-size: 10px; margin: 12px 0 0; }
#status { position: absolute; top: 7px; left: 7px; margin: 0; padding: 4px 7px; max-width: calc(100% - 28px); background: #142331dc; font-size: 10px; pointer-events: none; }
body[data-phase="playing"] #status { display: none; }
#touch { position: absolute; inset: auto 8px 7px; display: flex; align-items: end; justify-content: space-between; gap: 8px; }
#touch { display: none; }
body[data-fullscreen="true"][data-touch="true"] { box-sizing: border-box; padding-bottom: 120px; }
body[data-fullscreen="true"][data-touch="true"] #screen { width: min(100vw, calc((100dvh - 120px) * var(--mgba-aspect, 1.5))); }
body[data-fullscreen="true"][data-touch="true"] #touch { display: flex; }
@media (max-width: 420px) { #touch { inset: auto 5px 5px; gap: 4px; } .middle { max-width: 90px; gap: 4px; } #hint { font-size: 10px; } }

#status, #hint { display: none; }

/* The original console's small embedded LCD still needs a usable start overlay. */
@media (max-width: 300px) {
  #overlay { padding: 6px; }
  #game-title { font-size: clamp(18px, 10vw, 24px); margin-bottom: 5px; }
  #game-description { font-size: 10px; line-height: 1.25; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #start { min-width: 0; padding: 5px 12px; font-size: 18px; }
}