* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #090000;
  background-image: radial-gradient(ellipse 90% 90% at 50% 50%, #150404 20%, #050000 100%);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

#game-container {
  position: relative;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow:
    0 0 0 2px #3a0000,
    0 0 0 4px #0e0000,
    0 0 0 6px #2a0000,
    0 0 80px #5a000066,
    0 0 160px #3a000044;
}

#game-canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 512px;
  height: 480px;
  background: #000;
}

@media (min-width: 1024px) {
  #game-canvas {
    width: 768px;
    height: 720px;
  }
}

@media (min-width: 1536px) {
  #game-canvas {
    width: 1024px;
    height: 960px;
  }
}

/* ===== TOUCH CONTROLS (hidden on desktop) ===== */
#touch-controls {
  display: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Off-screen input used to open the mobile keyboard during name entry */
#name-input {
  position: fixed;
  top: -200px;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ===== MOBILE / TOUCH SCREEN ===== */
@media (hover: none) and (pointer: coarse) {

  /* ── PORTRAIT ── */
  body {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    gap: 6px;
    padding:
      env(safe-area-inset-top, 0px)
      env(safe-area-inset-right, 8px)
      env(safe-area-inset-bottom, 0px)
      env(safe-area-inset-left, 8px);
  }

  #game-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Canvas fills available width; max-height reserves space for
     shortcut row (40px) + main controls row (~144px dpad) + gaps (~21px) */
  #game-canvas {
    width: min(95vw, 512px);
    height: auto;
    aspect-ratio: 512 / 480;
    max-height: calc(100svh - 205px);
  }

  #touch-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(95vw, 512px);
    flex-shrink: 0;
    gap: 6px;
  }

  #touch-shortcuts {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 4px;
  }

  #touch-main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  /* ── LANDSCAPE ── */
  @media (orientation: landscape) {
    /*
     * Layout:
     *   [ TABS | TRADE | CRAFT | DIPLO | USE | ENVOY ]  ← shortcut strip (full width)
     *   [ D-PAD ]   [ CANVAS ]   [ OK / BACK ]          ← controls flank the canvas
     *
     * #touch-controls and #touch-main are set to display:contents so their
     * children participate directly in the body grid.
     */
    body {
      display: grid;
      grid-template-areas:
        "shortcuts shortcuts shortcuts"
        "dpad      canvas    actions";
      grid-template-columns: auto 1fr auto;
      grid-template-rows: auto 1fr;
      justify-items: center;
      align-items: center;
      gap: 4px 8px;
      padding:
        env(safe-area-inset-top, 4px)
        env(safe-area-inset-right, 8px)
        env(safe-area-inset-bottom, 4px)
        env(safe-area-inset-left, 8px);
    }

    /* Dissolve wrappers — children join the body grid directly */
    #touch-controls,
    #touch-main {
      display: contents;
    }

    #game-container {
      grid-area: canvas;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Canvas fills available height; aspect-ratio handles width automatically */
    #game-canvas {
      width: auto;
      height: calc(100svh - 56px); /* 40px shortcut row + 4px row gap + ~12px padding */
      max-height: none;
      aspect-ratio: 512 / 480;
    }

    #touch-dpad    { grid-area: dpad; }
    #touch-shortcuts { grid-area: shortcuts; width: 100%; }

    #touch-actions {
      grid-area: actions;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    /* Slightly smaller controls in landscape so canvas gets maximum space */
    .dpad-btn,
    .dpad-center {
      width: 38px;
      height: 38px;
    }

    .action-btn {
      width: 44px;
      height: 44px;
    }
  }
}

/* Shortcut button row (TAB, T, C, D, U, E) */
.shortcut-btn {
  flex: 1;
  height: 40px;
  background: #2c2c2c;
  border: 2px solid #3f3f3f;
  border-radius: 6px;
  color: #bcbcbc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.shortcut-label {
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  color: #fcfcfc;
  line-height: 1;
}

.shortcut-key {
  font-family: monospace;
  font-size: 8px;
  font-weight: normal;
  color: #7f7f7f;
  line-height: 1;
}

.shortcut-btn:active {
  background: #4a4a4a;
  border-color: #f8d878;
}

.shortcut-btn:active .shortcut-label {
  color: #f8d878;
}

.shortcut-btn:active .shortcut-key {
  color: #ac7c00;
}

/* D-pad layout */
#touch-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.dpad-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.dpad-btn {
  width: 46px;
  height: 46px;
  background: #2c2c2c;
  border: 2px solid #3f3f3f;
  border-radius: 8px;
  color: #f8d878;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  line-height: 1;
}

.dpad-btn:active {
  background: #4a4a4a;
  border-color: #f8d878;
}

.dpad-center {
  width: 46px;
  height: 46px;
  background: #1c1c1c;
  border-radius: 4px;
}

/* Action buttons (A / B) */
#touch-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.action-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #3f3f3f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: filter 0.05s, transform 0.05s;
}

.action-btn .shortcut-label {
  font-size: 11px;
}

.action-btn .shortcut-key {
  font-size: 8px;
}

.action-btn-a {
  background: #005800;
  border-color: #00a800;
  color: #b8f818;
}

.action-btn-b {
  background: #880000;
  border-color: #cc0000;
  color: #f87858;
}

.action-btn:active {
  filter: brightness(1.4);
  transform: scale(0.92);
}

.action-btn:active .shortcut-label {
  color: #f8d878;
}

.action-btn:active .shortcut-key {
  color: #ac7c00;
}

/* ===== SITE FOOTER ===== */
#site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 5px 8px 6px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #4a2222;
  pointer-events: none;
  z-index: 10;
  background: linear-gradient(transparent, #06000099 50%);
}

#site-footer a {
  color: #6a3333;
  text-decoration: none;
  pointer-events: all;
  transition: color 0.15s;
}

#site-footer a:hover {
  color: #cc4444;
}

/* Hide footer on touch/mobile to avoid overlapping controls */
@media (hover: none) and (pointer: coarse) {
  #site-footer {
    display: none;
  }
}

/* ===== PAGE CHROME: scanlines, outer frame, corner brackets ===== */
#page-chrome {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

/* Outer viewport frame */
#page-chrome::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #1e0000;
  box-shadow: inset 0 0 0 1px #0e0000, inset 0 0 80px #3a000022;
}

/* Scanline overlay */
#page-chrome::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    #00000014 3px,
    #00000014 4px
  );
}

/* Corner bracket accents */
.corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #660000;
  border-style: solid;
}

.corner-tl { top: 10px;    left: 10px;    border-width: 2px 0 0 2px; }
.corner-tr { top: 10px;    right: 10px;   border-width: 2px 2px 0 0; }
.corner-bl { bottom: 10px; left: 10px;    border-width: 0 0 2px 2px; }
.corner-br { bottom: 10px; right: 10px;   border-width: 0 2px 2px 0; }

/* Hide page chrome on touch/mobile — controls already fill the screen */
@media (hover: none) and (pointer: coarse) {
  #page-chrome {
    display: none;
  }
}