/* Appsinity store listing page - pixel skin.
   Override-only, same contract as pixel-store.css: delete the <link> from listing.html and the page is
   exactly what it was. The two sheets are separate because the listing hero is a grid whose ::before /
   ::after pseudo-elements the store sheet does not know about. */

/* The page ships light and midnight themes that re-declare these tokens at :root[data-theme=...],
   which outranks a bare :root. Naming all three keeps the pixel palette in charge in every theme. */
:root, :root[data-theme="light"], :root[data-theme="midnight"] {
  color-scheme: dark;
  --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);
}

/* ---------- corners: square surfaces, curved controls ---------- */
* { border-radius: 0 !important; text-shadow: none; }

.page, .hero, .heroBg, .heroSlide, .buy, .review, .reportPanel, .agePanel, .leavePanel,
.profilePanel, .searchPanel, .downloadSheet, .downloadToast, .listingSkeleton, .sBlock, .sSide,
.chip, .new, .empty, .divider, .featureIcon, .fullImageViewer img, .downloadTrack,
.downloadSheetTrack, .track { border-radius: 0 !important; }

/* Buttons, fields and media get the same corner language the store uses, sized to the element. */
.primary, .secondary, .report, .nav a, .filterBtn, .view, .reportClose, .downloadSheetBtn,
.customSelectBtn, .customSelectMenu button, .reviewStars button, .ageActions .primary,
.ageActions .secondary, .leaveActions .primary, .leaveActions .secondary,
.reportFoot .primary, .reportFoot .secondary, .profileMenu a, .profileMenu button,
.searchPanelHead button, .moreHead a { border-radius: 16px !important; }
.search, .search input, .reviewForm textarea, .reportBody textarea, .reportBody select { border-radius: 18px !important; }
.iconBtn, .dot, .verified, .galleryNav, .fullImageClose, .fullImageNav, .downloadClose { border-radius: 999px !important; }
.cover, .shot, .trailerCard { border-radius: 18px !important; }

/* ---------- pixelated artwork ----------
   Drawn at a fraction of its slot and scaled back up with nearest-neighbour, so Chromium rasterises the
   small box and the blocks survive. */
/* Only boxes that are not already positioned: .heroSlide is absolutely placed by the page and must keep
   its own inset, and the fixed overlays (.downloadSheet, .downloadToast) already contain absolutes. */
.shot, .trailerCard, .mini, .searchResult, .profileHead { position: relative; }

/* Only artwork that owns a media box can be shrunk and scaled: a percentage inside a grid row resolves
   against the whole row, so avatars and tray icons would land at the wrong size and the wrong corner. */
.heroSlide img, .shot img, .trailerCard 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;
  image-rendering: -moz-crisp-edges;
  object-fit: cover !important;
  filter: saturate(1.18) contrast(1.06);
}

/* The hero art is the widest surface on the page, so it can carry coarser blocks. */
.heroSlide img { width: 25% !important; height: 25% !important; transform: scale(4) !important; }

/* Related-games thumbs are the one media slot that sits in normal flow, so nothing may be taken out of
   it: shrink the box, scale the paint back up, and return the exact height the box lost. */
.mini img {
  width: 33.334% !important; height: 27.33px !important;
  transform: scale(3) !important; transform-origin: 0 0 !important;
  margin-bottom: 55px !important;
  image-rendering: pixelated; object-fit: cover !important;
  filter: saturate(1.18) contrast(1.06);
  border: 3px solid var(--line) !important;
  /* The radius is painted through the same 3x scale as the pixels, so it has to be a third of the size it should look. */
  border-radius: 6px !important;
}
/* The game's own icon is the identity mark on this page; it stays crisp inside a pixel frame. */
.cover {
  border: 3px solid #000 !important;
  box-shadow: var(--px-shadow) !important;
}
.brand img, .featureIcon svg, .verified, .avatar, .ageBadge, .searchResult img,
.profileHead img, .downloadSheetIcon, .downloadToast img { image-rendering: pixelated; }

