/* Cade · Live markets (route /markets/): the one board for every category. A live HTML page on the shared parts
   (/lib/category.js + category.css): the section head, the live predictions band, the board filter, the quiet
   search and sort, the dark All Stars card, LOAD MORE and the round sheet. This file only lays them out.
   Wired like /home: one product header + footer, the motion ground, ?static. */
body.mk{background:#0E0D0C;color:#EFE9D8;overflow-x:hidden}
.mk main{overflow-x:clip;position:relative;z-index:0}
.hfoot{position:relative;z-index:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the one product header + footer (the chrome rule), as on /home */
#hnav{position:sticky;top:0;z-index:70}
.hnav .cnl-d{transition:background-color .25s}
.hnav.stuck .cnl-d{background:rgba(11,11,11,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.hnav.stuck .cnl-m{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (min-width:961px) and (max-width:1180px){#hnav .cnl-nav{gap:26px}#hnav .cnl-nav span{font-size:26px}}
.hfoot{background:#101010}
.hfoot svg{display:block;width:100%;height:auto;margin:0 auto;overflow:visible}
#footD{max-width:1440px}#footM{display:none}
@media (max-width:1023px){#footD{display:none}#footM{display:block;max-width:600px}}

/* the column: their 1440 frame, margin 40 (16 on a phone), at most 1360 of content */
.mk-wrap{width:100%;max-width:1440px;margin:0 auto;padding:40px 40px 0;box-sizing:border-box}
@media (max-width:720px){.mk-wrap{padding:24px 16px 0}}

/* the hero: the category's own top (CadeCategory.hero, styles in /lib/category.css), swapped with the filter */
.mk-head{margin:0 0 56px}
@media (max-width:720px){.mk-head{margin-bottom:44px}}

/* the live predictions band */
.mk-feed{margin:0 0 48px}
@media (max-width:720px){.mk-feed{margin-bottom:36px}}

/* the bar: the filter on the left, search and sort on the right */
.mk-bar{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin:0 0 36px}
.mk-filter .cfilter{--cf-h:52px}
.mk-ctl{display:flex;align-items:center;gap:18px}
@media (max-width:1180px){.mk-bar{flex-direction:column;align-items:stretch}.mk-ctl .csearch{flex:1 1 auto;width:auto}}
@media (max-width:720px){
  .mk-bar{gap:16px;margin-bottom:28px}
  .mk-filter{overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .mk-filter::-webkit-scrollbar{display:none}
  .mk-filter .cfilter{--cf-h:42px;gap:0;width:max-content;min-width:100%;justify-content:space-between}
  .mk-filter .cfilter .ntab{padding:0 7px;gap:4px;min-height:44px}
  .mk-ctl{gap:12px}
  .mk-ctl .csearch{min-width:0;height:50px}
  .mk-ctl .csort{flex:none;width:170px;height:50px}
  .mk-ctl .csort .cs-l{display:none}
  .mk-ctl .csort select{padding:0 21% 4px 16%;font-size:17px}
}

/* the grid: four across at 1440, the card's own aspect, their 36 / 44 rhythm */
.mk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 36px}
@media (max-width:1180px){.mk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}}
@media (max-width:900px){.mk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}}
@media (max-width:560px){.mk-grid{grid-template-columns:minmax(0,1fr);gap:28px}}
.mk-grid .acard.in{animation:mkIn 280ms cubic-bezier(.2,.8,.2,1) both}
@keyframes mkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.mk-empty{padding:48px 0 8px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.mk-empty[hidden]{display:none}
.mk-empty-t{margin:0;font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;font-style:italic;font-size:30px;text-transform:uppercase;color:#EFE9D8}
.mk-empty-t span{color:#FFA800}
.mk-empty .ctk-play{height:44px;font-size:14px}

/* LOAD MORE and the count under the grid */
.mk-more{display:flex;flex-direction:column;align-items:center;gap:18px;margin:56px 0 0}
.mk-shown{margin:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#A1A1A1}
.mk-more .cmore[hidden]{display:none}
@media (max-width:720px){.mk-more{margin-top:40px}.mk-more .cmore{width:min(300px,calc(100vw - 40px))}}

.cap-note{margin:64px 0 56px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;line-height:1.5;color:rgba(255,255,255,.45)}
@media (max-width:720px){.cap-note{margin:48px 0 48px}}

/* ?static and reduced motion: nothing moves */
.static .mk-grid .acard.in{animation:none}
@media (prefers-reduced-motion:reduce){.mk-grid .acard.in{animation:none}.ctk-play[data-ctk-toggle]{display:none}}
/* the narrowest phones: the counts step out (each tab still says its count to assistive tech) so all four fit */
@media (max-width:379px){.mk-filter .cfilter .ntab>b{display:none}}

/* the board's ghost twin (/lib/skeleton.js boardGhost) on the grid's own columns and gaps, so nothing moves */
.mk-gridghost .sk-board{grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 36px}
@media (max-width:1180px){.mk-gridghost .sk-board{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}}
@media (max-width:900px){.mk-gridghost .sk-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}}
@media (max-width:560px){.mk-gridghost .sk-board{grid-template-columns:minmax(0,1fr);gap:28px}}

/* the hero art layer (.c-art, /lib/category.css): All has the right half free (full art); the categories carry their own
   piece on the right (the duel, the featured game), so the art steps back behind it */
.mk-head.c-art{--art-top:-150px;--art-right:-40px;--art-w:min(66%,1060px)}
.mk-head.c-art:not([data-art=live-markets]){--art-o:.42;--art-o-m:.3}
@media (max-width:720px){.mk-head.c-art{--art-top-m:-90px;--art-right-m:-16px;--art-w-m:100%}}
.mk-head.c-art[data-art=sports-lobby]{--art-o:.32}