/* Reward opening: opaque surfaces, restrained aurora and a lifted gift lid. */
#device-host .sy-reward-fx{background:#050608;justify-content:flex-start;padding:64px 20px 28px;gap:0;isolation:isolate;outline:none;overflow-y:auto;overscroll-behavior:contain}
.sy-reward-aurora{position:absolute;inset:0;z-index:-1;opacity:.22;pointer-events:none;mask-image:linear-gradient(transparent,#000 35%,transparent 75%)}
.sy-reward-aurora canvas{position:absolute;inset:0;width:100%;height:100%}
.sy-reward-heading{position:relative;text-align:center;flex:none;width:100%;z-index:2}
.sy-reward-heading>span{font-size:12px;line-height:16px;letter-spacing:.15em;color:#a5aab3}
.sy-reward-heading h2{font-size:24px;line-height:32px;margin:8px 0;color:#f0f2f5}
.sy-reward-heading p{font-size:14px;line-height:20px;margin:0;color:#a5aab3}
.sy-reward-scene{position:relative;display:grid;place-items:center;width:100%;height:320px;flex:none;transition:height .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.sy-reward-fx.is-done .sy-reward-scene{height:128px}
.sy-gift-stage{position:relative;width:260px;height:280px;transform-origin:center;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s}
.sy-reward-fx.is-done .sy-gift-stage{transform:scale(.48) translateY(-16px);opacity:.65}
.sy-gift-box{position:absolute;inset:38px 20px 22px;animation:syGiftSettle .55s cubic-bezier(.2,.9,.2,1) both}
.sy-gift-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 14px #0008)}
.sy-gift-body{clip-path:polygon(0 36%,50% 54%,100% 36%,100% 100%,0 100%);animation:syGiftBody 2.2s cubic-bezier(.2,.7,.2,1) both}
.sy-gift-lid{clip-path:polygon(0 0,100% 0,100% 37%,50% 55%,0 37%);transform-origin:50% 50%;animation:syGiftLid 2.2s cubic-bezier(.2,.7,.2,1) both}
.sy-gift-inside{position:absolute;left:9%;right:9%;top:35%;height:28%;background:radial-gradient(ellipse,#fff2c0,#b47d30 55%,#38230e 80%);clip-path:polygon(0 30%,50% 0,100% 30%,50% 100%);opacity:0;animation:syGiftInside 2.2s ease both}
.sy-gift-light{position:absolute;left:20%;right:20%;bottom:49%;height:180px;background:linear-gradient(0deg,#fff5d0c0,color-mix(in srgb,var(--c) 55%,transparent) 35%,transparent);clip-path:polygon(0 100%,100% 100%,130% 0,-30% 0);filter:blur(12px);mix-blend-mode:screen;opacity:0;animation:syGiftLight 2.2s ease both}
.sy-gift-aura{position:absolute;inset:12% -12% -5%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--c) 27%,transparent),transparent 67%);animation:syGiftAura 2.2s ease both}
.sy-gift-floor{position:absolute;width:160px;height:20px;left:50%;bottom:20px;transform:translateX(-50%);border-radius:50%;background:#0009;filter:blur(7px)}
.sy-gift-sparks{position:absolute;inset:0;pointer-events:none}
.sy-gift-sparks i{position:absolute;left:50%;top:52%;width:3px;height:3px;background:#ffe6ad;border-radius:50%;box-shadow:0 0 7px #f5cc8a;opacity:0;animation:syGiftParticle 1.3s ease-out calc(.85s + var(--delay)) both}
.sy-reward-results{position:relative;width:100%;display:flex;flex-direction:column;gap:8px}
.sy-reward-row{min-height:68px;padding:12px;display:flex;align-items:center;gap:12px;border:1px solid #ffffff18;border-radius:14px;background:#111418;animation:syRewardIn .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*100ms)}
.sy-reward-art{width:44px;height:44px;flex:none;display:grid;place-items:center}.sy-reward-art>*{max-width:100%;max-height:100%}.sy-reward-art img{object-fit:contain}
.sy-reward-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}.sy-reward-copy b{font-size:16px;line-height:20px;color:#f0f2f5}.sy-reward-copy small{font-size:12px;line-height:16px;color:#a5aab3}
.sy-reward-qty{min-width:24px;height:24px;padding:0 4px;display:grid;place-items:center;border-radius:var(--radius-sm,8px);background:#252931;font-size:12px;font-weight:700}.sy-reward-check{color:#56c793;font-size:16px}
.sy-reward-footer{position:relative;width:100%;margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:12px;z-index:2}.sy-reward-footer p{font-size:12px;line-height:16px;color:#a5aab3;text-align:center;margin:0}.sy-reward-footer .pd-btn{width:100%;min-height:48px;font-size:14px;line-height:20px}.sy-reward-skip{background:none;border:0;color:#a5aab3;font:inherit;font-size:12px;min-height:44px;cursor:pointer}
#device-host .sy-reward-fx .pd-fx-stage{transform:scale(.85);transition:transform .5s,opacity .5s}#device-host .sy-reward-fx.is-done .pd-fx-stage{transform:scale(.42);opacity:.65}
@keyframes syGiftSettle{from{opacity:0;transform:translateY(22px) scale(.9)}to{opacity:1;transform:none}}
@keyframes syGiftLid{0%,23%{transform:none}35%{transform:translateY(-5px) rotate(-2deg)}44%{transform:translateY(-2px) rotate(1deg)}72%,100%{transform:translate(-14px,-70px) rotate(-12deg)}}
@keyframes syGiftBody{0%,40%{transform:none}58%{transform:translateY(3px) scale(.985)}78%,100%{transform:none}}
@keyframes syGiftInside{0%,40%{opacity:0}58%,100%{opacity:1}}
@keyframes syGiftLight{0%,38%{opacity:0;transform:scaleX(.4) scaleY(.6)}65%{opacity:.85;transform:scale(1)}100%{opacity:.3;transform:scaleX(.7)}}
@keyframes syGiftAura{0%{opacity:0;transform:scale(.7)}40%{opacity:.5}65%{opacity:1;transform:scale(1.15)}100%{opacity:.45;transform:scale(1)}}
@keyframes syGiftParticle{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:.85}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.4)}}
@keyframes syRewardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-height:760px){#device-host .sy-reward-fx{padding:52px 16px 24px}.sy-reward-heading h2{font-size:20px;line-height:28px}.sy-reward-scene{height:260px}.sy-reward-fx.is-done .sy-reward-scene{height:100px}.sy-reward-row{min-height:60px;padding:10px}.sy-reward-footer{padding-top:16px}}
@media(prefers-reduced-motion:reduce){#device-host .sy-reward-fx *{animation:none!important;transition:none!important}.sy-reward-fx .sy-gift-lid{transform:translate(-14px,-70px) rotate(-12deg)}.sy-reward-fx .sy-gift-inside{opacity:1}.sy-gift-light,.sy-gift-sparks{display:none}}
#device-host .sy-reward-fx,#device-host .sy-reward-fx *{box-sizing:border-box}
.sy-reward-scene{display:flex;align-items:center;justify-content:center}
.sy-gift-stage{flex:none}
.sy-reward-fx:not(.is-done) .sy-reward-scene{flex:1;min-height:220px}
#device-host .sy-reward-fx.is-done{justify-content:center}
.sy-reward-fx.is-done .sy-reward-footer{margin-top:24px;padding-top:0}
.sy-reward-art{width:48px;height:48px}.sy-reward-art>span{transform:scale(.85);transform-origin:center}.sy-reward-art>img,.sy-reward-art>svg{width:44px!important;height:44px!important}
.sy-reward-qty{width:24px;min-width:24px;height:24px;padding:0;flex:none}
.sy-reward-fx.is-done .sy-reward-scene{height:144px;margin-top:16px}
@media(max-height:760px){.sy-reward-fx.is-done .sy-reward-scene{height:112px;margin-top:16px}.sy-reward-fx.is-done .sy-gift-stage{transform:scale(.4) translateY(8px)}}

/* sy18: Vadim's inventory, in Siyanie's opaque black / graphite system. */
#device-host .pd-bp-title{font-size:14px;line-height:20px}
#device-host .pd-bp-scroll{padding:8px 16px 32px}
#device-host .pd-bp-grid{gap:12px}
#device-host .pd-bp-card{background:#101216;border:1px solid #292c31;border-radius:16px;padding:24px 12px 12px;box-shadow:none;isolation:isolate}
#device-host .pd-bp-art{height:116px;position:relative}
#device-host .pd-bp-art::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 65%,#e6d9c214,transparent 65%);z-index:-1}
#device-host .pd-bp-name{font-size:14px;line-height:20px;min-height:40px;margin-top:12px}
#device-host .pd-bp-acts{margin-top:12px;padding-top:0}
#device-host .pd-bp-btn{height:44px;min-height:44px;font-size:14px;line-height:20px;border-radius:12px;background:linear-gradient(#f32235,#dc1020);border:1px solid #ff536140;box-shadow:inset 0 1px #ffffff0c}
#device-host .pd-bp-btn:disabled{background:#202329;border-color:#ffffff08;color:#838a96;box-shadow:none}
#device-host .pd-bp-new{width:8px;height:8px;min-width:0;top:12px;left:12px;padding:0;clip-path:none;border-radius:50%;background:#ed1b2e;box-shadow:0 0 0 3px #101216;font-size:0}
#device-host .pd-bp-count{top:10px;right:10px;width:32px;height:32px;min-width:32px;padding:0;display:grid;place-items:center;border-radius:var(--radius-sm,8px);background:#252930;border:0;font-size:12px;line-height:16px}
#device-host .pd-bp-card[data-kind=shard] .pd-bp-count{width:36px;height:36px;min-width:36px}
.sy-shard-progress{width:100%;height:3px;flex:none;background:#292c31;border-radius:2px;overflow:hidden;margin-top:12px}
.sy-shard-progress i{display:block;height:100%;background:#ed1b2e;border-radius:inherit}
#device-host .pd-bp-card:focus-visible,#device-host .pd-bp button:focus-visible{outline:2px solid #f0f2f5;outline-offset:3px}
#device-host .pd-inv-sheet-card{background:#101216;border:1px solid #292c31;border-radius:20px;padding:24px 20px}
#device-host .pd-inv-sheet-note,#device-host .pd-inv-detail-desc{font-size:14px;line-height:20px;color:#b0b5bf}
#device-host .pd-bp .pd-tk-card{background:#101216;border-color:#292c31}
#device-host .pd-bp .pd-tk-stub{background:#17191e!important}
#device-host .pd-bp .pd-tk-card::before{opacity:.28}
#device-host .pd-bp .pd-tk-value small,#device-host .pd-bp .pd-tk-until,#device-host .pd-bp .pd-tk-use{font-size:12px;line-height:16px}
#device-host .pd-bp .pd-tk-value b{font-size:14px;line-height:20px;color:#f0f2f5}
#device-host .pd-tk-qty{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-sm,8px);background:#252930;font-size:12px}
#device-host .rw-bag{background:#101216!important;border:1px solid #292c31!important;border-radius:16px;padding:16px;box-shadow:none!important}
#device-host .rw-bag::before,#device-host .rw-bag::after{display:none}
#device-host .rw-bag .rw-kicker{color:#f0f2f5;font-size:14px;line-height:20px}
#device-host .rw-bag-open{background:#1c1f25;border:1px solid #30343b;box-shadow:none;backdrop-filter:none;border-radius:10px;height:32px;letter-spacing:.03em}
#device-host .rw-bag-slot{background:#090b0e;border-color:#252930;border-radius:10px}
#device-host .rw-bag-slot.is-new{border-color:#363b44;box-shadow:none}
#device-host .rw-bag-slot>small.q{top:3px;left:3px;width:20px;height:20px;display:grid;place-items:center;background:#252930;border-radius:5px;font-size:11px;line-height:14px}
#device-host .rw-bag-facts{font-size:12px;line-height:16px}
/* Fragment assembly uses the same quiet light and timing as the gift reveal. */
#device-host .sy-reward-fx .pd-fx-stage{margin:0;flex:none}
#device-host .sy-reward-fx.is-done .pd-fx-stage{margin:0;transform:scale(.45)}
#device-host .sy-reward-fx .pd-fx-flash{background:radial-gradient(ellipse,#fff2d04d,transparent 65%);mix-blend-mode:screen}
#device-host .sy-reward-fx .pd-fx-target.is-ticket img{filter:drop-shadow(0 4px 16px #ffffff18)}
#device-host .sy-reward-fx .pd-fx-tile{filter:drop-shadow(0 4px 10px #0008)}
#device-host .sy-reward-row{background:#101216;border-color:#292c31;border-radius:16px}
#device-host .sy-reward-heading h2{letter-spacing:.02em}
#device-host .ps-count{width:24px;height:24px;min-width:24px;flex:none;padding:0;border-radius:var(--radius-sm,8px)}
#device-host .ps-root-group{background:#101216;border-color:#292c31}
@media(max-width:350px){#device-host .pd-bp-grid{gap:8px}#device-host .pd-bp-card{padding:24px 10px 10px}#device-host .pd-bp-art{height:100px}#device-host .pd-bp-name{font-size:14px;line-height:20px}#device-host .rw-bag-slots{gap:6px}}
@media(prefers-reduced-motion:reduce){#device-host .sy-reward-fx .pd-fx-tiles{display:none}#device-host .sy-reward-fx .pd-fx-target{transform:translate(-50%,-50%) scale(1)}}

/* sy57: ticket illustrations in the existing gift-card grid. */
#device-host .pd-bp .sy-ticket-tile{width:100%;font:inherit;color:inherit;text-align:center}
#device-host .sy-ticket-art{position:relative;overflow:visible;height:116px;flex:none}
#device-host .sy-ticket-art img{position:absolute;left:50%;top:50%;width:calc(100% + 12px);height:auto;max-width:none;max-height:none;transform:translate(-50%,-54%);pointer-events:none}
#device-host .sy-ticket-type{display:block;font:400 12px/16px var(--pd-font);color:#a9adb7;margin-top:8px}
#device-host .sy-ticket-tile .sy-ticket-value{display:block;min-height:0;font:700 18px/24px var(--pd-font);margin:4px 0 8px}
#device-host .sy-ticket-fit,#device-host .sy-ticket-exp{display:block;font:400 12px/16px var(--pd-font);color:#a9adb7;width:100%}
#device-host .sy-ticket-exp{margin-top:4px;min-height:32px}
#device-host .sy-ticket-exp.is-soon{color:#ff8791}
#device-host .sy-ticket-tile .pd-bp-acts{display:block;width:100%;margin-top:auto;padding-top:12px}
#device-host .sy-ticket-tile .pd-bp-btn{display:flex;align-items:center;justify-content:center;width:100%}
#device-host .sy-ticket-grid .pd-bp-tkw{position:relative;min-width:0}
#device-host .sy-ticket-tile *{box-sizing:border-box}
#device-host .sy-ticket-art::before{display:none}

/* sy60: named ticket, face value, live validity and aligned explicit action. */
#device-host .pd-bp .sy-ticket-tile{align-items:stretch;padding:20px 12px 12px;text-align:left;cursor:default}
#device-host .sy-ticket-tile .sy-ticket-art{height:100px}
#device-host .sy-ticket-tile .pd-bp-count{top:10px;right:10px;width:28px;height:28px;min-width:28px}
#device-host .sy-ticket-info{width:100%;margin-top:10px}
#device-host .sy-ticket-tile .sy-ticket-type{margin:0 0 10px;min-height:40px;font:700 14px/20px var(--pd-font);color:#eef0f4}
#device-host .sy-ticket-value-label{font:400 11px/16px var(--pd-font);color:#929aa7}
#device-host .sy-ticket-tile .sy-ticket-value{font:700 24px/28px var(--pd-font);margin:2px 0 4px;letter-spacing:-.02em;white-space:nowrap}
#device-host .sy-ticket-tile .sy-ticket-fit{font:400 12px/16px var(--pd-font);color:#a9adb7;min-height:16px}
#device-host .sy-ticket-validity{display:flex;gap:7px;align-items:center;border-top:1px solid #ffffff10;margin-top:14px;padding-top:12px;color:#a9adb7}
#device-host .sy-ticket-validity svg{width:18px;height:18px;flex:none}
#device-host .sy-ticket-validity>span{display:flex;flex-direction:column;min-width:0;gap:2px}
#device-host .sy-ticket-validity small{font:400 11px/14px var(--pd-font)}
#device-host .sy-ticket-validity .sy-ticket-exp{font:700 12px/16px var(--pd-font);color:#e4e7ec;min-height:0;margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
#device-host .sy-ticket-validity.is-soon,#device-host .sy-ticket-validity.is-soon .sy-ticket-exp{color:#ff8390}
#device-host .sy-ticket-tile .pd-bp-acts{padding-top:14px}
@media(max-width:350px){#device-host .sy-ticket-tile .sy-ticket-value{font-size:21px}}
