/* =========================================================================
 * PUBLIC-01 — PokerHouse public home · direction «Клуб» (A)
 * Tokens are the ACCEPTED design-01 tokens.css [data-direction="a"].
 * Single-direction, dark "club" identity only. Fonts are self-hosted
 * (assets/fonts.css) — no runtime CDN. Ships PREP state only.
 * ========================================================================= */
:root{
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --t-xs:11px; --t-sm:12.5px; --t-md:14px; --t-lg:16px; --t-xl:20px; --t-2xl:26px; --t-3xl:34px; --t-4xl:46px;

  --bg:#10151b; --bg-2:#151b22; --surface:#1b232c; --surface-2:#222d38;
  --rail:#2c3742; --rail-2:#384552;
  --ink:#f3ede1; --ink-2:#d8cfbe; --muted:#a89d89; --faint:#766d5c;
  --line:rgba(247,238,222,.085); --line-2:rgba(247,238,222,.17);

  --accent:#e2ad51; --accent-2:#f0c877; --accent-ink:#241905;
  --accent-soft:rgba(226,173,81,.16); --accent-line:rgba(226,173,81,.5);
  --good:#52c081; --good-soft:rgba(82,192,129,.16);
  --warn:#e2ad51; --crit:#e2705a; --crit-soft:rgba(226,112,90,.16); --info:#58b6c8;

  --felt-1:#1e5943; --felt-2:#123a2d; --felt-edge:#0c281f;
  --card-face:#f7f2e7; --card-face-2:#efe7d6; --card-ink:#1b1712;
  --suit-red:#bb392f; --suit-black:#221d18;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  /* Fraunces ships no Cyrillic -> Inter (self-hosted, has Cyrillic) is the
   * second display family so Russian headings never drop to a web-unsafe serif. */
  --font-display:"Fraunces","Inter","Iowan Old Style",Georgia,serif;
  --font-body:"Inter",-apple-system,system-ui,sans-serif;
  --num-feat:"tnum" 1,"lnum" 1;

  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.28);
  --shadow-2:0 8px 34px rgba(0,0,0,.45);
  --shadow-card:0 2px 4px rgba(0,0,0,.35),0 8px 18px rgba(0,0,0,.3);
  --focus-ring:rgba(226,173,81,.65);
  --maxw:1120px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-md); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  background-image:
    radial-gradient(130% 80% at 50% -10%, rgba(226,173,81,.08), transparent 55%),
    radial-gradient(90% 70% at 85% 0%, rgba(30,89,67,.14), transparent 60%);
  background-attachment:fixed;
}
img,svg{max-width:100%;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; line-height:1.12; margin:0;}
p{margin:0;}
a{color:var(--accent-2); text-decoration:none;}
a:hover{text-decoration:underline;}
.num{font-variant-numeric:tabular-nums lining-nums; font-feature-settings:var(--num-feat);}

/* ---- focus: visible gold ring on every interactive element ---- */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:var(--r-sm);
}
.skip{position:absolute; left:-999px; top:0; z-index:200; background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; border-radius:0 0 var(--r) 0; font-weight:600;}
.skip:focus{left:0;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px; width:100%;}

/* ============================== header ================================= */
header.site{position:sticky; top:0; z-index:90; background:rgba(16,21,27,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
header.site .wrap{display:flex; align-items:center; gap:16px; min-height:64px;}
.brand{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-weight:600; font-size:var(--t-xl); color:var(--ink); letter-spacing:-.01em;}
.brand:hover{text-decoration:none;}
.brand .spade{color:var(--accent); font-size:1.05em; line-height:1;}
.brand .house{color:var(--accent-2);}
nav.main{display:flex; align-items:center; gap:4px; margin-left:auto;}
nav.main a{color:var(--ink-2); font-weight:500; padding:9px 12px; border-radius:var(--r-sm); font-size:var(--t-md);}
nav.main a:hover{color:var(--ink); background:var(--line); text-decoration:none;}
.btn{
  font:inherit; font-weight:600; cursor:pointer; border:1px solid transparent; border-radius:var(--r-pill);
  padding:11px 18px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  line-height:1; transition:background var(--dur,.18s), border-color .18s, color .18s;
}
.btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-2); text-decoration:none;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2);}
.btn-ghost:hover{background:var(--line); text-decoration:none;}
.btn-lg{padding:14px 24px; min-height:52px; font-size:var(--t-lg);}
.enter-wrap{display:inline-flex; align-items:center; gap:8px;}
.enter-badge{font-size:var(--t-xs); font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill); white-space:nowrap;
  background:var(--accent-soft); color:var(--accent-2); border:1px solid var(--accent-line);}
