/* ==========================================
   ベース：80s ファミコン / チップチューン風
========================================== */
:root {
  --color-bg: #000000;
  --color-text: #f5f5f5;
  --color-neon-blue: #2b6cff;
  --color-magenta: #d0197a;
  --color-retro-red: #f24444;
  --color-frame-blue: #003cff;
  --color-panel-bg: #0b0b11;
  --color-panel-border: rgba(0, 60, 255, 0.4);
  
  /* 追加の色変数 */
  --color-neon-pink: #ff4dd6;
  --color-neon-pink-glow: rgba(255, 77, 214, 0.6);
  --color-title-pink: #ffd3f2;
  --color-version-purple: #f5b7ff;
  --color-section-title: #f9d8ff;
  --color-wave-btn-bg: #1b1636;
  --color-wave-btn-border: #4f3374;
  --color-wave-btn-hover: #2a2153;
  --color-synth-bg: #0a0a0f;
  --color-red-line: #811a32;
  
  /* スペーシング */
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  
  /* フォントサイズ */
  --font-size-xs: 7px;
  --font-size-sm: 8px;
  --font-size-md: 9px;
  --font-size-lg: 10px;
  --font-size-xl: 14px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
  color: var(--color-text);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4) 0px,
      rgba(0, 0, 0, 0.4) 2px,
      rgba(0, 0, 0, 0.9) 3px,
      rgba(0, 0, 0, 0.9) 4px
    ),
    var(--color-bg);
}

/* ==========================================
   SYNTH本体
========================================== */
.synth {
  position: relative;
  max-width: 960px;
  width: 100%;
  padding: var(--spacing-lg) 14px var(--spacing-xl);
  border-radius: var(--spacing-md);
  background: var(--color-synth-bg);
  border: 4px solid var(--color-frame-blue);
  box-shadow:
    0 0 0 4px rgba(0, 60, 255, 0.6),
    0 0 16px rgba(0, 120, 255, 0.9),
    0 0 60px rgba(0, 30, 150, 0.9),
    inset 0 0 var(--spacing-md) rgba(0, 80, 200, 0.2);
}

.synth::before {
  content: "";
  position: absolute;
  left: var(--spacing-md);
  right: var(--spacing-md);
  top: 10px;
  height: 3px;
  background: var(--color-red-line);
}

/* ==========================================
   ヘッダー：タイトル & バージョン
========================================== */
.synth-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-xs) 0;
}

.synth-header h1 {
  margin: 0;
  font-size: var(--font-size-xl);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-title-pink);
  position: relative;
  text-shadow:
    0 0 var(--spacing-md) rgba(0, 80, 255, 0.8),
    0 0 14px rgba(255, 50, 120, 0.4),
    0 0 var(--spacing-xs) #000;
  animation: crt-jitter 3s infinite steps(2, end);
}

.synth-header h1::before,
.synth-header h1::after {
  content: "WEB ANALOG MODELING SYNTH";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: screen;
}

.synth-header h1::before {
  color: rgba(242, 68, 68, 0.9);
  transform: translate(-1px, 0);
}

.synth-header h1::after {
  color: rgba(0, 255, 255, 0.8);
  transform: translate(1px, 0);
}

@keyframes crt-jitter {
  0%, 10%, 30%, 100% { transform: translate(0, 0); }
  11% { transform: translate(1px, -1px); }
  12% { transform: translate(-1px, 1px); }
  13% { transform: translate(0, 0); }
  31% { transform: translate(-1px, 0); }
  32% { transform: translate(1px, 0); }
  33% { transform: translate(0, 0); }
}

.version {
  font-size: var(--font-size-sm);
  color: var(--color-version-purple);
}

/* ==========================================
   レイアウト：3カラムグリッド
========================================== */
.panel-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--spacing-sm);
}

