/* Лендинг «Цвета Арканы»: макет Figma «Лендинг — Цвета Арканы», вариант 2. */
/* Keep native URL/history/focus behavior; scope the anchor offset to this landing. */
html:has(main.arc) {scroll-behavior: smooth;scroll-padding-top: var(--arc-anchor-offset, 104px);}
@media (max-width: 767px) {
	html:has(main.arc) {scroll-padding-top: var(--arc-anchor-offset, 84px);}
}
@media (prefers-reduced-motion: reduce) {
	html:has(main.arc) {scroll-behavior: auto;}
}
/* Landing photos keep their native fit/zoom. Controls follow the viewport, not a product-card width. */
.pswp.pswp--arcana .pswp__button:is(.pswp__button--close, .pswp__button--zoom, .pswp__button--arrow--left, .pswp__button--arrow--right) {background-color: #20202a !important;border: 1px solid rgb(255 255 255 / 35%);border-radius: 50%;box-shadow: 0 2px 12px rgb(0 0 0 / 25%);}
.pswp.pswp--arcana .pswp__button--zoom {position: absolute;float: none;top: 34px;right: 100px;width: 44px;height: 44px;opacity: 1;}
.pswp.pswp--arcana.pswp--zoomed-in .pswp__button--zoom:hover {background-position: -132px 0;}
.pswp.pswp--arcana .pswp__button--arrow--left, .pswp.pswp--arcana .pswp__button--arrow--right {display: block;visibility: visible;top: 50%;margin-top: -28px;opacity: 1;}
.pswp.pswp--arcana .pswp__button--arrow--left {left: max(24px, env(safe-area-inset-left, 0px));}
.pswp.pswp--arcana .pswp__button--arrow--right {right: max(24px, env(safe-area-inset-right, 0px));}
.pswp.pswp--arcana .pswp__ui--one-slide .pswp__button--arrow--left, .pswp.pswp--arcana .pswp__ui--one-slide .pswp__button--arrow--right {display: none;}
@media (hover: hover) and (pointer: fine) {
	.pswp.pswp--arcana .pswp__button:is(.pswp__button--close, .pswp__button--zoom, .pswp__button--arrow--left, .pswp__button--arrow--right):hover {background-color: #383844 !important;border-color: rgb(255 255 255 / 65%);}
}
@media (max-width: 760px) {
	.pswp.pswp--arcana .pswp__button--zoom {top: 50px;right: 76px;}
	.pswp.pswp--arcana .pswp__button--arrow--left, .pswp.pswp--arcana .pswp__button--arrow--right {width: 44px;height: 44px;margin-top: -22px;}
	.pswp.pswp--arcana .pswp__button--arrow--left {left: max(12px, env(safe-area-inset-left, 0px));}
	.pswp.pswp--arcana .pswp__button--arrow--right {right: max(12px, env(safe-area-inset-right, 0px));}
}
.arc {--arc-ink: #17161d;--arc-gold: #8f5d06;--arc-cut: 6px;color: var(--arc-ink);font: 400 16px/1.45 Rubik, sans-serif;letter-spacing: 0;}
.arc *, .arc *::before, .arc *::after {box-sizing: border-box;}
.arc :where(p, h2, h3, dl, dd, ol, ul) {margin: 0;padding: 0;}
.arc :where(img) {display: block;max-width: 100%;height: auto;}
.arc-wrap {width: 100%;max-width: 1440px;margin-inline: auto;padding-inline: 40px;}
.arc-sec {position: relative;isolation: isolate;padding-block: 96px;overflow: hidden;}
.arc-h2 {margin-bottom: 16px;font: 600 32px/1.15 Unbounded, sans-serif;}
.arc-lead {max-width: 760px;font-size: 16px;}
.arc-sec > .arc-wrap > .arc-lead {margin-bottom: 40px;}

/* Шейдеры: холст под содержимым, без WebGPU остаётся градиентная подложка. */
[data-arc-shader] {background: radial-gradient(60% 70% at 15% 20%, rgb(242 164 108 / 34%), transparent 70%), radial-gradient(55% 65% at 85% 30%, rgb(159 127 216 / 30%), transparent 70%), radial-gradient(60% 60% at 60% 90%, rgb(127 181 224 / 22%), transparent 70%), #f7f3fb;}
[data-arc-preset="dark"] {color: #f4f2ff;background: radial-gradient(60% 70% at 18% 20%, rgb(159 127 216 / 34%), transparent 70%), radial-gradient(50% 60% at 85% 75%, rgb(242 164 108 / 20%), transparent 70%), #17141f;}
.arc-shader {position: absolute;inset: 0;z-index: -2;width: 100%;height: 100%;pointer-events: none;}

/* Кристаллы из игры вместо иконок. */
.arc-gem {flex: none;width: 18px;height: auto;filter: drop-shadow(0 2px 3px rgb(0 0 0 / 22%));}
.arc-gems {display: inline-flex;gap: 4px;}
.arc-gems .arc-gem {width: 14px;}

/* Кнопки сайта. */
.arc-btn {display: inline-flex;align-items: center;justify-content: center;height: 48px;padding: 0 24px;border: 1px solid transparent;border-radius: 12px;font: 400 16px/1 Rubik, sans-serif;color: inherit;text-decoration: none;white-space: nowrap;transition: transform .2s var(--bz-ease, ease), background-color .2s, border-color .2s;}
.arc-btn:hover {transform: translateY(-1px);}
.arc-btn--primary {background: #2f3c4b;color: #fff;}
.arc-btn--primary:hover {background: #26313d;}
.arc-btn--ghost {border-color: currentColor;}
.arc-btn--gold {width: 100%;background: #f0b32a;color: var(--arc-ink);}
.arc-btn--gold:hover {background: #e5a61b;}
.arc-btn--light {background: #fff;color: var(--arc-ink);}
.arc-actions {display: flex;flex-wrap: wrap;justify-content: center;gap: 12px;}

/* Плашки со срезанными углами (corner-shape: bevel) и тонкой внутренней рамкой, как в нарезке игры. */

/* 1. Первый экран */
.arc-hero {position: relative;isolation: isolate;display: flex;align-items: center;justify-content: center;width: 100%;height: clamp(640px, 56.25vw, 960px);overflow: hidden;text-align: center;}
body:has(main.arc) {background: #f4f3fa;}
.arc-hero__art {position: absolute;inset: 0;z-index: -1;width: 100%;height: 100%;max-width: none;object-fit: cover;mix-blend-mode: multiply;}
.arc-hero__in {display: flex;flex-direction: column;align-items: center;gap: 16px;max-width: 640px;padding: 48px 24px;}
.arc-hero__box {width: 220px;margin-bottom: 8px;filter: drop-shadow(0 18px 30px rgb(36 24 60 / 28%));animation: arc-float 7s ease-in-out infinite;}
.arc-hero__eyebrow {display: inline-flex;align-items: center;gap: 10px;font: 500 13px/1.4 Rubik, sans-serif;}
.arc-hero__title {font: 600 44px/1.1 Unbounded, sans-serif;}
.arc-hero__lead {font-size: 20px;line-height: 1.45;}
.arc-chips {display: flex;flex-wrap: wrap;justify-content: center;gap: 8px;list-style: none;}
.arc-chips li {display: inline-flex;align-items: center;gap: 8px;height: 40px;padding: 0 16px;border-radius: 99px;background: rgb(255 255 255 / 86%);box-shadow: 0 4px 12px rgb(18 15 31 / 10%);}
.arc-hero .arc-actions {margin-top: 8px;}
@keyframes arc-float {50% {translate: 0 -8px;}}

/* 2. Об игре */
.arc-about {background: #f3d9bf;}
.arc-about__grid {display: grid;grid-template-columns: 1fr 1fr;align-items: center;gap: 40px;}
.arc-about__text {display: flex;flex-direction: column;gap: 24px;}
.arc-about__text .arc-h2 {margin: 0;}
.arc-about__art {width: 100%;mix-blend-mode: multiply;-webkit-mask-image: linear-gradient(#000 74%, transparent);mask-image: linear-gradient(#000 74%, transparent);}
.arc-stats {display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;margin-top: 40px;}
.arc-stats dt {font: 600 56px/1.1 Unbounded, sans-serif;color: var(--c);text-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent);}
.arc-stats dd {margin-top: 8px;}

/* 3. Товары */
.arc-shop {color: #fff;background: linear-gradient(#3f56a2, #3a7e97 50%, #24ad80);}
.arc-shop__head {display: grid;grid-template-columns: 1fr 1fr;gap: 40px;margin-bottom: 40px;}
.arc-shop__head > div {display: flex;flex-direction: column;gap: 12px;}
.arc-shop__head .arc-h2 {margin: 0 0 4px;}
.arc-lots {display: grid;grid-template-columns: 1fr 1fr;gap: 24px;}
.arc-lots--three {grid-template-columns: repeat(3, minmax(0, 1fr));}
.arc-lot {display: flex;flex-direction: column;overflow: hidden;border-radius: 16px;background: #fff;color: var(--arc-ink);}
.arc-lot__cover {position: relative;display: grid;place-items: center;height: 360px;background: #f4f3fa;}
.arc-lot__boxes {position: relative;width: 334px;height: 301px;}
.arc-lot__box {position: absolute;left: 0;top: 0;width: 220px;filter: drop-shadow(0 14px 24px rgb(36 24 60 / 22%));}
.arc-lot__addon {position: absolute;left: 168px;bottom: 0;width: 166px;filter: drop-shadow(0 12px 20px rgb(36 24 60 / 24%));}
.arc-pill {z-index: 2;position: absolute;left: 16px;top: 16px;display: inline-flex;align-items: center;gap: 6px;padding: 6px 12px;border-radius: 99px;background: #fff;font: 400 13px/1.3 Rubik, sans-serif;box-shadow: 0 4px 12px rgb(18 15 31 / 18%), 0 1px 2px rgb(18 15 31 / 12%);}
.arc-pill i {width: 8px;height: 8px;border-radius: 50%;background: #f0b32a;}
.arc-label {z-index: 2;position: absolute;right: 16px;top: 16px;display: inline-flex;align-items: center;gap: 8px;padding: 9px 16px 9px 14px;border-radius: 6px;corner-shape: bevel;background: #3f55a2;color: #fff;font: 600 11px/1.3 Unbounded, sans-serif;text-transform: uppercase;box-shadow: 0 4px 12px rgb(36 51 115 / 35%);}
.arc-label::after {content: "";position: absolute;inset: 3px;border: 1px solid rgb(255 255 255 / 85%);border-radius: 4px;corner-shape: bevel;pointer-events: none;}
.arc-label .arc-gem {width: 16px;}
.arc-lot__body {display: flex;flex: 1;flex-direction: column;gap: 12px;padding: 20px 24px 24px;}
.arc-lot__name {font: 600 16px/1.3 Unbounded, sans-serif;color: inherit;text-decoration: none;}
.arc-lot__name:hover {text-decoration: underline;}
.arc-lot__price {margin-bottom: 12px;font: 600 32px/1.15 Unbounded, sans-serif;}
.arc-lot .arc-btn {margin-top: auto;}
/* Один товар слева, справа — рассрочка */
.arc-lots--three {align-items: stretch;}
.arc-lots--three .arc-installment {padding: 28px;}
.arc-lots--three .arc-installment .arc-plan li {gap: 12px;}
.arc-installment .arc-plan {margin-top: auto;}
/* Второй товар — такая же карточка в колонке: картинка плейматов вписана в обложку целиком */
.arc-lot__playmats {width: 92%;height: auto;filter: drop-shadow(0 14px 22px rgb(60 40 10 / 25%));}
.arc-installment .arc-plan li {padding-block: 20px;}
.arc-lot__note {display: flex;align-items: flex-start;gap: 10px;max-width: 420px;padding: 12px 14px;border-radius: 12px;background: #f4f3fa;font-size: 15px;line-height: 1.45;}
.arc-lot__note .arc-gem {width: 16px;margin-top: 2px;}

/* 4. Особенности игры */
.arc-features__grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 24px;margin-top: 24px;}
.arc-features article {display: flex;flex-direction: column;gap: 16px;}
.arc-features img {aspect-ratio: 4 / 3;width: 100%;border-radius: 12px;object-fit: cover;}

/* 5. Цвета магии: фото и плашка из нарезки, плашка заходит на край фото, как в исходнике. */
.arc-magic {background: #e2d3f3;}
.arc-magic__grid {display: grid;grid-template-columns: 1fr 1fr;gap: 24px 32px;}
.arc-spell {position: relative;container-type: inline-size;}
.arc-spell > img {position: absolute;height: auto;max-width: none;}
.arc-spell__plate {position: absolute;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 2.4cqw;padding: 3cqw 4cqw;border-radius: 2.2cqw;corner-shape: bevel;background: var(--bg);color: #fff;text-align: center;box-shadow: 0 6px 14px rgb(30 20 50 / 22%);transition: transform .35s var(--bz-ease, ease);}
.arc-spell__plate::after {content: "";position: absolute;inset: 1.5cqw;border: 1.5px solid rgb(255 255 255 / 85%);border-radius: 1.6cqw;corner-shape: bevel;pointer-events: none;}
.arc-spell__title {padding-bottom: 2cqw;border-bottom: 2px solid rgb(255 255 255 / 70%);font: 600 3.4cqw/1.2 Unbounded, sans-serif;}
.arc-spell__text {font: 400 3cqw/1.3 Rubik, sans-serif;}
.arc-spell:hover .arc-spell__plate {transform: translateY(-4px);}

/* 6. Без участия ИИ */
.arc-noai {padding-block: 0 96px;background: #e2d3f3;}
.arc-noai__plate {display: grid;grid-template-columns: 1fr minmax(0, 480px);align-items: center;gap: 48px;padding: 40px 40px 40px 56px;border-radius: 16px;color: #fff;background: linear-gradient(90deg, #763374, #a25f63 55%, #cc863c);}
.arc-noai__text {display: flex;flex-direction: column;gap: 16px;}
.arc-noai__backs {width: 124px;height: auto;filter: drop-shadow(0 10px 18px rgb(30 10 30 / 35%));animation: arc-float 7s ease-in-out infinite;}
.arc-noai__title {font: 600 32px/1.15 Unbounded, sans-serif;}
.arc-noai__text p:not(.arc-noai__title) {font-size: 18px;line-height: 1.5;}
/* Гифка на «бумажной» карточке: белый рваный фон исходника ложится на белую подложку, пропорции 680:562 целиком */
.arc-noai__shot {margin: 0;padding: 12px;border-radius: 16px;background: #fff;box-shadow: 0 18px 36px rgb(50 20 50 / 30%);transform: rotate(-2deg);}
.arc-noai__shot video {display: block;width: 100%;height: auto;border-radius: 8px;}

/* Заголовок в рамке под артом — как в нарезках «Как играть?» и «Структура хода». */
.arc-banner {display: flex;flex-direction: column;align-items: center;margin-bottom: 48px;}
.arc-banner__art {position: relative;z-index: 0;-webkit-mask-image: linear-gradient(#000 92%, transparent);mask-image: linear-gradient(#000 92%, transparent);}
.arc-banner .arc-titlebox {min-width: min(100%, 460px);}
.arc-banner__art--swords {width: 420px;margin-bottom: -28px;}
.arc-banner__art--tower {width: 380px;margin-bottom: -24px;}
.arc-titlebox {position: relative;z-index: 1;padding: 22px 64px;border-radius: 12px;corner-shape: bevel;background: var(--box);color: #fff;font: 600 32px/1.15 Unbounded, sans-serif;text-align: center;box-shadow: 0 10px 24px rgb(30 18 40 / 30%);}
.arc-titlebox::after {content: "";position: absolute;inset: 7px;border: 1.5px solid rgb(255 255 255 / 90%);border-radius: 8px;corner-shape: bevel;pointer-events: none;}
.arc-titlebox--navy {--box: #2c2b52;}
.arc-titlebox--plum {--box: #4e1f5a;}

/* 7. Как играть */
.arc-howto {background: linear-gradient(90deg, #ddbf4f, #dd8a52);}
.arc-howto__steps {display: flex;flex-direction: column;gap: 40px;list-style: none;}
.arc-step {display: grid;grid-template-columns: 1fr 1fr;align-items: center;gap: 56px;}
.arc-step:nth-child(even) .arc-step__texts {order: 2;}
.arc-step__texts {display: flex;flex-direction: column;gap: 16px;max-width: 520px;justify-self: end;}
.arc-step:nth-child(even) .arc-step__texts {justify-self: start;}
.arc-step__text {display: flex;align-items: center;gap: 16px;font-size: 20px;line-height: 1.4;}
.arc-step > img {justify-self: start;filter: drop-shadow(0 18px 30px rgb(90 40 0 / 25%));}
.arc-step:nth-child(even) > img {justify-self: end;}
.arc-step:nth-child(1) > img {width: min(100%, 520px);}
.arc-step:nth-child(2) > img {width: min(100%, 620px);}
.arc-step:nth-child(3) > img {width: min(100%, 440px);}
.arc-step:nth-child(4) > img {width: min(100%, 680px);}
.arc-num {display: inline-grid;flex: none;place-items: center;width: 40px;height: 40px;border-radius: 10px;background: #fff;color: var(--arc-gold);font: 600 16px/1 Unbounded, sans-serif;}
.arc-goal {display: flex;align-items: center;gap: 16px;max-width: 760px;margin: 56px auto 0;padding: 20px 24px;border-radius: 16px;background: #fff;font-weight: 500;box-shadow: 0 10px 30px rgb(80 40 10 / 14%);}
.arc-goal .arc-gem {width: 30px;}

/* 8. Структура хода */
.arc-turn {color: #fff;background: linear-gradient(#763374, #8e4f6d 33%, #ac6a5d 66%, #cc863c);}
.arc-turn .arc-banner {margin-bottom: 16px;}
.arc-turn__lead {margin-bottom: 48px;text-align: center;}
.arc-phases {display: grid;grid-template-columns: 1fr 1fr;gap: 24px;}
.arc-phase {display: flex;flex-direction: column;overflow: hidden;border-radius: 16px;background: #fff;color: var(--arc-ink);box-shadow: 0 14px 36px rgb(40 12 40 / 18%);}
.arc-phase__card {display: flex;flex-direction: column;gap: 6px;padding: 28px 28px 8px;}
.arc-phase__card h3 {display: flex;align-items: center;gap: 12px;margin-bottom: 10px;font: 600 20px/1.25 Unbounded, sans-serif;}
.arc-phase__card .arc-num {background: #f4f3fa;}
/* сцена с картами одной высоты во всех фазах, карты по центру */
.arc-phase > .arc-fan, .arc-phase > img {align-self: center;margin-top: auto;}
.arc-phase > .arc-fan {--w: 150px !important;margin-bottom: 36px;}
.arc-fan[style*="--n:5"] {--gap: calc(var(--w) * .4);}
.arc-step > .arc-fan {justify-self: center !important;}
.arc-phase > img {width: 280px;margin-bottom: 24px;filter: drop-shadow(0 14px 24px rgb(30 10 30 / 25%));}

/* 9. Правила */
.arc-rules__grid {display: grid;grid-template-columns: 1fr 1fr;gap: 24px;margin-top: 24px;}
.arc-card {display: flex;flex-direction: column;align-items: flex-start;gap: 12px;padding: 28px;border-radius: 16px;background: #fff;color: var(--arc-ink);box-shadow: 0 10px 30px rgb(30 20 50 / 10%);}
.arc-card h3 {display: flex;align-items: center;gap: 10px;font: 600 20px/1.25 Unbounded, sans-serif;}
.arc-rules .arc-card .arc-gem {width: 26px;}
.arc-rules .arc-card {display: grid;grid-template-columns: minmax(0, 1fr) minmax(100px, 30%);align-items: center;gap: 24px;}
.arc-rule__copy {display: flex;flex-direction: column;align-items: flex-start;gap: 12px;}
.arc-rule__cover {display: block;transition: transform 180ms ease-out;}
.arc-rule__cover img {width: 100%;border-radius: 4px;box-shadow: 0 8px 18px rgb(30 20 50 / 18%);}
.arc-rule__cover:focus-visible {outline: 3px solid var(--arc-gold);outline-offset: 6px;border-radius: 4px;}
@media (hover: hover) and (pointer: fine) {.arc-rule__cover:hover {transform: translateY(-4px);}}
.arc-card .arc-btn {margin-top: 8px;}

/* 10. Компоненты */
.arc-parts {background: #cfe3c4;}
.arc-parts__grid {display: grid;grid-template-columns: 360px 1fr 1fr;align-items: center;gap: 40px;}
.arc-parts__grid > img {width: 360px;border-radius: 12px;}
.arc-list > div {display: grid;grid-template-columns: 48px 1fr;align-items: baseline;gap: 12px;padding: 10px 0;border-bottom: 1px solid rgb(23 22 29 / 12%);}
.arc-list dt {font: 600 16px/1.4 Unbounded, sans-serif;color: var(--arc-gold);}
.arc-parts__sub {margin: 24px 0 4px;}
.arc-total {margin-top: 48px;padding-top: 32px;border-top: 1px solid rgb(23 22 29 / 15%);}
.arc-stats--five {grid-template-columns: repeat(5, 1fr);gap: 24px;margin-top: 16px;}

/* 11. Дополнение */
.arc-addon__grid {display: grid;grid-template-columns: 360px 1fr;align-items: start;gap: 64px;}
.arc-addon__grid > div {display: flex;flex-direction: column;gap: 16px;}
.arc-addon__grid > div .arc-h2 {margin: 0;}
.arc-addon .arc-lead {font-size: 20px;}
.arc-addon__sub {margin-top: 8px;font: 600 16px/1.3 Unbounded, sans-serif;}
.arc-list--two {display: grid;grid-template-columns: 1fr 1fr;column-gap: 40px;}
.arc-addon .arc-list > div {border-color: rgb(255 255 255 / 14%);}
.arc-addon .arc-list dt {color: #ffe08a;}
.arc-addon__grid > img {filter: drop-shadow(0 24px 40px rgb(0 0 0 / 45%));}

/* 12. Тираны: слайдер */
.arc-tyrants {background: #c7d6ea;}
.arc-tyrants__head {display: flex;align-items: center;justify-content: space-between;gap: 24px;margin-bottom: 32px;}
.arc-tyrants__head .arc-h2 {margin: 0;}
.arc-arrows {display: flex;gap: 12px;}
.arc-arrow {display: grid;place-items: center;width: 48px;height: 48px;border: 1px solid var(--arc-ink);border-radius: 50%;background: #fff;cursor: pointer;}
.arc-arrow svg {width: 20px;height: 20px;fill: none;stroke: var(--arc-ink);stroke-width: 1.6;}
.arc-arrow:disabled {border-color: rgb(23 22 29 / 30%);background: transparent;cursor: default;}
.arc-arrow:disabled svg {stroke: rgb(23 22 29 / 40%);}
.arc-tyrants__track {display: grid;grid-auto-columns: calc((100% - 24px) / 2);grid-auto-flow: column;gap: 24px;overflow-x: auto;scroll-snap-type: x mandatory;scrollbar-width: none;}
.arc-tyrants__track::-webkit-scrollbar {display: none;}
.arc-tyrant {display: grid;grid-template-columns: 226px 1fr;align-items: center;gap: 28px;padding: 28px;border-radius: 16px;background: #fff;scroll-snap-align: start;}
.arc-tyrant__art {position: relative;width: 200px;padding: 0 0 36px 0;}
.arc-tyrant__art img {width: 200px;border-radius: 6px;box-shadow: 0 12px 22px rgb(20 20 40 / 25%);}
.arc-tyrant__art .arc-tyrant__card {position: absolute;right: -26px;bottom: 0;width: 96px;border-radius: 6px;transform: rotate(8deg);transition: transform .45s cubic-bezier(.2, 1.4, .4, 1);}
.arc-tyrant:hover .arc-tyrant__card {transform: rotate(-2deg) translate(10px, -18px) scale(1.5);}
.arc-parts__fan {display: flex;justify-content: center;margin-bottom: 24px;}
.arc-addon__fans {display: flex;flex-wrap: wrap;justify-content: center;gap: 8px 24px;margin-top: 16px;}
.arc-tyrant__text {display: flex;flex-direction: column;gap: 8px;}
.arc-tyrant h3 {font: 600 20px/1.25 Unbounded, sans-serif;}
.arc-tyrant__title {margin-top: -4px;color: var(--arc-gold);font: 500 13px/1.3 Rubik, sans-serif;}
.arc-tyrant__attack {margin-top: 4px;padding-top: 12px;border-top: 1px solid rgb(23 22 29 / 12%);font-weight: 500;}

/* 13. Видео */
.arc-video__grid {display: grid;grid-template-columns: 1.3fr 1fr;align-items: center;gap: 56px;}
.arc-video__grid > div:not(.arc-video__frame) {display: flex;flex-direction: column;align-items: flex-start;gap: 12px;}
.arc-video__grid .arc-h2 {margin: 0 0 8px;}
.arc-video__title {font: 600 20px/1.25 Unbounded, sans-serif;}
.arc-video__frame {position: relative;min-width: 0;overflow: hidden;aspect-ratio: 16 / 9;border-radius: 16px;background: #000;}
.arc-video__frame iframe {display: block;width: 100%;height: 100%;border: 0;}

/* 14. Галерея: сетка Pinterest, пропорции фото сохраняются */
.arc-gallery {background: #dedbeb;}
.arc-masonry {display: grid;grid-template-columns: repeat(4, 1fr);align-items: start;gap: 24px;margin-top: 24px;}
.arc-masonry--2 {display: none;grid-template-columns: 1fr 1fr;gap: 12px;}
.arc-masonry__col {display: flex;flex-direction: column;gap: 24px;}
.arc-masonry--2 .arc-masonry__col {gap: 12px;}
.arc-masonry__col > a[hidden] {display: none;}
.arc-shot {cursor: zoom-in;}
.arc-masonry a {display: block;}
.arc-masonry img {width: 100%;border-radius: 12px;}
.arc-gallery__more {cursor: pointer;background: none;display: flex;width: max-content;margin: 16px auto 0;}

/* 15. Сроки и доставка */
.arc-terms__grid {margin-top: 24px;}
.arc-terms__col {display: flex;flex-direction: column;gap: 24px;}
.arc-terms__col--row {display: grid;grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);align-items: start;}
.arc-card__eyebrow {display: inline-flex;align-items: center;gap: 8px;font-size: 13px;}
.arc-terms__date {font: 600 32px/1.15 Unbounded, sans-serif;color: var(--arc-gold);}
.arc-plan {width: 100%;list-style: none;}
.arc-plan li {display: flex;align-items: center;justify-content: space-between;gap: 16px;padding: 14px 0 14px 28px;border-bottom: 1px solid rgb(23 22 29 / 10%);position: relative;}
.arc-plan li::before {content: "";position: absolute;left: 2px;top: 50%;width: 12px;height: 12px;margin-top: -6px;border: 1.5px solid var(--arc-ink);border-radius: 50%;}
.arc-plan li.is-current::before {border-color: #c18a0e;background: #f0b32a;}
.arc-plan span {display: flex;flex-direction: column;gap: 2px;}
.arc-plan small {font-size: 13px;}
.arc-plan li > b, .arc-lot__price {white-space: nowrap;}

/* 16. Финал */
.arc-final {background: #f4f3fa;}
.arc-final__in {position: relative;isolation: isolate;overflow: hidden;display: flex;flex-direction: column;align-items: center;gap: 16px;padding: 72px 32px;border-radius: 20px;text-align: center;}
.arc-final__in > img {width: 220px;margin-bottom: 8px;filter: drop-shadow(0 18px 30px rgb(36 24 60 / 28%));}
.arc-final__title {font: 600 44px/1.1 Unbounded, sans-serif;}
.arc-final .arc-lead {font-size: 20px;}
.arc-final .arc-actions {margin-top: 8px;}

/* Анимация карт: раздача при появлении, веер рубашек, наклон за курсором. */
[data-arc-deal] {opacity: 0;transform: translateY(28px) rotate(-4deg) scale(.95);transition: opacity .7s var(--bz-ease, ease), transform .9s var(--bz-ease, ease);}
[data-arc-deal].is-in {opacity: 1;transform: none;}
[data-arc-fan] {transform-origin: 18% 92%;transform: rotate(-16deg) scale(.92);opacity: 0;transition: opacity .6s ease, transform 1.1s cubic-bezier(.2, 1.4, .4, 1);}
[data-arc-fan].is-in {opacity: 1;transform: none;}
[data-arc-reveal] {opacity: 0;transform: translateY(20px);transition: opacity .8s ease, transform .9s var(--bz-ease, ease);}
[data-arc-reveal].is-in {opacity: 1;transform: none;}
[data-arc-tilt] {transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));transition: transform .4s var(--bz-ease, ease);will-change: transform;}
[data-arc-tilt].is-tilting {transition: transform .08s linear;}

@media (prefers-reduced-motion: reduce) {
	.arc-hero__box {animation: none;}
	[data-arc-deal], [data-arc-fan], [data-arc-reveal] {opacity: 1;transform: none;transition: none;}
}

/* Прокрутка в «Как играть» и «Структуре хода»: арт поднимается, плашка опускается,
   текст шагов выезжает со своей стороны, карты раздаются и плывут с параллаксом. */
[data-arc-rise] {opacity: 0;transform: translateY(60px) scale(.94);transition: opacity .9s ease, transform 1.2s var(--bz-ease, ease);}
[data-arc-rise].is-in {opacity: 1;transform: none;}
[data-arc-drop] {opacity: 0;transform: translateY(-24px) scale(1.06);transition: opacity .6s ease .35s, transform .8s cubic-bezier(.2, 1.3, .4, 1) .35s;}
[data-arc-drop].is-in {opacity: 1;transform: none;}
[data-arc-slide] {opacity: 0;transform: translateX(var(--from, -48px));transition: opacity .7s ease, transform .9s var(--bz-ease, ease);}
[data-arc-slide="right"] {--from: 48px;}
[data-arc-slide].is-in {opacity: 1;transform: none;}
[data-arc-slide] .arc-num {transform: scale(.4) rotate(-20deg);transition: transform .6s cubic-bezier(.2, 1.6, .4, 1) .35s;}
[data-arc-slide].is-in .arc-num {transform: none;}
[data-arc-parallax] {translate: 0 var(--py, 0px);}
@media (prefers-reduced-motion: reduce) {
	[data-arc-rise], [data-arc-drop], [data-arc-slide], [data-arc-slide] .arc-num {opacity: 1;transform: none;transition: none;}
	[data-arc-parallax] {translate: none;}
}

/* Веер настоящих карт в «Структуре хода»: при появлении карты разлетаются из стопки,
   по наведению веер раскрывается шире, жетоны падают сверху. */
.arc-fan {--w: 170px;--ar: 1.4;--gap: calc(var(--w) * .54);position: relative;justify-self: center;width: calc(var(--w) + (var(--n) - 1) * var(--gap) + 40px);height: calc(var(--w) * var(--ar) + 80px);}
.arc-fan__card {position: absolute;left: 50%;top: 30px;width: var(--w);margin-left: calc(var(--w) / -2);border-radius: calc(var(--w) * .05);box-shadow: 0 14px 28px rgb(30 10 30 / 32%);transform-origin: 50% 120%;
	--x: calc((var(--i) - (var(--n) - 1) / 2) * var(--gap));--r: calc((var(--i) - (var(--n) - 1) / 2) * 9deg);
	transform: translateX(0) rotate(0) translateY(40px) scale(.9);opacity: 0;
	transition: transform .9s cubic-bezier(.2, 1.25, .35, 1) calc(var(--i) * 110ms), opacity .4s ease calc(var(--i) * 110ms);}
.arc-fan.is-in .arc-fan__card {opacity: 1;transform: translateX(var(--x)) rotate(var(--r));}
.arc-fan__card {padding: 0;border: 0;background: transparent;cursor: pointer;touch-action: manipulation;}
.arc-fan__card img {width: 100%;border-radius: inherit;}
@media (hover: hover) and (pointer: fine) {
	.arc-fan.is-in:hover .arc-fan__card {transform: translateX(calc(var(--x) * 1.25)) rotate(calc(var(--r) * 1.4)) translateY(-6px);transition-delay: 0s;}
	.arc-fan.is-in .arc-fan__card:hover {transform: translateX(calc(var(--x) * 1.25)) rotate(0) translateY(-22px) scale(1.06);z-index: 5;}
}
.arc-fan.is-in .arc-fan__card.is-selected, .arc-fan.is-in .arc-fan__card:focus-visible {transform: translateX(var(--x)) rotate(0) translateY(-18px) scale(1.06);z-index: 5;transition-duration: 180ms;transition-delay: 0s;}
.arc-fan__card:focus-visible {outline: 3px solid var(--arc-gold);outline-offset: 4px;}
.arc-fan__token {position: absolute;z-index: 6;width: 30px;left: calc(50% + (var(--k) - 1.5) * 34px);bottom: 4px;opacity: 0;transform: translateY(-120px) rotate(-40deg);
	transition: transform .7s cubic-bezier(.3, 1.5, .5, 1) calc(.5s + var(--k) * 90ms), opacity .3s ease calc(.5s + var(--k) * 90ms);filter: drop-shadow(0 4px 4px rgb(0 0 0 / 30%));}
.arc-fan.is-in .arc-fan__token {opacity: 1;transform: rotate(calc(var(--k) * 23deg - 20deg));}
@media (prefers-reduced-motion: reduce) {.arc-fan__card, .arc-fan__token {transition: none;}}
@media (max-width: 900px) {
	.arc-fan {--w: 112px !important;--gap: clamp(24px, 8vw, 44px);max-width: 100%;height: calc(var(--w) * var(--ar) + 110px);}
	.arc-parts .arc-parts__fan .arc-fan {--w: 112px !important;--ar: 1.4 !important;}
	.arc-fan__token {pointer-events: none;z-index: 0;left: calc(50% + (var(--k) - (var(--tokens, 2) - 1) / 2) * 34px - 15px);bottom: 10px;transform: translateY(-20px) rotate(-20deg);}
	.arc-fan[style*="--ar:0.7"] {--w: 150px !important;}
	.arc-step, .arc-phases, .arc-lots, .arc-about__grid {grid-template-columns: minmax(0, 1fr) !important;}
	.arc-step {gap: 16px;}
	.arc-step__text {font-size: 17px;}
	.arc-step > img {max-width: 100%;}
	.arc-actions {flex-wrap: nowrap;gap: 8px;width: 100%;}
	.arc-actions .arc-btn {flex: 1 1 auto;padding: 0 14px;font-size: 15px;}
	/* «Особенности игры»: одна карточка на экран, листаются пальцем */
	.arc-features__grid {grid-template-columns: none !important;grid-auto-flow: column;grid-auto-columns: 86%;gap: 16px;margin-inline: -16px;padding: 0 16px 4px;overflow-x: auto;scroll-snap-type: x mandatory;scroll-padding-inline: 16px;scrollbar-width: none;}
	.arc-features__grid::-webkit-scrollbar {display: none;}
	.arc-features article {scroll-snap-align: start;}
	/* «Всего в коробке»: две строки — 3 + 2 */
	.arc-stats--five {grid-template-columns: repeat(3, 1fr) !important;gap: 20px 12px;}
	.arc-stats--five dt {font-size: 40px;}
}

@media (max-width: 1100px) {
	.arc-lots--three {grid-template-columns: 1fr 1fr;}
	.arc-lots--three .arc-installment {grid-column: 1 / -1;}
	.arc-features__grid {grid-template-columns: 1fr 1fr;}
	.arc-parts__grid {grid-template-columns: 1fr 1fr;}
	.arc-parts__grid > img {grid-row: span 2;}
	.arc-stats--five {grid-template-columns: repeat(3, 1fr);}
	.arc-tyrants__track {grid-auto-columns: 100%;}
}
@media (max-width: 900px) {
	/* Shared landing CSS fixes the nav; keep its space above the mobile hero. */
	body:has(main.arc) > .site-nav {position: sticky;}
	.arc-wrap {padding-inline: 16px;}
	.arc-sec {padding-block: 64px;}
	.arc-h2 {font-size: 26px;}
	.arc-hero {height: auto;min-height: 0;}
	.arc-hero__in {width: 100%;gap: 14px;padding: 32px 20px 48px;}
	.arc-hero__box {width: clamp(148px, 38vw, 210px);animation: none;}
	.arc-hero__art {position: absolute;inset: 32px 0 auto;width: 100%;height: auto;opacity: .5;}
	.arc-hero__title, .arc-final__title {font-size: 32px;}
	.arc-hero__lead {font-size: 17px;}
	.arc-about__grid, .arc-shop__head, .arc-lots, .arc-magic__grid, .arc-step, .arc-rules__grid, .arc-addon__grid, .arc-video__grid, .arc-terms__grid {grid-template-columns: 1fr;}
	.arc-stats {grid-template-columns: 1fr 1fr;gap: 24px;}
	.arc-stats dt {font-size: 40px;}
	.arc-lot__cover {height: 300px;}
	.arc-lots--three .arc-installment {padding: 20px;}
				.arc-terms__col--row {grid-template-columns: 1fr;}
	.arc-final__in {padding: 48px 20px;}
	.arc-lot__boxes {transform: scale(.8);}
	.arc-label {right: auto;left: 16px;top: 56px;}
	.arc-noai {padding-bottom: 40px;}
	.arc-magic {padding-bottom: 24px;}
	.arc-noai__plate {grid-template-columns: 1fr;gap: 24px;padding: 24px 20px;}
	.arc-noai__backs {width: 84px;}
	.arc-noai__title {font-size: 22px;}
	.arc-noai__text p:not(.arc-noai__title) {font-size: 15px;line-height: 1.45;}
	.arc-noai__shot {transform: rotate(-1.5deg);}
	.arc-banner__art--swords {width: 300px;}
	.arc-banner__art--tower {width: 100%;}
	.arc-titlebox {padding: 18px 32px;font-size: 24px;}
	.arc-phases {grid-template-columns: 1fr;}
	.arc-phase--flip .arc-phase__card, .arc-step:nth-child(even) .arc-step__texts {order: 0;}
	.arc-step__texts, .arc-step > img {justify-self: start !important;}
	/* планшеты убраны: в фазах остаются только целые карты */
.arc-phase > img.arc-phase__bleed-left {margin-left: -16px;}
	.arc-parts__grid {grid-template-columns: 1fr;}
	.arc-parts__grid > img {width: min(100%, 360px);}
	.arc-stats--five {grid-template-columns: 1fr 1fr;}
	.arc-addon__grid > img {width: min(70%, 300px);}
	.arc-list--two {grid-template-columns: 1fr;}
	.arc-tyrant {grid-template-columns: 1fr;justify-items: center;}
	.arc-tyrant__art {width: 200px;}
	.arc-masonry--4 {display: none;}
	.arc-masonry--2 {display: grid;}
}
@media (max-width: 600px) {
	.arc-rules .arc-card {grid-template-columns: minmax(0, 1fr) clamp(76px, 24vw, 120px);gap: 16px;padding: 20px;}
	.arc-rules .arc-card h3 {font-size: 18px;}
	.arc-rules .arc-btn {padding-inline: 16px;font-size: 14px;}
}