@import url('tokens.css');

:root{
  --header-h:calc(96px + env(safe-area-inset-top, 0px));
  --info-panel-top:calc(80px + env(safe-area-inset-top, 0px));
  --info-panel-height:140px;
}

html,body{margin:0;padding:0;width:100%;height:100%;}
body{font:400 var(--font-size-base)/1.4 "Segoe UI",sans-serif;color:#333;background:transparent;overflow:hidden;} 

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:var(--space-m) var(--space-l);border:none;border-radius:var(--radius-m);font-weight:600;font-size:var(--font-size-base);cursor:pointer;transition:background .2s,transform .05s;user-select:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--color-primary);color:#fff;}
.btn-danger{background:var(--color-error);color:#fff;}
.btn-disabled{opacity:.5;cursor:default}

/* Cards */
.card{background:var(--color-surface);border-radius:var(--radius-m);padding:var(--space-l);box-shadow:0 2px 4px rgba(0,0,0,.15);
  color:#fff;}

/* Scrollbar (узкий серый) */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#666;border-radius:3px}

/* Bottom banner above navigation */
#bottom-banner{
  position:fixed;
  left:5px;
  top:calc(80px + env(safe-area-inset-top, 0px) + 140px - 80px);
  width:180px;
  height:80px;
  background:transparent;
  z-index:9;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-sizing:border-box;
}
#bottom-banner .bottom-banner-icon{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  pointer-events:none;
  transform:scale(1.6);
  image-rendering:-webkit-optimize-contrast;
  image-rendering:auto;
  filter:drop-shadow(0 0 0.02px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 0.02px rgba(255, 255, 255, 0.7));
  will-change:transform;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Bottom banner panel */
#bottom-banner-panel{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:75vh;
  z-index:140;
  display:none;
  flex-direction:column;
  background:#1a1a1a;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  padding:20px;
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#bottom-banner-panel::-webkit-scrollbar{
  display:none;
}
#bottom-banner-panel .close-btn{
  position:absolute;
  top:16px;
  right:16px;
  background:none;
  border:none;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:background 0.2s ease;
  z-index:10;
}
#bottom-banner-panel .close-btn:hover{
  background:rgba(255,255,255,0.1);
}

.banner-panel-header{
  margin-top:0;
  padding:12px 20px 20px 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  box-sizing:border-box;
}
.banner-panel-header > *:not(.banner-total-profit-cell){
  width:100%;
  max-width:100%;
}
.banner-panel-header > .banner-total-profit-cell{
  align-self:center;
  width:92%;
  max-width:450px;
}
.banner-panel-title{
  color:#fff;
  font-size:34px;
  font-weight:900;
  margin:0 auto 12px auto;
  text-transform:uppercase;
  letter-spacing:3px;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);
  text-align:center;
  display:block;
  width:100%;
}
.banner-panel-subtitle{
  color:rgba(255,255,255,0.75);
  font-size:13px;
  font-weight:400;
  margin:0;
  line-height:1.5;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
  letter-spacing:0.3px;
}
.banner-tabs{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:16px;
  margin-bottom:0;
}
.banner-tab-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.3);
  border-radius:20px;
  color:rgba(255,255,255,0.7);
  font-size:14px;
  font-weight:600;
  padding:8px 20px;
  cursor:pointer;
  transition:all 0.2s ease;
  white-space:nowrap;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.banner-tab-btn:hover{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.5);
  color:#fff;
}
.banner-tab-btn.active{
  background:rgba(255,255,255,0.15);
  border-color:rgba(255,255,255,0.6);
  color:#fff;
}
.banner-tab-btn:active{
  transform:scale(0.95);
}
.banner-panel-content{
  margin-top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:0 4px 20px 4px;
}
.banner-total-profit-cell{
  width:92% !important;
  max-width:450px !important;
  background:linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:16px;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  display:flex;
  flex-direction:column;
  padding:16px 20px;
  margin:16px auto 8px auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  position:relative;
  overflow:hidden;
  align-self:center;
  box-sizing:border-box;
}
.banner-total-profit-cell::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  z-index:1;
}
.banner-total-profit-content{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}
.banner-total-profit-header{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.banner-total-profit-label{
  color:rgba(255,255,255,0.9);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
  text-align:center;
}
.banner-total-profit-period{
  color:#fff;
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);
  line-height:1;
  align-self:flex-end;
  margin-bottom:0;
  margin-left:-4px;
}
.banner-total-profit-amount{
  display:flex;
  align-items:baseline;
  gap:8px;
  justify-content:center;
  width:100%;
}
.banner-total-profit-icon{
  width:18px;
  height:18px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  object-fit:contain;
  flex-shrink:0;
}
.banner-total-profit-value{
  color:#fff;
  font-size:24px;
  font-weight:900;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);
  white-space:nowrap;
  letter-spacing:0.5px;
  line-height:1;
}
.banner-item{
  width:99%;
  max-width:500px;
  height:150px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.8);
  border-radius:12px;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 20px 0 0;
  overflow:hidden;
  position:relative;
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.banner-item-icon{
  width:200px;
  height:200px;
  flex-shrink:0;
  object-fit:contain;
  background:none;
  margin-left:-20px;
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.6));
}
.banner-item:nth-child(2) .banner-item-icon{
  margin-top:-10px;
}
.banner-item-icon svg,
.banner-item-icon img{
  background:none;
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.6));
}
.banner-item-icon svg rect[fill],
.banner-item-icon svg rect{
  display:none;
}

