/* Void Wake: Point of Origin — addon-only styles. Reuses the base game's CSS variables
   (--cyan, --magenta, --gold, --panel-line, --text-dim, defined in css/styles.css) so this reads
   as part of the same UI rather than a bolted-on screen. */

/* Full bleed background, same treatment as the main menu's video backdrop, cropped edge to edge
   with no black bars. A uniform crop can't reverse left to right order (it's just scale plus a
   symmetric trim), so this is safe now that LEVEL_POS below is deliberately monotonic in x, the
   actual fix for the ordering bug, not the letterboxing that was here before. */
#pointOfOriginMapOverlay{ padding:0; display:flex; align-items:center; justify-content:center; background:#000; }

#poOriginMapStage{
  position:relative; width:100%; height:100%;
  background:url('backgrounds/galaxy_map.png') center/cover no-repeat;
}

#poOriginMapTitle{
  position:absolute; top:16px; left:50%; transform:translateX(-50%); margin:0; z-index:3;
  font-size:20px; letter-spacing:2px; font-weight:900; pointer-events:none;
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,0.7));
}

#poOriginMapTopButtons{
  position:absolute; top:16px; left:16px; z-index:3; display:flex; gap:8px;
}
#poOriginMapTopButtons .btn{ width:auto; min-width:90px; margin:0; }

#poOriginMapNodes{ position:absolute; inset:0; z-index:1; }

/* Dialogue box — its own speaker label per line (unlike the base campaign's VESPER-only comm
   log), since this story has several speakers. Narration lines (speaker:null) drop the name tag
   and render slightly dimmer/italic instead.
   Sized down across the board per direct feedback — with real background scene art now behind
   these story beats, a smaller, less dominant box leaves far more of that art actually visible
   instead of the box itself taking over most of the screen. Overrides the shared .panel base
   (28px padding, 520px max-width) with smaller numbers scoped to just this panel, and anchors it
   toward the bottom of the screen (see #pointOfOriginDialogueOverlay below) rather than dead
   center, the same way subtitle/visual-novel text boxes usually leave the upper frame clear for
   art. Also dims the screen far less than a normal overlay (see #pointOfOriginDialogueOverlay)
   so whatever's behind this — a background scene image, or the live paused game canvas during a
   mid-fight beat — actually reads instead of being covered by near-solid black. */
#pointOfOriginDialogueOverlay{
  justify-content:flex-end; padding-bottom:28px; background:rgba(4,6,16,0.35);
  /* showDialogue sets background-image inline (a gradient plus the matching scene art from
     BEAT_BACKGROUNDS) for the beats that have real background art — these three properties make
     that actually render as a full bleed cover image instead of tiling/stretching. Beats with no
     matching art leave background-image at 'none', falling back to the plain background color
     above, which the "background" shorthand alone doesn't reliably guarantee across browsers once
     background-image is toggled on and off via JS on the same element. */
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.addonDialoguePanel{
  max-width:460px; padding:14px 16px; text-align:left; display:flex; gap:10px; align-items:flex-start;
}
.addonDialoguePortrait{
  /* Source art is a tall bust portrait (roughly 4:5) with the face sitting in the upper third, not
     centered — a square box with default object-fit centering cropped into the chin/collar instead
     of the face. Matching the box to that aspect and anchoring the crop to the top keeps the face
     framed at any size. Kept deliberately small (a face beside the text, not a second illustration
     competing with it) per direct feedback that the first pass read as too big. */
  width:40px; height:50px; border-radius:6px; object-fit:cover; object-position:top center; flex:none;
  border:2px solid var(--cyan); box-shadow:0 0 8px rgba(63,240,255,0.3);
  background:rgba(8,11,26,0.6);
}
.addonDialoguePortrait.hidden{ display:none; }
.addonDialogueBody{ flex:1; min-width:0; }
.addonDialogueSpeaker{
  font-weight:800; color:var(--cyan); letter-spacing:1.2px; font-size:11px;
  text-transform:uppercase; margin-bottom:5px;
}
.addonDialogueSpeaker.hidden{ display:none; }
.addonDialogueText{ font-size:12px; line-height:1.5; min-height:36px; margin:0; }
.addonDialogueText.addonDialogueNarration{ color:var(--text-dim); font-style:italic; }
.addonDialogueProgress{ font-size:9px; color:var(--text-dim); text-align:right; margin:6px 0 3px; }
/* Scoped override, not a change to the shared .btn class elsewhere — just enough smaller to match
   the rest of this panel's reduced size instead of the buttons alone still reading full-size. */
.addonDialoguePanel .btn{ padding:8px 10px; font-size:11.5px; min-width:0; margin:0; }

