:root {
    --bg: #070a12;
    --surface: #101522;
    --surface-2: #171e2d;
    --text: #f7f8fb;
    --muted: #9aa4b5;
    --accent: #ff714b;
    --accent-2: #66e3ed;
    --line: rgba(255,255,255,.1);
    --shadow: 0 28px 80px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
    margin: 0;
    background:
        radial-gradient(circle at 88% 3%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 31rem),
        radial-gradient(circle at 3% 48%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 27rem),
        var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
}

body.classic {
    --bg: #07140b;
    --surface: #102a16;
    --surface-2: #173f1b;
    --text: #d7ee91;
    --muted: #a8bd72;
    --accent: #cbe875;
    --accent-2: #78973e;
}

body.classic-catalog {
    --bg: #120b18;
    --surface: #21142a;
    --surface-2: #321c38;
    --text: #fff8e8;
    --muted: #c5afc5;
    --accent: #ffbb52;
    --accent-2: #ef5f83;
    --line: rgba(255,187,82,.17);
    --shadow: 0 28px 80px rgba(4,0,8,.38);
}

body.pixel-arcade {
    --bg: #020817;
    --surface: #07152d;
    --surface-2: #0b2341;
    --text: #f7fbff;
    --muted: #96aaca;
    --accent: #11d9d0;
    --accent-2: #ffd91f;
    --line: rgba(17,217,208,.18);
    --shadow: 0 28px 80px rgba(0,0,0,.4);
}

body.tilenza {
    --bg: #f7f1e5;
    --surface: #fffbf3;
    --surface-2: #e9dec9;
    --text: #292b2c;
    --muted: #625d55;
    --accent: #b75f45;
    --accent-2: #637a5a;
    --line: rgba(36,55,74,.17);
    --shadow: 0 28px 80px rgba(62,42,24,.16);
}

body.tilenza .site-header { background: rgba(247,241,229,.9); }
body.tilenza .button-primary { background: #24374a; color: #fff; }
body.tilenza .pill { border-color: rgba(183,95,69,.3); color: #9b4935; }

body.modern {
    --bg: #07051a;
    --surface: #11102a;
    --surface-2: #191440;
    --text: #f8f5ff;
    --muted: #aaa5c4;
    --accent: #d34cff;
    --accent-2: #3bcfff;
}

body.professional {
    --bg: #f4f7fa;
    --surface: #ffffff;
    --surface-2: #eaf0f6;
    --text: #10233f;
    --muted: #5e6c80;
    --accent: #1959b8;
    --accent-2: #1fa8a1;
    --line: rgba(16,35,63,.12);
    --shadow: 0 24px 70px rgba(35,68,108,.12);
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 75%, white); outline-offset: 4px; border-radius: 6px; }
img { max-width: 100%; }
.container { width: min(1140px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(18px);
}
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-mark { width: 50px; height: 50px; object-fit: cover; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-2) 16%, transparent); }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-size: 1rem; font-weight: 900; letter-spacing: .04em; }
.brand-copy small { margin-top: 6px; color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: .84rem; font-weight: 750; }
.nav a { padding: 9px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover, .nav a:focus-visible, .nav a.active { color: var(--text); border-color: var(--accent); }

.hero { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 70px; min-height: 650px; padding: 72px 0 90px; }
.eyebrow, .section-tag { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-size: .74rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before, .section-tag::before { content: ""; width: 22px; height: 2px; background: currentColor; }
h1 { max-width: 760px; margin: 18px 0 0; font-size: clamp(3.8rem, 7.8vw, 7rem); line-height: .91; letter-spacing: -.07em; }
h1 .accent, h2 .accent { color: var(--accent); }
.lead { max-width: 620px; margin: 28px 0 32px; color: var(--muted); font-size: 1.12rem; }
.actions { display: flex; flex-wrap: wrap; gap: 13px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 23px; border: 1px solid var(--line); border-radius: 13px; font-weight: 850; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 16%, transparent); }
.button-primary { border-color: transparent; background: var(--accent); color: var(--bg); }
.button-secondary { color: var(--muted); }

.launch-visual { position: relative; display: grid; place-items: center; min-height: 470px; }
.launch-logo { position: relative; z-index: 2; width: min(265px, 65vw); border-radius: 58px; box-shadow: var(--shadow); transform: rotate(-4deg); }
.orbit { position: absolute; width: 390px; max-width: 90%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent); border-radius: 50%; animation: spin 16s linear infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 24px var(--accent); }
.orbit::before { left: 8%; top: 23%; }
.orbit::after { right: 4%; bottom: 30%; background: var(--accent-2); box-shadow: 0 0 24px var(--accent-2); }
.floating-label { position: absolute; z-index: 3; right: 2%; bottom: 18%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--accent); font-size: .73rem; font-weight: 900; transform: rotate(4deg); }