/* Уменьшенный размер SVG для первых 5 драгоценностей */
.banner-item[data-jewelry-id="black-prince"] .banner-item-icon,
.banner-item[data-jewelry-id="the-secret-of-the-dragon"] .banner-item-icon,
.banner-item[data-jewelry-id="golden-truth"] .banner-item-icon,
.banner-item[data-jewelry-id="bohemia-of-goodness"] .banner-item-icon,
.banner-item[data-jewelry-id="dark-elite"] .banner-item-icon{
  transform:scale(0.8);
  transform-origin:center center;
}

/* Индивидуальные стили для зданий */
.banner-item[data-building-id="mansion"] .banner-item-icon{
  margin-top:-15px;
}
.banner-item[data-building-id="mountain-house"] .banner-item-icon{
  margin-top:-15px;
}
.banner-item[data-building-id="town-hall"] .banner-item-icon{
  transform:scale(1.2) translateX(-20px);
  transform-origin:left center;
}
.banner-item[data-building-id="forest-village"] .banner-item-icon{
  transform:scale(1.2) translateX(-20px);
  transform-origin:left center;
}
.banner-item[data-building-id="village-technology-2"] .banner-item-icon{
  margin-top:-10px;
}
.banner-item[data-building-id="biologist-house"] .banner-item-icon{
  margin-top:-15px;
}
.banner-item[data-building-id="bloomie-house"] .banner-item-icon{
  margin-top:-15px;
}

