#mysteryBoxBtn{display:inline-flex;align-items:center;gap:7px;border-color:#42ead5;background:linear-gradient(135deg,#0a826f,#14564f);box-shadow:0 0 22px #25d9bd35;white-space:nowrap}
#mysteryBoxBtn:hover{border-color:#82ffec}
#mysteryBoxBtn svg{width:18px;height:18px;flex:none}
#mysteryBoxPanel{position:fixed;z-index:90;inset:0;background:transparent;display:none;color:#f4f8fa;pointer-events:none}
#mysteryBoxPanel.open{display:block}
#mysteryBoxMap{position:absolute;inset:0;pointer-events:none}
.mystery-box-head{position:absolute;z-index:2;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid #23695f;border-radius:16px;background:#071412d9;box-shadow:0 8px 32px #0009;backdrop-filter:blur(12px);pointer-events:auto}
.mystery-box-title{display:flex;align-items:center;gap:12px;min-width:0}
.mystery-box-chest{width:40px;height:40px;flex:none;color:#51f0d7}
.mystery-box-title h2{margin:0;font-size:clamp(16px,2.4vw,24px);letter-spacing:.04em}
.mystery-box-title p{margin:3px 0 0;color:#a5c7c1;font-size:12px}
#mysteryBoxStatus{position:absolute;z-index:2;top:88px;left:50%;transform:translateX(-50%);max-width:min(92vw,520px);padding:9px 14px;border:1px solid #28776a;border-radius:999px;background:#061310d9;color:#d2fff5;font-size:13px;text-align:center;pointer-events:auto}
#mysteryBoxStatus[hidden]{display:none}
.mystery-box-list{position:absolute;z-index:2;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:min(390px,calc(100vw - 28px));max-height:min(48vh,430px);overflow:auto;padding:12px;border:1px solid #23695f;border-radius:18px;background:#071412d9;box-shadow:0 12px 40px #0009;backdrop-filter:blur(12px);pointer-events:auto}
.mystery-box-list h3{margin:2px 4px 10px;color:#73f7e3;font-size:12px;letter-spacing:.15em}
.mystery-cache-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 8px;border:0;border-top:1px solid #1c3e3a;background:transparent;color:#f5fbfa;text-align:left;cursor:pointer}
.mystery-cache-row:hover,.mystery-cache-row:focus-visible{background:#17453d;outline:none}
.mystery-cache-number{display:grid;place-items:center;width:28px;height:28px;flex:none;border:1px solid #59e9d2;border-radius:50%;color:#71f7e1;font-weight:900}
.mystery-cache-info{flex:1;min-width:0}
.mystery-cache-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.mystery-cache-meta{display:-webkit-box;margin-top:3px;color:#9dbab5;font-size:11px;line-height:1.35;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.mystery-cache-distance{flex:none;color:#6bf3dd;font-weight:900;font-size:13px}
.mystery-cache-pin{display:grid;place-items:center;width:42px;height:48px;border:0;background:transparent;filter:drop-shadow(0 3px 4px #0009);cursor:pointer}
.mystery-cache-pin svg{width:38px;height:44px}
.mystery-box-map-popup{display:grid;gap:5px;min-width:150px;color:#10201e}.mystery-box-map-popup strong{font-size:15px;line-height:1.3}.mystery-box-map-popup span{color:#52645f;font-size:12px}.mystery-box-map-popup .mystery-box-map-description{max-width:250px;max-height:6em;overflow:auto;line-height:1.4}.mystery-box-map-popup .mystery-box-map-state{font-size:11px}.mystery-box-map-popup button{margin-top:5px}
.mystery-cache-pin.is-selected{transform:scale(1.4);filter:drop-shadow(0 0 9px #72ffdf) drop-shadow(0 3px 4px #0009)}
.mystery-user-marker{width:18px;height:18px;border:3px solid white;border-radius:50%;background:#357dff;box-shadow:0 0 0 8px #357dff45,0 0 14px #357dff}
.mystery-walk-arrow{position:absolute;z-index:4;left:0;top:0;width:22px;height:22px;pointer-events:none;filter:drop-shadow(0 1px 2px #08111f)}
.mystery-walk-arrow svg{display:block;width:100%;height:100%;color:#39ff78}
.mystery-box-selection{margin-bottom:10px;padding:12px;border:1px solid #55d9c4;border-radius:14px;background:#0d2925e8}
.mystery-box-selection[hidden]{display:none}
.mystery-box-selection strong{display:block;overflow-wrap:anywhere;color:#e8fffb;font-size:15px}
#mysteryBoxSelectedMeta,#mysteryBoxSelectedDistance{margin-top:6px;color:#a8ccc6;font-size:12px;line-height:1.45}#mysteryBoxSelectedMeta{max-height:4.4em;overflow:hidden}
#mysteryBoxListing{display:inline-block;margin-top:8px;color:#78f5df;font-size:12px}
#mysteryBoxListing[hidden]{display:none}
#mysteryBoxStart{width:100%;margin-top:10px}
.mystery-box-follow{width:100%;margin-top:8px}
.mystery-arrival-backdrop{position:fixed;inset:0;z-index:100001;display:grid;place-items:center;padding:20px;background:#02070cbb;backdrop-filter:blur(5px);pointer-events:auto}
.mystery-arrival-backdrop[hidden]{display:none}
.mystery-arrival-card{position:relative;overflow:hidden;width:min(440px,100%);padding:28px 24px 22px;border:1px solid #75ffd9;border-radius:24px;background:radial-gradient(circle at 50% -15%,#287c68 0,transparent 52%),#071512;color:#f4fffb;text-align:center;box-shadow:0 20px 90px #000b,0 0 38px #52f4d350;animation:mystery-arrival-pop .42s cubic-bezier(.2,1.4,.4,1) both}
.mystery-arrival-card:before,.mystery-arrival-card:after{position:absolute;top:-30px;left:14%;width:8px;height:80px;content:"";background:linear-gradient(transparent,#ffe27a,transparent);transform:rotate(35deg);animation:mystery-arrival-spark 1.4s ease-out both}
.mystery-arrival-card:after{left:82%;height:66px;transform:rotate(-38deg);animation-delay:.12s}
.mystery-arrival-icon{font-size:56px;filter:drop-shadow(0 0 16px #ffd568);animation:mystery-arrival-bounce .8s ease-in-out infinite alternate}
.mystery-arrival-card h2{margin:6px 0;font-size:26px;color:#a9ffe9}
.mystery-arrival-distance{margin:5px 0 20px;color:#bddbd3}
.mystery-arrival-hint-label{color:#f7d273;font-size:12px;font-weight:900;letter-spacing:.18em}
.mystery-arrival-hint{margin:8px 0 20px;padding:14px;border:1px solid #4e8372;border-radius:14px;background:#10251f;color:#fff;font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.mystery-arrival-card button{width:100%}
@keyframes mystery-arrival-pop{from{opacity:0;transform:scale(.72) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes mystery-arrival-bounce{from{transform:translateY(2px) rotate(-4deg)}to{transform:translateY(-5px) rotate(4deg)}}
@keyframes mystery-arrival-spark{0%{opacity:0;translate:0 -16px}30%{opacity:1}100%{opacity:0;translate:0 64px}}
@media(prefers-reduced-motion:reduce){.mystery-arrival-card,.mystery-arrival-icon,.mystery-arrival-card:before,.mystery-arrival-card:after{animation:none}}
body.mystery-box-walking .mystery-box-head,body.mystery-box-walking #mysteryBoxStatus,body.mystery-box-walking #mysteryBoxListHeading,body.mystery-box-walking #mysteryBoxRows,body.mystery-box-walking #mysteryBoxSelectedName,body.mystery-box-walking #mysteryBoxSelectedMeta{display:none!important}
body.mystery-box-walking .mystery-box-list{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:auto;max-height:none;padding:10px;background:#071412ed}
body.mystery-box-walking .mystery-box-selection{margin:0;padding:0;border:0;background:transparent;box-shadow:none}
body.mystery-box-walking #mysteryBoxSelectedDistance{text-align:center;font-size:18px;font-weight:900;color:#9dffe9}
body.mystery-box-walking #mysteryBoxFollow{margin-top:8px}
body.mystery-box-walking #mysteryBoxStart{margin-top:8px}
body.mystery-box-walking #mysteryBoxHintButton{margin-top:8px;width:100%}
body.mystery-box-active .hero,body.mystery-box-active .paint-swatch,body.mystery-box-active .globe-opacity,body.mystery-box-active .home-map-tools,body.mystery-box-active .topbar{visibility:hidden}
@media(max-width:800px){#mysteryBoxBtn{padding:8px 10px;font-size:11px;gap:4px}.mystery-box-head{padding:9px 11px}.mystery-box-chest{width:34px;height:34px}.mystery-box-title p{font-size:10px}#mysteryBoxStatus{top:76px;font-size:12px}.mystery-box-list{max-height:42vh}}