/* Slopclip r4 landing fixes. Loaded after r3's home sheet. Layout only. */

/* top games and hot games: a game name is never cut. It wraps. */
.app .mc-toplist{padding-top:8px;padding-bottom:8px}
.app .mc-toplist li{white-space:normal;line-height:1.3;padding:3.5px 0}
.app .mc-toplist a{display:inline;max-width:none;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
.app .mc-hot a>span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;text-wrap:balance}

/* left column: two boxes and a share line, not five boxes */
.app .mc-left{gap:12px}
.app .mc-share{background:none;border:0;box-shadow:none;padding:2px 4px;gap:10px}
.app .mc-share svg{width:44px;height:38px}
.app .mc-share strong{font-size:13px;margin-bottom:5px}
.app .mc-linklist{padding-top:6px;padding-bottom:6px}

/* right column: news, then my games */
.app .r4-news .mc-news{padding:10px 12px 12px}
.app .r4-news img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:5px;margin-bottom:9px}
@media(max-width:1199px){
  .app:not(.is-playing):not(.cinema) .mc-right{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app .r4-news .mc-news{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);column-gap:12px;align-items:start}
  .app .r4-news img{grid-row:1/4;margin:0}
  .app .r4-news .mc-news>*:not(img){grid-column:2}
  .app .r4-news .mc-mini-button{justify-self:start}
}
@media(max-width:760px){
  .app:not(.is-playing):not(.cinema) .mc-right{grid-template-columns:minmax(0,1fr)}
}

/* Steam tiles: both buttons stay on one row at every width */
#steam-band .s27-ctas{flex-wrap:nowrap;gap:8px}
#steam-band .s27-btn{white-space:nowrap;min-width:0}
@media(max-width:1100px){
  #steam-band .s27-btn{min-height:40px;padding:0 12px;font-size:14px;gap:6px}
  #steam-band .s27-btn svg{width:15px;height:15px}
}
@media(min-width:761px) and (max-width:900px){
  #steam-band .s27-btn{padding:0 9px;font-size:13px;min-height:38px}
  #steam-band .s27-btn svg{display:none}
}
@media(max-width:420px){
  #steam-band .s27-btn{padding:0 8px;font-size:12.5px;min-height:38px}
  #steam-band .s27-btn svg{display:none}
}

/* Sloppy Robot now uses a real in-game frame, so it is treated like every other game (no cut-out on orange) */
.app .art-sloppy-robot{background:#101827}
.app .art-sloppy-robot>img{left:0;top:0;width:100%;height:100%;object-fit:cover;filter:none;z-index:auto}
.app .art-sloppy-robot .cover-ring{display:none}
.app .art-sloppy-robot .cover-title{text-shadow:2px 2px 0 #0b1a33}
.app .showcase-sloppy-robot{background:#101827;color:#fff7df}
.app .showcase-sloppy-robot .showcase-image{object-fit:cover;width:100%;height:100%;max-width:100%;left:0;top:0;filter:none}
.app .showcase-sloppy-robot .showcase-shade{background:linear-gradient(180deg,#0b1a3340 0%,transparent 26%,#0b1a3326 46%,#0b1a33e6 86%)}
.app .showcase-sloppy-robot .showcase-type{background:#0b1a33b8;color:#fff8e7;border-color:#ffffff2e}
.app .showcase-sloppy-robot .showcase-copy>strong{color:#fff}
.app .showcase-sloppy-robot .showcase-caption{color:#e8eefb}
.app .showcase-sloppy-robot .showcase-action{border-color:transparent}
.app .showcase-sloppy-robot .showcase-action>span{background:#ffffff2e;border-color:transparent}