.panel {
  background: var(--color-panel-bg);
  border-radius: 0;
  padding: var(--spacing-md) var(--spacing-md) 10px;
  border: 2px solid var(--color-panel-border);
  box-shadow: inset 0 0 0 1px rgba(0, 60, 255, 0.2);
}

.panel-wave    { grid-column: 1 / 2; }
.panel-filter  { grid-column: 2 / 3; }
.panel-filter-env { grid-column: 3 / 4; }
.panel-lfo     { grid-column: 1 / 2; }
.panel-delay   { grid-column: 2 / 3; }
.panel-adsr    { grid-column: 3 / 4; }
.panel-octave  { grid-column: 1 / 2; }
.panel-keyboard{ grid-column: 2 / 4; }

.section-title {
  font-size: var(--font-size-md);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-section-title);
  margin-bottom: var(--spacing-sm);
  margin-top: 0;
}

.section-title::before,
.section-title::after {
  content: "[";
  margin-right: var(--spacing-xs);
}

.section-title::after {
  content: "]";
  margin-left: var(--spacing-xs);
  margin-right: 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

/* ==========================================
   WAVE（波形）
========================================== */
.panel-wave {
  position: relative;
  display: flex;
  flex-direction: column;
}

.wave-select {
  display: flex;
  gap: var(--spacing-xs);
}

.wave-btn {
  position: relative;
  flex: 1;
  padding: var(--spacing-sm) 0 var(--spacing-xs);
  font-size: var(--font-size-sm);
  border-radius: 0;
  border: 2px solid var(--color-wave-btn-border);
  background: var(--color-wave-btn-bg);
  color: #f9efff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  line-height: 1.1;
  transition: background 0.1s ease, transform 0.05s ease;
}

.wave-btn::after {
  display: block;
  font-size: var(--font-size-xs);
  margin-top: 3px;
  letter-spacing: 1px;
}

.wave-btn[data-wave="sawtooth"]::after { content: "/ / / /"; }
.wave-btn[data-wave="square"]::after  { content: "▇ ▇ ▇"; }
.wave-btn[data-wave="sine"]::after    { content: "~ ~ ~"; }
.wave-btn[data-wave="triangle"]::after{ content: "/\\ /\\"; }

.wave-btn:hover {
  background: var(--color-wave-btn-hover);
}

.wave-btn.active {
  background: var(--color-retro-red);
  border-color: #ffc1dd;
  color: #13040b;
  box-shadow: 0 0 var(--spacing-md) rgba(242, 68, 68, 0.8);
}

.wave-btn.active::after {
  text-shadow: 0 0 var(--spacing-xs) rgba(0, 0, 0, 0.8);
}

/* ==========================================
   キャラクターイラスト（ロゴ風ちらつきエフェクト）
========================================== */
.character-illustration-wave {
  margin-top: var(--spacing-lg);
  width: 100%;
  height: 140px;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  flex-wrap: nowrap;
  gap: var(--spacing-md);
}

.character-illustration-wave .glitch-wrapper {
  position: relative;
  height: 100%;
  width: auto;
  max-width: calc(50% - 4px);
  flex-shrink: 0;
  display: inline-block;
}

.comment-wrapper {
  position: relative;
  height: 100%;
  width: auto;
  max-width: calc(50% - 4px);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  min-width: 120px;
}

.comment-text {
  position: relative;
  z-index: 1;
  font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-neon-pink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  padding: var(--spacing-md);
  filter: drop-shadow(0 0 2px var(--color-neon-pink-glow))
          drop-shadow(0 0 4px rgba(255, 77, 214, 0.4));
  text-shadow:
    0 0 var(--spacing-xs) rgba(255, 77, 214, 0.8),
    0 0 var(--spacing-md) rgba(255, 77, 214, 0.6);
  animation: crt-jitter 3s infinite steps(2, end);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.character-img-jitter {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: left center;
  position: relative;
  z-index: 1;
  display: block;
  filter: drop-shadow(0 0 2px var(--color-neon-pink-glow))
          drop-shadow(0 0 4px rgba(255, 77, 214, 0.4));
  animation: crt-jitter 3s infinite steps(2, end);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.glitch-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("character.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  z-index: 2;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.comment-wrapper .glitch-layer {
  background-image: none;
  background: transparent;
}

.comment-wrapper .glitch-layer::before {
  content: "test";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  padding: var(--spacing-md);
  width: auto;
  height: auto;
  white-space: nowrap;
}

.comment-wrapper .glitch-layer-1::before {
  color: rgba(255, 77, 214, 0.8);
}

.comment-wrapper .glitch-layer-2::before {
  color: rgba(242, 68, 68, 0.7);
}

.comment-wrapper .glitch-layer-3::before {
  color: rgba(0, 255, 255, 0.7);
}

.glitch-layer-1 {
  filter: drop-shadow(0 0 2px var(--color-neon-pink-glow));
  animation: glitch-rgb-1 4s infinite;
}

.glitch-layer-2 {
  filter: drop-shadow(0 0 2px rgba(242, 68, 68, 0.6));
  animation: glitch-rgb-2 4.2s infinite;
}

.glitch-layer-3 {
  filter: drop-shadow(0 0 2px rgba(0, 255, 255, 0.6));
  animation: glitch-rgb-3 3.8s infinite;
}

@keyframes glitch-rgb-1 {
  0%, 90%, 100% {
    opacity: 0;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
  91% {
    opacity: 0.8;
    transform: translateX(-2px);
    clip-path: inset(0 0 95% 0);
  }
  92% {
    opacity: 0;
    transform: translateX(2px);
    clip-path: inset(0 0 0 0);
  }
  93% {
    opacity: 0.6;
    transform: translateX(-1px);
    clip-path: inset(20% 0 60% 0);
  }
  94% {
    opacity: 0;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes glitch-rgb-2 {
  0%, 88%, 100% {
    opacity: 0;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
  89% {
    opacity: 0.7;
    transform: translateX(2px);
    clip-path: inset(10% 0 80% 0);
  }
  90% {
    opacity: 0;
    transform: translateX(-2px);
    clip-path: inset(0 0 0 0);
  }
  91% {
    opacity: 0.5;
    transform: translateX(1px);
    clip-path: inset(40% 0 40% 0);
  }
  92% {
    opacity: 0;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes glitch-rgb-3 {
  0%, 92%, 100% {
    opacity: 0;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
  93% {
    opacity: 0.9;
    transform: translateX(-3px);
    clip-path: inset(5% 0 90% 0);
  }
  94% {
    opacity: 0;
    transform: translateX(3px);
    clip-path: inset(0 0 0 0);
  }
  95% {
    opacity: 0.4;
    transform: translateX(-1px);
    clip-path: inset(30% 0 50% 0);
  }
  96% {
    opacity: 0;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
}

.glitch-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 77, 214, 0.8);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  animation: glitch-scanline 3s infinite;
  box-shadow: 0 0 var(--spacing-xs) rgba(255, 77, 214, 1);
}

@keyframes glitch-scanline {
  0%, 95%, 100% {
    opacity: 0;
    top: 0;
  }
  96% {
    opacity: 1;
    top: 20%;
  }
  97% {
    opacity: 0.8;
    top: 50%;
  }
  98% {
    opacity: 0.6;
    top: 80%;
  }
  99% {
    opacity: 0;
    top: 100%;
  }
}

.glitch-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 77, 214, 0.03) 2px, rgba(255, 77, 214, 0.03) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 77, 214, 0.03) 2px, rgba(255, 77, 214, 0.03) 4px);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: glitch-noise 0.15s infinite;
}

@keyframes glitch-noise {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: 0.3; transform: translate(-1px, 1px); }
  20% { opacity: 0.1; transform: translate(1px, -1px); }
  30% { opacity: 0.4; transform: translate(-1px, -1px); }
  40% { opacity: 0.2; transform: translate(1px, 1px); }
  50% { opacity: 0.3; transform: translate(-1px, 0); }
  60% { opacity: 0.1; transform: translate(1px, 0); }
  70% { opacity: 0.4; transform: translate(0, -1px); }
  80% { opacity: 0.2; transform: translate(0, 1px); }
  90% { opacity: 0.3; transform: translate(-1px, 1px); }
  100% { opacity: 0; transform: translate(0, 0); }
}

.character-illustration-wave::before,
.character-illustration-wave::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--spacing-md);
  transform: translateX(-50%);
  width: auto;
  height: calc(100% - var(--spacing-xl));
  max-width: 60%;
  background-image: url("character.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: screen;
  z-index: 0;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  animation: crt-jitter 3s infinite steps(2, end);
}

.character-illustration-wave::before {
  transform: translateX(calc(-50% - 1px));
  filter: drop-shadow(0 0 2px rgba(242, 68, 68, 0.6));
}

.character-illustration-wave::after {
  transform: translateX(calc(-50% + 1px));
  filter: drop-shadow(0 0 2px rgba(0, 255, 255, 0.6));
}

@media (max-width: 900px) {
  .character-illustration-wave {
    height: 100px;
    flex-wrap: wrap;
  }
  
  .character-illustration-wave .glitch-wrapper,
  .comment-wrapper {
    max-width: 100%;
    margin-right: 0;
    margin-bottom: var(--spacing-md);
  }
}

/* ==========================================
   トグルボタン（ON/OFF）
========================================== */
.toggle-btn {
  font-size: var(--font-size-sm);
  padding: 2px var(--spacing-md);
  border-radius: 0;
  border: 2px solid #25407a;
  background: #050b24;
  color: #c4d8ff;
  cursor: pointer;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.1s ease, box-shadow 0.1s ease;
}

.toggle-btn.active {
  background: var(--color-neon-blue);
  border-color: #a5c3ff;
  color: #02040d;
  box-shadow: 0 0 10px rgba(43, 108, 255, 0.9);
}

.toggle-btn.off {
  background: #050817;
  border-color: #242a4c;
  color: #7e86aa;
}

/* ==========================================
   コントロール共通
========================================== */
.filter,
.filter-env,
.lfo,
.delay,
.adsr {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.filter-row,
.filter-env-row,
.lfo-row,
.delay-row,
.adsr-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.filter-row label,
.filter-env-row label,
.lfo-row label,
.delay-row label,
.adsr-row label {
  width: 68px;
  font-size: var(--font-size-sm);
  color: #f3e2d0;
}

input[type="range"] {
  flex: 1;
  accent-color: var(--color-magenta);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 18px;
}

.filter-row select {
  flex: 1;
  padding: 2px 3px;
  font-size: var(--font-size-sm);
  background: #140d0d;
  color: #f5e6d7;
  border: 2px solid #543232;
  border-radius: 0;
}

.filter-value,
.filter-env-value,
.lfo-value,
.delay-value,
.adsr-value {
  font-size: var(--font-size-sm);
  width: 72px;
  text-align: right;
  color: #f7c1ff;
}

.lfo-value {
  width: 82px;
}

.filter.disabled,
.filter-env.disabled,
.lfo.disabled,
.delay.disabled {
  opacity: 0.38;
  pointer-events: none;
}

/* ==========================================
   ENV スコープ（エンベロープ表示）
========================================== */
.env-scope-wrapper {
  margin-bottom: var(--spacing-xs);
}

.env-scope-wrapper canvas {
  width: 100%;
  height: 54px;
  display: block;
  border-radius: 0;
  background: #08030f;
  border: 2px solid #a0214c;
  image-rendering: pixelated;
  box-shadow: 0 0 10px rgba(255, 64, 128, 0.7);
}

.filter-env.disabled .env-scope-wrapper canvas,
.adsr.disabled .env-scope-wrapper canvas {
  opacity: 0.4;
}

/* ==========================================
   OCTAVE
========================================== */
.octave-control {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  align-items: center;
}

#octDown,
#octUp {
  width: 28px;
  height: 22px;
  background: #211313;
  border: 2px solid rgba(0, 90, 255, 0.5);
  color: #ffe9c4;
  font-size: var(--font-size-lg);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.1s ease, transform 0.05s ease;
}

#octDown:hover,
#octUp:hover {
  background: #3a2020;
}

#octDown:active,
#octUp:active {
  transform: translateY(1px);
}

#octLabel {
  width: 30px;
  text-align: center;
  font-size: var(--font-size-lg);
  color: var(--color-magenta);
}

