/* ================================= */
/* BASE EXPERIMENTACIÓN */
/* ================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

:root{
    --yellow:#FFDD0E;
    --yellow-soft:#FFE599;
    --green:#6AAA2C;
    --blue:#008FB8;
    --red:#D62416;
    --gray:#D9D9D9;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

body{
    background:#ECECEC;
    font-family:'Poppins', sans-serif;
    color:#333;
    overflow:hidden;
}

/*  =================================
    =================================

         EXPERIMENTACIÓN DIGITAL

    =================================
    ================================= */

.experimentacion-page{
    width:100%;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    background:#ECECEC;
    color:#333;
}

.exp-root{
    --exp-player-color:#7C4DFF;

    --ending-card-width:clamp(860px, 58vw, 1040px);
    --ending-side-width:320px;
    --ending-gap:clamp(32px, 3vw, 52px);

    --ending-total-width:calc(
        var(--ending-card-width) +
        var(--ending-gap) +
        var(--ending-side-width)
    );

    --ending-side-left:calc(
        (100vw - var(--ending-total-width)) / 2 +
        var(--ending-card-width) +
        var(--ending-gap)
    );

    --ending-panel-top:50%;
    --ending-actions-top:50%;

    position:relative;
    width:100%;
    height:100vh;
    height:100dvh;
    overflow:hidden;
}

/* ================================= */
/* ENTRADA */
/* ================================= */

.exp-entry,
.exp-board-screen{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.exp-entry{
    z-index:4;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        radial-gradient(circle at 18% 24%, rgba(255,221,14,.30), transparent 28%),
        radial-gradient(circle at 78% 24%, rgba(214,36,22,.13), transparent 28%),
        radial-gradient(circle at 22% 82%, rgba(0,143,184,.15), transparent 30%),
        radial-gradient(circle at 78% 78%, rgba(106,170,44,.16), transparent 30%),
        #ECECEC;

    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transition:
        opacity .55s ease,
        visibility .55s ease;
}

.exp-root.is-board-active .exp-entry{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.exp-landing-link{
    position:absolute;
    top:30px;
    left:34px;

    z-index:10;

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(236,236,236,.78);
    color:#777;

    text-decoration:none;
    font-size:1.5rem;
    font-weight:700;

    box-shadow:0 12px 34px rgba(0,0,0,.10);

    transition:
        transform .25s ease,
        color .25s ease,
        background-color .25s ease;
}

.exp-landing-link:hover{
    color:var(--green);
    background:white;
    transform:translateX(-4px);
}

.exp-entry-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
}

.exp-entry-intro{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

    text-align:center;
}

.exp-entry-subnote{
    max-width:520px;

    color:rgba(51,51,51,.58);

    font-size:.88rem;
    font-weight:300;
    line-height:1.55;

    animation:expGoalPulse 2.4s ease-in-out infinite;
}

.exp-entry-note{
    margin:-8px 0 -8px 0;

    color:#666;

    font-size:.95rem;
    font-weight:700;
    letter-spacing:.01em;
}

.exp-character-picker{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}

.exp-character{
    width:34px;
    height:34px;

    border:none;
    border-radius:50%;

    cursor:pointer;

    opacity:.42;

    box-shadow:
        inset 0 0 0 5px rgba(236,236,236,.72),
        0 10px 24px rgba(0,0,0,.12);

    transition:
        opacity .25s ease,
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}

.exp-character:hover,
.exp-character.is-selected{
    opacity:1;
    transform:scale(1.18);
}

.exp-character.is-selected{
    box-shadow:
        inset 0 0 0 5px rgba(236,236,236,.72),
        0 0 0 4px rgba(255,255,255,.8),
        0 14px 30px rgba(0,0,0,.15);
}

.exp-character--violet{ background:#7C4DFF; }
.exp-character--pink{ background:#FF4FA3; }
.exp-character--orange{ background:#FF8A00; }
.exp-character--cyan{ background:#8DEAF0; }

.exp-character--cyan.is-selected{
    background:#2EC8D3;
}

.exp-enter-button{
    width:76px;
    height:76px;

    border:none;
    border-radius:50%;

    background:var(--green);
    color:white;

    font-family:inherit;
    font-size:2rem;
    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 18px 44px rgba(0,0,0,.16);

    transition:
        transform .28s ease,
        background-color .28s ease,
        color .28s ease,
        box-shadow .28s ease,
        opacity .28s ease;
}

.exp-enter-button:hover{
    background:var(--yellow);
    color:#333;

    transform:translateY(-5px) scale(1.04);

    box-shadow:
        0 24px 58px rgba(0,0,0,.20);
}

.exp-enter-button:disabled{
    opacity:.28;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

.exp-enter-button:disabled:hover{
    background:var(--green);
    color:white;
    transform:none;
    box-shadow:none;
}

/* ================================= */
/* TABLERO FULL SCREEN */
/* ================================= */

.exp-board-screen{
    z-index:3;

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    padding:0;

    display:flex;
    align-items:stretch;
    justify-content:stretch;

    overflow:hidden;

    background:
        radial-gradient(circle at 14% 18%, rgba(255,221,14,.22), transparent 28%),
        radial-gradient(circle at 86% 20%, rgba(214,36,22,.11), transparent 28%),
        radial-gradient(circle at 18% 86%, rgba(0,143,184,.14), transparent 30%),
        radial-gradient(circle at 82% 84%, rgba(106,170,44,.13), transparent 30%),
        #ECECEC;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .55s ease,
        visibility .55s ease;
}

.exp-root.is-board-active .exp-board-screen{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.exp-board-layout{
    position:absolute;
    inset:0;

    width:100vw;
    height:100dvh;

    display:block;
}

.exp-board-wrap{
    position:absolute;
    inset:0;

    width:100vw;
    height:100dvh;

    overflow:hidden;

    background:
        radial-gradient(circle at 18% 20%, rgba(255,221,14,.22), transparent 28%),
        radial-gradient(circle at 86% 20%, rgba(214,36,22,.11), transparent 28%),
        radial-gradient(circle at 18% 86%, rgba(0,143,184,.14), transparent 30%),
        radial-gradient(circle at 82% 84%, rgba(106,170,44,.13), transparent 30%),
        #ECECEC;

    box-shadow:none;
    transform:none;
}

.exp-board-wrap.is-complete{
    animation:expCompletePulse 2.8s ease-in-out infinite;
}

.exp-board-wrap.is-shifting{
    animation:expBoardShiftFull .9s ease both;
}

.exp-board-svg{
    width:100vw;
    height:100dvh;

    display:block;

    overflow:hidden;
}

/* ================================= */
/* PANEL DE SERIES */
/* ================================= */

.exp-combo-panel{
    position:absolute;
    right:28px;
    bottom:26px;
    z-index:34;

    width:360px;

    display:flex;
    flex-direction:column;
    gap:8px;

    padding:15px;
    border-radius:24px;

    background:
        radial-gradient(circle at 16% 18%, rgba(255,221,14,.13), transparent 34%),
        radial-gradient(circle at 88% 22%, rgba(214,36,22,.06), transparent 34%),
        radial-gradient(circle at 14% 88%, rgba(0,143,184,.08), transparent 34%),
        rgba(236,236,236,.54);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.44),
        0 12px 34px rgba(0,0,0,.07);

    transition:
        left .75s cubic-bezier(.2,.85,.25,1),
        right .75s cubic-bezier(.2,.85,.25,1),
        top .75s cubic-bezier(.2,.85,.25,1),
        bottom .75s cubic-bezier(.2,.85,.25,1),
        width .75s cubic-bezier(.2,.85,.25,1),
        transform .75s cubic-bezier(.2,.85,.25,1),
        background .45s ease,
        box-shadow .45s ease,
        opacity .35s ease;
}

.exp-combo-title{
    margin:0 0 5px 0;

    color:rgba(51,51,51,.68);

    font-size:.72rem;
    font-weight:700;
    letter-spacing:.02em;
}

.exp-combo-row{
    min-height:34px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.25);
    opacity:.42;
}



.exp-combo-row span{
    color:rgba(51,51,51,.42);
    font-size:.74rem;
    font-weight:700;
}

.exp-combo-row strong{
    margin-left:auto;

    color:rgba(51,51,51,.62);

    font-size:.68rem;
    font-weight:700;
    white-space:nowrap;
}

.exp-combo-row.is-current{
    opacity:.92;
    background:rgba(255,255,255,.62);
    transform:translateX(-3px);
}

.exp-combo-row.is-complete{
    opacity:1;
    background:rgba(255,221,14,.72);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.55),
        0 10px 24px rgba(0,0,0,.10);
}

.exp-combo-row.is-discovered{
    opacity:1;
    background:rgba(255,221,14,.62);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.55),
        0 8px 20px rgba(0,0,0,.08);
}

.exp-combo-row.is-discovered strong{
    color:#333;
}

.exp-combo-row.is-discovered .combo-dot{
    opacity:1;
    transform:scale(1.12);
}

.combo-dot{
    width:14px;
    height:14px;

    flex:0 0 auto;

    display:block;
    border-radius:50%;

    box-shadow:
        inset 0 0 0 3px rgba(236,236,236,.72),
        0 4px 10px rgba(0,0,0,.08);
}

.combo-dot--red{ background:var(--red); }
.combo-dot--green{ background:var(--green); }
.combo-dot--blue{ background:var(--blue); }

/* ================================= */
/* LEYENDA EN PANTALLA FINAL */
/* ================================= */

.exp-combo-panel.is-ending-centered{
    position:fixed;
    top:var(--ending-panel-top);
    left:var(--ending-side-left);
    right:auto;
    bottom:auto;
    z-index:110;

    width:var(--ending-side-width);

    display:flex;
    flex-direction:column;
    gap:8px;

    padding:16px;
    border-radius:26px;

    transform:none;

    background:
        radial-gradient(circle at 18% 18%, rgba(255,221,14,.24), transparent 34%),
        radial-gradient(circle at 82% 22%, rgba(255,239,150,.14), transparent 32%),
        rgba(255,247,199,.88);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.58),
        0 18px 40px rgba(0,0,0,.10);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    pointer-events:none;
}

.exp-combo-panel.is-ending-centered .exp-combo-title{
    margin:0 0 6px;
    text-align:center;
    font-size:.78rem;
    color:rgba(51,51,51,.72);
}

.exp-combo-panel.is-ending-centered .exp-combo-row{
    min-height:38px;
    opacity:1;
    background:rgba(255,255,255,.42);
}

.exp-combo-panel.is-ending-centered .exp-combo-row.is-discovered,
.exp-combo-panel.is-ending-centered .exp-combo-row.is-complete{
    background:rgba(255,221,14,.82);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.58),
        0 10px 22px rgba(0,0,0,.08);
}

.exp-combo-panel.is-ending-centered .exp-combo-row strong{
    color:#333;
}

/* ================================= */
/* CAPAS REACTIVAS */
/* ================================= */

.exp-atmosphere-layer{
    position:absolute;
    inset:0;
    z-index:1;

    pointer-events:none;
    overflow:hidden;

    mix-blend-mode:multiply;
}

.exp-atmosphere-blob{
    position:absolute;

    width:42vmax;
    height:42vmax;

    border-radius:50%;

    transform:translate(-50%, -50%) scale(.35);

    opacity:0;

    filter:blur(34px);

    animation:expAtmosphereBloom 5.4s ease forwards;
}

.exp-final-overlay{
    position:fixed;
    right:28px;
    bottom:450px;

    width:360px;
    min-height:84px;

    padding:14px 16px 18px;
    border-radius:20px;

    background:#FFDD0E;
    color:#333;

    box-shadow:
        0 14px 28px rgba(0,0,0,.12),
        inset 0 0 0 1px rgba(255,255,255,.42);

    opacity:0;
    pointer-events:none;

    transform:translateY(12px);
    transition:
        opacity .25s ease,
        transform .25s ease;

    z-index:70;
}

.exp-final-overlay[aria-hidden="false"]{
    opacity:1;
    transform:translateY(0);
}

.exp-final-status{
    display:block;
    margin-bottom:6px;

    font-size:.78rem;
    font-weight:700;
    letter-spacing:.01em;
    color:rgba(30,30,30,.78);
}

.exp-final-overlay strong{
    display:block;

    font-size:.92rem;
    line-height:1.25;
    font-weight:800;
    color:#2a2a2a;
}

.exp-final-overlay[data-state="loading"]::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:10px;
    height:6px;
    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            rgba(60,60,60,.12) 0%,
            rgba(60,60,60,.9) 50%,
            rgba(60,60,60,.12) 100%
        );

    animation:expLoadingBar 1s linear infinite;
}

