/*
 * touch.css - phones and tablets.
 *
 * Loaded after pap.css. `data-touch` is stamped on <html> by js/ui/touch.js
 * (coarse pointer, a first touch, or Settings > Touch controls). The size
 * rules key off the viewport instead, because a small desktop window needs
 * the same compact layout as a phone.
 */

/* ------------------------------------------------------------ everywhere -- */

html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { overscroll-behavior: none; }
button, a, select, label, .pp-hotspot, .pp-pin, .pp-city, .pp-title__item { touch-action: manipulation; }

:root[data-touch="true"] body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:root[data-touch="true"] input, :root[data-touch="true"] textarea { -webkit-user-select: text; user-select: text; }

/* A tap leaves :hover stuck on the last button touched. */
@media (hover: none) {
  .pp-btn:hover:not(:disabled) { transform: none; filter: none; }
  .pp-btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.93); }
}

/* Notches and home bars. */
.pp-hud { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.pp-dialogue { bottom: max(16px, env(safe-area-inset-bottom)); }

:root:not([data-touch="true"]) .pp-hud__fullscreen { display: none; }

/* ------------------------------------------------------------ compact hud -- */

@media (max-width: 760px), (max-height: 520px) {
  .pp-hud { gap: 8px; padding-top: 4px; padding-bottom: 4px; }
  .pp-hud__who img { width: 32px; height: 32px; }
  .pp-hud__name { font-size: 9px; }
  .pp-hud__lvl { width: 84px; }
  .pp-hud__stat { gap: 3px; font-size: 17px; }
  .pp-hud__label { display: none; }
  /* On touch the HUD's labels are hidden, so Map, Journal, Settings and
     Fullscreen are icon-only: widen them to a finger. The HEIGHT stays the
     HUD's - the bar is the tightest thing on a phone screen, and a taller one
     costs the scene more than a 44px-square target buys. */
  .pp-hud .pp-btn--small { min-height: 38px; min-width: 44px; padding: 2px 8px; }
}
@media (max-height: 520px) { .pp-hud { flex-wrap: nowrap; } .pp-hud__where { display: none; } }

/* --------------------------------------------------------- scene: the pad -- */

.pp-pad { display: none; position: absolute; inset: 0; z-index: 12; pointer-events: none; }
:root[data-touch="true"] .pp-pad { display: block; }

.pp-pad__stick {
  position: absolute; left: max(6px, env(safe-area-inset-left)); bottom: max(6px, env(safe-area-inset-bottom));
  width: 150px; height: 150px; display: grid; place-items: center;
  pointer-events: auto; touch-action: none;
}
.pp-pad__base {
  width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20, 12, 6, 0.45); border: 3px solid rgba(243, 227, 191, 0.55);
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.15);
}
.pp-pad__knob {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(#f6e6c0, #d9b977); border: 3px solid var(--wood-dark);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
  transition: transform 90ms ease-out;
}
.pp-pad__stick.is-active .pp-pad__knob { transition: none; }
.pp-pad__stick.is-active .pp-pad__base { border-color: var(--gold-hi); }

.pp-pad__action {
  position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; font: inherit; color: var(--paper);
  pointer-events: auto; touch-action: manipulation;
}
.pp-pad__action b {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-pixel); font-size: 22px; color: var(--ink);
  background: linear-gradient(#f6e6c0, #e4c98e); border: 4px solid var(--wood-dark);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45);
}
.pp-pad__action.is-ready b { background: linear-gradient(#ffd46a, #f0a93a); animation: pp-pad-pulse 1.1s ease-in-out infinite; }
.pp-pad__action:active b { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.pp-pad__action:disabled { opacity: 0.5; }
.pp-pad__label {
  order: -1; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 16px; line-height: 1.15; padding: 2px 8px; border-radius: 6px; background: rgba(20, 12, 6, 0.8);
}
.pp-pad__label:empty { display: none; }
@keyframes pp-pad-pulse { 50% { box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(255, 216, 122, 0.45); } }

/* ------------------------------------------------------- scene: the rest -- */

/* Labels are the tap targets now: readable, and a bigger hit box than they look. */
:root[data-touch="true"] .pp-hotspot__label { font-size: max(14px, clamp(11px, 1.05vw, 16px)); padding: 3px 9px; }
:root[data-touch="true"] .pp-hotspot { padding: 6px 10px 0; }

/* The dock moves to the top so the stick and A own the bottom corners. */
:root[data-touch="true"] .pp-scene__dock { top: calc(var(--hud-h, 56px) + 8px); bottom: auto; left: max(8px, env(safe-area-inset-left)); max-width: calc(100% - 16px); }
:root[data-touch="true"] .pp-scene__dock .pp-panel { padding: 6px 8px; }
:root[data-touch="true"] .pp-scene__title { display: none; }

/* Landscape phone: the stage fills the height and leaves gutters either side.
   The dock becomes a column in the left gutter, above the stick. */
@media (max-height: 520px) and (orientation: landscape) {
  :root[data-touch="true"] .pp-scene__dock { max-width: 150px; }
  :root[data-touch="true"] .pp-scene__dock .pp-row { flex-direction: column; align-items: stretch; gap: 4px; }
  :root[data-touch="true"] .pp-scene__dock .pp-btn--small { min-height: 30px; padding: 0 8px; font-size: 16px; }
  :root[data-touch="true"] .pp-pad__stick { width: 128px; height: 128px; }
  :root[data-touch="true"] .pp-pad__base { width: 92px; height: 92px; }
  :root[data-touch="true"] .pp-pad__action b { width: 66px; height: 66px; font-size: 18px; }
  :root[data-touch="true"] .pp-pad__label { max-width: 120px; font-size: 14px; }

  .pp-dialogue .pp-panel { grid-template-columns: 56px 1fr; gap: 10px; padding: 8px 12px; }
  .pp-dialogue img { width: 56px; height: 56px; }
  .pp-dialogue__text { font-size: 18px; min-height: 2.4em; }
  .pp-overlay { padding: 8px; }
}