/* PuzzleHub Home + catalogue -------------------------------------------------
   Category-first discovery for a catalogue that can grow well beyond 71 games. */

.home-page,
.catalogue{
  width:min(1280px,calc(100% - 40px));
  margin-inline:auto;
}

.home-page a,
.catalogue a{
  text-decoration:none;
}

.home-page .kicker,
.catalogue .kicker{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* Home --------------------------------------------------------------------- */
.home-hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:clamp(34px,6vw,82px);
  align-items:center;
  min-height:600px;
  padding:clamp(64px,8vw,104px) 0 72px;
}

.home-hero-copy h1{
  max-width:780px;
  margin:.18em 0 .28em;
  font-size:clamp(3.2rem,6.1vw,6.2rem);
  line-height:.91;
  letter-spacing:-.067em;
}

.home-hero-copy h1 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}

.home-hero-copy>p{
  max-width:720px;
  margin:0;
  color:var(--muted);
  font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.68;
}

.home-search{
  max-width:720px;
  margin-top:28px;
}

.home-search>label{
  display:block;
  margin-bottom:9px;
  font-size:.78rem;
  font-weight:800;
}

.home-search>div{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  min-height:60px;
  padding:7px 7px 7px 17px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 16px 42px color-mix(in srgb,var(--bg) 72%,transparent);
  transition:border-color .18s ease,box-shadow .18s ease;
}

.home-search>div:focus-within{
  border-color:color-mix(in srgb,var(--accent) 62%,var(--line));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),0 18px 44px color-mix(in srgb,var(--bg) 66%,transparent);
}

.home-search>div>span{
  color:var(--muted);
  font-size:1.35rem;
}

.home-search input{
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font:inherit;
}

.home-search button{
  border:0;
  border-radius:12px;
  padding:13px 18px;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,var(--accent2)));
  color:#fff;
  font-weight:850;
  cursor:pointer;
}

.home-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.home-hero-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:26px;
}

.home-hero-stats span{
  min-width:118px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  color:var(--muted);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.home-hero-stats strong{
  color:var(--text);
  font-size:1.18rem;
  letter-spacing:-.03em;
}

.home-category-mosaic{
  padding:20px;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    radial-gradient(circle at 5% 0,color-mix(in srgb,var(--accent) 11%,transparent),transparent 18rem),
    radial-gradient(circle at 100% 100%,color-mix(in srgb,var(--accent2) 9%,transparent),transparent 18rem),
    var(--surface);
  box-shadow:0 28px 70px color-mix(in srgb,var(--bg) 72%,transparent);
}

.home-category-mosaic-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
  padding:2px 2px 0;
  font-size:.78rem;
  font-weight:800;
}

.home-category-mosaic-head span{color:var(--muted)}
.home-category-mosaic-head a{color:var(--text)}

.home-category-mosaic-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.hero-category-tile{
  min-height:148px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:4px;
  padding:18px;
  border:1px solid color-mix(in srgb,var(--category-accent) 25%,var(--line));
  border-radius:20px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--category-accent) 16%,var(--surface)),color-mix(in srgb,var(--category-accent-2) 6%,var(--surface)));
  color:var(--text);
  transition:transform .18s ease,border-color .18s ease;
}

.hero-category-tile:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--category-accent) 58%,var(--line));
}

.hero-category-tile>span{
  margin-bottom:auto;
  font-size:1.8rem;
  font-weight:950;
}

.hero-category-tile strong{
  font-size:1rem;
  letter-spacing:-.02em;
}

.hero-category-tile small{
  color:var(--muted);
  font-size:.72rem;
  font-weight:750;
}

.home-section{
  padding:64px 0 72px;
  border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent);
}

.home-section-head{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
  margin-bottom:28px;
}

.home-section-head h2,
.competitive-showcase h2{
  margin:.13em 0 .16em;
  font-size:clamp(2rem,4vw,3.7rem);
  line-height:.98;
  letter-spacing:-.052em;
}

