/* =====================================================================
   THEDROPCLOCK · STYLE
   Canvas is 1920x1080 (landscape) or 1080x1920 (?layout=vertical) and is
   scaled to fit whatever window it is shown in.
   ===================================================================== */

:root {
  --a1: #ff2e88; --a2: #ff8a3d; --ink: #1c0d33; --bg1: #241040; --bg2: #120824;
  --night: #0d0618; --panel: #1c0d33; --card: #2a1548; --lilac: #f6eefc; --muted: #c9b6de; --dim: #a892c4;
  --teal: #29d3c2; --pink: #ff2e88; --orange: #ff8a3d; --yellow: #ffc93c; --red: #d7263d;
}

html, body { margin: 0; height: 100%; background: #0d0618; overflow: hidden; }
/* Phones/tablets: no pinch-zoom, no bounce, no text inflation; the page always fills the screen */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: fixed; inset: 0; touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
* { box-sizing: border-box; }

#app { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden;
       background: var(--night); color: var(--lilac); font-family: 'Barlow', sans-serif; }
#app.landscape { width: 1920px; height: 1080px; }
#app.vertical  { width: 1080px; height: 1920px; }

.wordmark { font-family: Anton, sans-serif; color: #fff; letter-spacing: .02em; white-space: nowrap; line-height: 1; }
.wordmark span { color: var(--orange); }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1), visibility 0s .7s; }
.screen.on { opacity: 1; visibility: visible; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1), visibility 0s; }
#event { transform: scale(1.06); }
#event.on { transform: none; }
#menu.leaving { transform: scale(1.02); }

/* ---------- regions (positions per layout) ---------- */
.region { position: absolute; overflow: hidden; container-type: size; }
.landscape .r-stage    { left: 43px;  top: 37px;  width: 1209px; height: 680px; }
.landscape .r-panel    { left: 1294px; top: 37px; width: 583px;  height: 680px; }
.landscape .r-strap    { left: 43px;  top: 733px; width: 1834px; height: 80px; }
.landscape .r-count    { left: 0;     top: 829px; width: 603px;  height: 149px; }
.landscape .r-headline { left: 603px; top: 829px; width: 1317px; height: 149px; }
.landscape .r-ticker   { left: 0;     top: 979px; width: 1920px; height: 101px; }

.vertical .r-count    { left: 40px; top: 40px;   width: 1000px; height: 250px; border-radius: 8px; }
.vertical .r-strap    { left: 40px; top: 306px;  width: 1000px; height: 100px; }
.vertical .r-stage    { left: 40px; top: 422px;  width: 1000px; height: 563px; }
.vertical .r-headline { left: 40px; top: 1001px; width: 1000px; height: 170px; border-radius: 8px; }
.vertical .r-panel    { left: 40px; top: 1187px; width: 1000px; height: 593px; }
.vertical .r-ticker   { left: 0;    top: 1800px; width: 1080px; height: 120px; }

/* ---------- event background ---------- */
.ev-bg { position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 85% 10%, var(--a1-22), transparent 70%),
    radial-gradient(50% 50% at 10% 95%, var(--a2-18), transparent 70%),
    linear-gradient(160deg, var(--bg1), var(--bg2)); transition: background 1s ease; }

/* =====================================================================
   STAGE (centre window)
   ===================================================================== */
.r-stage { border-radius: 6px; background: var(--bg2); }
.stage { position: absolute; inset: 0; }
.stage-top { position: absolute; left: 3cqh; right: 3cqh; top: 3cqh; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 2cqh; pointer-events: none; }
.ev-chip { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 5cqh; letter-spacing: .1em; color: var(--ink);
           background: var(--a1); padding: .5cqh 1.8cqh; line-height: 1.15; box-shadow: 0 1cqh 3cqh rgba(0,0,0,.35); border-radius: 3px; white-space: nowrap; }
