*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:sans-serif;
}

body{
    overflow:hidden;
    background:black;
    color:white;
    touch-action:none;
}

/* PANTALLAS */
.screen{
    display:none;
    width:100vw;
    height:100vh;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}

.active{
    display:flex;
}

/* TITULO */
h1{
    margin-bottom:20px;
    text-shadow:0 0 15px cyan;
    text-align:center;
}

/* MENU */
.menuBox{
    display:flex;
    flex-direction:column;
    gap:15px;
    width:90%;
    max-width:320px;
}

button{
    border:none;
    padding:14px 22px;
    border-radius:16px;
    color:white;
    cursor:pointer;
    font-size:16px;

    background:
    linear-gradient(45deg,#00c6ff,#0072ff);

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

    transition:0.2s;
}

button:active{
    transform:scale(0.95);
}

/* GAME */
#game{
    position:relative;
    overflow:hidden;
}

canvas{
    background:#111;
    display:block;
    width:100vw;
    height:100vh;
}

/* TOP UI */
#topUI{
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:10;
}

#topUI button{
    padding:10px 16px;
    font-size:14px;
}

/* INFO */
#info{
    position:absolute;
    top:65px;
    left:15px;
    z-index:10;
    font-size:15px;
}

/* CONTROLES */
#mobileControls{
    position:absolute;
    bottom:18px;
    left:0;

    width:100%;

    display:flex;
    justify-content:space-between;

    padding:0 25px;

    z-index:20;
}

#mobileControls button{

    width:85px;
    height:85px;

    border:none;

    border-radius:50%;

    font-size:0;

    position:relative;

    background:
    linear-gradient(
    145deg,
    #ff00cc,
    #3333ff
    );

    box-shadow:
    0 0 20px rgba(255,0,255,0.7),
    inset 0 0 15px rgba(255,255,255,0.2);

    transition:0.15s;
}

#mobileControls button:active{

    transform:scale(0.92);
}

/* FLECHAS */
#leftBtn::before,
#rightBtn::before{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:22px;
    height:22px;

    border-top:6px solid white;
    border-right:6px solid white;
}

#leftBtn::before{

    transform:
    translate(-35%,-50%)
    rotate(-135deg);
}

#rightBtn::before{

    transform:
    translate(-65%,-50%)
    rotate(45deg);
}

/* SHOP */
#shopContainer{

    width:95%;
    height:92vh;

    background:#111;

    border-radius:20px;

    border:2px solid cyan;

    padding:15px;

    overflow-y:auto;
}

#shopItems{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:15px;

    margin-top:20px;
}

.shopItem{

    background:#1b1b1b;

    border-radius:15px;

    padding:15px;

    text-align:center;

    border:2px solid #333;
}

.skinPreview{

    width:90px;
    height:18px;

    margin:15px auto;

    border-radius:20px;

    box-shadow:
    0 0 10px rgba(255,255,255,0.4);
}

.backBtn{
    margin-top:20px;
    width:100%;
}

/* GAME OVER */
#endScreen{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;
    align-items:center;
    flex-direction:column;

    background:rgba(0,0,0,0.92);

    z-index:50;

    text-align:center;
}

#endScreen h1{
    font-size:38px;
    margin-bottom:15px;
}

#endScreen p{
    margin-bottom:20px;
    font-size:20px;
}

/* FULLSCREEN */
:fullscreen canvas{
    width:100vw;
    height:100vh;
}