:root{
  /* Neutral Poki-like theme (not girly) */
  --bg0:#07070b;
  --bg1:#0b0b12;
  --card:rgba(255,255,255,.08);
  --card2:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.56);
  --accent:#5b7cff;
  --accent2:#2ad6c3;
  --hot:#ff2466;
  --warn:#ffcf5a;
  --ok:#2ad6c3;
  --orange:#ff8a3d;
  --shadow:0 18px 70px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:26px;
  --gap:18px;
  --font: 'Space Grotesk', sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  touch-action: manipulation;
  overscroll-behavior: none;
}
img,video,canvas{max-width:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 700px at 18% 8%, rgba(255, 36, 102, .22), transparent 60%),
    radial-gradient(820px 640px at 86% 14%, rgba(255, 36, 102, .14), transparent 58%),
    radial-gradient(900px 700px at 65% 110%, rgba(0, 0, 0, .35), transparent 58%),
    radial-gradient(520px 420px at 18% 68%, rgba(255, 36, 102, .14), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 35%, #000000);
  overflow-x:hidden;
}

/* Global selection + smoothness */
::selection{background:rgba(124,92,255,.28); color:#0b0b17}
html{scroll-behavior:smooth}

/* Premium scrollbar */
*{scrollbar-color: rgba(124,92,255,.28) transparent; scrollbar-width: thin}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(124,92,255,.28), rgba(41,242,212,.20));
  border:3px solid transparent;
  background-clip:padding-box;
  border-radius:999px;
}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, rgba(124,92,255,.40), rgba(41,242,212,.26))}

/* Ensure no default dark/blue “blocky” text styles */
a{color:var(--text)}
a:visited{color:var(--text)}
code{color:rgba(0, 150, 132, .95)}

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px;top:16px;
  width:auto;height:auto;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:12px;
  z-index:50;
}

.app{
  min-height:100%;
  display:grid;
  grid-template-columns: 248px 1fr;
}

.sidebar{
  position:sticky;
  top:0;
  height:100dvh;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  gap:14px;
  border-right:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  backdrop-filter: blur(12px);
  z-index:30;
}

.brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:12px 12px;
  border-radius:18px;
  text-decoration:none;
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
}
.brand:hover{border-color:var(--stroke); background:rgba(255,255,255,.03)}
.brand__name{font-weight:980; letter-spacing:.2px; font-size:14px}
.brand__sub{margin-top:2px; font-size:12px; color:var(--muted)}

.sidebar__nav{display:flex; flex-direction:column; gap:10px; padding-top:4px; min-height:0}
.sidebar__nav-title{
  font-size:12px;
  font-weight:950;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:var(--muted2);
  padding:0 12px;
}
.cat-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 6px 10px;
  overflow:auto;
}
.cat-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:var(--text);
  cursor:pointer;
  transition:transform .14s ease, background .14s ease, border-color .14s ease;
}
.cat-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(91,124,255,.42);
  background:rgba(91,124,255,.12);
}
.cat-btn.is-active{
  border-color:rgba(42,214,195,.55);
  background:rgba(42,214,195,.12);
}
.cat-btn__ico{
  width:34px;height:34px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.86);
  flex:0 0 auto;
}
.cat-btn__ico i{font-size:15px; line-height:1}
.cat-btn__label{font-weight:950; letter-spacing:.2px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.icon-btn{
  width:52px;height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  position:relative;
}
.icon-btn__ico{
  width:24px;height:24px;
  display:grid;
  place-items:center;
  color:rgba(11, 11, 23, .78);
}
.icon-btn__ico i{font-size:18px; line-height:1}
.icon-btn__label{
  position:absolute;
  left:60px;
  top:50%;
  transform:translateY(-50%);
  display:none;
  white-space:nowrap;
  font-weight:950;
  letter-spacing:.2px;
  font-size:13px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow);
  color:var(--text);
  pointer-events:none;
  z-index:50;
}
.icon-btn:hover{
  transform:translateY(-1px) scale(1.02);
  border-color:rgba(124,92,255,.35);
  background:rgba(124,92,255,.10);
}
.icon-btn:hover .icon-btn__label{display:inline-flex}
.icon-btn:focus-visible .icon-btn__label{display:inline-flex}
.icon-btn.is-active{
  border-color:rgba(41,242,212,.45);
  background:rgba(41,242,212,.12);
}
.icon-btn.is-active .icon-btn__ico{color:rgba(0, 150, 132, .95)}

