* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #9fd0ee; }
body { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: #fff; user-select: none; }
#app, #app canvas { position: fixed; inset: 0; display: block; width: 100%; height: 100%; }
.hidden { display: none !important; }

kbd {
  display: inline-block; min-width: 1.5em; padding: 1px 5px; margin: 0 1px;
  border-radius: 5px; background: #fff; color: #333; font: bold 12px/1.4 monospace;
  text-align: center; box-shadow: 0 2px 0 #999;
}

#hud { position: fixed; inset: 0; pointer-events: none; text-shadow: 0 2px 3px rgba(0,0,0,.45); }

#counter {
  position: absolute; right: 18px; bottom: 18px; min-width: 190px; padding: 12px 16px;
  background: rgba(33, 44, 25, .62); border: 3px solid rgba(255,255,255,.35); border-radius: 18px;
}
#counter .row { display: flex; justify-content: space-between; font-size: 18px; font-weight: bold; }
#counter .row.big { font-size: 30px; color: #ffe066; }
#counter .lbl { opacity: .85; margin-right: 18px; }
#counter .stages { display: flex; gap: 12px; margin-top: 6px; font-weight: bold; font-size: 17px; }
/* (the rest of your flock: out and about, and still in the ground) */
#counter .more { margin-top: 5px; font-size: 14px; font-weight: bold; opacity: .8; }
#counter .stage { display: flex; align-items: center; gap: 5px; }
#counter .stage i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; display: inline-block; }
.s0 i { background: #a57a4c; }
.s1 i { background: #d9785c; }
.s2 i { background: linear-gradient(#e0262b 50%, #ffd21f 50%); }

#throw-type {
  position: absolute; left: 18px; bottom: 18px; padding: 10px 16px;
  background: rgba(33, 44, 25, .62); border: 3px solid rgba(255,255,255,.35); border-radius: 16px;
}
#throw-type .lbl { font-size: 13px; opacity: .9; }
#throw-name { font-size: 24px; font-weight: bold; color: #ffe066; }
#throw-kind { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: bold; }
#throw-kind span { padding: 2px 9px; border-radius: 10px; background: rgba(255,255,255,.12); opacity: .55; }
#throw-kind span.on { opacity: 1; background: #ffd21f; color: #3a2a10; text-shadow: none; }
#throw-kind #tk-padded.on { background: #1d2b5e; color: #fff; }
#throw-kind #tk-beach.on { background: #1fb5c9; color: #fff; }
#throw-kind span.none { opacity: .25; }
#throw-kind kbd { margin-left: 4px; }

#corner { position: absolute; right: 18px; top: 16px; display: flex; align-items: center; gap: 12px; }
/* (the sound's off: a crossed-out speaker) */
#muted { display: flex; }
#muted svg { width: 22px; height: 22px; fill: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
#muted .x { fill: none; stroke: #ff6b5a; stroke-width: 2.4; stroke-linecap: round; }
#saved { font-size: 13px; opacity: 0; transition: opacity .5s; text-shadow: 0 1px 2px #000; }
#saved.show { opacity: .8; }

#help {
  position: fixed; right: 18px; top: 48px; width: 390px; padding: 14px 18px; z-index: 5;
  max-height: calc(100vh - 66px); overflow-y: auto;
  background: rgba(25, 34, 20, .82); border-radius: 14px; font-size: 14px; line-height: 1.45;
}
#help p { font-size: 13px; }
#help h3 { margin: 0 0 8px; color: #ffe066; }
#help td { padding: 3px 8px 3px 0; vertical-align: top; }
#help td:first-child { white-space: nowrap; }
#help p { margin: 10px 0 0; opacity: .9; }

/* (a long one wraps, rather than running right across a smaller window, and never leaves one word hanging on a line
   of its own) */
#toast {
  position: fixed; left: 50%; top: 70px; transform: translateX(-50%); padding: 10px 22px;
  width: max-content; max-width: clamp(300px, 100vw - 480px, 1000px); text-align: center; text-wrap: pretty;
  background: rgba(30, 30, 30, .7); border-radius: 30px; font-size: clamp(16px, 1.55vw, 20px); font-weight: bold;
  line-height: 1.3; opacity: 0; transition: opacity .25s; pointer-events: none;
}
#toast.show { opacity: 1; }

#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.mound-label {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); padding: 4px 11px; white-space: nowrap;
  will-change: transform;
  background: rgba(60, 38, 20, .72); border: 2px solid rgba(255, 224, 102, .8); border-radius: 14px;
  font-weight: bold; font-size: 15px; text-shadow: 0 1px 2px #000;
}
.mound-label .bar { height: 6px; margin-top: 3px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.mound-label .bar i { display: block; height: 100%; background: #ffd21f; border-radius: 3px; }
.mound-label.hot { border-color: #ff6b3d; animation: shake .15s infinite; }
@keyframes shake { 50% { margin-left: 2px; } }
/* what F does, over a lever you're close enough to pull (like the note under a mound's dial, only bigger) */
.prompt {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; will-change: transform;
  font-size: 16px; font-weight: bold; text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .45);
}
.prompt kbd { margin-right: 5px; font-size: 13px; text-shadow: none; }

#splash {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10;
  background: radial-gradient(ellipse at center, rgba(40, 60, 30, .55), rgba(20, 30, 15, .85));
}
#splash .card {
  max-width: 560px; padding: 30px 36px; text-align: center; border-radius: 24px;
  background: rgba(30, 40, 24, .9); border: 4px solid #ffd21f; box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
#splash h1 {
  margin: 0; font-size: 56px; letter-spacing: 3px; color: #ffd21f; /* (small enough for the name on one line, in any font) */
  text-shadow: 0 4px 0 #c2261f, 0 8px 12px rgba(0,0,0,.5);
}
#splash .sub { margin: 4px 0 18px; font-size: 18px; opacity: .9; }
#splash .keys { margin: 6px auto 16px; border-collapse: collapse; text-align: left; font-size: 15px; }
#splash .keys td { padding: 4px 10px; }
#splash .keys td:first-child { white-space: nowrap; text-align: right; opacity: .9; }
#splash button {
  margin-top: 10px; padding: 12px 48px; font-family: inherit; font-size: 24px; font-weight: bold; cursor: pointer;
  color: #3a2a10; background: #ffd21f; border: none; border-radius: 40px; box-shadow: 0 5px 0 #b8900c;
}
#splash button:hover { background: #ffe066; }
#splash button:active { transform: translateY(3px); box-shadow: 0 2px 0 #b8900c; }
#splash .hint { font-size: 13px; opacity: .7; margin-top: 16px; }
#splash .buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
#splash button.second { padding: 12px 28px; font-size: 18px; color: #fff; background: rgba(255, 255, 255, .14); box-shadow: 0 5px 0 rgba(0, 0, 0, .35); }
#splash button.second:hover { background: rgba(255, 255, 255, .24); }
#splash button.second.sure { background: #c2261f; }
#save-note { margin: 4px 0 0; font-size: 15px; opacity: .85; }

