/* Appsinity catalogue pages - pixel skin (browse, categories, top charts, new releases, streams).
   Self-contained on purpose: it carries the same language as pixel-store.css but targets the classes
   these pages actually use. Deleting the <link> from a page restores the previous look exactly. */

:root,
:root[data-theme="light"],
:root[data-theme="midnight"] {
  --bg: #05060b;
  --panel: #0d1020;
  --panel2: #151a2e;
  --line: #2a3150;
  --line2: #454f7c;
  --text: #f2f4ff;
  --muted: #98a2c4;
  --soft: #6b7396;
  --purple: #8b42ff;
  --px-shadow: 5px 5px 0 #000;
  --px-plate: #0d1020;
}

html, body {
  font-family: "Pixelify Sans", "Press Start 2P", ui-monospace, monospace !important;
  letter-spacing: .01em;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  background: var(--bg);
  color: var(--text);
}

/* ---------- corner policy ----------
   Surfaces are square, controls are curved. The universal rule loses to the page's own `!important`
   class rules inside its mobile block, so the same classes are named here too - equal specificity and
   this sheet loads last, which settles it. */
* { border-radius: 0 !important; text-shadow: none; }
.shell, .top, .hero, .heroInner, .grid, .cards, .summary, .metric, .card, .empty, .badge, .new,
.streamBadge, .section, .category, .storeFooter, .footerBottom, .footerVersion, .meta,
.searchPanel, .notificationPanel, .profilePanel, .smartContextMenu, .catalogSwitchMenu,
.streamCard, .streamArt, .streamLive, .streamScheduled, .streamStarting, .streamViewers,
.liveTag, .capTag, .capLive, .pickStream, .watchLive, .artPlaceholder, .skelCard, .skelCard .thumb,
.liveModalBox, .liveModalHead, .liveModalBody, .liveModalFoot, .captureCard, .capOverlay,
.watchModal, .watchBar, .watchStage, .watchInfo, .toast, .emptyAction, .dots, .footHead,
.socials svg, .brand img, .logo, .footerBrand img, .smartContextPill, .streamMeta { border-radius: 0 !important; }

.nav a, .nav button, .chip, .tab, .primary, .ghost, .heroCtas a, .heroCtas button,
.goLiveBtn, .startBtn, .stopBtn, .backBtn, .empty .primary, .catalogSwitchBtn, .pickCard,
.profileMenu a, .profileMenu button, .footerMenu button, .accountMenuItem,
.smartContextMenu button, .closeBtn, .field input, .field select, .search input { border-radius: 16px !important; }
.search { border-radius: 18px !important; }
.card, .skelCard { border-radius: 18px !important; }
.iconBtn, .dot, .recDot, .clockDot, .liveDot, .av, .pickCard .pickArt,
.watchCamOverlay, .connecting .spin, .profileHead img, .accountAvatar, .miniAvatar,
.searchResult img, .notificationIcon img { border-radius: 999px !important; }
.dots span { border-radius: 999px !important; }

/* ---------- hard plates ---------- */
.hero, .metric, .card, .empty, .chip, .tab, .search, .iconBtn, .streamCard, .skelCard,
.captureCard, .pickCard, .liveModalBox, .footerSelect, .backTop, .socials a,
.catalogSwitchBtn, .field input, .field select, .toast, .goLiveBtn, .startBtn, .stopBtn, .backBtn {
  border: 3px solid var(--line) !important;
  background: var(--px-plate) !important;
}
.card, .streamCard, .skelCard, .metric, .empty, .captureCard, .pickCard { box-shadow: var(--px-shadow); }
.card:hover, .streamCard:hover, .metric:hover, .pickCard:hover {
  border-color: var(--line2) !important;
  box-shadow: 8px 8px 0 #000;
  transform: translate(-3px, -3px);
}

