/* The arcade theme, after the minichord arcade: a marquee for the title, cabinets for the
 * parameter sections, the pixel minichord in place of the drawing, scanlines over everything.
 * Everything here is scoped to [data-theme="arcade"], so the other themes never see it.
 * Its font, Press Start 2P, is declared in fonts.css. */
[data-theme="arcade"] {
  --ink: #F1E8D2;
  --dim: #9A93B5;
  --gold: #FFD35A;
  --cyan: #7FE9FF;
  --pink: #FF5AA0;
  --felt: #8B0000;
  --night: #07060C;
  --plum: #2A1C35;
  --background-color: var(--night);
  --header-bg: transparent;
  --text-primary: var(--ink);
  --svg-filter: none;
  --track-color: #2A1C35;
  --bank-saturation: 100%;
  --bank-lightness: 62%;
  color-scheme: dark;
}

/* theme-specific pieces of the header: only the arcade shows its own */
.arcade-only { display: none; }
[data-theme="arcade"] .arcade-only { display: revert; }
[data-theme="arcade"] .default-only { display: none; }

[data-theme="arcade"] { background: var(--night); }
[data-theme="arcade"] body {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink);
  background: transparent;
}
/* the starfield, on a fixed layer of its own: as a fixed page background it made the browser
   repaint the whole page on every scroll, which with every section open was the slow part */
[data-theme="arcade"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 7%, #cfe 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 72%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 54%, #ffd 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 38%, #fff 50%, transparent 51%);
  background-size: 240px 240px, 310px 310px, 270px 270px, 350px 350px, 200px 200px;
}
/* scanlines and a vignette over the whole screen */
[data-theme="arcade"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0, 0, 0, .22) 3px, transparent 4px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .5) 100%);
}
[data-theme="arcade"] a { color: var(--gold); }

/* the title is the marquee, with bulbs chasing round it */
[data-theme="arcade"] .status-header {
  position: relative;
  justify-content: center;
  margin: 10px auto;
  padding: 30px 20px 24px;
  text-align: center;
  background: linear-gradient(180deg, #1A0E22, #0B0714);
  border: 6px solid var(--plum);
  border-radius: 0;
  box-shadow: 0 0 0 3px #000, 0 0 50px rgba(255, 90, 160, .18), inset 0 0 40px rgba(0, 0, 0, .8);
}
[data-theme="arcade"] .status-header::before,
[data-theme="arcade"] .status-header::after {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  animation: arcade-chase 1.2s steps(2) infinite;
}
[data-theme="arcade"] .status-header::before {
  background:
    radial-gradient(circle, var(--gold) 0 3px, transparent 4px) 0 0 / 22px 22px space no-repeat,
    radial-gradient(circle, var(--gold) 0 3px, transparent 4px) 0 100% / 22px 22px space no-repeat;
}
[data-theme="arcade"] .status-header::after {
  background:
    radial-gradient(circle, var(--gold) 0 3px, transparent 4px) 0 0 / 22px 22px no-repeat space,
    radial-gradient(circle, var(--gold) 0 3px, transparent 4px) 100% 0 / 22px 22px no-repeat space;
  animation-delay: .6s;
}
[data-theme="arcade"] .title-container { align-items: center; width: 100%; }
[data-theme="arcade"] h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.4rem, 5vw, 3rem);
  line-height: 1.2;
  letter-spacing: .04em;
  color: #FFE9A8;
  text-shadow: 0 0 6px #FFD35A, 0 0 18px #FF8A3D, 0 0 38px #FF5AA0, 4px 4px 0 #000;
  animation: arcade-neon 6s infinite;
}
[data-theme="arcade"] .theme-tagline[data-for="arcade"] {
  display: block;
  margin-top: 14px;
  font-size: .7rem;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan), 2px 2px 0 #000;
}
/* "insert coin" blinks until a minichord is plugged in, then player one is ready */
[data-theme="arcade"] .theme-tagline .off { color: var(--gold); text-shadow: 0 0 8px var(--gold), 2px 2px 0 #000; animation: arcade-blink 1.1s steps(2) infinite; }

[data-theme="arcade"] #notification-bubble,
[data-theme="arcade"] #notification-bubble.connected,
[data-theme="arcade"] #notification-bubble.disconnected {
  margin-top: 16px;
  padding: 8px 12px;
  border: 3px solid #000;
  border-radius: 0;
  font-size: .6rem;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #000;
}
[data-theme="arcade"] #notification-bubble.connected { background: #0B2A1A; color: #7CFF9B; outline: 2px solid #2BD96B; }
[data-theme="arcade"] #notification-bubble.disconnected { background: #2A0B16; color: var(--pink); outline: 2px solid var(--pink); }
[data-theme="arcade"] #notification-bubble #dot { color: inherit !important; }
[data-theme="arcade"] #connection-text { font-size: 1em; }

/* the control panel */
[data-theme="arcade"] #header {
  background: linear-gradient(180deg, #221733, #130D1E);
  border: 4px solid #000;
  border-radius: 0;
  box-shadow: 0 0 0 2px #3A2D4E, 8px 8px 0 #000;
  padding: 16px;
}
[data-theme="arcade"] .section h5 {
  color: var(--cyan);
  font-size: .6rem !important;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(127, 233, 255, .6);
}
[data-theme="arcade"] button,
[data-theme="arcade"] #bank_number_selection,
[data-theme="arcade"] #theme-select {
  font-family: inherit;
  font-size: .55rem;
  text-transform: uppercase;
  padding: 9px 10px;
  color: #000 !important;
  background: var(--gold) !important;
  border: 3px solid #000;
  border-radius: 0;
  box-shadow: 4px 4px 0 #000;
  transition: transform .08s, box-shadow .08s;
}
[data-theme="arcade"] button:hover,
[data-theme="arcade"] #bank_number_selection:hover,
[data-theme="arcade"] #theme-select:hover {
  transform: translate(-2px, -2px);
  box-shadow: 0 0 0 2px var(--pink), 6px 6px 0 #000;
}
[data-theme="arcade"] button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
[data-theme="arcade"] button.inactive,
[data-theme="arcade"] #bank_number_selection.inactive {
  background: var(--plum) !important;
  color: var(--dim) !important;
  box-shadow: 2px 2px 0 #000;
}

