@font-face {
  font-family: "C64Pro";
  src: url("../assets/fonts/C64_Pro_Mono-STYLE.woff2") format("woff2");
  font-display: swap;
}

/*
 * The real 16-color Commodore 64 palette (VIC-II), "Colodore" measurement
 * by Philip "Pepto" Timmermann. Every color in the UI comes from this list.
 */
:root {
  --c64-0-black: #000000;
  --c64-1-white: #ffffff;
  --c64-2-red: #813338;
  --c64-3-cyan: #75cec8;
  --c64-4-purple: #8e3c97;
  --c64-5-green: #56ac4d;
  --c64-6-blue: #2e2c9b;
  --c64-7-yellow: #edf171;
  --c64-8-orange: #8e5029;
  --c64-9-brown: #553800;
  --c64-10-light-red: #c46c71;
  --c64-11-dark-grey: #4a4a4a;
  --c64-12-grey: #7b7b7b;
  --c64-13-light-green: #a9ff9f;
  --c64-14-light-blue: #706deb;
  --c64-15-light-grey: #b2b2b2;

  /* UI roles (names kept from the old palette so main.js keeps working) */
  --c64-blue: var(--c64-6-blue);
  --c64-cyan: var(--c64-3-cyan);
  --c64-purple: var(--c64-14-light-blue);
  --c64-green: var(--c64-13-light-green);
  --c64-orange: var(--c64-7-yellow);
  --c64-dark: var(--c64-0-black);
  --c64-shadow: var(--c64-11-dark-grey);
  --c64-border: var(--c64-14-light-blue);
  --c64-alert: var(--c64-10-light-red); /* rejected input, warnings */
  /* Header logo raster bars, top to bottom, warm to cool (match tools/brand/build-brand.mjs) */
  --logo-row-0: var(--c64-1-white);
  --logo-row-1: var(--c64-7-yellow);
  --logo-row-2: var(--c64-10-light-red);
  --logo-row-3: var(--c64-3-cyan);
  /* Visualizer palette: p0-p15 / q0-q15 classes draw with these */
  --viz-p0: var(--c64-0-black);
  --viz-p1: var(--c64-1-white);
  --viz-p2: var(--c64-2-red);
  --viz-p3: var(--c64-3-cyan);
  --viz-p4: var(--c64-4-purple);
  --viz-p5: var(--c64-5-green);
  --viz-p6: var(--c64-6-blue);
  --viz-p7: var(--c64-7-yellow);
  --viz-p8: var(--c64-8-orange);
  --viz-p9: var(--c64-9-brown);
  --viz-p10: var(--c64-10-light-red);
  --viz-p11: var(--c64-11-dark-grey);
  --viz-p12: var(--c64-12-grey);
  --viz-p13: var(--c64-13-light-green);
  --viz-p14: var(--c64-14-light-blue);
  --viz-p15: var(--c64-15-light-grey);
  --frame-width-ch: 96;
}

/* B&W Theme Override: the C64's five greys */
body.theme-bw {
  --c64-blue: var(--c64-11-dark-grey);
  --c64-cyan: var(--c64-15-light-grey);
  --c64-purple: var(--c64-12-grey);
  --c64-green: var(--c64-1-white);
  --c64-orange: var(--c64-15-light-grey);
  --c64-dark: var(--c64-0-black);
  --c64-shadow: var(--c64-11-dark-grey);
  --c64-border: var(--c64-1-white);
  --c64-alert: var(--c64-1-white);
  --viz-p2: var(--c64-11-dark-grey);
  --viz-p3: var(--c64-15-light-grey);
  --viz-p4: var(--c64-11-dark-grey);
  --viz-p5: var(--c64-12-grey);
  --viz-p6: var(--c64-11-dark-grey);
  --viz-p7: var(--c64-1-white);
  --viz-p8: var(--c64-12-grey);
  --viz-p9: var(--c64-11-dark-grey);
  --viz-p10: var(--c64-12-grey);
  --viz-p13: var(--c64-1-white);
  --viz-p14: var(--c64-12-grey);
  --logo-row-0: var(--c64-1-white);
  --logo-row-1: var(--c64-15-light-grey);
  --logo-row-2: var(--c64-15-light-grey);
  --logo-row-3: var(--c64-12-grey);
}

.drum-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.drum-label {
  color: var(--c64-cyan);
  font-size: 0.75rem;
}

.drum-grid {
  display: grid;
  grid-auto-flow: column;
  gap: 0.2rem;
  flex-grow: 1;
  justify-content: space-between;
  /* Removed padding-left as it's now handled by flex layout with .track-art */
}

body.theme-bw #console {
  background: radial-gradient(circle at center, var(--c64-11-dark-grey) 0%, var(--c64-0-black) 100%);
}

body.theme-bw .step-btn[data-level="2"] {
  color: var(--c64-1-white);
}
body.theme-bw .step-btn[data-level="1"] {
  color: var(--c64-15-light-grey);
}

* {
  box-sizing: border-box;
  font-family: "C64Pro", monospace !important;
  user-select: none;
  -webkit-user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

body {
  /* Boxes stand out of the screen like little extruded blocks: the side is
     built from 1px steps, so the corners run off at a 45 degree angle instead
     of the flat offset copy a drop shadow gives. Set on body so the colour
     follows the theme. */
  --extrude:
    1px 1px 0 var(--c64-shadow), 2px 2px 0 var(--c64-shadow), 3px 3px 0 var(--c64-shadow),
    4px 4px 0 var(--c64-shadow), 5px 5px 0 var(--c64-shadow), 6px 6px 0 var(--c64-shadow);
  --extrude-big: var(--extrude),
    7px 7px 0 var(--c64-shadow), 8px 8px 0 var(--c64-shadow), 9px 9px 0 var(--c64-shadow),
    10px 10px 0 var(--c64-shadow);
  margin: 0;
  height: 100vh;
  width: 100vw;
  /* The desk behind the monitor: the screen's light spilling onto a dark wall,
     a fainter pool below it, and a fine 2x2 dither so the dark isn't flat. */
  background:
    radial-gradient(ellipse 72% 72% at 50% 48%, color-mix(in srgb, var(--c64-border) 55%, transparent) 0%, color-mix(in srgb, var(--c64-border) 30%, transparent) 40%, color-mix(in srgb, var(--c64-blue) 22%, transparent) 62%, transparent 92%),
    radial-gradient(ellipse 55% 16% at 50% 100%, color-mix(in srgb, var(--c64-border) 22%, transparent) 0%, transparent 100%),
    conic-gradient(color-mix(in srgb, var(--c64-blue) 22%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--c64-blue) 22%, transparent) 0 75%, transparent 0) 0 0 / 4px 4px,
    var(--c64-0-black);
  color: var(--c64-cyan);
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
}

#viewport {
  width: 1180px;
  height: 780px;
  position: absolute;
  top: 50%;
  left: 50%;
  /* Transform is handled in JS for scaling, but we start centered */
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#console {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65); /* Semi-opaque to let body gradient through */
  box-shadow: var(--extrude-big), 0 0 40px rgba(117, 206, 200, 0.05);
  border: 4px solid var(--c64-border);
  padding: 0.5rem 0.75rem 0.75rem;
  position: relative;
  overflow: hidden;
}

/* CRT tube: slight barrel bulge + soft phosphor glow (SVG filter from src/crt.js).
   Off in ECO mode and in the phone layout. */
#console {
  filter: url(#crt-filter);
}

/* Glass: fine scanlines, a soft curved-tube vignette and a faint reflection.
   Sits inside the console, so the bulge bends it with everything else. */
#console::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background:
    radial-gradient(ellipse 55% 38% at 24% 14%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 45%, transparent 100%),
    linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.018) 38%, rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.018) 46%, transparent 56%),
    radial-gradient(ellipse 40% 26% at 82% 92%, rgba(255, 255, 255, 0.025) 0%, transparent 100%),
    radial-gradient(ellipse 75% 75% at 50% 50%, transparent 66%, rgba(0, 0, 0, 0.26) 100%),
    linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.13) 50%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 2px;
  z-index: 999;
  pointer-events: none;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.35);
}

/* A very soft vignette over the whole window, like a dim room around the
   monitor. Off with the rest of the CRT look in ECO and on phones. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 85% 85% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
  z-index: 2000;
}

body.low-power::after {
  display: none;
}

/* Moving Scanlines & Gradients */
#console::after {
  content: "";
  position: absolute;
  top: 0; left: -20px; right: -20px; bottom: 0;
  /* 
     Single slight rolling gradient bar
  */
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  
  background-size: 100% 50%;
  background-repeat: no-repeat;
  animation: scanline-move 10s linear infinite;
  will-change: background-position;
  pointer-events: none;
  z-index: 1000;
}

@keyframes scanline-move {
  0% { 
    background-position: 0% -100%; 
  }
  100% { 
    background-position: 0% 200%; 
  }
}

pre, code, kbd, samp {
  font-family: "C64Pro", monospace;
}

#workspace {
  display: grid;
  grid-template-columns: 420px 700px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "info drums"
    "info synth";
  /* rows: the synth stack has 0.5rem padding on top, so this plus that
     equals the 1.25rem gap between BASS, LEAD and CHRD */
  gap: 0.75rem 1.5rem;
  height: calc(100% - 1rem);
  padding: 0.5rem 0;
  padding-bottom: 0.5rem;
}

#drum-panel {
  grid-area: drums;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  position: relative;
}

#info-panel {
  grid-area: info;
  box-shadow: var(--extrude);
  display: flex;
  flex-direction: column;
  height: fit-content;
  align-self: start;
}

#synth-panel {
  grid-area: synth;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-left: 0;
}

#help-panel {
  grid-column: 2;
  grid-row: 1 / -1;
  overflow: hidden;
  z-index: 10;
  background: var(--c64-dark);
  border: 2px solid var(--c64-orange);
  box-shadow: var(--extrude);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
}

/* Help and saved songs never scroll: the text and the cards are shown a
   page at a time ([<] 1/3 [>] under them, main.js pageBox) */
#help-panel .panel-body,
#load-panel .panel-body {
  overflow: hidden;
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

#help-panel .overlay-header,
#load-panel .overlay-header {
  flex: none;
  margin-bottom: 0.5rem;
}

.help-actions {
  flex: none;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--c64-shadow);
}

.help-actions .transport-btn {
  color: var(--c64-cyan);
}

.help-pages {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  color: var(--c64-1-white);
}

.help-line {
  white-space: pre-wrap;
}

/* keys in a column, the text wraps beside them */
.help-entry {
  display: flex;
  gap: 1ch;
}

.help-keys {
  flex: 0 0 14ch;
  color: var(--c64-cyan);
  white-space: normal;
}

.help-what {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
}

/* lines and cards on other pages (the cards are flex boxes) */
.help-pages > [hidden],
#load-list > [hidden] {
  display: none;
}

/* a blank line keeps its height */
.help-line:empty::before {
  content: " ";
}

.help-credit {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--c64-cyan);
  color: var(--c64-cyan);
}

.box-pager {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
}

.box-pager.single {
  visibility: hidden;
}

.box-pager .pager-label {
  color: var(--c64-1-white);
}

.box-pager .pager-btn:disabled {
  color: var(--c64-shadow);
  cursor: default;
}

