/* Sample B2 (T0223): arcade pop-up. Retro cabinet card, bouncy entrance, chasing bulbs, falling pixel DMs. */
html{scrollbar-gutter:stable}
html.pop-open{overflow:hidden}
.gpop{padding:0;border:0;background:transparent;width:min(340px,calc(100% - 32px));max-width:none;max-height:calc(100svh - 24px);overflow:visible;color:#fff}
.gpop::backdrop{background:rgba(11,21,48,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.gpop.in::backdrop{animation:gFade .3s ease both}
.gpop.in .gcab{animation:gIn .9s cubic-bezier(.2,.9,.25,1.2) both}
.gpop.out .gcab{animation:gOut .26s ease-in both}
.gpop.out::backdrop{animation:gFade .26s ease reverse both}
@keyframes gFade{from{opacity:0}to{opacity:1}}
@keyframes gIn{0%{opacity:0;transform:translateY(40px) scale(.25) rotate(-12deg)}45%{opacity:1;transform:translateY(-6px) scale(1.08) rotate(5deg)}62%{transform:scale(.95) rotate(-3deg)}78%{transform:scale(1.03) rotate(1.5deg)}90%{transform:scale(.99) rotate(-.5deg)}100%{transform:none}}
@keyframes gOut{to{opacity:0;transform:scale(.85) rotate(-4deg)}}

.gcab{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;padding:26px 20px 16px;border-radius:26px;background:linear-gradient(180deg,#16235A 0%,#0A1128 100%);border:3px solid #2E437F;box-shadow:0 0 0 3px #060C1E,0 0 60px -6px rgba(48,107,235,.85),inset 0 2px 0 rgba(255,255,255,.1)}
/* chasing marquee bulbs */
.bulbs{position:absolute;inset:7px;border-radius:20px;border:3px dotted #FFE27A;pointer-events:none;animation:bulb 1.1s steps(2) infinite;opacity:.85}
@keyframes bulb{50%{border-color:#fff;opacity:.6}}
.gstar{position:absolute;width:8px;height:8px;background:#FFE27A;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:tw 1.6s ease-in-out infinite}
.gstar.s1{top:-14px;left:12%}.gstar.s2{top:18%;right:-12px;animation-delay:-.5s;background:#6C9BFF}.gstar.s3{bottom:22%;left:-12px;animation-delay:-1s}.gstar.s4{bottom:-12px;right:18%;animation-delay:-1.3s;background:#fff}
@keyframes tw{50%{transform:scale(1.8) rotate(45deg);opacity:.4}}

.gx{position:absolute;top:10px;inset-inline-end:10px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:rgba(11,21,48,.6);color:#fff;cursor:pointer}
.gx:hover{border-color:#fff}
.gx .ic{width:18px;height:18px}
.gk{font-size:8px;color:#8FB3FF;margin-top:4px}
/* the mini screen: pixel DMs fall, the little phone dodges them */
.gscreen{position:relative;width:min(200px,62%);aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#050A1A;border:3px solid #2E437F;box-shadow:inset 0 0 20px rgba(0,0,0,.9),0 0 18px rgba(48,107,235,.45)}
.gscreen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.gb{position:absolute;top:-14px;width:30px;height:12px;background:#F4F6FB;animation:fall 2.4s linear infinite}
.gb::after{content:"";position:absolute;left:3px;bottom:-4px;width:5px;height:4px;background:inherit}
.gb.pu{width:22px;background:#306BEB}
.gb.b1{left:10%}.gb.b2{left:44%;animation-delay:-.8s;animation-duration:2s}.gb.b3{left:70%;animation-delay:-1.6s}.gb.b4{left:28%;animation-delay:-2.1s;animation-duration:2.8s}.gb.b5{left:80%;animation-delay:-.3s;animation-duration:2.2s}
@keyframes fall{to{transform:translateY(190px)}}
.gme{position:absolute;bottom:8px;left:20%;width:16px;height:22px;background:#F4F6FB;border:3px solid #F4F6FB;box-shadow:inset 0 0 0 9px #306BEB;animation:dodge 3s steps(12) infinite alternate}
@keyframes dodge{to{left:68%}}
.ghud{position:absolute;top:5px;left:7px;z-index:1;font-size:7px;color:#BFD8FF}.ghud b{color:#fff;font-weight:400}
.gt{font-size:clamp(19px,6vw,24px);line-height:1.35;margin:6px 0 0;color:#fff;text-shadow:3px 3px 0 #306BEB,0 0 18px rgba(48,107,235,.75)}
.gs{font-size:8px;color:#BFD8FF;margin:0}.gs b{color:#FFE27A;font-weight:400}
.gd{margin:2px 0 4px;font-size:14px;color:#A7B3D1;line-height:1.4}
html[lang="ar"] .gd{font-family:var(--f-ar);font-size:15px}
.gplay{display:inline-flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;margin-top:4px}
.gplay .coin{font-size:8px;color:#FFE27A;animation:blink 1s steps(2,start) infinite}
.gbtn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 28px;font-family:var(--f-px);font-size:15px;color:#fff;background:#306BEB;box-shadow:0 5px 0 #1F56D5,0 0 0 3px #0B1530,0 5px 0 3px #0B1530;animation:gpulse 1.4s ease-in-out infinite;transition:transform .1s}
html[lang="ar"] .gbtn{font-family:var(--f-ar);font-weight:800;font-size:18px}
.gbtn .ic{width:16px;height:16px}
.gplay:hover .gbtn{transform:translateY(-2px)}
.gplay:active .gbtn{transform:translateY(4px)}
@keyframes gpulse{50%{box-shadow:0 5px 0 #1F56D5,0 0 0 3px #0B1530,0 5px 0 3px #0B1530,0 0 26px 4px rgba(48,107,235,.75)}}
.glater{min-height:44px;padding:0 14px;border:0;background:none;color:#A7B3D1;font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
html[lang="ar"] .glater{font-family:var(--f-ar)}
.glater:hover{color:#fff}
.gpop :focus-visible{outline:3px solid #FFE27A;outline-offset:3px}
@media (max-height:620px){.gscreen{width:min(150px,50%)}.gcab{gap:5px;padding-top:20px}}
@media (prefers-reduced-motion:reduce){
  .gpop.in .gcab,.gpop.out .gcab{animation:gFade .25s ease both}
  .gpop.out .gcab{animation-direction:reverse}
  .bulbs,.gstar,.gb,.gme,.gplay .coin,.gbtn{animation:none}
}