/* CySEC Club NFSU Dharwad · Gh057_Society scoreboard
   Layout: one "event card" — a bone clock slab (rolling digits) docked on a dark
   orbit stage where the club emblem sits like a planet, lists hugging its arc. */
:root{
  --void:#050708; --deep:#0a171c; --panel:#0b1114; --panel-2:#0e161a;
  --line:#1a252b; --line-2:#26343c;
  --fg:#e9eef0; --dim:#7d8a91; --faint:#3b4950;
  --bone:#e6e4de; --bone-2:#d9d6ce; --ink:#0b0b0c; --ink-dim:#8c887f;
  --blood:#ff2b3d; --blood-deep:#8f0d1a; --ice:#7be3f2; --ice-deep:#1d5c68;
  --ok:#41d99a; --warn:#ffc857;
  --f-digit:"Orbitron","Eurostile","Bank Gothic",ui-sans-serif,system-ui,sans-serif;
  --f-head:"Chakra Petch","Rajdhani","Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:clamp(16px,2.4vw,32px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--fg);font:14px/1.5 var(--f-mono);overflow-x:hidden;min-height:100%}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* ───────── top bar ───────── */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px var(--gutter);background:rgba(5,7,8,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.emb{display:block;background:var(--fg);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.brand .emb{width:30px;height:30px}
.brand b{display:block;font:700 13px/1 var(--f-head);letter-spacing:.14em}
.brand small{display:block;font:500 10px/1.2 var(--f-head);letter-spacing:.22em;color:var(--dim);margin-top:3px}
.seg{display:flex;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel);margin-inline:auto;overflow-x:auto;max-width:100%}
.seg a{padding:6px 14px;border-radius:999px;text-decoration:none;font:600 11px/1 var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;transition:color .2s,background .2s}
.seg a:hover{color:var(--fg)}
.seg a.on{background:var(--line-2);color:var(--fg)}
.seg a.on::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ok);margin-right:7px;vertical-align:2px;box-shadow:0 0 6px var(--ok)}
.top-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--line-2);border-radius:3px;font:700 10px/1 var(--f-head);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.chip.open{color:var(--ok);border-color:rgba(65,217,154,.35)}
.chip.paused{color:var(--warn);border-color:rgba(255,200,87,.4)}
.chip.over{color:var(--blood);border-color:rgba(255,43,61,.4)}
.chip.demo{color:var(--ice);border-color:rgba(123,227,242,.35)}
.chip.admin{color:var(--blood);border-color:rgba(255,43,61,.45)}
.live{font:700 10px/1 var(--f-head);letter-spacing:.2em;color:var(--blood);display:inline-flex;align-items:center;gap:6px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--blood);box-shadow:0 0 8px var(--blood);animation:beat 1.4s infinite}
@keyframes beat{50%{opacity:.2}}

.wrap{padding-inline:var(--gutter);padding-block:20px 64px;max-width:1500px;margin:0 auto;display:grid;gap:22px}
.sec-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.sec-h h2{margin:0;font:700 12px/1 var(--f-head);letter-spacing:.22em;text-transform:uppercase;color:var(--fg)}
.sec-h span{font-size:11px;color:var(--dim)}
.sec-h .r{margin-left:auto}