.next-up { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 3.2cqh; letter-spacing: .1em; color: #fff;
           background: rgba(13,6,24,.75); padding: .6cqh 1.4cqh; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.next-up b { color: var(--a2); font-weight: 700; }
.stage-progress { position: absolute; left: 0; right: 0; bottom: 0; height: .8cqh; background: rgba(255,255,255,.08); z-index: 6; }
.bar { height: 100%; width: 0; background: var(--a1); }
.bar.run { animation: fill var(--t, 10s) linear forwards; }
@keyframes fill { to { width: 100%; } }

.seg { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.seg.in { opacity: 1; }

/* ---- fact slide ---- */
.fact { display: grid; grid-template-columns: 54% 46%;
        background:
          radial-gradient(120% 90% at 100% 0%, var(--a1-34) 0%, transparent 60%),
          radial-gradient(80% 70% at 0% 100%, var(--a2-16) 0%, transparent 70%),
          linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 100%); }
.fact::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
                background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.025) 22px 23px); }
.fact .text { grid-column: 1; align-self: center; min-width: 0; padding: 0 4cqh 0 7cqh; display: flex; flex-direction: column; align-items: flex-start; gap: 2.2cqh; position: relative; z-index: 2; }
.chip { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 2.6cqh; letter-spacing: .14em; padding: .7cqh 1.6cqh; border-radius: 3px;
        background: var(--a1); color: var(--ink); }
