/* ============================================================================
   WOBBLE FORGE — responsive.css
   File 6/6. Purpose-built layouts per device class.

   Driven primarily by `#app[data-device="mobile|tablet|desktop"]` and
   `#app[data-orientation="portrait|landscape"]`, then refined with width /
   height / orientation media queries so the fixed iframe sizes all work:

     desktop : 907x510 · 1216x684 · 1077x606 · 821x462 · 1366x768
               1920x1080 · 1536x864 · 1280x720
     tablet  : 1080x607
     mobile  : 800x450

   Invariant on every breakpoint: a clear central band is reserved for the
   tower and nothing decorative is added to fill empty space.
   ========================================================================== */

/* ==========================================================================
   DESKTOP — spacious HUD, keyboard hints, no touch control row.
   ========================================================================== */
#app[data-device="desktop"] .wf-controls:not(.is-force-shown) {
  display: none;
}

/* Keyboard hint row (JS-generated; shown only where a keyboard exists). */
.wf-keys {
  display: none;
  align-items: center;
  gap: var(--wf-sp-2);
  font-family: var(--wf-font-sans);
  font-weight: 800;
  font-size: var(--wf-fs-nano);
  letter-spacing: var(--wf-ls-wide);
  text-transform: uppercase;
  color: rgba(255, 243, 220, 0.82);
  pointer-events: none;
}

.wf-keys__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  color: var(--wf-navy-ink);
  background: var(--wf-cream);
  border: 2px solid var(--wf-navy);
  border-radius: var(--wf-r-xs);
  box-shadow: 0 2px 0 var(--wf-navy);
  font-family: var(--wf-font-display);
}

#app[data-device="desktop"] .wf-keys { display: inline-flex; }

/* Desktop HUD: roomy central band, plates keep their generous size. */
#app[data-device="desktop"] .wf-screen--game .wf-hud {
  padding: var(--wf-pad-edge);
  gap: var(--wf-hud-gap);
}

#app[data-device="desktop"] .wf-gauge__body { min-width: 150px; }
#app[data-device="desktop"] .wf-hud__rail { gap: var(--wf-sp-3); }

/* ==========================================================================
   TABLET — comfortable, slightly compressed HUD, larger touch targets.
   ========================================================================== */
#app[data-device="tablet"] .wf-screen--game .wf-hud {
  padding: var(--wf-pad-edge);
  gap: var(--wf-hud-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--wf-tower-band)) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "score   center  actions"
    "left    tower   rail"
    "gauges  .       block";
}

/* Controls live in the freed bottom-centre band. */
#app[data-device="tablet"] .wf-controls,
#app[data-device="mobile"] .wf-controls {
  display: flex;
}

#app[data-device="tablet"] .wf-hud__cluster--gauges { align-self: end; }
#app[data-device="tablet"] .wf-hud__cluster--block  { align-self: end; justify-self: end; }

#app[data-device="tablet"] .wf-plate__val { font-size: var(--wf-fs-lg); }
#app[data-device="tablet"] .wf-gauge__body { min-width: 104px; }
#app[data-device="tablet"] .wf-plate--best { display: none; }

/* ==========================================================================
   MOBILE — tower dominates, minimal HUD, big touch targets.
   ========================================================================== */
#app[data-device="mobile"] .wf-screen--game .wf-hud {
  padding: var(--wf-pad-edge);
  gap: var(--wf-hud-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--wf-tower-band)) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "score   center  actions"
    "left    tower   rail"
    "gauges  .       block";
}

#app[data-device="mobile"] .wf-plate--best,
#app[data-device="mobile"] .wf-gauge--forge,
#app[data-device="mobile"] .wf-plate--wind { display: none; }

#app[data-device="mobile"] .wf-plate {
  min-height: var(--wf-plate-min);
  padding: var(--wf-plate-pad);
}

#app[data-device="mobile"] .wf-plate__val { font-size: var(--wf-fs-lg); }
#app[data-device="mobile"] .wf-plate--score .wf-plate__val { font-size: var(--wf-fs-xl); }

#app[data-device="mobile"] .wf-gauge {
  padding: 5px 8px;
  gap: var(--wf-sp-2);
}

#app[data-device="mobile"] .wf-gauge__body { min-width: 76px; }
#app[data-device="mobile"] .wf-gauge__label { font-size: 9px; }
#app[data-device="mobile"] .wf-gauge__num { font-size: var(--wf-fs-md); }

