/* ═══════════════════════════════════════════════════════════════════════════════
   CADE DUEL FRAME (the single market page's parts). Markup: /lib/duel-frame.js (window.CadeDuel).
   Ported 1:1 from frontend-v1 components/market/duel-frame/duel-frame.module.css + duel-frame-kit.tsx
   (DuelPlate, DuelCard, DuelKicker, DuelRoundClock), MarketDuelPanel.tsx (the chrome row, the header,
   the money band, the volume stats), MarketActivityPanel.tsx, MarketTermsPanel.tsx, ArcadeMarketBaseline.tsx
   and the coin-empty panel (meme-madness/market/components/MemeMadnessCoinEmptyState.module.css).
   The ticket itself is the DS port of their QuickPredictControls (.qp-* in /ds/ds.css), the round clock the
   DS .rclk, the split the DS .ssb, the plot /lib/live-chart.js. Loads after /ds/ds.css.
   Silhouettes: DS_PANEL_CLIP / DS_PANEL_CLIP_COMPACT (quick-predict-presentation.ts), never redrawn.
   Ours, house rules: square corners, the orange focus ring, 44px targets, nothing under 10px on a phone,
   no em dash (their dash placeholder reads "--").
   ═══════════════════════════════════════════════════════════════════════════════ */
.df{--df-ground:#0E0D0C;--df-panel:#161514;--df-paper:#EFE9D8;--df-ink:#141414;--df-orange:#FFA800;--df-yellow:#FAF424;
  --df-green:#91BB4F;--df-red:#EA2A46;--df-line:rgba(255,255,255,.12);--df-faint:rgba(255,255,255,.55);
  --df-shout:"Barlow Condensed",Impact,sans-serif;--df-mono:"JetBrains Mono",ui-monospace,monospace;--df-read:"Futura PT",system-ui,sans-serif;
  --df-rail-gap:clamp(20px,1.8vw,30px);--df-label-gap:clamp(12px,1.1vw,18px);
  --df-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%);
  --df-clip-c: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%);
  /* DS_PANEL_TEAR, DS_PANEL_TEAR_COMPACT */
  --tl:14px;--tr:18px;--tt:10px;--tb:8px;--tlc:18px;--trc:8px;--ttc:5px;--tbc:4px;
  position:relative;color:var(--df-paper)}
.df *{box-sizing:border-box}
.df p,.df h1,.df h2,.df h3,.df dl,.df dd{margin:0}
.df-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}