.exp-final-overlay[data-state="active"]::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:10px;
    height:6px;
    border-radius:999px;
    background:rgba(60,60,60,.2);
}

.exp-final-overlay span{
    color:rgba(51,51,51,.58);
    font-size:.72rem;
    font-weight:600;
}

.exp-root.is-final .exp-final-overlay{
    opacity:1;
    transform:translateY(0);
}

.exp-final-overlay[data-state="loading"] strong{
    color:#333;
}

/* ================================= */
/* SVG */
/* ================================= */

.exp-board-wrap{
    transition:
        background .85s ease,
        filter .85s ease;
}

.exp-board-svg{
    position:relative;
    z-index:2;
}

.exp-layer-ring{
    fill:none;
    transition:
        opacity .35s ease,
        stroke .35s ease,
        stroke-width .35s ease;
}

.exp-layer-ring.is-depth-near{
    stroke:rgba(80,80,80,.12);
    stroke-width:2.6;
    opacity:.95;
}

.exp-layer-ring.is-depth-mid{
    stroke:rgba(80,80,80,.075);
    stroke-width:2;
    opacity:.62;
}

.exp-layer-ring.is-depth-far{
    stroke:rgba(80,80,80,.045);
    stroke-width:1.5;
    opacity:.38;
}

.exp-layer-ring.is-depth-fog{
    stroke:rgba(80,80,80,.025);
    stroke-width:1.2;
    opacity:.22;
}

.exp-base-edge{
    stroke-linecap:round;

    transition:
        opacity .35s ease,
        stroke .35s ease,
        stroke-width .35s ease;
}

.exp-base-edge.is-depth-near{
    stroke:rgba(25,25,25,.38);
    stroke-width:7.4;
    opacity:1;
}

.exp-base-edge.is-depth-mid{
    stroke:rgba(25,25,25,.25);
    stroke-width:5.8;
    opacity:.82;
}

.exp-base-edge.is-depth-far{
    stroke:rgba(25,25,25,.14);
    stroke-width:4.4;
    opacity:.58;
}

.exp-base-edge.is-depth-fog{
    stroke:rgba(25,25,25,.09);
    stroke-width:3.3;
    opacity:.40;
}

.exp-base-edge.is-dynamic{
    stroke:rgba(0,143,184,.58);
    stroke-width:8;
    opacity:1;
}

.exp-trail{
    stroke-linecap:round;
    stroke-width:21;

    opacity:1;

    filter:
        drop-shadow(0 5px 8px rgba(0,0,0,.24))
        drop-shadow(0 0 16px rgba(255,255,255,.82));
}

.exp-trail.is-past{
    opacity:.82;
    stroke-width:15;
}

.exp-trail.is-active{
    opacity:1;
    stroke-width:24;
}

.exp-trail.is-final{
    opacity:1;
    stroke-width:28;
}

.exp-cell{
    cursor:pointer;

    fill:rgba(255,255,255,.24);
    stroke:rgba(255,255,255,.52);
    stroke-width:5;

    opacity:0;
    pointer-events:none;

    filter:
        drop-shadow(0 10px 16px rgba(0,0,0,.12))
        drop-shadow(0 0 8px rgba(255,255,255,.5));

    transform-box:fill-box;
    transform-origin:center;

    transition:
        opacity .35s ease,
        fill .35s ease,
        stroke .35s ease,
        filter .35s ease,
        stroke-width .35s ease,
        transform .35s ease;
}

.exp-cell-core{
    pointer-events:none;

    opacity:0;

    fill:rgba(255,255,255,.96);
    stroke:rgba(255,255,255,.78);
    stroke-width:2;

    filter:
        drop-shadow(0 0 8px rgba(255,255,255,.42));

    transition:
        opacity .28s ease,
        fill .28s ease,
        stroke .28s ease,
        filter .28s ease;
}

.exp-cell.is-visible{
    opacity:.78;
    pointer-events:auto;
}

.exp-cell.is-depth-near.is-visible{
    opacity:1;
}

.exp-cell.is-depth-mid.is-visible{
    opacity:.68;
}

.exp-cell.is-depth-far.is-visible{
    opacity:.36;
}

.exp-cell.is-depth-fog.is-visible{
    opacity:.16;
}

.exp-player{
    fill:var(--exp-player-color);
    stroke:white;
    stroke-width:8;

    filter:
        drop-shadow(0 10px 18px rgba(0,0,0,.22))
        drop-shadow(0 0 14px rgba(255,255,255,.9));

    transition:
        cx .32s ease,
        cy .32s ease,
        fill .25s ease;
}

.exp-cell[data-color="blue"]{
    fill:rgba(0,143,184,.58);
}

.exp-cell[data-color="green"]{
    fill:rgba(106,170,44,.56);
}

.exp-cell[data-color="red"]{
    fill:rgba(214,36,22,.55);
}

.exp-cell[data-color="yellow"]{
    fill:rgba(255,221,14,.74);
}

