/* Brawl Stars Atlas
   Dark by default: the strength ramp runs from a dark red to a bright green,
   so weak brawlers sink into the page and strong ones glow. That only works
   against a dark plane. Light mode re-steps the ramp rather than flipping it. */

:root{
  --bg:#0a0c0f; --plane:#0e1116;
  --surface:#151920; --surface-2:#1c212a; --surface-3:#242a35;
  --line:#242a34; --line-soft:#1b202839;
  --ink:#f3f6fa; --ink-2:#a9b4c2; --muted:#6c7889;
  --accent:#4d9dff; --accent-soft:#132339;
  --ally:#4d9dff; --enemy:#ff6f60;
  --good:#5af88a; --bad:#e5534b;
  --radius:14px;
  --maxw:1120px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.6 var(--font); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent)}
h1,h2,h3,h4{margin:0; letter-spacing:-.02em; font-weight:650}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:20px}
.note{color:var(--muted); font-size:.82rem; margin:.9rem 0 0; line-height:1.55}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2.6rem,7vw,5rem) clamp(1.8rem,4vw,2.8rem)}
.hero-title{display:flex; align-items:center; gap:clamp(.7rem,2vw,1.2rem)}
h1{font-size:clamp(2.6rem,9vw,4.6rem); line-height:1; letter-spacing:-.04em; font-weight:750}
.lede{
  margin:1.1rem 0 0; max-width:52ch; color:var(--ink-2);
  font-size:clamp(1rem,2.2vw,1.12rem); line-height:1.6;
}

/* ---------- the globe ---------- */
.globe{
  width:clamp(78px,17vw,152px); height:clamp(78px,17vw,152px);
  flex:none; overflow:visible; cursor:crosshair; outline:none;
}
.point-globe-dot{fill:var(--ink)}
.point-globe-line{
  stroke:var(--accent); stroke-width:.72; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
}
.point-globe-line.is-drawing{animation:point-line-draw 1.45s ease-in-out forwards}
.point-globe:focus-visible{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 65%,transparent))}
@keyframes point-line-draw{
  0%{stroke-dashoffset:1;opacity:0}
  22%,58%{opacity:.85}
  72%{stroke-dashoffset:0}
  100%{stroke-dashoffset:0;opacity:0}
}

/* ---------- global context bar ---------- */
.context{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-block:1px solid var(--line);
}
.context-inner{display:flex; gap:1.4rem; align-items:center; padding-block:.7rem; flex-wrap:wrap}
.field{display:flex; align-items:center; gap:.6rem; min-width:0}
.field-k{
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.field-k em{font-style:normal; color:var(--ink-2); letter-spacing:.04em; text-transform:none; font-weight:600}
.field-skill{flex:1 1 260px; min-width:200px}
.field-skill input[type=range]{flex:1 1 150px}
.rank-readout{
  display:flex; align-items:center; gap:.35rem; flex:0 1 145px; min-width:116px; max-width:145px;
  padding:.18rem .4rem .18rem .25rem; border:1px solid var(--line);
  border-radius:8px; background:var(--surface-2); color:var(--ink); text-align:left;
  transition:background .13s,border-color .13s;
}
.rank-readout:hover,.rank-readout:focus-visible{background:var(--surface-3); border-color:var(--accent)}
.rank-readout canvas{width:26px; height:26px; flex:none}
.rank-readout>span{display:flex; align-items:baseline; gap:.25rem; min-width:0; overflow:hidden; line-height:1}
.rank-readout b{font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rank-readout em{font-size:.67rem; font-style:normal; font-weight:750; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
select,input[type="search"]{
  background:var(--surface-2); color:var(--ink); border:1px solid var(--line);
  border-radius:9px; padding:.42rem .7rem; font:inherit; font-size:.9rem; min-width:0;
}
select:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

input[type=range]{
  -webkit-appearance:none; appearance:none; background:transparent;
  flex:1; min-width:120px; height:20px; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:99px; background:var(--surface-3)}
input[type=range]::-moz-range-track{height:4px; border-radius:99px; background:var(--surface-3)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; margin-top:-6px; border-radius:50%;
  background:var(--ink); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--line);
}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--ink);
  border:3px solid var(--bg); box-shadow:0 0 0 1px var(--line);
}

