/* ==========================================================================
   🍬 CANDY RUE - STYLE SYSTEM V3 (CANDY CRUSH PREMIUM THEME)
   ========================================================================== */

@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;
    --lavender:  #c39bd3;
    --yellow:    #f1c40f;
    --orange:    #e67e22;
    --blue:      #3498db;
    --mint:      #1abc9c;
    --red:       #e74c3c;
    --text:      #3d1a24;
    --text-muted:#8f6571;
    --card-bg:   rgba(255,255,255,0.82);
    --border:    rgba(255,255,255,0.5);
    --shadow-sm: 0 4px 10px rgba(200,50,100,0.08);
    --shadow-md: 0 8px 24px rgba(200,50,100,0.14);
    --shadow-lg: 0 16px 40px rgba(200,50,100,0.18);
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}

html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    font-family:'Outfit',sans-serif;
    color:var(--text);
    background: linear-gradient(160deg, #1a0028 0%, #3d0066 30%, #6b0099 60%, #2d0050 100%);
    min-height:100vh;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:16px 0 40px;
    background-attachment:fixed;
}

/* ── Animated Background Stars ───────────────────────────── */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50% 80%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 10% 70%, rgba(255,200,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 50%, rgba(200,150,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 55%, rgba(255,180,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 20%, rgba(255,255,200,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 45%, rgba(255,200,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 75%, rgba(180,200,255,0.4) 0%, transparent 100%);
    background-size:300px 300px,500px 500px,400px 400px,350px 350px,450px 450px,380px 380px,420px 420px,320px 320px,480px 480px;
    animation:twinkle 8s linear infinite alternate;
    pointer-events:none;
    z-index:0;
}

@keyframes twinkle{
    0%  { opacity:0.5; transform:scale(1); }
    100%{ opacity:1;   transform:scale(1.05); }
}

/* ── Decorative Blobs ─────────────────────────────────────── */
.glass-bg-decor{
    position:fixed;
    border-radius:50%;
    filter:blur(90px);
    z-index:0;
    pointer-events:none;
    opacity:0.45;
}
.decor-top{
    width:420px; height:420px;
    background:radial-gradient(circle, rgba(255,79,123,0.6) 0%, transparent 70%);
    top:-80px; right:8%;
    animation:blobFloat1 12s ease-in-out infinite;
}
.decor-bottom{
    width:500px; height:500px;
    background:radial-gradient(circle, rgba(155,89,182,0.5) 0%, transparent 70%);
    bottom:-120px; left:4%;
    animation:blobFloat2 15s ease-in-out infinite;
}

@keyframes blobFloat1{
    0%,100%{transform:translate(0,0) scale(1);}
    50%     {transform:translate(30px,-20px) scale(1.1);}
}
@keyframes blobFloat2{
    0%,100%{transform:translate(0,0) scale(1);}
    50%     {transform:translate(-20px,30px) 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(100,0,160,0.85) 0%, rgba(200,0,100,0.8) 100%);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1.5px solid rgba(255,200,255,0.25);
    border-radius:24px;
    padding:14px 22px;
    box-shadow:0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}

.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.15);
    padding:8px 18px;
    border-radius:50px;
    border:1.5px solid rgba(255,255,255,0.3);
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    transition:all 0.25s ease;
    display:flex;
    align-items:center;
    gap:7px;
}
.back-btn:hover{
    background:rgba(255,255,255,0.28);
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(0,0,0,0.3);
}

.game-selector-tabs{
    display:flex;
    gap:6px;
    background:rgba(0,0,0,0.2);
    padding:5px;
    border-radius:50px;
    border:1.5px solid rgba(255,255,255,0.15);
}

.tab-btn{
    text-decoration:none;
    font-family:'Fredoka',sans-serif;
    font-weight:700;
    font-size:0.9rem;
    color:rgba(255,255,255,0.7);
    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 12px rgba(255,79,123,0.45);
}
.tab-btn:not(.active):hover{
    background:rgba(255,255,255,0.15);
    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 8px rgba(0,0,0,0.4), 0 0 20px 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 340px;
    gap:22px;
    align-items:start;
}

/* ── Game Card ────────────────────────────────────────────── */
.game-container-card{
    background:linear-gradient(160deg, rgba(80,0,130,0.85) 0%, rgba(150,0,80,0.8) 100%);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1.5px solid rgba(255,200,255,0.2);
    border-radius:28px;
    padding:18px 18px 16px;
    box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(255,100,200,0.08);
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:center;
    position:relative;
    overflow:hidden;
}

/* inner glow edge */
.game-container-card::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:28px;
    background:linear-gradient(180deg,rgba(255,150,255,0.06) 0%,transparent 60%);
    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.12) 0%,rgba(255,255,255,0.06) 100%);
    border:1.5px solid rgba(255,255,255,0.2);
    border-radius:16px;
    padding:10px 6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.12);
    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.85);
    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 12px rgba(255,100,200,0.7), 0 2px 4px rgba(0,0,0,0.3);
}

