/* campaign.css — Campaign mode (Great Auk Reach) styles for the v2 shell.
   Ported from v1 assets/style.css (.cmp-* block) with the same visual identity:
   cyan rescue arc, red hunt (Part II flips --cyan to #ff5277 via .cmp-hunt).
   v2 additions live at the bottom: the canvas scene styles (.cmp-scene-cv,
   scenes are animated parallax now) and the terminal chrome (.v2term). */

/* the "press SPACE…" gate — pinned to the bottom of the screen frame */
.gatebar { position:absolute; left:0; right:0; bottom:16px; display:flex; justify-content:center; gap:16px; padding:0 18px; }

/* ── Campaign mode (Great Auk Reach) ──────────────────────────────────────── */
.cmp { display:flex; flex-direction:column; min-height:calc(min(900px,100vh - 120px) - 60px); }
.cmp-hud {
  display:flex; align-items:center; gap:12px; border:2px solid var(--cyan); border-radius:6px;
  padding:9px 14px; margin-bottom:16px; background:#0b1420; font-family:var(--pixel); font-size:12px;
}
.cmp-hud .cmp-title { color:var(--ylw); }
.cmp-hud .cmp-sub { color:var(--mag); margin-left:auto; font-size:11px; }
.cmp-x { font-family:var(--pixel); font-size:10px; color:var(--cyan); background:transparent;
  border:1px solid var(--cyan); border-radius:4px; padding:5px 8px; cursor:pointer; }
.cmp-x:hover { background:rgba(52,214,230,.15); }
.cmp-snd { font-size:14px; line-height:1; color:var(--cyan); background:transparent;
  border:1px solid var(--cyan); border-radius:4px; padding:4px 8px; cursor:pointer; }
.cmp-snd:hover { background:rgba(52,214,230,.15); }
.cmp-snd.off { border-color:var(--dim); filter:grayscale(1) opacity(.65); }
.rot { color:var(--red); text-shadow:0 0 8px rgba(255,77,86,.5); }