.sidebar__bottom{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
/* Buttons removed from sidebar bottom */
.sidebar__bottom{display:none}

.content{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(255, 36, 102, .14), rgba(0,0,0,.35));
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--stroke);
  justify-content:space-between;
}

.topbar__brand{display:flex; flex-direction:column; gap:2px; min-width:0}
.main-title{
  width: clamp(260px, 36vw, 560px);
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(255,255,255,.16));
}
.topbar__tag{color:var(--muted); font-weight:850; font-size:14px; white-space:nowrap}

.btn--coffee{
  border-color:rgba(255,207,90,.26);
  background:rgba(255,207,90,.08);
}
.btn--coffee-prominent{
  padding:12px 14px;
  border-color:rgba(255, 36, 102, .22);
  background:linear-gradient(135deg, rgba(36, 99, 255, .18), rgba(255, 36, 102, .16));
}
.btn--coffee-prominent:hover{
  border-color:rgba(255, 36, 102, .30);
  background:linear-gradient(135deg, rgba(36, 99, 255, .22), rgba(255, 36, 102, .20));
}
.btn--coffee:hover{
  border-color:rgba(255,207,90,.42);
  background:rgba(255,207,90,.10);
}
.btn__coffee-icon{font-size:14px; line-height:1}
.btn__coffee-text{white-space:nowrap}

.icon-pill{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:rgba(233,231,255,.88);
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.icon-pill:hover{transform:translateY(-1px); border-color:rgba(124,92,255,.32); background:rgba(124,92,255,.08)}
.icon-pill img{width:18px;height:18px; opacity:.92}

.search-panel{
  position:absolute;
  left:12px;
  right:12px;
  top:calc(100% + 10px);
  z-index:30;
}
.search-panel[hidden]{display:none}

.search{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.82);
  box-shadow:0 30px 120px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  position:relative;
}
.search:before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:999px;
  background:
    radial-gradient(260px 120px at 30% 50%, rgba(255, 36, 102, .22), transparent 60%),
    radial-gradient(260px 120px at 70% 50%, rgba(91,124,255,.18), transparent 60%);
  filter: blur(10px);
  pointer-events:none;
  z-index:-1;
}
.search__icon{width:18px;height:18px; opacity:.85}
.search__input{
  flex:1;
  background:transparent;
  border:0;
  outline:none;
  color:var(--text);
  font-size:14px;
}
.search__input::placeholder{color:rgba(255,255,255,.62)}
.search__clear{
  border:0;
  background:transparent;
  color:rgba(255,255,255,.86);
  cursor:pointer;
  padding:6px 8px;
  border-radius:999px;
}
.search__clear:hover{background:rgba(255,255,255,.05)}

.topbar__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.topbar__actions-row{display:flex; align-items:center; justify-content:flex-end; gap:10px}
.topbar__actions-row--coffee{flex-wrap:nowrap}

@media (min-width: 821px){
  .topbar__actions-row--coffee .btn--coffee-prominent{
    font-size:26px;
    padding:24px 28px;
    border-radius:18px;
    gap:12px;
  }
  .topbar__actions-row--coffee .btn__coffee-icon{font-size:28px}
}

