.crew-mission-dialog{--cyan:#34b7dd;--gold:#f2c14e;--muted:#849ba0;--m-line:#294650;--m-panel:#06151c;position:fixed;inset:0;width:min(460px,calc(100% - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid #315663;border-radius:16px;color:#e8f4f2;background:linear-gradient(135deg,#0c2229f5,#07151afc);box-shadow:0 28px 100px #0009,0 0 35px #34b7dd12;overflow:auto;overscroll-behavior:contain;color-scheme:dark;font:14px/1.6 var(--head);text-transform:lowercase}
.crew-mission-dialog::backdrop{background:#020a10bc;backdrop-filter:blur(8px)}
.crew-mission-dialog[open]{animation:mission-in .2s ease-out}
.crew-mission-dialog [hidden]{display:none!important}
.crew-mission-dialog .panel-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;border-bottom:1px solid #294248;background:#0a1b23f5;color:#b3cbcf;font:10px var(--mono);letter-spacing:1px}
.crew-mission-dialog .panel-top>span{display:flex;align-items:center;gap:10px}
.crew-mission-dialog .panel-top i{width:6px;height:6px;background:var(--cyan);box-shadow:0 0 9px #34b7dd60}
.mission-close{display:flex;gap:9px;align-items:center;min-height:36px;padding:6px 0 6px 12px;color:#9bbbc5;font:11px var(--mono)}
.mission-close span:last-child{font:24px/1 var(--head)}
.mission-close:hover{color:var(--cyan)}
.mission-content{padding:20px 22px 22px}
.mission-target{font:10px var(--mono);letter-spacing:1px;color:#789ba5;margin-bottom:8px}
.crew-mission-dialog h2{font:500 26px/1.2 var(--head);letter-spacing:-.7px}
.mission-hint{color:var(--muted);font-size:13px;margin-top:6px}
.mission-hint:empty{display:none}
.mission-status{min-height:1.7em;margin-top:12px;font:12px/1.7 var(--mono);color:var(--cyan)}
.mission-status[data-tone=bad]{color:#ff9ca8}
.mission-stage{margin-top:8px}
.mission-stage.dead>*{opacity:.4;pointer-events:none}
.mission-note{margin-top:12px;font-size:12px;line-height:1.6;color:#829ea7}
.mission-actions{display:flex;gap:10px;margin-top:18px}
.mission-button{flex:1;min-height:44px;padding:0 12px;border:1px solid var(--m-line);border-radius:6px;background:var(--m-panel);color:#c5d9db;font:11px var(--mono);letter-spacing:1px;transition:border-color .2s,background .2s}
.mission-button:hover{border-color:var(--cyan)}
.mission-button.primary{border-color:var(--cyan);background:var(--cyan);color:#041b1e}
.mission-button.primary:hover{background:#8bdeff}
.mission-big{display:block;width:100%;min-height:54px;margin-top:14px;border:1px solid var(--cyan);border-radius:6px;background:var(--cyan);color:#041b1e;font:13px var(--mono);letter-spacing:1px}
.mission-big:hover{background:#8bdeff}
.crew-mission-dialog button:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* reveal */
.mission-result{margin-top:8px}
.mission-art{aspect-ratio:1;border-radius:13px;overflow:hidden;border:1px solid #6ba5b83d;background:#071820}
.mission-art img{display:block;width:100%;height:100%;object-fit:cover}
.mission-result p{margin-top:12px;font:500 17px var(--head);color:#e4f4f7}
.mission-art.reveal{animation:mission-glitch .95s steps(1,end) both}
@keyframes mission-glitch{
  0%{clip-path:inset(0 0 100% 0);filter:hue-rotate(90deg) saturate(3) blur(6px);transform:translateX(-10px)}
  12%{clip-path:inset(42% 0 36% 0);transform:translateX(12px)}
  26%{clip-path:inset(8% 0 62% 0);transform:translateX(-7px);filter:hue-rotate(-60deg) saturate(2.4) blur(3px)}
  40%{clip-path:inset(66% 0 4% 0);transform:translateX(5px)}
  54%{clip-path:inset(0 0 24% 0);transform:translateX(-3px);filter:hue-rotate(30deg) saturate(1.6)}
  70%{clip-path:inset(14% 0 0 0);transform:translateX(2px);filter:none}
  84%{clip-path:inset(0);transform:translateX(-1px)}
  100%{clip-path:inset(0);transform:none;filter:none}
}
@keyframes mission-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* memory chip */
.crew-mission-dialog .mem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.crew-mission-dialog .mem-card{aspect-ratio:1;padding:0;display:grid;place-items:center;border:1px solid var(--m-line);border-radius:10px;color:#e8f4f2;background:var(--m-panel) repeating-linear-gradient(135deg,transparent 0 7px,#34b7dd12 7px 8px)}
.crew-mission-dialog .mem-card svg{width:52%;height:52%;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.crew-mission-dialog .mem-card.up{background:#11343d}
.crew-mission-dialog .mem-card.up svg{opacity:1}
.crew-mission-dialog .mem-card.done{border-color:var(--cyan);color:var(--cyan)}

/* ring lock */
.crew-mission-dialog .ring{display:block;width:min(280px,100%);margin:0 auto}
.crew-mission-dialog .ring g{transform-origin:100px 100px;transition:transform .25s ease}
.crew-mission-dialog .ring .track{fill:none;stroke:#2a5560;stroke-width:16}
.crew-mission-dialog .ring .notch{fill:var(--gold)}
.crew-mission-dialog .ring g.ok .track{stroke:#34b7dd99}
.crew-mission-dialog .ring g.ok .notch{fill:#e8f4f2}
.crew-mission-dialog .ring-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}

/* bug zapper */
.crew-mission-dialog .bugs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.crew-mission-dialog .hole{aspect-ratio:1;padding:0;display:grid;place-items:center;border:1px solid var(--m-line);border-radius:12px;background:var(--m-panel);color:#ff5252}
.crew-mission-dialog .hole svg{width:58%;height:58%;opacity:0;transform:scale(.6);transition:transform .12s,opacity .12s}
.crew-mission-dialog .hole.bug svg{opacity:1;transform:none}
.crew-mission-dialog .hole.zap{background:var(--cyan);border-color:var(--cyan)}

/* odd code */
.crew-mission-dialog .odd{display:grid;gap:6px}
.crew-mission-dialog .odd button{aspect-ratio:1;padding:0;border:1px solid var(--m-line);border-radius:8px;background:var(--m-panel);font:15px var(--mono);text-transform:none}
.crew-mission-dialog .odd button.no{opacity:.22}
.crew-mission-dialog .odd button.yes{background:var(--cyan);border-color:var(--cyan);color:#041b1e}

/* pulse sync */
.crew-mission-dialog .pul{display:block;width:min(260px,100%);aspect-ratio:1;margin:0 auto}

@media(max-width:600px){.crew-mission-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}.mission-content{padding:18px 17px 19px}.crew-mission-dialog .panel-top{padding-inline:17px}.crew-mission-dialog h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.crew-mission-dialog[open],.mission-art.reveal{animation:none}.crew-mission-dialog .ring g,.crew-mission-dialog .hole svg{transition:none}}