:root{color-scheme:dark;--bg:#0e2230;--panel:#13364a;--panel2:#1f4a62;--text:#f4fcff;--muted:#bad2d8;--accent:#86e0cf;--accent2:#fff3bf;--danger:#ff9aa0;--line:rgba(255,255,255,.16);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{overscroll-behavior:none}.hidden{display:none!important}button,input{font:inherit}button{min-height:44px;cursor:pointer}.app-shell{min-height:100dvh}.auth-view{min-height:100dvh;display:grid;place-items:center;padding:24px}.auth-card{width:min(430px,100%);background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:24px}.experiment-badge{width:76px;height:76px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#0b2b22;font-weight:900;font-size:24px;border:5px solid rgba(255,255,255,.75)}h1,h2,p{margin-top:0}.auth-card h1{text-align:center;margin-bottom:8px}.muted{color:var(--muted)}.auth-card>.muted{text-align:center}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0}.tab,.secondary{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:12px;padding:10px 14px}.tab.active{background:var(--panel2);border-color:var(--accent)}form{display:grid;gap:14px}label{display:grid;gap:6px;font-size:14px;color:var(--muted)}input{width:100%;min-height:46px;border:1px solid var(--line);background:#0c1715;color:var(--text);border-radius:12px;padding:10px 12px;font-size:16px}.primary{border:0;background:var(--accent);color:#08251d;font-weight:800;border-radius:13px;padding:11px 16px}.wide{width:100%}.message{min-height:24px;padding-top:8px;text-align:center;font-size:14px}.message.error{color:var(--danger)}.game-view{position:relative;min-height:100dvh;overflow:hidden;background:#183b50}.topbar{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 10px) 14px 18px;min-height:calc(env(safe-area-inset-top) + 92px);background:linear-gradient(to bottom,rgba(12,43,60,.98) 0%,rgba(12,43,60,.93) 70%,rgba(12,43,60,.18) 100%);pointer-events:none}.topbar>*{pointer-events:auto}.brand{font-size:18px;font-weight:900;text-shadow:0 2px 10px #000}.version{font-size:11px;color:var(--muted)}.player-summary{font-size:12px;color:#d7e8e2;text-shadow:0 2px 8px #000}.map{position:absolute;inset:0;min-height:100dvh}.maplibregl-ctrl-bottom-left{bottom:78px}.maplibregl-ctrl-bottom-right{bottom:78px}.round{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(20,72,92,.92);color:var(--text);font-size:26px;display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.24)}.text-round{font-size:22px}.gps-status{position:absolute;z-index:15;top:calc(env(safe-area-inset-top) + 66px);left:50%;transform:translateX(-50%);background:rgba(15,42,58,.88);border:1px solid var(--line);border-radius:999px;padding:7px 11px;font-size:12px;white-space:nowrap;max-width:80%;overflow:hidden;text-overflow:ellipsis}.map-actions{position:absolute;z-index:20;right:12px;bottom:calc(env(safe-area-inset-bottom) + 86px);display:flex;flex-direction:column;align-items:flex-end;gap:10px}.dev-button{min-height:42px;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 13px;background:rgba(20,72,92,.94);color:var(--text);font-weight:700}.bottom-hud{position:absolute;z-index:15;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 10px);display:grid;grid-template-columns:repeat(3,1fr);background:rgba(15,47,66,.9);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(12px);overflow:hidden}.bottom-hud>div{padding:8px 10px;text-align:center}.bottom-hud>div+div{border-left:1px solid var(--line)}.bottom-hud strong{display:block;font-size:17px}.bottom-hud span{font-size:11px;color:var(--muted)}.player-marker{width:28px;height:28px;border-radius:50%;background:#fff;border:7px solid #2f9de0;box-shadow:0 0 0 7px rgba(47,157,224,.22),0 3px 10px rgba(0,0,0,.35)}.spawn-marker{width:48px;height:48px;border-radius:50%;border:4px solid rgba(255,255,255,.82);background:#86e0cf;color:#0d2921;font-weight:900;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .15s}.spawn-marker.rare{background:#ffc2e2}.spawn-marker.uncommon{background:#9ad9ff}.spawn-marker:active{transform:scale(.92)}.spawn-distance{position:absolute;top:43px;left:50%;transform:translateX(-50%);background:rgba(15,42,58,.92);color:#fff;border-radius:8px;padding:2px 5px;font-size:10px;white-space:nowrap}.sheet{position:absolute;z-index:40;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 10px);background:var(--panel);border:1px solid var(--line);border-radius:24px 24px 18px 18px;padding:22px;text-align:center;box-shadow:0 -14px 50px rgba(0,0,0,.42)}.sheet-close{position:absolute;right:12px;top:10px;width:42px;height:42px;border:0;background:transparent;color:var(--muted);font-size:28px}.encounter-number{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:12px;font-weight:800}.creature-placeholder{width:148px;height:148px;margin:16px auto;border-radius:45% 55% 48% 52%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#a8e6d2,#3b826f);color:#0a2b22;font-size:36px;font-weight:1000;border:8px solid rgba(255,255,255,.15)}.collection-panel{position:absolute;z-index:50;inset:0;background:rgba(13,38,52,.985);padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 20px);overflow-y:auto}.collection-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}.collection-head h2{margin-bottom:2px}.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}.collection-card{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:14px;min-width:0}.collection-card .num{font-size:12px;color:var(--muted)}.collection-card strong{display:block;margin:3px 0 8px}.collection-card .meta{font-size:12px;color:var(--muted)}.toast{position:absolute;z-index:70;left:50%;bottom:calc(env(safe-area-inset-bottom) + 92px);transform:translateX(-50%);max-width:min(90%,480px);background:#123446;color:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;text-align:center;font-size:13px;box-shadow:0 8px 30px rgba(0,0,0,.35)}@media(min-width:700px){.collection-grid{grid-template-columns:1fr}.collection-panel{left:auto;width:430px;border-left:1px solid var(--line)}.sheet{left:50%;right:auto;width:430px;transform:translateX(-50%)}}
.admin-link{display:flex;align-items:center;justify-content:center;text-decoration:none;margin-top:10px}


.spawn-visual{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;overflow:hidden}.spawn-visual img{width:100%;height:100%;object-fit:contain;background:rgba(255,255,255,.78)}
.creature-stage{position:relative;width:min(100%,330px);height:290px;margin:10px auto 4px;display:grid;place-items:center;overflow:hidden;border-radius:28px;background:radial-gradient(circle at 50% 42%,rgba(133,230,225,.3),rgba(19,54,74,.05) 55%,transparent 72%)}
.creature-stage .creature-placeholder{margin:0}.model-host{width:100%;height:100%}.model-host canvas{display:block;width:100%!important;height:100%!important}.model-status{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(12,43,60,.88);border:1px solid var(--line);border-radius:999px;padding:5px 9px;font-size:11px;color:var(--muted);white-space:nowrap}
.collection-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;padding:10px}.collection-thumb{width:76px;height:76px;border-radius:18px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#8be2d2,#8ccff2);color:#113549;font-size:22px;font-weight:1000;border:1px solid rgba(255,255,255,.22)}.collection-thumb img{width:100%;height:100%;object-fit:contain;background:rgba(255,255,255,.78)}.collection-copy{min-width:0}.collection-copy strong{font-size:18px}
@media(max-width:420px){.collection-grid{grid-template-columns:1fr}.collection-card{grid-template-columns:72px minmax(0,1fr)}.collection-thumb{width:72px;height:72px}}

.map-model-overlay{position:absolute;inset:0;z-index:4;pointer-events:none;width:100%!important;height:100%!important}
.roamer-hit{position:relative;width:86px;height:96px;border:0;background:transparent;padding:0;overflow:visible;filter:drop-shadow(0 5px 5px rgba(18,54,70,.25))}
.roamer-hit:focus-visible{outline:3px solid rgba(255,255,255,.95);outline-offset:2px;border-radius:18px}
.roamer-distance{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);background:rgba(255,251,235,.94);color:#35505a;border:2px solid rgba(255,255,255,.96);border-radius:999px;padding:2px 6px;font-size:10px;font-weight:900;white-space:nowrap;box-shadow:0 2px 8px rgba(19,54,74,.18)}

.encounter-interactive{cursor:pointer;touch-action:manipulation;outline:none}.encounter-interactive:focus-visible{box-shadow:0 0 0 3px var(--accent)}
.collection-grid{grid-template-columns:1fr}.collection-card{width:100%}