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

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

.topbar, .hall-card, .hint, .first-session-guidance {
  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 #314c56;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 80px #0008;
}

.hall-card__power-overlay {
  z-index: 20;
  pointer-events: auto;
  position: absolute;
  top: 10px;
  right: 10px;
}

.hall-power-battery {
  color: #e8f4fa;
  cursor: pointer;
  background: #123247;
  border: 1px solid #4f91ad;
  border-radius: 8px;
  place-items: center;
  width: 64px;
  height: 30px;
  padding: 3px;
  display: grid;
  position: relative;
}

.hall-power-battery:after {
  content: "";
  background: #123247;
  border: 1px solid #4f91ad;
  border-left: 0;
  border-radius: 0 2px 2px 0;
  width: 4px;
  height: 12px;
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
}

.hall-power-battery__time {
  color: #e8f4fa;
  white-space: nowrap;
  font: 800 .62rem / 1 ui-monospace, monospace;
}

.hall-power-battery .power-segments--compact {
  z-index: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: auto;
  padding: 0;
  display: grid;
  position: absolute;
  inset: 3px;
}

.hall-power-battery .power-segments--compact .power-segment {
  border-radius: 1px;
  width: auto;
  height: auto;
  min-height: 0;
}

.hall-power-battery__time {
  z-index: 1;
  position: relative;
}

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

.hall-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.hall-workshop-mobile-entry {
  display: none;
}

.power-segments {
  grid-template-columns: repeat(4, minmax(24px, 1fr));
  gap: 6px;
  padding: 12px 0;
  display: grid;
}

.power-segments--compact {
  gap: 3px;
  padding: 0;
  display: flex;
}

.power-segment {
  background: #17211f;
  border: 1px solid #405953;
  border-radius: 3px;
  min-height: 13px;
}

.power-segments--compact .power-segment {
  width: 7px;
  min-height: 14px;
}

.power-segment--full {
  background: #5bd9c5;
  border-color: #4bc9b7;
  box-shadow: 0 0 9px #4cd9c266;
}

.power-segment--partial {
  background: linear-gradient(90deg, #56cfc1 50%, #17211f 50%);
  border-color: #5dafa8;
}

.power-segment--empty {
  background: #17211f;
}

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

.quiet-button, .battery-button, .slot-row button {
  color: #c6f3e4;
  cursor: pointer;
  background: #122d34;
  border: 1px solid #3d6474;
  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 .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 #314047;
}

.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: #173d4b;
  border-color: #3d88a2;
}

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

.first-session-guidance {
  color: #dceee6;
  background: linear-gradient(145deg, #112227, #091215);
  border: 1px solid #3a6270;
  border-radius: 14px;
  gap: 13px;
  margin-top: 14px;
  padding: 16px;
  display: grid;
  box-shadow: 0 12px 34px #0006;
}

.first-session-guidance__header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  display: flex;
}

.first-session-guidance h2 {
  margin: 4px 0 0;
  font-size: 18px;
}

.first-session-guidance ul {
  color: #b8cac2;
  gap: 8px;
  margin: 0;
  padding-left: 19px;
  font-size: 13px;
  line-height: 1.48;
  display: grid;
}

.first-session-guidance li strong, .first-session-guidance__power strong {
  color: #83e4c7;
}

.first-session-guidance__power {
  color: #b8cac2;
  background: #0a1619;
  border-left: 3px solid #5da9d0;
  gap: 7px;
  padding: 11px 12px;
  font-size: 13px;
  line-height: 1.5;
  display: grid;
}

.first-session-guidance__power p {
  margin: 0;
}

.first-session-guidance__actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.first-session-guidance__actions button {
  color: #d3f5ee;
  cursor: pointer;
  background: #12333b;
  border: 1px solid #3d6474;
  border-radius: 9px;
  min-height: 40px;
  padding: 0 12px;
  font-weight: 700;
}

.first-session-guidance__dismiss {
  color: #dceee6;
  cursor: pointer;
  background: none;
  border: 1px solid #425f68;
  border-radius: 50%;
  flex: none;
  width: 34px;
  height: 34px;
  font-size: 23px;
  line-height: 1;
}

.first-session-guidance__actions button:focus-visible, .first-session-guidance__dismiss:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #7dbae1;
}

.wallet-sheet__context {
  color: #a8bbb2;
  margin: 14px 0 2px;
  font-size: 13px;
  line-height: 1.5;
}

.wallet-screen__header {
  border-bottom: 1px solid #315b76;
  padding-bottom: 14px;
  align-items: center !important;
}

.wallet-screen__subtitle {
  color: var(--cs-steel-muted);
  margin: 7px 0 0;
  font-size: 13px;
}

.wallet-screen__status {
  color: var(--cs-cyan);
  letter-spacing: .08em;
  font: 700 10px ui-monospace, monospace;
}

