/* ======================================
   CHESSMASTER v6 👾♟️
   DARK GLITCH STYLE
====================================== */


*{
    box-sizing:border-box;
    font-family:monospace;
}



body{

    margin:0;

    background:#050505;

    color:white;

    min-height:100vh;

    overflow-x:hidden;

}




button{

    background:#111;

    color:white;

    border:1px solid #444;

    padding:12px 20px;

    margin:8px;

    cursor:pointer;

    font-size:16px;

}



button:hover{

    background:#222;

    border-color:white;

}




#menu,
#game,
#shopScreen{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:100vh;

}




.hidden{

    display:none !important;

}




h1{

    text-shadow:
    0 0 10px white;

}






/* =====================
   BOARD
===================== */


#board{

    display:grid;

    grid-template-columns:
    repeat(8,70px);

    grid-template-rows:
    repeat(8,70px);


    border:4px solid #333;

}





.square{


width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;


font-size:45px;


}



.lightSquare{

    background:#777;

}



.darkSquare{

    background:#222;

}





.whitePiece{

    color:white;

}



.blackPiece{

    color:black;

}





.move{

    box-shadow:
    inset 0 0 20px white;

}





/* =====================
   SHOP
===================== */


#shopItems{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    max-width:600px;

}





#shopItems button{

    width:150px;

}





/* =====================
   RESULT
===================== */


#resultScreen{

    position:fixed;

    inset:0;

    background:black;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    z-index:20;

}





/* =====================
   GLITCH MODE
===================== */


.glitchBoard .square{

    animation:glitch 0.3s infinite;

}



@keyframes glitch{


0%{

transform:translate(0);

}


50%{

transform:translate(2px,-2px);

}


100%{

transform:translate(0);

}


}





.overlordMode{

    animation:darkPulse 2s infinite;

}




@keyframes darkPulse{


0%{

filter:none;

}


50%{

filter:contrast(150%);

}


100%{

filter:none;

}


}
#coachText{

    position:fixed;

    bottom:15px;

    right:15px;

    background:#111;

    color:white;

    border:1px solid #555;

    padding:12px;

    cursor:pointer;

    z-index:100;

}



#coachPanel{

    position:fixed;

    bottom:70px;

    right:15px;

    width:300px;

    background:#050505;

    color:white;

    border:1px solid #555;

    padding:15px;

    font-family:monospace;

    z-index:101;

}



#coachPanel input{

    width:100%;

    background:#111;

    color:white;

    border:1px solid #444;

    padding:8px;

}
#secretAlienButton{

    position:fixed;

    top:15px;

    right:15px;


    background:transparent;

    border:none;


    font-size:24px;


    opacity:0.25;


    cursor:pointer;


    z-index:150;


    transition:.3s;

}



#secretAlienButton:hover{

    opacity:1;

}
#awakeningScreen{

position:fixed;

inset:0;

background:black;

display:flex;

align-items:center;

justify-content:center;

z-index:999;

opacity:0;

pointer-events:none;

}


#awakeningText{

color:red;

font-size:32px;

font-family:monospace;

opacity:0;

text-align:center;

}



#overlordAlien{

position:fixed;

top:50%;

left:50%;

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

font-size:100px;

opacity:0;

z-index:998;

}



.awakeText{

animation:fadeRed 3s;

}



@keyframes fadeRed{


0%{

opacity:0;

}


30%{

opacity:1;

}


70%{

opacity:1;

}


100%{

opacity:0;

}


}

/* ======================================
   CLASSIC RANDOM GLITCH
====================================== */


.classicGlitch::before{


content:"";


position:fixed;


inset:0;


background:


linear-gradient(

90deg,

transparent 20%,

rgba(255,0,0,.25),

transparent 60%

);



pointer-events:none;


z-index:500;


animation:

classicSlice .12s steps(2);


}



.classicGlitch::after{


content:"";


position:fixed;


inset:0;


background:


repeating-linear-gradient(

0deg,

transparent 0px,

transparent 4px,

rgba(255,255,255,.12) 5px

);



pointer-events:none;


z-index:501;


animation:

classicNoise .2s steps(3);


}





