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

*,*::before,*::after{box-sizing:border-box;}

/* ── Dark Theme (Standard) ── */
.bp-container {
    --bp-bg:#1a1a28; --bp-board:#111119; --bp-cell:#252535; --bp-tray:#0e0e1a;
    --bp-border:rgba(255,255,255,0.07); --bp-btn:rgba(255,255,255,0.08);
    --bp-btn-border:rgba(255,255,255,0.12); --bp-text:#f0f0ff;
    --bp-muted:rgba(255,255,255,0.4); --bp-best:#f59e0b;
    --bp-shadow:0 20px 60px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.06);
}
/* ── Light Theme ── */
.bp-container.bp-theme-light {
    --bp-bg:#ffffff; --bp-board:#f0f0f7; --bp-cell:#e2e2ec; --bp-tray:#f5f5fa;
    --bp-border:rgba(0,0,0,0.07); --bp-btn:rgba(0,0,0,0.06);
    --bp-btn-border:rgba(0,0,0,0.1); --bp-text:#1a1a2e;
    --bp-muted:rgba(0,0,0,0.4); --bp-best:#d97706;
    --bp-shadow:0 12px 40px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.06);
}

/* ── Container ── */
.bp-container {
    width:100%;
    max-width:min(96vw,900px);
    background:var(--bp-bg);
    border-radius:18px;
    padding:clamp(12px,3vw,24px);
    box-shadow:var(--bp-shadow);
    color:var(--bp-text);
    font-family:'Inter',sans-serif;
    user-select:none;-webkit-user-select:none;
    cursor:default;
    margin:clamp(8px,2vw,24px) auto;
    position:relative;
    transition:background 0.3s;
    /* DESKTOP-LAYOUT: 3 Spalten nebeneinander */
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:clamp(12px,2vw,22px);
	border: 2px solid #ff0000;
}

/* ── Linke Spalte: Header/Score/Buttons ── */
.bp-side-left {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-width:120px;
    flex-shrink:0;
}
#bp-score {
    font-family:'Nunito',sans-serif;
    font-size:clamp(2.4rem,5vw,3.4rem);
    font-weight:900;line-height:1;color:var(--bp-text);
}
#bp-score.bump{animation:bpBump .18s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes bpBump{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.bp-best-label{
    font-size:clamp(0.75rem,2vw,0.9rem);
    color:var(--bp-muted);margin-top:6px;font-weight:500;
}
.bp-best-label span{color:var(--bp-best);font-weight:700;}

.bp-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;}
.bp-btn{
    width:clamp(40px,8vw,50px);height:clamp(40px,8vw,50px);
    border-radius:12px;border:1px solid var(--bp-btn-border);
    background:var(--bp-btn);color:var(--bp-text);
    font-size:clamp(1.1rem,3vw,1.4rem);cursor:default;
    display:flex;align-items:center;justify-content:center;
    transition:transform 0.1s;-webkit-tap-highlight-color:transparent;
}
.bp-btn:active{transform:scale(0.9);}

/* ── Mitte: Spielfeld ── */
.bp-side-center{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
}
.bp-board{
    display:grid;
    grid-template-columns:repeat(9,1fr);
    gap:clamp(2px,0.5vw,4px);
    background:var(--bp-board);
    padding:clamp(5px,1.5vw,8px);
    border-radius:13px;
    border:1px solid var(--bp-border);
    aspect-ratio:1/1;
    width:100%;
    max-width:min(70vh,500px);
    cursor:default;
    transition:background 0.3s;
}

/* ── Rechte Spalte: Formen ── */
.bp-side-right{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:clamp(8px,1.5vw,14px);
    background:var(--bp-tray);
    border-radius:13px;
    border:1px solid var(--bp-border);
    padding:clamp(10px,2vw,16px) clamp(6px,1.2vw,12px);
    min-width:90px;
    flex-shrink:0;
    transition:background 0.3s;
}
.bp-shapes{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(8px,1.5vw,16px);
    width:100%;
}

