/* Токены дизайн-системы Zver Project (ivanzverev.ru) */
:root {
  --color-dark:#101713; --color-dark-alt:#17211c; --color-on-dark:#f4f2ec; --color-muted-on-dark:#c5cbc5;
  --color-canvas:#f2f0e9; --color-card:#faf8f2; --color-ink:#181c19; --color-muted:#59615b;
  --color-accent:#687047; --color-accent-strong:#a8ad83; --color-border:#d5d2c8;
  --color-red:#cf3f33; --color-red-hover:#bb382d;
  --font:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { font-family:var(--font); background:var(--color-canvas); color:var(--color-ink); line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column; }
#join, #room { flex:1; display:flex; flex-direction:column; }
#room > .light { flex:1; }
.wrap { max-width:960px; margin:0 auto; padding:0 24px; }
section { padding:56px 0; }
.dark { background:var(--color-dark); color:var(--color-on-dark); }
.light { background:var(--color-canvas); color:var(--color-ink); }

.overline { margin:0 0 16px; font-size:0.75rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--color-accent); }
.dark .overline { color:var(--color-accent-strong); }
h1, .display { margin:0; font-size:clamp(2rem, 6vw, 3.25rem); line-height:1.08; font-weight:700; letter-spacing:-0.02em; }
h2 { margin:0 0 20px; font-size:1.5rem; line-height:1.2; font-weight:700; letter-spacing:-0.01em; }
h3 { margin:0 0 8px; font-size:1.125rem; line-height:1.3; font-weight:700; letter-spacing:-0.01em; }
p { margin:0; }
.lead { margin-top:16px; max-width:560px; font-size:1.125rem; color:var(--color-muted-on-dark); }
.muted { color:var(--color-muted); }
.text { max-width:680px; color:var(--color-muted); }
.text + .text { margin-top:12px; }
.dark .text { color:var(--color-muted-on-dark); }
* + .block { margin-top:56px; }

header { border-bottom:1px solid var(--color-dark-alt); }
.brand { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:20px; padding-bottom:20px; }
.brand .overline { margin:0; }
.brand a { color:var(--color-muted-on-dark); text-decoration:none; font-size:0.875rem; white-space:nowrap; }
.brand a:hover { color:var(--color-on-dark); }

.card { background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; padding:24px; }
.card .text { color:var(--color-muted); }
.form-card { max-width:520px; }
.cards3 { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:720px) { .cards3 { grid-template-columns:repeat(3, 1fr); } }
.index { display:block; margin-bottom:12px; font-size:0.75rem; font-weight:700; letter-spacing:0.2em; color:var(--color-accent); }

label { display:block; font-size:0.875rem; font-weight:700; margin-bottom:8px; }
input { width:100%; font:inherit; font-size:1rem; padding:14px 16px; border:1px solid var(--color-border); border-radius:0.5rem; background:#fff; color:var(--color-ink); }
input:focus { outline:2px solid var(--color-accent); outline-offset:1px; border-color:var(--color-accent); }

.btn { font:inherit; font-weight:700; font-size:1rem; padding:14px 28px; border-radius:0.5rem; border:1px solid transparent; cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn-primary { background:var(--color-red); color:var(--color-on-dark); }
.btn-primary:hover:not(:disabled) { background:var(--color-red-hover); }
.btn-ghost { background:transparent; color:var(--color-ink); border-color:var(--color-border); }
.btn-ghost:hover:not(:disabled) { border-color:var(--color-ink); }
.dark .btn-ghost { color:var(--color-on-dark); border-color:#3a4540; }
.dark .btn-ghost:hover:not(:disabled) { border-color:var(--color-on-dark); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.err { color:var(--color-red); font-size:0.875rem; min-height:22px; margin-top:10px; }

.legend { display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--color-border); }
.legend div { display:grid; grid-template-columns:96px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--color-border); }
.legend dt { font-weight:700; font-variant-numeric:tabular-nums; }
.legend dd { margin:0; color:var(--color-muted); }
.faq h3 { margin-top:28px; }
.faq h3:first-of-type { margin-top:0; }

.room-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.room-id { font-variant-numeric:tabular-nums; }
.role { margin-top:12px; color:var(--color-muted-on-dark); }

.deck { display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:12px; }
.deck button { aspect-ratio:3 / 4; font:inherit; font-size:1.5rem; font-weight:700; letter-spacing:-0.01em; color:var(--color-ink);
  background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; cursor:pointer; transition:border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease; }
.deck button:hover { border-color:var(--color-ink); transform:translateY(-2px); }
.deck button.sel { background:var(--color-dark); border-color:var(--color-dark); color:var(--color-on-dark); }

.grid { display:grid; grid-template-columns:1fr; gap:24px; margin-top:24px; align-items:start; }
@media (min-width:820px) { .grid { grid-template-columns:2fr 1fr; } }

table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:0.75rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--color-accent); padding:0 0 12px; }
th.right { text-align:right; }
td { padding:14px 0; border-top:1px solid var(--color-border); }
td.pts { text-align:right; font-size:1.25rem; font-weight:700; width:96px; font-variant-numeric:tabular-nums; }
td.pts.wait { color:var(--color-accent); font-size:1rem; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--color-border); margin-right:12px; vertical-align:middle; }
.dot.on { background:var(--color-accent); }
.me { color:var(--color-muted); font-weight:400; }

.stat { padding:4px 0 16px; }
.stat + .stat { border-top:1px solid var(--color-border); padding-top:16px; }
.stat .num { display:block; font-size:2.75rem; line-height:1.1; font-weight:700; letter-spacing:-0.02em; color:var(--color-red); font-variant-numeric:tabular-nums; }
.stat .num.empty { color:var(--color-border); }
.hint { font-size:0.875rem; color:var(--color-muted); margin-top:12px; }

footer { padding:40px 0; }
.foot { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.foot p { color:var(--color-muted-on-dark); }
.foot a { color:var(--color-on-dark); }
.copy { font-size:0.75rem; color:var(--color-muted-on-dark); margin-left:auto; }

@media (max-width:560px) {
  .wrap { padding:0 16px; }
  section { padding:40px 0; }
  .deck { grid-template-columns:repeat(4, 1fr); gap:8px; }
  .deck button { aspect-ratio:1 / 1; font-size:1.25rem; }
  .brand .wide { display:none; }
  .btn { width:100%; }
  .legend div { grid-template-columns:72px 1fr; }
}
[hidden] { display:none !important; }