/* Kickmap. A dark sky with glowing dots; the page's accent follows the
   community under the pointer (--acc is set from app.js). */
:root{
  --bg:#07080d; --panel:rgba(14,16,24,.86); --line:#232838; --txt:#eef1f7; --dim:#8b93a7; --faint:#565d70;
  --acc:#53fc18; --gold:#ffc83d; --live:#ff3355;
  --mono:ui-monospace,"JetBrains Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 700px at 50% -10%,#141a2c 0%,var(--bg) 60%) fixed,var(--bg);
     color:var(--txt);font:15px/1.4 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
     display:flex;flex-direction:column;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
.hidden{display:none !important}

.top{display:flex;align-items:center;justify-content:space-between;padding:12px clamp(14px,6vw,128px) 4px}
.logo{display:flex;align-items:flex-start;gap:9px;text-decoration:none;color:var(--txt);font-size:26px;font-weight:700;
      letter-spacing:.2px}
.logo svg{width:32px;height:32px;fill:var(--acc);stroke:var(--acc);stroke-width:1.4;transition:fill .4s,stroke .4s}
.logo b{color:var(--acc);font-weight:700;transition:color .4s}
.logo sup{font:700 9px var(--mono);letter-spacing:.18em;color:var(--dim);margin-top:2px}
.top-right{display:flex;align-items:center;gap:10px}
.ico{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center}
/* the map as one picture: its button up here, its window further down (.poster) */
.pic-btn{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--acc);
         background:var(--panel);color:var(--txt);font:700 11px var(--mono);letter-spacing:.1em}
.pic-btn svg{width:17px;height:17px;fill:none;stroke:var(--acc);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;flex:none}
.ico svg{width:17px;height:17px;fill:none;stroke:var(--dim);stroke-width:2;stroke-linejoin:round}
.ico.on{border-color:var(--acc)} .ico.on svg{stroke:var(--acc);fill:var(--acc)}
.lang-sw{display:flex;border:1px solid var(--line);border-radius:999px;background:var(--panel);padding:3px}
.lang-sw button{border:0;background:none;border-radius:999px;padding:4px 11px;font:700 11px var(--mono);color:var(--dim)}
.lang-sw button.on{background:var(--acc);color:#061006}
.made{border:1px solid var(--line);border-radius:999px;background:var(--panel);padding:8px 16px;color:var(--txt);
      text-decoration:none;font-weight:600;font-size:14px}
.made:hover{border-color:var(--acc)}

/* Three rows that scroll sideways when they do not fit. Centred with auto
   margins on the first and last cell, NOT with justify-content:center: that
   pushes the left end out of reach of the scroll when the row overflows. */
.timeline,.stats,.alltime{display:flex;overflow-x:auto;scrollbar-width:none}
.timeline::-webkit-scrollbar,.stats::-webkit-scrollbar,.alltime::-webkit-scrollbar{display:none}
.timeline > :first-child,.stats > :first-child,.alltime > :first-child{margin-left:auto}
.timeline > :last-child,.stats > :last-child,.alltime > :last-child{margin-right:auto}

.timeline{align-items:center;gap:6px;margin-top:2px;padding:0 10px}
.timeline button{flex:none;border:1px solid var(--line);background:none;border-radius:999px;padding:3px 11px;white-space:nowrap;
                 font:700 10.5px var(--mono);letter-spacing:.08em;color:var(--dim)}
.timeline button.on{border-color:var(--acc);color:var(--acc)}

.stats{padding:8px 10px 10px}
.stat{flex:none;padding:0 18px;text-align:center;border-left:1px solid var(--line);white-space:nowrap}
.stat:first-child{border-left:0}
.stat b{display:block;font-size:21px;font-weight:700;letter-spacing:.2px}
.stat b i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:2px;background:var(--acc)}
.stat b i.red{background:var(--live)}
.stat b.word{color:var(--acc);font-size:15px;transition:color .4s;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.stat small{font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--dim)}
/* the language chips stand in the row of numbers like one of its cells */
.lang-cell{flex:none;padding:0 14px;white-space:nowrap;display:flex;flex-direction:column;
           justify-content:space-between;align-items:center}