/* ── Zellen ── */
.bp-cell{
    background:var(--bp-cell);
    border-radius:clamp(3px,0.7vw,5px);
    aspect-ratio:1;cursor:default;
    position:relative;overflow:hidden;
    transition:background 0.08s;
}
.bp-cell.on-b{background:#3b9ede;} .bp-cell.on-o{background:#f4631e;}
.bp-cell.on-g{background:#3cb96a;} .bp-cell.on-p{background:#c45fcb;}
.bp-cell.on-y{background:#e8a500;} .bp-cell.on-r{background:#ef4444;}
.bp-cell.on-t{background:#26c6da;} .bp-cell.on-l{background:#aed581;}
.bp-cell.on-b::after,.bp-cell.on-o::after,.bp-cell.on-g::after,
.bp-cell.on-p::after,.bp-cell.on-y::after,.bp-cell.on-r::after,
.bp-cell.on-t::after,.bp-cell.on-l::after{
    content:'';position:absolute;top:0;left:0;right:0;height:38%;
    background:rgba(255,255,255,0.2);border-radius:inherit;pointer-events:none;
}
.bp-cell.pv-b{background:#3b9ede;opacity:.45;} .bp-cell.pv-o{background:#f4631e;opacity:.45;}
.bp-cell.pv-g{background:#3cb96a;opacity:.45;} .bp-cell.pv-p{background:#c45fcb;opacity:.45;}
.bp-cell.pv-y{background:#e8a500;opacity:.45;} .bp-cell.pv-r{background:#ef4444;opacity:.45;}
.bp-cell.pv-t{background:#26c6da;opacity:.45;} .bp-cell.pv-l{background:#aed581;opacity:.45;}
.bp-cell.pv-x{background:#ef4444;opacity:.35;}
.bp-cell.pop{animation:bpPop .22s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes bpPop{from{transform:scale(.4);opacity:.3}to{transform:scale(1);opacity:1}}
.bp-cell.clr{animation:bpClr .26s ease-out both;}
@keyframes bpClr{0%{transform:scale(1);filter:brightness(1)}60%{transform:scale(1.12);filter:brightness(1.8)}100%{transform:scale(0);opacity:0}}

/* ── Game Over ── */
.bp-game-over{
    position:absolute;inset:0;
    background:rgba(0,0,0,0.82);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border-radius:18px;display:none;
    flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:500;
}
.bp-container.bp-theme-light .bp-game-over{background:rgba(240,240,250,0.92);}
.bp-game-over p{
    font-family:'Nunito',sans-serif;font-size:clamp(1.3rem,5vw,1.8rem);
    font-weight:900;color:var(--bp-text);margin:0;
}
.bp-game-over button{
    background:#3b9ede;color:#fff;border:none;
    padding:clamp(10px,2.5vw,14px) clamp(24px,7vw,40px);
    font-family:'Nunito',sans-serif;font-size:clamp(0.9rem,3vw,1.05rem);
    font-weight:900;border-radius:12px;cursor:default;-webkit-tap-highlight-color:transparent;
}
.bp-game-over button:active{transform:scale(.95);}

/* ════════════════════════════════════════════════
   RESPONSIVE: Auf schmalen Bildschirmen (Handy)
   → zurück zum vertikalen Stapel-Layout
   ════════════════════════════════════════════════ */
@media (max-width:680px){
    .bp-container{
        flex-direction:column;
        max-width:min(96vw,460px);
    }
    .bp-side-left{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        min-width:0;
        width:100%;
    }
    .bp-actions{
        flex-direction:row;
        margin-top:0;
    }
    .bp-side-right{
        min-width:0;
        width:100%;
    }
    .bp-shapes{
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:space-around;
    }
    .bp-board{max-width:100%;}
}

@media (max-width:360px){
    .bp-btn{width:36px;height:36px;font-size:1rem;}
}