/* Missions (campaign-ui.mjs): the Home button, the panel, the objective line, boss bars, results,
   plus the fling button's charge pips (mechanics-ui.mjs). Colours follow style.css variables. */
.missions-open{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:0;min-height:56px;padding:0 16px;font:600 16px Fredoka,sans-serif;color:var(--yellow);border-color:#f4dc7866;background:linear-gradient(135deg,#f4dc7812,transparent)}
.missions-open:hover{background:#f4dc7818}
.missions-open svg{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.missions-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15;text-align:left}
.missions-copy small{font:500 12px system-ui,sans-serif;color:var(--muted)}
@media(max-width:760px){.entry .missions-open{width:min(100%,380px)}}

/* The panel */
.missions{width:min(760px,calc(100% - 40px));max-height:calc(100% - 100px);overflow:auto;padding:22px 22px 26px;text-align:left}
.missions .sheet-header{align-items:flex-start}
.missions .sheet-copy{margin:4px 0 0;font-size:13px}
.mission-detail{--sector:var(--mint);margin:10px 0 16px;padding:14px 16px 16px;border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--sector) 14%,#25213d),#17152ecc);border:1px solid color-mix(in srgb,var(--sector) 40%,transparent)}
.mission-detail h3{margin:2px 0 4px;font:600 28px/1.1 Fredoka,sans-serif;color:var(--ink)}
.mission-kicker{margin:0;font:600 11px/1.3 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sector,var(--mint))}
.mission-blurb{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--ink)}
.mission-goal{margin:0 0 6px;font:600 15px Fredoka,sans-serif;color:var(--yellow)}
.mission-goal:before{content:'◎ ';color:var(--mint)}
.mission-tip{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--muted)}
.mission-tip:before{content:'Tip · ';color:var(--mint);font-weight:600}
.mission-fine{margin:0 0 4px;font-size:12px;color:var(--muted)}
.mission-detail .primary{margin-top:12px;min-height:52px;font-size:19px}
.mission-sectors{display:flex;flex-direction:column;gap:18px}
.mission-sector{--sector:var(--mint)}
.mission-sector-head{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;padding:0 2px}
.mission-sector-head strong{font:600 18px/1.2 Fredoka,sans-serif;color:var(--sector)}
.mission-sector-head span{font-size:12px;color:var(--muted);flex:1 1 auto}
.mission-sector-head small{font:600 12px/1 Fredoka,sans-serif;color:var(--muted);white-space:nowrap}
.mission-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px} /* five missions + a two-wide boss card on one row */
@media(max-width:760px){.mission-grid{grid-template-columns:repeat(3,1fr)}.missions{padding:18px 16px 22px;max-height:calc(100% - 150px)}.mission-detail h3{font-size:24px}}
.mission-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:92px;padding:10px 10px 9px;border-radius:14px;border:1px solid #bac8dc33;background:#04071f55;color:var(--ink);text-align:left;transition:transform .2s var(--ease),border-color .2s,background .2s}
.mission-card:hover:not(:disabled){transform:translateY(-2px);border-color:color-mix(in srgb,var(--sector) 60%,transparent);background:color-mix(in srgb,var(--sector) 10%,#04071f66)}
.mission-card.selected{border-color:var(--sector);background:color-mix(in srgb,var(--sector) 16%,#04071f66);box-shadow:0 0 0 1px var(--sector) inset}
.mission-card.cleared{border-color:color-mix(in srgb,var(--mint) 45%,transparent)}
.mission-card.locked{opacity:.5}
.mission-card.boss{grid-column:span 2;background:linear-gradient(135deg,#ff9e8c1f,#04071f66);border-color:#ff9e8c66}
@media(max-width:760px){.mission-card.boss{grid-column:span 3}}
.mission-number{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:color-mix(in srgb,var(--sector) 25%,#04071f);color:var(--sector);font:600 11px/1 Fredoka,sans-serif}
.mission-card.boss .mission-number{background:#ff9e8c33;color:var(--coral)}
.mission-name{font:600 14px/1.15 Fredoka,sans-serif}
.mission-meta{margin-top:auto;font:600 12px/1 system-ui,sans-serif;color:var(--yellow);letter-spacing:.04em}
.mission-meta.stars{color:var(--yellow);font-size:14px}
.mission-card.locked .mission-meta{color:var(--muted)}
.mission-lock{position:absolute;top:8px;right:8px;font-size:12px}

/* In flight */
.mission-hud{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:170px}
.mission-hud strong{font:600 16px/1.1 Fredoka,sans-serif;color:var(--yellow)}
.mission-meter{width:150px}
.mission-meter span{background:var(--yellow)}
.boss-bars{position:absolute;left:50%;top:calc(96px + var(--safe-t,0px));transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;width:min(420px,calc(100% - 180px));pointer-events:none;z-index:3}
@media(max-width:760px){.boss-bars{top:calc(174px + var(--safe-t,0px));width:min(320px,calc(100% - 40px))}} /* under the phone HUD (its bottom sits near 160px) */
@media(max-height:520px){.boss-bars{top:70px;width:min(300px,calc(100% - 300px))}}
.boss-row{--boss:var(--coral);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:6px 10px;border-radius:12px;background:#17152ebf;border:1px solid color-mix(in srgb,var(--boss) 55%,transparent);text-shadow:0 1px 3px #04071f;backdrop-filter:blur(4px)}
.boss-name{font:600 14px/1.1 Fredoka,sans-serif;color:var(--boss)}
.boss-name:before{content:'☠ ';font-size:12px}
.boss-meter{position:relative;height:10px;border-radius:5px;background:#04071f99;overflow:visible}
.boss-fill{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,color-mix(in srgb,var(--boss) 70%,#fff),var(--boss));transition:width .3s var(--ease)}
.boss-mark{position:absolute;top:-3px;width:2px;height:16px;margin-left:-1px;background:var(--mint);box-shadow:0 0 6px var(--mint)}
.boss-copy{grid-column:1/3;font-size:11px;color:var(--muted);text-align:left}
.boss-row.dazed .boss-fill{background:linear-gradient(90deg,#fff6d6,var(--yellow))}
.boss-row.enraged .boss-name{animation:boss-rage .5s infinite alternate}
.boss-row.edible{border-color:var(--mint)}
.boss-row.edible .boss-copy{color:var(--mint);font-weight:700;animation:boss-rage .6s infinite alternate}
.boss-row.gone{opacity:.55}.boss-row.gone .boss-copy{color:var(--mint)}
@keyframes boss-rage{from{opacity:.75}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.boss-row.enraged .boss-name,.boss-row.edible .boss-copy{animation:none}}

/* Fling button: three charge pips under the label; it glows when it is armed. */
.fling-pips{display:flex;gap:3px;margin-top:1px}
.fling-pips i{display:block;width:9px;height:4px;border-radius:2px;background:#ff9e8c40;overflow:hidden;position:relative}
.fling-pips i.full{background:var(--coral)}
.fling-pips i.part:before{content:'';position:absolute;inset:0;width:var(--part,0%);background:#ff9e8c99}
body .burn-controls .fling-button.armed,body[data-playing=true] .burn-controls .fling-button.armed{box-shadow:0 0 0 2px #ff9e8c55,0 0 18px #ff9e8c66}
body .burn-controls .fling-button.armed:not(:disabled) svg,body[data-playing=true] .burn-controls .fling-button.armed:not(:disabled) svg{filter:drop-shadow(0 0 4px #ff9e8c)}
.fling-button.locked span#fling-label{opacity:.7}

/* Results */
.mission-result{margin:2px 0 8px}
.mission-result .mission-kicker{color:var(--mint)}
.mission-stars{margin:4px 0 2px;font:600 40px/1 Fredoka,sans-serif;color:var(--yellow);letter-spacing:.08em;text-shadow:0 0 18px #f4dc7866}
#results.mission-won .result-reward{border-color:#f4dc7866}
.mission-next{margin:8px 0 0;min-height:48px;font:600 15px Fredoka,sans-serif;color:var(--yellow);border-color:#f4dc7866;width:100%}
.mission-next:hover{background:#f4dc7814}