/* ── Reveal ─────────────────────────────────────────── */
/* Views scroll by default (css/cosmos-base.css). The System screen is a
   fixed stage that is not meant to scroll, and the closed info sheet sits a
   few pixels below the fold, which was enough to reserve a scrollbar lane on
   a desktop browser: the canvases stopped short of the right edge, and under
   the Ship Interior (SC-SHIP-INTERIOR) that lane read as a light seam inside
   the right-hand window. Nothing here is reached by scrolling, so clip it. */
#reveal.view { overflow: hidden; }
#reveal .view-body {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.reveal-container {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  margin: 0;
}
.btn-skip-reveal {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  padding: 6px 14px;
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-skip-reveal:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* Ghost button, top-left twin of SKIP: opens the full system data sheet. */
/* Label photos stay visible in the archive: card thumbnail + data sheet. */
/* Canvas controls. One shape for all of them: a 34px round icon button.
   Icons stay narrow enough that DATA and PROBE never collide, even on a
   phone canvas. The way back out is the Galaxy nav button and the Back
   button in the action bar. */
.btn-info-reveal {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-body-scan svg, .btn-ship-arrive svg, .btn-ship-orbit svg { width: 20px; height: 20px; }
.btn-info-reveal:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-info-reveal[hidden] { display: none; }
/* DCOSMOS-SHEETMIN: btnRevealInfo's own dock corner, the same corner the
   info panel and its minimized chip live in -- an ID selector so it wins
   over the shared .btn-info-reveal top-left position above without
   touching that base rule (btnBodyScan and btnScanPulse still read it).
   Faded (not [hidden]) so it can disappear quietly whenever the panel
   itself is up, in either its expanded or minimized shape -- one of the
   panel's own controls (its close button, or the chip) is always the
   thing to tap in that corner then. */
#btnRevealInfo.btn-info-dock {
  top: auto;
  left: auto;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 13;
  /* Owner 2026-09-03: a drawn info glyph on a bigger ring; dark until
     pressed, then lit to the accent like the header buttons. */
  width: 58px;
  height: 58px;
  color: var(--text-dim);
  background: var(--bg-panel);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s,
    border-color 0.2s, color 0.2s, background 0.2s;
}
#btnRevealInfo.btn-info-dock svg { display: block; width: 30px; height: 30px; }
#btnRevealInfo.btn-info-dock:active, #btnRevealInfo.btn-info-dock:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
}
#btnRevealInfo.btn-info-dock.info-dock-hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6);
  pointer-events: none;
}
@media (min-width: 721px) {
  #btnRevealInfo.btn-info-dock { right: 16px; bottom: 16px; }
}
/* SC-GOLDILOCKS: the habitable-zone toggle, docked in the bottom-left
   corner -- the mirror of the info dock across the canvas. The lit state
   tints the ring green the same way the probe button's own active state
   tints amber (cosmos-scanpulse.css .probing). */
/* Owner 2026-09-03: docked right above the info button in the
   bottom-right corner, smaller than it. A drawn sprout glyph, dark until
   the band is on, then lit green. */
.btn-habitable-band {
  top: auto;
  left: auto;
  right: 17px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 11; /* under the info panel (cosmos-sheet.css z-index 12) */
  width: 44px;
  height: 44px;
  color: var(--text-dim);
  background: var(--bg-panel);
}
.btn-habitable-band svg { display: block; width: 24px; height: 24px; }
.btn-habitable-band.band-on {
  border-color: rgba(126, 226, 158, 0.8);
  color: rgba(126, 226, 158, 1);
  background: rgba(34, 84, 56, 0.35);
  box-shadow: 0 0 14px rgba(126, 226, 158, 0.3);
}
@media (min-width: 721px) {
  .btn-habitable-band { right: 23px; bottom: 82px; }
}
/* SCAN sits on the right edge, one row under the probe button, and is
   covered outright the instant a scan is armed (the full-screen overlay
   below takes the whole viewport). Its label only ever reads SCAN or, once
   the body's one-time survey is done, SCANNED (disabled) -- reveal-pane.js
   owns which. */
/* SC-BTN-STACK (owner 2026-08-26): the scan button is icon-only now --
   the word came off the pill, so it wears the same 34px round shape as
   the rest of the right-edge stack. The label span stays in the markup
   (other modules still write it through the button's own accessor) and
   is simply never shown; the button title still explains each state. */
.btn-body-scan {
  left: auto;
  right: 10px;
  top: 54px;
}
#bodyScanLabel { display: none; }
.btn-body-scan svg { flex-shrink: 0; }
.btn-body-scan:disabled {
  opacity: 0.4;
  cursor: default;
  border-color: rgba(148, 163, 184, 0.2);
}
/* armed: a survey scan is running and tapping again disarms it */
.btn-body-scan.scanning {
  border-color: var(--accent);
  background: rgba(245, 158, 11, 0.14);
  color: var(--accent);
}
/* SC-SHIP-ARRIVE: the summon-ship rocket, third in the right-edge stack --
   probe pill, SCAN, then this. Same 34px round icon shape as the rest. */
