/* Arena FX: neon stadium behind the fight (fills the whole screen, also beside the phone
   column on desktop) and the hit-feedback layer. Only shown while a fight is on screen. */
.cbs,.cbfx{display:none}
body.cbs-on .cbs{display:block}
body.cbs-on .cbfx{display:block}
body.cbs-on #game-container{background:transparent;z-index:1}
body.cbs-on #combat-screen .perspective-floor{display:none}

.cbs{--boss:#00f0ff;--tint:var(--boss);--horizon:55vh;--ring-x:50vw;--ring-y:70vh;--ring-w:240px;--ring-h:70px;--fighter-h:160px;
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#04060f;contain:strict}
.cbs[data-tick=up]{--tint:#00ff41}.cbs[data-tick=down]{--tint:#ff3b5c}
.cbs[data-coil]{--tint:#ffcc00}
.cbs[data-coil="2"] .cbs-ring,.cbs[data-coil="3"] .cbs-ring{box-shadow:0 0 28px #00f0ffaa,inset 0 0 28px #00f0ff66}
.cbs[data-coil="4"] .cbs-ring,.cbs[data-coil="5"] .cbs-ring,.cbs[data-coil="6"] .cbs-ring,.cbs[data-coil="7"] .cbs-ring,.cbs[data-coil="8"] .cbs-ring,.cbs[data-coil="9"] .cbs-ring,.cbs[data-coil="10"] .cbs-ring{border-color:#ffcc00;box-shadow:0 0 38px #ffcc00cc,inset 0 0 36px #ffcc0088}
#cb-quick-status[data-coil]:not([data-coil=""]){color:#ffcc00!important;text-shadow:0 0 10px rgba(255,204,0,.55)}
.player-sprite.cb-primed{filter:drop-shadow(0 0 12px #00f0ff) brightness(1.12);transition:filter .15s ease}
.cbs-sky{position:absolute;inset:0;background:
  radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--boss) 22%,transparent),transparent 60%),
  radial-gradient(80% 40% at 50% var(--horizon),color-mix(in srgb,var(--tint) 24%,transparent),transparent 70%),
  linear-gradient(180deg,#070b1c 0%,#0a0f26 45%,#05070f 100%);transition:background 600ms ease}
/* Roof truss with a row of stadium lamps. */
.cbs-roof{position:absolute;left:-5%;right:-5%;top:3%;height:10%;border-bottom:2px solid #1b2440;
  background:repeating-linear-gradient(90deg,transparent 0 38px,#1b2440 38px 40px),linear-gradient(180deg,#0b1024,#070b18)}
.cbs-roof::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:12px;
  background:radial-gradient(circle,#fff 0 2px,color-mix(in srgb,var(--boss) 70%,#fff) 3px,transparent 6px) 0 50%/46px 12px repeat-x;filter:drop-shadow(0 0 6px var(--boss))}
/* Sweeping spotlight beams. */
.cbs-beams i{position:absolute;top:12%;width:28vmax;height:95vh;transform-origin:50% 0;opacity:.55;
  background:linear-gradient(180deg,color-mix(in srgb,var(--boss) 55%,#fff) 0%,color-mix(in srgb,var(--boss) 18%,transparent) 30%,transparent 75%);
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);animation:cbs-sweep 9s ease-in-out infinite alternate;will-change:transform}
.cbs-beams i:nth-child(1){left:2%;--a:-28deg;--b:-6deg}
.cbs-beams i:nth-child(2){left:22%;--a:-10deg;--b:14deg;animation-duration:11s;animation-delay:-3s;opacity:.35}
.cbs-beams i:nth-child(3){right:22%;--a:10deg;--b:-14deg;animation-duration:10s;animation-delay:-5s;opacity:.35}
.cbs-beams i:nth-child(4){right:2%;--a:28deg;--b:6deg;animation-duration:12s}
@keyframes cbs-sweep{from{transform:rotate(var(--a))}to{transform:rotate(var(--b))}}
/* Light rigs on both sides. */
.cbs-rig{position:absolute;top:16%;width:24px;height:26%;background:radial-gradient(circle,#fff 0 3px,color-mix(in srgb,var(--boss) 80%,#fff) 4px,transparent 8px) 50% 0/22px 22px;
  filter:drop-shadow(0 0 6px var(--boss));opacity:.4}
.cbs-rig.l{left:0}.cbs-rig.r{right:0}
/* Crowd: three tiers of silhouettes rising behind the fighters, with phone flashes. */
.cbs-crowd{position:absolute;left:0;right:0;bottom:calc(100% - var(--horizon));height:min(40vh,calc(var(--fighter-h) * 2.2))}
.cbs-crowd::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--tint) 16%,transparent) 70%,transparent);transition:background 500ms}
.cbs-tier{position:absolute;left:-40px;right:-40px;background-repeat:repeat-x;background-position:0 100%}
.cbs-tier.t1{bottom:42%;top:0;opacity:.5;background-repeat:repeat;background-position:0 100%;background-size:auto calc(var(--fighter-h) * .11);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 40'%3E%3Cg fill='%23151c36'%3E%3Ccircle cx='9' cy='14' r='6'/%3E%3Cpath d='M0 40c0-12 4-18 9-18s9 6 9 18z'/%3E%3Ccircle cx='26' cy='18' r='5.5'/%3E%3Cpath d='M17 40c0-10 4-15 9-15s8 5 8 15z'/%3E%3C/g%3E%3C/svg%3E")}
.cbs-tier.t2{bottom:14%;height:30%;opacity:.8;background-repeat:repeat;background-size:auto calc(var(--fighter-h) * .15);background-position:17px 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 50'%3E%3Cg fill='%230f152b'%3E%3Ccircle cx='11' cy='16' r='7.5'/%3E%3Cpath d='M0 50c0-15 5-22 11-22s11 7 11 22z'/%3E%3Ccircle cx='33' cy='21' r='7'/%3E%3Cpath d='M22 50c0-13 5-19 11-19s11 6 11 19z'/%3E%3Cpath d='M29 20l-6-14 3-1 5 13z'/%3E%3C/g%3E%3C/svg%3E")}
.cbs-tier.t3{bottom:0;height:calc(var(--fighter-h) * .2);background-size:auto 100%;background-position:5px 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 60'%3E%3Cg fill='%23080c1b'%3E%3Ccircle cx='15' cy='19' r='9.5'/%3E%3Cpath d='M0 60c0-18 7-27 15-27s15 9 15 27z'/%3E%3Ccircle cx='43' cy='24' r='9'/%3E%3Cpath d='M28 60c0-16 7-24 15-24s15 8 15 24z'/%3E%3C/g%3E%3C/svg%3E")}
.cbs-flashes{position:absolute;inset:0 0 20% 0}
.cbs-flashes i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px #fff;opacity:0;animation:cbs-flash 5s ease-in-out infinite}
@keyframes cbs-flash{0%,86%,100%{opacity:0}90%{opacity:1}93%{opacity:.2}96%{opacity:.8}}
.cbs.cheer .cbs-tier{animation:cbs-jump 420ms cubic-bezier(.3,1.6,.5,1) 2}
.cbs.cheer .cbs-tier.t2{animation-delay:60ms}.cbs.cheer .cbs-tier.t1{animation-delay:120ms}
.cbs.cheer .cbs-flashes i{animation-duration:.9s}
.cbs.gasp .cbs-crowd{filter:brightness(.7)}
@keyframes cbs-jump{50%{transform:translateY(-7px)}}
/* Floor, horizon glow and the ring under the fighters. */
.cbs-horizon{position:absolute;left:0;right:0;top:var(--horizon);height:2px;background:linear-gradient(90deg,transparent,var(--tint),transparent);box-shadow:0 0 24px 4px color-mix(in srgb,var(--tint) 55%,transparent);transition:background 400ms,box-shadow 400ms}
.cbs-floor{position:absolute;left:0;right:0;top:var(--horizon);bottom:0;
  background:radial-gradient(60% 45% at var(--ring-x) calc(var(--ring-y) - var(--horizon)),color-mix(in srgb,var(--tint) 20%,transparent),transparent 70%),linear-gradient(180deg,#0b1122 0%,#060912 60%,#030509 100%)}
.cbs-lines{position:absolute;inset:0;opacity:.5;background:repeating-linear-gradient(180deg,transparent 0 22px,#ffffff08 22px 23px);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.cbs-ring{position:absolute;left:var(--ring-x);top:var(--ring-y);width:var(--ring-w);height:var(--ring-w);transform:translate(-50%,-50%) scaleY(var(--ring-sy,.28));border-radius:50%;
  border:6px solid var(--tint);box-shadow:0 0 22px color-mix(in srgb,var(--tint) 70%,transparent),inset 0 0 26px color-mix(in srgb,var(--tint) 45%,transparent);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--tint) 16%,transparent),transparent);transition:border-color 400ms,box-shadow 400ms}
.cbs-ring i{position:absolute;inset:10%;border-radius:50%;border:5px dashed color-mix(in srgb,var(--tint) 70%,transparent);animation:cbs-spin 14s linear infinite}
.cbs-ring i+i{inset:24%;border-style:dotted;animation-direction:reverse;animation-duration:20s;opacity:.6}
.cbs-ring b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scaleY(1.6);font:900 calc(var(--ring-w) * .3)/1 'Space Mono',monospace;color:color-mix(in srgb,var(--tint) 35%,transparent)}
@keyframes cbs-spin{to{transform:rotate(360deg)}}

/* ---- Themes ---- */
.cbs-scene{position:absolute;inset:0;pointer-events:none}
/* Coin arena: a giant spinning boss coin with floating shards behind the stands. */
.cbs[data-theme=coin] .cbs-sky{background:radial-gradient(70% 45% at 50% 30%,color-mix(in srgb,var(--boss) 40%,transparent),transparent 70%),radial-gradient(80% 40% at 50% var(--horizon),color-mix(in srgb,var(--tint) 24%,transparent),transparent 70%),linear-gradient(180deg,#0d0a1c,#07081a 55%,#04050c)}
.cbs-coin{position:absolute;left:50%;top:calc(var(--horizon) * .42);width:min(52vmin,calc(var(--fighter-h) * 1.9));aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--boss) 55%,#fff),var(--boss) 45%,color-mix(in srgb,var(--boss) 55%,#000) 100%);
  box-shadow:0 0 60px color-mix(in srgb,var(--boss) 60%,transparent),inset 0 0 0 10px color-mix(in srgb,var(--boss) 70%,#000),inset 0 0 0 16px color-mix(in srgb,var(--boss) 40%,#fff);
  display:grid;place-items:center;opacity:.55;animation:cbs-coin 9s ease-in-out infinite}
.cbs-coin b{font:900 calc(min(52vmin,calc(var(--fighter-h) * 1.9)) * .5)/1 'Space Mono',monospace;color:color-mix(in srgb,var(--boss) 40%,#000);text-shadow:0 2px 0 color-mix(in srgb,var(--boss) 50%,#fff)}
@keyframes cbs-coin{0%,100%{transform:rotateY(-25deg)}50%{transform:rotateY(25deg)}}
.cbs-shard{position:absolute;width:10px;height:18px;background:linear-gradient(160deg,#fff,var(--boss));clip-path:polygon(50% 0,100% 40%,50% 100%,0 40%);opacity:.7;filter:drop-shadow(0 0 6px var(--boss));animation:cbs-float 12s ease-in-out infinite}
@keyframes cbs-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-40px) rotate(160deg)}}
/* Dubai night: stars, moon and a skyline with the Burj; the ring becomes a rooftop pad. */
.cbs[data-theme=dubai] .cbs-roof,.cbs[data-theme=dubai] .cbs-rig,.cbs[data-theme=dubai] .cbs-crowd,.cbs[data-theme=dubai] .cbs-beams i:nth-child(2),.cbs[data-theme=dubai] .cbs-beams i:nth-child(3){display:none}
.cbs[data-theme=dubai] .cbs-beams i{top:auto;bottom:calc(100% - var(--horizon));transform-origin:50% 100%;height:80vh;opacity:.18;clip-path:polygon(0 0,100% 0,54% 100%,46% 100%)}
.cbs[data-theme=dubai] .cbs-sky{background:radial-gradient(90% 50% at 50% var(--horizon),color-mix(in srgb,var(--tint) 30%,#ff7a3d 20%),transparent 70%),linear-gradient(180deg,#040720 0%,#0c0f3a 50%,#2a1640 100%)}
.cbs-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.7;animation:cbs-twinkle 4s ease-in-out infinite}
@keyframes cbs-twinkle{50%{opacity:.15}}
.cbs-moon{position:absolute;right:14%;top:12%;width:min(12vmin,70px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 60% 40%,#fff9e6,#e9dcb5 60%,#b8a97f);box-shadow:0 0 40px #fff3c455}
.cbs-city{position:absolute;left:0;right:0;bottom:calc(100% - var(--horizon));height:min(46vh,calc(var(--fighter-h) * 2))}
.cbs-skyline{width:100%;height:100%;display:block}
.cbs-towers{fill:#080b20}
.cbs-windows rect{fill:#ffd27a;opacity:.75}
.cbs-windows rect.tw{animation:cbs-twinkle 3.5s ease-in-out infinite}
.cbs-beacon{fill:#ff3b5c;animation:cbs-blink 1.2s steps(2) infinite}
@keyframes cbs-blink{50%{opacity:.1}}
.cbs[data-theme=dubai] .cbs-floor{background:radial-gradient(60% 45% at var(--ring-x) calc(var(--ring-y) - var(--horizon)),color-mix(in srgb,var(--tint) 20%,transparent),transparent 70%),linear-gradient(180deg,#141a33 0%,#0a0d1c 60%,#05060d)}
/* Trading floor: a wall of market screens that print a candle each tick, and a ticker tape. */
.cbs[data-theme=trading] .cbs-crowd,.cbs[data-theme=trading] .cbs-rig,.cbs[data-theme=trading] .cbs-beams{display:none}
.cbs[data-theme=trading] .cbs-sky{background:radial-gradient(80% 40% at 50% var(--horizon),color-mix(in srgb,var(--tint) 22%,transparent),transparent 70%),linear-gradient(180deg,#06101a,#081624 60%,#050a12)}
.cbs-screens{position:absolute;left:3%;right:3%;bottom:calc(100% - var(--horizon) + 16px);height:min(26vh,calc(var(--fighter-h) * 1.1));display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:2%}
.cbs-screen{position:relative;border:2px solid #1d3b52;border-radius:6px;background:linear-gradient(180deg,#041019,#06182a);box-shadow:0 0 30px #00f0ff14,inset 0 0 20px #00000080;padding:8% 5% 6%;overflow:hidden}
.cbs-screen small{position:absolute;left:6%;top:4%;font:700 9px 'Space Mono',monospace;letter-spacing:1px;color:#5e8aa6}
.cbs-candles{height:100%;display:flex;align-items:flex-end;gap:4%}
.cbs-candles i{flex:1;min-width:2px;border-radius:1px;background:#00ff41;box-shadow:0 0 6px #00ff4166;transition:height .4s ease}
.cbs-candles i.down{background:#ff3b5c;box-shadow:0 0 6px #ff3b5c66}
.cbs-tape{position:absolute;left:0;right:0;top:14%;height:26px;overflow:hidden;background:#02070d;border-block:1px solid #1d3b52}
.cbs-tape span{display:block;white-space:nowrap;font:700 13px/26px 'Space Mono',monospace;color:#9fe6ff;animation:cbs-tape 40s linear infinite}
@keyframes cbs-tape{to{transform:translateX(-50%)}}
.cbs[data-theme=trading] .cbs-floor{background:radial-gradient(60% 45% at var(--ring-x) calc(var(--ring-y) - var(--horizon)),color-mix(in srgb,var(--tint) 18%,transparent),transparent 70%),linear-gradient(180deg,#0e1a26 0%,#08111a 60%,#040709)}
.cbs[data-theme=trading] .cbs-lines{background:repeating-linear-gradient(90deg,transparent 0 60px,#ffffff06 60px 61px),repeating-linear-gradient(180deg,transparent 0 30px,#ffffff08 30px 31px)}

/* ---- Hit feedback layer ---- */
.cbfx{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.cbfx-flash{position:absolute;inset:0}
.cbfx-flash.hit{background:radial-gradient(circle at 50% 55%,#ffffff55,transparent 60%)}
.cbfx-flash.hurt{box-shadow:inset 0 0 90px 18px #ff2a4d99}
.cbfx-ring{position:absolute;width:calc(80px * var(--s,1));height:calc(80px * var(--s,1));border:3px solid;border-radius:50%;box-shadow:0 0 18px currentColor}
.cbfx-spark{position:absolute;width:20px;height:3px;border-radius:3px}
.cbfx-word{position:absolute;white-space:nowrap;font:italic 900 clamp(22px,6.5vw,44px)/1 'Space Mono',monospace;letter-spacing:-1px;color:#fff;
  -webkit-text-stroke:2px #03120a;paint-order:stroke fill;text-shadow:4px 4px 0 #03120a,0 0 24px currentColor}
.cbfx-word.win{color:#00ff41}.cbfx-word.big{color:#ffcc00;font-size:clamp(26px,8vw,54px)}
.cbfx-word.lose{color:#ff526f;font-size:clamp(18px,5.4vw,34px)}
.cbfx-word.combo{color:#00f0ff;font-size:clamp(16px,4.6vw,28px)}
.cbfx-word.ko{color:#ffcc00;font-size:clamp(56px,17vw,120px)}

@media (prefers-reduced-motion:reduce){
  .cbs-beams i,.cbs-flashes i,.cbs-ring i,.cbs.cheer .cbs-tier,.cbs-coin,.cbs-shard,.cbs-stars i,.cbs-windows rect,.cbs-beacon,.cbs-tape span{animation:none!important}
  .cbs-flashes i{opacity:.35}
}