.icon-pill--menu{position:relative}
.hamburger{
  width:18px;
  height:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.hamburger__bar{
  height:2px;
  border-radius:999px;
  background:rgba(233,231,255,.92);
  box-shadow:0 0 0 1px rgba(0,0,0,.10);
}
.icon-pill--menu:hover .hamburger__bar{background:rgba(255,255,255,.96)}

.categories-panel{
  position:absolute;
  left:12px;
  right:12px;
  top:calc(100% + 10px);
  z-index:31;
}
.categories-panel[hidden]{display:none !important}
.categories-pop{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.86);
  box-shadow:0 30px 120px rgba(0,0,0,.60);
  backdrop-filter: blur(14px);
  padding:12px;
}
.categories-pop__title{
  font-weight:950;
  letter-spacing:.2px;
  color:rgba(255,255,255,.85);
  font-size:12px;
  text-transform:uppercase;
  margin:0 0 10px;
}
.categories-pop__list{display:flex; flex-direction:column; gap:10px; max-height:min(62vh, 520px); overflow:auto}
.mcat{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  transition:transform .14s ease, background .14s ease, border-color .14s ease;
}
.mcat:hover{transform:translateY(-1px); border-color:rgba(255, 36, 102, .45); background:rgba(255, 36, 102, .12)}
.mcat.is-active{border-color:rgba(42,214,195,.55); background:rgba(42,214,195,.12)}
.mcat__ico{
  width:34px;height:34px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  flex:0 0 auto;
}
.mcat__ico i{font-size:15px; line-height:1}
.mcat__label{font-weight:950; letter-spacing:.2px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.main{padding:18px 16px 30px}

.hero{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius2);
  border:1px solid var(--stroke);
  background:linear-gradient(135deg, rgba(124,92,255,.14), rgba(41,242,212,.08));
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  padding:22px;
}
.hero__bg{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(600px 300px at 20% 30%, rgba(124,92,255,.24), transparent 55%),
    radial-gradient(500px 340px at 75% 25%, rgba(41,242,212,.18), transparent 55%),
    radial-gradient(640px 420px at 50% 80%, rgba(255,60,155,.12), transparent 60%);
  filter: blur(1px);
  pointer-events:none;
}
.hero__content{position:relative}
.hero__kicker{margin:0; color:var(--muted); font-weight:700; letter-spacing:.2px}
.hero__title{margin:8px 0 10px; font-size:28px; letter-spacing:.2px}
.hero__desc{margin:0 0 14px; color:var(--muted); max-width:64ch}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap}
.hero__meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

.hero__spotlight{position:relative; display:grid; place-items:center}
.spotlight-card{
  width:min(320px, 100%);
  border-radius:22px;
  padding:16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 20% 20%, rgba(0,0,0,.18), transparent 55%),
    linear-gradient(135deg, rgba(17,16,39,.85), rgba(12,11,20,.6));
  box-shadow:0 18px 70px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
}
.spotlight-card__shine{
  position:absolute;
  inset:-80px;
  background:
    conic-gradient(from 180deg, rgba(41,242,212,.16), rgba(124,92,255,.18), rgba(255,60,155,.12), rgba(41,242,212,.16));
  filter:blur(22px);
  opacity:0;
  pointer-events:none;
}
.spotlight-card__title{position:relative; font-weight:900; letter-spacing:.4px; font-size:14px}
.spotlight-card__subtitle{position:relative; margin-top:6px; color:var(--muted); font-size:13px}

