* {
  box-sizing: border-box;
  user-select: none;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background: #7fc7ec;
  color: #fff;
}

body.registering #app {
  display: none;
}

body.registering #registerScreen {
  display: flex;
}

#registerScreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22), transparent 25%),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(180deg, #4fb2e6, #9bd8f4);
}

.registerCard {
  width: min(390px, calc(100vw - 28px));
  background: #f8fafc;
  color: #0f172a;
  border: 4px solid #facc15;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
  text-align: center;
}

.registerCard h1 {
  margin: 0 0 6px;
  font-size: 34px;
  color: #0f172a;
  letter-spacing: 1px;
}

.registerCard p {
  margin: 0 0 16px;
  color: #475569;
  font-size: 14px;
}

.registerCard button {
  width: 100%;
  margin-top: 8px;
}


.authTabs {
  display:flex;
  gap:8px;
  padding:5px;
  margin: 0 0 14px;
  border-radius:18px;
  background:#e2e8f0;
  border:2px solid rgba(148,163,184,.55);
}
.authTab {
  flex:1;
  margin:0 !important;
  border:0;
  border-radius:13px;
  padding:11px 10px;
  font-weight:1000;
  color:#334155;
  background:transparent;
  cursor:pointer;
  box-shadow:none !important;
}
.authTab.active {
  color:#fff;
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  box-shadow:0 4px 0 rgba(30,64,175,.35) !important;
}
body.auth-login .registerOnlyAuth {
  display:none !important;
}
body.auth-register .registerOnlyAuth {
  display:flex;
}
body.auth-register .colorGrid.registerOnlyAuth {
  display:grid;
}
body.auth-login #loginBtn { display:block !important; }
body.auth-login #registerBtn { display:none !important; }
body.auth-register #loginBtn { display:none !important; }
body.auth-register #registerBtn { display:block !important; }

.registerAvatarBox {
  height: 120px;
  margin: 8px 0 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #dbeafe, #bfdbfe);
  display: flex;
  align-items: center;
  justify-content: center;
}

#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #6bbde8 0%, #9bd8f4 55%, #c9efff 100%);
}

header {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: linear-gradient(180deg, #12314a, #0a1a2b);
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  z-index: 20;
}

header h1 {
  margin: 0;
  font-size: 17px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

header .sub {
  font-size: 12px;
  color: #cfeaff;
}

#topbar {
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(10, 26, 43, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  overflow-x: auto;
  z-index: 18;
}

#creditsBox {
  background: linear-gradient(180deg, #fff4b8, #e8b92f);
  color: #3b2400;
  border: 2px solid #fff0a8;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}

button {
  border: 0;
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 900;
  cursor: pointer;
  color: white;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}

button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
}

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

button.secondary {
  background: linear-gradient(180deg, #64748b, #334155);
}

button.good {
  background: linear-gradient(180deg, #34d399, #059669);
}

button.gold {
  background: linear-gradient(180deg, #facc15, #d97706);
  color: #241100;
}

button.danger {
  background: linear-gradient(180deg, #fb7185, #be123c);
}

#status {
  margin-left: auto;
  color: #e4f6ff;
  font-size: 12px;
  white-space: nowrap;
}

#mainArea {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}



.guestLoginBtn {
  width: min(390px, calc(100vw - 28px));
  margin: 0 0 12px;
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #fff;
  font-weight: 1000;
  letter-spacing: 0.4px;
  border-radius: 999px;
  padding: 13px 22px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  text-align: center;
}

.guestLoginBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

body.guest-user #creditsCluster,
body.guest-user #receptionCallBtn {
  display: none !important;
}

body.guest-user #openCreateRoomFromNavigatorBtn {
  display: none !important;
}

#roomArea {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #66bfe9 0%, #8ed3f0 52%, #bde8fa 100%);
  touch-action: none;
  cursor: default;
}

#roomArea.battleBackground {
  background: #050505;
}

#roomArea.lobbyBackground {
  background:
    url("../estilos/fondos/lobby.png?v=fix181") center center / cover no-repeat,
    linear-gradient(180deg, #3ba8dc, #8bd4f0 55%, #d5f4ff);
}

#roomArea::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.32), transparent 18%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.22), transparent 16%);
  pointer-events: none;
}

#roomArea.battleBackground::before,
#roomArea.lobbyBackground::before {
  display: none;
}

#roomArea.dragging {
  cursor: grabbing;
}

#lobbyLanding {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--lobby-safe-top, clamp(68px, 8vh, 96px));
  bottom: var(--lobby-safe-bottom, 18px);
  z-index: 70;
  display: none;
  pointer-events: none;
}

#roomArea.isLobby #lobbyLanding {
  display: block;
}

#lobbyIllustration {
  position: absolute;
  left: clamp(38px, 6vw, 110px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(240px, 34vw, 580px);
  max-width: min(58vw, calc(100vw - 36px));
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

@media (max-width: 900px) {
  #lobbyLanding {
    top: var(--lobby-safe-top, 76px);
    bottom: var(--lobby-safe-bottom, 16px);
  }
  #lobbyIllustration {
    left: clamp(26px, 5vw, 64px);
    width: min(52vw, 380px);
    max-width: calc(100vw - 32px);
  }
}

@media (max-width: 560px) {
  #lobbyLanding {
    top: var(--lobby-safe-top, 88px);
    bottom: var(--lobby-safe-bottom, 18px);
  }
  #lobbyIllustration {
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(78vw, 350px);
    object-position: center center;
  }
}

.hotelLogo {
  font-size: clamp(42px, 9vw, 104px);
  line-height: 1;
  font-weight: 1000;
  color: white;
  text-shadow: 0 8px 0 rgba(0, 0, 0, 0.18), 0 18px 36px rgba(0, 0, 0, 0.22);
  letter-spacing: 2px;
}

.hotelSubtitle {
  margin-top: 12px;
  margin-bottom: 22px;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  padding: 8px 16px;
}

#lobbyLanding button {
  font-size: 16px;
  padding: 12px 18px;
}

#lobbyPortfolioBtn {
  display: none;
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 75;
  pointer-events: auto;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #fff;
  font-weight: 1000;
  letter-spacing: 0.4px;
  border-radius: 999px;
  padding: 13px 22px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
}

body.mobile-ui #roomArea.isLobby #lobbyPortfolioBtn {
  display: block;
}

body.mobile-ui #roomArea.isLobby #chatFloat {
  display: none !important;
}

/* FIX160: lobby móvil centrado y más alto */
body.mobile-ui #roomArea.isLobby #lobbyLanding {
  top: 0;
  bottom: 0;
}

body.mobile-ui #roomArea.isLobby #lobbyIllustration {
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(82vw, 360px);
  max-width: calc(100vw - 28px);
  max-height: 58vh;
  object-position: center center;
}

body.mobile-ui #roomArea.isLobby #lobbyPortfolioBtn {
  display: block;
  left: 50%;
  top: auto;
  bottom: clamp(112px, 17vh, 165px);
  transform: translateX(-50%);
}

.projectLinkAction button {
  width: 100%;
  background: linear-gradient(180deg, #38bdf8, #2563eb);
  color: #ffffff;
}

.roadmapConstructionBtn.paidConstruction {
  background: linear-gradient(180deg, #34d399, #059669);
  color: #ffffff;
}


#stageScaler {
  position: absolute;
  left: 50%;
  top: 49%;
  transform-origin: center center;
}

#roomArea.isLobby #stageScaler,
#roomArea.isLobby #zoomBox,
#roomArea.isLobby #chatFloat {
  display: none;
}

#roomStage {
  position: relative;
  width: 1280px;
  height: 820px;
  transform: translate(-50%, -50%);
}

#world {
  position: absolute;
  inset: 0;
}

.tile {
  position: absolute;
  width: 78px;
  height: 39px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: #d6edc2;
  border: 1px solid rgba(59, 93, 65, 0.22);
  cursor: pointer;
  z-index: 2;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
}

.tile.alt {
  background: #c5e3b2;
}

.tile:hover {
  filter: brightness(1.09) saturate(1.08);
}

.tile.battleTile {
  background: #171717;
  border-color: #292929;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.04);
}

.tile.poolTile {
  background: #67e8f9;
}

.tile.grassTile {
  background: #86efac;
}

.object {
  position: absolute;
  transform: translate(-50%, -78%);
  transform-origin: center bottom;
  cursor: pointer;
  z-index: 6;
  transition: opacity 0.12s, filter 0.12s, left 0.18s linear, top 0.18s linear;
}

.object.selected {
  filter: drop-shadow(0 0 11px rgba(255, 216, 70, 0.98));
}

.object.moving {
  opacity: 0.5;
  pointer-events: none;
}

.object.ghost {
  opacity: 0.5;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.85));
}

.sofa {
  width: 106px;
  height: 70px;
}

.sofa::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 18px;
  width: 90px;
  height: 44px;
  background: #2459c9;
  border-radius: 14px 14px 9px 9px;
  box-shadow: inset 0 13px #4d86ff, 0 9px 0 #123783;
}

.sofa::after {
  content: "";
  position: absolute;
  left: 0;
  top: 29px;
  width: 106px;
  height: 27px;
  background: #1e40af;
  border-radius: 13px;
  box-shadow: inset 0 9px #3b82f6;
}

.table {
  width: 76px;
  height: 68px;
}

.table::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 60px;
  height: 38px;
  background: #92400e;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 12px 0 #5b2608;
}

.table::after {
  content: "";
  position: absolute;
  left: 32px;
  top: 36px;
  width: 12px;
  height: 25px;
  background: #4a1d05;
  border-radius: 4px;
}

.plant,
.tree {
  width: 66px;
  height: 78px;
}

.plant::before,
.tree::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  width: 28px;
  height: 31px;
  background: #8b5a2b;
  border-radius: 5px 5px 10px 10px;
  box-shadow: inset 0 7px rgba(255, 255, 255, 0.16);
}

.plant::after,
.tree::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 0;
  width: 44px;
  height: 49px;
  background: #16a34a;
  border-radius: 50%;
  box-shadow: -14px 13px #15803d, 14px 13px #22c55e, 0 24px #166534;
}

.tree {
  transform: translate(-50%, -88%);
}

.tree::after {
  width: 62px;
  height: 62px;
  left: 2px;
  top: -16px;
  background: #15803d;
  box-shadow: -20px 18px #166534, 20px 18px #22c55e, 0 36px #14532d;
}

.lamp {
  width: 54px;
  height: 88px;
}

.lamp::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 25px;
  width: 12px;
  height: 52px;
  background: #475569;
  border-radius: 5px;
}

.lamp::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  width: 44px;
  height: 33px;
  background: #facc15;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.42));
}

.chair {
  width: 60px;
  height: 70px;
}

.chair::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 20px;
  width: 44px;
  height: 35px;
  background: #dc2626;
  border-radius: 8px;
  box-shadow: inset 0 10px #f87171, 0 10px 0 #7f1d1d;
}

.chair::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  width: 28px;
  height: 28px;
  background: #b91c1c;
  border-radius: 8px 8px 4px 4px;
}

.bed {
  width: 110px;
  height: 76px;
}

.bed::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 28px;
  width: 102px;
  height: 38px;
  background: #7c3aed;
  border-radius: 12px;
  box-shadow: inset 0 12px #a78bfa, 0 8px 0 #4c1d95;
}

.bed::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  width: 34px;
  height: 22px;
  background: #f8fafc;
  border-radius: 8px;
}

.rug {
  width: 98px;
  height: 48px;
  transform: translate(-50%, -50%);
}

.rug::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f97316;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: inset 0 0 0 8px #fed7aa;
}

.bench {
  width: 100px;
  height: 60px;
}

.bench::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 20px;
  width: 90px;
  height: 22px;
  background: #78350f;
  border-radius: 8px;
  box-shadow: inset 0 8px #b45309, 0 14px 0 -5px #451a03;
}

.fountain {
  width: 80px;
  height: 80px;
}

.fountain::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 28px;
  width: 64px;
  height: 36px;
  background: #94a3b8;
  border-radius: 50%;
  box-shadow: inset 0 8px #cbd5e1;
}

.fountain::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 0;
  width: 28px;
  height: 45px;
  background: #38bdf8;
  border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
}

.poolWater {
  width: 92px;
  height: 46px;
  transform: translate(-50%, -50%);
}

.poolWater::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #22d3ee;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: inset 0 0 0 5px #67e8f9;
}

.dragonStatue {
  width: 88px;
  height: 92px;
}

.dragonStatue::before {
  content: "🐉";
  position: absolute;
  left: 0;
  top: -8px;
  width: 88px;
  height: 88px;
  font-size: 58px;
  text-align: center;
  filter: drop-shadow(0 6px 0 #44403c);
}

.divinitySphere {
  width: 82px;
  height: 82px;
}

.divinitySphere::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 4px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #fef08a 25%, #a855f7 55%, #312e81 85%);
  box-shadow: 0 0 24px #fef08a, 0 0 44px #a855f7;
}

.avatar,
.profileAvatar {
  position: absolute;
  width: 70px;
  height: 88px;
  transform: translate(-50%, -88%);
  z-index: 10;
  transition: left 0.30s linear, top 0.30s linear;
  cursor: pointer;
  pointer-events: auto;
}

.profileAvatar {
  position: relative;
  transform: none;
  margin: 10px auto;
  cursor: default;
}

.avatar.walking .legs {
  animation: walkLegs 0.28s infinite alternate ease-in-out;
}

.avatar.walking .body {
  animation: walkBody 0.28s infinite alternate ease-in-out;
}

@keyframes walkLegs {
  from {
    transform: translateX(-2px);
  }

  to {
    transform: translateX(2px);
  }
}

@keyframes walkBody {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-2px);
  }
}

.avatar .name {
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  background: rgba(6, 12, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  white-space: nowrap;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

.avatar .bubbleStack {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.bubble {
  position: relative;
  max-width: 245px;
  min-width: 54px;
  padding: 7px 10px;
  background: white;
  color: #111827;
  border: 2px solid #d6dde8;
  border-radius: 14px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18);
  animation: pop 0.15s ease-out;
}

.bubble:last-child::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: white;
  border-right: 2px solid #d6dde8;
  border-bottom: 2px solid #d6dde8;
}

@keyframes pop {
  from {
    transform: scale(0.85);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.avatar .hair,
.profileAvatar .hair {
  position: absolute;
  width: 33px;
  height: 16px;
  left: 6px;
  top: -1px;
  background: #4b2e1e;
  border-radius: 14px 14px 8px 8px;
  z-index: 2;
}

.avatar .head,
.profileAvatar .head {
  position: absolute;
  width: 31px;
  height: 31px;
  left: 7px;
  top: 0;
  background: #f2c9a8;
  border-radius: 50%;
  border: 2px solid #71452d;
}

.avatar .body,
.profileAvatar .body {
  position: absolute;
  width: 35px;
  height: 39px;
  left: 5px;
  top: 29px;
  border-radius: 10px 10px 5px 5px;
  border: 2px solid rgba(0, 0, 0, 0.35);
}

.avatar .legs,
.profileAvatar .legs {
  position: absolute;
  width: 33px;
  height: 18px;
  left: 6px;
  top: 65px;
  background: linear-gradient(90deg, #2563eb 45%, transparent 45%, transparent 55%, #2563eb 55%);
}

.profilePreview {
  background: linear-gradient(180deg, #dbeafe, #bfdbfe);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#zoomBox {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 80;
  display: flex;
  gap: 6px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 6px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16);
}

#zoomBox button {
  width: 38px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  font-size: 18px;
  font-weight: 1000;
  color: #f8fafc;
  background: linear-gradient(180deg, #64748b, #263244);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 10px rgba(0,0,0,.18);
}

#zoomBox button:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #7dd3fc, #2563eb);
}

#zoomBox button:active {
  transform: translateY(1px) scale(.98);
}

#chatFloat {
  position: absolute;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 32px));
  z-index: 90;
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(7, 17, 31, 0.7);
  padding: 9px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
}

#chatInput {
  flex: 1;
  height: 40px;
  border: 2px solid #d8b45a;
  border-radius: 14px;
  background: #fff;
  color: #111827;
  padding: 0 13px;
  outline: none;
  font-size: 14px;
  user-select: text;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.08);
}

#sendBtn {
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
}

#bottomDock {
  height: 58px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #101010, #050505);
  border-top: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.28);
  z-index: 85;
}

.dockBtn {
  position: relative;
  overflow: visible;
  width: 48px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(180deg, #2b2b2b, #111);
  border: 1px solid #3f3f46;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 21px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 0 rgba(0, 0, 0, 0.4);
}

.dockIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}

.dockLabel {
  display: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1;
  color: #f8fafc;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

@media (min-width: 1040px) and (min-height: 620px) {
  body:not(.mobile-ui) #bottomDock {
    gap: 9px;
  }

  body:not(.mobile-ui) .dockBtn {
    width: auto;
    min-width: 88px;
    max-width: 132px;
    padding: 0 12px;
    justify-content: center;
    font-size: 19px;
  }

  body:not(.mobile-ui) #roadmapBtn {
    min-width: 122px;
  }

  body:not(.mobile-ui) .dockLabel {
    display: inline-flex;
    align-items: center;
  }
}

@media (min-width: 1280px) and (min-height: 700px) {
  body:not(.mobile-ui) .dockBtn {
    min-width: 104px;
    padding: 0 14px;
  }

  body:not(.mobile-ui) #roadmapBtn {
    min-width: 138px;
  }
}

.dockBtn:hover {
  filter: brightness(1.2);
}

#furniPanel,
#linkedFurniPanel,
#userPanel,
#roomPanel,
#navigatorPanel,
#catalogPanel,
#inventoryPanel,
#inventPanel,
#printerPanel,
#profilePanel,
#friendsPanel,
#gamesPanel,
#roomEntryPanel,
#battlePanel,
#battleInvitePanel,
#genericConfirmPanel,
#roomPasswordPanel,
#roomEntryPanel,
#smartRoomPanel {
  position: absolute;
  right: 28px;
  top: 76px;
  width: 300px;
  background: #f8fafc;
  color: #111827;
  border: 3px solid #d8b45a;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  z-index: 120;
  overflow: hidden;
  display: none;
}

#navigatorPanel,
#catalogPanel,
#inventoryPanel,
#friendsPanel,
#gamesPanel,
#roomEntryPanel,
#battlePanel,
#smartRoomPanel {
  width: 390px;
  max-width: calc(100vw - 20px);
}

#inventoryPanel {
  width: 520px;
  max-width: calc(100vw - 20px);
}

.panelHead {
  background: linear-gradient(180deg, #ffefb0, #e9c765);
  padding: 10px 12px;
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #241100;
}

.panelClose {
  background: #9f1239;
  border: 0;
  box-shadow: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  color: white;
}

#furniPanel .preview,
#linkedFurniPanel .preview {
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
  position: relative;
  overflow: hidden;
}

#previewIcon,
.linkedPreviewIcon {
  position: relative;
  width: 120px;
  height: 95px;
  transform: none !important;
  cursor: default;
  pointer-events: none;
}

.desc {
  padding: 10px 12px;
  font-size: 13px;
  color: #334155;
  line-height: 1.35;
}

.actions {
  padding: 0 12px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.actions button {
  box-shadow: none;
  border-radius: 10px;
  padding: 9px;
}

.inputWrap {
  padding: 0 12px 10px;
}

.inputWrap label {
  display: block;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
}

.inputWrap input {
  width: 100%;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  padding: 9px;
  user-select: text;
}

.colorGrid {
  padding: 0 12px 12px;
  display: grid;
  grid-template-columns: 1fr 60px;
  gap: 8px;
  align-items: center;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.colorGrid input {
  width: 60px;
  height: 36px;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  padding: 2px;
}

.singleAction {
  padding: 0 12px 12px;
}

.singleAction button {
  width: 100%;
  box-shadow: none;
}

.roomGridChoice {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 0 12px 10px;
}

.roomSizeBtn {
  background: #e2e8f0;
  border: 2px solid #cbd5e1;
  color: #334155;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  font-weight: 900;
}

.roomSizeBtn.active {
  background: #bbf7d0;
  border-color: #16a34a;
  color: #064e3b;
}

.roomList,
.catalogList,
.miniList {
  max-height: 310px;
  overflow-y: auto;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roomItem,
.catalogItem {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 8px;
  background: #e5e7eb;
  color: #0f172a;
}

.roomItem {
  grid-template-columns: 1fr auto;
  cursor: pointer;
}

.roomItem.hasUsers {
  background: #bbf7d0;
  border-color: #22c55e;
}

.catalogMini {
  width: 44px;
  height: 44px;
  background: #cbd5e1;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.catalogMini .object {
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -60%) scale(0.42);
}

.catalogMini.emojiMini {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.catalogItem strong,
.roomItem strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
}

.catalogItem span,
.roomItem span {
  display: block;
  color: #475569;
  font-size: 12px;
  margin-top: 2px;
}

.catalogItem button,
.roomItem button {
  box-shadow: none;
  padding: 7px 9px;
  border-radius: 9px;
}

.inventoryTabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 0 12px 10px;
}

.inventoryTab {
  box-shadow: none;
  border-radius: 999px;
  padding: 8px 7px;
  font-size: 10px;
  white-space: nowrap;
  background: linear-gradient(180deg, #cbd5e1, #94a3b8);
  color: #0f172a;
}

.inventoryTab.active {
  background: linear-gradient(180deg, #facc15, #d97706);
  color: #241100;
}

#inventoryList.inventoryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

.inventoryGridItem {
  min-height: 94px;
  border: 2px solid #dbeafe;
  border-radius: 12px;
  padding: 6px;
  background: #f1f5f9;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}

.inventoryGridItem:hover {
  border-color: #38bdf8;
  background: #e0f2fe;
}

.inventoryIconWrap .catalogMini {
  width: 46px;
  height: 46px;
}

.inventoryGridItem strong {
  width: 100%;
  color: #0f172a;
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventoryGridItem span {
  color: #475569;
  font-size: 11px;
  font-weight: 900;
}

.rareItem {
  background: linear-gradient(180deg, #fef3c7, #fde68a);
  border-color: #f59e0b;
}

.gameOption {
  margin: 0 12px 10px;
  border-radius: 14px;
  padding: 12px;
  background: #e0f2fe;
  border: 2px solid #38bdf8;
  color: #0f172a;
  cursor: pointer;
}

.gameOption strong {
  display: block;
  font-size: 15px;
}

.gameOption span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #475569;
}

.gameOption.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: #e5e7eb;
  border-color: #cbd5e1;
}

#adminPanel {
  position: absolute;
  left: 12px;
  top: 330px;
  bottom: auto;
  width: 210px;
  z-index: 115;
  display: none;
  background: rgba(15, 23, 42, 0.86);
  border: 2px solid #facc15;
  border-radius: 16px;
  padding: 10px;
  color: white;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

#adminPanel.visible {
  display: block;
}

.adminTitle {
  font-weight: 1000;
  color: #facc15;
  font-size: 13px;
  margin-bottom: 6px;
}

#adminTarget {
  font-size: 12px;
  margin-bottom: 8px;
  color: #e5e7eb;
  line-height: 1.25;
}

#adminPanel button {
  width: 100%;
  box-shadow: none;
  padding: 7px 8px;
  margin-top: 6px;
  font-size: 12px;
}

.rotateArrow {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #facc15;
  color: #111827;
  border: 3px solid white;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  font-weight: 900;
  z-index: 130;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

#arrowLeft {
  transform: translate(-115%, -50%);
}

#arrowRight {
  transform: translate(15%, -50%);
}

/* Las flechas de giro ya no se usan: el botón GIRAR espeja el mueble directamente. */
.rotateArrow {
  
}

#toast {
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 300000;
  background: rgba(7, 17, 31, 0.86);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 9px 14px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: none;
  font-size: 13px;
}

#battleHud {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 110;
  display: none;
  gap: 14px;
  align-items: center;
  background: rgba(0, 0, 0, 0.78);
  border: 2px solid #facc15;
  border-radius: 999px;
  padding: 9px 16px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

#battleHud strong {
  color: #facc15;
}

@media (max-width: 700px) {
  header {
    height: 42px;
  }

  header h1 {
    font-size: 15px;
  }

  header .sub,
  #status {
    display: none;
  }

  #topbar {
    height: 50px;
    padding: 7px;
  }

  button {
    padding: 8px 10px;
    font-size: 12px;
  }

  #bottomDock {
    height: 56px;
    gap: 5px;
  }

  .dockBtn {
    width: 38px;
    height: 42px;
    font-size: 18px;
  }

  #furniPanel,
  #linkedFurniPanel,
  #userPanel,
  #roomPanel,
  #navigatorPanel,
  #catalogPanel,
  #inventoryPanel,
  #profilePanel,
  #friendsPanel,
  #gamesPanel,
  #battlePanel,
  #battleInvitePanel {
    left: 10px;
    right: 10px;
    top: 10px;
    width: auto;
  }

  #adminPanel {
    left: 8px;
    top: 308px;
    bottom: auto;
    width: 170px;
  }

  #chatFloat {
    bottom: 70px;
  }

  .hotelLogo {
    font-size: 46px;
  }
}
/* Edición de sala */
#roomEditPanel {
  position: absolute;
  left: 12px;
  top: 86px;
  bottom: auto;
  width: 210px;
  z-index: 116;
  display: none;
  background: rgba(15, 23, 42, 0.9);
  border: 2px solid #ffffff;
  border-radius: 16px;
  padding: 10px;
  color: white;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
}

.roomEditTitle {
  font-weight: 1000;
  color: #ffffff;
  font-size: 13px;
  margin-bottom: 8px;
}

#roomEditPanel .roomEditInputWrap {
  padding: 0 0 9px;
}

#roomEditPanel .roomEditInputWrap label,
#roomEditPanel .roomEditColorGrid label {
  color: #e5e7eb;
}

#roomEditPanel .roomEditInputWrap input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #ffffff;
  color: #111827;
}

#roomEditPanel .roomEditColorGrid {
  padding: 0 0 10px;
  grid-template-columns: 1fr 54px;
  gap: 7px;
}

#roomEditPanel .roomEditColorGrid input {
  width: 54px;
  height: 32px;
}

#roomEditPanel button {
  width: 100%;
  box-shadow: none;
  padding: 8px 9px;
  font-size: 12px;
}

.roomOutline {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

 .roomOutlineShadow line {
  stroke: rgba(0, 0, 0, 0.32);
  stroke-width: 10px;
  stroke-linecap: round;
  filter: blur(3px);
}

.roomOutlineStroke line {
  stroke: #ffffff;
  stroke-width: 7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.22));
}

@media (max-width: 700px) {
  #roomEditPanel {
    left: 8px;
    top: 70px;
    bottom: auto;
    width: 180px;
  }
}

/* Ajustes finales avatar SVG, chat y ventanas */
#roomArea:not(.lobbyBackground):not(.battleBackground) {
  background: url("../estilos/fondos/fondo1.png") center center / cover no-repeat;
}

#roomArea:not(.lobbyBackground):not(.battleBackground)::before {
  display: none;
}

.avatar,
.profileAvatar {
  width: 58px;
  height: 92px;
  overflow: visible;
}

.avatar .hair,
.avatar .head,
.avatar .body,
.avatar .legs,
.profileAvatar .hair,
.profileAvatar .head,
.profileAvatar .body,
.profileAvatar .legs {
  
}

.characterSprite {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 58px;
  height: 92px;
  transform: translateX(-50%) scale(var(--avatar-scale, 1));
  transform-origin: 50% 100%;
  background-color: #ef4444;
  background-image: none;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-mask: url("../estilos/personajes/personaje.svg") center bottom / contain no-repeat;
  mask: url("../estilos/personajes/personaje.svg") center bottom / contain no-repeat;
  z-index: 1;
  pointer-events: none;
}

.profileAvatar .characterSprite {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.avatar.walking .characterSprite {
  animation: avatarFastHop 0.07s infinite alternate ease-in-out;
}

@keyframes avatarFastHop {
  from {
    transform: translateX(-50%) translateY(0) scale(var(--avatar-scale, 1));
  }

  to {
    transform: translateX(-50%) translateY(calc(-8px * var(--avatar-scale, 1))) scale(var(--avatar-scale, 1));
  }
}

.avatar .name {
  top: -28px;
  z-index: 5;
  pointer-events: none;
}

.avatar .bubbleStack {
  bottom: 116px;
  z-index: 6;
  pointer-events: none;
}

.bubble {
  overflow: visible;
}

.avatarBadge {
  position: absolute;
  right: -10px;
  bottom: 22px;
  width: 22px;
  height: 22px;
  object-fit: contain;
  z-index: 4;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.profileBadge {
  position: absolute;
  right: -20px;
  bottom: 18px;
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

.friendBadge {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.friendItem {
  grid-template-columns: 48px 1fr auto;
}

.friendItem.online {
  background: #dcfce7;
  border-color: #22c55e;
}

.friendItem.offline {
  background: #e5e7eb;
  border-color: #cbd5e1;
}

.friendStatus {
  font-weight: 900;
}

.statusOnline {
  color: #15803d;
}

.statusOffline {
  color: #64748b;
}

.friendActions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.friendActions button {
  box-shadow: none;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 11px;
}

.panelHead {
  cursor: grab;
}

.draggingPanel .panelHead {
  cursor: grabbing;
}

#roomPanel,
#navigatorPanel,
#catalogPanel,
#inventoryPanel,
#inventPanel,
#printerPanel,
#profilePanel,
#friendsPanel,
#gamesPanel,
#roomEntryPanel,
#battlePanel,
#battleInvitePanel,
#genericConfirmPanel,
#roomPasswordPanel,
#roomEntryPanel,
#smartRoomPanel {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

#furniPanel,
#userPanel {
  right: 14px;
  bottom: 76px;
  left: auto;
  top: auto;
  transform: none;
}


/* Ajuste placas: placa en nombre y slots de perfil */
.avatarBadge {
  
}

.avatar .name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nameBadge {
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: middle;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.profilePreviewWithBadges {
  height: 142px;
  justify-content: center;
  gap: 18px;
  padding: 10px 12px;
}

.profilePreviewWithBadges .profileAvatar {
  margin: 0;
  flex: 0 0 58px;
}

.profileBadgesBox {
  min-width: 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.profileBadgesTitle {
  font-size: 11px;
  font-weight: 1000;
  color: #334155;
  letter-spacing: 0.5px;
}

.profileBadgeSlots {
  display: grid;
  grid-template-columns: repeat(2, 54px);
  gap: 8px;
}

.profileBadgeSlot {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  border: 2px dashed rgba(51, 65, 85, 0.24);
  background: rgba(255, 255, 255, 0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.profileBadgeSlot .profileBadge,
.profileBadge {
  position: static;
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

/* Ajuste arrastre ventanas y navegador de salas */
.draggingPanel {
  transition: none !important;
}

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

.roomSection + .roomSection {
  margin-top: 12px;
}

.roomSectionTitle {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #0f172a;
  font-size: 13px;
  font-weight: 1000;
  padding: 6px 2px 2px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}

.roomSectionEmpty {
  padding: 8px;
  background: #e5e7eb;
  border-radius: 10px;
}

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

.roomItemActions button {
  box-shadow: none;
  padding: 7px 9px;
  border-radius: 9px;
}

.roomItemActions .danger {
  background: linear-gradient(180deg, #fb7185, #be123c);
}

.navigatorCreateWrap {
  padding: 0 12px 10px;
}

.navigatorCreateWrap button {
  width: 100%;
  box-shadow: none;
}

.adminCreateOptions {
  display: none;
  padding: 0 12px 10px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.radioOption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  user-select: none;
}

.radioOption input {
  user-select: auto;
}

.tile.buildGhost {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px dashed rgba(255, 255, 255, 0.38);
  box-shadow: none;
  opacity: 0.55;
}

.tile.buildGhost:hover {
  background: rgba(255, 255, 255, 0.34) !important;
  opacity: 1;
}

#customBuildPanel {
  position: absolute;
  right: 14px;
  top: 92px;
  width: 390px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 180px);
  background: #f8fafc;
  color: #111827;
  border: 3px solid #d8b45a;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  z-index: 121;
  overflow: hidden;
  display: none;
}

#customBuildPanel .catalogList {
  max-height: calc(100vh - 310px);
}

.customBuildItem.selected {
  background: #bbf7d0;
  border-color: #16a34a;
}

.adminOnlySize {
  display: none;
}

@media (max-width: 700px) {
  #customBuildPanel {
    left: 10px;
    right: 10px;
    top: 72px;
    width: auto;
  }
}


.customTileTools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 12px 10px;
}

.customTileTools button {
  box-shadow: none;
  border-radius: 10px;
  padding: 9px;
  opacity: 0.78;
}

.customTileTools button.active {
  opacity: 1;
  outline: 3px solid rgba(250, 204, 21, 0.75);
  outline-offset: 2px;
}

#roomArea.customDeleteMode .tile.customEditableTile:hover {
  background: rgba(239, 68, 68, 0.72) !important;
  border-color: #fecaca;
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.9));
}

#roomArea.customDeleteMode .tile.buildGhost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18);
  opacity: 0.35;
  filter: none;
}

/* Ajustes: chat más bajo */
#chatFloat {
  bottom: 66px;
}

/* Movimiento deslizante del personaje: no se recrea en cada tick y esta transición hace el desplazamiento entre tiles. */
.avatar {
  transition: left 0.30s linear, top 0.30s linear;
  will-change: left, top;
}

.avatar.walking .characterSprite {
  animation: avatarFastHop 0.07s infinite alternate ease-in-out;
}


.objectTileHitbox {
  position: absolute;
  width: 78px;
  height: 39px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.objectTileHitbox:hover {
  background: rgba(250, 204, 21, 0.10);
}


/* Objetos por imagen desde estilos/muebles */
.object.imageObject {
  width: var(--object-w, 92px);
  height: var(--object-h, 92px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translate(-50%, -78%);
}

.object.imageObject img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 7px 4px rgba(0, 0, 0, 0.24));
}

.object.imageObject.noObjectShadow img,
.catalogMini.imageMini.noObjectShadow img,
.previewImageObject.noObjectShadow img,
#previewIcon.imageObject.noObjectShadow img {
  filter: none !important;
}

.object.imageObject.missingImage::before,
.catalogMini.missingImage::before {
  content: "?";
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #dbeafe;
  color: #1e3a8a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  border: 2px solid #60a5fa;
}

#previewIcon.imageObject,
.previewImageObject {
  position: relative;
  width: var(--object-w, 130px);
  height: var(--object-h, 100px);
  transform: none !important;
}


#previewIcon.imageObject img,
.previewImageObject img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Nuevo catálogo por categorías */
#catalogPanel {
  width: 720px;
  max-width: calc(100vw - 24px);
  border-color: #38bdf8;
}

#catalogPanel .catalogHeadBlue,
#catalogPanel .panelHead {
  background: linear-gradient(180deg, #bae6fd, #38bdf8);
  color: #062033;
}

.catalogLayout {
  display: grid;
  grid-template-columns: 1fr 132px;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  max-height: min(620px, calc(100vh - 110px));
  overflow: hidden;
}

.catalogCategories {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 8px;
  border-left: 2px solid #dbeafe;
  overflow-y: auto;
}

.catalogCategoryBtn {
  width: 100%;
  box-shadow: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #e0f2fe, #93c5fd);
  color: #0f172a;
  border: 2px solid #bfdbfe;
  text-align: left;
}

