* { box-sizing: border-box; }
body {
  margin: 0; overflow: hidden; background: #05050a; color: #dfe3ee;
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-user-select: none; user-select: none;
}
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 36px; z-index: 5;
  display: flex; gap: 20px; align-items: center; padding: 0 12px;
  /* keep clear of notches / status bars in the native apps (iOS reports env();
     Android gets native margins via adjustMarginsForEdgeToEdge) */
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  background: #0d0d16; border-bottom: 1px solid #262638; font-size: 14px;
}
#topbar .spacer { flex: 1; }
#topbar button {
  background: #1a1a28; border: 1px solid #34344d; color: #dfe3ee;
  padding: 3px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
#topbar button:hover { border-color: #4ee1d2; }
#topbar > span, #topbar button { white-space: nowrap; } /* never wrap HUD readouts */
#res-he3 { color: #4ee1d2; font-weight: 600; }
#res-supply.capped { color: #f87171; }
#faction-banner { display: flex; align-items: center; gap: 8px; font-weight: 600; }
#faction-portrait {
  width: 30px; height: 26px; object-fit: cover; border-radius: 4px;
  border: 1px solid #34344d; display: none;
}
#ability-status {
  font-size: 12px; padding: 3px 10px; border-radius: 6px;
  border: 1px solid #34344d; background: #14141f; color: #9aa;
}
#ability-status.ready { color: #4ee1d2; border-color: #2f6f68; cursor: pointer; }
#ability-status.aiming { color: #042; background: #4ee1d2; border-color: #4ee1d2; }
#game { position: fixed; top: 36px; left: 0; cursor: crosshair; touch-action: none; }

/* on-screen touch controls (shown only on touch devices) */
#touch-controls { display: none; }
body.touch #touch-controls {
  display: flex; flex-direction: column; gap: 8px;
  position: fixed; left: 8px; bottom: calc(var(--botH, 150px) + 8px); z-index: 6;
}
#touch-controls button {
  width: 46px; height: 46px; border-radius: 10px; font-size: 22px; line-height: 1;
  background: rgba(20,20,32,0.82); border: 1px solid #34344d; color: #dfe3ee;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#touch-controls button#btn-box.active { background: #4ee1d2; color: #042; border-color: #4ee1d2; }
#bottompanel {
  position: fixed; bottom: 0; left: 0; right: 0; height: 150px; z-index: 5;
  /* keep clear of home-indicator / gesture bars in the native apps */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #0d0d16; border-top: 1px solid #262638; display: flex;
  overflow: hidden; /* clip at the screen edge; inner panels scroll */
}
#sel-info {
  width: 270px; padding: 8px 10px; overflow-y: auto; font-size: 12px;
  border-right: 1px solid #262638; line-height: 1.5;
}
#sel-info .hp { color: #9aa; }
#sel-info .qitem { color: #4ee1d2; }
#cmd-card {
  flex: 1; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px;
  align-content: flex-start; overflow-y: auto; min-height: 0;
}
#cmd-card button {
  background: #1a1a28; border: 1px solid #34344d; color: #dfe3ee;
  padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px;
  min-width: 110px; text-align: left;
}
#cmd-card button .cost { color: #4ee1d2; font-size: 11px; display: block; }
#cmd-card button:hover:not(:disabled) { border-color: #4ee1d2; }
#cmd-card button:disabled { opacity: 0.38; cursor: default; }
#minimap { margin: 4px; border: 1px solid #34344d; cursor: pointer; flex-shrink: 0; }
.overlay {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(4, 4, 10, 0.97);
  display: flex; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* margin:auto centers the box when it fits and lets it scroll WITHOUT
   clipping the top when it's taller than the screen (the align-items:center
   + overflow bug). */
