@font-face {
  font-family: "V11";
  src: url("/fonts/v11.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

:root {
  color-scheme: dark;
  font-family: "V11", monospace;
  font-size: 16px;
  font-synthesis: none;
  font-weight: 400;
  background: #000;
  color: #fff;
  --yellow: #f8ed88;
  --cyan: #3cabff;
  --hint: #e7d5c4;
}

* { box-sizing: border-box; }
html, body { min-width: 0; min-height: 100%; margin: 0; }
body { padding: 32px 16px; }
button, input { font: inherit; }
button, a, input { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
[hidden] { display: none !important; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus, a:focus { outline: none; color: var(--yellow); }
input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.screen { width: 512px; max-width: 100%; min-height: 480px; margin-inline: auto; padding: 0 32px 32px; background: #000; text-align: center; }
.screen-title { margin-bottom: 80px; }
.title-logo { display: block; width: 384px; height: 128px; max-width: 100%; object-fit: contain; margin-inline: auto; image-rendering: pixelated; }
.release-label { margin: 16px 0 0; font-size: 8px; line-height: 16px; color: var(--hint); }
.auth-panel, .menu-panel { width: 100%; min-width: 0; }
.loading-status { margin: 0; padding: 16px 0; line-height: 32px; color: var(--yellow); }

.rom-option {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 48px;
  margin-inline: auto;
  padding: 16px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-weight: 400;
  line-height: 16px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.rom-option::before { content: ">"; position: absolute; left: -32px; top: 16px; color: var(--yellow); visibility: hidden; }
.rom-option.default-option::before,
.rom-option:hover::before,
.rom-option:focus::before { visibility: visible; }
.screen:has(.rom-option:focus) .rom-option::before,
.screen:not(:has(.rom-option:focus)):has(.rom-option:hover) .rom-option::before { visibility: hidden; }
.screen:has(.rom-option:focus) .rom-option:focus::before,
.screen:not(:has(.rom-option:focus)):has(.rom-option:hover) .rom-option:hover::before { visibility: visible; }
.rom-option:hover, .rom-option[aria-expanded="true"] { color: var(--yellow); }
.rom-option:disabled { color: var(--hint); }
.mode-menu, .game-options { display: grid; gap: 16px; }
.two-player-options { display: grid; gap: 0; margin: 0; }
.two-player-options .rom-option { color: var(--cyan); }
.two-player-options .rom-option:hover, .two-player-options .rom-option:focus { color: var(--yellow); }
.two-player-options .back-option { color: var(--hint); font-size: 8px; }
.mode-detail { display: block; margin-top: 8px; font-size: 8px; line-height: 16px; color: var(--hint); }
.menu-hint { margin: 24px 0 0; font-size: 8px; line-height: 16px; color: var(--hint); }
.menu-controls { color: var(--hint); }
.menu-controls summary:focus { outline: 2px solid var(--yellow); outline-offset: 4px; color: var(--yellow); }
.sign-out { margin-top: 48px; font-size: 8px; line-height: 16px; color: var(--hint); }
.sign-out::before { left: -16px; }

#login-form { max-width: 384px; margin-inline: auto; text-align: left; }
.field { display: block; margin-top: 32px; color: var(--cyan); font-size: 8px; line-height: 16px; }
.field:first-child { margin-top: 0; }
.optional-label { color: var(--hint); }
.player-details { margin-top: 16px; color: var(--cyan); font-size: 8px; line-height: 16px; }
.player-details summary { min-height: 48px; padding: 16px 0; cursor: pointer; list-style: none; touch-action: manipulation; }
.player-details summary::-webkit-details-marker { display: none; }
.player-details summary::before { content: "> "; color: var(--yellow); }
.player-details summary:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; color: var(--yellow); }
.player-details .field { margin-top: 8px; }
.field input { display: block; width: 100%; min-width: 0; min-height: 48px; margin-top: 8px; padding: 16px 8px; border: 2px solid #fff; border-radius: 0; background: #000; color: #fff; font-size: 16px; line-height: 16px; text-transform: uppercase; }
.field input:disabled { color: var(--hint); }
.field input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 1000px #000 inset; caret-color: #fff; }
#login-button { margin-top: 32px; }
.auth-status { margin: 24px 0 0; font-size: 8px; line-height: 16px; color: var(--hint); text-transform: uppercase; overflow-wrap: anywhere; }
.auth-status:empty { display: none; }
.auth-status.error { color: var(--yellow); }
.native-attribution { margin: 56px 0 0; font-size: 8px; line-height: 16px; color: var(--hint); text-transform: uppercase; }

@media (max-width: 543px) {
  :root { font-size: 8px; }
  body { padding: 16px 16px; }
  .screen { width: 256px; min-height: 240px; padding: 0 16px 16px; }
  .screen-title { margin-bottom: 40px; }
  .title-logo { width: 192px; height: 64px; }
  .loading-status { padding: 8px 0; line-height: 16px; }
  .rom-option { min-height: 48px; padding: 16px 0; line-height: 8px; }
  .rom-option::before { left: -16px; top: 16px; }
  .mode-menu, .game-options { gap: 0; }
  .sign-out { margin-top: 24px; }
  .sign-out::before { left: -16px; }
  .field { margin-top: 24px; }
  .field input { font-size: 16px; }
  #login-button { margin-top: 24px; }
  .auth-status { margin-top: 16px; }
  .native-attribution { margin-top: 32px; font-size: 8px; line-height: 16px; }
}