/* LA MUESTRA VIVA · GRUPO PIEZA — la baraja y el espejo de las casas
   de objeto (Velas, Camisas, Foto, Joyería, Mascotas).
   El kit compartido .mv-* vive en casas.css; aquí solo lo de la
   pieza: la baraja que se toca, el objeto compuesto y sus controles.
   La baraja también viste la sala fuera del chat (.baraja). */

/* ---------- LA BARAJA (en la escena y en la sala) ---------- */
.pz-baraja{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:4px 0 2px}
.pz-carta{appearance:none;text-align:left;border:1px solid rgba(255,255,255,.18);background:var(--s1);color:rgba(255,250,238,.92);padding:10px 10px 9px;cursor:pointer;min-height:44px;font:400 12.5px/1.4 var(--sans)}
.pz-carta b{display:block;font:italic 400 15px/1.25 var(--serif);color:rgba(255,250,238,.97);margin-bottom:3px}
.pz-carta span{color:var(--texto-2);font-size:11.5px;line-height:1.4;display:block}
.pz-carta[aria-pressed="true"]{border-color:var(--ac);background:var(--s2)}
.pz-carta:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* la baraja como sección de la sala */
.baraja{padding:8px 20px 4px}
.barajabox{width:min(680px,100%);margin:0 auto;border:1px solid var(--line);background:var(--s1);background:var(--flotante-fondo);backdrop-filter:var(--flotante-difuminado);-webkit-backdrop-filter:var(--flotante-difuminado);padding:clamp(20px,4vw,32px)}
.baraja__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-top:14px}
.baraja__carta{border:1px solid rgba(255,255,255,.14);background:var(--s1);padding:14px 13px 12px}
.baraja__carta h3{margin:0;font:italic 400 17px/1.3 var(--serif);color:rgba(255,250,238,.96)}
.baraja__carta p{margin:5px 0 0;font:400 12.5px/1.5 var(--sans);color:var(--texto-2)}
.baraja__carta--cero{border-style:dashed}
.baraja__nota{margin:14px 0 0;font:400 13.5px/1.6 var(--sans);color:rgba(255,255,255,.62)}
.baraja__nota a{color:var(--ac-soft)}

/* ---------- controles del espejo ---------- */
.pz-ctl{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.pz-ctl .mv-qchip[aria-pressed="true"]{background:var(--ac);color:#17100a;border-color:var(--ac)}
.pz-campos{display:grid;gap:8px;margin-top:10px}
.pz-campos label{font:500 9px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ac-soft);display:block}
.pz-campos input[type="text"],.pz-campos textarea{width:100%;box-sizing:border-box;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);font:400 14px/1.45 var(--sans);padding:10px 12px;min-height:44px;margin-top:4px}
.pz-campos textarea{resize:vertical;min-height:64px}
.pz-campos input:focus,.pz-campos textarea:focus{outline:none;border-color:var(--ac)}
.pz-cuenta{font:400 11px/1.4 var(--sans);color:var(--texto-2);letter-spacing:.04em;text-transform:none}
.pz-subir{display:inline-flex;align-items:center;gap:8px;border:1px dashed rgba(255,255,255,.35);color:rgba(255,250,238,.9);font:500 12.5px/1 var(--sans);padding:12px 14px;cursor:pointer;min-height:44px;background:transparent}
.pz-subir:hover{border-color:var(--ac)}
.pz-subir input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pz-aviso{margin:10px 0 0;font:italic 400 13px/1.55 var(--serif);color:var(--texto-2)}

/* ---------- LA VELA compuesta ---------- */
.pz-vela{display:flex;justify-content:center;padding:8px 0 2px}
.pz-vela svg{width:min(230px,62vw);height:auto;display:block}
.pz-vela__txt{font-family:var(--serif);fill:#2c2416}
.pz-vela__motivo{stroke:#8a6d1f;fill:none;stroke-width:1.4}

/* ---------- LA PRENDA y la taza ---------- */
.pz-prenda{display:flex;justify-content:center;padding:6px 0 2px}
.pz-prenda svg{width:min(280px,74vw);height:auto;display:block}
.pz-prenda__txt{font-family:var(--sans);font-weight:600;fill:#2c2416}

/* ---------- LA FOTO en tu pared ---------- */
.pz-pared{position:relative}
.pz-pared canvas{width:100%;height:auto;display:block;background:#14100c;border:1px solid rgba(255,255,255,.14);touch-action:none}
.pz-pared__vacio{border:1px dashed rgba(255,255,255,.3);padding:20px 16px;text-align:center;color:rgba(255,255,255,.6);font:italic 400 14px/1.55 var(--serif)}

/* ---------- LA JOYERÍA: tarjeta + dije ---------- */
.pz-joya{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start}
@media(max-width:560px){.pz-joya{grid-template-columns:1fr}}
.pz-tarjeta{background:#f2ead6;color:#211a11;padding:18px 18px 16px;box-shadow:0 14px 30px rgba(0,0,0,.45);min-height:150px}
.pz-tarjeta__oc{margin:0;font:600 8.5px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--papel-dorado)}
.pz-tarjeta__msg{margin:10px 0 0;font:italic 400 16.5px/1.55 var(--serif);white-space:pre-wrap}
.pz-tarjeta__firma{margin:10px 0 0;font:400 12px/1.5 var(--sans);color:var(--papel-apoyo)}
.pz-dije{display:flex;flex-direction:column;align-items:center;gap:6px}
.pz-dije svg{width:132px;height:auto;display:block}
.pz-grab{font-family:'Tangerine','Snell Roundhand',cursive;font-weight:700;fill:#f4e9cf;text-anchor:middle}
.pz-dije__cap{font:400 11px/1.45 var(--sans);color:var(--texto-2);text-align:center;max-width:150px;margin:0}

/* ---------- LA MASCOTA: el retrato compuesto ---------- */
.pz-retrato{display:flex;justify-content:center;padding:6px 0 2px}
.pz-retrato__marco{position:relative;width:min(280px,76vw);aspect-ratio:4/5;background:#241c12;border:10px solid #2c241a;box-shadow:0 16px 32px rgba(0,0,0,.55);overflow:hidden}
.pz-retrato__marco--rey{border-color:#6d5518;outline:2px solid rgba(212,175,55,.5);outline-offset:-6px}
.pz-retrato__marco--acuarela{border-color:#e8e0cc;background:#efe8d6}
.pz-retrato__marco--caricatura{border-color:#3a3a3a;border-radius:14px}
.pz-retrato__marco img{width:100%;height:100%;object-fit:cover;display:block}
.pz-retrato__marco--acuarela img{filter:saturate(1.35) contrast(.92) brightness(1.06)}
.pz-retrato__marco--caricatura img{filter:saturate(1.7) contrast(1.12)}
.pz-retrato__marco--rey img{filter:saturate(1.1) contrast(1.05)}
.pz-retrato__vacio{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;font:italic 400 14.5px/1.55 var(--serif);color:var(--texto-cuerpo)}
.pz-retrato__corona{position:absolute;top:8px;left:50%;transform:translateX(-50%) rotate(-6deg);width:74px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.pz-retrato__nombre{position:absolute;left:0;right:0;bottom:0;padding:16px 10px 8px;text-align:center;font:italic 400 17px/1.25 var(--serif);color:#f4eedd;background:linear-gradient(transparent,rgba(10,8,4,.72))}