/* =====================================================================
   PilotSim — page-specific styles
   ===================================================================== */

.sim-body{
  background: var(--black);
  color: var(--ink);
}

/* hero */
.sim-hero{
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 80px) clamp(32px, 4vw, 56px);
}
.sim-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--bold);
  margin-bottom: 18px;
}
.sim-eyebrow::before{
  content:"";
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--bold);
  box-shadow: 0 0 0 0 rgba(237, 81, 17, 0.6);
  animation: simPulse 1.6s infinite;
}
@keyframes simPulse{
  0%{ box-shadow: 0 0 0 0 rgba(237, 81, 17, 0.55); }
  70%{ box-shadow: 0 0 0 12px rgba(237, 81, 17, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(237, 81, 17, 0); }
}
.sim-h1{
  margin: 0 0 18px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.sim-lede{
  margin: 0;
  max-width: 60ch;
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.45;
  color: #c8c2af;
}

/* stage */
.sim-stage{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px) clamp(60px, 8vw, 120px);
}

/* stats strip */
.stats{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 56px);
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 24px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.stats__item{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.stats__item b{
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.stats__item i{
  font-style: normal;
  color: #807a6c;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* grid: world + side */
.sim-grid{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1080px){
  .sim-grid{ grid-template-columns: 1fr; }
}

/* world canvas */
.sim-world{
  position: relative;
  background: #0e0d0a;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  aspect-ratio: 800 / 500;
}
.sim-world::before{
  content: ""; position: absolute; inset: 8px;
  background:
    linear-gradient(var(--bold),var(--bold)) 0 0/14px 1px no-repeat,
    linear-gradient(var(--bold),var(--bold)) 0 0/1px 14px no-repeat,
    linear-gradient(var(--bold),var(--bold)) 100% 0/14px 1px no-repeat,
    linear-gradient(var(--bold),var(--bold)) 100% 0/1px 14px no-repeat,
    linear-gradient(var(--bold),var(--bold)) 0 100%/14px 1px no-repeat,
    linear-gradient(var(--bold),var(--bold)) 0 100%/1px 14px no-repeat,
    linear-gradient(var(--bold),var(--bold)) 100% 100%/14px 1px no-repeat,
    linear-gradient(var(--bold),var(--bold)) 100% 100%/1px 14px no-repeat;
  pointer-events: none;
  opacity: .9;
  z-index: 2;
}
#world{
  display: block;
  width: 100%;
  height: 100%;
}

/* side panel */
.sim-side{
  display: grid;
  gap: 16px;
}
.card{
  border: 1px solid rgba(255,255,255,.08);
  background: #0e0d0a;
}
.card__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #807a6c;
}
.card__head .dot{
  display:inline-block; width:7px; height:7px; border-radius:999px;
  margin-right:6px; vertical-align:middle;
}
.card__head .dot--live{
  background:#7df09a;
  box-shadow: 0 0 0 0 rgba(125,240,154,.6);
  animation: livePulse 1.6s infinite;
}
@keyframes livePulse{
  0%{ box-shadow: 0 0 0 0 rgba(125,240,154,.5); }
  70%{ box-shadow: 0 0 0 8px rgba(125,240,154,0); }
  100%{ box-shadow: 0 0 0 0 rgba(125,240,154,0); }
}

/* leaderboard */
.board{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.board li{
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 12px;
  color: #c8c2af;
  transition: background .25s;
}
.board li:last-child{ border-bottom: 0; }
.board li.busy{
  background: linear-gradient(90deg, rgba(237,81,17,.12), transparent 60%);
  color: var(--ink);
}
.board__rank{ color:#807a6c; }
.board__name{ color: var(--ink); letter-spacing: 0.02em; }
.board__rescues{ font-size: 11px; color: #807a6c; }
.board__tier{
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.15);
  color: var(--ink);
}
.board__tier.t-aplus{ color: var(--bold); border-color: rgba(237,81,17,.45); background: rgba(237,81,17,.08); }
.board__tier.t-a{ color: #ffce8a; border-color: rgba(255,206,138,.3); }
.board__tier.t-b{ color: #c8c2af; }

/* events */
.events{
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  max-height: 240px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent);
          mask-image: linear-gradient(180deg, #000 75%, transparent);
}
.events li{
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 10px;
  padding: 8px 14px;
  font-size: 11.5px;
  color: #c8c2af;
  letter-spacing: 0.02em;
  line-height: 1.5;
  border-bottom: 1px dotted rgba(255,255,255,.05);
}
.events li:last-child{ border-bottom: 0; }
.events__t{ color: #807a6c; }
.events__msg .robot{ color: var(--ink); }
.events__msg .pilot{ color: var(--bold); }
.events__msg .ok{ color: #7df09a; }
.events__msg .stuck{ color: #ffce8a; }

/* explainer */
.sim-explain{
  max-width: 80ch;
  margin: 40px auto 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: #c8c2af;
  text-align: center;
}
.sim-explain em{
  color: var(--ink);
  font-style: italic;
}

.sim-cta{
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.btn-line{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background .2s, color .2s, border-color .2s;
}
.btn-line svg{ width: 16px; height: 16px; transition: transform .25s; }
.btn-line:hover{ background: var(--bold); color: white; border-color: var(--bold); }
.btn-line:hover svg{ transform: translateX(4px); }