.catalogCategoryBtn.active {
  background: linear-gradient(180deg, #38bdf8, #0284c7);
  color: white;
  border-color: #0369a1;
}

.catalogMain {
  order: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.catalogPreview {
  min-height: 210px;
  border: 2px solid #bae6fd;
  border-radius: 16px;
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.catalogPreviewImage {
  height: 184px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.catalogPreviewImage .catalogMini {
  width: 168px;
  height: 162px;
  transform: scale(1.18);
}

.catalogPreviewText strong {
  display: block;
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 7px;
}

.catalogPreviewText span {
  display: block;
  color: #334155;
  font-size: 13px;
  line-height: 1.35;
}

.catalogPreviewText b {
  display: block;
  margin-top: 8px;
  color: #0369a1;
  font-size: 13px;
}

.catalogGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
}

.catalogGridItem {
  border: 2px solid #dbeafe;
  border-radius: 14px;
  padding: 8px;
  background: #f1f5f9;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  text-align: center;
}

.catalogGridItem.selected {
  border-color: #0284c7;
  background: #e0f2fe;
}

.catalogGridItem strong {
  font-size: 12px;
  line-height: 1.15;
}

.catalogGridItem span {
  font-size: 11px;
  color: #475569;
}

.catalogGridItem button {
  width: 100%;
  padding: 6px 8px;
  font-size: 11px;
  box-shadow: none;
}

.catalogMini.imageMini {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
}

.catalogMini.imageMini img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 700px) {
  #chatFloat {
    bottom: 62px;
  }

  .catalogLayout {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 82px);
  }

  .catalogCategories {
    order: 1;
    flex-direction: row;
    border-left: 0;
    border-bottom: 2px solid #dbeafe;
    padding-left: 0;
    padding-bottom: 8px;
  }

  .catalogCategoryBtn {
    width: auto;
    min-width: 92px;
    text-align: center;
  }

  .catalogPreview {
    grid-template-columns: 1fr;
  }

  .catalogMain {
    order: 2;
  }
}



/* Notificaciones y privacidad de amigos */
.dockBtn.hasNotification::after {
  content: attr(data-count);
  position: absolute;
  right: -4px;
  top: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  border: 2px solid #ffffff;
  font-size: 11px;
  font-weight: 1000;
  line-height: 15px;
  text-align: center;
  z-index: 999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.followToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  background: #eef2ff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}

.followToggle input {
  width: 16px;
  height: 16px;
}

.friendActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.friendActions button {
  padding: 7px 8px;
  font-size: 11px;
}

/* Acceso de salas */
.roomAccessBox {
  display: grid;
  gap: 7px;
  padding-bottom: 10px;
}

.roomAccessBox label {
  color: #e5e7eb;
  font-size: 11px;
  font-weight: 900;
}

.roomAccessBox select,
.roomAccessBox input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: #ffffff;
  color: #111827;
  padding: 8px;
  font-weight: 800;
}

.roomAccessIcon {
  display: inline-block;
  margin-left: 4px;
  font-size: 14px;
  vertical-align: middle;
}

#roomEntryPanel {
  width: 320px;
}


#genericConfirmPanel,
#roomPasswordPanel {
  width: 340px;
}

#roomPasswordModalInput {
  width: 100%;
}

/* Ajuste final movimiento: el avatar se desliza entre tiles mientras el sprite hace saltitos. */
.avatar {
  transition: left 0.24s linear, top 0.24s linear !important;
  will-change: left, top;
}

.avatar.walking .characterSprite {
  animation: avatarFastHop 0.08s infinite alternate ease-in-out !important;
}

.roomAccessIcon {
  display: inline-block;
  vertical-align: -1px;
  margin-right: 2px;
}


/* Sistema INVENTAR */
#inventPanel {
  max-width: min(920px, calc(100vw - 24px));
  width: 860px;
}

#printerPanel {
  max-width: min(940px, calc(100vw - 24px));
  width: 900px;
}

.inventLayout {
  display: grid;
  grid-template-columns: 1.2fr 230px 190px;
  gap: 14px;
  padding: 0 14px 14px;
  align-items: start;
}

.inventBoxTitle {
  color: #0f172a;
  font-size: 13px;
  font-weight: 1000;
  margin: 0 0 8px;
}

.inventInventoryBox,
.inventCraftBox,
.inventResultBox {
  background: #f8fafc;
  border: 2px solid #dbeafe;
  border-radius: 16px;
  padding: 10px;
}

.inventInventoryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  max-height: 330px;
  overflow: auto;
}

.inventInventoryItem {
  min-height: 100px;
  border: 2px solid #e2e8f0;
  border-radius: 13px;
  background: #f1f5f9;
  color: #0f172a;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  cursor: grab;
}

.inventInventoryItem:active {
  cursor: grabbing;
}

.inventInventoryItem .catalogMini {
  width: 50px;
  height: 50px;
}

.inventInventoryItem strong,
.craftSlot strong,
.craftResult strong {
  width: 100%;
  font-size: 10px;
  line-height: 1.1;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventInventoryItem span,
.craftSlot span,
.craftResult span {
  font-size: 11px;
  font-weight: 1000;
  color: #475569;
}

.craftGrid {
  display: grid;
  grid-template-columns: repeat(3, 62px);
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}

.craftSlot,
.craftResult {
  min-height: 72px;
  border: 2px dashed #94a3b8;
  border-radius: 13px;
  background: #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #0f172a;
  text-align: center;
  padding: 5px;
}

.craftSlot.filled,
.craftResult.ready {
  border-style: solid;
  border-color: #38bdf8;
  background: #e0f2fe;
  cursor: pointer;
}

.craftSlot .catalogMini,
.craftResult .catalogMini {
  width: 44px;
  height: 44px;
}

.craftResult {
  min-height: 120px;
}

.craftResult.ready {
  border-color: #22c55e;
  background: #dcfce7;
}

#clearCraftBtn {
  width: 100%;
}

.inventoryGridItem.notPlaceable {
  cursor: default;
  opacity: 0.9;
}

.inventoryGridItem.notPlaceable:hover {
  border-color: #dbeafe;
  background: #f1f5f9;
}

@media (max-width: 760px) {
  .inventLayout {
    grid-template-columns: 1fr;
  }

  #inventPanel {
    width: calc(100vw - 20px);
  }
}

/* Ajustes inventario dividido e INVENTAR */
#inventoryList.inventoryDivided {
  display: block;
  padding: 0 12px 12px;
  overflow: auto;
}

.inventorySection {
  margin-bottom: 14px;
}

.inventorySectionTitle {
  margin: 0 0 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #e0f2fe;
  border: 2px solid #bae6fd;
  color: #0f172a;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.inventorySectionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}

.inventorySectionEmpty {
  grid-column: 1 / -1;
  color: #475569;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 13px;
  padding: 12px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.inventInventoryGrid {
  display: block;
}

.inventInventoryGrid .inventorySectionTitle {
  font-size: 11px;
  padding: 6px 8px;
  margin-bottom: 7px;
}

.inventInventoryGrid .inventorySectionGrid {
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.inventInventoryItem.materialItem {
  background: #fff7ed;
  border-color: #fed7aa;
}

.craftSlot {
  min-height: 72px;
}

.craftSlot .catalogMini {
  width: 54px;
  height: 54px;
}

.craftSlot:not(.filled)::after {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2px dashed rgba(15, 23, 42, 0.18);
}

.craftResult .craftHint {
  font-size: 10px;
  font-weight: 1000;
  color: #15803d;
  text-transform: uppercase;
}

.craftResult .craftCollectBtn {
  width: 100%;
  margin-top: 4px;
  padding: 7px 8px;
  border-radius: 10px;
  font-size: 11px;
}

/* Ajustes cabecera compacta */
header {
  
}

#topbar {
  position: relative;
  height: 54px;
  overflow: visible;
}

#topbar #roomTitle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: min(46vw, 520px);
  color: #fff;
  font-size: 18px;
  font-weight: 1000;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
}

#status {
  margin-left: auto;
  font-weight: 900;
  color: #e4f6ff;
}

/* Inventario estable con 3 categorías */
.inventoryTabs {
  grid-template-columns: repeat(4, 1fr);
}

#inventoryPanel {
  min-height: 520px;
}

#inventoryList.inventoryGrid {
  min-height: 380px;
  max-height: 380px;
  overflow: auto;
  align-content: start;
}

/* Categorías plegables en INVENTAR */
.inventInventoryGrid {
  display: block;
  max-height: 330px;
  overflow: auto;
}

.inventSection {
  margin-bottom: 10px;
}

.inventSectionHead {
  width: 100%;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  margin: 0 0 7px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0f172a;
  box-shadow: none;
  text-align: left;
}

.inventSectionHead strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.inventSectionHead em {
  font-style: normal;
  font-size: 11px;
  font-weight: 1000;
  color: #475569;
}

.inventSectionArrow {
  font-size: 11px;
  font-weight: 1000;
}

.inventSectionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.inventInventoryItem.componentItem {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.craftResult .craftHint {
  
}

/* Ajustes solicitados: inventario, catálogo y edición de tiles */
#inventoryPanel .inventoryTabs {
  margin: 8px 10px 10px;
  gap: 8px;
}

#inventoryPanel .inventoryTab {
  padding: 7px 8px;
}

.roomEditTileTools {
  display: none;
  padding: 0 0 10px;
}

.roomEditTileTools label {
  display: block;
  margin-bottom: 6px;
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 900;
}

.roomEditTileButtons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.roomEditTileButtons button.active {
  outline: 2px solid #facc15;
  filter: brightness(1.08);
}

.catalogPreviewText #catalogPreviewBuyBtn {
  margin-top: 10px;
  width: auto;
  padding: 8px 14px;
  box-shadow: none;
}

.catalogGridItem {
  justify-content: center;
}

.catalogGridItem span,
.catalogGridItem button {
  display: none;
}


/* Preview y edición continua de tiles */
.tileEditPreview {
  position: absolute;
  width: 78px;
  height: 39px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  pointer-events: none;
  opacity: 0.72;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.65);
}

.tileEditPreview.draw {
  background: rgba(34, 197, 94, 0.55);
}

.tileEditPreview.delete {
  background: rgba(239, 68, 68, 0.55);
  border-color: rgba(254, 202, 202, 0.98);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.75);
}

.customBaseSizeBox {
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  font-weight: 900;
}

.customBaseSizeBox input {
  width: 72px;
  padding: 8px;
  text-align: center;
  border-radius: 10px;
  border: 2px solid #cbd5e1;
  font-weight: 900;
}

/* Panel edición de sala contraíble */
#roomEditPanel .roomEditHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

#roomEditPanel .roomEditTitle {
  margin-bottom: 0;
}

.roomEditCollapseBtn {
  width: 28px !important;
  height: 26px;
  padding: 0 !important;
  border-radius: 8px;
  font-size: 16px !important;
  line-height: 1;
}

#roomEditPanel.collapsed {
  width: 150px;
  padding: 8px 10px;
}

#roomEditPanel.collapsed .roomEditBody {
  display: none;
}

/* Globos de chat más largos, sin saltos de línea */
.avatar .bubbleStack {
  bottom: 124px;
}

.bubble {
  width: max-content;
  max-width: min(560px, calc(100vw - 48px));
  min-width: 96px;
  padding: 9px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.15;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Organizador de placas en editar perfil */
.profileBadgeEditor {
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  margin-top: 10px;
  padding-top: 10px;
}

.profileBadgeEditorTitle {
  font-size: 12px;
  font-weight: 1000;
  color: #334155;
  margin: 8px 0 6px;
}

.editableBadgeSlots,
.availableBadgeGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.editableBadgeSlot {
  height: 50px;
  border-radius: 12px;
  border: 2px dashed rgba(51, 65, 85, 0.25);
  background: rgba(255, 255, 255, 0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-weight: 1000;
}

.availableBadgeItem {
  height: 50px;
  padding: 4px;
  border-radius: 12px;
  background: #e2e8f0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.availableBadgeItem.active {
  outline: 3px solid #facc15;
  background: #fff7cc;
}

.editableBadgeImg,
.availableBadgeImg {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.badgeEmptyDesc {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
}

/* Admin visual panel removed: admin tools now use chat commands. */
#adminPanel {  }

.vitrinaObject img {
  filter: drop-shadow(0 6px 8px rgba(15, 23, 42, 0.22));
}

.roomVisibilityBox {
  margin-top: 8px;
  display: block;
}

.roomVisibilityBox label {
  display: block;
  margin-bottom: 4px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.roomVisibilityBox select {
  width: 100%;
  height: 34px;
  border-radius: 10px;
  border: 2px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  padding: 0 8px;
}

.navigatorSearchBox {
  margin: 8px 0 10px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.06);
  display: grid;
  gap: 7px;
}

.navigatorSearchBox input {
  width: 100%;
  height: 34px;
  border-radius: 10px;
  border: 2px solid #cbd5e1;
  padding: 0 10px;
  color: #0f172a;
  font-weight: 800;
  outline: none;
}

.navigatorSearchModes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.navigatorSearchModes button {
  padding: 7px 8px;
  border-radius: 10px;
  font-size: 12px;
  background: linear-gradient(180deg, #94a3b8, #64748b);
}

.navigatorSearchModes button.active {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
}

/* Ajustes solicitados */
#navigatorPanel {
  width: 460px;
  max-width: calc(100vw - 20px);
}

#navigatorPanel .roomList {
  max-height: 390px;
}

.navigatorCreateWrap.navigatorCreateBottom {
  padding: 10px 12px 14px;
  border-top: 1px solid #cbd5e1;
}

.navigatorCreateWrap.navigatorCreateBottom button {
  width: 100%;
}

.containedFurniSection {
  margin: 10px;
  padding: 10px;
  border: 2px dashed #d8b45a;
  border-radius: 14px;
  background: #fff7d6;
}

.containedTitle {
  font-size: 12px;
  font-weight: 1000;
  color: #5b3b00;
  margin-bottom: 8px;
}

.containedPreview {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 8px;
  align-items: center;
}

.containedPreviewIcon {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.containedPreviewIcon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.containedInfo strong {
  display: block;
  font-size: 13px;
  color: #111827;
}

.containedInfo span {
  display: block;
  font-size: 11px;
  color: #475569;
  line-height: 1.25;
}

@keyframes objectRotateHop {
  0% { margin-top: 0; }
  45% { margin-top: -12px; }
  100% { margin-top: 0; }
}

.object.rotateHop {
  animation: objectRotateHop 0.22s ease-out;
}


/* Ajustes: catálogo fijo, alfombra SVG coloreable */
#catalogPanel {
  height: min(690px, calc(100vh - 28px));
}

#catalogPanel .catalogLayout {
  height: calc(100% - 46px);
  max-height: none;
}

#catalogPanel .catalogMain,
#catalogPanel .catalogGrid {
  min-height: 0;
}

.catalogColorRow {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

.catalogColorOptions {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  gap: 7px;
}

.catalogColorOption {
  width: 30px;
  height: 30px;
  border: 2px solid #e2e8f0;
  border-radius: 9px;
  cursor: pointer;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 2px 6px rgba(15,23,42,.10);
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalogColorOptionPreview {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.catalogColorOption.active {
  border-color: #0f172a;
  transform: scale(1.08);
}

.tintableObject .tintedObjectImage,
.tintedMiniImage {
  width: 100%;
  height: 100%;
  background: var(--tint, #f97316);
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.catalogMini.tintableMini,
.imageObject.tintableObject {
  background: transparent;
}


/* Alfombra coloreable: fallback visible aunque el SVG no exista todavía. */
.tintedRugShape {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent !important;
}

.tintedRugShape::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 14%;
  height: 54%;
  background: var(--tint, #f97316);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border-radius: 10px;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.10), inset 0 7px 0 rgba(255, 255, 255, 0.18);
}

.catalogMini .tintedRugShape::before,
#previewIcon .tintedRugShape::before,
.previewImageObject .tintedRugShape::before {
  left: 4%;
  right: 4%;
  bottom: 12%;
  height: 60%;
}


/* Alfombra SVG real: no usar formas CSS inventadas. La silueta se toma de hogar_07.svg mediante --mask-url. */
.tintedObjectImage,
.tintedMiniImage {
  display: block;
}

.inventoryColorMeta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:10px;
  line-height:1;
  opacity:.9;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.inventoryColorMeta i{
  width:12px;
  height:12px;
  border-radius:999px;
  display:inline-block;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  flex:0 0 auto;
}


/* Ventana IMPRESORA 3D */
.printerLayout {
  display: grid;
  grid-template-columns: 1fr 220px 250px;
  gap: 14px;
  padding: 0 14px 14px;
  align-items: start;
}

.printerInventoryBox,
.printerSlotsBox,
.printerMachineBox {
  background: #f8fafc;
  border: 2px solid #dbeafe;
  border-radius: 16px;
  padding: 10px;
  color: #0f172a;
}

.printerInventoryGrid {
  display: block;
  max-height: 330px;
  overflow: auto;
}

.printerSectionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.printerSectionHead {
  background: #dbeafe;
}

.printerInventoryItem {
  min-height: 100px;
  border: 2px solid #e2e8f0;
  border-radius: 13px;
  background: #f1f5f9;
  color: #0f172a;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  cursor: grab;
}

.printerInventoryItem.file3dItem {
  background: #f5f3ff;
  border-color: #ddd6fe;
}

.printerInventoryItem .catalogMini {
  width: 50px;
  height: 50px;
}

.printerInventoryItem strong,
.printerSlot strong {
  width: 100%;
  font-size: 10px;
  line-height: 1.1;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.printerInventoryItem span,
.printerSlot span {
  font-size: 11px;
  font-weight: 900;
  color: #475569;
}

.printerSlot {
  min-height: 86px;
  border: 2px dashed #94a3b8;
  border-radius: 14px;
  background: #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.printerSlot.filled {
  border-style: solid;
  border-color: #38bdf8;
  background: #e0f2fe;
}

.printerSlot .catalogMini {
  width: 48px;
  height: 48px;
}

.printerFilamentUses {
  margin: -2px 0 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: #334155;
}

.printerFilamentUses span {
  grid-column: 1 / -1;
  font-weight: 900;
}

.printerUsesBar {
  height: 9px;
  border-radius: 999px;
  background: #cbd5e1;
  overflow: hidden;
}

.printerUsesBar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #38bdf8;
}

.printerMachine {
  height: 190px;
  border-radius: 16px;
  background: linear-gradient(180deg, #e0f2fe, #f8fafc);
  border: 2px solid #bae6fd;
  position: relative;
  overflow: hidden;
}

.printerRail {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 38px;
  height: 8px;
  border-radius: 999px;
  background: #64748b;
}

.printerHotend {
  position: absolute;
  top: 24px;
  left: 42px;
  width: 34px;
  height: 46px;
  border-radius: 8px 8px 14px 14px;
  background: #0f172a;
  box-shadow: inset 0 -10px 0 #38bdf8;
}

.printerMachine.printingActive .printerHotend {
  animation: printerHotendMove 2.4s ease-in-out infinite alternate;
}

.printerBase {
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 34px;
  height: 16px;
  border-radius: 999px;
  background: #475569;
}

.printerPrintedItem {
  position: absolute;
  left: 50%;
  bottom: 48px;
  width: 82px;
  height: 70px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, filter 0.2s ease;
  pointer-events: none;
}

.printerPrintedItem.printing {
  filter: grayscale(0.1);
}

.printerPrintedItem.ready {
  opacity: 1;
  filter: none;
}

.printerPrintedItem .catalogMini {
  width: 72px;
  height: 62px;
}

.printerProgressOuter {
  height: 12px;
  background: #cbd5e1;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 8px;
}

.printerProgressInner {
  width: 0%;
  height: 100%;
  background: #22c55e;
  border-radius: inherit;
  transition: width 0.35s linear;
}

.printerCountdown {
  font-size: 12px;
  font-weight: 900;
  color: #334155;
  text-align: center;
  margin-bottom: 8px;
}

@keyframes printerHotendMove {
  from { transform: translateX(0); }
  to { transform: translateX(130px); }
}

@media (max-width: 760px) {
  .printerLayout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  #inventoryPanel {
    width: calc(100vw - 20px);
  }

  .inventoryTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.miniUsesBar {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: #cbd5e1;
  overflow: hidden;
  margin-top: 2px;
}

.miniUsesBar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #38bdf8;
}

.miniUsesText {
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  color: #475569;
}

.printerUnloadBtn {
  border: 0;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 1000;
  padding: 5px 10px;
  cursor: pointer;
}

/* SVG tintado por color marcador: solo se reemplaza FF00DD dentro del SVG real. */
.svgTintReplace {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
}
.catalogColorOptionPreviewSvg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
}
.catalogColorOptionPreview:has(.catalogColorOptionPreviewSvg) {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: transparent !important;
}

/* Archivos 3D dentro del catálogo */
.catalogSubcategories {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px;
  background: #eef2ff;
  border: 2px solid #dbeafe;
  border-radius: 14px;
}

.catalogSubcategoryBtn {
  border: 0;
  border-radius: 999px;
  background: #e2e8f0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 1000;
  padding: 7px 12px;
  cursor: pointer;
}

.catalogSubcategoryBtn.active {
  background: #0f172a;
  color: #fff;
}

.catalogMini.file3dMini {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  overflow: visible;
}

.catalogMini.file3dMini .file3dSheet {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.catalogMini.file3dMini .file3dTargetMini {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,23,42,.18);
  box-shadow: 0 2px 6px rgba(15,23,42,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}

.catalogMini.file3dMini .file3dTargetMini .catalogMini {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: transparent;
}

.catalogMini.file3dMini .file3dTargetMini img,
.catalogMini.file3dMini .file3dTargetMini .tintedMiniImage {
  max-width: 100%;
  max-height: 100%;
}

/* Máscara visual para objetos impresos en 3D: la textura mascara3d.png se recorta con la misma silueta del color aplicado. */
.printed3dMasked {
  background-color: var(--tint, #f97316);
  background-image: url("../estilos/archivos3d/mascara3d.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}

/* Objetos impresos en 3D: sin contorno; solo color del filamento + mascara3d.png. */


/* DATA HOTEL: posiciones solicitadas */
#inventoryPanel {
  right: 28px;
  left: auto;
  top: 76px;
  width: 540px;
  max-width: calc(100vw - 56px);
}

#navigatorPanel {
  right: 28px;
  left: auto;
  top: 76px;
  max-width: calc(100vw - 56px);
}

@media (max-width: 560px) {
  #inventoryPanel,
  #navigatorPanel {
    right: 10px;
    max-width: calc(100vw - 20px);
  }
}


/* Silla de oficina y material ruedas */
.officeChair {
  width: 78px;
  height: 86px;
}

.officeChair::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 8px;
  width: 34px;
  height: 36px;
  background: #1f2937;
  border-radius: 13px 13px 8px 8px;
  box-shadow: inset 0 9px #475569, 0 9px 0 #111827;
}

.officeChair::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 42px;
  width: 50px;
  height: 22px;
  background: #334155;
  border-radius: 14px 14px 10px 10px;
  box-shadow:
    inset 0 7px #64748b,
    18px 22px 0 -8px #111827,
    -18px 22px 0 -8px #111827,
    0 22px 0 -8px #111827;
}

.catalogMini .officeChair {
  transform: scale(0.62);
  transform-origin: center bottom;
}

.materialRuedas {
  width: 68px;
  height: 58px;
}

.materialRuedas::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #111827;
  box-shadow:
    22px 0 0 #111827,
    44px 0 0 #111827,
    11px 18px 0 #111827,
    33px 18px 0 #111827;
}

.materialRuedas::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow:
    22px 0 0 #94a3b8,
    44px 0 0 #94a3b8,
    11px 18px 0 #94a3b8,
    33px 18px 0 #94a3b8;
}

.catalogMini .materialRuedas {
  transform: scale(0.68);
  transform-origin: center bottom;
}


#roadmapPanel {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: min(620px, calc(100vw - 40px));
  height: min(520px, calc(100vh - 110px));
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  z-index: 95;
  background: rgba(15, 23, 42, 0.94);
  border: 3px solid rgba(147, 197, 253, 0.92);
  border-radius: 22px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

#roadmapPanel.show {
  display: flex;
}

#roadmapPanel .panelHead {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
}

#roadmapPanel .panelHead span {
  color: #ffffff;
}

#roadmapPanel .panelClose {
  color: #ffffff;
}

.roadmapTabs {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.roadmapTab {
  flex: 1;
  padding: 9px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  color: #ffffff;
  font-size: 12px;
}

.roadmapTab.active {
  background: linear-gradient(180deg, #93c5fd, #3b82f6);
  color: #ffffff;
}

.roadmapList {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
  background: rgba(241, 245, 249, 0.98);
  color: #0f172a;
}

.roadmapItem {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #dbeafe);
  border: 2px solid rgba(37, 99, 235, 0.18);
  box-shadow: 0 4px 0 rgba(15, 23, 42, 0.12);
}

.roadmapItemImage {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(219, 234, 254, 0.86);
}

.roadmapItemImage .catalogMini,
.roadmapItemImage .imageMini {
  width: 70px;
  height: 70px;
}

.roadmapItemText {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.roadmapItemText strong {
  font-size: 16px;
  color: #0f172a;
}

.roadmapItemText span {
  font-size: 13px;
  line-height: 1.25;
  color: #334155;
}

.roadmapEmpty {
  color: #334155;
  background: rgba(255, 255, 255, 0.76);
  border-radius: 12px;
  padding: 12px;
}


.avatar.sitting {
  z-index: 1010;
}

.avatar.sitting .characterSprite {
  transform-origin: center bottom;
  width: 72px;
  height: 86px;
  margin-bottom: 0;
}


.avatar.sitting {
  pointer-events: auto;
}

.avatar.sitting .characterSprite {
  transform-origin: center bottom;
  width: 72px;
  height: 86px;
  margin-bottom: 0;
}


/* sitting final no offset */
.avatar.sitting {
  pointer-events: auto;
}

.avatar.sitting .characterSprite {
  transform-origin: center bottom;
  width: 72px;
  height: 86px;
  margin-bottom: 0;
}


/* Fix sentado: el sprite sentado mantiene el centro exacto del tile */
.avatar.sitting .characterSprite {
  left: 50%;
  bottom: 0;
  transform-origin: center bottom;
  margin-left: 0;
  margin-right: 0;
}

/* Hoja de ruta: agarre real desde cabecera y marco */
#roadmapPanel {
  touch-action: none;
}

#roadmapPanel .panelHead,
#roadmapPanel .panelHeader {
  cursor: grab;
  user-select: none;
}

#roadmapPanel.draggingPanel .panelHead,
#roadmapPanel.draggingPanel .panelHeader {
  cursor: grabbing;
}


/* Evita parpadeo al cambiar entre personaje.svg y sentado.svg */
.avatar.sitting,
.avatar.sitting .characterSprite {
  transition: left 0.30s linear, top 0.30s linear;
}

.avatar.sitting .characterSprite {
  background-color: transparent !important;
}


/* Ajuste visual: sentado un poco más arriba sobre asientos altos */
.avatar.sitting .characterSprite {
  bottom: 8px;
}






/* Puerta exterior de la sala: no ocupa tile interior */
.roomEntryDoorOutside {
  position: absolute;
  width: 78px;
  height: 39px;
  background: rgba(0, 0, 0, 0.5);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  pointer-events: auto;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22);
}

.roomEntryDoorOutside:hover {
  background: rgba(0, 0, 0, 0.62);
}

.tile.roomDoorPickableTile {
  cursor: default;
}

.roomDoorPreviewTile {
  position: absolute;
  width: 78px;
  height: 39px;
  background: rgba(0, 0, 0, 0.24);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  pointer-events: auto;
  cursor: crosshair;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}

.roomDoorPreviewTile:hover {
  background: rgba(0, 0, 0, 0.5);
}

.roomDoorPreviewIcon {
  width: 56px;
  height: 32px;
  margin: 0 auto;
  background: rgba(0,0,0,0.5);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
}


.catalogVariantOption {
  width: 74px;
  min-height: 74px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #111827;
}

.catalogVariantOption.active {
  border-color: #facc15;
  box-shadow: 0 0 0 2px rgba(250,204,21,.25);
}

.catalogVariantOptionPreview {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catalogVariantOptionPreview .mini,
.catalogVariantOptionPreview img {
  max-width: 100%;
  max-height: 100%;
}


/* Selector de variantes del catálogo: más separación entre Arcade y Base */
#catalogColorOptions:has(.catalogVariantOption) {
  display: flex;
  gap: 18px;
  align-items: stretch;
  flex-wrap: wrap;
}

.catalogVariantOption {
  width: 92px;
  min-height: 86px;
  margin-right: 4px;
}


/* Inventar: Fabricar / Desmontar */
.inventModeTabs {
  display: flex;
  gap: 10px;
  padding: 10px 14px 0;
}

.inventModeTab {
  flex: 1;
  border: 0;
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 900;
  cursor: pointer;
  background: rgba(255,255,255,.82);
  color: #111827;
  box-shadow: inset 0 0 0 2px rgba(15,23,42,.12);
}

.inventModeTab.active {
  background: #facc15;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), 0 4px 12px rgba(15,23,42,.18);
}

.dismantleSlotWrap {
  min-height: 210px;
  display: none;
  align-items: center;
  justify-content: center;
}

.dismantleSlot {
  width: 150px;
  height: 150px;
  border: 2px dashed rgba(15,23,42,.35);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  color: #111827;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  padding: 10px;
}

.dismantleSlot.filled {
  border-style: solid;
  background: rgba(250,204,21,.18);
}

.dismantleSlot .mini {
  transform: scale(1.25);
  margin-bottom: 6px;
}

.dismantleSlot strong {
  font-size: 12px;
  font-weight: 900;
}

.dismantleSlot span {
  font-size: 10px;
  font-weight: 700;
  opacity: .75;
}

.dismantleResult {
  align-items: stretch;
}

.dismantleResultList {
  display: grid;
  grid-template-columns: repeat(2, minmax(80px, 1fr));
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
}

.dismantleResultItem {
  min-height: 86px;
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  color: #111827;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  text-align: center;
}

.dismantleResultItem strong {
  font-size: 11px;
  font-weight: 900;
}


/* FIX Desmontar: evitar solapes en materiales obtenidos */
#inventPanel .inventLayout {
  align-items: stretch;
}

#inventPanel .inventResultBox {
  min-width: 220px;
}

#inventPanel .craftResult.dismantleResult {
  min-height: 230px;
  height: auto;
  padding: 12px;
  justify-content: flex-start;
  gap: 10px;
  overflow: visible;
}

#inventPanel .dismantleResultList {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  margin: 0 0 10px;
}

#inventPanel .dismantleResultItem {
  width: 100%;
  min-height: 72px;
  height: auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  justify-items: start;
  gap: 10px;
  padding: 8px 10px;
  overflow: hidden;
}

#inventPanel .dismantleResultItem .mini {
  width: 48px;
  height: 48px;
  transform: none;
  margin: 0;
}

#inventPanel .dismantleResultItem .mini img,
#inventPanel .dismantleResultItem .mini .tintedObjectImage {
  max-width: 48px;
  max-height: 48px;
}

#inventPanel .dismantleResultItem strong {
  display: block;
  width: 100%;
  font-size: 11px;
  line-height: 1.15;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

#inventPanel .dismantleResult .craftCollectBtn {
  width: 100%;
  margin-top: auto;
}


/* FIX Inventar: más ancho y margen derecho */
#inventPanel {
  width: min(1040px, calc(100vw - 56px));
  max-width: calc(100vw - 56px);
}

#inventPanel .inventLayout {
  grid-template-columns: minmax(250px, 1fr) minmax(270px, 1fr) minmax(260px, 1fr);
  gap: 18px;
  padding-right: 18px;
  box-sizing: border-box;
}

#inventPanel .inventResultBox {
  margin-right: 4px;
  box-sizing: border-box;
}

#inventPanel .craftResult,
#inventPanel .dismantleResult {
  box-sizing: border-box;
}


/* Dattapop */
#dattapopPanel {
  position: fixed;
  left: 50%;
  top: 80px;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 36px));
  max-height: calc(100vh - 110px);
  overflow: hidden;
  background: rgba(255,255,255,.96);
  color: #111827;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15,23,42,.35);
  z-index: 80;
  display: none;
}

.dattapopLayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px;
  min-height: 360px;
}

.dattapopColumn {
  min-width: 0;
  background: rgba(241,245,249,.9);
  border-radius: 14px;
  padding: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dattapopInventory,
.dattapopListings {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.dattapopSellItem,
.dattapopListing {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
}

.dattapopListing {
  grid-template-columns: 52px 1fr;
}

.dattapopListing.sold {
  background: #ecfdf5;
  box-shadow: inset 0 0 0 2px rgba(34,197,94,.25);
}

.dattapopIcon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dattapopIcon .mini,
.dattapopIcon img {
  max-width: 48px;
  max-height: 48px;
}

.dattapopInfo {
  min-width: 0;
}

.dattapopInfo strong {
  display: block;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.dattapopInfo span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

.dattapopSellBtn {
  min-width: 72px;
  padding: 7px 10px;
}

.dattapopPending {
  background: #111827;
  color: #facc15;
  border-radius: 12px;
  padding: 10px;
  font-weight: 900;
  text-align: center;
}

#dattapopCollectBtn {
  width: 100%;
}


/* Dattapop marketplace-like redesign */
#dattapopPanel {
  width: min(980px, calc(100vw - 34px));
  max-height: calc(100vh - 90px);
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
}

.dattapopHead {
  background: linear-gradient(135deg, #f97316, #facc15);
  color: #111827;
  padding: 14px 16px;
}

.dattapopBrandWrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dattapopBrandLogo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.dattapopBrandText strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.dattapopBrandText span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  opacity: .9;
}

.dattapopHero {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.dattapopHeroMain {
  background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(250,204,21,.18));
  border-radius: 18px;
  padding: 18px;
  min-height: 96px;
}

.dattapopHeroMain strong {
  display: block;
  font-size: 20px;
  font-weight: 900;
  color: #111827;
}

.dattapopHeroMain span {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  color: #475569;
}

.dattapopHeroStats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.dattapopStatCard {
  background: #0f172a;
  color: white;
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 96px;
}

.dattapopStatCard small {
  font-size: 11px;
  font-weight: 800;
  opacity: .75;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.dattapopStatCard strong {
  margin-top: 6px;
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  color: #facc15;
}

#dattapopCollectBtn {
  min-height: 46px;
  font-size: 13px;
  font-weight: 900;
}

.dattapopLayout {
  grid-template-columns: 1.08fr .92fr;
  gap: 16px;
  padding: 16px;
  min-height: 420px;
}

.dattapopColumn {
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 14px;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.07);
}

.dattapopSectionHead {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.dattapopSectionHead strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: #111827;
}

.dattapopSectionHead span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.dattapopInventory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow: auto;
  padding-top: 12px;
}

.dattapopListings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  padding-top: 12px;
}

.dattapopProductCard {
  background: #fff;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(15,23,42,.08), inset 0 0 0 1px rgba(15,23,42,.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.dattapopCardTop,
.dattapopListingTop,
.dattapopProductMeta,
.dattapopListingMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dattapopTypePill,
.dattapopStockPill,
.dattapopStatusPill {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 900;
}

.dattapopTypePill {
  background: rgba(249,115,22,.14);
  color: #c2410c;
}

.dattapopStockPill {
  background: rgba(15,23,42,.08);
  color: #334155;
}

.dattapopStatusPill.active {
  background: rgba(59,130,246,.14);
  color: #1d4ed8;
}

.dattapopStatusPill.sold {
  background: rgba(34,197,94,.16);
  color: #15803d;
}

.dattapopProductVisual,
.dattapopListingVisual {
  min-height: 96px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(248,250,252,1), rgba(241,245,249,1));
  display: flex;
  align-items: center;
  justify-content: center;
}

.dattapopProductVisual .mini,
.dattapopListingVisual .mini,
.dattapopProductVisual img,
.dattapopListingVisual img {
  max-width: 84px;
  max-height: 84px;
}

.dattapopProductBody strong,
.dattapopListingBody strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: #111827;
  line-height: 1.15;
}

.dattapopProductBody span,
.dattapopListingDesc {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
  color: #64748b;
  font-weight: 700;
}

.dattapopPriceRange,
.dattapopListingPrice {
  font-size: 13px;
  font-weight: 900;
  color: #111827;
}

.dattapopListingHint {
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  text-align: right;
}

.dattapopListingCard {
  background: #fff;
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 5px 16px rgba(15,23,42,.08), inset 0 0 0 1px rgba(15,23,42,.06);
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
}

