.battle-gate{z-index:2147483000;color:#fff1d1;isolation:isolate;background:radial-gradient(at 50% 40%,#244b61cc,#0000 60%),#0a1222f7;place-items:center;padding:16px;font-family:DM Sans,sans-serif;animation:.25s both gate-in;display:grid;position:fixed;inset:0;overflow:hidden}.battle-gate *{box-sizing:border-box}.gate-grid{z-index:-1;transform-origin:50% 0;background-color:#0000;background-image:linear-gradient(#8ddbc826 1px,#0000 1px),linear-gradient(90deg,#8ddbc826 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:60px 60px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;animation:1.6s linear infinite gate-grid;position:absolute;inset:52% -40% -60%;transform:perspective(400px)rotateX(53deg);-webkit-mask-image:linear-gradient(#0000,#000 35%);mask-image:linear-gradient(#0000,#000 35%)}.gate-card{text-align:center;background:#101a30e6;border:3px solid #f7d086;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:clamp(14px,3vh,30px);width:min(940px,100%);min-height:min(86dvh,720px);max-height:100%;padding:clamp(20px,5vh,56px) clamp(14px,4vw,48px);display:flex;overflow:auto;box-shadow:0 0 0 6px #101a30,0 0 0 9px #69d3c766,0 0 80px #69d3c740}.gate-card small{letter-spacing:.24em;color:#8ddbc8;font-size:clamp(9px,1.6vw,13px);font-weight:900}.gate-card h2{color:#f7d086;letter-spacing:-.01em;text-shadow:0 5px #b5542c,0 10px 26px #000a;margin:0;font:italic clamp(48px,11vw,128px)/.95 DM Serif Display,serif;animation:1.4s ease-in-out infinite gate-pulse}.gate-digits{cursor:text;display:block;position:relative}.gate-digits input{opacity:0;color:#0000;caret-color:#0000;z-index:1;background:0 0;border:0;width:100%;height:100%;margin:0;padding:0;font-size:32px;position:absolute;inset:0}.gate-digits span{gap:clamp(8px,2.4vw,22px);display:flex}.gate-digits i{aspect-ratio:3/4;color:#fff1d1;background:#182941;border:3px solid #8ba6c180;border-radius:6px;place-items:center;width:clamp(62px,15vw,132px);font:900 clamp(44px,11vw,104px)/1 DM Sans,sans-serif;display:grid;box-shadow:inset 0 -6px #0c1628}.gate-digits i.filled{color:#f7d086;border-color:#69d3c7;box-shadow:inset 0 -6px #0c1628,0 0 22px #69d3c766}.gate-digits i.caret{border-color:#f7d086;animation:1s steps(2,end) infinite gate-caret}.gate-hint{letter-spacing:.2em;color:#a9bed0;margin:0;font-size:clamp(11px,1.9vw,15px);font-weight:900}.gate-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.gate-actions button{letter-spacing:.16em;color:#2a1608;cursor:pointer;background:#f7d086;border:2px solid #f7d086;border-radius:4px;padding:14px 26px;font:900 clamp(13px,2vw,17px) DM Sans,sans-serif}.gate-actions [data-gate=back]{color:#a9bed0;background:0 0;border-color:#8ba6c14d}.gate-actions button:focus-visible{outline-offset:3px;outline:3px solid #69d3c7}.battle-gate.shake .gate-card{animation:.42s both gate-shake}.battle-gate.shake .gate-hint{color:#ff8a70}.battle-gate.shake .gate-digits i{border-color:#ff8a70}.battle-gate.unlocked{animation:.42s both gate-out}.battle-gate.unlocked .gate-digits i{color:#9be37a;border-color:#9be37a}.battle-gate.leaving{animation:.18s both gate-out}.gate-stages{gap:10px;width:min(620px,100%);display:grid}.gate-stages div{text-align:left;background:#182941;border:2px solid #8ba6c180;border-radius:6px;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:10px 12px;display:grid}.gate-stages b{color:#f7d086;font:900 clamp(20px,4vw,30px)/1 DM Sans,sans-serif}.gate-stages span{letter-spacing:.14em;font-size:clamp(12px,2vw,15px);font-weight:900}.gate-stages em{letter-spacing:0;color:#a9bed0;font-size:clamp(11px,1.8vw,13px);font-style:normal;font-weight:600;display:block}.gate-stages button{letter-spacing:.14em;color:#2a1608;cursor:pointer;background:#f7d086;border:2px solid #f7d086;border-radius:4px;padding:10px 14px;font:900 clamp(11px,1.8vw,14px) DM Sans,sans-serif}.gate-stages [data-boss]{color:#ff9a7a;background:0 0;border-color:#ff9a7a}.gate-stages button:focus-visible{outline-offset:2px;outline:3px solid #8ddbc8}@keyframes gate-in{0%{opacity:0}}@keyframes gate-out{to{opacity:0;transform:scale(1.04)}}@keyframes gate-grid{to{background-position:0 60px}}@keyframes gate-pulse{50%{transform:scale(1.03)}}@keyframes gate-caret{50%{border-color:#8ba6c180}}@keyframes gate-shake{10%,90%{transform:translate(-4px)}20%,80%{transform:translate(8px)}30%,50%,70%{transform:translate(-14px)}40%,60%{transform:translate(14px)}}@media (prefers-reduced-motion:reduce){.battle-gate,.gate-grid,.gate-card h2,.gate-digits i.caret{animation:none}}