#load-panel {
  grid-column: 2;
  grid-row: 1 / -1;
  overflow: hidden;
  z-index: 10;
  background: var(--c64-dark);
  border: 2px solid var(--c64-orange);
  box-shadow: var(--extrude);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
}

#synth-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 0;
  height: 100%;
  border: none;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

.demo-btn-row {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;

  width: 100%;
}

.demo-btn-box {
  flex: 1;
  border: 1px solid var(--c64-cyan);
  color: var(--c64-cyan);
  padding: 0.2rem;
  text-align: center;
  cursor: pointer;
  font-size: 0.8rem;
}

.demo-btn-box:hover {
  background: var(--c64-cyan);
  color: var(--c64-dark);
  border-color: var(--c64-cyan);
}

.demo-btn-box:active {
  background: transparent;
  color: var(--c64-cyan);
}

.ascii-panel {
  position: relative;
  color: var(--c64-cyan);
}

.panel-body {
  background: transparent;
  padding: 0.5rem 0.5rem;
  font-size: 0.9rem;
  line-height: 1.2rem;
  min-height: 80px;
  font-family: "C64Pro";
  border: 2px solid var(--c64-shadow);
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-left: 0.5rem;
}

.single-frame {
  border-color: var(--c64-orange);
  box-shadow: var(--extrude);
}

#visualizer-shell {
  margin-top: 0.5rem;
  margin-bottom: 0px;
  padding: 0rem;
  align-self: stretch;
  display: flex;
  justify-content: center;
  box-shadow: none !important;
  position: relative;
  overflow: visible;
  flex: 0 0 auto;
  height: auto; /* Allow growth */
  width: 100%;
}

#visualizer-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  white-space: pre;
  /* PETSCII cells at the C64's own size: 8 x 8, one C64 pixel per CSS pixel */
  font-size: 8px;
  line-height: 8px;
  color: var(--c64-purple);
  width: 100%; /* Match container width */
  height: 23.5rem; /* 24 lines * 0.95 + padding */
  margin: 0 auto; /* Center horizontally */
  border: 2px solid var(--c64-purple);
  padding: 0.25rem;
  position: relative;
  box-sizing: border-box;
  background: transparent;
  overflow: hidden; /* Clip content */
}

.viz-row {
  height: 8px; /* Match line-height: cells touch, so two-color cells tile */
  min-height: 8px;
}

#drum-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 2px solid var(--c64-purple);
  padding: 0.75rem;
  box-shadow: var(--extrude);
}

#info-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* Reduced gap from 0.5rem */
  height: auto;
  flex: 0 0 auto;
  border-color: var(--c64-cyan);
  position: relative;
}

/* Keeps the space two retired rows used to take, so nothing moves. */
.info-spacer {
  height: 0.25rem;
}

#intro-field {
  color: var(--c64-1-white);
  margin-top: 0.2rem;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  container-type: inline-size;
}

/* 60 character cells (+1 for the shadow) span the panel; each cell is 2x2 logo pixels */
.petscii-logo {
  font-size: calc(100cqw / 61);
  /* rows overlap a hair so the blocks join without gaps at fractional sizes */
  line-height: 0.97;
  letter-spacing: 0;
  font-weight: normal;
  white-space: pre;
  margin: 0.15rem 0 0.1rem;
  /* drop shadow one logo pixel down-right, like the sharing card */
  text-shadow: 0.5em 0.5em 0 var(--c64-shadow);
}

.petscii-logo .logo-row {
  text-shadow: inherit;
}

/* a static shadow is cheap, so keep it in low power mode too */
body.low-power .petscii-logo,
body.low-power .petscii-logo .logo-row {
  text-shadow: 0.5em 0.5em 0 var(--c64-shadow) !important;
}

.logo-row-0 { color: var(--logo-row-0); }
.logo-row-1 { color: var(--logo-row-1); }
.logo-row-2 { color: var(--logo-row-2); }
.logo-row-3 { color: var(--logo-row-3); }

.control-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.95rem;
  line-height: 1.2rem;
}

.file-row {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  /* [SAVE] [LOAD] [REC] [CLEAR] [?] fit on one line; wrapping stays allowed
     so the row never widens the panel */
  flex-wrap: wrap;
}

.file-row .file-btn {
  padding: 0;
  white-space: nowrap;
}

.transport-row {
  justify-content: flex-start;
  padding: 0.2rem 0;
}

.title-row {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.bare-input {
  background: transparent;
  border: none;
  color: var(--c64-cyan);
  font-family: "C64Pro";
  text-transform: uppercase;
  padding: 0;
  outline: none;
  caret-color: var(--c64-green);
}

.bare-input:focus {
  background: rgba(169, 255, 159, 0.1);
}

.section-divider {
  width: 100%;
  height: 2px;
  background: var(--c64-cyan);
  margin: 0.3rem 0;
  border: none;
}

button,
[data-button] {
  background: transparent;
  color: inherit;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

button:focus-visible {
  outline: 1px dashed var(--c64-green);
}

.file-btn {
  /* flex: 1; */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.file-btn:hover {
  background: var(--c64-purple);
  color: var(--c64-dark) !important;
}

.mute-btn:hover {
  background: var(--c64-purple);
  color: var(--c64-dark) !important;
}

.transport-btn {
  --btn-color: var(--c64-green);
  color: var(--btn-color);
  font-size: 0.8rem;
  outline: none !important;
  padding: 0 0.2ch;
}

.transport-btn:focus-visible {
  outline: none !important;
}

.transport-btn:hover {
  background: var(--btn-color);
  color: var(--c64-dark);
}

.transport-btn:hover * {
  color: var(--c64-dark) !important;
}

.transport-btn,
.pattern-slot,
.pattern-copy-btn,
.song-entry {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.transport-btn:active {
  background: var(--btn-color);
  color: var(--c64-dark);
}

/* Ensure file buttons override transport-btn hover color */
.file-btn:hover {
  background: var(--c64-purple) !important;
  color: var(--c64-dark) !important;
}

.transport-btn.boxed-btn {
  --btn-color: var(--c64-purple);
  color: var(--btn-color);
  border: 1px solid var(--btn-color);
  padding: 0.1rem 0.3rem;
  margin: 0 0.1rem;
}

.transport-btn.boxed-btn.orange-btn {
  --btn-color: white;
  background: var(--btn-color);
  color: var(--c64-dark);
  border-color: var(--btn-color);
}

.transport-btn.boxed-btn.orange-btn:hover {
  background: transparent;
  color: var(--btn-color);
}

.transport-btn.boxed-btn.orange-btn:hover * {
  color: var(--btn-color) !important;
}

.transport-btn.boxed-btn.playing,
.transport-btn.boxed-btn:active,
.transport-btn.boxed-btn.orange-btn.playing,
.transport-btn.boxed-btn.orange-btn:active {
  background: var(--c64-green);
  color: var(--c64-dark);
  border-color: var(--c64-green);
}

.transport-btn.boxed-btn.orange-btn.stop-btn.playing {
  background: var(--c64-orange);
  color: var(--c64-dark);
  border-color: var(--c64-orange);
}

/* Only apply :active on non-touch devices */
@media (hover: hover) and (pointer: fine) {
  .transport-btn.boxed-btn.orange-btn.stop-btn:active {
    background: var(--c64-orange);
    color: var(--c64-dark);
    border-color: var(--c64-orange);
  }
}
.transport-btn.boxed-btn.orange-btn:active {
  color: var(--c64-green);
  border-color: var(--c64-green);
}

.transport-btn.active {
  color: var(--c64-purple);
}

/* Selected track: reverse video, like a C64 cursor. The outline pads the
   block without moving anything around it. */
.active-track-title {
  color: var(--c64-dark) !important;
  background: var(--c64-green);
  outline: 2px solid var(--c64-green);
  text-shadow: none;
}

.track-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border: none;
  padding: 0.25rem 0.75rem 0.5rem;
  margin-bottom: 0;
  box-shadow: var(--extrude);
  width: 100%;
  box-sizing: border-box;
  margin-left: 0;
}

/* Desktop: BASS, LEAD and CHRD share the height left under the drums, so
   their step lines (notes + effects) get room to breathe. */
@media (min-width: 651px) and (min-height: 501px), (min-width: 1001px) {
  #synth-body > .track-row {
    flex: 1 1 auto;
    justify-content: space-around;
  }
}

.track-box-bass {
  border: 2px solid var(--c64-orange);
  background: transparent;
  box-shadow: var(--extrude);
}

.track-box-lead {
  border: 2px solid var(--c64-orange);
  background: transparent;
  box-shadow: var(--extrude);
}

.track-box-arp {
  border: 2px solid var(--c64-orange);
  background: transparent;
  box-shadow: var(--extrude);
}

.active-section {
  border-color: var(--c64-green) !important;
  box-shadow: var(--extrude), 0 0 8px rgba(169, 255, 159, 0.2);
}

.active-section .track-art {
  color: var(--c64-green) !important;
  opacity: 1;
}

#synth-controls.active-section .synth-header {
  color: var(--c64-green) !important;
}

.track-body-row {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
}

.track-art {
  font-size: 0.7rem;
  line-height: 0.8rem;
  color: var(--c64-orange);
  white-space: pre;
  overflow: hidden;
  margin-bottom: 0;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.track-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--c64-orange);
  font-size: 0.8rem;
  padding: 0.25rem 0;
}

.track-label {
  font-weight: bold;
  width: 6ch;
  display: inline-block;
}

.track-control-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.track-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  /* a plain 2px line (same overall height as before, so nothing moves) */
  height: 6px;
  background: linear-gradient(var(--c64-cyan), var(--c64-cyan)) center / 100% 2px no-repeat;
  outline: none;
  border: none;
}

.track-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 12px;
  background: var(--c64-orange);
  cursor: pointer;
}

.step-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(2rem, 1fr);
  gap: 0.2rem;
  flex-grow: 1;
  justify-content: space-between;
  /* Removed padding-left as it's now handled by flex layout with .track-art */
}

/* === step columns ===
   Drums, BASS, LEAD and CHRD share one left gutter (drum names / track art)
   and one set of columns, so step N sits at the same x in every lane and the
   playhead runs down the screen as one straight line. */
:root {
  --step-gutter: 3.75rem;
}

.drum-label,
.track-art {
  flex: 0 0 var(--step-gutter);
  width: var(--step-gutter);
}

.drum-grid,
.step-grid {
  grid-auto-flow: row;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  justify-items: center;
}

