/* One expedition board. The authored image and its markers share an uncropped canvas. */
body #campaign{
  --exp-ink:#211c1c;--exp-paper:#f0e1c4;--exp-muted:#b7a99a;--exp-brass:#bc9760;
  background:#211b1c;border:1px solid #a382565c;border-radius:5px;
  box-shadow:0 8px 30px #08060670;isolation:isolate;overflow:hidden;
}
body #campaign.authored-map{--exp-ink:#291a1d;--exp-muted:#c4aaa0;--exp-brass:#ceab73}
body.pc #campaign.active{display:grid;grid-template-columns:clamp(236px,20vw,320px) minmax(0,1fr)}
body.pc #campaign::after{display:none}
body #campaign .campaign-panel{
  position:relative;z-index:2;display:flex;flex-direction:column;min-width:0;min-height:0;
  padding:28px 26px 24px;gap:25px;overflow-y:auto;
  background:radial-gradient(ellipse at 0 0,#79524430,transparent 75%),linear-gradient(160deg,var(--exp-ink),#17171a);
  border-right:1px solid #c6a46d50;box-shadow:8px 0 24px #110d0e55;color:var(--exp-paper);
  scrollbar-width:thin;scrollbar-color:#8b7154 #211a1c;
}
body #campaign .chap{position:static;display:block;padding:0;pointer-events:auto;flex:none;min-width:0}
body #campaign .campaign-eyebrow{margin:0 0 22px;color:var(--exp-brass);font:600 15px/1.3 var(--font-ui);letter-spacing:.24em;text-transform:uppercase}
body #campaign .chapter-navigation{display:flex;align-items:center;gap:12px;margin-bottom:24px}
body #campaign .pg{
  width:32px;height:32px;flex:none;border-radius:50%;border:1px solid #c4a67955;
  background:#ad845215;color:var(--exp-paper);box-shadow:none;font:22px/1 var(--font-ui);
  backdrop-filter:none;cursor:pointer;display:grid;place-items:center;
}
body #campaign .pg:hover:enabled{background:#ad845235;border-color:var(--exp-brass)}
body #campaign .pg.off{opacity:.28;cursor:default}
body #campaign .cnum{flex:1;color:#cebda4;font:500 15px/1.3 var(--font-ui);letter-spacing:.15em;text-transform:uppercase;text-align:center}
body #campaign .plaque{display:block;width:auto;height:auto;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
body #campaign .plaque::before,body #campaign .plaque::after{display:none}
body #campaign .cname{margin:0;max-width:none;white-space:normal;overflow:visible;color:var(--exp-paper);font:500 clamp(25px,2.35vw,38px)/1.15 var(--font-display);letter-spacing:-.025em;text-shadow:0 2px 6px #0005;text-wrap:balance}
body #campaign #campaign-description{margin:17px 0 0;color:var(--exp-muted);font:15px/1.7 var(--font-ui)}
body #campaign .campaign-status{display:flex;flex-direction:column;gap:10px;padding:0;color:var(--exp-muted);font:15px/1.4 var(--font-ui);flex:none}
body #campaign .campaign-meter{height:3px;background:#c9aa7d22;border-radius:3px;overflow:hidden}
body #campaign .campaign-meter i{display:block;width:var(--campaign-progress,0%);height:100%;background:linear-gradient(90deg,#876440,#d8bc85)}
body #campaign .campaign-journey{display:flex;flex-direction:column;gap:16px;margin-top:auto;padding-top:22px;border-top:1px solid #c3a07535;min-width:0}
body #campaign .campaign-next{display:flex;flex-direction:column;gap:9px}
body #campaign #campaign-next-title{color:var(--exp-brass);font:600 15px/1.4 var(--font-ui);letter-spacing:.13em;text-transform:uppercase}
body #campaign #campaign-destination{font:500 clamp(19px,1.6vw,24px)/1.25 var(--font-display);color:var(--exp-paper);text-wrap:balance}
body #campaign #campaign-next-note{display:flex;align-items:center;gap:7px;color:var(--exp-muted);font:15px/1.5 var(--font-ui)}
body #campaign #campaign-next-note img{width:18px;height:24px;flex:none;object-fit:contain;filter:drop-shadow(0 1px 2px #000)}
body #campaign #campaign-next-note.short{color:#edbb99}
body #campaign #campaign-continue{
  width:100%;min-height:48px;padding:12px 15px;border:1px solid #d6b784a6;border-radius:3px;
  color:#fbecd0;background:linear-gradient(120deg,#84603b,#5d412f);
  box-shadow:inset 0 1px #f2d5a42b,0 3px 9px #0b08094d;
  font:600 15px/1.4 var(--font-ui);cursor:pointer;
}
body #campaign #campaign-continue:hover:enabled{background:linear-gradient(120deg,#9c7346,#715038)}
body #campaign #campaign-continue:disabled{opacity:.45;cursor:default}
body #campaign #campaign-replay-hint{margin:0;color:#a4978b;font:15px/1.6 var(--font-ui)}
body #campaign button:focus-visible{outline:2px solid #f3dfb6;outline-offset:4px}

