/* Homepage concept C "Vitrin" (SITE:173). Layout from Codex's mockup
   redesign/homepage-concepts/c; colours follow the site tokens in dark mode. */
.home-c{
  --hc-bg:#f8f6f3; --hc-card:#fff; --hc-ink:#2f3340; --hc-muted:#7d786f; --hc-line:#e6e0d8;
  --hc-accent:#ee8051; --hc-accent-ink:#fff; --hc-link:#aa6b43; --hc-rank:#c2b7a6;
  --hc-badge-bg:#fff4c7; --hc-badge-ink:#6f572b;
  --hc-b1:#e1e9e6; --hc-b2:#f3dec6; --hc-b3:#e7def2; --hc-t2:#fff0d8; --hc-t3:#e9eddf; --hc-t4:#eee6f2;
  background:var(--hc-bg);
}
html.dark .home-c{
  --hc-bg:#0d0a26; --hc-card:#1a1640; --hc-ink:#f1eeff; --hc-muted:#a79fd0; --hc-line:#2a2260;
  --hc-link:#ffb48f; --hc-rank:#6d6499; --hc-badge-bg:#3a2f12; --hc-badge-ink:#ffe08a;
  --hc-b1:#16273a; --hc-b2:#3a2615; --hc-b3:#2a1f45; --hc-t2:#33240f; --hc-t3:#1d2a1d; --hc-t4:#2a2040;
}
html.dark body.home-c{ background:var(--hc-bg); }
.home-c .blob,.home-c .sparkle{ display:none; }

