* { box-sizing: border-box; }
:root {
--glass-bg: rgba(15, 25, 50, .5);
--glass-brd: rgba(255, 255, 255, .6);
--text: #eaf0ff;
--accent: #4f80ff;
}
html, body { height: 100%; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: url('/assets/sea.jpg') 50% 0 / cover no-repeat fixed; }
html, body, .app { overscroll-behavior-y: contain; }

.app { min-height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; }

/* Glass helpers */
.glass { background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: 14px; }
.btn { background: var(--glass-bg); border: 1px solid var(--glass-brd); color: var(--text); padding: 10px 14px; border-radius: 12px; cursor: pointer; }
.btn.primary { background: linear-gradient(180deg, #5a8bff, #3b6bff); border-color: transparent; }
.btn.insufficient-resources {
  opacity: 0.5;
  cursor: not-allowed;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  border-color: rgba(255, 255, 255, 0.025);
}
.btn.success { padding: 14px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  border: 2px solid rgba(255, 255, 255, 0.05);
  color: white;
  cursor: pointer;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow:
    0 6px 20px rgba(16, 185, 129, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  min-width: 70px; }
.btn:active { transform: translateY(1px); }

/* Top bar */
.topbar { display: grid; width: 100%; position: fixed; grid-template-columns: auto 1fr; gap: 12px; padding: 12px; }

/* Keep topbar visible */
.topbar { position: fixed; top: calc(env(safe-area-inset-top) + 8px); z-index: 20; }
.stat { padding: 12px; display: grid; gap: 8px; width: max-content; max-width: 260px; position: relative; }
.stat .progress { height: 12px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; position: relative; }
.stat .bar { height: 100%; background: linear-gradient(90deg, #4f80ff, #67d1ff); }
.stat .percent { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.35); pointer-events: none; }
.currency { padding: 12px; display: grid; grid-auto-flow: row; justify-content: start; gap: 8px; align-items: start; width: max-content; }
.currency .coin { display: grid; grid-auto-flow: column; gap: 6px; align-items: center; }
.stat .label .icon { margin-right: 6px; }

.stat .progress { width: 200px; }

@media (max-width: 640px) {
.stat .progress { width: 160px; }
}

/* Profile stripe */
.profile { margin: 0 12px; padding: 12px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; gap: 12px; align-items: center; }
/* Keep profile visible under topbar */
.profile { width: 93%;
  left: 0;
  right: 0; position: fixed; top: calc(env(safe-area-inset-top) + var(--topbar-height, 0px) + 8px); z-index: 15; }
.profile #avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--glass-brd); background: rgba(255,255,255,.05); grid-column: 1; grid-row: 1; }
.profile .info { grid-column: 1; grid-row: 2; text-align: center; }
.profile .actions { grid-column: 3; grid-row: 1 / span 2; display: grid; grid-template-columns: auto auto; grid-auto-rows: auto; gap: 8px; justify-items: end; align-content: center; }
.profile .login { font-weight: 200; }
.profile .actions .btn { margin: 0; }
.profile .actions .btn:nth-child(1) { grid-column: 1 / -1; justify-self: center; }
.profile .actions .btn:nth-child(2) { grid-column: 1; justify-self: end; }
.profile .actions .btn:nth-child(3) { grid-column: 2; justify-self: start; }
.profile .actions .btn:nth-child(4) { grid-column: 1 / -1; justify-self: center; margin-top: 8px; }
.profile .hunger-container { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: center; align-items: center; gap: 8px; }

/* Hunger Bar Styles */
.hunger-bar {
  height: 20px;
  width: 200px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.hunger-fill {
  height: 100%;
  width: 0%;
  background: #ef4444;
  transition: width 0.5s ease, background 0.5s ease;
  border-radius: 999px;
}

.hunger-percent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  pointer-events: none;
}

/* Stage */
.stage { position: relative; display: grid; place-items: center; padding: 12px; min-height: min(60vh, 600px); }
.stage .island { position: fixed; left: 50%; top: 55%; transform: translate(-50%, -50%); width: min(85vw, 700px); height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); z-index: 5; pointer-events: none; }

/* Bottom bar */
.bottombar { margin: 0 12px 12px; padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 100%; overflow: hidden; position: sticky; bottom: calc(env(safe-area-inset-bottom) + 8px); z-index: 10; }

/* Ensure nav buttons can shrink within grid cells */
.bottombar .navbtn { min-width: 0; padding-inline: 8px; }

/* Modal */
.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.9); z-index: 1000; }
.modal.hidden { display: none; }

/* Wallet modal - higher z-index to appear above Ton Connect UI */
#modal-wallet { z-index: 90; }
.modal-card { width: min(92vw, 420px); padding: 16px; border-radius: 14px; border: 1px solid var(--glass-brd); background: rgba(0,0,0,.9); display: grid; gap: 12px; position: relative; }
.modal-card .close { position: absolute; top: 10px; right: 10px; }
.modal-card .close::before { content: '×'; font-size: 18px; }

/* Success notification modal - highest z-index */
#success-modal { z-index: 10000; }

/* Success notification modal */
.success-notification { text-align: center; }
.success-notification .success-icon { font-size: 48px; margin-bottom: 16px; }
.success-notification h2 { margin: 0 0 8px 0; color: #10b981; }
.success-notification p { margin: 0 0 16px 0; color: rgba(255,255,255,.8); line-height: 1.4; }
.success-notification .btn { justify-self: center; min-width: 120px; }

/* Bottom notification */
.bottom-notification {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 25, 50, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  color: white;
  font-size: 14px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bottom-notification:not(.hidden) {
  opacity: 1;
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-card input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-brd); color: var(--text); background: rgba(255,255,255,.06); }
.modal-card .actions { display: grid; grid-auto-flow: column; gap: 10px; justify-content: end; }

/* Garden Grid */
.garden-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 8px;
  padding: 16px;
  max-height: 85vh;
  overflow-y: auto;
}

.garden-plot {
  position: relative;
  aspect-ratio: 1;
  
  background: rgba(255,255,255,.05) url('/assets/garden/unlocked-plot.png') center/cover;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}

.garden-plot:hover {
  background: rgba(255,255,255,.1) url('/assets/garden/unlocked-plot.png') center/cover;
  transform: scale(1.02);
}

.garden-plot.locked {
  background: rgba(0,0,0,.15) url('/assets/garden/locked-plot.png') center/cover;
  opacity: 0.5;
  cursor: not-allowed;
}

.garden-plot.locked:hover {
  background: rgba(0,0,0,.15) url('/assets/garden/locked-plot.png') center/cover;
  transform: none;
}

.garden-plot.planted {
  background: rgba(34, 197, 94, 0.1) url('/assets/garden/planted-plot.png') center/cover;
  border-color: #22c55e;
  cursor: not-allowed;
}

.garden-plot.ready::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  pointer-events: none;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cdefs%3E%3Cfilter%20id='blur'%20x='-50%25'%20y='-50%25'%20width='200%25'%20height='200%25'%3E%3CfeGaussianBlur%20in='SourceGraphic'%20stdDeviation='1'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle%20cx='50'%20cy='50'%20r='48'%20fill='none'%20stroke='%2322c55e'%20stroke-width='4'%20stroke-dasharray='10%2030'%20stroke-linecap='round'%20filter='url(%23blur)'%3E%3Canimate%20attributeName='stroke-dashoffset'%20from='0'%20to='40'%20dur='1.5s'%20repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}



.garden-plot img { 
  width: 80%; 
  height: 80%; 
  object-fit: contain; 
  border-radius: 4px;
}

.garden-plot .plant-icon { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  font-size: 24px; 
  color: rgba(255,255,255,.8);
}

.garden-plot .plant-plus { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  font-size: 32px; 
  color: rgba(255,255,255,.6); 
  pointer-events: none;
}

.garden-plot .unlock-btn { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  padding: 4px 8px; 
  font-size: 12px; 
  background: var(--accent); 
  border: none; 
  border-radius: 4px; 
  color: white; 
  cursor: pointer;
}

.garden-plot .timer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.4);
  color: white;
  font-size: 10px;
  text-align: center;
  padding: 2px;
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 640px) {
.topbar { grid-template-columns: auto 1fr; }
.currency { justify-content: end; }
.bottombar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.garden-grid { gap: 4px; padding: 8px; }
}

/* Extra small phones: split bottom bar into 2 rows */
@media (max-width: 400px) {
.bottombar { grid-template-columns: repeat(3, 1fr); }
}

.navbtn { display: grid; grid-template-rows: auto auto; justify-items: center; align-content: center; gap: 6px; padding-block: 8px; }
.navbtn img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.navbtn span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
.navbtn img { width: 20px; height: 20px; }
.navbtn span { font-size: 11px; }
} 

/* Phone sizes: very small 360px */
@media (max-width: 360px) {
.navbtn { gap: 4px; }
.navbtn img { width: 18px; height: 18px; }
.navbtn span { font-size: 10px; }
}

/* Small phones 361400px */
@media (min-width: 361px) and (max-width: 400px) {
.navbtn { gap: 5px; }
.navbtn img { width: 20px; height: 20px; }
.navbtn span { font-size: 11px; }
}

/* Island markers */
.markers { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.marker { position: fixed; left: 50%; top: 55%; width: 14px; height: 14px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.125), 0 6px 16px rgba(0,0,0,.2); transform: translate(-50%, -50%); pointer-events: auto; }
.marker::before, .marker::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(16,185,129,.25); animation: pulse 2.4s ease-out infinite; }
.marker::after { inset: -12px; animation-delay: .8s; opacity: .35; }

/* Aboriginal Boat */
.aboriginal-boat {
  position: fixed;
  left: 80%;
  top: 71%;
  transform: translate(-50%, -50%);
  z-index: 7;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.5s ease;
}

.aboriginal-boat.hidden {
  opacity: 0;
  pointer-events: none;
}

.aboriginal-boat img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  animation: boat-wave 3s ease-in-out infinite, boat-glow 2s ease-in-out infinite alternate;
}

/* Boat Description Popup */
.boat-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.dont-show-again {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}

.dont-show-again input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* Aboriginal Boat Modal */
.aboriginal-boat-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.boat-description {
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 16px;
}

.boat-dishes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
  max-height: 85vh;
  overflow-y: auto;
}