/* A soft extension of the same art fills narrow gutters without cropping the location. */
body #campaign .mapwrap{
  position:relative;isolation:isolate;container-type:size;display:grid;place-items:center;
  min-width:0;min-height:0;margin:0;padding:0;overflow:hidden;scrollbar-gutter:auto;
  border:0;border-radius:0;background:var(--exp-ink);
}
body #campaign .mapwrap::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--chapter-art) center/cover no-repeat;filter:blur(28px) brightness(.45) saturate(.6);
}
body #campaign .mapinner{position:relative;width:100%;height:100%;min-height:0;max-width:none;margin:0;aspect-ratio:auto}
body #campaign .chbg{object-position:center;filter:saturate(.85) brightness(.85)}
body #campaign .mapinner::after{background:linear-gradient(180deg,#170e141c,transparent 40%,#170e1433);pointer-events:none}
body #campaign.authored-map .mapinner{width:min(100cqw,150cqh);height:auto;aspect-ratio:3/2}
body #campaign.authored-map .chbg{object-fit:contain;object-position:center;filter:none}
body #campaign.authored-map .mapinner::after{display:none}
body #campaign .pt{
  width:36px;height:36px;font:500 15px/1 var(--font-display);border-radius:50%;
  background:linear-gradient(145deg,#594439,#30282a);color:#f4e6d0;border:1px solid #c6b191;
  box-shadow:0 2px 6px #200b09b3,inset 0 0 0 3px #31272b,inset 0 0 0 4px #ba9e7466;opacity:1;animation:none;
}
body.pc #campaign .pt,body #campaign.authored-map .pt{left:var(--map-x)!important;top:var(--map-y)!important}
body #campaign .pt.lock{color:#d2c0a7;background:linear-gradient(145deg,#4f4038,#30262c);border-color:#ad977b}
body #campaign .pt.done{color:#e5edd9;border-color:#9cb89d;background:linear-gradient(#486055,#253c31)}
body #campaign .pt.done::after{right:-3px;bottom:-2px;width:13px;height:13px;display:grid;place-items:center;background:#294237;color:#e8f1d9;border:1px solid #90ad8a;border-radius:50%;font:9px/1 var(--font-ui)}
body #campaign .pt.cur{width:44px;height:44px;border:2px solid #ffe5aa;color:#fff6df;background:linear-gradient(145deg,#9b7040,#493025);box-shadow:0 0 0 4px #4c221bb3,0 0 0 6px #f1d092a6,0 5px 14px #290c1099,inset 0 0 0 3px #493228}
body #campaign .pt.boss{width:42px;height:42px;border-radius:9px;background:linear-gradient(#76443b,#37262c)}
body #campaign .pt.boss::before{display:none}
body #campaign .pt:hover,body #campaign .pt:focus-visible{transform:translate(-50%,-50%);z-index:3;filter:brightness(1.12)}
body #campaign .pt[data-place]::before{
  content:attr(data-place);display:block;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:170px;padding:5px 9px;border:1px solid #d4b58a88;border-radius:3px;
  background:#271b23f0;color:#f5e7d1;font:12px/1.25 var(--font-display);letter-spacing:0;
  pointer-events:none;opacity:0;
}
body #campaign .pt:focus-visible::before,body #campaign .pt:hover::before{opacity:1}
body #campaign .pt[data-label-side="right"]::before{left:0;transform:none}
body #campaign .pt[data-label-side="left"]::before{left:auto;right:0;transform:none}
body #campaign .trail path{stroke:#deccaa;stroke-opacity:.6;stroke-width:3;stroke-dasharray:6 7;filter:drop-shadow(0 2px 2px #27151c)}

