/* Miniclip pass (Nov 14 evening): boxed sections with navy header bars, game tiles, the featured banner,
   the numbered Top games list, the Latest updates row and the All games library. Loaded after ds.css.
   Navy is chrome, orange is action. No gradients, no washes. Body text 14 px and up, nothing under 12 px. */

/* ---- page intro (the one H1 and one sentence) ---- */
.mc-intro{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sc-1) var(--sc-4);margin-bottom:var(--sc-4)}
.mc-h1{font:900 clamp(24px,1vw + 18px,32px)/1.05 var(--sc-display);letter-spacing:.2px;text-transform:uppercase;color:var(--sc-navy-900)}
.mc-intro p{font-size:var(--sc-fs-14);color:var(--sc-ink-2)}
.mc-intro>nav{flex:1 1 100%;margin-bottom:-2px}

/* ---- the box: white, a navy bar on top, a body with the tiles ---- */
.mc-box{display:flex;flex-direction:column;min-width:0;background:var(--sc-surface);border:1px solid var(--sc-line);border-radius:var(--sc-r-md);box-shadow:var(--sc-sh-1);overflow:hidden}
.mc-bar{display:flex;align-items:center;gap:var(--sc-3);min-height:42px;padding:0 var(--sc-3) 0 var(--sc-4);background:var(--sc-navy-800);color:#fff}
.mc-bar h2{flex:0 1 auto;min-width:0;font:800 var(--sc-fs-18)/1.15 var(--sc-body);letter-spacing:-.1px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-bar-note{display:none;font-size:var(--sc-fs-13);color:#b9c7de;white-space:nowrap}
@media(min-width:600px){.mc-bar-note{display:block}}
.sc .mc-bar-link{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:6px 8px;border-radius:var(--sc-r-sm);color:#fff;font:700 var(--sc-fs-13)/1 var(--sc-body);text-decoration:none;white-space:nowrap}
.sc .mc-bar-link:hover{background:rgba(255,255,255,.12);color:#fff}
.mc-box-body{flex:1 1 auto;padding:var(--sc-3)}
@media(min-width:700px){.mc-box-body{padding:14px}}

/* ---- tiles: 2-up on phones, then as many as fit. One shape everywhere. ---- */
.mc-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sc-3);margin:0;padding:0;list-style:none}
@media(min-width:600px){.mc-tiles{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}}
.mc-tiles>li{display:flex;min-width:0}
.mc-tile{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:0 0 10px;border-radius:var(--sc-r-md);color:var(--sc-ink)!important;text-decoration:none}
.mc-tile-art{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--sc-r-md);overflow:hidden;background:var(--sc-navy-900);box-shadow:0 0 0 1px rgba(15,42,85,.12)}
.mc-tile-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.mc-tile-title{margin-top:8px;font:800 var(--sc-fs-16)/1.2 var(--sc-body);letter-spacing:-.1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.mc-tile-meta{margin-top:3px;font-size:var(--sc-fs-13);line-height:1.3;color:var(--sc-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-tile-meta b{color:var(--sc-orange-700);font-weight:700}
.mc-flags{position:absolute;top:6px;left:6px;display:flex;gap:4px;flex-wrap:wrap;max-width:calc(100% - 12px)}
.mc-flag{display:inline-flex;align-items:center;min-height:20px;padding:0 6px;border-radius:var(--sc-r-sm);background:rgba(10,29,61,.88);color:#fff;font:700 12px/1 var(--sc-body);white-space:nowrap}
.mc-flag--age{background:var(--sc-ink)}
.mc-go{position:absolute;right:6px;bottom:6px;display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--sc-r-sm);background:var(--sc-orange-600);color:#fff;font:900 var(--sc-fs-14)/1 var(--sc-display);letter-spacing:.5px;text-transform:uppercase;opacity:0;transform:translateY(3px);transition:opacity .14s ease,transform .14s ease}
.mc-tile--soon .mc-go{background:var(--sc-navy-900)}
@media(hover:hover){
  .mc-tile:hover .mc-tile-art img{transform:scale(1.04)}
  .mc-tile:hover .mc-go{opacity:1;transform:none}
  .mc-tile:hover .mc-tile-title{color:var(--sc-navy-700)}
}
@media(hover:none){.mc-go{display:none}}
@media(max-width:599px){.mc-tile-title{font-size:15px}}
.sc .mc-tile:focus-visible{outline:0;box-shadow:none}
.mc-tile:focus-visible .mc-tile-art{outline:2px solid var(--sc-orange-500);outline-offset:2px}
.mc-tile:focus-visible .mc-go{opacity:1;transform:none}

/* ---- home: banner + Top games, then Latest, then the category boxes ---- */
.mc-home{display:grid;gap:var(--sc-4)}
@media(min-width:900px){.mc-home{gap:18px}}
.mc-top-row{display:grid;gap:var(--sc-4)}
@media(min-width:900px){.mc-top-row{grid-template-columns:minmax(0,1fr) 300px;gap:var(--sc-4)}}
@media(min-width:1100px){.mc-top-row{grid-template-columns:minmax(0,1fr) 340px;gap:18px}}
@media(min-width:1500px){.mc-top-row{grid-template-columns:minmax(0,1fr) 380px}}

/* featured banner: one slide at a time, the caption sits in a solid navy card over the art (under it on phones) */
.mc-feature{background:var(--sc-navy-950);border-color:var(--sc-navy-950);container:mcf/inline-size}
.mc-stage{position:relative;flex:1 0 auto;display:grid}
.mc-slide{grid-area:1/1;position:relative;display:flex;flex-direction:column;min-width:0}
.mc-slide[hidden]{display:none!important}
.mc-slide-art{position:relative;display:block;aspect-ratio:16/9;flex:1 0 auto;overflow:hidden;background:var(--sc-navy-950)}
.mc-slide-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mc-slide.is-in .mc-slide-art img{animation:mc-fade .45s ease both}
@media(min-width:900px) and (max-height:760px){.mc-slide-art{aspect-ratio:21/9}}
@keyframes mc-fade{from{opacity:.25}to{opacity:1}}
.mc-cap{display:grid;gap:6px;padding:14px var(--sc-4) var(--sc-4);background:var(--sc-navy-950);color:#fff}
@container mcf (min-width:600px){.mc-cap{position:absolute;left:var(--sc-4);bottom:var(--sc-4);max-width:min(470px,64%);padding:var(--sc-4) 18px 18px;border-radius:var(--sc-r-md);background:rgba(8,22,48,.92);box-shadow:var(--sc-sh-3)}}
.mc-cap-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--sc-fs-13);color:#c9d5ea}
.mc-tag{display:inline-flex;align-items:center;min-height:22px;padding:0 7px;border-radius:var(--sc-r-sm);background:var(--sc-orange-600);color:#fff;font:700 12px/1 var(--sc-body);white-space:nowrap}
.mc-tag--age{background:#fff;color:var(--sc-ink)}
.mc-cap-title{font:900 clamp(30px,2vw + 18px,46px)/1 var(--sc-display);letter-spacing:.3px;text-transform:uppercase;color:#fff}
.mc-cap-hook{font-size:var(--sc-fs-16);line-height:1.4;color:#dbe4f3;text-wrap:pretty}
.mc-cap-actions{display:flex;flex-wrap:wrap;gap:var(--sc-2);margin-top:6px}
.sc .mc-play{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:var(--sc-r-md);background:var(--sc-orange-600);color:#fff;font:900 var(--sc-fs-18)/1 var(--sc-display);letter-spacing:.6px;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.sc .mc-play::before{content:"";border:6px solid transparent;border-left:9px solid currentColor;border-right:0}
.sc .mc-play:hover{background:var(--sc-orange-700);color:#fff}
.sc .mc-ghost{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border-radius:var(--sc-r-md);border:1px solid rgba(255,255,255,.35);color:#fff;font:700 var(--sc-fs-14)/1 var(--sc-body);text-decoration:none;white-space:nowrap}
.sc .mc-ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.mc-switch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--sc-navy-950);border-top:1px solid var(--sc-navy-950)}
.mc-switch button{position:relative;display:flex;align-items:center;gap:10px;min-width:0;min-height:56px;padding:8px 10px;border:0;background:var(--sc-navy-900);color:#c9d5ea;font:800 var(--sc-fs-14)/1.2 var(--sc-body);text-align:left;cursor:pointer}
.mc-switch button:hover{background:var(--sc-navy-800);color:#fff}
.mc-switch button[aria-selected=true]{background:var(--sc-navy-800);color:#fff;box-shadow:inset 0 3px 0 var(--sc-orange-600)}
.mc-switch img{display:none;width:68px;height:38px;flex:none;object-fit:cover;border-radius:var(--sc-r-sm)}
.mc-switch span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@container mcf (min-width:640px){.mc-switch img{display:block}}
@container mcf (max-width:639px){.mc-switch button{justify-content:center;text-align:center;min-height:44px;padding:6px;font-size:var(--sc-fs-13)}.mc-switch span{white-space:normal;line-height:1.15}}
.mc-switch-bar{position:absolute;left:0;right:0;top:0;height:3px;overflow:hidden;pointer-events:none}
.mc-switch-bar i{display:block;height:100%;width:100%;background:#ffb08f;transform:scaleX(0);transform-origin:left}
.is-auto:not(.is-paused) [aria-selected=true] .mc-switch-bar i{animation:mc-bar 8s linear both}
.is-paused [aria-selected=true] .mc-switch-bar i{animation-play-state:paused}
@keyframes mc-bar{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.mc-slide.is-in .mc-slide-art img,.mc-switch-bar i{animation:none!important}}

/* Top games: numbered list, Reese's picks */
.mc-top .mc-box-body{padding:4px 0}
.mc-top-list{display:grid;margin:0;padding:0;list-style:none;counter-reset:mc}
@media(min-width:700px) and (max-width:899px){.mc-top-list{grid-template-columns:1fr 1fr;column-gap:var(--sc-4)}}
@media(min-width:900px){.mc-top .mc-box-body{display:flex}.mc-top-list{flex:1;grid-auto-rows:1fr}}
@media(min-width:900px) and (max-width:1099px){.mc-top-list li:nth-child(n+9){display:none}.mc-top-list li:nth-child(8){border-bottom:0}}
.mc-top-list li{display:flex;min-width:0;border-bottom:1px solid var(--sc-line-2)}
.mc-top-list li:last-child{border-bottom:0}
@media(max-width:699px){.mc-top-list li:nth-child(n+6){display:none}.mc-top-list li:nth-child(5){border-bottom:0}}
@media(min-width:700px) and (max-width:899px){.mc-top-list li:nth-last-child(2){border-bottom:0}}
.mc-top-list a{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:52px;padding:6px var(--sc-3);color:var(--sc-ink)!important;text-decoration:none}
.mc-top-list a:hover{background:var(--sc-surface-2)}
.mc-top-list a:hover b{color:var(--sc-navy-700)}
.mc-rank{flex:none;width:26px;font:900 26px/1 var(--sc-display);color:var(--sc-orange-600);text-align:center}
.mc-top-list img{flex:none;width:72px;height:40px;object-fit:cover;border-radius:var(--sc-r-sm);background:var(--sc-navy-900)}
.mc-top-txt{display:grid;min-width:0}
.mc-top-txt b{font:800 var(--sc-fs-16)/1.2 var(--sc-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-top-txt small{font-size:var(--sc-fs-13);line-height:1.3;color:var(--sc-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-top-list a:focus-visible{outline-offset:-2px}

/* Latest updates: one row on desktop, a sideways row on phones */
.mc-latest{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,44%);gap:var(--sc-3);margin:0;padding:0 0 2px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.mc-latest>li{display:flex;min-width:0;scroll-snap-align:start}
@media(min-width:600px){.mc-latest{grid-auto-columns:minmax(170px,30%)}}
@media(min-width:900px){.mc-latest{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));overflow:visible;gap:14px}}
.mc-latest .mc-tile-meta{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* category boxes: a 12 column grid from 1200 px, spans worked out by the page so each row holds six tiles */
.mc-cats{display:grid;gap:var(--sc-4)}
.mc-cell{display:flex;min-width:0}
.mc-cell>.mc-box{flex:1 1 auto}
@media(min-width:700px) and (max-width:1199px){.mc-cats{grid-template-columns:1fr 1fr}.mc-cell{grid-column:1/-1}.mc-cell.mc-half{grid-column:auto}.mc-cats .mc-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.mc-half .mc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.mc-make .mc-box-body{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--sc-5)}}
@media(min-width:1000px) and (max-width:1199px){.mc-cats .mc-cell:not(.mc-half) .mc-tiles{grid-template-columns:repeat(var(--cols,6),minmax(0,1fr))}}
@media(min-width:1200px){.mc-cats{grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.mc-cell{grid-column:span var(--span,12)}.mc-cats .mc-tiles{grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:14px}}

/* side boxes: guides list and the publish box */
.mc-links{display:grid;margin:0;padding:0;list-style:none}
.mc-links li+li{border-top:1px solid var(--sc-line-2)}
.mc-links a{display:block;padding:7px 2px;font:700 var(--sc-fs-14)/1.3 var(--sc-body);color:var(--sc-navy-700);text-decoration:none}
.mc-links a:hover{color:var(--sc-orange-700);text-decoration:underline}
@media(min-width:700px) and (max-width:1199px){.mc-links{grid-template-columns:1fr 1fr;column-gap:var(--sc-5)}.mc-links li:nth-child(2){border-top:0}}
.mc-make .mc-box-body{display:flex;flex-direction:column;justify-content:center;gap:10px}
.mc-make p{font-size:var(--sc-fs-16);line-height:1.45;color:var(--sc-ink-2);max-width:52ch}
.mc-make .sc-actions{margin-top:2px}
.mc-make .mc-why{font-size:var(--sc-fs-14)}
.mc-make .mc-why a{font-weight:700}

/* ---- All games library: the toolbar lives in the box, under the bar ---- */
.mc-lib .mc-box-body{padding:0}
.mc-tools{display:grid;gap:10px;padding:var(--sc-3);background:var(--sc-surface-2);border-bottom:1px solid var(--sc-line)}
@media(min-width:700px){.mc-tools{padding:12px 14px}}
.mc-q{position:relative;display:flex;align-items:center;max-width:560px}
.mc-q svg{position:absolute;left:12px;width:17px;height:17px;color:var(--sc-ink-3);pointer-events:none}
.mc-q input{flex:1;min-width:0;height:42px;padding:0 12px 0 38px;border:1px solid #b8c4d8;border-radius:var(--sc-r-md);background:#fff;font-size:var(--sc-fs-16)}
.mc-q input:focus{border-color:var(--sc-navy-700)}
.mc-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
@media(max-width:699px){.mc-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-12px;padding-inline:12px}.mc-filters::-webkit-scrollbar{display:none}}
.mc-chip{display:inline-flex;align-items:center;gap:5px;flex:none;min-height:34px;padding:0 12px;border:1px solid #c3cee0;border-radius:var(--sc-r-pill);background:#fff;color:var(--sc-ink);font:700 var(--sc-fs-14)/1 var(--sc-body);cursor:pointer;white-space:nowrap}
.mc-chip small{font-size:12px;font-weight:700;color:var(--sc-ink-3)}
.mc-chip:hover{border-color:var(--sc-navy-700);color:var(--sc-navy-700)}
.mc-chip[aria-pressed=true]{background:var(--sc-navy-800);border-color:var(--sc-navy-800);color:#fff}
.mc-chip[aria-pressed=true] small{color:#c9d5ea}
.mc-chip--toggle[aria-pressed=true]{background:var(--sc-orange-100);border-color:var(--sc-orange-700);color:var(--sc-orange-700)}
.mc-chip--toggle[aria-pressed=true]::before{content:"";width:8px;height:4px;margin-right:1px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.mc-sep{flex:none;width:1px;height:22px;margin:0 4px;background:#c3cee0}
.mc-sort{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:auto;font:700 var(--sc-fs-14)/1 var(--sc-body);color:var(--sc-ink-2)}
.mc-sort select{height:34px;padding:0 8px;border:1px solid #c3cee0;border-radius:var(--sc-r-md);background:#fff;color:var(--sc-ink);font:700 var(--sc-fs-14)/1 var(--sc-body);cursor:pointer}
@media(max-width:699px){.mc-sort{margin-left:0}}
.mc-lib-grid{padding:14px}
.mc-count{font-size:var(--sc-fs-13);font-weight:700;color:var(--sc-ink-3);margin-bottom:10px}
.mc-empty{display:grid;justify-items:center;gap:6px;padding:var(--sc-7) var(--sc-4);text-align:center;color:var(--sc-ink-2)}
.mc-empty b{font-size:var(--sc-fs-18);color:var(--sc-ink)}
.mc-empty button{margin-top:6px}
.mc-browse{display:flex;flex-wrap:wrap;gap:var(--sc-2)}

/* guide rows inside a box: title plus one line */
.mc-guides{display:grid;gap:0 var(--sc-5);margin:0;padding:0;list-style:none}
@media(min-width:900px){.mc-guides{grid-template-columns:1fr 1fr}}
.mc-guides li{border-top:1px solid var(--sc-line-2)}
.mc-guides li:first-child{border-top:0}
@media(min-width:900px){.mc-guides li:nth-child(2){border-top:0}}
.mc-guides a{display:grid;gap:2px;padding:10px 2px;text-decoration:none}
.mc-guides b{font:800 var(--sc-fs-16)/1.25 var(--sc-body);color:var(--sc-navy-700)}
.mc-guides span{font-size:var(--sc-fs-14);line-height:1.4;color:var(--sc-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-guides a:hover b{color:var(--sc-orange-700);text-decoration:underline}

/* the library grid: columns chosen so 15 games fill whole rows on desktop (5 x 3) */
@media(min-width:600px){.mc-tiles--lib{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.mc-tiles--lib{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1200px){.mc-tiles--lib{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 16px}}
@media(min-width:2200px){.mc-tiles--lib{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* short windows (laptops at 125-150 %): keep Play above the fold. Wider banner crop, seven picks, tighter rows */
@media(min-width:900px) and (max-height:760px){.mc-top-list a{min-height:46px}.mc-intro{margin-bottom:12px}}
@media(min-width:1100px) and (max-height:760px){.mc-top-list li:nth-child(n+9){display:none}.mc-top-list li:nth-child(8){border-bottom:0}}
@media(min-width:900px) and (max-width:1099px) and (max-height:760px){.mc-top-list li:nth-child(n+7){display:none!important}.mc-top-list li:nth-child(6){border-bottom:0}}
@media(min-width:900px) and (max-height:760px){.sc-main{padding-top:var(--sc-4)}}