:root {
    --bg: #070912;
    --bg-2: #0b1020;
    --panel: #0e1425;
    --panel-2: #121a30;
    --text: #f7f5ff;
    --muted: #8f9bb4;
    --line: rgba(148, 163, 184, 0.18);
    --yellow: #facc15;
    --cyan: #22d3ee;
    --magenta: #f472b6;
    --purple: #a855f7;
    --green: #22c55e;
    --pixel: 'Press Start 2P', ui-monospace, monospace;
    --body: 'Space Grotesk', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 10% 0%, rgba(168, 85, 247, 0.16), transparent 32rem),
        radial-gradient(circle at 90% 12%, rgba(34, 211, 238, 0.10), transparent 30rem),
        linear-gradient(180deg, #070912 0%, #080d19 48%, #060810 100%);
    font-family: var(--body);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.noise {
    position: fixed;
    z-index: 100;
    inset: 0;
    pointer-events: none;
    opacity: .035;
    background-image: repeating-linear-gradient(0deg, transparent 0 3px, #fff 3px 4px);
    mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.container { width: min(1220px, calc(100% - 36px)); margin-inline: auto; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(7, 9, 18, .86);
    backdrop-filter: blur(18px);
}

.header-inner {
    min-height: 84px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
}
.brand { width: fit-content; display: inline-flex; align-items: center; }
.brand-logo { display: block; width: 205px; height: auto; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a {
    font: 400 .6rem/1 var(--pixel);
    color: var(--muted);
    transition: color .15s ease;
}
.main-nav a:hover { color: var(--yellow); }
.header-cta {
    justify-self: end;
    padding: 13px 16px 11px;
    border: 2px solid var(--yellow);
    box-shadow: 4px 4px 0 rgba(250, 204, 21, .25);
    color: var(--yellow);
    font: 400 .58rem/1 var(--pixel);
}
.header-cta:hover { background: var(--yellow); color: #111; }

.hero { position: relative; padding: 94px 0 76px; }
.hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg, var(--purple) 0 28px, transparent 28px 40px, var(--cyan) 40px 68px, transparent 68px 80px);
    opacity: .55;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 72px; }
.pixel-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 26px;
    color: var(--green);
    font: 400 .58rem/1.7 var(--pixel);
    letter-spacing: .03em;
}
.pixel-kicker > span { width: 8px; height: 8px; background: currentColor; box-shadow: 0 0 12px currentColor; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.hero h1 {
    margin: 0;
    font: 400 clamp(2.3rem, 5.4vw, 5.5rem)/1.12 var(--pixel);
    letter-spacing: -.06em;
    text-shadow: 7px 7px 0 rgba(168, 85, 247, .15);
}
.hero h1 em { color: var(--yellow); font-style: normal; }
.hero-lead { max-width: 630px; margin: 28px 0 0; color: #b9c1d2; font-size: 1.14rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.pixel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 20px;
    border: 2px solid;
    font: 400 .58rem/1.4 var(--pixel);
    box-shadow: 5px 5px 0 rgba(255,255,255,.07);
    transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.pixel-button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(255,255,255,.07); }
.pixel-button--primary { border-color: var(--yellow); background: var(--yellow); color: #111318; }
.pixel-button--ghost { border-color: #3d4963; color: #c5ccda; }
.hero-stats { display: flex; gap: 32px; margin-top: 44px; }
.hero-stats > div { padding-left: 14px; border-left: 3px solid var(--purple); }
.hero-stats strong { display: block; font: 400 1.35rem/1 var(--pixel); }
.hero-stats span { display: block; margin-top: 9px; color: var(--muted); font: 400 .48rem/1 var(--pixel); }

.hero-art { display: flex; justify-content: center; }
.arcade-screen {
    position: relative;
    width: min(100%, 500px);
    padding: 14px;
    border: 3px solid #56617a;
    background: #111827;
    box-shadow: 14px 14px 0 #06070c, 0 0 50px rgba(34,211,238,.06);
}
.arcade-screen::before, .arcade-screen::after { content: ''; position: absolute; width: 8px; height: 8px; background: #6b7280; top: 7px; }
.arcade-screen::before { left: 7px; } .arcade-screen::after { right: 7px; }
.arcade-screen__header, .arcade-screen__footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    color: #8893a8;
    font: 400 .42rem/1.5 var(--pixel);
}
.pixel-space {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 4px solid #02040a;
    background:
        linear-gradient(rgba(0,0,0,.28) 50%, transparent 50%),
        radial-gradient(circle at 50% 45%, rgba(168,85,247,.20), transparent 42%),
        #020711;
    background-size: 100% 4px, auto, auto;
    box-shadow: inset 0 0 60px rgba(34,211,238,.08);
}
.pixel-space p { position: absolute; bottom: 24px; margin: 0; color: var(--yellow); font: 400 .72rem/1 var(--pixel); animation: blink 1s steps(1) infinite; }
.pixel-star { position: absolute; width: 5px; height: 5px; background: #fff; box-shadow: 0 0 10px #fff; }
.s1 { left: 15%; top: 20%; } .s2 { right: 17%; top: 30%; width: 3px; height: 3px; } .s3 { left: 28%; bottom: 25%; width: 3px; height: 3px; }
.pixel-controller {
    position: relative;
    width: 230px;
    height: 106px;
    border: 10px solid #d5d9e3;
    background: #aeb6c7;
    box-shadow: 0 0 0 9px #333a4a, 10px 10px 0 rgba(0,0,0,.35);
}
.pixel-controller::before, .pixel-controller::after { content:''; position:absolute; bottom:-32px; width:72px; height:34px; background:#333a4a; }
.pixel-controller::before { left:-10px; } .pixel-controller::after { right:-10px; }
.dpad { position: absolute; background: #1f2937; left: 44px; top: 41px; }
.dpad-h { width: 62px; height: 22px; } .dpad-v { width: 22px; height: 62px; left: 64px; top: 21px; }
.button-a, .button-b { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--magenta); box-shadow: inset -5px -5px 0 rgba(0,0,0,.25); top: 33px; }
.button-a { right: 28px; } .button-b { right: 66px; top: 52px; background: var(--purple); }

.console-strip { padding: 52px 0 68px; background: rgba(10,14,27,.62); border-bottom: 1px solid var(--line); }
.section-label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--muted); font: 400 .52rem/1 var(--pixel); }
.section-label span { color: var(--cyan); }
.console-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.console-tile {
    position: relative;
    min-height: 126px;
    padding: 18px 14px;
    overflow: hidden;
    text-align: left;
    border: 1px solid #27314a;
    background: #0b1120;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}
.console-tile::after { content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background: var(--console-accent, var(--yellow)); transform: scaleX(.25); transform-origin:left; transition:transform .14s ease; }
.console-tile:hover, .console-tile.active { border-color: var(--console-accent, var(--yellow)); transform: translateY(-3px); }
.console-tile:hover::after, .console-tile.active::after { transform: scaleX(1); }
.console-icon { display: grid; width: 43px; height: 37px; place-items: center; margin-bottom: 17px; border: 2px solid var(--console-accent, var(--yellow)); color: var(--console-accent, var(--yellow)); font: 400 .45rem/1 var(--pixel); }
.console-tile strong { display:block; font: 400 .58rem/1.4 var(--pixel); }
.console-tile small { display:block; margin-top: 8px; color:var(--muted); font-size:.73rem; }

.library-section { padding: 70px 0; border-bottom: 1px solid var(--line); }
.dynamic-section { background: rgba(255,255,255,.012); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:25px; }
.section-heading h2 { margin:0; font:400 clamp(1.25rem,2.7vw,2rem)/1.35 var(--pixel); letter-spacing:-.04em; }
.section-counter, .text-button { color:var(--muted); font:400 .48rem/1 var(--pixel); }
.text-button { border:0; background:none; cursor:pointer; }
.text-button:hover { color:var(--yellow); }

.toolbar { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:28px; padding:16px; border:1px solid #27314a; background:#0a101e; box-shadow:6px 6px 0 rgba(0,0,0,.18); }
.search-box { flex:1; min-width:250px; }
.search-box > span { display:block; margin-bottom:9px; color:var(--cyan); font:400 .48rem/1 var(--pixel); }
.search-box input { width:100%; min-height:46px; padding:0 14px; border:1px solid #2c3854; outline:0; background:#070b14; color:#fff; font-family:var(--body); }
.search-box input:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(34,211,238,.12); }
.search-box input::placeholder { color:#56617a; }
.console-filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.filter-button { min-height:39px; padding:0 12px; border:1px solid #2c3854; background:#0a0f1c; color:#8792a8; cursor:pointer; font:400 .43rem/1 var(--pixel); }
.filter-button:hover, .filter-button.active { border-color:var(--yellow); color:#111; background:var(--yellow); }

.game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; }
.game-grid--rail { grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); }
.game-card {
    --console-accent: var(--purple);
    position:relative;
    overflow:hidden;
    min-width:0;
    border:1px solid #27314a;
    background:linear-gradient(180deg,#111827,#0b1020);
    box-shadow:7px 7px 0 rgba(0,0,0,.22);
    transition:transform .15s ease,border-color .15s ease;
}
.game-card:hover { transform:translateY(-4px); border-color:var(--console-accent); }
.game-card__topline { height:4px; background:var(--console-accent); }
.cover-link { position:relative; display:block; aspect-ratio:3/4; overflow:hidden; background:#080b14; }
.game-cover { width:100%; height:100%; display:block; object-fit:cover; image-rendering:auto; transition:transform .2s ease,filter .2s ease; }
.game-card:hover .game-cover { transform:scale(1.035); filter:saturate(1.08); }
.cover-scanlines { position:absolute; inset:0; opacity:.08; pointer-events:none; background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 4px); }
.play-overlay { position:absolute; left:12px; bottom:12px; padding:10px 10px 8px; border:2px solid var(--yellow); background:#090b11; color:var(--yellow); font:400 .48rem/1 var(--pixel); opacity:0; transform:translateY(5px); transition:.15s ease; }
.game-card:hover .play-overlay { opacity:1; transform:none; }
.favorite-button { position:absolute; z-index:4; top:14px; right:10px; width:38px; height:38px; display:grid; place-items:center; border:2px solid #46516a; background:rgba(7,9,18,.9); color:#8994a9; cursor:pointer; font-size:1rem; }
.favorite-button:hover, .favorite-button.is-active { color:var(--yellow); border-color:var(--yellow); text-shadow:0 0 10px rgba(250,204,21,.5); }
.game-info { padding:15px; }
.game-info__meta { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.console-badge { color:var(--console-accent); font:400 .45rem/1 var(--pixel); }
.status-dot { display:inline-block; width:7px; height:7px; background:var(--green); box-shadow:0 0 9px rgba(34,197,94,.6); }
.game-info h3 { min-height:2.7em; margin:11px 0 6px; font-size:1.04rem; line-height:1.28; }
.game-meta { min-height:1.2em; margin:0 0 14px; color:#79859e; font-size:.74rem; text-transform:uppercase; }
.play-button { display:flex; align-items:center; justify-content:space-between; min-height:40px; padding:0 11px; border:1px solid #323f5b; color:#b8c0d0; font:400 .45rem/1 var(--pixel); transition:.12s ease; }
.play-button:hover { border-color:var(--console-accent); color:#fff; background:color-mix(in srgb,var(--console-accent) 16%,transparent); }

.empty-state { padding:58px 25px; text-align:center; border:1px dashed #34405b; background:#0a101e; }
.empty-state--small { margin-top:22px; }
.empty-icon { display:grid; width:52px; height:52px; place-items:center; margin:0 auto 20px; border:2px solid var(--yellow); color:var(--yellow); font:400 1rem/1 var(--pixel); }
.empty-state h3 { margin:0; font:400 .8rem/1.6 var(--pixel); }
.empty-state p { max-width:680px; margin:15px auto 0; color:var(--muted); line-height:1.65; }
code { padding:.12em .38em; background:rgba(255,255,255,.08); color:var(--cyan); }

.site-footer { padding:45px 0 22px; background:#04060b; }
.footer-grid { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.footer-logo { width:180px; }
.footer-grid p { max-width:520px; margin:13px 0 0; color:var(--muted); }
.footer-status { display:flex; align-items:center; gap:10px; color:#7d8ba5; font:400 .45rem/1.6 var(--pixel); }
.legal-note { margin-top:30px; padding-top:18px; border-top:1px solid #171d2b; color:#5c687e; font-size:.75rem; }

/* PLAYER */
.player-page { min-height:100vh; }
.player-site-header { position:relative; }
.player-header { min-height:82px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.brand--player { justify-self:center; }
.back-link { color:#9ba6ba; font:400 .48rem/1 var(--pixel); }
.back-link:hover { color:var(--yellow); }
.player-favorite { justify-self:end; min-height:40px; padding:0 12px; border:1px solid #34415e; background:#0b1020; color:#8994aa; cursor:pointer; font:400 .44rem/1 var(--pixel); }
.player-favorite.is-active { border-color:var(--yellow); color:var(--yellow); }
.player-main { width:min(1260px,calc(100% - 28px)); margin:36px auto 60px; }
.player-titlebar { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:20px; }
.player-titlebar h1 { max-width:800px; margin:0; font:400 clamp(1.25rem,3.2vw,2.5rem)/1.35 var(--pixel); letter-spacing:-.04em; }
.player-indicators { display:flex; flex-direction:column; align-items:flex-end; gap:8px; color:#77839a; font:400 .42rem/1.4 var(--pixel); }
.player-indicators .status-dot { margin-right:6px; }
.player-cabinet { padding:13px; border:2px solid #35415d; background:#111827; box-shadow:10px 10px 0 #03050a; }
.cabinet-top, .cabinet-bottom { display:flex; justify-content:space-between; gap:20px; padding:10px 8px; color:#7f8aa0; font:400 .43rem/1.5 var(--pixel); }
.cabinet-top span:last-child { color:var(--console-accent); }
.player-shell { overflow:hidden; width:100%; min-height:min(72vh,760px); border:4px solid #03050a; background:#000; box-shadow:inset 0 0 55px rgba(0,0,0,.55); }
#game { width:100%; height:760px; min-height:min(72vh,760px); }
.cabinet-light { display:inline-block; width:7px; height:7px; margin-right:8px; background:var(--green); box-shadow:0 0 8px var(--green); }
.player-help { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; }
.player-help > div { display:flex; gap:14px; min-height:80px; align-items:flex-start; padding:17px; border:1px solid #202a40; background:#090e1a; }
.player-help strong { color:var(--cyan); font:400 .55rem/1.5 var(--pixel); }
.player-help span { color:#8c98ae; font-size:.85rem; line-height:1.5; }
.player-help b { color:#d6dbea; font-weight:600; }

@media (max-width: 980px) {
    .header-inner { grid-template-columns:1fr auto; }
    .main-nav { display:none; }
    .hero-grid { grid-template-columns:1fr; }
    .hero-copy { max-width:760px; }
    .hero-art { justify-content:flex-start; }
    .console-grid { grid-template-columns:repeat(3,1fr); }
    .toolbar { align-items:stretch; flex-direction:column; }
    .console-filters { justify-content:flex-start; }
    .player-titlebar { align-items:flex-start; flex-direction:column; }
    .player-indicators { align-items:flex-start; }
}

@media (max-width: 680px) {
    .container { width:min(100% - 22px,1220px); }
    .site-header .brand-logo { width:168px; }
    .header-inner { min-height:72px; gap:12px; }
    .header-cta { padding:11px 10px 9px; font-size:.46rem; }
    .hero { padding:58px 0 56px; }
    .hero h1 { font-size:clamp(1.85rem,10vw,3rem); line-height:1.22; }
    .hero-lead { font-size:1rem; }
    .hero-actions { align-items:stretch; flex-direction:column; }
    .pixel-button { width:100%; }
    .hero-stats { gap:18px; }
    .hero-stats strong { font-size:1rem; }
    .arcade-screen { box-shadow:8px 8px 0 #06070c; }
    .pixel-controller { transform:scale(.72); }
    .console-grid { grid-template-columns:repeat(2,1fr); }
    .console-tile { min-height:112px; }
    .library-section { padding:52px 0; }
    .section-heading { align-items:flex-start; flex-direction:column; }
    .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .game-info { padding:11px; }
    .game-info h3 { font-size:.88rem; }
    .play-button { font-size:.37rem; }
    .cover-link { aspect-ratio:3/4; }
    .footer-grid { align-items:flex-start; flex-direction:column; }
    .player-header { grid-template-columns:1fr 1fr; padding:12px 0; }
    .brand--player { display:none; }
    .player-favorite { justify-self:end; }
    .player-main { width:calc(100% - 16px); margin-top:22px; }
    .player-titlebar h1 { font-size:1.15rem; }
    .player-shell, #game { min-height:62vh; }
    .cabinet-top, .cabinet-bottom { font-size:.34rem; }
    .player-help { grid-template-columns:1fr; }
}

/* =========================
   V1.2 · GAME DETAILS
   ========================= */
.details-page {
    --details-accent: var(--console-accent, #facc15);
}

.details-hero {
    padding: 64px 0 52px;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--details-accent) 20%, transparent), transparent 28rem),
        linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}

.details-grid {
    display: grid;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    gap: clamp(34px, 6vw, 84px);
    align-items: center;
}

.details-cover-wrap {
    min-width: 0;
}

.details-cover-frame {
    position: relative;
    aspect-ratio: 3 / 4;
    padding: 10px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--details-accent) 65%, var(--line));
    background: #05070c;
    box-shadow:
        10px 10px 0 rgba(0,0,0,.35),
        0 0 42px color-mix(in srgb, var(--details-accent) 15%, transparent);
}

.details-cover-frame::before,
.details-cover-frame::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 18px;
    height: 18px;
    border-color: var(--details-accent);
}

.details-cover-frame::before {
    left: 2px;
    top: 2px;
    border-left: 3px solid var(--details-accent);
    border-top: 3px solid var(--details-accent);
}

.details-cover-frame::after {
    right: 2px;
    bottom: 2px;
    border-right: 3px solid var(--details-accent);
    border-bottom: 3px solid var(--details-accent);
}

.details-cover {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.details-file-chip {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    color: var(--muted);
    background: rgba(255,255,255,.025);
    font-family: "Press Start 2P", monospace;
    font-size: .58rem;
    line-height: 1.5;
    text-align: center;
}

.details-copy h1 {
    margin: 18px 0 20px;
    max-width: 900px;
    font-family: "Press Start 2P", monospace;
    font-size: clamp(1.65rem, 4vw, 3.65rem);
    line-height: 1.25;
    letter-spacing: -.035em;
}

.details-description {
    max-width: 820px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.5vw, 1.14rem);
    line-height: 1.85;
}

.details-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 0;
}

.details-tags span {
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--details-accent) 45%, var(--line));
    background: color-mix(in srgb, var(--details-accent) 7%, transparent);
    color: var(--text);
    font-size: .76rem;
    font-weight: 700;
}

.details-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.details-actions .pixel-button {
    min-height: 54px;
}

#detailsFavorite.is-active {
    border-color: var(--details-accent);
    color: var(--details-accent);
    box-shadow: inset 0 0 0 1px var(--details-accent);
}

.game-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 34px 0 0;
    padding: 1px;
    border: 1px solid var(--line);
    background: var(--line);
}

.game-specs div {
    min-height: 88px;
    padding: 15px;
    background: var(--bg);
}

.game-specs dt {
    margin-bottom: 8px;
    color: var(--details-accent);
    font-family: "Press Start 2P", monospace;
    font-size: .52rem;
    line-height: 1.5;
}

.game-specs dd {
    margin: 0;
    color: var(--text);
    font-weight: 700;
    line-height: 1.4;
}

.details-system-line {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    color: var(--muted);
    font-family: "Press Start 2P", monospace;
    font-size: .52rem;
    line-height: 1.7;
}

.related-section {
    padding-top: 52px;
}

@media (max-width: 820px) {
    .details-hero {
        padding-top: 38px;
    }

    .details-grid {
        grid-template-columns: 1fr;
    }

    .details-cover-wrap {
        width: min(76vw, 340px);
        margin-inline: auto;
    }

    .details-copy {
        text-align: center;
    }

    .details-copy .pixel-kicker,
    .details-actions,
    .details-tags,
    .details-system-line {
        justify-content: center;
    }

    .details-description {
        margin-inline: auto;
    }

    .game-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        text-align: left;
    }
}

@media (max-width: 520px) {
    .details-actions {
        flex-direction: column;
    }

    .details-actions .pixel-button {
        width: 100%;
    }

    .game-specs {
        grid-template-columns: 1fr;
    }
}