/* Dragging a text selection across the page paints the selection colour over every image box the range
   crosses, so screenshots and hero art flash solid blue while he is only trying to select the text.
   Artwork is a click target, never a selection range; the copy beside it stays selectable. */
img, video { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* ---------- hard plates ---------- */
.page, .buy, .shot, .review, .trailerCard, .search, .iconBtn, .chip, .empty, .mini img,
.reportPanel, .agePanel, .leavePanel, .profilePanel, .searchPanel, .downloadSheet,
.downloadToast, .listingSkeleton, .sBlock, .sSide, .customSelectBtn, .customSelectMenu {
  border: 3px solid var(--line) !important;
  background: var(--px-plate);
}
.page { border-color: var(--line2) !important; }
.buy, .review, .trailerCard, .downloadToast, .sBlock, .sSide { box-shadow: var(--px-shadow); }
.shot:hover, .mini:hover img { border-color: var(--line2) !important; box-shadow: 8px 8px 0 #000; transform: translate(-3px, -3px); }

.top { border-bottom: 3px solid var(--line) !important; height: 68px; }
.shell { padding-top: 20px; }
.hero { border-block-width: 0 !important; }
.hero::after { background: linear-gradient(90deg, #05060b 0%, rgba(5, 6, 11, .95) 30%, rgba(5, 6, 11, .6) 64%, rgba(5, 6, 11, .22) 100%) !important; }

/* ---------- type ---------- */
.titleBlock h1 {
  font-family: "Press Start 2P", monospace !important;
  font-size: clamp(1.1rem, 2.1vw, 2.2rem) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
}
.section h2, .moreHead h3, .reportHead h2, .agePanel h2, .leavePanel h2 {
  font-family: "Pixelify Sans", monospace !important;
  font-size: 15px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}
.brand { font-weight: 700; letter-spacing: .06em; }
.desc, .feature span, .reviewText, .subtle, .row { color: #c3cbe6; }
.desc { font-size: 17px; line-height: 1.75; }
.score { font-family: "Press Start 2P", monospace !important; font-size: 26px !important; font-weight: 400 !important; }
.section h2 { border-left-width: 6px !important; padding-left: 12px !important; }
.dev, .facts, .chip, .row b, .downloadSheetTitle, .reviewTop { font-weight: 700; letter-spacing: .04em; }
.chip, .new, .trailerLabel, .barCount, .downloadSheetPercent { font-size: 11px !important; letter-spacing: .1em; text-transform: uppercase; }
.chip { background: #1b2140 !important; border: 3px solid #000 !important; color: #dfe4f5 !important; padding: 6px 12px !important; }
.new { background: #2a3150 !important; color: #fff !important; }

/* ---------- controls ---------- */
.primary {
  background: var(--purple) !important; color: #fff !important; border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000; font-size: 15px; font-weight: 700;
}
.primary:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #000; }
.primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.secondary, .report { background: #10142a !important; border: 3px solid var(--line2) !important; color: #dfe4f5 !important; font-weight: 700; }
.secondary:hover, .report:hover { border-color: var(--purple) !important; color: #fff !important; }
.nav a { font-weight: 700; letter-spacing: .04em; }
.nav a.active { background: #1b2140 !important; color: #fff !important; box-shadow: inset 0 -4px 0 var(--purple) !important; }
.iconBtn { background: var(--px-plate); color: #dfe4f5; }
.iconBtn:hover { border-color: var(--purple) !important; }
.dot { width: 10px; height: 10px; background: var(--purple) !important; 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 input { color: var(--text) !important; font-size: 14px; }
.reviewForm textarea, .reportBody textarea, .reportBody select, .customSelectBtn {
  background: #080a14 !important; color: var(--text) !important; border: 3px solid var(--line) !important;
}
.reviewForm textarea:focus, .reportBody textarea:focus { border-color: var(--purple) !important; outline: 0; }
.featureIcon { background: #1b2140 !important; border: 3px solid var(--line); color: #cfd6ee; }
.track { background: #10142a !important; box-shadow: inset 0 0 0 2px #000; }
.fill, .downloadFill, .downloadSheetFill { background: var(--purple) !important; box-shadow: none; }
.downloadSheetFill { background: var(--purple) !important; }
.done .downloadFill, .done .downloadSheetFill, .downloadToast.done { background: #22d16f; }
.downloadToast.done .downloadFill, .downloadToast.done .downloadSheetFill { background: #22d16f !important; }
.stars, .star { color: #ffc83d; }
.moreHead a { color: #b56cff !important; font-weight: 700; }
.profileHead img { border: 3px solid var(--purple) !important; }
.avatar { border: 3px solid var(--purple) !important; }
.crumbs, .crumbs a { color: #98a2c4; font-weight: 700; }

/* ---------- popovers ---------- */
.filterPanel, .searchPanel, .profilePanel, .reportPanel, .agePanel, .leavePanel, .downloadSheet,
.downloadToast, .customSelectMenu, .fullImageViewer {
  background: #0b0e1c !important;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .85) !important;
  filter: none !important;
  backdrop-filter: none !important;
}
.reportPanel, .agePanel, .leavePanel { border-color: var(--line2) !important; }
.reportPanel::before, .agePanel::before, .downloadSheet::before { background: var(--line2) !important; }
.profileMenu a:hover, .profileMenu button:hover, .searchResult:hover, .customSelectMenu button:hover,
.downloadSheetBtn:hover:not(:disabled) { background: #241a45 !important; color: #fff !important; }
.downloadSheetBtn.primaryAction { background: var(--purple) !important; border: 3px solid #000 !important; box-shadow: 4px 4px 0 #000; }

/* ---------- loading blocks sweep in hard blocks ---------- */
@keyframes pixelSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel, .sHero, .sCover, .sTitle, .sLine, .sShot, .sBlock, .sSide, .sButton {
  background: repeating-linear-gradient(90deg, #10142a 0 10px, #1b2140 10px 20px) !important;
  background-size: 240% 100% !important;
  animation: pixelSweep 1.7s linear infinite !important;
  color: transparent !important;
}

/* ---------- motion: pixel is the look, not the frame rate ---------- */
* { transition-duration: .26s !important; }
.heroSlide { animation-duration: 44s !important; }
/* The page staggers the slides 6s apart for its 36s cycle; a longer cycle without longer gaps puts two
   slides on screen at once, so the stagger scales with the duration. */
.heroSlide.s2 { animation-delay: 7.3s !important; } .heroSlide.s3 { animation-delay: 14.7s !important; }
.heroSlide.s4 { animation-delay: 22s !important; } .heroSlide.s5 { animation-delay: 29.3s !important; }
.heroSlide.s6 { animation-delay: 36.7s !important; }
.primary.loading::before { animation-duration: 1.2s !important; }
.downloadSheetBtn, .downloadSheetFill { transition-duration: .26s !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, .sHero, .sCover, .sTitle, .sLine, .sShot, .sBlock, .sSide, .sButton { animation: none !important; }
  body::after { display: none; }
}

@media (max-width: 1250px) {
  .cover { width: 180px !important; height: 180px !important; }
}

@media (max-width: 700px) {
  .top { height: auto; }
  .titleBlock h1 { font-size: 1.05rem !important; }
  .heroSlide img { width: 30% !important; height: 30% !important; transform: scale(3.4) !important; }
  .cover { width: 138px !important; height: 138px !important; }
  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 ---------- */
/* The score, the size, the review count and the traffic line are the whole argument of a store page, and both
   pixel faces destroy them: "4.7" in Press Start 2P is three grey blocks, and a byte count in bold Pixelify Sans
   at 11-15px fuses into one shape. Smoothing is already off site-wide, which keeps stems sharp but cannot give a
   bitmap face the counters its digits need. So every value wears a real monospace here, the same way the legal
   fine print already does - with the letter tracking and the uppercase removed, because a number column that
   rattles is unreadable even in a good face. */
.score, .fact, .row b, .barCount, .downloadSheetPercent, .mini .star {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}
.score { font-size: 30px !important; line-height: 1.2 !important; }
.barCount, .downloadSheetPercent { font-size: 12px !important; text-transform: none !important; }