/* top.lajka.nu — TV-first. Stora tal, hog kontrast, inga animationer som
   stjal uppmarksamhet fran siffran. Testad pa 1080p och 4k i 100 % zoom. */
:root{
  --bg0:#05070e;--bg1:#0a0f1c;--bg2:#0e1526;
  --ink:#f4f7ff;--dim:#90a3c0;
  --line:rgba(255,255,255,.09);--row:rgba(255,255,255,.04);
  --up:#34d399;--down:#fb7185;--warn:#fbbf24;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:linear-gradient(160deg,var(--bg0),var(--bg1) 55%,var(--bg2));
  color:var(--ink);font:16px/1.4 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow:hidden}
.stale{position:fixed;inset:0 0 auto 0;z-index:50;background:var(--warn);color:#2a1c00;
  text-align:center;padding:8px;font-weight:700;font-size:15px}
.wrap{height:100vh;display:flex;flex-direction:column;padding:2.2vh 2.4vw}
header.bar{display:flex;align-items:baseline;gap:1.2vw;flex-wrap:wrap;margin-bottom:1.6vh}
header.bar h1{font-size:3.2vh;letter-spacing:.3px;font-weight:800}
header.bar .tag{color:var(--a1);font-size:1.8vh;text-transform:uppercase;letter-spacing:2px;font-weight:700}
header.bar .when{margin-left:auto;color:var(--dim);font-size:1.7vh;font-variant-numeric:tabular-nums}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1vw;margin-bottom:1.8vh}
.kpis .k{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:1.4vh 1.4vw}
.kpis .k span{display:block;color:var(--dim);font-size:1.5vh;text-transform:uppercase;letter-spacing:1.2px}
.kpis .k b{display:block;font-size:4.4vh;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-1px;line-height:1.1}
.kpis .k i{font-style:normal;font-size:1.6vh;font-variant-numeric:tabular-nums}
.up{color:var(--up)}.down{color:var(--down)}
.goal{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:.9vh}
.goal>i{display:block;height:100%;background:linear-gradient(90deg,var(--a1),var(--a2));border-radius:999px}
.lead{display:flex;align-items:center;gap:1.6vw;background:linear-gradient(90deg,rgba(34,211,238,.14),transparent);
  border:1px solid var(--line);border-radius:16px;padding:1.6vh 1.6vw;margin-bottom:1.4vh}
.lead .av{width:9vh;height:9vh;border-radius:50%;flex:0 0 auto;background:rgba(255,255,255,.08);
  display:grid;place-items:center;font-size:3.4vh;font-weight:800;overflow:hidden;border:2px solid var(--a1)}
.lead .av img{width:100%;height:100%;object-fit:cover}
.lead .who{flex:1 1 auto;min-width:0}
.lead .who em{font-style:normal;display:block;color:var(--a1);font-size:1.6vh;text-transform:uppercase;letter-spacing:2px;font-weight:700}
.lead .who strong{display:block;font-size:4.6vh;font-weight:800;letter-spacing:-1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead .val{text-align:right;flex:0 0 auto}
.lead .val b{display:block;font-size:5.4vh;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-2px;line-height:1}
.lead .val span{color:var(--dim);font-size:1.6vh;text-transform:uppercase;letter-spacing:1.5px}
table.board{width:100%;border-collapse:collapse;flex:1 1 auto}
table.board th{color:var(--dim);font-size:1.4vh;text-transform:uppercase;letter-spacing:1.3px;
  text-align:left;padding:0 1vw .8vh;font-weight:700}
table.board td{padding:.85vh 1vw;border-top:1px solid var(--line);font-size:2.4vh;vertical-align:middle}
table.board td.rank{width:4vw;color:var(--dim);font-weight:800;font-variant-numeric:tabular-nums}
table.board td.name{font-weight:650}
table.board td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:750}
table.board td.big{font-size:2.9vh;font-weight:800}
table.board tr.me td{background:rgba(34,211,238,.07)}
.av-s{width:4.4vh;height:4.4vh;border-radius:50%;background:rgba(255,255,255,.08);display:inline-grid;
  place-items:center;font-size:1.7vh;font-weight:800;margin-right:.8vw;overflow:hidden;vertical-align:middle}