/* ── the torn plate (DuelPlate) and the rail card (DuelCard) ── */
.df-plate,.df-card{position:relative;min-width:0}
.df-psh,.df-csh{position:absolute;inset:0;background:#000;pointer-events:none;clip-path:var(--df-clip)}
.df-psh{transform:translate(9px,10px)}
.df-csh{transform:translate(6px,7px)}
.df-pfc,.df-cfc{position:relative;background:var(--df-panel);clip-path:var(--df-clip)}
.df-pfc{--air:clamp(12px,1.3vw,22px);padding:calc(var(--tt) + var(--air)) calc(var(--tr) + clamp(8px,1vw,22px)) calc(var(--tb) + clamp(18px,2vw,32px)) calc(var(--tl) + clamp(4px,.6vw,12px))}
.df-cfc{padding:calc(var(--tt) + 10px) calc(var(--tr) + 10px) calc(var(--tb) + 14px) calc(var(--tl) + 8px)}

/* ── type ── */
.df .df-kicker{display:block;margin:0 0 var(--df-label-gap);font-family:var(--df-shout);font-weight:600;font-style:normal;font-size:13px;line-height:1.1;text-transform:uppercase;white-space:nowrap;color:var(--df-orange)}
.df .df-kicker[data-tone=yellow]{color:var(--df-yellow)}
.df-title{font-family:var(--df-shout);font-weight:700;font-style:italic;line-height:1.05;text-transform:uppercase;overflow-wrap:anywhere;font-size:clamp(22px,2.4vw,38px);color:var(--df-paper)}
.df-mlabel{font-family:var(--df-mono);font-weight:500;font-size:10px;letter-spacing:.08em;line-height:1.2;text-transform:uppercase}

/* ── the chrome row: BACK left, the lane tabs, SHARE right (MARKET_ROUTE_CHROME_CONTROL) ── */
.df-chrome{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:calc(-1 * var(--air,0px) + 4px);margin-bottom:clamp(10px,1.1vw,16px)}
.df-ctl{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;margin:0 -8px;padding:0 8px;border:0;background:transparent;cursor:pointer;
  font-family:var(--df-mono);font-size:12px;font-weight:600;letter-spacing:.025em;text-transform:uppercase;color:#A1A1AA;text-decoration:none;transition:color .15s}
.df-ctl:hover{color:var(--df-paper)}
.df-ctl svg{width:16px;height:16px;flex:none}
.df-ctl:focus-visible,.df-lanes .ntab:focus-visible{outline:3px solid var(--df-orange);outline-offset:3px}
.df-ctls{display:flex;align-items:center;gap:16px}
/* the lane tabs: the one tab system (the DS .ntab in the shared .cfilter, /lib/category.css), at the chrome's size */
.df-lanes.cfilter{--cf-h:44px;gap:6px;margin:0 auto}
.df-lanes .ntab{min-width:56px}

/* ── the header (desktop: seat | question | round clock, then the reading) ── */
.df-head{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(10px,1.1vw,16px)}
.df-seat{flex:none;display:block;width:104px;height:104px;margin-inline:-8px}
.df-seat svg{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 0 rgb(0 0 0 / 35%))}
.df-id{min-width:0;flex:1}
.df-sub{display:none;margin-top:6px;align-items:center;flex-wrap:wrap;gap:.5em;font-family:var(--df-mono);font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--df-faint)}
.df-sub strong{font-weight:600;color:var(--df-paper)}
.df-lane{display:inline-flex;align-items:center;border:1.5px solid #0B0B0B;background:var(--df-yellow);color:var(--df-ink);font-family:var(--df-shout);font-style:italic;font-weight:800;font-size:12px;letter-spacing:.08em;line-height:1;padding:.34em .5em .3em;white-space:nowrap}
.df-head .rclk{flex:0 1 auto;margin-right:8px;align-self:flex-start;margin-top:14px}
.df-head .rclk .rface{min-width:150px}
/* ArcadeMarketBaseline: MARKET CAP (or PRICE · NOW), the figure, the delta plate */
.df-base{display:flex;flex-wrap:wrap;align-items:center;gap:4px clamp(10px,1.1vw,20px);margin-top:6px;text-transform:uppercase}
.df-base-l{font-family:var(--df-shout);font-style:italic;font-weight:400;font-size:clamp(28px,2.7vw,46px);line-height:1;color:rgba(240,234,217,.45)}
.df-base-v{font-family:var(--df-shout);font-style:italic;font-weight:800;font-size:clamp(28px,2.7vw,46px);line-height:1;color:var(--df-paper);font-variant-numeric:tabular-nums}
.df-delta{display:inline-flex;align-items:center;gap:6px;border:2px solid #000;padding:5px 10px;font-family:var(--df-shout);font-style:italic;font-weight:900;font-size:clamp(13px,1.08vw,17px);line-height:1;color:#000;background:#91BB4F;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.df-delta[data-direction=below]{background:#EA2A46;color:#fff}

/* ── sections (panelSection) ── */
.df-sec+.df-sec{margin-top:clamp(16px,1.8vw,26px);padding-top:clamp(16px,1.8vw,26px);border-top:2px solid var(--df-line)}
.df-sec[data-flush=chart]{margin-top:clamp(8px,.9vw,12px);padding-top:0;border-top:0}
.df-sec[data-flush=chart]~.df-sec{margin-top:clamp(22px,2vw,28px);padding-top:0;border-top:0}
.df-sec[data-only=compact]{display:none}
.df-chart{position:relative;height:clamp(200px,26vw,360px)}
.df-chart>.lc{position:absolute;inset:0}

/* ── the money band: PREDICTION ODDS | the volumes over MARKET ACTIVITY (40 / 60) ── */
.df-money{display:grid;gap:clamp(20px,2.4vw,44px);align-items:stretch;margin-left:10px;width:calc(100% - 10px)}
@media (min-width:900px){.df-money{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}}
.df-odds{--lco-h:clamp(150px,13.6vw,197px)}
.df-odds .lco-v{text-transform:uppercase}
.df-moneyR{container-type:inline-size}
.df-vol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@container (max-width:470px){.df-vol{grid-template-columns:repeat(2,minmax(0,1fr))}}
.df-vol dt{font-family:var(--df-mono);font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--df-faint)}
.df-vol dd{margin:4px 0 0;font-family:var(--df-mono);font-weight:700;font-size:clamp(18px,1.7vw,26px);line-height:1.1;font-variant-numeric:tabular-nums;color:var(--df-paper)}

/* ── MarketActivityPanel ── */
.df-act{width:100%;margin-top:12px;min-width:0}
.df-act-t{margin:0;padding-bottom:6px;font-family:var(--df-mono);font-size:10px;font-weight:700;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;color:var(--df-orange)}
.df-act table{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--df-mono);font-size:10px;line-height:1.2;letter-spacing:.06em;text-align:left;text-transform:uppercase}
.df-act th{padding:5px 0;border-bottom:1px solid rgb(255 255 255 / 12%);color:var(--df-faint);font-weight:500}
.df-act td{padding:6px 0;border-bottom:1px solid rgb(255 255 255 / 7%);color:var(--df-paper);font-weight:700;white-space:nowrap}
.df-act th:first-child,.df-act td:first-child{width:50%}
.df-act th:nth-child(2),.df-act td:nth-child(2){width:25%}
.df-act th:last-child,.df-act td:last-child{width:25%;text-align:right;font-variant-numeric:tabular-nums}
.df-act td:first-child{max-width:0;overflow:hidden;padding-right:10px;text-overflow:ellipsis}
.df-act td[data-side=higher]{color:var(--df-green)}.df-act td[data-side=lower]{color:var(--df-red)}
.df-act tr.df-new td{animation:df-in .36s cubic-bezier(.16,1,.3,1)}
@keyframes df-in{from{background:rgba(250,244,36,.12)}to{background:transparent}}
.df-act-e{display:grid;min-height:72px;margin:0;place-items:center;font-family:var(--df-mono);font-size:10px;font-weight:500;letter-spacing:.06em;line-height:1.4;text-align:center;text-transform:uppercase;color:var(--df-faint)}