.section { padding: 100px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 34px; margin-bottom: 38px; }
h2 { margin: 10px 0 0; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.055em; }
.section-heading > p { max-width: 450px; margin: 0; color: var(--muted); }

.release-card { display: grid; grid-template-columns: 210px 1fr auto; align-items: center; gap: 30px; padding: 24px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.release-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.release-list { display: grid; gap: 18px; }
.app-cover { overflow: hidden; aspect-ratio: 1; border-radius: 21px; background: #0d1117; }
.app-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-cover--endless { background: #020817; }
.app-cover--tilenza { background: #f1e4cc; }
.app-cover--prism { background: radial-gradient(circle at 50% 35%, #30105e, #08051b 68%); }
.app-cover--prism img { filter: drop-shadow(0 0 18px rgba(35,220,255,.28)); }
.release-copy small { color: var(--accent); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.release-copy h3 { margin: 5px 0 8px; font-size: 1.9rem; letter-spacing: -.04em; }
.release-copy p { max-width: 580px; margin: 0; color: var(--muted); }
.pill { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 13px; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 999px; color: var(--accent); font-size: .75rem; font-weight: 850; white-space: nowrap; }

.catalog-hero { max-width: 920px; padding: 115px 0 45px; text-align: center; }
.catalog-hero h1 { margin-inline: auto; }
.catalog-hero .lead { margin-inline: auto; }
.catalog-hero .button { margin-top: 24px; }
.game-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.game-catalog-card { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.game-catalog-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.game-catalog-cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #030a10; }
.game-catalog-cover img { display: block; width: 100%; height: 100%; padding: 8px; object-fit: contain; transition: transform .35s; }
.game-catalog-card:hover .game-catalog-cover img { transform: scale(1.025); }
.game-catalog-cover span { position: absolute; left: 18px; bottom: 18px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(3,10,16,.82); color: #fff; font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(12px); }
.game-catalog-copy { padding: 28px; }
.game-catalog-copy small { color: var(--accent); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.game-catalog-copy h2 { margin: 8px 0 12px; font-size: 2rem; }
.game-catalog-copy p { min-height: 72px; margin: 0 0 24px; color: var(--muted); }
.game-catalog-grid--single { max-width: 880px; margin: 0 auto; }
.game-catalog-cover--prism { aspect-ratio: 16 / 9; }
.game-catalog-cover--prism img { padding: 0; object-fit: cover; }

.category-grid, .info-grid, .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.category-card, .info-card, .feature-card { position: relative; min-height: 240px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.category-card { transition: transform .2s, border-color .2s; }
.category-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.category-card .number { color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.category-card h3, .info-card h3, .feature-card h3 { margin: 55px 0 8px; font-size: 1.35rem; }
.category-card p, .info-card p, .feature-card p { margin: 0; color: var(--muted); font-size: .92rem; }
.category-card .arrow { position: absolute; right: 26px; top: 22px; color: var(--accent); font-size: 1.5rem; }

.contact-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 34px; padding: 42px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(135deg, var(--surface), var(--surface-2)); }
.contact-panel h2 { margin: 0; }
.contact-panel p { max-width: 600px; margin: 12px 0 0; color: var(--muted); }

.privacy-shell { width: min(820px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0 100px; }
.privacy-back { display: inline-flex; margin-bottom: 34px; color: var(--accent); font-size: .86rem; font-weight: 850; }
.privacy-card { padding: clamp(30px, 7vw, 64px); border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); }
.privacy-card h1 { margin-bottom: 14px; font-size: clamp(2.7rem, 8vw, 4.8rem); }
.privacy-card h2 { margin-top: 38px; font-size: 1.25rem; letter-spacing: -.02em; }
.privacy-card p, .privacy-card li { color: var(--muted); }
.privacy-card ul { padding-left: 22px; }
.privacy-card .date { margin: 0 0 38px; color: var(--muted); }
.privacy-card a:not(.button) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.policy-note { margin-top: 38px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }

.page-hero { padding: 90px 0 60px; text-align: center; }
.page-hero h1 { max-width: 930px; margin-left: auto; margin-right: auto; }
.page-hero .lead { margin-left: auto; margin-right: auto; }
.coming-art { display: block; width: 100%; margin-top: 48px; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.notice { margin: 28px auto 0; padding: 14px 18px; width: fit-content; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .85rem; font-weight: 750; }

.game-stage { position: relative; display: grid; place-items: center; min-height: 470px; }
.game-screenshot { display: block; width: min(340px, 82vw); height: auto; border: 1px solid rgba(255,255,255,.13); border-radius: 34px; box-shadow: var(--shadow), 0 0 90px rgba(197,223,116,.1); transform: rotate(2deg); }
.phone { position: relative; width: min(340px, 82vw); aspect-ratio: .58; padding: 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 45px; background: #030706; box-shadow: var(--shadow), 0 0 90px rgba(197,223,116,.1); transform: rotate(3deg); }
.screen { position: relative; height: 100%; overflow: hidden; padding: 46px 23px 24px; border: 4px solid #78973e; border-radius: 34px; background: linear-gradient(rgba(10,42,19,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(10,42,19,.1) 1px,transparent 1px),#c5df74; background-size: 17px 17px; }
.score { display: flex; justify-content: space-between; color: #173f1b; font-family: ui-monospace, monospace; font-size: .58rem; font-weight: 900; letter-spacing: .05em; }
.score span:nth-child(2) { text-align: center; }
.score span:last-child { text-align: right; }
.score b { display: block; margin-top: 3px; color: #0b2b14; font-size: 1.08rem; letter-spacing: 0; }
.snake { position: absolute; inset: 0; }
.pixel { position: absolute; width: 22px; height: 22px; border-radius: 5px; background: #173f1b; box-shadow: inset 0 0 0 2px rgba(197,223,116,.15); }
.pixel:nth-child(1) { left: 55%; top: 38%; }
.pixel:nth-child(2) { left: 47%; top: 38%; }
.pixel:nth-child(3) { left: 39%; top: 38%; }
.pixel:nth-child(4) { left: 31%; top: 38%; }
.pixel:nth-child(5) { left: 31%; top: 43%; }
.pixel:nth-child(6) { left: 31%; top: 48%; }
.food { position: absolute; right: 22%; top: 55%; width: 17px; height: 17px; border: 3px solid #294f19; background: #c5df74; box-shadow: inset 0 0 0 3px #294f19; animation: pulse 1.4s ease-in-out infinite; }
.swipe { position: absolute; left: 0; right: 0; bottom: 38px; display: grid; grid-template-columns: repeat(3,36px); justify-content: center; gap: 5px; color: #c5df74; }
.swipe i { display: grid; place-items: center; height: 36px; border: 2px solid #78973e; border-radius: 8px; background: #102a16; font-style: normal; font-weight: 900; }
.swipe i:first-child { grid-column: 2; }
.swipe i:nth-child(2) { grid-column: 1; grid-row: 2; }
.swipe i:nth-child(3) { grid-column: 2; grid-row: 2; }
.swipe i:nth-child(4) { grid-column: 3; grid-row: 2; }
.badge { position: absolute; z-index: 3; right: -17px; top: 21%; padding: 11px 14px; border: 1px solid rgba(203,232,117,.2); border-radius: 12px; background: rgba(13,29,22,.94); color: #cbe875; font-size: .72rem; font-weight: 900; transform: rotate(-3deg); }
.game-stage--pixel { min-height: 520px; }
.endless-phone { width: min(360px, 84vw); aspect-ratio: .58; padding: 11px; border: 1px solid rgba(255,255,255,.15); border-radius: 42px; background: #030711; box-shadow: var(--shadow), 0 0 90px rgba(17,217,208,.13); transform: rotate(2deg); }
.endless-app { display: flex; flex-direction: column; gap: 7px; height: 100%; overflow: hidden; padding: 28px 10px 12px; border-radius: 32px; background: #080c18; }
.endless-hud { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 52px; padding: 3px 4px; }
.endless-scores { display: flex; gap: 14px; }
.endless-scores span { color: #98a6c8; font-family: ui-monospace, monospace; font-size: .46rem; }
.endless-scores b { display: block; margin-top: 1px; color: #f5f7ff; font-size: 1rem; }
.endless-tools { display: flex; gap: 4px; }
.endless-tools i { display: grid; place-items: center; width: 21px; height: 21px; color: #98a6c8; font-family: ui-monospace, monospace; font-size: .65rem; font-style: normal; font-weight: 900; }
.endless-playfield { position: relative; flex: 1; overflow: hidden; border: 2px solid #1e3a5f; border-radius: 14px; background: linear-gradient(rgba(30,58,95,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(30,58,95,.18) 1px,transparent 1px),linear-gradient(#163052,#101a33); background-size: 27px 27px,27px 27px,100% 100%; }
.endless-tower { position: absolute; right: 13%; width: 27%; background-color: #38e8b0; background-image: linear-gradient(#0b8f79 2px,transparent 2px),linear-gradient(90deg,#0b8f79 2px,transparent 2px); background-size: 25% 24px; box-shadow: inset 0 0 18px rgba(11,143,121,.35); }
.endless-tower::after { content: ""; position: absolute; left: -5%; width: 110%; height: 12px; background: #38e8b0; border: 2px solid #0b8f79; }
.endless-tower--top { top: 0; height: 34%; }
.endless-tower--top::after { bottom: 0; }
.endless-tower--bottom { bottom: 0; height: 38%; }
.endless-tower--bottom::after { top: 0; }
.endless-runner { position: absolute; left: 33%; top: 47%; width: 27px; height: 27px; background: #fff36b; box-shadow: 0 0 20px rgba(255,243,107,.48); transform: rotate(-12deg); }
.endless-runner::before { content: ""; position: absolute; right: 34px; top: 12px; width: 9px; height: 9px; background: #ff9f43; box-shadow: -15px 5px 0 -1px #ff9f43,-28px 10px 0 -2px #ff9f43,-39px 14px 0 -3px #ff9f43; }
.endless-star { position: absolute; width: 5px; height: 5px; background: rgba(245,247,255,.35); }
.endless-star--one { left: 17%; top: 18%; }
.endless-star--two { left: 61%; top: 57%; background: rgba(124,92,252,.65); }
.endless-star--three { left: 26%; top: 76%; background: rgba(255,159,67,.5); }
.endless-instruction { padding: 2px 0; color: #98a6c8; font-family: ui-monospace, monospace; font-size: .46rem; font-weight: 800; letter-spacing: .02em; text-align: center; }
.badge--pixel { border-color: rgba(0,224,214,.28); background: rgba(2,8,23,.94); color: #38e8d4; }
.tilenza-preview { display: block; width: min(390px, 88vw); max-height: 620px; object-fit: cover; object-position: top; border: 10px solid #24374a; border-radius: 38px; box-shadow: var(--shadow); transform: rotate(2deg); }
.badge--tilenza { border-color: rgba(183,95,69,.25); background: rgba(255,251,243,.95); color: #9b4935; }
.prism-preview { display: block; width: min(560px, 92vw); aspect-ratio: 16 / 10; object-fit: cover; border: 8px solid #22104a; border-radius: 30px; box-shadow: 0 24px 70px rgba(80,30,220,.35); transform: rotate(1deg); }
.badge--prism { border-color: rgba(64,224,255,.35); background: rgba(8,5,27,.94); color: #7deaff; }
body.prism { --bg:#070419; --surface:#10092d; --surface-2:#18103d; --text:#f8f4ff; --muted:#bdb3d9; --accent:#4be7ff; --accent-2:#ef48ff; --line:rgba(113,222,255,.18); background:radial-gradient(circle at 75% 10%,rgba(151,43,255,.18),transparent 34%),var(--bg); }
body.prism .site-header { background:rgba(7,4,25,.88); }
body.prism .button-primary { background:linear-gradient(120deg,#36dff9,#b84cff); color:#08051b; }
body.prism .release-card, body.prism .stat, body.prism .step { box-shadow:0 20px 55px rgba(0,0,0,.3); }
body.kipe { --bg:#140f2e; --surface:#1e1745; --surface-2:#2a2060; --text:#fff8ee; --muted:#c3b8e2; --accent:#ff9a3c; --accent-2:#5bc0ff; --line:rgba(255,154,60,.2); background:radial-gradient(circle at 80% 8%,rgba(91,192,255,.16),transparent 36%),var(--bg); }
body.kipe .site-header { background:rgba(20,15,46,.88); }
body.kipe .button-primary { background:linear-gradient(120deg,#ffb347,#ff6b3d); color:#1a1030; }
.app-cover--kipe { background:#3a2e6a; }
.game-catalog-cover--kipe { aspect-ratio: 16 / 9; }
.game-catalog-cover--kipe img { padding: 0; object-fit: cover; }
.kipe-preview { display: block; width: min(560px, 92vw); aspect-ratio: 1284 / 900; object-fit: cover; border: 8px solid #3a2e6a; border-radius: 30px; box-shadow: 0 24px 70px rgba(255,140,50,.22); image-rendering: pixelated; transform: rotate(1deg); }
.badge--kipe { border-color: rgba(255,154,60,.35); background: rgba(20,15,46,.94); color: #ffb35c; }
.kipe-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kipe-gallery figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.kipe-gallery img { display: block; width: 100%; aspect-ratio: 1284 / 900; object-fit: cover; image-rendering: pixelated; }
.kipe-gallery figcaption { padding: 14px 18px; color: var(--muted); font-size: .85rem; font-weight: 750; }
@media (max-width: 860px) { .kipe-gallery { grid-template-columns: 1fr; } }
.snake-phone { position: relative; width: min(340px, 82vw); aspect-ratio: .58; padding: 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 45px; background: #050b07; box-shadow: var(--shadow), 0 0 90px rgba(197,223,116,.1); transform: rotate(3deg); }
.snake-app { display: flex; flex-direction: column; gap: 8px; height: 100%; overflow: hidden; padding: 32px 10px 12px; border-radius: 34px; background: linear-gradient(rgba(7,20,11,.66),rgba(7,20,11,.66)),url("lcd_texture.webp") center/cover,#07140b; }
.lcd-hud { flex: 0 0 auto; display: flex; justify-content: space-between; padding: 7px 10px; border: 2px solid #78973e; border-radius: 8px; background: #c5df74; color: #0b2b14; font-family: ui-monospace, monospace; font-size: .58rem; font-weight: 900; letter-spacing: .04em; }
.lcd-hud b { display: block; margin-top: 2px; font-size: 1.05rem; }
.game-grid { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border: 4px solid #78973e; border-radius: 10px; background: linear-gradient(rgba(120,151,62,.38) 1px,transparent 1px),linear-gradient(90deg,rgba(120,151,62,.38) 1px,transparent 1px),#c5df74; background-size: calc(100% / 18) calc(100% / 24); }
.snake-pixel { position: absolute; width: calc(100% / 18 - 2px); aspect-ratio: 1; border-radius: 2px; background: #173f1b; }
.snake-pixel:nth-child(1) { left: 59%; top: 34%; background: #0b2b14; }
.snake-pixel:nth-child(2) { left: 51%; top: 34%; }
.snake-pixel:nth-child(3) { left: 43%; top: 34%; }
.snake-pixel:nth-child(4) { left: 35%; top: 34%; }
.snake-pixel:nth-child(5) { left: 35%; top: 40%; }
.snake-pixel:nth-child(6) { left: 35%; top: 46%; }
.lcd-food { position: absolute; right: 22%; bottom: 28%; width: calc(100% / 18 - 4px); aspect-ratio: 1; border: 2px solid #c5df74; background: #294f19; box-shadow: inset 0 0 0 3px #294f19, inset 0 0 0 5px #c5df74; animation: pulse 1.4s ease-in-out infinite; }
.game-controls-preview { flex: 0 0 122px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 9px; padding: 7px; border: 2px solid #78973e; border-radius: 14px; background: #102a16; }
.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.action-grid i { display: grid; place-items: center; height: 45px; border: 2px solid #cbe875; border-radius: 10px; background: #9fbd55; color: #0a2a13; font-family: ui-monospace, monospace; font-size: .52rem; font-style: normal; font-weight: 900; }
.phone-dpad { display: grid; grid-template-columns: repeat(3, 38px); justify-content: center; gap: 4px; color: #c5df74; }
.phone-dpad i { display: grid; place-items: center; height: 38px; border: 2px solid #cbe875; border-radius: 10px; background: #9fbd55; color: #0a2a13; font-style: normal; font-weight: 900; }
.phone-dpad i:first-child { grid-column: 2; }
.phone-dpad i:nth-child(2) { grid-column: 1; grid-row: 2; }
.phone-dpad i:nth-child(3) { grid-column: 2; grid-row: 2; }
.phone-dpad i:nth-child(4) { grid-column: 3; grid-row: 2; }
.quick-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
.stat { min-height: 112px; padding: 22px; background: var(--surface); }
.stat strong { display: block; color: var(--accent); font-size: 1.55rem; letter-spacing: -.04em; }
.stat span { color: var(--muted); font-size: .78rem; font-weight: 750; }
.steps { counter-reset: play-step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { counter-increment: play-step; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.step::before { content: "0" counter(play-step); display: block; margin-bottom: 40px; color: var(--accent); font-family: ui-monospace, monospace; font-weight: 900; }
.step h3 { margin: 0 0 8px; font-size: 1.25rem; }
.step p { margin: 0; color: var(--muted); font-size: .92rem; }

.site-footer { margin-top: 30px; border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 110px; color: var(--muted); font-size: .86rem; }
.footer-links { display: flex; gap: 20px; }
.footer-links a:hover { color: var(--text); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.22); } }

@media (max-width: 860px) {
    .topbar { flex-wrap: wrap; padding: 12px 0; }
    .nav { width: 100%; padding: 12px 0 2px; overflow-x: auto; border-top: 1px solid var(--line); scrollbar-width: none; }
    .nav::-webkit-scrollbar { display: none; }
    .hero { grid-template-columns: 1fr; gap: 45px; min-height: auto; }
    .launch-visual { min-height: 390px; }
    .category-grid, .info-grid, .feature-grid { grid-template-columns: 1fr; }
    .game-catalog-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .quick-stats { grid-template-columns: repeat(2, 1fr); }
    .release-card { grid-template-columns: 120px 1fr; }
    .release-card .pill { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 560px) {
    .container { width: min(100% - 28px, 1140px); }
    .brand-copy small { display: none; }
    .hero { padding-top: 55px; }
    .catalog-hero { padding-top: 70px; }
    h1 { font-size: 3.65rem; }
    .section { padding: 75px 0; }
    .section-heading { align-items: start; flex-direction: column; }
    .release-card { grid-template-columns: 1fr; }
    .app-cover { max-width: 145px; }
    .contact-panel { grid-template-columns: 1fr; padding: 30px; }
    .privacy-shell { width: min(100% - 28px, 820px); padding-top: 40px; }
    .quick-stats { grid-template-columns: 1fr; }
    .footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding: 30px 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}