.dattapopListingCard.sold {
  background: linear-gradient(180deg, #ffffff, #f0fdf4);
  box-shadow: 0 5px 16px rgba(15,23,42,.08), inset 0 0 0 2px rgba(34,197,94,.15);
}

.dattapopEmptyState {
  border-radius: 18px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(248,250,252,1), rgba(241,245,249,1));
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
}

.dattapopEmptyState strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: #111827;
}

.dattapopEmptyState span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.35;
  color: #64748b;
  font-weight: 700;
}


/* FIX Dattapop: tamaño anterior + créditos pendientes claro */
#dattapopPanel {
  width: min(760px, calc(100vw - 36px));
  max-height: calc(100vh - 110px);
}

#dattapopPanel .dattapopHero {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px 14px;
}

#dattapopPanel .dattapopHeroMain {
  min-height: auto;
  padding: 12px 14px;
}

#dattapopPanel .dattapopHeroMain strong {
  font-size: 16px;
}

#dattapopPanel .dattapopHeroMain span {
  font-size: 11px;
}

#dattapopPanel .dattapopHeroStats {
  grid-template-columns: 1fr auto;
  align-items: stretch;
}

#dattapopPanel .dattapopStatCard {
  min-height: 54px;
  padding: 10px 12px;
  background: #fff7ed;
  color: #111827;
  box-shadow: inset 0 0 0 2px rgba(249,115,22,.18);
}

#dattapopPanel .dattapopStatCard small {
  color: #9a3412;
  opacity: 1;
}

#dattapopPanel .dattapopStatCard strong {
  margin-top: 3px;
  font-size: 24px;
  color: #ea580c;
}

#dattapopPanel #dattapopCollectBtn {
  min-height: 54px;
  width: auto;
  min-width: 150px;
  padding: 0 14px;
}

#dattapopPanel .dattapopLayout {
  grid-template-columns: 1fr 1fr;
  min-height: 340px;
  max-height: calc(100vh - 295px);
  padding: 12px 14px 14px;
  gap: 12px;
}

#dattapopPanel .dattapopColumn {
  padding: 12px;
  border-radius: 14px;
}

#dattapopPanel .dattapopInventory {
  grid-template-columns: 1fr;
  gap: 9px;
}

#dattapopPanel .dattapopProductCard {
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-template-areas:
    "visual top"
    "visual body"
    "visual meta";
  gap: 6px 10px;
  padding: 9px;
  border-radius: 14px;
}

#dattapopPanel .dattapopCardTop {
  grid-area: top;
}

#dattapopPanel .dattapopProductVisual {
  grid-area: visual;
  min-height: 72px;
}

#dattapopPanel .dattapopProductVisual .mini,
#dattapopPanel .dattapopProductVisual img {
  max-width: 62px;
  max-height: 62px;
}

#dattapopPanel .dattapopProductBody {
  grid-area: body;
}

#dattapopPanel .dattapopProductBody span {
  display: none;
}

#dattapopPanel .dattapopProductMeta {
  grid-area: meta;
  align-items: end;
}

#dattapopPanel .dattapopPriceRange {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.05;
}

#dattapopPanel .dattapopPriceRange small {
  font-size: 9px;
  font-weight: 900;
  color: #9a3412;
  text-transform: uppercase;
  letter-spacing: .03em;
}

#dattapopPanel .dattapopPriceRange strong {
  font-size: 12px;
  color: #111827;
}

#dattapopPanel .dattapopListingCard {
  grid-template-columns: 70px 1fr;
  gap: 9px;
  border-radius: 14px;
}

#dattapopPanel .dattapopListingVisual {
  min-height: 70px;
}

#dattapopPanel .dattapopListingVisual .mini,
#dattapopPanel .dattapopListingVisual img {
  max-width: 62px;
  max-height: 62px;
}

#dattapopPanel .dattapopListingHint {
  font-size: 9px;
}


/* Foco LED */
#focoLedPanel {
  position: fixed;
  left: 50%;
  top: 105px;
  transform: translateX(-50%);
  width: min(380px, calc(100vw - 36px));
  background: rgba(255,255,255,.96);
  color: #111827;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15,23,42,.35);
  z-index: 82;
  display: none;
  overflow: hidden;
}

.focoLedBody {
  padding: 14px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
}

.focoLedPreview {
  width: 92px;
  height: 92px;
  border-radius: 18px;
  background:
    radial-gradient(circle, var(--foco-color, #facc15) 0%, rgba(250,204,21,.18) 42%, rgba(15,23,42,.08) 72%);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
  opacity: .35;
}

.focoLedPreview.on {
  opacity: 1;
  box-shadow: 0 0 28px var(--foco-color, #facc15), inset 0 0 0 1px rgba(15,23,42,.08);
}

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

.focoLedSwitchRow,
.focoLedColorRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 900;
}

.focoLedColorRow input {
  width: 58px;
  height: 38px;
  border: 0;
  padding: 0;
  background: transparent;
}

.focoLedControls p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
  font-weight: 700;
}

.focoLedLightGlow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 230px;
  height: 150px;
  transform: translate(-50%, -50%) rotate(-18deg);
  border-radius: 999px;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--foco-light-color, #facc15) 55%, transparent) 0%,
    color-mix(in srgb, var(--foco-light-color, #facc15) 28%, transparent) 38%,
    rgba(255,255,255,0) 72%);
  filter: blur(8px);
  opacity: .85;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
}

.laserBeam.laserCut {
  border-radius: 999px 2px 2px 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--laser-light-color, #ef4444) 95%, white) 0%,
    var(--laser-light-color, #ef4444) 82%,
    var(--laser-light-color, #ef4444) 100%);
}

.object.focoLedOn {
  filter: drop-shadow(0 0 12px var(--foco-light-color, #facc15));
}


/* FIX Foco LED: ventana arrastrable + intensidad */
.focoLedIntensityRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 900;
}

.focoLedIntensityRow input[type="range"] {
  width: 118px;
  accent-color: var(--foco-color, #facc15);
}

.focoLedPreview.on {
  opacity: calc(.35 + (var(--foco-intensity, .7) * .65));
  box-shadow:
    0 0 calc(10px + (28px * var(--foco-intensity, .7))) var(--foco-color, #facc15),
    inset 0 0 0 1px rgba(15,23,42,.08);
}

.focoLedLightGlow {
  width: calc(160px + (110px * var(--foco-light-intensity, .7)));
  height: calc(105px + (70px * var(--foco-light-intensity, .7)));
  opacity: calc(.25 + (.65 * var(--foco-light-intensity, .7)));
}

.object.focoLedOn {
  filter: drop-shadow(0 0 calc(5px + (13px * var(--foco-light-intensity, .7))) var(--foco-light-color, #facc15));
}


/* FIX Foco LED: color en barra, sin selector nativo del sistema */
.focoLedColorRow,
.focoLedIntensityRow {
  align-items: center;
}

.focoLedHueSlider {
  width: 118px;
  height: 12px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg,
    #ff0000 0%,
    #ffff00 16.66%,
    #00ff00 33.33%,
    #00ffff 50%,
    #0000ff 66.66%,
    #ff00ff 83.33%,
    #ff0000 100%);
  cursor: pointer;
}

.focoLedHueSlider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background: var(--foco-selected-color, #facc15);
  box-shadow: 0 0 0 2px rgba(15,23,42,.35), 0 2px 8px rgba(15,23,42,.25);
}

.focoLedHueSlider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background: var(--foco-selected-color, #facc15);
  box-shadow: 0 0 0 2px rgba(15,23,42,.35), 0 2px 8px rgba(15,23,42,.25);
}

.focoLedIntensityRow input[type="range"] {
  cursor: pointer;
}


/* FIX REAL Foco LED sliders */
#focoLedPanel input[type="range"] {
  pointer-events: auto !important;
  user-select: auto !important;
  touch-action: pan-x !important;
  -webkit-user-select: auto !important;
  position: relative;
  z-index: 5;
}

#focoLedPanel label,
#focoLedPanel .focoLedControls {
  pointer-events: auto !important;
}

#focoLedPanel .focoLedHueSlider,
#focoLedPanel .focoLedIntensityRow input[type="range"] {
  width: 170px !important;
  height: 22px !important;
  cursor: ew-resize !important;
  display: block !important;
}

#focoLedPanel .focoLedHueSlider {
  background: linear-gradient(90deg,
    #ff0000 0%,
    #ff7f00 8.33%,
    #ffff00 16.66%,
    #7fff00 25%,
    #00ff00 33.33%,
    #00ff7f 41.66%,
    #00ffff 50%,
    #007fff 58.33%,
    #0000ff 66.66%,
    #7f00ff 75%,
    #ff00ff 83.33%,
    #ff007f 91.66%,
    #ff0000 100%) !important;
}

#focoLedPanel .focoLedIntensityRow input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg,
    rgba(250,204,21,.25) 0%,
    var(--foco-selected-color, #facc15) 100%) !important;
}

#focoLedPanel .focoLedIntensityRow input[type="range"]::-webkit-slider-thumb,
#focoLedPanel .focoLedHueSlider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #111827;
  box-shadow: 0 0 0 2px rgba(15,23,42,.45), 0 2px 8px rgba(15,23,42,.25);
}

#focoLedPanel .focoLedHueSlider::-webkit-slider-thumb {
  background: var(--foco-selected-color, #facc15) !important;
}

#focoLedPanel .focoLedIntensityRow input[type="range"]::-webkit-slider-thumb {
  background: #ffffff !important;
}

#focoLedPanel .focoLedIntensityRow input[type="range"]::-moz-range-thumb,
#focoLedPanel .focoLedHueSlider::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(15,23,42,.45), 0 2px 8px rgba(15,23,42,.25);
}

#focoLedPanel .focoLedHueSlider::-moz-range-thumb {
  background: var(--foco-selected-color, #facc15) !important;
}

#focoLedPanel .focoLedIntensityRow input[type="range"]::-moz-range-thumb {
  background: #ffffff !important;
}


/* FIX Dattapop: ventana con marco visible, turquesa y título blanco */
#dattapopPanel {
  background: #0f766e !important;
  border: 3px solid #5eead4 !important;
  box-shadow: 0 18px 0 rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(6, 78, 59, 0.85) !important;
  color: #ffffff !important;
}

#dattapopPanel .panelHead,
#dattapopPanel .panelHeader {
  background: #14b8a6 !important;
  border-bottom: 3px solid #5eead4 !important;
  color: #ffffff !important;
}

#dattapopPanel .panelTitle,
#dattapopPanel .panelHead h2,
#dattapopPanel .panelHeader h2,
#dattapopPanel h2,
#dattapopPanel h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.22) !important;
}

#dattapopPanel .panelClose,
#dattapopPanel .closeBtn {
  color: #ffffff !important;
  background: rgba(15, 118, 110, 0.85) !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
}

#dattapopPanel .dattapopBody,
#dattapopPanel .dattapopContent,
#dattapopPanel .dattapopMain {
  background: #ccfbf1 !important;
  color: #134e4a !important;
}

#dattapopPanel .dattapopCard,
#dattapopPanel .dattapopListing,
#dattapopPanel .dattapopSellBox,
#dattapopPanel .dattapopPendingBox {
  background: #f0fdfa !important;
  border: 2px solid #14b8a6 !important;
  color: #134e4a !important;
}

#dattapopPanel button {
  border-color: #0f766e !important;
}


/* FIX Hoja de Ruta: scroll con ruedecilla del ratón */
#roadmapPanel,
.roadmapPanel {
  overflow: hidden !important;
}

#roadmapPanel .panelBody,
#roadmapPanel .roadmapBody,
#roadmapPanel .roadmapContent,
#roadmapPanel .customBuildRoadmapBody,
#roadmapList,
#roadmapItems,
.roadmapBody,
.roadmapContent,
.customBuildRoadmapBody {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: auto !important;
  max-height: calc(100vh - 190px) !important;
}


/* EXPERIMENTO: luz de sala Encendido/Apagado */
.roomLightBox {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.roomLightBox label {
  font-size: 11px;
  font-weight: 900;
  color: #0f172a;
}

.roomLightBox button {
  width: 100%;
}

body.roomLightsOff #app {
  background: linear-gradient(180deg, #07111f 0%, #0b1728 55%, #111827 100%) !important;
}

body.roomLightsOff #roomArea::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(15, 23, 42, 0.32), rgba(2, 6, 23, 0.78) 72%),
    rgba(2, 6, 23, 0.48);
  mix-blend-mode: multiply;
}

body.roomLightsOff #world .tile,
body.roomLightsOff #world .roomEntryDoorOutside,
body.roomLightsOff #world .roomDoorPreviewTile {
  filter: brightness(0.32) saturate(0.72) contrast(0.95);
}

body.roomLightsOff #world .object {
  filter: brightness(0.34) saturate(0.72) contrast(0.95) drop-shadow(0 7px 0 rgba(0,0,0,.45));
}

body.roomLightsOff #world .avatar {
  filter: brightness(0.32) saturate(0.68) contrast(0.95);
}

body.roomLightsOff #world .object.selected {
  filter: brightness(0.48) saturate(0.9) drop-shadow(0 0 11px rgba(255,216,70,.82));
}

body.roomLightsOff #world .object.focoLedOn {
  filter: brightness(1.08) saturate(1.2) drop-shadow(0 0 calc(10px + (24px * var(--foco-light-intensity, .7))) var(--foco-light-color, #facc15));
}

body.roomLightsOff #world .object.focoLedOn .focoLedLightGlow {
  width: calc(260px + (250px * var(--foco-light-intensity, .7)));
  height: calc(170px + (180px * var(--foco-light-intensity, .7)));
  opacity: calc(.55 + (.45 * var(--foco-light-intensity, .7)));
  filter: blur(14px);
  z-index: -1;
  mix-blend-mode: screen;
}

body.roomLightsOff #topbar,
body.roomLightsOff #chatFloat,
body.roomLightsOff #zoomBox,
body.roomLightsOff #roomEditPanel {
  filter: none;
}


/* MEJORA: focos LED iluminan realmente la sala apagada */
.roomLightSpot {
  position: absolute;
  width: calc(250px + (260px * var(--room-light-intensity, .7)));
  height: calc(150px + (210px * var(--room-light-intensity, .7)));
  transform: translate(-50%, -50%) rotate(-18deg);
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--room-light-color, #facc15) 58%, white 8%) 0%,
      color-mix(in srgb, var(--room-light-color, #facc15) 42%, transparent) 28%,
      color-mix(in srgb, var(--room-light-color, #facc15) 18%, transparent) 58%,
      rgba(255,255,255,0) 78%);
  filter: blur(11px);
  opacity: calc(.52 + (.38 * var(--room-light-intensity, .7)));
  mix-blend-mode: screen;
}

body.roomLightsOff #roomArea::after {
  background:
    radial-gradient(circle at 50% 42%, rgba(15, 23, 42, 0.18), rgba(2, 6, 23, 0.62) 66%),
    rgba(2, 6, 23, 0.38) !important;
}

body.roomLightsOff #world .tile {
  filter: brightness(0.23) saturate(0.62) contrast(0.92);
}

body.roomLightsOff #world .object {
  filter: brightness(0.26) saturate(0.62) contrast(0.92) drop-shadow(0 7px 0 rgba(0,0,0,.52));
}

body.roomLightsOff #world .avatar {
  filter: brightness(0.26) saturate(0.58) contrast(0.92);
}

body.roomLightsOff #world .tile.litByFocoStrong {
  filter: brightness(0.78) saturate(1.08) contrast(1.04);
}

body.roomLightsOff #world .tile.litByFocoSoft {
  filter: brightness(0.48) saturate(.9) contrast(.98);
}

body.roomLightsOff #world .object.litByFocoStrong {
  filter: brightness(0.86) saturate(1.05) contrast(1.02) drop-shadow(0 8px 0 rgba(0,0,0,.36));
}

body.roomLightsOff #world .object.litByFocoSoft {
  filter: brightness(0.55) saturate(.86) contrast(.98) drop-shadow(0 8px 0 rgba(0,0,0,.45));
}

body.roomLightsOff #world .avatar.litByFocoStrong {
  filter: brightness(0.9) saturate(1.05) contrast(1.02);
}

body.roomLightsOff #world .avatar.litByFocoSoft {
  filter: brightness(0.58) saturate(.85) contrast(.98);
}

body.roomLightsOff #world .object.focoLedOn,
body.roomLightsOff #world .object.focoLedOn.litByFocoStrong,
body.roomLightsOff #world .object.focoLedOn.litByFocoSoft {
  filter: brightness(1.16) saturate(1.32) drop-shadow(0 0 calc(15px + (34px * var(--foco-light-intensity, .7))) var(--foco-light-color, #facc15));
}

body.roomLightsOff #world .object.focoLedOn .focoLedLightGlow {
  width: calc(230px + (230px * var(--foco-light-intensity, .7)));
  height: calc(150px + (180px * var(--foco-light-intensity, .7)));
  opacity: calc(.62 + (.35 * var(--foco-light-intensity, .7)));
  filter: blur(15px);
}


/* FIX luz sala: separar botón Encender/Apagar del Guardar sala */
.roomLightBox {
  margin-top: 4px !important;
  margin-bottom: 14px !important;
}

#saveRoomSettingsBtn {
  margin-top: 6px;
}



/* FIX capas de luz: el mueble mantiene su z-index isométrico normal */
body.roomLightsOff #world .object.focoLedOn,
body.roomLightsOff #world .object.focoLedOn.litByFocoStrong,
body.roomLightsOff #world .object.focoLedOn.litByFocoSoft {
  /* no tocar z-index aquí */
}

/* Lámpara normal: luz fija blanco cálida */
.normalLampLightGlow {
  position: absolute;
  left: 50%;
  top: 54%;
  width: calc(185px + (120px * var(--lamp-light-intensity, .62)));
  height: calc(120px + (90px * var(--lamp-light-intensity, .62)));
  transform: translate(-50%, -50%) rotate(-18deg);
  border-radius: 999px;
  background: radial-gradient(ellipse at center,
    rgba(255, 232, 178, .62) 0%,
    rgba(255, 217, 138, .34) 42%,
    rgba(255,255,255,0) 74%);
  filter: blur(10px);
  opacity: .72;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
}

.object.normalLampOn {
  filter: drop-shadow(0 0 10px #ffd98a);
}

body.roomLightsOff #world .object.normalLampOn,
body.roomLightsOff #world .object.normalLampOn.litByFocoStrong,
body.roomLightsOff #world .object.normalLampOn.litByFocoSoft {
  filter: brightness(1.05) saturate(1.1) drop-shadow(0 0 14px #ffd98a);
}

body.roomLightsOff #world .object.normalLampOn .normalLampLightGlow {
  width: 330px;
  height: 230px;
  opacity: .88;
  filter: blur(15px);
}


/* FIX catálogo: variantes compactas para Sofá/Arcade sin romper Comprar */
#catalogPanel #catalogColorOptions:has(.catalogVariantOption) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 260px !important;
}

#catalogPanel .catalogVariantOption {
  width: auto !important;
  min-width: 0 !important;
  min-height: 54px !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 3px 2px !important;
  border-radius: 8px !important;
  gap: 2px !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
}

#catalogPanel .catalogVariantOptionPreview {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
}

#catalogPanel .catalogVariantOption small {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}


/* FIX REAL catálogo sofá: variantes compactas, solo imagen */
#catalogPanel #catalogColorOptions:has(.catalogVariantOption) {
  display: grid !important;
  grid-template-columns: repeat(3, 44px) !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: start !important;
  width: auto !important;
  max-width: 150px !important;
}

#catalogPanel .catalogVariantOption {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 3px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  gap: 0 !important;
  overflow: hidden !important;
}

#catalogPanel .catalogVariantOptionPreview {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
}

#catalogPanel .catalogVariantOption small {
  
}

#catalogPanel .catalogColorRow {
  min-height: 54px !important;
  max-height: 54px !important;
  overflow: hidden !important;
  align-items: center !important;
}

#catalogPanel #catalogPreviewBuyBtn,
#catalogPanel .catalogBuyBtn,
#catalogPanel button.buy {
  flex-shrink: 0 !important;
}


/* FIX definitivo: variantes del catálogo SOLO imagen */
#catalogPanel .catalogVariantOption small,
#catalogPanel .catalogVariantOption span:not(.catalogVariantOptionPreview),
#catalogPanel .catalogVariantOption .variantLabel,
#catalogPanel .catalogVariantOption .label {
  
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

#catalogPanel .catalogVariantOption {
  font-size: 0 !important;
  line-height: 0 !important;
}

#catalogPanel .catalogVariantOptionPreview {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mensaje admin: draggable desde el marco/título */
.adminHotelMessagePanel {
  cursor: default;
}

.adminHotelMessagePanel .panelHead,
.adminHotelMessagePanel .panelHeader,
.adminHotelMessagePanel #genericConfirmTitle,
.adminHotelMessagePanel h2,
.adminHotelMessagePanel h3 {
  cursor: grab !important;
  user-select: none !important;
}





/* Las variantes del sofá siguen siendo solo imagen y no empujan el botón Comprar */
#catalogPanel .catalogColorRow {
  min-height: 46px !important;
  max-height: 46px !important;
  margin-top: 6px !important;
  gap: 8px !important;
  overflow: hidden !important;
}

#catalogPanel #catalogColorOptions:has(.catalogVariantOption) {
  display: grid !important;
  grid-template-columns: repeat(3, 40px) !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 140px !important;
}

#catalogPanel .catalogVariantOption {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 3px !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#catalogPanel .catalogVariantOptionPreview {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
}

#catalogPanel .catalogVariantOption small {
  
}



/* Caja azul completa: imagen + nombre + descripción + precio + comprar */
#catalogPanel .catalogPreview {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 172px !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 145px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px !important;
  border-radius: 15px !important;
  overflow: hidden !important;
}

#catalogPanel .catalogPreviewImage {
  width: 145px !important;
  height: 148px !important;
  min-width: 145px !important;
  max-width: 145px !important;
  border-radius: 13px !important;
  box-sizing: border-box !important;
}

#catalogPanel .catalogPreviewImage .catalogMini {
  width: 126px !important;
  height: 122px !important;
  max-width: 126px !important;
  max-height: 122px !important;
  transform: none !important;
}

#catalogPanel .catalogPreviewImage img {
  max-width: 126px !important;
  max-height: 122px !important;
  object-fit: contain !important;
}

#catalogPanel .catalogPreviewText {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  overflow: hidden !important;
}

#catalogPanel .catalogPreviewText strong {
  font-size: 17px !important;
  line-height: 1.12 !important;
  margin: 0 !important;
  color: #0f172a !important;
}

#catalogPanel .catalogPreviewText span {
  font-size: 12.5px !important;
  line-height: 1.28 !important;
  margin: 0 !important;
  color: #334155 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#catalogPanel .catalogPreviewText b {
  font-size: 13px !important;
  line-height: 1.1 !important;
  margin: 2px 0 0 !important;
  color: #0369a1 !important;
}

#catalogPanel #catalogPreviewBuyBtn {
  align-self: flex-start !important;
  margin-top: 4px !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  line-height: 1.1 !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}

/* Variantes: solo imagen, pequeñas, sin empujar la compra */
#catalogPanel .catalogColorRow {
  min-height: 48px !important;
  max-height: 48px !important;
  margin-top: 7px !important;
  gap: 8px !important;
  overflow: hidden !important;
}

#catalogPanel #catalogColorOptions:has(.catalogVariantOption) {
  display: grid !important;
  grid-template-columns: repeat(3, 42px) !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 150px !important;
}

#catalogPanel .catalogVariantOption {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 3px !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#catalogPanel .catalogVariantOptionPreview {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
}

#catalogPanel .catalogVariantOption small {
  
}



/* Caja azul completa y fija: no cambia entre alfombra/arcade/sofá/muebles normales */
#catalogPanel .catalogPreview {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 205px !important;
  min-height: 205px !important;
  max-height: 205px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 158px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 12px !important;
  border-radius: 15px !important;
  overflow: hidden !important;
}

#catalogPanel .catalogPreviewImage {
  width: 158px !important;
  height: 181px !important;
  min-width: 158px !important;
  max-width: 158px !important;
  min-height: 181px !important;
  max-height: 181px !important;
  border-radius: 13px !important;
  box-sizing: border-box !important;
}

#catalogPanel .catalogPreviewImage .catalogMini {
  width: 138px !important;
  height: 132px !important;
  max-width: 138px !important;
  max-height: 132px !important;
  transform: none !important;
}

#catalogPanel .catalogPreviewImage img {
  max-width: 138px !important;
  max-height: 132px !important;
  object-fit: contain !important;
}

#catalogPanel .catalogPreviewText {
  min-width: 0 !important;
  height: 181px !important;
  min-height: 181px !important;
  max-height: 181px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  overflow: hidden !important;
}

#catalogPanel .catalogPreviewText strong {
  font-size: 17px !important;
  line-height: 1.12 !important;
  margin: 0 !important;
  color: #0f172a !important;
  flex: 0 0 auto !important;
}

#catalogPanel .catalogPreviewText span {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  color: #334155 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

#catalogPanel .catalogPreviewText b {
  font-size: 13px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  color: #0369a1 !important;
  flex: 0 0 auto !important;
}

#catalogPanel #catalogPreviewBuyBtn {
  align-self: flex-start !important;
  margin-top: auto !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  line-height: 1.1 !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}

/* Reservar SIEMPRE el mismo hueco de color/variantes, aunque el mueble no tenga opciones */
#catalogPanel .catalogColorRow {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  margin-top: 7px !important;
  gap: 8px !important;
  overflow: hidden !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

#catalogPanel .catalogColorRow[style*="display: none"] {
  display: flex !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#catalogPanel #catalogColorOptions:has(.catalogVariantOption) {
  display: grid !important;
  grid-template-columns: repeat(3, 42px) !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 150px !important;
}

#catalogPanel .catalogVariantOption {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 3px !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#catalogPanel .catalogVariantOptionPreview {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
}

#catalogPanel .catalogVariantOption small {
  
}

/* La cuadrícula se ajusta al espacio restante sin empujar el detalle */
#catalogPanel .catalogGrid {
  min-height: 0 !important;
  overflow-y: auto !important;
}


/* FIX DEFINITIVO catálogo v2: cuadro azul fijo, más grande y sin cortar botones */
#catalogPanel {
  width: 720px;
  max-width: calc(100vw - 24px);
}

#catalogPanel .catalogLayout {
  grid-template-columns: minmax(0, 1fr) 132px !important;
  gap: 12px !important;
  max-height: min(620px, calc(100vh - 110px)) !important;
  overflow: hidden !important;
}

#catalogPanel .catalogMain {
  min-width: 0 !important;
  overflow: hidden !important;
  gap: 10px !important;
}

/* Caja azul fija, con espacio suficiente para imagen + texto + variantes + botón */
#catalogPanel .catalogPreview {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 158px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 12px !important;
  border-radius: 15px !important;
  overflow: hidden !important;
}

#catalogPanel .catalogPreviewImage {
  width: 158px !important;
  height: 226px !important;
  min-width: 158px !important;
  max-width: 158px !important;
  min-height: 226px !important;
  max-height: 226px !important;
  border-radius: 13px !important;
  box-sizing: border-box !important;
}

#catalogPanel .catalogPreviewImage .catalogMini {
  width: 138px !important;
  height: 132px !important;
  max-width: 138px !important;
  max-height: 132px !important;
  transform: none !important;
}

#catalogPanel .catalogPreviewImage img {
  max-width: 138px !important;
  max-height: 132px !important;
  object-fit: contain !important;
}

#catalogPanel .catalogPreviewText {
  min-width: 0 !important;
  height: 226px !important;
  min-height: 226px !important;
  max-height: 226px !important;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr auto !important;
  align-content: start !important;
  row-gap: 6px !important;
  overflow: hidden !important;
}

#catalogPanel .catalogPreviewText strong {
  font-size: 17px !important;
  line-height: 1.12 !important;
  margin: 0 !important;
  color: #0f172a !important;
}

#catalogPanel .catalogPreviewText span {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  color: #334155 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#catalogPanel .catalogPreviewText b {
  font-size: 13px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  color: #0369a1 !important;
}

/* Fila reservada SIEMPRE para que no cambie entre muebles */
#catalogPanel .catalogColorRow {
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  margin-top: 2px !important;
  gap: 8px !important;
  overflow: hidden !important;
  align-items: start !important;
  flex-shrink: 0 !important;
}

#catalogPanel .catalogColorRow label {
  padding-top: 6px !important;
}

#catalogPanel .catalogColorRow[style*="display: none"] {
  display: flex !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#catalogPanel #catalogColorOptions {
  align-self: start !important;
}

/* Colores normales: 2 filas de 6 bien visibles.
   Hay 12 colores tintables: los 10 originales + gris + blanco. */
#catalogPanel #catalogColorOptions:not(:has(.catalogVariantOption)) {
  display: grid !important;
  grid-template-columns: repeat(6, 30px) !important;
  grid-auto-rows: 30px !important;
  gap: 6px !important;
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  max-height: 66px !important;
  overflow: visible !important;
}

#catalogPanel .catalogColorOption {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
}

/* Variantes tipo sofá/arcade: solo imagen, bien centradas y sin cortar */
#catalogPanel #catalogColorOptions:has(.catalogVariantOption) {
  display: grid !important;
  grid-template-columns: repeat(3, 44px) !important;
  grid-auto-rows: 44px !important;
  gap: 8px !important;
  width: 148px !important;
  min-width: 148px !important;
  max-width: 148px !important;
  max-height: 52px !important;
  overflow: visible !important;
}

#catalogPanel .catalogVariantOption {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 3px !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border-radius: 9px !important;
}

#catalogPanel .catalogVariantOptionPreview {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
}

#catalogPanel .catalogVariantOption small {
  
}

/* Botón comprar siempre abajo y visible */
#catalogPanel #catalogPreviewBuyBtn {
  align-self: end !important;
  justify-self: start !important;
  margin-top: 0 !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  line-height: 1.1 !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}

/* La cuadrícula se ajusta al espacio restante sin empujar el detalle */
#catalogPanel .catalogGrid {
  min-height: 0 !important;
  overflow-y: auto !important;
}


/* FIX catálogo: texto del detalle centrado y sin huecos raros */
#catalogPanel .catalogPreviewText {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
}

#catalogPanel .catalogPreviewText strong,
#catalogPanel .catalogPreviewText span,
#catalogPanel .catalogPreviewText b {
  text-align: left !important;
}

#catalogPanel #catalogPreviewBuyBtn {
  margin-top: 4px !important;
  align-self: flex-start !important;
}

/* Perfil propio: acciones en fila */
.selfProfileActions {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Animación BAILAR */
.avatar.dancing .characterSprite {
  animation: avatarDanceSquash 0.42s ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes avatarDanceSquash {
  0%, 100% { transform: translateX(-50%) scale(1, 1); }
  50% { transform: translateX(-50%) scale(1.14, 0.84); }
}

.danceNotes {
  position: absolute;
  left: 50%;
  top: -26px;
  width: 70px;
  height: 64px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 30;
}

.danceNotes span {
  position: absolute;
  bottom: 0;
  font-size: 14px;
  font-weight: 900;
  color: #facc15;
  text-shadow: 0 1px 0 #111827, 0 0 8px rgba(250,204,21,.75);
  opacity: 0;
  animation: danceNoteFloat 1.25s ease-out infinite;
}

.danceNotes span:nth-child(1) { left: 10px; animation-delay: 0s; }
.danceNotes span:nth-child(2) { left: 26px; animation-delay: .22s; }
.danceNotes span:nth-child(3) { left: 43px; animation-delay: .44s; }
.danceNotes span:nth-child(4) { left: 58px; animation-delay: .66s; }

@keyframes danceNoteFloat {
  0% { transform: translateY(0) scale(.8); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-52px) scale(1.18); opacity: 0; }
}


/* Confirmaciones: se pueden arrastrar desde el marco/título */
.genericDraggableConfirm .panelHead,
.genericDraggableConfirm .panelHeader,
.genericDraggableConfirm #genericConfirmTitle,
.genericDraggableConfirm h2,
.genericDraggableConfirm h3 {
  cursor: grab !important;
  user-select: none !important;
}







/* Accesorios de personaje: selector visual y accesorio unido al sprite */
.accessoryProfileBox {
  gap: 8px;
}

.profileAccessoryGrid {
  display: grid;
  grid-template-columns: repeat(5, 42px);
  gap: 8px;
  align-items: center;
}

.profileAccessoryOption {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(15, 23, 42, .18);
  border-radius: 10px;
  background: rgba(255,255,255,.82);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

.profileAccessoryOption.active {
  border-color: #facc15;
  box-shadow: 0 0 0 2px rgba(250,204,21,.28);
}

.profileAccessoryOption img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Al ir dentro de .characterSprite, acompaña saltos, caminar, sentarse y bailar */
.characterSprite {
  position: absolute;
}

.characterSprite .avatarAccessory {
  position: absolute;
  left: 50%;
  top: -12px;
  width: 46px;   /* antes 38px: +20% aprox */
  height: 46px;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 30;
  image-rendering: auto;
}

.characterSprite .avatarAccessory.hatAccessory {
  top: -22px; /* los sombreros suben más para no tapar la cara */
}

.profileAvatar .characterSprite .avatarAccessory {
  top: -2px;
  width: 55px;   /* antes 46px: +20% aprox */
  height: 55px;
  z-index: 30;
}

.profileAvatar .characterSprite .avatarAccessory.hatAccessory {
  top: -12px;
}

.avatar.sitting .characterSprite .avatarAccessory {
  top: -10px;
}

.avatar.sitting .characterSprite .avatarAccessory.hatAccessory {
  top: -18px;
}

/* Evita que el accesorio tenga doble achatado distinto: hereda el transform del sprite al estar dentro */
.avatar.dancing .characterSprite .avatarAccessory {
  transform: translateX(-50%);
}


/* Accesorios: selección tipo toggle, sin botón de X */
.profileAccessoryGrid:empty::after {
  content: "Sin accesorios disponibles";
  font-size: 11px;
  color: #64748b;
  font-weight: 800;
}

.profileAccessoryOption.active {
  border-color: #facc15 !important;
  background: rgba(250, 204, 21, .18) !important;
}


/* FIX tile hover/preselección: solo contorno amarillo, sin opacidad ni relleno */
.tile.hover,
.tile.hoverTile,
.tile.preview,
.tile.preselect,
.tile.selectedPreview,
.tile.placementPreview,
.tile.ghostTile,
.tile.tileHover,
.tile.tilePreview,
.roomTile.hover,
.roomTile.hoverTile,
.roomTile.preview,
.roomTile.preselect,
.roomTile.selectedPreview,
.roomTile.placementPreview,
.roomTile.ghostTile,
.roomTile.tileHover,
.roomTile.tilePreview,
#tileHover,
#tilePreview,
.tileHover,
.tilePreview,
.placementTilePreview,
.roomTilePreview,
.hoverTilePreview {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: inset 0 0 0 3px #facc15, 0 0 0 1px rgba(0,0,0,.28) !important;
  outline: none !important;
}

/* Si la preselección se dibuja como rombo aparte, mantener solo borde amarillo */
.tile.hover::before,
.tile.hoverTile::before,
.tile.preview::before,
.tile.preselect::before,
.tile.selectedPreview::before,
.tile.placementPreview::before,
.tile.ghostTile::before,
.tile.tileHover::before,
.tile.tilePreview::before,
.roomTile.hover::before,
.roomTile.hoverTile::before,
.roomTile.preview::before,
.roomTile.preselect::before,
.roomTile.selectedPreview::before,
.roomTile.placementPreview::before,
.roomTile.ghostTile::before,
.roomTile.tileHover::before,
.roomTile.tilePreview::before,
#tileHover::before,
#tilePreview::before,
.tileHover::before,
.tilePreview::before,
.placementTilePreview::before,
.roomTilePreview::before,
.hoverTilePreview::before {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  box-shadow: inset 0 0 0 3px #facc15, 0 0 0 1px rgba(0,0,0,.28) !important;
}


/* FIX REAL preselección tile: rombo solo contorno amarillo, sin relleno */
#placementTileOutline,
.placementTileOutline {
  position: absolute;
  width: 78px;
  height: 39px;
  box-sizing: border-box;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  pointer-events: none;
  border: 0 !important;
  box-shadow:
    inset 0 0 0 3px #facc15,
    0 0 0 1px rgba(0,0,0,.35),
    0 0 8px rgba(250,204,21,.55) !important;
  filter: none !important;
}


/* FIX REAL hover/preselección del tile: contorno amarillo sin relleno */
#world .tile {
  position: absolute;
}

#world .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  pointer-events: none;
  background: transparent !important;
  opacity: 0;
  box-shadow:
    inset 0 0 0 3px #facc15,
    0 0 0 1px rgba(0,0,0,.35),
    0 0 8px rgba(250,204,21,.55);
  transition: opacity .05s linear;
}