.banner-item-content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:relative;
  overflow:visible;
}
.banner-item-title{
  color:#fff;
  font-size:20px;
  font-weight:800;
  text-align:left;
  margin-left:-35px;
  margin-top:0;
  margin-bottom:0;
  position:absolute;
  top:0;
  left:0;
  white-space:nowrap;
  overflow:visible;
}
.banner-stats{
  display:flex;
  gap:6px;
  margin-left:-35px;
  margin-top:40px;
  margin-bottom:0;
  width:calc(100% + 35px);
  max-width:calc(100% + 35px);
  box-sizing:border-box;
}
.banner-stat-cell{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:50px;
  padding:7px 16px;
  display:flex;
  align-items:center;
  gap:5px;
  margin:0;
  min-height:32px;
  height:32px;
  box-sizing:border-box;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.banner-stat-cell:first-child{
  flex:0 0 auto;
  width:calc(35% - 3px);
}
.banner-stat-cell:last-child{
  flex:1;
  min-width:0;
  justify-content:center;
}
.banner-stat-label{
  color:rgba(255,255,255,0.7);
  font-size:11px;
  font-weight:600;
}
.banner-stat-value{
  color:#fff;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:2px;
}
.banner-stat-value img{
  width:10px !important;
  height:10px !important;
  margin-left:0 !important;
  flex-shrink:0;
  display:inline-block;
}
.banner-item-name{
  color:#fff;
  font-size:20px;
  font-weight:800;
  text-align:left;
  margin-top:-50px;
  margin-left:-15px;
}
.banner-buy-btn{
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:50px;
  color:#fff;
  font-size:13px;
  font-weight:800;
  padding:7px 20px;
  cursor:pointer;
  transition:background 0.2s ease;
  width:calc(100% + 35px);
  max-width:calc(100% + 35px);
  margin-left:-35px;
  margin-top:8px;
  margin-bottom:0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-align:center;
  justify-content:center;
}
.banner-buy-btn img{
  width:14px !important;
  height:14px !important;
  margin-left:3px !important;
}
.banner-buy-btn:hover{
  background:rgba(255,255,255,0.3);
}
.banner-buy-btn:active{
  transform:scale(0.95);
}
.banner-buy-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
.banner-buy-btn:disabled:hover{
  background:rgba(255,255,255,0.2);
}
.banner-buy-btn img{
  display:inline-block;
  vertical-align:middle;
}

/* Стили для недоступных зданий */
.banner-item-icon[style*="brightness(0.85)"]{
  filter:brightness(0.85) grayscale(1) !important;
}

/* Адаптивные стили для ячеек инвестиций на мобильных устройствах */
@media (max-width: 480px) {
  .banner-item{
    width:98%;
    max-width:480px;
    height:140px;
    padding:0 16px 0 0;
    gap:12px;
  }
  .banner-item-icon{
    width:180px;
    height:180px;
    margin-left:-16px;
  }
  .banner-item-title{
    font-size:18px;
    margin-left:-30px;
  }
  .banner-stats{
    margin-left:-30px;
    margin-top:36px;
    gap:5px;
    width:calc(100% + 30px);
    max-width:calc(100% + 30px);
  }
  .banner-stat-cell{
    padding:6px 14px;
    min-height:30px;
    height:30px;
  }
  .banner-stat-cell:first-child{
    width:calc(35% - 2.5px);
  }
  .banner-stat-cell:last-child{
    flex:1;
    min-width:0;
    justify-content:center;
  }
  .banner-stat-label{
    font-size:10px;
  }
  .banner-stat-value{
    font-size:12px;
  }
  .banner-buy-btn{
    font-size:12px;
    padding:6px 18px;
    width:calc(100% + 30px);
    max-width:calc(100% + 30px);
    margin-left:-30px;
    margin-top:6px;
  }
  .banner-buy-btn img{
    width:12px !important;
    height:12px !important;
  }
}

@media (max-width: 360px) {
  .banner-item{
    width:97%;
    max-width:360px;
    height:130px;
    padding:0 14px 0 0;
    gap:10px;
  }
  .banner-item-icon{
    width:160px;
    height:160px;
    margin-left:-14px;
  }
  .banner-item-title{
    font-size:16px;
    margin-left:-28px;
  }
  .banner-stats{
    margin-left:-28px;
    margin-top:32px;
    gap:4px;
    width:calc(100% + 28px);
    max-width:calc(100% + 28px);
  }
  .banner-stat-cell{
    padding:5px 12px;
    min-height:28px;
    height:28px;
  }
  .banner-stat-cell:first-child{
    width:calc(35% - 2px);
  }
  .banner-stat-cell:last-child{
    flex:1;
    min-width:0;
    justify-content:center;
  }
  .banner-stat-label{
    font-size:9px;
  }
  .banner-stat-value{
    font-size:11px;
  }
  .banner-buy-btn{
    font-size:11px;
    padding:5px 16px;
    width:calc(100% + 28px);
    max-width:calc(100% + 28px);
    margin-left:-28px;
    margin-top:5px;
  }
  .banner-buy-btn img{
    width:11px !important;
    height:11px !important;
  }
}

@media (max-width: 320px) {
  .banner-item{
    width:96%;
    max-width:320px;
    height:120px;
    padding:0 12px 0 0;
    gap:8px;
  }
  .banner-item-icon{
    width:140px;
    height:140px;
    margin-left:-12px;
  }
  .banner-item-title{
    font-size:15px;
    margin-left:-26px;
  }
  .banner-stats{
    margin-left:-26px;
    margin-top:28px;
    gap:3px;
    width:calc(100% + 26px);
    max-width:calc(100% + 26px);
  }
  .banner-stat-cell{
    padding:4px 10px;
    min-height:26px;
    height:26px;
  }
  .banner-stat-cell:first-child{
    width:calc(35% - 1.5px);
  }
  .banner-stat-cell:last-child{
    flex:1;
    min-width:0;
    justify-content:center;
  }
  .banner-stat-label{
    font-size:8px;
  }
  .banner-stat-value{
    font-size:10px;
  }
  .banner-buy-btn{
    font-size:10px;
    padding:4px 14px;
    width:calc(100% + 26px);
    max-width:calc(100% + 26px);
    margin-left:-26px;
    margin-top:4px;
  }
  .banner-buy-btn img{
    width:10px !important;
    height:10px !important;
  }
  /* Адаптация индивидуальных стилей для зданий на маленьких экранах */
  .banner-item[data-building-id="town-hall"] .banner-item-icon,
  .banner-item[data-building-id="forest-village"] .banner-item-icon{
    transform:scale(1.0) translateX(-15px);
  }
}

/* Адаптация для средних экранов (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  #bottom-banner{
    left:5px;
    top:calc(80px + env(safe-area-inset-top, 0px) + 140px - 80px);
    width:180px;
    height:78px;
    padding:0 11px;
  }
  .banner-item{
    width:98.5%;
    max-width:500px;
    height:145px;
  }
  .banner-item-icon{
    width:190px;
    height:190px;
  }
  .banner-item-title{
    font-size:19px;
  }
  .banner-stats{
    margin-top:38px;
    width:calc(100% + 35px);
    max-width:calc(100% + 35px);
  }
  .banner-total-profit-cell{
    width:94%;
    padding:14px 18px;
    margin:14px auto 6px auto;
  }
  .banner-total-profit-value{
    font-size:22px;
  }
  .banner-total-profit-period{
    font-size:13px;
  }
  .banner-total-profit-icon{
    width:16px;
    height:16px;
  }
}

/* Адаптация панели инвестиций для мобильных */
@media (max-width: 480px) {
  #bottom-banner{
    left:5px;
    top:calc(80px + env(safe-area-inset-top, 0px) + 140px - 80px);
    width:180px;
    height:76px;
    padding:0 10px;
  }
  #bottom-banner-panel{
    padding:16px;
  }
  .banner-panel-title{
    font-size:30px;
    letter-spacing:2px;
  }
  .banner-panel-subtitle{
    font-size:12px;
  }
  .banner-tab-btn{
    font-size:13px;
    padding:7px 18px;
  }
  .banner-panel-content{
    gap:16px;
    padding:0 2px 16px 2px;
  }
}

