/* Cade DS base, 2026-10-01. Four voices, pc* colours, their source shapes. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;1,800&family=JetBrains+Mono:wght@500;700;800&display=swap');
@font-face{font-family:"Futura PT Cond";src:url('../assets/fonts/futura/futura-condensed-pt-medium-oblique-589e4507d391c.otf');font-weight:500;font-style:oblique;font-display:swap}
@font-face{font-family:"Futura PT Cond";src:url('../assets/fonts/futura/futura-condensed-pt-medium-589e44ed1e3a5.otf');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Futura PT";src:url('../assets/fonts/futura/futura-pt-book-589a6dec272c3.otf');font-weight:400;font-display:swap}
@font-face{font-family:"Futura PT";src:url('../assets/fonts/futura/futura-pt-demibold-589e43b852117.otf');font-weight:600;font-display:swap}
:root{
  --page:#0E0D0C;--raised:#161514;--overlay:#1A1816;--paper:#EFE9D8;--ink:#141414;--keyline:#0B0B0B;
  --orange:#FFA800;--orange-deep:#FF7A00;--violet:#9652EF;--violet-deep:#6330D3;--violet-ink:#210D49;
  --yellow:#FAF424;--info:#419FE5;--yes:#91BB4F;--yes-dark:#3C8214;--no:#EA2A46;--no-dark:#B21229;
  --meta:#A1A1A1;--quiet:#8773AF;--line:#343434;--line-hi:#4A4A4A;
  --shout:"Barlow Condensed",Impact,sans-serif;--call:"Futura PT Cond","Barlow Condensed",sans-serif;
  --read:"Futura PT",system-ui,sans-serif;--data:"JetBrains Mono",ui-monospace,monospace;
  --sh2:2px 2px 0 #000;--sh3:3px 3px 0 #000;--sh4:4px 4px 0 #000;--sh5:5px 5px 0 #000;--sh8:8px 8px 0 #000;
  --clip-panel:polygon(14px 8px,36% 10px,34.5% 0%,56% 9px,calc(100% - 18px) 0%,calc(100% - 2px) 12%,calc(100% - 12px) 32%,calc(100% - 2px) 50%,calc(100% - 16px) 64%,calc(100% - 4px) 80%,calc(100% - 14px) calc(100% - 6px),77% 100%,50% calc(100% - 8px),53% 100%,14px calc(100% - 2px),8px 72%,2px 50%,10px 20%);
  --clip-quiet:polygon(0 0,34% 0,calc(34% + 34px) 4px,calc(34% + 68px) 0,100% 0,100% 22%,calc(100% - 4px) 34%,100% 46%,100% 100%,calc(62% + 34px) 100%,62% calc(100% - 4px),calc(62% - 34px) 100%,0 100%,0 72%,4px 58%,0 44%);
  --clip-hex:polygon(100% 75%,100% 25%,50% 0%,0% 25%,0% 75%,50% 100%);
  --clip-odds:polygon(96.27% 74.79%,97.69% 100%,23.34% 100%,0% 5.71%,7.76% 5.71%,5.85% 0%,42.55% 5.71%,97.69% 5.71%,96.39% 28.2%,100% 58.81%);
  --t-fast:150ms;--t-base:200ms;--t-slow:320ms;--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--page);color:var(--paper)}
body{font-family:var(--read);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* the four voices */
.shout{font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:0}
.shout-xl{font-size:128px}.shout-l{font-size:96px}.shout-m{font-size:64px}.shout-s{font-size:44px}

.kick{font-family:var(--shout);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--orange)}
.call{font-family:var(--call);font-style:oblique;font-weight:500;text-transform:uppercase;line-height:1}
.read{font-family:var(--read)}
.data{font-family:var(--data);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.label{font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}

/* shapes: face + shadow drawn as SVG, stretched on both axes like theirs */
.shape{position:relative;display:inline-grid;place-items:center;isolation:isolate}
.shape>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}
.shape>svg .sh{transform:translate(4px,4px);transition:transform var(--t-fast) var(--ease)}
.shape>svg .fc{transition:transform var(--t-fast) var(--ease)}

/* CTA, their CTA_FACE: orange face, black stroke, drawn shadow */
.cta{height:60px;min-width:220px;padding:0 44px 0 40px;font-family:var(--call);font-style:oblique;font-size:26px;text-transform:uppercase;color:var(--ink);gap:10px;grid-auto-flow:column}

