/* ═══ 🏰 construcciones: dioramas del palacio de la memoria (todo CSS, sin imágenes) ═══
   Portado de ~/Desktop/IMAGILANG/5000 WORDS ENGLISH (mismas 4 obras de fantasía:
   Castillo, Torre del Mago, Bosque Encantado, Guarida del Dragón). Variables
   adaptadas a las de esta web (var(--line)→var(--border), var(--text-2)→var(--text2)). */
main>#v-construcciones{max-width:980px}

.obra-select{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.obra-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;
  border:2px solid var(--border);border-radius:14px;background:#fff;cursor:pointer;transition:.15s;
  width:100px;flex:0 0 auto}
.obra-chip .oc-emo{font-size:1.4rem;line-height:1}
.obra-chip b{font-size:.74rem;color:var(--text);text-align:center;line-height:1.15;overflow-wrap:anywhere}
.obra-chip small{font-size:.66rem;color:var(--text2)}
.obra-chip:hover:not(.on):not(.lock){border-color:var(--purple)}
.obra-chip.on{border-color:var(--purple);background:rgba(124,58,237,.08)}
.obra-chip.lock{opacity:.5;cursor:default}

.diorama{position:relative;width:100%;height:250px;border-radius:18px;overflow:hidden;
  box-shadow:inset 0 -26px 36px rgba(0,0,0,.06);margin:2px 0 12px;display:none}
.diorama.on{display:block}
.pz{position:absolute;opacity:.16;filter:grayscale(1) brightness(.35);
  transition:opacity .5s ease,filter .5s ease}