#app[data-device="mobile"] .wf-next { width: var(--wf-next-size); padding: 5px 5px 7px; gap: 3px; }
#app[data-device="mobile"] .wf-next__key,
#app[data-device="mobile"] .wf-next__name { font-size: 8px; letter-spacing: 0.08em; }

#app[data-device="mobile"] .wf-hazards { gap: 3px; }
#app[data-device="mobile"] .wf-hazards > li,
#app[data-device="mobile"] .wf-hazard { padding: 3px 7px; font-size: 8px; }

/* Generously spaced, thumb-sized controls. */
#app[data-device="mobile"] .wf-controls { gap: var(--wf-ctl-gap); }
#app[data-device="mobile"] .wf-ctl { box-shadow: 0 5px 0 var(--wf-ctl-edge); }

/* Floats must clear the (narrower) tower centre on phones. */
#app[data-device="mobile"] .wf-float {
  --dy: -52px;
  top: 28%;
  font-size: clamp(var(--wf-fs-md), 3.6vw, var(--wf-fs-xl));
}

#app[data-device="mobile"] .wf-objective { top: 20%; padding: var(--wf-sp-2) var(--wf-sp-4); }
#app[data-device="mobile"] .wf-coach { top: 24%; padding: var(--wf-sp-2) var(--wf-sp-4); }

/* Panels go near-full-width on phones. */
#app[data-device="mobile"] .wf-panel { padding: var(--wf-sp-4); border-radius: var(--wf-r-lg); }
#app[data-device="mobile"] .wf-panel__title { font-size: var(--wf-fs-xl); }
#app[data-device="mobile"] .wf-res-hero { padding: var(--wf-sp-3); }

#app[data-device="mobile"] .wf-menu__body { width: min(100%, 360px); gap: var(--wf-sp-3); }
#app[data-device="mobile"] .wf-menu__nav { grid-template-columns: 1fr 1fr; gap: var(--wf-sp-2); }

/* ==========================================================================
   PORTRAIT — reposition rather than stretch: HUD to the top, controls to the
   bottom, tower band widened and kept clear down the middle.
   ========================================================================== */
#app[data-orientation="portrait"] .wf-screen--game .wf-hud {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--wf-tower-band)) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "score  center  actions"
    "block  tower   rail"
    "gauges tower   .";
  gap: var(--wf-hud-gap);
}

#app[data-orientation="portrait"] .wf-hud__cluster--gauges { align-self: start; justify-self: start; }
#app[data-orientation="portrait"] .wf-hud__cluster--block { align-self: start; justify-self: start; }
#app[data-orientation="portrait"] .wf-hud__rail { align-self: start; }

/* Controls stack at the bottom with extra breathing room. */
#app[data-orientation="portrait"] .wf-controls {
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 92vw;
  gap: var(--wf-sp-4);
}

#app[data-device="mobile"][data-orientation="portrait"] .wf-ctl {
  width: 66px;
  height: 66px;
}
#app[data-device="mobile"][data-orientation="portrait"] .wf-ctl--drop { height: 66px; }

#app[data-orientation="portrait"] .wf-objective { top: 16%; }
#app[data-orientation="portrait"] .wf-coach { top: 21%; }
#app[data-orientation="portrait"] .wf-float { top: 24%; }
#app[data-orientation="portrait"] .wf-ghost-bar { top: 10%; }

/* Collection and collect-stage stack vertically in portrait. */
#app[data-orientation="portrait"] .wf-collect {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
#app[data-orientation="portrait"] .wf-collect__stage { padding: var(--wf-sp-3); }
#app[data-orientation="portrait"] .wf-collect__preview { min-height: 92px; }
#app[data-orientation="portrait"] .wf-collect__grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 108px), 1fr));
}

#app[data-orientation="portrait"] .wf-load-card { width: min(94vw, 460px); }
#app[data-orientation="portrait"] .wf-logo__text { font-size: clamp(var(--wf-fs-2xl), 12vw, var(--wf-fs-4xl)); }

/* ==========================================================================
   SHORT VIEWPORTS — the platform's shortest landscape iframes
   (800x450, 821x462, 907x510). Compress vertical chrome, keep the tower big.
   ========================================================================== */