#loading {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20;
  font-size: 22px; color: #fff; text-shadow: 0 2px 4px #000;
}

/* progress dials over things in the world (like a stamina wheel): inner ring fills, outer ring = extra */
.dial {
  position: absolute; left: 0; top: 0; width: 50px; height: 50px; transform: translate(-50%, -100%);
  will-change: transform; pointer-events: none;
}
.dial.big { width: 62px; height: 62px; }
.dial.big .d-icon { font-size: 20px; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.dial circle { fill: none; }
.dial .d-back { fill: rgba(22, 26, 18, .5); }
.dial .d-track { stroke: rgba(255, 255, 255, .22); stroke-width: 4.5; }
.dial .d-fill { stroke: #f4f1e4; stroke-width: 4.5; transition: stroke-dasharray .12s linear, stroke .2s; }
.dial .d-extra { stroke: #ffd21f; stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray .12s linear; }
.dial.lift .d-fill { stroke: #8be04a; }
.dial.lift svg { filter: drop-shadow(0 0 4px rgba(139, 224, 74, .7)); }
.dial.hot .d-fill { stroke: #ff8a3d; }
.dial.hot svg { animation: dial-pulse .3s ease-in-out infinite alternate; } /* (not on .dial: its transform places it) */
@keyframes dial-pulse { to { transform: rotate(-90deg) scale(1.14); } }
.dial.wait .d-fill { stroke: #c8c2b0; }
/* (the padded mound's: round the outside, how much kit it's got left in it) */
.dial.kit .d-xtrack { stroke: rgba(255, 255, 255, .2); stroke-width: 3; }
.dial.kit .d-extra { stroke: #5ccf6e; }
.dial .d-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.dial .d-note {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 1px;
  font-size: 12px; font-weight: bold; white-space: nowrap; text-shadow: 0 1px 2px #000;
}
.dial .d-note:empty { display: none; }
.dial .d-note kbd { min-width: 0; padding: 0 4px; margin: 0 1px 0 0; font-size: 10px; line-height: 1.45; box-shadow: 0 1px 0 #999; text-shadow: none; }

/* ---------------------------------------------------------------- combat & zones */
.mound-label.small { font-size: 12px; padding: 2px 8px; min-width: 64px; text-align: center; border-color: rgba(255,255,255,.6); }
.mound-label.small.ok { border-color: #7bd34f; }

/* (narrower on a small window, so it's clear of the squad counter and the next-throw panel in the corners) */
#boss {
  position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); width: clamp(240px, min(64vw, 100vw - 540px), 820px);
  pointer-events: none; z-index: 4;
}
#boss-name {
  font-family: 'Cinzel', 'Times New Roman', serif; font-size: 27px; font-weight: 600; letter-spacing: 1.5px;
  color: #eee6d2; text-shadow: 0 2px 4px #000; margin: 0 0 5px 2px;
}
.boss-bar {
  position: relative; height: 13px; background: rgba(12, 10, 8, .8);
  border: 1px solid #8a7650; box-shadow: 0 0 0 1px #000, 0 3px 10px rgba(0,0,0,.6);
}
.boss-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
#boss-lag { background: #d9b44a; transition: width .9s ease .45s; }
#boss-hp { background: linear-gradient(#c0392b, #7a110c); transition: width .1s linear; }
#boss-grip { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
#boss-grip span {
  font-family: 'Cinzel', 'Times New Roman', serif; font-size: 16px; color: #ffe066; text-shadow: 0 2px 4px #000;
  animation: grip-pulse .5s ease-in-out infinite alternate; white-space: nowrap;
}
@keyframes grip-pulse { to { opacity: .55; } }
.grip-bar, .grip-time { position: relative; height: 8px; background: rgba(12, 10, 8, .8); border: 1px solid #8a7650; }
.grip-bar { flex: 3; }
.grip-time { flex: 1; }
.grip-bar i, .grip-time i { position: absolute; left: 0; top: 0; bottom: 0; }
#boss-grip-fill { background: #ffd21f; }
#boss-grip-time { background: #e0e0e0; }

#banner {
  position: fixed; left: 0; right: 0; top: 36%; height: 120px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.75) 22%, rgba(0,0,0,.75) 78%, transparent);
  opacity: 0; transition: opacity 1.1s; pointer-events: none; z-index: 6;
}
#banner.show { opacity: 1; }
#banner-text {
  font-family: 'Cinzel', 'Times New Roman', serif; font-size: clamp(30px, 5vw, 58px); font-weight: 700; letter-spacing: 5px;
  color: #e8c874; text-shadow: 0 0 22px rgba(232, 200, 116, .55), 0 3px 6px #000;
}

#zone-title {
  position: fixed; left: 50%; top: 20%; transform: translateX(-50%); display: flex; align-items: center; gap: 18px;
  opacity: 0; transition: opacity 1.2s; pointer-events: none; z-index: 5;
}
#zone-title.show { opacity: 1; }
#zone-title span {
  font-family: 'Cinzel', 'Times New Roman', serif; font-size: clamp(26px, 4vw, 42px); font-weight: 600; letter-spacing: 3px;
  color: #fff8e6; text-shadow: 0 2px 8px rgba(0,0,0,.75); white-space: nowrap;
}
#dev {
  position: fixed; left: 18px; top: 150px; z-index: 30; width: 330px; padding: 12px 14px;
  background: rgba(15, 18, 24, .92); border: 2px solid #ffd21f; border-radius: 12px; font-size: 13px;
}
#dev h4 { margin: 0 0 8px; color: #ffd21f; letter-spacing: 2px; }
#dev h4 span { float: right; font-weight: normal; color: #999; letter-spacing: 0; }
#dev .dev-lbl { margin: 8px 0 4px; color: #aab; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
#dev .dev-row { display: flex; flex-wrap: wrap; gap: 5px; }
#dev button {
  padding: 5px 8px; font-size: 12px; font-family: inherit; color: #fff; cursor: pointer;
  background: #2b3445; border: 1px solid #4a5670; border-radius: 6px;
}
#dev button:hover { background: #3a4a64; }
.s3 i { background: linear-gradient(135deg, #1fb5c9 50%, #ff8c1a 50%); }
/* (padded up: a navy helmet over white leg guards) */
.s4 i { background: linear-gradient(180deg, #1d2b5e 55%, #f5f5f0 55%); }

#zone-title .line { width: 110px; height: 2px; background: linear-gradient(90deg, transparent, #fff8e6, transparent); }

/* the King Ibis's honk, over his head */
.honk-word { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); will-change: transform; white-space: nowrap; pointer-events: none; }
.honk-word b {
  display: block; font-family: 'Cinzel', 'Times New Roman', serif; font-size: 46px; font-weight: 700; letter-spacing: 3px;
  color: #ffe066; text-shadow: 0 0 18px rgba(255, 210, 63, .85), 0 3px 0 #7a5200, 0 6px 10px rgba(0, 0, 0, .6);
  animation: honk-pop 1.1s ease-out forwards;
}
.honk-word.small b { font-size: 24px; letter-spacing: 2px; }
@keyframes honk-pop {
  0% { transform: scale(.35) rotate(-8deg); opacity: 0; }
  12% { transform: scale(1.25) rotate(4deg); opacity: 1; }
  30% { transform: scale(1) rotate(-2deg); opacity: 1; }
  100% { transform: translateY(-34px) scale(1.08); opacity: 0; }
}

/* ---------------------------------------------------------------- your health, and going down */
#health {
  position: absolute; left: 18px; top: 16px; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px;
  background: rgba(33, 44, 25, .55); border-radius: 12px;
}
#health .heart { width: 22px; height: 22px; fill: #ff5a5a; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
#health.low .heart { animation: heart-beat .95s ease-in-out infinite; }
@keyframes heart-beat { 0%, 36%, 100% { transform: scale(1); } 12% { transform: scale(1.24); } 24% { transform: scale(1.1); } }
.hp-bar {
  position: relative; width: 190px; height: 12px; border-radius: 6px; overflow: hidden;
  background: rgba(0, 0, 0, .45); box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
.hp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 6px; }
#hp-lag { background: #f4f1e4; transition: width .8s ease .4s; }
#hp-fill { background: #7bd34f; transition: width .12s linear, background-color .3s; }
#health.mid #hp-fill { background: #ffc53d; }
#health.low #hp-fill { background: #ff5a3d; }

/* lightning: the whole world lit up for a moment, under everything else on the screen (see Storm) */
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: #eef3ff; }

/* red round the edges when you're hurt */
#hurt {
  position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0;
  background: radial-gradient(ellipse closest-side at center, rgba(200, 0, 0, 0) 62%, rgba(190, 12, 12, .42) 86%, rgba(140, 0, 0, .8) 100%);
}

/* WASTED (the colour drains out of the game itself: see Wasted.look) */
#wasted-shade {
  position: fixed; inset: 0; pointer-events: none; z-index: 7; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .55) 100%);
}
#wasted { position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 8; pointer-events: none; opacity: 0; }
#wasted .band {
  display: flex; justify-content: center; padding: 12px 0 6px;
  background: linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.72) 20%, rgba(0,0,0,.72) 80%, rgba(0,0,0,.15));
}
#wasted-word {
  display: block; font-family: 'Passion One', Impact, 'Arial Black', sans-serif; font-weight: 700;
  font-size: clamp(64px, 12vw, 150px); line-height: .9; letter-spacing: 3px; color: #d0261f;
  -webkit-text-stroke: 3px #1c0200; paint-order: stroke fill; text-shadow: 0 4px 0 #3b0503, 0 0 26px rgba(0, 0, 0, .75);
}
#blackout { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 9; }
/* (everything else gets out of the way) */
body.wasted #hud, body.wasted #labels, body.wasted #boss, body.wasted #toast, body.wasted #banner,
body.wasted #zone-title, body.wasted #help, body.wasted #hurt { opacity: 0 !important; transition: opacity .5s; }

