/* ─── Knight's Quest — Styles ─── */

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: monospace;
}

#game-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#game {
  /* Pixel-perfect scaling */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  /* Fill viewport while maintaining 4:3 aspect */
  width: min(100vw, calc(100vh * 320 / 240));
  height: min(100vh, calc(100vw * 240 / 320));
  background: #111;
}

/* ─── Touch Controls (mobile only) ─── */
#touch-controls {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  #touch-controls {
    display: flex;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    justify-content: space-between;
    padding: 0 24px;
    pointer-events: none;
    z-index: 10;
  }

  #dpad {
    position: relative;
    width: 110px;
    height: 110px;
    pointer-events: auto;
    opacity: 0.6;
  }

  .dpad-btn {
    position: absolute;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
  }

  .dpad-up { left: 37px; top: 0; }
  .dpad-down { left: 37px; bottom: 0; }
  .dpad-left { left: 0; top: 37px; }
  .dpad-right { right: 0; top: 37px; }

  #attack-btn {
    width: 64px;
    height: 64px;
    background: rgba(200,50,50,0.3);
    border: 2px solid rgba(200,50,50,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    pointer-events: auto;
    opacity: 0.6;
    user-select: none;
    -webkit-user-select: none;
    align-self: flex-end;
  }
}