.step-btn {
  width: 2ch;
  min-height: 1.3rem;
  color: var(--c64-cyan);
  text-align: center;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.step-btn[data-level="2"] {
  color: var(--c64-purple);
}

.step-btn[data-level="1"] {
  color: var(--c64-purple);
}

/* Drum hits in variation 2-4 (the "var" knob) */
.step-btn[data-variant="2"] {
  color: var(--c64-13-light-green);
}

.step-btn[data-variant="3"] {
  color: var(--c64-7-yellow);
}

.step-btn[data-variant="4"] {
  color: var(--c64-10-light-red);
}

.step-btn[data-playhead="true"] {
  border-color: var(--c64-orange);
}

.step-btn:focus,
.step-btn:focus-visible {
  outline: none !important;
}

.focused-step {
  border: 2px dashed var(--c64-green) !important;
  z-index: 10;
  position: relative;
}

.btn-note {
  font-size: 0.7rem;
  line-height: 0.8rem;
}

/* The note line plus the mark/effect line must always add up to the cell's
   min-height, so the grid never changes height when a mark or an effect
   appears or when the [FX] page is up. */
.btn-level {
  font-size: 0.65rem;
  line-height: 8px;
}

/* === step fx === */
/* BASS/LEAD step effects: a one-letter badge in the step's corner, the full
   "A0F" in place of the direction mark while the [FX] knob page is up, and
   the FX knob row (cmd x y, readout, [CLR]). */
.step-btn {
  position: relative; /* anchors the badge */
}

/* BASS/LEAD cells keep one fixed height whatever their second line holds
   (nothing, a ^/v mark, or the effect on the [FX] page), so no panel moves. */
.track-box-bass .step-btn,
.track-box-lead .step-btn {
  height: 1.3rem;
  overflow: visible;
}

.step-btn[data-fx]::after {
  content: attr(data-fx);
  position: absolute;
  top: 0;
  right: 1px;
  font-size: 0.45rem;
  line-height: 1;
  color: var(--c64-orange);
  pointer-events: none;
}

.btn-fx {
  display: none;
  font-size: 0.55rem; /* three characters inside one step's pitch */
  line-height: 8px;
  color: var(--c64-shadow);
}

#workspace[data-knob-page="fx"] .track-box-bass .btn-level,
#workspace[data-knob-page="fx"] .track-box-lead .btn-level {
  display: none;
}

#workspace[data-knob-page="fx"] .btn-fx {
  display: block;
}

#workspace[data-knob-page="fx"] .step-btn[data-fx] .btn-fx {
  color: var(--c64-orange);
}

#workspace[data-knob-page="fx"] .step-btn[data-fx]::after {
  display: none;
}

/* Desktop: the height freed by the old glyph strip goes to the effect line,
   with taller BASS/LEAD cells and larger effect text. */
@media (min-width: 651px) and (min-height: 501px), (min-width: 1001px) {
  /* the freed height goes to the effect line: taller cells, larger text */
  .track-box-bass .step-btn,
  .track-box-lead .step-btn {
    height: 1.85rem;
  }

  .btn-level,
  .btn-fx {
    line-height: 12px;
    margin-top: 2px;
  }

  .btn-fx {
    font-size: 0.65rem;
  }

  /* every BASS/LEAD note keeps its second line, empty or not, so notes with
     and without an effect sit on one line */
  .track-box-bass .btn-level,
  .track-box-lead .btn-level {
    display: block;
    min-height: 12px;
  }

  /* There is room for the whole effect, so a note with one shows "A0F" on
     its own line under it on every page (no corner badge). */
  .track-box-bass .step-btn[data-fx] .btn-level,
  .track-box-lead .step-btn[data-fx] .btn-level {
    display: none;
  }

  .track-box-bass .step-btn[data-fx] .btn-fx,
  .track-box-lead .step-btn[data-fx] .btn-fx {
    display: block;
    color: var(--c64-orange);
  }

  .step-btn[data-fx]::after {
    display: none;
  }
}

.knob-row.fx-row {
  /* sized by the panel, never widening it (the PATTERN box sits beside it) */
  width: 0;
  min-width: 100%;
  gap: 0.75rem;
}

.fx-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
  padding-top: 0.4rem;
  font-size: 0.7rem;
  line-height: 0.9rem; /* four lines (where, code, meaning, [CLR]) stay inside the 64px knob row */
  white-space: nowrap;
  overflow: hidden;
}

.fx-where {
  color: var(--c64-orange);
}

.fx-what {
  color: var(--c64-cyan);
  white-space: pre-line; /* "A02" over "VOL -2": the side column is narrower than one line of both */
}

.fx-side .fx-clear {
  padding: 0;
  font-size: 0.7rem;
}

.knob.locked button {
  border-style: dashed;
}

.knob button.fx-reject {
  border-color: var(--c64-alert) !important;
}

/* Four tabs plus the SND page's track name inside the 336px knob panel */
#synth-controls .knob-pages {
  gap: 0.4rem;
}

#synth-controls .knob-page-btn {
  padding: 0; /* reverse video on whole character cells */
}

#synth-controls .knob-page-track {
  font-size: 0.65rem;
}
/* === end step fx === */

.drum-header-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--c64-purple);
  font-weight: bold;
  margin-bottom: 0.25rem;
}

/* KIT: 1 2 3 4 [MONO] at the right end of the DRUM header */
.drum-kit-group {
  margin-left: auto;
}

.mono-btn {
  margin-left: 0.75rem;
  font-size: 0.7rem;
}

.drum-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.drum-label {
  color: var(--c64-cyan);
  font-size: 0.75rem;
}

.drum-grid {
  display: grid;
  gap: 0.2rem;
  flex-grow: 1;
  justify-content: space-between;
}

#synth-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
  border: 2px solid var(--c64-orange);
  background: transparent;
  padding: 0.25rem 0.75rem;
  box-shadow: var(--extrude);
  box-sizing: border-box;
  margin-left: 0;
}

.synth-header {
  font-weight: bold;
  color: var(--c64-orange);
  padding: 0.25rem 0;
  white-space: nowrap;
  margin-right: 0;
  width: 100%;
}

.module-title {
  font-weight: bold;
  color: var(--c64-cyan);
  padding: 0.25rem 0;
  width: 6ch;
  display: inline-block;
}

.knob-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: nowrap;
  flex: 1;
  justify-content: flex-start;
  width: 100%;
  margin-top: 0.35rem;
  padding-left: 0;
}

.knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: var(--c64-1-white);
}

.knob button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--c64-11-dark-grey); /* Default inactive color */
  position: relative;
  font-size: 1rem;
  text-align: center;
  line-height: 1.2rem;
  --knob-angle: -135deg;
  transition: border-color 0.2s, color 0.2s;
}

.knob button.active {
  border-color: var(--c64-cyan); /* Light blue when active */
  color: var(--c64-cyan);
}

.knob button::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 18px;
  top: 10px;
  left: 50%;
  background: var(--c64-purple); /* Purple indicator */
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--knob-angle));
  pointer-events: none;
  z-index: 1; /* Behind value */
  transition: background-color 0.2s;
}

.knob button.active::before {
  background: var(--c64-purple); /* Keep purple even when active */
}

.knob button::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.knob-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--c64-12-grey); /* Default inactive color */
  transition: color 0.2s;
  white-space: nowrap; /* effect knob names change per effect: never wrap */
}

.knob.active .knob-label {
  color: var(--c64-cyan); /* Light blue when active */
}

.knob-value {
  display: block;
  font-weight: bold;
  margin-top: 18px;
  color: inherit; /* Inherit from button */
  position: relative;
  z-index: 2; /* Above indicator */
}

.knob-row[hidden] {
  display: none;
}

/* [STEP] [SOUND] page tabs above the knobs */
.knob-pages {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  font-size: 0.8rem;
}

.knob-page-btn {
  color: var(--c64-11-dark-grey) !important;
  padding: 0 0.25rem;
}

.knob-page-btn:hover {
  color: var(--c64-cyan) !important;
}

.knob-page-btn.selected {
  background: var(--c64-cyan);
  color: var(--c64-dark) !important;
}

.knob-page-track {
  margin-left: auto;
  color: var(--c64-orange);
}

/* [TRACK] page: copy/paste, boxed like the PATTERN COPY buttons */
.knob-row.track-tools {
  /* sized by the panel, never widening it (the PATTERN box sits beside it) */
  width: 0;
  min-width: 100%;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.track-tools-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.track-tools-label {
  width: 6.5ch;
  color: var(--c64-cyan);
}

.track-tools-label.track-name {
  color: var(--c64-orange);
}

.track-tool-btn {
  min-width: 4ch;
  padding: 0.1rem 0.3rem;
  font: inherit;
  line-height: 1rem;
  color: var(--c64-cyan);
  background: transparent;
  border: 1px solid var(--c64-cyan);
  cursor: pointer;
  text-align: center;
}

.track-tool-btn:hover,
.track-tool-btn:focus-visible {
  background: var(--c64-cyan);
  color: var(--c64-dark);
  outline: none;
}

.track-tool-btn.ready {
  border-color: var(--c64-orange);
  color: var(--c64-orange);
  font-weight: bold;
}

.track-tools-note {
  color: var(--c64-orange);
}

/* Dimmed state for the knobs only, keeping header bright */
#synth-controls.dimmed .knob-row {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(100%);
}

#synth-controls.dimmed {
  /* Ensure container stays visible */
  opacity: 1;
  filter: none;
}

#load-list {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 1rem;
}

.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: var(--c64-orange);
  margin-bottom: 1rem;
}

.overlay-card {
  border: 1px solid var(--c64-shadow);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.overlay-card header {
  font-weight: bold;
  color: var(--c64-purple);
}

.overlay-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.overlay-card button {
  color: var(--c64-green);
}

.overlay-card button:hover {
  background: var(--c64-green);
  color: var(--c64-dark);
}

.top-row-container {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 0.25rem;
  width: 100%;
  box-sizing: border-box;
  padding-left: 0;
}

#pattern-controls {
  width: 320px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 2px solid var(--c64-cyan);
  padding: 0.25rem 0.5rem;
  background: transparent;
  box-shadow: var(--extrude);
  box-sizing: border-box;
  margin-right: 0;
}

#pattern-mobile-dock {
  display: none;
}

.pattern-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

.pattern-column {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pattern-slot {
  height: 34px;
  border: 1px solid var(--c64-purple);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--c64-purple);
  position: relative;
  background: transparent;
  padding: 4px 0;
}

.pattern-slot.editing {
  border: 2px solid var(--c64-green);
  color: var(--c64-green);
}

.pattern-slot:active {
  border-color: var(--c64-green);
  color: var(--c64-green);
}

/* The play mark sits at the left edge so the number stays centred */
.pattern-play-ind {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--c64-orange);
  opacity: 0;
  line-height: 1;
}

.pattern-slot.playing .pattern-play-ind {
  opacity: 1;
}

.pattern-num {
  line-height: 1;
}

/* COPY / PASTE / DONE under each slot: plain text, no box */
.pattern-copy-btn {
  width: 100%;
  font-size: 0.6rem;
  line-height: 1rem;
  padding: 0;
  color: var(--c64-cyan);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
}

.pattern-copy-btn:hover {
  background: var(--c64-cyan);
  color: var(--c64-dark);
}

.pattern-copy-btn.active-copy {
  background: var(--c64-cyan);
  color: var(--c64-dark);
}

/* PASTE stands out in the "values" colour in every theme */
#pattern-controls .pattern-copy-btn.paste-mode {
  color: var(--c64-orange);
}

#pattern-controls .pattern-copy-btn.paste-mode:hover {
  background: var(--c64-orange);
  color: var(--c64-dark);
}

.pattern-copy-btn.blank {
  visibility: hidden;
}

/* --- Bigger songs: pagers and the order list, drawn from character cells --- */

