.gx-breakout{--bo-cyan:#69dcff;--bo-violet:#a29cff;--bo-orange:#ffbb65;box-sizing:border-box;position:relative;isolation:isolate;max-width:720px;margin:28px auto 36px;padding:21px 24px 16px;color:#eff7ff;background:radial-gradient(ellipse at 0 0,#28315966,transparent 60%),linear-gradient(145deg,#111a2d,#0b1020 78%);border:1px solid #46557d;border-radius:15px;box-shadow:0 18px 48px #11192d30,inset 0 1px #a8c9ff24;font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;line-height:1.5;letter-spacing:0;overflow:hidden;container-type:inline-size}
.gx-breakout *,.gx-breakout *:before,.gx-breakout *:after{box-sizing:border-box;letter-spacing:0}.gx-breakout [hidden]{display:none!important}.gx-breakout button,.gx-breakout select{font:inherit;text-transform:none;letter-spacing:0;float:none;margin:0;touch-action:manipulation}.gx-breakout button{cursor:pointer}.gx-breakout button:disabled{opacity:.36;cursor:default}.gx-breakout button:focus-visible,.gx-breakout select:focus-visible,.gx-breakout a:focus-visible,.gx-breakout summary:focus-visible,.gx-breakout canvas:focus-visible{outline:3px solid #ffdb96;outline-offset:3px}.gx-breakout button:hover:not(:disabled){filter:brightness(1.16)}
.gx-breakout .bo-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.gx-breakout .bo-header .bo-title{font-size:24px!important;font-weight:850!important;line-height:1.3!important;letter-spacing:.02em!important;color:#f1f7ff!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:none!important}.gx-breakout .bo-title:before,.gx-breakout .bo-title:after,.gx-breakout .bo-panel-title:before,.gx-breakout .bo-panel-title:after{display:none!important}.gx-breakout .bo-tag{font-family:ui-monospace,monospace;font-size:10px;white-space:nowrap;border:1px solid #5b6f9d;background:#799dec0c;border-radius:4px;padding:4px 7px;color:#a2cef9;letter-spacing:.08em}
.gx-breakout .bo-toolbar{display:flex;align-items:flex-end;gap:8px;padding-bottom:15px;border-bottom:1px solid #94b5ec29}.gx-breakout .bo-level-label{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0;font-size:10px;color:#a9b8d5}.gx-breakout .bo-level{width:100%;min-height:42px;min-width:0;padding:9px 27px 9px 12px;border:1px solid #596c98;border-radius:6px;font-size:13px;font-weight:700;color:#fff;background:#1b2843;color-scheme:dark}.gx-breakout .bo-level:disabled{opacity:.72}.gx-breakout .bo-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;min-width:0;gap:6px;padding:10px 14px;border:1px solid #596b96;border-radius:6px;font-size:13px;font-weight:700;line-height:1.4;background:linear-gradient(#263650,#18253b);color:#e9f4ff;box-shadow:inset 0 1px #c1dcff12}.gx-breakout .bo-primary{min-width:96px;background:linear-gradient(135deg,#adefff,#79c4ff 60%,#9eacfa);border-color:#b6e5ff;box-shadow:0 3px 15px #6db9ff20,inset 0 1px #f1fbff;color:#101e36}.gx-breakout .bo-icon{flex:0 0 42px;width:42px;padding:8px}.gx-breakout .bo-icon svg{display:block;flex-shrink:0}
.gx-breakout .bo-stats{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:10px;padding:14px 0}.gx-breakout .bo-stat{min-width:0;padding:1px 10px;border-left:2px solid #546ca4}.gx-breakout .bo-stat:first-child{border-color:var(--bo-cyan)}.gx-breakout .bo-stat:last-child{border-color:var(--bo-orange)}.gx-breakout .bo-stat>span{display:block;color:#9fb2d2;font-size:10px;font-weight:600;letter-spacing:.1em}.gx-breakout .bo-stat>strong{display:block;margin-top:3px;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:23px;font-weight:750;color:#eaf6ff;font-variant-numeric:tabular-nums;white-space:nowrap}.gx-breakout .bo-stat:last-child>strong{font-size:17px;color:#ffd08b;line-height:30px;letter-spacing:.04em}
.gx-breakout .bo-arena{position:relative;width:100%;max-width:550px;aspect-ratio:8/9;margin:auto;border-radius:7px;border:1px solid #53658e;background:#0a1124;overflow:hidden;box-shadow:0 0 0 3px #050b188c,0 10px 22px #0004,inset 0 0 20px #9cbaed0a;user-select:none;-webkit-user-select:none}.gx-breakout .bo-canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none}.gx-breakout .bo-canvas:focus-visible{outline-offset:-3px;outline-color:#87dfffd9;outline-width:2px}.gx-breakout[data-phase=paused] .bo-canvas{filter:blur(5px);opacity:.7}
.gx-breakout .bo-field-hud{position:absolute;z-index:1;pointer-events:none;left:4%;right:4%;top:2.6%;display:flex;align-items:center;gap:8px;font-family:ui-monospace,monospace;font-size:11px;color:#a6c8f3}.gx-breakout .bo-chain{color:#ffc984;font-weight:800;flex:1;min-width:0;white-space:nowrap}.gx-breakout .bo-buff{color:#8ce9eb;font-size:10px}.gx-breakout .bo-clock{margin-left:auto;font-variant-numeric:tabular-nums;font-size:10px;opacity:.85}
.gx-breakout .bo-launch{position:absolute;z-index:3;top:61%;left:50%;transform:translate(-50%,-50%);min-width:128px;min-height:48px;padding:12px 22px;background:linear-gradient(130deg,#b2edff,#81bbf7);border:1px solid #d2f6ff;color:#10213e;border-radius:5px;font-size:16px;font-weight:850;box-shadow:0 0 27px #66baff26,inset 0 1px #fff;letter-spacing:.07em}.gx-breakout .bo-launch-caption{position:absolute;z-index:2;top:calc(61% + 31px);left:8%;right:8%;text-align:center;pointer-events:none;font-size:12px;color:#b3c9e6}.gx-breakout .bo-result-button{position:absolute;z-index:2;left:50%;top:55%;transform:translate(-50%,-50%);border-color:#a9bcec;background:#203259e8;min-width:120px}
.gx-breakout .bo-controls{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;max-width:550px;margin:13px auto 0}.gx-breakout .bo-controls .bo-button{min-height:45px;touch-action:none;user-select:none;-webkit-user-select:none}.gx-breakout .bo-controls .bo-direction{background:linear-gradient(#213858,#15253d);border-color:#566f96}.gx-breakout .bo-controls .bo-fire{background:linear-gradient(#414463,#2a324d);border-color:#7d88ad;color:#d4e8ff;letter-spacing:.1em}.gx-breakout .bo-status{font-size:12px;line-height:1.65;color:#b9cde6;min-height:43px;margin:0!important;padding:12px 1px 8px!important}.gx-breakout .bo-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:5px;padding-top:11px;border-top:1px solid #a3bfed20;font-size:10px;color:#a9bbd7}.gx-breakout .bo-reference{color:#f5ce99}
.gx-breakout .bo-help{border-top:1px solid #9ebce51a;margin-top:12px;padding-top:10px;color:#c3d3e9}.gx-breakout .bo-help summary{cursor:pointer;font-size:12px;color:#b8c9e5;font-weight:650}.gx-breakout .bo-help-body{padding:6px 0}.gx-breakout .bo-help p,.gx-breakout .bo-legacy-copy{font-size:12px!important;line-height:1.8!important;margin:9px 0!important;padding:0!important;color:#b5c5dd}.gx-breakout .bo-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}.gx-breakout .bo-item{display:grid;grid-template-columns:24px 1fr;gap:5px 7px;align-items:center}.gx-breakout .bo-item b{font-size:12px;color:#e7f2ff}.gx-breakout .bo-item>span{grid-column:1/-1;font-size:10px;color:#a5bbd7}.gx-breakout .bo-item-icon{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid currentColor;font-family:ui-monospace,monospace;font-size:15px;background:#12243b}.gx-breakout .bo-W{color:#ffc071}.gx-breakout .bo-M{color:#c4a6ff}.gx-breakout .bo-S{color:#85f8d9}
.gx-breakout .bo-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#050a19c7;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:18px;animation:bo-reveal .25s ease-out}.gx-breakout .bo-panel{width:100%;max-width:380px;max-height:100%;overflow:auto;overscroll-behavior:contain;text-align:center;padding:25px 20px 16px;border:1px solid #829ce7;border-radius:9px;background:radial-gradient(ellipse at 50% 0,#384377,#17233f 75%);box-shadow:0 15px 45px #0008,inset 0 1px #c0d7ff45;color:#f2f6ff}.gx-breakout .bo-panel[data-kind=win],.gx-breakout .bo-panel[data-kind=clear]{border-color:#f5c982;background:radial-gradient(ellipse at 50% 0,#63526b,#202642 80%);box-shadow:0 0 35px #e4b37720,inset 0 1px #ffe2a95c}.gx-breakout .bo-panel .bo-panel-title{font-size:27px!important;line-height:1.4!important;font-weight:850!important;color:#f1f6ff!important;margin:0 0 8px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}.gx-breakout .bo-panel[data-kind=win] .bo-panel-title,.gx-breakout .bo-panel[data-kind=clear] .bo-panel-title{color:#ffdea2!important}.gx-breakout .bo-panel-copy{font-size:13px!important;line-height:1.8!important;color:#d4ddf3!important;margin:8px 0 18px!important;padding:0!important}.gx-breakout .bo-result-meta{font-size:11px!important;color:#b8cde8!important;margin:0 0 16px!important;padding:0!important}.gx-breakout .bo-result-score-label{display:block;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.2em;color:#a4c4ee}.gx-breakout .bo-result-score{display:block;font-family:ui-monospace,monospace;font-size:44px;line-height:1.25;font-weight:850;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 20px #7ccfff33}.gx-breakout .bo-result-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-block:1px solid #9cbcf22c;margin:15px 0;padding:10px 0}.gx-breakout .bo-result-details span{display:block;font-size:10px;color:#b0c4e2}.gx-breakout .bo-result-details strong{display:block;font-size:17px;line-height:1.6;color:#e7f0fd;font-variant-numeric:tabular-nums}.gx-breakout .bo-panel-actions{display:flex;gap:8px;justify-content:center}.gx-breakout .bo-panel-actions .bo-button{flex:1;min-width:0;white-space:nowrap;padding:10px 9px;font-size:12px}.gx-breakout .bo-share{display:inline-block;font-size:10px;color:#bacee8;text-decoration:underline;margin-top:12px;padding:4px}.gx-breakout .bo-share:hover{color:#fff}
body:has(.gx-breakout:focus-within) #pagetop{visibility:hidden!important;pointer-events:none!important}
@keyframes bo-reveal{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.gx-breakout{padding:15px 11px 12px;border-radius:11px;margin:18px auto 25px}.gx-breakout .bo-header{gap:8px;margin-bottom:13px}.gx-breakout .bo-header .bo-title{font-size:19px!important}.gx-breakout .bo-tag{font-size:8px;padding:4px 5px}.gx-breakout .bo-toolbar{gap:6px;padding-bottom:12px}.gx-breakout .bo-level{font-size:12px;min-height:40px;padding:9px 20px 9px 8px}.gx-breakout .bo-toolbar>.bo-button{min-height:40px;padding:8px 10px;font-size:12px}.gx-breakout .bo-toolbar>.bo-primary{min-width:78px}.gx-breakout .bo-toolbar>.bo-icon{width:35px;flex-basis:35px;padding:7px}.gx-breakout .bo-stats{gap:6px;padding:12px 0}.gx-breakout .bo-stat{padding:0 7px}.gx-breakout .bo-stat>strong{font-size:19px}.gx-breakout .bo-stat>span{font-size:9px}.gx-breakout .bo-stat:last-child>strong{font-size:12px;line-height:26px;letter-spacing:0}.gx-breakout .bo-field-hud{gap:5px;font-size:10px}.gx-breakout .bo-buff,.gx-breakout .bo-clock{font-size:9px}.gx-breakout .bo-controls{gap:6px;margin-top:11px}.gx-breakout .bo-controls .bo-button{min-height:42px}.gx-breakout .bo-status{font-size:11px;min-height:42px}.gx-breakout .bo-launch{min-width:108px;min-height:42px;font-size:14px;padding:10px 16px}.gx-breakout .bo-launch-caption{font-size:10px;top:calc(61% + 27px)}.gx-breakout .bo-overlay{padding:12px}.gx-breakout .bo-panel{padding:18px 13px 12px}.gx-breakout .bo-panel .bo-panel-title{font-size:23px!important}.gx-breakout .bo-result-meta{font-size:10px!important;margin-bottom:10px!important}.gx-breakout .bo-result-score{font-size:35px}.gx-breakout .bo-result-details{margin:10px 0;padding:8px 0}.gx-breakout .bo-result-details strong{font-size:15px}.gx-breakout .bo-panel-actions .bo-button{min-height:39px;padding:8px;font-size:11px}.gx-breakout .bo-share{margin-top:8px}.gx-breakout .bo-items{gap:7px}.gx-breakout .bo-item{grid-template-columns:20px 1fr;gap:5px}.gx-breakout .bo-item b{font-size:11px}.gx-breakout .bo-item-icon{height:20px;font-size:13px}}
@container(max-width:300px){.gx-breakout .bo-header .bo-title{font-size:17px!important}.gx-breakout .bo-tag{display:none}.gx-breakout .bo-stat{padding:0 5px}.gx-breakout .bo-stat>strong{font-size:17px}.gx-breakout .bo-stat:last-child>strong{font-size:10px;line-height:23px}.gx-breakout .bo-panel{padding:13px 10px 9px}.gx-breakout .bo-panel .bo-panel-title{font-size:21px!important}.gx-breakout .bo-result-score{font-size:31px}.gx-breakout .bo-result-details{margin:8px 0;padding:6px 0}.gx-breakout .bo-share{margin-top:6px}}
@media(prefers-reduced-motion:reduce){.gx-breakout *,.gx-breakout *:before,.gx-breakout *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Evolution: equipment display, charged action and between-stage upgrades. */
.gx-breakout{--zone:#49dcff;max-width:760px;background:radial-gradient(ellipse at 12% 0,#24435966,transparent 55%),linear-gradient(145deg,#121c2e,#080f1c 80%);border-color:#586e8b;box-shadow:0 22px 56px #08132538,inset 0 1px #cfebff35}
.gx-breakout .bo-tag{border-color:#8bdffa55;color:#c2ecff;font-size:9px;letter-spacing:.12em}
.gx-breakout .bo-arena{max-width:580px;border-color:#7092b4;box-shadow:0 0 0 3px #020816,0 0 0 4px #97c7ff24,0 12px 32px #0005;border-radius:5px}
.gx-breakout .bo-controls{max-width:580px}
.gx-breakout .bo-loadout{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:580px;margin:0 auto 13px;padding:0 0 8px;border-bottom:1px solid #87b2e926}
.gx-breakout .bo-slot{min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;padding:4px 1px 5px;border-bottom:2px solid #61718e33;color:#7387a4;border-radius:5px 5px 0 0;background:#b8d7ff03;transition:background .18s,color .18s}
.gx-breakout .bo-slot-icon{display:block;line-height:1;height:21px}.gx-breakout .bo-slot-icon svg{width:20px;height:20px;display:block}
.gx-breakout .bo-slot-name{font-size:9px;line-height:1.3;font-weight:650;white-space:nowrap}
.gx-breakout .bo-slot-time{font:600 10px/1.15 ui-monospace,monospace;font-variant-numeric:tabular-nums;min-height:12px}
.gx-breakout .bo-slot.is-active{color:var(--power);border-color:var(--power);background:linear-gradient(#a6d3ff08,#a6d3ff10);text-shadow:0 0 10px #8edbff30;box-shadow:0 3px 9px #0002}
.gx-breakout .bo-slot.is-active .bo-slot-name{color:#e4f4ff}
.gx-breakout .bo-slot.is-active .bo-slot-icon{filter:drop-shadow(0 0 5px var(--power))}
.gx-breakout .bo-controls .bo-fire{position:relative;overflow:hidden;background:linear-gradient(90deg,#31617780 var(--charge,0%),transparent var(--charge,0%)),linear-gradient(#25384e,#172537);border-color:#7193b6;font-size:12px;font-weight:800;letter-spacing:.03em}
.gx-breakout .bo-controls .bo-fire:disabled{opacity:.78;color:#b1c9dc;cursor:default}
.gx-breakout .bo-controls .bo-fire.is-charged{opacity:1;color:#241729;background:linear-gradient(125deg,#fff4c6,#ffd17b 65%,#ffa96e);border-color:#fff0c9;box-shadow:0 0 18px #ffbe6159,inset 0 1px #fff;animation:bo-charge 1.8s ease-in-out infinite}
.gx-breakout .bo-build{font-size:10px;line-height:1.7;padding:7px 9px;color:#b9d3e4;border-left:2px solid #829fc9;background:#96c7ed08;margin:2px 0 9px}
.gx-breakout .bo-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.gx-breakout .bo-item{grid-template-columns:28px 1fr}.gx-breakout .bo-item-icon{height:28px;width:28px;border-radius:6px;background:#102036}
.gx-breakout .bo-item-icon svg{width:20px;height:20px}.gx-breakout .bo-item>span{padding-left:35px;grid-column:1/-1;font-size:11px;line-height:1.5;margin-top:-3px}
.gx-breakout .bo-result-details{gap:4px}.gx-breakout .bo-result-details span{white-space:nowrap}
.gx-breakout .bo-panel-actions .bo-button{padding-inline:5px;font-size:11px}
.gx-breakout .bo-panel[data-kind=clear]{max-width:410px;padding:20px 22px 21px}
.gx-breakout .bo-panel[data-kind=clear] .bo-panel-copy{margin:2px 0 8px!important;font-size:12px!important}
.gx-breakout .bo-upgrade-lead{font-size:12px!important;color:#dbdef2!important;margin:0 0 12px!important;padding:0!important}
.gx-breakout .bo-upgrades{display:grid;gap:8px}
.gx-breakout .bo-upgrade{position:relative;display:grid;grid-template-columns:1fr 15px;text-align:left;justify-items:start;gap:1px 8px;min-height:62px;padding:9px 14px;border-color:#d3daef40;border-left:3px solid var(--power);border-radius:5px;background:linear-gradient(100deg,#96bdf416,#101c3290);box-shadow:inset 0 1px #bdd9ff12}
.gx-breakout .bo-upgrade>strong{color:var(--power);font-size:14px;line-height:1.4;grid-column:1}.gx-breakout .bo-upgrade>span{color:#cbd6eb;font-size:11px;line-height:1.4;grid-column:1}.gx-breakout .bo-upgrade .bo-upgrade-arrow{grid-column:2;grid-row:1/3;align-self:center;color:#dcefff;font-size:25px;font-weight:400}
.gx-breakout .bo-field-hud{top:3%;color:#c2dff5}.gx-breakout .bo-chain{color:#ffd69c}.gx-breakout .bo-buff{color:#d1e4f4}.gx-breakout .bo-clock{opacity:1}
@keyframes bo-charge{50%{box-shadow:0 0 25px #ffbe617a,inset 0 1px #fff}}
@media(max-width:600px){
 .gx-breakout{padding-top:15px}.gx-breakout .bo-stats{padding-bottom:10px}.gx-breakout .bo-loadout{gap:3px;margin-bottom:11px;padding-bottom:7px}.gx-breakout .bo-slot{padding:3px 0 4px;gap:2px}.gx-breakout .bo-slot-name{font-size:8px}.gx-breakout .bo-slot-time{font-size:9px}.gx-breakout .bo-slot-icon,.gx-breakout .bo-slot-icon svg{width:19px;height:19px}
 .gx-breakout .bo-panel[data-kind=clear]{padding:15px 13px 13px}.gx-breakout .bo-panel[data-kind=clear] .bo-panel-title{font-size:22px!important}.gx-breakout .bo-upgrade-lead{font-size:11px!important;margin-bottom:9px!important}.gx-breakout .bo-upgrades{gap:6px}.gx-breakout .bo-upgrade{min-height:51px;padding:6px 10px;gap:0 5px}.gx-breakout .bo-upgrade>strong{font-size:12px}.gx-breakout .bo-upgrade>span{font-size:10px}.gx-breakout .bo-build{font-size:9px}.gx-breakout .bo-items{gap:12px 9px}.gx-breakout .bo-item>span{font-size:10px;padding-left:0}
}
@container(max-width:300px){.gx-breakout .bo-slot-name{font-size:7px}.gx-breakout .bo-slot-icon,.gx-breakout .bo-slot-icon svg{width:17px;height:17px}.gx-breakout .bo-slot-time{font-size:8px}.gx-breakout .bo-panel[data-kind=clear]{padding:11px 10px}.gx-breakout .bo-panel[data-kind=clear] .bo-panel-title{font-size:19px!important}.gx-breakout .bo-upgrade-lead{font-size:10px!important;margin-bottom:7px!important}.gx-breakout .bo-upgrade{min-height:45px;padding:5px 9px}.gx-breakout .bo-upgrade>strong{font-size:11px}.gx-breakout .bo-upgrade>span{font-size:9px}.gx-breakout .bo-panel-actions .bo-button{font-size:10px}}
