/* Slopclip r3 landing: crisper home at every width. Layout only, no new art. Loaded after every other sheet.
   The main column is a size container, so each section lays out from the room it really has, with or without rails. */
.app{--r3-gap:16px;--r3-ink:#14223b;--r3-sub:#4a566b;--r3-line:#e3e8f0;--r3-max:1480px}

/* ---- shell: centred at wide sizes, never stretched ---- */
.app .mc-masthead,.app .mc-catbar,.app:not(.cinema) .mc-body{padding-left:max(16px,calc((100% - var(--r3-max))/2));padding-right:max(16px,calc((100% - var(--r3-max))/2))}
.app:not(.is-playing):not(.cinema) .mc-body{grid-template-columns:200px minmax(0,1fr) 232px;gap:var(--r3-gap);padding-top:16px;padding-bottom:24px}
.app .main-content{container-type:inline-size;container-name:r3main;gap:var(--r3-gap)}
.app .mc-help{display:none}
.app .mc-toplist li:nth-child(n+11){display:none}
.app .mc-toplist li{white-space:nowrap}
.app .mc-toplist a{display:inline-block;max-width:calc(100% - 22px);overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.app .mc-latest-list li:nth-child(n+9){display:none}
@media(min-width:1200px) and (max-width:1339px){
  .app:not(.is-playing):not(.cinema) .mc-body{grid-template-columns:184px minmax(0,1fr) 212px}
}
@media(max-width:1199px){
  .app .mc-catbar-aux{display:none}
  .app:not(.is-playing):not(.cinema) .mc-body{grid-template-columns:184px minmax(0,1fr)}
  .app:not(.is-playing):not(.cinema) .mc-right{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--r3-gap);align-items:start}
  .app:not(.is-playing):not(.cinema) .mc-latest-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}
@media(min-width:761px) and (max-width:900px){
  .app .mc-catbar nav a{padding:0 9px;font-size:12px}
}
@media(max-width:760px){
  .app .mc-masthead,.app .mc-catbar,.app:not(.cinema) .mc-body{padding-left:12px;padding-right:12px}
  .app .mc-catbar{padding-left:4px;padding-right:0}
  .app:not(.is-playing):not(.cinema) .mc-body{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:12px}
  .app:not(.is-playing):not(.cinema) .mc-right{grid-template-columns:minmax(0,1fr);gap:12px}
  .app:not(.is-playing):not(.cinema) .mc-latest-list{grid-template-columns:minmax(0,1fr)}
  .app .mc-latest-list li:nth-child(n+7){display:none}
  .app .main-content{gap:12px}
}

/* ---- headline ---- */
.app .welcome-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;min-height:0;padding:2px 2px 0;margin:0}
.app .welcome-line h1{font-size:clamp(20px,2.4cqw + 10px,28px);line-height:1.15;letter-spacing:-.5px;font-weight:800;margin:0;color:#1d4a8f;text-wrap:balance}
.app .welcome-line h1 span{display:inline;color:#e94b20}
.app .welcome-aside{display:block;font-size:13px;line-height:1.4;color:var(--r3-sub);text-align:left;margin:0}
.app .welcome-aside br{display:none}

/* ---- featured carousel: named tabs cannot fit a growing catalog, so the picker is a row of pips ---- */
.app .showcase-picker{display:flex;justify-content:center;gap:5px;margin:12px auto 0;max-width:520px}
.app .showcase-picker>button{flex:1 1 0;max-width:40px;min-width:6px;min-height:24px;padding:10px 0;border:0;font-size:0;position:relative}
.app .showcase-picker>button>span:not(.showcase-pip){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app .showcase-picker>button::after{content:"";display:block;width:100%;height:4px;border-radius:2px;background:#d5dce8;transition:background .15s}
.app .showcase-picker>button:hover::after{background:#9fb0cc}
.app .showcase-picker>button.is-selected::after{background:#ff5a2a}
.app .showcase-image{width:100%;height:100%;object-fit:cover}

/* ---- hot games: a grid that always closes its last row ---- */
.app .mc-hot{--c:2;--g:12px;grid-template-columns:repeat(var(--c),minmax(0,1fr));grid-auto-flow:row dense;gap:16px var(--g);padding:14px}
.app .mc-hot-game{min-width:0}
.app .mc-hot a{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;text-align:left;font-size:14px;line-height:1.25;font-weight:700;color:var(--r3-ink)}
.app .mc-hot a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .mc-hot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.app .mc-hot .r3-hot-tag{display:none;align-self:start;font-size:13px;font-weight:400;line-height:1.4;color:var(--r3-sub)}
/* the lead card: bigger art, and the tagline shows */
@container r3main (min-width:520px){.app .mc-hot{--c:3;--g:14px}}
@container r3main (min-width:860px){.app .mc-hot{--c:4;--g:16px}}
/* 2 columns: an odd count leads with one full-width game */
@container r3main (max-width:519.98px){
  .app .mc-hot:has(>.mc-hot-game:nth-child(2n+1):last-child)>.mc-hot-game:first-child{grid-column:span 2}
  .app .mc-hot:has(>.mc-hot-game:nth-child(2n+1):last-child)>.mc-hot-game:first-child a{font-size:17px}
  .app .mc-hot:has(>.mc-hot-game:nth-child(2n+1):last-child)>.mc-hot-game:first-child .r3-hot-tag{display:block;margin-top:-4px}
}
/* 3 columns: one left over = two wide cards, two left over = one wide card */
@container r3main (min-width:520px) and (max-width:859.98px){
  .app .mc-hot:has(>.mc-hot-game:nth-child(3n+1):last-child)>.mc-hot-game:is(:first-child,:nth-child(3)),
  .app .mc-hot:has(>.mc-hot-game:nth-child(3n+2):last-child)>.mc-hot-game:first-child{grid-column:span 2}
  .app .mc-hot:has(>.mc-hot-game:nth-child(3n+1):last-child)>.mc-hot-game:is(:first-child,:nth-child(3)) a,
  .app .mc-hot:has(>.mc-hot-game:nth-child(3n+2):last-child)>.mc-hot-game:first-child a{grid-template-columns:calc((100% - var(--g))/2) minmax(0,1fr);column-gap:var(--g);grid-template-rows:1fr 1fr;row-gap:4px;font-size:17px}
  .app .mc-hot:has(>.mc-hot-game:nth-child(3n+1):last-child)>.mc-hot-game:is(:first-child,:nth-child(3)) img,
  .app .mc-hot:has(>.mc-hot-game:nth-child(3n+2):last-child)>.mc-hot-game:first-child img{grid-row:1/3}
  .app .mc-hot:has(>.mc-hot-game:nth-child(3n+1):last-child)>.mc-hot-game:is(:first-child,:nth-child(3)) a>span,
  .app .mc-hot:has(>.mc-hot-game:nth-child(3n+2):last-child)>.mc-hot-game:first-child a>span{white-space:normal;align-self:end;padding-right:34px}
  .app .mc-hot:has(>.mc-hot-game:nth-child(3n+1):last-child)>.mc-hot-game:is(:first-child,:nth-child(3)) .r3-hot-tag,
  .app .mc-hot:has(>.mc-hot-game:nth-child(3n+2):last-child)>.mc-hot-game:first-child .r3-hot-tag{display:block}
}
/* 4 columns: one left over = a 2x2 lead, two = two wide cards, three = one wide card */
@container r3main (min-width:860px){
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+1):last-child)>.mc-hot-game:first-child{grid-column:span 2;grid-row:span 2}
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+1):last-child)>.mc-hot-game:first-child a{height:100%;grid-template-rows:minmax(0,1fr) auto auto;font-size:20px;gap:6px}
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+1):last-child)>.mc-hot-game:first-child img{height:100%;min-height:0;aspect-ratio:auto}
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+1):last-child)>.mc-hot-game:first-child .r3-hot-tag{display:block;font-size:14px}
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+2):last-child)>.mc-hot-game:is(:first-child,:nth-child(4)),
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+3):last-child)>.mc-hot-game:first-child{grid-column:span 2}
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+2):last-child)>.mc-hot-game:is(:first-child,:nth-child(4)) a,
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+3):last-child)>.mc-hot-game:first-child a{grid-template-columns:calc((100% - var(--g))/2) minmax(0,1fr);column-gap:var(--g);grid-template-rows:1fr 1fr;row-gap:4px;font-size:18px}
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+2):last-child)>.mc-hot-game:is(:first-child,:nth-child(4)) img,
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+3):last-child)>.mc-hot-game:first-child img{grid-row:1/3}
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+2):last-child)>.mc-hot-game:is(:first-child,:nth-child(4)) a>span,
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+3):last-child)>.mc-hot-game:first-child a>span{white-space:normal;align-self:end;padding-right:34px}
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+2):last-child)>.mc-hot-game:is(:first-child,:nth-child(4)) .r3-hot-tag,
  .app .mc-hot:has(>.mc-hot-game:nth-child(4n+3):last-child)>.mc-hot-game:first-child .r3-hot-tag{display:block}
}