.lang-cell .chips{display:flex;gap:4px;align-items:center}
.lang-cell button{border:1px solid var(--line);background:none;border-radius:999px;padding:3px 10px;min-width:36px;font:700 10px/1.2 var(--mono);
                  letter-spacing:.06em;color:var(--dim)}
.lang-cell button.on{border-color:var(--acc);color:var(--acc)}
.lang-cell small{font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--dim)}

.frame{position:relative;flex:1;min-height:0;margin:0 clamp(8px,6vw,126px);border:1px solid var(--line);border-radius:18px;
       overflow:hidden;background:#04050a;box-shadow:0 0 0 1px rgba(255,255,255,.02),0 0 90px -30px var(--acc);
       transition:box-shadow .5s}
/* app.js sizes the picture from this box and watches it for changes */
#map{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#map.drag{cursor:grabbing} #map.point{cursor:pointer}
.veil{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;
      background:rgba(4,5,10,.82);color:var(--dim);font-size:15px;text-align:center;padding:24px;z-index:9}
.pill{border:1px solid var(--acc);background:none;border-radius:999px;padding:9px 20px;font:700 12px var(--mono);
      letter-spacing:.12em;color:var(--acc)}

/* The column on the left. It ends above the tour button and scrolls when it
   is taller than that; its empty part lets the map through. */
.explore{position:absolute;left:12px;top:12px;bottom:66px;width:258px;display:flex;flex-direction:column;gap:9px;z-index:5;
         overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2a3042 transparent;pointer-events:none}
.explore > *{pointer-events:auto;flex:none}
.frame:has(#tourCta:not(.hidden)) .explore{bottom:128px}
.frame.tight .explore{display:none}
.ex-box,.ex-row{background:var(--panel);border:1px solid var(--line);border-radius:13px;backdrop-filter:blur(8px)}
/* above the rows under it: the list of found streamers hangs out of this box over them */
.ex-box{padding:12px;position:relative;z-index:2}
.ex-head{font-weight:700;font-size:13px;margin-bottom:9px}
.search{position:relative}
.search svg{position:absolute;left:11px;top:10px;width:16px;height:16px;fill:none;stroke:var(--dim);stroke-width:2}
#search{width:100%;padding:9px 10px 9px 34px;border-radius:9px;border:1px solid var(--line);background:#0c0e15;color:var(--txt);
        font:inherit;font-size:14px}
#search:focus{outline:none;border-color:var(--acc)}
/* in the flow, not hung over the rows below: the column scrolls, and a hanging list would be cut by it */
.found{margin:5px 0 0;padding:4px;list-style:none;background:#0c0e15;border:1px solid var(--line);border-radius:9px}
.found li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:14px}
.found li.on,.found li:hover{background:#171b28}
.found li i,.row i.sw,.leader i{width:9px;height:9px;border-radius:50%;flex:none}
.found li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.found li small{color:var(--dim);font:11px var(--mono)}
.found li.none{color:var(--dim);cursor:default}
.ex-fold{width:100%;margin-top:9px;border:0;background:none;font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--dim)}
.ex-fold::after{content:" ⌄"} .ex-fold.open::after{content:" ⌃"}
/* the leaders' fold and "find yourself" share one line */
.ex-folds{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:9px}
.ex-folds .ex-fold{width:auto;margin-top:0;letter-spacing:.12em;text-align:left;white-space:nowrap;padding:0}
.ex-me{flex:none;border:1px solid var(--acc);border-radius:999px;background:none;color:var(--acc);font:700 9px var(--mono);
       letter-spacing:.08em;padding:4px 9px;white-space:nowrap}
.me{display:flex;gap:8px;padding:2px 18px 4px}
.me input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;background:#0a0c13;color:var(--txt);padding:10px 12px;font-size:15px}
.me button,.me-say button{border:1px solid var(--acc);background:none;border-radius:9px;padding:9px 15px;font:700 11px var(--mono);
                          letter-spacing:.08em;color:var(--acc)}
