/* Frequency 99.4 — thème VHS + matériel audio */
.eg {
    --eg-card: rgba(18, 18, 24, 0.94);
    --eg-card-2: rgba(51, 255, 51, 0.05);
    --eg-text: var(--text-main);
    --eg-muted: var(--text-muted);
    --eg-accent: var(--vhs-green);
    --eg-accent-ink: #050505;
    --eg-border: rgba(51, 255, 51, 0.25);
    --eg-ok: var(--vhs-green);
    --eg-err: var(--vhs-red);
    --eg-warn: var(--vhs-amber);
    --eg-radius: 4px;
    --eg-font-head: var(--font-vhs);
    --eg-font-body: var(--font-mono);
    --eg-font-mono: var(--font-vhs);
}
.eg .eg-room-title, .eg .eg-victory-title { font-size: clamp(1.5rem, 5vw, 2.2rem); text-shadow: var(--vhs-green-glow); }
.eg .eg-btn { font-size: 1.15rem; }

.power-btn { margin-top: 0.8rem; }

/* Salle 1 : récepteur */
.radio-box { padding: 1rem; border-radius: 8px; background: linear-gradient(180deg, #3a2a1c, #22180f); border: 2px solid #5a4330; margin-bottom: 1rem; }
.radio-dial { display: flex; align-items: baseline; justify-content: center; gap: 0.6rem; padding: 0.6rem; background: #0b0b05; border-radius: 6px; box-shadow: inset 0 0 12px rgba(255, 176, 0, 0.25); margin-bottom: 0.8rem; position: relative; }
.tuner-freq { font-family: var(--font-vhs); font-size: clamp(2.4rem, 9vw, 3.4rem); color: var(--vhs-amber); text-shadow: var(--vhs-amber-glow); min-width: 5ch; text-align: right; }
.radio-label { font-family: var(--font-vhs); color: #a07a30; font-size: 1.2rem; }
.beep-led { position: absolute; right: 0.8rem; top: 0.8rem; width: 14px; height: 14px; border-radius: 50%; background: #3a0b0b; }
.beep-led.on { background: #ff3333; box-shadow: 0 0 12px #ff3333; }
.tuner-slider, .mixer input[type=range], .scope-controls input[type=range] { width: 100%; accent-color: var(--vhs-amber); height: 28px; }
.radio-scale { display: flex; justify-content: space-between; font-family: var(--font-vhs); color: #a07a30; font-size: 1rem; padding: 0 2px; }
.smeter { flex: 1 1 160px; height: 12px; background: #111; border: 1px solid #333; border-radius: 6px; overflow: hidden; margin: 0.4rem 0; }
.smeter-fill { height: 100%; width: 0; background: linear-gradient(90deg, #33ff33, #ffb000, #ff3333); transition: width 0.08s linear; }
.smeter-fill.noise { background: linear-gradient(90deg, #33ff33, #ff3333); }

/* Salle 2 : morse */
.studio-box { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.morse-lamp { width: 38px; height: 38px; border-radius: 50%; background: #2a1d00; border: 2px solid #5a4300; }
.morse-lamp.on { background: var(--vhs-amber); box-shadow: 0 0 22px var(--vhs-amber); }
.access-toggle { display: block; margin: 0.4rem 0 0.8rem; color: var(--text-muted); font-size: 0.9rem; }
.morse-chart { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 0.25rem 0.6rem; padding: 0.8rem; border: 1px dashed var(--eg-border); border-radius: 4px; margin-bottom: 0.9rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); }
.morse-chart b { color: var(--vhs-green); }

/* Salle 3 : synthétiseur */
.synth-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; margin: 1rem 0 0.6rem; }
.synth-key { height: 130px; border-radius: 0 0 8px 8px; border: 1px solid #444; background: linear-gradient(180deg, #e9e9e9, #bdbdbd); color: #222; font-family: var(--font-vhs); font-size: 1.5rem; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.5rem; cursor: pointer; box-shadow: inset 0 -6px 0 var(--key); }
.synth-key.hit { background: var(--key); box-shadow: 0 0 18px var(--key); color: #000; }
.melody-progress { font-family: var(--font-vhs); font-size: 1.6rem; letter-spacing: 0.2em; color: var(--vhs-green); text-align: center; }

/* Salle 4 : mixeur */
.mixer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; align-items: center; padding: 1rem; background: #15151b; border: 1px solid #2a2a35; border-radius: 6px; margin-bottom: 0.6rem; }
.mixer-col { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-family: var(--font-vhs); font-size: 1.2rem; }
.mixer-toggle { font-family: var(--font-vhs); font-size: 1.15rem; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.mixer-toggle input { width: 20px; height: 20px; accent-color: var(--vhs-green); }
.dtmf { display: flex; align-items: center; gap: 1rem; margin: 0.6rem 0; }
.dtmf-display { font-family: var(--font-vhs); font-size: 2.6rem; min-width: 5ch; text-align: center; padding: 0.2rem 0.8rem; background: #0a0f0a; color: #5a6b5a; border: 1px solid #1f2a1f; border-radius: 4px; }
.dtmf-display.clean { color: var(--vhs-green); text-shadow: var(--vhs-green-glow); }

/* Salle 5 : oscilloscope */
.scope-box { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 1.2rem; align-items: center; }
.scope { width: 100%; max-width: 320px; aspect-ratio: 1; background: #020802; border: 8px solid #2b2b2b; border-radius: 14px; box-shadow: inset 0 0 25px rgba(51, 255, 51, 0.2); }
.scope-controls { display: flex; flex-direction: column; gap: 0.6rem; }
.scope-controls b { font-family: var(--font-vhs); font-size: 2rem; color: var(--vhs-amber); }
.final-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1rem; }
.final-choices h3 { font-family: var(--font-vhs); font-size: 1.5rem; margin: 0 0 0.3rem; color: var(--vhs-amber); }

@media (max-width: 720px) {
    .mixer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .synth-keys { gap: 0.25rem; }
    .synth-key { height: 110px; }
    .scope-box, .final-choices { grid-template-columns: 1fr; }
    .scope { margin: 0 auto; }
}