:root {
  color-scheme: dark;

  --black: #080b0c;
  --panel: #101516;
  --panel-light: #151c1e;

  --ink: #d9dfd9;
  --muted:#9aa7a1;

  --line: #35413d;

  --green: #95b99f;
  --amber: #d1a44c;
  --red: #bd4941;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

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

body {
  min-height: 100vh;
  min-height: 100dvh;

  background:
    radial-gradient(
      circle at 50% -20%,
      #172224,
      transparent 42%
    ),
    var(--black);

  color: var(--ink);

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: 16px;
  line-height: 1.5;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}


/* DAY 1 SHELTER */

.entry {
  position: fixed;
  inset: 0;

  z-index: 100;

  overflow: hidden;

  background: #080a09;

  transition:
    opacity 800ms ease,
    visibility 800ms ease;
}

.entry.hidden {
  opacity: 0;
  visibility: hidden;
}


.room {
  position: relative;

  width: 100%;
  height: 100vh;
  height: 100dvh;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 66% 78%,
      rgba(220, 168, 87, 0.13),
      transparent 27%
    ),
    linear-gradient(
      to bottom,
      #161917,
      #101311 56%,
      #080a09
    );

  color: #e0e1d9;
}


/* WINDOW */

.window {
  position: absolute;

  left: 7%;
  top: 8%;

  width: min(35vw, 470px);
  height: min(55vh, 550px);

  overflow: hidden;

  border:
    15px solid #292823;

  background: #737c72;

  box-shadow:
    0 0 40px
    rgba(111, 124, 112, 0.12);
}

.outside-light {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      #6d7772 0%,
      #555d59 42%,
      #252b28 42% 100%
    );
}

.outside-light::before {
  content: "";

  position: absolute;

  left: 10%;
  right: 10%;
  bottom: 19%;

  height: 24%;

  background:
    repeating-linear-gradient(
      90deg,
      #161b18 0 14px,
      transparent 14px 52px
    );

  opacity: 0.7;
}


/* boarded window */

.board {
  position: absolute;

  left: -8%;
  width: 116%;
  height: 52px;

  background:
    linear-gradient(
      92deg,
      #4b3423,
      #65462d 40%,
      #3a281c
    );

  box-shadow:
    0 4px 7px
    rgba(0, 0, 0, 0.5);
}

.board-one {
  top: 22%;

  transform:
    rotate(-5deg);
}

.board-two {
  top: 48%;

  transform:
    rotate(4deg);
}

.board-three {
  top: 73%;

  transform:
    rotate(-2deg);
}


/* curtains */

.curtain {
  position: absolute;

  top: 0;
  bottom: 0;

  width: 20%;

  background:
    rgba(37, 39, 35, 0.85);
}

.curtain-left {
  left: 0;
}

.curtain-right {
  right: 0;
}


/* DOOR */

.door {
  position: absolute;

  right: 5%;
  top: 12%;

  width: min(25vw, 320px);
  height: 66%;

  border:
    8px solid #1d201d;

  background:
    linear-gradient(
      90deg,
      #292b27,
      #333630 55%,
      #242621
    );

  box-shadow:
    inset 0 0 25px
    rgba(0, 0, 0, 0.35);
}

.door-handle {
  position: absolute;

  right: 12%;
  top: 53%;

  width: 21px;
  height: 21px;

  border-radius: 50%;

  background: #78776b;
}

.barricade {
  position: absolute;

  left: -14%;
  width: 128%;
  height: 42px;

  background:
    linear-gradient(
      90deg,
      #473220,
      #68492d,
      #39271b
    );

  box-shadow:
    0 5px 7px
    rgba(0, 0, 0, 0.38);
}

.barricade-one {
  top: 31%;

  transform:
    rotate(-8deg);
}

.barricade-two {
  top: 61%;

  transform:
    rotate(7deg);
}


/* TEXT */

.shelter-copy {
  position: absolute;

  z-index: 3;

  left: 42%;
  top: 14%;

  width: min(
    580px,
    48%
  );
}

