.geo-demo {
  font-size: 11px;
  color: #ffc77e;
  border: 1px solid #836343;
  border-radius: 20px;
  padding: 8px 12px;
}
.geo-toolbar {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 18px;
}
.geo-toolbar .search {
  flex: 1;
  min-width: 0;
}
.geo-presets {
  display: flex;
  gap: 5px;
}
.geo-presets button,
.geo-zoom button {
  background: #163047;
  color: #d6e8f8;
  border: 1px solid #35516a;
  border-radius: 7px;
  cursor: pointer;
  min-height: 44px;
  padding: 0 14px;
}
.geo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 16px;
}
.geo-map {
  height: 650px;
  position: relative;
  overflow: hidden;
  background: #071522;
  border: 1px solid #2a455b;
  border-radius: 15px;
  touch-action: none;
  cursor: grab;
}
.geo-map:active {
  cursor: grabbing;
}
#geo-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.geo-countries path {
  fill: #152b38;
  stroke: #587083;
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
.geo-states path {
  fill: none;
  stroke: #63798b;
  stroke-width: 0.65;
  vector-effect: non-scaling-stroke;
}
#geo-cities,
#geo-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.geo-city {
  position: absolute;
  font-size: 10px;
  color: #a8bbca;
  white-space: nowrap;
  padding-left: 5px;
  transform: translate(4px, 21px);
  text-shadow:
    0 1px 3px #000,
    1px 0 3px #000;
  pointer-events: none;
}
.geo-city:before {
  content: "";
  position: absolute;
  left: -3px;
  top: 4px;
  width: 3px;
  height: 3px;
  background: #91a5b8;
  border-radius: 50%;
}
.geo-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 37px;
  height: 37px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #10283bed;
  border: 1px solid #69b4d1;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 8px var(--nexus-color-0008);
  pointer-events: auto;
  color: #ace3ff;
  font-size: 10px;
  font-weight: 800;
}
.geo-pin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.geo-pin b {
  position: absolute;
  right: -7px;
  top: -7px;
  border-radius: 10px;
  background: #ffd08a;
  color: #352513;
  padding: 2px 5px;
  font-size: 10px;
}
.geo-pin:hover,
.geo-pin:focus-visible,
.geo-pin.selected {
  border: 2px solid #ffbf66;
  z-index: 2;
  outline: 2px solid #ffbf6644;
  outline-offset: 2px;
}
.geo-zoom {
  position: absolute;
  left: 14px;
  top: 14px;
  display: grid;
  gap: 6px;
}
.geo-zoom button {
  width: 42px;
  font-size: 23px;
  padding: 0;
}
.geo-credit {
  position: absolute;
  bottom: 6px;
  right: 10px;
  background: #071522c9;
  padding: 4px;
  font-size: 9px;
  color: #9bb2c2;
}
.geo-sidebar {
  padding: 18px;
  max-height: 650px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.geo-selected {
  display: flex;
  gap: 12px;
  align-items: center;
}
.geo-selected > img,
.geo-selected > span {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}
.geo-selected h2 {
  font-size: 18px;
  overflow-wrap: anywhere;
  margin: 0 0 6px;
}
.geo-selected p {
  font-size: 12px;
}
.geo-selected p span {
  color: #ffc77e;
  font-size: 10px;
}
.geo-league {
  font-size: 11px;
  line-height: 1.6;
  margin: 14px 0;
}
.geo-sidebar .button {
  font-size: 12px;
  display: flex;
  justify-content: center;
}
.geo-results-head {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #2b4259;
  padding-top: 18px;
  margin: 18px 0 10px;
  font-size: 12px;
}
.geo-results-head span {
  color: #80c4e2;
}
#geo-results {
  overflow: auto;
  min-height: 150px;
}
.geo-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 5px;
  border: 0;
  border-bottom: 1px solid #29415a66;
  background: transparent;
  text-align: left;
  color: #eef6ff;
  cursor: pointer;
}
.geo-result:hover,
.geo-result:focus-visible {
  background: #21425c;
}
.geo-result > img,
.geo-result-initials {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}
.geo-result-initials {
  font-size: 11px;
  color: #8cdaff;
  display: grid;
  place-items: center;
}
.geo-result b {
  font-size: 12px;
  display: block;
  overflow-wrap: anywhere;
}
.geo-result small {
  color: #9cb0c2;
  font-size: 10px;
  display: block;
  margin-top: 4px;
}
.geo-hint,
.geo-no-results {
  font-size: 12px;
  color: #a9bbcf;
  line-height: 1.6;
}
.geo-cluster-list {
  margin-top: 18px;
}
.geo-cluster-list > b {
  font-size: 12px;
}
.geo-cluster-list button {
  display: block;
  background: none;
  color: #a8d8f1;
  padding: 10px 0;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
}
.find-clans-link {
  margin-left: auto;
}
.geo-map:focus-visible {
  outline: 2px solid #87d8f6;
  outline-offset: 3px;
}
@media (max-width: 800px) {
  .geo-layout {
    grid-template-columns: 1fr;
  }
  .geo-map {
    height: 520px;
  }
  .geo-sidebar {
    max-height: 380px;
  }
  .geo-toolbar {
    flex-wrap: wrap;
  }
  .geo-toolbar .search {
    flex-basis: 100%;
  }
  .geo-presets {
    width: 100%;
  }
  .geo-presets button {
    flex: 1;
    padding: 0 10px;
  }
  .find-clans-link {
    margin-left: 0;
  }
  .geo-demo {
    margin-top: 10px;
  }
  .geo-pin {
    width: 35px;
    height: 35px;
  }
  .geo-city {
    font-size: 9px;
  }
}
@media (max-width: 380px) {
  .geo-map {
    height: 450px;
  }
}
.clan-search-home{max-width:680px;margin:0 auto;padding:16px 0 30px}
.clan-search-home .field{margin:24px 0 0;display:grid;gap:10px}
.clan-globe-button{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#ddf6ff;margin:26px auto;padding:22px;width:min(100%,300px);border:1px solid #85d8f577;border-radius:22px;background:radial-gradient(ellipse at 50% 35%,#327e9d66,transparent 70%),linear-gradient(145deg,#244960bb,#071c30cc);box-shadow:inset 0 2px #ffffff30,0 6px 22px #0003}
.clan-globe-button svg{width:140px;height:140px;fill:#123e5a;stroke:#8be5ff;stroke-width:2;filter:drop-shadow(0 0 12px #51cdff66);margin-bottom:14px}
.clan-globe-button b{font-size:18px}.clan-globe-button>span{font-size:11px;color:#a6cce1;margin-top:6px}
.clan-globe-button:hover{border-color:#b3edff;background-color:#255573}
.clan-search-results{display:grid;gap:9px}.clan-search-result{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #79b4d266;border-radius:12px;background:linear-gradient(125deg,#274b66c9,#0d273bc9);color:#edfaff;text-decoration:none}
.clan-search-result>img,.clan-search-result>span{width:44px;height:44px;object-fit:contain;display:grid;place-items:center}.clan-search-result div{flex:1;min-width:0}.clan-search-result b{display:block;font-size:13px}.clan-search-result small{display:block;color:#aad1e6;font-size:10px;margin-top:4px}.clan-search-result>svg{width:17px;height:17px}#clan-search-status{font-size:12px;color:#b4d0e3;text-align:center}
/* Raised game-style world card, directly below the search field. */
.clan-search-home{padding-top:0}
.clan-search-home .field{margin:6px 0 0;gap:0}
.clan-search-home #clan-search{min-height:46px;border:2px solid #9ad9ee;border-radius:10px;background:linear-gradient(#122d49,#0b2038);box-shadow:inset 0 2px 4px #0005,0 2px 0 #061326}
.clan-globe-button{isolation:isolate;position:relative;overflow:hidden;width:min(100%,360px);margin:22px auto 25px;padding:10px 14px 18px;border:4px solid #f5cf78;border-radius:18px;background:radial-gradient(ellipse at 50% 30%,#40bce6 0%,#1a70ae 48%,#123d74 100%);box-shadow:0 6px 0 #926127,0 9px 0 #07182c,0 13px 20px #0005,inset 0 3px 0 #fff7,inset 0 -4px 0 #08295180}
.clan-globe-button::before{content:'';position:absolute;inset:0;z-index:-1;background:repeating-conic-gradient(from 10deg at 50% 40%,#9fe8ff16 0deg 15deg,transparent 15deg 30deg)}
.clan-globe-button::after{content:'';position:absolute;inset:-60% -100%;pointer-events:none;background:linear-gradient(110deg,transparent 44%,#fff3 49%,#fff6 50%,transparent 55%);animation:clan-globe-shine 6s ease-in-out infinite}
.clan-globe-button .clan-world-orb{width:180px;height:180px;fill:initial;stroke:none;filter:drop-shadow(0 6px 3px #07275288);margin:0}
.clan-globe-button b{position:relative;display:block;width:calc(100% + 12px);padding:12px 5px;border:2px solid #f7da89;border-radius:5px;background:linear-gradient(#58c1f6,#147cce 48%,#1166b8 51%,#125797);box-shadow:0 3px 0 #07326d,inset 0 2px 0 #ffffff60;color:#fff;font-size:23px;font-weight:950;text-align:center;text-shadow:0 2px 0 #08345e,1px 0 #08345e,-1px 0 #08345e}
.clan-globe-button>span{margin-top:11px;color:#dbf5ff;font-size:12px;font-weight:700;text-shadow:0 1px 2px #08264f}
.clan-globe-button:hover{border-color:#ffe6a6}.clan-globe-button:active{transform:translateY(3px);box-shadow:0 3px 0 #926127,0 6px 0 #07182c,inset 0 3px 0 #fff7}
@keyframes clan-globe-shine{0%,65%{transform:translateX(-45%)}90%,100%{transform:translateX(45%)}}
@media(prefers-reduced-motion:reduce){.clan-globe-button::after{animation:none;display:none}}
/* Standalone glass globe; the orb itself opens the map. */
.clan-search-home .clan-globe-button,
.clan-search-home .clan-globe-button:hover,
.clan-search-home .clan-globe-button:active{width:240px;margin:14px auto 18px;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;transform:none}
.clan-search-home .clan-globe-button::before,
.clan-search-home .clan-globe-button::after{display:none}
.clan-search-home .clan-globe-button .clan-world-orb{width:240px;height:240px;filter:drop-shadow(0 0 14px #a2ebff33);transition:filter .2s,transform .2s}
.clan-search-home .clan-globe-button:hover .clan-world-orb{filter:drop-shadow(0 0 20px #a2ebff66);transform:scale(1.03)}
.clan-search-home .clan-globe-button:focus-visible{outline:2px solid #b8eeff;outline-offset:2px}
/* Compact search and map entry; results appear only after a search. */
.clan-search-row{display:flex;align-items:center;gap:10px;margin:6px 0 18px}
.clan-search-home .clan-search-row .field{flex:1;min-width:0;margin:0}
.clan-search-home .clan-search-row .clan-globe-button{flex:0 0 58px;width:58px;height:58px;margin:0;padding:0}
.clan-search-home .clan-search-row .clan-world-orb{width:58px;height:58px}
.clan-search-home #clan-search-results:empty,.clan-search-home #clan-search-status:empty{display:none}
/* Clan map is a dedicated view with the shared back control. */
body.geo-active #app:has(.unified-back[href="#clans"]) .geo-toolbar{display:none!important}
.geo-pin:hover,.geo-pin:focus-visible{z-index:100!important}
.geo-pin[title]:hover::after,.geo-pin[title]:focus-visible::after{content:attr(title);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:210px;white-space:normal;padding:7px 10px;border:1px solid #8bd9ed;border-radius:8px;background:#0b243eef;box-shadow:0 3px 10px #0006;color:#fff;font-size:12px;font-weight:700;pointer-events:none}
/* Center the visible sphere, excluding the SVG's ground shadow. */
.clan-search-home .clan-search-row .clan-world-orb{transform:translateY(4px)}
.clan-search-home .clan-search-row .clan-globe-button:hover .clan-world-orb{transform:translateY(4px) scale(1.03)}
/* Match the search field's top edge to the other social subpages. */
.clan-search-home .clan-search-row{margin-top:0;min-height:46px}
.clan-search-home .clan-search-row .clan-globe-button{height:46px;overflow:visible;justify-content:center}
.clan-search-home .clan-search-row .clan-world-orb{flex-shrink:0}
/* Clan map uses gestures; no zoom buttons or discovery drawer. */
body.geo-active #app:has(.unified-back[href="#clans"]) .geo-zoom,
body.geo-active #app:has(.unified-back[href="#clans"]) .geo-sidebar{display:none!important}
.player-search-row{display:flex;align-items:center;gap:10px;margin:0 0 18px}
.player-search-row .social-search{flex:1;min-width:0;margin:0}
.player-search-row .clan-globe-button,.player-search-row .clan-globe-button:hover{width:58px;height:46px;flex:0 0 58px;padding:0;margin:0;border:0;background:none;box-shadow:none;justify-content:center}
.player-search-row .clan-globe-button::before,.player-search-row .clan-globe-button::after{display:none}
.player-search-row .clan-world-orb{width:58px;height:58px;flex-shrink:0;margin:0;transform:translateY(4px)}
body.geo-active #app:has(.unified-back[href="#friends"]) .geo-zoom,body.geo-active #app:has(.unified-back[href="#friends"]) .geo-sidebar{display:none!important}
/* The globe SVG is taller than its compact hit area; preserve its full artwork. */
.player-search-row .clan-globe-button{overflow:visible!important}
.player-search-row .clan-world-orb{overflow:visible;min-height:58px;flex-shrink:0}
