:root {
  --ink: #f2e8cc;
  --muted: #bfaf8d;
  --panel: rgb(27 29 20 / 94%);
  --panel-deep: #15180f;
  --line: #80653a;
  --line-soft: rgb(199 161 84 / 26%);
  --gold: #e1ae42;
  --gold-bright: #ffd36b;
  --green: #70ae40;
  --green-light: #a5e56b;
  --plastic: #4397d1;
  --metal: #e0a21f;
  --glass: #63ad40;
  --organic: #79528d;
  --danger: #db7051;
  --shadow: 0 18px 38px rgb(0 0 0 / 55%);
}

/* Global 1280x720 responsive safety layer. */
:root {
  --design-min-width: 1280px;
  --design-min-height: 720px;
  --menu-edge-gap: clamp(6px, 1vw, 16px);
}

.window-backdrop {
  padding:
    max(var(--menu-edge-gap), env(safe-area-inset-top))
    max(var(--menu-edge-gap), env(safe-area-inset-right))
    max(var(--menu-edge-gap), env(safe-area-inset-bottom))
    max(var(--menu-edge-gap), env(safe-area-inset-left));
}

.game-window {
  max-width: calc(100vw - (var(--menu-edge-gap) * 2)) !important;
  max-height: calc(var(--app-height, 100dvh) - (var(--menu-edge-gap) * 2)) !important;
  min-width: 0;
  min-height: 0;
}

.game-window,
.game-window * {
  max-inline-size: 100%;
}

.game-window button,
.game-window input,
.game-window select {
  min-width: 0;
}

.game-window button {
  overflow-wrap: anywhere;
}

.window-content {
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #55aee8 #111b21;
}

.window-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.window-content::-webkit-scrollbar-track {
  background: #111b21;
}

.window-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #55aee8;
}

.window-content > *,
.window-content section,
.window-content article,
.window-content aside,
.window-content main,
.window-content div {
  min-width: 0;
}

.game-window:not(.transformer-window):not(.match-window) .window-content {
  overflow: auto !important;
}

.compact-1280 .game-window:not(.transformer-window):not(.match-window) {
  width: calc(100vw - (var(--menu-edge-gap) * 2)) !important;
  height: calc(var(--app-height, 100dvh) - (var(--menu-edge-gap) * 2)) !important;
  aspect-ratio: auto !important;
}

.compact-1280 .shop-window .window-content,
.compact-1280 .profile-window .window-content,
.compact-1280 .storage-window .window-content,
.compact-1280 .research-window .window-content,
.compact-1280 .power-window .window-content {
  height: calc(100% - clamp(50px, 9vh, 82px)) !important;
  max-height: none !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

.compact-1280 .shop-window .window-content > *,
.compact-1280 .profile-window .window-content > *,
.compact-1280 .storage-window .window-content > *,
.compact-1280 .research-window .window-content > *,
.compact-1280 .power-window .window-content > * {
  height: auto !important;
  min-height: 100%;
}

.compact-1280 .game-window.match-window,
.compact-1280 .game-window.transformer-window {
  width: auto !important;
  height: min(96%, calc(var(--app-height, 100dvh) - (var(--menu-edge-gap) * 2))) !important;
}

.compact-1280 .match-window .window-content {
  overflow: auto !important;
}

.compact-1280 .match-game {
  min-width: min(100%, 860px);
  min-height: min(100%, 560px);
}

.compact-1280 .transformer-window .window-content {
  overflow: auto !important;
}

@media (max-width: 1280px), (max-height: 720px) {
  html {
    font-size: clamp(11px, 1.25vw, 15px);
  }

  .game-window .window-titlebar {
    min-height: clamp(48px, 9vh, 70px);
  }

  .game-window .close-button {
    min-width: 38px;
    min-height: 38px;
  }

  .game-window .window-content {
    padding: clamp(6px, 1vw, 12px);
  }

  .game-window button {
    min-height: 28px;
  }
}

@media (min-width: 1281px) and (min-height: 721px) {
  .wide-game .game-window {
    max-width: min(98vw, 1720px) !important;
    max-height: min(96dvh, 1060px) !important;
  }
}

/* Power station exact-reference lock v106. Keep this block last. */
.game-window.power-window {
  width: min(98vw, calc(96dvh * 1.5)) !important;
  height: min(96dvh, calc(98vw / 1.5)) !important;
  max-width: 1536px !important;
  max-height: 1024px !important;
  aspect-ratio: 1.5;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #020505 !important;
  box-shadow: 0 32px 90px #000 !important;
}

.power-window .window-titlebar {
  display: none !important;
}

.power-window .window-content {
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #020505 !important;
}

.refpower-screen {
  box-sizing: border-box;
  width: 100%;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  position: relative;
  overflow: hidden;
  padding: 3.9% 3.6% 1.5% !important;
  display: grid !important;
  grid-template-rows: 9.8% minmax(0, 1fr) 10.3% !important;
  gap: 1.05% !important;
  color: #eef1eb;
  background:
    radial-gradient(circle at 15% 0%, rgb(21 107 130 / 20%), transparent 38%),
    linear-gradient(145deg, #071012, #030607 70%) !important;
}

.refpower-screen::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 2.2% 2.1% 8.2%;
  z-index: 0;
  border: 2px solid rgb(82 98 103 / 72%);
  box-shadow:
    inset 0 0 0 2px rgb(0 0 0 / 80%),
    inset 0 0 34px rgb(0 0 0 / 70%),
    0 0 0 3px rgb(8 13 14 / 94%);
}

.refpower-header,
.refpower-body,
.refpower-tabs {
  position: relative;
  z-index: 1;
}

.refpower-header {
  min-width: 0;
  min-height: 0;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0.8% 0 0 !important;
  display: grid !important;
  grid-template-columns: 39% minmax(0, 1fr) 7.5% !important;
  gap: 1% !important;
  align-items: center;
  background: transparent !important;
  box-shadow: none !important;
}

.refpower-header::after {
  display: none !important;
}

.refpower-brand {
  min-width: 0;
  height: 100%;
  gap: 3%;
  align-items: center;
}

.refpower-emblem {
  width: auto !important;
  height: 142% !important;
  aspect-ratio: 1;
  margin-left: -7%;
  flex: none;
  border: 4px solid #4b565a !important;
  border-radius: 50%;
  color: #ffd128;
  background:
    radial-gradient(circle, rgb(255 178 23 / 30%), transparent 58%),
    #071013 !important;
  font-size: clamp(3rem, 5vw, 5.6rem) !important;
  filter: drop-shadow(0 5px 5px #000);
  box-shadow:
    0 0 0 5px #11191b,
    inset 0 0 24px #000,
    0 0 18px rgb(255 174 28 / 28%) !important;
}

.refpower-brand h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #f1f3ef;
  font-size: clamp(2.2rem, 4vw, 4rem) !important;
  line-height: 0.95;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-shadow: 0 4px 0 #050707;
  white-space: nowrap;
}

.refpower-rail {
  height: 35%;
  align-self: center;
  position: relative;
  border: 2px solid #3d494d !important;
  border-radius: 4px !important;
  padding: 0 !important;
  background:
    linear-gradient(180deg, #222b2e, #080d0e 55%, #1b2325),
    repeating-linear-gradient(90deg, transparent 0 38px, rgb(255 255 255 / 4%) 38px 40px) !important;
  box-shadow: inset 0 0 0 2px #060909, 0 3px 4px #000 !important;
}

.refpower-rail > i {
  left: 1.3%;
  right: 1.3%;
  top: 19%;
  height: 17%;
  background: linear-gradient(90deg, #ffad11 0 17%, #283436 17% 100%) !important;
}

.refpower-header-chips {
  display: none !important;
}

.refpower-close {
  width: 62% !important;
  height: auto !important;
  aspect-ratio: 1;
  justify-self: center !important;
  border: 3px solid #80402b !important;
  border-radius: 7px !important;
  color: #ff895b;
  background: linear-gradient(#a94728, #51160e) !important;
  font-size: clamp(1.5rem, 2.5vw, 2.7rem) !important;
  box-shadow: 0 0 0 5px #151d1f, inset 0 0 0 2px rgb(255 190 105 / 22%) !important;
}

.refpower-body {
  min-width: 0;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 35.5% 32.5% minmax(0, 1fr) !important;
  gap: 0.9% !important;
  align-items: stretch !important;
}

.refpower-frame {
  min-width: 0;
  min-height: 0;
  border: 2px solid #303e42 !important;
  border-radius: 3px !important;
  padding: 1.8% !important;
  overflow: hidden !important;
  background:
    linear-gradient(145deg, rgb(8 17 18 / 94%), rgb(2 7 8 / 97%)),
    repeating-linear-gradient(135deg, transparent 0 12px, rgb(255 255 255 / 2%) 12px 24px) !important;
  box-shadow: inset 0 0 0 1px #050808, inset 0 0 22px #000 !important;
}

.refpower-frame::after {
  display: none !important;
}

.refpower-frame h3 {
  min-height: 7.5%;
  margin: -1.8% -1.8% 1.7% !important;
  padding: 0 4% !important;
  border-bottom: 2px solid #344246;
  display: flex;
  align-items: center;
  color: #fbbd26;
  background: linear-gradient(90deg, rgb(17 30 32 / 98%), rgb(5 11 12 / 98%));
  font-size: clamp(0.8rem, 1.22vw, 1.3rem) !important;
  line-height: 1;
}

.refpower-overview {
  height: 100%;
  display: grid !important;
  grid-template-rows: 7% 46% 10% 19% 13% !important;
  gap: 1.3% !important;
}

.refpower-plant {
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  background: transparent !important;
}

.refpower-plant img {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  max-height: none !important;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.04) drop-shadow(0 9px 9px #000);
}

.refpower-level {
  min-width: 0;
  grid-template-columns: 14% minmax(0, 1fr) !important;
  gap: 2.5% !important;
}

.refpower-level > strong {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  font-size: clamp(1.2rem, 2vw, 2.1rem) !important;
}

.refpower-level span,
.refpower-level b {
  font-size: clamp(0.58rem, 0.88vw, 0.98rem) !important;
}

.refpower-level i,
.refpower-generator-row i,
.refpower-storage i,
.refpower-fuel i {
  height: clamp(9px, 1vw, 15px) !important;
  border-radius: 3px !important;
}

.refpower-level em {
  background: linear-gradient(90deg, #e9a713, #ffd648) !important;
}

.refpower-generator-row em,
.refpower-storage em,
.refpower-fuel em {
  background: linear-gradient(90deg, #67b711, #9ef02e) !important;
}

.refpower-mini-stats {
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  border-radius: 3px !important;
}

.refpower-mini-stats article {
  min-width: 0;
  min-height: 0 !important;
  padding: 4% !important;
  gap: 4% !important;
}

.refpower-mini-stats span {
  width: 24% !important;
  max-width: 34px;
  height: auto !important;
  aspect-ratio: 1;
}

.refpower-mini-stats small {
  font-size: clamp(0.38rem, 0.61vw, 0.68rem) !important;
}

.refpower-mini-stats strong {
  font-size: clamp(0.54rem, 0.76vw, 0.86rem) !important;
}

.refpower-upgrade {
  min-height: 0 !important;
  height: 100%;
  border-radius: 4px !important;
  font-size: clamp(0.9rem, 1.5vw, 1.55rem) !important;
}

.refpower-upgrade small {
  font-size: clamp(0.48rem, 0.68vw, 0.74rem) !important;
}

.refpower-mid {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid !important;
  grid-template-rows: 65% minmax(0, 1fr) !important;
  gap: 1.5% !important;
}

.refpower-generators {
  min-height: 0;
  display: grid !important;
  grid-template-rows: 7% 31% 31% minmax(0, 1fr) !important;
  gap: 1.3% !important;
}

.refpower-generator-row {
  min-width: 0;
  min-height: 0 !important;
  height: 100%;
  border-radius: 3px !important;
  padding: 1.8% !important;
  grid-template-columns: 10% 35% minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr);
  gap: 2% !important;
}

.refpower-generator-row > b {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  font-size: clamp(0.6rem, 1vw, 1.05rem);
}

.refpower-generator-row img {
  width: 100%;
  height: 100%;
  max-height: none !important;
  object-fit: contain;
}

.refpower-generator-row div {
  min-width: 0;
}

.refpower-generator-row span,
.refpower-generator-row small {
  font-size: clamp(0.42rem, 0.62vw, 0.69rem) !important;
}

.refpower-generator-row strong {
  margin: 2% 0 !important;
  font-size: clamp(0.72rem, 1.15vw, 1.25rem) !important;
}

.refpower-generator-row button {
  position: absolute;
  right: 2%;
  bottom: 3%;
  min-width: 21%;
  min-height: 22px !important;
  padding: 1% 2% !important;
  font-size: clamp(0.4rem, 0.58vw, 0.65rem) !important;
}

.refpower-generator-locked {
  grid-template-columns: 12% minmax(0, 1fr) !important;
}

.refpower-storage {
  min-height: 0;
  display: grid !important;
  grid-template-rows: 13% minmax(0, 1fr) auto !important;
  gap: 1% !important;
}

.refpower-storage article {
  min-height: 0;
  grid-template-columns: 48% minmax(0, 1fr) !important;
  gap: 3% !important;
}

.refpower-storage article img {
  width: 100%;
  height: 100%;
  max-height: none !important;
  object-fit: contain;
}

.refpower-storage span,
.refpower-storage small,
.refpower-storage b {
  font-size: clamp(0.42rem, 0.64vw, 0.7rem) !important;
}

.refpower-storage strong {
  font-size: clamp(0.78rem, 1.25vw, 1.35rem) !important;
}

.refpower-storage-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 2% !important;
}

.refpower-storage-actions button {
  min-height: 26px !important;
  padding: 2% !important;
  font-size: clamp(0.38rem, 0.56vw, 0.62rem) !important;
}

.refpower-right {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid !important;
  grid-template-rows: 43% 23% minmax(0, 1fr) !important;
  gap: 1.5% !important;
}

.refpower-fuel {
  min-height: 0;
  display: grid !important;
  grid-template-rows: 15% 44% minmax(0, 1fr) !important;
  gap: 1.5% !important;
}

.refpower-fuel article {
  min-height: 0;
  grid-template-columns: 39% minmax(0, 1fr) !important;
  gap: 3% !important;
}

.refpower-fuel img {
  width: 100%;
  height: 100%;
  max-height: none !important;
  object-fit: contain;
}

.refpower-fuel strong {
  font-size: clamp(0.78rem, 1.25vw, 1.35rem) !important;
}

.refpower-fuel-actions {
  min-height: 0;
  grid-template-columns: 1fr !important;
  gap: 3% !important;
}

.refpower-fuel-actions button {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 2% !important;
  font-size: clamp(0.46rem, 0.72vw, 0.78rem) !important;
}

.refpower-fuel-actions button[data-action="load-biodiesel"] {
  border-color: #ffc233 !important;
  background: linear-gradient(#f5bd25, #9b5c06) !important;
}

.refpower-produced,
.refpower-bonuses {
  min-height: 0;
  display: grid !important;
  grid-template-rows: 18% repeat(2, minmax(0, 1fr)) !important;
  gap: 2% !important;
}

.refpower-produced article,
.refpower-bonuses article {
  min-width: 0;
  min-height: 0 !important;
  padding: 2.5% !important;
  grid-template-columns: 13% minmax(0, 1fr) auto !important;
  gap: 3% !important;
  border-radius: 3px !important;
}

.refpower-produced span,
.refpower-bonuses span {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
}

.refpower-produced b,
.refpower-bonuses b,
.refpower-produced strong,
.refpower-bonuses strong,
.refpower-bonuses small {
  font-size: clamp(0.44rem, 0.68vw, 0.75rem) !important;
}

.refpower-tabs {
  min-width: 0;
  min-height: 0;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 0.45% !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 4.3% !important;
  background: transparent !important;
  box-shadow: none !important;
}

.refpower-tabs button {
  min-width: 0;
  min-height: 0 !important;
  height: 100%;
  border: 2px solid #354247 !important;
  border-radius: 4px !important;
  padding: 2% !important;
  color: #e0e4de;
  background:
    linear-gradient(180deg, rgb(28 35 37 / 98%), rgb(6 10 11 / 99%)),
    repeating-linear-gradient(90deg, transparent 0 26px, rgb(255 255 255 / 2%) 26px 28px) !important;
  font-size: clamp(0.48rem, 0.78vw, 0.86rem) !important;
  font-weight: 900;
}

.refpower-tabs button:hover,
.refpower-tabs button:first-child {
  border-color: #d89a18 !important;
  color: #ffe093;
  background: radial-gradient(circle at 50% 30%, rgb(255 185 35 / 28%), transparent 58%), #211505 !important;
}

@media (max-width: 1100px), (max-height: 720px) {
  .game-window.power-window {
    width: calc(100vw - 12px) !important;
    height: calc(var(--app-height, 100dvh) - 12px) !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto;
  }

  .power-window .window-content {
    overflow: auto !important;
  }

  .refpower-screen {
    min-width: 1060px !important;
    min-height: 700px !important;
  }
}

/* Power station reference layout v105: dark metal frame, fixed three columns and bottom console. */
.game-window.power-window {
  width: min(98vw, 1536px) !important;
  height: min(97dvh, 1024px) !important;
  border: 2px solid #374247;
  border-radius: 18px;
  overflow: hidden;
  background: #020505;
  box-shadow:
    0 30px 80px rgb(0 0 0 / 82%),
    0 0 0 3px #111719,
    inset 0 0 0 2px rgb(255 181 35 / 20%);
}

.power-window .window-content {
  height: 100% !important;
  padding: 0 !important;
  overflow: auto !important;
  background:
    linear-gradient(90deg, rgb(1 5 5 / 90%), rgb(3 10 10 / 67%) 46%, rgb(1 5 5 / 92%)),
    radial-gradient(circle at 50% 0, rgb(255 178 31 / 11%), transparent 38%),
    url("assets/power/tesis-guc-istasyonu.png?v=1") center / cover fixed no-repeat;
}

.refpower-screen {
  width: 100%;
  min-width: 1080px;
  min-height: 100%;
  height: auto;
  padding: clamp(10px, 1.1vw, 17px);
  display: grid;
  grid-template-rows: clamp(78px, 7vw, 104px) minmax(650px, 1fr) clamp(64px, 6vw, 84px);
  gap: clamp(8px, 0.75vw, 12px);
  background:
    linear-gradient(90deg, transparent 0 49.7%, rgb(255 174 22 / 10%) 49.9% 50.1%, transparent 50.3%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 1.5%) 0 1px, transparent 1px 4px);
}

.refpower-header {
  min-width: 0;
  border: 2px solid #49555a;
  border-radius: 13px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: minmax(360px, 39%) minmax(0, 1fr) 68px;
  align-items: center;
  gap: 12px;
  background:
    linear-gradient(180deg, rgb(31 37 39 / 98%), rgb(6 10 11 / 99%)),
    repeating-linear-gradient(90deg, transparent 0 35px, rgb(255 255 255 / 2%) 35px 37px);
}

.refpower-brand {
  min-width: 0;
  gap: clamp(10px, 1vw, 17px);
}

.refpower-emblem {
  width: clamp(66px, 6vw, 92px);
  height: clamp(66px, 6vw, 92px);
  flex: none;
  border: 4px solid #455158;
  box-shadow:
    0 0 0 4px #101719,
    0 0 20px rgb(255 176 28 / 25%),
    inset 0 0 24px rgb(0 0 0 / 65%);
}

.refpower-brand h2 {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(2rem, 3.7vw, 3.85rem);
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refpower-rail {
  height: 52px;
  position: relative;
  border: 2px solid #313d41;
  border-radius: 6px;
  padding: 5px 7px;
  display: grid;
  align-items: center;
  background:
    linear-gradient(180deg, #151c1e, #05090a),
    repeating-linear-gradient(90deg, transparent 0 30px, rgb(255 255 255 / 3%) 30px 32px);
  box-shadow: inset 0 0 12px #000;
}

.refpower-rail > i {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 5px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb219 0 18%, #334144 18% 100%);
  box-shadow: 0 0 8px rgb(255 171 24 / 42%);
}

.refpower-header-chips {
  min-width: 0;
  margin-top: 5px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.refpower-chip {
  height: 34px;
  min-width: 0;
  border: 0;
  border-right: 1px solid #354144;
  border-radius: 0;
  padding: 2px 5px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px;
  background: transparent;
  box-shadow: none;
}

.refpower-chip:last-child {
  border-right: 0;
}

.refpower-chip span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.refpower-chip span img {
  width: 128%;
  height: 128%;
}

.refpower-chip small {
  font-size: 0.47rem;
}

.refpower-chip strong {
  font-size: clamp(0.62rem, 0.72vw, 0.84rem);
}

.refpower-chip button {
  display: none;
}

.refpower-close {
  width: 58px;
  height: 58px;
  border: 3px solid #803c27;
  border-radius: 8px;
  color: #ff8a56;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 10%), transparent 42%),
    linear-gradient(#a43c20, #43140d);
  box-shadow: 0 0 0 4px #151c1e, inset 0 0 0 2px rgb(255 190 102 / 25%);
}

.refpower-body {
  min-width: 0;
  min-height: 650px;
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(310px, 36%) minmax(390px, 1fr) minmax(285px, 27%);
  gap: clamp(8px, 0.75vw, 12px);
  overflow: visible;
}

.refpower-frame {
  border: 2px solid #334146;
  border-radius: 6px;
  padding: clamp(8px, 0.75vw, 12px);
  background:
    linear-gradient(145deg, rgb(12 20 21 / 97%), rgb(3 8 9 / 99%)),
    repeating-linear-gradient(135deg, transparent 0 12px, rgb(255 255 255 / 2%) 12px 24px);
}

.refpower-frame h3 {
  margin: calc(clamp(8px, 0.75vw, 12px) * -1) calc(clamp(8px, 0.75vw, 12px) * -1) 8px;
  min-height: 42px;
  padding: 0 14px;
  border-bottom: 2px solid #344348;
  display: flex;
  align-items: center;
  color: #ffc02b;
  background: linear-gradient(90deg, rgb(20 31 33 / 98%), rgb(7 13 14 / 98%));
  font-size: clamp(0.86rem, 1.15vw, 1.25rem);
}

.refpower-overview {
  grid-template-rows: auto minmax(245px, 1fr) auto auto auto;
  gap: 8px;
}

.refpower-plant {
  min-height: 245px;
  border-color: #24434d;
  background: #020809;
}

.refpower-plant img {
  min-height: 245px;
  object-fit: cover;
}

.refpower-level {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 9px;
}

.refpower-level > strong {
  width: 58px;
  height: 58px;
  font-size: 1.85rem;
}

.refpower-level i,
.refpower-generator-row i,
.refpower-storage i,
.refpower-fuel i {
  height: 15px;
}

.refpower-level em,
.refpower-generator-row em,
.refpower-storage em,
.refpower-fuel em {
  background: linear-gradient(90deg, #6eba15, #9ff02e);
}

.refpower-level em {
  background: linear-gradient(90deg, #eaa917, #ffd94a);
}

.refpower-mini-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.refpower-mini-stats article {
  min-height: 54px;
  padding: 6px;
}

.refpower-mini-stats span {
  width: 30px;
  height: 30px;
}

.refpower-mini-stats small {
  font-size: 0.56rem;
}

.refpower-mini-stats strong {
  font-size: clamp(0.68rem, 0.82vw, 0.92rem);
}

.refpower-upgrade {
  min-height: 65px;
}

.refpower-mid {
  min-width: 0;
  grid-template-rows: minmax(370px, 58%) minmax(220px, 1fr);
  gap: clamp(8px, 0.75vw, 12px);
}

.refpower-generators {
  grid-template-rows: auto repeat(2, minmax(116px, 1fr)) 82px;
  gap: 8px;
}

.refpower-generator-row {
  min-height: 132px;
  grid-template-columns: 42px minmax(120px, 32%) minmax(0, 1fr) minmax(64px, 78px);
  gap: 8px;
}

.refpower-generator-row img {
  max-height: 120px;
}

.refpower-generator-locked {
  min-height: 82px;
  grid-template-columns: 46px minmax(0, 1fr);
  justify-content: center;
  border-color: #30383b;
  color: #858d8d;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 2%) 0 10px, transparent 10px 20px),
    #080d0e;
}

.refpower-generator-locked > b {
  color: #909899;
  border-color: #4a5355;
}

.refpower-generator-locked strong {
  color: #909899;
  font-size: clamp(0.75rem, 1vw, 1.08rem);
}

.refpower-generator-row strong,
.refpower-storage strong,
.refpower-fuel strong {
  font-size: clamp(0.98rem, 1.35vw, 1.52rem);
}

.refpower-storage {
  grid-template-rows: auto minmax(135px, 1fr) auto;
}

.refpower-storage article {
  grid-template-columns: minmax(130px, 42%) minmax(0, 1fr);
}

.refpower-storage article img {
  max-height: 155px;
}

.refpower-right {
  min-width: 0;
  grid-template-rows: minmax(270px, 42%) minmax(145px, 23%) minmax(190px, 1fr);
  gap: clamp(8px, 0.75vw, 12px);
}

.refpower-fuel {
  grid-template-rows: auto minmax(115px, 1fr) auto;
}

.refpower-fuel article {
  grid-template-columns: minmax(105px, 40%) minmax(0, 1fr);
}

.refpower-fuel img {
  max-height: 132px;
}

.refpower-fuel-actions {
  grid-template-columns: 1fr;
  gap: 6px;
}

.refpower-fuel-actions button {
  height: 45px;
  min-height: 45px;
  max-height: 45px;
}

.refpower-produced,
.refpower-bonuses {
  min-height: 0;
  align-content: start;
}

.refpower-produced article,
.refpower-bonuses article {
  min-height: 50px;
  padding: 7px;
}

.refpower-bonuses article span {
  background: linear-gradient(#9bed38, #34770d);
}

.refpower-tabs {
  min-width: 0;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  padding: 6px 8px;
  border: 2px solid #354247;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgb(18 25 27 / 98%), rgb(3 7 8 / 99%)),
    repeating-linear-gradient(90deg, transparent 0 40px, rgb(255 255 255 / 2%) 40px 42px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 10px 24px rgb(0 0 0 / 48%);
}

.refpower-tabs button {
  min-height: 50px;
  border: 1px solid #354145;
  border-radius: 5px;
  color: #dce2de;
  background: linear-gradient(#20282b, #090e0f);
  font-size: clamp(0.62rem, 0.78vw, 0.88rem);
}

.refpower-tabs button:hover,
.refpower-tabs button:first-child {
  border-color: #d79416;
  color: #ffe293;
  background:
    radial-gradient(circle at 50% 30%, rgb(255 181 35 / 25%), transparent 58%),
    linear-gradient(#4f3509, #191006);
}

@media (max-width: 1099px) {
  .refpower-screen {
    min-width: 0;
    grid-template-rows: auto auto auto;
  }

  .refpower-header {
    grid-template-columns: minmax(0, 1fr) 56px;
  }

  .refpower-rail {
    grid-column: 1 / -1;
  }

  .refpower-body {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .refpower-overview,
  .refpower-mid,
  .refpower-right {
    grid-template-rows: none;
  }

  .refpower-tabs {
    display: flex !important;
    overflow-x: auto;
  }

  .refpower-tabs button {
    flex: 0 0 120px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #101409;
  color: var(--ink);
  font-family: "Segoe UI", "Arial Narrow", Arial, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: -26px;
  z-index: -1;
  background:
    linear-gradient(rgb(12 16 8 / 62%), rgb(12 16 8 / 62%)),
    url("assets/anasayfason.png") center / cover no-repeat;
  filter: blur(16px);
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  color: inherit;
  cursor: pointer;
}

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

.stage {
  width: 100vw;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100vh);
  position: relative;
  overflow: hidden;
  background: #192414;
  box-shadow: 0 0 55px #050700;
}

.yard-art,
.scene-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.yard-art {
  object-fit: cover;
  user-select: none;
}

.scene-shade {
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 30%), transparent 20%, transparent 69%, rgb(0 0 0 / 25%)),
    radial-gradient(circle at 50% 45%, transparent 47%, rgb(0 0 0 / 16%));
}

.panel-kicker {
  color: #d8bd78;
  font-size: clamp(0.55rem, 0.66vw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hud-top {
  position: absolute;
  left: 0.85%;
  top: 1.25%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(4px, 0.52vw, 8px);
}

.profile-plate {
  width: clamp(205px, 19.2vw, 345px);
  height: clamp(52px, 4.85vw, 87px);
  padding: 0;
  display: flex;
  align-items: center;
  background: url("assets/profil.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 5px rgb(0 0 0 / 48%));
}

.profile-level {
  width: 22%;
  margin-left: 2.3%;
  color: #f4e9ba;
  font-size: clamp(1.15rem, 1.7vw, 1.9rem);
  font-weight: 800;
  text-shadow: 0 2px 2px #19200d;
}

.profile-copy {
  width: 70%;
  padding-left: 5%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  color: #e9dbb5;
  text-shadow: 0 2px 2px rgb(0 0 0 / 75%);
}

.profile-copy strong {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(0.8rem, 1.16vw, 1.38rem);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-copy small {
  color: #dac18d;
  font-size: clamp(0.5rem, 0.67vw, 0.8rem);
  letter-spacing: 0.12em;
}

.resource-bar {
  height: clamp(30px, 2.95vw, 50px);
  padding: 0 clamp(7px, 0.8vw, 14px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.22vw, 24px);
  border: 1px solid #66502b;
  border-radius: 5px;
  background: rgb(18 21 12 / 90%);
  box-shadow: var(--shadow);
}

.resource-bar div {
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.42vw, 7px);
  color: #eee1bd;
  font-size: clamp(0.64rem, 0.85vw, 1rem);
}

.resource-icon {
  width: clamp(12px, 1.05vw, 18px);
  height: clamp(12px, 1.05vw, 18px);
  display: inline-block;
}

.coin-icon {
  display: inline-grid;
  place-items: center;
}

.coin-icon img {
  width: 135%;
  height: 135%;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgb(250 190 39 / 55%));
}

.diamond-icon {
  display: inline-grid;
  place-items: center;
}

.diamond-icon img {
  width: 160%;
  height: 160%;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgb(64 211 255 / 62%));
}

.coin-amount,
.diamond-amount,
.star-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  vertical-align: middle;
  white-space: nowrap;
}

.coin-amount img,
.diamond-amount img,
.star-amount img {
  width: 1.3em;
  height: 1.3em;
  flex: none;
  object-fit: contain;
}

.coin-amount img {
  filter: drop-shadow(0 0 3px rgb(250 190 39 / 42%));
}

.diamond-amount img {
  filter: drop-shadow(0 0 3px rgb(64 211 255 / 46%));
}

.star-amount img {
  filter: drop-shadow(0 0 3px rgb(255 208 39 / 48%));
}

.star-icon {
  display: inline-grid;
  place-items: center;
}

.star-icon img {
  width: 175%;
  height: 175%;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgb(255 210 54 / 62%));
}

.leaf-icon {
  border-radius: 80% 8% 80% 8%;
  transform: rotate(-35deg);
  background: var(--green);
}

.box-icon {
  border-radius: 2px;
  background: #bd8b43;
  clip-path: polygon(50% 0, 100% 27%, 100% 82%, 50% 100%, 0 82%, 0 27%);
}

.day-icon {
  border-radius: 50%;
  border: 2px solid #79b646;
  position: relative;
}

.day-icon::after {
  content: "";
  width: 42%;
  height: 2px;
  position: absolute;
  left: 48%;
  top: 48%;
  background: #b9e28d;
  transform-origin: left center;
  transform: rotate(-40deg);
}

.machine-zone {
  position: absolute;
  z-index: 2;
  height: auto;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 4px 5px rgb(0 0 0 / 65%));
  transition: filter 150ms ease, transform 150ms ease;
  animation: site-signal 8s ease-in-out infinite;
}

.machine-zone img {
  width: 100%;
  display: block;
  pointer-events: none;
}

.machine-zone:hover,
.machine-zone:focus-visible {
  filter: brightness(1.2) drop-shadow(0 0 14px rgb(255 214 68 / 95%));
  transform: scale(1.035);
  outline: none;
}

@keyframes site-signal {
  0%,
  74%,
  100% {
    filter: drop-shadow(0 4px 5px rgb(0 0 0 / 65%));
  }
  80% {
    filter: brightness(1.18) drop-shadow(0 0 13px rgb(255 198 42 / 84%));
  }
  84% {
    filter: brightness(1.05) drop-shadow(0 4px 5px rgb(0 0 0 / 65%));
  }
  89% {
    filter: brightness(1.22) drop-shadow(0 0 17px rgb(255 214 78 / 95%));
  }
}

.machine-zone.plastic {
  top: 34.7%;
  left: 24.2%;
  width: 15%;
  animation-delay: 0s;
}

.machine-zone.metal {
  top: 34.7%;
  left: 42.55%;
  width: 15%;
  animation-delay: -2.1s;
}

.machine-zone.glass {
  top: 34.7%;
  left: 61.15%;
  width: 15%;
  animation-delay: -4.2s;
}

.machine-zone.organic {
  top: 61%;
  left: 24.3%;
  width: 15%;
  animation-delay: -1.1s;
}

.machine-zone.paper {
  top: 61%;
  left: 42.65%;
  width: 15%;
  animation-delay: -3.2s;
}

.machine-zone.power {
  top: 61%;
  left: 61.15%;
  width: 15%;
  animation-delay: -5.3s;
}

.machine-zone.depot {
  top: 81.5%;
  left: 37.1%;
  width: 14.5%;
  animation-delay: -4.4s;
}

.machine-zone.laboratory {
  top: 81.5%;
  left: 55.3%;
  width: 14.5%;
  animation-delay: -6.4s;
}

.market-stock {
  margin-bottom: clamp(10px, 1vw, 17px);
}

.market-heading {
  margin: clamp(14px, 1.2vw, 20px) 0 clamp(8px, 0.8vw, 13px);
  color: var(--gold-bright);
  font-size: clamp(0.82rem, 1vw, 1.12rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.facility-panel {
  position: absolute;
  bottom: clamp(72px, 8.3vw, 132px);
  right: 1.18%;
  width: clamp(150px, 12.4vw, 225px);
  padding: clamp(9px, 0.9vw, 16px);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

/* Main screen cleanup: hide the right facility info card without breaking HUD logic. */
.facility-panel {
  display: none;
}

.facility-row {
  margin-top: clamp(8px, 0.9vw, 14px);
  color: var(--muted);
  font-size: clamp(0.56rem, 0.66vw, 0.75rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.facility-row strong {
  float: right;
  color: var(--green-light);
  font-size: clamp(0.65rem, 0.76vw, 0.86rem);
}

.facility-row.split {
  min-height: clamp(25px, 2.25vw, 37px);
  padding-top: clamp(6px, 0.7vw, 10px);
  border-top: 1px solid var(--line-soft);
}

.mini-meter {
  clear: both;
  height: clamp(4px, 0.36vw, 6px);
  margin-top: clamp(6px, 0.55vw, 10px);
  border-radius: 10px;
  background: #303223;
}

.mini-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #73ae3f, #46a547);
}

.energy-mini-meter i {
  background: linear-gradient(90deg, #ffd35a, #f59d18);
}

.facility-subtext {
  clear: both;
  display: block;
  margin-top: 3px;
  color: #d7b86e;
  font-size: clamp(0.43rem, 0.52vw, 0.62rem);
}

.delivery-card {
  clear: both;
  margin: clamp(6px, 0.7vw, 10px) calc(clamp(9px, 0.9vw, 16px) * -0.3) 0;
  padding: clamp(8px, 0.8vw, 12px);
  border: 1px solid rgb(199 161 84 / 22%);
  border-radius: 5px;
  background: rgb(39 37 23 / 75%);
}

.delivery-card strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: clamp(0.65rem, 0.75vw, 0.84rem);
}

.delivery-card > p:not(.panel-kicker) {
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: clamp(0.55rem, 0.62vw, 0.72rem);
  line-height: 1.35;
}

.gold-button,
.dark-button {
  min-height: clamp(28px, 2.45vw, 42px);
  border-radius: 4px;
  padding: clamp(6px, 0.62vw, 10px);
  font-size: clamp(0.63rem, 0.72vw, 0.83rem);
  font-weight: 750;
  transition: filter 130ms ease, transform 130ms ease;
}

.gold-button {
  width: 100%;
  color: #292212;
  background: linear-gradient(#f2c65a, #c18a2c);
}

.dark-button {
  color: var(--ink);
  border: 1px solid #655334;
  background: #363220;
}

.gold-button:hover:not(:disabled),
.dark-button:hover:not(:disabled) {
  filter: brightness(1.13);
  transform: translateY(-1px);
}

.shift-actions {
  margin-top: clamp(7px, 0.68vw, 11px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(4px, 0.4vw, 7px);
}

.shift-actions small {
  padding: 1px 4px;
  border-radius: 10px;
  background: #5c4829;
}

.truck-lane {
  width: 2.6%;
  height: 18%;
  position: absolute;
  left: 28.8%;
  bottom: 8.6%;
  z-index: 3;
  pointer-events: none;
}

.truck {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  bottom: -82%;
  opacity: 0;
  filter: drop-shadow(2px 5px 3px rgb(0 0 0 / 52%));
}

.truck.parked {
  bottom: 16%;
  opacity: 1;
}

.truck.entering {
  animation: truck-enter 1.4s ease-out both;
}

.truck.replacing {
  animation: truck-replace 2.5s ease-in-out both;
}

@keyframes truck-enter {
  0% {
    bottom: -82%;
    opacity: 0.45;
  }
  100% {
    bottom: 16%;
    opacity: 1;
  }
}

@keyframes truck-replace {
  0% {
    bottom: 16%;
    opacity: 1;
  }
  37% {
    bottom: -82%;
    opacity: 1;
  }
  43% {
    bottom: -82%;
    opacity: 0;
  }
  48% {
    bottom: -82%;
    opacity: 1;
  }
  100% {
    bottom: 16%;
    opacity: 1;
  }
}

.sorting-prompt {
  position: absolute;
  left: 50%;
  top: 10.7%;
  min-width: clamp(200px, 18.2vw, 330px);
  max-width: 21%;
  padding: clamp(7px, 0.62vw, 11px) clamp(10px, 0.8vw, 15px);
  border: 1px solid #72592f;
  border-radius: 6px;
  transform: translateX(-50%);
  text-align: center;
  background: rgb(21 23 14 / 91%);
  box-shadow: var(--shadow);
}

.sorting-prompt strong {
  display: block;
  margin: 4px 0 2px;
  color: #fff0bf;
  font-size: clamp(0.68rem, 0.8vw, 0.95rem);
}

.sorting-prompt > p:last-child {
  color: var(--muted);
  font-size: clamp(0.52rem, 0.61vw, 0.68rem);
}

.dock-menu,
.utility-menu {
  position: absolute;
  bottom: 1.4%;
  display: flex;
  border: 1px solid #69512a;
  border-radius: 6px;
  overflow: hidden;
  background: rgb(39 34 20 / 94%);
  box-shadow: var(--shadow);
}

.dock-menu {
  left: 0.95%;
}

.utility-menu {
  right: 0.95%;
}

.play-hud-button {
  position: absolute;
  top: 2.1%;
  right: 1.25%;
  z-index: 3;
  min-width: clamp(145px, 14vw, 248px);
  height: clamp(56px, 5.2vw, 82px);
  border: 1px solid #836331;
  border-radius: 7px;
  padding: clamp(5px, 0.45vw, 8px) clamp(8px, 0.8vw, 14px);
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.7vw, 12px);
  color: #f3e5bb;
  background: linear-gradient(180deg, rgb(63 64 29 / 96%), rgb(29 31 16 / 97%));
  box-shadow: var(--shadow);
  text-align: left;
  text-transform: uppercase;
}

.play-hud-button:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgb(84 86 34 / 98%), rgb(38 40 17 / 98%));
}

.play-symbol {
  width: clamp(40px, 3.7vw, 64px);
  height: clamp(40px, 3.7vw, 64px);
  flex: 0 0 auto;
  border-radius: 20%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #17130b;
  box-shadow: 0 0 0 1px rgb(255 216 69 / 82%), 0 0 13px rgb(255 151 0 / 44%);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.play-symbol img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.play-hud-button:hover .play-symbol,
.play-hud-button.active .play-symbol {
  transform: scale(1.08) rotate(-2deg);
  filter: brightness(1.12) saturate(1.12);
  box-shadow: 0 0 0 2px #ffe66b, 0 0 20px rgb(255 153 0 / 74%);
}

.play-hud-button strong {
  display: block;
  color: #ffe291;
  font-size: clamp(0.68rem, 0.83vw, 1rem);
}

.play-hud-button small {
  display: block;
  margin-top: 2px;
  color: #c6b489;
  font-size: clamp(0.45rem, 0.55vw, 0.66rem);
}

.dock-button,
.utility-button {
  width: clamp(56px, 5.45vw, 94px);
  height: clamp(50px, 4.84vw, 84px);
  border-right: 1px solid #65502e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(2px, 0.3vw, 6px);
  color: #e7d7ac;
  background: transparent;
  font-size: clamp(0.5rem, 0.63vw, 0.7rem);
  font-weight: 750;
  text-transform: uppercase;
}

.dock-button:last-child,
.utility-button:last-child {
  border-right: 0;
}

.dock-button:hover,
.utility-button:hover,
.dock-button.active {
  color: var(--gold-bright);
  background: rgb(126 94 42 / 28%);
}

.dock-button img {
  width: clamp(30px, 3.05vw, 55px);
  height: clamp(27px, 2.7vw, 49px);
  object-fit: contain;
}

.dock-button.asset-button {
  padding: 0;
}

.dock-button.asset-button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dock-button.letter-icon b {
  width: clamp(30px, 3vw, 54px);
  height: clamp(27px, 2.7vw, 48px);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #f2c55c;
  border: 1px solid #af8542;
  font-size: clamp(0.73rem, 1vw, 1.14rem);
}

.utility-button span {
  width: clamp(25px, 2.6vw, 47px);
  height: clamp(25px, 2.6vw, 47px);
  position: relative;
  display: block;
}

.upgrade-symbol::before {
  content: "↑";
  display: grid;
  place-items: center;
  height: 100%;
  color: #e4d1a5;
  font-size: clamp(1.45rem, 2vw, 2.4rem);
  font-weight: 900;
}

.person-symbol::before {
  content: "";
  width: 38%;
  height: 38%;
  position: absolute;
  top: 5%;
  left: 31%;
  border-radius: 50%;
  background: #dccda8;
}

.person-symbol::after {
  content: "";
  width: 76%;
  height: 45%;
  position: absolute;
  bottom: 5%;
  left: 12%;
  border-radius: 45% 45% 8px 8px;
  background: #dccda8;
}

.gear-symbol::before {
  content: "⚙";
  color: #ddcba2;
  font-size: clamp(1.4rem, 2.1vw, 2.6rem);
}

.event-strip {
  position: absolute;
  left: 27%;
  top: 2.2%;
  max-width: 40%;
  min-height: clamp(25px, 2.2vw, 38px);
  padding: 0 clamp(9px, 0.72vw, 13px);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  color: #ddcfac;
  background: rgb(20 22 13 / 70%);
  font-size: clamp(0.56rem, 0.68vw, 0.77rem);
  opacity: 0.94;
}

.event-strip .signal {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--green-light);
}

.part-craft-hud {
  width: clamp(245px, 22vw, 390px);
  min-height: clamp(78px, 7vw, 118px);
  position: absolute;
  left: 1%;
  bottom: clamp(92px, 8vw, 138px);
  z-index: 32;
  border: 1px solid rgb(231 184 68 / 68%);
  border-radius: 12px;
  padding: clamp(6px, 0.65vw, 10px);
  display: grid;
  grid-template-columns: clamp(62px, 6vw, 98px) minmax(0, 1fr);
  gap: clamp(7px, 0.7vw, 12px);
  color: #eee7d2;
  background:
    radial-gradient(circle at 12% 25%, rgb(255 197 61 / 18%), transparent 42%),
    linear-gradient(145deg, rgb(28 38 31 / 97%), rgb(7 13 12 / 98%));
  box-shadow: 0 14px 32px rgb(0 0 0 / 52%), inset 0 1px 0 rgb(255 255 255 / 13%);
  pointer-events: none;
}

.part-craft-hud.hidden {
  display: none;
}

.part-craft-hud .machine-part-image {
  min-height: clamp(62px, 6vw, 98px);
}

.part-craft-hud-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.part-craft-hud-copy span {
  color: #d9ab3b;
  font-size: clamp(0.46rem, 0.58vw, 0.68rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.part-craft-hud-copy strong {
  overflow: hidden;
  color: #fff0bd;
  font-size: clamp(0.64rem, 0.82vw, 0.98rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.part-craft-hud-copy small,
.part-craft-hud-copy em {
  color: #b8c7ae;
  font-size: clamp(0.4rem, 0.51vw, 0.61rem);
  font-style: normal;
}

.part-craft-hud-copy i {
  height: clamp(6px, 0.58vw, 9px);
  overflow: hidden;
  border-radius: 10px;
  background: #202c22;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 72%);
}

.part-craft-hud-copy i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #62a71d, #d6c840, #ff9f23);
  box-shadow: 0 0 9px rgb(212 195 60 / 48%);
  transition: width 500ms linear;
}

.stage:has(#welcome:not(.hidden)) .part-craft-hud {
  display: none;
}

@media (max-width: 780px), (max-height: 640px) and (max-width: 1180px) {
  .part-craft-hud {
    width: min(330px, calc(100vw - 16px));
    left: 8px;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + clamp(68px, 13vw, 88px));
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .part-craft-hud .machine-part-image {
    min-height: 64px;
  }
}

.window-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgb(10 12 7 / 58%);
}

.window-backdrop.hidden {
  display: none;
}

.game-window {
  width: min(69%, 970px);
  max-height: 80%;
  border: 2px solid #896936;
  border-radius: 9px;
  overflow: hidden;
  background: #202115;
  box-shadow: 0 25px 75px #000;
}

.window-titlebar {
  min-height: clamp(58px, 5vw, 78px);
  padding: clamp(12px, 1vw, 18px) clamp(15px, 1.4vw, 24px);
  border-bottom: 1px solid #72552a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:
    linear-gradient(rgb(79 60 32 / 74%), rgb(40 34 19 / 74%)),
    repeating-linear-gradient(0deg, #554129 0 4px, #624c30 4px 9px);
}

.window-titlebar h2 {
  margin-top: 4px;
  font-size: clamp(1.05rem, 1.45vw, 1.5rem);
}

.close-button {
  width: clamp(35px, 2.65vw, 43px);
  height: clamp(35px, 2.65vw, 43px);
  border: 1px solid #876838;
  border-radius: 4px;
  color: #e8d5a6;
  background: #322a17;
  font-weight: 800;
}

.window-content {
  max-height: calc(80vh - 80px);
  overflow-y: auto;
  padding: clamp(14px, 1.4vw, 24px);
  background: linear-gradient(130deg, #171b10, #232518);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 0.82vw, 14px);
}

.panel-card {
  padding: clamp(10px, 1vw, 16px);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #29291b;
}

.panel-card h3 {
  margin-bottom: 8px;
  color: #f0dbab;
  font-size: clamp(0.8rem, 0.92vw, 1rem);
}

.panel-card p,
.muted-copy {
  color: var(--muted);
  font-size: clamp(0.68rem, 0.78vw, 0.87rem);
  line-height: 1.45;
}

.item-row {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid #423721;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #e5d8b5;
  font-size: clamp(0.68rem, 0.77vw, 0.88rem);
}

.item-row strong {
  color: var(--green-light);
}

.small-action {
  min-height: 31px;
  padding: 6px 11px;
  border-radius: 4px;
  color: #31250e;
  background: var(--gold);
  font-size: clamp(0.62rem, 0.69vw, 0.78rem);
  font-weight: 800;
}

.small-action.secondary {
  color: #ebdab4;
  border: 1px solid #69502d;
  background: #373020;
}

.panel-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.progress {
  height: 8px;
  margin: 11px 0 7px;
  overflow: hidden;
  border-radius: 10px;
  background: #0f120b;
}

.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #609f32, #a3db5a);
}

.reward-text {
  margin-top: 10px;
  color: var(--gold-bright);
  font-size: clamp(0.66rem, 0.77vw, 0.86rem);
}

.leader-entry {
  padding: clamp(9px, 0.75vw, 13px);
  border-bottom: 1px solid #413621;
  display: flex;
  justify-content: space-between;
  font-size: clamp(0.73rem, 0.88vw, 1rem);
}

.leader-entry.player {
  color: var(--green-light);
  font-weight: 700;
}

.profile-layout {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(12px, 1.1vw, 18px);
}

.form-card {
  margin-bottom: 12px;
  padding: clamp(11px, 1vw, 16px);
  border: 1px solid #514126;
  border-radius: 6px;
  background: #28281a;
}

.form-card h3 {
  margin-bottom: 10px;
  color: #ebd39c;
  font-size: clamp(0.8rem, 0.93vw, 1.03rem);
}

.field {
  margin: 9px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: clamp(0.65rem, 0.72vw, 0.82rem);
}

.field input,
.field select {
  width: 100%;
  min-height: 35px;
  border: 1px solid #5f4b2b;
  border-radius: 4px;
  padding: 7px 10px;
  color: var(--ink);
  background: #16190e;
}

.field input[type="range"] {
  min-height: auto;
  padding: 0;
  accent-color: var(--gold);
}

.toggle-row {
  margin: 9px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ead7a8;
  font-size: clamp(0.7rem, 0.79vw, 0.88rem);
}

.toggle-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.social-row {
  margin: 7px 0;
  padding: 9px;
  border-radius: 5px;
  background: #34311e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.social-row strong {
  font-size: clamp(0.68rem, 0.78vw, 0.88rem);
}

.social-row span {
  display: block;
  color: var(--muted);
  font-size: clamp(0.58rem, 0.66vw, 0.76rem);
}

.inbox {
  max-height: 110px;
  margin-top: 9px;
  overflow: auto;
}

.inbox p {
  padding: 7px 0;
  border-bottom: 1px solid #423721;
  color: var(--muted);
  font-size: clamp(0.64rem, 0.72vw, 0.8rem);
}

.intro-window {
  width: 100%;
  height: 100%;
  padding: clamp(18px, 3vw, 56px);
  border: 0;
  border-radius: 0;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  background: #050b08;
  box-shadow: none;
}

.intro-window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 4%), rgb(0 0 0 / 12%) 46%, rgb(0 0 0 / 64%) 100%);
}

.splash-art {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.intro-copy {
  width: clamp(170px, 25vw, 340px);
  min-height: clamp(52px, 6vw, 90px);
  margin-bottom: 0;
  position: absolute;
  left: 42%;
  top: 57%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

.splash-loader {
  width: clamp(170px, 25vw, 340px);
  margin: 0;
  display: grid;
  gap: 8px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
  filter: drop-shadow(0 12px 18px rgb(0 0 0 / 58%));
}

#welcome.loading:not(.loaded) .splash-loader {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition-delay: 0s;
}

.splash-loader span {
  height: clamp(26px, 3vw, 42px);
  border: 3px solid #17260f;
  border-radius: 999px;
  padding: clamp(4px, 0.45vw, 7px);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgb(255 228 104 / 10%), transparent 16%, transparent 84%, rgb(255 228 104 / 10%)),
    linear-gradient(#28321f, #060806);
  box-shadow:
    inset 0 0 0 2px rgb(255 216 91 / 28%),
    inset 0 0 18px #000,
    0 0 20px rgb(111 219 40 / 38%);
}

.splash-loader span::before,
.splash-loader span::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  pointer-events: none;
}

.splash-loader span::before {
  background:
    linear-gradient(90deg, transparent, rgb(255 255 255 / 28%), transparent),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 12%) 0 8px, transparent 8px 18px);
  mix-blend-mode: screen;
  animation: loader-sheen 1.45s linear infinite;
}

.splash-loader span::after {
  border: 1px solid rgb(255 232 107 / 34%);
  box-shadow: inset 0 0 10px rgb(147 255 72 / 18%);
}

.splash-loader i {
  width: 0;
  height: 100%;
  position: relative;
  z-index: 1;
  display: block;
  border-radius: inherit;
  background:
    radial-gradient(circle at 88% 50%, #fffbd5 0 8%, transparent 16%),
    linear-gradient(90deg, #2e7c13, #78db25 45%, #ffe05c 78%, #fff4a6);
  box-shadow: 0 0 16px rgb(181 255 71 / 82%), inset 0 0 8px rgb(255 255 255 / 34%);
  transition: width 220ms ease;
}

#welcome.entry-ready .splash-loader {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
}

#welcome.load-error .splash-loader {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.splash-start {
  min-width: clamp(122px, 12vw, 180px);
  min-height: clamp(36px, 3vw, 52px);
  border: clamp(2px, 0.2vw, 3px) solid #3d6b12;
  border-radius: 999px;
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  color: #fff9da;
  background:
    radial-gradient(circle at 18% 18%, rgb(255 255 255 / 48%), transparent 20%),
    linear-gradient(180deg, #ffe66b 0%, #f4a91d 47%, #7fc01d 49%, #286b0d 100%);
  box-shadow:
    inset 0 0 0 3px rgb(255 255 255 / 18%),
    inset 0 -5px 10px rgb(70 30 0 / 34%),
    0 8px 14px rgb(0 0 0 / 46%),
    0 0 14px rgb(147 255 65 / 34%);
  font-size: clamp(0.72rem, 0.95vw, 1.05rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #4c2d07, 0 0 12px rgb(255 255 210 / 46%);
  transform: translate(-50%, calc(-50% + 8px)) scale(0.97);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease, visibility 0s linear 220ms;
}

.splash-start::before {
  content: "";
  position: absolute;
  inset: -35% -70%;
  background: linear-gradient(100deg, transparent 36%, rgb(255 255 255 / 42%) 48%, transparent 60%);
  transform: translateX(-45%);
  animation: start-button-shine 2.2s ease-in-out infinite;
}

.splash-start::after {
  content: "▶";
  width: clamp(23px, 2.3vw, 36px);
  height: clamp(23px, 2.3vw, 36px);
  margin-left: clamp(5px, 0.5vw, 8px);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #31570d;
  background: linear-gradient(#fff7b0, #ffc229);
  box-shadow: inset 0 0 8px rgb(255 255 255 / 48%), 0 0 12px rgb(255 229 75 / 50%);
  font-size: 0.82em;
  vertical-align: middle;
}

.splash-start.ready {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  transition-delay: 0s;
  animation: splash-start-pulse 1.8s ease-in-out infinite;
}

.gold-button.splash-start.ready:hover:not(:disabled),
.gold-button.splash-start.ready:focus-visible {
  filter: brightness(1.1) drop-shadow(0 0 18px rgb(147 255 65 / 78%));
  transform: translate(-50%, -50%) scale(1.03);
}

.gold-button.splash-start.ready:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(0.98);
}

@keyframes splash-start-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgb(255 217 86 / 0%));
  }
  50% {
    filter: drop-shadow(0 0 18px rgb(147 255 65 / 78%));
  }
}

@keyframes loader-sheen {
  from {
    transform: translateX(-45%);
  }
  to {
    transform: translateX(45%);
  }
}

@keyframes start-button-shine {
  0%,
  28% {
    transform: translateX(-55%);
  }
  62%,
  100% {
    transform: translateX(55%);
  }
}

/* Opening screen primary command. */
.gold-button.splash-start {
  width: clamp(190px, 21vw, 310px);
  min-width: 0;
  min-height: clamp(58px, 6vw, 88px);
  border: clamp(2px, 0.22vw, 4px) solid #9acb24;
  border-radius: clamp(8px, 0.8vw, 13px);
  padding: clamp(6px, 0.65vw, 10px) clamp(9px, 0.9vw, 14px);
  display: grid;
  grid-template-columns: clamp(40px, 4.3vw, 64px) minmax(0, 1fr) clamp(25px, 2.7vw, 40px);
  gap: clamp(7px, 0.75vw, 12px);
  align-items: center;
  color: #fff9da;
  background:
    linear-gradient(90deg, rgb(255 235 93 / 18%), transparent 26%, transparent 74%, rgb(127 236 31 / 18%)),
    linear-gradient(180deg, #527f16 0%, #254b0c 48%, #102c09 52%, #071707 100%);
  box-shadow:
    inset 0 0 0 2px rgb(255 244 120 / 18%),
    inset 0 10px 14px rgb(197 255 70 / 12%),
    inset 0 -10px 18px rgb(0 0 0 / 52%),
    0 9px 0 #061006,
    0 15px 22px rgb(0 0 0 / 62%),
    0 0 24px rgb(145 255 45 / 38%);
  letter-spacing: 0;
  text-shadow: none;
}

.gold-button.splash-start::before {
  inset: -55% -70%;
  background: linear-gradient(100deg, transparent 38%, rgb(255 252 168 / 45%) 49%, transparent 60%);
}

.gold-button.splash-start::after {
  content: "";
  width: auto;
  height: auto;
  margin: 0;
  position: absolute;
  inset: 4px;
  border: 1px solid rgb(224 255 111 / 32%);
  border-radius: clamp(5px, 0.55vw, 9px);
  display: block;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.splash-start-power {
  width: clamp(38px, 4vw, 60px);
  height: clamp(38px, 4vw, 60px);
  position: relative;
  z-index: 1;
  border: 2px solid #d6f759;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #8fe326, #265b0d 65%, #081a08 68%);
  box-shadow: inset 0 0 9px #eaff8a, 0 0 14px rgb(153 255 50 / 68%);
}

.splash-start-power::before {
  content: "";
  width: 42%;
  height: 60%;
  clip-path: polygon(55% 0, 100% 0, 67% 40%, 94% 40%, 28% 100%, 43% 55%, 12% 55%);
  background: #fff069;
  filter: drop-shadow(0 0 4px #f6ff84);
}

.splash-start-copy {
  min-width: 0;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  text-align: left;
}

.splash-start-copy strong {
  color: #fff8c6;
  font-size: clamp(0.84rem, 1.35vw, 1.55rem);
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 2px 0 #142604, 0 0 12px rgb(219 255 117 / 42%);
}

.splash-start-copy small {
  color: #b9e865;
  font-size: clamp(0.48rem, 0.62vw, 0.72rem);
  line-height: 1;
  letter-spacing: 0;
}

.splash-start-arrow {
  width: clamp(22px, 2.3vw, 34px);
  height: clamp(22px, 2.3vw, 34px);
  position: relative;
  z-index: 1;
  border: 1px solid #c4ee4a;
  border-radius: 50%;
  background: linear-gradient(#92d52a, #346c0f);
  box-shadow: inset 0 0 7px rgb(255 255 255 / 30%), 0 0 9px rgb(141 245 42 / 44%);
}

.splash-start-arrow::before {
  content: "";
  width: 34%;
  height: 34%;
  position: absolute;
  left: 29%;
  top: 31%;
  border-top: 3px solid #fff7b0;
  border-right: 3px solid #fff7b0;
  transform: rotate(45deg);
  animation: splash-arrow-move 1s ease-in-out infinite;
}

.gold-button.splash-start.ready:hover:not(:disabled),
.gold-button.splash-start.ready:focus-visible {
  border-color: #efff7f;
  filter: brightness(1.16) drop-shadow(0 0 20px rgb(147 255 65 / 78%));
  transform: translate(-50%, -50%) scale(1.035);
}

@keyframes splash-arrow-move {
  0%,
  100% {
    transform: translateX(-2px) rotate(45deg);
  }
  50% {
    transform: translateX(3px) rotate(45deg);
  }
}

@media (max-width: 700px), (max-height: 520px) {
  .gold-button.splash-start {
    width: clamp(170px, 34vw, 230px);
    min-height: 50px;
    grid-template-columns: 36px minmax(0, 1fr) 24px;
    gap: 6px;
    padding: 5px 8px;
  }

  .splash-start-power {
    width: 34px;
    height: 34px;
  }

  .splash-start-copy strong {
    font-size: 0.82rem;
  }

  .splash-start-copy small {
    font-size: 0.48rem;
  }

  .splash-start-arrow {
    width: 22px;
    height: 22px;
  }
}

.game-window.shop-window {
  width: auto;
  height: 94%;
  max-width: 98%;
  aspect-ratio: 1536 / 1024;
  border: 2px solid #77652c;
  border-radius: clamp(6px, 0.7vw, 11px);
  overflow: hidden;
  background: #0c0f0c;
  box-shadow: 0 28px 70px #000, 0 0 23px rgb(182 137 14 / 34%);
  container-type: inline-size;
  container-name: market-modal;
}

.shop-window .window-titlebar {
  height: 11%;
  min-height: 0;
  padding: clamp(7px, 0.86vw, 14px) clamp(13px, 1.35vw, 22px);
  border-bottom: 2px solid #4e4826;
  color: #f6f2dd;
  background:
    radial-gradient(circle at 9% 50%, rgb(115 175 21 / 22%), transparent 15%),
    linear-gradient(90deg, #181813, #090e0d);
}

.shop-window .window-titlebar::before {
  content: "🛒";
  width: clamp(50px, 6.2vw, 90px);
  height: clamp(50px, 6.2vw, 90px);
  margin-right: clamp(8px, 1vw, 16px);
  border: 3px solid #769319;
  border-radius: 16px;
  flex: none;
  display: grid;
  place-items: center;
  color: #ebc42a;
  background: radial-gradient(circle, #24390e, #0a0f0d 70%);
  font-size: clamp(1.25rem, 2.55vw, 2.3rem);
  text-shadow: 0 0 12px #91d520;
  box-shadow: inset 0 0 14px #000, 0 0 11px rgb(128 204 26 / 35%);
}

.shop-window .window-titlebar > div {
  flex: 1;
}

.shop-window .panel-kicker {
  color: #9cdb31;
  font-size: clamp(0.44rem, 0.58vw, 0.66rem);
}

.shop-window .window-titlebar h2 {
  margin: 0;
  color: #f4f0df;
  font-size: clamp(1.35rem, 2.27vw, 2.43rem);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.shop-window .close-button {
  border: 2px solid #8c3c25;
  color: #ffe2cb;
  background: linear-gradient(#d75132, #791d11);
  box-shadow: inset 0 0 8px rgb(255 195 132 / 30%);
}

.shop-window .window-content {
  height: 89%;
  max-height: none;
  overflow: hidden;
  padding: clamp(7px, 0.7vw, 11px);
  background:
    radial-gradient(circle at 48% 5%, rgb(157 117 23 / 16%), transparent 34%),
    linear-gradient(140deg, #0a110e, #090d0d);
}

.market-sheet,
.market-layout {
  height: 100%;
  min-height: 0;
}

.market-sheet {
  color: #e9e7dc;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.market-layout {
  display: grid;
  grid-template-columns: 0.72fr 3.28fr;
  gap: clamp(6px, 0.65vw, 10px);
}

.market-navigation,
.market-upgrades,
.market-banner,
.market-purchase,
.market-selling,
.market-daily,
.market-prices {
  min-height: 0;
  border: 2px solid #3e3b24;
  border-radius: clamp(5px, 0.55vw, 8px);
  background: linear-gradient(125deg, #121714, #080e0d);
  box-shadow: inset 0 0 18px rgb(0 0 0 / 55%);
}

.market-navigation {
  padding: clamp(5px, 0.5vw, 8px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.38vw, 6px);
}

.market-navigation > button {
  min-height: clamp(32px, 4.1cqw, 55px);
  border: 1px solid #363722;
  border-radius: 5px;
  padding: 0 clamp(5px, 0.55vw, 9px);
  display: flex;
  align-items: center;
  gap: 7px;
  color: #dbd0aa;
  background: #141815;
  font-size: clamp(0.42rem, 0.62vw, 0.72rem);
  font-weight: 900;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.market-navigation > button:hover,
.market-navigation > button.selected {
  border-color: #79ae19;
  color: #fff8d4;
  background: linear-gradient(100deg, #589b0c, #253d08);
  box-shadow: inset 0 0 10px rgb(211 255 64 / 22%);
}

.market-truck {
  min-height: 0;
  margin-top: auto;
  border: 1px solid #3c3b25;
  border-radius: 5px;
  padding: clamp(4px, 0.42vw, 7px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.4vw, 6px);
  background: #101512;
}

.market-truck .market-art-slot {
  min-height: clamp(52px, 9.5cqw, 132px);
  flex: 1;
}

.market-truck strong {
  color: #f1e5bb;
  font-size: clamp(0.36rem, 0.51vw, 0.59rem);
  text-align: center;
}

.market-truck button {
  min-height: clamp(22px, 2.65cqw, 35px);
  border: 1px solid #6f9d1b;
  border-radius: 4px;
  color: #9bce55;
  background: #16220d;
  font-size: clamp(0.37rem, 0.52vw, 0.6rem);
  font-weight: 900;
  text-transform: uppercase;
}

.friend-offer-compact {
  overflow: hidden;
  border-color: #756126;
  background:
    radial-gradient(circle at 50% 28%, rgb(255 204 53 / 16%), transparent 48%),
    #101512;
}

.friend-offer-compact-image {
  width: min(100%, clamp(65px, 11cqw, 145px));
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #7e6a2c;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #f2f0e8, #b9bfba 72%);
}

.friend-offer-compact-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: contrast(1.04) drop-shadow(0 5px 4px rgb(0 0 0 / 32%));
}

.friend-offer-compact small,
.friend-offer-compact b,
.friend-offer-compact em {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-offer-compact small {
  color: #9fc88a;
  font-size: clamp(0.28rem, 0.4vw, 0.47rem);
}

.friend-offer-compact b {
  color: #efe2ba;
  font-size: clamp(0.32rem, 0.46vw, 0.54rem);
}

.market-command {
  min-height: 0;
  display: grid;
  grid-template-rows: 28% 43% minmax(0, 1fr);
  gap: clamp(6px, 0.58vw, 9px);
}

.market-command:not(.market-command-market) {
  display: block;
  overflow: auto;
}

.market-top {
  min-height: 0;
  display: grid;
  grid-template-columns: 0.9fr 1.8fr;
  gap: clamp(6px, 0.58vw, 9px);
}

.market-upgrades,
.market-purchase,
.market-selling,
.market-daily,
.market-prices {
  padding: clamp(5px, 0.52vw, 9px);
}

.market-upgrades h3,
.market-purchase h3,
.market-selling h3,
.market-daily h3,
.market-prices h3 {
  margin: 0 0 clamp(4px, 0.42vw, 7px);
  color: #e7b42a;
  font-size: clamp(0.49rem, 0.76vw, 0.87rem);
  font-weight: 900;
  text-transform: uppercase;
}

.market-upgrades h3::before,
.market-purchase h3::before,
.market-selling h3::before,
.market-daily h3::before,
.market-prices h3::before {
  content: "› ";
  color: #7ed024;
}

.market-art-slot {
  min-width: 0;
  border: 1px dashed #555037;
  border-radius: clamp(4px, 0.42vw, 7px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  color: #9cd928;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgb(25 29 21 / 78%) 0 7px, rgb(11 15 13 / 78%) 7px 14px);
}

.market-art-slot span {
  font-size: clamp(0.32rem, 0.46vw, 0.55rem);
  font-weight: 900;
}

.market-art-slot small {
  max-width: 96%;
  color: #a59f84;
  font-size: clamp(0.25rem, 0.34vw, 0.41rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.market-stock-row {
  min-height: 0;
  flex: 1;
  border: 1px solid #2e3527;
  border-radius: 5px;
  padding: clamp(3px, 0.3vw, 5px);
  display: flex;
  align-items: stretch;
  gap: clamp(4px, 0.4vw, 7px);
  background: #0c1210;
}

.market-upgrades {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.33vw, 5px);
}

.market-stock-row .market-art-slot {
  width: clamp(38px, 4.8cqw, 64px);
  flex: none;
}

.market-stock-row > div:not(.market-art-slot) {
  min-width: 0;
  display: grid;
  align-content: center;
}

.market-stock-row strong {
  color: #ece8d5;
  font-size: clamp(0.38rem, 0.53vw, 0.62rem);
}

.market-stock-row span {
  color: #84cb25;
  font-size: clamp(0.31rem, 0.43vw, 0.5rem);
}

.market-primary,
.market-product button,
.market-daily button {
  min-height: clamp(25px, 3.05cqw, 43px);
  border: 1px solid #dbad22;
  border-radius: 5px;
  color: #302006;
  background: linear-gradient(#f2bd25, #af6711);
  font-size: clamp(0.41rem, 0.6vw, 0.7rem);
  font-weight: 900;
  text-transform: uppercase;
}

.market-secondary {
  border-color: #7dab24;
  color: #eef8d9;
  background: linear-gradient(#579a13, #2b5408);
}

.market-craft-button {
  min-height: clamp(33px, 4cqw, 55px);
  line-height: 1.05;
}

.market-craft-button small {
  margin-top: 3px;
  display: block;
  color: #d9e9bd;
  font-size: clamp(0.24rem, 0.33vw, 0.39rem);
  font-weight: 700;
  text-transform: none;
}

.market-exchange-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(3px, 0.32vw, 5px);
}

.market-exchange-grid button {
  min-height: clamp(23px, 2.7cqw, 37px);
  border: 1px solid #344827;
  border-radius: 4px;
  color: #f2e4b7;
  background: #111813;
  font-size: clamp(0.31rem, 0.43vw, 0.5rem);
  font-weight: 900;
  text-transform: uppercase;
}

.market-exchange-grid small {
  display: block;
  color: #8ed430;
  font-size: clamp(0.25rem, 0.34vw, 0.4rem);
}

.market-banner {
  padding: clamp(5px, 0.5vw, 8px);
  display: grid;
  grid-template-columns: 1.75fr 0.8fr;
  gap: clamp(5px, 0.5vw, 8px);
  border-color: #4d4222;
}

.friend-offer-showcase {
  min-width: 0;
  overflow: hidden;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  align-items: stretch;
  background:
    radial-gradient(circle at 24% 45%, rgb(255 200 50 / 18%), transparent 42%),
    linear-gradient(130deg, #172018, #090e0d);
}

.friend-offer-square {
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  position: relative;
  justify-self: center;
  overflow: hidden;
  border: 1px solid #8b7028;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #f4f2ea, #c0c5c0 72%, #919994);
}

.friend-offer-square img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  object-fit: contain;
  filter: contrast(1.04) saturate(1.04) drop-shadow(0 7px 6px rgb(0 0 0 / 32%));
}

.friend-offer-square span {
  position: absolute;
  left: 5px;
  bottom: 5px;
  border-radius: 12px;
  padding: 3px 6px;
  color: #332207;
  background: rgb(255 209 60 / 92%);
  font-size: clamp(0.25rem, 0.34vw, 0.4rem);
  font-weight: 900;
  text-transform: uppercase;
}

.friend-offer-copy {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2px, 0.28vw, 5px);
}

.friend-offer-copy small {
  color: #91c574;
  font-size: clamp(0.28rem, 0.4vw, 0.48rem);
  font-weight: 800;
}

.friend-offer-copy h3 {
  margin: 0;
  overflow: hidden;
  color: #f1c542;
  font-size: clamp(0.48rem, 0.75vw, 0.88rem);
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.friend-offer-copy strong {
  overflow: hidden;
  color: #f4eee0;
  font-size: clamp(0.42rem, 0.64vw, 0.76rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-offer-copy p {
  max-height: 2.5em;
  overflow: hidden;
  color: #b7c1ad;
  font-size: clamp(0.27rem, 0.39vw, 0.47rem);
  line-height: 1.2;
}

.friend-offer-copy button {
  min-height: clamp(22px, 2.65cqw, 37px);
  border: 1px solid #c99a24;
  border-radius: 5px;
  color: #332407;
  background: linear-gradient(#f5c83c, #b87812);
  font-size: clamp(0.32rem, 0.46vw, 0.55rem);
  font-weight: 900;
  text-transform: uppercase;
}

.friend-offer-price {
  display: inline-flex;
  justify-content: center;
  color: #fff19a;
  font-style: normal;
  font-weight: 900;
  animation: friend-offer-price-blink 900ms ease-in-out infinite alternate;
}

@keyframes friend-offer-price-blink {
  from {
    opacity: 0.58;
    filter: brightness(0.88);
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    filter: brightness(1.28) drop-shadow(0 0 6px rgb(255 211 64 / 78%));
    transform: scale(1.04);
  }
}

.market-banner-art {
  height: 100%;
  border-color: #776625;
  color: #e9bb23;
}

.market-promo {
  min-height: 0;
  border: 1px solid #303528;
  border-radius: 5px;
  padding: clamp(4px, 0.4vw, 7px);
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.31vw, 5px);
  justify-content: center;
  background: #111612;
  text-align: center;
}

.market-promo .market-art-slot {
  min-height: 0;
  flex: 1;
  border-color: #81631d;
}

.market-promo strong {
  color: #e5dab3;
  font-size: clamp(0.32rem, 0.47vw, 0.55rem);
}

.market-purchase {
  border-color: #4e4323;
}

.market-section-heading {
  margin-bottom: clamp(4px, 0.42vw, 7px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.market-section-heading h3 {
  margin: 0;
}

.market-section-heading span {
  color: #a8b89b;
  font-size: clamp(0.28rem, 0.39vw, 0.48rem);
  font-weight: 700;
  text-align: right;
}

.market-machine-part-shop {
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, rgb(197 143 25 / 12%), transparent 46%),
    linear-gradient(125deg, #121714, #080e0d);
}

.machine-part-scroll {
  height: calc(100% - clamp(20px, 1.75vw, 29px));
  min-height: 0;
  padding: 1px 2px clamp(5px, 0.5vw, 8px);
  display: flex;
  gap: clamp(6px, 0.65vw, 11px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: #9e771b #111713;
  scrollbar-width: thin;
}

.machine-part-scroll::-webkit-scrollbar {
  height: 8px;
}

.machine-part-scroll::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #111713;
}

.machine-part-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(90deg, #7c5815, #d5a72d);
}

.machine-part-card {
  min-width: 0;
  flex: 0 0 clamp(135px, 14.8cqw, 205px);
  border: 1px solid #5c522d;
  border-radius: clamp(6px, 0.6vw, 9px);
  padding: clamp(5px, 0.5vw, 8px);
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.34vw, 6px);
  scroll-snap-align: start;
  background:
    linear-gradient(145deg, rgb(255 205 73 / 8%), transparent 42%),
    #0d1411;
  box-shadow: inset 0 0 14px rgb(0 0 0 / 48%);
}

.machine-part-card.maxed {
  border-color: #73a928;
  box-shadow: inset 0 0 18px rgb(91 163 26 / 16%), 0 0 10px rgb(111 177 35 / 13%);
}

.machine-part-card-head {
  min-height: clamp(20px, 2.2cqw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
}

.machine-part-card h4 {
  margin: 0;
  overflow: hidden;
  color: #eee8d6;
  font-size: clamp(0.34rem, 0.49vw, 0.58rem);
  line-height: 1.12;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.machine-part-card .market-favorite-button {
  width: clamp(22px, 2.15cqw, 31px);
  height: clamp(22px, 2.15cqw, 31px);
  border: 1px solid #685c2b;
  border-radius: 5px;
  padding: 0;
  color: #877b54;
  background: #171812;
  font-size: clamp(0.55rem, 0.8vw, 0.94rem);
}

.machine-part-card .market-favorite-button.active {
  border-color: #e8bd32;
  color: #ffe56a;
  background: #55400e;
  box-shadow: 0 0 9px rgb(255 210 48 / 55%);
}

.machine-part-image {
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border: 1px solid #3e493d;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, #f2f0e8, #c8cbc6 68%, #9ca29d);
}

.machine-part-image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
  filter: contrast(1.04) saturate(1.04) drop-shadow(0 7px 5px rgb(0 0 0 / 30%));
}

.machine-part-level {
  display: grid;
  gap: 3px;
}

.machine-part-level span {
  color: #b9c7ab;
  font-size: clamp(0.28rem, 0.39vw, 0.47rem);
  font-weight: 800;
}

.machine-part-level i {
  height: clamp(4px, 0.48vw, 7px);
  overflow: hidden;
  border-radius: 10px;
  background: #202920;
}

.machine-part-level b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #6b9f20, #c6e542);
}

.machine-part-card > strong {
  min-height: clamp(14px, 1.65cqw, 23px);
  display: grid;
  place-items: center;
  color: #eac234;
  font-size: clamp(0.34rem, 0.5vw, 0.59rem);
}

.machine-part-card .machine-part-buy {
  min-height: clamp(24px, 2.65cqw, 38px);
  border: 1px solid #8cb52b;
  border-radius: 5px;
  color: #f3f9e2;
  background: linear-gradient(#659f18, #315d0b);
  font-size: clamp(0.32rem, 0.46vw, 0.55rem);
  font-weight: 900;
  text-transform: uppercase;
}

.machine-part-card .machine-part-buy:disabled {
  border-color: #466232;
  color: #aebda4;
  background: #263221;
}

.market-products {
  height: calc(100% - clamp(18px, 1.55vw, 26px));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(4px, 0.42vw, 7px);
}

.market-product {
  min-height: 0;
  border: 1px solid #2e4929;
  border-radius: 5px;
  padding: clamp(4px, 0.4vw, 6px);
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.3vw, 5px);
  background: #0c1310;
  text-align: center;
}

.market-product.type-plastic {
  border-color: #175a87;
}

.market-product.type-metal {
  border-color: #8c5c13;
}

.market-product.type-glass {
  border-color: #38651d;
}

.market-product.type-organic {
  border-color: #64347a;
}

.market-product.type-paper {
  border-color: #775220;
}

.market-product h4 {
  margin: 0;
  color: #eae8dc;
  font-size: clamp(0.34rem, 0.5vw, 0.59rem);
  text-transform: uppercase;
}

.market-product > span {
  color: #c3bda2;
  font-size: clamp(0.29rem, 0.39vw, 0.47rem);
}

.market-product .market-art-slot {
  min-height: 0;
  flex: 1;
}

.market-product > small {
  color: #9eb892;
  font-size: clamp(0.27rem, 0.38vw, 0.45rem);
}

.market-product > strong {
  color: #eac234;
  font-size: clamp(0.42rem, 0.61vw, 0.7rem);
}

.market-product button {
  min-height: clamp(22px, 2.65cqw, 36px);
  border-color: #6eab19;
  color: #edf7db;
  background: linear-gradient(#579a13, #2b5408);
}

.market-product-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
}

.market-product-actions .market-favorite-button {
  width: clamp(24px, 2.5cqw, 36px);
  padding: 0;
  border-color: #685c2b;
  color: #877b54;
  background: #171812;
}

.market-product-actions .market-favorite-button.active {
  border-color: #e8bd32;
  color: #ffe56a;
  background: #55400e;
  box-shadow: 0 0 9px rgb(255 210 48 / 55%);
}

.market-bottom {
  min-height: 0;
  display: grid;
  grid-template-columns: 1.65fr 0.8fr 1.03fr;
  gap: clamp(6px, 0.58vw, 9px);
}

.market-selling > div {
  height: calc(100% - clamp(16px, 1.45vw, 24px));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(3px, 0.28vw, 5px);
}

.market-sale-item {
  min-height: 0;
  border: 1px solid #303829;
  border-radius: 4px;
  padding: clamp(3px, 0.28vw, 5px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  background: #0c1210;
}

.market-sale-item.type-plastic {
  border-color: #226d9b;
}

.market-sale-item.type-metal {
  border-color: #9b6d24;
}

.market-sale-item.type-glass {
  border-color: #4f7d2d;
}

.market-sale-item.type-organic {
  border-color: #784b8e;
}

.market-sale-item.type-paper {
  border-color: #8e6830;
}

.market-sale-item span {
  min-height: 1.9em;
  display: grid;
  place-items: center;
  color: #d9dfd2;
  font-size: clamp(0.27rem, 0.36vw, 0.43rem);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}

.market-sale-image {
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border: 1px solid #39483b;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgb(255 255 255 / 18%), transparent 62%),
    #162019;
}

.market-sale-image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
  filter: saturate(1.08) contrast(1.04) drop-shadow(0 4px 4px rgb(0 0 0 / 40%));
}

.market-sale-item b {
  color: #94d32c;
  font-size: clamp(0.26rem, 0.37vw, 0.44rem);
  text-align: center;
}

.market-sale-item button {
  border: 1px solid #61941c;
  border-radius: 4px;
  color: #eef8d9;
  background: #376e0d;
  font-size: clamp(0.3rem, 0.41vw, 0.48rem);
  font-weight: 900;
  text-transform: uppercase;
}

.market-sale-item button:disabled {
  border-color: #353a31;
  color: #788176;
  background: #151a17;
}

.market-daily {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.3vw, 5px);
}

.market-daily .market-art-slot {
  min-height: 0;
  flex: 1;
  border-color: #6c4c24;
}

.market-daily .machine-part-image {
  min-height: 0;
  flex: 1;
}

.market-daily p {
  color: #d2c595;
  font-size: clamp(0.31rem, 0.43vw, 0.5rem);
  font-weight: 800;
  text-align: center;
}

.market-prices > div {
  margin-bottom: clamp(3px, 0.27vw, 5px);
  display: grid;
  grid-template-columns: clamp(25px, 2.9cqw, 42px) 1fr auto;
  gap: clamp(4px, 0.38vw, 6px);
  align-items: center;
}

.market-prices span {
  color: #ddd3ad;
  font-size: clamp(0.29rem, 0.41vw, 0.48rem);
  font-weight: 800;
}

.market-prices i {
  height: clamp(4px, 0.45vw, 7px);
  border-radius: 10px;
  background: linear-gradient(90deg, #548e10, #a7e631);
}

.market-prices b {
  color: #96dc2b;
  font-size: clamp(0.31rem, 0.43vw, 0.51rem);
}

.market-tab-page {
  min-height: 100%;
  padding: clamp(6px, 0.65vw, 11px);
  border: 2px solid #3e3b24;
  border-radius: clamp(5px, 0.55vw, 8px);
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.72vw, 12px);
  background: linear-gradient(125deg, #121714, #080e0d);
  box-shadow: inset 0 0 18px rgb(0 0 0 / 55%);
}

.market-tab-page > header {
  min-height: clamp(48px, 6cqw, 78px);
  border: 1px solid #4e4826;
  border-radius: 6px;
  padding: clamp(7px, 0.75vw, 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(100deg, #1d2915, #101512);
}

.market-tab-page > header h3 {
  margin: 0;
  color: #efc540;
  font-size: clamp(0.65rem, 1vw, 1.16rem);
  text-transform: uppercase;
}

.market-tab-page > header p,
.market-tab-page > header strong {
  margin: 3px 0 0;
  color: #b9c2a6;
  font-size: clamp(0.38rem, 0.55vw, 0.66rem);
}

.market-tab-page > header button,
.market-order-card button,
.market-offer-grid button,
.market-sell-all {
  min-height: clamp(27px, 3cqw, 42px);
  border: 1px solid #7eae24;
  border-radius: 5px;
  padding: 0 clamp(8px, 0.8vw, 14px);
  color: #f1f8da;
  background: linear-gradient(#579a13, #2b5408);
  font-size: clamp(0.38rem, 0.55vw, 0.65rem);
  font-weight: 900;
  text-transform: uppercase;
}

.market-tab-section {
  min-height: 0;
  flex: 1;
  padding: clamp(6px, 0.62vw, 10px);
}

.market-command-trade .market-products {
  min-height: clamp(180px, 32cqw, 360px);
  height: auto;
}

.market-command-trade .market-machine-part-shop {
  min-height: clamp(250px, 37cqw, 440px);
  flex: none;
}

.market-command-trade .machine-part-scroll {
  min-height: clamp(210px, 31cqw, 370px);
}

.market-command-trade .market-selling > div {
  min-height: clamp(100px, 15cqw, 180px);
  height: auto;
}

.market-command-trade .market-sale-item {
  min-height: clamp(150px, 20cqw, 245px);
}

.market-command-trade .market-sale-image {
  min-height: clamp(72px, 10cqw, 125px);
}

.market-sell-all {
  width: 100%;
  margin-top: 7px;
}

.market-order-card {
  flex: 1;
  border: 2px solid #4a4828;
  border-radius: 8px;
  padding: clamp(10px, 1.2vw, 20px);
  background: radial-gradient(circle at 50% 0, rgb(117 170 28 / 16%), transparent 42%), #0c1310;
}

.market-order-card h3 {
  color: #f1c53c;
  font-size: clamp(0.8rem, 1.35vw, 1.5rem);
}

.market-order-card p {
  margin: 5px 0 10px;
  color: #b9c2a6;
}

.market-order-card > div {
  display: grid;
  gap: 7px;
}

.market-order-card > div article,
.market-history-list article {
  border: 1px solid #343c2e;
  border-radius: 5px;
  padding: clamp(7px, 0.8vw, 13px);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: #111813;
}

.market-order-card > div article.ready {
  border-color: #6d9e20;
  color: #baf06a;
}

.market-order-card footer {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.market-order-card button:disabled {
  opacity: 0.45;
}

.market-offer-grid,
.market-favorite-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, 0.8vw, 13px);
}

.market-offer-grid article {
  min-height: clamp(120px, 16cqw, 210px);
  border: 1px solid #4b492b;
  border-radius: 7px;
  padding: clamp(8px, 0.9vw, 15px);
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: space-between;
  background: linear-gradient(145deg, #182116, #0b100e);
}

.market-offer-grid .market-part-offer .machine-part-image {
  min-height: clamp(85px, 10cqw, 145px);
  flex: 1;
}

.friend-offer-grid .friend-offer-card {
  overflow: hidden;
}

.friend-offer-card > small {
  overflow: hidden;
  color: #8fca75;
  font-size: clamp(0.38rem, 0.52vw, 0.62rem);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-offer-card > p {
  min-height: 2.4em;
  overflow: hidden;
}

.market-offer-grid .market-part-offer button:disabled {
  opacity: 0.48;
}

.market-offer-grid h4 {
  margin: 0;
  color: #eac33a;
  text-transform: uppercase;
}

.market-offer-grid p {
  color: #aeb99e;
  font-size: 0.8em;
}

.market-history-list {
  display: grid;
  gap: 6px;
}

.market-history-list article {
  border-left: 4px solid #7eb62b;
}

.market-history-list .history-sell {
  border-left-color: #e0b22a;
}

.market-history-list .history-order {
  border-left-color: #43aee9;
}

.market-history-list small {
  color: #93a486;
}

.market-favorite-grid .market-product {
  min-height: clamp(180px, 25cqw, 310px);
}

.market-favorite-grid .machine-part-card {
  min-height: clamp(220px, 28cqw, 350px);
  width: auto;
}

.market-empty-state {
  grid-column: 1 / -1;
  min-height: clamp(140px, 26cqw, 300px);
  border: 1px dashed #555037;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #a8b397;
  background: #0d1310;
  text-align: center;
}

@container market-modal (max-width: 820px) {
  .shop-window .window-content {
    padding: 5px;
  }

  .market-layout,
  .market-command,
  .market-top,
  .market-bottom {
    gap: 5px;
  }

  .market-navigation,
  .market-upgrades,
  .market-banner,
  .market-purchase,
  .market-selling,
  .market-daily,
  .market-prices {
    padding: 4px;
  }

  .market-art-slot small {
    font-size: 0.22rem;
  }

  .market-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .market-section-heading span {
    text-align: left;
  }

  .machine-part-card {
    flex-basis: clamp(125px, 35cqw, 175px);
  }
}

.game-window.profile-window {
  width: auto;
  height: 96%;
  max-width: 98%;
  aspect-ratio: 1.4;
  border: 2px solid #38432c;
  border-radius: clamp(6px, 0.7vw, 11px);
  overflow: hidden;
  background: #080d0c;
  box-shadow: 0 28px 70px #000, 0 0 24px rgb(94 170 18 / 28%);
  container-type: inline-size;
  container-name: profile-modal;
}

.profile-window .window-titlebar {
  height: 11%;
  min-height: 0;
  padding: clamp(7px, 0.86vw, 13px) clamp(12px, 1.25vw, 20px);
  border-bottom: 2px solid #313b26;
  background:
    radial-gradient(circle at 9% 50%, rgb(76 148 22 / 20%), transparent 15%),
    linear-gradient(90deg, #101714, #090e0e);
}

.profile-window .window-titlebar::before {
  content: "●";
  width: clamp(45px, 5.8vw, 82px);
  height: clamp(45px, 5.8vw, 82px);
  margin-right: clamp(8px, 1vw, 15px);
  border: 3px solid #4b6033;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  color: #7fcf25;
  background: radial-gradient(circle, #234317, #0b1110 72%);
  font-size: clamp(1.28rem, 2.7vw, 2.45rem);
  text-shadow: 0 0 13px #6fca20;
  box-shadow: inset 0 0 13px #000, 0 0 11px rgb(110 205 29 / 28%);
}

.profile-window .window-titlebar > div {
  flex: 1;
}

.profile-window .panel-kicker {
  color: #8dd329;
  font-size: clamp(0.43rem, 0.57vw, 0.65rem);
}

.profile-window .window-titlebar h2 {
  margin: 0;
  color: #eff1ea;
  font-size: clamp(1.25rem, 2.15vw, 2.28rem);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-window .close-button {
  border: 2px solid #753729;
  color: #ffe1d4;
  background: linear-gradient(#c84d31, #731b11);
  box-shadow: inset 0 0 8px rgb(255 194 128 / 30%);
}

.profile-window .window-content {
  height: 89%;
  max-height: none;
  overflow: hidden;
  padding: clamp(7px, 0.7vw, 11px);
  background:
    radial-gradient(circle at 34% 10%, rgb(78 137 18 / 13%), transparent 33%),
    linear-gradient(138deg, #09100e, #070c0c);
}

.profile-sheet,
.profile-layout-v2 {
  height: 100%;
  min-height: 0;
}

.profile-sheet {
  color: #e8ede5;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.profile-layout-v2 {
  display: grid;
  grid-template-columns: 0.8fr 2.8fr;
  gap: clamp(6px, 0.65vw, 10px);
}

.profile-navigation,
.profile-identity,
.profile-facts,
.profile-statistics,
.profile-collection,
.profile-community {
  min-height: 0;
  border: 2px solid #283529;
  border-radius: clamp(5px, 0.52vw, 8px);
  background: linear-gradient(120deg, #101713, #080e0d);
  box-shadow: inset 0 0 17px rgb(0 0 0 / 55%);
}

.profile-navigation {
  padding: clamp(5px, 0.5vw, 8px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.38vw, 6px);
}

.profile-navigation > span,
.profile-navigation > button {
  min-height: clamp(33px, 4.4cqw, 58px);
  border: 1px solid #28352c;
  border-radius: 4px;
  padding: 0 clamp(6px, 0.62vw, 10px);
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d7cfaf;
  background: #101513;
  font-size: clamp(0.43rem, 0.65vw, 0.74rem);
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.profile-navigation > span.selected,
.profile-navigation > button.selected {
  border-color: #68a919;
  color: #f4f7ec;
  background: linear-gradient(105deg, #478e0b, #213908);
  box-shadow: inset 0 0 10px rgb(170 246 56 / 25%);
}

.profile-navigation > button:not(.selected):hover {
  border-color: #537a27;
  color: #f0efd8;
}

.profile-membership,
.profile-controls {
  border: 1px solid #26352b;
  border-radius: 5px;
  padding: clamp(5px, 0.45vw, 8px);
  background: #0b1210;
}

.profile-membership {
  margin-top: auto;
}

.profile-membership h3,
.profile-controls h3,
.profile-statistics h3,
.profile-collection h3,
.profile-community h3 {
  margin: 0 0 clamp(4px, 0.38vw, 6px);
  color: #91d72c;
  font-size: clamp(0.45rem, 0.7vw, 0.8rem);
  font-weight: 900;
  text-transform: uppercase;
}

.profile-account-form {
  display: grid;
  gap: clamp(3px, 0.31vw, 5px);
}

.profile-account-form input,
.profile-name input,
.profile-community input,
.profile-community select {
  min-width: 0;
  min-height: clamp(23px, 2.8cqw, 38px);
  border: 1px solid #33432e;
  border-radius: 4px;
  padding: 3px 6px;
  color: #e4e9e1;
  background: #09100f;
  font-size: clamp(0.36rem, 0.51vw, 0.59rem);
}

.profile-account-form button {
  min-height: clamp(22px, 2.8cqw, 37px);
  border: 1px solid #669c1a;
  border-radius: 4px;
  color: #effbd8;
  background: linear-gradient(#579a13, #2a5409);
  font-size: clamp(0.38rem, 0.54vw, 0.62rem);
  font-weight: 900;
  text-transform: uppercase;
}

.profile-connected strong,
.profile-connected span,
.profile-connected small {
  display: block;
}

.profile-connected strong {
  color: #8fd42c;
  font-size: clamp(0.4rem, 0.54vw, 0.62rem);
}

.profile-connected span {
  margin: 4px 0;
  overflow: hidden;
  color: #e6e9e0;
  font-size: clamp(0.35rem, 0.48vw, 0.55rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-connected small {
  color: #9ba99d;
  font-size: clamp(0.29rem, 0.4vw, 0.47rem);
}

.profile-controls {
  display: grid;
  gap: clamp(3px, 0.3vw, 5px);
}

.profile-controls label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #c4cfbf;
  font-size: clamp(0.35rem, 0.5vw, 0.58rem);
  font-weight: 700;
}

.profile-controls input[type="checkbox"] {
  accent-color: #72b51b;
}

.profile-controls label:last-child {
  display: block;
}

.profile-controls input[type="range"] {
  width: 100%;
  display: block;
  accent-color: #72b51b;
}

.profile-command {
  min-height: 0;
  display: grid;
  grid-template-rows: 30% 12.5% 19.5% minmax(0, 1fr);
  gap: clamp(6px, 0.57vw, 9px);
}

.profile-identity {
  padding: clamp(6px, 0.58vw, 10px);
  display: grid;
  grid-template-columns: 0.58fr 1.33fr 0.78fr;
  gap: clamp(6px, 0.55vw, 9px);
  border-color: #31452c;
}

.profile-art-slot {
  min-width: 0;
  border: 1px dashed #475839;
  border-radius: clamp(4px, 0.42vw, 7px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  color: #89d324;
  background:
    repeating-linear-gradient(135deg, rgb(18 29 20 / 76%) 0 7px, rgb(8 14 12 / 76%) 7px 14px);
  text-align: center;
}

.profile-art-slot span {
  color: #8fd62a;
  font-size: clamp(0.33rem, 0.47vw, 0.56rem);
  font-weight: 900;
}

.profile-art-slot small {
  max-width: 96%;
  color: #91a391;
  font-size: clamp(0.25rem, 0.34vw, 0.41rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.profile-avatar-slot {
  height: 100%;
  border-color: #4e7430;
}

.profile-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(5px, 0.5vw, 8px);
}

.profile-name form {
  display: flex;
  gap: 4px;
}

.profile-name input {
  flex: 1;
  color: #f1f3ed;
  font-size: clamp(0.64rem, 0.96vw, 1.08rem);
  font-weight: 900;
  text-transform: uppercase;
}

.profile-name form button {
  width: clamp(26px, 3.2cqw, 42px);
  border: 1px solid #546546;
  border-radius: 4px;
  color: #e9d898;
  background: #222821;
}

.profile-name > span {
  color: #bea969;
  font-size: clamp(0.39rem, 0.54vw, 0.62rem);
  font-weight: 800;
}

.profile-level-bar {
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.5vw, 8px);
}

.profile-level-bar > strong {
  width: clamp(35px, 4.45cqw, 58px);
  height: clamp(35px, 4.45cqw, 58px);
  clip-path: polygon(50% 0, 91% 24%, 91% 76%, 50% 100%, 9% 76%, 9% 24%);
  flex: none;
  display: grid;
  place-items: center;
  color: #f4f5e8;
  background: #3f7b0c;
  font-size: clamp(0.7rem, 1vw, 1.13rem);
}

.profile-level-bar div {
  min-width: 0;
  flex: 1;
}

.profile-level-bar b {
  display: block;
  color: #85d022;
  font-size: clamp(0.38rem, 0.55vw, 0.64rem);
  text-transform: uppercase;
}

.profile-level-bar i {
  height: clamp(6px, 0.6vw, 9px);
  margin-top: 4px;
  display: block;
  border-radius: 10px;
  background: #131b16;
}

.profile-level-bar em {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #579c0d, #a8e735);
}

.profile-level-bar small {
  color: #d7dfd2;
  font-size: clamp(0.32rem, 0.46vw, 0.53rem);
}

.profile-league {
  min-width: 0;
  border: 1px solid #333d2d;
  border-radius: 5px;
  padding: clamp(4px, 0.43vw, 7px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  background: #0c1311;
}

.profile-league h3 {
  color: #87d42b;
  font-size: clamp(0.46rem, 0.68vw, 0.78rem);
  text-transform: uppercase;
}

.profile-league .profile-art-slot {
  min-height: 0;
  flex: 1;
  width: 100%;
}

.profile-league strong {
  color: #e9eadc;
  font-size: clamp(0.34rem, 0.49vw, 0.57rem);
  text-transform: uppercase;
}

.profile-league > span {
  color: #edbd30;
  font-size: clamp(0.43rem, 0.62vw, 0.7rem);
  font-weight: 900;
}

.profile-facts {
  padding: clamp(4px, 0.4vw, 7px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(4px, 0.4vw, 6px);
}

.profile-facts article {
  min-width: 0;
  border-right: 1px solid #30402c;
  padding: 0 clamp(5px, 0.5vw, 8px);
  display: grid;
  align-content: center;
  gap: 3px;
}

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

.profile-facts span {
  color: #bda76f;
  font-size: clamp(0.33rem, 0.45vw, 0.53rem);
  text-transform: uppercase;
}

.profile-facts b {
  color: #81cc25;
  font-size: clamp(0.39rem, 0.55vw, 0.64rem);
}

.profile-statistics {
  padding: clamp(5px, 0.5vw, 8px);
}

.profile-statistics > div {
  height: calc(100% - clamp(17px, 1.48vw, 24px));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(4px, 0.4vw, 7px);
}

.profile-statistics article {
  min-height: 0;
  border: 1px solid #33412e;
  border-radius: 4px;
  padding: clamp(3px, 0.32vw, 5px);
  display: grid;
  place-items: center;
  text-align: center;
  background: #0d1412;
}

.profile-statistics span {
  color: #cdbb85;
  font-size: clamp(0.29rem, 0.39vw, 0.47rem);
  font-weight: 800;
  text-transform: uppercase;
}

.profile-statistics strong {
  color: #88cf27;
  font-size: clamp(0.5rem, 0.7vw, 0.82rem);
}

.profile-lower {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(6px, 0.57vw, 9px);
}

.profile-collection,
.profile-community {
  padding: clamp(5px, 0.5vw, 8px);
}

.profile-collection > div {
  height: calc(100% - clamp(16px, 1.45vw, 23px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(3px, 0.34vw, 5px);
}

.profile-collection article {
  min-height: 0;
  border: 1px solid #2b382c;
  border-radius: 4px;
  padding: clamp(3px, 0.3vw, 5px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  background: #0c1311;
}

.profile-collection .profile-art-slot {
  min-height: 0;
  flex: 1;
}

.profile-collection strong {
  color: #d8decf;
  font-size: clamp(0.26rem, 0.37vw, 0.44rem);
  text-transform: uppercase;
}

.profile-collection article > span {
  color: #83cc24;
  font-size: clamp(0.31rem, 0.43vw, 0.5rem);
  font-weight: 900;
}

.profile-community {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.38vw, 6px);
}

.profile-tab-copy {
  color: #c5cfbf;
  font-size: clamp(0.36rem, 0.5vw, 0.58rem);
  line-height: 1.45;
}

.profile-friends {
  display: flex;
  gap: clamp(3px, 0.35vw, 6px);
}

.profile-community .social-row {
  min-width: 0;
  flex: 1;
  margin: 0;
  padding: clamp(3px, 0.34vw, 5px);
  border: 1px solid #28372d;
  background: #0b1311;
}

.profile-community .social-row strong {
  font-size: clamp(0.31rem, 0.44vw, 0.52rem);
}

.profile-community .social-row span {
  color: #82ca25;
  font-size: clamp(0.27rem, 0.37vw, 0.44rem);
}

.profile-community .small-action {
  min-height: clamp(20px, 2.3cqw, 31px);
  padding: 3px 5px;
  color: #e9f3db;
  border-color: #557e23;
  background: #22450c;
  font-size: clamp(0.27rem, 0.39vw, 0.46rem);
}

.profile-community form {
  display: grid;
  grid-template-columns: 0.82fr 1.45fr auto;
  gap: clamp(3px, 0.32vw, 5px);
}

.profile-community form button {
  border: 1px solid #60921d;
  border-radius: 4px;
  color: #eaffd1;
  background: #39790c;
  font-size: clamp(0.33rem, 0.46vw, 0.54rem);
  font-weight: 900;
}

.profile-inbox {
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.profile-inbox p {
  padding: clamp(3px, 0.28vw, 4px) 0;
  border-bottom: 1px solid #253227;
  color: #adbaae;
  font-size: clamp(0.29rem, 0.41vw, 0.48rem);
}

@container profile-modal (max-width: 680px) {
  .profile-window .window-content {
    padding: 5px;
  }

  .profile-layout-v2,
  .profile-command,
  .profile-lower {
    gap: 5px;
  }

  .profile-navigation,
  .profile-identity,
  .profile-facts,
  .profile-statistics,
  .profile-collection,
  .profile-community {
    padding: 4px;
  }

  .profile-art-slot small {
    font-size: 0.22rem;
  }
}

.game-window.research-window {
  width: min(96vw, 1536px);
  height: min(94dvh, 944px);
  max-width: none;
  aspect-ratio: 1536 / 1024;
  border: 2px solid #243840;
  border-radius: 12px;
  overflow: hidden;
  background: #050b0e;
  box-shadow: 0 28px 80px #000, 0 0 34px rgb(39 192 225 / 20%);
  container-type: inline-size;
  container-name: research-modal;
}

.research-window .window-titlebar {
  height: 9%;
  min-height: 0;
  padding: clamp(8px, 0.9vw, 14px) clamp(15px, 1.4vw, 22px);
  border-bottom: 1px solid #1b2f36;
  color: #f2f5ed;
  background:
    radial-gradient(circle at 38% 0%, rgb(40 199 239 / 14%), transparent 38%),
    linear-gradient(90deg, #071015, #0b1417 42%, #071015);
}

.research-window .window-titlebar::before {
  content: "⚗";
  width: clamp(48px, 5.1vw, 70px);
  height: clamp(48px, 5.1vw, 70px);
  margin-right: clamp(12px, 1.2vw, 18px);
  border: 2px solid #31570f;
  border-radius: 15px;
  flex: none;
  display: grid;
  place-items: center;
  color: #99ee31;
  background:
    radial-gradient(circle at 50% 45%, rgb(170 244 50 / 26%), transparent 56%),
    linear-gradient(#102017, #07100f);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 900;
  text-shadow: 0 0 13px #67ce26;
  box-shadow: inset 0 0 14px #000, 0 0 14px rgb(83 202 36 / 26%);
}

.research-window .window-titlebar > div {
  flex: 1;
}

.research-window .panel-kicker {
  color: #82d82c;
  font-size: clamp(0.44rem, 0.58vw, 0.65rem);
  text-transform: uppercase;
}

.research-window .window-titlebar h2 {
  margin: 0;
  color: #f2f3ed;
  font-size: clamp(1.55rem, 2.35vw, 2.7rem);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.research-window .close-button {
  width: clamp(50px, 5.8vw, 78px);
  height: clamp(42px, 4.6vw, 62px);
  border: 2px solid #e1a928;
  border-radius: 8px;
  color: transparent;
  background:
    linear-gradient(#17242a, #091014),
    #0a1113;
  font-size: 0;
  box-shadow: inset 0 0 8px rgb(255 193 130 / 18%), 0 0 12px rgb(225 169 40 / 16%);
}

.research-window .close-button::before {
  content: "←";
  color: #f5bb32;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
}

.research-window .window-content {
  height: 91%;
  max-height: none;
  overflow-y: auto;
  padding: clamp(8px, 0.78vw, 12px);
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 50% 0%, rgb(8 94 127 / 25%), transparent 34%),
    linear-gradient(140deg, #061011, #081415);
}

.research-sheet,
.research-layout {
  height: 100%;
  min-height: 0;
}

.research-sheet {
  color: #e6eee7;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.research-screen {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(82px, 7.6vw, 112px) minmax(0, 1fr);
  gap: clamp(10px, 0.95vw, 14px);
}

.research-side-rail {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 0.78vw, 12px);
}

.research-side-rail button {
  border: 2px solid #253940;
  border-radius: 11px;
  padding: 8px 5px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #d8dfdc;
  background: linear-gradient(#11191d, #070c0f);
  font-size: clamp(0.66rem, 0.78vw, 0.9rem);
  font-weight: 900;
  text-transform: uppercase;
}

.research-side-rail button span {
  font-size: clamp(1.5rem, 2.4vw, 2.6rem);
  filter: drop-shadow(0 0 8px rgb(158 228 53 / 22%));
}

.research-side-rail button.selected {
  border-color: #75d119;
  color: white;
  background:
    radial-gradient(circle at 50% 30%, rgb(126 224 37 / 22%), transparent 55%),
    linear-gradient(#102210, #07100d);
  box-shadow: inset 0 0 16px rgb(126 224 37 / 14%), 0 0 16px rgb(126 224 37 / 20%);
}

.research-console {
  min-height: 100%;
  display: grid;
  grid-template-rows: clamp(58px, 6.2vw, 82px) clamp(56px, 5.5vw, 74px) minmax(260px, 1.25fr) auto clamp(88px, 8.5vw, 126px);
  gap: clamp(7px, 0.72vw, 12px);
}

.research-command-bar,
.research-stat-strip,
.research-showcase,
.research-card-section,
.research-active-lane {
  min-height: 0;
  border: 2px solid #183944;
  border-radius: clamp(7px, 0.7vw, 11px);
  background:
    radial-gradient(circle at 50% 0%, rgb(40 199 239 / 10%), transparent 50%),
    linear-gradient(125deg, #091315, #060c0d);
  box-shadow: inset 0 0 20px rgb(0 0 0 / 58%);
}

.research-command-bar {
  padding: clamp(7px, 0.68vw, 10px) clamp(12px, 1.05vw, 16px);
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: clamp(9px, 1vw, 16px);
}

.research-level-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.research-level-chip span,
.research-level-track span,
.research-resources small,
.research-stat-strip span {
  color: #d8e0d9;
  font-size: clamp(0.56rem, 0.66vw, 0.76rem);
  font-weight: 800;
  text-transform: uppercase;
}

.research-level-chip strong {
  width: clamp(38px, 4.4vw, 58px);
  height: clamp(38px, 4.4vw, 58px);
  clip-path: polygon(50% 0, 91% 24%, 91% 76%, 50% 100%, 9% 76%, 9% 24%);
  display: grid;
  place-items: center;
  color: #f7ffe8;
  background: linear-gradient(#87d019, #2c6b0b);
  font-size: clamp(1rem, 1.35vw, 1.55rem);
  box-shadow: 0 0 16px rgb(126 224 37 / 28%);
}

.research-level-track {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.research-resources {
  display: flex;
  gap: 10px;
}

.research-resources em {
  min-width: clamp(96px, 11vw, 145px);
  border: 1px solid #31505b;
  border-radius: 8px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  color: #eef8ff;
  background: linear-gradient(#101b20, #071013);
  font-size: clamp(0.86rem, 1.05vw, 1.2rem);
  font-style: normal;
  font-weight: 900;
}

.research-resources em::after {
  content: "+";
  width: 28px;
  height: 28px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(#9ce62c, #35770b);
}

.research-resources small {
  grid-column: 1 / -1;
  color: #8fb1b8;
}

.research-stat-strip {
  padding: clamp(6px, 0.58vw, 9px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(7px, 0.72vw, 12px);
}

.research-stat-strip article {
  min-width: 0;
  border-right: 1px solid #244149;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.research-stat-strip article:last-child {
  border-right: 0;
}

.research-stat-strip .research-art-slot {
  width: clamp(34px, 3.7vw, 54px);
  height: clamp(34px, 3.7vw, 54px);
  flex: none;
}

.research-stat-strip strong {
  color: #9ee435;
  font-size: clamp(0.9rem, 1.1vw, 1.28rem);
}

.research-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 31%, 390px);
  overflow: visible;
}

.research-lab-visual {
  min-width: 0;
  padding: clamp(8px, 0.75vw, 12px);
}

.research-lab-visual .research-facility-art {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.research-lab-visual .research-facility-art img,
.research-project .research-art-slot img,
.research-stat-strip .research-art-slot img,
.research-active-list .research-art-slot img {
  object-fit: contain;
  padding: 4px;
}

.research-center-upgrade {
  border-left: 2px solid #183944;
  padding: clamp(12px, 1.1vw, 18px);
  display: grid;
  align-content: start;
  gap: clamp(9px, 0.9vw, 14px);
  background: linear-gradient(150deg, #071214, #0d1718);
}

.research-center-upgrade h3,
.research-card-section h3,
.research-active-lane h3 {
  margin: 0;
  color: #9ee435;
  font-size: clamp(1rem, 1.35vw, 1.55rem);
  line-height: 1;
  text-transform: uppercase;
}

.research-center-upgrade > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #f4f7ee;
  font-size: clamp(0.9rem, 1vw, 1.18rem);
  font-weight: 900;
}

.research-center-upgrade > div::after {
  content: "››";
  order: 1;
  color: #9ee435;
  font-size: 1.4em;
}

.research-center-upgrade > div b {
  order: 2;
}

.research-center-upgrade ul {
  margin: 0;
  padding: 0;
  border: 1px solid #203a43;
  border-radius: 8px;
  overflow: hidden;
  list-style: none;
}

.research-center-upgrade li {
  padding: 9px 11px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #ecf2ed;
  border-bottom: 1px solid #203a43;
}

.research-center-upgrade li:last-child {
  border-bottom: 0;
}

.research-center-upgrade li em {
  color: #9ee435;
  font-style: normal;
  font-weight: 900;
}

.research-center-upgrade button {
  min-height: clamp(52px, 5.4vw, 72px);
  border: 2px solid #f2b128;
  border-radius: 8px;
  color: #fff3c4;
  background: linear-gradient(#f0bd2a, #995a08);
  font-size: clamp(0.92rem, 1.18vw, 1.38rem);
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #442707;
}

.research-center-upgrade button small {
  display: block;
  color: #321d09;
  font-size: clamp(0.54rem, 0.68vw, 0.78rem);
  text-shadow: none;
}

.research-card-section {
  padding: clamp(8px, 0.76vw, 12px);
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(7px, 0.72vw, 11px);
}

.research-card-row {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(7px, 0.72vw, 11px);
}

.research-card-row .research-project {
  border-color: #204250;
  background:
    radial-gradient(circle at 50% 12%, rgb(40 199 239 / 14%), transparent 42%),
    #091314;
}

.research-active-lane {
  padding: clamp(8px, 0.82vw, 13px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(7px, 0.72vw, 11px);
}

.research-empty-active,
.research-active-list article {
  min-height: 68px;
  border: 1px solid #203943;
  border-radius: 8px;
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #dce5df;
  background: linear-gradient(90deg, #0b1517, #081011);
}

.research-empty-active {
  justify-content: center;
}

.research-empty-active span {
  color: #8fa6a7;
}

.research-active-list {
  display: grid;
  gap: 9px;
}

.research-active-list .research-art-slot {
  width: 58px;
  height: 58px;
  flex: none;
}

.research-active-list article > div {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 6px;
}

.research-active-list i {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #101b1c;
}

.research-active-list i b {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #6bb616, #b7ea2d);
}

.research-active-list button {
  min-width: 150px;
  min-height: 52px;
  border: 2px solid #f2b128;
  border-radius: 8px;
  color: #fff3c4;
  background: linear-gradient(#d89d1f, #734208);
  font-weight: 900;
  text-transform: uppercase;
}

/* Stable research layout: keeps the sci-fi console look without clipping images. */
.game-window.research-window {
  width: min(96vw, 1480px);
  height: min(94dvh, 920px);
  aspect-ratio: auto;
}

.research-window .window-content {
  overflow-y: auto;
}

.research-screen {
  min-height: 100%;
  align-items: stretch;
}

.research-console {
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}

.research-command-bar,
.research-stat-strip,
.research-showcase,
.research-card-section,
.research-active-lane {
  flex: none;
}

.research-showcase {
  min-height: clamp(330px, 34dvh, 430px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}

.research-lab-visual {
  min-height: 0;
}

.research-lab-visual .research-facility-art {
  height: 100%;
  min-height: 280px;
}

.research-card-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
}

.research-project {
  min-height: 330px;
  height: auto;
}

.research-project .research-art-slot {
  min-height: 150px;
  max-height: none;
}

.research-active-lane {
  min-height: 110px;
}

.research-layout {
  display: grid;
  grid-template-columns: 0.73fr 1.94fr 0.76fr;
  gap: clamp(6px, 0.68vw, 11px);
}

.research-panel,
.research-hero,
.research-active,
.research-library {
  min-height: 0;
  border: 2px solid #183944;
  border-radius: clamp(5px, 0.58vw, 9px);
  background: linear-gradient(125deg, #091315, #060c0d);
  box-shadow: inset 0 0 20px rgb(0 0 0 / 58%);
}

.research-panel {
  padding: clamp(7px, 0.64vw, 11px);
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.46vw, 8px);
}

.research-panel h3,
.research-hero h3,
.research-active h3,
.research-library h3 {
  margin: 0;
  color: #28c7ef;
  font-size: clamp(0.72rem, 0.88vw, 1rem);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.research-panel h3 {
  padding-bottom: clamp(5px, 0.46vw, 8px);
  border-bottom: 1px solid #24393d;
  color: #9ddd38;
}

.research-art-slot {
  min-width: 0;
  border: 1px dashed #35524f;
  border-radius: clamp(4px, 0.42vw, 7px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  color: #72d430;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgb(16 31 30 / 75%) 0 7px, rgb(7 14 15 / 75%) 7px 14px);
}

.research-art-slot span {
  font-size: clamp(0.34rem, 0.51vw, 0.59rem);
  font-weight: 900;
}

.research-art-slot small {
  max-width: 96%;
  color: #90a5a0;
  font-size: clamp(0.26rem, 0.35vw, 0.43rem);
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.research-art-slot.has-image {
  overflow: hidden;
  border-style: solid;
  border-color: #235567;
  background: radial-gradient(circle, rgb(17 138 174 / 20%), #081112 74%);
}

.research-art-slot.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgb(0 0 0 / 68%));
}

.research-booster {
  min-height: 0;
  flex: 1;
  border: 1px solid #223a35;
  border-radius: 5px;
  padding: clamp(4px, 0.4vw, 7px);
  display: flex;
  align-items: stretch;
  gap: clamp(4px, 0.4vw, 7px);
  background: #091413;
}

.research-booster .research-art-slot {
  width: clamp(43px, 5.2cqw, 72px);
  flex: none;
}

.research-booster > div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.research-booster strong,
.research-bonus-row strong {
  color: #ecf0ea;
  font-size: clamp(0.58rem, 0.62vw, 0.72rem);
  text-transform: uppercase;
}

.research-booster span,
.research-queue p,
.research-bonus-row span {
  color: #aebbb2;
  font-size: clamp(0.48rem, 0.54vw, 0.62rem);
  line-height: 1.25;
}

.research-effect-badge {
  min-height: clamp(18px, 2.1cqw, 31px);
  margin-top: auto;
  border: 1px solid #629929;
  border-radius: 4px;
  padding: 4px 8px;
  display: inline-grid;
  place-items: center;
  color: #b7de7c;
  background:
    linear-gradient(90deg, rgb(92 166 13 / 24%), rgb(40 199 239 / 15%)),
    #13220e;
  font-size: clamp(0.48rem, 0.54vw, 0.62rem);
  font-style: normal;
  font-weight: 800;
  box-shadow: inset 0 0 12px rgb(158 228 53 / 10%);
}

.research-effect-badge::before {
  content: "Etki";
  margin-right: 6px;
  color: #28c7ef;
  font-size: 0.85em;
  text-transform: uppercase;
}

.research-queue {
  min-height: clamp(64px, 8.3cqw, 106px);
  border: 1px solid #2b433b;
  border-radius: 5px;
  padding: clamp(6px, 0.58vw, 10px);
  background: linear-gradient(#111c18, #0a1111);
}

.research-queue strong {
  display: block;
  margin: clamp(5px, 0.45vw, 8px) 0;
  color: #eef2eb;
  font-size: clamp(0.92rem, 1.1vw, 1.28rem);
}

.research-core {
  min-height: 0;
  display: grid;
  grid-template-rows: 35.5% 39% minmax(0, 1fr);
  gap: clamp(6px, 0.65vw, 10px);
}

.research-hero {
  padding: clamp(7px, 0.65vw, 11px);
  display: flex;
  gap: clamp(7px, 0.7vw, 12px);
  border-color: #1a505e;
  background:
    radial-gradient(circle at 78% 50%, rgb(5 125 177 / 22%), transparent 40%),
    linear-gradient(110deg, #0b1517, #071014);
}

.research-hero-copy {
  width: 43%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.42vw, 7px);
}

.research-hero h3 {
  color: #edb334;
}

.research-rank {
  min-height: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.52vw, 9px);
}

.research-rank strong {
  width: clamp(40px, 5.4cqw, 70px);
  height: clamp(40px, 5.4cqw, 70px);
  clip-path: polygon(50% 0, 90% 22%, 90% 78%, 50% 100%, 10% 78%, 10% 22%);
  flex: none;
  display: grid;
  place-items: center;
  color: white;
  background: #508f11;
  font-size: clamp(0.76rem, 1.2vw, 1.36rem);
}

.research-rank p,
.research-rule {
  color: #bdc9c1;
  font-size: clamp(0.52rem, 0.58vw, 0.68rem);
  line-height: 1.35;
}

.research-progress {
  position: relative;
  height: clamp(14px, 1.65cqw, 24px);
  border-radius: 4px;
  overflow: hidden;
  background: #131d1a;
}

.research-progress i {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #5ca60d, #b2e832);
}

.research-progress b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f6f5e8;
  font-size: clamp(0.54rem, 0.6vw, 0.72rem);
}

.research-facility-art {
  min-width: 0;
  flex: 1;
  height: 100%;
  border-color: #1d6c88;
  color: #34c9ed;
}

.research-active,
.research-library {
  padding: clamp(6px, 0.58vw, 10px);
}

.research-active > h3,
.research-library > h3 {
  margin-bottom: clamp(5px, 0.48vw, 8px);
}

.research-active > div {
  height: calc(100% - clamp(18px, 1.6vw, 26px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(5px, 0.48vw, 8px);
}

.research-project {
  min-height: clamp(250px, 23vw, 330px);
  border: 1px solid #243c3c;
  border-radius: 8px;
  padding: clamp(6px, 0.55vw, 9px);
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.42vw, 7px);
  background: #091314;
}

.research-project .research-art-slot {
  width: 100%;
  height: auto;
  min-height: clamp(108px, 10vw, 150px);
  aspect-ratio: 1.36;
  flex: none;
  border-color: #28566a;
}

.research-project strong {
  color: #e9eeea;
  font-size: clamp(0.66rem, 0.78vw, 0.9rem);
  text-transform: uppercase;
  text-align: center;
}

.research-project > span {
  color: #a7b6b1;
  font-size: clamp(0.52rem, 0.58vw, 0.68rem);
  text-align: center;
}

.research-project p {
  margin: 0;
  color: #b9c9c4;
  font-size: clamp(0.5rem, 0.58vw, 0.66rem);
  line-height: 1.28;
  text-align: center;
}

.research-project button {
  min-height: clamp(32px, 3cqw, 44px);
  border: 1px solid #d69b20;
  border-radius: 4px;
  color: #fff1bd;
  background: linear-gradient(#bc7814, #74400a);
  font-size: clamp(0.58rem, 0.63vw, 0.74rem);
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 28%), 0 0 14px rgb(214 155 32 / 13%);
}

.research-project button:disabled,
.research-tech button:disabled {
  color: #91a190;
  border-color: #344d43;
  background: #13201c;
  box-shadow: none;
}

.research-project button small {
  display: block;
  color: #ffe071;
  font-size: clamp(0.43rem, 0.48vw, 0.56rem);
}

.research-project.type-plastic button,
.research-project.type-paper button {
  border-color: #277fc5;
  background: linear-gradient(#1870ac, #0a3c63);
}

.research-project.type-power button {
  border-color: #80bb2a;
  background: linear-gradient(#579b14, #285307);
}

.research-library > div {
  height: calc(100% - clamp(16px, 1.48vw, 24px));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(4px, 0.4vw, 7px);
}

.research-tech {
  min-height: 0;
  border: 1px solid #233a39;
  border-radius: 5px;
  padding: clamp(3px, 0.34vw, 6px);
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.3vw, 5px);
  background: #091315;
}

.research-tech .research-art-slot {
  width: clamp(36px, 4.4cqw, 57px);
  height: 100%;
  flex: none;
}

.research-tech div {
  min-width: 0;
  flex: 1;
}

.research-tech strong {
  display: block;
  color: #d9e4de;
  font-size: clamp(0.44rem, 0.48vw, 0.56rem);
  line-height: 1.2;
  text-transform: uppercase;
}

.research-tech span {
  color: #58cbe7;
  font-size: clamp(0.42rem, 0.47vw, 0.55rem);
}

.research-tech button {
  width: clamp(18px, 2cqw, 28px);
  height: clamp(22px, 2.35cqw, 33px);
  border: 1px solid #559c1a;
  border-radius: 4px;
  color: #efffd9;
  background: #34740d;
  font-weight: 900;
  box-shadow: 0 0 10px rgb(85 156 26 / 15%);
}

.research-bonus-row {
  min-height: 0;
  flex: 1;
  border: 1px solid #263b37;
  border-radius: 5px;
  padding: clamp(4px, 0.42vw, 7px);
  display: flex;
  align-items: stretch;
  gap: clamp(4px, 0.42vw, 7px);
  background: #091313;
}

.research-bonus-row .research-art-slot {
  width: clamp(38px, 4.8cqw, 64px);
  flex: none;
}

.research-bonus-row > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
}

.research-bonus-row span {
  color: #86d52d;
  font-weight: 800;
}

.research-points {
  border: 1px solid #313e39;
  border-radius: 5px;
  padding: clamp(6px, 0.55vw, 9px);
  display: grid;
  gap: clamp(4px, 0.42vw, 7px);
  background: linear-gradient(#14191b, #0b1111);
}

.research-points span {
  color: #dbe2dc;
  font-size: clamp(0.6rem, 0.64vw, 0.74rem);
  font-weight: 900;
  text-transform: uppercase;
}

.research-points strong {
  color: #e8e8e2;
  font-size: clamp(1rem, 1.12vw, 1.3rem);
}

.research-points em {
  min-height: clamp(27px, 3.3cqw, 45px);
  border: 1px solid #217e9d;
  border-radius: 5px;
  padding: 5px 8px;
  display: grid;
  place-items: center;
  color: #6cc9e8;
  background:
    radial-gradient(circle at 20% 20%, rgb(108 201 232 / 18%), transparent 45%),
    #082632;
  font-size: clamp(0.62rem, 0.68vw, 0.78rem);
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.research-points em small {
  display: block;
  margin-top: 2px;
  color: #9eb8b6;
  font-size: inherit;
}

@container research-modal (max-width: 820px) {
  .research-window .window-content {
    padding: 5px;
  }

  .research-layout,
  .research-panel,
  .research-core {
    gap: 5px;
  }

  .research-panel,
  .research-hero,
  .research-active,
  .research-library {
    padding: 5px;
  }

  .research-art-slot span {
    font-size: 0.3rem;
  }

  .research-art-slot small {
    font-size: 0.22rem;
  }
}

.game-window.power-window {
  width: auto;
  height: 94%;
  max-width: 98%;
  aspect-ratio: 1536 / 1024;
  border: 2px solid #716044;
  border-radius: clamp(6px, 0.7vw, 11px);
  overflow: hidden;
  background: #090d0d;
  box-shadow: 0 26px 68px #000, 0 0 24px rgb(224 143 14 / 25%);
  container-type: inline-size;
  container-name: power-modal;
}

.power-window .window-titlebar {
  height: 11%;
  min-height: 0;
  padding: clamp(7px, 0.86vw, 14px) clamp(13px, 1.35vw, 22px);
  border-bottom: 2px solid #544a37;
  color: #f0efe7;
  background:
    linear-gradient(90deg, rgb(25 31 31 / 97%), rgb(9 13 14 / 97%)),
    repeating-linear-gradient(90deg, #222d2e 0 10px, #0c1314 10px 14px);
}

.power-window .window-titlebar::before {
  content: "⚡";
  width: clamp(50px, 6.3vw, 92px);
  height: clamp(50px, 6.3vw, 92px);
  margin-right: clamp(8px, 1vw, 16px);
  border: 3px solid #795c22;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #ffc51c;
  background: radial-gradient(circle, #312b1a, #091011 67%);
  font-size: clamp(1.55rem, 3.25vw, 3rem);
  text-shadow: 0 0 12px #d98c17;
  box-shadow: inset 0 0 13px #000, 0 0 10px rgb(237 165 24 / 35%);
}

.power-window .window-titlebar > div {
  flex: 1;
}

.power-window .panel-kicker {
  color: #d88f1c;
  font-size: clamp(0.44rem, 0.58vw, 0.65rem);
}

.power-window .window-titlebar h2 {
  margin: 0;
  color: #f5f4ee;
  font-size: clamp(1.35rem, 2.3vw, 2.45rem);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.power-window .close-button {
  border: 2px solid #944327;
  color: #ffe6d4;
  background: linear-gradient(#da562f, #76200f);
  box-shadow: inset 0 0 8px rgb(255 194 134 / 35%);
}

.power-window .window-content {
  height: 89%;
  max-height: none;
  overflow: hidden;
  padding: clamp(7px, 0.72vw, 12px);
  background:
    radial-gradient(circle at 30% 13%, rgb(24 70 87 / 25%), transparent 29%),
    linear-gradient(135deg, #071011, #0c1110);
}

.power-sheet,
.power-columns {
  height: 100%;
  min-height: 0;
}

.power-sheet {
  color: #e9e9df;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.power-columns {
  display: grid;
  grid-template-columns: 1.04fr 1fr 0.86fr;
  gap: clamp(6px, 0.7vw, 11px);
}

.power-panel {
  min-height: 0;
  border: 2px solid #2a3432;
  border-radius: clamp(5px, 0.6vw, 9px);
  padding: clamp(7px, 0.7vw, 12px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.56vw, 9px);
  background: linear-gradient(120deg, #0b1213, #070c0d);
  box-shadow: inset 0 0 20px rgb(0 0 0 / 58%);
}

.power-panel h3 {
  margin: 0;
  padding-bottom: clamp(5px, 0.46vw, 8px);
  border-bottom: 1px solid #453a27;
  color: #ebb42c;
  font-size: clamp(0.65rem, 1.02vw, 1.13rem);
  font-weight: 900;
  text-transform: uppercase;
}

.power-panel h3::before {
  content: "› ";
}

.power-art-slot {
  min-width: 0;
  border: 1px dashed #47504d;
  border-radius: clamp(4px, 0.45vw, 7px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  color: #eeae25;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgb(21 28 28 / 75%) 0 7px, rgb(9 14 15 / 75%) 7px 14px);
}

.power-art-slot span {
  font-size: clamp(0.4rem, 0.58vw, 0.68rem);
  font-weight: 900;
}

.power-art-slot small {
  max-width: 94%;
  color: #93a09b;
  font-size: clamp(0.29rem, 0.39vw, 0.47rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.power-art-slot.has-image {
  overflow: hidden;
  border-style: solid;
  border-color: #30453d;
  background: radial-gradient(circle, rgb(38 93 77 / 25%), #080f10 74%);
}

.power-art-slot.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgb(0 0 0 / 72%));
}

.power-shop-sheet {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 0.9fr 1.03fr 1.03fr;
  gap: clamp(6px, 0.7vw, 11px);
}

.power-facility-art {
  min-height: 0;
  flex: 1;
}

.power-level {
  height: clamp(45px, 5.8cqw, 79px);
  border: 1px solid #323b37;
  border-radius: 5px;
  padding: clamp(4px, 0.42vw, 7px);
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.62vw, 10px);
  background: #0a1112;
}

.power-level > strong {
  width: clamp(40px, 5.3cqw, 70px);
  height: clamp(40px, 5.3cqw, 70px);
  clip-path: polygon(50% 0, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%);
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: #ad7115;
  font-size: clamp(0.82rem, 1.32vw, 1.42rem);
}

.power-level div {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
  align-items: center;
  text-transform: uppercase;
}

.power-level span {
  color: #c4c9be;
  font-size: clamp(0.43rem, 0.59vw, 0.68rem);
}

.power-level b {
  color: #f5f4e9;
  font-size: clamp(0.55rem, 0.78vw, 0.89rem);
}

.power-level i {
  height: clamp(6px, 0.65vw, 9px);
  grid-column: 1 / 3;
  display: block;
  border-radius: 10px;
  background: #151d1c;
}

.power-level em,
.power-generator em,
.power-storage em,
.fuel-reserve em {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #d68814, #ffd134);
}

.power-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(3px, 0.35vw, 6px);
}

.power-stats article {
  min-height: clamp(38px, 4.4cqw, 62px);
  border: 1px solid #273432;
  border-radius: 5px;
  display: grid;
  place-items: center;
  gap: 2px;
  background: #0c1516;
  text-align: center;
}

.power-stats span,
.power-supplies span {
  color: #aab6ae;
  font-size: clamp(0.35rem, 0.49vw, 0.57rem);
  font-weight: 700;
  text-transform: uppercase;
}

.power-stats b {
  color: #9ae332;
  font-size: clamp(0.5rem, 0.7vw, 0.79rem);
}

.power-supplies {
  display: flex;
  gap: clamp(4px, 0.42vw, 7px);
}

.power-supplies span {
  flex: 1;
  border: 1px solid #293733;
  border-radius: 4px;
  padding: clamp(4px, 0.42vw, 7px);
  display: flex;
  justify-content: space-between;
  background: #0b1314;
}

.power-supplies b {
  color: #e8b330;
}

.power-upgrade,
.power-fuel-button {
  min-height: clamp(43px, 5.9cqw, 78px);
  border: 2px solid #95c320;
  border-radius: 6px;
  color: #f8f7e6;
  background: linear-gradient(#71bd17, #386e0c);
  font-size: clamp(0.68rem, 1.18vw, 1.32rem);
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: inset 0 0 10px rgb(203 255 74 / 35%), 0 0 9px rgb(113 187 18 / 26%);
}

.power-upgrade small,
.power-fuel-button small {
  display: block;
  color: #f6d164;
  font-size: clamp(0.38rem, 0.51vw, 0.6rem);
}

.power-generator {
  min-height: clamp(75px, 10.1cqw, 138px);
  border: 1px solid #303a39;
  border-radius: 5px;
  padding: clamp(4px, 0.45vw, 7px);
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.53vw, 9px);
  background: #0a1213;
}

.power-generator > b {
  width: clamp(28px, 3.6cqw, 45px);
  height: clamp(28px, 3.6cqw, 45px);
  flex: none;
  display: grid;
  place-items: center;
  color: #edb429;
  background: #161b19;
  border: 1px solid #5d4724;
  font-size: clamp(0.5rem, 0.72vw, 0.82rem);
}

.power-generator .power-art-slot {
  width: clamp(76px, 10.4cqw, 137px);
  height: 100%;
  flex: none;
}

.power-generator > div:not(.power-art-slot) {
  min-width: 0;
  flex: 1;
}

.power-generator > div:not(.power-art-slot) > span,
.power-storage > div:not(.power-art-slot) > span {
  display: block;
  color: #acb5ac;
  font-size: clamp(0.39rem, 0.55vw, 0.65rem);
  text-transform: uppercase;
}

.power-generator div > strong,
.power-storage strong {
  display: block;
  margin: clamp(3px, 0.32vw, 5px) 0;
  color: #94dd35;
  font-size: clamp(0.65rem, 1.06vw, 1.18rem);
  text-transform: uppercase;
}

.power-generator i,
.power-storage i,
.fuel-reserve i {
  height: clamp(6px, 0.62vw, 9px);
  display: block;
  border-radius: 10px;
  background: #161d1b;
}

.power-generator > small {
  align-self: flex-end;
  color: #82cd2c;
  font-size: clamp(0.36rem, 0.48vw, 0.56rem);
  font-weight: 800;
}

.power-generator.locked {
  opacity: 0.62;
}

.power-locked {
  min-height: clamp(33px, 4.4cqw, 59px);
  border: 1px solid #262c2b;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #858b85;
  background: #0e1414;
  font-size: clamp(0.42rem, 0.61vw, 0.71rem);
  font-weight: 800;
  text-transform: uppercase;
}

.power-subheading {
  margin-top: clamp(2px, 0.26vw, 4px) !important;
}

.power-storage {
  min-height: 0;
  flex: 1;
  border: 1px solid #2f3935;
  border-radius: 5px;
  padding: clamp(5px, 0.53vw, 9px);
  display: flex;
  gap: clamp(7px, 0.7vw, 11px);
  align-items: center;
  background: #091112;
}

.power-storage-art {
  width: 48%;
  height: 100%;
}

.power-storage > div:not(.power-art-slot) {
  min-width: 0;
  flex: 1;
}

.power-storage b {
  display: block;
  margin-top: 5px;
  color: #cbd7c6;
  font-size: clamp(0.41rem, 0.6vw, 0.68rem);
}

.fuel-reserve {
  min-height: clamp(91px, 12.4cqw, 160px);
  border: 1px solid #313a34;
  border-radius: 5px;
  padding: clamp(5px, 0.55vw, 9px);
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.7vw, 12px);
  background: #091112;
}

.power-fuel-art {
  width: 42%;
  height: 100%;
  flex: none;
}

.fuel-reserve > div:not(.power-art-slot) {
  min-width: 0;
  flex: 1;
}

.fuel-reserve strong {
  display: block;
  margin-bottom: clamp(6px, 0.63vw, 10px);
  color: #96dc2d;
  font-size: clamp(0.58rem, 0.88vw, 0.98rem);
  text-transform: uppercase;
}

.fuel-reserve span {
  display: block;
  margin-top: clamp(5px, 0.5vw, 8px);
  color: #bdc9bd;
  font-size: clamp(0.36rem, 0.5vw, 0.58rem);
  line-height: 1.25;
}

.power-fuel-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(5px, 0.55vw, 9px);
}

.power-fuel-button {
  border-color: #e3ad25;
  color: #231707;
  background: linear-gradient(#f6bc25, #aa6410);
  box-shadow: inset 0 0 10px rgb(255 232 127 / 45%);
}

.power-fuel-button.fuel-load {
  border-color: #91c833;
  background: linear-gradient(#88c833, #3f8114);
}

.power-fuel-button small {
  color: #56350f;
}

.power-store {
  overflow: hidden;
}

.power-help {
  color: #b6c0b7;
  font-size: clamp(0.39rem, 0.55vw, 0.65rem);
}

.power-installed {
  min-height: clamp(80px, 10.5cqw, 145px);
  border: 1px solid #37463d;
  border-radius: 6px;
  padding: clamp(4px, 0.45vw, 7px);
  display: flex;
  gap: clamp(7px, 0.6vw, 10px);
  align-items: center;
  background: linear-gradient(100deg, #112019, #081011);
}

.power-installed-art {
  width: 48%;
  height: 100%;
  flex: none;
}

.power-installed > div:not(.power-art-slot) {
  min-width: 0;
  flex: 1;
}

.power-installed span {
  color: #a7b3ab;
  font-size: clamp(0.39rem, 0.54vw, 0.63rem);
  font-weight: 700;
  text-transform: uppercase;
}

.power-installed strong {
  margin: clamp(3px, 0.34vw, 6px) 0;
  display: block;
  color: #8fdf31;
  font-size: clamp(0.72rem, 1.1vw, 1.22rem);
}

.power-installed i {
  height: clamp(6px, 0.6vw, 9px);
  display: block;
  border-radius: 10px;
  background: #151d1b;
}

.power-installed em {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #d68814, #ffd134);
}

.power-installed small {
  color: #c5cfbf;
  font-size: clamp(0.37rem, 0.5vw, 0.59rem);
}

.energy-offer-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: clamp(4px, 0.4vw, 7px);
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: #718e27 #111917;
}

.energy-offer {
  min-height: clamp(48px, 5.45cqw, 73px);
  border: 1px solid #2c3932;
  border-radius: 5px;
  padding: clamp(3px, 0.33vw, 5px);
  display: grid;
  grid-template-columns: clamp(51px, 6.5cqw, 87px) 1fr auto;
  align-items: center;
  gap: clamp(4px, 0.44vw, 7px);
  background: #0a1213;
}

.energy-offer > img {
  width: 100%;
  height: clamp(39px, 4.7cqw, 63px);
  object-fit: contain;
  filter: drop-shadow(0 2px 5px #000);
}

.energy-offer strong {
  display: block;
  color: #edf0e6;
  font-size: clamp(0.53rem, 0.76vw, 0.87rem);
}

.energy-offer small {
  color: #a4aca5;
  font-size: clamp(0.34rem, 0.46vw, 0.54rem);
}

.energy-offer button {
  min-width: clamp(63px, 8.8cqw, 119px);
  min-height: clamp(31px, 3.75cqw, 51px);
  border: 1px solid #7fae1d;
  border-radius: 5px;
  color: #f7ffe7;
  background: linear-gradient(#69ae14, #33680a);
  font-size: clamp(0.42rem, 0.61vw, 0.71rem);
  font-weight: 900;
  text-transform: uppercase;
}

.energy-offer.available {
  border-color: #91bd20;
  box-shadow: inset 0 0 10px rgb(125 203 29 / 18%);
}

.energy-offer.owned button {
  color: #89d02d;
  border-color: #38552d;
  background: #101b15;
}

.energy-offer.locked {
  opacity: 0.68;
}

.power-shield {
  flex: 0 0 clamp(51px, 6.3cqw, 88px);
  border: 1px solid #293b39;
  border-radius: 6px;
  padding: clamp(4px, 0.38vw, 6px);
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.55vw, 9px);
  background: #0b1515;
}

.power-shield .power-art-slot {
  width: clamp(42px, 5.4cqw, 70px);
  height: 100%;
  flex: none;
}

.power-shield strong {
  display: block;
  color: #e8efe7;
  font-size: clamp(0.43rem, 0.64vw, 0.74rem);
}

.power-shield span {
  color: #4ebce6;
  font-size: clamp(0.34rem, 0.48vw, 0.56rem);
}

.power-resources {
  display: grid;
  gap: clamp(4px, 0.43vw, 7px);
}

.power-resources article {
  min-height: clamp(35px, 4.5cqw, 58px);
  border: 1px solid #26312e;
  border-radius: 5px;
  padding: 0 clamp(7px, 0.65vw, 11px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0b1314;
}

.power-resources span {
  color: #dce0d8;
  font-size: clamp(0.49rem, 0.7vw, 0.81rem);
}

.power-resources b {
  color: #89d531;
  font-size: clamp(0.55rem, 0.78vw, 0.88rem);
}

.power-bonuses {
  min-height: 0;
  display: grid;
  gap: clamp(4px, 0.43vw, 7px);
}

.power-bonuses article {
  min-height: clamp(41px, 5.5cqw, 70px);
  border: 1px solid #27322e;
  border-radius: 5px;
  padding: clamp(3px, 0.33vw, 5px);
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.5vw, 8px);
  background: #0b1314;
}

.power-bonuses .power-art-slot {
  width: clamp(47px, 6.5cqw, 82px);
  height: 100%;
  flex: none;
}

.power-bonuses strong {
  display: block;
  color: #edf0e9;
  font-size: clamp(0.47rem, 0.65vw, 0.75rem);
}

.power-bonuses div:not(.power-art-slot) span {
  color: #34bfe9;
  font-size: clamp(0.37rem, 0.53vw, 0.61rem);
}

@container power-modal (max-width: 820px) {
  .power-window .window-content {
    padding: 5px;
  }

  .power-columns,
  .power-panel {
    gap: 5px;
  }

  .power-panel {
    padding: 5px;
  }

  .power-panel h3 {
    font-size: 0.62rem;
  }

  .power-art-slot span {
    font-size: 0.34rem;
  }

  .power-art-slot small {
    font-size: 0.24rem;
  }
}

.game-window.storage-window {
  width: auto;
  height: 94%;
  max-width: 98%;
  aspect-ratio: 1536 / 1024;
  border: 2px solid #86723f;
  border-radius: clamp(6px, 0.7vw, 11px);
  overflow: hidden;
  background: #08110e;
  box-shadow: 0 26px 68px #000, 0 0 20px rgb(123 190 13 / 35%);
  container-type: inline-size;
  container-name: storage-modal;
}

.storage-window .window-titlebar {
  height: 10.7%;
  min-height: 0;
  padding: clamp(7px, 0.9vw, 14px) clamp(13px, 1.35vw, 22px);
  border-bottom: 2px solid #5b5b36;
  color: #f4f5e9;
  background: linear-gradient(90deg, #1c2621, #080d0e);
}

.storage-window .window-titlebar::before {
  content: "♻";
  margin-right: clamp(8px, 1vw, 15px);
  color: #91db20;
  font-size: clamp(1.6rem, 3.5vw, 3.2rem);
  font-weight: 900;
  text-shadow: 0 0 12px #63b20e;
}

.storage-window .window-titlebar > div {
  flex: 1;
}

.storage-window .panel-kicker {
  color: #bdc830;
  font-size: clamp(0.44rem, 0.58vw, 0.65rem);
}

.storage-window .window-titlebar h2 {
  margin: 0;
  color: #f4f5eb;
  font-size: clamp(1.35rem, 2.25vw, 2.35rem);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.storage-window .close-button {
  border-color: #716434;
  color: #efd260;
  background: linear-gradient(#313328, #121914);
}

.storage-window .window-content {
  height: 89.3%;
  max-height: none;
  overflow: hidden;
  padding: clamp(7px, 0.7vw, 12px);
  background: radial-gradient(circle at 50% 0, rgb(21 78 86 / 22%), transparent 44%), #060c0c;
}

.warehouse-sheet {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.65vw, 11px);
  color: #e4e8db;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.warehouse-status {
  flex: 0 0 clamp(29px, 3.6vw, 47px);
  display: flex;
  justify-content: flex-end;
  gap: clamp(5px, 0.55vw, 9px);
}

.warehouse-status article {
  min-width: clamp(95px, 12.4cqw, 170px);
  border: 1px solid #30462b;
  border-radius: 5px;
  padding: clamp(3px, 0.32vw, 5px) clamp(5px, 0.55vw, 9px);
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.4vw, 7px);
  background: linear-gradient(90deg, #101815, #0a1010);
}

.warehouse-status img {
  width: clamp(22px, 2.8cqw, 38px);
  height: clamp(22px, 2.8cqw, 38px);
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgb(140 213 37 / 34%));
}

.warehouse-status span {
  color: #b7c5af;
  font-size: clamp(0.34rem, 0.47vw, 0.56rem);
  font-weight: 800;
  text-transform: uppercase;
}

.warehouse-status strong {
  margin-left: auto;
  color: #92dc30;
  font-size: clamp(0.5rem, 0.7vw, 0.8rem);
}

.warehouse-columns {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.04fr 1.05fr;
  gap: clamp(6px, 0.65vw, 11px);
}

.warehouse-panel {
  min-height: 0;
  border: 2px solid #273c31;
  border-radius: clamp(6px, 0.65vw, 10px);
  padding: clamp(7px, 0.65vw, 11px);
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.45vw, 8px);
  background: linear-gradient(120deg, #0b1513, #070d0d);
  box-shadow: inset 0 0 18px rgb(0 0 0 / 62%);
}

.warehouse-panel h3 {
  margin-bottom: 0;
  color: #7eda2d;
  font-size: clamp(0.72rem, 1.25vw, 1.28rem);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.warehouse-panel h3 b {
  margin-right: clamp(4px, 0.4vw, 8px);
}

.inputs-panel {
  border-color: #174a66;
}

.inputs-panel h3 {
  color: #39bfff;
}

.products-panel {
  border-color: #3e511d;
}

.warehouse-caption {
  color: #ddcf72;
  font-size: clamp(0.47rem, 0.68vw, 0.76rem);
}

.warehouse-incoming,
.warehouse-input,
.warehouse-product {
  min-height: 0;
  flex: 1 1 0;
  border: 1px solid #354923;
  border-radius: clamp(4px, 0.48vw, 7px);
  padding: clamp(3px, 0.37vw, 6px);
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.45vw, 8px);
  background: linear-gradient(90deg, #0c1614, #0a1210);
}

.storage-art-slot {
  width: clamp(47px, 6.3cqw, 92px);
  height: 100%;
  min-height: clamp(36px, 4.3cqw, 62px);
  flex: none;
  border: 1px dashed #496052;
  border-radius: 4px;
  padding: 3px;
  display: grid;
  place-items: center;
  align-content: center;
  color: #87c949;
  background: rgb(9 20 18 / 82%);
  text-align: center;
}

.storage-art-slot span {
  font-size: clamp(0.39rem, 0.52vw, 0.6rem);
  font-weight: 800;
}

.storage-art-slot small {
  color: #9aa891;
  font-size: clamp(0.28rem, 0.38vw, 0.45rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.storage-art-slot.has-image {
  overflow: hidden;
  border-style: solid;
  border-color: #304538;
  background: radial-gradient(circle, rgb(60 94 46 / 20%), #081110 73%);
}

.storage-art-slot.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 65%));
}

.warehouse-incoming .storage-art-slot {
  width: clamp(55px, 7.15cqw, 103px);
}

.warehouse-input .storage-art-slot {
  border-color: #224756;
}

.warehouse-product .storage-art-slot {
  border-color: #3d5128;
}

.warehouse-incoming > div:not(.storage-art-slot),
.warehouse-product-copy {
  min-width: 0;
  flex: 1;
}

.warehouse-incoming strong,
.warehouse-product-copy strong {
  display: block;
  color: #e5e5dc;
  font-size: clamp(0.46rem, 0.67vw, 0.77rem);
  text-transform: uppercase;
}

.warehouse-incoming span {
  color: #c5bea2;
  font-size: clamp(0.43rem, 0.57vw, 0.67rem);
}

.warehouse-incoming > b {
  color: #d7d32b;
  font-size: clamp(0.48rem, 0.66vw, 0.77rem);
  white-space: nowrap;
}

.warehouse-empty-trucks {
  min-height: clamp(54px, 7cqw, 96px);
  border: 1px dashed #3f552b;
  border-radius: 7px;
  padding: clamp(8px, 0.7vw, 12px);
  display: grid;
  place-items: center;
  color: #b8cfa3;
  background: rgb(8 16 13 / 72%);
  font-size: clamp(0.48rem, 0.66vw, 0.76rem);
  text-align: center;
}

.truck-queue-card.waiting {
  animation: truck-card-signal 2.4s ease-in-out infinite;
}

.truck-queue-card.unloading {
  border-color: #d6a323;
  box-shadow: inset 0 0 13px rgb(246 178 35 / 20%);
}

.truck-queue-card > div > em {
  display: block;
  margin-top: 2px;
  color: #93da34;
  font-style: normal;
  font-size: clamp(0.38rem, 0.5vw, 0.58rem);
}

.truck-queue-card > div > i {
  height: clamp(4px, 0.42vw, 7px);
  margin-top: 4px;
  border-radius: 8px;
  display: block;
  overflow: hidden;
  background: #08110e;
}

.truck-queue-card > div > i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #f0a31e, #f7e35d);
}

.truck-queue-card button {
  min-width: clamp(58px, 6.4cqw, 92px);
  min-height: clamp(32px, 3.6cqw, 52px);
  border: 1px solid #6fac1d;
  border-radius: 5px;
  color: #eef8db;
  background: linear-gradient(#579d13, #285609);
  font-size: clamp(0.45rem, 0.63vw, 0.72rem);
  font-weight: 900;
  text-transform: uppercase;
}

.truck-queue-card button small {
  display: block;
  color: #d6ef90;
  font-size: clamp(0.29rem, 0.39vw, 0.46rem);
}

.truck-queue-card button:disabled {
  color: #ffe49a;
  border-color: #b5841b;
  background: linear-gradient(#6a4d12, #30230a);
}

@keyframes truck-card-signal {
  0%,
  100% {
    box-shadow: inset 0 0 0 rgb(122 218 39 / 0%);
  }
  50% {
    box-shadow: inset 0 0 14px rgb(122 218 39 / 25%), 0 0 10px rgb(122 218 39 / 18%);
  }
}

.warehouse-collect,
.warehouse-bulk-sale {
  min-height: clamp(34px, 3.8vw, 59px);
  margin-top: clamp(3px, 0.35vw, 6px);
  border: 2px solid #7fab20;
  border-radius: 6px;
  color: #f8f9de;
  background: linear-gradient(#70ba16, #2b680c);
  font-size: clamp(0.57rem, 0.88vw, 0.98rem);
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: inset 0 0 8px rgb(214 255 95 / 45%), 0 0 8px rgb(134 210 20 / 45%);
}

.warehouse-collect small {
  display: block;
  color: #d7ec51;
  font-size: clamp(0.36rem, 0.47vw, 0.55rem);
}

.warehouse-input {
  border-color: #253431;
}

.warehouse-input > strong {
  width: clamp(30px, 4.4cqw, 53px);
  height: clamp(30px, 4.4cqw, 53px);
  flex: none;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--plastic);
  font-size: clamp(0.62rem, 1vw, 1.06rem);
}

.warehouse-input.type-metal > strong {
  background: var(--metal);
}

.warehouse-input.type-glass > strong {
  background: var(--glass);
}

.warehouse-input.type-organic > strong {
  background: var(--organic);
}

.warehouse-input.type-paper > strong {
  background: #936e18;
}

.warehouse-input > div:not(.storage-art-slot) {
  min-width: 0;
  flex: 1;
}

.warehouse-input div b {
  display: block;
  margin-bottom: 5px;
  color: #e3e5df;
  font-size: clamp(0.4rem, 0.59vw, 0.68rem);
  text-transform: uppercase;
}

.warehouse-input div span {
  height: clamp(4px, 0.55vw, 8px);
  display: block;
  border-radius: 10px;
  background: #101817;
}

.warehouse-input div i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #1cb9f5;
}

.warehouse-input.type-metal div i {
  background: #eaa515;
}

.warehouse-input.type-glass div i {
  background: #6fc336;
}

.warehouse-input.type-organic div i {
  background: #a761c1;
}

.warehouse-input.type-paper div i {
  background: #d7ae38;
}

.warehouse-input > em {
  color: #82d734;
  font-size: clamp(0.48rem, 0.66vw, 0.76rem);
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.warehouse-locked {
  min-height: clamp(32px, 4vw, 57px);
  border: 1px solid #252a26;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #777f77;
  background: #101514;
  font-size: clamp(0.46rem, 0.65vw, 0.73rem);
  font-weight: 800;
  text-transform: uppercase;
}

.warehouse-capacity {
  border: 1px solid #273a2c;
  border-radius: 5px;
  padding: clamp(4px, 0.45vw, 7px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(4px, 0.42vw, 7px);
  color: #cfdbc9;
  font-size: clamp(0.4rem, 0.57vw, 0.65rem);
  text-transform: uppercase;
}

.warehouse-capacity div {
  height: clamp(6px, 0.65vw, 9px);
  border-radius: 10px;
  background: #131d18;
}

.warehouse-capacity i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #79ca20;
}

.warehouse-capacity b {
  color: #9cdc35;
  white-space: nowrap;
}

.warehouse-product {
  border-color: #343f1b;
}

.warehouse-product-copy b {
  display: block;
  color: #8ee226;
  font-size: clamp(0.74rem, 1.15vw, 1.24rem);
  line-height: 1;
}

.warehouse-product-copy small {
  color: #a9ae97;
  font-size: clamp(0.4rem, 0.54vw, 0.63rem);
}

.warehouse-product button,
.warehouse-fuel {
  min-width: clamp(48px, 6.8cqw, 93px);
  min-height: clamp(32px, 3.9cqw, 55px);
  border: 1px solid #a5d21a;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #f7ffe4;
  background: linear-gradient(#66ad14, #276606);
  font-size: clamp(0.54rem, 0.75vw, 0.85rem);
  font-weight: 900;
  text-transform: uppercase;
}

.warehouse-product button small {
  color: #f9d24e;
  font-size: clamp(0.38rem, 0.49vw, 0.57rem);
}

.warehouse-fuel {
  border-color: #4d7b26;
  color: #79c429;
  background: #122011;
}

.warehouse-bulk-sale {
  color: #ffefb0;
  border-color: #e3ab25;
  background: linear-gradient(#d39122, #855109);
}

.warehouse-actions {
  flex: 0 0 clamp(51px, 8vw, 93px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(5px, 0.55vw, 9px);
}

.warehouse-actions button {
  border: 2px solid #45563e;
  border-radius: 7px;
  color: #edf2df;
  background: linear-gradient(#1d322a, #0d1513);
  font-size: clamp(0.55rem, 0.8vw, 0.92rem);
  font-weight: 900;
  text-transform: uppercase;
}

.warehouse-actions button:nth-child(1) {
  border-color: #8ac51d;
  background: linear-gradient(#31580d, #142a0c);
}

.warehouse-actions button:nth-child(3) {
  border-color: #d48d18;
  background: linear-gradient(#674412, #291a09);
}

.warehouse-actions button small {
  display: block;
  margin-top: 3px;
  color: #8edc28;
  font-size: clamp(0.38rem, 0.52vw, 0.58rem);
}

.warehouse-actions button:disabled {
  opacity: 0.7;
}

.warehouse-actions .warehouse-art-action {
  padding: clamp(3px, 0.32vw, 5px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 0.47vw, 8px);
}

.warehouse-art-action img {
  width: clamp(34px, 4.6cqw, 61px);
  height: calc(100% - 4px);
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgb(142 203 30 / 34%));
}

.warehouse-art-action span {
  min-width: 0;
  text-align: left;
}

.warehouse-upgrade-progress {
  width: 100%;
  height: 5px;
  margin-top: 5px;
  border-radius: 999px;
  display: block;
  overflow: hidden;
  background: rgb(5 18 11 / 72%);
}

.warehouse-upgrade-progress b {
  height: 100%;
  border-radius: inherit;
  display: block;
  background: linear-gradient(90deg, #9ee435, #f5cf4a);
}

@container storage-modal (max-width: 820px) {
  .storage-window .window-content {
    padding: 5px;
  }

  .warehouse-sheet,
  .warehouse-columns {
    gap: 5px;
  }

  .warehouse-status {
    flex-basis: 26px;
    gap: 4px;
  }

  .warehouse-status article {
    min-width: 78px;
    padding: 2px 4px;
  }

  .warehouse-status img {
    width: 19px;
    height: 19px;
  }

  .warehouse-status span {
    font-size: 0.29rem;
  }

  .warehouse-status strong {
    font-size: 0.42rem;
  }

  .warehouse-panel {
    padding: 5px;
    gap: 3px;
  }

  .warehouse-panel h3 {
    font-size: 0.66rem;
  }

  .warehouse-caption {
    font-size: 0.42rem;
  }

  .storage-art-slot {
    width: 41px;
    min-height: 31px;
  }

  .warehouse-incoming .storage-art-slot {
    width: 49px;
  }

  .storage-art-slot span {
    font-size: 0.34rem;
  }

  .storage-art-slot small {
    font-size: 0.25rem;
  }

  .warehouse-input > strong {
    width: 25px;
    height: 25px;
    font-size: 0.47rem;
  }

  .warehouse-incoming strong,
  .warehouse-input div b,
  .warehouse-product-copy strong {
    font-size: 0.39rem;
  }

  .warehouse-incoming span,
  .warehouse-input > em,
  .warehouse-product-copy small {
    font-size: 0.35rem;
  }

  .warehouse-product-copy b {
    font-size: 0.62rem;
  }

  .warehouse-product button,
  .warehouse-fuel {
    min-width: 43px;
    min-height: 27px;
    font-size: 0.43rem;
  }

  .warehouse-locked,
  .warehouse-collect,
  .warehouse-bulk-sale {
    min-height: 28px;
    font-size: 0.48rem;
  }

  .warehouse-capacity {
    font-size: 0.35rem;
  }

  .warehouse-actions {
    flex-basis: 47px;
  }

  .warehouse-actions button {
    font-size: 0.43rem;
  }

  .warehouse-actions button small {
    font-size: 0.31rem;
  }

  .warehouse-art-action img {
    width: 31px;
  }
}

.game-window.match-window {
  width: min(92%, 1080px);
  max-height: 94%;
  border-color: #91713e;
  background: #181b10;
}

.match-window .window-titlebar {
  min-height: clamp(50px, 4.3vw, 68px);
  background:
    linear-gradient(rgb(45 75 31 / 70%), rgb(32 31 17 / 78%)),
    repeating-linear-gradient(0deg, #554129 0 4px, #624c30 4px 9px);
}

.match-window .window-content {
  max-height: calc(94vh - clamp(50px, 4.3vw, 68px));
  overflow-y: auto;
  padding: clamp(10px, 1vw, 17px);
}

.match-game {
  color: #efe4c4;
}

.match-header {
  margin-bottom: clamp(7px, 0.7vw, 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
}

.match-header h3 {
  margin-bottom: 3px;
  color: #ffe09a;
  font-size: clamp(0.85rem, 1.16vw, 1.25rem);
}

.match-header p {
  color: #bbad8a;
  font-size: clamp(0.58rem, 0.69vw, 0.79rem);
}

.match-score {
  display: flex;
  gap: clamp(5px, 0.55vw, 10px);
}

.match-score span {
  min-width: clamp(58px, 5.3vw, 92px);
  padding: clamp(4px, 0.42vw, 7px);
  border: 1px solid #64502c;
  border-radius: 5px;
  color: #baaa82;
  background: #272515;
  font-size: clamp(0.5rem, 0.62vw, 0.72rem);
  text-align: center;
  text-transform: uppercase;
}

.match-score strong {
  display: block;
  margin-top: 2px;
  color: var(--gold-bright);
  font-size: clamp(0.85rem, 1.1vw, 1.25rem);
}

.match-layout {
  display: grid;
  grid-template-columns: auto minmax(175px, 28%);
  justify-content: center;
  gap: clamp(10px, 1.3vw, 22px);
}

.match-board {
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(7, clamp(41px, 4vw, 57px));
  gap: clamp(3px, 0.33vw, 5px);
  padding: clamp(6px, 0.6vw, 10px);
  border: 2px solid #55452a;
  border-radius: 10px;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 3%) 0 8px, transparent 8px 17px),
    #101c19;
}

.match-tile {
  width: clamp(41px, 4vw, 57px);
  height: clamp(41px, 4vw, 57px);
  border: 2px solid rgb(255 255 255 / 9%);
  border-radius: clamp(6px, 0.58vw, 9px);
  padding: clamp(3px, 0.3vw, 5px);
  background: #26372b;
  transition: transform 110ms ease, border-color 110ms ease, filter 110ms ease;
}

.match-tile.type-plastic {
  background: rgb(38 79 111 / 80%);
}

.match-tile.type-metal {
  background: rgb(112 83 29 / 86%);
}

.match-tile.type-glass {
  background: rgb(39 83 60 / 84%);
}

.match-tile.type-organic {
  background: rgb(89 61 43 / 86%);
}

.match-tile:hover:not(:disabled) {
  transform: scale(1.05);
  border-color: #e4ca71;
}

.match-tile.selected {
  border-color: #ffe15d;
  box-shadow: 0 0 0 2px #a27618, 0 0 13px #f9ce48;
  transform: scale(1.07);
}

.match-tile.bursting {
  border-color: #fff0ae;
  animation: material-burst 250ms ease-out;
}

.match-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

@keyframes material-burst {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  55% {
    transform: scale(1.2) rotate(3deg);
    filter: brightness(1.6);
  }
  100% {
    transform: scale(0.2);
    opacity: 0.2;
  }
}

.match-message {
  min-height: clamp(25px, 2.3vw, 36px);
  margin-top: clamp(5px, 0.5vw, 9px);
  padding: clamp(6px, 0.54vw, 9px);
  border-radius: 5px;
  color: #e4d39f;
  background: #292716;
  font-size: clamp(0.56rem, 0.66vw, 0.77rem);
  text-align: center;
}

.match-rewards {
  border: 1px solid #544429;
  border-radius: 8px;
  padding: clamp(9px, 0.85vw, 14px);
  background: #222517;
}

.match-rewards h3 {
  margin-bottom: clamp(7px, 0.7vw, 11px);
  color: #f0d793;
  font-size: clamp(0.7rem, 0.89vw, 1rem);
}

.match-reward-row {
  margin-bottom: clamp(5px, 0.46vw, 8px);
  border-radius: 5px;
  padding: clamp(5px, 0.45vw, 8px);
  display: grid;
  grid-template-columns: clamp(28px, 2.3vw, 39px) 1fr auto;
  align-items: center;
  gap: 6px;
  background: #313020;
  font-size: clamp(0.53rem, 0.65vw, 0.74rem);
}

.match-reward-row b {
  height: clamp(25px, 2.1vw, 35px);
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: white;
}

.match-reward-row.type-plastic b {
  background: var(--plastic);
}

.match-reward-row.type-metal b {
  background: var(--metal);
}

.match-reward-row.type-glass b {
  background: var(--glass);
}

.match-reward-row.type-organic b {
  background: var(--organic);
}

.match-reward-row strong {
  color: var(--green-light);
  font-size: clamp(0.66rem, 0.86vw, 0.95rem);
}

.match-rewards > p {
  margin: clamp(9px, 0.8vw, 13px) 0;
  color: #b8ab89;
  font-size: clamp(0.54rem, 0.64vw, 0.73rem);
  line-height: 1.45;
}

.match-rewards .small-action {
  width: 100%;
  margin-bottom: 7px;
}

.active-materials {
  min-height: clamp(50px, 5.25vw, 79px);
  margin-top: clamp(7px, 0.66vw, 12px);
  border: 1px solid #4d4028;
  border-radius: 7px;
  padding: clamp(5px, 0.55vw, 9px);
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.7vw, 12px);
  background: #282618;
}

.active-materials > strong {
  width: clamp(70px, 7.6vw, 112px);
  color: #e6cc87;
  font-size: clamp(0.53rem, 0.62vw, 0.72rem);
  text-transform: uppercase;
}

.active-materials div {
  width: clamp(42px, 4.6vw, 66px);
  height: clamp(43px, 4.6vw, 67px);
  position: relative;
  border-radius: 5px;
  padding: 3px;
  background: #17231e;
}

.active-materials img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.active-materials div span {
  display: none;
}

.active-materials > small {
  color: #aa9b78;
  font-size: clamp(0.47rem, 0.56vw, 0.64rem);
}

@media (max-height: 760px) {
  .match-window .window-content {
    padding: 8px;
  }

  .match-board {
    grid-template-columns: repeat(7, 36px);
    gap: 3px;
    padding: 5px;
  }

  .match-tile {
    width: 36px;
    height: 36px;
    padding: 3px;
  }

  .match-rewards {
    padding: 8px;
  }

  .match-reward-row,
  .match-rewards > p {
    margin-bottom: 4px;
  }

  .active-materials {
    min-height: 42px;
    margin-top: 5px;
    padding: 4px;
  }

  .active-materials div {
    width: 35px;
    height: 35px;
  }
}

/* Malzeme Patlat uses the supplied blue arcade concept as its live game frame. */
.game-window.match-window {
  width: auto;
  height: 94%;
  max-width: 96%;
  aspect-ratio: 1403 / 977;
  max-height: 977px;
  position: relative;
  container-type: inline-size;
  container-name: match-modal;
  border: clamp(2px, 0.25vw, 4px) solid #1477cf;
  border-radius: clamp(12px, 1.2vw, 20px);
  overflow: hidden;
  background: #061c40;
  box-shadow:
    0 0 0 2px #052852,
    0 0 27px rgb(0 132 255 / 62%),
    0 30px 76px rgb(0 0 0 / 85%);
}

.game-window.match-window::after {
  content: "";
  position: absolute;
  inset: clamp(2px, 0.22vw, 4px);
  z-index: 4;
  border: 1px solid rgb(55 191 255 / 56%);
  border-radius: clamp(9px, 1vw, 16px);
  pointer-events: none;
}

.match-window .window-titlebar {
  height: 12%;
  min-height: 0;
  position: relative;
  padding: 0;
  border: 0;
  background: url("assets/oyun.png") center top / 100% auto no-repeat;
}

.match-window .window-titlebar > div {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
}

.match-window .close-button {
  width: 7.1%;
  height: 75%;
  position: absolute;
  top: 12%;
  right: 1%;
  z-index: 5;
  border: 0;
  color: transparent;
  background: transparent;
}

.match-window .window-content {
  height: 88%;
  max-height: none;
  overflow: hidden;
  box-sizing: border-box;
  padding: clamp(9px, 1.15vw, 18px) clamp(13px, 2vw, 30px) clamp(9px, 1.25vw, 19px);
  border-top: 2px solid #007fe3;
  background:
    radial-gradient(circle at 50% 0%, rgb(14 85 155 / 55%), transparent 39%),
    radial-gradient(circle at 98% 50%, rgb(25 75 178 / 34%), transparent 30%),
    linear-gradient(145deg, #03142f, #041f48 56%, #031532);
}

.match-game {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #eef5ff;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.match-header {
  flex: 0 0 auto;
  margin-bottom: clamp(7px, 0.75vw, 12px);
  padding: 0 clamp(4px, 0.45vw, 8px);
  align-items: center;
}

.match-copy h3 {
  margin-bottom: clamp(4px, 0.45vw, 8px);
  color: #ffd12e;
  font-size: clamp(1rem, 1.75vw, 1.75rem);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #8a4600, 0 0 15px rgb(255 179 0 / 58%);
}

.match-copy h3 i {
  width: clamp(6px, 0.65vw, 11px);
  height: clamp(6px, 0.65vw, 11px);
  margin-right: clamp(6px, 0.55vw, 11px);
  display: inline-block;
  border-radius: 50%;
  background: #ffe45d;
  box-shadow: 0 0 14px 6px rgb(255 183 0 / 48%);
}

.match-copy p {
  color: #f3f7ff;
  font-size: clamp(0.64rem, 0.94vw, 1rem);
  line-height: 1.35;
  font-weight: 600;
  text-shadow: 0 1px 2px #000;
}

.match-score {
  gap: clamp(9px, 1.1vw, 18px);
}

.match-score span {
  min-width: clamp(78px, 11vw, 145px);
  padding: clamp(5px, 0.7vw, 10px);
  border: 2px solid #158feb;
  border-radius: clamp(7px, 0.7vw, 12px);
  color: #58c0ff;
  background:
    radial-gradient(circle at 50% 0%, rgb(37 109 226 / 48%), transparent 57%),
    linear-gradient(#0c316e, #061a40);
  box-shadow: inset 0 0 18px #061636, 0 0 10px rgb(0 151 255 / 42%);
  font-size: clamp(0.68rem, 0.98vw, 1.03rem);
  font-weight: 800;
}

.match-score strong {
  margin-top: 0;
  color: #ffd129;
  font-size: clamp(1.35rem, 2.35vw, 2.5rem);
  line-height: 1;
  text-shadow: 0 2px 0 #8b4c00;
}

.match-score .score-total::after {
  content: "★";
  margin-left: clamp(3px, 0.4vw, 7px);
  color: #ffbd1a;
  font-size: clamp(1.05rem, 1.6vw, 1.7rem);
  text-shadow: 0 0 12px #ffd64f;
}

.match-layout {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 55%) minmax(220px, 45%);
  justify-content: stretch;
  gap: clamp(11px, 1.6vw, 25px);
}

.match-layout > div:first-child {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.match-board {
  --match-cell: clamp(32px, 5.5cqw, 67px);
  position: relative;
  grid-template-columns: repeat(8, var(--match-cell));
  gap: clamp(3px, 0.38vw, 6px);
  padding: clamp(6px, 0.7vw, 10px);
  border: 2px solid #19b9ff;
  border-radius: clamp(8px, 0.8vw, 13px);
  background:
    radial-gradient(circle at center, rgb(30 91 185 / 46%), transparent 65%),
    #031532;
  box-shadow:
    inset 0 0 20px rgb(0 8 30 / 90%),
    0 0 16px rgb(0 174 255 / 63%);
  touch-action: none;
  user-select: none;
}

.match-tile {
  width: var(--match-cell);
  height: var(--match-cell);
  position: relative;
  border: clamp(1px, 0.15vw, 2px) solid #2eb4ff;
  border-radius: clamp(7px, 0.62vw, 11px);
  padding: clamp(3px, 0.32vw, 5px);
  box-shadow: inset 0 0 12px rgb(255 255 255 / 13%), 0 1px 5px #000;
  transition: transform 0.18s ease, filter 0.18s ease;
  touch-action: none;
  cursor: grab;
  -webkit-user-drag: none;
}

.match-tile img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.match-tile.dragging {
  z-index: 12;
  cursor: grabbing;
  transform: translate(var(--drag-x, 0), var(--drag-y, 0)) scale(1.08);
  filter: brightness(1.3);
  box-shadow: 0 0 0 2px #fff276, 0 0 22px rgb(255 224 64 / 75%), inset 0 0 17px #fff68e;
  transition: none;
}

.match-tile.type-plastic {
  border-color: #42baff;
  background: linear-gradient(145deg, #1559ca, #062b77);
  box-shadow: inset 0 0 18px #218af2, 0 0 6px rgb(27 156 255 / 65%);
}

.match-tile.type-metal {
  border-color: #ffbe29;
  background: linear-gradient(145deg, #e19b14, #8e3c08);
  box-shadow: inset 0 0 18px #ffbe39, 0 0 6px rgb(255 175 23 / 65%);
}

.match-tile.type-glass {
  border-color: #7aff51;
  background: linear-gradient(145deg, #4da527, #075333);
  box-shadow: inset 0 0 18px #6cd648, 0 0 6px rgb(75 242 88 / 60%);
}

.match-tile.type-organic {
  border-color: #ff7e40;
  background: linear-gradient(145deg, #e35e24, #701c18);
  box-shadow: inset 0 0 18px #f47425, 0 0 6px rgb(255 93 32 / 65%);
}

.match-tile:hover:not(:disabled) {
  transform: scale(1.06);
  border-color: #fff593;
  filter: brightness(1.18);
}

.match-tile.selected {
  border-color: #fff372;
  box-shadow: 0 0 0 2px #ffe259, 0 0 18px #f4d229, inset 0 0 17px #fff68e;
}

.match-tile.empty {
  opacity: 0.35;
  background: #031021;
}

.match-tile em {
  min-width: 44%;
  position: absolute;
  right: 4%;
  bottom: 4%;
  border-radius: 5px;
  padding: 1px 3px;
  color: #071326;
  background: linear-gradient(#fff47d, #ffb90d);
  box-shadow: 0 0 10px rgb(255 224 60 / 72%);
  font-size: clamp(0.42rem, 0.62vw, 0.72rem);
  font-style: normal;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.match-tile.special-fireball,
.match-tile.special-mega {
  border-color: #fff16a;
  box-shadow: 0 0 0 2px rgb(255 236 68 / 70%), 0 0 20px rgb(255 191 0 / 72%), inset 0 0 20px rgb(255 244 98 / 35%);
}

.match-tile.special-fireball {
  isolation: isolate;
  overflow: visible;
  animation: fireball-shine 0.92s ease-in-out infinite alternate;
  background: radial-gradient(circle, #ffdd35 0%, #e84700 52%, #401000 100%);
}

.match-tile.special-fireball::before,
.match-tile.special-fireball::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 243 105 / 85%) 0 8%, rgb(255 98 0 / 58%) 34%, transparent 70%);
  animation: fireball-flame 0.72s linear infinite;
  pointer-events: none;
}

.match-tile.special-fireball::after {
  inset: -22%;
  opacity: 0.58;
  animation-duration: 1.08s;
  animation-direction: reverse;
}

.match-tile.special-fireball > img {
  width: 108%;
  height: 108%;
  max-width: none;
  position: relative;
  z-index: 2;
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(1.3) contrast(1.1) brightness(1.08) drop-shadow(0 0 8px #ffda30);
}

.fireball-shine-layer {
  position: absolute;
  inset: -20%;
  z-index: 5;
  overflow: visible;
  border-radius: 50%;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 30%, rgb(255 231 124 / 10%) 39%, rgb(255 255 255 / 96%) 49%, rgb(255 224 75 / 36%) 56%, transparent 68%) -150% 0 / 250% 100% no-repeat;
  mix-blend-mode: screen;
  animation: fireball-shine-sweep 1.35s ease-in-out infinite;
}

.fireball-shine-layer::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#0000, #0000) padding-box,
    conic-gradient(from 0deg, transparent 0 18%, #fff9b0 23%, #ff9b18 31%, transparent 39% 62%, #fff4a0 69%, #ff6a00 77%, transparent 84%) border-box;
  filter: drop-shadow(0 0 5px #ffb000);
  animation: fireball-shine-orbit 1.8s linear infinite;
}

.fireball-shine-layer::after {
  content: "";
  position: absolute;
  top: -4%;
  right: 0;
  width: 42%;
  aspect-ratio: 1;
  background: radial-gradient(circle, #fff 0 7%, #fff6a0 12%, #ffc52f 25%, transparent 64%);
  clip-path: polygon(50% 0, 59% 39%, 100% 50%, 59% 61%, 50% 100%, 41% 61%, 0 50%, 41% 39%);
  filter: drop-shadow(0 0 5px #fff7a0) drop-shadow(0 0 10px #ff9d00);
  transform-origin: center;
  animation: fireball-star-twinkle 1.1s ease-in-out infinite;
}

.fireball-explosion {
  position: absolute;
  inset: -6%;
  z-index: 20;
  display: grid;
  place-items: center;
  border-radius: 50%;
  pointer-events: none;
  animation: fireball-screen-flash 0.34s ease-out both;
}

.fireball-explosion::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 211 / 98%) 0 6%, rgb(255 211 37 / 88%) 16%, rgb(255 79 0 / 70%) 42%, transparent 72%);
}

.fireball-explosion img {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(1.4) brightness(1.25) drop-shadow(0 0 28px #ff4500);
  animation: fireball-explode 0.34s ease-out both;
}

.match-tile.special-dynamite {
  border-color: #ff6d46;
  box-shadow: 0 0 0 2px rgb(255 83 45 / 62%), 0 0 22px rgb(255 56 22 / 76%), inset 0 0 20px rgb(255 93 42 / 38%);
}

.match-tile.bursting:not(.special-fireball):not(.special-dynamite) {
  --match-shard-light: #d9f6ff;
  --match-shard-mid: #41b9ff;
  --match-shard-dark: #1764d9;
  z-index: 18;
  overflow: visible;
  isolation: isolate;
  border-color: #fff;
  animation: material-crack 250ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.match-tile.bursting.type-metal {
  --match-shard-light: #fff0a0;
  --match-shard-mid: #ffb526;
  --match-shard-dark: #d45b08;
}

.match-tile.bursting.type-glass {
  --match-shard-light: #dcffca;
  --match-shard-mid: #68e84e;
  --match-shard-dark: #168c46;
}

.match-tile.bursting.type-organic {
  --match-shard-light: #ffd3ba;
  --match-shard-mid: #ff7140;
  --match-shard-dark: #c52222;
}

.match-tile.bursting:not(.special-fireball):not(.special-dynamite) > img {
  animation: material-shatter 250ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.match-tile-shine {
  position: absolute;
  inset: -10%;
  z-index: 8;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.match-tile.bursting .match-tile-shine {
  opacity: 1;
  background:
    linear-gradient(112deg, transparent 18%, rgb(255 255 255 / 14%) 35%, #fff 48%, rgb(255 255 255 / 75%) 53%, transparent 68%) -170% 0 / 260% 100% no-repeat;
  filter: drop-shadow(0 0 5px #fff);
  animation: match-tile-shine-sweep 250ms ease-out both;
}

.match-tile-shine::before,
.match-tile-shine::after {
  content: "";
  position: absolute;
  width: 48%;
  aspect-ratio: 1;
  opacity: 0;
  background: radial-gradient(circle, #fff 0 6%, #fff 10%, rgb(255 255 255 / 35%) 24%, transparent 64%);
  clip-path: polygon(50% 0, 58% 40%, 100% 50%, 58% 60%, 50% 100%, 42% 60%, 0 50%, 42% 40%);
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px var(--match-shard-light));
}

.match-tile-shine::before {
  top: -7%;
  right: -5%;
}

.match-tile-shine::after {
  left: -8%;
  bottom: -4%;
  transform: scale(0.65) rotate(24deg);
}

.match-tile.bursting .match-tile-shine::before {
  animation: match-tile-star-shine 250ms ease-out both;
}

.match-tile.bursting .match-tile-shine::after {
  animation: match-tile-star-shine 250ms 55ms ease-out both;
}

.match-tile.bursting:not(.special-fireball):not(.special-dynamite)::before,
.match-tile.bursting:not(.special-fireball):not(.special-dynamite)::after {
  content: "";
  position: absolute;
  inset: 50%;
  z-index: 6;
  width: 175%;
  height: 175%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.05);
}

.match-tile.bursting:not(.special-fireball):not(.special-dynamite)::before {
  width: 135%;
  height: 135%;
  background: radial-gradient(circle, #fff 0 15%, rgb(255 255 255 / 96%) 20%, var(--match-shard-light) 41%, rgb(255 255 255 / 36%) 57%, transparent 72%);
  clip-path: polygon(50% 0, 58% 31%, 75% 7%, 72% 36%, 100% 24%, 78% 44%, 100% 50%, 78% 56%, 100% 76%, 72% 64%, 75% 93%, 58% 69%, 50% 100%, 42% 69%, 25% 93%, 28% 64%, 0 76%, 22% 56%, 0 50%, 22% 44%, 0 24%, 28% 36%, 25% 7%, 42% 31%);
  box-shadow:
    0 0 8px #fff,
    0 0 20px #fff,
    0 0 34px var(--match-shard-light);
  animation: candy-match-flash 250ms ease-out both;
}

.match-tile.bursting:not(.special-fireball):not(.special-dynamite)::after {
  background:
    radial-gradient(circle at 17% 22%, var(--match-shard-mid) 0 3%, transparent 4%),
    radial-gradient(circle at 82% 19%, var(--match-shard-light) 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 91% 58%, var(--match-shard-dark) 0 3%, transparent 4%),
    radial-gradient(circle at 72% 88%, var(--match-shard-mid) 0 3.5%, transparent 4.5%),
    radial-gradient(circle at 28% 86%, var(--match-shard-dark) 0 3%, transparent 4%),
    radial-gradient(circle at 8% 61%, var(--match-shard-light) 0 2.5%, transparent 3.5%),
    linear-gradient(90deg, transparent 7%, rgb(255 255 255 / 20%) 25%, #fff 49%, #fff 51%, rgb(255 255 255 / 20%) 75%, transparent 93%) center / 100% 4px no-repeat,
    linear-gradient(0deg, transparent 7%, rgb(255 255 255 / 20%) 25%, #fff 49%, #fff 51%, rgb(255 255 255 / 20%) 75%, transparent 93%) center / 4px 100% no-repeat,
    linear-gradient(45deg, transparent 16%, rgb(255 255 255 / 78%) 49%, rgb(255 255 255 / 78%) 51%, transparent 84%) center / 72% 2px no-repeat,
    linear-gradient(-45deg, transparent 16%, rgb(255 255 255 / 78%) 49%, rgb(255 255 255 / 78%) 51%, transparent 84%) center / 72% 2px no-repeat;
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 9px var(--match-shard-light));
  animation: candy-match-rays 250ms ease-out both;
}

.match-tile.swapping {
  animation: match-swap 0.22s ease-in-out;
}

.match-tile.lightning {
  animation: match-lightning 0.32s ease-out both;
}

.match-particle-layer {
  --particle-core: #eafcff;
  --particle-bright: #62d8ff;
  --particle-deep: #176dff;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
}

.match-particle-layer.effect-fireball {
  --particle-core: #fffbd0;
  --particle-bright: #ffbe28;
  --particle-deep: #ff3b08;
}

.match-particle-layer.effect-dynamite {
  --particle-core: #fff2e9;
  --particle-bright: #ff7048;
  --particle-deep: #d81418;
}

.match-particle-layer.effect-stone {
  --particle-core: #ffffff;
  --particle-bright: #a8edff;
  --particle-deep: #4387ff;
}

.match-particle-burst {
  --shard-light: #dbf6ff;
  --shard-mid: #4cbcff;
  --shard-dark: #1265d8;
  position: absolute;
  width: 0;
  height: 0;
  animation-delay: var(--burst-delay, 0ms);
}

.match-particle-burst.type-metal {
  --shard-light: #fff0a0;
  --shard-mid: #ffb21f;
  --shard-dark: #d05c08;
}

.match-particle-burst.type-glass {
  --shard-light: #d8ffc6;
  --shard-mid: #67e64d;
  --shard-dark: #168d49;
}

.match-particle-burst.type-organic {
  --shard-light: #ffd1b3;
  --shard-mid: #ff7639;
  --shard-dark: #c72a20;
}

.match-impact-lightning {
  position: absolute;
  left: 0;
  bottom: -4px;
  z-index: 8;
  width: 16px;
  height: var(--strike-height, 95px);
  pointer-events: none;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--strike-angle, 0deg));
  opacity: 0;
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 7px #91eaff)
    drop-shadow(0 0 15px #278cff);
  animation: lightning-strike 620ms ease-out both;
  animation-delay: var(--burst-delay, 0ms);
}

.match-impact-lightning.radial-lightning {
  bottom: auto;
  transform-origin: 50% 0;
}

.match-impact-lightning::before,
.match-impact-lightning::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #fff, #bff5ff 46%, #49b7ff);
  clip-path: polygon(48% 0, 74% 0, 54% 22%, 77% 22%, 40% 54%, 61% 54%, 18% 100%, 35% 62%, 17% 62%, 48% 31%, 29% 31%);
}

.match-impact-lightning::after {
  inset: -3px;
  z-index: -1;
  opacity: 0.55;
  filter: blur(5px);
}

.match-impact-lightning > b {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 7px;
  height: 52%;
  background: linear-gradient(to top, #fff, #70ceff 70%, transparent);
  clip-path: polygon(44% 0, 72% 0, 55% 35%, 82% 35%, 22% 100%, 39% 55%, 15% 55%);
  transform-origin: 50% 100%;
  opacity: 0.85;
}

.match-impact-lightning > b:nth-child(1) {
  transform: rotate(-44deg) scaleY(0.72);
}

.match-impact-lightning > b:nth-child(2) {
  transform: rotate(41deg) scaleY(0.82);
}

.match-impact-lightning > b:nth-child(3) {
  transform: rotate(76deg) scaleY(0.55);
}

.match-particle-burst::before,
.match-particle-burst::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.08);
  animation-delay: var(--burst-delay, 0ms);
}

.match-particle-burst::before {
  width: 64px;
  height: 64px;
  background: radial-gradient(circle, #fff 0 9%, var(--particle-core) 14%, var(--particle-bright) 27%, color-mix(in srgb, var(--particle-deep) 70%, transparent) 48%, transparent 72%);
  box-shadow: 0 0 22px #fff, 0 0 38px var(--particle-bright), 0 0 64px var(--particle-deep);
  animation: particle-core-pop 720ms ease-out both;
}

.match-particle-burst::after {
  width: 72px;
  height: 72px;
  border: 3px solid var(--particle-bright);
  box-shadow: 0 0 14px var(--particle-bright), inset 0 0 16px var(--particle-deep);
  animation: particle-shockwave 920ms ease-out both;
}

.match-particle-burst > i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--particle-size, 7px);
  height: var(--particle-size, 7px);
  border-radius: 1px;
  background: linear-gradient(145deg, var(--shard-light), var(--shard-mid) 48%, var(--shard-dark));
  box-shadow:
    inset 1px 1px 2px rgb(255 255 255 / 78%),
    0 0 7px var(--shard-mid);
  clip-path: polygon(7% 16%, 77% 0, 100% 63%, 54% 100%, 0 72%);
  transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateX(0) scale(0.3);
  animation: particle-fragment-fly 1.45s cubic-bezier(0.12, 0.72, 0.2, 1) both;
  animation-delay: calc(var(--burst-delay, 0ms) + var(--particle-delay, 0ms));
}

.match-window.match-camera-shake {
  animation: match-camera-impact 440ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.dynamite-cloud-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

.dynamite-cloud-cell {
  position: absolute;
  display: block;
  border: 1px solid rgb(205 217 231 / 92%);
  border-radius: 16%;
  background:
    radial-gradient(circle at 28% 30%, #fff 0 22%, transparent 24%),
    radial-gradient(circle at 72% 28%, #fff 0 23%, transparent 25%),
    radial-gradient(circle at 70% 72%, #f7f8fa 0 23%, transparent 25%),
    radial-gradient(circle at 27% 73%, #fff 0 22%, transparent 24%),
    radial-gradient(circle, #fff 0 28%, #e8ebef 72%, #cfd5de 100%);
  box-shadow:
    inset 4px 4px 7px rgb(255 255 255 / 98%),
    inset -5px -6px 9px rgb(171 182 198 / 58%),
    0 0 7px #fff,
    0 0 16px rgb(178 224 255 / 75%);
  opacity: 0;
  transform: scale(0.1) rotate(-8deg);
  animation: dynamite-cloud-cell-pop 940ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
  animation-delay: var(--cloud-delay, 0ms);
}

.dynamite-cloud-cell::before,
.dynamite-cloud-cell::after {
  content: "";
  position: absolute;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 14px #9edcff;
}

.dynamite-cloud-cell::before {
  left: 50%;
  top: 8%;
  width: 3px;
  height: 84%;
  transform: translateX(-50%) rotate(45deg);
}

.dynamite-cloud-cell::after {
  left: 8%;
  top: 50%;
  width: 84%;
  height: 3px;
  transform: translateY(-50%) rotate(45deg);
}

.dynamite-cloud-flash {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 9%, #fffbd0 14%, rgb(255 232 105 / 82%) 28%, rgb(255 156 32 / 45%) 48%, transparent 72%);
  box-shadow: 0 0 25px #fff, 0 0 55px #ffd350, 0 0 90px rgb(255 118 20 / 72%);
  transform: translate(-50%, -50%) scale(0.06);
  animation: dynamite-cloud-flash 720ms ease-out both;
}

@keyframes match-swap {
  0% {
    transform: scale(1) translateY(0);
  }
  45% {
    transform: scale(1.08) translateY(-8%);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

@keyframes dynamite-cloud-cell-pop {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(-8deg);
  }
  24% {
    opacity: 1;
    transform: scale(1.12) rotate(2deg);
  }
  52% {
    opacity: 0.98;
    transform: scale(0.96) rotate(-1deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.34) rotate(8deg);
    filter: blur(2px);
  }
}

@keyframes dynamite-cloud-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.06);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.72);
  }
  58% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.24);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

@keyframes match-camera-impact {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  12% {
    transform: translate(-7px, 4px) rotate(-0.25deg);
  }
  25% {
    transform: translate(8px, -5px) rotate(0.3deg);
  }
  42% {
    transform: translate(-6px, -3px) rotate(-0.18deg);
  }
  60% {
    transform: translate(4px, 3px) rotate(0.12deg);
  }
  78% {
    transform: translate(-2px, 1px);
  }
}

@keyframes lightning-strike {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(var(--strike-angle, 0deg)) scaleY(0.2);
  }
  8% {
    opacity: 1;
    transform: translateX(-50%) rotate(var(--strike-angle, 0deg)) scaleY(1.08);
  }
  18% {
    opacity: 0.35;
  }
  27% {
    opacity: 1;
  }
  43% {
    opacity: 0.2;
  }
  58% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) rotate(var(--strike-angle, 0deg)) scaleY(0.9);
  }
}

@keyframes particle-core-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  58% {
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(0.72);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.7);
  }
}

@keyframes particle-shockwave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08);
  }
  22% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.25);
  }
}

@keyframes particle-fragment-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateX(0) scale(0.25);
  }
  12% {
    opacity: 1;
  }
  68% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--particle-angle)) translateX(var(--particle-distance)) rotate(310deg) scale(0.82);
  }
}

@keyframes match-lightning {
  0% {
    filter: brightness(1);
  }
  50% {
    transform: scale(1.14);
    filter: brightness(2.4) saturate(1.7);
  }
  100% {
    transform: scale(0.82);
    opacity: 0.25;
    filter: brightness(3);
  }
}

@keyframes material-crack {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  28% {
    transform: scale(1.12) rotate(-3deg);
    filter: brightness(1.55) contrast(1.18);
  }
  48% {
    transform: scale(0.94) rotate(3deg);
    filter: brightness(2.2) contrast(1.35);
  }
  100% {
    transform: scale(0.45);
    opacity: 0;
    filter: brightness(3);
  }
}

@keyframes match-tile-shine-sweep {
  0% {
    opacity: 0;
    background-position: -170% 0;
  }
  20% {
    opacity: 1;
  }
  74% {
    opacity: 1;
    background-position: 165% 0;
  }
  100% {
    opacity: 0;
    background-position: 165% 0;
  }
}

@keyframes match-tile-star-shine {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.18) rotate(0deg);
  }
  48% {
    opacity: 1;
    transform: scale(1.12) rotate(18deg);
  }
}

@keyframes material-shatter {
  0%,
  32% {
    transform: scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 0 transparent);
  }
  58% {
    transform: scale(1.13);
    opacity: 0.92;
    filter: brightness(1.8) drop-shadow(0 0 7px #c6f6ff);
  }
  100% {
    transform: scale(0.18) rotate(12deg);
    opacity: 0;
    filter: brightness(2.6) blur(1px);
  }
}

@keyframes candy-match-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.05);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.55) rotate(20deg);
  }
}

@keyframes candy-match-rays {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(-8deg);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.82) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.32) rotate(8deg);
  }
}

@keyframes fireball-shine {
  from {
    transform: scale(0.96);
    filter: brightness(1) saturate(1.05);
    box-shadow: 0 0 4px #ffdb2e, 0 0 12px #ff6a00, inset 0 0 15px #fff06c;
  }
  to {
    transform: scale(1.07);
    filter: brightness(1.35) saturate(1.35);
    box-shadow: 0 0 10px #fff27a, 0 0 28px #ff4d00, inset 0 0 22px #fff6a2;
  }
}

@keyframes fireball-shine-sweep {
  0%,
  22% {
    opacity: 0;
    background-position: -150% 0;
  }
  38% {
    opacity: 1;
  }
  68% {
    opacity: 0.92;
    background-position: 155% 0;
  }
  100% {
    opacity: 0;
    background-position: 155% 0;
  }
}

@keyframes fireball-shine-orbit {
  from {
    transform: rotate(0deg) scale(0.96);
  }
  to {
    transform: rotate(360deg) scale(1.04);
  }
}

@keyframes fireball-star-twinkle {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(0.42) rotate(0deg);
  }
  46% {
    opacity: 1;
    transform: scale(1.18) rotate(20deg);
  }
  68% {
    opacity: 0.58;
    transform: scale(0.72) rotate(38deg);
  }
}

@keyframes fireball-flame {
  from {
    transform: rotate(0deg) scale(0.92);
  }
  to {
    transform: rotate(360deg) scale(1.12);
  }
}

@keyframes fireball-screen-flash {
  0% {
    opacity: 0;
    transform: scale(0.12);
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes fireball-explode {
  0% {
    transform: scale(0.18) rotate(-18deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.15) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.6) rotate(14deg);
  }
}

.match-message {
  width: 100%;
  min-height: clamp(33px, 3.3vw, 51px);
  position: relative;
  overflow: hidden;
  margin-top: clamp(7px, 0.72vw, 11px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 0.75vw, 12px);
  border: 2px solid #1189ed;
  border-radius: clamp(6px, 0.6vw, 10px);
  padding: clamp(5px, 0.5vw, 9px);
  color: #f0f7ff;
  background: linear-gradient(90deg, #0a2457, #07366d);
  box-shadow: inset 0 0 18px #061b45, 0 0 9px rgb(3 150 255 / 46%);
  font-size: clamp(0.6rem, 0.82vw, 0.93rem);
  font-weight: 700;
}

.match-message.transitioning {
  border-color: #ffe04a;
  color: #fff6b3;
  box-shadow: inset 0 0 18px #573c06, 0 0 14px rgb(255 202 29 / 66%);
}

.match-transition-bar {
  height: clamp(4px, 0.45vw, 7px);
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  background: linear-gradient(90deg, #ff9c0a, #fff45b, #64ef2d);
  box-shadow: 0 0 12px #ffe34e;
  animation: match-transition-load 2s linear forwards;
}

@keyframes match-transition-load {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.match-message i {
  width: clamp(14px, 1.45vw, 25px);
  height: clamp(14px, 1.45vw, 25px);
  display: block;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 95%, 50% 72%, 21% 95%, 32% 57%, 2% 35%, 39% 35%);
  background: #ffe24a;
  box-shadow: 0 0 10px #ffd335;
}

.match-rewards {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #25a7ff #071a35;
  border: 2px solid #148ae4;
  border-radius: clamp(8px, 0.85vw, 13px);
  padding: clamp(8px, 0.85vw, 14px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 100% 0%, rgb(50 38 169 / 50%), transparent 30%),
    linear-gradient(#061a3f, #03172f);
  box-shadow: inset 0 0 23px #061534, 0 0 14px rgb(15 139 255 / 46%);
}

.match-tools-grid {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(6px, 0.65vw, 11px);
}

.match-targets-panel,
.match-booster-shop {
  min-width: 0;
  border: 1px solid rgb(73 156 238 / 35%);
  border-radius: clamp(6px, 0.6vw, 10px);
  padding: clamp(5px, 0.55vw, 9px);
  background: rgb(3 19 43 / 58%);
}

.match-rewards::-webkit-scrollbar {
  width: 7px;
}

.match-rewards::-webkit-scrollbar-track {
  background: #071a35;
}

.match-rewards::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #25a7ff;
}

.match-rewards h3 {
  margin: 0 0 clamp(5px, 0.5vw, 8px);
  border-radius: 7px;
  padding: clamp(5px, 0.52vw, 8px);
  color: #f8edff;
  background: linear-gradient(90deg, #43238b, #272064);
  font-size: clamp(0.68rem, 0.95vw, 1.02rem);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #3e1c70, 0 0 10px #be77ff;
}

.match-reward-row {
  margin-bottom: clamp(5px, 0.5vw, 8px);
  grid-template-columns: clamp(35px, 3.4vw, 55px) 1fr auto;
  gap: clamp(7px, 0.7vw, 12px);
  padding: clamp(5px, 0.5vw, 9px);
  border: 1px solid #0c4d89;
  color: #f7f9ff;
  background: #051a34;
  font-size: clamp(0.63rem, 0.86vw, 0.96rem);
  font-weight: 700;
}

.match-reward-row b {
  height: clamp(30px, 3vw, 48px);
  font-size: clamp(0.69rem, 0.95vw, 1.03rem);
  border: 1px solid rgb(255 255 255 / 28%);
  box-shadow: inset 0 0 11px rgb(255 255 255 / 18%);
}

.match-reward-row strong {
  color: #75ef22;
  font-size: clamp(0.85rem, 1.17vw, 1.25rem);
  text-shadow: 0 0 9px rgb(102 255 30 / 48%);
}

.match-rewards > p {
  margin: clamp(6px, 0.58vw, 10px) 0;
  color: #f0f3ff;
  font-size: clamp(0.58rem, 0.78vw, 0.88rem);
  font-weight: 600;
  line-height: 1.38;
}

.match-target {
  margin-bottom: clamp(3px, 0.34vw, 5px);
  border: 1px solid #0c4d89;
  border-radius: clamp(5px, 0.5vw, 8px);
  padding: clamp(3px, 0.36vw, 6px);
  display: grid;
  grid-template-columns: clamp(23px, 2.2vw, 34px) minmax(0, 1fr);
  gap: clamp(3px, 0.38vw, 6px);
  align-items: center;
  color: #f7f9ff;
  background: #051a34;
  font-size: clamp(0.48rem, 0.65vw, 0.74rem);
  font-weight: 800;
}

.match-target b {
  height: clamp(22px, 2.2vw, 34px);
  grid-row: 1 / 3;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(#205cba, #0b2d70);
}

.match-target strong {
  grid-column: 2;
  color: #9eff3e;
  font-size: 0.92em;
}

.match-target span,
.match-booster span,
.match-booster strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-target i {
  height: clamp(4px, 0.4vw, 6px);
  grid-column: 1 / 3;
  border-radius: 999px;
  overflow: hidden;
  background: #071121;
  box-shadow: inset 0 0 7px #000;
}

.match-target i em {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #72ff28, #ffe43a);
}

.match-booster-shop {
  margin: 0;
}

.match-booster-shop h3 {
  margin-bottom: clamp(5px, 0.5vw, 8px);
  background: linear-gradient(90deg, #174f99, #15276f);
}

.match-booster {
  width: 100%;
  min-height: clamp(28px, 2.7vw, 42px);
  margin-bottom: clamp(3px, 0.34vw, 5px);
  border: 2px solid #31a8ff;
  border-radius: clamp(6px, 0.6vw, 10px);
  padding: clamp(3px, 0.35vw, 6px) clamp(5px, 0.48vw, 8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  background: linear-gradient(#1689ed, #0750a7);
  box-shadow: inset 0 1px 7px rgb(255 255 255 / 30%), 0 0 9px rgb(36 157 255 / 44%);
  font-size: clamp(0.48rem, 0.66vw, 0.76rem);
  font-weight: 900;
  text-transform: uppercase;
}

.match-booster strong {
  color: #fff2a5;
  font-size: 0.9em;
}

.match-booster img {
  width: clamp(22px, 2.25vw, 35px);
  height: clamp(22px, 2.25vw, 35px);
  flex: 0 0 auto;
  margin-right: clamp(5px, 0.5vw, 8px);
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(1.25) drop-shadow(0 0 7px #ff8a00);
  animation: fireball-shine 0.8s ease-in-out infinite alternate;
}

.match-booster img + span {
  margin-right: auto;
}

.match-booster.booster-fireball {
  border-color: #ffca25;
  background: linear-gradient(#ffd72b, #d97404);
  text-shadow: 0 2px #7c3500;
}

.match-booster.booster-pickaxe {
  border-color: #83d3ff;
  background: linear-gradient(#55bdff, #1264b8);
}

.match-booster.booster-dynamite {
  border-color: #ff6d4e;
  background: linear-gradient(#ff7555, #b71916);
}

.match-booster.active {
  outline: 2px solid #fff27c;
  filter: brightness(1.18);
}

.match-booster:disabled {
  opacity: 0.48;
}

.match-rewards .small-action {
  flex: 0 0 auto;
  min-height: clamp(30px, 3.1vw, 47px);
  margin: 0;
  border: 2px solid #ffca25;
  border-radius: clamp(6px, 0.6vw, 10px);
  color: #fff9e8;
  background: linear-gradient(#ffd928, #ea8108);
  box-shadow: inset 0 1px 8px #fff77d, 0 0 10px rgb(255 193 24 / 54%);
  font-size: clamp(0.62rem, 0.9vw, 1rem);
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 2px #883800;
}

.match-side-actions {
  flex: 0 0 auto;
  margin-top: clamp(5px, 0.55vw, 9px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(5px, 0.55vw, 9px);
}

.match-rewards .small-action.storage-link {
  margin-top: 0;
  margin-bottom: 0;
  border-color: #a9ef23;
  color: white;
  background: linear-gradient(#68d719, #198308);
  box-shadow: inset 0 1px 8px #d4ff68, 0 0 10px rgb(82 223 31 / 52%);
  text-shadow: 0 2px #185100;
}

.active-materials {
  flex: 0 0 clamp(55px, 7.3vw, 100px);
  min-height: 0;
  margin-top: clamp(9px, 1vw, 15px);
  border: 2px solid #b925f3;
  border-radius: clamp(7px, 0.7vw, 12px);
  padding: clamp(4px, 0.5vw, 8px) clamp(6px, 0.65vw, 11px);
  gap: clamp(7px, 0.72vw, 12px);
  background: linear-gradient(90deg, #16185e, #100e41);
  box-shadow: inset 0 0 18px #261657, 0 0 12px rgb(206 25 255 / 45%);
}

.active-materials > strong {
  width: clamp(83px, 12vw, 154px);
  height: 100%;
  padding: clamp(5px, 0.65vw, 11px);
  display: flex;
  align-items: center;
  color: #f3e7ff;
  background: linear-gradient(120deg, #6839cd, #2a1974);
  font-size: clamp(0.59rem, 0.85vw, 0.92rem);
  line-height: 1.2;
}

.active-materials div {
  width: clamp(45px, 5vw, 69px);
  height: clamp(46px, 5.5vw, 79px);
  border: 1px solid #4788ed;
  border-radius: clamp(5px, 0.48vw, 8px);
  padding: clamp(2px, 0.3vw, 5px) clamp(2px, 0.3vw, 5px) clamp(13px, 1.45vw, 21px);
  background: linear-gradient(#142e79, #0e174d);
}

.active-materials div em {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  color: #ffeb23;
  font-size: clamp(0.55rem, 0.77vw, 0.86rem);
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.active-materials > small {
  height: 100%;
  margin-left: auto;
  padding: clamp(5px, 0.55vw, 10px) clamp(8px, 0.8vw, 14px);
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.65vw, 11px);
  border-radius: 8px;
  color: #f3ebff;
  background: rgb(13 17 69 / 75%);
  font-size: clamp(0.53rem, 0.74vw, 0.82rem);
  font-weight: 700;
  line-height: 1.36;
}

.active-materials > small b {
  color: #ffd832;
  font-size: clamp(1.25rem, 2.1vw, 2.18rem);
  text-shadow: 0 0 15px #ffca28;
}

.active-materials > small strong {
  color: #ffd829;
}

@media (max-height: 680px) {
  .match-board {
    --match-cell: clamp(30px, 5.2cqw, 54px);
  }

  .match-rewards {
    padding: 5px;
  }

  .match-rewards h3 {
    margin-bottom: 4px;
    padding: 4px;
    font-size: 0.72rem;
  }

  .match-target {
    margin-bottom: 3px;
    grid-template-columns: 21px minmax(0, 1fr);
    gap: 4px;
    padding: 3px;
    font-size: 0.52rem;
  }

  .match-target b {
    height: 22px;
  }

  .match-target i {
    height: 4px;
  }

  .match-booster-shop {
    margin: 4px 0;
    padding-top: 4px;
  }

  .match-booster {
    min-height: 25px;
    margin-bottom: 3px;
    padding: 3px 5px;
    font-size: 0.5rem;
  }

  .match-booster img {
    width: 23px;
    height: 23px;
  }

  .match-rewards .small-action {
    min-height: 27px;
    margin: 3px 0;
    font-size: 0.62rem;
  }
}

@container match-modal (max-width: 850px) {
  .match-window .window-content {
    padding: 7px 13px 9px;
  }

  .match-header {
    margin-bottom: 5px;
  }

  .match-copy h3 {
    margin-bottom: 3px;
    font-size: 0.9rem;
  }

  .match-copy p {
    font-size: 0.55rem;
  }

  .match-score {
    gap: 7px;
  }

  .match-score span {
    min-width: 75px;
    padding: 4px;
    font-size: 0.58rem;
  }

  .match-score strong {
    font-size: 1.2rem;
  }

  .match-score .score-total::after {
    font-size: 0.85rem;
  }

  .match-layout {
    grid-template-columns: minmax(0, 54%) minmax(205px, 46%);
    gap: 7px;
  }

  .match-board {
    --match-cell: 36px;
    padding: 5px;
    gap: 3px;
  }

  .match-message {
    min-height: 25px;
    margin-top: 5px;
    padding: 4px;
    font-size: 0.52rem;
  }

  .match-message i {
    width: 12px;
    height: 12px;
  }

  .match-rewards {
    padding: 4px;
    touch-action: pan-y;
  }

  .match-tools-grid {
    gap: 4px;
  }

  .match-targets-panel,
  .match-booster-shop {
    padding: 3px;
  }

  .match-rewards h3 {
    margin-bottom: 4px;
    padding: 5px;
    font-size: 0.72rem;
  }

  .match-target {
    margin-bottom: 3px;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 3px;
    padding: 3px;
    font-size: 0.48rem;
  }

  .match-target b {
    height: 23px;
    font-size: 0.54rem;
  }

  .match-target strong {
    font-size: 0.7rem;
  }

  .match-target i {
    height: 4px;
  }

  .match-booster-shop {
    margin: 4px 0;
    padding-top: 4px;
  }

  .match-booster-shop h3 {
    margin-bottom: 3px;
  }

  .match-booster {
    min-height: 24px;
    margin-bottom: 3px;
    padding: 2px 4px;
    font-size: 0.48rem;
  }

  .match-booster img {
    width: 19px;
    height: 19px;
  }

  .match-rewards .small-action {
    min-height: 28px;
    margin: 3px 0;
    font-size: 0.7rem;
  }

  .match-rewards .small-action.storage-link {
    margin-top: 0;
    margin-bottom: 0;
  }

  .active-materials {
    flex-basis: 51px;
    margin-top: 6px;
    padding: 4px 6px;
    gap: 5px;
  }

  .active-materials > strong {
    width: 114px;
    padding: 5px;
    font-size: 0.52rem;
  }

  .active-materials div {
    width: 43px;
    height: 43px;
    padding: 2px 2px 12px;
  }

  .active-materials > small {
    padding: 4px 7px;
    gap: 5px;
    font-size: 0.48rem;
  }

  .active-materials > small b {
    font-size: 1.1rem;
  }
}

@container match-modal (max-width: 680px) {
  .match-layout {
    grid-template-columns: minmax(0, 53%) minmax(190px, 47%);
    gap: 5px;
  }

  .match-target span {
    display: none;
  }

  .match-target strong {
    align-self: center;
  }

  .match-booster strong {
    max-width: 42%;
  }

  .match-side-actions {
    gap: 3px;
  }
}

.game-window.transformer-window {
  width: min(96%, 70.5vw, calc(94vh * 1.3333));
  height: auto;
  aspect-ratio: 1448 / 1086;
  max-height: 94%;
  position: relative;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: 0 28px 76px rgb(0 0 0 / 72%);
}

.transformer-window .window-titlebar {
  display: none;
}

.transformer-window .window-content {
  position: absolute;
  inset: 0;
  max-height: none;
  overflow: hidden;
  padding: 0;
  background: transparent;
}

.transformer-sheet {
  --machine-accent: #397fc0;
  --machine-light: #5ea9ef;
  width: 100%;
  height: 100%;
  position: relative;
  color: #edf1ee;
  background: url("assets/donusturucu-menusu.png") center / 100% 100% no-repeat;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
  text-shadow: 0 1px 1px rgb(0 0 0 / 54%);
}

.transformer-sheet.theme-metal {
  --machine-accent: #aa781b;
  --machine-light: #e5b53d;
}

.transformer-sheet.theme-glass {
  --machine-accent: #397c31;
  --machine-light: #7ac64c;
}

.transformer-sheet.theme-organic {
  --machine-accent: #69457b;
  --machine-light: #ac80bf;
}

.transformer-sheet.theme-paper {
  --machine-accent: #245f89;
  --machine-light: #60b7e2;
}

.transformer-title {
  position: absolute;
  left: 13.8%;
  top: 3%;
  z-index: 1;
  color: #f7f4ed;
  font-size: clamp(1.2rem, 2.25vw, 2.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 3px 1px #0a111b;
}

.transformer-close-hit {
  width: 6.1%;
  height: 7.4%;
  position: absolute;
  top: 1.9%;
  right: 1.5%;
  z-index: 5;
  border-radius: 16%;
  background: transparent;
}

.transformer-close-hit:focus-visible {
  outline: 3px solid #ffe290;
}

.transformer-columns {
  height: 70.7%;
  position: absolute;
  top: 13.4%;
  left: 2.7%;
  right: 2.7%;
  display: grid;
  grid-template-columns: 24.4% 44.8% 27.2%;
  gap: 1.8%;
}

.transformer-side,
.transformer-center {
  min-height: 0;
  border: max(1px, 0.16vw) solid #526375;
  border-radius: clamp(7px, 1vw, 15px);
  background: linear-gradient(180deg, #20303f, #16232e);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 38%);
}

.transformer-side {
  padding: 0 4.2% 4%;
  display: flex;
  flex-direction: column;
}

.transformer-side h3 {
  height: 8.7%;
  min-height: 29px;
  margin: 0 -5.2% 2.2%;
  border-bottom: 1px solid #314351;
  display: grid;
  place-items: center;
  color: #f4f2e9;
  font-size: clamp(0.75rem, 1.18vw, 1.42rem);
  letter-spacing: 0.04em;
}

.input-materials {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vw, 9px);
}

.material-row,
.output-product {
  min-height: 0;
  flex: 1;
  border: 1px solid #344a5b;
  border-radius: clamp(6px, 0.7vw, 11px);
  padding: clamp(3px, 0.42vw, 7px);
  display: grid;
  grid-template-columns: 35% 1fr;
  align-items: center;
  gap: clamp(4px, 0.6vw, 12px);
  background: rgb(11 20 29 / 45%);
}

.material-row strong,
.output-product strong {
  display: block;
  color: #f4f4ed;
  font-size: clamp(0.52rem, 0.82vw, 0.99rem);
  line-height: 1.14;
}

.material-row p,
.output-product p {
  margin-top: clamp(2px, 0.3vw, 5px);
  color: #e1e7ec;
  font-size: clamp(0.5rem, 0.75vw, 0.93rem);
}

.material-row b,
.output-product b {
  color: #9bd941;
  font-size: clamp(0.66rem, 1.03vw, 1.28rem);
}

.visual-slot {
  min-width: 0;
  min-height: 0;
  height: 100%;
  border: 1px dashed rgb(122 173 217 / 64%);
  border-radius: clamp(4px, 0.46vw, 8px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  color: #83b7e1;
  background:
    linear-gradient(135deg, rgb(55 105 147 / 18%), transparent),
    rgb(9 18 26 / 58%);
  text-align: center;
}

.visual-slot span {
  color: var(--machine-light);
  font-size: clamp(0.39rem, 0.5vw, 0.64rem);
  font-weight: 800;
}

.visual-slot small {
  max-width: 90%;
  color: #b6c7d6;
  font-size: clamp(0.35rem, 0.45vw, 0.55rem);
  line-height: 1.1;
}

.visual-slot.has-image {
  overflow: hidden;
  border-style: solid;
  border-color: #405568;
  background: #141f29;
}

.visual-slot.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.output-product-slot {
  border-color: rgb(239 183 66 / 62%);
  background:
    radial-gradient(circle at 50% 36%, rgb(255 206 75 / 18%), transparent 62%),
    linear-gradient(135deg, rgb(20 28 25 / 95%), rgb(7 10 10 / 95%));
}

.output-product .output-product-slot {
  min-height: clamp(82px, 8.5vw, 138px);
}

.output-product-slot img {
  padding: 2px;
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / 48%));
}

.output-bin-slot.output-product-slot {
  min-height: clamp(110px, 13vw, 190px);
}

.output-bin-image {
  min-height: clamp(130px, 15vw, 220px);
  border-color: rgb(118 197 91 / 62%);
  background:
    radial-gradient(circle at 50% 28%, rgb(128 220 91 / 16%), transparent 66%),
    linear-gradient(135deg, rgb(14 24 22 / 96%), rgb(5 8 8 / 96%));
}

.output-bin-image img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgb(0 0 0 / 52%));
}

.machine-green-button {
  min-height: clamp(29px, 4.15vw, 60px);
  margin-top: clamp(6px, 0.72vw, 11px);
  border: 2px solid #466410;
  border-radius: clamp(5px, 0.65vw, 10px);
  color: #f4f4dc;
  background: linear-gradient(#85bd2d, #4e8616);
  font-size: clamp(0.68rem, 1.15vw, 1.38rem);
  font-weight: 900;
  text-shadow: 0 2px #27420d;
}

.machine-green-button small {
  display: block;
  color: #f9e6aa;
  font-size: 55%;
}

.machine-flow-note {
  margin-top: clamp(6px, 0.72vw, 11px);
  padding: clamp(7px, 0.68vw, 11px);
  border: 1px solid rgb(122 159 56 / 45%);
  border-radius: 6px;
  color: #ddecba;
  background: rgb(35 51 22 / 62%);
  font-size: clamp(0.48rem, 0.58vw, 0.68rem);
  line-height: 1.35;
}

.transformer-center {
  padding: clamp(5px, 0.45vw, 8px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.55vw, 9px);
}

.level-strip {
  height: 9%;
  min-height: 30px;
  display: grid;
  grid-template-columns: auto 1fr clamp(24px, 2.7vw, 43px);
  align-items: center;
  gap: clamp(5px, 0.65vw, 10px);
  color: #f5f1e8;
  font-size: clamp(0.62rem, 0.97vw, 1.17rem);
}

.level-strip > strong {
  padding: clamp(4px, 0.38vw, 7px) clamp(6px, 0.6vw, 10px);
  border-radius: 6px;
  color: #f6e6bd;
  background: #273b51;
}

.level-strip > div {
  height: clamp(19px, 2.3vw, 35px);
  position: relative;
  overflow: hidden;
  border: 2px solid #0f1d2a;
  border-radius: 6px;
  background: #0e1720;
}

.level-strip i {
  display: block;
  height: 100%;
  background: linear-gradient(#3688e5, #1555ad);
}

.level-strip span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.level-strip button {
  height: clamp(25px, 2.65vw, 42px);
  border-radius: 7px;
  color: #edf1d2;
  background: linear-gradient(#8ac637, #4d8319);
  font-weight: 900;
}

.factory-slot {
  height: 50%;
  border-color: var(--machine-light);
  background:
    radial-gradient(circle, rgb(31 50 63 / 40%), rgb(10 17 23 / 84%)),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 4%) 0 10px, transparent 10px 21px);
}

.main-machine-slot {
  height: 50%;
  border-color: rgb(123 229 88 / 72%);
  background: #071112;
}

.main-machine-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04) drop-shadow(0 12px 14px rgb(0 0 0 / 42%));
}

.factory-slot span {
  font-size: clamp(0.62rem, 0.92vw, 1.05rem);
}

.factory-slot small {
  font-size: clamp(0.52rem, 0.65vw, 0.74rem);
}

.center-lower {
  min-height: 20%;
  display: grid;
  grid-template-columns: 38% 62%;
  gap: clamp(4px, 0.5vw, 8px);
}

.center-lower > p {
  padding: clamp(6px, 0.6vw, 10px);
  border: 1px solid #304252;
  border-radius: 6px;
  color: #ebefeb;
  font-size: clamp(0.46rem, 0.65vw, 0.77rem);
  line-height: 1.38;
}

.machine-info-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: clamp(4px, 0.5vw, 8px);
}

.support-factory-slot {
  height: 100%;
  min-height: clamp(78px, 9vw, 138px);
  border-color: rgb(118 192 86 / 60%);
  background:
    radial-gradient(circle at 50% 40%, rgb(110 220 88 / 12%), transparent 62%),
    #10191b;
}

.support-factory-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 780px), (max-height: 640px) and (max-width: 1180px) {
  .main-machine-slot {
    min-height: 150px;
  }

  .center-lower {
    grid-template-columns: 1fr;
  }

  .machine-info-grid {
    grid-template-columns: minmax(92px, 32%) 1fr;
  }

  .support-factory-slot {
    min-height: 92px;
  }
}

@media (max-width: 430px) {
  .machine-info-grid {
    grid-template-columns: 1fr;
  }

  .support-factory-slot {
    max-height: 120px;
  }
}

.machine-stats {
  border-radius: 6px;
  overflow: hidden;
  background: #162330;
}

.machine-stats div {
  min-height: 33.3%;
  padding: 0 clamp(5px, 0.5vw, 9px);
  border-bottom: 1px solid #314251;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3px;
  font-size: clamp(0.41rem, 0.56vw, 0.67rem);
  font-weight: 700;
  text-transform: uppercase;
}

.machine-stats strong {
  color: #eae5d9;
  font-size: clamp(0.56rem, 0.76vw, 0.9rem);
}

.machine-stats div:last-child strong {
  color: #a7df51;
}

.machine-center-actions {
  margin-top: auto;
  display: flex;
  justify-content: center;
  gap: clamp(6px, 0.62vw, 10px);
}

.machine-center-actions .upgrade-machine {
  width: 64%;
  margin: 0;
}

.run-machine {
  width: 26%;
  border: 2px solid #2c6596;
  border-radius: 7px;
  color: #f1f2e6;
  background: linear-gradient(#377db9, #17476d);
  font-size: clamp(0.57rem, 0.83vw, 0.95rem);
  font-weight: 900;
}

.run-machine.processing {
  color: #fff5cd;
  background: linear-gradient(#e79b1f, #af5d0e);
}

.outputs .output-product {
  flex: none;
  height: 24%;
  margin-bottom: clamp(8px, 1vw, 15px);
  grid-template-columns: 42% 1fr;
}

.output-bin-slot {
  height: 43%;
  flex: none;
  margin: 0 2%;
  border-color: var(--machine-light);
}

.output-bin-slot span {
  font-size: clamp(0.53rem, 0.72vw, 0.87rem);
}

.output-meter {
  height: clamp(20px, 2.06vw, 32px);
  position: relative;
  margin: clamp(8px, 0.95vw, 15px) 1% 0;
  overflow: hidden;
  border: 2px solid #071725;
  border-radius: 5px;
  background: #07131d;
}

.output-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(#3a93ed, #1358af);
}

.output-meter span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(0.54rem, 0.85vw, 1rem);
  font-weight: 900;
}

.outputs .machine-green-button {
  margin-top: auto;
}

.transformer-footer {
  position: absolute;
  left: 2.7%;
  right: 2.7%;
  bottom: 2.1%;
  height: 9.2%;
  display: grid;
  grid-template-columns: 7% 38% 55%;
  align-items: center;
  color: #273340;
  text-shadow: none;
}

.footer-info {
  width: clamp(29px, 3.15vw, 52px);
  height: clamp(29px, 3.15vw, 52px);
  margin-left: 9%;
  border: 2px solid #12223b;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: #245791;
  font-size: clamp(1.1rem, 1.8vw, 2.2rem);
  font-weight: 800;
}

.transformer-footer > p {
  padding-left: 5%;
  color: #2f3028;
  font-size: clamp(0.49rem, 0.72vw, 0.83rem);
  font-weight: 700;
  line-height: 1.4;
}

.recipe-visuals {
  height: 86%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.65vw, 10px);
}

.recipe-visuals .visual-slot {
  width: 25%;
  height: 83%;
  border-color: rgb(55 83 104 / 54%);
  color: #385068;
  background: rgb(99 106 91 / 12%);
}

.recipe-visuals .visual-slot span {
  color: #4e7394;
}

.recipe-visuals .visual-slot small {
  color: #3d4b4e;
}

.recipe-visuals b {
  color: #5a8f20;
  font-size: clamp(0.8rem, 1.35vw, 1.6rem);
}

@media (max-width: 780px), (max-height: 640px) and (max-width: 1180px) {
  html {
    font-size: 14px;
  }

  body {
    overflow: hidden;
  }

  .stage {
    width: 100vw;
    height: 100dvh;
    min-width: 0;
    min-height: 100vh;
  }

  #windowBackdrop:not(.hidden) {
    position: fixed;
    width: 100vw;
    height: 100dvh;
    z-index: 80;
    place-items: stretch;
  }

  .game-window {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border-width: 0;
    box-shadow: none;
  }

  .window-titlebar {
    height: 68px;
    min-height: 68px;
    padding: 9px 12px;
  }

  .window-titlebar h2 {
    max-width: calc(100vw - 84px);
    font-size: 1.25rem;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .panel-kicker {
    font-size: 0.58rem;
  }

  .close-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    font-size: 1rem;
  }

  .window-content {
    height: calc(100dvh - 68px);
    max-height: none;
    padding: 11px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cards-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .panel-card {
    padding: 10px;
  }

  .game-window.transformer-window {
    width: 100vw;
  }

  body:has(#windowBackdrop:not(.hidden) .storage-window) {
    overflow: hidden;
  }

  #windowBackdrop:not(.hidden):has(.storage-window) {
    position: fixed;
    width: 100vw;
    height: 100dvh;
    z-index: 80;
    place-items: stretch;
    background: #060c0c;
  }

  .game-window.storage-window {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    border-width: 0;
    box-shadow: none;
  }

  .storage-window .window-titlebar {
    height: 76px;
    min-height: 76px;
    padding: 10px 13px;
    border-bottom-width: 2px;
  }

  .storage-window .window-titlebar::before {
    margin-right: 9px;
    font-size: 2.15rem;
  }

  .storage-window .panel-kicker {
    font-size: 0.62rem;
  }

  .storage-window .window-titlebar h2 {
    font-size: 1.7rem;
  }

  .storage-window .close-button {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  .storage-window .window-content {
    height: calc(100dvh - 76px);
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .warehouse-sheet {
    height: auto;
    min-height: 100%;
    gap: 12px;
  }

  .warehouse-status {
    flex: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .warehouse-status article {
    min-width: 0;
    min-height: 58px;
    padding: 5px 7px;
    gap: 5px;
    flex-wrap: wrap;
  }

  .warehouse-status img {
    width: 33px;
    height: 33px;
  }

  .warehouse-status span {
    font-size: 0.58rem;
  }

  .warehouse-status strong {
    flex-basis: 100%;
    margin-left: 38px;
    margin-top: -17px;
    font-size: 0.82rem;
  }

  .warehouse-columns {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .warehouse-panel {
    min-height: auto;
    padding: 12px;
    gap: 9px;
    border-radius: 9px;
  }

  .warehouse-panel h3 {
    font-size: 1.08rem;
  }

  .warehouse-caption {
    font-size: 0.78rem;
  }

  .warehouse-incoming,
  .warehouse-input,
  .warehouse-product {
    flex: none;
    min-height: 94px;
    padding: 7px;
    gap: 8px;
    border-radius: 7px;
  }

  .storage-art-slot {
    width: 90px;
    height: 72px;
    min-height: 72px;
    padding: 4px;
  }

  .warehouse-incoming .storage-art-slot {
    width: 104px;
    height: 76px;
  }

  .warehouse-incoming strong,
  .warehouse-input div b,
  .warehouse-product-copy strong {
    font-size: 0.9rem;
  }

  .warehouse-incoming span,
  .warehouse-input > em,
  .warehouse-product-copy small {
    font-size: 0.76rem;
  }

  .warehouse-incoming > b {
    font-size: 0.82rem;
  }

  .warehouse-input > strong {
    width: 45px;
    height: 45px;
    font-size: 0.88rem;
  }

  .warehouse-input div b {
    margin-bottom: 8px;
  }

  .warehouse-input div span {
    height: 8px;
  }

  .warehouse-product-copy b {
    margin-top: 4px;
    font-size: 1.16rem;
  }

  .warehouse-product button,
  .warehouse-fuel {
    min-width: 70px;
    min-height: 54px;
    font-size: 0.76rem;
  }

  .warehouse-product button small {
    font-size: 0.59rem;
  }

  .warehouse-locked {
    min-height: 54px;
    padding: 8px;
    font-size: 0.73rem;
  }

  .warehouse-capacity {
    padding: 9px;
    gap: 8px;
    font-size: 0.7rem;
  }

  .warehouse-capacity div {
    height: 9px;
  }

  .warehouse-collect,
  .warehouse-bulk-sale {
    min-height: 58px;
    margin-top: 4px;
    font-size: 0.88rem;
  }

  .warehouse-collect small {
    font-size: 0.6rem;
  }

  .warehouse-actions {
    flex: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .warehouse-actions button {
    min-height: 72px;
    padding: 8px;
    font-size: 0.9rem;
  }

  .warehouse-actions button small {
    font-size: 0.66rem;
  }

  .warehouse-actions .warehouse-art-action {
    gap: 8px;
    padding: 7px;
  }

  .warehouse-art-action img {
    width: 56px;
    height: 56px;
  }

  body:has(#windowBackdrop:not(.hidden) .research-window) {
    overflow: hidden;
  }

  #windowBackdrop:not(.hidden):has(.research-window) {
    position: fixed;
    width: 100vw;
    height: 100dvh;
    z-index: 80;
    place-items: stretch;
    background: #061011;
  }

  .game-window.research-window {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .research-window .window-titlebar {
    height: 76px;
    min-height: 76px;
    padding: 10px 13px;
  }

  .research-window .window-titlebar::before {
    width: 55px;
    height: 55px;
    margin-right: 9px;
    font-size: 2rem;
  }

  .research-window .panel-kicker {
    font-size: 0.62rem;
  }

  .research-window .window-titlebar h2 {
    font-size: 1.38rem;
  }

  .research-window .close-button {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  .research-window .window-content {
    height: calc(100dvh - 76px);
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .research-console {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .research-screen {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .research-side-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .research-side-rail button {
    min-height: 78px;
  }

  .research-command-bar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .research-resources {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .research-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .research-stat-strip article {
    justify-content: flex-start;
    border-right: 0;
  }

  .research-showcase {
    display: flex;
    flex-direction: column;
  }

  .research-lab-visual {
    height: 230px;
  }

  .research-center-upgrade {
    border-left: 0;
    border-top: 2px solid #183944;
  }

  .research-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .research-sheet,
  .research-layout {
    height: auto;
  }

  .research-layout,
  .research-core {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .research-panel,
  .research-hero,
  .research-active,
  .research-library {
    flex: none;
    min-height: auto;
    padding: 12px;
    border-radius: 9px;
  }

  .research-panel h3,
  .research-hero h3,
  .research-active h3,
  .research-library h3 {
    font-size: 1rem;
  }

  .research-hero {
    flex-direction: column;
    min-height: 360px;
  }

  .research-hero-copy {
    width: 100%;
  }

  .research-rank strong {
    width: 58px;
    height: 58px;
    font-size: 1.24rem;
  }

  .research-rank p,
  .research-rule {
    font-size: 0.76rem;
  }

  .research-progress {
    height: 20px;
  }

  .research-progress b {
    font-size: 0.72rem;
  }

  .research-facility-art {
    height: 190px;
    flex: none;
  }

  .research-active > div,
  .research-library > div {
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .research-booster,
  .research-bonus-row,
  .research-tech {
    min-height: 84px;
  }

  .research-booster .research-art-slot,
  .research-bonus-row .research-art-slot,
  .research-tech .research-art-slot {
    width: 74px;
  }

  .research-booster strong,
  .research-bonus-row strong,
  .research-tech strong {
    font-size: 0.85rem;
  }

  .research-booster span,
  .research-bonus-row span,
  .research-tech span {
    font-size: 0.72rem;
  }

  .research-effect-badge {
    min-height: 34px;
    font-size: 0.76rem;
  }

  .research-project {
    min-height: 300px;
    padding: 10px;
    gap: 8px;
  }

  .research-project .research-art-slot {
    width: 100%;
    min-height: 140px;
    aspect-ratio: 1.36;
    flex: none;
  }

  .research-project strong {
    font-size: 0.92rem;
  }

  .research-project > span,
  .research-project p {
    font-size: 0.72rem;
  }

  .research-project button {
    min-height: 56px;
    font-size: 0.92rem;
  }

  .research-project button small {
    font-size: 0.64rem;
  }

  .research-points span {
    font-size: 0.76rem;
  }

  .research-points strong {
    font-size: 1.2rem;
  }

  .research-points em {
    min-height: 54px;
    font-size: 0.86rem;
  }

  body:has(#windowBackdrop:not(.hidden) .power-window) {
    overflow: hidden;
  }

  #windowBackdrop:not(.hidden):has(.power-window) {
    position: fixed;
    width: 100vw;
    height: 100dvh;
    z-index: 80;
    place-items: stretch;
    background: #060c0c;
  }

  .game-window.power-window {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .power-window .window-titlebar {
    height: 76px;
    min-height: 76px;
    padding: 10px 13px;
  }

  .power-window .window-titlebar::before {
    width: 55px;
    height: 55px;
    margin-right: 9px;
    font-size: 2rem;
  }

  .power-window .panel-kicker {
    font-size: 0.62rem;
  }

  .power-window .window-titlebar h2 {
    font-size: 1.48rem;
  }

  .power-window .close-button {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  .power-window .window-content {
    height: calc(100dvh - 76px);
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .power-shop-sheet {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .power-panel {
    flex: none;
    min-height: auto;
    padding: 12px;
    gap: 10px;
    border-radius: 9px;
  }

  .power-panel h3 {
    font-size: 1.08rem;
  }

  .power-facility-art {
    height: 216px;
    flex: none;
  }

  .power-stats article {
    min-height: 66px;
  }

  .power-stats span,
  .power-supplies span {
    font-size: 0.73rem;
  }

  .power-stats b {
    font-size: 1rem;
  }

  .power-supplies span {
    padding: 10px 8px;
  }

  .power-fuel-art {
    width: 116px;
    height: 116px;
  }

  .fuel-reserve {
    min-height: 132px;
    padding: 8px;
  }

  .fuel-reserve strong {
    font-size: 0.93rem;
  }

  .fuel-reserve span {
    font-size: 0.7rem;
  }

  .power-fuel-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .power-fuel-button {
    min-height: 60px;
    font-size: 0.94rem;
  }

  .power-fuel-button small {
    font-size: 0.66rem;
  }

  .power-help {
    font-size: 0.78rem;
  }

  .power-installed {
    min-height: 164px;
    padding: 8px;
  }

  .power-installed-art {
    width: 50%;
  }

  .power-installed span {
    font-size: 0.72rem;
  }

  .power-installed strong {
    font-size: 1.26rem;
  }

  .power-installed small {
    font-size: 0.7rem;
  }

  .energy-offer-list {
    flex: none;
    overflow: visible;
    gap: 8px;
  }

  .energy-offer {
    min-height: 86px;
    padding: 7px;
    grid-template-columns: 76px 1fr 118px;
    gap: 8px;
  }

  .energy-offer > img {
    height: 70px;
  }

  .energy-offer strong {
    font-size: 0.91rem;
  }

  .energy-offer small {
    font-size: 0.69rem;
  }

  .energy-offer button {
    min-width: 118px;
    min-height: 54px;
    font-size: 0.86rem;
  }

  .power-shield {
    flex: none;
    min-height: 96px;
    padding: 7px;
  }

  .power-shield .power-art-slot {
    width: 78px;
    height: 78px;
  }

  .power-shield strong {
    font-size: 0.9rem;
  }

  .power-shield span {
    font-size: 0.72rem;
  }
}

@media (max-height: 520px) and (max-width: 1180px) {
  html {
    font-size: 12.5px;
  }

  .window-titlebar {
    height: 58px;
    min-height: 58px;
    padding: 7px 10px;
  }

  .window-titlebar h2 {
    font-size: 1.12rem;
  }

  .panel-kicker {
    font-size: 0.5rem;
  }

  .close-button {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .window-content {
    height: calc(100dvh - 58px);
    padding: 9px;
  }

  .cards-grid {
    gap: 7px;
  }

  .panel-card {
    padding: 8px;
  }

  .storage-window .window-titlebar,
  .research-window .window-titlebar,
  .power-window .window-titlebar {
    height: 58px;
    min-height: 58px;
    padding: 7px 10px;
  }

  .storage-window .window-titlebar::before,
  .research-window .window-titlebar::before,
  .power-window .window-titlebar::before {
    width: 42px;
    height: 42px;
    margin-right: 7px;
    font-size: 1.55rem;
  }

  .storage-window .window-titlebar h2,
  .research-window .window-titlebar h2,
  .power-window .window-titlebar h2 {
    font-size: 1.18rem;
  }

  .storage-window .panel-kicker,
  .research-window .panel-kicker,
  .power-window .panel-kicker {
    font-size: 0.52rem;
  }

  .storage-window .close-button,
  .research-window .close-button,
  .power-window .close-button {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .storage-window .window-content,
  .research-window .window-content,
  .power-window .window-content {
    height: calc(100dvh - 58px);
    padding: 9px;
    overflow-y: auto;
  }

  .warehouse-sheet,
  .warehouse-columns,
  .research-layout,
  .research-core,
  .power-shop-sheet {
    gap: 9px;
  }

  .warehouse-status {
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .warehouse-status article {
    min-height: 48px;
  }

  .warehouse-incoming,
  .warehouse-input,
  .warehouse-product {
    min-height: 76px;
  }

  .storage-art-slot,
  .warehouse-incoming .storage-art-slot {
    width: 72px;
    height: 58px;
    min-height: 58px;
  }

  .warehouse-panel,
  .research-panel,
  .research-hero,
  .research-active,
  .research-library,
  .power-panel {
    padding: 9px;
  }

  .research-hero {
    min-height: 0;
  }

  .research-facility-art {
    height: 132px;
  }

  .research-project {
    min-height: 280px;
  }

  .research-project .research-art-slot {
    min-height: 124px;
    aspect-ratio: 1.36;
  }

  .power-facility-art {
    height: 150px;
  }

  .fuel-reserve,
  .power-installed {
    min-height: 108px;
  }
}

@media (max-width: 430px) {
  html {
    font-size: 13px;
  }

  .window-titlebar {
    height: 62px;
    min-height: 62px;
    padding: 8px 10px;
  }

  .window-titlebar h2 {
    font-size: 1.08rem;
  }

  .window-content {
    height: calc(100dvh - 62px);
    padding: 9px;
  }

  .warehouse-actions,
  .power-fuel-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .warehouse-actions button,
  .power-fuel-button {
    min-height: 58px;
  }

  .research-project,
  .research-tech,
  .power-generator,
  .power-storage,
  .power-installed,
  .warehouse-incoming,
  .warehouse-input,
  .warehouse-product {
    min-width: 0;
  }

  .research-command-bar,
  .research-resources,
  .research-stat-strip,
  .research-card-row {
    grid-template-columns: 1fr;
  }

  .research-level-chip {
    justify-content: center;
  }

  .research-lab-visual {
    height: 190px;
  }

  .research-showcase {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .research-lab-visual .research-facility-art {
    min-height: 190px;
  }

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

  .research-project {
    min-height: 310px;
  }

  .research-project .research-art-slot {
    min-height: 145px;
  }

  .research-active-list article {
    flex-direction: column;
    align-items: stretch;
  }

  .research-active-list button {
    width: 100%;
    min-width: 0;
  }
}

@media (orientation: portrait) and (max-width: 1180px) {
  body::before {
    display: none;
  }

  .stage {
    width: var(--app-height, 100dvh);
    height: 100vw;
    min-width: var(--app-height, 100dvh);
    min-height: 100vw;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
  }

  body:has(#windowBackdrop:not(.hidden)) .stage {
    width: 100vw;
    height: 100dvh;
    min-width: 100vw;
    min-height: 100dvh;
    left: 0;
    top: 0;
    transform: none;
  }
}

/* Final research repair: overrides older modal/card rules so images never clip. */
.game-window.research-window {
  width: min(96vw, 1480px);
  height: min(94dvh, 920px);
  aspect-ratio: auto;
}

.research-window .window-content {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.research-screen,
.research-console {
  min-height: 100%;
  height: auto;
}

.research-console {
  display: flex;
  flex-direction: column;
}

.research-showcase {
  min-height: clamp(330px, 34dvh, 430px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  overflow: visible;
}

.research-lab-visual .research-facility-art {
  min-height: 280px;
  height: 100%;
}

.research-card-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
}

.research-project {
  min-height: 330px;
  height: auto;
}

.research-project .research-art-slot {
  width: 100%;
  min-height: 150px;
  height: auto;
  max-height: none;
  aspect-ratio: 1.36;
  flex: none;
}

.research-lab-visual .research-facility-art img,
.research-project .research-art-slot img,
.research-stat-strip .research-art-slot img,
.research-active-list .research-art-slot img {
  object-fit: contain;
}

@media (max-width: 780px), (max-height: 640px) and (max-width: 1180px) {
  .research-showcase {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .research-lab-visual .research-facility-art {
    min-height: 220px;
  }

  .research-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .research-project {
    min-height: 310px;
  }
}

@media (max-width: 430px) {
  .research-card-row {
    grid-template-columns: 1fr;
  }
}

/* Research screen v2: closer to the supplied reference, with unclipped assets. */
.game-window.research-window {
  width: min(97vw, 1536px);
  height: min(94dvh, 980px);
  border: 2px solid #24343b;
  border-radius: 12px;
  background: #040a0d;
}

.research-window .window-titlebar {
  height: 90px;
  min-height: 90px;
  padding: 12px 22px;
  background:
    radial-gradient(circle at 45% -20%, rgb(42 204 245 / 16%), transparent 34%),
    linear-gradient(90deg, #071014, #10191d 46%, #071014);
}

.research-window .window-titlebar h2 {
  font-size: clamp(2rem, 3vw, 3.05rem);
}

.research-window .window-content {
  height: calc(100% - 90px);
  padding: 12px;
  overflow-y: auto;
}

.research-screen {
  min-height: 100%;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
}

.research-side-rail {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
}

.research-side-rail button {
  min-height: 0;
  border-radius: 12px;
  font-size: 0.86rem;
}

.research-console {
  min-height: 0;
  display: grid;
  grid-template-rows: 80px minmax(285px, 0.92fr) auto 126px;
  gap: 12px;
}

.research-command-bar {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: 14px;
  padding: 10px 14px;
}

.research-command-bar .research-resources {
  display: none;
}

.research-stat-strip {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.research-stat-strip article {
  border-right: 1px solid #273941;
  justify-content: center;
}

.research-level-chip strong {
  width: 54px;
  height: 54px;
}

.research-showcase {
  min-height: 285px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36%;
  overflow: hidden;
}

.research-lab-visual {
  padding: 10px;
}

.research-lab-visual .research-facility-art {
  min-height: 260px;
  height: 100%;
  border-radius: 12px;
  background: #061014;
}

.research-lab-visual .research-facility-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}

.research-center-upgrade {
  padding: 18px 24px;
}

.research-card-section {
  padding: 12px 16px;
}

.research-card-section h3,
.research-active-lane h3 {
  font-size: clamp(1.35rem, 1.8vw, 1.85rem);
}

.research-card-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.research-project {
  min-height: 270px;
  padding: 14px 16px 10px;
  border: 2px solid #203a45;
  border-radius: 10px;
  display: grid;
  grid-template-rows: auto minmax(118px, 1fr) auto 42px 28px;
  gap: 8px;
  background:
    radial-gradient(circle at 50% 26%, rgb(51 198 237 / 13%), transparent 45%),
    linear-gradient(#0b171b, #081012);
}

.research-project h4 {
  margin: 0;
  color: #f1f4ef;
  font-size: clamp(0.82rem, 1vw, 1.08rem);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.research-card-visual {
  position: relative;
  min-height: 118px;
  display: grid;
  place-items: center;
}

.research-card-visual .research-art-slot {
  width: 100%;
  height: 100%;
  min-height: 118px;
  border: 0;
  background: transparent;
}

.research-card-visual .research-art-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}

.research-level-badge {
  position: absolute;
  top: 6px;
  right: 4px;
  border: 1px solid #437820;
  border-radius: 6px;
  padding: 5px 8px;
  color: #c9ff78;
  background: #183414;
  font-size: 0.84rem;
  font-weight: 900;
}

.research-project p {
  color: #e2ece8;
  font-size: clamp(0.72rem, 0.8vw, 0.88rem);
  line-height: 1.18;
  text-align: center;
}

.research-project button {
  min-height: 42px;
  border: 1px solid #8fda2e;
  border-radius: 6px;
  color: #f8ffe6;
  background: linear-gradient(#79c421, #367809);
  font-size: clamp(0.95rem, 1.15vw, 1.25rem);
  text-shadow: 0 1px 0 #1b3607;
}

.research-card-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #f3f1ef;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 900;
}

.research-active-lane {
  min-height: 126px;
  padding: 12px 18px;
}

.research-empty-active,
.research-active-list article {
  min-height: 72px;
}

@media (max-width: 1080px) {
  .research-screen {
    grid-template-columns: 1fr;
  }

  .research-side-rail {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
  }

  .research-console {
    display: flex;
    flex-direction: column;
  }

  .research-command-bar,
  .research-showcase {
    display: flex;
    flex-direction: column;
  }

  .research-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .research-card-row,
  .research-stat-strip {
    grid-template-columns: 1fr;
  }

  .research-project {
    min-height: 300px;
  }
}

/* TechLab reference layout: independent from legacy research styles. */
.research-window .window-content {
  padding: 12px;
  overflow-y: auto;
}

.techlab-screen {
  min-height: 100%;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  color: #f2f5f0;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.techlab-rail {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
}

.techlab-rail button {
  border: 2px solid #2a3940;
  border-radius: 12px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #d7dcda;
  background: linear-gradient(#11191d, #070d10);
  font-size: 0.86rem;
  font-weight: 900;
}

.techlab-rail button span {
  font-size: 2.25rem;
}

.techlab-rail button.active {
  border-color: #77d61e;
  color: white;
  background: radial-gradient(circle at 50% 28%, rgb(126 224 37 / 24%), transparent 55%), #07120d;
}

.techlab-main {
  display: grid;
  grid-template-rows: 78px 74px minmax(292px, 0.9fr) auto 124px;
  gap: 12px;
}

.techlab-top,
.techlab-bonuses,
.techlab-hero,
.techlab-researches,
.techlab-active {
  border: 2px solid #203841;
  border-radius: 12px;
  background: linear-gradient(125deg, #0a1418, #050b0e);
  box-shadow: inset 0 0 22px rgb(0 0 0 / 55%);
}

.techlab-top {
  padding: 10px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 150px 150px;
  align-items: center;
  gap: 14px;
}

.techlab-level {
  display: flex;
  align-items: center;
  gap: 10px;
}

.techlab-level span,
.techlab-progress span,
.techlab-bonuses small {
  color: #e8eee8;
  font-size: 0.84rem;
  font-weight: 800;
}

.techlab-level strong {
  width: 54px;
  height: 54px;
  clip-path: polygon(50% 0, 91% 24%, 91% 76%, 50% 100%, 9% 76%, 9% 24%);
  display: grid;
  place-items: center;
  background: linear-gradient(#83d01a, #2d6909);
  font-size: 1.45rem;
}

.techlab-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.techlab-progress i {
  height: 20px;
  border: 2px solid #1b2d33;
  border-radius: 7px;
  overflow: hidden;
  background: #080d0f;
}

.techlab-progress i b {
  height: 100%;
  display: block;
  background: linear-gradient(#a3e838, #63af13);
}

.techlab-progress em {
  border: 1px solid #32464d;
  border-radius: 7px;
  padding: 5px 10px;
  font-style: normal;
  font-weight: 900;
}

.techlab-wallet {
  border: 2px solid #2b3d45;
  border-radius: 11px;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 34px;
  align-items: center;
  gap: 8px;
  background: #080f12;
  font-size: 1.25rem;
  font-weight: 900;
}

.techlab-wallet button {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(#9ce92b, #347207);
  color: white;
  font-size: 1.45rem;
  font-weight: 900;
}

.techlab-bonuses {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 0;
}

.techlab-bonuses article {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-right: 1px solid #263940;
}

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

.techlab-bonuses article > span {
  font-size: 2rem;
}

.techlab-bonuses strong {
  color: #9ee93a;
  font-size: 1.28rem;
}

.techlab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36%;
  overflow: hidden;
  min-height: 0;
}

.techlab-hero-art {
  padding: 10px;
}

.techlab-hero-art img {
  width: 100%;
  height: 100%;
  min-height: 272px;
  border-radius: 11px;
  display: block;
  object-fit: cover;
}

.techlab-center {
  border-left: 2px solid #203841;
  padding: 18px 24px;
  display: grid;
  align-content: start;
  gap: 13px;
}

.techlab-center h3,
.techlab-researches h3,
.techlab-active h3 {
  margin: 0;
  color: #9ee93a;
  font-size: 1.65rem;
  line-height: 1;
}

.techlab-next {
  display: flex;
  justify-content: space-between;
  font-size: 1.25rem;
  font-weight: 900;
}

.techlab-next span {
  color: #9ee93a;
  font-size: 1.7rem;
}

.techlab-center ul {
  margin: 0;
  padding: 0;
  border: 1px solid #263d46;
  border-radius: 9px;
  list-style: none;
  overflow: hidden;
}

.techlab-center li {
  padding: 10px 13px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #263d46;
}

.techlab-center li:last-child {
  border-bottom: 0;
}

.techlab-center li b {
  color: #9ee93a;
}

.techlab-center button {
  min-height: 72px;
  border: 2px solid #e8a923;
  border-radius: 10px;
  color: white;
  background: linear-gradient(#ebb92c, #925407);
  font-size: 1.5rem;
  font-weight: 900;
}

.techlab-center button small {
  display: block;
  color: #f5e0b3;
  font-size: 0.9rem;
}

.techlab-researches {
  padding: 14px 16px;
  min-height: 0;
}

.techlab-researches > div {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.techlab-card {
  min-height: 270px;
  border: 2px solid #203b46;
  border-radius: 11px;
  padding: 12px 14px 10px;
  display: grid;
  grid-template-rows: 34px 126px minmax(36px, auto) 42px 26px;
  gap: 8px;
  background: radial-gradient(circle at 50% 23%, rgb(42 204 245 / 12%), transparent 46%), #081216;
}

.techlab-card h4 {
  margin: 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.05;
}

.techlab-card-art {
  position: relative;
  min-height: 126px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.techlab-card-art img {
  width: 100%;
  height: 100%;
  max-height: 118px;
  display: block;
  object-fit: contain;
}

.techlab-card-art span {
  position: absolute;
  top: 6px;
  right: 4px;
  border: 1px solid #477c22;
  border-radius: 6px;
  padding: 5px 8px;
  color: #caff76;
  background: #173412;
  font-weight: 900;
}

.techlab-card p {
  margin: 0;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.2;
}

.techlab-card button {
  border-radius: 7px;
  background: linear-gradient(#85d426, #3b850b);
  color: white;
  font-size: 1.22rem;
  font-weight: 900;
}

.techlab-card em {
  text-align: center;
  font-style: normal;
  font-weight: 900;
}

.techlab-active {
  padding: 12px 18px;
}

.techlab-empty-slot,
.techlab-active-list article {
  min-height: 70px;
  margin-top: 10px;
  border: 1px solid #263d46;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #081115;
}

.techlab-empty-slot {
  justify-content: center;
  color: #aeb9b9;
}

.techlab-empty-slot span {
  font-size: 2rem;
}

.techlab-active-list img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.techlab-active-list article > div {
  flex: 1;
}

.techlab-active-list i {
  height: 14px;
  border-radius: 999px;
  display: block;
  overflow: hidden;
  background: #101b1d;
}

.techlab-active-list i b {
  height: 100%;
  display: block;
  background: linear-gradient(#a3e838, #63af13);
}

.techlab-active-list button {
  min-width: 190px;
  min-height: 58px;
  border: 2px solid #e8a923;
  border-radius: 9px;
  color: white;
  background: linear-gradient(#ebb92c, #925407);
  font-weight: 900;
}

@media (max-width: 1180px) {
  .techlab-screen {
    grid-template-columns: 1fr;
  }

  .techlab-rail {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
  }

  .techlab-main {
    display: flex;
    flex-direction: column;
  }

  .techlab-top,
  .techlab-hero {
    display: flex;
    flex-direction: column;
  }

  .techlab-bonuses,
  .techlab-researches > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .techlab-rail,
  .techlab-bonuses,
  .techlab-researches > div {
    grid-template-columns: 1fr;
  }

  .techlab-top {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* StoreHub: creative depot layout with larger visual cards. */
.storage-window .window-content {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.storehub-screen {
  min-height: 100%;
  display: grid;
  grid-template-rows: 70px minmax(280px, 0.9fr) auto 82px;
  gap: 12px;
  color: #eef4e7;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.storehub-top,
.storehub-main,
.storehub-grids,
.storehub-actions {
  border: 2px solid #294233;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 0%, rgb(143 224 41 / 10%), transparent 45%), #07100d;
  box-shadow: inset 0 0 22px rgb(0 0 0 / 55%);
}

.storehub-top {
  padding: 10px 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) minmax(230px, 1.5fr);
  gap: 10px;
}

.storehub-metric,
.storehub-capacity {
  min-width: 0;
  border: 1px solid #314c35;
  border-radius: 9px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(#101a15, #08100d);
}

.storehub-metric img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.storehub-metric span,
.storehub-capacity span {
  color: #b8c7b2;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.storehub-metric strong,
.storehub-capacity strong {
  margin-left: auto;
  color: #9fe636;
  font-size: 1.05rem;
}

.storehub-capacity {
  display: grid;
  grid-template-columns: auto 1fr;
}

.storehub-capacity i,
.storehub-upgrade i,
.storehub-truck i,
.storehub-stock i {
  height: 11px;
  border-radius: 999px;
  overflow: hidden;
  background: #111a16;
}

.storehub-capacity i {
  grid-column: 1 / -1;
}

.storehub-capacity i b,
.storehub-upgrade i b,
.storehub-truck i b,
.storehub-stock i b {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #71bd17, #d6f045);
}

.storehub-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  overflow: hidden;
}

.storehub-dock {
  min-width: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
  gap: 18px;
}

.storehub-dock-art {
  border: 2px solid #294a3b;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgb(120 207 36 / 20%), transparent 62%), #07110e;
}

.storehub-dock-art img {
  width: 92%;
  height: 92%;
  max-height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgb(0 0 0 / 55%));
}

.storehub-dock-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 12px;
}

.storehub-dock-copy h3,
.storehub-upgrade h3,
.storehub-grids h3 {
  margin: 0;
  color: #a4ec3a;
  font-size: clamp(1.25rem, 1.75vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
}

.storehub-dock-copy p {
  color: #cbd7ca;
  font-size: 1rem;
}

.storehub-empty,
.storehub-truck {
  border: 1px solid #2e4938;
  border-radius: 10px;
  padding: 12px;
  background: #0b1511;
}

.storehub-truck {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
}

.storehub-truck span {
  grid-column: 1 / -1;
  color: #b7c6b5;
}

.storehub-truck i {
  grid-column: 1 / 2;
}

.storehub-truck button,
.storehub-dock-actions button,
.storehub-upgrade button,
.storehub-actions button,
.storehub-stock button {
  border-radius: 8px;
  color: #f8ffe8;
  background: linear-gradient(#7ccc20, #35760a);
  font-weight: 900;
  text-transform: uppercase;
}

.storehub-dock-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.storehub-dock-actions button,
.storehub-upgrade button,
.storehub-actions button {
  min-height: 58px;
  font-size: 1.08rem;
}

.storehub-dock-actions small,
.storehub-upgrade small,
.storehub-actions small {
  display: block;
  color: #e6f5ba;
  font-size: 0.72rem;
}

.storehub-upgrade {
  border-left: 2px solid #294233;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 12px;
  background: linear-gradient(145deg, #0c1811, #07100d);
}

.storehub-upgrade strong {
  color: white;
  font-size: 2rem;
}

.storehub-upgrade p {
  color: #cbd7ca;
}

.storehub-upgrade button {
  background: linear-gradient(#e4b32a, #8f5708);
}

.storehub-grids {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.storehub-card-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.storehub-stock {
  min-height: 178px;
  border: 1px solid #2d4938;
  border-radius: 12px;
  padding: 10px;
  display: grid;
  grid-template-rows: 112px auto;
  gap: 10px;
  background: radial-gradient(circle at 50% 18%, rgb(128 211 40 / 14%), transparent 48%), #081310;
}

.storehub-stock > img {
  width: 100%;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgb(0 0 0 / 45%));
}

.storehub-stock strong {
  display: block;
  color: #f0f6ed;
  font-size: 0.92rem;
  text-transform: uppercase;
}

.storehub-stock span {
  display: block;
  color: #b8c7b6;
  font-size: 0.82rem;
}

.storehub-stock button {
  width: 100%;
  min-height: 34px;
  margin-top: 7px;
}

.storehub-stock.product {
  border-color: #315064;
  background: radial-gradient(circle at 50% 18%, rgb(42 188 230 / 14%), transparent 48%), #081219;
}

.storehub-actions {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 980px) {
  .storehub-screen {
    display: flex;
    flex-direction: column;
  }

  .storehub-top,
  .storehub-main,
  .storehub-dock,
  .storehub-grids,
  .storehub-actions {
    grid-template-columns: 1fr;
  }

  .storehub-upgrade {
    border-left: 0;
    border-top: 2px solid #294233;
  }

  .storehub-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  }

  .storehub-stock {
    min-height: 156px;
    grid-template-rows: 92px auto;
  }

  .storehub-stock > img {
    height: 92px;
  }
}

/* Creative main menu: larger icon buttons, active glow, and mobile-safe scrolling. */
.dock-menu,
.utility-menu {
  z-index: 8;
  border: 1px solid rgb(236 190 87 / 46%);
  border-radius: 14px;
  overflow: visible;
  gap: clamp(6px, 0.58vw, 10px);
  padding: clamp(5px, 0.55vw, 9px);
  background:
    linear-gradient(180deg, rgb(20 33 29 / 88%), rgb(8 13 13 / 94%)),
    radial-gradient(circle at 30% 0%, rgb(255 213 97 / 22%), transparent 46%);
  box-shadow:
    0 16px 36px rgb(0 0 0 / 55%),
    inset 0 1px 0 rgb(255 244 178 / 24%);
  backdrop-filter: blur(8px);
}

.dock-menu::before,
.utility-menu::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 18px;
  background: linear-gradient(90deg, rgb(72 203 222 / 18%), rgb(255 198 68 / 18%), rgb(126 226 79 / 18%));
  filter: blur(7px);
  opacity: 0.78;
}

.dock-button,
.utility-button {
  position: relative;
  width: clamp(72px, 6.1vw, 108px);
  height: clamp(66px, 5.55vw, 96px);
  border: 1px solid rgb(151 184 126 / 26%);
  border-right: 1px solid rgb(151 184 126 / 26%);
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  gap: 3px;
  color: #f6edcf;
  background:
    radial-gradient(circle at 50% 18%, rgb(147 239 66 / 18%), transparent 44%),
    linear-gradient(180deg, rgb(31 48 38 / 96%), rgb(9 17 16 / 96%));
  text-shadow: 0 2px 2px rgb(0 0 0 / 60%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    inset 0 -10px 18px rgb(0 0 0 / 24%);
}

.dock-button:last-child,
.utility-button:last-child {
  border-right: 1px solid rgb(151 184 126 / 26%);
}

.dock-button::before,
.utility-button::before {
  content: "";
  position: absolute;
  inset: 7px 9px auto;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(255 222 108 / 72%), transparent);
  opacity: 0.8;
}

.dock-button::after,
.utility-button::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 4px;
  border-radius: 999px;
  background: rgb(78 101 83 / 72%);
  box-shadow: 0 0 0 transparent;
}

.dock-button:hover,
.utility-button:hover,
.dock-button.active,
.utility-button.active,
.play-hud-button.active {
  transform: translateY(-3px);
  color: #fff7bf;
  border-color: rgb(255 213 91 / 78%);
  background:
    radial-gradient(circle at 50% 18%, rgb(255 216 75 / 28%), transparent 46%),
    linear-gradient(180deg, rgb(57 70 34 / 98%), rgb(14 27 20 / 98%));
  box-shadow:
    0 10px 20px rgb(0 0 0 / 38%),
    0 0 18px rgb(136 228 52 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 22%);
}

.dock-button.active::after,
.utility-button.active::after,
.play-hud-button.active::after {
  background: linear-gradient(90deg, #45d9ff, #a7ef37, #ffd45f);
  box-shadow: 0 0 12px rgb(134 231 65 / 78%);
}

.dock-button img {
  width: clamp(46px, 4.2vw, 74px);
  height: clamp(38px, 3.7vw, 66px);
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgb(0 0 0 / 44%));
}

.dock-button.asset-button {
  padding: 5px 6px 8px;
}

.dock-button.asset-button img {
  width: clamp(48px, 4.4vw, 78px);
  height: clamp(38px, 3.7vw, 66px);
  object-fit: contain;
}

.dock-button span,
.utility-button {
  font-size: clamp(0.58rem, 0.68vw, 0.78rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.dock-button.letter-icon b {
  width: clamp(44px, 4vw, 70px);
  height: clamp(36px, 3.45vw, 62px);
  border-radius: 10px;
  border-color: rgb(102 214 232 / 48%);
  background:
    radial-gradient(circle at 50% 30%, rgb(75 210 234 / 30%), transparent 58%),
    linear-gradient(180deg, #1c3642, #101917);
  color: #ffe79b;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%);
}

.utility-button span {
  width: clamp(30px, 2.8vw, 48px);
  height: clamp(30px, 2.8vw, 48px);
  border-radius: 11px;
  background: rgb(255 255 255 / 7%);
}

.play-hud-button {
  border-radius: 15px;
  border-color: rgb(255 209 83 / 60%);
  background:
    radial-gradient(circle at 20% 10%, rgb(83 213 239 / 22%), transparent 36%),
    linear-gradient(180deg, rgb(53 63 30 / 96%), rgb(14 24 18 / 98%));
  box-shadow:
    0 16px 30px rgb(0 0 0 / 48%),
    inset 0 1px 0 rgb(255 255 255 / 18%);
}

.play-hud-button::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 4px;
  border-radius: 999px;
  background: rgb(98 130 73 / 70%);
}

@media (max-width: 780px), (max-height: 640px) and (max-width: 1180px) {
  .dock-menu {
    left: 8px;
    right: 8px;
    bottom: max(6px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .dock-menu::-webkit-scrollbar {
    display: none;
  }

  .dock-button {
    flex: 0 0 clamp(68px, 14vw, 86px);
    height: clamp(58px, 12vw, 78px);
  }

  .utility-menu {
    right: 8px;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + clamp(66px, 13vw, 86px));
  }

  .utility-button {
    width: clamp(58px, 12vw, 76px);
    height: clamp(50px, 10vw, 66px);
    font-size: 0.58rem;
  }
}

@media (max-width: 430px) {
  .dock-button span {
    font-size: 0.56rem;
  }

  .dock-button.asset-button img,
  .dock-button img {
    width: 46px;
    height: 36px;
  }
}

/* Research QA pass: prevent clipping and keep the reference-style layout stable. */
.research-window .window-content {
  height: calc(100% - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.techlab-screen {
  min-height: 100%;
  height: auto;
  align-items: stretch;
}

.techlab-main {
  min-height: 0;
  grid-template-rows: minmax(70px, auto) minmax(64px, auto) minmax(292px, 0.8fr) auto minmax(112px, auto);
}

.techlab-top,
.techlab-bonuses,
.techlab-hero,
.techlab-researches,
.techlab-active {
  min-width: 0;
}

.techlab-wallet {
  min-width: 0;
}

.techlab-wallet strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.techlab-hero-art {
  min-height: 0;
}

.techlab-hero-art img {
  min-height: clamp(220px, 30dvh, 330px);
  object-fit: cover;
}

.techlab-card {
  min-width: 0;
  overflow: hidden;
  grid-template-rows: minmax(34px, auto) 134px minmax(42px, auto) 44px 28px;
}

.techlab-card-art {
  min-height: 134px;
  overflow: visible;
}

.techlab-card-art img {
  max-height: 128px;
}

.techlab-card h4,
.techlab-card p,
.techlab-card em {
  overflow-wrap: anywhere;
}

.techlab-card button,
.techlab-center button,
.techlab-active-list button {
  min-width: 0;
  overflow-wrap: anywhere;
}

.techlab-active {
  min-height: 0;
}

.techlab-active-list article {
  min-width: 0;
}

.techlab-active-list article > div {
  min-width: 0;
}

.techlab-active-list strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-height: 760px) and (min-width: 981px) {
  .game-window.research-window {
    height: 96dvh;
  }

  .research-window .window-titlebar {
    height: 72px;
    min-height: 72px;
  }

  .research-window .window-content {
    height: calc(100% - 72px);
    padding: 9px;
  }

  .techlab-main {
    grid-template-rows: minmax(58px, auto) minmax(54px, auto) minmax(220px, 0.7fr) auto minmax(96px, auto);
    gap: 9px;
  }

  .techlab-hero-art img {
    min-height: 210px;
  }

  .techlab-card {
    min-height: 246px;
    grid-template-rows: minmax(30px, auto) 108px minmax(34px, auto) 38px 24px;
    padding: 10px;
  }

  .techlab-card-art {
    min-height: 108px;
  }

  .techlab-card-art img {
    max-height: 104px;
  }
}

@media (max-width: 1180px) {
  .research-window .window-content {
    height: auto;
    max-height: calc(100dvh - 76px);
  }

  .techlab-screen,
  .techlab-main {
    min-height: 0;
  }

  .techlab-hero-art img {
    min-height: 220px;
  }
}

@media (max-width: 560px) {
  .techlab-wallet {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .techlab-active-list article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .techlab-active-list button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Storage QA pass: keep the larger depot visuals from being clipped. */
.storage-window .window-content {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.storehub-screen {
  min-height: 100%;
  height: auto;
}

.storehub-main {
  min-width: 0;
  overflow: visible;
}

.storehub-dock,
.storehub-upgrade,
.storehub-grids > div,
.storehub-stock {
  min-width: 0;
}

.storehub-dock-art {
  min-height: 210px;
}

.storehub-dock-copy h3,
.storehub-upgrade h3,
.storehub-grids h3,
.storehub-stock strong,
.storehub-stock span {
  overflow-wrap: anywhere;
}

.storehub-actions button,
.storehub-dock-actions button,
.storehub-upgrade button,
.storehub-stock button {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-height: 760px) and (min-width: 981px) {
  .game-window.storage-window {
    height: 96dvh;
  }

  .storage-window .window-titlebar {
    height: 72px;
    min-height: 72px;
  }

  .storage-window .window-content {
    height: calc(100% - 72px);
    padding: 9px;
  }

  .storehub-screen {
    grid-template-rows: minmax(58px, auto) minmax(230px, 0.75fr) auto minmax(68px, auto);
    gap: 9px;
  }

  .storehub-dock-art {
    min-height: 188px;
  }

  .storehub-dock-art img {
    max-height: 210px;
  }

  .storehub-stock {
    min-height: 148px;
    grid-template-rows: 86px auto;
  }

  .storehub-stock > img {
    height: 86px;
  }
}

@media (max-width: 720px) {
  .storehub-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .storehub-capacity {
    grid-column: 1 / -1;
  }

  .storehub-dock-actions,
  .storehub-actions {
    grid-template-columns: 1fr;
  }
}

/* Reference research center: rebuilt to match the supplied sci-fi game menu. */
.game-window.research-window {
  width: min(98vw, 1540px);
  height: min(95dvh, 990px);
  border: 0;
  border-radius: 0;
  background: #030708;
  box-shadow: 0 24px 60px rgb(0 0 0 / 72%);
}

.research-window .window-titlebar {
  display: none;
}

.research-window .window-content {
  height: 100%;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(rgb(2 7 8 / 88%), rgb(2 7 8 / 88%)),
    url("assets/research/merkez-laboratuvar.png?v=1") center / cover no-repeat;
}

.refresearch-screen {
  height: 100%;
  min-height: 0;
  padding: 14px;
  display: grid;
  grid-template-rows: 96px minmax(0, 1fr) 72px;
  gap: 12px;
  color: #f2f4ef;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.refresearch-header,
.refresearch-frame,
.refresearch-tabs button {
  border: 2px solid #26333a;
  background:
    linear-gradient(135deg, rgb(15 20 22 / 96%), rgb(4 9 10 / 98%)),
    radial-gradient(circle at 50% 0%, rgb(0 216 255 / 12%), transparent 44%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    inset 0 0 22px rgb(0 0 0 / 60%),
    0 10px 22px rgb(0 0 0 / 45%);
}

.refresearch-header {
  min-width: 0;
  border-radius: 10px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(360px, 1.2fr) minmax(420px, 1.55fr) auto;
  gap: 12px;
  align-items: center;
}

.refresearch-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.refresearch-emblem {
  width: 86px;
  height: 86px;
  border: 3px solid #303d42;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgb(123 236 31 / 32%), transparent 58%),
    linear-gradient(#0e1718, #040808);
  box-shadow: inset 0 0 18px rgb(125 237 37 / 22%);
}

.refresearch-emblem img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  border-radius: 50%;
}

.refresearch-brand h2 {
  margin: 0;
  color: #f6f7f4;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 0.94;
  text-shadow: 0 3px 0 #050606;
}

.refresearch-brand p {
  margin-top: 7px;
  color: #95f236;
  font-size: clamp(0.92rem, 1.15vw, 1.28rem);
  font-weight: 900;
}

.refresearch-resources {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.refresearch-resources article {
  min-width: 0;
  height: 52px;
  border: 2px solid #26333a;
  border-radius: 8px;
  padding: 5px 7px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 30px;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 0 8px;
  background: linear-gradient(#0f1718, #050909);
}

.refresearch-resources span {
  grid-row: 1 / -1;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: block;
  background: linear-gradient(#9fe832, #35790b);
  box-shadow: 0 0 12px rgb(126 237 45 / 38%);
}

.refresearch-resources .coin span {
  border-radius: 50%;
  background: linear-gradient(#ffd84d, #b66e08);
}

.refresearch-resources .diamond span {
  clip-path: polygon(50% 0, 96% 34%, 75% 100%, 25% 100%, 4% 34%);
  background: linear-gradient(#64e8ff, #1675dc);
}

.refresearch-resources .energy span {
  clip-path: polygon(55% 0, 22% 48%, 47% 48%, 36% 100%, 80% 38%, 53% 38%);
  background: linear-gradient(#ffd84d, #ff9d14);
}

.refresearch-resources strong {
  min-width: 0;
  overflow: hidden;
  color: white;
  font-size: clamp(1rem, 1.25vw, 1.35rem);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refresearch-resources small {
  grid-column: 2 / 3;
  color: #9db5b8;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.refresearch-resources button,
.refresearch-header-actions button,
.refresearch-scientists button {
  border-radius: 6px;
  color: white;
  background: linear-gradient(#93dd25, #34750a);
  font-weight: 900;
}

.refresearch-resources button {
  width: 30px;
  height: 30px;
  font-size: 1.35rem;
}

.refresearch-header-actions {
  display: flex;
  gap: 8px;
}

.refresearch-header-actions button {
  width: 54px;
  height: 54px;
  border: 2px solid #323d42;
  background: linear-gradient(#20272a, #080d0f);
  font-size: 1.65rem;
}

.refresearch-header-actions button:last-child {
  color: #ff472f;
  font-size: 1.55rem;
}

.refresearch-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 342px minmax(0, 1fr) 306px;
  gap: 12px;
}

.refresearch-left,
.refresearch-core,
.refresearch-right {
  min-height: 0;
  display: grid;
  gap: 12px;
}

.refresearch-left {
  grid-template-rows: minmax(0, 1fr) 152px;
}

.refresearch-core {
  grid-template-rows: 292px minmax(230px, 1fr) 148px;
}

.refresearch-right {
  grid-template-rows: minmax(0, 1fr) 152px;
}

.refresearch-frame {
  min-width: 0;
  min-height: 0;
  border-radius: 10px;
  padding: 14px;
  overflow: hidden;
}

.refresearch-frame h3 {
  margin: 0 0 12px;
  color: #a7ef37;
  font-size: clamp(1.05rem, 1.35vw, 1.48rem);
  line-height: 1;
}

.refresearch-boosters {
  display: grid;
  grid-template-rows: auto repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.refresearch-boosters > article {
  min-height: 0;
  border: 1px solid #26383c;
  border-radius: 8px;
  padding: 10px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 88px;
  gap: 12px;
  align-items: center;
  background: linear-gradient(90deg, rgb(8 18 14 / 92%), rgb(4 8 9 / 96%));
}

.refresearch-boosters img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgb(126 237 45 / 34%));
}

.refresearch-boosters strong,
.refresearch-current strong {
  display: block;
  overflow-wrap: anywhere;
  color: white;
  font-weight: 900;
}

.refresearch-boosters p {
  margin-top: 7px;
  color: #d6dfd9;
  font-size: 0.88rem;
  line-height: 1.25;
}

.refresearch-boosters button,
.refresearch-hero-copy button,
.refresearch-active-card button,
.refresearch-bonuses > button,
.refresearch-points button {
  min-width: 0;
  border: 2px solid #d09316;
  border-radius: 7px;
  color: white;
  background: linear-gradient(#e8b52a, #8e5308);
  font-weight: 900;
  text-transform: uppercase;
}

.refresearch-scientists div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.refresearch-scientists strong {
  color: white;
  font-size: 2rem;
}

.refresearch-scientists button {
  width: 42px;
  height: 42px;
  font-size: 1.65rem;
}

.refresearch-scientists p,
.refresearch-points span {
  color: #d1dbd3;
  font-size: 0.95rem;
  line-height: 1.25;
}

.refresearch-hero {
  padding: 0;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  background:
    linear-gradient(90deg, rgb(4 9 10 / 92%) 0 34%, rgb(4 9 10 / 30)),
    #050b0d;
}

.refresearch-hero-copy {
  min-width: 0;
  padding: 24px;
  display: grid;
  align-content: center;
  gap: 14px;
}

.refresearch-level-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.refresearch-level-row strong {
  width: 78px;
  height: 78px;
  clip-path: polygon(50% 0, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%);
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(#9be72f, #2e6b09);
  font-size: 2.8rem;
}

.refresearch-level-row p {
  color: white;
  font-size: 1.15rem;
  line-height: 1.45;
}

.refresearch-hero-copy > i,
.refresearch-active-card i {
  height: 22px;
  border: 2px solid #1b282b;
  border-radius: 7px;
  overflow: hidden;
  background: #050909;
}

.refresearch-hero-copy i b,
.refresearch-active-card i b {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #69c213, #d8f04b);
}

.refresearch-hero-copy em {
  margin-top: -40px;
  text-align: center;
  color: white;
  font-style: normal;
  font-size: 1.25rem;
  font-weight: 900;
  text-shadow: 0 2px 0 #050606;
}

.refresearch-hero-copy button {
  width: min(280px, 100%);
  min-height: 58px;
  border-color: #8fe52f;
  background: linear-gradient(#9ce62e, #3a7d0a);
  font-size: 1.25rem;
}

.refresearch-hero-copy button small {
  display: block;
  font-size: 0.72rem;
}

.refresearch-hero-art {
  min-width: 0;
  padding: 12px;
}

.refresearch-hero-art img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  border-radius: 8px;
  object-fit: cover;
  filter: saturate(1.2) contrast(1.05);
}

.refresearch-active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.refresearch-active > div {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.refresearch-active-card {
  min-width: 0;
  min-height: 0;
  border: 1px solid #23404a;
  border-radius: 8px;
  padding: 10px;
  display: grid;
  grid-template-rows: 34px minmax(76px, 1fr) minmax(34px, auto) 16px 22px 38px;
  gap: 7px;
  background: radial-gradient(circle at 50% 30%, rgb(0 194 255 / 14%), transparent 52%), #061014;
}

.refresearch-active-card h4,
.refresearch-active-card p,
.refresearch-active-card em {
  margin: 0;
  overflow-wrap: anywhere;
  text-align: center;
}

.refresearch-active-card h4 {
  color: white;
  font-size: 0.88rem;
  line-height: 1.05;
}

.refresearch-active-card img {
  width: 100%;
  height: 100%;
  max-height: 110px;
  object-fit: contain;
}

.refresearch-active-card p {
  color: #cfd9d2;
  font-size: 0.78rem;
  line-height: 1.18;
}

.refresearch-active-card em {
  color: #b5f641;
  font-style: normal;
  font-weight: 900;
}

.refresearch-active-card button {
  min-height: 36px;
  font-size: 0.84rem;
}

.refresearch-active-card.locked {
  place-items: center;
  grid-template-rows: 38px 1fr auto;
  background: #060b0d;
}

.refresearch-active-card.locked div {
  color: #7b8082;
  font-size: 3.4rem;
}

.refresearch-current {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.refresearch-current > div {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.refresearch-current article {
  min-width: 0;
  border: 1px solid #203842;
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 5px 9px;
  align-items: center;
  background: #071015;
}

.refresearch-current img {
  grid-row: 1 / -1;
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.refresearch-current strong {
  font-size: 0.8rem;
  line-height: 1.05;
}

.refresearch-current span {
  width: fit-content;
  min-width: 72px;
  border: 1px solid #2a7f99;
  border-radius: 5px;
  padding: 3px 8px;
  color: #a6f536;
  font-weight: 900;
}

.refresearch-bonuses {
  display: grid;
  grid-template-rows: auto repeat(5, minmax(0, 1fr)) 56px;
  gap: 10px;
}

.refresearch-bonuses article {
  min-height: 0;
  border: 1px solid #26383c;
  border-radius: 8px;
  padding: 9px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: #071015;
}

.refresearch-bonuses img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.refresearch-bonuses span {
  color: white;
  font-size: 0.92rem;
  line-height: 1.1;
}

.refresearch-bonuses strong {
  color: #9ff334;
  font-size: 1.35rem;
}

.refresearch-bonuses > button,
.refresearch-points button {
  min-height: 48px;
  font-size: 1.1rem;
}

.refresearch-points {
  display: grid;
  gap: 10px;
  align-content: center;
}

.refresearch-points strong {
  border-radius: 8px;
  padding: 9px 12px;
  color: white;
  background: #030607;
  font-size: 1.55rem;
}

.refresearch-points button {
  border-color: #00a4b7;
  background: linear-gradient(#0cb5c4, #05606e);
}

.refresearch-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.refresearch-tabs button {
  min-width: 0;
  border-radius: 8px;
  color: #dce1dc;
  font-size: clamp(0.8rem, 1vw, 1.08rem);
  font-weight: 900;
}

.refresearch-tabs button.active,
.refresearch-tabs button:hover {
  border-color: #8ff22f;
  color: #dfffa6;
  background: radial-gradient(circle at 50% 30%, rgb(144 239 44 / 28%), transparent 58%), #07120c;
  box-shadow: 0 0 18px rgb(126 237 45 / 26%), inset 0 0 18px rgb(126 237 45 / 16%);
}

@media (max-width: 1180px), (max-height: 760px) {
  .game-window.research-window {
    width: 98vw;
    height: 96dvh;
  }

  .research-window .window-content {
    overflow-y: auto;
  }

  .refresearch-screen {
    height: auto;
    min-height: 100%;
    grid-template-rows: auto auto auto;
  }

  .refresearch-header,
  .refresearch-body {
    grid-template-columns: 1fr;
  }

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

  .refresearch-left,
  .refresearch-core,
  .refresearch-right {
    grid-template-rows: none;
  }

  .refresearch-hero,
  .refresearch-active > div,
  .refresearch-current > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .refresearch-hero-art {
    min-height: 240px;
  }

  .refresearch-bonuses {
    grid-template-rows: none;
  }
}

@media (max-width: 640px) {
  .refresearch-screen {
    padding: 8px;
  }

  .refresearch-brand,
  .refresearch-header-actions {
    justify-content: center;
  }

  .refresearch-brand h2 {
    font-size: 1.8rem;
  }

  .refresearch-emblem {
    width: 68px;
    height: 68px;
  }

  .refresearch-resources,
  .refresearch-hero,
  .refresearch-active > div,
  .refresearch-current > div,
  .refresearch-tabs {
    grid-template-columns: 1fr;
  }

  .refresearch-boosters > article {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .refresearch-boosters button {
    grid-column: 1 / -1;
    min-height: 38px;
  }
}

/* Research text-fit pass: preserve the design while keeping every label inside its panel. */
.refresearch-screen,
.refresearch-screen * {
  min-width: 0;
}

.refresearch-brand h2,
.refresearch-brand p,
.refresearch-frame h3,
.refresearch-boosters strong,
.refresearch-boosters p,
.refresearch-level-row p,
.refresearch-active-card h4,
.refresearch-active-card p,
.refresearch-bonuses span,
.refresearch-bonuses strong,
.refresearch-current strong,
.refresearch-tabs button,
.refresearch-hero-copy button,
.refresearch-active-card button,
.refresearch-points button {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.refresearch-brand h2 {
  font-size: clamp(1.7rem, 2.55vw, 3.05rem);
}

.refresearch-brand p {
  font-size: clamp(0.78rem, 1vw, 1.14rem);
  line-height: 1.05;
}

.refresearch-frame h3 {
  font-size: clamp(0.92rem, 1.18vw, 1.34rem);
  line-height: 1.05;
}

.refresearch-resources article {
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  gap: 0 6px;
}

.refresearch-resources strong {
  font-size: clamp(0.82rem, 1.05vw, 1.18rem);
}

.refresearch-resources small {
  overflow: hidden;
  font-size: clamp(0.5rem, 0.58vw, 0.62rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refresearch-boosters > article {
  grid-template-columns: clamp(58px, 5vw, 76px) minmax(0, 1fr) clamp(68px, 5.6vw, 86px);
  gap: 9px;
}

.refresearch-boosters img {
  width: clamp(58px, 5vw, 76px);
  height: clamp(58px, 5vw, 76px);
}

.refresearch-boosters strong {
  font-size: clamp(0.78rem, 0.92vw, 1rem);
  line-height: 1.05;
}

.refresearch-boosters p {
  margin-top: 5px;
  font-size: clamp(0.68rem, 0.78vw, 0.86rem);
  line-height: 1.18;
}

.refresearch-boosters button {
  padding-inline: 6px;
  font-size: clamp(0.72rem, 0.84vw, 0.94rem);
}

.refresearch-level-row p {
  font-size: clamp(0.88rem, 1.02vw, 1.12rem);
  line-height: 1.25;
}

.refresearch-hero-copy button {
  font-size: clamp(0.95rem, 1.15vw, 1.18rem);
  line-height: 1.05;
}

.refresearch-active-card {
  grid-template-rows: minmax(30px, auto) minmax(68px, 1fr) minmax(38px, auto) 14px 20px minmax(34px, auto);
}

.refresearch-active-card h4 {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(0.68rem, 0.78vw, 0.84rem);
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.refresearch-active-card p {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(0.64rem, 0.72vw, 0.76rem);
  line-height: 1.14;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.refresearch-active-card em {
  font-size: clamp(0.74rem, 0.86vw, 0.96rem);
}

.refresearch-active-card button {
  padding-inline: 5px;
  font-size: clamp(0.66rem, 0.74vw, 0.82rem);
  line-height: 1.05;
}

.refresearch-current article {
  grid-template-columns: clamp(44px, 4.1vw, 58px) minmax(0, 1fr);
}

.refresearch-current img {
  width: clamp(44px, 4.1vw, 58px);
  height: clamp(44px, 4.1vw, 58px);
}

.refresearch-current strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(0.62rem, 0.7vw, 0.78rem);
  line-height: 1.05;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.refresearch-current span {
  min-width: 0;
  width: 100%;
  padding-inline: 5px;
  text-align: center;
  font-size: clamp(0.66rem, 0.76vw, 0.84rem);
}

.refresearch-bonuses article {
  grid-template-columns: clamp(44px, 4.4vw, 56px) minmax(0, 1fr) minmax(48px, auto);
  gap: 8px;
}

.refresearch-bonuses img {
  width: clamp(44px, 4.4vw, 56px);
  height: clamp(44px, 4.4vw, 56px);
}

.refresearch-bonuses span {
  font-size: clamp(0.72rem, 0.82vw, 0.9rem);
  line-height: 1.08;
}

.refresearch-bonuses strong {
  font-size: clamp(0.92rem, 1.12vw, 1.28rem);
  white-space: nowrap;
}

.refresearch-tabs button {
  padding-inline: 4px;
  font-size: clamp(0.62rem, 0.82vw, 0.98rem);
  line-height: 1.05;
}

@media (max-width: 1320px) and (min-width: 1181px) {
  .refresearch-header {
    grid-template-columns: minmax(300px, 0.95fr) minmax(380px, 1.35fr) auto;
  }

  .refresearch-body {
    grid-template-columns: 300px minmax(0, 1fr) 278px;
  }

  .refresearch-active > div {
    gap: 8px;
  }
}

@media (max-width: 980px) {
  .refresearch-header-actions button {
    width: 46px;
    height: 46px;
    font-size: 1.28rem;
  }

  .refresearch-boosters > article,
  .refresearch-bonuses article,
  .refresearch-current article {
    align-items: center;
  }
}

@media (max-width: 640px) {
  .refresearch-resources article {
    height: auto;
    min-height: 48px;
  }

  .refresearch-level-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .refresearch-level-row strong {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }

  .refresearch-bonuses article {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
}

/* Research button-fit pass: keep every control visible and easy to tap. */
.refresearch-screen button {
  position: relative;
  z-index: 2;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  overflow: hidden;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
  touch-action: manipulation;
}

.refresearch-header-actions button,
.refresearch-resources button,
.refresearch-scientists button {
  flex: 0 0 auto;
  padding: 0;
  white-space: nowrap;
}

.refresearch-header-actions {
  min-width: 0;
  flex-wrap: nowrap;
}

.refresearch-boosters > article {
  grid-template-columns: clamp(54px, 4.5vw, 72px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(38px, auto);
  align-items: center;
}

.refresearch-boosters > article > button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 38px;
}

.refresearch-active-card {
  grid-template-rows: minmax(28px, auto) minmax(62px, 1fr) minmax(30px, auto) 14px 18px minmax(40px, auto);
  overflow: visible;
}

.refresearch-active-card button {
  width: 100%;
  min-height: 40px;
  padding-inline: 4px;
  font-size: clamp(0.6rem, 0.68vw, 0.74rem);
}

.refresearch-active-card button .diamond-amount,
.refresearch-boosters button .diamond-amount {
  gap: 2px;
}

.refresearch-active-card button img,
.refresearch-boosters button img {
  width: 1.05em;
  height: 1.05em;
}

.refresearch-bonuses > button,
.refresearch-points button,
.refresearch-hero-copy button {
  width: 100%;
  min-height: 48px;
}

.refresearch-tabs {
  min-height: 64px;
}

.refresearch-tabs button {
  min-height: 58px;
  padding: 6px 4px;
}

@media (max-width: 1180px), (max-height: 760px) {
  .refresearch-tabs {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-top: 6px;
    background: linear-gradient(180deg, transparent, #030708 28%);
  }

  .refresearch-tabs button {
    min-height: 50px;
  }
}

@media (max-width: 860px) {
  .refresearch-header-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
  }

  .refresearch-header-actions button {
    width: 100%;
    height: 46px;
  }

  .refresearch-active > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .refresearch-active > div {
    grid-template-columns: 1fr;
  }

  .refresearch-tabs {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .refresearch-tabs::-webkit-scrollbar {
    display: none;
  }

  .refresearch-tabs button {
    flex: 0 0 118px;
  }
}

/* Research compact buttons: smaller visuals without losing click behavior. */
.refresearch-screen button {
  min-height: 34px;
  padding: 4px 6px;
  font-size: clamp(0.62rem, 0.74vw, 0.86rem);
}

.refresearch-resources button {
  width: 24px;
  height: 24px;
  min-height: 24px;
  font-size: 1rem;
}

.refresearch-header-actions {
  gap: 5px;
}

.refresearch-header-actions button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  font-size: 1.25rem;
}

.refresearch-scientists button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  font-size: 1.25rem;
}

.refresearch-boosters > article {
  grid-template-rows: minmax(0, 1fr) 32px;
}

.refresearch-boosters > article > button {
  min-height: 32px;
  padding-block: 3px;
  font-size: clamp(0.62rem, 0.72vw, 0.82rem);
}

.refresearch-hero-copy button {
  min-height: 46px;
  padding-block: 5px;
  font-size: clamp(0.82rem, 1vw, 1.05rem);
}

.refresearch-hero-copy button small {
  font-size: 0.62rem;
}

.refresearch-active-card {
  grid-template-rows: minmax(28px, auto) minmax(70px, 1fr) minmax(30px, auto) 14px 18px 32px;
}

.refresearch-active-card button {
  min-height: 32px;
  padding: 3px 4px;
  font-size: clamp(0.56rem, 0.64vw, 0.72rem);
}

.refresearch-bonuses > button,
.refresearch-points button {
  min-height: 40px;
  padding-block: 5px;
  font-size: clamp(0.82rem, 0.96vw, 1rem);
}

.refresearch-tabs {
  min-height: 54px;
}

.refresearch-tabs button {
  min-height: 46px;
  padding: 4px;
  font-size: clamp(0.58rem, 0.74vw, 0.9rem);
}

@media (max-width: 860px) {
  .refresearch-header-actions {
    grid-template-columns: repeat(4, minmax(38px, 1fr));
  }

  .refresearch-header-actions button {
    height: 38px;
    min-height: 38px;
  }
}

@media (max-width: 520px) {
  .refresearch-tabs button {
    flex-basis: 96px;
    min-height: 42px;
  }
}

/* Research current-list pass: keep the bottom research strip fully visible. */
.refresearch-core {
  grid-template-rows: 278px minmax(210px, 1fr) minmax(176px, auto);
}

.refresearch-current {
  padding-bottom: 10px;
  overflow: visible;
}

.refresearch-current > div {
  min-height: 112px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  grid-template-columns: repeat(6, minmax(154px, 1fr));
  align-items: stretch;
  padding-bottom: 4px;
}

.refresearch-current article {
  min-height: 104px;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 24px;
  padding: 7px;
}

.refresearch-current img {
  width: 52px;
  height: 52px;
}

.refresearch-current strong {
  -webkit-line-clamp: 3;
  font-size: clamp(0.58rem, 0.66vw, 0.74rem);
}

.refresearch-current span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.58rem, 0.68vw, 0.78rem);
}

@media (max-height: 820px) and (min-width: 1181px) {
  .refresearch-core {
    grid-template-rows: 250px minmax(190px, 1fr) minmax(160px, auto);
  }

  .refresearch-current > div {
    min-height: 100px;
  }

  .refresearch-current article {
    min-height: 94px;
  }
}

@media (max-width: 1180px), (max-height: 760px) {
  .refresearch-current {
    overflow: hidden;
  }

  .refresearch-current > div {
    grid-template-columns: repeat(6, minmax(150px, 1fr));
  }
}

@media (max-width: 640px) {
  .refresearch-current > div {
    grid-template-columns: repeat(6, minmax(138px, 1fr));
  }
}

/* Research active/current compact pass: 10% smaller sections with visible buttons. */
.refresearch-core {
  grid-template-rows: 270px minmax(190px, 0.9fr) minmax(158px, auto);
}

.refresearch-active,
.refresearch-current {
  padding: 12px;
}

.refresearch-active h3,
.refresearch-current h3 {
  margin-bottom: 9px;
  font-size: clamp(0.86rem, 1.06vw, 1.2rem);
}

.refresearch-active > div {
  gap: 9px;
}

.refresearch-active-card {
  min-height: 0;
  padding: 8px;
  grid-template-rows: minmax(24px, auto) minmax(58px, 0.85fr) minmax(26px, auto) 12px 17px minmax(30px, auto);
  gap: 5px;
}

.refresearch-active-card img {
  max-height: 92px;
}

.refresearch-active-card h4 {
  font-size: clamp(0.6rem, 0.7vw, 0.78rem);
}

.refresearch-active-card p {
  font-size: clamp(0.58rem, 0.66vw, 0.72rem);
  -webkit-line-clamp: 2;
}

.refresearch-active-card i {
  height: 12px;
}

.refresearch-active-card em {
  font-size: clamp(0.64rem, 0.78vw, 0.88rem);
}

.refresearch-active-card button {
  min-height: 30px;
  padding: 3px;
  font-size: clamp(0.52rem, 0.6vw, 0.68rem);
}

.refresearch-active-card.locked {
  grid-template-rows: 30px minmax(48px, 1fr) auto;
}

.refresearch-active-card.locked div {
  font-size: 2.7rem;
}

.refresearch-current > div {
  min-height: 96px;
  gap: 7px;
  grid-template-columns: repeat(6, minmax(138px, 1fr));
}

.refresearch-current article {
  min-height: 88px;
  padding: 6px;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 21px;
  gap: 4px 7px;
}

.refresearch-current img {
  width: 46px;
  height: 46px;
}

.refresearch-current strong {
  font-size: clamp(0.54rem, 0.62vw, 0.7rem);
  line-height: 1.02;
  -webkit-line-clamp: 2;
}

.refresearch-current span {
  min-height: 20px;
  padding: 2px 5px;
  font-size: clamp(0.55rem, 0.62vw, 0.72rem);
}

@media (max-width: 1180px), (max-height: 760px) {
  .refresearch-core {
    grid-template-rows: none;
  }

  .refresearch-active,
  .refresearch-current {
    overflow: visible;
  }

  .refresearch-active > div {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .refresearch-current > div {
    grid-template-columns: repeat(6, minmax(132px, 1fr));
  }
}

@media (max-width: 560px) {
  .refresearch-active > div {
    grid-template-columns: 1fr;
  }

  .refresearch-active-card {
    min-height: 170px;
  }

  .refresearch-current > div {
    grid-template-columns: repeat(6, minmax(126px, 1fr));
  }
}

/* Reference power station: rebuilt to match the supplied energy menu. */
.game-window.power-window {
  width: min(98vw, 1510px);
  height: min(95dvh, 940px);
  border: 0;
  border-radius: 0;
  background: #030607;
  box-shadow: 0 24px 60px rgb(0 0 0 / 72%);
}

.power-window .window-titlebar {
  display: none;
}

.power-window .window-content {
  height: 100%;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(rgb(3 7 7 / 86%), rgb(3 7 7 / 90%)),
    url("assets/power/tesis-guc-istasyonu.png?v=1") center / cover no-repeat;
}

.refpower-screen {
  min-height: 100%;
  height: auto;
  padding: 18px;
  display: grid;
  grid-template-rows: 104px minmax(0, 1fr);
  gap: 12px;
  color: #f4f5ef;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.refpower-header,
.refpower-frame,
.refpower-tabs button {
  border: 2px solid #30383b;
  background:
    linear-gradient(135deg, rgb(17 21 22 / 96%), rgb(4 8 9 / 98%)),
    radial-gradient(circle at 50% 0%, rgb(255 168 22 / 10%), transparent 46%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 12%),
    inset 0 0 24px rgb(0 0 0 / 62%),
    0 12px 24px rgb(0 0 0 / 45%);
}

.refpower-header {
  border-radius: 12px;
  display: grid;
  grid-template-columns: minmax(430px, auto) minmax(0, 1fr) 72px;
  align-items: center;
  gap: 12px;
  padding: 8px;
}

.refpower-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

.refpower-emblem {
  width: 96px;
  height: 96px;
  border: 3px solid #3b4346;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffd22f;
  background:
    radial-gradient(circle, rgb(255 180 31 / 34%), transparent 56%),
    linear-gradient(#121a1d, #050808);
  font-size: 4.6rem;
  text-shadow: 0 0 18px rgb(255 179 30 / 60%);
}

.refpower-brand h2 {
  margin: 0;
  color: #f4f4ef;
  font-size: clamp(2.5rem, 4.2vw, 4.15rem);
  line-height: 0.95;
  text-shadow: 0 4px 0 #050607;
}

.refpower-rail {
  height: 28px;
  border: 2px solid #30383b;
  border-radius: 999px;
  background: linear-gradient(90deg, #111719, #293133, #111719);
}

.refpower-close {
  width: 62px;
  height: 62px;
  border: 3px solid #5d3027;
  border-radius: 8px;
  color: #ff6b42;
  background: linear-gradient(#752b18, #1a0b08);
  font-size: 2rem;
  font-weight: 900;
}

.refpower-body {
  min-height: 650px;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr) 27%;
  gap: 12px;
}

.refpower-frame {
  min-width: 0;
  min-height: 0;
  border-radius: 10px;
  padding: 14px;
  overflow: hidden;
}

.refpower-frame h3 {
  margin: 0 0 12px;
  color: #ffc328;
  font-size: clamp(1.05rem, 1.45vw, 1.55rem);
  line-height: 1;
}

.refpower-frame h3::before {
  content: "› ";
}

.refpower-overview {
  display: grid;
  grid-template-rows: auto minmax(230px, 1fr) 70px 136px 82px;
  gap: 12px;
}

.refpower-plant {
  min-height: 0;
  border: 1px solid #273b44;
  border-radius: 8px;
  overflow: hidden;
  background: #060b0d;
}

.refpower-plant img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.refpower-level {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.refpower-level > strong {
  width: 70px;
  height: 70px;
  clip-path: polygon(50% 0, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%);
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(#ffd032, #8b5408);
  font-size: 2.4rem;
}

.refpower-level span,
.refpower-mini-stats small,
.refpower-generator-row span,
.refpower-storage span,
.refpower-storage small {
  color: #d2d6cf;
  font-weight: 900;
}

.refpower-level b {
  display: block;
  margin: 4px 0;
  color: white;
  font-size: 1.2rem;
}

.refpower-level i,
.refpower-generator-row i,
.refpower-storage i,
.refpower-fuel i {
  height: 20px;
  border: 2px solid #202b2d;
  border-radius: 7px;
  overflow: hidden;
  display: block;
  background: #050909;
}

.refpower-level em,
.refpower-generator-row em,
.refpower-storage em,
.refpower-fuel em {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #f4b620, #ffe25a);
}

.refpower-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #263339;
  border-radius: 8px;
  overflow: hidden;
}

.refpower-mini-stats article {
  min-width: 0;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid #263339;
  background: #071012;
}

.refpower-mini-stats article:nth-child(3n) {
  border-right: 0;
}

.refpower-mini-stats span,
.refpower-produced span,
.refpower-bonuses span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  background: linear-gradient(#ffcf2e, #935b06);
  box-shadow: 0 0 12px rgb(255 190 38 / 25%);
}

.refpower-mini-stats strong {
  display: block;
  color: #91ec33;
  font-size: clamp(0.86rem, 1vw, 1.08rem);
}

.refpower-upgrade,
.refpower-fuel-actions button,
.refpower-storage-actions button,
.refpower-generator-row button {
  min-width: 0;
  border: 2px solid #8ed32d;
  border-radius: 8px;
  color: white;
  background: linear-gradient(#8bd02e, #39780b);
  font-weight: 900;
  text-transform: uppercase;
}

.refpower-upgrade {
  min-height: 68px;
  font-size: 1.35rem;
}

.refpower-upgrade small {
  display: block;
  margin-top: 5px;
  color: #f6e7b5;
  font-size: 0.82rem;
}

.refpower-mid {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 31%;
  gap: 12px;
}

.refpower-generators {
  display: grid;
  grid-template-rows: auto repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.refpower-generator-row {
  min-width: 0;
  min-height: 0;
  border: 1px solid #2a373b;
  border-radius: 8px;
  padding: 9px;
  display: grid;
  grid-template-columns: 48px 35% minmax(0, 1fr) 78px;
  gap: 10px;
  align-items: center;
  background: #071012;
}

.refpower-generator-row > b {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #ffd335;
  background: #111719;
  border: 2px solid #4b4d36;
}

.refpower-generator-row img {
  width: 100%;
  height: 100%;
  max-height: 104px;
  object-fit: contain;
}

.refpower-generator-row strong,
.refpower-storage strong {
  display: block;
  margin: 5px 0;
  color: #94ed35;
  font-size: clamp(1.15rem, 1.7vw, 1.9rem);
}

.refpower-generator-row small {
  display: block;
  margin-top: 5px;
  color: #96ed36;
  text-align: right;
}

.refpower-generator-row button {
  min-height: 40px;
  font-size: 0.8rem;
}

.refpower-lock {
  display: grid;
  place-items: center;
  color: #82898a;
  font-size: 2.4rem;
}

.refpower-storage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}

.refpower-storage article {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.refpower-storage article img {
  width: 100%;
  height: 100%;
  max-height: 150px;
  object-fit: contain;
}

.refpower-storage b {
  display: block;
  margin-top: -19px;
  color: white;
  text-align: center;
  font-weight: 900;
}

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

.refpower-storage-actions button {
  min-height: 36px;
  font-size: 0.78rem;
}

.refpower-right {
  min-height: 0;
  display: grid;
  grid-template-rows: 36% 22% minmax(0, 1fr);
  gap: 12px;
}

.refpower-fuel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}

.refpower-fuel article {
  min-height: 0;
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.refpower-fuel img {
  width: 100%;
  height: 100%;
  max-height: 132px;
  object-fit: contain;
}

.refpower-fuel strong {
  color: #91ed34;
  font-size: clamp(1.25rem, 2vw, 2.1rem);
}

.refpower-fuel-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: start;
}

.refpower-fuel-actions button {
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  border-color: #d99716;
  background: linear-gradient(#e3a81d, #8f5206);
  display: grid;
  place-items: center;
  gap: 3px;
  font-size: 0.9rem;
  line-height: 1.05;
  white-space: normal;
}

.refpower-fuel-actions small {
  display: block;
  font-size: 0.68rem;
  line-height: 1.05;
  opacity: 0.95;
}

.refpower-produced,
.refpower-bonuses {
  display: grid;
  gap: 8px;
}

.refpower-produced article,
.refpower-bonuses article {
  min-width: 0;
  border: 1px solid #273338;
  border-radius: 8px;
  padding: 9px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: #071012;
}

.refpower-produced b,
.refpower-bonuses b {
  color: white;
}

.refpower-produced strong {
  color: #91ed34;
}

.refpower-bonuses strong {
  color: #17cfff;
}

.refpower-bonuses small {
  display: block;
  color: #b5c0bc;
}

.refpower-tabs {
  display: none;
}

.refpower-tabs button {
  min-width: 0;
  border-radius: 8px;
  color: #dfe3dd;
  font-size: clamp(0.78rem, 1vw, 1.1rem);
  font-weight: 900;
}

.refpower-tabs button:hover,
.refpower-tabs button:first-child {
  border-color: #e5a51c;
  color: #ffe08a;
  background: radial-gradient(circle at 50% 30%, rgb(241 167 25 / 25%), transparent 58%), #120d05;
}

@media (max-width: 1180px), (max-height: 760px) {
  .game-window.power-window {
    width: 98vw;
    height: 96dvh;
  }

  .power-window .window-content {
    overflow-y: auto;
  }

  .refpower-screen {
    height: auto;
    min-height: 100%;
    grid-template-rows: auto auto;
    padding: 10px;
  }

  .refpower-header,
  .refpower-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .refpower-brand {
    justify-content: center;
  }

  .refpower-rail {
    display: none;
  }

  .refpower-close {
    justify-self: center;
  }

  .refpower-overview,
  .refpower-mid,
  .refpower-right {
    grid-template-rows: none;
  }

  .refpower-plant img {
    min-height: 220px;
  }

  .refpower-generator-row {
    min-height: 138px;
  }
}

@media (max-width: 680px) {
  .refpower-brand h2 {
    font-size: 2rem;
  }

  .refpower-emblem {
    width: 72px;
    height: 72px;
    font-size: 3.1rem;
  }

  .refpower-mini-stats,
  .refpower-storage-actions {
    grid-template-columns: 1fr;
  }

  .refpower-generator-row,
  .refpower-storage article,
  .refpower-fuel article {
    grid-template-columns: 1fr;
  }

  .refpower-generator-row img,
  .refpower-storage article img,
  .refpower-fuel img {
    max-height: 130px;
  }
}

/* Power exact-reference pass: restore the reference bottom nav and prevent squeezing. */
.power-window .window-content {
  overflow: hidden;
}

.refpower-screen {
  height: 100%;
  min-height: 0;
  grid-template-rows: 104px minmax(0, 1fr) 72px;
}

.refpower-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.refpower-body::-webkit-scrollbar {
  width: 8px;
}

.refpower-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(#f4a91f, #39515a);
}

.refpower-overview {
  grid-template-rows: auto minmax(218px, 1fr) 66px 126px 74px;
}

.refpower-mid {
  grid-template-rows: minmax(0, 1fr) 30%;
}

.refpower-right {
  grid-template-rows: 35% 22% minmax(0, 1fr);
}

.refpower-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.refpower-tabs button {
  min-width: 0;
  min-height: 60px;
  border-radius: 8px;
  color: #dfe3dd;
  background:
    linear-gradient(135deg, rgb(17 21 22 / 96%), rgb(4 8 9 / 98%)),
    radial-gradient(circle at 50% 0%, rgb(255 168 22 / 10%), transparent 46%);
  font-size: clamp(0.72rem, 0.9vw, 1rem);
  font-weight: 900;
}

.refpower-tabs button:hover,
.refpower-tabs button:first-child {
  border-color: #e5a51c;
  color: #ffe08a;
  background: radial-gradient(circle at 50% 30%, rgb(241 167 25 / 25%), transparent 58%), #120d05;
}

@media (max-width: 1180px), (max-height: 760px) {
  .power-window .window-content {
    overflow-y: auto;
  }

  .refpower-screen {
    height: auto;
    min-height: 100%;
    grid-template-rows: auto auto auto;
  }

  .refpower-body {
    overflow-y: visible;
  }

  .refpower-tabs {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-top: 6px;
    background: linear-gradient(180deg, transparent, #030607 30%);
  }
}

@media (max-width: 680px) {
  .refpower-tabs {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .refpower-tabs::-webkit-scrollbar {
    display: none;
  }

  .refpower-tabs button {
    flex: 0 0 112px;
    min-height: 52px;
  }
}

/* Power economy update: remove bottom nav and let content breathe with scrolling. */
.refpower-tabs {
  display: none !important;
}

.power-window .window-content {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.refpower-screen {
  min-height: 100%;
  height: auto;
  grid-template-rows: 104px auto;
}

.refpower-body {
  min-height: 680px;
  overflow-y: visible;
}

.refpower-frame,
.refpower-generator-row,
.refpower-storage article,
.refpower-fuel article,
.refpower-produced article,
.refpower-bonuses article {
  min-width: 0;
}

.refpower-generator-row strong,
.refpower-storage strong,
.refpower-fuel strong,
.refpower-produced strong,
.refpower-bonuses strong,
.refpower-generator-row small,
.refpower-storage b,
.refpower-fuel-actions button,
.refpower-storage-actions button,
.refpower-upgrade {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.refpower-generator-row button,
.refpower-storage-actions button,
.refpower-fuel-actions button,
.refpower-upgrade {
  min-height: 38px;
  padding: 5px 7px;
  line-height: 1.08;
  white-space: normal;
}

.refpower-generator-row button:disabled,
.refpower-storage-actions button:disabled,
.refpower-fuel-actions button:disabled,
.refpower-upgrade:disabled {
  background: linear-gradient(#666b6d, #303536);
  border-color: #5d6669;
  color: #d5dbdc;
  opacity: 0.9;
}

.refpower-generator-row strong,
.refpower-storage strong,
.refpower-fuel strong {
  font-size: clamp(0.95rem, 1.25vw, 1.55rem);
}

.refpower-generator-row {
  grid-template-columns: 44px 32% minmax(0, 1fr) 74px;
}

.refpower-generator-row img {
  max-height: 92px;
}

.refpower-storage-actions {
  grid-template-columns: 1fr;
}

@media (max-width: 1180px), (max-height: 760px) {
  .refpower-screen {
    grid-template-rows: auto auto;
  }

  .refpower-body {
    min-height: 0;
  }
}

/* Power station final cleanup: closer to the supplied reference, without bottom nav. */
.game-window.power-window {
  width: min(98vw, 1540px);
  height: min(96dvh, 950px);
  background: #020405;
}

.power-window .window-content {
  overflow-y: auto;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 72%), rgb(0 0 0 / 32%) 40%, rgb(0 0 0 / 72%)),
    linear-gradient(rgb(3 7 7 / 84%), rgb(3 7 7 / 92%)),
    url("assets/power/tesis-guc-istasyonu.png?v=1") center / cover no-repeat;
}

.refpower-screen {
  min-height: 100%;
  height: auto;
  padding: clamp(10px, 1.25vw, 18px);
  grid-template-rows: clamp(86px, 8vw, 116px) auto;
  gap: 10px;
}

.refpower-header,
.refpower-frame {
  position: relative;
  border: 2px solid #2d3c40;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(25 29 29 / 97%), rgb(5 9 10 / 98%)),
    radial-gradient(circle at 50% 0, rgb(255 181 33 / 13%), transparent 48%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    inset 0 0 0 1px rgb(0 225 255 / 10%),
    inset 0 0 34px rgb(0 0 0 / 65%),
    0 14px 28px rgb(0 0 0 / 52%);
}

.refpower-frame::after,
.refpower-header::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 5px;
  border: 1px solid rgb(88 121 124 / 28%);
  border-radius: 5px;
}

.refpower-header {
  grid-template-columns: minmax(350px, 0.95fr) minmax(430px, 1.35fr) 72px;
  gap: 14px;
  padding: 8px 12px;
}

.refpower-brand h2 {
  font-size: clamp(2.15rem, 3.8vw, 4.35rem);
  letter-spacing: 0;
}

.refpower-emblem {
  width: clamp(72px, 7vw, 104px);
  height: clamp(72px, 7vw, 104px);
  font-size: clamp(3rem, 4.4vw, 5rem);
  border-color: #455054;
}

.refpower-header-chips {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.refpower-chip {
  min-width: 0;
  height: clamp(48px, 5vw, 64px);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border: 2px solid #303b3f;
  border-radius: 8px;
  background: linear-gradient(#151c1f, #05090a);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
}

.refpower-chip span {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(#9bed38, #2f710a);
  box-shadow: 0 0 15px rgb(125 237 49 / 24%);
}

.refpower-chip span img {
  width: 138%;
  height: 138%;
  object-fit: contain;
  pointer-events: none;
}

.refpower-chip.diamond span img {
  width: 155%;
  height: 155%;
  filter: drop-shadow(0 0 7px rgb(65 214 255 / 65%));
}

.refpower-chip.coin span img {
  width: 142%;
  height: 142%;
  filter: drop-shadow(0 0 6px rgb(255 196 45 / 55%));
}

.refpower-chip.coin span {
  background: linear-gradient(#ffd85a, #9a5b07);
}

.refpower-chip.diamond span {
  background: linear-gradient(#7ee8ff, #1275d0);
}

.refpower-chip.bolt span {
  background: linear-gradient(#ffd935, #e0780a);
}

.refpower-chip small,
.refpower-chip strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refpower-chip small {
  color: #9eaaa9;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.refpower-chip strong {
  color: #f2f7ee;
  font-size: clamp(0.86rem, 1.2vw, 1.28rem);
}

.refpower-chip button {
  width: 30px;
  height: 30px;
  border: 2px solid #6cb92c;
  border-radius: 6px;
  color: white;
  background: linear-gradient(#80d22f, #347109);
  font-size: 1.35rem;
  font-weight: 900;
  opacity: 1;
}

.refpower-close {
  justify-self: end;
  width: clamp(52px, 5vw, 68px);
  height: clamp(52px, 5vw, 68px);
}

.refpower-body {
  min-height: 700px;
  display: grid;
  grid-template-columns: minmax(330px, 38%) minmax(420px, 1fr) minmax(310px, 27%);
  gap: 10px;
  overflow: visible;
  padding-right: 0;
}

.refpower-frame {
  padding: clamp(10px, 1vw, 15px);
}

.refpower-frame h3 {
  color: #ffc229;
  font-size: clamp(1rem, 1.35vw, 1.48rem);
  text-shadow: 0 2px 0 #070708;
}

.refpower-overview {
  grid-template-rows: auto minmax(280px, 1fr) 72px 136px 76px;
}

.refpower-plant {
  border-color: #233c43;
  box-shadow: inset 0 0 28px rgb(0 0 0 / 58%);
}

.refpower-plant img {
  min-height: 280px;
}

.refpower-level > strong {
  background: linear-gradient(#ffcf2e, #8d5707);
  filter: drop-shadow(0 0 10px rgb(255 188 35 / 22%));
}

.refpower-mini-stats article {
  min-height: 58px;
}

.refpower-mini-stats span,
.refpower-produced span,
.refpower-bonuses span {
  border-radius: 8px;
}

.refpower-upgrade,
.refpower-fuel-actions button,
.refpower-storage-actions button,
.refpower-generator-row button {
  border-color: #95e439;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(171 232 57 / 98%), rgb(57 119 8 / 100%)),
    radial-gradient(circle at 50% 0, rgb(255 255 255 / 22%), transparent 45%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 36%),
    inset 0 -3px 0 rgb(0 0 0 / 22%),
    0 0 14px rgb(111 207 38 / 18%);
  text-shadow: 0 2px 0 rgb(0 0 0 / 42%);
}

.refpower-upgrade {
  min-height: 70px;
  font-size: clamp(1.1rem, 1.55vw, 1.6rem);
}

.refpower-mid {
  grid-template-rows: minmax(390px, 1fr) minmax(210px, 31%);
  gap: 10px;
}

.refpower-generators {
  grid-template-rows: auto repeat(3, minmax(118px, 1fr));
}

.refpower-generator-row {
  min-height: 118px;
  grid-template-columns: 46px minmax(130px, 32%) minmax(0, 1fr) minmax(64px, 78px);
  gap: 10px;
  background:
    linear-gradient(90deg, rgb(12 18 18 / 95%), rgb(5 9 10 / 96%)),
    repeating-linear-gradient(135deg, transparent 0 12px, rgb(255 255 255 / 3%) 12px 24px);
}

.refpower-generator-row img {
  max-height: 112px;
}

.refpower-generator-row strong,
.refpower-storage strong,
.refpower-fuel strong {
  color: #93ef34;
  font-size: clamp(1.05rem, 1.55vw, 1.85rem);
  line-height: 1.05;
}

.refpower-generator-row small {
  text-align: left;
}

.refpower-generator-row button {
  min-height: 42px;
}

.refpower-storage article {
  grid-template-columns: minmax(140px, 42%) minmax(0, 1fr);
}

.refpower-storage article img {
  max-height: 176px;
}

.refpower-storage-actions button,
.refpower-fuel-actions button {
  min-height: 48px;
}

.refpower-right {
  grid-template-rows: minmax(250px, 38%) minmax(150px, 22%) minmax(190px, 1fr);
}

.refpower-fuel article {
  grid-template-columns: minmax(120px, 40%) minmax(0, 1fr);
}

.refpower-fuel img {
  max-height: 158px;
  filter: drop-shadow(0 0 18px rgb(125 235 37 / 24%));
}

.refpower-fuel-actions button {
  border-color: #f0b223;
  background:
    linear-gradient(180deg, #f3bd28, #8b5205),
    radial-gradient(circle at 50% 0, rgb(255 255 255 / 24%), transparent 46%);
}

.refpower-fuel-actions button[data-action="upgrade-bio-refinery"] {
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  border-color: #4edbff;
  background:
    linear-gradient(180deg, #38c9ff, #0759a8),
    radial-gradient(circle at 50% 0, rgb(255 255 255 / 28%), transparent 46%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 38%),
    inset 0 -3px 0 rgb(0 0 0 / 24%),
    0 0 16px rgb(42 190 255 / 24%);
}

.refpower-fuel-actions button[data-action="upgrade-bio-refinery"]:disabled {
  border-color: #3d9dca;
  color: #d9f5ff;
  background:
    linear-gradient(180deg, #2a88b5, #153b68),
    radial-gradient(circle at 50% 0, rgb(255 255 255 / 18%), transparent 46%);
  opacity: 0.86;
}

.refpower-produced article,
.refpower-bonuses article {
  min-height: 58px;
}

.refpower-tabs {
  display: none !important;
}

@media (max-width: 1240px), (max-height: 780px) {
  .refpower-screen {
    grid-template-rows: auto auto;
  }

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

  .refpower-header-chips {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(132px, 1fr));
  }

  .refpower-body {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .refpower-overview {
    grid-template-rows: auto minmax(250px, auto) auto auto auto;
  }

  .refpower-mid,
  .refpower-right {
    grid-template-rows: none;
  }
}

@media (max-width: 720px) {
  .refpower-header {
    grid-template-columns: 1fr 56px;
  }

  .refpower-brand {
    gap: 10px;
  }

  .refpower-brand h2 {
    font-size: clamp(1.55rem, 8vw, 2.35rem);
  }

  .refpower-header-chips {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
  }

  .refpower-chip {
    flex: 0 0 178px;
  }

  .refpower-mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .refpower-generator-row,
  .refpower-storage article,
  .refpower-fuel article {
    grid-template-columns: 1fr;
  }

  .refpower-generator-row img,
  .refpower-storage article img,
  .refpower-fuel img {
    width: min(230px, 100%);
    justify-self: center;
  }
}

/* Power station anti-overlap pass: prefer readable scrolling over squeezed panels. */
.power-window .window-content {
  overflow-y: auto;
}

.refpower-screen {
  min-height: 100%;
  height: auto;
}

.refpower-header {
  grid-template-columns: minmax(270px, 0.8fr) minmax(0, 1.2fr) minmax(52px, 68px);
}

.refpower-brand,
.refpower-header-chips,
.refpower-chip,
.refpower-frame,
.refpower-body,
.refpower-generator-row,
.refpower-storage article,
.refpower-fuel article {
  min-width: 0;
}

.refpower-body {
  align-items: start;
  min-height: 0;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.05fr) minmax(300px, 0.82fr);
}

.refpower-overview,
.refpower-mid,
.refpower-right,
.refpower-generators,
.refpower-storage,
.refpower-fuel {
  align-content: start;
}

.refpower-overview {
  grid-template-rows: auto minmax(220px, auto) auto auto auto;
}

.refpower-mid {
  grid-template-rows: auto auto;
}

.refpower-right {
  grid-template-rows: auto auto auto;
}

.refpower-generators {
  grid-template-rows: auto;
}

.refpower-generator-row {
  min-height: 112px;
  grid-template-columns: 42px minmax(104px, 30%) minmax(0, 1fr) minmax(58px, 72px);
}

.refpower-generator-row img {
  max-height: 96px;
}

.refpower-generator-row div,
.refpower-storage article div,
.refpower-fuel article div,
.refpower-produced article,
.refpower-bonuses article {
  min-width: 0;
}

.refpower-generator-row strong,
.refpower-generator-row small,
.refpower-storage strong,
.refpower-storage b,
.refpower-fuel strong,
.refpower-chip strong {
  overflow-wrap: anywhere;
}

.refpower-fuel-actions,
.refpower-storage-actions {
  align-content: start;
}

@media (max-width: 1500px), (max-height: 900px) {
  .game-window.power-window {
    width: min(98vw, 1320px);
    height: 96dvh;
  }

  .refpower-screen {
    grid-template-rows: auto auto;
  }

  .refpower-body {
    grid-template-columns: 1fr;
  }

  .refpower-overview,
  .refpower-mid,
  .refpower-right {
    grid-template-rows: none;
  }

  .refpower-plant img {
    min-height: 240px;
    max-height: 360px;
  }

  .refpower-storage article,
  .refpower-fuel article {
    grid-template-columns: minmax(150px, 32%) minmax(0, 1fr);
  }
}

@media (max-width: 920px) {
  .refpower-header {
    grid-template-columns: 1fr 56px;
  }

  .refpower-header-chips {
    grid-column: 1 / -1;
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .refpower-chip {
    flex: 0 0 176px;
  }

  .refpower-generator-row {
    grid-template-columns: 38px minmax(92px, 28%) minmax(0, 1fr);
  }

  .refpower-generator-row button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Biodiesel action buttons: equal form, blue producer upgrade. */
.refpower-fuel-actions {
  grid-template-columns: 1fr;
  gap: 8px;
}

.refpower-fuel-actions button {
  width: 100%;
  min-height: 50px;
  padding: 7px 10px;
  display: grid;
  place-items: center;
  gap: 3px;
  font-size: clamp(0.78rem, 0.95vw, 0.94rem);
  line-height: 1.05;
  text-align: center;
}

.refpower-fuel-actions button small {
  font-size: clamp(0.6rem, 0.72vw, 0.72rem);
  line-height: 1.05;
}

.refpower-fuel-actions button[data-action="upgrade-bio-refinery"] {
  border-color: #4edbff;
  background:
    linear-gradient(180deg, #39caff, #0759a8),
    radial-gradient(circle at 50% 0, rgb(255 255 255 / 28%), transparent 46%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 38%),
    inset 0 -3px 0 rgb(0 0 0 / 24%),
    0 0 16px rgb(42 190 255 / 24%);
}

.refpower-fuel-actions button[data-action="upgrade-bio-refinery"]:disabled {
  border-color: #3d9dca;
  color: #d9f5ff;
  background:
    linear-gradient(180deg, #2d93c4, #153f70),
    radial-gradient(circle at 50% 0, rgb(255 255 255 / 18%), transparent 46%);
  opacity: 0.9;
}

/* Fuel action color contract: equal size, red/yellow/blue. */
.refpower-fuel-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.refpower-fuel-actions button {
  width: 100%;
  min-width: 0;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  padding: 7px 10px;
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  gap: 3px;
  overflow: hidden;
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
  line-height: 1;
  text-align: center;
  white-space: normal;
}

.refpower-fuel-actions button small {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.58rem, 0.7vw, 0.7rem);
  line-height: 1;
}

.refpower-fuel-actions .diamond-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.refpower-fuel-actions .diamond-amount img {
  width: 1.25em;
  height: 1.25em;
}

.refpower-fuel-actions button[data-action="load-biodiesel"] {
  border-color: #ff5b3e;
  background:
    linear-gradient(180deg, #ff6a43, #9d1e13),
    radial-gradient(circle at 50% 0, rgb(255 255 255 / 24%), transparent 46%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 34%),
    inset 0 -3px 0 rgb(0 0 0 / 24%),
    0 0 14px rgb(255 72 45 / 22%);
}

.refpower-fuel-actions button[data-action="make-biodiesel"] {
  border-color: #f0b223;
  background:
    linear-gradient(180deg, #f4c12d, #8f5206),
    radial-gradient(circle at 50% 0, rgb(255 255 255 / 24%), transparent 46%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 34%),
    inset 0 -3px 0 rgb(0 0 0 / 24%),
    0 0 14px rgb(255 184 37 / 20%);
}

.refpower-fuel-actions button[data-action="upgrade-bio-refinery"] {
  border-color: #4edbff;
  background:
    linear-gradient(180deg, #39caff, #0759a8),
    radial-gradient(circle at 50% 0, rgb(255 255 255 / 28%), transparent 46%);
}

.refpower-fuel-actions button[data-action="load-biodiesel"]:disabled,
.refpower-fuel-actions button[data-action="make-biodiesel"]:disabled,
.refpower-fuel-actions button[data-action="upgrade-bio-refinery"]:disabled {
  opacity: 0.86;
  filter: saturate(0.82) brightness(0.84);
}

/* Generator cards: two visual units, red current and blue next. */
.refpower-generators {
  grid-template-rows: auto repeat(2, minmax(126px, auto));
}

.refpower-generator-row.generator-red {
  border-color: #7c342a;
  background:
    linear-gradient(90deg, rgb(38 13 10 / 94%), rgb(8 10 11 / 96%)),
    radial-gradient(circle at 28% 50%, rgb(255 83 47 / 18%), transparent 48%);
}

.refpower-generator-row.generator-blue {
  border-color: #245f8f;
  background:
    linear-gradient(90deg, rgb(7 24 39 / 94%), rgb(8 10 13 / 96%)),
    radial-gradient(circle at 28% 50%, rgb(50 174 255 / 18%), transparent 48%);
}

.refpower-generator-row.generator-red > b {
  color: #ffcfb8;
  border-color: #b74b32;
}

.refpower-generator-row.generator-blue > b {
  color: #c8efff;
  border-color: #338bc4;
}

.refpower-generator-row.generator-red img,
.refpower-generator-row.generator-blue img {
  max-height: 118px;
}

.refpower-generator-row.generator-red button:not(:disabled) {
  border-color: #ffd24d;
  background:
    linear-gradient(180deg, #ffd94d, #9a5b07),
    radial-gradient(circle at 50% 0, rgb(255 255 255 / 28%), transparent 46%);
}

/* Power station: bonus panel removed. */
.refpower-right {
  grid-template-rows: minmax(300px, auto) minmax(160px, auto);
}

.refpower-produced {
  min-height: 160px;
  align-content: start;
}

/* Compact TL coin cost inside power buttons. */
.refpower-upgrade small,
.refpower-generator-row small,
.refpower-storage-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.refpower-generator-row small {
  justify-content: flex-start;
}

.refpower-upgrade .coin-amount,
.refpower-generator-row .coin-amount,
.refpower-storage-actions .coin-amount {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.86em;
  line-height: 1;
}

.refpower-upgrade .coin-amount img,
.refpower-generator-row .coin-amount img,
.refpower-storage-actions .coin-amount img {
  width: 1em;
  height: 1em;
}

.power-upgrade-cost {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  line-height: 1;
}

.power-upgrade-cost span {
  min-width: 0;
  height: 20px;
  padding: 2px 5px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgb(145 237 52 / 35%);
  border-radius: 5px;
  color: #eaffd6;
  background: rgb(5 12 11 / 58%);
  font-size: 0.72rem;
  font-weight: 900;
}

.power-upgrade-cost span.missing {
  border-color: rgb(255 92 70 / 58%);
  color: #ffd3ca;
  background: rgb(58 12 8 / 62%);
}

.power-upgrade-cost img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: none;
}

.refpower-upgrade small b,
.refpower-generator-row small > b {
  color: #f9eab7;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Creative depot command center. */
.game-window.storage-window {
  width: min(98vw, 1460px);
  height: min(95dvh, 940px);
  background: #030606;
}

.storage-window .window-content {
  overflow-y: auto;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 78%), rgb(0 0 0 / 32%) 45%, rgb(0 0 0 / 78%)),
    radial-gradient(circle at 50% 0, rgb(134 224 50 / 14%), transparent 42%),
    #030706;
}

.creative-depot.storehub-screen {
  min-height: 100%;
  height: auto;
  grid-template-rows: auto minmax(330px, auto) auto auto;
  gap: 12px;
}

.creative-depot .storehub-top,
.creative-depot .storehub-main,
.creative-depot .storehub-grids,
.creative-depot .storehub-actions,
.creative-depot .storehub-dock,
.creative-depot .storehub-upgrade,
.creative-depot .storehub-stock {
  border-radius: 8px;
  border-color: #304247;
  background:
    linear-gradient(135deg, rgb(19 24 24 / 97%), rgb(4 8 8 / 98%)),
    radial-gradient(circle at 50% 0, rgb(131 221 47 / 11%), transparent 48%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 13%),
    inset 0 0 0 1px rgb(0 225 255 / 8%),
    inset 0 0 30px rgb(0 0 0 / 58%),
    0 12px 24px rgb(0 0 0 / 36%);
}

.creative-depot .storehub-top {
  grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(260px, 1.5fr);
  min-height: 76px;
}

.creative-depot .storehub-metric,
.creative-depot .storehub-capacity {
  border-color: #33484b;
  background: linear-gradient(#111a19, #060b0b);
}

.creative-depot .storehub-main {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  gap: 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.creative-depot .storehub-dock {
  grid-template-columns: minmax(330px, 44%) minmax(0, 1fr);
  padding: 16px;
}

.creative-depot .storehub-dock-art {
  min-height: 300px;
  border-color: #345053;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgb(118 223 42 / 22%), transparent 58%),
    linear-gradient(#07100f, #030606);
}

.creative-depot .storehub-dock-art img {
  width: 96%;
  height: 96%;
  max-height: 330px;
}

.storehub-kicker {
  width: max-content;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid rgb(160 235 57 / 32%);
  border-radius: 999px;
  color: #b8f04c;
  background: rgb(54 90 19 / 22%);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.creative-depot .storehub-dock-copy h3,
.creative-depot .storehub-upgrade h3,
.creative-depot .storehub-grids h3 {
  color: #f1c02e;
  text-shadow: 0 2px 0 #040505;
}

.creative-depot .storehub-upgrade {
  border-left: 2px solid #304247;
  align-content: start;
}

.creative-depot .storehub-upgrade strong {
  font-size: clamp(1.8rem, 2.5vw, 2.6rem);
  color: #f5fff0;
}

.storehub-flow-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.storehub-flow-summary article {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #304247;
  border-radius: 7px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: rgb(3 8 8 / 56%);
}

.storehub-flow-summary span {
  color: #aab8b2;
  font-weight: 900;
  text-transform: uppercase;
}

.storehub-flow-summary strong {
  color: #97ed38;
}

.creative-depot .storehub-grids {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.creative-depot .storehub-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.creative-depot .storehub-stock {
  min-height: 188px;
  grid-template-rows: 116px minmax(0, auto);
  padding: 10px;
}

.creative-depot .storehub-stock > img {
  height: 116px;
}

.creative-depot .storehub-stock.product {
  border-color: #2d5265;
  background:
    radial-gradient(circle at 50% 20%, rgb(60 195 235 / 15%), transparent 50%),
    linear-gradient(135deg, #08131a, #050909);
}

.creative-depot .storehub-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1120px), (max-height: 790px) {
  .creative-depot.storehub-screen {
    display: flex;
    flex-direction: column;
  }

  .creative-depot .storehub-top,
  .creative-depot .storehub-main,
  .creative-depot .storehub-dock,
  .creative-depot .storehub-grids,
  .creative-depot .storehub-actions {
    grid-template-columns: 1fr;
  }

  .creative-depot .storehub-upgrade {
    border-left: 2px solid #304247;
  }
}

@media (max-width: 680px) {
  .creative-depot .storehub-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creative-depot .storehub-capacity {
    grid-column: 1 / -1;
  }

  .creative-depot .storehub-dock-art {
    min-height: 220px;
  }

  .creative-depot .storehub-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  }

  .creative-depot .storehub-actions {
    grid-template-columns: 1fr;
  }
}

/* Depot reference layout inspired by the supplied depo03 menu. */
.reference-depot.storehub-screen {
  position: relative;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  color: #f4f8ef;
}

.depot-close-button {
  position: sticky;
  top: 0;
  justify-self: end;
  z-index: 30;
  width: 54px;
  height: 54px;
  margin: 0 2px -64px 0;
  border: 2px solid #79372a;
  border-radius: 8px;
  color: #fff5e7;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 16%), transparent 36%),
    linear-gradient(#e75c35, #8d2012);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 35%),
    inset 0 -8px 16px rgb(0 0 0 / 28%),
    0 8px 18px rgb(0 0 0 / 48%);
  font-size: 2rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 0 rgb(0 0 0 / 55%);
}

.depot-close-button:hover,
.depot-close-button:focus-visible {
  border-color: #ffbd7a;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 22%), transparent 36%),
    linear-gradient(#ff7044, #aa2715);
}

.depot-ref-header,
.depot-ref-layout,
.depot-terminal,
.depot-card-section,
.depot-ref-footer,
.depot-level-card,
.depot-quick-card {
  border: 2px solid #314448;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(19 24 24 / 98%), rgb(5 9 10 / 98%)),
    radial-gradient(circle at 50% 0, rgb(143 224 41 / 10%), transparent 48%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 13%),
    inset 0 0 26px rgb(0 0 0 / 58%),
    0 12px 24px rgb(0 0 0 / 35%);
}

.depot-ref-header {
  min-height: 94px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.65fr);
  gap: 14px;
  align-items: center;
}

.depot-ref-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.depot-ref-brand > span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: #8ff12f;
  font-size: 4rem;
  text-shadow: 0 0 18px rgb(132 240 45 / 42%);
}

.depot-ref-brand h2 {
  margin: 0;
  color: #f6f7ef;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 4px 0 #050607;
}

.depot-ref-brand p {
  margin: 5px 0 0;
  color: #d5dfd2;
  font-weight: 800;
}

.depot-ref-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(128px, 1fr)) minmax(230px, 1.55fr);
  gap: 10px;
}

.depot-ref-metrics .storehub-metric,
.depot-ref-metrics .storehub-capacity {
  min-height: 66px;
  border-color: #33474b;
}

.depot-ref-metrics .storehub-capacity {
  grid-template-columns: 1fr auto;
}

.depot-ref-metrics .storehub-capacity em {
  grid-column: 1 / -1;
  color: #e7f3dc;
  text-align: center;
  font-style: normal;
  font-weight: 900;
}

.depot-ref-layout {
  min-height: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 385px);
  gap: 12px;
}

.depot-ref-left {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(300px, auto) auto auto minmax(72px, auto);
  gap: 10px;
}

.depot-terminal {
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(330px, 47%) minmax(0, 1fr);
  gap: 12px;
}

.depot-truck-visual {
  min-width: 0;
  margin: 0;
  border: 1px solid #315053;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: #07100e;
}

.depot-truck-visual h3,
.depot-card-section h3,
.depot-level-card h3,
.depot-quick-card h3 {
  margin: 0;
  padding: 8px 10px 0;
  color: #99ef35;
  font-size: clamp(1.2rem, 1.65vw, 1.75rem);
  text-transform: uppercase;
  text-shadow: 0 2px 0 #050607;
}

.depot-truck-visual b {
  padding: 2px 10px 6px;
  color: white;
}

.depot-truck-visual img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.depot-deliveries {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}

.depot-deliveries h3 {
  margin: 8px 0 0;
  color: #f3f4ec;
  font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  text-transform: uppercase;
}

.depot-delivery-list {
  min-width: 0;
  padding: 14px;
  border: 1px solid #315053;
  border-radius: 8px;
  background: #071014;
}

.depot-delivery-list strong {
  display: block;
  margin-bottom: 8px;
  color: #92ed34;
  font-size: 1.15rem;
  text-transform: uppercase;
}

.depot-delivery-list p {
  margin: 0;
  min-height: 28px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #eef4ef;
  font-weight: 800;
}

.depot-delivery-list img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.depot-terminal-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.depot-terminal-actions button,
.depot-level-card button,
.depot-quick-card button,
.depot-ref-footer button,
.depot-product-card button {
  min-width: 0;
  min-height: 56px;
  border: 2px solid #8bd931;
  border-radius: 7px;
  color: white;
  background: linear-gradient(#89d52e, #39790b);
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgb(0 0 0 / 40%);
}

.depot-terminal-actions button:nth-child(2) {
  border-color: #49a9ee;
  background: linear-gradient(#2d92df, #06477f);
}

.depot-terminal-actions button:nth-child(3),
.depot-level-card button,
.depot-product-card button {
  border-color: #eba624;
  background: linear-gradient(#eba924, #8b5206);
}

.depot-terminal-actions small,
.depot-level-card small,
.depot-quick-card small,
.depot-product-card small {
  display: block;
  color: #f6eecb;
  font-size: 0.72rem;
}

.depot-card-section {
  padding: 10px;
}

.depot-ref-card-grid {
  margin-top: 8px;
  display: grid;
  gap: 10px;
}

.input-cards {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.product-cards {
  grid-template-columns: repeat(6, minmax(122px, 1fr));
}

.depot-mini-card,
.depot-product-card {
  min-width: 0;
  border: 1px solid #315053;
  border-radius: 8px;
  padding: 8px;
  background: radial-gradient(circle at 50% 25%, rgb(84 193 44 / 14%), transparent 48%), #071014;
}

.depot-mini-card h4,
.depot-product-card h4 {
  margin: 0 0 6px;
  color: #f3f5ef;
  font-size: clamp(0.72rem, 0.82vw, 0.95rem);
  text-align: center;
  text-transform: uppercase;
}

.depot-mini-card img,
.depot-product-card img {
  width: 100%;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgb(0 0 0 / 42%));
}

.depot-input-materials {
  height: 74px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  align-items: stretch;
}

.depot-input-materials span {
  min-width: 0;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 6px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgb(255 255 255 / 12%), rgb(0 0 0 / 10%) 58%, rgb(0 0 0 / 34%));
}

.depot-mini-card .depot-input-materials img {
  width: 100%;
  height: 31px;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgb(0 0 0 / 45%));
}

.depot-mini-card .depot-input-fallback {
  height: 74px;
}

.depot-mini-card strong {
  display: block;
  margin: 3px 0;
  color: white;
  text-align: center;
  font-size: 1.35rem;
}

.depot-mini-card small {
  color: #dbe6d6;
  font-size: 0.75rem;
}

.depot-mini-card i {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  display: block;
  background: #101819;
}

.depot-mini-card i b {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #70c81c, #d7ef45);
}

.depot-product-card p {
  margin: 4px 0 6px;
  color: #dce4dc;
  font-size: 0.78rem;
  font-weight: 800;
}

.depot-product-card button {
  width: 100%;
  min-height: 38px;
}

.depot-ref-side {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(360px, auto) minmax(0, 1fr);
  gap: 10px;
}

.depot-level-card,
.depot-quick-card {
  padding: 12px;
}

.depot-level-badge {
  position: relative;
  min-height: 190px;
  display: grid;
  place-items: center;
  color: white;
  overflow: hidden;
  background: #06100f;
}

.depot-level-badge img {
  width: 100%;
  max-width: 330px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgb(0 0 0 / 48%));
}

.depot-level-badge strong {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  color: white;
  background: transparent;
  font-size: clamp(2.6rem, 4.2vw, 4.4rem);
  line-height: 1;
  text-shadow: 0 4px 0 #071107, 0 0 16px rgb(0 0 0 / 70%);
}

.depot-level-card article {
  padding: 12px;
  border: 1px solid #315053;
  border-radius: 8px;
  background: #071014;
}

.depot-level-card article b {
  color: #9af036;
  text-transform: uppercase;
}

.depot-level-card article p {
  margin: 7px 0 0;
  color: #eef4ef;
  font-weight: 800;
}

.depot-level-card button {
  width: 100%;
  min-height: 74px;
  margin-top: 10px;
}

.depot-level-card button i {
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  display: block;
  overflow: hidden;
  background: rgb(0 0 0 / 35%);
}

.depot-level-card button i b {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #95e434, #f4d34c);
}

.depot-quick-card {
  display: grid;
  align-content: start;
  gap: 10px;
}

.depot-quick-card button {
  min-height: 68px;
  padding: 8px 12px;
  text-align: left;
  background: linear-gradient(#1b2b2e, #091012);
  border-color: #354d52;
}

.depot-ref-footer {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(210px, 0.9fr);
  gap: 10px;
}

.depot-ref-footer article {
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #304247;
  border-radius: 8px;
  background: #071014;
}

.depot-ref-footer span {
  display: block;
  color: #b9c9bd;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.depot-ref-footer strong {
  color: #f5fff2;
  font-size: 1.08rem;
}

.depot-ref-footer button {
  min-height: 54px;
}

@media (max-width: 1280px), (max-height: 850px) {
  .reference-depot.storehub-screen {
    display: flex;
    flex-direction: column;
  }

  .depot-ref-header,
  .depot-ref-layout,
  .depot-terminal,
  .depot-ref-footer {
    grid-template-columns: 1fr;
  }

  .depot-ref-side {
    grid-template-rows: none;
  }

  .input-cards,
  .product-cards {
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  }
}

@media (max-width: 720px) {
  .depot-ref-metrics,
  .depot-terminal-actions {
    grid-template-columns: 1fr;
  }

  .depot-ref-brand h2 {
    font-size: 2rem;
  }

  .depot-ref-brand > span {
    width: 54px;
    height: 54px;
    font-size: 3rem;
  }
}

/* Depot reference final pass: match depo03 composition. */
.game-window.storage-window {
  width: min(99vw, 1600px);
  height: min(96dvh, 1040px);
  border: 0;
  border-radius: 0;
  background: #020606;
  box-shadow: 0 24px 60px rgb(0 0 0 / 72%);
}

.storage-window .window-titlebar {
  display: none;
}

.storage-window .window-content {
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  background:
    linear-gradient(rgb(3 8 6 / 88%), rgb(3 8 6 / 92%)),
    url("assets/site/depo.png?v=2") center / cover no-repeat,
    #030706;
}

.reference-depot.storehub-screen {
  min-height: 100%;
  height: auto;
  gap: 9px;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
}

.depot-ref-header {
  min-height: 102px;
  padding: 10px 14px;
  grid-template-columns: minmax(430px, 0.95fr) minmax(0, 1.75fr);
  border-color: #526064;
  background:
    linear-gradient(135deg, rgb(20 25 25 / 98%), rgb(4 8 9 / 99%)),
    radial-gradient(circle at 8% 50%, rgb(142 241 42 / 16%), transparent 32%);
}

.depot-ref-brand > span {
  width: 82px;
  height: 82px;
  font-size: 4.5rem;
}

.depot-ref-brand h2 {
  font-size: clamp(2.8rem, 4vw, 4.35rem);
}

.depot-ref-brand p {
  font-size: clamp(0.92rem, 1.05vw, 1.1rem);
}

.depot-ref-metrics {
  grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(330px, 1.75fr);
}

.depot-ref-metrics .storehub-metric,
.depot-ref-metrics .storehub-capacity {
  min-height: 72px;
  border-radius: 8px;
  padding: 8px 12px;
}

.depot-ref-metrics .storehub-metric img {
  width: 50px;
  height: 50px;
}

.depot-ref-layout {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  grid-template-columns: minmax(0, 1fr) minmax(350px, 410px);
  gap: 10px;
}

.depot-ref-left {
  grid-template-rows: minmax(330px, auto) auto auto minmax(74px, auto);
}

.depot-terminal,
.depot-card-section,
.depot-ref-footer,
.depot-level-card,
.depot-quick-card {
  border-color: #30484c;
  background:
    linear-gradient(135deg, rgb(9 17 17 / 96%), rgb(4 9 10 / 98%)),
    radial-gradient(circle at 50% 0, rgb(108 206 45 / 10%), transparent 48%);
}

.depot-terminal {
  grid-template-columns: minmax(440px, 48%) minmax(0, 1fr);
  padding: 10px;
}

.depot-truck-visual {
  min-height: 312px;
}

.depot-truck-visual h3 {
  font-size: clamp(1.55rem, 1.9vw, 2.05rem);
}

.depot-truck-visual img {
  min-height: 250px;
  object-fit: cover;
}

.depot-deliveries {
  padding: 4px 4px 0;
}

.depot-deliveries h3 {
  font-size: clamp(1.35rem, 1.55vw, 1.75rem);
}

.depot-delivery-list {
  padding: 16px;
}

.depot-delivery-list strong {
  font-size: 1.2rem;
}

.depot-delivery-list p {
  min-height: 31px;
  font-size: 1.05rem;
}

.depot-terminal-actions button {
  min-height: 70px;
  font-size: clamp(0.95rem, 1.1vw, 1.12rem);
}

.depot-card-section {
  padding: 10px 12px;
}

.depot-card-section h3 {
  padding: 0 0 4px;
  font-size: clamp(1.45rem, 1.8vw, 2rem);
}

.input-cards {
  grid-template-columns: repeat(5, minmax(132px, 1fr));
}

.product-cards {
  grid-template-columns: repeat(6, minmax(126px, 1fr));
}

.depot-mini-card {
  min-height: 132px;
  padding: 8px;
}

.depot-product-card {
  min-height: 196px;
  padding: 8px;
}

.depot-mini-card img {
  height: 54px;
}

.depot-input-materials {
  height: 54px;
  gap: 3px;
}

.depot-mini-card .depot-input-materials img {
  height: 22px;
}

.depot-mini-card .depot-input-fallback {
  height: 54px;
}

.depot-product-card img {
  height: 82px;
}

.depot-mini-card strong {
  font-size: 1.45rem;
}

.depot-product-card button {
  min-height: 40px;
}

.depot-ref-side {
  grid-template-rows: minmax(492px, auto) minmax(290px, 1fr);
}

.depot-level-card {
  padding: 14px;
}

.depot-level-card h3,
.depot-quick-card h3 {
  font-size: clamp(1.45rem, 1.9vw, 2.1rem);
  text-align: center;
}

.depot-level-badge {
  min-height: 185px;
}

.depot-level-badge strong {
  font-size: clamp(2.8rem, 4.4vw, 4.8rem);
}

.depot-level-card article {
  padding: 14px 18px;
}

.depot-level-card button {
  min-height: 80px;
  font-size: 1.22rem;
}

.depot-quick-card {
  gap: 12px;
}

.depot-quick-card h3 {
  text-align: left;
}

.depot-quick-card button {
  min-height: 74px;
  border-color: #344a4f;
}

.depot-ref-footer {
  min-height: 76px;
  grid-template-columns: minmax(280px, 1.15fr) repeat(3, minmax(150px, 0.8fr)) minmax(240px, 1fr);
  align-items: center;
}

.depot-ref-footer article:first-child span,
.depot-ref-footer article:first-child strong {
  color: #95ed34;
}

.depot-ref-footer button {
  min-height: 54px;
  background: linear-gradient(#86d82f, #39790b);
}

@media (max-width: 1400px), (max-height: 880px) {
  .depot-ref-header,
  .depot-ref-layout,
  .depot-terminal,
  .depot-ref-footer {
    grid-template-columns: 1fr;
  }

  .depot-ref-metrics {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .depot-ref-side {
    grid-template-rows: none;
  }

  .product-cards {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* Depot truck queue and stock-card tuning. */
.reference-depot .depot-deliveries {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.reference-depot .depot-delivery-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(190px, 0.9fr);
  gap: 10px;
  align-items: stretch;
}

.reference-depot .depot-truck-arrivals {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.reference-depot .depot-arrival-slot {
  min-width: 0;
  min-height: 136px;
  border: 1px solid #315053;
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  place-items: center;
  background: radial-gradient(circle at 50% 34%, rgb(34 180 255 / 16%), transparent 58%), #071014;
}

.reference-depot .depot-arrival-slot img {
  width: 100%;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgb(0 0 0 / 50%));
}

.reference-depot .depot-arrival-slot strong,
.reference-depot .depot-arrival-slot span {
  color: #eaf2ec;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.reference-depot .depot-arrival-slot.empty {
  opacity: 0.52;
  background: linear-gradient(135deg, rgb(255 255 255 / 4%), rgb(0 0 0 / 18%)), #071014;
}

.reference-depot .depot-arrival-slot i {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #0c1718;
}

.reference-depot .depot-arrival-slot i b {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #f6b427, #95e42d);
}

.reference-depot .depot-delivery-list {
  padding: 10px;
}

.reference-depot .depot-delivery-list strong {
  font-size: clamp(0.88rem, 1vw, 1.05rem);
  line-height: 1.1;
}

.reference-depot .depot-delivery-list p {
  min-height: 24px;
  grid-template-columns: 24px 1fr auto;
  gap: 6px;
  font-size: 0.82rem;
}

.reference-depot .depot-delivery-list img {
  width: 21px;
  height: 21px;
}

.reference-depot .depot-terminal-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reference-depot .depot-terminal-actions button:nth-child(2) {
  border-color: #49a9ee;
  background: linear-gradient(#2d92df, #06477f);
}

.reference-depot .depot-input-single,
.reference-depot .depot-input-materials {
  height: 70px;
  display: grid;
  place-items: center;
}

.reference-depot .depot-input-single img {
  width: 100%;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgb(0 0 0 / 46%));
}

.reference-depot .depot-product-card {
  display: grid;
  grid-template-rows: auto minmax(98px, 1fr) auto auto auto;
  align-items: end;
}

.reference-depot .depot-product-card img {
  height: 98px;
}

.reference-depot .depot-product-card strong {
  color: #f6fff2;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 900;
}

.reference-depot .depot-product-card p {
  min-height: 32px;
  margin: 5px 0 6px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 190 43 / 48%);
  border-radius: 7px;
  background: rgb(0 0 0 / 22%);
}

.reference-depot .depot-product-card p .coin-amount {
  min-height: 24px;
  gap: 4px;
}

.reference-depot .depot-product-card p .coin-amount img {
  width: 24px;
  height: 24px;
}

.reference-depot .depot-product-card button {
  min-height: 40px;
  font-size: 1rem;
}

@media (max-width: 920px) {
  .reference-depot .depot-delivery-body {
    grid-template-columns: 1fr;
  }

  .reference-depot .depot-arrival-slot {
    min-height: 112px;
  }

  .reference-depot .depot-arrival-slot img {
    height: 66px;
  }
}

/* Depot responsive final pass. */
.reference-depot,
.reference-depot * {
  box-sizing: border-box;
}

.reference-depot.storehub-screen {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.reference-depot .depot-ref-header,
.reference-depot .depot-ref-layout,
.reference-depot .depot-terminal,
.reference-depot .depot-ref-footer,
.reference-depot .depot-ref-metrics,
.reference-depot .depot-ref-card-grid,
.reference-depot .depot-delivery-body,
.reference-depot .depot-truck-arrivals,
.reference-depot .depot-terminal-actions {
  min-width: 0;
}

.reference-depot .depot-ref-brand,
.reference-depot .storehub-metric,
.reference-depot .storehub-capacity,
.reference-depot .depot-mini-card,
.reference-depot .depot-product-card,
.reference-depot .depot-delivery-list,
.reference-depot .depot-level-card,
.reference-depot .depot-quick-card {
  min-width: 0;
  overflow: hidden;
}

.reference-depot .depot-ref-brand h2,
.reference-depot .depot-ref-brand p,
.reference-depot .depot-delivery-list strong,
.reference-depot .depot-mini-card h4,
.reference-depot .depot-product-card h4 {
  overflow-wrap: anywhere;
}

.reference-depot .input-cards {
  grid-template-columns: repeat(auto-fit, minmax(clamp(116px, 16vw, 156px), 1fr));
}

.reference-depot .product-cards {
  grid-template-columns: repeat(auto-fit, minmax(clamp(126px, 15vw, 164px), 1fr));
}

@media (max-width: 1500px), (max-height: 900px) {
  .reference-depot .depot-ref-header {
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
  }

  .reference-depot .depot-ref-layout {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
  }

  .reference-depot .depot-terminal {
    grid-template-columns: minmax(250px, 0.86fr) minmax(0, 1.14fr);
  }

  .reference-depot .depot-truck-visual img {
    min-height: 180px;
  }

  .reference-depot .depot-arrival-slot {
    min-height: 118px;
  }

  .reference-depot .depot-arrival-slot img {
    height: 68px;
  }
}

@media (max-width: 1180px), (max-height: 760px) {
  .reference-depot.storehub-screen {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .reference-depot .depot-ref-header,
  .reference-depot .depot-ref-layout,
  .reference-depot .depot-terminal,
  .reference-depot .depot-ref-footer {
    grid-template-columns: 1fr;
  }

  .reference-depot .depot-ref-layout {
    padding: 8px;
  }

  .reference-depot .depot-ref-left {
    grid-template-rows: auto auto auto auto;
  }

  .reference-depot .depot-ref-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .reference-depot .depot-level-badge {
    min-height: 104px;
  }

  .reference-depot .depot-level-badge img {
    max-width: 250px;
  }

  .reference-depot .depot-level-badge strong {
    font-size: 3rem;
  }

  .reference-depot .depot-quick-card {
    align-content: start;
  }

  .reference-depot .depot-ref-footer {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .reference-depot .depot-ref-header {
    padding: 8px;
  }

  .reference-depot .depot-ref-brand {
    gap: 10px;
  }

  .reference-depot .depot-ref-brand > span {
    width: 52px;
    height: 52px;
    font-size: 3rem;
  }

  .reference-depot .depot-close-button {
    width: 46px;
    height: 46px;
    margin-bottom: -54px;
    font-size: 1.7rem;
  }

  .reference-depot .depot-ref-brand h2 {
    font-size: clamp(1.55rem, 8vw, 2.3rem);
    line-height: 1;
  }

  .reference-depot .depot-ref-brand p {
    font-size: 0.82rem;
  }

  .reference-depot .depot-ref-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .reference-depot .depot-ref-metrics .storehub-capacity {
    grid-column: 1 / -1;
  }

  .reference-depot .depot-terminal {
    padding: 8px;
    gap: 8px;
  }

  .reference-depot .depot-truck-visual img {
    min-height: 150px;
  }

  .reference-depot .depot-delivery-body {
    grid-template-columns: 1fr;
  }

  .reference-depot .depot-truck-arrivals {
    grid-template-columns: repeat(3, minmax(82px, 1fr));
    gap: 6px;
  }

  .reference-depot .depot-arrival-slot {
    min-height: 96px;
    padding: 6px;
  }

  .reference-depot .depot-arrival-slot img {
    height: 52px;
  }

  .reference-depot .depot-terminal-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .reference-depot .depot-terminal-actions button,
  .reference-depot .depot-product-card button,
  .reference-depot .depot-level-card button,
  .reference-depot .depot-quick-card button {
    min-height: 44px;
    font-size: 0.86rem;
  }

  .reference-depot .input-cards {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  }

  .reference-depot .product-cards {
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  }

  .reference-depot .depot-product-card {
    grid-template-rows: auto minmax(82px, 1fr) auto auto auto;
  }

  .reference-depot .depot-product-card img {
    height: 82px;
  }

  .reference-depot .depot-ref-side {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .reference-depot .depot-ref-header,
  .reference-depot .depot-ref-layout,
  .reference-depot .depot-terminal,
  .reference-depot .depot-card-section,
  .reference-depot .depot-level-card,
  .reference-depot .depot-quick-card {
    padding: 6px;
  }

  .reference-depot .depot-ref-brand > span {
    width: 42px;
    height: 42px;
    font-size: 2.4rem;
  }

  .reference-depot .depot-close-button {
    width: 42px;
    height: 42px;
    margin-right: 0;
    margin-bottom: -48px;
    font-size: 1.55rem;
  }

  .reference-depot .depot-ref-metrics {
    grid-template-columns: 1fr;
  }

  .reference-depot .depot-truck-arrivals {
    grid-template-columns: 1fr;
  }

  .reference-depot .depot-arrival-slot {
    min-height: 74px;
    grid-template-columns: 76px 1fr;
    grid-template-rows: auto auto;
    justify-items: start;
  }

  .reference-depot .depot-arrival-slot img {
    grid-row: 1 / 3;
    height: 54px;
  }

  .reference-depot .depot-arrival-slot i {
    align-self: end;
  }

  .reference-depot .depot-terminal-actions {
    grid-template-columns: 1fr;
  }

  .reference-depot .input-cards,
  .reference-depot .product-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .reference-depot .depot-mini-card,
  .reference-depot .depot-product-card {
    padding: 6px;
  }

  .reference-depot .depot-mini-card strong {
    font-size: 1.05rem;
  }

  .reference-depot .depot-input-single,
  .reference-depot .depot-input-materials,
  .reference-depot .depot-input-single img {
    height: 56px;
  }

  .reference-depot .depot-product-card {
    grid-template-rows: auto minmax(66px, 1fr) auto auto auto;
  }

  .reference-depot .depot-product-card img {
    height: 66px;
  }

  .reference-depot .depot-product-card p {
    min-height: 28px;
    font-size: 0.72rem;
  }

  .reference-depot .depot-product-card p .coin-amount img {
    width: 20px;
    height: 20px;
  }

  .reference-depot .depot-level-badge {
    min-height: 126px;
  }

  .reference-depot .depot-level-badge img {
    max-width: 220px;
  }

  .reference-depot .depot-level-badge strong {
    font-size: 2.45rem;
  }

  .reference-depot .depot-ref-footer {
    grid-template-columns: 1fr;
  }
}

/* Final menu overflow protection: keep this block last so every menu inherits it. */
.window-backdrop {
  padding:
    max(var(--menu-edge-gap), env(safe-area-inset-top))
    max(var(--menu-edge-gap), env(safe-area-inset-right))
    max(var(--menu-edge-gap), env(safe-area-inset-bottom))
    max(var(--menu-edge-gap), env(safe-area-inset-left)) !important;
}

.game-window {
  max-width: calc(100vw - (var(--menu-edge-gap) * 2)) !important;
  max-height: calc(var(--app-height, 100dvh) - (var(--menu-edge-gap) * 2)) !important;
}

.game-window:not(.transformer-window):not(.match-window) .window-content {
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.game-window .window-content > * {
  max-width: 100%;
  min-width: 0;
}

.game-window button,
.game-window input,
.game-window select {
  max-width: 100%;
}

.compact-1280 .game-window:not(.transformer-window):not(.match-window) {
  width: calc(100vw - (var(--menu-edge-gap) * 2)) !important;
  height: calc(var(--app-height, 100dvh) - (var(--menu-edge-gap) * 2)) !important;
  aspect-ratio: auto !important;
}

.compact-1280 .shop-window .window-content,
.compact-1280 .profile-window .window-content,
.compact-1280 .storage-window .window-content,
.compact-1280 .research-window .window-content,
.compact-1280 .power-window .window-content {
  height: calc(100% - clamp(48px, 9vh, 76px)) !important;
  max-height: none !important;
  overflow: auto !important;
}

.compact-1280 .shop-window .window-content > *,
.compact-1280 .profile-window .window-content > *,
.compact-1280 .storage-window .window-content > *,
.compact-1280 .research-window .window-content > *,
.compact-1280 .power-window .window-content > * {
  height: auto !important;
  min-height: 100%;
}

.compact-1280 .game-window.transformer-window,
.compact-1280 .game-window.match-window {
  max-width: calc(100vw - 12px) !important;
  max-height: calc(var(--app-height, 100dvh) - 12px) !important;
}

.compact-1280 .transformer-window .window-content,
.compact-1280 .match-window .window-content {
  overflow: auto !important;
  overscroll-behavior: contain;
}

@media (max-width: 1280px), (max-height: 720px) {
  .game-window .window-content {
    padding: clamp(5px, 0.8vw, 10px);
  }

  .game-window button {
    min-height: 28px;
  }

  .shop-window .market-sheet,
  .profile-window .profile-sheet,
  .storage-window .reference-depot,
  .research-window .research-reference-sheet,
  .power-window .power-shop-sheet {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 1281px) and (min-height: 721px) {
  .wide-game .game-window {
    max-width: min(98vw, 1720px) !important;
    max-height: min(96dvh, 1060px) !important;
  }
}