/* generated from core.css by gatefall/build-root.mjs — edit the source
   sheets, then npm run build:gatefall. Import order is core.css's. */

/* --- settings.css --- */
:root {
  --text-color: #fff;
  --text-color-alt: #aaa;
  --link-color: var(--blue);
  --background-color: #000;
  --background-color-alt: #111;
  --accent-color: #4a4a4a;
  --light-red: #e06c75;
  --dark-red: #be5046;
  --green: #98c379;
  --green-rgb: 152, 195, 121;
  /* RGB values for --green */
  --light-green: #b5e890;
  --light-yellow: #e5c07b;
  --dark-yellow: #d19a66;
  --blue: #61afef;
  --magenta: #c678dd;
  --cyan: #56b6c2;
  --gutter-grey: #4b5263;
  --comment-grey: #5c6370;
  --border-thickness: 3px;
  --font-family: "SFMono-Regular", "SF Mono", "Roboto Mono", "Segoe UI Mono", monospace;
  --line-height: 1.2rem;
}

/* --- reset.css --- */
a
/*
 * Modern CSS Reset
 * @link https://github.com/hankchizljaw/modern-css-reset
*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

p,
li,
h1,
h2,
h3,
h4 {
  /* Help prevent overflow of long words/names/URLs */
  word-break: break-word;

  /* Optional, not supported for all languages */
  /* hyphens: auto; */
}

html,
body {
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100dvh;
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
}

/* Make images easier to work with */
img {
  display: block;
  max-inline-size: 100%;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: initial;
  }
}

/* --- utils.css --- */
.hidden {
  display: none;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* --- typography.css --- */
body {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: var(--line-height);
}

/* --- buttons.css --- */
button {
  font-family: var(--font-family);
  background-color: var(--background-color);
  color: var(--text-color);
  border: var(--border-thickness) solid var(--text-color);
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: var(--text-color);
  color: var(--background-color);
}

/* --- base.css --- */
body {
  color: var(--text-color);
  background-color: var(--background-color);
  margin: 0;
}

/* Links */
:where(a:not([class]):not(:has(img))) {
  color: var(--link-color, var(--color-link));

  @media (any-hover: hover) {
    &:where(:not(:active):hover) {
      --hover-filter: brightness(1.3);

      filter: var(--hover-filter);
    }
  }
}

::selection {
  background-color: var(--dark-red);
}
/* Rapid taps on action buttons were triggering iOS Safari's double-tap
   zoom mid-game. 'manipulation' keeps panning and pinch-zoom but drops the
   double-tap gesture on every tap target. */
button,
a,
select,
input,
textarea,
summary,
[role="button"],
.plot-cell {
  touch-action: manipulation;
}

/* --- start.css --- */
#game_start_screen {
  text-align: left;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 700px;

  .splash_screen {
    border: var(--border-thickness) solid var(--text-color);
  }

  header {
    border-bottom: var(--border-thickness) solid var(--text-color);
    display: flex;
    align-items: center;
    font-size: 3rem;

    .icon {
      padding: 1.5rem;
      width: 4rem;
      height: 4rem;
      color: var(--dark-red);
      border-right: var(--border-thickness) solid var(--text-color);
    }

    div {
      padding: 0 1.5rem;
    }

    h1 {
      font-size: 3rem;
      font-weight: 700;
      margin: 0;
      line-height: 1em;
      letter-spacing: -0.03em;
      text-transform: uppercase;
    }

    h2 {
      font-size: 1.2rem;
      margin: 0;
    }
  }

  /* Difficulty selection */
  section {
    text-align: center;
    display: flex;

    button {
      flex: 1;
      border: 0;
      margin: 0;
      padding: 1rem;
      border-right: var(--border-thickness) solid var(--text-color);
      position: relative;

      &:last-child {
        border-right: 0;
      }

      b {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 1.2rem;
      }

      div {
        margin-top: 0.5rem;
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: center;

        span {
          display: flex;
          align-items: center;
          gap: 0.2rem;
        }

        .icon {
          width: 1rem;
          height: 1rem;
        }
      }
    }
  }

  footer {
    border-top: var(--border-thickness) solid var(--text-color);
    text-align: center;
    padding: 0 1rem;
    font-size: 0.8rem;
  }

  @media (max-width: 100ch) {
    max-width: 90%;

    header {
      h1 {
        font-size: 1.75rem;
      }

      h2 {
        font-size: 1rem;
      }
    }

    section {
      flex-direction: column;

      button {
        border-right: none;
        border-bottom: var(--border-thickness) solid var(--text-color);
        width: 100%;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}

/* --- icons.css --- */
.icon {
  display: flex;
  align-items: center;
  justify-content: center;

  &.red,
  &.dark-red {
    color: var(--dark-red);
  }

  &.blue {
    color: var(--blue);
  }

  &.green {
    color: var(--green);
  }

  &.light-green {
    color: var(--light-green);
  }

  &.light-yellow {
    color: var(--light-yellow);
  }

  &.dark-yellow {
    color: var(--dark-yellow);
  }

  &.magenta {
    color: var(--magenta);
  }

  &.gutter-grey {
    color: var(--gutter-grey);
  }
}

/* --- shell.css --- */
#game_screen {
  margin: 1em;

  header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    border: var(--border-thickness) solid var(--text-color);

    .logo {
      display: flex;
      align-items: stretch;
      gap: 1em;
      text-transform: uppercase;
      font-size: 1em;
      font-weight: 700;
      letter-spacing: -0.05em;

      h1 {
        display: flex;
        margin: 0;
        padding: 0;
        padding-right: 1.2rem;
        align-items: center;
        border-right: var(--border-thickness) solid var(--text-color);
      }

      .icon {
        width: 3rem;
        height: 3rem;
        padding: 0.5rem;
        border-right: var(--border-thickness) solid var(--text-color);
      }
    }

    .resources {
      display: flex;
      gap: 2em;
      font-size: 1.5em;
      font-weight: 700;

      .resource {
        display: flex;
        align-items: center;
        gap: 0.2em;
      }
    }

    .time-module {
      display: flex;
      align-items: stretch;
      border-left: var(--border-thickness) solid var(--text-color);

      .time-display {
        display: flex;
        align-items: center;
        padding: 0 1.5em;
        gap: 1em;

        &.paused {
          background-color: var(--dark-red);
        }

        .day-night-indicator {
          width: 2rem;
          height: 2rem;
          border-radius: 100%;
          background-color: var(--light-yellow);
        }

        #time {
          transition: background-color 0.3s ease;
        }
      }

      .button-container {
        display: flex;
        align-items: stretch;

        button {
          border: none;
          border-left: var(--border-thickness) solid var(--text-color);
          cursor: pointer;
          font-size: 1.5em;
          padding: 0 1em;
          margin: 0;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  @media (max-width: 1100px) {
    header {
      flex-direction: column;

      .logo {
        width: 100%;
        border-bottom: var(--border-thickness) solid var(--text-color);

        h1 {
          border-right: none;
          padding-right: 0;
        }
      }

      .resources {
        width: 100%;
        justify-content: space-around;
        padding: 0.5em 0;
        gap: 0;
        border-bottom: var(--border-thickness) solid var(--text-color);
      }

      .time-module {
        width: 100%;
        border-left: none;
        flex-direction: column;

        .time-display {
          width: 100%;
          padding: 0.5em 0;
          justify-content: center;
          border-bottom: var(--border-thickness) solid var(--text-color);
        }

        .button-container {
          display: flex;
          width: 100%;

          button {
            flex: 1;
            border-left: var(--border-thickness) solid var(--text-color);
            border-top: none;
            text-align: center;
            justify-content: center;
            align-items: center;
            padding: 0.5em 0;

            &:first-child {
              border-left: none;
            }
          }
        }
      }
    }
  }

  footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    margin-top: 1em;
    font-weight: 700;
    letter-spacing: -0.05em;
    border: var(--border-thickness) solid var(--text-color);
  }
}

/* --- party.css --- */
#party-container {
  margin-top: 1em;
  margin-bottom: 1em;
  border: var(--border-thickness) solid var(--text-color);

  h2 {
    background-color: white;
    color: black;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    border-bottom: var(--border-thickness) solid var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5em;

    .lucide {
      width: 1.2em;
      height: 1.2em;
    }
  }

  #party-display {
    display: flex;
    flex-wrap: wrap;

    .person {
      flex: 1 1 33.33%;
      min-width: calc(100% / 3);
      max-width: calc(100% / 3);
      border-right: var(--border-thickness) solid var(--text-color);
      border-bottom: var(--border-thickness) solid var(--text-color);
      box-sizing: border-box;

      &:nth-child(3n) {
        border-right: 0;
      }

      &:nth-last-child(-n+3) {
        border-bottom: 0;
      }

      .person-header {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        border-bottom: var(--border-thickness) solid var(--text-color);
      }

      h3 {
        padding: 0.5em;
        display: flex;
        align-items: center;
        gap: 0.2em;
      }

      .busy-label {
        border-left: var(--border-thickness) solid var(--text-color);
        padding: 0.5em 1em;
        font-size: 0.8em;
        font-weight: 700;
        display: flex;
        align-items: center;

        &.resting {
          background-color: var(--magenta);
        }

        &.busy {
          background-color: var(--green);
        }

        &.idle {
          background-color: var(--gutter-grey);
        }

        &.dead {
          background-color: var(--dark-red);
        }
      }

      /* Specialization styles */
      .specialization {
        display: flex;
        align-items: center;
        gap: 1em;
        padding: 0;
        background-color: var(--light-grey);
        border-bottom: var(--border-thickness) solid var(--text-color);
        font-size: 0.8em;
        font-weight: 700;
        text-transform: uppercase;

        .lucide {
          width: 1.2em;
          height: 1.2em;
        }

        .specialization-description {
          font-weight: 400;
          font-size: 0.9em;
          text-transform: none;
          opacity: 0.8;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: right;
          margin-left: auto;
        }

        .specialization-select {
          display: flex;
          align-items: center;
          gap: 0.5em;
          flex: 1;
          min-width: 0;
          padding: 0.3em;
          flex-wrap: nowrap;
          justify-content: space-between;

          .specialization-left {
            display: flex;
            align-items: center;
            gap: 0.5em;
            /* Flex items floor at min-content by default; without this the
               dropdown cannot shrink and spills over the description. */
            min-width: 0;
          }

          .specialization-icon {
            margin-top: 0;
            margin-left: 0.3em;
          }

          select.specialization-dropdown {
            padding: 0.3em 0.5em;
            border: none;
            border-right: var(--border-thickness) solid var(--text-color);
            background-color: transparent;
            color: var(--text-color);
            font-family: inherit;
            font-size: 1em;
            cursor: pointer;
            text-transform: uppercase;
            font-weight: 700;
            margin: -0.5em 0.5em -0.5em -0.5em;
            height: 100%;
            /* Was min-width:200px + max-width:150px — min-width wins over
               max-width, so this pinned the select at 200px, and flex:0 0 auto
               stopped it shrinking. In a three-across party grid the card runs
               out of room around 330px and the select painted straight over the
               description ("25% more resourcBUILDERhering a…"). */
            min-width: 0;
            max-width: 11em;
            width: auto;
            flex: 0 1 auto;
            text-overflow: ellipsis;

            &:hover {
              background-color: var(--gutter-grey);
            }

            &:disabled {
              opacity: 0.5;
              cursor: not-allowed;
            }

            option {
              background-color: var(--background-color);
              color: var(--text-color);
            }
          }

          .specialization-description {
            flex: 1 1 auto;
            min-width: 0;
            margin-top: 0;
            padding-right: 0.5em;
            text-align: right;
            max-width: 50%;
          }
        }
      }

      .specialization-selection {
        padding: 0.5em;
        border-top: var(--border-thickness) solid var(--text-color);

        h4 {
          font-size: 0.8em;
          text-transform: uppercase;
          margin-bottom: 0.5em;
        }

        .specialization-buttons {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;

          .specialization-button {
            display: flex;
            align-items: center;
            gap: 0.3em;
            padding: 0.3em 0.5em;
            font-size: 0.7em;
            text-transform: uppercase;
            border: var(--border-thickness) solid var(--text-color);
            background-color: transparent;
            cursor: pointer;
            transition: background-color 0.2s ease;

            &:hover {
              background-color: var(--light-grey);
            }

            &.active {
              background-color: var(--green);
              font-weight: 700;
            }

            .lucide {
              width: 1.2em;
              height: 1.2em;
            }
          }
        }
      }
    }


    .stats-container {
      padding: 0.5em;
    }

    .stats {
      width: 100%;
      border-collapse: collapse;
      text-transform: uppercase;
      font-size: 0.7em;

      td {
        padding: 0 0.5em;
      }

      td:nth-child(2) {
        width: 100%;
      }

      td:nth-child(3) {
        text-align: right;
        white-space: nowrap;
      }

      .progress-bar {
        height: 1em;
        background-color: var(--gutter-grey);
      }

      .progress {
        height: 100%;
        transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;

        &.high {
          background-color: var(--green);
        }

        &.medium {
          background-color: var(--light-yellow);
        }

        &.low {
          background-color: var(--dark-red);
        }
      }
    }

    .traits {
      display: none;
    }

    .person-actions {
      display: flex;
      gap: 0;
      width: 100%;
      border-top: var(--border-thickness) solid var(--text-color);

      button {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-right: var(--border-thickness) solid var(--text-color);
        padding: 0.5em 0;
        margin: 0;
        flex: 1;
        gap: 0.5em;
        text-transform: uppercase;
        font-weight: 700;
        transition: opacity 0.3s ease, background-color 0.3s ease;

        span {
          font-size: 0.8em;
          display: flex;
          align-items: center;
          gap: 0.1em;
          font-weight: 400;
        }

        .lucide {
          padding: 0;
          width: 1em;
          height: 1em;
        }

        &:last-child {
          border-right: 0;
        }

        &:disabled {
          opacity: 0.5;
          background-color: var(--gutter-grey);
          cursor: not-allowed;

          &:hover {
            color: var(--text-color);
          }
        }
      }
    }

    @media (max-width: 100ch) {
      .person {
        flex: 1 1 100%;
        min-width: 100%;
        max-width: 100%;
        border-right: 0;
        border-top: var(--border-thickness) solid var(--text-color);
        border-bottom: var(--border-thickness) solid var(--text-color);
      }

      .person:nth-child(3n) {
        border-right: 0;
      }

      .person:first-child {
        border-top: 0;
      }

      .person:last-child {
        border-bottom: 0;
      }

      .specialization-buttons {
        flex-direction: row;
        flex-wrap: wrap;
      }
    }
  }
}

/* --- actions.css --- */
#actions-module {
  display: flex;
  gap: 0;
  border: var(--border-thickness) solid var(--text-color);
  border-top: 0;
  margin-bottom: 1em;
}

.action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  border: 0;
  border-right: var(--border-thickness) solid var(--text-color);
  padding: 1em;
  margin: 0;
  flex: 1;
  transition: background-color 0.3s ease;
  background-color: var(--background-color);
  color: var(--text-color);
  cursor: pointer;
}