/* the pixel minichord, bobbing where the drawing was */
/* level and wide, so it is sized by its width, and centred against the control panel beside it */
[data-theme="arcade"] .svg-container {
  height: auto;
  align-self: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0 16px 0 0;
}
[data-theme="arcade"] .svg-container img.arcade-only {
  width: clamp(260px, 40vw, 600px);
  height: auto;
  max-width: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(255, 90, 160, .45)) drop-shadow(6px 6px 0 #000);
  animation: arcade-bob 2.4s steps(4) infinite;
}

[data-theme="arcade"] #instruction_zone,
[data-theme="arcade"] details > ul { font-size: .55rem; color: var(--dim); }

/* each parameter section is a cabinet */
[data-theme="arcade"] #parameters details {
  background: linear-gradient(180deg, #221733, #130D1E);
  border: 4px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 2px #3A2D4E, 8px 8px 0 #000;
  padding: 12px !important;
  margin-bottom: 12px !important;
}
[data-theme="arcade"] details summary {
  font-size: .75rem !important;
  font-weight: 400 !important;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(127, 233, 255, .6), 2px 2px 0 #000;
  text-transform: uppercase;
  line-height: 1.6;
}
[data-theme="arcade"] details summary:hover { color: var(--gold); }
[data-theme="arcade"] #parameters h3 {
  font-size: .65rem !important;
  font-weight: 400;
  color: var(--gold);
  text-transform: uppercase;
  margin: 22px 0 8px !important;
  padding-bottom: 6px;
  border-bottom: 2px dashed var(--plum);
}
[data-theme="arcade"] #parameters label {
  font-size: .5rem;
  font-weight: 400 !important;
  line-height: 1.6;
  color: var(--ink);
}

/* sliders: a plum track and a square gold knob */
[data-theme="arcade"] input[type="range"] { height: 8px; border-radius: 0; }
[data-theme="arcade"] input[type="range"]::-webkit-slider-thumb {
  width: 12px;
  height: 16px;
  border-radius: 0;
  background: var(--gold);
  border: 2px solid #000;
}
[data-theme="arcade"] input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 14px;
  border-radius: 0;
  background: var(--gold);
  border: 2px solid #000;
}
[data-theme="arcade"] input[type="number"],
[data-theme="arcade"] input[type="number"].active,
[data-theme="arcade"] input[type="number"].inactive {
  font-family: inherit;
  font-size: .5rem;
  color: var(--cyan);
  background-color: #000 !important;
  border: 2px solid #3A2D4E !important;
  border-radius: 0;
}
[data-theme="arcade"] #parameters select,
[data-theme="arcade"] #parameters select.inactive {
  font-family: inherit;
  font-size: .5rem;
  color: var(--gold);
  background-color: #000;
  border: 2px solid #3A2D4E;
  border-radius: 0;
}
[data-theme="arcade"] input[type="checkbox"] { accent-color: var(--pink); }
[data-theme="arcade"] .option-hint { color: var(--pink); font-size: .45rem; }
[data-theme="arcade"] .degree { font-size: .45rem; color: var(--dim); }

@keyframes arcade-chase { 50% { filter: brightness(.35) saturate(.6); } }
@keyframes arcade-neon { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
@keyframes arcade-blink { 50% { opacity: 0; } }
@keyframes arcade-bob { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="arcade"] *, [data-theme="arcade"] *::before, [data-theme="arcade"] *::after { animation: none !important; }
}
@media screen and (max-width: 767px) {
  [data-theme="arcade"] #parameters details {
    box-shadow: 0 0 0 2px #3A2D4E, 4px 4px 0 #000;
  }
}
/* Press Start 2P's letters fill the whole font size, with nothing above the capitals, so at the
   browser's default sizes their tops were cut off by the box. Room enough all round instead. */
[data-theme="arcade"] input[type="number"],
[data-theme="arcade"] input[type="number"].active,
[data-theme="arcade"] input[type="number"].inactive {
  box-sizing: border-box;
  height: 22px;
  line-height: 14px;
  padding: 3px 5px !important;
  width: 74px !important; /* five characters ("446.0") and the up/down arrows */
  text-align: right;
}
[data-theme="arcade"] #parameters select,
[data-theme="arcade"] #parameters select.inactive {
  box-sizing: border-box;
  height: 28px;
  line-height: 16px;
  padding: 5px 6px !important;
}
[data-theme="arcade"] #parameters select option,
[data-theme="arcade"] #bank_number_selection option,
[data-theme="arcade"] #theme-select option {
  line-height: 1.6;
  padding: 4px;
}
[data-theme="arcade"] #bank_number_selection,
[data-theme="arcade"] #theme-select {
  height: auto;
  line-height: 16px;
}
/* their open lists: the gold buttons' black ink would otherwise sit on the dark list */
[data-theme="arcade"] #bank_number_selection option,
[data-theme="arcade"] #theme-select option {
  background-color: #000;
  color: var(--gold);
}