:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #15213a;
  background: #d8eef7;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; min-height: 100%; margin: 0; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
body { overflow: hidden; }

.app-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-width: 680px;
  margin: 0 auto;
  overflow: hidden;
  background: #bfe5e4;
  box-shadow: 0 0 60px rgba(27, 70, 98, 0.22);
}

.map-stage { position: absolute; inset: 0; }
.map-view-shell { position: relative; width: 100%; height: 100%; }
.map-view { width: 100%; height: 100%; background: #bfe0d1; }
.monster-map .leaflet-tile-pane {
  filter: saturate(1.18) brightness(1.05) hue-rotate(-5deg) contrast(.92);
}
.monster-map::after {
  content: "";
  position: absolute;
  z-index: 350;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, transparent 0 26%, rgba(83, 187, 255, .06) 52%, rgba(23, 89, 137, .10) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.05), transparent 38%, rgba(9,50,76,.08));
}
.leaflet-control-attribution {
  margin: 0 8px 88px 0 !important;
  padding: 3px 7px !important;
  border-radius: 8px 0 0 0;
  background: rgba(255,255,255,.72) !important;
  font-size: 8px !important;
}
.leaflet-pane { z-index: 400; }
.leaflet-map-pane { z-index: auto; }

/* Top game HUD */
.game-top-hud {
  position: absolute;
  z-index: 700;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.trainer-profile,
.game-currency,
.gps-pill,
.radar-filter,
.nearby-radar,
.game-bottom-nav,
.quick-menu,
.recenter-button {
  pointer-events: auto;
}

.trainer-profile {
  min-width: 188px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 13px 5px 5px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(19,56,86,.94), rgba(36,88,120,.92));
  color: #fff;
  box-shadow: 0 8px 22px rgba(20,65,96,.3);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.trainer-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(155deg, #48d6ff 0 46%, #ff6f67 47% 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -.04em;
  box-shadow: inset 0 0 0 3px rgba(12,45,72,.22);
}

.trainer-copy { min-width: 0; flex: 1; text-align: left; }
.trainer-copy b,
.trainer-copy small { display: block; }
.trainer-copy b { font-size: 10px; letter-spacing: .09em; }
.trainer-copy i {
  display: block;
  width: 100%;
  height: 5px;
  margin: 5px 0 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}
.trainer-copy em {
  display: block;
  height: 100%;
  min-width: 4px;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #58f4ff, #fff37a);
  box-shadow: 0 0 8px rgba(88,244,255,.8);
}
.trainer-copy small { color: rgba(255,255,255,.72); font-size: 9px; font-style: normal; }

.game-currency {
  min-width: 76px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 2px solid rgba(255,255,255,.96);
  border-radius: 999px;
  background: rgba(20,56,84,.92);
  color: #fff;
  box-shadow: 0 8px 22px rgba(20,65,96,.28);
  backdrop-filter: blur(12px);
}
.game-currency span { color: #ffe157; filter: drop-shadow(0 0 5px rgba(255,225,87,.7)); }
.game-currency b { font-size: 13px; }

.gps-pill {
  position: absolute;
  z-index: 690;
  top: calc(max(12px, env(safe-area-inset-top)) + 67px);
  left: 50%;
  transform: translateX(-50%);
  height: 29px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px 0 10px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 999px;
  background: rgba(22,57,82,.84);
  color: #fff;
  box-shadow: 0 5px 16px rgba(25,72,99,.22);
  backdrop-filter: blur(10px);
}
.gps-pill b { font-size: 9px; letter-spacing: .08em; }
.gps-pill button {
  height: 21px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #194568;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}
.gps-light { width: 7px; height: 7px; border-radius: 50%; background: #ffca4c; }
.gps-light.live { background: #55f497; box-shadow: 0 0 0 4px rgba(85,244,151,.15), 0 0 8px rgba(85,244,151,.8); }

.game-error {
  position: absolute;
  z-index: 690;
  top: calc(max(12px, env(safe-area-inset-top)) + 101px);
  left: 14px;
  right: 14px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 13px;
  background: rgba(255,245,213,.94);
  color: #79531d;
  box-shadow: 0 7px 18px rgba(92,62,16,.15);
  font-size: 11px;
  text-align: center;
}

/* Floating category radar */
.radar-filter {
  position: absolute;
  z-index: 680;
  top: calc(max(12px, env(safe-area-inset-top)) + 105px);
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.radar-filter button {
  width: 47px;
  min-height: 47px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 4px;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 16px;
  background: rgba(23,63,92,.78);
  color: #fff;
  box-shadow: 0 7px 17px rgba(26,71,98,.22);
  backdrop-filter: blur(9px);
  cursor: pointer;
  transition: .18s ease;
}
.radar-filter button span { font-size: 18px; line-height: 1; }
.radar-filter button small { max-width: 39px; overflow: hidden; color: rgba(255,255,255,.76); font-size: 8px; white-space: nowrap; }
.radar-filter button.active {
  transform: scale(1.08);
  border-color: #fff;
  background: linear-gradient(145deg, #11a8e8, #3168d7);
  box-shadow: 0 0 0 4px rgba(54,169,255,.18), 0 9px 21px rgba(32,102,165,.32);
}
.radar-filter button.active small { color: #fff; font-weight: 800; }

/* Monster map markers */
.monster-marker-wrapper,
.trainer-marker-wrapper { background: transparent !important; border: 0 !important; }

.monster-marker {
  position: relative;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 8px 7px rgba(19,69,95,.28));
}
.monster-aura {
  position: absolute;
  inset: 8px;
  border: 3px solid rgba(255,255,255,.94);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, rgba(255,255,255,.98), rgba(110,223,255,.92) 45%, rgba(34,117,214,.92) 100%);
  box-shadow:
    0 0 0 5px rgba(65,185,255,.22),
    inset 0 -8px 16px rgba(22,72,150,.23);
}
.monster-face {
  position: absolute;
  z-index: 2;
  inset: 12px;
  display: grid;
  place-items: center;
  font-size: 30px;
  transform-origin: 50% 80%;
  animation: monsterFloat 2.2s ease-in-out infinite;
}
.monster-marker small {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  min-width: 53px;
  padding: 3px 6px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #183f61;
  color: #fff;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .08em;
  white-space: nowrap;
}
.monster-marker.is-nearby .monster-aura {
  background: radial-gradient(circle at 42% 34%, #fff, #ffef75 46%, #ff9d4d 100%);
  box-shadow: 0 0 0 7px rgba(255,213,77,.23), 0 0 28px rgba(255,180,60,.65), inset 0 -8px 16px rgba(174,69,23,.17);
  animation: nearbyPulse 1.35s ease-in-out infinite;
}
.monster-marker.is-nearby small { background: #e66f2b; }
.monster-marker.is-completed .monster-aura {
  background: radial-gradient(circle at 42% 34%, #fff, #b9ffd2 46%, #35bd7c 100%);
  box-shadow: 0 0 0 5px rgba(68,206,136,.20), inset 0 -8px 16px rgba(19,113,70,.18);
}
.monster-marker.is-completed::after {
  content: "✓";
  position: absolute;
  z-index: 5;
  top: 2px;
  right: 3px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #20b76d;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}
.monster-marker.is-selected { transform: scale(1.13); }
.monster-marker.is-selected .monster-aura { box-shadow: 0 0 0 8px rgba(255,255,255,.42), 0 0 34px rgba(41,176,255,.78), inset 0 -8px 16px rgba(22,72,150,.23); }

@keyframes monsterFloat { 0%,100% { transform: translateY(1px) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes nearbyPulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(255,213,77,.08), 0 0 35px rgba(255,180,60,.8), inset 0 -8px 16px rgba(174,69,23,.17); } }

/* Player marker + 3D UU Bear overlay */
.trainer-map-marker {
  position: relative;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
}
.trainer-pulse {
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(55,173,255,.58);
  border-radius: 50%;
  background: rgba(57,182,255,.10);
  animation: trainerPulse 2.2s ease-out infinite;
}
.trainer-shadow {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 30px;
  height: 12px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(17,73,108,.22);
  filter: blur(2px);
}
.uu-bear-overlay {
  position: absolute;
  z-index: 650;
  width: 140px;
  height: 140px;
  display: block;
  pointer-events: none;
  transform: translate(-50%, -68%);
  filter: drop-shadow(0 10px 18px rgba(15,69,97,.28));
}
.uu-bear-overlay canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.uu-bear-overlay.is-fallback::before {
  content: "UU";
  position: absolute;
  inset: 22px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(155deg, #43d9ff 0 46%, #ff746c 47% 100%);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15,68,111,.28);
}
@keyframes trainerPulse { 0% { transform: scale(.65); opacity: .75; } 75%,100% { transform: scale(1.12); opacity: 0; } }

/* Nearby card */
.nearby-radar {
  position: absolute;
  z-index: 680;
  left: 12px;
  right: 12px;
  bottom: calc(92px + env(safe-area-inset-bottom));
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(20,57,84,.93), rgba(32,88,116,.90));
  color: #fff;
  box-shadow: 0 13px 30px rgba(15,61,90,.30);
  backdrop-filter: blur(13px);
  cursor: pointer;
}
.radar-rings {
  position: relative;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 26%, rgba(93,220,255,.82) 28% 44%, rgba(37,129,214,.85) 46% 100%);
  box-shadow: 0 0 0 5px rgba(71,198,255,.13);
}
.radar-rings::before,
.radar-rings::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
}
.radar-rings::before { inset: 8px; }
.radar-rings::after { inset: 16px; }
.radar-rings span { position: relative; z-index: 2; font-size: 25px; }
.nearby-radar > div:nth-child(2) { min-width: 0; flex: 1; }
.nearby-radar small,
.nearby-radar strong,
.nearby-radar p { display: block; margin: 0; }
.nearby-radar small { color: #79e5ff; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.nearby-radar strong { margin-top: 2px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nearby-radar p { margin-top: 3px; color: rgba(255,255,255,.67); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nearby-radar > b { font-size: 27px; font-weight: 300; }

/* Bottom game navigation */
.game-bottom-nav {
  position: absolute;
  
  z-index: 700;
  left: 50%;
  bottom: max(9px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(306px, calc(100% - 34px));
  height: 68px;
  display: grid;
  grid-template-columns: 1fr 104px 1fr;
  align-items: center;
  padding: 4px 9px;
  border: 2px solid rgba(255,255,255,.96);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(23,62,92,.94), rgba(16,49,76,.96));
  box-shadow: 0 12px 30px rgba(14,53,79,.35), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(13px);
  display: none;
}
.game-bottom-nav > button:not(.main-orb-button) {
  position: relative;
  height: 55px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.game-bottom-nav > button:not(.main-orb-button) > span { font-size: 22px; line-height: 1; }
.game-bottom-nav > button:not(.main-orb-button) small { color: rgba(255,255,255,.64); font-size: 8px; font-weight: 800; }
.game-bottom-nav > button:not(.main-orb-button) b {
  position: absolute;
  top: 2px;
  right: 12px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 2px solid #173e5a;
  border-radius: 999px;
  background: #ff5f67;
  color: #fff;
  font-size: 8px;
}
.main-orb-button {
  position: relative;
  width: 92px;
  height: 92px;
  align-self: end;
  justify-self: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translateY(8px);
}
.monster-orb {
  position: relative;
  width: 74px;
  height: 74px;
  display: block;
  margin: auto;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 50%;
  background: linear-gradient(#ff5a5f 0 44%, #263b57 45% 55%, #f8fbff 56% 100%);
  box-shadow: 0 9px 20px rgba(4,34,55,.42), inset 0 -7px 13px rgba(13,50,75,.14);
}
.monster-orb::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  height: 9px;
  background: #263b57;
}
.monster-orb i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border: 5px solid #263b57;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px #cce7f5;
}
.main-orb-button:active .monster-orb { transform: scale(.94); }

.recenter-button {
  position: absolute;
  z-index: 680;
  right: 13px;
  bottom: calc(174px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255,255,255,.96);
  border-radius: 50%;
  background: rgba(20,57,84,.92);
  color: #fff;
  box-shadow: 0 8px 21px rgba(14,53,79,.3);
  cursor: pointer;
}
.recenter-button span { font-size: 24px; transform: translateY(-1px); }

.quick-menu {
  position: absolute;
  z-index: 890;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: min(285px, calc(100% - 40px));
  transform: translateX(-50%);
  overflow: hidden;
  padding: 8px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 22px;
  background: rgba(20,55,82,.96);
  box-shadow: 0 18px 45px rgba(12,48,74,.38);
  backdrop-filter: blur(14px);
}
.quick-menu button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #fff;
  text-align: left;
  font-weight: 750;
  cursor: pointer;
}
.quick-menu button:hover { background: rgba(255,255,255,.09); }
.quick-menu button span { width: 28px; color: #79e5ff; font-size: 20px; text-align: center; }

/* Encounter sheet */
.place-sheet {
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82dvh;
  overflow-y: auto;
  padding: 11px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0;
  background: linear-gradient(180deg, #f8fcff, #eef7fb 38%, #fff 100%);
  box-shadow: 0 -20px 55px rgba(12,48,75,.32);
}
.sheet-handle { width: 47px; height: 5px; margin: 0 auto 8px; border-radius: 999px; background: #b8ccd8; }
.sheet-close {
  position: absolute;
  z-index: 5;
  right: 14px;
  top: 15px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(25,62,90,.10);
  color: #23445d;
  font-size: 25px;
  cursor: pointer;
}
.encounter-hero {
  position: relative;
  height: 142px;
  display: flex;
  place-items: center;
  overflow: hidden;
  border-radius: 23px;
  background:
    radial-gradient(circle at 50% 58%, rgba(255,255,255,.95) 0 13%, rgba(108,225,255,.62) 14% 29%, transparent 30%),
    linear-gradient(145deg, #54d5ee, #4c8bd7 58%, #685acb);
  box-shadow: inset 0 -25px 40px rgba(24,50,125,.18);
}
.encounter-light {
  position: absolute;
  width: 230px;
  height: 230px;
  border: 2px solid rgba(255,255,255,.23);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(255,255,255,.07), 0 0 0 52px rgba(255,255,255,.05);
  animation: heroSpin 14s linear infinite;
}
.encounter-monster {
  position: relative;
  z-index: 2;
  font-size: 76px;
  line-height: 1;
  filter: drop-shadow(0 10px 9px rgba(28,52,112,.32));
  animation: encounterFloat 2.3s ease-in-out infinite;
}
.rarity-tag {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(26,54,102,.35);
  color: #fff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .12em;
  backdrop-filter: blur(8px);
}
@keyframes heroSpin { to { transform: rotate(360deg); } }
@keyframes encounterFloat { 0%,100% { transform: translateY(2px) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

.encounter-title { padding: 14px 4px 4px; text-align: center; }
.encounter-title small { color: #308bc0; font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.encounter-title h2 { margin: 2px 0 0; color: #173d5e; font-size: 25px; line-height: 1.12; }
.encounter-title p { margin: 5px 0 0; color: #6a7c88; font-size: 12px; }
.mission-status-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.distance-pill,
.points-pill { padding: 7px 11px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.distance-pill { background: #e7eef3; color: #536979; }
.distance-pill.nearby { background: #d9f8e9; color: #138353; }
.points-pill { background: #fff2b5; color: #806000; }
.place-description { margin: 13px 2px; color: #526975; font-size: 13px; line-height: 1.55; text-align: center; }
.place-info-links { display: grid; justify-items: center; gap: 8px; margin: 0 0 12px; }
.place-address { margin: 0; color: #60727e; font-size: 12px; line-height: 1.45; text-align: center; }
.website-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid #2c658a;
  border-radius: 999px;
  background: #fff;
  color: #245d82;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}
.monster-reward-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid #d3e7f0;
  border-radius: 16px;
  background: linear-gradient(90deg, #edf8fc, #f8fcff);
  font-size: 12px;
}
.monster-reward-card span { color: #6d808a; }
.monster-reward-card strong { color: #17618f; }
.verification-panel { margin-top: 12px; }
.verification-panel label { display: block; margin-bottom: 6px; color: #284f68; font-size: 11px; font-weight: 900; }
.verification-panel input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #bad3df;
  border-radius: 14px;
  background: #fff;
  color: #173d5e;
  outline: none;
  text-transform: uppercase;
}
.verification-panel input:focus { border-color: #2b9edd; box-shadow: 0 0 0 3px rgba(43,158,221,.12); }
.verification-panel input:disabled { background: #eaf0f3; color: #93a3ab; }
.verification-panel small { display: block; margin-top: 6px; color: #7f6b3d; font-size: 10px; }
.result-message { margin: 10px 0 0; padding: 9px 11px; border-radius: 11px; background: #ffebe4; color: #9b482d; font-size: 12px; text-align: center; }
.result-message.success { background: #def7e9; color: #13754a; }
.sheet-actions { display: grid; grid-template-columns: 1.35fr .8fr; gap: 8px; margin-top: 14px; }
.primary-button,
.secondary-button { min-height: 49px; border-radius: 15px; padding: 9px 11px; font-weight: 900; cursor: pointer; }
.capture-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: linear-gradient(135deg, #1b8fe5, #3c64d6);
  color: #fff;
  box-shadow: 0 8px 18px rgba(31,115,203,.25);
}
.capture-button:disabled { background: #aab7bd; box-shadow: none; cursor: not-allowed; }
.mini-orb {
  position: relative;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(#ff6167 0 44%, #263b57 45% 55%, #fff 56% 100%);
}
.mini-orb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  border: 2px solid #263b57;
  border-radius: 50%;
  background: #fff;
}
.secondary-button { border: 1px solid #b9d0dc; background: #fff; color: #315c74; }

/* Collection panel */
.modal-backdrop {
  position: absolute;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: end center;
  background: rgba(9,37,57,.58);
  backdrop-filter: blur(6px);
}
.progress-panel {
  width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 21px 18px calc(24px + env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0;
  background: linear-gradient(180deg, #f5fbff, #fff);
}
.progress-panel header { display: flex; align-items: flex-start; justify-content: space-between; }
.progress-panel header h2 { margin: 3px 0 0; color: #173d5e; }
.progress-panel header button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #e6f0f5;
  color: #31566d;
  font-size: 25px;
  cursor: pointer;
}
.eyebrow { color: #2d93cb; font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.progress-summary {
  margin: 17px 0;
  padding: 15px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 9px;
  border-radius: 20px;
  background: linear-gradient(135deg, #174767, #286f93);
  color: #fff;
  box-shadow: 0 10px 22px rgba(21,76,108,.2);
}
.progress-summary strong { font-size: 24px; }
.progress-summary span { color: rgba(255,255,255,.67); font-size: 11px; }
.progress-summary b { color: #78e9ff; }
.badge-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.monster-card {
  position: relative;
  min-height: 155px;
  padding: 15px 10px;
  overflow: hidden;
  border: 1px solid #d8eaf2;
  border-radius: 21px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 41%, #fff 0 19%, #daf3fb 20% 38%, #edf8fc 39% 100%);
  text-align: center;
}
.monster-card::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(67,167,214,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(67,167,214,.05);
}
.monster-card > * { position: relative; z-index: 2; }
.monster-card > small { color: #2d8fc1; font-size: 7px; font-weight: 950; letter-spacing: .11em; }
.monster-card > span { margin-top: 4px; font-size: 43px; filter: drop-shadow(0 7px 5px rgba(20,78,111,.18)); }
.monster-card strong { margin-top: 5px; color: #184764; font-size: 13px; }
.monster-card p { margin: 4px 0 0; color: #738894; font-size: 9px; line-height: 1.3; }
.empty-state { padding: 34px 20px; color: #687e8a; text-align: center; }
.monster-empty-state > span { display: block; color: #2d9dd5; font-size: 48px; }
.empty-state strong { display: block; margin-top: 9px; color: #234a61; }
.empty-state p { margin: 6px 0 0; font-size: 12px; }
.text-button { display: block; margin: 20px auto 0; border: 0; background: transparent; cursor: pointer; text-decoration: underline; }
.text-button.danger { color: #a34a46; }

.toast-message {
  position: absolute;
  z-index: 1400;
  left: 17px;
  right: 17px;
  bottom: calc(92px + env(safe-area-inset-bottom));
  padding: 12px 14px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 15px;
  background: rgba(18,54,81,.96);
  color: #fff;
  box-shadow: 0 12px 30px rgba(7,38,59,.32);
  text-align: center;
  font-size: 12px;
}
.toast-enter-active, .toast-leave-active { transition: .25s ease; }
.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateY(12px); }

.boot-loading,
.scene-state {
  width: 100%;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 13px;
  padding: 24px;
  background: radial-gradient(circle at 50% 40%, #dbfbff, #78cbe5 58%, #387ba8 100%);
  color: #143d5d;
  text-align: center;
}
.scene-state { position: absolute; z-index: 2000; inset: 0; }
.monster-loading small { color: rgba(20,61,93,.6); font-size: 9px; font-weight: 950; letter-spacing: .18em; }
.loading-orb { width: 66px; height: 66px; animation: orbBounce .9s ease-in-out infinite alternate; }
@keyframes orbBounce { to { transform: translateY(-12px) rotate(14deg); } }
.scene-state.error span { font-size: 42px; }
.scene-state.error button {
  border: 0;
  border-radius: 14px;
  padding: 11px 16px;
  background: #174b6d;
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

@media (min-width: 681px) {
  body { background: #bedbe7; }
  .app-shell { height: min(900px, 100dvh); }
}

@media (max-width: 420px) {
  .trainer-profile { min-width: 165px; }
  .trainer-copy small { display: none; }
  .radar-filter { top: calc(max(12px, env(safe-area-inset-top)) + 101px); }
  .radar-filter button { width: 44px; min-height: 44px; border-radius: 14px; }
  .sheet-actions { grid-template-columns: 1fr; }
  .encounter-hero { height: 130px; }
  .encounter-monster { font-size: 68px; }
}

@media (max-height: 680px) {
  .radar-filter button { min-height: 41px; width: 43px; }
  .nearby-radar { bottom: calc(18px + env(safe-area-inset-bottom)); min-height: 63px; }
  .game-bottom-nav { height: 62px; }
  .main-orb-button { transform: translateY(13px); }
  .monster-orb { width: 68px; height: 68px; }
}

/* MapLibre 3D map */
.maplibre-3d-shell {
  position: relative;
  overflow: hidden;
  background: #bfe0d1;
}

.maplibre-map,
.maplibre-map .maplibregl-canvas-container,
.maplibre-map .maplibregl-canvas {
  width: 100%;
  height: 100%;
}

.maplibre-map .maplibregl-canvas {
  filter: saturate(1.08) brightness(1.03) contrast(.96);
}

.maplibre-map .maplibregl-marker {
  z-index: 5;
}

.maplibre-map .maplibregl-ctrl-bottom-right {
  right: 9px;
  bottom: calc(91px + env(safe-area-inset-bottom));
}

.maplibre-map .maplibregl-ctrl-group {
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 15px;
  background: rgba(22,57,82,.86);
  box-shadow: 0 8px 18px rgba(15,61,90,.22);
  backdrop-filter: blur(10px);
}

.maplibre-map .maplibregl-ctrl-group button {
  width: 37px;
  height: 37px;
  background-color: transparent;
}

.maplibre-map .maplibregl-ctrl-icon {
  filter: invert(1) brightness(2);
}

.maplibre-map .maplibregl-ctrl-attrib {
  display: none;
  margin: 0 7px calc(81px + env(safe-area-inset-bottom)) 0;
  border-radius: 9px 0 0 0;
  background: rgba(255,255,255,.70);
  font-size: 8px;
}

.map-3d-toggle {
  position: absolute;
  z-index: 20;
  top: calc(max(12px, env(safe-area-inset-top)) + 103px);
  right: 11px;
  width: 58px;
  min-height: 52px;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 6px 4px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 17px;
  background: rgba(23,63,92,.82);
  color: #fff;
  box-shadow: 0 8px 19px rgba(26,71,98,.24);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.map-3d-toggle b {
  font-size: 16px;
  line-height: 1;
  letter-spacing: -.03em;
}

.map-3d-toggle small {
  margin-top: 3px;
  color: rgba(255,255,255,.72);
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
}

.map-3d-toggle.active {
  background: linear-gradient(145deg, #13a9e9, #315ed1);
  box-shadow: 0 0 0 4px rgba(54,169,255,.17), 0 9px 22px rgba(32,102,165,.34);
}

.map-render-warning {
  position: absolute;
  z-index: 25;
  top: calc(max(12px, env(safe-area-inset-top)) + 163px);
  left: 50%;
  width: min(310px, calc(100% - 28px));
  margin: 0;
  padding: 8px 11px;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 13px;
  background: rgba(255,244,210,.94);
  color: #734f18;
  font-size: 10px;
  text-align: center;
  box-shadow: 0 7px 18px rgba(92,62,16,.14);
}

@media (max-width: 420px) {
  .map-3d-toggle {
    top: calc(max(12px, env(safe-area-inset-top)) + 100px);
    right: 9px;
    width: 54px;
  }

  .maplibre-map .maplibregl-ctrl-bottom-right {
    right: 7px;
  }
}

/* MapLibre GPS-anchored UU Bear canvas */
.uu-bear-maplibre-overlay {
  z-index: 660;
  display: none;
  transform: translate(-50%, -82%);
  transform-origin: 50% 100%;
  opacity: 1;
  transition: width .18s ease, height .18s ease, opacity .2s ease;
  will-change: left, top, width, height;
}
.uu-bear-maplibre-overlay.is-loading {
  opacity: 0;
}
.uu-bear-maplibre-overlay.is-ready {
  opacity: 1;
}
.uu-bear-maplibre-overlay::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 10%;
  width: 38%;
  height: 10%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(18, 83, 113, .22);
  filter: blur(5px);
}


/* Unified UU Bear visuals for every encounter marker */
.uu-bear-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  line-height: 1;
  filter: drop-shadow(0 5px 5px rgba(36, 70, 80, .24));
}
.uu-bear-head {
  display: block;
  font-size: 42px;
  transform-origin: 50% 75%;
}
.uu-bear-icon b {
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%);
  min-width: 27px;
  padding: 2px 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7c68, #e94c68);
  color: #fff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .08em;
  text-align: center;
  box-shadow: 0 3px 7px rgba(116, 34, 52, .25);
}
.uu-bear-icon--map {
  width: 48px;
  height: 48px;
}
.uu-bear-icon--map .uu-bear-head { font-size: 38px; }
.monster-marker .uu-bear-icon--map {
  animation: uuBearMarkerWalk 1.05s ease-in-out infinite;
}
.radar-rings .uu-bear-icon {
  width: 42px;
  height: 42px;
}
.radar-rings .uu-bear-head { font-size: 34px; }
.radar-rings .uu-bear-icon b { bottom: -1px; transform: translateX(-50%) scale(.82); }
.uu-bear-icon--encounter {
  width: 112px;
  height: 112px;
  filter: drop-shadow(0 16px 18px rgba(28, 78, 100, .28));
}
.uu-bear-icon--encounter .uu-bear-head { font-size: 100px; }
.uu-bear-icon--encounter b {
  bottom: 2px;
  min-width: 43px;
  padding: 4px 9px;
  font-size: 13px;
}
.uu-bear-icon--card {
  width: 58px;
  height: 58px;
}
.uu-bear-icon--card .uu-bear-head { font-size: 48px; }
@keyframes uuBearMarkerWalk {
  0%, 100% { transform: translateY(1px) rotate(-2deg); }
  50% { transform: translateY(-4px) rotate(2deg); }
}

/* =========================================================
   Spot icon map + per-spot 3D encounter + AR camera mission
   ========================================================= */
.spot-map-marker {
  position: relative;
  width: 72px;
  height: 84px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 8px 8px rgba(20, 72, 96, .28));
}
.spot-marker-pulse {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 46px;
  height: 18px;
  border: 2px solid rgba(43, 174, 255, .55);
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(57, 187, 255, .12);
  animation: spotGroundPulse 1.8s ease-out infinite;
}
.spot-marker-pin {
  position: absolute;
  left: 50%;
  top: 3px;
  width: 54px;
  height: 61px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 4px solid #fff;
  border-radius: 50% 50% 50% 12px;
  rotate: -45deg;
  background: linear-gradient(145deg, #2ed4ff, #2869db);
  box-shadow: inset 0 -9px 15px rgba(16, 61, 145, .24), 0 7px 17px rgba(23, 91, 146, .3);
}
.spot-marker-pin i {
  rotate: 45deg;
  color: #fff;
  font-size: 25px;
  font-style: normal;
  font-weight: 950;
  text-shadow: 0 2px 5px rgba(16, 62, 112, .4);
}
.spot-map-marker small {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  min-width: 58px;
  padding: 3px 7px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #153f61;
  color: #fff;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .08em;
  white-space: nowrap;
}
.spot-map-marker.is-nearby .spot-marker-pin {
  background: linear-gradient(145deg, #ffe75b, #ff8d42);
  box-shadow: 0 0 0 7px rgba(255, 218, 70, .2), 0 0 30px rgba(255, 166, 48, .65);
  animation: spotNearbyFloat 1.2s ease-in-out infinite;
}
.spot-map-marker.is-nearby small { background: #e76c2a; }
.spot-map-marker.is-selected { transform: scale(1.14); }
.spot-map-marker.is-selected .spot-marker-pin { box-shadow: 0 0 0 8px rgba(255,255,255,.38), 0 0 32px rgba(44, 181, 255, .8); }
.spot-map-marker.is-completed .spot-marker-pin { background: linear-gradient(145deg, #7ee4aa, #21ac6f); }
.spot-map-marker.is-completed::after {
  content: "✓";
  position: absolute;
  z-index: 6;
  top: 0;
  right: 1px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #18a968;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}
@keyframes spotGroundPulse { 0% { transform: translateX(-50%) scale(.65); opacity: .7; } 90%,100% { transform: translateX(-50%) scale(1.3); opacity: 0; } }
@keyframes spotNearbyFloat { 50% { transform: translateX(-50%) translateY(-5px) rotate(-45deg); } }

.spot-nearby-card .spot-radar-rings > span {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
}
.spot-main-orb {
  width: 65px;
  height: 65px;
  display: grid;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #a9f0ff, #2bbbe8 48%, #2861ce 100%);
  color: #fff;
  font-size: 32px;
  font-weight: 950;
  box-shadow: 0 8px 24px rgba(24, 94, 160, .38), inset 0 -9px 14px rgba(19, 63, 142, .24);
}

.spot-sheet { max-height: min(92dvh, 840px); overflow-y: auto; }
.spot-model-hero { height: 230px; overflow: hidden; }
.spot-model-viewer { position: absolute; z-index: 2; inset: 0 0% 2px; }
.uu-model-viewer { position: relative; width: 100%; height: 100%; }
.uu-model-viewer canvas { width: 100% !important; height: 100% !important; display: block; }
.uu-model-loading {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(25, 68, 92, .66);
  font-size: 11px;
  font-weight: 800;
}
.spot-mission-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 12px 0;
}
.spot-mission-steps > div {
  min-width: 0;
  padding: 8px 4px 7px;
  border: 1px solid #dbe7eb;
  border-radius: 13px;
  background: #f5f9fa;
  color: #8a9ba3;
  text-align: center;
}
.spot-mission-steps b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: #dbe5e8;
  color: #6e8189;
  font-size: 10px;
}
.spot-mission-steps span { display: block; font-size: 8px; line-height: 1.25; }
.spot-mission-steps > div.done { border-color: #83d8ae; background: #ebfbf3; color: #17784c; }
.spot-mission-steps > div.done b { background: #20b875; color: #fff; }
.spot-photo-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #8eddb8;
  border-radius: 14px;
  background: #ecfbf4;
}
.spot-photo-proof img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; }
.spot-photo-proof small, .spot-photo-proof strong { display: block; }
.spot-photo-proof small { color: #188256; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.spot-photo-proof strong { margin-top: 3px; color: #174e37; font-size: 12px; }
.spot-action-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  font-size: 13px;
}

/* Full-screen AR camera */
.ar-camera-modal {
  position: absolute;
  z-index: 1600;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: #081823;
  color: #fff;
}
.ar-camera-header {
  position: relative;
  z-index: 20;
  min-height: calc(66px + env(safe-area-inset-top));
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: end;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  background: linear-gradient(to bottom, rgba(4, 21, 31, .94), rgba(4, 21, 31, .68));
}
.ar-camera-header > button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 25px;
}
.ar-camera-header small, .ar-camera-header strong { display: block; }
.ar-camera-header small { color: #79dcff; font-size: 8px; letter-spacing: .16em; }
.ar-camera-header strong { margin-top: 2px; font-size: 15px; }
.ar-qr-state {
  align-self: center;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255, 190, 61, .18);
  color: #ffd86d;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .1em;
}
.ar-qr-state.verified { border-color: rgba(76, 233, 151, .45); background: rgba(41, 192, 116, .2); color: #75f1ad; }
.ar-camera-stage { position: relative; min-height: 0; overflow: hidden; background: linear-gradient(#6bc7dc, #d9e9e2); }
.ar-camera-video, .ar-camera-demo-bg, .ar-photo-preview, .ar-uu-model-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.ar-camera-video { z-index: 1; object-fit: cover; }
.ar-camera-demo-bg {
  z-index: 2;
  display: grid;
  place-items: center;
  background: linear-gradient(165deg, #6dc9dd, #d7e9df 66%, #9bc5a9);
}
.ar-camera-demo-bg::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 38%;
  background: linear-gradient(175deg, transparent 0 18%, rgba(72, 136, 94, .42) 19% 100%);
}
.ar-camera-demo-bg span { color: rgba(255,255,255,.75); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.ar-uu-model-layer { z-index: 5; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.ar-uu-model-layer.visible { opacity: 1; }
.ar-uu-model-layer canvas { width: 100% !important; height: 100% !important; display: block; }
.ar-qr-guide {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 47%;
  width: min(270px, 68vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  align-content: end;
  justify-items: center;
  padding: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.ar-qr-guide .corner { position: absolute; width: 52px; height: 52px; border-color: #fff; border-style: solid; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
.ar-qr-guide .top-left { top: 0; left: 0; border-width: 4px 0 0 4px; border-radius: 15px 0 0; }
.ar-qr-guide .top-right { top: 0; right: 0; border-width: 4px 4px 0 0; border-radius: 0 15px 0 0; }
.ar-qr-guide .bottom-left { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-radius: 0 0 0 15px; }
.ar-qr-guide .bottom-right { bottom: 0; right: 0; border-width: 0 4px 4px 0; border-radius: 0 0 15px; }
.ar-qr-guide strong { font-size: 13px; }
.ar-qr-guide small { margin-top: 4px; font-size: 8px; opacity: .78; }
.ar-found-label {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  min-width: 200px;
  padding: 8px 15px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  background: rgba(8, 43, 62, .62);
  text-align: center;
  backdrop-filter: blur(8px);
}
.ar-found-label small, .ar-found-label strong { display: block; }
.ar-found-label small { color: #8ce9ff; font-size: 8px; letter-spacing: .13em; }
.ar-found-label strong { margin-top: 2px; font-size: 13px; }
.ar-photo-preview { z-index: 12; object-fit: cover; }
.ar-camera-controls {
  position: relative;
  z-index: 20;
  min-height: calc(116px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  padding: 12px 18px max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(4, 17, 25, .98), rgba(4, 17, 25, .82));
}
.ar-camera-error, .ar-camera-note { margin: 0 0 8px; color: #ffd17b; font-size: 10px; text-align: center; }
.ar-test-row, .ar-photo-actions { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ar-test-row a, .ar-test-row button, .ar-photo-actions button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.ar-photo-actions .primary-button { border: 0; background: linear-gradient(135deg, #21b8e8, #2d69d7); }
.ar-shutter {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: transparent;
}
.ar-shutter span { width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px rgba(20,70,90,.1); }
.ar-shutter:disabled { opacity: .38; }
.ar-camera-controls > small { margin-top: 6px; color: rgba(255,255,255,.68); font-size: 9px; }

@media (max-width: 420px) {
  .spot-model-hero { height: 205px; }
  .spot-mission-steps span { font-size: 7px; }
  .ar-camera-header { grid-template-columns: 42px 1fr auto; }
}

/* QR corner tracking overlay */
.ar-qr-state.lost {
  border-color: rgba(255, 195, 82, .48);
  background: rgba(255, 170, 48, .18);
  color: #ffd477;
}
.ar-qr-pose-outline {
  position: absolute;
  z-index: 9;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ar-qr-pose-outline polygon {
  fill: rgba(81, 232, 255, .08);
  stroke: rgba(117, 241, 255, .96);
  stroke-width: .65;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(72, 214, 255, .88));
}
.ar-tracking-lost {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 48%;
  width: min(290px, calc(100% - 36px));
  transform: translate(-50%, -50%);
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 18px;
  background: rgba(8, 37, 54, .72);
  color: #fff;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 20, 31, .25);
  backdrop-filter: blur(9px);
}
.ar-tracking-lost strong,
.ar-tracking-lost small { display: block; }
.ar-tracking-lost strong { font-size: 14px; }
.ar-tracking-lost small { margin-top: 5px; color: rgba(255,255,255,.72); font-size: 9px; }

/* Lightweight GPS position marker — no 3D character on map */
.gps-user-marker {
  position: relative;
  width: 58px;
  height: 58px;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(18, 79, 123, .28));
}
.gps-user-pulse {
  position: absolute;
  inset: 4px;
  border: 2px solid rgba(54, 169, 255, .55);
  border-radius: 50%;
  background: rgba(54, 169, 255, .10);
  animation: gpsUserPulse 2s ease-out infinite;
}
.gps-user-dot {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border: 4px solid #fff;
  border-radius: 50%;
  background: #2196f3;
  box-shadow: 0 3px 10px rgba(16, 76, 120, .35), inset 0 0 0 2px rgba(18, 99, 162, .18);
}
.gps-user-heading {
  position: absolute;
  z-index: 1;
  top: -2px;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50% 31px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 18px solid #168ce0;
  filter: drop-shadow(0 2px 2px rgba(14, 76, 122, .25));
}
@keyframes gpsUserPulse {
  0% { transform: scale(.55); opacity: .85; }
  75%, 100% { transform: scale(1.15); opacity: 0; }
}

/* Reliable screen-space AR model viewer.
   The QR tracker positions this square layer in pixels; Three.js only renders
   the character inside it, avoiding full-screen pose/clipping issues. */
.ar-uu-model-layer.ar-uu-screen-viewer {
  inset: auto;
  left: 50%;
  top: 62%;
  width: 240px;
  height: 240px;
  overflow: visible;
  transform: translate(-50%, -82%);
  transform-origin: 50% 50%;
  will-change: left, top, width, height, transform, opacity;
  filter: drop-shadow(0 14px 18px rgba(4, 24, 34, .28));
}
.ar-uu-model-layer.ar-uu-screen-viewer canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}


/* A-Frame / AR.js isolated camera modal */
.aframe-ar-modal {
  position: fixed;
  z-index: 1600;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  overflow: hidden;
  background: #06131d;
}
.aframe-ar-frame {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  display: block;
  border: 0;
  background: #06131d;
}
.aframe-ar-loading,
.aframe-ar-parent-error {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 28px;
  background: rgba(5, 20, 30, .92);
  color: #fff;
  text-align: center;
}
.aframe-ar-loading span {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(255,255,255,.18);
  border-top-color: #69dfff;
  border-radius: 50%;
  animation: aframeArSpin .8s linear infinite;
}
.aframe-ar-parent-error button {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #12324a;
  font-weight: 900;
}
@keyframes aframeArSpin { to { transform: rotate(360deg); } }

/* Markerless Lite browser AR: webcam + DeviceOrientation + ray/ground-plane approximation */
.markerless-lite-modal {
  position: fixed;
  z-index: 6000;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #071821;
  color: #fff;
  touch-action: none;
}
.markerless-lite-video,
.markerless-lite-canvas,
.markerless-lite-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.markerless-lite-video { z-index: 1; object-fit: cover; }
.markerless-lite-canvas { z-index: 2; }
.markerless-lite-canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.markerless-lite-photo { z-index: 8; object-fit: cover; background: #071821; }
.markerless-lite-header {
  position: absolute;
  z-index: 20;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
.markerless-lite-header > div {
  max-width: calc(100% - 58px);
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 17px;
  background: rgba(5,26,39,.72);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}
.markerless-lite-header small { display: block; color: #72e5ff; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.markerless-lite-header strong { display: block; margin-top: 2px; font-size: 14px; }
.markerless-lite-header p { margin: 4px 0 0; color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.4; }
.markerless-lite-header > button {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(5,26,39,.76);
  color: #fff;
  font-size: 25px;
  pointer-events: auto;
}
.markerless-lite-start-card {
  position: absolute;
  z-index: 25;
  left: 18px;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  background: rgba(7,29,43,.92);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
  text-align: center;
}
.markerless-lite-start-card b { display: block; font-size: 16px; }
.markerless-lite-start-card p { margin: 9px 0 15px; color: rgba(255,255,255,.7); font-size: 11px; line-height: 1.55; }
.markerless-lite-start-card button,
.markerless-lite-photo-actions button {
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  font-weight: 900;
}
.markerless-lite-start-card button { width: 100%; background: #fff; color: #173e5a; }
.markerless-lite-start-card button:disabled { opacity: .55; }
.markerless-lite-sensor-status {
  position: absolute;
  z-index: 20;
  top: calc(max(12px, env(safe-area-inset-top)) + 83px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(4,25,37,.7);
  color: rgba(255,255,255,.78);
  font-size: 9px;
  backdrop-filter: blur(10px);
}
.markerless-lite-sensor-status span { width: 7px; height: 7px; border-radius: 50%; background: #ffbc53; }
.markerless-lite-sensor-status span.active { background: #55ee9a; box-shadow: 0 0 8px rgba(85,238,154,.72); }
.markerless-lite-hint {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(95px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 28px);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(4,25,37,.72);
  font-size: 10px;
  backdrop-filter: blur(10px);
}
.markerless-lite-hint span { width: 8px; height: 8px; border-radius: 50%; background: #ffbc53; }
.markerless-lite-hint span.ready { background: #54dcff; box-shadow: 0 0 9px rgba(84,220,255,.85); }
.markerless-lite-toolbar {
  position: absolute;
  z-index: 20;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 44px 44px .75fr 1.45fr 1fr;
  gap: 7px;
  pointer-events: auto;
}
.markerless-lite-toolbar button {
  min-height: 48px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px;
  background: rgba(6,31,45,.82);
  color: #fff;
  font-weight: 800;
  line-height: 1.15;
  backdrop-filter: blur(12px);
}
.markerless-lite-toolbar button.recalculate { font-size: 10px; }
.markerless-lite-toolbar button.capture { background: #fff; color: #173e5a; }
.markerless-lite-toolbar button:disabled { opacity: .42; }
.markerless-lite-photo-actions {
  position: absolute;
  z-index: 30;
  left: 14px;
  right: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 9px;
}
.markerless-lite-photo-actions button { background: rgba(7,31,45,.9); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.markerless-lite-photo-actions button.confirm { background: #fff; color: #173e5a; }
.markerless-lite-error {
  position: absolute;
  z-index: 40;
  left: 14px;
  right: 14px;
  top: 125px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(116,35,28,.9);
  color: #fff;
  font-size: 10px;
  text-align: center;
}