:root{
  --bg:#05070b;
  --panel:#101722;
  --line:rgba(255,255,255,.08);

  --text:#f6f2ea;
  --muted:#a6b2c2;

  --lime:#c8ff1a;
  --pink:#ff1178;
  --purple:#8b2cff;
  --cyan:#2ce6ff;
  --orange:#ff971f;

  --arena-glow:
    rgba(255,255,255,.04);

  --arena-intensity:
    .25;
}

/* ======================================================
   FOUNDATION
====================================================== */

*{
  box-sizing:border-box;
}

body{

  background:
    radial-gradient(
      circle at top,
      rgba(200,255,26,.06),
      #05070b 58%
    );

  overflow-x:hidden;

  color:var(--text);

  font-family:
    Inter,
    sans-serif;

}

/* ======================================================
   ENVIRONMENTAL FIELD
====================================================== */

.runtime-viewport::before {

  content: "";

  position: absolute;

  inset: 0;

  opacity: .012;

  pointer-events: none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}

.runtime-viewport::after {

  content: "";

  position: absolute;

  inset: 0;

  background:

    radial-gradient(

      circle,

      transparent 45%,

      rgba(0,0,0,.42) 100%

    );

  pointer-events: none;

}

/* ======================================================
   ARENA APP
====================================================== */

.arena-app {

  width:100%;

  min-height:100vh;

  position:relative;

  overflow:hidden;

  padding-bottom:180px;

}

/* ======================================================
   ENVIRONMENTAL ATMOSPHERE
====================================================== */

.arena-app::before {

  content:"";

  position:fixed;

  inset:-20%;

  background:

    radial-gradient(
      circle at center,
      rgba(200,255,26,.06),
      transparent 58%
    );

  filter:
    blur(140px);

  animation:
    environmentalBreath
    14s ease-in-out infinite;

  pointer-events:none;

  z-index:-3;

}

/* ======================================================
   CONVERGENCE SURFACE
====================================================== */

.arena-wave {

  position:relative;

  z-index:2;

  min-height:76vh;

  padding:
    140px 28px
    120px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  overflow:hidden;

  isolation:isolate;

  opacity:
    var(--arena-intensity);

  box-shadow:

    inset 0 -120px 120px
    rgba(0,0,0,.42),

    0 0 calc(
      120px * var(--syncPulse)
    )
    var(--ritualGlow);

  padding-right: 88px;

  transition:

    transform .8s ease,

    box-shadow .8s ease,

    opacity .8s ease;

  body.txt-channel-active .arena-wave {

  transform:
    scale(1.02);

  box-shadow:

    inset 0 -120px 120px
    rgba(0,0,0,.42),

    0 0 220px
    rgba(0,255,200,0.22);

  }

}

/* ======================================================
   CONVERGENCE ENERGY
====================================================== */

.arena-wave::before {

  content:"";

  position:absolute;

  inset:-20%;

  background:

    radial-gradient(
      circle at center,
      rgba(200,255,26,.16),
      transparent 62%
    );

  filter:
    blur(90px);

  opacity:.82;

  animation:
    convergenceBreath
    8s ease-in-out infinite;

  z-index:-2;

}

/* ======================================================
   PRESSURE TYPOGRAPHY
====================================================== */

.wave-intensity {

  font-size:
    clamp(5rem,16vw,10rem);

  font-weight:900;

  line-height:.78;

  letter-spacing:-0.08em;

  color:var(--lime);

  text-shadow:
    0 0 32px rgba(200,255,26,.14);
  
  padding-right: 92px;
}

.arena-wave h1 {

  margin-top:0;

  font-size:
    clamp(2.4rem,8vw,5rem);

  line-height:.9;

  letter-spacing:-0.06em;

  max-width:860px;

}

.arena-wave p {

  margin-top:0;

  font-size:.82rem;

  text-transform:uppercase;

  letter-spacing:.24em;

  opacity:.58;

}

/* ======================================================
   RUNTIME FLOW
====================================================== */

.feed {

  position:relative;

  z-index:4;

  margin-top:-140px;

  padding:
    120px 24px
    40px;

  display:flex;

  flex-direction:column;

  gap:0;

  overflow:hidden;
  
  padding-right: 88px;
}

.feed-item {

  padding:
    28px 0;

  display:flex;

  flex-direction:column;

  gap:14px;

  border-bottom:
    1px solid rgba(255,255,255,.04);

}

/* ======================================================
   RUNTIME CARDS
====================================================== */

