/* Devign LIVE Games storefront layer (2026-11-11).
   Loaded on every page after the app stylesheet. Two parts:
   1. A site-wide reskin through the app's own variables and class names.
   2. The home storefront that store.js mounts around the app's <main> (all classes start with dgs-).
   Remove the two /store/ tags from a page to get the old look back. */

/* ---------- 1. site-wide ---------- */
:root{
  --panel:#0e1015; --surface:#101218; --card:#14161d; --raised:#1c1f28;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --dim:#a3aabb; --radius:12px; --page-max:1320px;
  --dgs-glass:rgba(22,24,32,.62); --dgs-glass-hi:rgba(255,255,255,.1); --dgs-glass-hover:rgba(255,255,255,.18); --dgs-glass-edge:rgba(255,255,255,.2);
  --dgs-soft:#d3d7e1; --dgs-accent-hi:#9186ff; --dgs-accent-soft:#C9C4FF; --dgs-accent-glow:rgba(123,110,240,.45); --dgs-accent-wash:rgba(123,110,240,.18);
  --dgs-gold:#F5B94A; --dgs-gold-ink:#1a1404; --dgs-good-bg:rgba(63,191,127,.09);
  --dgs-shade:rgba(8,9,12,.94); --dgs-shade-mid:rgba(8,9,12,.55); --dgs-shade-low:rgba(8,9,12,.25); --dgs-shade-0:rgba(8,9,12,0);
  --dgs-shadow:rgba(0,0,0,.55); --dgs-r:12px; --dgs-r-lg:18px; --dgs-ease:cubic-bezier(.2,.7,.2,1);
}
.site-header{background:var(--dgs-glass)!important;-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border-block-end:1px solid var(--line)!important}
.site-header .nav a{border-radius:9px;font-size:14px}
.site-header .nav a::after{display:none}
.site-header .nav a:hover{background:var(--dgs-glass-hi);color:var(--text)}
.site-header .nav a[aria-current=page]{color:var(--text);background:var(--dgs-glass-hi);box-shadow:inset 0 0 0 1px var(--line)}
.dv-btn-primary{background:linear-gradient(180deg,var(--dgs-accent-hi),var(--accent))!important;color:#fff!important;border-radius:10px!important;border-color:transparent!important;box-shadow:inset 0 1px 0 var(--dgs-glass-edge),0 1px 2px var(--dgs-shadow)!important}
.dv-btn-primary:hover:not(:disabled){box-shadow:inset 0 1px 0 var(--dgs-glass-edge),0 8px 28px var(--dgs-accent-glow)!important}
.dv-btn-ghost{background:var(--dgs-glass-hi)!important;border-color:transparent!important;border-radius:10px!important;box-shadow:inset 0 0 0 1px var(--dgs-glass-edge)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.dv-btn-ghost:hover{background:var(--dgs-glass-hover)!important}
.section-title{font-size:24px;letter-spacing:-.012em}
.section-title::before{display:none}
.card,.dv-card{border-radius:var(--dgs-r)}
.card::before{display:none}
.card .card-art{border-radius:0}
.site-footer{background:var(--panel)}

/* Released games the old bundle still lists as coming soon (see RELEASED in store.js). */
.coming-card:has(a[href$="/coming-soon/prismbastion"]),.coming-teaser a[href$="/coming-soon/prismbastion"]{display:none!important}

/* ---------- 2. home storefront ---------- */
/* Old home blocks the storefront replaces. Pricing, FAQ, news and support stay. */
html.dgs-home .site-main>section.hero,
html.dgs-home .site-main section.section:has(.grid-games),
html.dgs-home .site-main aside.coming-teaser,
html.dgs-home .site-main section.section:not([id]):has(a.dv-card[href$="/stream-tools"]),
html.dgs-home .site-main .page>section.section:not([id]):last-child,
html.dgs-home #dss-showcase{display:none!important}
html.dgs-home .site-main{padding-block-end:0}
html.dgs-home .site-main .page>section.section:first-of-type{margin-block-start:0}

.dgs-store,.dgs-end{position:relative;color:var(--text);font-size:15px;line-height:1.5}
.dgs-store *,.dgs-end *{box-sizing:border-box}
.dgs-store a,.dgs-end a{color:inherit;text-decoration:none}
.dgs-store button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
.dgs-store :focus-visible,.dgs-end :focus-visible{outline:2px solid var(--dgs-accent-soft);outline-offset:2px;border-radius:6px}
.dgs-store{min-height:900px;padding-block:22px 64px}
.dgs-wrap{position:relative;z-index:1;width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:60px}
.dgs-store h1,.dgs-store h2,.dgs-store h3,.dgs-end h2{font-weight:800;letter-spacing:-.012em;margin:0;text-wrap:balance;line-height:1.1}
html[lang=ar] .dgs-store h1,html[lang=ar] .dgs-store h2,html[lang=ar] .dgs-store h3,html[lang=ar] .dgs-end h2{letter-spacing:0;line-height:1.3}
.dgs-kick{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dgs-gold)}
html[lang=ar] .dgs-kick{letter-spacing:0;font-size:13px}
.dgs-ic{flex:none;display:block}
[dir=rtl] .dgs-flip{transform:scaleX(-1)}

.dgs-amb{position:absolute;inset:0 0 auto;height:860px;overflow:hidden;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(#000 25%,transparent);mask-image:linear-gradient(#000 25%,transparent)}
.dgs-amb i{position:absolute;inset:-12%;background-size:cover;background-position:center;filter:blur(72px) saturate(1.7);opacity:0;transition:opacity 1.1s ease}
.dgs-amb i.on{opacity:.42}

.dgs-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 18px;border-radius:10px;font-weight:700;white-space:nowrap;transition:transform .15s var(--dgs-ease),box-shadow .2s,background .15s,filter .15s}
.dgs-btn:active{transform:scale(.98)}
.dgs-btn.pri{background:linear-gradient(180deg,var(--dgs-accent-hi),var(--accent));color:#fff!important;box-shadow:inset 0 1px 0 var(--dgs-glass-edge),0 1px 2px var(--dgs-shadow)}
.dgs-btn.pri:hover{box-shadow:inset 0 1px 0 var(--dgs-glass-edge),0 8px 28px var(--dgs-accent-glow);filter:brightness(1.06)}
.dgs-btn.glass{background:var(--dgs-glass-hi);box-shadow:inset 0 0 0 1px var(--dgs-glass-edge);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.dgs-btn.glass:hover{background:var(--dgs-glass-hover)}
.dgs-btn.lg{height:54px;padding:0 26px;font-size:16.5px;border-radius:13px}
.dgs-btn.xl{height:64px;padding:0 36px;font-size:18px;border-radius:16px;box-shadow:inset 0 1px 0 var(--dgs-glass-edge),0 14px 50px var(--dgs-accent-glow)}

/* page title row */
.dgs-top{display:flex;flex-direction:column;gap:18px}
.dgs-lead{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap}
.dgs-lead h1{font-size:clamp(19px,2.1vw,26px);max-width:30ch}
.dgs-lead span{display:inline-flex;align-items:center;gap:7px;color:var(--dim);font-weight:600;font-size:13.5px}
.dgs-lead span svg{color:var(--dgs-accent-soft)}

/* spotlight */
.dgs-spot{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px}
.dgs-hero{position:relative;border-radius:var(--dgs-r-lg);overflow:hidden;background:var(--card);aspect-ratio:16/9;max-width:100%;box-shadow:0 30px 80px var(--dgs-shadow),inset 0 0 0 1px var(--line)}
.dgs-hl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .8s ease,transform 7s linear}
.dgs-hl.on{opacity:1;transform:scale(1)}
.dgs-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,var(--dgs-shade) 0,var(--dgs-shade-mid) 30%,var(--dgs-shade-0) 60%),linear-gradient(to right,var(--dgs-shade-mid),var(--dgs-shade-0) 55%)}
[dir=rtl] .dgs-hero::after{background:linear-gradient(to top,var(--dgs-shade) 0,var(--dgs-shade-mid) 30%,var(--dgs-shade-0) 60%),linear-gradient(to left,var(--dgs-shade-mid),var(--dgs-shade-0) 55%)}
.dgs-info{position:absolute;z-index:1;inset-inline:34px;bottom:32px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.dgs-info>*{animation:dgsRise .6s var(--dgs-ease) both}
.dgs-info>:nth-child(2){animation-delay:.05s}.dgs-info>:nth-child(3){animation-delay:.1s}.dgs-info>:nth-child(4){animation-delay:.15s}.dgs-info>:nth-child(5){animation-delay:.2s}
@keyframes dgsRise{from{opacity:0;transform:translateY(14px)}}
.dgs-info h2{font-size:clamp(28px,4vw,54px);text-shadow:0 2px 24px var(--dgs-shadow)}
.dgs-info p{margin:0;max-width:50ch;color:var(--dgs-soft);font-size:16.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dgs-row{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.dgs-evs{display:flex;gap:6px 14px;align-items:center;color:var(--dgs-soft);font-size:13.5px;font-weight:600;flex-wrap:wrap}
.dgs-evs span{display:inline-flex;gap:6px;align-items:center}
.dgs-rail{display:flex;flex-direction:column;gap:6px;min-width:0}
.dgs-rail button{position:relative;flex:1;display:flex;align-items:center;gap:13px;padding:9px;border-radius:14px;text-align:start;overflow:hidden;min-width:0;transition:background .2s}
.dgs-rail button:hover{background:var(--line)}
.dgs-rail button.on{background:var(--dgs-glass-hi);box-shadow:inset 0 0 0 1px var(--line-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.dgs-rail img{width:100px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex:none;background:var(--raised)}
.dgs-rail b{display:block;font-weight:700;line-height:1.2}
.dgs-rail small{color:var(--dim);font-size:12.5px}
.dgs-bar{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:0;background:var(--dgs-accent-hi)}
.dgs-rail button.on .dgs-bar{animation:dgsFill 7s linear forwards}
.dgs-rail.still button.on .dgs-bar{animation:none;width:100%}
@keyframes dgsFill{to{width:100%}}

/* plan band */
.dgs-plan{position:relative;display:grid;grid-template-columns:1fr 1fr;border-radius:var(--dgs-r-lg);overflow:hidden;background:linear-gradient(115deg,var(--dgs-accent-wash),var(--line) 46%,var(--dgs-good-bg));box-shadow:inset 0 0 0 1px var(--line-strong),inset 0 1px 0 var(--dgs-glass-edge);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.dgs-plan::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 42%,var(--line) 50%,transparent 58%);background-size:260% 100%;animation:dgsSheen 8s ease-in-out infinite}
@keyframes dgsSheen{0%,20%{background-position:120% 0}80%,100%{background-position:-60% 0}}
.dgs-plan>div{position:relative;padding:26px 28px;display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap}
.dgs-plan>div+div{border-inline-start:1px solid var(--line)}
.dgs-plan h3{font-size:21px}
.dgs-plan h3 em{font-style:normal;color:var(--dgs-gold)}
.dgs-plan p{margin:5px 0 0;color:var(--dim)}
.dgs-txt{min-width:0;flex:1 1 220px}
.dgs-facts{display:flex;gap:12px 34px;flex-wrap:wrap;margin-top:20px;color:var(--dim);font-weight:500}
.dgs-facts span{display:inline-flex;gap:9px;align-items:center}
.dgs-facts svg{color:var(--dgs-accent-soft)}

/* shelves and grids */
.dgs-sec-h{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.dgs-sec-h h2{font-size:24px}
.dgs-more{color:var(--dgs-accent-soft)!important;font-weight:600;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.dgs-more:hover{color:var(--text)!important}
.dgs-arrows{display:flex;gap:8px}
.dgs-arrows button{width:38px;height:38px;border-radius:50%;background:var(--dgs-glass-hi);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;transition:background .15s}
.dgs-arrows button:hover{background:var(--dgs-glass-hover)}
.dgs-shelf{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*18px)/5);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 2px 4px;margin:-8px -2px -4px}
.dgs-shelf::-webkit-scrollbar{display:none}
.dgs-shelf>*{scroll-snap-align:start}
.dgs-g{display:flex;flex-direction:column;gap:11px;min-width:0;text-align:start}
.dgs-cv{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--dgs-r);overflow:hidden;background:var(--card);transition:transform .3s var(--dgs-ease),box-shadow .3s}
.dgs-cv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--dgs-ease)}
.dgs-cv::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
@media (hover:hover){
  .dgs-g:hover .dgs-cv{transform:translateY(-5px);box-shadow:0 18px 40px var(--dgs-shadow)}
  .dgs-g:hover .dgs-cv img{transform:scale(1.06)}
}
.dgs-tag{position:absolute;top:9px;inset-inline-start:9px;z-index:1;background:var(--dgs-gold);color:var(--dgs-gold-ink);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px}
html[lang=ar] .dgs-tag{letter-spacing:0;font-size:12px}
.dgs-g b{font-weight:700;line-height:1.25;display:block;font-size:15.5px}
.dgs-g small{color:var(--faint);font-size:13px}
.dgs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px}

/* promos */
.dgs-promos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dgs-promo{position:relative;border-radius:var(--dgs-r-lg);overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:8px;padding:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.dgs-promo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--dgs-ease)}
.dgs-promo:hover>img{transform:scale(1.04)}
.dgs-promo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,var(--dgs-shade) 8%,var(--dgs-shade-mid) 55%,var(--dgs-shade-low)),linear-gradient(to right,var(--dgs-shade-mid),var(--dgs-shade-0) 70%)}
.dgs-promo>*:not(img){position:relative;z-index:1}
.dgs-promo h3{font-size:27px}
.dgs-promo p{margin:0;color:var(--dgs-soft);max-width:40ch}
.dgs-promo .dgs-btn{margin-top:10px}

