/* The lower-left combo display behaves like a shifting rev meter. All particles are a fixed pool. */
.combo-dock{--drive-color:#8faeb6;--drive-heat:0;--drive-speed:.85s;border-top:2px solid var(--drive-color);background:linear-gradient(115deg,#07121bea,#101b22df);box-shadow:inset 3px 0 0 color-mix(in srgb,var(--drive-color) 35%,transparent);transition:border-color .2s,box-shadow .2s}
.combo-count{justify-content:flex-start}.drive-gear{margin-left:auto;display:flex;align-items:baseline;gap:.4cqw;color:var(--drive-color);font:700 max(10px,.75cqw)/1 Consolas,monospace;letter-spacing:.12em}.drive-gear b{font:800 max(22px,2.5cqw)/1 Georgia,serif;letter-spacing:0;text-shadow:0 0 12px color-mix(in srgb,var(--drive-color) 50%,transparent)}
.combo-step{position:relative;gap:.6cqw;margin:.7cqw 0 .6cqw;min-height:14px}
.combo-bar{position:relative;overflow:visible;isolation:isolate;transform:skewX(-15deg);height:max(9px,.8cqw);border-bottom:1px solid #c3e3ed33;background:repeating-linear-gradient(90deg,#c3e3ed20 0 calc(10% - 3px),transparent calc(10% - 3px) 10%)}
.combo-bar b{position:relative;background:linear-gradient(90deg,color-mix(in srgb,var(--drive-color) 35%,#10232c),var(--drive-color));box-shadow:0 0 9px color-mix(in srgb,var(--drive-color) 65%,transparent);transition:width .08s linear}
.combo-bar:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 3px),#061017 calc(10% - 3px) 10%)}
.combo-step #combo-bonus{color:var(--drive-color);font-weight:700;min-width:2.8cqw}
.drive-sparks{position:absolute;left:0;right:3.3cqw;top:50%;height:1px;pointer-events:none;z-index:2}
.drive-sparks i{position:absolute;left:var(--spark-x);top:0;width:2px;height:7px;background:linear-gradient(#fff6cd,#ffb35b,transparent);box-shadow:0 0 5px #ff953acc;animation:drive-spark var(--drive-speed) linear infinite;animation-delay:var(--spark-delay);transform-origin:center bottom;will-change:transform,opacity}
.drive-sparks i[hidden]{display:none}.drive-hot{box-shadow:inset 3px 0 0 var(--drive-color),0 0 calc(3px + 9px * var(--drive-heat)) #fa77351a}.drive-overdrive .combo-bar b{background:linear-gradient(90deg,#e7753c,#ffca70,#fff7da)}
.drive-shift-a .drive-gear b{animation:drive-shift-a .42s ease-out}.drive-shift-b .drive-gear b{animation:drive-shift-b .42s ease-out}.drive-broken .drive-gear b{animation:drive-down .32s ease-out}
@keyframes drive-spark{0%{opacity:0;transform:translate(0,2px) rotate(-30deg) scaleY(.4)}12%{opacity:calc(.4 + var(--drive-heat) * .6)}80%{opacity:.65}100%{opacity:0;transform:translate(var(--spark-drift),var(--spark-y)) rotate(35deg) scaleY(.3)}}
@keyframes drive-shift-a{0%{transform:translateY(6px) scale(.7);color:#fff}35%{transform:translateY(-2px) scale(1.28);color:#fff}100%{transform:none}}
@keyframes drive-shift-b{0%{transform:translateY(6px) scale(.7);color:#fff}35%{transform:translateY(-2px) scale(1.28);color:#fff}100%{transform:none}}
@keyframes drive-down{0%{opacity:.25;transform:translateY(-3px)}100%{opacity:1;transform:none}}
body:has(#pause-dialog[open]) .drive-sparks i{animation-play-state:paused}
body[data-input="flick"] .drive-gear{gap:3px;font-size:9px;margin-left:5px}body[data-input="flick"] .drive-gear b{font-size:18px}
body[data-input="flick"] .combo-dock .combo-step{display:flex;flex:1;min-width:48px;margin:0;gap:5px}
body[data-input="flick"] .combo-step #combo-bonus{min-width:18px;font-size:10px}
body[data-input="flick"] .drive-sparks{right:23px}
@media(prefers-reduced-motion:reduce){.drive-sparks{display:none}.drive-gear b{animation:none!important}.combo-bar b{transition:none}}

/* Emit away from the perimeter, keeping the kana and the next roman letter unobstructed. */
.word-zone{isolation:isolate;--chant-heat:0;--chant-color:#d4dca7;--chant-speed:1.1s}
.word-zone>:not(.chant-sparks){position:relative;z-index:1}
.chant-sparks{position:absolute;inset:4px;z-index:0;pointer-events:none}
.chant-sparks i{position:absolute;left:var(--chant-x);top:var(--chant-y);width:2px;height:9px;background:linear-gradient(#fff9d8,var(--chant-color),transparent);box-shadow:0 0 6px #ffae5499;transform-origin:center;animation:chant-spark var(--chant-speed) linear infinite;animation-delay:var(--chant-delay);will-change:transform,opacity}
.chant-sparks i[hidden]{display:none}.word-zone.chant-fired{border-color:color-mix(in srgb,var(--chant-color) 65%,#486966);box-shadow:0 0 3cqw #000a,inset 0 0 2.5cqw #6fe0d11a,0 0 calc(2px + var(--chant-heat) * 13px) color-mix(in srgb,var(--chant-color) 20%,transparent)}
@keyframes chant-spark{0%{opacity:0;transform:translate(0,0) rotate(-25deg) scaleY(.4)}15%{opacity:calc(.45 + var(--chant-heat) * .45)}75%{opacity:.55}100%{opacity:0;transform:translate(var(--chant-dx),var(--chant-dy)) rotate(45deg) scaleY(.25)}}
body:has(#pause-dialog[open]) .chant-sparks i{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.chant-sparks{display:none}}