/* the opening's scene (see Opening): the HUD out of the way, black bars in, and the white it all goes, flying north */
body.cine #hud, body.cine #labels, body.cine #boss, body.cine #toast, body.cine #banner, body.cine #help, body.cine #hurt { opacity: 0 !important; transition: opacity .6s; }
#letterbox { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#letterbox div { position: absolute; left: 0; right: 0; height: 11vh; background: #000; transition: transform .9s ease-in-out; }
#letterbox div:first-child { top: 0; transform: translateY(-100%); }
#letterbox div:last-child { bottom: 0; transform: translateY(100%); }
body.cine #letterbox div { transform: none; }
#whiteout { position: fixed; inset: 0; background: #fffdf6; opacity: 0; pointer-events: none; z-index: 9; }

/* paused (Esc): the lot stands still under a dimmer, and the controls come up alongside */
#paused {
  position: fixed; inset: 0; z-index: 11; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-right: 426px; background: rgba(12, 18, 10, .55); pointer-events: none; text-shadow: 0 2px 6px rgba(0,0,0,.7);
}
#paused .word {
  font-family: 'Cinzel', 'Times New Roman', serif; font-size: clamp(40px, 6vw, 72px); font-weight: 700; letter-spacing: 8px;
  color: #fff8e6; text-transform: uppercase;
}
#paused p { margin: 8px 0 0; font-size: 18px; opacity: .9; }
/* (how you're going: what used to sit up in the corner the whole time) */
#paused .tally { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin-top: 34px; }
#paused .tally div { display: flex; flex-direction: column; align-items: center; min-width: 80px; }
#paused .tally b { font-size: 34px; line-height: 1.1; color: #ffe066; }
#paused .tally span { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .8; }
/* (where the bird calls came from: a little button under the tally, and what it opens) */
#credits-btn {
  margin-top: 30px; padding: 5px 16px; font-family: inherit; font-size: 12px; font-weight: bold; letter-spacing: 1.5px;
  text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 20px; cursor: pointer; pointer-events: auto;
}
#credits-btn:hover { background: rgba(255, 255, 255, .24); }
#credits-btn.on { color: #3a2a10; background: #ffd21f; border-color: #ffd21f; }
#credits {
  max-width: 560px; margin-top: 14px; padding: 14px 20px; pointer-events: auto; user-select: text; text-shadow: none;
  background: rgba(25, 34, 20, .88); border-radius: 14px; font-size: 14px; line-height: 1.45;
}
#credits h4 { margin: 0 0 6px; color: #ffe066; font-size: 15px; }
#credits td { padding: 3px 14px 3px 0; vertical-align: top; }
#credits td:first-child { white-space: nowrap; font-weight: bold; }
#credits a { color: #ffe066; white-space: nowrap; }
body.paused #help { z-index: 12; opacity: 1 !important; }