.exp-cell.is-stable{
    filter:
        drop-shadow(0 0 14px rgba(106,170,44,.55))
        drop-shadow(0 10px 16px rgba(0,0,0,.12));
}

.exp-cell.is-playable{
    opacity:.34;
    pointer-events:auto;
}

/* Casillas cercanas al puntero */
.exp-cell.is-near-cursor{
    opacity:.82;
    filter:
        drop-shadow(0 0 10px rgba(255,255,255,.62))
        drop-shadow(0 8px 14px rgba(0,0,0,.10));
}

/* Las jugables cercanas se leen mejor */
.exp-cell.is-playable.is-near-cursor{
    opacity:.94;
}

/* Las disponibles se mantienen visibles aunque el mouse no esté encima */
.exp-cell.is-available{
    opacity:1;
    stroke:#ffffff;
    stroke-width:8;

    animation:expAvailablePulse 1.4s ease-in-out infinite;

    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.92))
        drop-shadow(0 10px 18px rgba(0,0,0,.16));
}

/* La actual también queda siempre clara */
.exp-cell.is-current{
    opacity:1;
    stroke:var(--exp-player-color);
    stroke-width:12;

    transform:scale(1.12);
}

.exp-cell.is-filler{
    opacity:.18;
    pointer-events:none;
    stroke-width:1.8;
    filter:none;
}

.exp-root.fx-blackhole .exp-cell.is-depth-fog.is-filler{
    opacity:.08;
}

.exp-root.fx-blackhole .exp-cell.is-depth-far.is-filler{
    opacity:.12;
}

.exp-fog{
    pointer-events:none;
    fill:none;

    stroke:rgba(236,236,236,.28);
    stroke-width:140;

    filter:blur(22px);
    opacity:.16;

    transition:
        opacity .55s ease,
        stroke .55s ease;
}

.exp-fog.is-hidden{
    opacity:0;
}

.exp-root.is-pan-mode .exp-board-wrap{
    cursor:grab;
}

.exp-root.is-pan-mode .exp-board-wrap:active{
    cursor:grabbing;
}

/* ================================= */
/* CONTROLES */
/* ================================= */

.exp-board-actions{
    position:absolute;
    top:26px;
    right:28px;
    left:auto;
    z-index:20;

    transform:none;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.exp-board-actions button{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:50%;

    background:rgba(236,236,236,.82);
    color:#777;

    font-family:inherit;
    font-size:1.4rem;
    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 12px 34px rgba(0,0,0,.10);

    transition:
        transform .25s ease,
        color .25s ease,
        background-color .25s ease;
}

.exp-board-actions button:hover{
    color:var(--green);
    background:white;
    transform:translateY(-2px);
}

/* ================================= */
/* ANIMACIONES */
/* ================================= */
.exp-board-wrap.is-resetting{
    pointer-events:none;
}

.exp-trail.is-absorbing{
    opacity:.95;
    stroke-width:14;

    filter:
        drop-shadow(0 0 10px rgba(255,255,255,.85))
        drop-shadow(0 0 18px rgba(0,0,0,.18));
}

@keyframes expAvailablePulse{
    0%{
        stroke:#ffffff;
        stroke-width:6;
        filter:
            drop-shadow(0 0 5px rgba(255,255,255,.75))
            drop-shadow(0 6px 10px rgba(0,0,0,.10));
    }

    50%{
        stroke:rgba(20,20,20,.92);
        stroke-width:8;
        filter:
            drop-shadow(0 0 10px rgba(255,255,255,.95))
            drop-shadow(0 10px 16px rgba(0,0,0,.16));
    }

    100%{
        stroke:#ffffff;
        stroke-width:6;
        filter:
            drop-shadow(0 0 5px rgba(255,255,255,.75))
            drop-shadow(0 6px 10px rgba(0,0,0,.10));
    }
}

@keyframes expEntryFloat{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-10px) rotate(2deg);
    }
}

@keyframes expInterrupt{
    0%{
        transform:scale(1);
    }

    35%{
        transform:scale(1.22);
    }

    100%{
        transform:scale(1);
    }
}

@keyframes expCompletePulse{
    0%,100%{
        box-shadow:
            0 30px 90px rgba(0,0,0,.15),
            inset 0 0 0 1px rgba(255,255,255,.45),
            inset 0 0 90px rgba(255,255,255,.25);
    }

    50%{
        box-shadow:
            0 36px 110px rgba(0,0,0,.18),
            0 0 48px rgba(255,221,14,.36),
            inset 0 0 0 1px rgba(255,255,255,.65),
            inset 0 0 120px rgba(255,255,255,.35);
    }
}

@keyframes expBoardShiftFull{
    0%{
        transform:translate(0,0) rotate(0deg);
    }

    30%{
        transform:translate(14px,-8px) rotate(1.2deg);
    }

    65%{
        transform:translate(-10px,6px) rotate(-.9deg);
    }

    100%{
        transform:translate(0,0) rotate(0deg);
    }
}

@keyframes expGoalPulse{
    0%,100%{
        opacity:.62;
    }

    50%{
        opacity:1;
    }
}

@keyframes expAtmosphereBloom{
    0%{
        opacity:0;
        transform:translate(-50%, -50%) scale(.25);
    }

    24%{
        opacity:.72;
    }

    100%{
        opacity:0;
        transform:translate(-50%, -50%) scale(1.15);
    }
}

@keyframes expTransportAppear{
    0%,100%{
        transform:scale(var(--transport-scale, .92));
        opacity:.62;
    }

    42%{
        transform:scale(var(--transport-scale-near, 1.14));
        opacity:1;
    }

    72%{
        transform:scale(var(--transport-scale-mid, 1));
        opacity:.86;
    }
}

.exp-board-wrap::before,
.exp-board-wrap::after{
    content:"";
    position:absolute;
    inset:-18%;
    z-index:4;

    pointer-events:none;

    opacity:0;

    transition:
        opacity .45s ease,
        transform .75s ease,
        filter .75s ease;

    mix-blend-mode:multiply;
}

/* ================================= */
/* EFECTO TRASLADO — Verde x5 */
/* ================================= */

.exp-root.fx-transport .exp-board-wrap{
    transform:none;
    animation:none;
    filter:none;

    background:
        radial-gradient(circle at 18% 22%, rgba(106,170,44,.20), transparent 30%),
        radial-gradient(circle at 80% 18%, rgba(255,221,14,.13), transparent 28%),
        radial-gradient(circle at 22% 82%, rgba(0,143,184,.11), transparent 34%),
        radial-gradient(circle at 76% 78%, rgba(106,170,44,.15), transparent 32%),
        #ECECEC;
}

.exp-root.fx-transport .exp-base-edge,
.exp-root.fx-transport .exp-layer-ring,
.exp-root.fx-transport .exp-fog,
.exp-root.fx-transport .exp-trail{
    opacity:0;
    pointer-events:none;
}

.exp-root.fx-transport.is-transport-ready .exp-cell{
    opacity:0;
    pointer-events:none;

    fill:transparent !important;
    stroke:rgba(255,255,255,.12) !important;

    transform:scale(1);

    filter:none;

    transition:
        opacity .35s ease,
        transform .35s cubic-bezier(.2,.8,.2,1),
        filter .35s ease,
        fill .35s ease,
        stroke .35s ease;
}

.exp-root.fx-transport.is-transport-preparing .exp-base-edge,
.exp-root.fx-transport.is-transport-preparing .exp-layer-ring{
    opacity:.22;
}

.exp-root.fx-transport.is-transport-preparing .exp-cell{
    opacity:.72;

    transition:
        opacity .65s ease,
        fill .65s ease,
        stroke .65s ease,
        filter .65s ease,
        transform .65s ease;
}

.exp-root.fx-transport.is-transport-preparing .exp-cell.is-filler{
    opacity:.42;

    stroke:rgba(255,255,255,.46) !important;
    fill:rgba(255,255,255,.12) !important;

    filter:
        drop-shadow(0 0 10px rgba(255,255,255,.28))
        drop-shadow(0 8px 14px rgba(0,0,0,.08));
}

.exp-root.fx-transport .exp-cell.is-transport-current{
    opacity:1;
    pointer-events:auto;

    transform:scale(1.18);

    stroke:var(--exp-player-color) !important;
    stroke-width:11;

    filter:
        drop-shadow(0 0 16px rgba(255,255,255,.9))
        drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.exp-root.fx-transport.is-transport-ready .exp-cell.is-transport-option{
    opacity:1;
    pointer-events:auto;
    transform:scale(1);

    stroke:rgba(255,255,255,.92) !important;
    stroke-width:7;

    animation:none;

    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.48))
        drop-shadow(0 10px 18px rgba(0,0,0,.12));

    transition:
        opacity .22s ease,
        fill .22s ease,
        stroke .22s ease,
        stroke-width .22s ease,
        filter .22s ease,
        transform .18s ease;
}