.home-section-head p,
.competitive-showcase p{
  max-width:720px;
  margin:0;
  color:var(--muted);
  line-height:1.62;
}

.home-section-head>a{
  flex:none;
  color:var(--muted);
  font-weight:800;
}

.home-section-head>a:hover{color:var(--text)}

/* Category cards ----------------------------------------------------------- */
.category-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.category-card{
  min-height:190px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:16px;
  align-items:start;
  padding:20px;
  border:1px solid color-mix(in srgb,var(--category-accent) 20%,var(--line));
  border-radius:22px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--category-accent) 9%,var(--surface)),color-mix(in srgb,var(--category-accent-2) 4%,var(--surface)));
  color:var(--text);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.category-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--category-accent) 55%,var(--line));
  box-shadow:0 18px 42px color-mix(in srgb,var(--bg) 70%,transparent);
}

.category-card-symbol{
  width:58px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:color-mix(in srgb,var(--category-accent) 16%,var(--surface2));
  color:var(--text);
  font-size:1.05rem;
  font-weight:950;
  text-align:center;
}

.category-card-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}

.category-card-copy strong{
  font-size:1.1rem;
  letter-spacing:-.025em;
}

.category-card-description{
  color:var(--muted);
  font-size:.82rem;
  line-height:1.48;
}

.category-card-examples{
  margin-top:auto;
  color:color-mix(in srgb,var(--category-accent) 70%,var(--muted));
  font-size:.69rem;
  font-weight:800;
  line-height:1.4;
}

.category-card-arrow{
  align-self:center;
  color:color-mix(in srgb,var(--category-accent) 70%,var(--muted));
  font-size:1.2rem;
}

/* Game cards --------------------------------------------------------------- */
.catalog-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.catalog-game-card{
  min-height:248px;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:17px;
  border:1px solid color-mix(in srgb,var(--card-accent) 18%,var(--line));
  border-radius:22px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--card-accent) 6%,var(--surface)),var(--surface));
  color:var(--text);
  box-shadow:0 10px 28px color-mix(in srgb,var(--bg) 72%,transparent);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.catalog-game-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--card-accent) 52%,var(--line));
  box-shadow:0 18px 40px color-mix(in srgb,var(--bg) 64%,transparent);
}

.catalog-game-card[hidden]{display:none!important}

.game-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.game-card-visual{
  width:52px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  padding:5px;
  border:1px solid color-mix(in srgb,var(--card-accent) 28%,var(--line));
  border-radius:15px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--card-accent) 20%,var(--surface)),color-mix(in srgb,var(--card-accent-2) 10%,var(--surface)));
  font-size:.9rem;
  font-weight:950;
  letter-spacing:-.04em;
  text-align:center;
  overflow-wrap:anywhere;
}

.game-card-state{
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.game-card-copy{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.game-card-copy strong{
  font-size:1.18rem;
  letter-spacing:-.03em;
}

.game-card-summary{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.5;
}

.game-category-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
}

.game-category-tag{
  padding:5px 7px;
  border:1px solid color-mix(in srgb,var(--tag-accent) 25%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--tag-accent) 8%,var(--surface));
  color:color-mix(in srgb,var(--tag-accent) 76%,var(--text));
  font-size:.62rem;
  font-weight:800;
}

.game-card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-top:12px;
  border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  font-size:.75rem;
  font-weight:850;
}

.game-card-footer span:last-child{
  color:color-mix(in srgb,var(--card-accent) 72%,var(--text));
  font-size:1rem;
  transition:transform .18s ease;
}

.catalog-game-card:hover .game-card-footer span:last-child{transform:translateX(3px)}

/* CPU section -------------------------------------------------------------- */
.competitive-showcase{
  display:grid;
  grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);
  gap:clamp(28px,5vw,58px);
  align-items:center;
  margin:34px 0 90px;
  padding:clamp(26px,4vw,48px);
  border:1px solid color-mix(in srgb,#ef4444 22%,var(--line));
  border-radius:28px;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,#ef4444 9%,transparent),transparent 22rem),
    var(--surface);
}

