/* Phone play gate + landscape HUD. Linked after styles.css so these win. */

/* No rubber-banding / pull-to-refresh anywhere — a browser-claimed drag
   kills pointer delivery to the joystick and field mid-gesture. */
html, body { overscroll-behavior: none; }

/* The 1%-overscroll URL-bar trick is only wanted while NOT fullscreen
   (`bh-need-fs` — set by mobile-gate.js). Leaving the page permanently
   scrollable gave Android a pan gesture to claim during play. */
html { min-height: 100%; }
body.bh-need-fs { min-height: 101vh; }

#bh-play-gate {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6, 4, 14, 0.94);
  color: #fff;
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
}
#bh-play-gate[hidden] { display: none; }
.bh-play-gate-card { max-width: 22rem; }
.bh-play-gate-phone {
  font-size: 64px; line-height: 1; margin-bottom: 12px;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.4s ease;
}
.bh-play-gate-phone.tilt { animation: bh-phone-tilt 1.6s ease-in-out infinite; }
@keyframes bh-phone-tilt {
  0%, 20% { transform: rotate(0deg); }
  45%, 100% { transform: rotate(90deg); }
}
#bh-play-gate h2 { font-size: 1.45rem; margin: 0 0 10px; color: #ffd166; }
#bh-play-gate p { font-size: 0.95rem; line-height: 1.45; color: #d7d0ea; margin: 0 0 18px; }
#bh-play-gate-fs {
  pointer-events: auto;
  border: 0; border-radius: 999px;
  padding: 14px 22px; min-height: 48px;
  font-size: 16px; font-weight: 800;
  background: #ffd166; color: #1a1004;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── MOBILE GPU BUDGET ───────────────────────────────────────────────
   backdrop-filter is among the most expensive things a mobile GPU can be
   asked to do: it re-samples and blurs everything behind the element. All
   of these panels sit on top of a 3D scene that repaints every frame, so
   the blur is recomputed continuously — five roster cards, the waypoint,
   the map controls. Every one of them already has a near-opaque
   background, so dropping the blur costs almost nothing visually and
   hands a large chunk of frame time back on budget phones. */
@media (pointer: coarse) {
  .tm, .bh-way, #fs-btn, #back-home, .ps-pill, #bh-rescue-prompt, #prompt,
  /* The LOBBY chrome was missing from this list and it is the worst
     offender of the lot. #lobby-card is a near-full-screen panel running
     `blur(28px) saturate(1.2)`, and the 3D lobby scene repaints behind it
     every frame — so the whole card's blur is recomputed every frame, over
     the largest area on screen. On an older phone that alone can cost more
     than the scene it is blurring. Same for the modal's full-viewport
     scrim and the four side tiles. */
  #lobby-card, #lobby-modal, #bh-go-home, #bh-fullscreen, .lst-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Without the blur these panels need to be solid enough to read against
     the moonlit field behind them. */
  #lobby-card:not(.bh-guest) {
    background: linear-gradient(180deg, rgba(24,20,14,0.92) 0%, rgba(12,9,6,0.95) 100%) !important;
  }
  #lobby-modal { background: rgba(4,4,10,0.90); }
  .lst-btn { background: rgba(14,12,26,0.88); }
  #bh-go-home, #bh-fullscreen { background: rgba(11,9,24,0.85); }
  /* The cards' translucency was tuned to sit under a blur; without it they
     need to be a touch more solid to stay readable over bright grass. */
  .tm { background: linear-gradient(180deg, rgba(20,18,38,0.94) 0%, rgba(8,6,22,0.96) 100%); }
  .bh-way { background: rgba(10,8,18,0.88); }
  #fs-btn { background: rgba(10,8,18,0.88); }
}

