/* Playable ad mini-games: shared by the demo feed (/demo), the presentation (/) and the review page.
   Everything is sized in em from a root that follows the card width (1em = 16px at 360px wide), so the
   same art fits the feed card, the presentation phone and the comparison page. */
.lg-playable,.biz-play .playable-host{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;padding:3.9em .6em 7.6em;color:#fff;font-family:var(--fd-font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif);-webkit-user-select:none;user-select:none;touch-action:manipulation;container-type:size;font-size:16px}
.pl-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:.4em;width:100%;height:100%;max-width:26em;margin:0 auto;overflow:visible;font-size:min(calc(100cqw / 330 * 16),calc(100cqh / var(--dh,520) * 16));--font:var(--fd-font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif);--display:var(--fd-display,-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif)}
.pl-top{position:absolute;left:0;right:0;top:-3.2em;display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;font:600 .75em/1 var(--font);letter-spacing:.04em}
.pl-badge{padding:.5em .8em;border-radius:999px;background:#ffffff26;box-shadow:inset 0 0 0 .5px #ffffff59;text-transform:uppercase;font-size:.9em}
.pl-game{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:.4em;font:700 1.15em/1 var(--display);letter-spacing:-.01em;text-shadow:0 1px 8px #0008}.pl-game img{width:2em;height:2em;border-radius:.5em;box-shadow:0 .2em .5em #0008}
.pl-sound{width:2.4em;height:2.4em;padding:0;border:0;border-radius:50%;background:#ffffff26;box-shadow:inset 0 0 0 .5px #ffffff59;font-size:1em;line-height:1;cursor:pointer}
.pl-board{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:0}
.pl-hint{min-height:1.2em;font:500 .875em/1.2 var(--font);color:#fffc;text-shadow:0 1px 6px #0009;animation:plPulse 1.6s ease-in-out infinite}
@keyframes plPulse{50%{opacity:.55}}
.pl-flash{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.6);padding:.5em 1em;border-radius:.9em;background:var(--pl-accent);color:#1a1200;font:800 1.15em/1 var(--display);letter-spacing:-.01em;opacity:0;pointer-events:none;z-index:5;box-shadow:0 10px 30px -8px #000a;white-space:nowrap}
.pl-flash.is-on{animation:plFlash 1s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes plFlash{15%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}70%{opacity:1;transform:translate(-50%,-60%) scale(1)}100%{opacity:0;transform:translate(-50%,-80%) scale(.95)}}
.pl-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.pl-banner{position:absolute;left:50%;top:42%;z-index:7;transform:translate(-50%,-50%);text-align:center;pointer-events:none;animation:plBanner 1.8s cubic-bezier(.2,.9,.25,1) forwards}
.pl-banner b{display:block;font:900 2.4em/1 var(--display);letter-spacing:-.03em;color:#fff;-webkit-text-stroke:.03em #5a3a00;text-shadow:0 .08em 0 #b8780a,0 .2em .6em #000c}
.pl-banner.is-gold b{background:linear-gradient(#fff6c0,#ffd34d 45%,#f39c12 70%,#ffe28a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0;filter:drop-shadow(0 .08em 0 #8a5a05) drop-shadow(0 .3em .6em #000a)}
.pl-banner.is-red b{color:#ff5e5e;-webkit-text-stroke:.03em #5a0000;text-shadow:0 .08em 0 #8a0000,0 .2em .6em #000c}
.pl-banner i{display:block;margin-top:.3em;font:700 1em/1 var(--font);color:#fff;text-shadow:0 1px 6px #000}
@keyframes plBanner{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}30%{transform:translate(-50%,-50%) scale(1)}85%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.05)}}
.is-win{animation:plWin .6s ease-in-out 2}
@keyframes plWin{50%{filter:brightness(1.3) saturate(1.3)}}
.pl-btn,.sl-spin,.dd-roll,.bg-bingo{min-height:3em;padding:0 1.9em;border:0;border-radius:1.5em;background:linear-gradient(#ffe28a,var(--pl-accent) 50%,color-mix(in srgb,var(--pl-accent) 70%,#000));color:#1a1200;font:900 1.1em/1 var(--display);letter-spacing:.04em;box-shadow:inset 0 .12em 0 #fff9,inset 0 -.15em 0 #0003,0 .5em 1.2em -.4em #000a;cursor:pointer;transition:transform .1s,filter .2s}
.pl-btn:active,.sl-spin:active,.dd-roll:active,.bg-bingo:active{transform:scale(.95)}
.pl-btn:disabled,.sl-spin:disabled,.dd-roll:disabled{filter:saturate(.4) brightness(.8)}

/* ---- slot cabinet ---- */
.sl-cab{position:relative;width:100%;padding:.6em .7em .8em;border-radius:1.4em;background:linear-gradient(160deg,#3a1468,#1b0638 55%,#2a0d4f);box-shadow:inset 0 0 0 .18em #f3c25a,inset 0 0 0 .3em #7a4a08,0 1.4em 2.4em -1em #000;display:flex;flex-direction:column;align-items:center;gap:.5em}
.sl-head{width:100%;display:flex;flex-direction:column;align-items:center;gap:.3em}
.sl-jack{display:flex;align-items:baseline;gap:.5em;padding:.3em 1em;border-radius:999px;background:#000000a6;box-shadow:inset 0 0 0 .1em #f3c25a}
.sl-jack small{font:800 .6em/1 var(--font);color:#f3c25a;letter-spacing:.12em}.sl-jack b{font:900 1.05em/1 var(--display);color:#fff3b0;font-variant-numeric:tabular-nums;letter-spacing:.02em;text-shadow:0 0 .4em #ffd34d}
.sl-lights{display:flex;gap:.35em}.sl-lights i{width:.5em;height:.5em;border-radius:50%;background:#ffe9a8;box-shadow:0 0 .4em #ffd34d;animation:slLight 1.1s steps(1) infinite;animation-delay:calc(var(--i) * -.08s)}
@keyframes slLight{50%{background:#7a4a08;box-shadow:none}}
.sl-window{position:relative;display:flex;gap:.3em;padding:.35em;border-radius:.9em;background:#000;box-shadow:inset 0 0 0 .12em #f3c25a,0 0 1.4em #ffd34d33;overflow:hidden}
.sl-reel{position:relative;width:5.6em;height:12.6em;overflow:hidden;border-radius:.5em;background:linear-gradient(#e9e9ee,#fff 20%,#fff 80%,#d6d6dd)}
.sl-strip{position:absolute;left:0;top:0;width:100%;will-change:transform}
.sl-strip.is-spinning{filter:blur(.08em)}
.sl-sym{height:4.2em;display:grid;place-items:center;padding:.3em}.sl-sym svg{width:3.4em;height:3.4em;filter:drop-shadow(0 .1em .15em #0005)}
.sl-sym.is-hit{animation:slHit .5s ease-in-out 4}
@keyframes slHit{50%{transform:scale(1.2);filter:brightness(1.3) drop-shadow(0 0 .6em #ffd34d)}}
.sl-payline{position:absolute;left:0;right:0;top:50%;height:.14em;margin-top:-.07em;background:#ff3b3b;opacity:.75;pointer-events:none;box-shadow:0 0 .4em #ff3b3b}
.is-win .sl-payline{opacity:1;animation:slLine .35s step-end infinite}
@keyframes slLine{50%{background:#ffd34d;box-shadow:0 0 .8em #ffd34d}}
.sl-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#000a,#0000 22%,#0000 78%,#000a)}
.sl-bar{display:flex;justify-content:space-between;width:100%;padding:.4em .8em;border-radius:.7em;background:#000000a6;box-shadow:inset 0 0 0 .08em #f3c25a66}
.sl-bar div{display:flex;flex-direction:column;align-items:center;gap:.15em}.sl-bar small{font:700 .55em/1 var(--font);color:#f3c25a;letter-spacing:.12em}.sl-bar b{font:800 .95em/1 var(--display);color:#fff;font-variant-numeric:tabular-nums}
.sl-winbox b{color:#ffe28a}
.sl-spin{min-width:9em}

/* ---- bingo room ---- */
.bg-room{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:.5em;padding:.4em .2em .2em}
.bg-sky{position:absolute;inset:-5em -1em -1em;z-index:-1;border-radius:2em;background:radial-gradient(60% 40% at 50% 0%,#5aa9ff66,#0000 70%)}
.bg-tube{display:flex;align-items:center;gap:.6em;height:4.6em}
.bg-ball{--c:#2f80ed;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--c) 45%,color-mix(in srgb,var(--c) 60%,#000) 100%);color:#fff;font:900 1em/1 var(--display);box-shadow:0 .6em 1.2em -.4em #000c,inset 0 -.3em .6em #0004;text-shadow:0 1px 2px #0008}
.bg-ball span{display:grid;place-items:center;width:62%;height:62%;border-radius:50%;background:#fff;color:#222;text-shadow:none;line-height:.95;text-align:center;font-size:.9em}
.bg-big{width:4.4em;height:4.4em}.bg-big span{font-size:1em}
.bg-recent{display:flex;gap:.3em}.bg-small{width:2.1em;height:2.1em;font-size:.6em}.bg-small span{font-size:.95em}
.bg-card{width:100%;max-width:17.5em;padding:.5em;border-radius:1em;background:linear-gradient(#fff,#eef3f6);box-shadow:0 1em 2.4em -.8em #000,inset 0 0 0 .15em #fff}
.bg-head{display:grid;grid-template-columns:repeat(5,1fr);gap:.25em;margin-bottom:.25em}.bg-head b{text-align:center;padding:.25em 0;border-radius:.4em;background:var(--c);color:#fff;font:900 1em/1.3 var(--display);text-shadow:0 1px 2px #0006}
.bg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.25em}
.bg-grid span{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:.5em;background:#f4f7f9;color:#1b2b3a;font:800 1.05em/1 var(--font);cursor:pointer;box-shadow:inset 0 0 0 .06em #d7dfe6;transition:transform .15s}
.bg-grid span:active{transform:scale(.92)}
.bg-grid span{isolation:isolate}
.bg-grid span.is-daub{color:#fff;text-shadow:0 1px 2px #0008}
.bg-grid span.is-daub::after{content:"";position:absolute;inset:8%;z-index:-1;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 40%,#fff),var(--c) 60%,color-mix(in srgb,var(--c) 70%,#000));box-shadow:0 .2em .4em -.1em #0007}
.bg-grid span>i{font-style:normal}
.bg-grid span.is-line{animation:bgLine .5s ease-in-out 4}
@keyframes bgLine{50%{transform:scale(1.15);filter:brightness(1.3)}}
.bg-foot{display:flex;align-items:center;justify-content:space-between;gap:.8em;width:100%;max-width:17.5em;margin-top:.2em}
.bg-power{position:relative;display:flex;gap:.3em;padding:.5em .6em .9em;border-radius:.8em;background:#00000059;box-shadow:inset 0 0 0 .5px #ffffff40}
.bg-power i{width:1.4em;height:.7em;border-radius:.35em;background:#ffffff2e;box-shadow:inset 0 0 0 .5px #ffffff40;transition:background .2s,box-shadow .2s}
.bg-power i.is-on{background:linear-gradient(#ffe28a,#f39c12);box-shadow:0 0 .5em #ffd34d}
.bg-power small{position:absolute;left:0;right:0;bottom:.15em;text-align:center;font:800 .5em/1 var(--font);letter-spacing:.1em;color:#fffa}
.bg-power.is-ready{animation:plWin .4s ease-in-out 3}
.bg-bingo{min-width:7em;font-size:1.05em;opacity:.55}
.bg-bingo.is-ready{opacity:1;animation:bgReady .7s ease-in-out infinite}
@keyframes bgReady{50%{transform:scale(1.08);box-shadow:0 0 1.2em #ffd34d,inset 0 .12em 0 #fff9}}

/* ---- tri-peaks farm ---- */
.tp-farm{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:.4em;padding:.3em 0 .2em}
.tp-sky{position:absolute;inset:-5em -1em -1em;z-index:-2;border-radius:2em;background:radial-gradient(70% 45% at 50% 0%,#bfe8ff66,#0000 70%)}
.tp-sun{position:absolute;right:1.2em;top:-3.2em;width:3em;height:3em;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff6c0,#ffd34d 60%,#f39c12);box-shadow:0 0 2em #ffd34d88;animation:tpSun 6s ease-in-out infinite}
@keyframes tpSun{50%{transform:translateY(.3em)}}
.tp-hills{position:absolute;left:-1em;right:-1em;bottom:-.5em;height:9em;z-index:-1;border-radius:50% 50% 0 0/100% 100% 0 0;background:radial-gradient(80% 60% at 30% 100%,#4caf50,#2e7d32 70%,#1b5e20)}
.tp-top{width:100%;display:flex;justify-content:flex-end}
.tp-harvest{display:flex;align-items:center;gap:.5em;padding:.35em .6em;border-radius:999px;background:#00000066;box-shadow:inset 0 0 0 .5px #ffffff40}
.tp-meter{width:6em;height:.7em;border-radius:.35em;background:#ffffff33;overflow:hidden}.tp-meter i{display:block;height:100%;width:0;border-radius:.35em;background:linear-gradient(90deg,#ffe28a,#f39c12);transition:width .4s}
.tp-harvest span{font-size:1em;letter-spacing:-.1em;min-width:1.2em}
.tp-board{position:relative;width:20.7em;height:12.6em;margin-top:.2em}
.tp-card{position:absolute;left:0;top:0;width:3.2em;height:4.4em;padding:0;border:0;background:none;transform:translate(var(--x),var(--y));z-index:var(--z);transition:transform .25s,opacity .25s;perspective:600px;cursor:pointer}
.tp-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,.7,.3,1.1)}
.tp-card.is-down .tp-inner{transform:rotateY(180deg)}
.tp-back,.tp-face{position:absolute;inset:0;border-radius:.4em;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tp-back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#2962ff 0 .25em,#1e4fd6 .25em .5em);box-shadow:inset 0 0 0 .18em #fff,0 .3em .6em -.2em #000a}
.tp-face{display:block;background:#fff;box-shadow:inset 0 0 0 .07em #0002,0 .3em .6em -.2em #000a;text-align:left}
.tp-face b{position:absolute;left:.3em;top:.15em;font:900 1.05em/1 var(--display)}.tp-face i{position:absolute;left:.35em;top:1.35em;font:700 .75em/1 var(--font);font-style:normal}.tp-face em{position:absolute;right:.25em;bottom:.1em;font:700 1.6em/1 var(--font);font-style:normal}
.tp-card.is-up:not(.is-gone):hover .tp-inner{transform:translateY(-.15em)}
.tp-card.is-gone{transform:translate(var(--x),calc(var(--y) + 9em)) rotate(12deg) scale(.5);opacity:0;pointer-events:none}
.tp-foot{display:flex;align-items:center;justify-content:center;gap:1.6em;width:100%;margin-top:.2em}
.tp-stock{position:relative;display:flex;flex-direction:column;align-items:center;gap:.2em;cursor:pointer}.tp-pile{position:relative;transform:none;width:3em;height:4.1em}.tp-stock small{font:700 .7em/1 var(--font);color:#fffc}
.tp-waste{position:relative;transform:none;width:3.4em;height:4.7em;filter:drop-shadow(0 0 .5em #ffd34d)}
.tp-left{display:flex;flex-direction:column;align-items:center;line-height:1}.tp-left b{font:900 1.4em/1 var(--display);color:#ffe28a}.tp-left small{font:700 .65em/1 var(--font);color:#fffc}

/* ---- board game (Dice Dreams / MONOPOLY GO! themes) ---- */
.dd-kingdom{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:.5em}
.dd-board{--cell:3.9em;position:relative;width:calc(var(--cell) * (var(--per) + 1));height:calc(var(--cell) * (var(--per) + 1));border-radius:1em;background:radial-gradient(circle at 50% 40%,#6abf4b,#3f8f2a 70%);box-shadow:inset 0 0 0 .35em #2f6f20,inset 0 .3em 1.2em #0005,0 1.2em 2em -1em #000}
.dd-tile{position:absolute;left:calc(var(--cx) * var(--cell) + .18em);top:calc(var(--cy) * var(--cell) + .18em);width:calc(var(--cell) - .36em);height:calc(var(--cell) - .36em);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border-radius:.5em;background:linear-gradient(#ffffff,#e6ebef);box-shadow:inset 0 -.3em 0 #b9c3cc,inset 0 .1em 0 #fff,0 .35em .6em -.25em #000c;overflow:hidden;transition:transform .2s}
.dd-tile b{display:block;width:2em;height:2em;margin-bottom:.2em}.dd-tile b svg{width:100%;height:100%}
.dd-band{position:absolute;left:0;right:0;top:0;height:.75em;background:var(--band)}
.dd-tile.is-corner{background:linear-gradient(#fff8e1,#ffe9a8);box-shadow:inset 0 -.3em 0 #d4b24a,0 .35em .6em -.25em #000c}
.dd-tile.is-land{transform:scale(1.18);box-shadow:0 0 0 .18em #ffd34d,0 .5em 1em -.3em #000c;z-index:2}
.dd-coin b{filter:drop-shadow(0 .1em .1em #0005)}
.dd-token{position:absolute;left:calc((var(--cx) + .5) * var(--cell));top:calc((var(--cy) + .5) * var(--cell));width:2.6em;height:2.6em;transform:translate(-50%,-62%);z-index:3;transition:left .17s cubic-bezier(.3,.9,.4,1.2),top .17s cubic-bezier(.3,.9,.4,1.2);filter:drop-shadow(0 .4em .35em #0009)}
.dd-token svg{width:100%;height:100%}
.dd-center{position:absolute;inset:calc(var(--cell) + .2em);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em}
.dd-logo{width:3.6em;height:3.6em;border-radius:.9em;box-shadow:0 .4em .8em -.3em #000c}
.dd-dice{display:flex;gap:1em;perspective:30em}
.dd-cube{position:relative;width:2.4em;height:2.4em;transform-style:preserve-3d;transform:rotateX(0) rotateY(0)}
.dd-face{position:absolute;inset:0;border-radius:.5em;background:linear-gradient(135deg,#fff,#e6e6ea);box-shadow:inset 0 0 0 .08em #0002}
.dd-face i{position:absolute;width:.5em;height:.5em;margin:-.25em;border-radius:50%;background:#1b1b1b}
.dd-face.f1{transform:rotateY(0) translateZ(1.2em)}.dd-face.f2{transform:rotateY(90deg) translateZ(1.2em)}.dd-face.f3{transform:rotateY(180deg) translateZ(1.2em)}.dd-face.f4{transform:rotateY(-90deg) translateZ(1.2em)}.dd-face.f5{transform:rotateX(90deg) translateZ(1.2em)}.dd-face.f6{transform:rotateX(-90deg) translateZ(1.2em)}
.is-rolling .dd-cube{animation:ddShake .9s ease-in-out}
@keyframes ddShake{30%{translate:0 -1.2em}60%{translate:.3em -.4em}}
.dd-float{position:absolute;left:50%;top:-.2em;transform:translateX(-50%);font:900 1em/1 var(--display);color:#fff;-webkit-text-stroke:.03em #1b5e20;text-shadow:0 .1em .3em #000;animation:msDmg 1s ease-out forwards;pointer-events:none;z-index:4}
.dd-bar{display:flex;align-items:center;gap:1.2em;padding:.4em 1em;border-radius:999px;background:#00000080;box-shadow:inset 0 0 0 .5px #ffffff40}
.dd-coins{display:flex;align-items:center;gap:.3em}.dd-coins i{display:block;width:1.5em;height:1.5em}.dd-coins i svg{width:100%;height:100%}.dd-coins b{font:900 1.15em/1 var(--display);color:#ffe28a;font-variant-numeric:tabular-nums}
.dd-rolls{display:flex;align-items:center;gap:.4em}.dd-rolls small{font:800 .6em/1 var(--font);letter-spacing:.1em;color:#fffa}.dd-rolls b{font:900 1.15em/1 var(--display)}
.dd-mult{padding:.3em .6em;border-radius:.5em;background:linear-gradient(#ffe28a,#f39c12);color:#3b2700;font:900 .8em/1 var(--display)}
.dd-roll{min-width:8em}
/* Monopoly look: cream board, red/green accents */
.is-monopoly .dd-board{background:radial-gradient(circle at 50% 40%,#d8efd3,#bfe0b8 70%);box-shadow:inset 0 0 0 .35em #1b5e20,inset 0 .3em 1.2em #0004,0 1.2em 2em -1em #000}
.is-monopoly .dd-tile{background:linear-gradient(#fff,#f1f1ea)}
.is-monopoly .dd-tile.is-corner{background:linear-gradient(#fff,#f1f1ea)}
.is-monopoly .dd-tile[data-tile="1"] .dd-band,.is-monopoly .dd-tile[data-tile="2"] .dd-band{background:#8e4a1d}
.is-monopoly .dd-tile[data-tile="5"] .dd-band{background:#2e9bd6}.is-monopoly .dd-tile[data-tile="8"] .dd-band,.is-monopoly .dd-tile[data-tile="9"] .dd-band{background:#d63fb0}.is-monopoly .dd-tile[data-tile="11"] .dd-band{background:#ff8c1a}.is-monopoly .dd-tile[data-tile="14"] .dd-band{background:#2f8f2f}
.is-monopoly .dd-float{-webkit-text-stroke:.03em #7f0000}
/* ---- fiends match-3 ---- */
.bf-level{width:100%;display:flex;flex-direction:column;align-items:center;gap:.5em}
.bf-boss{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:17.5em}
.bf-slug{width:8em;transition:transform .6s,opacity .6s}.bf-slug svg{width:100%;height:auto;filter:drop-shadow(0 .3em .5em #0009)}
.bf-slug.is-out{transform:translateY(2em) rotate(20deg) scale(.6);opacity:0}
.bf-hp{width:70%;height:.7em;margin-top:-.4em;border-radius:.35em;background:#00000080;box-shadow:inset 0 0 0 .5px #ffffff59;overflow:hidden}.bf-hp i{display:block;height:100%;border-radius:.35em;background:linear-gradient(90deg,#6be675,#2ecc71);transition:width .4s}
.bf-boss small{margin-top:.3em;font:700 .7em/1 var(--font);color:#fffd}
.bf-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:.22em;width:100%;max-width:17.5em;padding:.4em;border-radius:1em;background:#00000080;box-shadow:inset 0 0 0 .5px #ffffff2e,0 1em 2.4em -.8em #000}
.bf-tile{position:relative;aspect-ratio:1;padding:.15em;border:0;border-radius:.6em;background:linear-gradient(#ffffff2e,#ffffff10);box-shadow:inset 0 .06em 0 #ffffff4d;cursor:pointer;transition:transform .15s,background .15s}
.bf-tile svg{width:100%;height:100%;filter:drop-shadow(0 .1em .15em #0007)}
.bf-tile.is-sel{background:var(--pl-accent);transform:scale(1.1);box-shadow:0 0 .8em var(--pl-accent)}
.bf-tile.is-swap{transform:scale(1.12)}
.bf-tile.is-pop{transform:scale(0);background:#fff}
.bf-tile.is-drop{animation:bfDrop .26s ease-out}
@keyframes bfDrop{from{transform:translateY(-1.2em);opacity:0}}

/* ---- end-of-play overlay (filled by the host page) ---- */
.pl-done{position:absolute;left:.875em;right:.875em;top:4.5em;z-index:8;padding:1.1em 1em .75em;border-radius:1.5em;text-align:center;color:#fff;background:linear-gradient(#1b2326f2,#101619f5);box-shadow:inset 0 0 0 .5px #ffffff59,0 20px 50px -20px #000;animation:plIn .4s cubic-bezier(.2,.9,.25,1);font-size:min(16px,calc(100cqw / 360 * 16))}
@keyframes plIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
.pl-done-head{margin:0;font:700 1.25em/1.15 var(--fd-display,-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif);letter-spacing:-.02em}
.pl-done-sub{margin:.25em 0 .75em;font:400 .875em/1.35 var(--fd-font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif);color:#fffc}
.pl-offer{display:grid;gap:.375em;margin:0 0 .875em;text-align:left}
.pl-offer div{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.5em .75em;border-radius:.75em;background:#ffffff14}
.pl-offer dt{font:500 .8125em/1.2 var(--fd-font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif);color:#fffd}.pl-offer dd{margin:0;display:inline-flex;align-items:center;gap:.3em;font:700 .95em/1 var(--fd-display,-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-offer .coin-icon{width:1.125em;height:1.125em}
.pl-done .lg-cta{width:100%;box-sizing:border-box}
.pl-replay{margin-top:.5em;border:0;background:none;color:#fffc;font:600 .875em/1 var(--fd-font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif);text-decoration:underline;cursor:pointer}
.pl-cpc{margin:.625em 0 0;font:500 .6875em/1.3 var(--fd-font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif);letter-spacing:.02em;text-transform:uppercase;color:#ffffffa6}
.lg-playable:has(.pl-done) .pl-stage,.biz-play .playable-host:has(.pl-done) .pl-stage{opacity:.18;filter:blur(2px);pointer-events:none;transition:opacity .3s,filter .3s}
@media (max-height:700px){.lg-playable{padding-top:3.9em}}
@media (prefers-reduced-motion:reduce){.pl-hint,.is-win,.pl-done,.sl-lights i,.bg-bingo.is-ready,.tp-sun{animation:none}}

/* Official store art as the card backdrop: sharp at the top, darkened behind the board so the playable reads. */
.lg-media.is-playable{background-size:cover;background-position:center top}
.lg-media.is-playable::after{background:linear-gradient(#0000 0%,#00000055 30%,#000000b0 55%,#000000d9 100%)}

/* ---- official preview clip, shown before the playable ---- */
.pl-intro{position:absolute;inset:-4.5em -.875em 0;z-index:9;display:flex;flex-direction:column;background:#000;transition:opacity .45s,transform .45s}
.pl-intro video{flex:1;width:100%;height:100%;min-height:0;object-fit:cover;object-position:center top;background:#000}
.pl-intro.is-wide video{object-fit:contain;object-position:center 30%}
.pl-intro.is-out{opacity:0;transform:scale(1.04);pointer-events:none}
.pl-intro-bar{position:absolute;left:.875em;right:.875em;bottom:1.1em;display:flex;align-items:center;justify-content:space-between;gap:.6em}
.pl-intro-tag{padding:.5em .8em;border-radius:999px;background:#000000a6;box-shadow:inset 0 0 0 .5px #ffffff59;font:700 .7em/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.pl-intro-ring{position:relative;width:1.6em;height:1.6em;border-radius:50%;background:conic-gradient(var(--pl-accent) calc(var(--p,0) * 360deg),#ffffff33 0)}
.pl-intro-ring i{position:absolute;inset:.3em;border-radius:50%;background:#000c}
.pl-intro-play{min-height:2.6em;padding:0 1.1em;border:0;border-radius:1.3em;background:#fff;color:#111;font:800 .85em/1 var(--display);box-shadow:0 .4em 1em -.3em #000;cursor:pointer}
.pl-stage.has-intro>:not(.pl-intro){visibility:hidden}
.biz-play .pl-intro{inset:-3.4em -.5em 0}
.lg-playable .pl-intro-bar{bottom:36%}
.lg-playable .pl-intro video{object-position:center 20%}
.pl-intro video{cursor:pointer}
.pl-intro-tag{cursor:pointer}

/* ---- Monopoly board theme (dice engine) ---- */
.is-monopoly .dd-ring{background:radial-gradient(circle,#cfe8cf 0 46%,#bcdcbc 47% 100%);box-shadow:inset 0 0 0 .5em #1f6b3a,inset 0 0 2em #00000033,0 1em 2em -1em #000}
.is-monopoly .dd-ring::before{border-color:#1f6b3a66}
.is-monopoly .dd-tile{background:#fff;box-shadow:inset 0 0 0 .1em #1b1b1b,0 .4em .8em -.3em #000c;border-radius:.4em}
.mg-prop{display:block;width:100%;height:100%;border-radius:.3em;background:linear-gradient(var(--c) 0 32%,#fff 32%)}
.mg-go{font:900 .9em/1 var(--display);color:#c62828;letter-spacing:-.04em}
.is-monopoly .dd-go{background:#fff}.is-monopoly .dd-heist,.is-monopoly .dd-shutdown{background:linear-gradient(#ffd0d0,#ff8a8a)}.is-monopoly .dd-bank{background:linear-gradient(#fff6c0,#ffd34d)}
/* ---- WWE theme (match-3 engine) ---- */
.is-wwe .bf-grid{background:linear-gradient(#1a1a1ad9,#000000d9);box-shadow:inset 0 0 0 .15em #ffffff33,inset 0 0 0 .35em #c6282866,0 1em 2.4em -.8em #000}
.is-wwe .bf-slug{width:10em}
/* ---- Stumble Guys style run ---- */
.sg-course{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:.6em}
.sg-rank{position:absolute;right:0;top:0;z-index:3;padding:.3em .7em;border-radius:999px;background:#000000a6;font:900 1.2em/1 var(--display);color:#fff}.sg-rank small{font-size:.6em;color:#fffa}
.sg-track{--scroll:0%;position:relative;width:100%;height:12em;overflow:hidden;border-radius:1em;background:linear-gradient(#59c3ff,#bfe9ff 60%,#8fd36b 60%,#5aa83e);box-shadow:inset 0 0 0 .15em #ffffff40,0 1em 2em -1em #000;cursor:pointer}
.sg-ground{position:absolute;left:0;right:0;bottom:0;height:2.2em;background:repeating-linear-gradient(90deg,#f2c14e 0 2em,#f08a24 2em 4em);background-position:calc(var(--scroll) * -2) 0;box-shadow:inset 0 .3em 0 #ffffff55}
.sg-obs{position:absolute;bottom:2.2em;left:calc(var(--x) - var(--scroll));width:2.2em;height:2.6em}
.sg-obs i{position:absolute;inset:0;border-radius:.4em;background:linear-gradient(#ff5e7e,#c2185b);box-shadow:inset 0 .2em 0 #ffffff66,0 .3em .6em -.2em #000a;animation:sgSpin 1s linear infinite}
@keyframes sgSpin{to{transform:rotate(360deg)}}
.sg-finish{position:absolute;bottom:2.2em;left:calc(var(--x) - var(--scroll));width:1em;height:8em;background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 0 0/1em 1em}
.sg-finish b{position:absolute;left:1.4em;top:0;font:900 1em/1 var(--display);color:#fff;text-shadow:0 1px 4px #000}
.sg-player,.sg-rival{position:absolute;bottom:2em;width:3.2em;height:4em;transition:transform .3s}
.sg-player{left:14%;z-index:2;animation:sgRun .35s ease-in-out infinite alternate}
.sg-rival{left:calc(var(--x) - var(--scroll) * .55);opacity:.9;animation:sgRun .4s ease-in-out infinite alternate}
@keyframes sgRun{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-.3em) rotate(3deg)}}
.sg-player.is-jump{animation:sgJump .62s cubic-bezier(.3,.8,.5,1)}
@keyframes sgJump{40%{transform:translateY(-5em) rotate(-8deg)}70%{transform:translateY(-4em)}100%{transform:translateY(0)}}
.sg-player.is-stumble{animation:sgStumble .5s ease-in-out}
@keyframes sgStumble{30%{transform:rotate(-50deg) translateX(-.6em)}70%{transform:rotate(20deg)}}
.sg-player svg,.sg-rival svg{width:100%;height:100%;filter:drop-shadow(0 .3em .3em #0008)}
.sg-jump{min-width:8em}
/* ---- MSF style squad battle ---- */
.ms-arena{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:1em;padding:.6em 0}
.ms-row{display:flex;justify-content:center;gap:.8em;width:100%}
.ms-unit{position:relative;width:5.4em;padding:.2em 0 0;border:0;background:none;color:#fff;transition:transform .2s,opacity .4s,filter .2s;cursor:pointer}
.ms-unit svg{width:100%;height:6.4em;filter:drop-shadow(0 .3em .4em #000a)}
.ms-foes .ms-unit{cursor:pointer}.ms-foes .ms-unit::after{content:"";position:absolute;inset:.4em -.2em;border-radius:1em;box-shadow:0 0 0 .12em #ff5e5e00;transition:box-shadow .2s}
.ms-foes .ms-unit:not(.is-down):hover::after{box-shadow:0 0 0 .12em #ff5e5e}
.ms-bar{height:.5em;margin:0 .4em .25em;border-radius:.25em;background:#00000080;box-shadow:inset 0 0 0 .5px #ffffff59;overflow:hidden}.ms-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5e5e,#c62828);transition:width .3s}.ms-bar.is-me i{background:linear-gradient(90deg,#6be675,#2ecc71)}
.ms-vs{font:900 1.1em/1 var(--display);color:#ffd34d;text-shadow:0 0 .6em #ffd34d88}
.ms-unit.is-dash{transform:translateY(-4.4em) scale(1.1)}.ms-unit.is-dash-down{transform:translateY(4.4em) scale(1.1)}
.ms-unit.is-hit{filter:brightness(2);transform:translateX(.3em)}
.ms-unit.is-down{opacity:.25;filter:grayscale(1);transform:rotate(80deg) translateY(1em)}
.ms-dmg{position:absolute;left:50%;top:0;transform:translateX(-50%);font:900 1.1em/1 var(--display);color:#fff;-webkit-text-stroke:.03em #000;animation:msDmg .9s ease-out forwards;pointer-events:none}
.ms-dmg.is-crit{color:#ffd34d;font-size:1.4em}
@keyframes msDmg{to{transform:translate(-50%,-2.2em);opacity:0}}
.ms-turn{margin-top:.2em;padding:.4em .9em;border-radius:999px;background:#00000080;font:700 .75em/1 var(--font);color:#fffd}
/* ---- Fleet Command style duel ---- */
.st-space{position:relative;width:100%;height:22em;border-radius:1em;overflow:hidden;background:radial-gradient(80% 60% at 70% 20%,#1b2d5c,#060913 70%);box-shadow:inset 0 0 0 .1em #ffffff26,0 1em 2em -1em #000}
.st-stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#fff9 1px,transparent 1.5px);background-size:3.1em 3.1em,2.3em 2.3em;background-position:0 0,1em 1.4em;opacity:.6;animation:stDrift 12s linear infinite}
@keyframes stDrift{to{background-position:0 3.1em,1em 3.7em}}
.st-foe{position:absolute;left:50%;top:.8em;transform:translateX(-50%);width:8em;text-align:center}
.st-bars{display:grid;gap:.25em;margin:0 .6em .3em}.st-bar{height:.45em;border-radius:.25em;background:#00000099;box-shadow:inset 0 0 0 .5px #ffffff59;overflow:hidden}.st-bar i{display:block;height:100%;transition:width .3s}.st-shield i{background:linear-gradient(90deg,#9ad8ff,#2e9bd6)}.st-hull i{background:linear-gradient(90deg,#ffb080,#f4511e)}
.st-ship svg{width:100%;filter:drop-shadow(0 .3em .5em #000)}
.st-ship.is-hit{animation:stHit .3s}.st-ship.is-destroyed{animation:stBoom .8s forwards}
@keyframes stHit{50%{filter:brightness(3) drop-shadow(0 0 .8em #ff5e5e)}}
@keyframes stBoom{40%{filter:brightness(4) drop-shadow(0 0 1em #ffb080)}100%{opacity:0;transform:scale(1.4)}}
.st-me{position:absolute;left:50%;bottom:5.2em;transform:translateX(-50%) rotate(180deg);width:8em}
.st-me.is-fire{animation:stRecoil .25s}
@keyframes stRecoil{50%{transform:translateX(-50%) rotate(180deg) translateY(-.3em)}}
.st-beam{position:absolute;left:50%;top:4.6em;bottom:9.4em;width:.4em;margin-left:-.2em;background:linear-gradient(#ff5e5e,#ffd0d0);box-shadow:0 0 .8em #ff5e5e;opacity:0;transform:scaleY(0);transform-origin:bottom;transition:opacity .1s,transform .18s}
.st-beam.is-on{opacity:1;transform:scaleY(1)}
.st-timing{position:absolute;left:1em;right:1em;bottom:3.4em;height:.9em;border-radius:.45em;background:#00000099;box-shadow:inset 0 0 0 .5px #ffffff59}
.st-zone{position:absolute;left:38%;right:38%;top:0;bottom:0;border-radius:.45em;background:#6be67599;box-shadow:0 0 .6em #6be675}
.st-marker{position:absolute;top:-.3em;width:.5em;height:1.5em;margin-left:-.25em;border-radius:.25em;background:#fff;box-shadow:0 0 .5em #fff}
.st-fire{position:absolute;left:50%;bottom:.5em;transform:translateX(-50%);min-width:8em}
.st-fire:active{transform:translateX(-50%) scale(.95)}

/* ---- celebration: shake, strobing lights, counting amount ---- */
.pl-stage.is-celebrate{animation:plShake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes plShake{10%,90%{transform:translate(-1px,0)}20%,80%{transform:translate(2px,0)}30%,50%,70%{transform:translate(-4px,0)}40%,60%{transform:translate(4px,0)}}
.pl-banner em{display:block;margin-top:.1em;font:900 2.2em/1 var(--display);font-style:normal;letter-spacing:-.03em;color:#fff6c0;font-variant-numeric:tabular-nums;text-shadow:0 .06em 0 #b8780a,0 .2em .6em #000c;transition:transform .2s}
.pl-banner em.is-final{animation:plPop .5s cubic-bezier(.2,.9,.25,1.4)}
@keyframes plPop{50%{transform:scale(1.25)}}
.pl-banner:has(em){animation-duration:2.6s}
.sl-cab.is-win .sl-lights i{animation-duration:.25s}
.sl-cab.is-win .sl-window{box-shadow:inset 0 0 0 .12em #fff3b0,0 0 2em #ffd34d}
.sl-cab.is-win{animation:plWin .45s ease-in-out 5}

/* ---- brand ad intro via YouTube ---- */
.pl-intro.is-yt{background:#000}
.pl-intro.is-yt .pl-yt,.pl-intro.is-yt iframe{position:absolute;left:-30%;top:-60px;width:160%;height:calc(100% + 60px);border:0}
.biz-play .pl-intro.is-yt iframe{left:0;width:100%}
/* ---- brand interactions ---- */
.br-line{display:flex;align-items:center;justify-content:space-between;gap:.6em;width:100%;max-width:16em;padding:.5em .9em;border-radius:999px;background:#00000066;box-shadow:inset 0 0 0 .5px #ffffff40;font:600 .8em/1 var(--font)}.br-line b{font:800 1em/1 var(--display);color:var(--pl-accent)}
.br-pick{display:flex;flex-direction:column;align-items:center;gap:.8em;width:100%}
.br-product{width:13em;filter:drop-shadow(0 .6em .8em #000a)}.br-product svg{width:100%;height:auto}
.br-swatches{display:flex;gap:.7em}.br-swatch{width:2.4em;height:2.4em;padding:0;border:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 .15em #ffffff66,0 .3em .6em -.2em #000c;cursor:pointer;transition:transform .15s}.br-swatch.is-on{transform:scale(1.2);box-shadow:0 0 0 .2em #fff,0 .3em .6em -.2em #000c}
.br-add{min-width:9em}
.br-shake{display:flex;flex-direction:column;align-items:center;gap:.8em;width:100%}
.br-blender{position:relative;width:6em;height:8em;border-radius:.6em .6em 1.4em 1.4em;background:linear-gradient(90deg,#ffffff33,#ffffff66 40%,#ffffff22);box-shadow:inset 0 0 0 .12em #ffffffaa,0 .6em 1em -.4em #000c;overflow:hidden}
.br-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(var(--pl-accent),color-mix(in srgb,var(--pl-accent) 70%,#000));transition:height .4s}
.br-lid{position:absolute;left:-.3em;right:-.3em;top:-.2em;height:.9em;border-radius:.4em;background:#222}
.br-blender.is-blend{animation:brBlend .12s linear infinite}
@keyframes brBlend{50%{transform:translateX(.25em) rotate(1.5deg)}}
.br-items{display:flex;gap:.6em}.br-item{width:3.4em;height:3.4em;border:0;border-radius:1em;background:#ffffff26;font-size:1.6em;box-shadow:inset 0 0 0 .5px #ffffff59;cursor:pointer}.br-item:disabled{opacity:.35}
.br-fly{position:absolute;z-index:7;font-size:1.6em;pointer-events:none}
.br-globe{display:flex;flex-direction:column;align-items:center;gap:.8em;width:100%}
.br-earth{--r:0deg;position:relative;width:11em;height:11em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8fd3ff,#1b6fb8 55%,#0b3f78);box-shadow:inset -1em -1em 2em #0008,0 1em 2em -.8em #000;transform:rotate(var(--r))}
.br-land{position:absolute;inset:0;border-radius:50%;background:radial-gradient(1.6em 1.1em at 30% 35%,#5ab552 98%,transparent),radial-gradient(1.3em 2em at 62% 55%,#5ab552 98%,transparent),radial-gradient(.9em .7em at 48% 75%,#5ab552 98%,transparent),radial-gradient(1.2em .8em at 72% 28%,#5ab552 98%,transparent)}
.br-pin{position:absolute;left:50%;top:50%;transform:rotate(var(--a)) translateY(-5.2em) rotate(calc(-1 * var(--a)));margin:-.5em -2em;width:4em;text-align:center;font:800 .7em/1 var(--font);color:#fff;text-shadow:0 1px 3px #000;font-style:normal}
.br-pin::before{content:"📍";display:block;font-size:1.3em}
.br-dest{opacity:0;transform:translateY(.4em);transition:opacity .3s,transform .3s;text-align:center}.br-dest.is-on{opacity:1;transform:none}.br-dest b{display:block;font:900 1.4em/1 var(--display);color:var(--pl-accent)}.br-dest small{font:600 .75em/1.3 var(--font);color:#fffd}
.br-reveal{display:flex;justify-content:center;width:100%;perspective:40em}
.br-card{width:14em;height:9em;padding:0;border:0;background:none;cursor:pointer}
.br-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.3,1.1)}
.br-card.is-flipped .br-card-inner{transform:rotateY(180deg)}
.br-card-front,.br-card-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;border-radius:1.2em;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:#fff;text-align:center;padding:.6em}
.br-card-front{background:linear-gradient(150deg,#ffffff33,#ffffff10);box-shadow:inset 0 0 0 .15em #ffffff66,0 1em 2em -.8em #000}.br-card-front b{font:900 3em/1 var(--display)}
.br-card-back{transform:rotateY(180deg);background:linear-gradient(150deg,var(--pl-accent),color-mix(in srgb,var(--pl-accent) 70%,#000));color:#111;box-shadow:0 1em 2em -.8em #000}.br-card-back b{font:900 1.3em/1.1 var(--display)}.br-card-back small i{font-style:normal;font-variant-numeric:tabular-nums}
.br-card span{font:800 .65em/1 var(--font);letter-spacing:.1em}.br-card small{font:600 .75em/1.3 var(--font)}
.br-scratch{display:flex;flex-direction:column;align-items:center;gap:.8em;width:100%}
.br-ticket{position:relative;width:15em;aspect-ratio:600/340;border-radius:1em;overflow:hidden;background:linear-gradient(150deg,var(--pl-accent),color-mix(in srgb,var(--pl-accent) 70%,#000));box-shadow:0 1em 2em -.8em #000}
.br-prize{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;color:#111;text-align:center}.br-prize span{font:800 .65em/1 var(--font);letter-spacing:.1em}.br-prize b{font:900 2.4em/1 var(--display)}.br-prize small{font:600 .75em/1 var(--font)}
.br-foil{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}

/* While the interactive part is on screen the card's bottom panel collapses to the price and the tap-through. */
.lg-offer.is-playing .lg-panel .lg-caption,.lg-offer.is-playing .lg-panel h2,.lg-offer.is-playing .lg-panel .lg-eyebrow{display:none}
.lg-offer.is-playing .lg-panel{padding-top:10px;padding-bottom:10px}.lg-offer.is-playing .lg-claim{margin-top:0}
.lg-offer.is-playing .lg-playable{padding-bottom:5.6em}
.biz-play.is-playing .biz-play-benefit,.biz-play.is-playing .biz-play-game{display:none}
.compare-phone.is-playing .panel small,.compare-phone.is-playing .panel b{display:none}

/* ---- MONOPOLY GO! look: isometric city board, upright token, red GO corner, rolls HUD ---- */
.is-iso{perspective:40em;perspective-origin:50% 30%}
.is-iso .dd-board{--cell:2.95em;transform:rotateX(54deg) rotateZ(-45deg);transform-style:preserve-3d;margin:.6em 0 1.8em;border-radius:.6em;background:radial-gradient(circle at 50% 50%,#eaf3df,#cfe4c2 70%);box-shadow:inset 0 0 0 .3em #1b5e20,0 0 0 .6em #d8c9a0,0 0 0 .9em #a98b55,1.2em 1.2em 2.5em -.8em #000}
.is-iso .dd-tile{transform-style:preserve-3d;border-radius:.3em;background:linear-gradient(#fff,#f3f1e8);box-shadow:inset 0 0 0 .06em #0002,.25em .25em 0 #c9c4b2}
.is-iso .dd-tile b{transform:translateZ(.05em) rotateZ(45deg) rotateX(-54deg);transform-origin:50% 100%;width:1.9em;height:1.9em;margin-bottom:.15em;filter:drop-shadow(.1em .3em .2em #0006)}
.is-monopoly .dd-tile[data-tile="0"]{background:linear-gradient(#ff5252,#c62828);color:#fff;box-shadow:inset 0 0 0 .1em #fff,.25em .25em 0 #7f0000}
.is-monopoly .dd-tile[data-tile="0"] b{color:#fff;width:2.6em;height:2.6em}
.is-iso .dd-token{transform-style:preserve-3d;width:2.8em;height:2.8em;z-index:5}
.is-iso .dd-token svg{transform:rotateZ(45deg) rotateX(-54deg) translateY(-.4em);transform-origin:50% 100%}
.is-iso .dd-center{inset:auto calc(var(--cell) + .4em) calc(var(--cell) + .5em);top:auto;height:calc(var(--cell) * 2.4);justify-content:flex-end;gap:.4em;transform:translateZ(.2em) rotateZ(45deg) rotateX(-54deg);transform-origin:50% 100%;transform-style:preserve-3d}
.is-iso .dd-logo{width:3.4em;height:3.4em}
.is-iso .dd-dice{gap:.6em}.is-monopoly .dd-cube{width:2em;height:2em}.is-monopoly .dd-face.f1{transform:rotateY(0) translateZ(1em)}.is-monopoly .dd-face.f2{transform:rotateY(90deg) translateZ(1em)}.is-monopoly .dd-face.f3{transform:rotateY(180deg) translateZ(1em)}.is-monopoly .dd-face.f4{transform:rotateY(-90deg) translateZ(1em)}.is-monopoly .dd-face.f5{transform:rotateX(90deg) translateZ(1em)}.is-monopoly .dd-face.f6{transform:rotateX(-90deg) translateZ(1em)}
.is-iso .dd-float{transform:translateX(-50%) rotateZ(45deg) rotateX(-54deg)}
.is-monopoly .dd-bar{gap:1em;padding:.5em 1.2em;border-radius:1.2em;background:linear-gradient(#2b1d12,#1a110a);box-shadow:inset 0 0 0 .12em #d8c9a0,0 .6em 1.2em -.5em #000}
.is-monopoly .dd-rolls{flex-direction:column;gap:.1em;padding:.3em .8em;border-radius:.8em;background:#1e88e5;box-shadow:inset 0 .1em 0 #ffffff66}
.is-monopoly .dd-rolls small{color:#fff}.is-monopoly .dd-rolls b{color:#fff}
.is-monopoly .dd-roll{background:linear-gradient(#5ee36a,#1faa3a 55%,#117a26);color:#fff;text-shadow:0 .08em 0 #0a5a1a;min-width:9em}

/* ---- WWE Champions look: live ring on top, jewel board on navy ---- */
.is-wwe .bf-boss{max-width:none;width:100%}
.bf-ring{position:relative;width:100%;aspect-ratio:2.3/1;border-radius:.8em .8em 0 0;overflow:hidden;background:#000;box-shadow:0 .6em 1.2em -.6em #000}
.bf-scene{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.bf-ring-hud{position:absolute;left:.6em;right:.6em;top:.5em;display:flex;justify-content:space-between;font:900 .7em/1 var(--display);color:#fff;text-shadow:0 1px 3px #000;letter-spacing:.06em}
.is-wwe .bf-hp{width:100%;height:.8em;margin-top:0;border-radius:0;background:#1b1b1b;box-shadow:inset 0 0 0 .5px #ffffff59}.is-wwe .bf-hp i{border-radius:0;background:linear-gradient(90deg,#ff5252,#c62828)}
.is-wwe .bf-boss small{margin:.3em 0}
.is-wwe .bf-grid{gap:.18em;padding:.3em;border-radius:.5em;background:linear-gradient(#0d1b3a,#071126);box-shadow:inset 0 0 0 .15em #27437a,0 1em 2.4em -.8em #000;max-width:17.5em}
.is-wwe .bf-tile{border-radius:.25em;background:linear-gradient(#1b3a70,#0f2550);box-shadow:inset 0 0 0 .06em #3a63a8;padding:.1em}.is-wwe .bf-tile svg{filter:drop-shadow(0 .12em .18em #000c) saturate(1.2)}
.is-wwe .bf-tile.is-sel{background:#fff3;box-shadow:0 0 0 .15em #ffd54f,0 0 .8em #ffd54f}
.is-wwe .bf-level{gap:0}

/* official footage inside the Scopely arenas */
.ms-arena{position:relative;isolation:isolate;overflow:hidden;border-radius:1em;padding:1em .4em}.ms-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;filter:brightness(.55)}
.st-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.sg-arena{width:100%;aspect-ratio:2.3/1;border-radius:.8em;overflow:hidden;box-shadow:0 .6em 1.2em -.6em #000}.sg-bg{width:100%;height:100%;object-fit:cover}
.sg-track{height:10em}
.is-iso .dd-board{box-shadow:inset 0 0 0 .3em #2f6f20,0 0 0 .6em #8d6e4a,0 0 0 .9em #5d4030,1.2em 1.2em 2.5em -.8em #000}
.is-monopoly.is-iso .dd-board{box-shadow:inset 0 0 0 .3em #1b5e20,0 0 0 .6em #d8c9a0,0 0 0 .9em #a98b55,1.2em 1.2em 2.5em -.8em #000}

/* ---- official footage inside the Playtika games ---- */
.sl-screen{width:100%;aspect-ratio:2.2/1;margin:-.1em 0 .1em;border-radius:.8em;overflow:hidden;background:#000;box-shadow:inset 0 0 0 .12em #f3c25a,0 0 1.2em #ffd34d33}.sl-bg{width:100%;height:100%;object-fit:cover}
.bg-room{isolation:isolate;overflow:hidden;border-radius:1em}.bg-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:-2;filter:brightness(.7)}.bg-room .bg-sky{z-index:-1}
.tp-farm{isolation:isolate;overflow:hidden;border-radius:1em}.tp-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:-3;filter:brightness(.75)}
.tp-farm .tp-hills{opacity:.55}.tp-farm .tp-sky{opacity:.5}
.bf-ring.bf-fiends{aspect-ratio:2/1;border-radius:.8em}.bf-slug-mini{position:absolute;right:.4em;bottom:0;width:5em;filter:drop-shadow(0 .3em .5em #000)}

/* ---- Stumble Guys: tilted hex course under the official arena clip ---- */
.sg-arena{position:relative;aspect-ratio:1.7/1}.sg-arena-hud{position:absolute;left:.6em;right:.6em;top:.5em;display:flex;justify-content:space-between;font:900 .7em/1 var(--display);color:#fff;text-shadow:0 1px 3px #000;letter-spacing:.06em}
.sg-stage3d{width:100%;perspective:26em;perspective-origin:50% 0}
.sg-course .sg-track{height:9.5em;border-radius:.6em;transform:rotateX(26deg);transform-origin:50% 100%;background:linear-gradient(#5ec8ff,#bfe9ff 40%,#8fd36b 40%);overflow:hidden}
.sg-floor{position:absolute;left:-10%;right:-10%;bottom:0;height:62%;background:radial-gradient(1.6em 1.6em at 50% 50%,#ff9f43 0 44%,#f4511e 45% 55%,transparent 56%) 0 0/3.2em 2.8em,radial-gradient(1.6em 1.6em at 0 50%,#ffb86b 0 44%,#f4511e 45% 55%,transparent 56%) 1.6em 1.4em/3.2em 2.8em,#f58a2e;background-position:calc(var(--scroll) * -1.2) 0,calc(var(--scroll) * -1.2 + 1.6em) 1.4em;box-shadow:inset 0 .5em 1em #0003}
.sg-course .sg-ground{height:.9em;bottom:0;background:#c2410c;box-shadow:inset 0 .25em 0 #ff9f43}
.sg-obs{bottom:.9em;width:1.2em;height:4.2em}
.sg-pole{position:absolute;left:50%;bottom:0;width:.5em;height:100%;margin-left:-.25em;border-radius:.25em;background:linear-gradient(90deg,#9e9e9e,#f5f5f5,#9e9e9e);animation:none}
.sg-hammer{position:absolute;left:50%;top:.2em;width:3.6em;height:1.1em;margin-left:-1.8em;border-radius:.55em;background:linear-gradient(#ff8a80,#d32f2f);box-shadow:inset 0 .2em 0 #ffffff66,0 .3em .6em -.2em #000a;transform-origin:50% 50%;animation:sgSpin .9s linear infinite}
.sg-player,.sg-rival{bottom:.9em}

/* ---- Strike Force: arena layout, name plates, ability bar ---- */
.ms-arena{padding:.6em .3em .4em;gap:.3em}
.ms-top{display:flex;justify-content:space-between;width:100%;padding:0 .6em}
.ms-wave,.ms-top .ms-turn{margin:0;padding:.35em .7em;border-radius:.5em;background:#000000a6;font:900 .65em/1 var(--display);letter-spacing:.08em;color:#ffd54f}
.ms-field{display:flex;flex-direction:column;gap:1.4em;width:100%;padding:.4em 0 .2em}
.ms-foes{justify-content:flex-end;padding-right:.6em}.ms-heroes{justify-content:flex-start;padding-left:.6em}
.ms-unit{width:4.6em}.ms-unit svg{height:5.4em}
.ms-name{display:block;margin-bottom:.15em;font:900 .55em/1 var(--display);letter-spacing:.08em;color:#fff;text-shadow:0 1px 2px #000}
.ms-shadow{position:absolute;left:15%;right:15%;bottom:-.3em;height:.7em;border-radius:50%;background:#0009;filter:blur(.15em);z-index:-1}
.ms-abil{display:flex;align-items:flex-end;justify-content:center;gap:.5em;width:100%;padding:.5em .4em .2em;border-top:1px solid #ffffff33}
.ms-port{position:relative;width:3.6em;height:3.6em;border-radius:.6em;background:#0d1b3a;box-shadow:inset 0 0 0 .12em #3a63a8;overflow:hidden;opacity:.6}.ms-port svg{position:absolute;left:0;right:0;top:-.4em;height:4.4em}.ms-port b{position:absolute;left:0;right:0;bottom:0;padding:.15em 0;background:#000000b3;font:900 .5em/1 var(--display);text-align:center;color:#fff;letter-spacing:.04em}
.ms-port.is-active{opacity:1;box-shadow:0 0 0 .15em #ffd54f,0 0 .8em #ffd54f}
.ms-ult{position:relative;width:3.6em;height:3.6em;border-radius:50%;background:#1a0a2e;box-shadow:inset 0 0 0 .12em #8e24aa;overflow:hidden;display:grid;place-items:center}.ms-ult i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#e040fb,#8e24aa);transition:height .4s}.ms-ult b{position:relative;font:900 .7em/1 var(--display);color:#fff}

/* Design height of each game at 16px, in px: the stage shrinks so this fits the free area above the price bar. */
.pl-slots{--dh:560}.pl-bingo{--dh:470}.pl-tripeaks{--dh:470}.pl-dice{--dh:500}.pl-monopoly{--dh:500}.pl-match3{--dh:520}.pl-wwe{--dh:560}.pl-runner{--dh:480}.pl-squad{--dh:500}.pl-warp{--dh:460}
.pl-pick,.pl-shake,.pl-globe,.pl-reveal,.pl-scratch{--dh:400}
.biz-play .playable-host{container-type:size}

/* brand ad: store art and logo until the player is really playing; never a black card */
.pl-yt-poster{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;background:#111 center/cover no-repeat;color:#fff}
.pl-yt-poster::before{content:"";position:absolute;inset:0;background:linear-gradient(#0003,#0008)}
.pl-yt-poster img{position:relative;width:4.5em;height:4.5em;border-radius:1em;box-shadow:0 .5em 1em -.4em #000}
.pl-yt-poster b{position:relative;font:800 1.3em/1 var(--display);text-shadow:0 1px 6px #000}
.pl-yt-poster::after{content:"";position:absolute;left:50%;bottom:6.2em;width:1.6em;height:1.6em;margin-left:-.8em;border-radius:50%;border:.2em solid #fff5;border-top-color:#fff;animation:plSpin .9s linear infinite}
@keyframes plSpin{to{transform:rotate(360deg)}}
.pl-intro.is-yt.is-live .pl-yt-poster{opacity:0;pointer-events:none;transition:opacity .4s}