/* Wider than the default 880: the right column now holds the scoreboard.
   Scoped here on purpose - the alliance grid is bin-packed in JS against
   the 880. */
.info-popover--maps.info-popover--expanded{width:min(1028px,94vw);max-width:94vw;}

/* Live objective maps, one tier at a time: a self-hosted picture with the
   API drawn over it. ArenaNet publishes no WvW map tiles, so the terrain is
   the wiki's renders, whose printed sector borders are what the API polygons
   get fitted to - see MAP_IMAGE in js/maps.js. Sized 2700px on the long side,
   the most a 1x screen can show at MAX_ZOOM. */

.wvw-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.wvw-tab{
  position:relative;
  display:inline-flex;align-items:center;
  padding:5px 11px;font-size:.72rem;font-weight:700;cursor:pointer;
  color:#8d97a6;background:linear-gradient(180deg,#2b323d,#1b212a);
  border:none;border-radius:0;
  clip-path:polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.45);
  text-shadow:none;
}
/* Crossed swords on whichever map has the most kills since the last
   refresh. Left of 4px because the tab's clip-path bevels that corner. */
.wvw-tab-swords{
  position:absolute;left:4px;top:1px;
  display:block;flex-shrink:0;pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
.wvw-tab.is-hot{padding-left:22px;}
.wvw-tab:hover{color:#dbe3ec;}
.wvw-tab.is-active{
  color:#06222c;
  background:linear-gradient(180deg,#a3e2f6,#57b6d6);
}

/* The map scoreboard, laid out like the game's own Contested Areas panel.
   A fixed grid rather than a flow, so the four columns line up across the
   three rows and comparing sides is reading down one. See paintMapBoard. */
.wvw-board{
  /* Icon 22 + gap 5 + two digits at ~15: 42px of content, three to spare. */
  --board-cell:45px;
  /* max-width is for when the stage stacks narrow and the column stops
     being 350px. */
  width:auto;max-width:420px;
  display:flex;flex-direction:column;
  border:1px solid var(--border);border-top-color:rgba(255,255,255,.12);
  border-radius:8px;padding:5px 13px 6px;
  background:linear-gradient(180deg, rgba(26,32,41,.72), rgba(14,18,24,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.45);
}
.wvw-board-row{
  display:flex;align-items:center;gap:8px;
  font-size:.78rem;line-height:1.3;
}
/* A hairline, not a gap: it keeps a stack of three from reading as three
   loose strips. The game does the same. */
.wvw-board-row + .wvw-board-row{border-top:1px solid rgba(255,255,255,.055);}

/* A fixed basis, not flex:1. Growing to fill stranded the icons against
   the right edge, a popover away from the name they belong to. */
.wvw-board-team{
  flex:1 1 auto;min-width:0;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.wvw-board-row.own-red .wvw-board-team,
.wvw-board-row.own-red .wvw-board-ppt{color:#ff8080;}
.wvw-board-row.own-blue .wvw-board-team,
.wvw-board-row.own-blue .wvw-board-ppt{color:#8cb8ff;}
.wvw-board-row.own-green .wvw-board-team,
.wvw-board-row.own-green .wvw-board-ppt{color:#5fe89e;}

/* The header the game has, doing double duty as column labels. */
.wvw-board-head{
  font-size:.6rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#7e8899;padding-bottom:4px;
}
.wvw-board-head .wvw-board-counts{text-align:center;}
.wvw-board-head .wvw-board-team{font-weight:700;}

/* The column count comes from paintMapBoard; only the width is set here. */
.wvw-board-counts{display:grid;flex:0 0 auto;}
.wvw-board-cell{
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:3px 0;
  color:#c9d3e0;font-weight:700;font-variant-numeric:tabular-nums;
}
/* Two digits' worth of box, left-aligned, so the icon lands on the same
   pixel in all three rows and stays glued to its own count. */
.wvw-board-cell b{
  font-size:.84rem;font-weight:800;
  min-width:15px;text-align:left;
}
/* Kept rather than dropped, so the columns still line up - just faded
   almost out, which reads better than a bright zero. */
.wvw-board-cell.is-none{opacity:.24;}
.wvw-board-cell img{display:block;flex-shrink:0;}

.wvw-board-ppt{
  flex:0 0 40px;text-align:right;
  font-weight:800;font-size:.92rem;font-variant-numeric:tabular-nums;
  color:#f2f6fa;text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* Narrow: the team name goes first - the row colour and the icons already
   say whose it is. */
@media (max-width:620px){
  /* 43, not 41: the cell always holds its full 42px of content now. */
  .wvw-board{--board-cell:43px;}
  .wvw-board-team{flex:0 1 auto;max-width:34%;}
  .wvw-board-ppt{font-size:.84rem;}
}

/* The war-score bar the game prints across the top of the WvW map: three
   segments, each as wide as that side's share. Over the plot and never
   inside the SVG - the SVG is the camera, so anything in it would pan and
   zoom away with the ground. */
.wvw-scorebar{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  display:flex;gap:2px;
  width:min(42%, 250px);height:8px;
  pointer-events:none;
}
/* The smear: a black wash pinned to the top edge that bleeds far wider
   than the bar and dissolves into the terrain with no border at all. That
   is what lets the bar be this thin and still read over snow.

   A file rather than a gradient because its lower edge is torn, and
   radial-gradient can only draw a perfect ellipse. The mask is flat across
   the middle out to t=0.24 - which is also what guarantees full-height
   cover behind a bar that ends at t=0.185 - then falls almost straight to
   nothing at both tips, with no side ever taller than the middle. Its
   width against the bar, 2.71x, is measured off the game. */
.wvw-scorebar::before{
  content:'';position:absolute;z-index:0;
  left:50%;top:-9px;transform:translateX(-50%);
  width:271%;height:25px;
  background:url(../assets/scorebar-smear.webp) 50% 0 / 100% 100% no-repeat;
  pointer-events:none;
}
/* Positioned so it paints over ::before, which comes earlier. */
.wvw-scorebar-seg{
  position:relative;z-index:1;
  display:block;height:100%;min-width:0;border-radius:1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 3px rgba(0,0,0,.3);
}
/* The game's own three, sampled off a screenshot: that green is a lime,
   not the emerald the markers use. At 7px the bar is read by colour. */
.wvw-scorebar-seg.own-red{background:linear-gradient(180deg,#ff6a42,#d8301a);}
.wvw-scorebar-seg.own-blue{background:linear-gradient(180deg,#5cc8f7,#1287cc);}
.wvw-scorebar-seg.own-green{background:linear-gradient(180deg,#a3e055,#5aa622);}

.wvw-stage{display:flex;gap:12px;align-items:stretch;}
@media (max-width:760px){ .wvw-stage{flex-direction:column;} }

/* Scoreboard over detail panel, one column beside the map. The scoreboard
   is the rigid one of the two, so it sets the width. */
.wvw-side{
  display:flex;flex-direction:column;gap:10px;
  flex:0 0 378px;min-width:0;
}
@media (max-width:760px){ .wvw-side{flex:1 1 auto;} }

/* Stands in while a tab's outline is still coming, or did not come at all.
   The min-height stops the popover collapsing and jumping back. */
.wvw-stage-msg{
  flex:1 1 auto;margin:0;min-height:220px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  text-align:center;
}

.wvw-plot-wrap{
  position:relative;flex:1 1 auto;min-width:0;max-height:70vh;
  border:1px solid var(--border);border-top-color:rgba(255,255,255,.12);
  border-radius:10px;overflow:hidden;
  background:radial-gradient(circle at 50% 42%, #18202a, #0c0f14 78%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.5);
  cursor:grab;touch-action:none;
}
.wvw-plot-wrap.is-panning{cursor:grabbing;}
/* While a map has no owners yet. Ground, sectors and positions are all
   already right - only the colours are late - so this explains rather
   than apologises. */
.wvw-waiting{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:6px 10px;text-align:center;
  font-size:.68rem;font-style:italic;color:#8d97a6;
  background:linear-gradient(180deg, rgba(12,15,20,0), rgba(12,15,20,.82) 55%);
  pointer-events:none;
}
.wvw-plot{display:block;width:100%;height:auto;max-height:70vh;}

/* Each sector tinted by whoever holds the objective inside it. Fill and
   border are separate passes (see buildMapStage), so these are fills. */
.wvw-sector{stroke:none;}
.wvw-sector.own-red{fill:rgba(210,70,72,.2);}
.wvw-sector.own-blue{fill:rgba(70,110,215,.2);}
.wvw-sector.own-green{fill:rgba(50,170,110,.2);}
.wvw-sector.own-neutral{fill:rgba(120,135,155,.07);}
/* Over real terrain the tint is a wash on top of it, so it comes down. */
.over-terrain .wvw-sector.own-red{fill:rgba(225,60,62,.28);}
.over-terrain .wvw-sector.own-blue{fill:rgba(60,105,235,.28);}
.over-terrain .wvw-sector.own-green{fill:rgba(40,185,110,.28);}
.over-terrain .wvw-sector.own-neutral{fill:rgba(140,155,175,.05);}

/* Borders, in their own layers on top of every fill. The dark pass is not
   decoration: the wiki renders have pale sector borders printed in, and a
   thin coloured stroke over one leaves white showing on both sides. Widths
   are set per map on the group - see MAP_IMAGE.edge. */
.wvw-edges-under polygon{
  fill:none;stroke:rgba(0,0,0,.8);stroke-linejoin:round;
}
.wvw-edges polygon{fill:none;stroke-linejoin:round;}
.wvw-edges .own-red{stroke:#ff8080;}
.wvw-edges .own-blue{stroke:#8cb8ff;}
.wvw-edges .own-green{stroke:#5fe89e;}
.wvw-edges .own-neutral{stroke:rgba(198,212,232,.4);}

/* The waypoint. Deliberately quieter than the rest of the marker: it is
   standing information, not a call to action, and at full strength a cyan
   diamond beside every keep would be the loudest thing here. */
.wvw-wp{pointer-events:auto;opacity:.95;}
.wvw-wp.is-copyable{cursor:pointer;}
.wvw-wp.is-copyable:hover image{filter:drop-shadow(0 0 4px #7fe8ff) drop-shadow(0 1px 2px rgba(0,0,0,.9));}
.wvw-wp-note{
  fill:#9fe8ff;font-weight:800;pointer-events:none;
  paint-order:stroke;stroke:rgba(0,0,0,.85);stroke-width:3;
}
.wvw-wp image{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 3px rgba(0,0,0,.6));
}

/* Righteous Indignation: crossed swords and a clock under a marker that
   just changed hands, for the five minutes its guards cannot be hurt. */
/* Hoverable, so the clock can say what it is. The marker's own hit area
   was cut back to the icon's disc to make room - see the note on .hit. */
.wvw-ri{pointer-events:auto;}
.wvw-ri rect{fill:rgba(8,11,15,.88);stroke:rgba(0,0,0,.55);stroke-width:1.5;}
.wvw-ri text{
  fill:#ff973f;font-weight:800;font-variant-numeric:tabular-nums;
  paint-order:stroke;stroke:rgba(0,0,0,.7);stroke-width:2.5;
}
.wvw-ri image{filter:drop-shadow(0 1px 1px rgba(0,0,0,.8));}

.wvw-marker{cursor:pointer;}
/* The hit target, and only as big as what lights up when picked: wider,
   and it would cover the badges hanging off the marker. */
.wvw-marker .hit{fill:transparent;}
/* The icon already carries the team colour, so there is nothing to draw
   behind it - only a shadow, so it lifts off the terrain. */
.wvw-marker .pip{pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.85));}
/* The claim badge: the game's gold shield. Gold is what carries "someone
   holds this" from across the map. */
.wvw-claim{pointer-events:none;}
.wvw-claim .claim-rim{
  fill:#f6d475;stroke:rgba(20,14,5,.92);stroke-width:3;
}
/* Near-black, because the emblem's backdrop layer is semi-transparent -
   alpha 112 of 255 - so the ground decides its whole tone, and on gold or
   on bone every backdrop came out dusty. The rim stays gold: that is the
   part that says claimed. */
.wvw-claim .claim-field{fill:#181d27;stroke:none;}
.wvw-claim .claim-emblem{opacity:.96;}
/* Picked: the disc itself lights up cyan. Brighter than the tab's blue,
   which only has a flat panel to survive - here the light is spread over
   snow and rock. A glow rather than a ring, because drop-shadow works off
   the icon's own alpha and leaves the tier shields whole. The black shadow
   stays first in the chain: it is what lifts the marker off the terrain.
   Focus lights the same way, since the UA's own ring would trace the square
   edge of the image file. */
.wvw-marker:focus{outline:none;}
.wvw-marker:focus-visible{outline:none;}
.wvw-marker.is-selected .pip,
.wvw-marker:focus-visible .pip{
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.85))
         drop-shadow(0 0 1px #e6fdff)
         drop-shadow(0 0 3px #22e8ff)
         drop-shadow(0 0 3px #22e8ff)
         drop-shadow(0 0 7px #00d5ff)
         drop-shadow(0 0 13px #00c4ff);
}

/* Upgrade tier: one silver shield per tier over the marker, none at tier 0
   - plain has to mean something. Silver at every tier, the way the game
   draws them: what counts is how many there are. The dark stroke is
   load-bearing, since these sit straight on the terrain. Lengths are map
   units, like the marker radii. */
.wvw-tierpips path{
  fill:#e9eef5;stroke:rgba(0,0,0,.85);stroke-width:3;
}


.wvw-zoom{
  position:absolute;right:8px;bottom:8px;display:flex;gap:4px;
}
.wvw-zoom button{
  width:26px;height:26px;padding:0;font-size:1rem;line-height:1;
  border-radius:6px;
}

/* The detail panel: everything the API knows about one objective. */
.wvw-detail{
  flex:1 1 auto;min-width:0;min-height:0;
  border:1px solid var(--border);border-top-color:rgba(255,255,255,.12);
  border-radius:10px;padding:11px 12px;
  background:linear-gradient(180deg, rgba(26,32,41,.72), rgba(14,18,24,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.45);
  font-size:.76rem;text-shadow:0 1px 2px rgba(0,0,0,.6);
  overflow-y:auto;max-height:62vh;
}
@media (max-width:760px){ .wvw-detail{flex:1 1 auto;max-height:none;} }
.wvw-detail-empty{color:#8d97a6;margin:0;}
.wvw-detail-name{
  font-size:.95rem;font-weight:700;color:#f2f6fa;
  display:flex;align-items:center;gap:7px;margin-bottom:2px;
}
.wvw-detail-type{
  display:flex;align-items:center;gap:6px;
  font-size:.72rem;color:#8d97a6;margin-bottom:10px;
}
.wvw-detail-type img{display:block;flex-shrink:0;}

/* A real two-column grid. Independent flex rows each sized their own middle
   gap, so nothing lined up with anything; display:contents hands each dt and
   dd straight to this grid instead. */
.wvw-detail dl{
  margin:0;display:grid;grid-template-columns:auto 1fr;
  gap:0 12px;align-items:center;
}
.wvw-row{display:contents;}
.wvw-row dt{color:#8d97a6;padding:2px 0;}
.wvw-row dd{
  margin:0;color:#f2f6fa;font-weight:700;text-align:right;padding:2px 0;
  min-width:0;overflow-wrap:anywhere;
  /* The same digits the scoreboard uses, so the values read straight
     down a column. */
  font-variant-numeric:tabular-nums;
}
/* Whoever holds it, in their own colour - the first thing the eye looks
   for, and the panel had it in the same white as everything else. */
.wvw-row dd.wvw-owner.own-red{color:#ff8080;}
.wvw-row dd.wvw-owner.own-blue{color:#8cb8ff;}
.wvw-row dd.wvw-owner.own-green{color:#5fe89e;}

/* One treatment for a section label, used by both. The panel had grown two,
   saying the same kind of thing at three sizes, weights and colours. A
   heading also has to outrank its rows, and the old one was dimmer as well
   as smaller, at 4.4:1 under the 4.5 AA wants. Brightening alone walks into
   the row labels, so the rule under the label is what separates the sections.
   The rows themselves stay unruled: a line per row buried them. */
.wvw-group,
.wvw-upgrade-tier{
  margin:13px 0 5px;padding-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,.09);
  font-size:.62rem;font-weight:800;color:#a3adbb;
  text-transform:uppercase;letter-spacing:.09em;
}
.wvw-group{grid-column:1 / -1;}
.wvw-group:first-child{margin-top:0;}

/* Yaks to the next tier, with a bar under it. The dd is right-aligned text,
   so the cell stacks rather than sitting beside - no width to spare here. */
.wvw-yakcell{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.wvw-yaknum{display:flex;align-items:center;gap:5px;}
.wvw-yaknum img{display:block;flex-shrink:0;}
.wvw-yakcell b{font-weight:700;font-variant-numeric:tabular-nums;}
.wvw-yakbar{
  display:block;width:64px;height:4px;border-radius:2px;
  background:rgba(0,0,0,.5);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.6);
  overflow:hidden;
}
/* The dolyak's own orange, so the icon and the bar read as one
   measurement instead of two unrelated things. */
.wvw-yakbar i{
  display:block;height:100%;
  background:linear-gradient(180deg,#ffb163,#d9701d);
}

/* The same shields the map draws, in the same silver, so there is one
   thing to learn rather than two. */
.wvw-tierchip{display:inline-flex;gap:2px;flex-shrink:0;}
.wvw-tierchip i{
  width:11px;height:13px;display:block;background:#e9eef5;
  clip-path:polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
  filter:drop-shadow(0 0 1px rgba(0,0,0,.95));
}

.wvw-upgrades{margin:0;padding:0;list-style:none;}
.wvw-upgrades li{
  display:flex;align-items:center;gap:7px;
  padding:3px 0;color:#cdd6e2;font-size:.72rem;
}
.wvw-upgrades img{
  width:20px;height:20px;flex-shrink:0;border-radius:3px;
  box-shadow:0 1px 2px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
/* Side by side rather than stacked, which left the right half of the panel
   empty under a claimed keep. auto-fit needs no breakpoint: two columns
   while both fit, one when they do not, and a list with no counterpart
   spans the full width. */
.wvw-upgrade-cols{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0 14px;
}
.wvw-claimed{color:#f0d78c;font-weight:700;}
/* The guild's emblem, in its own colours, drawn the way the marker draws
   it. */
.wvw-emblem{
  width:21px;height:21px;vertical-align:-5px;margin-right:5px;
  display:inline-block;flex-shrink:0;
}