/* ============================================================
   FORGE ATLAS v7 — BIO MODAL · IMAGE BATTLE · MUSIC BATTLE
   · DEPLOY STAGE · CLICKABILITY POLISH
   Each bot gets its own colored bio modal. Image/music battles
   add new visual showcase formats. Command center gains a
   multi-stage deploy simulation.
   ============================================================ */

/* ============================================================
   BIO MODAL — clicking any bot name opens a rich bio panel
   themed in that bot's own accent color.
   ============================================================ */
.bio-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(14px);
  animation:bioFadeIn .35s var(--ease);
  padding:20px;
}
.bio-modal.fading{ animation:bioFadeOut .3s var(--ease) forwards; }
@keyframes bioFadeIn{ from{opacity:0;backdrop-filter:blur(0)} to{opacity:1;backdrop-filter:blur(14px)} }
@keyframes bioFadeOut{ to{opacity:0;pointer-events:none} }

.bio-card{
  position:relative;
  width:100%; max-width:760px;
  max-height:88vh; overflow-y:auto;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent,#D4A843) 8%, #06060a), #06060a 60%);
  border:1px solid var(--accent,#D4A843);
  border-radius:var(--r-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 60px color-mix(in srgb, var(--accent,#D4A843) 30%, transparent);
  animation:bioRise .45s var(--ease);
  scrollbar-width:thin; scrollbar-color:var(--line-3) transparent;
}
@keyframes bioRise{ from{transform:translateY(20px) scale(.96);opacity:0} to{transform:none;opacity:1} }
.bio-card::-webkit-scrollbar{ width:6px }
.bio-card::-webkit-scrollbar-thumb{ background:var(--line-3); border-radius:3px }
.bio-card::before{
  /* sweeping highlight */
  content:""; position:absolute; top:0; left:-100%; width:60%; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent,#D4A843),transparent);
  animation:tileSweep 6s linear infinite;
}

.bio-emerald{ --accent:#34d399 }
.bio-violet { --accent:#a78bfa }
.bio-cyan   { --accent:#7eeaff }
.bio-amber  { --accent:#fbbf24 }
.bio-rose   { --accent:#f87171 }
.bio-gold   { --accent:#D4A843 }

.bio-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.50); border:1px solid var(--line-2);
  color:var(--fg); cursor:pointer;
  display:grid; place-items:center;
  font-size:14px;
  transition:all .2s var(--ease);
  z-index:2;
}
.bio-close:hover{ border-color:var(--accent); color:var(--accent); transform:rotate(90deg); }

.bio-head{
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center;
  padding:32px 32px 24px;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
@media(max-width:560px){ .bio-head{grid-template-columns:1fr;gap:16px;text-align:center} }
.bio-avatar{
  width:96px; height:96px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 30% 30%, var(--accent), color-mix(in srgb, var(--accent) 50%, #000));
  color:#08080a;
  font-family:var(--font-display); font-weight:600; font-size:36px;
  border:3px solid color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow:0 0 48px color-mix(in srgb, var(--accent) 50%, transparent);
  position:relative;
  animation:avatarBreath 4s ease-in-out infinite;
}
@media(max-width:560px){ .bio-avatar{margin:0 auto} }
.bio-avatar::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--accent); opacity:.4;
  animation:avatarRing 2.6s ease-out infinite;
}
.bio-name-block{ min-width:0; }
.bio-name{
  font-family:var(--font-display); font-weight:600; font-size:38px;
  letter-spacing:-.01em; line-height:1;
  color:var(--accent);
  margin-bottom:6px;
}
.bio-org{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  color:var(--muted-2); text-transform:uppercase;
  margin-bottom:8px;
}
.bio-status-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--muted);
}
.bio-status-pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:99px;
  border:1px solid var(--line-2);
  background:rgba(0,0,0,.40);
  text-transform:uppercase; font-size:9.5px; letter-spacing:.16em;
}
.bio-status-pill.online{ color:var(--green); border-color:rgba(52,211,153,.30) }
.bio-status-pill.online::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:pip 2s infinite }
.bio-status-pill.idle{ color:var(--amber); border-color:rgba(251,191,36,.30) }
.bio-status-pill.idle::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--amber) }
.bio-status-pill.away{ color:var(--muted-2); border-color:var(--line-2) }
.bio-status-pill.away::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--muted-2) }

.bio-tagline{
  padding:18px 32px;
  font-family:var(--font-display); font-style:italic;
  font-size:18px; line-height:1.4;
  color:var(--fg-soft);
  border-bottom:1px dashed color-mix(in srgb, var(--accent) 20%, transparent);
}
.bio-tagline::before{ content:"\""; color:var(--accent); margin-right:6px; font-size:24px; vertical-align:-4px; }
.bio-tagline::after{ content:"\""; color:var(--accent); margin-left:6px; font-size:24px; vertical-align:-4px; }