.day-stamp {
  margin: 0 0 24px;

  color: #a5aaa3;

  font-family:
    "Courier New",
    monospace;

  font-size: 12px;
  letter-spacing: 0.1em;
}

.shelter-copy h1 {
  margin: 0;

  color: #e8e7de;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(
      66px,
      10vw,
      137px
    );

  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.075em;
}

.shelter-note {
  max-width: 480px;

  margin: 35px 0 0;

  color: #aeb5ae;

  font-size:
    clamp(
      17px,
      2vw,
      22px
    );

  line-height: 1.5;
}


/* TABLE */

.supply-table {
  position: absolute;

  left: 38%;
  right: 7%;
  bottom: 7%;

  min-height: 175px;

  display: grid;
  grid-template-columns:
    120px
    1fr
    215px;

  gap: 30px;

  align-items: end;

  padding:
    24px
    25px;

  border-top:
    13px solid #372b20;

  background:
    linear-gradient(
      to bottom,
      #1d1a16,
      #110f0d
    );

  box-shadow:
    0 -10px 30px
    rgba(0, 0, 0, 0.32);
}


/* LANTERN */

.lamp {
  position: relative;

  width: 90px;
  height: 105px;
}

.lamp-glow {
  position: absolute;

  left: 50%;
  top: 22%;

  width: 160px;
  height: 160px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(232, 174, 83, 0.32),
      rgba(232, 174, 83, 0.08) 36%,
      transparent 69%
    );
}

.lamp-body {
  position: absolute;

  left: 24px;
  bottom: 0;

  width: 46px;
  height: 78px;

  border:
    3px solid #77664b;

  border-radius:
    18px 18px 9px 9px;

  background:
    linear-gradient(
      to bottom,
      rgba(230, 183, 102, 0.7),
      #4b412f 58%
    );
}


/* INVENTORY */

.supplies {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  gap: 7px;
}

.supplies span {
  padding:
    5px
    8px;

  border:
    1px solid #383f3b;

  color: #919c95;

  font-family:
    "Courier New",
    monospace;

  font-size: 13px;
}


/* LOCAL NETWORK DEVICE */

.radio-box {
  padding: 12px;

  border:
    2px solid #313834;

  background: #0d1110;
}

.radio-screen {
  margin-bottom: 12px;

  padding: 9px;

  border:
    1px solid #29342f;

  background: #07100c;
  color: #8fa497;

  font-family:
    "Courier New",
    monospace;

  font-size: 13px;
}

.radio-screen strong {
  display: block;

  margin-top: 3px;

  color: #b4cfbb;

  font-size: 14px;
}

#enter-button {
  appearance: none;

  width: 100%;

  border:
    1px solid #6d8176;

  padding:
    10px;

  background: transparent;
  color: #b9c8bf;

  font-family:
    "Courier New",
    monospace;

  cursor: pointer;
}

#enter-button:hover {
  background: #acbab1;
  color: #0c100e;
}

.relay-divider {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 17px 0 11px;

  color: #64716a;

  font-family:
    "Courier New",
    monospace;

  font-size: 13px;
  letter-spacing: 0.1em;
}

.relay-divider::before,
.relay-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background: #28312d;
}

.relay-copy {
  margin: 0 0 12px;

  color: #7f8d85;

  font-family:
    "Courier New",
    monospace;

  font-size: 12px;
  line-height: 1.45;
}

.survivor-transmit {
  appearance: none;

  width: 100%;

  border:
    1px solid #805047;

  padding: 10px;

  background:
    rgba(116, 54, 45, 0.08);

  color: #bc7468;

  font-family:
    "Courier New",
    monospace;

  font-size: 13px;

  cursor: pointer;
}

.survivor-transmit:hover {
  background: #8c554b;
  color: #f0e5dd;
}

.relay-fiction {
  display: block;

  margin-top: 8px;

  color: #4d5651;

  font-family:
    "Courier New",
    monospace;

  font-size: 13px;
}

