/* Final connection, campaign confirm, pause layout and the campaign instruments.
   Loads last, after campaign.css, and reuses its --cf- palette. Ceramic Flightdeck: ivory ceramic plates,
   dark teal inset readouts, copper markers, square corners, no blur. */

/* Final connection: an ivory ceramic console with the three channels set in as teal screens. */
dialog.signal-link{position:fixed;inset:0;margin:auto;width:min(760px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);padding:28px 38px 24px 44px;border:0;border-radius:0;background:var(--cf-rivets),var(--cf-glaze);color:var(--cf-ink);box-shadow:var(--cf-bevel),0 30px 90px #03141880;backdrop-filter:none;-webkit-backdrop-filter:none;overflow-y:auto;overscroll-behavior:contain;outline:none;scrollbar-width:thin;scrollbar-color:#8a522866 transparent}
dialog.signal-link::backdrop{background:#06191fa6;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Brushed copper rail down the left edge. */
dialog.signal-link::after{content:'';position:absolute;top:0;bottom:0;left:0;width:6px;background:linear-gradient(90deg,#6f4322,#c58b58 35%,#e2b083 50%,#a8703f 70%,#6f4322)}
.signal-header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.signal-link .eyebrow{font:11px/1.4 var(--cf-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cf-copper-ink)}
.signal-link #linkExit{appearance:none;display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:11px var(--cf-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cf-ink-soft);cursor:pointer}
.signal-link #linkExit:hover{color:var(--cf-ink);background:none}
.signal-link #linkExit:focus-visible{outline:2px solid var(--cf-copper-ink);outline-offset:3px}
.signal-link kbd{display:inline-block;min-width:22px;padding:2px 6px;border:0;border-radius:0;background:#fffaf0;box-shadow:0 0 0 1px #173a3c40,0 1px 0 1px #cdbf9f;font:11px/1.2 var(--cf-mono);letter-spacing:0;text-align:center;color:var(--cf-ink)}
.signal-link h2{margin:10px 0 12px;padding-bottom:10px;border-bottom:1px solid #173a3c40;font:400 50px/1 var(--cf-serif);letter-spacing:-.015em;color:var(--cf-ink)}
.signal-how{list-style:none;counter-reset:how;display:grid;gap:5px;max-width:62ch;margin:0;padding:0}
.signal-how li{counter-increment:how;display:grid;grid-template-columns:28px 1fr;font:14.5px/1.5 var(--cf-sans);color:var(--cf-ink-soft)}
.signal-how li::before{content:'0' counter(how);padding-top:3px;font:11px var(--cf-mono);letter-spacing:.08em;color:var(--cf-copper-ink)}

/* Locks, chances and time: one teal inset readout. */
.signal-meter{display:grid;grid-template-columns:1.7fr 1fr auto;gap:26px;margin:16px 0 14px;padding:12px 16px;background:var(--cf-screen);box-shadow:var(--cf-sunk)}
.signal-stat{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;min-width:0}
.signal-stat>span{grid-column:1/-1;font:10px var(--cf-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cf-copper-hi)}
.signal-stat b{font:400 13px var(--cf-mono);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--cf-ivory);white-space:nowrap}
.signal-stat:last-child b{font:400 24px/1 var(--cf-serif);letter-spacing:0}
.signal-ticks{list-style:none;display:flex;gap:3px;margin:0;padding:0}
.signal-ticks li{flex:1;height:4px;background:#efe7d42e}
.signal-ticks li.is-done{background:var(--cf-copper-hi)}
.signal-chances{list-style:none;display:flex;gap:10px;margin:0;padding:0 0 0 2px}
.signal-chances li{width:9px;height:9px;transform:rotate(45deg);border:1px solid var(--cf-copper-hi);background:var(--cf-copper-hi)}
.signal-chances li.is-spent{background:none;border-color:#efe7d440}

/* Each channel is its own inset screen in the ceramic. */
.signal-channels{display:grid;gap:9px}
.signal-channel{appearance:none;display:grid;grid-template-columns:170px 1fr 136px;gap:18px;align-items:center;min-height:58px;padding:10px 16px;border:0;border-radius:0;background:var(--cf-screen);box-shadow:var(--cf-sunk);color:var(--cf-mist);text-align:left;font:inherit;cursor:pointer;transition:background .15s,box-shadow .15s}
.signal-channel:disabled{cursor:default;opacity:1}
.signal-channel:hover:not(:disabled){background:linear-gradient(180deg,#0e282c,#153836)}
.signal-channel:focus-visible{outline:2px solid var(--cf-copper-ink);outline-offset:3px}
.signal-channel.active{background:linear-gradient(180deg,#0f2c30,#173c3b);color:var(--cf-ivory);box-shadow:var(--cf-sunk),inset 3px 0 0 var(--cf-copper-hi)}
.signal-channel.in-window{background:linear-gradient(180deg,#153a3a,#1d4744);box-shadow:var(--cf-sunk),inset 3px 0 0 var(--cf-ivory)}
.signal-channel-name{display:flex;align-items:center;gap:10px;font:15px var(--cf-sans)}
.signal-channel kbd{background:none;box-shadow:0 0 0 1px #efe7d44d;color:var(--cf-ivory)}
.signal-track{position:relative;display:block;height:28px;overflow:hidden;border:1px solid #efe7d41a;background:repeating-linear-gradient(90deg,#efe7d414 0 1px,transparent 1px 10%),#071a1d}
/* The copper band matches linkWindow in campaign.js: open from 32% to 68% of the sweep. */
.signal-window{position:absolute;top:0;bottom:0;left:32%;width:36%;background:#b9804f26;border-inline:1px solid #b9804fa6}
.signal-channel.active .signal-window{background:#b9804f40}
.signal-channel.in-window .signal-window{background:#dcae7d5c;border-color:var(--cf-copper-hi)}
.signal-marker{position:absolute;top:3px;bottom:3px;width:3px;margin-left:-1.5px;background:var(--cf-ivory);box-shadow:0 0 0 1px #0f2a2e}
.signal-channel:not(.active) .signal-marker{visibility:hidden}
.signal-channel-state{font:10px var(--cf-mono);letter-spacing:.14em;text-transform:uppercase;text-align:right}
.signal-channel.active .signal-channel-state{color:var(--cf-copper-hi)}
.signal-channel.in-window .signal-channel-state{color:var(--cf-ivory)}
.signal-link #linkFeedback{min-height:44px;max-width:62ch;margin:14px 0 4px;font:14px/1.5 var(--cf-sans);color:var(--cf-copper-ink)}
.signal-link[data-status=failed] #linkFeedback{color:var(--cf-coral-ink)}
/* Main keys: teal inset in a copper frame with ivory type, the same key as the title and briefing. */
.signal-link #linkStart,.campaign-confirm .primary{appearance:none;display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin:0;padding:0 20px;border:0;border-radius:0;background:var(--cf-screen);color:var(--cf-ivory);box-shadow:var(--cf-sunk);font:16px var(--cf-sans);cursor:pointer}
.signal-link #linkStart:hover,.campaign-confirm .primary:hover{background:linear-gradient(180deg,#123236,#18403f);color:#fff}
.signal-link #linkStart[hidden]{display:none}
.signal-link #linkStart:focus-visible,.campaign-confirm .primary:focus-visible{outline:2px solid var(--cf-copper-ink);outline-offset:4px}

/* New campaign confirmation, on the same ceramic plate. */
.campaign-confirm{max-width:540px;padding:30px 34px;border:0;border-radius:0;background:var(--cf-rivets),var(--cf-glaze);color:var(--cf-ink);box-shadow:var(--cf-bevel),0 30px 90px #03141880;backdrop-filter:none;-webkit-backdrop-filter:none}
.campaign-confirm::backdrop{background:#06191fa6;backdrop-filter:none;-webkit-backdrop-filter:none}
.campaign-confirm .eyebrow{font:11px/1.4 var(--cf-mono);letter-spacing:.22em;color:var(--cf-copper-ink)}
.campaign-confirm h2{margin:10px 0 12px;font:400 44px/1.02 var(--cf-serif);color:var(--cf-ink)}
.campaign-confirm p{font-size:15px;line-height:1.65;color:var(--cf-ink-soft)}
.campaign-confirm-error{color:var(--cf-coral-ink)!important}
.campaign-confirm .text-button{appearance:none;display:block;min-height:44px;margin:8px 0 0;padding:0;border:0;border-bottom:1px solid #8a522866;border-radius:0;background:none;box-shadow:none;font:14px var(--cf-sans);color:var(--cf-ink);cursor:pointer}
.campaign-confirm .text-button:hover{background:none;color:var(--cf-copper-ink)}
.campaign-confirm .text-button:focus-visible{outline:2px solid var(--cf-copper-ink);outline-offset:3px}

/* Pause: a full height ivory ceramic rail on the left holds the title, resume and settings.
   The campaign keys and controls sit in a right column over a light scrim, so the world still shows.
   Seven campaign actions in a two column grid: three rows of keys, then the gentler camera row.
   The block has a fixed height, so the controls sit under it without measuring. */
dialog#pause{--pause-rail:calc(8vw + 380px);--pause-right:max(52vw,calc(8vw + 430px));--pause-top:max(96px,12vh);background:linear-gradient(90deg,transparent var(--pause-rail),#0a1f23d9 var(--pause-rail),#0a1f23a6)}
dialog#pause::before{content:'';position:fixed;top:0;bottom:0;left:0;width:var(--pause-rail);z-index:-1;background:linear-gradient(180deg,transparent calc(50% - 1px),var(--cf-seam) calc(50% - 1px) 50%,transparent 50%),var(--cf-glaze);box-shadow:inset -1px 0 0 #fffdf7,18px 0 40px #04151a52;pointer-events:none}
dialog#pause::after{content:'';position:fixed;top:0;bottom:0;left:var(--pause-rail);width:8px;background:radial-gradient(circle,#f0c495 0 1.2px,#6f4322 1.9px,transparent 2.4px) center 18px/8px 96px repeat-y,linear-gradient(90deg,#6f4322,#c58b58 35%,#e2b083 50%,#a8703f 70%,#6f4322);pointer-events:none}
dialog#pause .dialog-head .eyebrow{color:var(--cf-copper-ink)}
dialog#pause h2{color:var(--cf-ink)}
dialog#pause #saveStatus{color:var(--cf-ink-soft)}
dialog#pause #resume{border:0;border-radius:0;background:var(--cf-screen);box-shadow:var(--cf-sunk);color:var(--cf-ivory)}
dialog#pause #resume:hover{background:linear-gradient(180deg,#123236,#18403f);color:#fff}
dialog#pause #resume:focus-visible{outline:2px solid var(--cf-copper-ink);outline-offset:4px}
dialog#pause .cf-arcade{display:flex;width:330px;max-width:100%;margin-top:10px;border-top:1px solid var(--cf-seam)}
dialog#pause>.setting-row{border-color:var(--cf-seam);color:var(--cf-ink)}
dialog#pause>.setting-row label,dialog#pause>.setting-row span{color:var(--cf-ink)}
dialog#pause select{color:var(--cf-ink)}
dialog#pause select option{color:var(--cf-ink);background:var(--cf-ivory)}
dialog#pause input[type=range]{accent-color:var(--cf-copper)}
dialog#pause #menuCamera,dialog#pause .restart-confirm button{min-height:34px;padding:0 12px;border:0;border-radius:0;background:var(--cf-glaze);box-shadow:inset 0 1px 0 #fffdf7,inset 0 -2px 0 #cdbf9f,0 0 0 1px #173a3c2e;font:11px var(--cf-mono);letter-spacing:.1em;color:var(--cf-ink)}
dialog#pause .restart-confirm{color:var(--cf-ink)}
dialog#pause .prototype-note{color:var(--cf-ink-soft);opacity:1}
dialog#pause .campaign-pause-actions{position:absolute;top:var(--pause-top);left:var(--pause-right);width:min(440px,calc(96vw - var(--pause-right)));display:grid;grid-template-columns:1fr 1fr;grid-template-rows:18px;grid-auto-rows:40px;gap:8px;margin:0}
dialog#pause .campaign-pause-actions::before{content:'Campaign';grid-column:1/-1;align-self:end;font:10px var(--cf-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cf-copper-hi)}
dialog#pause .campaign-pause-actions button{appearance:none;min-height:40px;margin:0;padding:0 12px 0 14px;border:0;border-left:3px solid var(--cf-copper);border-radius:0;background:var(--cf-glaze);box-shadow:inset 0 1px 0 #fffdf7,inset 0 -2px 0 #cdbf9f,0 2px 6px #04151a4d;font:13px/1.2 var(--cf-sans);text-align:left;color:var(--cf-ink);cursor:pointer}
dialog#pause .campaign-pause-actions button:hover{background:#fffaf0;color:var(--cf-ink)}
dialog#pause .campaign-pause-actions button:focus-visible{outline:2px solid var(--cf-copper-hi);outline-offset:3px}
dialog#pause .campaign-pause-actions #campaignRestart{color:var(--cf-coral-ink);border-left-color:var(--cf-coral-ink)}
dialog#pause .campaign-pause-actions .setting-row{grid-column:1/-1;width:auto!important;min-height:40px;margin:0;padding:0;border:0;border-top:1px solid var(--cf-rule);font:13px var(--cf-sans);color:var(--cf-ivory);cursor:pointer}
dialog#pause .campaign-pause-actions input{width:18px;height:18px;margin:0;accent-color:var(--cf-copper-hi)}
/* Header row 18px plus four rows of 40px and their gaps: 18 + 160 + 32 = 210px, then 28px of air. */
dialog#pause .controls-help{top:calc(var(--pause-top) + 238px);left:var(--pause-right);width:min(440px,calc(96vw - var(--pause-right)));max-height:calc(100% - var(--pause-top) - 300px);margin:0;overflow-y:auto;scrollbar-width:thin;font-size:12px;line-height:1.65;color:#dcdfd2}
dialog#pause .controls-help::before{content:'Controls';display:block;margin-bottom:10px;font:10px var(--cf-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cf-copper-hi)}
dialog#pause .controls-help p{margin:0 0 10px}
@media (max-height:860px) and (min-width:761px){
  dialog#pause{padding:7vh 8vw}
  dialog#pause .dialog-head{margin-bottom:3vh}
  dialog#pause h2{font-size:clamp(40px,4.4vw,60px)}
  dialog#pause #resume{margin-top:18px}
  dialog#pause .setting-row{padding:11px 0}
}
/* Narrow screens: one scrolling column on the ceramic. */
@media (max-width:760px){
  dialog#pause{background:none}
  dialog#pause::before{width:auto;right:0}
  dialog#pause::after{display:none}
  dialog#pause .campaign-pause-actions,dialog#pause .controls-help{position:static;width:auto;max-width:360px;max-height:none;margin-top:24px}
  dialog#pause .campaign-pause-actions .setting-row{color:var(--cf-ink);border-top-color:var(--cf-seam)}
  dialog#pause .campaign-pause-actions::before,dialog#pause .controls-help::before{color:var(--cf-copper-ink)}
  dialog#pause .controls-help{color:var(--cf-ink-soft)}
  dialog#pause .controls-help b{color:var(--cf-copper-ink)}
}

/* Campaign instruments. The world keeps the middle: objective plate top left, toolbar rail bottom left,
   prompt centered just above the rail, speed and suit readings bottom right. */
body.campaign-active .bottom-center{bottom:86px}
body.campaign-active .camera-tools{max-width:calc(100% - 300px);flex-wrap:wrap;row-gap:0}
.campaign-active .camera-tools #journalButton,.campaign-active .camera-tools #recoverButton{display:inline-flex!important}
/* Speed and charge: a teal inset screen held in an ivory ceramic bezel, like SPEED on the board. */
body.campaign-active .speed-panel,body.campaign-active .weapon-status{left:auto;right:28px;width:172px;padding:11px 14px 10px;border:5px solid #ece4d2;border-radius:0;background:var(--cf-screen);box-shadow:inset 0 2px 5px #000000a6,inset 0 0 0 1px #b9804fa6,0 0 0 1px #9a6a3e73,0 12px 32px #04151a52;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--cf-ivory);opacity:1}
body.campaign-active .speed-panel{display:block!important;bottom:22px}
body.campaign-active .weapon-status{display:block!important;bottom:150px;z-index:2}
body.campaign-active.cockpit-view .speed-panel{display:none!important}
.campaign-active:not(.walk-view) .weapon-status,.campaign-active.coast-view .weapon-status{display:none!important}
.campaign-active .vehicle-title{margin:0 0 4px;font:10px var(--cf-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cf-copper-hi);opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.campaign-active .speed-reading{gap:8px;margin:0 0 8px}
.campaign-active .speed-reading strong{font:400 40px/1 var(--cf-serif);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--cf-ivory)}
.campaign-active .speed-reading span,.campaign-active .speed-panel p,.campaign-active .vital-line,.campaign-active .charge-reading span{font:10px var(--cf-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cf-mist);opacity:1}
.campaign-active .speed-panel p{margin:7px 0 0}
.campaign-active .energy,.campaign-active.walk-view .energy{width:100%;height:3px;border-radius:0;background:#efe7d426}
.campaign-active .energy i{border-radius:0;background:var(--cf-copper-hi)}
.campaign-active .suit-vitals{display:none}
.campaign-active.walk-view:not(.coast-view) .suit-vitals{display:block;margin-bottom:10px}
.campaign-active .vital-track{height:3px;border-radius:0;background:#efe7d426}
.campaign-active .vital-track i{border-radius:0;background:var(--cf-reef)}
.campaign-active .weapon-status .eyebrow{font:10px var(--cf-mono);letter-spacing:.14em;color:var(--cf-copper-hi)}
.campaign-active .charge-reading{margin:4px 0 8px}
.campaign-active .charge-reading strong{font:400 30px/1 var(--cf-serif);font-variant-numeric:tabular-nums;color:var(--cf-ivory)}
.campaign-active .heat-track{height:3px;border-radius:0}
.campaign-active .heat-track i{border-radius:0}
.campaign-active .weapon-status button{min-height:32px;padding:0 10px;border:0;border-radius:0;background:var(--cf-glaze);box-shadow:0 0 0 1px #b9804fa6;font:10px var(--cf-mono);letter-spacing:.14em;color:var(--cf-ink)}
.campaign-active.walk-view:not(.coast-view) .crosshair{display:block!important}
.campaign-active .damage-vignette{pointer-events:none}
.campaign-active .field-guide-button{display:none!important}
/* The old mission panel stays hidden in campaign (campaign.css). These keep it sane if root shows it again. */
.campaign-active .mission{backdrop-filter:none!important;border-radius:0!important}
.campaign-active .mission p{-webkit-line-clamp:unset;display:block;overflow:visible}
.campaign-active .mission-progress{display:none!important}
.campaign-active .mission-bottom{display:flex!important}
@media (pointer:coarse){
  body.campaign-active .speed-panel{bottom:250px;right:24px;width:150px}
  body.campaign-active .weapon-status{bottom:380px;right:24px;width:150px}
}
@media (max-width:640px){
  dialog.signal-link{width:calc(100vw - 20px);padding:24px 18px 20px 26px}
  .signal-link h2{font-size:38px}
  .signal-meter{grid-template-columns:1fr 1fr;gap:12px 20px}
  .signal-channel{grid-template-columns:1fr auto;gap:8px 12px}
  .signal-track{grid-column:1/-1;grid-row:2}
}
@media (max-height:860px) and (min-width:641px){
  .signal-link h2{font-size:42px;margin:8px 0 10px}
  .signal-meter{margin:12px 0 12px}
  .signal-channel{min-height:54px}
}
@media (prefers-reduced-motion:reduce){.signal-channel{transition:none}}
/* The campaign keeps the social/editor hub in free exploration. */
body.campaign-active .horizon-launch{display:none}