/* 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;
}

/* Direct-landing arm: the same pre-paint script tags a first-time visitor
   bucketed straight into the camp, so the intro never paints for them either.
   game.js removes it whether it starts the run or shows the intro. */
html.landing-direct #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;
}

/* Plain sentences saying what category of game this is, for readers who
   haven't decided yet and for retrieval systems that quote whole sentences. */
.category-copy {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  color: var(--text-color-alt);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.65;
}

.category-copy p {
  margin: 0;
}

.category-copy p:first-child {
  color: var(--text-color);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.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;
}

.faq-more {
  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
  color: var(--text-color-alt);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 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;
}

/* A store at its cap (stores.js): the number goes amber and the label says so. */
#game_screen .command-header .resources .resource.full span {
  color: var(--warning, #e0a458);
}

#game_screen .command-header .resources .resource.full small::after {
  content: ' · full';
  letter-spacing: 0;
  text-transform: none;
}

#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).
   Names the task beside the control and gives exactly ONE button the CTA
   treatment; the other two and the camp below drop to a whisper. All opacity,
   nothing disabled — a water click is a fine first action and counts as one.
   Every rule here stops applying the moment that action lands.
   ------------------------------------------------------------------------- */
.actions-prompt {
  display: none;
  grid-column: 1 / -1;
  margin: 0 0 0.35rem;
  color: var(--ember-bright);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

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

/* ---------------------------------------------------------------------------
   Direct-landing coach (.coached + data-coach-step, set by game.js for the
   land-direct arm while the first four orders are given). The brief says what
   the game is; the coach line takes over from .actions-prompt after the first
   order and names the next stock, lighting that one button. Both end at the
   fourth order, where the mission ladder is already carrying the objective.
   ------------------------------------------------------------------------- */
.camp-brief {
  display: none;
  margin: 0.65rem 0 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--ember);
  border-left-width: 4px;
  background: linear-gradient(90deg, var(--ember-soft), transparent 60%), var(--surface);
}

#game_screen.coached .camp-brief {
  display: block;
}

.camp-brief p {
  max-width: 64ch;
  margin: 0;
  line-height: 1.5;
}

.camp-brief strong {
  color: var(--ember-bright);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}

.camp-brief-intro {
  margin: 0.45rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-color-alt);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.camp-brief-intro:hover,
.camp-brief-intro:focus-visible {
  color: var(--text-color);
}

.actions-coach {
  grid-column: 1 / -1;
  margin: 0 0 0.35rem;
  color: var(--ember-bright);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

/* The next stock's button carries the border, not the full first-run fill:
   after the first order the camp is lit and one lit button is enough. */
#game_screen.coached[data-coach-step="food"] #gatherFoodBtn,
#game_screen.coached[data-coach-step="water"] #collectWaterBtn,
#game_screen.coached[data-coach-step="wood"] #chopWoodBtn {
  border-color: var(--ember-bright);
  box-shadow: 0 0 1.4rem rgba(223, 98, 77, 0.28);
}

/* 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;
}

/* The other two actions stay live but drop to a whisper, so the eye has one
   place to land. Written as :not() on purpose: the handoff test pins that
   exactly one action carries the #id highlight. */
#game_screen.first-run .action-button:not(#gatherFoodBtn) {
  opacity: 0.5;
}

#game_screen.first-run .action-button:not(#gatherFoodBtn):hover,
#game_screen.first-run .action-button:not(#gatherFoodBtn):focus-visible {
  opacity: 1;
}

/* Everything below the actions dims until the first action lands, then lifts
   back in half a second — the camp lighting up is the reward for clicking.
   Opacity, never display: the party and the log stay findable for anyone
   who reads before acting. .latest-event already transitions its border and
   shadow; this list must keep those or the id rule would drop them. */
#latest-event,
#mission-pulse,
#party-container,
#game-modules {
  transition: border-color 180ms ease, box-shadow 180ms ease, opacity 0.5s ease;
}

#game_screen.first-run #latest-event,
#game_screen.first-run #mission-pulse,
#game_screen.first-run #party-container,
#game_screen.first-run #game-modules {
  opacity: 0.55;
}

@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.js sets data-wait on every disabled button ("Crew back in 3s",
   "Paused"); the literal is only the fallback for the first paint. */
#actions-module .action-button:disabled::after {
  content: 'No crew free';
}

#actions-module .action-button:disabled[data-wait]::after {
  content: attr(data-wait);
  color: var(--text-color);
  font-variant-numeric: tabular-nums;
}

#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_screen.first-run .action-button {
    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;
  }

  /*
     The idle "Deploy" hint has no room at 119px, but the DISABLED state must
     never be silent. Three quick clicks commit every survivor and all three
     buttons go dim; hiding ::after here hid the only explanation on the
     button itself ("Crew back in 4s"), leaving mobile players three grey
     rectangles and no reason. 429 of 747 abandons over 09-05..09-06 came
     after one or two clicks, which is exactly this moment.
  */
  #actions-module .action-button::after {
    display: none;
  }

  #actions-module .action-button:disabled::after {
    display: block;
    margin: 0.1rem 0 0;
    font-size: 0.5rem;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }

  #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;
  }

  /*
     Keep the VERB. "FOOD" is a label; "Gather Food" is an instruction, and
     the instruction is what converts — mobile takes a first action on 60.4%
     of runs against 80.7% on desktop, where the verb survives. The yield
     line is what gets compacted instead: "Gather Food · 3–8 · 1H".
  */
  #actions-module .action-copy .yield-full {
    display: none;
  }

  #actions-module .action-copy strong {
    font-size: 0.78rem;
    letter-spacing: 0.01em;
  }

  #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;
  }
}