.action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--background-color);
  color: var(--text-color);
}

.action-button:disabled:hover {
  background-color: var(--background-color);
  color: var(--text-color);
}

.action-button:last-child {
  border-right: 0;
}

.action-button .lucide {
  width: 2em;
  height: 2em;
}

.action-button span {
  font-weight: 700;
  text-transform: uppercase;
}

.action-button:hover {
  background-color: var(--text-color);
  color: var(--background-color);
}

@media (max-width: 100ch) {
  #actions-module {
    flex-direction: column;
  }

  .action-buttons {
    flex-direction: column;
  }

  .action-button {
    border-right: 0;
    border-bottom: var(--border-thickness) solid var(--text-color);
  }

  .action-button:last-child {
    border-bottom: 0;
  }
}

/* --- log.css --- */
#log-module {
  border: var(--border-thickness) solid var(--text-color);

  h2 {
    background-color: white;
    color: black;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    border-bottom: var(--border-thickness) solid var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;

    .lucide {
      width: 1.2em;
      height: 1.2em;
    }
  }

  .module-content {
    max-height: 400px;
    overflow-y: auto;
    transition: max-height 0.3s ease-out;

    &.collapsed {
      max-height: 0;
      overflow: hidden;
    }
  }
}

#log-content {
  max-height: 300px;
  overflow-y: auto;

  .log-entry {
    font-size: 0.8em;
    border-bottom: var(--border-thickness) solid var(--text-color);
    display: flex;
    align-items: stretch;

    &:last-child {
      border-bottom: none;
    }

    b {
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: var(--border-thickness) solid var(--text-color);
      padding: 0.5em;
      width: 4em;
      min-width: 4em;
      flex-shrink: 0;
    }

    > .log-entry-message {
      padding: 0.5em;
    }

    .log-entry-action {
      appearance: none;
      background: transparent;
      border: 0;
      color: inherit;
      cursor: pointer;
      display: grid;
      flex: 1;
      font: inherit;
      gap: 0.2em;
      padding: 0.5em;
      text-align: left;

      &:hover {
        background: rgb(255 255 255 / 12%);
      }

      &:focus-visible {
        outline: 2px solid currentcolor;
        outline-offset: -3px;
      }

      &:disabled {
        cursor: default;
        opacity: 0.72;
      }

      .log-entry-message {
        padding: 0;
      }

      .log-entry-action-label {
        font-family: var(--font-family);
        font-size: 0.72em;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
    }

    &.info,
    &.neutral {
      background-color: var(--gutter-grey);
    }

    &.warning {
      background-color: var(--light-yellow);
    }

    &.negative,
    &.error {
      background-color: var(--dark-red);
    }

    &.positive,
    &.success {
      background-color: var(--green);
    }

    &.whisper {
      background-color: var(--magenta);
    }

    &.tutorial {
      background-color: var(--blue);
    }
  }
}

/* --- upgrades.css --- */
#upgrades-module {
  border: var(--border-thickness) solid var(--text-color);

  h2 {
    background-color: white;
    color: black;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    border-bottom: var(--border-thickness) solid var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;

    .lucide {
      width: 1.2em;
      height: 1.2em;
    }
  }

  .module-content {
    max-height: 400px;
    overflow-y: auto;
    transition: max-height 0.3s ease-out;

    &.collapsed {
      max-height: 0;
      overflow: hidden;
    }
  }
}

#upgrades {
  .upgrade-button {
    width: 100%;
    margin: 0;
    border: 0;
    text-align: left;
    border-bottom: var(--border-thickness) solid var(--text-color);
    padding: 0.5em;

    &:last-child {
      border-bottom: none;
    }

    &.cannot-afford:hover {
      cursor: not-allowed;
      color: var(--text-color);
      background-color: transparent;
    }

    &.cannot-afford .upgrade-name .name,
    &.cannot-afford .upgrade-effect {
      opacity: 0.35;
    }

    &.purchased {
      cursor: default;
      background-color: var(--green);

      &:hover {
        color: var(--text-color);
      }
    }

    &.unavailable {
      opacity: 0.5;
      cursor: not-allowed;

      &:hover {
        background-color: transparent;
        color: var(--text-color);
      }
    }

    .purchased-label {
      font-size: 0.8em;
      font-weight: bold;
      color: var(--success-color);
      margin-top: 0.2em;
    }

    .builder-discount {
      font-size: 0.7em;
      font-weight: bold;
      color: var(--green);
      margin-top: 0.3em;
      display: flex;
      align-items: center;
      gap: 0.3em;

      &::before {
        content: '';
        display: inline-block;
        width: 0.8em;
        height: 0.8em;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2384cf9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16l4 4'/%3E%3Cpath d='M7 20h4'/%3E%3Cpath d='M11 20v-4'/%3E%3Cpath d='M4 9l3-3'/%3E%3Cpath d='M7 3h4'/%3E%3Cpath d='M11 7v4'/%3E%3Cpath d='M15 5l4 4'/%3E%3Cpath d='M19 9v4'/%3E%3Cpath d='M15 17l4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
      }
    }
  }

  .upgrade-name {
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin-bottom: 0.2em;
    justify-content: space-between;

    .name {
      display: flex;
      align-items: center;
      gap: 0.2em;
    }

    .cost {
      display: flex;
      align-items: center;
      gap: 0.2em;
      font-size: 0.8em;

      .lucide {
        width: 1em;
        height: 1em;
      }

      .discounted-cost {
        display: flex;
        align-items: center;
        gap: 0.2em;

        .original-cost {
          text-decoration: line-through;
          opacity: 0.7;
          font-size: 0.9em;
        }

        .discount-arrow {
          color: var(--green);
          font-weight: bold;
        }
      }
    }
  }

  .upgrade-effect {
    font-size: 0.8em;
  }
}

/* --- modules.css --- */
#game-modules {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#main-modules {
  flex: 1;
  display: grid;
  gap: 1rem;
  align-self: flex-start;
}

#secondary-modules {
  column-count: 1;
  column-gap: 1rem;
}

#secondary-modules>section {
  break-inside: avoid;
  margin-bottom: 1rem;
}

#main-modules>section,
#secondary-modules>section {
  border: var(--border-thickness) solid var(--text-color);
  border-radius: var(--border-radius);
}

.module-content {
  transition: max-height 0.3s ease;
  overflow: hidden;
  max-height: 1000px;
  /* Adjust this value based on your content */
}

.module-content.collapsed {
  max-height: 0;
  display: none;
}

#game-modules h2 {
  background-color: white;
  color: black;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.2em 0.5em;
  font-size: 0.8em;
  border-bottom: var(--border-thickness) solid var(--text-color);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

#game-modules h2 .lucide {
  width: 1.2em;
  height: 1.2em;
}

#game-modules h2.collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#game-modules h2.collapsible .toggle-icon {
  transition: transform 0.3s ease;
}

#game-modules h2.collapsible.collapsed .toggle-icon {
  transform: rotate(180deg);
}

.mystery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: var(--border-thickness) solid var(--text-color);
}

.mystery-content {
  padding: 1.5em;
  text-align: center;

  .icon {
    margin-bottom: 1em;

    .lucide {
      width: 3em;
      height: 3em;
    }
  }

  .title {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 0.5em;
    text-transform: uppercase;
  }

  .description {
    font-size: 0.9em;
    color: var(--text-color-alt);
    font-style: italic;
  }
}

@media (min-width: 100ch) {
  #game-modules {
    flex-direction: row;
    align-items: flex-start;
  }

  #main-modules {
    flex: 1;
    grid-template-columns: 1fr;
  }

  #secondary-modules {
    flex: 2;
    column-count: 2;
  }
}

/* --- farming.css --- */
#farming-module {
  .crop-picker {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    border-bottom: var(--border-thickness) solid var(--text-color);

    button {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      border: 0;
      padding: 0.5em;
      font-size: 0.8em;

      &:not(:first-child) {
        border-left: var(--border-thickness) solid var(--text-color);
      }

      &.active {
        background-color: var(--green);
      }

      .lucide:first-child {
        width: 1.75em;
        height: 1.75em;
        margin-right: 0.5em;
      }

      .lucide:last-child {
        width: 1em;
        height: 1em;
      }
    }
  }

  .water-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: var(--border-thickness) solid var(--text-color);

    button {
      width: 100%;
      margin: 0;
      border: 0;
      display: flex;
      flex-direction: column;
      padding: 0.5em;
      align-items: center;
      justify-content: space-between;

      div {
        display: flex;
        align-items: center;
        gap: 0.2em;

        .lucide {
          width: 1em;
          height: 1em;
        }
      }

      span {
        font-size: 0.8em;
      }
    }
  }

  .icon-wheat {
    color: var(--light-yellow);
  }

  .icon-carrot {
    color: var(--dark-yellow);
  }

  .icon-bean {
    color: var(--dark-red);
  }

  #farming-grid {
    margin: 1rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: var(--border-thickness) solid var(--text-color);

    .plot-cell {
      aspect-ratio: 1 / 1;
      border-right: 1px solid white;
      border-bottom: 1px solid white;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .lucide {
        width: 2em;
        height: 2em;
      }

      &.empty-plot {
        background-color: var(--background-color-alt);

        /* Untilled marker so empty plots read as plantable, not broken */
        &::before {
          content: "+";
          font-size: 1.4em;
          opacity: 0.25;
        }

        &:hover::before {
          opacity: 0.9;
        }
      }

      /* Page-rendered tooltip (replaces native title, which goes stale when the
         grid is re-rendered each tick while the tooltip is on screen).
         Suppressed on coarse pointers below: no hover, and the growth-progress
         label already carries the key info. */
      &[data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 0.25em);
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        font-size: 0.7em;
        padding: 2px 6px;
        z-index: 10;
        pointer-events: none;
      }

      &.empty-plot:hover,
      &.ready-to-harvest:hover {
        background-color: var(--green);
        cursor: pointer;
      }

      /* Growth stage styles */
      &.just-planted {
        background-color: var(--background-color-alt);
        opacity: 0.7;
      }

      &.quarter-grown {
        background-color: rgba(var(--green-rgb), 0.25);
      }

      &.half-grown {
        background-color: rgba(var(--green-rgb), 0.5);
      }

      &.almost-ready {
        background-color: rgba(var(--green-rgb), 0.75);
      }

      /* Growth progress indicator */
      .growth-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 0.7em;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 2px 0;
      }

      &.growing {
        &:hover {
          background-color: transparent;
          cursor: default;
        }
      }

      &.ready-to-harvest {
        .lucide {
          color: var(--green);
        }

        &:hover {
          .lucide {
            color: var(--background-color);
          }

          background-color: var(--green);
        }
      }

      /* Coarse pointers can't hover — no half-working press states. */
      @media (pointer: coarse) {
        &[data-tooltip]:hover::after {
          content: none;
        }
      }
    }
  }
}

/* --- well.css --- */
#well-module {
  .well-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  #well-progress {
    background-color: var(--gutter-grey);
    border-bottom: var(--border-thickness) solid var(--text-color);
    position: relative;

    #well-water {
      background-color: var(--blue);
      height: 3em;
      position: relative;
      width: 100%;
    }

    #well-level {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8em;
      z-index: 20;
    }
  }

  button {
    border: 0;
    margin: 0;
    padding: 1em;
  }
}

/* --- hunting.css --- */
#hunting-module {
  #hunting-area {
    background-color: var(--green);
    height: 10rem;
    overflow: hidden;
    position: relative;
  }

  .wildlife {
    position: absolute;
    cursor: crosshair;
    transition: all 0.2s;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .lucide {
      width: 2.25rem;
      height: 2.25rem;
    }
  }
}

/* --- lumbermill.css --- */
#lumber-mill-module {
  #lumber-mill-grid {
    margin: 1rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: var(--border-thickness) solid var(--text-color);

    .tree-cell {
      aspect-ratio: 1 / 1;
      border-right: 1px solid white;
      border-bottom: 1px solid white;
      cursor: default;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;

      &:nth-child(5n) {
        border-right: none;
      }

      &:nth-last-child(-n+5) {
        border-bottom: none;
      }

      .growth-indicator {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--green);
        transition: height 0.3s ease;
      }

      .lucide {
        width: 2em;
        height: 2em;
        position: relative;
        z-index: 1;
      }

      &.ready-to-harvest {
        .growth-indicator {
          background-color: var(--green);
        }

        &:hover {
          background-color: var(--green);
          cursor: pointer;

          .lucide {
            color: black;
          }
        }
      }
    }
  }
}

/* --- achievements.css --- */
#achievements-module {
  #achievements {
    display: grid;
    grid-template-columns: 1fr;
    border-top: var(--border-thickness) solid var(--text-color);

    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }
}

#achievements .achievement-item {
  padding: 0.75rem;
  border-bottom: var(--border-thickness) solid var(--text-color);
  display: flex;
  align-items: center;

  &:nth-child(even) {
    border-left: var(--border-thickness) solid var(--text-color);
  }

  &:last-child,
  &:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
  }
}

.achievement-item {
  .achievement-icon {
    margin-right: 0.5rem;
  }

  .achievement-info {
    flex: 1;
  }

  .achievement-name {
    font-weight: 700;
  }

  .achievement-description {
    font-size: 0.8em;
  }
}

.achievement-item .achievement-bonus {
  font-size: 0.75em;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--comment-grey);

  .icon {
    width: 0.85rem;
    height: 0.85rem;
  }

  &.bonus-earned {
    color: var(--light-yellow);
    font-weight: 700;
  }
}

.achievement-unlocked {
  background-color: var(--green);

  .achievement-bonus,
  .achievement-bonus.bonus-earned {
    color: var(--background-color);
  }
}

.achievement-locked {

  .achievement-name,
  .achievement-description {
    opacity: 0.5;
  }
}

/* --- watchtower.css --- */
#watchtower-module {
  .countdown {
    font-size: 1.7em;
    font-weight: 700;
    text-align: center;
  }

  .mission-available {
    text-align: center;
    border-bottom: var(--border-thickness) solid var(--text-color);
    padding: 1rem 0;
    margin: 0;
  }

  .mission-options {
    button {
      margin: 0;
      border: 0;
      padding: 0.5em 1em;
      border-bottom: var(--border-thickness) solid var(--text-color);
      width: 100%;

      &:last-child {
        border-bottom: none;
      }
    }

    .easy-mission {
      background-color: var(--green);
    }

    .medium-mission {
      background-color: var(--light-yellow);
    }

    .hard-mission {
      background-color: var(--dark-red);
    }

    div {
      font-weight: 700;
      text-transform: uppercase;
    }

    span .lucide {
      width: 1em;
      height: 1em;
    }
  }

  .mission-progress {
    padding: 1rem;
    text-align: center;

    .mission-status {
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .mission-difficulty {
      font-size: 1.2em;
      margin-bottom: 0.5rem;
    }

    .time-remaining {
      font-size: 1.1em;

      span {
        font-weight: bold;
      }
    }
  }
}

/* --- technologies.css --- */
/**
 * Technology Module Styles
 * Styling for the technology research tree system
 */