#world .tile:hover::after {
  opacity: 1 !important;
}

#world .tile:hover {
  opacity: 1 !important;
  filter: none !important;
}

/* En modos de edición/colocación, que siga siendo el mismo contorno amarillo */
#world .tile.customEditableTile:hover,
#world .tile.buildGhost:hover,
#world .tile.roomDoorPickableTile:hover {
  opacity: 1 !important;
  filter: none !important;
}


/* FIX DEFINITIVO hover/preselección tile: SVG independiente con contorno completo */
#world .tile::after {
  
}

#world .tile:hover {
  filter: none !important;
  opacity: 1 !important;
}

.tileHoverOutline {
  position: absolute;
  width: 78px;
  height: 39px;
  pointer-events: none;
  background: transparent !important;
  opacity: 1 !important;
  filter: none !important;
}

.tileHoverOutline svg {
  display: block;
  overflow: visible;
  width: 78px;
  height: 39px;
}

.tileHoverOutline polygon {
  fill: none !important;
  stroke: #facc15 !important;
  stroke-width: 3 !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 3px rgba(250, 204, 21, .65));
}


/* Editar perfil: previsualización del personaje */
.profileLivePreview {
  height: 112px;
  margin: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #dbeafe, #bfdbfe);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.profileLivePreview .profileAvatar {
  width: 72px;
  height: 96px;
  position: relative;
}

/* Ventana Papelera */
.trashPanel {
  position: absolute;
  width: 560px;
  max-width: calc(100vw - 24px);
  background: #f8fafc;
  border: 3px solid #d8b45a;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  z-index: 135;
  overflow: hidden;
  display: none;
  color: #111827;
}

.trashLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  padding: 0 12px 12px;
}

.trashInventoryBox,
.trashSlotBox {
  background: #e0f2fe;
  border: 2px solid #bae6fd;
  border-radius: 14px;
  padding: 10px;
}

.trashInventoryBox > strong,
.trashSlotBox > strong {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
  color: #0f172a;
}

.trashInventoryList {
  max-height: 280px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}

.trashInventoryItem {
  border: 2px solid #dbeafe;
  border-radius: 12px;
  background: rgba(255,255,255,.86);
  color: #0f172a;
  padding: 7px;
  cursor: pointer;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  box-shadow: none;
}

.trashInventoryItem strong {
  font-size: 11px;
  line-height: 1.1;
}

.trashInventoryItem span {
  font-size: 10px;
  color: #475569;
}

.trashInventoryIcon {
  width: 48px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trashInventoryIcon .catalogMini,
.trashSlotMini .catalogMini {
  transform: scale(.75);
}

.trashSlot {
  min-height: 112px;
  border: 2px dashed rgba(15,23,42,.32);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  color: #475569;
  margin-bottom: 10px;
  padding: 8px;
}

.trashSlot.filled {
  border-style: solid;
  background: rgba(250,204,21,.15);
  color: #0f172a;
}

.trashSlot strong {
  font-size: 11px;
  line-height: 1.1;
}

#trashDeleteBtn {
  width: 100%;
}


/* Beautify Editar perfil */
#profilePanel {
  width: 640px;
  max-width: calc(100vw - 36px);
}

#profilePanel .desc {
  margin-bottom: 10px;
}

.profileEditLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 14px;
  align-items: start;
}

.profileEditMainCard,
.profileEditBadgeCard {
  background: linear-gradient(180deg, #ffffff, #f6fbff);
  border: 2px solid #dbeafe;
  border-radius: 18px;
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.profileCardTitle {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 8px;
  text-align: center;
}

.profileLivePreview {
  height: 132px;
  margin: 0 0 12px 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.9), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
  border: 2px solid rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.profileLivePreview .profileAvatar {
  width: 96px;
  height: 108px;
  position: relative;
}

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

.profileNameRow,
.profileColorCard,
.profileAccessoryCard {
  background: #eff6ff;
  border: 2px solid #dbeafe;
  border-radius: 14px;
  padding: 10px;
}

.profileNameRow label,
.profileColorCard label,
.profileAccessoryCard label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 8px;
}

.profileNameRow input {
  width: 100%;
}

.profileVisualControls {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.profileColorCard {
  min-height: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.profileColorCard input[type="color"] {
  width: 78px;
  height: 78px;
  border-radius: 16px;
  border: 3px solid #fff;
  box-shadow: 0 10px 20px rgba(59,130,246,.18), 0 0 0 1px rgba(15,23,42,.08);
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.profileAccessoryCard {
  min-height: 124px;
}

.profileAccessoryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 46px));
  gap: 8px;
  align-items: center;
  justify-content: start;
}

.profileAccessoryOption {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.profileAccessoryOption img {
  max-width: 100%;
  max-height: 100%;
}

.profileSaveRow {
  margin-top: 12px;
}

.profileSaveRow button {
  width: 100%;
  min-height: 42px;
  font-size: 14px;
}

.profileEditBadgeCard .profileBadgeEditor {
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0;
}

#profilePanel .profileBadgeEditorTitle {
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 8px;
}

#profilePanel .editableBadgeSlots {
  min-height: 62px;
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 14px;
  background: #eff6ff;
  border: 2px solid #dbeafe;
}

#profilePanel .availableBadgeGrid {
  min-height: 168px;
  max-height: 206px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 14px;
  background: #eff6ff;
  border: 2px solid #dbeafe;
}

@media (max-width: 760px) {
  #profilePanel {
    width: min(640px, calc(100vw - 24px));
  }

  .profileEditLayout {
    grid-template-columns: 1fr;
  }

  .profileVisualControls {
    grid-template-columns: 1fr;
  }

  .profileColorCard {
    min-height: auto;
  }
}


/* FIX Papelera: inventario por categorías sin solapes ni barra horizontal */
.trashPanel {
  width: 620px;
  max-width: calc(100vw - 24px);
}

.trashLayout {
  grid-template-columns: minmax(0, 1fr) 160px !important;
  overflow: hidden;
}

.trashInventoryBox {
  min-width: 0;
  overflow: hidden;
}

.trashInventoryList {
  max-height: 330px;
  overflow-y: auto;
  overflow-x: hidden !important;
  display: block !important;
  padding-right: 2px;
}

.trashInventorySection {
  margin-bottom: 12px;
}

.trashInventorySectionTitle {
  font-size: 12px;
  font-weight: 1000;
  color: #0f172a;
  margin: 0 0 7px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
}

.trashInventoryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 8px;
  min-width: 0;
}

.trashInventoryItem {
  width: 100%;
  min-width: 0;
  min-height: 104px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 45px auto 12px;
  justify-items: center;
  align-items: center;
  gap: 4px;
}

.trashInventoryItem strong {
  width: 100%;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.05;
  min-height: 22px;
}

.trashInventoryItem span {
  line-height: 1;
}

.trashInventoryIcon {
  width: 50px;
  height: 42px;
  overflow: hidden;
}

.trashSlotBox {
  min-width: 0;
}

.trashSlot {
  overflow: hidden;
}

.trashSlot strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}


/* Objetos altos 512x1024: ocupan 1x1 pero se renderizan al doble de alto */
.object.imageObject.tallObjectSize,
.previewImageObject.tallObjectSize,
#previewIcon.imageObject.tallObjectSize {
  width: var(--object-w, 92px);
  height: var(--object-h, 184px);
}

.object.imageObject.tallObjectSize img,
.previewImageObject.tallObjectSize img,
#previewIcon.imageObject.tallObjectSize img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Si el hover del tile queda debajo de un objeto, se ve al 50% */
.tileHoverOutline.fadedByObject {
  opacity: .5 !important;
}


/* FIX REAL lámpara alta: clase segura + imagen 512x1024 */
.object.imageObject.tallObjectSize {
  width: var(--object-w, 92px) !important;
  height: var(--object-h, 184px) !important;
}

.object.imageObject.tallObjectSize img,
.object.imageObject.tallObjectSize .tintedObjectImage {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: 100% !important;
  object-fit: contain !important;
}

.tileHoverOutline {
  pointer-events: none !important;
}

.tileHoverOutline.fadedByObject {
  opacity: .5 !important;
}


/* Ajuste de anclaje para muebles altos 512x1024 */
.object.imageObject.tallObjectSize {
  transform-origin: center bottom;
}


/* Holobot rare_01 */
.holobotObject {
  filter: drop-shadow(0 0 10px rgba(56,189,248,.42));
}

.holobotLightGlow {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 150px;
  height: 94px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(56,189,248,.38) 0%, rgba(56,189,248,.22) 40%, rgba(56,189,248,0) 74%);
  pointer-events: none;
  z-index: -1;
}

.holobotBubbleStack {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 18px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 90;
}

.holobotBubble {
  width: max-content;
  max-width: 260px;
  min-width: 64px;
  padding: 8px 13px;
  border-radius: 14px;
  background: rgba(37, 99, 235, .8);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  box-shadow: 0 8px 18px rgba(15,23,42,.28);
  white-space: nowrap;
}

.holobotPanel {
  position: absolute;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: #f8fafc;
  border: 3px solid #38bdf8;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  z-index: 140;
  overflow: hidden;
  display: none;
  color: #111827;
}

.holobotToggleRow_OLD {
  margin: 0 12px 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: #e0f2fe;
  border: 2px solid #bae6fd;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
}

.holobotPhraseList {
  padding: 0 12px 12px;
  display: grid;
  gap: 8px;
}

.holobotPhraseList input {
  width: 100%;
  border: 2px solid #bae6fd;
  border-radius: 12px;
  padding: 10px;
  color: #0f172a;
  font-weight: 800;
  background: #fff;
}


/* Objetos largos 1024x512: ocupan 2x1 y se renderizan al doble de ancho */
.object.imageObject.longObjectSize,
.previewImageObject.longObjectSize,
#previewIcon.imageObject.longObjectSize {
  width: var(--object-w, 184px) !important;
  height: var(--object-h, 92px) !important;
}

.object.imageObject.longObjectSize img,
.object.imageObject.longObjectSize .tintedObjectImage,
.previewImageObject.longObjectSize img,
#previewIcon.imageObject.longObjectSize img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}


/* FIX REAL Holobot largo: raros_01 es 1024x512 y ocupa 2x1 */
.object.imageObject.longObjectSize,
.previewImageObject.longObjectSize,
#previewIcon.imageObject.longObjectSize {
  width: var(--object-w, 184px) !important;
  height: var(--object-h, 92px) !important;
}

.object.imageObject.longObjectSize img,
.object.imageObject.longObjectSize .tintedObjectImage,
.previewImageObject.longObjectSize img,
#previewIcon.imageObject.longObjectSize img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}


/* Holobot: botón Encender / Apagar frases */
.holobotPowerBtn {
  margin: 0 12px 10px;
  width: calc(100% - 24px);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #94a3b8, #64748b);
  color: #fff;
  font-weight: 1000;
  box-shadow: none;
  border: 0;
}

.holobotPowerBtn.active {
  background: linear-gradient(180deg, #38bdf8, #2563eb);
}


/* Holobot: modos de frases y tiempo */
.holobotSettingsGrid {
  padding: 0 12px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.holobotSettingsGrid label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
}

.holobotSettingsGrid select,
.holobotSettingsGrid input {
  width: 100%;
  border: 2px solid #bae6fd;
  border-radius: 10px;
  padding: 8px;
  color: #0f172a;
  background: #fff;
  font-weight: 800;
}

.holobotBubbleStack {
  bottom: calc(100% - 18px) !important;
}


/* Cinta transportadora: apilador bajito tipo roller */
.object.imageObject.conveyorObject {
  filter: drop-shadow(0 3px 3px rgba(15,23,42,.22));
}


/* FIX Holobot globos: más abajo, con deslizamiento y fade */
.holobotBubbleStack {
  bottom: calc(100% - 46px) !important;
  gap: 2px !important;
  transition: transform .28s ease, opacity .28s ease;
}

.holobotBubble {
  animation: holobotBubbleLife 5.25s ease forwards;
  transform-origin: center bottom;
}

@keyframes holobotBubbleLife {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }
  10% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) scale(.98);
  }
}

/* Cinta transportadora: apilador bajito tipo roller */
.object.imageObject.conveyorObject {
  transform-origin: center 78%;
  filter: drop-shadow(0 3px 3px rgba(15,23,42,.22));
}


/* FIX cintas simple tipo Habbo: apilado bajo */
.object.imageObject.conveyorObject {
  filter: drop-shadow(0 3px 3px rgba(15,23,42,.22));
}


/* Cintas tipo Habbo: giro simétrico normal, objeto desliza lento */
.object.conveyorSlidingObject {
  will-change: left, top;
}

.object.imageObject.conveyorObject {
  filter: drop-shadow(0 3px 3px rgba(15,23,42,.22));
}

/* Holobot globos más abajo + fade/deslizamiento */
.holobotBubbleStack {
  bottom: calc(100% - 46px) !important;
  gap: 2px !important;
}

.holobotBubble {
  animation: holobotBubbleLife 5.25s ease forwards;
  transform-origin: center bottom;
}

@keyframes holobotBubbleLife {
  0% { opacity: 0; transform: translateY(12px) scale(.98); }
  10% { opacity: 1; transform: translateY(0) scale(1); }
  78% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(.98); }
}


/* Cintas: giro por rotation con hogar_20 / hogar_20b */
.object.conveyorSlidingObject {
  will-change: left, top;
}


/* Cintas: solo imágenes y slide persistente */
.object.conveyorSlidingObject {
  will-change: left, top;
}


/* Cintas: animación persistente sin reinicio real */
.object.conveyorSlidingObject {
  will-change: left, top;
}


/* Cintas: bucle estable sin clicks */
.object.conveyorSlidingObject {
  will-change: left, top;
}


/* Accesorio sentado desplazado */
.sitting .avatarAccessory {
  transform: translateX(8px);
}

.sitting.sittingFacingMirror .avatarAccessory {
  transform: translateX(-8px);
}

/* Cintas: slide local persistente */
.object.conveyorSlidingObject {
  will-change: left, top;
}


/* FIX Holobot mensajes: hasta 3, más separación, sin reaparición */
.holobotBubbleStack {
  gap: 8px !important;
  bottom: calc(100% - 52px) !important;
  align-items: center;
}

.holobotBubble {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .34s ease, transform .34s ease, margin .34s ease;
  animation: none !important;
  margin-top: 0;
  margin-bottom: 0;
}

.holobotBubble.entering {
  opacity: 0;
  transform: translateY(14px);
}

.holobotBubble.leaving {
  opacity: 0 !important;
  transform: translateY(-18px) scale(.98);
  pointer-events: none;
}

/* Cintas: objeto transportado siempre queda sobre la cinta */
.object.conveyorSlidingObject {
  will-change: left, top;
}


/* FIX DEFINITIVO Holobot: pila real de mensajes */
.holobotBubbleStack {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 9px !important;
  bottom: calc(100% - 52px) !important;
  pointer-events: none;
}

.holobotBubble {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .38s ease, transform .38s ease;
  animation: none !important;
  will-change: opacity, transform;
}

.holobotBubble.entering {
  opacity: 0;
  transform: translateY(16px);
}

.holobotBubble.leaving {
  opacity: 0 !important;
  transform: translateY(-20px) scale(.96);
}

/* Cintas: animación manual por rAF, no CSS transition */
.object.conveyorSlidingObject {
  will-change: left, top;
  transition: none !important;
}


/* FIX DEFINITIVO Holobot: mensajes naturales */
.holobotBubbleStack {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 9px !important;
  bottom: calc(100% - 52px) !important;
  pointer-events: none;
}

.holobotBubble {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .42s ease, transform .42s ease;
  animation: none !important;
  will-change: opacity, transform;
}

.holobotBubble.entering {
  opacity: 0;
  transform: translateY(16px);
}

.holobotBubble.leaving {
  opacity: 0 !important;
  transform: translateY(-22px) scale(.96);
}

/* Cintas: animación manual por rAF, no dependiente del hover/foco CSS */
.object.conveyorSlidingObject {
  will-change: left, top;
  transition: none !important;
}


/* FIX burbujas usuarios: pila estable sin parpadeo */
.avatar .bubbleStack,
.avatar .playerBubbleStack {
  position: absolute;
  left: 50%;
  bottom: 82px;
  transform: translateX(-50%);
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 7px !important;
  pointer-events: none;
  z-index: 50;
}

.playerChatBubble,
.avatar .chatBubble,
.avatar .bubble {
  max-width: 180px;
  min-width: 42px;
  padding: 7px 10px;
  border-radius: 13px;
  background: rgba(255,255,255,.94);
  color: #182033;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 5px 12px rgba(0,0,0,.24);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .32s ease, transform .32s ease;
  animation: none !important;
  will-change: opacity, transform;
}

.playerChatBubble.entering {
  opacity: 0;
  transform: translateY(13px);
}

.playerChatBubble.leaving {
  opacity: 0 !important;
  transform: translateY(-15px) scale(.96);
}


/* Teletransportador hogar_25: objeto con dos capas */
.teleporterObject {
  overflow: visible !important;
}

.teleporterObject img.teleporterLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.teleporterTopObject {
  pointer-events: none !important;
}

.teleporterMini {
  position: relative;
}

.teleporterMini .teleporterLayer,
.teleporterGhostObject .teleporterLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.avatar.teleportFlash .characterSprite,
.avatar.teleportFlash .profileAvatar,
.avatar.teleportFlash {
  animation: teleportBlinkWhite .72s steps(4, end);
}

@keyframes teleportBlinkWhite {
  0%, 100% { filter: none; opacity: 1; }
  20%, 60% { filter: brightness(6) saturate(0) contrast(1.2); opacity: .95; }
  40%, 80% { filter: none; opacity: 1; }
}


/* FIX teletransportador: desaparición/aparición con flash blanco más largo */
.avatar.teleportVanish {
  animation: teleportVanishWhite 1.28s ease-in-out forwards !important;
}

.avatar.teleportAppear {
  animation: teleportAppearWhite 1.0s ease-in-out forwards !important;
}

.avatar.teleportFlash {
  animation: teleportBlinkWhite 1.0s ease-in-out !important;
}

@keyframes teleportVanishWhite {
  0% { filter: none; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  18% { filter: brightness(7) saturate(0) contrast(1.2); opacity: 1; }
  36% { filter: none; opacity: .95; }
  54% { filter: brightness(8) saturate(0) contrast(1.35); opacity: 1; }
  72% { filter: brightness(10) saturate(0); opacity: .55; transform: translate(-50%, -106%) scale(.96); }
  100% { filter: brightness(10) saturate(0); opacity: 0; transform: translate(-50%, -112%) scale(.86); }
}

@keyframes teleportAppearWhite {
  0% { filter: brightness(10) saturate(0); opacity: 0; transform: translate(-50%, -112%) scale(.86); }
  20% { filter: brightness(10) saturate(0); opacity: .95; }
  42% { filter: none; opacity: 1; transform: translate(-50%, -100%) scale(1.03); }
  64% { filter: brightness(7) saturate(0); opacity: 1; }
  100% { filter: none; opacity: 1; transform: translate(-50%, -100%) scale(1); }
}


/* Inventario: teletransportadores agrupados por pareja */
.inventoryGridItem.teleporterPairInventoryItem {
  outline: 2px solid rgba(80, 220, 255, .35);
  box-shadow: 0 0 14px rgba(80, 220, 255, .18);
}

.inventoryPairMeta {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  color: #5eeaff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}


/* FIX centrado personaje: los pies quedan anclados exactamente al centro del tile */
.avatar {
  transform: translate(-50%, -100%) !important;
}

.avatar.teleportVanish,
.avatar.teleportAppear,
.avatar.teleportFlash {
  transform-origin: 50% 100%;
}


/* Teletransporte real: sin desplazamiento interpolado entre tiles */
.avatar.noMoveTransition {
  transition: none !important;
}


/* Teletransportador: al llegar al portal se encoge hasta desaparecer */
.avatar.teleportShrink {
  animation: teleportShrinkOut .95s ease-in forwards !important;
  transform-origin: 50% 100%;
}

@keyframes teleportShrinkOut {
  0% {
    opacity: 1;
    filter: none;
    transform: translate(-50%, -100%) scale(1);
  }
  22% {
    opacity: 1;
    filter: brightness(8) saturate(0);
    transform: translate(-50%, -100%) scale(.92);
  }
  52% {
    opacity: .82;
    filter: brightness(10) saturate(0);
    transform: translate(-50%, -100%) scale(.62);
  }
  78% {
    opacity: .38;
    filter: brightness(12) saturate(0);
    transform: translate(-50%, -100%) scale(.28);
  }
  100% {
    opacity: 0;
    filter: brightness(12) saturate(0);
    transform: translate(-50%, -100%) scale(.05);
  }
}

/* FIX DATA HOTEL 2026-06-06: teletransportador con botón Usar al entrar */
.teleporterUseBubbleWorld {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
}

.teleporterUseBubbleWorld::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(255, 255, 255, 0.96);
  border-right: 2px solid rgba(15, 23, 42, 0.18);
  border-bottom: 2px solid rgba(15, 23, 42, 0.18);
  z-index: -1;
}

.teleporterUseBubbleWorld button {
  position: relative;
  z-index: 1;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #dbeafe);
  color: #0f172a;
  border: 2px solid rgba(15, 23, 42, 0.18);
  box-shadow: none;
  font-size: 13px;
  font-weight: 1000;
  white-space: nowrap;
}

.teleporterUseBubbleWorld button:active {
  transform: translateY(1px);
}

/* FIX DATA HOTEL 2026-06-06: chat tipo Habbo, una sola línea y duración estable */
.avatar .bubbleStack,
.avatar .playerBubbleStack {
  bottom: 124px !important;
  min-width: max-content;
  pointer-events: none !important;
}

.playerChatBubble,
.avatar .chatBubble,
.avatar .bubble,
.bubble {
  width: max-content !important;
  max-width: min(620px, calc(100vw - 56px)) !important;
  min-width: 80px;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  line-height: 1.15 !important;
  padding: 9px 16px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #111827 !important;
  border: 2px solid rgba(214, 221, 232, 0.96) !important;
  opacity: 1;
}

/* FIX DATA HOTEL 2026-06-06 — chat definitivo tipo Habbo */
#chatBubbleLayer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.playerChatOverlayStack {
  position: absolute !important;
  transform: translate(-50%, -100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  min-width: max-content !important;
  max-width: calc(100vw - 32px) !important;
}

.playerChatOverlayStack .playerChatBubble,
.playerChatBubble {
  position: relative !important;
  display: block !important;
  width: max-content !important;
  max-width: calc(100vw - 44px) !important;
  min-width: 46px !important;
  padding: 8px 15px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #111827 !important;
  border: 2px solid rgba(215, 222, 235, 0.98) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.25) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: opacity 520ms ease, transform 520ms ease !important;
  animation: none !important;
  will-change: opacity, transform !important;
}

.playerChatOverlayStack .playerChatBubble.entering,
.playerChatBubble.entering {
  opacity: 0 !important;
  transform: translateY(8px) scale(0.98) !important;
}

.playerChatOverlayStack .playerChatBubble.leaving,
.playerChatBubble.leaving {
  opacity: 0 !important;
  transform: translateY(-10px) scale(0.96) !important;
}

/* FIX DATA HOTEL 2026-06-06 — teletransportador: flash blanco + encoger/aparecer sin salto */
.avatar.noMoveTransition {
  transition: none !important;
}

.avatar.teleportShrink,
.avatar.teleportAppear,
.avatar.teleportFlash,
.avatar.teleportVanish {
  transform-origin: 50% 100% !important;
  transition: none !important;
}

.avatar.teleportShrink {
  animation: dataHotelTeleportOut 1100ms ease-in forwards !important;
}

.avatar.teleportAppear {
  animation: dataHotelTeleportIn 1050ms ease-out forwards !important;
}

@keyframes dataHotelTeleportOut {
  0% {
    opacity: 1;
    filter: none;
    transform: translate(-50%, -100%) scale(1);
  }
  14% {
    opacity: 1;
    filter: brightness(9) saturate(0) contrast(1.35);
    transform: translate(-50%, -100%) scale(1);
  }
  28% {
    opacity: 1;
    filter: none;
    transform: translate(-50%, -100%) scale(0.86);
  }
  44% {
    opacity: 0.96;
    filter: brightness(10) saturate(0) contrast(1.45);
    transform: translate(-50%, -100%) scale(0.62);
  }
  68% {
    opacity: 0.62;
    filter: brightness(11) saturate(0);
    transform: translate(-50%, -100%) scale(0.32);
  }
  100% {
    opacity: 0;
    filter: brightness(12) saturate(0);
    transform: translate(-50%, -100%) scale(0.04);
  }
}

@keyframes dataHotelTeleportIn {
  0% {
    opacity: 0;
    filter: brightness(12) saturate(0);
    transform: translate(-50%, -100%) scale(0.04);
  }
  24% {
    opacity: 0.75;
    filter: brightness(11) saturate(0);
    transform: translate(-50%, -100%) scale(0.36);
  }
  46% {
    opacity: 1;
    filter: brightness(10) saturate(0) contrast(1.45);
    transform: translate(-50%, -100%) scale(0.68);
  }
  70% {
    opacity: 1;
    filter: none;
    transform: translate(-50%, -100%) scale(0.92);
  }
  86% {
    opacity: 1;
    filter: brightness(8) saturate(0) contrast(1.25);
    transform: translate(-50%, -100%) scale(1);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translate(-50%, -100%) scale(1);
  }
}

/* FIX DATA HOTEL — 2026-06-06 noche: último paso con saltito, sentado más bajo y teletransporte visible */

/* Sentado un poco más bajo sobre el asiento */
.avatar.sitting .characterSprite {
  bottom: -3px !important;
}

/* El accesorio sentado estaba desplazado al lado equivocado: mantenemos el centrado base y lo movemos al contrario */
.avatar.sitting .characterSprite .avatarAccessory,
.sitting .avatarAccessory {
  transform: translateX(calc(-50% - 8px)) !important;
}

.avatar.sitting.sittingFacingMirror .characterSprite .avatarAccessory,
.sitting.sittingFacingMirror .avatarAccessory {
  transform: translateX(calc(-50% + 8px)) !important;
}

/* Mientras teletransporta, no baila/camina: la animación va en el sprite para no chocar con el transform !important del avatar */
.avatar.teleportShrink .characterSprite {
  animation: dataHotelSpriteTeleportOut 1100ms ease-in forwards !important;
  transform-origin: 50% 100% !important;
}

.avatar.teleportAppear .characterSprite {
  animation: dataHotelSpriteTeleportIn 1050ms ease-out forwards !important;
  transform-origin: 50% 100% !important;
}

.avatar.teleportShrink .name,
.avatar.teleportAppear .name,
.avatar.teleportVanish .name,
.avatar.teleportFlash .name {
  opacity: 0 !important;
}

@keyframes dataHotelSpriteTeleportOut {
  0% {
    opacity: 1;
    filter: none;
    transform: translateX(-50%) scale(1);
  }
  12% {
    opacity: 1;
    filter: brightness(10) saturate(0) contrast(1.45);
    transform: translateX(-50%) scale(1);
  }
  28% {
    opacity: 1;
    filter: none;
    transform: translateX(-50%) scale(0.82);
  }
  48% {
    opacity: 0.86;
    filter: brightness(12) saturate(0) contrast(1.5);
    transform: translateX(-50%) scale(0.56);
  }
  72% {
    opacity: 0.48;
    filter: brightness(13) saturate(0);
    transform: translateX(-50%) scale(0.24);
  }
  100% {
    opacity: 0;
    filter: brightness(14) saturate(0);
    transform: translateX(-50%) scale(0.03);
  }
}

@keyframes dataHotelSpriteTeleportIn {
  0% {
    opacity: 0;
    filter: brightness(14) saturate(0);
    transform: translateX(-50%) scale(0.03);
  }
  22% {
    opacity: 0.72;
    filter: brightness(13) saturate(0);
    transform: translateX(-50%) scale(0.28);
  }
  46% {
    opacity: 1;
    filter: brightness(12) saturate(0) contrast(1.5);
    transform: translateX(-50%) scale(0.62);
  }
  70% {
    opacity: 1;
    filter: none;
    transform: translateX(-50%) scale(0.9);
  }
  86% {
    opacity: 1;
    filter: brightness(9) saturate(0) contrast(1.3);
    transform: translateX(-50%) scale(1.02);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translateX(-50%) scale(1);
  }
}


/* FIX FINAL TELETRANSPORTE — la animación la controla JS con Web Animations para que no la pisen los transforms inline */
.avatar.teleporting .characterSprite,
.avatar.teleportShrink .characterSprite,
.avatar.teleportAppear .characterSprite,
.avatar.teleportVanish .characterSprite,
.avatar.teleportFlash .characterSprite {
  animation: none !important;
  transform-origin: 50% 100% !important;
  will-change: transform, opacity, filter !important;
}

.avatar.teleporting.walking .characterSprite {
  animation: none !important;
}

.avatar.teleporting .name,
.avatar.teleportShrink .name,
.avatar.teleportAppear .name,
.avatar.teleportVanish .name,
.avatar.teleportFlash .name {
  opacity: 0 !important;
}

/* SMART ROOM */
#smartRoomPanel {
  right: 28px;
  top: 86px;
  width: 390px;
  max-width: calc(100vw - 20px);
  padding: 0;
  background: #f8fafc;
  color: #111827;
  border: 3px solid #d8b45a;
  z-index: 120;
}

#smartRoomPanel .desc {
  padding: 12px 14px 2px;
}

.smartRoomSection {
  margin: 12px 14px;
}

.smartRoomSection label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: #5b3b00;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.smartRoomOptions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.smartRoomOption {
  padding: 9px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
  border: 1px solid rgba(15,23,42,0.16);
  color: #111827;
  font-size: 12px;
}

.smartRoomOption.active {
  background: linear-gradient(180deg, #facc15, #d97706);
  color: #241100;
  border-color: rgba(120, 53, 15, 0.45);
}

#smartRoomPanel .singleAction {
  padding: 4px 14px 14px;
}

/* DATA HOTEL v3: panel de edición de sala más ordenado */
#roomEditPanel {
  width: 258px !important;
  background: #f8fafc !important;
  color: #111827 !important;
  border: 3px solid #d8b45a !important;
  border-radius: 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: none !important;
}

#roomEditPanel .roomEditHeader {
  background: linear-gradient(180deg, #ffefb0, #e9c765) !important;
  color: #241100 !important;
  padding: 10px 12px !important;
  margin: 0 !important;
}

#roomEditPanel .roomEditTitle {
  color: #241100 !important;
  font-size: 13px !important;
  letter-spacing: .3px;
}

#roomEditPanel .roomEditBody {
  padding: 12px !important;
  display: grid;
  gap: 10px;
}

#roomEditPanel .inputWrap,
#roomEditPanel .roomEditInputWrap,
#roomEditPanel .roomEditColorGrid,
#roomEditPanel .roomAccessBox,
#roomEditPanel .roomVisibilityBox,
#roomEditPanel .roomEditTileTools,
#roomEditPanel .roomEditSection {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px !important;
  margin: 0 !important;
  display: grid;
  gap: 7px;
}

#roomEditPanel label,
#roomEditPanel .roomAccessBox label,
#roomEditPanel .roomLightBox label,
#roomEditPanel .roomEditTileTools label,
#roomEditPanel .roomEditInputWrap label,
#roomEditPanel .roomEditColorGrid label {
  color: #0f172a !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  text-transform: uppercase;
  letter-spacing: .2px;
}

#roomEditPanel input,
#roomEditPanel select,
#roomEditPanel .roomAccessBox select,
#roomEditPanel .roomAccessBox input,
#roomEditPanel .roomEditInputWrap input {
  width: 100% !important;
  background: #f8fafc !important;
  color: #111827 !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 11px !important;
  padding: 8px !important;
  font-weight: 900 !important;
}

#roomEditPanel .roomEditColorGrid {
  grid-template-columns: 1fr 54px;
  align-items: center;
}

.roomWallColorRow {
  grid-template-columns: 1fr 54px;
  align-items: center;
  gap: 8px;
}

.roomWallColorRow span {
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

#roomEditPanel input[type="color"] {
  height: 34px !important;
  padding: 2px !important;
}

#roomEditPanel .saveRoomSettingsBtn {
  margin-top: 2px;
  border-radius: 13px;
  padding: 10px 12px !important;
}

/* Paredes estilo Habbo para salas con paredes activadas */
.roomWallSegment {
  position: absolute;
  width: 78px;
  height: 78px;
  pointer-events: none;
  transform-origin: center bottom;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.16));
}

.roomWallNorth {
  background: linear-gradient(180deg, var(--wall-color), var(--wall-shadow));
  clip-path: polygon(0 0, 100% 0, 100% 52%, 50% 100%, 0 52%);
  border-top: 2px solid rgba(255,255,255,.32);
}

.roomWallWest {
  background: linear-gradient(180deg, var(--wall-color), var(--wall-shadow));
  clip-path: polygon(0 0, 50% 48%, 50% 100%, 0 52%);
  opacity: .58;
}

/* Previsualización del teletransportador con sus dos capas */
.previewImageObject.teleporterPreviewObject,
.linkedPreviewIcon.teleporterPreviewObject {
  position: relative;
  overflow: visible;
  width: var(--object-w, 96px) !important;
  height: var(--object-h, 132px) !important;
}

.teleporterPreviewObject .teleporterLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}


/* DATA HOTEL fix: panel de edición compacto, con el color oscuro original y contraíble */
#roomEditPanel {
  width: 222px !important;
  max-height: 388px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(6px) !important;
}

#roomEditPanel .roomEditHeader {
  background: rgba(15, 23, 42, 0.96) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding: 8px 9px !important;
  margin: 0 !important;
}

#roomEditPanel .roomEditTitle {
  color: #ffffff !important;
  font-size: 12px !important;
  letter-spacing: .3px;
}

#roomEditPanel .roomEditBody {
  padding: 8px !important;
  display: grid;
  gap: 6px;
  max-height: 334px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#roomEditPanel .inputWrap,
#roomEditPanel .roomEditInputWrap,
#roomEditPanel .roomEditColorGrid,
#roomEditPanel .roomAccessBox,
#roomEditPanel .roomVisibilityBox,
#roomEditPanel .roomEditTileTools,
#roomEditPanel .roomEditSection {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  padding: 7px !important;
  margin: 0 !important;
  display: grid;
  gap: 5px;
}

#roomEditPanel label,
#roomEditPanel .roomAccessBox label,
#roomEditPanel .roomLightBox label,
#roomEditPanel .roomEditTileTools label,
#roomEditPanel .roomEditInputWrap label,
#roomEditPanel .roomEditColorGrid label {
  color: #e5e7eb !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  text-transform: uppercase;
  letter-spacing: .2px;
}

#roomEditPanel input,
#roomEditPanel select,
#roomEditPanel .roomAccessBox select,
#roomEditPanel .roomAccessBox input,
#roomEditPanel .roomEditInputWrap input {
  width: 100% !important;
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 9px !important;
  padding: 6px 7px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}