.boat-seafood-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
  max-height: 85vh;
  overflow-y: auto;
  grid-auto-rows: min-content;
}

.sell-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.sell-item-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
}

.sell-item-info {
  text-align: center;
  width: 100%;
}

.sell-item-name {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: bold;
}

.sell-item-price {
  margin-bottom: 16px;
  color: #666;
}

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
}

.quantity-selector input {
  width: 60px;
  text-align: center;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.quantity-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

.total-price {
  margin: 16px 0;
  font-size: 16px;
  font-weight: bold;
}

.full-width {
  width: 100%;
}

.boat-dish-slot {
  background: rgba(34, 34, 34, 0.8);
  border: 3px solid rgba(239, 68, 68, 0.5); /* Default red border */
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  transition: all 0.2s ease;
}

.boat-dish-slot.available {
  border-color: rgba(34, 197, 94, 0.5); /* Green border for available */
}

.boat-dish-slot.unavailable {
  border-color: rgba(239, 68, 68, 0.5); /* Red border for unavailable */
}

.boat-dish-slot img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 8px;
}

.dish-name {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  margin: 0;
}

.dish-price {
  font-size: 14px;
  font-weight: 500;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 2px;
}

.dish-price img {
  width: 20px;
  height: 20px;
}

.sell-btn {
  padding: 6px 12px;
  font-size: 11px;
  min-width: 60px;
}

/* Responsive for boat modal */
@media (max-width: 640px) {
  .boat-dishes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .dish-price img {
    width: 20px;
    height: 20px;
  }
  
  .boat-dish-slot {
    padding: 8px;
  }

  .boat-dish-slot > img {
    width: 70px;
    height: 70px;
  }
  
}

@keyframes boat-wave {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(1deg); }
  50% { transform: translateY(0px) rotate(0deg); }
  75% { transform: translateY(5px) rotate(-1deg); }
}

@keyframes boat-glow {
  0% { filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5)); }
  100% { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8)); }
}

.marker .label { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); background: rgba(15,25,50,.6); border: 1px solid rgba(255,255,255,.2); color: #eaf0ff; padding: 4px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap; }

/* Positions relative to island center */
.marker.garden { transform: translate(calc(-50% + 33px), calc(-50% + 25px)); animation-delay: .0s; }
.marker.farm { transform: translate(calc(-50% + 65px), calc(-50% - 40px)); animation-delay: .4s; }
.marker.workshop { transform: translate(calc(-50% - 100px), calc(-50% - 40px)); animation-delay: .8s; }
.marker.resources { transform: translate(calc(-50% - 50px), calc(-50% + 50px)); animation-delay: 1.2s; }
.marker.kitchen { transform: translate(calc(-50% - 5px), calc(-50% - 60px)); animation-delay: 1.2s; }

/* Farm markers in modal */
.farm-markers { position: relative; width: 100%; height: 400px; margin: 20px 0; }
.farm-markers .marker { position: absolute; left: 50%; top: 50%; }
.modal-full .marker { pointer-events: none; }
.modal-full.open .marker { pointer-events: auto; }
.farm-markers .marker.barn { transform: translate(calc(-50% + 100px), calc(-50% + 80px)); animation-delay: 0s; }/* Хлев */
.farm-markers .marker.pigsty { transform: translate(calc(-50% + 100px), calc(-50% - 80px)); animation-delay: 0.4s; }/* Свинарник */
.farm-markers .marker.sheepfold { transform: translate(calc(-50% - 100px), calc(-50% + 0px)); animation-delay: 0.8s; }/* Овчарня */
.farm-markers .marker.poultryhouse { transform: translate(calc(-50% + 100px), calc(-50% + 250px)); animation-delay: 1.2s; }/* Птичник */
.farm-markers .marker.rabbitry { transform: translate(calc(-50% - 90px), calc(-50% - 90px)); animation-delay: 1.6s; }/* Крольчатник */
.farm-markers .marker.apiary { transform: translate(calc(-50% - 100px), calc(-50% + 160px)); animation-delay: 2.0s; }/* Пасека */

@keyframes pulse {
0% { transform: scale(.6); opacity: .9; }
70% { transform: scale(1.8); opacity: 0; }
100% { transform: scale(1.8); opacity: 0; }
}

#help-btn {
animation: help-pulse 2s ease-in-out infinite;
}

@keyframes help-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}

/* Small phones tweaks */
@media (max-width: 400px) {
.marker .label { font-size: 11px; }
.marker { width: 12px; height: 12px; }
}

/* Fullscreen modals */
.modal-full { position: fixed; inset: 0; z-index: 50; display: grid; place-items: stretch; background: rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: opacity .22s ease; }

#modal-storage { z-index: 60; }
#modal-shop { z-index: 70; }
.modal-full.hidden { display: none; }
.modal-full.open { opacity: 1; pointer-events: auto; }

.modal-full .sheet { position: relative; width: 100vw; height: 100vh; background: rgba(15, 25, 50, .99); border: 1px solid var(--glass-brd); border-radius: 0; transform: translateY(10px); transition: transform .26s ease; display: grid; grid-template-rows: auto auto 1fr; padding: 16px; }

#modal-garden .sheet { background-image: url('/assets/gardenfon.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }

#modal-resources .sheet { background-color: rgb(238, 232, 210); position: relative; }

#modal-sawmill .sheet { background-image: url('/assets/mining/tree.png'); background-size: cover; background-position: center; background-repeat: no-repeat; }
#modal-quarry .sheet { background-image: url('/assets/mining/stone-mountain.png'); background-size: cover; background-position: center; background-repeat: no-repeat; }
#modal-goldmine .sheet { background-image: url('/assets/mining/gold-mountain.png'); background-size: cover; background-position: center; background-repeat: no-repeat; }

#modal-kitchen .sheet { background-image: url('/assets/workshop/kitchenfon.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
#modal-workshop .sheet { background-image: url('/assets/workshop/workshopfon.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
#modal-notebook .sheet { background-image: url('/assets/workshop/notebook.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
#modal-recipe-book .sheet { background-image: url('/assets/workshop/recipebook.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }
#modal-unlock-slot .sheet { background-image: url('/assets/workshop/unlockslot.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }

#modal-aboriginal-boat .sheet { background-image: url('/assets/workshop/aboriginalboat.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }

#modal-fishing .sheet { background-image: url('/assets/workshop/fishfon.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }


#modal-farm .sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/islandferm.jpg');
  background-size: cover;

  background-position: center;
  background-repeat: no-repeat;

  pointer-events: none;
}

#modal-resources .sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/islandresourses.jpg');
  background-size: cover;

  background-position: center;
  background-repeat: no-repeat;

  pointer-events: none;
}
.modal-full.open .sheet { transform: translateY(0); }

.modal-full .close { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 12px; padding: 8px 10px; border-radius: 10px; z-index: 10; }
.modal-full .close::before { content: '×'; font-size: 18px; }
.modal-full h2 {
  margin: 8px 8px 16px 8px;
  color: white;                  /* Белый цвет текста */
  text-shadow: 
    -1px -1px 0 black,           /* Обводка: тени по углам */
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;             /* Толщина 1px, чёрный цвет */
    font-family: 'AGBengaly', Arial, sans-serif;
}

.storage-grid-garden-mode {
  height: 88vh !important;        /* Больше высоты */
  max-height: 88vh !important;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-content: start;
}

/* Tabs */
.tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.tab-btn { padding: 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-brd); color: var(--text); cursor: pointer; transition: all .2s; }
.tab-btn.active { background: var(--accent); border-color: transparent; }
.tab-btn:hover:not(.active) { background: rgba(255,255,255,.1); }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* Subcategories */
.subcategories { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 16px; }
.subcat-btn { padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-brd); color: var(--text); cursor: pointer; transition: all .2s; font-size: 12px; text-align: center; }
.subcat-btn.active { background: var(--accent); border-color: transparent; }
.subcat-btn:hover:not(.active) { background: rgba(255,255,255,.6); }

/* Items Grid */
.items-grid { display: grid; gap: 16px; padding: 8px; max-height: 75vh; overflow-y: auto; overflow-x: hidden; }

/* Shop items grid - responsive */
#modal-shop .items-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* Farm mode: hide other tabs */
#modal-shop.farm-mode .tab-btn:not([data-tab="animals"]) { display: none; }
#modal-shop.farm-mode #seeds-tab,
#modal-shop.farm-mode #tools-tab { display: none; }

/* Storage items grid - 2 columns */
#modal-storage .items-grid { grid-template-columns: repeat(2, 1fr); }

/* Item Card */
.item-card { background: rgba(255,255,255,.1); border: 1px solid var(--glass-brd); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.item-card img { width: 100px; height: 100px; object-fit: contain; border-radius: 8px; }
.item-card .info { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.item-card .name { font-weight: 600; font-size: 16px; }
.item-card .description { font-size: 12px; color: rgba(255,255,255,.8); line-height: 1.4; }
.item-card .price { font-weight: 600; color: #fbbf24; }
.item-card .controls { display: flex; justify-content: center; gap: 8px; align-items: center; margin-top: 8px; }

/* Product Card for animal details */
.product-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-brd);
  border-radius: 8px;
  padding: 8px;
  min-width: 120px;
}

.product-card .product-image img {  /* Увеличиваем специфичность */
  width: 40px !important;  /* Пример: 40px, !important временно для теста */
  height: 40px !important;
  object-fit: contain;
  border-radius: 4px;
  display: block;  /* Убери align-items, добавь для центрирования */
  margin: 0 auto;  /* Центр по горизонтали, если нужно */
}

.product-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.product-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  margin: 0;
}

.product-quantity {
  font-size: 10px;
  color: rgba(255,255,255,.7);
  font-weight: 500;
}

/* Products list container */
.products-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.no-products {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  font-style: italic;
  text-align: center;
  padding: 16px;
}

