/* ---------- the service menu (secretmenu.js): the ` key ----------
   An on-screen display over everything, in the TV's own lettering (VT323), green on a dark scrim,
   as a set's factory set-up screen would be: a cursor on the chosen line, the value between arrows. */
#service {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 20;
  translate: -50% -50%;
  min-width: 560px;
  max-width: calc(100vw - 32px);
  padding: 18px 26px 16px;
  border-radius: 6px;
  background: rgb(4 10 6 / .86);
  box-shadow: 0 0 0 1px rgb(120 255 160 / .18), 0 12px 40px rgb(0 0 0 / .6);
  font: 24px/1.15 'VT323', monospace;
  letter-spacing: 1px;
  color: #8dffa8;
  text-shadow: 0 0 4px rgb(100 255 150 / .55);
}
#service[hidden] { display: none; }
.svc-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed rgb(141 255 168 / .35); font-size: 28px; color: #c8ffd4; }
.svc-head span { font-size: 20px; opacity: .6; }
.svc-line { display: grid; grid-template-columns: 22px 1fr auto; align-items: baseline; gap: 10px; width: 100%; padding: 3px 4px; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-shadow: inherit; text-align: left; cursor: pointer; }
.svc-line .cur { visibility: hidden; }
.svc-line.sel { background: rgb(141 255 168 / .1); color: #e6ffec; }
.svc-line.sel .cur { visibility: visible; animation: svc-blink 1s steps(1) infinite; }
.svc-line .val { color: #ffd27a; text-shadow: 0 0 4px rgb(255 200 100 / .5); }
@keyframes svc-blink { 50% { opacity: 0; } }
.svc-note { margin-top: 10px; font-size: 18px; color: #ffb27a; text-shadow: none; opacity: .9; }
.svc-note[hidden] { display: none; }
.svc-foot { margin-top: 12px; padding-top: 8px; border-top: 1px dashed rgb(141 255 168 / .35); font-size: 18px; opacity: .65; }