.petscii-btn {
  --btn-color: var(--c64-purple);
  font-size: 0.7rem;
  line-height: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

.petscii-btn.dim {
  --btn-color: var(--c64-shadow);
  cursor: default;
}

.petscii-btn.dim:hover {
  background: transparent;
  color: var(--c64-shadow);
}

.step-pager {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 0.75rem;
}

.step-pager .page-cell {
  padding: 0;
  width: 1.1ch;
  --btn-color: var(--c64-purple);
}

.step-pager .page-cell.current {
  --btn-color: var(--c64-cyan);
}

.step-pager .page-cell.playing {
  --btn-color: var(--c64-green);
}

.pattern-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* STEPS [-] 16 [+]: length of the pattern you edit */
.pattern-steps {
  display: flex;
  align-items: center;
  gap: 0.5ch;
  font-size: 0.7rem;
  font-weight: normal;
}

.pattern-steps-label {
  color: var(--c64-cyan);
}

.pattern-steps-value {
  color: var(--c64-orange);
  min-width: 3ch;
  text-align: center;
}

.pattern-steps .petscii-btn {
  padding: 0;
}

/* < [01] [02] [03] [04] > */
.pattern-slots-row {
  display: flex;
  align-items: flex-start;
  gap: 0.3ch;
}

.pattern-slots-row > .pager-arrow {
  font-size: 0.8rem;
  line-height: 34px;
  padding: 0 0.2ch;
}

.pattern-slots-row > .pattern-grid {
  flex: 1 1 auto;
  min-width: 0;
}

/* NEW: the slot after the last pattern makes an empty one */
.pattern-column.new-pattern .pattern-slot {
  border-style: dashed;
  border-color: var(--c64-purple);
  color: var(--c64-purple);
  font-size: 0.75rem;
}

.pattern-column.new-pattern .pattern-slot:hover {
  border-style: solid;
  color: var(--c64-green);
  border-color: var(--c64-green);
}

.pattern-column.unused {
  visibility: hidden;
}

/* Desktop: play mark and number side by side in the shorter slots. The box
   keeps the height it always had (the canvas is sized by its content, so a
   shorter box would move everything); the rows share it. */
@media (min-width: 651px) and (min-height: 501px), (min-width: 1001px) {
  #pattern-controls {
    height: 182.1875px;
    justify-content: space-between;
  }
  #pattern-controls .pattern-slot {
    flex-direction: row;
    justify-content: center;
    gap: 0.4ch;
    padding: 0;
  }
}

/* SONG < 01 02 01 03 >  /  [ADD 01] [REMOVE] */
.song-chain {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.1rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--c64-shadow);
}

.song-row,
.song-tools {
  display: flex;
  align-items: center;
  font-size: 0.7rem;
}

.song-label {
  color: var(--c64-cyan);
  font-weight: bold;
  width: 5ch;
  flex: none;
}

.song-row .petscii-btn,
.song-tools .petscii-btn {
  font-size: inherit;
  padding: 0;
}

.song-cells {
  display: flex;
  gap: 0.6ch;
  margin: 0 0.5ch;
}

.song-entry {
  font-size: inherit;
  line-height: 1rem;
  padding: 0 0.2ch;
  color: var(--c64-purple);
  background: transparent;
  border: none;
  cursor: pointer;
}

.song-entry:hover {
  color: var(--c64-cyan);
}

/* Reverse video, like the C64 cursor */
.song-entry.selected,
.song-entry.selected:hover {
  background: var(--c64-cyan);
  color: var(--c64-dark);
}

.song-entry.playing {
  color: var(--c64-green);
}

.song-entry.selected.playing {
  background: var(--c64-green);
  color: var(--c64-dark);
}

.song-tools {
  gap: 2ch;
  padding-left: 5ch;
}

#visualizer-controls {
  margin-top: -1.2rem;
  padding: -0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.viz-header {
  color: var(--c64-1-white);
  font-weight: bold;
  font-size: 0.9rem;
  text-align: left;
  padding-left: 0rem;
  margin-bottom: 0.1rem;
}

.viz-grid {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
}

.viz-btn {
  flex: 1;
  height: 32px;
  --btn-color: var(--c64-purple);
  border: 2px solid var(--btn-color);
  color: var(--btn-color);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
}

/* Hide short version on desktop, show full MUTE */
.mute-short {
  display: none;
}

/* Hide short DECAY and KIT on desktop */
.decay-short,
.kit-short {
  display: none;
}

/* Hide short drum title on desktop */
.drum-title-short {
  display: none;
}

.mute-btn:hover {
  background: var(--c64-purple) !important;
  color: var(--c64-dark) !important;
}

.wave-btn:not(.selected):hover {
  background: var(--c64-purple);
  color: var(--c64-dark) !important;
}

.wave-btn:not(.selected):hover * {
  color: var(--c64-dark) !important;
}

.tempo-btn:hover {
  background: var(--c64-purple);
  color: var(--c64-dark) !important;
}

.tempo-btn:active {
  background: transparent;
  color: var(--c64-purple) !important;
}

.viz-btn:not(.active):hover {
  background: var(--btn-color);
  color: var(--c64-dark) !important;
}

.viz-btn.active {
  pointer-events: none;
  border: 2px solid var(--c64-green);
  color: var(--c64-green) !important;
  box-shadow: 0 0 8px rgba(169, 255, 159, 0.2);
}

.viz-mode-1 { --btn-color: var(--c64-green); color: var(--btn-color) !important; }
.viz-mode-2 { --btn-color: var(--c64-purple); color: var(--btn-color) !important; }
.viz-mode-3 { --btn-color: var(--c64-cyan); color: var(--btn-color) !important; }
.viz-mode-4 { --btn-color: var(--c64-orange); color: var(--btn-color) !important; }
.viz-mode-5 { --btn-color: var(--c64-green); color: var(--btn-color) !important; }
.viz-mode-6 { --btn-color: var(--c64-purple); color: var(--btn-color) !important; }

/* Visualizer cells (visualizers.js): foreground (p) and background (q) palette colors */
.p0 { color: var(--viz-p0); }
.p1 { color: var(--viz-p1); }
.p2 { color: var(--viz-p2); }
.p3 { color: var(--viz-p3); }
.p4 { color: var(--viz-p4); }
.p5 { color: var(--viz-p5); }
.p6 { color: var(--viz-p6); }
.p7 { color: var(--viz-p7); }
.p8 { color: var(--viz-p8); }
.p9 { color: var(--viz-p9); }
.p10 { color: var(--viz-p10); }
.p11 { color: var(--viz-p11); }
.p12 { color: var(--viz-p12); }
.p13 { color: var(--viz-p13); }
.p14 { color: var(--viz-p14); }
.p15 { color: var(--viz-p15); }
.q0 { background: var(--viz-p0); }
.q1 { background: var(--viz-p1); }
.q2 { background: var(--viz-p2); }
.q3 { background: var(--viz-p3); }
.q4 { background: var(--viz-p4); }
.q5 { background: var(--viz-p5); }
.q6 { background: var(--viz-p6); }
.q7 { background: var(--viz-p7); }
.q8 { background: var(--viz-p8); }
.q9 { background: var(--viz-p9); }
.q10 { background: var(--viz-p10); }
.q11 { background: var(--viz-p11); }
.q12 { background: var(--viz-p12); }
.q13 { background: var(--viz-p13); }
.q14 { background: var(--viz-p14); }
.q15 { background: var(--viz-p15); }

.wave-symbol {
  display: inline-block;
  width: 2ch;
  margin: 0 0.4ch;
  text-align: center;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0;
}

/* B&W Theme Overrides for Backgrounds */
body.theme-bw .track-row,
body.theme-bw .track-box-bass,
body.theme-bw .track-box-lead,
body.theme-bw .track-box-arp,
body.theme-bw #synth-controls,
body.theme-bw #pattern-controls,
body.theme-bw .panel-body,
body.theme-bw #help-panel,
body.theme-bw #load-panel {
  background: transparent !important;
  border-color: var(--c64-1-white);
}

/* Theme Controls Fixed Position */
#theme-controls-fixed {
  /* Moved inside synth-panel, so relative positioning */
  position: relative;
  margin-top: -1.2rem; /* Reduced margin */
  top: 7px; /* centred between the panels above and the frame below */
  margin-left: 0.1rem;
  margin-right: 0.3rem;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: flex-start; /* Align left */
  z-index: 100;
  background: transparent;
  padding: 0.25rem 0;
  pointer-events: auto; /* Ensure clickable */
  width: 100%; /* Ensure full width for alignment */
}

.theme-label {
  font-size: 0.6rem;
  color: var(--c64-cyan);
  margin-right: 0.25rem;
  margin-left: auto; /* Push to right */
}

.theme-transport-btn {
  --btn-color: white;
  background: transparent;
  border: none;
  color: var(--btn-color);
  font-size: 1.4rem; /* Larger symbols */
  cursor: pointer;
  padding: 0 0.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-transport-btn:hover {
  background: transparent;
  color: var(--c64-purple); /* Purple hover */
}

.theme-transport-btn:active,
.theme-transport-btn.playing {
  background: transparent;
  color: var(--c64-green);
  border: none;
  text-shadow: 0 0 8px var(--c64-green);
  transform: scale(0.95);
}

/* While one play mode runs, the other play symbol steps back */
.theme-transport-btn.resting {
  color: var(--c64-12-grey);
}

/* Play symbols light green under the mouse (not on touch: no sticky hover) */
@media (hover: hover) and (pointer: fine) {
  #global-play-song-btn:hover,
  #global-play-pattern-btn:hover {
    color: var(--c64-green);
  }
}

.theme-transport-btn.stop-btn.playing {
  color: var(--c64-orange);
  text-shadow: 0 0 8px var(--c64-orange);
}

/* Only apply :active on non-touch devices */
@media (hover: hover) and (pointer: fine) {
  .theme-transport-btn.stop-btn:active {
    color: var(--c64-orange);
    text-shadow: 0 0 8px var(--c64-orange);
  }
}

/* Play arrow made of two C64 characters stacked: ◣ over ◤ */
.c64-play {
  display: inline-flex;
  flex-direction: column;
  font-size: 0.5em;
  line-height: 1;
  letter-spacing: 0;
}

.c64-play > span {
  display: block;
  height: 1em;
}

/* Stop is the C64 full block, a bit smaller than the arrow */
.c64-stop {
  font-size: 0.75em;
  line-height: 1;
}

/* Colour swatches: four 4px C64 colour bands, the same height as the
   play arrow so they sit on the row's centre line */
.theme-btn-graphic {
  width: 20px;
  height: 16px;
  border: none;
  cursor: pointer;
  position: relative;
  flex: none;
  background: var(--c64-0-black);
}

/* The swatch in use gets a white outlined box behind it, shifted 3px down
   and right. The part the swatch itself covers is clipped away, so only the
   outline peeking out at the right and bottom shows. */
.theme-btn-graphic::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid transparent;
  clip-path: polygon(calc(100% - 3px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 3px), calc(100% - 3px) calc(100% - 3px));
  pointer-events: none;
}

body.theme-calm #theme-calm-graphic::after,
body.theme-blue #theme-blue-graphic::after,
body.theme-warm #theme-warm-graphic::after,
body.theme-bw #theme-bw-graphic::after {
  border-color: var(--c64-1-white);
}

/* Calm: light blue frames, grey text, white notes, green for active */
#theme-calm-graphic {
  background: linear-gradient(to bottom,
    var(--c64-14-light-blue) 0%, var(--c64-14-light-blue) 25%,
    var(--c64-12-grey) 25%, var(--c64-12-grey) 50%,
    var(--c64-1-white) 50%, var(--c64-1-white) 75%,
    var(--c64-13-light-green) 75%, var(--c64-13-light-green) 100%
  );
}