@media (max-width: 360px) {
  #bottom-banner{
    left:5px;
    top:calc(80px + env(safe-area-inset-top, 0px) + 140px - 80px);
    width:175px;
    height:74px;
    padding:0 8px;
  }
  #bottom-banner-panel{
    padding:12px;
  }
  .banner-panel-title{
    font-size:26px;
    letter-spacing:1.5px;
  }
  .banner-panel-subtitle{
    font-size:11px;
  }
  .banner-tab-btn{
    font-size:12px;
    padding:6px 16px;
  }
  .banner-panel-content{
    gap:14px;
    padding:0 2px 12px 2px;
  }
  .banner-total-profit-cell{
    width:95%;
    padding:12px 16px;
    margin:12px auto 4px auto;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .banner-total-profit-value{
    font-size:20px;
  }
  .banner-total-profit-period{
    font-size:12px;
  }
  .banner-total-profit-icon{
    width:15px;
    height:15px;
  }
  .banner-total-profit-label{
    font-size:9px;
    letter-spacing:1.2px;
  }
}

@media (max-width: 320px) {
  #bottom-banner{
    left:5px;
    top:calc(80px + env(safe-area-inset-top, 0px) + 140px - 80px);
    width:170px;
    height:72px;
    padding:0 6px;
  }
  #bottom-banner-panel{
    padding:10px;
  }
  .banner-panel-title{
    font-size:24px;
    letter-spacing:1px;
  }
  .banner-panel-subtitle{
    font-size:10px;
  }
  .banner-tab-btn{
    font-size:11px;
    padding:5px 14px;
  }
  .banner-panel-content{
    gap:12px;
    padding:0 2px 10px 2px;
  }
  .banner-total-profit-cell{
    width:96%;
    padding:10px 14px;
    margin:10px auto 4px auto;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .banner-total-profit-value{
    font-size:18px;
  }
  .banner-total-profit-icon{
    width:14px;
    height:14px;
  }
  .banner-total-profit-period{
    font-size:11px;
  }
  .banner-total-profit-label{
    font-size:8px;
    letter-spacing:1px;
  }
}

/* Bottom navigation bar */
#bottom-nav{
  position:fixed;left:0;right:0;bottom:0;
  height:80px;
  padding:12px 12px 20px 12px;
  display:flex;align-items:center;justify-content:space-around;
  background:rgba(42,42,42,0.9);
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  border-top:1px solid rgba(58,58,58,0.8);
  box-shadow:0 -2px 6px rgba(0,0,0,.15);
  backdrop-filter:blur(6px);
  z-index:10;
}
#bottom-nav button{
  flex:1;
  height:100%;border:none;background:none;color:#666;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;font-size:12px;font-weight:600;cursor:pointer;
  transition:color 0.2s ease;
}
#bottom-nav button .icon{width:24px;height:24px;margin-bottom:4px;filter:brightness(0.7);transition:filter 0.2s ease;}
#bottom-nav button.active{color:#fff;}
#bottom-nav button.active .icon{filter:brightness(1);}



/* UI root wrapper */
#ui-root{position:fixed;inset:0;max-width:440px;margin:0 auto;pointer-events:none;z-index:50;}
#ui-root *{pointer-events:auto;}

