/* The Pelagic Signal: Ceramic Flightdeck. Ivory ceramic rails and plates, dark teal inset readouts, copper markers.
   The live world stays the picture. Load after the other stylesheets. Selectors are scoped to cf- classes,
   #start.cf-start, body.campaign-active, #stationPanel or #pause. */
:root{
  --cf-ivory:#efe7d4;--cf-ink:#173a3c;--cf-ink-soft:#465b56;--cf-teal:#0f2a2e;--cf-reef:#6fb0a4;--cf-reef-hi:#9fd6ca;
  --cf-copper:#b9804f;--cf-copper-hi:#dcae7d;--cf-copper-ink:#8a5228;--cf-coral:#e3a07f;--cf-coral-ink:#9c4126;--cf-mist:#bfcbc2;
  --cf-rule:#efe7d424;--cf-seam:#173a3c1f;
  --cf-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;--cf-serif:Instrument,Georgia,serif;--cf-sans:DM,Arial,sans-serif;
  --cf-band:clamp(440px,38vw,600px);
  /* Glazed ceramic: a warm top light falling to a slightly shaded lower edge. */
  --cf-glaze:linear-gradient(180deg,#fbf7ee 0,#efe8d8 34%,#e6ddc9 100%);
  /* Four copper rivets, one in each corner. */
  --cf-rivets:radial-gradient(circle,#e2b083 0 1.4px,#7a4a26 2.1px,transparent 2.7px) left 7px top 7px/8px 8px no-repeat,radial-gradient(circle,#e2b083 0 1.4px,#7a4a26 2.1px,transparent 2.7px) right 7px top 7px/8px 8px no-repeat,radial-gradient(circle,#e2b083 0 1.4px,#7a4a26 2.1px,transparent 2.7px) left 7px bottom 7px/8px 8px no-repeat,radial-gradient(circle,#e2b083 0 1.4px,#7a4a26 2.1px,transparent 2.7px) right 7px bottom 7px/8px 8px no-repeat;
  /* Ceramic bevel with a copper hairline seam and a soft cast shadow. */
  --cf-bevel:inset 0 1px 0 #fffdf7,inset 0 -2px 0 #cdbf9f,0 0 0 1px #9a6a3e73,0 12px 32px #04151a52;
  /* Dark teal inset screen, set into the ceramic with a copper frame. */
  --cf-screen:linear-gradient(180deg,#0a2024,#11302f);
  --cf-sunk:inset 0 2px 5px #000000a6,inset 0 0 0 1px #00000059,0 0 0 1px #b9804fa6,0 1px 0 1px #fffaf0b3;
}

/* Shared controls. Global button rules set borders, radii and hover fills, so each is reset here. */
.cf-btn{appearance:none;border:0;border-radius:0;background:none;color:inherit;font:inherit;font-family:var(--cf-sans);min-height:44px;padding:0;box-shadow:none;cursor:pointer;text-align:left}
.cf-btn:hover{background:none}
.cf-btn:disabled{cursor:wait;opacity:.55}
.cf-btn:focus-visible,.cf-arcade:focus-visible{outline:2px solid var(--cf-copper-ink);outline-offset:4px}
/* The main key: a teal inset screen in a copper frame with ivory type, like Set course on the board. */
.cf-btn-main,.cf-btn-ink{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(100%,360px);min-height:56px;padding:0 22px;background:var(--cf-screen);color:var(--cf-ivory);font-size:17px;box-shadow:var(--cf-sunk)}
.cf-btn-main:hover,.cf-btn-ink:hover{background:linear-gradient(180deg,#123236,#18403f);color:#fff}
.cf-btn-main:disabled{background:var(--cf-screen);color:#efe7d4a6}
.cf-arrow{color:var(--cf-copper-hi);font-size:20px;line-height:1}
/* Secondary keys: ivory ceramic plates with a copper bracket on the left. */
.cf-link{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;background:var(--cf-glaze);border-left:3px solid var(--cf-copper);box-shadow:inset 0 1px 0 #fffdf7,inset 0 -2px 0 #cdbf9f,0 0 0 1px #173a3c2e,0 2px 4px #173a3c26;font-size:14px;color:var(--cf-ink)}
.cf-link:hover{background:#fffaf0;color:var(--cf-ink)}
.cf-arcade{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--cf-ink-soft);font:13px var(--cf-sans);text-decoration:none;letter-spacing:.01em}
.cf-arcade:hover{color:var(--cf-ink)}
.cf-arcade span:first-child{color:var(--cf-copper-ink)}
.cf-kicker{margin:0;font:11px/1.4 var(--cf-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cf-copper-ink)}
.cf-kicker span{margin-left:14px;padding-left:14px;border-left:1px solid #8a522866;color:var(--cf-ink-soft)}
.cf-lede{margin:0 0 24px;max-width:38ch;font:16px/1.6 var(--cf-sans);color:var(--cf-ink-soft)}

/* The ticked route line used by the HUD, the briefing and the ending: an inset groove with copper fill. */
.cf-track{list-style:none;display:flex;gap:4px;margin:8px 0 10px;padding:0}
.cf-track li{flex:1;height:4px;background:#173a3c1f;box-shadow:inset 0 1px 1px #173a3c40}
.cf-track li.is-done{background:var(--cf-copper);box-shadow:none}
.cf-track li.is-current{background:var(--cf-ink);box-shadow:none}

/* Title: an ivory ceramic wall panel on the left with a brushed copper rail. The live world fills the rest. */
#start.cf-start{display:block;padding:0;background:linear-gradient(90deg,transparent var(--cf-band),#0c232740 var(--cf-band),transparent calc(var(--cf-band) + 18vw))}
.cf-band,.cf-ending-band{position:absolute;top:0;bottom:0;left:0;width:var(--cf-band);background:linear-gradient(180deg,transparent calc(33% - 1px),var(--cf-seam) calc(33% - 1px) 33%,transparent 33% calc(70% - 1px),var(--cf-seam) calc(70% - 1px) 70%,transparent 70%),var(--cf-glaze);box-shadow:inset -1px 0 0 #fffdf7,18px 0 40px #04151a40;color:var(--cf-ink)}
.cf-band::after,.cf-ending-band::after{content:'';position:absolute;top:0;bottom:0;right:-8px;width:8px;pointer-events:none;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)}
.cf-band-inner{position:relative;height:100%;display:flex;flex-direction:column;padding:clamp(36px,7vh,72px) clamp(36px,4vw,64px) 28px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8a522866 transparent}
.cf-name{margin:20px 0 20px;padding-bottom:16px;border-bottom:1px solid #173a3c40;font-family:var(--cf-serif);font-size:clamp(64px,6.4vw,112px);font-weight:400;line-height:.9;letter-spacing:-.02em;color:var(--cf-ink)}
.cf-name em{font-style:normal;color:var(--cf-ink)}
.cf-legs{position:relative;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);max-width:420px;margin:0 0 26px;padding:0}
.cf-legs::before{content:'';position:absolute;top:5px;left:6px;width:calc(66.6% - 6px);height:1px;background:repeating-linear-gradient(90deg,var(--cf-copper) 0 6px,transparent 6px 10px)}
.cf-legs li{position:relative;padding:20px 10px 0 0}
.cf-legs i{position:absolute;top:0;left:0;width:11px;height:11px;transform:rotate(45deg);border:1.5px solid var(--cf-copper);background:#f6f0e2}
.cf-legs li.is-current i{background:var(--cf-copper);border-color:var(--cf-copper-ink)}
.cf-legs strong{display:block;font:11px/1.3 var(--cf-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cf-ink)}
.cf-legs small{display:block;margin-top:4px;font:12px/1.4 var(--cf-sans);color:var(--cf-ink-soft)}
.cf-actions{display:flex;flex-direction:column;align-items:flex-start}
.cf-alt{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.cf-status{min-height:20px;margin:14px 0 0;max-width:40ch;font:13px/1.5 var(--cf-sans);color:var(--cf-ink-soft)}
.cf-status:empty{min-height:0;margin:0}
.cf-status.cf-warn{color:var(--cf-coral-ink)}
.cf-load{width:min(100%,360px);height:4px;margin:18px 0 0;background:#173a3c1f;box-shadow:inset 0 1px 1px #173a3c40;overflow:hidden;transition:opacity .6s}
.cf-load i{display:block;width:10%;height:100%;background:var(--cf-copper);transition:width .5s}
.cf-start.is-ready .cf-load{opacity:.35}
/* Facts sit in one teal inset readout, like the speed and altitude screens on the board. */
.cf-facts{list-style:none;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 26px;margin:26px 0 0;padding:12px 16px;background:var(--cf-screen);box-shadow:var(--cf-sunk)}
.cf-facts span{display:block;margin-bottom:5px;font:10px var(--cf-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cf-copper-hi)}
.cf-facts b{font:400 13px/1.4 var(--cf-sans);color:var(--cf-ivory)}
.cf-band .cf-arcade{margin-top:auto;padding-top:16px;align-self:flex-start}
.cf-legacy{display:none!important}

/* Campaign HUD: one compact ceramic plate top left. Objective, bearing, next step, then controls. */
body.campaign-active #hud .mission{display:none!important}
.cf-hud{position:absolute;top:96px;left:28px;z-index:3;width:300px;max-height:calc(100% - 196px);overflow-y:auto;scrollbar-width:none;padding:12px 14px 11px;background:var(--cf-rivets),var(--cf-glaze);box-shadow:var(--cf-bevel);color:var(--cf-ink);font-family:var(--cf-sans);pointer-events:auto}
.cf-hud-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 4px;font:10px var(--cf-mono);letter-spacing:.16em;text-transform:uppercase}
.cf-count{color:var(--cf-copper-ink)}
.cf-clock{color:var(--cf-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.cf-hud .cf-track{margin:6px 0 9px}
.cf-objective{display:flex;align-items:baseline;gap:10px;margin:0 0 5px;font:400 22px/1.12 var(--cf-serif);letter-spacing:-.005em;color:var(--cf-ink)}
/* The copper diamond marker from the board, beside the objective. */
.cf-objective::before{content:'';flex:none;width:8px;height:8px;transform:translateY(-3px) rotate(45deg);border:1.5px solid var(--cf-copper);background:#f6f0e2}
.cf-context{margin:0 0 9px;font-size:12.5px;line-height:1.45;color:var(--cf-ink-soft)}
.cf-next{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;margin:0 0 9px;padding:2px 0 2px 10px;border-left:2px solid var(--cf-copper)}
.cf-next-tag{font:10px var(--cf-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cf-copper-ink)}
.cf-next-text{font-size:13px;line-height:1.42;color:var(--cf-ink)}
.cf-meter{height:4px;background:#173a3c1f;box-shadow:inset 0 1px 1px #173a3c40}
.cf-meter i{display:block;width:0;height:100%;background:var(--cf-copper);transition:width .4s ease}
.cf-mini{flex:none;min-height:32px;font:10px var(--cf-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cf-ink);border-bottom:1px solid #8a522866}
.cf-mini:hover{color:var(--cf-copper-ink);border-bottom-color:var(--cf-copper)}
.cf-hud-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:3px}
.cf-save{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:10px var(--cf-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cf-ink-soft)}

/* Bearing: the live .mission-bottom row from game.js, set into a teal inset readout. */
.cf-nav{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:5px;margin:0 0 9px;padding:6px 8px 6px 10px;background:var(--cf-screen);box-shadow:var(--cf-sunk)}
.cf-nav[hidden]{display:none}
.cf-nav-tag{font:10px var(--cf-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cf-copper-hi)}
.cf-hud .mission-bottom{display:flex!important;align-items:center;justify-content:space-between;gap:10px;min-width:0;font-size:inherit}
.cf-hud .mission-distance{display:flex;align-items:center;gap:9px;min-width:0;flex:none}
.cf-hud #bearingArrow{display:grid;place-items:center;flex:none;width:26px;height:26px;border:1px solid var(--cf-copper);border-radius:50%;font:14px/1 var(--cf-sans);font-style:normal;color:var(--cf-copper-hi);background:#071a1d}
.cf-hud #distance{font:400 21px/1 var(--cf-serif);font-variant-numeric:tabular-nums;color:var(--cf-ivory);white-space:nowrap}
/* The guide action is a small ivory key on the screen, so it reads as something to press. */
.cf-hud #guideButton{appearance:none;flex:none;display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 10px;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 #b9804fa6;font:10px var(--cf-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cf-ink);cursor:pointer}
.cf-hud #guideButton:hover{background:#fffaf0;color:var(--cf-ink)}
.cf-hud #guideButton:focus-visible{outline:2px solid var(--cf-copper-hi);outline-offset:3px}
.cf-hud #guideButton[hidden]{display:none}
/* G works for the guide button whenever the player is not on foot. */
body:not(.walk-view) .cf-hud #guideButton::after{content:'G';padding:1px 4px;border:1px solid #173a3c4d;font:10px var(--cf-mono);letter-spacing:0;color:var(--cf-copper-ink)}
.cf-keys{display:flex;flex-wrap:wrap;gap:4px 10px;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--cf-seam);font:10px var(--cf-mono);letter-spacing:.04em;color:var(--cf-ink-soft)}
.cf-keys kbd{margin:0 4px 0 0;padding:1px 4px;border:0;border-radius:0;background:#fffaf0;box-shadow:0 0 0 1px #173a3c40,0 1px 0 1px #cdbf9f;font:10px var(--cf-mono);color:var(--cf-ink)}

/* Bottom toolbar: one ivory ceramic rail with teal ink, readable over sand, sea or sky.
   elsewhere.css and premium.css set these buttons with !important, so the overrides need it too. */
body.campaign-active .camera-tools{left:28px;bottom:22px;gap:0;padding:3px;background:var(--cf-glaze);box-shadow:var(--cf-bevel);border-radius:0}
body.campaign-active .camera-tools button{display:inline-flex;align-items:center;min-height:34px;padding:0 12px!important;border:0;border-left:1px solid var(--cf-seam);border-radius:0;background:none!important;box-shadow:none;font:10px var(--cf-mono)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--cf-ink)!important;opacity:1}
body.campaign-active .camera-tools button:first-child{border-left:0}
body.campaign-active .camera-tools button:hover{background:#173a3c12!important}
body.campaign-active .camera-tools button:focus-visible{outline:2px solid var(--cf-copper-ink);outline-offset:-2px}
body.campaign-active .camera-tools button[aria-pressed=true]{background:var(--cf-screen)!important;color:var(--cf-ivory)!important;box-shadow:inset 0 2px 4px #000000a6}
/* The route action (Enter orbit and the like) carries the copper marker. */
body.campaign-active .camera-tools #navigationButton{color:var(--cf-copper-ink)!important;gap:8px}
body.campaign-active .camera-tools #navigationButton::before{content:'';width:6px;height:6px;transform:rotate(45deg);border:1.5px solid var(--cf-copper)}

/* Interaction prompt: an ivory chip with an inset key. */
body.campaign-active #interact{gap:14px;min-height:40px;padding:0 8px 0 16px;border:0;border-radius:0;background:var(--cf-glaze);box-shadow:var(--cf-bevel);backdrop-filter:none;-webkit-backdrop-filter:none;font:13px var(--cf-sans);color:var(--cf-ink)}
body.campaign-active #interact kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border:0;border-radius:0;background:var(--cf-screen);box-shadow:inset 0 1px 3px #000000a6,0 0 0 1px #b9804fa6;font:11px var(--cf-mono);color:var(--cf-ivory)}

/* Sound and Pause: ivory ceramic keys so they read against any sky. */
body.campaign-active .topbar .tools button,body.cf-ending-open .topbar .tools button{min-height:40px;border:0;border-radius:0;background:var(--cf-glaze);box-shadow:var(--cf-bevel);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--cf-ink);opacity:1}
body.campaign-active .topbar .tools button:hover,body.cf-ending-open .topbar .tools button:hover{background:#fffaf0;color:var(--cf-ink)}
body.campaign-active .topbar .tools button:focus-visible,body.cf-ending-open .topbar .tools button:focus-visible{outline:2px solid var(--cf-copper-hi);outline-offset:3px}

/* Chapter briefing: an ivory ceramic mission plate anchored left, world visible to the right. */
dialog.cf-briefing{position:fixed;inset:0;margin:auto auto auto clamp(20px,4vw,64px);width:min(540px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 80px);padding:30px 36px 26px;border:0;border-radius:0;background:var(--cf-rivets),var(--cf-glaze);color:var(--cf-ink);box-shadow:var(--cf-bevel),0 30px 90px #03141866;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden}
dialog.cf-briefing[open]{display:flex;flex-direction:column}
dialog.cf-briefing::backdrop{background:linear-gradient(90deg,#0a1f2399,#0a1f2314 70%);backdrop-filter:none;-webkit-backdrop-filter:none}
.cf-sheet-head{flex:none}
.cf-sheet-count{font:11px var(--cf-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cf-copper-ink)}
.cf-briefing h2{flex:none;margin:8px 0 14px;padding-bottom:12px;border-bottom:1px solid #173a3c40;font:400 clamp(36px,3.8vw,50px)/1.04 var(--cf-serif);letter-spacing:-.015em;color:var(--cf-ink)}
.cf-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:8px;scrollbar-width:thin;scrollbar-color:#8a522866 transparent}
.cf-sheet-body p{margin:0 0 12px;max-width:48ch;font:15.5px/1.62 var(--cf-sans);color:var(--cf-ink-soft);white-space:pre-line}
.cf-briefing .cf-reward{flex:none;display:flex;align-items:baseline;gap:12px;margin:10px 0 0;padding-top:14px;border-top:1px solid var(--cf-seam);font-size:inherit;color:var(--cf-ink)}
.cf-reward span{display:inline-flex;align-items:center;gap:8px;font:10.5px var(--cf-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cf-copper-ink)}
.cf-reward span::before{content:'';width:7px;height:7px;transform:rotate(45deg);border:1.5px solid var(--cf-copper)}
.cf-reward strong{font:400 22px/1.2 var(--cf-serif);color:var(--cf-ink)}
.cf-sheet-foot{flex:none;margin-top:20px}
.cf-btn-ink{width:min(100%,300px);min-height:54px;font-size:16px}

/* Ending: the ceramic panel widens, the route is fully inked, the world stays visible on the right. */
.cf-ending{position:fixed;inset:0;z-index:115;background:linear-gradient(90deg,transparent clamp(520px,46vw,720px),#0a1f2340 clamp(520px,46vw,720px),transparent)}
.cf-ending-band{width:clamp(520px,46vw,720px)}
.cf-ending .cf-band-inner{padding-top:max(110px,13vh)}
body.cf-ending-open .topbar{z-index:116}
body.cf-ending-open #hud{display:none!important}
/* The wordmark sits over the ivory ending panel on wide screens, so it takes teal ink and a copper star there. */
@media (min-width:761px){
  body.cf-ending-open .topbar .brand{color:var(--cf-ink);opacity:1}
  body.cf-ending-open .topbar .brand svg{color:var(--cf-copper-ink)}
}
.cf-ending-title{margin:18px 0 18px;font:400 clamp(52px,5.4vw,92px)/.98 var(--cf-serif);letter-spacing:-.02em;color:var(--cf-ink);outline:none}
.cf-ending-title em{font-style:italic;color:var(--cf-copper-ink)}
.cf-ending .cf-lede{max-width:40ch;font-size:17px}
.cf-route-done{max-width:460px;margin:0 0 20px}
.cf-route-done span{font:10px var(--cf-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cf-copper-ink)}
.cf-route-done .cf-track{margin:8px 0 0}
/* The ledger is a row of teal inset readouts with ivory numerals. */
.cf-ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:14px 18px;max-width:560px;margin:0 0 22px;padding:14px 16px;background:var(--cf-screen);box-shadow:var(--cf-sunk)}
.cf-ledger dt{margin-bottom:6px;font:10px var(--cf-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cf-copper-hi)}
.cf-ledger dd{margin:0;font:400 30px/1.05 var(--cf-serif);font-variant-numeric:tabular-nums;color:var(--cf-ivory);white-space:nowrap}
.cf-suit{display:flex;align-items:center;gap:16px;max-width:460px;margin:0 0 24px;padding:12px 16px;background:#fffaf0a6;border-left:3px solid var(--cf-copper);box-shadow:0 0 0 1px #173a3c2e}
.cf-suit-mark{flex:none;color:var(--cf-copper-ink);line-height:0}
.cf-suit span{display:block;font:10px var(--cf-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cf-copper-ink)}
.cf-suit strong{display:block;margin:3px 0 2px;font:400 26px/1.1 var(--cf-serif);color:var(--cf-ink)}
.cf-suit small{font-size:13px;color:var(--cf-ink-soft)}
.cf-actions-row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 20px}
.cf-actions-row .cf-btn-main{width:auto;min-width:240px}

/* Station screens (#stationPanel): the same ceramic plate, tabs on a teal inset rail, copper framed keys.
   Styling only; station-ui.js keeps its markup and logic. */
#stationPanel{--bel-paper:#efe8d8;--bel-copper:#8a5228;--bel-deep:#0f2a2e;padding:30px 34px;border:0;background:var(--cf-rivets),var(--cf-glaze);box-shadow:var(--cf-bevel),0 30px 100px #001a1b80;color:var(--cf-ink);scrollbar-color:#8a522866 transparent}
#stationPanel::backdrop{background:#06191f66;backdrop-filter:none;-webkit-backdrop-filter:none}
#stationPanel .station-dialog-header h2{color:var(--cf-ink)}
#stationPanel .wallet-credits{padding:4px 10px;background:var(--cf-screen);box-shadow:var(--cf-sunk);font:11px var(--cf-mono);letter-spacing:.08em;color:var(--cf-ivory)}
#stationPanel .field-tabs{gap:2px;padding:3px;background:var(--cf-screen);box-shadow:var(--cf-sunk);border:0}
#stationPanel .field-tab{margin:0;border-bottom:2px solid transparent;color:var(--cf-mist);font:10px var(--cf-mono);letter-spacing:.14em;text-transform:uppercase}
#stationPanel .field-tab:hover{background:#efe7d414;color:var(--cf-ivory)}
#stationPanel .field-tab.active{background:#efe7d41a;color:var(--cf-ivory);border-bottom-color:var(--cf-copper-hi)}
#stationPanel .field-tab:focus-visible{outline:2px solid var(--cf-copper-hi);outline-offset:-2px}
#stationPanel .primary,#stationPanel .shop-item button{border:0;background:var(--cf-screen);box-shadow:var(--cf-sunk);color:var(--cf-ivory)}
#stationPanel .primary:hover,#stationPanel .shop-item button:hover{background:linear-gradient(180deg,#123236,#18403f);color:#fff}
#stationPanel .primary:disabled,#stationPanel .shop-item button:disabled{color:#efe7d4b3}
#stationPanel .station-action,#stationPanel .compact-action{background:#fffaf080;border:0;border-left:3px solid var(--cf-copper);box-shadow:0 0 0 1px #173a3c2e}
#stationPanel .station-action:hover,#stationPanel .compact-action:hover{background:#fffaf0}
#stationPanel .station-feedback{background:var(--cf-screen);border:0;box-shadow:var(--cf-sunk);color:var(--cf-ivory)!important}

/* Shorter desktop windows such as 1280x800 */
@media (max-height:860px){
  .cf-name{margin:14px 0 16px;padding-bottom:12px;font-size:clamp(56px,5.6vw,84px)}
  .cf-lede{margin-bottom:18px}
  .cf-legs{margin-bottom:18px}
  .cf-facts{margin-top:20px}
  .cf-ending-title{margin:12px 0 14px;font-size:clamp(46px,4.6vw,72px)}
  .cf-ending .cf-band-inner{padding-top:100px}
  .cf-ledger{margin-bottom:16px;padding:12px 14px}
  .cf-ledger dd{font-size:27px}
  .cf-suit{margin-bottom:18px;padding:10px 14px}
  .cf-hud{top:92px}
  dialog.cf-briefing{max-height:calc(100dvh - 48px);padding-top:26px}
}

/* Narrow and touch screens: the ceramic panel becomes a bottom sheet. */
@media (max-width:760px){
  #start.cf-start{background:none}
  .cf-band,.cf-ending-band{top:auto;width:100%;max-height:82dvh;height:auto;box-shadow:0 -12px 32px #04151a40}
  .cf-band::after,.cf-ending-band::after{top:-6px;bottom:auto;left:0;right:0;width:auto;height:6px;background:linear-gradient(180deg,#6f4322,#e2b083 50%,#6f4322)}
  .cf-band-inner{height:auto;max-height:82dvh;padding:28px 24px 18px}
  .cf-name{font-size:52px}
  .cf-facts{grid-template-columns:1fr 1fr}
  .cf-ending{background:#0a1f2333}
  .cf-ending .cf-band-inner{padding-top:28px}
  .cf-ending-title{font-size:44px}
  .cf-hud{top:78px;left:14px;width:min(290px,calc(100% - 28px));padding:10px 12px}
  .cf-context{display:none}
  body.campaign-active .camera-tools{left:12px;max-width:calc(100% - 24px)}
  dialog.cf-briefing{margin:auto;width:calc(100vw - 24px);padding:24px 22px 22px}
  #stationPanel{padding:22px 20px}
  dialog#pause .prototype-note{display:none}
}
@media (pointer:coarse){.cf-keys,body:not(.walk-view) .cf-hud #guideButton::after{display:none}.cf-mini,.cf-hud #guideButton,body.campaign-active .camera-tools button{min-height:44px}}

@keyframes cf-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cf-fade{from{opacity:0}to{opacity:1}}
dialog.cf-briefing[open]{animation:cf-rise .32s ease-out}
.cf-ending:not([hidden]){animation:cf-fade .5s ease-out}
.cf-ending:not([hidden]) .cf-band-inner{animation:cf-rise .6s ease-out}
@media (prefers-reduced-motion:reduce){
  dialog.cf-briefing[open],.cf-ending:not([hidden]),.cf-ending:not([hidden]) .cf-band-inner{animation:none}
  .cf-meter i,.cf-load,.cf-load i,.cf-btn{transition:none}
}