/* Search suggestions */
.suggest{
  position:absolute;
  top:calc(100% + 10px);
  left:0; right:0;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(17,16,39,.92), rgba(7,6,11,.88));
  box-shadow:0 26px 90px rgba(0,0,0,.70);
  overflow:hidden;
  padding:6px;
}
.suggest__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.suggest__item:hover{background:rgba(124,92,255,.10); border-color:rgba(124,92,255,.28); transform:translateY(-1px)}
.suggest__left{display:flex; flex-direction:column; gap:2px; min-width:0}
.suggest__title{font-weight:950; letter-spacing:.2px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.suggest__sub{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.suggest__kbd{
  flex:0 0 auto;
  font-size:11px;
  font-weight:950;
  padding:6px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:rgba(233,231,255,.78);
}

/* Hero (carousel) */
.hero--carousel{
  min-height:auto;
  padding:18px;
  background:linear-gradient(135deg, rgba(124,92,255,.14), rgba(41,242,212,.07));
}
.hero__layers{position:absolute; inset:0; pointer-events:none}
.hero--carousel .hero__bg{
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(124,92,255,.30), transparent 60%),
    radial-gradient(820px 520px at 82% 18%, rgba(41,242,212,.22), transparent 58%),
    radial-gradient(920px 620px at 55% 95%, rgba(255,60,155,.18), transparent 60%),
    radial-gradient(420px 240px at 65% 25%, rgba(255,138,61,.10), transparent 70%);
  filter: blur(1px);
  animation:bgdrift 10s ease-in-out infinite;
}
@keyframes bgdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(10px,-8px,0) scale(1.03)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
.hero__grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.10;
  transform: perspective(900px) rotateX(50deg) translateY(120px);
  transform-origin:50% 90%;
  mask-image: radial-gradient(closest-side at 50% 70%, black 0%, transparent 70%);
  animation:gridmove 9s linear infinite;
}
@keyframes gridmove{from{background-position:0 0,0 0}to{background-position:0 140px,140px 0}}
.hero__orbs{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(260px 260px at 22% 38%, rgba(124,92,255,.20), transparent 70%),
    radial-gradient(260px 260px at 76% 34%, rgba(41,242,212,.16), transparent 70%),
    radial-gradient(240px 240px at 60% 70%, rgba(255,60,155,.14), transparent 70%);
  filter: blur(6px);
  opacity:.85;
}
.hero__streaks{
  position:absolute;
  inset:-60px;
  background:
    linear-gradient(110deg, transparent 35%, rgba(41,242,212,.10) 45%, transparent 55%),
    linear-gradient(110deg, transparent 40%, rgba(124,92,255,.10) 50%, transparent 60%),
    linear-gradient(110deg, transparent 45%, rgba(255,60,155,.08) 55%, transparent 65%);
  filter: blur(0px);
  opacity:.55;
  animation:streak 7.5s ease-in-out infinite;
}
@keyframes streak{
  0%{transform:translateX(-6%)}
  50%{transform:translateX(6%)}
  100%{transform:translateX(-6%)}
}
.hero__particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.85;
}

@keyframes titlegrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.hero__layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 410px) minmax(320px, 460px);
  gap:32px;
  align-items:stretch;
}
.hero__copy{
  min-width:0;
  padding:2px 2px;
  max-width:420px;
  justify-self:end;
}
.hero__copy-title{
  margin:6px 0 10px;
  font-weight:950;
  letter-spacing:.2px;
  font-size:22px;
  line-height:1.12;
}
.hero__copy-text{
  margin:0 0 10px;
  color:var(--muted);
  font-size:13.8px;
  line-height:1.55;
  max-width:64ch;
}
.hero__copy-text--muted{color:var(--muted2)}
.hero__featured{min-width:0}
.hero__side{min-width:0}
.hero__featured,
.hero__copy{align-self:center}
.hero__side{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.hero__side-head{
  font-weight:950;
  letter-spacing:.2px;
  font-size:12.5px;
  color:var(--muted);
  text-transform:uppercase;
  margin:0 0 10px;
}
.hero__side-games{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1vw, 18px);
  width:100%;
  height:100%;
  align-content:stretch;
  grid-auto-rows: 1fr;
}
.hero__side-game{
  aspect-ratio: 16 / 9;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  box-shadow:0 18px 80px rgba(0,0,0,.45);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  position:relative;
  display:block;
  width:100%;
}
.hero__side-game:hover{
  transform:translateY(-2px);
  border-color:rgba(124,92,255,.28);
  box-shadow:0 26px 110px rgba(0,0,0,.55);
}
.hero__side-game img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1.02);
  filter:saturate(1.06) contrast(1.06);
}
.hero__side-game:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,.03) 55%, rgba(0,0,0,.18)),
    radial-gradient(240px 180px at 30% 30%, rgba(124,92,255,.12), transparent 62%),
    radial-gradient(240px 180px at 70% 35%, rgba(41,242,212,.08), transparent 62%);
  pointer-events:none;
}
.hero__side-game.is-fallback{
  display:grid;
  place-items:center;
  background:
    radial-gradient(420px 220px at 30% 30%, rgba(124,92,255,.18), transparent 62%),
    radial-gradient(420px 220px at 70% 40%, rgba(41,242,212,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.hero__side-fallback{
  padding:14px;
  text-align:center;
  color:rgba(233,231,255,.80);
  font-weight:950;
  font-size:12.5px;
}

.carousel{
  position:relative;
  z-index:2;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 26px 120px rgba(0,0,0,.62);
  overflow:hidden;
  width:100%;
  max-width:980px;
  aspect-ratio: 16 / 9;
}
.carousel__viewport{overflow:hidden; height:100%}
.carousel__track{
  display:flex;
  width:100%;
  transform:translate3d(0,0,0);
  transition:transform .55s cubic-bezier(.2,.9,.2,1);
  height:100%;
}
.carousel__slide{
  flex:0 0 100%;
  display:block;
  padding:0;
  min-height:unset;
  height:100%;
  position:relative;
}
.carousel__slide:before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(540px 260px at 22% 30%, rgba(124,92,255,.22), transparent 62%),
    radial-gradient(540px 260px at 78% 30%, rgba(41,242,212,.16), transparent 62%),
    radial-gradient(600px 340px at 55% 95%, rgba(255,60,155,.12), transparent 65%);
  opacity:.85;
  pointer-events:none;
}
.carousel__link{
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  position:relative;
  cursor:pointer;
}
.carousel__link img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1.02);
  filter:saturate(1.06) contrast(1.06);
  transition:transform .22s ease, filter .22s ease;
}
.carousel__link:hover img{
  transform:scale(1.045);
  filter:saturate(1.08) contrast(1.08);
}
.carousel__link:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.06) 55%, rgba(0,0,0,.28)),
    radial-gradient(360px 260px at 30% 30%, rgba(124,92,255,.14), transparent 62%),
    radial-gradient(360px 260px at 70% 35%, rgba(41,242,212,.10), transparent 62%);
  pointer-events:none;
}