/* Section labels */
.section-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
  text-align: center;
}
.item-card .quantity { display: grid; grid-template-columns: auto auto auto; gap: 8px; align-items: center; }
.item-card .qty-btn { width: 32px; height: 32px; border-radius: 6px; background: rgba(255,255,255,.1); border: 1px solid var(--glass-brd); color: var(--text); cursor: pointer; display: grid; place-items: center; font-weight: 600; }
.item-card .qty-btn:hover { background: rgba(255,255,255,.15); }
.item-card .qty-display { min-width: 40px; text-align: center; font-weight: 600; }
.item-card .total { font-weight: 600; color: #10b981; }
.item-card .buy-btn {
  padding: 14px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  border: 2px solid rgba(255, 255, 255, 0.05);
  color: white;
  cursor: pointer;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow:
    0 6px 20px rgba(16, 185, 129, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  min-width: 70px;
}

.buy-btn1 {
  padding: 14px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  border: 2px solid rgba(255, 255, 255, 0.05);
  color: white;
  cursor: pointer;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow:
    0 6px 20px rgba(16, 185, 129, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  min-width: 70px;
}

.item-card .buy-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.05),
    transparent);
  transition: left 0.6s ease;
  z-index: 1;
}

.item-card .buy-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  border-radius: 50%;
  z-index: 1;
}

.item-card .buy-btn span {
  position: relative;
  z-index: 2;
  background: linear-gradient(45deg, #ffffff, #f0f8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.item-card .buy-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%);
  box-shadow:
    0 8px 25px rgba(16, 185, 129, 0.25),
    0 0 0 2px rgba(255, 255, 255, 0.1) inset,
    0 2px 0 rgba(255, 255, 255, 0.15) inset;
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.1);
}

.item-card .buy-btn:hover::before {
  left: 100%;
}

.item-card .buy-btn:hover::after {
  width: 300px;
  height: 300px;
}

.item-card .buy-btn:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow:
    0 4px 15px rgba(16, 185, 129, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  transition: all 0.1s ease;
}

.item-card .buy-btn:disabled {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: rgba(255,255,255,.5);
  cursor: not-allowed;
  box-shadow: 0 2px 8px rgba(107, 114, 128, 0.1);
  transform: none;
  border-color: rgba(255, 255, 255, 0.025);
}

.item-card .buy-btn:disabled::before,
.item-card .buy-btn:disabled::after {
  display: none;
}

.item-card .buy-btn:disabled span {
  background: none;
  -webkit-text-fill-color: rgba(255,255,255,.25);
}

/* Small phones */
@media (max-width: 400px) {
  .modal-full .sheet { padding: 12px; }
  .modal-full .close { top: calc(env(safe-area-inset-top) + 8px); right: 8px; }
  .items-grid { gap: 8px; }
  .item-card img { width: 90px; height: 90px; }
  .subcategories { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  transition: opacity 0.5s ease-in-out;
}

#loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Простой анимационный спиннер (можно заменить на любую другую анимацию) */
.spinner {
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top: 4px solid #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.modal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 90%;
  max-width: 400px;
  
}

.item-details-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.item-details-content img {
  width: 120px;
  height: 120px;
  margin-bottom: 12px;
}

.item-details-content .info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-details-content .controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}

.item-details-content .quantity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.item-details-content .qty-btn {
  width: 30px;
  height: 30px;
  font-size: 1.2rem;
}

#modal-seed-details {
  /* Добавьте это свойство, чтобы оно было выше, чем другие модальные окна */
  z-index: 1001;
}

#modal-animal-details {
  z-index: 1001;
}

/* Language button */
.language-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  color: var(--text);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  margin-left: 8px;
}

.language-btn:hover {
  background: rgba(255,255,255,.1);
}

/* Language modal */
#modal-language {
  z-index: 200;
}

.language-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.language-option {
  padding: 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-brd);
  color: var(--text);
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  font-weight: 500;
  z-index: 20001;
}

.language-option:hover {
  background: var(--accent);
  border-color: transparent;
}

.language-option.active {
  background: var(--accent);
  border-color: transparent;
}

/* Resource points */
.resource-points {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.resource-point {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16,185,129,.125), 0 6px 16px rgba(0,0,0,.2);
  cursor: pointer;
  position: absolute;
  border: none;
  padding: 0;
  display: block;
}

.resource-point::before, .resource-point::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(16,185,129,.25);
  animation: pulse 2.4s ease-out infinite;
}

.resource-point::after {
  inset: -12px;
  animation-delay: .8s;
  opacity: .35;
}

.resource-point .label {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,25,50,.7);
  border: 1px solid rgba(255,255,255,.2);
  color: #eaf0ff;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

.resource-point[data-point="quarry"] { top: 80%; left: 50%; }
.resource-point[data-point="goldmine"] { top: 35%; left: 80%; }
.resource-point[data-point="sawmill"] { top: 60%; left: 24%; }
.resource-point[data-point="fishing"] { top: 77%; left: 16%; }
.resource-point[data-point="industrialzone"] { top: 35%; left: 35%; }

/* Mining UI */
.mining-content {
  background: rgba(46, 46, 46, 0.8);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 16px;
  margin: 0 auto 8px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  position: relative;
  z-index: 5;
}

.mining-title {
  background: rgba(46, 46, 46, 0.8);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 8px;
  margin: 0 auto 8px;
  width: 100%;
  max-width: 300px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.title-and-level {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 4px;
}

.title-and-level span {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.title-and-level h2 {
  margin: 0;
  font-size: 28px;
}

.level-info {
  display: flex;
  gap: 16px;
  font-weight: 600;
}

.tool-slots {
  display: flex;
  gap: 16px;
  justify-content: center;
  width: 100%;
}

.tool-slot {
  width: 80px;
  height: 80px;
  border: 2px dashed rgba(255,255,255,.5);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.7);
  position: relative;
  cursor: pointer;
}

.tool-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.tool-placeholder {
  pointer-events: none;
}

.mining-process {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.resource-display, .tool-durability {
  font-weight: 500;
}

.mining-btn {
  padding: 16px 24px;
  background: linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%);
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.mining-btn:hover {
  transform: scale(1.05);
}

.mining-btn:active {
  transform: scale(0.95);
}

.mining-animation {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.mining-animation .target {
  width: 100px;
  height: 100px;
  background: url('/assets/vegetables/tree.png') center/cover;
  border-radius: 50%;
  position: relative;
  z-index: 5;
  cursor: pointer;
}

.mining-animation .tool-icon {
  position: absolute;
  width: 50px;
  height: 50px;
  background: center/cover;
  opacity: 0;
  transition: all 0.3s;
}

.mining-animation.mining .tool-icon {
  opacity: 1;
  transform: translate(50px, -50px) rotate(45deg);
}

.mining-animation .click-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 0, 0.9);
  border: 4px solid #ff0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  pointer-events: none;
  animation: click-pulse 1.5s ease-in-out infinite;
  z-index: 10;
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.8);
}

@keyframes click-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.7;
  }
}

/* полностью снимаем фокус/подсветку/теню и мобильный tap-highlight */
.mining-animation .target,
.mining-animation .target * {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-tap-highlight-color: transparent; /* mobile */
  -webkit-user-select: none;
}

/* учитываем состояния */
.mining-animation .target:focus,
.mining-animation .target:active,
.mining-animation .target:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.btn-upgrade { padding: 14px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  border: 2px solid rgba(255, 255, 255, 0.05);
  color: white;
  cursor: pointer;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow:
    0 6px 20px rgba(16, 185, 129, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  min-width: 70px; }

/* Workshop Grid */
.workshop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px;
  max-height: 90vh;
  overflow-y: auto;
}

.production-card {
  background: rgba(46, 46, 46, 0.8);
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  transition: all 0.2s ease;
}

.production-card:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-2px);
}

.production-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  margin: 0;
}

.production-content {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.production-image {
  width: 130px;
  height: 130px;
  object-fit: contain;
  border-radius: 8px;
}

.production-description {
  font-size: 14px;
  color: rgba(255,255,255,.8);
  line-height: 1.4;
  margin: 0;
}

.production-open-btn {
  padding: 8px 16px;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  align-self: center;
}

.production-open-btn:hover {
  background: #5a8bff;
  transform: scale(1.05);
}

.production-detail-image {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 16px;
}

.production-detail-description {
  font-size: 16px;
  color: rgba(255,255,255,.9);
  line-height: 1.5;
  margin-bottom: 16px;
}

.production-actions {
  text-align: center;
  color: rgba(255,255,255,.7);
}

/* Recipes Grid */
.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 4px 4px;
  padding: 10px;
  overflow-y: auto;
  max-height: calc(100vh - 55px);
  box-sizing: border-box;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;
}
.recipes-grid::-webkit-scrollbar {
  display: none;                   /* Chrome, Safari, новый Edge */
}


.recipe-card {
  background: rgba(15, 15, 20, 1);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  max-width: 140px;
  width: 100%;
  box-sizing: border-box;
}

.recipe-card:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-2px);
}



.recipe-card.active {
  background: rgba(10, 10, 18, 0.98);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.8);   /* если var(--accent) фиолетовый */
}

.recipe-card.completed {
  background: rgba(10, 18, 10, 0.98);
  border-color: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

.recipe-card.disabled {
  opacity: 0.9;

}

.recipe-image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
}

.recipe-name {
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  margin: 0;
  color: var(--text);
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  width: 98%;
  max-width: 98%;
  margin-left: auto;
  margin-right: auto;
}

.recipe-timer {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}

/* Recipe Detail Modal */
.recipe-detail-content {
  display: flex;
  flex-direction: column;
  gap: 16px;

  max-height: 98vh;
  overflow-y: auto;
  padding-right: 8px;
  box-sizing: border-box;
  padding-bottom: 56px;
}


.recipe-detail-title {
  text-align: left;
  margin: 0;
  color: var(--text);
}

.recipe-detail-image {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--glass-brd);
  border-color: #7a7a7a;
  align-self: center;
}

.recipe-detail-description {
  color: rgba(255,255,255,.8);
  line-height: 1.4;
  margin: 0;
}

.recipe-inputs, .recipe-output {
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  padding: 12px;
}

.recipe-inputs h4, .recipe-output h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: var(--text);
}

.inputs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.input-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
}


.input-item.available {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.input-item.unavailable {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.recipe-quantity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recipe-quantity label {
  font-weight: 600;
  color: var(--text);
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid var(--glass-brd);
  background: rgba(255,255,255,.1);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}

.qty-btn:hover {
  background: rgba(255,255,255,.2);
}

#recipe-quantity-display {
  min-width: 40px;
  text-align: center;
  font-weight: 600;
  color: var(--text);
}

.recipe-time {
  text-align: center;
  color: rgba(255,255,255,.8);
}

/* Construction System */
.construction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px;
  max-height: 90vh;
  overflow-y: auto;
}

