/* Лендинг Игротеки. Токены, кнопки и карты — из style.css (общие с играми), здесь только раскладка страницы.
   Ритм: первый экран (текст | живое поле) → две игры двумя разными «столами» (печатная доска и сукно) →
   три шага картами веером → мозаика удобств → вопросы → финальный призыв на сукне. */

.lp main { overflow-x: clip; } /* поле в первом экране нарочно выходит за край — но не дальше окна */
.lp main > section { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.lp h2 { margin: 0 0 34px; font: 800 clamp(28px, 3.4vw, 46px)/1.08 var(--font-d); letter-spacing: -.015em; color: var(--paper); text-wrap: balance; }
.lp p { font-size: 17px; line-height: 1.62; color: #C6D1CB; }
.lp a:not(.btn) { color: var(--brass2); }
.lp .btn { text-decoration: none; }
.btn.lp-btn-paper { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn.lp-btn-paper:hover { background: #fff; border-color: #fff; }
.lp-skip { position: absolute; left: -999px; top: 12px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--paper); color: var(--ink); font-weight: 800; }
.lp-skip:focus { left: 16px; }

/* шапка */
.lp-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px;
  padding: 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  background: rgba(15, 28, 23, .86);
  backdrop-filter: blur(10px);
}
.lp-logo { font: 800 20px/1 var(--font-d); letter-spacing: .01em; text-transform: uppercase; text-decoration: none; color: var(--paper) !important; }
.lp-nav { display: flex; gap: 24px; margin-left: auto; }
.lp-nav a { color: var(--muted) !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.lp-nav a:hover { color: var(--text) !important; }

/* первый экран */
.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 16px;
  min-height: min(calc(100vh - 64px), 860px);
  padding-top: 28px !important;
  padding-bottom: 40px !important;
}
.lp-hero h1 { margin: 0; font: 800 clamp(36px, 4.6vw, 68px)/1.03 var(--font-d); letter-spacing: -.025em; color: var(--paper); text-wrap: balance; }
.lp-hero h1::after { content: ''; display: block; width: 64px; height: 4px; margin-top: 26px; border-radius: 2px; background: var(--accent); }
.lp-lead { max-width: 33em; margin: 22px 0 0; font-size: 18px !important; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lp-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; list-style: none; }
.lp-facts li { display: inline-flex; align-items: center; gap: 9px; color: var(--brass2); font-size: 14px; font-weight: 800; }
.lp-facts li::before { content: ''; width: 7px; height: 7px; border-radius: 1px; background: var(--brass); transform: rotate(45deg); }

.lp-hero-art { position: relative; height: min(68vh, 620px); min-height: 400px; }
.lp-board3d {
  position: absolute;
  left: 2%;
  top: 48%;
  width: min(740px, 50vw);
  transform: translateY(-50%) perspective(2000px) rotateX(48deg) rotateZ(-28deg);
  animation: lpSettle 1.4s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes lpSettle { from { opacity: 0; transform: translateY(-44%) perspective(2000px) rotateX(56deg) rotateZ(-34deg) scale(.95); } }
.lp-fan { position: absolute; right: 12%; bottom: 6%; width: 0; height: 0; }
.lp-fan .pk {
  --cw: clamp(84px, 8.4vw, 128px);
  position: absolute;
  left: 0;
  bottom: 0;
  translate: calc(-50% + var(--k) * 56%) 0;
  rotate: calc(var(--k) * 13deg - 8deg);
  transform-origin: 50% 160%;
  box-shadow: 0 0 0 1px rgba(31, 26, 20, .25), 0 26px 40px -14px rgba(0, 0, 0, .85);
  animation: lpDeal .8s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.6s + (var(--k) + 1) * .12s);
}
@keyframes lpDeal { from { opacity: 0; translate: calc(-50% + var(--k) * 20%) 40px; rotate: -30deg; } }

/* игры: два разных стола */
.lp-games { padding-top: 96px !important; }
.lp-game { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 52px; padding: 52px; }
.lp-game h3 { margin: 0 0 16px; font: 800 clamp(22px, 2.3vw, 32px)/1.15 var(--font-d); letter-spacing: -.01em; text-wrap: balance; }
.lp-rules { display: grid; gap: 10px; margin: 22px 0; padding: 0; list-style: none; }
.lp-rules li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; }
.lp-rules li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 1px; transform: rotate(45deg); }
.lp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.lp-meta li { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 800; }