.cta:active:not([aria-disabled=true]) .fc,.cta.is-press .fc{transform:translate(3px,3px)}
.cta:active:not([aria-disabled=true]),.cta.is-press{transform:translate(3px,3px)}
.cta:active .sh,.cta.is-press .sh{transform:translate(1px,1px)}
/* focus follows the silhouette: a paper ring outside the black keyline, never a box */
.shape:focus-visible{outline:none}
.shape>svg .rg{opacity:0;stroke:#FAF424;transition:opacity var(--t-fast)}
.shape:focus-visible>svg .rg,.shape.is-focus>svg .rg{opacity:1}
.cta[aria-disabled=true]{color:var(--meta);cursor:not-allowed}
.cta[aria-disabled=true] .fc{fill:var(--raised);stroke:var(--line-hi)}
.cta[aria-disabled=true] .sh{display:none}
.cta[aria-busy=true] .dots{display:inline-flex;gap:4px}
.dots{display:none}.dots i{width:6px;height:6px;background:var(--ink);animation:dot 900ms steps(1) infinite}
.dots i:nth-child(2){animation-delay:150ms}.dots i:nth-child(3){animation-delay:300ms}
@keyframes dot{50%{opacity:.2}}

/* hero CTA, their HERO_CTA_FACE: dark face, orange keyline, two lines */
.hcta{width:420px;height:110px;padding:0 40px;justify-items:start;align-content:center;gap:6px;text-align:left}
.hcta .call{font-size:34px;color:var(--paper)}.hcta .label{color:var(--orange)}
.hcta:hover .fc{transform:translate(-1px,-2px)}

/* slat, their SLAT_FACE: chips, tabs, outcomes */
.slat{height:42px;min-width:120px;padding:0 22px;font-family:var(--call);font-style:oblique;font-size:19px;text-transform:uppercase;gap:8px;grid-auto-flow:column}
.slat .fc{fill:#141414}
.slat:hover .fc{fill:#232120}
.slat[aria-pressed=true]{color:var(--ink)}.slat[aria-pressed=true] .fc{fill:var(--paper)}
.slat.yes{color:var(--ink)}.slat.yes .fc{fill:var(--yes)}
.slat.no .fc{fill:var(--no)}
.slat[aria-disabled=true]{color:#6F6F6F}.slat[aria-disabled=true] .fc{fill:var(--raised);stroke:var(--line)}.slat[aria-disabled=true] .sh{display:none}

/* category mark: hex + glyph + label, colour never alone */
.mark{display:inline-flex;align-items:center;gap:10px;font-family:var(--call);font-style:oblique;font-size:19px;text-transform:uppercase}
.hex{width:var(--s,40px);aspect-ratio:73/85;clip-path:var(--clip-hex);background:var(--c,var(--orange));display:grid;place-items:center;filter:none}
.hex>span{width:calc(100% - 6px);aspect-ratio:73/85;clip-path:var(--clip-hex);background:var(--ink);display:grid;place-items:center}
.hex svg{width:55%;height:55%}
.hex img{width:100%;height:100%;object-fit:cover}
.m-meme{--c:var(--orange)}.m-sport{--c:var(--info)}.m-stock{--c:var(--violet)}

/* panel: their DS_PANEL_CLIP, hard drawn shadow via a wrapper */
.drop{filter:drop-shadow(5px 5px 0 #000)}
.panel{background:var(--raised);clip-path:var(--clip-panel)}

/* countdown: one flat plate */
.clock{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;background:var(--violet-ink);padding:14px 22px 12px;box-shadow:var(--sh5);border-left:4px solid var(--violet)}
.clock .data{font-size:44px;line-height:1;color:var(--paper)}
.clock .label{color:var(--violet)}
.clock.urgent{background:#2a0a10;border-color:var(--no)}.clock.urgent .label{color:var(--no)}

/* split bar: their oddsHalf seam, numbers always printed */
.split{display:flex;height:34px;gap:0;font-family:var(--data);font-weight:800;font-size:14px}
.split>div{display:flex;align-items:center;padding:0 14px;min-width:70px}
.split .y{background:var(--yes);color:var(--ink);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.split .n{background:var(--no);color:var(--paper);justify-content:flex-end;margin-left:-12px;clip-path:polygon(14px 0,100% 0,100% 100%,0 100%)}

/* stat */
.stat .data{font-size:32px;line-height:1}.stat .lab{font-family:var(--shout);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);margin-top:6px}

/* live dot */
.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--no)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--no);animation:dot 1.2s steps(1) infinite}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* button tone = intent: yellow commits, orange navigates, red alarms */
.cta.commit .fc{fill:var(--yellow)}.cta.alarm .fc{fill:var(--no)}.cta.alarm{color:var(--paper)}
/* headline treatments, measured on cade.market */
.lift{text-shadow:.06em .06em 0 #000}
.on-art{-webkit-text-stroke:clamp(1px,.0333em,2px) #000;paint-order:stroke fill;text-shadow:.06em .06em 0 #000}
.dprint{text-shadow:1.5px 1.5px 0 #000}
/* blink: the live bead, 1.2s hard step, as on cade.market */
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.25}}
.blink{animation:blink 1.2s steps(1) infinite}

/* ===== v2.1: ported 1:1 from Scotty's handoff ===== */

/* focus + lift: the live demo build's ring (3px orange, 3px off) and its lift */
.shape:focus-visible,.shape.is-focus{outline:3px solid var(--orange);outline-offset:3px}
.shape{transition:transform 150ms cubic-bezier(0,0,.2,1)}
.shape>svg .sh{transform:translate(4px,4px);transition:transform 150ms cubic-bezier(0,0,.2,1)}
.shape>svg .fc{transform:none}
@media (hover:hover) and (pointer:fine){.shape:not([aria-disabled=true]):hover{transform:translate(-2px,-2px)}.shape:not([aria-disabled=true]):hover>svg .sh{transform:translate(7px,7px)}}
.shape.is-hover,.shape:focus-visible,.shape.is-focus{transform:translate(-2px,-2px)}
.shape.is-hover>svg .sh,.shape:focus-visible>svg .sh,.shape.is-focus>svg .sh{transform:translate(7px,7px)}
.shape:not([aria-disabled=true]):active,.shape.is-press{transform:translate(3px,3px)}
.shape:not([aria-disabled=true]):active>svg .sh,.shape.is-press>svg .sh{transform:translate(1px,1px)}
.shape>svg .rg{display:none}
.cta[aria-disabled=true]{filter:none}

/* LIVE · canonical battle lockup, eight layers, the bead blinks on its own */
.livetag{display:block;position:relative;width:var(--lt-w,256px);aspect-ratio:256/79;container-type:inline-size}
.livetag>span{position:absolute}.livetag img{width:100%;height:100%;display:block}
.lt-a{inset:6.9% 25.6% 0% 19.1%}.lt-b{inset:.1% 27.5% 6.7% 17.2%}
.lt-s1{inset:28.6% .2% 26.1% 90.1%}.lt-s2{inset:63.4% 81.5% 6% 3.6%}.lt-s3{inset:20% 2.5% 34.5% 87.8%}.lt-s4{inset:54.8% 84.1% 14.5% 1%}
.lt-x{inset:20% 15.3% 13.8% 68%}.lt-dot{inset:33.2% 67.2% 39.7% 24.4%}
.lt-word{inset:23% 33% 27% 34.4%;display:flex;align-items:center;justify-content:center;font-family:var(--shout);font-style:italic;font-weight:800;font-size:19.1cqw;line-height:1;color:#fff;white-space:nowrap;paint-order:stroke fill;-webkit-text-stroke:.042em #000}
.ds-live-blink{animation:dsblink 1.2s step-end infinite}
@keyframes dsblink{0%{opacity:1}50%{opacity:.25}100%{opacity:1}}
/* LIVE · lozenge (emphasis) */
.livelz{display:inline-flex;align-items:center;gap:10px;background:#0B0B0B;padding:6px 12px 6px 8px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:30px;line-height:1;color:#fff;text-transform:uppercase}
.livelz i{width:22px;height:22px;border-radius:50%;background:var(--no)}

/* battle bar · VolumeRaceBar: orange halftone left, chevron seam, violet stripes right */
.race{position:relative;width:100%}
.race .rsh{position:absolute;top:8px;left:8px;right:-8px;height:var(--rh,72px);background:#0B0B0B;clip-path:polygon(8px 2%,calc(100% - 16px) 0%,calc(100% - 4px) 28%,calc(100% - 12px) 50%,calc(100% - 2px) 76%,calc(100% - 14px) 100%,12px 100%,2px 66%,26px 48%,2px 30%)}
.race .rtr{position:relative;height:var(--rh,72px)}
.race .rl,.race .rr{position:absolute;inset:0;transition:clip-path 780ms cubic-bezier(.34,1.56,.64,1)}
.race .rl{z-index:1;background-image:linear-gradient(90deg,rgb(255 211 77/0) 0%,rgb(255 192 57/1) 16%,#ff8a00 60%),radial-gradient(circle 4px at 4px 4px,#d95f00 98%,transparent),radial-gradient(circle 4px at 14px 22px,#d95f00 98%,transparent),linear-gradient(100deg,#ffd34d 0%,#ff8a00 100%);background-size:100% 100%,20px 36px,20px 36px,100% 100%;background-repeat:no-repeat,repeat,repeat,no-repeat;filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)}
.race .rr{background-image:linear-gradient(90deg,rgb(166 107 255/1) 46%,rgb(119 66 224/1) 80%,rgb(99 48 211/0) 100%),repeating-linear-gradient(105deg,transparent 0 22px,rgb(74 31 158/.6) 22px 36px),linear-gradient(100deg,#a66bff 0%,#6330D3 100%);filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)}
.race .rp{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2;font-family:var(--data);font-weight:800;font-size:clamp(1.3rem,2.4vw,2.5rem);font-variant-numeric:tabular-nums;line-height:1}
.race .rp.l{left:24%;color:var(--ink)}.race .rp.r{left:76%;color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.race .clash{position:absolute;top:calc(var(--rh,72px)/2);z-index:3;width:0;height:0;pointer-events:none}
.race .clash svg{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.5);opacity:0}
.race .clash.go svg{animation:mmburst 280ms linear forwards}
@keyframes mmburst{from{transform:translate(-50%,-50%) scale(.5);opacity:1}to{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
.race .spark{position:absolute;left:0;top:0;width:8px;height:8px;animation:mmspark 500ms cubic-bezier(.16,1,.3,1) forwards}
@keyframes mmspark{from{translate:0 0;opacity:1}to{translate:var(--dx) var(--dy);opacity:0}}
.race.shake .rtr{animation:mmshake 620ms}
@keyframes mmshake{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.race-wrap{position:relative;padding-top:34px}.race-wrap .livetag{position:absolute;left:50%;top:-6px;transform:translateX(-50%);z-index:4}

/* split · ShareSplitBar: green arrow end, welded zigzag seam, torn red end */
.ssb{position:relative;display:block;height:var(--ssb-h,30px);--p:.6;--S:calc(var(--p) * (100% - 9px) + 12px)}
.ssb .pl{position:absolute;inset:0;filter:drop-shadow(1.5px 0 0 #000) drop-shadow(-1.5px 0 0 #000) drop-shadow(0 1.5px 0 #000) drop-shadow(0 -1.5px 0 #000) drop-shadow(var(--ssb-drop,0px) var(--ssb-drop,0px) 0 #000)}
.ssb .l,.ssb .r{position:absolute;inset:0;transition:clip-path 600ms cubic-bezier(.16,1,.3,1)}
.ssb .l{background:var(--yes);clip-path:polygon(5px 4%,calc(var(--S) + 2px) 0%,calc(var(--S) - 12px) 35%,var(--S) 60%,calc(var(--S) - 14px) 100%,7px 100%,0% 62%,15px 45%,0% 28%)}
.ssb .r{background:var(--no);clip-path:polygon(calc(var(--S) + 2px) 0%,calc(100% - 9px) 0%,calc(100% - 1px) 35%,calc(100% - 7px) 62%,100% 100%,calc(var(--S) - 14px) 100%,var(--S) 60%,calc(var(--S) - 12px) 35%)}
.ssb .v{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;gap:.4em;font-size:var(--ssb-fs,13px);line-height:1;white-space:nowrap}
.ssb .v.l2{left:calc(15px + .55rem);color:#0B0B0B}.ssb .v.r2{right:calc(9px + .55rem);color:#fff}
.ssb .w{font-family:var(--shout);font-style:italic;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.ssb .n{font-family:var(--data);font-weight:700;font-variant-numeric:tabular-nums}

/* MarketCard · their All Star card, every size in container units */
.mcard{container-type:inline-size;position:relative;width:var(--w,420px);color:#141414}
.mcard .msh{position:absolute;left:2.5cqw;top:2.5cqw;width:100%;height:calc(100% - 2.5cqw);background:#000;clip-path:var(--clip-panel)}
.mcard .mfc{position:absolute;left:0;top:0;width:100%;height:calc(100% - 2.5cqw);filter:drop-shadow(1.5px 0 0 #0B0B0B) drop-shadow(-1.5px 0 0 #0B0B0B) drop-shadow(0 1.5px 0 #0B0B0B) drop-shadow(0 -1.5px 0 #0B0B0B);background:#F0EAD9 radial-gradient(circle,rgba(20,20,20,.07) 1px,transparent 1.4px) 0 0/9px 9px;clip-path:var(--clip-panel)}
.mcard .min{position:relative;padding:7.8cqw 7.9cqw 10.6cqw;display:flex;flex-direction:column}
.mcard .idr{display:flex;justify-content:space-between;align-items:flex-start;height:25.9cqw}
.mcard .med{width:21cqw;aspect-ratio:1;position:relative;filter:drop-shadow(1cqw 1cqw 0 #000)}
.mcard .med .med-o{position:absolute;inset:0;background:#0B0B0B;clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
.mcard .med .med-r{position:absolute;inset:5%;background:var(--ring,#FFA800);clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
.mcard .med span{position:absolute;inset:12%;z-index:1;background:#141414;clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%);display:grid;place-items:center;font-family:var(--shout);font-style:italic;font-weight:800;font-size:11cqw;color:#F0EAD9;overflow:hidden}
.mcard .med img{width:100%;height:100%;object-fit:cover}.mcard .med svg{width:52%;height:52%}
.mcard .clk{margin-top:6.4cqw;background:var(--yellow);box-shadow:1.54cqw 1.54cqw 0 #000;padding:2.2cqw 2.5cqw 1.9cqw;display:flex;flex-direction:column;align-items:center;gap:.9cqw;outline:1px solid #141414}
.mcard .clk b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:3.23cqw;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.mcard .clk span{font-family:var(--data);font-weight:800;font-size:4.1cqw;line-height:1}
.mcard .q{margin:6.3cqw 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:7.38cqw;letter-spacing:.025em;line-height:1;text-transform:uppercase}
.mcard .met{display:flex;align-items:baseline;gap:3cqw;margin-top:6.3cqw;font-family:var(--data);font-weight:700;font-size:3.23cqw;letter-spacing:.04em;color:#625E57;text-transform:uppercase;white-space:nowrap}
.mcard .met b{font-weight:800;letter-spacing:.08em}.mcard .met em{font-style:normal;color:#141414;font-weight:800}
.mcard .met i{width:1px;height:3.5cqw;background:#B9B3A5}
.mcard .act{display:flex;align-items:center;gap:2.2cqw;margin-top:2.5cqw}
.mcard .act .ssb{flex:1;--ssb-h:9.84cqw;--ssb-fs:min(3.43cqw,14px);--ssb-drop:.9cqw}
.mcard .bolt{flex:none;width:9.84cqw;aspect-ratio:1;border-radius:999px;background:#FF7A00;border:2px solid #000;box-shadow:1.13cqw 1.13cqw 0 #000;display:grid;place-items:center}
.mcard .bolt svg{width:52%;fill:#FFF8E6}
.mcard .bolt[aria-disabled=true]{background:#5f5b54}
.mcard.loading .mfc{background:#F0EAD9;filter:grayscale(1) brightness(0) invert(1) opacity(.14)}
.mcard.loading .min{visibility:hidden}

/* round clock · DuelRoundClock: yellow notched plate on a black twin */
.rclock{position:relative;display:inline-block;filter:drop-shadow(7px 8px 0 #000)}
.rclock span{display:block;background:var(--yellow);color:#0B0B0B;padding:12px 30px;font-family:var(--data);font-weight:800;font-size:26px;line-height:1;clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,10% 50%)}
.rclock.closed span{font-family:var(--data);letter-spacing:.06em}

/* ===== v2.2: patterns, ported 1:1 from their source (audit 2026-10-01; source file named in each block) ===== */
/* section heading · port of ui/ArcadeSectionHeading (artwork node 2004:6457): the yellow label plate is THEIR two SVG paths,
   339x69, scaled by width; the type is container-sized (clamp(20px,10.4cqw,36px)). Row + date = LeaderboardArcadeBoard .sectionTitleRow / .sectionDate. */
.secRow{display:flex;align-items:center;gap:14px}
.secHead{position:relative;isolation:isolate;flex:none;width:100%;max-width:var(--w,339px);aspect-ratio:339/69;container-type:inline-size}
.secHead>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.secHead>h2,.secHead>h3{position:absolute;left:6%;right:6%;top:50%;z-index:1;margin:0;transform:translateY(-56%);white-space:nowrap;text-align:center;
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(20px,10.4cqw,36px);line-height:1;letter-spacing:0;text-transform:uppercase;color:#0B0B0B}
.secRow .dt{font-family:var(--data);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#B8B3A7}
@container (max-width:780px){.secRow{flex-wrap:wrap;gap:8px}.secRow .dt{font-size:10px}}
/* header · port of header/ArcadeHeaderChrome DesktopArcadeHeader (70px rail, units .8 header / .7 brand / 1 nav / .75 wallet)
   + HeaderIdentityBadge. Every px below is their constant times its unit, see ArcadeHeaderChrome.tsx:20-100, 560-690. */
.hdr{position:relative;isolation:isolate;display:block;width:100%;height:70px;overflow:visible;background:#0B0B0B;color:#F0EAD9}
.hdr .dz{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hdr .df{position:absolute;left:-72px;top:0;display:block;width:456px;height:70px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.68) 19.7%,rgba(0,0,0,.86) 33.6%,#000 40.2%,rgba(0,0,0,.88) 54%,rgba(0,0,0,.46) 67.9%,rgba(0,0,0,.18) 84%,transparent 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.68) 19.7%,rgba(0,0,0,.86) 33.6%,#000 40.2%,rgba(0,0,0,.88) 54%,rgba(0,0,0,.46) 67.9%,rgba(0,0,0,.18) 84%,transparent 100%)}
.hdr .df i{position:absolute;inset:0;display:block;background-position:0 0;background-size:12px 12px}
.hdr .df i:nth-child(1){background-image:radial-gradient(circle,#171717 0 78%,transparent 85%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 43.5%,#000 58%,transparent 64.5%);mask-image:linear-gradient(90deg,transparent 0%,#000 43.5%,#000 58%,transparent 64.5%)}
.hdr .df i:nth-child(2){background-image:radial-gradient(circle,#171717 0 55%,transparent 61%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 35.4%,#000 65.3%,transparent 70.9%);mask-image:linear-gradient(90deg,transparent 0%,#000 35.4%,#000 65.3%,transparent 70.9%)}
.hdr .df i:nth-child(3){background-image:radial-gradient(circle,#171717 0 36%,transparent 42%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 27.4%,#000 75%,transparent 80.6%);mask-image:linear-gradient(90deg,transparent 0%,#000 27.4%,#000 75%,transparent 80.6%)}
.hdr .df i:nth-child(4){background-image:radial-gradient(circle,#171717 0 19%,transparent 24%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24.9%,#000 83.1%,transparent 95.2%);mask-image:linear-gradient(90deg,transparent 0%,#000 24.9%,#000 83.1%,transparent 95.2%)}
.hdr .lyr{position:absolute;inset:0;z-index:10}
.hdr .hwm{position:absolute;z-index:30;left:57.72px;top:12.25px;display:block;width:122.2px;height:45.5px;transition:transform 150ms}
.hdr .hwm:hover{transform:translateY(-2px)}
.hdr .hwm svg{display:block;width:100%;height:100%}
.hdr .hwm svg path{fill:#FFFFFF}
.hdr nav{position:absolute;left:0;right:0;top:9.87px;height:50.26px;display:flex;align-items:center;justify-content:center;gap:48px}
.hdr nav a{display:inline-flex;align-items:center;white-space:nowrap;color:#F0EAD9;transition:color 150ms}
.hdr nav a span{display:inline-flex;align-items:center;padding:7px 4px;font-family:var(--call);font-style:oblique;font-weight:500;font-size:32px;line-height:1;text-transform:uppercase;white-space:nowrap}
.hdr nav a:hover,.hdr nav a:focus-visible{color:#FFA800}
.hdr nav a[aria-current] span{padding:7px 14px 5px;border:2px solid #0B0B0B;background:#F0EAD9;color:#0B0B0B}
.hdr nav a[aria-current]:hover span{color:#0B0B0B}
.hdr a:focus-visible,.hdr button:focus-visible{outline:none;box-shadow:0 0 0 4px #000,0 0 0 6px #FFA800}
.hdr .wal{position:absolute;z-index:30;right:81.42px;top:11.29px;height:47.42px;display:flex;align-items:center;justify-content:flex-end}
.hdr .who{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}
.hdr .who .av{position:relative;display:inline-flex;flex:none;width:38px;height:38px;overflow:hidden;border:1px solid rgba(240,234,217,.3);border-radius:2px;background:#0A0A0A;box-shadow:0 0 14px rgba(244,239,227,.18),inset 0 0 0 1px rgba(255,255,255,.04)}
.hdr .who .av svg{display:block;width:100%;height:100%}
.hdr .who .tx{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.hdr .who .nm{max-width:138px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--shout);font-style:italic;font-weight:800;font-size:14px;letter-spacing:.025em;text-transform:uppercase;color:#F1EAD6}
.hdr .who .bl{display:flex;align-items:center;height:14px}
.hdr .who .bl b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:19px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--yellow)}
.hdr .who .bl i{display:block;width:54px;height:11px;border-radius:2px;background:rgba(239,233,216,.18);animation:hdr-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes hdr-pulse{50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.hdr .who .bl i{animation:none}}
/* theirs swaps to MobileArcadeHeaderBar under 961px (a different component); the DS specimen only drops the nav */
@media (max-width:960px){.hdr nav{display:none}}
/* podium · port of LeaderboardArcadeBoard PodiumCard (LeaderboardArcadeBoard.module.css .winnerStack, .podium*).
   Notch = their ::before / ::after polygons (14px black keyline, 11px face). Fade art = halftone-fade1.svg (copy from the handoff, see note). */
.podium{display:grid;grid-template-areas:"second first third";grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);align-items:end;gap:16px;width:100%;max-width:1120px}
.pod{position:relative;display:flex;flex-direction:column;min-width:0;min-height:220px;width:100%;padding:0;border:0;border-radius:5px;background:transparent;box-shadow:6px 6px 0 #000;color:#0B0B0B;text-align:left;font:inherit}
button.pod{cursor:pointer;transition:transform 160ms ease}
button.pod:hover{transform:translateY(-2px)}
.pod:focus-visible{outline:3px solid #F0EAD9;outline-offset:3px}
.pod::before,.pod::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.pod::before{inset:-3px;background:#000;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.pod::after{background:var(--c,#161616);clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)}
.pod.p1{grid-area:first;min-height:270px;isolation:isolate;--c:#FAF424}
.pod.p2{grid-area:second;--c:#B991FF}
.pod.p3{grid-area:third;--c:#FFA800}
.pod .ct{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;min-width:0;min-height:100%;padding:18px 18px 0;isolation:isolate}
.pod .ct>:not(.fd){position:relative;z-index:1}
.pod .rk{display:flex;align-items:baseline;gap:10px;min-width:0;margin-bottom:18px;padding:0 68px 10px 0;border-bottom:3px solid #0B0B0B}
.pod .rk b{flex:0 0 auto;font-family:var(--shout);font-style:italic;font-weight:800;font-size:58px;line-height:.8;color:#0B0B0B}
.pod.p1 .rk b{font-size:74px}
.pod .rk span{min-width:0;font-family:var(--data);font-size:11px;font-weight:800;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#0B0B0B}
.pod .rk img{flex:0 0 auto;width:40px;height:40px;margin-left:auto}
.pod .mn{display:flex;flex-direction:column;gap:10px;min-width:0;padding-bottom:12px}
.pod .id{display:inline-flex;align-items:center;gap:12px;width:100%;min-width:0;overflow-wrap:anywhere;font-family:var(--shout);font-style:italic;font-weight:800;font-size:30px;line-height:.96;text-transform:uppercase;color:#0B0B0B}
.pod.p1 .id{font-size:34px}
.pod .id .nm{flex:1 1 auto;min-width:0;padding-inline-end:.14em;white-space:nowrap}
.pod .av{flex:none;position:relative;display:inline-flex;width:28px;height:28px;overflow:hidden;border:1px solid rgba(240,234,217,.3);border-radius:2px;background:#0A0A0A;box-shadow:0 0 14px var(--glow,rgba(244,239,227,.18)),inset 0 0 0 1px rgba(255,255,255,.04)}
.pod .av.l{--glow:rgba(215,255,79,.22);border-color:rgba(145,187,79,.45)}
.pod .av.b{--glow:rgba(91,140,255,.24);border-color:#E5E7EB}
.pod .av svg{display:block;width:100%;height:100%}
.pod .pb{display:flex;flex-direction:column;gap:4px;min-width:0}
.pod .pb small{font-family:var(--data);font-size:11px;font-weight:800;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#0B0B0B}
.pod .pf{max-width:100%;font-family:var(--shout);font-style:italic;font-weight:800;font-size:38px;line-height:.92;font-variant-numeric:tabular-nums;white-space:nowrap;color:#0B0B0B}
.pod.p1 .pf{font-size:48px}
.pod .pf[data-state=positive]{color:#175C33}.pod .pf[data-state=negative]{color:#8F1926}
.pod .ru{margin:auto -18px 0;padding:12px 8px 14px;border-top:3px solid #0B0B0B;background:#F0EAD9;color:#000}
.pod .sts{display:grid;grid-template-columns:minmax(0,42.5fr) minmax(0,32fr) minmax(0,25.5fr);gap:0;min-width:0}
.pod .sts>div{min-width:0;padding:0 8px;border-left:1px solid #000}
.pod .sts>div:first-child{border-left:0}
.pod .sts p{margin:0;font-family:var(--data);font-size:11px;font-weight:800;line-height:1.1;letter-spacing:.14em;white-space:nowrap;text-transform:uppercase;color:#000;opacity:.62}
.pod .sts em{display:block;margin:4px 0 0;font-style:normal;font-family:var(--data);font-size:14px;font-weight:800;line-height:1;white-space:nowrap;overflow-wrap:anywhere;color:#000}
.pod .fd{position:absolute;top:14px;right:12px;z-index:0;width:64px;height:45.35px;pointer-events:none;background:url('assets/ds/foundations/halftone-fade1.svg') center/100% 100% no-repeat;filter:grayscale(1) brightness(.55);opacity:.45;transform:rotate(180deg)}
@container (max-width:780px){
  .podium{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .pod,.pod.p2,.pod.p3{min-height:190px}.pod.p1{min-height:250px}
  .pod .ct{padding:16px 14px 0}
  .pod .rk{margin-bottom:14px}
  .pod .rk span{font-size:10px;letter-spacing:.08em}
  .pod .id{font-size:29px}.pod.p1 .id{font-size:32px}
  .pod .pf{font-size:36px}.pod.p1 .pf{font-size:42px}
  .pod .ru{margin-right:-14px;margin-left:-14px;padding:10px 5px 12px}
  .pod .sts>div{padding:0 7px}
  .pod .sts p{font-size:10px;letter-spacing:.08em}
  .pod .sts em{font-size:12px}
}
/* leaderboard rows · port of LeaderboardArcadeBoard RankRow + TableHeaderRow + "Your rank" (LeaderboardArcadeBoard.module.css .rank*, .yourRank*).
   The 5px radius IS theirs (.rankRow border-radius:5px), not ours. Avatar = ActorAvatar identicon (rounded-sm, 1px border, 14px glow). */
.lrows{width:100%;max-width:1120px;min-width:0}
.lrows .lbl{display:block;margin:0 0 10px;font-family:var(--data);font-size:11px;font-weight:800;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#B8B3A7}
.lrows .yh{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.lrows .yh .lbl{margin:0}
.lrows .ys{min-width:0;margin-left:auto;font-family:var(--data);font-size:10px;font-weight:700;line-height:1.2;letter-spacing:.12em;text-align:right;text-transform:uppercase;color:#B8B3A7}
.lrows .tbl{min-width:0;margin-top:28px}
.lrows .rws{display:grid;gap:6px}
.lrow{display:grid;grid-template-columns:minmax(52px,.6fr) minmax(200px,2.2fr) minmax(108px,.9fr) minmax(102px,.85fr) minmax(130px,1.05fr) minmax(150px,1.2fr);align-items:stretch;gap:12px;
  box-sizing:border-box;width:100%;min-width:0;min-height:60px;padding:8px 14px 8px 10px;border:2px solid #343434;border-radius:5px;background:#161616;color:#F0EAD9;text-align:left;font:inherit}
button.lrow{cursor:pointer}
.lrow:focus-visible{outline:3px solid #F0EAD9;outline-offset:3px}
.lrow.you{border-color:#F0EAD9;background:#202020}
.lrow .r{display:flex;align-items:center;min-width:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:22px;color:var(--yellow)}
.lrow .n{display:flex;align-items:center;gap:12px;min-width:0;padding-right:14px}
.lrow .av{flex:none;position:relative;display:inline-flex;width:24px;height:24px;overflow:hidden;border:1px solid rgba(240,234,217,.3);border-radius:2px;background:#0A0A0A;box-shadow:0 0 14px var(--glow,rgba(244,239,227,.18)),inset 0 0 0 1px rgba(255,255,255,.04)}
.lrow .av.l{--glow:rgba(215,255,79,.22);border-color:rgba(145,187,79,.45)}
.lrow .av.b{--glow:rgba(91,140,255,.24);border-color:#E5E7EB}
.lrow .av svg{display:block;width:100%;height:100%}
.lrow .nm{min-width:0;max-width:100%;overflow-wrap:anywhere;font-family:var(--shout);font-style:italic;font-weight:800;font-size:20px;line-height:1.05;text-transform:uppercase;color:#F0EAD9}
.lrow .yo{flex:none;font-family:var(--data);font-size:9px;font-weight:800;letter-spacing:.1em;color:#B8B3A7}
.lrow .sts{display:contents}
.lrow .f{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:0;font-family:var(--data);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;color:#F0EAD9}
.lrow .f i{display:none;font-style:normal;font-family:var(--data);font-size:10px;font-weight:800;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#B8B3A7}
.lrow .p{display:flex;align-items:center;justify-content:flex-end;min-width:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:25px;line-height:.95;font-variant-numeric:tabular-nums;white-space:nowrap;color:#F0EAD9}
.lrow .p[data-state=positive]{color:#91BB4F}.lrow .p[data-state=negative]{color:#EA2A46}
/* the column header shares the grid; transparent side borders keep it over the cells */
.lrow.hd{min-height:0;padding:0 14px 7px 10px;border:0;border-left:2px solid transparent;border-right:2px solid transparent;border-radius:0;background:none;align-items:end}
.lrow.hd span{min-width:0;font-family:var(--data);font-size:11px;font-weight:800;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#B8B3A7}
.lrow.hd span:nth-child(n+3){text-align:right}
@container (max-width:780px){
  .lrows .tbl{margin-top:28px}
  .lrow.hd{display:none}
  .lrow{grid-template-areas:"rank identity profit" "rank stats stats";grid-template-columns:44px minmax(0,1fr) max-content;gap:0;min-height:0;padding:10px}
  .lrow .r{grid-area:rank;align-items:flex-start;padding:6px 8px 0 2px}
  .lrow .n{grid-area:identity;align-items:flex-start;min-height:34px;padding:6px 8px 4px 10px}
  .lrow .p{grid-area:profit;align-items:flex-start;justify-content:flex-start;padding:6px 0 0 8px;font-size:22px;text-align:right}
  .lrow .sts{display:grid;grid-area:stats;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:8px}
  .lrow .f{align-items:flex-start;gap:4px;padding:0 8px;font-size:12px;text-align:left}
  .lrow .f i{display:block}
}
/* title cards · port of LeaderboardArcadeBoard TitleCard (LeaderboardArcadeBoard.module.css .titleGrid, .titleCard*). Tone per title: Smasher #FAF424, Grinder #57E08A. */
.tcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;max-width:1120px}
.tcard{display:flex;align-items:stretch;gap:16px;min-width:0;padding:14px 16px;border:3px solid #000;border-radius:5px;background:#242424;box-shadow:6px 6px 0 #000;color:inherit;text-align:left;font:inherit}
button.tcard{width:100%;appearance:none;cursor:pointer;transition:border-color 150ms ease,background-color 150ms ease}
button.tcard:hover{border-color:#FAF424;background:#2B2B2B}
button.tcard:focus-visible{outline:2px solid #30D8BC;outline-offset:3px}
.tcard .cp{flex:1;min-width:0}
.tcard p{margin:0}
.tcard .ey,.tcard .sl{font-family:var(--data);font-size:11px;font-weight:800;line-height:1;letter-spacing:.14em;text-transform:uppercase}
.tcard .ey{color:var(--tone,#FAF424)}
.tcard h3{margin:5px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:24px;line-height:1;text-transform:uppercase;color:#F0EAD9}
.tcard .who{margin:6px 0 0;overflow-wrap:anywhere;font-family:var(--data);font-size:11px;font-weight:800;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:#B8B3A7}
.tcard .st{display:flex;flex-direction:column;justify-content:center;min-width:100px;padding-left:16px;border-left:1px solid rgba(240,234,217,.25);text-align:right}
.tcard .sl{color:#B8B3A7}
.tcard .sv{margin-top:5px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:30px;line-height:.9;white-space:nowrap;color:var(--tone,#FAF424)}
.tcard .sv.none{color:#8A8A8A}
@container (max-width:780px){
  .tcards{grid-template-columns:1fr;gap:12px}
  .tcard{gap:12px;padding:13px 14px}
  .tcard h3{font-size:22px}
  .tcard .who,.tcard .ey,.tcard .sl{font-size:10px}
  .tcard .st{min-width:84px;padding-left:12px}
  .tcard .sv{font-size:27px}
}
/* profile hero + stat strip · port of ProfileDossier DossierPlayerCard + DossierStatCards (profile.module.css ._playerCard*, ._statCard*).
   Plate silhouette = DS_PANEL_CLIP (quick-predict-presentation.ts:47). Sparks = their spark.svg as a currentColor mask (ArcadeIcon "spark"). */
.phwrap{display:grid;width:100%;max-width:1136px}
.phero{--clip:polygon(14px 8px,36% 10px,34.5% 0%,56% 9px,calc(100% - 18px) 0%,calc(100% - 2px) 12%,calc(100% - 12px) 32%,calc(100% - 2px) 50%,calc(100% - 16px) 64%,calc(100% - 4px) 80%,calc(100% - 14px) calc(100% - 6px),77% 100%,50% calc(100% - 8px),53% 100%,14px calc(100% - 2px),8px 72%,2px 50%,10px 20%);
  position:relative;display:flex;flex-direction:column;min-width:0;color:var(--paper)}
.phero .psh{position:absolute;inset:0;background:#000;clip-path:var(--clip);transform:translate(6px,6px);pointer-events:none}
.phero .fc{--av:104px;position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden;clip-path:var(--clip);
  padding:28px 32px 28px 40px;
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.26) 100%),linear-gradient(163deg,#1A1816 0%,#161514 52%,#0E0D0C 100%)}
.phero .fan{position:absolute;top:50%;left:calc(40px + var(--av) / 2);width:170%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,255,.086) 0 9deg,transparent 9deg 18deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 2%,#0000 86%);mask-image:radial-gradient(closest-side,#000 2%,#0000 86%)}
.phero .pht{position:absolute;pointer-events:none;transform:scale(1.85)}
.phero .pht svg{display:block;width:100%;height:100%}
.phero .pht.hi{top:-4%;right:2%;width:12%;height:34%;opacity:.3;color:#fff;transform-origin:100% 0;-webkit-mask-image:radial-gradient(closest-side,#000 35%,#0000 78%);mask-image:radial-gradient(closest-side,#000 35%,#0000 78%)}
.phero .pht.lo{bottom:-10%;left:-1%;width:15%;height:40%;opacity:.5;color:#0B0B0B;transform-origin:0 100%;-webkit-mask-image:radial-gradient(closest-side,#000 32%,#0000 76%);mask-image:radial-gradient(closest-side,#000 32%,#0000 76%)}
.phero .stars{position:absolute;inset:0;pointer-events:none}
.phero .stars b{position:absolute;display:block;font-size:16px;line-height:24px}
.phero .stars i{display:inline-block;vertical-align:middle;width:var(--s);height:var(--s);background:currentColor;
  -webkit-mask:url('../assets/svg/icon/spark.svg') center/contain no-repeat;mask:url('../assets/svg/icon/spark.svg') center/contain no-repeat}
.phero .bdy{position:relative;flex:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(16px,2.2vw,32px)}
.phero .avf{position:relative;z-index:1;display:inline-block;filter:drop-shadow(3px 3px 0 #000)}
.phero .avh{display:grid;width:var(--av);height:var(--av);padding:6px;background:var(--orange);clip-path:polygon(25% 3%,75% 3%,98% 50%,75% 97%,25% 97%,2% 50%)}
.phero .avi{position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;background:var(--violet-deep);clip-path:polygon(25% 3%,75% 3%,98% 50%,75% 97%,25% 97%,2% 50%)}
.phero .avi svg{display:block;width:100%;height:100%;background:#0A0A0A}
.phero .id{min-width:0}
.phero h1{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(28px,4vw,56px);line-height:.9;text-transform:uppercase;color:var(--paper);
  text-shadow:3px 3px 0 #000;-webkit-text-stroke:1px #000;paint-order:stroke fill;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phero .prw{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.phero .wl{font-family:var(--data);font-weight:700;font-size:clamp(12px,1.05vw,14px);line-height:1;letter-spacing:.04em;color:rgba(255,255,255,.66);white-space:nowrap}
.phero .ib{display:grid;place-items:center;width:34px;height:34px;border:2px solid #000;background:var(--paper);color:#0B0B0B;box-shadow:3px 3px 0 #000;cursor:pointer;transition:transform .12s cubic-bezier(0,0,.2,1)}
.phero .ib:hover{transform:translateY(-2px)}
.phero .ib:focus-visible{outline:none;box-shadow:3px 3px 0 #000,0 0 0 2px #0E0D0C,0 0 0 4px #FFA800}
.phero .ib svg{width:16px;height:16px}
/* stat strip: five slanted cards, the first carries the P&L verdict tone */
.pstats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1%;margin-top:clamp(14px,1.4vw,20px)}
.pstats>div{position:relative;min-width:0;padding:8px 22px 9px;background:var(--paper);color:#0B0B0B;clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);filter:drop-shadow(4px 4px 0 #000)}
.pstats>div[data-fill=red]{background:var(--no);color:var(--paper)}
.pstats>div[data-fill=lime]{background:var(--yes);color:#0B0B0B}
.pstats p{margin:0;font-family:var(--data);font-size:10px;font-weight:800;line-height:1;letter-spacing:.16em;text-transform:uppercase;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstats b{display:block;margin-top:4px;font-family:var(--shout);font-style:normal;font-weight:800;font-size:clamp(25px,2.6vw,38px);line-height:1;letter-spacing:-.015em;-webkit-text-stroke:.6px currentColor;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstats small{display:block;margin-top:2px;font-family:var(--data);font-size:9px;font-weight:700;line-height:1;letter-spacing:.1em;text-transform:uppercase;opacity:.55;white-space:nowrap}
@media (max-width:639px){
  .phwrap{gap:18px}
  .phero .fc{padding-left:30px;padding-right:28px}
  .phero .fan{top:calc(28px + var(--av) / 2);opacity:.62}
  .phero .bdy{grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:28px}
  .phero .prw{gap:8px;margin-top:10px}
  .pstats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pstats>div{clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);padding:8px 18px 9px}
  .pstats>div:last-child:nth-child(odd){grid-column:1/-1}
  .pstats b{font-size:29px}
}
/* prediction row · port of ProfileDossier DossierTicketCard (profile.module.css ._stub*), 1:1.
   Silhouette = DS_PANEL_CLIP (quick-predict-presentation.ts:47), compact = DS_PANEL_CLIP_COMPACT (:80) under 640px. */
.prows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;max-width:1136px}
.prow{--clip:polygon(14px 8px,36% 10px,34.5% 0%,56% 9px,calc(100% - 18px) 0%,calc(100% - 2px) 12%,calc(100% - 12px) 32%,calc(100% - 2px) 50%,calc(100% - 16px) 64%,calc(100% - 4px) 80%,calc(100% - 14px) calc(100% - 6px),77% 100%,50% calc(100% - 8px),53% 100%,14px calc(100% - 2px),8px 72%,2px 50%,10px 20%);
  --tt:10px;--tr:18px;--tb:8px;--tl:14px;
  position:relative;min-width:0;padding:0 6px 6px 0;color:var(--paper);transition:transform .1s cubic-bezier(0,0,.2,1)}
.prow:hover{transform:translateY(-2px)}
.prow .psh{position:absolute;inset:0 6px 6px 0;background:#000;clip-path:var(--clip);transform:translate(6px,6px);pointer-events:none}
.prow .fc{position:relative;display:flex;align-items:stretch;min-height:156px;background:#141414;clip-path:var(--clip);overflow:hidden}
.prow .bd{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:12px;margin:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;
  padding:calc(var(--tt) + 10px) 14px calc(var(--tb) + 12px) calc(var(--tl) + 6px)}
.prow .bd:focus-visible{outline:none;box-shadow:0 0 0 2px #0E0D0C,0 0 0 4px #FFA800}
.prow .hd{display:flex;align-items:center;gap:14px;min-width:0}
/* the coin: DS CoinMedallion "battle" drawing (indicators/CoinMedallion.tsx), viewBox -112 -112 232 234 */
.prow .coin{flex:none;width:clamp(58px,5.2vw,78px);aspect-ratio:232/234;filter:drop-shadow(3px 3px 0 #000)}
.prow .coin svg{display:block;width:100%;height:100%}
.prow .coin text{font-family:var(--shout);font-style:italic;font-weight:800;font-size:84px}
.prow .cp{flex:1;min-width:0}
.prow h3{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(19px,1.7vw,24px);line-height:1;text-transform:uppercase;color:var(--paper);text-shadow:2px 2px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .mt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;margin-top:8px}
.prow .ln{display:inline-block;padding:5px 14px 5px 16px;background:var(--yellow);color:#0B0B0B;font-family:var(--data);font-size:10px;font-weight:800;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(8px 4%,calc(100% - 12px) 0%,calc(100% - 4px) 30%,calc(100% - 8px) 52%,calc(100% - 2px) 74%,calc(100% - 7px) 100%,8px 100%,10px 64%,3px 42%,9px 26%)}
.prow .pl{font-family:var(--data);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.prow .fl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:10px;border-top:2px solid rgba(255,255,255,.1)}
.prow .fl>div{min-width:0}
.prow .fl p{margin:0}
.prow .fk{font-family:var(--data);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.prow .fv{margin-top:5px!important;font-family:var(--shout);font-style:italic;font-weight:800;font-size:20px;line-height:1;text-transform:uppercase;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .pk{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;padding:4px 8px 4px 7px;border:2px solid #000;box-shadow:2px 2px 0 #000;font-family:var(--shout);font-style:italic;font-weight:800;font-size:14px;line-height:1;text-transform:uppercase;color:#fff;text-shadow:1.5px 1.5px 0 #000}
.prow .pk[data-direction=higher]{background:var(--yes)}.prow .pk[data-direction=lower]{background:var(--no)}
/* the result panel: a wedge-cut plate inside the stub, toned per outcome */
.prow .rs{--tone:#4A4A4A;position:relative;flex:none;width:128px;margin-left:-6px;filter:drop-shadow(-3px 0 0 #000) drop-shadow(0 -.5px 0 #000) drop-shadow(0 .5px 0 #000)}
.prow .rs[data-outcome=win]{--tone:var(--yes)}.prow .rs[data-outcome=loss]{--tone:var(--no)}.prow .rs[data-outcome=pending]{--tone:#4A4A4A}.prow .rs[data-outcome=refunded]{--tone:#A3A3A3}
.prow .rf{--w:14px;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:var(--tone);
  padding:10px calc(8px + var(--tr)) 10px calc(6px + var(--w));clip-path:polygon(var(--w) 0,100% 0,100% 100%,var(--w) 100%,0 50%)}
.prow .ry{position:absolute;inset:0;opacity:.18;pointer-events:none;background-image:repeating-conic-gradient(from 8deg at 28% 118%,#0000 0deg 9deg,rgba(255,255,255,.9) 9deg 18deg)}
.prow .sk{position:relative;display:grid;justify-items:stretch;gap:6px;width:fit-content;max-width:100%;text-align:center}
.prow .st{position:relative;display:block;font-family:var(--shout);font-style:italic;font-weight:800;font-size:26px;line-height:1;text-transform:uppercase;text-align:center;color:var(--paper);text-shadow:3px 3px 0 #000;-webkit-text-stroke:1px #000;paint-order:stroke fill}
.prow .rs[data-outcome=refunded] .st{font-size:20px;color:#0B0B0B;-webkit-text-stroke:0;text-shadow:2px 2px 0 rgba(255,255,255,.45)}
.prow .pn{position:relative;font-family:var(--shout);font-style:italic;font-weight:800;font-size:22px;line-height:1;font-variant-numeric:tabular-nums;color:var(--tone);-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:2px 2px 0 rgba(0,0,0,.9)}
.prow .rs[data-outcome=pending] .pn,.prow .rs[data-outcome=refunded] .pn,.prow .rs[data-outcome=loss] .pn{color:var(--paper)} /* a loss was red type on the red flap */
.prow .shr{position:relative;width:100%;margin:0;padding:6px 10px;border:2px solid #000;background:#0B0B0B;box-shadow:3px 3px 0 #000;font-family:var(--data);font-size:12px;font-weight:800;letter-spacing:.08em;line-height:1;text-transform:uppercase;color:var(--paper);cursor:pointer;transition:transform .12s cubic-bezier(0,0,.2,1)}
.prow .shr:hover{transform:translateY(-2px)}
@media (max-width:1023px){.prows{grid-template-columns:1fr}}
@media (max-width:639px){
  .prow{--clip:polygon(12px 5px,36% 6px,34.5% 0%,56% 5px,calc(100% - 8px) 0%,calc(100% - 1px) 12%,calc(100% - 6px) 32%,calc(100% - 1px) 50%,calc(100% - 7px) 64%,calc(100% - 2px) 80%,calc(100% - 6px) calc(100% - 3px),77% 100%,50% calc(100% - 4px),53% 100%,18px calc(100% - 1px),4px 72%,1px 50%,5px 20%);--tt:5px;--tr:8px;--tb:4px;--tl:18px}
  .prow .bd{gap:10px}.prow .rs{width:108px}.prow .rf{--w:6px}
  .prow h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;font-size:18px;line-height:1.05}
  .prow .fl{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:10px}
  .prow .pk{padding:4px 7px 4px 6px;font-size:13px}.prow .fv{font-size:18px}
}
/* toggle · NO source exists for a "Mine / Everyone" scope toggle in the handoff (source/, storybook/, assets/ all searched).
   The nearest shipped control is the leaderboard PERIOD PILLS (LeaderboardArcadeBoard.tsx Masthead, PERIOD_PILLS), ported 1:1 here. */
.tgl{display:flex;flex-wrap:wrap;gap:8px}
.tgl button{transform:skewX(-8deg);padding:8px 16px;border:3px solid #000;background:#242424;box-shadow:4px 4px 0 #000;color:rgba(255,255,255,.6);
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:15px;line-height:1;text-transform:uppercase;cursor:pointer;transition:transform 150ms}
.tgl button span{display:inline-block;transform:skewX(8deg)}
.tgl button:hover{transform:skewX(-8deg) translateY(-2px)}
.tgl button:focus-visible{outline:none;box-shadow:4px 4px 0 #000,0 0 0 2px #30D8BC}
.tgl button[aria-pressed=true]{background:#6330D3;color:#fff}
@media (max-width:639px){.tgl{justify-content:center}}
/* footer · port of site/CadeSiteFooter + CadeFooterEmailSignup (cade-site-footer.module.css), desktop row from 768px, centred stack below. */
.ftr{width:100%;padding:clamp(28px,3vw,44px) clamp(18px,2vw,34px) calc(clamp(22px,2.4vw,34px) + 44px);border-top:2px solid rgba(255,255,255,.12);background:#101010;color:var(--paper)}
.ftr .in{width:min(100%,1400px);margin-inline:auto}
.ftr .gr{display:grid;gap:clamp(24px,3vw,48px);align-items:start;justify-items:center;text-align:center}
.ftr .br{min-width:0}
.ftr .fwm{display:block;width:min(145.467px,80vw);aspect-ratio:581.869/353.78;margin-inline:auto}
.ftr .fwm svg{display:block;width:100%;height:100%}
.ftr .fwm svg path{fill:#FFFFFF}
.ftr .tg{margin:14px 0 0;font-family:var(--shout);font-style:italic;font-weight:700;font-size:15px;line-height:1.25;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ftr .cols{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,9vw,56px)}
.ftr .col{min-width:0;text-align:start}
.ftr h2{margin:0 0 12px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:19px;line-height:1;text-transform:uppercase;color:var(--paper)}
.ftr ul{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.ftr ul a,.ftr ul span{font-family:var(--shout);font-weight:600;font-size:14px;line-height:1.2;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.6)}
.ftr ul a:hover{color:#FFA800}
.ftr .fck{padding:0;border:0;background:none;font-family:var(--read);font-size:16px;line-height:24px;color:var(--paper);cursor:pointer}
.ftr .su{display:flex;flex-direction:column;gap:6px;width:min(420px,100%);max-width:420px;margin-top:-16px;text-align:left}
.ftr .su label{font-family:var(--shout);font-size:14px;font-weight:600;line-height:1.2;text-transform:uppercase;color:var(--paper)}
.ftr .su .rw{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0}
.ftr .su input{flex:1 1 auto;min-width:0;padding:9px 10px;border:2px solid rgba(240,234,217,.28);border-right-width:0;background:rgba(11,11,11,.6);color:inherit;font-family:var(--data);font-size:12px;border-radius:0}
.ftr .su input:focus-visible{outline:none}
.ftr .su button{display:flex;flex:none;align-items:center;justify-content:center;width:42px;padding:0;border:2px solid rgba(240,234,217,.28);border-left:0;background:rgba(240,234,217,.14);color:var(--paper);cursor:pointer}
.ftr .su button[data-valid=true]{background:#FFA800;color:#0B0B0B}
.ftr .su p{min-height:14px;margin:0;font-family:var(--data);font-size:10px;line-height:1.4;letter-spacing:.04em}
.ftr .rl{height:1px;margin:clamp(22px,2.4vw,36px) 0 0;background:rgba(255,255,255,.12)}
.ftr .bs{display:grid;grid-template-columns:1fr;align-items:start;gap:32px;margin-top:16px;text-align:left}
.ftr .lg{min-width:0;font-family:var(--read);text-align:justify;color:rgba(255,255,255,.45)}
.ftr .lg p{margin:0 0 8px;font-size:13px;line-height:1.35}
.ftr .lg p:last-child{margin-bottom:0}
.ftr .lg .fcr{line-height:1.65;font-weight:700;text-align:left;color:var(--paper)}
.ftr .lg a{color:var(--paper);text-decoration-color:#FFA800;text-underline-offset:3px;transition:color 140ms ease-out}
.ftr .lg a:hover{color:#FFA800}
.ftr .seal{display:inline-flex;justify-self:center;flex:none;align-items:center;gap:6px;width:170px;min-width:170px;height:60px;padding:8px 12px;border:2px solid #0B0B0B;border-radius:12px;background:var(--paper);box-shadow:0 4px 14px rgba(0,0,0,.25);color:#0B0B0B;text-decoration:none;transition:transform 140ms ease-out}
.ftr .seal:hover,.ftr .seal:focus-visible{background:#FFA800;transform:translateY(-1px)}
.ftr .seal img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:contain}
.ftr .seal span{display:flex;flex-direction:column;text-align:start;font-family:var(--read);font-size:11px;line-height:1.4}
.ftr .seal b{font-weight:700}.ftr .seal em{font-style:normal;font-weight:400;opacity:.85}
@media (max-width:767.98px),(pointer:coarse){.ftr ul{gap:0}.ftr ul a,.ftr ul span{display:flex;align-items:center;min-height:44px}}
@media (min-width:768px){
  .ftr{padding-bottom:clamp(22px,2.4vw,34px)}
  .ftr .gr{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,1.7vw,24px);justify-items:stretch;text-align:start}
  .ftr .fwm{width:145.467px;height:88.445px;aspect-ratio:auto;margin-inline:0}
  .ftr .cols{display:contents}
  .ftr .su{grid-column:span 2;width:100%;max-width:none;margin-top:0}
  .ftr .su label{font-size:19px;font-weight:800;font-style:italic;line-height:1}
  .ftr .bs{grid-template-columns:minmax(0,1fr) 170px;column-gap:32px}
  .ftr .seal{justify-self:end}
}
/* DS page: the ported compact layouts key off the specimen column, not the viewport */
.dsdoc #patterns .grp>.items{container-type:inline-size}
/* the installed family names, so a Figma capture opens in real Futura on a Mac that has it */
@font-face{font-family:"Futura Condensed PT";src:url('../assets/fonts/futura/futura-condensed-pt-medium-oblique-589e4507d391c.otf');font-weight:500;font-style:oblique;font-display:swap}
@font-face{font-family:"Futura Condensed PT";src:url('../assets/fonts/futura/futura-condensed-pt-medium-589e44ed1e3a5.otf');font-weight:500;font-style:normal;font-display:swap}

/* split labels live in their own plate's slot (ShareSplitBar .slotLeft/.slotRight); the word steps down when the slot is narrow */
.ssb .v{overflow:hidden;container-type:inline-size}
.ssb .v.l2{width:max(0px,calc(var(--S) - 15px - 14px - 1.1rem))}
.ssb .v.r2{width:max(0px,calc(100% - var(--S) - 9px - 2px - 1.1rem));justify-content:flex-end}
.ssb .v>span{white-space:nowrap}
@container (width < 4.8em){.ssb .v .w{display:none}}

/* ===== v2.3: landing patterns (shared with /landing, one copy) ===== */
/* ── the house drawing classes (as on /arcade) ── */
svg .disp{font-family:"Futura PT Cond","Barlow Condensed",Impact,sans-serif;font-style:oblique;font-weight:500;text-transform:uppercase}
svg .mono-b{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700}
svg .mono-m{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500}
svg .lift{text-shadow:none}
svg .lift *{pointer-events:none}
svg .lift .hit{pointer-events:all;cursor:pointer}
svg .lift>g{transition:transform .15s cubic-bezier(.16,1,.3,1)}
svg .lift:hover>g,svg .lift:focus-within>g{transform:translate(-4px,-4px)}
svg .lift:active>g{transform:translate(4px,4px)}
.hit{outline:none}
.hit:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.navitem{cursor:pointer;outline:none}
.navitem:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.navitem:focus-visible{outline:3px solid #FFA800;outline-offset:3px}

/* ── the CTA plate, K.cta, as a real link/button ── */
.ctaplate{display:inline-block;width:calc(var(--w)*1px);height:calc(var(--h)*1px);padding:0;border:0;background:none;cursor:pointer;vertical-align:top}
.ctaplate svg{display:block;width:100%;height:100%;overflow:visible;transition:transform .15s cubic-bezier(.16,1,.3,1)}
.ctaplate:hover svg,.ctaplate:focus-visible svg{transform:translate(-3px,-3px)}
.ctaplate:active svg{transform:translate(3px,3px)}
.ctaplate:focus-visible{outline:3px solid #FFA800;outline-offset:6px}
.ctaplate[aria-busy=true]{opacity:.7;pointer-events:none}

/* ── section head: bracket eyebrow, one-line two-tone headline, outlined number ── */
.shead{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;z-index:0}
.eyb{margin:0;font-family:var(--data);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.h2{margin:14px 0 0;font-size:clamp(44px,5.6vw,84px);line-height:.92;white-space:nowrap;text-shadow:.06em .06em 0 #000}
.h2 em{font-style:inherit;color:var(--orange)}
.bignum{position:absolute;right:-6px;top:-96px;z-index:-1;font-family:var(--shout);font-style:italic;font-weight:800;font-size:280px;line-height:1;color:rgba(239,233,216,.045);-webkit-text-stroke:2px rgba(239,233,216,.13);pointer-events:none;user-select:none}

/* totals + battle card: the cade.market recap card */
/* stat plates: the panel clip in a signal colour, print dots one step darker, ink type */
.recs{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:46px}
.rec{position:relative;filter:drop-shadow(8px 8px 0 #000)}
.rec .rf{position:relative;clip-path:var(--clip-panel);background:var(--b);padding:46px 40px 32px;overflow:hidden}
.rec .rdots{position:absolute;right:26px;top:22px;width:130px;height:90px;pointer-events:none}
.rec .n{position:relative;display:block;font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(60px,6.6vw,100px);line-height:.88;color:#0B0B0B;font-variant-numeric:tabular-nums}
.rec hr{position:relative;border:0;border-top:3px solid #0B0B0B;margin:16px 0 14px}
.rec .k{position:relative;display:block;font-family:var(--data);font-weight:800;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#0B0B0B}
@media (max-width:760px){.recs{grid-template-columns:1fr;gap:22px}}
/* the recap row: ONE row, scrolls sideways, 4 up on desktop, 1.15 up on a phone */
.bgrid{--bn:4;--bg:22px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--bn) - 1)*var(--bg))/var(--bn));gap:var(--bg);margin-top:56px;padding:14px 12px 22px 0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.bgrid::-webkit-scrollbar{display:none}
.bgrid>.bc{scroll-snap-align:start}
.bctl{display:flex;align-items:center;gap:14px;margin-top:6px}
.bctl button{width:52px;height:44px;border:0;padding:0;background:none;cursor:pointer;filter:drop-shadow(4px 4px 0 #000)}
.bctl button span{display:grid;place-items:center;width:100%;height:100%;background:var(--yellow);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}
.bctl button svg{width:16px;height:16px}
.bctl button[disabled]{opacity:.35;cursor:default}
.bctl button:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.bdots{display:flex;gap:6px;margin-left:8px}
.bdots i{width:22px;height:5px;background:#2A2724;transition:background .2s,width .2s}
.bdots i.on{background:var(--orange);width:36px}
@media (max-width:1180px){.bgrid{--bn:2.3}}
@media (max-width:760px){.bgrid{--bn:1.18;--bg:16px;margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px;scroll-padding-left:18px}.bctl button{display:none}.bdots{margin-left:0}}
.bc{position:relative;filter:drop-shadow(7px 7px 0 #000);transition:transform .15s var(--ease)}
.bc:hover{transform:translate(-3px,-3px)}
.bin{clip-path:polygon(0 12px,16% 4px,30% 11px,47% 0,63% 9px,80% 2px,100% 10px,100% calc(100% - 4px),70% 100%,40% calc(100% - 3px),0 100%);background:#161514}
.bart{position:relative;aspect-ratio:1/1;overflow:hidden;background:#000}
.bart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;transition:transform .5s var(--ease)}
.bc:hover .bart img{transform:scale(1.05)}
.bart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.82) 0,rgba(0,0,0,.25) 34%,transparent 52%,rgba(0,0,0,.2) 66%,rgba(0,0,0,.88) 100%)}
.bov{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;padding:24px 18px 16px;background:linear-gradient(to top,rgba(8,8,8,.92) 0,rgba(8,8,8,.7) 20%,rgba(8,8,8,0) 42%),linear-gradient(to bottom,rgba(8,8,8,.55) 0,rgba(8,8,8,0) 30%)}
.bday{margin:0;font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);opacity:.85}
.bov h3{margin:8px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:30px;line-height:.92;text-transform:uppercase;color:var(--paper);-webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000}
.bov h3 em{font-style:inherit;color:var(--orange)}
.bnum{display:flex;gap:18px;margin-top:auto}
.bnum b,.bft b{display:block;font-family:var(--data);font-weight:800;font-size:21px;line-height:1;color:var(--paper);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:2px 2px 0 #000}
.bnum b{-webkit-text-stroke:1px #000;paint-order:stroke fill}
.bnum small,.bft small{display:block;margin-top:5px;font-family:var(--data);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#cfc8b6}
.bft{display:grid;grid-template-columns:1fr 1fr;padding:14px 18px 16px}
.bft small{color:var(--meta)}
.brec{position:absolute;top:-12px;right:14px;z-index:2;background:var(--yellow);color:#0B0B0B;font-family:var(--data);font-weight:800;font-size:11px;letter-spacing:.12em;padding:7px 16px 7px 14px;clip-path:polygon(6% 0,100% 0,94% 50%,100% 100%,6% 100%,0 50%)}

/* ===== DS page only (body.dsdoc): component menu + code view, 2026-10-01 ===== */
.dsdoc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dsdoc main>section,.dsdoc main [id]{scroll-margin-top:28px}
.dsdoc .dsl{display:grid;grid-template-columns:252px minmax(0,1fr);align-items:start}
.dsdoc .dsl>main.wrap{max-width:1232px;width:100%;margin:0;padding:0 40px 0 44px;min-width:0}
/* menu */
.dsdoc .dsnav{position:sticky;top:0;height:100vh;z-index:60;background:var(--page);border-right:1px solid var(--line)}
.dsdoc .dsnav-bar{display:none}
.dsdoc .dsnav-in{height:100%;overflow:auto;padding:22px 14px 48px 22px;scrollbar-width:thin;scrollbar-color:var(--line-hi) transparent;outline:0}
.dsdoc .dsnav-q{display:block;margin:0 0 16px}
.dsdoc .dsnav-q input{width:100%;background:var(--raised);border:0;border-radius:0;box-shadow:inset 0 0 0 1px var(--line-hi);color:var(--paper);font:500 12px var(--data);padding:10px 12px;-webkit-appearance:none;appearance:none}
.dsdoc .dsnav-q input::placeholder{color:var(--meta)}
.dsdoc .dsnav-q input:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.dsdoc .dsnav-tree,.dsdoc .dsnav-tree ol{list-style:none;margin:0;padding:0}
.dsdoc .dsnav .ca{display:flex;align-items:baseline;gap:8px;padding:6px 8px 5px;font-family:var(--call);font-style:oblique;font-weight:500;font-size:17px;line-height:1.05;text-transform:uppercase;color:var(--meta)}
.dsdoc .dsnav .ca b{flex:none;width:18px;font:700 10px var(--data);letter-spacing:.06em;color:var(--orange);font-style:normal}
.dsdoc .dsnav .ca:hover{color:var(--paper)}
.dsdoc .dsnav .c.on>.ca{background:var(--paper);color:var(--ink);box-shadow:3px 4px 0 #3F3F3F}
.dsdoc .dsnav .c.on>.ca b{color:var(--ink)}
.dsdoc .dsnav .c>ol{display:none;margin:6px 0 12px 16px;border-left:1px solid var(--line)}
.dsdoc .dsnav .c.open>ol{display:block}
.dsdoc .dsnav .ia{display:block;margin-left:-1px;padding:5px 8px 5px 12px;border-left:2px solid transparent;font:500 12px/1.35 var(--data);color:var(--meta)}
.dsdoc .dsnav .ia:hover{color:var(--paper)}
.dsdoc .dsnav .ia.on{color:var(--paper);border-left-color:var(--orange);background:var(--raised)}
.dsdoc .dsnav a:focus-visible,.dsdoc .dsnav-bar:focus-visible{outline:3px solid #FFA800;outline-offset:3px;position:relative;z-index:1}
.dsdoc .dsnav-none{font:500 12px var(--data);color:var(--meta);margin:8px}
@media (max-width:1279px){
  .dsdoc main>section,.dsdoc main [id]{scroll-margin-top:76px}
  .dsdoc .dsl{display:block}
  .dsdoc .dsl>main.wrap{max-width:1296px;margin:0 auto;padding:0 32px}
  .dsdoc .dsnav{height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .dsdoc .dsnav-bar{display:flex;align-items:baseline;gap:10px;width:100%;height:52px;padding:0 32px;text-align:left;font-family:var(--call);font-style:oblique;font-weight:500;font-size:19px;text-transform:uppercase;color:var(--paper);line-height:52px;white-space:nowrap;overflow:hidden}
  .dsdoc .dsnav-bar b{font:700 11px var(--data);color:var(--orange);font-style:normal}
  .dsdoc .dsnav-bar .i{min-width:0;overflow:hidden;text-overflow:ellipsis;font:500 12px var(--data);text-transform:none;color:var(--meta);font-style:normal}
  .dsdoc .dsnav-bar .i:not(:empty)::before{content:"/ ";color:var(--line-hi)}
  .dsdoc .dsnav-bar>i{margin-left:auto;flex:none;align-self:center;width:12px;height:12px;border-right:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:translateY(-3px) rotate(45deg);transition:transform var(--t-fast)}
  .dsdoc .dsnav.open .dsnav-bar>i{transform:translateY(3px) rotate(225deg)}
  .dsdoc .dsnav-in{display:none;position:absolute;left:0;right:0;top:100%;height:auto;max-height:calc(100vh - 52px);padding:16px 32px 28px;background:var(--page);border-bottom:1px solid var(--line);box-shadow:0 8px 0 #000}
  .dsdoc .dsnav.open .dsnav-in{display:block}
}
@media (max-width:900px){.dsdoc .dsl>main.wrap{padding:0 16px}.dsdoc .dsnav-bar,.dsdoc .dsnav-in{padding-left:16px;padding-right:16px}}
/* code view: one small button per specimen, a dark mono panel under it */
.dsdoc .cv-btn{display:inline-flex;align-items:center;gap:6px;flex:none;width:max-content;padding:5px 8px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-hi);font:700 10.5px/1 var(--data);letter-spacing:.06em;text-transform:uppercase;color:var(--meta);font-style:normal;vertical-align:middle;transition:transform var(--t-fast) cubic-bezier(0,0,.2,1),box-shadow var(--t-fast) cubic-bezier(0,0,.2,1)}
.dsdoc .cv-btn span{color:var(--orange)}
.dsdoc .cv-btn:hover{color:var(--paper);transform:translate(-2px,-2px);box-shadow:inset 0 0 0 1px var(--line-hi),3px 3px 0 #000}
.dsdoc .cv-btn[aria-expanded=true]{background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 #000}
.dsdoc .cv-btn[aria-expanded=true] span{color:var(--ink)}
.dsdoc .cv-btn:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.dsdoc .gl .cv-btn{display:flex;margin-top:12px}
.dsdoc .label .cv-btn,.dsdoc figcaption .cv-btn{margin-left:10px;letter-spacing:.06em}
.dsdoc .cv-abs{position:absolute;top:6px;right:6px;z-index:2}
.dsdoc .cv{grid-column:1/-1;width:100%;min-width:0;margin:22px 0 6px;background:#0B0B0B;box-shadow:inset 0 0 0 1px var(--line),6px 6px 0 #000;font-family:var(--data)}
.dsdoc .cv[hidden]{display:none}
.dsdoc .cv-bar{display:flex;align-items:center;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);min-height:42px}
.dsdoc .cv-name{flex:1 1 auto;min-width:0;padding:0 16px;font:700 11px var(--data);letter-spacing:.12em;text-transform:uppercase;color:var(--orange);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsdoc .cv-tabs{display:flex}
.dsdoc .cv-tabs button,.dsdoc .cv-copy{height:42px;padding:0 14px;font:700 11px var(--data);letter-spacing:.08em;text-transform:uppercase;color:var(--meta);border-left:1px solid var(--line)}
.dsdoc .cv-tabs button:hover,.dsdoc .cv-copy:hover{color:var(--paper)}
.dsdoc .cv-tabs button[aria-selected=true]{background:var(--paper);color:var(--ink)}
.dsdoc .cv-copy{background:var(--yellow);color:var(--ink)}
.dsdoc .cv-copy:hover{color:var(--ink);background:#fff}
.dsdoc .cv-tabs button:focus-visible,.dsdoc .cv-copy:focus-visible,.dsdoc .cv-code:focus-visible{outline:3px solid #FFA800;outline-offset:-3px}
.dsdoc .cv-code{margin:0;max-height:440px;overflow:auto;padding:16px 18px;font:500 12px/1.65 var(--data);color:var(--paper);white-space:pre;tab-size:2;scrollbar-width:thin;scrollbar-color:var(--line-hi) transparent}
.dsdoc .cv-code i{font-style:normal}
.dsdoc .cv-code .k-c{color:var(--meta)}
.dsdoc .cv-code .k-s{color:var(--orange)}
.dsdoc .cv-code .k-a{color:var(--yellow)}
.dsdoc .cv-code .k-p{color:#CBA6FF}
.dsdoc .cv-note{margin:0;padding:10px 18px 12px;border-top:1px solid var(--line);font:500 11px var(--data);color:var(--meta)}
@media (max-width:600px){.dsdoc .cv-name{flex-basis:100%;padding:10px 14px 4px}.dsdoc .cv-bar{border-bottom:1px solid var(--line)}.dsdoc .cv-tabs button,.dsdoc .cv-copy{padding:0 11px}.dsdoc .cv-copy{margin-left:auto}}
.dsdoc .cv-note a{color:var(--orange)}.dsdoc .cv-note a:hover{color:var(--paper)}.dsdoc .cv-note a:focus-visible{outline:3px solid #FFA800;outline-offset:2px}
@container (max-width:1100px){.dsdoc .prows{grid-template-columns:minmax(0,640px)}}

/* ===== Data, badges, tabs, cards: ported 1:1 from their source (audit 2026-10-01) ===== */
/* Status badge, ported 1:1 from frontend-v1 components/design-system/badges/StatusBadge.tsx:
   fixed 198x73 box, viewBox 0 0 203 76 stretched, shadow path drawn 11px down-right (separate path, no stroke),
   face path stroked 2px black, label = dsPlateLabelClassName (display 800 italic caps, leading-none, tracking .01em) at 26px, px-5.
   Light text (Live only) is paper-white #F0EAD9 with a 1.5px black double-print. Long labels wrap inside the fixed box, as theirs. */
.notch{position:relative;display:inline-flex;align-items:center;justify-content:center;width:198px;height:73px;padding:0 20px;
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:26px;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:#0B0B0B}
.notch>svg{position:absolute;inset:0;width:100%;height:100%}
.notch>b{position:relative;font:inherit}
.notch.dp{color:#F0EAD9;text-shadow:1.5px 1.5px 0 #000}
/* Lozenge + wide LIVE tags, ported 1:1 from frontend-v1 components/design-system/badges/LiveTag.tsx.
   .livelz = MarketLiveTag: their plate art design-system/badges/market-livetag.svg (bead drawn in the art) at 173x111 stretched,
   label display 800 italic caps 46px, tracking .01em, paper #F0EAD9, pl 52px, comic double-print = a black copy offset (3px,3px) UNDER the word.
   .notch.wide = LiveTagWide: 251x77 notched chip (StatusBadge paths), 34px, tracking .04em, gap 12px, a 16px PAPER dot with no ring and no blink. */
.livelz{position:relative;display:inline-flex;align-items:center;width:173px;height:111px;padding:0 0 0 52px;background:url(/ds/assets/ds/badges/market-livetag.svg) 0 0/100% 100% no-repeat;box-shadow:none;
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:46px;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:#F0EAD9}
.livelz>span{position:relative}
.livelz>span>span:first-child{position:absolute;left:3px;top:3px;color:#000}
.livelz>span>span:last-child{position:relative}
.livelz>i{display:none}
.notch.wide{width:251px;height:77px;min-width:0;padding:0;gap:12px;font-size:34px;letter-spacing:.04em}
.notch.wide>b{font-size:34px;letter-spacing:.04em;line-height:1}
.notch.wide>i{position:relative;width:16px;height:16px;border-radius:50%;background:#F0EAD9;box-shadow:none;animation:none}
/* Delta chip, ported 1:1 from frontend-v1 components/market/ArcadeMarketBaseline.tsx (the <p data-direction> under the market-cap headline).
   Solid outcome face, 2px black border, the 5px chamfer clip from that file, display 900 italic caps (SHOUT = Barlow 800 italic per the owner's type call).
   Copy is "ABOVE" / "BELOW", never "above the line" (Scott, 2026-09-08). */
.delta{display:inline-flex;align-items:center;gap:6px;border:2px solid #000;padding:5px 10px;
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:clamp(13px,1.08vw,17px);line-height:1;text-transform:uppercase;
  color:#000;background:#91BB4F;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.delta.dn{background:#EA2A46;color:#F0EAD9}
/* PAYS chip, ported 1:1 from frontend-v1 components/market/QuickPredictControls.tsx (QuickPredictEconomics) + QuickPredictControls.module.css
   .paysChip / .paysChipFace, clips DS_PAYS_CLIP_HIGHER / _LOWER from components/market/quick-predict-presentation.ts.
   As shipped on the battle page and the market trade band: NO plate and no outline, just the mono multiplier in the side colour
   (lime #91BB4F higher, pink #FF8A9E lower); the clip is kept so the chip keeps its silhouette for hit-testing and the shadow hook. */
.pays{position:relative;display:inline-block;min-width:0;max-width:100%;color:#91BB4F}
.pays[data-side=lower]{color:#FF8A9E}
.pays>span{position:relative;display:inline-block;background:transparent;font-family:var(--data);font-weight:700;font-size:14.4px;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;white-space:nowrap;box-sizing:border-box;max-width:100%;padding:.5em 1.3em .5em 1.9em;
  clip-path:polygon(9px 100%,5px 62%,20px 45%,5px 28%,10px 2px,calc(100% - 8px) 0%,calc(100% - 2px) 42%,calc(100% - 9px) calc(100% - 2px))}
.pays[data-side=lower]>span{padding:.5em 1.9em .5em 1.3em;
  clip-path:polygon(calc(100% - 9px) 100%,calc(100% - 5px) 62%,calc(100% - 20px) 45%,calc(100% - 5px) 28%,calc(100% - 10px) 2px,8px 0%,2px 42%,9px calc(100% - 2px))}
@media (max-width:1079px){.pays>span{font-size:11.5px;letter-spacing:.05em;padding:.45em .9em .45em 1.35em}.pays[data-side=lower]>span{padding:.45em 1.35em .45em .9em}}
/* the IF <SIDE> WINS readout that sits beside it in QuickPredictEconomics */
.qpayout{display:inline-flex;flex-direction:column;align-items:flex-end;gap:4px}
.qpayout .k{font-family:var(--data);font-weight:700;font-size:9.6px;letter-spacing:.12em;text-transform:uppercase;color:#A1A1A1}
.qpayout .v{font-family:var(--shout);font-style:italic;font-weight:800;font-size:24.8px;line-height:1;font-variant-numeric:tabular-nums;color:#FAF424}
/* Market row, ported 1:1 from frontend-v1
   Note: Tailwind "white" in frontend-v1 is paper-white rgb(240 234 217) = #F0EAD9, so every text-white below is #F0EAD9.
   components/design-system/market/MarketRow.tsx (grid 596 wide: 104px 1fr 168px 168px, gap 22px)
   + chips/BattleDurationChip.tsx (104x42, viewBox 0 0 112 50) + buttons/SlatButton.tsx (sm 168x52, viewBox 0 0 260 84) */
.mrows{display:flex;flex-direction:column;gap:16px}
.mrow{display:grid;grid-template-columns:104px 1fr 168px 168px;gap:22px;align-items:center;width:596px}
.mrow .vol{font-family:var(--data);font-weight:700;font-size:25px;font-variant-numeric:tabular-nums;color:#F0EAD9}
/* DurationChip: ink face, seed-tone outline (orange #FFA800 / violet #BBA8FF), mono [MM:SS] */
.dchip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:104px;height:42px;color:#FFA800;font-family:var(--data);font-weight:600;font-size:18px;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.dchip[data-tone=violet]{color:#BBA8FF}
.dchip>svg{position:absolute;inset:0;width:100%;height:100%}
.dchip>span{position:relative}
/* SlatButton sm: lime #91BB4F / red #EA2A46 face, black slat drawn under, white label with 1.5px black double-print */
.slatb{position:relative;display:inline-flex;align-items:center;justify-content:center;width:168px;height:52px;border:0;padding:0;background:transparent;cursor:pointer;
  font-family:var(--call);font-style:normal;font-weight:500;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:#F0EAD9;text-shadow:1.5px 1.5px 0 #000;
  --press:4px;transition:transform .16s cubic-bezier(.16,1,.3,1)}
.slatb>svg{position:absolute;inset:0;width:100%;height:100%}
.slatb>span{position:relative;padding-left:24px}
.slatb:hover{transform:translate(calc(var(--press) * -1),calc(var(--press) * -1))}
.slatb:active{transform:translate(var(--press),var(--press))}
.slatb:focus-visible{outline:3px solid #FFA800;outline-offset:2px}
.slatb:disabled{filter:grayscale(1);opacity:.45;cursor:not-allowed;transform:none}
/* Activity row (desktop, md and up), ported 1:1 from frontend-v1 app/activity/components/ActivityArcadeRow.tsx
   (PredictionActivityArcadeRow, SettledActivityArcadeRow, MarketLifecycleActivityArcadeRow) + activityArcadeGeometry.ts.
   The plate is THEIR art, one SVG per variant: public/assets/activity/rows/{prediction,created,settled-yes,settled-no}-row.svg
   (copy them to site/ds/assets/ds/activity/). Board is 1669 wide, row aspect 1669/112; every slot below is their absolute px.
   Text: ActivityFitText = display, italic, caps, leading .86, nowrap, centred, size = clamp(min, floor(max*maxChars/len), max) (sizes precomputed inline).
   font-display resolves to "Futura PT Cond" in their globals.css, the only cut is Medium, so every slot is CALL (Futura PT Cond Medium oblique), no synthetic bold.
   The slot widths were sized for that face: in Barlow 800 the 58px CREATED overflows its 144px status slot. Tailwind white = #F0EAD9.
   Scale the whole row for a column with .actrow-fit{zoom:k}. */
.actrow-fit{zoom:var(--k,.5)}
.actrows{display:flex;flex-direction:column;gap:14px}
.actrow{position:relative;width:1669px;aspect-ratio:1669/112;cursor:pointer;transition:transform 50ms linear,filter 50ms linear}
.actrow:hover{transform:translateY(-9px);filter:brightness(1.08)}
.actrow:active{transform:scale(.995)}
.actrow:focus-visible{outline:2px solid #FFA800;outline-offset:2px}
.actrow>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none;user-select:none}
.actrow .s{position:absolute;z-index:10;display:flex;align-items:center;justify-content:center;pointer-events:none}
.actrow .fit{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-align:center;text-transform:uppercase;line-height:.86;letter-spacing:0;
  font-family:var(--call);font-style:oblique;font-weight:500;color:#000}
.actrow .fit.med{font-family:var(--call);font-style:oblique;font-weight:500}
/* the white comic numerals: stroke under fill, hard drop */
.actrow .fit.ink{color:#F0EAD9;paint-order:stroke fill;-webkit-text-stroke:1.5px #000;filter:drop-shadow(4px 5px 0 #000)}
.actrow .fit.ink14{-webkit-text-stroke-width:1.4px}
.actrow .fit.amt{paint-order:stroke fill;-webkit-text-stroke:1px #000;filter:drop-shadow(3px 4px 0 #000)}
.actrow .fit.amt.yes{color:#91BB4F}.actrow .fit.amt.no{color:#EA2A46}
/* slots (ActivityTypeBadge / prediction status, ActivityAccountSlot, ActivityMarketSlot, ActivityTimeSlot) */
.actrow .s-type{left:20px;top:21px;width:206px;height:67px}
.actrow[data-variant=prediction] .s-type{top:23px}
.actrow .s-acct{left:258px;top:32px;width:270px;height:50px}
.actrow .s-q{left:592px;top:32px;width:616px;height:50px}
.actrow .s-time{top:31px;height:50px;flex-direction:column;left:1530px;width:112px}
.actrow .s-time.wide{left:1492px;width:148px}
/* prediction: YES -> $amount */
.actrow .s-pick{left:1302px;top:24px;width:222px;height:66px;gap:7px}
.actrow .s-pick .side{display:flex;align-items:center;justify-content:center;width:76px;height:100%}
.actrow .s-pick svg{display:block;flex-shrink:0;width:46px;height:30px;color:#000}
.actrow .s-pick .amt-slot{display:flex;flex:1;min-width:0;height:100%;align-items:center;justify-content:center}
/* settled: WINNING SIDE + YES/NO */
.actrow .s-ws{left:1284px;top:34px;width:92px;height:48px;text-align:center}
.actrow .s-ws span{font-family:var(--call);font-style:oblique;font-weight:500;font-size:27px;line-height:.78;text-transform:uppercase;color:#F0EAD9}
.actrow .s-wside{left:1413px;top:24px;width:76px;height:62px}
/* lifecycle: CREATED / LIVE / RESOLVING + CLICK / OPEN */
.actrow .s-status{top:24px;height:66px;left:1330px;width:144px}
.actrow[data-variant=closed] .s-status{left:1302px;width:224px}
.actrow .s-sec{left:1475px;top:54px;width:50px;height:24px}
/* Round clock, ported 1:1 from frontend-v1 components/market/duel-frame/duel-frame-kit.tsx DuelRoundClock + duel-frame.module.css
   .roundClock / .roundClockShadow / .roundClockFace / .roundClockValue / .roundClockCaption, clip DS_PLATE_CLIP from
   components/market/quick-predict-presentation.ts (NOT a hand-drawn hexagon). Shadow is a second clipped black plate moved (7px, 8px). */
.rclk{position:relative;display:inline-block;min-width:0;max-width:100%;flex:0 1 auto;filter:none}
.rclk .rsh{position:absolute;inset:0;transform:translate(7px,8px);background:#000;pointer-events:none}
.rclk .rsh,.rclk .rface{clip-path:polygon(14px 4%,calc(100% - 20px) 0%,calc(100% - 6px) 30%,calc(100% - 13px) 52%,calc(100% - 3px) 74%,calc(100% - 11px) 100%,13px 100%,17px 64%,5px 42%,16px 26%)}
.rclk .rface{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:15.6px clamp(28px,8vw,40px) 18.2px;background:#FAF424;color:#141414;text-align:center}
.rclk .rv{margin:0;min-width:0;max-width:100%;overflow-wrap:anywhere;font-family:var(--data);font-size:clamp(24px,7.2vw,28px);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1.1;text-transform:uppercase;color:#141414}
.rclk .rcap{position:absolute;left:0;right:0;top:calc(100% + 12px);margin:0;font-family:var(--data);font-size:11px;font-weight:800;letter-spacing:.14em;line-height:1;text-align:center;text-transform:uppercase;color:#FAF424;white-space:nowrap}
/* Countdown states, ported 1:1 from frontend-v1 components/market/CountdownTimer.tsx (MarketCountdownDisplayView).
   running: arcade-green #91BB4F face, 1px border at 45%; warning (final minute) #FF5A1F; critical (final seconds) #FF2E00;
   closed / unavailable: ui-surface #141414, 1px #343434 border, cream #F0EAD9 value, tertiary #8A8A94 detail;
   delayed: yellow #FAF424, 3px black border, 4px hard shadow, display 800 italic caps 30px, NO min-height.
   No 8px ink ring and no inset outline (ours had both). Value: mono 900 at 36 / 48 (sm) / 44 (lg). */
.cdt{gap:0;min-width:0;box-shadow:none;outline:0;display:flex;flex-direction:column;justify-content:center;min-height:116px;width:100%;max-width:440px;padding:16px 20px;border:1px solid;font-family:var(--data);color:#0B0B0B}
.cdt .k{font-family:var(--data);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.cdt .v{margin-top:8px;font-family:var(--data);font-size:36px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
@media (min-width:640px){.cdt:not(.done) .v{font-size:48px}}@media (min-width:1024px){.cdt:not(.done) .v{font-size:44px}}
.cdt.run{background:#91BB4F;border-color:rgb(145 187 79 / .45)}
.cdt.fin{background:#FF5A1F;border-color:rgb(255 90 31 / .55)}
.cdt.crit{background:#FF2E00;border-color:rgb(255 46 0 / .6)}
.cdt.done{outline:0;background:#141414;border-color:#343434;color:#F0EAD9}
.cdt.done .v{margin-top:0;font-size:36px;text-transform:uppercase}
.cdt.done .k{margin-top:8px;font-weight:600;letter-spacing:.12em;color:#8A8A94;opacity:1}
.cdt.late{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;outline:0;padding:20px 24px;border:3px solid #000;background:#FAF424;box-shadow:4px 4px 0 #000;text-align:left}
.cdt.late .v{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:30px;line-height:1.25;text-transform:uppercase}
/* Sports tab, ported 1:1 from frontend-v1 components/design-system/navigation/SportsTab.tsx on lib/Plate.tsx PlateButton:
   their plate art design-system/navigation/nav-sportstab.svg (face + drawn shadow, 133x50, stretched), press 3px (hover lifts, active drops),
   gap 6px, px 12px, display 800 italic caps 21px tracking .01em, ink #0B0B0B; live bead 9.6px #EA2A46; count mono 700 14px upright.
   No opacity dimming for the unselected state (theirs has none; state is carried by aria-current / data-state). */
.ntab{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:133px;height:50px;padding:0 12px;border:0;margin:0;
  background:url(/ds/assets/ds/navigation/nav-sportstab.svg) 50% 50%/100% 100% no-repeat;box-shadow:none;opacity:1;cursor:pointer;
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:21px;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:#0B0B0B;
  --press:3px;transition:transform .16s cubic-bezier(.16,1,.3,1)}
.ntab.on{opacity:1}
.ntab:hover{transform:translate(calc(var(--press) * -1),calc(var(--press) * -1))}
.ntab:active{transform:translate(var(--press),var(--press))}
.ntab:focus-visible{outline:3px solid #FFA800;outline-offset:2px}
.ntab>i{position:relative;display:inline-block;width:9.6px;height:9.6px;flex-shrink:0;border-radius:50%;background:#EA2A46;animation:none}
.ntab>span{position:relative}
.ntab>b{position:relative;font-family:var(--data);font-style:normal;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:0}
/* Quick-predict SUCCESS TICKET (story meme-madness-battle-quick-predict-modal--success-ticket), ported 1:1 by DOM + module CSS:
   BattleQuickPredictModal.tsx (qpm-*), MemeMadnessPnlCard.tsx (pnl-*), MemeMadnessPnlShare.tsx (pshare-*), QuickPredictControls.tsx (qp-*),
   components/ui/ResponsiveSheet.tsx (sheet-*). DS-only: .ticket-spec carries the overlay's --rs-* tokens so the dialog renders in flow (no fixed overlay, no scrim).
   The pnl-* block is the same as pnl-card.css; ship it once. Art: assets/pnl/{bg-accents,rays,halftone-fade1}.svg (public/meme-madness/figma/battle-r2/), cade-wordmark.svg, pfp/ansem.jpg. */
.ticket-spec{--rs-ease-emph:cubic-bezier(.16,1,.3,1);--rs-ease-out:cubic-bezier(0,0,.2,1);--rs-ink:#0B0B0B;--rs-surface:#141414;--rs-sheet-ink:#000;--rs-cream:#EFE9D8;--rs-muted:#A1A1A1;--rs-yellow:#FAF424;--rs-display:var(--shout);--rs-width:520px;display:block;width:520px}
.ticket-spec .sheet-dialog{animation:none}
.ticket-spec .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
/* ===== sheet-* : ported 1:1 from frontend-v1 app/components/ui/ResponsiveSheet.module.css */
/* ResponsiveSheet, the shared modal pattern.
 *
 * `data-mode="dialog"`  → centered dialog over a dimmed, desaturating scrim
 *                         (the overlay treatment BattleQuickPredictModal and
 *                         login/AuthPage already ship).
 * `data-mode="sheet"`   → bottom-anchored half sheet: full width, torn comic
 *                         top edge, grabber, 90svh cap with the body scrolling
 *                         inside, clear of the home-indicator inset.
 *
 * The mode attribute is set from JS (matchMedia at 768px) rather than a media
 * query so callers can flip their own chrome in the same tick, see
 * `useResponsiveSheetMode`. */

.sheet-overlay {
  --rs-ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
  --rs-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --rs-ink: #0B0B0B;
  --rs-surface: #141414;
  /* The sheet's own paint: the torn top fringe left by the clip-path, the strip
   * the grabber sits in, and any gap around a bare caller's panel. Separate
   * from `--rs-surface` because those are two different things, the ink is the
   * comic outline AROUND the sheet, the surface is the sheet's body, and a
   * caller that grounds its body somewhere other than #141414 has to be able to
   * bring the fringe with it or the two read as a seam. Default unchanged. */
  --rs-sheet-ink: #000;
  --rs-cream: #EFE9D8;
  --rs-muted: #A1A1A1;
  --rs-yellow: #FAF424;
  --rs-display: var(--shout);
  /* Overridable by callers that need to sit in an existing stacking order. */
  --rs-z: 200;
  --rs-scrim: rgb(0 0 0 / 0.58);
  --rs-blur: blur(14px) saturate(0.72);
  --rs-width: 520px;

  position: fixed;
  inset: 0;
  z-index: var(--rs-z);
  display: flex;
  justify-content: center;
}

.sheet-overlay[data-mode="dialog"] {
  align-items: center;
  padding: 1rem;
  overflow-y: auto;
}

.sheet-overlay[data-mode="sheet"] {
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: var(--rs-scrim);
  backdrop-filter: var(--rs-blur);
  -webkit-backdrop-filter: var(--rs-blur);
  cursor: pointer;
  animation: rsFadeIn 180ms var(--rs-ease-out);
}

.sheet-overlay[data-state="closing"] .sheet-backdrop {
  animation: rsFadeOut 200ms var(--rs-ease-out) forwards;
}

/* ------------------------------------------------------------------ dialog */

.sheet-dialog {
  position: relative;
  outline: none;
  color: var(--rs-cream);
}

/* On the way out the dialog is a farewell, not a control surface, no second
 * confirm on a sheet that is already sliding away. The backdrop keeps taking
 * pointer events so nothing lands on the page behind it either. */
.sheet-overlay[data-state="closing"] .sheet-dialog {
  pointer-events: none;
}

.sheet-dialog[data-mode="dialog"] {
  width: min(100%, var(--rs-width));
  animation: rsDialogIn 220ms var(--rs-ease-emph);
}

.sheet-dialog[data-mode="dialog"][data-size="sm"] {
  --rs-width: 400px;
}

.sheet-dialog[data-mode="dialog"][data-size="lg"] {
  --rs-width: 680px;
}

.sheet-dialog[data-mode="dialog"][data-size="auto"] {
  width: auto;
  max-width: 100%;
}

.sheet-dialog[data-mode="dialog"][data-state="closing"] {
  animation: rsDialogOut 200ms var(--rs-ease-out) forwards;
}

/*
 * A SHEET THAT IS THE WHOLE TASK TAKES THE WHOLE VIEWPORT.
 *
 * `data-full` opts one caller out of the 95svh cap. The cap's job is to leave a
 * strip of backdrop so the sheet reads as dismissible, and that is right for a
 * menu; quick predict is a question, a side, a stake and a commit, and the strip
 * only buys a scroll. The torn top edge and the grabber both stay, so it still
 * reads and drags as a sheet rather than a page.
 */
.sheet-dialog[data-mode="sheet"][data-full] {
  max-height: 100vh;
  max-height: 100svh;
  height: 100svh;
}

/* -------------------------------------------------------------- half sheet */

.sheet-dialog[data-mode="sheet"] {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  /*
   * NINETY, NOT EIGHTY-FIVE.
   *
   * The cap exists so a sheet never covers the page whole, the strip of
   * backdrop above it is what makes it read as a sheet you can dismiss rather
   * than a new screen. 85svh left the quick-predict body scrolling on a normal
   * phone even though its content very nearly fitted, which puts a scrollbar
   * between a reader and the PREDICT button for the sake of a few pixels.
   * Ninety-five still leaves the grabber and a strip of backdrop above it, and
   * buys the quick-predict body the last rows it was scrolling for. Taller
   * content still scrolls, see `.body`. Height alone was not enough: the
   * amount chips and the invalid-amount plate were the two tallest things in
   * that sheet and both have been cut down as well.
   */
  max-height: 95vh;
  max-height: 95svh;
  /* The ink layer: the torn top strip and any gap around a bare caller's own
   * panel read as the comic outline. */
  background: var(--rs-sheet-ink);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Torn-paper top edge, R2 comic language (the dsPanel silhouette family). */
  clip-path: polygon(
    0 10px,
    5% 2px,
    11% 11px,
    18% 3px,
    26% 12px,
    34% 4px,
    42% 12px,
    50% 2px,
    58% 11px,
    66% 3px,
    74% 12px,
    82% 4px,
    90% 11px,
    96% 2px,
    100% 9px,
    100% 100%,
    0 100%
  );
  animation: rsSheetIn 260ms var(--rs-ease-emph);
  transition: transform 220ms var(--rs-ease-emph);
  touch-action: pan-y;
}

.sheet-dialog[data-mode="sheet"][data-state="closing"] {
  animation: rsSheetOut 220ms var(--rs-ease-out) forwards;
}

/* While a finger is on the grabber the sheet tracks it 1:1, no easing. */
.sheet-dialog[data-dragging] {
  animation: none;
  transition: none;
  cursor: grabbing;
}

/* --------------------------------------------------------------- the grip */

.sheet-grip {
  display: none;
}

.sheet-dialog[data-mode="sheet"] .sheet-grip {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 0 0.5rem;
  cursor: grab;
  /* The grabber owns vertical gestures; the body below keeps its own scroll. */
  touch-action: none;
}

.sheet-handle {
  width: 52px;
  height: 5px;
  border-radius: 999px;
  background: var(--rs-cream);
  opacity: 0.6;
}

/* ------------------------------------------------------------------ body */

.sheet-content {
  min-width: 0;
}

.sheet-dialog[data-mode="sheet"] .sheet-content {
  min-height: 0;
  flex: 1 1 auto;
  /* A column, so a caller that asks to fill the sheet (see `min-h-full` on
   * quick predict's panel) has a box with a definite height to fill. Without
   * it, a full-height sheet with short content left the ink showing below the
   * caller's own panel. */
  display: flex;
  flex-direction: column;
  /*
   * A GAP UNDER THE LAST CONTROL, ON TOP OF THE DEVICE INSET.
   *
   * The dialog already carries `env(safe-area-inset-bottom)`, which is the
   * phone's claim on the screen, a home indicator, a gesture bar, and it is
   * zero on plenty of devices. It is not breathing room, and with a caller
   * whose last element is its primary button (quick predict's PREDICT, the
   * auth sheet's continue) that button ended flush against the sheet's edge:
   * nothing between the tap target and whatever the OS draws below it.
   *
   * 14px of content padding is the gap; the inset is the device's. They add
   * rather than substitute, because they are answers to different questions.
   */
  padding-bottom: 14px;
  overflow-y: auto;
  /* The hard comic offset shadows inside callers would otherwise open a
   * horizontal scrollbar on a 390px sheet. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sheet-footerSlot {
  flex: none;
}

.sheet-dialog[data-mode="sheet"] .sheet-footerSlot {
  border-top: 2px solid #000;
  background: var(--rs-surface);
}

/* --------------------------------------------------- "panel" chrome variant
 * The shared surface for modals that have no bespoke skin of their own. Bare
 * callers keep painting their own panel and none of this applies. */

.sheet-panel[data-mode="dialog"] {
  background: var(--rs-surface);
  border: 3px solid #000;
  box-shadow: 10px 10px 0 var(--rs-ink);
}

.sheet-panel[data-mode="sheet"] .sheet-content {
  background: var(--rs-surface);
}

.sheet-panelHeader {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 3px solid #000;
  background: var(--rs-yellow);
  color: #000;
}

.sheet-panelTitle {
  min-width: 0;
  font-family: var(--rs-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 0.95;
  color: #000;
}

.sheet-panelClose {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid #000;
  background: var(--rs-cream);
  color: #000;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
  transition: transform 140ms var(--rs-ease-out), box-shadow 140ms var(--rs-ease-out);
}

.sheet-panelClose svg {
  width: 14px;
  height: 14px;
}

.sheet-panelClose:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #000;
}

.sheet-panelClose:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

.sheet-panel .sheet-content {
  padding: 1.25rem;
}

/* --------------------------------------------------------------- keyframes */

@keyframes rsFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rsFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes rsDialogIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes rsDialogOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}

@keyframes rsSheetIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes rsSheetOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

/* No slide, no fade, the dialog is simply there, then simply gone. */
@media (prefers-reduced-motion: reduce) {
  .sheet-backdrop,
  .sheet-dialog,
  .sheet-overlay[data-state="closing"] .sheet-backdrop,
  .sheet-dialog[data-state="closing"] {
    animation: none;
  }

  .sheet-dialog,
  .sheet-panelClose {
    transition: none;
  }
}

/* ===== pshare-* : ported 1:1 from frontend-v1 app/meme-madness/components/MemeMadnessPnlShare.module.css */
/* MemeMadnessPnlShare, the card with its ways out of the app underneath.
 * The action row borrows the card modal's plate-button skin so the whole
 * block reads as one object. */

.pshare-frame,
.pshare-modalActions,
.pshare-modalContent {
  --mm-ink: #0B0B0B;
  --mm-yellow: #FAF424;
  --mm-orange: #FFA800;
  --mm-lime: #91BB4F;
  --mm-cream: #EFE9D8;
  --mm-muted: #A1A1A1;
}

.pshare-frame {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.pshare-card {
  flex: none;
}

.pshare-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

@media (max-width: 479px) {
  .pshare-primary {
    grid-column: 1 / -1;
  }
}

@media (min-width: 480px) {
  .pshare-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pshare-actions.pshare-cardActions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pshare-actions.pshare-cardActions .pshare-primary {
  grid-column: auto;
}

.pshare-actions.pshare-cardActions .pshare-action:disabled {
  cursor: not-allowed;
}

.pshare-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 2.75rem;
  font-family: var(--shout);
  font-style: italic;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-align: center;
  color: var(--mm-yellow);
  background: var(--mm-ink);
  border: 2px solid var(--mm-yellow);
  padding: 0.45em 0.9em;
  transform: skewX(-6deg);
  box-shadow: 4px 4px 0 rgb(0 0 0 / 0.6);
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
}

.pshare-action:hover {
  transform: skewX(-6deg) translate(-1px, -1px);
}

.pshare-action:focus-visible {
  outline: 3px solid var(--mm-orange);
  outline-offset: 3px;
}

.pshare-action:disabled {
  cursor: progress;
  opacity: 0.7;
  transform: skewX(-6deg);
}

/* Post on X is the row's primary action: it is the one that reaches people. */
.pshare-primary {
  color: var(--mm-ink);
  background: var(--mm-yellow);
  border-color: var(--mm-ink);
}

/* A completed action says so in the plate itself, lime, the card's win tone. */
.pshare-action[data-done="true"] {
  color: var(--mm-ink);
  background: var(--mm-lime);
  border-color: var(--mm-ink);
}

.pshare-error {
  margin: 0;
  font-family: var(--data);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mm-yellow);
}

/* ------------------------------------------------------------- modal
 * Positioning, motion and dialog behaviour come from `ResponsiveSheet`. What
 * stays here is this modal's own skin: its stacking slot, its scrim weight,
 * and the CLOSE slat above the block. */

.pshare-modalOverlay {
  --rs-z: 60;
  --rs-scrim: rgb(4 4 4 / 0.78);
  --rs-blur: blur(10px) saturate(0.8);
}

.pshare-modalDialog[data-mode="dialog"] {
  --rs-width: 560px;
}

.pshare-modalContent {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.pshare-modalDialog[data-mode="sheet"] .pshare-modalContent {
  gap: 0.7rem;
  padding: 0.15rem 0.85rem 1rem;
}

.pshare-modalActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* The picker: PNL CARD | REPLAY. Two plates in the action skin, the chosen one
 * lit yellow like the primary action, so "which thing am I sharing" reads
 * before the thing itself. Takes the slat's free width; CLOSE keeps the end. */
.pshare-picker {
  display: flex;
  flex: 1;
  gap: 0.5rem;
  min-width: 0;
}

.pshare-pickerOption {
  flex: 1;
  min-height: 2.5rem;
  font-family: var(--shout);
  font-style: italic;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--mm-yellow);
  background: var(--mm-ink);
  border: 2px solid var(--mm-yellow);
  padding: 0.4em 0.8em;
  transform: skewX(-6deg);
  box-shadow: 4px 4px 0 rgb(0 0 0 / 0.6);
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
}

.pshare-pickerOption:hover {
  transform: skewX(-6deg) translate(-1px, -1px);
}

.pshare-pickerOption:focus-visible {
  outline: 3px solid var(--mm-orange);
  outline-offset: 3px;
}

/* An open bet's REPLAY waits: drawn, so the option is known, but not live. */
.pshare-pickerOption:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: skewX(-6deg);
}

.pshare-pickerOption[aria-selected="true"],
.pshare-pickerOption[aria-pressed="true"] {
  color: var(--mm-ink);
  background: var(--mm-yellow);
  border-color: var(--mm-ink);
  cursor: default;
}

.pshare-srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pshare-closeButton {
  align-self: flex-end;
  font-family: var(--shout);
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--mm-yellow);
  background: var(--mm-ink);
  border: 2px solid var(--mm-yellow);
  padding: 0.45em 1.2em;
  transform: skewX(-6deg);
  box-shadow: 4px 4px 0 rgb(0 0 0 / 0.6);
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
}

.pshare-closeButton:hover {
  transform: skewX(-6deg) translate(-1px, -1px);
}

.pshare-closeButton:focus-visible {
  outline: 3px solid var(--mm-orange);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pshare-action,
  .pshare-closeButton,
  .pshare-pickerOption {
    transition: none;
  }
}

/* ===== pnl-* : ported 1:1 from frontend-v1 app/meme-madness/components/MemeMadnessPnlCard.module.css */
/* MemeMadnessPnlCard, the tournament-wide PNL share card.
 *
 * Descends from the battle page's UpDownPositionShareCard (770:838 share
 * aspect, layered CSS/SVG background, no raster) with the share-image cleanup
 * from #901 applied: no LIVE chip, no settlement countdown, no bet-line hint,
 * no spark bursts, no zigzag price line. What remains of the background is
 * the dark ground, the coin's accent field, the comic rays inside it, and one
 * halftone cluster, enough to read as Meme Madness at a glance without
 * fighting the result. Two things are ADDED: a caption line (the image copy)
 * and a QR code to cade.pnl-market in the footer. */

.pnl-card {
  --mm-ink: #0B0B0B;
  --mm-surface: #141414;
  --mm-raised: #1c1c1c;
  --mm-cream: #EFE9D8;
  --mm-muted: #A1A1A1;
  --mm-orange: #FFA800;
  --mm-orange-bright: #FFA800;
  --mm-violet: #6a2cff;
  --mm-violet-bright: #9652EF;
  --mm-lime: #91BB4F;
  --mm-red: #ff3355;
  --mm-red-live: #EA2A46;
  --mm-yellow: #FAF424;
  --mm-display: var(--shout);
  --mm-mono: var(--data);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 770 / 838;
  container-type: inline-size;
  background: #0a0a0a;
  color: var(--mm-cream);
  border: 3px solid var(--mm-ink);
  box-shadow: 10px 10px 0 var(--mm-ink);
}

.pnl-card[data-accent="orange"] {
  --accent: var(--mm-orange);
  --accent-bright: var(--mm-orange-bright);
}

.pnl-card[data-accent="violet"] {
  --accent: var(--mm-violet);
  --accent-bright: var(--mm-violet-bright);
}

/* ------------------------------------------------- background layers */

.pnl-bgAccents {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.32;
  filter: grayscale(1) brightness(0.8);
  pointer-events: none;
}

.pnl-bgAccents img,
.pnl-rays img {
  object-fit: cover;
}

.pnl-accentField {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: polygon(34% 0%, 100% 0%, 100% 64%, 88% 58%, 78% 66%, 60% 42%, 48% 30%, 40% 14%);
  background: radial-gradient(
    120% 95% at 78% 10%,
    var(--accent-bright) 0%,
    var(--accent) 52%,
    var(--accent) 100%
  );
  pointer-events: none;
}

.pnl-rays {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: polygon(34% 0%, 100% 0%, 100% 64%, 88% 58%, 78% 66%, 60% 42%, 48% 30%, 40% 14%);
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
}

.pnl-card[data-accent="orange"] .pnl-rays {
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(-8deg) brightness(1.4);
}

.pnl-card[data-accent="violet"] .pnl-rays {
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(215deg) brightness(1.2);
}

.pnl-halftoneBottom {
  position: absolute;
  z-index: 3;
  right: 2%;
  bottom: 14%;
  width: clamp(90px, 22cqw, 170px);
  height: clamp(64px, 15cqw, 120px);
  opacity: 0.75;
  transform: rotate(180deg);
  pointer-events: none;
}

.pnl-card[data-accent="orange"] .pnl-halftoneBottom {
  filter: grayscale(1) sepia(1) saturate(5) hue-rotate(-8deg) brightness(1.7);
}

.pnl-card[data-accent="violet"] .pnl-halftoneBottom {
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(215deg) brightness(1.6);
}

/* ------------------------------------------------------------ content */

.pnl-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 5.2cqw 6cqw 4.4cqw;
}

/* Margins rather than `gap`, inherited from the battle card, whose exporter
 * could not lay out flex gap. The export is browser-painted now, so either
 * would do; margins stay because the rhythm below is tuned to them.
 *
 * THE RHYTHM IS TIGHTER THAN THE BATTLE CARD'S. This card carries two rows
 * that one did not, the caption and the QR plate, inside the same 770:838
 * frame, and the first cut kept the old 3cqw spacing and simply ran out of
 * room: the small mono lines were the first to get crowded. The budget comes
 * back from here and from the coin row and hero figure below, never from the
 * QR, whose size is what keeps it scannable. */
.pnl-content > * + * {
  margin-top: 2.8cqw;
}

.pnl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  /* Keeps the row's height when the right-hand slot is empty (ACTIVE has no
   * stamp), so the coin row lands in the same place in every state. */
  min-height: 7cqw;
  /* Paints over the coin row: a plated character's horns reach up into the
   * header, and the wordmark sits over the top of them, not under. */
  position: relative;
  z-index: 2;
}

.pnl-brandMark {
  flex: none;
  width: 17cqw;
  aspect-ratio: 581.869 / 353.78;
  background: #fff;
  opacity: 0.92;
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  -webkit-mask-size: contain;
}

/* WON / LOST / VOID / CLOSED rubber stamp. */
.pnl-stamp {
  font-family: var(--mm-display);
  font-style: italic;
  font-weight: 800;
  font-size: 5.4cqw;
  letter-spacing: 0.14em;
  padding: 0.18em 0.7em;
  border: 0.7cqw solid currentColor;
  transform: rotate(6deg);
  background: var(--mm-surface);
  box-shadow: 0.8cqw 0.8cqw 0 var(--mm-ink);
}

.pnl-stamp[data-stamp="WON"] {
  color: var(--mm-lime);
}

.pnl-stamp[data-stamp="LOST"] {
  color: var(--mm-red-live);
}

.pnl-stamp[data-stamp="VOID"] {
  color: var(--mm-muted);
}

.pnl-stamp[data-stamp="CLOSED"] {
  color: var(--mm-yellow);
}

/* OPEN takes the coin's own colour: not a verdict tone, and tied to the card
 * rather than to a global "live" red. */
.pnl-stamp[data-stamp="ACTIVE"] {
  color: var(--accent-bright);
}

.pnl-coinRow {
  display: flex;
  align-items: center;
  gap: 3.6cqw;
  margin-top: 1.4cqw;
}

.pnl-coinMedallion {
  position: relative;
  display: inline-block;
  aspect-ratio: 232 / 234;
  /* The coin's own picture is the card's subject; it was drawn at 19cqw and
   * read as a badge. Sized to hold its own beside the ticker. The hexagon sits
   * ~5% inside its SVG box, so the box is pulled left by that much: the coin's
   * visible edge lines up with the wordmark's drawn edge above it. */
  width: 24cqw;
  margin-left: -2cqw;
  flex: none;
  filter: drop-shadow(0.8cqw 0.8cqw 0 rgb(11 11 11 / 0.6));
}

/* The plate seat: the medallion's footprint, with the character art drawn a
 * little larger than it. NOT the battle hero's crop (1.5× and hung 22% off the
 * bottom): the hero has open field under its seats, this card has the REALIZED
 * PNL label 4.6cqw below the seat, and the hero's drop covered it. The plate
 * PNGs carry transparent padding around the figure, so 1.3× the seat puts the
 * character itself about the hexagon's visual size, standing on the seat's
 * floor. */
.pnl-coinPlate {
  position: relative;
  display: inline-block;
  width: 24cqw;
  aspect-ratio: 1;
  margin-left: -2cqw;
  flex: none;
  overflow: visible;
  /* The art hangs below the seat; the ticker row beside it must not be pushed
   * down, and the recap under it must not be covered, so the seat itself
   * stays medallion-sized and the overhang is drawn over the field. */
  z-index: 1;
}

.pnl-coinPlateArt {
  position: absolute;
  left: 50%;
  bottom: -5%;
  width: 126%;
  height: auto;
  /* The preflight's `img { max-width: 100% }` would cap the art back to the
   * seat and make the crop pointless. */
  max-width: none;
  transform: translateX(-50%);
  filter: drop-shadow(0.8cqw 0.8cqw 0 rgb(11 11 11 / 0.6));
}

.pnl-coinPlate .pnl-coinMedallionSvg {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0.8cqw 0.8cqw 0 rgb(11 11 11 / 0.6));
}

.pnl-coinMedallionSvg {
  display: block;
  width: 100%;
  height: 100%;
}

.pnl-coinMedallionGlyph {
  font-family: var(--mm-display);
  font-style: italic;
  font-weight: 800;
  font-size: 92px;
}

.pnl-coinText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pnl-coinText > * + * {
  margin-top: 1.2cqw;
}

/* Ticker + direction plate share a line; the plate sits on the ticker's
 * baseline rather than centring against its cap height.
 *
 * NEVER WRAPS. In a real export at 1540px the row wrapped where the screen had
 * not, and the plate dropped under the lane chip, which painted over it, a
 * card that said "$ANSEM" and nothing about the direction. A direction plate
 * on its own line is wrong in every case, so the row is a single line and a
 * ticker long enough to crowd it overflows the card edge instead. */
.pnl-tickerRow {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  min-width: 0;
  gap: 2.4cqw;
}

.pnl-ticker {
  font-family: var(--mm-display);
  font-style: italic;
  font-weight: 800;
  font-size: 9.6cqw;
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--mm-cream);
  text-shadow: 0.9cqw 0.9cqw 0 var(--mm-ink);
  margin: 0;
}

.pnl-laneChip {
  align-self: flex-start;
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 2.9cqw;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--mm-yellow);
  background: var(--mm-ink);
  padding: 0.35em 0.8em;
  transform: skewX(-6deg);
}

/* HIGHER / LOWER hard-shadow plate. Sized as a LABEL, not a headline: on the
 * battle card this was the largest type after the ticker, and on a share
 * image that reads as the point of the picture, which it isn't. The result
 * is. Stepped down so the caption and the figures get the room. */
.pnl-directionPlate {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  align-self: flex-start;
  font-family: var(--mm-display);
  font-style: italic;
  font-weight: 800;
  font-size: 4.6cqw;
  letter-spacing: 0.08em;
  color: var(--mm-ink);
  background: var(--mm-lime);
  border: 0.4cqw solid var(--mm-ink);
  padding: 0.14em 0.65em 0.18em;
  transform: skewX(-6deg);
  box-shadow: 0.8cqw 0.8cqw 0 var(--mm-ink);
  margin: 0;
}

.pnl-directionPlate[data-direction="lower"] {
  background: var(--mm-red);
  color: var(--mm-cream);
}

.pnl-directionArrow {
  font-size: 0.8em;
}

/* ------------------------------------------------------------- stats */

/* The result block GROWS into the middle and centres in it, instead of being
 * pushed to the bottom by `margin-top: auto`. Rendered, that auto-margin left
 * a dead band between the coin row and the result, the card read as empty
 * in exactly the place the eye lands. Centring turns the same height into
 * breathing room on both sides of the hero. */
.pnl-statBlock {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pnl-statBlock > * + * {
  margin-top: 4.6cqw;
}

/* A plated character stands taller than the hexagon. The coin row drops away
 * from the stamp so the horns clear it, and the result block sits closer under
 * the figure: label, then plate, one group with the PNL box. */
.pnl-card[data-plate="character"] .pnl-coinRow {
  margin-top: 5.2cqw;
}

.pnl-card[data-plate="character"] .pnl-statBlock > * + * {
  margin-top: 5cqw;
}

.pnl-card[data-plate="character"] .pnl-pnlBlock {
  gap: 1.8cqw;
}

.pnl-statRow {
  display: flex;
  gap: 2.6cqw;
  flex-wrap: wrap;
}

/* On an OPEN card the stake is the hero, there is no result yet, so the two
 * plates are sized to own the middle of the card between them. */
.pnl-statPlate {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1cqw;
  background: var(--mm-surface);
  border: 0.4cqw solid var(--mm-ink);
  box-shadow: 1cqw 1cqw 0 var(--mm-ink);
  padding: 3cqw 3.2cqw 3.2cqw;
  min-width: 30cqw;
}

/* The multiplier under the dollar payout: the same fact, the other way. */
.pnl-statSub {
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 3.2cqw;
  letter-spacing: 0.08em;
  color: var(--mm-muted);
}

.pnl-statLabel {
  font-family: var(--mm-display);
  font-style: italic;
  font-weight: 600;
  font-size: 3cqw;
  letter-spacing: 0.2em;
  color: var(--mm-muted);
}

.pnl-statValue {
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 10cqw;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mm-cream);
}

.pnl-statPending {
  display: block;
  height: 10cqw;
  width: 18cqw;
}

.pnl-statPending > span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    rgb(239 233 216 / 0.14),
    rgb(239 233 216 / 0.34),
    rgb(239 233 216 / 0.14)
  );
  background-size: 220% 100%;
  animation: pnlPendingSweep 1.4s linear infinite;
}

@keyframes pnlPendingSweep {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

.pnl-awaitingNote {
  margin: 0;
  font-family: var(--mm-display);
  font-style: italic;
  font-weight: 700;
  font-size: 3.6cqw;
  letter-spacing: 0.14em;
  color: var(--mm-yellow);
}

.pnl-pnlBlock {
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
}

/* The hero plate and, on a big return, the badge that hangs off its corner. */
.pnl-pnlPlateWrap {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
}

/* ×5 and up: the multiple hangs off the plate's top-right corner like a tag , 
 * bigger than the chip, tilted, yellow on black, while the USD stays the hero
 * and the card keeps its own field. */
.pnl-multiplierBadge {
  position: absolute;
  right: -5.2cqw;
  top: -6.4cqw;
  font-family: var(--mm-display);
  font-style: italic;
  font-weight: 800;
  font-size: 6cqw;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--mm-ink);
  background: var(--mm-yellow);
  border: 0.45cqw solid var(--mm-ink);
  padding: 0.22em 0.55em 0.28em;
  transform: rotate(7deg);
  box-shadow: 0.9cqw 0.9cqw 0 var(--mm-ink);
  white-space: nowrap;
}

/* COLOURWAYS FOR A WINNING CARD, to compare in Storybook. "lane" (the default)
 * keeps the coin's own accent. "yellow" and "lime" recolour the whole card:
 * the accent field through the two accent tokens, and the rays and halftone
 * through their hue filters (the art is orange at rest; these rotations land
 * it on the yellow and the lime). Set on the card so every layer follows. */
.pnl-card[data-colorway="yellow"] {
  --accent: #f2d21b;
  --accent-bright: var(--mm-yellow);
}

.pnl-card[data-colorway="yellow"] .pnl-rays {
  filter: grayscale(1) sepia(1) saturate(6) hue-rotate(14deg) brightness(1.5);
}

.pnl-card[data-colorway="yellow"] .pnl-halftoneBottom {
  filter: grayscale(1) sepia(1) saturate(6) hue-rotate(14deg) brightness(1.8);
}

.pnl-card[data-colorway="lime"] {
  --accent: #9fdc1f;
  --accent-bright: var(--mm-lime);
}

.pnl-card[data-colorway="lime"] .pnl-rays {
  filter: grayscale(1) sepia(1) saturate(5) hue-rotate(38deg) brightness(1.5);
}

.pnl-card[data-colorway="lime"] .pnl-halftoneBottom {
  filter: grayscale(1) sepia(1) saturate(5) hue-rotate(38deg) brightness(1.7);
}

/* The two lanes, forced regardless of the coin's own accent. */
.pnl-card[data-colorway="orange"] {
  --accent: var(--mm-orange);
  --accent-bright: var(--mm-orange-bright);
}

.pnl-card[data-colorway="orange"] .pnl-rays {
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(-8deg) brightness(1.4);
}

.pnl-card[data-colorway="orange"] .pnl-halftoneBottom {
  filter: grayscale(1) sepia(1) saturate(5) hue-rotate(-8deg) brightness(1.7);
}

.pnl-card[data-colorway="violet"] {
  --accent: var(--mm-violet);
  --accent-bright: var(--mm-violet-bright);
}

.pnl-card[data-colorway="violet"] .pnl-rays {
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(215deg) brightness(1.2);
}

.pnl-card[data-colorway="violet"] .pnl-halftoneBottom {
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(215deg) brightness(1.6);
}

/* Red: the loss tone, for a losing card's colourway. */
.pnl-card[data-colorway="red"] {
  --accent: #c8102e;
  --accent-bright: var(--mm-red);
}

.pnl-card[data-colorway="red"] .pnl-rays {
  filter: grayscale(1) sepia(1) saturate(6) hue-rotate(-32deg) brightness(1.2);
}

.pnl-card[data-colorway="red"] .pnl-halftoneBottom {
  filter: grayscale(1) sepia(1) saturate(6) hue-rotate(-32deg) brightness(1.5);
}

.pnl-pnlLabel {
  font-family: var(--mm-display);
  font-style: italic;
  font-weight: 700;
  /* A helper label: small enough to clear a plated character's feet above it. */
  font-size: 3cqw;
  letter-spacing: 0.18em;
  color: var(--mm-muted);
}

/* THE HERO. Scott's brief was "just show the realized PNL", so it is the
 * largest thing on the card by a wide margin and it owns the middle. The
 * first cut shrank this to make room and the card read as empty; the fix is
 * the opposite move. */
.pnl-pnlValue {
  align-self: flex-start;
  font-family: var(--mm-mono);
  font-weight: 800;
  font-size: 19cqw;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mm-lime);
  background: var(--mm-surface);
  border: 0.5cqw solid var(--mm-ink);
  box-shadow: 1.2cqw 1.2cqw 0 var(--mm-ink);
  padding: 0.14em 0.4em 0.18em;
}

/* FIVE AND SIX FIGURES FIT. "+$123,456" is nine characters of 19cqw mono and
 * ran off the plate; the figure steps down by width bucket (see
 * `memeMadnessPnlFit`) so the whole number always shows, separators and all. */
.pnl-pnlValue[data-fit="wide"] {
  font-size: 14.5cqw;
}

.pnl-pnlValue[data-fit="wider"] {
  font-size: 11.5cqw;
}

.pnl-card[data-state="lost"] .pnl-pnlValue {
  color: var(--mm-red);
}

.pnl-card[data-state="void"] .pnl-pnlValue {
  color: #cfc8b4;
}

/* Settled outcome recap: FINAL vs ENTRY LINE, or the void notice. This is the
 * result on record, distinct from the removed "CLOSE HIGHER TO WIN" hint,
 * which coached a bet still in flight. */
.pnl-recap,
.pnl-entryRecap {
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 2.9cqw;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  /* Clear of the hero plate's hard shadow. This margin is set HERE, not by the
   * block's sibling rule: `margin: 0` on these lines used to win the cascade
   * and leave the text sitting in the shadow, the cramping every reviewer saw. */
  margin: 4.2cqw 0 0;
}

.pnl-recap {
  color: #bdb7a6;
}

.pnl-entryRecap {
  color: var(--mm-muted);
}

/* ------------------------------------------------------------ footer
 * QR plate on the left, share URL on the right. The plate is white with an
 * ink border and hard shadow, the same plate language as the stats, and
 * its padding IS the quiet zone: ~4 modules of light on every side, the spec
 * minimum a scanner needs to find the symbol's edge. */
.pnl-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3.4cqw;
  border-top: 0.3cqw solid rgb(239 233 216 / 0.25);
  padding-top: 3.2cqw;
}

/* The words beside the QR: what the code is FOR. */
.pnl-footerCta {
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
  min-width: 0;
}

.pnl-footerCtaWord {
  font-family: var(--mm-display);
  font-style: italic;
  font-weight: 800;
  font-size: 6cqw;
  line-height: 0.95;
  letter-spacing: 0.06em;
  color: var(--mm-cream);
}

.pnl-qrPlate {
  flex: none;
  display: block;
  width: 15cqw;
  aspect-ratio: 1;
  background: #ffffff;
  border: 0.4cqw solid var(--mm-ink);
  box-shadow: 0.9cqw 0.9cqw 0 var(--mm-ink);
  padding: 1.8cqw;
}

.pnl-qrCode {
  display: block;
  width: 100%;
  height: 100%;
}

.pnl-footerUrl {
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 3.2cqw;
  letter-spacing: 0.08em;
  color: var(--mm-yellow);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .pnl-statPending > span {
    animation: none;
  }
}

/* ===== qp-* : ported 1:1 from frontend-v1 app/components/market/QuickPredictControls.module.css */
/*
 * Quick-predict wagering controls, the shared skin.
 *
 * Every rule here was MOVED VERBATIM out of
 * `meme-madness/battle/components/BattleQuickPredictModal.qp-module.css`; the
 * modal is now a consumer rather than the owner. Two surfaces render these
 * controls (the battle page's bet dialog and the market page's trade band) and
 * they have to be the same object, not two things that resemble each other.
 *
 * The `--mm-*` tokens are redeclared on `.controls` so the block stands up on
 * any surface. Inside the modal the identical values already cascade from its
 * `.overlay`, so nothing there changes.
 *
 * The markup also carries stable `data-qp="…"` hooks. That is what lets the
 * modal keep its condensed half-sheet overrides working across the module
 * boundary, `.qp-dialog[data-mode="sheet"] [data-qp="amount-box"]` outranks the
 * single-class base rules here, exactly as `.amountBox` did when both lived in
 * one file.
 */

.qp-controls {
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --mm-surface: #141414;
  --mm-cream: #EFE9D8;
  --mm-muted: #A1A1A1;
  --mm-orange-bright: #FFA800;
  --mm-lime: #91BB4F;
  --mm-lime-solid: #91BB4F;
  --mm-red: #EA2A46;
  --mm-pink: #FF8A9E;
  --mm-yellow: #FAF424;
  --mm-display: var(--shout);
  --mm-mono: var(--data);
}

/* ------------------------------------------------------------ amount entry */

.qp-amountBlock {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.qp-amountHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.qp-amountLabel {
  font-family: var(--mm-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--mm-cream);
}

.qp-balance {
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--mm-muted);
}

.qp-amountBox {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 2px solid #000;
  background: #fff;
  color: #000;
  box-shadow: 6px 8px 0 #000;
  padding: 0.45rem 1.1rem;
}

.qp-amountAnimation {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  color: #000;
  font: 800 1rem/1 var(--mm-mono);
  letter-spacing: 0.08em;
}
.qp-amountAnimationFill, .qp-amountAnimationValue, .qp-amountAnimationStamp {
  position: absolute;
  inset: 0;
}
.qp-amountAnimationFill { background: #91BB4F; }
.qp-amountBox[data-animation-outcome="failure"] .qp-amountAnimationFill { background: #EA2A46; }
.qp-amountBox:not([data-animation-phase="idle"]) .qp-amountInput { opacity: 0; }
.qp-amountAnimationValue {
  display: grid;
  place-items: center end;
  padding-right: 3.6rem;
  font: italic 600 1.7rem/1 var(--mm-display);
}
.qp-amountAnimationStamp { display: grid; place-items: center; }
.qp-amountBox[data-animation-phase="wipe"] .qp-amountAnimationStamp { display: none; }
.qp-amountBox:not([data-animation-phase="wipe"]) .qp-amountAnimationValue { display: none; }
.qp-amountBox[data-animation-phase="wipe"] .qp-amountAnimationFill { animation: quick-predict-wipe 250ms linear forwards; }
.qp-amountBox[data-animation-phase="wipe"] .qp-amountAnimationValue { animation: quick-predict-erase 250ms linear forwards; }
.qp-amountBox[data-animation-phase="fade"] .qp-amountAnimation { animation: quick-predict-fade 150ms ease forwards; }
@keyframes quick-predict-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes quick-predict-erase {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 0 100%); }
}
@keyframes quick-predict-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .qp-amountAnimation, .qp-amountAnimationFill, .qp-amountAnimationValue { animation: none !important; }
}

.qp-amountBox[data-invalid] {
  outline: 3px solid var(--mm-red);
  outline-offset: -3px;
}

.qp-amountPrefix {
  flex: none;
  font-family: var(--mm-display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1;
}

/*
 * THE STAKE READS RIGHT-ALIGNED.
 *
 * A currency entry grows leftward from a fixed decimal position, so the units
 * column has to stay put: left-aligned, `$5` and `$1,250` start at the same x
 * and end somewhere different, and the figure appears to jump every time a
 * preset is tapped or a digit typed. Right-aligned, the digits meet the `USDC`
 * affix and only the left end moves, and the input then agrees with every
 * derived readout under it, which has always been label-left / value-right.
 *
 * The AFFIXES do not move: `$` stays pinned to the left of the box and `USDC`
 * to its right (both are `flex: none`), so the field's frame is stable and only
 * the number inside it travels.
 */
.qp-amountInput {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #000;
  font-family: var(--mm-display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1;
  padding: 0.15em 0.25em 0.1em;
  outline: none;
  appearance: textfield;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.qp-amountInput::-webkit-inner-spin-button,
.qp-amountInput::-webkit-outer-spin-button {
  appearance: none;
}

.qp-amountInput:disabled {
  color: rgb(0 0 0 / 0.45);
  cursor: not-allowed;
}

.qp-amountCurrency {
  flex: none;
  font-family: var(--mm-display);
  font-weight: 600;
  font-style: italic;
  font-size: 0.95rem;
  color: rgb(0 0 0 / 0.65);
}

.qp-chipRow {
  display: grid;
  grid-template-columns: repeat(var(--quick-predict-chip-columns, 4), minmax(0, 1fr));
  gap: 0.5rem;
}

.qp-amountChip {
  position: relative;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform 140ms var(--ease-out);
}

.qp-amountChip:not(:disabled):hover {
  transform: translate(-1px, -1px);
}

.qp-amountChip:not(:disabled):active {
  transform: translate(2px, 2px);
}

.qp-amountChip:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.qp-amountChip:focus-visible {
  outline: 3px solid var(--mm-yellow);
  outline-offset: 3px;
}

.qp-amountChipShadow {
  position: absolute;
  inset: 0;
  transform: translate(4px, 4px);
  background: #000;
}

.qp-amountChipFace {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  font-family: var(--mm-display);
  font-weight: 600;
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1;
  /*
   * SHORTER THAN A PRIMARY BUTTON, because it is not one.
   *
   * These four chips set an amount; the sheet's primary action is PREDICT at
   * the foot. At `0.55em/0.6em` of a 1rem italic they stood as tall as that
   * button and were, with the row's own gap, the single tallest block between
   * the amount box and the submit, which is what put a scrollbar in a sheet
   * whose content otherwise fitted. Trimmed to a chip's proportions they read
   * as the secondary control they are AND return roughly a fifth of the
   * sheet's height. Still a comfortable 40px+ tap target at this size.
   */
  padding: 0.42em 0.2em 0.46em;
}

.qp-amountChip[data-active] .qp-amountChipFace {
  background: #9652EF;
  color: #fff;
}

.qp-inputFeedback {
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--mm-pink);
}

/* -------------------------------------------------------------- economics */

.qp-economicsRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.qp-paysChip {
  position: relative;
  display: inline-block;
  min-width: 0;
  max-width: 100%;
}

.qp-paysChip[data-side="higher"] {
  color: var(--mm-lime);
}

.qp-paysChip[data-side="lower"] {
  color: var(--mm-pink);
}

.qp-paysChipShadow {
  display: none;
}

.qp-paysChipFace {
  position: relative;
  display: inline-block;
  background: transparent;
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0.5em 1.3em 0.5em 1.9em;
  filter: none;
}

.qp-paysChip[data-side="lower"] .qp-paysChipFace {
  padding: 0.5em 1.9em 0.5em 1.3em;
}

/*
 * SMALLER, AND CLEAR OF THE PLATE'S EDGE, ON A PHONE.
 *
 * At 0.9rem with 1.9em of lead the two chips are wider than the panel they sit
 * in once its own tear is accounted for, so `PAYS ×20.00` ran into the torn
 * corner and the pair read as one run-on string. The chip is a caption on the
 * button above it, not a headline.
 */
@media (max-width: 1079px) {
  .qp-paysChipFace {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    padding: 0.45em 0.9em 0.45em 1.35em;
  }

  .qp-paysChip[data-side="lower"] .qp-paysChipFace {
    padding: 0.45em 1.35em 0.45em 0.9em;
  }
}

.qp-paysPending {
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--mm-muted);
}

.qp-payoutPreview {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.qp-payoutLabel {
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-muted);
}

.qp-payoutValue {
  font-family: var(--mm-display);
  font-weight: 700;
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mm-yellow);
}

/* --------------------------------------------------------------------- cta */

.qp-cta {
  position: relative;
  display: block;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.qp-ctaShadow {
  position: absolute;
  inset: 0;
  transform: translate(6px, 6px);
  background: #000;
}

.qp-ctaFace {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #000;
  padding: 0.62rem 0.9rem 0.68rem;
  font-family: var(--mm-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: transform 150ms var(--ease-out);
}

.qp-cta:not(:disabled):hover .qp-ctaFace {
  transform: translate(-2px, -2px);
}

.qp-cta[data-primary]:not(:disabled):hover .qp-ctaFace {
  transform: translate(-4px, -4px);
}

.qp-cta:not(:disabled):active .qp-ctaFace {
  transform: translate(0, 0);
}

.qp-cta:disabled {
  cursor: not-allowed;
}

.qp-cta:disabled .qp-ctaShadow {
  opacity: 0.55;
}

.qp-cta:disabled .qp-ctaFace {
  opacity: 0.55;
  filter: saturate(0.4);
}

.qp-cta:focus-visible {
  outline: 3px solid var(--mm-yellow);
  outline-offset: 3px;
}

/* Variant faces. CONFIRM and SIGN IN keep the old full-size slat scale. */
.qp-cta[data-variant="confirm"] .qp-ctaFace,
.qp-cta[data-variant="sign-in"] .qp-ctaFace {
  padding: 0.72rem 1rem 0.78rem;
  font-size: 1.35rem;
}

.qp-cta[data-variant="confirm"] .qp-ctaFace {
  color: #fff;
  -webkit-text-stroke: 0.35px #fff;
}

.qp-cta[data-variant="confirm"][data-side="higher"] .qp-ctaFace {
  background: var(--mm-lime-solid);
}

.qp-cta[data-variant="confirm"][data-side="lower"] .qp-ctaFace {
  background: var(--mm-red);
}

.qp-cta[data-variant="sign-in"] .qp-ctaFace {
  background: var(--mm-orange-bright);
  color: #000;
}

.qp-cta[data-variant="share"] .qp-ctaFace {
  background: var(--mm-yellow);
  color: #000;
}

.qp-cta[data-variant="share-x"] .qp-ctaFace {
  background: #fff;
  color: #000;
}

.qp-cta[data-variant="done"] .qp-ctaFace {
  background: var(--mm-cream);
  color: #000;
}

.qp-cta[data-variant="share"]:focus-visible,
.qp-cta[data-variant="done"]:focus-visible,
.qp-cta[data-variant="share-x"]:focus-visible {
  outline-color: var(--mm-orange-bright);
}

/* ------------------------------------------------- dual-action arrangement */

/*
 * The market page offers BOTH sides at once, so its economics and its commit
 * slats run as two equal columns instead of the modal's single row. Same
 * elements, same skin, only the arrangement differs.
 */
.qp-sideGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.qp-sideColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

/* In a side column the pays plate stacks above its payout instead of sitting
 * opposite it, same two elements, turned ninety degrees. */
.qp-economicsStacked {
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}

.qp-economicsStacked .qp-payoutPreview {
  align-items: center;
}

.qp-sideColumn .qp-cta {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .qp-amountChip,
  .qp-ctaFace {
    transition: none;
  }
}

/* ===== qpm-* : ported 1:1 from frontend-v1 app/meme-madness/battle/components/BattleQuickPredictModal.module.css */
/* BattleQuickPredictModal, Meme Madness R2 comic skin, matching the battle
 * page shell's palette/ease tokens (MemeMadnessBattlePageShell.qpm-module.qpm-css). */

.qpm-overlay {
  --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --mm-ink: #0B0B0B;
  --mm-surface: #141414;
  --mm-raised: #1c1c1c;
  --mm-border: #343434;
  --mm-cream: #EFE9D8;
  --mm-muted: #A1A1A1;
  --mm-orange-bright: #FFA800;
  --mm-violet-bright: #bba8ff;
  --mm-lime: #91BB4F;
  --mm-lime-solid: #91BB4F;
  --mm-red: #EA2A46;
  --mm-pink: #FF8A9E;
  --mm-yellow: #FAF424;
  --mm-display: var(--shout);
  --mm-mono: var(--data);

  /* Layout, motion and dialog behaviour belong to the shared ResponsiveSheet
   * primitive (centered dialog ≥768px, bottom half sheet below). This class is
   * the modal's skin: the R2 token set every descendant reads, plus the
   * auth-modal scrim treatment (login/AuthPage.qpm-module.qpm-css .qpm-page), dimmed
   * scrim + heavy desaturating blur over the page behind. */
  --rs-scrim: rgb(0 0 0 / 0.58);
  --rs-blur: blur(14px) saturate(0.72);
}

.qpm-dialog {
  color: var(--mm-cream);
}

.qpm-dialog[data-mode="dialog"] {
  --rs-width: 520px;
}

/* The torn panel's hard offset shadow is absolutely positioned against this. */
.qpm-dialogContent {
  position: relative;
}

.qpm-dialogShadow {
  position: absolute;
  inset: 0;
  transform: translate(10px, 10px);
  background: var(--mm-ink);
  opacity: 0.9;
}

.qpm-dialogFace {
  position: relative;
  background: var(--mm-surface);
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
}

/* Story/review backdrop plumbing (mirrors login/AuthPage.qpm-module.qpm-css): the
 * stories mount the live battle page behind the overlay so the dim + blur
 * treatment reads exactly as it does in the app. */
.qpm-reviewCanvas {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #070707;
}

.qpm-reviewBackdrop {
  position: absolute;
  inset: -36px;
  overflow: hidden;
  filter: brightness(0.74) saturate(0.78);
  transform: scale(1.04);
  pointer-events: none;
}

/* ------------------------------------------------------------------ header */

.qpm-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Same horizontal gutters as the body so the identity cluster, side chip,
   * and close button sit on the shared content axis instead of hugging the
   * panel edge. */
  padding: 1.1rem 2.1rem 1rem;
  border-bottom: 3px solid #000;
  color: #000;
}

.qpm-medallion {
  position: relative;
  flex: none;
  display: inline-block;
  width: 46px;
  height: 46px;
}

.qpm-medallionSvg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The PFP layer: a real <img> hex-clipped between the medallion body and the
 * accent ring (both aria-hidden SVG). Geometry comes inline from the TSX. */
.qpm-medallionImage {
  position: absolute;
  object-fit: cover;
  background: #141414;
}

.qpm-medallionRing {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.qpm-medallionGlyph {
  font-family: var(--mm-display);
  font-weight: 700;
  font-style: italic;
  font-size: 88px;
}

.qpm-headerText {
  min-width: 0;
  flex: 1;
}

.qpm-title {
  font-family: var(--mm-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #000;
}

.qpm-subtitle {
  margin-top: 0.3rem;
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(0 0 0 / 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qpm-sideChip {
  flex: none;
  font-family: var(--mm-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 0.32em 0.7em 0.38em;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  transform: skewX(-6deg);
}

.qpm-sideChip[data-side="higher"] {
  background: var(--mm-lime-solid);
}

.qpm-sideChip[data-side="lower"] {
  background: var(--mm-red);
}

.qpm-closeButton {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid #000;
  background: var(--mm-cream);
  color: #000;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}

.qpm-closeButton svg {
  width: 14px;
  height: 14px;
}

.qpm-closeButton:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #000;
}

.qpm-closeButton:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
}

.qpm-closeButton:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------- body */

/* Confirmation: close only, top-right, no plate, the card below is the header. */
.qpm-headerCompact {
  display: flex;
  justify-content: flex-end;
  padding: 0.6rem 0.75rem 0;
}

/* Confirmation: tighter gutters so the PNL card (which sizes itself to the
 * column, cqw) and its actions fit the panel without a scroll. */
.qpm-body[data-success="true"] {
  gap: 0.7rem;
  padding: 0.25rem 1.6rem 1.1rem;
}

.qpm-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  /* Symmetric, generous gutters: the dsPanel tear bites up to ~33px into the
   * lower-left edge and the hard offset shadows need room on the right, so
   * equal 2.6rem sides keep the content column centered and clear of both. */
  padding: 1.35rem 2.6rem 1.5rem;
}

.qpm-question {
  font-family: var(--mm-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 0.95;
  color: var(--mm-cream);
}

.qpm-metaRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* PLAIN TONE, a market card's Quick Predict for a coin that is not a battle
 * coin. The header is the panel's raised surface rather than a lane colour, its
 * text turns cream, and the selected amount preset is ink on cream instead of
 * the lane violet. Everything else is the battle modal, so the two flows read
 * as one dialog. */
.qpm-dialogFace[data-tone="plain"] .qpm-header {
  background: var(--mm-raised);
  color: var(--mm-cream);
}

.qpm-dialogFace[data-tone="plain"] .qpm-title {
  color: var(--mm-cream);
}

.qpm-dialogFace[data-tone="plain"] .qpm-subtitle {
  color: rgb(240 234 217 / 0.7);
}

.qpm-dialogFace[data-tone="plain"] [data-qp="chip"][data-active] [data-qp="chip-face"] {
  background: var(--mm-cream);
  color: #000;
  box-shadow: inset 0 0 0 2px #000;
}

/* The HIGHER / LOWER selector a market card's Quick Predict shows (the battle
 * page decides the side before the dialog opens and never draws this). Two
 * plates in the side tones; the one not chosen recedes to an outline so the
 * chosen direction reads at a glance, and the header chip agrees with it. */
.qpm-sideSelect {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.qpm-sideOption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.6rem 0.5rem 0.55rem;
  border: 3px solid #000;
  background: var(--mm-cream);
  color: #000;
  cursor: pointer;
  box-shadow: 4px 4px 0 #000;
  transition: transform 120ms ease, background-color 120ms ease, color 120ms ease;
}

.qpm-sideOption:not(:disabled):hover {
  transform: translate(-1px, -1px);
}

.qpm-sideOption[data-selected="true"][data-side="higher"] {
  background: var(--mm-lime-solid);
  color: #fff;
  -webkit-text-stroke: 0.35px #fff;
}

.qpm-sideOption[data-selected="true"][data-side="lower"] {
  background: var(--mm-red);
  color: #fff;
  -webkit-text-stroke: 0.35px #fff;
}

.qpm-sideOption[data-selected="false"] {
  background: transparent;
  color: var(--mm-cream);
  border-color: rgb(240 234 217 / 0.45);
  box-shadow: none;
}

.qpm-sideOption:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.qpm-sideOption:focus-visible {
  outline: 3px solid var(--mm-yellow, #faf424);
  outline-offset: 2px;
}

.qpm-sideOptionLabel {
  font-family: var(--mm-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.35rem;
  line-height: 1;
}

.qpm-sideOptionMeta {
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
  min-height: 0.9em;
}

.qpm-cutoffNotice {
  margin: 0 0 14px;
  color: var(--mm-ink, #171717);
  font-size: 12px;
  line-height: 1.35;
}

.qpm-betLine {
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--mm-muted);
}

.qpm-betLine strong {
  color: var(--mm-cream);
  font-variant-numeric: tabular-nums;
}

.qpm-laneChip {
  position: relative;
  flex: none;
  display: inline-block;
}

.qpm-laneChip[data-accent="orange"] {
  color: var(--mm-orange-bright);
}

.qpm-laneChip[data-accent="violet"] {
  color: var(--mm-violet-bright);
}

.qpm-laneChipShadow {
  position: absolute;
  inset: 0;
  transform: translate(4px, 4px);
  background: #000;
}

.qpm-laneChipFace {
  position: relative;
  display: inline-block;
  background: var(--mm-surface);
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  padding: 0.55em 1.5em;
  filter: drop-shadow(1.5px 0 0 currentcolor) drop-shadow(-1.5px 0 0 currentcolor)
    drop-shadow(0 1.5px 0 currentcolor) drop-shadow(0 -1.5px 0 currentcolor);
}

/* ------------------------------------------------------------ amount entry */

.qpm-reason {
  min-height: 1.4em;
  margin: -0.45rem 0 0;
  font-family: var(--mm-mono);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-muted);
}

.qpm-reason[data-invalid="true"] {
  color: #EA2A46;
}

.qpm-reason[data-pending="true"] {
  color: var(--mm-yellow);
}

.qpm-submissionStatus {
  margin: -0.45rem 0 0;
  font-family: var(--mm-mono);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-yellow);
}

/* -------------------------------------------------------------- economics */

/* ------------------------------------------------------------------ states */

.qpm-errorPlate {
  border: 2px solid var(--mm-red);
  background: rgb(234 42 70 / 0.14);
  box-shadow: 4px 4px 0 #000;
  padding: 0.65rem 0.8rem;
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--mm-pink);
}

/* ── Notched comic CTAs ─────────────────────────────────────────────────────
 * The DS slat/plate button treatment (shell slats, voting page's
 * NotchedCtaButton, reproduced, not imported): a notched clip-path face over
 * a hard black offset shadow, display-font label, hover lift (−2/−2,
 * primaries −4/−4), press returns home. The clip silhouette arrives inline
 * from the TSX (DS_CTA_CLIP). */

/* Variant faces. CONFIRM and SIGN IN keep the old full-size slat scale. */
/* ── The commit dock ────────────────────────────────────────────────────────
 * The last block of the body, CONFIRM (plus the error plate it retries), the
 * signed-out SIGN IN, or the ticket's share/done row. On desktop it is a plain
 * stack whose gap matches the body's, so the column reads exactly as it did
 * when those elements were loose children. In sheet mode `.dock` pins it to
 * the bottom of the scrolling body (see the half-sheet section). */

.qpm-actionDock {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* --------------------------------------------------------- signed-out CTA */

/* Signed-out body: no supporting copy, the header/question/bet-line above
 * already carry the context, so it's just the SIGN IN slat with breathing
 * room under the divider. */
.qpm-connectPrompt {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--mm-border);
  padding: 1.15rem 0 0.35rem;
}

/* ---------------------------------------------------------- success ticket */

.qpm-ticket {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.qpm-ticketBanner {
  align-self: flex-start;
  font-family: var(--mm-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.35rem;
  line-height: 1;
  color: #000;
  background: var(--mm-yellow);
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 0.4em 0.75em 0.45em;
  transform: skewX(-6deg) rotate(-1.5deg);
}

.qpm-ticketRows {
  border: 2px solid var(--mm-border);
  background: var(--mm-raised);
  box-shadow: 5px 5px 0 #000;
}

.qpm-ticketRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
}

.qpm-ticketRow + .qpm-ticketRow {
  border-top: 1px solid var(--mm-border);
}

.qpm-ticketRow dt {
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--mm-muted);
}

.qpm-ticketRow dd {
  font-family: var(--mm-display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mm-cream);
}

.qpm-ticketRow dd[data-side="higher"] {
  color: var(--mm-lime);
}

.qpm-ticketRow dd[data-side="lower"] {
  color: var(--mm-pink);
}

.qpm-ticketActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

/* SHARE THIS PICK and DONE sit side by side. The primary used to take the
 * whole first row above SHARE ON X and DONE; with one share path the full row
 * left DONE alone underneath (Scott, 2026-09-04). */

/* ------------------------------------------------------------------ footer */

.qpm-footer {
  border-top: 2px solid var(--mm-border);
  text-align: center;
  padding: 0.85rem 3.5rem 1.45rem;
  font-family: var(--mm-mono);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-muted);
}

/* ── Half-sheet skin (< 768px) ───────────────────────────────────────────────
 * The sheet already supplies the torn top edge and the ink frame, so the
 * dialog's own torn silhouette and offset shadow stand down (the TSX drops the
 * clip-path in this mode too) and the gutters tighten for a 390px column.
 *
 * The sheet is capped at 85svh, so on a 320×568 phone the whole flow has ~456px
 * to live in. Every row below is condensed for that budget, header first (the
 * medallion, the two-line title, the venue subline and the chip/close controls
 * were eating 86px on their own), and the commit dock is pinned to the bottom
 * of the scrolling body so the primary action is on screen whatever is left
 * over. Nothing here leaks into `data-mode="dialog"`; desktop is untouched. */

.qpm-dialog[data-mode="sheet"] .qpm-dialogShadow {
  display: none;
}

.qpm-dialog[data-mode="sheet"] .qpm-dialogFace {
  border: 0;
}

/* ---- header: one line of title, a small medallion, compact controls ---- */

.qpm-dialog[data-mode="sheet"] .qpm-header {
  padding: 0.6rem 0.95rem 0.62rem;
  gap: 0.6rem;
}

.qpm-dialog[data-mode="sheet"] .qpm-medallion {
  width: 34px;
  height: 34px;
}

/* The title carries the whole "PREDICT <SIDE> · $TICKER" line; on a 320px
 * sheet it wrapped to two. Held to one line, ellipsised only as a last
 * resort. */
.qpm-dialog[data-mode="sheet"] .qpm-title {
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qpm-dialog[data-mode="sheet"] .qpm-subtitle {
  margin-top: 0.14rem;
  font-size: 0.53rem;
  letter-spacing: 0.07em;
}

.qpm-dialog[data-mode="sheet"] .qpm-subtitleLane {
  display: none;
}

.qpm-dialog[data-mode="sheet"] .qpm-sideChip {
  font-size: 0.72rem;
  padding: 0.26em 0.5em 0.3em;
  box-shadow: 2px 2px 0 #000;
}

.qpm-dialog[data-mode="sheet"] .qpm-closeButton {
  width: 28px;
  height: 28px;
  box-shadow: 2px 2px 0 #000;
}

.qpm-dialog[data-mode="sheet"] .qpm-closeButton svg {
  width: 12px;
  height: 12px;
}

/* ---- body rows ---- */

.qpm-dialog[data-mode="sheet"] .qpm-body {
  padding: 0.8rem 1rem 0.6rem;
  gap: 0.8rem;
}

.qpm-dialog[data-mode="sheet"] .qpm-question {
  font-size: 1.05rem;
  line-height: 1;
}

.qpm-dialog[data-mode="sheet"] .qpm-betLine {
  font-size: 0.62rem;
}

.qpm-dialog[data-mode="sheet"] .qpm-laneChipFace {
  font-size: 0.7rem;
  padding: 0.45em 1.1em;
}

.qpm-dialog[data-mode="sheet"] [data-qp="amount-block"] {
  gap: 0.45rem;
}

.qpm-dialog[data-mode="sheet"] [data-qp="amount-label"] {
  font-size: 0.85rem;
}

.qpm-dialog[data-mode="sheet"] [data-qp="balance"] {
  font-size: 0.6rem;
}

.qpm-dialog[data-mode="sheet"] [data-qp="amount-box"] {
  padding: 0.3rem 0.85rem;
  box-shadow: 5px 6px 0 #000;
}

.qpm-dialog[data-mode="sheet"] [data-qp="amount-prefix"],
.qpm-dialog[data-mode="sheet"] [data-qp="amount-input"] {
  font-size: 1.45rem;
}

.qpm-dialog[data-mode="sheet"] [data-qp="amount-currency"] {
  font-size: 0.85rem;
}

.qpm-dialog[data-mode="sheet"] [data-qp="chip-row"] {
  gap: 0.5rem;
}

/* Held at a ~40px tap target even at the smaller label size. */
.qpm-dialog[data-mode="sheet"] [data-qp="chip-face"] {
  font-size: 0.95rem;
  padding: 0.68em 0.15em 0.72em;
}

.qpm-dialog[data-mode="sheet"] [data-qp="pays-face"] {
  font-size: 0.78rem;
  padding: 0.45em 1.1em 0.45em 1.6em;
}

.qpm-dialog[data-mode="sheet"] [data-qp="pays-chip"][data-side="lower"] [data-qp="pays-face"] {
  padding: 0.45em 1.6em 0.45em 1.1em;
}

.qpm-dialog[data-mode="sheet"] [data-qp="pays-pending"] {
  font-size: 0.62rem;
}

.qpm-dialog[data-mode="sheet"] [data-qp="payout"] {
  gap: 0.15rem;
}

.qpm-dialog[data-mode="sheet"] [data-qp="payout-label"] {
  font-size: 0.55rem;
}

.qpm-dialog[data-mode="sheet"] [data-qp="payout-value"] {
  font-size: 1.3rem;
}

.qpm-dialog[data-mode="sheet"] .qpm-errorPlate {
  padding: 0.5rem 0.65rem;
  font-size: 0.64rem;
}

/* ---- CTAs: smaller labels, still ≥40px of slat ---- */

.qpm-dialog[data-mode="sheet"] [data-qp="cta-face"] {
  font-size: 1rem;
  padding: 0.55rem 0.7rem 0.6rem;
}

.qpm-dialog[data-mode="sheet"] [data-qp="cta"][data-variant="confirm"] [data-qp="cta-face"],
.qpm-dialog[data-mode="sheet"] [data-qp="cta"][data-variant="sign-in"] [data-qp="cta-face"] {
  font-size: 1.15rem;
  padding: 0.6rem 0.8rem 0.65rem;
}

/* ---- success ticket ---- */

.qpm-dialog[data-mode="sheet"] .qpm-ticket {
  gap: 0.6rem;
}

.qpm-dialog[data-mode="sheet"] .qpm-ticketBanner {
  font-size: 1.1rem;
  padding: 0.3em 0.6em 0.35em;
  box-shadow: 3px 3px 0 #000;
}

.qpm-dialog[data-mode="sheet"] .qpm-ticketRows {
  box-shadow: 4px 4px 0 #000;
}

.qpm-dialog[data-mode="sheet"] .qpm-ticketRow {
  padding: 0.38rem 0.7rem;
}

.qpm-dialog[data-mode="sheet"] .qpm-ticketRow dt {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

.qpm-dialog[data-mode="sheet"] .qpm-ticketRow dd {
  font-size: 0.95rem;
}

.qpm-dialog[data-mode="sheet"] .qpm-ticketActions {
  gap: 0.5rem;
}

/* ---- the pinned commit dock ────────────────────────────────────────────────
 * The body is the sheet's only scrolling region; the dock rides its bottom
 * edge so CONFIRM / SIGN IN / SHARE THIS PICK never fall below the fold. It
 * bleeds to the sheet's full width and carries the body's own surface so the
 * rows scrolling beneath it stay hidden. */

.qpm-dialog[data-mode="sheet"] .qpm-dock {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -1rem -0.6rem;
  padding: 0.7rem 1rem 0.6rem;
  border-top: 2px solid var(--mm-border);
  background: var(--mm-surface);
}

.qpm-dialog[data-mode="sheet"] .qpm-actionDock {
  gap: 0.7rem;
}

.qpm-dialog[data-mode="sheet"] .qpm-footer {
  padding: 0.5rem 1rem 0.55rem;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
  .qpm-closeButton {
    transition: none;
  }
}

/* Data > Live chart specimen (DS page only; every rule scoped under .lcspec so the landing, which also loads ds.css, is untouched) */
.lcspec{display:block;width:100%}
.lcspec .lcs-note{margin:0 0 18px;max-width:72ch;font-size:15px;color:var(--meta)}
.lcspec .lcs-note code{font-family:var(--data);font-size:13px;color:var(--paper)}
.lcspec figure{margin:0;min-width:0}
.lcspec figcaption{margin-top:12px;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.lcspec .lcs-live .lcs-c{height:clamp(300px,30vw,420px)}
.lcspec .lcs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:34px 30px;margin-top:40px}
.lcspec .lcs-grid .lcs-c{height:340px}
.lcspec .lcs-odds{width:min(100%,600px);--lco-h:150px}

/* Data > Battle split specimen (DS page only; every rule scoped under .bsspec) */
.bsspec{display:block;width:100%}
.bsspec .bss-note{margin:0 0 30px;max-width:72ch;font-size:15px;color:var(--meta)}
.bsspec .bss-note code{font-family:var(--data);font-size:13px;color:var(--paper)}
.bsspec figure{margin:0;min-width:0;padding:30px 10px 0 0}
.bsspec figcaption{margin-top:26px;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.bsspec .bss-c{width:calc(100% - 8px)}
.bsspec .bss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:20px 40px;margin-top:30px}
.bsspec .bss-grid .bss-c{--bs-h:52px;--bs-fs:24px;--bs-ws:15px;--bs-vs:56px}
@media (max-width:600px){.bsspec .bss-c{--bs-h:50px;--bs-fs:19px;--bs-ws:13px;--bs-vs:50px;--bs-wh:138px}}

/* DS page at phone width: long code paths wrap, phone specimens never wider than the column (2026-10-02) */
@media (max-width:600px){.dsdoc code,.grp code{overflow-wrap:anywhere;word-break:break-word}.grp .items{overflow-x:clip}.grp .cboard,.grp .items>*,.grp .items>*>*,.grp .cduel{max-width:100%!important;box-sizing:border-box}}

/* Patterns + Actions: the product chrome specimens (2026-10-02, DS page only; every rule under .dsx-*).
   The fixed pieces (tab bar, MORE sheet, sign-in overlay, cookie banner) sit in frames with a transform,
   so position:fixed resolves to the frame; the viewport media gates are opened inside the frames only. */
.dsx-wrap{display:grid;gap:34px;min-width:0}
.dsx-row{display:flex;flex-wrap:wrap;gap:30px 32px;align-items:flex-start;min-width:0}
.dsx-fig{margin:0;min-width:0;max-width:100%}
.dsx-fig>figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.dsx-cap{margin:22px 0 0;max-width:820px;text-transform:none;letter-spacing:.02em;line-height:1.5}
.dsx-cap b{color:var(--paper);font-weight:700}
.dsx-act{min-height:44px;padding:0 14px;border:2px solid var(--orange);background:none;color:var(--orange);font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.dsx-act:hover{background:var(--orange);color:var(--ink)}
.dsx-act:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.dsx-said{text-transform:none;letter-spacing:.02em;color:var(--paper)}
/* header plates */
.dsx-plate{height:48px;display:flex;justify-content:flex-start;background:#0B0B0B;padding:0 14px}
.dsx-plate.is-hover .cnl-sign .fg{transform:translate(2px,3px)}
.dsx-plate.is-hover .cnl-sign b,.dsx-plate.is-focus .cnl-sign b{transform:translate(1.64%,6%)}
.dsx-plate.is-focus .cnl-sign .fg{transform:translate(2px,3px)}
.dsx-plate.is-focus .cnl-sign{outline:3px solid #FFA800;outline-offset:3px}
/* the desktop header: a 1440 drawing scaled to the column, and a 1:1 crop of its centre */
.dsx-fit{position:relative;width:100%;overflow:hidden}
.dsx-fit-in{position:absolute;left:0;top:0;width:1440px;transform-origin:0 0}
.dsx-crop{position:relative;width:100%;height:70px;overflow:hidden}
.dsx-crop-in{position:absolute;left:50%;top:0;width:1440px;transform:translateX(-50%)}
.dsx-fit .cnl-d,.dsx-crop .cnl-d{display:block}
.dsx-fit .cnl-m,.dsx-crop .cnl-m{display:none}
.dsx-fit .cnl-nav,.dsx-crop .cnl-nav{gap:48px}
.dsx-fit .cnl-nav span,.dsx-crop .cnl-nav span{font-size:32px}
/* the phone frame: header on top, tab bar at the foot, the MORE sheet over both */
.dsx-ph{position:relative;width:390px;max-width:100%;height:720px;overflow:hidden;transform:translateZ(0);background:#0E0D0C;outline:1px solid var(--line)}
.dsx-ph .cnl-d{display:none}
.dsx-ph .cnl-m{display:flex}
.dsx-ph .ctb{display:flex}
.dsx-ph .ctb-ov:not([hidden]){display:flex}
.dsx-ph-pg{position:absolute;left:0;right:0;top:46%;margin:0;text-align:center;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--line-hi)}
/* sign in: the modal over a frame, the page without its viewport height, the small drawings */
.dsx-modal{position:relative;width:100%;height:800px;overflow:hidden;transform:translateZ(0);background:#0E0D0C}
.dsx-au .au-stage{min-height:0}
.dsx-mini .au{--auth-unit:.9px}
.dsx-aus{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:34px 30px}
.dsx-if{display:block;width:390px;max-width:100%;height:760px;border:0;outline:1px solid var(--line);background:#0E0D0C}
/* cookie banner: the real box, out of its fixed corner */
.dsx-ck .cck{position:relative;left:auto;bottom:auto;z-index:auto}
/* system pages: the two panels side by side where they fit */
.dsx-sys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:34px 40px}
.dsx-sys .sp-canvas{width:100%;padding:0 10px 10px 0}
.dsx-rules .sp-legal{padding:0}