/* Карточка товара рынка (12.10.2026). Макет владельца «Фиолетовый контейнер — неоновый рынок». Холст 1600×900 (--vs). */
.app > main:has(> .sd-screen) { padding:0; background:#02070d; }
.app.desktop > main:has(> .sd-screen) { height:calc(100vh - 86 * var(--u)); overflow:hidden; }
.sd-screen { width:100%; max-width:none; margin:0; color:#eef4ff; }  /* общее section{max-width:1280px} */
.sd-screen :is(h1,h2,p,ol,ul,li) { margin:0; padding:0; list-style:none; }
.sd-blue   { --ac:#2fa8ff; --ac2:#7fd4ff; --acd:#0b3a5c; }
.sd-violet { --ac:#b04dff; --ac2:#e0a6ff; --acd:#3a0f5c; }
.sd-gold   { --ac:#ffb21f; --ac2:#ffe08a; --acd:#5a3a06; }
.sd-desktop { height:100%; container:sdroot / size; }
.sd-scene { --vs:min(calc((100vw - 228 * var(--u)) / 1600),calc((100vh - 86 * var(--u)) / 900)); position:relative; height:100%; overflow:hidden; background:#02070d url('/app/client/assets/ui/market-detail/detail-bg.jpg') 50% 50% / cover no-repeat; }
.sd-scene::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 45% 55% at 28% 62%,color-mix(in srgb,var(--ac) 22%,transparent),transparent 70%),linear-gradient(90deg,transparent 45%,#02070d99 75%); }

/* сцена: подиум (чёрный фон → screen, свечение в цвет контейнера) + наш сундук */
.sd-stage { position:absolute; left:0; top:0; bottom:0; width:56%; pointer-events:none; }
.sd-podium { position:absolute; left:50%; bottom:calc(10 * var(--vs)); width:calc(700 * var(--vs)); aspect-ratio:1; transform:translateX(-50%); mix-blend-mode:screen; -webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent); mask-image:radial-gradient(closest-side,#000 80%,transparent); }
.sd-podium img { display:block; width:100%; height:100%; }
.sd-podium i { position:absolute; inset:0; background:var(--ac); mix-blend-mode:color; }
.sd-chest { position:absolute; left:50%; bottom:calc(298 * var(--vs)); width:calc(430 * var(--vs)); height:auto; transform:translateX(-50%);  animation:sd-float 5s ease-in-out infinite; filter:drop-shadow(0 0 calc(26 * var(--vs)) color-mix(in srgb,var(--ac) 45%,transparent)) drop-shadow(0 calc(16 * var(--vs)) calc(18 * var(--vs)) #000b); }
@keyframes sd-float { 50% { transform:translate(-50%,calc(-8 * var(--vs))); } }
@media (prefers-reduced-motion:reduce) { .sd-chest { animation:none; } }
.reduced-motion .sd-chest { animation:none; }

/* контактная тень и отсвет под сундуком — сундук стоит на площадке подиума */
.sd-contact { position:absolute; left:50%; bottom:calc(286 * var(--vs)); width:calc(400 * var(--vs)); height:calc(46 * var(--vs)); transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side,#000d,#0008 55%,transparent),radial-gradient(closest-side,color-mix(in srgb,var(--ac) 70%,transparent),transparent); background-size:100% 100%,140% 160%; background-position:center; filter:blur(calc(4 * var(--vs))); }

/* правая колонка */
.sd-panel { position:absolute; right:calc(48 * var(--vs)); top:calc(30 * var(--vs)); bottom:calc(30 * var(--vs)); width:calc(620 * var(--vs)); display:flex; flex-direction:column; gap:calc(12 * var(--vs)); }
.sd-row { display:flex; gap:calc(12 * var(--vs)); }

/* премиальная рамка: внешняя линия → зазор → внутренняя линия → стекло; яркие скобы на срезанных углах */
.sd-frame { --c:calc(16 * var(--vs)); --g:calc(5 * var(--vs)); position:relative; isolation:isolate; padding:calc(16 * var(--vs)) calc(24 * var(--vs)); }
.sd-frame > i { position:absolute; z-index:-1; pointer-events:none; }
.sd-l1 { inset:0; clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); background:linear-gradient(120deg,var(--ac2),var(--ac) 22%,color-mix(in srgb,var(--ac) 55%,#000) 50%,var(--ac) 78%,var(--ac2)); }
.sd-l2 { inset:1.5px; --k:calc(var(--c) - .6px); clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k)); background:#04050c; }
.sd-l3 { inset:var(--g); --k:calc(var(--c) - var(--g) * .41); clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k)); background:color-mix(in srgb,var(--ac) 38%,transparent); }
.sd-l4 { inset:calc(var(--g) + 1px); --k:calc(var(--c) - var(--g) * .41 - .4px); clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k));
  background:
    linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac2) 85%,transparent) 20%,color-mix(in srgb,var(--ac2) 85%,transparent) 45%,transparent 65%) var(--c) 0 / 55% 1.5px no-repeat,
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--ac2) 70%,transparent) 0 1.5px,transparent 1.5px calc(7 * var(--vs))) calc(100% - 10 * var(--vs)) calc(4 * var(--vs)) / calc(50 * var(--vs)) calc(4 * var(--vs)) no-repeat,
    linear-gradient(115deg,transparent 30%,rgba(255,255,255,.045) 42%,transparent 54%),
    radial-gradient(ellipse 80% 120% at 0 0,color-mix(in srgb,var(--ac) 16%,transparent),transparent 60%),
    linear-gradient(180deg,rgba(12,10,26,.94),rgba(4,5,12,.97)); }
.sd-frame::before, .sd-frame::after { content:""; position:absolute; z-index:1; width:calc(var(--c) + 3px); height:calc(var(--c) + 3px); pointer-events:none; background:linear-gradient(135deg,transparent calc(50% - 2px),var(--ac2) calc(50% - 2px),#fff 50%,var(--ac2) calc(50% + 2px),transparent calc(50% + 2px)); filter:drop-shadow(0 0 calc(5 * var(--vs)) var(--ac)); }
.sd-frame::before { left:-1px; top:-1px; }
.sd-frame::after { right:-1px; bottom:-1px; }
.sd-frame { filter:drop-shadow(0 0 calc(10 * var(--vs)) color-mix(in srgb,var(--ac) 30%,transparent)); }

.sd-odds h2 { display:flex; align-items:center; gap:calc(10 * var(--vs)); margin-bottom:calc(10 * var(--vs)) !important; color:#7fe6ff; font-size:calc(13 * var(--vs)); font-weight:850; letter-spacing:.18em; text-transform:uppercase; }
.sd-odds h2::before { content:""; width:calc(4 * var(--vs)); height:calc(14 * var(--vs)); background:var(--ac2); box-shadow:0 0 calc(8 * var(--vs)) var(--ac); }
.sd-odd i { position:relative; height:calc(12 * var(--vs)); background:#ffffff10; box-shadow:inset 0 0 0 1px #ffffff14; overflow:hidden; }
.sd-odd i b { display:block; height:100%; background:linear-gradient(90deg,color-mix(in srgb,var(--r) 45%,#000),var(--r)); box-shadow:0 0 calc(10 * var(--vs)) var(--r); }
.sd-odd i::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 calc(5% - 2px),#05060d calc(5% - 2px) 5%); }

.sd-guarantee { display:flex; align-items:baseline; justify-content:center; gap:calc(10 * var(--vs)); }
.sd-guarantee .sd-l4 { background:linear-gradient(90deg,color-mix(in srgb,var(--acd) 90%,#000),rgba(8,6,18,.96) 50%,color-mix(in srgb,var(--acd) 90%,#000)); }

.sd-notes { padding:calc(8 * var(--vs)) calc(24 * var(--vs)); }
.sd-notes li { display:flex; gap:calc(12 * var(--vs)); padding:calc(7 * var(--vs)) 0; border-top:1px solid color-mix(in srgb,var(--ac) 18%,transparent); font-size:calc(13.5 * var(--vs)); line-height:1.35; color:#c9d3e0; }
.sd-notes li:first-child { border-top:0; }
.sd-notes b { flex:none; color:var(--ac2); font-weight:900; text-shadow:0 0 calc(6 * var(--vs)) var(--ac); }

/* кнопка покупки: фаска, внутренний контур, стрелки справа */
.sd-screen button.sd-buy { --c:calc(18 * var(--vs)); position:relative; width:100%; min-height:calc(80 * var(--vs)); border:0; clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 46%,rgba(0,0,0,.28)),linear-gradient(180deg,var(--ac2),var(--ac) 42%,var(--acd)); color:#fff; font-size:calc(34 * var(--vs)); font-weight:900; letter-spacing:.12em; text-transform:uppercase; text-shadow:0 2px 6px #0009; cursor:pointer; box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.4),inset 0 0 0 calc(5 * var(--vs)) rgba(0,0,0,.18),inset 0 0 0 calc(6 * var(--vs)) rgba(255,255,255,.28); transition:filter .15s; }
.sd-screen button.sd-buy::after { content:"»"; position:absolute; right:calc(28 * var(--vs)); top:50%; transform:translateY(-54%); font-size:calc(40 * var(--vs)); opacity:.8; }
.sd-screen button.sd-buy:hover:not(:disabled) { filter:brightness(1.15); }
.sd-screen button.sd-buy:disabled { cursor:default; background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 46%,rgba(0,0,0,.3)),linear-gradient(180deg,color-mix(in srgb,var(--ac) 40%,#222),color-mix(in srgb,var(--acd) 70%,#000)); color:#ffffffb0; font-size:calc(22 * var(--vs)); }
.sd-screen button.sd-buy:disabled::after { opacity:.35; }

.sd-title { text-align:center; padding:calc(14 * var(--vs)) calc(22 * var(--vs)) calc(16 * var(--vs)); }
.sd-title p { color:var(--ac2); font-size:calc(12 * var(--vs)); font-weight:800; letter-spacing:.24em; text-transform:uppercase; opacity:.85; }
.sd-title h1 { margin-top:calc(4 * var(--vs)); font-size:calc(38 * var(--vs)); font-weight:900; letter-spacing:.04em; line-height:1.1; text-transform:uppercase; color:#fff; text-shadow:0 0 calc(14 * var(--vs)) var(--ac),0 0 calc(3 * var(--vs)) var(--ac2); }
.sd-price { flex:1.6; display:flex; align-items:center; gap:calc(14 * var(--vs)); }
.sd-price b { color:var(--ac2); font-size:calc(30 * var(--vs)); text-shadow:0 0 calc(10 * var(--vs)) var(--ac); }
.sd-price strong { font-size:calc(28 * var(--vs)); font-weight:850; }
.sd-draws { flex:1; display:flex; align-items:center; justify-content:center; gap:calc(10 * var(--vs)); }
.sd-draws strong { color:var(--ac2); font-size:calc(30 * var(--vs)); font-weight:900; }
.sd-draws span { font-size:calc(20 * var(--vs)); font-weight:750; }

.sd-odds ul { display:flex; flex-direction:column; gap:calc(8 * var(--vs)); }
.sd-odd { --r:#b9c7d6; display:grid; grid-template-columns:calc(118 * var(--vs)) 1fr calc(52 * var(--vs)); align-items:center; gap:calc(14 * var(--vs)); font-size:calc(16 * var(--vs)); font-weight:750; }
.sd-rare { --r:#2fb2ff; } .sd-epic { --r:#b65cff; } .sd-legendary { --r:#ffc23d; }
.sd-odd span { color:var(--r); }
.sd-odd em { font-style:normal; text-align:right; color:#dfe8f2; }

.sd-guarantee span { color:var(--ac2); font-size:calc(17 * var(--vs)); font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.sd-guarantee strong { font-size:calc(17 * var(--vs)); font-weight:750; }


.sd-status { margin-top:auto !important; text-align:center; color:#8fa3b8; font-size:calc(12 * var(--vs)); letter-spacing:.08em; }
.sd-links { gap:calc(12 * var(--vs)); }
.sd-screen button.sd-link { --c:calc(10 * var(--vs)); flex:1; min-height:calc(50 * var(--vs)); border:0; clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); background:linear-gradient(180deg,color-mix(in srgb,var(--acd) 70%,#05060d),#05060d); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 70%,transparent); color:#e6ecf5; font-size:calc(16 * var(--vs)); font-weight:750; letter-spacing:.04em; cursor:pointer; }
.sd-screen button.sd-link:hover { color:#fff; box-shadow:inset 0 0 0 1px var(--ac2),inset 0 0 calc(14 * var(--vs)) color-mix(in srgb,var(--ac) 40%,transparent); }

/* высокие окна (VK/Max/Telegram в окне): сундук сверху, панель ниже, масштаб от ширины */
@container sdroot (aspect-ratio < 5/4) {
  .sd-desktop .sd-scene { --vs:calc(100cqw / 760); overflow:auto; }
  .sd-desktop .sd-stage { position:relative; width:100%; height:calc(470 * var(--vs)); }
  .sd-desktop .sd-panel { position:relative; right:auto; top:auto; bottom:auto; width:calc(660 * var(--vs)); margin:0 auto calc(30 * var(--vs)); }
  .sd-desktop .sd-podium { width:calc(520 * var(--vs)); bottom:calc(-60 * var(--vs)); }
  .sd-desktop .sd-chest { width:calc(330 * var(--vs)); bottom:calc(178 * var(--vs)); }
  .sd-desktop .sd-contact { width:calc(300 * var(--vs)); bottom:calc(166 * var(--vs)); }
  .sd-desktop .sd-status { margin-top:calc(6 * var(--vs)) !important; }
}

/* телефон */
.sd-mobile .sd-scene { --vs:1px; height:auto; min-height:100%; overflow:visible; padding-bottom:24px; background-size:auto 520px; background-position:30% 0; background-repeat:no-repeat; }
.sd-mobile .sd-stage { position:relative; width:100%; height:300px; overflow:hidden; }
.sd-mobile .sd-podium { width:380px; bottom:-50px; }
.sd-mobile .sd-chest { width:min(215px,58vw); bottom:112px; }
.sd-mobile .sd-contact { width:200px; bottom:104px; }
.sd-mobile .sd-panel { position:relative; right:auto; top:auto; bottom:auto; width:auto; margin:0 12px; gap:10px; }
.sd-mobile .sd-title h1 { font-size:26px; }
.sd-mobile .sd-price strong { font-size:22px; }
.sd-mobile .sd-odd { grid-template-columns:96px 1fr 44px; font-size:15px; }
.sd-mobile .sd-notes li { font-size:13px; }
.sd-mobile .sd-status { margin-top:4px !important; }
.sd-mobile button.sd-buy { min-height:64px; font-size:26px; }
.sd-mobile button.sd-buy:disabled { font-size:17px; }