:root{

--bg:#050816;

--card:rgba(18,25,50,.75);

--cyan:#00e5ff;

--purple:#7c3aed;

--text:#ffffff;

--light:#f0d9b5;

--dark:#b58863;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

font-family:'Outfit',sans-serif;

background:var(--bg);

color:white;

min-height:100vh;

overflow-x:hidden;

position:relative;

}

.bg-layer{

position:fixed;

inset:0;

background:

radial-gradient(

circle at top,

rgba(0,229,255,.15),

transparent 40%

);

z-index:-1;

animation:bgMove 8s infinite alternate;

}

@keyframes bgMove{

from{

transform:translateY(-40px);

}

to{

transform:translateY(40px);

}

}

.hero-card,
.game-card{
    width:100%;
    max-width:760px;
    margin:auto;
    background:var(--card);
    backdrop-filter:blur(25px);
    border-radius:30px;
    padding:25px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 15px 50px rgba(0,0,0,.4);

}

.hero-card{

    margin-top:40px;
    text-align:center;

}

.hero-card h1{

  font-family:'Orbitron';
  font-size:2rem;
  margin-bottom:10px;
  background:
  linear-gradient(
  90deg,
  white,
  var(--cyan)
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

}

.hero-card p{

  opacity:.7;
  margin-bottom:25px;

}

.top-info{

display:flex;

justify-content:space-between;

gap:10px;

margin-bottom:20px;

flex-wrap:wrap;

}

.status-pill{

padding:12px 18px;

background:

linear-gradient(
135deg,
var(--cyan),
var(--purple)
);

border-radius:50px;

font-weight:700;

}

.status-mini{

padding:12px;

background:

rgba(255,255,255,.06);

border-radius:50px;

font-size:.8rem;

}

.board{
    display:grid;
    grid-template-columns:repeat(8,1fr);

    width:min(90vw,700px);
    height:min(90vw,700px);

    margin:auto;
    overflow:hidden;

    border-radius:24px;

    border:4px solid #2b2b2b;

    box-shadow:
        0 20px 40px rgba(0,0,0,.45),
        0 0 30px rgba(0,229,255,.20);

    touch-action:manipulation;
}

.square{
    aspect-ratio:1/1;

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

    position:relative;

    cursor:pointer;
    user-select:none;

    transition:.25s;

    font-size:clamp(28px,4vw,52px);
}

.square.bianco{

    color:#ffffff;

    text-shadow:
        0 1px 0 #fff,
        0 2px 0 #f0f0f0,
        0 3px 0 #d9d9d9,
        0 4px 6px rgba(0,0,0,.45);

    filter:
        drop-shadow(0 4px 6px rgba(0,0,0,.45));

}

.square.nero{

    color:#1a1a1a;

    text-shadow:
        0 1px 0 #555,
        0 2px 0 #333,
        0 3px 0 #111,
        0 4px 8px rgba(0,0,0,.75);

    filter:
        drop-shadow(0 4px 6px rgba(0,0,0,.60));

}

.square.bianco:hover,
.square.nero:hover{

    transform:scale(1.12);

}

.square:hover{

    transform:scale(1.04);

}

.square::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to bottom,
        rgba(255,255,255,.15),
        transparent 40%
    );

    pointer-events:none;

}

.piece3d{
    width:80%;
    height:80%;
    object-fit:contain;
    pointer-events:none;
}

.light{
    background:
    linear-gradient(
        135deg,
        #f8e4c4,
        #e7cfa3
    );
}

.dark{
    background:
    linear-gradient(
        135deg,
        #c49a6c,
        #9b6f44
    );
}

.highlight{

background:#00e5ff50!important;

}

.move-target{

background:#00ff8050!important;

}

.check{

background:#ff333350!important;

}

.last-move{

box-shadow:
inset 0 0 0 4px gold;

}

.controls{

display:grid;

grid-template-columns:
1fr 1fr;

gap:15px;

}

.euro-btn{

border:none;

padding:14px;

font-weight:700;

border-radius:20px;

background:

linear-gradient(
135deg,
var(--cyan),
var(--purple)
);

color:white;

}

.euro-btn-outline{

border:1px solid rgba(255,255,255,.1);

color:white;

border-radius:20px;

padding:14px;

background:transparent;

}

.game-over-overlay,
.promotion-overlay{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:

rgba(0,0,0,.8);

padding:20px;

z-index:999;

}

.result-card,
.promotion-box{

padding:30px;

border-radius:30px;

background:var(--card);

text-align:center;

}

.promotion-pieces{

display:flex;

gap:10px;

justify-content:center;

margin-top:15px;

}

.hidden{

  display:none!important;

}

@media (max-width:992px){

    .board{

        width:min(
            calc(100vw - 24px),
            560px
        );

    }

}

@media (max-width:768px){

    .board{

        width:min(
            calc(100vw - 20px),
            460px
        );

    }

}

@media (max-width:576px){

    .board{

        width:
            calc(
                100vw - 18px
            );

        border-radius:18px;

    }

    .square{

        font-size:
            clamp(
                1rem,
                8vw,
                2rem
            );

    }

}

@media (max-width:380px){

    .board{

        width:
            calc(
                100vw - 10px
            );

        border-radius:14px;

    }

    .square{

        font-size:
            clamp(
                .9rem,
                7vw,
                1.5rem
            );

    }

}