@keyframes classicSlice{


0%{

clip-path:inset(0 0 80% 0);

transform:translateX(-10px);

}


50%{

clip-path:inset(40% 0 30% 0);

transform:translateX(10px);

}


100%{

clip-path:inset(80% 0 0 0);

transform:none;

}


}





@keyframes classicNoise{


0%{

opacity:0;

}


50%{

opacity:1;

}


100%{

opacity:0;

}


}





/* Solo durante el glitch */


.classicGlitch .square{


filter:

contrast(180%);


}





.classicGlitch .whitePiece,
.classicGlitch .blackPiece{


text-shadow:


2px 0 red,


-2px 0 cyan;


}

#secretScreen{

    position:fixed;

    inset:0;

    background:black;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;

}


#secretText{

    color:red;

    font-size:40px;

    font-family:monospace;

    text-shadow:0 0 15px red;

}
/* =====================
   SHOP SCREEN
===================== */

#shopScreen{

    position:fixed;

    inset:0;

    background:#050505;

    z-index:200;

}
#shopScreen{
    position:fixed;
    inset:0;
    background:#050505;
    z-index:200;
    pointer-events:auto;
}


#shopScreen button{
    position:relative;
    z-index:300;
    pointer-events:auto;
}
.hidden{
    display:none !important;
    pointer-events:none !important;
}
#secretScreen.hidden,
#awakeningScreen.hidden{

    display:none !important;
    pointer-events:none !important;

}
#shopScreen{

    position:fixed;

    inset:0;

    z-index:200;

    pointer-events:auto;

}


#shopScreen button{

    pointer-events:auto;

    position:relative;

    z-index:300;

}
/* DEBUG SHOP */
#shopScreen{
    position:fixed !important;
    inset:0 !important;
    z-index:999999 !important;
}


#shopScreen *{
    pointer-events:auto !important;
}


#secretScreen,
#awakeningScreen{

    pointer-events:none !important;

}
#coachText,
#coachPanel{
    z-index:1000000;
}
/* =====================
   AI COMIC OPPONENT
===================== */


#aiOpponent{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:15px;

}


#aiAvatar{

    font-size:70px;

    filter:
    drop-shadow(0 0 10px white);

}



#aiBubble{

    background:#111;

    border:2px solid white;

    color:white;

    padding:15px;

    max-width:280px;

    font-size:16px;

    border-radius:15px;

    position:relative;

}



#aiBubble::before{


    content:"";

    position:absolute;

    left:-18px;

    top:25px;


    border-width:10px;

    border-style:solid;

    border-color:
    transparent white transparent transparent;


}
/* ======================================
   CHESSMASTER v6 REAL SPACE BACKGROUND 👾
====================================== */

body{

    margin:0;

    min-height:100vh;

    background:

    radial-gradient(circle at 50% 50%,
        #151515 0%,
        #050505 60%,
        #000 100%
    );

    color:white;

    position:relative;

    overflow-x:hidden;

}



/* estrellas lejanas */

