/* SCRIPTNIGHT // VIEWPORT-CONTAINED GAME MODE SELECTORS */
html.js:not(.is-playing) {
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

html.js:not(.is-playing) body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

html.js:not(.is-playing) .grid-shell {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

html.js:not(.is-playing) .grid-main {
  height: 100%;
  min-height: 0;
  padding-top: clamp(14px, 2.4vh, 30px);
  padding-bottom: clamp(14px, 2.4vh, 30px);
  overflow: hidden;
  align-items: stretch;
}

html.js:not(.is-playing) .mode-screen {
  height: 100%;
  min-height: 0;
  align-content: center;
  gap: clamp(12px, 2vh, 22px);
  overflow: hidden;
}

html.js:not(.is-playing) .mode-back {
  min-height: 34px;
  margin-bottom: clamp(8px, 1.3vh, 14px);
}

html.js:not(.is-playing) .grid-eyebrow {
  margin-bottom: clamp(7px, 1.1vh, 11px);
}

html.js:not(.is-playing) .mode-heading {
  max-width: 920px;
}

html.js:not(.is-playing) .mode-heading h1 {
  font-size: clamp(3rem, min(8.2vw, 10.5vh), 7.5rem);
  line-height: 0.84;
}

html.js:not(.is-playing) .mode-heading > p:last-child {
  max-width: 800px;
  margin-top: clamp(10px, 1.6vh, 16px);
  font-size: clamp(0.78rem, min(1.25vw, 1.8vh), 1rem);
  line-height: 1.5;
}

html.js:not(.is-playing) .mode-selector {
  min-height: 0;
  gap: clamp(10px, 1.4vw, 16px);
}

html.js:not(.is-playing) .mode-card {
  min-height: clamp(220px, 32vh, 295px);
  gap: clamp(12px, 1.8vh, 18px) clamp(14px, 1.4vw, 20px);
  padding: clamp(15px, 2.2vh, 26px);
}

html.js:not(.is-playing) .mode-copy h2 {
  margin-top: clamp(6px, 1.1vh, 10px);
  margin-bottom: clamp(6px, 1.1vh, 11px);
}

html.js:not(.is-playing) .mode-copy p {
  line-height: 1.5;
}

html.js:not(.is-playing) .mode-copy label {
  margin-top: clamp(8px, 1.6vh, 16px);
}

html.js:not(.is-playing) .mode-copy select {
  margin-top: 6px;
}

html.js:not(.is-playing) .mode-action {
  min-height: clamp(42px, 5.6vh, 49px);
}

html.js:not(.is-playing) .mode-note {
  margin-top: 0;
}

@media (max-width: 820px) {
  html.js:not(.is-playing) .grid-main {
    padding-top: clamp(10px, 1.8vh, 18px);
    padding-bottom: clamp(10px, 1.8vh, 18px);
    align-items: stretch;
  }

  html.js:not(.is-playing) .mode-screen {
    gap: clamp(8px, 1.5vh, 14px);
  }

  html.js:not(.is-playing) .mode-back {
    min-height: 32px;
    margin-bottom: 7px;
    padding-inline: 11px;
  }

  html.js:not(.is-playing) .grid-eyebrow {
    margin-bottom: 7px;
    font-size: 0.62rem;
  }

  html.js:not(.is-playing) .mode-heading h1 {
    font-size: clamp(2.7rem, min(16vw, 9.5vh), 4.8rem);
    line-height: 0.84;
  }

  html.js:not(.is-playing) .mode-heading > p:last-child {
    margin-top: 8px;
    font-size: 0.76rem;
    line-height: 1.42;
  }

  html.js:not(.is-playing) .mode-selector {
    gap: clamp(6px, 1.1vh, 10px);
  }

  html.js:not(.is-playing) .mode-card {
    min-height: 0;
    grid-template-columns: 32px 1fr 46px;
    gap: 9px;
    padding: clamp(9px, 1.4vh, 14px);
  }

  html.js:not(.is-playing) .mode-copy h2 {
    margin: 3px 0 5px;
    font-size: clamp(0.86rem, 3.5vw, 1.1rem);
  }

  html.js:not(.is-playing) .mode-copy p {
    font-size: 0.66rem;
    line-height: 1.38;
  }

  html.js:not(.is-playing) .mode-copy label {
    margin-top: 7px;
    font-size: 0.53rem;
  }

  html.js:not(.is-playing) .mode-copy select {
    min-height: 38px;
    margin-top: 4px;
    font-size: 0.62rem;
  }

  html.js:not(.is-playing) .mode-action {
    width: 46px;
    min-width: 46px;
    min-height: 42px;
  }

  html.js:not(.is-playing) .mode-note {
    font-size: 0.58rem;
    line-height: 1.4;
  }
}

@media (max-height: 700px) {
  html.js:not(.is-playing) .grid-main {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  html.js:not(.is-playing) .mode-screen {
    gap: 8px;
  }

  html.js:not(.is-playing) .mode-heading > p:last-child,
  html.js:not(.is-playing) .mode-copy p {
    display: none;
  }

  html.js:not(.is-playing) .mode-card {
    min-height: 0;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  html.js:not(.is-playing) .mode-copy label {
    margin-top: 6px;
  }

  html.js:not(.is-playing) .mode-note {
    font-size: 0.55rem;
  }
}

@media (orientation: landscape) and (max-height: 540px) {
  html.js:not(.is-playing) .grid-header {
    min-height: 46px;
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: 6px;
  }

  html.js:not(.is-playing) .grid-footer {
    display: none;
  }

  html.js:not(.is-playing) .grid-main {
    padding: 4px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
  }

  html.js:not(.is-playing) .mode-screen {
    grid-template-columns: minmax(175px, 0.72fr) minmax(0, 1.28fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
  }

  html.js:not(.is-playing) .mode-heading {
    grid-row: 1 / 3;
    align-self: center;
  }

  html.js:not(.is-playing) .mode-back {
    min-height: 28px;
    margin-bottom: 5px;
    font-size: 0.5rem;
  }

  html.js:not(.is-playing) .grid-eyebrow {
    margin-bottom: 5px;
    font-size: 0.5rem;
  }

  html.js:not(.is-playing) .mode-heading h1 {
    font-size: clamp(2.6rem, min(13vw, 20vh), 5rem);
  }

  html.js:not(.is-playing) .mode-selector {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  html.js:not(.is-playing) .mode-card {
    grid-template-columns: 25px 1fr 38px;
    padding: 5px 8px;
    gap: 6px;
    border-radius: 2px 10px 2px 10px;
  }

  html.js:not(.is-playing) .mode-index {
    font-size: 0.72rem;
  }

  html.js:not(.is-playing) .mode-copy > span,
  html.js:not(.is-playing) .mode-copy label,
  html.js:not(.is-playing) .mode-copy p {
    display: none;
  }

  html.js:not(.is-playing) .mode-copy h2 {
    margin: 0;
    font-size: 0.72rem;
  }

  html.js:not(.is-playing) .mode-copy select {
    min-height: 30px;
    margin-top: 3px;
    padding-left: 7px;
    font-size: 0.5rem;
  }

  html.js:not(.is-playing) .mode-action {
    width: 38px;
    min-width: 38px;
    min-height: 36px;
  }

  html.js:not(.is-playing) .mode-note {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.46rem;
    text-align: right;
  }
}

/* An exceptionally short or heavily zoomed display keeps every control
   reachable inside the main panel without returning the document to scrolling. */
@media (max-height: 320px) {
  html.js:not(.is-playing) .grid-main {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html.js:not(.is-playing) .mode-screen {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
}