/* =============================================================
   Arcade — sala de juego v3
   Complementa arcade.css SOLO en la sala (games/play): modo inmersivo
   en móvil, cuenta atrás, kit de efectos (sacudida, destello, números
   flotantes, partículas, combo, banner), panel "¿continuar?" y
   pantalla de resultado con XP, fichas y misiones.
   ============================================================= */

/* ───────── HUD: pausa/salir dentro de la cabina, valores que "saltan" ───────── */
.a-hud-btns { display: inline-flex; gap: 6px; margin-left: 8px; }
.a-hud-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid var(--a-line-2);
    background: var(--a-panel);
    color: var(--a-text) !important;
    font-size: .9rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.a-hud-btn:active { transform: scale(.94); }
#btnExit { display: none; }
body.arcade-immersive #btnExit { display: inline-flex; }

.a-hud-item .vl.is-bump { animation: a-bump .22s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes a-bump { 40% { transform: scale(1.22); } }
.a-hud-item.is-urgent .vl { color: #ef4444 !important; animation: a-blink .5s steps(2) infinite; }
#hudItem_coins .vl { color: var(--a-gold) !important; }
#hudItem_coins .vl::before { content: '\f51e'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .8em; margin-right: 4px; }

/* ───────── Cuenta atrás ───────── */
.a-countdown {
    position: absolute;
    inset: 0;
    z-index: 28;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: clamp(5rem, 22vw, 9rem);
    font-weight: 900;
    letter-spacing: -4px;
    font-family: 'Sora', 'Outfit', system-ui, sans-serif;
    color: #fff;
    text-shadow: 0 0 40px var(--c-glow), 0 8px 30px rgba(0, 0, 0, .6);
    /* Velo suave: los juegos con countdown 'scene' pintan su escena detrás */
    background: radial-gradient(circle at 50% 50%, rgba(3, 6, 14, .55), rgba(3, 6, 14, .2) 34%, transparent 60%);
}
/* Anillo que se expande con cada número */
.a-countdown::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: clamp(7rem, 30vw, 12rem);
    height: clamp(7rem, 30vw, 12rem);
    border-radius: 50%;
    border: 3px solid var(--c);
    box-shadow: 0 0 30px var(--c-glow), inset 0 0 30px var(--c-glow);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5);
}
.a-countdown.is-pop::after { animation: a-count-ring .62s cubic-bezier(.2, .8, .3, 1) both; }
.a-countdown.is-go::after { border-width: 5px; }
.a-countdown.is-go { color: var(--c); }
.a-countdown.is-pop { animation: a-count .62s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes a-count {
    0% { transform: scale(.4); opacity: 0; }
    30% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: .95; }
}
@keyframes a-count-ring {
    0% { opacity: .95; transform: translate(-50%, -50%) scale(.45); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

/* ───────── Kit de efectos ───────── */
.a-fx { position: absolute; inset: 0; z-index: 22; pointer-events: none; overflow: hidden; }
.a-flash {
    position: absolute; inset: 0;
    animation: a-flash-out .26s ease-out forwards;
}
@keyframes a-flash-out { from { opacity: 1; } to { opacity: 0; } }

.a-pop {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
    white-space: nowrap;
    animation: a-pop-up .9s cubic-bezier(.2, .9, .3, 1) forwards;
}
.a-pop.coin { color: #fbbf24; }
.a-pop.good { color: #34d399; }
.a-pop.bad { color: #f87171; }
.a-pop.big { font-size: 1.7rem; }
@keyframes a-pop-up {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); }
    18% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

.a-spark {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: a-spark-fly .65s cubic-bezier(.1, .8, .3, 1) forwards;
    box-shadow: 0 0 8px currentColor;
}
@keyframes a-spark-fly {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); }
}

.a-banner {
    position: absolute;
    left: 50%; top: 38%;
    transform: translate(-50%, -50%);
    font-size: clamp(1.6rem, 8vw, 3rem);
    font-weight: 900;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 30px var(--c-glow), 0 6px 24px rgba(0, 0, 0, .7);
    white-space: nowrap;
    animation: a-banner-in 1.1s cubic-bezier(.2, 1.2, .4, 1) forwards;
}
@keyframes a-banner-in {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-4deg); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(1deg); }
    75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -80%) scale(1.05); }
}

