/* V58: larger strategic choices, one legible shift action, and a clear next-run goal. */

/* Desktop contract drafting: three readable cards inside the painted board. */
@media (min-width: 721px) and (min-height: 500px) {
  #contractDraftModal .contract-modal-card {
    width: min(96vw, 1120px);
    height: auto !important;
    max-height: calc(100dvh - 20px);
    aspect-ratio: 960 / 450;
    box-sizing: border-box;
    padding: 18px 44px 6px;
    grid-template-rows: auto auto minmax(0, 1fr) 44px;
    align-content: center;
    gap: 2px;
    overflow: hidden;
  }

  #contractDraftModal .contract-draft-lead {
    margin: 0 0 2px;
    font-size: 12px;
    line-height: 1.2;
  }

  #contractDraftModal .contract-scroll-hint {
    display: none !important;
  }

  #contractDraftModal .contract-choices {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, clamp(188px, 23.5vw, 220px)));
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.5vw, 18px);
    overflow: visible;
  }

  #contractDraftModal .contract-choice {
    width: 100%;
    max-width: 220px;
    min-width: 0;
    margin: 0;
  }

  #contractDraftModal .contract-choice strong {
    font-size: 17px;
  }

  #contractDraftModal .contract-choice .contract-route {
    font-size: 12px;
    line-height: 1.1;
  }

  #contractDraftModal .contract-choice .contract-effect,
  #contractDraftModal .contract-choice .effect-main,
  #contractDraftModal .contract-choice .effect-note,
  #contractDraftModal .contract-choice .effect-label {
    font-size: 12px;
    line-height: 1.2;
  }

  #contractDraftModal .contract-choice .contract-effect {
    grid-template-columns: 32px minmax(0, 1fr);
    padding-inline: 5px;
    gap: 3px;
  }

  #contractDraftModal .contract-confirm {
    position: static;
    align-self: end;
    justify-self: center;
    width: min(210px, 100%);
    height: 44px;
    min-height: 44px;
    margin: 0 auto;
    padding: 7px 30px;
    aspect-ratio: auto;
    font-size: 13px;
    line-height: 1.1;
  }

  /* The current act is an action sentence, not a decorative sub-caption. */
  .game-shell.phase-playing .shift-brief,
  .game-shell.phase-training .shift-brief {
    width: min(380px, calc(100% - 310px));
    height: 40px;
    min-height: 40px;
    padding: 5px 34px 6px;
    grid-template-columns: 42px minmax(0, 1fr) 36px;
    grid-template-rows: 23px 3px;
    gap: 1px 7px;
  }

  .game-shell.phase-playing .hud-subline .shift-copy,
  .game-shell.phase-training .hud-subline .shift-copy {
    gap: 6px;
  }

  .game-shell.phase-playing .hud-subline .shift-copy strong,
  .game-shell.phase-training .hud-subline .shift-copy strong {
    font-size: 12px;
    line-height: 1;
  }

  .game-shell.phase-playing .hud-subline .shift-copy > span:not(.stage-reward),
  .game-shell.phase-training .hud-subline .shift-copy > span:not(.stage-reward) {
    font-size: 10px;
    line-height: 1;
  }

  .game-shell.phase-playing .hud-subline .shift-count,
  .game-shell.phase-training .hud-subline .shift-count {
    font-size: 11px;
  }

  /* Star Tide uses the lower visual centre and fills the decision board. */
  #starTideModal .star-tide-card {
    width: min(92vw, 980px);
    max-height: calc(100dvh - 24px);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: 6px;
    transform: translateY(clamp(22px, 4vh, 38px));
  }

  #starTideModal .star-tide-card h2 {
    margin-bottom: 0;
  }

  #starTideModal .star-tide-card > p {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.2;
  }

  #starTideModal .event-choices {
    width: 100%;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    transform: none;
  }

  #starTideModal .event-choice {
    width: 100%;
    min-width: 0;
    min-height: 96px;
    padding-top: 14px;
    padding-bottom: 13px;
  }

  #starTideModal .event-choice strong {
    font-size: 16px;
    line-height: 1.1;
  }

  #starTideModal .event-choice span {
    max-width: none;
    font-size: 12px;
    line-height: 1.2;
  }
}

/* Result hierarchy: one short, actionable reason to play the next shift. */
.result-next-goal {
  order: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  margin: 2px 0;
  padding: 7px 10px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-block: 1px solid rgb(137 84 58 / 36%);
  background: linear-gradient(90deg, transparent, rgb(229 189 105 / 18%) 18% 82%, transparent);
  color: #6b3040;
  font: 900 12px/1.15 var(--ui);
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px #fff0c7;
  white-space: nowrap;
}

.result-next-goal:empty,
.result-next-goal[hidden] {
  display: none !important;
}

/* A 721–820px canvas cannot hold 205px cards; scale the physical cards as a
   set instead of allowing one edge to be clipped. */
@media (min-width: 721px) and (max-width: 820px) and (min-height: 500px) {
  #contractDraftModal .contract-modal-card {
    padding-inline: 34px;
  }

  #contractDraftModal .contract-choices {
    grid-template-columns: repeat(3, minmax(0, 154px));
    gap: 8px;
  }

  #contractDraftModal .contract-choice {
    width: 154px;
    max-width: 154px;
  }

  #contractDraftModal .contract-confirm { margin-top: 5px; }

  #contractDraftModal .contract-choice strong { font-size: 14px; }
  #contractDraftModal .contract-choice .contract-route { font-size: 10px; }
  #contractDraftModal .contract-choice .contract-effect,
  #contractDraftModal .contract-choice .effect-main,
  #contractDraftModal .contract-choice .effect-note,
  #contractDraftModal .contract-choice .effect-label {
    font-size: 11px;
    line-height: 1.1;
  }
}

