:root{--ink:#173b44;--deep:#153c42;--teal:#087f82;--gold:#f7b64f;--cream:#fff7e8;--muted:#769093;--sand:#efcc82;--wood:#6b3d27}
*{box-sizing:border-box}
html{background:#edf7f3;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:ui-rounded,"Trebuchet MS",Verdana,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,.scan-area:focus-visible,a:focus-visible{outline:3px solid #efad42;outline-offset:3px}
.app{width:min(100%,1680px);padding:12px clamp(10px,2.5vw,34px) 7px;margin:auto;display:flex;flex-direction:column;gap:10px;min-height:100svh}
.topbar{height:65px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex:none}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--deep);min-width:0}
.brand-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:16px;background:#174b4c;color:#ffce71;font-size:32px;line-height:1;box-shadow:inset 0 -3px 0 #0b3536,0 4px 12px #184f4a24}
.brand-text{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.brand-text strong{font-family:Georgia,serif;font-weight:900;letter-spacing:-1.3px;font-size:27px;line-height:1}
.brand-dot{color:#e4a246}
.brand-text small{font-size:9px;letter-spacing:1.9px;font-weight:800;color:#64858a}
.top-actions{display:flex;align-items:center;gap:10px}
.top-quote{color:#54757a;font-weight:700;font-size:12px;margin-right:12px}
.icon-button,.new-button{height:43px;border-radius:14px;border:1px solid #c8ddd9;background:#fffdf6;color:#1c5054;box-shadow:0 3px 0 #cde2d945}
.icon-button{width:45px;font-size:19px;display:grid;place-items:center}
.new-button{padding:0 17px;background:#16524f;border-color:#134942;color:#fffbe7;font-size:12px;letter-spacing:.15px;font-weight:800}
.new-button:hover{background:#217068}
.new-button-ico{font-size:20px;vertical-align:-2px;margin-right:4px}
.scene{position:relative;height:clamp(540px,calc(100svh - 136px),850px);min-height:0;isolation:isolate;overflow:hidden;border-radius:27px;border:5px solid #fff8eb;background:#76c6df;box-shadow:0 14px 44px #1d56553d,0 0 0 1px #bfd4ca;user-select:none;-webkit-user-select:none}
.beach-bg{position:absolute;inset:0;background-image:url('assets/playa.svg');background-position:center center;background-size:cover;background-repeat:no-repeat;z-index:-2}
.sun-sheen{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 42%,rgba(255,226,148,.04) 63%,rgba(76,50,16,.08) 100%);z-index:-1;pointer-events:none}
.intro{position:absolute;top:clamp(27px,5.2%,48px);left:clamp(23px,4.3%,68px);max-width:min(550px,58%);pointer-events:none;z-index:8;text-shadow:0 1px 1px #e6f9f6}
.eyebrow{color:#156f77;font-size:11px;font-weight:900;letter-spacing:2.3px;display:flex;align-items:center;gap:8px}
.eyebrow-dot{width:9px;height:9px;background:#f0ae43;border-radius:50%;box-shadow:0 0 0 4px #ffefd1}
.intro h1{margin:17px 0 12px;color:#123d47;font-family:Georgia,"Palatino Linotype",serif;font-weight:900;line-height:.99;font-size:clamp(37px,4.6vw,66px);letter-spacing:-2.3px;text-shadow:0 3px 0 #ffffff63}
.intro h1 em{color:#116e70;font-style:italic}
.intro p{font-size:clamp(13px,1.14vw,17px);font-weight:700;line-height:1.6;margin:0;color:#26595c}
.intro-note{display:inline-flex;align-items:center;gap:10px;border:1px solid #ffffff82;background:#fffbeca8;color:#2d746f;padding:8px 13px;border-radius:40px;margin-top:21px;font-weight:800;font-size:12px;backdrop-filter:blur(3px);box-shadow:0 5px 20px #f9e5b92b}
.intro-note span{color:#e3a34b;font-size:18px}
.collection{position:absolute;right:clamp(18px,3.1%,47px);top:clamp(23px,4%,43px);width:clamp(240px,23.5%,315px);background:linear-gradient(135deg,#fffaea,#f4dfb4 70%,#f0ce97);border-radius:17px;padding:18px 18px 15px;border:1px solid #efd09a;z-index:13;box-shadow:0 8px 2px #b67c4d52,0 19px 35px #4b6b5263,inset 0 0 0 3px #fff8e2,0 0 0 1px #fff6df}
.collection:before,.collection:after{content:'✦';position:absolute;top:5px;color:#d19d54;font-size:13px}.collection:before{left:7px}.collection:after{right:7px}
.collection-head{display:flex;align-items:center;gap:11px}
.collection-flag{display:grid;place-items:center;background:#e6c78e;border:2px solid #e4b96e;border-radius:11px;height:44px;width:44px;font-size:23px;box-shadow:inset 0 2px 0 #fff6cc}
.collection-overline{font-size:9px;letter-spacing:1.6px;font-weight:900;color:#b78440}
.collection h2{font-family:Georgia,serif;font-size:18px;margin:2px 0 0;line-height:1.15;letter-spacing:-.4px;color:#593d27}
.total-counter{text-align:center;color:#6f422a;display:flex;justify-content:center;align-items:baseline;gap:7px;margin:13px 0 7px}
.total-counter strong{font-family:Georgia,serif;font-size:48px;line-height:1;font-variant-numeric:tabular-nums;font-weight:800}
.total-counter .separator{font-size:28px;opacity:.5}.total-counter #totalNum{font-family:Georgia,serif;font-size:29px;opacity:.8;font-weight:800}
.sparkle{color:#d69b43;font-size:22px;margin-left:auto;position:absolute;right:21px;top:95px}
.collection-rule{height:1px;background:#dfbc80;box-shadow:0 1px 0 #fff6da;margin-bottom:11px}
.loot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.loot-cell{display:flex;flex-direction:column;align-items:center;padding:7px 2px 5px;border:1px solid #e5c894;border-radius:12px;background:#fff6dd7e;min-width:0;transition:background .2s}
.loot-cell.active{background:#fff9df}
.loot-cell .icon{font-size:25px;line-height:1.2;filter:grayscale(1);opacity:.35;transition:filter .3s,opacity .3s}
.loot-cell.active .icon{filter:none;opacity:1}
.loot-cell .num{font-size:12px;font-weight:900;color:#705136;margin-top:4px}
.loot-cell .name{font-size:9px;font-weight:800;color:#9a764d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.collection-tail{text-align:center;color:#8c704e;font-size:10px;line-height:1.4;font-weight:700;margin:12px 0 0}
.scan-area{position:absolute;left:0;right:0;top:48%;bottom:103px;z-index:4;cursor:crosshair;touch-action:none;outline:none}
.sand-grains{position:absolute;inset:0;background-image:radial-gradient(#bc8750 1px,transparent 1px),radial-gradient(#f9efcb 1.5px,transparent 1.5px);background-size:37px 33px,51px 47px;background-position:12px 9px,7px 19px;opacity:.29;pointer-events:none}
.detector{position:absolute;left:0;top:0;width:340px;height:380px;z-index:10;overflow:visible;pointer-events:none;filter:drop-shadow(10px 13px 9px #78553255);will-change:transform,left,top;transition:filter .1s}
.detector.active{filter:drop-shadow(0 0 18px #ffd66cbb) drop-shadow(9px 10px 7px #78553244)}
.detector-glow{position:absolute;width:160px;height:160px;border-radius:50%;pointer-events:none;z-index:8;transform:translate(-50%,-50%);opacity:0;transition:opacity .18s;mix-blend-mode:screen}
.detector-glow:before{content:'';position:absolute;inset:17px;border-radius:50%;background:radial-gradient(ellipse,#fffdb78a 0%,#ffd34e81 26%,#e6b24300 71%)}
.detector-glow i{position:absolute;inset:20px;border:3px solid #ffe795a9;border-radius:50%;animation:sonarPulse 1.7s ease-out infinite;box-shadow:0 0 12px #fae298}
.detector-glow i:nth-child(2){animation-delay:.55s}.detector-glow i:nth-child(3){animation-delay:1.1s}
@keyframes sonarPulse{0%{transform:scale(.36);opacity:.95}100%{transform:scale(1.38);opacity:0}}
.found-effects{position:absolute;inset:0;z-index:9;pointer-events:none}
.loot-pop{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;animation:lootAppear .5s cubic-bezier(.18,1.5,.25,1) both;text-align:center;transform-origin:center bottom;white-space:nowrap}
.loot-pop .loot-img{font-size:50px;filter:drop-shadow(0 7px 4px #835a2980);animation:lootFloat 2.5s ease-in-out infinite}
.loot-pop .loot-caption{display:block;border:1px solid #fff2b7;background:#fff9e7;color:#5c4628;border-radius:100px;font-size:11px;font-weight:900;padding:6px 11px;box-shadow:0 5px 10px #6b512d34}
.loot-pop:before{content:'✦ ✧ ✦';color:#fff3a0;text-shadow:0 0 10px #d39b18;font-size:23px;position:absolute;top:-20px;left:-19px;animation:glimmer 1.5s infinite alternate}
@keyframes lootAppear{0%{opacity:0;transform:translate(-50%,-7px) scale(.15)}80%{opacity:1}100%{transform:translate(-50%,-45px) scale(1)}}
@keyframes lootFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-8px) rotate(6deg)}}
@keyframes glimmer{0%{opacity:.5;transform:rotate(-15deg)}100%{opacity:1;transform:rotate(13deg)}}
.hint-pulse{position:absolute;width:68px;height:68px;transform:translate(-50%,-50%);border-radius:50%;border:4px dashed #ffe27a;background:#fff3a631;box-shadow:0 0 0 8px #fff5bc25,0 0 26px #ffce7b;z-index:7;pointer-events:none;display:none;animation:hintBounce .7s alternate infinite}
@keyframes hintBounce{to{transform:translate(-50%,-50%) scale(1.3);opacity:.53}}
.helper{position:absolute;left:50%;bottom:calc(100px + 13px);transform:translateX(-50%);z-index:12;display:flex;gap:12px;align-items:center;background:#fff8e8eb;border:2px solid #fff;border-radius:60px;padding:9px 18px 9px 12px;box-shadow:0 7px 20px #865b343c;max-width:80%;pointer-events:none;backdrop-filter:blur(5px)}
.helper-hand{font-size:30px;line-height:1;transform:rotate(-15deg)}
.helper div{display:flex;flex-direction:column;gap:2px;white-space:nowrap}.helper strong{font-size:14px;color:#715031}.helper div span{font-size:11px;color:#9e7949;font-weight:700}
.dashboard{position:absolute;inset:auto 0 0;z-index:15;height:101px;background:linear-gradient(180deg,#986039 0%,#70412a 23%,#5b3325 93%,#48271e);border-top:5px solid #c18b57;display:grid;grid-template-columns:minmax(175px,1fr) minmax(170px,1.18fr) auto;align-items:center;gap:14px;padding:13px clamp(15px,3%,45px);box-shadow:0 -8px 26px #754b2c1c;color:#fff1d8}
.dashboard:before{position:absolute;content:'';top:1px;left:0;right:0;height:2px;background:#e4b98377}
.signal-group{display:flex;flex-direction:column;gap:12px;min-width:0}
.signal-title{color:#e7c296;font-size:10px;font-weight:900;letter-spacing:1.4px;white-space:nowrap}
.green-light{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8fdc9e;margin-right:5px;box-shadow:0 0 8px #91efac}
.signal-meter{display:flex;gap:4px;align-items:end;height:25px}
.signal-meter span{background:#b78e69;border-radius:3px;width:13px;height:40%;box-shadow:inset 0 -2px 0 #603e31;transition:background .08s,height .1s,box-shadow .1s}
.signal-meter span:nth-child(2n){height:58%}.signal-meter span:nth-child(3n){height:85%}
.signal-meter span.on{background:#98ebc3;box-shadow:0 0 8px #9ff6c15c,inset 0 -2px 0 #5f9f79}
.signal-meter span.on.hot{background:#ffe086;box-shadow:0 0 10px #ffb23c}
.dashboard-status{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;border-left:1px solid #c99d724d;border-right:1px solid #c99d724d;padding:0 12px;min-height:40px}
.dashboard-status strong{font-family:Georgia,serif;font-size:clamp(15px,1.5vw,21px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.dashboard-status small{font-size:11px;color:#dfbd94;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.dashboard-actions{display:flex;gap:12px;align-items:center}
.hint-button{background:linear-gradient(#fff2d0,#ffdf9d);border:1px solid #ffeecc;color:#734b2c;border-radius:13px;padding:14px 18px;font-size:12px;font-weight:900;box-shadow:0 4px 0 #ab7549,0 5px 9px #31201840;white-space:nowrap}
.hint-button:hover{filter:brightness(1.06)}.hint-button:active{transform:translateY(2px);box-shadow:0 2px 0 #ab7549}
.points-pill{background:#4b2b23bd;border:1px solid #8b624a;border-radius:13px;height:51px;padding:7px 13px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.points-pill>span{color:#facc60;font-size:18px}.points-pill strong{font-family:Georgia,serif;font-size:22px;font-variant-numeric:tabular-nums}.points-pill small{align-self:end;font-size:9px;margin-bottom:4px;color:#d9b58b;font-weight:900}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 8px;color:#6a8a8b;font-size:11px;font-weight:800;min-height:28px}.footer-star{color:#d99d42;margin-left:4px}
.complete-overlay{position:absolute;inset:0;background:#123e42b9;z-index:40;display:grid;place-items:center;padding:16px;backdrop-filter:blur(7px)}
.complete-overlay[hidden]{display:none}
.complete-card{width:min(450px,100%);background:#fff5da;border:5px solid #eec988;border-radius:25px;box-shadow:0 18px 60px #082a2b80;padding:30px;text-align:center;color:#533a29}.complete-icon{font-size:70px;display:block;margin-bottom:10px}.complete-card .eyebrow{justify-content:center;color:#b98339}.complete-card h2{font-family:Georgia,serif;line-height:1.1;font-size:33px;margin:15px 0}.complete-card p{line-height:1.6;color:#806a4c}.final-points{font-size:15px;color:#a87b42;margin:18px 0}.final-points span{color:#154c50;font-family:Georgia,serif;font-size:32px;font-weight:900}.complete-card button{background:#177570;color:white;border:0;border-radius:14px;padding:16px 26px;font-weight:900}
@media (max-width:960px){.top-quote{display:none}.intro h1{font-size:clamp(31px,4.8vw,54px)}.collection{width:235px;padding:14px}.collection h2{font-size:15px}.collection-flag{width:37px;height:37px;font-size:18px}.collection .total-counter strong{font-size:40px}.collection-tail{display:none}.loot-cell{padding:5px 0}.loot-cell .icon{font-size:21px}.dashboard{grid-template-columns:155px minmax(130px,1fr) auto}.hint-button{padding:13px}.points-pill{padding:5px 10px}}
@media (max-width:650px){
 .app{padding:6px 6px 3px;gap:6px}
 .topbar{height:53px;padding:0 7px;gap:3px}
 .brand{gap:7px}.brand-icon{width:34px;height:34px;border-radius:12px;font-size:24px}.brand-text strong{font-size:20px;letter-spacing:-1px}.brand-text small{font-size:6.6px;letter-spacing:1px}
 .top-actions{gap:5px}.icon-button,.new-button{height:36px;border-radius:11px}.icon-button{width:37px;font-size:16px}.new-button{min-width:37px;padding:0 9px}.new-button span:last-child{display:none}.new-button-ico{margin:0}
 .scene{border-radius:19px;border-width:3px;height:calc(100svh - 99px);min-height:462px}
 .beach-bg{background-position:center;background-size:auto 100%}
 .intro{top:18px;left:15px;max-width:53%}
 .eyebrow{font-size:7.5px;letter-spacing:.8px;gap:5px}.eyebrow-dot{width:6px;height:6px;box-shadow:0 0 0 2px #ffefd1}
 .intro h1{font-size:clamp(24px,6.7vw,34px);margin:12px 0 10px;letter-spacing:-1.3px;line-height:1.03}
 .intro p{font-size:10px;line-height:1.45;max-width:172px}.desktop-break{display:none}.intro-note{display:none}
 .collection{top:15px;right:9px;width:43%;max-width:180px;padding:11px 10px 10px;border-radius:13px;box-shadow:0 5px 0 #ac81494d,0 8px 25px #4b6b5263,inset 0 0 0 2px #fff8e2}
 .collection:before,.collection:after{font-size:8px}
 .collection-head{gap:5px}.collection-flag{width:28px;height:28px;border-radius:8px;font-size:14px;flex:none}
 .collection-overline{font-size:6.5px;letter-spacing:.5px}.collection h2{font-size:11px;margin-top:2px;letter-spacing:0}
 .total-counter{margin:6px 0 4px;gap:5px}.total-counter strong{font-size:30px!important}.total-counter .separator{font-size:20px}.total-counter #totalNum{font-size:21px}.sparkle{font-size:13px;right:12px;top:65px}
 .collection-rule{margin-bottom:7px}.loot-grid{gap:4px}.loot-cell{padding:4px 0 3px;border-radius:7px;gap:0}.loot-cell .icon{font-size:17px;line-height:1.1}.loot-cell .num{font-size:9px;margin-top:2px}.loot-cell .name{font-size:7px}
 .scan-area{top:41%;bottom:99px}
 .detector{filter:drop-shadow(6px 8px 6px #7855324a)}
 .helper{bottom:calc(94px + 12px);padding:7px 11px;gap:6px;max-width:90%;border-radius:40px}.helper-hand{font-size:21px}.helper strong{font-size:11px}.helper div span{font-size:9px}
 .dashboard{height:95px;border-top-width:4px;grid-template-columns: minmax(115px,1fr) minmax(100px,1fr);gap:9px;padding:10px 10px}
 .signal-group{gap:8px}.signal-title{font-size:8px;letter-spacing:.4px}.signal-meter{gap:3px;height:20px}.signal-meter span{width:9px}
 .dashboard-status{display:none}
 .dashboard-actions{justify-self:end;gap:7px}.hint-button{padding:10px 9px;font-size:10px;border-radius:10px}.hint-button span{display:none}
 .points-pill{height:39px;border-radius:10px;padding:4px 8px;gap:3px}.points-pill>span{font-size:13px}.points-pill strong{font-size:17px}.points-pill small{font-size:6px;margin-bottom:2px}
 .site-footer{min-height:20px;justify-content:center;font-size:9px}.site-footer>span:last-child{display:none}
 .loot-pop .loot-img{font-size:37px}.loot-pop .loot-caption{font-size:9px;padding:5px 9px}
 .complete-card{padding:22px}.complete-card h2{font-size:27px}
}
@media(max-width:370px){.intro{max-width:53%;left:10px}.intro h1{font-size:23px}.intro p{font-size:9px}.collection{max-width:155px}.collection h2{font-size:10px}.brand-text small{display:none}.loot-cell .name{font-size:6.5px}.dashboard{padding:8px 7px}}
@media (max-height:630px) and (min-width:651px){.app{padding-top:5px;gap:5px}.topbar{height:50px}.scene{height:calc(100svh - 101px);min-height:380px}.intro{top:15px}.intro h1{font-size:36px;margin:7px 0}.intro-note{margin-top:7px}.collection{top:12px;width:250px;padding:11px}.collection .total-counter strong{font-size:31px}.collection .loot-cell .icon{font-size:18px}.collection-tail{display:none}.scan-area{top:45%}.helper{bottom:102px}.dashboard{height:85px}.scan-area{bottom:87px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}