/* ==========================================================================
   🎮 POU POPPER - PREMIUM DARK THEME v3
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Outfit:wght@400;600;700;800&display=swap');

:root {
    --pink:      #ff4f7b;
    --pink-dark: #e0245a;
    --pink-light:#ffebf0;
    --purple:    #9b59b6;
    --blue:      #3498db;
    --mint:      #1abc9c;
    --yellow:    #f1c40f;
    --text:      #ffffff;
    --text-muted:rgba(255,200,255,0.75);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.4);
}

/* ── Reset ────────────────────────────────────────────────── */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ width:100%; max-width:100%; overflow-x:hidden; }

/* ── Body ─────────────────────────────────────────────────── */
body{
    font-family:'Outfit',sans-serif;
    color:var(--text);
    background:linear-gradient(160deg,#0d001f 0%,#1a0038 35%,#2d0055 70%,#0d001f 100%);
    min-height:100vh;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:16px 0 40px;
    background-attachment:fixed;
}

/* ── Star field ───────────────────────────────────────────── */
body::before{
    content:'';
    position:fixed; inset:0;
    background-image:
        radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.7) 0%,transparent 100%),
        radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.6) 0%,transparent 100%),
        radial-gradient(1.5px 1.5px at 45% 75%, rgba(255,255,255,0.5) 0%,transparent 100%),
        radial-gradient(1px 1px at 8%  65%, rgba(200,150,255,0.6) 0%,transparent 100%),
        radial-gradient(1px 1px at 92% 55%, rgba(150,200,255,0.5) 0%,transparent 100%),
        radial-gradient(1px 1px at 30% 40%, rgba(255,180,255,0.4) 0%,transparent 100%),
        radial-gradient(1px 1px at 70% 30%, rgba(255,255,200,0.4) 0%,transparent 100%),
        radial-gradient(1px 1px at 55% 88%, rgba(180,255,220,0.4) 0%,transparent 100%);
    background-size:400px 400px,600px 600px,350px 350px,450px 450px,500px 500px,380px 380px,420px 420px,360px 360px;
    animation:starTwinkle 10s linear infinite alternate;
    pointer-events:none; z-index:0;
}
@keyframes starTwinkle{
    0%  {opacity:0.5;transform:scale(1);}
    100%{opacity:1;  transform:scale(1.04);}
}

/* ── Decorative blobs ─────────────────────────────────────── */
.glass-bg-decor{
    position:fixed; border-radius:50%;
    filter:blur(100px); z-index:0; pointer-events:none; opacity:0.4;
}
.decor-top{
    width:450px; height:450px;
    background:radial-gradient(circle,rgba(255,79,123,0.55) 0%,transparent 70%);
    top:-100px; right:6%;
    animation:blob1 14s ease-in-out infinite;
}
.decor-bottom{
    width:550px; height:550px;
    background:radial-gradient(circle,rgba(100,0,200,0.5) 0%,transparent 70%);
    bottom:-140px; left:3%;
    animation:blob2 18s ease-in-out infinite;
}
@keyframes blob1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(25px,-18px) scale(1.1);}}
@keyframes blob2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-18px,25px) scale(1.08);}}

/* ── App container ────────────────────────────────────────── */
.app-container{
    width:100%; max-width:980px;
    padding:0 20px 20px;
    display:flex; flex-direction:column; gap:20px;
    z-index:1;
}