.av-s img{width:100%;height:100%;object-fit:cover}
.feed{flex:1 1 auto;overflow:hidden}
.feed .ev{display:flex;gap:1.2vw;align-items:center;padding:1.1vh 0;border-top:1px solid var(--line)}
.feed .ev .t{color:var(--dim);font-size:1.6vh;font-variant-numeric:tabular-nums;width:7vw;flex:0 0 auto}
.feed .ev .txt{flex:1 1 auto;font-size:2.4vh;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed .ev .txt small{display:block;color:var(--dim);font-size:1.6vh}
.feed .ev .tb{font-size:3vh;font-weight:800;font-variant-numeric:tabular-nums;color:var(--a2)}
footer.note{color:var(--dim);font-size:1.4vh;margin-top:1.2vh;display:flex;gap:1.5vw;flex-wrap:wrap}
.empty{display:grid;place-items:center;flex:1 1 auto;color:var(--dim);font-size:2.4vh;text-align:center;padding:4vh}

/* ===================================================================
   DASHBOARD + FIRANDE
   Lagfarger kommer ur payloaden. Hogst tre ar validerade mot ytan
   #0a0f1c for alla par, bade normalseende och fargblindhet; ett fjarde
   lag far neutral gra. Varje stapel bar sitt namn, sa identitet vilar
   aldrig pa farg ensam.
   =================================================================== */
.dash{height:100vh;display:grid;gap:1.1vh 1vw;padding:1.6vh 1.6vw;
  grid-template-rows:auto auto 1fr;grid-template-columns:1fr}
.dash-head{display:flex;align-items:center;gap:1.4vw}
.dash-head h1{font-size:3vh;font-weight:800;letter-spacing:-.4px}
.dash-head .per{color:var(--a1);font-size:1.7vh;font-weight:700;
  text-transform:uppercase;letter-spacing:2.4px}
.dash-head .right{margin-left:auto;display:flex;align-items:center;gap:1.2vw;
  color:var(--dim);font-size:1.7vh;font-variant-numeric:tabular-nums}
#clock{font-size:2.4vh;font-weight:700;color:var(--ink)}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--up);
  box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2.4s infinite}
body.offline .live-dot{background:var(--down);animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1vw}
.tile{background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:16px;padding:1.4vh 1.3vw;display:flex;flex-direction:column;gap:.5vh}
.tile .lbl{color:var(--dim);font-size:1.45vh;text-transform:uppercase;letter-spacing:1.6px;font-weight:700}
.tile .val{font-size:5.4vh;font-weight:800;line-height:1;letter-spacing:-2px;
  font-variant-numeric:tabular-nums}
.tile .sub{color:var(--dim);font-size:1.6vh;font-variant-numeric:tabular-nums}
.tile .sub b{color:var(--ink);font-weight:700}

/* Malmatare: tunn, platt, med en markor dar malet star. */
.meter{height:10px;border-radius:999px;background:rgba(255,255,255,.07);
  position:relative;overflow:hidden;margin-top:.4vh}
