/* ChatGPT-generated casual pseudo-3D UI art. */
.cz-play-face {
  min-height: 78px;
  padding: 0 22px !important;
  background: linear-gradient(180deg, #79c943 0%, #4d9f27 68%, #367b1b 100%) !important;
  border: 3px solid #315d1e !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.42), 0 5px 0 #2e6419, 0 8px 14px rgba(43,25,8,.32) !important;
}
.cz-play-face::before,
.cz-play-face::after { display: none !important; }
.cz-play-ico { display: none !important; }

.coin-ic,
.gear-btn,
.rail-chip .rc-ico,
#condCard .chest,
#roomsCard .chest,
#roomLock,
#roomGift .ic {
  color: transparent !important;
  font-size: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-radius: 12px;
}

.coins .coin-ic { background-image: url("../art/generated/ui/coin.png") !important; width: 30px; height: 30px; display: inline-block; }
.coins.energy .coin-ic { background-image: url("../art/generated/ui/energy.png") !important; }
.coins.stars .coin-ic { background-image: url("../art/generated/ui/star.png") !important; }
#lobby #btnSettings {
  background: transparent url("../art/generated/ui/settings.png") center / contain no-repeat !important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

.rail-chip .rc-ico {
  width: 54px !important;
  height: 54px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-size: contain !important;
}
.rail-chip .rc-ico svg { display: none !important; }
/* Варіант із товстим кантом (scripts/outline-icons.js): іконки лежать
   просто на зеленій карті, а зелений ящик і олив'яний мішок на траві
   зливаються. Кант той самий, що в синіх лічильників угорі, — біла
   обводка й темний край, — тож верхівка інтерфейсу лишається однією
   системою. Полотно виросло на товщину канта (x1.113), тому коробка в
   system-blue.css піднята на ту саму частку: інакше малюнок схуд би. */
.rail-chip .rc-cond { background-image: url("../art/generated/ui/outlined/territory.png?v=20260831-outline1") !important; }
.rail-chip .rc-rooms { background-image: url("../art/generated/ui/outlined/rooms.png?v=20260831-outline1") !important; }
.rail-chip .rc-stock { background-image: url("../art/generated/ui/outlined/stock.png?v=20260831-outline1") !important; }
.rail-chip .rc-swap { background-image: url("../art/generated/ui/outlined/swap.png?v=20260831-outline1") !important; }
.rail-chip .rc-shop { background-image: url("../art/generated/ui/outlined/shop.png?v=20260831-outline1") !important; }

#condCard .chest,
#roomsCard .chest,
#roomGift .ic { background-image: url("../art/generated/ui/reward.png") !important; min-width: 40px; min-height: 40px; }
#condCard .chest.is-trophy,
#roomsCard .chest.is-trophy,
#roomsCard .is-trophy { background-image: url("../art/generated/ui/trophy.png") !important; }
#roomsCard .is-reward { background-image: url("../art/generated/ui/reward.png") !important; }
#roomLock { background-image: url("../art/generated/ui/lock.png") !important; }

.generated-territory-item,
.generated-room-item,
#roomsCard .lock {
  color: transparent !important;
  font-size: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-radius: 14px;
}
.generated-territory-item { min-width: 62px; min-height: 62px; }
.generated-room-item { min-width: 58px; min-height: 58px; }
.generated-territory-item img,
.generated-room-item img { width:100%;height:100%;object-fit:contain;display:block; }
#roomsCard .lock { background-image: url("../art/generated/ui/lock.png") !important; }

#condClose,#roomsClose,#stockClose,#swapClose { color:transparent!important;font-size:0!important;background-image:url("../art/generated/ui/close.png")!important;background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important;box-shadow:none!important;border:0!important; }
#roomsBack { color:transparent!important;font-size:0!important;background-image:url("../art/generated/ui/back.png")!important;background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important; }

.gen-star,
.gen-coin,
.gen-energy,
.gen-fast {
  display: inline-block !important;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  vertical-align: -4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 6px;
  text-decoration: none;
}
.gen-star { background-image: url("../art/generated/ui/star.png") !important; }
.gen-coin { background-image: url("../art/generated/ui/coin.png") !important; }
.gen-energy { background-image: url("../art/generated/ui/energy.png") !important; }
.gen-fast { background-image: url("../art/generated/ui/fast-forward.png") !important; }
.gen-lock,.is-trophy,.is-reward {
  display:inline-block;width:24px;height:24px;background-position:center;background-repeat:no-repeat;background-size:contain;
  color:transparent!important;font-size:0!important;vertical-align:middle;
}
.gen-lock { background-image:url("../art/generated/ui/lock.png")!important; }

#swapCard .t i,
#stockPanel .res-ic,
.req .res-ic { border-radius:0!important;background-color:transparent!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important; }
#swapCard .t i { width:40px!important;height:40px!important; }
#stockPanel .res-ic { width:46px!important;height:46px!important; }