[data-access="prep"] .enter-badge::after{content:"готовится";}
[data-access="open"] .enter-badge{background:var(--good-soft); color:var(--good); border:1px solid rgba(82,192,129,.5);}
[data-access="open"] .enter-badge::after{content:"открыт";}

/* header enter button: shows kebab menu trigger on small screens */
.nav-toggle{display:none;}

/* ---- access-state show/hide (ships data-access="prep") ---- */
.state-prep{display:none;} .state-open{display:none;}
/* R1: the current-state hide is AUTHORITATIVE — it must beat component styles like
   `.f-col a{display:inline-flex}`, so the wrong-state controls (e.g. the footer OPEN
   link to the game host in PREP) are display:none -> invisible, not focusable, out of
   the a11y tree. */
[data-access="prep"] .state-open{display:none !important;}
[data-access="open"]  .state-prep{display:none !important;}
[data-access="prep"] .state-prep{display:revert;}
[data-access="open"] .state-open{display:revert;}
[data-access="prep"] .hero-cta .state-prep,
[data-access="prep"] .start-foot .state-prep,
[data-access="prep"] .cta-row .state-prep,
[data-access="prep"] .enter-wrap .state-prep{display:inline-flex;}
[data-access="open"] .hero-cta .state-open,
[data-access="open"] .start-foot .state-open,
[data-access="open"] .cta-row .state-open,
[data-access="open"] .enter-wrap .state-open{display:inline-flex;}

/* ============================== hero =================================== */
.hero{padding:var(--s-8) 0 var(--s-7);}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s-7); align-items:center;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:var(--t-sm); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2);
  background:var(--accent-soft); border:1px solid var(--accent-line); padding:6px 13px; border-radius:var(--r-pill);}
.hero h1{font-size:clamp(32px,5.2vw,var(--t-4xl)); font-weight:700; margin:var(--s-5) 0 var(--s-4); max-width:18ch;}
.hero h1 em{font-style:italic; color:var(--accent-2);}
.lede{font-size:clamp(16px,2.3vw,var(--t-xl)); color:var(--ink-2); max-width:40ch; line-height:1.5;}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s-6);}
.status-line{display:flex; align-items:flex-start; gap:10px; margin-top:var(--s-5); font-size:var(--t-sm);
  color:var(--muted); max-width:46ch;}
.dot{flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:6px;}
[data-access="prep"] .dot{background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
[data-access="open"] .dot{background:var(--good); box-shadow:0 0 0 4px var(--good-soft);}

/* hero visual: original Club-style table illustration (labelled) */
.visual{position:relative;}
.visual figure{margin:0;}
.table-art{width:100%; height:auto; display:block; border-radius:var(--r-xl); box-shadow:var(--shadow-2);
  border:1px solid var(--line-2); background:var(--bg-2);}
figcaption{margin-top:10px; font-size:var(--t-xs); color:var(--faint); text-align:center; letter-spacing:.02em;}

/* About: real client screenshot inside the client frame (replaces the former inline SVG). */
.client-shot{width:100%; height:auto; display:block; border-radius:var(--r-lg); background:var(--bg-2);}

/* About helpers — relocated from inline style="" so a strict style-src 'self' (no
   'unsafe-inline') CSP holds. Same declarations as before, now in the stylesheet. */
.who-h{font-size:var(--t-lg); margin-bottom:16px;}
.plan-h{font-size:var(--t-lg); margin:var(--s-7) 0 16px;}
.about-note{color:var(--faint); font-size:var(--t-sm); margin-top:16px; max-width:70ch;}
.enter-intro{color:var(--ink-2); margin-bottom:4px;}

/* ============================ trust strip ============================== */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2);}
.trust .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:0;}
.trust .cell{padding:var(--s-5) var(--s-4); background:var(--bg-2);}
.trust .cell + .cell{box-shadow:-1px 0 var(--line);}
.trust .k{font-family:var(--font-display); font-size:var(--t-lg); color:var(--ink); margin-bottom:3px;}
.trust .v{font-size:var(--t-sm); color:var(--muted);}

