/* Награды в ячейках боевого пропуска (сезон 1, 13.10.2026). Рамки ячеек — принятые, здесь только содержимое. */
.sp-reward-slot > .sp-body { height:100%; }
.sp-r { position:relative; cursor:pointer; height:100%; display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 6px 6px; text-align:center; }
.sp-r-visual { position:relative; flex:1 1 auto; min-height:0; width:100%; display:grid; place-items:center; }
.sp-r-visual img.is-icon { position:absolute; inset:0; margin:auto; max-width:84%; max-height:100%; object-fit:contain; filter:drop-shadow(0 4px 8px #000a); }
.sp-r-visual img.is-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px); box-shadow:inset 0 0 0 1px #ffffff22; }
.sp-r.is-legendary .sp-r-visual img.is-cover { outline:1px solid #ffd86a; }
.sp-r-glyph { width:58%; max-width:46px; aspect-ratio:1; color:#7ee6ff; filter:drop-shadow(0 0 6px #33d6ff66); }
.sp-r-glyph svg { width:100%; height:100%; display:block; }
.sp-gold .sp-r-glyph, .sp-reward-slot:not(.sp-free-slot) .sp-r-glyph { color:#ffd978; filter:drop-shadow(0 0 6px #ffc24a55); }
.sp-r-glyph[data-kind="ATTACK_COLOR"] { filter:none; }
.sp-r-caption { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; width:100%; line-height:1.15; }
.sp-r-kind { color:#7fb3c6; font-size:8.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.sp-r-name { color:#e9f7ff; font-size:10.5px; font-weight:700; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sp-r-name b { color:#ffffff; font-weight:900; }
.sp-r-extra { color:#ffd978; font-size:9.5px; font-weight:800; }
.sp-r-state { display:flex; align-items:center; justify-content:center; gap:4px; min-height:20px; font-size:9.5px; font-weight:800; text-transform:uppercase; }
.sp-r-state.is-claimed { color:#64f0a6; }
.sp-r-state.is-locked { color:#58788a; }
.sp-r-state.is-locked svg { width:13px; height:13px; }
button.sp-r-claim { width:100%; min-height:22px; padding:3px 2px; border:0; border-top:1px solid #b7f6ff; background:linear-gradient(180deg,#1fb3d6,#0b6f8c); color:#f2fdff; font-size:9.5px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); }
button.sp-r-claim:hover:not(:disabled) { filter:brightness(1.18); }
button.sp-r-claim:disabled { background:#11313d; color:#6d93a3; border-top-color:#2b5a69; cursor:default; }
.sp-reward-slot:not(.sp-free-slot) button.sp-r-claim:not(:disabled) { border-top-color:#fff1bf; background:linear-gradient(180deg,#e9b84d,#8f6420); color:#1d1404; }
.sp-reward-slot.is-claimable { filter:drop-shadow(0 0 7px #3fe0ff88); animation:sp-r-ready 1.8s ease-in-out infinite; }
.sp-reward-slot.is-claimable:not(.sp-free-slot) { filter:drop-shadow(0 0 7px #ffcb5a88); }
@keyframes sp-r-ready { 50% { filter:drop-shadow(0 0 12px #3fe0ffbb); } }
.sp-r-locked .sp-r-visual, .sp-r-premium_locked .sp-r-visual { opacity:.62; }
.sp-r-claimed .sp-r-visual { opacity:.45; filter:grayscale(.35); }
@media (prefers-reduced-motion: reduce) { .sp-reward-slot.is-claimable { animation:none; } }
/* Главная награда справа */
.sp-featured-slot > .sp-body { height:100%; }
.sp-featured-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.sp-featured-slot .sp-r-glyph { position:absolute; inset:0; margin:auto; }
.sp-featured-name { color:#ffe08a !important; font-size:14px !important; font-weight:800; line-height:1.3 !important; }
.sp-featured-name small { display:block; color:#9fc5d3; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
button.sp-featured-claim.is-ready { border-color:#ffe39a; background:linear-gradient(130deg,#f0c35a,#9a6b1f); color:#1d1404; cursor:pointer; }
@media(max-width:1500px) { .sp-r { padding:6px 5px 5px; gap:3px; } .sp-r-name { font-size:9.5px; } .sp-r-kind { font-size:8px; } button.sp-r-claim { font-size:8.5px; } }
@media(max-width:700px) { .sp-r { padding:5px 4px 4px; } .sp-r-name { font-size:9px; } .sp-r-kind { font-size:7.5px; } .sp-r-extra { font-size:8.5px; } button.sp-r-claim { font-size:8px; min-height:20px; } }

/* 13.10 владелец: картинка не наплывает на подпись (абсолютно внутри своей зоны); ячейка открывает просмотр. */
.sp-r:hover .sp-r-visual { filter:brightness(1.15); }
.sp-r:focus-visible { outline:1px solid #9deeff; outline-offset:-3px; }

/* Премиум-ячейки (13.10 владелец: «платные — человек платит живые деньги»): тонкое золото вместо стали по умолчанию,
   а под награду — свой цвет: синий / фиолетовый / золотой контейнер, косметика — золото, легендарная — огненное золото. */
.sp-premium-slot { --t1:#7a5e2a; --t2:#ffe29a; --t3:#fff6d2; --t4:#5a431c; --tg:#2a2010; --tglow:#ffcf6a33; }
.sp-premium-slot > .sp-rim { background:linear-gradient(115deg,var(--t4),var(--t2) 9%,var(--t3) 14%,var(--t1) 28%,var(--t4) 50%,var(--t2) 76%,var(--t1) 91%,var(--t4)); }
.sp-premium-slot > .sp-metal { background:linear-gradient(115deg,#120f09 0%,var(--t1) 9%,var(--t3) 10.5%,var(--t4) 13%,#100c07 28%,#1b150c 49%,var(--t1) 61%,var(--t3) 62%,var(--t4) 64%,#130f08 80%,var(--t1) 94%,#120d07 100%); }
.sp-premium-slot > .sp-glass { background:radial-gradient(120% 90% at 50% 0%,var(--tg),#060a0f 70%); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t2) 30%,transparent), inset 0 0 18px var(--tglow); }
.sp-premium-slot::after { background:linear-gradient(90deg,transparent,var(--t2) 12%,var(--t3) 15%,transparent 27%,transparent 65%,var(--t2) 85%,transparent); }
.sp-premium-slot.sp-tier-blue { --t1:#1e5fa8; --t2:#7cc8ff; --t3:#e3f5ff; --t4:#123a66; --tg:#0b2340; --tglow:#4fb2ff40; }
.sp-premium-slot.sp-tier-violet { --t1:#6a2db0; --t2:#c890ff; --t3:#f4e6ff; --t4:#3d1868; --tg:#24103d; --tglow:#b46bff4d; }
.sp-premium-slot.sp-tier-gold, .sp-premium-slot.sp-tier-cosmetic { --t1:#a8771f; --t2:#ffd46a; --t3:#fff7d6; --t4:#6b4a12; --tg:#33250c; --tglow:#ffc24a4d; }
.sp-premium-slot.sp-tier-gold { filter:drop-shadow(0 0 6px #ffc24a55); }
.sp-premium-slot.sp-tier-legendary { --t1:#c0601a; --t2:#ffb347; --t3:#fff1c4; --t4:#7a2e0b; --tg:#3a1a08; --tglow:#ff8a2a55; filter:drop-shadow(0 0 8px #ff9a3a66); }
.sp-premium-slot.sp-tier-legendary > .sp-glass::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,#ffe3a033 45%,transparent 60%); background-size:220% 100%; animation:sp-shine 3.2s linear infinite; }
@keyframes sp-shine { from { background-position:120% 0; } to { background-position:-120% 0; } }
@media (prefers-reduced-motion: reduce) { .sp-premium-slot.sp-tier-legendary > .sp-glass::after { animation:none; } }

/* Окно просмотра награды */
.sp-featured-open { position:absolute; inset:0; display:block; cursor:zoom-in; }
.sp-preview { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; background:#01060bcc; backdrop-filter:blur(3px); }
.sp-preview-box { position:relative; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(240px,1fr); gap:22px; width:min(980px,100%); max-height:calc(100vh - 40px); padding:18px; border:1px solid #c9a24f; background:linear-gradient(150deg,#14100a,#060b11 55%); box-shadow:0 0 0 1px #000, 0 0 40px #ffc24a22, 0 30px 80px #000; clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); }
.sp-preview-media { position:relative; min-height:300px; aspect-ratio:1; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%,#1a2a35,#05090d 70%); clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.sp-preview-media.is-cover { aspect-ratio:3/2; }
.sp-preview-media img { max-width:92%; max-height:92%; object-fit:contain; }
.sp-preview-media.is-cover img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
.sp-preview-orb { width:46%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#fff 0 8%,var(--orb) 30%,transparent 70%); box-shadow:0 0 60px var(--orb), 0 0 120px var(--orb); }
.sp-preview-title-plate { padding:14px 28px; border:1px solid #ffd46a; background:linear-gradient(180deg,#2b2110,#0e0b06); color:#ffe39a; font-size:clamp(20px,2.4vw,32px); font-weight:900; letter-spacing:.06em; text-transform:uppercase; text-shadow:0 0 14px #ffc24a88; clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%); }
.sp-preview-glyph { width:40%; max-width:none; }
.sp-preview-info { display:flex; flex-direction:column; justify-content:center; gap:10px; min-width:0; }
.sp-preview-kind { color:#ffcf6a; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.sp-preview-name { margin:0; color:#fff3d6; font-size:26px; line-height:1.15; font-weight:900; }
.sp-preview-extra { color:#ffd978; font-weight:800; }
.sp-preview-desc { color:#c8dbe5; font-size:15px; line-height:1.5; }
.sp-preview-where { color:#7fa9bb; font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.sp-preview-close { align-self:flex-start; margin-top:8px; min-width:140px; min-height:40px; border:1px solid #ffe39a; background:linear-gradient(130deg,#f0c35a,#9a6b1f); color:#1d1404; font-weight:900; text-transform:uppercase; cursor:pointer; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
@media(max-width:700px) {
  .sp-preview-box { grid-template-columns:1fr; gap:14px; padding:14px; overflow:auto; }
  .sp-preview-media { min-height:0; }
  .sp-preview-name { font-size:21px; }
  .sp-preview-desc { font-size:14px; }
  .sp-preview-close { align-self:stretch; }
}
.sp-premium-slot .sp-r-premium_locked .sp-r-visual { opacity:.85; }