#roomEditPanel .roomEditColorGrid,
#roomEditPanel .roomWallColorRow {
  grid-template-columns: 1fr 44px !important;
  align-items: center;
  gap: 6px;
}

#roomEditPanel input[type="color"] {
  width: 44px !important;
  height: 28px !important;
  padding: 2px !important;
}

#roomEditPanel button {
  width: 100%;
  padding: 7px 8px !important;
  font-size: 11px !important;
}

#roomEditPanel .saveRoomSettingsBtn {
  margin-top: 0 !important;
  border-radius: 11px !important;
  padding: 8px 9px !important;
}

.roomWallColorRow span {
  color: #e5e7eb !important;
  font-size: 11px !important;
  font-weight: 900;
}

.roomEditCollapseBtn {
  width: 26px !important;
  height: 24px !important;
  min-width: 26px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, #64748b, #334155) !important;
  color: white !important;
}

#roomEditPanel.collapsed {
  width: 156px !important;
  max-height: 42px !important;
}

#roomEditPanel.collapsed .roomEditBody {
  
}

/* DATA HOTEL fix: paredes grandes tipo Habbo, no bloques pequeños raros */
.roomWallSegment {
  position: absolute;
  pointer-events: none;
  height: calc(var(--wall-height, 116px) + 22px) !important;
  width: 42px !important;
  overflow: visible;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.14));
  transform-origin: left bottom;
}

.roomWallSegment::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0) 35%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, var(--wall-light, #ead19a), var(--wall-color, #d7b46a) 62%, var(--wall-shadow, #a9823d));
  border: 2px solid rgba(80, 45, 16, 0.28);
  box-shadow:
    inset 0 8px 0 rgba(255,255,255,.10),
    inset 0 -8px 0 rgba(0,0,0,.10);
}

.roomWallSegment::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 8px;
  height: 7px;
  background: rgba(75, 43, 16, 0.34);
  border-radius: 999px;
}

.roomWallNorth {
  clip-path: none !important;
  opacity: 1 !important;
}

.roomWallNorth::before {
  clip-path: polygon(0 0, 100% 23%, 100% 100%, 0 77%);
}

.roomWallNorth::after {
  transform: skewY(23deg);
}

.roomWallWest {
  clip-path: none !important;
  opacity: 1 !important;
}

.roomWallWest::before {
  clip-path: polygon(0 23%, 100% 0, 100% 77%, 0 100%);
}

.roomWallWest::after {
  transform: skewY(-23deg);
}

/* DATA HOTEL fix final: panel fijo sin scroll y paredes isométricas tipo Habbo */
#roomEditPanel {
  width: 224px !important;
  max-height: none !important;
  overflow: hidden !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 16px !important;
}

#roomEditPanel .roomEditHeader {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 34px !important;
  padding: 7px 8px !important;
}

#roomEditPanel .roomEditBody {
  padding: 7px !important;
  display: grid !important;
  gap: 5px !important;
  max-height: none !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}

#roomEditPanel .roomEditBody::-webkit-scrollbar {
  
}

#roomEditPanel .inputWrap,
#roomEditPanel .roomEditInputWrap,
#roomEditPanel .roomEditColorGrid,
#roomEditPanel .roomAccessBox,
#roomEditPanel .roomVisibilityBox,
#roomEditPanel .roomEditTileTools,
#roomEditPanel .roomEditSection {
  padding: 5px !important;
  gap: 4px !important;
  border-radius: 10px !important;
}

#roomEditPanel label,
#roomEditPanel .roomAccessBox label,
#roomEditPanel .roomLightBox label,
#roomEditPanel .roomEditTileTools label,
#roomEditPanel .roomEditInputWrap label,
#roomEditPanel .roomEditColorGrid label {
  font-size: 9px !important;
  line-height: 1 !important;
}

#roomEditPanel input,
#roomEditPanel select,
#roomEditPanel .roomAccessBox select,
#roomEditPanel .roomAccessBox input,
#roomEditPanel .roomEditInputWrap input {
  min-height: 26px !important;
  padding: 4px 6px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}

#roomEditPanel .roomEditColorGrid,
#roomEditPanel .roomWallColorRow {
  grid-template-columns: 1fr 38px !important;
  gap: 4px !important;
}

#roomEditPanel input[type="color"] {
  width: 38px !important;
  height: 24px !important;
}

#roomEditPanel button {
  padding: 6px 7px !important;
  font-size: 10px !important;
  border-radius: 9px !important;
}

#roomEditPanel.collapsed {
  width: 224px !important;
  max-height: 36px !important;
}

#roomEditPanel.collapsed .roomEditBody {
  
}

/* Paredes isométricas: la base coincide con las aristas superiores del tile */
.roomWallSegment {
  position: absolute !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform: none !important;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.16)) !important;
  background: transparent !important;
  border: 0 !important;
}

.roomWallSegment::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 78px !important;
  height: var(--wall-face-height, 135.5px) !important;
  border: 1px solid rgba(74, 45, 18, 0.32) !important;
  box-shadow:
    inset 0 8px 0 rgba(255, 255, 255, 0.12),
    inset 0 -10px 0 rgba(0, 0, 0, 0.12) !important;
}

.roomWallSegment::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 78px !important;
  height: var(--wall-face-height, 135.5px) !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 22%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,0) 1px 30px) !important;
  opacity: .75 !important;
}

.roomWallNorth::before {
  clip-path: polygon(50% 0, 100% 14.4%, 100% 100%, 50% 85.6%) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), rgba(0,0,0,.10)),
    linear-gradient(180deg, var(--wall-light, #ead19a), var(--wall-color, #d7b46a) 62%, var(--wall-shadow, #a9823d)) !important;
}

.roomWallNorth::after {
  clip-path: polygon(50% 0, 100% 14.4%, 100% 100%, 50% 85.6%) !important;
}

.roomWallWest::before {
  clip-path: polygon(50% 0, 0 14.4%, 0 100%, 50% 85.6%) !important;
  background:
    linear-gradient(270deg, rgba(255,255,255,.12), rgba(0,0,0,.13)),
    linear-gradient(180deg, var(--wall-light, #ead19a), var(--wall-color, #d7b46a) 62%, var(--wall-dark, #8b672d)) !important;
}

.roomWallWest::after {
  clip-path: polygon(50% 0, 0 14.4%, 0 100%, 50% 85.6%) !important;
}


/* DATA HOTEL ajuste final: panel un poco mayor, paredes color plano, sin degradados */
#roomEditPanel {
  width: 248px !important;
}

#roomEditPanel.collapsed {
  width: 248px !important;
}

#roomEditPanel .roomEditHeader {
  min-height: 38px !important;
  padding: 8px 10px !important;
}

#roomEditPanel .roomEditBody {
  padding: 9px !important;
  gap: 7px !important;
}

#roomEditPanel .inputWrap,
#roomEditPanel .roomEditInputWrap,
#roomEditPanel .roomEditColorGrid,
#roomEditPanel .roomAccessBox,
#roomEditPanel .roomVisibilityBox,
#roomEditPanel .roomEditTileTools,
#roomEditPanel .roomEditSection {
  padding: 7px !important;
  gap: 5px !important;
}

#roomEditPanel input,
#roomEditPanel select,
#roomEditPanel .roomAccessBox select,
#roomEditPanel .roomAccessBox input,
#roomEditPanel .roomEditInputWrap input {
  min-height: 28px !important;
  font-size: 12px !important;
}

#roomEditPanel button {
  padding: 7px 8px !important;
  font-size: 11px !important;
}

.roomWallSegment {
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.14)) !important;
}

.roomWallSegment::before {
  background: var(--wall-color, #f3d38a) !important;
  border: 1px solid rgba(74, 45, 18, 0.35) !important;
  box-shadow: none !important;
}

.roomWallSegment::after {
  
}

.roomWallNorth::before {
  background: var(--wall-color, #f3d38a) !important;
}

.roomWallWest::before {
  background: var(--wall-color, #f3d38a) !important;
}


/* DATA HOTEL final: color de pared base con lateral isométrico ligeramente sombreado */
.roomWallNorth::before {
  background: var(--wall-color, #f3d38a) !important;
}
.roomWallWest::before {
  background: var(--wall-shadow, #d7b86c) !important;
}
.roomWallSegment::after {
  
}

/* Encogedor: comparte representación por capas con el teletransportador */
.teleporterObject .teleporterLayer {
  pointer-events: none;
}
.avatar.avatarShrunk .characterSprite {
  transform-origin: 50% 100% !important;
}

.avatar.avatarShrunk.walking .characterSprite {
  animation: avatarFastHop 0.08s infinite alternate ease-in-out !important;
}

.avatar.avatarShrunk .name {
  transform: translateX(-50%) scale(0.82);
  transform-origin: center bottom;
}
body.shrinkModeActive #zoomBox {
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.18);
}

/* FIX DATA HOTEL — Encogedor: el personaje pequeño también debe saltar al caminar.
   El salto anterior se multiplicaba por la escala pequeña y casi no se veía.
   Este override mantiene el scale pequeño, pero aplica un rebote visible desde los pies. */
.avatar.walking:not(.teleporting):not(.resizeAnimating) .characterSprite {
  transform-origin: 50% 100% !important;
  animation: avatarNormalWalkHopFixed 0.08s infinite alternate ease-in-out !important;
}

.avatar.avatarShrunk.walking:not(.teleporting):not(.resizeAnimating) .characterSprite {
  transform-origin: 50% 100% !important;
  animation: avatarShrunkWalkHopFixed 0.10s infinite alternate ease-in-out !important;
}

@keyframes avatarNormalWalkHopFixed {
  from {
    transform: translateX(-50%) translateY(0) scale(var(--avatar-scale, 1));
  }
  to {
    transform: translateX(-50%) translateY(-8px) scale(var(--avatar-scale, 1));
  }
}

@keyframes avatarShrunkWalkHopFixed {
  from {
    transform: translateX(-50%) translateY(0) scale(var(--avatar-scale, 0.23));
  }
  to {
    transform: translateX(-50%) translateY(-11px) scale(var(--avatar-scale, 0.23));
  }
}


/* Dimensión interdimensional */
#roomArea.dimensionBackground {
  background: url("../estilos/fondos/fondo2.png") center center / cover no-repeat !important;
}
body.dimensionRoomActive #bottomDock {
  
}
.avatar.dimensionPortalFlash::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(57,255,20,.95) 0%, rgba(57,255,20,.65) 34%, rgba(57,255,20,.18) 62%, rgba(57,255,20,0) 78%);
  mix-blend-mode: screen;
  animation: dimensionPortalFlashPulse .85s ease-out forwards;
  z-index: 50;
}
.avatar.dimensionPortalFlash .characterSprite {
  filter: brightness(3) drop-shadow(0 0 14px rgba(57,255,20,.95)) drop-shadow(0 0 28px rgba(57,255,20,.65));
}
@keyframes dimensionPortalFlashPulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.75); }
}

/* Fix dimensión/chat y botón puerta */
body.dimensionRoomActive #chatFloat {
  display: flex !important;
  pointer-events: auto !important;
  z-index: 100000 !important;
}
#chatBubbleLayer {
  z-index: 100001 !important;
}
.playerChatOverlayStack {
  transform: translate(-50%, -100%);
}
.doorToggleAction {
  margin-top: 8px;
}
.doorToggleAction button {
  width: 100%;
}

/* Máquina del tiempo */
#roomArea.timePastBackground {
  background: url("../estilos/fondos/fondo3.png") center center / cover no-repeat !important;
}
body.timePastRoomActive #bottomDock,
body.timePastRoomActive #roomEditPanel,
body.timePastRoomActive #zoomBox {
  
}
#timeMachineChoicePanel {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: rgba(0,0,0,0.18);
}
.timeMachineChoiceCard {
  width: min(360px, calc(100vw - 28px));
  background: #ffffff;
  color: #0f172a;
  border: 4px solid #facc15;
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.38);
  overflow: hidden;
}
.timeMachineChoiceHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(180deg,#12314a,#0a1a2b);
  color: #fff;
}
.timeMachineCloseBtn {
  padding: 4px 9px;
  border-radius: 999px;
}
.timeMachineChoiceText {
  padding: 14px 16px 4px;
  font-weight: 800;
}
.timeMachineChoiceButtons {
  display: flex;
  gap: 10px;
  padding: 14px 16px 18px;
}
.timeMachineChoiceButtons .timeBtn {
  flex: 1;
}
.timeMachineChoiceButtons .futureBtn {
  background: linear-gradient(180deg,#fb7185,#be123c);
}
.timeMachineChoiceButtons .presentBtn {
  background: linear-gradient(180deg,#34d399,#059669);
}
.timeMachineChoiceButtons .pastBtn {
  background: linear-gradient(180deg,#facc15,#d97706);
  color: #241100;
}
.timeMachineChoiceButtons .timeBtn:disabled {
  opacity: .42;
  filter: grayscale(.35);
}
.avatar.timeMachineFlash::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(80,190,255,.98) 0%, rgba(59,130,246,.72) 38%, rgba(59,130,246,.22) 64%, rgba(59,130,246,0) 80%);
  mix-blend-mode: screen;
  animation: timeMachineFlashPulse .85s ease-out forwards;
  z-index: 70;
}
.avatar.timeMachineFlash .characterSprite {
  filter: brightness(3.2) drop-shadow(0 0 16px rgba(80,190,255,.95)) drop-shadow(0 0 30px rgba(59,130,246,.72));
}
.timeMachineObjectFlash {
  filter: brightness(2.2) drop-shadow(0 0 18px rgba(80,190,255,.95)) drop-shadow(0 0 34px rgba(59,130,246,.7));
}
@keyframes timeMachineFlashPulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}


/* FIX final: chat en viajes temporales, capas isométricas y accesorio sentado */
body.timePastRoomActive #chatFloat,
body.dimensionRoomActive #chatFloat {
  display: flex !important;
  pointer-events: auto !important;
  z-index: 100000 !important;
}
body.timePastRoomActive #chatInput,
body.dimensionRoomActive #chatInput {
  pointer-events: auto !important;
}

/* Mover un poco más el accesorio cuando el personaje está sentado */
.avatar.sitting .characterSprite .avatarAccessory,
.sitting .avatarAccessory {
  transform: translateX(calc(-50% - 12px)) !important;
}
.avatar.sitting.sittingFacingMirror .characterSprite .avatarAccessory,
.sitting.sittingFacingMirror .avatarAccessory {
  transform: translateX(calc(-50% + 12px)) !important;
}

/* Las paredes no capturan click ni se saltan capas de objetos superiores */
.roomWallSegment {
  pointer-events: none !important;
}


#wordlePanel,
#wordleGamePanel,
#wordleInvitePanel {
  position: absolute;
  right: 18px;
  top: 76px;
  width: 340px;
  max-width: calc(100vw - 36px);
  background: #f8fafc;
  color: #0f172a;
  border: 4px solid #facc15;
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.35);
  padding: 12px;
  z-index: 1500;
  display: none;
}

#wordleGamePanel { width: 390px; }
#wordleInvitePanel { top: 140px; }
#wordlePanel .panelHead,
#wordleGamePanel .panelHead,
#wordleInvitePanel .panelHead {
  cursor: grab;
}
#wordlePanel.draggingPanel .panelHead,
#wordleGamePanel.draggingPanel .panelHead,
#wordleInvitePanel.draggingPanel .panelHead {
  cursor: grabbing;
}
.wordleKeyboardHint {
  margin: 8px 0 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #e0f2fe;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.wordleHiddenInput {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: -9999px !important;
}

.wordleBoard {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}

.wordleRow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.wordleCell {
  height: 42px;
  border-radius: 8px;
  background: #e5e7eb;
  border: 2px solid #cbd5e1;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  font-size: 20px;
  text-transform: uppercase;
}

.wordleCell.correct { background: #22c55e; border-color: #16a34a; color: #fff; }
.wordleCell.present { background: #eab308; border-color: #ca8a04; color: #fff; }
.wordleCell.absent { background: #64748b; border-color: #475569; color: #fff; }
.wordleCell.draft {
  background: #ffffff;
  border-color: #64748b;
  box-shadow: inset 0 -3px 0 rgba(15, 23, 42, 0.12);
}
.wordleCell.active {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.wordleInputRow {
  display: flex;
  gap: 8px;
}

#wordleGuessInput {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
  font-weight: 1000;
  letter-spacing: 2px;
  text-align: center;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  padding: 9px;
}

/* Máquina de clonación / clones */
.cloneDeleteAction {
  margin-top: 10px;
}

.avatar.playerCloneAvatar .name {
  /* El clon debe parecer un usuario real; no añadimos marca visual. */
}

.clonePurpleFlash .characterSprite,
.cloneSpawnFlash .characterSprite {
  animation: clonePurplePulse 1s ease-out both;
}

.cloneMachineFlash {
  animation: cloneMachinePulse 1s ease-out both;
}

.cloneDeleteFade,
.cloneDeleteDying {
  pointer-events: none !important;
  animation: cloneDeleteFadeOut 2.45s ease-in forwards !important;
  transform-origin: 50% 100% !important;
}

.cloneDeleteDying .characterSprite {
  animation: cloneDeathPurpleStrobe 0.13s steps(2, end) infinite !important;
}

.playerChatOverlayStack .playerChatBubble.cloneDeathBubble,
.playerChatBubble.cloneDeathBubble {
  background: rgba(250, 245, 255, 0.98) !important;
  color: #581c87 !important;
  border-color: rgba(192, 132, 252, 0.98) !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.55), 0 7px 18px rgba(0, 0, 0, 0.25) !important;
  max-width: none !important;
  text-overflow: clip !important;
  transition: opacity 1800ms ease, transform 1800ms ease !important;
}

.playerChatOverlayStack .playerChatBubble.cloneDeathBubble.leaving,
.playerChatBubble.cloneDeathBubble.leaving {
  opacity: 0 !important;
  transform: translateY(-20px) scale(0.86) !important;
}

@keyframes clonePurplePulse {
  0% { filter: none; opacity: 1; transform: var(--sprite-transform, translateX(-50%)) scale(var(--avatar-scale, 1)); }
  16% { filter: brightness(3) saturate(2) hue-rotate(230deg) drop-shadow(0 0 16px #c084fc); opacity: 1; }
  34% { filter: none; opacity: 0.75; }
  52% { filter: brightness(3.5) saturate(2.5) hue-rotate(250deg) drop-shadow(0 0 24px #a855f7); opacity: 1; }
  72% { filter: brightness(2.2) saturate(2) hue-rotate(250deg); opacity: 0.9; }
  100% { filter: none; opacity: 1; }
}

@keyframes cloneMachinePulse {
  0% { filter: none; }
  20% { filter: brightness(2.7) saturate(2.2) hue-rotate(245deg) drop-shadow(0 0 18px #d8b4fe); }
  45% { filter: none; }
  65% { filter: brightness(3) saturate(2.4) hue-rotate(245deg) drop-shadow(0 0 28px #a855f7); }
  100% { filter: none; }
}

@keyframes cloneDeleteFadeOut {
  0% { opacity: 1; filter: none; transform: translate(-50%, -88%) scale(1); }
  18% { opacity: 1; filter: brightness(3) saturate(2.6) hue-rotate(245deg) drop-shadow(0 0 22px #d8b4fe); transform: translate(-50%, -88%) scale(0.92); }
  42% { opacity: 0.88; filter: brightness(3.4) saturate(3) hue-rotate(260deg) drop-shadow(0 0 30px #a855f7); transform: translate(-50%, -88%) scale(0.68); }
  72% { opacity: 0.48; filter: brightness(3.2) saturate(3) hue-rotate(245deg) drop-shadow(0 0 34px #c084fc); transform: translate(-50%, -88%) scale(0.34); }
  100% { opacity: 0; filter: brightness(3) saturate(2.4) hue-rotate(245deg); transform: translate(-50%, -88%) scale(0.08); }
}

@keyframes cloneDeathPurpleStrobe {
  0% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(4) saturate(3) hue-rotate(255deg) drop-shadow(0 0 18px #d8b4fe) drop-shadow(0 0 34px #a855f7); }
  100% { filter: brightness(1.8) saturate(2) hue-rotate(235deg); }
}


/* FIX chat siempre operativo */
#chatFloat {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100000 !important;
}
#roomArea.isLobby #chatFloat,
body.timePastRoomActive #chatFloat,
body.dimensionRoomActive #chatFloat {
  display: flex !important;
  pointer-events: auto !important;
}
#chatInput,
#sendBtn {
  pointer-events: auto !important;
}
#chatInput:disabled,
#sendBtn:disabled {
  opacity: 1 !important;
}


/* Click de personajes: el JS filtra la silueta para ignorar la caja invisible. */
.avatar {
  cursor: pointer;
}



/* TC activables */
.object.tcBaliZinObject {
  overflow: visible;
}

.tcBaliZinBlinkLight {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 0 7px #f97316, 0 0 14px rgba(249, 115, 22, 0.75);
  animation: tcBaliZinFastBlink 0.08s infinite alternate steps(1, end);
  pointer-events: none;
  z-index: 4;
}

@keyframes tcBaliZinFastBlink {
  0% {
    opacity: 0.18;
    filter: brightness(0.75);
  }
  100% {
    opacity: 1;
    filter: brightness(1.7);
  }
}

.objectActivateAction {
  margin-top: 8px;
}



/* FIX BaliZín: luz central naranja visible, rápida y por encima del PNG */
.object.tcBaliZinObject {
  position: absolute;
  overflow: visible !important;
}

.object.tcBaliZinObject.tcBaliZinActive::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 51%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 0 8px #f97316, 0 0 18px rgba(249, 115, 22, 0.9), 0 0 30px rgba(249, 115, 22, 0.55);
  animation: tcBaliZinFastBlink 0.055s infinite alternate steps(1, end);
  pointer-events: none;
  z-index: 99;
}

.object.tcBaliZinObject .tcBaliZinBlinkLight {
  z-index: 100 !important;
  width: 12px !important;
  height: 12px !important;
  animation: tcBaliZinFastBlink 0.055s infinite alternate steps(1, end) !important;
}



/* FIX BaliZín v2: luz tipo lámpara naranja, parpadeando ON/OFF hasta desactivarlo */
.object.tcBaliZinObject.tcBaliZinActive::after {
  
}

.object.tcBaliZinObject .tcBaliZinBlinkLight {
  
}

.tcBaliZinLampGlow {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 285px;
  height: 195px;
  transform: translate(-50%, -50%) rotate(-18deg);
  border-radius: 999px;
  background: radial-gradient(ellipse at center,
    rgba(255, 187, 94, .72) 0%,
    rgba(249, 115, 22, .46) 42%,
    rgba(249, 115, 22, .18) 62%,
    rgba(255,255,255,0) 76%);
  filter: blur(12px);
  opacity: .95;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
  animation: balizinLampBlink 0.18s infinite steps(1, end);
}

.object.tcBaliZinObject.tcBaliZinActive {
  filter: drop-shadow(0 0 12px #f97316);
}

@keyframes balizinLampBlink {
  0%, 48% {
    opacity: .98;
    filter: blur(12px) brightness(1.25);
  }
  49%, 100% {
    opacity: .06;
    filter: blur(8px) brightness(.55);
  }
}

body.roomLightsOff #world .object.tcBaliZinObject.tcBaliZinActive .tcBaliZinLampGlow {
  width: 350px;
  height: 240px;
  opacity: 1;
  filter: blur(16px);
}



/* Stand de información */
.infoStandPanel {
  width: min(430px, calc(100vw - 28px));
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%) !important;
  border: 2px solid rgba(191, 219, 254, .85) !important;
  color: #fff;
  z-index: 120000 !important;
}

.infoStandPanel .panelHead {
  background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(191, 219, 254, .45);
}

.infoStandBody {
  padding: 12px;
}

.infoStandText {
  min-height: 92px;
  max-height: 230px;
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, .26);
  border: 1px solid rgba(219, 234, 254, .28);
  color: #fff;
  line-height: 1.35;
  word-break: break-word;
}

.infoStandText a {
  color: #fef08a;
  font-weight: 900;
  text-decoration: underline;
}

#infoStandTextarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid rgba(219, 234, 254, .55);
  background: rgba(255,255,255,.95);
  color: #0f172a;
  font-weight: 800;
  padding: 10px;
  outline: none;
}

.infoStandCounter {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 900;
  color: #dbeafe;
  text-align: right;
}

.infoStandActions {
  margin-top: 10px;
}



/* FIX Stand de información: nunca debe abrirse al iniciar; solo con doble click */
#infoStandPanel.infoStandPanel {
  display: none;
}

#infoStandPanel.infoStandPanel.show {
  display: block;
}



/* FIX Stand información: centrada al abrir y arrastrable desde marco */
#infoStandPanel.infoStandPanel {
  position: fixed !important;
  left: 50%;
  top: 50%;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
}

#infoStandPanel.infoStandPanel.show {
  display: block !important;
}

#infoStandPanel .panelHead,
#infoStandPanel .panelHeader {
  cursor: grab;
}

#infoStandPanel .infoStandActions:empty {
  display: none;
}


/* Modo móvil/táctil: ocupa TODA la pantalla real y mantiene zoom/arrastre */
html.mobile-ui,
body.mobile-ui {
  width: 100%;
  min-width: 0 !important;
  height: var(--mobile-vh, 100dvh);
  min-height: var(--mobile-vh, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
  background: #07131f;
  -webkit-text-size-adjust: 100%;
}

body.mobile-ui #app {
  width: 100vw;
  min-width: 0 !important;
  height: var(--mobile-vh, 100dvh);
  min-height: var(--mobile-vh, 100dvh);
  max-height: var(--mobile-vh, 100dvh);
  overflow: hidden;
}

body.mobile-ui #mainArea,
body.mobile-ui #roomArea {
  min-height: 0;
}

body.mobile-ui #roomArea {
  touch-action: pan-x pan-y pinch-zoom;
  overflow: hidden;
}

body.mobile-ui .panelHead,
body.mobile-ui .panelHeader,
body.mobile-ui #roadmapPanel .panelHead,
body.mobile-ui #roadmapPanel .panelHeader,
body.mobile-ui #infoStandPanel .panelHeader {
  touch-action: none;
}

body.mobile-ui #furniPanel,
body.mobile-ui #linkedFurniPanel,
body.mobile-ui #userPanel,
body.mobile-ui #roomPanel,
body.mobile-ui #navigatorPanel,
body.mobile-ui #catalogPanel,
body.mobile-ui #inventoryPanel,
body.mobile-ui #inventPanel,
body.mobile-ui #printerPanel,
body.mobile-ui #profilePanel,
body.mobile-ui #friendsPanel,
body.mobile-ui #gamesPanel,
body.mobile-ui #roomEntryPanel,
body.mobile-ui #battlePanel,
body.mobile-ui #battleInvitePanel,
body.mobile-ui #genericConfirmPanel,
body.mobile-ui #roomPasswordPanel,
body.mobile-ui #smartRoomPanel,
body.mobile-ui #customBuildPanel,
body.mobile-ui #roadmapPanel,
body.mobile-ui #infoStandPanel,
body.mobile-ui #focoLedPanel,
body.mobile-ui #dattapopPanel,
body.mobile-ui #wordlePanel,
body.mobile-ui #wordleGamePanel,
body.mobile-ui #wordleInvitePanel {
  max-width: calc(100vw - 18px);
  max-height: calc(100vh - 18px);
}

body.mobile-ui button,
body.mobile-ui input,
body.mobile-ui select,
body.mobile-ui textarea {
  font-size: 16px;
}


/* FIX móvil: chat operativo, debajo de ventanas pero por encima del dock/sala */
#chatFloat {
  z-index: 105 !important;
  pointer-events: auto !important;
}

#chatFloat,
#chatInput,
#sendBtn {
  touch-action: manipulation !important;
}

#chatInput {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}

#sendBtn {
  pointer-events: auto !important;
}

#furniPanel,
#linkedFurniPanel,
#userPanel,
#roomPanel,
#navigatorPanel,
#catalogPanel,
#inventoryPanel,
#inventPanel,
#printerPanel,
#profilePanel,
#friendsPanel,
#gamesPanel,
#roomEntryPanel,
#battlePanel,
#battleInvitePanel,
#genericConfirmPanel,
#roomPasswordPanel,
#smartRoomPanel,
#customBuildPanel,
#roadmapPanel,
#infoStandPanel,
#focoLedPanel,
#dattapopPanel,
#wordlePanel,
#wordleGamePanel,
#wordleInvitePanel {
  z-index: 120 !important;
}

body.mobile-ui #chatBubbleLayer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 119 !important;
  pointer-events: none !important;
}

body.mobile-ui .playerChatOverlayStack {
  position: fixed !important;
  z-index: 119 !important;
}

body.mobile-ui #chatFloat {
  z-index: 105 !important;
  pointer-events: auto !important;
}

body.mobile-ui #chatInput,
body.mobile-ui #sendBtn {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

body.mobile-ui #genericConfirmPanel.mobilePcOnlyPanel {
  width: min(330px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  z-index: 130 !important;
}


/* FIX DATA HOTEL — mensajes de chat: nombre en negrita y texto normal */
.playerChatBubble {
  font-weight: 400 !important;
}
.playerChatBubble .playerChatName {
  font-weight: 900 !important;
}
.playerChatBubble .playerChatMessage {
  font-weight: 400 !important;
}

/* DATA HOTEL — pestañas Dattapop / PCBWay */
.marketplaceHead {
  align-items: center !important;
}
.marketplaceTabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-left: 6px;
}
.marketplaceTab {
  border: 1px solid rgba(255,255,255,0.35);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  padding: 9px 18px;
  background: rgba(255,255,255,0.75);
  color: #0f172a;
  font-weight: 900;
  cursor: pointer;
}
.marketplaceTab.active {
  background: #ffffff;
  color: #0891b2;
  transform: translateY(1px);
}
.marketplaceTab.pcbway.active {
  background: #11A73B;
  color: #ffffff;
  border-color: #0b7f2b;
}
#dattapopPanel.pcbwayMode {
  background: #11A73B !important;
  border-color: #0b7f2b !important;
}
#dattapopPanel.pcbwayMode .panelHead,
#dattapopPanel.pcbwayMode .panelHeader {
  background: #11A73B !important;
  border-bottom-color: #0b7f2b !important;
}
#pcbwayTabContent {
  padding: 14px;
  background: #11A73B;
  min-height: 520px;
}
.pcbwayHero {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #ffffff, #dcfce7);
  border: 2px solid rgba(34,197,94,0.55);
  border-radius: 18px;
  padding: 14px 16px;
  color: #14532d;
  margin-bottom: 14px;
}
.pcbwayLogo {
  width: 112px;
  max-height: 42px;
  object-fit: contain;
  object-position: left center;
}
.pcbwayHeroText {
  display: grid;
  gap: 3px;
}
.pcbwayHeroText strong {
  font-size: 22px;
  font-weight: 950;
}
.pcbwayHeroText span {
  font-size: 13px;
  font-weight: 700;
}
.pcbwayLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: 14px;
}
.pcbwayLayout.fileMode {
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.05fr) minmax(250px, 0.85fr);
}
.pcbwayColumn {
  background: rgba(255,255,255,0.96);
  border: 2px solid rgba(34,197,94,0.35);
  border-radius: 18px;
  padding: 14px;
  color: #0f172a;
}
.pcbwayServices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.pcbwayServiceBtn {
  border: 2px solid rgba(34,197,94,0.35);
  background: #ffffff;
  color: #166534;
  border-radius: 12px;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.pcbwayServiceBtn.active {
  background: #11A73B;
  color: white;
  border-color: #0b7f2b;
}
.pcbwayFormGrid {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.pcbwayFormGrid.disabled {
  
  pointer-events: none !important;
}
.pcbwayFormGrid label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 900;
  color: #14532d;
}
.pcbwayFormGrid select {
  border: 2px solid rgba(34,197,94,0.35);
  border-radius: 10px;
  padding: 8px 10px;
  background: white;
  color: #111827;
  font-weight: 800;
}
.pcbwayColorButtons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.pcbwayColorButtons.disabled {
  opacity: 0.55;
  pointer-events: none;
}
.pcbwayColorBtn {
  min-height: 42px;
  border: 3px solid rgba(15,23,42,0.22);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  text-indent: -9999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}
.pcbwayColorBtn.active {
  border-color: #11A73B;
  box-shadow: 0 0 0 3px rgba(17,167,59,0.24), inset 0 0 0 2px rgba(255,255,255,0.45);
  transform: translateY(-1px);
}
.pcbwayColorPreview {
  display: none;
}
.pcbwayFileInventoryColumn {
  display: none;
}
.pcbwayLayout:not(.fileMode) .pcbwayFileInventoryColumn {
  
}
.pcbwayLayout:not(.fileMode) #pcbwayFileRow {
  
}
.pcbwayFileInventory {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.pcbwayFileInventoryItem {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 68px;
  background: #f8fafc;
  border: 2px solid rgba(34,197,94,0.35);
  border-radius: 14px;
  padding: 8px;
  cursor: grab;
  user-select: none;
}
.pcbwayFileInventoryItem.selected {
  border-color: #11A73B;
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(17,167,59,0.18);
}
.pcbwayFileInventoryItem strong {
  font-size: 12px;
  font-weight: 950;
  color: #14532d;
  min-width: 0;
}
.pcbwayFileInventoryItem span {
  font-size: 11px;
  font-weight: 900;
  color: #166534;
}
.pcbwayFileSlot {
  min-height: 96px;
  border: 3px dashed rgba(17,167,59,0.55);
  border-radius: 16px;
  background: #f0fdf4;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
  color: #14532d;
}
.pcbwayFileSlot.enabled {
  cursor: copy;
}
.pcbwayFileSlot.filled {
  border-style: solid;
  grid-template-columns: 64px minmax(0, 1fr);
  place-items: center start;
  text-align: left;
  cursor: pointer;
}
.pcbwayFileSlot strong {
  font-size: 13px;
  font-weight: 950;
}
.pcbwayFileSlot span {
  font-size: 11px;
  font-weight: 800;
  color: #166534;
}

.pcbwaySummary {
  min-height: 42px;
  background: #f0fdf4;
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 12px;
  padding: 10px;
  font-size: 12px;
  color: #14532d;
  margin-bottom: 12px;
}
.pcbwayOrderBtn {
  width: 100%;
}
.pcbwayOrderBox {
  display: grid;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: 14px;
  padding: 14px;
}
.pcbwayOrderBox > strong {
  color: #14532d;
  font-size: 15px;
}
.pcbwayProgressBar {
  height: 18px;
  background: rgba(15,23,42,0.12);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(22,163,74,0.35);
}
#pcbwayProgressFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #86efac, #22c55e);
  border-radius: inherit;
  transition: width 300ms linear;
}
.pcbwayCountdown {
  text-align: center;
  font-size: 24px;
  font-weight: 950;
  color: #16a34a;
}
@media (max-width: 900px) {
  .pcbwayLayout { grid-template-columns: 1fr; }
  .pcbwayServices { grid-template-columns: 1fr; }
}


/* DATA HOTEL FIX — marco común ordenador + contenido distinto por app */
#dattapopPanel,
#dattapopPanel.pcbwayMode {
  background: #0f766e !important;
  border: 3px solid #5eead4 !important;
  box-shadow: 0 18px 0 rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(6, 78, 59, 0.85) !important;
}

#dattapopPanel .panelHead,
#dattapopPanel .panelHeader,
#dattapopPanel.pcbwayMode .panelHead,
#dattapopPanel.pcbwayMode .panelHeader {
  background: #14b8a6 !important;
  border-bottom: 3px solid #5eead4 !important;
  color: #ffffff !important;
}

#dattapopTabContent {
  background: #ccfbf1 !important;
}

#pcbwayTabContent {
  position: relative;
  background: #11A73B !important;
}