.poMapNode{
  position:absolute; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  background:radial-gradient(circle, rgba(63,240,255,0.25), rgba(8,11,26,0.9));
  border:2px solid var(--cyan); color:#fff; cursor:pointer;
  box-shadow:0 0 14px rgba(63,240,255,0.55);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.poMapNode:hover{ transform:translate(-50%,-50%) scale(1.18); }
.poMapNode .poMapNodeIcon{ font-size:14px; line-height:1; }
.poMapNode .poMapNodeNum{ font-size:8px; font-weight:800; opacity:0.85; line-height:1.2; }
/* Sits just below the circular node itself (.poMapNode is already position:absolute, so this
   anchors to it directly) rather than inside the fixed 38px circle, which has no room for a third
   line alongside the icon/level-number pair. */
.poMapNodeStars{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:3px; font-size:7px; letter-spacing:1px; color:var(--gold); white-space:nowrap;
  text-shadow:0 0 4px rgba(255,210,63,0.6);
}

.poMapNode.locked{
  border-color:rgba(255,255,255,0.3);
  background:radial-gradient(circle, rgba(255,255,255,0.06), rgba(8,11,26,0.9));
  box-shadow:none; cursor:default; opacity:0.6;
  /* Belt-and-suspenders alongside the onclick guard in onMapNodeClick/renderMapNodes — a locked
     node should never be launchable by mouse, touch, or a gamepad "confirm" landing on it. */
  pointer-events:none;
}
.poMapNode.completed{
  border-color:var(--gold);
  background:radial-gradient(circle, rgba(255,210,63,0.32), rgba(8,11,26,0.9));
  box-shadow:0 0 14px rgba(255,210,63,0.55);
}
.poMapNode.current{ animation:poMapPulse 1.6s ease-in-out infinite; }
@keyframes poMapPulse{
  0%,100%{ box-shadow:0 0 14px rgba(63,240,255,0.55); }
  50%{ box-shadow:0 0 26px rgba(63,240,255,0.95); }
}

/* Mini boss levels (5, 10, 15), a visibly bigger, sharper "warning" marker among the plain
   approach nodes, even while still locked, so the player can see something bigger is ahead. */
.poMapNode.milestone{
  width:50px; height:50px;
  border-color:var(--gold); border-width:3px;
  background:radial-gradient(circle, rgba(255,210,63,0.28), rgba(8,11,26,0.9));
  box-shadow:0 0 18px rgba(255,210,63,0.6);
}
.poMapNode.milestone.locked{
  border-color:rgba(255,210,63,0.45);
  background:radial-gradient(circle, rgba(255,210,63,0.08), rgba(8,11,26,0.9));
  box-shadow:none; opacity:0.65;
}
.poMapNode.milestone .poMapNodeIcon{ font-size:18px; }
.poMapNode.milestone.current{ animation:poMapPulseGold 1.6s ease-in-out infinite; }
@keyframes poMapPulseGold{
  0%,100%{ box-shadow:0 0 18px rgba(255,210,63,0.6); }
  50%{ box-shadow:0 0 32px rgba(255,210,63,1); }
}

/* The final boss level (20), the single biggest, most ominous marker on the whole map. */
.poMapNode.finalboss{
  width:64px; height:64px;
  border-color:var(--magenta); border-width:3px;
  background:radial-gradient(circle, rgba(255,63,176,0.32), rgba(8,11,26,0.92));
  box-shadow:0 0 24px rgba(255,63,176,0.7);
}
.poMapNode.finalboss.locked{
  border-color:rgba(255,63,176,0.45);
  background:radial-gradient(circle, rgba(255,63,176,0.1), rgba(8,11,26,0.92));
  box-shadow:none; opacity:0.65;
}
.poMapNode.finalboss .poMapNodeIcon{ font-size:24px; }
.poMapNode.finalboss .poMapNodeNum{ font-size:9px; }
.poMapNode.finalboss.current{ animation:poMapPulseMagenta 1.5s ease-in-out infinite; }
@keyframes poMapPulseMagenta{
  0%,100%{ box-shadow:0 0 24px rgba(255,63,176,0.7); }
  50%{ box-shadow:0 0 40px rgba(255,63,176,1); }
}

/* Briefing screen, shown once before the map (and replayable from the map's Briefing button).
   Same full bleed background as the map, with a readable panel over it. */
#pointOfOriginIntroOverlay{ padding:0; }
#poOriginIntroStage{
  position:relative; width:100%; height:100%;
  background:
    linear-gradient(180deg, rgba(4,6,16,0.55) 0%, rgba(4,6,16,0.75) 100%),
    url('backgrounds/galaxy_map.png') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
}
/* Sized down alongside the per-level dialogue box below, per the same feedback — smaller text and
   a smaller panel leave more of the backing art actually visible. */
.addonIntroPanel{ max-width:420px; padding:16px 18px; text-align:center; }
.addonTitle{
  margin:0 0 10px; font-size:20px; font-weight:900; letter-spacing:1.5px;
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.addonBody{ color:var(--text); font-size:12px; line-height:1.6; margin:0 0 10px; text-align:left; }
.addonIntroPanel .btn{ width:100%; margin-top:4px; padding:8px 10px; font-size:11.5px; }