/* ==========================================
   キーボード（白鍵・黒鍵）
========================================== */
.keyboard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.black-keys,
.white-keys {
  display: flex;
  align-items: flex-end;
}

.black-spacer {
  flex: 0.7;
}

.key {
  min-width: 34px;
  padding: var(--spacing-md) 0;
  font-size: var(--font-size-md);
  border-radius: 0;
  border: 3px solid #3a3a3a;
  cursor: pointer;
  user-select: none;
  transition: background 0.08s ease, transform 0.05s ease, box-shadow 0.08s ease;
}

.key.white {
  background: #f7f8ff;
  color: #141636;
  margin-right: 2px;
  flex: 1;
  border-color: rgba(0, 90, 255, 0.4);
  box-shadow:
    0 0 3px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  image-rendering: pixelated;
}

.key.black {
  background: #04061a;
  color: #f4f4ff;
  margin: 0 2px;
  flex: 0.7;
  border-color: rgba(0, 110, 255, 0.65);
  box-shadow:
    0 2px 0 #000,
    0 0 var(--spacing-xs) rgba(0, 0, 0, 0.9);
  image-rendering: pixelated;
}

.key.active {
  transform: translateY(1px);
  box-shadow:
    inset 0 0 var(--spacing-sm) rgba(208, 25, 122, 0.9),
    0 0 var(--spacing-sm) rgba(208, 25, 122, 0.7);
}

