:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", Arial, sans-serif;
  background: #10222c;
  color: #f8fafc;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(255, 208, 79, 0.18), transparent 32rem),
    linear-gradient(135deg, #10222c 0%, #183943 48%, #14252d 100%);
}

button {
  -webkit-tap-highlight-color: transparent;
}

.site-header {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px max(16px, 3vw);
  border-bottom: 2px solid #ffd04f;
  background: #071116;
  font-family: monospace;
}

.site-header button, .donation-dialog button {
  border: 2px solid #ffd04f;
  border-radius: 4px;
  padding: 9px 14px;
  background: #152832;
  color: #fff;
  font: 800 12px monospace;
  cursor: pointer;
}

.page-shell {
  display: grid;
  min-height: calc(100vh - 54px);
  place-items: center;
  padding: 16px;
}

#game-container {
  width: min(100%, 960px);
  aspect-ratio: 16 / 9;
  border: 4px solid #ffd04f;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  image-rendering: pixelated;
}

.donation-dialog {
  width: min(92vw, 480px);
  border: 3px solid #ffd04f;
  border-radius: 4px;
  padding: 24px;
  background: #071116;
  color: #fff;
  text-align: center;
}
.donation-dialog::backdrop { background: #02070acc; }
.donation-dialog h2 { margin: 4px 0 12px; }
.dialog-label { color: #ffd04f; font: 800 12px monospace; }
.alias-box { display: grid; gap: 5px; margin: 20px 0; padding: 14px; border: 1px solid #55c7ea; background: #0e252f; }
.alias-box span { color: #8eb0bc; font: 10px monospace; }
.alias-box strong { color: #fff09a; font: 800 22px monospace; overflow-wrap: anywhere; }

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.mobile-controls {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  html, body {
    min-height: 100%;
    overscroll-behavior: none;
  }

  body {
    background: #0b2029;
  }

  .site-header {
    min-height: 46px;
    padding: 6px 10px;
    gap: 8px;
  }

  .site-header strong {
    font-size: clamp(10px, 3vw, 13px);
  }

  .site-header button {
    padding: 7px 9px;
    font-size: 10px;
  }

  .page-shell {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px;
  }

  #game-container {
    width: 100%;
    border-width: 3px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
  }

  .mobile-controls {
    width: 100%;
    display: grid;
    gap: 7px;
    padding: 8px;
    border: 2px solid #dcae35;
    background: #061016;
    touch-action: none;
    user-select: none;
  }

  .mobile-controls-top {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #315568;
    color: #bfe8f4;
    font: 800 11px monospace;
  }

  .mobile-controls-body {
    display: grid;
    grid-template-columns: minmax(132px, 42%) minmax(174px, 54%);
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .touch-control {
    border: 2px solid #8edfff;
    background: #0d2630;
    color: #fff;
    font-family: monospace;
    font-weight: 900;
    touch-action: none;
  }

  .touch-control.active {
    transform: scale(0.91);
    background: #28647b;
    box-shadow: 0 0 13px currentColor;
  }

  .touch-menu {
    min-width: 72px;
    min-height: 30px;
    border-color: #ffd447;
    color: #ffd447;
  }

  .touch-dpad {
    --touch-dpad-size: clamp(42px, 13vw, 58px);
    display: grid;
    grid-template: repeat(3, var(--touch-dpad-size)) / repeat(3, var(--touch-dpad-size));
    justify-self: start;
  }

  .touch-direction {
    display: grid;
    place-items: center;
    padding: 0;
    font-size: clamp(20px, 7vw, 30px);
  }

  .touch-up { grid-area: 1 / 2; }
  .touch-left { grid-area: 2 / 1; }
  .touch-dpad-center { grid-area: 2 / 2; border: 1px solid #315568; background: #102d38; }
  .touch-right { grid-area: 2 / 3; }
  .touch-down { grid-area: 3 / 2; }

  .touch-actions {
    --touch-action-size: clamp(50px, 15.5vw, 68px);
    display: grid;
    grid-template-columns: repeat(3, var(--touch-action-size));
    grid-template-rows: repeat(2, var(--touch-action-size));
    justify-content: end;
    align-items: center;
    gap: 7px;
  }

  .touch-action {
    width: var(--touch-action-size);
    height: var(--touch-action-size);
    display: grid;
    place-content: center;
    gap: 1px;
    padding: 0;
    border-radius: 50%;
  }

  .touch-action b { font-size: clamp(16px, 5vw, 23px); }
  .touch-action small { font-size: clamp(7px, 2vw, 9px); }
  .touch-special { color: #ffd447; border-color: #ffd447; }
  .touch-shoot { color: #ff7777; border-color: #ff7777; }
  .touch-pass { color: #8edfff; }
  .touch-slide { color: #c989ff; border-color: #c989ff; grid-column: 1; }
  .touch-sprint { color: #96ff87; border-color: #96ff87; grid-column: 2; }

  .donation-dialog {
    max-height: 88dvh;
    overflow: auto;
    padding: 18px;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .mobile-controls-body {
    grid-template-columns: 1fr 1.2fr;
  }
  .touch-dpad { --touch-dpad-size: 40px; }
  .touch-actions { --touch-action-size: 48px; gap: 5px; }
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .site-header {
    min-height: 38px;
    padding-block: 3px;
  }

  .page-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 38vw);
    align-items: center;
    gap: 8px;
    padding: 6px;
  }

  #game-container {
    max-height: calc(100dvh - 50px);
  }

  .mobile-controls {
    height: calc(100dvh - 50px);
    align-content: center;
  }

  .mobile-controls-body {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .touch-dpad { --touch-dpad-size: clamp(36px, 7.2vh, 54px); justify-self: center; }
  .touch-actions { --touch-action-size: clamp(43px, 9vh, 62px); justify-content: center; }
}