/* ============================= sections ================================ */
section{padding:var(--s-8) 0; scroll-margin-top:72px;}
.sec-head{max-width:62ch; margin-bottom:var(--s-6);}
.sec-kicker{font-size:var(--t-sm); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); margin-bottom:10px;}
.sec-head h2{font-size:clamp(24px,3.6vw,var(--t-3xl)); font-weight:600;}
.sec-head p{color:var(--ink-2); margin-top:14px; font-size:var(--t-lg);}

/* capability grid */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-5);
  box-shadow:var(--shadow-1);}
.card h3{font-size:var(--t-lg); margin-bottom:8px; display:flex; align-items:center; gap:10px;}
.card p{color:var(--muted); font-size:var(--t-md);}
.ic{flex:0 0 auto; width:34px; height:34px; border-radius:var(--r-sm); background:var(--accent-soft);
  display:inline-flex; align-items:center; justify-content:center; color:var(--accent-2); border:1px solid var(--accent-line);}
.ic svg{width:19px; height:19px;}

.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-7); align-items:center;}
.who{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.who li{display:flex; gap:12px; align-items:flex-start; color:var(--ink-2);}
.who .chk{flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--good-soft); color:var(--good);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-top:1px;}

/* client preview frame (honest label) */
.client-frame{background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:12px; box-shadow:var(--shadow-2);}
.client-bar{display:flex; align-items:center; gap:8px; padding:4px 6px 10px;}
.client-bar .dots{display:flex; gap:6px;}
.client-bar .dots i{width:10px; height:10px; border-radius:50%; background:var(--rail-2);}
.client-bar .addr{margin-left:auto; font-size:var(--t-xs); color:var(--faint); font-variant-numeric:tabular-nums;}

/* ============================ how to start ============================= */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:step;}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-5); position:relative;}
.step::before{counter-increment:step; content:counter(step); font-family:var(--font-display); font-weight:700;
  font-size:var(--t-xl); color:var(--accent-ink); background:var(--accent); width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.step h3{font-size:var(--t-lg); margin-bottom:8px;}
.step p{color:var(--muted);}
.step .substep{margin-top:10px; font-size:var(--t-sm); color:var(--accent-2);}
.start-foot{margin-top:var(--s-6); display:flex; flex-wrap:wrap; gap:12px; align-items:center;}

/* ============================= news ==================================== */
.news-list{display:grid; gap:16px; max-width:760px;}
.news{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:var(--s-5);}
.news .meta{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; font-size:var(--t-sm); color:var(--muted);}
.tag{font-size:var(--t-xs); font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:4px 10px;
  border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-2); border:1px solid var(--accent-line);}
.tag.confirmed{background:var(--good-soft); color:var(--good); border-color:rgba(82,192,129,.5);}
.news h3{font-size:var(--t-lg); margin-bottom:8px;}
.news p{color:var(--ink-2);}
.news ul{margin:10px 0 0; padding-left:20px; color:var(--ink-2);}