.btn-ship-arrive {
  left: auto;
  right: 10px;
  top: 98px;
}
/* SC-BTN-STACK: the station (orbit/approach) button moves out of the
   top-left corner into the same right-edge stack, one row under the
   rocket -- arriving in a system, the button to orbit worlds sits right
   under the button that summoned the ship. */
.btn-ship-orbit {
  left: auto;
  right: 10px;
  top: 142px;
}
/* SC-SHIP-ARRIVE: the station (orbit/approach) button keeps the base
   .btn-info-reveal top-left corner every other control moved out of. Lit
   amber while the ship is on station at the selected body, the same
   accent treatment the probe button's active state wears. */
.btn-ship-orbit.on-station {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(245, 158, 11, 0.14);
}
/* DCOSMOS-ORBITARROWS: edge-anchored, thumb-sized, shown only while a body
   is selected. Sit a touch above true vertical center so a hand holding
   the phone one-handed clears the bottom sheet's top edge. */
.btn-orbit-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-orbit-arrow:hover { border-color: var(--accent); color: var(--accent); }
.btn-orbit-arrow[hidden] { display: none; }
.btn-orbit-prev { left: 8px; }
.btn-orbit-next { right: 8px; }
/* SC-BTN-STACK: everywhere wider than a portrait phone, the right arrow
   steps inward so it never shares a lane with the right-edge button
   stack (the four buttons end around 230px down; the arrow band can
   reach that high on short windows). A portrait phone keeps the arrow
   on the edge for one-handed thumb reach -- its stack and the 42%-down
   arrow never meet there. */
@media (min-width: 481px) {
  .btn-orbit-next { right: 62px; }
}
/* DCOSMOS-ARROWSHEET: at desktop widths the info card is a fixed card
   pinned to the bottom-right corner (cosmos-sheet.css, right:16 bottom:16
   width:320 max-height:72%), and on desktop a selection always opens it
   -- so whenever the arrows show, that card is up too. The card's own top
   edge can rise as high as ~25% of the stage at its tallest (max-height
   72%, a 16px bottom gap), which the vertical mid-height the arrows use on
   mobile (top:42%, tuned for one-handed thumb reach on a phone, see above)
   sits well inside -- the card's right edge then covers most of the right
   arrow's own 44px width. Desktop has no thumb-reach constraint, so the
   arrows move up here to a band that clears the card at every desktop
   height this game supports (720p and up) with room to spare, while
   staying clear of the top-corner icon buttons above them. */
@media (min-width: 721px) {
  /* Owner 2026-09-03: the arrows stay at the vertical middle at every width. */
}
/* SC-ORRERY-3D: the reveal stage is three stacked canvases. The backdrop
   carries the black ground and the frame shadow; the WebGL scene rides
   above it with transparent clear pixels; the original reveal canvas sits
   on top, now transparent, and stays the one pointer/gesture surface. */
.reveal-backdrop,
.reveal-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  pointer-events: none;
}
.reveal-backdrop {
  background: #000;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(0, 0, 0, 0.3);
}
.reveal-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: transparent;
  touch-action: none; /* one canvas gesture surface: no iOS page zoom/scroll */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.reveal-canvas:active { cursor: grabbing; }
/* DCOSMOS-BGSTARS: the skip/info/scan/orbit-arrow/chip buttons float right
   over the canvas gesture surface above (btn-skip-reveal, btn-info-reveal,
   btn-orbit-arrow, reveal-chip -- every direct button child here). A pinch
   that lands one finger on the canvas and the other on one of these was
   never covered by the canvas's own touch-action:none above, since a
   browser reads touch-action per element under each finger -- that gap let
   the browser's own page-zoom take the gesture, resizing the layout and
   (js/reveal.js's sizeToParent, before its own fix) re-rolling the
   background. This only blocks native pan/zoom starting on a button; a tap
   still clicks it. */
.reveal-container > button { touch-action: none; }
/* DCOSMOS-FINDVIEWS: the real-sight close-up for a derelict ship, ancient
   relay, signal source, or dark matter node. Sized/positioned every frame
   in JS to match the painted disc it sits over (js/find-viewers.js), and
   left square -- no circular mask. A debris_field find is no longer one of
   these (owner ruling 2026-08-22): it paints its own shard scatter straight
   into the orrery's own canvas instead (js/reveal-debrisfield-draw.js), so
   this mount never shows for one.
   DESIGN_DECISIONS.md section 18: a find's wreck is the 3-D model itself
   composited straight over the orrery scene, never an embedded viewport
   with a porthole edge. pointer-events stays none --
   the canvas underneath still receives every drag, and js/reveal-interact.js
   decides, by the press point alone, whether that drag rotates this mount's
   own 3-D model or the orrery around it (js/find-viewers.js). Starts
   transparent and fades in once its content is actually ready
   (js/find-viewers.js adds .ready), so the painted disc underneath is what
   shows during the load, never an empty square. */