/* coming soon */
.dgs-soon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dgs-sn{position:relative;aspect-ratio:3/4;border-radius:var(--dgs-r-lg);overflow:hidden;background:var(--card);display:flex;align-items:flex-end;max-width:100%;transition:transform .35s var(--dgs-ease),box-shadow .35s}
.dgs-sn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--dgs-ease)}
@media (hover:hover){.dgs-sn:hover{transform:translateY(-6px);box-shadow:0 24px 50px var(--dgs-shadow)}.dgs-sn:hover img{transform:scale(1.06)}}
.dgs-sn::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,var(--dgs-shade) 8%,var(--dgs-shade-mid) 42%,var(--dgs-shade-0) 68%);box-shadow:inset 0 0 0 1px var(--line);border-radius:inherit}
.dgs-sn>div{position:relative;z-index:1;padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.dgs-sn h3{font-size:19px}
.dgs-sn p{margin:0;color:var(--dgs-soft);font-size:13.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dgs-sn .dgs-kick{font-size:11px}

/* genres */
.dgs-cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.dgs-cat{position:relative;aspect-ratio:4/5;border-radius:var(--dgs-r);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:var(--panel);transition:transform .3s var(--dgs-ease)}
.dgs-cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--dgs-ease)}
@media (hover:hover){.dgs-cat:hover{transform:translateY(-4px)}.dgs-cat:hover img{transform:scale(1.07)}}
.dgs-cat::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,var(--dgs-shade),var(--dgs-shade-0) 55%);box-shadow:inset 0 0 0 1px var(--line);border-radius:inherit}
.dgs-cat b,.dgs-cat small{position:relative;z-index:1}
.dgs-cat b{font-weight:800;font-size:19px}
.dgs-cat small{color:var(--dim)}