.a-combo {
    position: absolute;
    right: 12px; top: 10px;
    padding: 6px 12px;
    border-radius: 99px;
    background: rgba(251, 191, 36, .18);
    border: 1px solid rgba(251, 191, 36, .6);
    color: #fbbf24;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .5px;
    text-shadow: 0 0 12px rgba(251, 191, 36, .6);
}
.a-combo.is-bump { animation: a-bump .25s cubic-bezier(.2, 1.6, .4, 1); }

/* arcade.css obliga a todos los div a heredar el color del tema
   (.arcade :where(div, span…) { color: inherit !important }): en el tema
   claro la cuenta atrás salía azul marino sobre el escenario negro y las
   fichas/combos perdían su dorado. Los textos del kit fijan su color. */
.a-countdown { color: #fff !important; }
.a-countdown.is-go { color: var(--c) !important; }
.a-pop { color: #fff !important; }
.a-pop.coin { color: #fbbf24 !important; }
.a-pop.good { color: #34d399 !important; }
.a-pop.bad { color: #f87171 !important; }
.a-banner:not([style*="color"]) { color: #fff !important; }
.a-combo { color: #fbbf24 !important; }

.a-stage-wrap.is-shake { animation: a-shake .3s linear; }
.a-stage-wrap.is-shake-strong { animation: a-shake-strong .4s linear; }
@keyframes a-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-3px, 2px); }
    40% { transform: translate(3px, -2px); }
    60% { transform: translate(-2px, -2px); }
    80% { transform: translate(2px, 2px); }
}
@keyframes a-shake-strong {
    0%, 100% { transform: translate(0, 0); }
    15% { transform: translate(-7px, 4px) rotate(-.4deg); }
    30% { transform: translate(7px, -4px) rotate(.4deg); }
    45% { transform: translate(-5px, -4px); }
    60% { transform: translate(5px, 4px); }
    80% { transform: translate(-2px, 1px); }
}

/* Botones táctiles pulsados */
.a-dpad button.is-down, .a-lr button.is-down { background: var(--c); color: #fff !important; }
.a-round.is-down { transform: scale(.92); filter: brightness(1.2); }

/* Controles táctiles con acabado de consola: la cabina es oscura en los dos
   temas, así que los botones también (en el tema claro salían blancos y planos). */
.a-touch {
    background: linear-gradient(180deg, #0b1020, #05070d);
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.a-dpad button, .a-lr button {
    background: linear-gradient(180deg, #232c41, #131a2b);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 4px 0 #04060c, 0 10px 18px -8px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
    color: #e2e8f0 !important;
    transition: transform .06s ease, box-shadow .06s ease, background .1s ease;
}
.a-dpad button.is-down, .a-lr button.is-down,
.a-dpad button:active, .a-lr button:active {
    background: var(--c);
    color: #fff !important;
    transform: translateY(3px);
    box-shadow: 0 1px 0 #04060c, 0 0 22px -2px var(--c-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.a-round {
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 5px 0 rgba(0, 0, 0, .55), 0 12px 22px -8px rgba(0, 0, 0, .8), inset 0 2px 0 rgba(255, 255, 255, .22);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.a-round.is-down, .a-round:active { box-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 0 24px -2px var(--c-glow), inset 0 2px 0 rgba(255, 255, 255, .22); }

/* ───────── Panel "¿continuar?" ───────── */
.a-revive { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 420px; }
.a-revive-ring {
    --p: 100;
    position: relative;
    width: 92px; height: 92px;
    border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 40px -10px var(--c-glow);
}
.a-revive-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--a-panel); }
.a-revive-num { position: relative; font-size: 2rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.a-revive-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.a-revive-btns .a-btn { flex: 1 1 150px; min-height: 52px; justify-content: center; }
.a-revive-btns .a-btn.is-gems { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.a-revive-btns .a-btn.is-free { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.a-revive-btns .a-btn:disabled { opacity: .45; cursor: not-allowed; }
.a-revive-btns .a-btn.is-busy { opacity: .6; }
.a-revive-hint { font-size: .78rem; color: var(--a-muted) !important; }
.a-revive-no {
    background: none; border: none; cursor: pointer;
    font-size: .82rem; font-weight: 800; text-decoration: underline;
    color: var(--a-dim) !important;
}

/* ───────── Resultado v2 ───────── */
.a-result-sub { margin-top: 8px; font-size: .8rem; font-weight: 700; color: var(--a-dim) !important; }
.a-result-sub i { color: var(--a-gold) !important; }
.a-xp-box { width: 100%; max-width: 420px; margin: 16px auto 0; text-align: left; }
.a-xp-box .a-xp-lbl { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1.4px; color: var(--a-accent) !important; }
.a-xp-box .a-xpbar { margin-top: 6px; }
.a-xp-box .a-xp-next { margin-top: 5px; font-size: .72rem; color: var(--a-muted) !important; }
.a-missions { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 420px; margin: 14px auto 0; }
.a-mission {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--a-panel);
    border: 1px solid var(--a-line);
    font-size: .8rem; font-weight: 700;
    text-align: left;
}
.a-mission i { color: var(--a-muted) !important; }
.a-mission .t { flex: 1; }
.a-mission .p { font-variant-numeric: tabular-nums; color: var(--a-muted) !important; }
.a-mission.is-done { border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .1); }
.a-mission.is-done i, .a-mission.is-done .p { color: #059669 !important; }
.a-nudge {
    display: flex; align-items: center; gap: 12px;
    width: 100%; max-width: 420px; margin: 14px auto 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, .14), rgba(34, 211, 238, .1));
    border: 1px solid rgba(168, 85, 247, .35);
    text-align: left;
    text-decoration: none;
    color: var(--a-text) !important;
}
.a-nudge .sw { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.a-nudge strong { display: block; font-size: .86rem; }
.a-nudge small { font-size: .72rem; color: var(--a-dim) !important; }
.a-nudge .pr { margin-left: auto; font-weight: 900; font-size: .8rem; color: #0891b2 !important; white-space: nowrap; }
.a-result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.a-result-actions .a-btn { padding: 11px 16px; font-size: .82rem; }

/* Skin equipada en la cabecera */
.a-skin-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--a-line-2);
    background: var(--a-panel);
    font-size: .76rem; font-weight: 800;
    color: var(--a-text) !important;
    text-decoration: none;
}
.a-skin-chip .sw { width: 16px; height: 16px; border-radius: 5px; }
.a-skin-chip:hover { border-color: var(--c); }

/* ───────── Modo inmersivo (móvil): la cabina ocupa toda la pantalla ───────── */
body.arcade-playing nav[aria-label="Secciones"],
body.arcade-immersive nav[aria-label="Secciones"],
body.arcade-playing .a11y-fab-stack,
body.arcade-playing .chatbot-btn,
body.arcade-playing .chat-bubble-stack,
body.arcade-immersive .a11y-fab-stack,
body.arcade-immersive .chatbot-btn,
body.arcade-immersive .chat-bubble-stack { display: none !important; }

body.arcade-immersive { overflow: hidden; }
body.arcade-immersive .a-stage-wrap {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #05070d;
}
body.arcade-immersive .a-stage-wrap.is-shake,
body.arcade-immersive .a-stage-wrap.is-shake-strong { animation-name: a-shake; }
body.arcade-immersive .a-hud { flex: 0 0 auto; padding: 8px 10px; gap: 2px; }
body.arcade-immersive .a-hud-item { padding-right: 8px; margin-right: 6px; }
body.arcade-immersive .a-hud-item .vl { font-size: 1rem; }
body.arcade-immersive .a-hud-item .lb { font-size: .52rem; letter-spacing: 1px; }
body.arcade-immersive .a-stage { flex: 1 1 auto; min-height: 0; padding: 8px; }
body.arcade-immersive .a-touch { flex: 0 0 auto; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
body.arcade-immersive .a-touch.is-on { display: flex; }
body.arcade-immersive .a-overlay { padding: 20px 16px; }
body.arcade-immersive .a-overlay h2 { font-size: clamp(1.5rem, 7vw, 2.4rem); }
body.arcade-immersive .a-overlay .a-msg { margin: 8px 0 14px; font-size: .86rem; }
body.arcade-immersive .a-picker { margin-bottom: 12px; }
body.arcade-immersive .a-pill { display: none; }

/* Aviso de que las sugerencias/rankings siguen abajo cuando NO estamos inmersos */
@media (max-width: 720px) {
    .a-play-actions { flex-wrap: wrap; }
    .a-touch { padding: 12px 14px; }
    .a-dpad { width: 150px; height: 150px; }
    .a-dpad button { width: 52px; height: 52px; }
    .a-dpad .u, .a-dpad .d { left: 49px; }
    .a-dpad .l, .a-dpad .r { top: 49px; }
    .a-round { width: 64px; height: 64px; }
    .a-result-score { font-size: clamp(2.4rem, 12vw, 3.6rem); }
}

@media (prefers-reduced-motion: reduce) {
    .a-stage-wrap.is-shake, .a-stage-wrap.is-shake-strong { animation: none; }
    .a-pop, .a-spark, .a-banner, .a-countdown.is-pop { animation-duration: .3s; }
}

/* En modo inmersivo la barra superior del portal (sticky, z-40) también se va. */
body.arcade-immersive header.sticky,
body.arcade-immersive header.top-0 { display: none !important; }

/* En inmersivo el récord se esconde (ya está en la pantalla de resultado) y el HUD no se parte. */
body.arcade-immersive #hudItem_best { display: none !important; }
body.arcade-immersive .a-hud { flex-wrap: nowrap; overflow: hidden; }
body.arcade-immersive .a-hud-item { flex: 0 0 auto; }
body.arcade-immersive .a-hud-spacer { min-width: 4px; }
body.arcade-immersive .a-hud-btns { flex: 0 0 auto; margin-left: 4px; }
body.arcade-immersive .a-powers .a-power .pl { display: none; }

/* Cofre ganado en la pantalla de resultado */
.a-mission.is-chest { --cc: #f59e0b; text-decoration: none; color: inherit; border-color: var(--cc); background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 18%, transparent), transparent 70%); }
.a-mission.is-chest i { color: var(--cc) !important; animation: a-chest-wobble 1.4s infinite; }
@keyframes a-chest-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-10deg) scale(1.1); } 40% { transform: rotate(10deg) scale(1.1); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(5deg); } }

/* Tablero con barra de objetivos y comodines (Dulce Cascada, Flujo) */
.dc-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.dc-board { display: block; border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .06); touch-action: none; user-select: none; -webkit-user-select: none; }
.dc-goal { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-weight: 900; font-size: .82rem; color: #e2e8f0; }
.dc-goal-lv { color: #fde68a; text-transform: uppercase; letter-spacing: 1px; font-size: .68rem; }
.dc-goal-item { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.dc-goal-item i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.dc-goal-item.is-done { opacity: .6; }
.dc-goal-item.is-done b { color: #86efac; }
.dc-goal-moves { margin-left: 4px; color: #93c5fd; font-variant-numeric: tabular-nums; }
.dc-tools { display: flex; gap: 8px; justify-content: center; width: 100%; }
.dc-tools button {
    flex: 1 1 0; max-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06); color: #e2e8f0; font: inherit; font-weight: 800; font-size: .72rem; cursor: pointer;
    transition: transform .15s, background .15s, border-color .15s;
}
.dc-tools button > i { font-size: 1rem; color: #fde68a; }
.dc-tools button b { font-size: .68rem; color: #fbbf24; display: inline-flex; align-items: center; gap: 3px; }
.dc-tools button b i { font-size: .62rem; }
.dc-tools button:active { transform: scale(.94); }
.dc-tools button:disabled { opacity: .5; cursor: default; }
.dc-tools button.is-armed { border-color: #fde68a; background: rgba(253, 230, 138, .18); animation: g-pulse-amber 1.2s infinite; }
@keyframes g-pulse-amber { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .45); } 50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); } }
@media (max-width: 720px) {
    .dc-wrap { gap: 6px; }
    .dc-goal { font-size: .78rem; padding: 5px 10px; gap: 8px; }
    .dc-tools button { padding: 6px 6px; font-size: .68rem; }
    .dc-tools button span { display: none; }
    .dc-tools button > i { font-size: 1.05rem; }
}
/* Barra de comodines: botón de acción principal y botones sin precio (Ruta) */
.dc-tools button.is-go { background: linear-gradient(135deg, #22c55e, #16a34a); border-color: transparent; color: #fff; }
.dc-tools button.is-go > i { color: #fff; }
.dc-tools button.is-plain > i { color: #cbd5e1; }
.dc-ink { display: inline-block; width: 70px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; vertical-align: middle; }
.dc-ink span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f0abfc, #22d3ee); transition: width .15s; }
@media (max-width: 720px) {
    .dc-tools button.is-go span, .dc-tools button.is-plain span { display: inline; }
    .dc-tools button.is-go, .dc-tools button.is-plain { flex-direction: row; gap: 6px; }
}