.exp-root.fx-transport.is-transport-ready .exp-cell.is-transport-option.is-filler{
    --transport-scale:1;
    --transport-scale-near:1.14;
    --transport-scale-mid:1.04;

    stroke-width:7;
}

.exp-root.fx-transport.is-transport-ready .exp-cell.is-transport-option.is-transport-warning{
    opacity:1;

    stroke:#ffffff !important;
    stroke-width:10;

    animation:expTransportWarningShake .38s ease-in-out infinite;

    filter:
        drop-shadow(0 0 14px rgba(255,255,255,.78))
        drop-shadow(0 0 22px rgba(106,170,44,.42))
        drop-shadow(0 10px 18px rgba(0,0,0,.16));
}

.exp-root.fx-transport.is-transport-ready .exp-cell.is-transport-option.is-transport-expanded{
    opacity:1;

    stroke:#ffffff !important;
    stroke-width:10;

    animation:expTransportFlash .42s ease both;

    filter:
        drop-shadow(0 0 18px rgba(255,255,255,.82))
        drop-shadow(0 0 28px rgba(106,170,44,.46))
        drop-shadow(0 12px 20px rgba(0,0,0,.16));
}

.exp-root.fx-transport.is-transport-ready .exp-cell.is-transport-option.is-transport-shrinking{
    opacity:1;

    stroke:rgba(255,255,255,.86) !important;
    stroke-width:8;

    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.46))
        drop-shadow(0 10px 18px rgba(0,0,0,.12));
}

.exp-root.fx-transport .exp-cell.is-transport-option[data-color="blue"]{
    fill:rgba(0,143,184,.62) !important;
}

.exp-root.fx-transport .exp-cell.is-transport-option[data-color="green"]{
    fill:rgba(106,170,44,.62) !important;
}

.exp-root.fx-transport .exp-cell.is-transport-option[data-color="red"]{
    fill:rgba(214,36,22,.58) !important;
}

.exp-root.fx-transport .exp-cell.is-transport-option[data-color="yellow"]{
    fill:rgba(255,221,14,.72) !important;
}