/* ── the ticket: their QuickPredictControls (.qp-*), stacked as MarketPredictTicket ── */
.df-ticket{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,18px)}
.df-block{min-height:1.25rem;font-family:var(--df-mono);font-size:.72rem;font-weight:700;line-height:1.25rem;letter-spacing:.08em;text-transform:uppercase;color:var(--df-paper)}
.df-block[data-tone=signin]{color:var(--df-yellow)}
.df-ticket .qp-amountChip{min-height:44px}.df-ticket .qp-amountChipFace{min-height:44px}
.df-ticket .qp-amountBox{min-height:57px}
.df-ticket .qp-amountInput{min-height:44px}
.df-ticket .qp-amountInput::placeholder{color:rgb(0 0 0 / .35);opacity:1}
.df-ticket .qp-cta{min-height:52px}
.df-ticket .qp-paysChipFace [data-pays]{font-weight:700}
.df-ticket .qp-payoutValue[data-set]{color:var(--df-paper)}
/* YOUR POSITIONS (the rail band under the ticket) */
.df-band+.df-band{margin-top:var(--df-rail-gap)}
.df .df-band .df-kicker.sm{margin-bottom:6px;font-size:14px}
.df-pos-e{font-family:var(--df-mono);font-size:10px;font-weight:500;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:var(--df-faint)}

/* ── MarketTermsPanel (rail): the compact rule, the keywords in their colours ── */
.df-terms{display:grid;gap:clamp(6px,.6vw,10px);padding-left:8px}
.df-terms p{max-width:70ch;font-family:var(--df-read);font-size:13px;font-weight:500;line-height:1.45;color:var(--df-faint)}
.df-terms strong{font-weight:800;color:var(--df-yellow)}
.df-terms b{font-weight:800;color:inherit}
.df-terms .k{font-family:var(--df-mono);font-size:.9em;font-weight:800;letter-spacing:.08em}
.df-terms .k.y{color:var(--df-green)}.df-terms .k.n{color:var(--df-red)}
.df-terms .fine{margin-top:4px;font-size:11px;font-weight:400;color:var(--df-orange)}

/* ── the page grid: the reading column + the rail (detailSplit) ── */
.df-split{display:grid;gap:clamp(14px,1.6vw,24px);align-items:start}
@media (min-width:1080px){.df-split{grid-template-columns:minmax(0,1fr) minmax(330px,.42fr)}}
.df-col{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,24px);min-width:0}
.df-rail{align-self:stretch;min-width:0}
.df-rail>*+*{margin-top:var(--df-rail-gap)}
.df-rail .df-cfc{padding-left:calc(var(--tl) + 8px)}

