/* Adventurer's progressive voyage. Scoped entirely to MAP; Classic and live
   puzzle (including Kraken) use their existing, untouched styles. */
html[data-screen="map-screen"] body{
  background:radial-gradient(ellipse at 50% 13%,#0c677f,#052940 46%,#031623 100%);
}
html[data-screen="map-screen"] .adventure-shell{
  width:min(100%,490px);
  padding:10px 10px max(58px,calc(40px + env(safe-area-inset-bottom)));
  overflow:visible;
}
html[data-screen="map-screen"] .adventure-header{
  margin:0 3px 4px;gap:9px;min-height:44px;
}
html[data-screen="map-screen"] .adventure-header .eyebrow{font-size:8px}
html[data-screen="map-screen"] .adventure-header h1{font-size:17px}
html[data-screen="map-screen"] .adventure-header .back,
html[data-screen="map-screen"] .adventure-header .icon-button{
  width:37px;height:37px;flex-basis:37px;border-radius:13px;font-size:23px;
}
html[data-screen="map-screen"] .world-tabs{
  padding:3px 3px 5px;
  max-width:100%;
}
html[data-screen="map-screen"] .world-tab{
  flex:0 0 auto;min-width:107px;font-size:10px;padding:6px 9px;
  background:#073d55d6;border-radius:13px;
}
html[data-screen="map-screen"] .adventure-sound-controls{
  position:relative;z-index:7;margin:0 3px;
}
html[data-screen="map-screen"] .adventure-sound-controls>button{
  font-size:9px;padding:4px 8px;
}
.voyage-map{
  display:flex;flex-direction:column;
  min-height:0;
  position:relative;
}
.voyage-head{text-align:center;padding:5px 4px 6px}
.voyage-head .voyage-kicker{
  color:#ffecb9;font-weight:900;font-size:10px;letter-spacing:3px;
  text-shadow:0 1px 8px #ffdeac90;
}
.voyage-head h2{
  color:#fff0cc;font-weight:950;font-size:clamp(24px,7.9vw,36px);
  line-height:1.05;letter-spacing:-.9px;margin:5px 0 7px;
  text-shadow:0 3px 10px #0b284e,0 1px 15px #ffdda753;
}
.voyage-chapter{
  font-size:clamp(11px,3vw,13px);font-weight:700;letter-spacing:1.5px;
  color:#bdf6f0;
}
.voyage-description{color:#99cbd4;font-size:10px;margin:5px 0 0}
.voyage-score{
  display:grid;grid-template-columns:1fr auto;gap:2px 10px;
  padding:9px 14px 10px;margin:4px 5px 7px;
  border:1.5px solid #d7f5caac;border-radius:19px;
  color:#f9f5d9;background:linear-gradient(120deg,#175d6fd9,#063750e9 65%,#0b4766b3);
  box-shadow:0 2px 12px #0ce5ed22,inset 0 1px #f5ffd752;
}
.voyage-score strong{font-size:17px;line-height:1.2}
.voyage-score small{display:block;color:#aee0df;font-size:10px;margin-top:2px}
.voyage-stars{text-align:right}
.voyage-stars strong{font-size:16px}
.voyage-progress-track{
  grid-column:1/-1;height:8px;margin-top:4px;border-radius:10px;
  background:#001d33b9;border:1px solid #95d3dd55;overflow:hidden;
}
.voyage-progress-track i{
  display:block;width:0;height:100%;border-radius:10px;
  background:linear-gradient(90deg,#ffdf7d,#ffd058,#fce7af);
  box-shadow:0 0 10px #ffdc83b6;transition:width .28s ease;
}
.voyage-legacy-scene{display:none!important}
.voyage-window{
  position:relative;
  height:clamp(455px,56svh,665px);
  overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#84eade72 transparent;
  border-radius:25px;
  margin:0 3px 8px;
  background:#043448;
  border:1px solid #76deec6a;
  box-shadow:inset 0 0 22px #0b94c047,0 15px 28px #00101d7f;
  -webkit-overflow-scrolling:touch;
}
.voyage-window::-webkit-scrollbar{width:3px}
.voyage-window::-webkit-scrollbar-thumb{background:#74d9df85;border-radius:8px}
.voyage-track{
  position:relative;isolation:isolate;
  min-height:540px;
  background-image:
    linear-gradient(180deg,#04102ee5 0%,#0616389b 20%,#04304760 48%,#06648240 75%,#032f44af 100%),
    radial-gradient(ellipse at 45% 63%,#74feef30,transparent 52%),
    var(--voyage-art,url('art/scene-lagoon.svg'));
  background-position:center,center,center;
  background-size:cover,cover,100% 100%;
  overflow:hidden;
}
.voyage-track::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(108deg,#a1ffeb00 0 65px,#b5fff20e 82px 99px,#a1ffeb00 125px 218px);
  mix-blend-mode:screen;
}
.voyage-track::after{
  content:"";position:absolute;left:0;right:0;top:0;height:18%;
  pointer-events:none;z-index:2;
  background:linear-gradient(180deg,#020e26e8,transparent);
}
.voyage-route{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;overflow:visible;
  filter:drop-shadow(0 0 4px #f8dd97a0);
}
.voyage-route path{
  fill:none;stroke:#ffe1a5db;stroke-width:1.2;
  stroke-dasharray:1.3 3.1;
  stroke-linecap:round;
}
.voyage-node{
  position:absolute;z-index:3;
  width:clamp(63px,20vw,81px);height:clamp(63px,20vw,81px);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:0;
  border-radius:50%;
  transform:translateX(-50%);
  text-align:center;
  color:#ffefc9;
  background:radial-gradient(circle at 38% 25%,#31e8e6,#075c77 65%,#05394f);
  border:2px solid #a3fff0;
  box-shadow:inset 0 2px 9px #d8fff19c,0 0 14px #72f1fc6b,0 8px 13px #02172b8c;
  font-weight:900;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.voyage-node-number{font-size:clamp(25px,7.5vw,33px);line-height:1.1;text-shadow:0 2px 3px #09253f}
.voyage-node-stars{
  font-size:13px;letter-spacing:-2px;white-space:nowrap;color:#ffdc68;
  text-shadow:0 0 5px #ffa827;
}
.voyage-node.current{
  background:radial-gradient(circle at 30% 20%,#ffe8a1,#b88828 45%,#084d60 80%);
  border-color:#fff0b3;
  box-shadow:0 0 21px #ffd77ba9,0 0 3px 2px #fff2b1,inset 0 1px 11px #fff4cf8a;
  animation:voyage-current-glow 2.3s ease-in-out infinite alternate;
}
.voyage-node.completed{
  border-color:#a7ffdd;background:radial-gradient(circle at 32% 24%,#1df3e8,#0a7a8a 61%,#053e55);
}
.voyage-node.locked{
  opacity:.70;
  background:radial-gradient(circle at 30% 18%,#3c668b,#0e3458 58%,#0a203b);
  border-color:#8abbd0b1;color:#d9edf6;
  box-shadow:inset 0 1px 5px #d4ffff66,0 3px 12px #001a36a1;
  cursor:default;
}
.voyage-node.locked .voyage-node-stars{letter-spacing:0;color:#c6d8e3;font-size:19px}
.voyage-node:disabled{cursor:default}
.voyage-node:focus-visible{outline:3px solid #fff1ae;outline-offset:4px}
.voyage-node--boss{
  width:103px;height:103px;
  border-color:#df9bee;
  background:radial-gradient(ellipse at 40% 30%,#723785c4,#14112bdb 68%);
  box-shadow:0 0 22px #df5aff83,inset 0 2px 12px #d1afffa1;
  overflow:visible;color:#fff4dd;
}
.voyage-node--boss .voyage-node-number{
  position:relative;display:block;width:88px;height:49px;
  font-size:24px;line-height:22px;padding-top:4px;
  border-radius:50% 50% 0 0;
  background:linear-gradient(#130b30aa,#120b1c11),var(--boss-image,url('art/kraken-approved-face-v1.svg')) center/cover;
  text-shadow:0 2px 5px #000;
}
.voyage-node--boss .voyage-node-stars{font-size:10px;letter-spacing:0}
.voyage-boss-name{
  position:absolute;top:98%;left:50%;transform:translateX(-50%);
  white-space:nowrap;padding:3px 10px;border-radius:13px;
  font-size:12px;letter-spacing:.3px;background:#281144dc;
  color:#ffdef8;border:1px solid #a567deab;
}
.voyage-boss-teaser{
  position:absolute;z-index:3;left:50%;transform:translateX(-50%);
  width:max-content;max-width:85%;padding:7px 12px;border-radius:18px;
  border:1px solid #b56bef87;color:#ffdcfc;
  font-size:12px;font-weight:800;text-shadow:0 1px 3px #05091d;
  background:#200f43bd;box-shadow:0 0 13px #d14ef442;
}
.voyage-fog{
  position:absolute;top:0;left:0;right:0;height:195px;
  z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 10%,#090c23e8,#0e1832cc 47%,transparent 100%);
}
.voyage-track:has(.voyage-node--boss) .voyage-fog{height:90px;opacity:.65}
.voyage-farm{
  display:grid;grid-template-columns:49px minmax(0,1fr) 73px;
  gap:8px;align-items:center;
  margin:0 3px 7px;padding:10px 8px;
  border:1.5px solid #a6f5e1a3;border-radius:19px;
  background:linear-gradient(125deg,#0b5a6adf,#04374fef);
  box-shadow:inset 0 1px #d4ffee7e,0 0 15px #4ef1e626;
}
.voyage-farm-icon{font-size:33px;text-align:center;filter:drop-shadow(0 0 7px #ffcd85)}
.voyage-farm-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.voyage-farm-copy strong{font-size:12px;color:#ffecb9}
.voyage-farm-copy span{font-size:10px;color:#ebfff9;line-height:1.25}
.voyage-farm-copy small{font-size:9px;color:#a6dedb}
.voyage-farm-counter{
  padding:6px 7px;border-radius:13px;text-align:center;
  background:#116078ac;border:1px solid #92faf49f;
}
.voyage-farm-counter b{display:block;font-size:15px}
.voyage-farm-counter i{
  display:block;height:7px;margin-top:5px;border-radius:9px;
  background:#01283c;overflow:hidden;
}
.voyage-farm-counter em{
  display:block;height:100%;width:0;border-radius:9px;
  background:linear-gradient(90deg,#fff1b9,#ffd17e);
}
.voyage-wallet{
  font-size:11px;max-width:100%;width:auto;
  margin:3px auto 1px;padding:7px 12px;
  border-radius:14px;
}
.voyage-note{
  max-width:100%;margin:2px 9px 8px;
  font-size:10px;line-height:1.4;
}
.voyage-actions{display:grid;grid-template-columns:1fr 1.65fr;gap:7px;margin:0 3px}
.voyage-actions>a,.voyage-actions>button{
  display:flex;align-items:center;justify-content:center;min-height:47px;
  border-radius:18px;text-decoration:none;
  font-size:clamp(12px,3.7vw,15px);font-weight:900;
  -webkit-tap-highlight-color:transparent;
}
.voyage-back{
  background:linear-gradient(145deg,#0c6172,#063d52);border:1px solid #69e7e1;
  color:#e9fffa;
}
.voyage-play{
  background:linear-gradient(140deg,#b4ffdf,#53e6d0);
  border:2px solid #d5fff0;
  color:#07404c;box-shadow:0 3px 13px #4dfcd342;
}
.voyage-play:disabled{opacity:.48;filter:grayscale(.45)}
.voyage-map #map-music-start{align-self:center;margin:9px 0 2px}
.voyage-map .voyage-classic-link{display:none}
@keyframes voyage-current-glow{
  from{box-shadow:0 0 11px #ffd77b86,0 0 3px 1px #fff2b1,inset 0 1px 11px #fff4cf8a}
  to{box-shadow:0 0 25px #ffd77be0,0 0 6px 2px #fff2b1,inset 0 1px 13px #fff4cfb3}
}
@media(max-height:690px){
  .voyage-window{height:clamp(385px,54svh,510px)}
  .voyage-head h2{font-size:25px}
  .voyage-head{padding:3px}
  .voyage-score{margin:3px 5px 5px}
}
@media(max-width:350px){
  .voyage-farm{grid-template-columns:36px minmax(0,1fr) 61px;gap:5px;padding:7px 5px}
  .voyage-farm-icon{font-size:27px}
  .voyage-farm-copy span{font-size:9px}
  .voyage-farm-copy small{font-size:8px}
  .voyage-farm-counter b{font-size:13px}
  .voyage-node{width:62px;height:62px}
  .voyage-node--boss{width:89px;height:89px}
}
@media(prefers-reduced-motion:reduce){
  .voyage-node.current{animation:none!important}
  .voyage-progress-track i{transition:none}
}