#technology-module {

  /* Module container styling */
  h2 {
    background-color: white;
    color: black;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    border-bottom: var(--border-thickness) solid var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5em;

    .lucide {
      width: 1.2em;
      height: 1.2em;
    }
  }

  /* Active research section */
  .active-research {
    border-bottom: var(--border-thickness) solid var(--text-color);
    padding: 0.8em;

    h3 {
      text-transform: uppercase;
      font-weight: 700;
      font-size: 0.9em;
      margin-bottom: 0.5em;
      display: flex;
      align-items: center;
      gap: 0.5em;

      .lucide {
        width: 1em;
        height: 1em;
        color: var(--magenta);
      }
    }

    .research-details {
      font-size: 0.8em;
      margin-bottom: 0.5em;
    }

    .progress-bar {
      height: 0.5rem;
      background-color: var(--background-color-alt);
      border: none;
      margin-bottom: 0.3em;

      .progress {
        height: 100%;
        background-color: var(--magenta);
      }
    }

    .progress-text {
      font-size: 0.7em;
      color: var(--text-color-alt);
      display: flex;
      justify-content: space-between;
    }
  }

  /* Technology category filters */
  .tech-category-filters {
    display: flex;
    border-bottom: var(--border-thickness) solid var(--text-color);

    button {
      flex: 1;
      background-color: transparent;
      border: 0;
      margin: 0;
      padding: 0.5em;
      color: var(--text-color);
      font-size: 0.8em;
      text-transform: uppercase;

      &:not(:last-child) {
        border-right: var(--border-thickness) solid var(--text-color);
      }

      &.active {
        background-color: var(--magenta);
        color: var(--background-color);
      }

      &:hover:not(.active) {
        background-color: var(--background-color-alt);
      }
    }
  }

  /* Technologies container */
  .technologies-container {
    padding: 0.8em;

    .tech-category {
      margin-bottom: 1.5em;

      h3 {
        text-transform: uppercase;
        font-weight: 700;
        font-size: 0.8em;
        margin-bottom: 0.8em;
        padding-bottom: 0.2em;
        border-bottom: var(--border-thickness) solid var(--text-color-alt);
      }
    }
  }

  /* Technology items grid */
  .tech-items {
    display: grid;
    gap: 0.8em;
    grid-template-columns: 1fr;
  }

  /* Technology item */
  .tech-item {
    background-color: var(--background-color-alt);
    border: var(--border-thickness) solid var(--text-color-alt);

    &.available {
      border-color: var(--text-color);
    }

    &.researched {
      border-color: var(--green);
    }

    &.active {
      border-color: var(--magenta);
    }

    &.locked {
      opacity: 0.6;
    }

    .tech-header {
      display: flex;
      padding: 0.5em;
      gap: 0.8em;
      align-items: center;

      .tech-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2em;
        height: 2em;
        flex-shrink: 0;

        .lucide {
          width: 1.5em;
          height: 1.5em;
          color: var(--text-color-alt);
        }
      }

      .researched & .tech-icon .lucide {
        color: var(--green);
      }

      .active & .tech-icon .lucide {
        color: var(--magenta);
      }

      .tech-name {
        flex-grow: 1;
        font-weight: 700;
        font-size: 0.9em;
        text-transform: uppercase;
      }

      .tech-status {
        font-size: 0.7em;
        padding: 0.2em 0.4em;
        border-radius: 0;
        text-transform: uppercase;
        font-weight: 700;

        &.researched {
          background-color: var(--green);
          color: var(--background-color);
        }

        &.active {
          background-color: var(--magenta);
          color: var(--background-color);
        }

        &.available {
          background-color: var(--text-color);
          color: var(--background-color);
        }

        &.locked {
          background-color: var(--text-color-alt);
          color: var(--background-color);
        }
      }
    }

    .tech-content {
      padding: 0.5em;
      border-top: var(--border-thickness) solid var(--text-color-alt);

      .tech-effect {
        font-size: 0.8em;
        margin-bottom: 0.5em;
      }

      .tech-cost {
        display: flex;
        gap: 1em;
        margin-bottom: 0.5em;
        font-size: 0.8em;

        span {
          display: flex;
          align-items: center;
          gap: 0.3em;

          .lucide {
            width: 1em;
            height: 1em;
          }
        }

        .knowledge {
          color: var(--magenta);
        }

        .time {
          color: var(--text-color-alt);
        }
      }

      .tech-prerequisites {
        font-size: 0.75em;
        color: var(--text-color-alt);
        font-style: italic;
        margin-bottom: 0.5em;
      }

      .research-button {
        background-color: var(--magenta);
        color: var(--background-color);
        border: none;
        padding: 0.3em 0.6em;
        font-size: 0.8em;
        text-transform: uppercase;
        font-weight: 700;
        cursor: pointer;

        &:hover {
          background-color: var(--text-color);
        }

        &:disabled {
          background-color: var(--text-color-alt);
          cursor: not-allowed;
          opacity: 0.7;
        }
      }

      .tech-progress {
        margin-top: 0.5em;

        .progress-bar {
          height: 0.4rem;
          background-color: var(--background-color-alt);
          border: none;
          margin-bottom: 0.2em;

          .progress {
            height: 100%;
            background-color: var(--magenta);
          }
        }

        .progress-text {
          font-size: 0.7em;
          color: var(--text-color-alt);
        }
      }
    }
  }

  /* Empty state */
  .no-technologies {
    padding: 1em;
    text-align: center;
    color: var(--text-color-alt);
    font-size: 0.9em;
    font-style: italic;
  }

  /* Responsive adjustments */
  @media (min-width: 768px) {
    .tech-items {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .tech-category-filters {
      flex-wrap: wrap;

      button {
        flex: 1 0 33.333%;

        &:not(:last-child) {
          border-right: none;
        }

        &:nth-child(3n) {
          border-right: none;
        }

        &:nth-child(n+4) {
          border-top: var(--border-thickness) solid var(--text-color);
        }
      }
    }
  }
}

/* --- contentment.css --- */
/* 
 * Contentment System Styles
 * Styles for the contentment system UI elements
 */

.contentment-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  border-right: var(--border-thickness) solid var(--text-color);
  min-width: 60px;
}

.contentment-display i {
  font-size: 1.5rem;
  margin-bottom: 0.2rem;
}

.contentment-display span {
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

/* Responsive styles */
@media (max-width: 1100px) {
  .contentment-display {
    border-left: none;
    border-top: var(--border-thickness) solid var(--text-color);
    width: 100%;
    padding: 0.5em 1em;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1em;
  }

  .contentment-display i {
    margin-bottom: 0;
  }

  .contentment-display span {
    margin-bottom: 0;
    margin-right: 1em;
  }
}

/* --- shortcuts.css --- */
/* Shortcut indicators */
.shortcut {
  position: absolute;
  background: var(--text-color);
  color: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
}

/* Difficulty selection shortcuts */
#game_start_screen section button .shortcut {
  top: 0.5rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.8rem;
}

/* Button shortcuts */
.button-container button,
.action-button,
.person-actions button {
  position: relative;

  .shortcut {
    top: 0.2rem;
    right: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.7rem;
  }
}

/* Mobile view adjustments */
@media (max-width: 100ch) {
  #game_start_screen section button .shortcut {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Hide shortcuts when toggled off */
body.hide-shortcuts .shortcut {
  display: none !important;
}

/* Touch devices have no keyboard: drop every keyboard affordance —
   shortcut chips, the header help button, the intro hint line. */
@media (pointer: coarse) {
  .shortcut,
  #shortcuts-help,
  .keyboard-note {
    display: none !important;
  }
}

/* --- modal.css --- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  &.hidden {
    display: none;
  }

  .modal-content {
    background: var(--background-color);
    border: var(--border-thickness) solid var(--text-color);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      border-bottom: var(--border-thickness) solid var(--text-color);
      flex-shrink: 0;

      h2 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        font-size: 1.2rem;
      }

      .close-modal {
        padding: 0.5rem;
        border: none;
        background: none;
        cursor: pointer;

        /* Comfortable touch target */
        @media (pointer: coarse) {
          display: grid;
          place-items: center;
          min-width: 2.75rem;
          min-height: 2.75rem;
        }
      }
    }

    .shortcuts-toggle {
      padding: 1rem;
      border-bottom: var(--border-thickness) solid var(--text-color);
      flex-shrink: 0;

      label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
    }

    .shortcuts-list {
      padding: 1rem;
      overflow-y: auto;

      h3 {
        margin: 0 0 0.5rem;
        font-size: 1rem;
      }

      .empty-state {
        color: var(--text-color-muted);
        font-style: italic;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 1.5rem;

        th, td {
          text-align: left;
          padding: 0.5rem;
          width: 33.33%;
        }

        th {
          font-weight: bold;
          border-bottom: var(--border-thickness) solid var(--text-color);
        }
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0 0 1.5rem;

        li {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          margin-bottom: 0.5rem;
        }
      }

      kbd {
        background: var(--text-color);
        color: var(--background-color);
        padding: 0.2rem 0.4rem;
        border-radius: 3px;
        font-size: 0.9em;
        min-width: 1.5em;
        text-align: center;
        display: inline-block;
      }
    }
  }
}

/* Hide shortcuts when toggled off */
body.hide-shortcuts .shortcut {
  display: none !important;
} 
/* Acknowledgements (intro-screen credits) */
.acknowledgements-body {
  padding: 1rem;
  overflow-y: auto;
  line-height: 1.55;
}

.acknowledgements-body p {
  margin: 0 0 0.8rem;
}

.acknowledgements-body p:last-child {
  margin-bottom: 0;
}

/* --- gameover.css --- */
#game_over_screen {
  text-align: left;
  padding: 0 2rem;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 600px;

  .splash_screen {
    border: var(--border-thickness) solid var(--text-color);
  }

  .splash_header {
    border-bottom: var(--border-thickness) solid var(--text-color);
    display: flex;
    align-items: center;
    font-size: 3rem;

    .icon-large {
      padding: 1rem;
      font-size: 2em;
      border-right: var(--border-thickness) solid var(--text-color);
    }

    div {
      padding-left: 1.5rem;
    }

    h1 {
      font-size: 2.75rem;
      font-weight: 700;
      margin: 0;
      line-height: 1em;
      letter-spacing: -0.03em;
      text-transform: uppercase;
    }

    p {
      font-size: 1.2rem;
      margin: 0;
    }
  }

  #game_stats {
    .numbers {
      border-bottom: var(--border-thickness) solid var(--text-color);
      display: flex;

      p {
        padding: 1rem;
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
        text-transform: uppercase;
        border-right: var(--border-thickness) solid var(--text-color);
      }

      .resource-list {
        display: flex;
        gap: 1.5em;
        font-size: 1.5em;
        font-weight: 700;
        margin-left: 1rem;

        .resource {
          display: flex;
          align-items: center;
          gap: 0.2em;
        }
      }
    }

    .achievements {
      .achievement-list {
        display: grid;
        grid-template-columns: 1fr;
      }

      .achievement-item {
        padding: 0.75rem;
        border-bottom: var(--border-thickness) solid var(--text-color);

        &:nth-child(even) {
          border-left: var(--border-thickness) solid var(--text-color);
        }

        .achievement-name {
          font-weight: 700;
        }

        .achievement-description {
          font-size: 0.8em;
        }
      }
    }

    h2 {
      display: flex;
      text-transform: uppercase;
      font-size: 1.5rem;
      font-weight: 700;
      border-bottom: var(--border-thickness) solid var(--text-color);

      b {
        padding: 1rem;
        border-right: var(--border-thickness) solid var(--text-color);
      }

      .time {
        padding: 1rem;
        color: var(--dark-red);
      }
    }
  }

  button {
    width: 100%;
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    margin: 0;
    background-color: var(--dark-red);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: var(--text-color);
      color: var(--background-color);
    }
  }
}

@media (min-width: 768px) {
  #game_over_screen #game_stats .achievements .achievement-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 100ch) {
  #game_over_screen {
    .splash_header {
      h1 {
        font-size: 1.8rem;
      }

      p {
        font-size: .9rem;
      }
    }

    #game_stats {
      .numbers p {
        font-size: 0.75rem;
      }

      h2 {
        font-size: 1rem;
      }
    }
  }
}

@media (max-width: 50ch) {
  #game_over_screen .splash_header h1 {
    font-size: 1.5rem;
  }
}

/* --- prestige.css --- */
/* Prestige — "Memory Fragments" intro panel and game-over recovery line. */

/* Sits in the .start-sections flow, which owns the spacing between bands. */
#game_start_screen .memories-panel {
  border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, rgba(20, 25, 24, 0.72), rgba(10, 13, 13, 0.62));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: var(--shadow-deep);
}

.memories-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  margin: 0;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.4rem, 3vw, 2.2rem);
  border: 0;
  background: transparent;
  color: var(--text-color);
  text-align: left;
  cursor: pointer;
}

.memories-toggle:hover,
.memories-toggle:focus-visible {
  background: linear-gradient(90deg, var(--signal-soft), rgba(230, 184, 106, 0.02) 72%);
}

.memories-heading .panel-index {
  margin-bottom: 0.4rem;
}

.memories-heading h2 {
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.memories-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-left: auto;
  color: var(--text-color-muted);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.memories-meta #memories-fragments {
  color: var(--signal);
}

.memories-chevron {
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.memories-toggle.collapsed .memories-chevron {
  transform: rotate(-90deg);
}

.memories-body {
  border-top: 1px solid var(--line);
}

.memories-copy {
  padding: 1rem clamp(1.4rem, 3vw, 2.2rem) 0.4rem;
  color: var(--text-color-alt);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.memory-upgrade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line);
}

.memory-upgrade:last-child {
  border-bottom: 0;
}

.memory-upgrade-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.memory-upgrade-title strong {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.memory-upgrade-title .icon {
  color: var(--signal);
}

.memory-upgrade-level {
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--line-strong);
  color: var(--text-color-muted);
  font-size: 0.52rem;
  letter-spacing: 0.13em;
}

.memory-upgrade.maxed .memory-upgrade-level {
  border-color: rgba(230, 184, 106, 0.4);
  color: var(--signal);
}

