body {
    margin: 0;
    font-family: "Arial", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    color: white;
      overflow-x: hidden;

}

#bg{
    background-image: url('/photos/BGobby1.png');
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: 100vh;
    position: absolute;
}

#auth::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    filter: blur(4px) brightness(0.7);
    z-index: -1;
    border-radius: 15px;
}

#auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    padding: 25px;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgb(39, 85, 253), #00b7ff);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    z-index: 9999;
     box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 14px 24px rgba(13, 0, 83, 0.24);
}

#auth input {
    width: 50%;
    padding: 12px;
    margin: 8px 0;
    border: none;
    border-radius: 5px;
    background: linear-gradient(90deg,#017d0c,#10eb24);
    color: white;
    font-size: 16px;
    text-align: center;
}

#auth input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

#auth button {
    width: 50%;
    padding: 14px;
    margin-top: 12px;
    font-size: 16px;
    color: white;
    background: linear-gradient(90deg,#017d0c,#10eb24);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

#auth button:hover {
    background: linear-gradient(90deg,#03610b,#0ac71a);
}

#lobby {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    padding: 20px;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgb(39, 85, 253), #00b7ff);
        box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 14px 24px rgba(13, 0, 83, 0.24);
    text-align: center;
    z-index: 9999;

}

#lobby h2 {
    margin-bottom: 15px;
    font-size: 24px;
}

#lobby input {
    padding: 12px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(90deg,#017d0c,#10eb24);
    color: white;
    font-size: 16px;
}

#lobby input::placeholder {
  color: white;
}

#lobby button {
    padding: 12px;
    font-size: 16px;
    color: white;
     background: linear-gradient(90deg,#017d0c,#10eb24);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

#lobby button:hover {
       background: linear-gradient(90deg,#025209,#089914);
}

.world-list {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    width: 100%;
    display: flex
;
    flex-direction: row;
    gap: 10px;
    max-height: 200px;
    overflow-y: auto;
    flex-wrap: wrap;
}

.world-list li {
    display: flex;
    justify-content: center;
}

.world-list button {
    width: 100%;
    padding: 10px;
    background: linear-gradient(145deg, #ffb347, #ffcc33);
    color: #2e1b00;
    font-weight: bold;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.world-list button:hover {
    transform: scale(1.05);
    background: linear-gradient(145deg, #ffcc33, #ffb347);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}


#inventory {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0px; /* גובה התחלתי */
    overflow-y: auto;
    background:linear-gradient(to bottom, rgb(39, 85, 253), #00b7ff);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.4);
    border-top: 3px solid #20cd00;
    border-radius: 15px 15px 0 0;
    padding: 10px;
    z-index: 10;
    transition: height 0.2s ease-in-out;
    display: none;
      max-height: 60vh;
scrollbar-color: #1ea91edb #0000;
  }
  

#game-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  margin: auto;
  background: #000000c7;
  }


#stations-container {
    position: absolute;
    left: 10px;
    bottom: 20px;
    width: 95%;
    background: rgba(255, 244, 190, 0.95);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
    z-index: 5;
}

  

  #shop {
    position: absolute;
    width: 80%;
    max-height: 70%;
    background: linear-gradient(to bottom, rgb(199 254 255), #e0f6ffb4);
    border: 3px solid #20cd00;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    padding: 20px;
    overflow-y: auto;
    z-index: 2000;
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

#shop h3 {
    margin-top: 0;
    font-size: 22px;
    text-align: center;
    color: #4e3a00;
    margin-bottom: 15px;
}

#inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 4px;
}

.inventory-item {
    background: linear-gradient(90deg, rgb(6, 128, 16), rgb(10, 209, 26));
    border: 2px solid #20cd00;
    border-radius: 12px;
    /* padding: 10px; */
    transition: all 0.2s ease-in-out;
    position: relative;
        text-align: center;
width: 76px;
    height: 76px;
}

.item-quantity {
    position: absolute;
    bottom: 1px;
    right: 1px;
    color: white;
    font-size: 13px;
    font-weight: bold;
    padding: 2px 6px;
    text-shadow: 0 0 10px #000000;
    border-radius: 6px;
    pointer-events: none;
    z-index: 2;
}

.inventory-item:hover .item-label{
    transform: scale(1.06);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
     display: block; /* הצגה רק כשריחוף */
}

.inventory-item img {
margin-top: 2px;
    height: 76px;
    width: 100%;
}

.inventory-item .item-label {
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    left: 0%;
    transform: translateX(-50%);
    white-space: nowrap;
    display: none;
    z-index: 1000;
}

#inventory-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 8px;
  }
  
  #inventory-controls button {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    background: #dadada;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
  }
  
  #inventory-controls button:hover {
    background: #ffffff;
  }
  
