/* ============================================================
   BARNYARD — MOBILE overrides (touch controls + responsive)
   Loaded AFTER style.css. Keeps the same look, adds touch.
   ============================================================ */

/* prevent page bounce / accidental zoom while playing */
html, body { overscroll-behavior: none; touch-action: manipulation; }
* { -webkit-tap-highlight-color: transparent; }

/* farmhouse tab strip (3 tabs) */
.htabs { grid-template-columns: repeat(3, 1fr); }

/* ---- on-screen touch controls --------------------------------
   Lives inside #game, so it only shows while playing.            */
#touch-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 200;                 /* above world, below popup (300) */
  pointer-events: none;          /* only the buttons are tappable */
  padding: 0 calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.tc-btn {
  pointer-events: auto;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--silk, 'Fredoka', sans-serif);
  color: var(--ink, #2a1d12);
  background: rgba(244, 233, 208, 0.82);
  border: 3px solid var(--ink, #2a1d12);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(11, 33, 30, 0.45);
  font-size: 1.25rem; line-height: 1;
  transition: transform .06s ease, background .06s ease;
}
.tc-btn.on {
  background: var(--amber, #e8b53a);
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(11, 33, 30, 0.45);
}

/* D-pad as a 3x3 cross */
#touch-dpad {
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(3, 54px);
  grid-template-rows: repeat(3, 54px);
  gap: 6px;
}
#touch-dpad .tc-btn { width: 54px; height: 54px; opacity: .92; }
.tc-up    { grid-column: 2; grid-row: 1; }
.tc-left  { grid-column: 1; grid-row: 2; }
.tc-right { grid-column: 3; grid-row: 2; }
.tc-down  { grid-column: 2; grid-row: 3; }

/* big round action button */
#touch-action {
  width: 84px; height: 84px;
  border-radius: 50%;
  font-size: 1.9rem;
  background: rgba(214, 122, 60, 0.9);
  color: #fff5e6;
  align-self: flex-end;
  margin-bottom: 6px;
}
#touch-action.on { background: var(--amber, #e8b53a); color: var(--ink, #2a1d12); }

/* the status hint is covered by the D-pad on phones — hide it there
   (the welcome toast already explains the controls) */
@media (max-width: 620px), (max-height: 520px) {
  #game .statusbar { display: none; }
}

/* ---- phone-sized HUD ----------------------------------------- */
@media (max-width: 620px) {
  .hud { padding: 8px 10px; flex-wrap: wrap; gap: 8px; }
  .hud-brand small { display: none; }
  .hud-stats { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .chip { padding: 5px 8px; font-size: .82rem; }
  .statusbar { font-size: .62rem; padding: 6px 10px; }
}

/* ---- phone-sized menu ---------------------------------------- */
@media (max-width: 620px) {
  .title { font-size: 3rem; }
  .hero-left { padding: 20px 18px; }
  #menu .hero { display: flex; flex-direction: column; }
  #menu .hero-left { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero-left .menu-list { flex: 0 0 auto; max-width: none; }
  .hero-right { min-height: 240px; }
  .lead { font-size: .95rem; }
  .menu-item { padding: 16px 18px; font-size: 1rem; }  /* finger-sized */
}

/* ---- phone-sized popups -------------------------------------- */
@media (max-width: 620px) {
  .popup-card { width: 94vw; max-height: 80vh; }
  .seedpick { grid-template-columns: repeat(3, 1fr); }
  .wgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- notch / status-bar safe areas (viewport-fit=cover) ------
   Keep the top HUD, menu bar and boot logo clear of the notch /
   status bar; ID selectors win over the .hud media shorthand.   */
@supports (padding: env(safe-area-inset-top)) {
  #game .hud {
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-left: calc(10px + env(safe-area-inset-left));
    padding-right: calc(10px + env(safe-area-inset-right));
  }
  #menu .topbar { padding-top: calc(14px + env(safe-area-inset-top)); }
  #boot .boot-inner {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}