.construction-card {
  background: rgba(255,255,255,.1);
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  transition: all 0.2s ease;
  cursor: pointer;
}

.construction-card:hover {
  background: rgba(255,255,255,.15);
  transform: translateY(-2px);
}

.construction-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  text-align: center;
}

.construction-preview {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  align-items: center;
}

.construction-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.construction-image img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
}

.construction-info p {
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,.8);
  line-height: 1.4;
}

.construction-action {
  text-align: center;
}

.construction-detail-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.construction-detail-content h2 {
  margin: 0;
  color: var(--text);
  text-align: center;
}

.construction-detail-content p {
  margin: 0;
  color: rgba(255,255,255,.8);
  line-height: 1.4;
  text-align: center;
}

.construction-requirements {
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  padding: 12px;
}

.construction-requirements h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: var(--accent);
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 4px;
}

.requirement-item.available {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.requirement-item.unavailable {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.requirement-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
}

.construction-time {
  text-align: center;
  color: rgba(255,255,255,.8);
  font-size: 16px;
}

.construction-actions {
  text-align: center;
}

/* Build first message */
.build-first-message {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.build-notice {
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  padding: 24px;
  max-width: 300px;
}

.build-notice h3 {
  margin: 0 0 8px 0;
  color: var(--accent);
  font-size: 18px;
}

.build-notice .building-name {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
}

.build-notice .btn {
  margin: 0;
}

/* Building content */
.building-content {
  padding: 16px;
  text-align: center;
}

/* Animal grid */
.animal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  max-height: 90vh;
  overflow-y: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.animal-slot {
  background: rgba(0, 0, 0, .9);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 250px;
  position: relative;
}

.animal-slot.locked {
  background: rgba(0,0,0,.7);
  pointer-events: none;
}

.slot-locked {
  color: white;
  font-size: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}


.add-animal-btn {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  margin: auto;
}

.add-animal-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.animal-image {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 8px;
}

.animal-info {
  text-align: center;
  width: 100%;
}

.animal-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.animal-timers {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.life-timer, .collect-timer {
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  border: 1px solid var(--glass-brd);
}

.life-timer {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.life-timer.expired {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.collect-timer {
  background: rgba(79, 128, 255, 0.2);
  color: #4f80ff;
}

.collect-timer.ready {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.animal-actions {
  margin-top: auto;
  width: 100%;
}

.collect-btn, .slaughter-btn {
  width: 100%;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.collect-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
}

.collect-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%);
}

.eat-btn {
  width: 100%;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.eat-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
}

.eat-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%);
}

.slaughter-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
}

.slaughter-btn:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
}

/* Upgrade Modal */
.upgrade-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.upgrade-details-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.upgrade-detail-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Инфо блок */
.upgrade-detail-info {
  width: 100%;
}

/* Заголовки */
.upgrade-detail-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
  text-align: center;
}

/* Блоки уровней */
.upgrade-current-level, 
.upgrade-next-level, 
.upgrade-requirements {
  margin-bottom: 10px;
}

.level-info span,
.requirements-list .requirement-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-top: 2px; /* меньше, чем было 3px */
  line-height: 0.2; /* плотнее между строками */
}

/* Требования */
.requirements-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Кнопка апгрейда */
.upgrade-actions {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.upgrade-actions .btn.primary {
  background: #4CAF50;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s;
}

.upgrade-actions .btn.primary:hover {
  background: #45a049;
}

.level-section {
  background: rgba(255,255,255,.05);
  padding: 12px;
}

.level-section h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: var(--accent);
}

.level-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.upgrade-requirements {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-brd);
  border-radius: 8px;
  padding: 5px;
  margin-top: 5px; /* меньше, чем стандартные 10px */
  margin-bottom: 8px; /* немного снизу для аккуратности */
}

.requirement {
  font-size: 14px;
  margin-bottom: 4px;
}

.upgrade-actions {
  width: 100%;
  display: flex;
  justify-content: center;
}


/* Loading screen */

#splash-container {
  background: black; /* Черный фон на случай задержки */
}

/* Общие стили для сплэш-изображений */
.splash-img {
  position: absolute;
  top: 0;        /* Явно фиксируем сверху */
  left: 0;       /* Явно фиксируем слева */
  width: 100vw;  /* Полная ширина viewport (лучше 100%) */
  height: 100vh; /* Полная высота viewport */
  object-fit: cover; /* Масштабирует изображение, чтобы заполнить контейнер без искажений (cover — обрезает края, contain — оставляет полосы) */
  object-position: center; /* Центрирует, если обрезаем */
  z-index: 1;    /* Image1 - фон */
}

.splash-img1 {
  z-index: 1; /* Фон, показывается сразу */
  opacity: 1;
}

.splash-img2 {
  z-index: 2; /* Перед фоном, нижняя часть */
  opacity: 0;
  bottom: 0;
  transition: opacity 1s ease-in-out; /* Плавное проявление за 1s */
}

.splash-img3 {
  z-index: 2; /* Перед фоном, верхняя */
  top: -100%; /* Начинаем сверху за экраном */
  transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Плавное опускание */
}

.splash-img3.animate-slide-down {
  transform: translateY(100%); /* Опускаемся вниз на 100% высоты */
}

.splash-img4 {
  z-index: 3; /* Перед image3, верхняя */
  top: -100%;
  transition: all 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Быстрее, bounce-эффект */
}

.splash-img4.animate-fall-sway {
  animation: fallSway 1.5s ease-out forwards;
}

@keyframes fallSway {
  0% {
    transform: translateY(-100%) rotate(0deg);
  }
  70% {
    transform: translateY(80%) rotate(-5deg); /* Покачивание при падении */
  }
  100% {
    transform: translateY(100%) rotate(0deg); /* Фиксация */
  }
}

/* Адаптация для мобильных */
@media (max-width: 640px) {
  .splash-img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }
}

.topup-packages { display: grid; grid-template-columns: 1fr; gap: 10px; }
.topup-btn {
  padding: 12px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.topup-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.topup-btn:active {
  transform: translateY(0);
}

.withdraw-section {
  margin-bottom: 20px;  /* Расстояние между секциями */
}

.withdraw-section .row {
  display: flex;
  gap: 10px;  /* Расстояние между input и button */
  align-items: center;  /* Вертикальное выравнивание */
  margin-top: 10px;  /* Отступ от h3 */
}

.withdraw-section input {
  width: 200px;  /* Фиксированная ширина для input */
  padding: 12px;  /* Стандартный padding для input */
  border-radius: 10px;
  border: 1px solid var(--glass-brd);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.withdraw-section button {
  white-space: nowrap;  /* Button не переносится */
  min-width: 100px;  /* Фиксированная ширина для button */
}

/* Transaction History Styles */
.transaction-history-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.transaction-item {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.transaction-type {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}

.transaction-details {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}

.left-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.transaction-amount {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.transaction-date {
  font-size: 12px;
  color: rgba(255,255,255,.7);
}

.right-column {
  display: flex;
  align-items: center;
}

.transaction-status {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  min-width: 80px;
}

.status-pending {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-completed {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-cancelled {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Responsive for transaction history */
@media (max-width: 300px) {
  .transaction-details {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .right-column {
    justify-content: center;
  }

  .transaction-status {
    min-width: 250px;
  }
}



#modal-friends .sheet {
  display: flex;
  flex-direction: column;
}

.referral-info-block {
  flex-shrink: 0;
}

.referral-link-section {
  flex-shrink: 0;
}

.friends-list-section {
  flex: 1;
  overflow-y: auto;
}

.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.friend-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center; /* Изменено с center на start, чтобы текст не центрировался вертикально с аватаркой */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.friend-card .avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  grid-column: 1;
  justify-self: start; /* Добавлено для выравнивания аватарки слева */
}

.friend-card .info {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-self: start; /* Добавлено для выравнивания текста слева */
}

.friend-card .name {
  font-weight: bold;
}

.friend-card .deposits {
  font-size: 14px;
  color: #4CAF50;
}

.friend-card .registration-date {
  font-size: 12px;
  color: #888;
}

.referral-link-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.referral-link-container {
  display: flex;
  gap: 8px;
}

#referral-link {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 14px;
  user-select: all;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.7);
}

#referral-link:focus {
  outline: none;
}

.referral-info-block {
  background: rgba(255, 255, 255, 0.05);
  padding: 16px 12px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  line-height: 1.5;
  font-size: 14px;
  color: #f0f0f0;
  margin-bottom: 24px;
}

/* Kitchen modal styles */
.kitchen-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.kitchen-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kitchen-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-bar {
  height: 16px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  border: 2px solid rgba(255, 255, 0, 0.6);
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
}

.bar {
  height: 100%;
  background: linear-gradient(90deg, #4f80ff, #67d1ff);
}

.percent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  pointer-events: none;
}

.level-info {
  display: flex;
  gap: 16px;
  font-weight: 600;
}

.kitchen-actions {
  display: flex;
  justify-content: center;
}

.kitchen-actions .btn {
  width: 100%;
  max-width: 300px;
}

.kitchen-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.kitchen-buttons .btn {
  flex: 1;
  max-width: 150px;
}

/* Recipe book styles */
.recipe-book-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px); /* Adjust based on header height */
  overflow-y: auto;
}

.notebook-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px); /* Adjust based on header height */
  overflow-y: auto;
}

.recipe-book-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 1px;
  margin-bottom: 12px;

}

.notebook-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 1px;
  margin-bottom: 12px;

}