.canon-event {

  position:relative;

  margin:0;

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.012)
    );

  border-left:
    1px solid rgba(255,255,255,.08);

  border-right:
    1px solid rgba(255,255,255,.08);

  border-top:
    1px solid rgba(255,255,255,.03);

  border-bottom:
    1px solid rgba(255,255,255,.03);

  backdrop-filter:
    blur(24px);

  border-radius:0;

  box-shadow:none;
  
  padding-right: 88px;
}

/* ======================================================
   PRESSURE EDGE
====================================================== */

.intervention::before,
.feed-item::before,
.canon-event::before {

  content:"";

  position:absolute;

  left:0;

  top:0;

  bottom:0;

  width:2px;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--lime),
      transparent
    );

  opacity:.55;

}

/* ======================================================
   FEED ITEM
====================================================== */

.feed-item {

  padding:
    20px 0;

  background:transparent;

  border:none;

  border-bottom:
    1px solid rgba(255,255,255,.04);

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:18px;

}

/* ======================================================
   RUNTIME TYPOGRAPHY
====================================================== */

.section h2,
.arena-section h2 {

  margin-bottom:40px;

  font-size:.72rem;

  font-weight:800;

  letter-spacing:.34em;

  text-transform:uppercase;

  color:var(--pink);

  opacity:.82;

}

/* ======================================================
   SYNCHRONIZATION PRESSURE
====================================================== */

body[data-sync-pressure="LOW"] {

  --arena-glow:
    rgba(255,255,255,.04);

  --arena-intensity:
    .25;

}

body[data-sync-pressure="ACTIVE"] {

  --arena-glow:
    rgba(0,255,180,.18);

  --arena-intensity:
    .65;

}

body[data-sync-pressure="ESCALATING"] {

  --arena-glow:
    rgba(200,255,26,.28);

  --arena-intensity:
    1;

}

/* ========================================
   RUNTIME TRAVERSAL RAIL (legacy vertical rail only)
======================================== */

#runtime-traversal-rail:has(.traversal-rail) {

  position: fixed;

  right: 18px;

  top: 50%;

  transform:

    translateY(-50%)

    translateZ(120px);

}

/* ========================================
   RAIL STRUCTURE
======================================== */

.traversal-rail {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 18px;

  padding: 24px 0;

  transform:

    rotateY(-6deg)

    translateZ(80px);

  transform-style:
    preserve-3d;

}

/* ========================================
   SYNCHRONIZATION SPINE
======================================== */

.traversal-rail::before {

  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  right: 4px;

  width: 1px;

  background:

    linear-gradient(
      to bottom,

      transparent,

      rgba(255,255,255,.08),

      rgba(200,255,26,.18),

      rgba(255,255,255,.08),

      transparent
    );

  opacity: .42;

}

/* ========================================
   NODE BASE
======================================== */

.traversal-node {

  appearance: none;

  -webkit-appearance: none;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 14px;

  margin: 10px 0;

  padding: 0;

  min-width: unset;

  width: auto;

  background: transparent;

  border: none;

  outline: none;

  box-shadow: none;

  cursor: pointer;

  color:

    rgba(255,255,255,.58);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: .38em;

  text-transform: uppercase;

  transition:
    all 800ms ease;

  min-height: 64px;

}


/* ========================================
   NODE DEPTH
======================================== */

.traversal-node:not(.active) {

  opacity: .48;

  filter:
    blur(.15px);

}

.traversal-node:hover {

  opacity: .82;

}

/* ========================================
   ACTIVE NODE
======================================== */

.traversal-node.active {

  opacity: 1;

  color:

    rgba(255,255,255,.96);

  letter-spacing: .48em;

  transform:
    translateX(-10px);

  margin: 18px 0;

}

/* ========================================
   ORB BASE
======================================== */

.traversal-orb {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background:

    rgba(255,255,255,.12);

  transition:
    all 900ms ease;

}

/* ========================================
   ACTIVE ORB
======================================== */

.traversal-node.active .traversal-orb {

  background:
    #c8ff1a;

  transform:
    scale(1.8);

  box-shadow:

    0 0 18px rgba(200,255,26,.75),

    0 0 58px rgba(200,255,26,.32);

}

/* ========================================
   ACTIVE LABEL GLOW
======================================== */

.traversal-node span {

  position: relative;

  display: inline-block;

  transform:

    rotate(72deg);

  transform-origin:

    center;

  white-space: nowrap;

}

.traversal-node.active span {

  text-shadow:

    0 0 12px rgba(255,255,255,.12);

  transform:
    rotate(0deg);

  transform-origin:
    right center;
}

.traversal-node.active span::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -4px;

  width: 100%;

  height: 1px;

  background:

    rgba(200,255,26,.45);

}

