/* Fit the full 8×8 board inside the iframe without scrolling */
html,
body {
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  padding: clamp(6px, 1.2vw, 12px);
  box-sizing: border-box;
}

.shell {
  height: 100%;
  min-height: 0 !important;
  max-height: 100%;
  overflow: hidden;
}

.hud {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
}

.stage {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  align-items: center;
}

.parcel-scene {
  height: 100%;
  max-height: 100%;
  align-items: center;
}

.parcel-stack {
  max-height: 100%;
}

.box {
  max-height: 100%;
}

.box__cavity {
  max-height: 100%;
  padding-bottom: 14px;
}

.box__playfield {
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid {
  width: auto;
  height: min(580px, 100%);
  max-height: 100%;
  max-width: min(580px, calc(100% - 8px), calc(100vw - 280px));
  aspect-ratio: 1;
  box-sizing: border-box;
}

@media (max-width: 840px) {
  .shell {
    height: 100%;
  }

  .hud {
    max-height: min(38vh, 280px);
    flex-shrink: 0;
  }

  .brand__logo {
    max-height: 52px;
    width: auto;
  }

  .brand__sub,
  .motivation-loop,
  .hint.hint--controls {
    display: none;
  }

  .grid {
    max-width: min(100%, 92vw);
    width: min(92vw, 100%);
    height: auto;
    max-height: 100%;
  }
}