.pz.built{opacity:1;filter:none;animation:pzPop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes pzPop{0%{transform:scale(.6) translateY(12px)}100%{transform:scale(1) translateY(0)}}
.pz-suelo{left:0;right:0;bottom:0;height:56px;width:100%}

/* ═══ piezas reutilizables entre escenarios (cohesión visual) ═══ */
/* agua con reflejo ondulado */
.pz-agua{overflow:hidden;background:rgba(59,130,246,.32)}
.pz-agua::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(100deg,rgba(255,255,255,.22) 0 3px,transparent 3px 22px)}
/* muro almenado */
.pz-muralla{background:linear-gradient(#d6d3d1,#a8a29e)}
.pz-muralla::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px;
  background:repeating-linear-gradient(90deg,#a8a29e 0 14px,transparent 14px 22px)}
/* estandarte: tela con muesca + asta */
.pz-estandarte .e-asta{position:absolute;top:0;left:0;width:4px;height:100%;background:#451a03}
.pz-estandarte .e-tela{position:absolute;top:6px;left:4px;right:0;height:70%;
  background:linear-gradient(#dc2626,#991b1b);clip-path:polygon(0 0,100% 0,80% 50%,100% 100%,0 100%)}
/* antorcha: mango + llama parpadeante */
.pz-antorcha .a-mango{position:absolute;bottom:0;left:50%;width:8px;height:60%;
  background:linear-gradient(#78350f,#451a03);transform:translateX(-50%);border-radius:2px}
.pz-antorcha .a-llama{position:absolute;top:0;left:50%;width:18px;height:24px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 40% 30%,#fef08a,#f97316,#dc2626);transform:translateX(-50%);
  box-shadow:0 0 16px rgba(249,115,22,.8);animation:llamaFlick 1.2s ease-in-out infinite}
@keyframes llamaFlick{0%,100%{transform:translateX(-50%) scale(1) rotate(-2deg)}50%{transform:translateX(-50%) scale(1.08) rotate(3deg)}}
/* cristales: rombos que brillan */
.pz-cristales span{position:absolute;bottom:0;clip-path:polygon(50% 0,100% 35%,80% 100%,20% 100%,0 35%);
  background:linear-gradient(#67e8f9,#0891b2);box-shadow:0 0 14px rgba(34,211,238,.7)}
/* dragón silueta: cuerpo serpenteante con cuernos y ojos */
.pz-dragon-silu .d-cuerpo{position:absolute;inset:0;border-radius:50% 50% 60% 20%/60% 60% 30% 40%;
  background:linear-gradient(135deg,#16a34a,#065f46);box-shadow:0 0 26px rgba(34,197,94,.35)}
.pz-dragon-silu .d-cuerno{position:absolute;top:-10px;left:18%;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:18px solid #065f46}
.pz-dragon-silu .d-ojo{position:absolute;top:22%;left:26%;width:8px;height:8px;border-radius:50%;
  background:#fde047;box-shadow:0 0 6px #fde047}
/* árbol: tronco + copa (reutilizado en Bosque Encantado) */
.pz-jcArbol{bottom:50px;left:14%;width:120px;height:130px}
.pz-jcArbol .a-trunk{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:16px;height:58px;
  background:linear-gradient(#8a5a2b,#6b4423);border-radius:4px}
.pz-jcArbol .a-canopy{position:absolute;top:0;left:50%;transform:translateX(-50%);width:112px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fce7f3,#f9a8d4);
  box-shadow:-30px 18px 0 -10px #f9a8d4,32px 12px 0 -8px #fbcfe8,0 -16px 0 -12px #fda4d8}

/* ═══ DIORAMAS FANTASÍA MEDIEVAL ═══ */

/* 🏰 El Castillo (día heroico) */
.dio-castle{background:linear-gradient(#bfdbfe,#dbeafe 55%,#eff6ff)}
.dio-castle::before{content:"";position:absolute;top:18px;right:26px;width:40px;height:40px;
  border-radius:50%;background:radial-gradient(circle,#fff7d6,#fde047);box-shadow:0 0 30px 6px rgba(253,224,71,.5)}
.caGrass{background:linear-gradient(#86efac,#4ade80)}
.caMoat{bottom:48px;left:0;right:0;width:100%;height:22px}
.caWall{bottom:56px;left:12%;width:120px;height:46px}
.caBanner{top:16px;right:20%;width:30px;height:60px}
.pz-keep{bottom:56px;left:50%;transform:translateX(-50%);width:110px;height:120px}
.pz-keep .k-body{position:absolute;bottom:0;left:15%;right:15%;height:78%;
  background:linear-gradient(#d6d3d1,#9ca3af);border-radius:4px 4px 0 0}
.pz-keep .k-batt{position:absolute;top:18%;left:15%;right:15%;height:12px;
  background:repeating-linear-gradient(90deg,#9ca3af 0 12px,transparent 12px 22px)}
.pz-keep .k-door{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:26px;height:34px;background:#7c3f22;border-radius:13px 13px 0 0}
.pz-keep .k-turret{position:absolute;bottom:20%;width:26px;height:64%;
  background:linear-gradient(#e5e7eb,#9ca3af);border-radius:5px 5px 0 0}
.pz-keep .k-turret.l{left:0}.pz-keep .k-turret.r{right:0}
.pz-keep .k-turret::before{content:"";position:absolute;top:-10px;left:-3px;right:-3px;height:12px;
  background:#dc2626;clip-path:polygon(0 100%,50% 0,100% 100%)}
.pz-keep .k-flag{position:absolute;top:-14px;left:50%;width:22px;height:14px;
  background:#dc2626;clip-path:polygon(0 0,100% 0,80% 50%,100% 100%,0 100%)}

/* 🧙 La Torre del Mago (crepúsculo mágico) */
.dio-wizard{background:linear-gradient(#4c1d95,#6d28d9 55%,#a78bfa)}
.dio-wizard::before{content:"";position:absolute;top:16px;left:26px;width:34px;height:34px;
  border-radius:50%;background:radial-gradient(circle at 60% 40%,#fef9c3,#e9d5ff);
  box-shadow:0 0 28px 5px rgba(233,213,255,.5)}
.wzGround{background:linear-gradient(#4ade80,#16a34a)}
.pz-wtower{bottom:56px;left:50%;transform:translateX(-50%);width:56px;height:120px;
  background:linear-gradient(90deg,#78716c,#a8a29e 45%,#78716c);border-radius:6px 6px 0 0}
.pz-wtower::before{content:"";position:absolute;inset:0;border-radius:6px 6px 0 0;
  background:repeating-linear-gradient(#0000 0 20px,rgba(0,0,0,.14) 20px 23px)}
.pz-wwindow{bottom:96px;left:50%;transform:translateX(-50%);width:20px;height:30px;
  border-radius:10px 10px 0 0;background:radial-gradient(circle at 50% 40%,#fde047,#f59e0b);
  box-shadow:0 0 16px rgba(253,224,71,.9)}
.pz-wroof{bottom:172px;left:50%;transform:translateX(-50%);width:80px;height:60px}
.pz-wroof .wr-cone{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:0;
  border-left:40px solid transparent;border-right:40px solid transparent;border-bottom:56px solid #6d28d9}
.pz-wroof .wr-star{position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  font-size:0;width:12px;height:12px;background:#fde047;box-shadow:0 0 10px #fde047;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.pz-worb{top:30px;right:16%;width:60px;height:60px}
.pz-worb span{position:absolute;width:8px;height:8px;border-radius:50%;background:#fde047;
  box-shadow:0 0 8px #fde047;animation:orbFloat 2.6s ease-in-out infinite}
.pz-worb .o1{top:0;left:20%}.pz-worb .o2{top:30%;left:70%;animation-delay:.5s}
.pz-worb .o3{top:60%;left:10%;animation-delay:1s}.pz-worb .o4{top:50%;left:50%;animation-delay:1.5s}
@keyframes orbFloat{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-8px);opacity:1}}

/* 🌲 El Bosque Encantado (día verde mágico) */
.dio-forest{background:linear-gradient(#bbf7d0,#86efac 55%,#4ade80)}
.dio-forest::before{content:"";position:absolute;top:18px;right:28px;width:40px;height:40px;
  border-radius:50%;background:radial-gradient(circle,#fff7d6,#fde047);box-shadow:0 0 30px 6px rgba(253,224,71,.45)}
.foGround{background:linear-gradient(#4ade80,#15803d)}
.foTrees{bottom:52px;left:12%;width:80px;height:96px;filter:hue-rotate(140deg) saturate(1.1)}
.pz-shroom{bottom:54px;left:42%;width:44px;height:34px}
.pz-shroom .sh{position:absolute;bottom:0;width:16px;height:20px}
.pz-shroom .sh::before{content:"";position:absolute;bottom:0;left:35%;width:5px;height:12px;
  background:#fef3c7;border-radius:3px}
.pz-shroom .sh::after{content:"";position:absolute;top:0;left:0;width:16px;height:11px;
  border-radius:50% 50% 40% 40%;background:radial-gradient(circle at 40% 40%,#f87171,#dc2626);
  box-shadow:inset 2px 1px 0 rgba(255,255,255,.6)}
.pz-shroom .sh.a{left:0}.pz-shroom .sh.b{right:0;transform:scale(.8)}
.pz-flies{inset:0}
.pz-flies span{position:absolute;width:6px;height:6px;border-radius:50%;background:#fde047;
  box-shadow:0 0 8px 2px rgba(253,224,71,.9);animation:orbFloat 3s ease-in-out infinite}
.pz-flies span:nth-child(1){top:34%;left:30%}.pz-flies span:nth-child(2){top:50%;left:55%;animation-delay:.6s}
.pz-flies span:nth-child(3){top:26%;left:66%;animation-delay:1.2s}.pz-flies span:nth-child(4){top:60%;left:38%;animation-delay:1.8s}
.pz-flies span:nth-child(5){top:42%;left:82%;animation-delay:2.4s}
.pz-bigtree{bottom:50px;right:8%;width:120px;height:130px}
.pz-bigtree .bt-trunk{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:22px;height:56px;background:linear-gradient(#8a5a2b,#5b3a1a);border-radius:4px}
.pz-bigtree .bt-canopy{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:120px;height:92px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#86efac,#16a34a);
  box-shadow:-32px 20px 0 -12px #22c55e,34px 14px 0 -10px #4ade80,0 -14px 0 -14px #86efac}

/* 🐉 La Guarida del Dragón (cueva oscura) */
.dio-dragonlair{background:linear-gradient(#020617,#111827 65%,#312e81)}
.dlFloor{background:linear-gradient(#292524,#0c0a09)}
.dlTorchL{bottom:58px;left:12%;width:22px;height:50px}
.dlCrystals{bottom:56px;right:14%;width:60px;height:36px}
.dlCrystals .c1{left:0;width:16px;height:26px}.dlCrystals .c2{left:20px;width:20px;height:36px}
.dlCrystals .c3{left:42px;width:14px;height:22px}
.pz-treasure{bottom:52px;left:44%;width:70px;height:34px}
.pz-treasure .t-pile{position:absolute;bottom:0;left:0;right:0;height:22px;
  border-radius:50% 50% 20% 20%;background:linear-gradient(#fde047,#d97706);
  box-shadow:0 0 16px rgba(253,224,71,.6)}
.pz-treasure .t-c{position:absolute;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fef9c3,#f59e0b);border:1px solid #b45309}
.pz-treasure .t-c.a{bottom:18px;left:14%}.pz-treasure .t-c.b{bottom:22px;left:44%}
.pz-treasure .t-c.c{bottom:16px;right:16%}
.dlDragon{top:12px;left:50%;transform:translateX(-50%);width:150px;height:100px}

/* ═══ lista de piezas y barra de progreso ═══ */
.piezas-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pieza{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);
  border-radius:14px;background:#fff;cursor:pointer;text-align:left;transition:.15s;box-shadow:var(--shadow)}
.pieza:not([disabled]):hover{border-color:var(--purple);transform:translateY(-2px)}
.pieza[disabled]{cursor:default;opacity:.8}
.pieza .pz-emo{font-size:1.6rem;line-height:1}
.pieza .pz-info{display:flex;flex-direction:column}
.pieza .pz-info b{font-size:.9rem;color:var(--text)}
.pieza .pz-info small{font-size:.72rem;color:#B45309;font-weight:800}
.pieza.done .pz-info small{color:var(--green)}
.gp-bar{height:10px;border-radius:99px;background:rgba(124,58,237,.14);overflow:hidden}
.gp-bar>div{height:100%;min-width:6px;background:var(--purple);border-radius:99px;transition:width .4s ease}

/* chispas de celebración al construir una pieza */
.chispa{position:fixed;z-index:96;pointer-events:none;font-size:1.4rem;left:50%;top:50%;
  animation:chispaFly .85s ease-out forwards}
@keyframes chispaFly{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .pz.built,.pz-antorcha .a-llama,.pz-worb span,.pz-flies span,.chispa{animation:none}
}