*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,sans-serif;background:#071526;color:#fff}
.world{position:relative;width:100vw;height:100vh;background:url("../images/talkabee-dinosaur-museum-adventure.jpg") center center/cover no-repeat}
.panel{position:absolute;z-index:20;left:16px;top:16px;width:195px;max-height:calc(100vh - 32px);overflow:auto;padding:14px;border-radius:20px;background:rgba(7,23,39,.31);border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 28px rgba(0,0,0,.22);backdrop-filter:blur(3px)}
.panel h1{font-size:22px;margin:0 0 10px}.label{margin:11px 0 5px;font-size:12px;font-weight:900;letter-spacing:.12em;color:#e9f7ff}
.panel select,.panel button,.panel a{width:100%;display:block;margin:5px 0;padding:9px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.38);background:rgba(7,32,50,.54);color:#fff;font-weight:800;text-decoration:none;text-align:left}
.panel button:hover,.panel a:hover{background:rgba(255,255,255,.18)}
.card{position:absolute;z-index:19;right:2.2%;bottom:2.4%;width:min(470px,31vw);padding:16px 18px;border-radius:20px;background:rgba(7,23,39,.28);border:1px solid rgba(255,255,255,.32);box-shadow:0 10px 28px rgba(0,0,0,.22);backdrop-filter:blur(3px)}
.card h2{margin:0 0 5px;font-size:24px}.card p{margin:5px 0}.word{margin-top:10px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.88);color:#10283c}.word strong{font-size:27px}.translation{font-size:17px;margin-top:3px}
.controls{display:flex;gap:8px;margin-top:10px}.controls button{flex:1;padding:9px;border:0;border-radius:11px;font-weight:900}
.hotspot{position:absolute;z-index:8;border:0;background:transparent;opacity:0;cursor:pointer;border-radius:16px}
.hotspot:hover,.hotspot:focus-visible{opacity:.22;background:rgba(255,220,72,.55);outline:2px solid rgba(255,255,255,.8)}
.challenge-mode .hotspot.target{opacity:1;background:rgba(255,199,48,.38);outline:4px solid #fff;box-shadow:0 0 0 7px rgba(255,200,50,.2)}
.talkabee-forward-arrow{position:fixed;z-index:10020;right:22px;top:18px;width:62px;height:62px;border:2px solid rgba(255,255,255,.82);border-radius:50%;background:rgba(11,22,42,.20);box-shadow:0 5px 16px rgba(0,0,0,.14);backdrop-filter:blur(2px);display:grid;place-items:center;text-decoration:none}
.talkabee-forward-arrow::before{content:"";width:17px;height:17px;border-top:5px solid #fff;border-right:5px solid #fff;transform:rotate(45deg) translate(-2px,2px);filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.scene-view .panel,.scene-view .card{display:none}.scene-return{display:none;position:fixed;z-index:10030;left:18px;top:18px;padding:10px 14px;border-radius:12px;border:1px solid #fff;background:rgba(7,23,39,.65);color:#fff;font-weight:900}.scene-view .scene-return{display:block}
@media(max-width:900px){.panel{width:190px}.card{width:38vw}}