/* Dattapop: textos principales en turquesa, no blancos */
#dattapopTabContent .dattapopBrandText strong,
#dattapopTabContent .dattapopBrandText span,
#dattapopTabContent .dattapopHeroMain strong,
#dattapopTabContent .dattapopHeroMain span {
  color: #0891b2 !important;
  text-shadow: none !important;
}

#dattapopTabContent .dattapopBrandLogo {
  color: #0891b2 !important;
}

/* PCBWay: ventana lateral adicional de archivos 3D */
.pcbwayLayout {
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr) !important;
}

.pcbwayLayout.fileMode {
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr) !important;
}

.pcbwayFileInventoryColumn {
  
}

.pcbwayFileSidePanel {
  position: absolute;
  left: -278px;
  top: 108px;
  width: 250px;
  max-height: 465px;
  overflow: hidden;
  background: rgba(255,255,255,0.98);
  border: 3px solid #5eead4;
  border-radius: 18px;
  padding: 12px;
  color: #0f172a;
  box-shadow: 0 14px 0 rgba(0, 0, 0, 0.22);
  z-index: 6;
}

#pcbwayTabContent.fileMode .pcbwayFileSidePanel {
  display: block !important;
}

.pcbwayFileSidePanel .pcbwayFileInventory {
  max-height: 360px;
}

@media (max-width: 1180px) {
  .pcbwayFileSidePanel {
    left: 14px;
    top: 88px;
    width: 260px;
    z-index: 20;
  }
  #pcbwayTabContent.fileMode .pcbwayLayout {
    margin-left: 0;
  }
}


/* FIX FINAL PCBWay/Dattapop solicitado: marco común, Dattapop restaurado y selector 3D lateral */
#dattapopPanel.pcbwayMode {
  background: #0f766e !important;
  border: 3px solid #5eead4 !important;
  box-shadow: 0 18px 0 rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(6, 78, 59, 0.85) !important;
  color: #ffffff !important;
  width: min(760px, calc(100vw - 36px)) !important;
}

#dattapopPanel.pcbwayMode .panelHead,
#dattapopPanel.pcbwayMode .panelHeader {
  background: #14b8a6 !important;
  border-bottom: 3px solid #5eead4 !important;
  color: #ffffff !important;
}

#pcbwayTabContent {
  position: relative !important;
  background: #11A73B !important;
  min-height: 520px !important;
  box-sizing: border-box !important;
}

/* Solo estos textos de Dattapop pasan a turquesa; el resto vuelve a los colores anteriores. */
#dattapopTabContent .dattapopBrandText strong,
#dattapopTabContent .dattapopBrandText span {
  color: #5eead4 !important;
  text-shadow: none !important;
}

#dattapopTabContent .dattapopHeroMain strong,
#dattapopTabContent .dattapopHeroMain span,
#dattapopTabContent .dattapopBrandLogo {
  color: inherit !important;
}

/* PCB y Metal CNC mantienen el mismo tamaño visual de ventana aunque no usen opciones de impresión 3D. */
#pcbwayTabContent .pcbwayLayout,
#pcbwayTabContent .pcbwayLayout.fileMode {
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr) !important;
  min-height: 360px !important;
}

#pcbwayTabContent .pcbwayColumn {
  min-height: 338px !important;
}

#pcbwayTabContent .pcbwayFormGrid.disabled {
  visibility: hidden !important;
  display: grid !important;
  min-height: 152px !important;
  pointer-events: none !important;
}

#pcbwayTabContent .pcbwayFileSidePanel {
  position: absolute !important;
  left: -278px !important;
  top: 108px !important;
  width: 250px !important;
  
}

#pcbwayTabContent.fileMode .pcbwayFileSidePanel {
  display: block !important;
}

.pcbwayFileInventoryItem {
  cursor: pointer !important;
}

.pcbwayFileInventoryItem:active {
  transform: translateY(1px);
}

@media (max-width: 1180px) {
  #pcbwayTabContent .pcbwayFileSidePanel {
    left: 14px !important;
    top: 88px !important;
    z-index: 20 !important;
  }
}


/* FIX6 — correcciones finales pedidas: PCB path aparte; Dattapop solo turquesa/blanco; selector archivo 3D lateral real */
#dattapopTabContent {
  background: #14b8a6 !important;
  color: #ffffff !important;
}

#dattapopTabContent * {
  color: #ffffff !important;
  text-shadow: none !important;
}

#dattapopTabContent .dattapopHero,
#dattapopTabContent .dattapopColumn,
#dattapopTabContent .dattapopInventoryItem,
#dattapopTabContent .dattapopListing,
#dattapopTabContent .dattapopEmptyState,
#dattapopTabContent .dattapopStatCard,
#dattapopTabContent .dattapopPriceRange {
  background: rgba(255,255,255,0.96) !important;
  border-color: #5eead4 !important;
  color: #0f766e !important;
}

#dattapopTabContent .dattapopHero *,
#dattapopTabContent .dattapopColumn *,
#dattapopTabContent .dattapopInventoryItem *,
#dattapopTabContent .dattapopListing *,
#dattapopTabContent .dattapopEmptyState *,
#dattapopTabContent .dattapopStatCard *,
#dattapopTabContent .dattapopPriceRange * {
  color: #0f766e !important;
}

#dattapopTabContent .dattapopBrandLogo,
#dattapopTabContent .dattapopStatusPill,
#dattapopTabContent .dattapopCollectBtn,
#dattapopTabContent button.gold,
#dattapopTabContent .gold {
  background: #14b8a6 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

#dattapopTabContent .dattapopBrandText strong,
#dattapopTabContent .dattapopBrandText span,
#dattapopTabContent .dattapopHeroMain strong,
#dattapopTabContent .dattapopHeroMain span,
#dattapopTabContent .dattapopSectionHead strong,
#dattapopTabContent .dattapopSectionHead span {
  color: #0f766e !important;
}

/* PCBWay: el panel de Archivos 3D es una ventana adicional a la izquierda y solo se ve en Impresión 3D + Subir archivo 3D */
#pcbwayTabContent .pcbwayFileSidePanel {
  position: absolute !important;
  left: -305px !important;
  top: 118px !important;
  width: 276px !important;
  max-height: 455px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 4px solid #11A73B !important;
  border-radius: 18px !important;
  padding: 12px !important;
  color: #0f172a !important;
  box-shadow: 0 16px 0 rgba(0,0,0,.28), 0 0 0 2px rgba(255,255,255,.95) !important;
  z-index: 999 !important;
  pointer-events: auto !important;
}

#pcbwayTabContent:not(.fileMode) .pcbwayFileSidePanel {
  
}

#pcbwayTabContent.fileMode .pcbwayFileSidePanel {
  display: block !important;
}

#pcbwayTabContent .pcbwayFileSidePanel .dattapopSectionHead strong,
#pcbwayTabContent .pcbwayFileSidePanel .dattapopSectionHead span {
  color: #0f766e !important;
}

#pcbwayTabContent .pcbwayFileInventory {
  display: grid !important;
  gap: 8px !important;
  max-height: 350px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

#pcbwayTabContent .pcbwayFileInventoryItem {
  display: grid !important;
  grid-template-columns: 42px 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
  background: #f0fdf4 !important;
  border: 2px solid #86efac !important;
  border-radius: 12px !important;
  padding: 8px !important;
  cursor: pointer !important;
  color: #064e3b !important;
}

#pcbwayTabContent .pcbwayFileInventoryItem * {
  color: #064e3b !important;
}

#pcbwayTabContent .pcbwayFileInventoryItem.selected {
  background: #11A73B !important;
  border-color: #ffffff !important;
}

#pcbwayTabContent .pcbwayFileInventoryItem.selected * {
  color: #ffffff !important;
}

#pcbwayTabContent #pcbwayFileSlot.enabled {
  border-color: #ffffff !important;
  background: rgba(255,255,255,.95) !important;
  color: #0f766e !important;
}

#pcbwayTabContent #pcbwayFileSlot.enabled * {
  color: #0f766e !important;
}

@media (max-width: 1180px) {
  #pcbwayTabContent .pcbwayFileSidePanel {
    left: 10px !important;
    top: 102px !important;
    width: 270px !important;
  }
}

/* FIX9 PCBWay: scroll interno para que el desplegable de Archivos 3D no esconda el botón */
#pcbwayTabContent {
  box-sizing: border-box !important;
  max-height: calc(100vh - 190px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 18px !important;
  scrollbar-width: thin;
}

#pcbwayTabContent::-webkit-scrollbar {
  width: 10px;
}

#pcbwayTabContent::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.26);
  border-radius: 999px;
}

#pcbwayTabContent::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.78);
  border-radius: 999px;
  border: 2px solid #11A73B;
}

#pcbwayFileRow {
  margin-bottom: 8px !important;
}

.pcbwayOrderBtn {
  margin-top: 10px !important;
}


/* FIX10 — Dattapop legibilidad: textos negros y botón publicar ajustado */
#dattapopTabContent,
#dattapopTabContent *:not(button):not(.marketplaceTab) {
  color: #111827 !important;
  text-shadow: none !important;
}

#dattapopTabContent .dattapopProductBody span,
#dattapopTabContent .dattapopListingDesc,
#dattapopTabContent .dattapopSectionHead span,
#dattapopTabContent .dattapopEmptyState span,
#dattapopTabContent .dattapopListingHint {
  color: #334155 !important;
}

#dattapopTabContent .dattapopTypePill {
  background: rgba(20, 184, 166, 0.18) !important;
  color: #0f766e !important;
}

#dattapopTabContent .dattapopStockPill {
  background: rgba(15, 23, 42, 0.08) !important;
  color: #111827 !important;
}

#dattapopTabContent .dattapopStatusPill.active {
  background: rgba(20, 184, 166, 0.18) !important;
  color: #0f766e !important;
}

#dattapopTabContent .dattapopStatusPill.sold {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #15803d !important;
}

#dattapopTabContent .dattapopSellBtn {
  min-width: 84px !important;
  max-width: 92px !important;
  padding: 7px 6px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-align: center !important;
}

#dattapopTabContent .dattapopSectionHead strong {
  font-size: 14px !important;
  line-height: 1.08 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Comprar créditos / Stripe */
.creditsBuyBtn {
  background: linear-gradient(180deg, #22c55e, #15803d);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.35);
  padding: 8px 12px;
  font-size: 12px;
}

.creditsStorePanel {
  position: absolute;
  display: none;
  width: 420px;
  max-width: calc(100vw - 24px);
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  z-index: 90;
  background: #f8fafc;
  color: #0f172a;
  border: 4px solid #1f2937;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.creditsStoreHead {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 16px;
  background: #1f2937;
  color: #ffffff;
  cursor: grab;
}

.creditsStoreBody {
  padding: 16px;
  display: grid;
  gap: 12px;
  color: #0f172a;
}

.creditsStoreBody p {
  margin: 0;
  color: #334155;
  font-weight: 800;
  font-size: 13px;
}

.creditsPackageList {
  display: grid;
  gap: 10px;
}

.creditsPackageCard {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 2px solid #dbeafe;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 4px 0 rgba(15, 23, 42, 0.10);
}

.creditsPackageCard div {
  display: grid;
  gap: 3px;
}

.creditsPackageCard strong {
  color: #0f172a;
  font-size: 16px;
}

.creditsPackageCard span {
  color: #0f766e;
  font-weight: 900;
  font-size: 14px;
}

.creditPackageBuyBtn {
  min-width: 92px;
}

.creditsStoreNote {
  color: #475569;
  font-weight: 700;
  line-height: 1.35;
}

body.mobile-ui .creditsStorePanel {
  width: calc(100vw - 18px);
  top: 70px;
}

/* FIX12 responsive portátil: las ventanas no deben quedar debajo del dock */
:root {
  --dh-topbar-height: 54px;
  --dh-dock-height: 58px;
  --dh-safe-gap: 12px;
}

/* Catálogo: se adapta a pantallas bajas y deja scroll dentro de la lista */
#catalogPanel {
  max-height: calc(100vh - var(--dh-topbar-height) - var(--dh-dock-height) - 18px) !important;
  overflow: hidden !important;
}

#catalogPanel .catalogLayout {
  height: min(620px, calc(100vh - var(--dh-topbar-height) - var(--dh-dock-height) - 72px)) !important;
  max-height: min(620px, calc(100vh - var(--dh-topbar-height) - var(--dh-dock-height) - 72px)) !important;
  overflow: hidden !important;
}

#catalogPanel .catalogMain {
  min-height: 0 !important;
  overflow: hidden !important;
}

#catalogPanel .catalogGrid {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-bottom: 8px !important;
}

#catalogPanel .catalogCategories {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-bottom: 8px !important;
}

/* Panel editar sala: mantiene el tamaño visual pero con scroll interno en portátiles */
#roomEditPanel {
  max-height: calc(100vh - var(--dh-topbar-height) - var(--dh-dock-height) - 72px) !important;
  overflow: hidden !important;
}

#roomEditPanel .roomEditBody {
  max-height: calc(100vh - var(--dh-topbar-height) - var(--dh-dock-height) - 118px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}

#roomEditPanel .roomEditBody::-webkit-scrollbar {
  display: block !important;
  width: 7px !important;
}

#roomEditPanel .roomEditBody::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28) !important;
  border-radius: 999px !important;
}

/* Paneles flotantes generales: nunca quedan enterrados bajo el dock */
#navigatorPanel,
#inventoryPanel,
#inventPanel,
#printerPanel,
#profilePanel,
#friendsPanel,
#gamesPanel,
#roomEntryPanel,
#battlePanel,
#battleInvitePanel,
#genericConfirmPanel,
#roomPasswordPanel,
#smartRoomPanel,
#customBuildPanel,
#roadmapPanel,
#infoStandPanel,
#focoLedPanel,
#dattapopPanel,
#wordlePanel,
#wordleGamePanel,
#wordleInvitePanel,
#creditsStorePanel {
  max-height: calc(100vh - var(--dh-topbar-height) - var(--dh-dock-height) - 24px) !important;
  overflow: hidden !important;
}

#navigatorPanel .roomList,
#inventoryPanel #inventoryList,
#customBuildPanel .catalogList,
#roadmapPanel .roadmapBody,
#roadmapPanel .roadmapContent,
#infoStandPanel .infoStandBody,
#dattapopPanel .dattapopBody,
#dattapopPanel .dattapopContent,
#dattapopPanel .dattapopMain,
#creditsStorePanel .creditsStoreBody {
  max-height: calc(100vh - var(--dh-topbar-height) - var(--dh-dock-height) - 120px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

@media (max-height: 760px) {
  #catalogPanel .catalogPreview {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }

  #catalogPanel .catalogPreviewImage {
    height: 196px !important;
    min-height: 196px !important;
    max-height: 196px !important;
  }

  #catalogPanel .catalogPreviewText {
    height: 196px !important;
    min-height: 196px !important;
    max-height: 196px !important;
  }

  #catalogPanel .catalogColorRow {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  #catalogPanel #catalogColorOptions:not(:has(.catalogVariantOption)) {
    grid-template-columns: repeat(6, 24px) !important;
    grid-auto-rows: 24px !important;
    gap: 5px !important;
    width: 169px !important;
    min-width: 169px !important;
    max-width: 169px !important;
  }

  #catalogPanel .catalogColorOption {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }
}


/* FIX14: buscador de salas responsive sin romper arrastre vertical */
#navigatorPanel {
  max-height: calc(100vh - var(--dh-topbar-height, 54px) - var(--dh-dock-height, 58px) - 24px) !important;
  overflow: hidden !important;
}

#navigatorPanel .roomList {
  max-height: calc(100vh - var(--dh-topbar-height, 54px) - var(--dh-dock-height, 58px) - 230px) !important;
  min-height: 160px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#creditsStorePanel {
  z-index: 100001 !important;
}

@media (max-height: 760px) {
  #navigatorPanel .roomList {
    max-height: calc(100vh - var(--dh-topbar-height, 54px) - var(--dh-dock-height, 58px) - 250px) !important;
  }
}

/* FIX15: buscador de salas adaptado a portátiles y filtros de privadas */
#navigatorPanel {
  max-height: calc(100vh - var(--dh-topbar-height, 54px) - var(--dh-dock-height, 58px) - 24px) !important;
  overflow: hidden !important;
}

#navigatorPanel .roomList {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-bottom: 10px !important;
}

#navigatorPanel .panelHead,
#navigatorPanel .navigatorSearchBox,
#navigatorPanel .navigatorCreateWrap {
  flex: 0 0 auto !important;
}

.roomSectionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.privateRoomSortSelect {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #e2e8f0);
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 24px 5px 9px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.12);
  background-image:
    linear-gradient(180deg, #ffffff, #e2e8f0),
    linear-gradient(45deg, transparent 50%, #334155 50%),
    linear-gradient(135deg, #334155 50%, transparent 50%);
  background-position:
    0 0,
    calc(100% - 13px) 50%,
    calc(100% - 8px) 50%;
  background-size:
    100% 100%,
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

.privateRoomSortSelect:hover {
  filter: brightness(1.03);
}

@media (max-height: 760px) {
  #navigatorPanel .navigatorSearchBox {
    margin: 7px 0 8px !important;
    padding: 7px !important;
    gap: 6px !important;
  }

  #navigatorPanel .navigatorCreateWrap.navigatorCreateBottom {
    padding: 8px 12px 10px !important;
  }

  #navigatorPanel .roomSection + .roomSection {
    margin-top: 8px !important;
  }
}

/* FIX16: buscador de salas igual que catálogo, sin parpadeo ni recolocaciones raras */
#navigatorPanel {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#navigatorPanel .roomList {
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

#navigatorPanel .roomSectionTitle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.privateRoomSortControls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.privateRoomSortLabel {
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.privateRoomSortButton {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  min-width: 96px;
  box-shadow: 0 3px 0 rgba(30, 64, 175, 0.45);
  cursor: pointer;
  white-space: nowrap;
}

.privateRoomSortButton:hover {
  filter: brightness(1.05);
}

.privateRoomSortSelect {
  
}

@media (max-width: 700px) {
  #navigatorPanel .roomSectionTitle {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}


/* FIX17: buscador de salas sin auto-recolocaciones; movimiento original + scroll interno */
#navigatorPanel {
  height: auto !important;
  max-height: calc(100vh - var(--dh-topbar-height, 54px) - var(--dh-dock-height, 58px) - 24px) !important;
  overflow: hidden !important;
}

#navigatorPanel .roomList {
  max-height: calc(100vh - var(--dh-topbar-height, 54px) - var(--dh-dock-height, 58px) - 226px) !important;
  min-height: 140px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

.privateRoomSortButton.sortRecent {
  background: linear-gradient(180deg, #22c55e, #16a34a) !important;
  box-shadow: 0 3px 0 rgba(21, 128, 61, 0.45) !important;
}

.privateRoomSortButton.sortUsers {
  background: linear-gradient(180deg, #f59e0b, #d97706) !important;
  box-shadow: 0 3px 0 rgba(146, 64, 14, 0.45) !important;
}

@media (max-height: 760px) {
  #navigatorPanel .roomList {
    max-height: calc(100vh - var(--dh-topbar-height, 54px) - var(--dh-dock-height, 58px) - 244px) !important;
  }
}

/* FIX18 — Chat blindado: siempre clicable, sin quedar debajo de overlays invisibles */
#chatFloat {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 120000 !important;
  isolation: isolate !important;
}

#chatFloat * {
  pointer-events: auto !important;
}

#chatInput {
  display: block !important;
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  touch-action: manipulation !important;
  cursor: text !important;
  opacity: 1 !important;
}

#sendBtn {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

#chatInput:disabled,
#sendBtn:disabled {
  opacity: 1 !important;
  filter: none !important;
}

#creditsStorePanel {
  z-index: 130000 !important;
}

/* FIX19 — todas las ventanas por encima del cuadro de chat + ordenación visible */
#chatFloat {
  z-index: 100000 !important;
}

#catalogPanel,
#navigatorPanel,
#inventoryPanel,
#inventPanel,
#roomPanel,
#roomEditPanel,
#friendsPanel,
#profilePanel,
#userPanel,
#gamesPanel,
#battlePanel,
#wordlePanel,
#wordleGamePanel,
#wordleInvitePanel,
#battleInvitePanel,
#customBuildPanel,
#printerPanel,
#dattapopPanel,
#focoLedPanel,
#smartRoomPanel,
#creditsStorePanel,
#roadmapPanel,
#infoStandPanel,
#genericConfirmPanel,
#roomEntryPanel,
#roomPasswordPanel,
.floatingPanel,
.sidePanel,
.gameModalPanel,
.pcbwayFileSidePanel {
  z-index: 130000 !important;
}

#genericConfirmPanel,
#roomPasswordPanel,
#roomEntryPanel {
  z-index: 140000 !important;
}

#creditsStorePanel {
  z-index: 135000 !important;
}

.privateRoomSortControls {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.privateRoomSortLabel {
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.privateRoomSortButton {
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 6px 10px !important;
  min-width: 96px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.privateRoomSortButton.sortRecent {
  background: linear-gradient(180deg, #22c55e, #16a34a) !important;
  box-shadow: 0 3px 0 rgba(21, 128, 61, 0.45) !important;
}

.privateRoomSortButton.sortUsers {
  background: linear-gradient(180deg, #f59e0b, #d97706) !important;
  box-shadow: 0 3px 0 rgba(146, 64, 14, 0.45) !important;
}


/* FIX21: aviso de compra siempre visible por encima de catálogo/ventanas */
#toast.purchaseToast {
  top: 22px;
  background: #ffffff;
  color: #111827;
  border: 3px solid #22c55e;
  border-radius: 18px;
  padding: 14px 22px;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .2px;
  box-shadow: 0 18px 45px rgba(0,0,0,.36), 0 0 0 5px rgba(34,197,94,.22);
  max-width: min(680px, calc(100vw - 32px));
  text-align: center;
  pointer-events: none;
}


/* FIX21: Láser configurable */
#laserPanel {
  position: fixed;
  left: 50%;
  top: 105px;
  transform: translateX(-50%);
  width: min(410px, calc(100vw - 36px));
  background: rgba(255,255,255,.96);
  color: #111827;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15,23,42,.35);
  z-index: 130000 !important;
  display: none;
  overflow: hidden;
}

.laserBody {
  padding: 14px;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  align-items: center;
}

.laserPreview {
  width: 112px;
  height: 92px;
  border-radius: 18px;
  background: rgba(15,23,42,.08);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
  opacity: .45;
  position: relative;
  overflow: hidden;
}

.laserPreview span {
  position: absolute;
  left: 18px;
  top: 42px;
  width: var(--laser-length-preview, 100px);
  height: 7px;
  border-radius: 999px;
  transform: rotate(25deg);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--laser-color, #ef4444), rgba(255,255,255,0));
  box-shadow: 0 0 calc(18px * var(--laser-intensity, .85)) var(--laser-color, #ef4444);
}

.laserPreview.on {
  opacity: 1;
  box-shadow: 0 0 28px var(--laser-color, #ef4444), inset 0 0 0 1px rgba(15,23,42,.08);
}

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

.laserControls label {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
}

.laserControls p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
  font-weight: 700;
}

#laserPanel input[type="range"] {
  width: 100%;
}

#laserPanel .laserHueSlider {
  accent-color: var(--laser-selected-color, #ef4444);
}

#laserPanel .laserIntensityRow input[type="range"],
#laserPanel .laserLengthRow input[type="range"] {
  accent-color: var(--laser-selected-color, #ef4444);
}

.object.laserOn {
  filter: drop-shadow(0 0 11px var(--laser-light-color, #ef4444));
}

.laserBeam {
  position: absolute;
  left: var(--laser-origin-left, 50%);
  top: var(--laser-origin-top, 30%);
  width: var(--laser-light-length, 260px);
  height: 6px;
  border-radius: 999px;
  transform-origin: left center;
  transform: rotate(var(--laser-beam-angle, 26.565deg));
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--laser-light-color, #ef4444) 95%, white) 0%,
    color-mix(in srgb, var(--laser-light-color, #ef4444) 82%, transparent) 56%,
    rgba(255,255,255,0) 100%);
  box-shadow:
    0 0 calc(8px + 20px * var(--laser-light-intensity, .85)) var(--laser-light-color, #ef4444),
    0 0 calc(18px + 34px * var(--laser-light-intensity, .85)) color-mix(in srgb, var(--laser-light-color, #ef4444) 55%, transparent);
  opacity: calc(.45 + .55 * var(--laser-light-intensity, .85));
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
}

body.roomLightsOff #world .object.laserOn,
body.roomLightsOff #world .object.laserOn.litByFocoStrong,
body.roomLightsOff #world .object.laserOn.litByFocoSoft {
  filter: drop-shadow(0 0 12px var(--laser-light-color, #ef4444));
}

/* FIX27 — Holobot sin parpadeos: burbujas en overlay persistente, igual que chat */
.holobotChatOverlayStack {
  position: absolute !important;
  transform: translate(-50%, -100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 5px !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  min-width: max-content !important;
  max-width: calc(100vw - 32px) !important;
}

.holobotChatOverlayStack .holobotBubble {
  position: relative !important;
  display: block !important;
  width: max-content !important;
  max-width: calc(100vw - 44px) !important;
  min-width: 64px !important;
  padding: 8px 13px !important;
  border-radius: 14px !important;
  background: rgba(37, 99, 235, .88) !important;
  color: #fff !important;
  border: 2px solid rgba(125, 211, 252, .96) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.28) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: opacity 520ms ease, transform 520ms ease !important;
  animation: none !important;
}

.holobotChatOverlayStack .holobotBubble.entering {
  opacity: 0 !important;
  transform: translateY(8px) scale(.98) !important;
}

.holobotChatOverlayStack .holobotBubble.leaving {
  opacity: 0 !important;
  transform: translateY(-10px) scale(.96) !important;
}

/* FIX27 — restaurado láser estable: no usar capas globales que rompan la sala */
.object .laserBeam:not(.laserWorldBeam) {
  z-index: 1 !important;
}

.object.imageObject.laserOn > img,
.object.imageObject.laserOn > .tintedObjectImage {
  position: relative !important;
  z-index: 2 !important;
}

/* FIX28: créditos integrados + recepción */
.creditsCluster {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid #fff0a8;
  box-shadow: 0 4px 0 rgba(0,0,0,.22);
  background: linear-gradient(180deg, #fff4b8, #e8b92f);
  flex-shrink: 0;
}
.creditsCluster #creditsBox,
.creditsClusterAmount {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 8px 12px !important;
  display: flex;
  align-items: center;
  color: #3b2400 !important;
  font-weight: 900;
}
.creditsCluster .creditsBuyBtn {
  border: 0 !important;
  border-left: 2px solid rgba(59,36,0,.22) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.36) !important;
  color: #3b2400 !important;
  padding: 8px 12px !important;
  font-size: 12px;
  min-height: 100%;
}
.creditsCluster .creditsBuyBtn:hover {
  background: rgba(255,255,255,.55) !important;
}
.receptionCallBtn {
  background: linear-gradient(180deg, #e0f2fe, #7dd3fc) !important;
  color: #082f49 !important;
  border: 2px solid rgba(255,255,255,.55) !important;
  padding: 8px 12px;
  font-size: 12px;
}
.receptionPanel {
  position: absolute;
  display: none;
  width: 430px;
  max-width: calc(100vw - 24px);
  left: 50%;
  top: 92px;
  transform: translateX(-50%);
  z-index: 120;
  background: #f8fafc;
  color: #0f172a;
  border: 4px solid #1f2937;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  overflow: hidden;
}
.receptionHead {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 16px;
  background: #1f2937;
  color: #ffffff;
  cursor: grab;
}
.receptionBody {
  padding: 14px;
  display: grid;
  gap: 10px;
  background: linear-gradient(180deg, #ffffff, #e0f2fe);
}
.receptionIntro {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}
.receptionMessages {
  height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(255,255,255,.74);
  border: 2px solid #bae6fd;
  border-radius: 14px;
}
.receptionBubble {
  max-width: 82%;
  padding: 9px 11px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  box-shadow: 0 3px 0 rgba(15,23,42,.10);
  overflow-wrap: anywhere;
}
.receptionBubble.bot {
  align-self: flex-start;
  background: #e0f2fe;
  color: #082f49;
  border: 1px solid #7dd3fc;
}
.receptionBubble.user {
  align-self: flex-end;
  background: #1d4ed8;
  color: #ffffff;
  border: 1px solid #60a5fa;
}
.receptionForm {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.receptionForm input {
  min-width: 0;
  border: 2px solid #7dd3fc;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  color: #082f49;
  background: #ffffff;
}
.receptionForm button {
  background: linear-gradient(180deg, #38bdf8, #0284c7);
  color: #ffffff;
}
.receptionForm input:disabled,
.receptionForm button:disabled {
  opacity: .65;
  cursor: wait;
}
.receptionTypingDots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.receptionTypingDots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .35;
  animation: receptionDotPulse 1s infinite ease-in-out;
}
.receptionTypingDots span:nth-child(2) { animation-delay: .16s; }
.receptionTypingDots span:nth-child(3) { animation-delay: .32s; }
@keyframes receptionDotPulse {
  0%, 80%, 100% { transform: translateY(0); opacity: .32; }
  40% { transform: translateY(-3px); opacity: 1; }
}
body.mobile-ui .receptionPanel {
  width: calc(100vw - 18px);
  top: 70px;
}


/* Hangify / Altavoz */
#hangifyPanel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  max-width: calc(100vw - 28px);
  z-index: 250000;
  display: none;
  background: #121212;
  color: #ffffff;
  border: 2px solid rgba(30, 215, 96, .95);
  border-radius: 16px;
  box-shadow: 0 22px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) inset;
  overflow: hidden;
}

#hangifyPanel .panelHead,
#hangifyPanel .hangifyHead {
  background: linear-gradient(180deg, #191919, #0b0b0b);
  color: #ffffff;
  border-bottom: 1px solid rgba(30, 215, 96, .45);
}

.hangifyBody {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hangifyNow {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(30,215,96,.18), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px;
}

.hangifyCover {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 900;
  color: #06130a;
  background: linear-gradient(135deg, #1ed760, #b7ffcc);
  box-shadow: 0 10px 26px rgba(30,215,96,.22);
}

.hangifyTrackTitle {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
}

.hangifyTrackArtist {
  margin-top: 4px;
  font-size: 12px;
  color: #b3b3b3;
  font-weight: 700;
}

.hangifyBars {
  height: 36px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
}

.hangifyBars span {
  width: 9px;
  height: 10px;
  border-radius: 999px;
  background: #1ed760;
  box-shadow: 0 0 12px rgba(30,215,96,.4);
  opacity: .55;
}

.hangifyBars.playing span { animation: hangifyBar 720ms ease-in-out infinite alternate; opacity: 1; }
.hangifyBars.playing span:nth-child(2) { animation-delay: 90ms; }
.hangifyBars.playing span:nth-child(3) { animation-delay: 180ms; }
.hangifyBars.playing span:nth-child(4) { animation-delay: 270ms; }
.hangifyBars.playing span:nth-child(5) { animation-delay: 360ms; }

@keyframes hangifyBar {
  from { height: 8px; }
  to { height: 32px; }
}

.hangifyControls,
.hangifyConfirmRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hangifyConfirmRow { grid-template-columns: 1.35fr .8fr; }

.hangifyControls button,
.hangifyConfirmRow button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  color: #111827;
  background: #ffffff;
}

.hangifyControls button.active,
.hangifyControls button:hover,
.hangifyConfirmRow .good {
  background: #1ed760;
  color: #06130a;
}

.hangifyConfirmRow .danger {
  background: #ef4444;
  color: #fff;
}

.hangifyControls button:disabled,
.hangifyConfirmRow button:disabled {
  opacity: .5;
  cursor: default;
}

.hangifyTracks {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 176px;
  overflow-y: auto;
  padding-right: 3px;
}

.hangifyTrack {
  text-align: left;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.055);
  color: #fff;
  border-radius: 12px;
  padding: 9px 10px;
  cursor: pointer;
}

.hangifyTrack span {
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.hangifyTrack small {
  display: block;
  margin-top: 3px;
  color: #b3b3b3;
  font-size: 10px;
  font-weight: 700;
}

.hangifyTrack.active {
  background: rgba(30,215,96,.22);
  border-color: rgba(30,215,96,.9);
}

.hangifyNote {
  margin: 0;
  color: #b3b3b3;
  font-size: 11px;
  line-height: 1.3;
}

.object.speakerPlaying {
  filter: drop-shadow(0 0 8px rgba(30,215,96,.75));
}

.speakerMusicBars {
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  display: flex;
  align-items: end;
  gap: 3px;
  pointer-events: none;
  z-index: 5;
}

.speakerMusicBars span {
  width: 5px;
  height: 8px;
  border-radius: 999px;
  background: #1ed760;
  box-shadow: 0 0 8px rgba(30,215,96,.7);
  animation: speakerMiniBar 560ms ease-in-out infinite alternate;
}
.speakerMusicBars span:nth-child(2) { animation-delay: 110ms; }
.speakerMusicBars span:nth-child(3) { animation-delay: 220ms; }

@keyframes speakerMiniBar {
  from { height: 5px; opacity: .65; }
  to { height: 18px; opacity: 1; }
}


/* FIX32: ocultar nombre de sala de la barra superior */
#topbar #roomTitle {
  
}


/* FIX32: indicador musical junto al zoom */
.nowPlayingBadge {
  position: absolute;
  left: 166px;
  top: 13px;
  z-index: 95;
  max-width: min(420px, calc(100vw - 210px));
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #d9fbe4;
  background: rgba(18,18,18,.70);
  border: 1px solid rgba(30,215,96,.45);
  box-shadow: 0 10px 26px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nowPlayingBadge::before {
  content: "♪";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #06130a;
  background: #1ed760;
  box-shadow: 0 0 12px rgba(30,215,96,.45);
}
.nowPlayingBadge strong {
  color: #ffffff;
}
#roomArea.isLobby #nowPlayingBadge {
  
}

/* FIX33: Hangify por encima del chat y del resto de ventanas */
#hangifyPanel {
  z-index: 250000 !important;
}
body.mobile-ui #hangifyPanel {
  z-index: 250000 !important;
}

@media (max-width: 700px) {
  .nowPlayingBadge {
    left: 12px;
    top: 60px;
    max-width: calc(100vw - 24px);
  }
}


/* FIX34: Hangify siempre por encima del chat y del resto de ventanas */
#hangifyPanel {
  position: fixed !important;
  z-index: 2147483600 !important;
}
body.mobile-ui #hangifyPanel {
  position: fixed !important;
  z-index: 2147483600 !important;
}

/* FIX34: indicador "Está sonando" visible, fijo y por encima de capas del mundo */
.nowPlayingBadge,
.nowPlayingBadge.visible {
  display: flex;
  position: absolute;
  left: 170px;
  top: 12px;
  z-index: 2147483000 !important;
  pointer-events: none;
  opacity: 1 !important;
  visibility: visible !important;
}
#roomArea.isLobby #nowPlayingBadge {
  
}

/* FIX34: controles de zoom más limpios sin saltos visuales */
#zoomBox {
  z-index: 2147482500 !important;
}
#zoomBox button {
  transition: background .12s ease, transform .08s ease, box-shadow .12s ease;
}


/* FIX36: apertura real del buscador de salas — mismo margen arriba y abajo dentro de la zona visible */
#navigatorPanel.navigatorAutoFit {
  top: var(--navigator-fit-top, 12px) !important;
  bottom: auto !important;
  height: var(--navigator-fit-height, calc(100% - 24px)) !important;
  max-height: var(--navigator-fit-height, calc(100% - 24px)) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#navigatorPanel.navigatorAutoFit .roomList {
  max-height: var(--navigator-list-height, 320px) !important;
  min-height: 120px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}


/* FIX37: barra superior eliminada visualmente, controles flotantes */
:root {
  --dh-topbar-height: 0px;
}
#topbar {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 2147481200 !important;
  pointer-events: none !important;
}
#topbar > * {
  pointer-events: auto !important;
}
#status {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  background: rgba(7,17,31,.76) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #e4f6ff !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.20) !important;
  backdrop-filter: blur(8px) !important;
}
#cancelMoveBtn {
  box-shadow: 0 4px 0 rgba(0,0,0,.22) !important;
}