/* closing call, mounted after the app's main */
.dgs-end{padding-block:64px 80px}
.dgs-cta{position:relative;border-radius:24px;overflow:hidden;min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:48px 24px;background:radial-gradient(80% 120% at 50% 0,var(--dgs-accent-wash),var(--panel) 70%);box-shadow:inset 0 0 0 1px var(--line)}
.dgs-cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dgs-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 45%,var(--dgs-shade),var(--dgs-shade-mid) 70%,var(--dgs-shade))}
.dgs-cta>*:not(img){position:relative;z-index:1}
.dgs-cta h2{font-size:clamp(28px,4.2vw,50px);max-width:16ch}
.dgs-cta p{margin:0;color:var(--dgs-soft);font-size:16.5px;max-width:46ch}
.dgs-cta .dgs-btn{margin-top:14px}
.dgs-cta small{color:var(--dim)}

@media (max-width:1000px){
  .dgs-spot{grid-template-columns:minmax(0,1fr)}
  .dgs-rail{flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .dgs-rail::-webkit-scrollbar{display:none}
  .dgs-rail button{flex:none;width:156px;flex-direction:column;align-items:stretch;gap:7px}
  .dgs-rail img{width:100%}
  .dgs-rail small{display:none}
  .dgs-shelf{grid-auto-columns:calc((100% - 2*18px)/3)}
  .dgs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dgs-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dgs-soon{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(210px,30%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .dgs-soon::-webkit-scrollbar{display:none}
  .dgs-soon>*{scroll-snap-align:start}
}
@media (max-width:680px){
  .dgs-store{padding-block:14px 44px}
  .dgs-wrap{gap:44px}
  .dgs-lead span{display:none}
  .dgs-hero{aspect-ratio:auto;display:flex;flex-direction:column}
  .dgs-hl{position:static;aspect-ratio:16/9;height:auto;display:none;transform:none}
  .dgs-hl.on{display:block}
  .dgs-hero::after{display:none}
  .dgs-info{position:static;padding:18px}
  .dgs-info p{font-size:15px}
  .dgs-row{width:100%}
  .dgs-row .dgs-btn{flex:1 1 auto}
  .dgs-btn.lg{height:50px;padding:0 20px;font-size:15.5px}
  .dgs-plan,.dgs-promos{grid-template-columns:minmax(0,1fr)}
  .dgs-plan>div{padding:22px 20px}
  .dgs-plan>div+div{border-inline-start:0;border-top:1px solid var(--line)}
  .dgs-plan .dgs-btn{width:100%}
  .dgs-shelf{grid-auto-columns:64%;gap:12px}
  .dgs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .dgs-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dgs-cat{aspect-ratio:1/1}
  .dgs-soon{grid-auto-columns:62%;gap:12px}
  .dgs-arrows{display:none}
  .dgs-promo{min-height:260px;padding:22px}
  .dgs-end{padding-block:44px 56px}
  .dgs-cta{min-height:380px;border-radius:var(--dgs-r-lg)}
  .dgs-btn.xl{height:58px;padding:0 26px;font-size:16.5px}
  .section-title{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.dgs-store *,.dgs-end *{animation:none!important;transition:none!important}}