.hc{ max-width:1180px; margin:0 auto; padding:18px 8px 8px; color:var(--hc-ink); }
.hc h1,.hc h2,.hc h3,.hc p{ margin:0; }
.hc a{ color:inherit; text-decoration:none; }
.hc a:focus-visible,.hc button:focus-visible{ outline:3px solid #e79b28; outline-offset:3px; border-radius:10px; }

.hc-head{ text-align:left; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; }
.hc-eyebrow{ text-transform:uppercase; letter-spacing:2px; font-size:11px; font-weight:900; color:#b18d6a; margin-bottom:8px; }
.hc h1{ text-align:left; font-family:'Nunito',system-ui,sans-serif; font-size:clamp(32px,4vw,44px); line-height:1.08; letter-spacing:-1.2px; font-weight:900; color:var(--hc-ink); }
.hc-intro{ font-size:14px; line-height:1.5; color:var(--hc-muted); margin-top:8px !important; max-width:560px; }
.hc-head-side{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex:0 0 auto; }
.hc-tagline{ font-size:11px; letter-spacing:2px; color:#9a9287; }
.hc .random-btn{ padding:10px 20px; font-size:.92rem; }

.hc-carousel{ position:relative; }
.hc-banners{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:28px; scrollbar-width:none; overscroll-behavior-x:contain; }
.hc-banners::-webkit-scrollbar{ display:none; }
.hc-banner{ flex:0 0 100%; display:grid; grid-template-columns:1fr 1fr; min-width:0; scroll-snap-align:start; background:var(--hc-b1); min-height:325px; border-radius:28px; overflow:hidden; }
.hc-banner-2{ background:var(--hc-b2); } .hc-banner-3{ background:var(--hc-b3); }
.hc-banner-copy{ padding:38px 44px; align-self:center; }
.hc-badge{ display:inline-block; padding:6px 11px; border-radius:30px; font-size:11px; font-weight:900; background:var(--hc-badge-bg); color:var(--hc-badge-ink); }
.hc-banner h2{ font-family:'Nunito',system-ui,sans-serif; font-size:clamp(30px,3.4vw,43px); letter-spacing:-1.2px; margin-top:12px !important; line-height:1.08; font-weight:900; color:var(--hc-ink); }
.hc-banner p{ font-size:14px; line-height:1.5; color:var(--hc-muted); max-width:340px; margin:16px 0 22px !important; }
.hc-btn{ display:inline-flex; align-items:center; gap:8px; min-height:48px; background:var(--hc-accent); color:var(--hc-accent-ink) !important; border-radius:16px; padding:12px 23px; font-weight:900; box-shadow:0 4px 0 #c9643a; }
.hc-btn:hover{ filter:brightness(1.05); }
.hc-banner>img{ width:100%; height:100%; min-height:325px; max-height:360px; object-fit:cover; display:block; }
.hc-carousel-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.hc-carousel-bottom p{ font-size:12px; color:var(--hc-muted); }
.hc-dots{ display:flex; }
.hc-dots button{ width:44px; height:44px; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; padding:0; }
.hc-dots button::before{ content:''; width:12px; height:12px; border-radius:50%; background:#b3aca2; transition:transform .2s,background .2s; }
.hc-dots button[aria-current="true"]::before{ background:var(--hc-accent); transform:scale(1.25); }

.hc-section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:34px 0 16px; }
.hc-section-head h2{ font-family:'Nunito',system-ui,sans-serif; font-size:24px; line-height:1.2; font-weight:900; letter-spacing:-.5px; color:var(--hc-ink); }
.hc-section-head p{ font-size:14px; color:var(--hc-muted); margin-top:4px !important; }
.hc-section-head>a{ min-height:44px; display:flex; align-items:center; white-space:nowrap; font-size:13px; font-weight:900; color:var(--hc-link); }

.hc-bento{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:185px 185px; gap:18px; }
.hc-tile{ background:var(--hc-card); border:1px solid var(--hc-line); border-radius:23px; overflow:hidden; min-width:0; transition:transform .18s,box-shadow .18s; display:block; }
.hc-tile:hover{ transform:translateY(-3px); box-shadow:0 9px 25px rgba(32,60,56,.1); }
.hc-tile img{ width:100%; object-fit:cover; display:block; }
.hc-tile-copy{ padding:16px 18px; }
.hc-tile h3{ font-size:16px; line-height:1.25; font-weight:900; color:var(--hc-ink); }
.hc-tile p{ font-size:12px; color:var(--hc-muted); margin-top:6px !important; }
.hc-play{ display:block; font-size:12px; font-weight:900; color:#297551; margin-top:10px; }
html.dark .hc-play{ color:#7ee0b0; }
.hc-tile-1{ grid-row:span 2; }
.hc-tile-1 img{ height:265px; }
.hc-tile-2,.hc-tile-3,.hc-tile-4{ display:grid; grid-template-columns:44% 1fr; }
.hc-tile-2 img,.hc-tile-3 img,.hc-tile-4 img{ height:100%; }
.hc-tile-2{ grid-column:span 2; background:var(--hc-t2); }
.hc-tile-2 h3{ font-size:23px; }
.hc-tile-3{ background:var(--hc-t3); } .hc-tile-4{ background:var(--hc-t4); }
.hc-tile-3 .hc-tile-copy,.hc-tile-4 .hc-tile-copy{ padding:14px 10px; }

.hc .top-ad-slot{ margin:32px auto 0; }

.hc-ranking{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:4px 30px; }
.hc-rank{ display:flex; align-items:center; gap:14px; padding:12px 8px; border-bottom:1px solid var(--hc-line); min-width:0; min-height:64px; }
.hc-rank>strong{ font-size:27px; font-weight:900; color:var(--hc-rank); min-width:38px; text-align:center; }
.hc-ranking li:nth-child(-n+3) strong{ color:#e08d5f; }
.hc-rank img{ height:64px; width:78px; object-fit:cover; border-radius:13px; flex:0 0 auto; }
.hc-rank>div{ min-width:0; }
.hc-rank h3{ font-size:15px; font-weight:900; color:var(--hc-ink); }
.hc-rank small{ font-size:12px; color:var(--hc-muted); }
.hc-arrow{ margin-left:auto; color:var(--hc-muted); }
.hc-rank:hover h3{ color:var(--hc-link); }

.hc-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.hc-pill{ display:flex; align-items:center; gap:10px; min-height:48px; border:1px solid var(--hc-line); background:var(--hc-card); padding:10px 16px; border-radius:40px; font-size:14px; font-weight:800; color:var(--hc-ink); }
.hc-pill span{ font-size:20px; }
.hc-pill i{ font-style:normal; color:var(--hc-muted); margin-left:4px; }
.hc-pill:hover{ border-color:var(--hc-accent); }

.hc-rails{ padding:28px 0 0 !important; }
.hc-all-title{ font-family:'Nunito',system-ui,sans-serif; font-size:24px; font-weight:900; letter-spacing:-.5px; margin:30px 0 4px !important; color:var(--hc-ink); }

@media (max-width:700px){
  .hc{ padding:14px 2px 4px; }
  .hc-head{ flex-direction:column; align-items:stretch; }
  .hc h1{ font-size:34px; }
  .hc-head-side{ align-items:stretch; }
  .hc-tagline{ display:none; }
  .hc .random-btn{ width:100%; justify-content:center; }
  .hc-banner{ grid-template-columns:1fr; min-height:0; }
  .hc-banner-copy{ padding:24px 22px; }
  .hc-banner h2{ font-size:30px; }
  .hc-banner p{ font-size:13px; margin:12px 0 18px !important; }
  .hc-banner>img{ order:2; height:200px; min-height:0; }
  .hc-section-head{ margin-top:28px; }
  .hc-section-head h2{ font-size:21px; }
  .hc-section-head p{ font-size:12px; }
  .hc-bento{ grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:12px; }
  .hc-tile-1{ grid-column:span 2; grid-row:auto; }
  .hc-tile-1 img{ height:200px; }
  .hc-tile-2{ grid-column:span 2; min-height:150px; }
  .hc-tile-2 h3{ font-size:19px; }
  .hc-tile-3,.hc-tile-4{ display:block; }
  .hc-tile-3 img,.hc-tile-4 img{ height:110px; }
  .hc-tile-3 .hc-tile-copy,.hc-tile-4 .hc-tile-copy{ padding:12px; }
  .hc-ranking{ grid-template-columns:1fr; gap:0; }
  .hc-rank{ gap:12px; }
  .hc-rank img{ width:66px; height:56px; }
  .hc-pills{ gap:8px; }
  .hc-pill{ padding:8px 13px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .hc-tile,.hc-dots button::before{ transition:none; }
  .hc-tile:hover{ transform:none; }
}

/* Cover art on game cards (assets/covers/md, 360×317, made by Codex) */
.thumb.thumb-img.cover-thumb{ box-shadow:none; background-color:#efe9df; }
.thumb.thumb-img.cover-thumb::after{ display:none; }
.thumb.thumb-img.cover-thumb .ic{ display:none; }
html.dark .thumb.thumb-img.cover-thumb{ background-color:#231d55; }