/* Pixel Burrow — focused device-fit/accessibility overrides. */
:root {
  --pb-safe-top: env(safe-area-inset-top, 0px);
  --pb-safe-right: env(safe-area-inset-right, 0px);
  --pb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pb-safe-left: env(safe-area-inset-left, 0px);
}

html,
body,
#game-root {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

@supports (height: 100dvh) {
  html,
  body,
  #game-root {
    height: 100dvh;
    min-height: 100dvh;
  }
}

#game-canvas {
  max-width: calc(100vw - var(--pb-safe-left) - var(--pb-safe-right) - 12px);
}

.hud {
  padding-top: calc(var(--pb-safe-top) + 8px);
  padding-right: calc(var(--pb-safe-right) + 10px);
  padding-left: calc(var(--pb-safe-left) + 10px);
}

.hud-top,
.hud-mid {
  max-width: calc(100vw - var(--pb-safe-left) - var(--pb-safe-right) - 20px);
}

.icon-btn,
.chapter-tab,
.level-tile,
.btn-pixel,
.nn-nudge-signup,
.nn-nudge-later {
  min-height: 44px;
}

.icon-btn {
  min-width: 44px;
  width: 44px;
  height: 44px;
}

.touch-controls {
  left: calc(var(--pb-safe-left) + 14px);
  bottom: calc(var(--pb-safe-bottom) + 14px);
}

.interact-btn {
  right: calc(var(--pb-safe-right) + 18px);
  bottom: calc(var(--pb-safe-bottom) + 18px);
}

.screen {
  padding: calc(var(--pb-safe-top) + 12px) calc(var(--pb-safe-right) + 12px) calc(var(--pb-safe-bottom) + 12px) calc(var(--pb-safe-left) + 12px);
}

.title-card,
.panel-card,
.levels-card {
  max-height: calc(100dvh - var(--pb-safe-top) - var(--pb-safe-bottom) - 24px);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.icon-btn:focus-visible,
.interact-btn:focus-visible,
.dpad-btn:focus-visible,
.btn-pixel:focus-visible,
.chapter-tab:focus-visible,
.level-tile:focus-visible,
.nn-nudge-signup:focus-visible,
.nn-nudge-later:focus-visible {
  outline: 3px solid #ffd77f;
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .hud-title {
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .air-wrap {
    min-width: 0;
    padding-inline: 8px;
  }

  .air-track {
    width: min(120px, 29vw);
  }

  .hud-chip {
    padding-inline: 7px;
  }

  .title-card,
  .panel-card {
    width: min(100%, 460px);
    padding: 20px 16px;
    gap: 11px;
  }

  .menu-buttons {
    gap: 8px;
  }

  .btn-pixel {
    padding: 11px 14px;
  }

  .level-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  #game-canvas {
    width: min(84vw, calc(72dvh * 12 / 9));
    max-height: 72dvh;
  }

  .hud {
    gap: 3px;
    padding-top: calc(var(--pb-safe-top) + 4px);
  }

  .hud-top,
  .hud-mid {
    width: min(84vw, calc(72dvh * 12 / 9));
  }

  .hud-title,
  .air-wrap,
  .hud-chip {
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .touch-controls {
    bottom: calc(var(--pb-safe-bottom) + 8px);
    left: calc(var(--pb-safe-left) + 8px);
  }

  .dpad {
    width: 132px;
    height: 132px;
  }

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

  .dpad-up { left: 44px; top: 0; }
  .dpad-down { left: 44px; top: 88px; }
  .dpad-left { left: 0; top: 44px; }
  .dpad-right { left: 88px; top: 44px; }

  .interact-btn {
    width: 60px;
    height: 60px;
    right: calc(var(--pb-safe-right) + 10px);
    bottom: calc(var(--pb-safe-bottom) + 10px);
  }

  .screen {
    align-items: flex-start;
  }

  .title-card,
  .panel-card {
    margin: auto;
    padding: 12px 16px;
    gap: 8px;
  }

  .title-card .title-miner {
    display: none;
  }

  .title-card .game-title {
    font-size: .95rem;
  }

  .title-card .menu-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .title-card .btn-pixel {
    padding: 8px 10px;
    font-size: .82rem;
  }

  .howto-list {
    gap: 6px;
    font-size: .78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}