/* [project]/apps/web/src/app/styles.css [app-client] (css) */
:root {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  color: #eff7f0;
  background: #07100f;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button {
  font: inherit;
}

.shelter-shell {
  background: radial-gradient(circle at 50% 0, #17362e 0, #091412 43%, #030706 100%);
  min-height: 100svh;
  padding: 18px 14px 32px;
}

.shelter-header, .shelter-rooms, .shelter-status {
  width: min(100%, 560px);
  margin-inline: auto;
}

.shelter-header {
  padding: 22px 8px 18px;
}

.shelter-header > p:last-child {
  color: #aebfb7;
}

.shelter-rooms {
  gap: 10px;
  display: grid;
}

.shelter-room {
  color: #ecf8f2;
  text-align: left;
  background: linear-gradient(110deg, #10241e, #0c1715);
  border: 1px solid #31564c;
  border-radius: 14px;
  gap: 4px;
  min-height: 96px;
  padding: 16px;
  display: grid;
}

.shelter-room:enabled {
  cursor: pointer;
}

.shelter-room:enabled:focus-visible, .shelter-room:enabled:hover {
  border-color: #65e7bb;
  box-shadow: 0 0 0 2px #51d4a52c;
}

.shelter-room--blocked {
  color: #829088;
  opacity: .8;
  background: linear-gradient(110deg, #121916, #0a0e0d);
  border-color: #394440;
}

.shelter-room--available {
  border-color: #866e38;
}

.shelter-room__floor {
  color: #72dfb6;
  letter-spacing: .12em;
  text-transform: uppercase;
  font: 700 10px ui-monospace, monospace;
}

.shelter-room--blocked .shelter-room__floor {
  color: #86918b;
}

.shelter-room small {
  color: #9eb1a7;
}

.shelter-status {
  text-align: center;
  background: #0b1717;
  border: 1px solid #31564c;
  border-radius: 14px;
  margin-top: 28svh;
  padding: 22px;
}

.shelter-status button, .back-button {
  color: #dff9ef;
  background: #12342d;
  border: 1px solid #3d7464;
  border-radius: 9px;
  min-height: 44px;
  padding: 0 14px;
}

.back-button {
  margin-bottom: 8px;
}

.cutaway {
  background: linear-gradient(90deg, #111915, #07100f 17%, #0b120f 83%, #121914);
  width: min(100%, 1040px);
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 80px #000b;
}

.cutaway__intro {
  z-index: 5;
  color: #eef6f1;
  pointer-events: none;
  background: linear-gradient(#040706d9, #04070600);
  padding: 18px 18px 42px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.cutaway__intro h1 {
  font-size: clamp(29px, 5vw, 44px);
}

.cutaway__intro > p:last-child {
  color: #a7b7ad;
  margin: 7px 0 0;
  font-size: 13px;
}

.cutaway__surface {
  background: radial-gradient(at 65% 14%, #27404b55 0 8%, #0000 29%), linear-gradient(#081418 0 52%, #26372b 53%, #151e18 71%, #5a5843 72% 76%, #211f19 77%);
  border-bottom: 5px solid #4d4c3d;
  height: 290px;
  position: relative;
  overflow: hidden;
}

.surface__horizon {
  opacity: .45;
  background: linear-gradient(165deg, #0000 0 8%, #0d1614 9% 19%, #0000 20% 25%, #0e1816 26% 42%, #0000 43% 54%, #10201c 55% 72%, #0000 73%);
  height: 45px;
  position: absolute;
  inset: auto 0 81px;
}

.surface__facility {
  background: linear-gradient(90deg, #171f1c, #3d4740 46%, #141b18);
  border: 4px solid #566359;
  border-bottom: 0;
  width: 190px;
  height: 93px;
  position: absolute;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0 14px #080d0c, inset 0 -28px #0d1411, 0 9px #0b100e;
}

.surface__facility:before {
  content: "";
  background: repeating-linear-gradient(90deg, #141a17 0 10px, #43483e 11px 13px);
  border: 2px solid #777a65;
  border-bottom: 0;
  height: 43px;
  position: absolute;
  bottom: 0;
  left: 35px;
  right: 35px;
}

.surface__facility span {
  color: #9aa998;
  letter-spacing: .08em;
  text-align: center;
  font: 700 8px ui-monospace, monospace;
  position: absolute;
  bottom: 16px;
  left: 10px;
  right: 10px;
}

.surface__mast {
  background: #42534d;
  width: 4px;
  height: 104px;
  position: absolute;
  bottom: 132px;
  box-shadow: 0 0 0 1px #101816;
}

.surface__mast:before {
  content: "";
  background: #57665e;
  width: 48px;
  height: 2px;
  position: absolute;
  top: 22px;
  left: -22px;
  box-shadow: 0 28px #57665e, 0 56px #57665e;
}

.surface__mast--left {
  left: 15%;
}

.surface__mast--right {
  height: 132px;
  right: 15%;
}

.surface__dish {
  border: 4px solid #7d8372;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  width: 46px;
  height: 18px;
  position: absolute;
  bottom: 124px;
  transform: rotate(-18deg);
}

.surface__dish:after {
  content: "";
  background: #707d74;
  width: 3px;
  height: 27px;
  position: absolute;
  top: -25px;
  left: 19px;
}

.surface__dish--left {
  left: 28%;
}

.surface__dish--right {
  right: 28%;
  transform: rotate(18deg);
}

.surface__road {
  background: linear-gradient(167deg, #0000 0 35%, #3d3d34 36% 40%, #1b201c 41%);
  height: 68px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.cutaway__bedrock {
  background: radial-gradient(circle at 9% 10%, #3c3b2f55 0 2px, #0000 3px) 0 0 / 33px 41px, radial-gradient(circle at 88% 12%, #38372b55 0 2px, #0000 3px) 0 0 / 37px 46px, linear-gradient(90deg, #25251d 0, #171a16 10%, #0c1210 22%, #080c0b 78%, #171914 90%, #25251d);
  padding: 22px 8px 88px;
  position: relative;
}

.cutaway__shaft {
  z-index: 0;
  background: repeating-linear-gradient(0deg, #131a17 0 30px, #232a24 31px 33px);
  border-inline: 5px solid #555b50;
  width: 19%;
  min-width: 96px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 14px 0 #0a0f0d, inset -14px 0 #0a0f0d, 0 0 0 4px #222720;
}

.shaft__rail {
  background: #9c8d59;
  width: 3px;
  position: absolute;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 8px #d4bd6c44;
}

.shaft__rail--left {
  left: 17px;
}

.shaft__rail--right {
  right: 17px;
}

.shaft__cabin {
  background: linear-gradient(90deg, #141b18, #4d574f, #121816);
  border: 3px solid #879080;
  width: 70%;
  height: 54px;
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 8px #060907;
}

.cutaway__level {
  z-index: 1;
  border-top: 2px solid #5c5d4d;
  border-bottom: 2px solid #2d332d;
  grid-template-columns: minmax(0, 1fr) minmax(86px, 19%) minmax(0, 1fr);
  max-width: 970px;
  min-height: 224px;
  margin: 0 auto 18px;
  display: grid;
  position: relative;
}

.cutaway__level--mining {
  min-height: 308px;
}

.shaft-landing {
  color: #c7b369;
  background: #121814aa;
  border-inline: 1px solid #7c7559;
  align-content: center;
  place-items: center;
  gap: 8px;
  display: grid;
}

.shaft-landing__number {
  letter-spacing: .1em;
  font: 700 9px ui-monospace, monospace;
}

.shaft-landing__door {
  color: #111714;
  background: linear-gradient(90deg, #161c18, #4b564e, #171d19);
  border: 4px solid #687265;
  place-items: center;
  width: 54px;
  height: 88px;
  font-size: 24px;
  display: grid;
  box-shadow: inset 0 0 0 2px #252c26;
}

.cutaway__deep-label {
  z-index: 2;
  color: #b8a467;
  letter-spacing: .2em;
  justify-content: center;
  margin: 2px auto 12px;
  font: 700 10px ui-monospace, monospace;
  display: flex;
  position: relative;
}

.cutaway__deep-label:before, .cutaway__deep-label:after {
  content: "";
  background: #82764c;
  width: 22%;
  height: 1px;
  margin: auto 14px;
}

.cutaway__depth {
  background: linear-gradient(#111714, #030504);
  border-inline: 5px solid #484e45;
  width: 19%;
  min-width: 96px;
  height: 115px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.cutaway-room {
  isolation: isolate;
  color: #e9f2ed;
  text-align: left;
  background: #151b17;
  border: 0;
  min-width: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.cutaway-room:enabled {
  cursor: pointer;
}

.cutaway-room:enabled:focus-visible {
  z-index: 4;
  outline-offset: -3px;
  outline: 3px solid #e6c76e;
}

.cutaway-room:enabled:hover .cutaway-room__label {
  background: #17352c;
}

.cutaway-room__structure {
  background: linear-gradient(145deg, #26312a, #111815 36%, #20271f);
  display: block;
  position: absolute;
  inset: 0;
}

.cutaway-room__structure:before {
  content: "";
  border: 3px solid #49564d;
  background: repeating-linear-gradient(90deg, #151d19 0 22px, #1d2822 23px 25px), linear-gradient(#2a312a, #141a16);
  border-bottom-width: 6px;
  position: absolute;
  inset: 22px 10px 28px;
  box-shadow: inset 0 34px #101612, inset 0 -15px #080c0a;
}

.cutaway-room__ceiling {
  background: repeating-linear-gradient(90deg, #3b443c 0 13px, #687066 14px 17px);
  height: 19px;
  position: absolute;
  top: 16px;
  left: 8px;
  right: 8px;
  box-shadow: 0 10px #131a16;
}

.cutaway-room__equipment {
  background: repeating-linear-gradient(90deg, #14221e 0 16px, #275447 17px 21px);
  border: 3px solid #537469;
  height: 48px;
  position: absolute;
  inset: auto 19% 39px 14%;
  box-shadow: 42px 5px 0 -8px #3c4d45, -25px -11px 0 -7px #27352f;
}

.cutaway-room__portal {
  color: #121815;
  background: linear-gradient(90deg, #121815, #475248, #151b17);
  border: 4px solid #626b5f;
  place-items: center;
  width: 24%;
  height: 116px;
  font-size: 20px;
  display: grid;
  position: absolute;
  top: 43px;
  box-shadow: inset 0 0 0 2px #242c25;
}

.cutaway-room--left .cutaway-room__portal {
  right: 0;
}

.cutaway-room--right .cutaway-room__portal {
  left: 0;
}

.cutaway-room__debris {
  opacity: 0;
  background: linear-gradient(135deg, #5c5b48 0 12%, #0000 13% 22%, #45483b 23% 36%, #0000 37% 46%, #625b49 47% 62%, #0000 63%);
  height: 41px;
  position: absolute;
  bottom: 22px;
  left: 10px;
  right: 10px;
}

.cutaway-room__crew {
  opacity: 0;
  background: linear-gradient(#c6a481 0 24%, #c4a54c 25% 68%, #202a28 69%);
  border-radius: 7px 7px 2px 2px;
  width: 9px;
  height: 29px;
  position: absolute;
  bottom: 42px;
  right: 24%;
  box-shadow: 21px 3px #253d39;
}

.cutaway-room__label {
  z-index: 2;
  background: #09100dcc;
  border-left: 3px solid #758175;
  gap: 2px;
  padding: 7px 8px;
  display: grid;
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  box-shadow: 0 4px 11px #0008;
}

.cutaway-room__label strong {
  font-size: clamp(11px, 2.2vw, 15px);
}

.cutaway-room__label small {
  color: #aab8ae;
  font-size: 10px;
}

.cutaway-room--blocked {
  color: #89948d;
  background: #141510;
}

.cutaway-room--blocked .cutaway-room__structure {
  filter: saturate(.45) brightness(.6);
}

.cutaway-room--blocked .cutaway-room__equipment {
  opacity: .16;
}

.cutaway-room--blocked .cutaway-room__portal {
  filter: brightness(.48);
}

.cutaway-room--blocked .cutaway-room__debris {
  opacity: 1;
}

.cutaway-room--blocked .cutaway-room__label {
  border-left-color: #707269;
}

.cutaway-room--available .cutaway-room__structure {
  background: linear-gradient(145deg, #2c3125, #141915 42%, #20251e);
}

.cutaway-room--available .cutaway-room__equipment {
  border-color: #80764d;
  box-shadow: 42px 5px 0 -8px #5c5439, -25px -11px 0 -7px #766a45;
}

.cutaway-room--available .cutaway-room__debris {
  opacity: .6;
}

.cutaway-room--available .cutaway-room__label {
  border-left-color: #d1af56;
}

.cutaway-room--under_construction .cutaway-room__structure {
  background: linear-gradient(145deg, #342f21, #151915 42%, #2a271d);
}

.cutaway-room--under_construction .cutaway-room__equipment {
  border-color: #bd9346;
  box-shadow: 0 0 19px #d9a44777, 42px 5px 0 -8px #8a6d38;
}

.cutaway-room--under_construction .cutaway-room__portal {
  box-shadow: inset 0 0 0 2px #242c25, 0 0 16px #d7a23c88;
}

.cutaway-room--under_construction .cutaway-room__crew {
  opacity: 1;
}

.cutaway-room--under_construction .cutaway-room__label {
  border-left-color: #e0ad4d;
}

.cutaway-room--operational .cutaway-room__structure {
  background: linear-gradient(145deg, #26362e, #111a16 46%, #20332a);
}

.cutaway-room--operational .cutaway-room__equipment {
  border-color: #5eb394;
  box-shadow: 0 0 17px #48dca577, 42px 5px 0 -8px #366e5d, -25px -11px 0 -7px #6f9c77;
}

.cutaway-room--operational .cutaway-room__crew {
  opacity: 1;
}

.cutaway-room--operational .cutaway-room__portal {
  box-shadow: inset 0 0 0 2px #242c25, 0 0 14px #65d5a677;
}

.cutaway-room--operational .cutaway-room__label {
  border-left-color: #62d6ac;
}

.cutaway-room--broadcast_control .cutaway-room__equipment {
  background: repeating-linear-gradient(90deg, #152420 0 9px, #2f7362 10px 12px);
  height: 60px;
}

.cutaway-room--treasury .cutaway-room__equipment {
  background: radial-gradient(circle, #17201d 0 18%, #6c776b 19% 23%, #1b241f 24% 42%, #6a705f 43% 48%, #16201b 49%);
  border-radius: 50%;
  width: 56px;
  height: 56px;
}

.cutaway-room--mission_terminal .cutaway-room__equipment {
  background: linear-gradient(90deg, #172620, #39685c, #15231e);
  height: 66px;
}

.cutaway-room--signal_center .cutaway-room__equipment {
  background: repeating-linear-gradient(0deg, #163228 0 8px, #3e8a71 9px 11px);
  height: 72px;
}

.cutaway-room--mining_hall_i {
  grid-column: 1;
  min-height: 308px;
}

.cutaway-room--mining_hall_i .cutaway-room__structure:before {
  background: repeating-linear-gradient(90deg, #101713 0 15px, #23352c 16px 20px), repeating-linear-gradient(0deg, #0000 0 34px, #617167 35px 38px);
  inset: 22px 14px 32px;
}

.cutaway-room--mining_hall_i .cutaway-room__equipment {
  background: repeating-linear-gradient(90deg, #13231e 0 12px, #32715e 13px 16px);
  border-color: #64bd9f;
  height: 98px;
  inset: auto 12% 44px 11%;
}

.mining-depth {
  color: #6f7e75;
  letter-spacing: .12em;
  text-align: center;
  background: linear-gradient(#101611, #090d0b);
  place-items: center;
  font: 700 8px ui-monospace, monospace;
  display: grid;
}

.room-shell {
  background: radial-gradient(circle at 50% 0, #193a31 0, #091412 44%, #030706 100%);
  min-height: 100svh;
  padding: 18px 14px 32px;
}

.room-shell__header, .room-shell__panel {
  width: min(100%, 560px);
  margin-inline: auto;
}

.room-shell__header {
  padding: 16px 0 18px;
}

.room-shell__header > p:last-child {
  color: #aebfb7;
  line-height: 1.5;
}

.room-shell__panel {
  background: linear-gradient(145deg, #10241e, #0b1717);
  border: 1px solid #31564c;
  border-radius: 16px;
  gap: 16px;
  padding: 18px;
  display: grid;
  box-shadow: 0 18px 50px #0006;
}

.room-shell__content, .room-facts {
  gap: 10px;
  display: grid;
}

.room-fact {
  border-bottom: 1px solid #29443c;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 9px;
  display: flex;
}

.room-fact span {
  color: #9eb1a7;
  font-size: 13px;
}

.room-fact strong {
  color: #e9f4ee;
  text-align: right;
  overflow-wrap: anywhere;
}

.room-shell__notice {
  color: #b7c8c0;
  margin: 0;
  line-height: 1.55;
}

.room-shell__status {
  color: #b7c8c0;
  text-align: center;
  place-items: center;
  gap: 12px;
  min-height: 130px;
  display: grid;
}

.room-shell__status button {
  color: #dff9ef;
  background: #12342d;
  border: 1px solid #3d7464;
  border-radius: 9px;
  min-height: 42px;
  padding: 0 14px;
}

.game-shell {
  background: radial-gradient(circle at 50% -10%, #19342d 0, #0a1415 32%, #05090a 78%);
  min-height: 100svh;
  padding: 24px;
}

.topbar, .hall-card, .hint {
  width: min(100%, 1040px);
  margin-inline: auto;
}

.topbar {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  display: flex;
}

.eyebrow, .section-label {
  color: #6fe1b6;
  letter-spacing: .13em;
  margin: 0;
  font: 700 11px / 1.4 ui-monospace, monospace;
}

h1, h2 {
  letter-spacing: -.04em;
  margin: 4px 0 0;
  line-height: 1;
}

h1 {
  font-size: clamp(28px, 4vw, 44px);
}

h2 {
  font-size: 28px;
}

.connection {
  color: #c6d7d0;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  display: flex;
}

.connection span {
  background: #e5ba61;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  box-shadow: 0 0 14px #e5ba61;
}

.connection.online span {
  background: #62e6b8;
  box-shadow: 0 0 14px #62e6b8;
}

.connection.offline span {
  background: #e66d6d;
  box-shadow: 0 0 14px #e66d6d;
}

.hall-card {
  background: #0b1717;
  border: 1px solid #31564c;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 28px 80px #0008;
}

.hall-header, .hall-footer {
  background: linear-gradient(90deg, #112220, #0e1919);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 17px 22px;
  display: flex;
}

.hall-header strong {
  margin-top: 3px;
  font-size: 16px;
  display: block;
}

.quiet-button, .battery-button, .slot-row button {
  color: #c6f3e4;
  cursor: pointer;
  background: #12342d;
  border: 1px solid #3d7464;
  border-radius: 9px;
  padding: 9px 12px;
}

.hall-scene {
  isolation: isolate;
  background: linear-gradient(90deg, #17201d, #202a24 48%, #16201e);
  min-height: 630px;
  position: relative;
  overflow: hidden;
}

.hall-scene:before {
  content: "";
  z-index: -1;
  opacity: .45;
  background: repeating-linear-gradient(90deg, #0000 0 66px, #d8d1ae0c 67px 69px), linear-gradient(#0000 0 42%, #090d0ba8 43% 45%, #0000 46%), repeating-linear-gradient(0deg, #0000 0 48px, #eef4d607 49px 50px);
  position: absolute;
  inset: 0;
}

.ceiling {
  background: linear-gradient(#080e0e, #29322c 60%, #141d1a);
  border-bottom: 3px solid #475247;
  height: 128px;
  position: absolute;
  inset: 0 0 auto;
}

.ceiling:before, .ceiling:after {
  content: "";
  background: repeating-linear-gradient(90deg, #202721 0 12px, #566057 13px 15px);
  border-radius: 20px;
  width: 48%;
  height: 30px;
  position: absolute;
  top: 26px;
  box-shadow: 0 48px #1d2824;
}

.ceiling:before {
  left: -3%;
}

.ceiling:after {
  right: -3%;
}

.gantry {
  color: #cdbf82;
  z-index: 2;
  background: #725d27;
  border-block: 3px solid #b39943;
  place-items: center;
  height: 22px;
  font: 700 10px ui-monospace, monospace;
  display: grid;
  position: absolute;
  top: 130px;
  left: 8%;
  right: 8%;
}

.rear-terminal {
  text-align: center;
  color: #81ecd0;
  background: #071615;
  border: 1px solid #46786a;
  padding: 12px 16px;
  font: 700 11px / 1.3 ui-monospace, monospace;
  position: absolute;
  top: 188px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 22px #4de1b42b;
}

.rear-terminal small {
  color: #a1bbb0;
  font-weight: 400;
}

.service-aisle {
  background: linear-gradient(90deg, #0003, #d1b85b16, #0003);
  border-inline: 2px solid #a68e46;
  position: absolute;
  inset: 220px 37% 0;
}

.service-aisle span {
  white-space: nowrap;
  color: #c1a85f;
  letter-spacing: .17em;
  font: 700 10px ui-monospace, monospace;
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%)rotate(-90deg);
}

.rack-field {
  grid-template-columns: repeat(3, minmax(58px, 1fr));
  grid-auto-rows: 145px;
  gap: 20px;
  width: 31%;
  display: grid;
  position: absolute;
  top: 245px;
  bottom: 56px;
}

.left-field {
  left: 5%;
}

.right-field {
  right: 5%;
}

.rack {
  cursor: pointer;
  color: #d8e4dc;
  text-align: center;
  background: none;
  border: 0;
  min-width: 0;
  padding: 0;
  position: relative;
}

.rack-frame {
  border: 4px solid #53605a;
  background: #101615;
  border-top-color: #839189;
  gap: 3px;
  height: 112px;
  padding: 7px;
  display: grid;
  box-shadow: 5px 7px #0006;
}

.rack:hover .rack-frame {
  border-color: #7de1ba;
  box-shadow: 0 0 0 2px #59ba9540, 5px 7px #0006;
}

.rack.empty {
  opacity: .68;
}

.rack.empty .rack-frame {
  border-style: dashed;
}

.rack i {
  background: repeating-linear-gradient(90deg, #17231f 0 10px, #26342d 11px 12px);
  border: 1px solid #3b4b45;
  min-height: 17px;
  display: block;
}

.rack i.miner {
  background: linear-gradient(90deg, #142d29, #2b7262, #123b35);
  border-color: #5dd7ae;
  box-shadow: inset 0 0 0 2px #0a1817, 0 0 12px #48e1b387;
}

.rack-number {
  z-index: 1;
  color: #d6c47e;
  background: #141b18;
  padding: 2px 5px;
  font: 700 10px ui-monospace, monospace;
  position: absolute;
  top: -9px;
  left: 3px;
}

.rack-caption {
  color: #c4d0ca;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 7px;
  font-size: 11px;
  display: block;
  overflow: hidden;
}

.worker {
  z-index: 3;
  background: linear-gradient(#d1b28b 0 17px, #263e40 18px 64px, #161e22 65px);
  border-radius: 20px 20px 9px 9px;
  width: 42px;
  height: 90px;
  position: absolute;
  bottom: 32px;
  box-shadow: 0 6px #050807;
}

.worker span {
  color: #c3d3ca;
  white-space: nowrap;
  font-size: 10px;
  position: absolute;
  top: 94px;
  left: 50%;
  transform: translateX(-50%);
}

.worker-electrician {
  left: 32%;
}

.worker-tech {
  background: linear-gradient(#9b7258 0 17px, #413a53 18px 64px, #1d2028 65px);
  right: 29%;
}

.cable-cart {
  z-index: 3;
  color: #d0b24c;
  font-size: 30px;
  position: absolute;
  bottom: 21px;
  left: 43%;
}

.cable-cart small {
  color: #9caf9f;
  white-space: nowrap;
  font-size: 9px;
  display: block;
}

.lift-door {
  color: #cfb97a;
  background: linear-gradient(90deg, #151c1a, #404640, #161b19);
  border: 5px solid #606a61;
  place-items: end center;
  width: 86px;
  height: 220px;
  padding-bottom: 12px;
  font: 700 10px ui-monospace, monospace;
  display: grid;
  position: absolute;
  top: 174px;
  right: 1.8%;
  box-shadow: inset 0 0 0 3px #121817;
}

.shelter-mark {
  color: #c8b36b;
  text-shadow: 0 0 12px #d4b75b88;
  font-size: 48px;
  position: absolute;
  top: 36px;
}

.hall-footer {
  border-top: 1px solid #314740;
}

.hall-footer div {
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 10px;
  display: grid;
}

.hall-footer .label, .hall-footer small {
  color: #9db0a7;
  font-size: 12px;
}

.hall-footer small {
  grid-column: 1 / -1;
  margin-top: 3px;
}

.hall-footer strong {
  color: #dce9e1;
}

.battery-button {
  color: #f5dfa1;
  background: #4b3d17;
  border-color: #a2883d;
}

.hint {
  color: #99aaa2;
  text-align: center;
  margin-top: 13px;
  font-size: 13px;
}

.sheet-backdrop {
  z-index: 10;
  background: #020605b8;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.rack-sheet {
  background: #0e1b1a;
  border: 1px solid #477366;
  border-radius: 17px;
  width: min(100%, 620px);
  padding: 27px;
  position: relative;
  box-shadow: 0 28px 80px #000;
}

.rack-sheet > p:not(.eyebrow) {
  color: #b8c9c0;
  line-height: 1.6;
}

.rack-sheet b {
  color: #70e3ba;
}

.sheet-close {
  color: #dceee6;
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 30px;
  position: absolute;
  top: 12px;
  right: 14px;
}

.slot-list {
  border-top: 1px solid #2d463f;
  margin-top: 22px;
}

.slot-row {
  color: #a8bbb2;
  border-bottom: 1px solid #253b36;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 13px;
  display: grid;
}

.slot-row strong {
  color: #e4eee9;
}

.slot-row button {
  padding: 6px 9px;
  font-size: 12px;
}

@media (max-width: 720px) {
  .game-shell {
    padding: 14px;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .hall-header {
    padding: 14px;
  }

  .hall-scene {
    min-height: 670px;
  }

  .rack-field {
    grid-auto-rows: 140px;
    gap: 10px;
    width: 34%;
  }

  .left-field {
    left: 2%;
  }

  .right-field {
    right: 2%;
  }

  .rack-frame {
    height: 98px;
    padding: 5px;
  }

  .lift-door {
    width: 60px;
    height: 185px;
    right: 0;
  }

  .service-aisle {
    inset-inline: 36%;
  }

  .worker-electrician {
    left: 31%;
  }

  .worker-tech {
    right: 27%;
  }

  .quiet-button {
    font-size: 12px;
  }

  .hall-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .slot-row {
    grid-template-columns: 65px 1fr;
  }

  .slot-row button {
    grid-column: 2;
  }

  .gantry {
    left: 2%;
    right: 2%;
  }

  .cable-cart {
    left: 42%;
  }
}

.cutaway-shell {
  background: #030608;
  min-height: 100svh;
  overflow-x: hidden;
}

.master-cutaway {
  background: #030608;
  width: 100%;
  max-width: 909px;
  margin: 0 auto;
  line-height: 0;
  position: relative;
}

.master-cutaway__art {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  width: 100%;
  height: auto;
  display: block;
}

.master-cutaway__hit-layer {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.master-cutaway__hit {
  z-index: 1;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 0;
  display: block;
  position: absolute;
  box-shadow: inset 0 0 #0000;
}

.master-cutaway__hit:enabled {
  cursor: pointer;
}

.master-cutaway__hit:enabled:hover {
  box-shadow: inset 0 0 0 1px #e7bf5c33;
}

.master-cutaway__hit:enabled:active {
  background: #e7bf5c14;
  box-shadow: inset 0 0 0 1px #e7bf5c55;
}

.master-cutaway__hit:enabled:focus-visible {
  outline-offset: -2px;
  outline: 2px solid #e7bf5c;
  box-shadow: 0 0 0 3px #050908aa;
}

.master-cutaway__hit:disabled {
  cursor: default;
}

@media (min-width: 910px) {
  .cutaway-shell {
    padding-inline: 16px;
  }

  .master-cutaway {
    box-shadow: 0 24px 80px #000a;
  }
}

.treasury-room {
  color: #edf0e8;
  background: #030504;
  min-height: 100svh;
  overflow: hidden;
}

.treasury-room__back {
  z-index: 6;
  top: calc(env(safe-area-inset-top) + 10px);
  color: #f1e6bf;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #080b0ac4;
  border: 1px solid #b99b4e66;
  border-radius: 7px;
  min-height: 38px;
  padding: 0 11px;
  position: fixed;
  left: 12px;
  box-shadow: 0 4px 16px #0008;
}

.treasury-room__back:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #e6c76e;
}

.treasury-room__status {
  color: #c2c5b8;
  text-align: center;
  background: radial-gradient(circle at 50% 25%, #25251d, #030504 66%);
  place-content: center;
  gap: 14px;
  min-height: 100svh;
  margin: 0;
  padding: 28px;
  display: grid;
}

.treasury-room__status button {
  color: #f0e4ba;
  background: #262517;
  border: 1px solid #847346;
  border-radius: 8px;
  min-height: 42px;
  padding: 0 14px;
}

.treasury-scene {
  background: #030504;
  min-height: 100svh;
}

.treasury-scene__viewport {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #8f7540 #090a08;
  width: 100%;
  min-height: 100svh;
  overflow: auto;
}

.treasury-scene__artwork {
  width: max(620px, 100%);
  margin: 0 auto;
  line-height: 0;
  position: relative;
}

.treasury-scene__art {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  width: 100%;
  height: auto;
  display: block;
}

.treasury-scene__hit-layer {
  position: absolute;
  inset: 0;
}

.treasury-scene__hit {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 0;
  position: absolute;
  box-shadow: inset 0 0 #0000;
}

.treasury-scene__hit:hover {
  box-shadow: inset 0 0 0 1px #e4c46a40;
}

.treasury-scene__hit:active {
  background: #e2c26714;
  box-shadow: inset 0 0 0 1px #e4c46a66;
}

.treasury-scene__hit:focus-visible {
  outline-offset: -2px;
  outline: 2px solid #e6c76e;
  box-shadow: 0 0 0 3px #03050499;
}

.treasury-scene__hit--vault {
  width: 46%;
  height: 25%;
  top: 18%;
  left: 27%;
}

.treasury-scene__hit--history {
  width: 30%;
  height: 17%;
  top: 65%;
  left: 12%;
}

.treasury-scene__hit--cashier {
  width: 47%;
  height: 25%;
  top: 61%;
  left: 42%;
}

.treasury-sheet-backdrop {
  z-index: 10;
  background: linear-gradient(0deg, #0009 0 64%, #0000 88%);
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}

.treasury-sheet {
  width: 100%;
  min-height: 50svh;
  max-height: 65svh;
  padding: 16px 18px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(155deg, #171811, #0b0d0a 68%);
  border: 1px solid #85703e;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  overflow: auto;
  box-shadow: 0 -16px 50px #000a;
}

.treasury-sheet__header {
  border-bottom: 1px solid #615532;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  display: flex;
}

.treasury-sheet__close {
  color: #f2e9c8;
  background: #222116;
  border: 1px solid #70603a;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 27px;
  line-height: 1;
}

.treasury-sheet__content {
  gap: 10px;
  padding-top: 16px;
  display: grid;
}

.treasury-sheet__operation, .treasury-sheet__fact {
  border-bottom: 1px solid #373323;
  gap: 5px;
  padding: 13px 0;
  display: grid;
}

.treasury-sheet__operation strong, .treasury-sheet__fact strong {
  color: #eee8d3;
  font-size: 15px;
  line-height: 1.35;
}

.treasury-sheet__operation span, .treasury-sheet__fact span, .treasury-sheet__message {
  color: #bdb9a7;
  font-size: 14px;
  line-height: 1.5;
}

.treasury-sheet__message {
  margin: 18px 0 0;
}

@media (min-width: 620px) {
  .treasury-scene__artwork {
    width: min(100%, 941px);
  }

  .treasury-sheet {
    border-bottom: 1px solid #85703e;
    border-radius: 20px 20px 0 0;
    width: min(100%, 620px);
    margin-inline: auto;
  }
}

/* [project]/apps/web/src/app/auth-bootstrap.css [app-client] (css) */
.bootstrap-screen {
  background: radial-gradient(circle at 50% 0, #19342d 0, #0a1415 38%, #05090a 100%);
  place-items: center;
  min-height: 100svh;
  padding: 20px;
  display: grid;
}

.bootstrap-card {
  text-align: center;
  background: #0b1717;
  border: 1px solid #31564c;
  border-radius: 18px;
  width: min(100%, 420px);
  padding: 28px 22px;
  box-shadow: 0 24px 70px #0008;
}

.bootstrap-card h1 {
  margin: 8px 0 12px;
  font-size: clamp(27px, 8vw, 36px);
}

.bootstrap-card > p:last-child, .bootstrap-card--error > p {
  color: #aebfb7;
  margin: 0;
  line-height: 1.55;
}

.bootstrap-eyebrow {
  color: #6fe1b6;
  letter-spacing: .13em;
  margin: 0;
  font: 700 11px / 1.4 ui-monospace, monospace;
}

.bootstrap-spinner {
  border: 3px solid #31564c;
  border-top-color: #6fe1b6;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  margin: 0 auto 20px;
  animation: .8s linear infinite bootstrap-spin;
  display: block;
}

.bootstrap-card--error {
  border-color: #744747;
}

.bootstrap-card--error .bootstrap-eyebrow {
  color: #ed8b8b;
}

.bootstrap-card button {
  color: #dff9ef;
  cursor: pointer;
  background: #12342d;
  border: 1px solid #3d7464;
  border-radius: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 22px;
}

.development-session {
  color: #171207;
  text-align: center;
  background: #e5ba61;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
}

@keyframes bootstrap-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bootstrap-spinner {
    animation: none;
  }
}

/* [project]/apps/web/src/app/mining-hall-visual.css [app-client] (css) */
.hall-scene {
  background: linear-gradient(#010a0875 0%, #020c0914 33%, #020a084d 58%, #010907db 100%), url("/concepts/mining-hall-i-recovery.png") 50% 43% / cover no-repeat;
  min-height: 690px;
  overflow: hidden;
}

.hall-scene:before, .ceiling, .gantry, .service-aisle, .worker, .cable-cart, .lift-door {
  display: none;
}

.rear-terminal {
  z-index: 4;
  background: #03110ee0;
  border: 1px solid #55eec06b;
  width: max-content;
  min-width: 184px;
  padding: 10px 16px;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 8px 30px #0000007a;
}

.hall-state {
  z-index: 6;
  color: #dff8ee;
  text-align: center;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #020e0beb;
  border: 1px solid #60e9bd59;
  border-radius: 14px;
  place-items: center;
  gap: 12px;
  min-height: 180px;
  padding: 20px;
  display: grid;
  position: absolute;
  inset: auto 16px 16px;
}

.hall-state--error {
  border-color: #e66d6d8c;
}

.hall-state button {
  color: #dff8ee;
  background: #12342d;
  border: 1px solid #3d7464;
  border-radius: 9px;
  min-height: 44px;
  padding: 0 18px;
}

.rack-field {
  z-index: 3;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: linear-gradient(#03120ebd, #020a08ed);
  border: 1px solid #60a78d59;
  border-radius: 12px;
  grid-template-columns: repeat(3, minmax(52px, 1fr));
  grid-auto-rows: 88px;
  gap: 9px;
  width: 40%;
  padding: 10px;
  top: auto;
  bottom: 16px;
  box-shadow: 0 10px 34px #0000007a;
}

.left-field {
  left: 4%;
}

.right-field {
  right: 4%;
}

.rack {
  box-shadow: none;
  background: none;
  border: 0;
  gap: 4px;
  padding: 0;
}

.rack:after {
  display: none;
}

.rack-frame {
  background: linear-gradient(135deg, #1a332bf2, #05130ffa);
  border-color: #71a4909e;
  height: 58px;
  min-height: 58px;
  box-shadow: inset 0 0 0 1px #000000a6;
}

.rack i {
  background: #91ebcb59;
}

.rack.selected .rack-frame, .rack:focus-visible .rack-frame, .rack:hover .rack-frame {
  border-color: #60e9bd;
  box-shadow: 0 0 0 2px #60e9bd33, 0 0 22px #27d2a452;
}

.rack.empty .rack-frame {
  opacity: .82;
}

.rack-name {
  color: #c7e3d7;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  max-width: 100%;
  font-size: .61rem;
}

@media (max-width: 720px) {
  .hall-scene {
    background-position: 50% 38%;
    min-height: 720px;
  }

  .rack-field {
    grid-template-columns: repeat(2, minmax(44px, 1fr));
    grid-auto-rows: 76px;
    gap: 6px;
    width: 44%;
    padding: 7px;
    bottom: 10px;
  }

  .left-field {
    left: 2.5%;
  }

  .right-field {
    right: 2.5%;
  }

  .rack-frame {
    height: 50px;
    min-height: 50px;
  }

  .rack-name {
    font-size: .54rem;
  }

  .rear-terminal {
    min-width: 150px;
    padding: 8px 10px;
    top: 12px;
  }
}

.power-console {
  background: linear-gradient(105deg, #031410fa, #05241cf5 54%, #03110efa);
  border-top: 1px solid #66e7ba47;
  grid-template-columns: minmax(180px, 1.2fr) auto auto auto;
  align-items: center;
  gap: 14px;
  min-height: 94px;
  padding: 16px 22px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.power-console:before {
  pointer-events: none;
  content: "";
  background: radial-gradient(circle at 0, #2fd8ad29, #0000 69%);
  width: 42%;
  position: absolute;
  inset: 0 auto 0 0;
}

.power-console__copy, .battery-stock, .power-timer, .battery-action, .battery-notice {
  z-index: 1;
  position: relative;
}

.power-console__copy, .battery-stock > div, .power-timer {
  gap: 3px;
  display: grid;
}

.power-console__eyebrow {
  color: #68e7bd;
  letter-spacing: .13em;
  font-size: .61rem;
  font-weight: 800;
}

.power-console__copy strong {
  color: #f1fff9;
  font-size: .92rem;
}

.power-console__copy small, .battery-stock > div > span, .power-timer span {
  color: #a7c4b7;
  font-size: .69rem;
}

.battery-stock {
  align-items: center;
  gap: 8px;
  min-width: 96px;
  display: flex;
}

.battery-stock__glyph {
  border: 2px solid #3ce5cf;
  border-radius: 4px;
  width: 36px;
  height: 22px;
  position: relative;
  box-shadow: 0 0 15px #3ce5cf3d;
}

.battery-stock__glyph i {
  background: linear-gradient(90deg, #4df2d4, #199b91);
  width: 58%;
  height: 100%;
  display: block;
  box-shadow: inset -2px 0 #01181573;
}

.battery-stock strong {
  color: #eafff7;
  font-size: 1.1rem;
}

.power-timer {
  background: #08321fdb;
  border: 1px solid #4dbb66;
  border-radius: 999px;
  min-width: 120px;
  padding: 7px 11px;
  box-shadow: inset 0 0 14px #21df761a, 0 0 0 1px #0e150fb3;
}

.power-timer strong {
  color: #55eeab;
  font-size: .98rem;
}

.battery-action {
  color: #02221c;
  cursor: pointer;
  background: linear-gradient(135deg, #54efcf, #32cbb6);
  border: 1px solid #86ffda;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  font-weight: 900;
  display: inline-flex;
  box-shadow: 0 7px 18px #12b09340;
}

.battery-action:disabled {
  cursor: not-allowed;
  color: #709185;
  box-shadow: none;
  background: #233e34d1;
  border-color: #6c8f8273;
}

.battery-action__bolt {
  font-size: 1.12rem;
}

.battery-notice {
  color: #68e7bd;
  grid-column: 1 / -1;
  min-height: 1em;
  margin: -5px 0 0;
  font-size: .72rem;
}

@media (max-width: 720px) {
  .power-console {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 14px;
  }

  .power-console__copy, .battery-action {
    grid-column: 1 / -1;
  }

  .power-timer {
    min-width: 0;
  }

  .battery-action {
    width: 100%;
  }
}

.battery-stock__glyph {
  background: #062b25;
  border: 1px solid #67ffe6e6;
  border-radius: 4px;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  width: 40px;
  height: 22px;
  padding: 3px;
  display: grid;
  position: relative;
  box-shadow: 0 0 12px #2ee2cf38;
}

.battery-stock__glyph:after {
  content: "";
  background: #65f4d7;
  border-radius: 0 2px 2px 0;
  width: 3px;
  height: 8px;
  position: absolute;
  top: 6px;
  right: -4px;
}

.battery-stock__glyph i {
  background: linear-gradient(#8dffef, #20c8b4);
  border-radius: 1px;
  min-width: 0;
  display: block;
  box-shadow: 0 0 7px #45edd6bf;
}

/*# sourceMappingURL=apps_web_src_app_0rat013._.css.map*/