.exp-root.fx-transport .exp-player{
    filter:
        drop-shadow(0 0 16px rgba(255,255,255,.95))
        drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

@keyframes expTransportWarningShake{
    0%,100%{
        transform:translate(0,0) scale(1.05);
    }

    25%{
        transform:translate(2px,-1px) scale(1.07);
    }

    50%{
        transform:translate(-1px,2px) scale(1.05);
    }

    75%{
        transform:translate(1px,1px) scale(1.07);
    }
}

@keyframes expTransportFlash{
    0%{
        transform:scale(1);
        opacity:.42;
    }

    42%{
        transform:scale(1.04);
        opacity:1;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }
}

/* ================================= */
/* ================================= */
/* EFECTOS DE INTERFERENCIA */
/* ================================= */
/* ================================= */


/* ================================= */
/* EFECTO IMPACTO — colisión rápida */
/* ================================= */

.exp-root.fx-impact .exp-board-wrap{
    animation:expImpactBoardPulse 1.15s cubic-bezier(.2,.8,.2,1) infinite;

    background:
        radial-gradient(circle at 20% 22%, rgba(214,36,22,.18), transparent 30%),
        radial-gradient(circle at 78% 18%, rgba(255,221,14,.12), transparent 30%),
        radial-gradient(circle at 18% 82%, rgba(0,143,184,.10), transparent 34%),
        radial-gradient(circle at 82% 82%, rgba(214,36,22,.12), transparent 32%),
        #ECECEC;
}

.exp-root.fx-impact .exp-base-edge{
    opacity:.38;
    stroke:rgba(35,35,35,.22);
    stroke-width:5.8;
}

.exp-root.fx-impact .exp-base-edge.is-dynamic{
    opacity:.72;
    stroke:rgba(0,143,184,.46);
    stroke-width:7.2;
}

.exp-root.fx-impact .exp-layer-ring{
    opacity:.08;
}

.exp-root.fx-impact .exp-fog{
    opacity:.05;
}

.exp-root.fx-impact .exp-trail{
    opacity:.52;
    stroke-width:13;

    filter:
        drop-shadow(0 0 8px rgba(255,255,255,.42))
        drop-shadow(0 8px 12px rgba(0,0,0,.12));
}

.exp-root.fx-impact .exp-cell{
    transition:
        opacity .18s ease,
        stroke .18s ease,
        stroke-width .18s ease,
        fill .18s ease,
        filter .18s ease;
}

.exp-root.fx-impact .exp-cell.is-impacting{
    animation:expImpactGlow 1.15s ease-in-out infinite;
    animation-delay:var(--wave-delay, 0s);

    filter:
        drop-shadow(0 0 10px rgba(255,255,255,.42))
        drop-shadow(0 8px 14px rgba(0,0,0,.16));
}

.exp-root.fx-impact .exp-cell.is-playable{
    opacity:.82;
}

.exp-root.fx-impact .exp-cell.is-filler{
    opacity:.10;
}

.exp-root.fx-impact .exp-cell.is-available.is-impacting{
    animation:
        expImpactGlow 1.15s ease-in-out infinite,
        expAvailablePulse .9s ease-in-out infinite;

    animation-delay:
        var(--wave-delay, 0s),
        0s;

    stroke:#ffffff !important;
    stroke-width:9;

    opacity:1;

    filter:
        drop-shadow(0 0 16px rgba(255,255,255,.9))
        drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

.exp-root.fx-impact .exp-cell.is-impact-hidden{
    opacity:0 !important;
    visibility:hidden;
    pointer-events:none !important;
    animation:none !important;
    filter:none !important;
}

.exp-root.fx-impact .exp-cell.is-impacting{
    pointer-events:auto;
}

.exp-root.fx-impact .exp-cell.is-filler.is-impacting{
    pointer-events:auto;
}

.exp-root.fx-impact .exp-cell.is-filler.is-available{
    pointer-events:auto;
    opacity:1;
    stroke:#ffffff !important;
    stroke-width:7.5;

    filter:
        drop-shadow(0 0 13px rgba(255,255,255,.72))
        drop-shadow(0 8px 14px rgba(0,0,0,.16));
}

.exp-root.fx-impact .exp-cell.is-current{
    opacity:1;
    stroke:var(--exp-player-color) !important;
    stroke-width:12;

    filter:
        drop-shadow(0 0 14px rgba(255,255,255,.72))
        drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.exp-root.fx-impact .exp-player{
    animation:none;
    transition:none;
    transform:none;

    filter:
        drop-shadow(0 10px 18px rgba(0,0,0,.22))
        drop-shadow(0 0 16px rgba(255,255,255,.95));
}

.exp-root.fx-impact.is-impact-dispersing .exp-cell.is-impacting{
    animation:expImpactEntryGlow .95s ease both;

    filter:
        drop-shadow(0 0 16px rgba(255,255,255,.72))
        drop-shadow(0 10px 18px rgba(0,0,0,.16));
}

@keyframes expImpactEntryGlow{
    0%{
        opacity:.32;
        stroke-width:4.5;
    }

    45%{
        opacity:1;
        stroke-width:9;
    }

    100%{
        opacity:.82;
        stroke-width:6.4;
    }
}

.exp-root.fx-impact .exp-base-edge,
.exp-root.fx-impact .exp-trail,
.exp-root.fx-impact .exp-layer-ring,
.exp-root.fx-impact .exp-blackhole-guide{
    opacity:0 !important;
    visibility:hidden;
    pointer-events:none;
}



/* ================================= */
/* EFECTO MATRIX — permisos por color */
/* ================================= */

.exp-root.fx-matrix{
    --matrix-color:rgba(0,143,184,.95);
    --matrix-color-soft:rgba(0,143,184,.18);
}

.exp-root.fx-matrix[data-matrix-color="blue"]{
    --matrix-color:rgba(0,143,184,.95);
    --matrix-color-soft:rgba(0,143,184,.20);
}

.exp-root.fx-matrix[data-matrix-color="green"]{
    --matrix-color:rgba(106,170,44,.95);
    --matrix-color-soft:rgba(106,170,44,.22);
}

.exp-root.fx-matrix[data-matrix-color="red"]{
    --matrix-color:rgba(214,36,22,.92);
    --matrix-color-soft:rgba(214,36,22,.18);
}

.exp-root.fx-matrix .exp-board-wrap{
    background:
        radial-gradient(circle at 20% 22%, var(--matrix-color-soft), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(255,221,14,.10), transparent 30%),
        radial-gradient(circle at 18% 82%, rgba(0,143,184,.10), transparent 34%),
        radial-gradient(circle at 82% 82%, var(--matrix-color-soft), transparent 32%),
        #ECECEC;

    filter:
        contrast(1.06)
        saturate(1.18);
}

.exp-root.fx-matrix .exp-base-edge{
    opacity:.18;
    stroke:rgba(30,30,30,.18);
}

.exp-root.fx-matrix .exp-layer-ring{
    opacity:.14;
}

.exp-root.fx-matrix .exp-trail{
    opacity:.62;
    stroke-width:14;
}

.exp-root.fx-matrix .exp-cell{
    transition:
        opacity .22s ease,
        fill .22s ease,
        stroke .22s ease,
        stroke-width .22s ease,
        filter .22s ease,
        transform .22s ease;
}

.exp-root.fx-matrix .exp-cell.is-matrix-locked{
    opacity:.16 !important;
    pointer-events:none !important;

    fill:rgba(255,255,255,.08) !important;
    stroke:rgba(255,255,255,.18) !important;
    stroke-width:2.5;

    filter:none !important;
}

.exp-root.fx-matrix .exp-cell.is-matrix-active{
    opacity:.72;

    stroke:var(--matrix-color) !important;
    stroke-width:5.8;

    filter:
        drop-shadow(0 0 10px var(--matrix-color-soft))
        drop-shadow(0 8px 14px rgba(0,0,0,.10));
}

.exp-root.fx-matrix .exp-cell.is-matrix-active.is-available{
    opacity:1;
    pointer-events:auto !important;

    stroke:#ffffff !important;
    stroke-width:9;

    transform:scale(1.12);

    filter:
        drop-shadow(0 0 16px var(--matrix-color))
        drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.exp-root.fx-matrix .exp-cell.is-current{
    opacity:1;

    stroke:var(--exp-player-color) !important;
    stroke-width:12;

    filter:
        drop-shadow(0 0 16px rgba(255,255,255,.92))
        drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.exp-root.fx-matrix .exp-player{
    filter:
        drop-shadow(0 0 16px rgba(255,255,255,.95))
        drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

.exp-root.fx-matrix.is-matrix-scanning .exp-board-wrap::before{
    opacity:.62;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            transparent 38%,
            var(--matrix-color-soft) 46%,
            var(--matrix-color) 50%,
            var(--matrix-color-soft) 54%,
            transparent 64%,
            transparent 100%
        );

    filter:blur(4px);
    mix-blend-mode:multiply;

    animation:expMatrixScan 1.5s ease-out both;
}





.exp-root.fx-glitch.is-glitch-shaking .exp-cell{
    animation:expGlitchCell .48s steps(2,end) infinite;
    animation-delay:var(--wave-delay, 0s);
}   

.exp-root.fx-glitch.is-glitch-shaking .exp-cell.is-available{
    animation:
        expGlitchCell .42s steps(2,end) infinite,
        expAvailablePulse .95s ease-in-out infinite;
}

.exp-root.fx-glitch.is-glitch-shaking .exp-player{
    animation:expGlitchPlayer .34s steps(2,end) infinite;
}

.exp-root.fx-glitch .exp-board-wrap{
    animation:none;

    filter:
        contrast(1.12)
        saturate(1.18);
}

.exp-root.fx-glitch.is-glitch-shaking .exp-board-wrap{
    animation:expGlitchBoard .42s steps(2,end) infinite;
}

.exp-root.fx-glitch .exp-board-svg{
    filter:
        drop-shadow(7px 0 0 rgba(0,143,184,.18))
        drop-shadow(-7px 0 0 rgba(214,36,22,.16));
}

.exp-root.fx-glitch #expLayerRings,
.exp-root.fx-glitch #expBaseEdges,
.exp-root.fx-glitch #expFogLayer,
.exp-root.fx-glitch #expTrailLayer,
.exp-root.fx-glitch #expCellsLayer,
.exp-root.fx-glitch #expPlayerLayer{
    transition:transform .22s steps(2,end);
}

.exp-root.fx-glitch .exp-board-wrap::after{
    opacity:.28;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(0,143,184,.32) 46%,
            rgba(214,36,22,.26) 50%,
            transparent 54%);
    filter:blur(2px);
}



.exp-cell.is-red-pulse{
    animation:expRedCellPulse .7s ease both;
}

@keyframes expRedCellPulse{
    0%,100%{
        transform:scale(1);
    }

    45%{
        transform:scale(1.18);
        filter:
            drop-shadow(0 0 14px rgba(214,36,22,.45))
            drop-shadow(0 8px 16px rgba(0,0,0,.14));
    }
}

@keyframes expImpactBoardPulse{
    0%,100%{
        transform:scale(1);
        filter:contrast(1) saturate(1);
    }

    42%{
        transform:scale(1.018);
        filter:contrast(1.16) saturate(1.28);
    }

    68%{
        transform:scale(.994);
        filter:contrast(1.04) saturate(1.12);
    }
}

@keyframes expImpactPlayerShake{
    0%,100%{
        transform:translate(0,0);
    }

    35%{
        transform:translate(3px,-2px);
    }

    70%{
        transform:translate(-2px,3px);
    }
}

@keyframes expImpactGlow{
    0%,100%{
        opacity:.64;
        stroke-width:5.8;
    }

    45%{
        opacity:1;
        stroke-width:8.2;
    }

    72%{
        opacity:.78;
        stroke-width:6.4;
    }
}



@keyframes expGlitchBoard{
    0%,100%{
        transform:translate(0,0);
    }

    18%{
        transform:translate(10px,-4px);
    }

    36%{
        transform:translate(-8px,5px);
    }

    54%{
        transform:translate(5px,8px);
    }

    72%{
        transform:translate(-12px,-3px);
    }
}

@keyframes expGlitchCell{
    0%,100%{
        transform:translate(0,0) scale(1);
        filter:
            drop-shadow(0 10px 16px rgba(0,0,0,.12))
            drop-shadow(0 0 8px rgba(255,255,255,.5));
    }

    25%{
        transform:translate(5px,-2px) scale(1.04);
    }

    50%{
        transform:translate(-4px,3px) scale(.98);
    }

    75%{
        transform:translate(2px,5px) scale(1.02);
    }
}

@keyframes expGlitchPlayer{
    0%,100%{
        transform:translate(0,0);
    }

    33%{
        transform:translate(6px,-3px);
    }

    66%{
        transform:translate(-4px,5px);
    }
}


@keyframes expMatrixScan{
    0%{
        transform:translateX(-42%) skewX(-12deg);
        opacity:0;
    }

    18%{
        opacity:.62;
    }

    100%{
        transform:translateX(42%) skewX(-12deg);
        opacity:0;
    }
}


@keyframes expLoadingBar{
    0%{
        transform:scaleX(.24);
        transform-origin:left center;
        opacity:.72;
    }

    50%{
        transform:scaleX(1);
        transform-origin:center center;
        opacity:1;
    }

    100%{
        transform:scaleX(.24);
        transform-origin:right center;
        opacity:.72;
    }
}

/* EFECTOS FANTASMA — Azul x5 */
@keyframes expGhostCellPulse{
    0%,100%{
        stroke:rgba(255,255,255,.26);
        opacity:.22;
    }

    50%{
        stroke:rgba(255,255,255,.62);
        opacity:.46;
    }
}

@keyframes expGhostPlayablePulse{
    0%,100%{
        stroke:rgba(255,255,255,.52);
        opacity:.56;
    }

    50%{
        stroke:rgba(255,255,255,.98);
        opacity:1;
    }
}

/* ================================= */
/* EFECTO FANTASMA — Azul x5 */
/* ================================= */

.exp-root.fx-ghost .exp-board-wrap{
    transform:none;
    animation:none;
}

/* Caminos y anillos desaparecen */
.exp-root.fx-ghost .exp-base-edge,
.exp-root.fx-ghost .exp-trail,
.exp-root.fx-ghost .exp-layer-ring{
    opacity:0;
    animation:none;
    filter:none;
}

/* Todas las casillas quedan como huellas blancas */
.exp-root.fx-ghost .exp-cell{
    fill:transparent !important;
    stroke:rgba(255,255,255,.42) !important;
    stroke-width:5.5;

    opacity:.34;
    filter:none;

    animation:expGhostCellPulse 4.2s ease-in-out infinite;
    animation-delay:var(--wave-delay, 0s);
}

/* Jugables más claras todavía */
.exp-root.fx-ghost .exp-cell.is-playable{
    stroke:rgba(255,255,255,.74) !important;
    stroke-width:7;

    opacity:.76;

    animation:expGhostPlayablePulse 3.6s ease-in-out infinite;
    animation-delay:var(--wave-delay, 0s);
}

/* No jugables: apenas visibles, pero presentes */
.exp-root.fx-ghost .exp-cell.is-filler{
    stroke:rgba(255,255,255,.22) !important;
    stroke-width:2.4;
    opacity:.16;
    animation-duration:5.2s;
}

/* La disponible se entiende con más claridad */
.exp-root.fx-ghost .exp-cell.is-available{
    stroke:#FFFFFF !important;
    stroke-width:8.5;
    opacity:1;

    filter:
        drop-shadow(0 0 10px rgba(255,255,255,.45));
}

/* El personaje se mantiene visible */
.exp-root.fx-ghost .exp-player{
    animation:none;
    transform:none;

    filter:
        drop-shadow(0 10px 18px rgba(0,0,0,.22))
        drop-shadow(0 0 14px rgba(255,255,255,.9));
}

/* ================================= */
/* REVELADO DE COLOR EN EFECTO FANTASMA */
/* ================================= */

.exp-root.fx-ghost .exp-cell.is-near-cursor{
    animation:none !important;

    opacity:1 !important;
    stroke-width:8 !important;

    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.85))
        drop-shadow(0 8px 16px rgba(0,0,0,.14)) !important;
}

.exp-root.fx-ghost .exp-cell.is-near-cursor[data-color="blue"]{
    fill:rgba(0,143,184,.42) !important;
    stroke:rgba(0,143,184,.95) !important;
}

.exp-root.fx-ghost .exp-cell.is-near-cursor[data-color="green"]{
    fill:rgba(106,170,44,.42) !important;
    stroke:rgba(106,170,44,.95) !important;
}

.exp-root.fx-ghost .exp-cell.is-near-cursor[data-color="red"]{
    fill:rgba(214,36,22,.38) !important;
    stroke:rgba(214,36,22,.95) !important;
}

.exp-root.fx-ghost .exp-cell.is-near-cursor[data-color="yellow"]{
    fill:rgba(255,221,14,.55) !important;
    stroke:rgba(255,221,14,1) !important;
}

/* ================================= */
/* FANTASMA — DIFERENCIA DE CASILLAS */
/* ================================= */

/*
    Casillas jugables pero NO habilitadas:
    se revela solo el trazo de color, sin relleno.
*/
.exp-root.fx-ghost .exp-cell.is-near-cursor.is-playable:not(.is-available):not(.is-current)[data-color="blue"]{
    fill:transparent !important;
    stroke:rgba(0,143,184,.95) !important;
}

.exp-root.fx-ghost .exp-cell.is-near-cursor.is-playable:not(.is-available):not(.is-current)[data-color="green"]{
    fill:transparent !important;
    stroke:rgba(106,170,44,.95) !important;
}

.exp-root.fx-ghost .exp-cell.is-near-cursor.is-playable:not(.is-available):not(.is-current)[data-color="red"]{
    fill:transparent !important;
    stroke:rgba(214,36,22,.95) !important;
}

.exp-root.fx-ghost .exp-cell.is-near-cursor.is-playable:not(.is-available):not(.is-current)[data-color="yellow"]{
    fill:transparent !important;
    stroke:rgba(255,221,14,1) !important;
}

/*
    Casillas habilitadas:
    se mantienen con trazo y relleno de color.
*/
.exp-root.fx-ghost .exp-cell.is-near-cursor.is-available{
    stroke-width:8.5 !important;

    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.85))
        drop-shadow(0 8px 16px rgba(0,0,0,.14)) !important;
}

