/* ============================================================
   FORGE ATLAS · v10.1 · SWARM PARTICLE FIELD
   Canvas layer + match HUD + spectator prompt dialog
   ============================================================ */

/* The host wraps the canvas and HUD. Canvas absolute behind. */
.swarm-field-host{
  position:relative;
  width:100%;
  min-height:480px;
  border:1px solid var(--line-gold);
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(212,168,67,.04), transparent 70%),
    linear-gradient(180deg, #0a0a0d 0%, #06060a 100%);
  border-radius:6px;
  overflow:hidden;
  margin:24px 0 32px;
}

.swarm-field-canvas{
  position:absolute; inset:0;
  display:block;
  pointer-events:auto;
  cursor:crosshair;
}

/* Subtle corner ornaments matching site language */
.swarm-field-host::before,
.swarm-field-host::after{
  content:"";
  position:absolute;
  width:48px; height:48px;
  border:1px solid rgba(212,168,67,.25);
  pointer-events:none;
  z-index:2;
}
.swarm-field-host::before{ top:14px; left:14px; border-right:none; border-bottom:none; }
.swarm-field-host::after { bottom:14px; right:14px; border-left:none; border-top:none; }

/* ============================================================
   MATCH HUD · overlays the canvas
   ============================================================ */
.swarm-field-hud{
  position:relative;
  z-index:3;
  pointer-events:none;
  padding:18px 22px;
}
.swarm-field-hud > *{ pointer-events:auto; }

.swarm-match-hud{
  background:linear-gradient(180deg, rgba(6,6,10,.85), rgba(6,6,10,.65));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(212,168,67,.20);
  border-radius:4px;
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:680px;
  margin:0 auto;
}

.swarm-match-top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:18px;
  align-items:center;
}