#shop-items{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap:12px;
}

.shop-item{
  position:relative;
  width:140px; height:140px;
  border-radius:16px;
  background-size:cover; background-position:center;
  box-shadow:0 8px 20px rgba(0,0,0,.30);
  overflow:hidden; cursor:pointer;
  border:2px solid rgba(255,255,255,.1);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.shop-item:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.38); }
.shop-item:active{ transform:translateY(0); filter:brightness(.95); }

.shop-item .veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.08));
  pointer-events: none;   /* 👈 זה החלק שחשוב */
}


.shop-item .thumb{
  position:absolute; left:50%; top:50%;
  width:68px; height:68px; transform:translate(-50%,-58%);
  image-rendering: pixelated;
}

.shop-item .name{
  position:absolute; left:10px; right:10px; bottom:34px;
  color:#fff; font-weight:700; font-size:13px;
  text-shadow:0 1px 0 #000, 0 0 6px rgba(0,0,0,.6);
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.shop-item .price{
  position:absolute; right:8px; top:8px;
  background:rgba(0,0,0,.6); color:#ffd54d;
  padding:4px 8px; border-radius:12px; font-weight:700; font-size:13px;
}
.shop-item {
  width: 120px;
  height: 120px;
  margin: 8px;
  border: 2px solid #20cd00;
  border-radius: 12px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition: transform 0.2s;
}

.shop-item:hover {
  transform: scale(1.08);
}
.shop-item-name {
  font-size: 14px;
}
.shop-item-price {
  font-size: 12px;
}




.selected-item {
    border: 3px solid #b10000;
    box-shadow: 0 0 10px #000000;
}

#hud {
    position: absolute;
    top: 0px;
    right: 0px;
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 1400;
}

#coin-display {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg,#017d0c,#10eb24);
    padding: 10px 10px;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    max-width: 130px;
    margin-top: 55%;
}

#coin-icon {
    width: 24px;
    height: 24px;
    margin-right: 6px;
}


#backToLobbyButton {
    cursor: pointer;
    font-size: 24px;
    background: linear-gradient(90deg,#017d0c,#10eb24);
    padding: 6px 10px;
    border-radius: 10px;
    transition: background 0.2s;
    width: 49px;
    border: none;
    margin: 4px;
    color: #fff;
    margin-left: 100px;
}

#chat-container {
    position: absolute;
    right: 0%;
    top: 0;
    height: 15%;
    width: 60%;
    background: linear-gradient(to bottom, rgb(39 85 253 / 94%), #00d0ffc2);
    border: 3px solid #20cd00;
    border-radius: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    padding: 12px;
    z-index: 999;

}
#chat-input-bar {
    position: absolute;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    z-index: 1000;
}


.equipped-item {
  border: 3px solid #005e14 !important; /* ירוק לדוגמה */
  box-shadow: 0 0 10px #00e676;
}



#chat-box {
    flex: 1;
  overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 8px;
    font-family: 'Arial';
    font-size: 15px;
    color: #ffffff;
    scrollbar-width: thin;
    height: 100%;
scrollbar-color: #1ea91edb #0000;
}



#chat-header {
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
    background: linear-gradient(to bottom, #fdfdfd, #d3d3d3);
    padding: 10px;
    font-weight: bold;
    color: #3e2d00;
    cursor: move;
    border-radius: 10px 10px 0 0;
    text-align: center;
    font-size: 1px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}


#chat-messages {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 8px;
    scrollbar-width: thin;
}

#chat-controls {
    display: flex;
    gap: 6px;
}

#chat-input {
    flex: 1;
    border-radius: 10px;
    border: 2px solid #20cd00;
    background: linear-gradient(90deg, rgb(1, 125, 12), rgb(16, 235, 36));
    font-size: 14px;
      box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 14px 24px rgba(13, 0, 83, 0.24);
  backdrop-filter: blur(3px);
}
#chat-input::placeholder {
    color: #ffffff;
}



#clear-chat-button {
    padding: 6px 6px;
    border-radius: 10px;
    background: linear-gradient(90deg,#017d0c,#10eb24);
    border: 2px solid #20cd00;
    color: #ffffff;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}


#clear-chat-button:hover {
    background: #00e658;
}


#drop-modal button {
    padding: 8px 14px;
    margin: 6px 5px 0;
    font-size: 14px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
  }
  
  #confirm-drop {
    background-color: #00aeff;
    color: white;
  }
  
  #confirm-drop:hover {
    background-color: #005cd4;
  }
  
  #cancel-drop {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
  }
  
  #cancel-drop:hover {
    background-color: #d6d6d6;
  }
  
  /* ✅ דאג שגם ה-modal עצמו יהיה ממורכז ובולט */