/* Portrait keeps one full contract card per horizontal snap and stacks events. */
@media (max-width: 720px) and (orientation: portrait) {
  #contractDraftModal .contract-modal-card {
    width: min(96vw, 390px);
    height: min(calc(100svh - 10px), 581px) !important;
    max-height: calc(100svh - 10px);
    aspect-ratio: 466 / 581;
    padding: 48px 42px 30px;
    grid-template-rows: auto auto auto minmax(0, 1fr) 44px;
    gap: 2px;
    overflow: hidden;
  }

  #contractDraftModal .contract-draft-lead {
    margin: 0 !important;
    font-size: 10px;
  }

  #contractDraftModal .contract-scroll-hint {
    display: block !important;
    margin: 0 !important;
    font-size: 9px;
  }

  #contractDraftModal .contract-choices {
    width: 100%;
    min-height: 0;
    padding: 0 18px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 205px);
    grid-auto-flow: column;
    justify-content: start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
  }

  #contractDraftModal .contract-choice {
    width: 205px;
    max-width: 205px;
    scroll-snap-align: start;
  }

  #contractDraftModal .contract-choice .contract-effect,
  #contractDraftModal .contract-choice .effect-main,
  #contractDraftModal .contract-choice .effect-note,
  #contractDraftModal .contract-choice .effect-label {
    font-size: 12px;
    line-height: 1.18;
  }

  #contractDraftModal .contract-confirm {
    width: min(180px, 100%);
    height: 44px;
    min-height: 44px;
    margin: 0 auto;
    padding: 7px 22px;
    aspect-ratio: auto;
  }

  #starTideModal .star-tide-card {
    width: min(92vw, 350px);
    max-height: calc(100svh - 20px);
    padding: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: center;
    gap: 6px;
    transform: translateY(12px);
  }

  #starTideModal .event-choices {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: visible;
  }

  #starTideModal .event-choice {
    width: 100%;
    min-height: 92px;
    padding-top: 12px;
    padding-bottom: 11px;
  }

  #starTideModal .event-choice strong { font-size: 15px; }
  #starTideModal .event-choice span { max-width: none; font-size: 12px; line-height: 1.16; }

  .result-next-goal {
    min-height: 30px;
    padding: 6px 7px 5px;
    font-size: 11px;
  }
}

/* Short landscape preserves the three-way comparison without stealing play height. */
@media (max-height: 430px) and (orientation: landscape) {
  #contractDraftModal .contract-modal-card {
    width: min(96vw, 816px);
    height: auto !important;
    max-height: calc(100dvh - 10px);
    aspect-ratio: 960 / 450;
    padding: 16px 38px 10px;
    grid-template-rows: auto minmax(0, 1fr) 44px;
    gap: 1px;
  }

  #contractDraftModal .contract-modal-card > p,
  #contractDraftModal .contract-scroll-hint {
    display: none !important;
  }

  #contractDraftModal .contract-choices {
    grid-template-columns: repeat(3, minmax(0, 180px));
    gap: 8px;
    overflow: visible;
  }

  #contractDraftModal .contract-choice {
    width: 180px;
    max-width: 180px;
  }

  #contractDraftModal .contract-choice strong { font-size: 15px; }
  #contractDraftModal .contract-choice .contract-route { font-size: 11px; }
  #contractDraftModal .contract-choice .contract-effect,
  #contractDraftModal .contract-choice .effect-main,
  #contractDraftModal .contract-choice .effect-note,
  #contractDraftModal .contract-choice .effect-label {
    font-size: 12px;
    line-height: 1.12;
  }

  #contractDraftModal .contract-confirm {
    width: 176px;
    height: 44px;
    min-height: 44px;
    margin: 0 auto;
    padding: 6px 18px;
  }

  .game-shell.phase-playing .shift-brief,
  .game-shell.phase-training .shift-brief {
    width: min(340px, calc(100% - 280px));
    height: 30px;
    min-height: 30px;
    padding: 3px 24px 4px;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    grid-template-rows: 18px 3px;
  }

  .game-shell.phase-playing .hud-subline .shift-copy strong,
  .game-shell.phase-training .hud-subline .shift-copy strong { font-size: 10px; }
  .game-shell.phase-playing .hud-subline .shift-copy > span:not(.stage-reward),
  .game-shell.phase-training .hud-subline .shift-copy > span:not(.stage-reward) { font-size: 8px; }

  #starTideModal .star-tide-card {
    width: min(94vw, 760px);
    max-height: calc(100dvh - 12px);
    padding: 0;
    gap: 2px;
    transform: translateY(8px);
  }

  #starTideModal .star-tide-card > p { display: none; }

  #starTideModal .event-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  #starTideModal .event-choice {
    min-height: 84px;
    padding-top: 11px;
    padding-bottom: 10px;
  }

  #starTideModal .event-choice strong { font-size: 14px; }
  #starTideModal .event-choice span { max-width: none; font-size: 12px; line-height: 1.12; }

  .result-next-goal {
    min-height: 28px;
    margin-block: 1px;
    padding: 5px 7px 4px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #starTideModal .star-tide-card {
    transition: none !important;
  }
}