/* FIX37: al abrir el buscador se ajusta, pero al moverlo no queda bloqueado por !important */
#navigatorPanel.navigatorAutoFit {
  max-height: var(--navigator-fit-height, calc(100% - 24px)) !important;
}
#navigatorPanel.draggingPanel {
  top: auto;
  height: auto;
}

/* FIX38: zoom abajo derecha, móvil bajo chat, ventanas por encima de controles flotantes */
#zoomBox {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 70000 !important;
  background: rgba(9, 18, 32, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: 999px !important;
  padding: 7px !important;
  gap: 7px !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter: blur(10px) !important;
}

#zoomBox button {
  width: 40px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: linear-gradient(180deg, #e2e8f0, #94a3b8) !important;
  color: #0f172a !important;
  font-weight: 1000 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px rgba(0,0,0,.22) !important;
}

#zoomBox button:hover {
  background: linear-gradient(180deg, #ffffff, #bae6fd) !important;
  transform: translateY(-1px) !important;
}

#zoomBox button:active {
  transform: translateY(1px) scale(.98) !important;
}

.nowPlayingBadge,
.nowPlayingBadge.visible {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 168px !important;
  bottom: 22px !important;
  z-index: 70000 !important;
  display: flex !important;
  max-width: min(430px, calc(100vw - 220px)) !important;
}

#topbar {
  z-index: 60000 !important;
}

#chatFloat {
  z-index: 80000 !important;
}

#catalogPanel,
#navigatorPanel,
#inventoryPanel,
#inventPanel,
#roomPanel,
#roomEditPanel,
#friendsPanel,
#profilePanel,
#userPanel,
#gamesPanel,
#battlePanel,
#wordlePanel,
#wordleGamePanel,
#wordleInvitePanel,
#battleInvitePanel,
#customBuildPanel,
#printerPanel,
#dattapopPanel,
#focoLedPanel,
#smartRoomPanel,
#creditsStorePanel,
#roadmapPanel,
#infoStandPanel,
#genericConfirmPanel,
#roomEntryPanel,
#roomPasswordPanel,
#receptionPanel,
#hangifyPanel,
.floatingPanel,
.sidePanel,
.gameModalPanel,
.pcbwayFileSidePanel {
  z-index: 500000 !important;
}

#hangifyPanel,
#genericConfirmPanel,
#roomPasswordPanel,
#roomEntryPanel,
#creditsStorePanel {
  z-index: 520000 !important;
}

body.mobile-ui #status {
  
}

body.mobile-ui #zoomBox {
  right: 12px !important;
  bottom: 12px !important;
  padding: 6px !important;
  gap: 6px !important;
}

body.mobile-ui #zoomBox button {
  width: 38px !important;
  height: 34px !important;
}

body.mobile-ui .nowPlayingBadge,
body.mobile-ui .nowPlayingBadge.visible {
  right: 12px !important;
  bottom: 62px !important;
  max-width: calc(100vw - 24px) !important;
}


/* FIX39 — posición definitiva zoom/música/chat móvil y BattleBanzai sin zoom manual */
#roomArea.battleBackground #zoomBox,
#roomArea.battleBackground #nowPlayingBadge {
  
}

#zoomBox {
  right: 22px !important;
  bottom: 86px !important; /* encima de la barra inferior, no pegado dentro */
  z-index: 70000 !important;
}

.nowPlayingBadge,
.nowPlayingBadge.visible {
  right: 174px !important;
  bottom: 91px !important; /* alineado con zoom y por encima del dock */
  z-index: 70000 !important;
  max-width: min(430px, calc(100vw - 245px)) !important;
}

body.mobile-ui #status {
  
}

body.mobile-ui #zoomBox {
  top: 62px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 70000 !important;
}

body.mobile-ui .nowPlayingBadge,
body.mobile-ui .nowPlayingBadge.visible {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 132px !important; /* centrado justo debajo/pegado a la zona del chat móvil */
  transform: translateX(-50%) !important;
  justify-content: center !important;
  text-align: center !important;
  width: min(420px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  z-index: 70000 !important;
}

body.mobile-ui #sendBtn {
  min-width: 74px !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* FIX39b — móvil: indicador de música debajo del chat, zoom bajo créditos */
body.mobile-ui .nowPlayingBadge,
body.mobile-ui .nowPlayingBadge.visible {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  justify-content: center !important;
  text-align: center !important;
  width: min(430px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  z-index: 70000 !important;
}

/* FIX40 — posiciones definitivas de zoom / Está sonando */
/* Por defecto no se muestra nada si no hay música activa. */
#nowPlayingBadge.nowPlayingBadge {
  
  opacity: 0 !important;
  visibility: hidden !important;
}
#nowPlayingBadge.nowPlayingBadge.visible {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ordenador: zoom arriba centrado. */
body:not(.mobile-ui) #zoomBox {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 14px !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 70000 !important;
}

/* Ordenador: Está sonando arriba derecha, debajo de jugadores conectados. */
body:not(.mobile-ui) #nowPlayingBadge.nowPlayingBadge.visible {
  position: fixed !important;
  left: auto !important;
  right: 18px !important;
  top: 62px !important;
  bottom: auto !important;
  transform: none !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: auto !important;
  max-width: min(430px, calc(100vw - 36px)) !important;
  z-index: 70000 !important;
}

/* Móvil: zoom debajo de la cápsula de créditos. */
body.mobile-ui #zoomBox {
  position: fixed !important;
  top: 64px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 70000 !important;
}

/* Móvil: Está sonando en el hueco entre el chat y el dock inferior. */
body.mobile-ui #nowPlayingBadge.nowPlayingBadge.visible {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 62px !important;
  transform: translateX(-50%) !important;
  justify-content: center !important;
  text-align: center !important;
  width: min(430px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  z-index: 70000 !important;
}

#roomArea.isLobby #nowPlayingBadge,
#roomArea.battleBackground #nowPlayingBadge,
#roomArea.battleBackground #zoomBox {
  
}

/* FIX41 — zoom centrado real + botones más compactos e igualados */
#zoomBox {
  min-height: 38px !important;
  height: 38px !important;
  padding: 3px 5px !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  align-items: center !important;
}
#zoomBox button {
  width: 32px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 30px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body:not(.mobile-ui) #zoomBox {
  top: 12px !important;
}
body.mobile-ui #zoomBox {
  height: 38px !important;
  min-height: 38px !important;
}

/* FIX43 — Accesorio Rayos X: overlay de cuerpo completo encima del personaje */
.characterSprite .avatarAccessory.fullBodyAccessory {
  left: 50% !important;
  top: 0 !important;
  width: 58px !important;
  height: 92px !important;
  transform: translateX(-50%) !important;
  object-fit: contain !important;
  z-index: 35 !important;
  pointer-events: none !important;
}

.profileAvatar .characterSprite .avatarAccessory.fullBodyAccessory {
  top: 0 !important;
  width: 58px !important;
  height: 92px !important;
  transform: translateX(-50%) !important;
}

.avatar.sitting .characterSprite .avatarAccessory.fullBodyAccessory,
.sitting .avatarAccessory.fullBodyAccessory,
.avatar.sitting.sittingFacingMirror .characterSprite .avatarAccessory.fullBodyAccessory,
.sitting.sittingFacingMirror .avatarAccessory.fullBodyAccessory {
  top: 0 !important;
  transform: translateX(-50%) !important;
}


/* FIX45 — los avisos de compra SIEMPRE por encima del catálogo y cualquier ventana */
#toast.purchaseToast {
  z-index: 2147483647 !important;
  position: fixed !important;
  top: 22px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: block;
}

/* FIX45 — Rayos X: parpadeo de esqueleto eléctrico y resplandor alrededor del personaje */
.characterSprite .avatarAccessory.fullBodyAccessory[src*="rayosx"],
.characterSprite .avatarAccessory.fullBodyAccessory[src*="rayosx.png"] {
  animation: rayosXElectricFlicker 1.15s infinite steps(1, end);
  opacity: .72;
  filter:
    drop-shadow(0 0 4px rgba(96, 245, 255, .9))
    drop-shadow(0 0 11px rgba(42, 212, 255, .75))
    drop-shadow(0 0 22px rgba(56, 189, 248, .48));
  mix-blend-mode: screen;
}

.characterSprite .avatarAccessory.fullBodyAccessory[src*="rayosx"]::after,
.characterSprite .avatarAccessory.fullBodyAccessory[src*="rayosx.png"]::after {
  content: "";
}

.characterSprite:has(.avatarAccessory.fullBodyAccessory[src*="rayosx"])::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 74px;
  height: 98px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(125, 249, 255, .34) 0%, rgba(56, 189, 248, .18) 36%, rgba(56, 189, 248, 0) 72%);
  pointer-events: none;
  z-index: 34;
  animation: rayosXGlowPulse 1.15s infinite steps(1, end);
  mix-blend-mode: screen;
}

@keyframes rayosXElectricFlicker {
  0% { opacity: .16; filter: drop-shadow(0 0 2px rgba(96,245,255,.25)); }
  7% { opacity: .96; filter: drop-shadow(0 0 7px rgba(255,255,255,1)) drop-shadow(0 0 18px rgba(96,245,255,.95)) drop-shadow(0 0 34px rgba(56,189,248,.70)); }
  13% { opacity: .38; filter: drop-shadow(0 0 4px rgba(96,245,255,.55)); }
  21% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255,255,255,1)) drop-shadow(0 0 20px rgba(96,245,255,.98)) drop-shadow(0 0 42px rgba(56,189,248,.78)); }
  32% { opacity: .58; filter: drop-shadow(0 0 6px rgba(96,245,255,.75)) drop-shadow(0 0 16px rgba(56,189,248,.50)); }
  48% { opacity: .9; filter: drop-shadow(0 0 8px rgba(255,255,255,.85)) drop-shadow(0 0 22px rgba(96,245,255,.88)); }
  59% { opacity: .24; filter: drop-shadow(0 0 3px rgba(96,245,255,.38)); }
  72% { opacity: 1; filter: drop-shadow(0 0 9px rgba(255,255,255,1)) drop-shadow(0 0 24px rgba(96,245,255,1)) drop-shadow(0 0 45px rgba(56,189,248,.8)); }
  100% { opacity: .66; filter: drop-shadow(0 0 5px rgba(96,245,255,.85)) drop-shadow(0 0 15px rgba(56,189,248,.55)); }
}

@keyframes rayosXGlowPulse {
  0% { opacity: .05; transform: translateX(-50%) scale(.92); }
  7% { opacity: .75; transform: translateX(-50%) scale(1.05); }
  13% { opacity: .18; transform: translateX(-50%) scale(.96); }
  21% { opacity: .88; transform: translateX(-50%) scale(1.08); }
  32% { opacity: .36; transform: translateX(-50%) scale(1); }
  48% { opacity: .62; transform: translateX(-50%) scale(1.04); }
  59% { opacity: .10; transform: translateX(-50%) scale(.94); }
  72% { opacity: .92; transform: translateX(-50%) scale(1.1); }
  100% { opacity: .32; transform: translateX(-50%) scale(1); }
}


/* FIX46 — chat usable, por debajo de ventanas pero por encima de controles flotantes */
#chatFloat {
  z-index: 480000 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#chatFloat, #chatFloat * {
  pointer-events: auto !important;
}
#chatInput, #sendBtn {
  pointer-events: auto !important;
  opacity: 1 !important;
}
#chatInput {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* FIX48 — móvil: bloquear zoom nativo de la web y usar pinch solo dentro de la sala */
html,
body {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
body.mobile-ui #roomArea,
body.mobile-ui #stageScaler,
body.mobile-ui #roomStage,
body.mobile-ui #world {
  touch-action: none !important;
}
body.mobile-ui input,
body.mobile-ui textarea,
body.mobile-ui select,
body.mobile-ui button,
body.mobile-ui .floatingPanel,
body.mobile-ui .sidePanel {
  touch-action: manipulation;
}


/* FIX53 — láser como elemento del mundo con capas isométricas por tramo.
   IMPORTANTE: no forzar left/top aquí; vienen calculados por JS para cada tramo. */




/* FIX54 login / PIN */
.registerHint {
  display:block;
  margin-top:5px;
  font-size:11px;
  color:#64748b;
  text-align:left;
}
.rememberLoginRow {
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 8px;
  color:#0f172a;
  font-size:13px;
  font-weight:800;
  justify-content:center;
}
.rememberLoginRow input {
  width:18px;
  height:18px;
  accent-color:#2563eb;
}
.logoutBtn {
  border:0;
  border-radius:16px;
  padding:11px 14px;
  min-height:42px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(180deg,#ef4444,#be123c);
  box-shadow:0 7px 0 rgba(127,29,29,.55),0 10px 20px rgba(0,0,0,.22);
  cursor:pointer;
  pointer-events:auto;
}
.logoutBtn:active {
  transform:translateY(2px);
  box-shadow:0 4px 0 rgba(127,29,29,.55),0 7px 14px rgba(0,0,0,.2);
}
.profilePinBox {
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(148,163,184,.45);
  border-radius:16px;
  background:rgba(255,255,255,.72);
}
.profilePinFields {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:8px;
  align-items:center;
}
.profilePinFields input {
  min-width:0;
  height:40px;
  border-radius:12px;
  border:2px solid #cbd5e1;
  padding:0 10px;
  font-weight:900;
  color:#0f172a;
  background:#fff;
}
@media (max-width: 720px) {
  .profilePinFields { grid-template-columns:1fr; }
  .logoutBtn { display:none; }
}


.laserBeam {
  z-index: 1 !important;
}

/* FIX58: en Ya existo no mostramos la ayuda de formato del usuario */
body.auth-login .registerHint { display:none !important; }


/* FIX59: burbuja de escribiendo sobre personajes, clones y NPCs */
.playerChatBubble.typingBubble {
  padding: 7px 11px;
  min-width: 88px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  opacity: 0.98;
}

.typingBubbleText {
  font-weight: 800;
  font-size: 11px;
}

.typingDots {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  padding-left: 2px;
}

.typingDots span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.45;
  animation: typingBubbleDotPulse 1s infinite ease-in-out;
}

.typingDots span:nth-child(2) {
  animation-delay: 0.15s;
}

.typingDots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typingBubbleDotPulse {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-3px);
    opacity: 1;
  }
}


/* FIX60: inventario más compacto con scroll interno de unas 4 filas */
#inventoryPanel {
  min-height: 0 !important;
  height: auto !important;
  max-height: calc(100vh - var(--dh-topbar-height, 76px) - var(--dh-dock-height, 92px) - 36px) !important;
  overflow: hidden !important;
}

#inventoryPanel #inventoryList {
  max-height: 430px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#inventoryPanel #inventoryList.inventoryGrid,
#inventoryPanel #inventoryList.inventoryDivided {
  min-height: 0 !important;
  max-height: 430px !important;
}


/* FIX62: los globos de escribiendo muestran solo puntitos */
.playerChatBubble.typingBubble {
  min-width: 42px !important;
  width: auto !important;
  padding: 7px 10px !important;
}

.playerChatBubble.typingBubble .typingBubbleText {
  
}

.typingDots.typingDotsOnly {
  padding-left: 0 !important;
  gap: 4px !important;
}





/* FIX65: revertir el láser al sistema interno anterior, sin tramos globales */
.object .laserBeam:not(.laserWorldBeam) {
  display: block !important;
  z-index: 1 !important;
}


/* FIX66: ventana /info más clara */
.commandInfoPanel #genericConfirmText,
.commandInfoPanel .genericConfirmText {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  text-align: left !important;
  max-height: min(56vh, 460px) !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.commandInfoRow {
  display: grid;
  grid-template-columns: minmax(145px, auto) 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(224,242,254,.95), rgba(191,219,254,.9));
  border: 1px solid rgba(59,130,246,.22);
  color: #0f172a;
}

.commandInfoRow strong {
  font-weight: 1000;
  color: #075985;
  white-space: nowrap;
}

.commandInfoRow span {
  font-weight: 700;
  color: #334155;
  line-height: 1.25;
}


/* FIX66: láser como fila de tramos con profundidad por tile */
.object .laserBeam:not(.laserWorldBeam) {
  display: none !important;
}