/* ── Canvas Area ──────────────────────────────────────────── */
.canvas-container{
    width:100%;
    max-width:480px;
    aspect-ratio:1/1;
    background:linear-gradient(135deg,#1e003a 0%,#3a0065 50%,#1e003a 100%);
    border:3px solid rgba(200,100,255,0.35);
    border-radius:20px;
    box-shadow:
        0 0 0 6px rgba(155,89,182,0.2),
        0 0 0 12px rgba(155,89,182,0.08),
        0 20px 60px rgba(0,0,0,0.5),
        inset 0 0 40px rgba(100,0,200,0.15);
    position:relative;
    overflow:hidden;
}

/* candy board top sheen */
.canvas-container::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:40%;
    background:linear-gradient(180deg,rgba(255,255,255,0.05) 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;
}

/* ── Overlays ─────────────────────────────────────────────── */
.overlay{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    background:rgba(20,0,40,0.93);
    backdrop-filter:blur(8px);
    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:340px;
    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.1;
    animation:floatingMascot 3s ease-in-out infinite;
    filter:drop-shadow(0 8px 16px 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 20px 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;
}

.level-badge-start{
    font-family:'Fredoka',sans-serif;
    background:linear-gradient(135deg,rgba(155,89,182,0.4),rgba(255,79,123,0.3));
    color:#e8b4ff;
    border:1.5px solid rgba(200,150,255,0.35);
    padding:7px 18px;
    border-radius:50px;
    font-size:0.9rem;
    font-weight:700;
}

.next-level-goal{
    font-family:'Fredoka',sans-serif;
    background:rgba(255,79,123,0.2);
    color:#ffb3d0;
    border:1.5px dashed rgba(255,79,123,0.5);
    padding:8px 20px;
    border-radius:14px;
    font-size:0.95rem;
    font-weight:700;
}

.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 30px 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 20px rgba(255,50,50,0.6),0 2px 6px 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.12);
}

.icon-btn{
    width:42px;height:42px;
    border-radius:50%;
    background:rgba(255,255,255,0.1);
    border:1.5px solid rgba(255,255,255,0.2);
    color:rgba(255,200,255,0.85);
    font-size:1.05rem;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 4px 10px 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 16px rgba(255,79,123,0.35);
}
.icon-btn:active{transform:scale(0.95);}

.level-desc-mini{
    font-family:'Fredoka',sans-serif;
    background:rgba(255,255,255,0.1);
    padding:7px 16px;
    border-radius:50px;
    font-size:0.85rem;
    font-weight:700;
    color:rgba(255,200,255,0.9);
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    border:1px solid rgba(255,255,255,0.12);
    text-align:center;
    flex:1;
}

/* ── Sidebar Card ─────────────────────────────────────────── */
.sidebar-card{
    background:linear-gradient(160deg, rgba(80,0,130,0.82) 0%, rgba(130,0,70,0.78) 100%);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1.5px solid rgba(255,200,255,0.18);
    border-radius:24px;
    padding:22px;
    box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.1);
}

.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.3);
    padding-bottom:10px;
    text-shadow:0 0 12px rgba(255,100,200,0.4);
}

.help-section{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.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 10px rgba(255,79,123,0.4);
}

.step-text{
    font-size:0.83rem;
    color:rgba(255,200,255,0.85);
    line-height:1.5;
}
.step-text strong{
    color:#ffb3d0;
}

/* ── Levels Table ─────────────────────────────────────────── */
.levels-table-container{
    background:rgba(255,255,255,0.05);
    border-radius:16px;
    border:1px solid rgba(255,200,255,0.15);
    overflow:hidden;
    margin-top:8px;
}

.levels-table{
    width:100%;
    border-collapse:collapse;
    font-size:0.8rem;
    text-align:left;
}

.levels-table th,.levels-table td{
    padding:9px 12px;
    border-bottom:1px solid rgba(255,200,255,0.1);
}

.levels-table th{
    background:rgba(255,79,123,0.25);
    color:rgba(255,200,255,0.9);
    font-family:'Fredoka',sans-serif;
    font-weight:700;
    font-size:0.85rem;
}

.levels-table td{
    color:rgba(255,200,255,0.75);
}

.levels-table tr:last-child td{border-bottom:none;}

.levels-table tr.active{
    background:rgba(255,79,123,0.2);
    font-weight:700;
}
.levels-table tr.active td{
    color:#fff;
}

.levels-table tr.completed{
    background:rgba(26,188,156,0.08);
    opacity:0.65;
}
.levels-table tr.completed td{
    text-decoration:line-through;
}

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

/* ── 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);}
    10% {transform:translate(-1px,-2px) rotate(-1deg);}
    20% {transform:translate(-3px,0px)  rotate(1deg);}
    30% {transform:translate(0px,2px)   rotate(0deg);}
    40% {transform:translate(1px,-1px)  rotate(1deg);}
    50% {transform:translate(-1px,2px)  rotate(-1deg);}
    60% {transform:translate(-3px,1px)  rotate(0deg);}
    70% {transform:translate(2px,1px)   rotate(-1deg);}
    80% {transform:translate(-1px,-1px) rotate(1deg);}
    90% {transform:translate(2px,2px)   rotate(0deg);}
    100%{transform:translate(1px,-2px)  rotate(-1deg);}
}

@keyframes popIn{
    0%  {transform:scale(0) rotate(-10deg); opacity:0;}
    70% {transform:scale(1.15) rotate(4deg);}
    100%{transform:scale(1) rotate(0deg); opacity:1;}
}

/* ── Score pop animation ──────────────────────────────────── */
@keyframes scoreFlash{
    0%  {color:#fff;text-shadow:0 0 0px rgba(255,100,200,0);}
    50% {color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,0.9);}
    100%{color:#fff;text-shadow:0 0 12px rgba(255,100,200,0.7);}
}

.stat-val.flash{
    animation:scoreFlash 0.6s ease-out;
}

/* ==========================================================================
   📱 MOBILE OPTIMIZATIONS
   ========================================================================== */

@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 16px; 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:8px 10px; border-radius:14px; gap:8px; }
    .icon-btn{ width:36px; height:36px; font-size:0.9rem; }
    .level-desc-mini{ padding:5px 10px; font-size:0.75rem; }
    .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; }
}