.meter>i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--a1),var(--a2));transition:width .9s cubic-bezier(.2,.7,.2,1)}
.meter.warn>i{background:linear-gradient(90deg,#c98500,#d95926)}
.meter .tick{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55}

.cols{display:grid;grid-template-columns:1.55fr 1fr;gap:1vw;min-height:0}
.panel{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;
  padding:1.3vh 1.2vw;display:flex;flex-direction:column;min-height:0}
.panel h2{font-size:1.6vh;color:var(--dim);text-transform:uppercase;letter-spacing:2px;
  font-weight:700;margin-bottom:1vh;display:flex;align-items:baseline;gap:.7vw}
.panel h2 small{color:var(--dim);opacity:.75;letter-spacing:0;text-transform:none;font-size:1.4vh}
.stack{display:grid;gap:1vh;min-height:0}

/* Lagracet. Horisontella staplar, 4px rundade andar, 2px lucka mellan
   intilliggande fyllningar, namn direkt pa stapeln. */
.team{display:grid;grid-template-columns:1fr auto;gap:.3vh .8vw;align-items:center}
.team .nm{font-size:2.1vh;font-weight:750;display:flex;align-items:center;gap:.6vw}
.team .sw{width:14px;height:14px;border-radius:4px;flex:0 0 auto}
.team .num{font-size:2.4vh;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.team .meta{color:var(--dim);font-size:1.4vh;font-variant-numeric:tabular-nums}
.bar{grid-column:1/-1;height:16px;border-radius:999px;background:rgba(255,255,255,.06);
  position:relative;overflow:visible}
.bar>i{position:absolute;inset:0 auto 0 0;border-radius:999px;
  box-shadow:0 0 0 2px var(--bg1);transition:width 1s cubic-bezier(.2,.7,.2,1)}
.bar .goal{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.5}
.bar .goal::after{content:attr(data-l);position:absolute;top:-1.5vh;left:50%;transform:translateX(-50%);
  font-size:1.1vh;color:var(--dim);white-space:nowrap}

/* Trend. En serie, ingen legend — rubriken namnger den. Ingen siffra pa
   varje punkt; bara sista vardet far etikett. */
.trend{flex:1 1 auto;min-height:0;position:relative}
.trend svg{width:100%;height:100%;display:block;overflow:visible}
.trend .area{fill:url(#tgrad)}
.trend .line{fill:none;stroke:var(--a1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.trend .dot{fill:var(--a1);stroke:var(--bg1);stroke-width:2}
.trend .gl{stroke:rgba(255,255,255,.07);stroke-width:1}
.trend .ax{fill:var(--dim);font-size:11px}
.trend .lastlbl{fill:var(--ink);font-size:14px;font-weight:700}

/* Topplista med bilder. */
.sel{display:flex;align-items:center;gap:.8vw;padding:.55vh 0;border-top:1px solid var(--line)}
.sel:first-child{border-top:0}
.sel .rk{width:2.4vw;color:var(--dim);font-weight:800;font-size:1.8vh;
  font-variant-numeric:tabular-nums;text-align:right}
.sel .av{width:5vh;height:5vh;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:rgba(255,255,255,.08);display:grid;place-items:center;font-weight:800;font-size:1.8vh;
  border:2px solid transparent}
.sel .av img{width:100%;height:100%;object-fit:cover;display:block}
.sel .who{flex:1 1 auto;min-width:0}
.sel .who b{display:block;font-size:2vh;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sel .who .pbar{height:7px;border-radius:999px;background:rgba(255,255,255,.07);margin-top:.35vh}
.sel .who .pbar>i{display:block;height:100%;border-radius:999px;transition:width .9s}
.sel .vals{text-align:right;flex:0 0 auto}
.sel .vals b{display:block;font-size:2.2vh;font-weight:800;font-variant-numeric:tabular-nums}
.sel .vals span{color:var(--dim);font-size:1.35vh;font-variant-numeric:tabular-nums}

/* Flode. */
.fl{display:flex;gap:.7vw;align-items:center;padding:.5vh 0;border-top:1px solid var(--line)}
.fl:first-child{border-top:0}
.fl .t{color:var(--dim);font-size:1.4vh;width:3.4vw;font-variant-numeric:tabular-nums;flex:0 0 auto}
.fl .n{flex:1 1 auto;min-width:0;font-size:1.8vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl .n small{display:block;color:var(--dim);font-size:1.3vh}
.fl .v{font-size:2vh;font-weight:800;color:var(--a2);font-variant-numeric:tabular-nums}

/* Minimigrans. Status, aldrig farg ensam — alltid med text. */
.minrow{display:flex;flex-wrap:wrap;gap:.5vw;margin-top:.6vh}
.chip{display:inline-flex;align-items:center;gap:.4vw;padding:.35vh .7vw;border-radius:999px;
  border:1px solid var(--line);font-size:1.45vh;font-weight:650}
.chip.ok{color:var(--up);border-color:rgba(52,211,153,.4)}
.chip.under{color:var(--warn);border-color:rgba(251,191,36,.45)}
.chip i{font-style:normal;font-variant-numeric:tabular-nums;opacity:.85}

/* ---- firande ---- */
.celebrate{position:fixed;inset:0;z-index:100;opacity:0;pointer-events:none;
  transition:opacity .45s ease;display:grid;place-items:center}
.celebrate.on{opacity:1}
.celebrate .cel-bg{position:absolute;inset:0;background:
  radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--c) 36%, transparent), transparent 70%),
  rgba(3,5,10,.86);backdrop-filter:blur(6px)}
.celebrate .cel-card{position:relative;display:flex;align-items:center;gap:2.4vw;
  padding:3.4vh 3.4vw;border-radius:28px;background:rgba(255,255,255,.05);
  border:1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow:0 0 90px color-mix(in srgb, var(--c) 30%, transparent);
  transform:scale(.92) translateY(14px);transition:transform .5s cubic-bezier(.2,.9,.25,1.1)}
.celebrate.on .cel-card{transform:none}
.celebrate .cel-av{width:16vh;height:16vh;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:rgba(255,255,255,.08);display:grid;place-items:center;
  font-size:6vh;font-weight:800;border:4px solid var(--c)}
.celebrate .cel-av img{width:100%;height:100%;object-fit:cover}
.celebrate .cel-kicker{color:var(--c);font-size:2vh;font-weight:800;
  text-transform:uppercase;letter-spacing:3px}
.celebrate .cel-name{font-size:7vh;font-weight:800;letter-spacing:-2px;line-height:1.05}
.celebrate .cel-cust{color:var(--dim);font-size:2.4vh;margin-top:.4vh}
.celebrate .cel-val{text-align:right}
.celebrate .cel-val b{display:block;font-size:9vh;font-weight:800;letter-spacing:-4px;
  line-height:1;font-variant-numeric:tabular-nums}
.celebrate .cel-val span{color:var(--dim);font-size:2vh;text-transform:uppercase;letter-spacing:2px}
.celebrate .cel-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.1)}
.celebrate .cel-bar>i{display:block;height:100%;width:100%;background:var(--c);
  transform-origin:left;animation:drain 7s linear forwards}
@keyframes drain{to{transform:scaleX(0)}}

.takeover{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(3,5,10,.95);padding:6vh 6vw;text-align:center}
.takeover p{font-size:7vh;font-weight:800;line-height:1.15;letter-spacing:-2px}

@media (prefers-reduced-motion: reduce){
  .celebrate .cel-card,.bar>i,.meter>i,.sel .who .pbar>i{transition:none}
  .celebrate .cel-bar>i{animation:none}
}

/* Stale-bannern ligger fast langst upp. Utan den har far rubriken ligga
   under den och bli olasbar precis nar nagot ar fel — alltsa nar man som
   mest behover kunna lasa skarmen. */
body.has-stale .dash{padding-top:4.6vh}
body.has-stale .wrap{padding-top:5vh}

/* Lagracet i helskarm ska fylla skarmen, inte klumpa ihop sig hogst upp. */
#rows{align-content:stretch;grid-auto-rows:1fr}
#rows>.team{align-content:center}