/* YESTERDAY */

.yesterday {
  position: absolute;

  left: 7%;
  bottom: 4%;

  color: #717973;

  font-family:
    "Courier New",
    monospace;

  font-size: 11px;
}


/* MOBILE */

@media (max-width: 800px) {
  .window {
    left: 0;
    top: 0;

    width: 100%;
    height: 35dvh;

    border-width: 0 0 10px;
  }

  .door {
    display: none;
  }

  .shelter-copy {
    left: 20px;
    top: 40dvh;

    width:
      calc(100% - 40px);
  }

  .shelter-copy h1 {
    font-size:
      clamp(
        60px,
        19vw,
        100px
      );
  }

  .shelter-note {
    margin-top: 22px;

    font-size: 16px;
  }

  .supply-table {
    left: 0;
    right: 0;
    bottom: 0;

    grid-template-columns:
      70px
      1fr;

    min-height: 175px;

    padding:
      18px
      18px
      max(
        18px,
        env(safe-area-inset-bottom)
      );
  }

  .radio-box {
    grid-column:
      1 / 3;
  }

  .lamp {
    transform:
      scale(0.75);

    transform-origin:
      bottom left;
  }

  .yesterday {
    display: none;
  }
}


/* NETWORK */

.network {
  width: 100%;
  min-height: 100dvh;

  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}

.network-header {
  display: grid;
  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  min-height: 58px;

  border:
    1px solid var(--line);

  padding:
    11px
    14px;

  background:
    rgba(13, 18, 19, 0.93);
}

.network-header > div:first-child {
  display: flex;
  flex-direction: column;
}

.network-header strong {
  font-size: 12px;
}

.network-header span {
  color: var(--muted);
  font-size: 13px;
}

.day {
  color: #eff0e9;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 27px;
  font-weight: 700;
}

.network-state {
  justify-self: end;

  display: flex;
  align-items: center;
  gap: 7px;

  color: var(--amber);

  font-size: 13px;
}

.network-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--amber);

  animation:
    blink
    1.7s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}


/* STATUS */

.clock-row {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr)
    auto;

  border-left:
    1px solid var(--line);

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.clock-row > div,
.clock-row > button {
  padding:
    8px
    12px;

  border-right:
    1px solid var(--line);

  color: var(--muted);

  font-size:13px;
}

.clock-row strong {
  display: block;

  margin-top: 3px;

  color: var(--ink);

  font-size: 13px;
}

#sound-toggle {
  appearance: none;

  border-top: 0;
  border-left: 0;
  border-bottom: 0;

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


/* WORKSPACE */

.workspace {
  display: grid;

  grid-template-columns:
    minmax(330px, 1.15fr)
    minmax(310px, 1fr)
    minmax(250px, 0.75fr);

  grid-template-rows:
    minmax(390px, 55dvh)
    auto;

  gap: 9px;

  margin-top: 9px;
}

.workspace > section {
  border:
    1px solid var(--line);

  background:
    rgba(12, 17, 18, 0.94);

  overflow: hidden;
}

.panel-heading {
  min-height: 35px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding:
    8px
    11px;

  border-bottom:
    1px solid var(--line);

  color: var(--muted);

  font-size: 13px;
}

.alert-level {
  color: var(--red);
}


/* ALERT */

.alert-panel {
  padding-bottom: 20px;
}

.alert-panel h2 {
  margin:
    35px
    24px
    30px;

  color: #e4e6df;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: clamp(48px, 7vw, 91px);
  line-height: 0.84;
  letter-spacing: -0.065em;
}

.alert-main {
  max-width: 550px;

  margin:
    0
    24px
    25px;

  color: #c6d0ca;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 18px;
  line-height: 1.4;
}

.alert-panel ul {
  margin:
    0
    24px
    30px;

  padding-left: 19px;

  color: #9daaa4;

  font-size: 15px;
  line-height: 1.5;
}