/* the light theme paints its own white plates; the skin is dark in every theme */
:root[data-theme="light"] .top, :root[data-theme="light"] .hero, :root[data-theme="light"] .search,
:root[data-theme="light"] .iconBtn, :root[data-theme="light"] .card, :root[data-theme="light"] .metric,
:root[data-theme="light"] .empty, :root[data-theme="light"] .chip, :root[data-theme="light"] .tab,
:root[data-theme="light"] .catalogSwitchBtn, :root[data-theme="light"] .catalogSwitchMenu,
:root[data-theme="light"] .notificationPanel, :root[data-theme="light"] .profilePanel,
:root[data-theme="light"] .smartContextMenu, :root[data-theme="light"] .footerSelect,
:root[data-theme="light"] .backTop, :root[data-theme="light"] .socials a, :root[data-theme="light"] .streamCard,
:root[data-theme="light"] .field input, :root[data-theme="light"] .field select {
  background: var(--px-plate) !important;
  color: #dfe4f5 !important;
}
:root[data-theme="light"] .nav a:not(.active) { color: #cfd6ee !important; }
:root[data-theme="light"] body, :root[data-theme="light"] html { background: var(--bg) !important; color: var(--text) !important; }

.top { border-bottom: 3px solid var(--line) !important; height: 68px; }
.shell { padding-top: 20px; }
.head { border-bottom: 0; }
.head h2 { border-left: 6px solid var(--purple); padding-left: 12px; }

/* ---------- hero ---------- */
.hero { position: relative; border: 3px solid var(--line) !important; background: var(--panel) !important; }
.hero::before { background: linear-gradient(90deg, #05060b 0%, rgba(5, 6, 11, .96) 34%, rgba(5, 6, 11, .72) 56%, rgba(5, 6, 11, .2) 80%, rgba(5, 6, 11, .05) 100%) !important; }
.hero::after { border: 3px solid rgba(255, 255, 255, .07); background: none; }
.liveBackdrop { background: radial-gradient(60% 90% at 72% 30%, rgba(255, 59, 107, .2), transparent 62%), radial-gradient(45% 70% at 18% 80%, rgba(139, 66, 255, .18), transparent 60%), #05060b !important; }
.liveBackdrop::after { background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px) !important; background-size: 44px 44px, 44px 44px !important; }

/* The categories hero is `grid-template-columns:1fr auto`, and an `auto` column claims the chip bar's
   max-content - all twelve tabs on one line - so the headline got the scraps: 370px of title at 2000px and
   230px at 1100px, which broke "game categories." across three lines. One column fixes both halves. */
.hero:has(> .tabs) { grid-template-columns: minmax(0, 1fr) !important; }
/* Free-wrapping the bar left a single orphan chip on its own row at 1440px (11 + 1). Equal-width columns
   keep every row full, and 2/3/4/6 steps down through the breakpoints the same way the mobile sheet does. */
.hero > .tabs { display: grid !important; gap: 10px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 760px) { .hero > .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 860px) { .hero > .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 1200px) { .hero > .tabs { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }

/* ---------- type ---------- */
.brand, .footerBrand, .head h2, .eyebrow, .footHead, .field label, .count { font-family: "Pixelify Sans", ui-monospace, monospace; }
.brand { font-weight: 700; letter-spacing: .06em; }
h1, .hero h1 {
  font-family: "Press Start 2P", ui-monospace, monospace !important;
  font-size: clamp(1.15rem, 1.9vw, 2.1rem) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.hero h1 span { background: none !important; -webkit-text-fill-color: currentColor; color: #cbb6ff !important; }
.hero p, .pickerHint, .hint, .legalText, .footerDesc, .empty p { font-size: 15px; line-height: 1.75; color: #c3cbe6; }
.eyebrow { font-size: 11px; letter-spacing: .16em; }
.head h2 { font-size: 14px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.head span, .count { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.nav a, .nav button, .chip, .tab, .title, .primary, .ghost, .goLiveBtn, .startBtn, .stopBtn,
.backBtn, .profileMenu a, .profileMenu button, .footerSelect, .footerMenu button,
.search input, .searchResultTitle, .notificationText b, .footLinks a, .legalLinks a,
.streamTitle, .pickName, .watchInfo strong, .liveModalHead strong, .metric b { font-weight: 700; letter-spacing: .04em; }
.title, .streamTitle { font-size: 15px !important; }
.sub, .streamSub, .cardSub, .pickSub, .metric span, .searchResultMeta, .notificationText p { font-size: 12.5px; color: var(--muted); }
.badge, .new, .footerVersion, .streamBadge, .liveTag, .streamLive, .streamScheduled,
.streamStarting, .streamViewers, .capTag, .capLive, .pickStream, .watchLive, .smartContextPill {
  font-size: 9px !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 700 !important;
}
.metric b { font-size: 26px; }
.metric span { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }

/* ---------- chips, tabs, badges ---------- */
.chip, .tab { background: #10142a !important; color: #d9e0f2 !important; }
.chip.active, .tab.active { background: #241a45 !important; border-color: var(--purple) !important; color: #fff !important; box-shadow: 4px 4px 0 #000; }
.badge, .badge.app, .badge.newRelease { background: #2a3150 !important; border: 3px solid #000 !important; color: #fff !important; padding: 4px 8px !important; }
.new { background: #1b2140 !important; border: 2px solid #000 !important; }
.streamBadge, .streamLive, .streamStarting, .capLive, .watchLive, .liveTag .recDot { background: rgba(255, 59, 107, .88) !important; color: #fff !important; border: 2px solid #000 !important; backdrop-filter: none !important; }
.streamScheduled { background: var(--purple) !important; color: #fff !important; border: 2px solid #000 !important; }
.streamViewers, .capTag { background: #0b0e1c !important; border: 2px solid var(--line2) !important; color: #dfe3ef !important; }
.liveTag, .pickStream { background: #241a45 !important; color: #ffb3c5 !important; }
.star { color: #ffc83d; }

/* ---------- artwork ---------- */
/* Only boxes that own their media slot get the shrink-and-scale block treatment: a percentage inside a
   grid row resolves against the whole row, which is what broke the search dropdown on the store page. */
.card { position: relative; }
.card img {
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  width: 33.334% !important;
  height: 68.34px !important;
  transform: scale(3) !important;
  transform-origin: 0 0 !important;
  image-rendering: pixelated;
  object-fit: cover !important;
  filter: saturate(1.18) contrast(1.06) brightness(.92);
}
.streamArt img, .startingSoonCover img {
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  width: 33.334% !important; height: 33.334% !important;
  transform: scale(3) !important;
  transform-origin: 0 0 !important;
  image-rendering: pixelated;
  object-fit: cover !important;
  filter: saturate(1.18) contrast(1.06);
}
/* Live video keeps its native smoothness - pixelating a playing stream reads as a fault, not a style. */
.brand img, .logo, .footerBrand img, .smartContextLogo, .pickCard img, .pickArt,
.searchResult img, .notificationIcon img, .profileHead img, .accountAvatar img,
.miniAvatar img, .artPlaceholder svg, .footIcon svg, .catI svg { image-rendering: pixelated; }
.artPlaceholder { background: radial-gradient(70% 90% at 50% 20%, rgba(139, 66, 255, .22), transparent 60%), #07070b !important; }

/* ---------- controls ---------- */
.primary, .startBtn { background: var(--purple) !important; color: #fff !important; border: 3px solid #000 !important; box-shadow: 4px 4px 0 #000; font-size: 14px; }
.primary:hover, .startBtn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #000; }
.primary:active, .startBtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.primary.red, .startBtn { background: #e02a5b !important; border-color: #000 !important; }
.startBtn:disabled { opacity: .45; }
.stopBtn { background: #241a45 !important; border: 3px solid #e02a5b !important; color: #ffb3c5 !important; box-shadow: 4px 4px 0 #000; }
.goLiveBtn { background: #1b1030 !important; border-color: #e02a5b !important; color: #fff !important; box-shadow: 4px 4px 0 #000; }
.goLiveBtn:hover, .stopBtn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #000; }
.goLiveBtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.ghost { font-size: 14px; border-bottom: 3px solid transparent !important; background: transparent !important; }
.ghost:hover { border-bottom-color: var(--purple) !important; }
.backBtn { background: #10142a !important; color: #dfe4f5 !important; font-size: 13px; }
.backBtn:hover { border-color: var(--purple) !important; color: #fff !important; }
.nav .active { background: #1b2140 !important; box-shadow: inset 0 -4px 0 var(--purple) !important; color: #fff !important; }
.nav a:hover, .nav button:hover { background: #151a2e; }
/* Pixelify Sans is wider than Inter, so the row no longer fits every link at laptop widths - it becomes the
   same silent horizontal strip the mobile header already uses instead of clipping "Top Charts" in half. */
.nav { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a, .nav button { font-size: 12.5px; padding: 0 10px; }
.iconBtn { background: var(--px-plate); color: #dfe4f5; }
.iconBtn:hover { border-color: var(--purple) !important; }
.dot { width: 10px; height: 10px; background: var(--purple); box-shadow: 0 0 0 3px #000; }
.search { background: #080a14 !important; }
.search:focus-within { border-color: var(--purple) !important; box-shadow: 4px 4px 0 #000; }
.search kbd { border: 2px solid var(--line2) !important; background: #151a2e; color: #b9c1da; }
.dots span { background: #2a3150; }
.dots span.active { background: var(--purple); }
.av { background: var(--purple) !important; border: 2px solid #000; color: #fff; }
.pickArt { background: #241a45 !important; border: 2px solid #000; color: #d9c4ff; }
.topTools { border-left: 3px solid var(--line); }

.catalogSwitchBtn { background: #080a14 !important; }
.catalogSwitchBtn:hover, .catalogSwitch.open .catalogSwitchBtn { border-color: var(--purple) !important; background: #0d1020 !important; }
.catalogSwitchArrow { background: #151a2e !important; border-radius: 6px !important; }
.catalogSwitchMenu, .footerMenu, .notificationPanel, .profilePanel, .searchPanel, .smartContextMenu {
  border: 3px solid var(--line2) !important;
  background: #0b0e1c !important;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .85) !important;
  backdrop-filter: none !important;
  filter: none !important;
}
.catalogSwitchMenu a, .footerMenu button, .profileMenu a, .profileMenu button { border-radius: 10px !important; }
.catalogSwitchMenu a:hover, .catalogSwitchMenu a.active, .footerMenu button:hover, .footerMenu button.active,
.profileMenu a:hover, .profileMenu button:hover, .searchResult:hover,
.smartContextMenu button:hover, .accountMenuItem:hover, .gameContextMenu button:hover {
  background: #241a45 !important; color: #fff !important;
}
.profileMenuGroup + .profileMenuGroup, .notificationHead, .searchPanelHead, .smartContextHead,
.accountSummary, .liveModalHead, .liveModalFoot, .watchBar { border-color: var(--line) !important; border-width: 3px !important; }
.smartContextDivider, .gameContextDivider { background: var(--line) !important; height: 3px !important; }
.profileHead img { border: 3px solid var(--purple) !important; box-shadow: 0 0 0 3px #000 !important; }
.profileName, .smartContextTitle, .notificationText b, .searchResultTitle, .watchInfo strong { color: #fff; }
.accountAvatar, .miniAvatar { background: var(--purple) !important; border: 3px solid #000; }

/* ---------- modals ---------- */
.liveModal, .watchModal { background: rgba(2, 3, 8, .82) !important; backdrop-filter: none !important; }
.liveModalBox, .watchModal { border-color: #e02a5b !important; background: #0b0e1c !important; box-shadow: 10px 10px 0 rgba(0, 0, 0, .8) !important; }
.watchBar { background: #0b0e1c !important; border-bottom: 3px solid var(--line) !important; }
.watchStage { background: #05060b !important; }
.watchChat, .watchChatHead, .watchChatInput { border-color: var(--line) !important; border-width: 3px !important; background: #0b0e1c !important; }
.watchChatInput input { background: #080a14 !important; border: 3px solid var(--line) !important; color: var(--text) !important; }
.closeBtn { background: #10142a !important; border: 3px solid var(--line2) !important; color: #dfe4f5 !important; }
.closeBtn:hover { border-color: #e02a5b !important; color: #fff !important; }
.connecting .spin { border: 3px solid #241a45 !important; border-top-color: #b56cff !important; }
.toast { background: #0b0e1c !important; color: #fff !important; box-shadow: 6px 6px 0 #000 !important; }

/* ---------- footer ---------- */
.storeFooter { border-top: 3px solid var(--line) !important; background: transparent; }
.footerBottom { border-top: 3px solid var(--line) !important; }
.socials a { background: #10142a; box-shadow: 3px 3px 0 #000; }
.socials a:hover { border-color: var(--purple) !important; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; }
.backTop { background: #10142a; box-shadow: 3px 3px 0 #000; }
.backTop:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; }
.footerVersion { background: var(--purple) !important; border: 3px solid #000 !important; }

/* ---------- loading blocks ---------- */
@keyframes pixelSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel, .skelCard .thumb, .skelCard .line {
  background: repeating-linear-gradient(90deg, #10142a 0 10px, #1b2140 10px 20px) !important;
  background-size: 240% 100% !important;
  animation: pixelSweep 1.7s linear infinite !important;
}
.skelCard { border: 3px solid var(--line) !important; background: #080a14 !important; }

/* ---------- motion ----------
   Pixel is the look, not the frame rate: the page keeps its own easing, everything is just one notch
   slower so a hover reads as motion instead of a jump. No steps() anywhere. */
* { transition-duration: .26s !important; }
html.page-leaving .shell, html.page-leaving main, html.page-enter .shell, html.page-enter main { filter: none !important; }

/* ---------- CRT scanlines, deliberately faint ---------- */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  opacity: .5;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .skel, .skelCard .thumb, .skelCard .line { animation: none !important; }
  body::after { display: none; }
}

@media (max-width: 760px) {
  .top { height: auto; }
  h1, .hero h1 { font-size: 1.05rem !important; }
  /* the mobile cards size themselves from aspect-ratio, so the scaled slot trick can't resolve a height -
     they keep plain nearest-neighbour resampling instead */
  .card img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    image-rendering: pixelated;
  }
  body::after { display: none; }
}

/* ---------- legal fine print: never pixel ---------- */
/* Consent sentences, footer copyright and policy links are legal text. Pixelify Sans is a bitmap face and
   small legal copy in it is hard to read and looks unserious, so these lines keep the system font even on
   pages that wear the pixel skin. */
.auth-note, .legalText, .legalText div, .legalLinks, .legalLinks a,
.check span, .finish-check span, .noteBox, .wp-disclaimer, .privacy-note,
.disclaimer, .finePrint, .fine-print, .footnote, small {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: normal !important;
}
.auth-note a, .legalLinks a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- numbers: never pixel ---------- */
/* Same reasoning as the fine print above, and the same reason this rule is last: both pixel faces wreck digits.
   The catalog counts are the biggest numbers on these pages - `.metric b` is 26px of bold Pixelify - and the
   small ones are worse: a viewer count and the footer version sit at 9px with .12em of tracking, which turns
   "12 watching" into a smear. Smoothing is already off site-wide, so the stems are as sharp as a bitmap face can
   get; what it cannot do is give its digits the counters they need. Every value here therefore wears a real
   monospace, with the tracking and the uppercase removed, because a number column that rattles is unreadable
   even in a good face. */
.metric b, .metric span, .head span, .count, .sub, .streamViewers, .searchResultMeta, .metaStat, .footerVersion {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}
.metric span, .head span, .streamViewers, .footerVersion { text-transform: none !important; }
.streamViewers, .footerVersion { font-size: 11px !important; }