@media (max-height: 560px) {
  .wf-screen--game .wf-hud {
    padding: calc(var(--wf-pad-edge) * 0.7);
    gap: calc(var(--wf-hud-gap) * 0.75);
  }
  .wf-plate--best { display: none; }
  .wf-gauge__body { min-width: 92px; }
  .wf-next { width: calc(var(--wf-next-size) * 0.85); }
  .wf-panel { padding: var(--wf-sp-4); gap: var(--wf-sp-3); }
  .wf-panel__title { margin-top: 0; }
  .wf-panel__actions { gap: var(--wf-sp-2); }
  .wf-menu__body { gap: var(--wf-sp-3); padding-top: 0; padding-bottom: var(--wf-sp-4); }
  .wf-logo__text { font-size: clamp(var(--wf-fs-2xl), 7vw, var(--wf-fs-3xl)); }
  .wf-controls { bottom: calc(var(--wf-pad-edge) + var(--wf-safe-b)); }
}

@media (max-height: 480px) {
  .wf-screen--game .wf-hud { padding: 8px; gap: 6px; }
  .wf-gauge--forge { display: none; }
  .wf-plate--block { display: none; }
  .wf-plate__key { display: none; }
  .wf-gauge__label { display: none; }
  .wf-panel--results .wf-stats { grid-template-columns: repeat(2, 1fr); }
  .wf-res-hero__val { font-size: clamp(var(--wf-fs-2xl), 6vw, var(--wf-fs-4xl)); }
  .wf-float { --dy: -44px; }
}

@media (max-height: 420px) {
  .wf-tagline { display: none; }
  .wf-hazards { display: none; }
  .wf-res-hero { padding: var(--wf-sp-2); }
}

/* ==========================================================================
   TABLET LANDSCAPE REFINEMENT (e.g. 1080x607) — compress without stacking.
   ========================================================================== */
@media (max-height: 640px) and (min-width: 900px) and (max-width: 1200px) {
  #app[data-device="tablet"] .wf-gauge__body { min-width: 96px; }
  #app[data-device="tablet"] .wf-next { width: calc(var(--wf-next-size) * 0.9); }
  #app[data-device="tablet"] .wf-head { padding-top: var(--wf-sp-3); }
}

/* ==========================================================================
   SPACIOUS DESKTOP REFINEMENTS (1366x768 → 1920x1080)
   The extra room goes to the tower, not to decorative chrome.
   ========================================================================== */
@media (min-width: 1300px) and (min-height: 720px) {
  #app[data-device="desktop"] .wf-screen--game .wf-hud {
    padding: calc(var(--wf-pad-edge) * 1.15);
  }
  #app[data-device="desktop"] .wf-gauge__body { min-width: 176px; }
  #app[data-device="desktop"] .wf-plate { --wf-plate-pad: 12px 18px; }
}

@media (min-width: 1700px) and (min-height: 950px) {
  #app[data-device="desktop"] .wf-panel { --wf-panel-w: 620px; }
  #app[data-device="desktop"] .wf-menu__body { width: min(100%, 500px); }
}

/* ==========================================================================
   NARROW-WIDTH FALLBACKS (in case data-device is not yet applied at boot)
   ========================================================================== */
@media (max-width: 560px) {
  .wf-menu__body { width: min(100%, 340px); }
  .wf-collect { grid-template-columns: minmax(0, 1fr); }
  .wf-stats { grid-template-columns: 1fr 1fr; }
  .wf-res-hero { grid-template-columns: 1fr; }
}

/* Coarse pointers always get the on-screen control row, whatever the device
   attribute says, so touch users are never stranded. */
@media (pointer: coarse) {
  .wf-controls { display: flex; }
  .wf-keys { display: none !important; }
}

/* Fine pointers on a wide screen get keyboard hints instead of controls. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  #app[data-device="desktop"] .wf-controls { display: none; }
}

/* ==========================================================================
   LANDSCAPE PHONE SAFETY — very wide + very short (e.g. 821x462 landscape
   phones/iframes): pin next-frame small and keep the centre column free.
   ========================================================================== */
@media (max-width: 940px) and (max-height: 520px) and (orientation: landscape) {
  .wf-next { width: 68px; }
  .wf-next__art { width: 34px; height: 34px; }
  .wf-ctl { --wf-ctl-size: 58px; }
  .wf-controls { gap: 14px; }
}