/* ── the coin-empty panel (MemeMadnessCoinEmptyState): seat | text, then the one action ── */
.df-empty{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:640px}
.df-empty-p{display:flex;align-items:center;gap:18px;min-width:0}
.df-empty .df-seat{width:96px;height:96px;margin:0}
.df-empty-k{font-family:var(--df-shout);font-weight:600;font-size:13px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--df-orange)}
.df-empty-t{margin-top:4px;font-family:var(--df-shout);font-weight:800;font-style:italic;font-size:clamp(20px,2vw,26px);line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;color:var(--df-paper)}
.df-empty-tk{margin-top:3px;font-family:var(--df-shout);font-weight:800;font-style:italic;font-size:clamp(16px,1.6vw,19px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;color:var(--df-orange);overflow-wrap:anywhere}
.df-empty-c{margin-top:7px;max-width:min(100%,38rem);font-family:var(--df-read);font-size:14px;line-height:1.5;color:#A1A1A1}
.df-empty-s{margin-top:10px;font-family:var(--df-mono);font-weight:700;font-size:13px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--df-orange)}
.df-slat{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-top:18px;width:200px;max-width:100%;height:44px;text-decoration:none;transition:transform .15s cubic-bezier(0,0,.2,1)}
.df-slat i{position:absolute;pointer-events:none;background:center/100% 100% no-repeat}
.df-slat i:first-child{left:3px;top:4px;width:100%;height:100%;background-image:url(/assets/status/cta-shadow.svg)}
.df-slat i:nth-child(2){left:-2px;top:-2px;width:calc(100% + 4px);height:calc(100% + 4px);background-image:url(/assets/status/cta-face.svg)}
.df-slat span{position:relative;font-family:var(--df-shout);font-weight:800;font-style:italic;font-size:15px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--df-ink)}
.df-slat:hover,.df-slat:focus-visible{transform:translate(-2px,-2px)}.df-slat:active{transform:translate(1px,1px)}
.df-slat:focus-visible{outline:3px solid var(--df-orange);outline-offset:4px}
/* the watch panel under it: LIVE TOKEN FEED, KEEP WATCHING $X, WATCH ONLY, the plot or its notice */
.df-watch{margin-top:clamp(18px,2vw,28px);border:2px solid #000;background:#11100F}
.df-watch-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--df-line)}
.df-watch-k{font-family:var(--df-mono);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--df-orange)}
.df-watch-t{margin-top:6px;font-family:var(--df-shout);font-weight:800;font-style:italic;font-size:clamp(20px,2vw,26px);line-height:1;text-transform:uppercase}
.df-watch-tag{flex:none;border:1.5px solid var(--df-orange);padding:6px 8px;font-family:var(--df-mono);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--df-orange)}
.df-watch-b{display:grid;place-items:center;min-height:clamp(220px,26vw,360px);padding:20px;font-family:var(--df-mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-align:center;text-transform:uppercase;color:rgba(240,234,217,.8)}

/* ── compact (< 1080): the phone frame, the shallower tear ── */
@media (max-width:1079px){
  .df-psh,.df-pfc,.df-csh,.df-cfc{clip-path:var(--df-clip-c)}
  .df-pfc{--air:8px;padding:calc(var(--ttc) + var(--air)) calc(var(--trc) + 6px) calc(var(--tbc) + 12px) calc(var(--tlc) + 6px)}
  .df-cfc,.df-rail .df-cfc{padding:calc(var(--ttc) + 8px) calc(var(--trc) + 8px) calc(var(--tbc) + 12px) calc(var(--tlc) + 8px)}
  .df-sec+.df-sec{margin-top:12px;padding-top:12px}
  .df-sec[data-only=compact]{display:block}
  .df-sec[data-only=wide],.df-head .rclk,.df-base{display:none}
  .df-chrome{flex-wrap:wrap;gap:4px 8px;margin-top:calc(-1 * var(--air,0px));margin-bottom:6px}
  .df-chrome .df-ctls{gap:4px;margin-left:auto}
  .df-chrome .df-ctls .df-ctl{margin:0 -8px 0 0}
  .df-ctl{padding:0 10px}.df-ctl svg{width:22px;height:22px}
  .df-ctl .df-word{display:none}
  .df-lanes.cfilter{order:3;flex-basis:100%;margin:0;justify-content:flex-start;--cf-h:44px}
  .df-head{gap:8px}
  .df-seat{width:79px;height:79px;margin-inline:-4px}
  .df-title{font-size:22px;line-height:1.15}
  .df-sub{display:flex;font-size:10px}
  .df-chart{height:264px}
  .df-col{gap:10px;padding-bottom:44px}
  .df-act tbody tr:nth-child(n+4){display:none}
  .df-act{margin-top:0}
  /* the phone floor: nothing under 10px */
  .df-ticket .qp-payoutLabel{font-size:10px}
  .df-ticket .qp-balance{font-size:10.5px}
  .df-empty-p{gap:14px}.df-empty-t{font-size:20px}.df-slat{margin-top:14px;width:min(200px,100%)}
}
@media (prefers-reduced-motion:reduce){.df-slat{transition:none}.df-act tr.df-new td{animation:none}}