.overlay > * { margin: auto; }
.hidden { display: none !important; }
/* end screen sits on a fully-solid backdrop so nothing ghosts through */
#endscreen { background: #05050a; }
.menu-box { max-width: 880px; text-align: center; padding: 24px; }
.menu-box h1 { font-size: 42px; letter-spacing: 6px; margin: 0 0 4px; }
.menu-box .tag { color: #99a; margin: 0 0 16px; }
#faction-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0;
}
.fcard {
  display: flex; align-items: stretch; overflow: hidden; min-height: 134px;
  border: 2px solid #2a2a3e; border-radius: 10px; padding: 0;
  cursor: pointer; text-align: left; transition: border-color .12s, background .12s;
}
.fart {
  width: 152px; flex-shrink: 0; position: relative;
  background-color: #10101a; background-size: cover; background-position: center top;
}
/* fade the portrait into the text panel; subtle faction tint underneath */
.fart::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.25));
  box-shadow: inset -2px 0 0 var(--c);
}
.fart::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,13,22,0) 50%, #0d0d16 100%);
}
.fcontent { flex: 1; padding: 12px 14px; min-width: 0; }
.fcard h2 { color: var(--c); margin: 0 0 6px; font-size: 18px; }
.fcard p { margin: 0 0 6px; font-size: 13px; color: #aab; }
.fcard small { color: #767d96; }
.fcard.sel { border-color: var(--c); background: rgba(255, 255, 255, 0.05); }
.menu-box .row {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  margin: 12px 0; color: #aab;
}
.ebtn {
  background: #1a1a28; border: 1px solid #34344d; color: #dfe3ee;
  width: 38px; height: 32px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.ebtn.sel { border-color: #4ee1d2; color: #4ee1d2; }
.dbtn {
  background: #1a1a28; border: 1px solid #34344d; color: #dfe3ee;
  height: 32px; padding: 0 16px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.dbtn.sel { border-color: #4ee1d2; color: #4ee1d2; }
.menu-box .row { flex-wrap: wrap; }
.mbtn {
  background: #1a1a28; border: 1px solid #34344d; color: #dfe3ee;
  height: 32px; padding: 0 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.mbtn.sel { border-color: #4ee1d2; color: #4ee1d2; }
#mode-desc {
  max-width: 760px; margin: 2px auto 0; min-height: 34px;
  color: #9aa3bd; font-size: 13px; line-height: 1.45;
}
#objective {
  position: fixed; top: 44px; left: 50%; transform: translateX(-50%); z-index: 4;
  display: none; background: rgba(13,13,22,0.85); border: 1px solid #2f6f68;
  color: #cfe7e2; font-size: 13px; font-weight: 600; padding: 5px 16px; border-radius: 0 0 8px 8px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); white-space: nowrap;
}
#btn-start {
  background: #4ee1d2; color: #042222; font-weight: 700;
  font-size: 18px; letter-spacing: 2px; padding: 12px 32px; border: none;
  border-radius: 8px; cursor: pointer;
}
#btn-start:hover { background: #7eeede; }
.secondary {
  background: transparent; color: #9fd; cursor: pointer;
  border: 1px solid #2f6f68; border-radius: 8px; padding: 10px 20px; font-size: 14px;
}
.secondary:hover { border-color: #4ee1d2; color: #4ee1d2; }
.codex-box { text-align: center; max-width: 1560px; width: 98%; padding: 16px; overflow: hidden; }
.codex-box h2 { color: #4ee1d2; letter-spacing: 4px; margin: 0 0 4px; font-size: 26px; }
.codex-box .codex-tag { color: #99a; margin: 0 0 14px; font-size: 14px; }
.codex-img {
  max-width: 100%; max-height: 74vh; border-radius: 10px; border: 1px solid #262638;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
#btn-codex-close {
  display: block; margin: 16px auto 0; background: #4ee1d2; color: #042222; font-weight: 700;
  border: none; border-radius: 8px; padding: 10px 32px; cursor: pointer; font-size: 15px;
}
.codex-lore { max-width: 760px; margin: 18px auto 0; text-align: left; }
.codex-lore h3 { color: #4ee1d2; letter-spacing: 3px; font-size: 16px; margin: 0 0 8px; text-align: center; }
.codex-lore p { color: #c3c8da; font-size: 14px; line-height: 1.6; margin: 0 0 9px; }
/* expanded faction codex entries */
.codex-factions {
  display: grid; grid-template-columns: 1fr; gap: 22px;
  margin: 22px auto 0; text-align: left;
}
.codex-sheet {
  width: 100%; display: block; border-radius: 14px; cursor: zoom-in;
  border: 1px solid #2a2a3e;
}
#sheetzoom {
  position: fixed; inset: 0; z-index: 60; background: rgba(3,3,8,0.95);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
#sheetzoom img {
  max-width: 96vw; max-height: 94vh; width: auto; height: auto;
  transform-origin: center center; will-change: transform; user-select: none;
}
#sheetzoom .zoom-close {
  position: fixed; top: 14px; right: 16px; z-index: 61;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid #3a3a52;
  background: rgba(20,20,32,0.9); color: #e5e9f5; font-size: 18px; cursor: pointer;
}
.codex-faction {
  border: 1px solid #2a2a3e; border-left: 4px solid var(--c);
  border-radius: 10px; padding: 12px 16px; background: rgba(255,255,255,0.02);
}
.codex-faction h4 { color: var(--c); margin: 0; font-size: 18px; }
.codex-motto { color: #8890a8; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin: 2px 0 8px; }
.codex-body { color: #c3c8da; font-size: 13px; line-height: 1.55; margin: 0 0 10px; }
.codex-trait { color: #4ee1d2; font-size: 15px; margin: 4px 0 8px; }
.codex-units { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 10px; }
.codex-ucard {
  border: 1px solid #23232f; border-radius: 12px; padding: 16px;
  background: rgba(255,255,255,0.03); text-align: center;
}
.ucard-art {
  height: 170px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.07), rgba(0,0,0,0.20));
  border-radius: 10px; margin-bottom: 12px; overflow: hidden;
}
.ucard-art img { max-width: 92%; max-height: 92%; object-fit: contain; }
.ucard-name { display: block; color: var(--c); font-size: 18px; margin-bottom: 4px; }
.ucard-role { color: #c6cbdd; font-size: 14px; line-height: 1.5; min-height: 42px; margin-bottom: 8px; }
.codex-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; justify-content: center; }
.codex-stats > span { color: #8f99b0; font-size: 13px; letter-spacing: .3px; }
.codex-stats b { color: #cfe7e2; font-weight: 600; }
.codex-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; justify-content: center; }
.codex-tag-chip {
  font-size: 10.5px; color: #cfe7e2; background: rgba(78,225,210,0.10);
  border: 1px solid rgba(78,225,210,0.28); border-radius: 10px; padding: 1px 8px;
}
/* per-faction blurb under the menu cards */
#faction-lore {
  max-width: 760px; margin: 4px auto 2px; min-height: 38px;
  color: #3b82f6; font-size: 13px; line-height: 1.5; font-style: italic;
  transition: color .15s;
}
.menu-secondary { display: flex; gap: 16px; justify-content: center; margin-top: 10px; }
.menu-secondary > button { width: 240px; box-sizing: border-box; }
/* intro / story crawl */
.intro-box {
  max-width: 680px; width: 92%; text-align: center; padding: 26px 28px;
  background: rgba(8, 7, 18, 0.5); border: 1px solid rgba(120, 124, 170, 0.14);
  border-radius: 16px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.intro-kicker { color: #6b7390; letter-spacing: 8px; font-size: 14px; margin-bottom: 6px; }
.intro-box h1 { color: #4ee1d2; letter-spacing: 6px; font-size: 34px; margin: 0 0 22px; }
.intro-crawl { text-align: left; max-width: 600px; margin: 0 auto; }
.intro-crawl p {
  color: #cdd2e4; font-size: 16px; line-height: 1.65; margin: 0 0 16px;
  opacity: 0; transform: translateY(8px); animation: introFade .8s ease forwards;
}
.intro-crawl p:nth-child(1){animation-delay:.1s} .intro-crawl p:nth-child(2){animation-delay:.5s}
.intro-crawl p:nth-child(3){animation-delay:.9s} .intro-crawl p:nth-child(4){animation-delay:1.3s}
.intro-crawl p:nth-child(5){animation-delay:1.7s; color:#9fe; font-weight:600}
@keyframes introFade { to { opacity: 1; transform: none; } }
/* full lore archive (menu Lore button) */
.lore-archive { max-width: 700px; }
.lore-archive h1 { margin-bottom: 6px; }
/* lead intro block, set off from the sections by a hairline */
.lore-intro {
  text-align: left; max-width: 640px; margin: 14px auto 0; padding-top: 16px;
  border-top: 1px solid rgba(124, 128, 174, 0.16);
}
.lore-intro p { color: #d7dcec; font-size: 15px; line-height: 1.72; margin: 0 0 13px; }
.lore-intro p:first-child { font-size: 17px; line-height: 1.66; color: #e7eaf6; }
.lore-intro p:last-child { color: #9fe; font-weight: 600; }
/* deep-dive sections: roomy spacing, accent-barred headings */
.lore-sec { text-align: left; max-width: 640px; margin: 30px auto 0; }
.lore-sec h3 {
  color: #4ee1d2; letter-spacing: 1.5px; font-size: 14px; margin: 0 0 12px;
  text-transform: uppercase; display: flex; align-items: center; gap: 11px;
}
.lore-sec h3::before { content: ''; width: 26px; height: 2px; background: #4ee1d2; flex: none; opacity: .8; }
.lore-sec p { color: #c7ccde; font-size: 14.5px; line-height: 1.74; margin: 0 0 12px; }
.lore-sec p:last-child { margin-bottom: 0; }
#btn-intro-go {
  margin-top: 18px; background: #4ee1d2; color: #042222; font-weight: 700; font-size: 16px;
  letter-spacing: 1px; padding: 11px 36px; border: none; border-radius: 8px; cursor: pointer;
}
#btn-intro-go:hover { background: #7eeede; }
.end-box { text-align: center; }
.end-box h1 { font-size: 52px; letter-spacing: 8px; margin: 0 0 10px; }
.end-box h1.win { color: #4ee1d2; }
.end-box h1.lose { color: #f87171; }
.end-box p { color: #99a; margin-bottom: 18px; }
.end-box .stats {
  display: block; width: fit-content; text-align: left; margin: 0 auto 22px;
  background: #0d0d16; border: 1px solid #262638; border-radius: 10px; padding: 10px 18px;
  min-width: 320px;
}
.end-box button { display: block; margin: 0 auto; }
.end-box .stat {
  display: flex; justify-content: space-between; gap: 40px;
  padding: 5px 0; font-size: 14px; color: #aab; border-bottom: 1px solid #1b1b26;
}
.end-box .stat:last-child { border-bottom: none; }
.end-box .stat b { color: #4ee1d2; font-variant-numeric: tabular-nums; }
.end-box button {
  background: #4ee1d2; color: #042222; font-weight: 700; font-size: 16px;
  padding: 10px 32px; border: none; border-radius: 8px; cursor: pointer;
}
#toast {
  position: fixed; bottom: 166px; left: 50%; transform: translateX(-50%);
  background: #3a2418; color: #fcbf8a; border: 1px solid #6b4226;
  padding: 6px 16px; border-radius: 6px; font-size: 13px; z-index: 8;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
#toast.show { opacity: 1; }
.hint { color: #767d96; font-size: 12px; margin-top: 14px; }

/* ===== Mobile / narrow-screen layout ===== */
@media (max-width: 760px) {
  #topbar { gap: 8px; padding: 0 8px; font-size: 12px; height: 40px; }
  #topbar button { padding: 4px 8px; }
  #faction-portrait { width: 26px; height: 22px; }
  #player-faction { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #ability-status { font-size: 11px; padding: 4px 8px; }

  #bottompanel { height: 168px; }
  #sel-info { width: 38%; min-width: 120px; font-size: 11px; padding: 6px 8px; }
  #cmd-card { padding: 6px; gap: 6px; }
  #cmd-card button { min-width: 0; flex: 1 1 46%; padding: 9px 8px; font-size: 12px; }
  #minimap { width: 96px; height: 96px; margin: 6px; }

  /* give overlay content room to clear the browser URL/nav bars */
  .menu-box, .codex-box, .intro-box, .end-box {
    padding-top: calc(20px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }
  /* menu */
  .menu-box { padding-left: 12px; padding-right: 12px; }
  .menu-box h1 { font-size: 30px; letter-spacing: 3px; }
  .menu-box .tag { font-size: 13px; margin-bottom: 10px; }
  #faction-cards { grid-template-columns: 1fr; gap: 8px; margin: 12px 0; }
  .fcard { min-height: 96px; }
  .fart { width: 104px; }
  .fcard h2 { font-size: 16px; }
  .fcard p { font-size: 12px; }
  .menu-box .row { flex-wrap: wrap; }
  .deploy-row { flex-direction: column; align-items: stretch; }
  #btn-start, #btn-campaign { width: 100%; padding: 14px; font-size: 18px; }
  #faction-lore { font-size: 12px; min-height: 0; margin: 6px auto 2px; }
  .menu-secondary { flex-wrap: wrap; }
  .intro-box h1 { font-size: 24px; letter-spacing: 3px; }
  .intro-crawl p { font-size: 14px; }
  .codex-lore p { font-size: 13px; }
  .codex-factions { grid-template-columns: 1fr; gap: 10px; }
  .hint { font-size: 11px; }
  .end-box h1 { font-size: 38px; letter-spacing: 4px; }
  .end-box .stats { min-width: 0; width: 90vw; max-width: 360px; }
}

/* extra-narrow phones: drop the selection text panel for more command room */
@media (max-width: 420px) {
  #sel-info { display: none; }
}

/* portrait phones: the topbar must always keep Menu reachable — drop the
   faction name (the portrait icon still identifies it) and ellipsize the
   ability label so the right-side buttons can never be pushed off-screen */
@media (max-width: 560px) {
  #topbar { gap: 6px; }
  #player-faction { display: none; }
  #ability-status { max-width: 116px; overflow: hidden; text-overflow: ellipsis; }
  #faction-portrait, #btn-mute, #btn-menu, #res-he3, #res-supply { flex-shrink: 0; }
}
@media (max-width: 390px) {
  #ability-status { max-width: 86px; }
}

/* ===== Campaign & briefing screens ===== */
.deploy-row { display: flex; gap: 16px; justify-content: center; align-items: center; margin: 16px 0 4px; }
.deploy-row > button {
  width: 240px; height: 52px; box-sizing: border-box; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
#btn-campaign {
  background: #eab308; color: #2a1e02; font-weight: 700; font-size: 18px; letter-spacing: 2px;
  padding: 12px 32px; border: none; border-radius: 8px; cursor: pointer;
}
#btn-campaign:hover { background: #f5c936; }
.end-actions { display: flex; gap: 12px; justify-content: center; }

.cmp-box { text-align: center; max-width: 1100px; width: 96%; padding: 16px; }
.cmp-box h2 { color: #4ee1d2; letter-spacing: 4px; margin: 0 0 4px; font-size: 26px; }
.cmp-tag { color: #99a; margin: 0 0 16px; font-size: 14px; }
.cmp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; text-align: left; margin-bottom: 16px; }
.cmp-camp { border: 1px solid #2a2a3e; border-left: 4px solid var(--c); border-radius: 10px; padding: 12px 14px; background: rgba(255,255,255,0.02); }
.cmp-camp h3 { color: var(--c); margin: 0; font-size: 17px; }
.cmp-motto { color: #8890a8; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin: 2px 0 8px; }
/* faction banner header — mirrors the main-menu faction card */
.cmp-banner {
  display: flex; align-items: stretch; overflow: hidden; min-height: 92px;
  border: 1px solid #2a2a3e; border-radius: 8px; margin-bottom: 10px;
}
.cmp-banner .fart { width: 118px; }
.cmp-banner .fcontent { padding: 10px 12px; }
.cmp-banner h3 { color: var(--c); margin: 0 0 5px; font-size: 16px; }
.cmp-trait { margin: 0 0 5px; font-size: 12px; color: #aab; line-height: 1.35; }
.cmp-units { color: #767d96; font-size: 12px; }
.cmp-mission {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: rgba(255,255,255,0.03); border: 1px solid #23232f; border-radius: 8px;
  padding: 8px 10px; margin-top: 6px; color: #cdd3e4; cursor: pointer; font: inherit;
}
.cmp-mission .cmp-ic { flex: 0 0 20px; text-align: center; font-size: 13px; }
.cmp-mission .cmp-body { display: flex; flex-direction: column; min-width: 0; }
.cmp-mission .cmp-body b { color: #eaf0ff; font-size: 13px; }
.cmp-mission .cmp-sub { color: #8890a8; font-size: 11px; }
.cmp-mission.open:hover { border-color: var(--c); background: rgba(255,255,255,0.06); }
.cmp-mission.done { border-color: #2f6f68; }
.cmp-mission.done .cmp-ic { color: #4ee1d2; }
.cmp-mission.locked { opacity: 0.45; cursor: not-allowed; }
#cmp-close { margin: 4px auto 0; display: block; }

.cmp-chip {
  display: inline-block; font-size: 11px; padding: 1px 9px; border-radius: 999px;
  color: #fff; background: color-mix(in srgb, var(--c) 30%, #12101a); border: 1px solid var(--c);
}
.cmp-chip.foe { color: #fff; }
.cmp-chip.ally { color: #fff; }

.cmp-box.bf { max-width: 640px; border-top: 4px solid var(--c); }
.bf-terra { color: var(--c); letter-spacing: 3px; text-transform: uppercase; font-size: 13px; margin-bottom: 2px; }
.cmp-box.bf h2 { color: #eaf0ff; letter-spacing: 2px; }
.bf-brief { color: #c3c8da; line-height: 1.6; font-size: 14px; text-align: left; margin: 12px 0 14px; }
.bf-lines { text-align: left; border-top: 1px solid #23232f; padding-top: 10px; }
.bf-line { display: flex; gap: 10px; align-items: baseline; margin: 6px 0; font-size: 13px; color: #cdd3e4; }
.bf-line .bf-k { flex: 0 0 78px; color: #8890a8; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.bf-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }
#bf-deploy {
  background: #4ee1d2; color: #042222; font-weight: 700; font-size: 16px; letter-spacing: 2px;
  padding: 11px 34px; border: none; border-radius: 8px; cursor: pointer;
}
#bf-deploy:hover { background: #7eeede; }
@media (max-width: 700px) { .cmp-grid { grid-template-columns: 1fr; } }

/* campaign tour dividers */
.cmp-tier {
  margin: 10px 2px 4px; padding: 3px 8px;
  font-size: 10px; letter-spacing: 2px; font-weight: 700;
  color: var(--c, #8890a8); opacity: 0.85;
  border-left: 3px solid var(--c, #8890a8);
  background: rgba(255,255,255,0.03);
}

/* faction ability line on menu cards */
.fcard .fability {
  margin: 4px 0 2px; font-size: 11.5px; line-height: 1.35;
  color: var(--c, #4ee1d2); opacity: 0.95;
}

/* ===== per-mission victory: give VICTORY a glowing badge moment ===== */
.end-box h1.win {
  position: relative; animation: winpop 0.5s cubic-bezier(.2,1.4,.4,1) both;
  text-shadow: 0 0 18px rgba(78,225,210,0.55);
}
.end-box h1.win::before {
  content: '★'; display: block; font-size: 30px; letter-spacing: 0;
  margin: 0 0 2px; color: #4ee1d2; text-shadow: 0 0 16px rgba(78,225,210,0.8);
  animation: winpop 0.5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes winpop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===== campaign finale — full-bleed victory card, tap to return ===== */
.finale-card {
  width: min(96vw, 940px);
  aspect-ratio: 768 / 512;
  max-height: 90vh;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  animation: winpop 0.6s cubic-bezier(.2,1.2,.4,1) both;
}
.finale-card:hover, .finale-card:focus-visible {
  filter: brightness(1.06);
}

@media (max-width: 560px) {
  .finale-art { height: 170px; }
  .finale-title { font-size: 26px; letter-spacing: 2px; }
  .finale-outcome { font-size: 14px; }
}

/* ===== v1.1 home screen: living space backdrop + glowing title ===== */
#menu {
  background:
    radial-gradient(ellipse at 22% 12%, rgba(78,225,210,0.10), transparent 46%),
    radial-gradient(ellipse at 82% 88%, rgba(168,85,247,0.11), transparent 46%),
    radial-gradient(ellipse at 60% 50%, rgba(59,130,246,0.06), transparent 60%),
    linear-gradient(180deg, #070711, #05050a) !important;
}
#menu::before {         /* twinkling starfield */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 15% 22%, #fff, transparent),
    radial-gradient(1px 1px at 68% 34%, #cbe8ff, transparent),
    radial-gradient(1.4px 1.4px at 43% 71%, #fff, transparent),
    radial-gradient(1px 1px at 88% 62%, #e6d6ff, transparent),
    radial-gradient(1px 1px at 27% 88%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 79% 15%, #d6fff5, transparent),
    radial-gradient(1px 1px at 55% 47%, #fff, transparent),
    radial-gradient(1px 1px at 8% 58%, #cbe8ff, transparent);
  background-repeat: repeat; background-size: 380px 380px;
  animation: stardrift 90s linear infinite, twinkle 5.5s ease-in-out infinite;
  opacity: 0.55;
}
@keyframes stardrift { from { background-position: 0 0; } to { background-position: 380px 760px; } }
@keyframes twinkle { 0%,100% { opacity: 0.4; } 50% { opacity: 0.7; } }

.menu-box { position: relative; z-index: 1; }
.menu-box h1 {
  color: #eef3ff;
  text-shadow: 0 0 24px rgba(78,225,210,0.42), 0 0 60px rgba(78,225,210,0.18);
  animation: titleglow 5s ease-in-out infinite;
}
@keyframes titleglow {
  0%,100% { text-shadow: 0 0 22px rgba(78,225,210,0.34), 0 0 52px rgba(78,225,210,0.14); }
  50%     { text-shadow: 0 0 32px rgba(78,225,210,0.60), 0 0 78px rgba(78,225,210,0.26); }
}
@media (prefers-reduced-motion: reduce) {
  #menu::before { animation: none; }
  .menu-box h1 { animation: none; }
}