#drop-modal {
  background: linear-gradient(to bottom, rgb(39, 85, 253), #00b7ff);
  border: 2px solid #0ccd00;
  color: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.35),
    inset 0 0 12px rgba(255, 255, 255, 0.3);
  font-family: "Segoe UI", Arial, sans-serif;
  text-align: center;
  width: 280px;
  padding: 20px 24px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  animation: dropModalPop 0.25s ease-out;
}

/* כותרת */
#drop-modal h3 {
  font-size: 20px;
  margin: 0 0 10px 0;
  color: #0077cc;
  text-shadow: 0 0 6px rgba(0, 128, 255, 0.25);
}

/* טקסט תיאור */
#drop-modal p {
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 12px;
  font-size: bold;
}

/* שדה מספר */
#drop-amount {
  width: 80px;
  padding: 8px;
  border: 2px solid #00baff;
  border-radius: 8px;
  background: #ffffffb0;
  color: #003344;
  font-weight: bold;
  text-align: center;
  outline: none;
  transition: all 0.25s ease;
}

#drop-amount:focus {
  border-color: #20cd00;
  box-shadow: 0 0 10px rgba(32, 205, 0, 0.4);
}

/* כפתורים */
#drop-modal button {
  border: none;
  border-radius: 10px;
  font-weight: bold;
  font-size: 14px;
  margin: 6px;
  padding: 10px 18px;
  cursor: pointer;
  color: #fff;
  transition: all 0.25s ease-in-out;
}

#confirm-drop {
  background: linear-gradient(90deg, #008a2c, #00e632);
  box-shadow: 0 0 10px rgba(0, 255, 100, 0.4);
}
#confirm-drop:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0, 255, 100, 0.6);
}

#cancel-drop {
  background: linear-gradient(90deg, #d60000, #ff4545);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
}
#cancel-drop:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
}

/* אנימציה נעימה */
@keyframes dropModalPop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}


  @keyframes slideUpFade {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .inventory-show {
    animation: slideUpFade 0.5s ease-out forwards;
    display: block !important;
}

  
#info-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

#info-content {
    background: linear-gradient(145deg,#fffbe0,#ffe082);
    color: #333;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    min-width: 300px;
    text-align: center;
    animation: fadeIn 0.3s ease-in-out;
}

#info-content h3 {
    margin-top: 0;
    color: #b36b00;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
    background-color: #ffffff79;
      padding: 20px;
  border-radius: 10px;
  color: white;
  text-align: center;
  box-shadow: 0 0 10px black;
}

.modal-content input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
}

.modal-content h3 {
color: #000000;
}

.modal-buttons {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.modal-buttons button {
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
}

.modal-buttons button:hover {
  background-color: #0056b3;
}
#exit-menu {
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 14px 24px rgba(13, 0, 83, 0.24);
  backdrop-filter: blur(3px);
  }
  #exit-menu button {
    background: linear-gradient(90deg,#017d0c,#10eb24);
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 5px;
    transition: background 0.2s;
    cursor: pointer;
    width: 70%;
    align-self: center;
  }

  #exit-menu button:hover {
    background:linear-gradient(90deg,#025509,#05a512);
  }


#menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.61); /* שקיפות כהה */
  z-index: 998; /* מתחת ל־#exit-menu (שיש לו z-index: 999) */
  display: none;
}
p#exit-world-name {
    color: #ffffff;
    font-size: 18px;
    background: linear-gradient(rgb(39, 85, 253), rgb(0, 183, 255));
    border: 2px solid #ffffff;
}
/* --- Player Info modal fixes --- */
#player-info-modal {
  left: 0;           /* היה -450% */
  top: 0;
  position: fixed;   /* לוודא */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; 
  height: 100%;

}

#player-info-content {
  max-width: min(560px, 92%);
  max-height: 70vh;
  overflow: auto;            /* גלילה אם ארוך */
  text-align: left;          /* טקסט מיושר לשמאל */
  word-break: break-word;    /* שבירת מחרוזות ארוכות */
  overflow-wrap: anywhere;   /* שבירה גם בלי רווחים */
    font-size: 14px;
  line-height: 1.25;
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 14px 24px rgba(13, 0, 83, 0.24);
  backdrop-filter: blur(3px);
}
shop-modal{
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 14px 24px rgba(13, 0, 83, 0.24);
  backdrop-filter: blur(3px);
}

#player-info-content #my-worlds-filter::placeholder {
color: #ffffff;
}

#player-info-content.other-profile {
  font-size: 14px;
}

