/* ===== Laboratorio de la Dra. Maya y Puesto de Rescate de Kodi ===== */

/* ---------- diálogos ---------- */
.nt-box { display: flex; gap: 28px; width: 1180px; padding: 30px 36px; border-radius: 30px; border: 6px solid #2d5f93; font-family: var(--font);
  background: linear-gradient(160deg, #f4fbff, #d6ecfb); color: #10345f; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.nt-box.maya { border-color: #3a8a5a; background: radial-gradient(circle at 12% 15%, rgba(140,230,160,.35), transparent 50%), linear-gradient(160deg, #f6fff6, #dff3e4); color: #173a24; }
.nt-box.kodi { border-color: #c8343b; background: radial-gradient(circle at 12% 15%, rgba(255,150,150,.3), transparent 50%), linear-gradient(160deg, #fff8f6, #fde3df); color: #4a1414; }
.nt-portrait { flex: none; width: 210px; height: 260px; border-radius: 22px; background: #fff center 12% / 175% no-repeat; border: 6px solid #fff; box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.nt-box.maya .nt-portrait { background-size: 150%; background-position: center 6%; background-color: #e6f7ea; }
.nt-box.kodi .nt-portrait { background-size: cover; background-position: center; }
.nt-body { flex: 1; min-width: 0; }
.nt-name { font: 700 32px var(--font); margin-bottom: 6px; }
.nt-body p { font: 500 24px/1.42 var(--font); margin: 8px 0; }
.nt-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.nt-btns .btn { font-size: 21px; padding: 10px 20px; }
.nt-prize { display: flex; align-items: center; gap: 16px; margin: 12px 0 4px; padding: 10px 16px; border-radius: 18px; background: rgba(255,255,255,.75); border: 3px solid #8fd3ff; }
.nt-prize img { width: 130px; filter: drop-shadow(0 0 10px rgba(140,220,255,.9)); animation: ntShine 2.4s ease-in-out infinite; }
.nt-prize b { font: 700 24px var(--font); color: #1d5aa0; }
.nt-prize small { font: 500 18px var(--font); color: #3a5a80; display: block; }
@keyframes ntShine { 50% { filter: drop-shadow(0 0 22px rgba(160,235,255,1)); transform: translateY(-4px); } }

/* ---------- tablón de misiones de rescate ---------- */
.rb-box { position: relative; width: 1240px; padding: 32px 40px 36px; border-radius: 32px; border: 6px solid #c8343b; font-family: var(--font);
  background: linear-gradient(160deg, #fffaf6, #ffe6df); color: #4a1414; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.rb-box .x-btn { right: -24px; top: -24px; }
.rb-box h2 { margin: 0; font: 700 46px var(--font); color: #c8343b; }
.rb-sub { margin: 4px 0 18px; font: 500 22px var(--font); color: #8a4a4a; }
.rb-list { display: flex; flex-direction: column; gap: 16px; }
.rb-card { display: flex; align-items: center; gap: 22px; padding: 18px 22px; border-radius: 24px; background: #fff; border: 4px solid #f2c4bd; }
.rb-card.rb-doing { border-color: #ffb03a; box-shadow: 0 0 18px rgba(255,176,58,.45); }
.rb-card.rb-done { border-color: #5fcf5a; background: #f2fff0; }
.rb-card.rb-soon { opacity: .65; filter: grayscale(.4); }
.rb-ic { font-size: 70px; width: 100px; text-align: center; }
.rb-txt { flex: 1; min-width: 0; }
.rb-txt b { font: 700 30px var(--font); }
.rb-txt small { display: block; font: 600 18px var(--font); color: #a05a3a; }
.rb-txt p { margin: 6px 0; font: 500 21px/1.35 var(--font); }
.rb-steps { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-steps span { padding: 4px 12px; border-radius: 12px; background: #eaf6ff; color: #1d4e89; font: 600 17px var(--font); }
.rb-act .btn { white-space: nowrap; }
.rb-tag { padding: 8px 16px; border-radius: 14px; background: #eee; font: 700 20px var(--font); white-space: nowrap; }
.rb-tag.ok { background: #d8fbd2; color: #2c8a29; }

/* ---------- marcador del rescate ---------- */
.rescue-tracker { position: absolute; left: 24px; top: 360px; z-index: 2600; display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 22px;
  border: 4px solid #c8343b; background: linear-gradient(#fff6f4, #ffd9d2); color: #4a1414; font: 600 20px var(--font); cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.2); }
.rescue-tracker span { font-size: 26px; }

/* ---------- minijuegos de rescate (tonos de hielo) ---------- */
.mg-rescue .mg-bg { filter: brightness(.8) saturate(1.05); }
.mg-rescue .mg-pill, .mg-rescue .mg-timer { background: rgba(14,40,70,.82); border-color: #8fd8ff; color: #eaf8ff; box-shadow: 0 0 16px rgba(140,216,255,.45); }
.mg-rescue .mg-timer i { background: linear-gradient(90deg, #ff8a8a, #ffd23f 40%, #8fe8ff); }
.mg-rescue .mg-card { background: linear-gradient(160deg, rgba(22,58,96,.97), rgba(12,30,56,.97)); border-color: #8fd8ff; box-shadow: 0 0 50px rgba(140,216,255,.55); color: #eaf8ff; }
.mg-rescue .mg-card h2 { color: #bfefff; }

/* 1 · huellas */
.rg-print { position: absolute; width: 110px; pointer-events: none; transition: opacity .1s; filter: drop-shadow(0 0 8px rgba(255,255,255,.9)); animation: rgAppear .3s ease-out; }
.rg-print.got { animation: rgGot .4s ease-out forwards; }
@keyframes rgAppear { from { transform: translate(-50%, -50%) scale(.3); } }
@keyframes rgGot { to { opacity: 0; filter: drop-shadow(0 0 18px #fff) brightness(2); } }

/* 2 · bloques de hielo */
.rg-seal { position: absolute; pointer-events: none; filter: drop-shadow(0 0 20px rgba(160,235,255,.9)); }
.rg-seal.free { animation: rgFree 1.2s ease-in-out infinite; }
@keyframes rgFree { 50% { transform: translateY(-14px) rotate(-2deg); filter: drop-shadow(0 0 40px rgba(200,245,255,1)); } }
.rg-block { position: absolute; transform: translate(-50%, -50%); background: url(../assets/rescue/ice.png) center / 100% 100%; pointer-events: none; transition: transform .1s; }
.rg-block.c1::after, .rg-block.c2::after { content: ''; position: absolute; inset: 0; background: url(../assets/rescue/crack1.png) center / 100% 100%; }
.rg-block.c2::after { background-image: url(../assets/rescue/crack2.png); }
.rg-block.hit { transform: translate(-50%, -50%) scale(.92) rotate(-3deg); }
.rg-block[hidden] { display: none; }
.rg-icicle { position: absolute; width: 70px; transform: translate(-50%, -100%); pointer-events: none; filter: drop-shadow(0 0 8px rgba(200,240,255,.9)); }
.rg-icicle.pop { animation: rgGot .3s ease-out forwards; }

/* 3 · trineo */
.rg-snow { position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(circle, #fff 0 3px, transparent 4px), radial-gradient(circle, #fff 0 2px, transparent 3px);
  background-size: 140px 140px, 90px 90px; animation: rgSnow .9s linear infinite; }
@keyframes rgSnow { to { background-position: 0 140px, 40px 90px; } }
.rg-sledbox { position: absolute; left: 1000px; top: 1010px; width: 300px; transform: translate(-50%, -100%); pointer-events: none; }
.rg-sledbox img:last-child { width: 300px; display: block; }
.rg-sealride { position: absolute; left: 50%; bottom: 70px; width: 210px; transform: translateX(-50%); filter: drop-shadow(0 0 12px rgba(160,235,255,.9)); }
.rg-sledbox.hurt { animation: rgHurt .15s linear infinite; }
@keyframes rgHurt { 50% { opacity: .35; } }
.rg-ob { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.rg-ob.rock { width: 180px; }
.rg-ob.ice { width: 150px; }
.rg-ob.shard { width: 90px; animation: rgSpin 1.4s linear infinite; }
@keyframes rgSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.rg-dist { position: relative; }
.rg-dist span { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); font-size: 30px; }

/* la Dra. Maya en su laboratorio */
.lab-maya image { filter: drop-shadow(0 6px 4px rgba(0,0,0,.18)); }

/* la foquita de cristal en la misión de rescate (en vez del cubo de hielo) */
.rb-ic img.rb-foca { width: 100px; height: 100px; object-fit: contain; }