.memory-upgrade-effect {
  margin-top: 0.35rem;
  color: var(--signal);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.memory-upgrade-description {
  margin-top: 0.3rem;
  color: var(--text-color-muted);
  font-size: 0.68rem;
  line-height: 1.5;
}

.memory-upgrade button {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-color);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.memory-upgrade button:hover:not(:disabled),
.memory-upgrade button:focus-visible:not(:disabled) {
  border-color: var(--signal);
  background: var(--signal-soft);
  color: var(--signal);
}

.memory-upgrade button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Game-over: fragments recovered from the fallen camp. */
.memory-recovery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(230, 184, 106, 0.4);
  color: var(--signal);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .memories-toggle {
    flex-wrap: wrap;
  }

  .memories-meta {
    margin-left: 0;
    flex-basis: 100%;
  }

  .memory-upgrade {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
}

/* --- expeditions.css --- */
/* Expeditions module — routes out past the fence line */

#expeditions-module {
  .expedition-brief {
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: var(--border-thickness) solid var(--text-color);
    color: var(--text-color-alt);
  }

  .expedition-member-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: var(--border-thickness) solid var(--text-color);

    span {
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.85em;
      letter-spacing: 0.06em;
    }

    select {
      flex: 1;
      background: var(--background-color-alt);
      color: var(--text-color);
      border: var(--border-thickness) solid var(--accent-color);
      padding: 0.4em 0.6em;
      font-family: inherit;

      /* Comfortable touch target */
      @media (pointer: coarse) {
        min-height: 2.75rem;
      }
    }
  }

  .expedition-locations {
    button {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.2em;
      width: 100%;
      margin: 0;
      border: 0;
      border-bottom: var(--border-thickness) solid var(--text-color);
      /* Risk hue lives in a left rail plus a DARK tint of the same hue, so
         every card keeps legible --text-color type. The old full-strength
         --green / --light-yellow fills sat under the near-white global
         button color (buttons.css) and swallowed the text entirely. */
      border-left: 0.3em solid transparent;
      padding: 0.6em 1em;
      text-align: left;
      color: var(--text-color);

      &:last-child {
        border-bottom: none;
      }

      &:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }
    }

    /* Fallback hexes = the color-mix result against the intro's #090c0c,
       for browsers without color-mix. */
    .risk-low {
      border-left-color: var(--green);
      background-color: #2a3326;
      background-color: color-mix(in srgb, var(--green) 24%, var(--background-color));
    }

    .risk-medium {
      border-left-color: var(--light-yellow);
      background-color: #3e3523;
      background-color: color-mix(in srgb, var(--light-yellow) 24%, var(--background-color));
    }

    .risk-high {
      border-left-color: var(--dark-red);
      background-color: #371e1a;
      background-color: color-mix(in srgb, var(--dark-red) 24%, var(--background-color));
    }

    /* The card you are about to send the runner to is unmistakable: its own
       hue brightens and the frame lights up. (Clicking launches immediately,
       so hover/focus IS the selected state.) */
    .risk-low:not(:disabled) {
      &:hover,
      &:focus-visible {
        background-color: #3d4935;
        background-color: color-mix(in srgb, var(--green) 38%, var(--background-color));
      }
    }

    .risk-medium:not(:disabled) {
      &:hover,
      &:focus-visible {
        background-color: #5d4d30;
        background-color: color-mix(in srgb, var(--light-yellow) 38%, var(--background-color));
      }
    }

    .risk-high:not(:disabled) {
      &:hover,
      &:focus-visible {
        background-color: #522822;
        background-color: color-mix(in srgb, var(--dark-red) 38%, var(--background-color));
      }
    }

    button:not(:disabled):focus-visible {
      outline: var(--border-thickness) solid var(--text-color);
      outline-offset: calc(-1 * var(--border-thickness));
    }

    .expedition-location-name {
      display: flex;
      align-items: center;
      gap: 0.4em;
      font-weight: 700;
      text-transform: uppercase;

      .lucide {
        width: 1em;
        height: 1em;
      }
    }

    .expedition-location-meta {
      font-size: 0.85em;
      font-weight: 700;
    }

    .expedition-location-blurb {
      font-size: 0.85em;
      opacity: 0.85;
    }
  }

  .expedition-tracker {
    padding: 1rem;

    .expedition-tracker-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.5rem;
      font-weight: 700;

      span {
        color: var(--text-color-alt);
      }
    }

    .expedition-progress {
      height: 0.6em;
      border: var(--border-thickness) solid var(--text-color);
      margin: 0.6rem 0;
      background: var(--background-color-alt);

      span {
        display: block;
        height: 100%;
        background: var(--green);
        transition: width 0.4s linear;
      }
    }

    .expedition-tracker-times {
      display: flex;
      justify-content: space-between;
      font-size: 0.9em;
    }

    .expedition-tracker-note {
      margin: 0.75rem 0 0;
      font-size: 0.85em;
      color: var(--text-color-alt);
    }
  }
}

/* Field-event dialog — a decision crackling in over the radio */

.expedition-event-dialog {
  background: var(--background-color);
  color: var(--text-color);
  border: var(--border-thickness) solid var(--text-color);
  padding: 0;
  width: min(32rem, calc(100vw - 2rem));

  &::backdrop {
    background: rgba(0, 0, 0, 0.65);
  }

  .expedition-event-panel {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
  }

  .expedition-event-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: var(--border-thickness) solid var(--accent-color);
    padding-bottom: 0.75rem;

    p {
      margin: 0;
      font-size: 0.8em;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-color-alt);
    }

    h2 {
      margin: 0;
      font-size: 1.1em;
    }

    .expedition-event-signal .lucide {
      width: 1.5em;
      height: 1.5em;
      color: var(--green);
    }
  }

  .expedition-event-meta {
    margin: 0;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--text-color-alt);
  }

  .expedition-event-prompt {
    margin: 0;
    font-size: 1.05em;
  }

  .expedition-event-choices {
    display: grid;
    gap: 0.5rem;

    button {
      width: 100%;
      margin: 0;
      text-align: left;
      padding: 0.6em 1em;

      small {
        display: block;
        font-size: 0.7em;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        opacity: 0.75;
      }
    }
  }

  .expedition-event-hint {
    margin: 0;
    font-size: 0.8em;
    color: var(--text-color-alt);
  }
}

/* --- seasons.css --- */
/* Seasons + weather — compact command-header indicator with a forecast tooltip */

/* Quiet inline chip: it lives INSIDE the header's conditions segment
   (.time-display), so it carries no border/background of its own and its
   label matches the FOOD/WATER/WOOD micro-type exactly. */
.season-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: default;

  &.hidden {
    display: none;
  }

  /* Sized like the other header glyphs; the width/height attributes the
     renderer sets are only the no-CSS fallback. */
  .season-weather-icon,
  svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }

  .season-name {
    color: var(--text-color-muted);
    font-weight: 600;
    font-size: 0.52rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  .season-tooltip {
    display: none;
    /* Fixed, not absolute: the command header clips overflow, so an
       absolutely-positioned dropdown below it can never be seen. The
       renderer sets top/right inline from the indicator's rect on hover. */
    position: fixed;
    z-index: 40;
    width: min(20rem, calc(100vw - 2rem));
    padding: 0.75rem 1rem;
    border: var(--border-thickness) solid var(--text-color);
    background: var(--background-color);
    color: var(--text-color);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;

    strong {
      display: block;
      font-size: 0.85em;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    p {
      margin: 0.25rem 0 0.6rem;
      font-size: 0.85em;
      color: var(--text-color-alt);
    }

    .season-tooltip-modifiers {
      margin-bottom: 0;
      font-weight: 700;
      color: var(--text-color);
    }
  }

  &:hover .season-tooltip,
  &:focus .season-tooltip,
  &:focus-visible .season-tooltip {
    display: block;
  }

  /* Touch: hover/focus can't open (or re-close) the card, so the tap
     toggle in seasons.js drives it via .tooltip-open instead. The
     :hover/:focus openers are disabled so a tap that focuses the chip
     doesn't pin the card open past its toggle. */
  @media (pointer: coarse) {
    &:hover .season-tooltip,
    &:focus .season-tooltip,
    &:focus-visible .season-tooltip {
      display: none;
    }

    &.tooltip-open .season-tooltip {
      display: block;
    }
  }
}

/* --- transmissions.css --- */
/* Recovered Transmissions — signal journal, header badge, and recovery toast. */

/* Recovered-count badge on the header journal button */
#transmissions-journal {
  position: relative;
}

.transmissions-count {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  min-width: 1.1rem;
  padding: 0 0.2rem;
  font-size: 0.65rem;
  line-height: 1.1rem;
  text-align: center;
  color: var(--background-color);
  background: var(--cyan);
  border-radius: 0.55rem;

  &.hidden {
    display: none;
  }
}

/* Journal modal (extends the shared .modal / .modal-content pattern) */
.modal .modal-content.transmissions-journal {
  max-width: 620px;

  .transmissions-intro {
    padding: 1rem;
    margin: 0;
    color: var(--text-color-alt);
    border-bottom: var(--border-thickness) solid var(--text-color);
    flex-shrink: 0;

    #transmissions-progress {
      display: block;
      margin-top: 0.35rem;
      color: var(--cyan);
    }
  }

  .transmissions-list {
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

.transmission-entry {
  border: 1px solid var(--accent-color);
  padding: 0.75rem;
  background: var(--background-color-alt);

  header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
  }

  .transmission-designation {
    color: var(--cyan);
    font-weight: bold;
    letter-spacing: 0.05em;
  }

  .transmission-source {
    color: var(--text-color-alt);
    font-size: 0.75rem;
  }

  p {
    margin: 0;
    line-height: var(--line-height);
  }

  &.locked {
    border-style: dashed;
    opacity: 0.55;

    .transmission-designation {
      color: var(--comment-grey);
    }

    .transmission-static {
      color: var(--comment-grey);
      letter-spacing: 0.15em;
    }
  }
}

/* Non-blocking recovery toast */
.transmission-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  background: var(--background-color-alt);
  border: var(--border-thickness) solid var(--cyan);
  color: var(--text-color);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;

  &.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .icon {
    color: var(--cyan);
  }

  .transmission-toast-copy {
    display: flex;
    flex-direction: column;

    strong {
      font-size: 0.8rem;
    }

    span {
      font-size: 0.75rem;
      color: var(--cyan);
      letter-spacing: 0.05em;
    }
  }
}

/* --- emergency.css --- */
/* Emergency Protocols panel (emergency.js) */

#emergency-module {
  border: var(--border-thickness) solid var(--dark-red);

  h2 {
    color: var(--light-red);
  }

  .emergency-lede {
    font-size: 0.8em;
    color: var(--text-color-alt);
    padding: 0 0.75rem 0.75rem;
  }
}

#emergency-panel {
  display: flex;
  flex-direction: column;
}

.emergency-protocol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border-top: var(--border-thickness) solid var(--dark-red);

  &.protocol-active {
    background-color: rgba(190, 80, 70, 0.15);
  }

  .emergency-copy {
    flex: 1;

    p {
      font-size: 0.8em;
      color: var(--text-color-alt);
      margin-top: 0.25rem;
    }
  }

  .emergency-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;

    .icon {
      color: var(--light-red);
    }
  }

  .emergency-active-tag,
  .emergency-spent-tag {
    font-size: 0.7em;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border: 1px solid currentColor;
  }

  .emergency-active-tag {
    color: var(--light-red);
  }

  .emergency-spent-tag {
    color: var(--comment-grey);
  }

  .emergency-choice {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  button {
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  .emergency-protocol {
    flex-direction: column;
    align-items: stretch;

    .emergency-choice {
      flex-direction: row;
      flex-wrap: wrap;
    }
  }
}

/* --- daynight.css --- */
/* Day/Night cycle (daynight.js) — subtle tint + sun/moon glyph */

/* The night tint: a fixed, non-interactive wash over the whole command
   view. Kept faint so every module stays readable. */
#game_screen {
  position: relative;
}

#game_screen::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    linear-gradient(180deg,
      rgba(20, 26, 48, 0.28) 0%,
      rgba(10, 14, 30, 0.18) 45%,
      rgba(20, 26, 48, 0.30) 100%);
  opacity: 0;
  transition: opacity 2.5s ease;
}

#game_screen.night::after {
  opacity: 1;
}

/* Sun/moon glyph beside the clock */
.day-night-indicator {
  display: inline-flex;
  align-items: center;

  /* Constrain ANY svg dropped in here (lucide's default is a 24px canvas),
     so a missing glyph class can never balloon the indicator again. */
  svg,
  .day-night-glyph {
    width: 1rem;
    height: 1rem;
  }

  .day-glyph {
    color: var(--light-yellow);
  }

  .night-glyph {
    color: var(--blue);
  }
}

/* Beats the legacy Society Fail rule in shell.css
   (#game_screen header .time-module .time-display .day-night-indicator),
   which painted this slot as a 2rem yellow filled disc — the "giant sun".
   shell.css is off-limits, so we out-specify it here: this is the glyph's
   slot now, not a decorative circle. */
#game_screen .command-header .time-module .time-display .day-night-indicator {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* --- interface.css --- */
:root {
  --text-color: #f2f0e7;
  --text-color-alt: #9c9d96;
  --text-color-muted: #777a75;
  --background-color: #090c0c;
  --background-color-alt: #101514;
  --surface: rgba(18, 23, 22, 0.94);
  --surface-raised: #171d1b;
  --surface-soft: #1c2220;
  --line: rgba(224, 221, 206, 0.16);
  --line-strong: rgba(224, 221, 206, 0.3);
  --ember: #df624d;
  --ember-bright: #f47a5e;
  --ember-soft: rgba(223, 98, 77, 0.14);
  --signal: #e6b86a;
  --signal-soft: rgba(230, 184, 106, 0.12);
  --blue: #6ea5c7;
  --green: #91ad78;
  --green-rgb: 145, 173, 120;
  --light-green: #adc791;
  --light-yellow: #e6b86a;
  --dark-yellow: #c8945d;
  --dark-red: #c95545;
  --light-red: #e47765;
  --magenta: #a4809e;
  --gutter-grey: #343c3a;
  --comment-grey: #727976;
  --border-thickness: 1px;
  --border-radius: 2px;
  --font-display: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", sans-serif;
  --font-family: "SFMono-Regular", "SF Mono", "Roboto Mono", "Segoe UI Mono", monospace;
  --line-height: 1.45rem;
  --shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.46);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--background-color);
}

body {
  min-width: 0;
  color: var(--text-color);
  background:
    radial-gradient(circle at 12% -10%, rgba(223, 98, 77, 0.18), transparent 32rem),
    radial-gradient(circle at 82% 12%, rgba(230, 184, 106, 0.06), transparent 30rem),
    linear-gradient(180deg, #0b0e0e 0%, #070909 100%);
  isolation: isolate;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

body::after {
  opacity: 0.24;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.18) 4px);
  mix-blend-mode: multiply;
}

a {
  color: var(--signal);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--text-color);
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
.collapsible:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

button {
  border-color: var(--line-strong);
  background: var(--surface);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

button:hover {
  color: var(--text-color);
  background: var(--surface-soft);
  border-color: var(--ember);
}

::selection {
  color: #fff;
  background: var(--ember);
}

/* Reload with a save: the pre-paint script in index.html tags <html> as
   .resuming so the intro never flashes before the save loads. game.js
   removes the class whenever it decides to show the start screen. */
html.resuming #game_start_screen {
  display: none;
}

/* Start screen — a scrolling landing page whose first screen is the hero. */
#game_start_screen {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  transform: none;
  isolation: isolate;
}

/* start.css's `#game_start_screen section { display: flex }` (1,0,1) outranks
   `.hidden { display: none }` (0,1,0), so every <section> the game hides by
   class — the Memories panel — rendered anyway, empty, on a first visit. The
   utility has to win inside this subtree. */
