:root{
    --bg:#0b0e13;
    --panel:#111620;
    --tile:#1b2330;
    --tile-top:#2a3342;
    --tile-shadow: rgba(0,0,0,.45);
    --accent:#2b87ff;
    --good:#2ecc71;
    --text:#e9eef7;
    --muted:#9fb0c7;
}

*{
    box-sizing:border-box;
}
html,body{
    height:100%;
}
body{
    margin:0;
    background: radial-gradient(1200px 600px at 20% -10%, #132033 0%, #0b0e13 60%);
    color:var(--text);
    font-family: system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

.topbar{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1rem 2rem;
    background:rgba(12,16,24,.6);
    backdrop-filter: blur(8px);
    position:sticky;
    top:0;
    z-index:3;
    border-bottom:1px solid #1a2332;
}
.topbar h1{
    margin:0;
    font-size: clamp(1rem, 2vw, 1.4rem);
}
.topbar .spacer{
    flex:1;
}

.wrap{
    max-width: min(92vmin, 900px);
    margin: 2rem auto;
    padding: 0 1rem;
}

#hud{
    display:flex;
    gap:.75rem 1rem;
    align-items:center;
    flex-wrap:wrap;
    background:var(--panel);
    border:1px solid #1a2332;
    padding:.75rem 1rem;
    border-radius:14px;
    margin-bottom:1rem;
    box-shadow: 0 10px 30px var(--tile-shadow);
}
#hud > div{
    color:var(--muted);
}

.btn{
    appearance:none;
    border:none;
    cursor:pointer;
    background:#1a2332;
    color:var(--text);
    padding:.55rem .9rem;
    border-radius:10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}
.btn:hover{
    filter:brightness(1.1);
}
.btn.primary{
    background: var(--accent);
    color:#fff;
}

#board{
    width:min(90vmin, 680px);
    height:min(90vmin, 680px);
    margin: 0 auto;
    display:grid;
    gap: clamp(4px, .9vmin, 10px);
    background: #0e1420;
    padding: clamp(4px, .9vmin, 10px);
    border-radius:16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.03);
}

.tile{
    position:relative;
    border-radius:12px;
    background:linear-gradient(180deg, var(--tile-top), var(--tile));
    box-shadow:
        0 18px 30px var(--tile-shadow),
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 -2px 0 rgba(0,0,0,.3);
    overflow:hidden;
    transform-style: preserve-3d;
    transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
    cursor:pointer;
}
.tile::after{
    content:"";
    position:absolute;
    inset:0;
    background-size: var(--bg-size-w) var(--bg-size-h);
    background-image: var(--bg-image);
    background-position: var(--bg-x) var(--bg-y);
    border-radius:inherit;
    filter: contrast(1.04) saturate(1.06);
}
.tile:active{
    transform: translateZ(2px) scale(.995);
}

.tile.empty{
    background: repeating-conic-gradient(from 45deg, #0e1420 0 25%, #101726 0 50%) 0 / 12px 12px;
    box-shadow: inset 0 0 0 2px #172036, inset 0 8px 24px rgba(0,0,0,.6);
    cursor:default;
}

.preview{
    margin:1rem auto 0;
    max-width:min(90vmin,680px);
    background:var(--panel);
    border:1px solid #1a2332;
    border-radius:14px;
    padding:1rem;
}
.preview img{
    width:100%;
    display:block;
    border-radius:10px;
}
.hidden{
    display:none;
}

/* Ustawienie kolumn/wierszy przez JS – ale fallback: */
#board[data-n="3"]{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
#board[data-n="4"]{
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}


.tile { transition: transform .15s ease, box-shadow .12s ease, filter .12s ease; }
/* assets/style.css */
.tile.empty::after { display: none; }