/* «Магнат» — кремовая печатная доска в рамке, как само поле */
.lp-magnat {
  margin: 8px 11px 0;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 0 0 10px #F3F0E4, 0 0 0 11px #C9C1AA, 0 9px 0 11px #A99F86, 0 11px 0 12px #5F5743, 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.lp-magnat h3 { color: var(--ink); }
.lp-magnat p, .lp-magnat .lp-rules li { color: #4A4338; }
.lp-magnat .lp-rules b { color: var(--ink); }
.lp-magnat .lp-rules li::before { background: var(--accent); }
.lp-magnat .lp-meta li { background: #E4D9C2; color: var(--ink); }
.lp-flatboard { width: 100%; rotate: 3deg; filter: drop-shadow(0 30px 30px rgba(31, 26, 20, .35)); }
/* в игре на маленьком поле лента и колоды прячутся ради лотка с кубиками; на витрине лотка нет — показываем */
.lp-flatboard .logo-banner, .lp-flatboard .deck, .lp-board3d .logo-banner, .lp-board3d .deck { display: block; }

/* «Дурак» — зелёное сукно в деревянном борту */
.lp-durak {
  margin: 76px 13px 0;
  border-radius: 44px;
  background: radial-gradient(ellipse at 40% 30%, rgba(255, 255, 255, .07), transparent 60%), radial-gradient(ellipse at 50% 45%, #2A5A47, #1B3F31 58%, #12291F);
  box-shadow: 0 0 0 9px #6E4526, 0 0 0 12px #3A2312, 0 0 0 13px rgba(200, 161, 90, .45), inset 0 10px 50px rgba(0, 0, 0, .45), 0 40px 80px -30px rgba(0, 0, 0, .85);
}
.lp-durak h3 { color: var(--paper); }
.lp-durak p, .lp-durak .lp-rules li { color: #D3DCD7; }
.lp-durak .lp-rules b { color: var(--paper); }
.lp-durak .lp-rules li::before { background: var(--brass); }
.lp-durak .lp-meta li { background: rgba(0, 0, 0, .25); color: var(--brass2); }
.lp-felt { position: relative; height: 420px; }
.lp-felt::before { content: ''; position: absolute; inset: 4% 0 18%; border: 1px dashed rgba(242, 234, 219, .1); border-radius: 30px; }
.lp-felt > .pk { --cw: clamp(58px, 5.8vw, 84px); position: absolute; }
.lp-felt .lp-atk { box-shadow: 0 0 0 2px var(--brass2), 0 0 22px 3px rgba(226, 194, 133, .55); }
.lp-deck { position: absolute; left: 3%; top: 12%; width: clamp(58px, 5.8vw, 84px); aspect-ratio: 5 / 7; }
.lp-deck .pk { --cw: 100%; position: absolute; left: calc(var(--d, 0) * -2px); top: calc(var(--d, 0) * 2px); }
.lp-deck .lp-trump { left: 38%; top: 10%; rotate: 90deg; }
.lp-hand { position: absolute; left: 50%; bottom: 2%; width: 0; height: 0; }
.lp-hand .pk { --cw: clamp(62px, 6.2vw, 88px); position: absolute; left: 0; bottom: 0; translate: calc(-50% + var(--k) * 54%) calc(var(--k) * var(--k) * 4%); rotate: calc(var(--k) * 8deg); transform-origin: 50% 160%; box-shadow: 0 0 0 1px rgba(31, 26, 20, .25), 0 20px 30px -14px rgba(0, 0, 0, .85); }

/* три шага — карты веером */
.lp-how { padding-top: 120px !important; }
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.lp-step {
  position: relative;
  padding: 30px 28px 30px;
  border-radius: 18px;
  background: linear-gradient(160deg, #FFFDF6, #F1E8D6);
  box-shadow: 0 0 0 1px rgba(31, 26, 20, .2), 0 26px 44px -22px rgba(0, 0, 0, .85);
  color: var(--ink);
}
.lp-step:nth-child(1) { rotate: -2.5deg; }
.lp-step:nth-child(2) { translate: 0 -14px; }
.lp-step:nth-child(3) { rotate: 2.5deg; }
.lp-step::after { content: attr(data-suit); position: absolute; top: 18px; right: 22px; font-size: 28px; line-height: 1; color: var(--ink); }
.lp-step:nth-child(2)::after, .lp-step:nth-child(3)::after { color: #C2362B; }
.lp-step > b { display: block; font: 800 60px/1 var(--font-d); color: var(--accent); }
.lp-step h3 { margin: 18px 0 8px; font: 800 20px/1.2 var(--font-d); }
.lp-step p { margin: 0; font-size: 15.5px; color: #4A4338; }

/* мозаика удобств */
.lp-why { padding-top: 120px !important; }
.lp-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; }
.lp-tile { padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.lp-tile h3 { margin: 0 0 8px; font: 800 18px/1.25 var(--font-d); color: var(--paper); }
.lp-tile p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.lp-tile-phone {
  grid-column: span 2;
  grid-row: span 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 26px;
  border-color: rgba(200, 161, 90, .35);
  background: radial-gradient(ellipse at 20% 0%, rgba(200, 161, 90, .14), transparent 60%), var(--surface);
}
.lp-tile-stats, .lp-tile-chat { grid-column: span 2; }
.lp-tile:last-child { grid-column: span 2; }
.lp-phone { width: 158px; aspect-ratio: 9 / 18.5; padding: 7px; border-radius: 28px; background: #070D0B; box-shadow: 0 0 0 2px #2F3F38, 0 30px 50px -20px #000; }
.lp-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 22px; background: var(--bg); }
.lp-ph-opps { display: flex; justify-content: center; gap: 16px; padding: 14px 0 8px; }
.lp-ph-opps i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.lp-ph-felt { position: relative; height: 46%; margin: 0 8px; border-radius: 14px; background: radial-gradient(ellipse at 50% 40%, #2A5A47, #173528); box-shadow: 0 0 0 3px #6E4526; }
.lp-ph-felt .pk { --cw: 34px; position: absolute; }
.lp-ph-felt .lp-atk { box-shadow: 0 0 0 1.5px var(--brass2); }
.lp-ph-hand { position: absolute; left: 50%; bottom: 14px; width: 0; height: 0; }
.lp-ph-hand .pk { --cw: 40px; position: absolute; left: 0; bottom: 0; translate: calc(-50% + var(--k) * 62%) 0; rotate: calc(var(--k) * 7deg); transform-origin: 50% 160%; }
.lp-stats { display: flex; gap: 10px; margin-top: 18px; }
.lp-stats span { flex: 1; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .22); color: var(--muted); font-size: 12px; font-weight: 700; }
.lp-stats b { display: block; margin-bottom: 2px; font: 800 22px/1.1 var(--font-d); color: var(--paper); }
.lp-bubbles { display: grid; gap: 8px; margin-top: 16px; }
.lp-bubbles span { width: max-content; max-width: 85%; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: #24382F; font-size: 13.5px; font-weight: 600; }
.lp-bubbles .me { justify-self: end; border-radius: 12px 12px 4px 12px; background: rgba(224, 87, 63, .22); }

/* вопросы */
.lp-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; padding-top: 120px !important; }
.lp-faq-head { position: sticky; top: 100px; align-self: start; }
.lp-faq-list { border-top: 1px solid var(--line); }
.lp-faq-list details { border-bottom: 1px solid var(--line); }
.lp-faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 0; color: var(--text); font-size: 17px; font-weight: 700; line-height: 1.4; list-style: none; cursor: pointer; }
.lp-faq-list summary::-webkit-details-marker { display: none; }
.lp-faq-list summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--brass2); border-bottom: 2px solid var(--brass2); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.lp-faq-list details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.lp-faq-list summary:focus-visible { outline: 2px solid var(--brass2); outline-offset: 4px; }
.lp-faq-list details p { margin: -4px 0 22px; font-size: 16px; color: var(--muted); }

/* финальный призыв */
.lp-final {
  margin: 120px auto 0 !important;
  max-width: calc(1240px - 56px) !important;
  padding: 64px 28px !important;
  border-radius: 32px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(200, 161, 90, .2), transparent 60%), radial-gradient(ellipse at 50% 60%, #24503F, #142D23);
  box-shadow: inset 0 0 0 1px rgba(200, 161, 90, .4);
}
.lp-final h2 { margin-bottom: 12px; }
.lp-final p { margin: 0; }
.lp-final .lp-cta { justify-content: center; }

/* подвал */
.lp-foot { max-width: 1240px; margin: 80px auto 0; padding: 30px 28px 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.lp-foot nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.lp-foot nav a { color: var(--muted) !important; text-decoration: none; }
.lp-foot nav a:hover { color: var(--text) !important; }
.lp-foot > span { margin-left: auto; }

/* появление при прокрутке (только если скрипт работает) */
.lp-js .lp-reveal { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .8, .2, 1); }
.lp-js .lp-step.lp-reveal:nth-child(2) { translate: 0 12px; }
.lp-js .lp-reveal.in { opacity: 1; translate: 0; }
.lp-js .lp-step.lp-reveal.in:nth-child(2) { translate: 0 -14px; }
.lp-js .lp-step:nth-child(2) { transition-delay: .08s; }
.lp-js .lp-step:nth-child(3) { transition-delay: .16s; }

/* ───────── планшет и телефон ───────── */
@media (max-width: 1100px) {
  .lp-game { gap: 32px; padding: 40px; }
}
@media (max-width: 980px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 40px !important; }
  .lp-hero-art { height: 420px; min-height: 0; }
  .lp-board3d { left: 50%; width: min(620px, 92vw); transform: translate(-50%, -50%) perspective(2000px) rotateX(48deg) rotateZ(-28deg); animation: none; }
  .lp-fan { right: 16%; }
  .lp-game { grid-template-columns: minmax(0, 1fr); }
  .lp-durak .lp-game-art { order: 2; }
  .lp-flatboard { max-width: 560px; margin: 0 auto; }
  .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lp-faq-head { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .lp-faq-head h2 { margin: 0; }
}
@media (max-width: 760px) {
  .lp main > section { padding: 0 18px; }
  .lp-top { gap: 14px; padding: 0 16px; }
  .lp-nav { display: none; }
  .lp-top-cta { margin-left: auto; height: 40px; }
  .lp p { font-size: 16px; }
  .lp-lead { font-size: 16.5px !important; }
  .lp-cta .btn { flex: 1 1 220px; }
  .lp-hero-art { height: 300px; margin-bottom: -30px; }
  .lp-games, .lp-how, .lp-why, .lp-faq { padding-top: 80px !important; }
  .lp-game { padding: 28px 22px 30px; }
  .lp-magnat { margin: 8px 10px 0; }
  .lp-durak { margin-top: 56px; border-radius: 30px; }
  .lp-felt { height: 300px; }
  .lp-felt > .pk, .lp-deck { --cw: 48px; width: 48px; }
  .lp-deck { left: 0; }
  .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lp-step, .lp-step:nth-child(n) { rotate: 0deg; translate: 0; }
  .lp-js .lp-step.lp-reveal.in:nth-child(2), .lp-js .lp-step.lp-reveal:nth-child(2) { translate: 0; }
  .lp-bento { grid-template-columns: minmax(0, 1fr); }
  .lp-tile-phone, .lp-tile-stats, .lp-tile-chat, .lp-tile:last-child { grid-column: auto; grid-row: auto; }
  .lp-tile-phone { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .lp-final { margin: 80px 18px 0 !important; padding: 44px 20px !important; border-radius: 24px; }
  .lp-foot > span { margin-left: 0; }
}
@media (max-width: 420px) {
  .lp-top-cta { padding: 0 10px; font-size: 12px; }
  .lp-logo { font-size: 17px; }
  .lp-stats { flex-wrap: wrap; }
}