:root{--ink:#030a1a;--cyan:#75efff;--paper:#f3f9ff;color:var(--paper);background:var(--ink);font-family:Inter,"Arial",system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0}button,select,a{font:inherit;color:inherit}button,a{cursor:pointer}button{border:0;background:transparent}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #ffb000;outline-offset:4px}
header{position:relative;z-index:4;height:66px;display:flex;align-items:center;padding:0 4.5vw;gap:4vw;border-bottom:1px solid #373b44;background:var(--ink)}.brand{display:flex;align-items:center;gap:13px;text-decoration:none}.brand b{font:italic 1000 34px/.9 Arial,sans-serif;letter-spacing:-5px;transform:skewX(-8deg)}.brand b span{color:var(--cyan)}.brand strong{border-left:1px solid #696c75;padding-left:13px;font:900 11px/.95 Arial,sans-serif;letter-spacing:1px}nav{display:flex;align-items:center;gap:26px;margin-left:auto}nav button{padding:10px 0;font-size:14px;font-weight:700}.langs{display:flex;align-items:center;gap:6px;padding-left:20px;border-left:1px solid #555;white-space:nowrap}.langs span{color:var(--cyan);font-size:21px}.langs select{color:var(--paper);background:var(--ink);border:0;font-size:13px;cursor:pointer;max-width:138px}
dialog{padding:20px;border:1px solid #5ef1e1;border-top:5px solid var(--cyan);background:#161c2b;color:var(--paper);width:min(840px,92vw);max-height:90svh}dialog::backdrop{background:#080a13df}.modalhead{display:flex;align-items:center;justify-content:space-between;gap:12px}.modalhead h2{margin:0;font-size:22px}.modalhead button{font-size:27px;width:44px;height:44px}video{width:100%;max-height:66svh;background:#070a13}dialog p{line-height:1.6}dialog a{display:inline-block;padding:13px 19px;background:var(--paper);color:var(--ink);font-weight:700}#body button{padding:10px;border-bottom:2px solid #637282}#body button[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan)}
header{background:#030c20;height:60px;border-bottom:1px solid #4083b3;box-shadow:0 3px 0 #0a2752}
.brand img{width:clamp(120px,13vw,210px);height:auto}
main{position:relative;isolation:isolate;overflow:hidden;height:calc(100svh - 112px);min-height:480px;background:#020b20}
.arena,.impact{position:absolute;inset:0;pointer-events:none}
.arena{background:#041635 url(plate.webp) center / cover no-repeat}
.impact{background:linear-gradient(102deg,#020919d9 0%,#03142f99 26%,transparent 57%);clip-path:polygon(0 0,69% 0,33% 100%,0 100%)}
picture{position:absolute;inset:0;pointer-events:none}picture img{position:absolute;right:-2%;bottom:-1%;width:76%;height:104%;object-fit:contain;object-position:100% 75%;filter:drop-shadow(-3px 3px 1px #061332) drop-shadow(-1px -1px 0 #70eaff);animation:strike .52s cubic-bezier(.15,.75,.16,1) both}
.copy{position:absolute;z-index:2;left:3%;bottom:9%;width:46%;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}.copy>*{pointer-events:auto}
h1{width:81.6%;position:relative;margin:0 0 1.4vh -3%;line-height:0;filter:drop-shadow(0 7px 0 #031137);animation:none}
h1 svg{display:block;width:100%;height:auto}.copy p{background:#03102cdb;border-left:4px solid #61edff;margin:0 0 3vh 1.6vw;padding:6px 13px;font:normal 800 clamp(14px,1.2vw,21px)/1.25 system-ui,sans-serif;letter-spacing:.09em}.actions{display:flex;align-items:stretch;gap:12px;margin-left:1.6vw}.actions button{font-size:clamp(14px,1.35vw,23px);white-space:nowrap;font-weight:900;font-style:normal}
#play,#watch{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 23px;transform:skewX(-14deg);transition:transform .14s,filter .14s}
#play{color:#05142b;background:linear-gradient(110deg,#efffff 3%,#e6fdff 50%,#70f2fc);box-shadow:inset 5px 0 #25ceff,4px 5px #1359a9}
#watch{background:linear-gradient(110deg,#102e69,#092353);color:#efffff;border:1px solid #4398cb;gap:10px}
#play i{font-size:1.45em;line-height:1;color:#034374}#watch i{font-size:.8em;color:var(--cyan)}.actions button:hover,.actions button:focus-visible{transform:skewX(-14deg) translate(3px,-2px);filter:brightness(1.17)}
footer{min-height:52px;display:flex;align-items:center;gap:20px;padding:0 4.5%;background:#030c20;border-top:2px solid #3ba2d3}.line{width:36px;height:12px;background:repeating-linear-gradient(115deg,transparent 0 3px,#4ce1ff 3px 7px)}.footlabel{font:italic 900 12px Arial;letter-spacing:.14em;color:var(--cyan)}#names{display:flex;gap:16px}#names button{font-size:14px;font-weight:700;padding:7px 1px}#names button+button:before{content:'/';margin-right:16px;color:#4280b2}#motion{margin-left:auto;min-width:40px;min-height:40px;color:var(--cyan)}nav button:hover,footer button:hover{color:var(--cyan)}
@keyframes strike{from{transform:translate(5%,2%) scale(1.06);opacity:.65}to{transform:none;opacity:1}}html.paused *{animation-play-state:paused!important}
@media(min-aspect-ratio:17/9) and (min-width:701px){picture img{object-position:center 20%;width:71%;height:auto;max-height:none;bottom:auto;top:-4%}.copy{width:41%;bottom:7%}}
@media(max-width:700px){header{height:53px;padding:0 4%;gap:9px}.brand img{width:clamp(65px,19vw,105px)}nav{gap:10px}nav button{font-size:12px}.langs{padding-left:6px;gap:2px}.langs select{font-size:12px;max-width:86px}.langs span{font-size:15px}main{height:calc(100svh - 102px);min-height:585px}.arena{background-position:67% center}.impact{background:linear-gradient(0deg,#030c24 0%,#031839ad 27%,transparent 48%);clip-path:none}picture img{width:min(99.75%,calc(100% - 12px));left:0;right:0;margin-inline:auto;height:78.85%;top:-2%;bottom:auto;object-position:center top}.copy{width:100%;bottom:3%;left:0;padding:0 4%;align-items:center;text-align:center}.copy h1{width:min(71.3%,373.75px);margin:0 auto 4px;filter:drop-shadow(0 4px 0 #031137)}.copy p{margin:0 auto 14px;padding:4px 10px;border-left:0;font-size:13px}.actions{margin:0 auto;gap:12px;justify-content:center;flex-wrap:wrap;max-width:100%}.actions button{font-size:15px}.actions #play,.actions #watch{padding:13px clamp(20px,5.6vw,32px);gap:9px}footer{min-height:49px;padding:0 4%;gap:10px}.footlabel{display:none}.line{width:15px}#names{gap:5px}#names button{font-size:12px}#names button+button:before{margin-right:5px}#motion{min-width:28px}}
@media(max-width:360px){.brand img{width:54px}nav{gap:5px}.langs select{max-width:76px}.actions button{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(min-width:701px) and (max-aspect-ratio:17/9){picture img{object-position:right bottom}}

.copy .brand-lockup { --rz-cycle:6.25s; animation:none }
.copy .rz-sweep { transform:translateX(-315px); animation:rzComboSweep var(--rz-cycle) linear infinite }
@keyframes rzComboSweep {
 0%,2.2% { transform:translateX(-315px) }
 17.7%,100% { transform:translateX(1300px) }
}
.copy .rz-orbit { animation:rzOrbitFade var(--rz-cycle) linear infinite }
.copy .rz-orbit-stroke {
 stroke-dasharray:var(--tail) calc(var(--distance) + 500px);
 stroke-dashoffset:var(--tail);
 animation:rzOrbitLap var(--rz-cycle) linear infinite;
}
@keyframes rzOrbitLap {
 0% { stroke-dashoffset:var(--tail) }
 84%,100% { stroke-dashoffset:calc(var(--tail) - var(--distance) - 210px) }
}
@keyframes rzOrbitFade {
 0%,84%,100% { opacity:0 }
 2%,79% { opacity:1 }
}
.paused .rz-ornament {display:none}
@media (prefers-reduced-motion:reduce) {
  .copy .rz-ornament {display:none}
}
.actions button i{font-style:normal}
#battleFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.actions .actionIcon{width:1.2em;height:1.2em;flex:none}#watch svg{color:var(--cyan)}


@media(min-width:701px){
  .copy{top:50%;bottom:auto;transform:translateY(-50%)}
}

.actions .play-icon { background: url("gamepad-solid.svg") center / contain no-repeat; }

#hero.playing { background: #030b1b; }
#hero.playing > :not(#game-player) { display: none; }
#game-player[hidden] { display: none; }
#game-player { height: 100%; display: grid; grid-template-rows: minmax(0,1fr) auto; }
.game-viewport { min-width: 0; min-height: 0; background: #020816; }
.game-viewport iframe { display: block; width: 100%; height: 100%; border: 0; }
.game-tools {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  padding: 0 3%; gap: 2px 18px; background: #061428; border-top: 1px solid #254564;
  font-size: 13px; font-weight: 700;
}
#game-status { margin-right: auto; color: #9cd4e4; }
#game-status:empty { display: none; }
.game-tools a, .game-tools button { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 3px; color: #d2edfa; text-decoration: none; }
.game-tools :is(a,button):hover { color: #62efff; }
@media (max-width: 700px) and (orientation: portrait) {
  #hero.playing { height: calc(100svh - 53px - 49px); min-height: 0; }
  .game-tools { gap: 0 12px; }
  .game-tools a, .game-tools button { min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  #hero.playing { height: calc(100svh - 60px); min-height: 0; }
}