/* ---------------------------------------------------------------- down the tunnels, and the map (see Travel) */
#travel { position: fixed; inset: 0; z-index: 9; background: #000; pointer-events: none; }
#travel-map { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
#travel-map canvas, #travel-map .tunnel { position: absolute; inset: 0; width: 100%; height: 100%; }
/* (the way there, from where you are: dots running down the tunnel) */
#travel-map .tunnel { overflow: visible; pointer-events: none; }
#travel-map .tunnel path {
  fill: none; stroke: #ffd21f; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 0.1 11;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .75)); animation: tunnel .45s linear infinite;
}
@keyframes tunnel { to { stroke-dashoffset: -11.1; } }
#travel-map .place {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font-family: 'Cinzel', 'Times New Roman', serif; font-size: clamp(15px, 1.5vw, 21px); font-weight: 700; letter-spacing: 1.5px;
  color: #fff8e6; text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 2px 6px rgba(0, 0, 0, .8);
}
/* (a pin in each of your mounds, its point on the mound) */
#travel-map .pin {
  position: absolute; width: 34px; height: 34px; margin: -43px 0 0 -17px; display: flex; align-items: center; justify-content: center;
  border: 3px solid #ffd21f; border-radius: 50%; background: rgba(60, 38, 20, .92); box-shadow: 0 3px 7px rgba(0, 0, 0, .55);
  pointer-events: auto; cursor: pointer; transform-origin: 50% 43px; transition: transform .12s, border-color .12s, box-shadow .12s;
}
#travel-map .pin::after {
  content: ''; position: absolute; left: 50%; top: 100%; margin: 3px 0 0 -6px;
  border: 6px solid transparent; border-top: 9px solid #ffd21f; border-bottom: 0;
}
#travel-map .pin i { font-style: normal; font-size: 16px; line-height: 1; }
#travel-map .pin.beach { border-color: #7fd6ff; }
#travel-map .pin.beach::after { border-top-color: #7fd6ff; }
#travel-map .pin.padded { border-color: #5ccf6e; background: rgba(24, 66, 34, .94); }
#travel-map .pin.padded::after { border-top-color: #5ccf6e; }
#travel-map .pin.sel {
  z-index: 2; transform: scale(1.25); border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 210, 31, .45), 0 0 18px 4px rgba(255, 210, 31, .55), 0 3px 7px rgba(0, 0, 0, .55);
}
#travel-map .pin.sel::after { border-top-color: #fff; }
/* (where you are: a ring going out round it, over and over) */
#travel-map .pin.here::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85);
  animation: here 1.5s ease-out infinite; pointer-events: none;
}
@keyframes here { from { transform: scale(.65); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
#travel-map .pin.go { animation: pin-go .3s ease-out; }
@keyframes pin-go { 40% { transform: scale(1.55); } }
#travel-map .pin .cap {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px; padding: 2px 10px;
  white-space: nowrap; font-size: 13px; font-weight: bold; background: rgba(30, 30, 30, .8); border-radius: 10px; pointer-events: none;
}
#travel-map .pin .cap:empty { display: none; }
#travel-map .head, #travel-map .foot {
  position: absolute; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; pointer-events: none;
  background: rgba(30, 30, 30, .7); border-radius: 30px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
#travel-map .head { top: 18px; padding: 6px 36px 9px; }
#travel-map .head .word {
  font-family: 'Cinzel', 'Times New Roman', serif; font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; letter-spacing: 4px; color: #fff8e6;
}
#travel-crew { font-size: 15px; opacity: .85; }
#travel-map .foot { bottom: 18px; display: flex; gap: 24px; align-items: center; padding: 9px 26px; font-size: 16px; font-weight: bold; }
/* the end, for now: in through Luna Park's mouth, it goes black, and up come the words */
#ending {
  position: fixed; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: #000; opacity: 0; pointer-events: none;
}
#ending .words {
  font-family: 'Cinzel', 'Times New Roman', serif; font-size: clamp(34px, 6vw, 76px); font-weight: 700; letter-spacing: 6px;
  color: #fff8e6; opacity: 0;
}
#ending .hint { font-size: 16px; letter-spacing: 1px; color: rgba(255, 248, 230, .7); opacity: 0; }