html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  display: block;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.machine {
  margin: 24px auto;
}

.topbar canvas,
#audioGate button {
  clip-path: none;
}

.topbar { grid-template-columns: 180px minmax(0,1fr) auto auto; gap: 14px; }
.view-actions { display: flex; gap: 6px; }
.view-actions button { min-width: 48px; height: 36px; padding: 0 8px; border: 1px solid var(--line); background: #111715b8; color: var(--cream); font: 700 9px ui-monospace,monospace; letter-spacing: .05em; cursor: pointer; }
.view-actions button.active { color: var(--ink); background: var(--acid); border-color: var(--acid); }
.power i.muted { background: #f23838; box-shadow: 0 0 14px #f23838; }
body.fit-view { height: auto; min-height: 100dvh; padding: 4px; overflow-y: visible; background-image: none; }
body.fit-view .machine { position: relative; inset: auto; width: 100%; max-width: none; margin: 0; transform: none; box-shadow: none; }
body.fit-view .knob { --size: 78px; }
body.fit-view .mini-controls .knob { --size: 70px; }
body.fit-view .tap-row .smooth-control .knob { --size: 58px; }
body.fit-view .segmented button,
body.fit-view .mini-toggle,
body.fit-view .tap-button,
body.fit-view .cut-button,
body.fit-view .toggle,
body.fit-view #panic { min-height: 52px; }
body.fit-view .performance-key { height: 82px; }
body.fit-view .mini-controls { grid-template-columns: repeat(3,minmax(72px,1fr)); gap: 12px; }

html:fullscreen body.desktop-fullscreen { width: 100vw; height: 100vh; padding: 0; overflow: hidden; background-image: none; }
html:fullscreen body.desktop-fullscreen .machine { position: fixed; top: 50%; left: 50%; margin: 0; transform: translate(-50%,-50%) scale(var(--fullscreen-scale,1)); transform-origin: center; }

/* Tablets und kleine Laptops */
@media (max-width: 1100px) {
  body { padding: 16px; }
  .machine { width: 100%; margin: 0 auto; }

  .controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 16px;
  }

  .controls .wide { grid-column: span 2; }

  .fx-panel {
    grid-template-columns: 55px repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .fx-panel > .section-title {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 100%;
  }

  .ladder-block { grid-column: 2; grid-row: 1; }
  .delay-block { grid-column: 3; grid-row: 1; }
  .reverb-block { grid-column: 2 / span 2; grid-row: 2; }
  .reverb-block .mini-controls { max-width: 440px; margin-inline: auto; }
}

/* Tablets im Hochformat */
@media (max-width: 820px) {
  .topbar { grid-template-columns: 125px minmax(0, 1fr) 70px auto; }

  .fx-panel {
    grid-template-columns: 45px minmax(0, 1fr);
  }

  .fx-panel > .section-title {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .fx-panel > .fx-block {
    grid-column: 2;
    grid-row: auto;
    width: 100%;
  }

  .ladder-block { order: 1; }
  .delay-block { order: 2; }
  .reverb-block { order: 3; }
  .reverb-block .mini-controls { max-width: none; }
}

/* Smartphones */
@media (max-width: 600px) {
  body {
    padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    font-size: 11px;
    touch-action: pan-y;
  }

  .machine {
    height: auto;
    min-height: 0;
    overflow: visible;
    clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
    box-shadow: 0 16px 45px #000a, 5px 5px 0 #080a09;
  }

  .topbar {
    height: 78px;
    grid-template-columns: 98px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 9px 12px;
  }

  .topbar canvas { height: 48px; }
  .brand { width: 92px; height: 52px; }
  .power { display: none; }
  .view-actions { gap: 4px; }
  .view-actions button { min-width: 42px; height: 42px; padding-inline: 5px; }

  .panel,
  .fx-panel {
    display: block;
    height: auto;
    overflow: visible;
    padding: 15px 12px 20px;
  }

  .section-title,
  .fx-panel > .section-title {
    height: auto;
    margin: 0 0 18px;
    padding: 0 0 9px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .section-title b,
  .section-title span {
    display: inline-block;
    margin: 0;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .section-title span { margin-left: 9px; font-size: 16px; }

  .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
  }

  .controls .wide { grid-column: 1 / -1; }
  .segmented button { min-height: 44px; }

  .performance {
    grid-column: auto;
    gap: 8px;
    margin-top: 24px;
  }

  .performance-key { min-width: 0; height: 68px; }
  .performance-key.secondary { flex: .55; }
  .toggle { width: 64px; min-height: 48px; }

  .fx-panel > .fx-block {
    width: 100%;
    margin: 0 0 14px;
    padding: 15px 12px;
  }

  .fx-panel > .fx-block:last-child { margin-bottom: 0; }
  .mini-toggle, .tap-button, .cut-button, #panic { min-height: 44px; }

  .tap-row {
    grid-template-columns: minmax(70px,1fr) minmax(64px,.75fr) minmax(64px,.8fr);
    gap: 7px;
  }

  .mini-controls { gap: 7px; }
  .tap-row .smooth-control .knob { --size: 46px; }

  footer {
    position: relative;
    height: 62px;
    padding: 0 12px;
    backdrop-filter: blur(8px);
  }

  #audioGate { padding: 20px; }
  #audioGate button { min-width: 190px; min-height: 56px; }

  body.fit-view .controls { grid-template-columns: repeat(2,minmax(118px,1fr)); gap: 28px 16px; }
  body.fit-view .controls .wide { grid-column: auto; }
  body.fit-view .modes .segmented button { min-height: 38px; padding: 6px 4px; font-size: 8px; }
  body.fit-view .modes .segmented { gap: 4px; }
  body.fit-view .fx-panel > .fx-block { padding: 20px 14px; margin-bottom: 18px; }
}

@media (max-width: 380px) {
  .controls { gap-inline: 7px; }
  .fx-panel > .fx-block { padding-inline: 8px; }
  .mini-controls { gap: 3px; }
  .knob { --size: 54px; }
  .mini-controls .knob { --size: 52px; }
  .tap-row .smooth-control .knob { --size: 43px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  body { padding-block: 8px; }
  .machine { margin-block: 0; }
  #audioGate { justify-content: center; }
}