#player-info-content.my-profile {
  font-size: 14px;
  transform: scale(1.75);
  transform-origin: top left;
  scrollbar-color:#1ea91edb #0000;
}

#bm-list {

  scrollbar-color:#1ea91edb #0000;
}


#my-worlds-in-modal li{
color: #ffffff;
}

/* לוודא שגם ה־<p>ים בפנים נשברים יפה ושומרים ירידות שורה */
#player-info-content p,
#player-info-content pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin: 6px 0;
}

/* אופציונלי ליופי לתיבת ה-Equipped */
#player-info-content .equip-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(255,255,255,.06);
  padding: 8px 10px;
  border-radius: 8px;
}
.pinfobutton{
    background: linear-gradient(to bottom, rgb(255 98 98 / 60%), #ff0000b4);
    position: absolute;
    left: 1%;
    color: #fff;
    border-radius: 5px;
    border: 2px #9f0202 solid;
    top: 5px;
}

#player-info-modal {
  position: fixed;
  z-index: 1000;
  left: -450%;
 top: 0;
  width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: center;
}

#player-info-content {
  background: linear-gradient(to bottom, rgb(39, 85, 253), #00b7ff);
  color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  min-width: 300px;
  max-height:100%;
  position: relative;
  border: 2px solid  #01871ef0;
}

#player-info-close {
  position: absolute;
  top: 10px; right: 10px;
  cursor: pointer;
  font-size: 20px;
}
@media (max-width: 768px) {
  #auth, #lobby {
    width: 90%;
    padding: 15px;
  }

  #inventory {
    height: 180px;
    font-size: 14px;
  }

  #inventory-header {
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
  }

  #hud {
    flex-direction: column;
    gap: 5px;
    top: 10px;
    right: 10px;
  }

  #chat-container {
    width: 65%;
    height: 8%;
  }

  #shop {
    width: 90%;
    right: 5%;
  }
}

/* ===== Inventory toolbar (outside the drawer) ===== */
#inventory-toolbar{
  position: fixed;            /* במקום absolute */
  left: 50%;
transform: translateX(-50%);
  top: 12px;                  /* ערך ברירת מחדל, יתעדכן ב-JS */
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  
  background: linear-gradient(to bottom, rgb(39 86 253), #00b5fffa);
  border: 2px solid #20cd00;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  z-index: 100;
  backdrop-filter: blur(6px);
  user-select: none;          /* לא לבחור טקסט בזמן גרירה */
  -webkit-user-select: none;
  touch-action: none;         /* מונע scroll בזמן גרירה בטאץ' */
}
#inventory-toolbar .inv-handle,
#inventory-toolbar .inv-resize{
  border:none;
  border-radius:8px;
  font-weight:700;
  cursor:grab;
  padding:6px 10px;
  background:#f1f1f1;
}

#inventory-toolbar .inv-handle:active,
#inventory-toolbar .inv-resize:active{ cursor:grabbing; }

#inventory-toolbar .inv-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

#inventory-toolbar .inv-actions button{
  border:none;
  border-radius:8px;
  background: linear-gradient(90deg, rgb(6, 128, 16), rgb(10, 209, 26));
  color:#ffffff;
  font-weight:800;
  cursor:pointer;
  font-size: 16px;
    padding: 10px;
}
#inventory-toolbar .inv-actions button:hover{   background: linear-gradient(90deg, rgb(1, 102, 9), rgb(8, 204, 24)); }

/* אופציונלי: מסתיר את #inventory-controls הישן אם נשאר */
#inventory-controls{ display:none !important; }
/* בלוק בסיס לכל קבוצת כפתורים */
.touch-block{
  position: fixed;
  z-index: 1300;           /* מעל ה-toolbar וה-inventory */
  display: flex;
  gap: 10px;               /* "אחד ליד השני" */
  pointer-events: none;    /* כדי שלא יחסום אלמנטים אחרים */
}

.touch-block button{
    pointer-events: auto;
    width: 56px;
    height: 56px;
    /* border-radius: 12px; */
    border: 2px solid #20cd00;
    background: linear-gradient(90deg,#017d0bd2,#10eb22d5);
    color: #fff;
    font-size: 29px;
}

/* ברירות מחדל — יתעדכן דינמית ע"י JS */
#touch-left  { left: 0%;  bottom: 20px;  }
#touch-right { right: 0%; bottom: 20px; }
#touch-zoom  { right: -100%;  bottom: 20px;  }  /* left נקבע ליד החנות ב-JS */
 #touch-left button,
#touch-right button,
#touch-zoom button {
  width: 11vw;
  height: 11vw;
  border-radius: 50%;
}

