/* Slopclip site 1027: Steam games, guides, support, landing band. Two accents only: Slopclip orange + navy. */
.s27{--s27-navy:#0f2a55;--s27-navy-2:#1d4a8f;--s27-orange:#ff5a2a;--s27-orange-d:#e94b20;--s27-ink:#14223b;--s27-text:#394559;--s27-muted:#5f6b80;--s27-line:#dde3ec;--s27-paper:#f3f4f7;--s27-wrap:1240px;color:var(--s27-text);background:var(--s27-paper);padding-bottom:64px}
.s27 *,.s27 *::before,.s27 *::after{box-sizing:border-box}
.s27 img{max-width:100%;height:auto;display:block}
.s27-wrap{width:min(var(--s27-wrap),100% - 32px);margin-inline:auto}
.s27-crumbs{font-size:13px;padding:14px 0;color:#c8d5ec;display:flex;flex-wrap:wrap;gap:6px}
.s27-crumbs a{color:#fff;font-weight:700;text-decoration:none}
.s27-crumbs a:hover{text-decoration:underline}
/* hero */
.s27-hero{position:relative;background:var(--s27-navy);color:#fff;overflow:hidden;border-bottom:4px solid var(--s27-orange)}
.s27-hero-media{position:absolute;inset:0}
.s27-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.s27-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,22,46,.94) 0%,rgba(9,22,46,.82) 38%,rgba(9,22,46,.25) 75%,rgba(9,22,46,.1) 100%)}
.s27-hero .s27-wrap{position:relative;z-index:1}
.s27-hero-body{padding:34px 0 52px;max-width:620px}
.s27-kicker{display:inline-flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:0;list-style:none}
.s27-tag{font:800 12px/1 Barlow,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:4px;background:rgba(255,255,255,.12);color:#fff}
.s27-tag.is-hot{background:var(--s27-orange);color:#fff}
.s27-tag.is-age{background:#fff;color:var(--s27-navy)}
.s27-hero h1{font:900 clamp(44px,7vw,84px)/.92 "Barlow Condensed","Barlow Condensed Fallback",Impact,sans-serif;text-transform:uppercase;margin:0 0 14px;letter-spacing:.005em;color:#fff}
.s27-hero h1 small{display:block;font-size:.5em;line-height:1.1;color:#ffd2c2;letter-spacing:.02em}
.s27-lead{font-size:clamp(17px,2vw,20px);line-height:1.5;margin:0 0 22px;color:#e6ecf6;max-width:560px}
.s27-ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.s27-btn,.s27 a.s27-btn{text-decoration:none}
.s27-btn{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 20px;border-radius:6px;font:800 16px/1 Barlow,Arial,sans-serif;text-decoration:none;border:2px solid transparent;transition:transform .12s ease,background .12s ease}
.s27-btn:hover{transform:translateY(-1px)}
.s27-btn:focus-visible{outline:3px solid #ffd2c2;outline-offset:2px}
.s27 a.s27-btn-primary,a.s27-btn-primary{background:var(--s27-orange);color:#fff}
.s27 a.s27-btn-primary:hover,a.s27-btn-primary:hover{background:var(--s27-orange-d);color:#fff}
.s27 a.s27-btn-ghost,a.s27-btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}
.s27 a.s27-btn-ghost:hover,a.s27-btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.s27 a.s27-btn-navy,a.s27-btn-navy{background:var(--s27-navy-2);color:#fff}
.s27 a.s27-btn-navy:hover,a.s27-btn-navy:hover{background:var(--s27-navy);color:#fff}
.s27 a.s27-btn-line,a.s27-btn-line{border-color:var(--s27-navy-2);color:var(--s27-navy-2);background:#fff}
.s27-btn svg{flex:none}
.s27-note{font-size:13px;color:#c8d5ec;margin:14px 0 0}
/* sections */
.s27-section{padding:42px 0 0}
.s27-h2{font:900 clamp(28px,3.4vw,40px)/1 "Barlow Condensed","Barlow Condensed Fallback",Impact,sans-serif;text-transform:uppercase;color:var(--s27-ink);margin:0 0 6px}
.s27-sub{margin:0 0 20px;font-size:16px;color:var(--s27-muted)}
.s27-grid2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start}
.s27-card{background:#fff;border:1px solid var(--s27-line);border-radius:10px;padding:22px}
.s27-card h3{font:800 19px/1.2 Barlow,Arial,sans-serif;color:var(--s27-ink);margin:0 0 8px}
.s27-card p{margin:0 0 10px;line-height:1.6}
.s27-card p:last-child{margin-bottom:0}
.s27-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.s27-list li{position:relative;padding-left:22px;line-height:1.5}
.s27-list li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:2px;background:var(--s27-orange);transform:rotate(45deg)}
.s27-list b{color:var(--s27-ink)}
.s27-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.s27-mode{background:#fff;border:1px solid var(--s27-line);border-top:4px solid var(--s27-navy-2);border-radius:10px;padding:18px}
.s27-mode h3{font:800 18px/1.2 Barlow,Arial,sans-serif;color:var(--s27-ink);margin:0 0 4px}
.s27-mode .s27-meta{font:700 12px/1.3 "IBM Plex Mono",monospace;color:var(--s27-orange-d);text-transform:uppercase;margin:0 0 8px}
.s27-mode p{margin:0;line-height:1.55}
/* gallery */
.s27-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.s27-gallery a{display:block;border-radius:8px;overflow:hidden;background:#0f2a55;aspect-ratio:16/9}
.s27-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.s27-gallery a:hover img{transform:scale(1.03)}
.s27-gallery figure{margin:0}
.s27-gallery figcaption{font-size:13px;color:var(--s27-muted);padding:6px 2px 0}
/* specs */
.s27-specs{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;border:1px solid var(--s27-line);border-radius:10px;overflow:hidden}
.s27-specs th,.s27-specs td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--s27-line);vertical-align:top;line-height:1.45}
.s27-specs thead th{background:var(--s27-navy);color:#fff;font-weight:800}
.s27-specs tbody th{color:var(--s27-ink);width:22%;font-weight:700}
.s27-specs tr:last-child th,.s27-specs tr:last-child td{border-bottom:0}
.s27-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.s27-small{font-size:13px;color:var(--s27-muted);margin:10px 0 0;line-height:1.5}
/* age notice */
.s27-age{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--s27-line);border-left:5px solid var(--s27-orange);border-radius:8px;padding:14px 16px;margin:22px 0 0;line-height:1.5}
.s27-age strong{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--s27-navy);color:#fff;font:900 17px/1 Barlow,Arial,sans-serif}
.s27-age p{margin:0}
/* cta band */
.s27-band{margin-top:44px;background:var(--s27-navy);color:#fff;border-radius:12px;padding:26px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.s27-band h2{font:900 clamp(26px,3vw,36px)/1 "Barlow Condensed","Barlow Condensed Fallback",Impact,sans-serif;text-transform:uppercase;margin:0 0 4px;color:#fff}
.s27-band p{margin:0;color:#c8d5ec}
/* game tiles (hub + landing) */
.s27-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.s27-tile{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--s27-line);border-radius:12px;overflow:hidden;color:var(--s27-text)}
.s27-tile-art{position:relative;display:block;aspect-ratio:16/9;background:var(--s27-navy)}
.s27-tile-art img{width:100%;height:100%;object-fit:cover}
.s27-tile-art .s27-kicker{position:absolute;left:12px;top:12px;margin:0}
.s27-tile-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.s27-tile :is(h2,h3){font:900 30px/.95 "Barlow Condensed","Barlow Condensed Fallback",Impact,sans-serif;text-transform:uppercase;margin:0}
.s27-tile :is(h2,h3) a{color:var(--s27-ink);text-decoration:none}
.s27-tile :is(h2,h3) a:hover{color:var(--s27-orange-d)}
.s27-tile p{margin:0;line-height:1.5}
.s27-tile .s27-ctas{margin-top:auto;padding-top:6px}
.s27-tile .s27-btn{min-height:42px;font-size:15px;padding:0 16px}
.s27-facts{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.s27-facts li{font:700 12px/1 "IBM Plex Mono",monospace;padding:6px 8px;border-radius:4px;background:var(--s27-paper);color:var(--s27-navy-2)}
/* guides */
.s27-guide{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:start}
.s27-prose{background:#fff;border:1px solid var(--s27-line);border-radius:10px;padding:28px 32px;min-width:0}
.s27-prose h2{font:800 26px/1.15 Barlow,Arial,sans-serif;color:var(--s27-ink);margin:30px 0 10px;scroll-margin-top:16px}
.s27-prose>section:first-child>h2{margin-top:0}
.s27-prose h3{font:800 19px/1.2 Barlow,Arial,sans-serif;color:var(--s27-ink);margin:22px 0 8px}
.s27-prose p,.s27-prose li{line-height:1.65;font-size:16px}
.s27-prose ul,.s27-prose ol{padding-left:22px}
.s27-prose a{color:var(--s27-navy-2)}
.s27-prose .s27-specs{margin:12px 0}
.s27-prose kbd{font:700 13px/1 "IBM Plex Mono",monospace;background:var(--s27-paper);border:1px solid var(--s27-line);border-bottom-width:2px;border-radius:4px;padding:3px 6px;color:var(--s27-ink);white-space:nowrap}
.s27-shot{margin:16px 0;border-radius:8px;overflow:hidden}
.s27-shot figcaption{font-size:13px;color:var(--s27-muted);padding:6px 0 0}
.s27-toc{position:sticky;top:16px;background:#fff;border:1px solid var(--s27-line);border-top:4px solid var(--s27-navy-2);border-radius:10px;padding:18px;display:grid;gap:4px}
.s27-toc strong{color:var(--s27-ink);margin-bottom:6px}
.s27-toc a{color:var(--s27-text);text-decoration:none;padding:5px 0 5px 10px;border-left:2px solid var(--s27-line);font-size:14.5px}
.s27-toc a:hover,.s27-toc a[aria-current]{color:var(--s27-orange-d);border-left-color:var(--s27-orange)}
.s27-toc hr{border:0;border-top:1px solid var(--s27-line);margin:10px 0}
.s27-guide-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.s27-guide-links a{display:block;background:#fff;border:1px solid var(--s27-line);border-left:4px solid var(--s27-orange);border-radius:8px;padding:14px 16px;text-decoration:none;color:var(--s27-text)}
.s27-guide-links a strong{display:block;color:var(--s27-ink);font-size:17px;margin-bottom:3px}
.s27-guide-links a:hover strong{color:var(--s27-orange-d)}
/* support */
.s27-mail{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:#fff;border:1px solid var(--s27-line);border-radius:12px;padding:20px 22px}
.s27-mail a.s27-addr{font:900 clamp(24px,4vw,34px)/1 "Barlow Condensed","Barlow Condensed Fallback",Impact,sans-serif;color:var(--s27-navy-2);text-decoration:none;word-break:break-all}
.s27-mail a.s27-addr:hover{color:var(--s27-orange-d)}
/* landing band inside the SPA */
body>#steam-band{display:none}
#steam-band{margin:0 0 18px}
#steam-band[hidden]{display:none}
#steam-band .s27-band-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#steam-band .s27-tiles{padding:14px}
#steam-band .s27-tile{border-color:#d5dce8}
#steam-band .s27-tile :is(h2,h3){font-size:28px}
#steam-band .s27-tile p{font-size:14px}
/* responsive */
@media (max-width:1000px){.s27-grid2,.s27-guide{grid-template-columns:1fr}.s27-toc{position:static;grid-row:1}.s27-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.s27-tiles{grid-template-columns:1fr}.s27-hero-media::after{background:linear-gradient(180deg,rgba(9,22,46,.35) 0%,rgba(9,22,46,.85) 45%,rgba(9,22,46,.96) 100%)}.s27-hero-body{padding:150px 0 34px}.s27-prose{padding:20px 18px}.s27-band{padding:20px}#steam-band .s27-tiles{padding:10px}}
@media (max-width:520px){.s27-gallery{grid-template-columns:1fr}.s27-btn{width:100%;justify-content:center}.s27-ctas{width:100%}.s27-specs{font-size:13.5px}.s27-specs th,.s27-specs td{padding:9px 10px}}
@media (prefers-reduced-motion:reduce){.s27-btn,.s27-gallery img{transition:none}.s27-btn:hover{transform:none}}
.s27-tile-art .s27-tag:not(.is-hot):not(.is-age){background:rgba(15,42,85,.9)}
@media (max-width:760px){.s27-hero-media{position:relative;aspect-ratio:16/9}.s27-hero-media::after{background:linear-gradient(180deg,rgba(9,22,46,0) 55%,rgba(15,42,85,1) 100%)}.s27-hero-body{padding:6px 0 30px}.s27-hero .s27-crumbs{padding-top:4px}}
@media (max-width:520px){#steam-band .s27-tile-art{aspect-ratio:2/1}#steam-band .s27-facts{display:none}#steam-band .s27-tile-body{padding:12px 14px 14px;gap:6px}#steam-band .s27-ctas{flex-wrap:nowrap;gap:8px}#steam-band .s27-btn{width:auto;flex:1 1 auto;padding:0 10px;font-size:14px;min-height:42px}#steam-band .s27-btn svg{display:none}#steam-band .s27-tile :is(h2,h3){font-size:25px}}
.s27-hero-plain{background:var(--s27-navy)}
.s27-ac-hero{max-width:none;display:grid;grid-template-columns:minmax(0,620px) auto;gap:40px;align-items:center;justify-content:space-between}
.s27-ac-badge{width:min(100%,360px);height:auto}
.s27-ac-strip{display:flex;align-items:center;gap:12px;margin:0 14px 14px;padding:10px 14px;border-radius:8px;background:#111a19;color:#fff7df;text-decoration:none;font-size:14.5px;line-height:1.35}
.s27 .s27-ac-strip,.s27 .s27-ac-strip:hover{color:#fff7df;text-decoration:none}
.s27-ac-strip b{color:#ff5a2a}
.s27-ac-strip:hover span{text-decoration:underline}
.s27-ac-strip img{flex:none;width:29px;height:38px}
.s27-wrap>.s27-ac-strip{margin:16px 0 0}
.s27-specs td a{color:var(--s27-navy-2);font-weight:700}
@media (max-width:760px){.s27-ac-hero{grid-template-columns:1fr;gap:18px;padding-top:24px}.s27-ac-badge{width:240px;grid-row:1}#steam-band .s27-ac-strip{margin:0 10px 10px}}
.s27-prose p{margin:0 0 12px}
.s27-prose ul,.s27-prose ol{margin:0 0 12px}
.s27-prose li{margin:0 0 6px}
.s27-ac-hero{grid-template-columns:minmax(0,760px) auto}
.s27-ac-hero h1{font-size:clamp(42px,6vw,76px)}
.s27-ac-hero h1 small{font-size:.42em}
@media (max-width:760px){.s27-ac-hero{display:flex;flex-direction:column;align-items:flex-start}.s27-ac-badge{order:-1;grid-row:auto}}