.wallet-home {
  border: 1px solid var(--cs-blue-border);
  background: linear-gradient(145deg, #102638, #091724);
  border-radius: 18px;
  gap: 14px;
  padding: 14px;
  display: grid;
  box-shadow: inset 0 1px #dceeff0d, 0 12px 28px #0006;
}

.wallet-home .slot-list {
  border: 0;
  gap: 14px;
  margin: 0;
  display: grid;
}

.wallet-balance-hero {
  text-align: center;
  background: radial-gradient(circle at 50% 0, #1a4a66, #0b1b2a 72%);
  border: 1px solid #3d7895;
  border-radius: 14px;
  gap: 6px;
  padding: 20px 16px;
  display: grid;
}

.wallet-balance-hero span, .wallet-balance-grid span, .wallet-balance-grid small, .wallet-section-heading > span {
  color: var(--cs-steel-muted);
  letter-spacing: .1em;
  font-size: 11px;
}

.wallet-balance-hero strong {
  color: var(--cs-cyan);
  font-size: clamp(32px, 10vw, 48px);
  line-height: 1;
}

.wallet-balance-hero strong small {
  color: var(--cs-steel-muted);
  margin-left: 6px;
  font-size: 13px;
}

.wallet-balance-hero p {
  color: var(--cs-steel-muted);
  margin: 0;
  font-size: 12px;
}

.wallet-balance-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.wallet-balance-grid div {
  background: #0b1b29;
  border: 1px solid #315b76;
  border-radius: 11px;
  gap: 6px;
  padding: 13px 11px;
  display: grid;
}

.wallet-balance-grid strong {
  color: var(--cs-steel);
  font-size: 16px;
}

.wallet-assets, .wallet-withdraw-card {
  gap: 10px;
  padding-top: 4px;
  display: grid;
}

.wallet-section-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.wallet-section-heading h2 {
  margin: 3px 0 0;
  font-size: 20px;
}

.wallet-asset-list {
  gap: 8px;
  display: grid;
}

.wallet-asset {
  min-height: 68px;
  color: var(--cs-steel);
  text-align: left;
  cursor: pointer;
  background: #0b1b29;
  border: 1px solid #315b76;
  border-radius: 12px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  display: grid;
}

.wallet-asset.is-selected {
  border-color: var(--cs-cyan);
  box-shadow: 0 0 0 1px #78d0e633, inset 0 0 18px #78d0e611;
}

.wallet-asset i {
  color: #06121b;
  background: #79d4e7;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 21px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}

.wallet-asset--blue i {
  color: #eff9ff;
  background: #4094d0;
}

.wallet-asset--gold i {
  background: #d5b15d;
}

.wallet-asset span {
  gap: 3px;
  display: grid;
}

.wallet-asset strong {
  font-size: 16px;
}

.wallet-asset small {
  color: var(--cs-steel-muted);
}

.wallet-asset b {
  color: var(--cs-cyan);
  font-size: 26px;
  font-weight: 400;
}

.wallet-dev-badge {
  color: var(--cs-steel-muted);
  letter-spacing: .08em;
  border: 1px solid #52758b;
  border-radius: 5px;
  padding: 3px 6px;
  font: 700 9px ui-monospace, monospace;
}

.wallet-withdraw-card label, .wallet-quote label {
  color: var(--cs-steel-muted);
  gap: 5px;
  font-size: 12px;
  display: grid;
}

.wallet-withdraw-card input, .wallet-quote input {
  width: 100%;
  min-height: 44px;
  color: var(--cs-steel);
  font: inherit;
  background: #071522;
  border: 1px solid #315b76;
  border-radius: 9px;
  padding: 0 11px;
}

.wallet-primary-action {
  border: 1px solid var(--cs-cyan);
  color: #06121b;
  background: var(--cs-cyan);
  cursor: pointer;
  border-radius: 9px;
  min-height: 44px;
  font-weight: 800;
}

.wallet-quote {
  border-top: 1px solid #315b76;
  gap: 10px;
  padding-top: 10px;
  display: grid;
}

.wallet-quote > div {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  display: flex;
}

.wallet-quote > div span, .wallet-quote small {
  color: var(--cs-steel-muted);
}

.wallet-quote > div strong {
  color: var(--cs-cyan);
  font-size: 20px;
}

.wallet-feedback {
  color: #b9e8d5;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.wallet-usdt-summary {
  background: #0b1b29;
  border: 1px solid #3d7895;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px;
  display: flex;
}

.wallet-usdt-summary strong {
  color: #79d4e7;
  font-size: 24px;
}

.wallet-usdt-summary span {
  color: var(--cs-steel-muted);
  font-size: 12px;
}

.wallet-ton-connect {
  border-top: 1px solid #315b76;
  gap: 9px;
  padding-top: 14px;
  display: grid;
}

.wallet-ton-connect > div span {
  color: var(--cs-steel-muted);
  letter-spacing: .08em;
  font-size: 11px;
}

.wallet-ton-address {
  color: var(--cs-cyan);
  margin: 0;
  font: 700 16px ui-monospace, monospace;
}

.wallet-secondary-action {
  min-height: 40px;
  color: var(--cs-steel);
  cursor: pointer;
  background: #102638;
  border: 1px solid #52758b;
  border-radius: 9px;
  font-weight: 700;
}

.wallet-ton-actions {
  gap: 8px;
  display: grid;
}

.wallet-balance-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.wallet-balance-card {
  background: linear-gradient(145deg, #102638, #0b1b29);
  border: 1px solid #315b76;
  border-radius: 14px;
  gap: 12px;
  padding: 14px;
  display: grid;
  box-shadow: inset 0 1px #dceeff0d;
}

.wallet-balance-card--earned {
  border-color: #8b7440;
}

.wallet-balance-card--purchased {
  border-color: #6e8290;
}

.wallet-balance-card__top {
  align-items: center;
  gap: 12px;
  display: flex;
}

.wallet-balance-card__top img {
  object-fit: contain;
  flex: none;
  width: 46px;
  height: 46px;
}

.wallet-balance-card__top div {
  gap: 4px;
  display: grid;
}

.wallet-balance-card span {
  color: var(--cs-steel);
  font-size: 15px;
  font-weight: 700;
}

.wallet-balance-card small {
  color: var(--cs-steel-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
}

.wallet-balance-card > strong {
  color: var(--cs-steel);
  font-size: 26px;
  line-height: 1;
}

.wallet-balance-card--earned > strong {
  color: #f0d58a;
}

.wallet-balance-card--purchased > strong {
  color: #d6e1e8;
}

.wallet-balance-card em {
  color: var(--cs-steel-muted);
  margin-left: 5px;
  font-size: 13px;
  font-style: normal;
}

.wallet-receive-preview {
  background: #071522;
  border: 1px solid #315b76;
  border-radius: 9px;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 11px 12px;
  display: flex;
}

.wallet-receive-preview span {
  color: var(--cs-steel-muted);
  font-size: 12px;
}

.wallet-receive-preview strong {
  color: var(--cs-cyan);
  font-size: 18px;
}

.wallet-screen__header {
  padding-bottom: 8px;
}

.wallet-screen__subtitle {
  display: none;
}

.wallet-home {
  -webkit-backdrop-filter: blur(6px);
  background: #04121d85;
  border: 0;
  gap: 10px;
  padding: 10px 12px 12px;
}

.wallet-home .slot-list {
  gap: 12px;
}

.wallet-balance-item {
  grid-template-rows: auto auto auto;
  grid-template-columns: 52px 1fr;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  padding: 4px 2px;
  display: grid;
}

.wallet-balance-item img {
  object-fit: contain;
  grid-row: 1 / span 3;
  width: 52px;
  height: 52px;
}

.wallet-balance-item strong {
  color: var(--cs-steel);
  white-space: nowrap;
  font-size: 22px;
  line-height: 1;
}

.wallet-balance-item--purchased strong {
  color: #d6e1e8;
}

.wallet-balance-item span {
  color: var(--cs-steel);
  font-size: 13px;
  font-weight: 700;
}

.wallet-balance-item small {
  color: var(--cs-steel-muted);
  font-size: 10px;
}

.wallet-withdraw-card {
  border-top: 0;
  gap: 9px;
  padding-top: 8px;
}

.wallet-usdt-summary {
  background: none;
  border: 0;
  border-bottom: 1px solid #315b76;
  border-radius: 0;
  padding: 8px 0;
}

.wallet-usdt-summary strong {
  font-size: 21px;
}

.wallet-withdraw-card label {
  gap: 4px;
}

.wallet-withdraw-card input {
  min-height: 42px;
}

.wallet-receive-preview {
  padding: 9px 11px;
}

.wallet-ton-connect {
  border-top: 1px solid #315b76;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 0 0;
  display: flex;
}

.wallet-ton-row {
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 8px;
  min-width: 0;
  display: grid;
}

.wallet-ton-row .eyebrow {
  color: #79d4e7;
  grid-row: 1 / span 2;
  margin: 0;
}

.wallet-ton-row strong {
  white-space: nowrap;
  font-size: 13px;
}

.wallet-ton-row small {
  color: var(--cs-cyan);
  white-space: nowrap;
  font: 600 11px ui-monospace, monospace;
}

.wallet-ton-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  display: flex;
}

.wallet-link-action {
  min-height: 30px;
  color: var(--cs-cyan);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
}

.wallet-link-action:disabled {
  opacity: .55;
}

.wallet-primary-action {
  min-height: 42px;
}

@media (max-width: 360px) {
  .wallet-balance-item {
    grid-template-columns: 44px 1fr;
    column-gap: 7px;
  }

  .wallet-balance-item img {
    width: 44px;
    height: 44px;
  }

  .wallet-balance-item strong {
    font-size: 19px;
  }

  .wallet-balance-item span {
    font-size: 12px;
  }
}

.wallet-screen__header {
  border-bottom: 0;
  padding-bottom: 2px;
}

.wallet-screen__status {
  display: none;
}

.wallet-balance-grid {
  border-bottom: 1px solid #315b76;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0 0 10px;
  display: grid;
}

.wallet-balance-item {
  background: none;
  border: 0;
  grid-template-rows: auto auto;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 9px;
  min-width: 0;
  padding: 9px 8px 9px 0;
  display: grid;
}

.wallet-balance-item + .wallet-balance-item {
  border-top: 0;
  padding-left: 16px;
}

.wallet-balance-grid .wallet-balance-item {
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
}

.wallet-balance-item img {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
}

.wallet-balance-item strong {
  color: var(--cs-steel);
  white-space: nowrap;
  grid-area: 1 / 3 / span 2;
  font-size: 15px;
  font-weight: 700;
}

.wallet-balance-item--earned strong, .wallet-balance-item--purchased strong {
  color: var(--cs-steel);
}

.wallet-balance-item em {
  color: var(--cs-steel-muted);
  margin-left: 3px;
  font-size: 10px;
  font-style: normal;
}

.wallet-balance-item span {
  min-width: 0;
  color: var(--cs-steel);
  letter-spacing: 0;
  white-space: nowrap;
  grid-area: 1 / 2;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.1;
}

.wallet-balance-item small {
  letter-spacing: 0;
  grid-area: 2 / 2;
  font-size: 11px;
}

.wallet-withdraw-card {
  border: 0;
  gap: 10px;
  padding-top: 12px;
}

.wallet-withdraw-heading {
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}

.wallet-withdraw-heading h2 {
  margin: 2px 0 0;
  font-size: 20px;
}

.wallet-withdraw-heading > span {
  color: #79d4e7;
  letter-spacing: .08em;
  font: 700 11px ui-monospace, monospace;
}

.wallet-withdraw-meta {
  color: var(--cs-steel-muted);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  display: grid;
}

.wallet-withdraw-meta strong {
  color: var(--cs-steel);
  margin-top: 2px;
  font-size: 13px;
  display: block;
}

.wallet-conversion-input {
  background: #071522;
  border: 1px solid #315b76;
  border-radius: 9px;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 10px;
  display: grid;
}

.wallet-conversion-input input {
  background: none;
  border: 0;
  min-width: 0;
  min-height: 40px;
  padding: 0;
}

.wallet-conversion-input span {
  color: var(--cs-steel-muted);
  font-size: 12px;
}

.wallet-conversion-input b {
  color: var(--cs-steel-muted);
}

.wallet-conversion-input strong {
  color: var(--cs-cyan);
  text-align: right;
  white-space: nowrap;
  font-size: 14px;
}

.wallet-ton-connect {
  padding: 8px 0 0;
}

.wallet-ton-connect--identity {
  background: #071522;
  border: 1px solid #315b76;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin: 10px 0 2px;
  padding: 9px 10px;
  display: flex;
}

.wallet-ton-connect--identity .wallet-ton-row {
  flex: 1;
}

.wallet-ton-connect--identity .wallet-ton-actions {
  flex: none;
}

.wallet-ton-row .eyebrow {
  font-size: 10px;
}

.wallet-helper {
  color: var(--cs-steel-muted);
  margin: 0;
  font-size: 12px;
}

@media (max-width: 360px) {
  .wallet-balance-grid {
    column-gap: 0;
  }

  .wallet-balance-item {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    column-gap: 7px;
    padding-right: 5px;
  }

  .wallet-balance-item + .wallet-balance-item {
    padding-left: 10px;
  }

  .wallet-balance-item img {
    width: 28px;
    height: 28px;
  }

  .wallet-balance-item span {
    font-size: 11px;
  }

  .wallet-balance-item small {
    font-size: 10px;
  }

  .wallet-balance-item strong {
    font-size: 14px;
  }

  .wallet-conversion-input {
    gap: 4px;
    padding: 0 7px;
  }

  .wallet-conversion-input strong {
    font-size: 12px;
  }
}

.wallet-primary-action:disabled {
  color: #82949a;
  box-shadow: none;
  opacity: .8;
  cursor: not-allowed;
  background: #1a2b33;
  border-color: #3d5965;
}

.wallet-balance-list {
  border-bottom: 1px solid #315b76;
  gap: 0;
  padding: 0 0 10px;
  display: grid;
}

.wallet-balance-list .wallet-balance-item {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 11px 0;
  display: grid;
}

.wallet-balance-list .wallet-balance-item img {
  object-fit: contain;
  width: 30px;
  height: 30px;
}

.wallet-balance-list .wallet-balance-item > div {
  min-width: 0;
}

.wallet-balance-list .wallet-balance-item span {
  min-width: 0;
  color: var(--cs-steel);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
}

.wallet-balance-list .wallet-balance-item small {
  color: var(--cs-steel-muted);
  white-space: nowrap;
  font-size: 11px;
}

.wallet-balance-list .wallet-balance-item strong {
  min-width: 0;
  color: var(--cs-steel);
  text-align: right;
  white-space: nowrap;
  justify-self: end;
  font-size: 18px;
  font-weight: 750;
  line-height: 1;
}

.wallet-balance-list .wallet-balance-item em {
  color: var(--cs-steel-muted);
  margin-left: 4px;
  font-size: 11px;
  font-style: normal;
}

.wallet-withdraw-info {
  color: var(--cs-steel-muted);
  gap: 8px;
  font-size: 12px;
  display: grid;
}

.wallet-withdraw-info p {
  color: var(--cs-steel);
  margin: 0;
}

.wallet-withdraw-info > div {
  gap: 4px;
  display: grid;
}

.wallet-withdraw-guidance {
  color: var(--cs-steel-muted);
  line-height: 1.45;
}

.wallet-withdraw-info span {
  justify-content: space-between;
  gap: 12px;
  display: flex;
}

.wallet-withdraw-info strong {
  color: var(--cs-steel);
  text-align: right;
  font-weight: 650;
}

.wallet-primary-action--soft {
  color: #b1c0c4;
  box-shadow: none;
  background: #20333c;
  border-color: #52758b;
}

@media (max-width: 360px) {
  .wallet-balance-list .wallet-balance-item {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    column-gap: 12px;
  }

  .wallet-balance-list .wallet-balance-item img {
    width: 30px;
    height: 30px;
  }

  .wallet-balance-list .wallet-balance-item span {
    font-size: 12px;
  }

  .wallet-balance-list .wallet-balance-item strong {
    font-size: 16px;
  }

  .wallet-withdraw-info span {
    gap: 8px;
  }
}

.energy-sheet__success {
  color: #aee7d5;
  background: #0c251f;
  border: 1px solid #3b7869;
  border-radius: 11px;
  gap: 8px;
  margin: 13px 0 8px;
  padding: 13px;
  font-size: 13px;
  line-height: 1.45;
  display: grid;
}

.energy-sheet__success p {
  margin: 0;
}

.energy-sheet__success button {
  color: #d3f5ee;
  cursor: pointer;
  background: #155047;
  border: 1px solid #58bfa7;
  border-radius: 9px;
  width: max-content;
  min-height: 42px;
  padding: 0 11px;
  font-weight: 700;
}

.mining-pool__empty {
  gap: 5px;
  line-height: 1.5;
  display: grid;
}

.gameplay-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  max-width: 900px;
  margin: 0 auto 12px;
  display: grid;
}

.gameplay-nav button {
  color: #d9f3e9;
  cursor: pointer;
  background: #101f25;
  border: 1px solid #36545d;
  border-radius: 9px;
  min-height: 42px;
  font-weight: 700;
}

.gameplay-nav button:hover, .gameplay-nav button:focus-visible {
  border-color: #76bbd9;
  outline: none;
}

.gameplay-surface {
  min-height: 100svh;
  padding: 18px 14px calc(28px + env(safe-area-inset-bottom));
  color: #e4eee9;
  background: radial-gradient(circle at 80% 0, #183a32, #08130f 57%, #030706);
}

.gameplay-surface > header, .gameplay-surface > article, .gameplay-surface > .offer-list, .gameplay-surface > .gameplay-state {
  width: min(100%, 720px);
  margin-inline: auto;
}

.gameplay-surface > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  display: flex;
}

.gameplay-surface h1 {
  margin: 4px 0;
  font-size: 32px;
}

.gameplay-state, .gameplay-empty, .gameplay-info, .gameplay-hero, .offer-card {
  background: #101e23;
  border: 1px solid #314c56;
  border-radius: 15px;
  margin-block: 12px;
  padding: 16px;
}

.gameplay-state, .gameplay-empty {
  color: #b6c9c1;
  line-height: 1.55;
}

.gameplay-empty strong {
  color: #e5f4ed;
}

.gameplay-hero {
  background: linear-gradient(135deg, #172f39, #101e23);
  gap: 7px;
  display: grid;
}

.gameplay-hero span, .gameplay-info span {
  color: #9dbdb1;
  letter-spacing: .08em;
  font-size: 12px;
}

.gameplay-hero strong {
  color: #84e8c7;
  font-size: 30px;
}

.gameplay-hero small, .gameplay-info small, .offer-card small {
  color: #b3c7bf;
  line-height: 1.5;
}

.gameplay-info {
  gap: 6px;
  display: grid;
}

.gameplay-info strong {
  color: #edf7f2;
  font-size: 18px;
}

.offer-list {
  gap: 10px;
  display: grid;
}

.offer-card {
  gap: 7px;
  display: grid;
}

.offer-card h2, .offer-card p {
  margin: 0;
}

.offer-card p {
  color: #b7c8c1;
}

.offer-card strong {
  color: #84e8c7;
  font-size: 21px;
}

@media (max-width: 500px) {
  .gameplay-nav {
    z-index: 5;
    background: #070e11f2;
    margin-inline: -2px;
    padding: 7px 2px;
    position: sticky;
    top: 0;
    overflow-x: auto;
  }

  .gameplay-nav button {
    font-size: 11px;
  }

  .gameplay-surface {
    padding-inline: 12px;
  }

  .gameplay-surface h1 {
    font-size: 28px;
  }
}

.mining-pool__empty strong {
  color: #d7e3f6;
}

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

.rack-sheet {
  background: #0e1a1b;
  border: 1px solid #476673;
  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 #2d3f46;
  margin-top: 22px;
}

.slot-row {
  color: #a8bbb2;
  border-bottom: 1px solid #25363b;
  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;
}

.energy-sheet-backdrop {
  z-index: 12;
  background: linear-gradient(0deg, #020506cf 0 62%, #0000 88%);
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}

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

.energy-sheet__header {
  border-bottom: 1px solid #2d4c51;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  min-height: 44px;
  padding-bottom: 14px;
  display: flex;
  position: relative;
}

.energy-sheet__header h2 {
  font-size: 20px;
}

.energy-sheet__header .sheet-close {
  position: static;
}

.energy-sheet__status {
  color: #b8c9c0;
  margin: 22px 0;
  line-height: 1.5;
}

.energy-sheet__status button, .energy-sheet__battery button, .energy-confirmation__actions button {
  color: #d3f5ee;
  cursor: pointer;
  background: #12383b;
  border: 1px solid #3d6f74;
  border-radius: 9px;
  min-height: 38px;
  padding: 0 11px;
}

.energy-sheet__readout {
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 18px 0 5px;
  display: grid;
}

.energy-sheet__readout div, .energy-sheet__battery > div {
  gap: 4px;
  display: grid;
}

.energy-sheet__readout span, .energy-sheet__battery span, .energy-sheet__battery p, .energy-sheet__battery small {
  color: #a8c1bc;
  font-size: 13px;
  line-height: 1.45;
}

.energy-sheet__readout strong, .energy-sheet__battery strong {
  color: #e8f6f1;
  font-size: 18px;
}

.energy-sheet__battery {
  border-top: 1px solid #2d4c51;
  gap: 10px;
  margin-top: 4px;
  padding: 15px 0;
  display: grid;
}

.energy-sheet__battery > div {
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}

.energy-sheet__battery p {
  margin: 0;
}

.energy-sheet__battery button {
  width: max-content;
}

.energy-sheet button:disabled {
  cursor: default;
  opacity: .48;
}

.energy-sheet__success {
  color: #83e4c7;
  margin: 8px 0;
  font-size: 13px;
}

.energy-confirmation {
  background: #0b1b1d;
  border: 1px solid #4e767e;
  border-radius: 12px;
  gap: 10px;
  margin-top: 13px;
  padding: 15px;
  display: grid;
}

.energy-confirmation h3 {
  margin: 0;
  font-size: 17px;
}

.energy-confirmation dl {
  border-top: 1px solid #284146;
  margin: 0;
}

.energy-confirmation dl div {
  border-bottom: 1px solid #284146;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  display: flex;
}

.energy-confirmation dt {
  color: #a8c1bc;
}

.energy-confirmation dd {
  color: #e8f6f1;
  margin: 0;
  font-weight: 700;
}

.energy-confirmation p[role="alert"] {
  color: #f0c0aa;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.energy-confirmation__actions {
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.energy-confirmation__actions button:last-child {
  background: #154850;
  border-color: #57a8b9;
}

.rack-management-actions {
  border-bottom: 1px solid #253b36;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  display: flex;
}

.rack-management-actions button {
  padding: 7px 9px;
  font-size: 12px;
}

.slot-row__actions {
  justify-content: flex-end;
  gap: 6px;
  display: flex;
}

.rack-static-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  display: grid;
}

.rack-static-stats div {
  border: 1px solid #2d3f46;
  border-radius: 8px;
  padding: 9px 10px;
}

.rack-static-stats dt {
  color: #a8bbb2;
  font-size: 11px;
}

.rack-static-stats dd {
  color: #e4eee9;
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
}

.slot-row__miner-info {
  color: #e4eee9;
  min-width: 0;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 700;
  overflow: hidden;
}

.slot-row__miner-info:hover, .slot-row__miner-info:focus-visible {
  color: #70e3ba;
  outline: none;
  text-decoration: underline;
}

.miner-details {
  padding-top: 12px;
}

.miner-details h2 {
  color: #e4eee9;
  margin: 4px 0 0;
}

.miner-details__rarity {
  color: #9ebcb1;
  text-transform: capitalize;
  margin: 4px 0 21px;
}

.miner-details__facts {
  border-top: 1px solid #2d3f46;
  margin: 0;
}

.miner-details__facts div {
  border-bottom: 1px solid #25363b;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  display: flex;
}

.miner-details__facts dt {
  color: #a8bbb2;
}

.miner-details__facts dd {
  color: #e4eee9;
  margin: 0;
  font-weight: 700;
}

.miner-details__close {
  color: #c6f3e4;
  cursor: pointer;
  background: #122d34;
  border: 1px solid #3d6474;
  border-radius: 9px;
  width: 100%;
  margin-top: 20px;
  padding: 11px 12px;
}

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

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

  .hall-header {
    padding: 14px;
  }

  .hall-workshop-header-entry {
    display: none;
  }

  .hall-workshop-mobile-entry {
    border: 0;
    color: #def5eb;
    text-align: left;
    cursor: pointer;
    background: linear-gradient(90deg, #12303a, #0d1f24);
    border-block: 1px solid #3f7566;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 56px;
    padding: 10px 14px;
    display: grid;
  }

  .hall-workshop-mobile-entry .gameplay-icon {
    color: #7de6c2;
    width: 25px;
    height: 25px;
  }

  .hall-workshop-mobile-entry > span:nth-child(2) {
    gap: 2px;
    min-width: 0;
    display: grid;
  }

  .hall-workshop-mobile-entry strong {
    font-size: 15px;
  }

  .hall-workshop-mobile-entry small {
    color: #a8c5ba;
    font-size: 11px;
  }

  .hall-workshop-mobile-entry__arrow {
    color: #86e4c3;
    font-size: 27px;
    line-height: 1;
  }

  .hall-workshop-mobile-entry:focus-visible {
    outline-offset: -3px;
    outline: 2px solid #8ac9eb;
  }

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

.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));
  border: 1px solid #3e7085;
  background: linear-gradient(155deg, #111718, #0a0b0d 68%);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  overflow: auto;
  box-shadow: 0 -16px 50px #000a;
}

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

.treasury-sheet__close {
  color: #f2e9c8;
  background: #162122;
  border: 1px solid #3a6070;
  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 #233337;
  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 #3e7085;
    border-radius: 20px 20px 0 0;
    width: min(100%, 620px);
    margin-inline: auto;
  }
}

.rack.empty {
  opacity: .82;
}

.rack--target .rack-frame {
  border-color: #e0bd60;
  box-shadow: 0 0 0 2px #e0bd6066, 5px 7px #0006;
}

.rack-add {
  color: #d8e7d5;
  background: #203126;
  border: 1px solid #7b926e;
  border-radius: 6px;
  margin-top: 5px;
  padding: 3px 7px;
  font-size: 10px;
  display: inline-flex;
}

.equipment-storage-backdrop {
  z-index: 11;
  background: linear-gradient(0deg, #020506cc 0 60%, #0000 88%);
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}

.equipment-storage {
  width: 100%;
  min-height: 50svh;
  max-height: 65svh;
  padding: 16px 18px calc(20px + env(safe-area-inset-bottom));
  color: #dceee6;
  background: #0e1a1b;
  border: 1px solid #476673;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  overflow: auto;
  box-shadow: 0 -16px 50px #000a;
}

.equipment-storage__header {
  border-bottom: 1px solid #2d3f46;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  min-height: 44px;
  padding-bottom: 14px;
  display: flex;
  position: relative;
}

.equipment-storage__header h2 {
  font-size: 20px;
}

.equipment-storage__header .sheet-close {
  position: static;
}

.equipment-storage__list {
  gap: 10px;
  padding-top: 16px;
  display: grid;
}

.equipment-storage__card {
  background: #101e24;
  border: 1px solid #314c56;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px;
  display: flex;
}

.equipment-storage__card div {
  gap: 3px;
  display: grid;
}

.equipment-storage__card span, .equipment-storage__empty {
  color: #b8c9c0;
  font-size: 13px;
}

.equipment-storage__card button {
  color: #c6f3e4;
  background: #122d34;
  border: 1px solid #3d6474;
  border-radius: 9px;
  min-height: 38px;
  padding: 0 11px;
}

.equipment-storage__empty {
  margin-top: 22px;
}

.storage-screen {
  min-height: 100svh;
  padding: 18px 14px calc(28px + env(safe-area-inset-bottom));
  color: #e4eee9;
  background: radial-gradient(circle at 72% 0, #17352e 0, #091411 42%, #030706 100%);
}

.storage-screen__header, .storage-panel {
  width: min(100%, 900px);
  margin-inline: auto;
}

.storage-screen__header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 0 4px 20px;
  display: flex;
}

.storage-screen__header h1 {
  margin: 4px 0;
  font-size: clamp(28px, 7vw, 39px);
}

.storage-screen__header p:last-child {
  color: #a8bdb4;
  margin: 0;
  font-size: 13px;
}

.storage-screen__back {
  color: #d9f3e9;
  cursor: pointer;
  background: #11272d;
  border: 1px solid #476c7b;
  border-radius: 9px;
  flex: none;
  min-height: 42px;
  padding: 0 12px;
}

.storage-screen__back:focus-visible, .storage-tabs button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #7dbae1;
}

.storage-panel {
  background: linear-gradient(145deg, #101e23, #091013 72%);
  border: 1px solid #314c56;
  border-radius: 16px;
  padding: 17px;
  box-shadow: 0 20px 58px #0008;
}

.storage-panel__heading {
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.storage-panel__heading h2 {
  margin: 0;
  font-size: 20px;
}

.storage-panel__heading span {
  color: #9db3aa;
  text-align: right;
  font-size: 12px;
}

.storage-tabs {
  background: #070e11;
  border: 1px solid #293e46;
  border-radius: 11px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 17px 0;
  padding: 4px;
  display: grid;
}

.storage-tabs button {
  color: #a9beb5;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 8px;
  min-height: 42px;
  font-weight: 700;
}

.storage-tabs button[aria-selected="true"] {
  color: #e2f6ee;
  background: #16333c;
  border-color: #466d7c;
  box-shadow: 0 0 20px #4ba3d022;
}

.storage-panel > .storage-tabs {
  margin-block: 12px;
}

.storage-panel > .hall-edit-sort {
  gap: 6px;
}

.storage-panel > .hall-edit-sort > button {
  min-height: 38px;
  padding-block: 4px;
}

.storage-panel > .hall-edit-sort + .storage-grid {
  margin-top: 8px;
}

.storage-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 11px;
  display: grid;
}

.storage-card {
  background: linear-gradient(145deg, #101f26, #0a1317);
  border: 1px solid #314c56;
  border-radius: 12px;
  min-width: 0;
  padding: 14px;
}

.storage-card__identity {
  border-bottom: 1px solid #283c44;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding-bottom: 13px;
  display: grid;
}

.storage-card__glyph {
  color: #8ae1c5;
  background: #10262d;
  border: 1px solid #566f80;
  border-radius: 9px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  display: grid;
}

.storage-card h3 {
  overflow-wrap: anywhere;
  color: #e4f0ea;
  margin: 0;
  font-size: 16px;
}

.storage-card__identity p {
  color: #a4b9b1;
  text-transform: capitalize;
  margin: 3px 0 0;
  font-size: 12px;
}

.storage-card dl {
  gap: 0;
  margin: 12px 0 0;
  display: grid;
}

.storage-card dl div {
  border-bottom: 1px solid #21333a;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  display: flex;
}

.storage-card dt {
  color: #a7bdb4;
  font-size: 12px;
}

.storage-card dd {
  color: #edf7f2;
  text-align: right;
  white-space: nowrap;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.storage-state {
  color: #b6c9c1;
  text-align: center;
  background: #080f13;
  border: 1px dashed #3d5762;
  border-radius: 11px;
  margin: 20px 0 4px;
  padding: 17px;
}

@media (max-width: 360px) {
  .storage-screen {
    padding-inline: 10px;
  }

  .storage-panel {
    padding: 13px;
  }

  .storage-screen__header {
    gap: 8px;
  }

  .storage-screen__back {
    padding-inline: 9px;
    font-size: 12px;
  }

  .storage-panel__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .storage-panel__heading span {
    text-align: left;
  }

  .storage-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mining-status-screen {
  color: #f4f6ff;
  background: radial-gradient(circle at top, #1b2741, #0b101d 65%);
  min-height: 100vh;
  padding: 20px;
}

.mining-status-screen__header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
}

.mining-status-screen h1, .mining-status-screen h2 {
  margin: 0;
}

.mining-status-state, .mining-card, .mining-history, .mining-hero {
  background: #141b2d;
  border: 1px solid #485579;
  border-radius: 16px;
  margin: 12px 0;
  padding: 16px;
}

.mining-hero {
  background: linear-gradient(135deg, #192a4b, #17233a);
  gap: 7px;
  display: grid;
}

.mining-hero p, .mining-card p, .mining-reward p {
  color: #8ea3cc;
  letter-spacing: .08em;
  margin: 0;
  font-size: 12px;
}

.mining-hero > strong {
  color: #7ee7ff;
  font-size: 32px;
}

.mining-hero > span, .mining-card span, .mining-reward small {
  color: #b9c4dc;
}

.mining-hero__empty {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  display: flex;
}

.mining-card {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.mining-card > div {
  gap: 5px;
  display: grid;
}

.mining-card button, .mining-reward button, .mining-hero__empty button {
  color: #08111c;
  background: #20d1d7;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 800;
}

.mining-pool h2 {
  margin: 8px 0 14px;
  font-size: 16px;
  line-height: 1.35;
}

.mining-pool__empty, .mining-history__empty {
  color: #b9c4dc;
  margin: 0;
}

.mining-history__heading {
  margin-bottom: 10px;
}

.mining-history__rows {
  gap: 8px;
  display: grid;
}

.mining-reward {
  border-top: 1px solid #394665;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  display: flex;
}

.mining-reward:first-child {
  border-top: 0;
}

.mining-reward > div {
  gap: 5px;
  display: grid;
}

.mining-reward strong {
  color: #77e6b9;
  font-size: 19px;
}

.mining-reward--primary {
  background: #101829;
  border: 1px solid #4e678e;
  border-radius: 12px;
  padding: 14px;
}

.mining-reward--primary strong {
  font-size: 25px;
}

.mining-status-state[role="alert"] {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.mining-status-state button {
  color: #08111c;
  background: #20d1d7;
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
}

@media (min-width: 760px) {
  .mining-status-screen {
    max-width: 820px;
    margin: 0 auto;
  }

  .mining-history__rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mining-reward {
    border: 1px solid #394665;
    border-radius: 12px;
    padding: 12px;
  }
}

.player-hud {
  align-items: center;
  gap: 7px;
  display: flex;
}

.player-hud button {
  color: #d9f3e9;
  cursor: pointer;
  background: #101f25;
  border: 1px solid #36545d;
  border-radius: 9px;
  min-height: 40px;
}

.player-hud__wallet, .player-hud__avatar {
  place-items: center;
  width: 42px;
  padding: 0;
  display: grid;
}

.player-hud__balance {
  align-items: baseline;
  gap: 4px;
  padding: 0 10px;
  display: flex;
}

.player-hud__balance strong {
  font-size: 13px;
}

.player-hud__balance small {
  color: #8fcdb8;
  font-size: 10px;
}

.player-hud__avatar {
  border-radius: 50% !important;
}

.player-hud .gameplay-icon {
  width: 20px;
  height: 20px;
}

.gameplay-menu-backdrop, .player-menu-backdrop {
  z-index: 30;
  background: linear-gradient(0deg, #020506de 0 58%, #02050655 100%);
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}

.gameplay-menu, .player-menu {
  width: min(100%, 560px);
  max-height: min(76svh, 650px);
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  color: #dceee6;
  background: linear-gradient(150deg, #101f24, #070f11 74%);
  border: 1px solid #486875;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  margin-inline: auto;
  overflow: auto;
  box-shadow: 0 -16px 52px #000b;
}

.gameplay-menu header, .player-menu header {
  border-bottom: 1px solid #2d4750;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 44px;
  padding-bottom: 13px;
  display: flex;
  position: relative;
}

.gameplay-menu h2, .player-menu h2 {
  margin: 3px 0 0;
  font-size: 22px;
}

.gameplay-menu .sheet-close, .player-menu .sheet-close {
  color: #dceee6;
  background: #101f25;
  border: 1px solid #46636e;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 26px;
  position: static;
}

.gameplay-menu__list {
  gap: 8px;
  padding-top: 14px;
  display: grid;
}

.gameplay-menu__list > button {
  color: #e1f1ea;
  text-align: left;
  cursor: pointer;
  background: #0c181d;
  border: 1px solid #314e59;
  border-radius: 10px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 56px;
  padding: 9px 11px;
  display: grid;
}

.gameplay-menu__list > button:disabled {
  color: #91a39b;
  opacity: .72;
  cursor: default;
  border-color: #2a363b;
}

.gameplay-menu__list .gameplay-icon {
  color: #79d8b7;
  width: 23px;
  height: 23px;
}

.gameplay-menu__list span {
  gap: 2px;
  min-width: 0;
  font-weight: 700;
  display: grid;
}

.gameplay-menu__list small {
  color: #aa9b74;
  letter-spacing: .08em;
  text-transform: uppercase;
  font: 700 10px ui-monospace, monospace;
}

.gameplay-menu__list b {
  color: #85dfbf;
  font-size: 23px;
  line-height: 1;
}

.gameplay-menu__list > button:focus-visible, .player-hud button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #8ac7e8;
}

@media (max-width: 720px) {
  .game-shell {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .topbar {
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
  }

  .topbar > div:first-child, .topbar .connection {
    display: none;
  }

  .player-hud {
    justify-content: flex-end;
    width: 100%;
  }

  .player-hud__wallet span {
    display: none;
  }

  .gameplay-nav {
    z-index: 20;
    width: 100%;
    max-width: none;
    padding: 7px max(8px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));
    background: #070e11f7;
    border-top: 1px solid #36545d;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    display: grid;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: visible;
    box-shadow: 0 -10px 28px #0009;
  }

  .gameplay-nav button {
    color: #b3c7be;
    background: none;
    border: 0;
    border-radius: 8px;
    place-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 52px;
    padding: 4px 2px;
    font-size: 10px;
    display: grid;
  }

  .gameplay-nav button:disabled {
    color: #687972;
    opacity: .72;
  }

  .gameplay-nav .gameplay-icon {
    width: 22px;
    height: 22px;
  }

  .gameplay-nav__label {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
  }

  .gameplay-nav .gameplay-nav__active {
    color: #8ce8c7;
    background: #18323c;
    box-shadow: inset 0 0 0 1px #4e7d92;
  }

  .gameplay-surface, .storage-screen, .mining-status-screen {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .hall-controls {
    margin-left: auto;
  }

  .hall-controls .hud-icon-action {
    min-height: 38px;
  }

  .hall-controls .hud-icon-action span {
    display: none;
  }

  .hall-workshop-mobile-entry, .hall-workshop-header-entry {
    display: none !important;
  }
}

@media (min-width: 721px) {
  .player-hud {
    display: none;
  }

  .gameplay-menu, .player-menu {
    border-bottom: 1px solid #486875;
    border-radius: 18px;
    margin-bottom: 10svh;
  }
}

:root {
  --cs-bg: #111719;
  --cs-panel: #182023;
  --cs-panel-raised: #202a2d;
  --cs-text: #f2eee5;
  --cs-muted: #a9b0ad;
  --cs-amber: #d7923b;
  --cs-amber-bright: #f0b44d;
  --cs-copper: #8f582b;
  --cs-info: #65b8c5;
  --cs-danger: #cf6e62;
  --cs-success: #76b99b;
}

.game-shell, .gameplay-surface, .storage-screen {
  color: var(--cs-text);
  background: radial-gradient(circle at 74% 0,#2b261d 0,var(--cs-bg) 48%,#080b0c 100%);
}

.topbar .connection {
  color: var(--cs-muted);
}

.topbar .connection span {
  background: var(--cs-info);
}

.player-hud button, .gameplay-nav button {
  border-color: color-mix(in srgb,var(--cs-copper) 74%,#34434d);
  color: var(--cs-text);
  background: var(--cs-panel);
}

.player-hud__balance {
  border-left-color: var(--cs-amber) !important;
}

.player-hud__balance small {
  color: var(--cs-amber-bright);
}

.gameplay-nav button:focus-visible, .player-hud button:focus-visible {
  outline-color: var(--cs-amber-bright);
}

.gameplay-menu, .player-menu {
  border-color: var(--cs-copper);
  background: linear-gradient(150deg,var(--cs-panel-raised),var(--cs-bg) 74%);
}

.gameplay-menu__list .gameplay-icon, .gameplay-menu__list b {
  color: var(--cs-amber);
}

.gameplay-menu__list small {
  color: var(--cs-amber-bright);
}

.hall-header .section-label, .eyebrow {
  color: var(--cs-amber) !important;
}

.quiet-button:hover, .quiet-button:focus-visible, .storage-screen__back:focus-visible {
  border-color: var(--cs-amber-bright) !important;
  outline-color: var(--cs-amber-bright) !important;
}

.storage-tabs button[aria-selected="true"] {
  border-color: var(--cs-copper);
  color: var(--cs-text);
  background: #1e3149;
  box-shadow: 0 0 20px #3b92d722;
}

.league-status-card {
  border: 1px solid var(--cs-copper);
  border-left: 4px solid var(--cs-amber);
  width: min(100%, 1040px);
  min-height: 76px;
  color: var(--cs-text);
  text-align: left;
  background: linear-gradient(100deg,#162129,var(--cs-panel));
  cursor: pointer;
  border-radius: 12px;
  grid-template-columns: 46px minmax(0, 1fr) minmax(115px, .8fr) auto;
  align-items: center;
  gap: 11px;
  margin: 0 auto 12px;
  padding: 10px 13px;
  display: grid;
  box-shadow: 0 10px 28px #0006;
}

.league-status-card:focus-visible {
  outline: 2px solid var(--cs-amber-bright);
  outline-offset: 2px;
}

.league-status-card__badge {
  border: 1px solid var(--cs-amber);
  width: 38px;
  height: 46px;
  color: var(--cs-amber-bright);
  background: #0f1820;
  border-radius: 8px 8px 13px 13px;
  place-items: center;
  font: 800 19px ui-monospace, monospace;
  display: grid;
}

.league-status-card__summary {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.league-status-card__summary small, .league-status-card__summary em, .league-status-card__progress small {
  color: var(--cs-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-style: normal;
  overflow: hidden;
}

.league-status-card__summary strong {
  color: var(--cs-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  overflow: hidden;
}

.league-status-card__progress {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.league-status-card__progress > span {
  background: #0c1011;
  border-radius: 999px;
  height: 7px;
  display: block;
  overflow: hidden;
}

.league-status-card__progress i {
  border-radius: inherit;
  background: linear-gradient(90deg,var(--cs-copper),var(--cs-amber-bright));
  height: 100%;
  display: block;
}

.league-status-card__max {
  border: 1px solid var(--cs-amber);
  color: var(--cs-amber-bright);
  border-radius: 6px;
  padding: 5px 7px;
  font: 700 10px ui-monospace, monospace;
}

.league-status-card > b {
  color: var(--cs-amber);
  font-size: 24px;
}

.league-status-card--silver {
  --cs-amber: #c1c7c4;
  --cs-amber-bright: #edf0ec;
  --cs-copper: #76807c;
}

.league-status-card--gold {
  --cs-amber: #d7a949;
  --cs-amber-bright: #f1cd72;
  --cs-copper: #89652a;
}

.league-status-card--platinum {
  --cs-amber: #83b7ba;
  --cs-amber-bright: #b4dce0;
  --cs-copper: #4c777b;
}

.league-status-card--diamond {
  --cs-amber: #79aeca;
  --cs-amber-bright: #b3d9ed;
  --cs-copper: #486f88;
}

.league-status-card--titan {
  --cs-amber: #aaa59a;
  --cs-amber-bright: #ded8c9;
  --cs-copper: #625e57;
}

.league-status-card--emerald {
  --cs-amber: #7fae9b;
  --cs-amber-bright: #a6d3bc;
  --cs-copper: #476c5d;
}

.league-status-card--legend {
  --cs-amber: #e0b15c;
  --cs-amber-bright: #f5d887;
  --cs-copper: #8d652d;
}

@media (max-width: 720px) {
  .league-status-card {
    grid-template-columns: 42px minmax(0, 1fr) minmax(94px, .72fr) auto;
    width: calc(100% - 28px);
    min-height: 68px;
    margin-bottom: 10px;
    padding: 8px 10px;
  }

  .league-status-card__badge {
    width: 34px;
    height: 40px;
  }

  .league-status-card__summary em {
    max-width: 118px;
  }

  .league-status-card__progress small {
    font-size: 9px;
  }
}

@media (max-width: 360px) {
  .league-status-card {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .league-status-card__progress {
    display: none;
  }
}

.hall-discovery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 1040px);
  margin: 0 auto 12px;
  display: grid;
}

.hall-discovery__card {
  border: 1px solid var(--cs-copper);
  min-width: 0;
  min-height: 82px;
  color: var(--cs-text);
  text-align: left;
  background: var(--cs-panel-raised);
  cursor: pointer;
  border-radius: 12px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  display: grid;
  overflow: hidden;
}

.hall-discovery__card:focus-visible {
  outline: 2px solid var(--cs-amber-bright);
  outline-offset: 2px;
}

.hall-discovery__card:disabled {
  cursor: default;
  opacity: .78;
}

.hall-discovery__glyph {
  width: 30px;
  height: 37px;
  color: var(--cs-amber-bright);
  border: 1px solid;
  border-radius: 6px 6px 11px 11px;
  place-items: center;
  font: 800 21px / 1 ui-monospace, monospace;
  display: grid;
}

.hall-discovery__card--expeditions .hall-discovery__glyph {
  color: var(--cs-info);
}

.hall-discovery__card span:not(.hall-discovery__glyph) {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.hall-discovery__card small {
  color: var(--cs-muted);
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 8px ui-monospace, monospace;
  overflow: hidden;
}

.hall-discovery__card strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  overflow: hidden;
}

.hall-discovery__card em {
  color: var(--cs-amber-bright);
  font-size: 10px;
  font-style: normal;
}

.hall-discovery__card--expeditions em {
  color: #9dbfc3;
}

.hall-discovery__card > b {
  color: var(--cs-amber);
  font-size: 20px;
}

.hall-discovery__card--expeditions > b {
  color: var(--cs-info);
}

.hall-header {
  background: none;
  min-height: 0;
  padding: 10px 12px;
}

.hall-header .hall-controls {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 100%;
}

.hall-header .energy-indicator {
  flex: auto;
  justify-content: center;
  min-height: 42px;
}

.hall-header .hall-edit-entry {
  place-items: center;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: grid;
}

.hall-header .hall-edit-entry .gameplay-icon {
  width: 20px;
  height: 20px;
}

.hall-header .hall-edit-entry span {
  display: none;
}

@media (max-width: 720px) {
  .hall-discovery {
    width: calc(100% - 28px);
  }

  .hall-card {
    border-radius: 14px;
  }

  .hall-header {
    padding: 8px 10px;
  }

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

@media (min-width: 721px) {
  .hall-discovery {
    max-width: 900px;
  }

  .hall-header .hall-controls {
    justify-content: flex-end;
  }

  .hall-header .hall-edit-entry {
    gap: 7px;
    width: auto;
    min-width: 0;
    padding: 7px 10px;
    display: inline-flex;
  }

  .hall-header .hall-edit-entry span {
    display: inline;
  }
}

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

html, body {
  overscroll-behavior-x: none;
  background: #0b0f0f;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
}

:root {
  --cs-bg: #07111d;
  --cs-panel: #0d1b29;
  --cs-panel-raised: #13283a;
  --cs-text: #e8f0f5;
  --cs-muted: #9baeba;
  --cs-primary: #4e94bb;
  --cs-primary-bright: #78d0e6;
  --cs-border: #315b76;
  --cs-info: #70c7e2;
  --cs-success: #74b996;
  --cs-danger: #cf6e62;
  --cs-amber: var(--cs-primary);
  --cs-amber-bright: var(--cs-primary-bright);
  --cs-copper: var(--cs-border);
}

.game-shell, .gameplay-surface, .storage-screen, .mining-status-screen {
  background-color: #0b0f0f;
  background-image: linear-gradient(#03050538, #0305054d 58%, #03050561), url("/images/cryptoshelter-metal-wall.jpg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  max-width: 100%;
}

.game-shell, .gameplay-surface {
  isolation: isolate;
  position: relative;
}

.game-shell:before, .gameplay-surface:before {
  display: none;
}

.player-hud {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: stretch;
  gap: 6px;
  width: min(100%, 360px);
  min-width: 0;
  display: grid;
}

.player-hud button {
  border-color: var(--cs-border);
  min-height: 42px;
  color: var(--cs-text);
  background: linear-gradient(145deg,#142c40,var(--cs-panel));
  box-shadow: inset 0 0 0 1px #78d0e60a;
}

.player-hud__balance {
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  border-left-color: var(--cs-primary) !important;
}

.player-hud__balance strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.player-hud__balance small, .hall-header .section-label, .eyebrow {
  color: var(--cs-info) !important;
}

.player-hud .gameplay-icon, .gameplay-nav .gameplay-icon {
  color: var(--cs-info);
}

.gameplay-nav .gameplay-nav__active {
  color: var(--cs-text);
  background: linear-gradient(145deg,#1b4661,var(--cs-panel-raised));
  box-shadow: inset 0 0 0 1px var(--cs-primary),0 0 18px #70c7e21c;
}

.gameplay-menu, .player-menu {
  border-color: var(--cs-border);
  color: var(--cs-text);
  background: linear-gradient(150deg,#132b3f,var(--cs-bg) 74%);
}

.gameplay-menu header, .player-menu header {
  border-color: #294a60;
}

.gameplay-menu .sheet-close, .player-menu .sheet-close, .gameplay-menu__list > button {
  color: var(--cs-text);
  background: linear-gradient(145deg,#12283a,var(--cs-panel));
  border-color: #315b76;
}

.gameplay-menu__list .gameplay-icon, .gameplay-menu__list b, .gameplay-menu__list small {
  color: var(--cs-info);
}

.hall-card, .hall-header, .gameplay-state, .gameplay-empty, .gameplay-info, .gameplay-hero, .offer-card, .storage-panel, .storage-card {
  background: linear-gradient(145deg,#102333,var(--cs-panel));
  border-color: #315b76;
}

.quiet-button, .storage-screen__back, .energy-indicator {
  border-color: var(--cs-border) !important;
  color: var(--cs-text) !important;
  background: linear-gradient(145deg, #17334a, #0d1c2a) !important;
}

.league-status-card {
  border-color: var(--cs-border);
  border-left-color: var(--cs-primary);
  background: linear-gradient(100deg,#102b40,var(--cs-panel));
}

.league-status-card__badge {
  border-color: var(--cs-primary);
  color: var(--cs-primary-bright);
  background: #0b1926;
}

.league-status-card__progress i {
  background: linear-gradient(90deg,var(--cs-primary),var(--cs-primary-bright));
}

.hall-discovery__card {
  border-color: var(--cs-border);
  background: linear-gradient(145deg,#132b3d,var(--cs-panel-raised));
}

.hall-discovery__card--events {
  background: radial-gradient(circle at 84% 18%, #70c7e244 0 4%, #0000 30%), linear-gradient(135deg, #15354c, #0c1b29);
  border-color: #467898;
}

.hall-discovery__card--expeditions {
  background: radial-gradient(circle at 83% 16%, #8bb5cf35 0 4%, #0000 31%), linear-gradient(135deg, #122b3c, #0c1b29);
  border-color: #4b7188;
}

.hall-discovery__glyph, .hall-discovery__card--events em, .hall-discovery__card > b {
  color: var(--cs-primary-bright);
}

.hall-discovery__card--expeditions .hall-discovery__glyph, .hall-discovery__card--expeditions em, .hall-discovery__card--expeditions > b {
  color: var(--cs-info);
}

.task-wall-screen {
  flex-direction: column;
  min-height: 100svh;
  display: flex;
}

.task-wall-screen > .task-wall__header {
  align-items: center;
  width: min(100%, 520px);
  margin-bottom: 14px;
}

.task-wall__header-actions {
  top: calc(var(--cs-hud-top) + 25px);
  align-items: center;
  gap: 8px;
  display: flex;
  position: absolute;
  right: max(14px, 50% - 360px);
}

.task-wall__header-actions .gameplay-surface__back {
  position: static;
}

.task-wall__plus {
  border: 1px solid var(--cs-border);
  width: 38px;
  min-width: 38px;
  height: 38px;
  color: var(--cs-primary-bright);
  background: #102638;
  border-radius: 9px;
  place-items: center;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  display: grid;
}

.task-wall__header h1 {
  letter-spacing: .025em;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
}

.task-wall__header p {
  color: var(--cs-muted);
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 16px;
}

.task-wall {
  flex-direction: column;
  flex: auto;
  gap: 12px;
  width: min(100%, 520px);
  min-height: 0;
  margin-inline: auto;
  display: flex;
}

.task-wall__tabs {
  background: #07131d;
  border: 1px solid #294a60;
  border-radius: 11px;
  flex: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  display: grid;
}

.task-wall__tabs button {
  color: #8196a3;
  background: none;
  border: 0;
  border-radius: 8px;
  min-height: 34px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.task-wall__tabs button[aria-selected="true"] {
  color: #eaf8ff;
  background: #15354b;
  box-shadow: inset 0 0 0 1px #4c94ba;
}

.task-wall__tabs button:focus-visible {
  outline: 2px solid var(--cs-primary-bright);
  outline-offset: 1px;
}

.task-wall__notice {
  color: #b9d8e8;
  background: #102738;
  border: 1px solid #375b70;
  border-radius: 10px;
  margin: 0;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 16px;
}

.task-wall__scroll {
  min-height: 0;
  padding: 0 1px calc(22px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  scrollbar-width: thin;
  flex: auto;
  overflow-y: auto;
}

.task-wall__list, .task-wall__skeletons {
  gap: 10px;
  display: grid;
}

.task-wall__card, .task-wall__skeleton {
  background: linear-gradient(145deg, #102638, #0b1823);
  border: 1px solid #315b76;
  border-radius: 16px;
  width: 100%;
  min-height: 132px;
  padding: 14px;
  box-shadow: 0 8px 20px #0005;
}

.task-wall__card {
  gap: 12px;
  display: grid;
}

.task-wall__card-top {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: grid;
}

.task-wall__telegram {
  color: #dff7ff;
  background: #1787bd;
  border: 1px solid #4f9bc2;
  border-radius: 50%;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
  box-shadow: 0 0 15px #38b9ef22;
}

.task-wall__telegram svg {
  fill: currentColor;
  width: 23px;
  height: 23px;
}

.task-wall__channel {
  min-width: 0;
}

.task-wall__channel h2 {
  color: #f1f7fa;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  overflow: hidden;
}

.task-wall__channel p {
  color: #8499a5;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 15px;
}

.task-wall__reward {
  border: 1px solid color-mix(in srgb,var(--cs-amber) 72%,#74501f);
  min-width: 58px;
  color: var(--cs-amber-bright);
  text-align: center;
  white-space: nowrap;
  background: #362819;
  border-radius: 8px;
  flex: none;
  padding: 5px 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.task-wall__primary, .task-wall__secondary, .task-wall__empty button {
  letter-spacing: .045em;
  cursor: pointer;
  border-radius: 10px;
  place-items: center;
  width: 100%;
  font-weight: 800;
  display: grid;
}

.task-wall__primary {
  color: #f5fbff;
  background: linear-gradient(#1b78a0, #12516e);
  border: 1px solid #6ad6f3;
  border-radius: 12px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  box-shadow: inset 0 0 0 1px #b4efff18;
}

a.task-wall__primary {
  text-decoration: none;
}

.task-wall__secondary {
  color: #bddfed;
  background: #102433;
  border: 1px solid #3f7591;
  min-height: 38px;
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
}

.task-wall__primary:disabled, .task-wall__secondary:disabled {
  cursor: wait;
  opacity: .66;
}

.task-wall__primary:focus-visible, .task-wall__secondary:focus-visible, .task-wall__empty button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #9beaff;
}

.task-wall__status {
  gap: 6px;
  min-height: 58px;
  display: grid;
}

.task-wall__status > span {
  color: #75c7e8;
  letter-spacing: .1em;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}

.task-wall__status > strong {
  color: #edf8fc;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.task-wall__card--attempting .task-wall__status > strong {
  font-variant-numeric: tabular-nums;
  font-size: 18px;
}

.task-wall__status p {
  color: #8da3ae;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 12px;
  line-height: 17px;
  display: -webkit-box;
  overflow: hidden;
}

.task-wall__status--success > span, .task-wall__status--success > strong {
  color: #72dfb4;
}

.task-wall__status--failed > span {
  color: #dcae7b;
}

.task-wall__status--failed > small {
  color: #8499a5;
  font-size: 11px;
  line-height: 16px;
}

.task-wall__progress {
  background: #071017;
  border-radius: 999px;
  width: 100%;
  height: 5px;
  overflow: hidden;
}

.task-wall__progress i {
  border-radius: inherit;
  background: linear-gradient(90deg, #2e91bd, #73d8ee);
  height: 100%;
  display: block;
}

.task-wall__empty {
  border: 1px solid var(--cs-border);
  width: 100%;
  min-height: 132px;
  color: var(--cs-text);
  text-align: center;
  background: linear-gradient(145deg, #102638, #0b1823);
  border-radius: 16px;
  place-content: center;
  gap: 7px;
  padding: 18px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.task-wall__empty strong {
  font-size: 16px;
  line-height: 20px;
}

.task-wall__empty p {
  color: var(--cs-muted);
  margin: 0;
  font-size: 12px;
  line-height: 17px;
}

.task-wall__empty button {
  color: #eaf8ff;
  background: #14384e;
  border: 1px solid #559fc3;
  min-height: 38px;
  margin-top: 4px;
  padding: 6px 20px;
}

.task-wall__skeleton {
  grid-template-rows: 17px 13px 44px;
  grid-template-columns: 36px minmax(0, 1fr) 54px;
  gap: 6px 10px;
  display: grid;
}

.task-wall__skeleton i, .task-wall__skeleton span, .task-wall__skeleton b {
  background: linear-gradient(100deg, #142a38 20%, #1d3b4c 42%, #142a38 64%) 0 0 / 220% 100%;
  border-radius: 7px;
  animation: 1.5s ease-in-out infinite task-wall-shimmer;
  display: block;
}

.task-wall__skeleton i {
  border-radius: 50%;
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
}

.task-wall__skeleton span:first-of-type {
  width: min(70%, 180px);
}

.task-wall__skeleton span:last-of-type {
  width: 92px;
}

.task-wall__skeleton b {
  grid-column: 1 / -1;
  align-self: end;
  height: 44px;
}

@keyframes task-wall-shimmer {
  to {
    background-position: -220% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-wall__skeleton i, .task-wall__skeleton span, .task-wall__skeleton b {
    animation: none;
  }
}

.task-wall__menu-backdrop {
  z-index: 45;
  padding: calc(var(--cs-hud-top) + 72px) 14px calc(90px + env(safe-area-inset-bottom));
  background: #02070bab;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: fixed;
  inset: 0;
}

.task-wall__menu {
  background: #0a1925;
  border: 1px solid #315b76;
  border-radius: 16px;
  gap: 8px;
  width: min(100%, 400px);
  padding: 12px;
  display: grid;
  box-shadow: 0 18px 45px #000b;
}

.task-wall__menu header {
  color: #82cce8;
  letter-spacing: .1em;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px 5px;
  font-size: 11px;
  display: flex;
}

.task-wall__menu header button {
  color: #a7bbc5;
  background: none;
  border: 0;
  width: 32px;
  height: 32px;
  font-size: 22px;
}

.task-wall__menu > button {
  color: #eef8fb;
  text-align: left;
  background: #102638;
  border: 1px solid #294d66;
  border-radius: 11px;
  gap: 3px;
  min-height: 58px;
  padding: 10px 12px;
  display: grid;
}

.task-wall__menu > button strong {
  font-size: 13px;
  line-height: 18px;
}

.task-wall__menu > button span {
  color: #8ea4af;
  font-size: 11px;
  line-height: 16px;
}

.task-wall-screen > .task-wall__header {
  margin-bottom: 4px;
}

.task-wall {
  gap: 6px;
}

.task-wall__tabs {
  border-radius: 7px;
  min-height: 30px;
}

.task-wall__tabs button {
  border-radius: 5px;
  min-height: 28px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 14px;
}

.task-wall__list, .task-wall__skeletons {
  gap: 1px;
}

.task-wall__card, .task-wall__skeleton {
  height: 28px;
  min-height: 28px;
  box-shadow: none;
  background: #0b1c29;
  border-color: #294b60;
  border-radius: 4px;
  padding: 3px 6px;
}

.task-wall__card {
  grid-template-columns: 20px minmax(0, 1fr) 50px 58px;
  align-items: center;
  gap: 6px;
  display: grid;
}

.task-wall__telegram {
  color: #32aee8;
  width: 20px;
  height: 20px;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 3px;
}

.task-wall__telegram svg {
  width: 18px;
  height: 18px;
}

.task-wall__channel h2 {
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
}

.task-wall__reward {
  min-width: 0;
  color: var(--cs-amber-bright);
  text-align: right;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  line-height: 14px;
}

.task-wall__row-action {
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.task-wall__row-action .task-wall__primary, .task-wall__row-action .task-wall__secondary {
  width: 56px;
  min-width: 56px;
  height: 23px;
  min-height: 23px;
  box-shadow: none;
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 10px;
  line-height: 12px;
}

.task-wall__row-action a.task-wall__primary {
  display: grid;
}

.task-wall__compact-status {
  color: #91a7b2;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 58px;
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  display: block;
  overflow: hidden;
}

.task-wall__compact-status--delayed {
  color: #d5b277;
}

.task-wall__status--success {
  color: #72dfb4;
}

.task-wall__skeleton {
  grid-template-columns: 20px minmax(0, 1fr) 50px 58px;
  gap: 6px;
  display: grid;
}

.task-wall__skeleton i {
  border-radius: 3px;
  width: 20px;
  height: 20px;
}

.task-wall__skeleton span:first-of-type {
  width: 70%;
  height: 14px;
}

.task-wall__skeleton span:last-of-type {
  width: 42px;
  height: 12px;
}

.task-wall__skeleton b {
  grid-column: 4;
  align-self: center;
  width: 56px;
  height: 23px;
}

.task-owner__scroll {
  width: min(100%, 520px);
  margin-inline: auto;
}

.task-create, .my-tasks {
  gap: 14px;
  display: grid;
}

.task-create {
  background: linear-gradient(145deg, #102638, #0b1823);
  border: 1px solid #315b76;
  border-radius: 16px;
  padding: 14px;
}

.task-create > label {
  gap: 6px;
  display: grid;
}

.task-create > label > span, .task-create__funding legend, .task-create__calculator span, .task-create__funding div span {
  color: #86a0ad;
  letter-spacing: .07em;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}

.task-create input[type="text"], .task-create > label > input {
  box-sizing: border-box;
  color: #f0f8fb;
  background: #071522;
  border: 1px solid #315b76;
  border-radius: 10px;
  outline: 0;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 20px;
}

.task-create input:focus {
  border-color: #62badf;
  box-shadow: 0 0 0 2px #62badf22;
}

.task-create input[aria-invalid="true"] {
  border-color: #b96767;
}

.task-create label small[role="alert"], .task-create__funding small[role="alert"] {
  color: #ef9696;
  font-size: 12px;
  line-height: 17px;
}

.task-owner__success {
  color: #72dfb4;
  font-size: 12px;
}

.task-create__warning {
  background: #2a2217;
  border: 1px solid #7a6038;
  border-radius: 11px;
  gap: 6px;
  padding: 11px 12px;
  display: grid;
}

.task-create__warning strong {
  color: #e5c47a;
  letter-spacing: .08em;
  font-size: 11px;
}

.task-create__warning p {
  color: #c8bca1;
  margin: 0;
  font-size: 12px;
  line-height: 17px;
}

.task-create__calculator {
  background: #071522;
  border: 1px solid #294d66;
  border-radius: 12px;
  gap: 8px;
  padding: 12px;
  display: grid;
}

.task-create__calculator > div {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.task-create__calculator strong {
  color: #eaf4f8;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.task-create__calculator .task-create__total {
  border-top: 1px solid #294d66;
  padding-top: 9px;
}

.task-create__calculator .task-create__total strong {
  overflow-wrap: anywhere;
  color: var(--cs-amber-bright);
  font-size: 22px;
  line-height: 26px;
}

.task-create__funding {
  border: 1px solid #294d66;
  border-radius: 12px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 11px 12px;
  display: grid;
}

.task-create__funding legend {
  padding-inline: 5px;
}

.task-create__funding label {
  color: #b7c9d2;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
}

.task-create__funding div {
  border-top: 1px solid #294d66;
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 7px;
  display: flex;
}

.task-create__funding div strong {
  color: var(--cs-amber-bright);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
}

.task-create__funding small, .task-create__funding button {
  grid-column: 1 / -1;
}

.my-tasks__list {
  gap: 10px;
  display: grid;
}

.owned-campaign {
  background: linear-gradient(145deg, #102638, #0b1823);
  border: 1px solid #315b76;
  border-radius: 16px;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.owned-campaign > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.owned-campaign > header div {
  min-width: 0;
}

.owned-campaign h2 {
  color: #eff8fb;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 20px;
  overflow: hidden;
}

.owned-campaign header span {
  color: #77cae9;
  letter-spacing: .08em;
  font-size: 10px;
  font-weight: 700;
}

.owned-campaign header > strong {
  color: #d9edf5;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
}

.owned-campaign > p {
  color: #9fb4be;
  margin: 0;
  font-size: 12px;
}

.owned-campaign > p strong {
  color: #e9f5f9;
}

.owned-campaign dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  display: grid;
}

.owned-campaign dl div {
  background: #081722;
  border: 1px solid #253f51;
  border-radius: 8px;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  display: grid;
}

.owned-campaign dt {
  color: #78909c;
  letter-spacing: .07em;
  font-size: 9px;
}

.owned-campaign dd {
  color: #e5f1f5;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}

.owned-campaign__warning {
  background: #261c16;
  border: 1px solid #76563c;
  border-radius: 10px;
  gap: 7px;
  padding: 10px;
  display: grid;
}

.owned-campaign__warning > strong, .owned-campaign__warning p {
  color: #e4b789;
  margin: 0;
  font-size: 11px;
  line-height: 16px;
}

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

  .topbar {
    width: 100%;
    max-width: 100%;
  }

  .player-hud {
    margin-left: auto;
  }

  .gameplay-nav {
    box-sizing: border-box;
    border-color: var(--cs-border);
    background: #07111df7;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: auto;
    max-width: 100%;
    left: 0;
    right: 0;
    overflow: clip;
  }

  .gameplay-nav button {
    min-width: 0;
  }

  .league-status-card, .hall-discovery {
    width: 100%;
    max-width: 100%;
  }

  .hall-card, .hall-scene, .hall-header .hall-controls {
    max-width: 100%;
  }

  .task-wall-screen {
    padding-inline: 14px;
  }
}

.player-hud {
  grid-template-columns: 36px minmax(0, max-content) 1fr;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: none;
}

.player-hud button {
  min-height: 36px;
}

.player-hud__wallet, .player-hud__avatar {
  width: 36px;
  height: 36px;
}

.player-hud__wallet span {
  display: none;
}

.player-hud__wallet .gameplay-icon {
  width: 19px;
  height: 19px;
}

.player-hud__balance {
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: min(39vw, 166px);
  min-height: 36px;
  padding: 6px 8px;
  display: inline-flex;
  overflow: hidden;
}

.player-hud__balance strong {
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1;
  overflow: hidden;
}

.player-hud__balance small {
  flex: none;
  font-size: .66rem;
  line-height: 1;
}

.player-hud__avatar {
  justify-self: end;
}

.hall-discovery__card {
  gap: 6px;
  min-height: 58px;
  padding: 7px 8px;
}

.hall-discovery__glyph {
  width: 26px;
  height: 29px;
  font-size: 16px;
}

.hall-discovery__card span:not(.hall-discovery__glyph) {
  gap: 0;
}

.hall-discovery__card small {
  font-size: 7px;
}

.hall-discovery__card strong {
  font-size: 12px;
}

.hall-discovery__card em {
  font-size: 9px;
}

.hall-discovery__card > b {
  display: none;
}

.mining-hall-viewport {
  position: relative;
}

.mining-hall-viewport__edit {
  z-index: 9;
  color: #eef7ff;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  letter-spacing: 1px;
  background-color: #123a52;
  background-image: repeating-linear-gradient(135deg, #72d5ed1a 0 1px, #0000 1px 6px);
  border: 1px solid #72d5ed;
  border-radius: 8px;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px 8px;
  font-size: .72rem;
  font-weight: 800;
  display: inline-flex;
  position: absolute;
  top: 10px;
  left: 10px;
  box-shadow: 0 3px 12px #0008, inset 0 0 0 1px #78d0e612;
}

.mining-hall-viewport__tools-icon {
  fill: none;
  stroke: #78d0e6;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 17px;
  height: 17px;
}

.mining-hall-viewport__edit:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #78d0e6;
}

@media (max-width: 420px) {
  .player-hud__balance {
    max-width: 44vw;
  }

  .player-hud__balance strong {
    font-size: 1rem;
  }

  .hall-discovery {
    gap: 7px;
  }

  .hall-discovery__card {
    min-height: 54px;
  }

  .mining-hall-viewport__edit {
    top: 7px;
    left: 7px;
  }
}

.league-status-card--placeholder {
  cursor: default;
  pointer-events: none;
}

.league-status-card__placeholder-block {
  opacity: .38;
}

.league-status-card__placeholder-line {
  color: #0000;
  background: linear-gradient(90deg, #315b7655, #78d0e633);
  border-radius: 3px;
  width: 72%;
  height: 12px;
  display: block;
}

.league-status-card__placeholder-line--short {
  width: 48%;
  height: 8px;
  margin-top: 3px;
}

.league-status-card--placeholder .league-status-card__progress i {
  opacity: .5;
  width: 38%;
}

.game-shell {
  padding-top: 12px;
}

.game-shell > .topbar, .game-shell > .league-status-card {
  margin-bottom: 6px;
}

.game-shell > .hall-discovery {
  gap: 8px;
  margin-bottom: 6px;
}

.mining-hall-viewport__tools-icon {
  stroke-width: 1.9px;
  width: 22px;
  height: 22px;
}

.mining-hall-viewport__edit {
  letter-spacing: 1px;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 7px;
}

@media (max-width: 500px) {
  .game-shell {
    padding-top: 8px;
  }
}

.player-hud__avatar {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
}

.player-hud__avatar > img {
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.rack-sheet__intro {
  color: #b8c9c0;
  margin: 10px 0 0;
  line-height: 1.5;
}

.rack-inspection-miners {
  gap: 8px;
  margin-top: 18px;
  display: grid;
}

.rack-inspection-miner {
  color: #e4eee9;
  text-align: left;
  background: #0a1714;
  border: 1px solid #2d463f;
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 112px;
  padding: 7px;
  display: grid;
}

.rack-inspection-miner .rack-inspection-miner__art {
  object-fit: contain;
  width: 100%;
  max-width: 240px;
  height: 128px;
}

.rack-inspection-miner strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.rack-inspection-miner--empty {
  color: #a8bbb2;
  grid-template-columns: 1fr;
  place-items: center;
}

.rack-management-backdrop {
  z-index: 30;
  padding: clamp(190px, 38vh, 360px) 12px calc(80px + env(safe-area-inset-bottom));
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.rack-sheet.rack-management {
  width: min(84vw, 520px);
  max-height: calc(100dvh - 112px - env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  padding: 10px 12px 4px;
  overflow-y: auto;
}

.rack-management > .eyebrow {
  align-items: center;
  min-height: 16px;
  margin: 0;
  padding-right: 44px;
  font-size: 10px;
  display: flex;
  position: relative;
  top: -3px;
}

.rack-management > .sheet-close {
  box-sizing: border-box;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 12px;
  line-height: 1;
  display: grid;
  top: 2px;
  right: 12px;
}

.rack-management__header {
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin: 30px 0 8px;
  padding-right: 0;
  display: flex;
}

.rack-management__header h2 {
  margin: 0;
  font-size: 18px;
}

.rack-management__header > div:first-child {
  position: relative;
  top: -12px;
}

.rack-management__header small {
  margin-top: 4px;
  display: block;
}

.rack-management__actions {
  align-items: center;
  gap: 4px;
  display: flex;
}

.rack-management .rack-management__icon {
  border: 1px solid var(--cs-blue-border, #315b76);
  width: 44px;
  min-width: 44px;
  height: 44px;
  color: var(--cs-steel, #dceee6);
  cursor: pointer;
  box-sizing: border-box;
  background: none;
  border-radius: 8px;
  place-items: center;
  padding: 8px;
  display: grid;
}

.rack-management__icon svg {
  width: 22px;
  height: 22px;
}

.rack-management__icon:disabled, .rack-management__icon[aria-disabled="true"] {
  opacity: .45;
  cursor: default;
}

.rack-management__icon:focus-visible {
  outline: 2px solid var(--cs-cyan, #70caff);
  outline-offset: 2px;
}

.rack-management__positions {
  gap: 2px;
  display: grid;
}

.rack-management__position {
  border: 1px solid var(--cs-blue-border, #315b76);
  background: #111416;
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: start;
  gap: 4px;
  min-height: 92px;
  padding: 8px 52px 8px 8px;
  display: grid;
  position: relative;
}

.rack-management__miner {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.rack-management__miner .equipment-visual {
  object-fit: contain;
  width: 100%;
  max-width: 160px;
  height: 72px;
}

.rack-management__miner strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  display: block;
}

.rack-management__miner small {
  margin-top: 3px;
  font-size: 12px;
  display: block;
}

.rack-management__empty {
  grid-column: 1 / -1;
  align-self: center;
  padding: 0;
}

.rack-management__choices small {
  display: block;
}

.rack-sheet.rack-management .rack-management__position {
  background-color: #0d0d0d;
  background-image: linear-gradient(#ffffff09 1px, #0000 1px), linear-gradient(90deg, #ffffff09 1px, #0000 1px);
  background-size: 14px 14px;
  border-color: #343434;
  grid-template-rows: 44px 44px;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 4px 8px;
  min-height: 0;
  padding: 6px;
}

.rack-management__position > .rack-management__actions {
  grid-area: 1 / 2;
  position: static;
}

.rack-management__position > .rack-management__select {
  grid-area: 2 / 2;
  position: static;
}

.rack-management__miner {
  grid-area: 1 / 1 / span 2;
  grid-template-columns: clamp(72px, 22vw, 112px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding-top: 0;
}

.rack-management__miner .equipment-visual {
  object-fit: contain;
  justify-self: center;
  width: 100%;
  max-width: 112px;
  height: 80px;
}

.rack-management__info {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.4;
}

.rack-management__confirmation {
  background: #171717;
  border: 1px solid #555;
  border-radius: 10px;
  margin-top: 12px;
  padding: 14px;
}

.rack-management__confirmation h3 {
  margin: 0 0 8px;
}

.rack-management__confirmation p {
  line-height: 1.4;
}

.rack-management__confirmation > div {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.rack-management__confirmation button {
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  min-height: 44px;
  padding: 8px 12px;
}

.rack-management__confirmation .rack-management__cancel {
  background: #252525;
  border: 1px solid #555;
}

.rack-management__confirmation .rack-management__destructive {
  background: #9e2828;
  border: 1px solid #d95b5b;
}

.rack-management__info > strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.rack-management__stats {
  color: #cda85f;
  flex-wrap: wrap;
  gap: 3px 7px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  display: flex;
}

.rack-management__stats > span {
  white-space: nowrap;
  align-items: center;
  gap: 3px;
  display: inline-flex;
}

.rack-management__stats svg {
  fill: currentColor;
  flex: none;
  width: 13px;
  height: 13px;
}

:root {
  --cs-safe-top: max(var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px), env(safe-area-inset-top, 0px));
  --cs-safe-right: max(var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px), env(safe-area-inset-right, 0px));
  --cs-safe-bottom: max(var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --cs-safe-left: max(var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px), env(safe-area-inset-left, 0px));
  --cs-hud-extra-top: 24px;
  --cs-hud-extra-right: 12px;
  --cs-hud-extra-bottom: 12px;
  --cs-hud-extra-left: 12px;
  --cs-hud-top: calc(var(--cs-safe-top) + var(--cs-hud-extra-top));
  --cs-hud-right: calc(var(--cs-safe-right) + var(--cs-hud-extra-right));
  --cs-hud-bottom: calc(var(--cs-safe-bottom) + var(--cs-hud-extra-bottom));
  --cs-hud-left: calc(var(--cs-safe-left) + var(--cs-hud-extra-left));
  --cs-viewport-stable-height: 100svh;
}

.wallet-home {
  -webkit-backdrop-filter: blur(6px);
  background: #04121d85;
  border: 1px solid #315b76;
  border-radius: 18px;
  box-shadow: inset 0 1px #dceeff0d, 0 12px 28px #0006;
}

.wallet-balance-list {
  border-bottom: 0;
  gap: 8px;
  padding: 0;
}

.wallet-balance-list .wallet-balance-item {
  background: none;
  border: 0;
  border-radius: 0;
  grid-template-columns: minmax(0, 2fr) minmax(92px, 1fr);
  column-gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: grid;
}

.wallet-balance-list .wallet-balance-item + .wallet-balance-item {
  border-top: 0;
}

.wallet-balance-list .wallet-balance-item__identity {
  background: #071926;
  border: 1px solid #4984a647;
  border-radius: 11px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 48px;
  padding: 7px 12px;
  display: flex;
}

.wallet-balance-list .wallet-balance-item__identity > div {
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.wallet-balance-list .wallet-balance-item__identity small {
  color: #d6b75c;
}

.wallet-balance-list .wallet-balance-item__amount {
  background: #123042;
  border: 1px solid #5ba3c761;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 7px 10px;
  display: flex;
}

.wallet-balance-list .wallet-balance-item__balance {
  text-align: center;
  white-space: nowrap;
  min-width: 0;
}

.wallet-withdraw-card {
  border-top: 0;
  padding-top: 16px;
}

.wallet-withdraw-card > .wallet-primary-action {
  width: 50%;
  min-width: 132px;
  max-width: 240px;
  margin-inline: auto;
}

.wallet-deposit {
  border-top: 1px solid #315b76;
  gap: 9px;
  padding-top: 15px;
  display: grid;
}

.wallet-deposit__heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.wallet-deposit__heading h2 {
  color: var(--cs-steel);
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.wallet-deposit__status {
  color: var(--cs-steel-muted);
  border: 1px solid #52758b;
  border-radius: 6px;
  padding: 4px 7px;
  font: 700 10px ui-monospace, monospace;
}

.wallet-deposit__rate {
  color: var(--cs-steel-muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.wallet-deposit__rate span {
  color: #8099a8;
}

.wallet-deposit__control {
  min-height: 48px;
  color: var(--cs-steel-muted);
  background: #071522;
  border: 1px solid #315b76;
  border-radius: 9px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
  align-items: center;
  gap: 9px;
  padding: 5px 10px;
  font-size: 12px;
  display: grid;
}

.wallet-deposit__input-wrap {
  background: #0b2030;
  border: 1px solid #294d66;
  border-radius: 7px;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  display: flex;
}

.wallet-deposit__input-wrap input {
  color: #f1f7fa;
  appearance: none;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  padding: 0;
  font: 700 16px / 1.1 ui-monospace, monospace;
}

.wallet-deposit__input-wrap input:focus {
  box-shadow: none;
}

.wallet-deposit__input-wrap input:disabled {
  opacity: .8;
}

.wallet-deposit__input-wrap span {
  color: #8fa8b6;
  flex: none;
  font: 700 11px / 1 ui-monospace, monospace;
}

.wallet-deposit__arrow {
  color: #5eb8d7;
  font-size: 18px;
  font-weight: 500;
}

.wallet-deposit__result {
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.wallet-deposit__result strong {
  max-width: 100%;
  color: var(--cs-cyan);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 clamp(14px, 4.2vw, 18px) / 1.05 ui-monospace, monospace;
  overflow: hidden;
}

.wallet-balance-item__balance em {
  display: none;
}

.wallet-deposit .wallet-primary-action {
  width: 50%;
  min-width: 132px;
  max-width: 240px;
  margin-inline: auto;
}

.wallet-deposit__message {
  color: #b8c9d1;
  text-align: center;
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
}

.wallet-deposit__message--muted {
  color: #8199a8;
}

.wallet-deposit__amount-label {
  color: var(--cs-steel-muted);
  gap: 5px;
  font-size: 12px;
  display: grid;
}

.wallet-deposit__control, .wallet-deposit__input-wrap, .wallet-deposit__input-wrap input {
  box-sizing: border-box;
}

.wallet-deposit__input-wrap:focus-within {
  border-color: #5eb8d7;
}

.wallet-conversion-input {
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
  gap: 9px;
  min-height: 48px;
  padding: 5px 10px;
}

.wallet-conversion-input__amount {
  box-sizing: border-box;
  background: #0b2030;
  border: 1px solid #294d66;
  border-radius: 7px;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  display: flex;
}

.wallet-conversion-input__amount:focus-within {
  border-color: #5eb8d7;
}

.wallet-conversion-input__amount input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.wallet-conversion-input__amount span {
  color: #8fa8b6;
  flex: none;
  font: 700 11px / 1 ui-monospace, monospace;
}

.wallet-conversion-input strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font: 700 clamp(14px, 4.2vw, 18px) / 1.05 ui-monospace, monospace;
  overflow: hidden;
}

.wallet-conversion-input input, .wallet-deposit__input-wrap input, .wallet-conversion-input input:focus, .wallet-conversion-input input:focus-visible, .wallet-deposit__input-wrap input:focus, .wallet-deposit__input-wrap input:focus-visible {
  appearance: none;
  -webkit-focus-ring-color: transparent;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}

.wallet-feedback {
  color: #ef8f8f;
}

.wallet-withdraw-heading h2, .wallet-deposit__heading > div > .eyebrow {
  color: #79d4e7;
  letter-spacing: .04em;
  margin: 2px 0 0;
  font: 400 16.5px / 1.2 ui-monospace, monospace;
}

.gameplay-nav--keyboard-hidden {
  display: none !important;
}

@media (max-width: 360px) {
  .wallet-balance-list .wallet-balance-item {
    grid-template-columns: minmax(0, 2fr) minmax(92px, 1fr);
    column-gap: 8px;
  }

  .wallet-balance-list .wallet-balance-item strong {
    font-size: 16px;
  }
}

/* [project]/apps/web/src/app/auth-bootstrap.css [app-client] (css) */
.bootstrap-screen {
  background: linear-gradient(#78d0e608 1px, #0000 1px) 0 0 / 18px 18px, linear-gradient(90deg, #78d0e608 1px, #0000 1px) 0 0 / 18px 18px, radial-gradient(circle at 50% 0, #183a55 0, #07111d 38%, #040a12 100%);
  place-items: center;
  min-height: 100svh;
  padding: 20px;
  display: grid;
}

.bootstrap-card {
  text-align: center;
  background: #0d1b29;
  border: 1px solid #315b76;
  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: #9baeba;
  margin: 0;
  line-height: 1.55;
}

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

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

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

.bootstrap-card button {
  color: #e8f0f5;
  cursor: pointer;
  background: #173d56;
  border: 1px solid #4e94bb;
  border-radius: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 22px;
}

.prelaunch-screen {
  min-height: 100svh;
  padding: calc(var(--cs-hud-top, var(--cs-safe-top, env(safe-area-inset-top))) + 18px) 14px calc(24px + var(--cs-safe-bottom, env(safe-area-inset-bottom)));
  color: #e8f4fa;
  background: #030912;
  position: relative;
  overflow: auto;
}

.prelaunch-screen > .particle-background {
  z-index: 0;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.prelaunch-content {
  z-index: 1;
  gap: 12px;
  width: min(100%, 720px);
  margin-inline: auto;
  display: grid;
  position: relative;
}

.prelaunch-hero, .prelaunch-referrals {
  background: linear-gradient(145deg, #102638e8, #091724e8);
  border: 1px solid #315b76;
  border-radius: 14px;
  gap: 9px;
  padding: 16px;
  display: grid;
  box-shadow: 0 12px 28px #0007;
}

.prelaunch-brand {
  color: #eef7ff;
  letter-spacing: .08em;
  margin: 0;
  font: 900 clamp(1.5rem, 7vw, 2.4rem) / 1 ui-monospace, monospace;
}

.prelaunch-hero h1 {
  margin: 0;
  font-size: clamp(1.35rem, 5vw, 2rem);
  line-height: 1.1;
}

.prelaunch-hero > p:last-child {
  color: #b8cedc;
  margin: 0;
  line-height: 1.45;
}

.prelaunch-referrals > .eyebrow {
  margin: 0;
}

.prelaunch-link {
  background: #071522a8;
  border: 1px solid #315b76;
  border-radius: 10px;
  gap: 6px;
  padding: 10px;
  display: grid;
}

.prelaunch-link span, .prelaunch-link small, .prelaunch-state, .prelaunch-referral-list > small {
  color: #9db7c7;
  font-size: .75rem;
}

.prelaunch-link strong {
  overflow-wrap: anywhere;
  color: #e8f4fa;
  font: .72rem / 1.35 ui-monospace, monospace;
}

.prelaunch-link div {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.prelaunch-link button {
  color: #e8f4fa;
  background: #123247;
  border: 1px solid #4f91ad;
  border-radius: 8px;
  min-height: 36px;
  padding: 5px 9px;
  font-size: .7rem;
  font-weight: 800;
}

.prelaunch-counts {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  display: grid;
}

.prelaunch-counts span {
  color: #9db7c7;
  border: 1px solid #315b76;
  border-radius: 9px;
  justify-content: space-between;
  padding: 9px 10px;
  display: flex;
}

.prelaunch-counts strong {
  color: #72d5ed;
}

.prelaunch-referral-list {
  gap: 0;
  display: grid;
}

.prelaunch-referral-list .referral-detail:first-child {
  border-top: 0;
}

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

.development-session--visual-prototype {
  z-index: 100;
  top: max(5px, env(safe-area-inset-top));
  color: #d8bd78;
  letter-spacing: .04em;
  pointer-events: none;
  background: #100d07c2;
  border: 1px solid #e5ba61ad;
  border-radius: 5px;
  padding: 3px 6px;
  font: 700 8px / 1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  position: fixed;
  left: 5px;
}

.bootstrap-art-surface {
  background-color: #080704;
  background-repeat: no-repeat;
  background-size: auto 100%;
  width: 100%;
  min-height: 100svh;
}

.bootstrap-art-surface--loading {
  background-position: 0;
}

.bootstrap-art-surface--closed {
  background-position: 100%;
}

.crypto-loader {
  isolation: isolate;
  color: #e8f4fa;
  background: #030912;
  place-items: center;
  min-height: 100svh;
  display: grid;
  position: relative;
  overflow: hidden;
}

.crypto-loader > .particle-background {
  z-index: 0;
  position: absolute;
  inset: 0;
}

.crypto-loader--overlay {
  z-index: 80;
  background: #030912c7;
  min-height: 0;
  position: absolute;
  inset: 0;
}

.crypto-loader-gate {
  z-index: 200;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .32s;
  position: fixed;
  inset: 0;
}

.crypto-loader-gate.is-fading {
  opacity: 0;
  pointer-events: none;
}

.crypto-loader__stage {
  z-index: 1;
  aspect-ratio: 1;
  isolation: isolate;
  place-items: center;
  width: min(52vw, 235px);
  display: grid;
  position: relative;
}

.crypto-loader__stage:before, .crypto-loader__stage:after {
  pointer-events: none;
  content: "";
  border-radius: 50%;
  position: absolute;
  inset: 0;
}

.crypto-loader__stage:before {
  z-index: -2;
  filter: blur(10px);
  background: radial-gradient(circle, #29cdff52 0, #22aeec2e 30%, #22aeec00 70%);
  animation: 3.8s ease-in-out infinite prelaunch-energy-halo;
}

.crypto-loader__stage:after {
  z-index: -1;
  filter: blur(4px);
  opacity: 0;
  background: radial-gradient(circle, #48d0ff2e 0, #48d0ff14 38%, #0000 68%);
  border: 1px solid #5adaff57;
  animation: 8s ease-out infinite prelaunch-energy-surge;
}

.crypto-loader__logo {
  z-index: 1;
  object-fit: contain;
  filter: drop-shadow(0 0 7px #39cfff61);
  transform-origin: center;
  width: clamp(112px, 34vw, 152px);
  max-width: 100%;
  height: auto;
  animation: 3.8s ease-in-out infinite prelaunch-logo-breathe;
  display: block;
  position: relative;
}

.prelaunch-hero {
  isolation: isolate;
  box-shadow: none;
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
  justify-items: center;
  gap: 7px;
  padding: 4px 8px 12px;
  position: relative;
  overflow: hidden;
}

.prelaunch-hero:before, .prelaunch-hero:after {
  aspect-ratio: 1;
  pointer-events: none;
  content: "";
  border-radius: 50%;
  width: clamp(170px, 52vw, 235px);
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translate(-50%, -3%);
}

.prelaunch-hero:before {
  z-index: -2;
  filter: blur(10px);
  background: radial-gradient(circle, #29cdff52 0, #22aeec2e 30%, #22aeec00 70%);
  animation: 3.8s ease-in-out infinite prelaunch-energy-halo;
}

.prelaunch-hero:after {
  z-index: -1;
  filter: blur(4px);
  opacity: 0;
  background: radial-gradient(circle, #48d0ff2e 0, #48d0ff14 38%, #0000 68%);
  border: 1px solid #5adaff57;
  animation: 8s ease-out infinite prelaunch-energy-surge;
}

.prelaunch-logo {
  z-index: 1;
  object-fit: contain;
  filter: drop-shadow(0 0 7px #39cfff61);
  transform-origin: center;
  width: clamp(112px, 34vw, 152px);
  max-width: 100%;
  height: auto;
  animation: 3.8s ease-in-out infinite prelaunch-logo-breathe;
  display: block;
  position: relative;
}

.prelaunch-hero .prelaunch-brand {
  font-size: clamp(1.25rem, 5.6vw, 1.8rem);
}

@keyframes prelaunch-logo-breathe {
  0%, 100% {
    filter: drop-shadow(0 0 5px #39cfff52) brightness(.92);
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 15px #39cfffc7) brightness(1.12);
    transform: scale(1.025);
  }
}

@keyframes prelaunch-energy-halo {
  0%, 100% {
    opacity: .15;
    transform: translate(-50%, -3%)scale(.88);
  }

  50% {
    opacity: .5;
    transform: translate(-50%, -3%)scale(1.08);
  }
}

@keyframes prelaunch-energy-surge {
  0%, 68%, 100% {
    opacity: 0;
    transform: translate(-50%, -3%)scale(.88);
  }

  74% {
    opacity: .5;
  }

  88% {
    opacity: 0;
    transform: translate(-50%, -3%)scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prelaunch-logo, .prelaunch-hero:before, .prelaunch-hero:after {
    animation: none;
  }

  .prelaunch-logo {
    filter: drop-shadow(0 0 8px #39cfff7a);
    transform: none;
  }

  .prelaunch-hero:before {
    opacity: .25;
    transform: translate(-50%, -3%)scale(.96);
  }

  .prelaunch-hero:after {
    opacity: 0;
  }

  .crypto-loader__logo, .crypto-loader__stage:before, .crypto-loader__stage:after {
    animation: none;
  }

  .crypto-loader__logo {
    filter: drop-shadow(0 0 8px #39cfff7a);
    transform: none;
  }

  .crypto-loader__stage:before {
    opacity: .25;
    transform: scale(.96);
  }

  .crypto-loader__stage:after {
    opacity: 0;
  }
}

.prelaunch-content > *, .prelaunch-referrals > *, .prelaunch-referral-list > * {
  min-width: 0;
}

.prelaunch-referrals > .eyebrow {
  color: #72d5ed;
}

.prelaunch-hero p {
  margin: 0;
}

.prelaunch-hero .prelaunch-welcome {
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  font-size: clamp(.75rem, 3.2vw, .9rem);
  line-height: 1.3;
}

.prelaunch-hero .prelaunch-status {
  color: #72d5ed;
  letter-spacing: .08em;
  border: 1px solid #4f91ad;
  border-radius: 6px;
  width: fit-content;
  padding: 5px 8px;
  font: 700 .65rem / 1.4 ui-monospace, monospace;
}

.prelaunch-hero .prelaunch-message {
  color: #eef7ff;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
}

.prelaunch-hero .prelaunch-description, .prelaunch-invite {
  color: #b8cedc;
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
}

.prelaunch-hero .prelaunch-context {
  color: #a2e2f2;
  border-top: 1px solid #315b7680;
  padding-top: 9px;
  font-size: .8rem;
  line-height: 1.4;
}

.prelaunch-referral-list .referral-detail__identity strong {
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: .8rem;
}

.prelaunch-referral-list .referral-detail__income span {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

.prelaunch-countdown {
  text-align: center;
  background: #07152255;
  border-block: 1px solid #315b7666;
  gap: 7px;
  padding: 10px 8px;
  display: grid;
}

.prelaunch-countdown__label {
  color: #72d5ed;
  letter-spacing: .1em;
  margin: 0;
  font: 700 .62rem / 1.3 ui-monospace, monospace;
}

.prelaunch-countdown__units {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.prelaunch-countdown__units div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.prelaunch-countdown__units strong {
  color: #e8f8ff;
  text-shadow: 0 0 10px #39cfff66;
  font: 800 clamp(1.35rem, 7vw, 2rem) / 1 ui-monospace, monospace;
}

.prelaunch-countdown__units small {
  color: #9db7c7;
  letter-spacing: .04em;
  font-size: clamp(.48rem, 2.4vw, .62rem);
}

@media (prefers-reduced-motion: reduce) {
  .prelaunch-countdown__units strong {
    text-shadow: 0 0 6px #39cfff44;
  }
}

/* [project]/apps/web/src/app/mining-hall-visual.css [app-client] (css) */
.hall-scene:before, .ceiling, .gantry, .service-aisle, .worker, .cable-cart, .lift-door {
  display: none;
}

.rear-terminal {
  z-index: 5;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #03110eb8;
  border: 1px solid #55eec047;
  border-radius: 4px;
  min-width: 138px;
  padding: 7px 9px;
  inset: auto 5% 7% auto;
  transform: none;
  box-shadow: 0 8px 24px #00000070;
}

.rear-terminal span {
  letter-spacing: .08em;
  font-size: .61rem;
}

.rear-terminal small {
  font-size: .56rem;
}

.rear-terminal:hover, .rear-terminal:focus-visible {
  border-color: #65f9cbd6;
  box-shadow: 0 0 0 2px #5de8b929, 0 8px 24px #00000070, 0 0 20px #36e0ad47;
}

.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-wall {
  z-index: 4;
  background: linear-gradient(#05141014, #020a0847);
  border: 1px solid #6e9a875c;
  grid-template-rows: repeat(2, minmax(76px, 1fr));
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px 8px;
  padding: 15px 13px 11px;
  display: grid;
  position: absolute;
  top: 28%;
  left: 16%;
  right: 16%;
  box-shadow: inset 0 0 24px #00000094, 0 12px 26px #0003;
}

.rack-wall:before, .rack-wall:after {
  content: "";
  background: linear-gradient(90deg, #0000, #92baa39e, #0000);
  height: 2px;
  position: absolute;
  left: 4px;
  right: 4px;
}

.rack-wall:before {
  top: 7px;
}

.rack-wall:after {
  bottom: 5px;
}

.rack-wall__label {
  color: #c9e5d6bd;
  letter-spacing: .12em;
  text-shadow: 0 1px 2px #000;
  font: 700 .53rem / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  position: absolute;
  top: -17px;
  left: 2px;
}

.rack {
  z-index: 1;
  box-shadow: none;
  background: none;
  border: 0;
  gap: 4px;
  padding: 0;
  position: relative;
}

.rack:after {
  display: none;
}

.rack-frame {
  background: linear-gradient(135deg, #172f28f5, #04110df7);
  border: 2px solid #6e9585b8;
  border-top-color: #b5d3c2b3;
  height: 61px;
  min-height: 61px;
  padding: 5px;
  transition: border-color .16s, box-shadow .16s, transform .16s, opacity .16s;
  box-shadow: inset 0 0 0 1px #000000ad, 3px 4px #0006;
}

.rack i {
  background: repeating-linear-gradient(90deg, #172b23fa 0 8px, #284136e6 9px 10px);
  border-color: #598271ad;
  min-height: 9px;
}

.rack i.miner {
  background: linear-gradient(90deg, #133c33, #31866e, #15473c);
  border-color: #59e0b0db;
  box-shadow: inset 0 0 0 1px #010e0abd, 0 0 9px #38ddab6b;
}

.rack.installed .rack-frame {
  background: linear-gradient(135deg, #1a3e33fa, #03130efa);
  border-color: #cdf3dce0 #69af92eb #69af92eb;
  box-shadow: inset 0 0 17px #24ae8424, 3px 4px #0000007a, 0 0 14px #1eab7f24;
}

.rack.installed .rack-caption {
  color: #e2f4e9;
  font-weight: 700;
}

.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: .7;
  background: linear-gradient(135deg, #08171252, #01080614);
  border-style: dashed;
  box-shadow: inset 0 0 0 1px #00000070;
}

.rack.empty .rack-caption {
  color: #c5dcd09e;
}

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

.rack-number {
  color: #e3ce82;
  background: #08110deb;
  padding: 1px 3px;
  font-size: .5rem;
  top: -7px;
  left: 1px;
}

.rack-add {
  color: #0000;
  background: #142f25e6;
  border-color: #7b926edb;
  border-radius: 50%;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  font-size: 0;
  display: grid;
  position: absolute;
  bottom: 15px;
  right: 1px;
  overflow: hidden;
}

.rack-add:before {
  color: #d8e7d5;
  content: "+";
  font-size: .88rem;
  line-height: 1;
}

.rack:hover .rack-frame, .rack:focus-visible .rack-frame {
  transform: translateY(-2px);
}

.rack:active .rack-frame {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .rack-frame {
    transition: none;
  }

  .rack:hover .rack-frame, .rack:focus-visible .rack-frame, .rack:active .rack-frame {
    transform: none;
  }
}

@media (max-width: 720px) {
  .rack-wall {
    grid-template-rows: repeat(2, minmax(64px, 1fr));
    gap: 7px 5px;
    padding: 13px 7px 8px;
    top: 30%;
    left: 8%;
    right: 8%;
  }

  .rack-frame {
    border-width: 2px;
    height: 53px;
    min-height: 53px;
    padding: 4px;
  }

  .rack i {
    min-height: 7px;
  }

  .rack-caption {
    font-size: .43rem;
  }

  .rack-number {
    font-size: .45rem;
  }

  .rack-wall__label {
    font-size: .46rem;
  }

  .rear-terminal {
    min-width: 124px;
    padding: 6px 7px;
    bottom: 6%;
    right: 4%;
  }

  .rear-terminal span {
    font-size: .53rem;
  }

  .rear-terminal small {
    display: none;
  }
}

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

/* [project]/apps/web/src/app/mining-hall-scene.css [app-client] (css) */
.hall-scene {
  isolation: isolate;
  background: none;
  min-height: 0;
  position: relative;
  overflow: visible;
}

.hall-card .hall-scene:before, .hall-card .hall-scene:after {
  content: none !important;
  display: none !important;
}

.mining-hall-viewport {
  z-index: 3;
  isolation: isolate;
  background: #0a100f;
  width: min(100%, 640px);
  margin-inline: auto;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 58px #0000007a;
}

.mining-room-scene {
  isolation: isolate;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.mining-room-scene__floor-continuation {
  display: none;
}

.mining-room-scene__environment {
  z-index: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
  position: absolute;
  inset: 0;
}

.mining-room-scene__rack-field {
  z-index: 4;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.mining-room-scene__equipment, .mining-room-scene__hitboxes {
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.mining-room-scene__hitboxes {
  z-index: 2;
}

.scene-rack-sprite, .scene-rack-hitbox {
  position: absolute;
}

.scene-rack-sprite {
  overflow: visible;
}

.scene-rack-art {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.scene-rack-art:after {
  content: "";
  z-index: 0;
  filter: blur(1px);
  background: #0000006b;
  border-radius: 50%;
  height: 5%;
  position: absolute;
  bottom: 2%;
  left: 7%;
  right: 9%;
}

.scene-rack-frame {
  z-index: 1;
  object-fit: contain;
  width: 100%;
  max-width: none;
  height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 3px #000000c2) saturate(1.12) brightness(1.08) contrast(1.18);
  position: relative;
}

.scene-miner-sprite {
  z-index: 2;
  transform-origin: bottom;
  filter: drop-shadow(0 1px 1px #000000c7) drop-shadow(0 0 2px var(--equipment-accent, #64dcb480)) hue-rotate(var(--equipment-hue, 0deg)) saturate(1.7) brightness(1.2) contrast(1.13);
  display: block;
  position: absolute;
  transform: none;
}

.scene-miner-sprite__asset {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.scene-miner-rarity-slot {
  z-index: 4;
  pointer-events: none;
  display: block;
  position: absolute;
  overflow: visible;
}

.scene-miner-rarity-slot[data-rarity-numeral]:after {
  content: attr(data-rarity-numeral);
  color: #aeb9c0;
  width: auto;
  min-width: 0;
  height: auto;
  box-shadow: none;
  text-shadow: 0 1px 1px #000, 0 0 1px #000;
  white-space: nowrap;
  pointer-events: none;
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  padding: 0;
  font: 900 7px / 1 ui-monospace, monospace;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

.scene-miner-rarity-slot.rarity-uncommon:after {
  color: #55c178;
}

.scene-miner-rarity-slot.rarity-rare:after {
  color: #4ca9ec;
}

.scene-miner-rarity-slot.rarity-epic:after {
  color: #af71e7;
}

.scene-miner-rarity-slot.rarity-legendary:after {
  color: #edc14f;
}

.scene-miner-rarity-slot.rarity-unreal:after {
  color: #ff4e63;
}

.scene-rack-sprite[data-equipment-accent="green"] {
  --equipment-accent: #69ff5ed1;
  --equipment-hue: 68deg;
}

.scene-rack-sprite[data-equipment-accent="amber"] {
  --equipment-accent: #ffbb37d1;
  --equipment-hue: 0deg;
}

.scene-rack-sprite[data-equipment-accent="violet"] {
  --equipment-accent: #bb68ffd1;
  --equipment-hue: 248deg;
}

.scene-rack-sprite[data-equipment-accent="cyan"] {
  --equipment-accent: #39deffd1;
  --equipment-hue: 148deg;
}

.scene-rack-sprite[data-equipment-accent="red"] {
  --equipment-accent: #ff5b3fd1;
  --equipment-hue: -22deg;
}

.scene-rack-sprite[data-equipment-accent] .scene-miner-sprite {
  filter: drop-shadow(0 1px 1px #000c) drop-shadow(0 0 2px var(--equipment-accent)) sepia(.62) saturate(3.4) hue-rotate(var(--equipment-hue)) brightness(1.24) contrast(1.14);
}

.scene-rack-foreground {
  z-index: 3;
  pointer-events: none;
  object-fit: contain;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  position: absolute;
  inset: 0;
}

.scene-miner-dev-preview-marker {
  z-index: 4;
  color: #dcf8ff;
  letter-spacing: .04em;
  pointer-events: none;
  white-space: nowrap;
  background: #04101fe6;
  border: 1px solid #62deffa6;
  border-radius: 2px;
  padding: 1px 3px;
  font: 700 clamp(5px, .78vw, 8px) / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  position: absolute;
  top: 35%;
  right: -4%;
  box-shadow: 0 1px 3px #000000a6;
}

.scene-rack-position-plate {
  z-index: 4;
  color: #eafff8;
  text-align: center;
  background: #04110eeb;
  border: 1px solid #76dbbca6;
  border-radius: 3px;
  min-width: 28%;
  padding: 2.5% 4%;
  font: 700 clamp(7px, 1.4vw, 11px) / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  position: absolute;
  top: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 5px #000000a8, inset 0 0 7px #37dcae1f;
}

.scene-rack-hitbox {
  pointer-events: auto;
}

.scene-rack-hitbox--empty {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.scene-rack-hitbox--empty:hover, .scene-rack-hitbox--empty:focus-visible, .scene-rack-hitbox--empty.is-selected {
  outline-offset: -1px;
  background: radial-gradient(#3cad8226, #0000 72%);
  border-radius: 4px;
  outline: 1px solid #83edc7b8;
  box-shadow: inset 0 0 13px #3ad6a229;
}

.scene-rack-hitbox--installed {
  pointer-events: none;
}

.scene-rack-open-target, .scene-miner-hitbox {
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: 0;
  position: absolute;
}

.scene-rack-open-target {
  inset: 0;
}

.scene-rack-open-target:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #7bf2c6;
}

.scene-miner-hitbox {
  z-index: 2;
}

.scene-miner-hitbox:focus-visible {
  outline-offset: 1px;
  outline: 1px solid #b2ffe1;
}

.equipment-visual {
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

.equipment-visual--inventory {
  width: 100%;
  height: 104px;
}

.equipment-visual--thumbnail {
  width: 48px;
  height: 48px;
}

.storage-card__miner-visual {
  background: linear-gradient(145deg, #152420, #09110e);
  border-radius: 10px;
  width: 100%;
  height: 126px;
  margin-bottom: 8px;
  display: block;
  position: relative;
  overflow: hidden;
}

.storage-card__miner-visual .storage-card__art {
  border-radius: inherit;
  width: 100%;
  height: 100%;
}

.storage-card__action {
  color: #e0f8ee;
  cursor: pointer;
  background: #153b30;
  border: 1px solid #4a8873;
  border-radius: 8px;
  width: 100%;
  min-height: 40px;
  margin-top: 12px;
  font-weight: 700;
}

.storage-card__action--pending {
  cursor: wait;
  border-color: #315b76;
  transform: translateY(2px);
  box-shadow: inset 0 3px 7px #020b14cc;
}

.equipment-storage__card--visual {
  grid-template-columns: 52px minmax(0, 1fr) auto;
}

.equipment-storage__card--visual .equipment-visual {
  width: 48px;
  height: 48px;
}

@media (max-width: 500px) {
  .mining-hall-viewport {
    width: 100%;
  }

  .mining-room-scene__floor-continuation {
    width: 100%;
    height: max(0px, calc(100svh - 68px - env(safe-area-inset-bottom) - 150vw + 24px));
    background: #332b1e;
    display: block;
    overflow: hidden;
  }

  .mining-room-scene__floor-continuation img {
    object-fit: cover;
    object-position: center 8%;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    display: block;
  }

  .scene-miner-sprite {
    filter: drop-shadow(0 1px 2px #000000c7) saturate(1.16) contrast(1.08);
  }

  .storage-card__art {
    height: 116px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-rack-hitbox--empty {
    transition: none;
  }
}

.mining-hall-viewport.is-critical-loading .mining-room-scene, .mining-hall-viewport.is-critical-loading .mining-room-scene__rack-field {
  visibility: hidden;
}

.mining-hall-viewport__loading {
  z-index: 50;
  color: #e8f0f5;
  text-align: center;
  letter-spacing: .12em;
  background: linear-gradient(145deg, #102638, #07111d);
  place-content: center;
  gap: 8px;
  min-height: 180px;
  font: 800 clamp(12px, 2vw, 16px) / 1.2 ui-monospace, monospace;
  display: grid;
  position: absolute;
  inset: 0;
}

.mining-hall-viewport__loading small {
  color: #78d0e6;
  letter-spacing: .09em;
  font-size: .66em;
}

.rack-sheet__edit {
  border: 1px solid var(--cs-blue, #4e94bb);
  color: #e8f0f5;
  cursor: pointer;
  background: linear-gradient(145deg, #1a4a66, #10283b);
  border-radius: 9px;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  font-weight: 800;
}

@media (min-width: 501px) {
  .mining-hall-viewport {
    width: min(100%, 640px);
  }
}

/* [project]/apps/web/src/app/gameplay-visual.css [app-client] (css) */
.gameplay-background-shell :is(button, a, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}

.gameplay-background-shell :is(button, a, [role="button"]):focus:not(:focus-visible) {
  outline: none;
}

.gameplay-nav {
  isolation: isolate;
  background: linear-gradient(#121d23f5, #050c0ffa);
  border: 1px solid #6d7c8d85;
  border-radius: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 48px;
  align-items: stretch;
  height: auto;
  padding: 5px;
  display: grid;
  box-shadow: inset 0 1px #d0d8e714, 0 10px 28px #00000047;
}

.gameplay-nav button {
  color: #9fb8ad;
  background: none;
  border-color: #0000;
  place-items: center;
  gap: 2px;
  min-width: 0;
  transition: color .14s, background .14s, border-color .14s;
  display: grid;
}

.gameplay-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 21px;
  height: 21px;
}

.gameplay-nav__label {
  color: inherit;
  font-size: .66rem;
  line-height: 1;
}

.gameplay-nav button.gameplay-nav__active small {
  color: #8ee8c6;
}

.gameplay-nav button:hover, .gameplay-nav button:focus-visible {
  color: #ebfff5;
  border-color: #87bfe4c7;
  outline: none;
}

.gameplay-surface {
  background: linear-gradient(90deg, #0107059e, #0000 18% 82%, #010705a8), radial-gradient(at 50% 0, #1a382d 0, #0a1511 43%, #030706 100%);
  min-height: 100svh;
}

.gameplay-surface:before {
  content: "";
  opacity: .75;
  background: linear-gradient(90deg, #0000, #b38e45 18%, #506f5f 50%, #b38e45 82%, #0000);
  width: min(100%, 720px);
  height: 3px;
  margin: 0 auto 14px;
  display: block;
}

.gameplay-surface > header {
  border-bottom: 1px solid #7292805c;
  padding-bottom: 13px;
}

.gameplay-surface h1 {
  letter-spacing: -.025em;
}

.gameplay-surface, .storage-screen, .mining-status-screen {
  padding-top: calc(var(--cs-hud-top) + 25px);
}

.gameplay-surface > header, .storage-screen > header, .mining-status-screen > header {
  margin-top: 0;
  padding-top: 0;
}

.gameplay-surface, .storage-screen, .mining-status-screen {
  position: relative;
}

.gameplay-surface__back {
  top: calc(var(--cs-hud-top) + 25px);
  position: absolute;
  right: max(14px, 50% - 360px);
}

.gameplay-state, .gameplay-empty, .gameplay-info, .gameplay-hero, .offer-card {
  background: linear-gradient(135deg, #122128f5, #070f13fa);
  border-color: #526c7fad;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #dfe8f80d, 0 12px 28px #00000038;
}

.gameplay-state:before, .gameplay-empty:before, .gameplay-info:before, .offer-card:before {
  content: "";
  background: #62798d;
  width: 3px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.gameplay-hero {
  background: linear-gradient(135deg, #253141fa, #0d151dfa 66%);
  border-color: #7087aba6;
}

.gameplay-hero:after {
  content: "";
  border: 1px solid #5ba9c33d;
  border-radius: 50%;
  width: 170px;
  height: 170px;
  position: absolute;
  top: -60px;
  right: -20px;
  box-shadow: 0 0 0 17px #5ba9c30d, 0 0 0 34px #5ba9c309;
}

.gameplay-hero strong {
  z-index: 1;
  color: #dfedb0;
  position: relative;
}

.gameplay-empty {
  align-content: center;
  gap: 10px;
  min-height: 176px;
  display: grid;
}

.gameplay-empty p {
  margin: 0;
}

.gameplay-empty ol {
  counter-reset: signal;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.gameplay-empty li {
  color: #c7d7ce;
  overflow-wrap: anywhere;
  border-top: 2px solid #606c7a;
  min-width: 0;
  padding: 7px 4px;
  font-size: .62rem;
  line-height: 1.3;
}

.gameplay-empty li:before {
  color: #d2b867;
  content: "0" counter(signal);
  counter-increment: signal;
  margin-bottom: 4px;
  font: 700 .55rem / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  display: block;
}

.store-offline {
  border-color: #9f81459e;
}

.store-offline:before {
  background: #b9934e;
}

.store-offline span {
  color: #d4c797;
  border: 1px dashed #ae904d80;
  padding: 9px 10px;
  font-size: .75rem;
}

.referral-panel {
  gap: 12px;
  width: min(100%, 720px);
  margin: 12px auto;
  display: grid;
}

.referral-link-card, .referral-summary, .referral-income, .referral-explainer {
  background: linear-gradient(145deg, #12232cf7, #050c10fa);
  border: 1px solid #4f7488b3;
  border-radius: 13px;
  box-shadow: inset 0 1px #e7f2ff0f, 0 12px 30px #00000038;
}

.referral-link-card {
  gap: 9px;
  padding: 15px;
  display: grid;
}

.referral-link-card p, .referral-income p {
  color: #a9c5b7;
  letter-spacing: .1em;
  margin: 0;
  font: 700 .66rem / 1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.referral-link-card strong {
  overflow-wrap: anywhere;
  color: #dff9ec;
  font: 600 .78rem / 1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.referral-link-card div {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.referral-link-card button {
  color: #e9fff4;
  background: #173c4c;
  border: 1px solid #5b8ba8;
  border-radius: 8px;
  min-height: 40px;
  padding: 0 11px;
  font-weight: 700;
}

.referral-link-card small {
  color: #9fdec5;
}

.referral-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
  overflow: hidden;
}

.referral-summary div {
  gap: 3px;
  padding: 15px;
  display: grid;
}

.referral-summary div + div {
  border-left: 1px solid #59788e73;
}

.referral-summary span, .referral-income span {
  color: #a8c2b4;
  font-size: .73rem;
}

.referral-summary strong {
  color: #d9e9b0;
  font-size: 1.55rem;
}

.referral-summary small, .referral-income small, .referral-explainer {
  color: #b6cabe;
  font-size: .77rem;
  line-height: 1.45;
}

.referral-income {
  gap: 0;
  padding: 15px;
  display: grid;
}

.referral-income > p {
  margin-bottom: 8px;
}

.referral-income > div {
  border-top: 1px solid #5a768b57;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  display: flex;
}

.referral-income strong {
  color: #e1f2e8;
}

.referral-income__total strong {
  color: #e0c56e;
}

.referral-income small {
  padding-top: 11px;
}

.referral-explainer {
  border-left: 3px solid #5096b9;
  margin: 0;
  padding: 13px 14px;
}

.league-console {
  background: linear-gradient(135deg, #162129, #101016 72%);
  border: 1px solid #49748ebd;
  border-radius: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  width: min(100%, 720px);
  margin: 12px auto;
  padding: 16px;
  display: grid;
  box-shadow: inset 0 1px #beedff14, 0 15px 30px #00000042;
}

.league-console p, .league-console small {
  color: #bdb7a0;
  letter-spacing: .08em;
  margin: 0;
  font-size: .69rem;
}

.league-console strong {
  color: #f2e5bd;
  margin: 3px 0;
  font-size: 1.45rem;
  display: block;
}

.league-badge {
  color: #f1d784;
  text-align: center;
  background: radial-gradient(circle at 45% 32%, #2c5162, #111c20 70%);
  border: 2px solid #498cb4;
  border-radius: 50% 50% 45% 45%;
  place-content: center;
  width: 58px;
  height: 58px;
  display: grid;
  box-shadow: inset 0 0 0 4px #0e1415, 0 0 20px #4496c433;
}

.league-badge span {
  font: 900 1.22rem / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.league-badge small {
  color: #d8bc6e;
  font: 700 .42rem / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.league-progress {
  border-top: 1px solid #659fb545;
  grid-column: 1 / -1;
  gap: 6px;
  padding-top: 9px;
  display: grid;
}

.league-progress div {
  color: #bdb7a0;
  justify-content: space-between;
  gap: 10px;
  font-size: .68rem;
  display: flex;
}

.league-progress strong {
  color: #dfe8d9;
  white-space: nowrap;
  margin: 0;
  font-size: .68rem;
}

.league-progress i {
  background: #0a0c10;
  border: 1px solid #3c5a64;
  border-radius: 999px;
  height: 7px;
  display: block;
  overflow: hidden;
}

.league-progress b {
  border-radius: inherit;
  background: linear-gradient(90deg, #3c7182, #6bbdd5);
  height: 100%;
  display: block;
  box-shadow: 0 0 12px #68bed780;
}

.league-console--silver .league-badge {
  background: radial-gradient(circle at 45% 32%, #596b6d, #192022 70%);
  border-color: #aebbc0;
}

.league-console--gold .league-badge {
  border-color: #48addd;
}

.league-console--platinum .league-badge {
  border-color: #9aa7b8;
}

.league-console--diamond .league-badge {
  border-color: #70d2d7;
}

.league-console--titan .league-badge {
  border-color: #8e95a2;
}

.league-console--emerald .league-badge {
  border-color: #6489ba;
}

.league-console--legend .league-badge {
  border-color: #8cd4e8;
  box-shadow: inset 0 0 0 4px #0e1415, 0 0 24px #8cd4e861;
}

.mining-status-screen {
  min-height: 100svh;
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
  color: #eaf3ed;
  background: radial-gradient(at 52% 0, #214137 0, #0a1411 52%, #030706 100%);
}

.mining-status-screen:before {
  content: "";
  background: linear-gradient(90deg, #0000, #b38e45 20%, #52806c 50%, #b38e45 80%, #0000);
  width: min(100%, 820px);
  height: 3px;
  margin: 0 auto 14px;
  display: block;
}

.mining-status-screen__header {
  border-bottom: 1px solid #6a8f7b61;
  max-width: 820px;
  margin-inline: auto;
  padding-bottom: 13px;
}

.mining-status-screen h1 {
  letter-spacing: -.025em;
}

.mining-status-state, .mining-card, .mining-history, .mining-hero {
  background: linear-gradient(135deg, #122128f5, #070f13fa);
  border-color: #526c7fad;
  border-radius: 12px;
  box-shadow: inset 0 1px #dfe8f80d, 0 12px 28px #00000038;
}

.mining-hero {
  background: linear-gradient(135deg, #22313d, #0b1217 72%);
  border-color: #7d8ba8ad;
}

.mining-hero > strong, .mining-reward strong {
  color: #b7ebc9;
}

.mining-card button, .mining-reward button, .mining-hero__empty button, .mining-status-state button {
  color: #e7fff1;
  background: #173d4d;
  border: 1px solid #5a89a8;
  border-radius: 8px;
  box-shadow: inset 0 1px #ebf4ff1f;
}

.mining-reward--primary {
  background: linear-gradient(135deg, #232935, #10151c);
  border-color: #4a96b88c;
}

.wallet-sheet {
  background: linear-gradient(155deg, #181b21, #0a0d11 70%);
  border-color: #4792b7ad;
}

.wallet-sheet .slot-row:first-of-type strong {
  color: #a9ebc4;
}

.wallet-sheet .slot-row:last-of-type strong {
  color: #e5ca82;
}

.sheet-backdrop, .equipment-storage-backdrop, .energy-sheet-backdrop {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.rack-sheet, .equipment-storage, .energy-sheet {
  background: linear-gradient(155deg, #111e24, #070f12 72%);
  border-color: #567689c7;
}

.rack-management-actions button:last-child {
  color: #ffd5c7;
  background: #4d2720;
  border-color: #d3775dbf;
}

.hall-edit-mode {
  width: min(100%, 720px);
  min-height: 100svh;
  padding: 14px 14px calc(132px + env(safe-area-inset-bottom));
  color: #e7f1eb;
  background: radial-gradient(at 50% 0, #1b382d, #07110d 64%, #040806);
  gap: 14px;
  margin-inline: auto;
  display: grid;
}

.hall-edit-mode__header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.hall-edit-mode__header h1 {
  margin: 0;
  font-size: 1.25rem;
}

.hall-edit-mode__header .eyebrow, .hall-edit-mode__hint {
  margin: 0;
}

.hall-edit-mode__hint {
  color: #a9c3b5;
  font-size: .82rem;
}

.hall-edit-mode__done {
  color: #ecfff4;
  background: #173849;
  border: 1px solid #6593b4;
  border-radius: 10px;
  min-height: 42px;
  font-weight: 800;
}

.hall-edit-layout {
  background: #04090cc7;
  border: 1px solid #667e9685;
  border-radius: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  display: grid;
}

.hall-edit-position {
  color: #c5d8ce;
  background: linear-gradient(155deg, #172630f5, #070d12f5);
  border: 1px solid #5c6e818c;
  border-radius: 9px;
  place-items: center;
  min-width: 0;
  min-height: 82px;
  padding: 5px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.hall-edit-position.is-selected {
  border-color: #83bde6;
  box-shadow: 0 0 0 2px #60a9d93d, inset 0 0 18px #418fc221;
}

.hall-edit-position.is-empty {
  background: #0a131ac7;
  border-style: dashed;
}

.hall-edit-position__number {
  color: #8da89a;
  font: 700 .57rem / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  position: absolute;
  top: 5px;
  left: 6px;
}

.hall-edit-position .equipment-visual {
  width: 88%;
  height: 66px;
}

.hall-edit-position__empty {
  color: #95aa9f;
  margin-top: 13px;
  font-size: .59rem;
}

.hall-edit-drawer {
  background: linear-gradient(155deg, #142631fa, #050a0ffa);
  border: 1px solid #69849db3;
  border-radius: 15px;
  gap: 10px;
  min-height: 200px;
  padding: 14px;
  display: grid;
  box-shadow: inset 0 1px #e7f0ff0f, 0 14px 34px #0000004d;
}

.hall-edit-drawer .eyebrow, .hall-edit-drawer h2, .hall-edit-drawer p {
  margin: 0;
}

.hall-edit-drawer h2 {
  font-size: 1.1rem;
}

.hall-edit-drawer__empty {
  color: #b6c8be;
}

.hall-edit-equipment-list {
  gap: 8px;
  display: grid;
}

.hall-edit-equipment {
  background: #050b1094;
  border: 1px solid #5c70856b;
  border-radius: 9px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px;
  display: grid;
}

.hall-edit-equipment .equipment-visual {
  width: 42px;
  height: 42px;
}

.hall-edit-equipment strong, .hall-edit-equipment small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.hall-edit-equipment small {
  color: #a6beaf;
  margin-top: 2px;
  font-size: .69rem;
}

.hall-edit-equipment button, .hall-edit-rack-actions button {
  color: #edfff4;
  background: #17313e;
  border: 1px solid #577d97;
  border-radius: 8px;
  min-height: 38px;
  font-weight: 700;
}

.hall-edit-rack-heading {
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  display: grid;
}

.hall-edit-rack-heading .equipment-visual {
  width: 54px;
  height: 54px;
}

.hall-edit-rack-heading h2, .hall-edit-rack-heading p {
  margin: 0;
}

.hall-edit-rack-heading p {
  color: #abc4b6;
  margin-top: 3px;
  font-size: .75rem;
}

.hall-edit-slots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.hall-edit-slot {
  color: #dcece3;
  text-align: left;
  background: #050b0f9e;
  border: 1px solid #5f758b8c;
  border-radius: 9px;
  grid-template-rows: auto 1fr;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 3px 7px;
  min-height: 84px;
  padding: 8px;
  display: grid;
}

.hall-edit-slot.is-selected {
  background: #1e3e52bf;
  border-color: #8bc6ee;
}

.hall-edit-slot > span {
  color: #9eb9aa;
  grid-column: 1 / -1;
  font-size: .67rem;
}

.hall-edit-slot .equipment-visual {
  width: 34px;
  height: 34px;
}

.hall-edit-slot strong, .hall-edit-slot small {
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .69rem;
  overflow: hidden;
}

.hall-edit-slot small {
  color: #a0b5aa;
}

.hall-edit-slot-drawer {
  border-top: 1px solid #6f829759;
  gap: 9px;
  padding-top: 2px;
  display: grid;
}

.hall-edit-slot-drawer h3, .hall-edit-slot-drawer p {
  margin: 0;
}

.hall-edit-slot-drawer h3 {
  font-size: .95rem;
}

.hall-edit-slot-drawer p {
  color: #b2c9bc;
  font-size: .76rem;
}

.hall-edit-miner-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  display: grid;
}

.hall-edit-miner-stats div {
  background: #02070b6e;
  border-radius: 7px;
  padding: 7px;
}

.hall-edit-miner-stats dt {
  color: #9bb5a8;
  font-size: .63rem;
}

.hall-edit-miner-stats dd {
  color: #effaf3;
  margin: 3px 0 0;
  font-weight: 700;
}

.hall-edit-rack-actions {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.hall-edit-rack-actions__danger {
  color: #ffd8cb !important;
  background: #4a2820 !important;
  border-color: #ce7057c7 !important;
}

@media (max-width: 500px) {
  .game-shell {
    min-height: 100svh;
    padding: 0 0 calc(76px + env(safe-area-inset-bottom));
    background: #050907;
  }

  .game-shell > .topbar {
    display: none;
  }

  .game-shell > .hall-card {
    width: 100%;
    box-shadow: none;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .game-shell .hall-header {
    z-index: 8;
    top: calc(8px + env(safe-area-inset-top));
    background: none;
    padding: 0;
    position: absolute;
    left: auto;
    right: 8px;
  }

  .game-shell .hall-header > div:first-child {
    display: none;
  }

  .game-shell .hall-controls {
    gap: 6px;
  }

  .game-shell .storage-entry {
    display: none;
  }

  .hud-icon-action {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #071310db;
    border-radius: 11px;
    place-items: center;
    width: 42px;
    min-height: 42px;
    padding: 0;
    display: grid;
  }

  .hud-icon-action .gameplay-icon {
    width: 20px;
    height: 20px;
  }

  .hud-icon-action span {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .game-shell .hall-scene {
    width: 100%;
  }

  .game-shell .hint {
    display: none;
  }

  .game-shell .first-session-guidance {
    margin: 12px;
  }

  .gameplay-surface {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  body .gameplay-nav {
    top: auto;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 20;
    background: linear-gradient(#121d23f5, #050c0ffa);
    border-radius: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 48px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 5px;
    position: fixed;
    left: 8px;
    overflow: hidden;
    box-shadow: inset 0 1px #d0d8e714, 0 12px 36px #00000080;
  }

  .gameplay-nav button {
    height: 48px;
    min-height: 0;
    padding: 4px 1px;
  }

  .gameplay-nav__label {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .gameplay-surface:before {
    margin-bottom: 9px;
  }

  .gameplay-empty ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gameplay-empty li {
    font-size: .58rem;
  }

  .league-console {
    gap: 10px;
    padding: 14px;
  }

  .league-badge {
    width: 50px;
    height: 50px;
  }

  .league-console strong {
    font-size: 1.25rem;
  }

  .league-progress div {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gameplay-nav button {
    transition: none;
  }
}

.workshop-parts, .workshop-list {
  gap: 8px;
  display: grid;
}

.workshop-parts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workshop-card, .rarity-badge {
  background: #111a1d;
  border: 1px solid #56636a;
  border-radius: 8px;
  padding: 8px;
}

.workshop-card {
  gap: 4px;
  display: grid;
}

.rarity-badge {
  text-transform: capitalize;
  display: inline-block;
}

.workshop-surface {
  gap: 12px;
  display: grid;
}

.workshop-tabs {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}

.workshop-tabs button[aria-selected="true"], .workshop-selected {
  background: #242d30;
  border-color: #3ba3e2;
}

.workshop-inputs {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
  display: grid;
}

.workshop-card fieldset {
  border-color: #56636a;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0;
  display: flex;
}

.workshop-card fieldset label {
  font-size: .78rem;
}

.workshop-card button {
  text-align: left;
  min-height: 40px;
}

.workshop-card > button {
  text-align: center;
  justify-content: center;
}

:root {
  --cs-neutral: #0d1b29;
  --cs-neutral-raised: #132b3f;
  --cs-blue-border: #315b76;
  --cs-blue: #4e94bb;
  --cs-cyan: #78d0e6;
  --cs-steel: #e8f0f5;
  --cs-steel-muted: #9baeba;
  --cs-blueprint-grid: linear-gradient(#78d0e60a 1px,transparent 1px),linear-gradient(90deg,#78d0e60a 1px,transparent 1px);
}

.gameplay-surface, .mining-status-screen {
  color: var(--cs-steel);
  background-color: #0b0f0f;
  background-image: linear-gradient(#03050538, #0305054d 58%, #03050561), url("/images/cryptoshelter-metal-wall.jpg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.hall-edit-mode {
  color: var(--cs-steel);
  background-color: #07111d;
  background-image: var(--cs-blueprint-grid),radial-gradient(ellipse at 50% 0,#183a55 0,#07111d 52%,#040a12 100%);
  background-size: 18px 18px, 18px 18px, auto;
}

.gameplay-surface:before, .mining-status-screen:before {
  background: linear-gradient(90deg,transparent,var(--cs-cyan) 20%,#315b76 50%,var(--cs-cyan) 80%,transparent);
}

.gameplay-nav {
  border-color: var(--cs-blue-border);
  background: linear-gradient(#112a3d, #07111d);
  box-shadow: inset 0 1px #78d0e616, 0 10px 28px #0008;
}

.gameplay-nav button {
  color: var(--cs-steel-muted);
}

.gameplay-nav button.gameplay-nav__active {
  color: var(--cs-steel);
  background: linear-gradient(#1b4a67, #102c40);
  border-color: #78d0e699;
  box-shadow: inset 0 0 17px #78d0e626;
}

.gameplay-nav button.gameplay-nav__active small, .gameplay-nav button:hover, .gameplay-nav button:focus-visible {
  color: var(--cs-cyan);
  border-color: #78d0e6c7;
}

.gameplay-state, .gameplay-empty, .gameplay-info, .gameplay-hero, .offer-card, .mining-status-state, .mining-card, .mining-history, .mining-hero, .wallet-sheet, .rack-sheet, .equipment-storage, .energy-sheet, .referral-link-card, .referral-summary, .referral-income, .referral-explainer {
  border-color: var(--cs-blue-border);
  color: var(--cs-steel);
  background: linear-gradient(145deg, #102638, #091724);
  box-shadow: inset 0 1px #dceeff0d, 0 12px 28px #0006;
}

.gameplay-state:before, .gameplay-empty:before, .gameplay-info:before, .offer-card:before {
  background: var(--cs-blue);
}

.gameplay-hero {
  background: linear-gradient(135deg, #173d56, #0b1927 72%);
}

.gameplay-hero strong, .mining-hero > strong, .mining-reward strong {
  color: var(--cs-cyan);
}

.gameplay-empty li {
  color: var(--cs-steel-muted);
  border-color: #315b76;
}

.mining-status-screen__header {
  border-color: #315b76;
}

.mining-hero p, .mining-card p, .mining-reward p, .mining-hero > span, .mining-card span, .mining-reward small {
  color: var(--cs-steel-muted);
}

.mining-card button, .mining-reward button, .mining-hero__empty button, .mining-status-state button, .storage-card__action, .equipment-storage__card button, .hall-state button, .storage-tabs button[aria-selected="true"] {
  border-color: var(--cs-blue);
  color: var(--cs-steel);
  background: linear-gradient(145deg, #1a4a66, #10283b);
  box-shadow: inset 0 1px #dceeff14;
}

.wallet-sheet .slot-row:first-of-type strong, .wallet-sheet .slot-row:last-of-type strong {
  color: var(--cs-cyan);
}

.equipment-storage-backdrop {
  background: linear-gradient(0deg, #020b14cc 0 60%, #0000 88%);
}

.equipment-storage__header {
  border-color: #294a60;
}

.equipment-storage__card {
  border-color: var(--cs-blue-border);
  background: #102638;
}

.equipment-storage__card span, .equipment-storage__empty, .referral-link-card p, .referral-income p, .referral-summary span, .referral-income span, .referral-summary small, .referral-income small, .referral-explainer {
  color: var(--cs-steel-muted);
}

.referral-link-card strong, .referral-income strong {
  color: var(--cs-steel);
}

.referral-link-card button {
  border-color: var(--cs-blue);
  color: var(--cs-steel);
  background: #173d56;
}

.referral-link-card button + button {
  background: #163244;
  border-color: #52758b;
}

.referral-summary div + div, .referral-income > div {
  border-color: #315b7688;
}

.referral-summary strong {
  color: var(--cs-cyan);
}

.referral-explainer {
  border-left-color: var(--cs-cyan);
}

.referral-details {
  border: 1px solid var(--cs-blue-border);
  background: linear-gradient(145deg, #102638, #091724);
  border-radius: 13px;
  gap: 8px;
  padding: 12px;
  display: grid;
}

.referral-details > p {
  color: var(--cs-steel-muted);
  letter-spacing: .1em;
  margin: 0;
  font: 700 .66rem / 1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.referral-details > small {
  color: var(--cs-steel-muted);
}

.referral-level-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.referral-level-tabs button {
  min-height: 34px;
  color: var(--cs-steel-muted);
  background: #0b1b29;
  border: 1px solid #315b76;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: .72rem;
  font-weight: 700;
}

.referral-level-tabs button[aria-selected="true"] {
  border-color: var(--cs-cyan);
  color: var(--cs-steel);
  background: #173d56;
}

.referral-detail {
  border-top: 1px solid #315b7688;
  gap: 6px;
  padding: 8px 0;
  display: grid;
}

.referral-detail strong {
  color: var(--cs-steel);
}

.referral-detail__identity {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  line-height: 1.25;
  display: flex;
}

.referral-detail__identity span {
  color: var(--cs-cyan);
  font-size: .72rem;
}

.referral-detail__identity small {
  color: var(--cs-steel-muted);
}

.referral-detail__income {
  color: var(--cs-steel-muted);
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: .74rem;
  line-height: 1.3;
  display: flex;
}

.referral-detail .referral-detail__income span {
  color: var(--cs-steel-muted);
  white-space: nowrap;
}

.referral-detail__income strong {
  color: var(--cs-steel);
}

.league-console {
  border-color: var(--cs-blue-border);
  background: linear-gradient(135deg, #102a40, #091724 72%);
}

.league-console p, .league-console small, .league-progress div {
  color: var(--cs-steel-muted);
}

.league-console strong, .league-progress strong {
  color: var(--cs-steel);
}

.league-badge {
  border-color: var(--cs-blue);
  color: var(--cs-cyan);
  background: radial-gradient(circle at 45% 32%, #29536d, #0b1926 70%);
  box-shadow: inset 0 0 0 4px #09131d, 0 0 20px #78d0e622;
}

.league-badge small {
  color: var(--cs-cyan);
}

.league-progress {
  border-color: #315b7688;
}

.league-progress i {
  background: #07111d;
  border-color: #315b76;
}

.league-progress b {
  background: linear-gradient(90deg,#315b76,var(--cs-cyan));
  box-shadow: 0 0 12px #78d0e655;
}

.workshop-surface {
  background-image: var(--cs-blueprint-grid);
  background-size: 18px 18px;
  padding: 2px;
  position: relative;
}

.workshop-card, .rarity-badge {
  border-color: var(--cs-blue-border);
  color: var(--cs-steel);
  background: linear-gradient(145deg, #102638, #091724);
}

.workshop-tabs button[aria-selected="true"], .workshop-selected {
  border-color: var(--cs-cyan);
  color: var(--cs-steel);
  background: #173d56;
}

.workshop-card button {
  color: var(--cs-steel);
  background: #102638;
  border-color: #315b76;
}

.workshop-card button:not(:disabled):hover, .workshop-card button:not(:disabled):focus-visible {
  border-color: var(--cs-cyan);
  outline: none;
}

@media (max-width: 500px) {
  .game-shell {
    padding: 14px 14px calc(84px + env(safe-area-inset-bottom));
    background-color: #0b0f0f;
    background-image: linear-gradient(#03050538, #0305054d 58%, #03050561), url("/images/cryptoshelter-metal-wall.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .game-shell > .topbar {
    display: flex;
  }

  .game-shell .hall-header {
    background: none;
    padding: 8px 10px;
    position: relative;
    inset: auto;
  }

  .game-shell .hall-controls {
    width: 100%;
  }

  .hud-icon-action, .energy-indicator {
    background: linear-gradient(145deg, #17334a, #0d1c2a);
  }

  .game-shell .hall-card {
    border: 1px solid var(--cs-blue-border);
    background: linear-gradient(145deg, #102638, #091724);
    border-radius: 14px;
  }

  .game-shell .hall-scene {
    background: none;
  }

  body .gameplay-nav {
    border-color: var(--cs-blue-border);
    background: linear-gradient(#112a3df7, #07111df9);
    border-radius: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -10px 28px #0009;
  }

  .gameplay-nav button {
    height: 48px;
  }

  .gameplay-nav__label {
    clip: auto;
    clip-path: none;
    text-overflow: ellipsis;
    width: auto;
    height: auto;
    font-size: 10px;
    position: static;
    overflow: hidden;
  }

  .league-status-card, .hall-discovery {
    width: 100%;
  }

  .hall-discovery {
    margin-inline: auto;
  }
}

body .gameplay-nav {
  z-index: 20;
  box-sizing: border-box;
  width: min(100%, 720px);
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: 4px max(8px,var(--cs-safe-right, env(safe-area-inset-right))) calc(4px + var(--cs-safe-bottom, env(safe-area-inset-bottom))) max(8px,var(--cs-safe-left, env(safe-area-inset-left)));
  box-shadow: none;
  background: none;
  border: 1px solid #0000;
  border-radius: 0;
  margin: 0 auto;
  display: block;
  position: fixed;
  inset: auto 0 0;
  overflow: visible;
}

body .gameplay-nav__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  min-width: 0;
  display: grid;
}

body .gameplay-nav .gameplay-nav__cell {
  box-sizing: border-box;
  color: #d4d4cb;
  background: linear-gradient(#303236, #181a1d);
  border: 1px solid #718185;
  border-radius: 16px;
  grid-template-rows: 44px auto;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 68px;
  margin: 0;
  padding: 4px 1px;
  display: grid;
  position: relative;
  transform: none;
  box-shadow: inset 0 1px #ffffff1c, inset 1px 0 #ffffff0a, inset 0 -2px #0008;
}

body .gameplay-nav .gameplay-nav__cell .gameplay-icon--asset {
  object-fit: contain;
  opacity: .88;
  width: 44px;
  max-width: 100%;
  height: 44px;
  display: block;
}

body .gameplay-nav .gameplay-nav__more-cell {
  grid-template-rows: 1fr;
  align-content: center;
  place-items: center;
}

body .gameplay-nav .gameplay-nav__more-cell .gameplay-icon--asset {
  place-self: center;
}

body .gameplay-nav .gameplay-nav__label {
  clip: auto;
  clip-path: none;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  text-align: center;
  width: auto;
  max-width: 100%;
  height: auto;
  color: inherit;
  letter-spacing: 0;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.15;
  position: static;
  overflow: visible;
}

body .gameplay-nav .gameplay-nav__cell--long .gameplay-nav__label {
  font-size: 9px;
}

body .gameplay-nav .gameplay-nav__cell.gameplay-nav__active {
  color: #eef7ff;
  background: #164c68;
  border-color: #72d5ed;
  box-shadow: inset 0 1px #a5e1ff29;
}

body .gameplay-nav .gameplay-nav__active .gameplay-icon--asset {
  opacity: 1;
}

body .gameplay-nav .gameplay-nav__cell:not(.gameplay-nav__active):not(:disabled) {
  color: #dceeff;
  background: #09141d;
  border-color: #28485c;
  box-shadow: inset 0 1px #dceeff10, inset 0 -2px #0008;
}

body .gameplay-nav .gameplay-nav__cell:disabled {
  opacity: .55;
  color: #8fa6b5;
  cursor: default;
  background: #080f15;
  border-color: #1e3442;
}

body .gameplay-nav button, .gameplay-menu button {
  -webkit-tap-highlight-color: transparent;
}

body .gameplay-nav button:focus-visible {
  outline-offset: -2px;
  outline: 2px solid #6ab5e0;
}

@media (prefers-reduced-motion: reduce) {
  body .gameplay-nav button {
    transition: none;
  }
}

body .gameplay-nav {
  left: max(14px,env(safe-area-inset-left));
  right: max(14px,env(safe-area-inset-right));
  grid-template-columns: none;
  width: auto;
  max-width: 720px;
  margin-inline: auto;
  transform: none;
}

body .gameplay-nav__grid {
  grid-template-rows: 0 0 68px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 0;
  transition: grid-template-rows .26s ease-out;
  overflow: hidden;
}

body .gameplay-nav__grid > .gameplay-nav__cell:nth-child(-n+5) {
  grid-row: 3;
}

body .gameplay-nav__grid > .gameplay-nav__cell:nth-child(n+6):nth-child(-n+10) {
  grid-row: 1;
}

body .gameplay-nav__grid > .gameplay-nav__cell:nth-child(n+11):nth-child(-n+15) {
  grid-row: 2;
}

body .gameplay-nav__grid:not(.is-expanded) > .gameplay-nav__cell:nth-child(n+6) {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .22s ease-out, transform .26s ease-out, visibility 0s linear .26s;
  transform: translateY(8px);
}

body .gameplay-nav__grid.is-expanded {
  grid-template-rows: 68px 68px 68px;
}

body .gameplay-nav__grid.is-expanded > .gameplay-nav__cell:nth-child(n+6) {
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease-out, transform .26s ease-out, visibility linear;
  transform: translateY(0);
}

body .gameplay-nav__grid.is-expanded > .gameplay-nav__cell:nth-child(n+6) .gameplay-nav__label {
  white-space: normal;
}

@media (max-width: 720px) {
  body .gameplay-nav {
    --cs-safe-bottom: env(safe-area-inset-bottom, 0px);
    height: 68px;
  }

  body .gameplay-nav__grid {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

body .gameplay-nav .gameplay-nav__label {
  word-break: normal;
  overflow-wrap: normal;
  -webkit-hyphens: none;
  hyphens: none;
}

.workshop-surface {
  gap: 14px;
  width: min(100%, 720px);
  margin-inline: auto;
}

.workshop-intro {
  border: 1px solid var(--cs-blue-border);
  background: linear-gradient(135deg, #112b3f, #0b1927);
  border-radius: 12px;
  gap: 5px;
  padding: 13px;
  display: grid;
}

.workshop-intro strong {
  font-size: .92rem;
  line-height: 1.42;
}

.workshop-intro small {
  color: var(--cs-steel-muted);
  line-height: 1.35;
}

.workshop-tabs {
  border: 1px solid var(--cs-blue-border);
  background: #091724;
  border-radius: 11px;
  padding: 4px;
}

.workshop-tabs button {
  min-height: 42px;
  color: var(--cs-steel-muted);
  background: none;
  border: 1px solid #0000;
  border-radius: 8px;
  font-weight: 800;
}

.workshop-tabs button[aria-selected="true"] {
  border-color: var(--cs-cyan);
  color: var(--cs-steel);
  background: linear-gradient(145deg, #1a4a66, #112b40);
  box-shadow: inset 0 0 13px #78d0e622;
}

.workshop-families {
  gap: 12px;
  display: grid;
}

.workshop-family {
  border: 1px solid var(--cs-blue-border);
  background-image: var(--cs-blueprint-grid),linear-gradient(145deg,#0f2638,#091724);
  background-size: 18px 18px, auto;
  border-radius: 14px;
  gap: 8px;
  padding: 10px;
  display: grid;
}

.workshop-family > header {
  border-bottom: 1px solid #315b767d;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 2px 3px 8px;
  display: flex;
}

.workshop-family > header strong {
  font-size: 1rem;
}

.workshop-family > header small {
  color: var(--cs-steel-muted);
  text-align: right;
  font-size: .7rem;
}

.workshop-card {
  gap: 9px;
}

.workshop-transition {
  background: linear-gradient(145deg, #102638, #0a1927);
  border-color: #315b76;
}

.workshop-transition__rarities, .workshop-conversion {
  align-items: center;
  gap: 8px;
  display: flex;
}

.workshop-transition__rarities > b, .workshop-conversion > b {
  color: var(--cs-cyan);
  font-size: 1.2rem;
}

.rarity-badge {
  min-width: 0;
  color: var(--cs-steel);
  background: #101f2c;
  border-color: #526b7d;
  gap: 1px;
  padding: 5px 7px;
  font-size: .72rem;
  display: inline-grid;
}

.rarity-badge strong {
  font-size: .68rem;
}

.rarity-badge small {
  color: var(--cs-steel-muted);
  font-size: .63rem;
}

.rarity-unreal {
  border-color: #bd6579;
}

.workshop-terminal {
  color: var(--cs-steel-muted);
  font-size: .78rem;
}

.workshop-requirements, .workshop-result {
  border-left: 2px solid var(--cs-blue);
  background: #071522a8;
  gap: 6px;
  padding: 9px;
  display: grid;
}

.workshop-requirements > p, .workshop-result > p {
  color: var(--cs-cyan);
  letter-spacing: .1em;
  margin: 0;
  font: 800 .62rem / 1 ui-monospace, monospace;
}

.workshop-requirements dl, .workshop-parts-transition dl {
  gap: 5px;
  margin: 0;
  display: grid;
}

.workshop-requirements dl div, .workshop-parts-transition dl div {
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 8px;
  display: grid;
}

.workshop-requirements dt, .workshop-parts-transition dt {
  color: var(--cs-steel-muted);
  font-size: .7rem;
}

.workshop-requirements dd, .workshop-parts-transition dd {
  min-width: 0;
  color: var(--cs-steel);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: .76rem;
}

.workshop-result strong {
  font-size: .82rem;
}

.workshop-result > div {
  color: var(--cs-steel-muted);
  gap: 3px;
  font-size: .72rem;
  display: grid;
}

.workshop-result b {
  color: var(--cs-steel);
}

.workshop-inputs {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.workshop-inputs button {
  color: var(--cs-steel);
  background: #0c1d2b;
  border-color: #315b76;
  font-size: .71rem;
}

.workshop-card fieldset {
  border-color: #315b76;
}

.workshop-card fieldset legend {
  color: var(--cs-steel-muted);
  font-size: .7rem;
}

.workshop-status {
  color: var(--cs-steel-muted);
  margin: 0;
  font-size: .76rem;
}

.workshop-status--ready {
  color: #78bf9d;
}

.workshop-merge-action {
  border-radius: 9px;
  font-weight: 900;
  border: 1px solid var(--cs-cyan) !important;
  color: #07111d !important;
  background: linear-gradient(135deg, #78d0e6, #4e94bb) !important;
  min-height: 44px !important;
}

.workshop-merge-action:disabled {
  color: #7890a0 !important;
  background: #10202d !important;
  border-color: #315b76 !important;
}

.workshop-parts-flow {
  gap: 10px;
  display: grid;
}

.workshop-parts-flow > header {
  gap: 8px;
  display: grid;
}

.workshop-parts-flow h3 {
  margin: 0;
}

.workshop-parts-flow > header > div {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.workshop-parts-transition {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  display: grid;
}

.workshop-parts-transition .workshop-conversion {
  border-right: 1px solid #315b767d;
  flex-direction: column;
  min-width: 88px;
  padding-right: 8px;
}

.workshop-parts-transition fieldset, .workshop-parts-transition .workshop-status, .workshop-parts-transition .workshop-merge-action {
  grid-column: 1 / -1;
}

.workshop-parts-transition .workshop-status {
  margin-top: 2px;
}

@media (max-width: 420px) {
  .workshop-family {
    padding: 8px;
  }

  .workshop-family > header {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .workshop-family > header small {
    text-align: left;
  }

  .workshop-parts-transition {
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 8px;
  }

  .workshop-parts-transition .workshop-conversion {
    min-width: 0;
  }

  .workshop-requirements dl div, .workshop-parts-transition dl div {
    grid-template-columns: 70px minmax(0, 1fr);
  }
}

.workshop-catalogue {
  gap: 10px;
  display: grid;
}

.workshop-toolbar {
  border: 1px solid var(--cs-blue-border);
  background: #091724;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px;
  display: flex;
}

.workshop-toolbar label {
  min-width: 0;
  color: var(--cs-steel);
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
}

.workshop-toolbar input {
  accent-color: var(--cs-cyan);
}

.workshop-toolbar select {
  max-width: 145px;
  min-height: 32px;
  color: var(--cs-steel);
  background: #102638;
  border: 1px solid #315b76;
  border-radius: 7px;
  font-size: .68rem;
}

.workshop-cards {
  gap: 7px;
  display: grid;
}

.workshop-catalogue-card {
  border: 1px solid var(--cs-blue-border);
  width: 100%;
  color: var(--cs-steel);
  text-align: left;
  background-image: var(--cs-blueprint-grid),linear-gradient(145deg,#102638,#091724);
  background-size: 18px 18px, auto;
  border-radius: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 10px;
  display: grid;
}

.workshop-catalogue-card:not(:disabled):hover, .workshop-catalogue-card:not(:disabled):focus-visible {
  border-color: var(--cs-cyan);
  outline: none;
}

.workshop-catalogue-card__identity {
  gap: 5px;
  min-width: 0;
  display: grid;
}

.workshop-catalogue-card__identity > strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .84rem;
  overflow: hidden;
}

.workshop-catalogue-card__identity > span {
  align-items: center;
  gap: 5px;
  display: flex;
}

.workshop-catalogue-card__identity b {
  color: var(--cs-cyan);
}

.workshop-catalogue-card__identity em {
  color: var(--cs-steel-muted);
  font-size: .68rem;
  font-style: normal;
}

.workshop-catalogue-card__power {
  color: var(--cs-steel-muted);
  align-self: end;
  font-size: .72rem;
}

.workshop-status-pill {
  max-width: 104px;
  color: var(--cs-steel-muted);
  text-align: center;
  border: 1px solid #315b76;
  border-radius: 999px;
  align-self: center;
  padding: 4px 6px;
  font-size: .61rem;
  line-height: 1.1;
}

.workshop-filter-empty {
  color: var(--cs-steel-muted);
  text-align: center;
  background: #091724;
  border: 1px dashed #315b76;
  border-radius: 12px;
  justify-items: center;
  gap: 8px;
  padding: 22px 12px;
  display: grid;
}

.workshop-filter-empty button {
  border-color: var(--cs-cyan);
  min-height: 34px;
  color: var(--cs-steel);
  background: #153a52;
}

.workshop-sheet-backdrop {
  z-index: 30;
  padding: 20px 12px calc(72px + env(safe-area-inset-bottom));
  background: #020812aa;
  justify-content: center;
  align-items: end;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.workshop-sheet {
  overscroll-behavior: contain;
  border: 1px solid var(--cs-cyan);
  width: min(100%, 620px);
  max-height: min(76dvh, 680px);
  color: var(--cs-steel);
  background-color: #07131f;
  background-image: linear-gradient(#4ab5dc14 1px, #0000 1px), linear-gradient(90deg, #4ab5dc14 1px, #0000 1px), linear-gradient(#4ab5dc06 1px, #0000 1px), linear-gradient(90deg, #4ab5dc06 1px, #0000 1px);
  background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px;
  border-radius: 16px 16px 12px 12px;
  gap: 11px;
  padding: 10px 12px 12px;
  display: grid;
  overflow-y: auto;
  box-shadow: 0 -12px 35px #000a;
}

.workshop-sheet > header {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  display: grid;
}

.workshop-sheet__handle {
  background: #52758b;
  border-radius: 5px;
  grid-column: 1 / -1;
  justify-self: center;
  width: 34px;
  height: 3px;
}

.workshop-sheet > header strong {
  font-size: 1rem;
}

.workshop-sheet > header button {
  width: 34px;
  min-height: 34px;
  color: var(--cs-steel);
  background: #102638;
  border-color: #315b76;
  font-size: 1.25rem;
}

.workshop-requirements {
  border-left-color: #7d6577;
  gap: 4px;
  padding: 9px;
  display: grid;
}

.workshop-requirements--met {
  border-left-color: #5f9f87;
}

.workshop-requirements > div {
  justify-content: space-between;
  gap: 10px;
  display: flex;
}

.workshop-requirements span, .workshop-requirements small {
  color: var(--cs-steel-muted);
  font-size: .72rem;
}

.workshop-requirements strong {
  font-size: .9rem;
}

.workshop-funding {
  border: 1px solid #315b76;
  border-radius: 9px;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 8px;
  display: flex;
}

.workshop-funding legend {
  color: var(--cs-cyan);
  padding: 0 4px;
  font-size: .68rem;
  font-weight: 800;
}

.workshop-funding label {
  font-size: .76rem;
}

.workshop-sheet-action {
  gap: 6px;
  display: grid;
}

.workshop-sheet-action .workshop-merge-action {
  text-align: center;
  width: 100%;
}

.workshop-sheet .workshop-inputs {
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
}

.workshop-sheet .workshop-status {
  min-height: 18px;
}

.workshop-parts-card .workshop-catalogue-card__power {
  grid-column: 1 / -1;
}

.workshop-required-ingredients {
  background: #07152288;
  border: 1px solid #315b76;
  border-radius: 10px;
  gap: 7px;
  padding: 8px;
  display: grid;
}

.hall-edit-miner-visual {
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
  position: relative;
}

.miner-rarity-overlay {
  position: relative;
}

.miner-rarity-badge {
  z-index: 2;
  color: currentColor;
  -webkit-text-fill-color: currentColor;
  text-indent: 0;
  opacity: 1;
  visibility: visible;
  white-space: nowrap;
  background: #07111de8;
  border: 1px solid;
  border-radius: 5px;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 3px;
  font: 900 .65rem / 1 ui-monospace, monospace;
  display: grid;
  position: absolute;
  bottom: 3px;
  right: 3px;
  overflow: visible;
  box-shadow: 0 1px 4px #000b;
}

.miner-rarity-overlay.rarity-common .miner-rarity-badge {
  color: #aeb9c0;
}

.miner-rarity-overlay.rarity-uncommon .miner-rarity-badge {
  color: #55c178;
}

.miner-rarity-overlay.rarity-rare .miner-rarity-badge {
  color: #4ca9ec;
}

.miner-rarity-overlay.rarity-epic .miner-rarity-badge {
  color: #af71e7;
}

.miner-rarity-overlay.rarity-legendary .miner-rarity-badge {
  color: #edc14f;
}

.miner-rarity-overlay.rarity-unreal .miner-rarity-badge {
  color: #ff4e63;
}

.miner-rarity-overlay.rarity-common {
  color: #aeb9c0;
}

.miner-rarity-overlay.rarity-uncommon {
  color: #55c178;
}

.miner-rarity-overlay.rarity-rare {
  color: #4ca9ec;
}

.miner-rarity-overlay.rarity-epic {
  color: #af71e7;
}

.miner-rarity-overlay.rarity-legendary {
  color: #edc14f;
}

.miner-rarity-overlay.rarity-unreal {
  color: #ff4e63;
}

.rack-management__miner .hall-edit-miner-visual {
  width: 100%;
  max-width: 112px;
  height: 80px;
}

@media (max-width: 420px) {
  .workshop-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .workshop-toolbar select {
    width: 100%;
    max-width: none;
  }

  .workshop-catalogue-card {
    grid-template-columns: minmax(0, 1fr) 92px;
  }

  .workshop-status-pill {
    max-width: 92px;
  }

  .workshop-sheet-backdrop {
    padding-inline: 8px;
  }

  .workshop-sheet {
    max-height: 72dvh;
  }
}

.workshop-catalogue-card {
  background-image: linear-gradient(145deg,#1a2a36,#0b1620 72%),var(--cs-blueprint-grid);
  background-size: auto, 18px 18px;
  border-color: #46718a;
  border-radius: 9px;
  box-shadow: inset 0 1px #b9e2ef10, inset 0 0 0 1px #06101a, 0 5px 12px #0005;
}

.workshop-catalogue-card__identity {
  gap: 7px;
}

.workshop-equation {
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.workshop-equation > b {
  color: var(--cs-cyan);
  font-size: .78rem;
}

.workshop-equation .rarity-badge {
  min-width: 0;
  padding: 4px 5px;
  box-shadow: inset 0 0 10px;
}

.workshop-equation .rarity-badge strong {
  color: #0000;
  width: 13px;
  font-size: 0;
  overflow: hidden;
}

.workshop-equation .rarity-badge strong:after {
  color: var(--cs-steel);
  content: "◆";
  font-size: .68rem;
  display: block;
}

.rarity-common {
  border-color: #9aa8b0;
}

.rarity-uncommon {
  border-color: #55b879;
}

.rarity-rare {
  border-color: #4c9de2;
}

.rarity-epic {
  border-color: #a36cdb;
}

.rarity-legendary {
  border-color: #e2b84f;
}

.rarity-unreal {
  border-color: #ef5365;
  box-shadow: inset 0 0 12px #ef536655, 0 0 8px #ef536644;
}

.workshop-sort {
  flex: none;
  min-width: 142px;
  display: block;
  position: relative;
}

.workshop-sort select {
  appearance: none;
  width: 100%;
  color: var(--cs-steel);
  background: linear-gradient(145deg, #17364b, #0b1a27);
  border-color: #4f88a8;
  border-radius: 8px;
  padding-right: 26px;
  box-shadow: inset 0 0 0 1px #78d0e612;
}

.workshop-sort b {
  pointer-events: none;
  color: var(--cs-cyan);
  font-size: .82rem;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-55%);
}

.gameplay-surface__back {
  border-radius: 9px;
  place-items: center;
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 1.2rem;
  display: grid;
  border-color: var(--cs-blue-border) !important;
  color: var(--cs-cyan) !important;
  background: #102638 !important;
}

@media (max-width: 420px) {
  .workshop-sort {
    width: 100%;
  }

  .workshop-equation {
    gap: 3px;
  }
}

.workshop-miner-card {
  grid-template-rows: auto minmax(64px, 1fr) auto;
  min-height: 148px;
}

.workshop-miner-card .workshop-catalogue-card__identity {
  display: contents;
}

.workshop-miner-card .workshop-catalogue-card__identity > strong {
  grid-column: 1 / -1;
}

.workshop-equation {
  grid-column: 1 / -1;
  justify-content: center;
  gap: 7px;
  min-height: 64px;
}

.workshop-miner-slot {
  color: #9aa8b0;
  background: linear-gradient(145deg, #1b2730, #09131c);
  border: 1px solid;
  border-radius: 8px;
  flex: 0 0 62px;
  place-items: center;
  width: 62px;
  height: 62px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 12px, 0 2px 5px #0008;
}

.workshop-miner-slot .equipment-visual {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.workshop-rarity-numeral {
  min-width: 19px;
  height: 19px;
  color: inherit;
  background: #07111de8;
  border: 1px solid;
  border-radius: 5px;
  place-items: center;
  padding: 0 3px;
  font: 900 .65rem / 1 ui-monospace, monospace;
  display: grid;
  position: absolute;
  bottom: 3px;
  right: 3px;
  box-shadow: 0 1px 4px #000b;
}

.workshop-miner-slot.rarity-common {
  color: #aeb9c0;
}

.workshop-miner-slot.rarity-uncommon {
  color: #55c178;
}

.workshop-miner-slot.rarity-rare {
  color: #4ca9ec;
}

.workshop-miner-slot.rarity-epic {
  color: #af71e7;
}

.workshop-miner-slot.rarity-legendary {
  color: #edc14f;
}

.workshop-miner-slot.rarity-unreal {
  color: #ff4e63;
  box-shadow: inset 0 0 16px #ff4e6388, 0 0 10px #ff4e6366;
}

.workshop-miner-slot--detail {
  flex-basis: 78px;
  width: 78px;
  height: 78px;
}

.workshop-required-miner {
  background: #071522a8;
  border-left: 2px solid #7d6577;
  align-items: center;
  gap: 11px;
  padding: 9px;
  display: flex;
}

.workshop-required-miner > div {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.workshop-required-miner .workshop-miner-slot--detail {
  flex-basis: 54px;
  width: 54px;
  height: 54px;
}

.workshop-required-miner strong {
  overflow-wrap: anywhere;
  font-size: .82rem;
}

.workshop-required-miner span {
  color: var(--cs-steel);
  font-size: .9rem;
  font-weight: 800;
}

.workshop-required-miner small {
  color: var(--cs-steel-muted);
  font-size: .7rem;
}

.workshop-part-requirement {
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
}

.workshop-part-requirement > div {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 8px;
  display: grid;
}

.workshop-part-requirement > div > strong:first-child {
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: .8rem;
}

.workshop-part-requirement > div > span {
  color: var(--cs-steel);
  font-size: .9rem;
  font-weight: 800;
}

.workshop-part-requirement > div > small {
  color: var(--cs-steel-muted);
  grid-column: 1 / -1;
  font-size: .7rem;
}

.workshop-part-visual {
  background: #091724;
  border: 1px solid;
  border-radius: 8px;
  place-items: center;
  width: 54px;
  height: 54px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.workshop-part-visual img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.workshop-part-visual.rarity-common {
  color: #aeb9c0;
}

.workshop-part-visual.rarity-uncommon {
  color: #55c178;
}

.workshop-part-visual.rarity-rare {
  color: #4ca9ec;
}

.workshop-part-visual.rarity-epic {
  color: #af71e7;
}

.workshop-part-visual.rarity-legendary {
  color: #edc14f;
}

.workshop-miner-card .workshop-catalogue-card__power {
  align-self: end;
  gap: 2px;
  display: grid;
}

.workshop-miner-card .workshop-catalogue-card__power small {
  color: var(--cs-steel-muted);
  letter-spacing: .09em;
  font: 800 .58rem / 1 ui-monospace, monospace;
}

.workshop-miner-card .workshop-catalogue-card__power strong {
  color: var(--cs-steel);
  font-size: .78rem;
}

.workshop-miner-card .workshop-catalogue-card__power b {
  color: var(--cs-cyan);
}

.workshop-miner-card .workshop-status-pill {
  align-self: end;
}

@media (max-width: 360px) {
  .workshop-equation {
    gap: 4px;
  }

  .workshop-miner-slot {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }
}

.workshop-terminal-miner {
  grid-column: 1 / -1;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  display: flex;
}

.workshop-terminal-miner em {
  color: var(--cs-steel-muted);
  font-size: .68rem;
  font-style: normal;
}

.workshop-miner-card {
  background-image: var(--cs-blueprint-grid),linear-gradient(145deg,#102638,#091724);
  background-size: 18px 18px, 18px 18px, auto;
  grid-template-rows: auto;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 132px;
  padding: 9px;
}

.workshop-output-miner {
  justify-self: start;
  place-items: center;
  width: 112px;
  min-width: 0;
  min-height: 112px;
  display: grid;
}

.workshop-output-miner .workshop-miner-slot {
  flex-basis: 112px;
  width: 112px;
  height: 112px;
}

.workshop-output-miner .workshop-rarity-numeral {
  min-width: 24px;
  height: 24px;
  font-size: .76rem;
  bottom: 5px;
  right: 5px;
}

.workshop-miner-card__info {
  text-align: left;
  align-content: center;
  gap: 0;
  min-width: 0;
  display: grid;
}

.workshop-miner-card__info > strong {
  color: var(--cs-steel);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 18px;
  font-size: .86rem;
  overflow: hidden;
}

.workshop-title-rarity.rarity-common {
  color: #aeb9c0;
}

.workshop-title-rarity.rarity-uncommon {
  color: #55c178;
}

.workshop-title-rarity.rarity-rare {
  color: #4ca9ec;
}

.workshop-title-rarity.rarity-epic {
  color: #af71e7;
}

.workshop-title-rarity.rarity-legendary {
  color: #edc14f;
}

.workshop-title-rarity.rarity-unreal {
  color: #ff4e63;
}

.workshop-miner-card__info .workshop-catalogue-card__power {
  align-self: auto;
}

.workshop-miner-card__info .workshop-status-pill {
  place-self: auto start;
  max-width: 100%;
  margin-top: 12px;
}

@media (max-width: 360px) {
  .workshop-miner-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    min-height: 116px;
    padding: 8px;
  }

  .workshop-output-miner {
    width: 96px;
    min-height: 96px;
  }

  .workshop-output-miner .workshop-miner-slot {
    flex-basis: 96px;
    width: 96px;
    height: 96px;
  }
}

.hall-edit-rack-preview {
  aspect-ratio: 2 / 3;
  pointer-events: none;
  width: 100%;
  max-width: 72px;
  margin-top: 18px;
  display: block;
  position: relative;
}

.hall-edit-rack-preview .scene-rack-frame {
  width: 100%;
  height: 100%;
}

.hall-edit-position__number {
  z-index: 4;
  font-size: 11px;
}

.hall-edit-position__empty {
  font-size: 10px;
}

.hall-edit-mode {
  --editor-blue-base: #102638;
  --editor-blue-grid-size: 14px 14px;
  --editor-structural-border: #8d7950;
  --editor-black-grid: linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);
  --editor-blue-grid: linear-gradient(#649bc21a 1px,transparent 1px),linear-gradient(90deg,#649bc21a 1px,transparent 1px);
  color: #dce3e9;
  background-color: #0b0c0e;
  background-image: var(--editor-black-grid);
  background-size: 18px 18px;
}

.hall-edit-mode .hall-edit-layout, .hall-edit-mode .hall-edit-drawer {
  border-color: var(--editor-structural-border);
  background-color: #101215;
  background-image: var(--editor-black-grid);
  background-size: 18px 18px;
  box-shadow: inset 0 1px #ffffff08;
}

.hall-edit-mode .hall-edit-position.is-occupied {
  color: #d8e5ef;
  background-color: var(--editor-blue-base);
  background-image: var(--editor-blue-grid);
  background-size: var(--editor-blue-grid-size);
  border-color: #345771;
}

.hall-edit-mode .hall-edit-position.is-empty {
  color: #bfc5ca;
  background: #111316;
  border-color: #42484f;
}

.hall-edit-mode .hall-edit-position.is-selected {
  border-color: #77a9cf;
  box-shadow: 0 0 0 2px #477fa452, inset 0 0 12px #416e8e24;
}

.hall-edit-mode .hall-edit-position__number {
  color: #c2ced8;
}

.hall-edit-mode .hall-edit-position__empty, .hall-edit-mode .hall-edit-mode__hint, .hall-edit-mode .hall-edit-drawer__empty, .hall-edit-mode .hall-edit-rack-heading p, .hall-edit-mode .hall-edit-slot-drawer p, .hall-edit-mode .hall-edit-equipment small {
  color: #b3bcc5;
}

.hall-edit-mode .hall-edit-mode__done, .hall-edit-mode .hall-edit-equipment button, .hall-edit-mode .hall-edit-rack-actions button:not(.hall-edit-rack-actions__danger) {
  color: #e1eaf1;
  background: #193245;
  border-color: #486d89;
}

.hall-edit-mode .hall-edit-equipment {
  background: #111820;
  border-color: #353f48;
}

.hall-edit-mode .hall-edit-slot {
  color: #dce3e9;
  background-color: var(--editor-blue-base);
  background-image: var(--editor-blue-grid);
  background-size: var(--editor-blue-grid-size);
  border-color: #364c5e;
  grid-template-rows: auto 76px auto;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 5px;
  min-height: 136px;
}

.hall-edit-mode .hall-edit-slot.is-selected {
  background-color: var(--editor-blue-base);
  border-color: #77a9cf;
  box-shadow: inset 0 0 0 1px #477fa4;
}

.hall-edit-mode .hall-edit-slot > span {
  color: #abbcca;
  justify-self: start;
}

.hall-edit-mode .hall-edit-miner-art {
  width: 100%;
  max-width: 110px;
  height: 76px;
  display: block;
}

.hall-edit-mode .hall-edit-miner-art img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.hall-edit-mode .hall-edit-slot strong {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 12px;
  line-height: 1.25;
  overflow: visible;
}

.hall-edit-mode .hall-edit-slot small {
  color: #b3bcc5;
}

.hall-edit-mode .hall-edit-slot-drawer {
  border-color: #39434b;
}

.hall-edit-mode .hall-edit-miner-stats div {
  background: #101316;
}

.hall-edit-mode .hall-edit-miner-stats dt {
  color: #b3bcc5;
}

.hall-edit-mode .hall-edit-miner-stats dd {
  color: #e1e7eb;
}

.hall-edit-mode .hall-edit-sort, .storage-panel .hall-edit-sort {
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font-size: 12px;
  display: flex;
}

.hall-edit-mode .hall-edit-sort > button, .storage-panel .hall-edit-sort > button {
  color: #dce3e9;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  font: inherit;
  background: #193245;
  border: 1px solid #486d89;
  border-radius: 6px;
  padding: 6px 8px;
}

.hall-edit-sort-menu {
  box-sizing: border-box;
  color: #dce3e9;
  background-color: #101215;
  background-image: linear-gradient(#ffffff09 1px, #0000 1px), linear-gradient(90deg, #ffffff09 1px, #0000 1px);
  background-size: 18px 18px;
  border: 1px solid #50798d;
  border-radius: 8px;
  margin: 0;
  padding: 5px;
  position: fixed;
  inset: auto;
  overflow-y: auto;
}

.hall-edit-sort-menu button {
  width: 100%;
  min-height: 44px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 4px;
  padding: 8px 12px;
  display: block;
}

.hall-edit-sort-menu button[aria-checked="true"] {
  color: #bde3ff;
  background: #193245;
  border-color: #486d89;
}

.hall-edit-sort-menu button:focus-visible {
  outline-offset: -2px;
  outline: 2px solid #77a9cf;
}

.hall-edit-confirmation {
  box-sizing: border-box;
  color: #dce3e9;
  border-color: #50798d;
  width: min(380px, 100vw - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  overflow: auto;
}

.hall-edit-confirmation::backdrop {
  background: #000a;
}

.workshop-part-art {
  object-fit: contain;
  background: #091724;
  border-radius: 8px;
  width: 44px;
  height: 44px;
}

.workshop-sort__trigger {
  width: 100%;
  min-height: 32px;
  color: var(--cs-steel);
  font: inherit;
  text-align: left;
  background: linear-gradient(145deg, #17364b, #0b1a27);
  border-color: #4f88a8;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 14px;
  font-size: .68rem;
  display: flex;
  box-shadow: inset 0 0 0 1px #78d0e612;
}

.workshop-sort__trigger b {
  color: var(--cs-cyan);
  flex: none;
  font-size: .82rem;
  position: static;
  transform: none;
}

.workshop-sort__menu {
  z-index: 25;
  border: 1px solid var(--cs-blue-border);
  color: var(--cs-steel);
  background-image: var(--cs-blueprint-grid),linear-gradient(145deg,#112b3f,#07111d);
  background-size: 18px 18px, auto;
  border-radius: 9px;
  gap: 4px;
  padding: 5px;
  display: grid;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  box-shadow: 0 10px 24px #000a;
}

.workshop-sort__menu button {
  width: 100%;
  min-height: 42px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .68rem;
}

.workshop-sort__menu button[aria-selected="true"] {
  border-color: var(--cs-cyan);
  color: var(--cs-steel);
  background: #173d56;
}

.workshop-sort__menu button:hover, .workshop-sort__menu button:focus-visible {
  border-color: #4f88a8;
  outline: none;
}

.workshop-search {
  width: 100%;
  margin-top: -2px;
  display: block;
  position: relative;
}

.workshop-search:before {
  content: "Search";
  z-index: 1;
  color: var(--cs-steel-muted);
  pointer-events: none;
  font-size: .72rem;
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
}

.workshop-search > span {
  display: none;
}

.workshop-search:before {
  font-size: .86rem;
  line-height: 1;
}

.workshop-search:after {
  content: "⌕";
  z-index: 1;
  color: var(--cs-cyan);
  pointer-events: none;
  font-size: 1.35rem;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-52%);
}

.workshop-search input {
  box-sizing: border-box;
  border: 1px solid var(--cs-blue-border);
  width: 100%;
  min-height: 40px;
  color: var(--cs-steel);
  font: inherit;
  background: linear-gradient(145deg, #17364b, #0b1a27);
  border-radius: 11px;
  padding: 0 42px 0 14px;
  font-size: .86rem;
}

.workshop-search input::placeholder {
  color: #0000;
}

.workshop-action-header {
  background: linear-gradient(145deg, #17364b, #0b1a27);
  border: 1px solid #315b76;
  border-radius: 11px;
  grid-template-columns: minmax(0, 1fr) minmax(112px, .82fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  display: grid;
  box-shadow: inset 0 0 0 1px #78d0e612;
}

.workshop-action-header__source {
  gap: 7px;
  min-width: 0;
  padding-top: 0;
  display: grid;
}

.workshop-action-header__source > strong, .workshop-action-header__result > strong {
  overflow-wrap: anywhere;
  min-width: 0;
}

.workshop-action-header__source > strong {
  font-size: 1rem;
}

.workshop-action-header__result {
  justify-items: center;
  gap: 4px;
  min-width: 0;
  display: grid;
}

.workshop-action-header__result > p {
  color: var(--cs-cyan);
  letter-spacing: .12em;
  margin: 0;
  font: 800 .62rem / 1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.workshop-action-header__result > strong {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  order: -1;
  width: 100%;
  font-size: .78rem;
  overflow: hidden;
}

.workshop-action-header__result .workshop-miner-slot--detail {
  width: 92px;
  height: 92px;
}

@media (max-width: 420px) {
  .workshop-action-header {
    grid-template-columns: minmax(0, 1fr) minmax(98px, .78fr);
    gap: 8px;
  }

  .workshop-action-header__result .workshop-miner-slot--detail {
    width: 80px;
    height: 80px;
  }
}

.workshop-action-header__result {
  grid-template-columns: auto minmax(0, 1fr);
  place-items: center start;
  column-gap: 10px;
}

.workshop-action-header__result .workshop-miner-slot--detail {
  grid-row: 1;
}

.workshop-action-header__result-info {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.workshop-action-header__result-info > strong {
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
  font-size: .78rem;
  display: block;
  overflow: visible;
}

.workshop-action-header__result-info > span {
  color: var(--cs-steel-muted);
  white-space: nowrap;
  font-size: .72rem;
}

.workshop-action-header__result-info b {
  color: var(--cs-steel);
}

@media (max-width: 420px) {
  .workshop-action-header__result-info > strong {
    font-size: .7rem;
  }

  .workshop-action-header__result-info > span {
    font-size: .66rem;
  }
}

/* [project]/apps/web/src/app/equipment-visual-prototype.css [app-client] (css) */
.equipment-prototype {
  color: #f7eee0;
  background: #17130e;
  border: 1px solid #e0ab52b3;
  border-radius: 16px;
  gap: 14px;
  width: min(100% - 24px, 760px);
  margin: 0 auto 24px;
  padding: 16px;
  display: grid;
  box-shadow: 0 12px 34px #00000052;
}

.equipment-prototype h2, .equipment-prototype h3, .equipment-prototype p {
  margin: 0;
}

.equipment-prototype h2 {
  font-size: 1.08rem;
}

.equipment-prototype h3 {
  font-size: .82rem;
}

.equipment-prototype header {
  gap: 5px;
  display: grid;
}

.equipment-prototype header > p:last-child, .equipment-prototype__caption {
  color: #d3c5af;
  font-size: .75rem;
}

.equipment-prototype__section {
  background: #0608078a;
  border: 1px solid #aa8a5b6b;
  border-radius: 12px;
  gap: 9px;
  padding: 12px;
  display: grid;
}

.equipment-prototype__four-slot {
  background: radial-gradient(circle, #403226, #0d0d0c 70%);
  border-radius: 10px;
  place-items: center;
  min-height: 276px;
  display: grid;
  overflow: hidden;
}

.equipment-prototype__rack {
  aspect-ratio: 2 / 3;
  width: 172px;
  position: relative;
}

.equipment-prototype__rack > .equipment-visual {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.equipment-prototype__rack-slots {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.equipment-prototype__rack-slot {
  place-items: center;
  display: grid;
  position: absolute;
  overflow: hidden;
}

.equipment-prototype__rack-slot img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.equipment-prototype__rack-slot .equipment-visual {
  object-fit: contain;
  mix-blend-mode: screen;
  width: 100%;
  height: 100%;
}

.equipment-prototype__comparison {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.equipment-prototype__comparison > div {
  gap: 8px;
  min-width: 0;
  display: grid;
}

.equipment-prototype__hall-scale {
  background: #232822;
  border-radius: 8px;
  place-items: center;
  min-height: 142px;
  display: grid;
  overflow: hidden;
}

.equipment-prototype__hall-scale .equipment-prototype__rack {
  width: 64px;
}

.equipment-prototype__alternate-rack {
  object-fit: contain;
  width: 100%;
  max-height: 142px;
  image-rendering: pixelated;
}

.equipment-prototype__edit-scale {
  background: #14251c;
  border-radius: 8px;
  place-items: center;
  min-height: 142px;
  display: grid;
}

.equipment-prototype__edit-scale .equipment-prototype__rack {
  width: 58px;
}

.equipment-prototype__inspection-scale {
  background: #231c15;
  border-radius: 8px;
  place-items: center;
  min-height: 142px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.equipment-prototype__inspection-scale .equipment-prototype__rack-slot {
  position: relative;
  width: 88px !important;
  height: 38px !important;
  top: auto !important;
  left: auto !important;
}

@media (max-width: 500px) {
  .equipment-prototype {
    width: min(100% - 16px, 760px);
    padding: 13px;
  }

  .equipment-prototype__comparison {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .equipment-prototype__four-slot {
    min-height: 248px;
  }

  .equipment-prototype__rack {
    width: 154px;
  }
}

.equipment-batch-1 {
  color: #f1eee7;
  background: #0e1515;
  border: 1px solid #3fe1cf8c;
  border-radius: 16px;
  gap: 14px;
  width: min(100% - 24px, 760px);
  margin: 0 auto 24px;
  padding: 16px;
  display: grid;
  box-shadow: 0 12px 34px #00000052;
}

.equipment-batch-1 h2, .equipment-batch-1 h3, .equipment-batch-1 p, .equipment-batch-1 figure {
  margin: 0;
}

.equipment-batch-1 h2 {
  font-size: 1.1rem;
}

.equipment-batch-1 h3 {
  font-size: .84rem;
}

.equipment-batch-1 header, .equipment-batch-1__section {
  gap: 8px;
  display: grid;
}

.equipment-batch-1 header > p:last-child {
  color: #b9c4bd;
  font-size: .76rem;
}

.equipment-batch-1__section {
  background: #02080873;
  border: 1px solid #749a8f66;
  border-radius: 12px;
  padding: 12px;
}

.equipment-batch-1__rack-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.equipment-batch-1 figure {
  justify-items: center;
  gap: 6px;
  min-width: 0;
  display: grid;
}

.equipment-batch-1__rack-canvas {
  aspect-ratio: 2 / 3;
  width: 100%;
  max-height: 260px;
  position: relative;
}

.equipment-batch-1__rack-canvas > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  position: absolute;
  inset: 0;
}

.equipment-batch-1__shelf-guide {
  z-index: 1;
  pointer-events: none;
  border-top: 1px dashed #38ffe0eb;
  height: 1px;
  position: absolute;
  left: 9%;
  right: 9%;
  box-shadow: 0 0 4px #38ffe0b3;
}

.equipment-batch-1__shelf-guide--1 {
  top: 19.596%;
}

.equipment-batch-1__shelf-guide--2 {
  top: 41.862%;
}

.equipment-batch-1__shelf-guide--3 {
  top: 65.234%;
}

.equipment-batch-1__shelf-guide--4 {
  top: 86.198%;
}

.equipment-batch-1 figcaption {
  color: #cfd6cf;
  text-align: center;
  font-size: .71rem;
  line-height: 1.2;
}

.equipment-batch-1__miner-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.equipment-batch-1__shelf-rack {
  aspect-ratio: 2 / 3;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.equipment-batch-1__rack-frame, .equipment-batch-1__rack-lips {
  object-fit: contain;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  position: absolute;
  inset: 0;
}

.equipment-batch-1__miner {
  object-fit: contain;
  image-rendering: pixelated;
  position: absolute;
}

.equipment-batch-1__rack-lips {
  pointer-events: none;
}

@media (max-width: 500px) {
  .equipment-batch-1 {
    width: min(100% - 16px, 760px);
    padding: 13px;
  }

  .equipment-batch-1__rack-grid {
    gap: 6px;
  }

  .equipment-batch-1__rack-grid img {
    max-height: 170px;
  }

  .equipment-batch-1__miner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .equipment-batch-1__shelf-rack {
    width: min(100%, 150px);
  }
}

/* [project]/apps/web/src/app/mining-hall-normal.css [app-client] (css) */
.game-shell[data-hall-mode="normal"] {
  --hall-brass: #50798d;
  --hall-steel-border: #45494a;
  --hall-text: #e8e9e5;
  --hall-muted: #b1b5b1;
  --hall-metal: linear-gradient(175deg, #ffffff04, transparent 38%, #00000024),
    linear-gradient(105deg, #222426, #151718 62%, #1b1c1e);
  isolation: isolate;
  background-color: #050505;
  background-image: radial-gradient(at 50% 8%, #30303066 0, #0000 42%), radial-gradient(at 18% 28%, #7777771c 0, #0000 34%), radial-gradient(at 82% 48%, #2c2c2c14 0, #0000 38%), linear-gradient(#111 0, #090909 48%, #050505 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.game-shell[data-hall-mode="normal"]:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  top: 0;
  right: var(--cs-hud-right);
  left: var(--cs-hud-left);
  height: calc(236px + var(--cs-hud-top));
  background: linear-gradient(to right, #e6eff20f 1px, #0000 1px) 0 0 / 20px 20px, linear-gradient(#e6eff20f 1px, #0000 1px) 0 0 / 20px 20px, linear-gradient(to right, #edf5f51f 1px, #0000 1px) 0 0 / 80px 80px, linear-gradient(#edf5f51f 1px, #0000 1px) 0 0 / 80px 80px, radial-gradient(at 22% 18%, #aaaaaa1c 0, #0000 42%), radial-gradient(at 78% 72%, #7a7a7a14 0, #0000 44%);
  display: block;
  position: absolute;
  -webkit-mask-image: radial-gradient(#000 0 46%, #0000 86%);
  mask-image: radial-gradient(#000 0 46%, #0000 86%);
}

.game-shell[data-hall-mode="normal"]:after {
  content: "";
  z-index: 0;
  pointer-events: none;
  top: 0;
  left: calc(var(--cs-hud-left) - 35%);
  width: 75%;
  height: calc(300px + var(--cs-hud-top));
  opacity: .05;
  will-change: transform, opacity;
  background: radial-gradient(#e0b45a99 0, #c58b3d40 30%, #0000 72%), linear-gradient(105deg, #0000 8%, #d3a04b38 46%, #0000 82%);
  animation: 16s ease-in-out infinite cs-hud-reflection;
  position: absolute;
  transform: translate3d(-12%, 0, 0);
  -webkit-mask-image: radial-gradient(#000 0 42%, #0000 82%);
  mask-image: radial-gradient(#000 0 42%, #0000 82%);
}

.game-shell[data-hall-mode="normal"] > .topbar, .game-shell[data-hall-mode="normal"] > .upper-hud__league, .game-shell[data-hall-mode="normal"] > .hall-discovery {
  z-index: 2;
  position: relative;
}

@keyframes cs-hud-reflection {
  0%, 100% {
    opacity: .1;
    transform: translate3d(-12%, 0, 0);
  }

  25% {
    opacity: .4;
    transform: translate3d(12%, 4px, 0);
  }

  55% {
    opacity: .54;
    transform: translate3d(48%, -2px, 0);
  }

  80% {
    opacity: .3;
    transform: translate3d(78%, 3px, 0);
  }
}

.game-shell[data-hall-mode="normal"] > .upper-hud__league:after {
  content: "";
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background: radial-gradient(at 50% 0, #5ba6d41a, #0000 72%);
  border-radius: 16px;
  position: absolute;
  inset: -8px 8%;
}

@media (prefers-reduced-motion: reduce) {
  .game-shell[data-hall-mode="normal"]:after {
    animation: none;
  }
}

.game-shell[data-hall-mode="normal"] > .hall-discovery {
  margin-top: 0;
  margin-bottom: 12px;
}

.game-shell[data-hall-mode="normal"] > .hall-card {
  overflow: hidden;
}

.game-shell[data-hall-mode="normal"] > .topbar .player-hud > button, .game-shell[data-hall-mode="normal"] > .league-status-card, .game-shell[data-hall-mode="normal"] > .hall-discovery > .hall-discovery__card, .game-shell[data-hall-mode="normal"] > .hall-card {
  border-color: var(--hall-brass);
  color: var(--hall-text);
  background: var(--hall-metal);
  box-shadow: inset 0 1px #ffffff08, 0 3px 12px #0006;
}

.game-shell[data-hall-mode="normal"] .mining-hall-viewport__edit {
  color: #e8f4fa;
  background-color: #123247;
  background-image: linear-gradient(#72d5ed14 1px, #0000 1px), linear-gradient(90deg, #72d5ed14 1px, #0000 1px);
  background-size: 8px 8px;
  border-color: #4f91ad;
}

.game-shell[data-hall-mode="normal"] > .topbar .player-hud__balance {
  border-left-color: var(--hall-steel-border) !important;
}

.game-shell[data-hall-mode="normal"] > .topbar .player-hud__balance small {
  color: var(--hall-muted) !important;
}

.game-shell[data-hall-mode="normal"] > .topbar .player-hud > button .gameplay-icon, .game-shell[data-hall-mode="normal"] > .gameplay-nav .gameplay-icon {
  color: var(--hall-text);
}

.game-shell[data-hall-mode="normal"] > .league-status-card .league-status-card__badge {
  border-color: var(--hall-steel-border);
  color: var(--hall-text);
  background: linear-gradient(145deg, #29292c, #141517);
}

.game-shell[data-hall-mode="normal"] > .league-status-card .league-status-card__progress > span {
  background: #101213;
}

.game-shell[data-hall-mode="normal"] > .league-status-card .league-status-card__progress i {
  background: linear-gradient(90deg, var(--hall-steel-border), #799aa8);
}

.game-shell[data-hall-mode="normal"] > .league-status-card .league-status-card__placeholder-line {
  background: linear-gradient(90deg, #45494a55, #b1b1b533);
}

.game-shell[data-hall-mode="normal"] > .league-status-card > b, .game-shell[data-hall-mode="normal"] > .hall-discovery .hall-discovery__glyph, .game-shell[data-hall-mode="normal"] > .hall-discovery .hall-discovery__card > b {
  color: var(--hall-muted);
  border-color: var(--hall-steel-border);
}

.game-shell[data-hall-mode="normal"] > .hall-discovery .hall-discovery__card em, .game-shell[data-hall-mode="normal"] > .hall-discovery .hall-discovery__card small {
  color: var(--hall-muted);
}

.game-shell[data-hall-mode="normal"] > .topbar .player-hud > button:focus-visible, .game-shell[data-hall-mode="normal"] > .league-status-card:focus-visible, .game-shell[data-hall-mode="normal"] .mining-hall-viewport__edit:focus-visible {
  border-color: var(--hall-brass);
  color: var(--hall-text);
  outline-color: var(--hall-brass);
}

.game-shell[data-hall-mode="normal"] .mining-hall-viewport__tools-icon {
  stroke: var(--hall-text);
}

body .game-shell[data-hall-mode="normal"] > .gameplay-nav {
  left: calc(var(--cs-hud-left) + 1px);
  right: calc(var(--cs-hud-right) + 1px);
  width: min(calc(100% - var(--cs-hud-left) - var(--cs-hud-right) - 2px),640px);
}

.game-shell[data-hall-mode="normal"] {
  padding-top: var(--cs-hud-top);
  padding-right: var(--cs-hud-right);
  padding-left: var(--cs-hud-left);
}

.game-shell[data-hall-mode="normal"] > .topbar {
  width: min(100%, 620px);
  margin-bottom: 6px;
}

.game-shell[data-hall-mode="normal"] > .topbar .player-hud {
  grid-template-columns: 42px minmax(0, 1fr) minmax(72px, auto) 42px;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 620px;
}

.game-shell[data-hall-mode="normal"] > .topbar .player-hud__wallet {
  width: 42px;
  min-height: 42px;
}

.game-shell[data-hall-mode="normal"] .player-hud__token {
  object-fit: contain;
  width: 22px;
  height: 22px;
}

.game-shell[data-hall-mode="normal"] > .upper-hud__league {
  width: min(100%, 620px);
  margin: 0 auto 8px;
}

.game-shell[data-hall-mode="normal"] > .upper-hud__league .hall-league-control, .game-shell[data-hall-mode="normal"] > .upper-hud__league .hall-league-trigger {
  width: 100%;
}

.game-shell[data-hall-mode="normal"] > .upper-hud__league .hall-league-trigger {
  min-height: 48px;
}

@media (max-width: 420px) {
  .game-shell[data-hall-mode="normal"] > .topbar .player-hud {
    grid-template-columns: 40px minmax(0, 1fr) 64px 40px;
    gap: 4px;
  }

  .game-shell[data-hall-mode="normal"] > .topbar .player-hud__wallet, .game-shell[data-hall-mode="normal"] > .topbar .player-hud__avatar {
    width: 40px;
    height: 40px;
  }
}

@media (min-width: 721px) {
  .game-shell[data-hall-mode="normal"] > .topbar .player-hud {
    display: grid;
  }

  .game-shell[data-hall-mode="normal"] > .topbar {
    margin-inline: auto;
  }
}

.game-shell[data-hall-mode="normal"] > .league-status-card .league-status-card__summary small, .game-shell[data-hall-mode="normal"] > .league-status-card .league-status-card__summary em, .game-shell[data-hall-mode="normal"] > .league-status-card .league-status-card__progress small {
  color: var(--hall-muted);
}

.game-shell[data-hall-mode="normal"] > .gameplay-menu-backdrop .gameplay-menu, .game-shell[data-hall-mode="normal"] > .topbar .player-menu {
  border-color: var(--hall-brass);
  background: var(--hall-metal);
  color: var(--hall-text);
}

.game-shell[data-hall-mode="normal"] > .gameplay-menu-backdrop .gameplay-menu header, .game-shell[data-hall-mode="normal"] > .topbar .player-menu header, .game-shell[data-hall-mode="normal"] > .gameplay-menu-backdrop .gameplay-menu button, .game-shell[data-hall-mode="normal"] > .topbar .player-menu button {
  border-color: var(--hall-steel-border);
  color: var(--hall-text);
  background: #1b1c1e;
}

.game-shell[data-hall-mode="normal"] > .gameplay-menu-backdrop .gameplay-menu :is(.gameplay-icon, b, small), .game-shell[data-hall-mode="normal"] > .topbar .player-menu :is(.gameplay-icon, b, small) {
  color: var(--hall-muted);
}

.game-shell[data-hall-mode="normal"] > .gameplay-menu-backdrop .eyebrow, .game-shell[data-hall-mode="normal"] > .topbar .eyebrow {
  color: var(--hall-muted) !important;
}

.gameplay-surface, .storage-screen, .mining-status-screen {
  isolation: isolate;
  background-color: #050809;
  background-image: radial-gradient(at 50% 8%, #27352f66 0, #0000 42%), radial-gradient(at 18% 28%, #9a71301c 0, #0000 34%), radial-gradient(at 82% 48%, #3c292014 0, #0000 38%), linear-gradient(#0d1514 0, #070c0c 48%, #040707 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.gameplay-surface:before, .storage-screen:before, .mining-status-screen:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to right, #e6eff20f 1px, #0000 1px) 0 0 / 20px 20px, linear-gradient(#e6eff20f 1px, #0000 1px) 0 0 / 20px 20px, linear-gradient(to right, #edf5f51f 1px, #0000 1px) 0 0 / 80px 80px, linear-gradient(#edf5f51f 1px, #0000 1px) 0 0 / 80px 80px, radial-gradient(at 22% 18%, #d4a65b1c 0, #0000 42%), radial-gradient(at 78% 72%, #8d795014 0, #0000 44%);
  width: auto;
  height: auto;
  margin: 0;
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(#000 0 46%, #0000 86%);
  mask-image: radial-gradient(#000 0 46%, #0000 86%);
}

.gameplay-surface:after, .storage-screen:after, .mining-status-screen:after {
  content: "";
  z-index: 0;
  pointer-events: none;
  opacity: .1;
  will-change: transform, opacity;
  background: radial-gradient(#e0b45a99 0, #c58b3d40 30%, #0000 72%), linear-gradient(105deg, #0000 8%, #d3a04b38 46%, #0000 82%);
  animation: 16s ease-in-out infinite cs-hud-reflection;
  position: absolute;
  inset: 0;
  transform: translate3d(-12%, 0, 0);
  -webkit-mask-image: radial-gradient(#000 0 42%, #0000 82%);
  mask-image: radial-gradient(#000 0 42%, #0000 82%);
}

@media (prefers-reduced-motion: reduce) {
  .gameplay-surface:after, .storage-screen:after, .mining-status-screen:after {
    animation: none;
  }
}

/* [project]/apps/web/src/app/hall-league-control.css [app-client] (css) */
.game-shell[data-hall-mode="normal"] .player-hud[data-has-league="true"] {
  grid-template-columns: 36px max-content minmax(0, 1fr) 36px;
  position: relative;
}

.game-shell[data-hall-mode="normal"] .player-hud[data-has-league="true"] > .player-hud__balance {
  max-width: 100%;
}

.game-shell[data-hall-mode="normal"] .player-hud[data-has-league="true"] > .player-hud__avatar {
  grid-column: 4;
}

.hall-league-control {
  grid-column: 3;
  min-width: 0;
  position: relative;
}

.player-hud .hall-league-trigger {
  color: #e8e9e5;
  width: 100%;
  min-height: 48px;
  box-shadow: none;
  text-align: left;
  background: linear-gradient(150deg, #24272a, #151719);
  border: 1px solid #595e61;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.2;
  display: flex;
}

.hall-league-badge {
  border: 1px solid #595e61;
  border-radius: 5px 5px 9px 9px;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 34px;
  font-size: 17px;
  display: grid;
  overflow: hidden;
}

.hall-league-badge img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.hall-league-badge--large {
  flex-basis: 64px;
  width: 64px;
  height: 70px;
}

.hall-league-trigger__copy {
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: grid;
}

.hall-league-trigger__copy strong, .hall-league-trigger__copy small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.hall-league-trigger__copy small {
  color: #b1b5b1;
  font-size: 10px;
}

.hall-league-trigger__copy i, .hall-league-progress i {
  background: #0e1112;
  border-radius: 999px;
  height: 4px;
  display: block;
  overflow: hidden;
}

.hall-league-trigger__copy i b, .hall-league-progress i b {
  border-radius: inherit;
  background: #7ec8ff;
  height: 100%;
  display: block;
}

.hall-league-panel {
  z-index: 60;
  overscroll-behavior: none;
  color: #e8e9e5;
  background: linear-gradient(150deg, #24272a, #151719);
  border: 1px solid #595e61;
  border-radius: 10px;
  width: min(680px, 100vw - 24px);
  max-height: min(72dvh, 500px);
  padding: 12px;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden auto;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 20px #0009;
}

.hall-league-current-next {
  text-align: center;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, .9fr);
  align-items: center;
  gap: 10px;
  display: grid;
}

.hall-league-current-next > div {
  justify-items: center;
  gap: 3px;
  min-width: 0;
  display: grid;
}

.hall-league-current-next small, .hall-league-current-next span {
  color: #b1b5b1;
  font-size: 10px;
}

.hall-league-current-next strong {
  overflow-wrap: anywhere;
}

.hall-league-progress {
  gap: 6px;
  min-width: 0;
  display: grid;
}

.hall-league-progress em {
  color: #d4b06a;
  font-size: 10px;
  font-style: normal;
}

.hall-league-browser {
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: stretch;
  gap: 6px;
  margin-top: 16px;
  display: grid;
}

.hall-league-browser > button {
  min-height: 44px;
}

.hall-league-browser > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  display: grid;
}

.hall-league-browser article {
  text-align: center;
  background: #151719;
  border: 1px solid #3e4447;
  border-radius: 7px;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 7px 4px;
  display: grid;
}

.hall-league-browser article img {
  object-fit: contain;
  width: 46px;
  height: 46px;
}

.hall-league-browser article.is-current {
  border-color: #6ab0d4;
  box-shadow: inset 0 0 0 1px #7ec8ff;
}

.hall-league-browser article.is-next {
  border-color: #7ec8ff;
  box-shadow: inset 0 0 0 1px #6ab0d4;
}

.hall-league-browser article.is-past {
  opacity: .72;
}

.hall-league-browser article.is-future {
  opacity: .5;
}

.hall-league-browser article.is-next {
  opacity: 1;
}

.hall-league-browser article em {
  color: #7ec8ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.hall-league-value {
  color: #cbd8d1;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.35;
}

.hall-league-panel > .hall-league-cta {
  color: #d4b06a;
  letter-spacing: .04em;
  text-align: center;
  margin: 28px 0 0;
  font-size: 11px;
  font-weight: 800;
}

.hall-league-panel > .hall-league-help {
  margin-top: 28px;
}

.hall-league-help {
  color: #cbd8d1;
  border-top: 1px solid #3e4447;
  margin-top: 24px;
  padding-top: 8px;
  font-size: 11px;
}

.hall-league-help summary {
  cursor: pointer;
  color: #e8e9e5;
  font-weight: 700;
}

.hall-league-help p {
  margin: 7px 0 0;
  line-height: 1.35;
}

.hall-league-help strong {
  color: #e8e9e5;
}

.hall-league-panel .league-console strong {
  overflow-wrap: anywhere;
}

.hall-league-panel .league-badge {
  color: #e8e9e5;
  box-shadow: none;
  background: #191b1e;
  border-color: #595e61;
}

.hall-league-panel .league-badge small {
  color: #b1b5b1;
}

.hall-league-panel .league-progress {
  grid-column: 1 / -1;
}

.hall-league-panel > p {
  margin: 10px 0 0;
  font-size: 12px;
}

.hall-league-panel .league-progress div {
  flex-wrap: wrap;
}

.hall-league-panel {
  background: linear-gradient(145deg, #1b2b36 0%, #101b24 58%, #09131c 100%);
  border-color: #50798d;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 18px 45px #000b, inset 0 1px #6ab0d433;
}

.hall-league-hero {
  isolation: isolate;
  background: radial-gradient(at 50% 42%, #23486052 0%, #19273033 21%, #0000 56%), radial-gradient(at 12% 100%, #27405129, #0000 44%), linear-gradient(145deg, #2d353952 0%, #17181952 47%, #0b0d0d52 100%);
  border: 1px solid #39515d;
  border-radius: 11px;
  grid-template-columns: minmax(76px, .82fr) minmax(130px, 1.35fr) minmax(76px, .82fr);
  align-items: center;
  gap: 10px;
  padding: 12px 8px 14px;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #8ad1f02e, inset 0 -16px 26px #0008, 0 7px 18px #0007;
}

.hall-league-trigger--hero .hall-league-hero {
  padding-top: 4px;
  padding-bottom: 4px;
}

.hall-league-hero:after {
  content: "";
  z-index: -1;
  filter: blur(22px);
  pointer-events: none;
  background: #6ab0d418;
  border-radius: 50%;
  position: absolute;
  inset: 10% 32%;
}

.hall-league-rank {
  text-align: center;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  display: grid;
}

.hall-league-rank--current .hall-league-badge {
  border-color: #6ab0d4;
  box-shadow: 0 0 18px #6ab0d435;
}

.hall-league-rank--next {
  opacity: .92;
}

.hall-league-rank--next .hall-league-badge {
  border-color: #60879e;
  position: relative;
  box-shadow: 0 0 14px #6ab0d424;
}

.hall-league-rank--next .hall-league-badge:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #0000, #d8f7ffbb, #0000);
  width: 34%;
  animation: 4.8s ease-in-out infinite hall-league-shield-shine;
  position: absolute;
  inset: -20% 35% -20% -65%;
  transform: skewX(-18deg);
}

.hall-league-rank small, .hall-league-rank span {
  color: #c1b59d;
  letter-spacing: .04em;
  font-size: 9px;
}

.hall-league-rank strong {
  overflow-wrap: anywhere;
}

.hall-league-progress {
  gap: 7px;
  min-width: 0;
  padding: 0 2px;
  display: grid;
}

.hall-league-progress__heading {
  justify-content: space-between;
  align-items: baseline;
  gap: 5px;
  display: flex;
}

.hall-league-progress__heading small, .hall-league-progress__threshold {
  color: #c1b59d;
  font-size: 9px;
}

.hall-league-progress__heading strong {
  color: #f0d18a;
  font-size: 17px;
}

.hall-league-progress__track {
  padding: 5px 0;
}

.hall-league-progress__track i {
  background: #0b0c0d;
  border: 1px solid #375666;
  border-radius: 999px;
  height: 9px;
  display: block;
  overflow: hidden;
  box-shadow: inset 0 1px 3px #000;
}

.hall-league-progress__track i b {
  border-radius: inherit;
  background: linear-gradient(90deg, #50798d, #8ad1f0 78%, #bdf1ff);
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 12px #6ab0d499;
}

.hall-league-progress__track i b:after {
  content: "";
  background: linear-gradient(90deg, #0000, #d6f8ffaa, #0000);
  width: 35%;
  animation: 2.8s ease-in-out infinite hall-league-energy;
  position: absolute;
  inset: 0 auto 0 -35%;
}

.hall-league-progress__remaining, .hall-league-progress__threshold {
  color: #eee9dc;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

.hall-league-progress em {
  color: #f0d18a;
  text-align: center;
  font-size: 10px;
  font-style: normal;
  line-height: 1.25;
}

@keyframes hall-league-energy {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(390%);
  }
}

.hall-league-value, .hall-league-cta, .hall-league-help, .hall-league-browser {
  position: relative;
}

.hall-league-value {
  background: #111314aa;
  border: 1px solid #3a3d40;
  border-radius: 8px;
  padding: 10px 11px;
}

.hall-league-help {
  background: #0e0f10bb;
  border: 1px solid #385562;
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}

.hall-league-help summary {
  color: #f0d18a;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 11px;
  list-style: none;
  display: flex;
}

.hall-league-help summary::-webkit-details-marker {
  display: none;
}

.hall-league-help summary b {
  color: #f1f0eb;
  background: none;
  width: 18px;
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s;
  display: block;
}

.hall-league-help[open] summary b {
  transform: rotate(180deg);
}

.hall-league-help summary:focus-visible {
  outline-offset: -2px;
  outline: 2px solid #8ad1f0;
}

.hall-league-help > div {
  padding: 0 11px 11px;
}

.hall-league-help__collapse {
  color: #f0d18a;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  min-height: 36px;
  margin-top: 10px;
  padding: 7px 4px;
  font-size: 11px;
  text-decoration: underline;
}

.hall-league-help__collapse:after {
  content: " ↑";
  font-size: 15px;
  text-decoration: none;
}

.hall-league-help__collapse {
  appearance: none;
  color: #f0d18a;
  text-align: center;
  border-radius: 0;
  width: auto;
  min-width: 0;
  margin-inline: auto;
  padding: 10px 14px;
  display: block;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
}

.hall-league-browser > div > p {
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
  grid-column: 1 / -1;
  place-items: center;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 10px;
  display: grid;
}

.hall-league-browser > button {
  color: #f0d18a;
  background: linear-gradient(#203a4a, #121d24);
  border-color: #5296b8;
  box-shadow: 0 0 10px #6ab0d42b;
}

@keyframes hall-league-shield-shine {
  0%, 62% {
    opacity: 0;
    transform: translateX(0)skewX(-18deg);
  }

  72% {
    opacity: .85;
  }

  88%, 100% {
    opacity: 0;
    transform: translateX(470%)skewX(-18deg);
  }
}

@media (max-width: 390px) {
  .hall-league-panel {
    padding: 10px;
  }

  .hall-league-hero {
    gap: 5px;
    padding-inline: 4px;
  }

  .hall-league-badge--large {
    flex-basis: 54px;
    width: 54px;
    height: 60px;
  }

  .hall-league-progress__heading small {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hall-league-progress__track i b:after {
    animation: none;
    display: none;
  }

  .hall-league-help summary b {
    transition: none;
  }

  .hall-league-rank--next .hall-league-badge:after {
    opacity: .22;
    animation: none;
    transform: none;
  }
}

.game-shell[data-hall-mode="normal"] .upper-hud__league {
  z-index: 60;
  width: min(100%, 680px);
  margin: 8px auto 12px;
  position: relative;
}

.hall-league-trigger--hero {
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  background: none !important;
  border: 1px solid #50798d !important;
  border-radius: 14px !important;
  min-height: 0 !important;
  padding: 0 !important;
  transition: none !important;
  display: block !important;
}

.hall-league-trigger--hero:hover, .hall-league-trigger--hero:active {
  box-shadow: none !important;
  filter: none !important;
  background: none !important;
  border-color: #50798d !important;
  transform: none !important;
}

.hall-league-trigger--hero:focus {
  outline: none;
}

.hall-league-trigger--hero:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #8ad1f0;
}

.hall-league-trigger--hero[aria-expanded="true"] {
  border-radius: 14px 14px 0 0 !important;
}

.hall-league-trigger--hero .hall-league-hero {
  width: 100%;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  grid-template-columns: minmax(58px, .78fr) minmax(0, 1.45fr) minmax(58px, .78fr);
  gap: 6px;
  padding: 4px 6px;
}

.hall-league-trigger--hero .hall-league-badge--large {
  flex-basis: 54px;
  width: 54px;
  height: 58px;
}

.hall-league-trigger--hero .hall-league-rank {
  gap: 5px;
}

.hall-league-trigger--hero .hall-league-rank small, .hall-league-trigger--hero .hall-league-rank span {
  font-size: 8px;
  line-height: 1.05;
}

.hall-league-trigger--hero .hall-league-rank strong {
  font-size: 13px;
  line-height: 1.05;
}

.hall-league-trigger--hero .hall-league-progress {
  gap: 4px;
  width: 100%;
  padding: 0;
}

.hall-league-trigger--hero .hall-league-progress__heading {
  align-items: flex-end;
  gap: 5px;
  width: 100%;
  min-width: 0;
}

.hall-league-trigger--hero .hall-league-progress__heading small {
  color: #d0c5ae;
  text-align: left;
  flex: auto;
  min-width: 0;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.05;
}

.hall-league-trigger--hero .hall-league-progress__heading strong {
  color: #f0d18a;
  text-align: right;
  flex: none;
  margin-left: auto;
  font-size: 14px;
  line-height: 1;
}

.hall-league-trigger--hero .hall-league-progress__track {
  width: 100%;
  padding: 2px 0;
}

.hall-league-trigger--hero .hall-league-progress__track i {
  height: 8px;
}

.hall-league-trigger--hero .hall-league-progress__remaining, .hall-league-trigger--hero .hall-league-progress__threshold {
  font-size: 9px;
  line-height: 1.05;
}

.hall-league-trigger--hero .hall-league-progress em {
  font-size: 8px;
}

.hall-league-panel {
  z-index: 60;
  width: 100%;
  max-height: calc(100svh - var(--cs-hud-top, 24px) - var(--cs-hud-bottom, 12px) - 24px);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  position: absolute;
  top: 100%;
  left: 0;
  transform: none;
  box-shadow: 0 18px 45px #000b, inset 0 -1px #6ab0d422;
}

.hall-league-panel > .hall-league-value {
  margin-top: 0;
}

@media (max-width: 390px) {
  .game-shell[data-hall-mode="normal"] .upper-hud__league {
    width: 100%;
  }

  .hall-league-trigger--hero .hall-league-hero {
    grid-template-columns: minmax(62px, .78fr) minmax(118px, 1.4fr) minmax(62px, .78fr);
  }
}

/* [project]/apps/web/src/app/particle-background.css [app-client] (css) */
.gameplay-background-shell {
  isolation: isolate;
  background-color: #05090d;
  background-image: linear-gradient(#090f16, #030609);
  position: relative;
}

.game-shell[data-hall-mode="normal"], .game-shell[data-hall-mode="edit"], .game-shell[data-hall-mode="edit"] > .hall-card, .game-shell[data-hall-mode="edit"] > .hall-card > .hall-edit-mode, .gameplay-surface, .storage-screen, .mining-status-screen {
  background-color: #0000;
  background-image: none;
}

.game-shell[data-hall-mode="edit"] {
  padding-top: calc(var(--cs-hud-top) + 15px);
}

.game-shell[data-hall-mode="normal"]:before, .game-shell[data-hall-mode="normal"]:after, .gameplay-surface:before, .gameplay-surface:after, .storage-screen:before, .storage-screen:after, .mining-status-screen:before, .mining-status-screen:after {
  content: none;
  animation: none;
}

.particle-background {
  width: 100%;
  height: var(--cs-stable-background-height, 100vh);
  z-index: -1;
  pointer-events: none;
  position: fixed;
  inset: 0 0 auto;
}

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