/* Games only: loaded after styles.css. */

/* Main Street's card, built like Military Combat Tycoon's (mq-strip, mq-rooms): the name, the line and Play on Roblox
   across the top, the strip of numbers, then six pictures. The pictures take a 21:10 crop from the top, which keeps
   the game's wordmark in them clear, and carry no text (each has its description as alt text). */
.mq-ms{scroll-margin-top:96px}
.mq-ms-head{grid-column:1 / -1;grid-row:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:48px;padding:32px 40px 24px}
.mq-strip .mq-i-seat{color:var(--ink)}
.mq-ms-rooms{grid-template-columns:repeat(3,minmax(0,1fr))}
.mq-ms-rooms img{aspect-ratio:21 / 10;object-position:50% 0%}
/* five numbers need about 1,105 px in one row: from 1024 to 1279 each label moves under its number so the row still
   fits; under 1024 the strip stacks (as on phones) instead of wrapping with a stray rule on its second line */
@media (min-width:1024px) and (max-width:1279.98px){
.mq-ms .mq-strip .mq-well{flex-direction:column;align-items:flex-start;gap:4px}
}
@media (max-width:1023.98px){
.mq-ms-head{grid-template-columns:minmax(0,1fr);justify-items:start;row-gap:20px;padding:24px 24px 16px}
.mq-ms .mq-strip{flex-direction:column;align-items:stretch}
.mq-ms .mq-strip .mq-well+.mq-well{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:767.98px){
.mq-ms-head{padding:24px 16px 16px}
}
/* the pictures: three a row down to tablets, two on phones */
@media (max-width:599.98px){
.mq-ms-rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Military Combat Tycoon's card: its three numbers sit in the text column under Play on Roblox, one line each (the
   label beside the number), spaced and divided like Main Street's strip and as far above the pictures as Main
   Street's numbers are. Every rule is scoped to the card (.mq-mct). */
.mq-mct .mq-game-text{gap:16px;padding-bottom:0}
.mq-mct .mq-game-text .mq-strip{align-self:stretch;flex-wrap:nowrap;margin-top:0;padding:8px 0}
.mq-mct .mq-game-text .mq-strip .mq-well{flex:2 1 auto;justify-content:center;gap:8px;padding:12px}
.mq-mct .mq-game-text .mq-strip .mq-well-top{gap:8px}
.mq-mct .mq-game-text .mq-strip .mq-well:first-child{flex-grow:1;justify-content:start;padding-left:0}
.mq-mct .mq-game-text .mq-strip .mq-well:last-child{flex-grow:1;justify-content:end;padding-right:0}
/* beside the key art (1280 and up) the numbers sit at the foot of the column, and the column's right padding narrows
   so all three fit on one line: 24 px, and 16 px from 1280 to 1365 where the column is narrowest */
@media (min-width:1280px){
.mq-mct .mq-game-text{justify-content:flex-start;padding-right:24px}
.mq-mct .mq-game-text .mq-strip{margin-top:auto}
}
@media (min-width:1280px) and (max-width:1365.98px){
.mq-mct .mq-game-text{padding-right:16px}
}
/* below 1280 the card stacks, the key art on top */
@media (max-width:1279.98px){
.mq-mct.mq-game-flip{grid-template-columns:minmax(0,1fr)}
.mq-mct.mq-game-flip>*{grid-column:1 !important;grid-row:auto !important}
}
/* phones: one number per line */
@media (max-width:767.98px){
.mq-mct .mq-game-text .mq-strip{flex-direction:column;align-items:stretch}
.mq-mct .mq-game-text .mq-strip .mq-well,.mq-mct .mq-game-text .mq-strip .mq-well:first-child,.mq-mct .mq-game-text .mq-strip .mq-well:last-child{flex:none;justify-content:flex-start;gap:10px;padding:12px 0}
.mq-mct .mq-game-text .mq-strip .mq-well-top{gap:10px}
}

/* the community card: its three background icons are placed here (the CSP allows no style attributes); on phones
   Join the community keeps its own width like every other button, and under 360 the card's sides give it room for
   one line */
.mq-ci-bell{right:300px;top:-20px;transform:rotate(-12deg)}
.mq-ci-horn{right:120px;bottom:-40px;transform:rotate(10deg)}
.mq-ci-heart{right:-16px;top:12px;transform:rotate(8deg)}
@media (max-width:767.98px){
.mq-community .mq-btn{justify-self:start}
}
@media (max-width:359.98px){
.mq-community{padding:32px 20px}
}