/* Til Bartebyen og tilbake: the E6 as a road-sign system. Odometer for the km, distance signs for the next stops,
   a speed-limit "60" for the personal challenge. Signs keep their own colours in both themes. */
:root {
  --bg:#E9ECE6; --surface:#FFFFFF; --surface2:#F2F4EF; --ink:#12161C; --dim:#4A5565; --line:#D2D7CE; --blue-ink:#0A5BB0;
  --asphalt:#2A2F37; --asphalt-lit:#3B4350; --dash:#8D96A3;
  --sign-blue:#0A5BB0; --sign-green:#00704A; --sign-yellow:#FFD21F; --sign-red:#D3202B; --sign-white:#FFFFFF; --sign-ink:#12161C;
  --odo-bg:#14181F; --odo-ink:#F4F6F8; --odo-tenth-bg:#F4F6F8; --odo-tenth-ink:#14181F;
  --display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#0F1216; --surface:#171B21; --surface2:#1F242C; --ink:#F2F4F7; --dim:#A9B2BF; --line:#2B323C; --blue-ink:#6DB2FF;
    --asphalt:#0B0D10; --asphalt-lit:#232932; --dash:#4A5361; color-scheme:dark; }
}
:root[data-theme="dark"] { --bg:#0F1216; --surface:#171B21; --surface2:#1F242C; --ink:#F2F4F7; --dim:#A9B2BF; --line:#2B323C; --blue-ink:#6DB2FF;
  --asphalt:#0B0D10; --asphalt-lit:#232932; --dash:#4A5361; color-scheme:dark; }

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 var(--body); -webkit-font-smoothing:antialiased; }
.page { max-width:1080px; margin:0 auto; display:grid; gap:14px; padding-block:18px 44px;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family:var(--display); font-weight:700; margin:0; line-height:1; }
h2 { font-size:28px; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
h3 { font-size:21px; margin-bottom:4px; }
p { margin:0; }
.fine { color:var(--dim); font-size:13px; margin-top:10px; }


.card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; min-width:0; }
.stale { background:var(--sign-yellow); color:var(--sign-ink); border-radius:8px; padding:10px 14px; font-size:14px; font-weight:500; }
.stale a { color:inherit; font-weight:600; }

/* hero */
.hero { display:grid; gap:18px 32px; grid-template-columns:1fr; grid-template-areas:"trip" "road" "side"; }
.trip { grid-area:trip; min-width:0; } .side { grid-area:side; min-width:0; display:grid; align-content:center; } .roadbox { grid-area:road; }
/* label + plain note on one baseline */
.cap { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.cap em { font-style:normal; letter-spacing:0; text-transform:none; font-weight:400; font-size:14px; color:var(--dim); }
.odo-row { display:flex; align-items:flex-end; gap:12px; margin-top:10px; }
.odo { display:flex; align-items:flex-end; gap:.05em; font:700 clamp(62px,19vw,116px)/1 var(--display); }
.digit { position:relative; width:.66em; height:1.12em; overflow:hidden; border-radius:.07em; background:var(--odo-bg); color:var(--odo-ink); box-shadow:0 0 0 1px rgba(255,255,255,.14); }
.digit::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(0,0,0,.6), transparent 30%, transparent 70%, rgba(0,0,0,.6)); }
.digit.tenth { background:var(--odo-tenth-bg); color:var(--odo-tenth-ink); }
.digit.tenth::after { background:linear-gradient(rgba(0,0,0,.28), transparent 30%, transparent 70%, rgba(0,0,0,.28)); }
.strip { display:flex; flex-direction:column; transition:transform 1.8s cubic-bezier(.16,.84,.24,1); }
.strip i { display:block; height:1.12em; line-height:1.12em; text-align:center; font-style:normal; }
.comma { width:.22em; text-align:center; line-height:1.12em; color:var(--ink); }
.unit { font:600 clamp(26px,6vw,38px)/1 var(--display); color:var(--dim); padding-bottom:.2em; }
.ofline { margin-top:12px; display:grid; gap:2px; }
.ofline b { font-size:18px; font-weight:600; }
.ofline span { color:var(--dim); font-size:15px; }
.msg { margin-top:16px; font-size:clamp(19px,3.4vw,23px); line-height:1.35; font-weight:600; text-wrap:balance; }
.teamlink { display:inline-flex; justify-self:start; align-items:center; gap:8px; margin-top:6px; min-height:44px; color:var(--blue-ink); font-weight:600; font-size:16px; text-decoration:none; }
.teamlink span { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; }
.teamlink i { font-style:normal; transition:transform .2s; } .teamlink:hover i { transform:translateX(3px); }

