/* ── Mission cards ── */
.mission{
  position:relative; border-radius:var(--radius); border:1px solid var(--border); background:var(--card);
  padding:1.2rem; transition:transform .18s ease, box-shadow .18s ease, border-color .2s; overflow:hidden;
}
.mission:hover{transform:translateY(-3px); border-color:var(--border-strong); box-shadow:var(--shadow)}
.mission.locked{opacity:.55}
.mission-top{display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.6rem}
.mission-no{font-family:var(--font-display); font-size:1.6rem; color:var(--gold); line-height:1; opacity:.85}
.mission h4{font-size:1rem; font-weight:700; letter-spacing:.02em}
.mission .en{color:var(--muted); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase}
.mission p{color:#B9C1D1; font-size:.83rem; margin:.55rem 0 .9rem; min-height:3.4em}
.mission-foot{display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap}
.tag{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; font-weight:600;
  padding:.18rem .55rem; border-radius:999px; border:1px solid var(--border);
}
.tag.green{color:var(--primary-lt); background:var(--primary-dim); border-color:rgba(34,197,94,.28)}
.tag.gold{color:var(--gold); background:var(--gold-dim); border-color:rgba(251,191,36,.28)}
.tag.red{color:var(--danger-lt); background:var(--danger-dim); border-color:rgba(248,113,113,.28)}
.tag.blue{color:var(--info); background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.28)}
.rank-badge{
  font-family:var(--font-display); font-size:1.05rem; width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--border-strong); background:rgba(255,255,255,.04);
}
.rank-badge.s{color:var(--gold); border-color:rgba(251,191,36,.5); box-shadow:0 0 18px rgba(251,191,36,.22)}
.rank-badge.a{color:var(--primary-lt)} .rank-badge.b{color:var(--info)} .rank-badge.c{color:var(--muted)}

/* ── Feature tiles ── */
.feature{display:flex; gap:.85rem; padding:1rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--card)}
.feature i, .feature svg{color:var(--primary-lt); flex:0 0 auto; margin-top:.15rem}
.feature h5{font-size:.88rem; margin-bottom:.25rem}
.feature p{color:var(--muted); font-size:.79rem; line-height:1.55}

/* ── Briefing ── */
.briefing{max-width:900px; margin:0 auto; animation:fadeUp .4s ease both}
.briefing-head{padding:1.6rem; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--bg-panel); box-shadow:var(--shadow); margin-bottom:1.25rem}
.briefing-head h2{font-family:var(--font-display); font-size:1.6rem; margin:.25rem 0 .5rem}
.briefing-head p{color:#C2CAD8; font-size:.9rem}
.obj-list{list-style:none; display:grid; gap:.55rem}
.obj-list li{display:flex; align-items:center; gap:.6rem; font-size:.86rem; color:#D3DAE6}
.obj-list li .mark{width:18px; height:18px; border-radius:5px; border:1px solid var(--border-strong); display:grid; place-items:center; flex:0 0 auto; font-size:.65rem; color:var(--primary-lt)}
.keymap{display:grid; gap:.45rem}
.keymap div{display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.84rem; color:#CBD3E1; border-bottom:1px dashed rgba(255,255,255,.07); padding-bottom:.45rem}
kbd{
  font-family:var(--font-mono); font-size:.74rem; padding:.2rem .5rem; border-radius:6px;
  border:1px solid var(--border-strong); background:rgba(255,255,255,.06); color:var(--text); white-space:nowrap;
}
.chips{display:flex; gap:.5rem; flex-wrap:wrap}
.chip{
  border-radius:999px; font-size:.8rem; padding:.42rem 1rem; border:1px solid var(--border);
  background:var(--card); transition:all .18s ease;
}
.chip:hover{background:var(--card-hover)}
.chip[aria-pressed="true"]{border-color:var(--primary-lt); color:#04140A; background:linear-gradient(135deg,#22C55E,#15803D); font-weight:700}
.note{border-radius:var(--radius-sm); border:1px solid rgba(251,191,36,.28); background:var(--gold-dim); color:#F4E3B6; font-size:.82rem; padding:.7rem .9rem}
.row{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.muted{color:var(--muted)}
.hr{border:none; border-top:1px solid var(--border); margin:1.1rem 0}

/* ── Results ── */
.result-hero{text-align:center; padding:1.8rem 1rem; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--bg-panel); box-shadow:var(--shadow)}
.result-hero h2{font-family:var(--font-display); font-size:1.9rem; letter-spacing:.06em}
.result-hero.win h2{color:var(--primary-lt)} .result-hero.lose h2{color:var(--danger-lt)}
.result-hero p{color:var(--muted); margin-top:.5rem}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.7rem; margin-top:1.1rem}
.stat{border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--card); padding:.8rem}
.stat span{display:block; color:var(--muted); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase}
.stat b{font-family:var(--font-display); font-size:1.3rem; color:var(--text)}
.rank-block{display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.25rem}
.rank-block .rank-badge{width:66px; height:66px; font-size:1.9rem; border-radius:16px}

/* ── Toast ── */
.toast-wrap{position:fixed; bottom:1.25rem; inset-inline-end:1.25rem; z-index:80; display:flex; flex-direction:column; gap:.5rem; max-width:min(92vw,360px)}
.toast{
  padding:.7rem 1rem; border-radius:var(--radius-sm); font-size:.83rem; border:1px solid var(--border-strong);
  background:rgba(13,21,36,.95); box-shadow:var(--shadow); animation:fadeUp .28s ease both;
}
.toast.success{border-color:rgba(34,197,94,.4); color:#C9F5D8}
.toast.error{border-color:rgba(248,113,113,.4); color:#FBD5D5}
.toast.warn{border-color:rgba(251,191,36,.4); color:#F7E6BC}
.no-icons [data-lucide]{display:none}
.no-icons .icofallback{display:inline !important}
.icofallback{display:none; font-size:.7rem; letter-spacing:.06em; color:inherit}
footer.site{margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--border); color:var(--muted); font-size:.76rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap; height:auto}
}
@media (max-width:640px){
  .shell{padding:0 1rem 2rem}
  .hero-copy{padding:1.35rem}
  .grid-2,.grid-3{grid-template-columns:1fr}
}