/* hide old panels */
#money-panel,#credits-panel{display:none!important;}

/* Side bar update */
.side-bar{position:fixed;margin-right:-16px;margin-top:calc(40px + env(safe-area-inset-top, 0px));right:0;width:80px;height:auto;background:transparent;border-top-left-radius:40px;border-bottom-left-radius:40px;padding:20px 0;display:flex;flex-direction:column;align-items:center;gap:0;}
.side-btn{width:80px;height:80px;background:transparent;border:none;border-radius:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color 0.2s ease;}
.side-btn img{width:38px;height:38px;}
.side-btn.active{background:#fff;color:#4D4D4D;}
.side-btn.panel-active{background:#fff;color:#4D4D4D;}
.side-sep{width:24px;height:1px;background:#6d6d6d;margin:8px 0;}

/* Info panel with PNG background */
.info-stack{position:fixed !important;top:calc(80px + env(safe-area-inset-top, 0px)) !important;left:10px !important;width:auto;z-index:20;}
#info-panel.info-stack{position:fixed !important;top:calc(80px + env(safe-area-inset-top, 0px)) !important;left:10px !important;}
.info-panel-bg{
  width:160px;
  height:140px;
  background:transparent;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:top left;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  transition:all 0.3s ease;
  padding:4px;
}
.info-value{
  font-family:'Segoe UI',Arial,sans-serif;
  text-shadow:1px 1px 2px rgba(0,0,0,0.8);
  user-select:none;
}
.info-icon{
  transition:filter 0.2s ease;
  /* Улучшение качества SVG */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
  /* Сглаживание для лучшего качества */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Улучшение четкости */
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Принудительное использование GPU */
  will-change: transform;
  /* Дополнительные улучшения качества */
  filter: saturate(1.05) contrast(1.08) brightness(1.03);
  shape-rendering: geometricPrecision;
}

/* Дополнительные стили для всех SVG в левой панели */
.info-panel-bg img {
  /* Улучшение качества рендеринга */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
  /* Сглаживание */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Принудительное использование GPU */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  /* Улучшение четкости */
  filter: saturate(1.05) contrast(1.08) brightness(1.03);
  shape-rendering: geometricPrecision;
}
.p2p-icon{
  border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.info-item-bg{
  transition:all 0.2s ease;
}
.rbc-bg{
  border:1px solid #ffd700 !important;
}
.bc-bg{
  border:1px solid transparent;
}
.ref-bg{
  border:1px solid transparent;
}
.p2p-bg{
  background:linear-gradient(45deg, #ff0000, #800080) padding-box, linear-gradient(45deg, #ff0000, #800080) border-box;
  border:2px solid transparent;
}
.info-item{
  user-select:none;
}
.add-credits-btn{
  transition:transform 0.1s ease;
}
.add-credits-btn:hover{
  transform:scale(1.1);
}
.add-credits-btn:active{
  transform:scale(0.95);
}

/* Header */
.app-header{position:fixed;top:0;left:0;right:0;height:calc(96px + env(safe-area-inset-top, 0px));background:#4D4D4D;padding:calc(12px + env(safe-area-inset-top, 0px)) 4px 12px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:15;}
.app-logo{width:120px;height:auto;justify-content:center;}
/* Новая панель новостей в правом верхнем углу */
.news-corner{position:fixed;top:calc(10px + env(safe-area-inset-top, 0px));right:10px;width:280px;max-height:200px;background:rgba(77,77,77,0.95);border-radius:12px;padding:12px;box-shadow:0 4px 16px rgba(0,0,0,0.3);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);z-index:25;opacity:1;transition:opacity 0.3s ease;}

.news-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.2);}

.news-label{font-weight:700;font-size:12px;letter-spacing:0.02em;text-transform:uppercase;color:#fff;}

.news-close{background:none;border:none;color:#fff;font-size:14px;cursor:pointer;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background 0.2s ease;}

.news-close:hover{background:rgba(255,255,255,0.1);}

.news-content{max-height:140px;overflow-y:auto;}

.news-item{padding:4px 0;}

.news-text{font-size:11px;line-height:1.4;color:#fff;opacity:0.9;display:block;}

/* Старые стили (удалены) */
.news-bar{position:absolute;left:0;right:0;bottom:0;padding:0 16px;height:14px;display:flex;align-items:center;gap:8px;font-size:12px;color:#fff;background:#4D4D4D;}

/* Адаптивность для панели новостей */
@media (max-width: 768px) {
    .news-corner{width:240px;top:calc(8px + env(safe-area-inset-top, 0px));right:8px;}
    .news-text{font-size:10px;}
}

@media (max-width: 480px) {
    .news-corner{width:200px;top:calc(5px + env(safe-area-inset-top, 0px));right:5px;padding:10px;}
    .news-label{font-size:11px;}
    .news-text{font-size:9px;}
}

/* Адаптивность для правой панели */
@media (max-width: 768px) {
    .side-bar{margin-top:calc(50px + env(safe-area-inset-top, 0px));padding:10px 0;}
    .side-btn{width:70px;height:70px;border-radius:35px;}
    .side-btn img{width:32px;height:32px;}
    .side-sep{margin:8px 0;}
}

@media (max-width: 480px) {
    .side-bar{margin-top:calc(40px + env(safe-area-inset-top, 0px));padding:8px 0;}
    .side-btn{width:60px;height:60px;border-radius:30px;}
    .side-btn img{width:28px;height:28px;}
    .side-sep{margin:5px 0;}
}

@media (max-width: 360px) {
    .side-bar{margin-top:calc(30px + env(safe-area-inset-top, 0px));padding:5px 0;}
    .side-btn{width:55px;height:55px;border-radius:27px;}
    .side-btn img{width:25px;height:25px;}
    .side-sep{margin:3px 0;}
}
.info-ic{width:14px;height:14px;opacity:0.5;}

@media (max-width: 360px) {
  .advent-panel{
    padding:6px;
  }
  .advent-panel-content{
    padding-top:70px;
    padding-bottom:10px;
  }
  .advent-header-box{
    padding:12px 8px;
    border-radius:10px;
    margin-bottom:16px;
  }
  .advent-title{
    font-size:28px;
    padding:0 0 6px 0;
    letter-spacing:1px;
  }
  .advent-subtitle{
    font-size:12px;
    padding:0;
    letter-spacing:0.2px;
  }
  .advent-progress-container{
    padding:0 8px 12px 8px;
    gap:4px;
  }
  .advent-progress-label{
    font-size:11px;
  }
  .advent-progress-bar{
    height:16px;
  }
  .advent-grid{
    grid-template-columns:repeat(4,1fr);
    gap:3px;
    padding:6px 0 0 0;
  }
  .advent-grid-item{
    background-size:130%;
  }
  .advent-reward-item{
    font-size:11px;
  }
  .advent-reward-icon{
    width:14px;
    height:14px;
  }
  .advent-reward-character-img{
    width:75px;
    height:75px;
  }
  .advent-grid-item:last-child .advent-reward-character-img,
  .advent-grid-item.ultra-character .advent-reward-character-img{
    width:95px;
    height:95px;
  }
}

/* Адаптивная сетка для очень маленьких экранов */
@media (max-width: 320px) {
  .advent-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

/* push body down below header */
#three-canvas{margin-top:var(--header-h);}

/* Telegram Mini App specific styles */
.telegram-mini-app .info-stack {
    top: 165px !important; /* 80px + 85px Telegram offset - увеличен для избежания пересечения с кнопкой закрыть */
}

/* Динамические панели зданий для Telegram Mini App */
.telegram-mini-app .building-panel-container {
    max-height: 50vh !important; /* Еще больше уменьшаем высоту для Telegram Mini App */
    padding-bottom: 20px !important; /* Минимальный отступ снизу */
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

.telegram-mini-app .building-panel-container > div {
    padding-bottom: 30px !important; /* Минимальный отступ для контента */
}

@media (max-width: 360px) {
    .telegram-mini-app .building-panel-container { 
        max-height: 40vh !important; 
        padding-bottom: 15px !important;
    }
    .telegram-mini-app .building-panel-container > div {
        padding-bottom: 25px !important;
    }
}

@media (max-width: 480px) {
    .telegram-mini-app .building-panel-container { 
        max-height: 45vh !important; 
        padding-bottom: 18px !important;
    }
    .telegram-mini-app .building-panel-container > div {
        padding-bottom: 28px !important;
    }
}

@media (max-width: 768px) {
    .telegram-mini-app .building-panel-container { 
        max-height: 50vh !important; 
        padding-bottom: 20px !important;
    }
    .telegram-mini-app .building-panel-container > div {
        padding-bottom: 30px !important;
    }
}

.telegram-mini-app .side-bar {
    margin-top: 130px !important; /* 60px + 70px Telegram offset */
    right: 8px !important;
    left: auto !important;
    width: 80px !important;
}

.telegram-mini-app .news-corner {
    top: 80px !important; /* 10px + 70px Telegram offset */
}

.telegram-mini-app .app-header {
    height: 166px !important; /* 96px + 70px Telegram offset */
    padding-top: 82px !important; /* 12px + 70px Telegram offset */
}

.telegram-mini-app #three-canvas {
    margin-top: 166px !important; /* 96px + 70px Telegram offset */
}

/* Кнопки разработки для Telegram Mini App */

.telegram-mini-app #add-money-test {
    top: 105px !important; /* 35px + 70px Telegram offset */
}

/* Адаптивные стили для Telegram Mini App */
@media (max-width: 360px) {
    .telegram-mini-app .info-stack { top: 155px !important; /* Увеличен отступ для маленьких экранов */ }
    .telegram-mini-app .side-bar { margin-top: 100px !important; right: 8px !important; left: auto !important; width: 55px !important; }
    .telegram-mini-app .news-corner { top: 70px !important; }
    .telegram-mini-app .app-header { height: 156px !important; padding-top: 72px !important; }
    .telegram-mini-app #three-canvas { margin-top: 156px !important; }
    .telegram-mini-app #add-money-test { top: 95px !important; }
}

@media (max-width: 480px) {
    .telegram-mini-app .info-stack { top: 165px !important; /* Увеличен отступ для средних экранов */ }
    .telegram-mini-app .side-bar { margin-top: 110px !important; right: 8px !important; left: auto !important; width: 60px !important; }
    .telegram-mini-app .news-corner { top: 80px !important; }
    .telegram-mini-app .app-header { height: 166px !important; padding-top: 82px !important; }
    .telegram-mini-app #three-canvas { margin-top: 166px !important; }
    .telegram-mini-app #reset-data { top: 75px !important; }
    .telegram-mini-app #add-money-test { top: 105px !important; }
}

@media (max-width: 768px) {
    .telegram-mini-app .info-stack { top: 175px !important; /* Увеличен отступ для больших экранов */ }
    .telegram-mini-app .side-bar { margin-top: 120px !important; right: 8px !important; left: auto !important; width: 70px !important; }
    .telegram-mini-app .news-corner { top: 80px !important; }
    .telegram-mini-app .app-header { height: 176px !important; padding-top: 92px !important; }
    .telegram-mini-app #three-canvas { margin-top: 176px !important; }
    .telegram-mini-app #reset-data { top: 85px !important; }
    .telegram-mini-app #add-money-test { top: 115px !important; }
}

/* Дополнительные медиа-запросы для очень маленьких экранов */
@media (max-width: 320px) {
    .telegram-mini-app .info-stack { top: 150px !important; /* Еще больший отступ для очень маленьких экранов */ }
}

/* Для экранов с высоким разрешением */
@media (min-width: 769px) and (max-width: 1024px) {
    .telegram-mini-app .info-stack { top: 185px !important; /* Отступ для планшетов */ }
    .telegram-mini-app #bottom-banner { 
        left: 5px !important;
        top: 245px !important; /* 185px + 140px - 80px */
        width: 180px !important;
    }
}

/* Стили для кнопки инвестиций в Telegram Mini App */
/* Адаптивная позиция для всех мобильных разрешений */
@media (max-width: 768px) {
    .telegram-mini-app #bottom-banner { 
        left: 5px !important;
        top: calc(80px + env(safe-area-inset-top, 0px) + 140px - 80px + 75px) !important;
        width: 180px !important;
    }
}

/* bottom nav active dim others */
#bottom-nav button{opacity:1;}
#bottom-nav button.active{opacity:1;color:#fff;}

/* Phone panel */
.phone-panel{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:220px;
    max-width:78vw;
    height:460px;
    max-height:90vh;
    background:#050505;
    border-radius:48px;
    padding:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:120!important;
    box-shadow:0 20px 60px rgba(0,0,0,0.65);
    overflow:hidden;
}
.phone-panel::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    border:4px solid #f11421;
    box-shadow:0 0 12px rgba(241,20,33,0.55),0 0 30px rgba(241,20,33,0.35);
    pointer-events:none;
}
.phone-panel::after{
    content:'';
    position:absolute;
    right:-6px;
    top:44%;
    width:6px;
    height:54px;
    background:#f11421;
    border-radius:4px;
    box-shadow:0 0 12px rgba(241,20,33,0.4);
}
.phone-close{display:none;}
.phone-home{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px;width:100%;}
.phone-app{width:72px;height:72px;background:#6d6d6d;border:none;border-radius:22px;color:#fff;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:6px;padding:6px;}
.phone-app .icon{width:28px;height:28px;}
.phone-screen{width:100%;flex:1;display:flex;flex-direction:column;align-items:center;color:#fff;font-size:12px;gap:10px;}
.phone-screen h3{margin:16px 0 8px;font-size:16px;}
.phone-back{background:#1976d2;border:none;border-radius:16px;color:#fff;padding:6px 16px;font-size:12px;cursor:pointer;}
.phone-placeholder{
    position:absolute;
    inset:7px;
    /* Черно-красный современный узор */
    background:
        radial-gradient(circle at 20% 20%, rgba(255,0,64,0.35), transparent 32%),
        radial-gradient(circle at 80% 15%, rgba(255,64,0,0.3), transparent 28%),
        radial-gradient(circle at 70% 70%, rgba(255,0,0,0.35), transparent 34%),
        linear-gradient(135deg, rgba(0,0,0,0.9), rgba(20,20,20,0.9)),
        repeating-linear-gradient(45deg, rgba(255,0,64,0.08) 0 10px, rgba(255,0,64,0) 10px 20px);
    border-radius:41px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:20px;
    text-align:center;
    color:#f7f7f7;
    text-transform:uppercase;
    letter-spacing:0.12em;
    font-size:16px;
    font-weight:700;
    z-index:10;
    box-shadow:0 10px 24px rgba(0,0,0,0.35);
    padding:48px 20px 12px;
    border:1px solid rgba(255,0,64,0.35);
}
.phone-placeholder::before{
    content:'';
    position:absolute;
    top:12px;
    left:50%;
    transform:translateX(-50%);
    width:98px;
    height:24px;
    background:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(10,10,10,0.9));
    border:1px solid rgba(255,255,255,0.38);
    border-radius:999px;
    box-shadow:0 6px 12px rgba(0,0,0,0.45), 0 0 0 4px rgba(255,255,255,0.05);
}
.phone-placeholder p{
    margin:0;
    text-align:center;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}
.phone-gesture-bar{
    width:108px;
    height:4px;
    border-radius:999px;
    background:#ffffff;
    opacity:0.9;
    margin-top:auto;
    margin-bottom:-2px;
}
#orders-container .order-item{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;background:#6d6d6d;border-radius:8px;padding:6px 8px;margin-bottom:4px;font-size:12px;}
.order-item input[type=checkbox]{width:16px;height:16px;accent-color:#4caf50;}

/* Bookeio layout */
.bookeio-grid{display:flex;flex-direction:column;width:100%;gap:8px;}
.bookeio-column{width:100%;display:flex;flex-direction:column;align-items:center;background:rgba(0,0,0,.15);border-radius:8px;padding:6px;}
.bookeio-column h4{margin:4px 0;font-size:12px;letter-spacing:.5px;}
.app-item-img{width:60px;height:60px;margin:4px 0;}
.slider-row{display:flex;align-items:center;width:100%;gap:4px;}
.slider-row input[type=range]{flex:1;}
.cost-label{font-size:12px;min-width:44px;text-align:right;}
.order-btn{margin-top:4px;background:#000;border:2px solid #fff;color:#fff;padding:4px;border-radius:4px;font-size:12px;width:100%;cursor:pointer;}
.qty-label{font-size:12px;min-width:48px;text-align:center;}

/* Base layer for persistent UI */
.panel{z-index:110!important;}
/* Modal/opened panels above base UI */
.modal{position:fixed!important;z-index:130!important;}

/* Notification red dot */
.red-dot{position:absolute;top:4px;right:4px;width:10px;height:10px;border-radius:5px;background:#ff1744;display:none;}

/* Explicit z-index for each modal panel */
#phone-panel,
#shop-panel,
#upgrade-panel,
#factory-upgrade-panel,
#city-panel,
#offline-panel,
#crate-overlay,
#profile-panel {
  z-index:130!important;
}

/* === PANEL ANIMATIONS === */
/* Анимация появления панелей снизу вверх */
@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutToBottom {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes phonePanelSlideIn {
    from {
        transform: translate(-50%, 120%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes phonePanelSlideOut {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    to {
        transform: translate(-50%, 120%) scale(0.9);
        opacity: 0;
    }
}



/* Классы для анимации панелей */
.panel.modal {
    transition: opacity 0.3s ease;
}

.panel.modal.slide-in:not(#phone-panel) {
    animation: slideInFromBottom 0.4s ease-out forwards;
}

.panel.modal.slide-out:not(#phone-panel) {
    animation: slideOutToBottom 0.3s ease-in forwards;
}

#phone-panel.slide-in {
    animation: phonePanelSlideIn 0.45s cubic-bezier(.18,.89,.32,1.08) forwards;
}

#phone-panel.slide-out {
    animation: phonePanelSlideOut 0.35s ease forwards;
}