/* /games laid out like CrazyGames (games/cg-layout.js). Full width instead of the centred 1360px column, a top
   bar with the search in the middle, an icon sidebar on the left, Recently played first, dense image-first cards, and
   the intro text moved to an About block at the bottom (keyword tags stay under the title). */
:root{--cg-top:64px;--cg-side:72px;--cg-bar:#101016}
body.cg{padding-left:0}
body.cg>header{position:sticky;top:0;z-index:40;background:var(--cg-bar);box-shadow:0 1px 0 #1f1f26}
body.cg nav{max-width:none;grid-template-columns:minmax(0,1fr) auto}
body.cg .nav-main{padding:10px 20px;gap:14px;min-height:var(--cg-top)}
body.cg .nav-main .links{display:none!important}
body.cg nav .btn.nav-btn{min-height:var(--cg-top);padding:10px 22px}
.cg-search{flex:1 1 auto;max-width:620px;margin:0 auto;position:relative}
.cg-search input{width:100%;height:44px;padding:0 48px 0 20px;border:0;border-radius:999px;background:#22222b;color:#fff;font:500 15px var(--sans);outline:none}
.cg-search input::placeholder{color:#8b8b96}
.cg-search input:focus{box-shadow:0 0 0 2px #6d5cff}
.cg-search svg{width:20px;height:20px;position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#b9b9c4;pointer-events:none}

.cg-side{position:fixed;left:0;top:var(--cg-top);bottom:0;z-index:35;width:var(--cg-side);padding:10px 10px 20px;background:var(--cg-bar);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;transition:width .18s ease,box-shadow .18s}
.cg-side::-webkit-scrollbar{display:none}
.cg-side:hover,.cg-side:focus-within{width:224px;box-shadow:12px 0 40px rgba(0,0,0,.5)}
.cg-side a{display:flex;align-items:center;gap:16px;height:46px;padding:0 13px;border-radius:12px;color:#d6d6de;text-decoration:none;white-space:nowrap;font:600 15px var(--sans)}
.cg-side a:hover,.cg-side a.on{background:#22222b;color:#fff}
.cg-side a svg{flex:none;width:24px;height:24px;color:var(--acc)}
.cg-side a span{opacity:0;transition:opacity .12s}
.cg-side:hover a span,.cg-side:focus-within a span{opacity:1}
.cg-side hr{border:0;height:1px;background:#24242c;margin:10px 6px}

body.cg #app{padding-left:var(--cg-side)}
body.cg .wrap{max-width:none;padding:0 clamp(16px,2vw,32px);display:flex;flex-direction:column}
body.cg .wrap>*{min-width:0}

/* list page: compact title, rows first, About last */
body.cg .head{padding:22px 0 6px;display:block!important}
body.cg .head h1{font-size:clamp(24px,2.2vw,32px);line-height:1.1}
body.cg .head .kick{font-size:11px}
@media (min-width:901px){body.cg .head .find{display:none}}
body.cg .views{margin:14px 0 26px}
body.cg .wrap>.ix-recent-head{margin-top:22px;max-width:none}
body.cg .wrap>.ix-recent-head h2{font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:clamp(20px,1.8vw,26px);margin-bottom:12px;display:flex;align-items:center;gap:6px}
body.cg .wrap>.ix-recent-head .ix-recent-hd{margin-bottom:0}
body.cg .wrap>.ix-recent-head ul{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin:0;padding:0 0 4px}
body.cg .wrap>.ix-recent-head li{flex:0 0 clamp(150px,13vw,210px)}
body.cg .wrap>.ix-recent-head li span{display:none}
body.cg .wrap>.ix-recent-head img{border-radius:12px}
body.cg .wrap>.ix-recent-head.empty{display:none}
body.cg .cg-about{order:50;margin:10px 0 48px;padding:24px;border-radius:16px;background:var(--bg-2)}
body.cg .cg-about h2{font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:20px;margin-bottom:10px}
body.cg .head .chips{margin-top:12px}
body.cg .sec{padding-bottom:34px}
body.cg .sech h2{font-size:clamp(20px,1.8vw,26px)}

/* cards: image tiles, title and plays under, tags on hover */
body.cg .grid{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:18px 14px}
body.cg .card{background:none;box-shadow:none;border-radius:12px}
body.cg .card:hover{box-shadow:none;transform:translateY(-3px)}
body.cg .cov{border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
body.cg .card .meta{padding:8px 2px 0;gap:0}
body.cg .card .meta h3{font-size:15px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.cg .card .meta p{display:none}
/* under the title only the plays count (games/cg-layout.js marks it .plays); every tag shows over the cover on hover */
body.cg .card .meta .tags{flex-wrap:nowrap;gap:4px;margin-top:6px;min-height:19px}
body.cg .card .meta .tag{display:none;flex:none;font-size:10px;padding:2px 6px;white-space:nowrap}
body.cg .card .meta .tag.plays{display:inline-block}
body.cg .cov .cg-tags{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:28px 8px 8px;background:linear-gradient(transparent,rgba(0,0,0,.88));opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s;pointer-events:none}
body.cg .cov .cg-tags .tag{font-size:10px;padding:2px 6px;background:rgba(28,28,31,.92);color:#e6e6ea}
body.cg .card:hover .cg-tags,body.cg .card:focus-visible .cg-tags{opacity:1;transform:none}
body.cg .card-new{top:8px;left:8px;right:auto;padding:4px 8px;border-radius:6px;font-size:11px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
body.cg .card-new::after{display:none}
body.cg .card-play-label{font-size:18px}

@media (max-width:900px){
  .cg-side{display:none}
  body.cg #app{padding-left:0}
  .cg-search{display:none}
}