/* Landscape phones are wide AND short — compact HUD so nothing overlaps. */
@media (pointer: coarse) and (orientation: landscape), (max-height: 480px) {
  #topbar {
    top: calc(4px + env(safe-area-inset-top));
    font-size: 18px; gap: 14px;
  }
  #player-status { top: calc(28px + env(safe-area-inset-top)); }
  .ps-pill { padding: 3px 8px; font-size: 9px; }

  #teammates {
    /* Clears the ← Back pill (top 10px + ~24px tall). At 36px the first
       teammate's NAME row sat behind Back and was unreadable. */
    top: calc(52px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    width: 128px;
    gap: 4px;
    transform: none;
    /* Stop above the joystick (96px tall + 10px inset) instead of running
       under it — the list scrolls internally when the roster is full. */
    max-height: calc(100dvh - 176px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    scrollbar-width: none;
  }
  #teammates::-webkit-scrollbar { display: none; }
  /* COMPACT ROSTER — name and distance share one line instead of stacking,
     and the HP bar becomes a thin strip beneath them. Card height drops
     from ~40px to ~23px, so five players take ~120px instead of ~200px
     and the roster stops eating the left third of a landscape phone. */
  .tm {
    padding: 3px 6px;
    gap: 6px;
    grid-template-columns: 20px minmax(0, 1fr);
    border-radius: 8px;
  }
  .tm-avatar { width: 20px; height: 20px; font-size: 9px; }
  .tm-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name dist" "hp hp";
    align-items: baseline;
    column-gap: 5px;
    row-gap: 2px;
  }
  .tm-name { grid-area: name; font-size: 10px; }
  .tm-dist { grid-area: dist; font-size: 8px; }
  .tm-hp   { grid-area: hp; gap: 2px; transform: none; }
  .tm-hp .hp-cell { height: 3px; border-radius: 2px; }
  .tm-pill.you { display: none; }
  .tm-pill { font-size: 8px; padding: 1px 5px; letter-spacing: 0.04em; }

  /* Right-edge stack: fullscreen toggle → map → waypoint, all flush to the
     same margin. The toggle used to sit at right:96px purely to dodge the
     map (which started at top:32px, overlapping it), so it floated in the
     middle of nowhere. Dropping the map to 44px lets both share right:8px. */
  #bh-radar {
    top: calc(44px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
    gap: 5px;
  }
  #minimap { width: 84px; height: 84px; border-width: 2px; }
  /* 9.2rem was ~4px short of "Nearest carrot · 25 yd", so the waypoint
     wrapped onto a second line. Fit the longest string on one line. */
  .bh-way { font-size: 10px; padding: 3px 8px; max-width: 12rem; white-space: nowrap; }
  .bh-radar-key { display: none; }

  #joystick {
    display: block;
    width: 96px; height: 96px;
    left: calc(10px + env(safe-area-inset-left));
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  #joystick-stick { width: 40px; height: 40px; }

  .mobile-btn {
    width: 52px; height: 52px; font-size: 9px; border-width: 2px;
  }
  /* Action cluster — HARVEST / SPRINT / HIDE along the bottom edge where
     thumbs rest, SKILL stacked above HARVEST so the primary action keeps
     the corner. TAUNT is parked (see styles.css). */
  .harvest-btn {
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .sprint-btn {
    right: calc(66px + env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .hide-btn {
    right: calc(122px + env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .skill-btn {
    width: 52px; height: 52px; font-size: 9px;
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(66px + env(safe-area-inset-bottom));
  }

  #fs-btn {
    top: calc(6px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
    width: 30px; height: 30px; font-size: 13px; border-radius: 10px;
  }
  /* Below the bunny rather than across it — at 38% the prompt covered the
     cage you are being told to escape from. Still clears the buttons. */
  #prompt { font-size: 13px; padding: 8px 12px; bottom: 25%; }
  #bh-rescue-prompt {
    bottom: calc(128px + env(safe-area-inset-bottom));
    font-size: 11px; padding: 8px 12px;
  }
  #bh-rescue-prompt .key { display: none; }
  #status { display: none; }
  #back-home { font-size: 11px; padding: 5px 8px; }
}

@media (hover: hover) and (pointer: fine) {
  #bh-play-gate { display: none !important; }
}