*{
    box-sizing:border-box
}

html,body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#140b06;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif
}

body{
    overscroll-behavior:none;
    touch-action:none
}

#app{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(circle at 50% 20%, rgba(122,72,35,.18), transparent 35%),
        linear-gradient(#351d0f,#140b06)
}

.topbar,.hud{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    background:#31180c;
    font-weight:800;
    letter-spacing:.3px
}

.game-wrap{
    flex:1;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px
}

.game-area{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:18px;
    max-width:100%
}

#game{
    display:block;
    background:#d6a45d;
    border-radius:4px;
    box-shadow:
        0 18px 55px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(255,255,255,.08);
    touch-action:none
}

#next-panel{
    width:116px;
    padding:10px;
    border-radius:12px;
    background:linear-gradient(#32190d,#211006);
    box-shadow:0 8px 28px rgba(0,0,0,.4);
    border:1px solid rgba(255,255,255,.06)
}

.next-title{
    text-align:center;
    font-size:12px;
    font-weight:800;
    margin-bottom:10px;
    color:#f3d29a;
    letter-spacing:.6px
}

.preview{
    width:96px;
    height:74px;
    display:block;
    margin:0 auto 10px;
    background:rgba(0,0,0,.18);
    border-radius:8px;
    border:1px solid rgba(255,255,255,.04)
}

button{
    border:0;
    border-radius:9px;
    padding:11px 28px;
    font-weight:900;
    cursor:pointer;
    background:#f1f1f1;
    color:#111
}

@media (max-width:700px){
    .game-wrap{
        padding:6px
    }

    .game-area{
        gap:8px
    }

    #next-panel{
        width:82px;
        padding:7px
    }

    .preview{
        width:68px;
        height:54px
    }

    .next-title{
        font-size:10px
    }

    .topbar,.hud{
        min-height:52px
    }
}


/* v8 */
.topbar span{
    color:#ffd38e;
}
#next-panel{
    position:relative;
}


/* v9: subtelna informacja o fizyce konstrukcji */
#game{
    transform:translateZ(0);
}


/* v10 */
.topbar{
    gap:14px;
    padding:0 10px;
    font-size:14px;
}
.overlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(13,7,3,.72);
    backdrop-filter:blur(4px);
    z-index:20;
}
.overlay.hidden{
    display:none;
}
.overlay-card{
    min-width:260px;
    padding:26px 28px;
    text-align:center;
    border-radius:18px;
    background:linear-gradient(#4a2815,#241106);
    box-shadow:0 22px 70px rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.08);
}
.overlay-small{
    font-size:12px;
    font-weight:900;
    letter-spacing:1.2px;
    color:#e8c38d;
}
.overlay-level{
    margin:8px 0 4px;
    font-size:58px;
    line-height:1;
    font-weight:900;
    color:#ffd18d;
}
.overlay-score{
    margin-bottom:20px;
    opacity:.8;
}
@media(max-width:700px){
    .topbar{
        font-size:11px;
        gap:6px;
    }
}


/* v11: ranking online */
.rank-title{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    font-size:11px;
    font-weight:900;
    color:#f3d29a;
}
.leaderboard{
    margin:7px 0 0;
    padding-left:22px;
    font-size:10px;
    line-height:1.55;
    color:#f8e7ca;
}
.leaderboard li{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* =========================
   v12 FUTURE / PREMIUM THEME
   ========================= */

:root{
    --bg-1:#050812;
    --bg-2:#090d1a;
    --panel:#0d1424;
    --line:rgba(111,231,255,.18);
    --glow:rgba(80,218,255,.28);
    --text:#eefcff;
    --muted:#8fb5c2;
}

html,body{
    background:
        radial-gradient(circle at 50% -10%, rgba(50,130,255,.17), transparent 40%),
        linear-gradient(180deg,#050812 0%,#03050a 100%);
    color:var(--text);
}

#app{
    background:
        radial-gradient(circle at 20% 25%, rgba(20,210,255,.08), transparent 24%),
        radial-gradient(circle at 85% 65%, rgba(115,55,255,.09), transparent 28%),
        linear-gradient(180deg,#060a13,#03050a);
}

.topbar,.hud{
    background:
        linear-gradient(180deg,rgba(16,28,48,.94),rgba(7,13,25,.96));
    border-color:rgba(122,231,255,.12);
    box-shadow:
        0 10px 35px rgba(0,0,0,.30),
        inset 0 -1px 0 rgba(99,221,255,.08);
    backdrop-filter:blur(12px);
}

.topbar span{
    color:#70e9ff;
    text-shadow:
        0 0 8px rgba(70,225,255,.55),
        0 0 18px rgba(30,130,255,.25);
}

.game-wrap{
    position:relative;
}

.game-wrap::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(77,201,255,.025) 1px, transparent 1px),
        linear-gradient(90deg,rgba(77,201,255,.025) 1px, transparent 1px);
    background-size:28px 28px;
    mask-image:linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

#game{
    border-radius:16px;
    background:#07111c;
    border:1px solid rgba(115,235,255,.22);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 0 22px rgba(30,190,255,.12),
        0 30px 80px rgba(0,0,0,.58);
}

#next-panel{
    background:
        linear-gradient(180deg,rgba(16,29,48,.94),rgba(5,10,20,.96));
    border:1px solid rgba(112,230,255,.16);
    box-shadow:
        0 18px 55px rgba(0,0,0,.45),
        0 0 25px rgba(54,180,255,.08),
        inset 0 0 0 1px rgba(255,255,255,.025);
}

.next-title,.rank-title{
    color:#79eaff;
    text-shadow:0 0 10px rgba(75,226,255,.42);
    letter-spacing:1.15px;
}

.preview{
    background:
        radial-gradient(circle at 50% 35%,rgba(45,176,220,.10),transparent 56%),
        rgba(2,8,16,.70);
    border:1px solid rgba(110,228,255,.10);
    box-shadow:
        inset 0 0 18px rgba(0,0,0,.40),
        0 0 16px rgba(60,190,255,.04);
}

.leaderboard{
    color:#b9dce6;
}

button{
    color:#031018;
    background:linear-gradient(180deg,#8ef2ff,#4ecfe9);
    box-shadow:
        0 0 18px rgba(61,223,255,.24),
        inset 0 1px 0 rgba(255,255,255,.55);
}

button:active{
    transform:translateY(1px);
}

.overlay{
    background:rgba(1,4,10,.78);
}

.overlay-card{
    background:
        linear-gradient(180deg,rgba(17,34,58,.98),rgba(5,11,22,.98));
    border:1px solid rgba(112,230,255,.20);
    box-shadow:
        0 0 35px rgba(55,196,255,.14),
        0 28px 90px rgba(0,0,0,.60);
}

.overlay-small,
.overlay-level{
    color:#75e9ff;
    text-shadow:0 0 16px rgba(70,228,255,.40);
}


/* v13 smooth motion */
#game{
    will-change:transform;
}


/* v14: szybszy, ale nadal płynny ruch */
#game{
    image-rendering:auto;
}