/* Projector and broadcast pages: fill a 16:9 screen, no scrolling, readable from across a field. */
body.display { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

/* ---- toolbar that appears on mouse move ---- */
.dchrome { position: fixed; top: .6rem; left: 50%; transform: translate(-50%, -150%); z-index: 100; display: flex; gap: .3rem; padding: .35rem; background: rgba(20,20,22,.94); border: 1px solid var(--line); border-radius: 6px; transition: transform .25s; }
body.awake .dchrome { transform: translate(-50%, 0); }
.dchrome a, .dchrome button { font-family: var(--head); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: .4rem .7rem; border-radius: 3px; background: none; border: 0; cursor: pointer; }
.dchrome a:hover, .dchrome button:hover, .dchrome button.on { color: var(--gold); background: rgba(255,255,255,.05); }
.offline-badge { position: fixed; bottom: 1rem; right: 1rem; z-index: 100; display: none; font-family: var(--head); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; color: #fff; background: var(--red); padding: .4rem .9rem; border-radius: 4px; }
html.offline .offline-badge { display: block; }

/* ---- shared header and footer ---- */
.d-head { display: flex; align-items: center; justify-content: space-between; gap: 2vw; padding: 1.6vh 2.4vw; border-bottom: 1px solid var(--line); flex: none; }
.d-head .ev { display: flex; align-items: center; gap: 1vw; min-width: 0; }
.d-head .ev .za { width: 2.6vw; height: auto; min-width: 26px; }
.d-head .ev b { font-family: var(--head); font-weight: 900; font-size: clamp(1rem, 1.9vw, 2.4rem); text-transform: uppercase; color: #fff; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-head .ev span { font-family: var(--head); font-weight: 700; font-size: clamp(.7rem, 1.05vw, 1.3rem); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.d-head .meta { display: flex; gap: 2.4vw; flex: none; }
.d-head .meta div { text-align: right; }
.d-head .meta b { display: block; font-family: var(--head); font-weight: 900; font-size: clamp(1.2rem, 2.2vw, 2.8rem); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.d-head .meta span { font-family: var(--head); font-weight: 700; font-size: clamp(.6rem, .8vw, 1rem); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.d-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 2vw; padding: 1.2vh 2.4vw 1.6vh; border-top: 1px solid var(--line); font-family: var(--head); font-weight: 700; font-size: clamp(.8rem, 1.2vw, 1.5rem); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.d-foot b { color: #fff; font-weight: 900; }
.d-foot .fstripe { flex: 0 0 18vw; height: .6vh; }
.d-foot .facts { display: flex; gap: 2.5vw; flex-wrap: wrap; }

.d-label { font-family: var(--head); font-weight: 700; font-size: clamp(.8rem, 1.3vw, 1.7rem); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.d-label .count { color: var(--mute); margin-left: .6em; letter-spacing: .1em; }

/* ---- clock ---- */
.clock-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 0; }
.clock-left { display: flex; flex-direction: column; justify-content: center; padding: 2vh 3vw; position: relative; border-right: 1px solid var(--line); min-width: 0; }
.clock-left::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .45vw; background: linear-gradient(180deg, var(--green), var(--gold) 45%, var(--red)); }
.yard-label { font-family: var(--head); font-weight: 700; font-size: clamp(1rem, 2vw, 2.6rem); letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }
.yard-num { font-family: var(--head); font-weight: 900; font-size: min(15vw, 24vh); line-height: .82; color: #fff; font-variant-numeric: tabular-nums; }
.countdown { font-family: var(--head); font-weight: 900; font-size: min(19vw, 34vh); line-height: .85; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 2vh; transition: color .3s; }
.countdown.long { font-size: min(13vw, 26vh); }
.cd-caption { font-family: var(--head); font-weight: 700; font-size: clamp(.9rem, 1.6vw, 2.1rem); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin-top: 1.2vh; }
.hourbar { height: 1.1vh; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 3vh; }
.hourbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--gold) 80%, var(--red)); border-radius: 99px; }
.warning { margin-top: 2.4vh; font-family: var(--head); font-weight: 900; font-style: italic; font-size: clamp(1.2rem, 3vw, 4rem); letter-spacing: .04em; text-transform: uppercase; color: var(--red-ink); min-height: 1.2em; }
body.warn .countdown { color: var(--red-ink); }
body.final .countdown { animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { opacity: .45; } }

.clock-right { display: flex; flex-direction: column; padding: 2.4vh 2.4vw; min-width: 0; min-height: 0; gap: 1.6vh; }
.corral { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); grid-auto-rows: var(--row, 6vh); gap: .5vh 1.4vw; align-content: start; overflow: hidden; }
.crow { display: grid; grid-template-columns: 2em 2.2em 2.6em minmax(0, 1fr) auto; align-items: center; gap: .55em; font-size: var(--fs, 2.2vh); background: var(--card); border: 1px solid var(--line); border-radius: .4em; padding: 0 .7em; min-width: 0; }
.crow .pos { font-family: var(--head); font-weight: 900; color: var(--mute); font-size: 1.05em; }
.crow .av { width: 2.1em; height: 2.1em; border-width: .1em; font-size: 1em; }
.crow .av-fallback { font-size: .7em; width: 2.4em; height: 2.4em; }
.crow .bib { font-family: var(--head); font-weight: 900; color: var(--gold); font-size: 1.25em; }
.crow .nm { font-family: var(--head); font-weight: 700; text-transform: uppercase; color: #fff; font-size: 1.3em; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .tm { font-family: var(--head); font-weight: 900; color: var(--green-ink); font-size: 1.45em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crow.fresh { animation: fresh 6s ease-out; }
@keyframes fresh { 0%, 30% { background: rgba(0,122,77,.45); border-color: var(--green-ink); } 100% { background: var(--card); } }
.empty-note { font-family: var(--head); font-weight: 700; font-size: clamp(1rem, 2vw, 2.4rem); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 2vh 0; }

.oncourse { flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: .8vh .6vw; margin-top: 1vh; }
.chip { display: inline-flex; align-items: center; gap: .45em; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: .2em .8em .2em .2em; font-family: var(--head); font-weight: 700; font-size: clamp(.8rem, 2vh, 1.8rem); text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.chip .av { width: 2em; height: 2em; border-width: .12em; }
.chip .av-fallback { font-size: .8em; width: 2.5em; height: 2.5em; }
.chip b { color: var(--gold); font-weight: 900; }

.banner { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 2vh; background: rgba(12,12,13,.92); text-align: center; }
.banner.show { display: flex; animation: bannerIn .4s ease-out; }
.banner h2 { font-size: min(14vw, 26vh); line-height: .85; margin: 0; }
.banner p { font-family: var(--head); font-weight: 700; font-size: clamp(1.2rem, 3.4vw, 4.4rem); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
@keyframes bannerIn { from { opacity: 0; transform: scale(1.06); } }

.solo { margin-top: 2vh; padding: 1.2vh 1.4vw; border: 2px solid var(--gold); border-radius: 6px; background: rgba(255,184,28,.08); font-family: var(--head); font-weight: 700; font-size: clamp(1rem, 1.9vw, 2.5rem); text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }

.champion { display: flex; align-items: center; gap: 2.4vw; margin-top: 2vh; }
.champion .av { width: min(16vw, 26vh); height: min(16vw, 26vh); border-width: .6vh; }
.champion .av-fallback { font-size: 6vh; }
.champion h2 { font-size: min(7vw, 12vh); margin: 0; }
.champion p { font-family: var(--head); font-weight: 700; font-size: clamp(1rem, 2.4vw, 3.2rem); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* ---- obituaries ---- */
.obit-main { flex: 1; min-height: 0; overflow: hidden; padding: 2.4vh 2.4vw; position: relative; }
.obit-scroll { height: 100%; overflow-y: auto; scrollbar-width: none; }
.obit-scroll::-webkit-scrollbar { display: none; }
.obit-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 2vw; margin-bottom: 2.4vh; }
.obit-title h1 { font-size: min(7vw, 12vh); }
.obit-title h1 span { color: var(--red); }
.obit-title p { font-family: var(--head); font-weight: 700; font-style: italic; font-size: clamp(1rem, 2vw, 2.6rem); text-transform: uppercase; color: var(--mute); letter-spacing: .04em; }
.graves { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(200px, 15vw), 1fr)); gap: 2.2vh 1.6vw; padding-bottom: 4vh; }
.grave { position: relative; text-align: center; padding: 3.2vh 1.2vw 2vh; background: linear-gradient(180deg, #232327, #18181b 60%, #141416); border: 1px solid #34343a; border-bottom: 4px solid #0a0a0b; border-radius: 48% 48% 10px 10px / 26% 26% 10px 10px; box-shadow: inset 0 2px 0 rgba(255,255,255,.04), 0 1.2vh 2.4vh rgba(0,0,0,.45); }
.grave .av { width: min(8vw, 13vh); height: min(8vw, 13vh); margin: 0 auto; filter: grayscale(1) contrast(1.05) brightness(.9); border: 3px solid #3a3a40 !important; }
.grave .av-fallback { font-size: 3.4vh; color: var(--mute); }
.grave .rip { font-family: var(--head); font-weight: 900; font-size: clamp(.9rem, 1.5vw, 1.9rem); letter-spacing: .5em; color: var(--dim); margin: 1.2vh 0 .4vh; padding-left: .5em; }
.grave h3 { font-size: clamp(1.1rem, 1.7vw, 2.2rem); margin: 0; line-height: 1; }
.grave .bib { font-family: var(--head); font-weight: 700; color: var(--mute); letter-spacing: .14em; font-size: clamp(.75rem, 1vw, 1.3rem); }
.grave .yards { font-family: var(--head); font-weight: 900; font-size: clamp(1.4rem, 2.6vw, 3.4rem); color: var(--gold); line-height: 1; margin-top: 1.2vh; font-variant-numeric: tabular-nums; }
.grave .yards em { font-style: normal; font-size: .45em; color: var(--mute); letter-spacing: .14em; margin-left: .3em; }
.grave .cause { margin-top: 1vh; font-size: clamp(.75rem, .95vw, 1.2rem); color: var(--red-ink); font-weight: 600; }
.grave .when { font-size: clamp(.7rem, .85vw, 1.1rem); color: var(--mute); }
.grave .epitaph { margin-top: 1vh; font-family: var(--head); font-style: italic; font-weight: 700; font-size: clamp(.8rem, 1.05vw, 1.35rem); color: #b9b6ae; line-height: 1.2; }
.grave .fresh-tag { position: absolute; top: 1.4vh; right: -0.4vw; transform: rotate(8deg); background: var(--red); color: #fff; font-family: var(--head); font-weight: 900; font-size: clamp(.7rem, .9vw, 1.1rem); letter-spacing: .14em; text-transform: uppercase; padding: .2em .6em; border-radius: 2px; }
.grave.assist { border-color: rgba(255,184,28,.5); }
.no-dead { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 70%; gap: 2vh; text-align: center; }
.no-dead b { font-family: var(--head); font-weight: 900; font-size: min(6vw, 10vh); text-transform: uppercase; color: #fff; line-height: .9; }
.no-dead span { font-family: var(--head); font-weight: 700; font-size: clamp(1rem, 2vw, 2.6rem); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }

/* ---- track ---- */
.track-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 27vw); }
.map-wrap { position: relative; min-height: 0; display: flex; flex-direction: column; padding: 1.5vh 1.5vw 1vh; }
.map-wrap svg.map { flex: 1; min-height: 0; width: 100%; }
.map-wrap svg.profile { flex: none; width: 100%; height: 9vh; margin-top: .4vh; }
.course-shadow { fill: none; stroke: #000; stroke-opacity: .55; stroke-linecap: round; stroke-linejoin: round; }
.course-base { fill: none; stroke: #2e2e34; stroke-linecap: round; stroke-linejoin: round; }
.course-line { fill: none; stroke: #4a4a52; stroke-linecap: round; stroke-linejoin: round; }
.course-done { fill: none; stroke: var(--gold); stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255,184,28,.55)); }
.km-dot { fill: var(--bg); stroke: var(--mute); }
.km-text { font-family: var(--head); font-weight: 700; fill: var(--mute); }
.sf-text { font-family: var(--head); font-weight: 900; fill: #fff; letter-spacing: .12em; }
.runner-g { transition: opacity .8s; }
.runner-g.gone { opacity: 0; }
.runner-ring { stroke: #0c0c0d; }
.runner-bib-bg { fill: #0c0c0d; }
.runner-bib { font-family: var(--head); font-weight: 900; fill: var(--gold); text-anchor: middle; dominant-baseline: central; }
.pace-text { font-family: var(--head); font-weight: 900; fill: var(--gold); letter-spacing: .06em; }
.north { font-family: var(--head); font-weight: 900; fill: var(--mute); }
.profile-area { fill: rgba(0,122,77,.25); stroke: var(--green-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.profile-done { fill: rgba(255,184,28,.28); }
.profile-text { font-family: var(--head); font-weight: 700; fill: var(--mute); }

.side { border-left: 1px solid var(--line); display: flex; flex-direction: column; padding: 2.2vh 1.6vw; gap: 2vh; min-height: 0; background: var(--surface); }
.hud .yard-label { font-size: clamp(.8rem, 1.3vw, 1.7rem); }
.hud .row { display: flex; align-items: baseline; justify-content: space-between; gap: 1vw; }
.hud .yard-num { font-size: min(7vw, 11vh); }
.hud .countdown { font-size: min(7vw, 11vh); margin: 0; }
.hud .countdown.long { font-size: min(3.6vw, 6.5vh); }
.hud .pace { margin-top: 1vh; font-family: var(--head); font-weight: 700; font-size: clamp(.9rem, 1.4vw, 1.8rem); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.hud .pace b { color: #fff; }
.side .list { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: .7vh; margin-top: 1vh; }
.side .item { display: flex; align-items: center; gap: .6vw; font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(.8rem, 1.15vw, 1.5rem); color: #fff; letter-spacing: .03em; }
.side .item .av { width: 2.2em; height: 2.2em; border-width: .12em; }
.side .item .av-fallback { font-size: .8em; width: 2.75em; height: 2.75em; }
.side .item .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .item .bib { color: var(--gold); font-weight: 900; }
.side .item .tm { color: var(--green-ink); font-weight: 900; font-variant-numeric: tabular-nums; }
.side .section { min-height: 0; display: flex; flex-direction: column; }
.side .section.grow { flex: 1; }

/* ---- stats ---- */
.stats-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1.6vw; padding: 2vh 2.4vw; }
.tiles6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--line); flex: none; }
.tiles6 .t { padding: 1.6vh 1.4vw; border-right: 1px solid var(--line); min-width: 0; }
.tiles6 .t:last-child { border-right: none; }
.tiles6 b { display: block; font-family: var(--head); font-weight: 900; font-size: min(3.6vw, 6vh); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiles6 b em { font-style: normal; font-size: .5em; color: var(--mute); }
.tiles6 span { display: block; font-family: var(--head); font-weight: 700; font-size: clamp(.6rem, .85vw, 1.1rem); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-top: .5vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiles6 small { display: block; font-size: clamp(.65rem, .85vw, 1.05rem); color: #fff; margin-top: .3vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board { min-height: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.board-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.board-scroll::-webkit-scrollbar { display: none; }
.board table { width: 100%; border-collapse: collapse; font-size: clamp(.75rem, 1.05vw, 1.4rem); }
.board th { position: sticky; top: 0; background: var(--card-2); text-align: left; font-family: var(--head); font-weight: 700; font-size: .78em; letter-spacing: .15em; text-transform: uppercase; color: var(--mute); padding: 1vh .8vw; white-space: nowrap; }
.board td { padding: .75vh .8vw; border-top: 1px solid var(--line); white-space: nowrap; }
.board .num { text-align: right; font-variant-numeric: tabular-nums; }
.board .pos { font-family: var(--head); font-weight: 900; color: var(--mute); font-size: 1.2em; }
.board .who { display: flex; align-items: center; gap: .6vw; }
.board .who .av { width: 2.2em; height: 2.2em; border-width: .12em; }
.board .who .av-fallback { font-size: .8em; width: 2.75em; height: 2.75em; }
.board .who b { font-family: var(--head); font-weight: 700; text-transform: uppercase; color: #fff; font-size: 1.15em; letter-spacing: .02em; }
.board .who i { font-style: normal; font-family: var(--head); font-weight: 900; color: var(--gold); margin-right: .3em; }
.board .yd { font-family: var(--head); font-weight: 900; font-size: 1.4em; color: var(--gold); }
.board tr.is-out td { opacity: .5; }
.board tr.is-winner td { background: rgba(255,184,28,.1); }
.board .spark { width: 7vw; height: 2.6vh; display: block; }
.board .pill { font-size: .78em; }
.col-r { min-height: 0; display: flex; flex-direction: column; gap: 1.6vh; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.6vh 1.2vw; }
.box .kv { display: grid; grid-template-columns: 1fr auto; gap: .6vh 1vw; margin-top: 1vh; font-size: clamp(.8rem, 1.05vw, 1.35rem); }
.box .kv span { color: var(--mute); }
.box .kv b { font-family: var(--head); font-weight: 900; color: #fff; text-align: right; font-size: 1.15em; font-variant-numeric: tabular-nums; }
.record { margin-top: 1.2vh; }
.record .bar { height: 1.4vh; background: var(--line); border-radius: 99px; overflow: hidden; position: relative; }
.record .bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--green), var(--gold)); border-radius: 99px; }
.record .ends { display: flex; justify-content: space-between; margin-top: .6vh; font-family: var(--head); font-weight: 700; font-size: clamp(.7rem, .95vw, 1.2rem); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.spot { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); overflow: hidden; padding: 0; }
.spot img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.spot .txt { padding: 1.6vh 1.2vw; min-width: 0; overflow: hidden; }
.spot .tag { display: inline-block; font-family: var(--head); font-weight: 700; font-size: clamp(.6rem, .8vw, 1rem); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(255,184,28,.4); padding: 2px 8px; border-radius: 2px; margin-bottom: .8vh; }
.spot h3 { font-size: clamp(1.2rem, 2vw, 2.6rem); margin: 0; }
.spot .from { color: var(--mute); font-size: clamp(.75rem, .9vw, 1.15rem); }
.spot .bio { margin-top: 1vh; font-size: clamp(.75rem, .95vw, 1.2rem); color: var(--ink); opacity: .9; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.spot .facts { display: flex; gap: 1.6vw; margin-top: 1.2vh; }
.spot .facts b { display: block; font-family: var(--head); font-weight: 900; font-size: clamp(1.2rem, 2vw, 2.6rem); color: var(--gold); line-height: 1; }
.spot .facts span { font-family: var(--head); font-weight: 700; font-size: clamp(.55rem, .75vw, .95rem); letter-spacing: .15em; text-transform: uppercase; color: var(--mute); }
.live-pill { display: inline-flex; align-items: center; gap: .5em; font-family: var(--head); font-weight: 900; letter-spacing: .18em; font-size: clamp(.7rem, 1vw, 1.3rem); color: #fff; background: var(--red); padding: .2em .7em; border-radius: 3px; text-transform: uppercase; }
.live-pill::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: #fff; animation: pulse 1.4s steps(2) infinite; }

/* ---- broadcast overlay (transparent) ---- */
html.overlay, html.overlay body { background: transparent !important; }
body.overlay-body { width: 1920px; height: 1080px; position: relative; overflow: hidden; }
.bug { position: absolute; top: 48px; right: 56px; display: flex; align-items: stretch; background: rgba(12,12,13,.92); border: 1px solid #2b2b30; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.bug .flagbar { width: 8px; background: linear-gradient(180deg, var(--green) 0 20%, var(--gold) 20% 40%, #F5F3EE 40% 60%, var(--red) 60% 80%, var(--blue) 80%); }
.bug .cell { padding: 12px 22px; border-left: 1px solid #2b2b30; }
.bug .cell:first-of-type { border-left: 0; }
.bug b { display: block; font-family: var(--head); font-weight: 900; font-size: 48px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.bug .cell.cd b { color: var(--gold); min-width: 3.1em; }
.bug span { font-family: var(--head); font-weight: 700; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.l3 { position: absolute; left: 96px; right: 96px; bottom: 72px; height: 104px; display: flex; background: rgba(12,12,13,.94); border: 1px solid #2b2b30; border-radius: 6px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.l3 .tagblock { flex: none; display: flex; flex-direction: column; justify-content: center; padding: 0 30px; background: var(--gold); color: #111; }
.l3 .tagblock b { font-family: var(--head); font-weight: 900; font-size: 34px; line-height: 1; text-transform: uppercase; }
.l3 .tagblock span { font-family: var(--head); font-weight: 700; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; }
.l3 .msg { flex: 1; position: relative; overflow: hidden; }
.l3 .line { position: absolute; inset: 0; display: flex; align-items: center; gap: 22px; padding: 0 34px; font-family: var(--head); font-weight: 700; font-size: 40px; text-transform: uppercase; letter-spacing: .03em; color: #fff; white-space: nowrap; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.l3 .line.enter { transform: translateY(100%); opacity: 0; }
.l3 .line.leave { transform: translateY(-100%); opacity: 0; }
.l3 .line .k { color: var(--gold); font-weight: 900; }
.l3 .line .av { width: 66px; height: 66px; border-width: 3px; }
.l3 .stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--flag); }