/* The campaign's screens (js/campaign/ui.js) and a mission's HUD (js/campaign/hud.js), in the
   game's own look: navy glass, cyan rules, amber for what's chosen and for money. */

/* ---- the screens: one big sheet over the street */
.campaign { z-index: 12; background: radial-gradient(ellipse at 70% 40%, rgba(11, 19, 34, 0.25), rgba(11, 19, 34, 0.82)); }
.cp-sheet {
  --cut: 18px; position: absolute; left: calc(20px + var(--safe-l)); right: calc(20px + var(--safe-r)); top: calc(16px + var(--safe-t)); bottom: calc(16px + var(--safe-b));
  display: flex; flex-direction: column; max-width: 1180px; margin: 0 auto; background: var(--panel); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-left: 3px solid var(--line); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.cp-top { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line-dim); }
.cp-head { flex: 1; }
.cp-head h1 { margin: 0; font-size: 30px; font-style: italic; font-weight: 900; letter-spacing: 0.06em; line-height: 1; }
.cp-head p { margin: 4px 0 0; color: var(--dim); font-size: 13px; letter-spacing: 0.08em; }
.cp-funds { text-align: right; }
.cp-funds span { display: block; font-size: 11px; color: var(--dim); letter-spacing: 0.2em; }
.cp-funds b { font: 700 24px/1.1 'Chakra Petch', var(--cjk), sans-serif; color: var(--amber); }
.cp-funds.red b, .red { color: var(--red); }
.cp-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 22px; }
.cp-note { color: var(--dim); font-size: 14px; }
.cp-warn { color: #ffcf8a; font-size: 13px; border-left: 3px solid var(--amber); padding: 4px 10px; background: rgba(255, 177, 46, 0.07); }
.cp-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cp-buttons .go, .cp-buttons .ghost { width: auto; flex: 1; min-width: 9em; }

/* ---- the pilots */
.cp-portrait { width: 100%; height: auto; display: block; }

/* ---- the base */
.cp-tabs { max-width: 560px; margin-bottom: 14px; }
.cp-event { grid-column: 1 / -1; background: repeating-linear-gradient(135deg, rgba(255, 75, 62, 0.14) 0 10px, transparent 10px 20px); padding-left: 8px !important; }
.cp-event b { color: #ff8a7a; }
.cp-up { display: grid; grid-template-columns: 8em 1fr auto 8.5em; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(47, 210, 255, 0.12); }
.cp-up b { font-weight: 900; }
.cp-desc { color: var(--dim); font-size: 13px; }
.cp-up em { font-style: normal; color: var(--dim); font-size: 13px; text-align: center; }
.cp-up .ghost.small { width: 100%; font: 700 14px 'Chakra Petch', var(--cjk), sans-serif; color: var(--amber); border-color: rgba(255, 177, 46, 0.5); }
.cp-up .ghost.small:disabled { color: var(--dim); border-color: var(--line-dim); opacity: 0.6; }
.cp-pips { display: flex; gap: 3px; }
.cp-pips i { width: 16px; height: 9px; background: rgba(255, 255, 255, 0.1); transform: skewX(-18deg); }
.cp-pips i.on { background: var(--line); box-shadow: 0 0 6px var(--line); }
.cp-panel > h3 { margin: 12px 0 2px; font-size: 15px; color: var(--amber); }
kbd { display: inline-block; min-width: 1.5em; padding: 0 4px; border: 1px solid var(--line-dim); font: 700 11px 'Chakra Petch', sans-serif; text-align: center; }
.rank { display: inline-block; width: 1.6em; margin-right: 6px; text-align: center; font: 900 15px 'Chakra Petch', sans-serif; }
.rA { color: var(--amber); } .rB { color: var(--line); }  

/* ---- the debrief */
.cp-debrief { max-width: 760px; margin: 0 auto; text-align: center; }
.cp-debrief h2 { font-size: 28px; font-weight: 900; font-style: italic; margin: 4px 0 14px; }
.cp-bill { list-style: none; padding: 0; margin: 0 auto 10px; max-width: 520px; text-align: left; font-size: 16px; }
.cp-bill li { display: flex; justify-content: space-between; padding: 7px 4px; border-bottom: 1px dashed rgba(47, 210, 255, 0.2); }
.cp-bill b { font: 700 17px 'Chakra Petch', var(--cjk), sans-serif; }
.cp-bill .plus b { color: var(--amber); }
.cp-bill .minus b { color: var(--red); }
.cp-bill .total { border-bottom: 0; border-top: 2px solid var(--line); margin-top: 4px; font-weight: 900; }
.cp-theirs { color: var(--dim); font-size: 13px; }
.cp-funds-line { font-size: 17px; }
.cp-funds-line b { color: var(--amber); font: 700 20px 'Chakra Petch', var(--cjk), sans-serif; }
/* the debrief's head: the rating beside the result; its buttons held at the foot of the sheet while the rest scrolls */
.cp-debrief .cp-buttons { position: sticky; bottom: -22px; z-index: 1; max-width: 560px; margin: 12px auto -22px; padding: 10px 0 16px; background: linear-gradient(180deg, rgba(9, 16, 30, 0), rgba(9, 16, 30, 0.96) 26%); }
.cp-debrief .cp-buttons .go, .cp-debrief .cp-buttons .ghost { margin-top: 0; }
@media (max-height: 820px) {
  .cp-top { padding: 10px 18px; }
  .cp-head h1 { font-size: 26px; }
  .cp-debrief h2 { font-size: 26px; }
  .cp-bill li { padding: 4px 4px; }
  .cp-debrief .cp-theirs { margin: 4px 0; }
  .cp-funds-line { margin: 6px 0; }
  .cp-debrief .cp-buttons .go { min-height: 46px; font-size: 18px; }
}

/* ---- a mission's HUD */
.cp-hud { position: absolute; inset: 0; pointer-events: none; }
.cp-obj { position: absolute; top: calc(118px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: baseline; padding: 6px 14px;
  background: rgba(9, 16, 30, 0.72); border-left: 3px solid var(--amber); white-space: nowrap; }
.cp-obj-title { font-weight: 900; font-size: 15px; }
.cp-obj-goal { color: var(--dim); font-size: 13px; }
.cp-obj-progress { color: var(--line); font: 700 14px 'Chakra Petch', var(--cjk), sans-serif; }
@keyframes cp-blink { 50% { opacity: 0.4; } }
.cp-bosses { position: absolute; top: calc(152px + var(--safe-t)); left: 50%; transform: translateX(-50%); max-width: 90vw; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; pointer-events: none; z-index: 2; }
/* a boss: an always-visible icon with a small health bar along its foot (side by side for several) */
.cp-boss { position: relative; width: 44px; height: 44px; display: grid; place-items: center; box-sizing: border-box; background: rgba(9, 16, 30, 0.82); border: 1px solid #c06bff; box-shadow: 0 0 10px rgba(192, 107, 255, 0.45); }
.cp-boss b { font: 700 22px/1 'Chakra Petch', var(--cjk), sans-serif; color: #e8b4ff; margin-bottom: 6px; }
.cp-boss i { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 6px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.cp-boss span { display: block; height: 100%; background: linear-gradient(90deg, #c06bff, #ff4b8a); transform-origin: left; }
.cp-boss > .enemy-icon { width: 36px; height: 36px; margin-bottom: 6px; }
.cp-boss:has(> .enemy-icon) > b { position: absolute; top: -3px; right: -3px; margin: 0; font-size: 12px; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.cp-mark { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.cp-mark span { position: absolute; transform: translate(-50%, -100%); padding: 2px 6px; font: 700 16px/1.2 'Chakra Petch', var(--cjk), sans-serif; background: rgba(9, 16, 30, 0.75);
  border: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.cp-mark i { position: absolute; left: -16px; top: -6px; width: 32px; height: 4px; background: linear-gradient(90deg, var(--amber) calc(var(--k, 0) * 100%), transparent 0); }
.cp-mark[data-kind="rescue"] span { border-color: #8dff9a; }
.cp-mark[data-kind="core"] span, .cp-mark[data-kind="demolish"] span { border-color: var(--red); color: #ffb0a8; }
.cp-mark[data-kind="protect"] span { border-color: var(--amber); }
.cp-mark[data-kind="check"] span { opacity: 0.6; }
.cp-mark.rescuing { z-index: 2; }
.cp-mark.rescuing span, .cp-mark.next.rescuing span { padding: 4px 12px; font-size: 19px; background: #0b3a1d; color: #eafff0; border: 2px solid #8dff9a; box-shadow: 0 0 16px rgba(141, 255, 154, 0.55); text-shadow: none; animation: none; font-variant-numeric: tabular-nums; }
.cp-mark.rescuing i { left: -66px; top: 4px; width: 132px; height: 9px; background: linear-gradient(90deg, #8dff9a calc(var(--k, 0) * 100%), rgba(255, 255, 255, 0.18) 0); box-shadow: 0 0 0 2px #06101c; }
/* (a rescue's ring on the street round the people: where to stand. Dashed and faint till a mech's in it,
   then lit, its rim filling as far as the rescue's got) */
.cp-zones { position: absolute; inset: 0; pointer-events: none; }
.cp-zone { position: absolute; left: 0; top: 0; width: 0; height: 0; --k: 0; }
.cp-zone u { position: absolute; box-sizing: border-box; border: 2px dashed rgba(141, 255, 154, 0.7); border-radius: 50%; background: rgba(141, 255, 154, 0.07); }
.cp-zone u::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(#8dff9a calc(var(--k) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask: radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); filter: drop-shadow(0 0 6px #8dff9a); }
.cp-zone.here u { border: 2px solid rgba(141, 255, 154, 0.35); background: rgba(141, 255, 154, 0.1); box-shadow: 0 0 18px rgba(141, 255, 154, 0.5), inset 0 0 22px rgba(141, 255, 154, 0.3); animation: cp-zone 0.8s ease-in-out infinite alternate; }
@keyframes cp-zone { to { background-color: rgba(141, 255, 154, 0.18); } }
/* (已救出: over where they were, rising and gone) */
.cp-saved { position: absolute; left: 0; top: 0; z-index: 3; white-space: nowrap; pointer-events: none; translate: -50% -100%;
  font: 900 22px/1.2 'Chakra Petch', var(--cjk), sans-serif; color: #eafff0; text-shadow: 0 2px 0 #000, 0 0 14px #8dff9a; animation: cp-saved 1.8s ease-out forwards; }
@keyframes cp-saved { 0% { opacity: 0; scale: 1.6; } 12% { opacity: 1; scale: 1; } 70% { opacity: 1; margin-top: -26px; } 100% { opacity: 0; margin-top: -44px; } }
@keyframes cp-saved-calm { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cp-zone.here u { animation: none; } .cp-saved { animation: cp-saved-calm 1.8s linear forwards; } }
.cp-mark.next { z-index: 1; }
.cp-mark.next span { opacity: 1; padding: 3px 9px; font-size: 17px; background: var(--amber); color: #1a0f00; border-color: #fff; text-shadow: none; box-shadow: 0 0 14px rgba(255, 177, 46, 0.6); animation: cp-bob 0.7s ease-in-out infinite alternate; }
@keyframes cp-bob { to { translate: 0 -5px; } }
/* the next objective's spot on the street: a stem down to it, a ring pinging there */
.cp-beacon { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.cp-stem { position: absolute; left: -1px; bottom: 0; width: 3px; height: var(--h, 0px); background: linear-gradient(0deg, var(--amber), rgba(255, 177, 46, 0.1)); }
.cp-ground { position: absolute; left: -30px; top: -12px; width: 60px; height: 24px; border: 3px solid var(--amber); border-radius: 50%; box-shadow: 0 0 10px var(--amber); animation: cp-ping 1.1s ease-out infinite; }
@keyframes cp-ping { from { transform: scale(0.35); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
/* off the picture: an arrow at its edge pointing the way, how far (the objective amber, a boss magenta, the nearest enemy red) */
.cp-pointers { position: absolute; inset: 0; overflow: hidden; }
.cp-arrow { --c: var(--amber); position: absolute; left: 0; top: 0; width: 0; height: 0; }
.cp-arrow[data-kind="boss"] { --c: #ff5aa0; }
.cp-arrow[data-kind="foe"] { --c: #ff8a7a; }
.cp-arrow[data-kind="tree"] { --c: #ff5145; }
.cp-arrow[data-kind="foe"] span { color: #ffe1ae; font-weight: 900; border-color: #ff955b; background: rgba(40, 15, 15, .94); }
/* Keep the failed target's integrity visible while the tower falls. */
.landmark-collapse :is(.cp-pointers, .cp-marks, .cp-zones, .cp-beacon, .cards, .tags, .bills, .minimap, .chat) { visibility: hidden; }
.cp-arrow i { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 8px color-mix(in srgb, var(--c) 60%, transparent)); }
.cp-arrow i::before { content: ''; position: absolute; inset: 0; background: var(--c); clip-path: polygon(100% 50%, 14% 6%, 34% 50%, 14% 94%); animation: cp-nudge 0.6s ease-in-out infinite alternate; }
@keyframes cp-nudge { to { translate: 5px 0; } }
.cp-arrow span { position: absolute; left: 0; top: 0; padding: 2px 8px; font: 700 15px/1.25 'Chakra Petch', var(--cjk), sans-serif; color: #fff; white-space: nowrap; background: rgba(9, 16, 30, 0.85); border: 1px solid var(--c); border-left-width: 3px; }
/* the main objective's arrow, bigger than the rest: a wide chevron outlined in white with a ring pinging round it */
.cp-arrow[data-kind="goal"] i { left: -34px; top: -34px; width: 68px; height: 68px;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 0 3px #000) drop-shadow(0 0 16px color-mix(in srgb, var(--c) 85%, transparent)); }
.cp-arrow[data-kind="goal"] i::before { clip-path: polygon(100% 50%, 8% 2%, 34% 50%, 8% 98%); animation-duration: 0.45s; }
.cp-arrow[data-kind="goal"]::before { content: ''; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border: 3px solid var(--c); border-radius: 50%; box-shadow: 0 0 14px var(--c); animation: cp-ping 1.2s ease-out infinite; }
.cp-arrow[data-kind="goal"] span { padding: 4px 12px; font-size: 21px; border-width: 2px; border-left-width: 6px; background: rgba(9, 16, 30, 0.94); box-shadow: 0 0 14px rgba(255, 177, 46, 0.45); }
.cp-over { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.cp-over span { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); padding: 1px 7px; font: 700 13px/1.3 'Chakra Petch', var(--cjk), sans-serif; color: #ffe0ee; white-space: nowrap; background: rgba(9, 16, 30, 0.78); border-bottom: 2px solid #ff5aa0; }
.cp-hud.jam .cp-beacon, .cp-hud.jam .cp-pointers { display: none; }
.cp-flash { position: absolute; inset: 0; background: #e8f2ff; opacity: 0; mix-blend-mode: screen; }
.cp-hud.emp { animation: cp-glitch 0.18s steps(3) infinite; }
@keyframes cp-glitch { 0% { transform: translate(0, 0); filter: none; } 33% { transform: translate(3px, -1px); filter: hue-rotate(90deg); } 66% { transform: translate(-2px, 1px); filter: saturate(3); } }

@media (max-width: 640px), (max-height: 520px) and (orientation: landscape) {
  .cp-up { grid-template-columns: 1fr auto; }
  .cp-up .cp-desc { grid-column: 1 / -1; }
  .cp-obj { top: calc(96px + var(--safe-t)); font-size: 12px; }
  .cp-obj-goal { display: none; }
}

/* ---- the art (js/campaign/art.js): the scene behind the sheet, portraits, faces, icons */
.cp-scene { position: absolute; inset: 0; background: #0b1322 center / cover no-repeat; transition: background-image 0.4s; }
.cp-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 19, 34, 0.35), rgba(11, 19, 34, 0.72) 60%, rgba(11, 19, 34, 0.9)); }
.cp-sheet { background: rgba(9, 16, 30, 0.86); }
.cp-icon { display: inline-block; flex: none; width: 28px; height: 28px; vertical-align: middle; background-repeat: no-repeat; }
.cp-icon.xs { width: 18px; height: 18px; margin-right: 4px; }
.cp-icon.sm { width: 22px; height: 22px; margin-right: 4px; }
.cp-icon.up { width: 44px; height: 44px; }
.cp-icon.rank { width: 148px; height: 148px; }
.cp-face { width: 100%; aspect-ratio: 300 / 360; background-repeat: no-repeat; }
.cp-face.sm { width: 64px; }
.cp-face.radio { display: flex; align-items: center; justify-content: center; gap: 5px; aspect-ratio: 1; background: rgba(47, 210, 255, 0.08); }
.cp-face.radio i { width: 6px; height: 40%; background: var(--line); animation: cp-wave 0.9s ease-in-out infinite; }
.cp-face.radio i:nth-child(2) { animation-delay: 0.15s; height: 60%; }
.cp-face.radio i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cp-wave { 50% { transform: scaleY(0.4); } }
.cp-portrait.art { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cp-portrait.none { display: grid; place-items: center; aspect-ratio: 3 / 4; background: var(--glass); font: 900 40px 'Chakra Petch', var(--cjk), sans-serif; color: var(--line); }

/* (the call sign stencilled across the foot of the art, in the mech's glow: the cards and the profile) */
.cp-up { grid-template-columns: 44px 7em 1fr auto 8.5em; }


/* ---- the HUD's radio, the surprise's banner, the side objectives, the cut-in */
.cp-side { position: absolute; top: calc(152px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: grid; gap: 3px; justify-items: center; }
.cp-side div { padding: 3px 12px; background: rgba(9, 16, 30, 0.75); border-left: 3px solid var(--red); font-size: 13px; white-space: nowrap; }
.cp-side div[data-kind="chance"] { border-left-color: var(--amber); }
.cp-side div[data-kind="good"] { border-left-color: var(--line); }
.cp-side i { font: 700 13px 'Chakra Petch', sans-serif; font-style: normal; color: var(--ink); margin-left: 6px; }
.cp-side em { font: 700 13px 'Chakra Petch', var(--cjk), sans-serif; font-style: normal; color: var(--amber); margin-left: 6px; }
.cp-side:not(:empty) ~ .cp-bosses { top: calc(186px + var(--safe-t)); }
#hud:has(.cp-boss) .cp-event { margin-top: 52px; }
/* (the radio up on the left under the roster, out of the fight; each line a few seconds) */
.cp-radio { position: absolute; left: calc(16px + var(--safe-l)); top: calc(128px + var(--safe-t)); width: min(360px, 30vw); min-width: 240px; display: grid; grid-template-columns: 60px 1fr; gap: 9px; align-items: center;
  padding: 6px 10px 7px 6px; background: rgba(9, 16, 30, 0.86); border-left: 3px solid var(--line); box-shadow: 0 6px 24px #0008; }
.cp-radio.on { animation: cp-radio 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes cp-radio { from { transform: translateX(-30px); opacity: 0; } }
.cp-radio b { display: inline-block; padding: 0 8px; margin-bottom: 2px; background: var(--line); color: #06101c; font-size: 12px; font-weight: 900; transform: skewX(-12deg); }
.cp-radio b.call { background: #06101c; border: 1px solid var(--pc); color: var(--pc); font: italic 900 14px/1.35 'Chakra Petch', sans-serif; letter-spacing: 0.16em; text-shadow: 0 0 8px color-mix(in srgb, var(--pc) 60%, transparent); }
.cp-radio p { margin: 0; font-size: 14px; line-height: 1.45; }
:root.touch .cp-radio { top: calc(176px + var(--safe-t)); }
/* (a surprise's banner: across the top of the picture, a few seconds) */
.cp-alert { position: absolute; left: 0; right: 0; top: calc(158px + var(--safe-t)); display: grid; justify-items: center; padding: 6px 0 8px; transform: skewY(-3deg);
  background: linear-gradient(90deg, transparent, rgba(120, 14, 10, 0.92) 16%, rgba(120, 14, 10, 0.92) 84%, transparent); border-block: 2px solid var(--red); }
.cp-alert[data-kind="chance"] { background: linear-gradient(90deg, transparent, rgba(110, 66, 0, 0.92) 16%, rgba(110, 66, 0, 0.92) 84%, transparent); border-color: var(--amber); }
.cp-alert[data-kind="good"] { background: linear-gradient(90deg, transparent, rgba(0, 70, 96, 0.92) 16%, rgba(0, 70, 96, 0.92) 84%, transparent); border-color: var(--line); }
.cp-alert small { font-weight: 900; letter-spacing: 0.4em; color: #ffd8d2; animation: cp-blink 0.5s steps(2) 4; }
.cp-alert b { font-size: clamp(22px, 3.4vw, 40px); font-weight: 900; font-style: italic; color: #fff; text-shadow: 0 3px 0 #000, 0 0 20px var(--red); }
.cp-alert span { font-size: 13px; color: #ffe9e4; max-width: 90vw; text-align: center; }
.cp-alert.on { animation: cp-alert 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.cp-alert.on.short { animation-duration: 2s; }
@keyframes cp-alert { 0% { clip-path: inset(50% 0 50% 0); } 8% { clip-path: inset(0 0 0 0); } 85% { opacity: 1; } 100% { opacity: 0; } }
/* (a disaster coming on, 突發事件: big under the rail in the alert's hazard stripes (staging.js .st-alert),
   flashing three times, held, then fading; as wide as it is, never the window's, and over nothing for long) */
.cp-event { --tone: var(--red); position: absolute; left: 50%; top: calc(var(--cp-status-bottom, 110px) + 32px); z-index: 2; box-sizing: border-box; width: min(var(--w-l), 100% - 32px);
  padding: 7px; translate: -50% 0; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tone) 85%, #000) 0 16px, color-mix(in srgb, var(--tone) 40%, #000) 16px 32px); }
.cp-event div { display: grid; justify-items: center; gap: 6px; padding: 10px 22px 12px; background: rgba(3, 6, 14, 0.88); text-align: center; }
.cp-event b { font-family: var(--ming); font-weight: 900; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.12; color: #fff; text-shadow: 0 3px 0 #000, 0 0 22px var(--tone); text-wrap: balance; }
.cp-event span { font-size: 15px; line-height: 1.45; color: #ffe2dc; text-wrap: balance; }
.cp-event.on { animation: cp-event 5s linear forwards; }
@keyframes cp-event { 0% { opacity: 0; scale: 1.3; } 4% { opacity: 1; scale: 1; } 10%, 22%, 34% { opacity: 0.3; } 16%, 28%, 40%, 78% { opacity: 1; } 100% { opacity: 0; } }
@media (max-height: 520px) {
  .cp-event { top: calc(var(--cp-status-bottom, 96px) + 12px); padding: 5px; }
  .cp-event div { padding: 6px 14px 8px; gap: 3px; }
  .cp-event b { font-size: 24px; }
  .cp-event span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .cp-event.on { animation: cp-event-calm 5s linear forwards; } }
@keyframes cp-event-calm { 0%, 78% { opacity: 1; } 100% { opacity: 0; } }
/* (a phase begun: what it asks, once, in the middle of the picture (hud.js objective): the phase and its kind
   small over it, the objective in the cards' heavy type, what to mind under it; cut open like a band, held,
   then faded. As wide as it is, never the window's; nothing under it is blocked) */
.cp-goal { position: absolute; left: 50%; top: 42%; z-index: 2; box-sizing: border-box; width: min(var(--w-l), 100% - 32px); translate: -50% -50%;
  pointer-events: none; opacity: 0; border-block: 2px solid var(--amber); background: linear-gradient(90deg, transparent, rgba(3, 6, 14, 0.9) 12%, rgba(3, 6, 14, 0.9) 88%, transparent); }
.cp-goal div { display: grid; justify-items: center; gap: 6px; padding: 12px 28px 14px; text-align: center; }
.cp-goal small { font: 700 13px/1.2 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0.24em; color: var(--amber); }
.cp-goal b { font-family: var(--ming); font-weight: 900; font-size: clamp(28px, 3.8vw, 48px); line-height: 1.12; color: #fff; text-shadow: 0 3px 0 #000, 0 0 22px rgba(255, 177, 46, 0.55); text-wrap: balance; }
.cp-goal ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 2px 0 0; padding: 0; list-style: none; }
.cp-goal li { font-size: 15px; line-height: 1.4; color: #f2ead8; font-variant-numeric: tabular-nums; }
.cp-goal li::before { content: '▸ '; color: var(--amber); }
.cp-goal.on { animation: cp-goal 5.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes cp-goal { 0% { opacity: 1; clip-path: inset(50% 0 50% 0); } 6% { clip-path: inset(0 0 0 0); } 84% { opacity: 1; } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@media (max-height: 520px) {
  .cp-goal { top: 46%; }
  .cp-goal div { padding: 6px 16px 8px; gap: 3px; }
  .cp-goal b { font-size: 24px; }
  .cp-goal small, .cp-goal li { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .cp-goal.on { animation: cp-event-calm 5.5s linear forwards; } }
/* (the ultimate's cut-in, big across the middle of the picture (a mission is one player's): a white flash
   and the picture dimmed, a slash cut across it that splits open into a band (the pilot in the cockpit,
   speed lines streaming past, the move's name slammed in over them), then the band cut away to the right) */
.cp-cutin { --c: var(--amber); --half: min(19vh, 160px); position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.cp-cutin::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; }
.cp-cutin-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 25%, rgba(3, 6, 14, 0.75)), rgba(3, 6, 14, 0.3); opacity: 0; }
.cp-cutin-band { position: absolute; left: -10%; right: -10%; top: 50%; height: calc(var(--half) * 2); transform: translateY(-50%) skewY(-6deg); overflow: hidden; background: #0b1322;
  border-block: 4px solid var(--c); box-shadow: 0 0 70px color-mix(in srgb, var(--c) 55%, transparent); clip-path: inset(50% 0 50% 0); }
.cp-cutin-band::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #0b1322) 8%, rgba(11, 19, 34, 0.78) 40%, transparent 68%); }
.cp-cutin-lines { position: absolute; inset: 0; z-index: 2; opacity: 0.7;
  background: repeating-linear-gradient(180deg, transparent 0 11px, color-mix(in srgb, var(--c) 65%, transparent) 11px 13px, transparent 13px 29px, rgba(255, 255, 255, 0.28) 29px 30px, transparent 30px 47px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 160px, transparent 160px 230px, #000 230px 270px, transparent 270px 480px);
  mask: repeating-linear-gradient(90deg, #000 0 160px, transparent 160px 230px, #000 230px 270px, transparent 270px 480px); }
.cp-cutin-art { position: absolute; top: -14%; bottom: -14%; right: 9%; aspect-ratio: 7 / 3; background: center / cover no-repeat; transform: skewY(6deg);
  -webkit-mask: linear-gradient(90deg, transparent, #000 32%); mask: linear-gradient(90deg, transparent, #000 32%); }
.cp-cutin-name { position: absolute; z-index: 3; left: 18%; top: 50%; display: grid; justify-items: start; gap: 4px; transform: translateY(-50%) skewY(6deg); }
.cp-cutin-name small { font: italic 900 clamp(14px, 1.6vw, 22px) 'Chakra Petch', var(--font), sans-serif; letter-spacing: 0.3em; color: var(--c); text-shadow: 0 2px 0 #000, 0 0 12px #000; }
.cp-cutin-name b { font: italic 900 clamp(42px, 7vw, 112px)/1 var(--font); letter-spacing: 0.02em; white-space: nowrap; color: #fff; -webkit-text-stroke: 2px #000; paint-order: stroke fill;
  text-shadow: 0 5px 0 #000, 0 0 30px var(--c), 0 0 70px color-mix(in srgb, var(--c) 70%, transparent); transform-origin: 30% 60%; }
.cp-cutin-slash { --from: inset(-30px 100% -30px 0); position: absolute; left: -10%; right: -10%; top: 50%; height: 6px; margin-top: -3px; transform: skewY(-6deg); opacity: 0;
  background: linear-gradient(90deg, transparent, #fff 18%, color-mix(in srgb, var(--c) 50%, #fff) 50%, #fff 82%, transparent); box-shadow: 0 0 22px var(--c), 0 0 6px #fff; }
.cp-cutin-slash.two { --to: var(--half); --from: inset(-30px 0 -30px 100%); }
.cp-cutin-slash:not(.two) { --to: calc(var(--half) * -1); }
.cp-cutin.on::after { animation: cp-ult-flash 1.6s ease-out forwards; }
.cp-cutin.on .cp-cutin-dim { animation: cp-ult-dim 1.6s ease-out forwards; }
.cp-cutin.on .cp-cutin-band { animation: cp-ult-band 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.cp-cutin.on .cp-cutin-slash { animation: cp-ult-slash 1.6s cubic-bezier(0.3, 0.9, 0.3, 1) forwards; }
.cp-cutin.on .cp-cutin-lines { animation: cp-ult-lines 0.3s linear infinite; }
.cp-cutin.on .cp-cutin-art { animation: cp-ult-art 1.6s linear forwards; }
.cp-cutin.on .cp-cutin-name b { animation: cp-ult-name 1.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; }
@keyframes cp-ult-flash { 0% { opacity: 0.55; } 12%, 100% { opacity: 0; } }
@keyframes cp-ult-dim { 0% { opacity: 0; } 8%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cp-ult-slash { 0% { clip-path: var(--from); translate: 0 0; opacity: 1; } 10% { clip-path: inset(-30px 0); translate: 0 0; opacity: 1; } 21% { translate: 0 var(--to); opacity: 1; } 42%, 100% { clip-path: inset(-30px 0); translate: 0 var(--to); opacity: 0; } }
@keyframes cp-ult-band { 0%, 10% { clip-path: inset(50% 0 50% 0); } 21% { clip-path: inset(0 0 0 0); } 84% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 100%); opacity: 0.7; } }
@keyframes cp-ult-lines { to { -webkit-mask-position: -480px 0; mask-position: -480px 0; } }
@keyframes cp-ult-art { from { translate: 10% 0; } to { translate: -3% 0; } }
@keyframes cp-ult-name { 0%, 17% { opacity: 0; scale: 1.9; filter: brightness(2); } 28% { opacity: 1; scale: 1; filter: none; } 100% { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cp-cutin.on::after, .cp-cutin-slash { display: none; }
  .cp-cutin.on *, .cp-cutin.on .cp-cutin-name b { animation: none !important; }
  .cp-cutin.on .cp-cutin-dim { opacity: 1; }
  .cp-cutin.on .cp-cutin-band { clip-path: none; }
}
.hud:has(.cp-hud) .cutin { display: none; }
.cp-hud.jam .cp-marks { display: none; }
.cp-mark[data-kind="stranded"] span { border-color: #8dff9a; }
.cp-mark[data-kind="dud"] span, .cp-mark[data-kind="meteor"] span { border-color: var(--red); color: #ffb0a8; animation: cp-blink 0.8s steps(2) infinite; }

@media (max-width: 640px), (max-height: 520px) and (orientation: landscape) {
  .cp-up { grid-template-columns: 36px 1fr auto; }
  .cp-up .cp-pips { display: none; }
  .cp-icon.up { width: 36px; height: 36px; }
  .cp-radio { width: min(300px, 38vw); grid-template-columns: 48px 1fr; top: calc(128px + var(--safe-t)); bottom: auto; padding: 6px 10px 8px 6px; }
  .cp-radio p { font-size: 12px; line-height: 1.4; }
  .cp-side { top: calc(124px + var(--safe-t)); }
  .cp-side div { font-size: 11px; padding: 2px 8px; }
  .cp-alert { top: calc(108px + var(--safe-t)); }
  .cp-radio { min-width: 0; }
  .cp-radio p { font-size: 13px; }
  .cp-arrow span { font-size: 13px; padding: 1px 6px; }
  .cp-arrow[data-kind="goal"] span { font-size: 16px; padding: 2px 8px; }
  .cp-arrow[data-kind="goal"] i { left: -26px; top: -26px; width: 52px; height: 52px; }
  .cp-arrow[data-kind="goal"]::before { left: -32px; top: -32px; width: 64px; height: 64px; }
  .cp-mark.next span { font-size: 14px; }
}
.cp-mark[data-kind="escort"] span { border-color: #8dff9a; }
.cp-mark[data-kind="goal"] span { border-color: var(--amber); }

/* ==== the ten missions (campaign/README.md): the 演出, the video call, the radar, the interims ==== */

/* ---- the SKIP button (skip.js, docs/UIUX.md 7): bottom right, see-through, 44 px at least; armed (pressed once), amber */
.skip-btn { position: absolute; z-index: 5; right: calc(16px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); min-width: 96px; min-height: 44px; margin: 0; padding: 0 16px;
  font: 700 15px 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0.12em; white-space: nowrap; color: rgba(230, 241, 255, 0.82); background: rgba(9, 16, 30, 0.38);
  border: 1px solid var(--line-dim); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); pointer-events: auto; }
.skip-btn:hover, .skip-btn:focus-visible { color: #fff; border-color: var(--line); outline: none; }
.cs > .skip-btn { z-index: 70; }
.skip-btn.armed { color: var(--amber); border-color: rgba(255, 177, 46, 0.7); background: rgba(40, 24, 4, 0.55); letter-spacing: 0.04em; }

/* ---- a cutscene (cutscene.js, docs/STORY.md 2.8): over the HUD, under the pause menu; black bars, its subtitles, the call, a picture over it all, the fade */
.cs { --bar: 11.5vh; position: fixed; inset: 0; z-index: 8; pointer-events: none; font-family: var(--font); color: var(--ink); }
.cs-news { position: absolute; inset: 0; z-index: 1; }
.cs-still { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #000; opacity: 0; transition: opacity 0.5s; }
.cs-still.on { opacity: 1; }
.cs-still i { position: absolute; inset: 0; background: center / cover no-repeat; transform-origin: 50% 50%; }
.cs-bars { position: absolute; inset: 0; z-index: 2; }
.cs-bars::before, .cs-bars::after { content: ''; position: absolute; left: 0; right: 0; height: var(--bar); background: #000; transition: transform 0.45s ease; }
.cs-bars::before { top: 0; transform: translateY(-100%); }
.cs-bars::after { bottom: 0; transform: translateY(100%); }
.cs.bars-on .cs-bars::before, .cs.bars-on .cs-bars::after { transform: none; }
.cs-sub { position: absolute; z-index: 3; left: 8%; right: 8%; bottom: calc(var(--bar) + 2.2vh); margin: 0; text-align: center; font-weight: 700; font-size: clamp(17px, 2.1vw, 26px); line-height: 1.4; color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 2px 4px #000, 0 0 12px rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.2s; }
.cs:not(.bars-on) .cs-sub { bottom: calc(14vh + var(--safe-b)); }
.cs-sub.on { opacity: 1; }
.cs-sub b { margin-right: 0.5em; font-weight: 900; color: var(--amber); }
.cs-sub.narrator { color: #e6ecf4; }
.cs-call { position: absolute; z-index: 3; left: calc(16px + var(--safe-l)); top: calc(var(--bar) + 12px); width: min(300px, 42vw); }
.cs:not(.bars-on) .cs-call { top: calc(16px + var(--safe-t)); }
.cs-fade { position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; }
@media (orientation: portrait) { .cs { --bar: 9vh; } .cs-sub { left: 5%; right: 5%; } }

/* ---- the documentary's layer (docu.js: the prologue's 重現): over the picture, under the HUD; the tag, the stamp, scanlines and a vignette */
.doc-layer { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse at 50% 48%, transparent 55%, rgba(0, 0, 0, 0.55)), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px); }
.doc-tag { position: absolute; top: calc(22px + var(--safe-t)); right: calc(26px + var(--safe-r)); display: flex; font: 900 clamp(14px, 1.6vw, 20px) var(--cjk), sans-serif; letter-spacing: 0.1em; }
.doc-tag b { padding: 4px 12px; background: #d8232a; color: #fff; }
.doc-tag span { padding: 4px 12px; background: rgba(0, 0, 0, 0.72); color: #ffe14d; font-weight: 700; }
.doc-rec { position: absolute; left: calc(28px + var(--safe-l)); bottom: calc(26px + var(--safe-b)); font: 700 clamp(13px, 1.4vw, 18px) 'Chakra Petch', var(--cjk), monospace; letter-spacing: 0.14em; color: #ffe9b0; text-shadow: 0 0 6px rgba(0, 0, 0, 0.9); font-variant-numeric: tabular-nums; }
.doc-rec em { margin-right: 0.6em; font-style: normal; color: #ff5a4a; animation: doc-rec 1s steps(1) infinite; }
@keyframes doc-rec { 50% { opacity: 0.25; } }
.doc-layer.bars .doc-tag { top: calc(11.5vh + 14px); right: calc(72px + var(--safe-r)); }
.doc-layer.bars .doc-rec { bottom: calc(11.5vh + 14px); }
/* (and a cutscene's subtitles lifted over it, the whole width still theirs: a long line never runs into it) */
body.doc-foot .cs.bars-on .cs-sub { bottom: calc(var(--bar) + 14px + 1.9em); }
/* (in play, clear of the HUD: the tag under the enemy's bar, left of the pause button; the stamp under the players' bars) */
.doc-layer:not(.bars) .doc-tag { top: calc(66px + var(--safe-t)); right: calc(72px + var(--safe-r)); }
.doc-layer:not(.bars) .doc-rec { bottom: auto; top: calc(66px + var(--safe-t)); }
@media (prefers-reduced-motion: reduce) { .doc-rec em { animation: none; } }

/* ---- the prologue's HUD (prologue-hud.js): no bill, no versus bars, no feed, no bubbles; the objective or a count at the top, the controls at the foot, the marks in the city */
.hud.prologue .hud-top, .hud.prologue .feed, .hud.prologue .hud-banner, .hud.prologue .chat, .hud.prologue .bills, .hud.prologue .card-face, .hud.prologue .cutin, .hud.prologue .place-tags { display: none !important; }
.pro { position: absolute; inset: 0; pointer-events: none; }
.pro-call { position: absolute; left: calc(16px + var(--safe-l)); top: calc(16px + var(--safe-t)); width: min(300px, 40vw); }
/* (the documentary's stamp over the young pilot's card, the call having the top left) */
.hud.prologue .minimap { display: none !important; }
#hud.prologue ~ .doc-layer:not(.bars) .doc-rec { top: auto; bottom: calc(242px + var(--safe-b)); }
/* the objective, and the controls to press under it: big, where the eye already is */
.pro-head { position: absolute; top: calc(18px + var(--safe-t)); left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: 10px; max-width: min(94vw, 900px); }
.pro-top { display: grid; justify-items: center; gap: 6px; }
.pro-count, .pro-goal { padding: 6px 18px; background: rgba(9, 16, 30, 0.8); border: 1px solid var(--line-dim); font: 700 16px var(--cjk), sans-serif; white-space: nowrap; }
.pro-count b { margin: 0 0.2em; font: 900 22px 'Chakra Petch', sans-serif; color: var(--line); }
.pro-goal small { margin-right: 0.6em; color: var(--dim); font-weight: 700; }
.pro-goal b { color: var(--line); font-weight: 900; }
.pro-goal span { margin-left: 0.8em; color: var(--ink); font-weight: 700; }
.pro-tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; padding: 12px 24px; background: rgba(9, 16, 30, 0.9); border: 2px solid var(--line); box-shadow: 0 0 18px color-mix(in srgb, var(--line) 35%, transparent); font: 800 24px var(--cjk), sans-serif; }
.pro-tips span { white-space: nowrap; }
.pro-tips kbd, .pro-move .key { display: inline-block; min-width: 1.6em; padding: 0 0.35em; margin-right: 0.2em; border: 1px solid var(--line); color: var(--line); font: 700 13px 'Chakra Petch', var(--cjk), sans-serif; text-align: center; }
.pro-tips kbd { font-family: 'Chakra Petch', var(--cjk), sans-serif; min-width: 1.7em; padding: 0.05em 0.5em; margin-right: 0.35em; border-width: 2px; background: rgba(47, 210, 255, 0.12); font-size: 1em; font-weight: 800; }
.pro-marks { position: absolute; inset: 0; }
.pro-mark { position: absolute; left: 0; top: 0; display: grid; justify-items: center; }
.pro-pin { position: absolute; bottom: 30px; translate: -50% 0; padding: 3px 8px 4px; background: rgba(9, 16, 30, 0.86); border: 1px solid var(--line); font: 700 13px var(--cjk), sans-serif; white-space: nowrap; }
.pro-pin::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 18px; background: var(--line); }
.pro-ring { position: absolute; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--line) var(--p), rgba(255, 255, 255, 0.14) 0); -webkit-mask: radial-gradient(circle, transparent 23px, #000 24px); mask: radial-gradient(circle, transparent 23px, #000 24px); }
.pro-mark small { position: absolute; top: 38px; translate: -50% 0; font: 700 13px var(--cjk), sans-serif; color: #fff; text-shadow: 0 0 4px #000; white-space: nowrap; }
/* (the card: the reenactment's moves in place of the mech's specials) */
#hud .card.pro-own-moves .card-moves > .mv { display: none !important; }
/* (the young pilot's card: the reenactment's machine has no gun of the mech's under it) */
#hud .card.pro-own-moves .g-ammo { display: none !important; }
.pro-move { display: grid; place-content: center; justify-items: center; gap: 4px; min-height: 52px; padding: 4px 6px; border: 1px solid var(--line-dim); background: rgba(255, 255, 255, 0.04); font: 700 13px var(--cjk), sans-serif; white-space: nowrap; }
/* (touch, the phone held sideways: the card has the top left and the controls the bottom corners; the objective at the
   top in the middle, over the pause button; SKIP top right, the radio under it; the tips at the foot between the stick
   and the buttons; on a short screen no documentary tag or stamp while it's played) */
:root.touch .pro-head { top: calc(10px + var(--safe-t)); left: calc(50% + 90px); max-width: min(56vw, 560px); }
:root.touch .pro-tips { padding: 8px 14px; font-size: 17px; gap: 6px 16px; }
:root.touch .pro-layer > .skip-btn { top: calc(10px + var(--safe-t)); bottom: auto; }
:root.touch .pro-call { left: auto; right: calc(16px + var(--safe-r)); top: calc(112px + var(--safe-t)); width: min(200px, 26vw); }
@media (max-height: 560px) {
  :root.touch #hud.prologue ~ .doc-layer:not(.bars) .doc-tag, :root.touch #hud.prologue ~ .doc-layer:not(.bars) .doc-rec { display: none; }
  :root.touch .pro-call { top: calc(62px + var(--safe-t)); width: min(180px, 24vw); }
}
/* (out of the picture: the mark at its edge, an arrow pointing on to it) */
.pro-arrow { display: none; }
.pro-mark.edge .pro-ring, .pro-mark.edge small { display: none; }
.pro-mark.edge .pro-pin { bottom: 22px; }
.pro-mark.edge .pro-pin::after { display: none; }
.pro-mark.edge .pro-arrow { display: block; position: absolute; translate: -50% -50%; rotate: var(--a, 0rad); width: 0; height: 0; border-block: 9px solid transparent; border-left: 16px solid var(--line); filter: drop-shadow(0 0 4px #000); }
/* (the one key the last blow wants, pulsing) */
.pro-tips.pulse { border-color: var(--line); animation: pro-pulse 1.1s ease-in-out infinite; }
.pro-tips.pulse kbd { font-size: 1em; }
@keyframes pro-pulse { 50% { box-shadow: 0 0 22px color-mix(in srgb, var(--line) 60%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pro-tips.pulse { animation: none; } }

/* ---- the prologue's own layer (prologue.js): over the HUD and the cutscenes, under the pause menu: the black between its parts, the last blow's cut-in and line, 「選擇你的駕駛員」, its SKIP */
.pro-layer { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.pro-layer > .skip-btn { pointer-events: auto; }
.pro-cover { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 0.25s; }
.pro-cover.on { opacity: 1; transition: none; }
.pro-cut { position: absolute; inset: 0; }
.pro-layer .pro-poem { position: absolute; z-index: 1; }
/* (the line over the cut-in's band: under it the slant reaches the card) */
.pro-layer .pro-poem .cs-sub { top: calc(14vh + var(--safe-t)); bottom: auto; }
/* (a tap goes on to the next line: by SKIP, quiet, its caret breathing) */
.pro-next { position: absolute; z-index: 4; right: calc(16px + 96px + 14px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); min-height: 44px; display: flex; align-items: center; gap: 8px;
  font: 700 13px var(--font); letter-spacing: 0.08em; color: rgba(230, 236, 244, 0.72); text-shadow: 0 1px 3px #000; }
.pro-next kbd { padding: 2px 7px; border: 1px solid rgba(230, 236, 244, 0.45); border-radius: 3px; font: 700 12px 'Chakra Petch', var(--font); }
.pro-next i { font-style: normal; color: var(--line); animation: pro-next 1.2s ease-in-out infinite; }
@keyframes pro-next { 50% { opacity: 0.25; transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .pro-next i { animation: none; } }
:root.touch .pro-next { right: calc(16px + var(--safe-r)); }
.pro-ask { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; animation: pro-ask 0.6s ease-out both; }
.pro-ask small { font: 700 clamp(13px, 1.6vw, 18px) 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0.4em; color: var(--line); }
.pro-ask b { font: 900 clamp(30px, 5vw, 52px)/1.2 var(--font); letter-spacing: 0.16em; color: #f4f4ee; }
@keyframes pro-ask { from { opacity: 0; transform: scale(1.04); } }

/* ---- the 演出 (staging.js): heavy Ming type squeezed narrow, our own; over the fight and the launch */
.st, .cp-event, .cp-goal { --ming: 'Noto Serif TC', 'Source Han Serif TC', 'Songti TC', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif KR', 'Nanum Myeongjo', 'PMingLiU', serif; }
.st {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.st-cover { position: absolute; inset: 0; display: grid; place-items: center; background: #000; opacity: 0; }
.st-cover.on { opacity: 1; }
.st-card { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: end; gap: 0 0.3em; color: #f4f4ee; font-family: var(--ming); font-weight: 900; line-height: 0.95; transform: scaleX(0.78); transform-origin: center; }
.st-card small { grid-column: 1; font-size: clamp(22px, 4.2vw, 54px); letter-spacing: 0.04em; }
.st-card b { grid-column: 1; font-size: clamp(42px, 9.6vw, 148px); letter-spacing: -0.01em; }
.st-card i { grid-column: 2; grid-row: 1 / span 2; writing-mode: vertical-rl; font-style: normal; font-size: clamp(14px, 2vw, 26px); letter-spacing: 0.18em; opacity: 0.85; }
:root:lang(en) .st-card i { writing-mode: horizontal-tb; grid-column: 1; grid-row: 3; align-self: start; margin-top: 0.6em; letter-spacing: 0.08em; }
.st-op { display: grid; justify-items: center; gap: 6px; color: #f4f4ee; font-family: var(--ming); font-weight: 900; text-align: center; }
.st-op small { font-size: clamp(14px, 2vw, 22px); letter-spacing: 0.6em; color: var(--amber); }
.st-op b { font-size: clamp(36px, 7.4vw, 110px); transform: scaleX(0.8); line-height: 1; }
.st-op span { font: 700 clamp(12px, 1.5vw, 18px) 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0.2em; color: #9fe8ff; }
.st-band { position: absolute; left: 0; right: 0; top: 38%; display: grid; place-items: center; padding: 14px 0; background: rgba(0, 0, 0, 0.82); clip-path: inset(50% 0 50% 0); transition: clip-path 0.18s ease-out; }
.st-band.on { clip-path: inset(0 0 0 0); }
.st-band div { display: grid; justify-items: center; color: #f4f4ee; font-family: var(--ming); font-weight: 900; }
.st-band small { font-size: clamp(12px, 1.6vw, 18px); letter-spacing: 0.4em; color: var(--amber); }
.st-band b { font-size: clamp(30px, 5.4vw, 72px); transform: scaleX(0.8); line-height: 1.05; }
.st-telop { position: absolute; left: calc(18px + var(--safe-l)); bottom: calc(210px + var(--safe-b)); display: grid; gap: 2px; padding: 6px 14px 8px 10px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.35) 80%, transparent);
  border-left: 3px solid #f4f4ee; opacity: 0; transform: translateX(-12px); transition: opacity 0.15s, transform 0.15s; }
.st-telop.on { opacity: 1; transform: none; }
.st-telop small { font: 700 12px/1.2 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0.12em; color: #cfd8e8; font-variant-numeric: tabular-nums; }
.st-telop b { font-family: var(--ming); font-weight: 900; font-size: clamp(18px, 2.4vw, 28px); color: #fff; }
.st-alert { --tone: #ff3b30; position: absolute; left: 0; right: 0; top: 24%; display: grid; place-items: center; padding: 10px 0;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tone) 85%, #000) 0 18px, color-mix(in srgb, var(--tone) 45%, #000) 18px 36px); opacity: 0; }
.st-alert[data-tone="blue"] { --tone: #2f8cff; }
.st-alert[data-tone="gold"] { --tone: #ffb12e; }
.st-alert.on { opacity: 1; animation: st-alert 0.6s steps(2) 3; }
@keyframes st-alert { 50% { opacity: 0.55; } }
.st-alert div { display: grid; justify-items: center; padding: 4px 28px; background: rgba(0, 0, 0, 0.78); }
.st-alert b { font-family: var(--ming); font-weight: 900; font-size: clamp(26px, 4.6vw, 60px); color: #fff; transform: scaleX(0.82); }
.st-alert small { font: 700 clamp(11px, 1.4vw, 16px) 'Chakra Petch', sans-serif; letter-spacing: 0.3em; color: color-mix(in srgb, var(--tone) 60%, #fff); }
.st-check { position: absolute; right: calc(24px + var(--safe-r)); top: calc(90px + var(--safe-t)); display: none; min-width: min(360px, 70vw); padding: 10px 14px; background: rgba(4, 12, 20, 0.86); border: 1px solid var(--line-dim); border-left: 3px solid var(--line); }
.st-check.on { display: grid; gap: 4px; }
.st-check header { font: 700 11px 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0.2em; color: var(--dim); }
.st-check div { display: flex; justify-content: space-between; gap: 18px; font: 700 15px/1.4 'Chakra Petch', var(--cjk), sans-serif; color: #cfe9ff; animation: st-type 0.18s steps(4); }
.st-check em { font-style: normal; color: #333; }
.st-check .ok em { color: #7dffa0; }
@keyframes st-type { from { clip-path: inset(0 100% 0 0); } }
.st-count { position: absolute; inset: 0; display: none; place-items: center; }
.st-count.on { display: grid; }
.st-count b { font: 700 clamp(90px, 22vw, 260px)/1 'Chakra Petch', sans-serif; color: #fff; text-shadow: 0 0 24px var(--line), 0 6px 0 rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }
.st-count b.go { font-family: var(--ming); font-weight: 900; font-size: clamp(40px, 8vw, 110px); transform: scaleX(0.82); color: var(--amber); }
.st-count.pulse b { animation: st-pulse 0.9s ease-out; }
@keyframes st-pulse { from { transform: scale(1.35); opacity: 0.4; } 30% { transform: scale(1); opacity: 1; } }
.st-sweep { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 10px; background: rgba(0, 0, 0, 0.88); }
.st-sweep.on { display: grid; }
.st-sweep canvas { width: min(62vw, 820px); height: auto; border: 1px solid #3a3020; }
.st-sweep p { margin: 0; font-family: var(--ming); font-weight: 900; font-size: clamp(18px, 2.6vw, 34px); color: #ffe7a0; }
.st-meter { position: relative; width: min(62vw, 820px); height: 12px; background: #1a1408; border: 1px solid #5a4a20; }
.st-meter i { position: absolute; inset: 0; background: linear-gradient(90deg, #ffb12e, #fff2c8); transform-origin: left; }
.st-meter b { position: absolute; right: 0; top: -22px; font: 700 15px 'Chakra Petch', sans-serif; color: #ffe7a0; }
.st-flash { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 0.12s; }
.st-flash.on { opacity: 1; transition: opacity 0.7s ease-in; }
.st-flash.calm.on { opacity: 0.9; transition: opacity 0.6s; }
@media (prefers-reduced-motion: reduce) { .st-alert.on, .st-count.pulse b { animation: none; } }

/* ---- the mission's panel (top left; its look the HUD's: polaris-hud.css), the side objectives and the video call under it (call.js) */
.cp-left { position: absolute; left: calc(16px + var(--safe-l)); top: calc(16px + var(--safe-t)); width: min(420px, 40vw); display: grid; gap: 6px; justify-items: stretch; pointer-events: none; }
:root .cp-hud .cp-left .cp-obj { position: static; transform: none; max-width: none; display: grid; grid-template-columns: auto 28px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 8px 12px; white-space: normal; }
:root .cp-hud .cp-left .cp-obj-number { display: block; grid-row: 1 / 4; }
:root .cp-hud .cp-left .cp-obj-title { grid-row: 1; grid-column: 3; }
:root .cp-hud .cp-left .cp-obj-goal { display: block; grid-row: 2; grid-column: 3 / -1; font-size: 11px; color: var(--dim); }
:root .cp-hud .cp-left .cp-obj-progress { grid-row: 3; grid-column: 3 / -1; font-size: 13px; }
:root .cp-hud .cp-left .cp-obj-progress:empty { display: none; }
:root .cp-hud .cp-left .cp-side { position: static; transform: none; justify-items: start; }
.cp-left .vc-stack { width: min(300px, 100%); }
.cp-obj-number small { display: block; margin-top: 2px; font-size: 10px; color: var(--amber); }
.cp-obj-icon { display: grid; place-items: center; grid-row: 1 / 3; }
.cp-left .cp-obj.travel { border-top-color: var(--line); }
.cp-hud.prep > :not(.cp-left), .cp-hud.prep .cp-left > :not(.vc-stack) { display: none !important; }
/* (and the fight's panel, the clock and the bill, not till the mission's begun) */
.hud:has(.cp-hud.prep) .hud-top { visibility: hidden; }
.vc-stack { display: grid; gap: 4px; }
.vc { --c: #57d8ff; position: relative; background: #050d16f2; border: 1px solid var(--c); box-shadow: 0 0 0 1px #000, 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transform-origin: 50% 40%; }
.vc[hidden] { display: none; }
.vc.sos { animation: vc-sos 0.9s ease-in-out infinite; }
@keyframes vc-sos { 50% { box-shadow: 0 0 0 1px #000, 0 0 22px #ff4b3e; border-color: #ff9a8a; } }
.vc-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--c) 30%, #0b2236), #03080e 80%); }
.vc-who { position: absolute; inset: 0; }
/* (the faces' cells are 300 x 360, as .cp-face has them: a square box squeezed the portrait) */
.vc-face { position: absolute; left: 50%; top: 6%; height: 94%; aspect-ratio: 300 / 360; transform: translateX(-50%); background-repeat: no-repeat;
  filter: contrast(1.08) saturate(0.92) drop-shadow(2px 0 0 rgba(255, 40, 60, 0.45)) drop-shadow(-2px 0 0 rgba(40, 200, 255, 0.45)); animation: vc-talk 0.42s ease-in-out infinite alternate, vc-flicker 3.7s steps(1) infinite; }
.vc-face.none { display: grid; place-items: center; background: #0b2236; font: 900 40px var(--cjk), sans-serif; color: var(--c); }
.vc.army .vc-face { top: 0; height: 100%; }
.vc.army .vc-text b { display: block; margin: 0 0 2px; font-size: 11px; }
@keyframes vc-talk { to { transform: translateX(-50%) translateY(1.2%) scale(1.012); } }
@keyframes vc-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 0.82; } 48% { opacity: 1; } 83% { opacity: 0.9; } }
.vc-noise { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.1; mix-blend-mode: screen; image-rendering: pixelated; }
/* (no face: a picture taped to the console, the prologue's engineer's; his static short, short, long) */
.vc-face.art { top: 5%; width: 74%; height: auto; aspect-ratio: 1; background-size: cover; background-position: center; border-radius: 2px; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5); animation: none; }
.vc.ssl .vc-noise { animation: vc-ssl 1.7s steps(1) infinite; }
@keyframes vc-ssl { 0% { opacity: 0.6; } 7% { opacity: 0.1; } 14% { opacity: 0.6; } 21% { opacity: 0.1; } 28% { opacity: 0.68; } 58% { opacity: 0.1; } }
@media (prefers-reduced-motion: reduce) { .vc.ssl .vc-noise { animation-duration: 3.4s; } }
.vc.weak .vc-noise { opacity: 0.45; }
.vc.weak .vc-face { filter: blur(1.2px) brightness(0.7) contrast(1.2) drop-shadow(3px 0 0 rgba(255, 40, 60, 0.5)); animation: vc-talk 0.42s ease-in-out infinite alternate, vc-weak 1.3s steps(1) infinite; }
@keyframes vc-weak { 0%, 100% { opacity: 1; } 20% { opacity: 0.2; } 22% { opacity: 1; } 61% { opacity: 0.5; } 64% { opacity: 1; } }
.vc.sos .vc-noise { opacity: 0.2; }
.vc.connecting .vc-noise { opacity: 1; }
.vc.connecting .vc-face { opacity: 0; }
.vc-conn { position: absolute; inset: 0; display: none; place-items: center; font: 700 12px 'Chakra Petch', var(--cjk), sans-serif; letter-spacing: 0.2em; color: #cfe9ff; }
.vc.connecting .vc-conn { display: grid; }
.vc.off { transition: transform 0.32s ease-in, filter 0.32s; transform: scaleY(0.02); filter: brightness(3); }
.vc-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px); pointer-events: none; }
.vc-roll { position: absolute; left: 0; right: 0; height: 18%; background: linear-gradient(transparent, rgba(255, 255, 255, 0.07), transparent); animation: vc-roll 2.6s linear infinite; }
@keyframes vc-roll { from { top: -20%; } to { top: 110%; } }
.vc-top { position: absolute; left: 6px; right: 6px; top: 4px; display: flex; justify-content: space-between; font: 700 10px 'Chakra Petch', sans-serif; text-shadow: 0 1px 2px #000; }
.vc-rec { color: #ff5a64; } .vc-rec b { color: var(--ink); font-weight: 600; } .vc-rec i { font-style: normal; color: var(--ink); }
.vc-sig { color: #9fe8ff; } .vc-sig s { text-decoration: none; opacity: 0.25; }
.vc-plate { position: absolute; left: 0; bottom: 8px; padding: 1px 8px 1px 6px; font: 900 11px var(--cjk), sans-serif; color: #04131c; background: var(--c); }
.vc-sos { position: absolute; right: 6px; top: 20px; padding: 0 6px; font: 900 12px 'Chakra Petch', sans-serif; color: #fff; background: #ff4b3e; animation: cp-blink 0.6s steps(2) infinite; }
.vc-sos[hidden], .vc-hp[hidden] { display: none; }
.vc-hp { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #2a1418; } .vc-hp i { display: block; height: 100%; background: #ff4b3e; transform-origin: left; }
.vc-text { min-height: 3.2em; margin: 0; padding: 6px 9px 7px; font-size: 13px; line-height: 1.45; color: var(--ink); border-top: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.vc-text b { margin-right: 6px; color: var(--c); }
.vc-caret { display: inline-block; width: 7px; height: 12px; margin-left: 2px; background: var(--c); animation: cp-blink 0.9s steps(2) infinite; vertical-align: -1px; }
.vc-queue { display: grid; gap: 3px; }
.vc-wait { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; font-size: 11px; color: var(--dim); background: rgba(8, 26, 41, 0.88); border: 1px solid #2a4458; }
.vc-wait.sos { color: #ffc2c7; border-color: #ff4b3e; }
.vc-mini { width: 18px; height: 22px; background-repeat: no-repeat; background-color: #1b3346; }

/* ---- the teammates in their sectors: top left, in the left column under the mission's panel and its side
   objectives, the radio's call under them */
.cp-left .cp-team { display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.cp-left .cp-team:empty { display: none; }
/* (a mate calling or down: the words under its icon, room kept for them over the radio) */
.cp-left .cp-team:has(.cp-mate[data-state="sos"], .cp-mate[data-state="down"]) { padding-bottom: 20px; }
/* (a phone: the left column is at the foot of the screen, so the teammates only show when one's calling or down) */
:root.touch .cp-mate:not([data-state="sos"]):not([data-state="down"]) { display: none; }
:root.touch .cp-left .cp-team:not(:has(.cp-mate[data-state="sos"], .cp-mate[data-state="down"])) { display: none; }
.cp-mate { --pc: var(--line); position: relative; display: grid; justify-items: center; gap: 1px; width: 52px; padding: 3px 2px 2px; background: rgba(9, 16, 30, 0.82); border-bottom: 2px solid var(--pc); }
.cp-mate-face { width: 34px; height: 34px; background-repeat: no-repeat; background-color: #1b3346; }
.cp-mate b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 9px var(--cjk), sans-serif; color: var(--pc); }
.cp-mate small { position: absolute; left: 0; top: calc(100% + 2px); display: none; padding: 1px 5px; font-size: 10px; color: #fff; white-space: nowrap; background: #5c1218; }
.cp-mate[data-state="sos"] small, .cp-mate[data-state="down"] small { display: block; }
.cp-mate-hp { display: block; width: 100%; height: 3px; background: rgba(255, 255, 255, 0.12); }
.cp-mate-hp u { display: block; height: 100%; background: #7dffa0; transform-origin: left; text-decoration: none; }
.cp-mate[data-state="sos"] { border-right-color: #ff4b3e; animation: vc-sos 0.9s ease-in-out infinite; }
.cp-mate[data-state="sos"] small { color: #ff9a8a; }
.cp-mate[data-state="sos"] .cp-mate-hp u { background: #ff4b3e; }
.cp-mate[data-state="down"] { filter: grayscale(1); opacity: 0.5; }

/* ---- between phases: where the next is */
.cp-travel { position: absolute; top: max(calc(118px + var(--safe-t)), calc(var(--clock-b, 0px) + 6px)); left: 50%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 10px; padding: 6px 14px; background: rgba(9, 16, 30, 0.84); border-left: 3px solid var(--line); white-space: nowrap; pointer-events: none; }
.cp-travel[hidden] { display: none; }
.cp-travel b { font-size: 15px; }
.cp-travel span { font: 700 15px 'Chakra Petch', sans-serif; color: var(--line); }

/* ---- a choice: its question, two answers, twelve seconds */
.cp-choice { position: absolute; left: 50%; top: calc(150px + var(--safe-t)); transform: translateX(-50%); width: min(560px, 88vw); display: grid; gap: 8px; padding: 12px 14px 10px; background: rgba(6, 12, 22, 0.94); border: 1px solid var(--amber); box-shadow: 0 0 24px rgba(255, 177, 46, 0.35); pointer-events: auto; }
.cp-choice[hidden] { display: none; }
.cp-choice.on { animation: cp-choice-in 0.25s ease-out; }
@keyframes cp-choice-in { from { transform: translateX(-50%) scaleY(0.2); opacity: 0; } }
.cp-choice-q { font-size: 15px; line-height: 1.45; font-weight: 700; }
.cp-choice-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-choice-options button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; text-align: left; border: 1px solid var(--line-dim); background: rgba(20, 34, 54, 0.9); }
.cp-choice-options button:hover, .cp-choice-options button:focus-visible { border-color: var(--amber); }
.cp-choice-options button.picked { background: var(--amber); color: #1a0f00; }
.cp-choice-options kbd { font: 700 12px 'Chakra Petch', sans-serif; padding: 0 5px; border: 1px solid currentColor; }
.cp-choice-clock { display: block; height: 3px; background: var(--amber); transform-origin: left; }

.cp-mark[data-kind="sos"] span { border-color: #ff4b3e; background: #5c1218; color: #fff; animation: cp-blink 0.6s steps(2) infinite; }
.cp-mark[data-kind="hold"] span, .cp-mark[data-kind="clear"] span { border-color: var(--amber); }

/* ---- the base's screens: 民調, the phases, trust */
.cp-support b { color: #9ff6ff; }
.cp-changes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font: 700 14px 'Chakra Petch', var(--cjk), sans-serif; color: #9ff6ff; }

/* ---- a phone or a tablet: the card has the top left, the stick and the buttons the bottom corners: the left
   column under the card (--cp-cards-bottom: hud.js), the call a strip in it, its words small */
:root.touch .cp-left { left: calc(10px + var(--safe-l)); top: calc(var(--cp-cards-bottom, 48px) + 8px); width: min(230px, 30vw); gap: 4px; }
:root.touch .cp-hud .cp-left .cp-obj { grid-template-columns: 22px minmax(0, 1fr); gap: 0 8px; padding: 4px 8px; }
:root.touch .cp-hud .cp-left :is(.cp-obj-number, .cp-obj-goal) { display: none; }
:root.touch .cp-hud .cp-left .cp-obj-icon { grid-row: 1 / 3; grid-column: 1; }
:root.touch .cp-hud .cp-left .cp-obj-title { grid-column: 2; font-size: 13px; }
:root.touch .cp-hud .cp-left .cp-obj-progress { grid-row: 2; grid-column: 2; font-size: 11px; }
:root.touch .cp-left .vc-stack { width: 100%; }
:root.touch .vc { display: grid; grid-template-columns: 44px minmax(0, 1fr); }
:root.touch .vc-video { aspect-ratio: auto; height: auto; min-height: 44px; }
:root.touch .vc-face { height: 100%; top: 0; }
:root.touch .vc.army .vc-face { height: 100%; }
:root.touch .vc.army .vc-plate { display: none; }
:root.touch :is(.vc-top, .vc-queue) { display: none; }
:root.touch .vc-plate { bottom: 2px; padding: 0 4px; font-size: 8px; }
:root.touch .vc-sos { top: 2px; right: auto; left: 2px; padding: 0 3px; font-size: 8px; }
:root.touch .vc-text { min-height: 0; padding: 3px 7px; font-size: 10.5px; line-height: 1.35; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
:root.touch .vc.army .vc-text b { font-size: 9.5px; }
:root.touch .vc-caret { height: 10px; }
:root.touch .cp-hud .cp-left .cp-side { display: none; }
:root.touch .cp-travel { top: max(calc(150px + var(--safe-t)), calc(var(--clock-b, 0px) + 6px)); }
:root.touch .cp-choice { top: calc(130px + var(--safe-t)); }
:root.touch .st-telop { bottom: auto; top: calc(150px + var(--safe-t)); }
:root.touch .st-check { top: calc(64px + var(--safe-t)); }

/* (the saving mark, bottom left: turning while it saves, a warning that stays when it can't; above the HUD's card in a mission) */
.cp-saving { position: fixed; z-index: 40; left: calc(16px + var(--safe-l)); bottom: calc(16px + var(--safe-b)); display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; padding: 4px 10px;
  background: #081a29cc; border: 1px solid var(--line-dim); color: var(--dim); font: 700 12px var(--cjk), sans-serif; letter-spacing: 0.08em; pointer-events: none; }
.cp-saving.fight { bottom: calc(200px + var(--safe-b)); }
.cp-saving i { width: 14px; height: 14px; border: 2px solid var(--line); border-right-color: transparent; border-radius: 50%; animation: cp-saving 0.8s linear infinite; }
.cp-saving.fail { pointer-events: auto; color: #ffcf8a; border-color: rgba(255, 177, 46, 0.7); }
.cp-saving.fail b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); color: #081a29; font: 900 13px/1 sans-serif; }
@keyframes cp-saving { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .cp-saving i { animation: none; border-right-color: var(--line); } }

/* ---- 北辰作戰板, the Ops Board (campaign/OPS.md): the incidents' list, the map, the one picked */
.campaign[data-view="board"] .cp-sheet { max-width: 1320px; }
.cp-inc { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; margin: 0; padding: 7px 9px; text-align: left; color: var(--ink);
  background: #102738; border: 1px solid #294253; font: inherit; cursor: pointer; }
.cp-inc:hover { border-color: var(--mech-accent); }
.cp-inc.sel { border-color: var(--amber); box-shadow: inset 3px 0 var(--amber); background: linear-gradient(100deg, rgba(255, 196, 85, 0.14), #102738 60%); }
.cp-inc[data-kind="urgent"] { border-left: 3px solid var(--red); }
.cp-inc[data-kind="daily"] { border-left: 3px solid var(--line); }
.cp-inc.done { opacity: 0.45; cursor: default; }
.cp-icon.inc { width: 36px; height: 36px; }
.cp-stars { color: var(--amber); letter-spacing: 0.04em; font-size: 12px; white-space: nowrap; }
.cp-stars s { text-decoration: none; color: #385365; }
.cp-tag-kind { font: 700 10.5px 'Chakra Petch', var(--cjk), sans-serif; font-style: normal; padding: 0 5px; border: 1px solid currentColor; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-tag-kind.urgent { color: var(--red); }
.cp-tag-kind.daily { color: var(--line); }
.cp-tag-kind.done { color: var(--dim); }

.cp-icon.pin { width: 30px; height: 30px; }

.cp-inc-detail { display: grid; gap: 10px; align-content: start; padding: 12px; background: #0b2132; border: 1px solid var(--line-dim); border-top: 2px solid var(--mech-accent); }
.cp-inc-detail .cp-warn { margin: 0; font-size: 12px; }
.cp-inc-detail .go, .cp-inc-detail .cp-buttons { margin-top: 2px; }

/* (改造 and 設施 are lists: one column of --w-xl in the middle, each price beside what it buys) */
#campaign[data-view="board"] .cp-panel > :is(.cp-up, .cp-warn) { max-width: var(--w-xl); margin-inline: auto; }
/* (機師: cards of their own width, together in the middle) */
.cp-board-changes li.good b, .cp-board-changes li.good span { color: var(--good, #7ee0a8); }
.cp-board-changes li.bad b { color: var(--red); }
.cp-board-changes li.act b { color: var(--amber); }

@media (max-width: 1100px) {
  .cp-inc-detail { grid-column: 1; }
}
@media (max-width: 760px), (orientation: portrait) and (max-width: 900px) {
  .cp-inc-detail { grid-column: 1; grid-row: auto; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .cp-inc { padding: 5px 7px; }
  .cp-icon.inc { width: 28px; height: 28px; }
}

/* 新兵訓練 (js/campaign/tutorial.js): the prologue's layer and strip, and 「完成！」 a moment in the middle */
/* (a roam's status rail, the bill and the versus bars: nothing being paid for or fought over in training) */
.hud.prologue > .match-status { display: none !important; }
.tut-done { position: absolute; left: 50%; top: 38%; translate: -50% -50%; padding: 8px 28px; border: 1px solid var(--line); background: rgba(9, 16, 30, 0.86);
  font: 900 28px var(--font); letter-spacing: 0.14em; color: var(--line); text-shadow: 0 0 14px rgba(47, 210, 255, 0.6); }
.tut-done[hidden] { display: none; }
.tut-done.on { animation: tut-done 1s ease-out both; }
@keyframes tut-done { 0% { opacity: 0; scale: 1.3; } 15% { opacity: 1; scale: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tut-done.on { animation: none; } }

/* a gamepad in hand: what A and B do on the menus, at the foot (main.js shows it on the menus and the campaign's screens) */
.pad-hints { position: fixed; z-index: 30; left: 50%; bottom: calc(10px + var(--safe-b)); translate: -50% 0; display: flex; gap: 16px; padding: 5px 14px;
  background: rgba(9, 16, 30, 0.78); border: 1px solid var(--line-dim); font: 700 13px var(--font); color: var(--ink); pointer-events: none; }
.pad-hints[hidden] { display: none; }
.pad-hints kbd { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 5px; border-radius: 50%; border: 2px solid; font: 900 11px 'Chakra Petch', sans-serif; }
.pad-hints .a kbd { color: #6dff8a; }
.pad-hints .b kbd { color: #ff6a5a; }

/* Tree operation: one prominent count and clock, clear of the playfield. */
#hud.mission-status .cp-hud.rootbreak .cp-status { display: none; }
:root.ph #hud:has(.cp-hud.rootbreak) :is(.ph-pill, .ph-sheet) { display: none; }
.cp-tree-score { position: absolute; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%); min-width: 280px; padding: 7px 18px 9px; background: #07190fec; border: 1px solid #70ff86; border-top-width: 3px; border-radius: 4px; text-align: center; color: #eaffec; font-variant-numeric: tabular-nums; }
.cp-tree-score > small { display: block; font: 700 12px/1.3 var(--font); color: #a8cdb1; }
.cp-tree-score > div { display: flex; align-items: baseline; justify-content: center; gap: 9px; }
.cp-tree-score span { font: 700 14px/1.2 var(--font); }
.cp-tree-score b { font: 700 44px/1.1 'Chakra Petch', sans-serif; color: #8eff96; }
.cp-tree-score time { padding-left: 14px; border-left: 1px solid #70ff8655; font: 700 27px/1.1 'Chakra Petch', sans-serif; }
.cp-tree-score.complete { border-color: #ffe08a; }
.cp-countdown { position: absolute; left: 50%; top: 43%; transform: translate(-50%, -50%); color: #e9fff0; font: 700 clamp(80px, 16vh, 150px)/1 'Chakra Petch', sans-serif; text-shadow: 0 4px 0 #082016, 0 0 28px #49ff75; }
.tree-arrow { display: none; }
.cp-mark[data-kind="tree"] span { bottom: 26px; transform: translateX(-50%); padding: 3px 7px; font: 700 14px/1.1 'Chakra Petch', sans-serif; letter-spacing: .06em; color: #effff0; background: #061b10ed; border: 1px solid #6bff83; box-shadow: 0 0 8px #36ff5444; animation: none; white-space: nowrap; }
.cp-mark[data-kind="tree"] .tree-arrow { display: block; position: absolute; left: -9px; bottom: -1px; width: 18px; height: 13px; background: #ff5145; clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 48%, 50% 100%, 0 48%); }
.cp-mark[data-kind="tree"] i { left: -34px; top: -22px; width: 68px; height: 7px; border-radius: 2px; background: linear-gradient(90deg, #7fff87 calc(var(--k, 0) * 100%), #041209dd 0); box-shadow: 0 0 0 2px #06101c; }
.cp-mark[data-kind="tree"].low i { background: linear-gradient(90deg, #ff6a3d calc(var(--k, 0) * 100%), #041209dd 0); }
@media (max-height: 520px) {
  .cp-tree-score { top: calc(6px + var(--safe-t)); min-width: 210px; padding: 4px 12px; }
  .cp-tree-score > small { font-size: 10px; }
  .cp-tree-score b { font-size: 32px; }
  .cp-tree-score span { font-size: 11px; }
  .cp-tree-score time { font-size: 22px; }
  .cp-mark[data-kind="tree"] span { font-size: 12px; }
}