/* A contained service illustration. Motion never sits over working content. */
.clog-battle{padding:90px 0;background:radial-gradient(ellipse at 85% 20%,#40526a 0,transparent 55%),linear-gradient(120deg,#091525,#0b1d3a 65%,#243449);color:#fff;overflow:hidden}
.clog-battle__head{max-width:820px;margin-bottom:28px}.clog-battle__head h2{font-size:clamp(36px,4vw,68px);line-height:1.06;margin:14px 0}.clog-battle__head h2 em{color:#a7cfff}.clog-battle .label{color:#9bc7ff}.clog-battle__tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}.clog-battle__tabs button{font:inherit;color:#d7e4f4;background:#ffffff08;border:1px solid #ffffff30;border-radius:30px;padding:12px 20px;cursor:pointer}.clog-battle__tabs button[aria-pressed=true]{background:#fff;color:#0b1d3a;border-color:#fff;box-shadow:inset 0 -3px #e31b23}.clog-battle button:focus-visible,.clog-battle a:focus-visible{outline:3px solid #91ceff;outline-offset:5px}
.clog-battle__body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr);border:1px solid #c0c4c947;border-radius:24px;overflow:hidden;background:linear-gradient(130deg,#ffffff0c,#ffffff03);box-shadow:0 30px 70px #0004,inset 0 1px #ffffff22}.clog-battle__stage{position:relative;isolation:isolate;overflow:hidden;min-height:420px;background:radial-gradient(ellipse at 58% 76%,#1160ff36,transparent 65%),linear-gradient(165deg,#071321,#20344b);border-right:1px solid #ffffff20}.clog-battle__stage:before{content:"";position:absolute;inset:65% -20% -20%;background:repeating-linear-gradient(0deg,transparent 0 40px,#90bcdf13 41px 42px),repeating-linear-gradient(90deg,transparent 0 65px,#90bcdf13 66px 67px);transform:perspective(250px) rotateX(48deg);transform-origin:top}.clog-battle__horizon{position:absolute;left:0;right:0;top:74%;height:1px;background:linear-gradient(90deg,transparent,#9cdfff,transparent);box-shadow:0 0 28px 5px #1160ff66}.clog-battle__scene-label{position:absolute;top:24px;left:24px;font:11px monospace;letter-spacing:2px;color:#afc5df}.clog-battle__scene-label:before{content:"";display:inline-block;width:7px;height:7px;margin-right:10px;background:#e31b23;border-radius:50%;box-shadow:0 0 12px #e31b23}
.clog-battle__hero,.clog-battle__monster{position:absolute;object-fit:contain;bottom:9%;height:73%;width:47%;filter:drop-shadow(0 16px 18px #0007);pointer-events:none}.clog-battle__hero{left:1%;z-index:3}.clog-battle__monster{right:2%;z-index:2;transition:filter .3s}.clog-battle__stage:hover .clog-battle__monster{filter:drop-shadow(0 0 18px #e31b2344) drop-shadow(0 16px 18px #0007)}.clog-battle__water{position:absolute;z-index:4;left:32%;top:48%;width:53%;height:8%;background:linear-gradient(0deg,transparent,#1160ff,#c8f6ff,#fff,#1160ff,transparent);clip-path:polygon(0 38%,100% 0,92% 30%,100% 49%,90% 62%,100% 100%,0 65%);opacity:0;transform-origin:left;filter:drop-shadow(0 0 12px #47bdff)}.clog-battle__ring{position:absolute;z-index:1;width:230px;height:230px;right:4%;top:20%;border:1px solid #69d2ff;border-radius:50%;box-shadow:0 0 32px #1160ff66,inset 0 0 30px #1160ff33;opacity:0}.clog-battle__stage.is-running .clog-battle__hero{animation:pj-battle-arrive 5.6s both}.clog-battle__stage.is-running .clog-battle__monster{animation:pj-battle-defeat 5.6s both}.clog-battle__stage.is-running .clog-battle__water{animation:pj-battle-water 5.6s both}.clog-battle__stage.is-running .clog-battle__ring{animation:pj-battle-ring 5.6s both}.clog-battle__stage.is-complete .clog-battle__monster{opacity:0}.clog-battle__stage.is-complete .clog-battle__horizon{background:linear-gradient(90deg,transparent,#a7e5ff,transparent);box-shadow:0 0 40px 7px #1160ff77}
.clog-battle__copy{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:center}.clog-battle__copy h3{font-size:clamp(26px,3vw,38px);margin:0 0 16px}.clog-battle__copy p{color:#d0dbe9;line-height:1.7;margin:0 0 22px}.clog-battle__watch{font:inherit;font-weight:700;text-align:left;border:0;background:linear-gradient(120deg,#e31b23,#b91621);color:#fff;border-radius:9px;padding:15px 18px;cursor:pointer;box-shadow:0 8px 25px #e31b2320}.clog-battle__watch:disabled{cursor:progress;background:#334b68}.clog-battle__service{color:#b2d8ff;font-weight:600;display:inline-block;margin-top:22px;text-underline-offset:5px}.clog-battle__note{font-size:12px;color:#aebdd0!important;max-width:900px;margin:18px 0 0!important}.clog-battle__status{font:12px monospace;color:#b8dbff;min-height:20px;margin:18px 0 0}
@keyframes pj-battle-arrive{0%{transform:translate(-125%,-28%) rotate(-12deg)}20%,80%{transform:translate(0,0)}90%,100%{transform:translate(6%,0)}}@keyframes pj-battle-water{0%,29%{opacity:0;transform:scaleX(0)}36%,65%{opacity:1;transform:scaleX(1)}76%,100%{opacity:0;transform:scaleX(1.1)}}@keyframes pj-battle-defeat{0%,35%{opacity:1;transform:translateX(0)}55%{opacity:1;transform:translateX(12%) rotate(8deg)}80%,100%{opacity:0;transform:translate(18%,30%) scale(.7);filter:blur(14px)}}@keyframes pj-battle-ring{0%,40%{opacity:0;transform:scale(.2)}55%{opacity:.65}85%,100%{opacity:0;transform:scale(2.5)}}
@media(max-width:760px){.clog-battle{padding:56px 0}.clog-battle__body{grid-template-columns:1fr}.clog-battle__stage{min-height:300px;border-right:0;border-bottom:1px solid #ffffff20}.clog-battle__tabs button{padding:10px 13px;font-size:13px}.clog-battle__ring{width:160px;height:160px}.clog-battle__hero,.clog-battle__monster{height:76%}}
@media(prefers-reduced-motion:reduce){.clog-battle *, .clog-battle *:before{animation:none!important;transition:none!important}}html.pj-fx-off .clog-battle *,html.pj-fx-off .clog-battle *:before{animation:none!important;transition:none!important}

.clog-battle [data-pj-cinema-controls]{margin:18px 0 20px}

.clog-battle,.clog-battle h2{scroll-margin-top:100px}