/* ---------- Decorar la cabaña ---------- */
.hud-decor { position: absolute; right: 30px; bottom: 150px; z-index: 2000; width: 108px; height: 108px; border-radius: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px 0 0;
  border: 4px solid #7a3a1e; background: linear-gradient(#fff1e0, #ffc99a); color: #7a3a1e; font: 800 18px var(--font);
  box-shadow: 0 6px 0 rgba(0,0,0,.22); transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.hud-decor svg { width: 62px; height: 62px; }
.hud-decor:hover { transform: translateY(-3px) rotate(3deg); }
.hud-decor:active { transform: translateY(2px) scale(.94); }
.hud-decor.on { background: linear-gradient(#fff7c8, #ffd94a); border-color: #8a5a00; box-shadow: 0 0 0 6px rgba(255,217,74,.45), 0 6px 0 rgba(0,0,0,.22); }
.hud-decor[hidden] { display: none; }

/* en modo Decorar se esconde la barra de chat y aparece el cajón */
#stage.cab-editing #chatbar { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(40px); transition: .25s; }
#stage.cab-editing #roomSvg { cursor: default; }
#stage.cab-editing .hotspot { pointer-events: none; }

/* cerrado: se esconde ENTERO por debajo (antes asomaba el título y el botón Listo) */
#cabDecor { position: absolute; left: 50%; bottom: 0; width: 1500px; transform: translateX(-50%) translateY(calc(100% + 40px)); z-index: 2100;
  padding: 18px 26px 22px; border-radius: 34px 34px 0 0; border: 5px solid #7a3a1e; border-bottom: 0; visibility: hidden;
  background: linear-gradient(#fff8ee, #f6dfc2); box-shadow: 0 -10px 30px rgba(0,0,0,.25);
  transition: transform .4s cubic-bezier(.3,1.3,.5,1), visibility 0s linear .4s; }
#cabDecor.open { transform: translateX(-50%); visibility: visible; transition: transform .4s cubic-bezier(.3,1.3,.5,1), visibility 0s; }
.cd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cd-head h2 { margin: 0; font: 800 34px var(--font); color: #7a3a1e; }
.cd-tabs { display: flex; gap: 12px; margin-bottom: 14px; }
.cd-tabs button { padding: 10px 28px; border-radius: 20px; border: 4px solid #c49a74; background: #fff; color: #7a3a1e; font: 800 24px var(--font); }
.cd-tabs button.on { background: linear-gradient(#ffb072, #ff8a4c); border-color: #7a3a1e; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.cd-list { display: flex; gap: 18px; overflow-x: auto; padding: 4px 4px 12px; }
.cd-style, .cd-furn { flex: 0 0 300px; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 22px;
  background: #fff; border: 4px solid #e2c6a6; transition: transform .15s; }
.cd-style:hover, .cd-furn:hover { transform: translateY(-4px); }
.cd-style.on { border-color: #3aa65a; box-shadow: 0 0 0 4px rgba(58,166,90,.25); }
.cd-thumb { height: 150px; border-radius: 14px; background-size: cover; background-position: center; border: 3px solid #7a3a1e; }
.cd-style b, .cd-furn b { font: 800 22px var(--font); color: #5a2a10; }
.cd-style small, .cd-furn small { font: 600 16px var(--font); color: #8a6a50; min-height: 40px; }
.cd-style .btn { align-self: stretch; }
.cd-furn { flex-basis: 200px; align-items: center; cursor: pointer; }
.cd-furn img { height: 120px; max-width: 170px; object-fit: contain; }
.cd-furn.used { opacity: .5; cursor: default; }
.cd-hint { margin: 4px 0 0; font: 600 18px var(--font); color: #8a6a50; }
.cd-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 18px; color: #7a3a1e; }
.cd-empty-ic { font-size: 74px; line-height: 1; animation: cdBob 2.4s ease-in-out infinite; }
.cd-empty b { font: 800 28px var(--font); margin: 6px 0 2px; }
.cd-empty p { max-width: 760px; margin: 4px 0; font: 600 20px var(--font); color: #8a6a50; }
.cd-empty small { font: 700 18px var(--font); color: #c0742c; }
@keyframes cdBob { 50% { transform: translateY(-8px) rotate(-4deg); } }

/* muebles colocados */
.cab-furn { position: absolute; transform: translate(-50%, -100%); pointer-events: none; user-select: none; }
.cab-furn.flip { transform: translate(-50%, -100%) scaleX(-1); }
.cab-furn.editable { pointer-events: auto; cursor: grab; filter: drop-shadow(0 0 0 transparent); }
.cab-furn.editable:hover { filter: drop-shadow(0 0 8px #fff6b0); }
.cab-furn.sel { filter: drop-shadow(0 0 6px #ffd94a) drop-shadow(0 0 12px #ffb03a); cursor: grabbing; }
#cabTools { position: absolute; z-index: 2050; transform: translate(-50%, -100%); display: flex; gap: 8px; padding: 6px; border-radius: 18px;
  background: #fff; border: 4px solid #7a3a1e; box-shadow: 0 5px 0 rgba(0,0,0,.2); }
#cabTools button { width: 52px; height: 52px; border-radius: 14px; border: 3px solid #e2c6a6; background: #fff8ee; font-size: 26px; }
#cabTools button:hover { background: #ffe2c2; }

/* con un mueble recién puesto (o mientras lo arrastras) el panel se queda en una cajita arriba a la izquierda:
   así no tapa la sala ni el mueble */
#cabDecor.mini.open { width: 360px; left: 22px; top: 150px; bottom: auto; transform: none; padding: 14px 18px; }
#cabDecor.mini .cd-head { margin: 0; gap: 10px; }
#cabDecor.mini .cd-head h2 { font-size: 30px; }
.cd-mini-btns { display: flex; gap: 8px; }

/* contador de cuántos muebles tienes de cada uno (en la tarjeta de Decorar) */
.cd-furn { position: relative; }
.cd-furn .cd-count { position: absolute; top: 8px; right: 10px; font: 800 18px var(--font); color: #fff; background: #2c8a29; border-radius: 12px; padding: 0 9px; box-shadow: 0 2px 0 #1f6b1e; }