/* Blue screen: light blue border, blue screen, white text, yellow values */
#theme-blue-graphic {
  background: linear-gradient(to bottom,
    var(--c64-14-light-blue) 0%, var(--c64-14-light-blue) 25%,
    var(--c64-6-blue) 25%, var(--c64-6-blue) 50%,
    var(--c64-1-white) 50%, var(--c64-1-white) 75%,
    var(--c64-7-yellow) 75%, var(--c64-7-yellow) 100%
  );
}

/* Warm: orange frames, light red, yellow notes, brown */
#theme-warm-graphic {
  background: linear-gradient(to bottom,
    var(--c64-8-orange) 0%, var(--c64-8-orange) 25%,
    var(--c64-10-light-red) 25%, var(--c64-10-light-red) 50%,
    var(--c64-7-yellow) 50%, var(--c64-7-yellow) 75%,
    var(--c64-9-brown) 75%, var(--c64-9-brown) 100%
  );
}

/* B&W: the greys */
#theme-bw-graphic {
  background: linear-gradient(to bottom,
    var(--c64-11-dark-grey) 0%, var(--c64-11-dark-grey) 25%,
    var(--c64-12-grey) 25%, var(--c64-12-grey) 50%,
    var(--c64-15-light-grey) 50%, var(--c64-15-light-grey) 75%,
    var(--c64-1-white) 75%, var(--c64-1-white) 100%
  );
}

/* Save Slot Inputs */
.slot-input {
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--c64-orange);
  color: var(--c64-orange);
  font-family: "C64Pro", monospace;
  font-size: inherit;
  width: 100%;
  margin-bottom: 0.2rem;
}

.slot-input:focus {
  outline: none;
  border-bottom: 1px solid var(--c64-green);
  color: var(--c64-green);
}

.slot-meta {
  color: var(--c64-cyan);
  font-size: 0.7rem;
}

.step-marker-end {
  border-left: 2px solid var(--c64-orange) !important;
}

/* Low Power Mode / Performance Mode */
body.low-power #console {
  filter: none !important;
}

body.low-power #console::before {
  display: none !important; /* Disable CRT overlay */
}

body.low-power * {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* --- One-screen layout: phone panes and tab strips (desktop: hidden) --- */
#knob-panel,
#mobile-tabs,
#module-tabs,
#menu-head,
.menu-btn,
#song-extras {
  display: none;
}

/* ECO + colour swatches: right end of the transport row on desktop */
#theme-extras {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-left: auto;
}

.history-btn {
  --btn-color: var(--c64-purple);
  font-size: 0.7rem;
  white-space: nowrap;
}

/* play-only edits nothing, so there is nothing to undo */
body.play-only .history-btn:not(.menu-btn) {
  visibility: hidden;
}

body.low-power #console::after {
  display: none;
}

/* a finger drag on a knob turns it instead of panning the page */
.knob button {
  touch-action: none;
}

/* Phone: one screen. Grid + transport on top, one pane, tab strip at the
   bottom. Nothing scrolls; each pane is clipped to its box. */
@media (max-width: 650px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  :root {
    font-size: 14px;
  }

  body,
  html {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    overscroll-behavior: none;
    touch-action: none;
    background: var(--c64-dark) !important;
  }

  #console {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    border: none;
    background: var(--c64-dark);
    filter: none !important;
  }

  #viewport {
    position: static;
    width: 100%;
    height: 100%;
    transform: none;
    overflow: hidden;
  }

  #console::before,
  #console::after,
  body::after {
    display: none;
  }

  #workspace {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "drums"
      "synth"
      "dock"
      "tabs";
    gap: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    margin: 0;
    box-sizing: border-box;
    align-items: stretch;
  }

  #drum-panel { grid-area: drums; }
  #synth-panel { grid-area: synth; }
  #info-panel,
  #knob-panel { grid-area: dock; }
  #mobile-tabs { grid-area: tabs; }

  #drum-panel,
  #synth-panel,
  #info-panel,
  #knob-panel {
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: hidden;
    touch-action: manipulation;
    padding: 0 0.5rem;
  }

  #drum-panel { padding-top: 0.35rem; }

  .panel-body {
    border: none;
    padding: 0.25rem;
    min-height: 0;
  }

  #info-panel {
    height: auto;
    align-self: stretch;
  }

  /* --- which pane shows --- */
  /* The info pane is the PAT pane (pattern box + visualizer) and, with
     [MENU] open, the drop-down over everything above the strip. */
  #workspace[data-tab="patt"] #drum-panel,
  #workspace[data-tab="patt"] #synth-body > :not(#theme-controls-fixed),
  #workspace[data-tab="patt"] #knob-panel,
  #workspace:not([data-tab="patt"]):not([data-menu="open"]) #info-panel,
  #workspace:not([data-menu="open"]) #info-body > :not(#pattern-mobile-dock):not(#visualizer-controls):not(#visualizer-shell),
  #workspace[data-menu="open"] #pattern-mobile-dock {
    display: none !important;
  }

  #workspace[data-tab="patt"] #synth-panel {
    padding-top: 0.35rem;
  }

  #info-panel .panel-body {
    height: 100%;
    overflow: hidden;
    gap: 0.4rem;
    padding: 0.25rem 0 0;
    box-sizing: border-box;
  }
  #info-panel .info-spacer {
    height: 0.4rem;
  }

  #help-panel,
  #load-panel {
    width: 100vw;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    grid-area: auto;
    z-index: 9999;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* --- tab strip: STEP SND TRK FX PAT --- */
  /* Drawn in character cells: a shadow line on top, the labels in one text
     row, the active one in reverse video with half-block caps (▐STEP▌) so
     the block reaches half a cell past the letters. The whole cell of each
     tab is the touch target. */
  #mobile-tabs {
    display: grid;
    grid-template-columns: 4.5fr 3.5fr 3.5fr 3fr 3.5fr;
    align-items: stretch;
    position: relative;
    height: 2.6rem;
    padding: 0 0.25rem;
    box-sizing: border-box;
    background: var(--c64-dark);
    border-top: 2px solid var(--c64-shadow);
    z-index: 10;
  }

  .mtab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 2px solid transparent;
    background: transparent;
    color: var(--c64-cyan);
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    outline: none;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mtab-line {
    display: block;
    line-height: 1;
    white-space: pre;
  }

  .mtab-cap {
    display: none;
    color: var(--c64-cyan);
  }

  /* PAT opens a whole pane: set off by a gap in the strip */
  .mtab[data-tab="patt"] {
    margin-left: 0.35rem;
  }

  /* reverse video in whole character cells, like the order cursor */
  .mtab.selected .mtab-label {
    background: var(--c64-cyan);
    color: var(--c64-dark);
  }
  .mtab.selected .mtab-cap {
    display: inline;
  }

  .mtab:focus-visible {
    border: 2px dashed var(--c64-green);
  }

  /* A play-only file has no steps: the knob tabs do nothing, so they are dim */
  body.play-only .mtab[data-tab="step"],
  body.play-only .mtab[data-tab="sound"],
  body.play-only .mtab[data-tab="track"],
  body.play-only .mtab[data-tab="fx"] {
    color: var(--c64-shadow);
    cursor: default;
  }

  /* --- grid: label left, one line per drum lane --- */
  .mute-text,
  .wave-label,
  .decay-text,
  .kit-text,
  .drum-title-full,
  .synth-header,
  .track-art {
    display: none;
  }
  .mute-short,
  .decay-short,
  .kit-short,
  .drum-title-short {
    display: inline;
  }

  #drum-body {
    gap: 0;
    /* side padding + its 2px border = the BASS/LEAD/CHRD boxes' 0.25rem + 1px */
    padding: 0.1rem calc(0.25rem - 1px) 0.2rem;
    overflow: hidden;
  }

  .drum-header-row {
    margin-bottom: 0.2rem;
  }

  /* the step pager shares the drum header */
  .step-pager {
    margin-left: 0.4rem;
  }

  /* KIT and MONO share it too: tighter digits */
  .kit-btn .wave-symbol {
    width: 1ch;
    margin: 0 0.35ch;
  }

  .mono-btn {
    margin-left: 0.4rem;
  }

  .drum-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2rem;
    margin: 0 0 0.1rem;
    line-height: 1;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .drum-label {
    flex: 0 0 var(--step-gutter);
    width: var(--step-gutter);
    font-size: 0.55rem;
    font-weight: bold;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
  }

  .drum-grid,
  .step-grid {
    grid-auto-columns: minmax(0, 1fr);
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: stretch;
    gap: 0.05rem;
    overflow: hidden;
    box-sizing: border-box;
  }
  .step-grid {
    flex: 0 0 auto;
  }

  /* one gutter for every lane (see "step columns"): the drum names' width,
     left empty on BASS/LEAD/CHRD so their steps line up under the drums */
  :root {
    --step-gutter: 2.2rem;
  }

  .drum-grid,
  .step-grid {
    grid-template-columns: repeat(16, minmax(0, 1fr));
  }

  .step-grid {
    margin-left: calc(var(--step-gutter) + 0.2rem);
    width: calc(100% - var(--step-gutter) - 0.2rem);
  }

  #synth-body {
    gap: 0.2rem;
    max-width: 100%;
    overflow: hidden;
  }

  .track-row {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .track-box-bass,
  .track-box-lead,
  .track-box-arp {
    box-shadow: none;
    border: 1px solid var(--c64-orange);
    padding: 0.1rem 0.25rem 0.2rem;
    margin-bottom: 0;
    touch-action: manipulation;
    overflow: hidden;
    max-width: 100%;
  }

  .track-header {
    padding: 0.1rem 0;
  }

  .track-body-row {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .track-label {
    font-size: 0.7rem;
    width: 54px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .track-slider {
    width: 100%;
    max-width: 180px;
    touch-action: none;
  }

  .step-btn {
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: none;
    max-height: 2rem;
    font-size: 0.55rem;
    margin: 0;
    padding: 0;
    touch-action: manipulation;
    overflow: visible;
  }

  .step-btn span {
    font-size: 0.55rem;
  }

  /* Taller rows on taller phones: easier to hit, still one screen */
  .drum-grid .step-btn,
  .track-box-bass .step-btn,
  .track-box-lead .step-btn {
    aspect-ratio: auto;
    max-height: none;
    height: clamp(20px, 4dvh, 34px);
  }

  /* FX view: a phone cell holds two characters at the note's size, so a
     step with an effect shows it on two lines ("A" over "0F") in place of
     its note; a step without one keeps its note over a single dot */
  .step-btn span.btn-fx,
  .step-btn span.btn-fx span {
    font-size: 0.55rem;
    line-height: 0.7rem;
  }

  .step-btn .btn-fx .fx-cmd {
    display: none;
  }

  #workspace[data-knob-page="fx"] .track-box-bass .step-btn[data-fx] .btn-note,
  #workspace[data-knob-page="fx"] .track-box-lead .step-btn[data-fx] .btn-note {
    display: none;
  }

  #workspace[data-knob-page="fx"] .step-btn[data-fx] .btn-fx .fx-cmd {
    display: block;
  }

  .focused-step {
    z-index: 100;
    border: 2px dashed var(--c64-green) !important;
  }

  /* --- transport row under the grid: play, stop, break, undo, redo --- */
  #synth-body .top-row-container {
    display: none;
  }

  #theme-controls-fixed {
    top: 0;
    margin: 0.2rem 0 0;
    padding: 0.15rem 0;
    gap: 0.4rem;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  #theme-controls-fixed .theme-transport-btn {
    min-height: 1.8rem;
  }

  #theme-controls-fixed .history-btn {
    font-size: 0.75rem;
    min-height: 1.8rem;
  }

  #theme-controls-fixed #global-undo-btn {
    margin-left: auto;
  }

  /* --- knob pane: the strip is the tab row, so only the readout stays --- */
  #knob-panel {
    display: flex;
    flex-direction: column;
    padding-top: 0.35rem;
  }

  #knob-dock {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 0 0 auto;
    overflow: hidden;
  }

  #knob-dock #synth-controls {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 0.25rem 0.5rem 0.4rem;
    box-shadow: none;
    overflow: hidden;
  }

  #knob-dock .knob-page-btn {
    display: none;
  }

  #knob-dock .knob-pages {
    min-height: 1rem;
    font-size: 0.75rem;
  }

  #knob-dock .knob-row {
    min-height: 64px; /* every page as tall as the knob pages: nothing below moves */
    gap: 0.8rem;
    margin-top: 0.2rem;
    justify-content: space-between;
  }

  .knob button {
    width: 52px;
    height: 52px;
  }

  .knob button::before {
    height: 14px;
    top: 8px;
  }

  .knob-value {
    margin-top: 12px;
  }

  .knob-label {
    font-size: 0.65rem;
  }

  /* --- PAT pane: the pattern box, full width --- */
  #pattern-mobile-dock {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
    flex: 0 0 auto;
  }

  #pattern-controls {
    width: 100%;
    flex: 0 0 auto;
    margin-right: 0;
    padding: 0.5rem;
    box-shadow: none;
  }

  .pattern-grid {
    gap: 0.5rem;
  }

  #pattern-controls .pattern-slot {
    height: 40px;
    font-size: 1rem;
    flex-direction: row;
    justify-content: center;
    gap: 0.5ch;
  }

  /* the pattern box is full width: bigger text and touch targets */
  .pattern-steps,
  .song-row,
  .song-tools,
  .pattern-copy-btn {
    font-size: 0.8rem;
  }
  .pattern-copy-btn {
    line-height: 1.6rem;
  }
  .pattern-slots-row > .pager-arrow {
    font-size: 1rem;
    line-height: 40px;
    padding: 0 0.5ch;
  }
  .song-cells {
    gap: 1ch;
  }
  .song-entry {
    line-height: 1.5rem;
  }
  .song-chain {
    gap: 0.6rem;
  }

  /* --- SONG pane: names, files, tempo, demos, ECO/colour, visualizer --- */
  #song-extras {
    display: flex;
    align-items: center;
    min-height: 1.6rem;
    /* even space above (divider line) and below (VISUALIZER) */
    position: relative;
    top: -0.4rem;
  }

  #song-extras #theme-extras {
    width: 100%;
    margin-left: 0;
  }

  #song-extras .theme-label {
    margin-left: auto;
  }

  #visualizer-controls {
    margin-top: 0;
  }
  #visualizer-controls .viz-header {
    margin-top: 0 !important;
    font-size: 0.8rem;
  }
  #visualizer-controls .viz-grid {
    margin-top: 0.35rem !important;
  }
  .viz-btn {
    height: 28px;
    font-size: 0.8rem;
  }
  #visualizer-shell {
    margin-top: 0.2rem;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }
  #visualizer-body {
    height: 100%;
    overflow: hidden;
  }

}