button{font:inherit; cursor:pointer}
.ghost{
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line);
  border-radius:9px; padding:.42rem .8rem; font-size:.84rem; font-weight:550;
  transition:background .13s,color .13s,border-color .13s;
}
.ghost:hover{background:var(--surface-3); color:var(--ink)}
.ghost.sm{padding:.3rem .65rem; font-size:.76rem}
.ghost.wide{width:100%; margin-top:.9rem; border-radius:10px}

/* ---------- summary tiles ---------- */
.tiles{
  display:grid; gap:.7rem; margin-top:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.05rem 1.1rem;
}
.tile .k{
  font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.tile .v{font-size:1.7rem; font-weight:700; line-height:1.15; margin-top:.3rem; letter-spacing:-.03em}
.tile .s{font-size:.78rem; color:var(--muted); margin-top:.1rem}

/* ---------- section scaffolding ---------- */
.sect{margin-top:clamp(3.2rem,7vw,5rem)}
.sect-tight{margin-top:clamp(1.8rem,4vw,2.6rem)}
h2{font-size:clamp(1.5rem,3.6vw,2rem); letter-spacing:-.035em}
.sect-head{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem}
.sect-head .seg{margin-left:auto}
.sect-sub{margin:-.45rem 0 1.3rem; color:var(--ink-2); max-width:62ch; font-size:.94rem}
.sect-sub a{font-weight:600; text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(1rem,2.5vw,1.5rem);
}
.card-tight{padding:clamp(.8rem,1.8vw,1.1rem)}

/* ---------- info buttons and popovers ----------
   Native popover: the browser already knows how to light-dismiss one and how to
   keep it on the top layer above a sticky bar. Placement is the one part it
   cannot do portably yet, so app.js positions it against its button. */
.info{
  width:19px; height:19px; flex:none; border-radius:50%; padding:0;
  display:grid; place-items:center; line-height:1;
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
  font-size:.68rem; font-weight:700; font-style:italic; font-family:Georgia,serif;
  transition:background .13s,color .13s,border-color .13s;
}
.info:hover{background:var(--surface-3); color:var(--ink); border-color:var(--accent)}
.pop{
  position:fixed; margin:0; inset:auto;
  width:min(340px,calc(100vw - 24px)); max-height:min(70vh,520px); overflow-y:auto;
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem;
  box-shadow:0 18px 50px #000b;
  font-size:.83rem; line-height:1.6;
}
.pop-wide{width:min(430px,calc(100vw - 24px))}
.pop::backdrop{background:transparent}
.pop h4{font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
        color:var(--muted); margin-bottom:.55rem}
.pop p{margin:0 0 .7rem}
.pop p:last-child{margin-bottom:0}
.pop b{color:var(--ink); font-weight:650}
.pop i{color:var(--ink); font-style:italic}
.pop-warn{
  border-left:2px solid var(--accent); padding-left:.7rem;
  color:var(--muted); font-size:.79rem;
}

/* the date / season popover carries controls rather than prose */
.icon-btn{display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap}
.icon-btn .ic{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7;
              stroke-linecap:round; flex:none}
.icon-btn.on{border-color:var(--accent); color:var(--ink)}
/* Scoped to the open state: a bare `display` here would beat the UA rule that
   keeps a closed popover hidden, and the panel would sit in the page. */
.pop-when:popover-open{display:grid; gap:.7rem}
.pop-row{display:flex; align-items:center; gap:.6rem; justify-content:space-between}
.pop-row select{flex:1; max-width:62%}
.pop-k{font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
       color:var(--muted); white-space:nowrap}
.pop-dates{display:grid; grid-template-columns:1fr 1fr; gap:.55rem}
.pop-date{display:grid; gap:.25rem}
.pop-date input{
  background:var(--surface-3); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:.35rem .5rem; font:inherit; font-size:.82rem; width:100%;
}
.check{display:flex; align-items:center; gap:.5rem; font-size:.83rem; cursor:pointer}
.check input{accent-color:var(--accent); cursor:pointer}
.pop-note{margin:0; font-size:.76rem; color:var(--muted); line-height:1.5;
          border-top:1px solid var(--line); padding-top:.6rem}

/* Rank chooser: a compact continuation of the badge beside the slider. */
.pop-ranks{width:min(290px,calc(100vw - 24px))}
.pop-rank-intro{font-size:.78rem; color:var(--muted); line-height:1.45}
.pop-ranks .pop-row select{max-width:70%}

/* ---------- draft ---------- */
.teams{display:grid; grid-template-columns:1fr minmax(170px,210px) 1fr; gap:1.2rem; align-items:start}
.team h3{
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.6rem;
}
.team-ally h3{color:var(--ally)} .team-enemy h3{color:var(--enemy)}
.slots{display:flex; flex-direction:column; gap:.45rem}
.slot{
  display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  min-height:52px; padding:.35rem .6rem; border-radius:11px;
  border:1px dashed var(--line); background:var(--surface-2); color:var(--ink-2);
  font-size:.92rem; transition:border-color .13s,background .13s;
}
.slot:hover{border-color:var(--accent); color:var(--ink)}
.slot.filled{border-style:solid; background:var(--surface-3); color:var(--ink); font-weight:600}
.team-ally .slot.filled{border-color:color-mix(in srgb,var(--ally) 55%,transparent)}
.team-enemy .slot.filled{border-color:color-mix(in srgb,var(--enemy) 55%,transparent)}
.slot img{width:38px; height:38px; border-radius:8px; object-fit:cover; background:var(--surface)}
.slot .ph{
  width:38px; height:38px; border-radius:8px; display:grid; place-items:center;
  background:var(--surface-3); color:var(--muted); font-size:1.1rem; flex:none;
}
.slot .x{margin-left:auto; color:var(--muted); font-size:1.2rem; line-height:1; padding:0 .2rem}

.odds{text-align:center; padding-top:1.5rem}
.odds-pct{font-size:3rem; font-weight:750; line-height:1; letter-spacing:-.045em}
.odds-pct span{font-size:1.4rem; font-weight:650; letter-spacing:0}
.odds-cap{
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-top:.45rem;
}
.odds-bar{
  height:8px; border-radius:99px; background:var(--surface-3);
  margin:.8rem 0 .9rem; overflow:hidden;
}
.odds-bar i{display:block; height:100%; border-radius:99px; transition:width .25s ease,background .25s}

/* The two modelling controls. They share a row and sit between the board and
   the recommendations, because they change what the numbers below them mean. */
.assume{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem 1.4rem; flex-wrap:wrap; margin-top:1.3rem;
  border-top:1px solid var(--line); padding-top:1rem;
}
.assume-part{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; min-width:0}
.assume-part .field-k{display:inline-flex; align-items:center; gap:.4rem; flex:none}
.assume-skill{margin-left:auto}
.assume-skill select{
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:.3rem .55rem; font:inherit; font-size:.82rem;
}
.ban-chips{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; min-width:0}
.ban-none{font-size:.82rem; color:var(--muted)}
.ban-chip{
  display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .45rem .18rem .22rem;
  border:1px solid var(--line); border-radius:99px; background:var(--surface-2);
  color:var(--ink-2); font-size:.78rem; transition:border-color .13s,color .13s;
}
.ban-chip:hover{border-color:var(--enemy); color:var(--ink)}
/* Banned brawlers read as out of play, not as a sixth team slot. */
.ban-chip img{width:20px; height:20px; border-radius:5px; object-fit:cover; filter:grayscale(1); opacity:.75}
.ban-chip .x{color:var(--muted); font-size:.95rem; line-height:1}

.recs-block{margin-top:1.5rem; border-top:1px solid var(--line); padding-top:1.2rem}
.recs-head{display:flex; align-items:center; justify-content:space-between;
           gap:1rem; margin-bottom:.85rem; flex-wrap:wrap}
.recs-head h4{font-size:.94rem; font-weight:650}
.sims{display:flex; align-items:center; gap:.6rem; flex:0 1 300px; min-width:210px}
.sims .field-k{display:inline-flex; align-items:center; gap:.4rem}
.sims input[type=range]{flex:1; min-width:90px}

/* Search runs in slices so the page keeps responding; this is the only sign of
   it, and it is deliberately quiet -- at 500 sims it is gone in a blink. */
.recs-progress{height:2px; border-radius:99px; background:var(--surface-3); margin-bottom:.6rem; overflow:hidden}
.recs-progress i{display:block; height:100%; width:0; background:var(--accent); transition:width .08s linear}
.recs.busy{opacity:.45; transition:opacity .15s}
.recs{display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.rec{
  display:flex; align-items:center; gap:.55rem; padding:.45rem .6rem;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  transition:border-color .13s,background .13s;
}
.rec:hover{border-color:var(--accent); background:var(--surface-3)}
.rec img{width:32px; height:32px; border-radius:7px; object-fit:cover; flex:none}
.rec .n{font-size:.86rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rec .p{margin-left:auto; font-size:.84rem; font-weight:650; font-variant-numeric:tabular-nums}

/* ---------- map ---------- */
.map-card{padding-bottom:1.1rem}
.map-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.9rem; flex-wrap:wrap}
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:2px}
.seg button{
  background:none; border:0; color:var(--muted); padding:.32rem .7rem;
  border-radius:7px; font-size:.8rem; font-weight:600; transition:background .13s,color .13s;
}
.seg button.on{background:var(--surface-3); color:var(--ink)}
.seg-sm button{padding:.26rem .55rem; font-size:.74rem}
.seg-wrap{display:flex; align-items:center; gap:.5rem}
.scale{display:flex; align-items:center; gap:.5rem; font-size:.7rem; color:var(--muted); letter-spacing:.04em}
.scale i{width:160px; height:8px; border-radius:99px; display:block}

.map-stage{position:relative; border-radius:11px; overflow:hidden; background:var(--plane)}
#atlas{display:block; width:100%; height:clamp(380px,55vh,560px); cursor:crosshair}

.map-tip{
  position:absolute; z-index:6; pointer-events:none;
  background:var(--surface-3); border:1px solid var(--line); border-radius:9px;
  padding:.5rem .65rem; font-size:.8rem; line-height:1.45; min-width:130px;
  box-shadow:0 8px 24px #0009;
}
.map-tip b{display:block; font-size:.88rem; margin-bottom:.15rem}
.map-tip b em{font-style:normal; font-weight:500; color:var(--muted); font-size:.82em}
.map-tip .r{display:flex; justify-content:space-between; gap:1rem; color:var(--muted)}
.map-tip .r span:last-child{color:var(--ink); font-variant-numeric:tabular-nums}

/* brawler detail — the one place portraits carry meaning */
.detail{
  position:absolute; inset:0 0 0 auto; width:min(330px,100%); z-index:8;
  --slide:12px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  backdrop-filter:blur(14px); border-left:1px solid var(--line);
  padding:1.1rem; overflow-y:auto; animation:slide .16s ease;
}
.detail[data-side="left"]{inset:0 auto 0 0; border-left:0; border-right:1px solid var(--line); --slide:-12px}
@keyframes slide{from{transform:translateX(var(--slide)); opacity:0}to{transform:none; opacity:1}}
.detail-close{
  position:absolute; top:.7rem; right:.8rem; background:none; border:0;
  color:var(--muted); font-size:1.3rem; line-height:1; padding:.2rem;
}
.detail-close:hover{color:var(--ink)}
.detail-head{display:flex; align-items:center; gap:.8rem; margin-bottom:.2rem}
.detail-head img{width:62px; height:62px; border-radius:12px; object-fit:cover; background:var(--surface-2); flex:none}
.detail-head h3{font-size:1.15rem; letter-spacing:-.03em}
.chip{
  display:inline-block; margin-top:.25rem; padding:.16rem .5rem; border-radius:99px;
  font-size:.7rem; font-weight:700; letter-spacing:.04em;
}
.detail-rows{margin:1rem 0 .3rem; display:grid; gap:.5rem}
.drow{display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; font-size:.84rem}
.drow .k{color:var(--muted)}
.drow .v{font-weight:650; font-variant-numeric:tabular-nums}
.detail h5{
  font-size:.63rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:.95rem 0 .45rem;
}
.peers{display:flex; gap:.45rem}
.peer{
  text-align:center; width:56px; padding:0; background:none; border:0;
  border-radius:9px; transition:transform .12s;
}
.peer:hover{transform:translateY(-2px)}
.peer img{
  width:48px; height:48px; border-radius:10px; object-fit:cover;
  background:var(--surface-2); border:1px solid var(--line);
}
.peer:hover img{border-color:var(--accent)}
.peer span{
  display:block; font-size:.7rem; color:var(--ink-2); margin-top:.25rem; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.detail .thin{font-size:.75rem; color:var(--muted); margin:.6rem 0 0; line-height:1.5}

/* ---------- table ---------- */
.table-bar{display:flex; align-items:center; gap:.8rem; margin-bottom:.9rem}
.table-bar input{flex:1; max-width:280px}
.count{font-size:.8rem; color:var(--muted); margin-left:auto}
.table-scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:.88rem}
th{
  text-align:right; font-size:.63rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); padding:.4rem .6rem .6rem;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
th[data-sort]{cursor:pointer; user-select:none}
th[data-sort]:hover{color:var(--ink-2)}
th.on{color:var(--ink)}
th.on::after{content:" ↓"; font-size:.8em}
th.on.asc::after{content:" ↑"}
.th-rank{text-align:right; width:38px}
.th-name{text-align:left}
td{padding:.42rem .6rem; border-bottom:1px solid var(--line-soft); text-align:right;
  font-variant-numeric:tabular-nums}
tbody tr{cursor:pointer; transition:background .1s}
tbody tr:hover{background:var(--surface-2)}
.td-rank{color:var(--muted); font-size:.8rem}
.td-name{text-align:left}
.td-name div{display:flex; align-items:center; gap:.55rem; font-weight:600}
.td-name img{width:30px; height:30px; border-radius:7px; object-fit:cover; background:var(--surface-2); flex:none}
.sbar{
  display:inline-block; vertical-align:middle; width:72px; height:7px; border-radius:99px;
  background:var(--surface-3); margin-right:.5rem; overflow:hidden; position:relative;
}
.sbar i{position:absolute; inset:0 auto 0 0; border-radius:99px}
.th-n,.td-n{color:var(--muted); font-size:.8rem}

/* ---------- ranked distribution ----------
   Condensed: this sits above the fold now, where its job is to frame the page
   rather than to be studied. The tier badges are drawn on the canvas axis, so
   the legend below only has to name them. */
.dist-stage{position:relative}
#dist{display:block; width:100%; height:clamp(132px,17vh,168px)}
.dist-legend{
  display:flex; flex-wrap:wrap; gap:.3rem .9rem; margin-top:.7rem;
  font-size:.7rem; color:var(--muted);
}
.dist-legend span{display:inline-flex; align-items:center; gap:.32rem; white-space:nowrap}
.dist-legend i{width:9px; height:9px; border-radius:2.5px; transform:rotate(45deg); flex:none}

/* ---------- footer ---------- */
.foot{margin-top:clamp(3.5rem,8vw,6rem); border-top:1px solid var(--line); padding-block:1.8rem 3rem}
.foot p{margin:.35rem 0; font-size:.8rem; color:var(--muted); max-width:78ch; line-height:1.6}
.foot b{color:var(--ink-2); font-weight:650}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .teams{grid-template-columns:1fr}
  /* Once the row wraps, pinning the opponent control right strands it. */
  .assume{flex-direction:column; align-items:stretch}
  .assume-skill{margin-left:0}
  .odds{order:-1; padding-top:0; display:grid; grid-template-columns:auto 1fr; gap:0 1rem;
        align-items:center; text-align:left}
  .odds-pct{grid-row:span 2}
  .odds-bar{grid-column:2; margin:.4rem 0 0}
  .odds-cap{grid-column:2; margin:0}
  .odds .ghost{grid-column:1/-1; justify-self:start; margin-top:.7rem}
  .detail{width:100%; border-left:0}
}
@media(max-width:560px){
  .context-inner{gap:.7rem 1rem}
  .field-skill{flex-basis:100%; order:3; flex-wrap:wrap}
  .field-skill input[type=range]{min-width:80px}
  .scale i{width:96px}
  .tile .v{font-size:1.45rem}
  /* Full width, but split evenly -- a stretched track with the buttons
     huddled at one end reads as a bug rather than a choice. */
  .sect-head .seg{margin-left:0; width:100%}
  .sect-head .seg button{flex:1}
  .sims{flex-basis:100%}
  .pop-dates{grid-template-columns:1fr}
}
@media(max-width:380px){
  .hero-title{gap:.5rem}
  .hero-title h1{font-size:2.15rem}
  .globe{width:68px; height:68px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

/* ---------- brawler picker (native dialog) ---------- */
.picker{
  width:min(600px,92vw); max-height:76vh; padding:1rem;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 24px 70px #000a;
}
.picker::backdrop{background:#000a; backdrop-filter:blur(3px)}
.picker input[type="search"]{width:100%; margin-bottom:.8rem}
.pick-grid{
  display:grid; gap:.4rem; grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  overflow-y:auto; max-height:56vh; padding-right:.2rem;
}
.pick-grid button{
  display:flex; align-items:center; gap:.5rem; padding:.35rem .5rem;
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px;
  color:var(--ink); font-size:.82rem; font-weight:600; text-align:left;
  transition:border-color .12s,background .12s;
}
.pick-grid button:hover{border-color:var(--accent); background:var(--surface-3)}
.pick-grid img{width:30px; height:30px; border-radius:7px; object-fit:cover; flex:none}
.pick-grid span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* the strength dot: the same ramp the map uses, so the picker ranks by the
   thing the rest of the page is talking about */
.pick-grid i{width:8px; height:8px; border-radius:50%; margin-left:auto; flex:none}

/* Context controls: readable endpoints and native keyboard-friendly choices. */
select{appearance:none; padding-right:2rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%239ba9bf' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .7rem center; color-scheme:dark}
#ctx-map{max-width:250px; font-size:.82rem}
.field-skill{gap:.8rem; flex-basis:440px}
.field-skill>.field-k{display:grid; gap:.2rem}
.rank-sliders{position:relative; height:32px; flex:1; min-width:100px; touch-action:none; cursor:pointer; --range-from:0%; --range-to:100%}
.rank-track{position:absolute; inset:14px 8px; height:4px; border-radius:99px; background:linear-gradient(to right,var(--surface-3) var(--range-from),var(--accent) var(--range-from),var(--accent) var(--range-to),var(--surface-3) var(--range-to)); pointer-events:none}
.rank-sliders input[type=range]{position:absolute; inset:0; width:100%; height:32px; min-width:0; margin:0; pointer-events:none; background:none; z-index:3}
.rank-sliders input[type=range]::-webkit-slider-runnable-track{background:transparent}
.rank-sliders input[type=range]::-moz-range-track{background:transparent}
.rank-sliders input[type=range]::-webkit-slider-thumb{pointer-events:auto; background:var(--tier-color); cursor:ew-resize}
.rank-sliders input[type=range]::-moz-range-thumb{pointer-events:auto; background:var(--tier-color); cursor:ew-resize}
.rank-sliders input[type=range]:focus-visible{outline:none}
.rank-sliders input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.rank-sliders input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.rank-readout{flex:0 0 auto; min-width:170px; max-width:none; padding:.6rem .75rem; justify-content:space-between; gap:.7rem}
.rank-readout>span:first-child{display:grid; gap:.3rem; overflow:visible; line-height:1.25}
.rank-readout b,.rank-readout em{overflow:visible; font-size:.78rem}
.pop-ranks{width:min(350px,calc(100vw - 24px))}
.pop-ranks:popover-open{display:grid; gap:.8rem}
.pop-ranks .pop-row{display:grid; grid-template-columns:3rem 1fr}
.pop-ranks .pop-row select{width:100%; max-width:none}
.rank-presets{display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem}
.rank-presets button{padding:.5rem .25rem; font-size:.75rem; color:var(--tier-color,var(--ink-2)); border-color:color-mix(in srgb,var(--tier-color,var(--line)) 40%,var(--line)); background:color-mix(in srgb,var(--tier-color,var(--surface-2)) 8%,var(--surface-2))}
.rank-presets button[aria-pressed=true]{border-color:var(--tier-color,var(--accent)); background:color-mix(in srgb,var(--tier-color,var(--accent)) 18%,var(--surface-2)); color:var(--tier-color,var(--ink)); box-shadow:inset 0 0 0 1px var(--tier-color,var(--accent))}
.pop-ranks select{color:var(--tier-color,var(--ink)); border-left:3px solid var(--tier-color,var(--line))}
.atlas-tools,.atlas-search,.atlas-zoom{display:flex; gap:.5rem; align-items:center}
.atlas-tools{justify-content:space-between; flex-wrap:wrap; margin-bottom:.6rem}
.atlas-search input{width:200px; max-width:100%}
.atlas-zoom output{font-size:.75rem; min-width:3rem; text-align:center; color:var(--muted)}
button:disabled{opacity:.4; cursor:default}
.atlas-status{font-size:.75rem; color:var(--muted); margin:.25rem 0}
.atlas-status:empty{display:none}
#atlas{touch-action:none}
.size-key{display:flex; align-items:center; gap:.5rem; margin-top:0; font-size:.72rem; color:var(--muted); flex-wrap:wrap}
.size-key i{display:inline-block; border:1px solid var(--ink-2); border-radius:50%; background:var(--surface-3)}
.size-small{width:10px; height:10px; margin-left:.5rem}.size-large{width:23px; height:23px; margin-left:.5rem}
.atlas-legend{display:flex; align-items:center; gap:1rem 2rem; flex-wrap:wrap; margin-top:.9rem}
.pan-hint{font-size:.72rem; color:var(--muted); margin:.7rem 0 0}
.table-note{font-size:.75rem; color:var(--muted); margin-bottom:.8rem}
.strength-score{display:inline-block; min-width:3.2rem; font-size:.78rem; color:var(--ink-2)}
.sample-warning{color:#efbd68; position:relative; cursor:help; font-size:.9rem}
.sample-warning:hover::after,.sample-warning:focus::after{content:attr(data-tip); position:absolute; left:0; top:100%; width:190px; padding:.5rem; border:1px solid var(--line); border-radius:8px; background:var(--surface-3); color:var(--ink); font-size:.75rem; z-index:9; font-weight:400}
.dist-legend span{white-space:normal}
@media(max-width:560px){
  .field-skill>.field-k{width:100%; display:flex; gap:.6rem}
  .rank-readout{min-width:154px; padding:.5rem}
  .rank-sliders{min-width:100px}
  .pan-hint{width:100%; margin-left:0}
  .atlas-tools{align-items:stretch}
  .atlas-search{width:100%}.atlas-search input{flex:1; width:0}
  .table-bar{flex-wrap:wrap}.count{margin-left:0}
}