/* GX Food Navigator v9.7 — one interaction language across setup, play, events and results. */
:root {
  --game-control-height: 46px;
  --game-control-radius: 12px;
  --game-card-radius: 16px;
  --game-focus: #d8ff72;
  --game-action: #176244;
  --game-action-hover: #0f4c34;
  --game-help-bg: #f3f8e8;
  --game-help-line: #98bd4e;
  --game-soft-line: #cfdbd1;
}

/* 1. Every interactive control has the same readable, touch-safe baseline. */
.title-screen :is(button, input),
.play-screen button,
.result-screen :is(button, input),
dialog button,
.game-footer :is(button, a) {
  font-size: max(15px, 0.9rem);
}

.title-screen button:not(.start-game-button),
.play-screen button:not(#returnToTitle),
.result-screen button,
dialog button,
.game-footer :is(button, a) {
  min-height: var(--game-control-height);
  border-radius: var(--game-control-radius);
}

/* 2. Primary and supporting actions keep the same visual rank on every screen. */
:is(.continue-button, #scoreForm button, #openArcadeWindow, #confirmNavigatorExit, .pending-council-card button) {
  min-height: 48px;
  padding: 10px 16px;
  color: #fff;
  background: var(--game-action);
  border: 2px solid var(--game-action);
  border-radius: var(--game-control-radius);
  font-weight: 900;
  line-height: 1.35;
}

:is(.continue-button, #scoreForm button, #openArcadeWindow, #confirmNavigatorExit, .pending-council-card button):hover {
  background: var(--game-action-hover);
  border-color: var(--game-action-hover);
}

:is(.hint-toggle, .open-detailed-setup, .result-actions button, .arcade-actions button, #cancelNavigatorExit, .leaderboard-filters button, [data-refresh-leaderboard]) {
  min-height: var(--game-control-height);
  padding: 9px 14px;
  color: #174c37;
  background: #fff;
  border: 2px solid #9fb7a6;
  border-radius: var(--game-control-radius);
  font-weight: 850;
}

:is(.hint-toggle, .open-detailed-setup, .result-actions button, .arcade-actions button, #cancelNavigatorExit, .leaderboard-filters button, [data-refresh-leaderboard]):hover {
  background: #f1f7ef;
  border-color: var(--game-action);
}

.start-game-button {
  border: 3px solid transparent;
}

.start-game-button:hover {
  border-color: var(--forest-700);
  transform: translateY(-2px);
}

#returnToTitle,
.dialog-close,
[data-close-dialog] {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  place-content: center;
}

/* 3. Selected means the same thing in setup, recommendations and council votes. */
:is(.setup-mode-card[aria-pressed="true"], .select-card[aria-pressed="true"], .enterprise-options button[aria-selected="true"], #cropRecommendationGuide article.selected, #councilResolutionOptions article.selected) {
  border-color: var(--game-focus) !important;
  box-shadow: 0 0 0 3px #176244, 0 10px 24px rgba(15, 76, 52, 0.18) !important;
}

:is(.setup-mode-card, .select-card, .enterprise-options button, #cropRecommendationGuide article, #councilResolutionOptions article) {
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

/* 4. Hints and explanations share one calm, recognisable treatment. */
:is(#setupModeExplanation, .decision-help, .choice-explainer, .event-scenario-purpose, .recommendation-hint-note, #councilHintNote, .navigator-exit-boundary, .board-note, .arcade-boundary) {
  color: #294a3a;
  background: var(--game-help-bg);
  border: 1px solid #d6e4b8;
  border-left: 5px solid var(--game-help-line);
  border-radius: 10px;
  font-size: max(15px, 0.9rem);
  line-height: 1.65;
}

.decision-help,
.recommendation-hint-note {
  margin: 10px 12px 0;
  padding: 10px 13px;
}

.choice-explainer,
.event-scenario-purpose,
.navigator-exit-boundary,
.board-note,
.arcade-boundary {
  padding: 12px 14px;
}

/* 5. Decision cards never crop their explanation or make a link look like the choice. */
.action-options {
  min-height: 0;
  grid-template-rows: none;
}

.action-card {
  min-height: 0;
  overflow: visible;
  border-color: var(--game-soft-line);
  border-radius: var(--game-card-radius);
}

.action-card-buttons {
  align-items: stretch;
}

.action-card-buttons :is(a, button) {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.action-card-buttons a {
  color: #176244;
  background: #f4f8f3;
  border: 2px solid #c6d5c9;
  border-radius: var(--game-control-radius);
  font-weight: 850;
}

.action-card-buttons a:hover {
  background: #eaf3e7;
  border-color: #789b82;
}

/* 6. All modal moments use the same frame and scroll behaviour. */
dialog {
  width: min(960px, calc(100vw - 28px));
  max-height: min(90vh, 900px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(6, 29, 21, 0.32);
}

dialog::backdrop {
  background: rgba(6, 29, 21, 0.72);
  backdrop-filter: blur(3px);
}

:is(.event-dialog-card, .arcade-dialog-card, .navigator-exit-card, .evidence-dialog-card, .leaderboard-panel) {
  border-radius: 20px;
}

:is(.event-dialog-card, .arcade-dialog-card, .navigator-exit-card, .evidence-dialog-card, .leaderboard-panel) > :is(header, p:first-child) {
  scroll-margin-top: 16px;
}

/* 7. Keyboard, disabled and reduced-motion states are consistent and visible. */
:is(button, a, input, summary):focus-visible {
  outline: 3px solid var(--game-focus) !important;
  outline-offset: 3px;
}

:is(button, input)[disabled],
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  filter: saturate(0.45);
}

@media (max-width: 720px) {
  .action-card-buttons {
    display: grid;
    grid-template-columns: 1fr;
  }

  .action-card-buttons :is(a, button),
  .result-actions :is(a, button) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* Guided choice and mistake recovery share the same compact command bar. */
.decision-tools .recommended-choice,
.decision-tools .undo-choice {
  min-height: 40px;
  padding: 7px 11px;
  border: 1px solid rgba(23, 74, 55, .25);
  border-radius: 11px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.decision-tools .recommended-choice {
  background: #dfff78;
  color: #173d2d;
}

.decision-tools .undo-choice {
  background: #fff;
  color: #315849;
}

.decision-tools .recommended-choice span,
.decision-tools .undo-choice span { margin-right: 4px; }

@media (max-width: 900px) {
  .decision-tools .recommended-choice b,
  .decision-tools .undo-choice b { font-size: 14px; }
}

/* The irreversible plan choice is visually distinct from scores, cards and supporting links. */
.action-card-buttons button {
  background: linear-gradient(135deg, #c64a18, #9f310f);
  border-color: #7d250c;
}

.action-card-buttons button:hover {
  background: linear-gradient(135deg, #d65a22, #ae3812);
  border-color: #7d250c;
}