/* ---- coming soon: columns follow the number of cards, whatever a release leaves in the list ---- */
.app .mc-soon:not(:has(.mc-soon-tile)){display:none}
.app .mc-soon-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;padding:14px}
.app .mc-soon-tile,.app .mc-soon-tile:nth-child(n+4){grid-column:auto}
.app .mc-soon-art,.app .mc-soon-art img{aspect-ratio:16/9}
@container r3main (min-width:520px){
  .app .mc-soon-grid:has(>.mc-soon-tile:nth-child(2):last-child),
  .app .mc-soon-grid:has(>.mc-soon-tile:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .app .mc-soon-grid:has(>.mc-soon-tile:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .app .mc-soon-grid:has(>.mc-soon-tile:only-child){grid-template-columns:minmax(0,1fr)}
  .app .mc-soon-tile:only-child a{flex-direction:row;align-items:center;gap:16px}
  .app .mc-soon-tile:only-child .mc-soon-art{flex:0 0 min(46%,360px)}
}
@container r3main (min-width:700px){
  .app .mc-soon-grid:has(>.mc-soon-tile:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container r3main (max-width:519.98px){
  .app .mc-soon-grid{grid-template-columns:minmax(0,1fr);gap:0;padding:4px 12px}
}

/* ---- category boxes: compact lead with art beside the pitch, equal heights, no lonely box ---- */
.app .mc-category-grid{grid-template-columns:minmax(0,1fr);gap:var(--r3-gap)}
.app .mc-lead{grid-template-columns:minmax(0,min(42%,300px)) minmax(0,1fr);gap:14px;align-items:center;padding:14px 14px 10px}
.app .mc-lead-thumb img{width:100%;height:auto}
.app .mc-lead-title{font-size:17px;line-height:1.2;margin-bottom:4px}
.app .mc-lead p{font-size:13px;line-height:1.45;margin:0 0 10px;color:var(--r3-sub)}
.app .mc-bullets{padding:0 14px 6px}
.app .mc-more{padding:8px 14px 12px}
@container r3main (min-width:640px){
  .app .mc-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app .mc-category-grid:has(>.mc-category:nth-child(2n+1):last-child)>.mc-category:last-child{grid-column:1/-1}
}
@container r3main (min-width:640px) and (max-width:719.98px){
  .app .mc-lead{grid-template-columns:minmax(0,1fr);align-items:start}
  .app .mc-category-grid:has(>.mc-category:nth-child(2n+1):last-child)>.mc-category:last-child .mc-lead{grid-template-columns:minmax(0,min(42%,300px)) minmax(0,1fr);align-items:center}
}

/* ---- rhythm: one gap between every section; a shorter carousel on phones so the next row peeks in ---- */
.app #steam-band{margin:0}
@media(max-width:760px){.app .showcase-card{height:clamp(260px,38svh,320px)}}