:root { --size: min(92vw,420px); }

body{
    margin:0;
    background: radial-gradient(circle at top,#1e293b,#020617);
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#fff;
    font-family:sans-serif;
}

.container{ width:var(--size); margin-top:20px; text-align:center; }

.board-wrap{ position:relative; }

.board{
    width:100%; aspect-ratio:1;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:10px;
    background:#020617;
    border-radius:20px;
}

.cell{
    display:flex; justify-content:center; align-items:center;
    background:#1e293b;
    border-radius:12px;
    font-size:13px;
}

.center{
    grid-column:2/4;
    grid-row:2/4;
    cursor:pointer;
    flex-direction:column;
    user-select:none;
}

.idle{
    background:linear-gradient(135deg,#ff0000,#ffaa00);
    animation:breathe 2s infinite;
}

.running{
    background:linear-gradient(135deg,#facc15,#f97316);
    color:#000;
}

@keyframes breathe{
    0%{filter:brightness(0.7)}
    50%{filter:brightness(1.3)}
    100%{filter:brightness(0.7)}
}

.lights{ position:absolute; inset:0; pointer-events:none; }

.light{
    position:absolute;
    width:calc(25% - 6px);
    height:calc(25% - 6px);
    border-radius:12px;
    opacity:.3;
}

.light.active{
    box-shadow:
            0 0 6px #fff,
            0 0 12px #ffd700,
            0 0 20px #ff8c00;
    opacity:1;
}

button{
    width:100%; padding:10px;
    border:none; border-radius:10px;
    background:#22c55e; color:#fff;
    margin-top:10px;
    cursor:pointer;
}

#shareBtn{ display:none; }
#shareImg{ width:100%; margin-top:15px; border-radius:12px; }

.qr-group{
    display:flex;
    gap:8px;
    margin-top:15px;
    justify-content: space-between;
}

.qr-box{
    width:20%;
    font-size:12px;
    color:#ccc;
    text-align:center;
}
.qr-box img{
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    border-radius:8px;
}