/* להציג רק במובייל (לשיקולך) */
@media (max-width: 1000px){
 #touch-left button,
#touch-right button,
#touch-zoom button {
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
}

}

#lobbytext{
  color: #000;
}

#door2-modal input {
    padding: 12px;
    margin: 2px 0;
    border: none;
    border-radius: 5px;
    background: linear-gradient(90deg,#017d0c,#10eb24);
    color: white;
    font-size: 16px;
    text-align: center;
}

#door2-modal input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

#trade-modal {
  pointer-events: none;        /* הבקראונד לא תופס קליקים */
}

#trade-modal > div {
  pointer-events: auto;        /* רק הקופסה עצמה כן */
}

/* תאים של החלפות */
.trade-slot {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
  border: 2px solid #cbd5e1;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.trade-slot:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* תמונת פריט */
.trade-slot img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  pointer-events: none;
}

/* כמות (אם יש) */
.trade-slot .item-amount {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 13px;
  font-weight: bold;
  color: #1e3a8a;
  background: rgba(255,255,255,0.7);
  padding: 2px 5px;
  border-radius: 6px;
}

/* מסגרת כשנבחר */
.trade-slot.selected {
  border-color: #3b82f6;
  box-shadow: 0 0 10px rgba(59,130,246,0.6);
}
#shop-modal{
  display: none;
}
.shop-tab {
  background: linear-gradient(90deg,#017d0c,#10eb24);
  border: 1px solid #20cd00;
  border-radius: 10px;
  padding: 6px 10px;
  color: #fff;
  cursor: pointer;
  transition: 0.15s;
}
.shop-tab.active {
  background: #0f6600;
  border-color: #148101;
}
.shop-item {
  background: linear-gradient(90deg,#017d0c,#10eb24);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  transition: transform 0.15s;
}
.shop-item:hover {
  transform: scale(1.05);
}
.shop-item img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}
.shop-item button {
  margin-top: 4px;
  background: #20cd00;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}

.bm-wrap {
  display: flex;
  gap: 12px;
  height: 100%;
}

.bm-side {
  width: 70px;
  background: linear-gradient(90deg,#017d0c,#10eb24);
  border-radius: 16px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bm-tab {
  background: transparent;
  border: 0;
  color: #cbd5f5;
  padding: 8px 4px;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.bm-tab-active {
  background: #ffffff;
  color: #0f172a;
}

.bm-content {
  flex: 1;
  background: linear-gradient(90deg,#017d0c,#10eb24);
  border-radius: 14px;
  padding: 6px;
}

.bm-list {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bm-card {
  display: flex;
  gap: 6px;
  background: linear-gradient(to bottom, rgb(39 86 253), #00b5fffa);
  border-radius: 12px;
  border: 2px solid #20cd00;
  padding: 6px 8px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.bm-left {
  display: flex;
  gap: 6px;
  align-items: center;
}

.bm-icon {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

.bm-info {
  display: flex;
  flex-direction: column;
}

.bm-name {
  font-weight: 700;
  color: #ffffff;
}

.bm-seller {
  font-size: 11px;
  opacity: .55;
}

.bm-right {
  display: flex;
  gap: 4px;
  align-items: center;
}

.bm-price {
  font-weight: 600;
  white-space: nowrap;
}

.bm-input {
  width: 70px;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  padding: 3px 4px;
  font-size: 12px;
}

.bm-buy, .bm-sell {
  background: linear-gradient(90deg, rgb(1, 125, 12), rgb(16, 235, 36));
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 4px 10px;
  font-weight: 600;
  cursor: pointer;
}

/* ==== DOOR SETTINGS PANEL ==== */
.panel {
  background: linear-gradient(to bottom, rgb(39 86 253), #00b5fffa);
  color: #ffffff;
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  font-family: "Chakra Petch", sans-serif;
}

.panel h3 {
  margin-top: 0;
  font-size: 22px;
  color: #ffffff;
}

.panel .tip {
  margin: 6px 0 14px;
  font-size: 13px;
  opacity: 0.7;
}

/* Input fields */
.panel label {
  display: block;
  margin: 8px 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.panel input[type="text"],
.panel input[type="password"],
.panel input[type="number"],
.panel input:not([type="checkbox"]) {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-top: 4px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffffd9;
  font-size: 14px;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.panel input:focus {
  border-color: #37e0ff;
  box-shadow: 0 0 6px rgba(55, 224, 255, 0.5);
}

/* Checkboxes */
.panel .check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-weight: 500;
}

.panel input[type="checkbox"] {
  transform: scale(1.2);
  accent-color: #007aff;
}

/* Buttons */
.door-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.btn {
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn.primary {
  background: linear-gradient(140deg, #37e0ff, #7cf9ff);
  color: #002632;
  box-shadow: 0 8px 20px rgba(55, 224, 255, 0.4);
}

.btn.cancel {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

#craft-modal #craft-search::placeholder{
  color: #fff;
}

#craft-modal {
  scrollbar-color: #1ea91edb #0000;
}

/* ===== TRADE MODAL ===== */

#trade-modal {
  position: fixed;
  inset: 0;
  display: none;              /* נפתח ע"י JS */
  align-items: center;
  justify-content: center;
  z-index: 4000;
  background: radial-gradient(circle at top, rgba(62, 126, 255, 0.45), transparent 55%),
              rgba(0, 0, 0, 0.6);
  font-family: "Arial", sans-serif;
}

.trade-modal-box {
  width: 840px;
  max-width: 95vw;
  background: linear-gradient(to bottom, rgb(39, 85, 253), #00b7ff);
  border-radius: 16px;
  border: 2px solid #20cd00;
  padding: 16px 18px 18px;
  color: #f9fafb;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 14px 24px rgba(13, 0, 83, 0.24);
}

.trade-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.trade-modal-header h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 #000;
}

.trade-close-btn {
  background: none;
  border: none;
  color: #e5e7eb;
  font-size: 20px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 8px;
  transition: background 0.15s ease, transform 0.1s ease;
}

.trade-close-btn:hover {
  background: rgba(15, 23, 42, 0.4);
  transform: translateY(-1px);
}

/* columns */

.trade-modal-columns {
  display: flex;
  gap: 12px;
}

.trade-column {
  flex: 1;
  background: radial-gradient(circle at top left, rgba(96, 165, 250, 0.25), transparent 55%),
              rgba(15, 23, 42, 0.82);
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  padding: 10px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.55);
}

.trade-column-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
}

.trade-ready-indicator {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #ef4444; /* ברירת מחדל: לא מוכן */
}

/* גריד סלוטים */

.trade-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.trade-slot {
  position: relative;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(6, 148, 73, 0.9), rgba(34, 197, 94, 0.95));
  border: 2px solid #20cd00;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.trade-slot.empty {
  opacity: 0.25;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(30, 64, 175, 0.7));
  border-style: dashed;
}

.trade-slot img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}

.trade-slot-amount {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 4px #000;
}

/* middle column */

.trade-middle {
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
}

#trade-status {
  text-align: center;
  color: #e5e7eb;
  text-shadow: 0 1px 0 #000;
}

/* buttons */

.btn-trade-primary,
.btn-trade-danger {
  min-width: 96px;
  padding: 7px 14px;
  border: none;
  border-radius: 9px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
}

.btn-trade-primary {
  background: linear-gradient(90deg, #017d0c, #10eb24);
  color: #f9fafb;
  border: 1px solid #22c55e;
}

.btn-trade-danger {
  background: linear-gradient(90deg, #b91c1c, #ef4444);
  color: #fef2f2;
  border: 1px solid rgba(248, 113, 113, 0.9);
}

.btn-trade-primary:hover,
.btn-trade-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px rgba(0, 0, 0, 0.55);
  filter: brightness(1.05);
}

.btn-trade-primary:active,
.btn-trade-danger:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  filter: brightness(0.96);
}

/* trade chat + inventory strip */

.trade-chat-wrap {
  margin-top: 14px;
}

.trade-chat-label {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 4px;
}

#trade-chat-box {
  background: rgba(15, 23, 42, 0.92);
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  height: 90px;
  padding: 6px;
  font-size: 13px;
  color: #e5e7eb;
  overflow-y: auto;
}

.trade-chat-input-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

#trade-chat-input {
  flex: 1;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  padding: 6px 8px;
  font-size: 13px;
  background: rgba(15, 23, 42, 0.8);
  color: #e5e7eb;
}

#trade-chat-input::placeholder {
  color: rgba(148, 163, 184, 0.9);
}

#trade-chat-send {
  border-radius: 8px;
  border: none;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  background: linear-gradient(90deg, #3b82f6, #22c55e);
  color: #f9fafb;
  font-weight: 600;
}

/* inventory strip inside trade */

.trade-inventory-wrap {
  margin-top: 16px;
}

.trade-inventory-label {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 4px;
}

#trade-inventory {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-height: 140px;
  overflow: auto;
  padding: 6px;
  background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.25), transparent 55%),
              rgba(15, 23, 42, 0.85);
  border-radius: 10px;
  border: 1px solid rgba(129, 140, 248, 0.7);
}

