/* acaan.css — ACAAN Digital (Any Card At Any Number) */

/* 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 (tapete de casino) ===================== */
.ac-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 30%, #14683c 0%, #0c4a2a 55%, #062818 100%); color:#eafbf0; }
.ac-inner { width:100%; max-width:560px; padding:24px 18px 36px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.ac-title { font-size:20px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; margin:0; color:#d9c98a; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.ac-status { font-size:14px; color:#bfe8cd; margin:0; min-height:20px; }
.ac-status.is-hit  { color:#ffd977; font-weight:700; }
.ac-status.is-error{ color:#ff9aa8; }

/* Escenario: mazo + carta repartida */
.ac-stage { display:flex; align-items:flex-start; justify-content:center; gap:26px; width:100%; }
.ac-pile { display:flex; flex-direction:column; align-items:center; gap:10px; }
.ac-pile-label { font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:#9ecfb0; }

/* Mazo (tocable) */
.ac-deck { position:relative; width:126px; height:176px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ac-deck .ac-back { position:absolute; inset:0; border-radius:10px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.45); transition:transform .15s; }
.ac-deck .ac-back svg { width:100%; height:100%; display:block; }
.ac-deck .b1 { transform:translate(-5px,5px) rotate(-2deg); }
.ac-deck .b2 { transform:translate(3px,2px) rotate(1.4deg); }
.ac-deck .b3 { transform:translate(0,0); }
.ac-deck:active .b3 { transform:translateY(2px); }
.ac-deck.empty { opacity:.35; cursor:default; }
.ac-count { position:absolute; bottom:-4px; right:-6px; min-width:30px; padding:3px 7px; border-radius:12px; background:#062818; border:1px solid #2c7a4e; color:#bfe8cd; font-size:12px; font-weight:700; z-index:5; }

/* Mezcla: las cartas del mazo se cruzan rápidamente */
.ac-deck.shuffling .b1 { animation:acShuf1 .3s ease-in-out 4; }
.ac-deck.shuffling .b2 { animation:acShuf2 .3s ease-in-out 4; }
.ac-deck.shuffling .b3 { animation:acShuf3 .3s ease-in-out 4; }
@keyframes acShuf1 { 50% { transform:translate(-34px,-6px) rotate(-10deg); } }
@keyframes acShuf2 { 50% { transform:translate(34px,4px) rotate(9deg); } }
@keyframes acShuf3 { 50% { transform:translate(0,-14px) rotate(2deg); } }

/* Carta repartida */
.ac-dealt { position:relative; width:150px; height:210px; perspective:900px; }
.ac-dealt .ac-face { position:absolute; inset:0; border-radius:12px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.5); backface-visibility:hidden; }
.ac-dealt .ac-face svg { width:100%; height:100%; display:block; }
.ac-dealt .ac-slot { position:absolute; inset:0; border-radius:12px; border:2px dashed rgba(190,232,205,.4); display:flex; align-items:center; justify-content:center; color:#9ecfb0; font-size:13px; padding:10px; }
.ac-dealt.flip .ac-face { animation:acFlip .5s ease-out; }
@keyframes acFlip { 0% { transform:rotateY(90deg) scale(.9); } 100% { transform:rotateY(0) scale(1); } }

/* Impacto: la carta nombrada en la posición nombrada */
.ac-dealt.hit .ac-face { animation:acHit 1.1s ease forwards; }
@keyframes acHit {
  0%   { transform:rotateY(90deg) scale(.9); }
  45%  { transform:rotateY(0) scale(1.12); }
  100% { transform:rotateY(0) scale(1.05); box-shadow:0 0 26px rgba(255,217,119,.95), 0 0 60px rgba(255,196,60,.55); }
}

/* Contador de posición */
.ac-pos { font-size:15px; color:#bfe8cd; min-height:22px; }
.ac-pos b { color:#ffd977; font-size:20px; }

/* Botones del juego */
.ac-actions { display:flex; gap:12px; }
.ac-btn { font-size:13px; font-weight:700; letter-spacing:.6px; padding:11px 22px; border-radius:12px; border:1px solid rgba(217,201,138,.45); background:rgba(217,201,138,.14); color:#eadfb4; cursor:pointer; }
.ac-btn:active { transform:translateY(1px); }
.ac-btn[disabled] { opacity:.45; cursor:default; }

/* Pase rápido de memorización (tras cada mezcla): las cartas se
   muestran boca arriba una a una y caen boca abajo, tan rápido que
   apenas se reconocen. */
.ac-fan-overlay { position:fixed; inset:0; z-index:70; background:rgba(3,22,13,.93);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; }
.ac-fan-overlay.on { opacity:1; }
.ac-fan { display:flex; flex-direction:column; align-items:center; gap:22px; }
.ac-riff { display:flex; align-items:center; gap:36px; }
.ac-riff-face { width:126px; height:176px; border-radius:9px; overflow:hidden; background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.55); }
.ac-riff-face svg { width:100%; height:100%; display:block; }
@keyframes acRiffTick {
  0%   { transform:translateY(-7px) rotate(-1.5deg); }
  100% { transform:translateY(0) rotate(0); }
}
.ac-riff-pile { position:relative; width:126px; height:176px; }
.ac-riff-back { position:absolute; inset:0; border-radius:9px; overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.55); }
.ac-riff-back svg { width:100%; height:100%; display:block; }
.ac-riff-count { position:absolute; bottom:-6px; right:-8px; min-width:32px; padding:4px 8px;
  border-radius:13px; background:#062818; border:1px solid #2c7a4e; color:#bfe8cd;
  font-size:13px; font-weight:700; text-align:center; }
.ac-riff-label { font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:#d9c98a; }

/* Las 3 preguntas (control) */
.ac-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:100%; }
.ac-tab { font-size:11.5px; font-weight:700; line-height:1.25; padding:9px 4px; border-radius:10px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:#3a3550; }
.ac-tab.sel { border-color:var(--brand1); background:var(--brand1); color:#fff; }
.ac-tab:active { transform:translateY(1px); }

/* ===================== CONTROL ===================== */
.ac-ctrl-preview { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:96px;
  border:1.5px dashed var(--line); border-radius:16px; padding:10px; color:var(--muted); }
.ac-ctrl-preview .mini-card { width:60px; height:84px; }
.ac-ctrl-preview .mini-card svg { width:100%; height:100%; display:block; }
.ac-ctrl-preview .arrow { font-size:22px; color:var(--brand1); font-weight:700; }
.ac-ctrl-preview .pos-big { font-size:30px; font-weight:800; color:var(--brand1); }
.ac-ctrl-preview .pos-big small { display:block; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.6px; }

.ac-sec-label { width:100%; text-align:left; font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin-bottom:-8px; }

.ac-suit-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; }
.ac-suit-btn { height:52px; display:flex; align-items:center; justify-content:center; font-size:28px; border-radius:12px; cursor:pointer; border:1.5px solid var(--line); background:#fff; transition:border-color .15s, box-shadow .15s; }
.ac-suit-btn.red   { color:#d6213a; }
.ac-suit-btn.black { color:#1f2330; }
.ac-suit-btn.sel { border-color:var(--brand1); box-shadow:0 0 0 3px rgba(108,92,231,.18); }
.ac-suit-btn:active { transform:translateY(1px); }

.ac-value-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; width:100%; }
.ac-value-btn { height:42px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; border-radius:10px; cursor:pointer; border:1.5px solid var(--line); background:#fff; color:#3a3550; }
.ac-value-btn.sel { border-color:var(--brand1); background:rgba(108,92,231,.10); color:var(--brand1); box-shadow:0 0 0 2px rgba(108,92,231,.15); }
.ac-value-btn:active { transform:translateY(1px); }

.ac-pos-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:5px; width:100%; }
.ac-pos-btn { height:34px; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; border-radius:8px; cursor:pointer; border:1.5px solid var(--line); background:#fff; color:#3a3550; padding:0; }
.ac-pos-btn.sel { border-color:var(--brand1); background:var(--brand1); color:#fff; }
.ac-pos-btn:active { transform:translateY(1px); }