/* Официальный магазин игры: окно внутриигрового магазина, перенесённое в браузер —
   тёмный камень, медные рамки и кнопки, золотые бейджи бонуса, кристаллы — главный цвет. Вся графика — из игры. */
:root {
  --bg: #0a0d14; --panel: #12161f; --line: rgba(214,189,143,.18);
  --cream: #f2e6c4; --gold: #d6bd8f; --muted: #9a9da6; --ink: #2a1a10;
  --copper: #d08a5a; --copper-hi: #f0b88a; --badge: #f2c14e; --ice: #72d6ff; --ember: #ff6a2b;
  --display: Friz, 'Times New Roman', serif; --word: Cinzel, Friz, serif; --body: Rubik, system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--cream); font: 15px/1.55 var(--body); }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.wrap { width: min(1240px, 100%); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* ---------- кнопки: медная плашка и тёмная плашка из игры ---------- */
/* у Friz буквы и цифры сидят выше середины строки (~0.12em) — отступ сверху .24em ставит их по центру плашки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: .24em 30px 0; cursor: pointer; white-space: nowrap;
  font: 19px/1 var(--display); border: 12px solid transparent; background: none; transition: filter .15s, transform .1s; }
.btn.copper { color: var(--ink); border-image: url(../img/ld_btn_copper.png) 24 fill / 12px stretch; text-shadow: 0 1px 0 rgba(255,220,180,.45); }
.btn.dark { color: var(--cream); border-image: url(../img/ld_btn_dark.png) 30 fill / 12px stretch; }
.btn:hover { filter: brightness(1.1); } .btn:active { transform: translateY(1px); }
.btn.sm { min-height: 40px; padding: .24em 16px 0; font-size: 16px; border-width: 9px; border-image-width: 9px; }
.btn.lg { min-height: 60px; padding: .24em 40px 0; font-size: 24px; }
.badge { display: inline-grid; place-items: center; min-width: 58px; height: 22px; padding: 0 10px; background: url(../img/ld_promo.png) center / 100% 100%;
  font: 600 13px/1 var(--body); color: var(--ink); }

/* ---------- верхняя панель ---------- */
.top { position: sticky; top: 0; z-index: 30; background: linear-gradient(rgba(5,7,11,.96), rgba(5,7,11,.88)); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.top .wrap { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(214,189,143,.4), 0 4px 10px rgba(0,0,0,.6); }
.brand b { display: block; font: 700 19px/1 var(--word); letter-spacing: .06em; background: linear-gradient(#fff3d6, #d6a86a 70%, #a26a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small { display: block; margin-top: 4px; font: 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.menu { display: flex; gap: 24px; font: 15px var(--display); color: var(--gold); }
.menu a:hover { color: var(--cream); }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.wallet { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 10px; border-radius: 20px; background: #050608; box-shadow: inset 0 0 0 1px rgba(214,189,143,.25); font: 17px var(--display); }
.wallet img { width: 22px; height: 26px; }

/* ---------- главный экран ---------- */
.hero { position: relative; overflow: hidden; background: #0b1018 url(../img/ld_hall.jpg) 50% 30% / cover; border-bottom: 1px solid var(--line); }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,8,13,.92) 0%, rgba(6,8,13,.6) 38%, rgba(6,8,13,0) 60%), linear-gradient(0deg, rgba(10,13,20,1) 0%, rgba(10,13,20,0) 24%); z-index: 1; pointer-events: none; }
.hero .king { position: absolute; right: 0; top: 0; width: 66%; height: 100%; object-fit: cover; object-position: 62% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
.hero .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: 600px; padding-block: 56px 72px; }
.kick { display: flex; align-items: center; gap: 12px; font: 13px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.kick::before { content: ''; width: 36px; height: 1px; background: currentColor; }
.hero h1 { max-width: 560px; margin: 18px 0 16px; font: 56px/1.04 var(--display); font-weight: 400; color: #fff6e0; text-wrap: balance; text-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 30px rgba(0,0,0,.6); }
.hero p { max-width: 480px; margin: 0 0 26px; font-size: 17px; color: #ddd5c4; text-shadow: 0 1px 3px #000; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.offer { display: flex; align-items: center; gap: 16px; max-width: 540px; margin-top: 34px; padding: 12px 14px 12px 8px; background: linear-gradient(90deg, rgba(6,8,13,.85), rgba(6,8,13,.35)); border-left: 2px solid var(--badge); }
.offer img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.offer > div { flex: 1; min-width: 0; }
.offer .t { white-space: nowrap; font: 13px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--badge); }
.offer .n { font: 21px/1.2 var(--display); color: #fff6e0; }
.offer .s { font-size: 13px; color: var(--muted); }
.offer .btn { margin-left: auto; }

/* ---------- полоса преимуществ ---------- */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: -1px; border-bottom: 1px solid var(--line); background: #0d1119; }
.perks > div { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.perks > div + div { border-left: 1px solid var(--line); }
.perks svg { flex: 0 0 34px; width: 34px; height: 34px; color: var(--copper-hi); }
.perks b { display: block; font: 15px var(--display); font-weight: 400; color: var(--cream); }
.perks span { font-size: 13px; color: var(--muted); }

/* ---------- разделы ---------- */
section { position: relative; padding: 72px 0 40px; scroll-margin-top: 72px; }
.sh { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.sh h2 { margin: 0; font: 34px/1 var(--display); font-weight: 400; color: #fff6e0; text-transform: uppercase; letter-spacing: .03em; }
.sh::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, rgba(208,138,90,.8), rgba(208,138,90,0)); }
.sh small { font-size: 14px; color: var(--muted); }

/* ---------- кристаллы: как экран магазина в игре ---------- */
#crystals { background: linear-gradient(rgba(10,13,20,.86), rgba(10,13,20,.94)), url(../img/ld_stone.jpg) 50% 50% / cover; }
.shop { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* рамка плитки — чистая перерисовка игровой (в игре у спрайта завитки внахлёст и он мыльный), целиком в родных пропорциях 896×1200 */
.tile { position: relative; aspect-ratio: 896 / 1200; display: flex; flex-direction: column; align-items: center; padding: 0; cursor: pointer; text-align: center;
  border: 0; background: #11161e url(../img/ld_tile.jpg) center / 100% 100% no-repeat; transition: transform .15s, filter .15s; }
.tile:hover { transform: translateY(-3px); filter: brightness(1.08); }
.tile.on { filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 14px rgba(242,193,78,.55)); }
.tile.on::after { content: ''; position: absolute; inset: 2px; border: 2px solid rgba(242,193,78,.9); pointer-events: none; }
.tile .badge { position: absolute; top: 6%; right: 10%; }
/* --s: размер набора в плитке (два кристалла чуть меньше, сундук крупнее) */
.tile .ic { flex: 1; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16% 9% 2%; }
.tile .ic img { width: calc(84% * var(--s, 1)); max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); }
.tile .amt { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; font: 22px/1 var(--display); color: #fff6e0; }
.tile .amt img { width: 16px; height: 19px; }
.tile .btn { width: 74%; margin-bottom: 10%; }

.detail { position: sticky; top: 92px; padding: 6px 8px 10px; text-align: center; border: 34px solid transparent; border-image: url(../img/ld_window.png) 110 fill / 44px stretch; filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); }
.detail .k { font: 14px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.detail h3 { margin: 8px 0 4px; font: 30px/1.1 var(--display); font-weight: 400; color: #fff6e0; text-transform: uppercase; }
.detail .s { color: var(--muted); font-size: 14px; }
.detail .s b { color: var(--badge); font-weight: 500; }
.detail hr { border: 0; height: 1px; margin: 16px 10% 0; background: linear-gradient(90deg, transparent, rgba(214,189,143,.45), transparent); }
.stage { position: relative; height: 290px; margin: 6px -10px 0; }
.stage .ped { position: absolute; left: 50%; bottom: 0; width: 92%; transform: translateX(-50%); }
.stage .pk { position: absolute; left: 50%; bottom: 62px; width: calc(200px * var(--s, 1)); transform: translateX(-50%); filter: drop-shadow(0 12px 14px rgba(0,0,0,.6)); animation: float 4s ease-in-out infinite; }
.stage .pk.wide { width: calc(232px * var(--s, 1)); bottom: 46px; }
@keyframes float { 50% { transform: translate(-50%, -8px); } }
.detail p { margin: 10px 4px 16px; font-size: 14px; color: #cfc8b8; }
.detail .btn { width: 100%; }

/* ---------- боевой пропуск ---------- */
.pass { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 420px; overflow: hidden;
  background: url(../img/ld_castle.jpg) 50% 60% / cover; border: 1px solid var(--line); }
.pass::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,8,13,.94) 0%, rgba(6,8,13,.7) 42%, rgba(6,8,13,.05) 70%); }
.pass > * { position: relative; }
.pass .txt { padding: 40px 44px; }
.pass .logo { width: min(340px, 100%); filter: drop-shadow(0 3px 0 rgba(0,0,0,.6)); }
.pass .prem { margin: 4px 0 16px; font: 26px var(--display); letter-spacing: .08em; color: var(--gold); text-transform: uppercase; }
.pass ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.pass li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: #e8e1d2; }
.pass li img { width: 22px; height: 21px; }
.pass .row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pass .price { font: 30px var(--display); color: #fff6e0; } .pass .price small { font: 14px var(--body); color: var(--muted); margin-left: 6px; }
.pass .fine { margin-top: 12px; font-size: 12px; color: var(--muted); }
.pass .promo { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 14px 6px; background: rgba(242,193,78,.1); border: 1px solid rgba(242,193,78,.45); font: 15px var(--display); color: var(--badge); }
.pass .chest { justify-self: center; align-self: end; width: min(360px, 82%); margin-bottom: 62px; filter: drop-shadow(0 18px 20px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(255,170,80,.25)); }

/* ---------- Battle Pass: скины из сундуков и награды по уровням ---------- */
.sub { margin-top: 54px; }
.subh { margin: 0 0 6px; font: 26px/1.15 var(--display); font-weight: 400; color: #fff6e0; }
.lede { max-width: 680px; margin: 0 0 18px; color: var(--muted); }
.odds { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.odds span { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 7px; background: #10141c; border: 1px solid var(--line); font: 15px var(--display); color: #fff6e0; }
.odds i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--c); box-shadow: 0 0 8px var(--c); }
.odds b { font-weight: 400; color: var(--c); }
.odds small { font: 13px var(--body); color: var(--muted); }
/* сверху — легендарный, эпический и редкий крупно, ниже — 7 обычных в ряд */
.drops { display: grid; gap: 40px; }
.top3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; align-items: end; width: min(100%, 660px); margin: 0 auto; }
.commons { display: grid; grid-template-columns: repeat(7, 1fr); gap: 22px 12px; }
.skin { display: flex; flex-direction: column; align-items: center; text-align: center; }
.skin .gcard { width: min(100%, 150px); transition: transform .25s; }
.top3 .skin .gcard { width: min(100%, 168px); } .top3 .skin.leg .gcard { width: min(100%, 196px); }
.commons .skin .gcard { width: min(100%, 112px); }
.skin:hover .gcard { transform: translateY(-5px); }
.skin[role="button"] { cursor: pointer; }
.skin[role="button"]:focus-visible { outline: none; } .skin[role="button"]:focus-visible .nm { text-decoration: underline; text-underline-offset: 4px; }
.skin .see { margin-top: 6px; font: 12px var(--body); color: var(--copper-hi); opacity: 0; transition: opacity .2s; }
.skin:hover .see, .skin:focus-visible .see { opacity: 1; }
/* легендарный: за рамкой медленно вращаются золотые лучи и дышит свечение, по картинке пробегает блик */
.skin.leg .gcard { isolation: isolate; }
.skin.leg .gcard::before { content: ''; position: absolute; left: 50%; top: 44%; width: 210%; aspect-ratio: 1; z-index: -1; pointer-events: none;
  background: url(../img/fx_rays_gold.png) center / contain no-repeat; animation: legrays 26s linear infinite; opacity: 1; filter: brightness(1.35); }
.skin.leg .gcard::after { content: ''; position: absolute; left: 50%; top: 46%; width: 150%; aspect-ratio: 1; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,210,110,.85), rgba(255,150,40,.32) 55%, transparent 76%); animation: legglow 2.8s ease-in-out infinite alternate; }
.skin.leg .gcard .fr { animation: legrim 2.8s ease-in-out infinite alternate; }
@keyframes legrim { from { filter: drop-shadow(0 0 6px rgba(255,200,90,.7)) drop-shadow(0 10px 18px rgba(0,0,0,.7)); } to { filter: drop-shadow(0 0 14px rgba(255,205,100,1)) drop-shadow(0 0 30px rgba(255,150,40,.7)); } }
.skin.leg .gcard .art > i::before { content: ''; position: absolute; inset: -20% -70%; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 42%, rgba(255,226,160,.45) 48%, rgba(255,250,235,.9) 50%, rgba(255,226,160,.45) 52%, transparent 58%);
  transform: translateX(-60%); animation: legshine 5s ease-in-out infinite; }
@keyframes legrays { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes legglow { from { opacity: .5; transform: translate(-50%, -50%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes legshine { 0%, 55% { transform: translateX(-60%); } 80%, 100% { transform: translateX(60%); } }

/* ---------- окно с артом скина ---------- */
.sk-overlay { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; background: rgba(3,5,9,.86); opacity: 0; transition: opacity .25s; }
.sk-overlay.open { opacity: 1; }
/* закрытое окно не должно лежать поверх страницы: display: grid выше перебивал атрибут hidden и слой ловил все клики */
.sk-overlay[hidden] { display: none; }
.sk-modal { position: relative; width: min(940px, 100%); max-height: calc(100vh - 32px); overflow: hidden auto; border: 26px solid transparent; border-image: url(../img/ld_window.png) 110 fill / 38px stretch;
  transform: translateY(14px) scale(.98); transition: transform .3s; }
.sk-overlay.open .sk-modal { transform: none; }
.sk-modal[data-r="legendary"] { filter: drop-shadow(0 0 22px rgba(242,193,78,.45)); }
.sk-art { position: relative; aspect-ratio: 16 / 9; margin: -6px -6px 0; overflow: hidden; background: #0b0f16; }
.sk-art img { width: 100%; height: 100%; object-fit: cover; display: block; animation: skzoom 12s ease-out both; }
.sk-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,17,24,.95) 0%, rgba(14,17,24,0) 34%); pointer-events: none; }
@keyframes skzoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.sk-info { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: -86px; padding: 0 14px 6px; }
.sk-info .rar { font: 13px var(--body); letter-spacing: .14em; text-transform: uppercase; }
.sk-info h3 { margin: 4px 0 4px; font: 40px/1 var(--display); font-weight: 400; color: #fff6e0; text-shadow: 0 2px 0 #000, 0 0 18px rgba(0,0,0,.8); }
.sk-info p { margin: 0; color: #d7d0c0; font-size: 15px; text-shadow: 0 1px 2px #000; }
.sk-close { position: absolute; right: 2px; top: 2px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(214,189,143,.4); cursor: pointer; font-size: 24px; line-height: 1; color: var(--cream); background: rgba(6,8,13,.75); }
@media (prefers-reduced-motion: reduce) { .skin.leg .gcard::before, .skin.leg .gcard::after, .skin.leg .gcard .art > i::before, .skin.leg .gcard .fr, .sk-art img { animation: none; } }
.skin .nm { margin-top: 10px; font: 17px/1.2 var(--display); color: #fff6e0; }
.commons .skin .nm { font-size: 15px; }
.skin .un { margin-top: 2px; font-size: 13px; color: var(--muted); }
.skin .rar { margin-top: 5px; font: 12px var(--body); letter-spacing: .12em; text-transform: uppercase; }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.rule { padding: 16px 18px; background: linear-gradient(#141923, #0f131b); border: 1px solid var(--line); }
.rule b { display: block; margin-bottom: 4px; font: 17px var(--display); font-weight: 400; color: #fff6e0; }
.rule span { font-size: 14px; color: var(--muted); }
.track { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 16px; scroll-snap-type: x proximity; scrollbar-color: #5a4330 #10141c; }
.lv { flex: 0 0 108px; scroll-snap-align: start; text-align: center; }
.lv .gcard { width: 108px; }
.lv .gcard .n { position: absolute; left: 0; right: 0; top: 90.2%; transform: translateY(-50%); font: 16px/1 var(--display); color: #fff; text-shadow: 0 1px 0 #000, 0 0 6px #000; padding-top: .2em; }
.lv .t { margin-top: 8px; font-size: 13px; line-height: 1.3; color: #e2dccd; }
.lv.gap { flex-basis: 30px; align-self: center; color: var(--muted); font: 22px var(--display); }
.totals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.totals span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 7px; background: #10141c; border: 1px solid var(--line); font: 15px var(--display); color: #fff6e0; }
.totals img { width: 16px; height: 19px; }
.note { margin: 14px 0 0; color: var(--muted); font-size: 14px; max-width: 760px; }

/* игровые рамки карточек (как в «У моря»): картинка обрезана по окну рамки, чтобы не торчала серая рамка иконки */
.gcard { position: relative; aspect-ratio: var(--ar, .536); }
.gcard .art { position: absolute; inset: 0; clip-path: var(--cp); }
/* картинка с запасом шире окна рамки, а clip-path обрезает её по форме окна (контур окна + 4px под рамку).
   Не маска-картинка: при открытии страницы из папки (file://) браузер маску не грузит и прячет всё */
.gcard .art > i { position: absolute; inset: var(--in, 13% 7% 23.5% 7%); overflow: hidden; background: radial-gradient(circle at 50% 40%, var(--rc), #0b0f16 75%); }
/* у иконок своя серая рамка ~7px из 320 — картинка чуть выше окна, чтобы эта рамка ушла под край */
.gcard .art img { position: absolute; left: 0; top: -3.5%; width: 100%; height: 107%; object-fit: cover; }
.gcard .art > i::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 26px rgba(0,0,0,.85); }
.gcard .fr { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
.gcard[data-r="legendary"] { --in: 16% 10.5% 28% 10.5%; --rc: rgba(255,150,50,.6); }
.gcard[data-r="legendary"] { --cp: polygon(41.9% 17.2%, 30.7% 18.5%, 24.7% 19.7%, 20.3% 21.0%, 17.8% 22.2%, 15.6% 23.5%, 14.2% 24.7%, 13.2% 26.0%, 12.6% 27.2%, 12.1% 28.5%, 12.1% 29.8%, 11.8% 31.0%, 11.8% 32.3%, 11.8% 33.5%, 11.8% 34.8%, 11.8% 36.0%, 11.8% 37.3%, 11.8% 38.5%, 11.8% 39.8%, 11.8% 41.1%, 11.8% 42.3%, 11.8% 43.6%, 11.8% 44.8%, 12.1% 46.1%, 11.8% 47.3%, 11.8% 48.6%, 11.5% 49.9%, 11.5% 51.1%, 11.8% 52.4%, 11.8% 53.6%, 11.5% 54.9%, 11.5% 56.1%, 11.5% 57.4%, 11.8% 58.6%, 11.8% 59.9%, 12.1% 61.2%, 12.6% 62.4%, 13.7% 63.7%, 15.1% 64.9%, 17.3% 66.2%, 20.5% 67.4%, 23.8% 68.7%, 27.4% 69.9%, 33.4% 71.4%, 66.0% 71.4%, 73.2% 69.9%, 76.4% 68.7%, 80.0% 67.4%, 83.0% 66.2%, 85.2% 64.9%, 86.3% 63.7%, 87.4% 62.4%, 87.9% 61.2%, 88.2% 59.9%, 87.7% 58.6%, 87.7% 57.4%, 87.7% 56.1%, 87.7% 54.9%, 87.7% 53.6%, 87.7% 52.4%, 88.2% 51.1%, 88.5% 49.9%, 88.5% 48.6%, 88.5% 47.3%, 88.5% 46.1%, 88.2% 44.8%, 88.2% 43.6%, 88.2% 42.3%, 88.2% 41.1%, 88.2% 39.8%, 88.2% 38.5%, 88.2% 37.3%, 88.2% 36.0%, 88.2% 34.8%, 88.2% 33.5%, 88.2% 32.3%, 88.2% 31.0%, 87.9% 29.8%, 87.7% 28.5%, 87.4% 27.2%, 86.8% 26.0%, 85.8% 24.7%, 84.4% 23.5%, 81.9% 22.2%, 79.5% 21.0%, 75.1% 19.7%, 69.3% 18.5%, 57.3% 17.2%); }
.gcard[data-r="epic"] { --rc: rgba(180,107,255,.55); }
.gcard[data-r="epic"] { --cp: polygon(36.1% 14.2%, 27.9% 15.7%, 21.9% 17.0%, 15.0% 18.4%, 11.5% 19.9%, 9.8% 21.2%, 9.3% 22.7%, 9.0% 24.2%, 9.0% 25.5%, 9.0% 26.9%, 9.0% 28.4%, 9.0% 29.7%, 9.0% 31.2%, 9.3% 32.7%, 9.3% 34.0%, 9.3% 35.4%, 9.3% 36.9%, 8.7% 38.2%, 8.7% 39.7%, 8.7% 41.1%, 8.7% 42.5%, 8.7% 43.9%, 8.7% 45.4%, 8.7% 46.9%, 8.7% 48.2%, 8.7% 49.6%, 8.7% 51.1%, 8.7% 52.4%, 8.7% 53.9%, 8.7% 55.3%, 8.7% 56.7%, 8.7% 58.1%, 8.7% 59.6%, 8.7% 60.9%, 9.0% 62.4%, 9.3% 63.8%, 9.8% 65.2%, 9.8% 66.6%, 10.9% 68.1%, 12.8% 69.4%, 16.1% 70.9%, 22.7% 72.3%, 31.7% 73.6%, 46.2% 75.3%, 55.7% 75.3%, 68.6% 73.6%, 78.7% 72.3%, 88.5% 70.9%, 86.9% 69.4%, 88.8% 68.1%, 90.7% 66.6%, 91.0% 65.2%, 91.5% 63.8%, 91.8% 62.4%, 91.8% 60.9%, 91.8% 59.6%, 91.5% 58.1%, 91.5% 56.7%, 91.8% 55.3%, 91.8% 53.9%, 91.8% 52.4%, 91.8% 51.1%, 91.8% 49.6%, 91.8% 48.2%, 91.3% 46.9%, 91.0% 45.4%, 91.0% 43.9%, 91.0% 42.5%, 91.5% 41.1%, 91.5% 39.7%, 91.5% 38.2%, 91.5% 36.9%, 91.3% 35.4%, 91.3% 34.0%, 91.3% 32.7%, 91.3% 31.2%, 91.3% 29.7%, 91.3% 28.4%, 91.3% 26.9%, 91.3% 25.5%, 91.0% 24.2%, 90.7% 22.7%, 90.4% 21.2%, 89.1% 19.9%, 86.1% 18.4%, 80.3% 17.0%, 73.8% 15.7%, 41.3% 14.2%); }
/* обычная рамка — богаче, серебро с рунами (нарисована по игровой обычной), окно чуть шире */
.gcard[data-r="common"] { --rc: rgba(195,201,211,.35); --in: 14% 9.5% 23% 9%; }
.gcard[data-r="common"] { --cp: polygon(36.6% 15.1%, 26.5% 16.5%, 19.9% 17.9%, 14.8% 19.3%, 12.0% 20.8%, 10.7% 22.1%, 10.1% 23.6%, 10.1% 24.9%, 10.1% 26.4%, 9.8% 27.8%, 9.8% 29.1%, 9.8% 30.6%, 9.8% 32.1%, 9.8% 33.4%, 9.8% 34.8%, 9.8% 36.2%, 9.8% 37.6%, 9.8% 39.1%, 9.8% 40.4%, 9.8% 41.9%, 9.8% 43.3%, 9.8% 44.7%, 9.8% 46.1%, 9.8% 47.4%, 9.8% 48.9%, 9.8% 50.4%, 9.8% 51.7%, 9.8% 53.1%, 9.8% 54.6%, 9.8% 55.9%, 9.8% 57.4%, 9.8% 58.7%, 9.8% 60.2%, 9.8% 61.6%, 9.8% 63.0%, 10.1% 64.4%, 10.4% 65.9%, 11.2% 67.2%, 12.6% 68.7%, 14.8% 70.0%, 18.0% 71.4%, 24.6% 72.9%, 34.7% 74.2%, 48.6% 75.8%, 51.4% 75.8%, 65.3% 74.2%, 75.4% 72.9%, 82.0% 71.4%, 85.2% 70.0%, 87.4% 68.7%, 88.8% 67.2%, 89.6% 65.9%, 89.9% 64.4%, 89.9% 63.0%, 89.9% 61.6%, 89.9% 60.2%, 89.9% 58.7%, 89.9% 57.4%, 89.9% 55.9%, 89.9% 54.6%, 89.9% 53.1%, 89.9% 51.7%, 89.9% 50.4%, 89.9% 48.9%, 89.9% 47.4%, 89.9% 46.1%, 89.9% 44.7%, 89.9% 43.3%, 89.9% 41.9%, 89.9% 40.4%, 89.9% 39.1%, 89.9% 37.6%, 89.9% 36.2%, 89.9% 34.8%, 89.9% 33.4%, 89.9% 32.1%, 89.9% 30.6%, 89.9% 29.1%, 89.9% 27.8%, 89.9% 26.4%, 89.9% 24.9%, 89.9% 23.6%, 89.1% 22.1%, 87.7% 20.8%, 85.2% 19.3%, 80.1% 17.9%, 73.5% 16.5%, 63.4% 15.1%); }
.gcard[data-r="rare"] { --rc: rgba(224,161,106,.45); }
.gcard[data-r="rare"] { --cp: polygon(38.0% 14.2%, 28.1% 15.7%, 22.4% 17.0%, 15.3% 18.4%, 11.5% 19.9%, 9.3% 21.4%, 8.5% 22.7%, 8.5% 24.2%, 8.5% 25.6%, 8.5% 27.1%, 8.5% 28.4%, 8.5% 29.9%, 8.5% 31.3%, 8.5% 32.8%, 8.5% 34.1%, 8.5% 35.6%, 8.5% 37.0%, 8.5% 38.5%, 8.5% 39.8%, 8.5% 41.3%, 8.5% 42.8%, 8.5% 44.2%, 8.5% 45.5%, 8.2% 47.0%, 8.2% 48.5%, 8.2% 49.9%, 8.2% 51.2%, 8.2% 52.7%, 8.2% 54.2%, 8.2% 55.6%, 8.2% 57.0%, 8.2% 58.4%, 8.2% 59.9%, 8.2% 61.3%, 8.2% 62.7%, 8.5% 64.1%, 8.7% 65.6%, 9.3% 67.1%, 10.1% 68.4%, 12.0% 69.8%, 15.6% 71.3%, 21.3% 72.8%, 30.3% 74.1%, 53.0% 75.7%, 53.3% 75.7%, 69.4% 74.1%, 79.8% 72.8%, 84.4% 71.3%, 87.2% 69.8%, 89.3% 68.4%, 90.4% 67.1%, 91.3% 65.6%, 91.5% 64.1%, 91.8% 62.7%, 91.8% 61.3%, 92.1% 59.9%, 91.5% 58.4%, 91.5% 57.0%, 92.1% 55.6%, 91.8% 54.2%, 91.8% 52.7%, 91.8% 51.2%, 91.8% 49.9%, 91.8% 48.5%, 91.8% 47.0%, 91.5% 45.5%, 91.5% 44.2%, 91.0% 42.8%, 91.5% 41.3%, 91.5% 39.8%, 91.5% 38.5%, 91.5% 37.0%, 91.5% 35.6%, 91.5% 34.1%, 91.3% 32.8%, 91.3% 31.3%, 91.3% 29.9%, 91.3% 28.4%, 91.3% 27.1%, 91.3% 25.6%, 91.3% 24.2%, 91.0% 22.7%, 90.4% 21.4%, 88.8% 19.9%, 85.5% 18.4%, 79.2% 17.0%, 71.9% 15.7%, 38.8% 14.2%); }

/* ---------- как купить ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { display: flex; gap: 16px; align-items: flex-start; padding: 22px 20px; background: linear-gradient(#141923, #0f131b); border: 1px solid var(--line); }
/* цифра по центру шестиугольника: у Friz цифры сидят выше середины строки, поэтому сдвиг вниз */
.step .n { flex: 0 0 52px; height: 58px; display: grid; place-items: center; padding-top: 6px; background: url(../img/ld_badge.png) center / contain no-repeat; font: 24px/1 var(--display); color: #fff; text-shadow: 0 2px 0 #000; }
.step b { display: block; margin-bottom: 4px; font: 19px var(--display); font-weight: 400; color: #fff6e0; }
.step span { font-size: 14px; color: var(--muted); }

/* ---------- вопросы ---------- */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; align-items: start; }
.faq details { padding: 16px 20px; background: #10141c; border: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font: 17px var(--display); color: #fff6e0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--copper-hi); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 10px 0 0; color: #cfc8b8; font-size: 14px; }

/* ---------- подвал ---------- */
footer { margin-top: 56px; background: #06080c; border-top: 1px solid var(--line); }
footer .wrap { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 24px; padding-block: 36px 20px; }
footer h5 { margin: 0 0 10px; font: 15px var(--display); font-weight: 400; color: var(--gold); }
footer a, footer p { display: block; margin: 0 0 6px; font-size: 14px; color: var(--muted); }
footer a:hover { color: var(--cream); }
.legal { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid #141821; font-size: 12px; color: #6d717a; }

/* ---------- окно покупки ---------- */
.co-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(3,5,9,.8); opacity: 0; transition: opacity .2s; }
.co-overlay.open { opacity: 1; }
.co-modal { position: relative; width: min(470px, 100%); max-height: calc(100vh - 32px); overflow: hidden auto; padding: 4px 6px 8px; border: 30px solid transparent; border-image: url(../img/ld_window.png) 110 fill / 40px stretch; }
.co-title { margin: 0 0 16px; text-align: center; font: 26px var(--display); text-transform: uppercase; letter-spacing: .06em; color: #fff6e0; }
.co-close { position: absolute; right: 0; top: -6px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; font-size: 22px; color: var(--gold); background: rgba(255,255,255,.06); }
.co-item { display: flex; align-items: center; gap: 12px; padding: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); margin-bottom: 12px; }
.co-thumb { flex: 0 0 64px; height: 64px; display: grid; place-items: center; }
.co-art { width: 64px; height: 64px; object-fit: contain; }
.co-meta { flex: 1; } .co-name { font: 17px var(--display); color: #fff6e0; } .co-sub { color: var(--muted); font-size: 13px; }
.co-price { font: 20px var(--display); color: var(--badge); white-space: nowrap; }
.co-label { display: block; margin: 10px 0 6px; font: 14px var(--display); color: var(--gold); }
.co-input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid rgba(214,189,143,.3); background: #06080c; color: #fff; font: 15px var(--body); }
.co-input:focus { outline: none; border-color: var(--copper-hi); }
.co-hint { color: #80848c; font-size: 12px; margin-top: 4px; }
.co-row { display: flex; gap: 8px; } .co-row .co-input { margin: 0; }
.co-pay { display: flex; gap: 8px; flex-wrap: wrap; }
.co-method input { position: absolute; opacity: 0; }
.co-method span { display: inline-block; padding: 9px 12px; cursor: pointer; background: #10141c; border: 1px solid #2c313c; font-size: 14px; }
.co-method input:checked + span { border-color: var(--copper-hi); color: var(--copper-hi); box-shadow: 0 0 0 1px var(--copper-hi); }
.co-method input:focus-visible + span { outline: 2px solid #fff; }
.co-buy { width: 100%; margin-top: 18px; min-height: 58px; padding: .24em 0 0; cursor: pointer; font: 21px var(--display); color: var(--ink); background: none; border: 12px solid transparent; border-image: url(../img/ld_btn_copper.png) 24 fill / 12px stretch; }
.co-fine { margin-top: 10px; color: #7a7e86; font-size: 12px; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translate(-50%, 30px); opacity: 0; transition: .25s; pointer-events: none;
  padding: 12px 24px; background: #0b0e14; border: 1px solid rgba(214,189,143,.45); font: 15px var(--display); color: var(--cream); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .menu { display: none; }
  .shop { grid-template-columns: 1fr 320px; }
  .stage .pk { width: calc(180px * var(--s, 1)); } .stage .pk.wide { width: calc(200px * var(--s, 1)); }
  .commons { grid-template-columns: repeat(4, 1fr); }
  .perks { grid-template-columns: repeat(2, 1fr); } .perks > div:nth-child(3) { border-left: 0; } .perks > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .hero .king { width: 100%; opacity: .55; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 45%); mask-image: linear-gradient(0deg, transparent 0%, #000 45%); }
  .hero::before { background: linear-gradient(0deg, rgba(10,13,20,1) 8%, rgba(6,8,13,.55) 60%, rgba(6,8,13,.3) 100%); }
  .hero .wrap { min-height: 0; padding-block: 220px 40px; }
  .hero h1 { font-size: 42px; }
  .shop { grid-template-columns: 1fr; }
  .detail { position: relative; top: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: left; gap: 0 18px; }
  .detail .stage { grid-row: 1 / span 5; grid-column: 2; }
  .detail hr { display: none; }
  .pass { grid-template-columns: 1fr; }
  .pass::before { background: linear-gradient(0deg, rgba(6,8,13,.95) 30%, rgba(6,8,13,.5) 100%); }
  .pass .chest { order: -1; width: 200px; margin: 30px 0 -20px; }
  .rules { grid-template-columns: 1fr; }
  .steps, .faq { grid-template-columns: 1fr; }
  footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .brand small, .wallet { display: none; }
  .top .wrap { gap: 12px; min-height: 62px; }
  .brand b { font-size: 16px; }
  .hero h1 { font-size: 34px; }
  .hero .wrap { padding-top: 170px; }
  .offer { flex-wrap: wrap; gap: 10px 14px; } .offer img { width: 72px; height: 72px; } .offer > div { flex: 1 1 150px; } .offer .btn { flex: 1 1 100%; margin-left: 0; }
  .perks { grid-template-columns: 1fr; } .perks > div { border-left: 0 !important; } .perks > div + div { border-top: 1px solid var(--line); }
  section { padding-top: 54px; }
  .sh h2 { font-size: 26px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tile .amt { font-size: 19px; }
  .tile .btn { width: 84%; font-size: 15px; min-height: 36px; }
  .detail { display: block; text-align: center; }
  .detail .stage { height: 236px; } .stage .pk { width: calc(170px * var(--s, 1)); bottom: 50px; } .stage .pk.wide { width: calc(185px * var(--s, 1)); bottom: 42px; }
  .pass .txt { padding: 26px 20px; }
  .top3 { gap: 8px; } .commons { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
  .commons .skin:last-child:nth-child(3n+1) { grid-column: 2; }   /* седьмой обычный — по центру последнего ряда */
  .skin .nm { font-size: 15px; } .skin .un { font-size: 12px; } .skin .rar { font-size: 11px; letter-spacing: .06em; }
  .subh { font-size: 22px; }
  .sk-modal { border-width: 18px; border-image-width: 28px; } .sk-info { margin-top: 10px; padding: 0 4px 4px; } .sk-info h3 { font-size: 30px; } .sk-art::after { display: none; }
  .skin .see { display: none; }
  footer .wrap { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .stage .pk { animation: none; } html { scroll-behavior: auto; } }

/* ---------- legionsdefense.ru: документы, плашки-заглушки, неактивная оплата ---------- */
.placeholder { display: inline; padding: 1px 6px; background: rgba(255,106,43,.18); border: 1px dashed rgba(255,106,43,.7); color: #ffc7a8; font: 600 13px/1.5 var(--body); }
.draft-prices { margin: -8px 0 22px; }
.co-buy[disabled] { cursor: default; filter: grayscale(1) brightness(.7); }
.co-fine a, .faq p a, .doc a { color: var(--copper-hi); text-decoration: underline; text-underline-offset: 3px; }

.doc-page { background: linear-gradient(rgba(10,13,20,.9), rgba(10,13,20,.97) 420px), url(../img/ld_stone.jpg) 50% 0 / 100% auto no-repeat; }
.doc { max-width: 880px; padding-block: 56px 24px; overflow-wrap: anywhere; }
.doc h1 { margin: 0 0 10px; font: 42px/1.1 var(--display); font-weight: 400; color: #fff6e0; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
.doc .doc-sub { margin: -2px 0 14px; font: 20px/1.3 var(--display); color: var(--gold); }
.doc h2 { display: flex; align-items: center; gap: 16px; margin: 40px 0 14px; font: 24px/1.2 var(--display); font-weight: 400; color: #fff6e0; text-transform: uppercase; letter-spacing: .02em; }
.doc h2::after { content: ''; flex: 1; min-width: 24px; height: 2px; background: linear-gradient(90deg, rgba(208,138,90,.8), rgba(208,138,90,0)); }
.doc h3 { margin: 22px 0 8px; font: 18px var(--display); font-weight: 400; color: var(--gold); }
.doc p, .doc li { color: #ddd5c4; font-size: 15px; }
.doc p { margin: 0 0 12px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--copper); }
.doc strong { color: #fff6e0; font-weight: 500; }
.doc .updated { color: var(--muted); font-size: 14px; }
.doc .lead { font-size: 17px; color: #e8e1d2; }
.doc .table-wrap { overflow-x: auto; margin: 14px 0 18px; border: 1px solid var(--line); }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc th, .doc td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: #ddd5c4; }
.doc th { background: #141923; color: var(--gold); font: 15px var(--display); font-weight: 400; }
.doc tr:last-child td { border-bottom: 0; }
.doc .callout { margin: 20px 0; padding: 18px 22px; background: linear-gradient(#141923, #0f131b); border: 1px solid var(--line); border-left: 2px solid var(--badge); }
.doc .callout p { margin: 4px 0; }
.doc .callout-title { font: 19px var(--display); color: #fff6e0; }
.doc .requisites dl { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 8px 20px; margin: 0; }
.doc .requisites dt { color: var(--gold); font-size: 14px; }
.doc .requisites dd { margin: 0; color: #e8e1d2; font-size: 15px; }
.doc .eyebrow { font: 14px var(--display); letter-spacing: .2em; color: var(--gold); }
.doc .button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: .24em 34px 0; font: 21px/1 var(--display); color: var(--ink); text-decoration: none; border: 12px solid transparent; border-image: url(../img/ld_btn_copper.png) 24 fill / 12px stretch; }
.doc-page.lost .doc { text-align: center; padding-block: 120px 60px; }
.doc-page.lost h1 { font-size: 48px; }
@media (max-width: 600px) {
  .doc { padding-block: 36px 16px; }
  .doc h1 { font-size: 30px; }
  .doc h2 { font-size: 20px; margin-top: 32px; }
  .doc .requisites dl { grid-template-columns: 1fr; gap: 0; }
  .doc .requisites dd { margin-bottom: 10px; }
}