/* Rifted base: tokens, art, hero, scoreboard, arena, snippets, feed. Loaded first; the other css files add to it in order.
   The divider and its meter live in rift.css, which loads straight after this file. */
:root{
  --a1:#1e6cff; --a2:#00e5ff; --b1:#ff4d1c; --b2:#ffb300;
  --bg:#0b0d14; --ink:#f4f6ff; --glass:rgba(255,255,255,.06); --line:rgba(255,255,255,.14);
  --pos:#39ff9c; --neg:#ff3b6b; --neu:#c9d1ff;
  /* Type scale (designer 2026-09-18, docs/design/hierarchy.md section 3). One fluid unit --u (the smaller of 1vh and .62vw) drives every
     level a first-time visitor reads (statement, question, names, numbers, buttons, your call), so the page fills its band on any screen.
     Ratio 1.333. L0 / L-1 (pills, ticker, labels, captions) stay fixed: they are meant to be quiet. Breakpoints override --u, L0 and L-1. */
  --u:min(1vh,.62vw);
  --t-1:9px; --t0:12px;
  --t1:clamp(13px,calc(1.8*var(--u)),22px); --t2:clamp(16px,calc(2.4*var(--u)),30px); --t3:clamp(21px,calc(3.2*var(--u)),40px); --t4:clamp(28px,calc(4.2*var(--u)),54px);
  --t5:clamp(36px,calc(5.6*var(--u)),72px); --t6:clamp(48px,calc(7.5*var(--u)),96px); --t7:clamp(64px,calc(10*var(--u)),128px);
  --gap:calc(1.6*var(--u));   /* vertical rhythm inside a side block */
  /* Adding text: give it a level (font-size:var(--tN)), never a px. Tier A-B read levels L4-L7, tier C L1-L2, tier D-E L0 / L-1 (docs/design/hierarchy.md). */
  --scrim-h: calc(56px + var(--hero-b,280px) + 22vh);   /* the hero band: the blur veil and the scrim share it, and --hero-b is measured in layout.js */
  --shift: 0%; /* set by arena.js: (forShare - 50) * 0.24, so the winning side owns more of the screen. --clipA / --clipB live in rift.css */
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;overflow:hidden}
.stage{position:relative;height:100vh;height:100dvh;display:grid;grid-template-rows:56px 1fr 44px}

/* ---------- full-bleed art, split by the rift ---------- */
.artbg{position:absolute;inset:0;z-index:0;overflow:hidden}
.artbg .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:background 1.2s,clip-path 1.2s cubic-bezier(.2,.8,.2,1);filter:saturate(1.15) contrast(1.05)}
.artbg .art{position:absolute;inset:-6%;background-size:cover;background-position:center;filter:blur(14px) saturate(1.2) brightness(.7);opacity:0;transition:opacity 1.5s;animation:kenA 40s ease-in-out infinite alternate}
.artbg .art.on{opacity:.55}
.artbg canvas{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen}
.credit{position:absolute;top:62px;right:28px;left:auto;bottom:auto;transform:none;white-space:nowrap;z-index:8;font-size:var(--t-1);letter-spacing:.2em;text-transform:uppercase;opacity:.38}   /* under the header, clear of the hero, which starts at 84px */
.artbg .img{background:transparent}
.artbg .img.a{clip-path:var(--clipA)}
.artbg .img.b{clip-path:var(--clipB)}
.artbg .img.a:before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--a1) 75%,transparent),color-mix(in srgb,var(--a2) 35%,transparent) 60%,transparent);mix-blend-mode:color}
.artbg .img.b:before{content:"";position:absolute;inset:0;background:linear-gradient(200deg,color-mix(in srgb,var(--b1) 75%,transparent),color-mix(in srgb,var(--b2) 35%,transparent) 60%,transparent);mix-blend-mode:color}
.artbg .img.a:after{background:linear-gradient(180deg,color-mix(in srgb,var(--a1) 22%,rgba(6,8,14,.15)),rgba(6,8,14,.35) 55%,rgba(6,8,14,.85))}
.artbg .img.b:after{background:linear-gradient(180deg,color-mix(in srgb,var(--b1) 22%,rgba(6,8,14,.15)),rgba(6,8,14,.35) 55%,rgba(6,8,14,.85))}
/* Hero (designer round 7, 2026-09-18): no box, no plate, no text-shadow. The statement sits on bare art; the only thing
   helping it is the scrim above, which is full bleed and therefore has no left or right edge to notice.
   Standing rule: if the statement ever reads soft on a bright key-art day, raise the scrim's first three stops by .06
   each — never reintroduce a text-shadow or a backdrop blur. The art layer is already blur(14px); a second blur only
   made its own boundary visible, which is the step the owner was seeing. Statement in Barlow Condensed, question in Inter. */
