/*
 * Ashlight Terminal Layout Overlay v1.7.0
 * Additive override layer. The original 2025 style.css is intentionally retained unchanged.
 * Purpose: align interactive overlays to the physical PDA artwork, retire debug scaffolding,
 * make side panels dock intelligently, and reserve a tiny read-only bridge activity strip.
 */

:root {
  --ash-pda-max-width: 560px;
  --ash-pda-left-rail: 180px;
  --ash-panel-gap: 18px;
}

/* Keep the whole physical PDA inside the viewport while retaining the original 700:1131 art ratio. */
#ash-hud-wrapper {
  top: 12px;
  left: clamp(190px, 22vw, 430px);
  max-width: none;
}

.hud-bounds {
  width: min(
    var(--ash-pda-max-width),
    calc((100vh - 24px) * 700 / 1131),
    calc(100vw - var(--ash-pda-left-rail) - 28px)
  );
  max-width: none;
  aspect-ratio: 700 / 1131;
}

/* The transparent terminal aperture in cli_hud_overlay.png begins around 8% from the top. */
.ash-terminal-window {
  top: 7.55%;
  left: 12.05%;
  width: 75.9%;
  height: 65.15%;
  outline: none !important;
}

/* Retire the old development geometry outlines without deleting historical CSS. */
#ash-subsystem-stack,
#subsystem-left,
#subsystem-right,
#ash-hud-accessory,
#camera-control-dock,
.ash-terminal-window {
  outline: none !important;
}

/* The subsystem stack now becomes a coordinate plane over the PDA artwork. */
#ash-subsystem-stack {
  inset: 0;
  width: 100%;
  height: 100%;
  bottom: auto;
  left: auto;
  padding: 0;
  display: block;
  pointer-events: none;
  z-index: 45;
}

#subsystem-left,
#subsystem-right,
.subsystem-buttons {
  display: contents;
}

/* Three pre-existing physical buttons on the lower-left PDA shell. */
.hud-btn {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(102,255,224,.18);
  background: radial-gradient(circle at 45% 35%, rgba(102,255,224,.08), rgba(0,255,204,.015) 58%, transparent 70%);
  box-shadow: none;
  opacity: .28;
  pointer-events: auto;
  transition: opacity .16s ease, box-shadow .16s ease, background .16s ease, transform .12s ease;
}

.hud-btn:hover,
.hud-btn:focus-visible {
  opacity: .9;
  background: radial-gradient(circle at 45% 35%, rgba(102,255,224,.18), rgba(0,255,204,.04) 60%, transparent 72%);
  box-shadow: 0 0 10px rgba(0,255,204,.26), inset 0 0 8px rgba(0,255,204,.08);
  outline: none;
}

.hud-btn.control-a {
  left: 12.05%;
  top: 79.65%;
  width: 9.1%;
  aspect-ratio: 1;
}

.hud-btn.control-b {
  left: 12.05%;
  top: 87.55%;
  width: 9.1%;
  aspect-ratio: 1;
}

.hud-btn.control-c {
  left: 25.05%;
  top: 88.45%;
  width: 6.4%;
  aspect-ratio: 1;
}

/* Existing bars are retained as a tiny activity-level indicator over the physical vent. */
.subsystem-bars {
  position: absolute;
  left: 25.5%;
  top: 80.95%;
  width: 36.3%;
  height: 5.8%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0;
  margin: 0;
  pointer-events: none;
  opacity: .3;
}

.subsystem-bars .bar {
  width: 100%;
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(102,255,224,.16) 12%, rgba(102,255,224,.42) 50%, rgba(102,255,224,.12) 88%, transparent);
}

/* Read-only activity strip: deliberately subtle so the physical vent remains visible. */
#ash-bridge-ticker {
  position: absolute;
  left: 26.6%;
  top: 82.05%;
  width: 34.5%;
  height: 4.7%;
  overflow: hidden;
  pointer-events: auto;
  color: rgba(155,255,232,.78);
  font-family: var(--ash-font);
  font-size: clamp(6px, 0.72vw, 8px);
  line-height: 1.26;
  letter-spacing: .025em;
  text-shadow: 0 0 4px rgba(0,255,204,.24);
  opacity: .78;
  z-index: 60;
  user-select: text;
}

#ash-bridge-ticker[hidden] { display: none !important; }
#ash-bridge-ticker .ticker-label { color: rgba(102,255,224,.5); }
#ash-bridge-ticker .ticker-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dock the D-pad inside the physical lower-right screen instead of drawing another framed panel. */
#ash-hud-accessory {
  position: absolute;
  left: 68.4%;
  top: 80.45%;
  width: 22.6%;
  height: 15.0%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  pointer-events: auto;
  z-index: 55;
}

#camera-control-dock {
  position: absolute;
  inset: 8% 6%;
  display: grid;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
  padding: 0;
  place-items: center;
}

.key-btn {
  width: 88%;
  height: 88%;
  min-width: 0;
  min-height: 0;
  opacity: .72;
  padding: 0;
}

.key-btn:hover,
.key-btn:focus-visible {
  opacity: 1;
  transform: scale(1.03);
  background: rgba(0,255,200,.08);
  outline: none;
}

/* The left-side Director stack should stay visible without covering the device. */
#ash-director-column {
  top: auto;
  bottom: 18px;
  height: auto;
  min-height: 270px;
  width: 160px;
  box-sizing: border-box;
}

/* Existing side panels are positioned by terminal_workspace_v1_7.js. */
#ash-info-panel,
#ash-text-panel {
  margin-left: 0;
  max-height: calc(100vh - 24px);
}

#ash-info-panel.ash-dock-right,
#ash-text-panel.ash-dock-right {
  left: calc(100% + var(--ash-panel-gap));
  right: auto;
}

#ash-info-panel.ash-dock-left,
#ash-text-panel.ash-dock-left {
  left: auto;
  right: calc(100% + var(--ash-panel-gap));
}

#ash-info-panel.ash-dock-overlay,
#ash-text-panel.ash-dock-overlay {
  position: fixed;
  left: max(188px, 50vw) !important;
  right: auto !important;
  top: 24px !important;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 210px));
  max-height: calc(100vh - 48px);
  z-index: 1200;
}

/* Small hover labels for the three otherwise-unlabelled physical controls. */
.hud-btn[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 7px);
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 5px;
  border: 1px solid rgba(0,255,204,.28);
  border-radius: 3px;
  background: rgba(4,14,12,.93);
  color: rgba(190,255,241,.9);
  font: 8px/1.15 var(--ash-font);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 100;
}

.hud-btn[data-label]:hover::after,
.hud-btn[data-label]:focus-visible::after { opacity: 1; }

/* Responsive fallback: keep the device usable on narrower screens. */
@media (max-width: 860px) {
  #ash-hud-wrapper { left: 174px; }
  #ash-director-column { width: 148px; }
  .hud-bounds { width: min(calc(100vw - 190px), calc((100vh - 24px) * 700 / 1131)); }
}