.chip.alt { background: var(--a2); }
.title { margin: 0; max-width: 100%; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 7.6cqh; line-height: 1.02; color: #fff; text-wrap: balance; overflow-wrap: break-word; }
.body { margin: 0; font-size: 3.5cqh; line-height: 1.4; color: #e3d6f0; max-width: min(46ch, 100%); overflow-wrap: break-word;
        display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.src { max-width: 100%; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 2.3cqh; letter-spacing: .1em; text-transform: uppercase;
       color: var(--dim); border-top: 2px solid var(--a1); padding-top: 1.2cqh; }
.fact .hero { grid-column: 2; display: flex; align-items: center; justify-content: center; padding: 0 5cqh 0 1cqh; overflow: hidden; min-width: 0; }
.stat { font-family: Anton, sans-serif; font-size: 30cqh; line-height: .9; white-space: nowrap;
        background: linear-gradient(180deg, #fff 0%, var(--a1) 120%); -webkit-background-clip: text; background-clip: text; color: transparent;
        filter: drop-shadow(0 1.2cqh 3cqh rgba(0,0,0,.35)); transform: scale(.92); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.seg.in .stat { transform: none; }

/* ---- photo slide ---- */
.photo { background: var(--night); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 16s ease-out both; }
.photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,6,24,.9) 0%, rgba(13,6,24,.3) 32%, transparent 55%); }
.photo .cap { position: absolute; left: 7cqh; right: 7cqh; bottom: 6cqh; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1.4cqh; }
.photo .cap .t { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 6cqh; line-height: 1.05; color: #fff; text-wrap: balance; }
.photo .cap .c { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 2.2cqh; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@keyframes kenburns { from { transform: scale(1.12) translateX(2%); } to { transform: scale(1); } }

/* ---- trailer ---- */
.trailer { background: #000; }
.trailer .yt, .trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer .tag { position: absolute; left: 3cqh; bottom: 4cqh; z-index: 3; display: flex; gap: 1cqh; align-items: center; }
.trailer .tag .t { background: rgba(13,6,24,.8); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 2.8cqh; padding: .6cqh 1.4cqh; border-radius: 3px; }

/* ---- trivia ---- */
.trivia { display: flex; flex-direction: column; justify-content: center; gap: 3.5cqh; padding: 9cqh 7cqh 7cqh;
          background:
            radial-gradient(70% 60% at 50% 0%, var(--a1-30), transparent 70%),
            linear-gradient(160deg, var(--bg1), var(--bg2)); }
.trivia .qhead { display: flex; align-items: center; justify-content: space-between; gap: 2cqh; }
.trivia .q { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 8.5cqh; line-height: 1.05; color: #fff; text-wrap: balance; overflow-wrap: break-word; }
.trivia .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqh; }
.trivia .opt { display: flex; align-items: center; gap: 2cqh; min-width: 0; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.12);
               border-radius: 8px; padding: 2.4cqh 2.8cqh; transition: background .5s, border-color .5s, opacity .5s, transform .5s; }
.trivia .opt .k { flex-shrink: 0; width: 8.5cqh; height: 8.5cqh; border-radius: 50%; display: grid; place-items: center;
                  font-family: Anton, sans-serif; font-size: 4.6cqh; color: var(--ink); background: var(--a1); }
.trivia .opt .v { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 5.6cqh; line-height: 1.05; color: #fff; min-width: 0; overflow-wrap: break-word; }
.trivia.reveal .opt { opacity: .35; }
.trivia.reveal .opt.right { opacity: 1; background: rgba(41,211,194,.28); border-color: var(--teal); transform: scale(1.02); }
.trivia.reveal .opt.right .k { background: var(--teal); }
.trivia .timer { height: 1.4cqh; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.trivia .timer .fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--a2), var(--a1)); transform-origin: left; }
.trivia .timer .fill.go { animation: shrink var(--t, 10s) linear forwards; }
@keyframes shrink { to { transform: scaleX(0); } }
.trivia .why { min-height: 6cqh; font-size: 4.4cqh; line-height: 1.25; color: var(--muted); opacity: 0; transition: opacity .5s; }
.trivia.reveal .why { opacity: 1; }
.trivia .cta { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 3cqh; letter-spacing: .1em; color: var(--yellow); white-space: nowrap; }

/* ---- days since ---- */
.since { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2cqh;
         background: radial-gradient(60% 60% at 50% 50%, var(--a2-26), transparent 70%), linear-gradient(160deg, var(--bg1), var(--bg2)); }
.since .big { font-family: Anton, sans-serif; font-size: 34cqh; line-height: .9;
              background: linear-gradient(180deg, #fff 0%, var(--a2) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.since .lbl { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 6cqh; color: #fff; }
.since .sub { font-size: 4.4cqh; color: var(--muted); }

/* =====================================================================
   SIDE PANEL
   ===================================================================== */
.r-panel { border-radius: 6px; background: var(--panel); display: flex; flex-direction: column; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2.2cqh 2.6cqh; background: var(--a1); flex-shrink: 0; }
.panel-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 3.2cqh; letter-spacing: .08em; color: var(--ink); white-space: nowrap; }
.panel-sub { font-size: 2cqh; font-weight: 600; color: var(--ink); white-space: nowrap; opacity: .8; }
.panel-body { flex: 1; min-height: 0; position: relative; padding: 2.4cqh; }
.panel-progress { height: .6cqh; background: rgba(255,255,255,.1); flex-shrink: 0; }
.panel-progress .bar { background: var(--teal); }
.pcard { position: absolute; inset: 2.4cqh; display: flex; flex-direction: column; gap: 1.6cqh; opacity: 0; transition: opacity .6s ease; min-width: 0; }
.pcard.in { opacity: 1; }

/* news card. 1em = 1cqh × --pf, tuned by the engine to fill the panel */
.pcard.news { font-size: calc(1cqh * var(--pf, 1)); }
.pcard.news > * { flex-shrink: 0; }
.news { background: var(--card); border-radius: 6px; padding: 2cqh; overflow: hidden; }
.news .img, .news .ph { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; flex-shrink: 0; display: block; }
.news .ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8cqh;
            background: radial-gradient(120% 90% at 100% 0%, var(--a2-55), transparent 60%),
                        radial-gradient(90% 80% at 0% 100%, var(--a1-50), transparent 65%),
                        linear-gradient(160deg, var(--bg1), var(--bg2)); }
.news .ph .wordmark { font-size: 4.2cqh; }
.news .ph .s { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.8cqh; letter-spacing: .14em; color: var(--lilac); opacity: .85; }
.news .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.news .srcchip { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.9em; letter-spacing: .06em; color: var(--night); background: var(--teal);
                 padding: .15em .5em; border-radius: 3px; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news .age { font-size: 1.8em; color: var(--muted); white-space: nowrap; }
.news h3 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 3.3em; line-height: 1.1; color: #fff; overflow-wrap: break-word;
           display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.news p { margin: 0; font-size: 2.2em; line-height: 1.4; color: #e3d6f0; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }

/* board cards (world / confirmed vs rumour / editions). 1em = 1cqh × --pf, which the engine tunes to fill the panel */
.pcard.board { font-size: calc(1cqh * var(--pf, 1)); gap: 1.6em; }
.pcard.board > * { flex-shrink: 0; }
.board h4 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 2.9em; letter-spacing: .06em; color: #fff; line-height: 1.1; }
.board .rows { display: flex; flex-direction: column; gap: 1.1em; min-height: 0; }
.board .row { display: flex; justify-content: space-between; align-items: center; gap: 1.4em; background: var(--card); border-radius: 5px; padding: 1.3em 1.6em; min-width: 0; }
.board .row .a { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 2.6em; color: #fff; min-width: 0; overflow-wrap: break-word; line-height: 1.15; }
.board .row .b { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 2.3em; color: var(--a2); text-align: right; flex-shrink: 0; max-width: 60%; line-height: 1.2; }
.board .row .b small { display: block; color: var(--muted); font-size: .8em; }
.board .item { display: flex; gap: 1.2em; align-items: flex-start; background: var(--card); border-radius: 5px; padding: 1.2em 1.5em; }
.board .item .dot { flex-shrink: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.7em; letter-spacing: .08em; padding: .2em .55em; border-radius: 3px; margin-top: .15em; }
.board .item .dot.ok { background: var(--teal); color: var(--night); }
.board .item .dot.rm { background: var(--red); color: #fff; }
.board .item .txt { font-size: 2.3em; line-height: 1.3; color: #e3d6f0; min-width: 0; overflow-wrap: break-word; }
.board .item .txt small { display: block; color: var(--dim); font-size: .78em; margin-top: .3em; }
.board .note { font-size: 1.9em; color: var(--dim); }

/* Panel shaped wide (vertical layout): news card goes side by side */
@container (min-aspect-ratio: 13/10) {
  .news { flex-direction: row; align-items: center; gap: 3cqh; }
  .news .img, .news .ph { width: 42%; aspect-ratio: 16/9; }
  .news .col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.6cqh; }
  .board .rows.two { display: grid; grid-template-columns: 1fr 1fr; }
}
.news .col { display: flex; flex-direction: column; gap: 1.4cqh; min-width: 0; min-height: 0; }

/* =====================================================================
   COUNTDOWN BLOCK
   ===================================================================== */
.r-count { background: var(--a1); }
.cd { height: 100%; padding: 0 6cqh 0 14cqh; display: flex; flex-direction: column; justify-content: center; gap: 4cqh; overflow: hidden; }
.vertical .cd { padding: 0 6cqh; align-items: center; }
.cd-label { font-family: Anton, sans-serif; font-size: 34cqh; letter-spacing: .02em; color: #fff; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-shadow: 0 .8cqh 0 rgba(0,0,0,.18); }
.vertical .cd-label { font-size: 26cqh; }
.cd-units { display: flex; align-items: baseline; gap: 9cqh; }
.cd .u { display: flex; align-items: baseline; gap: 2cqh; }
.cd .n { font-family: Anton, sans-serif; font-size: 42cqh; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.vertical .cd .n { font-size: 40cqh; }
.cd .l { opacity: .85; }
.cd .l { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16cqh; color: var(--ink); }
.cd .n.tick { animation: kick .35s ease-out; }
@keyframes kick { from { transform: translateY(-6%); opacity: .6; } to { transform: none; opacity: 1; } }
.cd-done { display: none; font-family: Anton, sans-serif; font-size: 42cqh; line-height: 1; color: #fff; }
.cd.finished .cd-units { display: none; }
.cd.finished .cd-done { display: block; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* =====================================================================
   HEADLINE BAR
   ===================================================================== */
.r-headline { background: var(--lilac); font-family: 'Barlow Condensed', sans-serif; --kind: var(--a1); }
.r-headline::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4cqh; background: var(--kind); transition: background .5s ease; }
.hl-stage { position: absolute; inset: 0; }
.hl { position: absolute; inset: 0 0 4cqh 0; display: flex; align-items: center; gap: 3cqw; padding: 0 32px;
      opacity: 0; transform: translateY(40%); transition: opacity .5s ease, transform .5s ease; }
.hl.on { opacity: 1; transform: none; }
.hl.off { opacity: 0; transform: translateY(-40%); }
.hl .tag { flex-shrink: 0; font-weight: 700; font-size: 14cqh; letter-spacing: .1em; padding: 1.2cqh 2.4cqh; border-radius: 3px; }
.vertical .hl .tag { font-size: 11cqh; }
.hl .msg { flex: 1; min-width: 0; font-weight: 600; font-size: 30cqh; line-height: 1.1; color: var(--panel); white-space: normal; text-wrap: balance;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vertical .hl .msg { font-size: 24cqh; }

/* =====================================================================
   TICKER
   ===================================================================== */
.r-ticker { display: flex; background: var(--panel); font-family: 'Barlow Condensed', sans-serif; z-index: 20; }
.tk-bug { display: flex; align-items: center; gap: 18px; padding: 0 22px 0 24px; background: var(--night); flex-shrink: 0; }
.tk-bug .wordmark { font-size: 36cqh; }
.tk-clock { display: flex; align-items: baseline; gap: .3em; font-family: Anton, sans-serif; font-size: 36cqh; line-height: 1; }
.tk-clock .time { color: var(--teal); font-variant-numeric: tabular-nums; }
.tk-clock .tz { order: 2; color: var(--muted); letter-spacing: .04em; min-width: 1.9em; }
.tk-clock.swap { animation: flip .45s ease; }
@keyframes flip { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }
.tk-label { display: flex; align-items: center; padding: 0 18px; background: var(--a2); color: var(--night); font-weight: 700; font-size: 27cqh; letter-spacing: .08em; flex-shrink: 0; transition: background .8s; }
.tk-viewport { flex: 1; overflow: hidden; display: flex; align-items: center;
               -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
                       mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.tk-track { display: flex; white-space: nowrap; will-change: transform; }
.tk-track.run { animation: scroll var(--dur, 60s) linear infinite; }
@keyframes scroll { to { transform: translateX(-50%); } }
.tk-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 30px; font-weight: 600; font-size: 30cqh; color: var(--lilac); }
.tk-item .s { color: var(--a2); font-weight: 700; letter-spacing: .04em; }
.tk-item .d { color: var(--muted); font-weight: 500; }
.tk-item .d::before { content: '—'; margin-right: 12px; color: var(--a1); }
.tk-item::after { content: '◆'; color: var(--a1); font-size: .6em; margin-left: 30px; }

/* =====================================================================
   MENU
   ===================================================================== */
.menu-bg { position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 85% 20%, rgba(255,46,136,.25), transparent 70%),
    radial-gradient(50% 60% at 10% 90%, rgba(255,138,61,.18), transparent 70%),
    linear-gradient(160deg, #241040 0%, #120824 100%); }
.menu-bg::after { content: ''; position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.025) 22px 23px); }
.menu-head { position: absolute; left: 90px; top: 70px; right: 90px; display: flex; flex-direction: column; gap: 10px; }
.menu-head .wordmark { font-size: 44px; }
.menu-title { font-family: Anton, sans-serif; font-size: 120px; line-height: .95; color: #fff; letter-spacing: .01em; }
.menu-title em { font-style: normal; color: var(--pink); }
.menu-sub { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: .16em; color: var(--muted); }
.menu-list { position: absolute; left: 90px; right: 90px; top: 370px; bottom: 170px; display: flex; flex-direction: column; justify-content: center; gap: calc(22px * var(--mf, 1)); font-size: calc(1px * var(--mf, 1)); }
.mrow { flex-shrink: 0; }
.vertical .menu-head { top: 110px; left: 60px; right: 60px; }
.vertical .menu-title { font-size: 150px; }
.vertical .menu-list { left: 60px; right: 60px; top: 480px; bottom: 260px; gap: calc(34px * var(--mf, 1)); }

.mrow { position: relative; display: grid; grid-template-columns: 14em 1fr auto; align-items: center; gap: 34em; min-height: 0;
        background: rgba(28,13,51,.82); border-radius: 10em; padding: 24em 40em 38em 0; overflow: hidden;
        transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s, background .6s, opacity .6s; opacity: .55; }
.mrow .bar-l { align-self: stretch; background: var(--ra1); margin: -26em 0 -34em; }
.mrow .info { min-width: 0; display: flex; flex-direction: column; gap: 6em; }
.mrow .type { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 24em; letter-spacing: .16em; color: var(--ra1); }
.mrow .name { font-family: Anton, sans-serif; font-size: 66em; line-height: 1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow .name small { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .55em; color: var(--ra2); margin-left: .3em; letter-spacing: .02em; }
.mrow .date { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26em; letter-spacing: .1em; color: var(--muted); }
.mrow .mini { font-family: Anton, sans-serif; font-size: 76em; line-height: 1; color: #fff; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mrow .mini small { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .29em; letter-spacing: .14em; color: var(--ra2); }
.mrow .prog { position: absolute; left: 14em; right: 0; bottom: 0; height: 8em; background: rgba(255,255,255,.08); }
.mrow .prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--ra2), var(--ra1)); }
.mrow.hi { opacity: 1; transform: scale(1.015); background: rgba(42,21,72,.96); box-shadow: 0 0 0 3em var(--ra1), 0 20em 60em rgba(0,0,0,.45); }
.mrow.zoom { transform: scale(1.03); filter: brightness(1.15); box-shadow: 0 0 0 4em var(--ra1), 0 30em 90em rgba(0,0,0,.6); }
.mrow.out { opacity: .2; }
.vertical .mrow { grid-template-columns: 14em 1fr; padding: 30em 34em 40em 0; }
.vertical .mrow .mini { grid-column: 2; text-align: left; font-size: 70em; }
.vertical .mrow .name { font-size: 64em; white-space: normal; }
.menu-foot { position: absolute; left: 90px; right: 90px; bottom: 120px; display: flex; justify-content: space-between; gap: 30px;
             font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 24px; letter-spacing: .1em; color: var(--dim); }
.vertical .menu-foot { left: 60px; right: 60px; bottom: 150px; flex-direction: column; gap: 10px; }

/* =====================================================================
   TAKEOVERS
   ===================================================================== */
.takeover { z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 30px;
            background: radial-gradient(60% 60% at 50% 50%, var(--a1-45), transparent 75%), linear-gradient(160deg, var(--bg1), var(--bg2)); overflow: hidden; }
.takeover .wordmark { font-size: 40px; }
.takeover .k { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 42px; letter-spacing: .2em; color: var(--a2); }
.takeover .h { font-family: Anton, sans-serif; font-size: 300px; line-height: .85; color: #fff; text-shadow: 0 14px 0 rgba(0,0,0,.25); font-variant-numeric: tabular-nums; }
.takeover .h.small { font-size: 170px; }
.takeover .s { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 64px; color: #fff; max-width: 85%; line-height: 1.05; text-wrap: balance; }
.takeover .s2 { font-size: 34px; color: var(--muted); font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: .08em; }
.vertical .takeover .h { font-size: 220px; }
.vertical .takeover .h.small { font-size: 130px; }
.takeover.final .h { font-size: 520px; animation: beat 1s ease-in-out infinite; }
.vertical .takeover.final .h { font-size: 380px; }
@keyframes beat { 0% { transform: scale(1); } 12% { transform: scale(1.06); } 30% { transform: scale(1); } }
.takeover .rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.06) 0 6deg, transparent 6deg 18deg); animation: spin 40s linear infinite; z-index: -1; }
@keyframes spin { to { transform: rotate(360deg); } }
.confetti { position: absolute; top: -40px; width: 14px; height: 26px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(1250px) rotate(720deg); } }
.vertical .confetti { animation-name: fallv; }
@keyframes fallv { to { transform: translateY(2050px) rotate(720deg); } }

/* ---------- idle + error ---------- */
.idle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: linear-gradient(160deg, #241040, #120824); }
.idle .wordmark.big { font-size: 140px; }
.idle-sub { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 40px; letter-spacing: .2em; color: var(--muted); }
.err { position: absolute; right: 10px; top: 10px; z-index: 99; font: 600 16px 'Barlow', sans-serif; color: #ffc93c; background: rgba(0,0,0,.7); padding: 4px 8px; display: none; }
.next-up:empty, .ev-chip:empty { display: none; }
.vertical .mrow .bar-l { grid-row: 1 / span 2; }

/* Menu with 4–5 events */
.many .menu-head { top: 50px; gap: 4px; }
.many .menu-title { font-size: 84px; }
.many .menu-list { top: 250px; bottom: 150px; gap: calc(16px * var(--mf, 1)); }
.many .mrow { padding: 14em 40em 22em 0; }
.many .mrow .info { gap: 3em; }
.vertical .many .menu-title { font-size: 110px; }
.vertical .many .menu-list { top: 360px; bottom: 230px; }
.vertical .many .mrow { padding: 18em 30em 26em 0; }
.vertical .panel-title { font-size: 4.6cqh; } .vertical .panel-sub { font-size: 3cqh; }


/* =====================================================================
   TITLE STRAP: always says what we're counting down to
   ===================================================================== */
.r-strap { display: flex; align-items: stretch; border-radius: 6px; background: linear-gradient(90deg, var(--panel) 0%, var(--bg2) 100%);
           box-shadow: inset 0 -4px 0 var(--a1); }
.strap-plate { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 22px; background: var(--a1); color: var(--ink);
               font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 25cqh; line-height: 1; letter-spacing: .14em; }
.strap-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: .3em; padding: 0 26px; white-space: nowrap; overflow: hidden;
              font-family: Anton, sans-serif; font-size: 66cqh; line-height: 1; color: #fff; letter-spacing: .02em; }
.strap-name small { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .62em; color: var(--a2); letter-spacing: .02em; }
.strap-meta { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 4px; padding: 0 26px;
              font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.strap-meta .d { font-size: 32cqh; color: #fff; letter-spacing: .08em; line-height: 1; }
.strap-meta .p { font-size: 22cqh; color: var(--muted); letter-spacing: .08em; line-height: 1; }
.strap-meta .p:empty { display: none; }
.vertical .strap-plate { font-size: 21cqh; padding: 0 18px; }
.vertical .strap-name { font-size: 58cqh; padding: 0 20px; }
.vertical .strap-meta { padding: 0 20px; }
.vertical .strap-meta .d { font-size: 26cqh; }
.vertical .strap-meta .p { display: none; }

/* =====================================================================
   INTRO CARD: shown as the menu hands over to an event
   ===================================================================== */
.takeover.intro { gap: 22px; }
.takeover.intro .s2.type { color: var(--a2); font-weight: 700; letter-spacing: .2em; }
.takeover .name { font-family: Anton, sans-serif; font-size: 190px; line-height: .95; color: #fff; white-space: nowrap; max-width: 92%;
                  text-shadow: 0 12px 0 rgba(0,0,0,.25); }
.takeover .sub { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 70px; line-height: 1; color: var(--a2); }
.takeover .togo { font-family: Anton, sans-serif; font-size: 96px; line-height: 1; color: var(--ink); background: var(--a1); padding: 10px 34px 14px; border-radius: 8px;
                  margin-top: 8px; animation: pop .6s cubic-bezier(.2,1.4,.4,1) both .3s; }
.takeover.intro .name { animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.takeover.intro .sub { animation: rise .7s cubic-bezier(.2,.8,.2,1) both .12s; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.vertical .takeover .name { font-size: 150px; white-space: normal; text-wrap: balance; text-align: center; }
.vertical .takeover .sub { font-size: 60px; }
.vertical .takeover .togo { font-size: 84px; }

.vertical .takeover.intro { gap: 34px; }
.vertical .takeover .k { font-size: 48px; }
.vertical .takeover .s2 { font-size: 38px; max-width: 90%; }
.vertical .takeover .name { font-size: 190px; }
.vertical .takeover .togo { font-size: 104px; }


/* =====================================================================
   9:16 SAFE ZONE (default for ?layout=vertical; &safe=off to disable)
   Critical content lives inside the box the TikTok / Instagram UI leaves clear.
   --st/--sb/--sl/--sr are set from content.js → safeZone.
   ===================================================================== */
.vertical.safe { --st: 250px; --sb: 660px; --sl: 120px; --sr: 120px;
                 --sw: calc(1080px - var(--sl) - var(--sr));
                 --vh: calc(var(--sw) * .5625); }
.vertical.safe .r-count    { left: var(--sl); top: var(--st); width: var(--sw); height: 190px; }
.vertical.safe .r-strap    { left: var(--sl); top: calc(var(--st) + 202px); width: var(--sw); height: 84px; }
.vertical.safe .r-stage    { left: var(--sl); top: calc(var(--st) + 298px); width: var(--sw); height: var(--vh); }
.vertical.safe .r-headline { left: var(--sl); top: calc(var(--st) + 310px + var(--vh)); width: var(--sw); height: 150px; }
/* Below the safe box: nice to have, fine if comments sit over it */
.vertical.safe .r-panel    { left: 40px; width: 1000px; top: calc(var(--st) + 476px + var(--vh)); bottom: 136px; height: auto; }
.vertical.safe .cd-label   { font-size: 24cqh; }
.vertical.safe .cd .n      { font-size: 42cqh; }
.vertical.safe .strap-name { font-size: 54cqh; }

/* Menu */
.vertical.safe .menu-head  { top: calc(var(--st) + 10px); left: var(--sl); right: var(--sr); }
.vertical.safe .menu-title { font-size: 140px; }
.vertical.safe .menu-list  { left: var(--sl); right: var(--sr); top: calc(var(--st) + 300px); bottom: calc(var(--sb) + 20px); }
.vertical.safe .many .menu-title { font-size: 104px; }
.vertical.safe .many .menu-list  { top: calc(var(--st) + 230px); }
.vertical.safe .menu-foot  { left: 60px; right: 60px; }

/* Full-screen cards centre inside the safe box */
.vertical.safe .takeover, .vertical.safe .idle { padding: var(--st) var(--sr) var(--sb) var(--sl); }
.vertical.safe .takeover .name { max-width: 100%; font-size: 170px; }
.vertical.safe .takeover .s2 { max-width: 100%; }
.vertical.safe .takeover.final .h { font-size: 340px; }
.vertical.safe .idle .wordmark.big { font-size: 110px; }

/* &guides: shade what the apps cover */
.guides { position: absolute; inset: 0; z-index: 200; pointer-events: none; }
.guides i { position: absolute; background: rgba(255,0,0,.28); outline: 2px dashed rgba(255,80,80,.9); }
.guides .t { left: 0; right: 0; top: 0; height: var(--st); }
.guides .b { left: 0; right: 0; bottom: 0; height: var(--sb); }
.guides .l { left: 0; width: var(--sl); top: var(--st); bottom: var(--sb); }
.guides .r { right: 0; width: var(--sr); top: var(--st); bottom: var(--sb); }


/* Next countdown: in the strap (16:9), as the pill on the video window (9:16) */
.strap-next { display: none; flex-shrink: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 0 26px;
              border-left: 2px solid rgba(255,255,255,.12); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; white-space: nowrap; }
.strap-next.on { display: flex; }
.strap-next .k { font-size: 20cqh; letter-spacing: .16em; color: var(--muted); line-height: 1; }
.strap-next .v { font-size: 30cqh; color: #fff; letter-spacing: .04em; line-height: 1; }
.strap-next b { color: var(--na, var(--a2)); }
.strap-next i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--teal); }
.vertical .strap-next { display: none !important; }
.vertical .next-up { font-size: 4.2cqh; }

/* Next countdown pill, top right of the video window */
.next-up { display: flex; align-items: center; gap: 1.2cqh; font-size: 3.6cqh; padding: .7cqh 1.6cqh; background: rgba(13,6,24,.85);
           border: 2px solid var(--na, var(--a2)); border-radius: 4px; max-width: 70%; }
.next-up .k { color: var(--muted); letter-spacing: .12em; font-size: .8em; }
.next-up b { color: var(--na, var(--a2)); }
.next-up i { font-style: normal; color: var(--teal); font-variant-numeric: tabular-nums; }
.vertical .next-up { font-size: 4.2cqh; max-width: 75%; }
.next-up:empty { display: none; }

/* Full-screen cards fade THROUGH: the page dips to dark first, then the card fades up (and back) */
#app.dipping #event, #app.dipping #menu, #app.dipping #tickerWrap { opacity: 0 !important; transition: opacity .45s ease !important; }
.takeover { transition: opacity .6s ease, visibility 0s .6s; }
.takeover.on { transition: opacity .6s ease, visibility 0s; }

/* Tap for sound (phones) */
.trailer .tap { position: absolute; right: 3cqh; bottom: 3cqh; z-index: 5; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 3.4cqh;
                letter-spacing: .1em; color: var(--ink); background: var(--a1); padding: .8cqh 1.8cqh; border-radius: 4px; animation: pulse 1.6s ease-in-out infinite; }