/* ================================================================
   metroid2.css — Metroid Prime 2: Echoes fan page styles
   Linked from metroid2.html
================================================================ */

/* -------------------------------------------------------
   PAGE TITLE
------------------------------------------------------- */
#pageTitle .pageTitleSub { color: #5a4a7a; }

.fanTag {
  color: #7a00aa;
  letter-spacing: 2px;
  font-size: 9px;
}

/* -------------------------------------------------------
   FAN DISCLAIMER BLOCK
------------------------------------------------------- */
.fanDisclaimer {
  font-size: 10px;
  color: #443366;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 0;
  margin-bottom: 14px;
  border-top: 1px solid #1a0028;
  border-bottom: 1px solid #1a0028;
}

/* -------------------------------------------------------
   HERO IMAGE CREDIT
------------------------------------------------------- */
.heroImgCredit {
  font-size: 8px;
  color: #2e1f46;
  letter-spacing: 0.5px;
  text-align: right;
  padding: 3px 8px;
  border-bottom: 1px solid #1a0028;
  margin-bottom: 0;
}

/* -------------------------------------------------------
   PAGE-LEVEL DARK AETHER ATMOSPHERE
------------------------------------------------------- */
#container {
  position: relative;
}
#container::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(40,0,60,0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* -------------------------------------------------------
   HERO BANNER
