/* battery timer. resize with font-size; colors are the custom properties below */
.eva-battery{
  --eva-red:#ff2b1c;--eva-red-dim:#ff2b1c8c;--eva-ghost:#ff2b1c0e;--eva-screen:#070605;--eva-box:#9fb03c99;
  --eva-bezel:linear-gradient(115deg,#2f8a45,#93b83a 40%,#d8c03c 66%,#cf5a28);
  --eva-kanji:'Yu Mincho','YuMincho','Hiragino Mincho ProN','Noto Serif CJK JP','Noto Serif JP','MS Mincho',serif;
  --eva-narrow:'Arial Narrow','Helvetica Neue Condensed','Roboto Condensed',Arial,sans-serif;
  position:relative;display:inline-block;box-sizing:border-box;width:26.4em;height:20.8em;font-size:10px;line-height:1;
  color:var(--eva-red);background:var(--eva-screen);border:.3em solid transparent;border-image:var(--eva-bezel) 1;overflow:hidden;cursor:pointer;user-select:none
}
.eva-battery[data-until]{cursor:default}
.eva-battery:focus-visible{outline:2px solid var(--eva-red);outline-offset:3px}
.eva-battery *,.eva-battery *::before,.eva-battery *::after{box-sizing:border-box}
.eva-screen{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:1.1em 1.1em .9em}
/* rivets, scanlines */
.eva-screen::before{content:'';position:absolute;left:.8em;right:.8em;top:.3em;height:.3em;background:radial-gradient(circle,#ffffffb0 0 .08em,transparent .13em) 0 0/1.8em .3em repeat-x;opacity:.45}
.eva-screen::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 2px,#0000004d 2px 3px)}

/* plates */
.eva-plates{display:flex;flex-direction:column;align-items:stretch;gap:.3em;margin-left:auto}
.eva-power{display:flex;align-items:stretch;height:3.1em;border:.2em solid var(--eva-red)}
.eva-internal,.eva-external{display:flex;align-items:flex-end;gap:.5em;padding:.2em .7em .3em .5em}
.eva-power b{font:900 2.3em/1 var(--eva-kanji);letter-spacing:-.04em}
.eva-power span span{font:700 1.2em/1 var(--eva-narrow);letter-spacing:.02em;text-transform:uppercase}
.eva-stripes{flex:none;width:2.4em;margin-left:auto;border-left:.2em solid var(--eva-red);background:repeating-linear-gradient(118deg,var(--eva-red) 0 .3em,transparent .3em .7em)}
.eva-battery:not([data-state=internal]) .eva-internal,.eva-battery[data-state=internal] .eva-external{display:none}
.eva-supply{display:flex;flex-direction:column;gap:.2em;padding:.2em .5em .3em;border:.1em solid var(--eva-red-dim)}
.eva-supply b{font:700 1em/1.1 var(--eva-kanji);letter-spacing:.08em}
.eva-supply span{font:700 .65em/1.1 var(--eva-narrow);letter-spacing:.04em;text-transform:uppercase}

/* the digits */
.eva-digits{--seg:var(--eva-red);display:flex;align-items:center;justify-content:center;gap:.4em;transform:skewX(-9deg);filter:drop-shadow(0 0 .5em #ff2b1c80)}
.eva-pair{display:flex;gap:.4em}
.eva-digit{display:block;width:2.8em;height:5.7em;overflow:visible}
.eva-digit polygon{fill:var(--eva-ghost)}.eva-digit polygon.on{fill:var(--seg)}
.eva-colon{position:relative;flex:none;width:.6em;height:5.7em}
.eva-colon::before,.eva-colon::after{content:'';position:absolute;left:0;width:.6em;height:.6em;background:var(--seg)}
.eva-colon::before{top:1.7em}.eva-colon::after{top:3.8em}

/* modes */
.eva-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4em}
.eva-modes span{display:flex;flex-direction:column;gap:.2em;font:700 .7em/1 var(--eva-narrow);letter-spacing:.1em;text-transform:uppercase;color:var(--eva-red-dim)}
.eva-modes span::after{content:'';height:1.15em;border:1px solid var(--eva-box)}
.eva-battery[data-mode=stop] .eva-mode-stop,.eva-battery[data-mode=normal] .eva-mode-normal,.eva-battery[data-mode=racing] .eva-mode-racing{color:var(--eva-red)}
.eva-battery[data-mode=stop] .eva-mode-stop::after,.eva-battery[data-mode=normal] .eva-mode-normal::after,.eva-battery[data-mode=racing] .eva-mode-racing::after{background:var(--eva-red);box-shadow:0 0 .6em #ff2b1c80}
.eva-battery[data-mode=racing] .eva-stripes{animation:eva-battery-blink .6s steps(1,end) infinite}
@keyframes eva-battery-blink{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.eva-battery .eva-stripes{animation:none}}

.eva-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}