body::before{

    content:"";

    position:fixed;

    inset:0;


    background-image:

    radial-gradient(1px 1px at 10% 20%, white, transparent),
    radial-gradient(1px 1px at 25% 70%, #aaa, transparent),
    radial-gradient(2px 2px at 40% 35%, white, transparent),
    radial-gradient(1px 1px at 60% 80%, #888, transparent),
    radial-gradient(1px 1px at 75% 25%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, #ddd, transparent),
    radial-gradient(1px 1px at 15% 90%, white, transparent),
    radial-gradient(1px 1px at 85% 10%, #aaa, transparent);


    opacity:.7;


    animation:

    starDrift 40s linear infinite;


    pointer-events:none;

    z-index:0;

}



/* estrellas grandes / brillo */

body::after{

    content:"";

    position:fixed;

    inset:0;


    background-image:

    radial-gradient(
        3px 3px at 30% 15%,
        white,
        transparent
    ),

    radial-gradient(
        2px 2px at 65% 45%,
        white,
        transparent
    ),

    radial-gradient(
        3px 3px at 80% 85%,
        white,
        transparent
    );


    opacity:.5;


    animation:

    twinkle 3s infinite alternate;


    pointer-events:none;

    z-index:0;

}



@keyframes starDrift{

    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(100px);

    }

}



@keyframes twinkle{

    from{

        opacity:.3;

    }


    to{

        opacity:.8;

    }

}



/* contenido encima del espacio */

#menu,
#game,
#shopScreen,
#coachText,
#coachPanel{

    position:relative;

    z-index:1;

}
#coachPanel{

    position:fixed !important;

    top:20px !important;

    right:20px !important;

    left:auto !important;

    bottom:auto !important;

    width:280px;

    background:#111;

    color:white;

    border:2px solid #666;

    border-radius:14px;

    padding:12px;

    z-index:99999;

    box-shadow:0 0 25px rgba(0,0,0,.8);

}
/* ======================================
   FLOATING COACH PANEL 👾🤖
====================================== */


#coachText{

    position:fixed;

    top:20px;

    right:20px;

    background:#111;

    color:white;

    border:2px solid #666;

    padding:12px 16px;

    border-radius:12px;

    cursor:pointer;

    z-index:999998;

    box-shadow:
    0 0 15px rgba(255,255,255,.15);

    max-width:280px;

    font-family:monospace;

}




#coachPanel{

    position:fixed !important;

    top:75px !important;

    right:20px !important;

    left:auto !important;

    bottom:auto !important;


    width:300px;


    background:#050505;


    color:white;


    border:2px solid #555;


    border-radius:15px;


    padding:15px;


    z-index:999999 !important;


    box-shadow:

    0 0 25px rgba(0,0,0,.9);


    font-family:monospace;


}





#coachPanel.hidden{

    display:none !important;

}




#coachPanel input{


    width:100%;


    margin-top:10px;


    padding:10px;


    background:#111;


    color:white;


    border:1px solid #444;


    border-radius:8px;


    outline:none;


}



#coachPanel input:focus{

    border-color:white;

}




/* ======================================
   DRAG HEADER
====================================== */


#coachHeader{


    background:#222;


    padding:8px;


    border-radius:10px;


    margin-bottom:10px;


    cursor:move;


    user-select:none;


    text-align:center;


}



/* ======================================
   COMIC STYLE MESSAGE
====================================== */


#coachText::after{


    content:"";


    position:absolute;


    bottom:-10px;


    right:25px;


    border-width:10px 10px 0;


    border-style:solid;


    border-color:#111 transparent transparent transparent;


}

/* ======================================
   SECRET ALIEN BUTTON 👾
====================================== */

#secretAlienButton{

    display:block;

    position:fixed;

    top:20px;

    right:20px;

    width:45px;

    height:45px;

    background:transparent;

    border:none;

    font-size:24px;

    opacity:.35;

    cursor:pointer;

    z-index:999999999;

    transition:.3s;

}


#secretAlienButton:hover{

    opacity:1;

}
/* ======================================
   FLOATING COACH LEFT SIDE 👾🤖
====================================== */


#coachText{

    position:fixed;

    top:20px;

    left:20px;

    right:auto;

    background:#111;

    color:white;

    border:2px solid #666;

    padding:12px 16px;

    border-radius:12px;

    cursor:pointer;

    z-index:999998;

    box-shadow:
    0 0 15px rgba(255,255,255,.15);

    max-width:280px;

    font-family:monospace;

}



#coachPanel{

    position:fixed !important;

    top:75px !important;

    left:20px !important;

    right:auto !important;

    bottom:auto !important;

    width:300px;

    background:#050505;

    color:white;

    border:2px solid #555;

    border-radius:15px;

    padding:15px;

    z-index:999999 !important;

    box-shadow:
    0 0 25px rgba(0,0,0,.9);

    font-family:monospace;

}