/* ============================= faq ===================================== */
.faq{max-width:820px; display:grid; gap:10px;}
details.qa{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;}
details.qa > summary{cursor:pointer; list-style:none; padding:16px 18px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:12px; min-height:44px;}
details.qa > summary::-webkit-details-marker{display:none;}
details.qa > summary .caret{margin-left:auto; color:var(--accent-2); transition:transform .18s;}
details.qa[open] > summary .caret{transform:rotate(90deg);}
details.qa .body{padding:0 18px 18px; color:var(--ink-2);}

/* ===================== invitation / next-step band ===================== */
.cta-band{background:linear-gradient(180deg,var(--surface),var(--bg-2)); border:1px solid var(--line-2);
  border-radius:var(--r-xl); padding:var(--s-7); margin:var(--s-8) 0 0; box-shadow:var(--shadow-2);}
.cta-band h2{font-size:clamp(22px,3.2vw,var(--t-2xl)); margin-bottom:12px;}
.cta-band p{color:var(--ink-2); max-width:56ch;}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s-5); align-items:center;}
.invite-note{margin-top:var(--s-5); border-top:1px solid var(--line); padding-top:var(--s-5);
  color:var(--ink-2); font-size:var(--t-sm); display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;}
.invite-note b{color:var(--ink);}
.invite-note .links{display:flex; flex-wrap:wrap; gap:8px 16px;}

/* ============================= footer ================================== */
footer.site{border-top:1px solid var(--line); margin-top:var(--s-8); padding:var(--s-7) 0 var(--s-8); background:var(--bg-2);}
footer.site .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s-6);}
footer .brand{margin-bottom:12px;}
footer .f-note{color:var(--muted); font-size:var(--t-sm); max-width:40ch;}
.f-col h4{font-size:var(--t-sm); text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin-bottom:12px; font-family:var(--font-body); font-weight:600;}
.f-col ul{list-style:none; margin:0; padding:0; display:grid; gap:2px;}
.f-col a{color:var(--ink-2); font-weight:500; display:inline-flex; align-items:center; min-height:44px;}
.f-col button.linklike{font:inherit; font-weight:500; color:var(--ink-2); background:none; border:0; padding:0;
  text-align:left; cursor:pointer; display:inline-flex; align-items:center; min-height:44px;}
.f-col button.linklike:hover{color:var(--accent-2); text-decoration:underline;}
.f-sep{border-top:1px solid var(--line); margin-top:var(--s-6); padding-top:var(--s-5); color:var(--faint); font-size:var(--t-xs); line-height:1.7;}
/* F1 — owner-directed Ridotto credit; readable contrast, wraps at 320px. */
.f-credit{margin-top:var(--s-3); color:var(--muted); font-size:var(--t-sm); line-height:1.7; overflow-wrap:anywhere;}
.f-credit a{color:var(--accent-2); font-weight:600;}

/* ============================= dialogs ================================= */
dialog{border:none; padding:0; background:transparent; color:var(--ink); max-width:min(640px,calc(100vw - 32px)); width:100%;}
dialog::backdrop{background:rgba(6,9,13,.72); backdrop-filter:blur(3px);}
.modal{background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--shadow-2);
  max-height:min(86vh,860px); display:flex; flex-direction:column; overflow:hidden;}
.modal-head{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); flex:0 0 auto;}
.modal-head h2{font-size:var(--t-xl); min-width:0; overflow-wrap:anywhere;}
/* R2: the close button keeps a ≥44×44 tap target and never shrinks when the title is long. */
.modal-head .close{margin-left:auto; flex:0 0 auto; width:44px; height:44px; min-height:44px; border-radius:var(--r-sm); padding:0;}
.modal-body{padding:20px; overflow-y:auto; flex:1 1 auto;}
.modal-foot{padding:14px 20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; flex:0 0 auto;}

/* help article render */
.help-sub{color:var(--muted); margin:-6px 0 0;}
.help-note{background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--r); padding:12px 14px;
  font-size:var(--t-sm); color:var(--ink-2); margin-bottom:var(--s-5);}
