/* Codex (hangar tab + scripts/enemy-sprites.html): every enemy and boss, unlocked
   in two stages. s0 not met (silhouette), s1 seen, s2 defeated (full colour + file).
   --cx is the entry's own colour, set inline. Markup: js/game/codex-view.js. */

.codex{--cx:var(--aqua);container-type:inline-size}
/* game.css makes every canvas a full-stage layer; codex pictures sit in the flow */
.codex canvas{position:static;inset:auto;height:auto;touch-action:auto;cursor:inherit}

/* Progress header */
.cx-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(14,26,36,.75),rgba(14,26,36,.4))}
.cx-count{font-family:var(--f-mono);font-size:13px;color:var(--muted);display:flex;align-items:baseline;gap:2px;white-space:nowrap}
.cx-count b{font-family:var(--f-display);font-weight:300;font-size:30px;line-height:1;color:var(--ink);margin-right:2px}
.cx-count span{font-family:var(--f-mark);font-size:9px;letter-spacing:.24em;text-transform:uppercase;margin-left:10px;color:var(--muted)}
.cx-meta{min-width:0;font-size:12px;color:var(--ink-2)}
.cx-meta .bar{margin-top:7px}
.cx-pct{font-family:var(--f-mono);font-size:15px;color:var(--gold-hi)}
.cx-hint{margin:10px 2px 4px;font-size:12.5px;color:var(--muted)}

/* Grid */
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.cx-grid.bosses{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.cx-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:20px 8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(14,26,36,.5);color:var(--ink);font:inherit;cursor:pointer;text-align:center;
  transition:border-color .2s,background .2s,transform .2s var(--ease-out-expo)}
.cx-card:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.cx-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cx-card canvas{width:100%;max-width:96px;aspect-ratio:1;object-fit:contain;display:block;margin-bottom:6px}
.cx-card.boss canvas{max-width:140px}
.cx-card b{font-size:12.5px;font-weight:600;line-height:1.25}
.cx-card small{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.cx-no{position:absolute;left:8px;top:6px;font-family:var(--f-mono);font-size:10px;color:var(--muted)}
.cx-new{position:absolute;right:6px;top:6px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;color:var(--on-gold);background:var(--gold);border-radius:999px;padding:1px 6px;box-shadow:0 0 12px rgba(212,166,90,.45)}

/* Not met: dark silhouette, muted text */
.cx-card.s0{background:rgba(8,14,20,.55);border-style:dashed}
.cx-card.s0 b{color:var(--muted);letter-spacing:.2em}
/* Seen: full picture, still a bit subdued */
.cx-card.s1 canvas{opacity:.8;filter:saturate(.75)}
/* Defeated: the entry's colour lights the card */
.cx-card.s2{border-color:color-mix(in srgb,var(--cx) 38%,transparent);background:radial-gradient(120% 80% at 50% 30%,color-mix(in srgb,var(--cx) 12%,transparent),rgba(14,26,36,.5) 70%)}
.cx-card.s2:hover{border-color:color-mix(in srgb,var(--cx) 70%,transparent)}

/* Detail */
.cx-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;padding:7px 12px 7px 8px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ink-2);font-family:var(--f-mark);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.cx-back:hover{border-color:var(--gold);color:var(--gold-hi)}
.cx-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cx-back svg{width:12px;height:12px}
.cx-body{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:18px;align-items:start;padding:16px;border:1px solid var(--line);border-radius:4px;background:rgba(14,26,36,.5)}
.cx-detail.s2 .cx-body{border-color:color-mix(in srgb,var(--cx) 35%,transparent)}
.cx-hero{border-radius:10px;background:radial-gradient(closest-side,color-mix(in srgb,var(--cx) 16%,transparent),transparent),rgba(5,8,13,.5);border:1px solid var(--line);display:grid;place-items:center;padding:10px}
.cx-detail.s0 .cx-hero{background:rgba(5,8,13,.5)}
.cx-hero canvas{width:100%;max-height:220px;object-fit:contain;display:block}
.cx-k{font-family:var(--f-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cx-info h3{margin:4px 0 8px;font-family:var(--f-display);font-weight:300;font-size:24px;line-height:1.15}
.cx-stage{display:inline-block;font-family:var(--f-mark);font-size:9px;letter-spacing:.22em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted)}
.cx-stage.s1{color:var(--ink-2)}
.cx-stage.s2{color:var(--cx);border-color:color-mix(in srgb,var(--cx) 50%,transparent)}
.cx-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:14px 0 4px}
.cx-stats div{padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:rgba(5,8,13,.35)}
.cx-stats dt{font-family:var(--f-mark);font-size:8.5px;letter-spacing:.16em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;color:var(--muted)}
.cx-stats dd{margin:3px 0 0;font-family:var(--f-mono);font-size:13px;color:var(--ink)}
.cx-stats.locked dd{color:var(--muted);filter:blur(2.5px);user-select:none}
.cx-info h5{margin:14px 0 4px;font-family:var(--f-mark);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hi);font-weight:400}
.cx-info p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.cx-info ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.cx-lock{margin-top:12px !important;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:6px;color:var(--muted) !important}

