/* cards.css
   =====================================================================
   Estilos del truco "Revelacion de Carta" (pantalla de juego y control).
   Archivo separado de styles.css a proposito, para no depender de
   ediciones del fichero compartido. Reutiliza los tokens del proyecto
   (--brand1/--brand2/--line/--muted/--ink/--danger/--ok de styles.css).
   ===================================================================== */

:root {
  --card-red:   #d6213a;
  --card-black: #1f2330;
}

/* ---------- CONTROL: vista previa de la carta ---------- */
.cr-preview { width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px; border:1.6px dashed var(--line); border-radius:16px; background:#fbfbfd; }
.cr-preview-card { width:116px; aspect-ratio:5/7; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 10px 24px rgba(22,26,45,.18); display:flex; align-items:center; justify-content:center; }
.cr-preview-card svg { width:100%; height:100%; display:block; }
.cr-preview-card.empty { border:1.6px dashed var(--line); box-shadow:none; }
.cr-preview-card.empty .ph { font-size:34px; font-weight:700; color:var(--line); }
.cr-preview-hint { font-size:12px; color:var(--muted); }

/* ---------- CONTROL: seleccion de palo y valor ---------- */
.card-picker { width:100%; text-align:left; }
.card-picker-label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.suit-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.suit-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border:1.6px solid var(--line); border-radius:13px; background:#fbfbfd; cursor:pointer; font-size:15px; font-weight:600; color:var(--ink); transition:border-color .12s, box-shadow .12s, background .12s, transform .06s; }
.suit-btn .suit-sym { font-size:22px; line-height:1; }
.suit-btn.suit-red .suit-sym { color:var(--card-red); }
.suit-btn.suit-black .suit-sym { color:var(--card-black); }
.suit-btn:active { transform:translateY(1px); }
.suit-btn.sel { border-color:var(--brand1); background:#fff; box-shadow:0 0 0 4px rgba(108,92,231,.14); }
.value-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.value-btn { padding:12px 0; border:1.6px solid var(--line); border-radius:11px; background:#fbfbfd; cursor:pointer; font-size:16px; font-weight:600; color:var(--ink); transition:border-color .12s, box-shadow .12s, background .12s, transform .06s; }
.value-btn:active { transform:translateY(1px); }
.value-btn.sel { border-color:var(--brand1); background:#fff; color:var(--brand1); box-shadow:0 0 0 4px rgba(108,92,231,.14); }
.auth-status.is-error { color:var(--danger); }

/* ---------- JUEGO: pantalla de revelacion ---------- */
.cr-screen { min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:28px 18px 36px; background:linear-gradient(135deg,#eef1ff 0%,#f6f8fc 45%,#eafff5 100%); }
.cr-inner { width:100%; max-width:460px; display:flex; flex-direction:column; align-items:center; gap:22px; }
.cr-header { text-align:center; }
.cr-title { font-size:22px; font-weight:700; letter-spacing:-.2px; color:var(--ink); }
.cr-status { margin-top:6px; font-size:14px; font-weight:600; color:var(--muted); min-height:18px; }
.cr-status.is-wait  { color:var(--muted); }
.cr-status.is-ready { color:var(--brand2); }
.cr-status.is-done  { color:var(--ok); }
.cr-status.is-error { color:var(--danger); }

/* Rejilla de 6 cartas (2 filas x 3 columnas) */
.cr-grid { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }

/* Carta con giro 3D */
.cr-card { position:relative; width:100%; aspect-ratio:5/7; border:none; background:transparent; padding:0; cursor:pointer; perspective:1000px; -webkit-tap-highlight-color:transparent; }
.cr-flip { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 520ms cubic-bezier(.2,.7,.2,1); }
.cr-card.flipped .cr-flip { transform:rotateY(180deg); }
.cr-face { position:absolute; inset:0; border-radius:14px; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; box-shadow:0 8px 20px rgba(22,26,45,.16); }
.cr-face svg { width:100%; height:100%; display:block; }
.cr-back  { background:#fff; }
.cr-front { transform:rotateY(180deg); background:#fff; }
.cr-card.revealed .cr-front { box-shadow:0 10px 26px rgba(26,115,232,.25); }

/* Boton NUEVO JUEGO */
.cr-newgame { width:100%; max-width:280px; padding:15px; border:none; border-radius:13px; font-size:15px; font-weight:700; letter-spacing:.3px; color:#fff; cursor:pointer; background:linear-gradient(135deg,var(--brand1),var(--brand2)); box-shadow:0 10px 22px rgba(108,92,231,.32); transition:transform .08s, box-shadow .15s, opacity .15s; }
.cr-newgame:hover  { box-shadow:0 12px 28px rgba(108,92,231,.42); }
.cr-newgame:active { transform:translateY(1px); }
.cr-newgame[disabled] { opacity:.6; cursor:default; }

@media (max-width:380px) { .cr-grid { gap:9px; } }

/* ---------- CONTROL CON POSICION: selector de posicion (1-6) ---------- */
.pos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pos-btn { padding:14px 0; border:1.6px solid var(--line); border-radius:11px; background:#fbfbfd; cursor:pointer; font-size:16px; font-weight:700; color:var(--ink); transition:border-color .12s, box-shadow .12s, background .12s, transform .06s; }
.pos-btn:active { transform:translateY(1px); }
.pos-btn.sel { border-color:var(--brand2); background:#fff; color:var(--brand2); box-shadow:0 0 0 4px rgba(26,115,232,.14); }
.card-picker-hint { display:block; font-size:11px; color:var(--muted); margin-top:6px; }

/* Botones discretos: volver al inicio / salir completamente */
.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; }
/* Oculta el viejo botón de salir del panel de control (lo reemplaza la barra) */
#logout-btn { display:none; }

/* ---------- CONTROL "CARTAS EN ORDEN": 3 slots de seleccion ---------- */
.co-slots { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.co-slot { position:relative; border:none; background:transparent; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.co-slot-badge { position:absolute; top:-7px; left:-7px; z-index:2; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--brand1),var(--brand2)); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(108,92,231,.4); }
.co-slot-card { width:100%; aspect-ratio:5/7; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 8px 18px rgba(22,26,45,.16); display:flex; align-items:center; justify-content:center; transition:box-shadow .15s, transform .08s; }
.co-slot-card svg { width:100%; height:100%; display:block; }
.co-slot-card.empty { border:1.6px dashed var(--line); box-shadow:none; }
.co-slot-card.empty .ph { font-size:30px; font-weight:700; color:var(--line); }
.co-slot.active .co-slot-card { box-shadow:0 0 0 4px rgba(108,92,231,.18), 0 8px 18px rgba(22,26,45,.16); }
.co-slot:active .co-slot-card { transform:translateY(1px); }

/* Rejilla de 3 cartas centrada en el juego */
.cr-grid-3 { max-width:420px; margin:0 auto; }