#game_start_screen .hidden {
  display: none;
}

/* That same legacy rule (a centred flex row, built for the old three-across
   difficulty picker) matches every <section> on this page, so each band has to
   reclaim its own display and alignment here.

   `:not(.hidden)` keeps this off the Memories panel, which ships hidden and is
   unhidden by prestige.js only once a run has banked fragments — without it
   this rule's `display: block` outranks `.hidden { display: none }`. */
#game_start_screen .start-hero,
#game_start_screen .start-sections > section:not(.hidden) {
  display: block;
  text-align: left;
}

/* The atmosphere art is absolute to this element, so it must stop at the fold
   rather than washing over the sections below it. */
.start-hero {
  position: relative;
  min-height: 100dvh;
  padding: clamp(1rem, 3vw, 2.5rem);
  overflow: hidden;
  isolation: isolate;
}

.start-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(9, 12, 12, 0.98) 0%, rgba(9, 12, 12, 0.86) 38%, rgba(9, 12, 12, 0.42) 72%, rgba(9, 12, 12, 0.32) 100%),
    linear-gradient(180deg, rgba(9, 12, 12, 0.08), rgba(9, 12, 12, 0.58)),
    url('../../images/gatefall-welcome-bg.webp') 58% center / cover no-repeat;
}

.start-atmosphere::before {
  content: '';
  position: absolute;
  top: -36vw;
  left: -19vw;
  width: 70vw;
  height: 70vw;
  border: 1px solid rgba(223, 98, 77, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 8vw rgba(223, 98, 77, 0.018),
    0 0 0 17vw rgba(223, 98, 77, 0.012),
    inset 0 0 9rem rgba(223, 98, 77, 0.06);
}

.start-atmosphere::after {
  content: '';
  position: absolute;
  right: -16rem;
  bottom: -20rem;
  width: 52rem;
  height: 52rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 98, 77, 0.13), transparent 67%);
  filter: blur(14px);
}

.start-atmosphere .horizon {
  position: absolute;
  right: -5%;
  bottom: 9%;
  width: 72%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 98, 77, 0.38), transparent);
  transform: rotate(-8deg);
  box-shadow: 0 -30px 80px rgba(223, 98, 77, 0.16);
}

.ash {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--ember-bright);
  box-shadow:
    12vw 7vh 0 rgba(223, 98, 77, 0.6),
    23vw 28vh 0 rgba(230, 184, 106, 0.35),
    38vw 13vh 0 rgba(223, 98, 77, 0.45),
    52vw 42vh 0 rgba(230, 184, 106, 0.25),
    68vw 18vh 0 rgba(223, 98, 77, 0.48),
    84vw 52vh 0 rgba(223, 98, 77, 0.35),
    91vw 23vh 0 rgba(230, 184, 106, 0.2);
  opacity: 0.7;
  animation: ash-drift 16s linear infinite;
}

.ash-one {
  top: 8%;
  left: 2%;
}

.ash-two {
  top: 41%;
  left: 8%;
  animation-delay: -5s;
  animation-duration: 20s;
}

.ash-three {
  top: 74%;
  left: -3%;
  animation-delay: -11s;
  animation-duration: 24s;
}

@keyframes ash-drift {
  50% {
    transform: translate(2.5rem, -1.5rem);
    opacity: 0.3;
  }
}

@media (max-width: 760px) {
  .start-atmosphere {
    background:
      linear-gradient(180deg, rgba(9, 12, 12, 0.5), rgba(9, 12, 12, 0.8)),
      linear-gradient(90deg, rgba(9, 12, 12, 0.78), rgba(9, 12, 12, 0.18)),
      url('../../images/gatefall-welcome-bg.webp') 70% center / cover no-repeat;
  }
}

.start-shell {
  display: flex;
  flex-direction: column;
  width: min(100%, 1480px);
  min-height: calc(100dvh - clamp(2rem, 6vw, 5rem));
  margin: 0 auto;
}

/* Everything past the fold shares the hero's measure and gutters. */
.start-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 6rem);
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}

.start-nav,
.start-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-color-alt);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Reads as a footer link, works as a dialog trigger. */
.start-footer .acknowledgements-link {
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.start-nav {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.challenge-brief {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(230, 184, 106, 0.38);
  background: var(--signal-soft);
  color: var(--text-color-alt);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.challenge-brief.hidden {
  display: none;
}

.challenge-brief .lucide {
  width: 1rem;
  height: 1rem;
  color: var(--signal);
}

.challenge-brief strong {
  justify-self: end;
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

/* Ambient world signal: a slim breach-status strip beneath the nav. Hidden
   until /api/world/status answers — the intro must read fine without it. */
.world-signal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.8rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  color: var(--text-color-alt);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* The first two counts are live people; the third is a shared goal. Giving
   the counts the brighter colour keeps the strip reading as proof. */
#world-survivors {
  color: var(--green);
}

#world-camps-fallen {
  color: var(--ember-bright);
}

.world-signal.hidden {
  display: none;
}

.world-signal span {
  white-space: nowrap;
}

.universe-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-color);
  font-weight: 700;
  text-decoration: none;
}

.universe-symbol {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--ember-bright);
  font-size: 0.64rem;
}

.signal-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.signal-status i {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 5px rgba(223, 98, 77, 0.1), 0 0 18px var(--ember);
  animation: signal-pulse 2.2s ease-in-out infinite;
}

@keyframes signal-pulse {
  50% {
    opacity: 0.45;
  }
}

.start-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  flex: 1;
  padding: clamp(2.5rem, 6vh, 5rem) 0 clamp(1.5rem, 3vh, 2.5rem);
}

#game_start_screen .start-briefing {
  position: relative;
  display: block;
  border: 0;
  font-size: 1rem;
}

.kicker,
.panel-index {
  margin: 0 0 1.4rem;
  color: var(--ember-bright);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.title-lockup {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.gate-emblem {
  position: relative;
  display: grid;
  flex: 0 0 clamp(4.5rem, 8vw, 6.5rem);
  width: clamp(4.5rem, 8vw, 6.5rem);
  height: clamp(4.5rem, 8vw, 6.5rem);
  place-items: center;
  border: 1px solid rgba(223, 98, 77, 0.5);
  border-radius: 50%;
  color: var(--ember-bright);
  box-shadow: inset 0 0 2rem rgba(223, 98, 77, 0.1), 0 0 3rem rgba(223, 98, 77, 0.08);
}

.gate-emblem::after {
  content: '';
  position: absolute;
  inset: 0.55rem;
  border: 1px dashed rgba(223, 98, 77, 0.28);
  border-radius: 50%;
}

.gate-emblem .lucide {
  width: 44%;
  height: 44%;
  stroke-width: 1.35;
}

/* start.css's legacy header-icon rule (1.5rem padding + a divider border)
   otherwise bleeds into every icon inside the briefing <header>. */
#game_start_screen .start-briefing .icon {
  padding: 0;
  border: 0;
}

#game_start_screen .gate-emblem .icon {
  width: 44%;
  height: 44%;
}

#game_start_screen .start-briefing h1 {
  margin: 0;
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 6.4vw, 6.4rem);
  font-stretch: condensed;
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.78;
  white-space: nowrap;
  text-transform: uppercase;
}

#game_start_screen .start-briefing h1 span {
  color: var(--ember-bright);
}

#game_start_screen .start-briefing h2 {
  margin: 1.2rem 0 0;
  color: var(--text-color-alt);
  font-size: clamp(0.78rem, 1.3vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The selling paragraph: plain sentences, sentence case, wide enough to read
   as prose rather than as chrome. */
.hero-lede {
  max-width: 34rem;
  margin: 1.6rem 0 0;
  color: #c6c6bc;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.6;
}

/* Play CTA: the one explicit play verb on the page. Must out-rank every
   other element after the title itself. */
.deploy-cta {
  margin-top: 1.8rem;
}

#game_start_screen .play-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 4rem;
  margin: 0;
  padding: 0.4rem clamp(2.25rem, 4.5vw, 3.5rem);
  border: 1px solid var(--ember-bright);
  background: linear-gradient(180deg, var(--ember-bright), var(--ember) 55%, #b64f3d);
  color: #fff7f2;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 2.4rem rgba(223, 98, 77, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

#game_start_screen .play-now:hover,
#game_start_screen .play-now:focus-visible {
  border-color: #fff7f2;
  background: linear-gradient(180deg, #ff8d6d, var(--ember-bright) 60%, var(--ember));
  color: #fff;
  box-shadow: 0 0 3.2rem rgba(244, 122, 94, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

#game_start_screen .play-now .lucide {
  width: 1.05rem;
  height: 1.05rem;
}

/* Trust line: renders verbatim in sentence case — reassurance copy, not
   protocol chrome. */
.deploy-note {
  margin: 0.8rem 0 0;
  color: var(--text-color-alt);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

/* Live player count beside the CTA — the page's only social proof, so it
   reads as a number, not as a status code. */
.deploy-liveness {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.9rem 0 0;
  color: var(--text-color-alt);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.deploy-liveness::before {
  content: '';
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(var(--green-rgb), 0.14);
  animation: signal-pulse 2.2s ease-in-out infinite;
}

.deploy-liveness.hidden {
  display: none;
}

.mission-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 34rem;
  margin: 2rem 0 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.mission-facts div {
  padding: 0.9rem;
  background: rgba(10, 13, 13, 0.88);
}

.mission-facts dt {
  margin-bottom: 0.35rem;
  color: var(--text-color-muted);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mission-facts dd {
  margin: 0;
  color: var(--text-color);
  font-size: 0.7rem;
}

/* Product shot. Cold traffic will not take the word "survival game" on faith;
   this is the only element that shows what the next click looks like. */
.hero-preview {
  display: block;
  min-width: 0;
}

.hero-preview .panel-index {
  margin-bottom: 0.9rem;
}

.hero-preview figure {
  margin: 0;
  border: 1px solid var(--line-strong);
  background: rgba(10, 13, 13, 0.72);
  box-shadow: var(--shadow-deep);
}

.hero-preview picture,
.hero-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-preview img {
  border-bottom: 1px solid var(--line);
}

.hero-preview figcaption {
  padding: 0.9rem clamp(0.9rem, 2vw, 1.3rem);
  color: var(--text-color-alt);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Tells the visitor there is more page. Only earns its pixels because the
   fold now hides four sections of selling. */
.hero-scroll-cue {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0;
  color: var(--text-color-muted);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}

.hero-scroll-cue:hover {
  color: var(--text-color);
}

.hero-scroll-cue .lucide {
  width: 0.9rem;
  height: 0.9rem;
  animation: scroll-cue-nudge 2.4s ease-in-out infinite;
}

@keyframes scroll-cue-nudge {
  50% {
    transform: translateY(0.25rem);
  }
}

/* Section bands below the fold */
.band-head {
  max-width: 44rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.band-head h2 {
  margin: 0;
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.band-lede {
  margin: 1rem 0 0;
  color: var(--text-color-alt);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.55;
}

.loop-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--line);
  list-style: none;
}

.loop-steps li {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(12, 16, 15, 0.9);
}

.step-number {
  color: var(--ember-bright);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.loop-steps h3,
.pitch-grid h3 {
  margin: 0.9rem 0 0.6rem;
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.loop-steps h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.loop-steps h3 .lucide {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--ember-bright);
}

.loop-steps p,
.pitch-grid p {
  margin: 0;
  color: var(--text-color-alt);
  font-size: 0.92rem;
  line-height: 1.6;
}

.pitch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pitch-grid article {
  padding-left: 1.25rem;
  border-left: 1px solid var(--line-strong);
}

.pitch-grid h3 {
  margin-top: 0;
}

.faq-list {
  border: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
  background: rgba(12, 16, 15, 0.72);
}

.faq-list details:last-child {
  border-bottom: 0;
}

.faq-list summary {
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.5vw, 1.75rem);
  color: var(--text-color);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 650;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: '+';
  float: right;
  color: var(--ember-bright);
  font-weight: 400;
}

.faq-list details[open] summary::after {
  content: '\2212';
}

.faq-list summary:hover {
  color: var(--ember-bright);
}

.faq-list details p {
  max-width: 58rem;
  margin: 0;
  padding: 0 clamp(1.1rem, 2.5vw, 1.75rem) clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--text-color-alt);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* Closing ask. Anyone who read this far has already been told what the game
   is, so this band only has to restate the offer and get out of the way. */
/* Out-specifies the `.start-sections > section { text-align: left }` reset
   above — this is the one band that wants to be centred. */
#game_start_screen .start-sections > .final-cta {
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(circle at 50% 120%, rgba(223, 98, 77, 0.18), transparent 60%),
    linear-gradient(145deg, rgba(20, 25, 24, 0.8), rgba(10, 13, 13, 0.7));
  text-align: center;
}

.final-cta h2 {
  margin: 0;
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.final-cta > p {
  margin: 1rem 0 2rem;
  color: var(--text-color-alt);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
}

.final-cta .deploy-note {
  margin-top: 1rem;
}

#game_start_screen .deployment-panel {
  display: block;
  border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, rgba(20, 25, 24, 0.72), rgba(10, 13, 13, 0.62));
  box-shadow: var(--shadow-deep);
}

.deployment-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line);
}

.deployment-header .band-lede {
  margin-top: 0.75rem;
}

.deployment-header .panel-index {
  margin-bottom: 0.75rem;
}

.deployment-header h2 {
  max-width: 34rem;
  margin: 0;
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

#game_start_screen .difficulty-grid {
  display: grid;
  text-align: left;
}

#game_start_screen .difficulty-grid button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1.5rem;
  width: 100%;
  margin: 0;
  padding: 1.35rem clamp(1.4rem, 3vw, 2.2rem);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text-color);
  text-align: left;
  overflow: hidden;
}

#game_start_screen .difficulty-grid button:last-child {
  border-bottom: 0;
}

#game_start_screen .difficulty-grid button::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ember);
  transform: scaleY(0);
  transition: transform 180ms ease;
}

#game_start_screen .difficulty-grid button:hover,
#game_start_screen .difficulty-grid button:focus-visible {
  background: linear-gradient(90deg, var(--ember-soft), rgba(223, 98, 77, 0.025) 65%);
  color: var(--text-color);
  transform: none;
}

#game_start_screen .difficulty-grid button.challenge-target {
  background: linear-gradient(90deg, var(--signal-soft), rgba(230, 184, 106, 0.02) 72%);
  box-shadow: inset 3px 0 var(--signal);
}

#game_start_screen .difficulty-grid button.challenge-target .difficulty-topline::after {
  content: 'Challenge';
  padding: 0.2rem 0.4rem;
  border: 1px solid rgba(230, 184, 106, 0.4);
  color: var(--signal);
  font-size: 0.48rem;
}

#game_start_screen .difficulty-grid button:hover::before,
#game_start_screen .difficulty-grid button:focus-visible::before {
  transform: scaleY(1);
}

.difficulty-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  grid-column: 1;
  padding-right: 2.5rem; /* clears the absolutely-positioned shortcut chip */
  color: var(--text-color-muted);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.difficulty-number {
  color: var(--ember-bright);
}