/* ── Header ───────────────────────────────────────────────── */
#gameHeader{
    background:linear-gradient(135deg,rgba(80,0,160,0.88) 0%,rgba(200,0,100,0.82) 100%);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border:1.5px solid rgba(255,200,255,0.22);
    border-radius:24px;
    padding:14px 22px;
    box-shadow:0 4px 24px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.14);
}
.header-content{
    display:flex; justify-content:space-between;
    align-items:center; flex-wrap:wrap; gap:12px;
}
.back-btn{
    text-decoration:none; color:#fff;
    font-weight:700; font-family:'Fredoka',sans-serif; font-size:1rem;
    background:rgba(255,255,255,0.14); padding:8px 18px;
    border-radius:50px; border:1.5px solid rgba(255,255,255,0.28);
    box-shadow:0 2px 8px rgba(0,0,0,0.22);
    transition:all 0.25s ease; display:flex; align-items:center; gap:7px;
}
.back-btn:hover{background:rgba(255,255,255,0.27);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.32);}
.game-selector-tabs{
    display:flex; gap:6px; background:rgba(0,0,0,0.22);
    padding:5px; border-radius:50px; border:1.5px solid rgba(255,255,255,0.14);
}
.tab-btn{
    text-decoration:none; font-family:'Fredoka',sans-serif;
    font-weight:700; font-size:0.9rem; color:rgba(255,255,255,0.65);
    padding:7px 16px; border-radius:50px; transition:all 0.2s ease;
}
.tab-btn.active{
    background:linear-gradient(135deg,#ff4f7b,#ff6b8f);
    color:#fff; box-shadow:0 4px 14px rgba(255,79,123,0.45);
}
.tab-btn:not(.active):hover{background:rgba(255,255,255,0.14);color:#fff;}
.logo-title{
    font-family:'Fredoka',sans-serif; font-size:1.55rem; font-weight:700; color:#fff;
    display:flex; align-items:center; gap:10px;
    text-shadow:0 2px 10px rgba(0,0,0,0.4),0 0 22px rgba(255,150,200,0.5);
    filter:drop-shadow(0 0 12px rgba(255,79,123,0.5));
}

/* ── Main layout ──────────────────────────────────────────── */
.main-content{width:100%;}
.game-wrapper{
    display:grid; grid-template-columns:1fr 320px;
    gap:22px; align-items:start;
}

/* ── Game card ────────────────────────────────────────────── */
.game-container-card{
    background:linear-gradient(160deg,rgba(60,0,110,0.88) 0%,rgba(130,0,70,0.82) 100%);
    backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
    border:1.5px solid rgba(255,200,255,0.18);
    border-radius:28px; padding:18px 18px 16px;
    box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.1);
    display:flex; flex-direction:column; gap:14px; align-items:center;
    position:relative; overflow:hidden;
}
.game-container-card::before{
    content:''; position:absolute; inset:0; border-radius:28px;
    background:linear-gradient(180deg,rgba(255,150,255,0.05) 0%,transparent 55%);
    pointer-events:none;
}

/* ── Stats row ────────────────────────────────────────────── */
.game-stats-row{
    display:flex; width:100%; justify-content:space-between; gap:10px;
}
.stat-box{
    flex:1;
    background:linear-gradient(160deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%);
    border:1.5px solid rgba(255,255,255,0.18); border-radius:16px;
    padding:10px 6px; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.1);
    transition:transform 0.2s ease;
}
.stat-box:hover{transform:translateY(-2px);}
.stat-label{
    font-size:0.62rem; font-weight:800;
    color:rgba(255,200,255,0.82); letter-spacing:0.9px; margin-bottom:3px; text-transform:uppercase;
}
.stat-val{
    font-family:'Fredoka',sans-serif; font-size:1.4rem; font-weight:700; color:#fff;
    text-shadow:0 0 14px rgba(255,100,200,0.7),0 2px 4px rgba(0,0,0,0.3);
}
@keyframes scoreFlash{
    0%  {color:#fff;}
    40% {color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,0.9);}
    100%{color:#fff;text-shadow:0 0 14px rgba(255,100,200,0.7);}
}
.stat-val.flash{animation:scoreFlash 0.6s ease-out;}

/* ── Canvas container ─────────────────────────────────────── */
.canvas-container{
    width:100%; max-width:440px;
    aspect-ratio:440/600;
    background:linear-gradient(160deg,#0d0020 0%,#1e0040 50%,#0d0020 100%);
    border:3px solid rgba(180,80,255,0.38);
    border-radius:20px;
    box-shadow:
        0 0 0 6px rgba(130,0,200,0.18),
        0 0 0 12px rgba(130,0,200,0.07),
        0 22px 65px rgba(0,0,0,0.55),
        inset 0 0 50px rgba(80,0,180,0.12);
    position:relative; overflow:hidden; cursor:crosshair;
}
.canvas-container::before{
    content:''; position:absolute; top:0;left:0;right:0;height:35%;
    background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,transparent 100%);
    border-radius:17px 17px 0 0; pointer-events:none; z-index:2;
}
#gameCanvas{
    display:block; width:100%; height:100%;
    border-radius:17px; background:transparent; cursor:crosshair;
}