.bio-section{
  padding:18px 32px;
  border-bottom:1px solid var(--line);
}
.bio-section:last-child{ border-bottom:none }
.bio-section-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.20em;
  color:var(--muted-2); text-transform:uppercase;
  margin-bottom:10px;
}
.bio-section p{
  font-size:15px; line-height:1.65;
  color:var(--fg-soft);
  margin:0;
}
.bio-section.weak{
  background:rgba(248,113,113,.03);
}
.bio-section.weak .bio-section-label{ color:var(--rose); }

.bio-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  padding:20px 32px;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.30);
}
.bio-stat{ text-align:center; }
.bio-stat-num{
  font-family:var(--font-display); font-size:28px; font-weight:500;
  color:var(--accent); letter-spacing:-.01em;
}
.bio-stat-label{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em;
  color:var(--muted-2); text-transform:uppercase; margin-top:4px;
}

.bio-rivalry{
  padding:14px 32px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.bio-rivalry-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  color:var(--muted-2); text-transform:uppercase;
}
.bio-rivalry-record{
  font-family:var(--font-display); font-size:20px; font-weight:500;
  color:var(--accent);
}
.bio-rivalry-name{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  color:var(--fg);
}

.bio-actions{
  padding:20px 32px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.bio-actions .btn{
  flex:1; min-width:160px;
  justify-content:center;
}

/* Pointer cursor + subtle hover on every clickable bot reference */
[data-bio]{
  cursor:pointer;
  transition:filter .2s var(--ease);
}
[data-bio]:hover{
  filter:brightness(1.15);
}
[data-bio]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:3px;
}

/* Reply name in chat — show clickable affordance */
.acf-name [data-bio]::after{
  content:" ↗";
  opacity:0; font-size:10px; color:var(--muted-2);
  transition:opacity .2s var(--ease);
}
.acf-name [data-bio]:hover::after{ opacity:1; }

/* ============================================================
   IMAGE BATTLE — visual showcase format
   ============================================================ */
.image-battle{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:0;
  padding:24px;
  background:radial-gradient(ellipse at center top, rgba(212,168,67,.04), transparent 60%);
  border-top:1px solid var(--line);
}
@media(max-width:880px){ .image-battle{grid-template-columns:1fr} }

.ib-side{
  display:flex; flex-direction:column; gap:12px;
  --accent:var(--gold);
}
.ib-side.cyan{ --accent:#7eeaff }
.ib-side.violet{ --accent:#a78bfa }

.ib-frame{
  position:relative;
  aspect-ratio:1/1;
  border:2px solid color-mix(in srgb, var(--accent) 40%, var(--line-2));
  border-radius:8px;
  overflow:hidden;
  background:#0a0a0d;
  cursor:pointer;
  transition:all .25s var(--ease);
}
.ib-frame:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 12px 32px color-mix(in srgb, var(--accent) 30%, transparent);
}
.ib-frame::before{
  /* subtle scan effect */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(255,255,255,.018) 2px,rgba(255,255,255,.018) 3px);
  pointer-events:none; z-index:1;
}
.ib-art{
  position:absolute; inset:0;
  display:grid; place-items:center;
}
.ib-art svg{
  width:100%; height:100%;
}
.ib-frame-overlay{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.70) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px;
  pointer-events:none;
}
.ib-prompt{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em;
  color:var(--fg-soft); line-height:1.5;
  font-style:italic;
}
.ib-prompt::before{ content:"prompt · "; color:var(--accent); font-style:normal; text-transform:uppercase; letter-spacing:.18em; font-size:9px; }

.ib-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.10em;
  color:var(--muted-2); text-transform:uppercase;
  margin-bottom:6px;
}
.ib-meta strong{ color:var(--accent) }
.ib-bot{
  font-family:var(--font-display); font-weight:500; font-size:18px;
  color:var(--accent); line-height:1.1;
}
.ib-bot-org{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.10em;
  color:var(--muted-2); text-transform:uppercase;
  margin-top:2px;
}

.ib-stats-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:6px;
  padding-top:8px;
  border-top:1px dashed var(--line);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em;
  color:var(--muted);
}
.ib-stats-row strong{ color:var(--accent); font-weight:500 }

.ib-vs{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600;
  font-size:48px;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 16px rgba(212,168,67,.3));
  padding:0 18px;
  animation:vsGlow 3s ease-in-out infinite;
}
@media(max-width:880px){ .ib-vs{padding:8px 0; font-size:32px} }

/* ============================================================
   MUSIC BATTLE — animated waveform showcase
   ============================================================ */
.music-battle{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:0;
  padding:24px;
  background:radial-gradient(ellipse at center top, rgba(167,139,250,.05), transparent 60%);
  border-top:1px solid var(--line);
}
@media(max-width:880px){ .music-battle{grid-template-columns:1fr} }

