@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #080B14;
  --surface: #111827;
  --surface-2: #172033;
  --line: #253047;
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --electric: #A855F7;
  --blue: #2563EB;
  --cyan: #06B6D4;
  --purple: #7C3AED;
  --text: #FFFFFF;
  --muted: #94A3B8;
  --dim: #64748B;
  --max: 1540px;
}

body { background: var(--bg); color: var(--text); }
.topbar { height: 66px; padding: 0 18px; gap: 14px; background: rgba(8,11,20,.96); border-bottom-color: #1b2538; }
.menu-toggle { width: 38px; height: 38px; border-color: #27334a; background: #0d1422; }
.brand { min-width: 190px; width: 190px; height: 46px; display: flex; align-items: center; }
.brand img { width: 178px; height: 42px; object-fit: contain; object-position: left center; }
.search { max-width: 640px; height: 40px; background: #0d1422; border-color: #253047; }
.search:focus-within { border-color: rgba(37,99,235,.75); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.search input::placeholder { color: #64748B; }
.header-action, .header-login { border-color: #253047; background: #0d1422; }
.header-action:hover { border-color: rgba(37,99,235,.55); background: #141e31; }
.header-login { background: var(--primary); border-color: rgba(37,99,235,.72); box-shadow: 0 8px 20px rgba(37,99,235,.18); }
.header-login:hover { background: var(--primary-hover); }
.top-actions select { border-color: #253047; background: #0d1422; }

.shell { max-width: var(--max); display: grid; grid-template-columns: 226px minmax(0,1fr); }
.sidebar { position: sticky; inset: auto; top: 66px; height: calc(100vh - 66px); width: 226px; transform: none; overflow-y: auto; background: #0b101b; border-right: 1px solid #1b2538; padding: 18px 12px; display: flex; flex-direction: column; }
.drawer-head { display: none; }
.sidebar nav { gap: 3px; }
.nav-label { margin: 15px 9px 6px; color: #64748B; }
.sidebar nav button { border: 1px solid transparent; color: #94A3B8; padding: 9px 10px; border-radius: 8px; font-size: .76rem; }
.sidebar nav button span { width: 22px; color: #60A5FA; }
.sidebar nav button:hover { background: #111a2a; border-color: #202d44; color: #fff; }
.sidebar nav button.active { background: rgba(37,99,235,.14); border-color: rgba(37,99,235,.30); box-shadow: inset 2px 0 var(--primary); color: #fff; }
.sidebar-note { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding: 13px; background: linear-gradient(145deg, rgba(37,99,235,.14), rgba(6,182,212,.07)); border-color: #263653; }
.sidebar-note > i { color: var(--cyan); margin-top: 2px; }
.sidebar-note strong { font-size: .74rem; }
.sidebar-note p { color: var(--muted); }
.sidebar footer { border-top: 1px solid #1b2538; padding-top: 12px; }
.scrim { inset: 66px 0 0; }

main { padding: 22px 22px 58px; min-width: 0; }
.hero { min-height: 258px; grid-template-columns: minmax(0,1.35fr) minmax(300px,.78fr); border-color: #26334b; border-radius: 15px; background: radial-gradient(circle at 76% 30%, rgba(6,182,212,.11), transparent 28%), radial-gradient(circle at 58% 100%, rgba(37,99,235,.15), transparent 42%), #0d1422; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.hero-copy { padding: 31px 34px; }
.eyebrow { color: #60A5FA; }
.hero h1 { font-size: clamp(2rem,3.5vw,3.15rem); }
.hero h1 em { background: linear-gradient(90deg, #60A5FA, #06B6D4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: #94A3B8; max-width: 610px; }
.hero-actions button { background: var(--primary); box-shadow: 0 10px 26px rgba(37,99,235,.20); }
.hero-actions button:hover { background: var(--primary-hover); }
.hero-actions a { border-color: #2b3851; background: #0a111d; }
.hero-actions a:hover { border-color: rgba(6,182,212,.55); color: #fff; }
.hero-stats { color: #64748B; }
.hero-stats i { color: var(--cyan); }
.hero-feature { min-height: 258px; background: #080d17; }
.hero-feature::after { background: linear-gradient(90deg, rgba(8,11,20,.55), transparent 55%), linear-gradient(0deg, rgba(8,11,20,.7), transparent 55%); }
.hero-feature img { opacity: .86; object-fit: cover; }
.hero-feature-copy { left: 18px; right: 18px; bottom: 15px; }
.hero-feature-copy span { color: #CBD5E1; }
.hero-feature-copy h2 { font-size: 1.05rem; }
.hero-feature-copy p { color: #94A3B8; }

.quick-nav { margin: 16px 0 14px; padding: 13px 15px; background: #0d1422; border-color: #202d44; }
.quick-nav h2 { font-size: .95rem; }
.category-pills button { background: #0a111d; border-color: #26334b; color: #94A3B8; }
.category-pills button:hover, .category-pills button.active { background: rgba(37,99,235,.14); border-color: rgba(37,99,235,.48); color: #fff; }
.category-pills button.active { box-shadow: inset 0 -2px var(--cyan); }

.game-row { margin-bottom: 20px; }
.row-head h2, .section-head h2 { font-size: 1.05rem; }
.row-head button { border-color: #26334b; background: #0d1422; }
.row-head button:hover { border-color: rgba(37,99,235,.55); }
.row-track { grid-auto-columns: clamp(190px,19vw,235px); }
.game-card { border-color: #202d44; background: #0f1726; }
.game-card:hover { border-color: rgba(37,99,235,.65); box-shadow: 0 16px 36px rgba(0,0,0,.32); transform: translateY(-2px); }
.thumb { background: #0a111d; }
.thumb span { background: rgba(8,11,20,.82); border-color: rgba(255,255,255,.14); }
.thumb i { background: var(--primary); color: #fff; }
.card-copy h3 { color: #fff; }
.card-copy p { color: #94A3B8; }
.card-copy small { color: #64748B; }
.card-copy .developer-credit { color: #8b9bb2; }

.vysai { background: linear-gradient(105deg, rgba(37,99,235,.11), rgba(6,182,212,.06) 55%, rgba(124,58,237,.05)); border-color: #263653; }
.vysai-mark { background: linear-gradient(145deg, var(--primary), var(--cyan)); }
.moods button { background: #0a111d; border-color: #26334b; color: #94A3B8; }
.moods button:hover { border-color: var(--cyan); color: #fff; background: rgba(6,182,212,.06); }

.game-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.category-showcase { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.category-tile { min-height: 76px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 11px; align-items: center; text-align: left; padding: 11px 12px; border: 1px solid #202d44; border-radius: 10px; background: #0d1422; color: #fff; cursor: pointer; }
.category-tile:hover { border-color: rgba(37,99,235,.55); background: #111a2a; transform: translateY(-2px); }
.category-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(37,99,235,.14); color: #60A5FA; }
.category-tile strong { font-size: .75rem; }
.category-tile > span:last-child { color: #64748B; font-size: .6rem; }
.empty { background: #0f1726; border-color: #31415e; }
.empty button { background: var(--primary); color: #fff; }
.empty button:hover { background: var(--primary-hover); }

.portal-footer { background: #070a12; border-top-color: #1b2538; }
.portal-footer-inner { max-width: var(--max); }
.footer-brand { width: 150px; height: 34px; }
.footer-brand img { max-width: 150px; max-height: 34px; object-fit: contain; object-position: left center; }
.portal-footer p, .portal-footer a { color: #94A3B8; }
.portal-footer a:hover { color: #fff; }
.portal-footer input { background: #0d1422; border-color: #26334b; color: #fff; }
.portal-footer input:focus { border-color: rgba(37,99,235,.7); box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
.portal-footer form button { border: 0; border-radius: 7px; background: var(--primary); color: #fff; padding: 7px 10px; font-weight: 800; font-size: .7rem; }
.portal-footer form button:hover { background: var(--primary-hover); }
.portal-footer-bottom { border-top-color: #1b2538; color: #64748B; }

@media (max-width: 1200px) {
  .shell { grid-template-columns: 205px minmax(0,1fr); }
  .sidebar { width: 205px; }
  .game-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .category-showcase { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .brand { min-width: 145px; width: 145px; }
  .brand img { width: 140px; }
  .header-action span { display: none; }
  .shell { display: block; }
  .sidebar { position: fixed; inset: 66px auto 0 0; width: 270px; height: auto; transform: translateX(-105%); z-index: 80; }
  .sidebar.open { transform: none; }
  .drawer-head { display: flex; }
  main { padding: 16px; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 28px; }
  .hero-feature { min-height: 190px; max-height: 220px; }
  .quick-nav { grid-template-columns: 1fr; }
  .category-pills { justify-content: flex-start; }
  .game-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .category-showcase { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .topbar { height: 58px; padding: 0 9px; }
  .menu-toggle { width: 34px; height: 34px; }
  .brand { min-width: 115px; width: 115px; }
  .brand img { width: 112px; height: 34px; }
  .search { display: none; }
  .header-action { display: none; }
  .header-login { padding: 8px 10px; }
  .top-actions select { padding: 7px 4px; }
  .sidebar { top: 58px; }
  main { padding: 10px 10px 36px; }
  .hero-copy { padding: 24px 20px; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: .78rem; }
  .hero-stats { flex-wrap: wrap; gap: 8px 12px; }
  .hero-feature { min-height: 160px; }
  .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .category-showcase { grid-template-columns: 1fr; }
  .vysai { grid-template-columns: auto 1fr; }
  .moods { grid-column: 1 / -1; flex-wrap: wrap; }
  .portal-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  .game-grid { grid-template-columns: 1fr; }
  .portal-footer-inner { grid-template-columns: 1fr; }
}