.nl-harmony-module .section,
.nl-harmony-module .module-panel {
  border: 1px solid var(--nl-color-line);
  border-radius: var(--nl-radius-panel);
  background: var(--nl-color-surface);
  box-shadow: var(--nl-shadow-panel);
}

.nl-harmony-module .nl-exercise-layout {
  width: 100%;
  min-width: 0;
}

.nl-harmony-module .notation,
.nl-harmony-module [data-notation-host] {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: clip;
  contain: layout paint;
}

.nl-harmony-module .notation svg,
.nl-harmony-module [data-notation-host] svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin-inline: auto;
  overflow: visible;
}

.nl-harmony-module .answers,
.nl-harmony-module .correction-stage,
.nl-harmony-module .action-slot { min-width: 0; max-width: 100%; }

.nl-harmony-module .action-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.nl-harmony-module .action-slot .primary-action { min-width: min(230px, 100%); }

@media (min-width: 761px) and (min-height: 621px) {
  .nl-module-chiffrage-accords:has(#game.show) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  .nl-harmony-module .section,
  .nl-harmony-module .module-panel { padding: 8px 12px; }

  .nl-module-accords:has(#game.show), .nl-module-cadences:has(#game.show) {
    height: 100dvh; min-height: 0; overflow: hidden; padding: 6px 8px;
  }
  .nl-module-accords:has(#game.show) > main, .nl-module-cadences:has(#game.show) > main {
    display: flex; height: calc(100dvh - 12px); min-height: 0; flex-direction: column;
  }
  .nl-module-accords:has(#game.show) .module-titlebar, .nl-module-cadences:has(#game.show) .module-titlebar {
    flex: 0 0 46px; min-height: 46px; margin-bottom: 6px; padding-block: 5px;
  }
  .nl-module-accords:has(#game.show) .module-panel, .nl-module-cadences:has(#game.show) .module-panel {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
  }
  .nl-module-accords #game.show, .nl-module-cadences #game.show {
    display: grid !important; height: calc(100% - 10px); min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 44px 28px minmax(0, 1fr); column-gap: 12px;
  }
  .nl-module-accords #game > .game-mode-nav, .nl-module-cadences #game > .game-mode-nav {
    grid-column: 1 / -1; grid-row: 1; min-height: 40px; margin: 0; padding-bottom: 4px;
  }
  .nl-module-accords #game > .topbar, .nl-module-cadences #game > .topbar {
    grid-column: 1 / -1; grid-row: 2; min-height: 24px; margin: 0;
  }
  .nl-module-accords #game > h2, .nl-module-cadences #game > h2 {
    grid-column: 1; grid-row: 3; align-self: start; margin: 2px 0; font-size: 1.25rem;
  }
  .nl-module-accords #game > .correction-stage, .nl-module-cadences #game > .correction-stage {
    grid-column: 2; grid-row: 3; align-self: stretch; height: 100%; min-height: 0;
    padding-top: 0; grid-template-rows: minmax(0, 1fr) 28px 42px;
  }
  .nl-module-accords #game .visual-answer, .nl-module-cadences #game .visual-answer {
    min-height: 0; height: auto; padding: 5px; overflow: hidden;
  }
  .nl-module-accords #game .visual-answer .notation, .nl-module-cadences #game .visual-answer .notation { height: 104px; }
  .nl-module-accords #game .visual-answer .notation svg, .nl-module-cadences #game .visual-answer .notation svg { height: 100% !important; }
  .nl-module-accords #game .feedback, .nl-module-cadences #game .feedback { min-height: 28px; padding: 3px; }
  .nl-module-accords #game .action-slot, .nl-module-cadences #game .action-slot { min-height: 42px; }
  .nl-module-accords #game .action-slot button, .nl-module-cadences #game .action-slot button { min-height: 36px; padding-block: 6px; }
  .nl-module-accords #game > .answers, .nl-module-cadences #game > .answers { gap: 6px; }
  .nl-module-accords #game > .answers button, .nl-module-cadences #game > .answers button { min-height: 38px; padding-block: 7px; }

  .nl-module-accords #game > .game-notation-row { grid-column: 1; grid-row: 3; align-self: start; margin-top: 34px; }
  .nl-module-accords #game > .given-root-slot { grid-column: 1; grid-row: 3; align-self: start; margin-top: 78px; }
  .nl-module-accords #game > .hud { grid-column: 1; grid-row: 3; align-self: start; margin-top: 108px; }
  .nl-module-accords #game > .listen-row { grid-column: 1; grid-row: 3; align-self: start; margin-top: 106px; }
  .nl-module-accords #game > .answers { grid-column: 1; grid-row: 3; align-self: end; margin: 0; }

  .nl-module-cadences #game > .hud { grid-column: 1; grid-row: 3; align-self: start; margin-top: 36px; }
  .nl-module-cadences #game > .listen-row { grid-column: 1; grid-row: 3; align-self: start; margin-top: 54px; }
  .nl-module-cadences #game > .answers { grid-column: 1; grid-row: 3; align-self: end; margin: 0; }
}