/* distance signs */
.signs { display:grid; gap:10px; }
.sign { position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 14px; padding:12px 16px 12px 18px; border-radius:12px;
  background:var(--sign-blue); color:#fff; box-shadow:inset 0 0 0 3px var(--sign-blue), inset 0 0 0 5px #fff; }
.sign .eyebrow { grid-column:1 / -1; font:600 13px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; opacity:.9; margin-bottom:4px; }
.sign .name { font:700 clamp(32px,8vw,40px)/1 var(--display); }
.sign .dist { font:600 24px/1 var(--display); opacity:.95; margin-top:2px; }
.sign svg { grid-row:2 / 4; grid-column:2; width:44px; height:44px; fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.sign.home { background:var(--sign-green); box-shadow:inset 0 0 0 3px var(--sign-green), inset 0 0 0 5px #fff; }

/* the road */
.roadbox { padding-top:6px; }
.lit { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--asphalt-lit); transition:width 1.8s cubic-bezier(.16,.84,.24,1); }
.road { position:relative; height:34px; }
.asphalt { position:absolute; inset:0; border-radius:7px; background:var(--asphalt); overflow:hidden; }
.dashes { position:absolute; left:12px; right:12px; top:50%; height:4px; margin-top:-2px; display:flex; justify-content:space-between; }
.dashes i { width:16px; height:4px; border-radius:1px; background:var(--dash); transition:background-color .35s; }
.dashes i.on { background:var(--sign-yellow); }
.road::after { content:""; position:absolute; left:50%; top:-7px; bottom:-7px; width:4px; margin-left:-2px; background:#fff; border-radius:2px; box-shadow:0 0 0 2px var(--asphalt); }
.pin { position:absolute; top:50%; left:0; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; background:var(--sign-yellow); border:3px solid #111; z-index:2;
  transition:left 1.8s cubic-bezier(.16,.84,.24,1); }
.pin::after { content:""; position:absolute; inset:5px 4px 5px 7px; background:#111; clip-path:polygon(0 0,100% 50%,0 100%); }
.roadlabels { display:grid; grid-template-columns:1fr auto 1fr; margin-top:10px; line-height:1.25; }
.roadlabels b { display:block; font-size:15px; font-weight:600; }
.roadlabels small { display:block; font-size:13px; color:var(--dim); }
.roadlabels span:nth-child(2) { text-align:center; } .roadlabels span:last-child { text-align:right; }

/* route */
.legs { display:grid; gap:8px 36px; grid-template-columns:1fr; }
.stops { list-style:none; margin:0; padding:0; }
.stop { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:4px 14px; align-items:center; padding:11px 0; border-top:1px solid var(--line); }
.stop:first-child { border-top:0; }
.kmpost { text-align:center; padding:5px 0 4px; border-radius:5px; font:700 22px/1 var(--display); border:2px solid var(--line); background:var(--surface2); color:var(--dim); }
.is-done .kmpost { background:var(--sign-green); border-color:var(--sign-green); color:#fff; }
.is-next .kmpost { background:var(--sign-yellow); border-color:var(--sign-yellow); color:var(--sign-ink); }
.stop b { display:block; font-size:18px; font-weight:600; line-height:1.2; }
.stop small { display:block; font-size:14px; color:var(--dim); margin-top:1px; }
.is-todo b { color:var(--dim); }
.state { font-size:14px; color:var(--dim); text-align:right; white-space:nowrap; }
.is-next .state { color:var(--ink); font-weight:600; }
.is-done .state::before { content:"✓ "; color:var(--sign-green); font-weight:700; }

/* 60 km challenge */
.duo { display:grid; gap:14px; grid-template-columns:1fr; }
.lead { color:var(--dim); font-size:15px; margin:-4px 0 6px; }
.lb { list-style:none; margin:0; padding:0; }
.lb li { display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:2px 14px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.lb li:first-child { border-top:0; }
.ring { width:54px; height:54px; display:block; }
.ring .rtrack { fill:none; stroke:var(--line); stroke-width:6; }
.ring .rprog { fill:none; stroke:var(--sign-green); stroke-width:6; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; }
.ring .rfill { fill:var(--sign-green); stroke:none; }
.ring .rtick { fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.ring text { font:700 16px var(--display); fill:var(--ink); text-anchor:middle; dominant-baseline:central; letter-spacing:.02em; }
.who { font-size:17px; font-weight:600; line-height:1.2; overflow-wrap:anywhere; }
.who small { display:block; color:var(--dim); font-weight:400; font-size:14px; margin-top:2px; }
.kmv { font:700 30px/1 var(--display); } .kmv small { font-size:18px; color:var(--dim); font-weight:600; margin-left:3px; }

/* month */
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart .gl { stroke:var(--line); stroke-width:1; } .chart .ax { fill:var(--dim); font:500 12px var(--body); }
.chart .area { fill:var(--blue-ink); opacity:.18; } .chart .cum { fill:none; stroke:var(--blue-ink); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.chart .pace { fill:none; stroke:var(--dim); stroke-width:2; stroke-dasharray:5 5; } .chart .dot { fill:var(--sign-yellow); stroke:#111; stroke-width:2.5; }
.chart .lbl { fill:var(--ink); font:600 13px var(--body); }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:16px; }
.cal .dow { font-size:12px; color:var(--dim); text-align:center; }
.cal .d { aspect-ratio:1; border-radius:6px; display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--dim);
  background:var(--surface2); border:1px solid var(--line); }
.cal .d.has { color:#fff; border-color:transparent; background:color-mix(in srgb, var(--sign-blue) calc(var(--t) * 100%), var(--surface2)); }
.cal .d.today { outline:2px solid var(--ink); outline-offset:1px; }
.cal .d.future { opacity:.45; }
.cal .d { appearance:none; font:inherit; font-size:12px; font-weight:600; padding:0; margin:0; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.cal .d .n { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; }
.cal .d.run .n { background:var(--sign-yellow); color:var(--sign-ink); }
.cal .d.run.future { opacity:.8; }

footer { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--dim); font-size:13px; }
footer a { color:var(--dim); }
footer .flinks { display:flex; gap:6px 18px; flex-wrap:wrap; }
.tip { position:fixed; pointer-events:none; background:var(--sign-ink); color:#fff; padding:6px 10px; border-radius:6px; font-size:13px; opacity:0; transition:opacity .1s; z-index:9; }
.toast { position:fixed; left:50%; transform:translateX(-50%); top:max(18px, env(safe-area-inset-top, 0px)); z-index:20; max-width:calc(100% - 32px); text-align:center;
  background:var(--sign-blue); color:#fff; font:700 28px/1.1 var(--display); padding:14px 24px; border-radius:12px; box-shadow:inset 0 0 0 3px var(--sign-blue), inset 0 0 0 5px #fff, 0 12px 36px #0007;
  animation:pop .5s cubic-bezier(.2,1.4,.4,1); }
.toast[hidden] { display:none; }
@keyframes pop { from { transform:translate(-50%,-30px) scale(.7); opacity:0; } }
canvas.confetti { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:15; }

/* buttons, info box, join banner */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border:0; border-radius:8px; background:var(--sign-blue); color:#fff; font:700 22px/1 var(--display); letter-spacing:.02em; cursor:pointer; text-decoration:none; }
.btn.alt { background:transparent; color:var(--blue-ink); box-shadow:inset 0 0 0 2px var(--blue-ink); }
.btn.quiet { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--line); }
.btn[disabled] { opacity:.4; cursor:default; }
.x { flex:none; width:44px; height:44px; border:0; border-radius:8px; background:transparent; color:var(--dim); font-size:28px; line-height:1; cursor:pointer; }
.join { display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; padding:12px 6px 12px 16px; border-radius:12px; background:var(--surface); border:1px solid var(--line); }
.join[hidden] { display:none; }
.join-t { flex:1 1 220px; display:grid; gap:3px; min-width:0; } .join-t b { font:700 22px/1 var(--display); } .join-t span { font-size:14px; color:var(--dim); }
.join .btn { min-height:44px; font-size:20px; padding:0 18px; }
.info { border:1px solid var(--line); border-radius:10px; margin:6px 0 10px; background:var(--surface2); }
.info summary { display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; list-style:none; font-weight:600; font-size:17px; min-height:48px; }
.info summary::-webkit-details-marker { display:none; }
.info summary::after { content:""; margin-left:auto; width:10px; height:10px; border-right:2.5px solid var(--dim); border-bottom:2.5px solid var(--dim); transform:rotate(45deg); transition:transform .2s; }
.info[open] summary::after { transform:rotate(-135deg); }
.info .i { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:6px; background:var(--sign-blue); color:#fff; font:700 20px/1 var(--display); box-shadow:inset 0 0 0 2px var(--sign-blue), inset 0 0 0 3.5px #fff; }
.info-b { padding:0 14px 16px; display:grid; gap:12px; justify-items:start; }
.info-b p { font-size:16px; max-width:60ch; } .info-b .help { color:var(--dim); font-size:14px; }

/* onboarding sheet */
.sheet { position:fixed; inset:0; z-index:30; display:flex; align-items:flex-end; justify-content:center; }
.sheet[hidden] { display:none; }
.sheet-bg { position:absolute; inset:0; background:rgba(8,10,14,.62); }
.panel { position:relative; width:100%; max-width:560px; max-height:92dvh; overflow:auto; background:var(--surface); color:var(--ink); border-radius:18px 18px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display:grid; gap:16px; outline:none; animation:rise .28s ease-out; }
@keyframes rise { from { transform:translateY(40px); opacity:0; } }
.ob-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; } .ob-head h2 { margin:0; font-size:32px; } .ob-head p { color:var(--dim); font-size:14px; margin-top:4px; }
.panel:focus-visible { outline:none; }
.ob-body a:not(.btn) { color:var(--blue-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.stepper { list-style:none; margin:0; padding:0; display:flex; align-items:center; }
.stepper li { display:flex; } .stepper .link { flex:1; height:4px; border-radius:2px; background:var(--line); } .stepper .link.past { background:var(--sign-blue); } 
.st { width:38px; height:38px; border-radius:50%; border:2px solid var(--line); background:var(--surface); color:var(--dim); font:700 20px/1 var(--display); cursor:pointer; padding:0; }
.st.now { background:var(--sign-blue); border-color:var(--sign-blue); color:#fff; }
.st.past { border-color:var(--sign-blue); color:var(--blue-ink); }
.ob-body { display:grid; gap:14px; align-content:start; min-height:240px; }
.ob-body h3 { font-size:30px; margin:0; } .ob-body p { font-size:16px; } .ob-body ul { margin:0; padding-left:20px; display:grid; gap:8px; } .ob-body li { padding-left:2px; }
.ob-body .row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.buddy { display:grid; gap:8px; background:var(--sign-blue); color:#fff; border-radius:12px; padding:14px 16px; box-shadow:inset 0 0 0 3px var(--sign-blue), inset 0 0 0 5px rgba(255,255,255,.9); }
.buddy b { font:700 24px/1.1 var(--display); } .buddy p { font-size:15px; }
.buddy .btn { background:#fff; color:var(--sign-blue); } .buddy .note { font-size:14px; }
.tipbox { background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:15px; }
.ob-body input[type="text"] { width:100%; min-height:48px; padding:0 14px; border:2px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:18px; }
.ob-body input[type="text"]:focus { outline:none; border-color:var(--sign-blue); }
.ob-foot[hidden] { display:none; }
.ob-foot #ob-next { margin-left:auto; }
.ob-foot.solo #ob-next { width:100%; margin-left:0; }
.ob-foot { display:flex; justify-content:space-between; gap:10px; }
body.locked { overflow:hidden; }

@media (min-width:860px) {
  .sheet { align-items:center; } .panel { border-radius:18px; max-height:86dvh; }
  .page { padding-block:28px 56px; gap:18px; }
  .card { padding:24px; }
  .hero { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-areas:"trip side" "road road"; }
  .side { align-content:start; padding-top:29px; } /* sign level with the odometer, team link under it */
  .legs { grid-template-columns:1fr 1fr; }
  .duo { grid-template-columns:1fr 1fr; align-items:start; }
}
@media (min-width:641px) {
  .sign.home .name { grid-row:1; grid-column:1; }
  .sign.home .dist { grid-row:2; grid-column:1; }
  .sign.home svg { grid-row:1 / 3; grid-column:2; }
}
@media (max-width:640px) {
  .sign { grid-template-columns:1fr auto auto; align-items:center; gap:0 12px; padding:8px 14px 9px 16px; }
  .sign .eyebrow { margin-bottom:3px; font-size:11px; }
  .sign .name { grid-row:2; grid-column:1; font-size:30px; }
  .sign .dist { grid-row:2; grid-column:2; margin:0; font-size:24px; }
  .sign svg { grid-row:2; grid-column:3; width:30px; height:30px; }
  .sign.home .name { font-size:26px; white-space:nowrap; }
}
@media (max-width:420px) {
  .stop { grid-template-columns:56px minmax(0,1fr) auto; gap:4px 12px; }
  .kmpost { font-size:20px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }
:focus-visible { outline:3px solid var(--sign-yellow); outline-offset:2px; }

/* mustaches */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--ink); opacity:.05;
  -webkit-mask:var(--mo-tile) 0 0/260px 260px repeat; mask:var(--mo-tile) 0 0/260px 260px repeat; }
.mo { display:block; flex:none; }
h2 .mo.h { width:46px; height:19px; color:var(--blue-ink); }
.pin { display:grid; place-items:center; }
.pin::after { content:none; }
.pin .mo { width:24px; height:10px; color:#111; }
.join .jm { width:54px; height:22px; color:var(--blue-ink); order:-1; margin-right:2px; }
.ring .rmo { color:var(--ink); }
.ring .rmo.on { color:#fff; }
@media (max-width:640px) { .join .jm { display:none; } }
@media (prefers-reduced-motion:reduce) { .shield { cursor:default; } }

/* header: an overhead E6 sign with a variable message board under it */
.gantry { display:grid; gap:10px; }
.gsign { position:relative; display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:14px; background:var(--sign-green); color:#fff;
  box-shadow:inset 0 0 0 3px var(--sign-green), inset 0 0 0 5.5px #fff; }
.shield { flex:none; display:grid; place-items:center; width:62px; height:40px; border-radius:7px; background:#fff; color:var(--sign-green); font:700 28px/1 var(--display); cursor:pointer; user-select:none; }
.gsign h1 { font:700 clamp(30px,6.4vw,50px)/1 var(--display); letter-spacing:.005em; text-wrap:balance; margin:0; }
.gsign h1 .sep { display:none; }
.gsign h1 .org { display:block; margin-top:6px; font-size:.6em; font-weight:600; letter-spacing:.03em; opacity:.92; }
/* wide screens: one line, "Move for Movember 2026 - Sopra Steria" */
@media (min-width:860px) {
  .gsign h1 .sep { display:inline; }
  .gsign h1 .org { display:inline; margin:0; font-size:1em; font-weight:700; letter-spacing:inherit; opacity:1; }
}
.vms { position:relative; overflow:hidden; padding:13px 16px 14px; border-radius:10px; background:#0a0a0a; box-shadow:inset 0 0 0 2px #2a2a2a, 0 0 0 1px var(--line);
  font:700 clamp(24px,5.6vw,36px)/1.2 var(--display); letter-spacing:.07em; filter:drop-shadow(0 0 5px rgba(255,170,0,.28)); animation:crt 2.8s steps(1,end) .5s 1 forwards; }
/* wide screens: both lines are split at the comma, so the comma stays put when the line is swapped */
.msgs { display:grid; justify-content:center; animation:tear 2.8s steps(1,end) .5s 1 forwards; }
.bm { display:contents; }
.p.a { opacity:1; animation:showa 2.8s steps(1,end) .5s 1 forwards; }
.p.b { opacity:0; animation:showb 2.8s steps(1,end) .5s 1 forwards; }
@media (min-width:641px) {
  .msgs { grid-template-columns:auto auto; column-gap:.35em; }
  .p { grid-row:1; display:block; }
  .p.l { grid-column:1; justify-self:end; text-align:right; white-space:nowrap; }
  .p.r { grid-column:2; justify-self:start; text-align:left; text-wrap:balance; }
}
/* phones: each line is simply centred and wraps on its own */
@media (max-width:640px) {
  .msgs { grid-template-columns:1fr; }
  .bm { display:block; grid-area:1 / 1; text-align:center; text-wrap:balance; }
}
.led { color:transparent; background:radial-gradient(circle at 50% 50%,#ffb11a 0 1.15px,transparent 1.5px) 0 0/3.3px 3.3px; -webkit-background-clip:text; background-clip:text; }
.vms::before { content:""; position:absolute; left:0; right:0; top:0; height:24%; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(255,205,130,.3),transparent); animation:sweep 2.8s linear .5s 1 forwards; }
.vms::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px); }
/* the line from the song first, then one glitchy swap to the real challenge, which stays */
@keyframes showa { 0%,78% { opacity:1; } 79.5% { opacity:0; } 82% { opacity:1; } 85% { opacity:0; } 87% { opacity:1; } 89%,100% { opacity:0; } }
@keyframes showb { 0%,78% { opacity:0; } 79.5% { opacity:1; } 82% { opacity:0; } 85% { opacity:1; } 87% { opacity:0; } 89%,100% { opacity:1; } }
@keyframes tear { 0%,78% { transform:none; filter:none; opacity:1; } 78.6% { transform:translateX(-6px) skewX(-10deg); filter:drop-shadow(3px 0 0 rgba(255,40,80,.95)) drop-shadow(-3px 0 0 rgba(0,220,255,.95)); opacity:.55; } 81% { transform:translateX(7px) skewX(6deg); filter:drop-shadow(3px 0 0 rgba(255,40,80,.95)) drop-shadow(-3px 0 0 rgba(0,220,255,.95)); opacity:1; }
  83.5% { transform:translateX(-3px); filter:drop-shadow(3px 0 0 rgba(255,40,80,.95)) drop-shadow(-3px 0 0 rgba(0,220,255,.95)); opacity:.3; } 86% { transform:translateX(5px) skewX(-5deg); filter:drop-shadow(3px 0 0 rgba(255,40,80,.95)) drop-shadow(-3px 0 0 rgba(0,220,255,.95)); opacity:.9; } 88.5% { transform:translateX(-2px); filter:drop-shadow(3px 0 0 rgba(255,40,80,.95)) drop-shadow(-3px 0 0 rgba(0,220,255,.95)); opacity:.6; } 91%,100% { transform:none; filter:none; opacity:1; } }
@keyframes crt { 0%,78% { transform:none; filter:drop-shadow(0 0 5px rgba(255,170,0,.28)); } 78.6% { transform:translateX(3px); filter:drop-shadow(0 0 5px rgba(255,170,0,.28)) brightness(1.7); } 82.5% { transform:translateX(-3px); filter:drop-shadow(0 0 5px rgba(255,170,0,.28)) brightness(.6); } 86% { transform:translateX(2px); filter:drop-shadow(0 0 5px rgba(255,170,0,.28)) brightness(1.5); } 90%,100% { transform:none; filter:drop-shadow(0 0 5px rgba(255,170,0,.28)); } }
@keyframes sweep { 0%,78% { transform:translateY(-150%); opacity:0; } 79% { opacity:1; } 92% { transform:translateY(520%); opacity:0; } 100% { transform:translateY(520%); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .vms, .msgs, .vms::before, .p { animation:none; } .p.a { display:none; } .p.b { opacity:1; } }
/* phones: shield beside the title, team name as a second line */
@media (max-width:640px) {
  .gsign { gap:12px; padding:14px 16px 15px; }
  .shield { width:50px; height:34px; font-size:23px; }
  .gsign h1 { font-size:clamp(21px,6.9vw,40px); line-height:.95; white-space:nowrap; }
  .gsign h1 .org { margin-top:5px; font-size:.68em; }
}