.help-sec{margin-bottom:var(--s-6);}
.help-sec > h3{font-family:var(--font-display); font-size:var(--t-lg); color:var(--accent-2); margin-bottom:12px;}
.help-sec p{color:var(--ink-2); margin-bottom:10px;}
.deflist{display:grid; gap:10px; margin:0 0 10px; padding:0;}
.deflist .row{display:grid; grid-template-columns:minmax(120px,170px) 1fr; gap:14px; align-items:baseline;}
.deflist dt{font-weight:600; color:var(--ink);}
.deflist dd{margin:0; color:var(--ink-2);}
.hand-row{display:grid; grid-template-columns:minmax(120px,160px) auto 1fr; gap:14px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--line);}
.hand-row .hname{font-weight:600; color:var(--ink);}
.hand-row .hnote{color:var(--muted); font-size:var(--t-sm);}
.minicards{display:flex; gap:3px; flex-wrap:wrap;}
.mc{background:var(--card-face); color:var(--card-ink); border-radius:4px; min-width:22px; height:30px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; box-shadow:var(--shadow-card);
  font-variant-numeric:tabular-nums;}
.mc.red{color:var(--suit-red);}
.help-src{margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--line); font-size:var(--t-sm); color:var(--muted);}
.help-src a{color:var(--accent-2);}

.enter-dialog .modal-body{display:grid; gap:16px;}
.enter-dialog .choice{display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--line-2);
  border-radius:var(--r); background:var(--bg-2);}
.enter-dialog .choice .ic{width:38px; height:38px;}
.enter-dialog .choice h3{font-size:var(--t-md); margin-bottom:4px;}
.enter-dialog .choice p{color:var(--muted); font-size:var(--t-sm);}
.enter-dialog .choice .btn{margin-left:auto; align-self:center; white-space:nowrap;}

/* ============================ responsive =============================== */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:var(--s-6);}
  .about-grid{grid-template-columns:1fr; gap:var(--s-6);}
  .cards,.steps{grid-template-columns:1fr 1fr;}
  footer.site .wrap{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .trust .wrap{grid-template-columns:1fr 1fr;}
  .trust .cell + .cell{box-shadow:none;}
  .trust .cell{border-top:1px solid var(--line);}
  nav.main{display:none;}
  nav.main.open{display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column;
    align-items:stretch; background:var(--bg-2); border-bottom:1px solid var(--line-2); padding:10px 20px; gap:2px; box-shadow:var(--shadow-2); z-index:95;}
  nav.main.open a{min-height:44px; display:flex; align-items:center;}
  .nav-toggle{display:inline-flex; margin-left:auto; padding:11px 13px;}
  .enter-badge{display:none;}           /* status shown in hero + CTA on small screens */
  header.site .wrap{position:relative; gap:10px;}
  .cards,.steps{grid-template-columns:1fr;}
  footer.site .wrap{grid-template-columns:1fr;}
  .deflist .row,.hand-row{grid-template-columns:1fr; gap:4px;}
  .hand-row{gap:6px;}
}
@media (max-width:420px){
  .brand{font-size:var(--t-lg);}
  header.site .btn{padding:10px 14px;}
  /* R2: on narrow screens the dialog choice-row wraps — icon+text share the first
     line (text can shrink), the action button drops to its own full-width line and
     its label may wrap, so nothing overflows the dialog body. */
  .enter-dialog .choice{flex-wrap:wrap;}
  .enter-dialog .choice > div{flex:1 1 0; min-width:0;}
  .enter-dialog .choice .btn{flex:1 0 100%; margin-left:0; align-self:stretch; white-space:normal; justify-content:center;}
}
@media (max-width:380px){
  .wrap{padding:0 16px;}
  .hero{padding:var(--s-7) 0 var(--s-6);}
  .btn-lg{padding:13px 18px;}
  .cta-band{padding:var(--s-5);}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}
html{scroll-behavior:smooth;}