/* Cade · Skeleton kit (window.CadeSkeleton, /lib/skeleton.js). Every loading ghost the pages use, ported
   from the handoff (frontend-v1/apps/web/app):
   - components/ui/AsyncStatus.tsx                SkeletonBlock, SkeletonLine, AsyncStatus
   - landing/components/CadeLandingHeroSkeleton   SkeletonPlate / SkeletonBar in the frame's paper, the duel seats on
                                                  PANEL_INNER, the shortcut plates as REAL silhouettes stroked #4A4A4A
   - landing/components/CadeLandingSectionsSkeleton  the feed band and arena ghosts
   - meme-madness/home/components/AllStarCardGhost   the All Stars seat ghost (the card's own box model)
   - meme-madness/markets/MemeMadnessMarketsBoardSkeleton  one role=status for a board of ghosts
   - profile/components/ProfileTicketSkeleton + profile.module.css   the ticket stub ghost, the stat plate ghost
   - design-system/lib/plate.module.css + field.module.css  the Foundation / Skeleton rule (a plate flattened)
   - leaderboard/components (LeaderboardReadNotice, .emptyBoard), profile .notice / .empty
   The motion is theirs: Tailwind's animate-pulse, 2s cubic-bezier(.4,0,.6,1), opacity 1 to .5 and back. It is the
   only skeleton animation their repo uses; reduced motion and ?static make every ghost static.
   Ours where the house rules ask: square corners (their SkeletonBlock rounds 8px), no em dash in any copy,
   type never under 10px on a phone. Every class is sk-*. */

:root{
  /* the shimmer: their animate-pulse */
  --sk-pulse:2s cubic-bezier(.4,0,.6,1) infinite;
  /* ink on the production dark ground (#0E0D0C), all from their source */
  --sk-bar:rgba(239,233,216,.18);        /* SkeletonLine, in the frame's paper at .18 */
  --sk-plate:rgba(239,233,216,.09);      /* SkeletonBlock / ghost plate face */
  --sk-plate-line:rgba(239,233,216,.20); /* SkeletonBlock border, ghost plate keyline */
  --sk-face-line:rgba(239,233,216,.14);  /* the card ghost's face keyline */
  --sk-stub:rgba(255,255,255,.10);       /* ticket ghost coin + lines on #141414 */
  --sk-name:rgba(255,255,255,.25);       /* the dossier's name bar */
  --sk-ink:rgba(0,0,0,.12);              /* a ghost value on a paper plate (statCardLoading) */
  --sk-ink-strong:rgba(11,11,11,.2);     /* a ghost value on a coloured plate (their black/20) */
  --sk-art-stroke:#4A4A4A;               /* a real silhouette while its labels load */
  --sk-art-fill:#11100F;
  --sk-pending:#4A4A4A;                  /* the stub's pending flap */
  --sk-flat:grayscale(1) brightness(0) invert(1) opacity(.14); /* the Foundation / Skeleton rule */
  --sk-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%);
  --sk-clip-compact: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%);
  --sk-hex:polygon(25% 3%,75% 3%,98% 50%,75% 97%,25% 97%,2% 50%);
  --sk-oct: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%);
}

/* ── the pulse ── */
@keyframes sk-pulse{50%{opacity:.5}}
.sk-pulse{animation:sk-pulse var(--sk-pulse)}
@media (prefers-reduced-motion:reduce){.sk-pulse{animation:none}}
.static .sk-pulse,.sk-still .sk-pulse,.sk-still.sk-pulse{animation:none}

