/* ===== El Centro en obras: materiales, barra global, Top Obrero y el Capataz ===== */

/* materiales por el suelo (Cueva y Bosque) */
.obra-drop { position: absolute; transform: translate(-50%, -78%); cursor: pointer; pointer-events: auto; animation: obraBob 2.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(255,214,90,1)) drop-shadow(0 0 22px rgba(255,180,40,.8)); }
.obra-drop img { width: 100%; display: block; }
/* cartelito amarillo encima: se ve que es para la obra */
.obra-drop i { position: absolute; left: 50%; top: -58px; transform: translateX(-50%); font-style: normal; font-size: 40px; line-height: 1;
  padding: 4px 8px; border-radius: 14px; background: #ffd23f; border: 4px solid #4a2a00; box-shadow: 0 4px 0 rgba(0,0,0,.25); animation: obraPing 1.6s ease-in-out infinite; }
.obra-drop i::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -8px; border: 8px solid transparent; border-top-color: #4a2a00; }
.obra-drop.got { animation: obraGot .5s ease-out forwards; pointer-events: none; }
@keyframes obraBob { 50% { translate: 0 -8px; } }
@keyframes obraPing { 50% { transform: translateX(-50%) scale(1.15); } }
@keyframes obraGot { to { transform: translate(-50%, -160%) scale(.4); opacity: 0; } }

/* bolsa de materiales (en cualquier sala) */
#obraBag { position: absolute; left: 24px; top: 330px; z-index: 2600; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 20px;
  border: 4px solid #6a4a1a; background: linear-gradient(#ffe8a8, #ffbe4a); color: #4a2a00; font: 700 22px var(--font); cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.25);
  animation: obraIn .4s cubic-bezier(.3,1.5,.5,1); }
#obraBag span { font-size: 28px; }
#obraBag b { padding: 2px 10px; border-radius: 12px; background: rgba(255,255,255,.7); }
@keyframes obraIn { from { transform: scale(.5); opacity: 0; } }

/* barra global de la obra (en el Centro) */
#obraBar { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); z-index: 2500; width: 720px; padding: 12px 22px 12px; border-radius: 22px; cursor: pointer;
  background: linear-gradient(#fff8e6, #ffe2a8); border: 5px solid #6a4a1a; color: #4a2a00; font-family: var(--font); box-shadow: 0 8px 0 rgba(0,0,0,.25), 0 0 0 4px rgba(255,255,255,.5);
  background-image: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,190,40,.18) 22px 44px), linear-gradient(#fff8e6, #ffe2a8); }
.ob-head { display: flex; align-items: center; gap: 10px; font: 700 26px var(--font); }
.ob-head span { margin-left: auto; padding: 2px 12px; border-radius: 12px; background: #4a2a00; color: #ffd23f; font-size: 22px; }
.ob-track { position: relative; height: 26px; margin: 8px 0 6px; border-radius: 13px; overflow: hidden; border: 3px solid #6a4a1a;
  background: repeating-linear-gradient(-45deg, #2a2a2a 0 14px, #ffcc22 14px 28px); }
.ob-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; background: linear-gradient(90deg, #3fae3b, #9cf09a); box-shadow: 0 0 12px rgba(120,255,120,.7); transition: width .8s; }
.ob-track i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%) -100% 0 / 200% 100% no-repeat; animation: obShine 2.4s linear infinite; }
@keyframes obShine { to { background-position: 200% 0; } }
.ob-track.done i { background: linear-gradient(90deg, #ffd23f, #fff3a0); }
#obraBar small, .obb-bar small { font: 600 17px var(--font); color: #6a4a1a; }

/* el Capataz habla */
.nt-box.capataz { border-color: #c87a10; background: radial-gradient(circle at 12% 15%, rgba(255,200,80,.35), transparent 50%),
  repeating-linear-gradient(-45deg, transparent 0 26px, rgba(255,190,40,.10) 26px 52px), linear-gradient(160deg, #fffaf0, #ffe9c4); color: #3a2400; }
.nt-box.capataz .nt-portrait { background-size: 128%; background-position: center 4%; background-color: #ffe7b0; }
.nt-box.capataz .obb-bar { margin: 10px 0 2px; padding: 10px 16px; border-radius: 16px; background: rgba(255,255,255,.75); border: 3px solid #e0a040; }
.obra-prize { display: flex; align-items: center; gap: 18px; margin: 12px 0 4px; padding: 8px 18px; border-radius: 18px; background: rgba(255,255,255,.8); border: 3px solid #e0a040; }
.op-bear { width: 120px; height: 170px; flex: none; }
.op-bear svg { width: 100%; height: 100%; overflow: visible; }
.obra-prize b { display: block; font: 700 23px var(--font); color: #8a4a00; }
.obra-prize small { display: block; margin-top: 4px; font: 600 17px var(--font); color: #6a4a1a; }

/* cartel Top Obrero */
#obraBoard .obb-box { position: relative; width: 760px; padding: 26px 34px 24px; border-radius: 28px; font-family: var(--font); color: #3a2400; border: 6px solid #6a3a10;
  background: linear-gradient(#f4d39a, #e2b06a); box-shadow: 0 14px 0 rgba(0,0,0,.25), inset 0 0 0 6px rgba(255,255,255,.25); }
#obraBoard .obb-box::before { content: ''; position: absolute; inset: 10px; border-radius: 20px; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 46px, rgba(110,60,20,.12) 46px 49px); }
#obraBoard h2 { margin: 0; text-align: center; font: 700 44px var(--font); color: #5a2a00; text-shadow: 0 3px 0 rgba(255,255,255,.5); }
.obb-sub { margin: 2px 0 10px; text-align: center; font: 600 19px var(--font); color: #6a4a1a; }
#obraBoard .obb-bar { padding: 10px 16px; border-radius: 16px; background: rgba(255,250,235,.9); border: 3px solid #a06a2a; }
.obb-list { list-style: none; margin: 14px 0 8px; padding: 0; display: grid; gap: 6px; position: relative; }
.obb-list li { display: flex; align-items: center; gap: 12px; padding: 6px 14px; border-radius: 14px; background: rgba(255,250,235,.85); font: 600 22px var(--font); }
.obb-list li.me { background: #fff1b0; box-shadow: 0 0 0 3px #f2b51c; }
.obb-list li.empty { justify-content: center; }
.obb-n { width: 40px; text-align: center; font-weight: 700; }
.obb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obb-me { position: relative; margin: 6px 0 0; text-align: center; font: 600 19px var(--font); color: #5a2a00; }