@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #071010;
  --panel: #0c1717;
  --panel-deep: #091111;
  --ink: #eff7ed;
  --muted: #92a19b;
  --acid: #d6ff4d;
  --line: rgba(216, 238, 215, .12);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 78% 0%, rgba(59, 102, 83, .18), transparent 32rem), var(--bg); font-family: Manrope, Arial, sans-serif; }
.page-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; min-height: 100vh; padding: 28px 0 38px; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); text-decoration: none; font: 600 17px/1 "Space Grotesk", sans-serif; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 10px; }
.brand strong { color: var(--acid); font-weight: 600; }
.brand-mark { display: grid; place-items: center; width: 30px; aspect-ratio: 1; border: 1px solid rgba(214,255,77,.75); border-radius: 8px; color: var(--acid); font-size: 16px; }
.header-note { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.intro { padding: 74px 0 40px; max-width: 650px; }
.eyebrow { color: var(--acid); font: 700 12px/1 "Space Grotesk", sans-serif; letter-spacing: .16em; margin: 0 0 14px; }
.eyebrow span { color: var(--muted); margin-left: 10px; letter-spacing: .08em; }
h1 { margin: 0; font: 700 clamp(38px, 6vw, 68px)/.98 "Space Grotesk", sans-serif; letter-spacing: -.065em; }
.lead { color: var(--muted); font-size: 16px; line-height: 1.65; margin: 21px 0 0; }
.catalog { border-top: 1px solid var(--line); padding-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.game-card { grid-column: span 1; display: flex; flex-direction: column; min-height: 380px; overflow: hidden; color: inherit; text-decoration: none; background: var(--panel); border: 1px solid rgba(216, 238, 215, .16); border-radius: 18px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.game-card:hover, .game-card:focus-visible { transform: translateY(-5px); border-color: rgba(214,255,77,.65); box-shadow: 0 18px 40px rgba(0,0,0,.27); outline: none; }
.game-preview { height: 218px; position: relative; overflow: hidden; background: #071212; isolation: isolate; }
.tanki-preview { background: linear-gradient(135deg, #0f2f37 0%, #0a1c22 48%, #070c10 100%); }
.scanline { position: absolute; inset: 0; opacity: .24; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(225,255,221,.07) 12px 13px); }
.sun { position: absolute; top: 27px; right: 42px; width: 64px; aspect-ratio: 1; border-radius: 50%; background: #d7ff51; box-shadow: 0 0 50px rgba(215,255,81,.26); }
.terrain { position: absolute; left: -9%; width: 118%; transform: skewY(-8deg); }
.terrain-back { height: 87px; bottom: 38px; background: linear-gradient(100deg, #24513d, #3f7346); opacity: .8; }
.terrain-front { height: 60px; bottom: -12px; background: linear-gradient(90deg, #173c32, #285b3c); }
.tank { position: absolute; width: 132px; height: 84px; left: 50%; top: 81px; transform: translateX(-50%); filter: drop-shadow(0 14px 10px rgba(0,0,0,.35)); }
.tank-body { position: absolute; left: 14px; bottom: 18px; width: 98px; height: 37px; background: linear-gradient(160deg, #cddf83, #6d8b45 58%, #456035); clip-path: polygon(9% 9%, 83% 0, 100% 34%, 87% 100%, 11% 95%, 0 45%); }
.tank-turret { position: absolute; z-index: 1; left: 42px; bottom: 47px; width: 42px; height: 30px; border-radius: 13px 18px 6px 7px; background: linear-gradient(135deg, #c6d784, #658a44); }
.tank-cannon { position: absolute; z-index: 1; left: 75px; bottom: 62px; width: 64px; height: 8px; background: #91ad59; transform: rotate(-7deg); transform-origin: left; }
.tank-track { position: absolute; left: 7px; bottom: 7px; width: 109px; height: 22px; border-radius: 50%; background: repeating-linear-gradient(90deg, #101d18 0 7px, #26352a 7px 10px); border: 4px solid #111c17; }
.preview-label { position: absolute; z-index: 2; top: 21px; left: 22px; color: rgba(238,247,237,.75); font: 700 11px/1 "Space Grotesk", sans-serif; letter-spacing: .16em; }
.preview-stage { position: absolute; z-index: 2; top: 36px; left: 22px; color: var(--acid); font: 800 32px/1 "Space Grotesk", sans-serif; letter-spacing: -.08em; }
.play-arrow { position: absolute; z-index: 2; bottom: 17px; right: 18px; display: grid; place-items: center; width: 42px; aspect-ratio: 1; color: #0b160b; background: var(--acid); border-radius: 50%; font-size: 23px; transition: transform .2s ease; }
.game-card:hover .play-arrow { transform: rotate(12deg) scale(1.06); }
.card-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 20px 21px 18px; }
.status { color: var(--acid); margin: 0 0 8px; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h2 { margin: 0; font: 700 25px/1.08 "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.card-copy { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 11px 0 0; }
.open-game { display: flex; align-items: center; justify-content: space-between; color: #dce7dc; font-size: 12px; font-weight: 700; padding-top: 14px; border-top: 1px dashed rgba(216,238,215,.2); }
.open-game span { font-size: 18px; color: var(--acid); }
footer { color: #6c7c75; padding-top: 34px; font-size: 12px; }
@media (min-width: 900px) { .game-card { grid-column: span 1; } }
@media (max-width: 640px) { .page-shell { width: min(100% - 32px, 1180px); padding-top: 18px; } .site-header { padding-bottom: 20px; } .header-note { display: none; } .intro { padding: 52px 0 31px; } .catalog { grid-template-columns: 1fr; } .game-card { min-height: 370px; } }