/*
    Casillas no jugables:
    se mantienen como están actualmente,
    con trazo y relleno de color.
*/
.exp-root.fx-ghost .exp-cell.is-near-cursor.is-filler{
    stroke-width:8 !important;
    opacity:1 !important;
}

/* ================================= */
/* EFECTO AGUJERO — Rojo x5 */
/* ================================= */

.exp-board-screen,
.exp-board-wrap{
    transition:
        background-color .28s ease,
        filter .35s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.exp-root.fx-blackhole .exp-board-wrap::before{
    opacity:0;
    background:none;
    filter:none;
    transform:none;
}

.exp-root.fx-blackhole .exp-board-screen,
.exp-root.fx-blackhole .exp-board-wrap{
    background:#000;
}

.exp-root.fx-blackhole .exp-board-wrap{
    transform:none;
    animation:none;

    filter:none;
}

/* Se elimina lectura tipo mandala */
.exp-root.fx-blackhole .exp-base-edge,
.exp-root.fx-blackhole .exp-layer-ring,
.exp-root.fx-blackhole .exp-fog{
    opacity:0;
    filter:none;
    animation:none;
}

/* Casillas como piezas desplazadas */
.exp-root.fx-blackhole .exp-cell{
    opacity:.62;

    filter:
        drop-shadow(0 0 7px currentColor);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        fill .25s ease,
        stroke .25s ease,
        opacity .25s ease,
        filter .25s ease;
}

/* Jugables más presentes */
.exp-root.fx-blackhole .exp-cell.is-playable{
    opacity:.78;
    stroke-width:5.8;

    animation:expBlackholeZRing var(--blackhole-duration, 3.2s) cubic-bezier(.2,.8,.2,1) infinite;
    animation-delay:var(--blackhole-delay, 0s);

    transform-origin:center;
    transform-box:fill-box;

    will-change:transform, opacity, filter;
}

/* Filler muy sutil */
.exp-root.fx-blackhole .exp-cell.is-filler{
    opacity:.18;
    stroke-width:2.4;
    fill:rgba(255,255,255,.025) !important;
    stroke:rgba(255,255,255,.18) !important;

    animation:expBlackholeZRingFiller var(--blackhole-duration, 7.4s) ease-in-out infinite;
    animation-delay:var(--blackhole-delay, 0s);

    transform-origin:center;
    transform-box:fill-box;

    filter:
        drop-shadow(0 0 6px rgba(255,255,255,.06));
}

/* Colores drenados, no brillantes */
.exp-root.fx-blackhole .exp-cell[data-color="blue"].is-playable{
    fill:rgba(0,143,184,.42) !important;
    stroke:rgba(0,180,230,1) !important;
    color:rgba(0,180,230,.75);
}

.exp-root.fx-blackhole .exp-cell[data-color="green"].is-playable{
    fill:rgba(106,170,44,.42) !important;
    stroke:rgba(130,210,58,1) !important;
    color:rgba(130,210,58,.75);
}

.exp-root.fx-blackhole .exp-cell[data-color="red"].is-playable{
    fill:rgba(214,36,22,.48) !important;
    stroke:rgba(255,67,48,1) !important;
    color:rgba(255,67,48,.78);
}

.exp-root.fx-blackhole .exp-cell[data-color="yellow"].is-playable{
    fill:rgba(255,221,14,.50) !important;
    stroke:rgba(255,221,14,1) !important;
    color:rgba(255,221,14,.78);
}

.exp-root.fx-blackhole .exp-cell[data-color="blue"].is-filler{
    fill:rgba(0,143,184,.24) !important;
    stroke:rgba(0,143,184,.78) !important;
    color:rgba(0,143,184,.58);
}

.exp-root.fx-blackhole .exp-cell[data-color="green"].is-filler{
    fill:rgba(106,170,44,.24) !important;
    stroke:rgba(106,170,44,.76) !important;
    color:rgba(106,170,44,.58);
}

.exp-root.fx-blackhole .exp-cell[data-color="red"].is-filler{
    fill:rgba(214,36,22,.28) !important;
    stroke:rgba(214,36,22,.82) !important;
    color:rgba(214,36,22,.62);
}

.exp-root.fx-blackhole .exp-cell[data-color="yellow"].is-filler{
    fill:rgba(255,221,14,.30) !important;
    stroke:rgba(255,221,14,.86) !important;
    color:rgba(255,221,14,.62);
}

.exp-root.fx-blackhole .exp-cell.is-filler,
.exp-root.fx-blackhole .exp-cell.is-depth-far.is-filler,
.exp-root.fx-blackhole .exp-cell.is-depth-fog.is-filler{
    opacity:.42;
}

.exp-root.fx-blackhole .exp-cell.is-playable{
    opacity:.94;
}

/* Caminos locales del Agujero */
.exp-blackhole-guide{
    pointer-events:none;

    stroke:rgba(255,255,255,.62);
    stroke-width:4.6;
    stroke-linecap:round;

    opacity:0;

    filter:
        drop-shadow(0 0 8px rgba(255,255,255,.24))
        drop-shadow(0 0 12px rgba(214,36,22,.16));

    transition:
        opacity .32s ease,
        stroke-width .32s ease,
        filter .32s ease;
}

.exp-blackhole-guide.is-visible{
    opacity:.24;
    stroke-width:2.8;

    filter:none;
}

/* Rastro del usuario */
.exp-root.fx-blackhole .exp-trail{
    opacity:.88;
    stroke-width:18;

    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.24))
        drop-shadow(0 0 18px rgba(214,36,22,.22));
}

/* Actual y disponibles */
.exp-root.fx-blackhole .exp-cell.is-current{
    opacity:1;
    stroke:var(--exp-player-color) !important;
    stroke-width:10;
}

