/* Rafaygen universal mobile game shell — portrait + landscape */
:root {
  --app-height: 100vh;
  --app-width: 100vw;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

@supports (height: 100dvh) {
  :root { --app-height: 100dvh; }
}

html {
  width: 100%;
  height: var(--app-height);
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  height: var(--app-height);
  min-height: var(--app-height);
  max-height: var(--app-height);
  margin: 0;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
}

#root {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.h-screen,
.min-h-screen,
.h-full,
.min-h-full,
.w-screen {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

.w-screen {
  width: 100% !important;
  max-width: 100% !important;
}

canvas,
video {
  display: block;
  max-width: 100%;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

button,
a,
[role="button"],
input,
select,
textarea,
label {
  touch-action: manipulation;
}

button,
[role="button"],
a.game-play-btn,
.screen-primary,
.screen-secondary,
.dock-button {
  min-height: 44px;
  min-width: 44px;
}

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

/* Scrollable overlays — keep play buttons reachable */
.overlay-screen,
.overlay-card,
.modal-box,
[class*="overflow-y-auto"],
[class*="max-h-"] {
  -webkit-overflow-scrolling: touch;
}

.overlay-screen {
  overflow-y: auto;
  max-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom));
}

/* HUD panels — prevent overlap/cutoff */
.hud-panel,
.hud-panel-left,
.hud-panel-right,
.top-bar,
.touch-dock {
  max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 0.5rem);
  box-sizing: border-box;
}

/* Landscape phones: compact HUD */
@media (orientation: landscape) and (max-height: 500px) {
  .hud-panel,
  .hud-panel-left,
  .hud-panel-right {
    max-height: 55vh !important;
    font-size: 0.85rem;
  }

  .overlay-card,
  .overlay-screen > * {
    padding: 0.5rem !important;
  }

  .text-6xl, .text-5xl {
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
  }

  .text-2xl {
    font-size: 1.1rem !important;
  }

  .p-6, .p-8, .p-10 {
    padding: 0.75rem !important;
  }
}

/* Portrait phones: stack panels, shrink HUD */
@media (orientation: portrait) and (max-width: 640px) {
  .hud-panel {
    width: calc(100vw - 1rem - var(--safe-left) - var(--safe-right)) !important;
    max-height: 38vh !important;
  }

  .hud-panel-left {
    left: max(0.5rem, var(--safe-left)) !important;
  }

  .hud-panel-right {
    right: max(0.5rem, var(--safe-right)) !important;
    bottom: max(4.5rem, calc(var(--safe-bottom) + 3.5rem)) !important;
  }

  .text-6xl {
    font-size: 2rem !important;
    line-height: 1 !important;
  }

  .text-5xl {
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
  }

  .text-2xl {
    font-size: 1.25rem !important;
  }

  .p-6 {
    padding: 0.75rem !important;
  }

  .p-8, .p-10 {
    padding: 1rem !important;
  }

  .max-w-2xl, .max-w-xl, .max-w-md {
    max-width: calc(100vw - 1.5rem - var(--safe-left) - var(--safe-right)) !important;
    width: 100% !important;
  }

  .mx-4 {
    margin-left: max(0.5rem, var(--safe-left)) !important;
    margin-right: max(0.5rem, var(--safe-right)) !important;
  }

  /* Side panels become bottom sheets on narrow screens */
  .fixed.top-4.left-4,
  .fixed.top-4.right-4 {
    top: max(0.5rem, var(--safe-top)) !important;
  }

  .fixed.bottom-4.left-4,
  .fixed.bottom-4.right-4 {
    bottom: max(0.5rem, var(--safe-bottom)) !important;
  }
}