.carousel__meta{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:16px;
  gap:12px;
  pointer-events:none;
}
.carousel__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:980;
  letter-spacing:.25px;
  text-transform:uppercase;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);
  color:rgba(233,231,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 60px rgba(0,0,0,.30);
}
.carousel__badge--featured{border-color:rgba(124,92,255,.35); background:rgba(124,92,255,.12)}
.carousel__badge--trending{border-color:rgba(41,242,212,.35); background:rgba(41,242,212,.10)}
.carousel__badge--new{border-color:rgba(255,207,90,.35); background:rgba(255,207,90,.10)}
.carousel__meta-top{display:flex; gap:10px; align-items:center}
.carousel__meta-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.carousel__title{
  font-weight:980;
  letter-spacing:.2px;
  font-size:22px;
  line-height:1.1;
  color:rgba(255,255,255,.92);
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.carousel__cta{
  flex:0 0 auto;
  font-weight:950;
  letter-spacing:.2px;
  font-size:12px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.32);
  color:rgba(233,231,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
}

.carousel__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:rgba(233,231,255,.92);
  backdrop-filter: blur(10px);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  z-index:3;
}
.carousel__nav:hover{transform:translateY(-50%) translateY(-1px); background:rgba(124,92,255,.10); border-color:rgba(124,92,255,.30)}
.carousel__nav--prev{left:12px}
.carousel__nav--next{right:12px}
.carousel__dots{
  position:absolute;
  left:0; right:0;
  bottom:12px;
  display:flex;
  justify-content:center;
  gap:8px;
  z-index:3;
}
.carousel__dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, width .15s ease;
}
.carousel__dot:hover{transform:translateY(-1px); border-color:rgba(41,242,212,.35); background:rgba(41,242,212,.14)}
.carousel__dot.is-active{width:22px; background:linear-gradient(90deg, rgba(41,242,212,.35), rgba(124,92,255,.35)); border-color:rgba(124,92,255,.35)}
.hero__intro{
  position:relative;
  z-index:2;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding:16px 16px;
  box-shadow:0 22px 90px rgba(0,0,0,.50);
  align-self:start;
}
.hero__intro-title{
  margin:0 0 8px;
  font-weight:950;
  letter-spacing:.2px;
  font-size:14px;
  text-transform:uppercase;
  color:rgba(233,231,255,.88);
}
.hero__intro-text{
  margin:0;
  color:rgba(233,231,255,.70);
  font-size:13.5px;
  line-height:1.5;
}
.kbd--hint{margin-left:6px}
.kbd{
  font-family:var(--font);
  font-weight:950;
  font-size:11px;
  padding:3px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.20);
  color:rgba(233,231,255,.75);
}
.quick__head{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.quick__title{font-weight:950; letter-spacing:.3px}
.quick__sub{color:var(--muted); font-size:12.5px}
.quick__chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.quick-chip{
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:var(--text);
  border-radius:999px;
  padding:9px 12px;
  cursor:pointer;
  font-weight:950;
  font-size:12.5px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.quick-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(41,242,212,.42);
  background:rgba(41,242,212,.08);
  box-shadow:0 18px 80px rgba(0,0,0,.50);
}
.quick-chip__dot{
  width:8px;height:8px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(41,242,212,.9), rgba(124,92,255,.9));
  box-shadow:0 0 18px rgba(41,242,212,.22);
}
.quick-chip__badge{
  font-size:11px;
  font-weight:950;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  color:rgba(233,231,255,.78);
}
.quick-chip__badge--hot{border-color:rgba(255,60,155,.40); color:rgba(255,60,155,.95); background:rgba(255,60,155,.08)}
.quick-chip__badge--trend{border-color:rgba(41,242,212,.40); color:rgba(41,242,212,.95); background:rgba(41,242,212,.06)}
.quick-chip__badge--new{border-color:rgba(255,207,90,.40); color:rgba(255,207,90,.95); background:rgba(255,207,90,.06)}

