:root{color-scheme:dark;--ink:#070b0d;--white:#f8f8f4;--muted:rgba(246,249,245,.67);--sage:#b8d7c1}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--ink);color:var(--white)}body{font-family:Inter,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}:focus{outline:none}button:focus-visible,a:focus-visible{outline:none;text-decoration:underline;text-decoration-color:var(--sage);text-underline-offset:5px}button:disabled{cursor:not-allowed;opacity:.4}
.app{position:fixed;inset:0;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 69% 51%,#132328 0%,#0a1115 46%,#06090b 85%)}
.globe-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;z-index:0}.globe-viewport.dragging{cursor:grabbing}.globe-viewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.globe-glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 70% 55%,#8fb5b407 0%,#243e3d08 40%,transparent 65%)}.globe-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,#05090bc7 0%,#060a0cb0 27%,#070b0d51 43%,transparent 71%),linear-gradient(0deg,#05090b8e 0%,transparent 23%,transparent 75%,#05080b42 100%);transition:opacity .65s cubic-bezier(.2,.72,.25,1)}.mode-explore .globe-vignette{opacity:.25}
.poi-layer,.players-layer{position:absolute;inset:0;pointer-events:none}.poi-layer{z-index:6;transition:opacity .4s,visibility .4s}.players-layer{z-index:7}
.poi-pin{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-100%);padding:0 0 11px;background:none;border:0;color:#fff;pointer-events:auto;opacity:.85;transition:opacity .16s,filter .18s;filter:drop-shadow(0 6px 15px #0008)}.poi-pin:hover,.poi-pin:focus-visible{opacity:1;z-index:20;filter:drop-shadow(0 8px 20px #000a)}.poi-pin img{width:78px;height:49px;display:block;object-fit:cover;border:1px solid #ffffffaa;border-radius:5px;box-shadow:0 2px 15px #0008;transition:transform .2s, border-color .2s}.poi-pin:hover img{transform:translateY(-3px) scale(1.07);border-color:#fff}.poi-pin::before{content:'';position:absolute;bottom:4px;left:calc(50% - .5px);width:1px;height:7px;background:#ffffff90}.poi-pin::after{content:'';position:absolute;bottom:0;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:#e9f2eb;box-shadow:0 0 6px #ffffff9e}
.player-pin{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:1px;transform:translate(-50%,-100%);padding:0;background:none;border:0;color:#f4fff6;white-space:nowrap;pointer-events:none!important;user-select:none;filter:drop-shadow(0 1px 2px #000b)}.player-pin *{pointer-events:none!important}.player-dot{display:block;width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#c2f1cb;box-shadow:0 0 0 2px #05140daa,0 0 6px #85e0a078}.player-pin .player-name{order:-1;display:block;max-width:95px;overflow:hidden;text-overflow:ellipsis;font-size:9px;line-height:1.1;padding:2px 4px;border:1px solid #ffffff1e;border-radius:3px;background:#071212bb;text-shadow:0 1px 2px #000;opacity:.9}
.home-overlay{position:absolute;inset:0;z-index:10;pointer-events:none;transition:opacity .55s ease,transform .62s cubic-bezier(.16,.74,.34,1),visibility .55s}.home-overlay button,.home-overlay a{pointer-events:auto}.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:38px clamp(24px,5.8vw,94px)}.wordmark{font-weight:800;font-size:22px;letter-spacing:-.085em;display:inline-flex;align-items:baseline;line-height:1}.wordmark i{font-style:normal;color:#cce2d3}.wordmark img{width:54px;height:54px;max-width:none;max-height:none;object-fit:contain;display:block;flex:0 0 auto}.nav-right{display:flex;align-items:center;gap:clamp(18px,3vw,43px)}.wiki-link{font-size:13px;font-weight:600;transition:opacity .18s;display:flex;align-items:center;gap:9px}.wiki-link:hover{opacity:.6}.wiki-link span{font-size:17px;font-weight:400}.population{display:inline-flex;align-items:center;gap:9px;color:#cbdad0;font-size:11px;font-weight:600;letter-spacing:.03em;white-space:nowrap}.online-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#b1e7c1;box-shadow:0 0 0 3px #95dfad20,0 0 12px #c1e4c080}.population.error .online-dot{background:#e2ba90;box-shadow:none}
.hero{position:absolute;left:clamp(28px,8.6vw,142px);top:51%;transform:translateY(-50%);width:min(650px,62vw)}.hero h1{max-width:640px;font-size:clamp(46px,5.25vw,83px);font-weight:720;line-height:1.075;letter-spacing:-.072em;margin:0;text-wrap:balance;text-shadow:0 5px 28px #03080944}.hero p{font-size:clamp(18px,1.55vw,23px);color:#ecf4edc7;letter-spacing:-.035em;margin:24px 0 0}.ip-button{margin-top:35px;padding:14px 17px;border:1px solid #ffffff48;border-radius:5px;min-height:48px;display:inline-flex;align-items:center;gap:27px;background:#0a11148a;color:#f9f9f5;font-size:14px;font-weight:550;letter-spacing:.01em;backdrop-filter:blur(10px);transition:background .2s,border-color .2s,transform .2s}.ip-button:hover{background:#ffffff26;border-color:#ffffffa1;transform:translateY(-2px)}.ip-button svg{opacity:.82}
.explore-button{position:absolute;bottom:max(39px,calc(env(safe-area-inset-bottom) + 22px));left:50%;transform:translateX(-50%);background:none;border:0;padding:13px;display:flex;align-items:center;gap:16px;color:#f8faf8;font-size:13px;font-weight:600;white-space:nowrap;text-shadow:0 2px 14px #000}.explore-button:hover{opacity:.7}.explore-button span{font-size:20px;font-weight:300;transition:transform .2s}.explore-button:hover span{transform:translateY(4px)}
.mode-explore .home-overlay{opacity:0;transform:translateY(-13px);visibility:hidden;pointer-events:none}
.map-interface{position:absolute;inset:0;z-index:11;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .48s ease,visibility .48s}.mode-explore .map-interface{opacity:1;visibility:visible}.map-interface button{pointer-events:auto}.map-header{position:absolute;top:clamp(23px,3.5vw,43px);left:clamp(20px,4vw,61px);right:clamp(20px,4vw,61px);display:flex;justify-content:space-between;gap:18px;align-items:center}.back-button{display:flex;align-items:center;gap:12px;border:1px solid #ffffff29;background:#0c1618ba;color:#fff;padding:12px 16px;border-radius:5px;font-size:13px;font-weight:600;backdrop-filter:blur(12px);transition:background .18s}.back-button:hover{background:#263335d9}.back-button span{font-size:19px;font-weight:300}.map-population{background:#0b181bc4;border:1px solid #ffffff20;padding:10px 13px;border-radius:5px;backdrop-filter:blur(12px)}.map-controls{position:absolute;right:clamp(20px,4vw,61px);bottom:clamp(30px,6vh,65px);display:flex;flex-direction:column;border-radius:6px;overflow:hidden;border:1px solid #ffffff35;background:#081216d6;backdrop-filter:blur(10px)}.map-controls button{width:43px;height:43px;border:0;border-bottom:1px solid #ffffff21;color:#fff;background:none;font-size:22px;font-weight:300;display:grid;place-items:center}.map-controls button:last-child{border-bottom:0}.map-controls button:hover{background:#ffffff1b}.map-attribution{position:absolute;left:clamp(20px,4vw,61px);bottom:clamp(27px,6vh,65px);font-size:10px;line-height:1.4;color:#d2dcd2a1;max-width:calc(100vw - 155px);text-shadow:0 2px 8px #000}
.location-card{position:absolute;z-index:21;width:266px;left:clamp(20px,4vw,61px);bottom:95px;border-radius:9px;overflow:hidden;border:1px solid #ffffff30;background:#0c1718e8;box-shadow:0 18px 60px #000a;backdrop-filter:blur(18px);animation:card-appear .23s ease-out}.location-card[hidden],.player-card[hidden]{display:none}.location-card img{height:151px;width:100%;object-fit:cover;display:block}.location-body{padding:16px 17px;display:flex;justify-content:space-between;align-items:center;gap:12px}.location-body h2{font-size:18px;letter-spacing:-.05em;margin:5px 0 0}.detail-eyebrow{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#afbeb7}.close-button{background:none;border:0;color:#fff;opacity:.7;font-size:22px;line-height:1;padding:5px}.close-button:hover{opacity:1}.player-card{position:absolute;z-index:22;right:clamp(20px,4vw,61px);bottom:100px;border:1px solid #ffffff30;border-radius:7px;padding:15px 14px;display:flex;align-items:center;gap:10px;background:#0c1718e8;backdrop-filter:blur(16px);font-size:13px;font-weight:600}.player-card #player-context{color:#adc2b6;font-weight:400;font-size:10px}.player-card .close-button{font-size:18px;margin-left:2px}
.toast{position:absolute;z-index:30;bottom:109px;left:50%;transform:translate(-50%,9px);padding:11px 16px;border-radius:5px;background:#edf4ee;color:#17251d;font-size:12px;font-weight:650;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes card-appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.hero{left:6.5vw;width:77vw;top:49%}.hero h1{font-size:clamp(43px,6.7vw,68px)}.globe-vignette{background:linear-gradient(90deg,#05090bd9 0%,#05090b99 43%,#05090b22 75%),linear-gradient(0deg,#05090b80,transparent 30%,transparent 70%,#05090b3d)}.topbar{padding:31px 6.5vw}}
@media(max-width:620px){.topbar{padding:25px 24px}.wordmark{font-size:19px}.population{font-size:10px}.nav-right{gap:17px}.nav-right .population-text{max-width:68px;line-height:1.25}.wiki-link{font-size:12px}.hero{left:27px;top:48%;width:calc(100vw - 54px)}.hero h1{font-size:clamp(40px,10vw,55px);max-width:460px;line-height:1.12}.hero p{font-size:17px;margin-top:20px}.ip-button{margin-top:29px;padding:13px 14px;font-size:13px}.globe-vignette{background:linear-gradient(90deg,#04080aa8 0%,#04080a80 45%,#04080a4a 100%),linear-gradient(0deg,#05090b9a,transparent 25%,transparent 75%,#05090b42)}.poi-pin img{width:57px;height:39px}.poi-pin{padding-bottom:9px}.player-pin .player-name{display:block;font-size:8px;max-width:72px}.map-header{top:19px;left:20px;right:20px}.map-attribution{left:19px;bottom:20px;max-width:calc(100vw - 115px);font-size:9px}.map-controls{right:18px;bottom:24px}.map-controls button{width:39px;height:39px}.location-card{left:20px;bottom:105px;width:min(240px,calc(100vw - 40px))}.location-card img{height:129px}.player-card{right:16px;bottom:165px;max-width:calc(100vw - 32px)}.explore-button{bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px))}}
@media(max-height:580px){.topbar{padding-top:18px}.hero{top:46%}.hero h1{font-size:clamp(34px,5vw,56px)}.hero p{margin-top:13px}.ip-button{margin-top:18px;min-height:42px}.explore-button{bottom:10px}.location-card img{height:83px}.location-card{bottom:57px}.map-attribution{bottom:12px}.map-controls{bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
.poi-pin[hidden],.player-pin[hidden]{display:none!important}
@media(min-width:621px){.location-card{right:clamp(20px,4vw,61px);left:auto}}

/* Final EarthRP identity: original globe logo and deliberately lowercase UI. */
.topbar{padding-top:22px;padding-bottom:22px}
.wordmark{align-items:center;line-height:1;letter-spacing:-.065em}
.wordmark img{width:102px;height:102px;max-width:none;max-height:none;object-fit:contain;display:block;transition:opacity .2s ease}
.wordmark img[hidden]{display:none}
.wordmark:hover img{opacity:.82}
.hero h1{font-weight:630;letter-spacing:-.058em;line-height:1.09}
.hero p{font-weight:430;letter-spacing:-.02em}
.wiki-link,.explore-button,.back-button,.population,.ip-button{font-weight:500}
.hero h1,.hero p,.wiki-link,.explore-button,.back-button,.population-text,.location-body h2,.detail-eyebrow,.map-attribution,.toast{ text-transform:lowercase }
.detail-eyebrow{letter-spacing:.07em}
@media(max-width:900px){.topbar{padding-top:16px;padding-bottom:16px}.wordmark img{width:90px;height:90px}}
@media(max-width:620px){.topbar{padding-top:12px;padding-bottom:12px;gap:9px}.wordmark img{width:72px;height:72px}.nav-right{gap:13px}.hero h1{font-weight:620;letter-spacing:-.055em}}
@media(max-height:580px){.topbar{padding-top:6px}.wordmark img{width:60px;height:60px}}
/* On small screens, live player markers already communicate population.
   Keep the top bar to just the logo and wiki link. */
@media(max-width:620px){.topbar .population{display:none}.nav-right{margin-left:auto}}

/* The logo is the permanent header brand, never a text placeholder. */
@media(max-width:620px){.wordmark img{width:48px;height:48px}}

/* V31.4 — tiny geographic figurines.
   The real skin render has a three-quarter yaw from the avatar service;
   CSS only scales it. Names sit above the full body so feet remain at the
   exact lat/lon. Neither avatar nor name can receive pointer or focus.
   Globe drag/wheel/touch gestures pass straight through these labels. */
.player-pin.portrait-loaded{transform:translate(-50%,-100%);padding:0}
.player-pin .player-avatar{display:block;width:24px;height:36px;max-width:none;max-height:none;flex:0 0 36px;object-fit:contain;object-position:center bottom;border:0;border-radius:0;background:transparent;box-shadow:none;filter:drop-shadow(0 2px 2px #0009)}
.player-pin .player-avatar-fallback{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;border-radius:4px;border:1px solid #d6f3e080;background:#173d3bc9;color:#f0fff6;font-weight:700;font-size:9px}
.player-pin .player-avatar[hidden],.player-pin .player-avatar-fallback[hidden],.player-pin .player-dot[hidden]{display:none!important}
@media(max-width:620px){.player-pin .player-avatar{width:20px;height:30px;flex-basis:30px}.player-pin .player-name{font-size:8px;max-width:72px}}

/* V44 — immediate first paint and smooth GPU-composited live player markers.
   The poster is above the initial 1x1 WebGL placeholder but below pins/hero.
   No API, GIS atlas or distant Hytale tile request can delay its first paint. */
.globe-first-paint{
  position:absolute;
  left:72%;top:53%;
  width:min(114vh,96vw);aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:2;pointer-events:none;user-select:none;
  border-radius:50%;
  background:radial-gradient(circle at 30% 24%,#285b79,#173c59 53%,#0b233d 85%,#06131e);
  box-shadow:inset -48px -12px 90px #02080b9c,inset 8px 3px 30px #a3c7ce16;
  opacity:1;
  transition:opacity .68s ease-in-out,visibility .68s;
}
.globe-first-paint.ready{
  opacity:0;visibility:hidden;
}
/* First-time visitors see a quiet ocean-toned sphere, not a fake Earth
   image or loading label. On cached repeat visits the last REAL Hytale
   globe is uploaded immediately; actual GPU textures fade in on one globe. */
/* Chrome and Edge can leave transient GPU ghosts when the entire moving
   portrait DOM subtree (and its inner PNG) has CSS filter:drop-shadow.
   Transform only its position; do not raster-filter that layer each frame. */
.players-layer .player-pin,
.players-layer .player-pin.portrait-loaded{
  left:0;top:0;
  transform:translate3d(0,0,0) translate(-50%,-100%);
  filter:none!important;
  backface-visibility:hidden;
  isolation:isolate;
  will-change:transform;
  contain:layout style;
}
.players-layer .player-pin .player-avatar{
  filter:none!important;
  box-shadow:none;
  -webkit-user-drag:none;
  user-select:none;
  backface-visibility:hidden;
}
.players-layer .player-pin .player-name{
  box-shadow:0 1px 4px #0008;
}
/* Nearby homepage photo pins also move with the rotating globe. Do not
   repaint their filtered container beside moving player silhouettes. */
.poi-layer .poi-pin{
  left:0;top:0;
  transform:translate3d(0,0,0) translate(-50%,-100%);
  filter:none!important;
  will-change:transform;
  backface-visibility:hidden;
}
.poi-layer .poi-pin:hover,.poi-layer .poi-pin:focus-visible{
  filter:none!important;
}
/* Mobile preview follows the same home position as the WebGL projection.
   app.js updates exact pixel geometry at runtime, including explore mode. */
@media(max-width:620px){
  .globe-first-paint{left:66%;top:55%;width:min(94vh,172vw)}
}
@media(prefers-reduced-motion:reduce){
  .globe-first-paint{transition:none}
}

/* V48 — EarthMC-style continuous slippy map for CLOSE exploration only.
   The home page remains the animated 3D WebGL globe. In Explore, scrolling
   far enough smoothly reveals the same REAL atlas under native L6-L0 tiles.
   Everything stays inside earthrp.net, not in an external iframe/domain. */
.earth-detail-map{
  position:absolute;inset:0;z-index:8;
  opacity:0;visibility:hidden;pointer-events:none;
  background:#183951;
  transition:opacity .42s ease,visibility .42s;
  cursor:grab;
  user-select:none;
}
.earth-detail-map.active{
  opacity:1;visibility:visible;pointer-events:auto;
}
/* V49: preload actual native Earth250 tile canvases below the globe before
   they become visible. visibility:visible allows Leaflet to realize its grid
   while opacity:0 and pointer-events:none preserve all globe gestures. */
.earth-detail-map.preparing:not(.active){
  opacity:0;visibility:visible;pointer-events:none;
}
.earth-detail-map.preparing:not(.active) .leaflet-container{
  pointer-events:none!important;
}
.earth-detail-map .leaflet-container{
  width:100%;height:100%;background:#183951;
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  touch-action:none;
}
.earth-detail-map .leaflet-container.leaflet-grab{cursor:grab}
.earth-detail-map .leaflet-container.leaflet-dragging{cursor:grabbing}
/* The global .globe-viewport canvas rules apply only to WebGL.
   Every Leaflet 256x256 bitmap MUST remain a normal tile canvas. */
.globe-viewport .earth-detail-map canvas{
  position:static;inset:auto;
  width:256px;height:256px;display:block;
  pointer-events:none;max-width:none;max-height:none;
}
.earth-detail-map.block-zoom .leaflet-tile-container canvas{
  image-rendering:pixelated;
}
.earth-detail-map .leaflet-marker-pane{pointer-events:none}
.earth-detail-marker{pointer-events:none!important;background:transparent;border:0}
.earth-detail-player{
  display:flex;flex-direction:column;align-items:center;
  width:50px;transform:none;
  color:#f1fff9;white-space:nowrap;font-size:10px;
  text-shadow:0 2px 5px #000;
  pointer-events:none;
}
.earth-detail-player img{
  object-fit:contain;object-position:center bottom;
  width:29px;height:43px;
  filter:drop-shadow(0 2px 2px #001e19);
  -webkit-user-drag:none;
}
.earth-detail-player span{
  margin-top:3px;padding:3px 5px;
  background:#071818dc;border:1px solid #ffffff40;
  border-radius:3px;
}
.mode-detail .players-layer,.mode-detail .poi-layer{
  opacity:0;visibility:hidden;pointer-events:none;
}
.mode-detail .globe-glow,.mode-detail .globe-vignette{
  opacity:0;pointer-events:none;
}
.earth-detail-map .leaflet-control-container{display:none}
@media(prefers-reduced-motion:reduce){
  .earth-detail-map{transition:none}
}

/* V52: a single full-viewport GPU raster replaces per-tile Leaflet canvases.
   The V51 rules above remain valid if this browser lacks WebGL2. */
.globe-viewport .earth-detail-map canvas.earthrp-gpu-canvas{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;
  max-width:none;max-height:none;pointer-events:auto;
  touch-action:none;image-rendering:auto;
  cursor:grab;
}
.earth-detail-map .earthrp-gpu-players{
  position:absolute;inset:0;pointer-events:none;
  overflow:hidden;z-index:2;
}
.earth-detail-map .earthrp-gpu-player{
  position:absolute;top:0;left:0;
  display:flex;flex-direction:column;align-items:center;
  white-space:nowrap;pointer-events:none;
  font-size:10px;font-weight:650;color:#f1fff9;
  text-shadow:0 2px 5px #000,0 1px 8px #000;
  will-change:transform;
}
.earth-detail-map .earthrp-gpu-player[hidden]{display:none}
.earth-detail-map .earthrp-gpu-player img{
  width:29px;height:43px;object-fit:contain;object-position:center bottom;
  pointer-events:none;
}

/* Consistent SVG navigation, quiet status, and shared layer controls. */
.online-dot{background:#65bd80;box-shadow:none;animation:none}
.population.error .online-dot{background:#df6767;box-shadow:none}
.wiki-link,.explore-button,.back-button{min-height:44px}
.wiki-link svg,.explore-button svg,.back-button svg{flex-shrink:0;display:block}
.discord-link{display:flex;align-items:center;gap:10px;width:fit-content;margin-top:16px;padding:11px 15px;border:1px solid #b4a5fa55;border-radius:5px;background:#6150a944;color:#d5cafa;font-size:13px;min-height:44px;transition:background .2s}
.discord-link:hover{background:#7663c36b}
.poi-pin img{border:0;box-shadow:none;border-radius:4px}
.poi-pin:hover img{border:0}
.poi-pin::before{display:none}
.poi-pin::after{background:var(--location-color,#88a49a);width:5px;height:5px;left:calc(50% - 2.5px);box-shadow:none}
.layer-controls{position:absolute;z-index:24;right:clamp(18px,4vw,61px);bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));display:flex;gap:4px;padding:3px;border:1px solid #ffffff18;border-radius:7px;background:#0a1419b8;backdrop-filter:blur(12px)}
.layer-controls button{display:flex;align-items:center;gap:9px;min-height:40px;padding:0 12px;border:0;border-radius:4px;color:#d0dcd5;background:transparent;font-size:11px;transition:color .2s,background .2s}
.layer-controls button:hover{background:#ffffff0c}
.toggle-indicator{width:6px;height:6px;border-radius:50%;background:#76ae96;transition:background .2s}
.layer-controls button[aria-pressed=false]{color:#81918a}
.layer-controls button[aria-pressed=false] .toggle-indicator{background:#58635f}
.players-layer{transition:opacity .25s,visibility .25s}
.players-off .players-layer,.overlays-off .poi-layer{opacity:0;visibility:hidden;pointer-events:none}
.map-controls{bottom:85px}
@media(max-width:620px){.map-controls{bottom:85px}.explore-button{bottom:77px}.hero{top:46%}.discord-link{font-size:12px}.layer-controls{bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px))}}
@media(max-height:580px){.hero h1{font-size:clamp(28px,4.5vw,46px)}.hero p{margin-top:10px}.ip-button{margin-top:14px}.discord-link{margin-top:8px;padding:6px 12px;min-height:36px}.explore-button{left:25%;bottom:15px}.map-controls{bottom:76px}}

@media(max-width:620px){.topbar .population{display:inline-flex}.nav-right{gap:16px}}

/* Home photographs stay out of Explore; controls float freely on the map. */
.mode-explore .poi-layer{opacity:0;visibility:hidden;pointer-events:none}
.back-button,.back-button:hover,.map-controls,.map-controls button,.map-controls button:hover,.layer-controls,.layer-controls button,.layer-controls button:hover,.map-population{background:transparent;border:0;box-shadow:none;backdrop-filter:none;border-radius:0}
.back-button{padding:10px 0}
.map-population{padding:0}
.back-button:hover,.map-controls button:hover,.layer-controls button:hover{opacity:.65}
.layer-controls{padding:0;gap:8px}
.layer-controls button{padding:0 6px}
.map-controls{overflow:visible;gap:5px}
.toggle-indicator{width:16px;height:16px;border-radius:0;background:transparent;color:#92bca7}
.layer-controls button[aria-pressed=false] .toggle-indicator{background:transparent;color:#a1a9a4}
.toggle-off{display:none}
[aria-pressed=false] .toggle-off{display:block}
[aria-pressed=false] .toggle-on{display:none}
.ip-button{border-color:#ffffff16}
.ip-button:hover{border-color:#ffffff26}
.discord-link{border-color:#b4a5fa20}
.map-attribution{text-transform:none}
.trailer-placeholder{display:flex;align-items:center;gap:10px;width:fit-content;margin-top:12px;min-height:38px;padding:5px 15px;color:#c9c2c5;font-size:13px;cursor:default}
@media(max-height:580px){.trailer-placeholder{margin-top:4px;min-height:28px;font-size:12px}.hero{top:49%}.hero h1{font-size:clamp(27px,4vw,42px)}}

/* Trailer placeholder matches Discord's treatment in muted red. */
.trailer-placeholder{padding:11px 15px;min-height:44px;border:1px solid #df8c9520;border-radius:5px;background:#a9506044;color:#edc1c7}
@media(max-width:620px){.trailer-placeholder{font-size:12px}}
@media(max-height:580px){.trailer-placeholder{padding:6px 12px;min-height:36px}}

.discord-link,.trailer-placeholder{width:174px;min-height:44px;box-sizing:border-box;padding:11px 15px;gap:10px;font-size:13px}
.discord-link svg,.trailer-placeholder svg{width:21px;height:21px;flex:0 0 21px}
@media(max-width:620px){.discord-link,.trailer-placeholder{font-size:12px}}
@media(max-height:580px){.discord-link,.trailer-placeholder{padding:6px 12px;min-height:36px;font-size:12px}}
/* A fresh /map document opens in Explore, without a Home-layout flash. */
.map-entry .home-overlay{opacity:0;visibility:hidden;pointer-events:none;transition:none}
.map-entry .map-interface{opacity:1;visibility:visible;transition:none}
.map-entry .poi-layer{opacity:0;visibility:hidden}
.map-entry .globe-first-paint{left:50%;top:50%;width:min(94vh,100vw)}
@media(max-width:620px){.map-entry .globe-first-paint{width:min(86vh,140vw)}}
/* Native modal viewer: keep the whole screenshot visible, including on phones. */
dialog.location-card{position:fixed;inset:0;margin:auto;padding:0;width:min(1100px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);height:fit-content;color:#edf4ee;border:1px solid #ffffff18;border-radius:8px;box-shadow:0 24px 90px #0009;background:#0b1316;backdrop-filter:none;animation:card-appear .18s ease-out}
dialog.location-card::backdrop{background:#03080bd9;backdrop-filter:blur(6px)}
dialog.location-card img{display:block;width:100%;height:auto;max-height:calc(100dvh - 125px);object-fit:contain;background:#070d10}
dialog.location-card .location-body{padding:15px 20px}
dialog.location-card .close-button{display:grid;place-items:center;min-width:44px;min-height:44px;font-size:28px}
@media(max-width:620px){dialog.location-card{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}dialog.location-card .location-body{padding:10px 14px}dialog.location-card img{max-height:calc(100dvh - 110px)}}
/* Returning from the viewer should not frame the thumbnail in a white box. */
.poi-pin:focus-visible{outline:none}
.poi-pin:focus-visible::after{box-shadow:none;background:var(--sage)}

/* Keep map navigation free of rectangular focus frames. */
.back-button:focus{outline:none}
.back-button:focus-visible{text-decoration:underline;text-underline-offset:6px;text-decoration-color:#a9c8b2}

/* Land overlays share the globe projection; they do not replace or tint terrain textures. */
.claim-canvas,.claim-flags{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}
.country-flag{position:absolute;left:0;top:0;border:0;padding:0;background:transparent;pointer-events:auto;cursor:pointer;width:30px;height:20px;filter:none;backface-visibility:hidden;will-change:transform}
.country-flag svg{display:block;width:100%;height:100%;box-shadow:0 1px 3px #0006}
.claim-card{position:absolute;left:24px;top:84px;z-index:30;width:360px;max-width:calc(100vw - 48px);max-height:calc(100dvh - 150px);padding:26px;background:linear-gradient(145deg,rgba(15,25,27,.95),rgba(7,14,17,.94));color:var(--white);border:1px solid #f0faf014;border-radius:16px;box-shadow:0 24px 70px #0006;backdrop-filter:blur(22px);font-size:13px;line-height:1.5;overflow-wrap:anywhere;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;pointer-events:auto;scrollbar-width:thin;scrollbar-color:#b8d7c133 transparent;animation:claim-arrive .18s ease-out}
.claim-card[hidden]{display:none}
.claim-heading{margin-bottom:22px;padding-right:26px}.claim-eyebrow{display:flex;align-items:center;gap:8px;color:var(--sage);font-size:11px;letter-spacing:.12em;margin-bottom:7px}.claim-eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--claim-accent,var(--sage))}
.claim-card h2{font-size:30px;font-weight:450;letter-spacing:-.045em;line-height:1.13;margin:0}.claim-card h3{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.04em;margin:0 0 10px}.claim-card p{margin:0}
.claim-close{position:absolute;right:12px;top:12px;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#f8f8f480;font-size:25px;line-height:1;transition:color .15s}.claim-close:hover{color:var(--white)}.claim-close:focus-visible{outline:none;text-decoration:none;color:var(--sage)}
.claim-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;padding:17px 0 19px;margin-bottom:20px;border-block:1px solid #ffffff10}.claim-stats strong{display:block;font-size:26px;font-weight:450;line-height:1.2;letter-spacing:-.04em}.claim-stats span{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.claim-card .city-owner{display:flex;align-items:center;gap:13px;margin-bottom:18px}.claim-card .city-owner img{width:46px;height:56px;object-fit:contain;background:#ffffff05;border-radius:8px}.claim-card .city-owner strong{display:block;font-weight:500;font-size:14px}.claim-label{display:block;font-size:10px;color:var(--muted);margin-bottom:3px}
.claim-facts{margin:0 0 18px}.claim-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:6px 0}.claim-facts dt{font-size:11px;color:var(--muted);flex-shrink:0}.claim-facts dd{margin:0;text-align:right;font-size:12px}
.claim-section{margin-top:21px}.claim-people{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}.claim-people li{font-size:12px;background:#ffffff04;border:1px solid #ffffff0e;border-radius:5px;padding:4px 9px}.claim-empty{color:#f8f8f452;font-size:12px}
.claim-ranking{list-style:none;padding:0;margin:0}.claim-ranking li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:8px 0;border-bottom:1px solid #ffffff08;font-size:12px}.claim-rank{font-size:10px;font-variant-numeric:tabular-nums;color:#b8d7c17a}.claim-active-time{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.claim-card .claim-activity-note{margin-top:9px;font-size:10px;color:#f8f8f450}
.claim-nation-link{display:flex;align-items:center;gap:12px;width:100%;margin:3px 0 22px;padding:13px 0;background:transparent;border:0;border-block:1px solid #ffffff10;color:inherit;text-align:left}.claim-nation-link svg{width:36px;height:24px;flex-shrink:0;border-radius:3px;border:1px solid #ffffff16}.claim-nation-link strong{font-size:13px;font-weight:500}.claim-link-arrow{margin-left:auto;color:var(--muted)}.claim-nation-link:hover .claim-link-arrow{color:var(--white)}
.claim-nation-flag{display:flex;align-items:center;gap:14px;margin-bottom:20px}.claim-nation-flag svg{width:72px;height:48px;flex-shrink:0;border:1px solid #ffffff16;border-radius:4px;box-shadow:0 5px 18px #0002}.claim-nation-flag>span{font-size:11px;color:var(--muted)}
.claim-city-link{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;background:transparent;border:0;border-bottom:1px solid #ffffff0b;padding:10px 0;color:var(--white);text-align:left;font-size:12px}.claim-city-note{font-size:10px;color:var(--muted);flex-shrink:0}.claim-city-link:hover .claim-city-note{color:var(--sage)}
.claim-footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #ffffff10;margin-top:24px;padding-top:13px;font-size:10px;color:#f8f8f44d}
@keyframes claim-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:620px){.claim-card{left:12px;right:12px;top:auto;bottom:70px;width:auto;max-width:none;max-height:calc(100dvh - 150px);padding:23px;border-radius:14px}.claim-card h2{font-size:28px}.claim-close{width:44px;height:44px}.claim-dismiss-hint{display:none}}
@media(prefers-reduced-motion:reduce){.claim-card{animation:none}}

.country-flag span{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-size:11px;color:#e3eeee;white-space:nowrap;text-shadow:0 1px 3px #000}
.country-flag[hidden]{display:none}

/* Player markers and names stay above every geographic overlay, including flags. */
.claim-canvas{z-index:6}.claim-flags{z-index:7}.players-layer{z-index:8}
.player-name{text-transform:none}
body:not(.mode-explore) .country-flag{pointer-events:none;cursor:default}
/* Home flags are disabled for interaction, but keep the map's full colours. */
.country-flag:disabled{opacity:1;cursor:default}

.early-access-banner{margin-bottom:18px;color:#fff;font-size:13px;font-weight:500;letter-spacing:.04em;line-height:1.4}
@media(max-height:580px){.early-access-banner{margin-bottom:10px;font-size:11px}}