.alert-panel li {
  margin-bottom: 8px;
}

#broadcast-button {
  appearance: none;

  margin-left: 24px;

  border:
    1px solid var(--red);

  padding:
    10px
    13px;

  background:
    rgba(189, 73, 65, 0.07);

  color: #d37a72;
}

#broadcast-button:hover {
  background: var(--red);
  color: #fff;
}


/* MAP */

.map-panel {
  display: flex;
  flex-direction: column;
}

.city-map {
  position: relative;

  flex: 1;

  min-height: 270px;

  overflow: hidden;

  background:
    linear-gradient(
      19deg,
      transparent 0 47%,
      rgba(92, 107, 102, 0.14)
        48% 50%,
      transparent 51%
    ),
    linear-gradient(
      110deg,
      transparent 0 39%,
      rgba(92, 107, 102, 0.1)
        40% 42%,
      transparent 43%
    ),
    #0d1213;
}

.city-map::before,
.city-map::after {
  content: "";

  position: absolute;

  border:
    1px solid
    rgba(95, 112, 106, 0.15);
}

.city-map::before {
  inset:
    13%
    12%
    23%
    17%;

  transform:
    rotate(-7deg);
}

.city-map::after {
  inset:
    29%
    24%
    8%
    7%;

  transform:
    rotate(9deg);
}

.sector {
  appearance: none;

  position: absolute;

  z-index: 4;

  left: var(--x);
  top: var(--y);

  width: 34px;
  height: 34px;

  transform:
    translate(-50%, -50%);

  border:
    1px solid var(--green);

  border-radius: 50%;

  background:
    #0d1213;

  color: var(--green);

  font-size: 11px;
}

.sector:hover,
.sector.selected {
  background: var(--green);
  color: #0a0d0d;
}

.sector.warning {
  border-color: var(--amber);
  color: var(--amber);
}

.sector.danger {
  border-color: var(--red);
  color: var(--red);
}

.sector.unknown {
  border-style: dashed;
  color: #6e7470;
}

.sector-report {
  min-height: 94px;

  padding:
    13px;

  border-top:
    1px solid var(--line);
}

.sector-report span {
  color: var(--green);

  font-size: 15px;
}

.sector-report p {
  margin:
    8px
    0
    0;

  color: var(--muted);

  line-height: 1.4;
  font-size: 15px;
}


/* RADIO */

.radio-panel {
  display: flex;
  flex-direction: column;
}

.radio-display {
  flex: 1;

  min-height: 245px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding:
    18px
    14px;

  background:
    radial-gradient(
      circle at center,
      #18201f,
      #090d0e
    );
}

.signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;

  height: 35px;
}

.signal-bars i {
  display: block;

  width: 4px;

  background: var(--green);

  opacity: 0.8;
}

.signal-bars i:nth-child(1) {
  height: 8px;
}

.signal-bars i:nth-child(2) {
  height: 15px;
}

.signal-bars i:nth-child(3) {
  height: 27px;
}

.signal-bars i:nth-child(4) {
  height: 19px;
}

.signal-bars i:nth-child(5) {
  height: 10px;
}

#radio-transcript {
  margin: 0;

  color: #aebbb5;

  line-height: 1.5;
  font-size: 15px;
}

#scan-button {
  appearance: none;

  border: 0;
  border-top:
    1px solid var(--line);

  padding: 12px;

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


/* UPDATES */

.updates-panel {
  grid-column:
    1 / 4;
}

.updates {
  display: grid;
  grid-template-columns:
    repeat(5, 1fr);
}

.updates article {
  min-height: 145px;

  padding: 13px;

  border-right:
    1px solid var(--line);
}

.updates article:last-child {
  border-right: 0;
}

.updates time {
  display: block;

  margin-bottom: 13px;

  color: var(--green);

  font-size: 13px;
}

.updates p {
  margin: 0;

  color: #8f9d97;

  line-height: 1.45;
  font-size: 15px;
}

