/* Playloop — Dusty Rocket Games-inspired paper arcade theme.
   This stylesheet only affects games.dustyrocketgames.com. */
:root {
  --ink:#242628;
  --cream:#f6ebd5;
  --orange:#ff752f;
  --blue:#50b6d6;
  --paper:#fff6e6;
  --bg:var(--ink);
  --side:var(--ink);
  --panel:var(--paper);
  --stroke:var(--ink);
  --text:var(--cream);
  --muted:#c7c6be;
  --mint:var(--orange);
  --pad:clamp(20px,4.6vw,78px);
}
html { scroll-behavior:smooth;scroll-padding-top:20px; }
body { background:var(--ink);color:var(--cream);font:15px/1.55 Arial,Helvetica,sans-serif; }
button,input,select { font-family:Arial,Helvetica,sans-serif; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.game-card:focus-visible { outline:3px solid var(--orange);outline-offset:4px; }
.app-layout { display:block;min-height:100vh; }
.workspace { width:100%; min-width:0; }
.main-content { padding:0; max-width:none; margin:0; }
.topbar { position:absolute;inset:0 0 auto;z-index:25;height:109px;display:flex;align-items:center;gap:clamp(16px,3vw,42px);padding:17px var(--pad);background:transparent;border:0;color:var(--ink); }
.topbar-left { flex:1;min-width:220px;display:flex;align-items:center;gap:12px; }
.studio-brand { display:inline-flex;align-items:center;gap:11px;color:var(--cream);text-decoration:none;text-shadow:0 1px 2px #0005; }
.studio-brand img { width:56px;height:56px;border-radius:50%;border:2px solid var(--cream);object-fit:cover;background:var(--ink); }
.studio-brand span { display:flex; flex-direction:column;gap:0;line-height:1.1; }
.studio-brand strong { font-size:17px;letter-spacing:-.15px;font-weight:900;white-space:nowrap; }
.studio-brand small { font-size:10px;letter-spacing:2.5px;font-weight:900;margin-top:5px; }
.breadcrumb { display:none; }
.menu-button { display:none!important; }
.topbar-nav { display:flex;align-items:center;gap:clamp(19px,2.4vw,37px); }
.topbar-nav a { position:relative;font-weight:900;font-size:12px;letter-spacing:1.7px;color:var(--ink);white-space:nowrap; }
.topbar-nav a:hover { text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px; }
.topbar-nav a:last-child { border-bottom:2px solid currentColor;padding-bottom:4px; }
.surprise-button { min-height:43px;border:2px solid var(--ink);background:var(--cream);box-shadow:4px 4px 0 var(--ink);color:var(--ink);font-size:11px;font-weight:900;letter-spacing:1px;border-radius:0;padding:0 14px;white-space:nowrap; }
.surprise-button span { color:var(--orange);font-size:20px;padding:0 0 0 4px; }
.surprise-button:hover { background:var(--orange);transform:translate(-1px,-1px); }
.surprise-button:hover span { color:var(--ink); }
.hero { width:100%;min-height:715px;height:65vw;max-height:940px;overflow:hidden;border-radius:0;margin:0;display:block;color:var(--cream);box-shadow:none;background:var(--ink) url('https://dustyrocketgames.com/assets/paper-arcade-background.webp') center center/cover no-repeat; }
.hero::before,.hero::after { display:none; }
.hero-copy { position:absolute;top:17%;left:var(--pad);width:min(44%,660px);z-index:3;padding:0; }
.hero-label { display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:var(--cream);padding:9px 14px;font-size:10px;font-weight:900;letter-spacing:2px;margin:0 0 35px;transform:rotate(-2deg);box-shadow:3px 3px 0 #0005; }
.label-star { color:var(--orange);font-size:21px;line-height:0; }
.hero h1 { font-family:Impact,'Arial Black','Arial Narrow',sans-serif;font-size:clamp(95px,11.2vw,176px);font-weight:900;line-height:.79;letter-spacing:-.02em;transform:rotate(-5deg);transform-origin:left center;margin:0 0 52px;text-shadow:4px 5px 0 #0b0e1050;max-width:none;color:var(--cream); }
.hero h1 span { display:inline-block;color:var(--orange);margin-left:11px;text-shadow:4px 5px 0 #0b0e1060; }
.hero .hero-tagline { color:var(--cream);font-weight:900;font-size:clamp(26px,3.1vw,46px);letter-spacing:-1.5px;line-height:1.02;max-width:430px;margin:0 0 35px; }
.hero-actions { margin:0;display:flex;gap:0; }
.hero-cta { background:var(--orange);color:var(--ink);border:2px solid var(--orange);border-radius:0;padding:17px 23px;font-size:13px;font-weight:900;letter-spacing:.15px;gap:28px;box-shadow:6px 6px 0 #10141738; }
.hero-cta:hover { background:var(--cream);border-color:var(--ink);color:var(--ink);transform:translateY(-2px); }
.hero-cta span { font-size:22px;line-height:.75; }
.hero-copy .hero-note { color:var(--cream);font-size:10px;font-weight:900;letter-spacing:1.3px;margin:27px 0 0; }
.hero-features { position:absolute;top:16.5%;right:6.2%;width:29.7%;display:grid;gap:clamp(22px,3vw,50px);z-index:4; }
.paper-card { display:block;position:relative;text-align:left;padding:9px 9px 0;background:var(--paper);border:1px solid #181c1d;color:var(--ink);box-shadow:10px 13px 0 #1115;cursor:pointer;transition:transform .17s,box-shadow .17s; }
.paper-card.paper-one { transform:rotate(-5deg); }
.paper-card.paper-two { transform:translateX(15px) rotate(3deg); }
.paper-card:hover,.paper-card.paper-one:hover,.paper-card.paper-two:hover { transform:translateY(-6px) rotate(-1deg);box-shadow:13px 18px 0 #1117; }
.paper-card img { display:block;width:100%;aspect-ratio:1.72;object-fit:cover;object-position:center;background:#111;border:0; }
.paper-caption { display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:13px 12px 15px;align-items:center; }
.paper-caption strong { font-weight:900;letter-spacing:-.7px;font-size:clamp(18px,2vw,31px);grid-column:1;line-height:1.13; }
.paper-caption small { font-size:10px;font-weight:800;letter-spacing:1.2px;margin-top:6px;grid-column:1; }
.paper-caption b { grid-column:2;grid-row:1/3;font-size:27px;font-weight:500; }
.paper-label { position:absolute;top:-27px;left:8px;background:var(--ink);color:var(--cream);font-weight:900;font-size:10px;letter-spacing:1.7px;padding:7px 11px;transform:rotate(1deg);z-index:1; }
.hero-baseline { position:absolute;bottom:0;left:0;right:0;padding:17px var(--pad);display:flex;justify-content:space-between;gap:16px;background:#242628e6;color:var(--cream);font-size:11px;letter-spacing:.3px;font-weight:800;z-index:6; }
.quick-categories { margin:0;display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;gap:0;background:var(--ink);color:var(--cream);padding:15px var(--pad);border-top:1px solid #69625a;border-bottom:1px solid #69625a; }
.genre-chip { min-height:52px;border:0;border-radius:0;background:transparent;color:var(--cream);padding:7px clamp(17px,2.6vw,36px);gap:11px;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:1.1px;justify-content:center;flex:1;max-width:260px; }
.genre-chip:not(:last-child) { border-right:1px solid #585756; }
.genre-ico,.genre-chip:nth-child(n) .genre-ico { width:auto;height:auto;border:0;border-radius:0;background:transparent;color:var(--orange);font-size:22px; }
.genre-chip b { color:var(--blue);font-size:18px; }
.genre-chip:hover { border-color:transparent;background:#3b3e3f;transform:none;color:var(--paper); }
.featured-section { padding:95px var(--pad) 108px;margin:0;position:relative;background:var(--cream);color:var(--ink);overflow:hidden; }
.featured-section::before { content:"";position:absolute;right:-120px;top:-120px;width:250px;height:150px;background:var(--orange);transform:rotate(-29deg); }
.section-heading { gap:25px;align-items:end;margin-bottom:35px; }
.eyebrow { font-size:11px;font-weight:900;letter-spacing:2px;color:#34383a; }
.section-heading h2 { color:var(--ink);font-family:Impact,'Arial Black','Arial Narrow',sans-serif;font-size:clamp(42px,5.4vw,78px);font-weight:900;letter-spacing:-.25px;line-height:.94;margin:14px 0 0;text-transform:uppercase; }
.section-heading h2 em { color:var(--orange);font-style:normal; }
.text-link { color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--ink);border-radius:0;font-size:12px;font-weight:900;letter-spacing:1px;padding:11px 0;text-transform:uppercase;white-space:nowrap; }
.text-link:hover { color:#cc4b0a; }
.featured-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,26px); }
.game-card { transition:transform .18s,box-shadow .18s; background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:9px;box-shadow:4px 5px 0 #24262818;overflow:visible; }
.game-card:hover { transform:translateY(-5px);box-shadow:8px 10px 0 #ff752f80; }
.game-card:active { transform:translateY(-1px); }
.card-cover,.game-card.featured .card-cover { border:0;border-radius:0;box-shadow:none;aspect-ratio:1.72; }
.card-cover::after { background:linear-gradient(180deg,transparent 55%,#0005 100%); }
.card-cover img { object-fit:cover; }
.card-poster::before,.card-poster::after { display:none; }
.card-topline { top:7px;left:7px;border-radius:0;background:var(--ink);color:var(--cream);padding:5px 8px;font-size:9px;letter-spacing:.9px;backdrop-filter:none; }
.fav-btn { top:6px;right:6px;width:31px;height:31px;background:var(--paper);border:2px solid var(--ink);border-radius:0;color:var(--ink);backdrop-filter:none;font-size:21px; }
.fav-btn[aria-pressed="true"] { background:var(--orange);color:var(--ink);border-color:var(--ink); }
.card-play-overlay { background:var(--orange);color:var(--ink);border-radius:0;border:2px solid var(--ink);bottom:8px;right:8px; }
.card-details { padding:13px 8px 9px; }
.card-details h3,.game-card.featured .card-details h3 { color:var(--ink);font-size:clamp(15px,1.3vw,21px);font-weight:900;letter-spacing:-.3px;margin:0 0 9px;line-height:1.2;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.35em; }
.card-details p { color:#3c3e3d;gap:8px;font-size:11px;font-weight:700;align-items:center;flex-wrap:wrap; }
.card-details p .tiny-mobile { color:#555953; }
.card-details p span+span:before { color:var(--orange); }
.catalog-section { position:relative;background:var(--blue);color:var(--ink);padding:106px var(--pad) 115px; }
.catalog-section::before { content:"";position:absolute;top:-13px;left:0;right:0;height:20px;background:var(--blue);clip-path:polygon(0 45%,12% 0,26% 60%,48% 20%,71% 65%,87% 15%,100% 43%,100% 100%,0 100%); }
.catalog-section .section-heading h2 { font-size:clamp(39px,5.2vw,75px);line-height:.95; }
.catalog-section .section-heading h2 em { color:var(--ink); }
.catalog-section .section-heading { margin-bottom:36px;align-items:end; }
.catalog-section .eyebrow { color:var(--ink); }
.section-subtitle { font-size:14px;line-height:1.6;color:#242628;max-width:550px;margin:22px 0 0; }
.catalog-heading-side { font-size:15px;line-height:1.5;font-weight:800;text-align:left;letter-spacing:-.1px;align-self:center;max-width:270px; }
.filters-anchor { scroll-margin-top:20px; }
/* The original navigation is re-used as an inline filters panel instead of a sidebar. */
.sidebar.catalog-filters-panel { display:block!important;position:static!important;inset:auto!important;z-index:auto;transform:none!important;transition:none!important;overflow:visible!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;flex:unset;align-self:stretch;padding:25px 25px 23px;margin:0 0 26px;border:2px solid var(--ink);border-radius:0;color:var(--ink);background:rgba(255,246,230,.46);box-shadow:6px 6px 0 rgba(36,38,40,.19); }
.sidebar .logo,.sidebar .side-bottom { display:none; }
.search-strip { display:grid;grid-template-columns:minmax(200px,1fr) minmax(150px,235px);gap:25px;align-items:end;margin-bottom:23px; }
.search-field label,.sort-wrap label { display:block;color:var(--ink);font-size:12px;font-weight:900;letter-spacing:.5px;margin-bottom:7px; }
.search { width:100%;height:51px;padding:0 14px;border:2px solid var(--ink);border-radius:0;color:var(--ink);background:var(--paper);box-shadow:none; }
.search svg { color:var(--ink);height:19px;width:19px; }
.search input { color:var(--ink);font-size:13px;font-weight:600; }
.search input::placeholder { color:#656765;opacity:1; }
.search kbd { border:1px solid #b2aa9a;color:#444;background:#eee4d4;font-size:11px; }
.search:focus-within { border-color:var(--ink);box-shadow:4px 4px 0 var(--orange); }
.sort-wrap { color:var(--ink);display:flex;flex-direction:column;align-items:stretch;gap:8px;white-space:normal;font-weight:800; }
.sort-wrap #result-count { order:2;font-weight:800;font-size:12px;line-height:1.2;text-align:right; }
.sort-wrap label { order:1;background:transparent;border:0;border-radius:0;padding:0; }
.sort-wrap select { display:block;width:100%;height:51px;border:2px solid var(--ink);border-radius:0;padding:0 12px;background:var(--paper);color:var(--ink);font-size:12px;font-weight:800;margin-top:7px;outline:none; }
.sort-wrap option { color:var(--ink);background:var(--paper); }
.side-caption,.side-caption-category { padding:0;margin:16px 0 9px;color:var(--ink);font-size:12px;font-weight:900;letter-spacing:.7px; }
.side-caption-category { margin-top:20px; }
.side-links { display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px; }
.side-link { width:auto;min-height:41px;display:inline-flex;padding:8px 12px;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);gap:7px;font-size:12px;font-weight:900;white-space:nowrap; }
.side-link:hover { background:#e5d5b9;color:var(--ink); }
.side-link.active { background:var(--ink);color:var(--cream);box-shadow:4px 4px 0 var(--orange); }
.side-link.active .nav-ico,.side-link.active .cat-ico { color:var(--orange); }
.nav-ico,.cat-ico { width:auto;color:#db641f;font-size:15px; }
.side-counter { background:var(--orange);color:var(--ink);border-radius:0;padding:2px 6px;font-weight:900; }
.active-filter { background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:0;margin:0 0 24px;padding:14px 18px;font-size:12px;font-weight:800; }
.active-filter button { color:var(--ink);font-weight:900; }
.games-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px 24px; }
.load-more,.outline-action { background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:0;font-weight:900;box-shadow:4px 4px 0 #24262845; }
.load-more { padding:15px 23px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;margin:42px auto 0; }
.load-more:hover,.outline-action:hover { background:var(--orange); }
.empty-state { background:var(--paper);color:var(--ink);border:2px dashed var(--ink);border-radius:0; }
.empty-state h3,.empty-state p { color:var(--ink); }
.empty-state .hero-cta { background:var(--orange);color:var(--ink); }
.trust-strip { margin:0;position:relative;background:var(--orange);border:0;border-radius:0;color:var(--ink);padding:68px var(--pad);gap:27px;display:flex; }
.trust-icon { flex:0 0 80px;width:80px;height:80px;border:3px solid var(--ink);border-radius:0;background:var(--cream);color:var(--ink);font-size:44px;box-shadow:7px 7px 0 var(--ink); }
.trust-strip h2 { font-family:Impact,'Arial Black',Arial,sans-serif;font-size:clamp(31px,4vw,54px);font-weight:900;letter-spacing:0;line-height:.93;max-width:600px; }
.trust-strip p { color:var(--ink);font-size:13px;max-width:720px;line-height:1.6;margin-top:13px; }
.trust-strip a { color:var(--ink);border-bottom:2px solid var(--ink);font-size:12px;font-weight:900;letter-spacing:.4px;padding-bottom:6px;margin-left:auto; }
.footer { margin:0;border:0;background:var(--ink);color:var(--cream);padding:42px var(--pad) 50px;display:flex;gap:30px;align-items:center;justify-content:space-between;font-size:11px; }
.footer-logo { font-family:Impact,'Arial Black',Arial,sans-serif;color:var(--cream);font-size:33px;letter-spacing:.5px;line-height:.95; }
.footer-logo span { color:var(--orange); }
.footer-logo small { display:block;margin-top:8px;font:900 9px/1.3 Arial,sans-serif;letter-spacing:1.8px; }
.footer-links a:hover { color:var(--orange); }
.footer-links { color:var(--cream); }
/* The consent gate and game itself stay functional; only frame chrome is restyled. */
.player-overlay { background:#121516eb;backdrop-filter:blur(9px); }
.player-shell { background:var(--ink);border:3px solid var(--cream);border-radius:0;box-shadow:15px 17px 0 #0008; }
.player-top { background:var(--orange);color:var(--ink);border-bottom:2px solid var(--ink); }
.player-back { color:var(--ink);border:2px solid var(--ink);border-radius:0;background:var(--paper);font-weight:900; }
.player-back:hover,.player-actions button:hover { background:var(--cream); }
.player-kicker { color:var(--ink);font-weight:900;letter-spacing:1.5px; }
.player-heading strong { color:var(--ink); }
.player-actions button { background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:0; }
.player-frame-wrap { background:var(--ink); }
.player-gate { color:var(--cream); }
.player-gate h2 { font-size:35px;letter-spacing:-1px;font-weight:900; }
.player-gate p { color:#dfd9ce; }
.gate-icon { background:var(--orange);color:var(--ink);border:2px solid var(--cream);border-radius:0; }
.player-gate .hero-cta { background:var(--orange);border-color:var(--orange);color:var(--ink); }
.player-bottom { background:var(--ink);border-color:#595a56; }
.player-category { color:var(--orange); }
.player-bottom p { color:#e0d7c9; }
.player-bottom p.controls { color:#d2c7b6; }
.player-bottom .controls strong { color:var(--cream); }
.toast { background:var(--orange);border:2px solid var(--ink);border-radius:0;color:var(--ink);box-shadow:7px 7px 0 #0005; }
@media (max-width:1200px) {
  .topbar-nav { gap:16px; }
  .topbar-nav a { font-size:10px;letter-spacing:1px; }
  .studio-brand strong { font-size:14px; }
  .studio-brand small { font-size:8px; }
  .hero h1 { font-size:clamp(85px,11.3vw,140px); }
  .hero-features { width:32%;right:4%; }
  .featured-grid,.games-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .topbar { padding-top:13px;height:90px; }
  .studio-brand img { width:48px;height:48px; }
  .topbar-nav { gap:15px; }
  .topbar-nav a:nth-child(3) { display:none; }
  .surprise-button { padding:0 10px; }
  .hero { min-height:650px;height:74vw;max-height:780px;background-position:center; }
  .hero-copy { top:19%;width:51%; }
  .hero h1 { font-size:clamp(76px,11.5vw,109px);margin-bottom:35px; }
  .hero .hero-tagline { font-size:clamp(24px,3.3vw,32px);margin-bottom:23px; }
  .hero-features { top:26%;width:34%;right:3.5%; }
  .paper-label { font-size:8px;top:-23px; }
  .paper-caption { padding:9px 7px 11px; }
  .paper-caption strong { font-size:17px; }
  .paper-caption small { font-size:8px; }
  .featured-section { padding-top:74px;padding-bottom:78px; }
  .catalog-section { padding-top:80px;padding-bottom:80px; }
  .genre-chip { padding:9px 15px;font-size:11px; }
  .genre-ico,.genre-chip:nth-child(n) .genre-ico { font-size:20px; }
  .sidebar.catalog-filters-panel { padding:21px; }
}
@media (max-width:660px) {
  :root { --pad:22px; }
  .topbar { height:79px;align-items:center;padding:10px var(--pad); }
  .studio-brand { gap:8px; }
  .studio-brand img { width:40px;height:40px; }
  .studio-brand strong { font-size:12px; }
  .studio-brand small { font-size:7px;letter-spacing:1.5px; }
  .topbar-left { min-width:0; }
  .topbar-nav { margin-left:auto; }
  .topbar-nav a { display:none; }
  .topbar-nav a:last-child { display:block;font-size:9px;letter-spacing:.5px; }
  .surprise-button { display:none; }
  .hero { height:auto;min-height:0;max-height:none;padding-top:112px;padding-bottom:30px;display:flex;flex-direction:column;align-items:stretch;background-size:auto 100%;background-position:48% 50%; }
  .hero::before { display:block;content:'';position:absolute;inset:0;background:linear-gradient(to bottom,#24262812 0%,#24262812 35%,#242628c9 56%,#242628ef 100%);pointer-events:none; }
  .hero-copy { position:relative;top:auto;left:auto;padding:0 var(--pad);width:100%;z-index:2; }
  .hero-label { font-size:9px;padding:7px 10px;margin-bottom:24px;letter-spacing:1.2px; }
  .hero h1 { font-size:clamp(80px,21vw,142px);line-height:.82;margin:0 0 29px;transform:rotate(-4deg); }
  .hero .hero-tagline { font-size:clamp(28px,7vw,38px);margin:0 0 25px; }
  .hero-cta { padding:14px 16px;font-size:11px; }
  .hero-copy .hero-note { font-size:8px;margin-top:19px; }
  .hero-features { position:relative;top:auto;right:auto;width:auto;margin:50px var(--pad) 0;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;align-items:start; }
  .paper-card { padding:5px 5px 0;box-shadow:5px 7px 0 #0009; }
  .paper-card.paper-one { transform:rotate(-3deg); }
  .paper-card.paper-two { transform:translateY(18px) rotate(3deg); }
  .paper-label { top:-21px;left:2px;letter-spacing:.4px;font-size:7px;padding:5px; }
  .paper-card img { aspect-ratio:1.35; }
  .paper-caption { padding:7px 5px 9px; }
  .paper-caption strong { font-size:clamp(12px,3.5vw,18px); }
  .paper-caption small { font-size:7px;letter-spacing:.2px; }
  .paper-caption b { font-size:16px; }
  .hero-baseline { position:relative;left:auto;right:auto;bottom:auto;margin:39px -22px -30px;padding:11px 22px;gap:12px;font-size:8px;letter-spacing:.25px; }
  .hero-baseline span:last-child { display:none; }
  .quick-categories { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:12px 8px;gap:0; }
  .genre-chip { min-height:55px;display:flex;flex-direction:column;padding:6px 2px;gap:3px;font-size:8px;line-height:1.1;letter-spacing:0; }
  .genre-chip:not(:last-child) { border-right:1px solid #555; }
  .genre-ico,.genre-chip:nth-child(n) .genre-ico { font-size:18px; }
  .genre-chip b { display:none; }
  .featured-section { padding:57px var(--pad) 66px; }
  .section-heading { gap:14px; }
  .section-heading h2 { font-size:clamp(35px,8.5vw,51px);line-height:.98; }
  .section-heading .eyebrow { font-size:9px;letter-spacing:.8px; }
  .text-link { font-size:9px;padding:8px 0; }
  .featured-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
  .featured-grid .game-card:nth-child(3),.featured-grid .game-card:nth-child(4) { display:none; }
  .catalog-section { padding:64px var(--pad) 73px; }
  .catalog-section .section-heading { flex-direction:column;align-items:flex-start;margin-bottom:23px; }
  .catalog-section .section-heading h2 { font-size:clamp(36px,8.2vw,52px); }
  .catalog-heading-side { font-size:10px;letter-spacing:.2px; }
  .section-subtitle { font-size:12px;line-height:1.5;margin-top:12px; }
  .sidebar.catalog-filters-panel { display:block!important;position:static!important;transform:none!important;width:100%!important;height:auto!important;min-height:0!important;padding:15px!important;margin:0 0 23px; }
  .search-strip { grid-template-columns:1fr;gap:12px;margin-bottom:13px; }
  .search-field label,.sort-wrap label,.side-caption { font-size:10px; }
  .sort-wrap { flex-direction:row;align-items:end;gap:8px; }
  .sort-wrap label { flex:1; }
  .sort-wrap #result-count { flex:0 0 auto;font-size:10px;margin-bottom:14px; }
  .search { height:45px; }
  .sort-wrap select { height:44px;margin-top:5px; }
  .side-caption { margin:14px 0 8px; }
  .side-links { gap:7px; }
  .side-link { padding:7px 9px;min-height:36px;font-size:10px;gap:5px; }
  .nav-ico,.cat-ico { font-size:14px; }
  .side-counter { font-size:9px; }
  .games-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 11px; }
  .game-card { padding:5px; }
  .card-details { padding:8px 4px 6px; }
  .card-details h3,.game-card.featured .card-details h3 { font-size:13px;min-height:2.4em; }
  .card-details p { font-size:10px; }
  .card-topline { font-size:7px;padding:3px 5px; }
  .fav-btn { width:26px;height:26px;font-size:17px; }
  .trust-strip { padding:47px var(--pad);flex-wrap:wrap;gap:18px; }
  .trust-icon { width:55px;height:55px;flex-basis:55px;font-size:31px; }
  .trust-strip h2 { font-size:37px; }
  .trust-strip a { display:none; }
  .footer { padding:35px var(--pad) 42px;flex-direction:column;align-items:flex-start;gap:12px; }
  .footer-logo { font-size:28px; }
  .player-shell { box-shadow:none;border:0; }
  .player-back { font-size:0; }
  .player-back::first-letter { font-size:18px; }
  .player-top { padding:0 7px; }
  .player-actions button { width:30px;height:32px; }
}
@media (prefers-reduced-motion:reduce){ .game-card,.paper-card,.genre-chip,.hero-cta {transition:none!important;} }

/* Final contrast refinements after visual review. */
.topbar-nav {background:var(--ink);border:1px solid #69645e;padding:12px 17px;box-shadow:4px 4px 0 #10101030;}
.topbar-nav a {color:var(--cream);}
.topbar-nav a:hover {color:var(--orange);}
.hero h1 {margin-bottom:30px;}
.hero .hero-tagline {line-height:1.13;}
.tagline-highlight {background:var(--ink);box-shadow:6px 0 var(--ink),-6px 0 var(--ink);padding:0 0 3px;}
@media (max-width:900px) {.topbar-nav {padding:9px 10px;}}
@media (max-width:660px) {.topbar-nav {background:transparent;border:0;box-shadow:none;padding:0;}.topbar-nav a {color:var(--cream);}.tagline-highlight{box-shadow:4px 0 var(--ink),-4px 0 var(--ink);}}

@media (max-width:660px) {
  .hero .hero-tagline {display:table;max-width:calc(100% - 10px);padding:7px 10px 10px;background:var(--ink);box-shadow:5px 5px 0 #ff752f;color:var(--cream);line-height:1.1;}
  .tagline-highlight {background:transparent;box-shadow:none;padding:0;}
  .topbar-nav a:last-child {background:var(--orange);color:var(--ink);border:1px solid var(--ink);padding:9px 8px;box-shadow:3px 3px 0 #12121270;}
  .catalog-section .section-heading h2{font-size:clamp(34px,8.2vw,52px);}
}
/* Keep the tall condensed poster lettering readable on narrow screens. */
.catalog-section .section-heading h2 { line-height:1.07; }
@media (max-width:660px) {
  .catalog-section .section-heading h2 {line-height:1.12;letter-spacing:0;}
  .catalog-heading-side {align-self:flex-start;}
}

/* Official Steam catalogue, distinct from external browser-playable games. */
.hero h1 { font-size:clamp(72px,8.3vw,128px);line-height:.82;margin-bottom:24px; }
.hero h1 span { margin-left:5px; }
.hero h1 .hero-third { display:block;font-size:.42em;letter-spacing:.2em;margin:.28em 0 0 .2em;color:var(--cream);text-shadow:3px 4px 0 #0006; }
.hero-copy { top:17%; }
.hero .hero-tagline { font-size:clamp(23px,2.75vw,40px); }
.genre-steam { background:var(--orange);color:var(--ink); }
.genre-steam .genre-ico,.genre-chip:nth-child(n).genre-steam .genre-ico { color:var(--ink); }
.genre-steam:hover { color:var(--ink);background:var(--cream); }
.side-steam-link { background:#fff3df;border-color:#b24a1a; }
.side-steam-link .nav-ico { color:#df5e1a; }
.side-steam-link.active { background:var(--orange);color:var(--ink); }
.side-steam-link.active .nav-ico { color:var(--ink); }
.steam-spotlight { background:var(--orange);color:var(--ink);padding:80px var(--pad) 88px;position:relative;overflow:hidden; }
.steam-spotlight::before { content:"";position:absolute;right:-75px;top:-30px;width:235px;height:70px;background:var(--cream);transform:rotate(-13deg); }
.steam-spotlight-head { display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:34px; }
.steam-spotlight h2 { color:var(--ink);font-family:Impact,'Arial Black',sans-serif;line-height:.98;font-size:clamp(33px,4.2vw,65px);font-weight:900;margin:14px 0 10px; }
.steam-spotlight h2 em { font-style:normal;color:var(--cream);text-shadow:1px 2px 0 #24262877; }
.steam-spotlight-head p { font-size:13px;font-weight:700;max-width:680px;margin:11px 0 0; }
.steam-see-all { background:var(--ink);color:var(--cream);border-color:var(--ink);white-space:nowrap;flex:0 0 auto; }
.steam-see-all:hover { background:var(--cream); }
.steam-showcase-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px; }
.steam-showcase-card { background:var(--paper);color:var(--ink);border:2px solid var(--ink);padding:9px;text-decoration:none;box-shadow:6px 7px 0 #2426285c;transition:transform .18s,box-shadow .18s; }
.steam-showcase-card:hover { transform:translateY(-5px) rotate(-.6deg);box-shadow:8px 12px 0 #2426288c; }
.steam-showcase-card img { display:block;width:100%;aspect-ratio:1.96;object-fit:cover;background:var(--ink); }
.steam-showcase-body { display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 8px 9px; }
.steam-showcase-body strong { font-size:clamp(15px,1.35vw,22px);font-weight:900;line-height:1.2; }
.steam-showcase-body>span { font-weight:900;font-size:10px;white-space:nowrap; }
.steam-game-card { text-decoration:none;position:relative; }
.steam-game-card .card-cover img { opacity:1;position:absolute;inset:0;width:100%;height:100%; }
.steam-game-card .card-topline { background:var(--orange);color:var(--ink);max-width:calc(100% - 55px); }
.steam-external-mark { position:absolute;right:10px;bottom:8px;border:2px solid var(--ink);background:var(--orange);color:var(--ink);padding:1px 10px;font-size:24px;line-height:1.4;z-index:3; }
.steam-card-details .steam-card-cta { display:block;margin-top:13px;border-top:1px solid #24262855;padding-top:10px;font-size:11px;letter-spacing:.3px;font-weight:900;color:var(--ink); }
.steam-card-year { text-align:right;white-space:nowrap;color:#963d11; }
.steam-game-card:hover .steam-card-cta { text-decoration:underline;text-underline-offset:3px; }
@media(max-width:1100px){.hero h1{font-size:clamp(68px,8vw,106px)}.steam-showcase-body{display:block}.steam-showcase-body>span{display:block;margin-top:6px}.nav-steam{font-size:10px!important}}
@media(max-width:660px){
  .topbar-nav .nav-steam { display:block;font-size:9px!important; }
  .topbar-nav a:last-child { display:none; }
  .hero h1{font-size:clamp(65px,14.4vw,90px);margin-bottom:23px;}
  .hero h1 .hero-third{font-size:.48em;margin-top:.35em;}
  .hero .hero-tagline{font-size:clamp(25px,6.8vw,34px);}
  .quick-categories { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .genre-chip:nth-child(3n) { border-right:none; }
  .steam-spotlight { padding:62px var(--pad) 74px; }
  .steam-spotlight-head { flex-direction:column;align-items:flex-start; }
  .steam-spotlight h2{font-size:clamp(34px,8.4vw,52px)}
  .steam-see-all{white-space:normal;}
  .steam-showcase-grid{grid-template-columns:1fr;gap:18px;}
  .steam-showcase-card img{aspect-ratio:1.95;}
  .steam-showcase-body{display:flex;}
  .steam-showcase-body strong{font-size:17px;}
  .steam-showcase-body>span{margin-top:0;font-size:9px;}
  .steam-card-details .steam-card-cta{font-size:9px;}
}