/* ========================================
   LOCKED NODES
======================================== */

.traversal-node.locked {

  opacity: .18;

}

/* ========================================
   SYNCHRONIZATION PRESSURE
======================================== */

.pressure-active .traversal-orb {

  animation:
    syncPulse 3s infinite;

}

.pressure-escalating .traversal-orb {

  animation:
    syncPulse 1.4s infinite;

}

/* ========================================
   PRESSURE PULSE
======================================== */

@keyframes syncPulse {

  0% {

    transform: scale(1);

    opacity: .7;

  }

  50% {

    transform: scale(1.6);

    opacity: 1;

  }

  100% {

    transform: scale(1);

    opacity: .7;

  }

}

/* ========================================
   RUNTIME VIEWPORT
======================================== */

.runtime-viewport {

  position: fixed;

  inset: 0;

  overflow: hidden;

  perspective: 1400px;

  pointer-events: none;

}

/* ========================================
   RUNTIME WORLD
======================================== */

.runtime-world {

  position: absolute;

  inset: 0;

  transform-style:
    preserve-3d;

  pointer-events: auto;

  transition:
    transform 1400ms ease;

}
.intervention h3,
.feed-item h3 {

  font-size:
    1.5rem;

  line-height:
    .95;

  letter-spacing:
    -.04em;

  margin-bottom:
    12px;

}
.runtime-tag,
.feed-label,
.intervention-type {

  font-size:
    .62rem;

  letter-spacing:
    .22em;

  opacity:
    .42;

  text-transform:
    uppercase;

}
.feed,
.intervention-grid {

  transform:
    translateZ(18px);

  transform-style:
    preserve-3d;
  
  padding-right: 90px;
}
.feed::after {

  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:140px;

  background:

    linear-gradient(
      to bottom,
      transparent,
      rgba(5,7,11,.92)
    );

  pointer-events:none;

}

/* ========================================
   ARENA PRIORITY STATES
======================================== */

body[data-arena-priority="ELEVATED"] .arena-runtime {

  border-color:
    rgba(200,255,26,.22);

  box-shadow:
    0 0 48px rgba(200,255,26,.08);

  transform:
    scale(1.002);

}

body[data-arena-priority="ACTIVE"] .arena-runtime {

  border-color:
    rgba(255,180,0,.18);

}

body[data-arena-priority="UNSTABLE"] .arena-runtime {

  filter:
    saturate(.82);

  opacity:
    .92;

}

.arena-will-strip {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
}

.arena-will-strip__kicker {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.arena-will-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
}

.arena-will-strip__state {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 180, 90, 0.9);
  border: 1px solid rgba(255, 180, 90, 0.28);
  border-radius: 999px;
  padding: 3px 8px;
}

.arena-will-strip__headline {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 18px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.94);
}

.arena-will-strip__detail {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.45;
}

.arena-decision-band {
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 171, 0, 0.22);
  background:
    linear-gradient(
      165deg,
      rgba(16, 26, 36, 0.96),
      rgba(0, 0, 0, 0.88)
    );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 18px 40px rgba(0, 0, 0, 0.35);
}

body[data-active-page="arena"] .arena-runtime {
  scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px));
}

body[data-active-page="arena"] .arena-will-strip,
body[data-active-page="arena"] .arena-decision-band {
  scroll-margin-top: calc(76px + env(safe-area-inset-top, 0px));
}

.arena-decision-band__head {
  margin-bottom: 14px;
}

.arena-decision-band__badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.arena-decision-band__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #66e6a3;
  box-shadow: 0 0 10px rgba(102, 230, 163, 0.55);
}

.arena-decision-band[data-arena-decision-mode="empty"] .arena-decision-band__live-dot,
.arena-decision-band[data-arena-decision-mode="disconnected"] .arena-decision-band__live-dot {
  background: rgba(212, 163, 115, 0.8);
  box-shadow: none;
}

.arena-decision-band__badge {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 171, 0, 0.92);
}

.arena-decision-band__headline {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  line-height: 1.2;
  color: #fff;
}

.arena-decision-band__subcopy,
.arena-decision-band__context,
.arena-decision-band__empty-copy,
.arena-decision-band__proof {
  margin: 0 0 10px;
  color: rgba(212, 163, 115, 0.92);
  font-size: 14px;
  line-height: 1.45;
}

.arena-decision-band__question {
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.35;
  color: #fff;
}

.arena-decision-band__timing,
.arena-decision-band__pressure-note {
  margin: 0 0 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.arena-decision-band__pressure {
  margin-bottom: 14px;
}

.arena-decision-band__bar-row {
  margin-bottom: 10px;
}

.arena-decision-band__bar-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
}