.laserLayeredBeam {
  position: absolute !important;
  height: 6px !important;
  transform-origin: left center !important;
  transform: rotate(var(--laser-beam-angle, 26.565deg)) !important;
  pointer-events: none !important;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--laser-light-color, #ef4444) 95%, white) 0%,
    color-mix(in srgb, var(--laser-light-color, #ef4444) 82%, transparent) 58%,
    rgba(255,255,255,0) 100%);
  box-shadow:
    0 0 calc(8px + 20px * var(--laser-light-intensity, .85)) var(--laser-light-color, #ef4444),
    0 0 calc(18px + 34px * var(--laser-light-intensity, .85)) color-mix(in srgb, var(--laser-light-color, #ef4444) 55%, transparent);
  opacity: calc(.45 + .55 * var(--laser-light-intensity, .85));
  mix-blend-mode: screen;
}

.laserLayeredBeam.laserCut {
  border-radius: 999px 2px 2px 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--laser-light-color, #ef4444) 95%, white) 0%,
    var(--laser-light-color, #ef4444) 82%,
    var(--laser-light-color, #ef4444) 100%);
}

.laserLayeredBeam.deathStarLaserBeam {
  --laser-light-color: #22c55e;
}


/* FIX67: /info sin desbordes */
.commandInfoPanel #genericConfirmText,
.commandInfoPanel .genericConfirmText {
  gap: 6px !important;
  overflow-x: hidden !important;
}

.commandInfoRow {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 8px 10px !important;
}

.commandInfoRow strong {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  margin-bottom: 3px !important;
}

.commandInfoRow span {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* FIX67: láser por capas pero visualmente continuo */
.object .laserBeam:not(.laserWorldBeam) {
  display: none !important;
}

.laserLayeredBeam {
  height: 7px !important;
  border-radius: 999px !important;
  background: var(--laser-light-color, #ef4444) !important;
  opacity: calc(.55 + .45 * var(--laser-light-intensity, .85)) !important;
  box-shadow:
    0 0 calc(10px + 24px * var(--laser-light-intensity, .85)) var(--laser-light-color, #ef4444),
    0 0 calc(22px + 42px * var(--laser-light-intensity, .85)) color-mix(in srgb, var(--laser-light-color, #ef4444) 64%, transparent) !important;
  mix-blend-mode: screen !important;
  will-change: auto !important;
}

.laserLayeredBeam.laserCut {
  background: var(--laser-light-color, #ef4444) !important;
}




/* FIX70: láser intenso, continuo y sin transparencia ajena a la barra de intensidad */
.object .laserBeam:not(.laserWorldBeam) {
  display: none !important;
}

.laserLayeredBeam {
  position: absolute !important;
  height: 8px !important;
  transform-origin: left center !important;
  transform: rotate(var(--laser-beam-angle, 26.565deg)) !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background: var(--laser-light-color, #ef4444) !important;
  opacity: var(--laser-light-intensity, 1) !important;
  box-shadow:
    0 0 12px var(--laser-light-color, #ef4444),
    0 0 28px var(--laser-light-color, #ef4444),
    0 0 46px color-mix(in srgb, var(--laser-light-color, #ef4444) 80%, transparent) !important;
  mix-blend-mode: screen !important;
  filter: none !important;
}

.laserLayeredBeam.laserCut {
  background: var(--laser-light-color, #ef4444) !important;
}

.laserLayeredBeam.deathStarLaserBeam {
  --laser-light-color: #22c55e;
}




/* FIX72: todas las ventanas siempre por encima del chat */
#chatFloat {
  pointer-events: auto !important;
  z-index: 80 !important;
}

#chatInput,
#sendBtn {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}

#bottomDock,
#zoomBox {
  z-index: 90 !important;
}

#furniPanel,
#linkedFurniPanel,
#userPanel,
#roomPanel,
#navigatorPanel,
#catalogPanel,
#inventoryPanel,
#inventPanel,
#printerPanel,
#profilePanel,
#friendsPanel,
#gamesPanel,
#roomEntryPanel,
#battlePanel,
#battleInvitePanel,
#genericConfirmPanel,
#roomPasswordPanel,
#smartRoomPanel,
#creditsStorePanel,
#receptionPanel,
#focoLedPanel,
#laserPanel,
#lampPanel,
#holobotPanel,
#dattapopPanel,
#timeMachinePanel,
#cloneMachinePanel,
#dimensionPortalPanel,
.panel,
.modal,
.window,
.dialog {
  z-index: 2147483000 !important;
}

.teleporterUseBubbleWorld {
  pointer-events: auto !important;
  z-index: 2147482500 !important;
}

.teleporterUseBubbleWorld button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* FIX72: láser vuelve a línea única intensa y estable */
.laserLayeredBeam,
.laserWorldBeam,
.roomLightSpot {
  pointer-events: none !important;
}

.object .laserBeam:not(.laserWorldBeam) {
  display: block !important;
  position: absolute !important;
  left: var(--laser-origin-left, 50%) !important;
  top: var(--laser-origin-top, 78%) !important;
  height: 8px !important;
  width: var(--laser-light-length, 260px) !important;
  transform-origin: left center !important;
  transform: rotate(var(--laser-beam-angle, 26.565deg)) !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background: var(--laser-light-color, #ef4444) !important;
  opacity: var(--laser-light-intensity, 1) !important;
  box-shadow:
    0 0 12px var(--laser-light-color, #ef4444),
    0 0 28px var(--laser-light-color, #ef4444),
    0 0 46px color-mix(in srgb, var(--laser-light-color, #ef4444) 80%, transparent) !important;
  mix-blend-mode: screen !important;
  z-index: 2 !important;
}

.object .laserBeam.deathStarLaserBeam {
  --laser-light-color: #22c55e;
}


/* FIX73: giro del láser ajustado por rotación real del sprite */
.object .laserBeam:not(.laserWorldBeam) {
  left: var(--laser-origin-left, 50%) !important;
  top: var(--laser-origin-top, 78%) !important;
  transform-origin: left center !important;
  transform: rotate(var(--laser-beam-angle, 26.565deg)) !important;
}


/* FIX74: el haz gira junto al objeto; el ángulo es local al sprite */
.object .laserBeam:not(.laserWorldBeam) {
  transform-origin: left center !important;
  transform: rotate(var(--laser-beam-angle, 26.565deg)) !important;
}


/* FIX75: láser por tramos en el mundo, con z-index por fila/tile */
.object .laserBeam:not(.laserWorldBeam) {
  display: none !important;
}

.laserLayeredBeam {
  position: absolute !important;
  height: 8px !important;
  transform-origin: left center !important;
  transform: rotate(var(--laser-beam-angle, 26.565deg)) !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background: var(--laser-light-color, #ef4444) !important;
  opacity: var(--laser-light-intensity, 1) !important;
  box-shadow:
    0 0 12px var(--laser-light-color, #ef4444),
    0 0 28px var(--laser-light-color, #ef4444),
    0 0 46px color-mix(in srgb, var(--laser-light-color, #ef4444) 80%, transparent) !important;
  mix-blend-mode: screen !important;
  filter: none !important;
}

.laserLayeredBeam.laserCut {
  background: var(--laser-light-color, #ef4444) !important;
}

.laserLayeredBeam.deathStarLaserBeam {
  --laser-light-color: #22c55e;
}


/* FIX76: haz del láser al 100% visual, sin translucidez base; la barra controla solo la energía real */
.object .laserBeam:not(.laserWorldBeam) {
  display: none !important;
}

.laserLayeredBeam {
  position: absolute !important;
  height: calc(10px + (4px * var(--laser-light-intensity, 1))) !important;
  transform-origin: left center !important;
  transform: rotate(var(--laser-beam-angle, 26.565deg)) !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--laser-light-color, #ef4444) 65%, white) 0%,
    var(--laser-light-color, #ef4444) 38%,
    var(--laser-light-color, #ef4444) 62%,
    color-mix(in srgb, var(--laser-light-color, #ef4444) 65%, white) 100%) !important;
  opacity: 1 !important;
  box-shadow:
    0 0 calc(16px + 22px * var(--laser-light-intensity, 1)) var(--laser-light-color, #ef4444),
    0 0 calc(32px + 44px * var(--laser-light-intensity, 1)) var(--laser-light-color, #ef4444),
    0 0 calc(56px + 70px * var(--laser-light-intensity, 1)) color-mix(in srgb, var(--laser-light-color, #ef4444) 92%, transparent) !important;
  mix-blend-mode: normal !important;
  filter: brightness(calc(1.35 + (.65 * var(--laser-light-intensity, 1)))) saturate(1.45) !important;
}

.laserLayeredBeam::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 0 10px rgba(255,255,255,.95);
}

.laserLayeredBeam.laserCut {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--laser-light-color, #ef4444) 65%, white) 0%,
    var(--laser-light-color, #ef4444) 38%,
    var(--laser-light-color, #ef4444) 62%,
    color-mix(in srgb, var(--laser-light-color, #ef4444) 65%, white) 100%) !important;
}

.laserLayeredBeam.deathStarLaserBeam {
  --laser-light-color: #22c55e;
}


/* FIX77: láser limpio, color fiel y salida más alta desde el tile.
   No cambia ni el giro ni el sistema de capas: solo corrige el aspecto visual. */
.object .laserBeam:not(.laserWorldBeam) {
  display: none !important;
}

.laserLayeredBeam {
  position: absolute !important;
  height: 8px !important;
  transform-origin: left center !important;
  transform: rotate(var(--laser-beam-angle, 26.565deg)) !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background: var(--laser-light-color, #ef4444) !important;
  opacity: var(--laser-light-intensity, 1) !important;
  box-shadow:
    0 0 calc(8px + 12px * var(--laser-light-intensity, 1)) var(--laser-light-color, #ef4444),
    0 0 calc(18px + 24px * var(--laser-light-intensity, 1)) color-mix(in srgb, var(--laser-light-color, #ef4444) 78%, transparent) !important;
  mix-blend-mode: normal !important;
  filter: saturate(1.15) !important;
}

.laserLayeredBeam::before {
  content: none !important;
  display: none !important;
}

.laserLayeredBeam.laserCut {
  background: var(--laser-light-color, #ef4444) !important;
}

.laserLayeredBeam.deathStarLaserBeam {
  --laser-light-color: #22c55e;
}

/* FIX80: buscador de salas con altura normal y arrastre vertical recuperado */
#navigatorPanel.navigatorAutoFit {
  width: min(420px, calc(100% - 56px)) !important;
  min-height: 360px !important;
  height: var(--navigator-fit-height, 560px) !important;
  max-height: var(--navigator-fit-height, 560px) !important;
}
#navigatorPanel.draggingPanel {
  max-height: none !important;
}

/* FIX81: buscador de salas con tamaño fijo; el marco solo arrastra, nunca redimensiona */
#navigatorPanel {
  resize: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#navigatorPanel.navigatorAutoFit {
  width: var(--navigator-fit-width, 420px) !important;
  min-width: var(--navigator-fit-width, 420px) !important;
  max-width: var(--navigator-fit-width, 420px) !important;
  height: var(--navigator-fit-height, 540px) !important;
  min-height: var(--navigator-fit-height, 540px) !important;
  max-height: var(--navigator-fit-height, 540px) !important;
  top: var(--navigator-fit-top, 24px) !important;
  bottom: auto !important;
  overflow: hidden !important;
}

#navigatorPanel.draggingPanel {
  resize: none !important;
  overflow: hidden !important;
  bottom: auto !important;
  right: auto !important;
  transform: none !important;
}

#navigatorPanel .roomList {
  height: auto !important;
  max-height: var(--navigator-list-height, 320px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* FIX83: buscador de salas desplazado a la derecha; solo centrado en eje vertical al abrir */
#navigatorPanel.navigatorAutoFit {
  left: var(--navigator-fit-left, auto) !important;
  right: var(--navigator-fit-right, 28px) !important;
  top: var(--navigator-fit-top, 50%) !important;
  bottom: auto !important;
  width: var(--navigator-fit-width, 420px) !important;
  min-width: var(--navigator-fit-width, 420px) !important;
  max-width: var(--navigator-fit-width, 420px) !important;
  height: var(--navigator-fit-height, 540px) !important;
  min-height: var(--navigator-fit-height, 540px) !important;
  max-height: var(--navigator-fit-height, 540px) !important;
  transform: none !important;
  resize: none !important;
  overflow: hidden !important;
}

#navigatorPanel.draggingPanel,
#navigatorPanel.resizingPanel {
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  resize: none !important;
  overflow: hidden !important;
}

#navigatorPanel .navigatorResizeHandle {
  position: absolute !important;
  right: 7px !important;
  bottom: 7px !important;
  width: 22px !important;
  height: 22px !important;
  z-index: 20 !important;
  cursor: nwse-resize !important;
  border-right: 3px solid rgba(31,41,55,.88) !important;
  border-bottom: 3px solid rgba(31,41,55,.88) !important;
  border-radius: 0 0 8px 0 !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

#navigatorPanel .navigatorResizeHandle::before,
#navigatorPanel .navigatorResizeHandle::after {
  content: "" !important;
  position: absolute !important;
  right: 3px !important;
  bottom: 3px !important;
  width: 12px !important;
  height: 12px !important;
  border-right: 2px solid rgba(31,41,55,.58) !important;
  border-bottom: 2px solid rgba(31,41,55,.58) !important;
  border-radius: 0 0 5px 0 !important;
}

#navigatorPanel .navigatorResizeHandle::after {
  right: 8px !important;
  bottom: 8px !important;
  width: 6px !important;
  height: 6px !important;
  opacity: .75 !important;
}

#navigatorPanel .roomList {
  max-height: var(--navigator-list-height, 320px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Levitador: los objetos colocados encima flotan suavemente sin tocar la lógica de apilado */
.object.imageObject.levitatingStackedObject {
  overflow: visible;
}

.object.imageObject.levitatingStackedObject > img,
.object.imageObject.levitatingStackedObject .tintedObjectImage,
.object.imageObject.levitatingStackedObject .teleporterLayer {
  animation: levitatorObjectFloat 2.4s ease-in-out infinite;
  animation-delay: var(--levitator-phase-delay, 0s);
  animation-fill-mode: both;
  will-change: transform;
  filter: drop-shadow(0 0 5px rgba(62, 190, 255, .75)) drop-shadow(0 0 12px rgba(62, 190, 255, .35));
}

.object.imageObject.ghost.levitatingStackedObject > img,
.object.imageObject.ghost.levitatingStackedObject .tintedObjectImage,
.object.imageObject.ghost.levitatingStackedObject .teleporterLayer {
  animation: levitatorObjectFloat 2.4s ease-in-out infinite;
  animation-delay: var(--levitator-phase-delay, 0s);
  animation-fill-mode: both;
}

.object.imageObject.levitatingStackedObject::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 92px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(144, 224, 255, .34) 0 8%, transparent 12%),
    radial-gradient(circle at 25% 35%, rgba(82, 200, 255, .50) 0 3px, transparent 5px),
    radial-gradient(circle at 72% 60%, rgba(82, 200, 255, .42) 0 2px, transparent 4px);
  pointer-events: none;
  animation: levitatorBlueSparkle 1.8s ease-in-out infinite;
}

.object.imageObject.levitatorProjecting {
  overflow: visible;
}

.object.imageObject.levitatorProjecting::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 104px;
  height: 92px;
  transform: translateX(-50%);
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 10px,
    rgba(71, 198, 255, .74) 10px 12px,
    transparent 12px 22px
  );
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 18%, #000 65%, transparent 100%);
  mask-image: linear-gradient(to top, transparent 0%, #000 18%, #000 65%, transparent 100%);
  clip-path: polygon(22% 100%, 78% 100%, 62% 0, 38% 0);
  opacity: .78;
  animation: levitatorProjectionLines 1.35s linear infinite;
}

@keyframes levitatorObjectFloat {
  0%, 100% { transform: translate3d(0, 3px, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}

@keyframes levitatorBlueSparkle {
  0%, 100% { opacity: .46; transform: translate(-50%, -50%) scale(.96); }
  50% { opacity: .88; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes levitatorProjectionLines {
  0% { opacity: 0; background-position: 0 22px; transform: translateX(-50%) translateY(12px); }
  18% { opacity: .82; }
  100% { opacity: 0; background-position: 0 -34px; transform: translateX(-50%) translateY(-20px); }
}

/* Flor de Fuego: llamarada lateral activable */
.object.imageObject.fireFlowerOn {
  overflow: visible;
}

.object.imageObject.fireFlowerOn .fireFlowerFlame {
  position: absolute;
  left: 50%;
  top: 35%;
  width: 108px;
  height: 62px;
  pointer-events: none;
  z-index: 4;
  opacity: .98;
  transform-origin: 0% 50%;
  filter: drop-shadow(0 0 5px rgba(255, 197, 61, .78)) drop-shadow(0 0 12px rgba(255, 88, 24, .52));
  will-change: transform, opacity;
}

.object.imageObject.fireFlowerOn .fireFlowerFlame.flameRight {
  transform: translate(0px, -50%) rotate(0deg);
}

.object.imageObject.fireFlowerOn .fireFlowerFlame.flameLeft {
  transform: translate(0px, -50%) rotate(180deg);
}

.object.imageObject.fireFlowerOn .fireFlowerFlame.flameUp {
  transform: translate(0px, -50%) rotate(-90deg);
}

.object.imageObject.fireFlowerOn .fireFlowerFlame.flameDown {
  transform: translate(0px, -50%) rotate(90deg);
}

.object.imageObject.fireFlowerOn .fireFlowerFlame::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 102px;
  height: 50px;
  transform: translateY(-50%);
  transform-origin: 0% 50%;
  clip-path: polygon(0% 48%, 10% 39%, 28% 27%, 54% 13%, 84% 7%, 100% 50%, 84% 93%, 54% 87%, 28% 73%, 10% 61%, 0% 52%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 8% 50%, rgba(255,255,230,.96) 0 4%, rgba(255,224,83,.90) 7%, transparent 13%),
    radial-gradient(ellipse at 24% 50%, rgba(255,235,92,.92) 0 12%, transparent 24%),
    radial-gradient(ellipse at 55% 50%, rgba(255,137,30,.82) 0 28%, transparent 62%),
    radial-gradient(ellipse at 84% 50%, rgba(239,68,38,.58) 0 28%, transparent 70%);
  animation: fireFlowerConeBreath 1.15s ease-in-out infinite;
  will-change: transform, opacity, filter;
}

.object.imageObject.fireFlowerOn .fireFlowerFlame::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 84px;
  height: 25px;
  transform: translateY(-50%);
  transform-origin: 0% 50%;
  clip-path: polygon(0% 47%, 16% 38%, 44% 26%, 78% 18%, 100% 50%, 78% 82%, 44% 74%, 16% 62%, 0% 53%);
  background: linear-gradient(90deg, rgba(255,255,218,.92), rgba(255,213,69,.68), rgba(255,111,24,.16), rgba(255,111,24,0));
  filter: blur(.7px);
  opacity: .9;
  animation: fireFlowerInnerFlow 860ms ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.object.imageObject.fireFlowerOn .fireFlowerFlame i {
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 10px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,232,.96) 0 22%, rgba(255,213,58,.92) 50%, rgba(255,110,24,0) 76%);
  box-shadow: 0 0 10px rgba(255, 201, 61, .75);
  animation: fireFlowerNozzleGlow 900ms ease-in-out infinite alternate;
}

.object.imageObject.fireFlowerOn .fireFlowerFlame span {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,247,174,.96) 0 26%, rgba(255,149,35,.86) 48%, rgba(239,68,38,0) 78%);
  box-shadow: 0 0 7px rgba(255, 149, 35, .62);
  animation: fireFlowerParticleSmooth 1450ms linear infinite;
  will-change: transform, opacity;
}

.object.imageObject.fireFlowerOn .fireFlowerFlame span:nth-child(1) { --fy: -14px; --fx: 56px; animation-delay: 0ms; }
.object.imageObject.fireFlowerOn .fireFlowerFlame span:nth-child(2) { --fy: 11px; --fx: 70px; width: 6px; height: 6px; animation-delay: -290ms; }
.object.imageObject.fireFlowerOn .fireFlowerFlame span:nth-child(3) { --fy: -4px; --fx: 88px; width: 5px; height: 5px; animation-delay: -580ms; }
.object.imageObject.fireFlowerOn .fireFlowerFlame span:nth-child(4) { --fy: 20px; --fx: 62px; width: 4px; height: 4px; animation-delay: -870ms; }
.object.imageObject.fireFlowerOn .fireFlowerFlame span:nth-child(5) { --fy: -20px; --fx: 76px; width: 6px; height: 6px; animation-delay: -1160ms; }

@keyframes fireFlowerConeBreath {
  0%, 100% { opacity: .84; transform: translateY(-50%) scaleX(.96) scaleY(.92); filter: blur(.15px); }
  50% { opacity: 1; transform: translateY(-50%) scaleX(1.05) scaleY(1.03); filter: blur(.45px); }
}

@keyframes fireFlowerInnerFlow {
  0% { opacity: .58; transform: translateY(-50%) scaleX(.88) scaleY(.82); }
  100% { opacity: .96; transform: translateY(-50%) scaleX(1.04) scaleY(1.02); }
}

@keyframes fireFlowerNozzleGlow {
  0% { opacity: .72; transform: translateY(-50%) scale(.9); }
  100% { opacity: 1; transform: translateY(-50%) scale(1.08); }
}

@keyframes fireFlowerParticleSmooth {
  0% { opacity: 0; transform: translate(0, 0) scale(.45); }
  18% { opacity: .92; }
  72% { opacity: .45; }
  100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(1.05); }
}



/* Cubo Minecraft activable: lamparita azul */
.object.tcMinecraftLampObject {
  overflow: visible !important;
}
.object.tcMinecraftLampObject.tcMinecraftLampOn {
  filter: drop-shadow(0 0 5px #38bdf8) drop-shadow(0 0 11px rgba(56, 189, 248, 0.34));
}
.tcMinecraftLampGlow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 110px;
  transform: translate(-50%, -50%) rotate(-18deg);
  border-radius: 999px;
  background: radial-gradient(ellipse at center,
    rgba(125, 211, 252, .38) 0%,
    rgba(56, 189, 248, .24) 38%,
    rgba(37, 99, 235, .10) 62%,
    rgba(255,255,255,0) 78%);
  filter: blur(11px);
  opacity: .92;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
  animation: tcMinecraftLampPulse 1.4s ease-in-out infinite;
}
@keyframes tcMinecraftLampPulse {
  0%, 100% { opacity: .45; filter: blur(10px) brightness(1); }
  50% { opacity: .68; filter: blur(12px) brightness(1.18); }
}

/* FIX103: inventario con previsualización grande y botón Colocar */
#inventoryPanel {
  width: 720px !important;
  max-width: calc(100vw - 20px) !important;
}

#inventoryPanel .inventoryBody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 10px;
  padding: 0 12px 12px;
  align-items: stretch;
}

#inventoryPanel #inventoryList {
  padding: 0 !important;
  max-height: 430px !important;
}

#inventoryPanel #inventoryList.inventoryGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
}

#inventoryPanel .inventoryGridItem.selected {
  border-color: #0ea5e9 !important;
  background: #dbeafe !important;
  box-shadow: inset 0 0 0 2px rgba(14, 165, 233, 0.28);
}

.inventoryPreview {
  min-height: 310px;
  border: 2px solid #d8b45a;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff7d6, #f8fafc 42%, #e0f2fe);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  overflow: hidden;
}

.inventoryPreviewImage {
  width: 156px;
  height: 156px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid rgba(15, 23, 42, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.inventoryPreviewImage .catalogMini {
  width: 124px !important;
  height: 124px !important;
  transform: none !important;
}

.inventoryPreviewImage .catalogMini img,
.inventoryPreviewImage .catalogMini .tintedMiniImage,
.inventoryPreviewImage .catalogMini .svgTintReplace {
  max-width: 124px !important;
  max-height: 124px !important;
}

.inventoryPreviewText {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  color: #0f172a;
}

.inventoryPreviewText strong {
  font-size: 14px;
  font-weight: 950;
  line-height: 1.15;
}

.inventoryPreviewText span {
  font-size: 11px;
  line-height: 1.25;
  color: #475569;
  font-weight: 750;
}

.inventoryPreviewText b {
  font-size: 12px;
  color: #0f172a;
}

.inventoryPreviewActions {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.inventoryPreviewActions button {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 9px 10px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(15, 23, 42, 0.22);
}

.inventoryPreviewActions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

#inventoryDownloadBtn {
  background: linear-gradient(180deg, #e0f2fe, #93c5fd);
  color: #082f49;
}

@media (max-width: 720px) {
  #inventoryPanel .inventoryBody {
    grid-template-columns: 1fr;
  }
  .inventoryPreview {
    min-height: 220px;
  }
  #inventoryPanel #inventoryList.inventoryGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* FIX104: inventario 30% más bajo manteniendo preview lateral */
#inventoryPanel {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - var(--dh-topbar-height, 76px) - var(--dh-dock-height, 92px) - 36px) !important;
}

#inventoryPanel .panelHead {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

#inventoryPanel .inventoryTabs {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  gap: 7px !important;
}

#inventoryPanel .inventoryTab {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

#inventoryPanel .inventoryBody {
  padding: 0 12px 10px !important;
  gap: 9px !important;
  align-items: start !important;
}

#inventoryPanel #inventoryList,
#inventoryPanel #inventoryList.inventoryGrid,
#inventoryPanel #inventoryList.inventoryDivided {
  min-height: 0 !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

.inventoryPreview {
  min-height: 217px !important;
  max-height: 300px !important;
  padding: 8px !important;
  gap: 6px !important;
}

.inventoryPreviewImage {
  width: 118px !important;
  height: 118px !important;
  border-radius: 14px !important;
}

.inventoryPreviewImage .catalogMini {
  width: 94px !important;
  height: 94px !important;
}

.inventoryPreviewImage .catalogMini img,
.inventoryPreviewImage .catalogMini .tintedMiniImage,
.inventoryPreviewImage .catalogMini .svgTintReplace {
  max-width: 94px !important;
  max-height: 94px !important;
}

.inventoryPreviewText {
  gap: 3px !important;
}

.inventoryPreviewText strong {
  font-size: 13px !important;
}

.inventoryPreviewText span {
  font-size: 10px !important;
  line-height: 1.15 !important;
  max-height: 36px !important;
  overflow: hidden !important;
}

.inventoryPreviewText b {
  font-size: 11px !important;
}

.inventoryPreviewActions {
  gap: 5px !important;
}

.inventoryPreviewActions button {
  padding: 7px 9px !important;
  border-radius: 10px !important;
}

/* FIX105: inventario 20% más bajo (no 30%) y cuadrícula de 4 objetos por fila */
#inventoryPanel #inventoryList,
#inventoryPanel #inventoryList.inventoryGrid,
#inventoryPanel #inventoryList.inventoryDivided {
  max-height: 344px !important;
}

#inventoryPanel #inventoryList.inventoryGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.inventoryPreview {
  min-height: 248px !important;
  max-height: 344px !important;
  padding: 9px !important;
  gap: 7px !important;
}

.inventoryPreviewImage {
  width: 125px !important;
  height: 125px !important;
  border-radius: 15px !important;
}

.inventoryPreviewImage .catalogMini {
  width: 100px !important;
  height: 100px !important;
}

.inventoryPreviewImage .catalogMini img,
.inventoryPreviewImage .catalogMini .tintedMiniImage,
.inventoryPreviewImage .catalogMini .svgTintReplace {
  max-width: 100px !important;
  max-height: 100px !important;
}

.inventoryPreviewText span {
  max-height: 44px !important;
}

@media (max-width: 720px) {
  #inventoryPanel #inventoryList.inventoryGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* Kart TC: imagen grande 1173x850, ocupa 2x3 tiles */
.object.imageObject.tc11KartObjectSize,
.previewImageObject.tc11KartObjectSize,
#previewIcon.imageObject.tc11KartObjectSize {
  width: var(--object-w, 220px) !important;
  height: var(--object-h, 160px) !important;
}

.object.imageObject.tc11KartObjectSize img,
.object.imageObject.tc11KartObjectSize .tintedObjectImage,
.previewImageObject.tc11KartObjectSize img,
#previewIcon.imageObject.tc11KartObjectSize img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}


/* FIX125: inventos básicos interactivos + detector paranormal */
body.roomLightsOff #world .object.tcMinecraftLampObject.tcMinecraftLampOn,
body.roomLightsOff #world .object.tcMinecraftLampObject.tcMinecraftLampOn.litByFocoStrong,
body.roomLightsOff #world .object.tcMinecraftLampObject.tcMinecraftLampOn.litByFocoSoft {
  filter: brightness(1.08) saturate(1.14) drop-shadow(0 0 10px rgba(56, 189, 248, .72));
}
body.roomLightsOff #world .object.tcMinecraftLampObject.tcMinecraftLampOn .tcMinecraftLampGlow {
  width: 220px;
  height: 155px;
  opacity: .82;
  filter: blur(13px);
}

.object.droneInventObject {
  overflow: visible !important;
}
.object.droneInventObject.droneInventActive {
  animation: basicDroneFloat 2.2s ease-in-out infinite;
}
.object.droneInventObject.droneInventActive > img,
.object.droneInventObject.droneInventActive > .tintedObjectImage {
  filter: drop-shadow(0 8px 12px rgba(34, 197, 94, .18));
}
.droneRotorLayer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.droneRotorLayer.rotorOne {
  animation: droneRotorBlink1 .10s steps(1) infinite;
}
.droneRotorLayer.rotorTwo {
  animation: droneRotorBlink2 .10s steps(1) infinite;
}
@keyframes basicDroneFloat {
  0%,100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-16px); }
}
@keyframes droneRotorBlink1 {
  0%,49.99% { opacity: 1; }
  50%,100% { opacity: 0; }
}
@keyframes droneRotorBlink2 {
  0%,49.99% { opacity: 0; }
  50%,100% { opacity: 1; }
}

.object.inventSemaphoreObject {
  overflow: visible !important;
}
.inventSemaphoreLayer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}
.object.inventSemaphoreObject.inventSemaphoreActive .inventSemaphoreLayer.rojo {
  animation: semaphoreRedCycle 3s linear infinite;
}
.object.inventSemaphoreObject.inventSemaphoreActive .inventSemaphoreLayer.ambar {
  animation: semaphoreAmberCycle 3s linear infinite;
}
.object.inventSemaphoreObject.inventSemaphoreActive .inventSemaphoreLayer.verde {
  animation: semaphoreGreenCycle 3s linear infinite;
}
@keyframes semaphoreRedCycle {
  0%,30% { opacity: 1; }
  33%,100% { opacity: 0; }
}
@keyframes semaphoreAmberCycle {
  0%,32% { opacity: 0; }
  33%,63% { opacity: 1; }
  66%,100% { opacity: 0; }
}
@keyframes semaphoreGreenCycle {
  0%,65% { opacity: 0; }
  66%,96% { opacity: 1; }
  100% { opacity: 0; }
}

body.paranormalDetectorActive #roomArea::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 32;
  background: radial-gradient(circle at center, rgba(16, 24, 32, 0) 0%, rgba(6, 10, 14, .10) 58%, rgba(2, 6, 10, .18) 100%);
}
.paranormalScanLine {
  position: absolute;
  left: -40px;
  width: calc(100% + 80px);
  height: 12px;
  top: -40px;
  pointer-events: none;
  z-index: 9999;
  background: linear-gradient(180deg, rgba(16,185,129,0), rgba(74, 222, 128, .92), rgba(16,185,129,0));
  box-shadow: 0 0 14px rgba(74, 222, 128, .55), 0 0 28px rgba(74, 222, 128, .22);
  opacity: .9;
  mix-blend-mode: screen;
  animation: paranormalScanSweep 2.6s linear infinite;
}
@keyframes paranormalScanSweep {
  0% { transform: translateY(0); opacity: .0; }
  10% { opacity: .95; }
  90% { opacity: .8; }
  100% { transform: translateY(620px); opacity: 0; }
}
.paranormalGhostNpc {
  position: absolute;
  width: 110px;
  height: 150px;
  transform: translate(-50%, -68%);
  pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(52, 211, 153, .35));
  animation: paranormalGhostFloat 3.3s ease-in-out infinite;
}
.paranormalGhostNpc img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .94;
}
@keyframes paranormalGhostFloat {
  0%,100% { transform: translate(-50%, -68%) translateY(0) translateX(0); }
  25% { transform: translate(-50%, -70%) translateY(-10px) translateX(8px); }
  50% { transform: translate(-50%, -72%) translateY(-16px) translateX(0); }
  75% { transform: translate(-50%, -70%) translateY(-8px) translateX(-8px); }
}


/* FIX126: levitador apilado, dron suave y modo paranormal funcional */
.object.droneInventObject.droneInventActive {
  animation: none !important;
  overflow: visible !important;
}
.object.droneInventObject.droneInventActive > img,
.object.droneInventObject.droneInventActive > .tintedObjectImage,
.object.droneInventObject.droneInventActive .droneRotorLayer {
  animation: basicDroneFloatSmooth 2.2s ease-in-out infinite;
  animation-delay: var(--drone-phase-delay, 0s);
  will-change: transform;
}
.object.droneInventObject.droneInventActive > img,
.object.droneInventObject.droneInventActive > .tintedObjectImage {
  filter: drop-shadow(0 13px 13px rgba(15, 23, 42, .18)) drop-shadow(0 0 9px rgba(125, 211, 252, .25));
}
.droneIsoShadow {
  position: absolute;
  left: 50%;
  top: 82%;
  width: 82px;
  height: 34px;
  transform: translate(-50%, -50%) rotate(-18deg) skewX(-18deg);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, .28), rgba(15, 23, 42, .13) 48%, rgba(15, 23, 42, 0) 76%);
  pointer-events: none;
  z-index: -2;
}
@keyframes basicDroneFloatSmooth {
  0%,100% { transform: translateY(-24px); }
  50% { transform: translateY(-46px); }
}

body.paranormalDetectorActive #world .tile,
body.paranormalDetectorActive #world .roomEntryDoorOutside,
body.paranormalDetectorActive #world .roomDoorPreviewTile,
body.paranormalDetectorActive #world .object:not(.paranormalGhostNpc),
body.paranormalDetectorActive #world .avatar {
  filter: grayscale(1) brightness(.72) contrast(1.08) !important;
}
body.paranormalDetectorActive #roomArea::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 31;
  background: rgba(5, 8, 12, .28);
}
body.paranormalDetectorActive .paranormalScanLine,
body.paranormalDetectorActive .paranormalGhostNpc {
  filter: none !important;
}
.paranormalGhostNpc {
  width: 132px;
  height: 172px;
  filter: drop-shadow(0 0 20px rgba(52, 211, 153, .5)) !important;
}
.paranormalGhostNpc img {
  opacity: .98;
}


/* FIX127: aspas dron reales, espectro estable tamaño avatar y movimiento suave */
.object.droneInventObject.droneInventActive .droneRotorLayer.rotorOne {
  animation: basicDroneFloatSmooth 2.2s ease-in-out infinite, droneRotorBlink1 .10s steps(1) infinite !important;
  animation-delay: var(--drone-phase-delay, 0s), 0s !important;
  z-index: 3;
}
.object.droneInventObject.droneInventActive .droneRotorLayer.rotorTwo {
  animation: basicDroneFloatSmooth 2.2s ease-in-out infinite, droneRotorBlink2 .10s steps(1) infinite !important;
  animation-delay: var(--drone-phase-delay, 0s), 0s !important;
  z-index: 3;
}
.paranormalGhostNpc {
  width: 58px !important;
  height: 92px !important;
  transform: translate(-50%, -88%) !important;
  animation: paranormalGhostFloatAvatar 3.3s ease-in-out infinite !important;
  animation-delay: var(--paranormal-ghost-phase-delay, 0s) !important;
  will-change: transform;
}
.paranormalGhostNpc img {
  width: 58px !important;
  height: 92px !important;
  object-fit: contain !important;
}
@keyframes paranormalGhostFloatAvatar {
  0%,100% { transform: translate(-50%, -88%) translateY(0) translateX(0); }
  25% { transform: translate(-50%, -88%) translateY(-7px) translateX(5px); }
  50% { transform: translate(-50%, -88%) translateY(-12px) translateX(0); }
  75% { transform: translate(-50%, -88%) translateY(-6px) translateX(-5px); }
}


/* FIX128: escáner paranormal estable y espectro más grande moviéndose por la sala */
.paranormalScanLine {
  top: -120px !important;
  height: 14px !important;
  animation: paranormalScanSweepStable 3.2s linear infinite !important;
  animation-delay: var(--paranormal-scan-phase-delay, 0s) !important;
  will-change: transform, opacity;
}
@keyframes paranormalScanSweepStable {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: .95; }
  88% { opacity: .9; }
  100% { transform: translateY(var(--paranormal-scan-distance, 900px)); opacity: 0; }
}
.paranormalGhostNpc {
  width: 76px !important;
  height: 118px !important;
  transform: translate(-50%, -88%) !important;
  animation: paranormalGhostRoomDrift 7.8s ease-in-out infinite !important;
  animation-delay: var(--paranormal-ghost-phase-delay, 0s) !important;
  will-change: transform;
}
.paranormalGhostNpc img {
  width: 76px !important;
  height: 118px !important;
  object-fit: contain !important;
}
@keyframes paranormalGhostRoomDrift {
  0%,100% { transform: translate(-50%, -88%) translate(0, 0); }
  18% { transform: translate(-50%, -90%) translate(62px, -28px); }
  36% { transform: translate(-50%, -92%) translate(128px, 16px); }
  54% { transform: translate(-50%, -90%) translate(54px, 58px); }
  72% { transform: translate(-50%, -91%) translate(-88px, 24px); }
  88% { transform: translate(-50%, -90%) translate(-42px, -38px); }
}


/* FIX129: ventana de registro de cámara de seguridad */
.securityCameraLogPanel {
  width: 430px;
  max-width: calc(100vw - 24px);
  z-index: 9200;
}
.securityCameraLogBody {
  max-height: 340px;
  overflow: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.securityCameraLogRow {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, .76);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.securityCameraLogRow.enter {
  border-left: 4px solid #22c55e;
}
.securityCameraLogRow.leave {
  border-left: 4px solid #f97316;
}
.securityCameraLogTime {
  font-size: 11px;
  opacity: .78;
}
.securityCameraLogText {
  font-size: 13px;
}
.securityCameraEmpty {
  padding: 12px;
}


/* FIX132: preselección amarilla estable, pero en capa de suelo (z-index por JS). */
.tileHoverOutline {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  pointer-events: none !important;
}
.tileHoverOutline.fadedByObject {
  opacity: .5 !important;
}
.tileHoverOutline polygon {
  stroke: #facc15 !important;
  stroke-width: 3.25 !important;
  filter: drop-shadow(0 0 3px rgba(250, 204, 21, .65)) !important;
}
.securityCameraLogPanel {
  z-index: 9200 !important;
}


/* FIX133: Cámara de seguridad como ventana real centrada y arrastrable */
#securityCameraLogPanel.securityCameraLogPanel {
  position: fixed !important;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 28px)) !important;
  max-height: min(620px, calc(100vh - 36px)) !important;
  background: linear-gradient(180deg, #f8fafc, #e2e8f0) !important;
  color: #0f172a !important;
  border: 3px solid #d8b45a !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.45) !important;
  overflow: hidden !important;
  z-index: 2147483000 !important;
  display: none;
}
#securityCameraLogPanel.securityCameraLogPanel.show {
  display: block !important;
}
#securityCameraLogPanel .securityCameraLogHeader,
#securityCameraLogPanel .panelHead {
  height: 44px !important;
  padding: 0 12px 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(180deg, #1f2937, #0f172a) !important;
  color: #fff !important;
  font-weight: 1000 !important;
  letter-spacing: .2px !important;
  cursor: grab !important;
  user-select: none !important;
}
#securityCameraLogPanel .panelClose {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  border: 0 !important;
  background: rgba(248, 113, 113, .92) !important;
  color: #fff !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
}
.securityCameraLogIntro {
  margin: 12px 14px 0 !important;
  padding: 9px 11px !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, .07) !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
#securityCameraLogPanel .securityCameraLogBody {
  max-height: min(430px, calc(100vh - 190px)) !important;
  overflow-y: auto !important;
  padding: 12px 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#securityCameraLogPanel .securityCameraLogRow {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .11) !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .07) !important;
  color: #0f172a !important;
}
#securityCameraLogPanel .securityCameraLogTime {
  color: #64748b !important;
  font-weight: 900 !important;
}
#securityCameraLogPanel .securityCameraLogText {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* FIX133: /info limpio, centrado y legible */
#genericConfirmPanel.commandInfoPanel {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(560px, calc(100vw - 28px)) !important;
  max-height: min(680px, calc(100vh - 36px)) !important;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
  color: #0f172a !important;
  border: 3px solid #d8b45a !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.45) !important;
  overflow: hidden !important;
  z-index: 2147483100 !important;
}
#genericConfirmPanel.commandInfoPanel .panelHead {
  height: 46px !important;
  padding: 0 12px 0 15px !important;
  background: linear-gradient(180deg, #1f2937, #0f172a) !important;
  color: #fff !important;
  border-bottom: 0 !important;
}
#genericConfirmPanel.commandInfoPanel #genericConfirmTitle {
  font-size: 15px !important;
  font-weight: 1000 !important;
  color: #fff !important;
}
#genericConfirmPanel.commandInfoPanel #genericConfirmText {
  display: block !important;
  margin: 0 !important;
  padding: 14px !important;
  max-height: min(500px, calc(100vh - 170px)) !important;
  overflow-y: auto !important;
  background: transparent !important;
  color: #0f172a !important;
  text-align: left !important;
}
.commandInfoLead {
  margin: 0 0 11px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, .07) !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}
.commandInfoGrid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
#genericConfirmPanel.commandInfoPanel .commandInfoRow {
  display: grid !important;
  grid-template-columns: minmax(150px, .86fr) 1.4fr !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 11px !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .11) !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .07) !important;
  color: #0f172a !important;
  overflow: hidden !important;
}
#genericConfirmPanel.commandInfoPanel .commandInfoRow strong {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: #0f172a !important;
  color: #f8fafc !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  margin: 0 !important;
}
#genericConfirmPanel.commandInfoPanel .commandInfoRow span {
  display: block !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.32 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
#genericConfirmPanel.commandInfoPanel .actions {
  padding: 10px 14px 14px !important;
  background: rgba(226, 232, 240, .85) !important;
  border-top: 1px solid rgba(15,23,42,.08) !important;
}
#genericConfirmPanel.commandInfoPanel #genericConfirmAcceptBtn {
  min-width: 118px !important;
  border-radius: 12px !important;
  font-weight: 1000 !important;
}
@media (max-width: 560px) {
  #genericConfirmPanel.commandInfoPanel .commandInfoRow {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
}

/* FIX134: cámara de seguridad con limpieza, marco arrastrable y /info no bloquea chat */
.securityCameraLogPanel {
  width: min(520px, calc(100vw - 28px)) !important;
  max-height: min(620px, calc(100vh - 36px)) !important;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
  border: 3px solid #d8b45a !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.45) !important;
  overflow: hidden !important;
  z-index: 2147483000 !important;
}
.securityCameraLogPanel .securityCameraLogHeader {
  height: 46px !important;
  padding: 0 12px 0 15px !important;
  background: linear-gradient(180deg, #1f2937, #0f172a) !important;
  color: #fff !important;
  cursor: grab !important;
  touch-action: none !important;
}
.securityCameraLogPanel.draggingPanel .securityCameraLogHeader {
  cursor: grabbing !important;
}
.securityCameraLogIntro {
  padding: 12px 14px 8px !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}
.securityCameraLogToolbar {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 0 14px 10px !important;
}
.securityCameraClearBtn {
  border: 0 !important;
  border-radius: 11px !important;
  padding: 8px 12px !important;
  background: linear-gradient(180deg, #ef4444, #b91c1c) !important;
  color: #fff !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(127,29,29,.25) !important;
}
.securityCameraLogBody {
  max-height: min(430px, calc(100vh - 205px)) !important;
  overflow-y: auto !important;
  padding: 0 14px 14px !important;
}
.securityCameraLogRow {
  display: grid !important;
  grid-template-columns: 142px 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 0 0 8px !important;
  padding: 10px 11px !important;
  border-radius: 13px !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.1) !important;
  box-shadow: 0 3px 10px rgba(15,23,42,.06) !important;
}
.securityCameraLogTime {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}
.securityCameraLogText {
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}
.securityCameraLogRow.enter .securityCameraLogText strong { color: #15803d !important; }
.securityCameraLogRow.leave .securityCameraLogText strong { color: #b91c1c !important; }
.securityCameraEmpty {
  background: rgba(15,23,42,.06) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  color: #334155 !important;
  font-weight: 850 !important;
}
#genericConfirmPanel.commandInfoPanel {
  pointer-events: auto !important;
}
#genericConfirmPanel:not(.commandInfoPanel) .commandInfoGrid,
#genericConfirmPanel:not(.commandInfoPanel) .commandInfoLead,
#genericConfirmPanel:not(.commandInfoPanel) .commandInfoRow {
  all: revert;
}

/* FIX135: arrastre real de la ventana de log de cámara desde marco/cabecera */
#securityCameraLogPanel.securityCameraLogPanel {
  pointer-events: auto !important;
  user-select: none !important;
}
#securityCameraLogPanel .securityCameraLogHeader,
#securityCameraLogPanel .panelHead,
#securityCameraLogPanel .panelHeader {
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
}
#securityCameraLogPanel.draggingPanel .securityCameraLogHeader,
#securityCameraLogPanel.draggingPanel .panelHead,
#securityCameraLogPanel.draggingPanel .panelHeader {
  cursor: grabbing !important;
}
#securityCameraLogPanel .securityCameraLogBody,
#securityCameraLogPanel .securityCameraLogToolbar,
#securityCameraLogPanel button {
  user-select: text;
  touch-action: auto;
}
#securityCameraLogPanel .securityCameraLogToolbar,
#securityCameraLogPanel .securityCameraLogBody {
  cursor: default !important;
}

/* FIX136: la ventana de cámara usa el mismo arrastre genérico que el resto.
   No bloquear left/top/transform con !important, porque el JS de makeFloatingPanelDraggable
   necesita escribir esas propiedades inline al mover la ventana. */
#securityCameraLogPanel.securityCameraLogPanel {
  position: fixed !important;
}
#securityCameraLogPanel.securityCameraLogPanel[data-user-moved="1"] {
  transform: none !important;
}
#securityCameraLogPanel .securityCameraLogHeader {
  cursor: grab !important;
  touch-action: none !important;
}
#securityCameraLogPanel.draggingPanel .securityCameraLogHeader {
  cursor: grabbing !important;
}

/* FIX137: semáforo sin trompicones y espectro moviéndose de verdad por la sala */
.object.inventSemaphoreObject.inventSemaphoreActive .inventSemaphoreLayer.rojo {
  animation: semaphoreRedCycle 3s linear infinite !important;
  animation-delay: var(--semaphore-phase-delay, 0s) !important;
}
.object.inventSemaphoreObject.inventSemaphoreActive .inventSemaphoreLayer.ambar {
  animation: semaphoreAmberCycle 3s linear infinite !important;
  animation-delay: var(--semaphore-phase-delay, 0s) !important;
}
.object.inventSemaphoreObject.inventSemaphoreActive .inventSemaphoreLayer.verde {
  animation: semaphoreGreenCycle 3s linear infinite !important;
  animation-delay: var(--semaphore-phase-delay, 0s) !important;
}
.paranormalGhostNpc {
  width: 82px !important;
  height: 126px !important;
  transform: translate(-50%, -88%) !important;
  animation: paranormalGhostRoomWalk137 7.8s linear infinite !important;
  animation-delay: var(--paranormal-ghost-phase-delay, 0s) !important;
  will-change: transform;
}
.paranormalGhostNpc img {
  width: 82px !important;
  height: 126px !important;
  object-fit: contain !important;
}
@keyframes paranormalGhostRoomWalk137 {
  0%   { transform: translate(-50%, -88%) translate(0px, 0px); }
  12%  { transform: translate(-50%, -90%) translate(72px, -34px); }
  25%  { transform: translate(-50%, -92%) translate(156px, -6px); }
  38%  { transform: translate(-50%, -90%) translate(112px, 58px); }
  50%  { transform: translate(-50%, -88%) translate(0px, 92px); }
  63%  { transform: translate(-50%, -90%) translate(-118px, 54px); }
  76%  { transform: translate(-50%, -92%) translate(-168px, -14px); }
  88%  { transform: translate(-50%, -90%) translate(-66px, -48px); }
  100% { transform: translate(-50%, -88%) translate(0px, 0px); }
}

/* FIX139: cantidades acumuladas dentro de una misma casilla de crafteo */
.craftSlot {
  position: relative;
}
.craftSlotAmount {
  position: absolute;
  right: 4px;
  bottom: 3px;
  min-width: 22px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .92);
  color: #fff;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  pointer-events: none;
}

/* FIX143: /info arrastrable desde marco, scroll de rueda y panel de construcción de Hoja de Ruta */
.commandInfoPanel.genericDraggableConfirm,
.roadmapConstructionPanel.genericDraggableConfirm {
  resize: none !important;
  overflow: hidden !important;
  cursor: grab;
}
.commandInfoPanel.genericDraggableConfirm #genericConfirmText,
.roadmapConstructionPanel.genericDraggableConfirm #genericConfirmText {
  cursor: default;
  overscroll-behavior: contain;
}
.commandInfoPanel.genericDraggableConfirm:active,
.roadmapConstructionPanel.genericDraggableConfirm:active {
  cursor: grabbing;
}
.roadmapItem {
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.roadmapConstructionBtn {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 1000;
  background: linear-gradient(180deg, #fef08a, #facc15);
  color: #111827;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
  cursor: pointer;
  white-space: nowrap;
}
.roadmapConstructionBtn:hover {
  filter: brightness(1.06);
}
.roadmapConstructionBody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.roadmapConstructionRecipe {
  border: 2px solid rgba(15, 23, 42, .14);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.76);
}
.roadmapConstructionOption {
  display: block;
  font-size: 12px;
  margin-bottom: 8px;
  color: #0f172a;
}
.roadmapConstructionIngredients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
.roadmapConstructionIngredient {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border-radius: 12px;
  background: rgba(15, 23, 42, .06);
}
.roadmapConstructionMini {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
}
.roadmapConstructionMini .imageMini,
.roadmapConstructionMini img {
  max-width: 34px !important;
  max-height: 34px !important;
}
.roadmapConstructionIngredient span {
  font-size: 11px;
  font-weight: 900;
  color: #0f172a;
  overflow-wrap: anywhere;
}
.roadmapConstructionEmpty {
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, .06);
  font-weight: 900;
  color: #334155;
}
@media (max-width: 720px) {
  .roadmapItem {
    grid-template-columns: auto 1fr;
  }
  .roadmapConstructionBtn {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* FIX148: móvil optimizado: no contador, sala arrastrable con un dedo y zoom interno tipo fotos */
body.mobile-ui #status {
  display: none !important;
}
body.mobile-ui #roomArea,
body.mobile-ui #stageScaler,
body.mobile-ui #roomStage,
body.mobile-ui #world {
  touch-action: none !important;
}


#genericConfirmPanel.adminUsersPanel {
  width: min(720px, calc(100vw - 28px));
  max-height: min(82vh, 720px);
}

#genericConfirmPanel.adminUsersPanel #genericConfirmText {
  max-height: min(58vh, 520px);
  overflow: auto;
}

.adminUsersGrid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.adminUserRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.72);
}

.adminUserInfo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.adminUserInfo strong {
  font-size: 13px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminUserInfo span {
  font-size: 11px;
  color: rgba(226, 232, 240, 0.78);
}

.dangerSmallBtn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #ef4444, #991b1b);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.24);
  cursor: pointer;
}

.dangerSmallBtn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.dangerSmallBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .adminUserRow {
    align-items: stretch;
    flex-direction: column;
  }

  .dangerSmallBtn {
    width: 100%;
  }
}


/* Objetos especiales 732x624: ocupan 1x2 y mantienen proporción en sala/previsualización */
.object.imageObject.specialTableObjectSize,
.previewImageObject.specialTableObjectSize,
#previewIcon.imageObject.specialTableObjectSize {
  width: var(--object-w, 146px) !important;
  height: var(--object-h, 124px) !important;
}

.object.imageObject.specialTableObjectSize img,
.object.imageObject.specialTableObjectSize .tintedObjectImage,
.previewImageObject.specialTableObjectSize img,
#previewIcon.imageObject.specialTableObjectSize img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Mesas especiales 1x2: el transform lo controla JS para permitir giro normal. */

/* Slot machine casino */
.slotMachinePanel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(3px);
}

.slotMachineCard {
  position: relative;
  width: min(360px, calc(100vw - 32px));
  border-radius: 24px;
  border: 3px solid #111827;
  background:
    radial-gradient(circle at 18% 12%, rgba(254, 240, 138, 0.95), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(125, 211, 252, 0.78), transparent 28%),
    linear-gradient(180deg, #fff7ed 0%, #fde68a 48%, #f9a8d4 100%);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.38), inset 0 4px 0 rgba(255, 255, 255, 0.75);
  padding: 24px 20px 20px;
  text-align: center;
}

.slotMachineCloseBtn {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111827;
  font-size: 28px;
  line-height: 1;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: none;
}

.slotMachineCloseBtn:hover {
  background: transparent;
  color: #991b1b;
  transform: scale(1.08);
  box-shadow: none;
}

.slotMachineTitle {
  font-size: 25px;
  line-height: 1;
  font-weight: 1000;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.slotMachineSubtitle {
  font-size: 13px;
  font-weight: 800;
  color: #475569;
  margin-bottom: 18px;
}

.slotReels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #111827;
  border-radius: 18px;
  padding: 12px;
  margin: 0 auto 16px;
  border: 3px solid #0f172a;
  overflow: hidden;
}

.slotReel {
  position: relative;
  height: 74px;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: inset 0 -5px 0 rgba(15, 23, 42, 0.10);
}

.slotReel::before,
.slotReel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  z-index: 2;
  pointer-events: none;
}

.slotReel::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.16), transparent);
}

.slotReel::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.16), transparent);
}

.slotReelStrip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transform: translateY(0);
}

.slotReelStrip span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  font-size: 36px;
  line-height: 1;
}

.slotReels.spinning .slotReel:nth-child(1) .slotReelStrip {
  animation: slotReelRoll 0.42s linear infinite;
}

.slotReels.spinning .slotReel:nth-child(2) .slotReelStrip {
  animation: slotReelRoll 0.34s linear infinite;
}

.slotReels.spinning .slotReel:nth-child(3) .slotReelStrip {
  animation: slotReelRoll 0.27s linear infinite;
}

.slotReel.stopped .slotReelStrip {
  animation: none;
}

@keyframes slotReelRoll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-444px); }
}

.slotMachineResult {
  min-height: 22px;
  margin-bottom: 14px;
  color: #111827;
  font-weight: 900;
}

.slotMachineResult.win {
  color: #166534;
}

.slotMachineResult.lose {
  color: #991b1b;
}

.slotSpinBtn {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
  border: 3px solid #111827;
  background: #22c55e;
  color: #052e16;
  font-weight: 1000;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 5px 0 #14532d;
}

.slotSpinBtn:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: translateY(3px);
  box-shadow: 0 2px 0 #14532d;
}

.slotUseBubbleWorld button {
  text-transform: uppercase;
}