*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;}
html{height:100%;height:var(--app-height,100dvh);overflow:hidden;scroll-behavior:smooth;touch-action:none;}
body{
    height:100%;
    height:var(--app-height,100dvh);
    overflow:hidden;
    touch-action:none;
    overscroll-behavior:none;
    font-family:'Segoe UI',Arial,Helvetica,sans-serif;
    color:#fff;
    background:
        radial-gradient(circle at 15% 15%,#2a2f7a 0%,transparent 35%),
        radial-gradient(circle at 85% 10%,#5a2a8a 0%,transparent 35%),
        radial-gradient(circle at 50% 95%,#1a2a5a 0%,transparent 40%),
        linear-gradient(160deg,#0a0e2a,#1a0f3a 55%,#12082a);
    overflow-x:hidden;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}
.stars-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.stars-bg span{
    position:absolute;width:3px;height:3px;border-radius:50%;
    background:#fff;opacity:.5;
    animation:twinkle 3s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(1);}50%{opacity:.9;transform:scale(1.6);}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-14px) rotate(8deg);}}

.app{
    position:relative;
    z-index:1;
    max-width:400px;
    width:100%;
    margin:0 auto;
    height:100%;
    max-height:620px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}



/* phones: fill the visible viewport, no desktop ceiling */
@media(max-width:500px){
    .app{
        width:360px;
        height:100%;
        max-width:none;
        max-height:none;
    }

    .app{
    max-width:360px;
}



}

@media(max-width:440px){
    .app{
        width:100%;
          max-width:100%;
    }
}
.screen {
    display: none;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: calc(10px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px));
}

.screen::-webkit-scrollbar{display:none;}
.screen.active{display:flex;}
/* popup open: freeze whatever is behind it */
body:has(.modal-overlay.active) .screen{overflow:hidden;}

