/* Exploration layer: Wonder Star counter, compass, fact cards, album and celebrations. */
.quest-layer{position:absolute;inset:0;pointer-events:none;z-index:4;font-family:inherit}
.quest-hud{position:absolute;top:172px;right:26px;display:flex;flex-direction:column;align-items:flex-end;gap:9px;pointer-events:none}
.ocean-playing .quest-hud{top:316px}
.quest-pill,.quest-compass,.quest-boost{pointer-events:auto;border:3px solid #fff;border-radius:22px;box-shadow:0 5px 0 #2d4a3f33,0 10px 24px #1d3a3022;font-family:inherit}
.quest-pill{display:flex;align-items:center;gap:11px;padding:8px 14px;background:linear-gradient(180deg,#fff9e4,#ffe9b0);color:#5a3d12;cursor:pointer;transition:transform .15s}
.quest-pill:hover{transform:translateY(-2px) scale(1.03)}
.quest-pill:focus-visible{outline:3px solid #ffb347;outline-offset:3px}
.quest-pill.complete{background:linear-gradient(180deg,#fff4c2,#ffd36b)}
.quest-count{display:flex;align-items:baseline;gap:3px;font-size:13px}
.quest-count i{font-style:normal;font-size:19px;align-self:center}
.quest-count b{font-size:21px;font-weight:900;line-height:1}
.quest-count small{font-size:12px;opacity:.7;font-weight:700}
.quest-album-label{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;background:#5a3d12;color:#fff4d2;padding:4px 8px;border-radius:10px}
.quest-count.bump{animation:questBump .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes questBump{0%{transform:scale(1)}35%{transform:scale(1.55) rotate(-6deg)}100%{transform:scale(1)}}
.quest-compass{display:flex;align-items:center;gap:9px;padding:6px 13px 6px 6px;background:#fffdf4ee;color:#335247;font-size:12px;font-weight:800}
.compass-dial{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#fff 40%,#e7f6ef 41%);border:2px solid #8fd2b6;display:grid;place-items:center;position:relative}
.compass-needle{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:19px solid #ff8a4c;transition:transform .25s ease-out;transform-origin:50% 60%;filter:drop-shadow(0 1px 0 #b0502488)}
.quest-compass.chest .compass-needle{border-bottom-color:#e7a51b}
.quest-compass.chest{background:#fff5cfee;animation:questGlow 1.4s ease-in-out infinite}
.quest-compass.done .compass-dial{opacity:.5}
@keyframes questGlow{50%{box-shadow:0 5px 0 #2d4a3f33,0 0 0 6px #ffd75e66}}
.quest-boost{padding:9px 16px;background:linear-gradient(180deg,#9df3ff,#3cc4e6);color:#063c4d;font-weight:900;font-size:14px;cursor:pointer;transition:transform .15s,filter .2s}
.quest-boost:hover{transform:scale(1.05)}
.quest-boost.charging{filter:grayscale(.7) brightness(.9);animation:questCharge 5s linear}
@keyframes questCharge{from{clip-path:inset(0 0 0 0 round 22px)}to{clip-path:inset(0 0 0 0 round 22px)}}

.fact-card{position:absolute;left:26px;bottom:212px;width:min(360px,calc(100% - 52px));pointer-events:auto;background:#fffdf6;color:#2f463e;border:4px solid #fff;border-radius:26px;padding:14px 16px 13px;box-shadow:0 7px 0 #2d4a3f2e,0 18px 40px #1d3a3033}
.fact-card.star{background:linear-gradient(170deg,#fffef6 60%,#fff2c6)}
.fact-card.creature{background:linear-gradient(170deg,#fffef8 60%,#e3f7ff)}
.fact-card.show{animation:factIn .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes factIn{from{opacity:0;transform:translateY(30px) scale(.85) rotate(-2deg)}to{opacity:1;transform:none}}
.fact-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fact-badge{font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#a06a0e}
.creature .fact-badge{color:#1f7a9c}
.fact-close{border:0;background:#f1ece0;color:#6b6252;width:28px;height:28px;border-radius:50%;font-size:17px;cursor:pointer}
.fact-body{display:flex;gap:12px;align-items:center}
.fact-art{flex:none;width:64px;height:64px;border-radius:18px;background:#fff6d8;display:grid;place-items:center;overflow:hidden;border:2px solid #ffe6a3}
.creature .fact-art{background:#dff3fb;border-color:#b5e1f2}
.fact-art img{width:100%;height:100%;object-fit:cover}
.fact-emoji{font-size:38px;animation:factSpin 1.2s ease-out}
@keyframes factSpin{from{transform:scale(0) rotate(-200deg)}to{transform:none}}
.fact-chip{display:inline-block;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;background:#e5f4ec;color:#2f7a5a;padding:3px 8px;border-radius:9px;margin-bottom:4px}
.fact-card h3{margin:0;font-size:18px;line-height:1.2;color:#25423a}
.fact-card p{margin:10px 0 9px;font-size:14px;line-height:1.55}
.fact-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fact-progress{flex:1;height:9px;border-radius:9px;background:#f0e6c8;overflow:hidden;display:block}
.fact-progress span{display:block;height:100%;background:linear-gradient(90deg,#ffcd4d,#ff9a3d);border-radius:9px;transition:width .6s}
.fact-hint{font-size:11px;color:#6f8c84;font-weight:700}
.fact-read{border:0;background:#e9f6f0;color:#245c47;font-weight:800;font-size:12px;padding:7px 11px;border-radius:12px;cursor:pointer;white-space:nowrap}
.fact-read:hover,.fact-close:hover{filter:brightness(.95)}

.quest-banner{position:absolute;left:50%;top:104px;transform:translateX(-50%);max-width:min(560px,calc(100% - 40px));background:linear-gradient(180deg,#5b3fd0,#4630a8);color:#fff;border:3px solid #fff;border-radius:22px;padding:12px 20px;font-size:14px;line-height:1.5;text-align:center;box-shadow:0 6px 0 #2a1c6e55,0 16px 34px #1f155244;pointer-events:none}
.quest-banner.show{animation:bannerIn .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes bannerIn{from{opacity:0;transform:translate(-50%,-24px) scale(.8)}to{opacity:1;transform:translate(-50%,0)}}
.ocean-playing .quest-banner{top:186px}
.quest-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Album */
dialog#modal.album-dialog{max-width:980px;width:calc(100vw - 32px);max-height:calc(100dvh - 32px)}
.album-rank{display:flex;align-items:center;gap:16px;background:linear-gradient(90deg,#fff7d6,#ffeec2);border-radius:18px;padding:12px 16px;margin:4px 0 14px}
.album-rank div{display:flex;flex-direction:column;min-width:190px}
.album-rank b{font-size:17px;color:#5a3d12}.album-rank small{font-size:12px;color:#866a3d}
.album-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.album-tabs button{border:2px solid #e3dccb;background:#fff;border-radius:14px;padding:8px 14px;font-weight:800;font-family:inherit;cursor:pointer;color:#55665f}
.album-tabs button[aria-selected=true]{background:#2f6f57;border-color:#2f6f57;color:#fff}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.album-card{background:#fffdf6;border:3px solid #fff;border-radius:20px;padding:12px;box-shadow:0 4px 0 #2d4a3f1f;position:relative}
.album-card h4{margin:4px 0;font-size:15px;color:#25423a}.album-card p{margin:4px 0;font-size:12.5px;line-height:1.5;color:#4b605a}
.album-card.found{background:linear-gradient(170deg,#fffef8 55%,#fff2cc)}
.album-card.locked{background:#f2f0ea;color:#8b8a84}.album-card.locked h4{color:#8b8a84}
.album-emoji{font-size:30px;display:block}
.album-card.locked .album-emoji{width:44px;height:44px;border-radius:50%;background:#e2ded3;display:grid;place-items:center;font-size:22px;font-weight:900;color:#a29e92}
.album-card.creature img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:#dfeef3}
.album-card.creature.locked img{filter:grayscale(1) blur(7px) opacity(.45)}
.album-worlds{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.album-worlds li{display:flex;gap:14px;align-items:center;background:#fffdf6;border-radius:14px;padding:10px 14px;font-weight:700;color:#3a5249}
.album-worlds li span{flex:1}.album-worlds li.complete{background:#fff3c4}

/* Hub */
.quest-badge{position:absolute;right:10px;bottom:10px;background:#fffdf3ee;color:#5a3d12;border:2px solid #fff;border-radius:14px;padding:4px 10px;font-size:12px;font-weight:900;box-shadow:0 3px 0 #0000001a}
.quest-badge.complete{background:#ffd96b}
.world-art{position:relative}
.hub-rank{display:flex;align-items:center;gap:14px;background:linear-gradient(90deg,#fff8dc,#ffeab5);border:3px solid #fff;border-radius:22px;padding:12px 18px;margin:0 0 16px;box-shadow:0 5px 0 #2d4a3f1c;color:#5a3d12}
.hub-rank-emoji{font-size:32px}
.hub-rank b{display:block;font-size:18px}.hub-rank small{font-size:12.5px;color:#7b6440}

@media(max-width:800px){
  .quest-hud{top:146px;right:13px;gap:6px}
  .ocean-playing .quest-hud{top:290px}
  .quest-pill{padding:5px 10px;gap:8px}.quest-album-label{display:none}
  .quest-count b{font-size:17px}.quest-count i{font-size:15px}
  .quest-compass{font-size:11px;padding:4px 10px 4px 4px}.compass-dial{width:28px;height:28px}
  /* On phones, cards sit at the top so they never cover the action controls below. */
  .fact-card{left:12px;right:12px;width:auto;top:88px;bottom:auto;padding:11px 13px;max-height:46vh;overflow:auto}
  .fact-card p{font-size:13px;margin:7px 0}
  .quest-banner,.ocean-playing .quest-banner{top:auto;bottom:250px;font-size:12.5px;padding:9px 14px}
  .ocean-playing .quest-banner{bottom:315px}
}
@media(prefers-reduced-motion:reduce){.fact-card.show,.quest-banner.show,.quest-count.bump,.fact-emoji,.quest-compass.chest{animation:none}}
.quiet .fact-card.show,.quiet .quest-banner.show,.quiet .quest-count.bump,.quiet .fact-emoji,.quiet .quest-compass.chest{animation:none}

/* Reward juice and the explorer picker */
.quest-fly{position:absolute;left:0;top:0;font-size:30px;pointer-events:none;z-index:6;filter:drop-shadow(0 3px 4px #0004);margin:-18px 0 0 -18px}
.quest-plus{position:absolute;font-weight:900;font-size:24px;color:#fff;-webkit-text-stroke:2px #e0802a;pointer-events:none;transform:translate(-50%,-50%);animation:questPlus 1.1s ease-out forwards}
@keyframes questPlus{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}20%{opacity:1;transform:translate(-50%,-80%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-220%) scale(1)}}
.hero-pick{margin-left:auto;display:flex;align-items:center;gap:10px;border:3px solid #fff;background:#fffdf3;border-radius:18px;padding:5px 14px 5px 5px;cursor:pointer;font-family:inherit;color:#5a3d12;box-shadow:0 4px 0 #0000001a;transition:transform .15s}
.hero-pick:hover{transform:translateY(-2px) scale(1.03)}
.hero-pick img{width:46px;height:46px;border-radius:14px;object-fit:cover;background:#cfe7ff}
.hero-pick span{display:flex;flex-direction:column;text-align:left}.hero-pick b{font-size:14px}.hero-pick small{font-size:11px;color:#8a6d3f}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.hero-option{border:4px solid #fff;background:#fffdf6;border-radius:22px;padding:10px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:6px;color:#2f463e;box-shadow:0 4px 0 #2d4a3f1f;transition:transform .15s}
.hero-option:hover{transform:translateY(-3px) rotate(-1deg)}
.hero-option.chosen{border-color:#ffc94d;background:#fff6d6}
.hero-option img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;background:#cfe7ff}
@media(max-width:800px){.hero-pick{margin-left:0}.hub-rank{flex-wrap:wrap}}

/* Ranger Journey (Living Forest) */
.ranger-why{background:#eaf4ff;border-radius:12px;padding:8px 10px;font-size:12.5px;color:#22406a;margin:6px 0}
.naturelab{background:radial-gradient(circle at 50% 30%,#1d4a3c,#081a14)}
.naturelab .lab-list{grid-template-columns:1fr}
.lab-list button{flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 12px;font-size:14px}
.lab-emoji{font-size:24px}
.lab-stage{background:#ffffff10;border-radius:20px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:14px;min-height:240px}
.lab-sequence{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}.lab-sequence i{color:#9fd0ff;font-style:normal;font-weight:900}
.lab-slot{min-width:92px;min-height:64px;border:2px dashed #ffffff55;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#cdd6ff;padding:4px;text-align:center}
.lab-slot.filled{border-style:solid;border-color:#8ff5b5;background:#8ff5b522;color:#fff}.lab-slot b{font-size:24px}
.lab-choices{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lab-choices button{border:2px solid #ffffff55;background:#ffffff1a;color:#fff;border-radius:16px;padding:8px 12px;font:800 13px inherit;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:96px}
.lab-choices button b{font-size:26px}.lab-choices button:disabled{opacity:.35}
.lab-choices button.shake{animation:labShake .4s}
@keyframes labShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.lab-rings{width:220px;height:220px}
.lab-leaf{display:flex;flex-direction:column;align-items:center;gap:4px}.lab-leaf svg{width:150px;height:150px;background:#fffdf3;border-radius:22px;padding:10px}.lab-leaf small{color:#cdd6ff;font-weight:800}
.journal-missions{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.journal-missions li{background:#fffdf6;border-radius:12px;padding:8px 12px;color:#33503f}.journal-missions li.done{background:#ecfaef}.journal-missions small{display:block;color:#5a7a6a;margin-top:3px}
.journal-print{width:70px;height:70px;background:#f3e6cf;border-radius:14px}
@keyframes bannerUp{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}
.stage:has(.fact-card:not([hidden])) .thumbstick.ghost,.stage:has(.galaxy-card:not([hidden])) .thumbstick.ghost{visibility:hidden}
/* Language switch on the world hub: words on screen and the reading voice are chosen separately */
.lang-switch{display:flex;flex-direction:column;gap:5px;padding:6px 8px;border:2px solid #fff;border-radius:18px;background:linear-gradient(180deg,#fff6e0,#ffe7b3);box-shadow:0 3px 0 #c9a25a55}
.lang-row{display:flex;align-items:center;gap:4px}
.lang-icon{width:26px;text-align:center;font-size:16px}
.lang-row button{border:0;border-radius:12px;padding:5px 10px;font:800 13px/1.1 inherit;font-family:inherit;color:#5a3d12;background:#ffffffb0;cursor:pointer;white-space:nowrap}
.lang-row button[aria-pressed=true]{background:#ff8a3d;color:#fff;box-shadow:0 2px 0 #c2621f}
.lang-field{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lang-field select{border:2px solid #e4dccb;border-radius:12px;padding:8px 10px;font:800 15px inherit;font-family:inherit;background:#fff}

/* 🌐 language button popup (every top bar) */
.lang-pop{position:fixed;z-index:1000;padding:10px;border-radius:20px;background:#fffdf6;border:3px solid #fff;box-shadow:0 10px 30px #0004;animation:factIn .3s ease-out}
.lang-pop p{margin:0 0 6px;font:900 12px/1 inherit;font-family:inherit;color:#7a5a2a;text-align:center}
.lang-pop .lang-switch{box-shadow:none}
.lang-btn{font-size:18px}