html, body { min-height:100%; }
body.maps-page { height:100vh; overflow:hidden; background:#050606; }

/* Exact desktop art layer from the approved Tribe Map design. The controls
   below are real links/buttons, so the reference-quality art remains usable. */
.reference-stage { display:none; }
@media (min-width:1051px) {
  body.maps-page { background:#020303; }
  body.maps-page > .nav,
  body.maps-page > .maps-hero,
  body.maps-page > .map-workspace { display:none; }
  .reference-stage {
    position:fixed; inset:0; z-index:20; display:block;
    background:#020303 url('../images/tribe-map-background.jpg') center center / 100% 100% no-repeat;
  }
  .reference-hotspot { position:absolute; display:block; border:0; padding:0; background:transparent; color:transparent; cursor:pointer; }
  .reference-hotspot:focus-visible { outline:2px solid #f0802c; outline-offset:3px; box-shadow:0 0 18px rgba(240,128,44,.75); }
  .reference-nav { top:0; height:5.4%; }
  .reference-nav.home{left:41.8%;width:4.3%}.reference-nav.tribes{left:46.7%;width:7.1%}.reference-nav.leaderboard{left:54.1%;width:8.4%}.reference-nav.map{left:62.5%;width:6.7%}.reference-nav.caves{left:69.2%;width:7.4%}.reference-nav.bounty{left:76.7%;width:7.3%}.reference-nav.faq{left:84%;width:3.2%}.reference-nav.admin{left:87.1%;width:4.1%}.reference-nav.shop{left:91.2%;width:3.7%}.reference-nav.discord{left:94.8%;width:5.2%}
  .reference-filter { top:20.2%; height:4.6%; }
  .reference-filter.all{left:30.5%;width:12.8%}.reference-filter.war{left:43.6%;width:9.8%}.reference-filter.peace{left:53.8%;width:10.5%}
  .reference-world { width:11.4%; height:17.8%; border-radius:50%; transition:opacity .18s,filter .18s; }
  .reference-world.is-filtered-out { opacity:.12; filter:grayscale(1); pointer-events:none; }
  .reference-world.island{left:20.1%;top:25.5%}.reference-world.scorched{left:35.1%;top:24.5%}.reference-world.aberration{left:50.0%;top:25.2%}
  .reference-world.ragnarok{left:8.6%;top:39.2%}.reference-world.genesis{left:34.6%;top:41.4%}.reference-world.lostcolony{left:59.5%;top:40.2%}
  .reference-world.astraeos{left:15.0%;top:58.0%}.reference-world.center{left:34.6%;top:58.5%}.reference-world.extinction{left:52.0%;top:56.2%}
  .reference-detail { left:75.9%; top:65.0%; width:21.5%; height:5.2%; }
  .reference-brand { left:1.2%; top:0; width:13%; height:5.3%; }
  .reference-filter-flash { position:absolute; pointer-events:none; border:1px solid #ed7b2b; box-shadow:0 0 18px rgba(237,123,43,.5); opacity:0; transition:opacity .18s; }
  .reference-filter-flash.show { opacity:1; }
}

.maps-hero {
  position:relative; height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; isolation:isolate; border-bottom:1px solid #75451f;
  background:#020303 url('../images/tribe-map-banner.jpg') center 51% / cover no-repeat;
}
.maps-hero::before,.maps-hero::after { display:none; }
.maps-hero-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(3,6,7,.56) 34%,rgba(3,6,7,.56) 66%,rgba(0,0,0,.08)),linear-gradient(to bottom,rgba(0,0,0,.2),transparent 42%,rgba(0,0,0,.24)); }
.maps-title { font-family:"Cinzel",Georgia,serif; font-size:clamp(44px,4.65vw,68px); font-weight:400; line-height:.96; letter-spacing:.115em; color:#e9dcc5; -webkit-text-stroke:.35px rgba(96,57,30,.75); text-shadow:0 2px 0 #442b1a,0 4px 15px #000,0 0 2px rgba(255,241,214,.75); text-transform:uppercase; }
.maps-subtitle { margin-top:10px; font-family:"Cinzel",Georgia,serif; color:#c6a979; font-size:14px; font-weight:400; letter-spacing:.018em; text-shadow:0 2px 8px #000; }

.map-workspace { height:calc(100vh - 48px - 132px); min-height:0; padding:7px 18px 10px; display:flex; flex-direction:column; gap:7px; }
.map-frame { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 345px; gap:8px; }
.map-board { position:relative; min-height:0; border:1px solid #6b421f; background:#040607; box-shadow:inset 0 0 0 2px #0c0c0b,inset 0 0 55px rgba(26,76,105,.12); overflow:hidden; }
.map-board::before { content:""; position:absolute; inset:7px; z-index:8; pointer-events:none; border:1px solid rgba(125,78,34,.35); }
.map-board .scene-wrap { height:100%; min-height:0; background:radial-gradient(circle at 50% 45%,#071017 0%,#030608 58%,#020303 100%); }
.map-board .star {
  animation:map-star-flicker var(--dur) ease-in-out infinite var(--delay),map-star-drift var(--orbit-dur) ease-in-out infinite var(--orbit-delay);
  will-change:transform,opacity;
}
@keyframes map-star-flicker {
  0%,100% { opacity:var(--min-op); filter:brightness(.9); }
  46% { opacity:var(--max-op); filter:brightness(1.06); }
  63% { opacity:var(--mid-op); filter:brightness(.96); }
}
@keyframes map-star-drift {
  0%,100% { transform:translate(0,0); }
  25% { transform:translate(var(--drift-x),var(--drift-y-neg)); }
  50% { transform:translate(var(--drift-x-half),var(--drift-y)); }
  75% { transform:translate(var(--drift-x-neg),var(--drift-y-half)); }
}
@media (prefers-reduced-motion:reduce) {
  .map-board .star { animation:none; opacity:.3; }
}
.map-board .scene-heading,.map-board .scene-hint { display:none; }
.map-board .planet { bottom:-74vw; width:154vw; height:154vw; opacity:.82; }

.cluster-status { position:absolute; top:13px; left:13px; z-index:15; min-width:245px; border:1px solid #3f2b1b; background:rgba(6,8,9,.88); box-shadow:0 8px 20px rgba(0,0,0,.35); }
.cluster-status-title { padding:8px 13px 7px; font-family:var(--font-display); color:#a98757; font-size:10px; letter-spacing:.13em; text-transform:uppercase; border-bottom:1px solid #30251a; }
.cluster-status-values { display:flex; align-items:center; padding:10px 13px; gap:16px; }
.cluster-stat { display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:12px; color:#caa472; white-space:nowrap; }
.cluster-stat + .cluster-stat { padding-left:16px; border-left:1px solid #3d2d1e; }
.cluster-stat i { font-size:19px; }
.cluster-stat.war i { color:#ef5b39; }.cluster-stat.peace i { color:#78ad40; }

/* Battle Record — same box treatment as Cluster Status, mirrored to the
   top-right corner so it's just as visible. */
.war-stats-box { left:auto; right:13px; }
.warlog-stat { display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:12px; color:#caa472; white-space:nowrap; }
.warlog-stat + .warlog-stat { padding-left:16px; border-left:1px solid #3d2d1e; }
.warlog-stat i { font-size:19px; }
.warlog-stat.fought i { color:#e5a03c; }.warlog-stat.wiped i { color:#ef5b39; }
@media (max-width:768px) {
  .war-stats-box { left:8px; right:8px; top:82px; min-width:0; }
}

.map-filters { position:absolute; top:13px; left:50%; transform:translateX(-50%); z-index:15; display:flex; gap:10px; }
.map-filter { height:38px; min-width:130px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid #74431e; background:rgba(7,9,10,.9); color:#c8ad7d; font-family:var(--font-display); font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:.18s; }
.map-filter:hover,.map-filter.active { color:#f0ddba; border-color:#dc762a; background:linear-gradient(#251509,#0b0b0a); box-shadow:0 0 18px rgba(224,112,35,.11); }
.map-filter i { font-size:19px; }.map-filter.peace i{color:#78ad40}.map-filter.war i{color:#e75d3c}.map-filter.alpha i{color:#d8a846}
.ark.is-filtered-out { opacity:.08 !important; filter:grayscale(1) !important; pointer-events:none; }

.map-board .ark { z-index:3; }
.map-board .ark.selected .ark-ring { border-color:#ed7b2b; box-shadow:0 0 30px rgba(237,123,43,.65),inset 0 0 20px rgba(237,123,43,.22); }
.map-board .ark-label { font-size:16px; }.map-board .ark-status { font-size:11px; }

.world-sidebar { min-height:0; display:flex; flex-direction:column; gap:7px; }
.world-panel,.activity-panel { border:1px solid #6b421f; background:linear-gradient(160deg,#090b0b,#050707); box-shadow:inset 0 0 0 2px #0d0d0c,inset 0 0 34px rgba(26,76,105,.08); }
.world-panel { flex:1 1 auto; min-height:0; padding:18px 14px 13px; display:flex; flex-direction:column; align-items:center; }
.selected-name { font-family:var(--font-display); font-size:24px; letter-spacing:.07em; color:#e7c99a; text-align:center; text-transform:uppercase; }
.selected-status { margin-top:5px; color:#ef6547; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.selected-status.peace { color:#78ad40; }
.selected-world-disc { position:relative; width:min(172px,48%); aspect-ratio:1; margin:15px auto; border-radius:50%; padding:9px; border:2px solid #9b5b27; box-shadow:0 0 0 5px #0b0b0a,0 0 0 6px #6f431f,0 0 26px rgba(224,112,35,.18); }
.selected-world-disc img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.selected-world-disc::after { content:""; position:absolute; inset:7px; border-radius:50%; background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.28),transparent 42%); }
.world-metrics { width:100%; margin-top:auto; border:1px solid #3b2a1b; }
.world-metric { min-height:38px; display:flex; align-items:center; padding:7px 12px; border-bottom:1px solid #33271c; color:#a78f6d; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.world-metric:last-child{border-bottom:0}.world-metric i{width:24px;color:#e1ae6b;font-size:18px}.world-metric strong{margin-left:auto;color:#e5c288;font-family:var(--font-display);font-size:13px;text-align:right}
.world-metric.open-caves,.world-metric.open-caves i,.world-metric.open-caves strong { color:#79b64b; }
.world-metric.controlled-caves,.world-metric.controlled-caves i,.world-metric.controlled-caves strong { color:#db5b45; }
.world-detail-btn { width:100%; min-height:42px; margin-top:10px; border:1px solid #b15d22; background:linear-gradient(#7d370d,#3e1c09); color:#f1d5ac; font-family:var(--font-display); font-size:12px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; box-shadow:inset 0 0 18px rgba(255,135,45,.12); }
.world-detail-btn:hover{filter:brightness(1.18)}

.activity-panel { flex:0 0 157px; padding:11px; overflow:hidden; }
.activity-title { display:flex; align-items:center; gap:7px; padding-bottom:8px; border-bottom:1px solid #33271c; color:#a98757; font-family:var(--font-display); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.activity-title i { color:#3e91c8; font-size:17px; }
.activity-list { display:flex; flex-direction:column; }
.activity-item { min-height:52px; padding:8px 4px; display:flex; gap:9px; align-items:center; border-bottom:1px solid #25211a; }
.activity-icon { width:32px;height:32px;display:grid;place-items:center;border:1px solid #56301c;color:#e75d3c;font-size:18px;background:#100907;flex:0 0 auto; }
.activity-icon.defense { border-color:#174a6a;color:#3998d5;background:#061019; }
.activity-copy { min-width:0;font-size:10px;color:#826e52;line-height:1.35; }.activity-copy strong{display:block;color:#d47545;font-size:11px;font-weight:500}.activity-copy strong.defense{color:#3e91c8}.activity-time{margin-left:auto;color:#66533d;font-size:9px;white-space:nowrap}

.map-instruction { flex:0 0 56px; display:flex; align-items:center; gap:13px; padding:9px 18px; border:1px solid #6b421f; background:linear-gradient(90deg,#080a0a,#060808); box-shadow:inset 0 0 0 2px #0d0d0c; }
.map-instruction i { color:#4a9bcf;font-size:24px }.instruction-title{font-family:var(--font-display);font-size:12px;color:#d9b77f;letter-spacing:.08em;text-transform:uppercase}.instruction-sub{font-size:10px;color:#74634d;margin-top:3px}

@media (max-width:1050px){
  body.maps-page{height:auto;overflow:auto}.map-workspace{height:auto}.map-frame{grid-template-columns:1fr}.map-board{height:680px}.world-sidebar{display:grid;grid-template-columns:1fr 1fr}.activity-panel{height:auto}.world-panel{min-height:580px}
}
@media (max-width:768px){
  .maps-hero{margin-top:91px;height:125px}.maps-title{font-size:35px}.maps-subtitle{font-size:11px}.map-workspace{padding:8px}.map-board{height:auto;min-height:0;padding-top:190px}.map-board .scene-wrap{height:auto}.cluster-status{left:8px;right:8px;top:8px;min-width:0}.map-filters{top:146px;left:8px;right:8px;transform:none;gap:5px}.map-filter{min-width:0;flex:1;padding:0 6px;font-size:9px}.world-sidebar{display:block}.world-panel{min-height:560px;margin-top:8px}.activity-panel{margin-top:8px}.map-instruction{margin-top:0}.map-board .ark-grid-mobile{padding:14px}.map-board .planet{display:none}
}

/* Layered interactive version. Each world is a separate transparent sprite,
   while the star field, planet, frames, controls, and data panels remain live. */
.world-platform-sprite {
  position:relative; width:224px; height:224px; flex:0 0 auto;
  background-image:url('../images/world-platforms-sprite.png');
  background-repeat:no-repeat; background-size:300% 300%;
  filter:drop-shadow(0 12px 15px rgba(0,0,0,.85));
  transition:filter .2s,transform .2s;
}
.sprite-island{background-position:0 0}.sprite-scorched{background-position:50% 0}.sprite-aberration{background-position:100% 0}
.sprite-ragnarok{background-position:0 50%}.sprite-genesis{background-position:50% 50%}.sprite-lostcolony{background-position:100% 50%}
.sprite-astraeos{background-position:0 100%}.sprite-center{background-position:50% 100%}.sprite-extinction{background-position:100% 100%}
.ark:hover .world-platform-sprite,.ark.selected .world-platform-sprite { filter:drop-shadow(0 0 20px rgba(232,117,36,.52)) drop-shadow(0 14px 16px rgba(0,0,0,.9)); transform:translateY(-3px); }
.ark .ark-caption { margin-top:-48px; position:relative; z-index:4; }
.ark .ark-label { padding:2px 8px; background:rgba(5,6,6,.72); border-bottom:1px solid rgba(121,74,31,.45); }
.ark .ark-status { width:max-content; margin:3px auto 0; padding:2px 7px; background:rgba(6,10,5,.86); border:1px solid rgba(101,151,48,.42); border-radius:2px; }
.ark .ark-status.at-war { background:rgba(18,6,3,.9); border-color:rgba(222,81,48,.55); }
.ark .ark-status.alpha-name,.ark-card .ark-status.alpha-name { max-width:148px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e5bc67; background:rgba(20,14,4,.92); border-color:rgba(216,168,70,.62); box-shadow:0 0 10px rgba(216,168,70,.1); }
.world-platform-sprite .dome-explosion { z-index:5; }

@media (min-width:1051px) {
  .reference-stage { display:none !important; }
  body.maps-page > .nav { display:flex; }
  body.maps-page > .maps-hero { display:flex; }
  body.maps-page > .map-workspace { display:flex; }
  .map-board .scene { inset:38px 0 0; }
  .map-board .planet { bottom:-70vw; opacity:.9; box-shadow:0 0 160px 44px rgba(216,126,52,.24); }
  .map-board .scene-wrap {
    background:#020506 url('../images/tribe-map-space-background.jpg') center bottom / cover no-repeat;
  }
  .map-board .planet { display:none; }
  .map-board { background-color:#020506; }
  .map-board::after {
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.17;
    background-image:repeating-linear-gradient(112deg,transparent 0 34px,rgba(76,119,138,.08) 35px,transparent 36px),radial-gradient(circle at center,transparent 0 42%,rgba(0,0,0,.72) 100%);
    mix-blend-mode:screen;
  }
  .cluster-status,.map-filters{z-index:18}.scene-wrap{z-index:2}
}

.route-lines { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }
.route-lines path { fill:none; stroke:rgba(207,124,53,.52); stroke-width:1.35; stroke-dasharray:3 5; filter:drop-shadow(0 0 2px rgba(218,129,49,.24)); }
.route-lines circle { fill:#d28742; opacity:.68; filter:drop-shadow(0 0 4px rgba(223,135,57,.55)); }

@media (max-width:1050px) {
  .reference-stage{display:none!important}
  .ark-card .world-platform-sprite{width:min(260px,100%);height:auto;aspect-ratio:1}
  .ark-card-label{margin-top:-34px!important;position:relative;z-index:4;padding:2px 7px;background:rgba(5,6,6,.72)}
}

@media (max-width:768px) {
  .map-board{padding-top:238px}
  .map-filters{flex-wrap:wrap}
  .map-filter{flex:1 1 calc(50% - 5px)}
}