.badge--hot{border-color:rgba(255,60,155,.48); color:rgba(255,60,155,.95)}
.badge--trend{border-color:rgba(41,242,212,.52); color:rgba(41,242,212,.95)}

/* Buttons: more premium glow */
.btn{box-shadow:0 18px 70px rgba(0,0,0,.25)}
.btn--primary{
  position:relative;
  overflow:hidden;
}
.btn--primary:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg, rgba(41,242,212,.55), rgba(124,92,255,.75), rgba(255,60,155,.50));
  opacity:.28;
  filter:blur(10px);
  pointer-events:none;
}
.btn--primary > *{position:relative}

/* Responsive iconic title */
@media (max-width: 1100px){
  .carousel__slide{min-height:300px}
  .carousel__title{font-size:26px}
}

.section-head{
  margin:24px 0 12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.section-title{margin:0; font-size:18px; letter-spacing:.2px}
.section-sub{margin:4px 0 0; color:var(--muted); font-size:13px}
.section-actions{display:flex; align-items:center; gap:10px}

/* Smooth section reveals */
.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:translateY(0);
}

.btn{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.05); border-color:rgba(124,92,255,.45)}
.btn:active{transform:translateY(0)}
.btn--primary{
  border-color:rgba(91,124,255,.55);
  background:linear-gradient(135deg, rgba(91,124,255,.95), rgba(42,214,195,.55));
  color:var(--text);
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.btn--primary:hover{border-color:rgba(41,242,212,.75)}
.btn--subtle{background:rgba(255,255,255,.03)}
.btn__icon{width:16px;height:16px}

.pill{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.01);
  color:var(--text);
  border-radius:999px;
  padding:8px 10px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
}
.pill img{width:16px;height:16px}
.pill--tiny{padding:6px 10px; font-size:12px}
.pill--ghost{background:transparent}
.pill--coffee{border-color:rgba(255,207,90,.38); background:rgba(255,207,90,.08)}

.chip{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.01);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.chip--ghost{background:transparent}

