/* Ekran kampanii (public/js/menu/campaign-screen.js) i mapa na ekranie wczytywania (campaign-map.js). */
:root { --campaign-clear: #7fd49a; --campaign-next: #efa568; --campaign-locked: #7d8b90; }
body.campaign-open #menu-column, body.campaign-open #workshop-button { display: none; }
#campaign { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#campaign > * { pointer-events: auto; }
.campaign-routes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none !important; overflow: visible; }
/* Trasa rysuje się odcinkami (campaign-screen.js): dociera do punktu, gdy ten rozbłyska. --campaign-step = ten sam rytm. */
#campaign { --campaign-step: 320ms; }
.campaign-routes polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.campaign-routes .done { stroke: var(--campaign-clear); stroke-width: 3.5; filter: drop-shadow(0 0 4px #7fd49acc) drop-shadow(0 1px 2px #000); }
.campaign-routes .ahead { stroke: #fff0d6; stroke-width: 2.5; stroke-dasharray: 7 7; opacity: .9; filter: drop-shadow(0 0 3px #efa568cc) drop-shadow(0 1px 2px #000); }
.campaign-markers { position: absolute; inset: 0; pointer-events: none !important; }
.campaign-marker { position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; pointer-events: auto; display: flex; align-items: center; gap: 8px;
  margin: -9px 0 0 -9px; color: #f1ead8; text-shadow: 0 1px 4px #000, 0 0 10px #000; opacity: 0; transition: opacity .25s; }
/* Pojawienie: punkt rozjaśnia się z białego żaru, błysk i pierścień rozchodzą się od środka. Kolejne punkty co 110 ms. */
#campaign.drawn .campaign-marker { opacity: 1; transition-delay: calc(var(--order) * var(--campaign-step)); }
#campaign.drawn .campaign-marker i { animation: campaign-ignite .7s calc(var(--order) * var(--campaign-step)) ease-out backwards; }
#campaign.drawn .campaign-marker b, #campaign.drawn .campaign-marker > span { animation: campaign-fade .5s calc(var(--order) * var(--campaign-step) + .15s) ease-out backwards; }
.campaign-flash { position: absolute; left: 9px; top: 9px; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fffdf4 0%, #ffe3b0cc 18%, #ffb46a44 42%, transparent 70%); box-shadow: 0 0 0 1px #fff4dc88; }
#campaign.drawn .campaign-flash { animation: campaign-flash .75s calc(var(--order) * var(--campaign-step)) ease-out; }
@keyframes campaign-flash { 0% { opacity: 1; transform: scale(.15); } 35% { opacity: .95; } 100% { opacity: 0; transform: scale(1.6); box-shadow: 0 0 0 2px #fff4dc00; } }
@keyframes campaign-ignite { 0% { background: #fff; border-color: #fff; box-shadow: 0 0 22px 8px #fff8e6; } 100% { } }
@keyframes campaign-fade { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
#campaign.drawn .campaign-marker.behind { opacity: 0; pointer-events: none; transition-delay: 0s; }
#campaign .campaign-marker, #campaign .campaign-marker:hover, #campaign .campaign-marker.active { background: none; border: 0; box-shadow: none; }
.campaign-marker i { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; background: #0d1519cc; box-shadow: 0 0 0 4px #00000055; flex: none; }
.campaign-marker b { font-size: 10px; letter-spacing: .1em; }
.campaign-marker > span { font-size: 10px; letter-spacing: .12em; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.campaign-marker:hover > span, .campaign-marker.active > span, .campaign-marker.next > span { opacity: 1; }
.campaign-marker.locked { color: var(--campaign-locked); }
.campaign-marker.cleared { color: var(--campaign-clear); }
.campaign-marker.cleared i { background: var(--campaign-clear); }
.campaign-marker.next { color: var(--campaign-next); z-index: 1; }
.campaign-marker.next b { margin-left: 12px; }
.campaign-marker.next i { background: var(--campaign-next); border-color: #fff2de; animation: campaign-pulse 1.4s ease-out infinite; }
#campaign.drawn .campaign-marker.next i { animation: campaign-ignite .7s calc(var(--order) * var(--campaign-step)) ease-out backwards, campaign-pulse 1.4s calc(var(--order) * var(--campaign-step) + .7s) ease-out infinite; }
.campaign-marker.active:not(.next) i { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes campaign-pulse { 0% { box-shadow: 0 0 0 0 #efa568cc; } 100% { box-shadow: 0 0 0 16px #efa56800; } }
/* Obecna misja: obracający się celownik z czterech narożników i podpis nad punktem. */
.campaign-reticle, .campaign-here { display: none; position: absolute; pointer-events: none; }
.campaign-marker.next .campaign-reticle, .campaign-marker.next .campaign-here { display: block; }
.campaign-reticle { left: 9px; top: 9px; width: 44px; height: 44px; margin: -22px 0 0 -22px; text-decoration: none; animation: campaign-reticle 6s linear infinite; }
.campaign-reticle s { position: absolute; width: 11px; height: 11px; border: 0 solid var(--campaign-next); filter: drop-shadow(0 0 4px #efa568aa); }
.campaign-reticle s:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.campaign-reticle s:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.campaign-reticle s:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.campaign-reticle s:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
#campaign.drawn .campaign-marker.next .campaign-reticle { animation: campaign-lock .6s calc(var(--order) * var(--campaign-step) + .35s) cubic-bezier(.2,.7,.3,1) backwards, campaign-reticle 6s calc(var(--order) * var(--campaign-step) + .95s) linear infinite; }
@keyframes campaign-lock { from { opacity: 0; transform: scale(2.4) rotate(-45deg); } to { opacity: 1; transform: none; } }
@keyframes campaign-reticle { to { transform: rotate(360deg); } }
.campaign-here { left: 9px; bottom: 36px; transform: translateX(-50%); padding: 4px 9px; font-size: 9px; font-weight: 700; letter-spacing: .16em; white-space: nowrap;
  color: #1d130b; background: var(--campaign-next); text-shadow: none; box-shadow: 0 0 14px #efa56866; }
.campaign-here::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 12px; background: linear-gradient(var(--campaign-next), transparent); }
#campaign.drawn .campaign-marker.next .campaign-here { animation: campaign-fade .5s calc(var(--order) * var(--campaign-step) + .6s) ease-out backwards; }
.campaign-panel { position: absolute; left: 38px; top: 35px; bottom: 52px; width: 380px; padding: 27px; overflow: auto; display: flex; flex-direction: column;
  transform: translateX(-30px); opacity: 0; transition: transform .5s .4s, opacity .5s .4s; }
body.campaign-open .campaign-panel { transform: none; opacity: 1; }
.campaign-panel h1 { margin: 12px 0 6px; }
.campaign-progress { font-size: 10px; letter-spacing: .14em; color: var(--muted); margin: 0; }
.campaign-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.campaign-row { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; padding: 9px 12px; background: #1b262cb0; }
.campaign-row b { color: var(--muted); }
.campaign-row em { font-style: normal; color: var(--muted); letter-spacing: .12em; font-size: 10px; }
.campaign-row.cleared em { color: var(--campaign-clear); font-size: 12px; letter-spacing: .05em; }
.campaign-row.locked { opacity: .5; }
.campaign-row em { display: flex; align-items: center; justify-content: flex-end; min-width: 14px; }
.campaign-row em .heroic { font-style: normal; color: #5e3a36; margin-left: 1px; }
.campaign-row em .heroic.earned { color: #ff6a55; text-shadow: 0 0 6px #ff3b2a99; }
.campaign-lock { width: 13px; height: 13px; }
/* Zaznaczona misja: złota ramka zamiast czerwieni motywu (czerwień czytała się jak błąd). */
#campaign .campaign-row:hover { border-color: #b8914f; background: #262620; box-shadow: none; }
#campaign .campaign-row.active { border-color: var(--mn-gold-hi, #f0c46a); background: linear-gradient(90deg, #3b3018, #1c1a14); color: #fff3d6;
  box-shadow: inset 0 0 0 1px #f0c46a55, 0 0 12px #d8a24a33; }
#campaign .campaign-row.active b { color: #f0c46a; }
/* Nazwa kampanii we własnym kolorze — kolejne kampanie nadpiszą --campaign-color. */
.campaign-panel { --campaign-color: #6fd3ff; }
.campaign-name { color: var(--campaign-color); font-weight: 700; text-shadow: 0 0 10px color-mix(in srgb, var(--campaign-color) 55%, transparent); }
.campaign-detail h2 { margin: 8px 0; }
.campaign-brief { font-size: 13px; line-height: 1.55; color: #c5cfcc; margin: 0 0 8px; }
.campaign-seed { font: 10px monospace; color: var(--muted); letter-spacing: .1em; margin: 0 0 10px; }
.campaign-stars { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 5px; font-size: 11px; color: #8e9c9f; }
.campaign-stars .earned { color: #f4cf82; }
.campaign-panel > button { width: 100%; margin-bottom: 9px; }
/* DEPLOY: ta sama złota, ścięta rama i rytm światła co START WAVE. */
.campaign-panel > .campaign-deploy, #menu > #create {
  margin-top: auto; position: relative; overflow: hidden; padding: 0 38px; min-height: 54px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent; border-image: var(--mn-frame); border-image-source: var(--mn-frame-gold);
  clip-path: var(--mn-clip); border-radius: 0;
  background: linear-gradient(105deg, transparent 38%, #fff3d044 50%, transparent 62%) -160% 0/60% 100% no-repeat border-box, var(--mn-primary);
  color: #fff6e4; text-align: center; letter-spacing: .18em;
  text-shadow: 0 1px 3px #000, 0 0 8px #d8a24a88; box-shadow: none;
  animation: cmd-cta 1.3s ease-in-out infinite, mn-cta-shine 2.6s ease-in-out infinite;
}
.campaign-deploy span { display: none; }
.campaign-deploy::before, .campaign-deploy::after, #menu > #create::before, #menu > #create::after {
  position: absolute; top: 50%; transform: translateY(-52%); color: var(--mn-gold-hi);
  font-size: 19px; letter-spacing: 0; text-shadow: 0 0 8px #d8a24aaa; pointer-events: none;
  animation: cmd-cta-arrow-l 1.3s ease-in-out infinite;
}
.campaign-deploy::before, #menu > #create::before { content: '›'; left: 13px; }
.campaign-deploy::after, #menu > #create::after { content: '‹'; right: 13px; animation-name: cmd-cta-arrow-r; }
.campaign-panel > .campaign-deploy:hover:not(:disabled), #menu > #create:hover:not(:disabled) {
  animation: none; background: linear-gradient(#7a4e12,#c98f2a); color: #fff; filter: brightness(1.1);
}
.campaign-deploy:hover::before, .campaign-deploy:hover::after, #menu > #create:hover::before, #menu > #create:hover::after,
.campaign-deploy:disabled, .campaign-deploy:disabled::before, .campaign-deploy:disabled::after { animation: none; }
/* REPLAY (misja już ukończona) na zielono, DEPLOY zostaje złoty (Topek 27.09: „przycisk REPLAY ma być zielony zamiast złoty”). */
.campaign-panel > .campaign-deploy.replay {
  border-image-source: url('/ui/steel-frame.svg');
  background: linear-gradient(105deg, transparent 38%, #d8ffe044 50%, transparent 62%) -160% 0/60% 100% no-repeat border-box,
    radial-gradient(ellipse at 50% 100%, #2f8a4a 0%, #12401f 60%, #06140a 100%);
  color: #eafff0; text-shadow: 0 1px 3px #000, 0 0 8px #4ad88a88;
}
.campaign-deploy.replay::before, .campaign-deploy.replay::after { color: #8ff0b0; text-shadow: 0 0 8px #4ad88aaa; }
.campaign-panel > .campaign-deploy.replay:hover:not(:disabled) { background: linear-gradient(#1f6a36, #3fae62); }
/* Nagłówek panelu: CAMPAIGN · KHARON IV i mały BACK · ESC (0.28.5, Topek: „BACK przenieś jako mały koło napisu Campaign
   Kharon IV na samej górze i przybinduj do escape”; Esc — campaign-screen.js). Mała rama i małe cięcie w parze,
   bez wewnętrznych box-shadow z ogólnej reguły button (docs/COMMAND-THEME.md, „Ramy ze ściętymi rogami”). */
.campaign-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.campaign-panel .campaign-back {
  flex: none; margin: 0; padding: 8px 12px 7px; min-width: 0; min-height: 0; font-size: 10px; letter-spacing: .16em; line-height: 1;
  color: var(--mn-text); background: var(--mn-btn); text-shadow: var(--mn-shadow);
  border: 1px solid transparent; border-image: var(--mn-frame-sm); clip-path: var(--mn-clip-sm); box-shadow: none;
}
.campaign-panel .campaign-back:hover { border-image-source: var(--mn-frame-sm-gold); background: var(--mn-btn-hover); color: #fff6e4; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .campaign-deploy, .campaign-deploy::before, .campaign-deploy::after, #menu > #create, #menu > #create::before, #menu > #create::after { animation: none !important; }
}
.campaign-seed-list { display: grid; gap: 8px; margin: 14px 0; max-height: 50vh; overflow: auto; }
.campaign-seed-row { display: grid; grid-template-columns: 1fr 130px; align-items: center; gap: 12px; }
.campaign-seed-row input { margin: 0; }
.campaign-debug-actions { display: flex; gap: 8px; justify-content: flex-end; }
#campaign-debug { z-index: 20; }
@media (max-width: 760px) { .campaign-panel { left: 12px; right: 12px; width: auto; top: auto; bottom: 12px; max-height: 55vh; } }

/* Ekran wczytywania misji kampanii */
.loading-campaign { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; }
.loading-campaign figcaption h1 { margin: 8px 0; }
.loading-campaign figcaption p { color: #b9c4c2; font-size: 13px; line-height: 1.6; margin: 0; }
.campaign-map { width: min(320px, 70vw); height: auto; overflow: visible; }
.campaign-map-rim { fill: none; stroke: #5fa7ff66; stroke-width: 3; }
.campaign-map-grid { fill: none; stroke: #ffffff12; }
.campaign-map-route { fill: none; stroke: #efe3cf66; stroke-width: 1.5; stroke-dasharray: 3 5; }
.campaign-map-point { fill: #0d1519; stroke: var(--campaign-locked); stroke-width: 2; }
.campaign-map-point text { fill: #d6dcd6; stroke: none; font: 700 10px Arial, sans-serif; letter-spacing: .08em; paint-order: stroke; }
.campaign-map-point.cleared { fill: var(--campaign-clear); stroke: var(--campaign-clear); }
.campaign-map-point.cleared text { fill: var(--campaign-clear); }
.campaign-map-point.target { fill: var(--campaign-next); stroke: #fff2de; }
.campaign-map-point.target text { fill: #fff2de; font-size: 11px; }
.campaign-map-pulse { fill: none; stroke: var(--campaign-next); animation: campaign-map-pulse 1.3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes campaign-map-pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@media (max-width: 640px) { .loading-campaign { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* Wynik misji kampanii (gwiazdki z modyfikatorami): public/mission-result.css. */

/* START CAMPAIGN w menu: ta sama złota, animowana rama co DEPLOY (reguły wyżej), bez marginesu auto z panelu. */
#menu > #create { margin-top: 0; margin-bottom: 10px; width: 100%; font-size: 13px; }