/* Viewport-only layout overrides kept separate from the restored UI theme. */
.status {
  min-height: 2.5em;
}

.status strong,
.status small {
  min-height: 1.25em;
  line-height: 1.25;
}

/* Independent Libre Arcade palette: intentionally distinct from commercial sets. */
.board {
  background: linear-gradient(145deg, #5b45aa, #34266f);
  box-shadow: inset 0 -8px 0 #241b55, 0 12px 25px #2f24502e;
}

.cell { box-shadow: inset 0 5px 9px #2b20564d; }
.cell.p1 { background: radial-gradient(circle at 35% 30%, #ffacd0, #e9488b 55%, #9f245e); }
.cell.p2 { background: radial-gradient(circle at 35% 30%, #b8fff7, #38c6bd 55%, #187d7b); }
.technical-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.technical-actions button { width: 100%; }
.difficulty-body p { margin: .2rem 0 .55rem; color: #526176; font-size: .82rem; }

body[data-screen="menu"] {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body[data-screen="menu"] .shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body[data-screen="menu"] header { flex: 0 0 auto; }

body[data-screen="menu"] .setup-screen {
  flex: 1;
  min-height: 0;
  width: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
}

body[data-screen="menu"] .setup-card { max-height: 100%; }

@media (max-height: 720px) {
  body[data-screen="menu"] .shell { padding: 12px 20px; }
  body[data-screen="menu"] header { padding-bottom: 8px; }
  body[data-screen="menu"] header h1 { font-size: 1.5rem; }
  body[data-screen="menu"] nav button { padding: .48rem .62rem; }
  body[data-screen="menu"] .setup-screen { padding: 8px 0 0; }
  body[data-screen="menu"] .setup-card { padding: 14px 24px; border-radius: 16px; }
  body[data-screen="menu"] .setup-mark { font-size: 2rem; }
  body[data-screen="menu"] .setup-card h2 { font-size: 1.55rem; margin: .05rem 0; }
  body[data-screen="menu"] .setup-card > p { margin: .1rem 0 .65rem; font-size: .88rem; }
  body[data-screen="menu"] .setup-form { gap: 4px; }
  body[data-screen="menu"] .setup-form label { font-size: .72rem; margin-top: 2px; }
  body[data-screen="menu"] .setup-form select,
  body[data-screen="menu"] .setup-form button { padding: .48rem .65rem; }
  body[data-screen="menu"] .play-button { margin-top: 5px; }
  body[data-screen="menu"] .secondary-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 8px;
    padding-top: 8px;
  }
  body[data-screen="menu"] .secondary-menu button { padding: .34rem .38rem; font-size: .7rem; }
  body[data-screen="menu"] .app-footer { margin-top: 5px; font-size: .66rem; }
}

@media (max-height: 540px) {
  body[data-screen="menu"] .shell { padding-top: 8px; padding-bottom: 8px; }
  body[data-screen="menu"] .setup-mark,
  body[data-screen="menu"] .setup-card > p { display: none; }
  body[data-screen="menu"] .setup-card { padding: 9px 18px; }
  body[data-screen="menu"] .setup-card h2 { font-size: 1.25rem; }
  body[data-screen="menu"] .app-footer { display: none; }
}

@media (max-width: 600px) and (max-height: 720px) {
  body[data-screen="menu"] .shell { padding-left: 12px; padding-right: 12px; }
  body[data-screen="menu"] .secondary-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The status text above the board has a fixed height of two lines (see .status
   above), so it can never be overlapped as long as the board is sized from the
   space its own container really has. The fixed "100dvh - 150px" budget in
   app.css guessed the header, padding and status heights and was off by about
   10px at 1070x632. Engines without container query units keep that sizing. */
.status strong,
.status small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@supports (width: 1cqw) {
  body[data-screen="play"] .game-area { container-type: size; }
  body[data-screen="play"] .board {
    width: min(560px, 100cqw, calc((100cqh - 3.5rem) * 7 / 6));
    max-width: 100%;
    max-height: none;
  }
}

@media (max-width: 760px) {
  @supports (width: 1cqw) {
    body[data-screen="play"] .board { width: min(560px, 100cqw, calc((100cqh - 2.75rem) * 7 / 6)); }
  }
}

/* The possessive after the pig is set like the one in the header (smaller,
   bold, blue) so it reads as a lowercase "s", not as a capital next to the
   large emoji. */
.setup-mark span { font-size: .72em; font-weight: 800; color: var(--blue, #1559c4); }