/* Reference values measured from each actual CTA destination, 2026-10-28. */
.combat,.explore{--ink:#f3f3f3;--paper:#131316;--accent:#005fb8;color:#131316;background:#f3f3f3;font-family:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif}
.combat .hero,.explore .hero{background:#f3f3f3}
.combat .hero:before,.explore .hero:before{inset:0;width:auto;height:auto;border-radius:0;box-shadow:none;z-index:0;background:linear-gradient(#f0f0f0,#f0f0f0),linear-gradient(transparent,transparent),url('assets/store-backdrop.jpg');background-size:40px 40px;background-blend-mode:luminosity,overlay,normal;filter:blur(60px) saturate(4)}
.combat .art,.explore .art{z-index:1;opacity:.23;mask-image:linear-gradient(90deg,transparent 22%,#000 80%)}
.combat .hero:after,.explore .hero:after{z-index:1;background:linear-gradient(0deg,#f3f3f3 0%,#ffffff00 75%)}
.combat h1,.explore h1{font-family:'Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;font-size:clamp(34px,min(4.2vw,7vh),64px);font-weight:650;line-height:1.08;letter-spacing:-.03em;color:#131316;text-shadow:none}
.combat h1 em,.explore h1 em{color:#005fb8;text-shadow:none}
.combat .description,.explore .description{color:#131316;font-family:inherit}
.combat .eyebrow,.explore .eyebrow,.combat .edition,.explore .edition{color:#005fb8}.combat .eyebrow:before,.explore .eyebrow:before{background:#005fb8;box-shadow:none}
.combat .edition svg,.explore .edition svg{fill:#005fb8}.combat .brand img,.explore .brand img{filter:brightness(0)}
.combat .cta,.explore .cta{background:#005fb8;color:#fff;border:1px solid #005fb8;border-radius:4px;clip-path:none;box-shadow:none;font-family:'Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;font-size:20px;font-weight:600;letter-spacing:0;animation:none}
.combat .cta:hover,.explore .cta:hover{background:#00539f}.combat .reassurance,.explore .reassurance,.combat .reassurance strong,.explore .reassurance strong,.combat .free,.explore .free{color:#131316}.combat .scene-label{color:#005fb8}
/* FunPlus uses Microsoft YaHei / Arial; PLAY NOW text is in its original PNG. */
.strategy{--ink:#000;--paper:#fff;--accent:#fff;background:#000;font-family:'Microsoft YaHei',Arial,Tahoma,sans-serif;color:#fff}
.strategy .hero{background:#000}.strategy .hero:before{box-shadow:none;background:none}.strategy .hero:after{background:linear-gradient(90deg,#0009,transparent 72%)}
.strategy .content:before{background:rgba(3,7,9,.8);border-color:#ffffff55;box-shadow:none}.strategy .content:after{border-color:#ffffff55}
.strategy h1{font-family:'Microsoft YaHei',Arial,Tahoma,sans-serif;font-size:clamp(34px,min(3.9vw,6.8vh),58px);line-height:1.08;font-weight:700;letter-spacing:-.03em;color:#fff}.strategy h1 em{color:#fff;text-shadow:none}
.strategy .eyebrow,.strategy .edition,.strategy .description,.strategy .reassurance,.strategy .reassurance strong{color:#fff}.strategy .eyebrow:before{background:#fff;box-shadow:none}.strategy .edition svg{fill:#fff}
.strategy .background-video{width:100%;height:100%;opacity:1;object-fit:cover}
.strategy .cta{display:block;width:350px;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none;clip-path:none;animation:official-cta-emphasis .85s ease-in-out infinite;filter:none;transform-origin:center}
.offer-button-art{display:block;width:100%;height:auto}.strategy .cta:hover,.strategy .cta:focus-visible{background:transparent;animation-play-state:paused}
@keyframes official-cta-emphasis{0%,100%{transform:scale(1);filter:none}50%{transform:scale(1.04);filter:none}}
@media(max-width:700px){.combat h1,.explore h1{font-size:clamp(28px,7.2vw,45px)}.strategy h1{font-size:clamp(28px,7.2vw,45px)}.strategy .cta{width:100%}.strategy .description{font-size:13px}.combat .art,.explore .art{opacity:.14}}
@media(prefers-reduced-motion:reduce){.strategy .cta{animation:none}}
.strategy .cta{padding:36px!important}
.strategy .cta .offer-button-label{display:flex;align-items:center;justify-content:center;min-height:64px;width:100%;background:linear-gradient(180deg,#96500d 0%,#d78013 65%,#eea819 100%);border-top:2px solid #a86824;border-bottom:2px solid #ffd36a;box-shadow:0 0 25px 9px #ff8a0070;color:#fff;font-family:Arial,sans-serif;font-size:27px;font-weight:800;letter-spacing:0;text-shadow:0 3px 3px #572500;text-align:center;white-space:nowrap}
@media(max-width:700px){.strategy .cta{padding:28px!important}.strategy .cta .offer-button-label{font-size:23px;min-height:58px}}
/* Reference screenshot: edge-to-edge frame, centered horizontally and anchored at the top. */
.strategy .art{inset:0;background:#000;padding:0;margin:0}
.strategy .official-background{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;transform:none;margin:0}
/* Soft bounded backing covers the full left content area. */
.strategy .content:before{display:block;inset:0 68px 0 -24px;width:auto;height:auto;background:linear-gradient(90deg,rgba(3,7,9,.32),rgba(3,7,9,.18));border:0;border-radius:12px;box-shadow:none;z-index:-1;pointer-events:none}
.strategy .content:after{display:none}
.strategy .message{position:relative;isolation:isolate}
.strategy .message:before{display:none}
@media(max-width:700px){.strategy .content:before{inset:0 24px 0 -12px}}
.strategy .art .composition-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:1;transform:none;animation:none;will-change:auto}
/* Two asymmetric sci-fi corner brackets follow the existing shadow bounds. */
.strategy .content:after{content:'';display:block;position:absolute;inset:0 68px 0 -24px;width:auto;height:auto;border:0;border-radius:12px;pointer-events:none;z-index:0;background:linear-gradient(90deg,#ffd284,#d88020) left 10px top 0/58px 2px no-repeat,linear-gradient(180deg,#ffd284,#d88020) left 0 top 10px/2px 38px no-repeat,linear-gradient(135deg,transparent 42%,#ffd284 44%,#ffd284 56%,transparent 58%) left top/12px 12px no-repeat,linear-gradient(90deg,#d88020,#ffd284) right 10px bottom 0/58px 2px no-repeat,linear-gradient(180deg,#d88020,#ffd284) right 0 bottom 10px/2px 38px no-repeat,linear-gradient(135deg,transparent 42%,#ffd284 44%,#ffd284 56%,transparent 58%) right bottom/12px 12px no-repeat;filter:drop-shadow(0 0 5px #ed9a3355)}
@media(max-width:700px){.strategy .content:after{inset:0 24px 0 -12px;background-size:40px 2px,2px 28px,12px 12px,40px 2px,2px 28px,12px 12px}}
/* Restore ambient ice-and-space glints without moving the scene. */
.strategy .art:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 3px 7px at 12% 16%,#fff 10%,#c6edff99 35%,transparent 80%),radial-gradient(ellipse 2px 5px at 34% 10%,#effaff 15%,transparent 85%),radial-gradient(ellipse 4px 2px at 46% 64%,#fff 10%,#9bdfff88 40%,transparent 85%),radial-gradient(ellipse 3px 6px at 57% 21%,#fff 10%,transparent 80%),radial-gradient(ellipse 2px 5px at 69% 7%,#fff 10%,transparent 85%),radial-gradient(ellipse 4px 2px at 81% 43%,#effaff 10%,transparent 85%),radial-gradient(ellipse 3px 7px at 94% 18%,#fff 10%,#bfeaff88 40%,transparent 85%),radial-gradient(ellipse 3px 5px at 87% 78%,#e7f8ff 15%,transparent 80%),radial-gradient(ellipse 5px 2px at 25% 83%,#e7f8ff 10%,transparent 85%),radial-gradient(ellipse 2px 5px at 54% 90%,#fff 10%,transparent 85%);filter:drop-shadow(0 0 7px #a4e4ff);animation:strategy-background-glints 4.5s ease-in-out infinite;opacity:.7}
@keyframes strategy-background-glints{0%,100%{opacity:.35}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.strategy .art:after{animation:none;opacity:.65}}
/* Use the offer's own moving foreground light/ice effects instead of CSS stars. */
.strategy .art:after{display:none}
.strategy .offer-effects{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;mix-blend-mode:screen;pointer-events:none;opacity:.9;mask-image:linear-gradient(0deg,#000 0%,#000 12%,transparent 28%)}