/* ===== LOGO ===== */
.brand-logo{text-align:center;margin-bottom:6px;}
.brand-logo img{
    width:100px;height:auto;display:inline-block;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
.logo-wrap{text-align:center;}
.mb-logo{
    font-size:clamp(34px,10vw,54px);
    font-weight:900;
    letter-spacing:1px;
    line-height:1;
    text-shadow:0 6px 0 rgba(0,0,0,.35),0 10px 25px rgba(0,0,0,.5);
    -webkit-text-stroke:2px #2a1050;
}
.mb-logo img{
    max-width:280px;
    width:80%;
    filter:drop-shadow(0 10px 25px rgba(0,0,0,.5));
}
.mb-logo .match{
    background:linear-gradient(180deg,#ffe37a,#ffb020);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mb-logo .blast{
    background:linear-gradient(180deg,#8fe9ff,#1e9bff);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{
    margin-top:10px;font-weight:700;letter-spacing:2px;color:#fff;font-size:13px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 46px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 70'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237a5cff'/%3E%3Cstop offset='1' stop-color='%234a2fc0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='34,50 34,64 48,50' fill='%232e1a70'/%3E%3Cpolygon points='346,50 346,64 332,50' fill='%232e1a70'/%3E%3Cpath d='M0,32 L34,14 Q190,-4 346,14 L380,32 L346,50 Q190,68 34,50 Z' fill='url(%23r)' stroke='%232e1a70' stroke-width='3'/%3E%3C/svg%3E");
    background-size:100% 100%;
    background-repeat:no-repeat;
    text-shadow:-1px 0 #2e1a70,1px 0 #2e1a70,0 -1px #2e1a70,0 2px #2e1a70;
}
.tagline2{margin-top:4px;color:#b8c3ff;font-size:12px;font-style:italic;}

/* ===== BUTTONS ===== */
.btn{
    border:none;cursor:pointer;font-weight:800;letter-spacing:.5px;color:#fff;
    border-radius:16px;padding:16px 20px;font-size:15px;
    box-shadow:0 8px 0 rgba(0,0,0,.28),0 14px 24px rgba(0,0,0,.35);
    transition:transform .12s ease,box-shadow .12s ease;
    min-height:44px;
}
.btn:active{transform:translateY(4px);box-shadow:0 4px 0 rgba(0,0,0,.28),0 6px 14px rgba(0,0,0,.3);}
.btn-green{background:linear-gradient(180deg,#7bec8f,#22b84a);}
.btn-blue{background:linear-gradient(180deg,#8fd3ff,#1e7fe0);}
.btn-purple{background:linear-gradient(180deg,#c58aff,#7a2fe0);}
.btn-orange{background:linear-gradient(180deg,#ffc36b,#ff8a1e);}
.btn-red{background:linear-gradient(180deg,#ff8a8a,#e0311e);}
.btn-ghost{background:rgba(255,255,255,.08);box-shadow:none;border:1px solid rgba(255,255,255,.2);}
.btn-lg{padding:20px;font-size:20px;border-radius:22px;width:100%;}
.btn-block{width:100%;}
.icon-btn{
    width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.18);
    background:rgba(20,20,50,.55);color:#fff;font-size:18px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
}
.icon-btn.off{opacity:.4;}

button.btn.btn-purple.btn-block.go-btn, button.btn.btn-green.btn-block.go-btn  {
    width: 60%;
    background: transparent;
    box-shadow: none;
    min-height: auto; padding: 0px;
}

button.btn.btn-purple.btn-block.go-btn img, button.btn.btn-green.btn-block.go-btn img {width: 100%; height:auto; display: block;}
.panel{
    background:linear-gradient(160deg,rgba(80,40,140,.55),rgba(30,20,60,.7));
    border:1px solid rgba(255,255,255,.14);
    border-radius:20px;
    box-shadow:0 0 30px rgba(140,80,255,.18),inset 0 1px 1px rgba(255,255,255,.15);
    padding:16px;
}

.btnfeel{
    padding: 5px 6px;
    border: 4px solid #024c01;
    border-radius: 25px;
    background: #D2FC01;
    background: linear-gradient(180deg, rgba(210, 252, 1, 1) 0%, rgba(30, 213, 13, 1) 100%);
    max-width: 280px;
    margin: 0 auto;
    width: 100%;
    transition: transform .12s ease, box-shadow .12s ease;
}


.btn.nextbtn:active{transform:translateY(0px);box-shadow:none;}

.btnfeel:active {
    transform: translateY(4px);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .28), 0 6px 14px rgba(0, 0, 0, .3);
}

.nextbtn.btn-green {
    background: linear-gradient(180deg, #7bec8f, #22b84a);
    background: #F1F947;
    background: linear-gradient(180deg, rgba(241, 249, 71, 1) 0%, rgba(218, 248, 24, 1) 5%, rgba(160, 241, 2, 1) 12%, rgba(3, 130, 25, 1) 100%);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}


/* ===== SPLASH ===== */
#splashScreen{
    align-items:center;justify-content:center;text-align:center;gap:22px;
    background-image:url(../images/splash-screen.png);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.splash-candy{font-size:50px;display:flex;gap:10px;justify-content:center;}
.splash-candy span{animation:floaty 2.4s ease-in-out infinite;}
.splash-candy span:nth-child(2){animation-delay:.3s;}
.splash-candy span:nth-child(3){animation-delay:.6s;}
.splash-candy span:nth-child(4){animation-delay:.9s;}
.loading-wrap{width:80%;max-width:280px;}
.loading-title{font-size:18px;font-weight:800;color:#fff;margin-bottom:8px;text-shadow:0 3px 6px rgba(0,0,0,.5);}
.loading-track{
    height:20px;border-radius:20px;overflow:hidden;position:relative;
    background:linear-gradient(180deg,#241454,#160a34);
    border:3px solid #6a3fd6;
    box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 2px 4px rgba(0,0,0,.5);
}
.loading-bar{
    height:100%;width:0%;border-radius:20px;position:relative;overflow:hidden;
    background:linear-gradient(180deg,#fff3b0,#ffd166 45%,#ff9d1e);
    box-shadow:inset 0 3px 4px rgba(255,255,255,.8),inset 0 -4px 6px rgba(180,90,0,.5);
    transition:width .1s linear;
}
.loading-bar:after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.7) 45%,transparent 60%);
    animation:shineSweep 1.4s ease-in-out infinite;
}
@keyframes shineSweep{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.loading-text{margin-top:10px;font-size:12px;color:#cdd4ff;}

/* ===== HOME ===== */
#homeScreen{
    justify-content:space-between;
    background-image:url(../images/splash-screen.png);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.home-top{display:flex;justify-content:flex-end;gap:10px;}
#splashScreen .home-top{position:absolute;top:18px;right:16px;left:16px;}
.home-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-around;gap:18px;}
.candy-illustration{font-size:46px;display:flex;gap:12px;}
.candy-illustration span{animation:floaty 3s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4));}
.candy-illustration span:nth-child(2){animation-delay:.4s;}
.candy-illustration span:nth-child(3){animation-delay:.8s;}

@keyframes glowPulse{0%,100%{box-shadow:0 8px 0 rgba(0,0,0,.28),0 0 20px rgba(60,255,120,.5);}50%{box-shadow:0 8px 0 rgba(0,0,0,.28),0 0 40px rgba(60,255,120,.9);}}
@keyframes playElastic{
    0%,100%{transform:scale(1);}
    10%{transform:scale(1.1);}
    22%{transform:scale(.94);}
    35%{transform:scale(1.05);}
    45%{transform:scale(.98);}
    55%{transform:scale(1);}
}

.play-btn-big{
    position:relative;width:100%;max-width:190px;
   background-color: transparent;
    border: none;
    overflow:hidden; cursor:pointer;
}
.play-btn-big.play-glow{
    animation:playElastic 1.8s ease-in-out infinite;
}
.play-btn-big img {
    width: 100%;
    height: auto;
    display: block;
}


.play-btn-big:active{transform:translateY(4px);box-shadow:0 4px 0 #12812a,0 8px 16px rgba(0,0,0,.35);}

.home-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:210px;}
.nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    background: transparent;
    /* box-shadow: 0 5px 0 #3a1a8a, 0 10px 16px rgba(0, 0, 0, .35); */
    color: #fff;
    font-weight: normal;
    font-size: large;
    letter-spacing: normal;
}
.nav-card .nav-icon{font-size:26px;}
.nav-card:active{transform:translateY(3px);box-shadow:0 2px 0 #3a1a8a,0 4px 10px rgba(0,0,0,.3);}


button.nav-card img {
    width: 100%; height: auto; display: block;
}
button.nav-card.reward {
    height: 102px;
}

button.nav-card.reward img {
    height: 80px;
}

/* ===== TOP BAR (generic back) ===== */
.topbar-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.screen-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
    background-color: rgba(168, 74, 214, 0.1);
    padding: 10px 22px;
    border-radius: 20px;
}
.icon-btn img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== LEVEL SELECT ===== */
.ls-panel{
    display:flex;flex-direction:column;min-height:0;
    flex:1;
    width:100%;
    padding:10px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:22px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(6px);
    box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
}
.ls-panel .level-grid{flex:1;min-height:0;}
.ls-panel .mg-list{
    flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    display:flex;flex-direction:column;justify-content:center;
}
.ls-panel .mg-list::-webkit-scrollbar{display:none;}
.ls-panel .daily-list{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;}
.level-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding-bottom: 20px;
    overflow: auto;
    max-height: 485px;
    touch-action: pan-y;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #7a4fd6 transparent;
    padding: 2px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
}
.level-grid::-webkit-scrollbar{width:6px;}
.level-grid::-webkit-scrollbar-track{background:transparent;}
.level-grid::-webkit-scrollbar-thumb{background:#7a4fd6;border-radius:10px;}
.level-cell {
    aspect-ratio: 1;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 43px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .15);
    width: 80px;
    height: 80px;
    line-height: 36px;
}

.level-cell.unlocked{background:linear-gradient(160deg,#8fa4ff,#4a5fd9);box-shadow:0 6px 0 rgba(0,0,0,.25),0 0 14px rgba(120,140,255,.3); background-image: url(../images/purple-tile.png); background-size: cover; background-position: center; background-repeat: no-repeat}
.level-cell.locked{background:rgba(40,25,70,.7);color:#9a8fc9; background-image: url(../images/lock-tile.png); background-size: cover; background-position: center; background-repeat: no-repeat}

.level-cell.current {
    background: linear-gradient(160deg, #4be07a, #159a3f);
    box-shadow: 0 6px 0 rgba(0, 0, 0, .25), 0 0 18px rgba(80, 255, 140, .5);
    outline: 2px solid #d6ffe0;
    background-image: url(../images/green-tile.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 76px;
    height: 76px;
}

.toast{
    position:fixed;left:50%;bottom:30px;transform:translateX(-50%);
    background:rgba(20,10,40,.95);border:1px solid rgba(255,255,255,.2);
    padding:12px 18px;border-radius:14px;font-size:13px;z-index:999;
    opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

/* ===== MODAL / POPUP ===== */
.modal-overlay{
    position:fixed;inset:0;background:rgba(4,4,14,.78);backdrop-filter:blur(6px);
    display:none;align-items:center;justify-content:center;z-index:200;padding:20px;
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;
}
.modal-overlay::-webkit-scrollbar{display:none;}
.modal-overlay.active{display:flex;}
.modal-card{
    width:100%;max-width:340px;text-align:center;position:relative;
    animation:popIn .25s cubic-bezier(.2,.9,.2,1.3);
}
@keyframes popIn{from{transform:scale(.8);opacity:0;}to{transform:scale(1);opacity:1;}}
.modal-close{
    position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
    background:rgba(255,255,255,.12);border:none;color:#fff;font-size:16px;cursor:pointer;
}
.mission-box{margin:14px 0;font-size:14px;color:#ffe37a;}
.booster-row{display:flex;justify-content:center;gap:14px;margin:16px 0;}
.booster-chip{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    background:rgba(255,255,255,.08);border-radius:14px;padding:10px 14px;font-size:20px;
}
.booster-chip small{font-size:11px;color:#cdd4ff;}

/* ===== LEVEL START CARD (matches candy-crush-style popup) ===== */
.ls-card{
    background:linear-gradient(160deg,#fff3d6,#ffe4ad);
    border:5px solid #6a2fc9;
    border-radius:30px;
    padding:36px 20px 24px;
    box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.8);
    overflow:visible;
}
.ls-ribbon {
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%);
    /* background: linear-gradient(180deg, #ff6ba3, #e0357e); */
    /* border: 3px solid #c9247a; */
    color: #fff;
    font-weight: 900;
    font-size: 23px;
    /* letter-spacing: .5px; */
    padding: 10px 100px;
    border-radius: 16px;
    /* box-shadow: 0 6px 0 rgba(0, 0, 0, .2), 0 10px 18px rgba(0, 0, 0, .35); */
    white-space: nowrap;
    background-image: url(../images/ribbon.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 240px;
    height: 100px;
}

.ls-ribbon #lsLevelTitle {
    position: relative;
    top: 10px;
}

.ls-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 43px;
    height: 43px;
    border-radius: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: none;
}

.ls-close img {
    width: 100%;
    height: auto;
    display: block;
}
.ls-gem{position:absolute;font-size:22px;opacity:.85;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));}
.ls-gem1{top:14px;left:14px;}
.ls-gem2{top:40px;right:20px;}
.ls-mission-title {
    color: #5a3a12;
    font-weight: 900;
    font-size: 27px;
    margin-top: 8px;
}
.ls-card .mission-box{color:#7a4a10;font-weight:700;font-size:18px;}
.ls-card .booster-chip {
    background: none;
    border: none;
    border-radius: 0px;
    padding: 0;
    position: relative;
    box-shadow: none;
}

.booster-chip {
    width: 80px;
}
.ls-card .booster-chip img {
    width: 100%;
    height: auto;
    display: block;
}

.ls-card .booster-chip small {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: #88089e;
    border: 2px solid #5e076d;
    color: #fff;
    font-weight: 800;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.ls-play {
    background: transparent;
    font-size: 18px;
    border-radius: none;
    margin-top: 0px;
    border: none;
    box-shadow: none;
    width: 230px;
}

.ls-play img {
    width: 100%;
    height: auto;
    display: block;
}

.arrowtiles {
    position: relative;
    top: -15px;
    left: 5px;
}

/* ===== GAMEPLAY ===== */
#gameScreen{padding:calc(20px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px));touch-action:none;overscroll-behavior:none;}
.gp-topbar{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;margin-bottom:20px;}
.gp-boosters{display:flex;gap:6px;}
.booster-btn{
    position:relative;width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.booster-btn img{width:85%;height:85%;object-fit:contain;}
.booster-btn.armed{outline:2px solid #ffd166;background:rgba(255,209,102,.25);}
.booster-btn .count {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: #88089e;
    border: 2px solid #5e076d;
    border-radius: 50%;
    font-size: 11px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #ffffff;
}
.gp-right{display:flex;gap:6px;}

.mission-bar{
    display:flex;flex-direction:column;gap:15px;
    font-size:12px;padding:12px 14px;margin-bottom:20px;position:relative;
}
.mission-col{width:100%;display:flex;flex-direction:column;gap:7px;}
.mission-col>span{font-weight:800;font-size:16px;color:#e8ecff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mission-bar .progress-track{height:10px;border-radius:10px;background:rgba(255,255,255,.1);overflow:hidden;}
.mission-bar .progress-fill{height:100%;background:linear-gradient(90deg,#ffd166,#ff6bd6,#6bd6ff);width:0%;transition:width .4s ease;}
.hud-row{display:flex;justify-content:space-between;width:100%;}
.hud-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;}
.hud-col>span{font-size:11px;color:#b8c3ff;text-transform:uppercase;letter-spacing:.5px;font-weight:700;}
.hud-col>b{font-size:24px;color:#ffd166;line-height:1;}
.board-frame{
    flex:1;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
    border:2px solid rgba(255,255,255,.12);border-radius:20px;padding:6px;
    box-shadow:inset 0 2px 10px rgba(0,0,0,.4),0 20px 40px rgba(0,0,0,.35);
    position:relative;
    min-height:0;
    touch-action:none;
}
.board {
    touch-action:none;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 3px;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(160deg, #432b73, #090b1f);
    border-radius: 14px;
    padding: 2px 4px;
}
.cell{position:relative;border-radius:10px;cursor:pointer;touch-action:none;}
.gem{
    position:absolute;inset:6%;border-radius:28%;
    display:flex;align-items:center;justify-content:center;
    background-size:cover;background-position:center;background-repeat:no-repeat;
    transition:transform .16s cubic-bezier(.2,.9,.2,1.3),top .28s cubic-bezier(.3,.7,.4,1.15),left .2s ease,opacity .2s ease;
    cursor:grab;
    touch-action:none;
}
.gem.red{background-image:url(../images/red.png);}
.gem.green{background-image:url(../images/green.png);}
.gem.blue{background-image:url(../images/blue.png);}
.gem.purple{background-image:url(../images/purpal.png);}
.gem.yellow{background-image:url(../images/yellow.png);}
.gem.orange{background-image:url(../images/orange.png);}
.gem.selected{outline:3px solid #fff;transform:scale(1.08);z-index:5;}
.gem.dragging{z-index:6;}

/* ===== SPECIAL GEM IMAGES (color class + .special, same as index.html) ===== */
.gem.red.special{background-image:url(../images/red-special.png);}
.gem.green.special{background-image:url(../images/green-special.png);}
.gem.blue.special{background-image:url(../images/blue-special.png);}
.gem.purple.special{background-image:url(../images/purpal-special.png);}
.gem.yellow.special{background-image:url(../images/yellow-special.png);}
.gem.orange.special{background-image:url(../images/orange-special.png);}
.gem.special{
    font-size:60%;
    animation:superPulse 1.1s ease-in-out infinite,superSpin 3s linear infinite;
}
.gem.yellow.superbox.special.special-x.fall,.gem.green.powergem.special.special-p.fall,.gem.red.special.special-w.fall,.gem.blue.special.special-h.fall,.gem.purple.special.special-v.fall,.gem.orange.special.special-bomb.fall,.gem.green.superbox.special.special-x.fall,.gem.red.powergem.special.special-p.fall,.gem.blue.special.special-w.fall,.gem.purple.special.special-h.fall,.gem.orange.special.special-v.fall,.gem.yellow.special.special-bomb.fall {
    animation: superPulse 1.1s ease-in-out infinite, superSpin 3s linear infinite;
}

.gem.special.special-bomb{
    background-image:url(../images/bomb-special.png);
    animation:superPulse .7s ease-in-out infinite;
}
.gem.special-w{box-shadow:0 0 0 6px rgba(255,255,255,.35),0 0 25px 6px rgba(255,255,255,.5);}
.gem.special-x{box-shadow:0 0 0 2px rgba(255,255,255,.65),0 0 30px 10px rgba(255,225,120,.7);}
.gem.special-p{box-shadow:0 0 0 5px rgba(255,255,255,.65),0 0 30px 10px rgba(120,225,255,.75);}
.gem.special-h:before,.gem.special-v:before{
    content:"";position:absolute;background:rgba(255,255,255,.85);border-radius:4px;
}
.gem.special-h:before{left:8%;right:8%;top:42%;height:16%;}
.gem.special-v:before{top:8%;bottom:8%;left:42%;width:16%;}
@keyframes superPulse{0%,100%{filter:brightness(1) saturate(1);}50%{filter:brightness(1.7) saturate(1.4);}}
@keyframes superSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ===== POP / FALL / SWAP (same timings as index.html) ===== */
.gem.matched{animation:pop .6s cubic-bezier(.2,.9,.3,1) forwards;}
@keyframes pop{
    0%{transform:scale(1);opacity:1;filter:brightness(1);}
    35%{transform:scale(1.5);opacity:1;filter:brightness(1.8);box-shadow:0 0 30px 12px rgba(255,255,255,.75);}
    100%{transform:scale(0);opacity:0;filter:brightness(2.4);}
}
.gem.fall{animation:fall .4s cubic-bezier(.3,1.4,.4,1) forwards;}
@keyframes fall{
    0%{transform:translateY(-80px);opacity:.2;}
    70%{transform:translateY(0);opacity:1;}
    85%{transform:translateY(6px);}
    100%{transform:translateY(0);}
}
.cell.swap-pop .gem{animation:swapPop .22s cubic-bezier(.3,1.6,.4,1);}
@keyframes swapPop{0%{transform:scale(1);}45%{transform:scale(1.3);}100%{transform:scale(1);}}
.cell.shake{animation:cellShake .3s ease;}
@keyframes cellShake{0%,100%{transform:translate(0,0);}25%{transform:translate(-4px,0);}50%{transform:translate(4px,0);}75%{transform:translate(-3px,0);}}
.gem.spawn{animation:gemSpawn .28s ease;}
@keyframes gemSpawn{from{transform:scale(0);}to{transform:scale(1);}}


.gem.red.striped-v.special.special-v.fall,.gem.green.striped-v.special.special-v.fall,.gem.blue.striped-v.special.special-v.fall,.gem.purple.striped-v.special.special-v.fall,.gem.orange.striped-v.special.special-v.fall,.gem.yellow.striped-v.special.special-v.fall,.gem.red.striped-h.special.special-h.fall,.gem.green.striped-h.special.special-h.fall,.gem.blue.striped-h.special.special-h.fall,.gem.purple.striped-h.special.special-h.fall,.gem.orange.striped-h.special.special-h.fall,.gem.yellow.striped-h.special.special-h.fall {
    animation: superPulse 1.1s ease-in-out infinite, superSpin 3s linear infinite;
}


.gem.blue.superbox.special.special-x, .gem.red.superbox.special.special-x.fall, .gem.green.superbox.special.special-x, .gem.purple.superbox.special.special-x, .gem.orange.superbox.special.special-x, .gem.yellow.superbox.special.special-x{
    background-image: url(../images/square-power.png);
    animation: fall .4s cubic-bezier(.3, 1.4, .4, 1) forwards;
    animation: superPulse 1.1s ease-in-out infinite, superSpin 3s linear infinite;
}

.gem.red.powergem.special.special-p, .gem.green.powergem.special.special-p, .gem.blue.powergem.special.special-p, .gem.purple.powergem.special.special-p, .gem.orange.powergem.special.special-p, .gem.yellow.powergem.special.special-p {
    background-image: url(../images/multi-color-candy.png);
    outline: 0px;
    border: none;
    box-shadow: none;
}

.allTiels img {
    width: 65px;
}

.gem.red.wrapped.special.special-w {
    background-image: url(../images/exta-s-power.png);
}

.gem.red.wrapped.special.special-w, .gem.green.wrapped.special.special-w, .gem.blue.wrapped.special.special-w, .gem.purple.wrapped.special.special-w, .gem.orange.wrapped.special.special-w, .gem.yellow.wrapped.special.special-w {
    background-image: url(../images/exta-s-power.png);
}

/* ===== ULTIMATE / CROSS BLAST SHOCKWAVES ===== */
.shockwave{
    position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;
    border:4px solid rgba(255,255,255,.9);
    box-shadow:0 0 40px 14px rgba(255,200,80,.65);
    transform:translate(-50%,-50%);pointer-events:none;z-index:48;
    animation:shockwaveExpand .7s ease-out forwards;
}
@keyframes shockwaveExpand{
    0%{width:20px;height:20px;opacity:1;}
    100%{width:900px;height:900px;opacity:0;}
}
.board.hand-power-active{box-shadow:inset 0 0 0 2px rgba(120,225,255,.6),0 0 26px 6px rgba(120,225,255,.35);}
.board.hammer-active{box-shadow:inset 0 0 0 2px rgba(255,209,102,.6),0 0 26px 6px rgba(255,209,102,.35);}
.board.bomb-active{box-shadow:inset 0 0 0 2px rgba(255,120,120,.6),0 0 26px 6px rgba(255,120,120,.35);}
.board.ultimate-shake{animation:ultimateShake .5s;}
@keyframes ultimateShake{
    0%,100%{transform:translate(0,0);}
    20%{transform:translate(-8px,4px);}
    40%{transform:translate(8px,-4px);}
    60%{transform:translate(-6px,3px);}
    80%{transform:translate(6px,-3px);}
}
.shockwave.cross-blast{
    border-color:rgba(110,210,255,.95);
    box-shadow:0 0 35px 12px rgba(70,190,255,.7);
    animation:crossExpand .55s ease-out forwards;
}
@keyframes crossExpand{
    0%{width:20px;height:20px;opacity:1;border-radius:50%;}
    100%{width:700px;height:60px;opacity:0;border-radius:12px;}
}
.board.cross-shake{animation:crossShake .35s;}
@keyframes crossShake{
    0%,100%{transform:translate(0,0);}
    25%{transform:translate(-4px,0);}
    50%{transform:translate(4px,0);}
    75%{transform:translate(-3px,0);}
}
@keyframes specialPulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.5);}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.combo-text{
    position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.5);
    font-size:34px;font-weight:900;color:#ffd166;text-shadow:0 4px 10px rgba(0,0,0,.6);
    z-index:40;opacity:0;pointer-events:none;
}
.combo-text.show{animation:comboPop .9s ease forwards;}
@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4);}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15);}70%{opacity:1;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-70%) scale(1);}}

.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:30;overflow:hidden;border-radius:14px;}
.fx-flash{position:absolute;inset:0;background:#fff;opacity:0;}
.fx-flash.show{animation:flashFx .35s ease;}
@keyframes flashFx{0%{opacity:.85;}100%{opacity:0;}}
.board.shake{animation:boardShake .35s ease;}
@keyframes boardShake{0%,100%{transform:translate(0,0);}20%{transform:translate(-4px,3px);}40%{transform:translate(4px,-3px);}60%{transform:translate(-3px,-2px);}80%{transform:translate(3px,2px);}}
.laser{
    position:absolute;height:5px;border-radius:4px;z-index:46;
    background:linear-gradient(90deg,rgba(107,214,255,0),rgba(107,214,255,.95),rgba(255,255,255,1));
    transform-origin:left center;
    box-shadow:0 0 8px 2px rgba(107,214,255,.8);
}
.flying-saucer{
    position:absolute;font-size:26px;z-index:47;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
    animation:saucerBob 1s ease-in-out infinite;
    transition:left .36s ease,top .36s ease;
}
@keyframes saucerBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

.cell.cheat-hint{
    outline:3px solid #7bec8f;
    border-radius:10px;
    animation:cheatHintPulse .7s ease-in-out infinite;
    z-index:6;
}
@keyframes cheatHintPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(123,236,143,.7);}
    50%{box-shadow:0 0 18px 6px rgba(123,236,143,.85);}
}
.planted-bomb{
    position:absolute;z-index:46;pointer-events:none;
    transform:translate(-50%,-50%);
    transform-origin:center;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));
    animation:bombDrop .18s cubic-bezier(.2,.9,.3,1.5), bombFuse .55s ease-in-out .18s infinite;
}
.planted-bomb.fuse-fast{
    animation:bombFuse .16s ease-in-out infinite;
}
@keyframes bombDrop{
    0%{transform:translate(-50%,-140%) scale(.5);opacity:0;}
    100%{transform:translate(-50%,-50%) scale(1);opacity:1;}
}
@keyframes bombFuse{
    0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)) brightness(1);}
    50%{transform:translate(-50%,-50%) scale(1.22) rotate(-6deg);filter:drop-shadow(0 0 14px rgba(255,120,60,.9)) brightness(1.6);}
}
.hammer-fx{
    position:absolute;font-size:30px;z-index:45;
    transform-origin:80% 20%;
    animation:hammerSwing .38s cubic-bezier(.5,0,.7,1) forwards;
    filter:drop-shadow(0 6px 6px rgba(0,0,0,.5));
}
@keyframes hammerSwing{
    0%{transform:rotate(-70deg) translate(-6px,-16px) scale(1);}
    70%{transform:rotate(-70deg) translate(-6px,-16px) scale(1);}
    85%{transform:rotate(15deg) translate(0,0) scale(1.1);}
    100%{transform:rotate(15deg) translate(0,0) scale(1);opacity:0;}
}
.cell.smashed{animation:tileCrack .3s ease;}
@keyframes tileCrack{
    0%{transform:scale(1) rotate(0);filter:brightness(1);}
    30%{transform:scale(.85) rotate(-4deg);filter:brightness(2);}
    60%{transform:scale(1.05) rotate(3deg);filter:brightness(1.4);}
    100%{transform:scale(0) rotate(8deg);filter:brightness(1);opacity:0;}
}
.crack-bits{position:absolute;font-size:14px;z-index:44;animation:crackBit .5s ease forwards;pointer-events:none;}
@keyframes crackBit{
    0%{transform:translate(0,0) rotate(0deg);opacity:1;}
    100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0;}
}

.no-moves-banner{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
    background:rgba(6,4,20,.75);border-radius:14px;z-index:50;font-weight:900;font-size:18px;color:#ffd166;
}

/* ===== TUTORIAL / SLIDES ===== */
.slide{display:none;text-align:center;gap:14px;flex-direction:column;align-items:center;}
.slide.active {
    display: flex;
    flex: 1;
    justify-content: start;
    padding: 80px 0px 10px;
    gap: 50px;
}


.ls-panel:has(button) {
    padding: 30px 10px 80px;
}

.slide-demo{font-size:34px;letter-spacing:6px;}
.slide-dots{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-shrink:0; margin-bottom: 40px;}
.slide-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);}
.slide-dots span.active{background:#ffd166;}

/* ===== DAILY REWARD ===== */
.daily-inventory{display:flex;justify-content:center;gap:12px;margin-bottom:14px;flex-shrink:0;}
.booster-btn.inv{cursor:default; border: none;}
.booster-btn.inv.bump{animation:invBump .6s cubic-bezier(.2,.9,.3,1.4);}
@keyframes invBump{
    0%{transform:scale(1);}
    35%{transform:scale(1.28);filter:brightness(1.5);}
    100%{transform:scale(1);}
}
.daily-list{flex:1;display:flex;flex-direction:column;justify-content:center;}
.daily-today{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    text-align:center;padding:28px 20px;border-radius:22px;
    background:rgba(255,255,255,.06);border:1px solid #ffd166;
    box-shadow:0 0 26px rgba(255,209,102,.35);
}
.daily-today.archived{opacity:.6;border-color:rgba(255,255,255,.2);box-shadow:none;}
.daily-today-icon{width:96px;height:96px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));animation:invBump .6s cubic-bezier(.2,.9,.3,1.4);}
.daily-today-icon img{width:100%;height:100%;object-fit:contain;}
.daily-today-day{font-size:13px;letter-spacing:1.5px;color:#b8c3ff;font-weight:800;}
.daily-today-label{font-size:24px;font-weight:900;color:#ffd166;}
.daily-today-status{font-size:13px;font-weight:700;color:#cdd4ff;}
.daily-today.archived .daily-today-status{color:#7bec8f;}

/* ===== MORE GAMES ===== */
.game-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);margin-bottom:10px;}
.game-card .icon{font-size:30px;}
.game-card .name{flex:1;font-weight:700;}

/* ===== SETTINGS ===== */
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:14px;background:transparent;margin-bottom:10px;}
.toggle{width:46px;height:26px;border-radius:20px;background:rgb(117 117 117 / 15%);position:relative;cursor:pointer;flex-shrink:0;}
.toggle.on{background:linear-gradient(90deg,#3ee06a,#159a3f);}
.toggle .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .18s ease;}
.toggle.on .knob{left:23px;}

/* ===== SETTINGS CARD ===== */
.st-card {
    background: #9033c9;
    border: 1px solid #6a2fc9;
    border-radius: 30px;
    padding: 25px 10px 20px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 2px 4px rgba(255, 255, 255, .8);
    max-width: 340px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}


.st-close{
    position:absolute;top:-2px;right:-3px;width:38px;height:38px;
    background:transparent;border:none;padding:0;cursor:pointer;
}
.st-close img{width:100%;height:auto;display:block;}

.setting-row-setting {
    background-color: #feead5;
    padding: 20px 15px;
    border-radius: 15px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.setting-row-setting::-webkit-scrollbar{display:none;}


.st-title {
    text-align: center;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 16px;
    text-shadow: 6px 5px 9px #3f3f3fb8;
}

.st-row{
    display:flex;align-items:center;justify-content:space-between;
    border:1px solid rgba(90,50,20,.12);
    border-radius:16px;padding:2px 14px;margin-bottom:10px;
    font-weight:700;font-size:14px;color:#5a3a12;
}

.st-row > span {
    display: flex;
    align-items: center;
}

.st-btn {
    width: 90%;
    border: none;
    cursor: pointer;
    /* background: linear-gradient(160deg, #a568ff, #6a2fd6); */
    /* border: 2px solid #5222a8; */
    /* color: #fff; */
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0px;
    border-radius: 0px;
    padding: 0px;
    margin-top: 10px;
    /* box-shadow: 0 4px 0 rgba(0, 0, 0, .2); */
    outline: none;
    border: none;
    overflow: hidden;
    background-color: transparent;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 20%; 
} 

.st-row:has(.toggle) {
    margin-bottom: 20px;
}

.st-btn img.howtopaly, .st-btn img.privacyPolicy {
    width: 100%;
    height: 65px;
    display: block;
}

.st-btn:active{transform:translateY(3px);box-shadow:none;}

/* ===== RESULT CARDS ===== */
.stars-row{font-size:38px;letter-spacing:8px;margin:10px 0;}
.stars-row span{opacity:.2;display:inline-block;transition:opacity .3s ease,transform .3s ease;}
.stars-row span.lit{opacity:1;animation:starPop .4s ease;}
@keyframes starPop{0%{transform:scale(0) rotate(-30deg);}70%{transform:scale(1.3) rotate(8deg);}100%{transform:scale(1) rotate(0);}}

/* ===== LEVEL COMPLETE CARD ===== */
.lc-card {
    background: linear-gradient(180deg, #2a1a5c, #1a0f3a);
    border: 4px solid #7a3fd6;
    border-radius: 26px;
    padding: 22px 16px 18px;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 2px 4px rgba(255, 255, 255, .12);
    /* background-image: url(../images/glow-effect.png); */
    /* background-size: 320px; */
    /* background-position: 12px -30px; */
    /* background-repeat: no-repeat; */
    position: relative;
    z-index: 11;
}
.lc-card:before {
    content: '';
    position: absolute;
    background-size: 320px;
    background-position: 4px 0px;
    background-repeat: no-repeat;
    background-image: url(../images/glow-effect.png);
    width: 100%;
    height: 260px;
    left: 0px;
    z-index: 0;
    opacity: 0;
    top: -9px;
    transform: translateY(60px);
}
.lc-card.stars-in:before {
    animation: sunShineUp .6s cubic-bezier(.2,.8,.3,1.1) forwards;
}
@keyframes sunShineUp {
    0%{opacity:0; transform:translateY(60px);}
    100%{opacity:.8; transform:translateY(0);}
}

.lc-stars {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    margin-bottom: 0px;
    z-index: 7;
    position: relative;
}

.lc-star{width:44px;opacity:.25;transform:scale(0) rotate(-30deg);transition:opacity .3s ease;}
.lc-star-mid{width:58px;margin-bottom:6px;}
.lc-star.lit{opacity:1;animation:starPop .4s ease forwards;}
.lc-ribbon-wrap {
    position: relative;
    margin: 2px 0 0px;
    margin-top: -13px;
    z-index: 2;
}

.lc-ribbon{width:100%;display:block;}
.lc-body {
    background: linear-gradient(160deg, #fff4db, #edca81);
    border-radius: 16px;
    padding: 56px 16px 25px;
    margin-bottom: 14px;
    color: #5a3a12;
    width: 72%;
    margin: 0 auto;
    margin-top: -70px;
    border: 7px solid #8f32cd;
    z-index: 1;
    position: relative;
}
.lc-score-label{font-weight:700;font-size:13px;color:#c50d4a;}
.lc-score-val {
    font-size: 28px;
    font-weight: 900;
    color: #df125a;
    margin: 0px 0 10px;
}

.lc-target {
    background: rgb(113 113 113 / 8%);
    border-radius: 10px;
    padding: 7px 10px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 12px;
    border: 2px solid #ffe3a9;
    color: #790934;
}

#winReward {
    color: #281c02;
}

.lc-reward {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 200, 80, .9);
    border-radius: 20px;
    padding: 6px 16px;
    font-weight: 800;
    color: #a86a00;
    width: fit-content;
    margin: 0 auto;
}
.lc-coin{width:22px;height:22px;}
.lc-next-img {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    width: 70%;
    margin-bottom: 14px;
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
    margin-top: -17px;
    z-index: 1;
    position: relative;
}

.lc-actions button.lc-icon-btn:nth-child(1) img {
    width: 39px;
    height: 38px;
}

.lc-actions button.lc-icon-btn:nth-child(2) img {
    width: 50px;
    height: 49px;
}

.lc-actions button.lc-icon-btn:nth-child(3) img {
    width: 46px;
    height: 48px;
}


.lc-next-img img{width:100%;display:block;}
.lc-next-img:active{transform:translateY(3px);}
.lc-actions{display:flex;justify-content:center;gap:16px;}
.lc-icon-btn{
   background: transparent;
    border: none;
}


.lc-icon-btn:active{transform:translateY(3px);box-shadow:none;}

.lc-icon-btn img {
    width: 40px;
    height: 44px;
}

/* ===== GAME OVER CARD ===== */
.go-card{
    background:linear-gradient(180deg,#3a1a4c,#1a0f2a);
    border:4px solid #7a3fd6;border-radius:26px;
    padding:56px 16px 18px;text-align:center;position:relative;
    box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 2px 4px rgba(255,255,255,.12);
}
.go-face {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 78px;
    border-radius: 50%;
    /* background: radial-gradient(circle at 35% 28%, #ff9a9a, #e0347a 60%, #8f1450); */
    /* box-shadow: inset 0 4px 8px rgba(255, 255, 255, .55), inset 0 -8px 14px rgba(0, 0, 0, .3), 0 8px 16px rgba(0, 0, 0, .4); */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
}


.st-icon {
    font-size: 35px;
}

.screen-wrapallSection {
    background-color: rgb(21 0 133 / 20%);
    border-radius: 15px;
    background: linear-gradient(to bottom, rgba(0, 15, 255, 0) 0%, rgba(70, 45, 113, 1) 30%, rgba(70, 45, 113, 1) 56%, rgba(70, 45, 113, 0.98) 57%, rgba(70, 45, 113, 0) 100%);
}
.go-ribbon-wrap {
    position: relative;
    margin: 0 0 14px;
    top: 36px;
}
.go-face img {
    width: 100%;
    height: auto;
}
.go-ribbon{width:100%;display:block;filter:hue-rotate(34deg) saturate(1.3); height: 90px;}
.go-ribbon-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 26px;
    letter-spacing: .5px;
    text-shadow: 0 3px 4px rgba(0, 0, 0, .4);
    top: -30px;
}
.go-body{margin-bottom:14px;}
.go-score-label{font-weight:700;font-size:13px;color:#fff;}
.go-score-val{font-size:28px;font-weight:900;color:#fff;margin:2px 0 12px;}
.go-target {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 10px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 12px;
    color: #e8ecff;
    border: 1px solid #533a69;
    width: 60%;
    margin: 0 auto;
    margin-bottom: 10px;
}
.go-msg {
    color: #ffd7a7;
    font-weight: 800;
    font-size: 14px;
}
.go-btn{margin-bottom:10px;}


@media(max-width:420px){
    .mb-logo{font-size:clamp(30px,9vw,44px);}
    .level-grid{grid-template-columns:repeat(4,1fr);gap:1px;}

    .level-cell.current {
    width: 71px;
    height: 71px;
}

  .level-cell {
    width: 75px;
    height: 75px;}

    
    
}

/* ===== CHEAT PANEL ===== */
.cheat-toggle{
    position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:500;
    width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
    background:linear-gradient(160deg,#ff6bd6,#7a2fe0);color:#fff;font-size:20px;cursor:pointer;
    box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.cheat-panel{
    position:fixed;right:14px;bottom:calc(68px + env(safe-area-inset-bottom,0px));z-index:500;
    width:min(280px,calc(100vw - 28px));max-height:70vh;overflow-y:auto;
    touch-action:pan-y;
    background:rgba(10,6,26,.96);border:1px solid rgba(255,255,255,.2);border-radius:16px;
    padding:12px;display:none;box-shadow:0 20px 50px rgba(0,0,0,.6);
}
.cheat-panel.open{display:block;}
.cheat-title{display:flex;align-items:center;justify-content:space-between;font-weight:900;font-size:12px;letter-spacing:1px;color:#ffd166;margin-bottom:8px;}
.cheat-group{margin-bottom:10px;}
.cheat-group b{display:block;font-size:10px;color:#b8c3ff;text-transform:uppercase;margin-bottom:6px;letter-spacing:.5px;}
.cheat-group .btn{width:100%;text-align:left;font-size:11px;padding:8px 10px;margin-bottom:6px;min-height:auto;box-shadow:none;border-radius:8px;}

 .rotate-notice{display:none;}
 @media (orientation:landscape) and (max-width:1023px) and (pointer:coarse) {

    body{background-color:#000; width: 100%; height: 100%; overflow:hidden;}
         
    
    .rotate-notice {
            display:flex; position:fixed; inset:0; z-index:9999;
            align-items:center; justify-content:center; text-align:center;
            padding:24px;
            background:#27133e;}
          .rotate-notice::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.45); }
          .rotate-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:420px; }
          .rotate-inner svg { width:52px; height:52px; color:var(--gold-1); animation:rotateHint 2s ease-in-out infinite; }
          .rotate-hi { font-weight:800; font-size:18px; line-height:1.3; color:#fff; }
          .rotate-en { font-weight:600; font-size:13px; color:var(--gold-1); }
          @keyframes rotateHint { 0%,60%,100% { transform:rotate(0); } 30% { transform:rotate(-90deg); } }
        
}