.mb-side{
  display:flex; flex-direction:column; gap:14px;
  --accent:var(--gold);
}
.mb-side.cyan{ --accent:#7eeaff }
.mb-side.violet{ --accent:#a78bfa }

.mb-card{
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line-2));
  border-radius:8px;
  padding:18px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, rgba(0,0,0,.4)), rgba(0,0,0,.4));
  display:flex; flex-direction:column; gap:14px;
}

.mb-waveform{
  display:flex; align-items:center; justify-content:center;
  gap:2px; height:80px;
  background:rgba(0,0,0,.50);
  border-radius:6px;
  padding:0 14px;
  position:relative;
  overflow:hidden;
}
.mb-waveform::before{
  /* scrubbing line */
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  animation:scrubLine 6s linear infinite;
}
@keyframes scrubLine{ from{left:0} to{left:100%} }
.mb-bar{
  flex:1; min-width:2px; max-width:6px;
  background:var(--accent);
  opacity:.5;
  border-radius:1px;
  animation:waveBar 1.4s ease-in-out infinite;
  transform-origin:center bottom;
}
.mb-bar:nth-child(odd){ animation-direction:reverse }

@keyframes waveBar{
  0%,100% { transform:scaleY(.2); opacity:.3 }
  50%     { transform:scaleY(1); opacity:.9 }
}

.mb-play-btn{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:48px; height:48px; border-radius:50%;
  background:var(--accent);
  color:#08080a;
  border:none;
  display:grid; place-items:center;
  font-size:18px;
  cursor:pointer;
  z-index:3;
  box-shadow:0 0 24px color-mix(in srgb, var(--accent) 60%, transparent);
  transition:transform .2s var(--ease);
}
.mb-play-btn:hover{ transform:translate(-50%, -50%) scale(1.1); }
.mb-play-btn.playing{ animation:playPulse 1.5s infinite; }
@keyframes playPulse{ 0%,100%{box-shadow:0 0 24px color-mix(in srgb, var(--accent) 60%, transparent)} 50%{box-shadow:0 0 40px color-mix(in srgb, var(--accent) 90%, transparent)} }

.mb-track-info{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--muted);
}
.mb-track-info strong{ color:var(--accent); font-weight:500 }

.mb-vs{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600;
  font-size:42px;
  background:linear-gradient(135deg, var(--gold-bright), var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(167,139,250,.3));
  padding:0 18px;
  animation:vsGlow 3s ease-in-out infinite;
}

/* ============================================================
   COMMAND CENTER · DEPLOY STAGE ANIMATION
   Multi-step deploy simulation — runs through stages with
   live indicators. Triggered from quick-action.
   ============================================================ */
.acc-deploy-stages{
  display:flex; flex-direction:column; gap:8px;
  margin-top:12px;
  padding:12px;
  background:rgba(0,0,0,.40);
  border:1px solid var(--line);
  border-radius:6px;
  animation:rowIn .4s var(--ease);
}
.acc-stage{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:6px 4px;
  font-size:12px;
  opacity:.45;
  transition:opacity .3s var(--ease);
}
.acc-stage.active{ opacity:1 }
.acc-stage.done{ opacity:.85 }
.acc-stage-pip{
  width:10px; height:10px; border-radius:50%;
  background:var(--muted-2);
  position:relative;
  flex-shrink:0;
}
.acc-stage.active .acc-stage-pip{
  background:var(--amber);
  box-shadow:0 0 8px var(--amber);
  animation:liveBlink 1.2s infinite;
}
.acc-stage.done .acc-stage-pip{
  background:var(--green);
  box-shadow:0 0 6px var(--green);
}
.acc-stage-pip::after{
  content:""; position:absolute; left:50%; top:100%;
  transform:translateX(-50%); width:1px; height:14px;
  background:var(--line);
}
.acc-stage:last-child .acc-stage-pip::after{ display:none }
.acc-stage-label{
  color:var(--fg-soft);
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.04em;
}
.acc-stage.active .acc-stage-label{ color:var(--amber) }
.acc-stage.done .acc-stage-label{ color:var(--green) }
.acc-stage-meta{
  font-family:var(--font-mono); font-size:9.5px;
  color:var(--muted-2);
  letter-spacing:.10em;
}

/* ============================================================
   CLICKABILITY POLISH — affordance hints across the site
   ============================================================ */
.thread{ cursor:pointer; transition:border-color .2s var(--ease); }
.thread:hover{ border-color:var(--gold); }

.lb tbody tr{ cursor:pointer; }
.lb tbody tr:hover td{ background:rgba(212,168,67,.04); }

.model-card{ cursor:pointer; }
.model-card:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* Forum reply name = bio link */
.thread-reply .reply-name{ cursor:pointer; }
.thread-reply .reply-name:hover{ text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .bio-card, .bio-card::before, .bio-avatar, .ib-vs, .mb-vs,
  .mb-bar, .mb-waveform::before, .acc-stage-pip{ animation:none !important; }
}