/* אייטמים באינבנטורי טרייד – אנחנו נשענים על inventory-item הקיים */
#trade-inventory .inventory-item {
  width: 60px;
  height: 60px;
  border-radius: 10px;
}

/* ===== TRADE REQUESTS PANEL ===== */

#trade-requests-panel {
  position: fixed;
  right: 14px;
  top: 90px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 260px;
}

.trade-request-card {
  background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.35), transparent 55%),
              rgba(15, 23, 42, 0.96);
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #e2e8f0;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.65);
}

.trade-request-title {
  font-weight: 600;
  font-size: 13px;
  text-shadow: 0 1px 0 #000;
}

.trade-request-sub {
  font-size: 11px;
  opacity: 0.8;
}

.trade-request-buttons {
  margin-top: 4px;
  display: flex;
  gap: 6px;
}

.trade-request-accept,
.trade-request-decline {
  border: none;
  cursor: pointer;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
  padding: 4px 0;
}

.trade-request-accept {
  flex: 1;
  background: linear-gradient(90deg, #017d0c, #10eb24);
  color: #f9fafb;
  border: 1px solid #22c55e;
}

.trade-request-decline {
  width: 34px;
  background: linear-gradient(145deg, #b91c1c, #ef4444);
  color: #fee2e2;
  border: 1px solid rgba(248, 113, 113, 0.9);
}

.trade-request-accept:hover,
.trade-request-decline:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.trade-request-accept:active,
.trade-request-decline:active {
  filter: brightness(0.95);
  transform: translateY(0);
}

.trade-request-timer {
  margin-top: 2px;
  font-size: 10px;
  opacity: 0.55;
  text-align: right;
}

.blast-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(30, 64, 175, 0.55), transparent 70%),
              rgba(0, 0, 0, 0.55);
  font-family: "Arial", sans-serif;
}