@media(min-width:1000px) and (max-height:760px){
  body.pc #campaign .campaign-panel{padding:20px;gap:18px}
  body.pc #campaign .campaign-eyebrow{margin-bottom:12px}
  body.pc #campaign .chapter-navigation{margin-bottom:16px}
  body.pc #campaign .cname{font-size:26px}
  body.pc #campaign #campaign-description{font-size:15px;line-height:1.5;margin-top:12px}
  body.pc #campaign .campaign-journey{gap:12px;padding-top:16px}
  body.pc #campaign #campaign-replay-hint{display:none}
}
/* On a narrow, tall desktop the controls sit in the artwork's clear margins. */
@media(min-width:1000px) and (max-width:1199px) and (min-height:700px){
  body.pc #campaign.authored-map.active{display:block}
  body.pc #campaign.authored-map .campaign-panel{display:contents}
  body.pc #campaign.authored-map .mapwrap{position:absolute;inset:0}
  body.pc #campaign.authored-map .chap{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:16px 22px 45px;background:linear-gradient(#21171ded,#21171d80 70%,transparent);pointer-events:none}
  body.pc #campaign.authored-map .campaign-eyebrow,body.pc #campaign.authored-map #campaign-description{display:none}
  body.pc #campaign.authored-map .plaque{order:0;pointer-events:none}
  body.pc #campaign.authored-map .cname{font-size:27px}
  body.pc #campaign.authored-map .chapter-navigation{order:1;margin:0;min-width:170px;pointer-events:auto}
  body.pc #campaign.authored-map .campaign-status{position:absolute;z-index:3;top:57px;left:22px;width:180px;font-size:15px;gap:6px;pointer-events:none}
  body.pc #campaign.authored-map .campaign-journey{position:absolute;z-index:2;bottom:0;left:0;right:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin:0;padding:12px 22px;gap:18px;background:linear-gradient(0deg,#20181df5,#20181ddd);border:0}
  body.pc #campaign.authored-map .campaign-next{gap:3px}
  body.pc #campaign.authored-map #campaign-destination{font-size:20px}
  body.pc #campaign.authored-map #campaign-next-note img{height:18px;width:14px}
  body.pc #campaign.authored-map #campaign-continue{width:auto;min-width:170px}
  body.pc #campaign.authored-map #campaign-replay-hint{display:none}
}
@media(max-width:999px),(max-height:559px){
  body #campaign.active{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
  body #campaign .campaign-panel{display:contents}
  body #campaign .chap{grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:18px 20px 10px;background:linear-gradient(135deg,var(--exp-ink),#1a171b)}
  body #campaign .campaign-eyebrow{margin:0;align-self:center;font-size:15px}
  body #campaign .chapter-navigation{gap:8px;margin:0;grid-column:2;grid-row:1}
  body #campaign .pg{width:28px;height:28px;font-size:19px}
  body #campaign .cnum{font-size:15px;min-width:66px;flex:none}
  body #campaign .plaque{grid-column:1/-1;margin-top:8px}
  body #campaign .cname{font-size:27px;line-height:1.2;text-wrap:initial}
  body #campaign #campaign-description{display:none}
  body #campaign .campaign-status{grid-row:2;gap:8px;padding:0 20px 13px;background:#1a171b;font-size:15px}
  body #campaign .mapwrap{grid-row:3}
  body #campaign .campaign-journey{grid-row:4;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 14px;margin:0;padding:18px 20px;background:linear-gradient(135deg,var(--exp-ink),#18171a)}
  body #campaign .campaign-next{gap:5px}
  body #campaign #campaign-next-title{font-size:15px}
  body #campaign #campaign-destination{font-size:19px}
  body #campaign #campaign-next-note{font-size:15px;gap:4px}
  body #campaign #campaign-next-note img{width:14px;height:18px}
  body #campaign #campaign-continue{max-width:130px;min-height:46px;padding:10px 12px;font-size:15px}
  body #campaign #campaign-replay-hint{display:none}
  body #campaign .pt{width:28px;height:28px;font-size:15px}
  body #campaign .pt.cur{width:34px;height:34px;box-shadow:0 0 0 3px #4c221bb3,0 0 0 5px #f1d092a6,0 4px 10px #290c1099,inset 0 0 0 3px #493228}
  body #campaign .pt.boss{width:32px;height:32px}
  body #campaign .pt[data-place]::before{font-size:10px;max-width:130px;padding:4px 6px}
}