:root{color-scheme:dark;--bg:#091218;--panel:#0e1a20;--line:#ffffff1f;--ivory:#f4ecde;--gold:#edca89;--gold2:#e9bd71;--muted:#aab1b4;--green:#0c1d17;--violet:#141228}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--ivory);font:16px/1.55 Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a:hover,button:hover{color:var(--gold)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.wrap{width:calc(100% - 64px);max-width:1180px;margin-inline:auto}
.skip{position:fixed;top:-80px;left:16px;z-index:30;background:var(--gold);color:#111;padding:8px 12px}.skip:focus{top:8px}

/* header */
.top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding-block:18px}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:Georgia,'Times New Roman',serif;letter-spacing:.14em;font-size:15px;line-height:1.05}
.mono{font-size:42px;line-height:.8;color:var(--gold);font-weight:700;letter-spacing:-.05em}
.top nav{display:flex;align-items:center;gap:22px;font-size:15px;background:#091218c4;border:1px solid #ffffff1a;border-radius:30px;padding:7px 10px 7px 20px;backdrop-filter:blur(8px)}
.top nav>a,.top nav>button{text-shadow:0 1px 6px #000c}
.lang{display:flex;gap:2px;padding-left:12px;border-left:1px solid var(--line)}
.lang button{padding:4px 6px;color:#9aa1a5;font-size:13px;letter-spacing:.08em}
.lang button[aria-pressed=true]{color:var(--gold)}

/* hero */
.hero{position:relative;margin-top:-82px;padding-top:122px;overflow:hidden}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#091218f0 0%,#091218a8 38%,#09121820 72%),linear-gradient(0deg,var(--bg) 0%,transparent 35%)}
.hero-in{position:relative;padding-bottom:64px}
.eyebrow{margin:0 0 12px;color:var(--gold);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;margin:0}
h1{font-size:clamp(34px,4.2vw,56px);line-height:1.07;letter-spacing:-.02em;max-width:640px}
.sub{font-family:Georgia,serif;font-size:clamp(18px,1.8vw,22px);color:#e5e1dc;margin:14px 0 22px;max-width:520px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{border:1px solid #edca8966;background:#0912188c;border-radius:30px;padding:5px 13px;font-size:13px}

/* sections */
.block{margin-top:44px}
.head{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}
.head h2,.panel h2{font-size:clamp(26px,2.6vw,34px);color:var(--gold)}

/* game cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{display:flex;flex-direction:column;border:1px solid #2d3d38;border-radius:14px;overflow:hidden;background:var(--panel);transition:border-color .2s,transform .2s}
.card:hover{border-color:#edca8980}
.pic{display:block;aspect-ratio:16/10;overflow:hidden;background:#000}
.pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.card:hover .pic img{transform:scale(1.03)}
.durak .pic img{object-position:65% 55%}
.cosmic .pic img{object-position:70% 50%}
.body{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;flex:1}
.durak{background:linear-gradient(180deg,var(--panel),var(--green))}
.cosmic{background:linear-gradient(180deg,var(--panel),var(--violet));border-color:#3a3460}
.tag{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.tag:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.tag.live{color:#8fd6a3}.tag.test{color:var(--gold)}.tag.dev{color:#c9b6ff}
h3{font-size:26px;line-height:1.15;color:var(--ivory)}
h3 a:hover{color:var(--gold)}
.desc{margin:0;color:#d5d6d3;font-size:15px}
.feat{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.feat li{font-size:12px;border:1px solid #ffffff2a;border-radius:20px;padding:3px 10px;color:#cfd3d2}
.stores{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.store{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(125deg,#f6dba0,var(--gold2));color:#1b180f;border-radius:9px;padding:9px 14px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s}
.store:hover{color:#1b180f;transform:translateY(-1px);box-shadow:0 6px 24px #c9973340}
.store svg{width:18px;height:18px;fill:currentColor}
.store.soon{background:none;border:1px solid #ffffff33;color:#aab1b4;font-weight:400}
.store.soon svg{fill:#aab1b4}
.more{color:var(--gold);font-size:14px;text-decoration:underline;text-underline-offset:4px}
.note{margin:auto 0 0;padding-top:4px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.cosmic .note{color:#c9b6ff}

/* online + web */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{border:1px solid #2d3d38;border-radius:14px;padding:24px 26px;background:linear-gradient(135deg,#0f2019,#0b161b)}
.panel h2{margin-bottom:10px}
.panel p:not(.eyebrow){margin:0;color:#d5d6d3}
.panel.web{background:linear-gradient(135deg,#17142c,#0b161b);border-color:#3a3460}
.panel.web .eyebrow{color:#c9b6ff}.panel.web h2{color:#e3d6ff}

/* footer */
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:48px;padding-block:24px 30px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.brand.small{font-size:13px;color:var(--ivory)}.brand.small .mono{font-size:30px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.copy{font-size:12px}

/* dialogs */
dialog{border:1px solid #8f7956;background:#101b21;color:var(--ivory);padding:32px;border-radius:14px;width:min(540px,calc(100% - 32px))}
dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}
dialog h2{font-size:28px;color:var(--gold);margin-bottom:6px}
dialog p:not(.eyebrow){color:#d3d6d5;line-height:1.6}
.close{position:absolute;top:8px;right:14px;font-size:30px;line-height:1}
.link{color:var(--gold);text-decoration:underline;text-underline-offset:4px}

/* responsive */
@media(max-width:1000px){.grid{grid-template-columns:1fr 1fr}.durak{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr}.durak .pic{aspect-ratio:auto;height:100%}}
@media(max-width:700px){
 .wrap{width:calc(100% - 32px)}
 .top{padding-block:14px}.top nav{gap:14px;padding:4px 6px}.top nav>a,.top nav>button{display:none}.lang{border:0;padding:0}
 .mono{font-size:36px}.brand{font-size:13px}
 .hero{margin-top:-70px;padding-top:96px}.hero-art{object-position:70% center}
 .hero-shade{background:linear-gradient(180deg,#091218b3 0%,#09121866 45%,var(--bg) 100%)}
 .hero-in{padding-bottom:36px}
 .block{margin-top:32px}
 .grid,.split{grid-template-columns:1fr}
 .durak{display:flex}.durak .pic{aspect-ratio:16/10}
 h3{font-size:24px}
 .body{padding:16px 16px 18px}
 .panel{padding:20px}
 .foot{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}