.category-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:16px;
  width:100%;
}
.cat-card{
  appearance:none;
  -webkit-appearance:none;
  color:var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  text-align:left;
  border:1px solid var(--stroke);
  border-radius:20px;
  padding:14px 14px;
  background:linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  min-height:78px;
  position:relative;
  overflow:hidden;
}
.cat-card *{color:inherit !important; -webkit-text-fill-color: inherit !important}
.cat-card__title{
  color:var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.cat-card__count{
  color:var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
  text-shadow:0 1px 10px rgba(0,0,0,.25);
}
.cat-card:hover{transform:translateY(-1px); border-color:rgba(124,92,255,.45); background:rgba(124,92,255,.06)}
.cat-card.is-active{border-color:rgba(41,242,212,.6); background:rgba(41,242,212,.06)}
.cat-card__title{margin:0; font-weight:900; letter-spacing:.2px; font-size:14px}
.cat-card__count{margin:6px 0 0; color:var(--muted); font-size:12px; font-weight:800}
.cat-card__glow{
  position:absolute;
  inset:-40px;
  opacity:.55;
  filter:blur(22px);
  pointer-events:none;
  background:radial-gradient(circle at 20% 30%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(circle at 80% 60%, rgba(41,242,212,.16), transparent 55%);
}

.tile-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-flow:dense;
  align-items:stretch;
  gap: clamp(10px, 1.1vw, 18px);
  width:100%;
  grid-auto-rows: 10px;
}
.tile{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(14, 18, 41, .10);
  background:rgba(255,255,255,.06);
  box-shadow:var(--shadow);
  cursor:pointer;
  height:auto;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  text-decoration:none;
  color:inherit;
  display:block;
}
.tile:hover{
  transform:translateY(-2px) scale(1.01);
  border-color:rgba(91,124,255,.42);
  box-shadow:0 22px 90px rgba(13, 18, 48, .18);
}
.tile:focus-visible{
  outline:3px solid rgba(36, 99, 255, .30);
  outline-offset:3px;
}
.tile__img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  transform:scale(1.02);
  transition:transform .22s ease, filter .22s ease;
  filter:saturate(1.03) contrast(1.02);
  background:rgba(0,0,0,.35);
}
.tile:hover .tile__img{transform:scale(1.01); filter:saturate(1.06) contrast(1.04)}
.tile.is-soon:after{
  content:"Soon";
  position:absolute;
  top:10px;
  right:10px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.2px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}
.tile__soon{
  position:absolute;
  inset:0;
  background:
    linear-gradient(0deg, rgba(255, 36, 102, .16), rgba(36, 99, 255, .10)),
    repeating-linear-gradient(135deg, rgba(11, 11, 23, .10) 0 10px, rgba(255,255,255,0) 10px 20px);
  mix-blend-mode:multiply;
}
.tile--wide{grid-column: span 2}
.tile--xl{grid-column: span 3}
.badge{
  font-size:11px;
  font-weight:900;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.badge--new{border-color:rgba(41,242,212,.45); color:rgba(41,242,212,.95)}
.badge--soon{border-color:rgba(255,207,90,.45); color:rgba(255,207,90,.95)}
.badge--feat{border-color:rgba(255,60,155,.45); color:rgba(255,60,155,.95)}

/* legacy tile text styles intentionally unused */
.tile__thumb,
.tile__badges,
.tile__body,
.tile__title,
.tile__desc,
.tile__meta,
.tagline,
.tag,
.play{
  display:none !important;
}

.row{margin-top:6px}
.rows{display:none !important}
.row__scroller{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: 260px;
  gap:12px;
  overflow:auto hidden;
  padding-bottom:8px;
  scroll-snap-type:x mandatory;
}
.row__scroller::-webkit-scrollbar{height:10px}
.row__scroller::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:999px}
.row__scroller .tile{scroll-snap-align:start; min-height:220px}

.empty{
  margin:16px 0 0;
  padding:18px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.02);
}
.empty h3{margin:0 0 6px}
.empty p{margin:0 0 12px; color:var(--muted)}

.request{margin-top:18px}
.request__card{
  border-radius:var(--radius2);
  border:1px solid var(--stroke);
  background:linear-gradient(135deg, rgba(124,92,255,.10), rgba(41,242,212,.05));
  box-shadow:var(--shadow);
  padding:20px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
}
.request__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.neon-box{
  border-radius:20px;
  padding:16px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(17,16,39,.65), rgba(7,6,11,.45));
}
.neon-box__title{font-weight:950; letter-spacing:.3px}
.neon-box__body{margin-top:8px; color:var(--muted); font-size:13px; line-height:1.4}
.neon-box code{color:rgba(41,242,212,.95)}