.recipe-book-tabs button {
  padding: 3px 5px; /* меньше внутренний отступ */
  font-size: 12px; /* компактный текст */
  border-radius: 6px; /* чуть мягче форма */
  background: rgba(49, 49, 49, 0.7);
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.notebook-tabs button {
  padding: 3px 5px; /* меньше внутренний отступ */
  font-size: 12px; /* компактный текст */
  border-radius: 6px; /* чуть мягче форма */
  background: rgba(49, 49, 49, 0.7);
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.recipe-book-tabs button:hover {
  background: rgba(49, 49, 49, 0.6);
}

.notebook-tabs button:hover {
  background: rgba(49, 49, 49, 0.6);
}

.recipe-book-tabs button.active {
  background: rgba(22, 22, 22, 0.6);
  border-color: rgba(51, 255, 0, 0.6);
  color: #ffffff;
}

.notebook-tabs button.active {
  background: rgba(22, 22, 22, 0.6);
  border-color: rgba(51, 255, 0, 0.6);
  color: #ffffff;
}

.recipe-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 6px;
  padding: 16px;
  flex: 1; /* Allow grid to take remaining space */

}

.notebook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 6px;
  padding: 16px;
  flex: 1; /* Allow grid to take remaining space */

}

.recipe-card {
  background: rgba(32, 32, 32, 0.5);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.recipe-card.available {
  border: 2px solid #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.recipe-card.unavailable {
  border: 2px solid #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.note-card {
  background: rgba(32, 32, 32, 0.5);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.note-card.available {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.note-card.unavailable {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.recipe-card:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-2px);
}

.note-card:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-2px);
}

.recipe-card img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
}

.note-card img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
}

.recipe-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  width: 100%;
}

.note-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  width: 100%;
  font-size: 9px;
}

.recipe-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.note-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.note-description {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  margin-bottom: 4px;
}

.recipe-price {
  font-size: 11px;
  font-weight: 600;
  color: #fbbf24;
}

.note-price {
  font-size: 11px;
  font-weight: 600;
  color: #fbbf24;
}

.open-recipe-btn {
  padding: 6px 12px;
  font-size: 11px;
}

.open-note-btn {
  padding: 6px 12px;
  font-size: 11px;
}

/* Recipe details modal */
.recipe-details-content {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  max-height: 95vh;
  overflow-y: auto;
}

.recipe-details-info {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 16px;

}

.note-details-content {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  max-height: 95vh;
  overflow-y: auto;
}

.note-details-info {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 16px;

}

.recipe-detail-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 8px;
  align-self: center;
}

.note-detail-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 8px;
  align-self: center;
}

.recipe-detail-title {
  text-align: center;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.note-detail-title {
  text-align: center;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.recipe-ingredients {
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  padding: 4px;
}

.note-ingredients {
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  padding: 4px;
}

.recipe-ingredients h4 {
  margin: 0 0 8px 0;
  font-size: 11px;
  color: var(--accent);
}

.note-ingredients h4 {
  margin: 0 0 8px 0;
  font-size: 11px;
  color: var(--accent);
}

.ingredients-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ingredient-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  font-size: 11px;
}

.ingredient-item.available {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.ingredient-item.unavailable {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.ingredient-image {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.ingredient-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  }

.ingredient-name {
  font-weight: 500;
  color: var(--text);
  font-size: 11px;
}

.ingredient-quantity {
  font-weight: 600;
  color: rgba(255,255,255,.8);
  font-size: 11px;
}

.recipe-price-section {
  text-align: center;
  padding: 8px;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  margin-top: 10px;   /* Отступ сверху от предыдущего контейнера */
  margin-bottom: 16px; /* Отступ снизу от следующего контейнера */
}

.recipe-price-label {
  font-size: 14px;
  color: rgba(255,255,255,.8);
  margin-bottom: 4px;
}

.recipe-price-value {
  font-size: 16px;
  font-weight: 600;
  color: #fbbf24;
}

.buy-recipe-btn {
  align-self: center;
  min-width: 120px;
}

.no-recipes {
  text-align: center;
  color: rgba(255,255,255,.6);
  font-style: italic;
  padding: 40px;
  grid-column: 1 / -1;
}

#modal-kitchen-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  justify-content: center;
}

#kitchen-level-display {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.6);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #ffe97f;
}
/* Unlock slot modal styles */



.unlock-slot-content {
  position: fixed; /* Или absolute, если относительно родителя */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Смещение на половину ширины/высоты */
  width: 85%;
  max-width: 600px; /* Фикс. ширина для десктопа */
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 20px;
  background: rgb(19, 19, 19);
  border: 1px solid #ddd; /* Обводка: толщина 1px, сплошная линия, серо-голубой цвет */
  border-radius: 8px; /* Закругления углов (уже есть, но border-radius влияет на border) */
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  z-index: 1000; /* Поверх других элементов */
}

.unlock-slot-content .close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.requirements-section {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  padding: 16px;
}

.requirements-section h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--accent);
  text-align: center;
}

.requirement-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
}

.requirement-item:last-child {
  margin-bottom: 0;
}

.requirement-label {
  font-weight: 500;
  color: var(--text);
}

.requirement-value {
  font-weight: 600;
  color: var(--accent);
}

.current-status {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  padding: 16px;
}

.current-status h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--text);
  text-align: center;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
}

.status-item:last-child {
  margin-bottom: 0;
}

.status-label {
  font-weight: 500;
  color: var(--text);
}

.status-value {
  font-weight: 600;
  color: var(--text);
}

.unlock-actions {
  text-align: center;
}

.unlock-actions .btn {
  min-width: 120px;
  padding: 12px 24px;
}

.insufficient-message {
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}

/* Cooking slots grid */
.kitchen-cooking-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
  max-height: 60vh;
  overflow-y: auto;
}

.cooking-slot {
  position: relative;
  aspect-ratio: 1;
  background: rgba(255,255,255,.05) url('/assets/vegetables/burner.png') center/cover;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
  border-radius: 8px;

}

.cooking-slot:hover:not(.locked) {
  background: rgba(255,255,255,.1) url('/assets/vegetables/burner.png') center/cover;
  transform: scale(1.02);
}

.cooking-slot.locked {
  background: rgba(0,0,0,.15) url('/assets/vegetables/burner.png') center/cover;
  opacity: 0.5;
  cursor: not-allowed;
}

.cooking-slot.locked:hover {
  background: rgba(0,0,0,.15) url('/assets/vegetables/burner.png') center/cover;
  transform: none;
}

.cooking-slot.unlocked {
  background: rgba(255,255,255,.05) url('/assets/vegetables/burner.png') center/cover;
}

.cooking-slot.cooking {
  background: rgba(34, 197, 94, 0.1) url('/assets/vegetables/burner.png') center/cover;
  border-color: #22c55e;
  cursor: not-allowed;
}

.cooking-slot.ready {
  background: rgba(16, 185, 129, 0.1) url('/assets/vegetables/burner.png') center/cover;
  border-color: #10b981;
  cursor: pointer;
}

.cooking-slot img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  border-radius: 4px;
}

.cooking-slot .cooking-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: rgba(255,255,255,.6);
  pointer-events: none;
}

.cooking-slot .cooking-locked {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: rgba(255,255,255,.4);
  pointer-events: none;
}

.cooking-slot .cooking-timer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.4);
  color: white;
  font-size: 10px;
  text-align: center;
  padding: 2px;
  border-radius: 4px;
}

.cooking-slot .collect-btn {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 6px;           /* меньше горизонтальных отступов */
  min-width: 50px;   
  max-width: 60%;           /* ограничим ширину */
  font-size: 10px;
  font-weight: 300;
  background: linear-gradient(145deg, #22c55e, #16a34a);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.15s ease-in-out;
  text-align: center;
}

.cooking-slot .collect-btn:hover {
  background: linear-gradient(145deg, #16a34a, #15803d);
  transform: translateX(-50%) scale(1.07);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.cooking-slot .collect-btn:active {
  transform: translateX(-50%) scale(0.95);
  background: linear-gradient(145deg, #15803d, #166534);
}



/* Responsive for cooking grid */
@media (max-width: 640px) {
  .kitchen-cooking-grid {
    gap: 8px;
    padding: 12px;
  }
}

.has-ingredients { border: 2px solid green; }
.missing-ingredients { border: 2px solid red; }

.note-cooking-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin: 8px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  max-width: 90vw;
  gap: 10px;
}

.cooking-time-label {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.cooking-time-value {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.boat-dish-slot.needs-more-friends {
  opacity: 0.5;
  filter: grayscale(50%);
  pointer-events: none; /* Чтобы предотвратить клики, если нужно */
}

.boat-dish-slot.needs-more-friends .btn {
  opacity: 0.7;
  background-color: #ccc !important;
}

#fishing-animation {
  position: absolute;
  bottom: 0;           /* Только снизу */
  top: 180px;          /* Отступ сверху (высота заголовка + кнопки) */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Пропускает клики */
}

#fishCanvas {
  pointer-events: auto; /* Только канва ловит касания */
  max-height: calc(100vh - 200px);
}

/* Starter Box Modal */
.starter-box-modal {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.95) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
}

.starter-box-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.starter-box {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.starter-box:hover {
  transform: scale(1.05);
}

.box-image {
  font-size: 120px;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
  animation: pulse-light 2s ease-in-out infinite;
}

@keyframes pulse-light {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1));
  }
}

.starter-items {
  display: flex !important;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  max-width: 400px;
  /* ✅ Фикс: contain для изоляции анимаций */
  contain: layout style paint;
}

.starter-item {
  /* ✅ УБРАЛИ базовые opacity/transform — только через animation */
  opacity: 1;
  transform: none;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid var(--glass-brd);
  border-radius: 12px;
  padding: 12px;
  min-width: 80px;
  
  /* ✅ НОВЫЙ keyframes с will-change для GPU ускорения */
  will-change: opacity, transform;
  animation: item-appear 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes item-appear {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.starter-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 6px;
}

.starter-item-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  margin: 0;
}

.starter-item-qty {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}

.box-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.box-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
/* Login Screen */
.login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('/assets/sea.jpg') 50% 0 / cover no-repeat fixed;
  z-index: 1000;
}

.login-form {
  padding: 20px;
  border-radius: 14px;
  width: 300px;
  text-align: center;
}

.login-form h2 {
  margin-bottom: 20px;
  color: var(--text);
}

.login-form form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-form input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--glass-brd);
  background: rgba(255,255,255,.06);
  color: var(--text);
}

.login-form button {
  margin-top: 10px;
}
}

.players-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.player-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
  width: 100%; 
}

.player-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--glass-brd);
}

