/* /watch-isometric - the experimental alternate observer.
 *
 * Deliberately small: almost everything (status bar, side controls, the inspector
 * panel and its Brain Inspector contents, the legend) is shared verbatim with
 * `watch.css` via the same class names, so the two pages stay visually consistent
 * without a second copy of that design. This file holds only what is genuinely
 * specific to the isometric page.
 */

#iso-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#iso-canvas:active { cursor: grabbing; }

.iso-banner {
  margin: 0;
  padding: 0.55rem 0.9rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.05)), var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.86rem;
  color: var(--text-dim);
}
.iso-banner strong { color: var(--accent-strong); }
.iso-banner a { white-space: nowrap; }

.iso-fps {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  padding: 0.32rem 0.5rem;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.iso-fps:hover, .iso-fps:focus-visible { color: var(--text); }

/* Mobile pass (world-maturation phase, Part 18): a real phone-width capture found
   this page's own extra "Experimental" banner -- on top of the staging notice and
   status bar every Watch page already carries -- pushed the world canvas entirely
   below the first screenful, worse than classic /watch (which has no such banner).
   "Mobile must not be treated as shrunk desktop": rather than shrinking that text
   until it is unreadable, or deleting real disclosure content, reorder so the world
   itself -- the actual reason to open this page -- is what a phone visitor sees
   first. `.watch-root` is already a column flexbox; nothing here touches the DOM,
   so reading order for assistive tech is unchanged, only the flex visual order. */
@media (max-width: 640px) {
  .iso-root { display: flex; flex-direction: column; }
  .iso-root .watch-stage { order: -1; }
  .iso-banner, .iso-root .watch-prelude, .iso-root .watch-topbar { order: 0; }
  .iso-root .watch-lower { order: 1; }
  .iso-banner { font-size: 0.76rem; padding: 0.42rem 0.7rem; line-height: 1.4; }
}

/* Cozy phase (brief Parts 13-21): Ambient mode quiets everything that competes
   with the world itself -- the interface should recede, not the world. Only
   chrome fades; the canvas, its controls dock and the ambient/sound toggles
   (so a viewer can always get back out) stay put. A slow, restrained transition,
   never an abrupt cut -- consistent with the rest of this phase's "no abrupt
   crossfades" rule for anything presentational. */
.iso-ambient-on .watch-prelude,
.iso-ambient-on .watch-lower,
.iso-ambient-on .iso-banner { opacity: 0.35; transition: opacity 900ms ease; }
.iso-ambient-on .watch-prelude:hover,
.iso-ambient-on .iso-banner:hover { opacity: 1; }
.iso-ambient-on #iso-btn-reset,
.iso-ambient-on #iso-btn-inspect { opacity: 0.55; }
.iso-ambient-on #iso-btn-ambient { color: var(--accent-strong); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .iso-ambient-on .watch-prelude, .iso-ambient-on .watch-lower, .iso-ambient-on .iso-banner { transition: none; }
}

/* The public preview / embedded gate mount (brief Parts 6, 7, 42): a smaller,
   self-contained frame rather than the full member `.watch-stage` layout -- it
   never has to make room for the side controls, status bar or hint strip that
   only exist in the full experience. */
.iso-root--preview { margin: 1.1rem 0; }
.iso-preview-frame {
  position: relative;
  height: min(62vh, 520px);
  min-height: 280px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0f4256;  /* matches the sea the canvas itself draws (watch-atmosphere.js) */
}
.iso-preview-frame #iso-canvas { cursor: default; }
.iso-preview-tag {
  position: absolute; left: 0.8rem; bottom: 0.7rem; margin: 0;
  padding: 0.3rem 0.65rem;
  background: rgba(10, 16, 18, 0.62);
  border: 1px solid rgba(155, 232, 218, 0.25);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--accent-strong);
  backdrop-filter: blur(2px);
}
.iso-gate-hero { margin-bottom: 0.4rem; }

/* Real defect found during live verification: watch.css's shared rule moves
   `.watch-side-controls` from top to BOTTOM-right while the inspector is open,
   to avoid sitting under it -- correct for Classic Watch's shorter inspector,
   but the isometric page's inspector (particularly with the Brain Inspector's
   `is-wide` panel open) commonly spans close to the full frame height, so
   bottom-right collides with the same right-anchored panel just as badly, and
   Ambient/Sound/Music -- new controls this phase adds to that same dock --
   became unreachable while a member had an organism's controller open.
   Isometric Watch has no `.watch-zoom-controls` occupying top-left (Classic
   Watch does), so relocating there instead -- unlike the bottom flip -- always
   keeps the dock clear of the inspector rather than merely usually clear. */
.iso-root .watch-canvas-frame:has(.watch-inspector:not([hidden])) .watch-side-controls {
  top: 0.8rem; left: 0.8rem; right: auto; bottom: auto;
}
@media (max-width: 640px) {
  .iso-preview-frame { height: min(50vh, 380px); }
}