.me-say{padding:8px 18px 18px;min-height:20px}
/* the owner's panel: two names in a row, then who is shown bigger, each with its way back */
.me.adm{flex-wrap:wrap} .me.adm input{flex:1 1 150px}
.adm-list{padding:0 18px 4px;max-height:38vh;overflow:auto}
.adm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:14px;color:#c5cad8}
.adm-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-row button{flex:none;border:1px solid var(--line);background:none;border-radius:9px;padding:6px 12px;font:700 10.5px var(--mono);color:var(--txt)}
.me-say p{margin:6px 0 12px;color:#c5cad8;font-size:14.5px}
/* the list keeps to a few lines and scrolls in itself: unfolded whole, it pushed the buttons under it out of the column */
.leader-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;max-height:112px;overflow-y:auto;scrollbar-width:thin;
             scrollbar-color:#2a3042 transparent}
.leader{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#0c0e15;border-radius:999px;
        padding:4px 9px;font-size:12px;max-width:100%}
.leader span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leader.on{border-color:var(--acc)}
.leader-foot{margin-top:8px;color:var(--dim);font-size:11.5px;min-height:32px}
.ex-row{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;font-weight:600;font-size:13px;
        text-align:left}
.ex-row b{color:var(--acc)} .ex-row svg{width:15px;height:15px;fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linecap:round}
.ex-row:hover,.ex-row.on{border-color:var(--acc)}
.dot-live{width:9px;height:9px;border-radius:50%;background:var(--live)}

/* The card. Its head and its buttons keep their height; the list in the
   middle takes what is left and scrolls. When even that is too little the
   list keeps a few rows (min-height) and the whole card scrolls instead, so
   the list can never be squeezed out of sight. */
.card{position:absolute;right:12px;top:12px;bottom:12px;width:306px;display:flex;flex-direction:column;z-index:6;
      background:var(--panel);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(10px);
      overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2a3042 transparent}
.card > *{flex:none}
.card-x{position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);
        background:#0c0e15;font-size:16px;line-height:1;z-index:1}
.card-top{padding:20px 16px 13px;text-align:center;border-bottom:1px solid var(--line)}
.card-pic{width:92px;height:92px;border-radius:50%;border:2px solid var(--acc);object-fit:cover;background:#12151f;
          display:block;margin:0 auto 9px}
.card-pic.none{display:grid;place-items:center;font-size:34px;font-weight:700;color:var(--acc)}
/* a name longer than two lines is cut; the whole of it is in the element's title */
.card-name{font-size:19px;font-weight:700;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;
           -webkit-box-orient:vertical;overflow:hidden}
.card-live{margin-top:3px;font-size:13px;font-weight:700}
.card-live em{font:700 10px var(--mono);letter-spacing:.14em;color:var(--live);font-style:normal;margin-right:7px}
.card-live em::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);margin-right:6px}
.card-sub{color:var(--dim);font-size:12.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-cl{color:var(--acc);font:11.5px var(--mono);margin-top:5px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;
         -webkit-box-orient:vertical;overflow:hidden}
.pills{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:9px}
.flair{border:1px solid #2f5d86;color:#5cc8ff;border-radius:999px;padding:3px 12px;font:700 9.5px var(--mono);letter-spacing:.12em}
.flair.gold{border-color:#8a6a17;color:var(--gold)}
.card > .card-mid{flex:1 1 auto;display:flex;flex-direction:column;padding:11px 13px 0}
.card-h{font:600 9.5px var(--mono);letter-spacing:.14em;color:var(--dim);margin-bottom:8px}
#pathIn{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#0c0e15;color:var(--txt);
        font:inherit;font-size:13px;margin-bottom:6px}
#pathIn:focus{outline:none;border-color:var(--gold)}
.path-msg{color:var(--gold);font-size:12.5px;margin:0 0 6px}
.rows{flex:1 1 0;min-height:132px;overflow-y:auto;margin:0 -6px;padding:0 6px;scrollbar-width:thin;scrollbar-color:#2a3042 transparent}
.row{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;padding:6px 6px;border-radius:7px;text-align:left;
     font-size:14px}
.row:hover{background:#171b28}
.row small{width:16px;text-align:right;color:var(--faint);font:10px var(--mono);flex:none}
.row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.row u{width:7px;height:7px;border-radius:50%;background:var(--live);flex:none;text-decoration:none}
.row b{font:11.5px var(--mono);color:var(--dim);font-weight:400}
.row b.v{color:var(--live)}
.more{width:100%;border:0;background:none;color:var(--dim);font-size:12px;padding:8px}
.none-line{color:var(--dim);font-size:13px;padding:8px 2px}
.spin{display:block;width:calc(100% - 26px);margin:8px 13px;border:1px solid var(--live);border-radius:9px;background:rgba(255,51,85,.1);padding:10px;
      font:700 11px var(--mono);letter-spacing:.14em;color:#ff8296}
/* Raid finder on a line of its own, "open" and "share" side by side under it.
   The buttons stay at the card's lower edge also when the card is too low for
   all of it and scrolls: they are never the part that is out of sight. */
.card-foot{border-top:1px solid var(--line);position:sticky;bottom:0;background:#0e1018;z-index:1}
.foot-row{display:flex;flex-wrap:wrap}
.card-foot .spin + .foot-row{border-top:1px solid var(--line)}
.card-raid{flex:1 0 100%;border:0;border-bottom:1px solid var(--line);border-left:3px solid var(--live);background:none;
           text-align:left;padding:11px 13px;font:700 10px var(--mono);letter-spacing:.16em;color:var(--live)}
.card-raid.on{background:rgba(255,51,85,.09)}
.card-foot a,.card-foot #cardShare{flex:1;border:0;background:none;padding:12px 13px;color:var(--acc);font-weight:700;font-size:13px;
                                   text-decoration:none;text-align:left;white-space:nowrap}
.card-foot #cardShare{flex:none;border-left:1px solid var(--line)}

.tour-cta{position:absolute;left:12px;bottom:62px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
          padding:10px 34px 10px 13px;z-index:5}
.tour-cta small{display:block;color:var(--dim);font-size:12px}
.tour-cta #tourCtaGo{border:0;background:none;padding:0;font-weight:700;font-size:13.5px}
.tour-cta #tourCtaX{position:absolute;right:8px;top:6px;border:0;background:none;color:var(--dim);font-size:16px}
.tour-btn{position:absolute;left:12px;bottom:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
          padding:9px 15px;font-weight:700;font-size:13px;z-index:5}
.tour-btn::before{content:"✦ ";color:var(--acc)}
.zoom{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:4}
.zoom button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:19px;line-height:1}
.card:not(.hidden) ~ .zoom{right:330px}

.tour{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:min(440px,calc(100% - 24px));z-index:8;
      background:var(--panel);border:1px solid var(--acc);border-radius:14px;padding:15px 17px;backdrop-filter:blur(10px)}
/* with a card open the tour stands in the middle of what the card leaves free */
.frame:has(#card:not(.hidden)) .tour{left:calc((100% - 330px) / 2);width:min(440px,calc(100% - 354px))}
/* no text-transform here: in Turkish it would turn the i of "kickmap" into a dotted capital */
.tour small{font:700 9.5px var(--mono);letter-spacing:.18em;color:var(--acc)}
.tour h3{margin:4px 0 5px;font-size:18px;overflow-wrap:anywhere}
.tour p{margin:0;color:#c5cad8;font-size:14px}
.tour-act{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.tour-act span{color:var(--faint);font:11px var(--mono)}
.tour-act div{display:flex;gap:8px}
.tour-act button{border:1px solid var(--line);background:none;border-radius:8px;padding:7px 14px;font:700 11px var(--mono);
                 letter-spacing:.1em}
.tour-act button.go{border-color:var(--acc);background:var(--acc);color:#061006}

.alltime{align-items:center;padding:8px 10px 0}
.alltime .badge{flex:none;border:1px solid var(--acc);color:var(--acc);border-radius:6px;padding:4px 9px;margin-right:6px;
                white-space:nowrap;font:700 9px var(--mono);letter-spacing:.2em;transition:color .4s,border-color .4s}
.alltime .stat b{font-size:17px}
.tip{position:fixed;z-index:70;max-width:270px;background:#0c0e15;border:1px solid var(--line);border-radius:9px;
     padding:8px 11px;font-size:12.5px;color:#c5cad8;pointer-events:none}
.foot{padding:7px 10px 9px;text-align:center;color:var(--faint);font:11px var(--mono)}

.modal{position:fixed;inset:0;background:rgba(3,4,8,.72);display:flex;align-items:center;justify-content:center;z-index:40;padding:14px}
.modal-card{width:min(560px,100%);max-height:min(86vh,720px);display:flex;flex-direction:column;background:#0d1018;
            border:1px solid var(--line);border-radius:16px;overflow:hidden}
.m-head{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 18px 10px}
.m-head h2{margin:0;font-size:16px;letter-spacing:.14em}
.m-head small{display:block;margin-top:4px;font:600 9px var(--mono);letter-spacing:.14em;color:var(--dim)}
.m-x{border:1px solid var(--line);background:none;border-radius:8px;width:30px;height:30px;font-size:17px;line-height:1;flex:none}
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 10px}
.tabs button{border:1px solid var(--line);background:none;border-radius:999px;padding:5px 11px;font:700 9.5px var(--mono);
             letter-spacing:.1em;color:var(--dim)}
.tabs button.on{border-color:var(--acc);color:var(--acc)}
.m-desc{padding:0 18px 10px;color:var(--dim);font-size:13px}
.m-body{flex:1;overflow-y:auto;padding:0 12px 14px}
.lb{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:8px 8px;border-radius:8px;text-align:left}
.lb:hover{background:#171b28}
.lb small{width:30px;color:var(--faint);font:11px var(--mono);flex:none}
.lb small.gold{color:var(--gold)}
.lb i{width:9px;height:9px;border-radius:50%;flex:none}
.lb span{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb b{font:12px var(--mono);color:var(--dim);font-weight:400;white-space:nowrap}
.how{padding:2px 18px 18px;overflow-y:auto}
.how p{margin:0 0 12px;color:#c5cad8;font-size:14.5px} .how p b{color:var(--txt)}
.modal-card:has(.poster){width:min(940px,100%);max-height:94vh}
.poster{padding:0 14px;min-height:0;overflow:auto}
.poster a{display:block}
/* the picture is square: its room is kept while it loads, so the buttons under it do not jump */
.poster img{display:block;width:100%;height:auto;aspect-ratio:1/1;max-height:calc(94vh - 190px);object-fit:contain;border-radius:10px;background:#0b0d12}
.poster-say{padding:26px 18px 30px;text-align:center;color:#c5cad8;font-size:14.5px}
.poster-acts{display:flex;justify-content:center;gap:8px;padding:12px 14px 14px;flex-wrap:wrap}
.poster-acts a,.poster-acts button{border:1px solid var(--line);background:none;border-radius:9px;padding:9px 18px;font:700 11px var(--mono);
                                   letter-spacing:.08em;color:var(--txt);text-decoration:none}
.poster-acts a{border-color:var(--acc);color:var(--acc)}
.rr{padding:20px 18px 20px;text-align:center}
.rr small{display:block;font:600 10px var(--mono);letter-spacing:.14em;color:var(--dim)}
.rr .reel{font-size:26px;font-weight:700;margin:16px 0 6px;min-height:36px;overflow-wrap:anywhere}
.rr .who{color:var(--dim);font-size:13px;min-height:19px}
.rr .acts{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.rr button{border:1px solid var(--line);background:none;border-radius:9px;padding:9px 15px;font:700 11px var(--mono);letter-spacing:.08em}
.rr button.go{border-color:var(--live);color:#ff8296;background:rgba(255,51,85,.1)}

/* A short note. In the frame, at its top: the frame's lower edge is where the buttons are
   (the tour's NEXT, the card's "open on Kick"), and a note there lay on top of them. */
.toast{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:#0c0e15;border:1px solid var(--acc);
       border-radius:18px;padding:9px 18px;font-size:13px;z-index:10;width:max-content;max-width:calc(100% - 24px);text-align:center}
/* the all-time numbers as a tab of the rankings */
.at{padding:10px 8px;border-bottom:1px solid var(--line)}
.at:last-child{border-bottom:0}
.at b{font-size:19px;font-weight:700;margin-right:10px}
.at small{font:600 9.5px var(--mono);letter-spacing:.16em;color:var(--dim)}
.at p{margin:4px 0 0;color:#c5cad8;font-size:13px}

/* A card with little room (a phone, or a low window such as a laptop's): its
   head lies on its side, picture left and lines right, and takes half the height. */
@media (max-width:760px), (max-height:820px){
  .card-top{padding:12px 13px 10px;text-align:left;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;
            align-items:center}
  .card-pic{width:54px;height:54px;margin:0;grid-row:1 / span 4} .card-pic.none{font-size:23px}
  /* only the name keeps clear of the close button; the lines under it use the whole width */
  .card-name{font-size:16.5px;padding-right:34px}
  /* the places and badges: one row, pushed sideways with a finger when it is too long */
  .pills{flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:5px;margin:7px 0 0;grid-column:1 / -1;
         overflow-x:auto;scrollbar-width:none}
  .pills::-webkit-scrollbar{display:none}
  .flair{flex:none;padding:3px 9px;letter-spacing:.08em;white-space:nowrap}
  .card > .card-mid{padding-top:9px}
  /* raid finder, open and share on one line, never two: the raid button takes what the other two leave and gives way */
  .card-raid{flex:1 1 0;min-width:0;border-bottom:0;padding:11px 11px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;
             text-overflow:ellipsis}
  .card-foot a,.card-foot #cardShare{flex:none;padding:11px 11px;border-left:1px solid var(--line)}
}
/* A mouse cannot push a row sideways: there the badges take a second line instead. */
@media (hover:hover) and (pointer:fine){
  .pills{flex-wrap:wrap;overflow-x:visible}
}
/* A low window: the map needs the height more than the all-time row does. */
@media (max-height:700px){
  .alltime,.foot{display:none}
  .frame{margin-bottom:8px}
  .stats{padding:4px 10px 6px} .stat b{font-size:17px}
  .rows{min-height:96px}
}

@media (max-width:520px){
  .pic-btn span{display:none} .pic-btn{padding:0 10px}
  .lb{flex-wrap:wrap;row-gap:1px}
  .lb span{flex:1 1 0;min-width:0}
  .lb b{flex:1 0 100%;padding-left:49px;white-space:normal}
  .lb.pair span{white-space:normal;overflow-wrap:anywhere}
}
@media (max-width:760px){
  .top{padding:8px 10px 2px} .logo{font-size:20px} .logo svg{width:24px;height:24px} .made{display:none}
  .alltime{padding:6px 4px 0} .alltime .stat b{font-size:14px}
  .stats{padding:6px 4px 8px} .stat{padding:0 12px} .stat b{font-size:16px}
  .frame{margin:0 6px;border-radius:14px}
  /* the search box across the top, the three rows side by side under it */
  .explore{left:8px;right:8px;top:8px;bottom:56px;width:auto;flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:6px}
  .frame:has(#tourCta:not(.hidden)) .explore{bottom:112px}
  .ex-box{flex:1 1 100%;padding:8px} .ex-head{display:none}
  .ex-row{flex:1 1 0;min-width:0;padding:7px 9px;font-size:11.5px;gap:6px}
  .ex-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ex-fold{margin-top:7px}
  .leader-list{max-height:112px;overflow-y:auto}
  /* The card comes up from the bottom and the map keeps the top; app.js
     (freeBox) aims the camera there. With the card open the rows
     around the frame that are not about this streamer step aside. */
  .card{left:8px;right:8px;bottom:8px;top:auto;width:auto;height:64%}
  body:has(#card:not(.hidden)) .alltime,body:has(#card:not(.hidden)) .foot{display:none}
  body:has(#card:not(.hidden)) .frame{margin-bottom:6px}
  .card-x{right:8px;top:8px}
  .card > .card-mid{padding:8px 10px 0} #pathIn{padding:6px 9px}
  .rows{min-height:84px}
  .card-cl{-webkit-line-clamp:1}      /* the card is wide here, and its height is short */
  /* with the roulette's button in the card the list gives up a row to it */
  .card:has(.spin) .rows{min-height:58px}
  .spin{width:calc(100% - 20px);margin:6px 10px;padding:8px}
  .row{font-size:13px;padding:5px 5px}
  .explore:has(~ .card:not(.hidden)),.card:not(.hidden) ~ .zoom,.card:not(.hidden) ~ .tour-btn,
  .card:not(.hidden) ~ .tour-cta{display:none}
  .zoom{right:8px;bottom:8px} .tour-btn{left:8px;bottom:8px} .tour-cta{left:8px;bottom:54px}
  .tour,.frame:has(#card:not(.hidden)) .tour{left:50%;bottom:10px;width:calc(100% - 16px);padding:12px 13px}
  .tour h3{font-size:16px} .tour p{font-size:13px}
  .frame:has(.tour:not(.hidden)) .card,.frame:has(.tour:not(.hidden)) .explore{display:none}
}
/* The lowest windows: the card's head gives up what it can, so that the list keeps two rows and more. */
@media (max-height:520px){
  .card-top{padding:8px 13px 7px}
  .card-pic{width:42px;height:42px} .card-pic.none{font-size:19px}
  .card-name,.card-cl{-webkit-line-clamp:1}
  /* one line of badges here: the rest are in the rankings. Only what is under the line is cut: a
     row that is pushed sideways with a finger (above) must still be pushable */
  .pills{margin-top:5px;max-height:21px;overflow-y:hidden}
  .path-msg{margin:0 0 3px;font-size:12px}
  .card > .card-mid{padding-top:7px} .card-h{margin-bottom:5px}
  #pathIn{padding:5px 9px;margin-bottom:4px}
  .rows{min-height:64px}
  .row{font-size:13px;padding:5px 5px}
  /* with the raid finder on, the head keeps the name and who is watching; the list needs the rest */
  .card.raid .card-sub,.card.raid .card-cl,.card.raid .pills{display:none}
  .spin{width:calc(100% - 20px);margin:5px 10px;padding:6px}
  .card-raid,.card-foot a,.card-foot #cardShare{padding-top:9px;padding-bottom:9px}
  /* The explore column as a short bar: the search box, and the three buttons side by side
     under it. As a column it is taller than such a window, and its last buttons were out of sight. */
  .explore{width:min(430px,calc(100% - 24px));flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:6px}
  .ex-box{flex:1 1 100%;padding:8px} .ex-head{display:none}
  .ex-row{flex:1 1 0;min-width:0;padding:7px 9px;font-size:11.5px;gap:6px}
  .ex-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ex-fold{margin-top:7px}
  .leader-list{max-height:62px}
  .frame:has(.tour:not(.hidden)) .explore{display:none}
}
/* Lower still (a small phone on its side): the head and the buttons give up a few more pixels each. */
@media (max-height:400px){
  .card-top{padding:6px 13px 5px}
  .card-pic{width:32px;height:32px} .card-pic.none{font-size:15px}
  .pills{display:none}                /* the badges are in the rankings too; here the list needs their line */
  .spin{margin:4px 10px;padding:5px}
  .card > .card-mid{padding-top:4px} .card-h{margin-bottom:3px}
  .card-raid,.card-foot a,.card-foot #cardShare{padding-top:7px;padding-bottom:7px}
}
/* A finger, and a window too low for a keyboard beside the map: no path box. */
@media (max-height:480px) and (pointer:coarse){
  #pathIn{display:none}
}
/* A phone on its side: wide and very low. A sheet from the bottom would leave
   neither the map nor the list any height, so the card is a side panel again
   and the explore column steps aside for it. */
@media (max-width:960px) and (max-height:480px) and (orientation:landscape){
  .card{left:auto;right:8px;top:8px;bottom:8px;width:min(300px,46%);height:auto}
  .explore:has(~ .card:not(.hidden)),.card:not(.hidden) ~ .zoom,.card:not(.hidden) ~ .tour-btn,
  .card:not(.hidden) ~ .tour-cta{display:none}
  .tour,.frame:has(#card:not(.hidden)) .tour{left:8px;transform:none;bottom:8px;width:min(340px,50%);padding:10px 12px}
  .frame:has(.tour:not(.hidden)) .card,.frame:has(.tour:not(.hidden)) .explore{display:none}
}