.player-balances {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-levels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-label {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  margin-bottom: 4px;
}

.player-value {
  font-weight: 600;
  color: var(--text);
}

/* Responsive */
@media (max-width: 768px) {
  .player-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.players-bg {
  background-color: #1a1a1a; /* любой цвет, например тёмно-серый */
  min-height: 100vh;
  padding: 16px;
}



/* Скрытие модалки по умолчанию */
#inventory-modal.hidden {
  display: none;
}

/* Сам контейнер модалки (фон) */
#inventory-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  z-index: 9999;
  overflow-y: auto;
}

/* Контент модалки */
.modal-content {
  background: rgba(0,0,0,0.8);
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 900px; /* максимальная ширина */
  box-sizing: border-box;
  display: block; /* чтобы сетка внутри работала */
  color: #fff;
  position: relative;
}

/* Крестик закрытия */
.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
}

/* Заголовок модалки */
.modal-content h3 {
  margin-top: 0;
  margin-bottom: 15px;
}

/* Список инвентаря */
#inventory-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Категория предметов */
.invcat-block {
  width: 100%;
}

/* Заголовок категории */
.invcat-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Сетка предметов внутри категории */
.invcat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

/* Карточка предмета */
.invcat-item {
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(6px);
  word-wrap: break-word;
}

/* Имя и количество предмета */
.invcat-item-name {
  font-weight: 600;
  margin-bottom: 5px;
}

.invcat-item-qty {
  opacity: 0.85;
}






/* Контейнер вкладок в модальном окне */
#modal-wallet .tabs {
  display: flex;
  flex-wrap: wrap;        /* Включаем перенос на новую строку */
  justify-content: center; /* Центрируем кнопки по горизонтали */
  gap: 8px;               /* Расстояние между кнопками */
  margin-bottom: 16px;
}

/* Сами кнопки */
#modal-wallet .tab-btn {
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-brd);
  color: var(--text);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;     /* Чтобы текст кнопки не переносился */
}

/* Активная кнопка */
#modal-wallet .tab-btn.active {
  background: var(--accent);
  border-color: transparent;
}

/* Ховер */
#modal-wallet .tab-btn:hover:not(.active) {
  background: rgba(255,255,255,.1);
}


/* УБИРАЕМ ВСЁ СЛОЖНОЕ — ПРОСТО РАБОТАЕТ */
.wallet-convert-tabs .tab-content {
  display: none;
}
.wallet-convert-tabs .tab-content.active {
  display: block;
}

/* === НОВАЯ СИСТЕМА ПОДВКЛАДОК — НЕ ПЕРЕСЕКАЕТСЯ НИ С ЧЕМ === */
.sub-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sub-tab-btn {
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-brd);
  color: var(--text);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  font-size: 14px;
}

.sub-tab-btn.active {
  background: var(--accent);
  border-color: transparent;
  color: white;
}

.sub-tab-btn:hover:not(.active) {
  background: rgba(255,255,255,.1);
}

.sub-tab-content {
  display: none;
}

.sub-tab-content.active {
  display: block;
}

.tasks-tab-content {
  display: none; /* по умолчанию скрыты */
}

.tasks-tab-content.active {
  display: block; /* только активная показывается */
}

/* Контент вкладок */
.tasks-tab-content {
  display: none;
  overflow-y: auto;
  padding-right: 4px; /* для скролла */
  height: 100%;
}

.tasks-tab-content.active {
  display: block;
}

/* Карточки */
.card {
  display: flex;
  gap: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  align-items: flex-start;
}

.card-left img {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
}

.card-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-right h3 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}

.card-right p {
  margin: 4px 0 8px;
  font-size: 14px;
  color: #ccc;
}

.card-buttons {
  display: flex;
  gap: 8px;
}

.card-buttons .btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background .2s;
}

.action-btn {
  background-color: #3b82f6;
  color: #fff;
}

.action-btn:hover {
  background-color: #2563eb;
}

.check-btn {
  background-color: #10b981;
  color: #fff;
}

.check-btn:hover {
  background-color: #059669;
}


.error {
  color: #f87171;
  padding: 20px 0;
  text-align: center;
}

#tasks-grid,
#partners-grid {
  margin-top: 20px;     /* ← вот сюда ставишь нужный отступ */
}

/* Класс для пульсации */
.navbtn.pulse {
  animation: pulse-glow 1.5s infinite;
}

/* Анимация свечения */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0px rgba(255, 255, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 15px rgba(255, 255, 0, 1);
  }
  100% {
    box-shadow: 0 0 0px rgba(255, 255, 0, 0.7);
  }
}


/* toast.css */
.toast-container {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  min-width: 220px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  animation: toastSlideIn 0.4s ease-out;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.toast.success { border-left: 5px solid #4ade80; }
.toast.error   { border-left: 5px solid #f87171; }

.toast img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

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

@keyframes toastSlideOut {
  to { transform: translateX(120%); opacity: 0; }
}

/* === ПРЕМИУМ ПАСС — ФИНАЛЬНАЯ ВЕРСИЯ === */
/* === ПРЕМИУМ ПАСС — ФИНАЛЬНАЯ ВЕРСИЯ === */
#modal-pass .pass-header-premium {
  text-align: center;
  margin: 16px 0 24px;
  padding: 16px 10px 8px;
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,215,0,0.05));
  border-radius: 16px;
  border: 1px solid rgba(255,215,0,0.3);
}

#modal-pass .exclusive-title {
  margin: 10px 0 6px;
  font-size: 1.45em;
  font-weight: 700;
  background: linear-gradient(90deg, #FFD700, #FFA500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#modal-pass .exclusive-subtitle {
  color: #FFD700;
  font-size: 0.9em;
  opacity: 0.9;
  margin: 0;
}

/* Контейнер прокрутки, растягивающийся до низа */
.pass-scroll-container {
  display: flex;
  flex-direction: column;
  max-height: 95vh; /* подгоняем под экран */
  overflow-y: auto;
  padding: 0 8px;
  margin: 0 8px;
  border-radius: 12px;
}

/* Сетка карточек — растягивается на всю доступную высоту */
.pass-grid {
  display: grid;
  gap: 14px;
  padding: 8px 0;
  max-width: 460px;
  margin: 0 auto;
  /* убираем flex:1 и min-height */
}



/* Компактные карточки */
.pass-card {
  background: rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,215,0,0.25);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 14px;
}

.pass-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(255,215,0,0.18);
  border-color: #FFD700;
}

.pass-card.owned {
  opacity: 0.85;
  border-color: #22c55e;
}

.pass-card.owned::after {
  content: "Активировано ✓";
  position: absolute;
  top: 8px;
  right: 8px;
  background: #22c55e;
  color: white;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.75em;
  font-weight: bold;
}

.pass-card .card-left {
  flex-shrink: 0;
  position: relative;
}

.pass-card img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #FFD700;
}

.exclusive-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: linear-gradient(45deg, #FFD700, #FFA500);
  color: black;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75em;
  box-shadow: 0 3px 10px rgba(255,215,0,0.4);
}

.pass-card .card-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* убираем justify-content: space-between; */
  min-height: 90px;
  padding: 4px 0;
}



.pass-card h3 {
  margin: 0 0 6px;
  font-size: 1.15em;
  color: #FFD700;
  line-height: 1.2;
}

.pass-card .description {
  color: #ddd;
  font-size: 0.88em;
  margin: 0 0 8px;
  line-height: 1.3;
  flex-grow: 1;
}

.pass-card .price {
  margin: 8px 0 10px;
  font-size: 1.3em;
  font-weight: bold;
  color: #FFD700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pass-card .price img {
  width: 26px;
  height: 26px;
}

/* Кнопка покупки */
.pass-card .action-btn {
  padding: 11px 16px;
  font-size: 1em;
  font-weight: bold;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: black;
  border: none;
  width: 100%;
  margin-top: auto; /* кнопка всегда внизу карточки */
}

.pass-card .action-btn:disabled,
.pass-card.owned .action-btn {
  background: #22c55e;
  color: white;
  cursor: default;
}

/* Ошибка доступа */
.error-center {
  text-align: center;
  padding: 50px 20px;
  color: #ff6b6b;
  font-size: 1.1em;
}

/* Спокойная пульсирующая кнопка Pass — без блика и агрессивной анимации */
#pass-btn.pulse-super {
  position: relative;
  animation: softPulse 3s ease-in-out infinite;
  z-index: 10;
}

@keyframes softPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 0 8px rgba(255, 215, 0, 0.4),
      0 0 16px rgba(255, 180, 0, 0.2);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 
      0 0 14px rgba(255, 215, 0, 0.7),
      0 0 28px rgba(255, 200, 0, 0.4);
  }
}

#pass-btn.pulse-super:hover {
  transform: scale(1.08);
  animation-duration: 1.1s;
}

.market-grouped-item {
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(255,255,255,0.1);
}
.market-grouped-item:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

.lots-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  padding: 10px;
  background: rgba(0,0,0,0.3);
  font-weight: bold;
  font-size: 14px;
  margin: 15px 0 5px;
  border-radius: 8px;
}
.lot-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  align-items: center;
  padding: 12px 10px;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  margin-bottom: 4px;
}
.lot-row:hover {
  background: rgba(0,0,0,0.3);
}

@media (max-width: 640px) {
  .lots-header, .lot-row {
    grid-template-columns: 1fr 1fr auto;
    font-size: 13px;
  }
  .lots-header > :nth-child(3), .lot-row > .total,
 .lots-header > :nth-child(4), .lot-row > .seller { display: none; }
}

/* Сетка электростанции */
.industrialzone-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 16px;
  max-height: 85vh;
  overflow-y: auto;
  margin-top: 10px;
}

/* Ячейка */
.industrialzone-plot {
  position: relative;
  aspect-ratio: 1; /* держит квадрат даже при сужении экрана */
  background: rgba(255,255,255,0.05) url('/assets/industrialzone/technoplot.png') center/cover;
  border-radius: 12px;
  border: 2px dashed rgba(100, 150, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  display: grid;
  place-items: center;
  font-size: 48px;
  color: rgba(100, 150, 255, 0.6);
  box-sizing: border-box;
}

/* Закрытая */
.industrialzone-plot.locked {
  background: rgba(0,0,0,0.3) url('/assets/industrialzone/technoplot.png') center/cover;
  border: 2px solid transparent;
  cursor: not-allowed;
  opacity: 0.6;
  
}

.industrialzone-plot.locked::after {
  content: '🔒';
  font-size: 32px;
  color: #64748b;
}

/* Ховер */
.industrialzone-plot:hover:not(.locked) {
  transform: scale(1.0);
  border-color: #6496ff;
  box-shadow: 0 0 20px rgba(100,150,255,0.4);
}

.animal-image-wrapper {
  position: relative;
  display: inline-block;
}

.slaughter-early-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  background: rgba(180, 0, 0, 0.85);
  border: 2px solid #ff4444;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
  transition: all 0.2s;
}