.competitive-showcase-copy .button{margin-top:20px;display:inline-flex}
.competitive-preview{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Catalogue --------------------------------------------------------------- */
.catalogue{
  padding:clamp(52px,7vw,86px) 0 110px;
}

.catalogue-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:32px;
  align-items:end;
  padding-bottom:32px;
}

.catalogue-hero h1{
  max-width:820px;
  margin:.14em 0 .2em;
  font-size:clamp(3rem,5.7vw,5.6rem);
  line-height:.93;
  letter-spacing:-.065em;
}

.catalogue-hero p{
  max-width:730px;
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.catalogue-count{
  display:flex;
  align-items:end;
  gap:12px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
}

.catalogue-count strong{
  font-size:3rem;
  line-height:.78;
  letter-spacing:-.07em;
}

.catalogue-count span{
  color:var(--muted);
  font-size:.67rem;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.catalogue-controls{
  display:grid;
  grid-template-columns:auto minmax(320px,1fr);
  gap:12px;
  align-items:stretch;
  margin-bottom:34px;
}

.catalogue-mode-switch{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:5px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--surface);
}

.catalogue-mode-switch button{
  min-width:138px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:12px;
  padding:12px 15px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:.82rem;
  font-weight:800;
  cursor:pointer;
}

.catalogue-mode-switch button strong{
  min-width:26px;
  padding:3px 6px;
  border-radius:999px;
  background:color-mix(in srgb,var(--line) 70%,transparent);
  color:var(--text);
  font-size:.68rem;
}

.catalogue-mode-switch button.is-active{
  background:color-mix(in srgb,var(--accent) 12%,var(--surface2));
  color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,var(--line));
}

.catalogue-search{
  min-height:58px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--surface);
  transition:border-color .18s ease,box-shadow .18s ease;
}

.catalogue-search:focus-within{
  border-color:color-mix(in srgb,var(--accent) 58%,var(--line));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent);
}

.catalogue-search>span{
  color:var(--muted);
  font-size:1.35rem;
}

.catalogue-search input{
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font:inherit;
}

.catalogue-search kbd{
  padding:4px 7px;
  border:1px solid var(--line);
  border-radius:7px;
  color:var(--muted);
  background:var(--surface2);
  font-size:.68rem;
}

.catalogue-category-panel{
  margin-bottom:54px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:26px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
}

.catalogue-category-panel[hidden]{display:none!important}

.catalogue-section-title{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:18px;
}

.catalogue-section-title h2{
  margin:.18em 0 0;
  font-size:clamp(1.55rem,2.8vw,2.4rem);
  letter-spacing:-.04em;
}

.catalogue-clear-link{
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:.76rem;
  font-weight:800;
  cursor:pointer;
}

.catalogue-clear-link:hover{color:var(--text)}

.catalogue-category-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.catalog-category-option{
  min-height:86px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid color-mix(in srgb,var(--category-accent) 16%,var(--line));
  border-radius:16px;
  background:color-mix(in srgb,var(--category-accent) 4%,var(--surface));
  color:var(--text);
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}

.catalog-category-option:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--category-accent) 48%,var(--line));
}

.catalog-category-option.is-active{
  border-color:color-mix(in srgb,var(--category-accent) 72%,var(--line));
  background:linear-gradient(145deg,color-mix(in srgb,var(--category-accent) 15%,var(--surface)),color-mix(in srgb,var(--category-accent-2) 7%,var(--surface)));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--category-accent) 12%,transparent);
}

.catalog-category-option--all{
  --category-accent:var(--accent);
  --category-accent-2:var(--accent2);
}

.catalog-category-option-symbol{
  width:42px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:color-mix(in srgb,var(--category-accent) 12%,var(--surface2));
  font-size:.82rem;
  font-weight:950;
}

