:root{
  --bg:#170D10; --bg2:#1F1115; --card:#2A1519; --line:#5A323A; --line2:#4A2A30;
  --text:#F6EBDD; --muted:#D8C7B8; --dim:#BBA595;
  --gold:#F2A800; --red:#D90012; --blue:#2E4FBF;
  --sans:'Noto Sans Armenian','Noto Sans',system-ui,sans-serif;
  --serif:'Noto Serif','Noto Serif Armenian',serif;
  --serif-hy:'Noto Serif Armenian','Noto Serif',serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.5}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--gold)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);margin:0}
.band{display:block}
.tricolor{display:flex;height:4px}.tricolor i{flex:1}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* header */
.topbar{max-width:1200px;margin:0 auto;padding:24px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:48px;height:48px;border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif-hy);font-weight:700;font-size:26px;color:var(--gold)}
.brand-name{font-family:var(--serif-hy);font-weight:700;font-size:26px}
.nav{display:flex;flex-wrap:wrap;gap:28px;font-weight:500}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.langs{display:flex;border:2px solid var(--line);border-radius:8px;overflow:hidden}
.langs a{min-height:44px;min-width:52px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.langs a.on{background:var(--gold);color:#1A0F12}

/* buttons */
.btn{min-height:44px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--text);border-radius:8px;background:transparent;color:var(--text);font:600 16px var(--sans);cursor:pointer}
.btn:hover{color:var(--text);border-color:var(--gold)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#1A0F12}
.btn-gold:hover{color:#1A0F12;filter:brightness(1.08)}
.btn-ghost{border-color:#6B3D45}
.btn-lg{min-height:56px;padding:0 32px;font-size:18px;border-radius:10px}
.btn-disabled{border-color:var(--line2);color:var(--dim);cursor:default}

/* hero */
.hero{max-width:1200px;margin:0 auto;padding:48px 32px 72px;display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.hero-text{flex:1 1 480px;min-width:0}
.hero-art{flex:1 1 360px;min-width:0;display:flex;justify-content:center}
.hero-art svg{width:100%;max-width:420px}
.kicker{font-family:var(--serif-hy);font-size:22px;font-weight:600;color:var(--gold);margin-bottom:16px}
.kicker.center{text-align:center;font-size:20px;margin-bottom:4px}
.hero h1{font-size:54px;line-height:1.15;margin-bottom:20px}
.hero p{font-size:19px;line-height:1.6;color:var(--muted);max-width:540px;margin:0 0 32px}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.perks{margin-top:28px;display:flex;flex-wrap:wrap;gap:22px;font-size:15px;color:var(--muted)}

/* sections */
.band-section{background:var(--bg2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:72px 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:36px}
.sec-head h1,.sec-head h2,.why h2{font-size:40px}
.arm{font-family:var(--serif-hy);font-size:22px;color:var(--gold)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px}
.card p{margin:0;font-size:15px;line-height:1.55;color:var(--muted);flex:1}
.card h3{font-size:26px}
.card-top{display:flex;align-items:center;justify-content:space-between}
.letter{width:64px;height:64px;border:2px solid var(--gold);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--serif-hy);font-weight:700;font-size:34px;color:var(--gold)}
.pill{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--gold);color:#1A0F12}
.pill-dim{background:transparent;border:1px solid var(--line);color:var(--dim)}
.why{padding-top:72px;padding-bottom:72px}
.why h2{margin-bottom:36px}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
.why-grid>div{border-top:4px solid;padding-top:18px}
.why-grid h3{font-family:var(--sans);font-size:22px;margin-bottom:8px}
.why-grid p{margin:0;color:var(--muted);line-height:1.6}
.join{padding-bottom:80px}
.join-box{background:var(--card);border:2px solid var(--gold);border-radius:18px;padding:48px 32px;text-align:center}
.join-box h2{font-size:36px;margin-bottom:20px}
.footer{border-top:1px solid var(--line2);padding:28px 32px;text-align:center;font-size:14px;color:var(--dim)}

/* auth */
.auth-page{padding:24px 20px 64px;display:flex;justify-content:center}
.auth-box{width:100%;max-width:440px;background:var(--card);border:2px solid var(--gold);border-radius:16px;padding:32px}
.auth-title{text-align:center;font-size:26px;margin-bottom:20px}
.tabs{display:flex;border:2px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:22px}
.tabs a{flex:1;min-height:46px;display:flex;align-items:center;justify-content:center;font-weight:600}
.tabs a.on{background:var(--gold);color:#1A0F12}
.alert{background:#4A1018;border:1px solid var(--red);border-radius:8px;padding:12px 14px;margin-bottom:18px;font-size:15px}
.social{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.tg-wrap{display:flex;justify-content:center;min-height:40px}
.social-btn{border:none;color:#fff}
.social-google{background:#F6EBDD;color:#1A0F12}
.social-google:hover{color:#1A0F12}
.social-facebook{background:#1877F2}
.social-facebook:hover{color:#fff}
.social-vk{background:#0077FF}
.social-vk:hover{color:#fff}
.divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--dim);font-size:14px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.form{display:flex;flex-direction:column;gap:6px}
.form label{font-size:14px;font-weight:500;margin-top:8px}
.form input{min-height:48px;padding:0 14px;background:var(--bg);color:var(--text);border:2px solid var(--line);border-radius:8px;font:16px var(--sans);width:100%}
.form input::placeholder{color:#9C8577}
.form .btn{margin-top:18px}
.fine{margin:16px 0 0;text-align:center;font-size:13px;color:var(--dim)}
.alt{margin:18px 0 0;text-align:center;font-size:15px;color:var(--muted)}
.alt a{color:var(--gold);font-weight:600}

/* games */
.games-page,.play-page{padding-top:16px;padding-bottom:72px}
.back{display:inline-block;margin-bottom:16px;color:var(--muted)}
.play-page h1{font-size:38px;margin-bottom:24px}
.msg{min-height:28px;font-size:18px;font-weight:600;color:var(--gold);margin:16px 0 0}
.bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:18px;color:var(--muted)}
.mem-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:440px}
.mem-card{aspect-ratio:1;border-radius:12px;border:2px solid var(--line);background:var(--card);color:transparent;font:700 40px var(--serif-hy);cursor:pointer}
.mem-card.open,.mem-card.done{color:var(--gold);border-color:var(--gold)}
.mem-card.done{background:#3A2218}
.ttt-grid{display:grid;grid-template-columns:repeat(3,96px);gap:10px}
.ttt-cell{width:96px;height:96px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--text);font:700 48px var(--serif);cursor:pointer}
.ttt-cell.o{color:var(--gold)}
.sd-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));max-width:468px;border:3px solid var(--gold)}
.sd-cell{width:100%;aspect-ratio:1;border:1px solid var(--line);background:var(--card);color:var(--text);text-align:center;font:600 22px var(--sans);padding:0;border-radius:0}
.sd-cell:nth-child(3n){border-right:3px solid var(--gold)}
.sd-cell:nth-child(9n){border-right:1px solid var(--line)}
.sd-cell.rb{border-bottom:3px solid var(--gold)}
.sd-cell.given{background:#3A2218;color:var(--gold)}
.sd-cell.bad{background:#5A1620}
.sd-cell:disabled{opacity:1}

/* lobby */
.lobby{max-width:560px;padding:8px 0}
.lobby-title{font-family:var(--serif);font-size:24px;margin:0 0 18px}
.lobby .dim,.dim{color:var(--dim);font-size:15px;margin:14px 0 0}
.stage{margin-top:8px}
.bar .strong{color:var(--text);font-weight:600}

/* chess */
.chess{max-width:560px}
.chess-board{display:grid;grid-template-columns:repeat(8,1fr);width:100%;max-width:560px;aspect-ratio:1;border:3px solid var(--gold);border-radius:6px;overflow:hidden}
.sq{position:relative;border:0;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--sans)}
.sq.lt{background:#E8D3B0}.sq.dk{background:#A9703E}
.sq.last.lt{background:#EBD97A}.sq.last.dk{background:#C9A53A}
.sq.sel{box-shadow:inset 0 0 0 4px var(--gold)}
.sq.chk{background:radial-gradient(circle,#FF4B4B 20%,#C4001A 90%)}
.sq.tgt::after{content:"";width:28%;height:28%;border-radius:50%;background:rgba(23,13,16,.45)}
.sq.cap{box-shadow:inset 0 0 0 4px rgba(217,0,18,.8)}
.pc{font-size:min(8.2vw,52px);line-height:1;user-select:none}
.pc.wp{color:#FFF8EA;text-shadow:0 0 2px #170D10,0 0 2px #170D10,0 1px 3px #170D10}
.pc.bp{color:#1A0F12;text-shadow:0 0 1px #FFF8EA}
.sq i{position:absolute;font-style:normal;font-size:11px;font-weight:700;opacity:.75;color:#3A2218}
.sq .rk{left:3px;top:2px}.sq .fl{right:3px;bottom:1px}
.chess-promo{display:flex;gap:10px;align-items:center;margin-top:10px;min-height:0}
.promo-btn{font-size:30px;min-width:56px}
.promo-btn.wp{color:#FFF8EA}.promo-btn.bp{color:#1A0F12;background:#E8D3B0}
.chess-status{margin-bottom:12px}

/* blot */
.blot{max-width:760px}
.blot-info{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:14px;font-size:15px;color:var(--muted)}
.blot-info .strong{color:var(--text);font-weight:600}
.blot-info .dim{color:var(--dim)}
.sy{font-size:20px;color:var(--text)}
.sy.red,.red .s,.red .r{color:#FF6B6B}
.blot-table{display:grid;grid-template-columns:90px 1fr 90px;grid-template-areas:". top ." "left center right" "bottom bottom bottom";gap:12px;align-items:center;background:#1B2A1F;border:2px solid var(--line);border-radius:18px;padding:16px}
.seat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border-radius:12px;border:2px solid transparent;min-width:0}
.seat.active{border-color:var(--gold)}
.seat-2{grid-area:top}.seat-1{grid-area:left}.seat-3{grid-area:right}.seat-0{grid-area:bottom;align-items:stretch}
.seat .name{font-size:13px;font-weight:600;color:var(--muted)}
.backs{display:flex;flex-wrap:wrap;justify-content:center}
.side .backs{flex-direction:column;align-items:center;padding:16px 0 14px}
.cback{display:block;width:26px;height:36px;margin:0 -8px;border-radius:4px;border:1px solid var(--gold);background:repeating-linear-gradient(45deg,#7A1520,#7A1520 4px,#4A0D14 4px,#4A0D14 8px)}
.side .cback{margin:-14px 0;width:34px;height:24px}
.blot-center{grid-area:center;position:relative;min-height:230px}
.slot{position:absolute}
.slot-0{left:50%;bottom:0;transform:translateX(-50%)}
.slot-2{left:50%;top:0;transform:translateX(-50%)}
.slot-1{left:6%;top:50%;transform:translateY(-50%)}
.slot-3{right:6%;top:50%;transform:translateY(-50%)}
.pcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:60px;height:86px;border-radius:8px;background:#F6EBDD;border:1px solid #BBA595;font-family:var(--sans);font-weight:700;padding:0}
.pcard .r{font-size:22px;line-height:1}.pcard .s{font-size:26px;line-height:1}
.pcard.blk .r,.pcard.blk .s{color:#1A0F12}
.pcard.red .r,.pcard.red .s{color:#C4001A}
.hand{display:flex;justify-content:center;gap:6px}
.hand .pcard{flex:1 1 0;max-width:68px;width:auto;aspect-ratio:2/3.1;height:auto;cursor:pointer}
.hand .pcard:not(:disabled):hover{transform:translateY(-8px);border-color:var(--gold)}
.hand .pcard.dim{opacity:.4;cursor:default}
.hand .pcard:disabled{cursor:default}
.blot-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.suit-btn{min-width:60px;font-size:26px}
.suit-btn.red{color:#FF6B6B}
.round-res{margin:0;flex-basis:100%;font-weight:600}

@media (max-width:560px){
  .blot-table{grid-template-columns:62px 1fr 62px;padding:10px;gap:8px}
  .pcard{width:44px;height:64px}.pcard .r{font-size:16px}.pcard .s{font-size:19px}
  .hand{gap:3px}
  .cback{width:20px;height:28px;margin:0 -7px}
  .blot-center{min-height:190px}
}
@media (max-width:560px){
  .hero h1{font-size:38px}
  .topbar,.wrap,.hero{padding-left:16px;padding-right:16px}
  .ttt-grid{grid-template-columns:repeat(3,80px)}
  .ttt-cell{width:80px;height:80px}
  .sd-cell{font-size:17px}
}

/* ---------- нарды ---------- */
.nardi{max-width:760px}
.nardi-svg{display:block;width:100%;height:auto;max-width:760px}
.nardi .hit{cursor:pointer;outline:none}
.nardi .hit:focus-visible{stroke:var(--gold);stroke-width:3}
.dice-box{display:flex;align-items:center;gap:8px;margin:8px 0 12px;min-height:40px}
.dice-box .dim{color:var(--dim)}
.die{width:38px;height:38px;border-radius:9px;background:#F6EBDD;color:#1A0F12;display:flex;align-items:center;justify-content:center;font:700 22px var(--sans)}

/* ---------- дурак ---------- */
.durak{max-width:760px}
.d-opp{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px;color:var(--muted)}
.d-opp .dim,.d-deck .dim,.loto .dim,.lobby .dim{color:var(--dim)}
.d-mid{display:flex;gap:28px;align-items:flex-start;min-height:150px;margin:10px 0 14px;padding:16px;background:#1B2A1F;border:2px solid var(--line);border-radius:16px}
.d-deck{display:flex;flex-direction:column;gap:8px;min-width:76px;font-size:14px}
.d-deck .sy{font-size:22px}
.deck-trump{margin-left:8px}
.d-table{display:flex;flex-wrap:wrap;gap:16px;flex:1;align-content:flex-start;min-height:110px}
.d-pair{position:relative;width:86px;height:112px}
.d-pair .pcard.over{position:absolute;left:24px;top:22px;box-shadow:-3px 3px 8px rgba(0,0,0,.45)}
.pcard.trump{box-shadow:0 0 0 2px var(--gold)}
.d-hand{flex-wrap:wrap;justify-content:center}
.d-hand .pcard{flex:0 0 68px;max-width:none;height:98px;aspect-ratio:auto}

/* ---------- лото ---------- */
.loto{max-width:640px}
.loto-head{display:flex;align-items:center;gap:20px;margin-bottom:12px}
.loto-big{flex:0 0 auto;width:96px;height:96px;border-radius:50%;background:var(--gold);color:#1A0F12;font:700 44px var(--serif);display:flex;align-items:center;justify-content:center;border:4px solid #7A1520}
.loto-meta{color:var(--muted);font-size:15px}
.loto-hist{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;min-height:30px}
.chip{padding:4px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:14px}
.loto-box{margin:16px 0}
.loto-card{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));margin-top:8px;border:2px solid var(--gold);background:var(--card);border-radius:10px;overflow:hidden}
.lc{aspect-ratio:1/1.05;border:1px solid var(--line);background:#F6EBDD;color:#1A0F12;font:700 20px var(--sans);display:flex;align-items:center;justify-content:center;padding:0;border-radius:0}
button.lc{cursor:pointer}
button.lc:hover{background:#FFE9B8}
.lc.empty{background:var(--card)}
.lc.on{background:#C4001A;color:#fff}
.loto-box.small{max-width:430px;opacity:.9}
.loto-box.small .lc{font-size:12px}

/* ---------- общие сообщения ---------- */
.banner{margin-top:14px;font-weight:600;color:var(--gold)}
.banner:empty{display:none}

@media (max-width:560px){
  .d-mid{gap:12px;padding:10px}
  .d-pair{width:66px;height:92px}
  .d-pair .pcard.over{left:16px;top:18px}
  .d-hand .pcard{flex:0 0 46px;height:68px}
  .loto-big{width:76px;height:76px;font-size:34px}
  .lc{font-size:14px}
  .loto-box.small .lc{font-size:10px}
}

/* ---- столы и комната ожидания ---- */
.lobby{max-width:640px}
.lobby-sub{font-family:var(--serif);font-size:20px;margin:30px 0 10px}
.tables{display:flex;flex-direction:column;gap:8px}
.trow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line,rgba(255,255,255,.14));border-radius:12px;background:rgba(255,255,255,.04)}
.tinfo{min-width:0}
.tinfo b{color:var(--text)}
.tact{display:flex;flex-wrap:wrap;gap:8px}
.tact .btn{padding:8px 14px;font-size:15px}
.wseats{display:grid;gap:8px;margin:0 0 6px}
.wseat{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;border:1px dashed var(--line,rgba(255,255,255,.2));color:var(--dim)}
.wseat.taken{border-style:solid;color:var(--text);background:rgba(255,255,255,.06)}
.wpos{color:var(--dim);font-size:14px}
.wname{font-weight:600}

/* ---- SEO-блоки: новости, страницы игр ---- */
.newsbar{margin-top:56px;padding:40px 0 8px;border-top:1px solid rgba(255,255,255,.12)}
.newsbar .sec-head{margin-bottom:20px}
.newsbar .sec-head h2{font-size:30px}
.more{color:var(--gold);text-decoration:none;font-weight:600}
.more:hover{text-decoration:underline}
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.news-card{padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.04)}
.news-card time,.post time{color:var(--dim);font-size:14px}
.news-card h2,.news-card h3{font-size:20px;line-height:1.3;margin:6px 0 8px}
.news-card a{color:var(--text);text-decoration:none}
.news-card h2 a:hover,.news-card h3 a:hover{color:var(--gold)}
.news-card p{color:var(--muted);margin:0 0 10px;font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:26px 0 0;padding-bottom:8px}
.foot-links a{color:var(--muted);text-decoration:none;font-size:15px}
.foot-links a:hover{color:var(--gold)}
.foot-links.big a{padding:8px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:var(--text)}
.seo-text{max-width:820px;margin:0 auto;padding:30px 20px}
.seo-text h2{font-size:28px;margin-bottom:12px}
.seo-text p,.lead,.post p{color:var(--muted);font-size:17px;line-height:1.7}
.game-landing,.news-page{max-width:860px;margin:0 auto;padding-bottom:20px}
.game-landing h2,.news-page h2.sub{font-size:26px;margin:34px 0 12px}
.crumbs{color:var(--dim);font-size:14px;margin:6px 0 14px}
.crumbs a{color:var(--muted)}
.rules{padding-left:22px;color:var(--text);line-height:1.7;font-size:17px}
.rules li{margin-bottom:6px}
.faq details{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 16px;margin-bottom:8px;background:rgba(255,255,255,.03)}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--muted);margin:10px 0 0}
.post h1{font-size:36px;line-height:1.2;margin:0 0 6px}
.card-link{color:inherit;text-decoration:none}
.card-link:hover{color:var(--gold)}
.game-landing .cta,.post .cta{margin:22px 0}