/* Sized by the space the Codex has (the hangar column is narrower than the dev page) */
@container (max-width:620px){
  .cx-body{grid-template-columns:1fr;gap:14px}
  .cx-hero canvas{max-height:170px;width:auto;max-width:100%}
  .cx-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container (max-width:460px){
  .cx-head{grid-template-columns:auto minmax(0,1fr);gap:10px 14px}
  .cx-pct,.cx-count span{display:none}
  .cx-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .cx-grid.bosses{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .cx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.cx-card{transition:none}.cx-card:hover{transform:none}}

/* Inside the hangar screen: room between the group headings and their grids */
.codex .wgroup{margin:20px 2px 10px}
.codex .cx-hint{margin-bottom:0}
/* 17 enemies: six across on wide screens, so the grid ends 6 + 6 + 5 instead of leaving one card alone */
@media (min-width:861px){.codex .cx-grid:not(.bosses){grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---------- Achievements (achievements.js): medals and feats ---------- */
.cx-medal{width:18px;height:18px}
.cx-medal path{fill:#6d3fa8}
.cx-medal circle:nth-of-type(1){fill:#2a3540}
.cx-medal circle:nth-of-type(2){fill:rgba(5,8,13,.55)}
.cx-medal.t1 circle:nth-of-type(1){fill:#c98a52}
.cx-medal.t2 circle:nth-of-type(1){fill:#cdd6dc}
.cx-medal.t3 circle:nth-of-type(1){fill:#f0c35a}
.cx-medal.t1 path{fill:#8a4f2a}.cx-medal.t2 path{fill:#5a6f80}.cx-medal.t3 path{fill:#b0302a}
/* a card's medal: top left, beside its number */
.cx-medals{position:absolute;left:34px;top:4px;display:flex;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}

.cx-tabs{display:flex;gap:6px;margin:0 0 12px}
.cx-tabs button{position:relative;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ink-2);font-family:var(--f-mark);font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.cx-tabs button small{font-family:var(--f-mono);font-size:10px;letter-spacing:0;color:var(--muted)}
.cx-tabs button[aria-selected="true"]{border-color:var(--gold);color:var(--gold-hi);background:rgba(212,166,90,.08)}
.cx-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cx-tabs .cx-new{position:static}

.cx-feats{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;margin:12px 0 0;padding:0;list-style:none}
.cx-feat{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(14,26,36,.5)}
.cx-feat .cx-medal{width:30px;height:30px}
.cx-feat:not(.got){opacity:.82}
.cx-feat:not(.got) .cx-medal{opacity:.5}
.cx-feat.got{border-color:rgba(240,195,90,.45);background:linear-gradient(100deg,rgba(212,166,90,.12),rgba(14,26,36,.5) 60%)}
.cx-feat b{font-size:13.5px;font-weight:600;color:var(--ink)}
.cx-feat .cx-new{position:static;margin-left:8px;vertical-align:1px}
.cx-feat p{margin:3px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.cx-feat small{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.cx-fbar{height:3px;margin:7px 0 4px;border-radius:2px;background:rgba(196,222,232,.1);overflow:hidden}
.cx-fbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi))}
.cx-fpay{display:grid;justify-items:end;gap:2px;font-family:var(--f-mono);font-size:12px;color:var(--gold-hi);white-space:nowrap}
.cx-fpay em{font-style:normal;font-size:10.5px;color:#d9b4ff}

.cx-medaltrack{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 4px}
.cx-medaltrack span{display:grid;justify-items:center;gap:2px;padding:10px 6px;border:1px solid var(--line);border-radius:10px;text-align:center}
.cx-medaltrack span.on{border-color:rgba(240,195,90,.4)}
.cx-medaltrack .cx-medal{width:26px;height:26px}
.cx-medaltrack b{font-size:12px;font-weight:600}
.cx-medaltrack small{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.cx-medaltrack p{grid-column:1/-1;margin:2px 0 0;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2)}