/* Shared navigation only; gameplay styles and behavior stay independent. */
.desk-return {
  max-width: 1240px;
  margin: 0 auto;
  padding: env(safe-area-inset-top, 0px) 14px 0;
  position: relative;
  z-index: 2;
}
.game-back {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  padding: 8px 0;
  color: #79e7ff;
  font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
  text-decoration: none;
  touch-action: manipulation;
}
.game-back:hover { color: #eef0fa; }
.game-back:focus-visible { outline: 2px solid #79e7ff; outline-offset: 4px; }
.ovin > .game-back { margin-bottom: 12px; }

/* The return row and game share ONE visible viewport, never two stacked heights. */
:root { --desk-height: 100dvh; --desk-top: 0px; }
.desk-game:not(.desk-game--risk-desk) {
  top: var(--desk-top);
  bottom: auto;
  height: var(--desk-height);
  display: flex;
  flex-direction: column;
}
.desk-return { flex: 0 0 auto; width: 100%; }
.desk-game:not(.desk-game--risk-desk) > .app {
  height: auto;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  padding-top: 8px;
  overflow-y: auto;
}
.desk-game .ov {
  top: var(--desk-top);
  bottom: auto;
  height: var(--desk-height);
}
.desk-game .game-result-copy {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
.desk-game--wait-for-it .sheet {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}
.desk-game--wait-for-it .sheet .roast { flex: none; }
.desk-game .next { flex-shrink: 0; min-height: 44px; }
@media (max-width: 899px) {
  .desk-game .hook { padding-block: 6px; }
  .desk-game--wait-for-it .chartCard { min-height: 140px; }
  .desk-game--wait-for-it .sheet {
    max-height: calc(var(--desk-height) - 72px - env(safe-area-inset-top, 0px));
    padding: 16px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .desk-game--confirmation-desk .chart,
  .desk-game--long-or-short .chart { min-height: 120px; }
  .desk-game .deck { flex-shrink: 0; }
  .desk-game .verdict {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    max-height: min(calc(var(--desk-height) * .60), calc(var(--desk-height) - 280px));
    overflow: hidden;
  }
  .desk-game .game-result-copy .roast { margin-bottom: 10px; }
  .desk-game .foot { padding-top: 6px; flex-shrink: 0; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .desk-game .hook { display: none; }
}
@media (max-width: 919px) {
  /* The order form needs scrolling; a pinned chart must not cover its results. */
  .desk-game--risk-desk .chartCard {
    position: relative;
    top: auto;
    height: calc(var(--desk-height) * .28);
    min-height: 160px;
    max-height: 280px;
    z-index: 1;
  }
  .desk-game--risk-desk #result { scroll-margin-top: 88px; }
  .desk-game--risk-desk #result.on {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    max-height: calc(var(--desk-height) - 112px - env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }
  .desk-game--risk-desk .app { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}