#locClose,#locBack {
  color:transparent!important;
  font-size:0!important;
  background-position:center!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
}
#locClose { background-image:url("../art/generated/ui/close.png")!important; }
#locBack { background-image:url("../art/generated/ui/back.png")!important;min-width:54px!important; }
#locPlay {
  padding: 0 24px !important;
  background-image: none !important;
  background: linear-gradient(180deg, #82d64a 0%, #4ca228 70%, #347b1b 100%) !important;
  border-color: #315d1e !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-shadow: 0 2px 0 rgba(38,79,19,.8) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.42), 0 5px 0 #2e6419, 0 8px 14px rgba(43,25,8,.28) !important;
}

/* Portrait HUD: independent game-art plates over the map. The geometry mirrors
   the reference proportions without borrowing its theme or assets. */
#lobby .base-hud-tl { left: 8px; top: 12px; width: 72px; max-width: 72px; }
#lobby .base-hud-tl .profile-hud {
  width: 72px; height: 58px; max-width: 72px; padding: 6px !important;
  flex-direction: column; align-items: stretch; justify-content: center; gap: 5px;
  border: 2px solid #e4b84f !important; border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(65,92,38,.98), rgba(22,39,19,.98)) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 3px 0 #16230f, 0 5px 12px rgba(0,0,0,.52) !important;
}
#lobby .base-hud-tl .ph-lvl {
  padding: 2px 4px !important; font-size: 11px !important; text-align: center;
  color: #fff7d7 !important; background: #263c1c !important; border: 1px solid #f0c85e !important;
  border-radius: 8px !important; text-shadow: 0 2px 0 #17200f !important;
}
#lobby .base-hud-tl .ph-xp { min-width: 0; width: 100%; height: 10px; border-radius: 6px; overflow: hidden; }
#lobby .base-hud-tl .ph-xp-num { font-size: 6px !important; letter-spacing: 0 !important; }
#lobby .base-hud-tr {
  left: 86px; right: 52px; top: 18px; max-width: none; gap: 5px;
  justify-content: space-between;
}
#lobby .base-hud-tr .coins {
  width: calc((100% - 10px) / 3); min-width: 0; height: 38px;
  padding: 3px 6px 3px 8px !important; justify-content: space-between;
  border-width: 2px !important; border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(39,49,30,.98), rgba(14,22,13,.98)) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 3px 0 rgba(10,14,8,.9), 0 5px 10px rgba(0,0,0,.44) !important;
}
#lobby .base-hud-tr .coins b { font-size: 12px !important; color: #fff8dc !important; text-shadow: 0 2px 0 #000 !important; }
#lobby .base-hud-tr .coins .coin-ic {
  width: 27px !important; height: 27px !important; flex: 0 0 27px;
  background-size: contain !important; border-radius: 0 !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.7));
}
#lobby .base-hud-tr .coins.energy b { font-size: 10px !important; }
#lobby .gear-btn { right: 7px; top: 15px; width: 40px !important; height: 40px !important; filter: drop-shadow(0 3px 3px rgba(0,0,0,.65)); }
#lobby .base-rail { left: 10px; top: 48%; gap: 8px; }
#lobby .rail-chip { min-width: 62px; }
#lobby .rail-chip .rc-ico {
  width: 58px !important; height: 58px !important;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.68));
}
#lobby .rc-lab {
  margin-top: -4px; padding: 2px 5px; border-radius: 7px;
  background: rgba(18,28,13,.88); color: #fff7d5 !important;
  font-size: 8px; line-height: 1; font-weight: 900; letter-spacing: .03em;
  text-shadow: 0 1px 0 #000 !important; box-shadow: 0 2px 3px rgba(0,0,0,.55);
}
#lobby #baseCanvas { image-rendering: auto !important; }
#condCard .dev,
#roomDev { display: none !important; }

@media (max-height: 760px) {
  #lobby .base-rail { gap: 3px; top: 51%; }
  #lobby .rail-chip .rc-ico { width: 48px !important; height: 48px !important; }
  #lobby .rail-chip { min-width: 54px; }
}

/* ==================================================================
   Unified system UI — saturated blue over the green map.
================================================================== */
:root {
  --sys-blue: #1267c4;
  --sys-blue-hi: #2b91ef;
  --sys-blue-deep: #07376f;
  --sys-blue-ink: #041d3d;
  --sys-blue-paper: #eef7ff;
  --sys-blue-line: #7fc5ff;
}