.footer{
  margin-top:22px;
  padding:14px 2px 2px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:rgba(233,231,255,.55);
  font-size:12px;
}
.footer__link{color:rgba(233,231,255,.75); text-decoration:none}
.footer__link:hover{text-decoration:underline}

.toast{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  box-shadow:0 16px 60px rgba(0,0,0,.55);
  max-width:min(520px, calc(100vw - 28px));
  z-index:60;
}

@media (max-width: 1100px){
  .category-grid{grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))}
  .tile-grid{grid-template-columns: repeat(auto-fill, minmax(170px, 1fr))}
}

@media (min-width: 420px) and (max-width: 767px){
  .tile-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .tile--xl{grid-column: span 2}
}

@media (max-width: 520px){
  .category-grid{grid-template-columns: 1fr}
  .tile-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .tile--wide,.tile--tall,.tile--xl{grid-column: span 1}
}

@media (max-width: 360px){
  .tile-grid{grid-template-columns: 1fr}
}

@media (max-width: 900px){
  .hero__layout{grid-template-columns:1fr}
  .carousel{width:100%}
}

@media (max-width: 820px){
  .app{grid-template-columns: 1fr}
  /* Mobile: remove bottom picker entirely */
  .sidebar{display:none}
  .pill span{display:none}
  .main{padding-bottom:22px}
  .hero{grid-template-columns:1fr; padding:18px}
  .carousel__slide{
    grid-template-columns:1fr;
    min-height:unset;
    padding:14px;
  }
  .carousel__title{font-size:26px}
  .carousel__nav{width:42px;height:42px}
  .request__card{grid-template-columns:1fr}
  .tile-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .category-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  /* Same iOS Safari haze issue can occur on the sticky top bar. */
  .topbar{
    padding:12px 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg, rgba(255, 36, 102, .18), rgba(0,0,0,.45));
  }
  .topbar__actions{gap:8px}
  .topbar__actions .btn{padding:10px 10px}
  .topbar__tag{display:none}
  .topbar__actions #headerRandom{display:none}
  .btn__coffee-text{display:none}
  .search-panel{left:10px; right:10px}
}

@media (max-width: 520px){
  .topbar__name{font-size:16px}
  .icon-pill{width:40px;height:40px}
}

@media (max-width: 768px){
  /* Mobile: show full hero artwork (no cropping) */
  .hero--carousel{padding:12px}
  .hero__layout{display:block; width:100%; max-width:100%}
  .hero__copy,
  .hero__side{display:none !important}
  .carousel{
    width:100%;
    max-width:100%;
    margin-inline:auto;
    aspect-ratio: 16 / 9;
    overflow:hidden;
  }
  .carousel__slide{height:100%}
  .carousel__link img{
    object-fit:contain !important;
    transform:none !important;
    background:rgba(0,0,0,.22);
  }
  .carousel__link:hover img{transform:none !important}
  .carousel__meta{padding:12px}
  .carousel__title{font-size:18px}
  .carousel__cta{padding:9px 11px}
}

@media (max-width: 1100px){
  .hero__copy{display:none !important}
  .hero__layout{grid-template-columns:1fr}
  .carousel{margin-inline:auto}
}

@media (max-width: 1350px){
  .hero__layout{grid-template-columns: minmax(0, 1fr) minmax(320px, 430px)}
  .hero__side{display:none !important}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important}
}
.carousel__link.is-fallback{
  display:grid;
  place-items:center;
  background:
    radial-gradient(520px 260px at 30% 30%, rgba(124,92,255,.20), transparent 62%),
    radial-gradient(520px 260px at 70% 40%, rgba(41,242,212,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.carousel__fallback{
  padding:18px;
  text-align:center;
}
.carousel__fallback-title{
  font-weight:950;
  letter-spacing:.25px;
  font-size:16px;
}
.carousel__fallback-sub{
  margin-top:6px;
  color:rgba(233,231,255,.68);
  font-weight:850;
  font-size:12.5px;
}
.footer{
  margin-top:16px;
  padding:14px 6px 6px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  border-top:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255, 36, 102, .08), rgba(0,0,0,.22));
}