/* Narrow phones: the SONG entries sit closer */
@media (max-width: 380px) {
  .song-cells {
    gap: 0.6ch;
  }
}


/* --- Play-only: an .xm file the editor can't hold plays as it is --- */

#playonly-panel {
  grid-column: 2;
  grid-row: 1 / -1;
  display: none;
  flex-direction: column;
  min-height: 0;
  z-index: 5; /* help and the load list (z-index 10) still open on top */
}

#playonly-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  border-color: var(--c64-orange);
  box-shadow: var(--extrude);
}

body.play-only #playonly-panel {
  display: flex;
}

/* The editor stays hidden underneath; help/load can still cover the panel. */
body.play-only #drum-panel,
body.play-only #synth-panel,
body.play-only #pattern-controls {
  display: none !important;
}

.playonly-view {
  font-family: "C64Pro";
  font-size: 0.8rem;
  line-height: 1.2rem;
  color: var(--c64-cyan);
  text-transform: uppercase;
}

.po-line {
  display: flex;
  align-items: center;
  white-space: pre;
  overflow: hidden;
}

.po-item,
.po-head {
  white-space: pre-wrap;
}

.po-item {
  align-items: flex-start;
  padding-left: 1ch;
}

.po-gap {
  height: 0.6rem;
}

.po-header {
  justify-content: space-between;
  border-bottom: 2px solid var(--c64-shadow);
  margin-bottom: 0.4rem;
  padding-bottom: 0.2rem;
}

.po-title {
  color: var(--c64-0-black);
  background: var(--c64-orange);
  padding: 0 1ch;
  font-weight: bold;
}

.po-label { color: var(--c64-purple); }
.po-value { color: var(--c64-orange); }
.po-warn { color: var(--c64-orange); }
.po-alert { color: var(--c64-alert); }
.po-ok { color: var(--c64-green); }
.po-pos-text { color: var(--c64-orange); }
.po-where { color: var(--c64-cyan); }

.po-bars {
  color: var(--c64-green);
  letter-spacing: 0;
  overflow: hidden;
}

.po-exit,
.po-save {
  --btn-color: var(--c64-orange);
  font-size: 0.8rem;
}

/* Controls that would edit the song do nothing in play-only. */
.po-disabled {
  opacity: 0.35;
  cursor: default;
}

body.theme-bw #playonly-body {
  border-color: var(--c64-1-white);
}

@media (max-width: 650px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  /* phone: the keys on their own line, the text indented under them */
  .help-entry {
    flex-direction: column;
    gap: 0;
  }
  .help-keys {
    flex: none;
  }
  .help-what {
    padding-left: 2ch;
  }

  /* On phones the panel sits in the info page, under the transport. */
  #playonly-panel,
  body.play-only #playonly-panel {
    display: none;
  }

  #pattern-mobile-dock .playonly-view {
    border: 2px solid var(--c64-orange);
    box-shadow: none;
    padding: 0.4rem 0.5rem;
    margin: 0;
    font-size: 0.6rem;
    line-height: 1rem;
  }
  #pattern-mobile-dock .po-exit,
  #pattern-mobile-dock .po-save {
    font-size: 0.7rem;
  }

  /* The transport row stays above the play-only screen (PLAY, STOP). */
  body.play-only #workspace #synth-panel {
    display: flex !important;
  }
  body.play-only #workspace #synth-body > :not(#theme-controls-fixed),
  body.play-only #workspace #knob-panel {
    display: none !important;
  }
}

.po-rows {
  margin-top: 0.4rem;
  border-top: 2px solid var(--c64-shadow);
  border-bottom: 2px solid var(--c64-shadow);
  padding: 0.2rem 0;
  white-space: pre;
  overflow: hidden;
  color: var(--c64-purple);
}

.po-row-head { color: var(--c64-cyan); }
.po-more { color: var(--c64-orange); }

.po-row.current {
  background: var(--c64-purple);
  color: var(--c64-0-black);
}

/* Very narrow phones (320 wide, iPhone SE 1st gen): the DRUM header, the
   SONG row and the play-only lines just fit. */
@media (max-width: 340px) {
  .step-pager {
    margin-left: 0.2rem;
  }
  .kit-btn .wave-symbol {
    margin: 0 0.1ch;
  }
  .mono-btn {
    margin-left: 0.2rem;
  }
  .pattern-steps,
  .song-row,
  .song-tools {
    font-size: 0.68rem;
  }
  .song-cells {
    gap: 0.4ch;
  }
  /* the transport row holds UNDO, REDO and MENU too */
  #theme-controls-fixed {
    gap: 0.25rem;
  }
  #theme-controls-fixed .history-btn {
    font-size: 0.6rem;
  }
  /* play-only lines wrap instead of losing their ends */
  #pattern-mobile-dock .po-line {
    white-space: pre-wrap;
  }
  #pattern-mobile-dock .po-line button {
    white-space: pre;
  }
}

@media (max-width: 650px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  /* --- the lanes take the height the visualizer used to: the drum
     lanes stretch, BASS and LEAD rows grow with the screen --- */
  #workspace {
    grid-template-rows: minmax(0, 1fr) auto auto auto;
  }
  /* PAT: no lanes, the pattern box takes the room */
  #workspace[data-tab="patt"] {
    grid-template-rows: 0 auto minmax(0, 1fr) auto;
  }
  #drum-panel {
    display: flex;
    flex-direction: column;
  }
  #drum-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .drum-row {
    flex: 1 1 0;
    min-height: 20px;
    align-items: stretch;
  }
  .drum-label {
    align-self: center;
  }
  .drum-grid {
    align-items: stretch;
  }
  .drum-grid .step-btn {
    height: 100%;
    min-height: 20px;
    max-height: 3rem;
    align-self: center;
  }
  .track-box-bass .step-btn,
  .track-box-lead .step-btn {
    height: clamp(20px, 6dvh, 52px);
  }

  /* --- [MENU]: the song settings drop down over the work area --- */
  .menu-btn {
    display: block;
  }
  .menu-btn.selected {
    background: var(--c64-purple);
    color: var(--c64-dark);
  }
  .menu-btn.selected .bracket {
    color: var(--c64-dark);
  }

  #workspace[data-menu="open"] #info-panel {
    grid-row: 1 / -2;
    grid-column: 1 / -1;
    position: relative;
    z-index: 200; /* over the transport row (100) and the step cursor */
    background: var(--c64-dark);
    padding: 0.35rem 0.5rem 0;
  }

  #workspace[data-menu="open"] #info-body {
    border: 2px solid var(--c64-cyan);
    padding: 0 0.5rem 0.4rem;
  }

  #workspace[data-menu="open"] #menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -0.5rem;
    padding: 0.15rem 0.5rem;
    background: var(--c64-cyan);
    color: var(--c64-dark);
    font-weight: bold;
  }

  #menu-head .menu-close {
    --btn-color: var(--c64-dark);
    color: var(--c64-dark);
    font-size: 0.75rem;
  }
  #menu-head .menu-close .bracket {
    color: var(--c64-dark);
  }
}