/* Profile is an image, not another plate competing with the counters. */
#lobby .base-hud-tl { width: 72px; max-width: 72px; top: 8px; }
#lobby .base-hud-tl .profile-hud {
  position: relative; width: 72px; height: 78px; max-width: 72px;
  display: block; padding: 0 !important; overflow: visible;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; cursor: pointer;
}
.profile-avatar-img {
  display: block; width: 66px; height: 66px; object-fit: cover; object-position: 50% 22%;
  border-radius: 50%; border: 3px solid #fff !important;
  background: var(--sys-blue-deep); box-shadow: 0 0 0 3px var(--sys-blue), 0 5px 10px rgba(0,0,0,.58);
}
#lobby .base-hud-tl .ph-lvl {
  position: absolute; right: 0; bottom: 4px; z-index: 2;
  min-width: 27px; padding: 3px 5px !important; font-size: 9px !important;
  color: #fff !important; background: var(--sys-blue) !important;
  border: 2px solid #fff !important; border-radius: 12px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.55) !important;
}
#lobby .base-hud-tl .ph-xp {
  position: absolute; left: 6px; bottom: 0; width: 49px; height: 7px;
  border: 1px solid #fff; background: var(--sys-blue-deep); border-radius: 5px;
}
#lobby .base-hud-tl .ph-xp-num { display: none !important; }

/* Coin can grow; energy and stars are intentionally capped at three digits. */
#lobby .base-hud-tr { left: 86px; right: 52px; top: 17px; gap: 5px; }
#lobby .base-hud-tr .coins {
  width: auto; height: 38px; border-color: var(--sys-blue-line) !important;
  background: linear-gradient(180deg, #176fd0, #084b9b) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 3px 0 #052b59, 0 6px 11px rgba(0,0,0,.48) !important;
}
#lobby .base-hud-tr .coins:first-child { flex: 1 1 auto; min-width: 104px; }
#lobby .base-hud-tr .coins.energy { flex: 0 0 82px; min-width: 82px; }
#lobby .base-hud-tr .coins.stars { flex: 0 0 76px; min-width: 76px; }
#lobby .base-hud-tr .coins b { color: #fff !important; }
#lobby .base-hud-tr .coins.energy b,
#lobby .base-hud-tr .coins.stars b { max-width: 30px; overflow: hidden; text-overflow: clip; }

#lobby #btnSettings {
  display: grid !important; place-items: center;
  background: linear-gradient(180deg, var(--sys-blue-hi), var(--sys-blue)) !important;
  border: 3px solid #fff !important; border-radius: 50% !important;
  box-shadow: 0 0 0 3px var(--sys-blue-deep), 0 5px 10px rgba(0,0,0,.55) !important;
  color: #fff !important; font: 900 25px/1 system-ui !important;
  text-shadow: 0 2px 0 var(--sys-blue-deep) !important;
}
#lobby #btnSettings::before { display: none !important; }

/* Saturated blue is the single system-panel identity. Light blue interiors
   retain long-text readability without returning to unrelated cream/green. */
#condCard, #roomsCard,
.loc-card, .stock-card, .px-panel,
#audioPanel .ap-card, #collections .col-card, #demoEnd .de-card, .shop-card {
  background: linear-gradient(180deg, var(--sys-blue) 0 82px, #dcedff 82px, var(--sys-blue-paper) 100%) !important;
  border-color: var(--sys-blue-deep) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.28), 0 0 0 5px var(--sys-blue), 0 0 0 9px var(--sys-blue-deep), 0 18px 34px rgba(0,0,0,.52) !important;
  color: var(--sys-blue-ink) !important;
}
#condCard .banner, #roomsCard .banner,
.loc-bar, .stock-bar {
  background: linear-gradient(180deg, var(--sys-blue-hi), var(--sys-blue)) !important;
  border-color: var(--sys-blue-line) !important;
}
#condCard .banner h3, #roomsCard .banner h3,
.loc-title, .stock-title, .ap-title, .col-title, .de-title, .acc-title {
  color: #fff !important; text-shadow: 0 2px 0 var(--sys-blue-deep) !important;
}
#condCard .prog, #condCard .task,
#roomsCard .room, #roomsCard .act,
.loc-preview, .loc-gate, .loc-meters {
  background: rgba(244,250,255,.96) !important;
  border-color: #4a83bb !important;
}
#condCard .bar i { background: linear-gradient(90deg, var(--sys-blue-hi), #63c5ff) !important; }
#condCard .cap, #condCard .task .nm { color: var(--sys-blue-ink) !important; }
#condCard .task .sub { color: #42688e !important; }
#condCard .bar { background: #9bc6ee !important; border-color: var(--sys-blue-deep) !important; }
#condCard .yes, #condCard .finish,
#roomsCard .buy, #roomsCard .claim {
  background: linear-gradient(180deg, var(--sys-blue-hi), var(--sys-blue)) !important;
  border-color: var(--sys-blue-deep) !important; color: #fff !important;
  box-shadow: 0 4px 0 var(--sys-blue-deep), inset 0 2px 0 rgba(255,255,255,.35) !important;
}
#locPanel, #stockPanel, #audioPanel, #collections, #demoEnd, .accuse-overlay,
#condWrap, #roomsWrap { background: rgba(2,18,39,.64) !important; }