/* ───────── event card = slab + stage ───────── */
.event{border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.slab{background:var(--bone);color:var(--ink);padding:18px clamp(16px,2.6vw,36px) 16px;position:relative}
.slab-head{display:flex;align-items:center;gap:12px;font:700 11px/1 var(--f-head);letter-spacing:.16em;text-transform:uppercase}
.slab-head .emb{width:20px;height:20px;background:var(--ink)}
.slab-head .t2{color:var(--ink-dim);font-weight:600}
.slab-head .dots{margin-left:auto;display:grid;grid-template-columns:repeat(2,4px);gap:3px}
.slab-head .dots i{width:4px;height:4px;background:var(--ink);border-radius:1px}
.slab-body{display:flex;gap:clamp(16px,3vw,48px);align-items:flex-end;flex-wrap:wrap;margin-top:14px}
.clock{min-width:0;flex:1 1 560px;--odo-fs:clamp(54px,11.6vw,196px)}
.odo-labels{display:flex;font:500 10px/1 var(--f-head);letter-spacing:.14em;text-transform:lowercase;color:var(--ink-dim);margin-bottom:6px}
.odo-labels span:nth-child(1){width:calc(var(--odo-fs) * 1.86)}
.odo-labels span:nth-child(2){width:calc(var(--odo-fs) * 1.92)}
.clock-state{font:700 11px/1 var(--f-head);letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px;display:flex;gap:10px;align-items:center}
.clock-state b{background:var(--ink);color:var(--bone);padding:4px 7px;border-radius:2px}
.clock-state.over b{background:var(--blood)}

/* rolling odometer */
.odo{display:flex;align-items:flex-start;font-family:var(--f-digit);font-weight:900;font-size:var(--odo-fs);line-height:1;color:var(--ink);user-select:none}
.odo-d{position:relative;display:block;height:1em;width:.93em;overflow:hidden}
.odo-reel{display:block;will-change:transform;transition:transform .62s cubic-bezier(.18,.9,.22,1.12)}
.odo-reel.snap{transition:none}
.odo-reel span{display:block;height:1em;text-align:center}
.odo-sep{display:flex;flex-direction:column;justify-content:center;gap:.17em;height:1em;width:.16em;align-items:center}
.odo-sep i{display:block;width:.075em;height:.075em;background:var(--ink-dim)}
.odo-g{display:flex}
.odo-sec{display:flex;align-items:flex-start;font-size:.42em;margin-top:-.62em}
.odo-sec .odo-sep{height:2.6em;padding-top:0}
.odo-sec .odo-d{height:2.6em;width:.9em;-webkit-mask:linear-gradient(transparent 0,rgba(0,0,0,.18) 20%,#000 31%,#000 69%,rgba(0,0,0,.18) 80%,transparent);mask:linear-gradient(transparent 0,rgba(0,0,0,.18) 20%,#000 31%,#000 69%,rgba(0,0,0,.18) 80%,transparent)}
.odo-sec .odo-reel{padding-top:.8em}
.odo-sec .odo-sep{justify-content:center}

.rail{position:relative;height:14px;margin-top:14px}
.rail::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:radial-gradient(circle,var(--ink-dim) 1px,transparent 1.4px) 0 0/14px 2px repeat-x;opacity:.7}
.rail i{position:absolute;top:2px;width:10px;height:10px;border-radius:50%;background:var(--ink);transform:translateX(-50%);transition:left 1s var(--ease)}
.rail i::after{content:"";position:absolute;inset:-5px;border:1px solid var(--ink);border-radius:50%;opacity:.35}
.rail b{position:absolute;left:0;top:6px;height:2px;background:var(--ink);transition:width 1s var(--ease)}

.cities{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:4px 18px;flex:0 1 560px;min-width:0}
.city small{display:block;font:600 10px/1.2 var(--f-head);letter-spacing:.06em;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.city b{display:block;font:700 clamp(15px,1.5vw,20px)/1.25 var(--f-digit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.city b.red{color:var(--blood-deep)}

/* ───────── stage ───────── */
.stage{position:relative;background:
  radial-gradient(55% 75% at 50% 62%,#0f2c35 0%,#0a1b21 40%,var(--void) 82%);
  display:flex;flex-direction:column;overflow:hidden}
.signal{padding:16px clamp(16px,2.6vw,36px) 0;position:relative;z-index:3}
.signal-h{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font:600 10px/1 var(--f-head);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.signal-h .lg{display:flex;gap:14px;margin-left:auto;letter-spacing:.08em}
.signal-h .lg span{display:inline-flex;align-items:center;gap:6px}
.signal-h .lg i{width:10px;height:3px;border-radius:1px;display:inline-block}
.signal canvas{display:block;width:100%;height:96px}
.orbit{position:relative;flex:1;min-height:max(clamp(520px,50vw,700px),var(--need,0px))}
.orbit svg.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}

.core{position:absolute;left:var(--cx,50%);top:var(--cy,50%);width:var(--d,380px);height:var(--d,380px);transform:translate(-50%,-50%);z-index:1}
.core-atmo{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,rgba(123,227,242,.0) 58%,rgba(123,227,242,.22) 66%,rgba(123,227,242,.05) 72%,transparent 76%);filter:blur(2px)}
.core-disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(70% 70% at 38% 32%,#173c47 0%,#0c242c 45%,#061015 78%);
  box-shadow:inset -18px -26px 60px rgba(0,0,0,.65),inset 10px 12px 40px rgba(123,227,242,.18),0 0 70px rgba(123,227,242,.28),0 0 2px 1px rgba(123,227,242,.55)}
.core-grid{position:absolute;inset:0;border-radius:50%;opacity:.35;
  background:radial-gradient(circle,rgba(123,227,242,.55) 0 1px,transparent 1.5px) 0 0/18px 18px;
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);animation:drift 40s linear infinite}
@keyframes drift{to{background-position:180px 0}}
.core-eyes{position:absolute;inset:0}
.core-eyes i{position:absolute;top:37.9%;width:9%;height:6%;border-radius:50%;background:radial-gradient(closest-side,#ff5a66,var(--blood) 45%,transparent);transform:translate(-50%,-50%);opacity:.75;transition:opacity .4s,filter .4s}
.core-eyes i:nth-child(1){left:43.4%}.core-eyes i:nth-child(2){left:57%}
.core.flare .core-eyes i{opacity:1;filter:blur(1px) brightness(1.6)}
.core .emb{position:absolute;inset:6%;background:linear-gradient(170deg,#f4f7f8 30%,#b9d6dc);filter:drop-shadow(0 0 14px rgba(123,227,242,.35))}
.core-rings{position:absolute;inset:-13%;width:126%;height:126%;overflow:visible}
.core-rings .r1{transform-origin:50% 50%;animation:spin 60s linear infinite}
.core-rings .r2{transform-origin:50% 50%;animation:spin 90s linear infinite reverse}
.core-rings .r3{transform-origin:50% 50%;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ping{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%) scale(.6);pointer-events:none;opacity:0;
  background:repeating-radial-gradient(circle,rgba(255,43,61,.5) 0 1px,transparent 1px 4px);border:2px solid rgba(255,43,61,.8)}
.ping.go{animation:ping 1.5s var(--ease) forwards}
@keyframes ping{0%{opacity:.9;transform:translate(-50%,-50%) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}

/* arc rows */
.arc-h{position:absolute;font:600 9px/1 var(--f-head);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);z-index:2;white-space:nowrap}
.arc-row{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;white-space:nowrap;z-index:2;
  font:400 var(--fs,11px)/1 var(--f-mono);color:var(--dim);
  transition:transform 1s var(--ease),opacity .6s,color .3s;will-change:transform}
.arc-row.L{flex-direction:row}
.arc-row .nm{color:#a9b6bc}
.arc-row .pts{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums;min-width:3.4em;text-align:right}
.arc-row .rk{color:var(--faint);font-variant-numeric:tabular-nums}
.arc-row .lvn{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.arc-row .sk{color:var(--dim);max-width:16em;overflow:hidden;text-overflow:ellipsis}
.arc-row .ct{color:var(--fg);font-variant-numeric:tabular-nums;min-width:1.6em;text-align:right}
.arc-row .fb{color:var(--blood);font-weight:700}
.arc-row .dash{display:inline-block;height:3px;width:var(--w,60px);border-radius:1px;
  background:linear-gradient(90deg,var(--c,var(--fg)) var(--p,0%),var(--faint) var(--p,0%));
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 7px);mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 7px)}
.arc-row .tick{display:inline-block;width:14px;height:1px;background:var(--faint)}
.arc-row.top1 .nm{color:var(--warn);font-weight:700}
.arc-row.me .nm{color:var(--ice);font-weight:700}
.arc-row.dimmed{opacity:.35}
.arc-row.hot{color:var(--fg)}
.arc-row.hot .nm,.arc-row.hot .lvn,.arc-row.hot .sk{color:#fff;font-weight:700}
.arc-row.hot .tick{background:var(--blood);box-shadow:0 0 6px var(--blood)}
.arc-row.hot .dash{--c:var(--blood)}
.arc-row.hot::after{content:"";position:absolute;inset:-5px -10px;border-radius:3px;background:rgba(255,43,61,.13);z-index:-1;animation:hotfade 3.2s forwards}
@keyframes hotfade{0%,70%{opacity:1}100%{opacity:0}}
.links path{fill:none;stroke:var(--blood);stroke-width:1.2;stroke-dasharray:4 4;filter:drop-shadow(0 0 3px var(--blood));animation:linkfade 3.2s forwards}
@keyframes linkfade{0%{opacity:0}10%,70%{opacity:1}100%{opacity:0}}

/* gauges */
.gauges{position:absolute;left:var(--cx,50%);top:var(--gy,75%);transform:translate(-50%,-50%);display:flex;gap:clamp(8px,1.4vw,18px);z-index:3}
.gauge{width:var(--gd,92px);height:var(--gd,92px);border-radius:50%;position:relative;
  background:radial-gradient(circle at 40% 30%,rgba(255,255,255,.14),rgba(20,44,52,.35) 60%);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(7px) saturate(1.2);-webkit-backdrop-filter:blur(7px) saturate(1.2);
  box-shadow:inset 0 0 18px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.4)}
.gauge svg{position:absolute;inset:0;width:100%;height:100%}
.gauge .trk{fill:none;stroke:rgba(255,255,255,.13);stroke-width:5}
.gauge .val{fill:none;stroke:var(--gc,var(--ice));stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1.2s var(--ease);filter:drop-shadow(0 0 4px var(--gc,var(--ice)))}
.gauge .tk{stroke:rgba(255,255,255,.22);stroke-width:1}
.gauge .gv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center}
.gauge .gv b{font:700 calc(var(--gd,92px) * .2)/1 var(--f-digit);color:#fff;font-variant-numeric:tabular-nums}
.gauge .gv small{font:600 8px/1.1 var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:#b9c6cc;max-width:80%}

/* bottom overlays (echo of the city title + date box) */
.dock{position:absolute;left:clamp(16px,2.6vw,36px);right:clamp(16px,2.6vw,36px);bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;z-index:4;pointer-events:none}
.headline{font:700 clamp(22px,3.1vw,44px)/1.02 var(--f-head);letter-spacing:.01em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.6);min-width:0;overflow-wrap:anywhere}
.headline small{display:block;font:600 11px/1 var(--f-head);letter-spacing:.24em;color:var(--dim);margin-bottom:8px}
.headline em{font-style:normal;color:var(--blood)}
.datebox{background:rgba(230,228,222,.1);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px 16px;border-radius:4px;font:600 11px/1.3 var(--f-head);color:#cfd8dc;min-width:150px;letter-spacing:.04em}
.datebox b{display:block;font:700 16px/1.2 var(--f-head);color:#fff}

/* flat (narrow) orbit */
.orbit.flat{min-height:0;display:grid;gap:18px;padding:12px 16px 20px}
.orbit.flat .core{position:relative;left:auto;top:auto;transform:none;margin:28px auto 10px;--d:min(64vw,260px)}
.orbit.flat .gauges{position:static;transform:none;justify-content:center;--gd:84px;margin-top:-56px}
.orbit.flat .arc-list{display:grid;gap:7px;border-top:1px solid var(--line);padding-top:12px}
.orbit.flat>*{min-width:0}
.orbit.flat .arc-row{position:relative;transform:none!important;justify-content:flex-start;width:100%;min-width:0}
.orbit.flat .arc-row.L{flex-direction:row-reverse;justify-content:flex-end}
.orbit.flat .arc-row .nm,.orbit.flat .arc-row .sk{flex:1;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis}
.orbit.flat .core{order:1}.orbit.flat .gauges{order:2}.orbit.flat .arc-h.L{order:3}.orbit.flat .arc-list.L{order:4}
.orbit.flat .arc-h.R{order:5;margin-top:10px}.orbit.flat .arc-list.R{order:6}.orbit.flat .dock{order:7}
.orbit.flat .arc-h{position:static}
.orbit.flat .dock{position:static;flex-wrap:wrap}
.orbit.flat svg.links{display:none}
.orbit.flat .arc-row .tick{display:none}

/* ───────── panels ───────── */
.panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:8px;padding:18px;min-width:0}
.cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px}
@media (max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}}

.field{display:grid;gap:6px}
.field label{font:600 10px/1 var(--f-head);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.inp{width:100%;background:#060a0c;border:1px solid var(--line-2);border-radius:4px;padding:13px 14px;color:var(--fg);font:400 15px/1.2 var(--f-mono);transition:border-color .2s,box-shadow .2s}
.inp:focus{outline:none;border-color:var(--ice);box-shadow:0 0 0 3px rgba(123,227,242,.14)}
.inp.bad{border-color:var(--blood);animation:shake .4s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:4px;padding:12px 20px;cursor:pointer;
  font:700 12px/1 var(--f-head);letter-spacing:.2em;text-transform:uppercase;background:var(--fg);color:var(--void);transition:transform .15s,filter .2s,background .2s}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(1px)}
.btn.red{background:var(--blood);color:#fff}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--fg)}
.btn.ghost:hover{border-color:var(--dim)}
.btn.sm{padding:7px 11px;font-size:10px;letter-spacing:.14em}
.btn.ink{background:var(--ink);color:var(--bone)}
.btn.ink-ghost{background:transparent;color:var(--ink);border-color:rgba(11,11,12,.3)}
.btn.ink-red{background:transparent;color:var(--blood-deep);border-color:rgba(143,13,26,.45)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.msg{min-height:1.4em;font-size:13px;margin-top:10px}
.msg.ok{color:var(--ok)}.msg.err{color:var(--blood)}.msg.warn{color:var(--warn)}

/* level strip (31 cells) */
.strip{display:grid;grid-template-columns:repeat(31,minmax(0,1fr));gap:3px}
.strip i{height:22px;border-radius:2px;background:var(--line);position:relative;transition:background .4s}
.strip i.c{background:var(--bone)}
.strip i.f{background:var(--blood)}
.strip i.n{background:transparent;box-shadow:inset 0 0 0 1px var(--ice);animation:beat 1.6s infinite}
.strip.sm i{height:9px;border-radius:1px}
.strip.xs{gap:2px}.strip.xs i{height:7px;border-radius:1px}

/* tables */
.tbl-wrap{overflow-x:auto;min-width:0;position:relative}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
.t th{text-align:left;font:600 10px/1 var(--f-head);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.t td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.t td.r,.t th.r{text-align:right}
.t tr{transition:background .3s}
.t tbody tr:hover{background:rgba(123,227,242,.03)}
.t tr.flash{animation:rowflash 1.6s}
@keyframes rowflash{0%{background:rgba(255,43,61,.22)}100%{background:transparent}}

/* toasts */
.toasts{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;z-index:80;max-width:min(380px,calc(100vw - 32px))}
.toast{background:rgba(11,17,20,.95);border:1px solid var(--line-2);border-radius:6px;padding:11px 14px;font-size:12.5px;display:flex;gap:10px;align-items:flex-start;
  box-shadow:0 10px 30px rgba(0,0,0,.5);animation:tin .45s var(--ease)}
.toast i{width:6px;height:6px;border-radius:50%;margin-top:6px;flex:none;background:var(--ice)}
.toast.ok i{background:var(--ok)}.toast.err i{background:var(--blood)}.toast.fb i{background:var(--blood);box-shadow:0 0 8px var(--blood)}
.toast.out{animation:tout .35s forwards}
@keyframes tin{from{opacity:0;transform:translateY(12px)}}
@keyframes tout{to{opacity:0;transform:translateX(30px)}}

/* modal */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(2,3,4,.72);backdrop-filter:blur(4px)}
.modal-card{width:min(440px,100%);background:var(--panel);border:1px solid var(--line-2);border-radius:8px;padding:22px;display:grid;gap:14px;animation:tin .3s var(--ease)}
.modal-card h3{margin:0;font:700 16px/1.2 var(--f-head);letter-spacing:.06em}
.modal-card p{margin:0;color:var(--dim);font-size:13px}
.modal-card .row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* first-blood / capture moment */
.moment{position:fixed;inset:0;z-index:85;display:grid;place-items:center;pointer-events:none;overflow:hidden}
.moment .disc{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;border-radius:50%;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(255,43,61,.42),rgba(143,13,26,.55) 45%,rgba(143,13,26,.0) 70%),repeating-radial-gradient(circle,rgba(255,80,90,.35) 0 1px,transparent 1px 5px);
  animation:disc 2.8s var(--ease) forwards}
.moment.ok .disc{background:radial-gradient(circle,rgba(123,227,242,.3),rgba(29,92,104,.4) 45%,transparent 70%),repeating-radial-gradient(circle,rgba(123,227,242,.25) 0 1px,transparent 1px 5px)}
@keyframes disc{0%{transform:translate(-50%,-50%) scale(0);opacity:1}55%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.moment .txt{position:relative;text-align:center;animation:mtxt 2.8s var(--ease) forwards;padding:0 16px}
.moment .txt small{display:block;font:700 12px/1 var(--f-head);letter-spacing:.4em;color:#ffd0d4}
.moment .txt b{display:block;font:900 clamp(40px,9vw,120px)/1 var(--f-digit);color:#fff;text-shadow:0 0 40px rgba(255,43,61,.9);margin:12px 0}
.moment.ok .txt b{text-shadow:0 0 40px rgba(123,227,242,.8)}
.moment .txt span{font:700 clamp(14px,2vw,22px)/1.2 var(--f-head);letter-spacing:.08em;color:#fff}
@keyframes mtxt{0%{opacity:0;transform:scale(1.25);filter:blur(8px)}15%{opacity:1;transform:scale(1);filter:blur(0)}75%{opacity:1}100%{opacity:0;transform:scale(.96)}}

/* boot-in for arcs & slab */
.event .slab{animation:slabIn .9s var(--ease) both}
@keyframes slabIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.core{animation:coreIn 1.4s var(--ease) both .2s}
@keyframes coreIn{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}}
.orbit.flat .core{animation:none}

.chart-empty{color:var(--dim);text-align:center;padding:80px 0;font-size:12px}
svg.chart{display:block;max-width:100%}
@keyframes draw{to{stroke-dashoffset:0}}
.foot{color:var(--dim);font-size:11px;text-align:center;display:grid;gap:4px}
.foot b{color:var(--fg);font-weight:400}

@media (max-width:720px){
  .seg{order:3;margin-inline:0;width:100%}
  .top-r{margin-left:auto}
  .cities{--n:3!important}
  .odo-labels{display:none}
  .signal canvas{height:74px}
  .signal-h .lg{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}