.topic{position:absolute;left:50%;top:84px;transform:translateX(-50%);z-index:6;text-align:center;width:min(94vw,1500px);padding:20px 32px 22px;background:none;border:0;border-radius:0}
.topic .kicker{font-family:"Barlow Condensed",Inter,sans-serif;font-size:var(--t0);font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.6;color:#fff;margin-bottom:6px}
.topic .kicker .tt{opacity:.85}
.topic h1{display:none;font-family:Inter;font-weight:600;font-size:var(--t0);letter-spacing:.18em;text-transform:uppercase;line-height:1.2;color:#fff;opacity:.78;margin:4px 0 10px}
.topic .sub{font-family:"Barlow Condensed",Inter,sans-serif;font-size:calc(var(--t7) * var(--fit,1));font-weight:700;color:#fff;line-height:.96;letter-spacing:.005em;text-transform:none;opacity:1}
/* swapped at the owner's request: the statement is the big condensed line, the question the quieter Inter line under it */
.topic .sub .stmt{display:block;font-size:1em;font-weight:700;color:#fff}
.topic .sub .ask{display:block;font-family:Inter,sans-serif;font-size:.56em;font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.9);line-height:1.25;margin-top:.14em}
.topic .judged{font-family:"Barlow Condensed",Inter,sans-serif;font-size:var(--t0);font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-top:14px}
.artbg .img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,14,.35),rgba(6,8,14,.55) 55%,rgba(6,8,14,.92))}
/* Hero scrim (designer round 7, 2026-09-18): the mirror of the art's bottom fade. Full bleed, so its only boundary is one
   long vertical dissolve; the last three stops ease into zero to kill the Mach band a linear landing leaves on flat art.
   Height tracks the measured hero (--hero-b from layout.js) so it follows fitHero() on every device with no breakpoints.
   Last child of .artbg, so it damps the gallery cards too; .bolt is a z-index above, so the rift keeps full brightness. */
/* Hero blur veil (owner 2026-09-18): a slight blur under the statement, with no edge anywhere. Full bleed, so there is no
   left or right edge; the mask eases the blur to nothing down the band, so there is no bottom edge either. This is the one
   safe way to blur behind the text — the old .topic::before was a small blurred ellipse and you could see its rim, because
   a blur boundary changes detail, not just level. It sits above the gallery cards, which softens them as well. */
.artbg .heroveil{position:absolute;left:0;right:0;top:0;pointer-events:none;height:var(--scrim-h);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 36%,rgba(0,0,0,.72) 57%,rgba(0,0,0,.34) 75%,rgba(0,0,0,.1) 89%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 36%,rgba(0,0,0,.72) 57%,rgba(0,0,0,.34) 75%,rgba(0,0,0,.1) 89%,transparent 100%)}
.artbg::after{content:"";position:absolute;left:0;right:0;top:0;pointer-events:none;height:var(--scrim-h);
  background:radial-gradient(120% 90% at 50% 0%,rgba(4,6,12,.16),rgba(4,6,12,0) 70%),
    linear-gradient(180deg,rgba(4,6,12,.58) 0%,rgba(4,6,12,.56) 20%,rgba(4,6,12,.48) 42%,rgba(4,6,12,.32) 62%,rgba(4,6,12,.16) 79%,rgba(4,6,12,.05) 91%,rgba(4,6,12,0) 100%)}
.artbg .img.a .lbl{left:24%}.artbg .img.b .lbl{left:76%}
@keyframes kenA{from{background-position:48% 50%;transform:scale(1)}to{background-position:52% 46%;transform:scale(1.06)}}
@keyframes kenB{from{background-position:52% 50%}to{background-position:48% 54%}}

/* ---------- the divider + tug-of-war meter: see css/rift.css ---------- */

