/* Title screen, field guide, upgrade draft and mission report. */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(circle at 50% 40%, #071a1ecc, #03060ae8 70%);
  backdrop-filter: blur(6px); overflow-y: auto;
  animation: fade-in .25s ease-out;
}
.sheet {
  width: min(100%, 520px); padding: 28px; border-radius: 16px;
  border: 1px solid var(--line-2); background: linear-gradient(180deg, #111d26, #0b141b);
  box-shadow: 0 40px 120px -20px #000, 0 0 0 1px #000;
  animation: rise .3s var(--ease-out);
}
.sheet h2 { font-size: 24px; line-height: 1.2; margin: 10px 0 12px; letter-spacing: -.01em; }
.sheet-actions { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.spacer { flex: 1; }

/* ---------- Title ---------- */
.title-screen { background: radial-gradient(ellipse at 50% 30%, #0b2a2ff2, #04080cfa 65%); }
.title-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; width: min(100%, 440px); }
.title-emblem {
  position: relative; width: 132px; height: 132px; margin-bottom: 10px; display: grid; place-items: center;
  border-radius: 50%; color: var(--cyan);
  background: radial-gradient(circle, #0f3236 0, #071518 62%, transparent 63%);
  box-shadow: 0 0 60px -10px #3ef0d8aa;
}
.title-emblem::before, .title-emblem::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid #3ef0d855;
  animation: ping 3s ease-out infinite;
}
.title-emblem::after { animation-delay: 1.5s; }
.title-emblem .icon { width: 62px; height: 62px; filter: drop-shadow(0 0 10px #3ef0d8); }
.title-heading {
  font: 900 clamp(34px, 9vw, 56px)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff, #8ff6ea); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px #3ef0d833;
}
.title-tag { color: var(--muted); margin-bottom: 18px; }
.title-buttons { display: grid; gap: 10px; width: min(100%, 300px); }
.title-buttons .btn { width: 100%; min-height: 50px; font-size: 15px; }
.title-meta { margin-top: 14px; color: var(--dim); font: 600 11px/1.8 var(--mono); letter-spacing: .08em; }
.title-meta b { color: var(--cyan); font-weight: 700; }

/* ---------- Guide ---------- */
.guide-body { color: var(--muted); line-height: 1.6; display: grid; gap: 12px; min-height: 160px; }
.guide-body strong { color: var(--text); }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.legend-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12px; color: var(--text); }
.legend-item .icon { width: 22px; height: 22px; }
.legend-item small { display: block; color: var(--dim); font-size: 11px; }
.ramp { display: flex; gap: 4px; }
.ramp span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: #091016; border: 1px solid #142029; font: 800 15px/1 var(--mono); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; font-size: 13px; }

/* ---------- Upgrade draft ---------- */
.draft-sheet { width: min(100%, 760px); }
.draft-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.upgrade {
  --r: var(--cyan);
  display: flex; flex-direction: column; gap: 10px; min-height: 190px; padding: 18px 16px; text-align: left;
  border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface);
  transition: transform .15s var(--ease-out), border-color .15s, box-shadow .15s;
  animation: deal .4s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms);
}
.upgrade:hover, .upgrade:focus-visible { transform: translateY(-4px); border-color: var(--r); box-shadow: 0 14px 40px -14px var(--r); }
.upgrade.rare { --r: var(--violet); }
.upgrade.unlock { --r: var(--amber); }
.upgrade .up-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--r); background: color-mix(in srgb, var(--r) 12%, var(--bg-2)); }
.upgrade .up-icon .icon { width: 26px; height: 26px; }
.upgrade strong { font-size: 16px; }
.upgrade p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.upgrade .up-tag { margin-top: auto; font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--r); }
.draft-owned { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.owned { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--mono); padding: 6px 9px; border-radius: 20px; border: 1px solid var(--line-2); color: var(--muted); }
.owned .icon { color: var(--cyan); }
.owned.r-rare .icon { color: var(--violet); }
.owned.r-unlock .icon { color: var(--amber); }
.owned-label { font: 700 10px/26px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.loadout { display: flex; flex-wrap: wrap; gap: 6px; }
.upgrade { position: relative; }

/* ---------- Result ---------- */
.result-sheet.won { border-color: #3ef0d866; box-shadow: 0 40px 120px -20px #000, 0 0 80px -30px #3ef0d8; }
.result-sheet.lost { border-color: #ff5d6c55; }
.result-sheet.lost h2 { color: #ffb3ba; }
.result-text { color: var(--muted); }
.result-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.stat { padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.stat span { display: block; font: 700 9px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.stat strong { display: block; margin-top: 6px; font: 800 20px/1 var(--mono); }
.result-record { margin-top: 14px; color: var(--cyan); font: 600 12px/1.4 var(--mono); }

@media (max-width: 640px) {
  .sheet { padding: 22px 18px; }
  .draft-choices { grid-template-columns: 1fr; }
  .upgrade { min-height: 0; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 4px; padding: 14px; }
  .upgrade .up-icon { grid-row: span 3; }
  .upgrade .up-tag { margin-top: 2px; }
  .result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes deal { from { opacity: 0; transform: translateY(20px) rotate(-2deg); } }
@keyframes ping { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }