:root{
  color-scheme:dark;
  --display:'Dela Gothic One','Arial Black','Hiragino Kaku Gothic ProN',sans-serif;
  --body:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Noto Sans JP',system-ui,sans-serif;
  --red:#ff638c;--blue:#45dfe2;--yellow:#ffd16c;--purple:#a48cff;
}
*,*::before,*::after{box-sizing:border-box}
html{background:#0d1427}
body{margin:0;min-width:320px;color:var(--ds-color-text);font-family:var(--body);font-weight:700}
button,input,select{font-family:var(--body)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffda7a;outline-offset:3px}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
[hidden]{display:none!important}
.arena{min-height:100dvh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% -8%,#233458 0,transparent 48%),#0d1427}
.arena::before{content:"";inset:0;pointer-events:none;position:absolute;opacity:.28;background-image:linear-gradient(#5a6f9633 1px,transparent 1px),linear-gradient(90deg,#5a6f9633 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,#000 8%,transparent 85%)}
.arena::after{content:"";pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 49% 57%,transparent 28%,#08101e55 100%)}
.arena-header,.arena-main{position:relative;z-index:1}
.arena-header{height:83px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #62749838;padding:0 clamp(18px,4vw,64px);background:#0e192b88;backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand-logo{display:grid;place-items:center;width:42px;height:42px;transform:rotate(-6deg);color:#10213b;background:#46dce1;box-shadow:4px 4px 0 #ef6486;border-radius:9px;font:24px var(--display)}
.brand-logo span{color:#fd6b92;font-size:18px;margin-left:-6px}
.brand>div{display:flex;flex-direction:column;line-height:1.1;gap:6px}
.eyebrow,.control-overline,.edition,.stage-topline,.stage-bottom,.footer,.dialog-kicker{font-size:10px;font-weight:900;letter-spacing:.18em}
.eyebrow{color:#8fa8c9}
.brand strong{font-family:var(--display);font-size:18px;letter-spacing:.02em}
.header-actions{display:flex;align-items:center;gap:10px}
.edition{color:#8295b4;margin-right:16px;white-space:nowrap}
.edition b{color:#45dfe2;font-size:13px}
.header-actions .ds-button{font-size:12px;font-weight:900;min-height:38px}
.arena-main{max-width:1560px;margin:auto;padding:clamp(22px,4vw,50px) clamp(16px,4vw,64px) 18px}
.intro{text-align:center;margin-bottom:30px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 15px;border:1px solid #4bdcde53;border-radius:5px;color:#75dadd;background:#41d9db0a;letter-spacing:.2em;font-size:10px;font-weight:900}
.live-dot{width:6px;height:6px;background:#64f2cd;border-radius:50%;box-shadow:0 0 12px #62f7e0;animation:dot 1.6s ease-in-out infinite}
@keyframes dot{50%{opacity:.4}}
.intro h1{margin:15px 0 8px;font-family:var(--display);font-size:clamp(26px,4.3vw,52px);line-height:1.4;letter-spacing:-.025em;text-wrap:balance}
.intro h1 em{font-style:normal;background:linear-gradient(100deg,#65eaf0,#ffb36e 72%,#ff698c);color:transparent;background-clip:text;-webkit-background-clip:text}
.intro p{font-size:clamp(12px,1.3vw,15px);color:#adbddd;margin:0}
.battle-layout{display:grid;grid-template-columns:minmax(190px,.77fr) minmax(350px,2.1fr) minmax(215px,.85fr);gap:18px;align-items:stretch}
.teams-panel{display:flex;flex-direction:column;gap:13px}
.team-card{flex:1;min-height:130px;border:1px solid #435372;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:18px;border-radius:12px;background:linear-gradient(140deg,#202c45,#131e33);overflow:hidden;transition:border-color .25s,background .25s,transform .25s}
.team-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--team-color)}
.team-card::after{content:"";position:absolute;right:-25px;bottom:-55px;width:145px;height:145px;border:28px solid var(--team-color);opacity:.07;transform:rotate(20deg);border-radius:50%}
.team-card.is-active{border-color:var(--team-color);background:linear-gradient(140deg,color-mix(in srgb,var(--team-color) 14%,#1d2943),#121e32);box-shadow:0 0 0 1px color-mix(in srgb,var(--team-color) 50%,transparent),0 0 30px color-mix(in srgb,var(--team-color) 12%,transparent)}
.team-card.is-winner{border-color:#f3cb72;box-shadow:0 0 21px #e7bf4c33}
.team-card .team-index{display:flex;align-items:center;justify-content:space-between;color:#8ea5c5;font-size:10px;letter-spacing:.14em}
.team-card .team-status{color:var(--team-color);font-size:9px;border:1px solid currentColor;padding:3px 6px;border-radius:4px}
.team-name{font-family:var(--display);font-size:clamp(14px,1.6vw,21px);line-height:1.55;overflow-wrap:anywhere}
.team-score-row{display:flex;align-items:baseline;gap:7px}
.team-score{font:clamp(28px,3.3vw,43px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.team-pts{font-size:10px;color:#8095b7;letter-spacing:.1em}
.team-card .team-track{height:3px;background:#33435f;border-radius:9px;overflow:hidden}
.team-card .team-track>span{display:block;height:100%;width:var(--track-width,0%);background:var(--team-color);transition:width .6s ease}
.stage{min-width:0;border:1px solid #4c63838c;border-radius:14px;position:relative;overflow:hidden;min-height:460px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 53%,#213b55 0,#18273e 40%,#111c31 83%);box-shadow:0 14px 55px #02091744}
.stage::before,.stage::after{content:"";position:absolute;pointer-events:none}
.stage::before{inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 47px,#92c2da05 48px),repeating-linear-gradient(0deg,transparent 0,transparent 47px,#92c2da07 48px)}
.stage::after{inset:0;border:1px solid #a0c9e81a;border-radius:12px}
.stage-topline,.stage-bottom{z-index:2;position:relative;display:flex;align-items:center;justify-content:space-between;color:#8ca6c5;padding:17px 22px}
.stage-topline>span:first-child{display:flex;align-items:center;gap:10px;color:#bad2e4}
.stage-topline i{width:7px;height:7px;display:inline-block;background:#4ad8d6;transform:rotate(45deg);box-shadow:0 0 10px #58ffff}
.stage-visual{position:relative;isolation:isolate;flex:1;min-height:310px;display:grid;place-items:center;overflow:hidden;--power:0;--energy-color:#4adadf}
#energyCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.energy-aura{position:absolute;width:clamp(180px,46%,350px);aspect-ratio:1;background:radial-gradient(circle,var(--energy-color) 0%,transparent 63%);opacity:calc(.09 + var(--power)*.35);filter:blur(42px);transform:scale(calc(1.1 + var(--power)*.65));transition:opacity .1s,transform .1s}
.orb{position:absolute;width:min(44%,235px);min-width:150px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;transform:scale(calc(.93 + var(--power)*.18));transition:transform .09s;filter:drop-shadow(0 0 calc(10px + var(--power)*42px) var(--energy-color))}
.orb-inner{position:absolute;inset:0;border-radius:50%;border:1px solid #caffff7a;background:radial-gradient(circle at 36% 30%,#b8fcff 0%,#75e8ed 7%,#388db3 26%,#1b456b 58%,#0a1830 78%);box-shadow:inset -16px -20px 29px #0b1837,inset 9px 9px 26px #b0f6ff50,0 0 3px #c7faff;animation:orb-breathe 4s ease-in-out infinite}
.orb-inner::before,.orb-inner::after{content:"";position:absolute;inset:-13%;border:1px solid #81d9fc55;border-radius:50% 43% 56% 50%;transform:rotate(19deg);animation:spin 8s linear infinite}
.orb-inner::after{inset:-22%;border-color:#8bd2f13b;animation-duration:13s;animation-direction:reverse}
.orb-shine{position:absolute;inset:8%;border:2px solid #e3ffff24;border-radius:50%;box-shadow:0 0 35px #5cf5ec50}
@keyframes orb-breathe{50%{filter:brightness(1.2)}}
@keyframes spin{to{transform:rotate(379deg)}}
.energy-center{z-index:1;display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 20px #092536c9;pointer-events:none}
.energy-sub{font-size:10px;letter-spacing:.28em;font-weight:900;color:#c2ebf0}
.energy-number{font:clamp(45px,6.1vw,89px)/1.25 var(--display);letter-spacing:-.07em;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 4px 35px #7dffff85}
.energy-unit{font-size:10px;font-weight:900;letter-spacing:.27em;color:#9cc6d6}
.stage-side-label{position:absolute;top:49%;font-size:10px;letter-spacing:.18em;color:#a4c3d16b;writing-mode:vertical-rl;user-select:none}
.stage-side-label--left{left:18px;transform:rotate(180deg)}.stage-side-label--right{right:18px}
.stage-bottom{border-top:1px solid #61799343;min-height:70px;gap:10px}
.level-legend,.stage-timer{display:flex;flex-direction:column;gap:6px}
.level-bars{display:flex;align-items:end;gap:3px;height:21px}
.level-bars i{display:block;width:6px;height:var(--bar-h);background:#3f5470;border-radius:2px;transition:background .12s}
.level-bars i.on{background:var(--bar-color,#52dcdf);box-shadow:0 0 7px var(--bar-color,#52dcdf)}
.run-status{flex:1;text-align:center;font-size:12px;color:#d0dfec;letter-spacing:0}
.stage-timer{text-align:right;white-space:nowrap}
.stage-timer strong{font:24px/1 var(--display);color:#fff;letter-spacing:0}
.stage-timer small{font-size:12px;margin-left:2px}
.control-panel{min-width:0;padding:22px 19px 18px;display:flex;flex-direction:column;align-items:start;border:1px solid #374662;border-radius:12px;background:linear-gradient(155deg,#1f2b45,#121d32)}
.control-overline{color:#829bbd;margin-bottom:28px}
.turn-tag{font-weight:900;font-size:11px;letter-spacing:.12em;background:#53d7e01c;color:#80eaf0;border:1px solid #6adee676;padding:6px 10px;border-radius:4px}
.control-panel h2{font:clamp(19px,2vw,26px)/1.55 var(--display);margin:13px 0 9px;overflow-wrap:anywhere}
.control-panel>p:not(.privacy-note){color:#a9b9d3;font-size:13px;line-height:1.85;margin:0}
.countdown{align-self:center;max-width:100%;min-width:0;white-space:nowrap;font:clamp(25px,2.6vw,38px)/1.45 var(--display);margin:auto 0;color:#d9eaf5;letter-spacing:-.045em;text-shadow:2px 3px 0 #143f5a}
.countdown span{color:#ff6f91}
.countdown.is-running{color:#fff4be;text-shadow:0 0 23px #fdc36b}
.action-stack{width:100%;display:grid;gap:9px}
.action-stack button{width:100%;white-space:normal;font-weight:900}
.primary-action.ds-button{font-size:15px;min-height:56px;background:linear-gradient(115deg,#4ce1df,#72eed5);color:#0b2839;border:0;box-shadow:0 4px 0 #2c929b,0 7px 17px #35c8cd2b;border-radius:9px}
.primary-action.ds-button:hover{background:linear-gradient(115deg,#69efed,#9ef4dc)}
.primary-action.ds-button:active{transform:translateY(2px)}
.demo-action.ds-button{font-size:13px;min-height:45px}
.restart-button{margin-top:16px;border:0;background:transparent;color:#99d9de;align-self:center;font-size:13px;font-weight:900;text-decoration:underline;text-underline-offset:4px;padding:10px}
.privacy-note{margin:21px 0 0!important;color:#879ebd!important;font-size:10px!important;line-height:1.8!important;align-self:center;text-align:center}
.footer{margin-top:23px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#8397b4;letter-spacing:.06em;line-height:1.8}
.footer>div{display:flex;align-items:center;gap:10px}
.footer-mark{font-family:var(--display);color:#56d9db;font-size:13px;letter-spacing:-.03em}
.ds-dialog{color:#eef5ff;border-color:#425679;background:#18243d}
.ds-dialog::backdrop{background:#061020c2}
.dialog-kicker{color:#77e5e7}
.ds-dialog h2{font-family:var(--display);font-size:24px;margin:8px 0}
.ds-dialog p{font-size:13px;line-height:1.75;color:#b4c6e0}
.ds-dialog .ds-field{margin-top:14px}
.ds-dialog .ds-input,.ds-dialog .ds-select{color:#f7faff;background:#26354e}
.ds-dialog .ds-button{font-weight:900}
.howto{padding-left:22px;display:grid;gap:17px}
.howto li::marker{font-family:var(--display);color:#66e3e0}
.howto strong,.howto span{display:block}
.howto strong{font-size:15px}.howto span{font-size:12px;color:#adbfd8;margin-top:5px}
.help-note{border-top:1px solid #425672;padding-top:14px}
.flash{z-index:4;inset:0;position:fixed;pointer-events:none;opacity:0;background:#bcffff;mix-blend-mode:screen}
.flash.active{animation:flash .4s ease-out}
@keyframes flash{0%{opacity:.27}100%{opacity:0}}
.confetti{position:fixed;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.confetti b{position:absolute;top:-30px;width:9px;height:15px;background:var(--c);left:var(--x);transform:rotate(var(--r));animation:confetti-drop var(--duration) linear forwards}
@keyframes confetti-drop{to{top:110vh;transform:translateX(var(--dx)) rotate(900deg)}}
@media(max-width:1120px){
  .battle-layout{grid-template-columns:minmax(160px,.7fr) minmax(360px,1.7fr)}
  .control-panel{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:4px 15px}
  .control-overline{grid-column:1 / -1;margin:0}
  .turn-tag{justify-self:start;align-self:center}
  .control-panel h2{margin:5px 0}
  .control-panel>p:not(.privacy-note){grid-column:1}
  .countdown{grid-column:2;grid-row:2 / 5;justify-self:center;align-self:center;margin:0}
  .action-stack{grid-column:2;grid-row:5 / 7}
  .privacy-note{grid-column:1;grid-row:5 / 7;margin:auto!important}
  .restart-button{grid-column:1;grid-row:7;justify-self:start;margin:0}
}
@media(max-width:680px){
  .arena-header{height:auto;min-height:68px;padding:12px 16px}
  .brand-logo{width:34px;height:34px;font-size:19px}
  .brand strong{font-size:14px}
  .eyebrow{font-size:8px}
  .edition{display:none}
  .header-actions{gap:5px}
  .header-actions .ds-button{padding:7px 9px;min-height:37px;font-size:10px}
  .arena-main{padding:22px 12px}
  .intro{margin-bottom:19px}
  .intro h1{margin:13px 0 6px}
  .battle-layout{grid-template-columns:1fr;gap:12px}
  .teams-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .team-card{min-height:124px;padding:12px}
  .team-name{font-size:14px}
  .team-score{font-size:30px}
  .stage{min-height:360px}
  .stage-visual{min-height:243px}
  .energy-number{font-size:clamp(48px,14vw,76px)}
  .stage-topline,.stage-bottom{padding:12px}
  .stage-bottom{gap:7px}
  .stage-bottom .run-status{font-size:10px}
  .stage-side-label{font-size:8px}
  .control-panel{grid-template-columns:1fr 100px;padding:18px}
  .control-overline{margin-bottom:3px}
  .countdown{font-size:19px}
  .action-stack{grid-column:1 / -1;grid-row:auto;display:grid;grid-template-columns:1fr 1fr;margin-top:12px}
  .action-stack button{font-size:12px;line-height:1.2}
  .privacy-note{grid-column:1 / -1;grid-row:auto;padding-top:6px}
  .restart-button{grid-column:1 / -1}
  .footer{align-items:start;flex-direction:column;gap:8px;font-size:9px}
}
@media(max-width:380px){.brand{gap:8px}.brand strong{font-size:12px}.stage-topline{font-size:8px}.team-card{padding:10px}.team-name{font-size:12px}.level-bars i{width:4px}.control-panel{grid-template-columns:1fr 75px}.countdown{font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}