*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,Segoe UI,Arial,sans-serif;background:#172335;color:#172335}
button{font:inherit;cursor:pointer}
#birdWorld{position:fixed;inset:0;overflow:hidden;background:#172335}
.scene{position:absolute;inset:0;overflow:hidden;transform:scale(.90);transform-origin:center center;width:111.111%;height:111.111%;left:-5.555%;top:-5.555%}
.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}

.directory{position:absolute;z-index:30;left:12px;top:12px;bottom:12px;width:188px;padding:10px;overflow-y:auto;scrollbar-width:none;border:1px solid rgba(255,255,255,.2);border-radius:17px;background:rgba(12,28,38,.46);backdrop-filter:blur(7px);box-shadow:0 14px 35px rgba(0,0,0,.22);color:#fff}
.directory::-webkit-scrollbar{display:none}
.place{font-size:15px;font-weight:950;line-height:1.1;margin:2px 2px 9px}
.label{margin:10px 3px 4px;font-size:9px;font-weight:950;letter-spacing:.14em;color:rgba(255,255,255,.75)}
.directory button{display:block;width:100%;margin:3px 0;padding:7px 8px;border:0;border-radius:10px;background:rgba(255,255,255,.09);color:#fff;text-align:left;font-size:11px;font-weight:850}
.directory button:hover,.directory button.active{background:rgba(67,133,94,.82)}
.back{display:block;width:100%;margin:0 0 8px!important;background:rgba(255,255,255,.16)!important;text-align:center!important}

.panel{position:absolute;z-index:28;right:2.2%;bottom:3%;width:32%;max-width:570px;max-height:40%;overflow:auto;scrollbar-width:none;padding:12px 14px;border:1px solid rgba(255,255,255,.35);border-radius:20px;background:rgba(255,252,242,.43);backdrop-filter:blur(3px);box-shadow:0 12px 30px rgba(20,30,40,.16)}
.panel::-webkit-scrollbar{display:none}
.kicker{font-size:10px;font-weight:950;letter-spacing:.13em;color:#315f45}
.panel h2{margin:3px 0;font-size:clamp(18px,1.5vw,27px)}
.panel p{font-size:12px;margin:5px 0 7px}
.line{padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.68);font-size:16px;font-weight:900}
.translation{font-size:12px;margin:5px 0 7px}
.actions{display:flex;gap:6px;margin-top:7px}
.actions button,.challengeNext{border:0;border-radius:10px;padding:8px 10px;background:rgba(48,105,72,.92);color:#fff;font-size:11px;font-weight:900}
.find{display:none;margin-top:8px;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.64);font-size:11px}
.find.show{display:block}
.count{font-size:9px;font-weight:950;letter-spacing:.12em;color:#315f45;margin-bottom:5px}
.status{min-height:20px;margin:5px 0;font-weight:900}
.hint{font-size:10px;color:#596174;margin:4px 0 7px}

.hotspots{position:absolute;inset:0;z-index:22;pointer-events:none}
.hotspot{position:absolute;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;opacity:.025;pointer-events:auto}
.hotspot:hover,.hotspot:focus-visible{opacity:.52;outline:4px solid rgba(255,255,255,.95);outline-offset:-4px;background:rgba(70,145,90,.32)}

/* Hotspots positioned to the Bird Sanctuary artwork */
[data-word="ryder"]{left:25%;top:49%;width:15%;height:34%}
[data-word="grandpa"]{left:46%;top:40%;width:18%;height:43%}
[data-word="daniel"]{left:75%;top:51%;width:18%;height:34%}
[data-word="hammer"]{left:46%;top:50%;width:9%;height:18%}
[data-word="paintbrush"]{left:27%;top:57%;width:8%;height:16%}
[data-word="paint"]{left:25%;top:77%;width:14%;height:11%}
[data-word="birdhouse"]{left:55%;top:62%;width:17%;height:27%}
[data-word="birdhouse2"]{left:77%;top:70%;width:14%;height:23%}
[data-word="birdfeeder"]{left:79%;top:12%;width:10%;height:22%}
[data-word="cardinal"]{left:4%;top:7%;width:9%;height:14%}
[data-word="woodpecker"]{left:95%;top:10%;width:8%;height:18%}
[data-word="bluebird"]{left:91%;top:51%;width:11%;height:15%}
[data-word="butterfly"]{left:66%;top:36%;width:8%;height:12%}
[data-word="rv"]{left:47%;top:20%;width:31%;height:25%}
[data-word="solarpanel"]{left:44%;top:9%;width:15%;height:9%}
[data-word="lake"]{left:82%;top:31%;width:27%;height:20%}
[data-word="waterfall"]{left:82%;top:59%;width:13%;height:19%}
[data-word="mountain"]{left:72%;top:17%;width:22%;height:17%}
[data-word="flowers"]{left:14%;top:27%;width:24%;height:18%}
[data-word="tools"]{left:7%;top:53%;width:13%;height:30%}
[data-word="tree"]{left:94%;top:24%;width:14%;height:47%}

@media(max-width:850px){
 .directory{width:165px}
 .panel{right:2%;width:39%}
}