/* One forged input surface. Heat, illuminated vents and sparks convey the combo. */
.battle-cockpit{
  --drive-color:#8faeb6;--drive-heat:0;
  position:absolute;z-index:5;left:50%;bottom:4%;translate:-50% 0;
  display:block;width:min(780px,82cqw);isolation:isolate;
  border:1px solid #81715885;border-top-color:#b7a183a6;border-bottom-color:#332d27;
  background:linear-gradient(180deg,#272622ed,#111416f2 16%,#080b0ded);
  box-shadow:inset 0 1px 0 #ddd1ae22,inset 0 0 0 3px #080a0b80,0 6px 18px #0008;
}
.battle-cockpit::before{
  content:"";position:absolute;z-index:2;left:3px;right:3px;bottom:2px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--drive-color) 24%,#dfc09a 55%,transparent);opacity:.3;
}
.battle-cockpit::after{
  content:"";position:absolute;inset:5px;z-index:-1;border:1px solid #ac967525;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--drive-color) 9%,transparent),transparent 70%);
}
.battle-cockpit .combo-dock{
  position:absolute;inset:0;left:0;right:0;bottom:0;width:auto;min-width:0;padding:0;z-index:2;
  display:block;border:0;background:none;box-shadow:none;pointer-events:none;
}
.battle-cockpit .combo-dock::before{display:none}
/* A quiet corner count replaces the unexplained mystic percentage. */
.battle-cockpit .combo-count{position:absolute;left:14px;top:10px;width:auto;height:20px;visibility:visible;display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.battle-cockpit .combo-count strong{font:700 20px/1 Georgia,serif;font-variant-numeric:tabular-nums;color:#e4d4b6;text-shadow:0 1px 2px #000}
.battle-cockpit .combo-count span{font:600 8px/1 var(--body);letter-spacing:.09em;color:#b6a88d}
.battle-cockpit .combo-count.bump,.battle-cockpit .combo-count.broken{animation:none}
.cockpit-overdrive .combo-count strong{color:#fff1d2}
.battle-cockpit .drive-gear,.battle-cockpit #combo-bonus,.battle-cockpit .growth-pop{display:none!important}
.battle-cockpit .combo-step{
  position:absolute;left:22px;right:118px;bottom:14px;display:flex;align-items:center;gap:12px;
  margin:0;min-height:10px;cursor:default;
}
.battle-cockpit .cockpit-heat{display:flex;align-items:center;gap:4px;flex:none;height:10px}
.cockpit-heat i{
  display:block;width:7px;height:9px;clip-path:polygon(28% 0,100% 0,72% 100%,0 100%);
  background:#393a32;box-shadow:inset 0 1px #b4ac7b25;transition:background .18s,filter .18s;
}
.battle-cockpit[data-gear="1"] .cockpit-heat i:nth-child(-n+1),
.battle-cockpit[data-gear="2"] .cockpit-heat i:nth-child(-n+2),
.battle-cockpit[data-gear="3"] .cockpit-heat i:nth-child(-n+3),
.battle-cockpit[data-gear="4"] .cockpit-heat i:nth-child(-n+4),
.battle-cockpit[data-gear="5"] .cockpit-heat i:nth-child(-n+5),
.battle-cockpit[data-gear="6"] .cockpit-heat i{
  background:linear-gradient(#fff1c5,var(--drive-color));filter:drop-shadow(0 0 3px var(--drive-color));
}
.battle-cockpit .combo-bar{flex:1;height:7px;min-height:7px;transform:skewX(-16deg);border-bottom:1px solid #a38c5e45}
.battle-cockpit .combo-bar b{
  background:linear-gradient(90deg,color-mix(in srgb,var(--drive-color) 55%,#735332),var(--drive-color),#ffe6b4);
  box-shadow:0 0 7px color-mix(in srgb,var(--drive-color) 45%,transparent);
}
.battle-cockpit .accuracy{position:absolute;right:22px;bottom:13px;margin:0;padding:0;border:0;font:10px/1.25 var(--body);letter-spacing:.02em;color:#959a90}
.battle-cockpit .accuracy b{font:400 13px/1 Georgia,serif;margin-left:5px;color:#d6cbb6}
.battle-cockpit .ward{position:absolute;left:14px;top:34px;max-width:85px;margin:0;font-size:9px;gap:4px;flex-wrap:wrap}
.battle-cockpit .ward-mystic{display:none!important}
.battle-cockpit .rune-panel{
  position:relative;left:auto;right:auto;bottom:auto;translate:none;width:auto;height:auto;min-width:0;
  z-index:1;min-height:138px;padding:13px 85px 42px;border:0;background:none;box-shadow:none;
  display:flex;flex-direction:column;justify-content:center;
}
.battle-cockpit .rune-panel::before{display:none}
.battle-cockpit .rune-panel h2{margin:0 0 2px;font-size:clamp(27px,3.4cqw,43px);line-height:1.18;letter-spacing:.07em;color:#eee7d9;text-shadow:0 2px 3px #000}
.battle-cockpit .word-guide{font-size:clamp(19px,2.05cqw,27px);line-height:1.25;min-height:1.3em;letter-spacing:.07em;color:#848d88}
.battle-cockpit .word-guide .typed{color:#91bdab;text-shadow:0 0 5px #729a7830}
.battle-cockpit .word-guide .next{color:#f3e8cd;background:linear-gradient(#4c4639,#2b2b24);border-radius:1px;box-shadow:inset 0 -2px #cdb783,0 0 8px #a88b4030}
.battle-cockpit .word-kicker{font-size:10px;line-height:1.3;letter-spacing:.1em;color:#b7a688}
.battle-cockpit .next-word{font-size:10px;line-height:1.3;margin:6px 0 0;letter-spacing:.06em;color:#8c9188}
.battle-cockpit .next-word b{color:#b8b7a9}
.battle-cockpit .input-message{font-size:10px;line-height:1.25;min-height:0;margin:4px 0 0;color:#bd9687}
.battle-cockpit .input-message:empty{display:none}
.battle-cockpit .rune-panel.chant-fired,.battle-cockpit .rune-panel.dueling{box-shadow:none}
.battle-cockpit .rune-panel.cleared{animation:cockpit-word .38s ease-out}
.battle-cockpit .rune-panel.mistake{animation:cockpit-miss .22s ease-out}
.battle-cockpit .rune-panel.mistake .next{background:#542c27;box-shadow:inset 0 -2px #c66e55}

/* Fixed particle pools: the brighter streaks leave the rim, away from the next key. */
.battle-cockpit .drive-sparks{right:0}
.battle-cockpit .drive-sparks i{width:2px;height:calc(11px + var(--drive-heat) * 9px);box-shadow:0 0 5px #ffa34bb3,0 0 12px #ff6b332e;animation-name:cockpit-drive-spark}
.battle-cockpit .chant-sparks{inset:8px 5px;overflow:visible}
.battle-cockpit .chant-sparks i{width:2px;height:calc(12px + var(--chant-heat) * 10px);box-shadow:0 0 6px #ffae54bb,0 0 13px #ff773333;animation-name:cockpit-chant-spark}
.battle-cockpit[data-gear="6"] .chant-sparks i:nth-child(3n){width:3px;background:linear-gradient(#fff9d8,#ffc57a,transparent)}
.battle-cockpit.cockpit-key-a::before{animation:cockpit-key-a .22s ease-out}
.battle-cockpit.cockpit-key-b::before{animation:cockpit-key-b .22s ease-out}
.battle-cockpit:has(.drive-shift-a)::after{animation:cockpit-shift-a .45s ease-out}
.battle-cockpit:has(.drive-shift-b)::after{animation:cockpit-shift-b .45s ease-out}
.battle-cockpit:has(.drive-broken)::before{background:#a95b49}
@keyframes cockpit-key-a{0%{opacity:1;box-shadow:0 -2px 12px color-mix(in srgb,var(--drive-color) 50%,transparent)}100%{opacity:.3;box-shadow:none}}
@keyframes cockpit-key-b{0%{opacity:1;box-shadow:0 -2px 12px color-mix(in srgb,var(--drive-color) 50%,transparent)}100%{opacity:.3;box-shadow:none}}
@keyframes cockpit-shift-a{0%{border-color:#eed5a6;box-shadow:inset 0 0 26px color-mix(in srgb,var(--drive-color) 25%,transparent)}100%{border-color:#ac967525;box-shadow:none}}
@keyframes cockpit-shift-b{0%{border-color:#eed5a6;box-shadow:inset 0 0 26px color-mix(in srgb,var(--drive-color) 25%,transparent)}100%{border-color:#ac967525;box-shadow:none}}
@keyframes cockpit-word{0%{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--chant-color) 17%,transparent),transparent)}100%{background:none}}
@keyframes cockpit-miss{30%{translate:-4px 0}70%{translate:4px 0}}
@keyframes cockpit-drive-spark{0%{opacity:0;transform:translate(0,3px) rotate(-28deg) scaleY(.45)}10%{opacity:.95}65%{opacity:.8}100%{opacity:0;transform:translate(calc(var(--spark-drift) * 1.7),calc(var(--spark-y) * 1.6)) rotate(28deg) scaleY(.2)}}
@keyframes cockpit-chant-spark{0%{opacity:0;transform:translate(0,0) rotate(-25deg) scaleY(.4)}12%{opacity:calc(.65 + var(--chant-heat) * .35)}60%{opacity:.75}100%{opacity:0;transform:translate(calc(var(--chant-dx) * 1.75),calc(var(--chant-dy) * 1.75)) rotate(42deg) scaleY(.2)}}

.cockpit-ignition{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 3px #ffab50)}
.cockpit-ignition rect{fill:none;vector-effect:non-scaling-stroke;opacity:0;stroke-dashoffset:100}
.cockpit-ignition .ignition-tail{stroke:#ffad57;stroke-width:4;stroke-dasharray:0 91 9 0}
.cockpit-ignition .ignition-head{stroke:#fff5d8;stroke-width:2.5;stroke-dasharray:1.4 98.6}
.cockpit-lap-a .cockpit-ignition rect:not(.ignition-rail){animation:cockpit-ignition-a .72s linear}
.cockpit-lap-b .cockpit-ignition rect:not(.ignition-rail){animation:cockpit-ignition-b .72s linear}
.cockpit-lap-a .combo-bar b{animation:cockpit-boost-a .78s ease-out}
.cockpit-lap-b .combo-bar b{animation:cockpit-boost-b .78s ease-out}
.ignition-ember{fill:#ffd298;opacity:0;offset-path:path('M3 3H997V197H3Z');offset-anchor:0px 0px;offset-rotate:0deg;filter:drop-shadow(0 0 3px #ff8a38)}
.ignition-ember:nth-child(3n){fill:#fff5d8}
.cockpit-lap-a .ignition-ember{animation:cockpit-ember-a .72s linear var(--ember-delay)}
.cockpit-lap-b .ignition-ember{animation:cockpit-ember-b .72s linear var(--ember-delay)}
@keyframes cockpit-ember-a{0%{offset-distance:0%;opacity:0;transform:translate(0,0) scale(1)}8%{opacity:1}80%{opacity:.7}100%{offset-distance:100%;opacity:0;transform:translate(var(--ember-dx),var(--ember-dy)) scale(.3)}}
@keyframes cockpit-ember-b{0%{offset-distance:0%;opacity:0;transform:translate(0,0) scale(1)}8%{opacity:1}80%{opacity:.7}100%{offset-distance:100%;opacity:0;transform:translate(var(--ember-dx),var(--ember-dy)) scale(.3)}}
@keyframes cockpit-ignition-a{0%{opacity:0;stroke-dashoffset:100}7%{opacity:1}88%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}
@keyframes cockpit-ignition-b{0%{opacity:0;stroke-dashoffset:100}7%{opacity:1}88%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}
@keyframes cockpit-boost-a{0%,65%{filter:none}82%{filter:brightness(1.8);box-shadow:0 0 15px #ffd17aa6}100%{filter:none}}
@keyframes cockpit-boost-b{0%,65%{filter:none}82%{filter:brightness(1.8);box-shadow:0 0 15px #ffd17aa6}100%{filter:none}}
/* A sustained white-hot state replaces the ordinary panel at the final stage. */
.battle-cockpit.cockpit-overdrive{
  border-color:#d3a56f;border-top-color:#ffe4b6;
  background:linear-gradient(180deg,#453021ed,#191916f5 17%,#100f0ded);
  box-shadow:inset 0 1px 0 #ffe3b755,inset 0 0 0 3px #130f0ccc,0 0 15px #f7a04b45,0 7px 20px #0008;
}
.battle-cockpit.cockpit-overdrive::before{height:3px;opacity:.85;background:linear-gradient(90deg,#dc652b,#ffc373 25%,#fff1d2 50%,#ffc373 75%,#dc652b);box-shadow:0 -2px 12px #ffab5766}
.battle-cockpit.cockpit-overdrive::after{border-color:#d9a16a70;background:radial-gradient(ellipse at 50% 110%,#df803020,transparent 68%);animation:cockpit-hot-frame 1.8s ease-in-out infinite}
.cockpit-overdrive .cockpit-ignition .ignition-rail{opacity:.75;stroke:#ffc580;stroke-width:1.5;stroke-dashoffset:0}
.cockpit-overdrive .cockpit-ignition .ignition-head{stroke:#fff9e6;stroke-width:3.5}
.cockpit-overdrive .combo-bar{background:repeating-linear-gradient(90deg,#ffc37340 0 calc(10% - 2px),transparent calc(10% - 2px) 10%)}
.cockpit-overdrive .combo-bar b{background:linear-gradient(90deg,#ec843b,#ffc373 30%,#fff2d8 55%,#ffc373);box-shadow:0 0 10px #ffb86590}
.cockpit-overdrive .cockpit-heat i{height:11px;background:linear-gradient(#fff8df,#ffd18a,#ed8b43)!important;filter:drop-shadow(0 0 4px #ffaf5b)!important}
.cockpit-overdrive .chant-sparks i{width:3px;height:26px;background:linear-gradient(#fff5d8,#ffae54,transparent);box-shadow:0 0 7px #ffcc8a,0 0 13px #ff7b424d}
.cockpit-overdrive.cockpit-max-a .cockpit-heat{animation:cockpit-max-a .65s ease-out}
.cockpit-overdrive.cockpit-max-b .cockpit-heat{animation:cockpit-max-b .65s ease-out}
@keyframes cockpit-hot-frame{0%,100%{box-shadow:inset 0 -4px 16px #ffa75214,0 0 5px #ffb76b30}50%{box-shadow:inset 0 -4px 22px #ffa7522b,0 0 9px #ffb76b50}}
@keyframes cockpit-max-a{0%{filter:brightness(2.2);transform:scaleY(1.5)}100%{filter:none;transform:none}}
@keyframes cockpit-max-b{0%{filter:brightness(2.2);transform:scaleY(1.5)}100%{filter:none;transform:none}}
.arena.paused .battle-cockpit *,.arena.paused .battle-cockpit::before,.arena.paused .battle-cockpit::after{animation-play-state:paused}

body[data-input="flick"] .battle-cockpit{left:2%;right:2%;bottom:calc(var(--pad-height) + 14px);translate:none;width:auto}
body[data-input="flick"] .battle-cockpit .combo-dock{inset:0;left:0;right:0;bottom:0;width:auto;padding:0;display:block;border:0;background:none}
body[data-input="flick"] .battle-cockpit .combo-count{left:10px;top:8px;bottom:auto}
body[data-input="flick"] .battle-cockpit .combo-count strong{font-size:15px}
body[data-input="flick"] .battle-cockpit .combo-count span{font-size:7px}
body[data-input="flick"] .battle-cockpit .ward{display:none}
body[data-input="flick"] .battle-cockpit .combo-step{display:flex;left:11px;right:98px;bottom:13px;min-width:0;gap:8px}
body[data-input="flick"] .battle-cockpit .cockpit-heat{gap:3px}
body[data-input="flick"] .battle-cockpit .cockpit-heat i{width:5px;height:8px}
body[data-input="flick"] .battle-cockpit .combo-bar{height:6px;min-height:6px}
body[data-input="flick"] .battle-cockpit .accuracy{right:10px;bottom:12px;font-size:9px;letter-spacing:0}
body[data-input="flick"] .battle-cockpit .accuracy b{font-size:11px;margin-left:3px}
body[data-input="flick"] .battle-cockpit .rune-panel{left:auto;right:auto;bottom:auto;translate:none;width:auto;height:auto;min-height:116px;padding:24px 12px 32px;gap:0}
body[data-input="flick"] .battle-cockpit .word-guide{font-size:clamp(20px,6cqw,25px);line-height:1.2;min-height:30px;letter-spacing:.025em}
body[data-input="flick"] .battle-cockpit .next-word{margin-top:4px;font-size:10px}
body[data-input="flick"] .battle-cockpit .drive-sparks i{height:calc(8px + var(--drive-heat) * 6px)}
body[data-input="flick"] .battle-cockpit .chant-sparks i{height:calc(9px + var(--chant-heat) * 7px)}
body[data-input="flick"] .cockpit-overdrive .chant-sparks i{height:19px}
body[data-input="flick"] .arena:has(.duel:not([hidden])) .battle-cockpit .combo-dock{visibility:visible}
@media(max-height:550px) and (orientation:landscape){
  body[data-input="flick"] .battle-cockpit{left:2%;right:52%;bottom:6%}
  body[data-input="flick"] .battle-cockpit .rune-panel{min-height:114px;padding:22px 10px 32px}
  body[data-input="flick"] .battle-cockpit .word-guide{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .battle-cockpit::before,.battle-cockpit::after,.battle-cockpit .rune-panel,.battle-cockpit .combo-bar b{animation:none!important}
  .battle-cockpit .drive-sparks,.battle-cockpit .chant-sparks,.cockpit-ignition{display:none}
  .battle-cockpit .cockpit-heat{animation:none!important}
}