.blast-box {
  width: 420px;
  max-width: 92vw;
  background: linear-gradient(to bottom, rgb(39, 85, 253), #00b7ff);
  border-radius: 16px;
  border: 2px solid #20cd00;
  color: #fff;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 12px 22px rgba(13, 0, 83, 0.25);
}

/* Header */
.blast-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.blast-header h3 {
  margin: 0;
  font-size: 19px;
  text-shadow: 0 1px 0 #000;
}

.blast-icon {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
}

/* Body */
.blast-body {
  padding: 18px 20px 20px;
}

.blast-desc {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #e5e7eb;
}

.blast-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: rgba(15, 23, 42, 0.85);
  color: #e5e7eb;
}

.blast-input::placeholder {
  color: rgba(148, 163, 184, 0.9);
}

.blast-error {
  margin-top: 8px;
  color: #ff4d4d;
  font-size: 13px;
}

/* Buttons */
.blast-buttons {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.blast-btn {
  padding: 8px 16px;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.1s ease, filter 0.1s ease;
}

.blast-btn-cancel {
  background: linear-gradient(145deg, #374151, #1f2937);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.7);
}

.blast-btn-confirm {
  background: linear-gradient(90deg, #017d0c, #10eb24);
  border: 1px solid #22c55e;
  color: #fff;
}

.blast-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.blast-btn:active {
  transform: translateY(0);
  filter: brightness(0.92);
}
.blast-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 4800;

  /* אותו רקע אחיד כמו שאר המודאלים במשחק */
  background: radial-gradient(circle at top, rgba(30, 64, 175, 0.50), transparent 70%),
              rgba(0, 0, 0, 0.55);
}

/* אפשר לעשות פייד יפה */
.blast-overlay.show {
  animation: fadeInOverlay 0.22s ease forwards;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lock-modal {
  position: fixed;
  inset: 0;
  display: none;              /* JS: display = "flex" כשפותחים */
  align-items: center;
  justify-content: center;
  z-index: 5000;
  background: radial-gradient(circle at top, rgba(30, 64, 175, 0.55), transparent 70%),
              rgba(0, 0, 0, 0.7);
  font-family: "Arial", sans-serif;
  color: #f9fafb;
}

.lock-box {
  min-width: 320px;
  max-width: 420px;
  background: linear-gradient(to bottom, rgb(39, 85, 253), #00b7ff);
  border-radius: 16px;
  border: 2px solid #20cd00;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 12px 22px rgba(13, 0, 83, 0.25);
        position: absolute;
    top: 30%;
    left: 30%;
}

/* header */

.lock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.lock-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lock-icon {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}

.lock-title {
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 0 #000;
}

.lock-subtitle {
  font-size: 11px;
  opacity: 0.9;
}

.lock-close-btn {
  background: none;
  border: none;
  color: #e5e7eb;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
  transition: background 0.15s ease, transform 0.08s ease;
}

.lock-close-btn:hover {
  background: rgba(15, 23, 42, 0.5);
  transform: translateY(-1px);
}

/* body */

.lock-body {
  padding: 10px 14px 12px;
}

/* row להוספת גישה */

.lock-add-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}

.lock-input,
.lock-select {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.85);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  font-size: 13px;
  padding: 5px 8px;
}

.lock-input {
  flex: 1.2;
}

.lock-select {
  flex: 1;
}

.lock-input::placeholder {
  color: rgba(148, 163, 184, 0.95);
}

/* כפתורים */

.lock-btn {
  border-radius: 9px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease, filter 0.1s ease;
}

.lock-btn-add {
  background: linear-gradient(90deg, #017d0c, #10eb24);
  border: 1px solid #22c55e;
  color: #f9fafb;
  white-space: nowrap;
}

.lock-btn-close {
  background: linear-gradient(145deg, #374151, #1f2937);
  border: 1px solid rgba(148, 163, 184, 0.8);
  color: #e5e7eb;
  min-width: 90px;
}

.lock-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.lock-btn:active {
  transform: translateY(0);
  filter: brightness(0.92);
}

/* רשימת גישה */

.lock-list-wrap {
  margin-top: 4px;
}

.lock-list-label {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.lock-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 140px;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.85);
  font-size: 13px;
}

.lock-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 4px;
  border-bottom: 1px solid rgba(31, 41, 55, 0.7);
}

.lock-list li:last-child {
  border-bottom: none;
}

.lock-list-name {
  font-weight: 600;
}

.lock-list-role {
  font-size: 11px;
  opacity: 0.8;
}

/* footer */

.lock-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
/* ===== Megaphone Modal (Blue-Green theme) ===== */
#megaphone-modal.mega-modal{
  position: fixed;
  inset: 0;
  display: none;                 /* נפתח ע"י JS */
  align-items: center;
  justify-content: center;
  z-index: 3000;

  background:
    radial-gradient(circle at top, rgba(39,85,253,0.35), transparent 55%),
    radial-gradient(circle at bottom, rgba(32,205,0,0.18), transparent 60%),
    rgba(0,0,0,0.60);
  backdrop-filter: blur(1px);
}

.mega-card{
  width: 470px;
  max-width: 94vw;
  border-radius: 16px;
  overflow: hidden;
  color: #f8fafc;

  background:
    linear-gradient(to bottom, rgba(39,85,253,0.98), rgba(0,183,255,0.95));
  border: 2px solid #20cd00;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 14px 24px rgba(13,0,83,0.22);
  animation: megaPop .18s ease-out;
}

@keyframes megaPop{
  from{ transform: translateY(8px) scale(.97); opacity:0; }
  to  { transform: translateY(0)  scale(1);   opacity:1; }
}

.mega-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.15);
}