------------------------------------------------------- */
.mp2Hero {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid #440066;
}
.mp2Hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.5;
  display: block;
  filter: saturate(0.7) hue-rotate(20deg);
}
.mp2HeroOverlay {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.18) 3px,
      rgba(0,0,0,0.18) 4px
    ),
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.6) 100%),
    radial-gradient(ellipse at 50% 120%, rgba(40,0,60,0.8) 0%, transparent 65%);
  pointer-events: none;
}
.scanBeam {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(120,0,255,0.0) 15%,
    rgba(180,80,255,0.6) 40%,
    rgba(200,120,255,0.8) 50%,
    rgba(180,80,255,0.6) 60%,
    rgba(120,0,255,0.0) 85%,
    transparent 100%
  );
  animation: beamSweep 6s linear infinite;
  pointer-events: none;
  top: 0;
}
@keyframes beamSweep {
  0%   { top: -2px;  opacity: 0; }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { top: 242px; opacity: 0; }
}
.scanBracket {
  position: absolute;
  width: 22px;
  height: 22px;
}
.scanBracket.tl { top: 12px; left: 12px;  border-top: 2px solid #9900ee; border-left: 2px solid #9900ee; }
.scanBracket.tr { top: 12px; right: 12px; border-top: 2px solid #9900ee; border-right: 2px solid #9900ee; }
.scanBracket.bl { bottom: 12px; left: 12px;  border-bottom: 2px solid #9900ee; border-left: 2px solid #9900ee; }
.scanBracket.br { bottom: 12px; right: 12px; border-bottom: 2px solid #9900ee; border-right: 2px solid #9900ee; }
.scanBracket.tl::after { content:''; position:absolute; top:5px; left:-2px; width:1px; height:6px; background:#6600aa; }
.scanBracket.tr::after { content:''; position:absolute; top:5px; right:-2px; width:1px; height:6px; background:#6600aa; }
.heroReticle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  pointer-events: none;
  opacity: 0.25;
}
.mp2HeroTitle {
  position: absolute;
  bottom: 18px;
  left: 24px;
  right: 24px;
}
.mp2HeroTitle .scanLabel {
  font-size: 9px;
  color: #9900ee;
  letter-spacing: 4px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 7px;
}
.mp2HeroTitle h1 {
  font-size: 21px;
  color: #e0d4ff;
  text-shadow: 0 0 20px #bb55ff, 0 0 45px #7700cc, 0 0 70px #440088;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}
.mp2HeroTitle .subline {
  font-size: 10px;
  color: #6644aa;
  letter-spacing: 2.5px;
  margin-top: 6px;
  display: block;
}
.phazonReadout {
  position: absolute;
  top: 14px;
  right: 36px;
  text-align: right;
}
.phazonReadout .prLabel {
  font-size: 8px;
  color: #5500aa;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 3px;
}
.phazonReadout .prVal {
  font-size: 16px;
  color: #aa44ff;
  text-shadow: 0 0 10px #8800ff;
  letter-spacing: 1px;
}
.heroAmmo {
  position: absolute;
  bottom: 18px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.heroAmmoRow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.heroAmmoRow .amLabel { color: #4a3366; }
.heroAmmoRow .amVal   { color: #cc99ff; min-width: 28px; text-align: right; }
.heroAmmoRow .amBar {
  width: 40px;
  height: 3px;
  background: rgba(80,0,120,0.4);
  position: relative;
}
.heroAmmoRow .amBar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--beam-color, #cc99ff);
  width: var(--beam-fill, 100%);
  box-shadow: 0 0 4px var(--beam-color, #cc99ff);
}

/* -------------------------------------------------------
   HUD STATUS BAR
------------------------------------------------------- */
.hudBar {
  display: flex;
  background: rgba(0,0,0,0.8);
  border-bottom: 1px solid #2a003a;
  font-size: 10px;
  letter-spacing: 2px;
}
.hudSegment {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-right: 1px solid #1e0028;
}
.hudSegment:last-child { border-right: none; }
.hudKey { color: #3d2a5a; }
.hudVal { color: #cc99ff; text-shadow: 0 0 5px #8833ff; }
.hudDot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #33ff88;
  box-shadow: 0 0 5px #33ff88;
  flex-shrink: 0;
  animation: dotPulse 2s ease infinite;
}
@keyframes dotPulse {
  0%,100% { opacity: 1; box-shadow: 0 0 5px #33ff88; }
  50%     { opacity: 0.4; box-shadow: 0 0 2px #33ff88; }
}

/* -------------------------------------------------------
   DARK AETHER ATMOSPHERE PANEL
------------------------------------------------------- */
.darkAetherPanel {
  background: rgba(0,0,0,0.88);
  border: 1px solid #1e0028;
  border-left: 3px solid #5500aa;
  margin-bottom: 20px;
  overflow: hidden;
}
.dapHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: rgba(40,0,60,0.55);
  border-bottom: 1px solid #2a0040;
}
.dapTitle {
  font-size: 9px;
  color: #7744aa;
  letter-spacing: 2.5px;
}
.dapRef {
  font-size: 8px;
  color: #3a2255;
  letter-spacing: 1px;
}
.dapSuitRow {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #1a0025;
}
.dapSuit {
  flex: 1;
  padding: 12px 10px;
  text-align: center;
  border-right: 1px solid #1a0025;
  position: relative;
}
.dapSuit:last-child { border-right: none; }
.dapSuitName {
  display: block;
  font-size: 8px;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.dapSuitDmg {
  display: block;
  font-size: 17px;
  letter-spacing: 1px;
  margin-bottom: 5px;
  font-weight: bold;
}
.dapSuitNote {
  display: block;
  font-size: 8px;
  letter-spacing: 1px;
  line-height: 1.5;
}
.dapSuit.varia { background: rgba(30,10,0,0.4); }
.dapSuit.varia .dapSuitName { color: #aa7733; }
.dapSuit.varia .dapSuitDmg  { color: #ff4422; text-shadow: 0 0 10px #cc2200; }
.dapSuit.varia .dapSuitNote { color: #663322; }
.dapSuit.varia::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#882200; }

.dapSuit.dark  { background: rgba(15,0,35,0.5); }
.dapSuit.dark  .dapSuitName { color: #9955cc; }
.dapSuit.dark  .dapSuitDmg  { color: #ddaa00; text-shadow: 0 0 10px #aa7700; }
.dapSuit.dark  .dapSuitNote { color: #554422; }
.dapSuit.dark::before  { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#6600aa; }

.dapSuit.light { background: rgba(0,15,5,0.45); }
.dapSuit.light .dapSuitName { color: #55aa66; }
.dapSuit.light .dapSuitDmg  { color: #44ff88; text-shadow: 0 0 10px #22cc55; }
.dapSuit.light .dapSuitNote { color: #336644; }
.dapSuit.light::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:#226633; }

/* 3-tank energy drain HUD */
.dapHUD {
  padding: 10px 14px 8px;
  border-bottom: 1px solid #1a0025;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dapTankSquares {
  display: flex;
  gap: 6px;
  align-items: center;
}
.dapTankSq {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border: 1px solid #aaffcc;
  background: #fff;
  box-shadow: 0 0 5px #fff, 0 0 2px #aaffcc;
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.dapTankSq.depleted {
  background: #0a0010;
  border-color: #220033;
  box-shadow: none;
}
.dapTankSq.active {
  animation: sqPulse 1.1s ease-in-out infinite;
}
@keyframes sqPulse {
  0%,100% { opacity: 1;   box-shadow: 0 0 7px #fff, 0 0 3px #aaffcc; }
  50%     { opacity: 0.4; box-shadow: 0 0 2px #fff; }
}
.dapBarRow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dapBarTrack {
  flex: 1;
  height: 9px;
  background: rgba(20,0,30,0.7);
  border: 1px solid #220033;
  position: relative;
  overflow: hidden;
}
.dapBarFill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, #33ff88, #00dd66);
  box-shadow: 0 0 8px #33ff88;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.dapBarVal {
  font-size: 12px;
  color: #cc99ff;
  min-width: 28px;
  text-align: right;
  letter-spacing: 1px;
  font-family: 'OCR A Std', monospace;
}
.dapHUDFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dapDrainLabel {
  font-size: 9px;
  color: #4a3366;
  letter-spacing: 1.5px;
}
.dapDrainStatus {
  font-size: 9px;
  letter-spacing: 1.5px;
  transition: color 0.6s ease, text-shadow 0.6s ease;
}
.dapProtect {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(0,12,4,0.45);
}
.dapProtectIcon {
  color: #33ff88;
  font-size: 13px;
  flex-shrink: 0;
  text-shadow: 0 0 6px #33ff88;
  line-height: 1.5;
}
.dapProtectText {
  font-size: 10px;
  color: #3d5533;
  letter-spacing: 0.4px;
  line-height: 1.65;
}
.dapProtectText em {
  color: #66bb77;
  font-style: normal;
  text-shadow: 0 0 4px #336644;
}

/* -------------------------------------------------------
   SCAN DATA
------------------------------------------------------- */
.scanData {
  background: rgba(0,0,0,0.6);
  border: 1px solid #4400aa;
  border-left: 3px solid #aa77ff;
  padding: 16px 20px;
  margin-bottom: 18px;
  position: relative;
}
.scanData::before {
  content: 'SCAN COMPLETE ■';
  position: absolute;
  top: -8px; left: 14px;
  background: #050008;
  padding: 0 6px;
  font-size: 9px;
  color: #8800cc;
  letter-spacing: 2.5px;
}
.scanData::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 40px; height: 40px;
  border-bottom: 1px solid #330044;
  border-right: 1px solid #330044;
  pointer-events: none;
}
.sdRow {
  display: flex;
  gap: 16px;
  margin-bottom: 7px;
  align-items: baseline;
}
.sdRow:last-child { margin-bottom: 0; }
.sdKey {
  font-size: 10px;
  color: #3d2a66;
  letter-spacing: 2px;
  min-width: 130px;
  flex-shrink: 0;
}
.sdVal           { font-size: 12px; color: #c4b8e8; letter-spacing: 1px; }
.sdVal.highlight { color: #cc99ff; text-shadow: 0 0 8px #7722ff; }

/* -------------------------------------------------------
   VISOR TABS
------------------------------------------------------- */
.visorTabs {
  margin-bottom: 20px;
}
.visorTabBar {
  display: flex;
  border-bottom: 1px solid #330044;
  background: rgba(0,0,0,0.5);
}
.visorTab {
  padding: 9px 16px;
  font-size: 10px;
  letter-spacing: 2px;
  color: #4a3366;
  cursor: pointer;
  border-right: 1px solid #220033;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.visorTab:hover { color: #9966cc; background: rgba(60,0,90,0.3); }
.visorTab.active {
  color: #cc99ff;
  border-bottom-color: #9900ee;
  background: rgba(80,0,120,0.3);
  text-shadow: 0 0 8px #9944ff;
}
.visorTab .vtDot {
  width: 5px; height: 5px;
  border-radius: 50%;
}
.visorTab[data-visor="combat"]  .vtDot { background: #ff6644; }
.visorTab[data-visor="scan"]    .vtDot { background: #44ff99; }
.visorTab[data-visor="dark"]    .vtDot { background: #8844ff; }
.visorTab[data-visor="echo"]    .vtDot { background: #44aaff; }
.visorPanel {
  display: none;
  background: rgba(0,0,0,0.45);
  border: 1px solid #2a0040;
  border-top: none;
  padding: 18px 20px;
}
.visorPanel.active { display: block; }
.visorPanel p { margin-bottom: 10px; }
.visorPanel p:last-child { margin-bottom: 0; }
.vpHeader {
  font-size: 10px;
  color: #5544aa;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vpHeader::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #330044, transparent);
}

/* -------------------------------------------------------
   WORLD TOGGLE
------------------------------------------------------- */
.worldToggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #440066;
  margin-bottom: 20px;
  overflow: hidden;
}
.worldPane {
  padding: 18px 20px;
  position: relative;
  transition: background 0.3s;
  overflow: hidden;
}
.worldPane.light { background: rgba(255,190,60,0.05); border-right: 1px solid #440066; }
.worldPane.dark  { background: rgba(60,0,100,0.3); }
.worldPane:hover.light { background: rgba(255,190,60,0.1); }
.worldPane:hover.dark  { background: rgba(80,0,130,0.5); }
.worldPane .wGlyph {
  position: absolute;
  top: 14px; right: 16px;
  opacity: 0.18;
  transition: opacity 0.3s;
}
.worldPane:hover .wGlyph { opacity: 0.35; }
.worldPane .wLabel {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.worldPane.light .wLabel { color: #aa7722; }
.worldPane.dark  .wLabel { color: #8844ee; }
.worldPane .wTitle {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2.5px;
  margin-bottom: 10px;
}
.worldPane.light .wTitle { color: #ffe0a0; text-shadow: 0 0 12px #dd8822; }
.worldPane.dark  .wTitle { color: #cc99ff; text-shadow: 0 0 12px #8833ff; }
.worldPane .wDesc { font-size: 11px; color: #7766aa; line-height: 1.7; margin-bottom: 10px; }
.worldPane .wStats {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.worldPane .wStat {
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 2px 7px;
  border: 1px solid;
}
.worldPane.light .wStat { border-color: #885522; color: #aa7733; }
.worldPane.dark  .wStat { border-color: #550088; color: #8844bb; }
.worldPane.light::after { content:''; display:block; height:2px; background:linear-gradient(90deg,#cc8800,transparent); margin-top:14px; }
.worldPane.dark::after  { content:''; display:block; height:2px; background:linear-gradient(90deg,#7700cc,transparent); margin-top:14px; }

/* -------------------------------------------------------
   BEAM WEAPON GRID
------------------------------------------------------- */
.beamGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.beamCard {
  background: rgba(0,0,0,0.55);
  border: 1px solid #1e0030;
  padding: 16px 12px 14px;
  text-align: center;
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.2s;
  position: relative;
  overflow: hidden;
}
.beamCard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.beamCard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--beam-glow, rgba(180,80,255,0.1)) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.beamCard:hover::after { opacity: 1; }
.beamCard:hover { transform: translateY(-2px); }

.beamCard.power        { --beam-glow: rgba(255,220,50,0.15); }
.beamCard.power::before        { background: #ffdd44; box-shadow: 0 0 8px #ffbb00; }
.beamCard.power:hover          { border-color: #ffcc22; box-shadow: 0 0 16px rgba(255,200,0,0.25); }

.beamCard.darkb        { --beam-glow: rgba(140,0,255,0.15); }
.beamCard.darkb::before        { background: #8800ff; box-shadow: 0 0 8px #6600cc; }
.beamCard.darkb:hover          { border-color: #8800ff; box-shadow: 0 0 16px rgba(120,0,220,0.3); }

.beamCard.lightb       { --beam-glow: rgba(80,180,255,0.15); }
.beamCard.lightb::before       { background: #66ccff; box-shadow: 0 0 8px #33aaff; }
.beamCard.lightb:hover         { border-color: #66ccff; box-shadow: 0 0 16px rgba(60,160,255,0.3); }

.beamCard.annihilator  { --beam-glow: rgba(180,80,255,0.15); }
.beamCard.annihilator::before  { background: linear-gradient(90deg, #8800ff, #33aaff); box-shadow: 0 0 8px #6644ff; }
.beamCard.annihilator:hover    { border-color: #9944ff; box-shadow: 0 0 16px rgba(140,60,255,0.35); }

.bcIcon { display: block; margin: 0 auto 10px auto; }
.bcName {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.beamCard.power       .bcName { color: #ffdd88; }
.beamCard.darkb       .bcName { color: #bb88ff; }
.beamCard.lightb      .bcName { color: #88ddff; }
.beamCard.annihilator .bcName { color: #dd99ee; }
.bcDesc { font-size: 10px; color: #554477; line-height: 1.6; }
.bcAmmo {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 10px;
}
.bcAmmo span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--dot-color, #440066);
}
.bcAmmo span.full { background: var(--dot-full, #7700aa); box-shadow: 0 0 3px var(--dot-full, #7700aa); }

/* -------------------------------------------------------
   SKY TEMPLE KEY TRACKER
------------------------------------------------------- */
.keyTracker {
  background: rgba(0,0,0,0.6);
  border: 1px solid #2a0040;
  padding: 16px 18px;
  margin-bottom: 20px;
  position: relative;
}
.keyTracker::before {
  content: 'SKY TEMPLE KEY PROGRESS';
  position: absolute;
  top: -8px; left: 14px;
  background: #050008;
  padding: 0 6px;
  font-size: 9px;
  color: #5500aa;
  letter-spacing: 2px;
}
.keyGrid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.keySlot {
  aspect-ratio: 1;
  border: 1px solid #330044;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
  background: rgba(0,0,0,0.5);
}
.keySlot.collected {
  background: rgba(80,0,120,0.4);
  border-color: #9900cc;
  box-shadow: 0 0 8px rgba(150,0,200,0.4), inset 0 0 6px rgba(100,0,180,0.2);
}
.keySlot:hover { border-color: #7700aa; }
.keySlot .keyNum {
  font-size: 9px;
  color: #330044;
  letter-spacing: 1px;
}
.keySlot.collected .keyNum { color: #cc99ff; text-shadow: 0 0 6px #9933ff; }
.keyProgress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.keyProgressTrack {
  flex: 1;
  height: 4px;
  background: rgba(40,0,60,0.6);
  border: 1px solid #220033;
}
.keyProgressFill {
  height: 100%;
  background: linear-gradient(90deg, #6600aa, #cc55ff);
  box-shadow: 0 0 6px #9922ff;
  transition: width 0.4s ease;
}
.keyProgressLabel { font-size: 10px; color: #7755aa; letter-spacing: 1px; }
.keyProgressLabel span { color: #cc99ff; }

/* -------------------------------------------------------
   BOSS ENCOUNTER LOG
------------------------------------------------------- */
.bossList {
  margin-bottom: 20px;
}
.bossEntry {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: rgba(0,0,0,0.4);
  border: 1px solid #220033;
  border-left: 3px solid #330044;
  margin-bottom: 6px;
  transition: border-color 0.2s, background 0.2s;
  cursor: default;
}
.bossEntry:hover {
  background: rgba(40,0,60,0.5);
  border-left-color: #9900cc;
}
.bossEntry.defeated { border-left-color: #33ff88; }
.bossEntry.defeated:hover { border-left-color: #66ffaa; }
.bossIcon { flex-shrink: 0; }
.bossInfo { flex: 1; }
.bossName {
  font-size: 12px;
  color: #d4c8ff;
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 3px;
}
.bossEntry.defeated .bossName { color: #aaeebb; }
.bossSub {
  font-size: 10px;
  color: #554477;
  letter-spacing: 1px;
}
.bossStatus {
  font-size: 9px;
  letter-spacing: 2px;
  padding: 2px 8px;
  border: 1px solid;
  flex-shrink: 0;
}
.bossEntry.defeated .bossStatus {
  color: #33ff88;
  border-color: #226644;
  text-shadow: 0 0 5px #33ff88;
}
.bossEntry:not(.defeated) .bossStatus {
  color: #554477;
  border-color: #2a0040;
}
.bossDiff {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.bossDiff span {
  width: 5px; height: 12px;
  background: #1e0028;
  border: 1px solid #2a0040;
}
.bossDiff span.lit    { background: #9900cc; box-shadow: 0 0 4px #7700aa; border-color: #7700aa; }
.bossDiff span.danger { background: #cc3300; box-shadow: 0 0 4px #aa2200; border-color: #882200; }

/* -------------------------------------------------------
   AREA REGION CARDS
------------------------------------------------------- */
.areaGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.areaCard {
  background: rgba(0,0,0,0.45);
  border: 1px solid #1e0030;
  padding: 16px 16px 16px 20px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.areaCard:hover { box-shadow: 0 0 14px rgba(100,0,180,0.2); }
.areaCard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
}
.areaCard.agon::before      { background: linear-gradient(180deg, #cc8800, #885500); }
.areaCard.torvus::before    { background: linear-gradient(180deg, #336633, #224422); }
.areaCard.sanctuary::before { background: linear-gradient(180deg, #0066cc, #003388); }
.areaCard.temple::before    { background: linear-gradient(180deg, #9944ff, #5500aa); }
.areaCard.agon      { background: rgba(40,15,0,0.45); }
.areaCard.torvus    { background: rgba(0,20,0,0.45); }
.areaCard.sanctuary { background: rgba(0,10,40,0.45); }
.areaCard.temple    { background: rgba(30,0,50,0.45); }
.arHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}
.arName {
  font-size: 12px;
  color: #d4c8ff;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
}
.arSub {
  font-size: 9px;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  display: block;
}
.areaCard.agon      .arSub { color: #996622; }
.areaCard.torvus    .arSub { color: #336633; }
.areaCard.sanctuary .arSub { color: #1155aa; }
.areaCard.temple    .arSub { color: #7733bb; }
.arDesc { font-size: 11px; color: #665588; line-height: 1.65; margin-bottom: 10px; }
.arDark {
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border: 1px solid #330044;
  color: #8844bb;
  display: inline-block;
}
.arDark::before { content: '▸ DARK: '; color: #440066; }

/* -------------------------------------------------------
   FEATURE CARDS
------------------------------------------------------- */
.featureGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.featureCard {
  background: rgba(0,0,0,0.4);
  border: 1px solid #1e0030;
  border-top: 2px solid #5500aa;
  padding: 15px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.featureCard:hover {
  border-color: #9933ff;
  box-shadow: 0 0 14px rgba(120,0,200,0.25);
}
.fcIcon  { display: block; margin-bottom: 9px; }
.fcTitle { font-size: 11px; color: #cc99ff; letter-spacing: 1.5px; margin-bottom: 7px; display: block; text-transform: uppercase; }
.fcText  { font-size: 11px; color: #9988bb; line-height: 1.7; }

/* -------------------------------------------------------
   PHAZON LORE TERMINAL
------------------------------------------------------- */
.loreterminal {
  background: rgba(0,0,0,0.8);
  border: 1px solid #4400aa;
  border-left: 3px solid #33ff88;
  padding: 16px 18px;
  margin-bottom: 20px;
  position: relative;
  font-size: 11px;
  color: #55cc88;
  line-height: 1.7;
}
.loreterminal::before {
  content: 'LUMINOTH DATALOG — U-TH ENTRY 0x4E';
  position: absolute;
  top: -8px; left: 14px;
  background: #050008;
  padding: 0 6px;
  font-size: 9px;
  color: #226644;
  letter-spacing: 2px;
}
.loreterminal .ltPrompt    { color: #226644; margin-right: 6px; }
.loreterminal .ltHighlight { color: #88ffcc; }
.loreterminal .ltWarning   { color: #ffaa44; }
.loreterminal .ltDanger    { color: #ff6644; text-shadow: 0 0 6px #cc3300; }
.loreterminal .ltCursor {
  display: inline-block;
  width: 7px; height: 11px;
  background: #33ff88;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}

/* -------------------------------------------------------
   RATING BLOCK
------------------------------------------------------- */
.ratingBlock {
  background: rgba(0,0,0,0.5);
  border: 1px solid #2a0040;
  padding: 18px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.ratingLeft { flex-shrink: 0; text-align: center; }
.ratingLabel { font-size: 9px; color: #3d2a5a; letter-spacing: 2px; text-transform: uppercase; display: block; margin-bottom: 4px; }
.ratingNum { font-size: 52px; color: #cc99ff; text-shadow: 0 0 24px #8822ff, 0 0 50px #5500aa; line-height: 1; }
.ratingNum span { font-size: 18px; color: #3d2a5a; }
.ratingBars { flex: 1; }
.ratingRow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ratingRow:last-child { margin-bottom: 0; }
.ratingRowLabel { font-size: 10px; color: #5544aa; letter-spacing: 1px; min-width: 105px; }
.ratingBarTrack { flex: 1; height: 4px; background: rgba(60,0,90,0.4); position: relative; }
.ratingBarTrack::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(80,0,120,0.4);
}
.ratingBarFill {
  height: 100%;
  background: linear-gradient(90deg, #5500aa, #cc44ff);
  box-shadow: 0 0 6px #9922ff;
  width: 0;
  animation: barGrow 1.5s ease forwards;
}
@keyframes barGrow { to { width: var(--target-width); } }
.ratingBarVal { font-size: 10px; color: #cc99ff; min-width: 24px; text-align: right; }

/* -------------------------------------------------------
   PERSONAL LOG
------------------------------------------------------- */
.memoryCard {
  background: rgba(12,0,22,0.8);
  border: 1px dashed #2a0040;
  border-left: 3px solid #8822ff;
  padding: 20px 22px;
  margin-bottom: 20px;
  position: relative;
}
.memoryCard::before {
  content: '// PERSONAL LOG — ZANE //';
  font-size: 9px;
  color: #3d2a55;
  letter-spacing: 3px;
  display: block;
  margin-bottom: 14px;
}
.memoryCard p { margin-bottom: 12px; font-style: italic; color: #a494c0; line-height: 1.8; }
.memoryCard p:last-child { margin-bottom: 0; }
.memoryCard strong { color: #cc99ff; font-style: normal; font-weight: normal; text-shadow: 0 0 6px #8833ff; }

/* -------------------------------------------------------
   MISC
------------------------------------------------------- */
.tagsRow { margin-bottom: 20px; }

.sourcesList {
  background: rgba(0,0,0,0.35);
  border: 1px solid #1e0030;
  border-top: 2px solid #2a0040;
  padding: 14px 18px;
}
.sourcesList .slLabel { font-size: 9px; color: #2a1a44; letter-spacing: 3px; margin-bottom: 10px; display: block; }
.sourcesList ul { list-style: none; padding: 0; }
.sourcesList li { font-size: 11px; color: #5544aa; margin-bottom: 7px; padding-left: 14px; position: relative; }
.sourcesList li::before { content: '▸'; position: absolute; left: 0; color: #440088; }
.sourcesList li a { color: #8866bb; }
.sourcesList li a:hover { color: #ff66ff; text-shadow: 0 0 6px #ff44ff; }

.sectionDiv {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0;
}
.sectionDiv::before,
.sectionDiv::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #330044);
}
.sectionDiv::after { background: linear-gradient(90deg, #330044, transparent); }
.sectionDiv .sdGlyph {
  font-size: 10px;
  color: #440066;
  letter-spacing: 3px;
  flex-shrink: 0;
}
/* -------------------------------------------------------
   NARROW SCREENS — let the HUD bar and visor tabs wrap
   instead of forcing horizontal page overflow (~380px)
------------------------------------------------------- */
@media (max-width: 600px) {
  .hudBar      { flex-wrap: wrap; }
  .hudSegment  { flex: 1 1 auto; }
  .visorTabBar { flex-wrap: wrap; }
  .visorTab    { flex: 1 1 auto; text-align: center; }
}