.slaughter-early-btn:hover {
  background: rgba(255, 0, 0, 0.9);
  transform: scale(1.15);
  border-color: #ff6666;
}

.slaughter-early-btn img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px 16px 0 0;
  margin: -20px -20px 20px -20px;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.4em;
  color: #fff;
}

.modal-header .close {
  font-size: 2em;
  cursor: pointer;
  padding: 0 10px;
  color: #aaa;
  transition: color 0.2s;
}

.modal-header .close:hover {
  color: #fff;
}

.modal-body {
  padding: 0 10px;
}

.industrial-equipment-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 0;
}

.equipment-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  align-items: center;
}

.equipment-card img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(0,0,0,0.1);
}

.equipment-info h4 {
  margin: 0 0 4px 0;
  color: #fff;
  font-size: 1.1em;
}

.equipment-rarity {
  font-size: 0.9em;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  margin: 4px 0;
}

.rarity-common { background: #4a5568; color: #e2e8f0; }
.rarity-uncommon { background: #48bb78; color: white; }
.rarity-rare { background: #3182ce; color: white; }
.rarity-epic { background: #9f7aea; color: white; }
.rarity-legendary { background: #ed8936; color: white; }

.equipment-desc {
  font-size: 0.85em;
  color: #cbd5e0;
  margin: 6px 0;
  line-height: 1.4;
}

.equipment-card button {
  margin-top: 8px;
  padding: 8px 16px;
  background: #68d391;
  color: black;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

.equipment-card button:disabled {
  background: #555;
  cursor: not-allowed;
}

.highlight {
  outline: 2px solid #ff4444;
  filter: brightness(1.1);
}

.solarpanel-slot {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: rgba(255,255,255,0.4);
  border: 2px dashed rgba(255,255,255,0.2);
}

.solarpanel-slot.locked {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(0,0,0,0.3);
}

#start-production-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* визуальное затемнение категории, но клики остаются */
.production-card.has-active {
  opacity: 0.6;
  /* не ставим pointer-events: none */
}

/* чтобы кнопки внутри оставались явно кликабельными */
.production-card.has-active .production-open-btn,
.production-card.has-active button {
  pointer-events: auto; /* явное разрешение кликов на кнопках */
  opacity: 1; /* кнопки не должны выглядеть «заблокированными» визуально */
}

/* если где-то в проекте есть общий стиль .glass, который отключает клики —
   убедись, что в .production-card кнопки перекрывают это */
.production-card .production-open-btn {
  position: relative;
  z-index: 2;
}

.pump-modal {
  max-width: 480px;
  width: 92%;
}

.pump-body {
  padding: 16px;
}

.pump-top {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  align-items: start;
}

.pump-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pump-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 12px;
}

.pump-battery-slot {
  margin-top: 12px;
  text-align: center;
}

.pump-charge-btn {
  margin-top: 3px;
  text-align: center;
}

.pump-right {
  display: flex;
  flex-direction: column;
}

.pump-rate {
  margin-top: 8px;
  font-size: 0.95em;
  color: #e2e8f0;
}

.pump-energy {
  margin-top: 16px;
}

.pump-slots-title {
  margin-top: 28px;
  font-weight: 600;
  color: #fff;
}

.pump-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.pump-start {
  margin-top: 24px;
  padding: 14px;
}

#electricwaterpump-energy-container {
  width: 100%;
  margin: 2px 0;
  padding: 0 16px; /* отступ слева/справа */
  box-sizing: border-box;
}

#electricwaterpump-energy-container .energy-bar-wrapper {
  width: 100%;
  height: 15px;
  background: #111;
  border: 3px solid #333;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

#electricwaterpump-energy-container .energy-bar-fill {
  height: 100%;
  background: linear-gradient(90deg,#00ff00,#aaff00);
  transition: width 0.6s;
}

#electricwaterpump-energy-container .energy-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

@keyframes dots {
  0%, 20% { content: "."; }
  40% { content: ".."; }
  60% { content: "..."; }
  80%, 100% { content: ""; }
}
.dots::after {
  content: ".";
  animation: dots 1.5s infinite steps(3);
}


#lottery-ticket-floating {
  position: fixed;
  z-index: 10;
  /* СЛЕВА */
  left: 35%;           /* отступ от левого края */
  /* ПРИПОДНЯТЫЙ — на уровне середины экрана, но чуть выше */
  bottom: 30px;        /* вместо top/right — теперь bottom + left */
  transform: translateY(0);
  animation: float 6s ease-in-out infinite;
  pointer-events: auto;
  transition: all 0.3s ease;
}


.floating-ticket img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  background: rgba(255, 215, 0, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 3s infinite;
}
.floating-ticket {
  position: fixed;
  bottom: 120px;
  right: 20px;
  width: 76px;
  height: 76px;
  z-index: 999;
  cursor: pointer;
  animation: float 3s ease-in-out infinite, swing 4s ease-in-out infinite;
  transform-origin: bottom center;
}
.floating-ticket img { width: 100%; height: 100%; filter: drop-shadow(0 4px 12px rgba(255,215,0,0.6)); }
.floating-ticket .pulse-ring {
  position: absolute; inset: 0; border: 4px solid #ffd700; border-radius: 50%;
  animation: pulse 2s infinite; opacity: 0;
}
.floating-ticket .badge {
  position: absolute; top: -8px; right: -8px; background: #ff3b30; color: white;
  font-size: 11px; font-weight: bold; padding: 4px 8px; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4); animation: bounce 2s infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes swing { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(8deg); } 75% { transform: rotate(-8deg); } }
@keyframes pulse { 0% { transform: scale(0.8); opacity: 0; } 50% { opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.ticket-number {
  aspect-ratio: 1;
  background: linear-gradient(135deg,#222,#333);
  border: 2px solid #444;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.ticket-number:hover {
  border-color: #ffd700;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255,215,0,0.4);
}

.ticket-number.selected {
  background: linear-gradient(135deg,#ffd700,#ffaa00);
  color: #000;
  border-color: #fff;
  transform: scale(1.15);
  z-index: 10;
  animation: flip 0.8s ease-in-out;
}

.ticket-number.taken {
  background: #111;
  border-color: #444;
  color: #555;
  cursor: not-allowed;
  opacity: 0.5;
}

@keyframes flip {
  0% { transform: perspective(400px) rotateY(0); }
  50% { transform: perspective(400px) rotateY(180deg); }
  100% { transform: perspective(400px) rotateY(360deg) scale(1.15); }
}

#confirm-ticket-btn:not(:disabled) {
  background: linear-gradient(135deg,#ffd700,#ffaa00) !important;
  color: #000 !important;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(255,215,0,0.5);
}

/* Убираем скроллбар навсегда и даём списку расти */
#lottery-leaderboard {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
#lottery-leaderboard::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.ruby-icon-small {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  margin-left: 3px;
}

.total-balance-panel {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  text-align: center;
  font-size: 1.1rem;
  color: white;
}

.total-balance-item .label {
  display: block;
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 4px;
}

.total-balance-item .value {
  font-weight: bold;
  font-size: 1.4rem;
  color: #00d4ff;
}

/* Красивые кнопки сортировки */
.sort-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

.sort-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  color: white;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.sort-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

.sort-btn.active {
  background: rgba(0, 212, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
}

.sort-btn.asc .arrow { transform: rotate(0deg); }
.sort-btn.desc .arrow { transform: rotate(180deg); }

.sort-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.search-input {
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: white;
  width: 240px;
  font-size: 1rem;
}

.search-input::placeholder {
  color: rgba(255,255,255,0.7);
}

.trade-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: bold;
}

.trade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.trade-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.wallet-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wallet-address {
  font-family: 'Courier New', monospace;
  font-size: 0.95em;
  background: rgba(0,0,0,0.2);
  padding: 4px 8px;
  border-radius: 6px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-copy {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-copy:hover {
  background: rgba(0, 212, 255, 0.3);
  transform: scale(1.1);
}

.btn-copy:active {
  transform: scale(0.95);
}


.refresh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.refresh-header h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.btn-refresh {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 94, 234, 0.4);
}

.btn-refresh:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(102, 94, 234, 0.6);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.btn-refresh:active {
  transform: translateY(-1px);
}

.btn-refresh svg {
  transition: transform 0.4s ease;
}

.btn-refresh:hover svg {
  transform: rotate(180deg);
}

.player-stats {
  font-size: 1.1rem;
  color: #e0e0e0;
  font-weight: 500;
}

@media (max-width: 768px) {
  .refresh-header {
    flex-direction: column;
    text-align: center;
  }
  
  .btn-refresh {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

.fade-out-login {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.5s ease, visibility 0.5s ease !important;
}


/* ============================================= */
/*          TOPADMIN — УНИКАЛЬНЫЙ ДИЗАЙН          */
/* ============================================= */

.topadmin-players-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 24px;
  max-width: 1700px;
  margin: 0 auto;
}

.topadmin-card {
  background: linear-gradient(145deg, rgba(20, 25, 45, 0.7), rgba(10, 15, 35, 0.9));
  border-radius: 20px;
  padding: 20px;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(120, 100, 255, 0.3);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(120, 80, 255, 0.15);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.topadmin-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #7c4dff, #18ffff, #7c4dff);
  background-size: 200%;
  animation: topadmin-glow-line 4s linear infinite;
}

.topadmin-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 
    0 25px 50px rgba(124, 77, 255, 0.4),
    0 0 40px rgba(124, 77, 255, 0.3);
  border-color: #7c4dff;
  z-index: 10;
}

@keyframes topadmin-glow-line {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.topadmin-player-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(124, 77, 255, 0.3);
}

.topadmin-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.topadmin-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #7c4dff;
  box-shadow: 0 0 20px rgba(124, 77, 255, 0.6);
  object-fit: cover;
}

.topadmin-username {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.topadmin-chatid {
  font-size: 0.8rem;
  color: #18ffff;
  font-family: 'Courier New', monospace;
  background: rgba(24, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
}

.topadmin-wallet {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.topadmin-wallet-address {
  font-family: 'Courier New', monospace;
  background: rgba(124, 77, 255, 0.15);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  color: #7c4dff;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px dashed rgba(124, 77, 255, 0.3);
}

.topadmin-btn-copy {
  background: rgba(124, 77, 255, 0.2);
  border: 1px solid #7c4dff;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.topadmin-btn-copy:hover {
  background: #7c4dff;
  transform: scale(1.1);
}

.topadmin-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(124, 77, 255, 0.2);
}

.topadmin-stat {
  text-align: center;
}

.topadmin-stat-label {
  font-size: 0.75rem;
  color: #aaa;
  margin-bottom: 2px;
}

.topadmin-stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: #18ffff;
}

.topadmin-btn-trade {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: white;
  font-weight: bold;
  width: 100%;
  margin: 12px 0;
  padding: 10px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}

.topadmin-btn-inventory {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

/* Адаптивность */
@media (max-width: 1500px) {
  .topadmin-players-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .topadmin-players-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .topadmin-players-grid {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 20px;
  }
}

.topadmin-avatar-square {
  width: 72px;
  height: 72px;
  border-radius: 14px; /* не круглая, а скруглённый квадрат */
  object-fit: cover;
  border: 3px solid #7c4dff;
  box-shadow: 0 0 20px rgba(124, 77, 255, 0.6);
  flex-shrink: 0;
}

.topadmin-name-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.topadmin-username {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.topadmin-chatid {
  font-size: 0.85rem;
  color: #18ffff;
  font-family: 'Courier New', monospace;
  background: rgba(24, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-block;
  margin-top: 6px;
  font-weight: bold;
}



.topadmin-wallet-block {
  margin-top: 9px;
  padding: 6px 9px;
  background: rgba(124, 77, 255, 0.08);
  border-radius: 12px;
  border: 1px dashed rgba(124, 77, 255, 0.4);
}

.topadmin-wallet-label {
  font-size: 0.85rem;
  color: #aaa;
  margin-bottom: 6px;
  font-weight: 300;
}

.topadmin-wallet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.topadmin-wallet-address {
  font-family: 'Courier New', monospace;
  background: rgba(124, 77, 255, 0.2);
  color: #7c4dff;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: bold;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(124, 77, 255, 0.5);
}

.topadmin-btn-copy {
  background: rgba(124, 77, 255, 0.25);
  border: 1px solid #7c4dff;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.topadmin-btn-copy:hover {
  background: #7c4dff;
  transform: scale(1.15);
}

.topadmin-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-size: 0.85rem;
  color: #ccc;
  margin: 12px 0;
}

.topadmin-info-grid .label {
  color: #888;
  font-weight: 600;
}


/*/////////////////////////////////////////////////////////advent//////////////////////////////////////////*/

/* Основной контейнер */
#advent-calendar-floating {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  z-index: 10;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
}

/* Уменьшаем иконку, чтобы влезла в шапку */
.advent-floating {
  position: relative;
  width: 64px;
  height: 64px;
}

.advent-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
  transition: transform 0.3s ease;
}

.advent-floating:hover .advent-icon {
  transform: scale(1.12);
}

/* Пульсирующие снежные кольца (3 штуки для объёма) */
.snow-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(100, 200, 255, 0.15);
  transform: translate(-50%, -50%);
  animation: snowPulse 3s infinite ease-out;
  pointer-events: none;
}

.snow-pulse.delay-1 { animation-delay: 0.8s; }
.snow-pulse.delay-2 { animation-delay: 1.6s; }

@keyframes snowPulse {
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* Бейджик с номером дня */
.advent-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #ff3b30, #ff9500);
  color: white;
  font-weight: bold;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 10;
}

/* Падающие снежинки вокруг */
.snowflake {
  position: absolute;
  color: #fff;
  font-size: 18px;
  pointer-events: none;
  animation: fall linear infinite;
}

.snowflake:nth-child(1) { top: -20px; left: 10px; animation-duration: 8s; animation-delay: 0s; }
.snowflake:nth-child(2) { top: -15px; right: 5px; animation-duration: 10s; animation-delay: 2s; }
.snowflake:nth-child(3) { bottom: -10px; left: 0px; animation-duration: 12s; animation-delay: 4s; }

@keyframes fall {
  0%   { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(120px) rotate(360deg); opacity: 0; }
}

/* Плавное парение */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(3deg); }
}




/* Уникальный класс — только для адвент-календаря */
.advhidden {
  display: none !important;
}


/* ==================================== НОВЫЙ УЛУЧШЕННЫЙ АДВЕНТ ==================================== */

.advent-modal {
  max-width: 100%;
  width: 100%;
  background: linear-gradient(135deg, #0a1633, #1e3a6e);
  border: 3px solid #ffd700;
  border-radius: 24px;
  box-shadow: 
    0 0 40px rgba(255, 215, 0, 0.6),
    0 0 80px rgba(255, 215, 0, 0.3),
    inset 0 0 30px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin: auto;           /* ← добавь это */
  position: absolute;     /* ← или fixed, но absolute достаточно */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.advent-modal .modal-header {
  background: linear-gradient(90deg, #9b0e1f, #ff2d55);
  padding: 16px;
  text-align: center;
  font-size: 24px;
  color: #ffd700;
  text-shadow: 0 0 15px #ff6b35;
  position: relative;
}

.advent-modal .close {
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 38px;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 0 10px #000;
  transition: transform 0.2s;
}
.advent-modal .close:hover { transform: scale(1.2); }

.advent-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  padding: 8px;
  background: rgba(10, 22, 51, 0.3);
  border-radius: 6px;
}

.advent-cell {
  aspect-ratio: 1;

  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-size: 18px;
}


.advent-cell:hover {
  transform: translateY(-6px) scale(1.08);
  box-shadow: 0 15px 30px rgba(255, 107, 107, 0.7);
  z-index: 5;
}

/* Подарок в ячейке */
.advent-cell .gift-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-bottom: 4px;

}

/* Открытые и заблокированные */
.advent-cell.opened {

  color: #666;
  cursor: default;
  transform: scale(0.95);
  filter: grayscale(50%) opacity(0.1); /* можно оставить здесь, а не в JS */
}

.advent-cell.opened::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/gift-opened.png') center / 70% no-repeat;
  pointer-events: none;
  z-index: 1;
}
.advent-cell.opened .gift-icon { filter: grayscale(100%) opacity(0.1); }

.advent-cell.locked {
  background: #111 !important;
  opacity: 0.3;
  cursor: not-allowed;
}

/* Результат — теперь большой и красивый */
#advent-result {
  padding: 20px 20px;
  text-align: center;
  min-height: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Вспышка света при открытии подарка */
.flash-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 10%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.flash-overlay.active {
  animation: flash 1.2s ease-out;
}
@keyframes flash {
  0%   { opacity: 0; transform: scale(0.3); }
  40%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Анимация появления приза */
.prize-reveal {
  opacity: 0;
  transform: scale(0.4) translateY(30px);
  animation: prizeAppear 1s ease-out 0.4s forwards;
}
@keyframes prizeAppear {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Большая иконка приза */
.prize-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin: 16px 0;
  border-radius: 20px;
  box-shadow: 0 0 30px gold;
  animation: floatPrize 4s ease-in-out infinite;
}
@keyframes floatPrize {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(4deg); }
}

/* Кнопка "Забрать" */
.claim-btn {
  margin-top: 20px;
  padding: 14px 40px;
  background: linear-gradient(45deg, #ffd700, #ff6b35);
  color: #000;
  font-weight: bold;
  font-size: 20px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0.5);
  transition: all 0.3s;
  animation: pulseBtn 2s infinite;
}
.claim-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 30px rgba(255, 107, 0, 0.7);
}
.claim-btn:active {
  transform: scale(0.98);
}
@keyframes pulseBtn {
  0%, 100% { box-shadow: 0 8px 20px rgba(255, 107, 0, 0.5); }
  50%      { box-shadow: 0 8px 30px rgba(255, 107, 0, 0.9); }
}

.adv-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.adv-fullscreen.hidden {
  display: none;
}

.adv-fs-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.adv-fs-flash.active {
  animation: fsFlash 0.8s ease-out;
}

@keyframes fsFlash {
  0%   { opacity: 0; transform: scale(0.3); }
  40%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.5); }
}

