/* =========================================================
FILE: style.css
========================================================= */

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

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

body{
    background:
        radial-gradient(circle at top,#1f2f5e 0%,#050816 55%,#000 100%);
    min-height:100vh;
    font-family:'Orbitron',sans-serif;
    color:white;
    overflow-x:hidden;
}

/* PARTICLES */

.particles{
    position:fixed;
    inset:0;
    background-image:
        radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px);
    background-size:28px 28px;
    opacity:0.2;
    animation:particlesMove 25s linear infinite;
    pointer-events:none;
}

@keyframes particlesMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-250px);
    }

}

/* GLASS */

.glass-box{
    padding:40px;
    border-radius:35px;
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:
        0 0 30px rgba(0,255,255,0.1),
        inset 0 0 20px rgba(255,255,255,0.04);
}

.main-title{
    font-size:4rem;
    font-weight:900;
    letter-spacing:6px;
    text-shadow:
        0 0 15px cyan,
        0 0 30px cyan;
}

.subtitle{
    opacity:0.75;
    margin-top:15px;
}

/* BUTTONS */

.btn-neon,
.btn-guide{

    border:none;
    padding:14px 30px;
    border-radius:50px;
    font-weight:700;
    transition:0.3s;
}

.btn-neon{
    background:linear-gradient(45deg,#00f0ff,#00ff88);
    color:black;
    box-shadow:0 0 25px rgba(0,255,255,0.5);
}

.btn-guide{
    background:rgba(255,255,255,0.08);
    color:white;
    border:1px solid rgba(255,255,255,0.15);
}

.btn-neon:hover,
.btn-guide:hover{
    transform:translateY(-4px) scale(1.04);
}

/* TABLE */

.table-container{
    padding:25px;
    border-radius:35px;
    background:
        linear-gradient(145deg,#101830,#18234b);
    min-height:650px;
    box-shadow:
        inset 0 0 40px rgba(255,255,255,0.04),
        0 20px 60px rgba(0,0,0,0.6);
}

.table-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.score-box{
    width:100px;
    height:100px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,0.1);
}

.score-box span{
    font-size:2rem;
    font-weight:900;
    color:#00ffff;
}

.board{
    min-height:500px;
    border-radius:25px;
    border:2px dashed rgba(255,255,255,0.15);
    padding:20px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    perspective:1200px;
}

.board-center{
    width:100%;
    text-align:center;
    opacity:0.5;
}

/* PLAYER */

.player-box{
    padding:25px;
    border-radius:30px;
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(10px);
}

.tips-box{
    padding:20px;
    border-radius:20px;
    background:rgba(0,255,255,0.08);
    border:1px solid rgba(0,255,255,0.15);
}

.tips-box ul{
    padding-left:18px;
    margin-bottom:0;
}

.player-hand{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
}

/* DOMINO */

.domino{
    width:85px;
    height:160px;
    background:white;
    border-radius:22px;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    transform-style:preserve-3d;
    transition:0.35s;
    box-shadow:
        0 15px 30px rgba(0,0,0,0.45),
        0 0 25px rgba(0,255,255,0.15);
}

.domino:hover{
    transform:
        rotateY(15deg)
        rotateX(10deg)
        translateY(-10px)
        scale(1.08);
}

.domino.played{
    animation:playAnimation 0.7s ease;
}

@keyframes playAnimation{

    0%{
        transform:
            rotateX(-90deg)
            scale(0.6);
        opacity:0;
    }

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

}

.domino::before{
    content:'';
    position:absolute;
    left:10px;
    right:10px;
    top:50%;
    height:4px;
    background:black;
    transform:translateY(-50%);
}

.domino-half{
    height:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.dots{
    display:grid;
    grid-template-columns:repeat(3,12px);
    gap:7px;
}

.dot{
    width:12px;
    height:12px;
    background:black;
    border-radius:50%;
}

/* MODAL */

.guide-modal{
    background:#07101f;
    color:white;
    border-radius:30px;
}

.guide-section{
    margin-bottom:25px;
}

/* MOBILE */

@media(max-width:768px){

    .main-title{
        font-size:2.2rem;
    }

    .domino{
        width:65px;
        height:120px;
    }

}