/* ── Overlays ─────────────────────────────────────────────── */
.overlay{
    position:absolute; top:0;left:0; width:100%;height:100%;
    background:rgba(10,0,25,0.93);
    backdrop-filter:blur(10px);
    display:flex; justify-content:center; align-items:center;
    z-index:20; opacity:0; pointer-events:none;
    transition:opacity 0.35s ease; padding:24px; border-radius:17px;
}
.overlay.active{opacity:1;pointer-events:auto;}
.overlay-content{
    text-align:center; display:flex; flex-direction:column;
    align-items:center; gap:14px; max-width:320px;
    transform:scale(0.9) translateY(10px);
    transition:transform 0.35s cubic-bezier(0.175,0.885,0.32,1.275);
}
.overlay.active .overlay-content{transform:scale(1) translateY(0);}
.mascot-avatar{
    font-size:4.5rem; line-height:1;
    animation:floatingMascot 3s ease-in-out infinite;
    filter:drop-shadow(0 8px 18px rgba(255,79,123,0.4));
}
.mascot-avatar.dead{animation:shakingMascot 0.45s ease-in-out infinite alternate;}
.overlay h2{
    font-family:'Fredoka',sans-serif; font-size:2.1rem; font-weight:700; color:#fff;
    text-shadow:0 0 22px rgba(255,100,200,0.8),0 2px 8px rgba(0,0,0,0.5);
}
.overlay p{font-size:0.9rem;color:rgba(255,200,255,0.85);line-height:1.55;}
.play-btn-large{
    font-family:'Fredoka',sans-serif; font-size:1.15rem; font-weight:700;
    color:#fff; background:linear-gradient(135deg,#ff4f7b,#e0245a);
    border:none; border-radius:50px; padding:14px 36px; cursor:pointer;
    box-shadow:0 8px 24px rgba(255,79,123,0.45),inset 0 1px 0 rgba(255,255,255,0.2);
    transition:all 0.25s cubic-bezier(0.175,0.885,0.32,1.275);
    display:flex; align-items:center; gap:10px; position:relative; overflow:hidden;
}
.play-btn-large::after{
    content:''; position:absolute; top:0;left:-100%; width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
    transition:left 0.5s ease;
}
.play-btn-large:hover::after{left:150%;}
.play-btn-large:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 32px rgba(255,79,123,0.55);}
.play-btn-large:active{transform:translateY(-1px) scale(0.98);}
.game-over-title{
    color:#ff6b6b!important;
    text-shadow:0 0 22px rgba(255,50,50,0.65),0 2px 8px rgba(0,0,0,0.5)!important;
    font-size:2.3rem!important;
}
.overlay-stats{
    background:rgba(255,255,255,0.07); border:1.5px dashed rgba(255,200,255,0.3);
    border-radius:14px; padding:8px 22px;
    color:rgba(255,200,255,0.9); font-size:0.9rem;
}

