/* PixPro Games · midnight navy, luminous cyan, and a game-first catalog. */
:root {
  color-scheme: dark;
  --bg: var(--c_platform_101116, #071421);
  --surface: var(--c_platform_191b22, #0c1d30);
  --raised: var(--c_platform_pixpro_132a3d, #132a3d);
  --line: var(--c_platform_pixpro_22394d, #22394d);
  --text: var(--c_platform_f5f6f8, #f4fbff);
  --muted: var(--c_platform_pixpro_9eb3c6, #9eb3c6);
  --mint: var(--c_platform_65f3b2, #32d5f4);
  font-family: Inter, "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
body { background: var(--bg); color: var(--text); }
::selection { background: var(--c_platform_65f3b2, #32d5f4); color: var(--c_platform_101116, #071421); }
:focus-visible { outline-color: var(--c_platform_pixpro_65e3fc, #65e3fc); }
.sidebar { width: 238px; padding: calc(28px + env(safe-area-inset-top)) 17px 23px; background: var(--c_platform_pixpro_081827, #081827); border-right: 1px solid var(--c_platform_pixpro_1a3043, #1a3043); }
.brand { margin: 0 10px 44px; }
.brand img { width: 183px; height: 64px; object-fit: contain; }
.sidebar__caption { font-size: 9px; color: var(--c_platform_pixpro_718aa0, #718aa0); letter-spacing: .18em; }
.sidebar__nav { gap: 7px; }
.sidebar__link { min-height: 48px; border-radius: 9px; color: var(--c_platform_pixpro_adc0d1, #adc0d1); font-weight: 600; }
.sidebar__link:hover { background: var(--c_platform_pixpro_132b3e, #132b3e); color: #fff; }
.sidebar__link.is-current { color: var(--c_platform_pixpro_bdf4ff, #bdf4ff); background: var(--c_platform_pixpro_123446, #123446); box-shadow: inset 3px 0 var(--c_platform_65f3b2, #32d5f4); }
.sidebar__link.is-current .icon { color: var(--c_platform_65f3b2, #32d5f4); }
.sidebar__demo { position: relative; overflow: hidden; margin: 34px 1px 23px; padding: 21px 17px; border: 1px solid var(--c_platform_pixpro_285167, #285167); border-radius: 13px; background: linear-gradient(135deg, var(--c_platform_pixpro_14354a, #14354a), var(--c_platform_pixpro_0c2335, #0c2335)); gap: 12px; }
.sidebar__demo::after { content: "+"; position: absolute; right: 18px; top: 15px; font-size: 29px; font-weight: 300; color: var(--c_platform_pixpro_51d9f2, #51d9f2); }
.sidebar__demo > .icon { color: var(--c_platform_pixpro_56dff8, #56dff8); }
.sidebar__demo strong { font-size: 17px; line-height: 1.3; color: var(--c_platform_f5f6f8, #f4fbff); font-weight: 700; }
.sidebar__demo p { color: var(--c_platform_pixpro_a5c2d4, #a5c2d4); line-height: 1.55; }
.sidebar__demo > a { color: var(--c_platform_pixpro_82e6fa, #82e6fa); font-weight: 700; }
.sidebar__bottom { border-color: var(--c_platform_pixpro_1c3447, #1c3447); }
.sidebar__account strong { color: var(--c_platform_f5f6f8, #f4fbff); }
.sidebar__account small, .logout { color: var(--c_platform_pixpro_91a9be, #91a9be); }
.avatar { background: var(--c_platform_pixpro_15394a, #15394a); border-color: var(--c_platform_pixpro_2b6478, #2b6478); color: var(--c_platform_pixpro_8be8f9, #8be8f9); }
.main-shell { margin-left: 238px; }
.topbar { min-height: 82px; padding: calc(15px + env(safe-area-inset-top)) clamp(25px, 3vw, 48px) 15px; border-bottom: 1px solid var(--c_platform_pixpro_203448, #203448); background: rgb(var(--c_platform_pixpro_091827-rgb, 9 24 39) / 0.9294); box-shadow: 0 8px 30px rgb(var(--c_platform_pixpro_020b12-rgb, 2 11 18) / 0.1020); }
.topbar__brand img { width: 155px; height: 49px; object-fit: contain; }
.catalog__search { min-height: 43px; border-color: var(--c_platform_pixpro_284156, #284156); border-radius: 10px; background: var(--c_platform_pixpro_0c1f31, #0c1f31); color: var(--c_platform_pixpro_8ca5bb, #8ca5bb); }
.catalog__search input { font-size: 12px; color: var(--c_platform_pixpro_effaff, #effaff); }
.catalog__search input::placeholder { color: var(--c_platform_pixpro_8ca5bb, #8ca5bb); }
.catalog__search:focus-within { border-color: var(--c_platform_pixpro_42c7e6, #42c7e6); box-shadow: 0 0 0 3px rgb(var(--c_platform_65f3b2-rgb, 50 213 244) / 0.0784); }
.catalog__search kbd { color: var(--c_platform_pixpro_84a0b8, #84a0b8); border-color: var(--c_platform_pixpro_365267, #365267); }
.topbar__actions { gap: 14px; }
.deposit-button { min-height: 44px; padding: 0 19px; border-radius: 10px; background: var(--c_platform_65f3b2, #32d5f4); color: var(--c_platform_pixpro_052232, #052232); font-weight: 800; box-shadow: 0 5px 22px rgb(var(--c_platform_pixpro_0fa5c2-rgb, 15 165 194) / 0.1333); }
.deposit-button:hover { background: var(--c_platform_pixpro_77e6fb, #77e6fb); }
.wallet-switcher summary { min-height: 44px; padding: 5px 12px; border: 1px solid var(--c_platform_pixpro_2c4559, #2c4559); border-radius: 10px; background: var(--c_platform_pixpro_102337, #102337); }
.wallet-switcher summary small { color: var(--c_platform_pixpro_93b0c6, #93b0c6); font-size: 8px; letter-spacing: .08em; }
.wallet-switcher summary strong { color: var(--c_platform_f5f6f8, #f4fbff); font-variant-numeric: tabular-nums; }
.wallet-switcher summary > .icon { color: var(--c_platform_pixpro_8ea9bd, #8ea9bd); }
.wallet-switcher__menu { border-color: var(--c_platform_pixpro_345166, #345166); background: var(--c_platform_pixpro_102337, #102337); box-shadow: 0 24px 65px #0008; }
.wallet-switcher__menu button { color: var(--c_platform_f5f6f8, #f4fbff); border-color: var(--c_platform_pixpro_324f65, #324f65); background: var(--c_platform_pixpro_152b3e, #152b3e); }
.wallet-switcher__menu button[aria-pressed=true] { background: var(--c_platform_pixpro_123d4d, #123d4d); border-color: var(--c_platform_65f3b2, #32d5f4); }
.wallet-switcher__menu > a { border-color: var(--c_platform_pixpro_2d475b, #2d475b); color: var(--c_platform_pixpro_79e5fa, #79e5fa); }
.content { max-width: 1660px; padding: 35px clamp(25px, 3vw, 48px) 0; }
.lobby-heading { position: relative; isolation: isolate; overflow: hidden; min-height: 191px; margin-bottom: 27px; padding: 58px 32px 30px; border: 1px solid var(--c_platform_pixpro_22516a, #22516a); border-radius: 18px; background: linear-gradient(105deg, var(--c_platform_pixpro_102c42, #102c42) 8%, var(--c_platform_pixpro_0a324b, #0a324b) 67%, var(--c_platform_pixpro_155570, #155570)); }
.lobby-heading::before { content: ""; position: absolute; z-index: -1; top: -42px; right: 8%; width: 260px; height: 260px; transform: rotate(-14deg); background: url('/assets/pixpro-mark.png') center / contain no-repeat; opacity: .14; }
.lobby-heading::after { content: "PIXPRO / GAME LOUNGE"; position: absolute; top: 24px; left: 32px; font-size: 9px; font-weight: 750; letter-spacing: .21em; color: var(--c_platform_pixpro_82e7fa, #82e7fa); }
.lobby-heading p { margin-bottom: 8px; color: var(--c_platform_pixpro_abcadd, #abcadd); font-size: 12px; }
.lobby-heading h1 { max-width: 560px; color: #fff; font-size: clamp(30px, 3vw, 43px); line-height: 1.08; font-weight: 750; letter-spacing: -.045em; }
.lobby-heading > a { padding: 11px 15px; border: 1px solid rgb(var(--c_platform_pixpro_70c9e1-rgb, 112 201 225) / 0.4588); border-radius: 9px; background: rgb(var(--c_platform_pixpro_133d50-rgb, 19 61 80) / 0.7020); color: var(--c_platform_pixpro_d8f6ff, #d8f6ff); font-weight: 650; white-space: nowrap; }
.lobby-heading > a:hover { border-color: var(--c_platform_pixpro_8cecff, #8cecff); background: var(--c_platform_pixpro_22546a, #22546a); }
.featured { gap: 18px; }
.spotlight { border: 1px solid var(--c_platform_pixpro_33516b, #33516b); border-radius: 16px; box-shadow: 0 16px 36px #0003; }
.spotlight::before { background: linear-gradient(90deg, rgb(var(--c_platform_pixpro_04131d-rgb, 4 19 29) / 0.9294), rgb(var(--c_platform_pixpro_051728-rgb, 5 23 40) / 0.4118) 64%, rgb(var(--c_platform_101116-rgb, 7 20 33) / 0.0392)), linear-gradient(0deg, rgb(var(--c_platform_pixpro_03131e-rgb, 3 19 30) / 0.8588), transparent 65%); }
.spotlight--small::before { background: linear-gradient(90deg, rgb(var(--c_platform_pixpro_04131d-rgb, 4 19 29) / 0.9098), rgb(var(--c_platform_pixpro_071b32-rgb, 7 27 50) / 0.4000) 85%), linear-gradient(0deg, rgb(var(--c_platform_pixpro_041420-rgb, 4 20 32) / 0.6784), transparent 70%); }
.spotlight__copy { padding: 30px; }
.spotlight h2 { color: #fff; font-weight: 790; text-shadow: 0 2px 18px rgb(var(--c_platform_pixpro_020910-rgb, 2 9 16) / 0.5020); }
.spotlight p { color: var(--c_platform_pixpro_d7e8f4, #d7e8f4); }
.spotlight__tag { color: var(--c_platform_pixpro_8cefff, #8cefff); font-weight: 750; letter-spacing: .11em; }
.spotlight__action { padding: 12px 17px; background: var(--c_platform_65f3b2, #32d5f4); color: var(--c_platform_pixpro_062233, #062233); border-radius: 8px; font-weight: 800; }
.spotlight--small .spotlight__action { color: var(--c_platform_pixpro_c9f5ff, #c9f5ff); background: transparent; }
.catalog { margin-top: 39px; }
.section-heading { margin-bottom: 20px; }
.section-heading h2 { color: var(--c_platform_f5f6f8, #f4fbff); font-size: 26px; font-weight: 730; }
.section-heading p { color: var(--c_platform_pixpro_8fa8bf, #8fa8bf); font-size: 12px; }
.catalog-count { border-color: var(--c_platform_pixpro_304b62, #304b62); background: var(--c_platform_pixpro_0d2337, #0d2337); color: var(--c_platform_pixpro_9ebdd3, #9ebdd3); border-radius: 7px; }
.category-filters { margin-bottom: 22px; gap: 9px; }
.category-chip { min-height: 41px; border-radius: 9px; border-color: var(--c_platform_pixpro_29465c, #29465c); background: var(--c_platform_pixpro_0d2236, #0d2236); color: var(--c_platform_pixpro_a9c0d3, #a9c0d3); padding: 10px 16px; font-weight: 650; }
.category-chip > span { color: var(--c_platform_pixpro_7595ac, #7595ac); }
.category-chip:hover { border-color: var(--c_platform_pixpro_4ba5bd, #4ba5bd); color: var(--c_platform_pixpro_e1f9ff, #e1f9ff); }
.category-chip[aria-pressed=true] { border-color: var(--c_platform_65f3b2, #32d5f4); background: var(--c_platform_65f3b2, #32d5f4); color: var(--c_platform_pixpro_062232, #062232); }
.category-chip[aria-pressed=true] > span { color: var(--c_platform_pixpro_0a5265, #0a5265); }
.games-grid { gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.game-card { border-color: var(--c_platform_pixpro_233e54, #233e54); background: var(--c_platform_pixpro_0c1e30, #0c1e30); border-radius: 14px; box-shadow: 0 9px 27px rgb(var(--c_platform_000000-rgb, 0 0 0) / 0.0941); }
.game-card:hover { border-color: var(--c_platform_pixpro_398aa2, #398aa2); transform: translateY(-4px); box-shadow: 0 19px 34px #0003; }
.game-card__visual { aspect-ratio: 16/9; background: var(--c_platform_pixpro_102b40, #102b40); }
.game-card__body { padding: 20px; }
.game-card__category { color: var(--c_platform_pixpro_7ad7ec, #7ad7ec); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.game-card h3 { color: var(--c_platform_f5f6f8, #f4fbff); font-size: 21px; font-weight: 730; }
.game-card p { color: var(--c_platform_pixpro_94aec4, #94aec4); font-size: 11px; line-height: 1.6; }
.game-card [data-game-action] { min-height: 43px; padding-inline: 14px; background: var(--c_platform_pixpro_123248, #123248); border: 1px solid var(--c_platform_pixpro_2a566b, #2a566b); color: var(--c_platform_pixpro_c5effa, #c5effa); border-radius: 8px; font-size: 12px; font-weight: 750; }
.game-card [data-game-action]:hover { background: var(--c_platform_65f3b2, #32d5f4); border-color: var(--c_platform_65f3b2, #32d5f4); color: var(--c_platform_pixpro_062232, #062232); }
.game-card__state { border-color: rgb(var(--c_platform_pixpro_8ca3b6-rgb, 140 163 182) / 0.4392); background: rgb(var(--c_platform_pixpro_092032-rgb, 9 32 50) / 0.9294); border-radius: 7px; color: var(--c_platform_pixpro_eef9ff, #eef9ff); }
.game-card--coming-soon [data-game-action]:disabled { background: var(--c_platform_pixpro_132638, #132638); border-color: var(--c_platform_pixpro_304351, #304351); color: var(--c_platform_pixpro_879dac, #879dac); }
.catalog__empty { border-color: var(--c_platform_pixpro_304d62, #304d62); background: var(--c_platform_pixpro_0d2235, #0d2235); }
.catalog__empty button { border-color: var(--c_platform_pixpro_39788d, #39788d); background: var(--c_platform_pixpro_15394d, #15394d); color: var(--c_platform_pixpro_b3effb, #b3effb); }
.account-strip { padding: 24px 27px; border-color: var(--c_platform_pixpro_294b60, #294b60); border-radius: 13px; background: var(--c_platform_pixpro_0d2639, #0d2639); }
.account-strip > div > .icon, .account-strip > a { color: var(--c_platform_pixpro_73dff6, #73dff6); }
.account-strip strong { color: var(--c_platform_pixpro_e7f6ff, #e7f6ff); font-weight: 650; }
.account-strip small { color: var(--c_platform_pixpro_96b3ca, #96b3ca); }
.demo-notice { border-color: var(--c_platform_pixpro_376680, #376680); border-radius: 11px; background: var(--c_platform_pixpro_102f43, #102f43); color: var(--c_platform_pixpro_e2f6ff, #e2f6ff); }
.demo-notice p { color: var(--c_platform_pixpro_aacadd, #aacadd); }
.demo-notice button { color: var(--c_platform_pixpro_75e5f9, #75e5f9); font-weight: 700; }
.mode-tag { color: var(--c_platform_pixpro_032638, #032638); background: var(--c_platform_pixpro_74dff2, #74dff2); border-radius: 5px; }
.notice { background: var(--c_platform_pixpro_33291c, #33291c); border-color: var(--c_platform_pixpro_6a5734, #6a5734); color: var(--c_platform_pixpro_efdaaf, #efdaaf); }
.pixplay-footer { max-width: calc(1660px - 2 * clamp(25px, 3vw, 48px)); margin: 20px clamp(25px, 3vw, 48px) 0; color: var(--c_platform_pixpro_b0c6d9, #b0c6d9); }
.pixplay-footer__main { border-top-color: var(--c_platform_pixpro_254055, #254055); }
.pixplay-footer__brand img { width: 155px; height: 54px; object-fit: contain; }
.pixplay-footer__about p, .pixplay-footer__developer .pixplay-footer__label, .pixplay-footer__bottom { color: var(--c_platform_pixpro_809db4, #809db4); }
.pixplay-footer__label { color: var(--c_platform_pixpro_cce1f0, #cce1f0); }
.pixplay-footer__links a:hover, .pixplay-footer a.pixplay-footer__whitelabel:hover { color: var(--c_platform_pixpro_68e1fa, #68e1fa); }
.pixplay-footer__bottom { border-color: var(--c_platform_pixpro_1e374b, #1e374b); }
.pp-deposit-panel { border-color: var(--c_platform_pixpro_31546d, #31546d); background: var(--c_platform_191b22, #0c1d30); box-shadow: 0 34px 100px #0009; }
.pp-deposit-panel::backdrop { background: rgb(var(--c_platform_pixpro_020d17-rgb, 2 13 23) / 0.7686); }
.pp-deposit-loading { color: var(--c_platform_pixpro_bed7e9, #bed7e9); background: var(--c_platform_191b22, #0c1d30); }
.pp-deposit-loading button { background: var(--c_platform_65f3b2, #32d5f4); color: var(--c_platform_pixpro_052232, #052232); }
.pp-deposit-close { border-color: var(--c_platform_pixpro_395c73, #395c73); background: var(--c_platform_pixpro_183449, #183449); color: var(--c_platform_pixpro_e8f9ff, #e8f9ff); }
.pp-deposit-frame { background: var(--c_platform_191b22, #0c1d30); }
@media (max-width: 1240px) {
  .sidebar { width: 211px; padding-inline: 12px; }
  .brand img { width: 167px; }
  .main-shell { margin-left: 211px; }
  .content, .topbar { padding-inline: 25px; }
  .games-grid { gap: 17px; }
  .game-card__body { padding: 17px; }
}
@media (max-width: 1050px) {
  .sidebar { display: none; }
  .main-shell { margin-left: 0; }
  .topbar__brand { display: block; }
  .mobile-nav { border-color: var(--c_platform_pixpro_294357, #294357); background: rgb(var(--c_platform_pixpro_0b1e30-rgb, 11 30 48) / 0.9608); box-shadow: 0 -8px 25px #0002; }
  .mobile-nav a { color: var(--c_platform_pixpro_8da7be, #8da7be); min-height: 43px; }
  .mobile-nav a[aria-current] { color: var(--c_platform_65f3b2, #32d5f4); }
  .pixplay-footer { margin-inline: 25px; }
}
@media (max-width: 760px) {
  .topbar { padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: 13px; gap: 13px; }
  .lobby-heading { min-height: 175px; padding: 55px 25px 26px; }
  .lobby-heading::after { left: 25px; }
  .lobby-heading h1 { font-size: 32px; }
  .lobby-heading::before { width: 220px; height: 220px; right: -20px; top: -25px; }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured__main .spotlight { min-height: 300px; }
  .spotlight--small { min-height: 156px; }
}
@media (max-width: 480px) {
  .topbar { padding-inline: 14px; }
  .topbar__brand img { width: 122px; height: 44px; }
  .topbar__actions { gap: 7px; }
  .deposit-button { min-height: 42px; padding-inline: 12px; font-size: 10px; border-radius: 8px; }
  .wallet-switcher summary { min-height: 42px; padding: 5px 8px; border-radius: 8px; }
  .wallet-switcher summary small { font-size: 7px; }
  .wallet-switcher summary strong { font-size: 12px; }
  .content { padding: 20px 14px 0; }
  .lobby-heading { min-height: 162px; padding: 49px 21px 23px; border-radius: 14px; margin-bottom: 21px; }
  .lobby-heading::after { left: 21px; top: 21px; font-size: 8px; }
  .lobby-heading p { font-size: 11px; }
  .lobby-heading h1 { font-size: 28px; max-width: 275px; }
  .spotlight { border-radius: 12px; }
  .spotlight__copy { padding: 23px; }
  .spotlight--small .spotlight__copy { padding: 15px; }
  .spotlight--small h2 { font-size: 21px; }
  .spotlight--small .spotlight__tag { font-size: 7px; }
  .catalog { margin-top: 31px; }
  .section-heading h2 { font-size: 24px; }
  .section-heading p { font-size: 10px; }
  .category-filters { margin-bottom: 19px; margin-right: -14px; padding-right: 14px; }
  .category-chip { min-height: 40px; padding: 9px 13px; font-size: 10px; }
  .games-grid { gap: 13px 11px; }
  .game-card { border-radius: 11px; }
  .game-card__visual { aspect-ratio: 1.3; }
  .game-card__body { padding: 14px 12px; }
  .game-card__category { font-size: 7px; }
  .game-card h3 { font-size: 16px; }
  .game-card [data-game-action] { min-height: 41px; padding-inline: 10px; font-size: 10px; }
  .account-strip { padding: 20px; }
  .pixplay-footer { margin-inline: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-card, .game-card__art, .spotlight > img { transition: none; }
}