/* choose your fighter */
.cmp-choose { display:flex; flex-direction:column; gap:12px; }
.cmp-lede { font-family:var(--mono); font-size:19px; line-height:1.5; color:var(--ink); text-align:center; max-width:720px; margin:0 auto; text-wrap:balance; }
.cmp-lede .rot { color:#c47b80; text-shadow:none; }   /* softened on the pre-game screen */
.cmp-champ-hint { font-family:var(--mono); color:var(--ylw); font-size:15px; text-align:center; }
/* fighter-select progress legend + per-distro status */
.cmp-legend { font-family:var(--mono); font-size:14px; color:var(--dim); text-align:center; display:flex; gap:6px; justify-content:center; flex-wrap:wrap; align-items:center; }
.cmp-legend > span { margin-left:10px; }
.cmp-star-prog { color:var(--dim); }       /* gray star = in progress */
.cmp-star-done { color:var(--grn); }        /* green star = campaign complete */
.cmp-fstat { display:block; font-size:12px; margin-top:4px; font-family:var(--pixel); letter-spacing:.5px; }
.cmp-fstat.prog   { color:var(--dim); }
.cmp-fstat.done   { color:var(--grn); }
.cmp-fstat.rebuild { color:var(--red); }
.cmp-fcard.is-done { border-color:#2a5a3a; }
.cmp-fcard.is-cooldown { border-color:var(--red); background:#1c0a0e; }
.cmp-fcard.is-cooldown .cmp-fname { color:var(--fac, #ff9aa3); }   /* the fighter's own brand accent */
.cmp-fcard.is-cooldown .cmp-ftag { color:#a86a70; }
.cmp-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.cmp-fcard {
  position:relative; text-align:left; background:#0c1622; border:2px solid #1c2c3a; border-radius:7px;
  border-left:4px solid var(--fac, #1c2c3a);   /* brand-accent edge swatch */
  padding:10px 11px; cursor:pointer; color:var(--ink); font-family:var(--mono); transition:border-color .1s, transform .05s;
}
.cmp-fcard:hover { border-color:var(--cyan); }
.cmp-fcard.sel { border-color:var(--ylw); box-shadow:0 0 0 1px var(--ylw) inset; }
.cmp-fcard.is-champ { border-color:#3a5a2a; }
.cmp-fname { display:block; font-size:18px; color:#eaf0f4; line-height:1.1; }
.cmp-ftag { display:block; font-size:14px; color:var(--dim); margin-top:3px; line-height:1.15; }
.cmp-star, .cmp-star-prog, .cmp-star-done { position:absolute; top:6px; right:8px; font-size:14px; }
.cmp-star { color:var(--ylw); }

.cmp-detail { border:2px solid var(--ylw); border-radius:8px; padding:14px 16px; background:#0b1622; }
/* header: title/tagline on the left, prev/next fighter arrows on the right */
.cmp-detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cmp-detail-title { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; min-width:0; }
.cmp-detail-nav { display:flex; gap:8px; flex:0 0 auto; }
.cmp-nav-arrow { font-family:var(--mono); font-size:18px; line-height:1; color:var(--cyan);
  background:#0c1622; border:2px solid #24506a; border-radius:8px; padding:7px 13px; cursor:pointer;
  min-width:44px; transition:border-color .1s, color .1s; }
.cmp-nav-arrow:hover, .cmp-nav-arrow:focus-visible { border-color:var(--cyan); color:#fff; outline:none; }
.cmp-nav-arrow:active { transform:translateY(1px); }
.cmp-detail-name { font-family:var(--pixel); font-size:16px; color:var(--ylw); }
.cmp-detail-tag { font-family:var(--mono); font-size:16px; color:var(--dim); }
.cmp-hero { display:flex; align-items:center; gap:20px; margin-bottom:14px; }
.cmp-peng { flex:0 0 auto; width:160px; height:160px; image-rendering:pixelated;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
  align-self:flex-end; margin-top:-32px; }  /* +25% size, bottom edge kept in place — grows upward */
.cmp-stats { flex:1 1 auto; display:grid; grid-template-columns:1fr 1fr; gap:8px 28px; }
.cmp-stat { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:16px; }
.cmp-stat-k { min-width:132px; color:var(--cyan); }
.cmp-stat-bar { flex:1; max-width:150px; height:9px; background:#10202c; border-radius:3px; overflow:hidden; }
.cmp-stat-bar > span { display:block; height:100%; background:linear-gradient(90deg,var(--grn),var(--cyan)); }
.cmp-stat-n { width:18px; text-align:right; color:var(--ink); }
.cmp-stat.perk .cmp-stat-n { color:var(--ylw); font-weight:700; }   /* perk-active stat stands out */
.cmp-perk-star { color:var(--ylw); font-weight:700; margin-left:3px; }
.cmp-perk-note { font-family:var(--mono); font-size:13px; color:var(--ink); line-height:1.5;
  border-top:1px solid #18313f; margin:4px 0 10px; padding-top:10px; }
.cmp-perk-note b { color:var(--cyan); }
.cmp-perk-note.dim { color:var(--dim); }
.cmp-perk-row { min-height:1.5em; }            /* always-3-rows: keeps the panel a fixed height */
.cmp-perk-row.empty { visibility:hidden; }     /* unused slot reserves space, shows nothing */
.cmp-flaw-x { color:var(--red); font-weight:700; margin-left:3px; }
.cmp-stat.flaw .cmp-stat-n { color:var(--red); font-weight:700; }
.cmp-flaw-note { font-family:var(--mono); font-size:13px; color:var(--red); min-height:1.5em; margin-bottom:6px; }
.cmp-flaw-note b { color:#ff8088; }
.cmp-flaw-note.empty { visibility:hidden; }
.cmp-flaw-eff { color:var(--dim); }
.cmp-flaw-line { font-family:var(--mono); font-size:12.5px; color:var(--red); margin:2px 0 8px; }
.cmp-resume-note { text-align:center; font-family:var(--mono); font-size:13px; color:var(--grn); margin-bottom:8px; }
/* detail-box footer: perks on the left, the resume-note + CONTINUE button anchored bottom-right
   (fills the box's dead space and keeps the action attached to the selected fighter). */
.cmp-detail-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; }
.cmp-detail-perks { flex:1 1 320px; min-width:240px; }
.cmp-detail-act { flex:0 0 auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.cmp-detail-act .cmp-resume-note { text-align:right; margin-bottom:6px; }
.cmp-detail-act .cmp-begin { font-size:12px; padding:11px 22px; }
@media (max-width:560px){ .cmp-detail-act { align-items:stretch; text-align:center; width:100%; } .cmp-detail-act .cmp-resume-note { text-align:center; } .cmp-detail-act .cmp-begin { width:100%; } }
/* nav row (Weekly/Reach/Hall/What's New), centered, same prominent yellow/black .df style */
.cmp-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin:10px 0 12px; }
.cmp-act { font-family:var(--pixel); font-size:11px; padding:9px 13px; letter-spacing:1px; }
/* Hardcore toggle: ominous dark-red when off, bright red when armed */
.cmp-act.cmp-hc { background:#2a1116; color:#ff8088; border-bottom-color:#7a1b25; box-shadow:none; }
.cmp-act.cmp-hc:hover { filter:none; background:#3a141b; }
.cmp-act.cmp-hc.on { background:var(--red); color:#1a0306; border-bottom-color:#8a1018; box-shadow:0 0 16px rgba(255,77,86,.55); }
/* BEGIN/CONTINUE — the primary action, on its own centered line below the nav (appears on select) */
.cmp-begin-row { text-align:center; margin:0 0 16px; min-height:1px; }
.cmp-begin { font-family:var(--pixel); font-size:13px; padding:12px 26px; letter-spacing:1px; }
/* What's New (registered-player changelog) */
.cmp-log-wrap { max-width:640px; margin:0 auto; padding:8px 14px; }
.cmp-log-lede { font-family:var(--mono); font-size:18px; color:var(--dim); text-align:center; margin:4px 0 18px; }
.cmp-log-entry { margin-bottom:20px; }
.cmp-log-date { font-family:var(--pixel); font-size:12px; color:var(--cyan); letter-spacing:1px; margin-bottom:8px; }
.cmp-log-items { margin:0; padding-left:20px; }
.cmp-log-items li { font-family:var(--mono); font-size:18px; color:var(--ink); line-height:1.5; margin:6px 0; }

/* stage: scene + dialogue */
.cmp-stagewrap { display:flex; flex-direction:column; gap:14px; flex:1; }
.cmp-scene { border:2px solid #1c3a48; border-radius:8px; overflow:hidden; background:#07131c; }
.cmp-scene-svg { display:block; width:100%; height:clamp(150px,30vh,260px); }
.cmp-text {
  border:2px solid var(--cyan); border-radius:8px; background:#0a131d; padding:16px 18px;
  font-family:var(--mono); font-size:20px; line-height:1.55; min-height:120px; cursor:pointer;
}
.cmp-tline { margin:0 0 10px; }
.cmp-tline:last-of-type { margin-bottom:0; }
.cmp-cont { font-family:var(--pixel); font-size:12px; color:var(--ylw); margin-top:12px; animation:cmpblink 1s steps(2) infinite; }
@keyframes cmpblink { 50% { opacity:.25; } }

.cmp-choices { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.cmp-choice { text-align:left; font-family:var(--mono); font-size:19px; }
.cmp-choice.focus { border-color:var(--ylw); box-shadow:0 0 0 2px var(--ylw) inset; }
.cmp-choice-k { display:inline-block; min-width:24px; color:var(--cyan); font-weight:bold; }

/* terminal */
.cmp-term-wrap { display:flex; flex-direction:column; gap:10px; flex:1; }
.cmp-integrity { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:15px; }
.cmp-integ-label { color:var(--cyan); letter-spacing:1px; }
.cmp-integ-bar { flex:1; height:12px; background:#10202c; border:1px solid #1c2c3a; border-radius:4px; overflow:hidden; }
.cmp-integ-bar > span { display:block; height:100%; background:var(--grn); transition:width .25s; }
.cmp-integ-bar > span.mid { background:var(--ylw); }
.cmp-integ-bar > span.low { background:var(--red); }
.cmp-integrity.flash { animation:cmpflash .3s; }
@keyframes cmpflash { 0%,100%{ } 50%{ filter:brightness(1.8); } }
.cmp-perks { font-family:var(--mono); font-size:14px; color:var(--ylw); }
.cmp-brief { font-family:var(--mono); font-size:16px; color:var(--ink); background:#0c1622; border-left:3px solid var(--cyan); padding:8px 12px; }

.cmp-term {
  background:#060d12; border:2px solid #1c3a48; border-radius:8px; padding:12px 14px;
  font-family:var(--mono); font-size:18px; color:var(--grn); min-height:200px; max-height:42vh;
  overflow-y:auto; line-height:1.4;
}
.cmp-outline { white-space:pre-wrap; word-break:break-word; }
.cmp-echo { color:#cfeede; }
.cmp-err { color:var(--red); }
.cmp-ok { color:var(--cyan); }
.cmp-dim { color:var(--dim); }
.cmp-inline { position:relative; display:flex; align-items:center; flex-wrap:wrap; margin-top:4px; }
.cmp-prompt { color:var(--cyan); white-space:pre; }
.cmp-typed { color:#dfffe8; white-space:pre; }
.cmp-cursor { color:#06121a; background:var(--grn); white-space:pre; animation:cmpblink 1s steps(2) infinite; }
.cmp-input { position:absolute; inset:0; width:100%; opacity:0; background:transparent; border:0;
  color:transparent; font:inherit; caret-color:transparent; }

.cmp-hints { display:flex; flex-direction:column; gap:6px; }
.cmp-hint { font-family:var(--mono); font-size:16px; color:var(--ylw); }
.cmp-backup { align-self:flex-start; font-family:var(--mono); font-size:14px; color:var(--cyan);
  background:transparent; border:1px solid var(--cyan); border-radius:5px; padding:5px 10px; cursor:pointer; }
.cmp-backup:disabled { color:var(--dim); border-color:#2a3340; cursor:default; }

/* mobile command palette */
.cmp-palette { display:flex; flex-wrap:wrap; gap:7px; }
.cmp-chip { font-family:var(--mono); font-size:16px; color:var(--ink); background:#0e1f2b;
  border:1px solid #25404f; border-radius:6px; padding:7px 11px; cursor:pointer; }
.cmp-chip:hover { border-color:var(--cyan); }
.cmp-chip.cmp-run { color:#06121a; background:var(--grn); border-color:var(--grn); font-weight:bold; }

/* stage clear */
.cmp-clear { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding-top:6px; }
.cmp-clear-art { position:relative; width:100%; border:2px solid #1c3a48; border-radius:8px; overflow:hidden; }
.cmp-revive { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--pixel); font-size:clamp(16px,4vw,26px); color:var(--grn); text-shadow:0 0 14px var(--grn); }
/* hunt clears (11+): a "STAGE N COMPLETED!" banner over the mesh, larger than the RANK (30px) below */
.cmp-revive.cmp-done { font-size:clamp(22px,6vw,40px); color:var(--cyan); text-shadow:0 0 16px var(--cyan); text-align:center; padding:0 12px; }
.cmp-grade { font-family:var(--pixel); font-size:30px; }
.cmp-grade.grade-A { color:var(--cyan); text-shadow:0 0 14px var(--cyan); }
.cmp-grade.grade-B { color:var(--grn); }
.cmp-grade.grade-C { color:var(--ylw); }
.cmp-grade.grade-D { color:var(--dim); }
.cmp-clear-title { font-family:var(--pixel); font-size:18px; color:var(--ylw); }
.cmp-clear-line { font-family:var(--mono); font-size:19px; color:var(--ink); max-width:560px; }
.cmp-clear-stats { font-family:var(--mono); font-size:16px; color:var(--dim); }
.cmp-slice-note { font-family:var(--mono); font-size:16px; color:var(--cyan); border:1px dashed #2a4a3a;
  border-radius:6px; padding:8px 12px; margin-top:4px; }
.cmp-clear-btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

@media(max-width:600px){
  .cmp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cmp-stats { grid-template-columns:1fr; }
  /* mobile: sprite stays LEFT at full desktop size; the bar graphics go and
     each row is just label + number, so nothing gets crushed (owner) */
  .cmp-hero { gap:14px; align-items:center; margin-bottom:-10px; }  /* reclaim the space the lifted sprite leaves below */
  .cmp-peng { width:160px; height:160px; margin-top:0; position:relative; top:-20px; }   /* +25%; lifted 20px (owner) */
  .cmp-stat-bar { display:none; }
  .cmp-stat { justify-content:space-between; }
  .cmp-stat-k { min-width:0; }
  .cmp-stats { gap:0; }          /* rows tight beside the sprite (owner) */
  .cmp-stat { line-height:1.15; padding:1.5px 0; }
  .cmp-text { font-size:18px; }
  .cmp-term { font-size:17px; max-height:38vh; }
  .cmp-lede { font-size:17px; }
  .cmp-hud { font-size:10px; gap:8px; padding:8px 11px; }
  .cmp-hud .cmp-sub { font-size:9px; }
  .cmp-x { font-size:9px; padding:4px 6px; }
  .cmp-snd { font-size:12px; padding:3px 6px; }
}

/* ── Campaign: Rot voice + world map ──────────────────────────────────────── */
.cmp-rot { color:#ff5a63; text-shadow:1px 0 rgba(0,224,208,.6), -1px 0 rgba(255,42,122,.6); letter-spacing:.4px; }
.cmp-tline.cmp-rot { font-style:italic; }
.cmp-outline.cmp-rot { font-style:italic; }

.cmp-map { display:flex; flex-direction:column; gap:14px; }
.cmp-map-lede { font-family:var(--mono); font-size:18px; color:var(--ink); text-align:center; max-width:660px; margin:0 auto; }
.cmp-mapgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cmp-mapnode { display:flex; flex-direction:column; gap:4px; text-align:left; background:#0c1622;
  border:2px solid #1c2c3a; border-radius:8px; padding:12px 14px; color:var(--ink); font-family:var(--mono); cursor:pointer; }
.cmp-mapnode .cmp-mapnum { font-family:var(--pixel); font-size:12px; color:var(--cyan); }
.cmp-mapnode .cmp-mapname { font-size:19px; color:#eaf0f4; }
.cmp-mapnode .cmp-mapstatus { font-size:15px; color:var(--dim); }
.cmp-mapnode.done { border-color:#2a5a38; }
.cmp-mapnode.done .cmp-mapstatus { color:var(--grn); }
.cmp-mapnode.next { border-color:var(--ylw); box-shadow:0 0 0 1px var(--ylw) inset; }
.cmp-mapnode.next .cmp-mapstatus { color:var(--ylw); }
.cmp-mapnode.locked { opacity:.5; cursor:default; }
.cmp-mapnode:not([disabled]):hover { border-color:var(--cyan); }
.cmp-map-foot { text-align:center; margin-top:4px; }
@media(max-width:600px){ .cmp-mapgrid{ grid-template-columns:1fr; } .cmp-map-lede{ font-size:16px; } }

/* ── Campaign: progress screen (reclaimed list + next stage) ───────────────── */
.cmp-reclaimed { width:100%; max-width:520px; margin:8px auto 0; }
.cmp-reclaimed-h { font-family:var(--pixel); font-size:10px; color:var(--cyan); letter-spacing:1px; margin-bottom:6px; text-align:left; }
.cmp-rec { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:16px; padding:5px 4px; border-bottom:1px solid #18222e; }
/* reclaimed rows double as a replay level-select (rendered as <button>) */
button.cmp-rec { width:100%; background:none; border:none; border-bottom:1px solid #18222e; border-radius:4px;
  cursor:pointer; text-align:left; transition:background .12s; }
button.cmp-rec:hover, button.cmp-rec:focus-visible { background:rgba(43,212,106,.10); outline:none; }
button.cmp-rec:hover .cmp-rec-replay, button.cmp-rec:focus-visible .cmp-rec-replay { opacity:1; }
.cmp-rec-n { font-family:var(--pixel); font-size:11px; color:var(--cyan); width:18px; }
.cmp-rec-name { flex:1; text-align:left; color:#eaf0f4; }
.cmp-rec-replay { font-family:var(--pixel); font-size:9px; color:var(--grn); letter-spacing:.5px; opacity:.35; transition:opacity .12s; }
.cmp-rec-grade { font-size:14px; }
.cmp-rec-grade.grade-A{ color:var(--cyan); } .cmp-rec-grade.grade-B{ color:var(--grn); }
.cmp-rec-grade.grade-C{ color:var(--ylw); } .cmp-rec-grade.grade-D{ color:var(--dim); }
.cmp-next { width:100%; max-width:520px; margin:16px auto 0; border:2px solid var(--ylw); border-radius:8px;
  padding:12px 16px; display:flex; flex-direction:column; gap:4px; box-shadow:0 0 18px rgba(255,210,63,.15); }
.cmp-next-label { font-family:var(--pixel); font-size:11px; color:var(--ylw); letter-spacing:2px; }
.cmp-next-name { font-family:var(--mono); font-size:21px; color:#fff; }
.cmp-next-stat { font-family:var(--mono); font-size:14px; color:var(--cyan); opacity:.9; }
.cmp-next-stat:empty { display:none; }

/* ── Campaign: end-of-content "more coming" CTA ───────────────────────────── */
.cmp-comingsoon { width:100%; max-width:540px; margin:16px auto 0; border:2px solid var(--cyan);
  border-radius:8px; padding:16px; text-align:center; background:rgba(52,214,230,.06); }
.cs-title { font-family:var(--pixel); font-size:13px; color:var(--cyan); letter-spacing:2px; margin-bottom:8px; }
.cs-body { font-family:var(--mono); font-size:17px; color:var(--ink); line-height:1.5; margin-bottom:12px; }
a.df.cs-sub { display:inline-block; text-decoration:none; font-family:var(--pixel); font-size:11px;
  color:var(--bg); background:var(--ylw); border:none; border-bottom:4px solid #b8930a;
  padding:13px 20px; border-radius:5px; letter-spacing:1px; }
a.df.cs-sub:hover { filter:brightness(1.1); }

/* ── Campaign: the hunt email gate + permadeath markers (Batch 4) ──────────── */
.cmp-gate { width:100%; max-width:100%; margin:8px auto 0; border:2px solid var(--mag);
  border-radius:8px; padding:34px 44px; background:rgba(224,86,200,.06); text-align:center; }
.cmp-gate-lede { font-family:var(--mono); font-size:27px; color:var(--ink); line-height:1.55; margin:0 0 28px; }
.cmp-gate-lede.rot { color:var(--red); }
.cmp-gate-why { font-family:var(--mono); font-size:22px; color:var(--dim); line-height:1.7; margin:0 0 22px; }
.cmp-gate-why:last-of-type { margin-bottom:28px; }
.cmp-gate-why b { color:var(--ink); }
.cmp-gate-msg { font-family:var(--mono); font-size:20px; color:var(--ylw); line-height:1.5; margin:0 0 18px; }
.cmp-gate-sent { font-family:var(--mono); font-size:20px; color:var(--grn); line-height:1.6; margin:0 0 18px; }
.cmp-gate-form { display:flex; flex-direction:column; gap:16px; align-items:stretch; }
.cmp-gate-in { font-family:var(--mono); font-size:23px; color:var(--ink); background:var(--bg);
  border:2px solid var(--dim); border-radius:5px; padding:16px; text-align:center; }
.cmp-gate-in:focus { outline:none; border-color:var(--cyan); }
.cmp-gate-in::placeholder { color:#5a6472; }
.cmp-gate-in.code { letter-spacing:8px; font-size:30px; }
.cmp-gate-optin { display:flex; gap:11px; align-items:flex-start; text-align:left;
  font-family:var(--mono); font-size:18px; color:var(--dim); line-height:1.6; cursor:pointer; padding:4px 2px 0; }
.cmp-gate-optin input { margin-top:5px; width:19px; height:19px; accent-color:var(--cyan); cursor:pointer; flex:0 0 auto; }
button.df.cmp-gate-go { font-family:var(--pixel); font-size:14px; letter-spacing:1px; padding:17px 18px; }
.cmp-gate-link { background:none; border:none; color:var(--dim); font-family:var(--mono); font-size:17px;
  text-decoration:underline; cursor:pointer; padding:6px; }
/* mobile: scale the gate text down so big copy doesn't overflow narrow screens */
@media(max-width:560px){
  .cmp-gate { padding:22px 16px; }
  .cmp-gate-lede { font-size:21px; }
  .cmp-gate-why { font-size:17px; }
  .cmp-gate-msg, .cmp-gate-sent { font-size:16px; }
  .cmp-gate-in { font-size:19px; }
  .cmp-gate-in.code { font-size:24px; }
  .cmp-gate-optin { font-size:15px; }
}
.cmp-gate-link:hover { color:var(--cyan); }
/* "play without an account" — secondary, set apart from the primary token button */
.cmp-gate-skip { display:block; width:100%; margin-top:10px; padding-top:14px; border-top:1px solid #2a3340; font-size:18px; }
.cmp-gate-skipnote { font-family:var(--mono); font-size:15px; color:var(--dim); line-height:1.6; margin-top:6px; text-align:center; }
@media(max-width:560px){ .cmp-gate-skip { font-size:16px; } .cmp-gate-skipnote { font-size:13px; } }
/* fighter-select permadeath markers */
.cmp-killed { color:var(--red); margin-right:3px; }
.cmp-won { color:var(--grn); margin-right:3px; }
.cmp-fcard.is-killed { opacity:.5; border-color:var(--red); }
.cmp-fcard.is-killed .cmp-fname { text-decoration:line-through; }
button.df.cmp-begin[disabled] { opacity:.5; cursor:not-allowed; filter:grayscale(.6); }

/* ── Part II: the hunt wears red (enemy territory) ───────────────────────────
   The campaign's cyan accent is redefined to red across hunt + boss screens, so the
   whole inner UI shifts colour without editing every rule. Success stays green. */
.cmp-hunt { --cyan:#ff5277; }
.cmp-hunt .cmp-ok { color:var(--grn); }                 /* keep success clearly positive, not alarm-red */
.cmp-hunt .cmp-scene { border-color:#5a1024; background:#0a0509; }
.cmp-hunt .cmp-brief { background:#1a0a10; }
/* the Part II chapter card */
.cmp-chapter { width:100%; max-width:560px; margin:6px auto 0; text-align:center; }
.cmp-chapter-scene { border:2px solid var(--red); border-radius:8px; overflow:hidden; opacity:.92;
  box-shadow:0 0 28px rgba(200,31,74,.4); }
.cmp-chapter-scene .cmp-scene-svg { height:clamp(120px,24vh,190px); }
.cmp-chapter-kicker { font-family:var(--pixel); font-size:12px; letter-spacing:7px; color:var(--red); margin-top:16px; }
.cmp-chapter-title { font-family:var(--pixel); font-size:clamp(26px,7vw,46px); color:var(--red); letter-spacing:3px;
  margin-top:8px; text-shadow:0 0 18px rgba(255,82,119,.7), 0 0 42px rgba(200,31,74,.5); }
.cmp-chapter-sub { font-family:var(--mono); font-size:17px; color:var(--ink); line-height:1.5;
  margin:14px auto 0; max-width:480px; }
/* boss countdown timer */
.cmp-timer { font-family:var(--pixel); font-size:14px; color:var(--ylw); letter-spacing:1px; margin:2px 0 6px; }
.cmp-timer.low { color:var(--red); animation:timerpulse .5s steps(2) infinite; }
@keyframes timerpulse { 0%,100%{opacity:1} 50%{opacity:.45} }
body.fx-reduced .cmp-timer.low{ animation:none }
/* retro GAME OVER screen */
.cmp-gameover { text-align:center; padding:24px 12px; }
.cmp-go-title { font-family:var(--pixel); font-size:clamp(32px,9vw,60px); color:var(--red); letter-spacing:4px;
  text-shadow:0 0 16px rgba(255,77,86,.8), 0 0 44px rgba(200,31,74,.6); margin-bottom:22px; }
.cmp-go-line { font-family:var(--mono); font-size:17px; color:var(--ink); line-height:1.5; margin:8px auto; max-width:520px; }
.cmp-go-line.rot, .cmp-gameover .rot { color:var(--red); font-style:italic; }

/* "no retreat" confirm modal (boss exit) — overlays the terminal, matches the red Reckoning look */
.cmp-modal-ov { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,10,.82); padding:18px; animation:cmp-fade .15s ease; }
@keyframes cmp-fade { from { opacity:0 } to { opacity:1 } }
.cmp-modal { max-width:460px; width:100%; background:var(--panel); border:3px solid var(--red); border-radius:12px;
  box-shadow:0 0 36px rgba(255,77,86,.45); padding:24px 22px; text-align:center; }
.cmp-modal-title { font-family:var(--pixel); font-size:clamp(20px,5vw,30px); color:var(--red); letter-spacing:3px;
  text-shadow:0 0 14px rgba(255,77,86,.7); margin-bottom:14px; }
.cmp-modal-body { font-family:var(--mono); font-size:18px; color:var(--ink); line-height:1.5; margin-bottom:20px; }
.cmp-modal-body b { color:var(--ylw); }
.cmp-modal-btns { display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.cmp-modal-btns .df.ghost { font-size:15px; }

/* triumphant VICTORY screen — the bookend to GAME OVER */
.cmp-vic { text-align:center; padding:18px 12px 8px; }
.cmp-vic-kicker { font-family:var(--pixel); font-size:13px; letter-spacing:3px; color:var(--ylw);
  text-shadow:0 0 12px rgba(255,210,63,.7); margin-bottom:10px; }
.cmp-vic-title { font-family:var(--pixel); font-size:clamp(28px,8vw,56px); color:var(--grn); letter-spacing:4px;
  text-shadow:0 0 16px rgba(70,211,106,.85), 0 0 46px rgba(52,214,230,.5); margin-bottom:8px; }
.cmp-vic-sub { font-family:var(--pixel); font-size:clamp(11px,2.4vw,16px); color:var(--cyan); letter-spacing:2px; margin-bottom:18px; }
.cmp-vic-body p, .cmp-vic-cta p { font-family:var(--mono); font-size:17px; color:var(--ink); line-height:1.55;
  margin:10px auto; max-width:540px; }
.cmp-vic-cta { margin-top:16px; border-top:1px solid rgba(135,150,171,.25); padding-top:8px; }
.cmp-vic-cta b { color:var(--ylw); }
/* shareable "score" row */
.cmp-vic-score { display:flex; gap:10px 22px; justify-content:center; flex-wrap:wrap; margin:4px 0 18px; }
.cmp-vsc { font-family:var(--mono); font-size:18px; color:var(--ink); }
.cmp-vsc b { font-family:var(--pixel); font-size:10px; letter-spacing:1px; color:var(--dim); margin-right:5px; }
/* progress-toward-Part-III bar */
.cmp-vic-goal { max-width:540px; margin:14px auto 6px; }
.cmp-vic-goal-label { font-family:var(--mono); font-size:17px; color:var(--cyan); margin-bottom:6px; }
.cmp-vic-goal-label b { color:var(--ylw); }
.cmp-vic-bar { height:12px; border:1px solid rgba(52,214,230,.4); border-radius:7px; overflow:hidden; background:rgba(52,214,230,.08); }
.cmp-vic-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--grn),var(--cyan));
  box-shadow:0 0 12px rgba(52,214,230,.6); transition:width .8s ease; }
.cmp-vic-goal-sub { font-family:var(--mono); font-size:15px; color:var(--dim); line-height:1.5; margin-top:8px; }
.cmp-vic-goal-sub b { color:var(--cyan); }
/* share-button row */
.cmp-vic-share { display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:16px; }
.cmp-vic-share-h { font-family:var(--pixel); font-size:10px; letter-spacing:1px; color:var(--dim); margin-right:4px; }
.cmp-sh { font-size:15px !important; padding:6px 12px !important; }
/* victory: claim your place in the Hall */
.cmp-vic-claim { display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:14px; }
.cmp-vic-claim .cmp-gate-in { width:auto; min-width:180px; font-size:16px; padding:6px 10px; }
.cmp-vic-claim .cmp-gate-go { font-size:13px; padding:7px 12px; }
.cmp-vic-claim-note { font-family:var(--mono); font-size:15px; color:var(--dim); }
.cmp-vic-claim-msg { flex-basis:100%; text-align:center; font-family:var(--mono); font-size:16px; color:var(--grn); min-height:1.2em; }
.cmp-vic-claim-msg b { color:var(--ylw); }
/* Hall of the Reckoning */
.cmp-hall-link { background:none; border:1px solid rgba(255,210,63,.4); color:var(--ylw); font-family:var(--mono);
  font-size:15px; padding:3px 10px; border-radius:6px; cursor:pointer; margin-left:6px; }
.cmp-hall-link:hover { background:rgba(255,210,63,.12); }
.cmp-hall-wrap { max-width:none; margin:0; padding:8px 0; }
.cmp-hall-lede { font-family:var(--mono); font-size:clamp(17px,2vw,21px); color:var(--dim); text-align:center; margin-bottom:18px; }
.cmp-hall-tabs { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.cmp-hall-tab { background:none; border:1px solid rgba(135,150,171,.3); color:var(--dim); font-family:var(--mono);
  font-size:clamp(16px,2.1vw,21px); padding:9px 22px; border-radius:7px; cursor:pointer; }
.cmp-hall-tab.sel { color:var(--cyan); border-color:var(--cyan); background:rgba(52,214,230,.1); }
.cmp-hall-list { display:flex; flex-direction:column; gap:6px; }
/* rank | name | badges | detail — a real aligned grid so columns line up across rows */
.cmp-hall-row { display:grid; grid-template-columns:2.6em minmax(0,1fr) auto max-content;
  align-items:center; column-gap:clamp(16px,3vw,40px); padding:14px 22px;
  border:1px solid rgba(135,150,171,.15); border-radius:7px; font-family:var(--mono); font-size:clamp(18px,2.3vw,23px); }
.cmp-hall-row.you { border-color:var(--grn); background:rgba(70,211,106,.08); }
.cmp-hall-rank { font-family:var(--pixel); font-size:clamp(15px,1.8vw,18px); color:var(--ylw); }
.cmp-hall-name { min-width:0; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-hall-tags { display:inline-flex; align-items:center; gap:12px; justify-self:end; white-space:nowrap; color:var(--ylw); }
.cmp-hall-detail { color:var(--cyan); font-size:clamp(16px,2vw,20px); justify-self:end; white-space:nowrap; }
.cmp-hall-empty { text-align:center; font-family:var(--mono); font-size:clamp(17px,2vw,20px); color:var(--dim); padding:28px; }

/* badge pips (trophy wall + roster cards + Hall names) */
.cmp-badges { display:inline-flex; gap:7px; vertical-align:middle; }
.cmp-badge { font-size:18px; line-height:1; filter:drop-shadow(0 0 4px rgba(52,214,230,.5)); cursor:default; }

/* "your Reach" — personal trophy wall */
.cmp-reach-wrap { max-width:none; margin:0; padding:8px 0; }
.cmp-reach-count { text-align:center; font-family:var(--pixel); font-size:clamp(16px,2.8vw,24px); color:var(--cyan);
  text-shadow:0 0 12px rgba(52,214,230,.5); margin:6px 0 20px; line-height:1.5; }
.cmp-reach-count b { color:var(--ylw); }
.cmp-reach-ach { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:24px; }
.cmp-ach { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:112px; padding:14px 12px;
  border:1px solid rgba(135,150,171,.2); border-radius:9px; background:rgba(135,150,171,.05); opacity:.45; }
.cmp-ach.got { opacity:1; border-color:var(--cyan); background:rgba(52,214,230,.08); box-shadow:0 0 14px rgba(52,214,230,.15); }
.cmp-ach-ic { font-size:30px; line-height:1; filter:grayscale(1); }
.cmp-ach.got .cmp-ach-ic { filter:none; }
.cmp-ach-l { font-family:var(--pixel); font-size:11px; letter-spacing:1px; color:var(--ink); }
.cmp-ach-n { font-family:var(--mono); font-size:18px; color:var(--dim); }
.cmp-ach.got .cmp-ach-n { color:var(--grn); }
.cmp-reach-h { font-family:var(--pixel); font-size:13px; letter-spacing:1px; color:var(--dim); text-align:center; margin:6px 0 14px; }
.cmp-reach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:9px; padding:2px; }
.cmp-trophy { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 15px;
  border:1px solid rgba(135,150,171,.15); border-radius:7px; font-family:var(--mono); background:rgba(135,150,171,.04); opacity:.5; }
.cmp-trophy.won { opacity:1; border-color:rgba(70,211,106,.5); background:rgba(70,211,106,.06); }
.cmp-trophy-name { font-size:clamp(17px,2.1vw,21px); color:var(--ink); }
.cmp-trophy-no { font-size:16px; color:var(--dim); }
.cmp-trophy-meta { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.cmp-trophy-grade { font-family:var(--pixel); font-size:12px; }
.cmp-trophy-grade.grade-A { color:var(--cyan); text-shadow:0 0 8px var(--cyan); }
.cmp-trophy-grade.grade-B { color:var(--grn); }
.cmp-trophy-grade.grade-C { color:var(--ylw); }
.cmp-trophy-grade.grade-D { color:var(--dim); }

/* Weekly Challenge */
.cmp-weekly-wrap { max-width:none; margin:0; padding:8px 0; }
.cmp-wk-lede { font-family:var(--mono); font-size:clamp(18px,2.2vw,21px); color:var(--ink); text-align:center; line-height:1.55; margin:4px 0 22px; }
.cmp-wk-cols { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width:720px){ .cmp-wk-cols{ grid-template-columns:1fr; } }
.cmp-wk-h { font-family:var(--pixel); font-size:14px; letter-spacing:1px; color:var(--cyan); margin-bottom:10px; }
.cmp-wk-stat { font-family:var(--mono); font-size:clamp(17px,2.1vw,21px); color:var(--ink); margin:5px 0; }
.cmp-wk-stat.dim { color:var(--dim); font-size:clamp(16px,1.9vw,18px); }
.cmp-wk-stat.grn { color:var(--grn); }
.cmp-wk-stat b { color:var(--ylw); }
.cmp-wk-play { margin:12px 0 4px; }
.cmp-wk-clue { font-family:var(--mono); font-size:clamp(18px,2.1vw,21px); color:var(--ylw); font-style:italic; line-height:1.55;
  border-left:3px solid rgba(255,210,63,.4); padding:4px 0 4px 14px; margin:8px 0 12px; }
.cmp-wk-cmd { display:flex; gap:8px; align-items:center; }
.cmp-wk-cmd .cmp-gate-in { flex:1; font-family:var(--mono); }
.cmp-wk-cmd-msg { font-family:var(--mono); font-size:17px; margin-top:8px; min-height:1.2em; }
.cmp-wk-board { display:flex; flex-direction:column; gap:5px; }
.cmp-wk-mini { font-family:var(--mono); font-size:16px; color:var(--ylw); }
.cmp-wk-result { max-width:560px; margin:10vh auto 0; text-align:center; }
.cmp-wk-result-k { font-family:var(--pixel); font-size:clamp(24px,6vw,42px); letter-spacing:2px; }
.cmp-wk-result-k.grn { color:var(--grn); text-shadow:0 0 18px rgba(70,211,106,.6); }
.cmp-wk-result-k.rot { color:var(--red); text-shadow:0 0 18px rgba(255,77,86,.6); }
.cmp-wk-result-l { font-family:var(--mono); font-size:19px; color:var(--ink); line-height:1.6; margin-top:14px; }
.cmp-wk-result-l b { color:var(--ylw); }

/* movie-style scrolling credits */
.cmp-credits-stage { position:relative; height:60vh; min-height:340px; overflow:hidden;
  background:#05050a; border:1px solid rgba(135,150,171,.2); border-radius:8px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.cmp-credits-roll { position:absolute; left:0; right:0; top:0; text-align:center;
  transform:translateY(60vh); will-change:transform; }
/* the roll is animated from JS (Web Animations API) so it scrolls even when the
   browser has 'reduce motion' on — a CSS animation would be silenced there. */
.cc-block { margin:34px auto; max-width:560px; }
.cc-h { font-family:var(--pixel); font-size:clamp(18px,4vw,26px); color:var(--grn); letter-spacing:2px;
  text-shadow:0 0 14px rgba(70,211,106,.6); }
.cc-sub { font-family:var(--mono); font-size:18px; color:var(--cyan); margin-top:4px; }
.cc-role { font-family:var(--pixel); font-size:11px; letter-spacing:2px; color:var(--dim); margin-bottom:8px; }
.cc-name { font-family:var(--mono); font-size:22px; color:var(--ink); line-height:1.5; }
.cc-link { margin-top:6px; }
.cc-link a { font-family:var(--mono); font-size:19px; color:var(--ylw); text-decoration:none; }
.cc-link a:hover { text-decoration:underline; }
.cc-fin .cc-h { color:var(--ylw); text-shadow:0 0 14px rgba(255,210,63,.6); }

/* ── v2: animated canvas scenes (replaces the static .cmp-scene-svg) ───────── */
.cmp-scene-cv { display:block; width:100%; height:clamp(150px,30vh,260px); object-fit:cover; image-rendering:pixelated; }
.cmp-chapter-scene .cmp-scene-cv { height:clamp(120px,24vh,190px); }
.cmp-clear-art .cmp-scene-cv { height:clamp(150px,30vh,260px); }

/* ── v2: terminal chrome — a bezel + title bar around the unchanged v1 terminal ── */
.v2term { border:2px solid #1c3a48; border-radius:8px; overflow:hidden; background:#04090d;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 6px 24px rgba(0,0,0,.45), inset 0 0 40px rgba(43,212,106,.04); }
.cmp-hunt .v2term { border-color:#5a1024; box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 6px 24px rgba(0,0,0,.45), inset 0 0 40px rgba(255,82,119,.05); }
.v2term-bar { display:flex; align-items:center; gap:6px; padding:6px 10px; background:#0c1622;
  border-bottom:1px solid #1c3a48; }
.cmp-hunt .v2term-bar { background:#160910; border-bottom-color:#5a1024; }
.v2term-dot { width:9px; height:9px; border-radius:50%; background:#22303c; }
.v2term-dot:first-child { background:#ff4d56aa; }
.v2term-dot:nth-child(2) { background:#ffd23f66; }
.v2term-dot:nth-child(3) { background:#46d36a66; }
.v2term-host { margin-left:auto; font-family:var(--mono); font-size:14px; color:var(--dim); letter-spacing:1px; }
.v2term .cmp-term { border:0; border-radius:0; }

/* ── phase-6 terminal effects (term/effects.js — presentation only, gated off
   under prefers-reduced-motion and in the transcript harness) ─────────────── */
.fx-flare { animation: fxFlare .6s ease-out 1; }
@keyframes fxFlare {
  0% { text-shadow: 0 0 8px currentColor, 0 0 18px currentColor; filter: brightness(1.6); }
  100% { text-shadow: none; filter: brightness(1); }
}
.v2term.fx-glow { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 6px 24px rgba(0,0,0,.45), 0 0 26px rgba(70,211,106,.35), inset 0 0 46px rgba(70,211,106,.08); transition: box-shadow .25s ease; }
.v2term { position: relative; }
.fx-beam { position:absolute; left:0; right:0; top:-30%; height:26%; pointer-events:none; z-index:3;
  background: linear-gradient(180deg, transparent, rgba(140,255,170,.14), transparent);
  animation: fxBeam 1.1s ease-in-out 1 forwards; }
@keyframes fxBeam { from { top:-30%; } to { top:110%; } }
body.fx-reduced .fx-flare, body.fx-reduced .fx-beam { animation: none; }
body.fx-reduced .fx-beam { display: none; }
body.fx-reduced .v2term.fx-glow { transition: none; }