/* ---------- top scoreboard ---------- */
.top{position:relative;z-index:6;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--a1) 40%,transparent),rgba(0,0,0,.55) 40%,rgba(0,0,0,.55) 60%,color-mix(in srgb,var(--b1) 40%,transparent));backdrop-filter:blur(12px)}
.top .l,.top .r{display:flex;gap:14px;align-items:center;font-size:var(--t0);letter-spacing:.14em;text-transform:uppercase}
.top .r{justify-content:flex-end}
.top .title{font-family:Orbitron;font-weight:900;font-size:var(--t1);letter-spacing:.2em;padding-left:.2em;text-align:center}  /* padding offsets the trailing letter-space so the text sits truly centred */
.top .title small{display:block;font-family:Inter;font-weight:400;font-size:var(--t-1);letter-spacing:.3em;padding-left:.3em;opacity:.7;text-align:center}
.pill{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.pill b{font-weight:800}
/* tier E pills step back; the verdict clock (tier C) keeps a brighter rim */
.top .l .pill,.top .r .pill:first-child{opacity:.6}
.top .r .pill:last-child{border-color:rgba(255,255,255,.35)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 10px var(--pos);animation:blink 1.4s infinite;margin-right:6px}
@keyframes blink{50%{opacity:.25}}

/* ---------- arena ---------- */
.arena{position:relative;z-index:2;display:grid;grid-template-columns:1fr 260px 1fr;overflow:hidden}
/* the side block is centred in the band between the hero (--hero-b) and the dock (--dock-h), both measured by main.js layoutVars */
.side{position:relative;z-index:3;min-width:0;padding:calc(var(--hero-b,300px) + 28px) 32px calc(var(--dock-h,130px) - 16px);display:flex;flex-direction:column;justify-content:center;gap:var(--gap)}
.side.b{align-items:flex-end;text-align:right}
.side.a{--c1:var(--a1);--c2:var(--a2)} .side.b{--c1:var(--b1);--c2:var(--b2)}
.name{font-family:Orbitron;font-weight:700;font-size:var(--t4);letter-spacing:.06em;line-height:1.1;color:color-mix(in srgb,var(--c2) 78%,#fff);text-shadow:0 2px 20px rgba(0,0,0,.8),0 0 24px color-mix(in srgb,var(--c2) 40%,transparent)}
.name small{display:block;font-family:Inter;font-weight:400;font-size:var(--t0);letter-spacing:.2em;opacity:.75;margin-top:4px;text-transform:uppercase}
.score{font-family:Orbitron;font-weight:900;font-size:var(--t7);line-height:1;letter-spacing:-.02em;color:#fff;text-shadow:0 0 30px var(--c1),0 0 90px color-mix(in srgb,var(--c1) 60%,transparent),0 4px 30px rgba(0,0,0,.9);font-variant-numeric:tabular-nums;transition:transform .25s}
.score.bump{transform:scale(1.06)}
.score sup{font-size:var(--t1);letter-spacing:.2em;opacity:.6;vertical-align:top;margin-left:6px;font-family:Inter;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,minmax(80px,1fr));gap:10px 8px;width:min(100%,400px)}
.stat{padding:2px 0 2px 10px;border-left:2px solid color-mix(in srgb,var(--c2) 60%,transparent)}
.side.b .stat{border-left:0;border-right:2px solid color-mix(in srgb,var(--c2) 60%,transparent);padding:2px 10px 2px 0}
.stat .k{font-size:var(--t-1);letter-spacing:.2em;text-transform:uppercase;opacity:.72;text-shadow:0 1px 3px #000}
.stat .v{font-size:var(--t1);font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.stat .v.up{color:var(--pos)} .stat .v.down{color:var(--neg)}
.stat[data-k="topName"] .v{font-size:var(--t0);letter-spacing:-.01em}
.stat.flash{animation:flash .6s}
@keyframes flash{0%{background:color-mix(in srgb,var(--c1) 45%,transparent)}100%{background:transparent}}
canvas.spark{width:min(100%,380px);height:calc(8.5*var(--u));opacity:.95}

.mid{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 0 26vh}
.vsWrap{padding:2px 16px 6px;border-radius:16px;background:rgba(6,8,14,.62);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);box-shadow:0 0 30px rgba(0,0,0,.6)}
.vs{font-family:Orbitron;font-weight:900;font-size:58px;letter-spacing:.1em;background:linear-gradient(90deg,var(--a2),#fff,var(--b2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(255,255,255,.55)) drop-shadow(0 4px 10px rgba(0,0,0,.8));animation:vsPulse 3s ease-in-out infinite}
@keyframes vsPulse{50%{transform:scale(1.08)}}
.lead,.gap{font-size:10px;letter-spacing:.25em;text-transform:uppercase;opacity:.95;text-align:center;padding:8px 14px;border-radius:12px;background:rgba(6,8,14,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);max-width:240px}
.lead b{font-family:Orbitron;font-size:14px;display:block;margin-top:4px}

/* ---------- snippets (JS physics) ---------- */
.snip{position:absolute;z-index:2;left:0;top:0;pointer-events:none;white-space:normal;max-width:340px;line-height:1.35;font-weight:600;font-size:var(--t1);padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.28);background:rgba(6,8,14,.88);box-shadow:0 6px 24px rgba(0,0,0,.6);will-change:transform,opacity;transform-origin:50% 50%;text-shadow:0 1px 2px #000}
.snip .src{font-size:var(--t-1);letter-spacing:.2em;text-transform:uppercase;opacity:.65;margin-left:8px;white-space:nowrap}
.snip .sc{font-size:var(--t-1);font-weight:800;margin-left:6px;padding:2px 6px;border-radius:4px;white-space:nowrap}
.snip.pos .sc{background:rgba(57,255,156,.18);color:var(--pos)} .snip.neg .sc{background:rgba(255,59,107,.18);color:var(--neg)} .snip.neu .sc{background:rgba(201,209,255,.14);color:var(--neu)}
.snip.name{font-family:Orbitron;font-weight:700;letter-spacing:.08em;font-size:var(--t2);background:none;border:none;box-shadow:none;text-shadow:0 0 18px currentColor,0 2px 6px #000,0 0 2px #000}
.snip.sideA{color:var(--a2)} .snip.sideB{color:var(--b2)}
.snip.big{font-size:var(--t2);font-weight:800}
.spark-dot{position:absolute;z-index:5;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 18px #fff,0 0 40px var(--c);pointer-events:none;animation:sparkdot .5s ease-out forwards}
@keyframes sparkdot{0%{transform:scale(.4);opacity:1}100%{transform:scale(3);opacity:0}}

.pulse{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),transparent 55%)}
.pulse.go{animation:pulse 1.3s ease-out}
@keyframes pulse{0%{opacity:0;transform:scale(.6)}20%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.scanline{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);opacity:0;z-index:5;pointer-events:none}
.scanline.go{animation:scan 1.2s linear}
@keyframes scan{0%{opacity:.9;top:0}100%{opacity:0;top:100%}}

/* ---------- bottom feed ---------- */
.feed{position:relative;z-index:6;pointer-events:auto;border-top:1px solid var(--line);background:rgba(0,0,0,.6);backdrop-filter:blur(10px);display:flex;align-items:center;overflow:hidden;font-size:var(--t0)}
.feed .tag{flex:none;padding:0 14px;height:100%;display:flex;align-items:center;gap:8px;font-size:var(--t-1);letter-spacing:.25em;text-transform:uppercase;border-right:1px solid var(--line);background:var(--glass)}
.feed .track{flex:1;overflow:hidden;position:relative;height:100%}
.feed .items{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:56px;padding-left:16px;white-space:nowrap;animation:ticker 110s linear infinite}
.feed .items>span{opacity:.85;font-variant-numeric:tabular-nums}
.feed .items b{font-weight:800;color:#fff}
/* items are flex rows: [camp tick] [NEW] [glyph or outlet name] [hook]. Designer 2026-09-17: the platform glyph is white (silhouette = brand),
   the camp is a 2px tick at the left edge in the side colour, the same language as the dock's "yesterday" line. Neutral items get no tick. */
.feed .items .tk,.feed .items>span{display:inline-flex;align-items:center;gap:6px;line-height:14px}
.feed .items .tk{border-left:2px solid transparent;padding-left:8px}
.feed .items .tk.for{border-left-color:var(--a2)} .feed .items .tk.against{border-left-color:var(--b2)}
.feed .items .mark{flex:none;width:12px;height:12px;fill:currentColor;color:#fff}
.feed .items .ok{color:var(--pos)} .feed .items .bad{color:var(--neg)}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}


/* ---- stage 2 additions ---- */
.gap{margin-top:0}
.gap b{font-family:Orbitron;font-size:13px;display:block;margin-top:3px}
.lastverdict{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:6;font-size:var(--t0);letter-spacing:.15em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(8,10,18,.7);border:1px solid var(--line)}
.stage[data-stale="1"] .top .dot{background:#ffb300;box-shadow:0 0 10px #ffb300}
.snip.replay{opacity:.75}
@media (prefers-reduced-motion: reduce){ .vs,.artbg .img{animation:none} }