/* --- Sideways phone: one module left, transport + knobs right --- */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  #workspace {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.7fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "mods bar"
      "module dock"
      "module tabs";
    column-gap: 0.5rem;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  /* the track boxes and the transport row take their own grid cells */
  #synth-panel,
  #synth-body,
  body.play-only #workspace #synth-panel {
    display: contents !important;
  }

  #module-tabs {
    grid-area: mods;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    height: 2.2rem;
    padding: 0 0.25rem;
    border-bottom: 2px solid var(--c64-shadow);
  }

  #drum-panel,
  #synth-body > .track-row {
    grid-area: module;
    margin: 0.35rem 0 0.35rem 0.5rem;
    min-height: 0;
  }
  #drum-panel {
    padding: 0;
  }

  /* only the chosen module shows */
  #workspace:not([data-module="drum"]) #drum-panel,
  #workspace:not([data-module="bass"]) #synth-body > .track-box-bass,
  #workspace:not([data-module="lead"]) #synth-body > .track-box-lead,
  #workspace:not([data-module="arp"]) #synth-body > .track-box-arp {
    display: none !important;
  }
  /* PAT swaps the knobs for the pattern box; the module stays */
  #workspace[data-tab="patt"][data-module="drum"] #drum-panel,
  #workspace[data-tab="patt"][data-module="bass"] #synth-body > .track-box-bass:not(#theme-controls-fixed),
  #workspace[data-tab="patt"][data-module="lead"] #synth-body > .track-box-lead:not(#theme-controls-fixed),
  #workspace[data-tab="patt"][data-module="arp"] #synth-body > .track-box-arp:not(#theme-controls-fixed) {
    display: flex !important;
  }

  #theme-controls-fixed {
    grid-area: bar;
    margin: 0;
    padding: 0.2rem 0.5rem 0.2rem 0;
    height: 2.2rem;
    box-sizing: border-box;
    border-bottom: 2px solid var(--c64-shadow);
    gap: 0.3rem;
  }
  #theme-controls-fixed .history-btn {
    font-size: 0.65rem;
  }

  /* the module side can be as narrow as a small phone: tight DRUM header
     and SONG row (as at 320 wide) */
  .step-pager {
    margin-left: 0.2rem;
  }
  .kit-btn .wave-symbol {
    margin: 0 0.1ch;
  }
  .mono-btn {
    margin-left: 0.2rem;
  }
  .pattern-steps,
  .song-row,
  .song-tools {
    font-size: 0.68rem;
  }
  .song-cells {
    gap: 0.4ch;
  }

  #workspace[data-tab="patt"] {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  /* the pattern box in the narrower right side */
  #pattern-controls .pattern-slot {
    height: 30px;
  }
  .pattern-slots-row > .pager-arrow {
    line-height: 30px;
  }

  #knob-panel,
  #info-panel {
    grid-area: dock;
    padding: 0 0.5rem 0 0;
  }

  #mobile-tabs {
    grid-area: tabs;
    padding: 0;
  }

  /* --- the module fills its side: lanes and steps stretch --- */
  :root {
    --step-gutter: 3rem;
  }
  .drum-label {
    font-size: 0.65rem;
  }

  #synth-body > .track-row {
    display: flex;
    flex-direction: column;
  }
  /* one lane in a tall box: big cells, in the middle */
  #synth-body > .track-row .track-body-row {
    flex: 1 1 0;
    min-height: 0;
    justify-content: center;
  }
  #synth-body > .track-row .step-btn {
    height: clamp(2rem, 30dvh, 6rem);
    max-height: none;
    aspect-ratio: auto;
  }
  .step-btn,
  .step-btn span,
  .step-btn span.btn-fx,
  .step-btn span.btn-fx span {
    font-size: 0.65rem;
    line-height: 0.9rem;
  }
  .drum-grid .step-btn,
  .drum-grid .step-btn span {
    font-size: 0.9rem;
  }

  /* the knob page sits in the middle of its side */
  #knob-panel {
    justify-content: center;
  }

  /* --- the menu: two columns --- */
  #workspace[data-menu="open"] #info-panel {
    grid-row: 1 / -1;
    padding: 0.35rem 0.5rem;
  }
  #workspace[data-menu="open"] #info-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "intro files"
      "extras files"
      "vizbtn files"
      "viz files";
    column-gap: 1rem;
  }
  #menu-head { grid-area: head; }
  #intro-field { grid-area: intro; }
  #transport-body { grid-area: files; }
  #song-extras { grid-area: extras; }
  #visualizer-controls { grid-area: vizbtn; }
  #visualizer-shell { grid-area: viz; }
  #workspace[data-menu="open"] .info-spacer {
    display: none !important;
  }
  /* PAT pane: the pattern box only */
  #workspace[data-tab="patt"] #visualizer-controls,
  #workspace[data-tab="patt"] #visualizer-shell {
    display: none !important;
  }
}

/* Small phones sideways (667x375, 740x360): the module side is about as
   wide as an upright phone, so the steps keep the upright sizes. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 760px) {
  :root {
    --step-gutter: 2.4rem;
  }
  .drum-label {
    font-size: 0.55rem;
  }
  .step-btn,
  .step-btn span,
  .step-btn span.btn-fx,
  .step-btn span.btn-fx span,
  .drum-grid .step-btn,
  .drum-grid .step-btn span {
    font-size: 0.55rem;
  }
}

/* Sideways: play-only lines wrap instead of losing their ends */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  /* play-only has no steps to edit: its screen takes both sides */
  body.play-only #workspace[data-tab][data-module] #drum-panel,
  body.play-only #workspace[data-tab][data-module] #synth-body > .track-row:not(#theme-controls-fixed),
  body.play-only #module-tabs {
    display: none !important;
  }
  body.play-only #workspace:not([data-menu="open"]) #info-panel {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    padding-left: 0.5rem;
  }
  #pattern-mobile-dock .po-line {
    white-space: pre-wrap;
  }
  #pattern-mobile-dock .po-line button {
    white-space: pre;
  }
}


/* ==========================================================================
 * COLOUR THEMES
 * Picked with the color: swatches (THEMES in main.js, remembered under
 * localStorage "tinybit-theme"); setTheme() puts one theme-* class on body.
 *   theme-calm    "Calm C64" (default)
 *   theme-blue    "Classic C64 blue screen"
 *   theme-warm    "Warm"
 *   theme-bw      "B&W" (its rules live further up, next to the base styles)
 * Colours only: no layout, size or border-width changes. Only the 16
 * numbered C64 colours are used. Inline colours set from main.js go
 * through the role vars, so most of the work is remapping those; the few
 * !important rules beat inline style="color: ..." on buttons. This section
 * sits at the end of the file so it wins over the base rules above.
 * ========================================================================== */

/* ---------- theme-calm: "Calm C64" (default) -------------------------------------
 * One frame family (light blue frames on a blue extrude), greys for text,
 * colour only where it means something: white notes, light green = active,
 * yellow = playhead and editable values. */
body.theme-calm {
  --c64-border: var(--c64-14-light-blue);
  --c64-cyan: var(--c64-15-light-grey);    /* labels, primary text */
  --c64-purple: var(--c64-14-light-blue);  /* clickable controls */
  --c64-green: var(--c64-13-light-green);  /* active / selected / playing */
  --c64-orange: var(--c64-7-yellow);       /* values, playhead */
  --c64-shadow: var(--c64-11-dark-grey);   /* dim text */
  --frame: var(--c64-14-light-blue);
  --extrude:
    1px 1px 0 var(--c64-6-blue), 2px 2px 0 var(--c64-6-blue), 3px 3px 0 var(--c64-6-blue),
    4px 4px 0 var(--c64-6-blue), 5px 5px 0 var(--c64-6-blue), 6px 6px 0 var(--c64-6-blue);
  --extrude-big: var(--extrude),
    7px 7px 0 var(--c64-6-blue), 8px 8px 0 var(--c64-6-blue), 9px 9px 0 var(--c64-6-blue),
    10px 10px 0 var(--c64-6-blue);
}
/* every module wears the same frame */
body.theme-calm #info-body,
body.theme-calm #drum-body,
body.theme-calm .track-box-bass,
body.theme-calm .track-box-lead,
body.theme-calm .track-box-arp,
body.theme-calm #synth-controls,
body.theme-calm #pattern-controls,
body.theme-calm #visualizer-body,
body.theme-calm #help-panel,
body.theme-calm #load-panel,
body.theme-calm #playonly-body {
  border-color: var(--frame);
}
body.theme-calm .active-section {
  border-color: var(--c64-green) !important;
}
body.theme-calm .section-divider {
  background: var(--c64-6-blue);
}
/* titles: white, one weight */
body.theme-calm .track-header,
body.theme-calm .synth-header,
body.theme-calm .module-title,
body.theme-calm .viz-header,
body.theme-calm .drum-header-row,
body.theme-calm .overlay-header {
  color: var(--c64-1-white);
}
body.theme-calm .track-art {
  color: var(--c64-12-grey);
}
body.theme-calm .decay-label {
  color: var(--c64-15-light-grey);
}
/* notes: white on, dark grey rests */
body.theme-calm .step-btn {
  color: var(--c64-11-dark-grey);
}
body.theme-calm .step-btn[data-level="2"] {
  color: var(--c64-1-white);
}
body.theme-calm .step-btn[data-level="1"] {
  color: var(--c64-15-light-grey);
}
body.theme-calm .drum-label {
  color: var(--c64-15-light-grey);
}
/* secondary text in grey */
body.theme-calm .knob-label,
body.theme-calm .theme-label {
  color: var(--c64-12-grey);
}
body.theme-calm .knob.active .knob-label {
  color: var(--c64-15-light-grey);
}
body.theme-calm .pattern-copy-btn,
body.theme-calm .pattern-slot {
  border-color: var(--c64-14-light-blue);
  color: var(--c64-14-light-blue);
}
body.theme-calm .pattern-copy-btn.active-copy {
  background: var(--c64-14-light-blue);
  color: var(--c64-0-black);
}
body.theme-calm .pattern-slot.editing {
  border-color: var(--c64-green);
  color: var(--c64-green);
}
body.theme-calm .knob-page-btn.selected,
body.theme-calm .song-entry.selected {
  background: var(--c64-15-light-grey);
}
body.theme-calm .viz-btn,
body.theme-calm [class*="viz-mode-"] {
  --btn-color: var(--c64-14-light-blue);
}
body.theme-calm .viz-btn.active {
  border-color: var(--c64-green);
}
body.theme-calm .transport-btn.boxed-btn.orange-btn:not(.playing) {
  --btn-color: var(--c64-14-light-blue);
}
@media (max-width: 650px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  body.theme-calm #mobile-tabs {
    border-top-color: var(--c64-6-blue);
  }
  body.theme-calm .mtab,
  body.theme-calm .mtab-cap {
    color: var(--c64-14-light-blue);
  }
  body.theme-calm .mtab.selected .mtab-label {
    background: var(--c64-14-light-blue);
    color: var(--c64-0-black);
  }
}
body.theme-calm .demo-btn-box {
  border-color: var(--c64-14-light-blue);
  color: var(--c64-14-light-blue);
}
body.theme-calm .demo-btn-box:hover {
  background: var(--c64-14-light-blue);
  color: var(--c64-0-black);
}

/* ---------- theme-blue: "Classic C64 blue screen" ----------------------
 * The READY. screen: blue fill, light blue frames and text, white for what
 * you wrote (notes), yellow for values and the playhead, cyan for things you
 * can press. Reverse video (white block, blue letters) marks the selection,
 * like the C64 cursor. The visualizer's black becomes the screen blue. */
