/* Pixel surfaces and controls. Visible faces are smaller than their hit targets. */
body,.settings-dialog {
  --px-frame: 1px solid var(--pixel-edge);
  --px-raised: inset 1px 1px var(--pixel-light), 2px 2px 0 rgba(24,28,40,.25);
  --ui-hit: 36px; --ui-face: 28px; --ui-icon: 16px; --ui-copy: 12px;
}
.music-library,.settings-dialog[data-popover],.top-actions .extra-actions {
  border: var(--px-frame); border-radius: 0; box-shadow: var(--px-raised);
}
.settings-dialog[data-popover],.music-library { padding: 12px; }
.top-actions .extra-actions { padding: 4px; }
.top-actions .extra-actions button { min-height: 36px; padding: 4px 10px; font-size: 11px; text-shadow: none; }
.top-actions .extra-actions button span { font-size: 11px; }
.top-actions > button { min-width: 48px; min-height: 48px; height: 48px; padding: 4px 9px; }
.top-actions > button svg { width: 22px; height: 22px; }
.top-actions > button:hover,.top-actions > button[aria-expanded="true"] { background: var(--ui-header); box-shadow: inset 0 -2px var(--ui-bar); }

/* Icon controls: quiet by default, small square feedback on hover. */
.settings-dialog[data-popover] .dialog-heading button,.music-library #music-close,
.music-panel.is-mini .music-heading-actions button {
  position: relative; isolation: isolate; display: grid; place-items: center; flex: 0 0 var(--ui-hit);
  width: var(--ui-hit); min-width: 0; height: var(--ui-hit); min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.settings-dialog[data-popover] .dialog-heading button::before,.music-library #music-close::before,
.music-panel.is-mini .music-heading-actions button::before {
  content: ''; position: absolute; z-index: -1; width: var(--ui-face); height: var(--ui-face); pointer-events: none;
}
.settings-dialog[data-popover] .dialog-heading button:hover::before,.music-library #music-close:hover::before,
.music-panel.is-mini .music-heading-actions button:hover,.music-panel.is-mini #music-size[aria-pressed="true"] { background: none; }
.music-panel.is-mini .music-heading-actions button:hover::before,.music-panel.is-mini #music-size[aria-pressed="true"]::before { background: rgba(255,255,255,.14); }
.settings-dialog[data-popover] .dialog-heading button svg,.music-library #music-close svg,
.music-panel.is-mini #music-stop svg { width: var(--ui-icon); height: var(--ui-icon); }

.settings-dialog[data-popover] .dialog-heading { min-height: var(--ui-hit); margin: 0 0 10px; padding: 0 0 6px; border-bottom: 1px solid var(--line); }
.settings-dialog[data-popover] .dialog-heading h2 { font-size: 22px; }
#scenes-dialog .scene-options { gap: 8px; }
#scenes-dialog .scene-options button { position: relative; align-items: stretch; gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 0; background: var(--ui-input); box-shadow: inset 1px 1px var(--pixel-light); }
#scenes-dialog .scene-options button:hover { border-color: var(--pixel-edge); }
#scenes-dialog .scene-options button[aria-pressed="true"] { border-color: var(--pixel-edge); background: var(--ui-selected); box-shadow: inset 0 -2px var(--scene-point); }
#scenes-dialog .scene-thumbnail { height: 96px; border: 1px solid var(--ui-mid); border-radius: 0; }
#scenes-dialog .scene-options strong { padding: 0 2px 4px; font-size: 12px; line-height: 1.5; }
.settings-dialog[data-popover] .sound-toggle { position: relative; isolation: isolate; min-height: var(--ui-hit); margin: 0 0 8px; padding: 0 8px; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 11px; }
.settings-dialog[data-popover] .sound-toggle::before { content: ''; position: absolute; z-index: -1; inset: calc((var(--ui-hit) - var(--ui-face)) / 2) 0; border: var(--px-frame); background: var(--ui-input); }
.settings-dialog[data-popover] .sound-toggle[aria-pressed="true"] { background: none; }
.settings-dialog[data-popover] .sound-toggle[aria-pressed="true"]::before { background: var(--ui-selected); }
.settings-dialog[data-popover] .sound-toggle svg { width: var(--ui-icon); height: var(--ui-icon); }
.settings-dialog[data-popover] .sound-slider { margin: 0; padding: 6px 2px 0; border-top: 1px solid var(--line); }
.settings-dialog[data-popover] .sound-slider input { height: var(--ui-hit); }
.sound-slider output { font-family: var(--font); }
.sound-credit { margin-top: 8px; font-size: 9px; }

/* Text tabs stay flat. Selection never draws a full-height button around the hit area. */
.music-library-heading { gap: 8px; padding-bottom: 6px; margin-bottom: 6px; }
.music-library-tabs { gap: 8px; }
.music-library-tabs button { min-width: 60px; min-height: var(--ui-hit); padding: 0 8px; border: 0; font-size: var(--ui-copy); background: none; }
.music-library-tabs button[aria-selected="true"] { box-shadow: none; background: none; }
.music-library-tabs button[aria-selected="true"]::after { left: 8px; right: 8px; bottom: 4px; width: auto; height: 2px; background: var(--ink); box-shadow: none; }
.music-library .music-platforms { gap: 4px; }
.music-library .music-platforms button,.music-library .music-category-nav .youtube-categories button {
  position: relative; isolation: isolate; min-height: var(--ui-hit); min-width: 36px; padding: 0 8px;
  border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 11px;
}
.music-library .music-platforms button::before,.music-library .music-category-nav .youtube-categories button::before {
  content: ''; position: absolute; z-index: -1; inset: calc((var(--ui-hit) - var(--ui-face)) / 2) 0;
}
.music-library .music-platforms button[aria-pressed="true"]::before,.music-library .music-category-nav .youtube-categories button[aria-pressed="true"]::before { background: var(--ui-inset); box-shadow: inset 0 -2px var(--ui-mid); }
.music-library .music-category-nav { margin-bottom: 4px; }
.music-library .music-category-nav.is-scrollable { grid-template-columns: var(--ui-hit) minmax(0,1fr) var(--ui-hit); }
.music-library .music-category-arrow { width: var(--ui-hit); height: var(--ui-hit); }
.music-library .music-search summary { min-height: var(--ui-hit); padding: 0 4px; border: 0; background: none; font-size: 11px; }
.music-load-more { min-height: var(--ui-hit); border-radius: 0; background: var(--ui-inset); color: var(--ink); }
.music-load-more { border: 0; border-top: 1px solid var(--line); background: transparent; }
.music-library .youtube-result-row { min-height: 56px; padding-left: 4px; border-bottom: 1px solid var(--line); }
.music-library .youtube-result { min-height: 56px; }
.music-library .youtube-select-toggle { flex-basis: var(--ui-hit); width: var(--ui-hit); min-height: var(--ui-hit); }
.music-library .youtube-select-toggle svg { width: var(--ui-icon); height: var(--ui-icon); }
.music-library .youtube-selection-heading button { min-height: var(--ui-hit); }
.music-library #youtube-play-selection { position: relative; isolation: isolate; min-height: var(--ui-hit); padding: 0 10px; border: 0; background: none; box-shadow: none; color: var(--pixel-light); }
.music-library #youtube-play-selection::before { content: ''; position: absolute; z-index: -1; inset: calc((var(--ui-hit) - var(--ui-face)) / 2) 0; border: var(--px-frame); background: var(--pixel-edge); box-shadow: inset 1px 1px var(--ui-mid); }
.music-library #youtube-play-selection:active { transform: none; box-shadow: none; }
.music-library .music-artwork { image-rendering: auto; }

@media (max-width: 700px), (max-width: 900px) and (max-height: 540px) {
  body,.settings-dialog { --ui-hit: 44px; --ui-face: 24px; --ui-icon: 12px; --ui-copy: 11px; }
  .top-actions > button { width: 48px; height: 48px; min-height: 48px; padding: 0; }
  .top-actions > button svg { width: 22px; height: 22px; }
  .top-actions .extra-actions button { min-height: 44px; }
  .settings-dialog[data-popover],#scenes-dialog[data-popover],.music-library { padding: 8px 10px 10px; }
  .settings-dialog[data-popover] .dialog-heading { margin-bottom: 6px; padding-bottom: 2px; }
  .settings-dialog[data-popover] .dialog-heading h2,#scenes-dialog .dialog-heading h2 { font-size: 18px; }
  #scenes-dialog[data-popover] { padding: 12px; }
  #scenes-dialog .dialog-heading { margin-bottom: 10px; padding-bottom: 6px; }
  #scenes-dialog .dialog-heading h2 { font-size: 22px; }
  #scenes-dialog .scene-options { grid-template-columns: minmax(0,1fr); gap: 10px; }
  #scenes-dialog .scene-options button { flex-direction: row; align-items: center; min-height: 104px; gap: 12px; padding: 8px; }
  #scenes-dialog .scene-thumbnail { flex: 0 0 clamp(104px,32vw,144px); width: clamp(104px,32vw,144px); height: clamp(80px,24vw,108px); }
  #scenes-dialog .scene-options button > span { flex: 1; }
  #scenes-dialog .scene-options strong { padding: 0; font-size: 14px; white-space: normal; line-height: 1.6; }
  #scenes-dialog .scene-options small { display: block; margin-top: 6px; font-size: 10px; line-height: 1.7; }
  .music-library .youtube-result-row,.music-library .youtube-result { min-height: 52px; }
  .music-library .music-artwork { flex-basis: 48px; width: 48px; height: 32px; }
  .music-library .youtube-result { gap: 8px; }
  .music-library .youtube-result strong { font-size: 10px; }
  .music-library .youtube-result small { font-size: 9px; }
  .music-library .music-category-nav .youtube-categories button { font-size: 10px; }
  .music-transport #music-play-pause { position: relative; isolation: isolate; width: 44px; height: 44px; border: 0; background: none; }
  .music-transport #music-play-pause::before { content: ''; position: absolute; z-index: -1; width: 28px; height: 28px; border: 1px solid var(--ui-mid); background: rgba(255,255,255,.12); }
  .music-transport svg { width: 16px; height: 16px; }
  .music-transport button:not(:disabled):hover { background: none; }
  #music-panel.is-mini,#music-empty { box-shadow: var(--px-raised); }
  #music-panel.is-mini.is-expanded { box-shadow: 4px 5px 0 rgba(17,20,20,.5); }
  .music-mini-caption { border-top: var(--px-frame); }
  .bottom-dock .movement-controls svg { width: 20px; height: 20px; }
}
@media (min-width: 701px) and (max-width: 900px) and (max-height: 540px) {
  #scenes-dialog .scene-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #scenes-dialog .scene-options button { flex-direction: column; align-items: stretch; gap: 8px; }
  #scenes-dialog .scene-thumbnail { flex: none; width: 100%; height: clamp(88px,25dvh,112px); }
}

/* Language choices share the compact pixel menu, with full touch targets. */
.top-actions .language-picker { border-top: 2px solid var(--line); margin-top: 4px; padding-top: 8px; }
.top-actions .language-picker .language-label { display: block; padding: 0 10px 4px; color: var(--muted); font-size: 10px; }
.top-actions .language-options { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.top-actions .language-options button { justify-content: center; padding-inline: 4px; min-width: 0; }
.top-actions .language-options button[aria-pressed="true"] { box-shadow: inset 0 -2px var(--ink); }

/* One composite theme control; its description follows the selected scene. */
#sound-dialog .theme-sound-copy { margin: 0 2px 10px; color: var(--muted); font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }

/* Header › 캐릭터: six square pixel cards; the chosen one is underlined like the other dot options. */
.character-intro { margin: 0 0 12px; font-size: 11px; line-height: 1.6; }
.character-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.character-options button { display: grid; justify-items: center; gap: 6px; min-height: 44px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 0; background: var(--ui-input); box-shadow: inset 1px 1px var(--pixel-light); font-size: 11px; color: var(--ink); }
.character-options button:hover { border-color: var(--pixel-edge); }
.character-options button[aria-checked="true"] { border-color: var(--pixel-edge); box-shadow: inset 0 -3px 0 var(--pixel-edge); }
.character-options canvas { width: 66px; height: auto; align-self: end; image-rendering: pixelated; }

/* Sound rows use icon-only switches; the settings launcher is not a toggle. */
#sound-dialog #sound-toggle,
#sound-dialog #sound-toggle[aria-pressed="true"] { justify-content: flex-start; width: auto; min-height: 40px; padding: 0 4px; border: 0; background: transparent; box-shadow: none; }
#sound-dialog #sound-toggle::before { display: none; }
#sound-dialog .sound-setting { padding: 6px 2px 0; border-top: 1px solid var(--line); }
#sound-dialog .sound-setting-head { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 12px; }
#sound-dialog .sound-setting-head label { flex: 1; }
#sound-dialog .sound-setting-head output { color: var(--muted); font-size: 11px; }
#sound-dialog .sound-channel-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; color: var(--ink); background: transparent; border: 0; box-shadow: none; }
#sound-dialog .sound-channel-toggle[aria-pressed="false"] { color: var(--muted); }
#sound-dialog .sound-channel-toggle svg { width: 18px; height: 18px; }
#sound-dialog .sound-setting input { display: block; width: 100%; margin: 0; height: 32px; appearance: none; background: transparent; cursor: pointer; }
#sound-dialog .sound-setting input::-webkit-slider-runnable-track { height: 6px; background: var(--ui-inset); border: 1px solid var(--ui-mid); }
#sound-dialog .sound-setting input::-webkit-slider-thumb { appearance: none; width: 14px; height: 18px; margin-top: -7px; border: 2px solid var(--pixel-edge); border-radius: 0; background: var(--ui-mid); box-shadow: inset 2px 2px 0 var(--ui-selected); }
#sound-dialog .sound-setting input::-moz-range-track { height: 4px; background: var(--ui-inset); border: 1px solid var(--ui-mid); }
#sound-dialog .sound-setting input::-moz-range-thumb { width: 10px; height: 14px; border: 2px solid var(--pixel-edge); border-radius: 0; background: var(--ui-mid); }

/* Explicit WebKit and Firefox range styling keeps sound sliders visible on mobile. */
#sound-dialog .sound-setting input[type="range"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  opacity: 1;
}
#sound-dialog .sound-setting input[type="range"]::-webkit-slider-runnable-track {
  box-sizing: border-box;
  height: 8px;
  border: 1px solid #535a61;
  border-radius: 0;
  background: #bfc5c3;
}
#sound-dialog .sound-setting input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 20px;
  height: 24px;
  margin-top: -9px;
  border: 2px solid #30363d;
  border-radius: 0;
  background: #747f7c;
  box-shadow: inset 2px 2px #d8dfda;
}
#sound-dialog .sound-setting input[type="range"]::-moz-range-track {
  box-sizing: border-box;
  height: 8px;
  border: 1px solid #535a61;
  border-radius: 0;
  background: #bfc5c3;
}
#sound-dialog .sound-setting input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 20px;
  height: 24px;
  border: 2px solid #30363d;
  border-radius: 0;
  background: #747f7c;
  box-shadow: inset 2px 2px #d8dfda;
}
#sound-dialog { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Contrast header controls against both bright and dark scenery. */
.app-header .top-actions > button {
  background: rgba(20, 24, 35, .78);
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), 2px 2px 0 rgba(10, 13, 22, .36);
  color: #fff;
}
.app-header .top-actions > button:hover,
.app-header .top-actions > button:focus-visible,
.app-header .top-actions > button[aria-expanded="true"],
.app-header .top-actions > button[aria-pressed="true"] {
  background: rgba(66, 71, 83, .94);
  border-color: rgba(255, 255, 255, .72);
  box-shadow: inset 0 -2px var(--scene-point, #e8d59e), 2px 2px 0 rgba(10, 13, 22, .36);
}

/* Keep both action icons legible on small and large screens. */
.bottom-dock .movement-controls #move-auto,
.bottom-dock .movement-controls #move-jump {
  flex-basis: 50px; width: 50px; min-width: 50px; height: 50px; min-height: 50px;
  padding: 6px; justify-content: center;
}
.bottom-dock .movement-controls #move-auto:not([aria-pressed="true"]) {
  color: #fff; background: rgba(12, 17, 29, .7); opacity: 1;
}
.bottom-dock .movement-controls #move-auto svg {
  width: 30px; height: 30px; fill: currentColor; stroke: none;
}
.bottom-dock .movement-controls #move-jump .jump-cat {
  width: 33px; height: 30px;
  background-size: 495px 1140px; background-position: -297px -330px;
}