
/* V15.8 Gamification + Storm Alert Layer */
.learning-path-grid, .v158-grid, .mission-grid { display:grid; gap:18px; }
.learning-path-grid { grid-template-columns: 1.15fr 0.85fr; }
.learning-path-card, .aviator-profile-card, .mission-card, .storm-card, .cert-status-card {
  background: rgba(255,255,255,0.92); border-radius: 22px; padding: 22px;
  border: 1px solid rgba(37,95,137,0.12); box-shadow: 0 10px 22px rgba(25,74,120,0.06);
}
.path-steps { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:12px; margin-top:16px; }
.path-step {
  background: linear-gradient(180deg, rgba(232,246,255,0.95), rgba(255,255,255,0.95));
  border: 1px solid rgba(37,95,137,0.14); border-radius: 18px; padding: 14px; min-height: 108px;
}
.path-step strong { display:block; margin-bottom:6px; color:#1d5c89; }
.path-step span { font-size:0.93rem; display:block; color:#2d5a7d; }
.path-step.is-complete { background: linear-gradient(180deg, rgba(223,250,230,0.95), rgba(255,255,255,0.95)); border-color: rgba(39,145,85,0.28); }
.path-step.is-current { box-shadow: 0 0 0 3px rgba(255,138,43,0.22); }
.path-summary { margin-top:16px; font-weight:700; color:#255f89; }
.aviator-profile-card h4, .mission-card h4, .storm-card h4, .cert-status-card h4 { margin-bottom: 10px; }
.profile-name { font-size: 1.35rem; font-weight: 800; color:#123c60; }
.profile-rank { display:inline-flex; margin-top:10px; padding:9px 14px; border-radius:999px; background: rgba(37,95,137,0.09); font-weight:700; }
.profile-stats { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin-top:16px; }
.profile-stat { background:#fff; border:1px solid rgba(37,95,137,0.12); border-radius:16px; padding:14px; }
.profile-stat strong { display:block; font-size:1.2rem; color:#123c60; }
.profile-stat span { color:#426b8a; font-size:0.9rem; }
.mission-grid { grid-template-columns: 1fr 0.9fr; margin-top: 18px; }
.mission-list { display:grid; gap:12px; }
.mission-item { display:flex; justify-content:space-between; gap:14px; align-items:center; background:#fff; border:1px solid rgba(37,95,137,0.12); padding:14px 16px; border-radius:18px; }
.mission-item.is-complete { background: rgba(50,170,91,0.09); }
.mission-copy strong { display:block; }
.mission-copy span { display:block; color:#50728f; font-size:0.93rem; margin-top:4px; }
.mission-badge { display:inline-flex; min-width:120px; justify-content:center; padding:10px 12px; border-radius:999px; background:rgba(37,95,137,0.08); font-weight:700; }
.mission-item.is-complete .mission-badge { background: rgba(39,145,85,0.14); color:#1f7a4b; }
.badge-shelf { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.rank-badge { display:inline-flex; padding:10px 14px; border-radius:999px; background: linear-gradient(180deg, rgba(255,138,43,0.18), rgba(255,255,255,0.95)); border:1px solid rgba(255,138,43,0.3); font-weight:800; }
.storm-card { position:relative; overflow:hidden; background: linear-gradient(135deg, rgba(28,39,70,0.96), rgba(62,77,119,0.94)); color:#fff; }
.storm-card p, .storm-card h4, .storm-card .eyebrow { color:#fff; }
.storm-card::after {
  content:''; position:absolute; inset:-30% auto auto 65%; width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.16), rgba(0,0,0,0)); filter: blur(2px);
}
.storm-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.storm-note { margin-top:12px; font-weight:700; color:#dbe9ff !important; }
.storm-portal {
  position: fixed; inset: 0; z-index: 999; display:none; align-items:center; justify-content:center; padding: 18px;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.08), rgba(10,17,38,0.86) 40%, rgba(6,8,22,0.94) 100%);
}
.storm-portal.is-open { display:flex; }
.storm-shell {
  width:min(760px, 100%); background: linear-gradient(180deg, rgba(20,27,52,0.98), rgba(37,49,90,0.98)); color:#fff;
  border-radius: 28px; padding: 28px; border:1px solid rgba(255,255,255,0.14); box-shadow: 0 18px 44px rgba(2,8,24,0.45);
  position:relative; overflow:hidden;
}
.storm-shell::before, .storm-shell::after {
  content:''; position:absolute; inset:-20% auto auto -10%; width:120%; height:160%; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.0) 42%, rgba(255,255,255,0.76) 49%, rgba(255,255,255,0) 54%);
  opacity:0; transform: rotate(8deg);
}
.storm-portal.is-open .storm-shell::before { animation: lightningFlash 5.5s infinite; }
.storm-portal.is-open .storm-shell::after { animation: lightningFlash 6.1s infinite 1s; }
@keyframes lightningFlash {
  0%, 7%, 100% { opacity:0; }
  1%, 2% { opacity:0.9; }
  2.5%, 3% { opacity:0.25; }
  4% { opacity: 0.7; }
}
.storm-face { font-size: 4rem; line-height:1; }
.storm-kicker { text-transform:uppercase; letter-spacing:0.12em; font-size:0.78rem; font-weight:800; color:#bbd7ff; }
.storm-layout { display:grid; grid-template-columns: 120px 1fr; gap:20px; align-items:start; }
.storm-launch-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.v158-helper { color:#cddfff; margin-top:14px; }
.cert-id { display:inline-flex; margin-top:12px; padding:10px 14px; background: rgba(37,95,137,0.08); border-radius:999px; font-weight:700; color:#255f89; }
.cert-status-card .button-row { margin-top:16px; }
.small-note { font-size:0.93rem; color:#50728f; }
@media (max-width: 1000px) {
  .learning-path-grid, .mission-grid { grid-template-columns: 1fr; }
  .path-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .path-steps { grid-template-columns: 1fr; }
  .storm-layout { grid-template-columns: 1fr; }
  .profile-stats { grid-template-columns: 1fr; }
}

.mission-item[data-mission-key] {
  cursor: pointer;
}
.mission-item[data-mission-key]:focus {
  outline: 3px solid rgba(244,185,66,0.55);
  outline-offset: 3px;
}