.exp-root.fx-blackhole .exp-cell.is-available{
    opacity:1;
    stroke:rgba(255,255,255,.74) !important;
    stroke-width:6.2;

    filter:
        drop-shadow(0 0 6px rgba(255,255,255,.28))
        drop-shadow(0 6px 12px rgba(0,0,0,.26));
}

.exp-root.fx-blackhole .exp-cell-core.is-available{
    opacity:1;

    fill:rgba(255,255,255,.70);
    stroke:rgba(255,255,255,.70);
    stroke-width:1.4;

    filter:none;
}

.exp-root.fx-blackhole .exp-cell-core.is-current{
    opacity:.72;

    fill:rgba(255,255,255,.42);
    stroke:var(--exp-player-color);
    stroke-width:2.2;

    filter:none;
}

/* Personaje estable */
.exp-root.fx-blackhole .exp-player{
    animation:none;
    transform:none;

    filter:
        drop-shadow(0 10px 18px rgba(0,0,0,.44))
        drop-shadow(0 0 18px rgba(255,255,255,.72));
}

@keyframes expBlackholeZRing{
    0%, 100%{
        transform:scale(var(--z-far-scale, .88));
        opacity:.48;

        filter:
            drop-shadow(0 1px 4px rgba(0,0,0,.34));
    }

    22%{
        transform:scale(var(--z-near-scale, 1.22));
        opacity:1;

        filter:
            drop-shadow(0 0 20px rgba(255,255,255,.28))
            drop-shadow(0 20px 34px rgba(0,0,0,.48));
    }

    34%{
        transform:scale(1.02);
        opacity:.82;

        filter:
            drop-shadow(0 8px 15px rgba(0,0,0,.36));
    }

    72%{
        transform:scale(var(--z-far-scale, .88));
        opacity:.52;

        filter:
            drop-shadow(0 1px 4px rgba(0,0,0,.32));
    }
}

@keyframes expBlackholeZRingSoft{
    0%, 100%{
        transform:scale(.92);
        opacity:.04;
    }

    28%{
        transform:scale(1.04);
        opacity:.13;
    }

    58%{
        transform:scale(.96);
        opacity:.07;
    }
}

@keyframes expBlackholeZRingFiller{
    0%,100%{
        transform:scale(var(--z-far-scale, .92));
        opacity:.16;

        filter:
            drop-shadow(0 0 5px rgba(255,255,255,.10))
            drop-shadow(0 1px 3px rgba(0,0,0,.24));
    }

    24%{
        transform:scale(var(--z-near-scale, 1.08));
        opacity:.42;

        filter:
            drop-shadow(0 0 14px rgba(255,255,255,.18))
            drop-shadow(0 8px 16px rgba(0,0,0,.34));
    }

    52%{
        transform:scale(.98);
        opacity:.28;

        filter:
            drop-shadow(0 0 8px rgba(255,255,255,.12))
            drop-shadow(0 3px 8px rgba(0,0,0,.28));
    }

    78%{
        transform:scale(var(--z-far-scale, .92));
        opacity:.18;
    }
}

/* ================================= */
/* PROGRESO RECTANGULAR EXPERIMENTACIÓN */
/* ================================= */