.mega-title{
  display: flex;
  align-items: center;
  gap: 10px;
}

.mega-icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;

  background: linear-gradient(90deg,#017d0c,#10eb24);
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.mega-h{
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 #000;
}

.mega-sub{
  font-size: 12px;
  opacity: .9;
}

.mega-remaining{
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  color: #052b12;

  background: linear-gradient(90deg,#20cd00,#7CFF4F);
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

.mega-body{
  padding: 14px;
}

.mega-text{
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.15);
  outline: none;
  color: #ffffff;

  background:
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 6px 16px rgba(0,0,0,0.25);
  font-size: 14px;
}

.mega-text::placeholder{
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}

.mega-text:focus{
  border-color: rgba(32,205,0,0.9);
  box-shadow: 0 0 0 3px rgba(32,205,0,0.25);
}

.mega-actions{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.mega-btn{
  padding: 8px 12px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.mega-btn:active{ transform: translateY(1px) scale(.98); }

.mega-btn-cancel{
  background: rgba(15,23,42,0.9);
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,0.12);
}

.mega-btn-cancel:hover{
  filter: brightness(1.08);
}

.mega-btn-send{
  background: linear-gradient(90deg,#017d0c,#10eb24);
  color: #ffffff;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 6px 14px rgba(0,255,100,0.35);
}

.mega-btn-send:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 20px rgba(0,255,100,0.45);
}
.mini-quests-btn {
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 2px solid #0aff4d;
  background: linear-gradient(90deg, rgb(6, 128, 16), rgb(10, 209, 26));
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.45);
}

.mini-quests-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.mini-quests-btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}
#mini-more {
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 2px solid #0aff4d;
  background: linear-gradient(90deg, rgb(6, 128, 16), rgb(10, 209, 26));
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.45);
}

#mini-more:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

#mini-more:active {
  transform: translateY(0);
  filter: brightness(0.95);
}