/* ============================================================
   NIGHTRUN — Lightning hazard UI
   ============================================================ */

/* in-run lane warning pill */
.lightningWarn{
  position:absolute;left:50%;top:176px;width:308px;
  transform:translate(-50%,-7px);
  z-index:12;pointer-events:none;
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;gap:9px;
  padding:9px 12px 11px;
  border-radius:14px;
  background:
    linear-gradient(160deg, rgba(20,31,58,.95), rgba(6,10,22,.92));
  border:1px solid rgba(140,210,255,.46);
  box-shadow:
    0 0 28px rgba(80,170,255,.24),
    inset 0 1px 0 rgba(255,255,255,.10);
  opacity:0;
  transition:opacity .2s ease, transform .2s ease, border-color .15s;
}
.lightningWarn.show{opacity:1;transform:translate(-50%,0);}
.lightningWarn.urgent{
  border-color:rgba(255,126,150,.86);
  box-shadow:0 0 36px rgba(255,70,110,.34), inset 0 1px 0 rgba(255,255,255,.12);
  animation:lwUrgent .34s linear infinite;
}
@keyframes lwUrgent{
  0%,100%{border-color:rgba(255,126,150,.86);}
  50%{border-color:rgba(255,235,242,.98);}
}
.lwIcon{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(100,180,255,.13);
  border:1px solid rgba(150,220,255,.34);
  color:#c8f7ff;
}
.lwIcon svg{
  width:21px;height:21px;
  filter:drop-shadow(0 0 9px rgba(110,225,255,.9));
  animation:lwBolt 1.05s ease-in-out infinite;
}
@keyframes lwBolt{
  0%,100%{opacity:1;filter:drop-shadow(0 0 9px rgba(110,225,255,.9));}
  50%{opacity:.42;filter:drop-shadow(0 0 3px rgba(110,225,255,.4));}
}
.lwTitle{
  font-size:15px;font-weight:900;letter-spacing:.04em;
  color:#dcf9ff;line-height:1.1;white-space:nowrap;
}
.lwTitle b{color:#7feaff;font-size:16px;margin-right:4px;text-shadow:0 0 12px rgba(80,230,255,.55);}
.lwSub{
  margin-top:3px;font-size:10.5px;line-height:1.25;
  letter-spacing:.03em;color:#94bad1;white-space:nowrap;
}
.lwTime{
  text-align:right;font-size:9px;color:#7fa8bd;
  font-variant-numeric:tabular-nums;line-height:1;
}
.lwTime b{display:block;font-size:21px;color:#e9fdff;line-height:1;letter-spacing:-.02em;}
.lwTime span{display:block;margin-top:1px;}
.lwBar{
  grid-column:1/-1;height:4px;border-radius:3px;
  background:rgba(255,255,255,.10);overflow:hidden;margin-top:1px;
}
.lwBar i{
  display:block;height:100%;width:100%;border-radius:3px;
  background:linear-gradient(90deg,#6fe8ff,#d6fcff);
  box-shadow:0 0 11px rgba(100,230,255,.8);
}
.lightningWarn.urgent .lwBar i{
  background:linear-gradient(90deg,#ff5b78,#ffd1dc);
  box-shadow:0 0 11px rgba(255,80,110,.85);
}

/* start-screen storm rule strip */
.stormTip{
  display:flex;align-items:center;gap:8px;
  margin:-4px 0 16px;padding:8px 12px;border-radius:12px;
  border:1px solid rgba(130,190,255,.22);
  background:linear-gradient(160deg, rgba(24,34,70,.70), rgba(7,10,20,.50));
  font-size:11px;line-height:1.45;font-weight:600;color:#b3cbe8;
}
.stormTip b{color:#c8f6ff;font-weight:900;}
.stormIcon{
  width:19px;height:19px;flex:0 0 auto;
  display:grid;place-items:center;color:#8feaff;
  filter:drop-shadow(0 0 7px rgba(100,220,255,.75));
}
.stormIcon svg{width:16px;height:16px;}

@media (max-width:380px){
  .lightningWarn{width:96vw;max-width:310px;top:168px;}
  .lwTitle{font-size:14px;}
  .lwSub{font-size:10px;}
  .stormTip{font-size:10.5px;}
}