/* ================================================================ cozy visual pass
 *
 * A defect first: the banner's leading label used `badge badge-live`, and neither
 * class exists anywhere in this project's CSS. It therefore rendered as bare inline
 * text with no separator, and the live page read "Emergent Life Lab An immersive,
 * isometric presentation..." as one run-on sentence. It is now a real eyebrow chip,
 * and the sentence behind it was cut down: this is a flagship view whose chrome
 * should recede, not a place to restate the product.
 */
.iso-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  background: rgba(255, 255, 255, 0.018);
  border-color: rgba(255, 255, 255, 0.055);
  font-size: 0.82rem;
}
.iso-eyebrow {
  flex: 0 0 auto;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-strong);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  white-space: nowrap;
}
.iso-banner-text { flex: 1 1 18rem; min-width: 0; }
.iso-banner-alt { flex: 0 0 auto; }

/* The demoted, experimental organism-signature control (see watch-iso.js): present
   only once a viewer has turned ambience on, and visibly a secondary thing. */
.insp-sonify.is-quiet {
  opacity: 0.72;
  font-size: 0.74rem;
}
.insp-sonify.is-quiet:hover { opacity: 1; }

/* The preview page puts its live world above the fold (see watch_isometric_preview
   .html): the hero above it is a heading, not a wall of prose. */
.hero-tight { margin-bottom: 0.9rem; }
.hero-tight h1 { margin-bottom: 0; }

/* Ambient mode, matured (brief Part 18). Previously only the banner/prelude/hint
   strip receded, which left a full-brightness status bar, a live frame-rate readout
   and a connection pill sitting above a world that had just been handed a slow,
   self-driving camera -- the least restful thing on a screen meant to be left
   running. Everything above the canvas now steps back together, and comes straight
   back on hover or keyboard focus, so status is never actually taken away. */
.iso-ambient-on .watch-topbar {
  opacity: 0.34;
  transition: opacity 900ms ease;
}
.iso-ambient-on .watch-topbar:hover,
.iso-ambient-on .watch-topbar:focus-within { opacity: 1; }
.iso-ambient-on .iso-fps { opacity: 0; transition: opacity 900ms ease; }
.iso-ambient-on .watch-topbar:hover .iso-fps { opacity: 1; }
/* The canvas frame's own border is the last hard rectangle on screen; in Ambient it
   softens so the world reads as a window rather than as a boxed widget. */
.iso-ambient-on .watch-canvas-frame {
  border-color: rgba(255, 255, 255, 0.045);
  transition: border-color 900ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .iso-ambient-on .watch-topbar,
  .iso-ambient-on .iso-fps,
  .iso-ambient-on .watch-canvas-frame { transition: none; }
}

/* ============================================== legibility recovery: zoom controls
 *
 * The reported regression was "I can no longer zoom in far enough". The camera's
 * limits had not in fact changed since the first isometric commit -- but there was
 * no zoom affordance on screen at all, and no readout of how close the view was, so
 * a viewer's only way in was to guess that the canvas takes a scroll wheel. These
 * are deliberately the smallest controls in the dock: a `-`, a live "how wide is one
 * world cell" readout, a `+`, and one "Close up" action. Not a camera panel.
 */
.watch-side-btn-icon {
  padding: 0.24rem 0.5rem;
  font-weight: 700;
  line-height: 1;
  min-width: 1.7rem;
}
.watch-side-btn-icon:disabled { opacity: 0.32; cursor: default; }
.watch-side-btn-icon:disabled:hover { color: var(--text-dim); }
.iso-zoom {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 4.6rem;
  text-align: center;
  white-space: nowrap;
  align-self: center;
}
@media (max-width: 640px) {
  .iso-zoom { min-width: 4rem; font-size: 0.63rem; }
  .watch-side-btn-icon { padding: 0.22rem 0.42rem; min-width: 1.5rem; }
}

/* ------------------------------------------------------ ambience controls
 * Present only while ambience is on (see watch-iso.js `setSoundOn`). Brief Part 22:
 * one volume, one soundscape chooser, no mixer.
 */
.iso-sound-panel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.15rem 0 0.35rem;
}
.iso-sound-panel[hidden] { display: none; }
.iso-sound-ctl { display: inline-flex; align-items: center; }
.iso-sound-panel input[type="range"] {
  width: 5.2rem; height: 1rem; accent-color: var(--accent); cursor: pointer;
}
.iso-sound-panel select {
  font: inherit; font-size: 0.72rem;
  background: rgba(10, 16, 18, 0.9); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.14rem 0.4rem; cursor: pointer;
}
.iso-sound-panel select:hover { color: var(--text); }
@media (max-width: 640px) {
  .iso-sound-panel input[type="range"] { width: 4rem; }
  .iso-sound-panel select { font-size: 0.66rem; }
}