.swarm-match-side{
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:4px;
  transition:all .25s var(--ease);
}
.swarm-match-side.sigma{ justify-content:flex-start; }
.swarm-match-side.omega{ justify-content:flex-end; }
.swarm-match-side.backed{
  border-color:currentColor;
  background:rgba(212,168,67,.04);
}
.swarm-match-side.sigma{ color:#7eeaff; }
.swarm-match-side.omega{ color:#D4A843; }

.sm-emblem{
  width:42px; height:42px;
  display:grid; place-items:center;
  border:2px solid currentColor;
  border-radius:50%;
  font-family:var(--font-display);
  font-weight:600;
  font-size:18px;
  background:radial-gradient(circle, color-mix(in srgb, currentColor 30%, transparent), transparent);
  box-shadow:0 0 16px color-mix(in srgb, currentColor 30%, transparent);
}

.sm-meta{ line-height:1.15; }
.sm-meta-right{ text-align:right; }
.sm-name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:14px;
  color:var(--fg);
  letter-spacing:-.005em;
}
.sm-score{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:22px;
  color:currentColor;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* Match clock */
.swarm-match-clock{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:6px 16px;
  border-left:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.08);
}
.sm-clock-label{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.20em;
  color:var(--muted-2);
  text-transform:uppercase;
}
.sm-clock-time{
  font-family:var(--font-mono);
  font-size:20px;
  font-weight:500;
  color:var(--fg);
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}

/* The momentum bar */
.swarm-match-bar{
  height:3px;
  background:rgba(255,255,255,.05);
  border-radius:2px;
  display:flex;
  overflow:hidden;
  position:relative;
}
.sm-bar-sigma{
  background:linear-gradient(90deg, #7eeaff, rgba(126,234,255,.4));
  box-shadow:0 0 8px rgba(126,234,255,.4);
  transition:width .4s var(--ease);
}
.sm-bar-omega{
  background:linear-gradient(90deg, rgba(212,168,67,.4), #D4A843);
  box-shadow:0 0 8px rgba(212,168,67,.4);
  transition:width .4s var(--ease);
}

/* Action buttons */
.swarm-match-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.sm-back{
  background:transparent;
  border:1px solid;
  color:currentColor;
  padding:7px 14px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  cursor:pointer;
  border-radius:3px;
  transition:all .15s var(--ease);
}
.sm-back-sigma{ color:#7eeaff; border-color:rgba(126,234,255,.5); }
.sm-back-omega{ color:#D4A843; border-color:rgba(212,168,67,.5); }
.sm-back-sigma:hover{ background:rgba(126,234,255,.10); border-color:#7eeaff; }
.sm-back-omega:hover{ background:rgba(212,168,67,.10); border-color:#D4A843; }

.sm-backed-note{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muted);
}
.sm-backed-note strong.sigma{ color:#7eeaff; }
.sm-backed-note strong.omega{ color:#D4A843; }

/* Prompt opener */
.swarm-match-prompt{ text-align:center; }
.sm-prompt-open{
  background:linear-gradient(135deg, rgba(126,234,255,.10), rgba(212,168,67,.10));
  border:1px dashed rgba(212,168,67,.4);
  color:var(--fg);
  padding:8px 18px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:3px;
  transition:all .2s var(--ease);
}
.sm-prompt-open:hover{
  border-style:solid;
  border-color:var(--gold);
  background:linear-gradient(135deg, rgba(126,234,255,.20), rgba(212,168,67,.20));
}
.sm-prompt-confirm{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.10em;
  color:var(--cyan);
  text-transform:uppercase;
}

/* Match end card */
.swarm-match-end{
  background:linear-gradient(180deg, rgba(6,6,10,.95), rgba(6,6,10,.80));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--gold);
  border-radius:6px;
  padding:24px 28px;
  text-align:center;
  max-width:520px;
  margin:0 auto;
  box-shadow:0 0 40px rgba(212,168,67,.20);
}
.swarm-match-end-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.20em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:8px;
}
.swarm-match-end-winner{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:500;
  letter-spacing:-.01em;
  margin-bottom:6px;
  line-height:1.2;
}
.swarm-match-end-winner .sigma{ color:#7eeaff; text-shadow:0 0 24px rgba(126,234,255,.5); }
.swarm-match-end-winner .omega{ color:#D4A843; text-shadow:0 0 24px rgba(212,168,67,.5); }
.swarm-match-end-winner .draw{ color:var(--muted); }
.swarm-match-end-score{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.10em;
  color:var(--fg-soft);
  margin-bottom:14px;
}
.swarm-match-end-next{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.10em;
  color:var(--muted);
  text-transform:uppercase;
}

/* ============================================================
   SPECTATOR PROMPT DIALOG · the inject-one-prompt UI
   ============================================================ */
.sm-prompt-dialog{
  position:fixed; inset:0;
  z-index:10000;
  background:rgba(6,6,10,.80);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:grid;
  place-items:center;
  padding:24px;
  animation:smDialogIn .25s var(--ease);
}
@keyframes smDialogIn{
  from{ opacity:0; } to{ opacity:1; }
}

.sm-prompt-card{
  background:linear-gradient(180deg, rgba(10,10,13,.96), rgba(6,6,10,.96));
  border:1px solid var(--gold);
  border-radius:6px;
  padding:24px;
  width:100%;
  max-width:520px;
  position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 60px rgba(212,168,67,.15);
}
.sm-prompt-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-2);
}
.sm-prompt-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--gold);
  text-transform:uppercase;
  font-weight:600;
}
.sm-prompt-close{
  background:transparent;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:4px 8px;
  border-radius:3px;
  transition:all .15s var(--ease);
}
.sm-prompt-close:hover{ color:var(--fg); background:rgba(255,255,255,.04); }

.sm-prompt-help{
  font-family:var(--font-display);
  font-style:italic;
  font-size:14px;
  color:var(--muted);
  margin:0 0 14px;
  line-height:1.5;
}

.sm-prompt-input{
  width:100%;
  background:rgba(0,0,0,.40);
  border:1px solid var(--line-2);
  color:var(--fg);
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  border-radius:3px;
  resize:vertical;
  transition:border-color .15s var(--ease);
}
.sm-prompt-input:focus{ outline:none; border-color:var(--gold); }

.sm-prompt-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:14px;
}
.sm-prompt-count{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--muted-2);
}
.sm-prompt-submit{
  background:var(--gold);
  color:var(--bg);
  border:none;
  padding:10px 20px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:3px;
  transition:background .15s var(--ease);
}
.sm-prompt-submit:hover:not(:disabled){ background:var(--gold-bright,#f4cb6c); }
.sm-prompt-submit:disabled{ opacity:.4; cursor:not-allowed; }

/* Mobile */
@media (max-width:640px){
  .swarm-match-top{ grid-template-columns:1fr; gap:10px; }
  .swarm-match-clock{ border-left:none; border-right:none; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); padding:6px 0; }
  .swarm-match-side.omega{ justify-content:flex-start; }
  .swarm-match-side.omega .sm-meta-right{ text-align:left; }
  .swarm-match-side.omega .sm-emblem{ order:-1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .sm-bar-sigma, .sm-bar-omega, .sm-emblem, .sm-prompt-dialog{
    animation:none !important;
    transition:none !important;
  }
}

/* ============================================================
   AMBIENT VERSION · subtler particle field for splash + hero
   Same canvas system, less dense, more atmospheric
   ============================================================ */
.swarm-ambient-host{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.5;
}
.swarm-ambient-host .swarm-field-canvas{
  pointer-events:none;
  cursor:default;
}