#adv-fs-img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  animation: fsPrizeAppear 0.8s ease-out;
}

@keyframes fsPrizeAppear {
  0%   { opacity: 0; transform: scale(0.3); }
  100% { opacity: 1; transform: scale(1); }
}

#adv-fs-text {
  color: gold;
  margin-top: 16px;
  font-size: 34px;
  text-align: center;
  text-shadow: 0 0 25px gold;
}

#advent-claim-btn {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  padding: 16px 40px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);

  background: linear-gradient(145deg, #ffd700, #ffb800, #ff9500);
  border: 3px solid #fff;
  border-radius: 50px;
  box-shadow: 
    0 8px 20px rgba(255, 215, 0, 0.4),
    0 0 30px rgba(255, 193, 7, 0.6),
    inset 0 2px 5px rgba(255, 255, 255, 0.4);

  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Пульсация */
  animation: pulse-glow 2s infinite alternate;
}

#advent-claim-btn:hover {
  transform: translateX(-50%) translateY(-4px) scale(1.05);
  box-shadow: 
    0 15px 30px rgba(255, 215, 0, 0.6),
    0 0 50px rgba(255, 193, 7, 0.9),
    inset 0 3px 8px rgba(255, 255, 255, 0.6);
  background: linear-gradient(145deg, #ffea00, #ffc107, #ff6b00);
}

#advent-claim-btn:active {
  transform: translateX(-50%) translateY(2px) scale(0.98);
  box-shadow: 
    0 5px 15px rgba(255, 215, 0, 0.4),
    0 0 20px rgba(255, 193, 7, 0.7);
}


/* Мобильная адаптация */
@media (max-width: 480px) {
  #advent-claim-btn {
    padding: 14px 32px;
    font-size: 20px;
    bottom: 20px;
  }
}