.risk-level {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.risk-level::before {
  content: '';
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: currentColor;
}

.recommended-tag {
  padding: 0.2rem 0.4rem;
  border: 1px solid rgba(145, 173, 120, 0.45);
  color: var(--green);
  font-size: 0.48rem;
  white-space: nowrap;
}

.risk-low {
  color: var(--green);
}

.risk-medium {
  color: var(--signal);
}

.risk-critical {
  color: var(--ember-bright);
}

#game_start_screen .difficulty-grid button > b {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

#game_start_screen .difficulty-grid button > small {
  grid-column: 1;
  max-width: 30rem;
  color: var(--text-color-alt);
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.45;
}

#game_start_screen .starting-kit {
  display: flex;
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  gap: 0.85rem;
  min-width: 10rem;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}

#game_start_screen .starting-kit > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-color);
  font-size: 0.72rem;
}

#game_start_screen .starting-kit .lucide {
  width: 0.9rem;
  height: 0.9rem;
}

#game_start_screen .starting-kit.empty-kit {
  align-items: center;
  justify-content: center;
  color: var(--text-color-muted);
}

#game_start_screen .starting-kit.empty-kit span {
  color: inherit;
  font-size: 0.61rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deploy-label {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: -1.55rem;
  color: var(--text-color-muted);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  opacity: 0;
  text-transform: uppercase;
  transform: translateX(-0.5rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.deploy-label .lucide {
  width: 0.85rem;
  height: 0.85rem;
}

.difficulty-grid button:hover .deploy-label,
.difficulty-grid button:focus-visible .deploy-label {
  opacity: 1;
  transform: translateX(0);
}

#game_start_screen .difficulty-grid .shortcut {
  top: 1rem;
  right: 1rem;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-color-muted);
  font-size: 0.58rem !important;
}

.keyboard-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 1rem clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
  color: var(--text-color-muted);
  font-size: 0.61rem;
  letter-spacing: 0.05em;
}

/* Three side-by-side cards once the panel has the page to itself. Placed after
   the .starting-kit / .deploy-label base rules above so it actually wins —
   these overrides carry the same specificity, so source order decides. */
@media (min-width: 900px) {
  #game_start_screen .difficulty-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #game_start_screen .difficulty-grid button {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.75rem;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  #game_start_screen .difficulty-grid button:last-child {
    border-right: 0;
  }

  /* Equal card heights regardless of how the one- or two-line copy falls, and
     regardless of the "easiest" chip making one topline taller than the rest. */
  #game_start_screen .difficulty-grid .difficulty-topline {
    min-height: 1.6rem;
  }

  #game_start_screen .difficulty-grid button > b {
    min-height: 2rem;
  }

  #game_start_screen .difficulty-grid button > small {
    min-height: 4.2rem;
  }

  #game_start_screen .difficulty-grid .starting-kit {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    width: fit-content;
    min-width: 0;
  }

  /* Persistent, not hover-revealed: each card has to look clickable on sight. */
  #game_start_screen .difficulty-grid .deploy-label {
    grid-column: 1;
    justify-content: flex-start;
    margin-top: 0.35rem;
    opacity: 1;
    transform: none;
  }
}

.keyboard-note .lucide {
  width: 1rem;
  height: 1rem;
}

#game_start_screen .start-footer {
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

#game_start_screen .start-footer p {
  margin: 0;
}

/* In-game dashboard */
#game_screen {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: clamp(0.75rem, 2vw, 1.5rem);
}

#game_screen .command-header {
  display: grid;
  grid-template-columns: auto minmax(32rem, 1fr) auto;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: rgba(13, 17, 16, 0.94);
  box-shadow: var(--shadow-deep);
}

#game_screen .command-header .logo {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-right: 1px solid var(--line);
  letter-spacing: 0;
  text-transform: none;
}

.command-mark {
  display: grid;
  align-self: stretch;
  width: 4.6rem;
  place-items: center;
  border-right: 1px solid var(--line);
  background: var(--ember-soft);
}

.command-mark .lucide {
  width: 1.65rem;
  height: 1.65rem;
  stroke-width: 1.4;
}

#game_screen .command-header .logo > div {
  padding: 0.8rem 1.2rem;
}

.command-label,
#game_screen .resources small {
  display: block;
  color: var(--text-color-muted);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#game_screen .command-header .logo h1 {
  margin: 0.2rem 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
}

/* Every header rule below carries `.command-header` for one reason: the legacy
   Society Fail block in shell.css (`#game_screen header .resources`, etc.)
   out-specifies a plain `#game_screen .resources`. shell.css is off-limits, so
   the current design has to win on specificity. Without the extra class these
   cells fell back to shell's flex row with a 2em gap, overflowed their grid
   track, and painted the Intel counter on top of the contentment badge. */
#game_screen .command-header .resources {
  display: grid;
  grid-template-columns: repeat(4, minmax(6.5rem, 1fr));
  gap: 0;
  font-size: 1rem;
  font-weight: 400;
}

#game_screen .command-header .resources .resource {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.1rem 0.75rem;
  min-width: 0;
  padding: 0.8rem 1rem;
  border-right: 1px solid var(--line);
}

#game_screen .command-header .resources .resource .lucide {
  grid-row: 1 / span 2;
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.6;
}

#game_screen .command-header .resources .resource span {
  color: var(--text-color);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

#game_screen .command-header .time-module {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  border: 0;
  border-left: 0;
}

#game_screen .contentment-display {
  grid-row: 1 / span 2;
  min-width: 6.5rem;
  padding: 0.8rem 1rem; /* same padding rhythm as .resources .resource cells */
  border: 0;
  border-right: 1px solid var(--line);
  background: rgba(145, 173, 120, 0.06);
}

#game_screen .contentment-display .lucide {
  width: 1.25rem;
  height: 1.25rem;
}

#game_screen .contentment-display span {
  color: var(--text-color-alt);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#game_screen .command-header .time-module .time-display {
  min-width: 11rem;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-color-alt);
  font-size: 0.7rem;
}

#game_screen .command-header .time-module .time-display.paused {
  background: rgba(201, 85, 69, 0.25);
}

/* Holds the sun/moon glyph rendered by daynight.js — no decorative dot;
   sizing/reset lives in daynight.css (which also out-specifies the legacy
   shell.css disc rule). */
#game_screen .time-display .day-night-indicator {
  display: inline-flex;
  align-items: center;
}

/* One equal-width column per button, whatever the count — a fixed track count
   wrapped the seventh control onto a second row and pushed its shortcut badge
   over the icon above it. */
#game_screen .command-header .time-module .button-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

#game_screen .command-header .time-module .button-container button {
  min-height: 2.4rem;
  margin: 0;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
}

#game_screen .command-header .time-module .button-container button:last-child {
  border-right: 0;
}

#game_screen .command-header .time-module .button-container button:hover {
  color: var(--ember-bright);
  background: var(--ember-soft);
}

#game_screen .command-header .time-module .button-container .lucide {
  width: 1rem;
  height: 1rem;
}

#actions-module {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin: 0.65rem 0;
  border: 0;
}

/* ---------------------------------------------------------------------------
   First-run handoff (.first-run, set by game.js while totalActions === 0).

   Measured problem: 140 runs started, 63 first actions. Most people who press
   Play never click anything. Not placement — the buttons are the first thing
   under the header — but salience. A player arrives from a large glowing CTA
   and lands on three identical grey rectangles, with the only instruction
   sitting in the transmission bar looking like lore.

   So: name the task next to the control, give exactly ONE button the CTA
   treatment they just used, and take the empty furniture off the first screen.
   Every rule here stops applying the moment the first action lands.
   ------------------------------------------------------------------------- */
.actions-prompt {
  display: none;
  grid-column: 1 / -1;
  margin: 0 0 0.15rem;
  color: var(--text-color-alt);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#game_screen.first-run .actions-prompt {
  display: block;
}

/* One target, not three. The objective already says "deploy a survivor"; food
   is the thing the camp runs out of first, and it is what most first actions
   already choose. */
#game_screen.first-run #gatherFoodBtn {
  border-color: var(--ember-bright);
  background: linear-gradient(180deg, var(--ember-bright), var(--ember) 55%, #b64f3d);
  color: #fff7f2;
  box-shadow: 0 0 2rem rgba(223, 98, 77, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  animation: first-action-pulse 2.4s ease-in-out infinite;
}

#game_screen.first-run #gatherFoodBtn .icon,
#game_screen.first-run #gatherFoodBtn small {
  color: #fff7f2;
}

/* The muted greys of the resting state vanish against the ember fill. */
#game_screen.first-run #gatherFoodBtn::after {
  color: rgba(255, 247, 242, 0.85);
}

#game_screen.first-run #gatherFoodBtn .shortcut {
  border-color: rgba(255, 247, 242, 0.5);
  background: rgba(0, 0, 0, 0.25);
  color: #fff7f2;
}

@keyframes first-action-pulse {
  50% {
    box-shadow: 0 0 3rem rgba(244, 122, 94, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

/* Empty furniture on turn one: six "?" placeholders and an achievement list
   where nothing is unlocked yet. Hiding them pulls the party — the thing the
   game is actually about — up into view. The activity log and upgrades stay:
   the log carries the opening transmission, and upgrades shows what to save
   for, which is a goal rather than noise. */
#game_screen.first-run #secondary-modules,
#game_screen.first-run #achievements-module {
  display: none;
}

#actions-module .action-button {
  justify-content: flex-start;
  min-height: 5rem;
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.026), transparent 60%),
    var(--surface);
  color: var(--text-color);
}

#actions-module .action-button::after {
  content: 'Deploy';
  margin-left: auto;
  color: var(--text-color-muted);
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#actions-module .action-button:hover:not(:disabled) {
  border-color: rgba(223, 98, 77, 0.52);
  background: var(--ember-soft);
  transform: translateY(-2px);
}

#actions-module .action-button:disabled {
  border-color: var(--line);
  background: rgba(12, 15, 15, 0.66);
  color: var(--text-color-muted);
  opacity: 0.62;
}

#actions-module .action-button:disabled::after {
  content: 'No crew free';
}

#actions-module .action-button .lucide {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 1.5;
}

#actions-module .action-button > span:not(.shortcut) {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

#actions-module .action-copy {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

#actions-module .action-copy strong {
  font-weight: 650;
}

#actions-module .action-copy small {
  color: var(--text-color-muted);
  font-family: var(--font-family);
  font-size: 0.54rem;
  letter-spacing: 0.03em;
}

/* Desktop spells out "1 hour"; the 760px block swaps in the short "1h". */
#actions-module .action-copy .yield-h {
  display: none;
}

/* Mobile-only survivor vitals strip (rendered by party.js); the 760px
   block below turns it on so vitals stay visible while choosing actions. */
.vitals-strip {
  display: none;
  gap: 0.55rem;
  width: 100%;
  margin: 0.65rem 0 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-color);
  text-align: left;
  cursor: pointer;
}

.vitals-strip .vital {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  gap: 0.3rem;
}

.vitals-strip .vital-top {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vitals-strip .vital-name {
  overflow: hidden;
  min-width: 0;
  color: var(--text-color-alt);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vitals-strip .vital-state {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  color: var(--text-color-muted);
}

.vitals-strip .vital-health {
  flex: none;
  margin-left: auto;
  font-weight: 700;
}

.vitals-strip .vital-dot {
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
}

.vitals-strip .vital-dot.medium {
  background-color: var(--light-yellow);
}

.vitals-strip .vital-dot.low {
  background-color: var(--dark-red);
}

.vitals-strip .vital-bar {
  overflow: hidden;
  height: 4px;
  background-color: var(--gutter-grey);
}

.vitals-strip .vital-fill {
  display: block;
  height: 100%;
}

.vitals-strip .vital-fill.high {
  background-color: var(--green);
}

.vitals-strip .vital-fill.medium {
  background-color: var(--light-yellow);
}

.vitals-strip .vital-fill.low {
  background-color: var(--dark-red);
}

.latest-event {
  --event-color: var(--blue);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 3.8rem;
  margin-bottom: 0.65rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--event-color) 9%, transparent), transparent 42%),
    var(--surface);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.latest-event.warning {
  --event-color: var(--signal);
}

.latest-event.negative,
.latest-event.error {
  --event-color: var(--ember-bright);
}

.latest-event.positive,
.latest-event.success {
  --event-color: var(--green);
}

.latest-event.whisper {
  --event-color: var(--magenta);
}

.latest-event.tutorial {
  --event-color: var(--blue);
}

.latest-event.is-unread {
  border-color: color-mix(in srgb, var(--event-color) 55%, var(--line));
  box-shadow: inset 3px 0 0 var(--event-color);
}

.latest-event-signal {
  display: grid;
  width: 3.8rem;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--event-color);
}

.latest-event-signal .lucide {
  width: 1.15rem;
  height: 1.15rem;
  stroke-width: 1.5;
}

.latest-event.is-unread .latest-event-signal .lucide {
  filter: drop-shadow(0 0 0.45rem var(--event-color));
  animation: event-signal 1.8s ease-in-out infinite;
}

@keyframes event-signal {
  50% {
    opacity: 0.45;
  }
}

.latest-event-copy {
  display: grid;
  align-content: center;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.65rem 1rem;
}

.latest-event-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--event-color);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.latest-event-unread {
  padding: 0.12rem 0.35rem;
  border: 1px solid color-mix(in srgb, var(--event-color) 45%, transparent);
  background: color-mix(in srgb, var(--event-color) 12%, transparent);
  font-size: 0.44rem;
}

.latest-event-copy p {
  display: flex;
  min-width: 0;
  margin: 0;
  color: var(--text-color-alt);
  font-size: 0.68rem;
  line-height: 1.35;
}

.latest-event-copy strong {
  flex: 0 0 auto;
  margin-right: 0.7rem;
  color: var(--event-color);
  font-size: 0.62rem;
}

#latest-event-message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.latest-event #open-activity-log {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 7.5rem;
  margin: 0;
  padding: 0.65rem 1rem;
  border: 0;
  border-left: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
  color: var(--text-color-alt);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.latest-event #open-activity-log:hover {
  background: color-mix(in srgb, var(--event-color) 12%, transparent);
  color: var(--text-color);
}

.latest-event #open-activity-log .lucide {
  width: 0.9rem;
  height: 0.9rem;
}

.mission-pulse {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(12rem, 0.7fr);
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(90deg, rgba(230, 184, 106, 0.06), transparent 50%),
    var(--surface);
}

.mission-pulse.hidden {
  display: none;
}

.mission-copy {
  display: grid;
  gap: 0.2rem;
}

.mission-copy > span {
  color: var(--signal);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mission-copy strong {
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.mission-copy small {
  color: var(--text-color-muted);
  font-size: 0.56rem;
}

.mission-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

#mission-progress-bar {
  height: 0.34rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}

#mission-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--ember), var(--signal));
  transition: width 220ms ease;
}

#mission-progress-text {
  color: var(--text-color-alt);
  font-size: 0.58rem;
  white-space: nowrap;
}