.exp-progress-status{
    position:absolute;
    right:28px;
    bottom:342px;
    left:auto;
    top:auto;

    z-index:36;

    width:360px;

    padding:14px 16px 15px;

    border-radius:20px;

    background:rgba(255,221,14,.82);

    box-shadow:
        0 12px 34px rgba(0,0,0,.10),
        inset 0 0 0 1px rgba(255,255,255,.48);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.exp-progress-status span{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:nowrap;
    white-space:nowrap;

    margin-bottom:9px;

    color:#333;

    font-size:.82rem;
    font-weight:700;
    letter-spacing:.01em;
}

.exp-progress-text{
    opacity:.78;
    margin-right:2px;
    animation:expGoalPulse 2.4s ease-in-out infinite;
}

.exp-progress-cells{
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap;
}

.exp-progress-plus{
    color:#333;
    font-size:.72rem;
    font-weight:800;
    opacity:.65;
}

.exp-progress-cell{
    position:relative;

    width:20px;
    height:20px;

    display:inline-block;
    flex:0 0 auto;

    vertical-align:middle;
}

.exp-progress-cell::before{
    content:"";
    position:absolute;
    inset:0;

    clip-path:polygon(
        30% 0%,
        70% 0%,
        100% 30%,
        100% 70%,
        70% 100%,
        30% 100%,
        0% 70%,
        0% 30%
    );

    background:currentColor;

    filter:
        drop-shadow(0 0 0 rgba(236,236,236,.75))
        drop-shadow(0 4px 8px rgba(0,0,0,.10));
}

.exp-progress-cell::after{
    content:"";
    position:absolute;

    top:50%;
    left:50%;

    width:7px;
    height:7px;

    border-radius:50%;

    background:rgba(236,236,236,.78);

    transform:translate(-50%, -50%);
}

.exp-progress-cell--blue{
    color:var(--blue);
}

.exp-progress-cell--green{
    color:var(--green);
}

.exp-progress-cell--red{
    color:var(--red);
}

.exp-progress-track{
    width:100%;
    height:10px;

    border-radius:999px;

    background:rgba(236,236,236,.62);

    overflow:hidden;
}

.exp-progress-track i{
    display:block;

    width:0%;
    height:100%;

    border-radius:999px;

    background:#333;

    transition:width .45s ease;
}


/* ================================= */
/* CIERRE DE EXPERIENCIA */
/* ================================= */

.exp-ending{
    position:absolute;
    inset:0;
    z-index:95;

    display:grid;
    place-items:center;

    overflow:hidden;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    background:transparent;

    transition:
        opacity .35s ease,
        visibility .35s ease,
        background .85s ease;
}

.exp-ending.is-ending-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.exp-ending.is-ending-revealed{
    background:
        radial-gradient(circle at 88% 82%, rgba(255,221,14,.34), transparent 24%),
        radial-gradient(circle at 76% 66%, rgba(255,230,118,.30), transparent 30%),
        radial-gradient(circle at 18% 18%, rgba(255,247,197,.22), transparent 22%),
        linear-gradient(180deg, #F7EDB7 0%, #F1DB61 100%);
}

.exp-ending-wave{
    position:absolute;
    right:-18vmax;
    bottom:-14vmax;
    z-index:1;

    width:110vmax;
    height:110vmax;

    border-radius:48% 38% 56% 44%;

    background:
        radial-gradient(circle at 32% 30%, rgba(255,255,255,.22), transparent 22%),
        radial-gradient(circle at 54% 42%, rgba(255,235,118,.96), transparent 30%),
        radial-gradient(circle at 68% 60%, rgba(255,208,38,.82), transparent 34%),
        linear-gradient(145deg, #FFEA59, #F3BE22);

    opacity:0;

    transform:
        translate(22%, 18%)
        rotate(10deg)
        scale(.08);
}

.exp-ending-wave::before,
.exp-ending-wave::after{
    content:"";
    position:absolute;

    border-radius:44% 56% 36% 64%;

    background:
        radial-gradient(circle at 32% 42%, rgba(255,255,255,.22), transparent 20%),
        radial-gradient(circle at 68% 52%, rgba(255,255,255,.14), transparent 28%),
        linear-gradient(140deg, rgba(255,239,134,.74), rgba(255,210,52,.48));

    animation:expEndingWaterDrift 5.8s ease-in-out infinite;
}

.exp-ending-wave::before{
    inset:-10% -6% -14% -12%;
    transform:rotate(-8deg);
}

.exp-ending-wave::after{
    inset:-18% -16% -8% -10%;
    opacity:.56;
    transform:rotate(10deg);
    animation-duration:7.2s;
    animation-direction:reverse;
}

.exp-ending.is-ending-active .exp-ending-wave{
    animation:expEndingFlood 1.85s cubic-bezier(.74,0,.18,1) forwards;
}

.exp-ending-content{
    position:relative;
    z-index:2;

    width:min(var(--ending-total-width), calc(100vw - 56px));
    min-height:min(720px, calc(100dvh - 72px));

    display:grid;
    grid-template-columns:minmax(0, var(--ending-card-width)) var(--ending-side-width);
    column-gap:var(--ending-gap);
    align-items:center;
    justify-content:center;

    opacity:0;
    transform:none;

    transition:
        opacity .72s ease;
}

.exp-ending.is-ending-revealed .exp-ending-content{
    opacity:1;
    transform:none;
}

.exp-ending-card{
    width:100%;
    min-height:clamp(540px, 70dvh, 640px);

    grid-column:1;

    display:grid;
    grid-template-columns:minmax(390px, .96fr) minmax(360px, 1.04fr);
    align-items:center;
    gap:clamp(24px, 3vw, 44px);

    padding:clamp(28px, 4vw, 52px);

    border-radius:34px;

    background:rgba(255,252,244,.94);

    box-shadow:
        0 28px 90px rgba(0,0,0,.16),
        inset 0 0 0 1px rgba(255,255,255,.82);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.exp-ending-kicker{
    margin:0 0 12px;

    color:#C09A13;

    font-size:.76rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.exp-ending-title{
    margin:0;

    color:#222;

    font-size:clamp(2.15rem, 3.75vw, 4.25rem);
    line-height:.92;
    font-weight:800;
    letter-spacing:-.045em;

    max-width:none;

    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
}

.exp-ending-title span{
    display:block;
    white-space:nowrap;
}

.exp-ending-text{
    max-width:30ch;
    margin:22px 0 0;

    color:rgba(35,35,35,.66);

    font-size:clamp(.98rem, 1.35vw, 1.12rem);
    line-height:1.55;
    font-weight:400;
}

.exp-ending-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.exp-ending-qr{
    margin-top:26px;

    display:flex;
    align-items:flex-end;
    gap:14px;

    max-width:360px;
}

.exp-ending-qr-box{
    width:116px;
    height:116px;

    flex:0 0 auto;

    display:grid;
    place-items:center;

    padding:7px;

    background:#fff;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.08),
        0 10px 22px rgba(0,0,0,.08);
}

.exp-ending-qr-box canvas{
    width:100% !important;
    height:100% !important;
    display:block;
}

.exp-ending-qr-box span{
    color:rgba(35,35,35,.34);

    font-size:.8rem;
    font-weight:800;
}

.exp-ending-qr p{
    margin:0 0 4px;

    color:#222;

    font-size:.72rem;
    font-weight:700;
    line-height:1.25;
}

.exp-ending-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.exp-ending-qr{
    margin-top:26px;

    display:flex;
    align-items:flex-end;
    gap:14px;

    max-width:360px;
}

.exp-ending-qr-box{
    width:190px;
    height:190px;

    flex:0 0 auto;

    display:grid;
    place-items:center;

    padding:7px;

    background:#fff;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.08),
        0 10px 22px rgba(0,0,0,.08);
}

.exp-ending-qr-box canvas{
    width:100% !important;
    height:100% !important;
    display:block;
}

.exp-ending-qr-box span{
    color:rgba(35,35,35,.34);

    font-size:.8rem;
    font-weight:800;
}

.exp-ending-qr p{
    margin:0 0 4px;

    color:#222;

    font-size:.72rem;
    font-weight:700;
    line-height:1.25;
}

.exp-ending-map{
    aspect-ratio:1 / 1;
    min-height:330px;

    border-radius:28px;

    overflow:hidden;

    background:
        radial-gradient(circle at 50% 50%, rgba(255,221,14,.13), transparent 46%),
        linear-gradient(135deg, #F8F6EF, #FFFFFF);

    box-shadow:
        inset 0 0 0 1px rgba(30,30,30,.08),
        inset 0 24px 80px rgba(255,221,14,.10);
}

.exp-ending-svg{
    width:100%;
    height:100%;
    display:block;
}

.exp-ending-route{
    fill:none;

    stroke-linecap:round;
    stroke-linejoin:round;

    opacity:.76;

    animation:expEndingDrawRoute .76s ease forwards;
}

.exp-ending-route--ghost{
    opacity:.13;
}

.exp-ending-point{
    opacity:0;

    transform-box:fill-box;
    transform-origin:center;

    animation:expEndingPointIn .38s ease forwards;
}

.exp-ending-point-core{
    fill:white;
    stroke-width:5;
}

.exp-ending-point--start,
.exp-ending-point--end{
    stroke-width:7;
}

.exp-ending-actions{
    position:fixed;
    top:var(--ending-actions-top);
    left:var(--ending-side-left);
    right:auto;
    z-index:111;

    width:var(--ending-side-width);

    display:flex;
    flex-direction:column;
    gap:12px;

    transform:none;
}

.exp-ending-button{
    appearance:none;

    border:none;
    border-radius:999px;

    padding:14px 20px;

    font:inherit;
    font-weight:800;
    line-height:1;

    text-decoration:none;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background-color .22s ease,
        color .22s ease,
        background-position .35s ease;
}

.exp-ending-button:hover{
    transform:translateY(-2px);
}

/* Reiniciar: botón con colores del juego */
.exp-ending-button--reset{
    background:
        linear-gradient(
            135deg,
            var(--green) 0%,
            var(--blue) 48%,
            var(--red) 100%
        );

    background-size:180% 180%;
    background-position:0% 50%;

    color:white;

    box-shadow:
        0 14px 30px rgba(0,0,0,.18);
}

.exp-ending-button--reset:hover{
    background-position:100% 50%;

    color:white;

    box-shadow:
        0 18px 38px rgba(0,0,0,.22);
}

/* Volver al inicio: blanco → negro */
.exp-ending-button--back{
    background:white;
    color:#222;

    box-shadow:
        0 12px 28px rgba(0,0,0,.12);
}

.exp-ending-button--back:hover{
    background:#222;
    color:white;

    box-shadow:
        0 16px 34px rgba(0,0,0,.20);
}

.exp-root.is-ending-locked .exp-board-svg,
.exp-root.is-ending-locked .exp-cell{
    pointer-events:none;
}

.exp-root.is-ending-locked .exp-board-actions,
.exp-root.is-ending-locked .exp-progress-status,
.exp-root.is-ending-locked .exp-final-overlay{
    opacity:0;
    pointer-events:none;
}

@keyframes expEndingFlood{
    0%{
        opacity:0;
        transform:
            translate(24%, 18%)
            rotate(10deg)
            scale(.08);
    }

    12%{
        opacity:1;
    }

    44%{
        opacity:1;
        transform:
            translate(6%, 6%)
            rotate(7deg)
            scale(.85);
    }

    72%{
        opacity:1;
        transform:
            translate(-12%, -10%)
            rotate(5deg)
            scale(1.35);
    }

    100%{
        opacity:.94;
        transform:
            translate(-44%, -36%)
            rotate(2deg)
            scale(2.15);
    }
}

@keyframes expEndingWaterDrift{
    0%,100%{
        transform:rotate(0deg) scale(1);
    }

    50%{
        transform:rotate(8deg) scale(1.05);
    }
}

@keyframes expEndingDrawRoute{
    to{
        stroke-dashoffset:0;
    }
}

@keyframes expEndingPointIn{
    0%{
        opacity:0;
        transform:scale(.2);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }
}


/* ================================= */
/* RESPONSIVE FINAL */
/* ================================= */

@media (max-width:1280px){
    .exp-root{
        --ending-card-width:clamp(760px, 58vw, 880px);
        --ending-side-width:300px;
        --ending-gap:36px;
    }

    .exp-ending-card{
        grid-template-columns:minmax(340px, .95fr) minmax(320px, 1.05fr);
    }

    .exp-ending-title{
        font-size:clamp(2rem, 4.2vw, 3.55rem);
    }
}

@media (max-width:768px){
    .exp-entry-center{
        transform:scale(1.08);
    }

    .exp-progress-status{
        right:16px;
        bottom:285px;
        left:auto;
        top:auto;

        width:245px;
    }

    .exp-board-actions{
        top:18px;
        right:18px;
        left:auto;
        transform:none;
    }

    .exp-effects-panel{
        right:16px;
        bottom:16px;
        width:215px;
    }

    .exp-combo-panel{
        right:16px;
        bottom:16px;
        width:245px;
    }

    .exp-combo-row{
        gap:6px;
    }

    .exp-combo-row strong{
        font-size:.64rem;
    }

    .exp-final-overlay{
        right:16px;
        bottom:385px;
        width:245px;
    }

    .exp-ending-content{
        width:calc(100vw - 22px);
        min-height:auto;
    }

    .exp-ending-card{
        width:100%;
        min-height:auto;

        grid-template-columns:1fr;
        gap:20px;

        padding:22px;
        border-radius:26px;
    }

    .exp-ending-title{
        max-width:100%;
        font-size:clamp(2rem, 10vw, 3.6rem);
    }

    .exp-ending-map{
        min-height:240px;
    }

    .exp-ending-actions{
        position:static;
        width:100%;
        margin-top:16px;

        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .exp-ending-button{
        padding:12px 18px;
        font-size:.9rem;
    }

    .exp-combo-panel.is-ending-centered{
        top:18px;
        left:12px;
        right:auto;
        bottom:auto;

        width:calc(100vw - 24px);
        padding:14px;

        transform:none;
    }

    .exp-combo-panel.is-ending-centered .exp-combo-title{
        margin-bottom:2px;
    }

    .exp-ending-qr{
        width:100%;
        margin-top:20px;

        justify-content:flex-start;
        gap:12px;
    }

    .exp-ending-qr-box{
        width:160px;
        height:160px;
    }

    .exp-ending-qr p{
        font-size:.68rem;
    }
}