.arena-decision-band__bar-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.arena-decision-band__bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 171, 0, 0.85),
    rgba(255, 109, 0, 0.95)
  );
  transition: width 0.35s ease;
}

.arena-decision-band__options {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.arena-decision-band__option {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.arena-decision-band__option .textrp-action-prompt {
  margin-top: 8px;
  margin-bottom: 4px;
}


.arena-decision-band__vote-btn,
.arena-decision-band__primary-btn {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  background: linear-gradient(
    180deg,
    rgba(255, 171, 0, 0.95),
    rgba(230, 81, 0, 0.95)
  );
  color: #000;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.arena-decision-band__textrp-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 10px;
  color: rgba(255, 171, 0, 0.95);
  text-decoration: none;
  font-size: 14px;
}

.arena-decision-band__proof {
  margin-bottom: 0;
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .arena-decision-band__bar-fill {
    transition: none;
  }
}

.arena-wave--will .wave-intensity {
  display: none;
}

.arena-wave--will h1 {
  margin-bottom: 8px;
}

.arena-wave--will p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
}

.arena-status-banner {

  padding: 18px;

  border-radius: 16px;

  margin-bottom: 18px;

  background:
  linear-gradient(
    135deg,
    var(--arena-glow),
    rgba(255,255,255,0.02)
  );

  box-shadow:
    0 0 24px var(--arena-glow);

  transition:
    all .8s ease;

  border:
    1px solid rgba(255,255,255,0.08);

}

.arena-status-banner {

  padding: 18px;

  border-radius: 16px;

  margin-bottom: 18px;

  background:
    rgba(255,255,255,0.03);

  border:
    1px solid rgba(255,255,255,0.08);

}

.arena-status-kicker {

  font-size: 10px;

  letter-spacing: .3em;

  opacity: .65;

}

.arena-status-phase {

  margin-top: 10px;

  opacity: .55;

  font-size: 12px;

}

body[data-civilization-state="DORMANT"]
.arena-runtime {

  --arena-glow:
    rgba(255,255,255,0.04);

  --arena-intensity:
    0.3;

}

body[data-civilization-state="ESCALATING"]
.arena-runtime {

  --arena-glow:
    rgba(255,180,0,0.14);

  --arena-intensity:
    0.65;

}

body[data-civilization-state="SYNCHRONIZED"]
.arena-runtime {

  --arena-glow:
    rgba(0,255,200,0.18);

  --arena-intensity:
    1;

}

@keyframes civilizationPulse {

  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }

  100% {
    transform: translateY(0);
  }

}

body[data-civilization-state="ESCALATING"]
.arena-status-banner {

  animation:
    civilizationPulse 4s ease-in-out infinite;

}

body[data-civilization-state="SYNCHRONIZED"]
.arena-status-banner {

  box-shadow:
    0 0 40px rgba(0,255,200,0.25);

}

/* ========================================
   CIVILIZATION INTERVENTIONS
======================================== */

.arena-intervention-grid {

  display: flex;

  flex-direction: column;

  gap: 14px;

}

.arena-intervention {

  padding: 16px;

  border-radius: 16px;

  background:
    rgba(255,255,255,0.03);

  border:
    1px solid rgba(255,255,255,0.08);

  transition:
    all .35s ease;

}

.arena-intervention:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(255,255,255,0.16);

}

.arena-intervention-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 10px;

}

.arena-intervention-top h3 {

  margin: 0;

  font-size: 16px;

}

.arena-intervention-top span {

  font-size: 10px;

  letter-spacing: .18em;

  opacity: .7;

  text-transform: uppercase;

}

.arena-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 12px;

}

.arena-meta span {

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:
    999px;

  padding:
    4px 10px;

  font-size:
    10px;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

}

.arena-intervention-bottom {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 16px;

}

.arena-reward {

  display: flex;

  flex-direction: column;

  gap: 4px;

}

.arena-reward b {

  font-size: 15px;

}

.arena-btn {

  border: 0;

  padding:
    10px 14px;

  border-radius:
    10px;

  cursor:
    pointer;

  background:
    rgba(255,255,255,0.08);

  color:
    inherit;

  font-weight:
    600;

}

.arena-btn:hover {

  background:
    rgba(255,255,255,0.14);

}

/* ========================================
   CIVILIZATION UNLOCKS
======================================== */

.arena-unlock-list {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.arena-unlock {

  padding: 12px;

  border-radius: 12px;

  background:
    rgba(0,255,200,0.08);

  border:
    1px solid rgba(0,255,200,0.18);

}