/* ── primitives: SkeletonLine, SkeletonBlock (the landing ink), a ghost on a paper / coloured plate ── */
.sk-bar{display:block;min-width:0;background:var(--sk-bar);border-radius:2px}
.sk-block{display:block;min-width:0;box-sizing:border-box;border:1px solid var(--sk-plate-line);background:var(--sk-plate)}
.sk-ink{display:block;min-width:0;background:var(--sk-ink)}
.sk-ink-strong{display:block;min-width:0;background:var(--sk-ink-strong)}
.sk-sr{position:absolute!important;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the Foundation / Skeleton rule: no separate drawing, the plate's own silhouette, flattened */
[data-sk-flat]{filter:var(--sk-flat)!important}
[data-sk-flat]>*{visibility:hidden}

/* ── 1. the card ghost (AllStarCardGhost), on the box model of the homepage card (.acard: 400/310,
      padding 9cqw, the 24cqw identity band, the 720 branch) so nothing reflows when the card lands ── */
.sk-card{aspect-ratio:400/310;width:100%;min-width:0;display:block;position:relative;container-type:inline-size}
.sk-card .sk-c-sh{position:absolute;inset:2.5cqw 0 0 2.5cqw;background:#000;clip-path:var(--sk-clip)}
.sk-card .sk-c-fc{position:absolute;inset:0 2.5cqw 2.5cqw 0;background:var(--sk-plate);box-shadow:inset 0 0 0 1px var(--sk-face-line);clip-path:var(--sk-clip)}
.sk-card .sk-c-in{position:absolute;inset:0 2.5cqw 2.5cqw 0;z-index:1;display:flex;flex-direction:column;min-width:0;padding:9cqw 9.2cqw 9cqw;box-sizing:border-box}
.sk-card .sk-c-in>*{flex:none}
.sk-card .sk-c-blk{display:block;min-width:0;background:var(--sk-bar)}
.sk-card .sk-c-pl{display:block;min-width:0;background:var(--sk-plate);box-shadow:inset 0 0 0 1px var(--sk-plate-line)}
.sk-card .sk-c-id{display:flex;align-items:center;gap:3.4cqw;min-width:0;height:24cqw}
.sk-card .sk-c-med{flex:none;width:24cqw;height:24cqw;clip-path:var(--sk-oct)}
.sk-card .sk-c-cp{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:2.1cqw;min-width:0}
.sk-card .sk-c-clk{flex:none;width:18.5cqw;height:12.35cqw;margin-right:1.4cqw}
.sk-card .sk-c-q{margin-top:auto;width:78%;height:7.2cqw}
.sk-card .sk-c-ft{display:flex;align-items:baseline;min-width:0;margin-top:3.4cqw}
.sk-card .sk-c-meta{width:44%;height:2.45cqw}
.sk-card .sk-c-act{display:flex;align-items:center;gap:2.6cqw;margin-top:4.4cqw}
.sk-card .sk-c-split{flex:1;height:9.6cqw;min-height:22px}
.sk-card .sk-c-bolt{flex:none;width:9.6cqw;height:9.6cqw;border-radius:50%}
@media (max-width:720px){
  .sk-card{min-height:258px}
  .sk-card .sk-c-in{padding:max(22px,9cqw) max(22px,9.2cqw) max(22px,9cqw)}
  .sk-card .sk-c-id{gap:max(9px,3.4cqw);height:max(64px,21cqw)}
  .sk-card .sk-c-med{width:max(64px,21cqw);height:max(64px,21cqw)}
  .sk-card .sk-c-cp{gap:max(6px,2.1cqw)}
  .sk-card .sk-c-clk{width:max(54px,18.5cqw);height:max(39px,12.35cqw)}
  .sk-card .sk-c-q{height:max(24px,7.2cqw)}
  .sk-card .sk-c-meta{height:max(10px,2.45cqw)}
  .sk-card .sk-c-split{height:max(32px,9.6cqw);min-height:32px}
  .sk-card .sk-c-bolt{width:max(32px,9.6cqw);height:max(32px,9.6cqw)}
}

/* ── 2. a board of card ghosts: one role=status for the board (their MarketsBoardSkeleton) ── */
.sk-board{display:grid;grid-template-columns:repeat(var(--sk-cols,4),minmax(0,1fr));gap:var(--sk-gap,28px 24px);list-style:none;margin:0;padding:0}
.sk-board>li{min-width:0;list-style:none}
@media (max-width:1180px){.sk-board{--sk-cols:2}}
@media (max-width:720px){.sk-board{grid-template-columns:minmax(0,1fr);gap:24px}}

/* ── 3. the hero ghost (CadeLandingHeroSkeleton, laid out in flow): the panel is known, the copy that is static
      prints for real, the duel seats ride their PANEL_INNER clips, the shortcut plates are the real HERO_CTA
      silhouettes stroked #4A4A4A ── */
.sk-hero{position:relative;min-width:0;color:#EFE9D8}
.sk-hero .sk-h-sh{position:absolute;inset:0;transform:translate(10px,10px);background:#000;clip-path:var(--sk-clip)}
.sk-hero .sk-h-fc{position:absolute;inset:0;background:#1A1816;box-shadow:inset 0 0 0 2px #2E2A26;clip-path:var(--sk-clip)}
.sk-hero .sk-h-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px 36px;padding:clamp(28px,3.4vw,48px) clamp(24px,3.4vw,52px) clamp(28px,3vw,44px)}
.sk-hero .sk-h-copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.sk-hero .sk-h-kick{margin:0;font-family:"Futura PT Cond","Barlow Condensed",sans-serif;font-weight:500;font-style:oblique;font-synthesis:none;font-size:clamp(18px,1.8vw,26px);letter-spacing:.04em;line-height:1;text-transform:uppercase;color:#FFA800}
.sk-hero .sk-h-title{margin:0;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-style:italic;font-weight:800;font-size:clamp(44px,6.2vw,96px);line-height:.92;text-transform:uppercase;color:#EFE9D8;text-shadow:clamp(6px,.8vw,12px) clamp(5px,.6vw,8px) 0 #000}
.sk-hero .sk-h-title span{display:block}
.sk-hero .sk-h-live{display:flex;align-items:center;gap:14px}
.sk-hero .sk-h-stats{display:flex;gap:clamp(28px,4vw,64px);margin-top:auto;padding-top:18px}
.sk-hero .sk-h-stat{display:grid;gap:8px}
.sk-hero .sk-h-duel{position:relative;min-height:clamp(260px,28vw,440px)}
.sk-hero .sk-h-seat{position:absolute;top:0;bottom:0}
.sk-hero .sk-h-seat.o{left:0;width:46.455%;clip-path:polygon(18.615% 0.685%,97.244% 0.685%,89.560% 44.606%,92.517% 47.260%,84.567% 98.373%,1.118% 98.373%)}
.sk-hero .sk-h-seat.v{left:46.887%;width:53.113%;clip-path:polygon(12.175% 0.685%,97.684% 0.685%,92.982% 98.373%,0.947% 98.373%,7.918% 47.346%,5.333% 44.606%)}
.sk-hero .sk-h-seat>.sk-block{width:100%;height:100%}
.sk-hero .sk-h-tiles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.sk-hero .sk-h-tile{position:relative;aspect-ratio:420/110;min-width:0}
.sk-hero .sk-h-tile svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sk-hero .sk-h-tile .sh{transform:translate(6px,6px)}
.sk-hero .sk-h-tile .tl{position:absolute;left:7%;right:30%;top:24%;display:grid;gap:10%;height:56%}
@media (max-width:720px){
  .sk-hero .sk-h-in{grid-template-columns:minmax(0,1fr);padding:28px 22px 30px}
  .sk-hero .sk-h-sh{transform:translate(6px,6px)}
  .sk-hero .sk-h-duel{min-height:0;aspect-ratio:900/1160;max-height:340px}
  .sk-hero .sk-h-tiles{display:none}  /* their phone hero stopped drawing the three plates; so does its ghost */
}

/* ── 4. the chart ghost (MarketLiveChart, pending): the real plate, their "Loading market history" read,
      the price rail and the time axis as SkeletonLines ── */
.sk-chart{position:relative;height:var(--sk-chart-h,clamp(260px,22vw,420px));min-width:0;isolation:isolate}
.sk-chart .sk-ch-sh,.sk-chart .sk-ch-fc{position:absolute;inset:0;clip-path:var(--sk-clip)}
.sk-chart .sk-ch-sh{transform:translate(6px,6px);background:#0B0B0B}
.sk-chart .sk-ch-fc{background:#111111}
.sk-chart .sk-ch-in{position:absolute;inset:22px 22px 18px 26px;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:auto minmax(0,1fr) 12px;gap:12px 14px}
.sk-chart .sk-ch-read{grid-column:1/-1;margin:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,234,217,.62)}
.sk-chart .sk-ch-field{position:relative;min-height:0;border-bottom:1px dashed rgba(240,234,217,.12)}
.sk-chart .sk-ch-field::before{content:"";position:absolute;inset:0;opacity:.07;background-image:radial-gradient(circle at center,#EFE9D8 0 1px,transparent 1.4px);background-size:14px 14px}
.sk-chart .sk-ch-rail{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;min-height:0}
.sk-chart .sk-ch-rail .sk-bar{width:56px;height:10px}
.sk-chart .sk-ch-time{grid-column:1/2;display:flex;justify-content:space-between}
.sk-chart .sk-ch-time .sk-bar{width:38px;height:10px}

/* ── 5. the ticker ghost (CadeLandingFeed band, sections skeleton): the band art, the label and three runs ── */
.sk-feed{position:relative;display:flex;align-items:center;gap:16px;height:72px;padding:0 24px 0 30px;box-sizing:border-box;min-width:0;isolation:isolate}
.sk-feed svg{position:absolute;left:0;top:0;width:calc(100% - 6px);height:calc(100% - 3px);overflow:visible;z-index:-1;pointer-events:none}
.sk-feed .sh{fill:#000;transform:translate(14px,14px)}
.sk-feed .fc{fill:#121212;stroke:#4A4A4A;stroke-width:2}
.sk-feed svg.m{display:none}
.sk-feed .sk-f-lbl{flex:none;width:200px;height:20px}
.sk-feed .sk-f-run{flex:1 1 0;min-width:0;height:16px}
@media (max-width:720px){
  .sk-feed{height:56px;gap:12px;padding:0 14px 0 16px}
  .sk-feed svg.d{display:none}.sk-feed svg.m{display:block}
  .sk-feed .sh{transform:translate(5px,5px)}
  .sk-feed .sk-f-lbl{width:38px;height:30px}
  .sk-feed .sk-f-run:last-child{display:none}
}

/* ── 6. row ghosts: SoccerSkeletonRows (the 42 / 1fr / 48 rhythm) and the generic list row ── */
.sk-rows{display:grid;gap:8px}
.sk-row{display:grid;grid-template-columns:42px minmax(0,1fr) 48px;align-items:start;gap:8px;padding:8px;border:1px solid #343434;background:#0B0B0B}
.sk-row .sk-r-mid{display:grid;gap:8px}
.sk-row .sk-bar{height:12px}

/* ── 7. the ticket ghost (ProfileTicketSkeleton): the stub on its DS_PANEL_CLIP over a 6px black copy, the
      hex coin and three lines at .10, the grey pending flap. Their page ticket pulses at 1.2s ── */
.sk-stub{position:relative;min-width:0}
.sk-stub .sk-s-sh{position:absolute;inset:0 6px 6px 0;background:#000;clip-path:var(--sk-clip);transform:translate(6px,6px);pointer-events:none}
.sk-stub .sk-s-fc{position:relative;display:flex;align-items:stretch;min-height:156px;background:#141414;clip-path:var(--sk-clip);overflow:hidden}
.sk-stub .sk-s-body{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:20px 14px 20px 20px}
.sk-stub .sk-s-coin{flex:none;display:block;width:clamp(56px,5vw,72px);aspect-ratio:1;background:var(--sk-stub);clip-path:var(--sk-hex)}
.sk-stub .sk-s-lines{flex:1;display:grid;gap:10px;min-width:0}
.sk-stub .sk-s-line{display:block;height:12px;background:var(--sk-stub)}
.sk-stub .sk-s-line[data-size=meta]{width:46%}
.sk-stub .sk-s-line[data-size=title]{width:78%;height:20px}
.sk-stub .sk-s-line[data-size=fields]{width:64%}
.sk-stub .sk-s-rs{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)}
.sk-stub .sk-s-rf{position:absolute;inset:0;background:var(--sk-pending);clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%)}
@media (max-width:639px){
  .sk-stub .sk-s-sh,.sk-stub .sk-s-fc{clip-path:var(--sk-clip-compact)}
  .sk-stub .sk-s-rs{width:108px}.sk-stub .sk-s-rf{clip-path:polygon(6px 0,100% 0,100% 100%,6px 100%,0 50%)}
}
.sk-stubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:1023px){.sk-stubs{grid-template-columns:1fr}}

/* ── 8. AsyncStatus: loading / refreshing / stale / error, one strip in mono 10px caps (11 here: the floor) ── */
.sk-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:1px solid #343434;background:#141414;color:#8C8C8C;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.sk-status[data-status=stale]{border-color:rgba(255,168,0,.35);background:rgba(255,168,0,.10);color:#FFA800}
.sk-status[data-status=error]{border-color:rgba(234,42,70,.4);background:rgba(234,42,70,.10);color:#EA2A46}
.sk-status .sk-st-at{margin-left:8px;opacity:.7}
.sk-status button{position:relative;padding:4px 8px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 35%,transparent);background:none;color:inherit;font:inherit;font-size:11px;cursor:pointer;border-radius:2px}
.sk-status button::after{content:"";position:absolute;inset:-10px -6px}
.sk-status button:hover{background:currentColor}.sk-status button:hover span{color:#0B0B0B}
.sk-status button:focus-visible{outline:3px solid #FFA800;outline-offset:3px}

/* ── 9. the read notice (LeaderboardReadNotice): the red band that speaks when the board cannot ── */
.sk-notice{position:relative;z-index:3;width:100%;border-top:3px solid #000;border-bottom:3px solid #000;background:#EA2A46;color:#000}
.sk-notice .sk-n-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 24px}
.sk-notice p{margin:0;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-size:15px;font-weight:800;font-style:italic;line-height:1.15;text-transform:uppercase}
.sk-notice button{position:relative;flex:none;min-height:44px;padding:8px 16px;border:3px solid #000;background:#EFE9D8;color:#000;box-shadow:3px 3px 0 #000;cursor:pointer;
  font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-size:14px;font-weight:800;font-style:italic;line-height:1;text-transform:uppercase;transition:background-color .15s}
.sk-notice button:hover{background:#FAF424}
.sk-notice button[aria-busy=true]{cursor:progress;opacity:.7}
.sk-notice button:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
@media (max-width:639px){.sk-notice .sk-n-in{padding:12px 16px}.sk-notice p{font-size:13px}}

/* ── 10. empty (.emptyBoard / profile .empty) and unavailable (profile .notice) ── */
.sk-empty,.sk-unavail{display:grid;place-items:center;align-content:center;min-height:var(--sk-empty-h,220px);padding:40px 24px;box-sizing:border-box;text-align:center}
.sk-empty{border:3px dashed rgba(255,255,255,.15)}
/* the closed-state tape (2026-10-03): the CLOSED shutter's hazard band from Scotty's explainer, short, over the title.
   It marks "nothing open here", once per empty state; the same band as /lib/category.css .ci-hazard */
.sk-empty::before{content:"";display:block;width:72px;height:10px;margin:0 0 18px;box-sizing:border-box;border-top:1.5px solid #0B0B0B;border-bottom:1.5px solid #0B0B0B;
  background:repeating-linear-gradient(-45deg,#FAF424 0 6px,#0B0B0B 6px 12px);box-shadow:3px 3px 0 #000}
.sk-unavail{border:3px solid #000;background:#141414;box-shadow:6px 6px 0 #000;padding:64px 24px}
.sk-empty .sk-e-t,.sk-unavail .sk-e-t{margin:0;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-size:26px;font-style:italic;font-weight:900;line-height:1;text-transform:uppercase;text-shadow:3px 3px 0 #000;color:rgba(255,255,255,.5)}
.sk-unavail .sk-e-t{font-size:28px;color:#EA2A46}
.sk-empty .sk-e-c{max-width:44ch;margin:12px 0 0;font-family:"Futura PT",system-ui,sans-serif;font-size:15px;line-height:1.45;color:rgba(255,255,255,.6)}
.sk-unavail .sk-e-c{max-width:42ch;margin:12px 0 0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* ── the gate: the ghost holds the place until the real content is ready (CadeSkeleton.gate) ── */
html.sk-loading [data-sk-real]{display:none!important}
html:not(.sk-loading) [data-sk-ghost]{display:none!important}
html.sk-reveal [data-sk-real]{animation:sk-in .18s cubic-bezier(0,0,.2,1)}
@keyframes sk-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){html.sk-reveal [data-sk-real]{animation:none}}
.static [data-sk-real]{animation:none!important}