.hint {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--font-size-sm);
  color: #e0c8aa;
}

/* ==========================================
   レスポンシブ
========================================== */
@media (max-width: 900px) {
  .synth {
    max-width: 100%;
    padding: 10px var(--spacing-md) var(--spacing-lg);
  }

  .synth-header h1 {
    font-size: 11px;
    letter-spacing: 0.12em;
  }

  .panel-grid {
    grid-template-columns: 1fr;
  }

  .panel-wave,
  .panel-filter,
  .panel-filter-env,
  .panel-lfo,
  .panel-delay,
  .panel-adsr,
  .panel-octave,
  .panel-keyboard {
    grid-column: 1 / -1;
  }
}

/* ==========================================
   スライダーカスタマイズ
========================================== */
.filter-row input[type="range"],
.filter-env-row input[type="range"],
.lfo-row input[type="range"],
.delay-row input[type="range"],
.adsr-row input[type="range"] {
  flex: 1;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255, 64, 128, 0.6);
  height: 2px;
  border-radius: 1px;
  box-shadow: 0 0 var(--spacing-sm) rgba(255, 64, 128, 0.6);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 var(--spacing-md) rgba(255, 255, 255, 0.9);
  margin-top: -6px;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  background: rgba(255, 64, 128, 0.6);
  height: 2px;
  border-radius: 1px;
  box-shadow: 0 0 var(--spacing-sm) rgba(255, 64, 128, 0.6);
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 var(--spacing-md) rgba(255, 255, 255, 0.9);
  cursor: pointer;
  border: none;
}

input[type="range"]::-ms-track {
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: rgba(255, 64, 128, 0.6);
  box-shadow: 0 0 var(--spacing-sm) rgba(255, 64, 128, 0.6);
}