.catalog-category-option>span:last-child{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.catalog-category-option strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.8rem;
}

.catalog-category-option small{
  color:var(--muted);
  font-size:.66rem;
  font-weight:700;
}

.catalogue-results{
  scroll-margin-top:92px;
}

.catalogue-result-bar{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:20px;
}

.catalogue-result-bar h2{
  margin:.15em 0 0;
  font-size:clamp(1.8rem,3vw,2.7rem);
  letter-spacing:-.045em;
}

#game-results-count{
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
}

.catalogue-empty{
  margin:30px 0;
  padding:48px 24px;
  border:1px dashed var(--line);
  border-radius:22px;
  text-align:center;
  background:color-mix(in srgb,var(--surface) 74%,transparent);
}

.catalogue-empty[hidden]{display:none!important}
.catalogue-empty>span{font-size:2rem;color:var(--muted)}
.catalogue-empty h2{margin:.3em 0 .25em;font-size:1.7rem}
.catalogue-empty p{margin:0 0 18px;color:var(--muted)}

.catalogue-more{
  display:flex;
  margin:28px auto 0;
}

.catalogue-more[hidden]{display:none!important}

/* Responsive --------------------------------------------------------------- */
@media (max-width:1120px){
  .catalog-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalogue-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .competitive-preview{grid-template-columns:1fr}
}

@media (max-width:900px){
  .home-hero{
    grid-template-columns:1fr;
    min-height:0;
    padding-top:62px;
  }
  .home-category-mosaic{
    width:100%;
    max-width:none;
  }
  .competitive-showcase{grid-template-columns:1fr}
  .competitive-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalogue-controls{grid-template-columns:1fr}
  .catalogue-mode-switch{max-width:430px}
}

@media (max-width:760px){
  .home-page,
  .catalogue{width:min(100% - 28px,1280px)}
  .home-hero-copy h1{font-size:clamp(3rem,13vw,4.8rem)}
  .home-section{padding:48px 0 54px}
  .home-section-head{align-items:start;flex-direction:column;gap:12px}
  .category-grid,
  .catalog-card-grid,
  .competitive-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalogue-hero{grid-template-columns:1fr}
  .catalogue-count{justify-self:start}
  .catalogue-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:540px){
  .home-page,
  .catalogue{width:min(100% - 22px,1280px)}
  .home-hero{padding-top:42px;gap:28px}
  .home-hero-copy h1{font-size:clamp(2.75rem,14vw,4rem)}
  .home-search>div{grid-template-columns:auto minmax(0,1fr);padding-right:12px}
  .home-search button{grid-column:1/-1;width:100%}
  .home-category-mosaic{padding:14px;border-radius:22px}
  .home-category-mosaic-grid{grid-template-columns:1fr 1fr}
  .hero-category-tile{min-height:124px;padding:14px}
  .category-grid,
  .catalog-card-grid,
  .competitive-preview{grid-template-columns:1fr}
  .category-card{min-height:0}
  .catalog-game-card{min-height:225px}
  .catalogue{padding-top:42px}
  .catalogue-hero h1{font-size:clamp(2.7rem,13vw,4rem)}
  .catalogue-mode-switch{width:100%;max-width:none}
  .catalogue-mode-switch button{min-width:0;padding-inline:10px}
  .catalogue-search kbd{display:none}
  .catalogue-category-panel{padding:16px;border-radius:20px}
  .catalogue-category-grid{grid-template-columns:1fr 1fr}
  .catalog-category-option{min-height:78px;grid-template-columns:38px minmax(0,1fr);padding:10px}
  .catalog-category-option-symbol{width:38px}
  .catalogue-result-bar{align-items:start;flex-direction:column;gap:7px}
}

@media (max-width:390px){
  .home-category-mosaic-grid,
  .catalogue-category-grid{grid-template-columns:1fr}
}