.loc-mech {
  background: linear-gradient(180deg, #f4faff, #cfe7ff) !important;
  border-color: #75aee3 !important;
}
.loc-mech, .loc-mech * { color: var(--sys-blue-ink) !important; }
#locPlay, #locUpgrade {
  background: linear-gradient(180deg, var(--sys-blue-hi), var(--sys-blue)) !important;
  border-color: var(--sys-blue-deep) !important; color: #fff !important;
  text-shadow: 0 2px 0 var(--sys-blue-deep) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 var(--sys-blue-deep), 0 8px 14px rgba(0,0,0,.3) !important;
}
#locUpgrade:disabled {
  background: linear-gradient(180deg, #78a3ca, #4f769b) !important;
  color: #dceeff !important; opacity: .75 !important;
}

/* Profile picker */
.profile-picker {
  position: fixed; inset: 0; z-index: 10000; display: none; place-items: center;
  padding: 18px; background: rgba(2,18,39,.72); backdrop-filter: blur(4px);
}
.profile-picker.show { display: grid; }
.profile-picker-card {
  width: min(388px, calc(100vw - 32px)); padding: 0 16px 20px;
  border: 4px solid var(--sys-blue-deep); border-radius: 24px;
  background: var(--sys-blue-paper); color: var(--sys-blue-ink);
  box-shadow: 0 0 0 5px var(--sys-blue), 0 18px 36px rgba(0,0,0,.58);
}
.profile-picker-card header {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 -16px 15px; padding: 11px 13px 10px 19px;
  border-radius: 17px 17px 0 0; background: linear-gradient(180deg, var(--sys-blue-hi), var(--sys-blue));
}
.profile-picker-card h2 { margin: 0; color: #fff; font: 900 21px/1 system-ui; letter-spacing: .06em; text-shadow: 0 2px var(--sys-blue-deep); }
.profile-picker-card p { margin: 0 0 12px; font: 900 13px/1 system-ui; color: var(--sys-blue); letter-spacing: .08em; }
.profile-picker-close {
  width: 38px; height: 38px; border: 2px solid #fff; border-radius: 50%;
  background: var(--sys-blue-deep); color: #fff; font: 900 25px/30px system-ui; cursor: pointer;
}
.profile-avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.profile-avatar-option {
  aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 3px solid #89b8e8; border-radius: 16px; background: #bcdcff;
  box-shadow: 0 4px 0 #527fac;
}
.profile-avatar-option img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.profile-avatar-option.selected { border-color: #fff; outline: 4px solid var(--sys-blue); transform: translateY(-2px); box-shadow: 0 6px 0 var(--sys-blue-deep); }

#locUpgrade {
  min-height: 52px;
  background: linear-gradient(180deg, #78c947 0%, #4f9f2b 72%, #36791f 100%) !important;
  border-color: #315d1e !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 0 rgba(38,79,19,.8) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 5px 0 #2e6419, 0 8px 14px rgba(43,25,8,.28) !important;
}
#locUpgrade:disabled { filter: grayscale(.6); opacity: .62; }

/* Must remain last: legacy upgrade styling above also uses !important. */
#locUpgrade {
  background: linear-gradient(180deg, var(--sys-blue-hi), var(--sys-blue)) !important;
  border-color: var(--sys-blue-deep) !important;
  text-shadow: 0 2px 0 var(--sys-blue-deep) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 var(--sys-blue-deep), 0 8px 14px rgba(0,0,0,.3) !important;
}
#locUpgrade:disabled {
  background: linear-gradient(180deg, #78a3ca, #4f769b) !important;
  color: #dceeff !important; filter: none !important; opacity: .75 !important;
}
.loc-art { border-color: #75aee3 !important; }

#audioPanel #btnHaptics,
#audioPanel #btnMute,
#audioPanel #apClose {
  background: linear-gradient(180deg, var(--sys-blue-hi), var(--sys-blue)) !important;
  border-color: var(--sys-blue-deep) !important; color: #fff !important;
  text-shadow: 0 2px 0 var(--sys-blue-deep) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 5px 0 var(--sys-blue-deep), 0 8px 14px rgba(0,0,0,.25) !important;
}
#audioPanel input[type="range"] { accent-color: var(--sys-blue) !important; }
#audioPanel input[type="range"]::-webkit-slider-thumb {
  background: linear-gradient(180deg, var(--sys-blue-hi), var(--sys-blue)) !important;
  border-color: #fff !important; box-shadow: 0 3px 0 var(--sys-blue-deep) !important;
}