/* music deck */
.media-deck{
  --eva:var(--accent);--eva-soft:#efc999;--eva-mid:#a9804f;--eva-line:#d99a5659;--eva-red:#ff2b1c;--eva-red-dim:#ff2b1c8c;--eva-screen:#070605;--eva-ink:#140b02;--eva-paper:#f3ede2;--eva-seam:#2b2016;
  --mincho:'Noto Serif JP','Yu Mincho','YuMincho','Hiragino Mincho ProN','Noto Serif CJK JP','MS Mincho',serif;
  --narrow:'Arial Narrow','Helvetica Neue Condensed','Roboto Condensed',Arial,sans-serif;
  background:#0b0907;padding:6px;border-color:#3b2c1d;box-shadow:inset 1px 1px var(--bevel),1px 2px var(--shadow)
}
.deck-console{container-type:inline-size;border:3px solid transparent;border-image:linear-gradient(115deg,#2f8a45,#93b83a 40%,#d8c03c 66%,#cf5a28) 1;background:var(--eva-screen)}
.deck-console>*+*{border-top:1px solid var(--eva-seam)}

/* the activity-limit display, after Evangelion's: 活動限界まで boxed top-left with the english beside it,
   あと by the digits, the power plate with the supply plate hung under it, mode boxes along the bottom.
   it covers the provider widget, which plays underneath */
.deck-video{position:relative;min-width:0;height:184px;background:var(--eva-screen);overflow:hidden}.deck-video iframe,.deck-video [data-deck-mount]{width:100%;height:100%;border:0;display:block}
.deck-placeholder{position:absolute;inset:0;z-index:1;background:var(--eva-screen)}
.deck-placeholder::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 2px,#0000004d 2px 3px)}
.deck-battery{--amber:#ffa424;--amber-dim:#ffa42408;position:absolute;inset:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;gap:4px 10px;padding:11px 14px 9px 12px;color:var(--amber)}
.battery-head{grid-column:1/3;grid-row:1;display:flex;align-items:flex-start;gap:8px;margin:0}
.battery-label{padding:2px 5px;border:2px solid var(--amber);white-space:nowrap;font:900 15px/1 var(--mincho);letter-spacing:-1px}
.battery-caption{margin-top:-2px;font:700 11px/1 var(--narrow);letter-spacing:.6px;text-transform:uppercase}
.battery-ato{grid-column:1;grid-row:2;align-self:start;margin-top:6px;font:900 12px/1 var(--mincho)}

/* power plates */
.battery-plates{grid-column:3;grid-row:1/3;align-self:start;display:flex;flex-direction:column;align-items:stretch;width:124px}
.power-plate{display:flex;align-items:stretch;height:46px;border:2px solid var(--amber)}
.power-internal,.power-external{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:2px;padding:2px 4px 3px 6px;flex:1}
.power-plate b{font:900 23px/1 var(--mincho);letter-spacing:-1px}
.power-plate span span{font:700 9px/1 var(--narrow);letter-spacing:.3px;text-transform:uppercase}
.power-stripes{flex:none;width:30px;background:repeating-linear-gradient(118deg,var(--eva-red) 0 5px,transparent 5px 10px)}
.media-deck:not([data-playback=playing]) .power-internal,.media-deck[data-playback=playing] .power-external{display:none}
.supply-plate{margin-top:-2px;padding:3px 4px 4px;border:2px solid var(--amber);text-align:center}
.supply-plate b{font:900 9.5px/1.1 var(--mincho);letter-spacing:.2px}
.supply-plate span{display:block;margin-top:2px;font:700 6.5px/1 var(--narrow);letter-spacing:0;text-transform:uppercase;white-space:nowrap}

/* countdown digits, built in media-player.js. M:SS:hh, all one size */
.deck-timer{--seg:var(--amber);--digit-w:42px;--digit-h:86px;grid-column:2;grid-row:2;align-self:center;justify-self:start;display:flex;align-items:flex-end;gap:6px;filter:drop-shadow(0 0 6px #ffa42480)}
.timer-mm,.timer-ss,.timer-cc{display:flex;gap:5px}
.timer-digit{display:block;width:var(--digit-w);height:var(--digit-h);overflow:visible}
.timer-digit polygon{fill:var(--amber-dim)}.timer-digit polygon.on{fill:var(--seg)}
.timer-colon{position:relative;flex:none;align-self:stretch;width:calc(var(--digit-w)*.2)}
.timer-colon::before,.timer-colon::after{content:'';position:absolute;left:0;width:100%;aspect-ratio:1;background:var(--seg)}
.timer-colon::before{top:30%}.timer-colon::after{top:66%}

/* modes: stop = paused, slow = connecting, normal = playing, racing = last 30s.
   dark windows cut into one strip in the bezel's colors, each name in red on the strip just above its window;
   the active window shows a red bar */
.battery-modes{grid-column:1/3;grid-row:3;align-self:end;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:340px;padding:2px 6px 5px;background:linear-gradient(90deg,#5f9e43,#93b83a 45%,#d8c03c)}
.battery-modes span{display:flex;flex-direction:column;gap:2px;font:700 7.5px/1 var(--narrow);letter-spacing:.8px;text-transform:uppercase;color:#b3160c}
.battery-modes span::after{content:'';height:11px;background:var(--eva-screen)}
.media-deck:not([data-playback=playing]):not([data-playback=loading]) .mode-stop::after,.media-deck[data-playback=loading] .mode-slow::after,.media-deck[data-playback=playing]:not([data-limit]) .mode-normal::after,.media-deck[data-playback=playing][data-limit] .mode-racing::after{background:var(--eva-red);box-shadow:inset 0 0 0 3px var(--eva-screen)}
/* danger / emergency: dim until the last 30 seconds */
.battery-danger{grid-column:3;grid-row:3;align-self:end;justify-self:start;display:flex;flex-direction:column;gap:1px;padding:3px 7px 3px 5px;border:2px solid var(--amber);font:700 10px/1 var(--narrow);letter-spacing:.3px;text-transform:uppercase;opacity:.3}
.media-deck[data-limit] .battery-danger{opacity:1}
.media-deck[data-playback=playing][data-limit] .battery-danger{animation:eva-blink .6s steps(1,end) infinite}
/* the last 30 seconds turn the whole display red */
.media-deck[data-limit] .deck-battery{--amber:var(--eva-red);--amber-dim:#ff2b1c08}
.media-deck[data-limit] .deck-timer{filter:drop-shadow(0 0 6px #ff2b1c80)}
.media-deck[data-playback=playing][data-limit] .power-stripes{animation:eva-blink .6s steps(1,end) infinite}
@keyframes eva-blink{50%{opacity:.3}}

.media-deck [data-deck-mount]{pointer-events:none}

/* track index, now playing */
.deck-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.deck-lower>*+*{border-left:1px solid var(--eva-seam)}
.deck-display,.deck-now{display:flex;flex-direction:column;min-width:0;padding:10px 12px 8px;color:var(--eva)}
.deck-index{display:flex;align-items:center;gap:7px;margin:0 0 9px;font:700 7.5px/1 var(--narrow);letter-spacing:1.2px;text-transform:uppercase;color:var(--eva-mid)}
.deck-index b{font:700 12px/1 var(--mincho);letter-spacing:.12em;color:var(--eva)}
.deck-index i{flex:1;height:6px;background:repeating-linear-gradient(-45deg,var(--eva-line) 0 3px,transparent 3px 6px)}
.deck-track{width:116.3%;font:700 26px/1.05 'Times New Roman',Times,var(--mincho);letter-spacing:-.2px;text-transform:uppercase;color:var(--eva-paper);transform:scaleX(.86);transform-origin:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-artist{font:10px/1.5 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--eva-mid);margin:4px 0 8px}
.deck-readout{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:space-between;font:9px/1.5 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--eva-mid);padding-bottom:6px;border-bottom:1px solid var(--eva-line)}.deck-readout [data-deck-status]{color:var(--eva)}.deck-readout time{white-space:nowrap}
.deck-playlist{counter-reset:deck;list-style:none;margin:0 0 2px;padding:0;flex:1;max-height:150px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--eva-line) var(--eva-screen)}.deck-playlist li{margin:0;padding:0}
.deck-playlist button{display:flex;align-items:center;width:100%;text-align:left;gap:8px;border:0;background:none;color:var(--eva-mid);padding:6px 5px;min-height:30px;font:10px/1.4 var(--mono);letter-spacing:.8px;text-transform:uppercase;cursor:pointer}
.deck-playlist button::before{counter-increment:deck;content:counter(deck,decimal-leading-zero);flex:none;color:var(--eva-line)}
.deck-playlist button::after{content:'';order:-1;flex:none;width:9px;height:10px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--eva-line)}
.deck-playlist button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-playlist button:hover{background:#d99a5612;color:var(--eva)}
.deck-playlist button[aria-pressed=true]{background:#d99a5617;color:var(--eva-soft);box-shadow:inset 2px 0 var(--eva),inset 0 0 0 1px var(--eva-line)}.deck-playlist button[aria-pressed=true]::before{color:var(--eva)}.deck-playlist button[aria-pressed=true]::after{background:var(--eva)}
.deck-playlist button:focus-visible{outline:1px solid var(--eva);outline-offset:-1px}
.deck-source{align-self:flex-end;color:var(--eva-mid);font:10px var(--mono);letter-spacing:.6px;margin-top:3px;min-height:28px;display:inline-flex;align-items:center}.deck-source:hover{color:var(--eva)}

/* sync ratio */
.deck-sync{display:flex;align-items:center;gap:8px;margin:auto 0 5px;padding-top:12px;font:700 8px/1 var(--narrow);letter-spacing:1.2px;text-transform:uppercase;color:var(--eva-mid)}
.deck-sync b{font:700 12px/1 var(--mincho);letter-spacing:.08em;color:var(--eva)}
.deck-sync i{flex:1;height:7px;background:repeating-linear-gradient(-45deg,var(--eva) 0 5px,transparent 5px 10px);opacity:.4}
.deck-sync [data-deck-sync]{font:700 15px/1 var(--mono);letter-spacing:1px;color:var(--eva);text-shadow:0 0 6px #d99a5680}

/* seek and volume meters, filled to --p */
.deck-seek{display:block;margin:0}
.media-deck input[type=range]{--p:0%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;margin:0;background:none;cursor:pointer}
.media-deck input[type=range]::-webkit-slider-runnable-track{height:12px;border:1px solid var(--eva-line);background:repeating-linear-gradient(90deg,transparent 0 6px,var(--eva-screen) 6px 8px),linear-gradient(90deg,var(--eva) var(--p),#d99a5617 var(--p))}
.media-deck input[type=range]::-moz-range-track{height:12px;border:1px solid var(--eva-line);background:repeating-linear-gradient(90deg,transparent 0 6px,var(--eva-screen) 6px 8px),linear-gradient(90deg,var(--eva) var(--p),#d99a5617 var(--p))}
.media-deck input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:5px;height:20px;margin-top:-5px;border:0;background:var(--eva-paper);box-shadow:0 0 6px var(--eva)}
.media-deck input[type=range]::-moz-range-thumb{width:5px;height:20px;border:0;border-radius:0;background:var(--eva-paper);box-shadow:0 0 6px var(--eva)}
.media-deck input[type=range]:focus-visible{outline:1px solid var(--eva);outline-offset:3px}
.media-deck input:disabled{opacity:.45;cursor:default}

/* keys */
.deck-controls{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;min-width:0;padding:9px 12px 10px}
.deck-controls button{min-height:40px;padding:5px 10px;border:1px solid var(--eva-line);background:var(--eva-screen);font:700 10px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--eva);cursor:pointer}
.deck-controls button:hover{border-color:var(--eva);background:#d99a561a;color:var(--eva-soft)}
.deck-controls button:focus-visible{outline:1px solid var(--eva);outline-offset:2px}
.deck-controls button:active,.deck-mode[aria-pressed=true],.deck-volume button[aria-pressed=true]{background:var(--eva);border-color:var(--eva);color:var(--eva-ink)}
.deck-transport{display:flex;gap:3px;flex:none}
.deck-transport button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:46px;font-size:14px;letter-spacing:0}
.deck-transport button::after{content:attr(data-ja);font:700 8px/1 var(--mincho);letter-spacing:.1em;color:var(--eva-mid)}
.deck-transport button:active::after{color:inherit}
.deck-volume{display:flex;align-items:center;gap:7px;margin-left:auto;min-width:0}
.deck-volume input{width:96px;min-width:40px}
.deck-volume output{min-width:24px;font:700 12px var(--mono);color:var(--eva);text-align:right}
.deck-noscript{font:12px var(--mono);margin:8px;color:var(--eva)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.calm .media-deck .power-stripes,.calm .media-deck .battery-danger{animation:none}

}

/* narrow consoles */
@container (max-width:600px){
  .deck-timer{--digit-w:32px;--digit-h:66px}
  .deck-lower{grid-template-columns:minmax(0,1fr)}.deck-lower>*+*{border-left:0;border-top:1px solid var(--eva-seam)}
  .deck-sync{margin-top:12px;padding-top:0}
}
@container (max-width:440px){
  .deck-video{height:236px}
  .deck-battery{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:6px 10px;padding:12px}
  .battery-head{grid-column:1;grid-row:1;flex-direction:column;gap:5px}
  .battery-plates{grid-column:2;grid-row:1/3;justify-self:end;width:120px}
  .battery-ato{grid-column:1;grid-row:2;align-self:end;margin:0}
  .deck-timer{--digit-w:28px;--digit-h:58px;grid-column:1/-1;grid-row:3;justify-self:center}
  .battery-modes{grid-column:1/-1;grid-row:4;max-width:none;gap:4px}
  .battery-danger{display:none}
  .deck-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px}.deck-transport{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .deck-volume{grid-column:1/-1;margin-left:0;gap:9px}.deck-volume input{flex:1;width:auto;min-width:0}
}
/* compact, in the home page's middle column once there's 540px inside it: the display beside the track index,
   now playing in two short rows under them. the digits shrink with the column so they clear the power plates */
.portal-center>.media-deck{container:deck-slot/inline-size}
@container deck-slot (min-width:540px){
  .deck-console{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .deck-video{grid-column:1;grid-row:1;height:auto;min-height:184px}
  .deck-timer{--digit-w:clamp(20px,calc(9.3cqi - 30px),32px);--digit-h:calc(var(--digit-w) * 2.06)}
  .battery-head{grid-column:1/-1}
  .battery-plates{grid-row:2;align-self:center;width:112px}
  .deck-lower{display:contents}
  .deck-display{grid-column:2;grid-row:1;border-left:1px solid var(--eva-seam)}
  .deck-now{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,250px);column-gap:20px;align-items:end;border-left:0;border-top:1px solid var(--eva-seam);padding-bottom:10px}
  .deck-now .deck-index{grid-column:1/-1}
  .deck-track{grid-column:1;grid-row:2}
  .deck-artist{grid-column:1;grid-row:3;margin:3px 0 0}
  .deck-sync{grid-column:2;grid-row:2;margin:0;padding:0}
  .deck-readout{grid-column:2;grid-row:3;padding-bottom:0;border-bottom:0}
  .deck-seek{grid-column:1/-1;grid-row:4;margin-top:8px}
  .deck-controls{grid-column:1/-1;grid-row:3}
}

@media(max-width:760px){
  .media-deck{grid-column:1/-1;order:2}
  .deck-playlist{max-height:180px}.deck-playlist button{font-size:11px;min-height:44px;padding:8px 5px}.deck-playlist button span{white-space:normal;overflow-wrap:anywhere}.deck-source{min-height:44px;font-size:11px}
  .deck-controls button{min-height:48px}.media-deck input[type=range]{height:44px}
}