/* Phone play gate + landscape HUD. Linked after styles.css so these win.
   Ported from bunny-harvest/mobile.css — same rules, WP's ids and layout. */

/* 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
   (`wp-need-fs` — set by mobile-gate.js). Leaving the page permanently
   scrollable gives Android a pan gesture to claim during play. */
html { min-height: 100%; }
body.wp-need-fs { min-height: 101vh; }

#wp-play-gate {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(20, 32, 14, 0.95);
  color: #fff;
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
}
#wp-play-gate[hidden] { display: none; }
.wp-play-gate-card { max-width: 22rem; }
.wp-play-gate-phone {
  font-size: 64px; line-height: 1; margin-bottom: 12px;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.4s ease;
}
.wp-play-gate-phone.tilt { animation: wp-phone-tilt 1.6s ease-in-out infinite; }
@keyframes wp-phone-tilt {
  0%, 20% { transform: rotate(0deg); }
  45%, 100% { transform: rotate(90deg); }
}
#wp-play-gate h2 { font-size: 1.45rem; margin: 0 0 10px; color: #b8e890; }
#wp-play-gate p { font-size: 0.95rem; line-height: 1.45; color: #dcecd0; margin: 0 0 18px; }
#wp-play-gate-fs {
  pointer-events: auto;
  border: 0; border-radius: 999px;
  padding: 14px 22px; min-height: 48px;
  font-size: 16px; font-weight: 800;
  background: #b8e890; color: #1d3312;
  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. Every one 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, #minimap, #fs-btn, #back-home, #topbar, #prompt,
  #status, #teammates, #sky-indicator, #pack-pressure {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── COOLDOWN BUTTONS ────────────────────────────────────────────────
   While a button counts down it greys out and swaps its label for the
   whole seconds remaining. ui.js owns the `cooling` class and the number;
   input.js refuses the tap while it is set. The button keeps its
   pointer-events so it still swallows the touch — otherwise a tap on a
   dead button falls through to the field and spins the camera. */
.mobile-btn .mb-cd { display: none; }
.mobile-btn.cooling .mb-label { display: none; }
.mobile-btn.cooling .mb-cd {
  display: block;
  font-size: 22px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;   /* digits don't jitter as they change */
  color: #4a3418;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.mobile-btn.cooling {
  filter: grayscale(0.9) brightness(0.78);
  cursor: not-allowed;
}
/* Kill the press feedback so a blocked tap doesn't look like it worked. */
.mobile-btn.cooling.pressed,
.mobile-btn.cooling:active { transform: none; filter: grayscale(0.9) brightness(0.78); }

/* 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)); }

  /* COMPACT ROSTER — six pandas at the desktop card size ran ~340px, taller
     than a landscape phone once the top bar and joystick are accounted for,
     so the last player was cut off the bottom of the screen. Halving the
     card height fits the whole team with room to spare, and the container
     scrolls if a future mode adds more. */
  #teammates {
    top: calc(52px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    gap: 4px;
    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; }
  .tm {
    min-width: 0;
    width: 132px;
    padding: 3px 6px 3px 5px;
    gap: 5px;
    border-width: 2px;
    font-size: 10px;
    /* The chunky 3D drop-shadow costs a paint layer per card for no legibility. */
    box-shadow: 0 2px 0 #5b3a1a, inset 0 1px 0 rgba(255,255,255,0.55);
  }
  .tm-face { font-size: 13px; filter: none; }
  .tm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tm-tag {
    padding: 1px 5px;
    font-size: 7.5px; letter-spacing: 0.04em;
    border-width: 1px;
    box-shadow: none;
  }

  #minimap {
    top: calc(44px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
    width: 92px; height: 92px;
  }

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

  #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;
  }

  #prompt { font-size: 13px; padding: 8px 12px; bottom: 25%; }
  #status { display: none; }
  #back-home { font-size: 11px; padding: 5px 8px; }
}

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