/* invisible.css — Baraja Invisible (la carta nombrada aparece boca abajo) */

/* Barra de salida (igual que el resto de efectos) */
.exit-bar { position:fixed; top:10px; right:10px; display:flex; gap:8px; z-index:60; }
.exit-btn { font-size:12px; font-weight:600; padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--muted); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.exit-btn:active { transform:translateY(1px); }
.exit-btn.danger { color:var(--danger); border-color:#f3c9d2; }
#logout-btn { display:none; }

/* ===================== JUEGO (mesa) ===================== */
.iv-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 30%, #14532d 0%, #0b3a1e 45%, #062313 80%, #03130a 100%); color:#e9e2c8; overflow:hidden; }
.iv-screen .exit-btn { background:rgba(8,40,22,.85); color:#9fc0a8; border-color:#1e5a36; }
.iv-inner { width:100%; max-width:560px; padding:20px 12px 36px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.iv-title { font-family:Georgia, "Times New Roman", serif; font-size:19px; font-weight:700; letter-spacing:5px; margin:0; color:#d9c98a; text-transform:uppercase; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.iv-status { font-size:14px; color:#b9d3bf; margin:0; min-height:20px; font-style:italic; transition:color .3s; }
.iv-status.is-ready { color:#ffd977; }
.iv-status.is-done  { color:#7ce8a9; font-weight:700; font-style:normal; }
.iv-status.is-error { color:#ff8d8d; }

/* Mesa de juego */
.iv-table { position:relative; width:100%; height:360px; }

/* Silueta de la baraja invisible (punto de partida) */
.iv-ghost { position:absolute; left:50%; top:50%; width:76px; aspect-ratio:5/7; transform:translate(-50%,-50%); border:2px dashed rgba(217,201,138,.55); border-radius:9px; background:rgba(217,201,138,.06); cursor:pointer; display:flex; align-items:center; justify-content:center; animation:ivGhost 2.4s ease-in-out infinite; }
.iv-ghost span { font-size:26px; color:rgba(217,201,138,.75); font-family:Georgia,serif; }
@keyframes ivGhost { 0%,100% { box-shadow:0 0 0 0 rgba(217,201,138,.0); } 50% { box-shadow:0 0 24px 4px rgba(217,201,138,.28); } }

/* Cartas */
.iv-card { position:absolute; left:50%; top:50%; width:64px; aspect-ratio:5/7; margin:0; padding:0; border:none; background:transparent; cursor:default; perspective:700px; transform:translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) rotate(var(--rot,0deg)) scale(var(--sc,1)); transition:transform .75s cubic-bezier(.25,.8,.3,1); transition-delay:var(--md,0s); z-index:var(--z,1); opacity:0; }
.iv-card.show { opacity:1; }
.iv-card .iv-in { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .55s ease; transition-delay:var(--fd,0s); }
.iv-card.flip .iv-in { transform:rotateY(180deg); }
.iv-card .iv-back, .iv-card .iv-face { position:absolute; inset:0; border-radius:6px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 4px 10px rgba(0,0,0,.45); background:#fff; }
.iv-card .iv-face { transform:rotateY(180deg); }
.iv-card svg { width:100%; height:100%; display:block; }

/* La carta que no se voltea: llama a que la toquen */
.iv-card.hold { cursor:pointer; animation:ivHold 1.5s ease-in-out infinite; }
@keyframes ivHold {
  0%,100% { filter:drop-shadow(0 0 4px rgba(255,217,119,.35)); }
  50%     { filter:drop-shadow(0 0 16px rgba(255,217,119,.95)); }
}

/* Revelación: vuela al centro y crece (los vars los pone el JS) */
.iv-card.reveal { animation:none; filter:drop-shadow(0 0 26px rgba(255,217,119,.85)); transition:transform .8s cubic-bezier(.3,.9,.3,1); }

/* Botones */
.iv-new { font-size:14px; font-weight:800; letter-spacing:2px; padding:13px 38px; border-radius:14px; border:1px solid #d9c98a; background:linear-gradient(135deg,#14532d,#0b3a1e); color:#e9dfb4; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.45); }
.iv-new:active { transform:translateY(1px); }
.iv-new:disabled { opacity:.4; cursor:default; }