.share-feedback {
  grid-column: 1 / -1;
  min-height: 0.8rem;
  margin: -0.4rem 0 0;
  color: var(--signal);
  font-size: 0.55rem;
  opacity: 0;
  transition: opacity 160ms ease;
}

.share-feedback.visible {
  opacity: 1;
}

.share-feedback-toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 1000;
  width: max-content;
  max-width: calc(100% - 2rem);
  min-height: 0;
  margin: 0;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(230, 184, 106, 0.4);
  background: rgba(15, 19, 18, 0.98);
  box-shadow: var(--shadow-deep);
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -0.5rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.share-feedback-toast.visible {
  transform: translate(-50%, 0);
}

.shortcut,
#game_screen .shortcut {
  border: 1px solid var(--line-strong);
  background: rgba(242, 240, 231, 0.06);
  color: var(--text-color-alt);
  box-shadow: none;
}

#party-container {
  margin: 0 0 1rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

#party-container > h2,
#game-modules h2 {
  min-height: 2.8rem;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.028);
  color: var(--text-color-alt);
  font-size: 0.61rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#party-container > h2::after {
  content: 'Survivor vitals';
  margin-left: auto;
  color: var(--text-color-muted);
  font-size: 0.52rem;
  font-weight: 500;
}

/* Party header collapses like the game modules; it lives outside
   #game-modules so the collapsible affordances are restated here. */
#party-container > h2.collapsible {
  cursor: pointer;
  user-select: none;
}

/* order: 1 keeps the chevron to the right of the ::after label. */
#party-container > h2.collapsible .toggle-icon {
  order: 1;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

#party-container > h2.collapsible.collapsed .toggle-icon {
  transform: rotate(180deg);
}

/* Two ids: must out-specify the `#party-container #party-display` grid rule. */
#party-container #party-display.collapsed {
  display: none;
}

#party-container #party-display {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

#party-container #party-display .person {
  min-width: 0;
  max-width: none;
  border: 0;
  background: #0d1110;
}

#party-container #party-display .person .person-header {
  min-height: 3.25rem;
  border-bottom: 1px solid var(--line);
}

#party-container #party-display .person h3 {
  padding: 0.8rem 1rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

#party-container #party-display .person .busy-label {
  min-width: 4.8rem;
  justify-content: center;
  border-left: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text-color-alt);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}

#party-container #party-display .person .busy-label.resting {
  background: rgba(164, 128, 158, 0.2);
}

#party-container #party-display .person .busy-label.busy {
  background: rgba(145, 173, 120, 0.2);
}

#party-container #party-display .person .busy-label.dead {
  background: rgba(201, 85, 69, 0.3);
}

#party-container #party-display .stats-container {
  padding: 0.9rem 1rem;
}

#party-container #party-display .stats td {
  padding: 0.12rem 0.3rem;
  color: var(--text-color-alt);
  font-size: 0.62rem;
}

#party-container #party-display .stats .progress-bar {
  height: 0.34rem;
  overflow: hidden;
  background: var(--gutter-grey);
  border-radius: 999px;
}

#party-container #party-display .stats .progress {
  border-radius: inherit;
}

#party-container #party-display .person-actions {
  border-top: 1px solid var(--line);
}

#party-container #party-display .person-actions button {
  min-height: 2.8rem;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--text-color-alt);
  font-size: 0.68rem;
}

#party-container #party-display .person-actions button:hover:not(:disabled) {
  background: var(--ember-soft);
  color: var(--text-color);
}

#party-container #party-display .specialization {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

#game-modules {
  gap: 1rem;
}

#main-modules,
#secondary-modules {
  gap: 1rem;
}

#main-modules > section,
#secondary-modules > section,
#log-module,
#upgrades-module {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--border-radius);
  background: var(--surface);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

#game-modules h2.collapsible {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.028);
  color: var(--text-color-alt);
}

#game-modules h2.collapsible:hover {
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.05);
}

#log-content .log-entry {
  min-height: 2.7rem;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text-color-alt);
}

#log-content .log-entry b {
  width: 4.6rem;
  min-width: 4.6rem;
  border-right: 1px solid var(--line);
  color: var(--text-color-muted);
}

#log-content .log-entry.info,
#log-content .log-entry.neutral {
  background: rgba(110, 165, 199, 0.08);
}

#log-content .log-entry.warning {
  background: rgba(230, 184, 106, 0.13);
}

#log-content .log-entry.negative,
#log-content .log-entry.error {
  background: rgba(201, 85, 69, 0.16);
}

#log-content .log-entry.positive,
#log-content .log-entry.success {
  background: rgba(145, 173, 120, 0.13);
}

#log-content .log-entry.whisper {
  background: rgba(164, 128, 158, 0.15);
}

#log-content .log-entry.tutorial {
  background: rgba(110, 165, 199, 0.16);
}

#upgrades .upgrade-button {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

#upgrades .upgrade-button:hover:not(.cannot-afford):not(.unavailable) {
  background: var(--ember-soft);
}

#upgrades .upgrade-button.purchased {
  background: rgba(145, 173, 120, 0.16);
}

#upgrades .upgrade-name {
  color: var(--text-color);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

#upgrades .upgrade-effect {
  color: var(--text-color-alt);
  font-size: 0.68rem;
  line-height: 1.45;
}

#achievements-module #achievements {
  gap: 1px;
  border-top: 0;
  background: var(--line);
}

#achievements .achievement-item {
  min-height: 4.5rem;
  padding: 0.8rem;
  border: 0;
  background: #0d1110;
}

#achievements .achievement-item.achievement-unlocked {
  background: rgba(145, 173, 120, 0.16);
}

#achievements .achievement-name {
  color: var(--text-color);
  font-size: 0.72rem;
}

#achievements .achievement-description {
  margin-top: 0.2rem;
  color: var(--text-color-alt);
  font-size: 0.62rem;
  line-height: 1.35;
}

/* Full-width module stack at every breakpoint: display:flex neutralizes the
   legacy column-count masonry (columns rebalance as blocks collapse, which
   reads as sections shrinking), so sections keep the pane's full width and
   the page simply gets shorter as blocks are minimized. Unlocked modules
   order before still-locked mystery cards so live gameplay panels
   (e.g. Expeditions) are not stuck under the mystery stack — display order
   only, the DOM order is untouched. */
#secondary-modules {
  display: flex;
  flex-direction: column;
}

#secondary-modules > section.mystery {
  order: 1;
}

#secondary-modules > section {
  margin-bottom: 1rem;
}

/* Locked mystery cards are teasers with no gameplay: slim single rows at
   every width, so the stack stays scannable instead of dominating the page. */
#secondary-modules .mystery {
  min-height: 0;
  align-items: stretch;
  border-color: var(--line);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.02), transparent),
    repeating-linear-gradient(135deg, transparent, transparent 12px, rgba(255, 255, 255, 0.012) 12px, rgba(255, 255, 255, 0.012) 13px),
    #0d1110;
}

#secondary-modules .mystery-content {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  text-align: left;
}

#secondary-modules .mystery-content .icon {
  margin-bottom: 0;
  color: var(--text-color-muted);
  line-height: 0;
  opacity: 0.62;
}

#secondary-modules .mystery-content .icon .lucide {
  width: 1.2rem;
  height: 1.2rem;
}

#secondary-modules .mystery-content .title {
  margin-bottom: 0;
  color: var(--text-color-alt);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

#secondary-modules .mystery-content .description {
  overflow: hidden;
  min-width: 0;
  max-width: none;
  color: var(--text-color-muted);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#game_screen > footer {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  color: var(--text-color-muted);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.modal {
  background: rgba(3, 5, 5, 0.84);
  backdrop-filter: blur(10px);
}

.modal .modal-content {
  border: 1px solid var(--line-strong);
  background: #101413;
  box-shadow: var(--shadow-deep);
}

.modal .modal-content header,
.modal .modal-content .shortcuts-toggle {
  border-bottom: 1px solid var(--line);
}

.modal .modal-content .shortcuts-list th {
  border-bottom: 1px solid var(--line);
  color: var(--text-color-muted);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.modal .modal-content .shortcuts-list kbd {
  border: 1px solid var(--line-strong);
  background: var(--surface-soft);
  color: var(--text-color);
}

.share-dialog {
  position: fixed;
  inset: 0;
  width: min(calc(100% - 2rem), 680px);
  max-height: min(calc(100dvh - 2rem), 760px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--text-color);
  color-scheme: dark;
  border: 1px solid rgba(230, 184, 106, 0.46);
  border-radius: 2px;
  background: #101413;
  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(110, 165, 199, 0.08) inset;
}

.share-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 38%, rgba(110, 165, 199, 0.12), transparent 44%),
    rgba(3, 5, 5, 0.88);
  backdrop-filter: blur(12px) saturate(0.72);
}

.share-dialog[open] {
  animation: reset-dialog-enter 180ms ease-out both;
}

.share-dialog-panel {
  position: relative;
  max-height: min(calc(100dvh - 2rem), 760px);
  overflow-y: auto;
  isolation: isolate;
}

.share-dialog-panel::before,
.share-dialog-panel::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.share-dialog-panel::before {
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.share-dialog-panel::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--signal) 42%, transparent 82%);
}

.share-dialog-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(110, 165, 199, 0.1), transparent 72%);
}

.share-dialog-signal {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  color: var(--signal);
  border: 1px solid rgba(230, 184, 106, 0.46);
  background: rgba(230, 184, 106, 0.08);
  transform: rotate(45deg);
}

.share-dialog-signal .icon {
  width: 1.35rem;
  height: 1.35rem;
  transform: rotate(-45deg);
}

.share-dialog-header p {
  margin: 0 0 0.25rem;
  color: var(--blue);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.share-dialog-header h2 {
  margin: 0;
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 5vw, 2.35rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.share-dialog-close {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  place-items: center;
  color: var(--text-color-muted);
  border: 1px solid transparent;
  background: transparent;
}

.share-dialog-close:hover {
  color: var(--text-color);
  border-color: var(--line-strong);
}

.share-dialog-close .icon {
  width: 1rem;
  height: 1rem;
}

.share-dialog-body {
  padding: clamp(1.25rem, 4vw, 1.75rem);
}

.share-dialog-brief {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(110, 165, 199, 0.25);
  border-left: 3px solid var(--blue);
  background: rgba(110, 165, 199, 0.07);
}

.share-dialog-brief span,
.share-dialog-body > label {
  color: var(--text-color-muted);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.share-dialog-brief strong {
  color: var(--signal);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.share-dialog-brief p {
  margin: 0.2rem 0 0;
  color: var(--text-color-alt);
  font-size: 0.72rem;
}

.share-dialog-body > label {
  display: block;
  margin-bottom: 0.5rem;
}

.share-dialog textarea {
  display: block;
  width: 100%;
  min-height: 8.2rem;
  padding: 0.9rem 1rem;
  resize: vertical;
  color: var(--text-color);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  outline: none;
  background: rgba(3, 5, 5, 0.58);
  font-family: var(--font-family);
  font-size: 0.72rem;
  line-height: 1.55;
}

.share-dialog textarea:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 2px rgba(230, 184, 106, 0.12);
}

.share-dialog-hint {
  margin: 0.55rem 0 0;
  color: var(--text-color-muted);
  font-size: 0.62rem;
}

.share-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  padding: 0 clamp(1.25rem, 4vw, 1.75rem) 1rem;
}

.share-dialog-actions button,
.share-dialog-actions a {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.15rem;
  color: var(--text-color-alt);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  font-family: var(--font-family);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.share-dialog-actions button:hover,
.share-dialog-actions a:hover {
  color: var(--text-color);
  border-color: var(--text-color-muted);
  background: var(--surface-soft);
}

.share-dialog-actions .share-dialog-copy {
  color: #17130b;
  border-color: var(--signal);
  background: linear-gradient(135deg, #f0ca87, var(--signal));
  box-shadow: 0 12px 30px rgba(230, 184, 106, 0.16);
}

.share-dialog-actions .share-dialog-copy:hover {
  color: #17130b;
  border-color: #ffe0a8;
  background: linear-gradient(135deg, #f8d898, #e6b86a);
}

.share-dialog-actions .icon {
  width: 1rem;
  height: 1rem;
}

.share-dialog-status {
  min-height: 2.6rem;
  margin: 0;
  padding: 0 1.75rem 1.25rem;
  color: var(--signal);
  font-size: 0.63rem;
  text-align: center;
}

.reset-dialog {
  position: fixed;
  inset: 0;
  width: min(calc(100% - 2rem), 620px);
  max-height: min(calc(100dvh - 2rem), 720px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--text-color);
  color-scheme: dark;
  border: 1px solid rgba(223, 98, 77, 0.48);
  border-radius: 2px;
  background: #101413;
  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(230, 184, 106, 0.08) inset;
}

.reset-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 38%, rgba(223, 98, 77, 0.12), transparent 42%),
    rgba(3, 5, 5, 0.88);
  backdrop-filter: blur(12px) saturate(0.72);
}

.reset-dialog[open] {
  animation: reset-dialog-enter 180ms ease-out both;
}

.reset-dialog-panel {
  position: relative;
  isolation: isolate;
}

.reset-dialog-panel::before,
.reset-dialog-panel::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.reset-dialog-panel::before {
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.reset-dialog-panel::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ember-bright), var(--signal) 42%, transparent 82%);
}

.reset-dialog-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(223, 98, 77, 0.1), transparent 72%);
}

.reset-dialog-signal {
  display: grid;
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  color: var(--ember-bright);
  border: 1px solid rgba(223, 98, 77, 0.48);
  background: rgba(223, 98, 77, 0.1);
  transform: rotate(45deg);
}

.reset-dialog-signal .icon {
  width: 1.35rem;
  height: 1.35rem;
  transform: rotate(-45deg);
}