.find-viewer-mount {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.find-viewer-mount.ready { opacity: 1; }
.find-viewer-mount[hidden] { display: none; }
.find-viewer-mount iframe,
.find-viewer-mount canvas {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* DCOSMOS-SCANONE: the survey-scan minigame overlay's styles live in
   css/cosmos-scanoverlay.css (split there for the house 500-line
   ceiling); only the reveal screen's own SCAN button above stays here. */
.reveal-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
}
/* Vignette effect */
.reveal-overlay::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}
.reveal-status {
  /* The typed status hugs the top edge in a quiet dark pill, above the
     band any framed body can reach -- a selected body fills 40% of the
     stage centered, so nothing drawn ever climbs this high. */
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 2;
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
  max-width: 86%;
  background: rgba(4, 8, 16, 0.72);
  border: 1px solid rgba(245, 158, 11, 0.16);
  border-radius: 999px;
  padding: 7px 16px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* On a phone the rarest lines in the game (RUINS-CLASS FINDING: ...) must
   never be cut mid-jackpot -- let the pill wrap to two lines instead. The
   fixed top here replaces the base rule's 4% -- on a short phone screen
   that percentage lands the pill under the nav buttons hanging below the
   divider line, so it takes the shared clearance instead. */
@media (max-width: 480px) {
  .reveal-status {
    white-space: normal;
    line-height: 1.5;
    border-radius: 14px;
    top: calc(var(--nav-hang, 42px) + 10px);
  }
  /* SC-HEADER-CLEARANCE, right-edge stack on a phone: the header row is
     full, so the sound-edit button drops below the gear at the top-right
     (cosmos-audio-edit.css, ends 96px down the page). SKIP and the probe
     pill start below it (container top 64 = page 104), and SCAN keeps its
     one-row spacing under the pill. SKIP and the pill never show at the
     same time, so they may share the same band. */
  .btn-skip-reveal { top: 64px; }
  .btn-body-scan { top: 108px; }
  /* SC-BTN-STACK: the whole right-edge stack keeps one-row spacing on a
     phone -- scan, rocket, then the station button. */
  .btn-ship-arrive { top: 152px; }
  .btn-ship-orbit { top: 196px; }
  /* Same short-phone clearance the status pill takes: sit clear of the nav
     buttons hanging below the header divider, one band under the pill. */
  .reveal-system-name { top: 24%; font-size: clamp(15px, 5.2vw, 24px); }
}
.reveal-status.visible { opacity: 1; }
/* SC-SYSNAME: the system's name, floated in quietly at the top when the
   solar-system view opens or the camera returns to the whole system. The
   galaxy map's nameplate voice -- var(--font-data), uppercase, letter-spaced
   and dim -- carried onto a DOM label so it reads over the live scene. Never
   takes the pointer; js/reveal-system-name.js toggles .show and the opacity
   transition here is the fade. Sits below the reveal-status band so the two
   stack rather than collide on the rare frame both are up. */
.reveal-system-name {
  position: absolute;
  /* Owner 2026-09-03: lowered so it clears the toasts and typed messages
     that appear near the top. */
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 86%;
  text-align: center;
  font-family: var(--font-data);
  font-size: clamp(15px, 4.4vw, 30px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(198, 207, 226, 0.42);
  text-shadow: 0 0 18px rgba(4, 8, 16, 0.92), 0 1px 4px rgba(4, 8, 16, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 3;
}
.reveal-system-name.show { opacity: 1; }
/* Owner 2026-09-03: the name line stays hidden while the info panel is up. */
body.reveal-sheet-open .reveal-system-name { opacity: 0 !important; }
/* DCOSMOS-SHEETMIN removed (owner 2026-09-03): the info panel no longer minimizes to a chip. */
@media (prefers-reduced-motion: reduce) {
  #btnRevealInfo.btn-info-dock { transition: none; }
}
/* DCOSMOS-CURTAIN: the reveal view's readiness overlay (js/reveal-curtain.js).
   Covers the canvas, every marker, button, and sheet in this view. Opaque
   and blocking clicks by default; fading drops it to transparent and lets
   clicks through immediately, before the opacity transition even finishes;
   hidden takes it out of the layout once the fade is done. */
.reveal-curtain {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: #000;
  opacity: 1;
  pointer-events: auto;
}
.reveal-curtain.curtain-fading {
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.reveal-curtain.curtain-hidden { display: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal-curtain.curtain-fading { transition: none; }
}
/* Owner 2026-09-03, desktop only: the 100px Ship Interior button hangs 50px
   below the header line into this view's top-right corner, so the whole
   right-edge stack (probe pill, SKIP, SCAN, rocket, station) starts one
   band lower here. Phones keep their own offsets above. */
@media (min-width: 481px) {
  .btn-skip-reveal, .btn-scan-pulse { top: 66px; }
  .btn-body-scan { top: 110px; }
  .btn-ship-arrive { top: 154px; }
  .btn-ship-orbit { top: 198px; }
}