.updates .disturbing p {
  color: #c2867e;
}


/* BOTTOM */

.bottom-bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  margin-top: 9px;

  padding:
    10px
    12px;

  border:
    1px solid var(--line);

  color: var(--muted);

  font-size: 13px;
}

.bottom-bar button {
  appearance: none;

  border: 0;
  padding: 0;

  background: transparent;
  color: #76877f;
}

.bottom-bar a {
  color: #76877f;
}


/* BROADCAST */

.broadcast {
  position: fixed;
  inset: 0;

  z-index: 80;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 25px;

  background:
    rgba(0, 0, 0, 0.9);
}

.broadcast.active {
  display: flex;
}

.broadcast-window {
  width: min(760px, 100%);

  padding:
    30px;

  border:
    2px solid var(--red);

  background: #090b0b;
}

.broadcast-window > span {
  color: var(--red);

  font-size: 13px;
}

.broadcast-window p {
  margin:
    45px
    0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: clamp(29px, 6vw, 58px);
  font-weight: 700;
  line-height: 1.08;
}

.broadcast-window button {
  appearance: none;

  border:
    1px solid var(--line);

  padding:
    8px
    12px;

  background: transparent;
  color: var(--ink);
}


/* POWER FAILURE */

.power-failure {
  position: fixed;
  inset: 0;

  z-index: 70;

  display: flex;
  align-items: flex-end;

  visibility: hidden;

  padding:
    20px;

  background:
    rgba(0, 0, 0, 0.96);

  color: #934941;

  font-size: 13px;

  pointer-events: none;
}

.power-failure.active {
  visibility: visible;
}


/* mobile */

@media (max-width: 900px) {
  body {
    overflow-y: auto;
  }

  .network {
    min-width: 0;
  }

  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .updates-panel {
    grid-column: auto;
  }

  .updates {
    grid-template-columns: 1fr;
  }

  .updates article {
    min-height: 0;

    border-right: 0;
    border-bottom:
      1px solid var(--line);
  }

  .clock-row {
    grid-template-columns:
      1fr
      1fr;
  }

  .network-header {
    grid-template-columns:
      1fr
      auto;
  }

  .day {
    grid-row: 1;
    grid-column: 2;
  }

  .network-state {
    grid-column: 1 / 3;

    justify-self: start;

    margin-top: 8px;
  }

  .bottom-bar {
    flex-direction: column;
  }
}


/* survivor relay */

.check-in {
  position: relative;

  margin-top: 9px;

  padding:
    clamp(35px, 6vw, 70px);

  border:
    1px solid var(--line);

  background:
    radial-gradient(
      circle at 86% 48%,
      rgba(108, 143, 119, 0.08),
      transparent 28%
    ),
    #0a0f0f;
}

.check-in-status {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 50px;

  color: var(--green);

  font-size: 13px;
  letter-spacing: 0.08em;
}

.pulse {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 8px
    rgba(149, 185, 159, 0.55);

  animation:
    relay-pulse
    2s ease-in-out infinite;
}

@keyframes relay-pulse {
  50% {
    opacity: 0.25;
  }
}

.check-in-copy {
  max-width: 760px;
}

.check-in .small {
  margin: 0 0 18px;

  color: var(--muted);

  font-size: 13px;
}

.check-in h2 {
  margin: 0 0 22px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(
      42px,
      7vw,
      88px
    );

  line-height: 0.95;
  letter-spacing: -0.055em;
}

.check-in-copy > p:last-child {
  max-width: 610px;

  color: #a8b3ad;

  font-size: 16px;
}

.check-in-button {
  appearance: none;

  margin-top: 35px;

  border:
    1px solid var(--green);

  padding:
    12px
    15px;

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

  cursor: pointer;
}

.check-in-button:hover {
  background: var(--green);
  color: #09100c;
}

.fiction-note {
  margin:
    13px
    0
    0;

  color: #58645f;

  font-size: 12px;
}