/* ══════════════════════════════════════════════════════════════════════
   SEVEN GATES — network relay mini-game
   Loaded only on network-game.html; reuses the tokens defined in style.css
   (--orange, --blue, --navy, --line, --r, --ease, --ff) rather than
   inventing a second palette.

   Layout: a small, realistic office topology (PC / AP / Server behind a
   Switch, uplinked through a Router, a Firewall, out to the Cloud). Each
   round names two devices that need to talk; the player drags a cable
   from either one, through the real cabling in between, to the other.
   ══════════════════════════════════════════════════════════════════════ */

.game-band{position:relative}

.game{
  position:relative;max-width:640px;margin:0 auto;
  background:radial-gradient(circle at 50% 30%,#0d2c50 0%,var(--navy) 68%);
  border-radius:calc(var(--r) + 8px);overflow:hidden;
  box-shadow:0 44px 90px -42px rgba(6,32,63,.65),inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex;flex-direction:column;
}

/* ── HUD ── */
.game__hud{
  display:flex;gap:1.6rem;justify-content:center;
  padding:1.15rem 1rem .7rem;
}
.hud__stat{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.hud__k{font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hud__v{font-size:1.2rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.hud__lives{display:flex;gap:.32rem;height:1.2rem;align-items:center}
.hud__lives i{width:9px;height:9px;border-radius:50%;background:var(--orange-lift);display:block;transition:background .3s,transform .3s}
.hud__lives i.is-lost{background:rgba(255,255,255,.16);transform:scale(.65)}

/* ── Task banner + countdown ── */
.game__taskbar{padding:0 1.2rem .9rem;text-align:center}
.game__task{
  margin:0 0 .5rem !important;color:#fff;font-weight:800;font-size:.92rem;
  letter-spacing:.02em;text-transform:uppercase;
}
.timerbar{height:4px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;max-width:280px;margin:0 auto}
.timerbar__fill{height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,var(--orange-lift),var(--blue-3005));transform:scaleX(1)}

/* ── The diagram itself ── */
.diagram{
  position:relative;flex:1;width:100%;aspect-ratio:3/4;max-height:460px;
}
.diagram__svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}/* purely decorative — never a hit target, and it sits below .diagram__nodes anyway */
#backbone line{stroke:rgba(255,255,255,.2);stroke-width:.5;vector-effect:non-scaling-stroke}
#lockedPath{
  stroke:url(#pathGrad);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(245,134,52,.65));
}
#leaderLine{
  stroke:rgba(255,255,255,.6);stroke-width:.6;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:0;transition:opacity .1s;
}
#leaderLine.is-active{opacity:1}

.diagram__nodes{position:absolute;inset:0;z-index:2;pointer-events:none}

.node{
  position:absolute;top:0;left:0;transform:translate(-50%,-50%);
  min-width:52px;padding:.4rem .55rem;margin:0;
  border-radius:9px;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.07);
  color:#fff;font-family:var(--ff);font-weight:800;font-size:.62rem;letter-spacing:.045em;
  text-align:center;white-space:nowrap;line-height:1.2;
  cursor:default;pointer-events:auto;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;
  -webkit-appearance:none;appearance:none;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.node.is-endpoint{cursor:grab;border-color:var(--orange-lift);background:rgba(241,89,42,.22);animation:nodepulse 1.1s ease-in-out infinite}
.node.is-endpoint.is-dragging{cursor:grabbing}
@keyframes nodepulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.1)}
}
.node.is-path{background:rgba(0,119,200,.32);border-color:var(--blue-3005)}

/* Drag hover feedback — plain ring while the leader line is nearby, a
   green one once that device is actually a valid next hop */
.node.is-target-hover{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.node.is-target-hover.is-valid-hover{box-shadow:0 0 0 4px rgba(123,227,139,.6);border-color:#7BE38B}

.node.is-hit{background:#7BE38B;border-color:#7BE38B;animation:nodehit .4s var(--ease)}
@keyframes nodehit{0%{transform:translate(-50%,-50%) scale(1.35)}100%{transform:translate(-50%,-50%) scale(1)}}
.node.is-missed{background:rgba(255,90,70,.28);border-color:rgba(255,90,70,.75)}

/* ── Start / game-over overlay ── */
.game__overlay{
  position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
  background:rgba(3,15,30,.88);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:2rem;text-align:center;transition:opacity .3s var(--ease),visibility .3s;
}
.game__overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.game__card{max-width:380px;color:#fff}
.game__card .eyebrow{justify-content:center}
.game__card h2{color:#fff;font-size:clamp(1.5rem,3vw,2rem);font-weight:800}
.game__card p{color:rgba(255,255,255,.82);font-size:.95rem;margin:1rem 0 1.5rem}
.game__card kbd{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);border-radius:5px;padding:.05rem .42rem;font-size:.85em;font-family:var(--ff)}
.game__best{margin-top:1.1rem !important;font-size:.8rem !important;color:rgba(255,255,255,.55) !important}

/* ── Soft cross-sell under the game, not inside it ── */
.game__cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1.2rem;text-align:center}
.game__cta p{margin:0;color:var(--gray);font-size:.95rem}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:560px){
  .diagram{max-height:400px}
  .game__hud{gap:1.1rem}
  .hud__v{font-size:1.05rem}
  .node{font-size:.58rem;padding:.34rem .48rem}
}

@media(prefers-reduced-motion:reduce){
  .node.is-endpoint{animation:none}
  .node.is-hit{animation:none}
}