/* Game page template. Glass surfaces from the app. Art is set per game in the CMS (Games collection). */
.gp2-root,.gp2-root h1,.gp2-root h2,.gp2-root h3,.gp2-root p,.gp2-root a,.gp2-root span{font-family:Inter,system-ui,sans-serif}
.gp2-root{position:relative;z-index:0;overflow-x:clip}
.gp2-root h1.gp2-h1,.gp2-root h2.gp2-h2{text-align:left;width:auto;max-width:none;margin:0}
.gp2-root h1.gp2-h1{font-size:64px;line-height:1.02;letter-spacing:-.03em;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.gp2-lead{text-shadow:0 1px 12px rgba(0,0,0,.6)}
.gp2-closewrap h2.gp2-h2{text-align:center;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.gp2-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.gp2-between,.gp2-prooffoot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.gp2-gemcell{white-space:normal;overflow:visible;gap:10px}
.gp2-glass{position:relative;isolation:isolate;border:1px solid transparent !important;background:linear-gradient(135deg,rgba(21,33,50,.72) 0%,rgba(18,27,38,.68) 50%,rgba(16,23,30,.65) 100%) padding-box,linear-gradient(135deg,rgba(129,173,243,.25),rgba(129,173,243,0) 50%,rgba(129,173,243,.15)) border-box !important;-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%)}
.gp2-glass.gp2-strong{background:linear-gradient(135deg,rgba(14,22,34,.86) 0%,rgba(12,19,28,.84) 50%,rgba(10,16,22,.84) 100%) padding-box,linear-gradient(135deg,rgba(129,173,243,.55) 0%,rgba(129,173,243,.14) 30%,rgba(129,173,243,.08) 50%,rgba(129,173,243,.14) 70%,rgba(251,191,36,.35) 100%) border-box !important;box-shadow:0 2px 20px rgba(129,173,243,.1),0 30px 70px -20px rgba(0,0,0,.85)}
.gp2-glass.gp2-alliance{background:linear-gradient(135deg,rgba(21,33,50,.8) 0%,rgba(18,27,38,.76) 50%,rgba(16,23,30,.74) 100%) padding-box,linear-gradient(135deg,rgba(129,173,243,.5) 0%,rgba(129,173,243,.12) 30%,rgba(129,173,243,.06) 50%,rgba(129,173,243,.12) 70%,rgba(129,173,243,.4) 100%) border-box !important}
.gp2-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:.035;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.gp2-glass::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;border-radius:inherit;pointer-events:none;z-index:2;background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.08) 70%,transparent 95%)}
.gp2-glass>*{position:relative;z-index:3}
/* Hero: the game art. The vertical fade sits on top so the hero ends in the exact page color. */
.gp2-hero{position:relative;background-color:#0e141b;background-image:linear-gradient(180deg,rgba(14,20,27,0) 0%,rgba(14,20,27,0) 58%,#0e141b 96%),linear-gradient(90deg,rgba(10,14,20,.92) 0%,rgba(10,14,20,.78) 38%,rgba(10,14,20,.35) 68%,rgba(10,14,20,.45) 100%),var(--gp2-hero,none);background-size:100% 100%,100% 100%,cover;background-position:center,center,center 35%;background-repeat:no-repeat}
.gp2-hero-grid{padding-top:72px;padding-bottom:96px;min-height:660px;align-items:center}
.gp2-eyebrow{display:inline-flex;align-items:center;gap:10px}
.gp2-hero-copy .gp2-eyebrow::before{content:"";width:28px;height:2px;background:#fbbf24;border-radius:2px}
.gp2-gametile{background-image:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35) 100%),var(--gp2-tile,var(--gp2-hero,none));background-size:auto,cover;background-position:center,18% 78%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 6px 16px -4px rgba(0,0,0,.8)}
.gp2-crown{font-size:0}
/* Currency icons: own art, dark tile like the app */
.gp2-gem{width:40px;height:40px;flex:0 0 40px;border-radius:10px;border:1px solid rgba(255,255,255,.08) !important;color:transparent;font-size:0;background-color:#141c28;background-image:var(--gp2-icon,none);background-size:138%;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 10px -4px rgba(0,0,0,.7)}
.gp2-coin{display:inline-block;width:16px;height:16px;flex:0 0 16px;border-radius:50%;border:0;background-color:transparent;background-image:url("https://cdn.prod.website-files.com/66100f8fe4a19011eb6a4c5c/6ad9d68f1b9aab03e1fd4779_icon-credit-coin.png");background-size:150%;background-position:center;background-repeat:no-repeat;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.gp2-row{align-items:center}
.gp2-rowtop{display:block}
.gp2-rowsub{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px}
.gp2-rowsub .gp2-tag{font-size:10.5px;line-height:16px;padding:0 7px;margin:0}
.gp2-official{display:inline-flex;align-items:center;gap:6px;color:#cbd5e1;font-size:13px}
.gp2-official .gp2-check{width:16px;height:16px;font-size:10px;flex:0 0 16px}

.gp2-pill{background:linear-gradient(180deg,#8fb3f3,#5f88de) !important;color:#fff !important;text-shadow:0 1px 1px rgba(0,0,0,.15);box-shadow:0 10px 30px rgba(60,131,246,.3),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.gp2-pill:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(60,131,246,.42),inset 0 1px 0 rgba(255,255,255,.4);filter:brightness(1.04)}
.gp2-pill.gp2-pill-idle{filter:saturate(.6);opacity:.85}
.gp2-seg-on{box-shadow:none;text-shadow:none}
.gp2-seg-on:hover{transform:none;box-shadow:none}
.gp2-chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gp2-open-dot{box-shadow:0 0 0 3px rgba(33,196,93,.2)}
/* Value section: a faint band of game art behind the table, mostly dark */
#gp2-table{position:relative}
#gp2-table::before{content:"";position:absolute;inset:0 -100vw;z-index:-1;pointer-events:none;background-image:linear-gradient(180deg,#0e141b 0%,rgba(14,20,27,.9) 30%,rgba(14,20,27,.86) 70%,#0e141b 100%),var(--gp2-band,var(--gp2-hero,none));background-size:100% 100%,cover;background-position:center,center 40%}
.gp2-tblwrap{box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
/* Steps: mascots and the pack art on the cards */
.gp2-stepart{background-image:linear-gradient(90deg,rgba(14,20,27,.95) 0%,rgba(14,20,27,.2) 45%,rgba(14,20,27,0) 100%),var(--gp2-step,none);background-size:auto,cover;background-position:center,62% 50%}
.gp2-stepimg{filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.gp2-steps .gp2-stepx{position:relative !important;overflow:hidden !important;min-height:210px;padding-right:128px !important}
.gp2-steps .gp2-stepx .gp2-stepimg{position:absolute !important;right:-4px !important;bottom:-8px !important;left:auto !important;top:auto !important;width:132px !important;height:auto !important;max-width:none;margin:0;z-index:3}
.gp2-steps .gp2-stepx .gp2-stepimg-rocket{right:-14px !important;bottom:-16px !important;width:148px !important}
.gp2-steps .gp2-stepx:nth-child(2){background:linear-gradient(90deg,rgba(18,28,42,.97) 0%,rgba(18,28,42,.92) 42%,rgba(18,28,42,.35) 100%) padding-box,var(--gp2-step,none) 100% 50%/auto 130% no-repeat padding-box,linear-gradient(135deg,rgba(129,173,243,.25),rgba(129,173,243,0) 50%,rgba(129,173,243,.15)) border-box !important}
@media (max-width:479px){.gp2-steps .gp2-stepx{padding-right:20px !important;min-height:0;padding-bottom:120px !important}.gp2-steps .gp2-stepx .gp2-stepimg{width:110px !important}}
/* Proof */
.gp2-videoart{background-image:linear-gradient(180deg,rgba(10,14,20,.05),rgba(10,14,20,.55)),var(--gp2-video,var(--gp2-hero,none));background-size:auto,cover;background-position:center,center 30%}
.gp2-video:hover .gp2-play{transform:scale(1.06)}
.gp2-play{transition:transform .2s ease}
.gp2-reviewcard:hover{box-shadow:0 2px 20px rgba(129,173,243,.12)}
/* Guides */
.gp2-guideart{background-image:var(--gp2-guide,var(--gp2-hero,none));background-size:cover;background-position:center 40%;height:150px}
.gp2-guide{transition:transform .25s ease,box-shadow .25s ease}
.gp2-guide:hover{transform:translateY(-3px)}
/* FAQ: no art band, reading section stays calm */
/* Close */
.gp2-close{position:relative;background-color:#0e141b;background-image:linear-gradient(180deg,#0e141b 0%,rgba(14,20,27,.55) 35%,rgba(14,20,27,.7) 100%),var(--gp2-close,var(--gp2-hero,none));background-size:auto,cover;background-position:center,center 60%}
.gp2-closewrap{padding-top:96px;padding-bottom:96px}
.gp2-closep{text-shadow:0 1px 12px rgba(0,0,0,.6)}
.gp2-h1,.gp2-h2{text-wrap:balance}
@media (max-width:991px){.gp2-root h1.gp2-h1{font-size:46px}.gp2-hero{background-position:center,center,62% 35%}.gp2-hero-grid{min-height:0;padding-top:40px;padding-bottom:56px}}
@media (max-width:479px){.gp2-root h1.gp2-h1{font-size:38px}.gp2-rowname{font-size:13.5px}.gp2-closewrap{padding-top:64px;padding-bottom:64px}.gp2-chips .gp2-chip{height:30px;font-size:12px}}
/* Interactive states */
.gp2-row,.gp2-qty,.gp2-seg span,.gp2-currency{cursor:pointer;-webkit-user-select:none;user-select:none}
.gp2-row{transition:background-color .15s ease}
.gp2-row:hover{background-color:rgba(129,173,243,.07)}
.gp2-qty{transition:background-color .15s ease,color .15s ease,transform .1s ease}
.gp2-qty:hover{background-color:rgba(129,173,243,.3);color:#fff}
.gp2-qty:active{transform:scale(.92)}
.gp2-qty.gp2-qty-off{opacity:.45;cursor:default}
.gp2-qty.gp2-qty-off:hover{background-color:transparent;color:inherit}
.gp2-seg span,.gp2-currency{transition:background-color .15s ease,color .15s ease}
.gp2-seg .gp2-ghost:hover,.gp2-currency:hover{background-color:rgba(129,173,243,.14);color:#fff}
.gp2-trow:not(.gp2-thead){transition:background-color .15s ease}
.gp2-trow:not(.gp2-thead):hover{background-color:rgba(129,173,243,.05)}
.gp2-glass.gp2-faq{transition:box-shadow .2s ease,transform .2s ease}
.gp2-glass.gp2-faq:hover{box-shadow:0 2px 20px rgba(129,173,243,.12)}
.gp2-chip{transition:background-color .15s ease}
.gp2-chip:hover{background-color:rgba(33,196,93,.12)}
/* Phone and tablet fixes. The Designer's small breakpoints stack the cards in a flex column with flex 1 1 0, which collapses them. Grid stacks them at their own height. */
@media (max-width:767px){.gp2-steps,.gp2-guides{display:grid !important;grid-template-columns:1fr !important;grid-auto-rows:auto !important;gap:16px !important}.gp2-steps .gp2-stepx,.gp2-guide{height:auto !important;flex:0 0 auto !important}.gp2-guideart{height:150px !important}.gp2-steps .gp2-stepx{min-height:0 !important;padding-right:116px !important;padding-bottom:20px !important}.gp2-steps .gp2-stepx .gp2-stepart{display:none !important}.gp2-steps .gp2-stepx .gp2-stepimg{width:100px !important;right:4px !important;bottom:-4px !important}.gp2-steps .gp2-stepx .gp2-stepimg-rocket{width:112px !important;right:-4px !important;bottom:-10px !important}.gp2-tag{white-space:nowrap}}
@media (max-width:479px){.gp2-steps .gp2-stepx{padding-right:108px !important;padding-bottom:20px !important}.gp2-row{gap:6px;padding:10px 4px}.gp2-gem{flex:0 0 30px;width:30px;height:30px;border-radius:8px}.gp2-gemcell{gap:6px}.gp2-rowname{font-size:13px}.gp2-rowsub{font-size:10.5px;gap:2px 6px}.gp2-coin{width:12px;height:12px;flex:0 0 12px;margin-right:3px}.gp2-credits{font-size:13px;gap:0;width:auto !important;min-width:0 !important;flex:0 0 auto !important;justify-content:flex-end}.gp2-qtywrap{gap:3px;min-width:0;width:auto;padding:0}.gp2-qty{width:22px;height:22px;min-width:0;padding:0;flex:0 0 22px;font-size:14px}.gp2-qtyn{min-width:14px;width:auto;text-align:center}}
@media (max-width:767px){.gp2-root .gp2-section{padding-top:44px !important;padding-bottom:44px !important}.gp2-hero-grid{padding-top:28px !important;padding-bottom:28px !important;row-gap:28px}.gp2-closewrap{padding-top:52px !important;padding-bottom:52px !important}.gp2-root h2.gp2-h2{margin-bottom:4px}.gp2-sechead{gap:14px}}
/* v10: hover = selected, step cards interactive, currency menu, mobile hero art */
.gp2-root .gp2-row{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px;border-radius:10px;transition:background-color .15s ease}
.gp2-root .gp2-row:hover,.gp2-root .gp2-row-sel{background-color:rgba(129,173,243,.07)}
.gp2-root .gp2-row-sel:hover{background-color:rgba(129,173,243,.1)}
.gp2-steps .gp2-stepx{transition:transform .2s ease,box-shadow .2s ease}
.gp2-steps .gp2-stepx:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(5,8,14,.9),0 0 0 1px rgba(129,173,243,.28)}
.gp2-steps .gp2-stepx .gp2-stepimg{transition:transform .25s ease}
.gp2-steps .gp2-stepx:hover .gp2-stepimg{transform:translateY(-4px) scale(1.04)}
.gp2-seg{display:flex;flex-wrap:wrap;gap:6px}
.gp2-seg span{padding-left:14px;padding-right:14px}
.gp2-listhead{position:relative}
.gp2-curmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:150px;background:#121c2a;border:1px solid rgba(129,173,243,.25);border-radius:12px;padding:6px;box-shadow:0 18px 40px -12px rgba(0,0,0,.85);display:none}
.gp2-curmenu.gp2-open{display:block}
.gp2-curopt{display:flex;justify-content:space-between;gap:14px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;line-height:18px;color:#cbd5e1;-webkit-user-select:none;user-select:none}
.gp2-curopt:hover{background:rgba(129,173,243,.12);color:#fff}
.gp2-curopt.gp2-on{color:#81adf3;font-weight:700}
.gp2-curopt small{color:#8a97a8;font-weight:400}
.gp2-currency.gp2-open{background-color:rgba(129,173,243,.14);color:#fff}
@media (max-width:479px){.gp2-root .gp2-row{margin-left:-6px;margin-right:-6px;padding:10px 6px;border-radius:8px}.gp2-seg span{padding-left:11px;padding-right:11px;font-size:12px}}
@media (max-width:767px){.gp2-hero{background-image:linear-gradient(180deg,rgba(14,20,27,.42) 0%,rgba(14,20,27,.6) 40%,rgba(14,20,27,.93) 78%,#0e141b 100%),linear-gradient(90deg,rgba(10,14,20,.5) 0%,rgba(10,14,20,.1) 60%),var(--gp2-hero,none) !important;background-size:100% 620px,100% 620px,auto 620px !important;background-position:top center,top center,58% 0 !important;background-repeat:no-repeat !important}}
/* v11: qty glyphs drawn with CSS so they sit dead center */
.gp2-qty{position:relative;font-size:0 !important;line-height:0}
.gp2-qty::before,.gp2-qty::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:currentColor;border-radius:1px}
.gp2-qty::before{width:10px;height:2px}
.gp2-qtywrap .gp2-qty:last-child::after,.gp2-qty[aria-label="Add one"]::after{width:2px;height:10px}
@media (max-width:479px){.gp2-qty::before{width:9px}.gp2-qtywrap .gp2-qty:last-child::after,.gp2-qty[aria-label="Add one"]::after{height:9px}}
/* v12: card rows in app layout (name, credits), percent column, extra CTAs */
.gp2-list .gp2-tag{display:none !important}
.gp2-rowname{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.gp2-rowname .gp2-rowcred{display:inline-flex;align-items:center;gap:6px;width:auto !important;min-width:0 !important;flex:0 0 auto !important;justify-content:flex-start;font-size:13px;line-height:18px;font-weight:600;color:#e1e8f1;margin:0}
.gp2-rowname .gp2-rowcred .gp2-coin{width:16px;height:16px;flex:0 0 16px;margin:0}
.gp2-rowsub{color:#8a97a8;font-size:12px;line-height:16px}
.gp2-gemcell{align-items:center}
.gp2-less b{font-weight:800}
.gp2-less i{display:none;font-style:normal;font-weight:500;color:#8a97a8;margin-left:8px}
@media (min-width:768px){.gp2-less i{display:inline}}
.gp2-between .gp2-pill,.gp2-prooffoot .gp2-pill{flex:0 0 auto}
@media (max-width:479px){.gp2-rowname .gp2-rowcred{font-size:12.5px}.gp2-rowname .gp2-rowcred .gp2-coin{width:13px;height:13px;flex:0 0 13px}.gp2-rowsub{font-size:11px}.gp2-between .gp2-pill,.gp2-prooffoot .gp2-pill{width:100%;text-align:center}}
/* v13: savings line under the game name, two-line rows */
.gp2-official{display:flex}
.gp2-official.gp2-saving{margin-top:5px;color:#e1e8f1;font-weight:600}
.gp2-rowname{gap:3px}
/* v14: CMS template. Art comes from CSS variables the page script sets from the Games item. */
[data-gp2-hidden]{display:none !important}
.gp2-guides .w-dyn-list,.gp2-guides .w-dyn-items,.gp2-guides .w-dyn-item,.gp2-faqgrid .w-dyn-list,.gp2-faqgrid .w-dyn-items,.gp2-faqgrid .w-dyn-item{display:contents}
.gp2-guideart{position:relative;overflow:hidden;height:150px;background-size:cover;background-position:center 40%;background-color:#141c28}
.gp2-guideart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.gp2-guidebody{display:flex;flex-direction:column;gap:6px}
.gp2-glass.gp2-faq{display:flex;flex-direction:column;gap:8px}
.gp2-official.gp2-saving{margin-top:7px}
.gp2-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;position:relative;isolation:isolate;background:linear-gradient(180deg,rgba(14,22,34,.9),rgba(10,16,24,.9)) padding-box,linear-gradient(100deg,rgba(143,179,243,.75) 0%,rgba(143,179,243,.18) 45%,rgba(251,191,36,.55) 100%) border-box;border:1px solid transparent;color:#eef3ff;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;white-space:nowrap;box-shadow:0 6px 18px -10px rgba(60,131,246,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.gp2-badge:empty{display:none}
[data-gp2-rows]{display:flex;flex-direction:column}
.gp2-row .gp2-rowname{flex:1 1 auto;min-width:0}
.gp2-row .gp2-qtywrap{margin-left:auto}
@media (max-width:479px){.gp2-qty{width:30px;height:30px;flex:0 0 30px}.gp2-qty::before{width:11px}.gp2-qtywrap .gp2-qty:last-child::after,.gp2-qty[aria-label="Add one"]::after{height:11px}.gp2-qtywrap{gap:5px}.gp2-qtyn{min-width:16px}.gp2-badge{font-size:11.5px;padding:3px 10px}}
/* v15: step 2 art fades harder so the text stays clear; close section darker behind bright art */
.gp2-steps .gp2-stepx:nth-child(2){background:linear-gradient(90deg,rgba(18,28,42,.98) 0%,rgba(18,28,42,.97) 50%,rgba(18,28,42,.74) 72%,rgba(18,28,42,.18) 100%) padding-box,var(--gp2-step,none) 100% 50%/auto 125% no-repeat padding-box,linear-gradient(135deg,rgba(129,173,243,.25),rgba(129,173,243,0) 50%,rgba(129,173,243,.15)) border-box !important}
@media (max-width:767px){.gp2-steps .gp2-stepx:nth-child(2){background:linear-gradient(90deg,rgba(18,28,42,.98) 0%,rgba(18,28,42,.97) 58%,rgba(18,28,42,.82) 78%,rgba(18,28,42,.3) 100%) padding-box,var(--gp2-step,none) 100% 50%/auto 120% no-repeat padding-box,linear-gradient(135deg,rgba(129,173,243,.25),rgba(129,173,243,0) 50%,rgba(129,173,243,.15)) border-box !important}}
.gp2-close{background-image:linear-gradient(180deg,#0e141b 0%,rgba(14,20,27,.74) 30%,rgba(14,20,27,.72) 70%,rgba(14,20,27,.84) 100%),radial-gradient(ellipse 60% 70% at 50% 45%,rgba(10,15,22,.5),rgba(10,15,22,0) 70%),var(--gp2-close,var(--gp2-hero,none));background-size:auto,auto,cover;background-position:center,center,center 60%}
/* v16: tablet and foldable hero: the copy column had a 520px flex basis, which became a 520px height once the hero stacks, leaving a hole under the note. Coin icon in the price table credits column, same as the order card. */
@media (max-width:991px){.gp2-hero-grid{align-items:stretch !important}.gp2-hero-copy{flex:0 0 auto !important}.gp2-hero-grid>.gp2-card{flex:0 0 auto !important;width:100% !important;max-width:none !important}}
.gp2-tblwrap .gp2-tcell1{display:inline-flex;align-items:center;gap:7px}
.gp2-tblwrap .gp2-tcell1 .gp2-coin{width:16px;height:16px;flex:0 0 16px;margin:0}
@media (max-width:479px){.gp2-tblwrap .gp2-tcell1{gap:5px}.gp2-tblwrap .gp2-tcell1 .gp2-coin{width:14px;height:14px;flex:0 0 14px}}
/* v17: credits coin = the app's coin (gold rocket coin) */
.gp2-coin{background-image:url("https://cdn.prod.website-files.com/66100f8fe4a19011eb6a4c5c/6ada3fd0f6e0fd1449479dab_packsify-credit-coin-rocket.png");background-size:104%;box-shadow:none}
/* v18: phone polish. Step 2 art reads as a soft backdrop (text column stays dark), mascots never show a box, step cards get the same gap as the rest of the phone layout. */
.gp2-steps .gp2-stepx .gp2-stepimg{background:transparent !important;mix-blend-mode:normal}
@media (max-width:767px){
.gp2-steps .gp2-stepx:nth-child(2){background:linear-gradient(90deg,rgba(18,28,42,.99) 0%,rgba(18,28,42,.98) 56%,rgba(18,28,42,.9) 72%,rgba(18,28,42,.62) 86%,rgba(18,28,42,.4) 100%) padding-box,var(--gp2-step,none) 100% 40%/auto 135% no-repeat padding-box,linear-gradient(135deg,rgba(129,173,243,.25),rgba(129,173,243,0) 50%,rgba(129,173,243,.15)) border-box !important}
.gp2-steps .gp2-stepx .gp2-stepp,.gp2-steps .gp2-stepx p{max-width:34ch}
}
@media (max-width:479px){
.gp2-steps .gp2-stepx:nth-child(2){background:linear-gradient(90deg,rgba(18,28,42,.99) 0%,rgba(18,28,42,.98) 60%,rgba(18,28,42,.9) 76%,rgba(18,28,42,.66) 90%,rgba(18,28,42,.48) 100%) padding-box,var(--gp2-step,none) 100% 40%/auto 135% no-repeat padding-box,linear-gradient(135deg,rgba(129,173,243,.25),rgba(129,173,243,0) 50%,rgba(129,173,243,.15)) border-box !important}
}
/* v19: guides grid. The Designer flex row with flex 1 1 0 made one card fill the whole width and four cards squeeze into one row. Fixed columns: 3 on desktop, 2 on tablet, 1 on phone (phone rule above). */
@media (min-width:768px){.gp2-guides{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:20px !important;align-items:stretch}.gp2-guides .gp2-guide{flex:none !important;width:auto !important;max-width:none !important;height:auto !important}}
@media (min-width:992px){.gp2-guides{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
/* v20: the order card border, badge and glow take the game's own colors from the CMS (Color 1, Color 2). Falls back to the site blue and gold when a game has no colors yet. */
.gp2-glass.gp2-strong{background:linear-gradient(135deg,rgba(14,22,34,.86) 0%,rgba(12,19,28,.84) 50%,rgba(10,16,22,.84) 100%) padding-box,linear-gradient(135deg,color-mix(in srgb,var(--gp2-c1,#81adf3) 58%,transparent) 0%,color-mix(in srgb,var(--gp2-c1,#81adf3) 16%,transparent) 30%,color-mix(in srgb,var(--gp2-c1,#81adf3) 8%,transparent) 50%,color-mix(in srgb,var(--gp2-c2,#81adf3) 16%,transparent) 70%,color-mix(in srgb,var(--gp2-c2,#fbbf24) 42%,transparent) 100%) border-box !important;box-shadow:0 2px 22px color-mix(in srgb,var(--gp2-c1,#81adf3) 14%,transparent),0 30px 70px -20px rgba(0,0,0,.85)}
.gp2-badge{background:linear-gradient(180deg,rgba(14,22,34,.9),rgba(10,16,24,.9)) padding-box,linear-gradient(100deg,color-mix(in srgb,var(--gp2-c1,#8fb3f3) 78%,transparent) 0%,color-mix(in srgb,var(--gp2-c1,#8fb3f3) 20%,transparent) 45%,color-mix(in srgb,var(--gp2-c2,#fbbf24) 58%,transparent) 100%) border-box;box-shadow:0 6px 18px -10px color-mix(in srgb,var(--gp2-c1,#3c83f6) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.06)}
.gp2-hero-copy .gp2-eyebrow::before{background:var(--gp2-c1,#fbbf24)}
/* v21: CTA with coin and short value table rules follow the price box block */
/* PRICE BOX STYLES START (swap this block to restyle the "Your price" section). Option D "Receipt": no panel, store line, Packsify line, dashed rule, what you pay less. */
.gp2-pricebox{display:flex;flex-direction:column;margin-top:-2px}
.gp2-pricebox[hidden],.gp2-pricebox [hidden]{display:none !important}
.gp2-pbtop{display:flex;flex-direction:column;gap:8px;padding:4px;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.gp2-pbtop:focus-visible{outline:2px solid #81adf3;outline-offset:2px}
.gp2-pbl1{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;line-height:20px;color:#9aa6b6}
.gp2-pbstore{text-decoration:line-through}
.gp2-pbl2{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.gp2-pbwith{font-size:15px;line-height:20px;font-weight:700;color:#e1e8f1}
.gp2-pbpay{font-size:24px;line-height:30px;font-weight:800;letter-spacing:-.01em;color:#fff;white-space:nowrap}
.gp2-pbl3{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px dashed rgba(225,232,241,.18);padding-top:8px}
.gp2-pbless{font-size:13px;line-height:18px;color:#8fe0a8;font-weight:600}
.gp2-pbhint{margin-left:auto;display:inline-flex;align-items:center;gap:4px;color:#9db4ff;font-size:13px;font-weight:600;flex-shrink:0;transition:color .15s ease}
.gp2-pbtop:hover .gp2-pbhint{color:#c3d1ff}
.gp2-pbchev{transition:transform .18s ease}
.gp2-pbopen .gp2-pbchev{transform:rotate(180deg)}
.gp2-pbdet{display:flex;flex-direction:column;gap:8px;padding:2px 4px 4px;cursor:pointer}
.gp2-pbtxt{font-size:13px;line-height:1.5;color:#c9d3df}
.gp2-pbtxt b{color:#e1e8f1;font-weight:600}
.gp2-pbfine{font-size:12px;line-height:1.5;color:#9aa6b6}
@media (max-width:479px){.gp2-pbpay{font-size:22px}}
.gp2-pbempty .gp2-pbtop{cursor:default}
.gp2-pbempty .gp2-pbstore{text-decoration:none}
.gp2-pbempty .gp2-pbpay{color:#5d6878}
.gp2-pbempty .gp2-pbless{color:#8a97a8;font-weight:500}
.gp2-pbempty .gp2-pbhint{visibility:hidden}
/* PRICE BOX STYLES END */
.gp2-ctawide.gp2-ctahas{align-items:center;gap:8px}
.gp2-ctacred{display:inline-flex;align-items:center;gap:4px}
.gp2-ctacred .gp2-coin{width:16px;height:16px;flex:0 0 16px;margin:0}
.gp2-seg .gp2-segmore{cursor:default;padding:0 4px !important;align-self:center;font-size:13px;color:#8a97a8;background:none !important}
.gp2-tshort .gp2-trow{grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr) !important;column-gap:12px}
.gp2-tmore{align-self:flex-start;background:none;border:0;padding:4px 0;color:#81adf3;font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.gp2-tmore:hover{color:#b9cffa}
.gp2-tmore:focus-visible{outline:2px solid #81adf3;outline-offset:2px;border-radius:4px}
@media (max-width:479px){.gp2-tshort .gp2-trow{column-gap:8px;font-size:13px}}
/* v22: a soft gold light runs around the savings badge border (static when the visitor prefers less motion) */
@property --gp2-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.gp2-badge::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--gp2-ang),transparent 0deg,transparent 240deg,rgba(251,191,36,.35) 290deg,rgba(255,236,170,.9) 330deg,#fff 342deg,rgba(255,236,170,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:gp2-badge-run 3.6s linear infinite}
@keyframes gp2-badge-run{to{--gp2-ang:360deg}}
/* v23: the same running light on the order card CTA, only while the cart has something in it (gp2-ctahas is set by the script with the button text), soft white and light blue, half a loop behind the badge */
.gp2-ctawide.gp2-ctahas::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--gp2-ang),transparent 0deg,transparent 240deg,rgba(191,214,255,.35) 290deg,rgba(226,236,255,.9) 330deg,#fff 342deg,rgba(226,236,255,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:gp2-badge-run 3.6s linear -1.8s infinite}
@media (prefers-reduced-motion:reduce){.gp2-badge::after,.gp2-ctawide.gp2-ctahas::after{animation:none;display:none}}
/* v24: the order card fits a 900px tall screen and never moves the hero. Tighter rows on tablet and desktop (taps stay 30px), hero content aligned to the top with fixed padding and a fixed minimum height, so a taller card does not shift the left column or rescale the art. */
@media (min-width:768px){
.gp2-hero-grid>.gp2-card{gap:12px !important}
.gp2-root .gp2-card .gp2-row{padding-top:8px !important;padding-bottom:8px !important}
.gp2-card .gp2-gem{width:36px !important;height:36px !important;flex:0 0 36px !important;border-radius:9px}
.gp2-card .gp2-qty{width:30px !important;height:30px !important;flex:0 0 30px !important}
}
@media (min-width:992px){
.gp2-hero-grid{align-items:flex-start !important;padding-top:40px !important;padding-bottom:24px !important;min-height:980px}
.gp2-hero-grid>.gp2-card,.gp2-hero-grid>.gp2-hero-copy{align-self:flex-start !important}
.gp2-hero-copy{padding-top:112px}
}
/* v24: the line under the button wraps evenly (no lone last word), and the muted last line of the currency menu */
.gp2-card .gp2-note{text-wrap:balance}
.gp2-curmore{margin-top:4px;padding:8px 10px 4px;border-top:1px solid rgba(129,173,243,.16);font-size:12px;line-height:16px;color:#6f7d90;white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none}
@media (min-width:992px) and (max-height:860px){.gp2-hero-grid{padding-top:16px !important}.gp2-root .gp2-card .gp2-row{padding-top:6px !important;padding-bottom:6px !important}}
/* v25: How credits work (approved canvas): title and intro stacked, USD EUR GBP chips, amount table, one footer line */
#gp2-table .gp2-sechead{flex-direction:column;align-items:flex-start;gap:20px}
#gp2-table .gp2-sechead .gp2-p{max-width:620px;font-size:16px;line-height:1.6;color:#c9d3df}
.gp2-seg{align-items:center;gap:8px}
.gp2-seg .gp2-cchip{font-family:Inter,system-ui,sans-serif;font-size:13px;line-height:18px;font-weight:600;border-radius:999px;padding:7px 14px;border:1px solid rgba(225,232,241,.2);background:none;color:#c9d3df;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.gp2-seg .gp2-cchip:hover{background-color:rgba(129,173,243,.14);color:#fff}
.gp2-seg .gp2-cchip.gp2-on{background:linear-gradient(180deg,#8fb3f3,#5f88de);border-color:transparent;color:#fff;font-weight:700}
.gp2-seg .gp2-cchip:focus-visible{outline:2px solid #81adf3;outline-offset:2px}
.gp2-seg .gp2-segmore{font-size:13px;color:#8a96a8;margin-left:6px;padding:0 !important;cursor:default}
.gp2-root .gp2-ctbl{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;padding:0 !important}
.gp2-crow{display:grid;grid-template-columns:1.3fr 1fr 1fr .9fr;gap:12px;align-items:center;padding:14px 20px;font-size:15px;line-height:22px;color:#e1e8f1}
.gp2-crow+.gp2-crow{border-top:1px solid rgba(225,232,241,.08)}
.gp2-crow>span:not(:first-child){text-align:right}
.gp2-chead{font-size:12px;line-height:18px;font-weight:700;color:#9aa6b6;padding-top:16px;padding-bottom:12px}
.gp2-cload{display:flex;align-items:center;gap:8px;font-weight:600}
.gp2-cload .gp2-coin{width:16px;height:16px;flex:0 0 16px;margin:0}
.gp2-cpay{font-weight:700}
.gp2-cstore{color:#8a96a8;text-decoration:line-through}
.gp2-cless{color:#8fe0a8;font-weight:700}
.gp2-cm{display:none}
#gp2-table .gp2-between .gp2-finep{font-size:13px;line-height:1.6;color:#9aa6b6}
.gp2-allpacks{background:none;border:0;padding:0;font:inherit;color:#9db4ff;font-weight:600;cursor:pointer}
.gp2-allpacks:hover{color:#c3d1ff}
.gp2-allpacks:focus-visible{outline:2px solid #81adf3;outline-offset:2px;border-radius:4px}
@media (max-width:600px){
.gp2-root .gp2-ctbl{border-radius:16px}
.gp2-crow.gp2-chead{display:none}
.gp2-crow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"load pay" "less store";row-gap:3px;column-gap:12px;padding:14px 16px}
.gp2-chead+.gp2-crow{border-top:0}
.gp2-cload{grid-area:load;font-size:14px;line-height:20px;font-weight:700}
.gp2-cload .gp2-coin{display:none}
.gp2-cpay{grid-area:pay;font-size:15px;line-height:20px}
.gp2-cless{grid-area:less;font-size:12px;line-height:16px;font-weight:600;text-align:left !important}
.gp2-cstore{grid-area:store;font-size:12px;line-height:16px}
.gp2-cd{display:none}.gp2-cm{display:inline}
#gp2-table .gp2-sechead .gp2-p{font-size:15px}
.gp2-seg{gap:6px}
.gp2-seg .gp2-segmore{flex-basis:100%;margin:0;font-size:12px}
#gp2-table .gp2-between{flex-direction:column;align-items:stretch;gap:14px}
#gp2-table .gp2-between .gp2-finep{font-size:12px}
#gp2-table .gp2-between .gp2-pill{width:100%;text-align:center}
}
/* v25: same layout as the homepage. Container 1240px with a 20px side gutter, 48px between sections (36px on phones), no divider lines, homepage glass cards with the 1px gradient ring that turns on hover, homepage button shadow, homepage hero type scale. The hero art sits in a fixed height layer that fades into the page, so it never rescales and has no edge. */
.gp2-root{--gp2-ring:linear-gradient(135deg,rgba(129,173,243,.5) 0%,rgba(129,173,243,.12) 30%,rgba(129,173,243,.06) 50%,rgba(129,173,243,.12) 70%,rgba(129,173,243,.4) 100%);--gp2-ring-rev:linear-gradient(45deg,rgba(129,173,243,.5) 0%,rgba(129,173,243,.12) 30%,rgba(129,173,243,.06) 50%,rgba(129,173,243,.12) 70%,rgba(129,173,243,.4) 100%);--gp2-fill:linear-gradient(135deg,hsl(217 36% 13% / .72),hsl(215 35% 11% / .68),hsl(215 32% 10% / .68))}
.gp2-root .gp2-wrap{max-width:1280px !important;padding-left:20px !important;padding-right:20px !important}
.gp2-root .gp2-section{padding-top:24px !important;padding-bottom:24px !important}
.gp2-root #gp2-alliance{padding-top:24px !important;padding-bottom:24px !important}
.gp2-root .gp2-divider{border-top:0 !important;border-bottom:0 !important}
#gp2-table::before{display:none !important}
.gp2-root .gp2-glass:not(.gp2-strong){background:var(--gp2-fill) !important;border:0 !important;box-shadow:0 20px 50px -30px rgba(0,0,0,.7) !important}
.gp2-root .gp2-glass:not(.gp2-strong)::before{display:none}
.gp2-root .gp2-glass:not(.gp2-strong)::after{top:0;right:0;bottom:0;left:0;height:auto;padding:1px;z-index:1;background:var(--gp2-ring);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:background .2s}
.gp2-root .gp2-glass:not(.gp2-strong):hover::after,.gp2-root .gp2-glass:not(.gp2-strong):focus-within::after{background:var(--gp2-ring-rev)}
.gp2-root .gp2-glass:not(.gp2-strong)>*{z-index:2}
.gp2-root .gp2-faq,.gp2-root .gp2-alliance,.gp2-root .gp2-video,.gp2-root .gp2-guide{border-radius:24px !important}
.gp2-root .gp2-reviewcard{border-radius:20px !important}
.gp2-root .gp2-step{border-radius:16px !important}
.gp2-root .gp2-steps .gp2-stepx:nth-child(2){background:linear-gradient(90deg,rgba(18,28,42,.98) 0%,rgba(18,28,42,.97) 50%,rgba(18,28,42,.74) 72%,rgba(18,28,42,.18) 100%),var(--gp2-step,none) 100% 50%/auto 125% no-repeat,var(--gp2-fill) !important}
.gp2-root .gp2-close{background:none !important}
.gp2-root .gp2-close .gp2-closewrap{max-width:1240px !important;width:calc(100% - 40px);margin:24px auto 64px;padding:40px !important;border-radius:32px;display:grid !important;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:10px;align-items:center;justify-items:start;text-align:left;overflow:hidden}
.gp2-root .gp2-close .gp2-h2{grid-column:1;text-align:left !important;text-shadow:none}
.gp2-root .gp2-close .gp2-closep{grid-column:1;margin:0;text-align:left;text-shadow:none}
.gp2-root .gp2-close .gp2-ctafinal{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end}
.gp2-root .gp2-close .gp2-finep12{grid-column:1 / -1;text-align:left}
.gp2-root .gp2-pill{box-shadow:0 4px 14px rgba(60,131,246,.16),inset 0 1px 0 rgba(255,255,255,.3) !important}
.gp2-root .gp2-pill:hover{box-shadow:0 6px 18px rgba(60,131,246,.22),inset 0 1px 0 rgba(255,255,255,.35) !important}
.gp2-root h1.gp2-h1{font-size:50px;line-height:1.02;letter-spacing:-.03em;font-weight:900}
.gp2-root .gp2-lead{font-size:17px;line-height:1.5}
.gp2-hero-copy .gp2-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em}
@media (min-width:992px){
.gp2-hero{background:none !important;background-color:transparent !important}
.gp2-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:1040px;z-index:-1;pointer-events:none;background-color:#0e141b;background-image:linear-gradient(180deg,rgba(14,20,27,0) 0%,rgba(14,20,27,0) 52%,#0e141b 100%),linear-gradient(90deg,rgba(10,14,20,.92) 0%,rgba(10,14,20,.78) 38%,rgba(10,14,20,.35) 68%,rgba(10,14,20,.45) 100%),var(--gp2-hero,none);background-size:100% 100%,100% 100%,cover;background-position:center,center,center 35%;background-repeat:no-repeat}
.gp2-hero-grid{min-height:0 !important;padding-bottom:48px !important}
.gp2-hero-copy{padding-top:80px}
}
@media (max-width:1100px){.gp2-root h1.gp2-h1{font-size:42px}}
@media (max-width:767px){.gp2-root .gp2-steps .gp2-stepx:nth-child(2){background:linear-gradient(90deg,rgba(18,28,42,.99) 0%,rgba(18,28,42,.98) 56%,rgba(18,28,42,.9) 72%,rgba(18,28,42,.62) 86%,rgba(18,28,42,.4) 100%),var(--gp2-step,none) 100% 40%/auto 135% no-repeat,var(--gp2-fill) !important}}
@media (max-width:640px){
.gp2-root .gp2-wrap{padding-left:16px !important;padding-right:16px !important}
.gp2-root .gp2-section,.gp2-root #gp2-alliance{padding-top:18px !important;padding-bottom:18px !important}
.gp2-root h1.gp2-h1{font-size:32px;line-height:1.05}
.gp2-root .gp2-lead{font-size:15px}
.gp2-root .gp2-close .gp2-closewrap{width:calc(100% - 32px);margin:18px auto 56px;padding:28px 22px !important;border-radius:24px;grid-template-columns:1fr}
.gp2-root .gp2-close .gp2-ctafinal{grid-column:1;grid-row:auto;justify-self:stretch;width:100%;text-align:center}
}
@media (max-width:479px){.gp2-root .gp2-steps .gp2-stepx:nth-child(2){background:linear-gradient(90deg,rgba(18,28,42,.99) 0%,rgba(18,28,42,.98) 60%,rgba(18,28,42,.9) 76%,rgba(18,28,42,.66) 90%,rgba(18,28,42,.48) 100%),var(--gp2-step,none) 100% 40%/auto 135% no-repeat,var(--gp2-fill) !important}}
@media (min-width:992px){.gp2-hero-copy{padding-top:150px}}
#gp2-table .gp2-seg{border:0 !important;padding:0 !important;background:none !important;box-shadow:none !important;border-radius:0 !important}
.gp2-root .gp2-close .gp2-h2{font-size:30px !important;line-height:1.2 !important;font-weight:800 !important;letter-spacing:-.01em}
.gp2-root .gp2-close .gp2-closep{font-size:15px;line-height:1.5;max-width:560px}
@media (max-width:640px){.gp2-root h2.gp2-h2{font-size:24px}.gp2-root .gp2-close .gp2-h2{font-size:24px !important}}
/* v25: step 2 item cutout, mascot size and place, on top of the step art */
.gp2-steps .gp2-stepx .gp2-stepimg.gp2-stepimg-item{width:116px !important;right:8px !important;bottom:4px !important}
@media (max-width:767px){.gp2-steps .gp2-stepx .gp2-stepimg.gp2-stepimg-item{width:92px !important;right:8px !important;bottom:2px !important}}
@media (max-width:600px){.gp2-seg{gap:6px 8px}}
/* v25: game tile zooms inside its frame on hover of the card header, with one soft sheen and a brighter frame. Off on touch and with reduced motion. */
.gp2-gametile{position:relative;overflow:hidden;isolation:isolate;background-image:none !important;box-shadow:0 6px 16px -4px rgba(0,0,0,.8) !important;outline:1px solid rgba(255,255,255,.14);outline-offset:-1px;transition:box-shadow .4s cubic-bezier(.2,.7,.2,1),outline-color .4s cubic-bezier(.2,.7,.2,1)}
.gp2-gametile::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background-image:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35) 100%),var(--gp2-tile,var(--gp2-hero,none));background-size:auto,cover;background-position:center,18% 78%;transform:scale(1);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.gp2-gametile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-130%)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.gp2-gamerow:hover .gp2-gametile::before,.gp2-gamerow:focus-within .gp2-gametile::before{transform:scale(1.1)}
.gp2-gamerow:hover .gp2-gametile::after,.gp2-gamerow:focus-within .gp2-gametile::after{animation:gp2-sheen .9s cubic-bezier(.2,.7,.2,1) 1 both}
.gp2-gamerow:hover .gp2-gametile,.gp2-gamerow:focus-within .gp2-gametile{outline-color:rgba(255,255,255,.32);box-shadow:0 6px 16px -4px rgba(0,0,0,.8),0 0 14px -2px color-mix(in srgb,var(--gp2-c1,#81adf3) 45%,transparent) !important}
}
@keyframes gp2-sheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}