/* ── Game footer controls ─────────────────────────────────── */
.game-footer-controls{
    display:flex; width:100%; align-items:center; justify-content:space-between;
    gap:12px; background:rgba(255,255,255,0.07); padding:10px 14px;
    border-radius:18px; border:1.5px solid rgba(255,255,255,0.1);
}
.icon-btn{
    width:42px;height:42px; border-radius:50%;
    background:rgba(255,255,255,0.09); border:1.5px solid rgba(255,255,255,0.18);
    color:rgba(255,200,255,0.82); font-size:1.05rem; cursor:pointer;
    display:flex; justify-content:center; align-items:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.25); transition:all 0.2s ease;
}
.icon-btn:hover{color:#fff;background:rgba(255,79,123,0.35);transform:scale(1.12);box-shadow:0 6px 18px rgba(255,79,123,0.38);}
.icon-btn:active{transform:scale(0.94);}

/* ── Next bubble preview ──────────────────────────────────── */
.bubble-preview-box{
    display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,0.08); padding:7px 16px;
    border-radius:50px; border:1.5px solid rgba(255,255,255,0.12);
    box-shadow:0 2px 10px rgba(0,0,0,0.22);
}
.preview-label{
    font-size:0.68rem; font-weight:800;
    color:rgba(255,200,255,0.75); letter-spacing:0.9px; text-transform:uppercase;
}
.next-bubble-indicator{
    width:22px;height:22px; border-radius:50%;
    border:2px solid rgba(255,255,255,0.25);
    box-shadow:inset -2px -2px 5px rgba(0,0,0,0.3),0 0 10px currentColor;
    position:relative; overflow:hidden;
}
.next-bubble-indicator::after{
    content:''; position:absolute;
    top:2px;left:3px; width:8px;height:6px;
    background:rgba(255,255,255,0.5); border-radius:50%;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar-card{
    background:linear-gradient(160deg,rgba(70,0,120,0.85) 0%,rgba(120,0,65,0.8) 100%);
    backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
    border:1.5px solid rgba(255,200,255,0.16);
    border-radius:24px; padding:22px;
    box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08);
}
.sidebar-title{
    font-family:'Fredoka',sans-serif; font-size:1.25rem; font-weight:700; color:#fff;
    margin-bottom:16px; border-bottom:2px solid rgba(255,100,200,0.28); padding-bottom:10px;
    text-shadow:0 0 14px rgba(255,100,200,0.4);
}
.help-section{display:flex;flex-direction:column;gap:13px;}
.step-row{display:flex;gap:12px;align-items:flex-start;}
.step-num{
    width:26px;height:26px;
    background:linear-gradient(135deg,#ff4f7b,#e0245a); color:#fff;
    font-weight:700; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:0.82rem; flex-shrink:0;
    box-shadow:0 4px 12px rgba(255,79,123,0.42);
}
.step-text{font-size:0.83rem;color:rgba(255,200,255,0.82);line-height:1.52;}
.step-text strong{color:#ffb3d0;}
.kawaii-decor-row{
    display:flex; justify-content:center; gap:10px;
    margin-top:22px; font-size:1.15rem; opacity:0.75;
}

/* ── Footer ───────────────────────────────────────────────── */
#gameFooter{
    text-align:center; padding:14px 0;
    font-size:0.78rem; color:rgba(255,200,255,0.45);
}
#gameFooter span{color:var(--pink);font-weight:700;}

/* ── Keyframe animations ──────────────────────────────────── */
@keyframes floatingMascot{
    0%  {transform:translateY(0px) rotate(0deg);}
    50% {transform:translateY(-10px) rotate(4deg);}
    100%{transform:translateY(0px) rotate(0deg);}
}
@keyframes shakingMascot{
    0%  {transform:translate(2px,1px)   rotate(0deg);}
    20% {transform:translate(-3px,0px)  rotate(1deg);}
    40% {transform:translate(1px,-1px)  rotate(1deg);}
    60% {transform:translate(-3px,1px)  rotate(0deg);}
    80% {transform:translate(-1px,-1px) rotate(1deg);}
    100%{transform:translate(1px,-2px)  rotate(-1deg);}
}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:820px){
    .game-wrapper{grid-template-columns:1fr;}
    .app-container{padding:0 12px 20px;gap:14px;}
}
@media(max-width:768px){
    #gameHeader{padding:12px 18px;}
    .header-content{justify-content:center;flex-direction:column;gap:10px;text-align:center;}
    .back-btn{width:100%;justify-content:center;}
    .game-container-card{padding:14px;border-radius:20px;}
    .sidebar-card{padding:18px;border-radius:20px;}
}
@media(max-width:480px){
    .app-container{padding:0 6px 14px;gap:10px;}
    #gameHeader{padding:10px 12px;border-radius:16px;}
    .logo-title{font-size:1.25rem;}
    .back-btn{padding:7px 13px;font-size:0.88rem;}
    .game-selector-tabs{width:100%;justify-content:center;}
    .tab-btn{padding:6px 12px;font-size:0.82rem;}
    .game-container-card{padding:10px;border-radius:16px;gap:10px;}
    .game-stats-row{gap:5px;}
    .stat-box{padding:6px 3px;border-radius:12px;}
    .stat-label{font-size:0.54rem;letter-spacing:0.3px;}
    .stat-val{font-size:1.05rem;}
    .canvas-container{border-radius:14px;border-width:2px;}
    .game-footer-controls{padding:7px 10px;border-radius:14px;gap:8px;}
    .icon-btn{width:36px;height:36px;font-size:0.9rem;}
    .bubble-preview-box{padding:5px 10px;gap:7px;}
    .preview-label{font-size:0.6rem;}
    .next-bubble-indicator{width:18px;height:18px;}
    .overlay-content{padding:8px;gap:10px;}
    .overlay h2{font-size:1.6rem;}
    .mascot-avatar{font-size:3.5rem;}
    .play-btn-large{padding:11px 26px;font-size:1rem;}
}