body.theme-blue {
  --c64-dark: var(--c64-6-blue);           /* the screen; also reverse-video text */
  --c64-border: var(--c64-14-light-blue);
  --c64-cyan: var(--c64-14-light-blue);    /* labels, body text */
  --c64-purple: var(--c64-3-cyan);         /* clickable controls */
  --c64-green: var(--c64-1-white);         /* active / selected */
  --c64-orange: var(--c64-7-yellow);       /* values, playhead */
  --c64-shadow: var(--c64-11-dark-grey);   /* dim text */
  --frame: var(--c64-14-light-blue);
  --extrude:
    1px 1px 0 var(--c64-0-black), 2px 2px 0 var(--c64-0-black), 3px 3px 0 var(--c64-0-black),
    4px 4px 0 var(--c64-0-black), 5px 5px 0 var(--c64-0-black), 6px 6px 0 var(--c64-0-black);
  --extrude-big: var(--extrude),
    7px 7px 0 var(--c64-0-black), 8px 8px 0 var(--c64-0-black), 9px 9px 0 var(--c64-0-black),
    10px 10px 0 var(--c64-0-black);
}
body.theme-blue #console {
  background: var(--c64-6-blue);
}
body.theme-blue #info-body,
body.theme-blue #drum-body,
body.theme-blue .track-box-bass,
body.theme-blue .track-box-lead,
body.theme-blue .track-box-arp,
body.theme-blue #synth-controls,
body.theme-blue #pattern-controls,
body.theme-blue #visualizer-body,
body.theme-blue #help-panel,
body.theme-blue #load-panel,
body.theme-blue #playonly-body {
  border-color: var(--frame);
}
body.theme-blue .active-section {
  border-color: var(--c64-1-white) !important;
  box-shadow: var(--extrude) !important;
}
body.theme-blue .active-section .track-art {
  color: var(--c64-1-white) !important;
}
body.theme-blue .petscii-logo,
body.theme-blue .petscii-logo .logo-row {
  text-shadow: 0.5em 0.5em 0 var(--c64-0-black);
}
body.theme-blue .track-header,
body.theme-blue .synth-header,
body.theme-blue .module-title,
body.theme-blue .viz-header,
body.theme-blue .drum-header-row,
body.theme-blue .overlay-header {
  color: var(--c64-1-white);
}
body.theme-blue .decay-label,
body.theme-blue .track-art {
  color: var(--c64-14-light-blue);
}
body.theme-blue .step-btn {
  color: var(--c64-14-light-blue);
}
body.theme-blue .step-btn[data-level="2"] {
  color: var(--c64-1-white);
}
body.theme-blue .step-btn[data-level="1"] {
  color: var(--c64-15-light-grey);
}
body.theme-blue .section-divider {
  color: var(--c64-14-light-blue);
}
body.theme-blue .knob button {
  border-color: var(--c64-14-light-blue);
}
body.theme-blue .knob button.active {
  border-color: var(--c64-1-white);
  color: var(--c64-1-white);
}
body.theme-blue .knob button::before {
  background: var(--c64-1-white);
}
body.theme-blue .knob-label,
body.theme-blue .theme-label {
  color: var(--c64-14-light-blue);
}
body.theme-blue .knob.active .knob-label {
  color: var(--c64-1-white);
}
body.theme-blue .knob-page-btn {
  color: var(--c64-14-light-blue) !important;
}
body.theme-blue .knob-page-btn.selected,
body.theme-blue .song-entry.selected {
  background: var(--c64-1-white);
  color: var(--c64-6-blue) !important;
}
body.theme-blue .demo-btn-box,
body.theme-blue .pattern-copy-btn,
body.theme-blue .pattern-slot {
  border-color: var(--c64-14-light-blue);
  color: var(--c64-3-cyan);
}
body.theme-blue .pattern-copy-btn.active-copy {
  background: var(--c64-1-white);
  color: var(--c64-6-blue);
}
body.theme-blue .pattern-slot.editing {
  border-color: var(--c64-1-white);
  color: var(--c64-1-white);
}
body.theme-blue .viz-btn,
body.theme-blue [class*="viz-mode-"] {
  --btn-color: var(--c64-3-cyan);
  border-color: var(--c64-14-light-blue);
}
body.theme-blue .viz-btn.active {
  border-color: var(--c64-1-white);
}
body.theme-blue .transport-btn.boxed-btn.orange-btn:not(.playing) {
  --btn-color: var(--c64-3-cyan);
}
/* the visualizer is a black monitor window set into the blue screen */
body.theme-blue #visualizer-body {
  background: var(--c64-0-black);
}
/* row names a step brighter than the light blue labels */
body.theme-blue .drum-label {
  color: var(--c64-15-light-grey);
}
body.theme-blue .track-slider::-webkit-slider-thumb {
  background: var(--c64-1-white);
}
@media (max-width: 650px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  body.theme-blue #mobile-tabs {
    border-top-color: var(--c64-14-light-blue);
  }
  body.theme-blue .mtab,
  body.theme-blue .mtab-cap {
    color: var(--c64-3-cyan);
  }
  body.theme-blue .mtab.selected .mtab-label {
    background: var(--c64-1-white);
    color: var(--c64-6-blue);
  }
}

/* ---------- theme-warm: "Warm" ---------------------------------------------
 * A/B's calm on a warm palette. Every module wears one orange frame on a
 * brown extrude; the track being edited lights its frame up yellow. Text is
 * grey chrome, light red marks what you can press, yellow is the selection,
 * values and the playhead, and the notes are the brightest thing: white. */
body.theme-warm {
  --c64-blue: var(--c64-9-brown);
  --c64-border: var(--c64-8-orange);
  --c64-cyan: var(--c64-15-light-grey);    /* labels, primary text */
  --c64-purple: var(--c64-10-light-red);   /* clickable controls */
  --c64-green: var(--c64-7-yellow);        /* active / selected / playing */
  --c64-orange: var(--c64-7-yellow);       /* values, playhead */
  --c64-shadow: var(--c64-11-dark-grey);   /* dim text */
  --c64-alert: var(--c64-1-white);
  --frame: var(--c64-8-orange);
  --extrude:
    1px 1px 0 var(--c64-9-brown), 2px 2px 0 var(--c64-9-brown), 3px 3px 0 var(--c64-9-brown),
    4px 4px 0 var(--c64-9-brown), 5px 5px 0 var(--c64-9-brown), 6px 6px 0 var(--c64-9-brown);
  --extrude-big: var(--extrude),
    7px 7px 0 var(--c64-9-brown), 8px 8px 0 var(--c64-9-brown), 9px 9px 0 var(--c64-9-brown),
    10px 10px 0 var(--c64-9-brown);
  /* visualizer: the cool hues turn warm */
  --viz-p3: var(--c64-7-yellow);
  --viz-p4: var(--c64-2-red);
  --viz-p5: var(--c64-8-orange);
  --viz-p6: var(--c64-2-red);
  --viz-p13: var(--c64-7-yellow);
  --viz-p14: var(--c64-10-light-red);
  --logo-row-3: var(--c64-8-orange);
}
body.theme-warm #info-body,
body.theme-warm #drum-body,
body.theme-warm .track-box-bass,
body.theme-warm .track-box-lead,
body.theme-warm .track-box-arp,
body.theme-warm #synth-controls,
body.theme-warm #pattern-controls,
body.theme-warm #visualizer-body,
body.theme-warm #help-panel,
body.theme-warm #load-panel,
body.theme-warm #playonly-body {
  border-color: var(--frame);
}
body.theme-warm .active-section {
  border-color: var(--c64-7-yellow) !important;
}
body.theme-warm .section-divider {
  background: var(--c64-9-brown);
}
body.theme-warm .track-header,
body.theme-warm .synth-header,
body.theme-warm .module-title,
body.theme-warm .viz-header,
body.theme-warm .drum-header-row,
body.theme-warm .overlay-header {
  color: var(--c64-7-yellow);
}
body.theme-warm .track-art {
  color: var(--c64-8-orange);
  opacity: 1;
}
body.theme-warm .active-section .track-art {
  color: var(--c64-7-yellow) !important;
}
body.theme-warm .decay-label,
body.theme-warm .drum-label {
  color: var(--c64-15-light-grey);
}
/* notes: white on, yellow soft, brown rests */
body.theme-warm .step-btn {
  color: var(--c64-9-brown);
}
body.theme-warm .step-btn[data-level="2"] {
  color: var(--c64-1-white);
}
body.theme-warm .step-btn[data-level="1"] {
  color: var(--c64-7-yellow);
}
body.theme-warm .knob-label,
body.theme-warm .theme-label {
  color: var(--c64-12-grey);
}
body.theme-warm .knob.active .knob-label {
  color: var(--c64-7-yellow);
}
body.theme-warm .knob button.active {
  border-color: var(--c64-7-yellow);
  color: var(--c64-7-yellow);
}
body.theme-warm .knob button::before {
  background: var(--c64-15-light-grey);
}
/* selection: reverse video in yellow */
body.theme-warm .knob-page-btn.selected,
body.theme-warm .song-entry.selected {
  background: var(--c64-7-yellow);
  color: var(--c64-0-black) !important;
}
body.theme-warm .demo-btn-box,
body.theme-warm .pattern-copy-btn,
body.theme-warm .pattern-slot {
  border-color: var(--c64-8-orange);
  color: var(--c64-10-light-red);
}
body.theme-warm .pattern-slot.editing {
  border-color: var(--c64-7-yellow);
  color: var(--c64-7-yellow);
}
body.theme-warm .pattern-copy-btn.active-copy,
body.theme-warm .demo-btn-box:hover {
  background: var(--c64-7-yellow);
  color: var(--c64-0-black);
}
body.theme-warm .viz-btn,
body.theme-warm [class*="viz-mode-"] {
  --btn-color: var(--c64-10-light-red);
  border-color: var(--c64-8-orange);
}
body.theme-warm .viz-btn.active {
  border-color: var(--c64-7-yellow);
}
body.theme-warm .transport-btn.boxed-btn.orange-btn:not(.playing) {
  --btn-color: var(--c64-10-light-red);
}
@media (max-width: 650px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  body.theme-warm #mobile-tabs {
    border-top-color: var(--c64-9-brown);
  }
  body.theme-warm .mtab,
  body.theme-warm .mtab-cap {
    color: var(--c64-10-light-red);
  }
  body.theme-warm .mtab.selected .mtab-label {
    background: var(--c64-7-yellow);
    color: var(--c64-0-black);
  }
}

/* themes: the phone [MENU] drop-down and the tab strips */
@media (max-width: 650px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  body.theme-calm #workspace[data-menu="open"] #info-body,
  body.theme-blue #workspace[data-menu="open"] #info-body,
  body.theme-warm #workspace[data-menu="open"] #info-body {
    border-color: var(--frame);
  }
  body.theme-warm #workspace[data-menu="open"] #menu-head {
    background: var(--c64-7-yellow);
    color: var(--c64-0-black);
  }
  body.theme-calm #workspace[data-menu="open"] #menu-head {
    background: var(--c64-14-light-blue);
    color: var(--c64-0-black);
  }
  body.theme-blue #workspace[data-menu="open"] #menu-head {
    background: var(--c64-1-white);
    color: var(--c64-6-blue);
  }
  body.theme-blue .mtab.selected .mtab-cap {
    color: var(--c64-1-white);
  }
  body.theme-warm .mtab.selected .mtab-cap {
    color: var(--c64-7-yellow);
  }
}