.reset-dialog-header p {
  margin: 0 0 0.25rem;
  color: var(--ember-bright);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.reset-dialog-header h2 {
  margin: 0;
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 5vw, 2.35rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.reset-dialog-body {
  padding: clamp(1.25rem, 4vw, 1.75rem);
}

.reset-dialog-body > p {
  max-width: 54ch;
  margin: 0;
  color: var(--text-color-alt);
  font-size: 0.88rem;
  line-height: 1.65;
}

.reset-dialog-impact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.35rem 0 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(223, 98, 77, 0.3);
  border-left: 3px solid var(--ember);
  background: rgba(223, 98, 77, 0.07);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reset-dialog-impact span {
  color: var(--text-color-muted);
}

.reset-dialog-impact strong {
  color: var(--ember-bright);
  font-size: inherit;
  text-align: right;
}

.reset-dialog-body .reset-dialog-note {
  color: var(--text-color-muted);
  font-size: 0.68rem;
}

.reset-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem clamp(1.25rem, 4vw, 1.75rem) clamp(1.25rem, 4vw, 1.75rem);
}

.reset-dialog-actions button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.15rem;
  color: var(--text-color-alt);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  font-family: var(--font-family);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reset-dialog-actions button:hover {
  color: var(--text-color);
  border-color: var(--text-color-muted);
  background: var(--surface-soft);
}

.reset-dialog-actions .reset-dialog-confirm {
  color: #fff;
  border-color: var(--ember-bright);
  background: linear-gradient(135deg, var(--ember-bright), var(--dark-red));
  box-shadow: 0 12px 30px rgba(223, 98, 77, 0.2);
}

.reset-dialog-actions .reset-dialog-confirm:hover {
  color: #fff;
  border-color: #ff9a82;
  background: linear-gradient(135deg, #f9876d, var(--ember));
}

.reset-dialog-actions .icon {
  width: 1rem;
  height: 1rem;
}

@keyframes reset-dialog-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 520px) {
  .share-dialog {
    width: min(calc(100% - 1rem), 680px);
  }

  .share-dialog-header {
    grid-template-columns: auto 1fr;
  }

  .share-dialog-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
  }

  .share-dialog-header > div {
    padding-right: 1.5rem;
  }

  .share-dialog-actions {
    grid-template-columns: 1fr;
  }

  .share-dialog-actions button,
  .share-dialog-actions a {
    width: 100%;
  }

  .share-dialog-status {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .reset-dialog {
    width: min(calc(100% - 1rem), 620px);
  }

  .reset-dialog-impact {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .reset-dialog-impact strong {
    text-align: left;
  }

  .reset-dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .reset-dialog-actions button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .share-dialog[open],
  .reset-dialog[open] {
    animation: none;
  }
}

#game_over_screen {
  width: min(calc(100% - 2rem), 640px);
  padding: 0;
}

#game_over_screen .splash_screen {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #101413;
  box-shadow: var(--shadow-deep);
}

#game_over_screen .splash_header,
#game_over_screen #game_stats .numbers,
#game_over_screen #game_stats h2 {
  border-color: var(--line);
}

#game_over_screen button {
  background: var(--ember);
}

#game_over_screen .game-over-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#game_over_screen .game-over-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

#game_over_screen .game-over-actions button + button {
  border-left: 1px solid var(--line);
  background: var(--surface-soft);
}

#game_over_screen .game-over-actions .lucide {
  width: 1rem;
  height: 1rem;
}

#game_over_screen .share-feedback {
  min-height: 2.2rem;
  margin: 0;
  padding: 0.7rem 1rem;
  background: rgba(230, 184, 106, 0.07);
  text-align: center;
}

.achievement-toast {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 1000;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.75rem;
  width: min(calc(100% - 2rem), 22rem);
  padding: 1rem;
  border: 1px solid rgba(230, 184, 106, 0.5);
  background: rgba(15, 19, 18, 0.98);
  box-shadow: var(--shadow-deep);
  opacity: 0;
  transform: translateY(-0.75rem);
  transition: opacity 200ms ease, transform 200ms ease;
}

.achievement-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.achievement-toast .lucide {
  grid-row: 1 / span 2;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--signal);
}

.achievement-toast span {
  color: var(--text-color-muted);
  font-size: 0.5rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.achievement-toast strong {
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: 1rem;
}

* {
  scrollbar-color: var(--gutter-grey) transparent;
  scrollbar-width: thin;
}

@media (min-width: 100ch) {
  #game-modules {
    display: grid;
    grid-template-columns: minmax(22rem, 0.9fr) minmax(0, 1.6fr);
  }
}

@media (max-width: 1280px) {
  .start-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
  }

  #game_screen .command-header {
    grid-template-columns: auto 1fr;
  }

  #game_screen .command-header .time-module {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    border-top: 1px solid var(--line);
  }

  #game_screen .contentment-display {
    grid-row: auto;
    flex-direction: row;
    gap: 0.65rem;
    width: auto;
    border-top: 0;
  }

  #game_screen .command-header .time-module .time-display {
    border: 0;
    border-right: 1px solid var(--line);
  }

  #game_screen .command-header .time-module .button-container {
    min-width: 10rem;
  }
}

@media (max-width: 1000px) {
  .start-hero {
    padding: 1rem;
  }

  .start-sections {
    padding-inline: 1rem;
  }

  .start-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2rem 0;
  }

  .start-briefing {
    max-width: 48rem;
  }

  #game_start_screen .start-briefing h1 {
    font-size: clamp(3.5rem, 7vw, 5.25rem);
  }

  .hero-lede,
  .mission-facts {
    max-width: 46rem;
  }

  /* The 1px grid gap over a --line background keeps drawing the dividers,
     horizontally now instead of vertically. */
  .pitch-grid,
  .loop-steps {
    grid-template-columns: 1fr;
  }

  #party-container #party-display {
    grid-template-columns: 1fr;
  }

  #party-container #party-display .person {
    min-width: 0;
    max-width: none;
    border: 0;
  }

  #actions-module {
    grid-template-columns: 1fr;
  }

  #actions-module .action-button {
    min-height: 4.2rem;
    border: 1px solid var(--line);
  }

  .mission-pulse {
    grid-template-columns: minmax(0, 1.3fr) minmax(12rem, 0.7fr);
  }

  .mission-progress {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  /* Phone fold budget: title -> lede -> CTA -> proof. The product shot drops
     below the CTA so the button is reachable without a scroll. */
  .start-layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 1.5rem 0 2rem;
  }

  .start-briefing .kicker {
    margin-bottom: 1rem;
  }

  .hero-lede {
    margin-top: 1.1rem;
    font-size: 1rem;
  }

  .deploy-cta {
    margin-top: 1.4rem;
  }

  #game_start_screen .play-now {
    width: 100%;
  }

  .mission-facts {
    margin-top: 1.5rem;
  }

  /* The liveness line under the CTA echoes the strip's data; showing both
     on a phone spends fold space twice. */
  #game_start_screen .world-signal {
    display: none;
  }

  #game_start_screen .start-briefing h1 {
    font-size: clamp(4rem, 14vw, 7rem);
  }

  .start-nav,
  .start-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .signal-status {
    align-self: flex-start;
  }

  .challenge-brief {
    grid-template-columns: auto 1fr;
  }

  .challenge-brief strong {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .title-lockup {
    align-items: flex-start;
  }

  .gate-emblem {
    flex-basis: 4rem;
    width: 4rem;
    height: 4rem;
  }

  /* One slim facts row instead of three stacked cells. */
  .mission-facts div {
    padding: 0.55rem 0.6rem;
  }

  #game_start_screen .difficulty-grid button {
    grid-template-columns: 1fr;
  }

  #game_start_screen .starting-kit {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    width: fit-content;
    min-width: 0;
  }

  .deploy-label {
    grid-column: 1;
    justify-content: flex-start;
    margin-top: 0.35rem;
    opacity: 1;
    transform: none;
  }

  /* Vitals strip pins to the viewport bottom so survivor health stays in
     view mid-scroll. z-index 30: below the season forecast card (40) and the
     modal layer (1000). Mostly-opaque surface keeps content scrolling
     beneath it readable. */
  .vitals-strip {
    display: flex;
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0.5rem 0.65rem calc(0.5rem + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line-strong);
    background: rgba(13, 17, 16, 0.94);
  }

  /* Room for the fixed strip so the footer never hides beneath it. */
  #game_screen {
    padding-bottom: calc(4.6rem + env(safe-area-inset-bottom));
  }

  /* Three gather actions in ONE row: icon on top, short label, tiny yield. */
  #actions-module {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0.5rem 0;
  }

  #actions-module .action-button {
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    min-height: 4.8rem;
    padding: 0.5rem 0.35rem;
  }

  #actions-module .action-button::after {
    display: none;
  }

  #actions-module .action-button .shortcut {
    display: none;
  }

  #actions-module .action-button .lucide {
    width: 1.25rem;
    height: 1.25rem;
  }

  #actions-module .action-copy {
    align-items: center;
    gap: 0.1rem;
    text-align: center;
  }

  #actions-module .action-copy strong {
    line-height: 1.25;
    white-space: nowrap;
  }

  /* "Gather Food · 3–8 food · 1 hour" compacts to "FOOD · 3–8 · 1H". */
  #actions-module .action-copy .action-verb,
  #actions-module .action-copy .yield-full {
    display: none;
  }

  #actions-module .action-copy .yield-h {
    display: inline;
  }

  #actions-module .action-copy small {
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Compact survivor cards: ~60% of the desktop vertical rhythm; the
     eat/drink/rest row keeps its 2.8rem (~45px) tap height. */
  /* line-height overrides matter: the base 1.45rem is an ABSOLUTE value,
     so shrunken fonts alone leave every row 23px tall. */
  #party-container #party-display .person .person-header {
    min-height: 2rem;
  }

  #party-container #party-display .person h3 {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.2;
  }

  #party-container #party-display .person h3 .lucide {
    width: 0.9rem;
    height: 0.9rem;
  }

  #party-container #party-display .person .busy-label {
    padding: 0.25rem 0.55rem;
    line-height: 1.2;
  }

  #party-container #party-display .stats-container {
    padding: 0.35rem 0.6rem;
  }

  #party-container #party-display .stats td {
    padding: 0.05rem 0.25rem;
    font-size: 0.55rem;
    line-height: 1.25;
  }

  #party-container #party-display .stats .progress-bar {
    height: 0.2rem;
  }

  #party-container #party-display .specialization {
    font-size: 0.7em;
  }

  /* A dead member collapses to one slim row: name + state tag, no bars,
     no actions. Desktop keeps the full card and its DEAD label. */
  #party-container #party-display .person.dead .specialization,
  #party-container #party-display .person.dead .stats-container,
  #party-container #party-display .person.dead .person-actions {
    display: none;
  }

  #party-container #party-display .person.dead .person-header {
    border-bottom: 0;
  }

  /* Breach-voice tag for the slim row ("DEAD" reads LOST on mobile). */
  #party-container #party-display .person.dead .busy-label {
    font-size: 0;
    letter-spacing: 0;
  }

  #party-container #party-display .person.dead .busy-label::after {
    content: 'LOST';
    font-size: 0.55rem;
    letter-spacing: 0.1em;
  }

  /* Compact widget blocks: tighter paddings and rhythm across the page. */
  #game-modules,
  #main-modules {
    gap: 0.65rem;
  }

  #secondary-modules > section {
    margin-bottom: 0.65rem;
  }

  .mission-pulse {
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    padding: 0.6rem 0.75rem;
  }

  .mission-copy strong {
    font-size: 0.78rem;
  }

  .latest-event {
    min-height: 3rem;
  }

  #log-content .log-entry {
    min-height: 2.2rem;
  }

  #upgrades .upgrade-button {
    padding: 0.6rem 0.8rem;
  }

  #achievements .achievement-item {
    min-height: 0;
    padding: 0.55rem 0.8rem;
  }

  /* Mystery rows (slim at every width — see base rules) tighten further. */
  #secondary-modules .mystery-content {
    gap: 0.55rem;
    padding: 0.6rem 0.8rem;
  }

  #secondary-modules .mystery-content .icon .lucide {
    width: 1.1rem;
    height: 1.1rem;
  }

  #secondary-modules .mystery-content .title {
    font-size: 0.78rem;
  }

  #secondary-modules .mystery-content .description {
    font-size: 0.68rem;
    line-height: 1.3;
  }

  /* Compact command header (~180px tall). Every selector below carries
     .command-header: legacy shell.css nests these under `#game_screen
     header …` (an extra type selector), which otherwise out-specifies
     the mobile overrides here. */
  #game_screen .command-header {
    grid-template-columns: 1fr;
  }

  #game_screen .command-header .logo {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  #game_screen .command-header .command-mark {
    width: 2.6rem;
  }

  /* padding/border: shell.css `.logo .icon` sizing would swallow the
     shrunken glyph entirely. */
  #game_screen .command-header .command-mark .lucide {
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: 0;
  }

  #game_screen .command-header .logo > div {
    padding: 0.3rem 0.8rem;
  }

  #game_screen .command-header .command-label {
    line-height: 1.2;
  }

  #game_screen .command-header .logo h1 {
    margin-top: 0.1rem;
    font-size: 1rem;
  }

  #game_screen .command-header .resources {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: auto;
    padding: 0;
    border-bottom: 0;
  }

  #game_screen .command-header .resources .resource {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.1rem 0.45rem;
    padding: 0.45rem 0.6rem;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  #game_screen .command-header .resources .resource:last-child {
    border-right: 0;
  }

  #game_screen .command-header .resources .resource .lucide {
    width: 1.05rem;
    height: 1.05rem;
  }

  #game_screen .command-header .resources .resource span {
    font-size: 0.95rem;
  }

  #game_screen .command-header .time-module {
    display: grid;
    grid-column: 1;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    border-top: 1px solid var(--line);
  }

  #game_screen .command-header .contentment-display {
    grid-row: 1;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    min-height: 2.6rem;
    padding: 0.4rem 0.8rem;
    border-top: 0;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  #game_screen .command-header .time-module .time-display {
    width: auto;
    min-width: 0;
    min-height: 2.6rem;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  /* Utility buttons: compact right-aligned cluster, no full-width borders. */
  #game_screen .command-header .time-module .button-container {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    min-height: 0;
  }

  #game_screen .command-header .time-module .button-container button {
    flex: 0 0 auto;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 0;
  }

  /* Borderless cluster: keep the recovered-count badge inside the button
     instead of poking into the row above. */
  #game_screen .command-header .button-container .transmissions-count {
    top: 0.1rem;
    right: 0.1rem;
  }

  #achievements-module #achievements {
    grid-template-columns: 1fr;
  }

  .mission-pulse {
    grid-template-columns: 1fr;
  }

  .mission-progress {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 520px) {
  .start-hero {
    padding: 0.75rem;
  }

  .start-sections {
    padding-inline: 0.75rem;
  }

  .start-layout {
    padding: 2rem 0;
  }

  .title-lockup {
    display: block;
  }

  .gate-emblem {
    margin-bottom: 1.5rem;
  }

  #game_start_screen .start-briefing h1 {
    font-size: clamp(3.6rem, 19vw, 5.3rem);
  }

  .deployment-header {
    padding: 1.25rem;
  }

  #game_start_screen .difficulty-grid button {
    padding: 1.25rem;
  }

  .keyboard-note {
    display: none;
  }

  /* Bottom padding stays large: the fixed vitals strip from the 760px
     block still overlays the viewport at this width. */
  #game_screen {
    padding: 0.5rem 0.5rem calc(4.6rem + env(safe-area-inset-bottom));
  }

  #actions-module .action-button::after,
  #party-container > h2::after {
    display: none;
  }

  .latest-event {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .latest-event-signal {
    width: 3rem;
  }

  .latest-event-copy {
    padding: 0.6rem 0.7rem;
  }

  .latest-event #open-activity-log {
    min-width: 3rem;
    padding: 0.65rem;
    font-size: 0;
  }

  .latest-event #open-activity-log .lucide {
    width: 1rem;
    height: 1rem;
  }

  #party-container #party-display .person-actions button {
    font-size: 0.6rem;
  }

  #secondary-modules {
    column-count: 1;
  }

  #game_over_screen .game-over-actions {
    grid-template-columns: 1fr;
  }

  #game_over_screen .game-over-actions button + button {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}