@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@900&family=Rubik+Mono+One&display=swap');

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

body{
    background:#02030a;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    overflow:hidden;
    font-family:'Nunito', Arial, sans-serif;
    font-weight:900;
}

.game{
    position:relative;
    width:360px;
    transform-origin:top center;
}

.machine-bg{
    display:block;
    width:100%;
    user-select:none;
    pointer-events:none;
}

.playfield{
    position:absolute;
    left:52px;
    top:82px;
    width:260px;
    height:200px;
    overflow:hidden;
}

.layer{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.back-layer{ z-index:1; }
.rail-layer{ z-index:2; }
.mechanism-layer{ z-index:3; }
.hanger-layer{ z-index:4; }

.glass-layer{
    z-index:6;
    pointer-events:none;
}

.spark-layer{
    position:absolute;
    inset:0;
    z-index:7;
    pointer-events:none;
}

.rail{
    position:absolute;
    left:10px;
    top:45px;
    width:240px;
    height:auto;
    user-select:none;
    pointer-events:none;
}

.hanger{
    position:absolute;
    top:0;
    width:40px;
    height:170px;
    transform-origin:top center;
    transform:translate3d(-50%, 0, 0) rotate(-1.8deg);
    animation:swing 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform-style:preserve-3d;
}

.hanger-1{ left:35px; animation-delay:0s; }
.hanger-2{ left:82px; animation-delay:.35s; }
.hanger-3{ left:130px; animation-delay:.7s; }
.hanger-4{ left:178px; animation-delay:1.05s; }
.hanger-5{ left:225px; animation-delay:1.4s; }

.rope{
    position:absolute;
    left:50%;
    top:0;
    width:18px;
    height:124px;
    transform:translate3d(-50%, 0, 0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    object-fit:fill;
    user-select:none;
    pointer-events:none;
}

.prize{
    position:absolute;
    left:50%;
    top:116px;
    width:34px;
    height:auto;
    transform:translate3d(-50%, 0, 0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    user-select:none;
    pointer-events:none;
}

.watch-prize{
    top:100px;
    width:30px;
}

.mechanism-unit{
    position:absolute;
    left:0;
    top:42px;
    width:40px;
    height:80px;
    z-index:5;
    --mechanism-x:90px;
    transform:translate3d(var(--mechanism-x), 0, 0);
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform-style:preserve-3d;
}

.mechanism-unit.shake{
    animation:mechanismShake .18s linear;
}

.carriage{
    position:absolute;
    left:0;
    top:0;
    width:40px;
    height:auto;
    user-select:none;
    pointer-events:none;
}

.cutter{
    position:absolute;
    left:0;
    top:20px;
    width:40px;
    height:46px;
    transform-origin:center top;
    user-select:none;
    pointer-events:none;
}

.cutter-motion{
    position:absolute;
    inset:0;
    width:40px;
    height:46px;
    transform:translate3d(0, 0, 0) scale(1);
    transform-origin:center top;
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    pointer-events:none;
}

.cutter-base{
    position:absolute;
    left:6px;
    top:0;
    width:28px;
    height:auto;
    z-index:1;
    user-select:none;
    pointer-events:none;
}

.blade{
    position:absolute;
    top:9px;
    height:23px;
    width:auto;
    z-index:2;
    transition:transform .08s cubic-bezier(.15,1.7,.35,1);
    user-select:none;
    pointer-events:none;
}

.blade-left{
    left:7px;
    transform-origin:78% 92%;
    transform:rotate(-7deg);
}

.blade-right{
    right:7px;
    transform-origin:22% 92%;
    transform:rotate(7deg);
}

.cutter.cutting .blade-left{
    transform:rotate(10deg);
}

.cutter.cutting .blade-right{
    transform:rotate(-10deg);
}

.cutter.rebound .blade-left{
    transform:rotate(5deg);
}

.cutter.rebound .blade-right{
    transform:rotate(-5deg);
}

.cutter.attack{
    animation:cutterAttack .75s ease-in-out;
}

.cutter-flash{
    position:absolute;
    left:50%;
    top:18px;
    width:30px;
    height:16px;
    opacity:0;
    transform:translate3d(-50%, 0, 0) scale(.55);
    transform-origin:center;
    z-index:5;
    will-change:transform, opacity;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    pointer-events:none;
}

.cutter-flash span{
    position:absolute;
    width:8px;
    height:2px;
    background:#fff7a8;
    opacity:1;
    border-radius:3px;
    box-shadow:0 0 4px rgba(255,255,255,.9), 0 0 7px rgba(255,220,80,.72);
}

.cutter-flash span:nth-child(1){
    left:2px;
    top:6px;
    transform:rotate(-25deg);
}

.cutter-flash span:nth-child(2){
    right:2px;
    top:6px;
    transform:rotate(25deg);
}

.cutter-flash span:nth-child(3){
    left:11px;
    top:1px;
    transform:rotate(-75deg);
}

.cutter-flash span:nth-child(4){
    left:11px;
    top:11px;
    transform:rotate(75deg);
}

.hanger.fall{
    animation:prizeFall .8s ease-in forwards;
}

.ui-panel{
    position:absolute;
    left:50%;
    bottom:12px;
    width:220px;
    transform:translateX(-50%);
    z-index:20;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
}

.status-text{
    position:absolute;
    left:50%;
    top:-265px;
    width:240px;
    transform:translateX(-50%);
    font-family:'Nunito', Arial, sans-serif;
    font-size:17px;
    line-height:20px;
    font-weight:900;
    text-align:center;
    color:#e4e70a;
    -webkit-text-stroke:1px #302222;
    text-shadow:
        0 2px 0 #000,
        0 0 8px rgba(255,0,180,.9),
        0 0 14px rgba(255,230,109,.7);
    white-space:nowrap;
    pointer-events:none;
    min-height:20px;
}

.attempts{
    font-family:'Nunito', Arial, sans-serif;
    font-size:12px;
    font-weight:900;
    color:#ffe28a;
    text-shadow:0 2px 4px rgba(0,0,0,.85);
}

.stop-button{
    width:86px;
    height:30px;
    border:0;
    border-radius:16px;
    background:linear-gradient(to bottom, #ff4b4b, #9d0000);
    color:#fff;
    font-family:'Nunito', Arial, sans-serif;
    font-size:14px;
    font-weight:900;
    box-shadow:0 3px 0 #4c0000, 0 0 10px rgba(255,0,0,.7);
    cursor:pointer;
}

.stop-button:disabled{
    opacity:.6;
    cursor:not-allowed;
}

/* START SCREEN */

.start-overlay{
    position:fixed;
    inset:0;
    z-index:999998;
    display:flex;
    justify-content:center;
    align-items:center;
    background:
        radial-gradient(circle at center, rgba(255,0,220,.13), rgba(0,0,0,.96) 58%),
        rgba(0,0,0,.94);
    backdrop-filter:blur(6px);
}

.start-overlay.hide{
    display:none;
}

.start-card{
    position:relative;
    width:310px;
    min-height:390px;
    padding:34px 22px 28px;
    border-radius:28px;
    background:
        linear-gradient(180deg, rgba(35,20,55,.96), rgba(7,4,15,.98));
    box-shadow:
        0 0 28px rgba(255,0,220,.35),
        0 0 70px rgba(255,0,220,.22),
        0 0 85px rgba(0,210,255,.12),
        inset 0 0 26px rgba(255,255,255,.05);
    text-align:center;
    overflow:hidden;
    animation:startPop .45s cubic-bezier(.2,1.4,.4,1);
}

.start-shine{
    position:absolute;
    inset:-50% -20%;
    background:
        radial-gradient(circle at 50% 10%, rgba(255,255,255,.08), transparent 38%),
        linear-gradient(120deg, transparent 30%, rgba(255,255,255,.06), transparent 65%);
    pointer-events:none;
}

.start-logo-img{
    display:block;
    width:210px;
    max-width:100%;
    height:auto;
    margin:0 auto 20px;
    user-select:none;
    pointer-events:none;
    filter:
        drop-shadow(0 0 10px rgba(255,70,210,.25))
        drop-shadow(0 0 12px rgba(0,220,255,.18));
}

.start-logo::after{
    content:"SNAP";
    position:absolute;
    left:0;
    top:0;
    z-index:-1;

    font:inherit;
    letter-spacing:inherit;
    color:rgba(255,255,255,.07);

    text-shadow:
        0 0 18px rgba(255,70,210,.65),
        0 0 30px rgba(0,220,255,.38);
}

.start-title{
    position:relative;
    font-family:'Nunito', Arial, sans-serif;
    font-size:27px;
    line-height:1.22;
    font-weight:900;
    color:#ffe66d;
    text-shadow:
        0 2px 0 #000,
        0 0 10px rgba(255,230,109,.65),
        0 0 18px rgba(255,200,40,.35);
    margin-bottom:22px;
}

.start-subtitle{
    position:relative;
    font-family:'Nunito', Arial, sans-serif;
    font-size:16px;
    line-height:1.45;
    font-weight:900;
    color:#ffffff;
    opacity:.94;
    text-shadow:
        0 2px 0 rgba(0,0,0,.75),
        0 0 8px rgba(255,255,255,.12);
    margin-bottom:34px;
}

.start-button{
    position:relative;
    width:220px;
    height:58px;
    border:0;
    border-radius:32px;
    background:linear-gradient(to bottom, #ff55dc, #d800a5 48%, #930070);
    color:#fff;
    font-family:'Nunito', Arial, sans-serif;
    font-size:22px;
    font-weight:900;
    letter-spacing:.5px;
    text-shadow:0 2px 0 rgba(0,0,0,.45);
    box-shadow:
        0 6px 0 #52003c,
        0 0 18px rgba(255,0,200,.75),
        0 0 32px rgba(255,0,200,.35);
    cursor:pointer;
}

.start-button:active{
    transform:translateY(4px);
    box-shadow:
        0 2px 0 #52003c,
        0 0 18px rgba(255,0,200,.75),
        0 0 32px rgba(255,0,200,.35);
}

/* WIN */

.win-flash{
    position:fixed;
    inset:0;
    z-index:999997;
    pointer-events:none;
    opacity:0;
    background:
        radial-gradient(circle at center, rgba(255,245,160,.95), rgba(255,170,0,.48) 24%, rgba(255,0,200,.18) 44%, transparent 68%);
}

.win-flash.show{
    animation:winFlash .68s ease-out forwards;
}

.win-overlay{
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at center, rgba(255,220,60,.18), transparent 35%),
        radial-gradient(circle at 50% 18%, rgba(255,0,200,.18), transparent 42%),
        rgba(0,0,0,.86);
    backdrop-filter:blur(6px);
}

.win-overlay.show{
    display:flex;
}

.win-burst{
    position:absolute;
    left:50%;
    top:50%;
    width:460px;
    height:460px;
    transform:translate(-50%, -50%);
    border-radius:50%;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(255,225,90,.32) 10deg,
            transparent 22deg,
            transparent 42deg,
            rgba(255,0,220,.22) 54deg,
            transparent 68deg,
            transparent 90deg,
            rgba(0,230,255,.22) 104deg,
            transparent 120deg,
            transparent 144deg,
            rgba(255,225,90,.32) 158deg,
            transparent 176deg,
            transparent 210deg,
            rgba(255,0,220,.22) 224deg,
            transparent 242deg,
            transparent 276deg,
            rgba(0,230,255,.22) 290deg,
            transparent 306deg,
            transparent 360deg
        );
    opacity:.9;
    filter:blur(.2px);
    animation:winBurstSpin 5s linear infinite;
    pointer-events:none;
}

.win-confetti-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:1;
}

.win-confetti{
    position:absolute;
    top:-18px;
    width:7px;
    height:13px;
    border-radius:2px;
    opacity:0;
    box-shadow:0 0 10px rgba(255,255,255,.45);
    animation:winConfettiFall var(--confetti-duration) ease-in forwards;
    animation-delay:var(--confetti-delay);
}

.win-confetti:nth-child(3n){
    width:10px;
    height:6px;
    border-radius:6px;
}

.win-confetti:nth-child(4n){
    width:5px;
    height:16px;
}

.win-card{
    position:relative;
    z-index:3;
    width:315px;
    min-height:485px;
    padding:22px 18px 24px;
    border-radius:28px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,220,80,.18), transparent 36%),
        linear-gradient(180deg, rgba(43,18,62,.97), rgba(9,2,17,.99));
    border:1px solid rgba(255,220,120,.22);
    box-shadow:
        0 0 28px rgba(255,210,60,.42),
        0 0 58px rgba(255,0,220,.28),
        0 0 92px rgba(0,220,255,.14),
        inset 0 0 28px rgba(255,255,255,.06);
    text-align:center;
    overflow:hidden;
    animation:winCardMegaPop .58s cubic-bezier(.17,1.45,.35,1);
}

.win-card-shine{
    position:absolute;
    inset:-60% -25%;
    z-index:0;
    background:
        radial-gradient(circle at 50% 8%, rgba(255,255,255,.12), transparent 30%),
        linear-gradient(115deg, transparent 28%, rgba(255,255,255,.08), transparent 58%);
    animation:winCardShine 2.8s ease-in-out infinite;
    pointer-events:none;
}

.win-top-label{
    position:relative;
    z-index:2;
    display:inline-block;
    margin-bottom:6px;
    padding:6px 12px;
    border-radius:18px;
    font-family:'Nunito', Arial, sans-serif;
    font-size:13px;
    line-height:1;
    font-weight:900;
    color:#2b1400;
    background:linear-gradient(180deg, #fff1a8, #ffb900);
    box-shadow:
        0 3px 0 #8f4c00,
        0 0 16px rgba(255,210,0,.65),
        0 0 28px rgba(255,120,0,.35);
}

.win-title{
    position:relative;
    z-index:2;
    font-family:'Rubik Mono One', 'Nunito', Arial, sans-serif;
    font-size:32px;
    line-height:1;
    font-weight:400;
    color:#ffd84a;
    -webkit-text-stroke:2px #6b2c00;
    text-shadow:
        0 2px 0 #000,
        0 0 8px rgba(255,220,0,1),
        0 0 18px rgba(255,180,0,.95),
        0 0 34px rgba(255,90,0,.78);
    margin-bottom:14px;
}

.win-prize-wrap{
    position:relative;
    z-index:2;
    width:190px;
    height:178px;
    margin:0 auto 14px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.win-prize-glow{
    position:absolute;
    left:50%;
    top:50%;
    width:168px;
    height:168px;
    transform:translate(-50%, -50%);
    border-radius:50%;
    background:
        radial-gradient(circle, rgba(255,255,255,.95), rgba(255,220,70,.62) 22%, rgba(255,0,220,.25) 48%, transparent 70%);
    filter:blur(1px);
    opacity:.9;
    animation:winPrizeGlow 1.25s ease-in-out infinite alternate;
}

.win-prize-image{
    position:relative;
    z-index:3;
    display:block;
    width:auto;
    height:auto;
    max-width:170px;
    max-height:172px;
    object-fit:contain;
    filter:
        drop-shadow(0 12px 12px rgba(0,0,0,.75))
        drop-shadow(0 0 18px rgba(255,220,80,.7));
    animation:winPrizeFloat 1.45s ease-in-out infinite alternate;
}

.win-text{
    position:relative;
    z-index:2;
    font-family:'Nunito', Arial, sans-serif;
    font-size:15px;
    line-height:1;
    font-weight:900;
    color:#ffffff;
    text-shadow:0 2px 0 #000, 0 0 10px rgba(255,255,255,.25);
    margin-bottom:8px;
}

.win-prize-name{
    position:relative;
    z-index:2;
    min-height:34px;
    margin:0 auto 18px;
    padding:0 6px;
    font-family:'Rubik Mono One', 'Nunito', Arial, sans-serif;
    font-size:19px;
    line-height:1.18;
    font-weight:400;
    color:#fff4a8;
    -webkit-text-stroke:1px #7b3500;
    text-shadow:
        0 2px 0 #000,
        0 0 8px rgba(255,220,0,.9),
        0 0 18px rgba(255,120,0,.7);
}

.claim-button{
    position:relative;
    z-index:2;
    width:235px;
    height:56px;
    border:0;
    border-radius:31px;
    background:linear-gradient(to bottom, #ffea74, #ff9f00 48%, #c24a00);
    color:#2a1000;
    font-family:'Nunito', Arial, sans-serif;
    font-size:17px;
    font-weight:900;
    text-shadow:0 1px 0 rgba(255,255,255,.45);
    box-shadow:
        0 6px 0 #6d2300,
        0 0 16px rgba(255,220,0,.85),
        0 0 34px rgba(255,90,0,.55);
    cursor:pointer;
}

.claim-button:active{
    transform:translateY(4px);
    box-shadow:
        0 2px 0 #6d2300,
        0 0 16px rgba(255,220,0,.85),
        0 0 34px rgba(255,90,0,.55);
}

.claim-button.claimed,
.claim-button:disabled{
    opacity:.92;
    cursor:not-allowed;
    background:linear-gradient(to bottom, #a6ff8d, #27d34d 52%, #087d21);
    box-shadow:
        0 4px 0 #064716,
        0 0 16px rgba(0,255,80,.7),
        0 0 30px rgba(0,255,140,.35);
}

.claim-message{
    position:relative;
    z-index:2;
    min-height:20px;
    margin-top:13px;
    font-family:'Nunito', Arial, sans-serif;
    font-size:13px;
    line-height:1.2;
    font-weight:900;
    color:#a6ff8d;
    text-shadow:0 0 10px rgba(0,255,120,.65);
    opacity:0;
    transform:translateY(6px);
    transition:opacity .25s ease, transform .25s ease;
}

.claim-message.show{
    opacity:1;
    transform:translateY(0);
}

/* PARTICLES */

.spark{
    position:absolute;
    width:6px;
    height:2px;
    background:#fff0a5;
    border-radius:4px;
    box-shadow:0 0 8px rgba(255,255,255,.9), 0 0 12px rgba(255,210,70,.8);
    animation:sparkFly .22s ease-out forwards;
    pointer-events:none;
}

/* ANIMS */

@keyframes swing{
    0%{ transform:translate3d(-50%, 0, 0) rotate(-1.8deg); }
    50%{ transform:translate3d(-50%, 0, 0) rotate(1.8deg); }
    100%{ transform:translate3d(-50%, 0, 0) rotate(-1.8deg); }
}

@keyframes swingAndroid{
    0%{ transform:translate3d(-50%, 0, 0) rotate(-1.35deg); }
    50%{ transform:translate3d(-50%, 0, 0) rotate(1.35deg); }
    100%{ transform:translate3d(-50%, 0, 0) rotate(-1.35deg); }
}

@keyframes cutterAttack{
    0%{
        transform:scale(1);
        filter:drop-shadow(0 0 0 rgba(0,0,0,0));
    }
    30%{
        transform:scale(1.35);
        filter:drop-shadow(0 16px 18px rgba(0,0,0,.85));
    }
    58%{
        transform:scale(1.35);
        filter:drop-shadow(0 16px 18px rgba(0,0,0,.85));
    }
    100%{
        transform:scale(1);
        filter:drop-shadow(0 0 0 rgba(0,0,0,0));
    }
}

@keyframes prizeFall{
    0%{
        transform:translate3d(-50%, 0, 0) rotate(0deg);
        opacity:1;
    }
    100%{
        transform:translate3d(-50%, 90px, 0) rotate(18deg);
        opacity:0;
    }
}

@keyframes mechanismShake{
    0%{ transform:translate3d(var(--mechanism-x), 0, 0); }
    25%{ transform:translate3d(calc(var(--mechanism-x) - 1px), 0, 0); }
    50%{ transform:translate3d(calc(var(--mechanism-x) + 1px), 0, 0); }
    75%{ transform:translate3d(calc(var(--mechanism-x) - 1px), 0, 0); }
    100%{ transform:translate3d(var(--mechanism-x), 0, 0); }
}

.rope.hit{
    animation:ropeHit .34s ease-out;
}

@keyframes ropeHit{
    0%{ transform:translate3d(-50%, 0, 0) rotate(0deg); }
    20%{ transform:translate3d(-50%, 0, 0) rotate(-1.4deg); }
    45%{ transform:translate3d(-50%, 0, 0) rotate(1.1deg); }
    70%{ transform:translate3d(-50%, 0, 0) rotate(-0.5deg); }
    100%{ transform:translate3d(-50%, 0, 0) rotate(0deg); }
}

@keyframes flashSpark{
    0%{ opacity:0; transform:scale(.4) rotate(0deg); }
    40%{ opacity:1; transform:scale(1) rotate(0deg); }
    100%{ opacity:0; transform:scale(1.25) rotate(0deg); }
}

@keyframes sparkFly{
    0%{
        opacity:1;
        transform:translate(0,0) scale(1);
    }
    100%{
        opacity:0;
        transform:translate(var(--spark-x), var(--spark-y)) scale(.6);
    }
}

@keyframes startPop{
    0%{ transform:scale(.72); opacity:0; }
    100%{ transform:scale(1); opacity:1; }
}

@keyframes winPop{
    0%{ transform:scale(.65); opacity:0; }
    100%{ transform:scale(1); opacity:1; }
}


@keyframes winFlash{
    0%{ opacity:0; }
    18%{ opacity:1; }
    100%{ opacity:0; }
}

@keyframes winBurstSpin{
    0%{ transform:translate(-50%, -50%) rotate(0deg) scale(1); }
    100%{ transform:translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes winCardMegaPop{
    0%{ transform:scale(.48) translateY(30px); opacity:0; }
    48%{ transform:scale(1.08) translateY(-4px); opacity:1; }
    72%{ transform:scale(.97) translateY(0); }
    100%{ transform:scale(1) translateY(0); opacity:1; }
}

@keyframes winCardShine{
    0%{ transform:translateX(-16%) rotate(0deg); opacity:.7; }
    50%{ transform:translateX(16%) rotate(2deg); opacity:1; }
    100%{ transform:translateX(-16%) rotate(0deg); opacity:.7; }
}

@keyframes winPrizeGlow{
    0%{ transform:translate(-50%, -50%) scale(.92); opacity:.72; }
    100%{ transform:translate(-50%, -50%) scale(1.08); opacity:1; }
}

@keyframes winPrizeFloat{
    0%{ transform:translateY(4px) scale(.98) rotate(-1deg); }
    100%{ transform:translateY(-7px) scale(1.04) rotate(1deg); }
}

@keyframes winConfettiFall{
    0%{
        opacity:0;
        transform:translate(0, -20px) rotate(0deg) scale(.9);
    }
    12%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:translate(var(--confetti-x), 108vh) rotate(var(--confetti-rotate)) scale(1);
    }
}

/* MOBILE */

@media (max-width: 768px){
    body{
        align-items:flex-start;
        overflow:hidden;
        padding-top:30px;
    }
}

/* TOP STATUS OVER SNAP LOGO */

.top-status{
    position:absolute;
    left:15px;
    top:56px;
    width:330px;
    min-height:70px;
    height:auto;
    z-index:60;

    --text-scale-x:1;

    display:none;
    justify-content:center;
    align-items:center;

    font-family:'Rubik Mono One', 'Nunito', Arial, sans-serif;
    font-size:30px;
    line-height:1;
    font-weight:400;
    text-align:center;
    white-space:nowrap;
    letter-spacing:0;

    background:none;
    border:none;
    box-shadow:none;
    pointer-events:none;

    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}

.top-status::before{
    display:none;
}

.top-status.show{
    display:flex;
    animation:neonAppear .45s cubic-bezier(.2,1.5,.35,1);
}

/* МИМО / ПРОМАХ / НЕ ТО / ПУСТО — красный */

.top-status.status-miss{
    font-size:28px;
    color:#ff1a12;
    -webkit-text-stroke:2px #320000;

    text-shadow:
        0 2px 0 #000,
        0 0 5px rgba(255,0,0,1),
        0 0 10px rgba(255,0,0,1),
        0 0 18px rgba(255,20,0,.95),
        0 0 30px rgba(255,20,0,.85),
        0 0 45px rgba(255,0,0,.65);

    filter:
        drop-shadow(0 0 8px rgba(255,0,0,1))
        drop-shadow(0 0 18px rgba(255,0,0,.9))
        brightness(1.12)
        contrast(1.15);
}

/* ПОЧТИ / РЯДОМ / МИЛЛИМЕТР — жёлто-оранжевый */

.top-status.status-near{
    --text-scale-x:.82;
    font-size:27px;
    color:#ffe600;
    -webkit-text-stroke:2px #4a1600;

    text-shadow:
        0 2px 0 #000,
        0 0 6px rgba(255,230,0,1),
        0 0 12px rgba(255,200,0,1),
        0 0 22px rgba(255,130,0,.95),
        0 0 34px rgba(255,90,0,.82),
        0 0 46px rgba(255,120,0,.58);

    filter:
        drop-shadow(0 0 9px rgba(255,190,0,1))
        drop-shadow(0 0 20px rgba(255,80,0,.85))
        brightness(1.12)
        contrast(1.12);
}

/* НАДРЫВ — зелёный */

.top-status.status-damage{
    font-size:30px;
    color:#a6ff00;
    -webkit-text-stroke:2px #123000;

    text-shadow:
        0 2px 0 #000,
        0 0 6px rgba(150,255,0,1),
        0 0 12px rgba(90,255,0,1),
        0 0 22px rgba(30,255,0,.95),
        0 0 34px rgba(0,255,80,.8),
        0 0 46px rgba(0,255,80,.55);

    filter:
        drop-shadow(0 0 9px rgba(120,255,0,1))
        drop-shadow(0 0 20px rgba(0,255,80,.85))
        brightness(1.13)
        contrast(1.12);
}

/* ПРИЗ! — золото */

.top-status.status-win{
    font-size:34px;
    color:#ffd84a;
    -webkit-text-stroke:2px #703000;

    text-shadow:
        0 2px 0 #000,
        0 0 7px rgba(255,220,0,1),
        0 0 14px rgba(255,190,0,1),
        0 0 26px rgba(255,150,0,1),
        0 0 42px rgba(255,100,0,.85),
        0 0 60px rgba(255,200,0,.6);

    filter:
        drop-shadow(0 0 11px rgba(255,220,0,1))
        drop-shadow(0 0 24px rgba(255,120,0,.9))
        brightness(1.16)
        contrast(1.14);
}

/* ПОПЫТКИ ЗАКОНЧИЛИСЬ — красный в 2 строки */

.top-status.status-end{
    font-size:26px;
    line-height:.95;
    white-space:pre-line;
    color:#ff1a12;
    -webkit-text-stroke:2px #320000;

    text-shadow:
        0 2px 0 #000,
        0 0 6px rgba(255,0,0,1),
        0 0 13px rgba(255,0,0,1),
        0 0 24px rgba(255,20,0,.95),
        0 0 38px rgba(255,20,0,.78),
        0 0 56px rgba(255,0,0,.58);

    filter:
        drop-shadow(0 0 10px rgba(255,0,0,1))
        drop-shadow(0 0 24px rgba(255,0,0,.9))
        brightness(1.14)
        contrast(1.15);
}

.status-text{
    display:none !important;
}

@keyframes neonAppear{
    0%{
        transform:scaleX(var(--text-scale-x)) scale(.5);
        opacity:0;
    }
    40%{
        transform:scaleX(var(--text-scale-x)) scale(1.12);
        opacity:1;
    }
    65%{
        transform:scaleX(var(--text-scale-x)) scale(.97);
        opacity:1;
    }
    100%{
        transform:scaleX(var(--text-scale-x)) scale(1);
        opacity:1;
    }
}

/* КОМП — свечение сильнее */

@media (min-width: 769px){
    .top-status.status-miss{
        text-shadow:
            0 2px 0 #000,
            0 0 7px rgba(255,0,0,1),
            0 0 15px rgba(255,0,0,1),
            0 0 28px rgba(255,20,0,.95),
            0 0 48px rgba(255,20,0,.85),
            0 0 70px rgba(255,0,0,.65);

        filter:
            drop-shadow(0 0 12px rgba(255,0,0,1))
            drop-shadow(0 0 28px rgba(255,0,0,.95))
            brightness(1.16)
            contrast(1.15);
    }

    .top-status.status-near{
        text-shadow:
            0 2px 0 #000,
            0 0 8px rgba(255,230,0,1),
            0 0 18px rgba(255,200,0,1),
            0 0 34px rgba(255,130,0,.95),
            0 0 56px rgba(255,90,0,.82),
            0 0 76px rgba(255,120,0,.58);

        filter:
            drop-shadow(0 0 13px rgba(255,190,0,1))
            drop-shadow(0 0 30px rgba(255,80,0,.85))
            brightness(1.16)
            contrast(1.12);
    }

    .top-status.status-damage{
        text-shadow:
            0 2px 0 #000,
            0 0 8px rgba(150,255,0,1),
            0 0 18px rgba(90,255,0,1),
            0 0 34px rgba(30,255,0,.95),
            0 0 56px rgba(0,255,80,.8),
            0 0 76px rgba(0,255,80,.55);

        filter:
            drop-shadow(0 0 13px rgba(120,255,0,1))
            drop-shadow(0 0 30px rgba(0,255,80,.85))
            brightness(1.16)
            contrast(1.12);
    }

    .top-status.status-win{
        text-shadow:
            0 2px 0 #000,
            0 0 9px rgba(255,220,0,1),
            0 0 20px rgba(255,190,0,1),
            0 0 38px rgba(255,150,0,1),
            0 0 60px rgba(255,100,0,.85),
            0 0 82px rgba(255,200,0,.6);

        filter:
            drop-shadow(0 0 15px rgba(255,220,0,1))
            drop-shadow(0 0 34px rgba(255,120,0,.9))
            brightness(1.18)
            contrast(1.14);
    }

    .top-status.status-end{
        text-shadow:
            0 2px 0 #000,
            0 0 8px rgba(255,0,0,1),
            0 0 18px rgba(255,0,0,1),
            0 0 34px rgba(255,20,0,.95),
            0 0 56px rgba(255,20,0,.78),
            0 0 80px rgba(255,0,0,.58);

        filter:
            drop-shadow(0 0 14px rgba(255,0,0,1))
            drop-shadow(0 0 34px rgba(255,0,0,.9))
            brightness(1.16)
            contrast(1.15);
    }
}

/* ТЕЛЕФОН — свечение меньше */

@media (max-width: 768px){
    .top-status{
        top:58px;
        min-height:62px;
        font-size:29px;
    }

    .top-status.status-miss{
        font-size:28px;

        text-shadow:
            0 2px 0 #000,
            0 0 4px rgba(255,0,0,1),
            0 0 8px rgba(255,0,0,.95),
            0 0 14px rgba(255,20,0,.85),
            0 0 22px rgba(255,20,0,.55);

        filter:
            drop-shadow(0 0 5px rgba(255,0,0,.85))
            drop-shadow(0 0 10px rgba(255,0,0,.55))
            brightness(1.08)
            contrast(1.12);
    }

    .top-status.status-near{
        font-size:26px;

        text-shadow:
            0 2px 0 #000,
            0 0 4px rgba(255,230,0,.95),
            0 0 9px rgba(255,180,0,.85),
            0 0 16px rgba(255,100,0,.65),
            0 0 24px rgba(255,120,0,.4);

        filter:
            drop-shadow(0 0 6px rgba(255,190,0,.75))
            drop-shadow(0 0 12px rgba(255,80,0,.45))
            brightness(1.08)
            contrast(1.1);
    }

    .top-status.status-damage{
        font-size:29px;

        text-shadow:
            0 2px 0 #000,
            0 0 4px rgba(150,255,0,.95),
            0 0 9px rgba(90,255,0,.85),
            0 0 16px rgba(0,255,80,.65),
            0 0 24px rgba(0,255,80,.4);

        filter:
            drop-shadow(0 0 6px rgba(120,255,0,.75))
            drop-shadow(0 0 12px rgba(0,255,80,.45))
            brightness(1.08)
            contrast(1.1);
    }

    .top-status.status-win{
        font-size:33px;

        text-shadow:
            0 2px 0 #000,
            0 0 5px rgba(255,220,0,.95),
            0 0 11px rgba(255,180,0,.85),
            0 0 20px rgba(255,100,0,.65),
            0 0 30px rgba(255,200,0,.4);

        filter:
            drop-shadow(0 0 7px rgba(255,220,0,.75))
            drop-shadow(0 0 14px rgba(255,120,0,.45))
            brightness(1.1)
            contrast(1.1);
    }

    .top-status.status-end{
        font-size:25px;
        line-height:.95;

        text-shadow:
            0 2px 0 #000,
            0 0 4px rgba(255,0,0,1),
            0 0 9px rgba(255,0,0,.95),
            0 0 16px rgba(255,20,0,.8),
            0 0 26px rgba(255,20,0,.55),
            0 0 36px rgba(255,0,0,.35);

        filter:
            drop-shadow(0 0 6px rgba(255,0,0,.8))
            drop-shadow(0 0 14px rgba(255,0,0,.5))
            brightness(1.08)
            contrast(1.12);
    }
}

/* WIN MOBILE */

@media (max-width: 768px){
    .win-card{
        width:305px;
        min-height:455px;
        padding:20px 16px 22px;
        border-radius:26px;
    }

    .win-title{
        font-size:29px;
        margin-bottom:12px;
    }

    .win-prize-wrap{
        width:176px;
        height:164px;
        margin-bottom:12px;
    }

    .win-prize-image{
        max-width:158px;
        max-height:160px;
    }

    .win-prize-glow{
        width:154px;
        height:154px;
    }

    .win-prize-name{
        font-size:17px;
        margin-bottom:16px;
    }

    .claim-button{
        width:225px;
        height:54px;
        font-size:16px;
    }

    .win-burst{
        width:380px;
        height:380px;
    }
}


/* SERVER SHOT TIMER */

.shot-timer{
    min-height:11px;
    font-family:'Nunito', Arial, sans-serif;
    font-size:9px;
    line-height:10px;
    font-weight:900;
    color:#9ff7ff;
    letter-spacing:.2px;
    text-shadow:
        0 1px 2px rgba(0,0,0,.95),
        0 0 7px rgba(0,220,255,.65);
    transition:color .15s ease, transform .15s ease, text-shadow .15s ease;
    pointer-events:none;
}

.shot-timer.danger{
    color:#ffdf54;
    transform:scale(1.08);
    text-shadow:
        0 1px 2px rgba(0,0,0,.95),
        0 0 7px rgba(255,210,0,.9),
        0 0 12px rgba(255,70,0,.55);
}

.shot-timer.expired{
    color:#ff3228;
    transform:scale(1.08);
    text-shadow:
        0 1px 2px rgba(0,0,0,.95),
        0 0 8px rgba(255,0,0,.95),
        0 0 15px rgba(255,0,0,.65);
}

/* AUTH — ЭТАП 5 */
.auth-overlay{
    position:fixed;
    inset:0;
    z-index:1000002;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    background:
        radial-gradient(circle at center, rgba(255,0,220,.16), rgba(0,0,0,.97) 58%),
        #02030a;
    backdrop-filter:blur(8px);
}

.auth-overlay.hidden,
.user-bar.hidden,
.auth-form.hidden{
    display:none !important;
}

.auth-card{
    width:min(360px, 94vw);
    padding:24px 22px 22px;
    border-radius:26px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 35%),
        linear-gradient(180deg, rgba(43,22,63,.98), rgba(7,3,15,.99));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:
        0 0 28px rgba(255,0,220,.34),
        0 0 70px rgba(0,210,255,.16),
        inset 0 0 24px rgba(255,255,255,.04);
}

.auth-logo{
    display:block;
    width:190px;
    max-width:80%;
    margin:0 auto 18px;
    filter:drop-shadow(0 0 12px rgba(255,50,220,.32));
}

.auth-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:18px;
}

.auth-tab{
    height:42px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.72);
    font:900 13px 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.auth-tab.active{
    color:#fff;
    background:linear-gradient(180deg, #ff4bd7, #a70082);
    box-shadow:0 0 16px rgba(255,0,200,.55);
}

.auth-form{
    display:flex;
    flex-direction:column;
}

.auth-label{
    margin:8px 3px 6px;
    color:#fff4b0;
    font:900 13px 'Nunito', Arial, sans-serif;
}

.auth-input{
    width:100%;
    height:48px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:15px;
    outline:none;
    background:rgba(0,0,0,.36);
    color:#fff;
    font:900 16px 'Nunito', Arial, sans-serif;
    box-shadow:inset 0 0 12px rgba(0,0,0,.28);
}

.auth-input:focus{
    border-color:#ff4bd7;
    box-shadow:0 0 12px rgba(255,0,200,.35);
}

.auth-check{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-top:12px;
    color:#fff;
    font:900 13px/1.25 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.auth-check input{
    width:18px;
    height:18px;
    flex:0 0 18px;
    accent-color:#ec00b8;
}

.auth-main-button{
    width:100%;
    height:52px;
    margin-top:20px;
    border:0;
    border-radius:27px;
    background:linear-gradient(to bottom, #ff55dc, #d800a5 48%, #930070);
    color:#fff;
    font:900 17px 'Nunito', Arial, sans-serif;
    box-shadow:0 5px 0 #52003c, 0 0 20px rgba(255,0,200,.55);
    cursor:pointer;
}

.auth-main-button:disabled{
    opacity:.65;
    cursor:wait;
}

.auth-message{
    min-height:20px;
    margin-top:16px;
    text-align:center;
    color:#fff;
    font:900 13px/1.3 'Nunito', Arial, sans-serif;
}

.auth-message.error{
    color:#ff7777;
}

.auth-message.success{
    color:#8cff9d;
}

.auth-test-note{
    margin-top:14px;
    color:rgba(255,255,255,.58);
    text-align:center;
    font:900 11px/1.3 'Nunito', Arial, sans-serif;
}

.user-bar{
    position:fixed;
    top:10px;
    left:50%;
    z-index:1000000;
    transform:translate3d(-50%, 0, 0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    display:flex;
    align-items:center;
    gap:12px;
    min-width:310px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;
    background:rgba(8,3,15,.88);
    color:#fff;
    box-shadow:0 0 18px rgba(255,0,200,.2);
    backdrop-filter:blur(8px);
    font:900 12px 'Nunito', Arial, sans-serif;
}

.user-bar span:first-child{
    flex:1;
}

.user-bar button{
    height:28px;
    padding:0 12px;
    border:0;
    border-radius:14px;
    background:#5a174d;
    color:#fff;
    font:900 11px 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

@media (max-width:768px){
    .auth-overlay{
        align-items:flex-start;
        padding-top:24px;
        overflow:auto;
    }

    .auth-card{
        padding:20px 18px;
    }

    .user-bar{
        top:4px;
        min-width:calc(100vw - 16px);
        max-width:calc(100vw - 16px);
        gap:8px;
        font-size:10px;
    }
}


/* STEP 6: MY PRIZES */

.win-share-text{
    position:relative;
    z-index:2;
    margin:-4px auto 15px;
    color:rgba(255,255,255,.82);
    font:900 12px/1.25 'Nunito', Arial, sans-serif;
    text-shadow:0 2px 0 rgba(0,0,0,.7);
}

.user-bar .my-prizes-button{
    display:flex;
    align-items:center;
    gap:5px;
    background:linear-gradient(180deg, #c719a6, #721060);
    box-shadow:0 0 10px rgba(255,0,210,.35);
}

.user-bar .my-prizes-button b{
    display:inline-flex;
    min-width:18px;
    height:18px;
    padding:0 5px;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#ffe45c;
    color:#351000;
    font-size:10px;
}

.prizes-overlay{
    position:fixed;
    inset:0;
    z-index:1000002;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:18px;
    background:
        radial-gradient(circle at 50% 12%, rgba(255,0,210,.2), transparent 38%),
        rgba(0,0,0,.9);
    backdrop-filter:blur(8px);
}

.prizes-overlay.hidden{
    display:none;
}

.prizes-card{
    position:relative;
    width:min(620px, 100%);
    max-height:min(760px, calc(100vh - 36px));
    display:flex;
    flex-direction:column;
    padding:22px 18px 18px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:26px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,220,80,.1), transparent 28%),
        linear-gradient(180deg, rgba(39,15,55,.98), rgba(7,3,14,.99));
    box-shadow:
        0 0 32px rgba(255,0,210,.35),
        0 0 70px rgba(0,220,255,.12),
        inset 0 0 24px rgba(255,255,255,.04);
    overflow:hidden;
}

.prizes-close{
    position:absolute;
    right:13px;
    top:12px;
    z-index:3;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:#fff;
    font:900 27px/34px Arial, sans-serif;
    cursor:pointer;
}

.prizes-logo{
    width:145px;
    height:auto;
    margin:0 auto 5px;
    filter:drop-shadow(0 0 10px rgba(255,0,210,.4));
}

.prizes-title{
    color:#ffe45c;
    text-align:center;
    font:400 25px/1 'Rubik Mono One', 'Nunito', Arial, sans-serif;
    text-shadow:0 0 12px rgba(255,180,0,.75);
}

.prizes-subtitle{
    max-width:440px;
    margin:10px auto 4px;
    color:rgba(255,255,255,.72);
    text-align:center;
    font:900 12px/1.35 'Nunito', Arial, sans-serif;
}

.prizes-message{
    min-height:22px;
    margin-top:8px;
    color:rgba(255,255,255,.8);
    text-align:center;
    font:900 12px/1.3 'Nunito', Arial, sans-serif;
}

.prizes-message.error{ color:#ff7a7a; }
.prizes-message.success{ color:#8dffa2; }

.prizes-list{
    min-height:150px;
    margin-top:6px;
    padding:2px 4px 8px;
    overflow-y:auto;
    overscroll-behavior:contain;
}

.prizes-empty{
    min-height:210px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#fff;
    text-align:center;
    font:900 16px/1.3 'Nunito', Arial, sans-serif;
}

.prizes-empty-icon{ font-size:45px; }
.prizes-empty small{ color:rgba(255,255,255,.55); font-size:11px; }

.prize-item{
    display:grid;
    grid-template-columns:112px 1fr;
    gap:14px;
    margin:10px 0;
    padding:14px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    background:rgba(255,255,255,.055);
    box-shadow:inset 0 0 18px rgba(255,255,255,.025);
}

.prize-item-image-wrap{
    min-height:128px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:radial-gradient(circle, rgba(255,230,100,.25), rgba(255,0,210,.08) 55%, transparent 72%);
}

.prize-item-image{
    display:block;
    max-width:96px;
    max-height:122px;
    object-fit:contain;
    filter:drop-shadow(0 8px 8px rgba(0,0,0,.65));
}

.prize-item-content{ min-width:0; }

.prize-item-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
}

.prize-item-title{
    color:#fff3a3;
    font:900 18px/1.15 'Nunito', Arial, sans-serif;
}

.prize-status{
    flex:none;
    padding:5px 8px;
    border-radius:12px;
    color:#fff;
    background:#6b235c;
    font:900 9px/1 'Nunito', Arial, sans-serif;
    white-space:nowrap;
}

.prize-status.claimed,
.prize-status.approved{ background:#9a6200; }
.prize-status.delivered{ background:#14853b; }
.prize-status.rejected,
.prize-status.cancelled{ background:#8b1f25; }

.prize-item-date{
    margin-top:7px;
    color:rgba(255,255,255,.52);
    font:900 10px/1.2 'Nunito', Arial, sans-serif;
}

.prize-code-label{
    margin-top:15px;
    color:#ffcf51;
    font:900 9px/1.2 'Nunito', Arial, sans-serif;
}

.prize-code-row{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:5px;
}

.prize-code{
    flex:1;
    min-width:0;
    padding:10px 9px;
    border:1px dashed rgba(255,225,100,.55);
    border-radius:10px;
    background:rgba(0,0,0,.32);
    color:#fff3a3;
    font:900 13px/1 'Courier New', monospace;
    letter-spacing:.3px;
    text-align:center;
    overflow-wrap:anywhere;
}

.copy-prize-code,
.prize-claim-action{
    border:0;
    border-radius:12px;
    color:#fff;
    font:900 10px 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.copy-prize-code{
    height:36px;
    padding:0 9px;
    background:#49305e;
}

.prize-claim-action{
    width:100%;
    height:40px;
    margin-top:10px;
    background:linear-gradient(180deg, #ffdb5d, #e77d00);
    color:#2a1000;
    box-shadow:0 3px 0 #753600, 0 0 12px rgba(255,170,0,.35);
}

.prize-claim-action:disabled{ opacity:.65; cursor:wait; }

.prize-state-note{
    margin-top:11px;
    color:#8dffa2;
    font:900 12px/1.25 'Nunito', Arial, sans-serif;
}

@media (max-width:768px){
    .user-bar{
        flex-wrap:wrap;
        justify-content:center;
        padding:6px 8px;
    }

    .user-bar span:first-child{
        flex:1 1 95px;
    }

    .user-bar button{
        padding:0 8px;
        font-size:9px;
    }

    .prizes-overlay{
        padding:8px;
        align-items:flex-start;
    }

    .prizes-card{
        max-height:calc(100vh - 16px);
        padding:18px 10px 12px;
        border-radius:20px;
    }

    .prizes-logo{ width:125px; }
    .prizes-title{ font-size:21px; }

    .prize-item{
        grid-template-columns:78px 1fr;
        gap:9px;
        padding:10px;
        border-radius:16px;
    }

    .prize-item-image-wrap{ min-height:105px; }
    .prize-item-image{ max-width:70px; max-height:98px; }
    .prize-item-title{ font-size:15px; }
    .prize-status{ font-size:8px; padding:4px 6px; }
    .prize-code-row{ flex-direction:column; align-items:stretch; }
    .prize-code{ font-size:12px; }
    .copy-prize-code{ width:100%; }
}

/* STEP 7: CHATNORRIS PACKAGES + TEST PAYMENTS */

.user-bar .packages-button{
    background:linear-gradient(180deg, #17a6db, #075b91);
    box-shadow:0 0 10px rgba(0,210,255,.35);
}

.packages-overlay{
    position:fixed;
    inset:0;
    z-index:1000003;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:18px;
    background:
        radial-gradient(circle at 50% 10%, rgba(0,210,255,.18), transparent 34%),
        radial-gradient(circle at 50% 22%, rgba(255,0,210,.16), transparent 48%),
        rgba(0,0,0,.92);
    backdrop-filter:blur(9px);
}

.packages-overlay.hidden{
    display:none;
}

.packages-card{
    position:relative;
    width:min(920px, 96vw);
    max-height:92vh;
    overflow:auto;
    padding:24px 22px 22px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:28px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0,220,255,.1), transparent 34%),
        linear-gradient(180deg, rgba(35,16,55,.99), rgba(6,3,13,.995));
    box-shadow:
        0 0 30px rgba(0,210,255,.22),
        0 0 60px rgba(255,0,210,.18),
        inset 0 0 30px rgba(255,255,255,.035);
}

.packages-close{
    position:absolute;
    right:14px;
    top:12px;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.09);
    color:#fff;
    font:900 24px/1 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.packages-logo{
    display:block;
    width:150px;
    max-width:45%;
    margin:0 auto 7px;
    filter:drop-shadow(0 0 12px rgba(255,0,210,.35));
}

.packages-title{
    color:#ffe25c;
    text-align:center;
    font:900 28px/1.1 'Nunito', Arial, sans-serif;
    text-shadow:0 0 12px rgba(255,210,0,.42);
}

.packages-subtitle{
    max-width:620px;
    margin:9px auto 10px;
    color:rgba(255,255,255,.87);
    text-align:center;
    font:900 14px/1.35 'Nunito', Arial, sans-serif;
}

.packages-test-warning{
    width:max-content;
    max-width:100%;
    margin:0 auto 14px;
    padding:6px 11px;
    border:1px solid rgba(255,210,70,.3);
    border-radius:14px;
    background:rgba(255,190,0,.09);
    color:#ffe68a;
    text-align:center;
    font:900 11px/1.2 'Nunito', Arial, sans-serif;
}

.packages-message{
    min-height:20px;
    margin-bottom:6px;
    color:#fff;
    text-align:center;
    font:900 13px/1.3 'Nunito', Arial, sans-serif;
}

.packages-message.error{ color:#ff7e7e; }
.packages-message.success{ color:#8dffa2; }

.packages-list{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
    margin-top:8px;
}

.package-item{
    position:relative;
    min-height:275px;
    padding:20px 16px 16px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:22px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.07), transparent 42%),
        linear-gradient(180deg, rgba(35,22,54,.98), rgba(11,6,20,.99));
    box-shadow:inset 0 0 20px rgba(255,255,255,.025);
    text-align:center;
}

.package-item.featured{
    border-color:rgba(255,224,70,.45);
    box-shadow:
        0 0 22px rgba(255,190,0,.17),
        inset 0 0 22px rgba(255,255,255,.03);
    transform:translateY(-5px);
}

.package-badge{
    position:absolute;
    left:50%;
    top:-11px;
    transform:translateX(-50%);
    padding:5px 11px;
    border-radius:14px;
    background:linear-gradient(180deg, #ffe96f, #ffad00);
    color:#351500;
    box-shadow:0 0 14px rgba(255,200,0,.5);
    font:900 9px/1 'Nunito', Arial, sans-serif;
}

.package-code{
    margin-top:4px;
    color:#59e8ff;
    font:900 15px/1 'Nunito', Arial, sans-serif;
    letter-spacing:.7px;
}

.package-title{
    margin-top:8px;
    color:#fff;
    font:900 18px/1.2 'Nunito', Arial, sans-serif;
}

.package-price{
    margin:15px 0 12px;
    color:#ffe35c;
    font:900 34px/1 'Nunito', Arial, sans-serif;
    text-shadow:0 0 14px rgba(255,210,0,.35);
}

.package-benefits{
    display:grid;
    gap:8px;
    min-height:64px;
    color:rgba(255,255,255,.85);
    font:900 13px/1.25 'Nunito', Arial, sans-serif;
}

.package-benefits b{
    color:#8ff5ff;
}

.package-buy-button{
    width:100%;
    height:46px;
    margin-top:17px;
    border:0;
    border-radius:24px;
    background:linear-gradient(180deg, #ff3bd1, #aa087f);
    color:#fff;
    box-shadow:0 4px 0 #5b0043, 0 0 15px rgba(255,0,200,.35);
    font:900 13px 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.package-buy-button:disabled{
    opacity:.65;
    cursor:wait;
}

.packages-empty,
.payments-empty{
    grid-column:1 / -1;
    padding:20px;
    color:rgba(255,255,255,.62);
    text-align:center;
    font:900 13px/1.3 'Nunito', Arial, sans-serif;
}

.payments-history-title{
    margin:22px 0 8px;
    color:#fff0a0;
    font:900 13px/1 'Nunito', Arial, sans-serif;
}

.payments-history{
    display:grid;
    gap:7px;
}

.payment-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
    background:rgba(255,255,255,.035);
}

.payment-name{
    color:#fff;
    font:900 13px/1.2 'Nunito', Arial, sans-serif;
}

.payment-meta{
    margin-top:3px;
    color:rgba(255,255,255,.55);
    font:900 10px/1.25 'Nunito', Arial, sans-serif;
}

.payment-side{
    display:flex;
    align-items:flex-end;
    flex-direction:column;
    gap:3px;
    color:#ffe45d;
    white-space:nowrap;
    font:900 12px/1 'Nunito', Arial, sans-serif;
}

.payment-status{
    padding:3px 7px;
    border-radius:9px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:8px;
}

.payment-status.paid{ background:rgba(30,210,80,.2); color:#9affae; }
.payment-status.pending{ background:rgba(255,190,0,.17); color:#ffe27b; }
.payment-status.failed,
.payment-status.cancelled{ background:rgba(255,40,40,.16); color:#ff9a9a; }

@media (max-width:768px){
    .packages-overlay{
        align-items:flex-start;
        padding:8px;
    }

    .packages-card{
        max-height:calc(100vh - 16px);
        padding:18px 10px 14px;
        border-radius:20px;
    }

    .packages-logo{ width:120px; }
    .packages-title{ font-size:21px; }
    .packages-subtitle{ font-size:12px; }

    .packages-list{
        grid-template-columns:1fr;
        gap:12px;
    }

    .package-item,
    .package-item.featured{
        min-height:0;
        padding:16px 14px 14px;
        transform:none;
    }

    .package-price{ font-size:29px; margin:10px 0; }
    .package-benefits{ min-height:0; }

    .payment-row{
        align-items:flex-start;
    }
}

/* PAYMENT HOLD — сохранение прогресса на 20 минут */

.hold-overlay{
    position:fixed;
    inset:0;
    z-index:1000002;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:
        radial-gradient(circle at 50% 24%, rgba(255,150,0,.16), transparent 34%),
        rgba(0,0,0,.91);
    backdrop-filter:blur(7px);
}

.hold-overlay.hidden{
    display:none;
}

.hold-card{
    position:relative;
    width:min(360px, 100%);
    padding:27px 20px 22px;
    border:1px solid rgba(255,205,80,.25);
    border-radius:26px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,190,40,.13), transparent 34%),
        linear-gradient(180deg, rgba(42,18,55,.98), rgba(8,3,15,.99));
    box-shadow:
        0 0 30px rgba(255,170,0,.25),
        0 0 65px rgba(255,0,190,.22),
        inset 0 0 24px rgba(255,255,255,.04);
    text-align:center;
    animation:holdPop .38s cubic-bezier(.2,1.35,.35,1);
}

.hold-icon{
    font-size:42px;
    line-height:1;
    filter:drop-shadow(0 0 13px rgba(255,200,50,.8));
    margin-bottom:10px;
}

.hold-title{
    color:#ffde59;
    font:400 27px/.98 'Rubik Mono One', 'Nunito', Arial, sans-serif;
    -webkit-text-stroke:1px #6b2900;
    text-shadow:
        0 2px 0 #000,
        0 0 10px rgba(255,220,0,.9),
        0 0 22px rgba(255,120,0,.55);
    margin-bottom:17px;
}

.hold-text{
    color:#fff;
    font:900 14px/1.45 'Nunito', Arial, sans-serif;
    text-shadow:0 2px 0 rgba(0,0,0,.7);
    opacity:.95;
}

.hold-countdown{
    margin:18px 0 8px;
    padding:10px 12px;
    border:1px solid rgba(255,220,90,.22);
    border-radius:15px;
    background:rgba(255,190,0,.08);
    color:#fff2a7;
    font:900 14px/1 'Nunito', Arial, sans-serif;
    box-shadow:inset 0 0 14px rgba(255,190,0,.06);
}

.hold-countdown.danger{
    color:#ff8d82;
    border-color:rgba(255,50,40,.3);
    background:rgba(255,30,20,.09);
    box-shadow:0 0 15px rgba(255,30,20,.14);
}

.hold-message{
    min-height:18px;
    margin-bottom:5px;
    color:#ff9b90;
    font:900 12px/1.25 'Nunito', Arial, sans-serif;
}

.hold-package-button,
.hold-finish-button{
    width:100%;
    border:0;
    font-family:'Nunito', Arial, sans-serif;
    font-weight:900;
    cursor:pointer;
}

.hold-package-button{
    height:54px;
    margin-top:6px;
    border-radius:29px;
    background:linear-gradient(180deg, #ff4bd7, #aa087f);
    color:#fff;
    font-size:16px;
    box-shadow:
        0 5px 0 #5a003f,
        0 0 18px rgba(255,0,200,.58);
}

.hold-package-button:active{
    transform:translateY(3px);
    box-shadow:0 2px 0 #5a003f, 0 0 15px rgba(255,0,200,.55);
}

.hold-finish-button{
    height:42px;
    margin-top:13px;
    border-radius:22px;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.75);
    font-size:13px;
    border:1px solid rgba(255,255,255,.08);
}

.hold-package-button:disabled,
.hold-finish-button:disabled{
    opacity:.55;
    cursor:wait;
}

@keyframes holdPop{
    0%{ transform:scale(.7) translateY(20px); opacity:0; }
    100%{ transform:scale(1) translateY(0); opacity:1; }
}

@media (max-width:768px){
    .hold-overlay{
        align-items:flex-start;
        padding-top:46px;
    }

    .hold-card{
        width:320px;
        padding:24px 17px 20px;
        border-radius:24px;
    }

    .hold-title{ font-size:24px; }
    .hold-text{ font-size:13px; }
}

/* STEP 9: GAME HISTORY + REAL ACTIVITY FEED */

.user-bar .activity-button{
    background:linear-gradient(180deg, #147fd1, #0d3f86);
    box-shadow:0 0 10px rgba(0,170,255,.32);
}

.activity-overlay{
    position:fixed;
    inset:0;
    z-index:1000003;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:18px;
    background:
        radial-gradient(circle at 50% 10%, rgba(0,190,255,.18), transparent 38%),
        radial-gradient(circle at 50% 80%, rgba(255,0,210,.12), transparent 42%),
        rgba(0,0,0,.91);
    backdrop-filter:blur(8px);
}

.activity-overlay.hidden{
    display:none;
}

.activity-card{
    position:relative;
    width:min(670px, 100%);
    max-height:min(780px, calc(100vh - 36px));
    display:flex;
    flex-direction:column;
    padding:20px 18px 18px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:26px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0,205,255,.12), transparent 30%),
        linear-gradient(180deg, rgba(23,17,49,.98), rgba(5,4,14,.99));
    box-shadow:
        0 0 34px rgba(0,190,255,.28),
        0 0 68px rgba(255,0,210,.17),
        inset 0 0 24px rgba(255,255,255,.04);
    overflow:hidden;
}

.activity-close{
    position:absolute;
    right:13px;
    top:12px;
    z-index:3;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:#fff;
    font:900 27px/34px Arial, sans-serif;
    cursor:pointer;
}

.activity-logo{
    width:140px;
    height:auto;
    margin:0 auto 4px;
    filter:drop-shadow(0 0 10px rgba(0,210,255,.35));
}

.activity-title{
    color:#8eeeff;
    text-align:center;
    font:400 24px/1 'Rubik Mono One', 'Nunito', Arial, sans-serif;
    text-shadow:0 0 12px rgba(0,190,255,.72);
}

.activity-tabs{
    width:min(420px, 100%);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin:16px auto 3px;
    padding:5px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:19px;
    background:rgba(0,0,0,.28);
}

.activity-tab{
    height:38px;
    border:0;
    border-radius:15px;
    background:transparent;
    color:rgba(255,255,255,.62);
    font:900 12px/1 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.activity-tab.active{
    color:#fff;
    background:linear-gradient(180deg, #1c9bdc, #3254b6);
    box-shadow:0 0 14px rgba(0,180,255,.35);
}

.activity-message{
    min-height:19px;
    margin:5px 0 2px;
    color:rgba(255,255,255,.76);
    text-align:center;
    font:900 12px/1.25 'Nunito', Arial, sans-serif;
}

.activity-message.error{ color:#ff8484; }
.activity-message.success{ color:#8dffa2; }

.activity-panel{
    min-height:0;
    display:flex;
    flex:1;
    flex-direction:column;
}

.activity-panel.hidden{
    display:none;
}

.feed-note{
    margin:4px 6px 7px;
    padding:8px 11px;
    border:1px solid rgba(90,255,150,.15);
    border-radius:12px;
    color:rgba(190,255,213,.8);
    background:rgba(20,130,70,.08);
    text-align:center;
    font:900 10px/1.3 'Nunito', Arial, sans-serif;
}

.activity-list{
    min-height:180px;
    padding:3px 4px 10px;
    overflow-y:auto;
    overscroll-behavior:contain;
}

.activity-loading,
.activity-empty{
    min-height:230px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#fff;
    text-align:center;
    font:900 15px/1.3 'Nunito', Arial, sans-serif;
}

.activity-loading{
    color:rgba(255,255,255,.68);
}

.activity-empty-icon{
    font-size:44px;
}

.activity-empty small{
    max-width:350px;
    color:rgba(255,255,255,.52);
    font-size:11px;
}

.history-item,
.feed-item{
    display:flex;
    gap:12px;
    margin:9px 0;
    padding:13px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:17px;
    background:rgba(255,255,255,.045);
    box-shadow:inset 0 0 16px rgba(255,255,255,.018);
}

.history-item.win,
.feed-item.win{
    border-color:rgba(255,211,70,.28);
    background:linear-gradient(100deg, rgba(255,178,0,.13), rgba(255,0,200,.045));
    box-shadow:inset 0 0 20px rgba(255,190,0,.04), 0 0 12px rgba(255,190,0,.07);
}

.history-item.damage,
.history-item.damage-strong{
    border-color:rgba(80,255,80,.15);
}

.history-item.near,
.feed-item.near{
    border-color:rgba(255,190,0,.16);
}

.feed-item.activity{
    border-color:rgba(0,190,255,.16);
}

.history-icon,
.feed-icon{
    flex:none;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:rgba(0,0,0,.28);
    font-size:23px;
}

.history-content,
.feed-content{
    min-width:0;
    flex:1;
}

.history-top{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
}

.history-top strong{
    color:#fff;
    font:900 14px/1.15 'Nunito', Arial, sans-serif;
}

.history-item.win .history-top strong{
    color:#ffe275;
}

.history-top time,
.feed-content time{
    flex:none;
    color:rgba(255,255,255,.42);
    font:900 9px/1.2 'Nunito', Arial, sans-serif;
}

.history-meta{
    margin-top:5px;
    color:rgba(255,255,255,.64);
    font:900 11px/1.3 'Nunito', Arial, sans-serif;
}

.history-prize{
    margin-top:7px;
    color:#ffe17a;
    font:900 12px/1.2 'Nunito', Arial, sans-serif;
}

.history-check{
    display:inline-flex;
    margin-top:8px;
    padding:4px 7px;
    border-radius:9px;
    background:rgba(0,185,90,.1);
    color:#7ff3a8;
    font:900 9px/1 'Nunito', Arial, sans-serif;
}

.history-check.suspicious{
    color:#ff9b90;
    background:rgba(255,50,40,.1);
}

.feed-text{
    color:#fff;
    font:900 13px/1.3 'Nunito', Arial, sans-serif;
}

.feed-content time{
    display:block;
    margin-top:6px;
}

@media (max-width:768px){
    .activity-overlay{
        align-items:flex-start;
        padding:7px;
    }

    .activity-card{
        max-height:calc(100vh - 14px);
        padding:17px 9px 10px;
        border-radius:20px;
    }

    .activity-logo{ width:120px; }
    .activity-title{ font-size:20px; }

    .activity-tabs{
        margin-top:12px;
    }

    .history-item,
    .feed-item{
        gap:8px;
        padding:10px 9px;
        border-radius:14px;
    }

    .history-icon,
    .feed-icon{
        width:35px;
        height:35px;
        border-radius:11px;
        font-size:19px;
    }

    .history-top{
        display:block;
    }

    .history-top time{
        display:block;
        margin-top:4px;
    }

    .history-top strong{ font-size:12px; }
    .history-meta{ font-size:10px; }
    .feed-text{ font-size:12px; }
}

/* STEP 10: REFERRAL LINKS + ACTIVE FRIENDS */

.auth-optional{
    color:rgba(255,255,255,.45);
    font-size:10px;
}

.auth-referral-note{
    margin:-5px 0 12px;
    padding:8px 10px;
    border-radius:12px;
    background:rgba(40,220,130,.1);
    color:#8dffb4;
    text-align:center;
    font:900 11px/1.25 'Nunito', Arial, sans-serif;
}

.user-bar .referrals-button{
    background:linear-gradient(180deg, #21b778, #087145);
    box-shadow:0 0 10px rgba(0,255,145,.28);
}

.referrals-overlay{
    position:fixed;
    inset:0;
    z-index:1000004;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:18px;
    background:
        radial-gradient(circle at 50% 8%, rgba(0,255,150,.16), transparent 35%),
        radial-gradient(circle at 50% 85%, rgba(255,0,210,.12), transparent 42%),
        rgba(0,0,0,.92);
    backdrop-filter:blur(9px);
}

.referrals-overlay.hidden{
    display:none;
}

.referrals-card{
    position:relative;
    width:min(680px, 100%);
    max-height:min(820px, calc(100vh - 36px));
    overflow:auto;
    padding:22px 18px 18px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:28px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0,230,140,.14), transparent 34%),
        linear-gradient(180deg, rgba(27,13,42,.98), rgba(7,3,13,.99));
    box-shadow:
        0 0 34px rgba(0,255,150,.22),
        0 0 62px rgba(255,0,210,.14),
        inset 0 0 26px rgba(255,255,255,.04);
}

.referrals-close{
    position:absolute;
    right:13px;
    top:12px;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.09);
    color:#fff;
    font:900 23px/1 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.referrals-logo{
    display:block;
    width:145px;
    margin:0 auto 5px;
}

.referrals-title{
    color:#8dffb4;
    text-align:center;
    font:900 25px/1.1 'Nunito', Arial, sans-serif;
    text-shadow:0 0 14px rgba(0,255,145,.5);
}

.referrals-subtitle{
    max-width:560px;
    margin:9px auto 0;
    color:rgba(255,255,255,.77);
    text-align:center;
    font:900 13px/1.4 'Nunito', Arial, sans-serif;
}

.referrals-reward{
    width:max-content;
    max-width:100%;
    margin:13px auto 0;
    padding:9px 13px;
    border-radius:15px;
    background:rgba(0,210,120,.11);
    color:#fff;
    text-align:center;
    font:900 12px/1.25 'Nunito', Arial, sans-serif;
}

.referrals-reward b{
    color:#8dffb4;
}

.referrals-message{
    min-height:19px;
    margin-top:9px;
    color:#fff;
    text-align:center;
    font:900 12px/1.25 'Nunito', Arial, sans-serif;
}

.referrals-message.error{ color:#ff8585; }
.referrals-message.success{ color:#8dffb4; }

.referral-link-box{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    margin-top:8px;
    padding:12px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:17px;
    background:rgba(255,255,255,.045);
}

.referral-link-label{
    grid-column:1 / -1;
    color:rgba(255,255,255,.55);
    font:900 10px/1 'Nunito', Arial, sans-serif;
}

.referral-link-input{
    min-width:0;
    height:40px;
    padding:0 11px;
    border:1px solid rgba(0,255,145,.22);
    border-radius:12px;
    outline:none;
    background:rgba(0,0,0,.35);
    color:#fff;
    font:900 12px 'Nunito', Arial, sans-serif;
}

.copy-referral-button{
    height:40px;
    padding:0 14px;
    border:0;
    border-radius:12px;
    background:linear-gradient(180deg, #37e99b, #0b945c);
    color:#041b10;
    font:900 11px 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.referral-code-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:10px;
    color:rgba(255,255,255,.72);
    font:900 11px/1.2 'Nunito', Arial, sans-serif;
}

.referral-code-row b{
    color:#8dffb4;
}

.referral-stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
    margin-top:13px;
}

.referral-stats > div{
    min-height:66px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:15px;
    background:rgba(255,255,255,.04);
}

.referral-stats b{
    color:#fff;
    font:900 23px/1 'Nunito', Arial, sans-serif;
}

.referral-stats span{
    margin-top:5px;
    color:rgba(255,255,255,.53);
    text-align:center;
    font:900 9px/1.1 'Nunito', Arial, sans-serif;
}

.referral-list-title{
    margin:18px 2px 8px;
    color:#fff;
    font:900 13px/1 'Nunito', Arial, sans-serif;
}

.referrals-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.referral-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:15px;
    background:rgba(255,255,255,.035);
}

.referral-item.active{
    border-color:rgba(0,255,145,.18);
    background:rgba(0,210,120,.06);
}

.referral-item-icon{
    width:37px;
    height:37px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(0,0,0,.28);
    font-size:19px;
}

.referral-item-content{
    min-width:0;
    flex:1;
}

.referral-item-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}

.referral-item-top strong{
    color:#fff;
    font:900 13px/1.15 'Nunito', Arial, sans-serif;
}

.referral-item-top span{
    flex:none;
    padding:4px 7px;
    border-radius:9px;
    background:rgba(255,190,0,.1);
    color:#ffd76a;
    font:900 8px/1 'Nunito', Arial, sans-serif;
}

.referral-item.active .referral-item-top span{
    background:rgba(0,220,120,.11);
    color:#8dffb4;
}

.referral-item-meta{
    margin-top:5px;
    color:rgba(255,255,255,.5);
    font:900 10px/1.25 'Nunito', Arial, sans-serif;
}

.referrals-empty{
    padding:25px 12px;
    border:1px dashed rgba(255,255,255,.12);
    border-radius:16px;
    color:rgba(255,255,255,.75);
    text-align:center;
    font:900 13px/1.3 'Nunito', Arial, sans-serif;
}

.referrals-empty small{
    display:block;
    margin-top:5px;
    color:rgba(255,255,255,.45);
}

.referrals-empty-icon{
    margin-bottom:7px;
    font-size:30px;
}

@media (max-width:768px){
    .referrals-overlay{
        align-items:flex-start;
        padding:7px;
    }

    .referrals-card{
        max-height:calc(100vh - 14px);
        padding:18px 9px 12px;
        border-radius:20px;
    }

    .referrals-logo{ width:120px; }
    .referrals-title{ font-size:21px; }
    .referrals-subtitle{ font-size:11px; }

    .referral-link-box{
        grid-template-columns:1fr;
    }

    .copy-referral-button{
        width:100%;
    }

    .referral-code-row{
        flex-direction:column;
        gap:5px;
    }

    .referral-stats{
        grid-template-columns:repeat(2, 1fr);
    }

    .referral-item-top{
        display:block;
    }

    .referral-item-top span{
        display:inline-block;
        margin-top:5px;
    }
}

/* DAILY REWARD — ЭТАП 11 */

.user-bar .daily-reward-button{
    border-color:rgba(255,210,70,.3);
    background:linear-gradient(180deg, rgba(255,211,72,.18), rgba(178,92,0,.16));
    color:#ffe48b;
}

.user-bar .daily-reward-button b{
    display:inline-flex;
    min-width:17px;
    height:17px;
    margin-left:4px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ffbd25;
    color:#2b1200;
    font:900 10px/17px 'Nunito', Arial, sans-serif;
    box-shadow:0 0 10px rgba(255,190,30,.65);
}

.user-bar .daily-reward-button.available{
    animation:dailyButtonPulse 1.35s ease-in-out infinite;
}

.user-bar .daily-reward-button.active{
    border-color:rgba(80,255,145,.28);
    color:#9dffb9;
}

.user-bar .daily-reward-button.active b{
    background:#55e987;
    box-shadow:0 0 10px rgba(60,255,135,.55);
}

.user-bar .daily-reward-button.waiting{
    opacity:.72;
}

.daily-reward-overlay{
    position:fixed;
    inset:0;
    z-index:1000005;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
    background:rgba(0,0,0,.88);
    backdrop-filter:blur(8px);
}

.daily-reward-overlay.hidden{
    display:none;
}

.daily-reward-card{
    position:relative;
    width:min(390px, 100%);
    padding:26px 20px 22px;
    overflow:hidden;
    border:1px solid rgba(255,218,95,.23);
    border-radius:27px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,210,50,.19), transparent 38%),
        linear-gradient(180deg, rgba(48,25,62,.98), rgba(8,4,17,.99));
    box-shadow:
        0 0 30px rgba(255,187,35,.25),
        0 0 70px rgba(255,0,210,.17),
        inset 0 0 28px rgba(255,255,255,.045);
    text-align:center;
    animation:dailyCardPop .4s cubic-bezier(.2,1.35,.35,1);
}

.daily-reward-close{
    position:absolute;
    right:12px;
    top:10px;
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    font:900 25px/32px Arial, sans-serif;
    cursor:pointer;
}

.daily-reward-logo{
    display:block;
    width:142px;
    height:auto;
    margin:0 auto 5px;
}

.daily-reward-icon{
    margin-top:2px;
    font-size:55px;
    filter:drop-shadow(0 0 17px rgba(255,205,60,.55));
    animation:dailyGiftFloat 1.7s ease-in-out infinite alternate;
}

.daily-reward-title{
    margin-top:7px;
    color:#ffe16d;
    font:900 26px/1.08 'Nunito', Arial, sans-serif;
    text-shadow:0 0 15px rgba(255,190,20,.48);
}

.daily-reward-subtitle{
    max-width:310px;
    margin:11px auto 0;
    color:rgba(255,255,255,.78);
    font:900 13px/1.42 'Nunito', Arial, sans-serif;
}

.daily-reward-status{
    margin-top:17px;
    padding:12px 13px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;
    background:rgba(255,255,255,.045);
    color:#fff;
    font:900 13px/1.35 'Nunito', Arial, sans-serif;
}

.daily-reward-countdown{
    margin-top:11px;
    color:#9dffb9;
    font:900 15px/1.2 'Nunito', Arial, sans-serif;
    text-shadow:0 0 12px rgba(50,255,130,.35);
}

.daily-reward-message{
    min-height:20px;
    margin-top:8px;
    color:#fff;
    font:900 12px/1.3 'Nunito', Arial, sans-serif;
}

.daily-reward-message.error{ color:#ff8585; }
.daily-reward-message.success{ color:#9dffb9; }

.claim-daily-reward-button{
    width:245px;
    max-width:100%;
    height:54px;
    margin-top:8px;
    border:0;
    border-radius:29px;
    background:linear-gradient(180deg, #ffe875, #ffad12 52%, #c45b00);
    color:#2b1200;
    font:900 17px 'Nunito', Arial, sans-serif;
    box-shadow:
        0 5px 0 #713000,
        0 0 19px rgba(255,195,30,.65);
    cursor:pointer;
}

.claim-daily-reward-button:disabled{
    opacity:.58;
    cursor:not-allowed;
    box-shadow:0 3px 0 #4a2b13;
}

@keyframes dailyButtonPulse{
    0%,100%{ box-shadow:0 0 0 rgba(255,190,30,0); }
    50%{ box-shadow:0 0 17px rgba(255,190,30,.52); }
}

@keyframes dailyCardPop{
    0%{ transform:scale(.74) translateY(18px); opacity:0; }
    100%{ transform:scale(1) translateY(0); opacity:1; }
}

@keyframes dailyGiftFloat{
    0%{ transform:translateY(3px) rotate(-2deg); }
    100%{ transform:translateY(-5px) rotate(2deg); }
}

@media (max-width:768px){
    .daily-reward-overlay{
        align-items:flex-start;
        padding-top:16px;
    }

    .daily-reward-card{
        padding:22px 15px 20px;
        border-radius:23px;
    }

    .daily-reward-title{ font-size:23px; }
    .daily-reward-subtitle{ font-size:12px; }
    .daily-reward-icon{ font-size:49px; }
}

/* ===============================
   ЭТАП 12: SNAP DAILY / JACKPOT
   =============================== */

.machine-mode-badge{
    position:absolute;
    left:50%;
    top:58px;
    z-index:20;
    transform:translateX(-50%);
    min-width:118px;
    padding:5px 13px 4px;
    border-radius:18px;
    color:#fff;
    font:900 12px/1 'Nunito', Arial, sans-serif;
    letter-spacing:.7px;
    text-align:center;
    pointer-events:none;
    text-shadow:0 2px 0 rgba(0,0,0,.8);
}

.machine-mode-badge.daily{
    border:1px solid rgba(101,255,235,.75);
    background:linear-gradient(180deg, rgba(0,180,190,.96), rgba(0,79,110,.96));
    box-shadow:0 0 12px rgba(0,235,255,.55), inset 0 0 8px rgba(255,255,255,.14);
}

.machine-mode-badge.jackpot{
    border:1px solid rgba(255,224,84,.8);
    background:linear-gradient(180deg, rgba(150,73,0,.97), rgba(62,16,0,.98));
    box-shadow:0 0 15px rgba(255,159,0,.65), inset 0 0 8px rgba(255,255,255,.12);
}

.daily-prize-token{
    position:absolute;
    left:50%;
    top:114px;
    z-index:2;
    width:42px;
    min-height:32px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    padding:4px 2px 3px;
    border:1px solid rgba(255,255,255,.58);
    border-radius:7px;
    color:#fff;
    text-align:center;
    user-select:none;
    pointer-events:none;
    box-shadow:0 5px 8px rgba(0,0,0,.58), inset 0 0 8px rgba(255,255,255,.13);
}

.daily-prize-token span{
    font:900 7px/1 'Nunito', Arial, sans-serif;
    letter-spacing:.2px;
}

.daily-prize-token b{
    font:900 8px/1.05 'Nunito', Arial, sans-serif;
}

.token-ozon{ background:linear-gradient(145deg, #1169ff, #0835b6); }
.token-games{ background:linear-gradient(145deg, #e800b7, #6512a5); }
.token-ai{ background:linear-gradient(145deg, #00bda6, #006a75); }
.token-jackpot{ background:linear-gradient(145deg, #ffb000, #9b2500); }

.game:not(.jackpot-mode) .hanger .prize{
    opacity:0;
}

.game.jackpot-mode .daily-prize-token{
    display:none;
}

.game.jackpot-mode .hanger .prize{
    opacity:1;
}

.game.jackpot-mode .stop-button{
    filter:saturate(.55);
}

.game-mode-selector{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:-6px 0 10px;
}

.game-mode-button{
    position:relative;
    min-height:60px;
    padding:9px 5px 7px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:15px;
    background:rgba(255,255,255,.05);
    color:#fff;
    cursor:pointer;
    font-family:'Nunito', Arial, sans-serif;
    box-shadow:inset 0 0 12px rgba(255,255,255,.025);
}

.game-mode-button span{
    display:block;
    font-size:11px;
    line-height:1.05;
    font-weight:900;
}

.game-mode-button small{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.62);
    font-size:8px;
    line-height:1;
    font-weight:900;
}

.game-mode-button b{
    position:absolute;
    right:-4px;
    top:-6px;
    padding:3px 6px;
    border-radius:8px;
    background:#ffb000;
    color:#351400;
    font-size:7px;
    line-height:1;
    box-shadow:0 0 9px rgba(255,176,0,.7);
}

.game-mode-button.daily.active{
    border-color:rgba(0,246,255,.8);
    background:linear-gradient(180deg, rgba(0,182,194,.45), rgba(0,69,111,.55));
    box-shadow:0 0 14px rgba(0,230,255,.28), inset 0 0 10px rgba(255,255,255,.09);
}

.game-mode-button.jackpot.active{
    border-color:rgba(255,184,0,.85);
    background:linear-gradient(180deg, rgba(181,93,0,.5), rgba(75,13,0,.62));
    box-shadow:0 0 15px rgba(255,141,0,.32), inset 0 0 10px rgba(255,255,255,.08);
}

.mode-balance-text{
    position:relative;
    z-index:2;
    margin-bottom:14px;
    color:rgba(255,255,255,.66);
    font:900 9px/1.2 'Nunito', Arial, sans-serif;
}

.start-card{
    min-height:500px;
    padding-top:24px;
}

.start-logo-img{
    width:170px;
    margin-bottom:14px;
}

.start-title{
    margin-bottom:14px;
}

.start-subtitle{
    margin-bottom:22px;
}

.start-card.jackpot-preview{
    background:linear-gradient(180deg, rgba(66,27,3,.97), rgba(12,4,2,.99));
    box-shadow:0 0 30px rgba(255,145,0,.37), 0 0 75px rgba(255,61,0,.2), inset 0 0 26px rgba(255,225,125,.06);
}

.start-card.jackpot-preview .start-title{
    color:#ffd45e;
    text-shadow:0 2px 0 #000, 0 0 13px rgba(255,154,0,.8), 0 0 24px rgba(255,62,0,.42);
}

.start-card.jackpot-preview .start-button{
    background:linear-gradient(180deg, #ffcf51, #d87800 54%, #753000);
    box-shadow:0 6px 0 #401600, 0 0 18px rgba(255,150,0,.7), 0 0 32px rgba(255,62,0,.3);
}

.start-button:disabled{
    opacity:.72;
    cursor:not-allowed;
    transform:none;
}

.win-prize-card{
    position:relative;
    z-index:3;
    width:155px;
    min-height:108px;
    padding:19px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:2px solid rgba(255,255,255,.72);
    border-radius:21px;
    color:#fff;
    text-align:center;
    background:linear-gradient(145deg, #126dff, #241276 58%, #d000a8);
    box-shadow:0 12px 20px rgba(0,0,0,.58), 0 0 22px rgba(255,218,70,.7), inset 0 0 18px rgba(255,255,255,.15);
    animation:winPrizeFloat 1.45s ease-in-out infinite alternate;
}

.win-prize-card.hidden{
    display:none;
}

.win-prize-card span{
    font:900 13px/1.15 'Nunito', Arial, sans-serif;
}

.win-prize-card b{
    font:900 25px/1 'Nunito', Arial, sans-serif;
    color:#fff2a2;
    text-shadow:0 2px 0 rgba(0,0,0,.8), 0 0 11px rgba(255,225,75,.72);
}

.daily-prize-visual{
    width:88px;
    min-height:78px;
    padding:12px 7px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    border-radius:15px;
    color:#fff;
    text-align:center;
    background:linear-gradient(145deg, #1169ff, #481184 62%, #d000a8);
    border:1px solid rgba(255,255,255,.5);
    box-shadow:0 8px 13px rgba(0,0,0,.45), inset 0 0 13px rgba(255,255,255,.11);
}

.daily-prize-visual span{
    font:900 9px/1.05 'Nunito', Arial, sans-serif;
}

.daily-prize-visual b{
    font:900 13px/1.05 'Nunito', Arial, sans-serif;
    color:#fff2a2;
}

@media (max-width:768px){
    .start-card{
        width:305px;
        min-height:490px;
        padding:21px 18px 23px;
    }

    .start-logo-img{
        width:155px;
        margin-bottom:12px;
    }

    .game-mode-button{
        min-height:57px;
    }

    .machine-mode-badge{
        top:58px;
        min-width:108px;
        font-size:10px;
    }
}

.prize-item-mode{
    margin-top:6px;
    color:#71f4ff;
    font:900 9px/1 'Nunito', Arial, sans-serif;
    letter-spacing:.5px;
}

.jackpot-preview-strip{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:56px;
    margin:-2px 0 12px;
    padding:7px 8px;
    border:1px solid rgba(255,197,69,.25);
    border-radius:15px;
    background:rgba(0,0,0,.24);
    box-shadow:inset 0 0 15px rgba(255,147,0,.07);
}

.jackpot-preview-strip.hidden{
    display:none;
}

.jackpot-preview-strip img{
    display:block;
    width:34px;
    height:42px;
    object-fit:contain;
    filter:drop-shadow(0 4px 5px rgba(0,0,0,.75)) drop-shadow(0 0 6px rgba(255,177,0,.28));
}

/* Этап 13: автоматические награды и админ-панель */
.admin-button{
    border:1px solid rgba(255,194,65,.55);
    border-radius:10px;
    padding:7px 10px;
    background:linear-gradient(180deg, rgba(255,177,0,.28), rgba(113,43,0,.55));
    color:#ffe8a3;
    font:900 10px/1 'Nunito', Arial, sans-serif;
    cursor:pointer;
    box-shadow:0 0 11px rgba(255,149,0,.18), inset 0 0 8px rgba(255,255,255,.05);
}

.admin-overlay{
    position:fixed;
    inset:0;
    z-index:10080;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(0,0,0,.86);
    backdrop-filter:blur(9px);
}

.admin-overlay.hidden{
    display:none;
}

.admin-card{
    position:relative;
    width:min(960px, 96vw);
    max-height:92vh;
    overflow:auto;
    padding:24px;
    border:1px solid rgba(255,197,75,.35);
    border-radius:24px;
    color:#fff;
    background:linear-gradient(180deg, rgba(35,20,8,.99), rgba(8,8,15,.99));
    box-shadow:0 0 34px rgba(255,146,0,.22), 0 24px 70px rgba(0,0,0,.75), inset 0 0 28px rgba(255,211,105,.035);
    font-family:'Nunito', Arial, sans-serif;
}

.admin-close{
    position:absolute;
    right:14px;
    top:12px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    font:900 25px/1 Arial, sans-serif;
    cursor:pointer;
}

.admin-logo{
    display:block;
    width:116px;
    margin:0 auto 8px;
}

.admin-title{
    text-align:center;
    color:#ffd875;
    font:900 24px/1.05 'Nunito', Arial, sans-serif;
    text-shadow:0 0 15px rgba(255,164,0,.42);
}

.admin-subtitle{
    margin-top:7px;
    text-align:center;
    color:rgba(255,255,255,.62);
    font:800 11px/1.3 'Nunito', Arial, sans-serif;
}

.admin-stats{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:8px;
    margin:18px 0 14px;
}

.admin-stats > div{
    min-height:68px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:8px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    background:rgba(255,255,255,.045);
    text-align:center;
}

.admin-stats b{
    color:#fff1b1;
    font:900 21px/1 'Nunito', Arial, sans-serif;
}

.admin-stats span{
    margin-top:5px;
    color:rgba(255,255,255,.55);
    font:900 8px/1.05 'Nunito', Arial, sans-serif;
    text-transform:uppercase;
}

.admin-controls{
    display:grid;
    grid-template-columns:190px 1fr 120px;
    gap:8px;
    margin-bottom:10px;
}

.admin-select,
.admin-search,
.admin-refresh{
    min-height:42px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:12px;
    font:800 11px/1 'Nunito', Arial, sans-serif;
}

.admin-select,
.admin-search{
    padding:0 12px;
    background:#15151e;
    color:#fff;
    outline:none;
}

.admin-refresh{
    background:linear-gradient(180deg, #ffc942, #cf7100);
    color:#301400;
    font-weight:900;
    cursor:pointer;
}

.admin-message{
    min-height:20px;
    margin-bottom:4px;
    color:rgba(255,255,255,.65);
    text-align:center;
    font:800 10px/1.2 'Nunito', Arial, sans-serif;
}

.admin-message.error{
    color:#ff7b7b;
}

.admin-message.success{
    color:#6dffbc;
}

.admin-wins-list{
    display:grid;
    gap:9px;
}

.admin-win-item{
    padding:13px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;
    background:rgba(255,255,255,.035);
}

.admin-win-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.admin-win-head > div{
    min-width:0;
}

.admin-win-head b{
    display:block;
    color:#fff;
    font:900 13px/1.2 'Nunito', Arial, sans-serif;
}

.admin-win-head > div > span{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.55);
    font:800 9px/1.2 'Nunito', Arial, sans-serif;
}

.admin-win-status{
    flex:0 0 auto;
    padding:5px 8px;
    border-radius:9px;
    color:#fff;
    background:rgba(255,255,255,.12);
    font:900 8px/1 'Nunito', Arial, sans-serif;
    text-transform:uppercase;
}

.admin-win-status.pending{ background:rgba(255,177,0,.28); color:#ffe5a0; }
.admin-win-status.claimed{ background:rgba(0,159,255,.26); color:#9edfff; }
.admin-win-status.approved{ background:rgba(0,224,183,.22); color:#86ffe6; }
.admin-win-status.delivered{ background:rgba(32,211,95,.22); color:#a1ffbe; }
.admin-win-status.rejected{ background:rgba(255,65,65,.24); color:#ffaaaa; }
.admin-win-status.cancelled{ background:rgba(150,150,150,.18); color:#cfcfcf; }

.admin-win-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:9px;
    color:rgba(255,255,255,.52);
    font:800 9px/1.15 'Nunito', Arial, sans-serif;
}

.admin-win-meta code{
    padding:5px 7px;
    border-radius:8px;
    color:#fff3a5;
    background:rgba(0,0,0,.36);
    font:900 10px/1 monospace;
}

.admin-no-code{
    color:#79ffca;
    font-weight:900;
}

.admin-reward-label{
    margin-top:8px;
    padding:8px 10px;
    border:1px solid rgba(70,255,183,.18);
    border-radius:10px;
    color:#90ffd2;
    background:rgba(0,148,102,.09);
    font:900 10px/1.2 'Nunito', Arial, sans-serif;
}

.admin-win-actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
}

.admin-win-actions button{
    min-height:34px;
    padding:0 10px;
    border:0;
    border-radius:9px;
    background:linear-gradient(180deg, #61ffd1, #00a578);
    color:#002d22;
    font:900 8px/1 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.admin-win-actions button.danger{
    background:linear-gradient(180deg, #ff8d8d, #bc2525);
    color:#360000;
}

.admin-win-actions button.muted{
    background:linear-gradient(180deg, #b7b7c1, #666674);
    color:#17171d;
}

.admin-auto-note,
.admin-empty{
    margin-top:9px;
    color:rgba(255,255,255,.5);
    font:900 9px/1.2 'Nunito', Arial, sans-serif;
}

.admin-empty{
    padding:28px;
    text-align:center;
    border:1px dashed rgba(255,255,255,.13);
    border-radius:15px;
}

.prize-auto-credit{
    margin-top:10px;
    padding:10px;
    border:1px solid rgba(56,255,177,.22);
    border-radius:12px;
    background:rgba(0,161,105,.09);
}

.prize-auto-credit b,
.prize-auto-credit span{
    display:block;
}

.prize-auto-credit b{
    color:#78ffc9;
    font:900 9px/1.1 'Nunito', Arial, sans-serif;
}

.prize-auto-credit span{
    margin-top:4px;
    color:rgba(255,255,255,.72);
    font:800 10px/1.25 'Nunito', Arial, sans-serif;
}

@media (max-width:780px){
    .admin-card{
        width:96vw;
        padding:18px 12px;
        border-radius:18px;
    }

    .admin-stats{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .admin-controls{
        grid-template-columns:1fr;
    }

    .admin-win-head,
    .admin-win-meta{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-win-status{
        align-self:flex-start;
    }
}

/* Этап 14: восстановление после потери связи */
.connection-overlay{
    position:fixed;
    inset:0;
    z-index:12000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(3, 5, 12, .82);
    backdrop-filter:blur(8px);
}

.connection-overlay.hidden{
    display:none;
}

.connection-card{
    width:min(390px, 92vw);
    padding:26px 22px 22px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:22px;
    background:linear-gradient(180deg, rgba(24,28,42,.98), rgba(8,10,18,.98));
    box-shadow:0 24px 80px rgba(0,0,0,.55), 0 0 34px rgba(0,234,255,.14);
    text-align:center;
}

.connection-spinner{
    width:46px;
    height:46px;
    margin:0 auto 16px;
    border:4px solid rgba(255,255,255,.13);
    border-top-color:#00eaff;
    border-radius:50%;
    animation:snapConnectionSpin .85s linear infinite;
}

.connection-title{
    font-family:Nunito, Arial, sans-serif;
    font-size:22px;
    font-weight:900;
    letter-spacing:.04em;
    color:#fff;
}

.connection-text{
    margin-top:10px;
    font-family:Nunito, Arial, sans-serif;
    font-size:14px;
    line-height:1.45;
    color:rgba(255,255,255,.76);
}

.connection-retry-button{
    width:100%;
    margin-top:18px;
    padding:13px 16px;
    border:0;
    border-radius:14px;
    font-family:Nunito, Arial, sans-serif;
    font-size:14px;
    font-weight:900;
    color:#071014;
    background:linear-gradient(180deg, #79f7ff, #00d7eb);
    cursor:pointer;
}

.connection-retry-button:disabled{
    opacity:.55;
    cursor:default;
}

body.snap-offline::before{
    content:'НЕТ СВЯЗИ — РЕЗУЛЬТАТ БУДЕТ ВОССТАНОВЛЕН';
    position:fixed;
    left:50%;
    top:8px;
    z-index:13000;
    transform:translateX(-50%);
    max-width:calc(100vw - 24px);
    padding:7px 12px;
    border-radius:999px;
    font:900 11px/1.2 Nunito, Arial, sans-serif;
    letter-spacing:.03em;
    color:#1b0d00;
    background:#ffb13b;
    box-shadow:0 7px 28px rgba(0,0,0,.3);
    white-space:nowrap;
}

@keyframes snapConnectionSpin{
    to{ transform:rotate(360deg); }
}

/* Этап 15: экономика призов */
.admin-economy-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:18px 0 10px;
}

.admin-economy-head > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.admin-economy-head b{
    font-size:14px;
    letter-spacing:.04em;
}

.admin-economy-head span{
    font-size:12px;
    color:rgba(255,255,255,.72);
}

.admin-section-title{
    margin:20px 0 10px;
    font-size:14px;
    font-weight:900;
    letter-spacing:.05em;
}

.admin-prize-economy-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    max-height:430px;
    overflow:auto;
    padding-right:3px;
}

.admin-prize-economy-item{
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    padding:12px;
    background:rgba(0,0,0,.28);
}

.admin-prize-economy-title{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    margin-bottom:10px;
}

.admin-prize-economy-title > div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.admin-prize-economy-title b{
    font-size:13px;
}

.admin-prize-economy-title span{
    font-size:10px;
    color:rgba(255,255,255,.55);
}

.admin-economy-status{
    border-radius:999px;
    padding:5px 8px;
    font-size:10px !important;
    font-weight:900;
    white-space:nowrap;
}

.admin-economy-status.available{
    color:#a7ffc1;
    background:rgba(32,211,95,.2);
}

.admin-economy-status.unavailable{
    color:#ffb0b0;
    background:rgba(255,65,65,.2);
}

.admin-prize-economy-item label{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:10px;
    color:rgba(255,255,255,.7);
}

.admin-prize-economy-item input[type="text"],
.admin-prize-economy-item input[type="number"]{
    width:100%;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.16);
    border-radius:9px;
    background:rgba(255,255,255,.06);
    color:#fff;
    padding:8px 9px;
    font:inherit;
    font-size:12px;
    outline:none;
}

.admin-economy-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:8px;
}

.admin-economy-meta{
    margin-top:9px;
    font-size:10px;
    line-height:1.45;
    color:rgba(255,255,255,.62);
}

.admin-economy-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-top:10px;
}

.admin-active-toggle{
    flex-direction:row !important;
    align-items:center;
    gap:6px !important;
    font-size:11px !important;
}

.admin-economy-actions button{
    border:0;
    border-radius:9px;
    padding:8px 11px;
    background:#fff;
    color:#111;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}

.admin-economy-actions button:disabled{
    opacity:.55;
    cursor:wait;
}

.hanger.prize-unavailable .daily-prize-token{
    opacity:.38;
    filter:grayscale(1);
}

.hanger.prize-unavailable .daily-prize-token::after{
    content:"НЕТ";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:inherit;
    background:rgba(0,0,0,.68);
    color:#fff;
    font-size:11px;
    font-weight:900;
}

@media (max-width:700px){
    .admin-prize-economy-list{
        grid-template-columns:1fr;
        max-height:360px;
    }

    .admin-economy-head{
        align-items:stretch;
        flex-direction:column;
    }
}

/* Этап 16: полноценный центр управления */
.admin-center-card{
    width:min(1180px, 97vw);
}

.admin-stats-wide{
    grid-template-columns:repeat(8, minmax(0, 1fr));
}

.admin-tabs{
    display:flex;
    gap:7px;
    margin:8px 0 14px;
    overflow-x:auto;
    padding-bottom:4px;
}

.admin-tab{
    flex:0 0 auto;
    min-height:38px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:11px;
    background:rgba(255,255,255,.045);
    color:rgba(255,255,255,.64);
    font:900 9px/1 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.admin-tab.active{
    border-color:rgba(255,194,65,.52);
    color:#271300;
    background:linear-gradient(180deg, #ffe17b, #d8890a);
    box-shadow:0 0 16px rgba(255,153,0,.17);
}

.admin-tab-panel.hidden{
    display:none;
}

.admin-dashboard-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
}

.admin-dashboard-card,
.admin-user-detail-card{
    padding:14px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:15px;
    background:rgba(255,255,255,.035);
}

.admin-dashboard-card > b,
.admin-user-detail-card > b,
.admin-user-detail-columns > div > b{
    display:block;
    margin-bottom:9px;
    color:#ffe4a0;
    font:900 11px/1 'Nunito', Arial, sans-serif;
    letter-spacing:.04em;
}

.admin-dashboard-lines{
    display:grid;
    gap:6px;
}

.admin-dashboard-lines > div,
.admin-balance-grid > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:7px 8px;
    border-radius:9px;
    background:rgba(0,0,0,.2);
}

.admin-dashboard-lines span,
.admin-balance-grid span{
    color:rgba(255,255,255,.61);
    font:800 10px/1.2 'Nunito', Arial, sans-serif;
}

.admin-dashboard-lines b,
.admin-balance-grid b{
    color:#fff;
    font:900 11px/1 'Nunito', Arial, sans-serif;
}

.admin-dashboard-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:10px;
}

.admin-controls-users{
    grid-template-columns:190px 1fr 120px;
}

.admin-controls-compact{
    grid-template-columns:minmax(240px, 1fr) 140px;
}

.admin-controls-security{
    grid-template-columns:190px 190px 130px;
}

.admin-users-list,
.admin-generic-list{
    display:grid;
    gap:9px;
}

.admin-user-item,
.admin-generic-item{
    padding:13px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;
    background:rgba(255,255,255,.035);
}

.admin-user-head,
.admin-generic-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.admin-user-head b,
.admin-generic-head b{
    display:block;
    color:#fff;
    font:900 13px/1.2 'Nunito', Arial, sans-serif;
}

.admin-user-head span,
.admin-generic-head > div > span{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.52);
    font:800 9px/1.2 'Nunito', Arial, sans-serif;
}

.admin-user-badges{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:5px;
}

.admin-badge{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 8px;
    border-radius:999px;
    color:#d9d9e4;
    background:rgba(255,255,255,.09);
    font:900 8px/1 'Nunito', Arial, sans-serif;
    white-space:nowrap;
}

.admin-badge.active{
    color:#9dffbe;
    background:rgba(28,205,96,.2);
}

.admin-badge.blocked{
    color:#ffabab;
    background:rgba(255,56,56,.22);
}

.admin-badge.admin{
    color:#ffe597;
    background:rgba(255,174,0,.22);
}

.admin-user-metrics{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:6px;
    margin-top:10px;
}

.admin-user-metrics span{
    padding:7px;
    border-radius:9px;
    color:rgba(255,255,255,.54);
    background:rgba(0,0,0,.22);
    text-align:center;
    font:800 8px/1.2 'Nunito', Arial, sans-serif;
}

.admin-user-metrics b{
    display:block;
    margin-bottom:3px;
    color:#fff;
    font-size:11px;
}

.admin-user-warning,
.admin-user-block-reason{
    margin-top:8px;
    padding:8px 10px;
    border-radius:9px;
    color:#ffd0a1;
    background:rgba(255,111,0,.12);
    font:900 9px/1.25 'Nunito', Arial, sans-serif;
}

.admin-user-actions,
.admin-generic-actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
}

.admin-user-actions button,
.admin-generic-actions button,
.admin-balance-editor button{
    min-height:34px;
    padding:0 10px;
    border:0;
    border-radius:9px;
    background:linear-gradient(180deg, #75f8ff, #00a5b6);
    color:#00272b;
    font:900 8px/1 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.admin-user-actions button.danger,
.admin-generic-actions button.danger{
    color:#3a0000;
    background:linear-gradient(180deg, #ff9393, #c62a2a);
}

.admin-user-actions button.success{
    color:#003018;
    background:linear-gradient(180deg, #8cffad, #18b95a);
}

.admin-user-details{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.08);
}

.admin-user-details.hidden{
    display:none;
}

.admin-user-details-grid,
.admin-user-detail-columns{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:9px;
}

.admin-balance-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:5px;
}

.admin-balance-editor{
    display:grid;
    grid-template-columns:180px 150px 1fr 160px;
    gap:7px;
    margin:10px 0;
}

.admin-balance-editor select,
.admin-balance-editor input{
    min-height:39px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.13);
    border-radius:10px;
    padding:0 10px;
    background:#15151e;
    color:#fff;
    outline:none;
    font:800 10px/1 'Nunito', Arial, sans-serif;
}

.admin-user-detail-columns > div{
    padding:12px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:13px;
    background:rgba(0,0,0,.18);
}

.admin-mini-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:7px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:rgba(255,255,255,.58);
    font:800 9px/1.2 'Nunito', Arial, sans-serif;
}

.admin-mini-row:last-child{
    border-bottom:0;
}

.admin-mini-row b{
    color:#fff;
    font-size:9px;
}

.admin-mini-empty,
.admin-loading,
.admin-error-inline{
    padding:12px;
    color:rgba(255,255,255,.55);
    font:800 10px/1.3 'Nunito', Arial, sans-serif;
}

.admin-error-inline{
    color:#ff9292;
}

.admin-generic-meta{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:6px;
    margin-top:9px;
}

.admin-generic-meta span{
    padding:7px 8px;
    border-radius:8px;
    color:rgba(255,255,255,.58);
    background:rgba(0,0,0,.2);
    font:800 9px/1.25 'Nunito', Arial, sans-serif;
}

.admin-security-item.warning{
    border-color:rgba(255,175,0,.28);
}

.admin-security-item.critical{
    border-color:rgba(255,61,61,.4);
}

.admin-security-details{
    max-height:150px;
    overflow:auto;
    margin:9px 0 0;
    padding:9px;
    border-radius:9px;
    color:#c8d0e2;
    background:rgba(0,0,0,.35);
    white-space:pre-wrap;
    word-break:break-word;
    font:700 9px/1.35 monospace;
}

.admin-resolved-note{
    margin-top:8px;
    color:#83ffc0;
    font:900 9px/1.2 'Nunito', Arial, sans-serif;
}

@media (max-width:980px){
    .admin-stats-wide{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }

    .admin-user-metrics{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .admin-balance-editor{
        grid-template-columns:1fr 1fr;
    }

    .admin-generic-meta{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:700px){
    .admin-stats-wide{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard-grid,
    .admin-user-details-grid,
    .admin-user-detail-columns{
        grid-template-columns:1fr;
    }

    .admin-controls-users,
    .admin-controls-compact,
    .admin-controls-security,
    .admin-balance-editor{
        grid-template-columns:1fr;
    }

    .admin-user-head,
    .admin-generic-head{
        flex-direction:column;
    }

    .admin-user-badges{
        justify-content:flex-start;
    }

    .admin-user-metrics,
    .admin-balance-grid,
    .admin-generic-meta{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

/* STEP 19: PERSONAL CABINET */

.user-bar .cabinet-legacy-button{
    display:none !important;
}

.user-bar .cabinet-button{
    background:linear-gradient(180deg, #ffcf47, #db7500);
    color:#2b1000;
    box-shadow:0 0 12px rgba(255,181,40,.42);
}

.cabinet-overlay{
    position:fixed;
    inset:0;
    z-index:1000003;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:18px;
    overflow:auto;
    background:rgba(3,2,12,.94);
    backdrop-filter:blur(13px);
}

.cabinet-overlay.hidden,
.cabinet-panel.hidden,
.cabinet-active-game.hidden{
    display:none !important;
}

.cabinet-card{
    position:relative;
    width:min(920px, 100%);
    max-height:calc(100vh - 36px);
    padding:24px;
    overflow:auto;
    border:1px solid rgba(255,255,255,.14);
    border-radius:28px;
    background:
        radial-gradient(circle at 7% 0%, rgba(255,197,55,.19), transparent 28%),
        radial-gradient(circle at 100% 16%, rgba(255,0,198,.15), transparent 32%),
        linear-gradient(155deg, #171021, #08070f 64%, #10121f);
    color:#fff;
    box-shadow:0 28px 100px rgba(0,0,0,.65), 0 0 34px rgba(255,0,200,.12);
}

.cabinet-close{
    position:absolute;
    top:14px;
    right:15px;
    z-index:3;
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
    background:rgba(255,255,255,.07);
    color:#fff;
    font:900 25px/1 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.cabinet-head{
    display:grid;
    grid-template-columns:66px 1fr auto;
    gap:15px;
    align-items:center;
    padding:4px 54px 18px 0;
}

.cabinet-avatar{
    display:flex;
    align-items:center;
    justify-content:center;
    width:66px;
    height:66px;
    border:2px solid rgba(255,237,130,.75);
    border-radius:22px;
    background:linear-gradient(145deg, #ffda55, #e65700 65%, #9f006d);
    color:#2b0d00;
    font:900 30px 'Nunito', Arial, sans-serif;
    box-shadow:0 0 20px rgba(255,178,32,.34);
}

.cabinet-kicker{
    color:#ffd55b;
    font:900 11px/1 'Nunito', Arial, sans-serif;
    letter-spacing:1.4px;
}

.cabinet-display-name{
    margin-top:6px;
    font:900 25px/1.05 'Nunito', Arial, sans-serif;
}

.cabinet-phone{
    margin-top:6px;
    color:rgba(255,255,255,.58);
    font:900 12px 'Nunito', Arial, sans-serif;
}

.cabinet-account-badge{
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:14px;
    background:rgba(255,255,255,.07);
    color:#bfe7ff;
    font:900 10px 'Nunito', Arial, sans-serif;
    letter-spacing:.7px;
}

.cabinet-account-badge.admin{
    border-color:rgba(255,214,80,.42);
    background:rgba(255,187,0,.14);
    color:#ffe16d;
}

.cabinet-tabs{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
    margin-bottom:16px;
    padding:6px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(0,0,0,.24);
}

.cabinet-tab{
    min-height:42px;
    padding:0 10px;
    border:0;
    border-radius:13px;
    background:transparent;
    color:rgba(255,255,255,.55);
    font:900 11px 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.cabinet-tab.active{
    background:linear-gradient(180deg, #f7c943, #c96c00);
    color:#2a1000;
    box-shadow:0 0 14px rgba(255,185,26,.28);
}

.cabinet-message{
    min-height:22px;
    margin:0 0 8px;
    text-align:center;
    color:rgba(255,255,255,.72);
    font:900 12px/1.3 'Nunito', Arial, sans-serif;
}

.cabinet-message.error{ color:#ff8585; }
.cabinet-message.success{ color:#8dffa1; }

.cabinet-panel{
    animation:cabinetPanelIn .18s ease-out;
}

@keyframes cabinetPanelIn{
    from{ opacity:0; transform:translateY(5px); }
    to{ opacity:1; transform:translateY(0); }
}

.cabinet-balance-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
}

.cabinet-balance-item{
    position:relative;
    min-height:88px;
    padding:16px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.11);
    border-radius:19px;
    background:rgba(255,255,255,.05);
}

.cabinet-balance-item::after{
    content:'';
    position:absolute;
    right:-26px;
    bottom:-38px;
    width:95px;
    height:95px;
    border-radius:50%;
    background:currentColor;
    opacity:.09;
}

.cabinet-balance-item span{
    display:block;
    color:rgba(255,255,255,.58);
    font:900 9px 'Nunito', Arial, sans-serif;
    letter-spacing:.7px;
}

.cabinet-balance-item b{
    position:relative;
    z-index:1;
    display:block;
    margin-top:8px;
    color:#fff;
    font:900 25px 'Nunito', Arial, sans-serif;
}

.cabinet-balance-item.daily{ color:#ffe05a; }
.cabinet-balance-item.referral{ color:#7dffad; }
.cabinet-balance-item.jackpot{ color:#ff68df; }
.cabinet-balance-item.ai{ color:#68cfff; }

.cabinet-section-title{
    margin:20px 0 10px;
    color:#ffe171;
    font:900 12px 'Nunito', Arial, sans-serif;
    letter-spacing:1px;
}

.cabinet-action-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:9px;
}

.cabinet-action-grid button{
    position:relative;
    display:grid;
    grid-template-columns:36px 1fr;
    gap:10px;
    align-items:center;
    min-height:60px;
    padding:10px 13px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:17px;
    background:rgba(255,255,255,.045);
    color:#fff;
    text-align:left;
    cursor:pointer;
    transition:transform .12s ease, background .12s ease;
}

.cabinet-action-grid button:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.08);
}

.cabinet-action-grid button b{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:12px;
    background:rgba(255,255,255,.08);
    font-size:19px;
}

.cabinet-action-grid button span{
    font:900 12px/1.15 'Nunito', Arial, sans-serif;
}

.cabinet-action-grid button small{
    position:absolute;
    right:9px;
    top:7px;
    color:#ffdf63;
    font:900 8px 'Nunito', Arial, sans-serif;
}

.cabinet-stat-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:8px;
}

.cabinet-stat-grid div{
    min-height:72px;
    padding:12px 8px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:rgba(0,0,0,.19);
    text-align:center;
}

.cabinet-stat-grid b{
    display:block;
    color:#fff;
    font:900 19px 'Nunito', Arial, sans-serif;
}

.cabinet-stat-grid span{
    display:block;
    margin-top:5px;
    color:rgba(255,255,255,.5);
    font:900 9px/1.1 'Nunito', Arial, sans-serif;
}

.cabinet-active-game{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:12px;
    padding:13px 15px;
    border:1px solid rgba(115,225,255,.3);
    border-radius:17px;
    background:linear-gradient(100deg, rgba(0,157,210,.14), rgba(255,0,190,.08));
}

.cabinet-active-game b,
.cabinet-active-game span{
    display:block;
}

.cabinet-active-game b{ color:#86eaff; font:900 11px 'Nunito', Arial, sans-serif; }
.cabinet-active-game span{ margin-top:4px; color:rgba(255,255,255,.68); font:900 10px 'Nunito', Arial, sans-serif; }

.cabinet-active-game button,
.cabinet-mini-button{
    min-height:34px;
    padding:0 13px;
    border:0;
    border-radius:12px;
    background:linear-gradient(180deg, #64dcff, #147da8);
    color:#03131a;
    font:900 9px 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.cabinet-info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px;
}

.cabinet-info-card{
    display:grid;
    grid-template-columns:43px 1fr;
    gap:12px;
    align-items:center;
    min-height:78px;
    padding:13px;
    border:1px dashed rgba(255,255,255,.13);
    border-radius:17px;
    background:rgba(255,255,255,.025);
}

.cabinet-info-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:43px;
    height:43px;
    border-radius:14px;
    background:rgba(255,255,255,.07);
    font-size:22px;
}

.cabinet-info-card b,
.cabinet-info-card span{ display:block; }
.cabinet-info-card b{ font:900 11px 'Nunito', Arial, sans-serif; }
.cabinet-info-card span{ margin-top:5px; color:rgba(255,255,255,.48); font:900 9px/1.3 'Nunito', Arial, sans-serif; }

.cabinet-history-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
}

.cabinet-history-head .cabinet-section-title{ margin-top:4px; }
.cabinet-muted{ color:rgba(255,255,255,.48); font:900 10px/1.3 'Nunito', Arial, sans-serif; }

.cabinet-history-list{
    display:grid;
    gap:8px;
    margin-top:16px;
}

.cabinet-history-item{
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:12px;
    align-items:center;
    padding:11px 13px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:rgba(255,255,255,.035);
}

.cabinet-history-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:13px;
    background:rgba(255,255,255,.07);
    font-size:20px;
}

.cabinet-history-copy b,
.cabinet-history-copy span{ display:block; }
.cabinet-history-copy b{ font:900 12px 'Nunito', Arial, sans-serif; }
.cabinet-history-copy span{ margin-top:4px; color:rgba(255,255,255,.52); font:900 9px/1.2 'Nunito', Arial, sans-serif; }
.cabinet-history-item time{ color:rgba(255,255,255,.38); font:900 9px 'Nunito', Arial, sans-serif; white-space:nowrap; }
.cabinet-empty{ padding:35px 15px; text-align:center; color:rgba(255,255,255,.48); font:900 11px/1.4 'Nunito', Arial, sans-serif; }

.cabinet-profile-grid,
.cabinet-security-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.cabinet-profile-box,
.cabinet-form,
.cabinet-security-card{
    padding:17px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:19px;
    background:rgba(255,255,255,.035);
}

.cabinet-profile-box .cabinet-section-title,
.cabinet-form .cabinet-section-title,
.cabinet-security-card .cabinet-section-title{
    margin-top:0;
}

.cabinet-account-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:37px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.cabinet-account-row:last-child{ border-bottom:0; }
.cabinet-account-row span{ color:rgba(255,255,255,.5); font:900 10px 'Nunito', Arial, sans-serif; }
.cabinet-account-row b{ color:#fff; font:900 11px 'Nunito', Arial, sans-serif; text-align:right; }

.cabinet-form label{
    display:block;
    margin:10px 2px 6px;
    color:#ffe28a;
    font:900 10px 'Nunito', Arial, sans-serif;
}

.cabinet-form input{
    width:100%;
    height:44px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:13px;
    outline:none;
    background:rgba(0,0,0,.28);
    color:#fff;
    font:900 13px 'Nunito', Arial, sans-serif;
}

.cabinet-form input:focus{
    border-color:#ffcf4d;
    box-shadow:0 0 12px rgba(255,190,35,.18);
}

.cabinet-field-note{
    margin-top:7px;
    color:rgba(255,255,255,.4);
    font:900 9px/1.3 'Nunito', Arial, sans-serif;
}

.cabinet-form button,
.cabinet-security-card button{
    width:100%;
    min-height:43px;
    margin-top:13px;
    border:0;
    border-radius:14px;
    background:linear-gradient(180deg, #ffd758, #c96d00);
    color:#281000;
    font:900 11px 'Nunito', Arial, sans-serif;
    cursor:pointer;
}

.cabinet-form button:disabled,
.cabinet-security-card button:disabled{ opacity:.6; cursor:wait; }

.cabinet-consents{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:9px;
    margin-top:12px;
}

.cabinet-consents > div{
    display:flex;
    gap:10px;
    align-items:center;
    min-height:55px;
    padding:10px 12px;
    border:1px solid rgba(91,255,137,.16);
    border-radius:15px;
    background:rgba(44,174,83,.07);
}

.cabinet-consents b{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:30px;
    height:30px;
    border-radius:10px;
    background:rgba(84,255,130,.12);
    color:#83ff9f;
    font:900 12px 'Nunito', Arial, sans-serif;
}

.cabinet-consents span{ color:rgba(255,255,255,.68); font:900 9px/1.2 'Nunito', Arial, sans-serif; }
.cabinet-consents > div.inactive{ opacity:.45; filter:grayscale(1); }

.cabinet-session-count{
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:15px;
}

.cabinet-session-count b{
    display:flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    border-radius:18px;
    background:rgba(93,215,255,.12);
    color:#89e8ff;
    font:900 24px 'Nunito', Arial, sans-serif;
}

.cabinet-session-count span{ color:rgba(255,255,255,.6); font:900 10px/1.25 'Nunito', Arial, sans-serif; }
.cabinet-security-card p{ margin-top:14px; color:rgba(255,255,255,.45); font:900 9px/1.35 'Nunito', Arial, sans-serif; }
.cabinet-security-card button{ background:linear-gradient(180deg, #ff7777, #a91831); color:#fff; }
.cabinet-security-note{ margin-top:12px; padding:12px 14px; border-radius:14px; background:rgba(255,211,70,.07); color:rgba(255,236,169,.7); font:900 9px/1.4 'Nunito', Arial, sans-serif; text-align:center; }

@media (max-width:768px){
    .user-bar .cabinet-button{ order:8; }

    .cabinet-overlay{
        align-items:flex-start;
        padding:7px;
    }

    .cabinet-card{
        max-height:calc(100vh - 14px);
        padding:17px 11px 14px;
        border-radius:21px;
    }

    .cabinet-close{
        top:9px;
        right:9px;
        width:34px;
        height:34px;
    }

    .cabinet-head{
        grid-template-columns:52px 1fr;
        gap:11px;
        padding:2px 40px 14px 2px;
    }

    .cabinet-avatar{
        width:52px;
        height:52px;
        border-radius:17px;
        font-size:23px;
    }

    .cabinet-display-name{ font-size:19px; }
    .cabinet-account-badge{ display:none; }

    .cabinet-tabs{
        gap:4px;
        padding:4px;
        overflow-x:auto;
    }

    .cabinet-tab{
        min-width:82px;
        min-height:38px;
        font-size:9px;
    }

    .cabinet-balance-grid{ grid-template-columns:1fr 1fr; }
    .cabinet-balance-item{ min-height:76px; padding:13px; }
    .cabinet-balance-item b{ font-size:21px; }

    .cabinet-action-grid{ grid-template-columns:1fr 1fr; }
    .cabinet-action-grid button{ min-height:56px; padding:9px; }

    .cabinet-stat-grid{ grid-template-columns:repeat(3, 1fr); }
    .cabinet-info-grid,
    .cabinet-profile-grid,
    .cabinet-security-grid{ grid-template-columns:1fr; }

    .cabinet-consents{ grid-template-columns:1fr; }

    .cabinet-history-item{
        grid-template-columns:38px 1fr;
        gap:9px;
    }

    .cabinet-history-icon{ width:38px; height:38px; }
    .cabinet-history-item time{ grid-column:2; }

    .cabinet-active-game{
        align-items:flex-start;
        flex-direction:column;
    }

    .cabinet-active-game button{ width:100%; }
}

/* STEP 19.1: CLEAN HEADER + ADMIN VISIBILITY + LIVE FEED */
.admin-button.hidden,
.admin-button[hidden]{
    display:none !important;
}

.user-bar{
    min-width:0;
    width:auto;
    justify-content:center;
    gap:10px;
    padding:8px 11px;
}

.live-feed-dock{
    position:fixed;
    z-index:999996;
    transform:translateX(-50%);
    width:360px;
    max-width:calc(100vw - 20px);
    height:122px;
    padding:8px 9px 9px;
    overflow:hidden;
    border:1px solid rgba(0,229,255,.28);
    border-radius:18px;
    background:
        radial-gradient(circle at 15% 0%, rgba(0,229,255,.12), transparent 38%),
        radial-gradient(circle at 90% 100%, rgba(255,0,210,.13), transparent 42%),
        rgba(5,4,16,.92);
    box-shadow:
        0 0 18px rgba(0,220,255,.14),
        0 0 25px rgba(255,0,210,.12),
        inset 0 0 16px rgba(255,255,255,.025);
    backdrop-filter:blur(10px);
}

.live-feed-dock.hidden{
    display:none !important;
}

.live-feed-dock-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:20px;
    padding:0 4px 5px;
    color:#fff;
    font:900 10px/1 'Nunito', Arial, sans-serif;
    letter-spacing:.35px;
}

.live-feed-dock-head span{
    display:flex;
    align-items:center;
    gap:6px;
}

.live-feed-dock-head i{
    display:block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#46ff79;
    box-shadow:0 0 8px rgba(70,255,121,.95);
    animation:liveFeedPulse 1.5s ease-in-out infinite;
}

.live-feed-dock-head small{
    color:rgba(255,255,255,.45);
    font:900 9px/1 'Nunito', Arial, sans-serif;
}

.live-feed-chat{
    height:88px;
    overflow-y:auto;
    padding:1px 2px 5px;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.16) transparent;
}

.live-feed-chat::-webkit-scrollbar{ width:4px; }
.live-feed-chat::-webkit-scrollbar-track{ background:transparent; }
.live-feed-chat::-webkit-scrollbar-thumb{
    border-radius:4px;
    background:rgba(255,255,255,.15);
}

.live-feed-message{
    display:flex;
    align-items:flex-end;
    gap:7px;
    margin:0 0 6px;
}

.live-feed-message-icon{
    display:flex;
    flex:0 0 24px;
    width:24px;
    height:24px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.07);
    font-size:13px;
    box-shadow:inset 0 0 8px rgba(255,255,255,.04);
}

.live-feed-bubble{
    position:relative;
    flex:1;
    min-width:0;
    padding:6px 8px 7px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px 10px 10px 3px;
    background:rgba(255,255,255,.052);
    color:rgba(255,255,255,.88);
    font:900 9px/1.25 'Nunito', Arial, sans-serif;
}

.live-feed-message.win .live-feed-bubble{
    border-color:rgba(255,220,72,.22);
    background:linear-gradient(90deg, rgba(255,193,7,.10), rgba(255,255,255,.045));
}

.live-feed-message.near .live-feed-bubble{
    border-color:rgba(0,224,255,.20);
    background:linear-gradient(90deg, rgba(0,204,255,.09), rgba(255,255,255,.045));
}

.live-feed-message.activity .live-feed-bubble{
    border-color:rgba(255,0,210,.18);
    background:linear-gradient(90deg, rgba(255,0,210,.075), rgba(255,255,255,.045));
}

.live-feed-message-top{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-bottom:2px;
}

.live-feed-message-top b{
    color:#ffe96e;
    font-size:8px;
    letter-spacing:.45px;
}

.live-feed-message.near .live-feed-message-top b{ color:#67ecff; }
.live-feed-message.activity .live-feed-message-top b{ color:#ff87e9; }

.live-feed-message-top time{
    flex:0 0 auto;
    color:rgba(255,255,255,.35);
    font-size:8px;
}

.live-feed-loading,
.live-feed-empty{
    display:flex;
    height:76px;
    align-items:center;
    justify-content:center;
    padding:0 24px;
    color:rgba(255,255,255,.48);
    text-align:center;
    font:900 10px/1.35 'Nunito', Arial, sans-serif;
}

@keyframes liveFeedPulse{
    0%,100%{ transform:scale(.85); opacity:.62; }
    50%{ transform:scale(1.08); opacity:1; }
}

@media (max-width:768px){
    .user-bar{
        min-width:0;
        width:auto;
        max-width:calc(100vw - 12px);
        gap:5px;
        padding:6px 7px;
    }

    .user-bar button{
        height:27px;
        padding:0 9px;
        font-size:9px;
    }

    .live-feed-dock{
        height:104px;
        padding:7px 8px 8px;
        border-radius:15px;
    }

    .live-feed-chat{ height:72px; }
    .live-feed-message{ gap:5px; margin-bottom:5px; }
    .live-feed-message-icon{
        flex-basis:21px;
        width:21px;
        height:21px;
        font-size:11px;
    }
    .live-feed-bubble{
        padding:5px 7px 6px;
        font-size:8px;
    }
    .live-feed-loading,
    .live-feed-empty{
        height:60px;
        font-size:9px;
    }
}


/* STEP 19.2: MOBILE COMPOSITOR OPTIMIZATION */
.snap-mobile body{
    overflow-x:hidden;
    overflow-y:auto;
    min-height:100svh;
    -webkit-overflow-scrolling:touch;
}

.snap-mobile .game{
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.snap-mobile .hanger-layer,
.snap-mobile .mechanism-layer{
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.snap-android .hanger{
    animation-name:swingAndroid;
    animation-duration:3.05s;
    animation-timing-function:cubic-bezier(.45, 0, .55, 1);
}

.snap-android .daily-prize-token{
    box-shadow:0 3px 5px rgba(0,0,0,.48), inset 0 0 4px rgba(255,255,255,.1);
}

.snap-android .user-bar,
.snap-android .live-feed-dock,
.snap-android .start-card,
.snap-android .cabinet-card,
.snap-android .admin-card{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
}

@media (max-width:768px){
    body{
        overflow-x:hidden;
        overflow-y:auto;
        padding-bottom:155px;
    }

    .hanger,
    .mechanism-unit,
    .rope,
    .prize,
    .daily-prize-token{
        -webkit-font-smoothing:antialiased;
    }
}

/* =====================================================
   STEP 19.4 DIAGNOSTIC: ANDROID STATIC HANGERS + TRUE STOP FRAME
   ===================================================== */

/* Диагностика Android: полностью убираем качание, чтобы отделить
   проблему рендера подвесов от движения каретки и серверной логики. */
.snap-android .hanger{
    animation:none !important;
    transform:translate3d(-50%, 0, 0) rotate(0deg) !important;
    will-change:auto !important;
    transform-style:flat !important;
}

/* STEP 19.5: the carriage remains frozen at the rendered STOP frame.
   Forward motion and flash now live on independent lightweight inner layers. */
.snap-mobile .cutter.attack{
    animation:none !important;
    filter:none !important;
    transform:none !important;
}

.snap-mobile .mechanism-unit.shake{
    animation:none !important;
}

.snap-mobile .cutter-motion,
.snap-mobile .cutter-flash{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.snap-android .live-feed-dock-head i{
    animation:none !important;
}

@media (max-width:768px){
    html{
        min-height:100%;
        background:#02030a;
    }

    body{
        display:block;
        width:100%;
        min-height:100dvh;
        padding:0 0 calc(14px + env(safe-area-inset-bottom));
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior-y:none;
        -webkit-overflow-scrolling:touch;
    }

    /* У обычного игрока три кнопки занимают одну строку. */
    .user-bar{
        position:fixed;
        top:max(5px, env(safe-area-inset-top));
        left:6px;
        right:6px;
        width:auto;
        min-width:0;
        max-width:none;
        height:42px;
        transform:none;
        display:grid;
        grid-auto-flow:column;
        grid-auto-columns:minmax(0,1fr);
        align-items:stretch;
        gap:6px;
        padding:5px;
        border-radius:15px;
        background:rgba(8,3,15,.96);
        box-shadow:0 0 14px rgba(255,0,200,.18);
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    .user-bar button{
        width:100%;
        min-width:0;
        height:32px;
        padding:0 3px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        border-radius:11px;
        font-size:9px;
        line-height:1;
    }

    .game{
        width:360px;
        max-width:none;
        margin:calc(max(5px, env(safe-area-inset-top)) + 58px) auto 0;
        transform-origin:top center;
    }

    /* Компенсируем пустое место, которое остаётся после CSS scale. */
    .snap-narrow-screen .game{
        margin-bottom:calc(-1 * (1 - var(--snap-game-scale, 1)) * 500px);
    }

    .live-feed-dock{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        transform:none !important;
        width:min(360px, calc(100vw - 8px)) !important;
        max-width:none;
        height:120px;
        margin:8px auto 0;
        padding:8px 9px 9px;
        overflow:hidden;
        border-radius:15px;
        z-index:30;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    .live-feed-chat{ height:88px; }

    .live-feed-message{
        gap:6px;
        margin-bottom:6px;
    }

    .live-feed-message-icon{
        flex-basis:23px;
        width:23px;
        height:23px;
        font-size:12px;
    }

    .live-feed-bubble{
        padding:6px 8px;
        font-size:9px;
    }

    .live-feed-loading,
    .live-feed-empty{
        height:76px;
        font-size:10px;
    }
}

@media (max-width:340px){
    .user-bar button{ font-size:8px; }
}

.stop-button{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}

/* ===== SNAP 20.0: ChatNorris activation codes ===== */
.package-stock {
    margin-top: 10px;
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
    text-align: center;
}

.package-stock.available {
    color: #9afcc1;
    background: rgba(31, 199, 105, .13);
    border: 1px solid rgba(69, 237, 143, .25);
}

.package-stock.empty {
    color: #ffb3b3;
    background: rgba(255, 71, 87, .11);
    border: 1px solid rgba(255, 106, 116, .24);
}

.package-item.unavailable {
    opacity: .72;
}

.package-buy-button:disabled {
    cursor: not-allowed;
    filter: grayscale(.35);
    opacity: .62;
    transform: none !important;
}

.chatnorris-overlay {
    position: fixed;
    inset: 0;
    z-index: 2550;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(5, 8, 18, .88);
    overflow-y: auto;
}

.chatnorris-overlay.hidden {
    display: none;
}

.chatnorris-card {
    position: relative;
    width: min(620px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    border: 1px solid rgba(117, 232, 255, .28);
    border-radius: 24px;
    padding: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 14% 0%, rgba(70, 221, 255, .22), transparent 34%),
        linear-gradient(155deg, #132033 0%, #0d1321 58%, #171126 100%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255,255,255,.08);
}

.chatnorris-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.09);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.chatnorris-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 42px;
}

.chatnorris-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 18px;
    font-size: 30px;
    background: linear-gradient(145deg, #21c8ff, #7757ff);
    box-shadow: 0 12px 30px rgba(54, 170, 255, .28);
}

.chatnorris-title {
    font-size: clamp(24px, 6vw, 34px);
    font-weight: 1000;
    letter-spacing: .04em;
}

.chatnorris-subtitle {
    margin-top: 2px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
}

.chatnorris-note {
    margin-top: 18px;
    padding: 13px 14px;
    border-radius: 14px;
    color: #d8efff;
    background: rgba(48, 163, 230, .1);
    border: 1px solid rgba(84, 196, 255, .18);
    font-size: 13px;
    line-height: 1.45;
}

.chatnorris-message {
    min-height: 22px;
    padding: 10px 2px 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
}

.chatnorris-message.error { color: #ff8e96; }
.chatnorris-message.success { color: #7ff0b1; }

.chatnorris-access-list {
    display: grid;
    gap: 10px;
}

.chatnorris-access-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(255,255,255,.055);
}

.chatnorris-access-item.opened {
    border-color: rgba(89, 236, 158, .22);
    background: rgba(51, 198, 121, .07);
}

.chatnorris-access-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 23px;
    background: rgba(61, 197, 255, .15);
}

.chatnorris-access-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chatnorris-access-copy b {
    font-size: 17px;
}

.chatnorris-access-copy span {
    color: rgba(255,255,255,.58);
    font-size: 11px;
    line-height: 1.35;
}

.chatnorris-access-status {
    width: max-content;
    margin-top: 2px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #7fdfff;
    background: rgba(41, 183, 238, .13);
    font-size: 10px;
    font-weight: 900;
}

.chatnorris-access-status.opened {
    color: #82f0b3;
    background: rgba(47, 213, 123, .13);
}

.chatnorris-open-button,
.chatnorris-packages-button {
    border: 0;
    border-radius: 12px;
    color: #07131d;
    background: linear-gradient(135deg, #64e5ff, #8cf5c2);
    font-weight: 1000;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(58, 220, 255, .19);
}

.chatnorris-open-button {
    padding: 11px 13px;
    font-size: 11px;
    white-space: nowrap;
}

.chatnorris-packages-button {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    font-size: 13px;
}

.chatnorris-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 18px;
    border: 1px dashed rgba(255,255,255,.16);
    border-radius: 16px;
    text-align: center;
    color: rgba(255,255,255,.65);
}

.chatnorris-empty b { color: #fff; }

.admin-chatnorris-stock {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.admin-chatnorris-stock-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 15px;
    border: 1px solid rgba(85, 217, 255, .18);
    border-radius: 15px;
    background: rgba(48, 171, 222, .075);
}

.admin-chatnorris-stock-card > span {
    color: rgba(255,255,255,.62);
    font-size: 11px;
    font-weight: 900;
}

.admin-chatnorris-stock-card > b {
    color: #83edff;
    font-size: 31px;
    line-height: 1;
}

.admin-chatnorris-stock-card > small {
    color: rgba(255,255,255,.55);
}

.admin-chatnorris-stock-card > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.admin-chatnorris-stock-card em {
    padding: 4px 6px;
    border-radius: 7px;
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.055);
    font-size: 9px;
    font-style: normal;
}

.admin-chatnorris-import {
    margin-bottom: 22px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(255,255,255,.035);
}

.admin-chatnorris-import-row {
    display: flex;
    gap: 9px;
    margin-bottom: 9px;
}

.admin-chatnorris-textarea {
    width: 100%;
    min-height: 138px;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    padding: 12px;
    color: #fff;
    background: rgba(5, 10, 20, .52);
    font: 12px/1.5 Consolas, Monaco, monospace;
    outline: none;
}

.admin-chatnorris-textarea:focus {
    border-color: rgba(93, 220, 255, .5);
}

.admin-chatnorris-hint {
    margin-top: 7px;
    color: rgba(255,255,255,.48);
    font-size: 10px;
    line-height: 1.4;
}

.admin-badge.chatnorris-free { color: #7eecae; background: rgba(50, 209, 119, .13); }
.admin-badge.chatnorris-reserved { color: #ffd27d; background: rgba(255, 180, 45, .14); }
.admin-badge.chatnorris-issued { color: #80dfff; background: rgba(48, 177, 235, .14); }
.admin-badge.chatnorris-opened { color: #cf9cff; background: rgba(157, 80, 226, .15); }

@media (max-width: 640px) {
    .chatnorris-card {
        padding: 20px 14px 16px;
        border-radius: 20px;
    }

    .chatnorris-access-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .chatnorris-open-button {
        grid-column: 1 / -1;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .admin-chatnorris-stock {
        grid-template-columns: 1fr;
    }

    .admin-chatnorris-import-row {
        flex-direction: column;
    }
}

/* === SNAP 21.0: пользовательский сценарий заказа ChatNorris === */
.packages-flow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:14px auto 16px;
    max-width:760px;
}

.packages-flow > div{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    background:rgba(255,255,255,.05);
}

.packages-flow b{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    flex:0 0 24px;
    border-radius:50%;
    background:#f6c94f;
    color:#15120a;
    font-size:12px;
    font-weight:1000;
}

.packages-flow span{
    color:#f5f5f5;
    font-size:12px;
    font-weight:900;
    line-height:1.15;
}

.packages-flow i{
    color:rgba(255,255,255,.45);
    font-style:normal;
    font-weight:1000;
}

.package-product-label{
    margin-bottom:6px;
    color:rgba(255,255,255,.58);
    font-size:10px;
    font-weight:1000;
    letter-spacing:.12em;
}

.package-symbols{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:6px;
    margin:7px 0 2px;
}

.package-symbols b{
    color:#fff;
    font-size:28px;
    font-weight:1000;
    line-height:1;
}

.package-symbols span{
    color:rgba(255,255,255,.68);
    font-size:12px;
    font-weight:900;
}

.package-benefits .primary,
.package-benefits .bonus{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:7px 9px;
    border-radius:10px;
    background:rgba(255,255,255,.045);
}

.package-benefits .primary b,
.package-benefits .bonus b{
    color:#fff;
}

.package-benefits .primary span,
.package-benefits .bonus span{
    color:rgba(255,255,255,.66);
    font-size:10px;
    line-height:1.25;
}

.package-benefits .bonus{
    margin-top:6px;
    border:1px solid rgba(246,201,79,.22);
    background:rgba(246,201,79,.07);
}

.payment-row{
    align-items:flex-start;
    gap:14px;
}

.payment-main{
    min-width:0;
    flex:1 1 auto;
}

.payment-order-number{
    margin-bottom:3px;
    color:rgba(255,255,255,.42);
    font-size:9px;
    font-weight:1000;
    letter-spacing:.1em;
}

.payment-access-state{
    margin-top:5px;
    color:rgba(255,255,255,.72);
    font-size:11px;
    font-weight:800;
}

.payment-reservation{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:9px;
    padding:8px 10px;
    border:1px solid rgba(246,201,79,.25);
    border-radius:10px;
    background:rgba(246,201,79,.07);
}

.payment-reservation span{
    color:rgba(255,255,255,.78);
    font-size:10px;
    font-weight:800;
}

.payment-reservation b{
    color:#f6c94f;
    font-size:14px;
    font-weight:1000;
    font-variant-numeric:tabular-nums;
}

.payment-actions{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:10px;
}

.payment-confirm-button,
.payment-cancel-button,
.payment-access-button{
    min-height:34px;
    padding:0 11px;
    border-radius:10px;
    font-size:9px;
    font-weight:1000;
    letter-spacing:.03em;
    text-decoration:none;
}

.payment-confirm-button{
    border:0;
    background:#f6c94f;
    color:#16120a;
}

.payment-cancel-button{
    border:1px solid rgba(255,255,255,.2);
    background:transparent;
    color:rgba(255,255,255,.78);
}

.payment-access-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(92,255,165,.34);
    background:rgba(92,255,165,.09);
    color:#87ffbd;
}

.payment-confirm-button:disabled,
.payment-cancel-button:disabled{
    opacity:.55;
}

.payment-row.cancelled{
    opacity:.68;
}

.cabinet-tabs{
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
}

.cabinet-tabs::-webkit-scrollbar{
    display:none;
}

.cabinet-tab{
    flex:0 0 auto;
    white-space:nowrap;
}

.cabinet-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.cabinet-service-list{
    display:grid;
    gap:9px;
}

.cabinet-service-item{
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:15px;
    background:rgba(255,255,255,.045);
}

.cabinet-service-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    flex:0 0 40px;
    border-radius:12px;
    background:rgba(255,255,255,.07);
    font-size:20px;
}

.cabinet-service-copy{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    flex-direction:column;
    gap:3px;
}

.cabinet-service-copy b{
    overflow:hidden;
    color:#fff;
    font-size:12px;
    font-weight:1000;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.cabinet-service-copy span,
.cabinet-service-copy small{
    color:rgba(255,255,255,.62);
    font-size:10px;
    line-height:1.25;
}

.cabinet-service-copy small{
    color:#f6c94f;
    font-weight:900;
}

.cabinet-service-item > a,
.cabinet-service-item > button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    flex:0 0 auto;
    padding:0 11px;
    border:1px solid rgba(246,201,79,.34);
    border-radius:10px;
    background:rgba(246,201,79,.08);
    color:#f6c94f;
    font-size:9px;
    font-weight:1000;
    text-decoration:none;
}

.cabinet-service-item.order.cancelled{
    opacity:.66;
}

.cabinet-referral-summary{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    margin-bottom:12px;
}

.cabinet-referral-summary > div{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:14px;
    background:rgba(255,255,255,.045);
    text-align:center;
}

.cabinet-referral-summary span{
    color:rgba(255,255,255,.58);
    font-size:9px;
    font-weight:900;
}

.cabinet-referral-summary b{
    color:#fff;
    font-size:22px;
    font-weight:1000;
}

.cabinet-referral-link-wrap{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    padding:10px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:14px;
    background:rgba(255,255,255,.04);
}

.cabinet-referral-link-wrap span{
    color:rgba(255,255,255,.62);
    font-size:10px;
    font-weight:900;
}

.cabinet-referral-link-wrap input{
    min-width:0;
    height:36px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:rgba(0,0,0,.25);
    color:#fff;
    font-size:10px;
}

.cabinet-referral-link-wrap button{
    height:36px;
    padding:0 11px;
    border:0;
    border-radius:10px;
    background:#f6c94f;
    color:#16120a;
    font-size:9px;
    font-weight:1000;
}

@media (max-width: 620px){
    .packages-flow{
        justify-content:flex-start;
        overflow-x:auto;
        padding-bottom:2px;
        scrollbar-width:none;
    }

    .packages-flow::-webkit-scrollbar{
        display:none;
    }

    .packages-flow > div{
        flex:0 0 auto;
    }

    .payment-row{
        flex-direction:column;
    }

    .payment-side{
        width:100%;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
    }

    .payment-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .payment-confirm-button,
    .payment-cancel-button,
    .payment-access-button{
        width:100%;
    }

    .cabinet-section-head{
        align-items:stretch;
        flex-direction:column;
    }

    .cabinet-section-head .cabinet-mini-button{
        width:100%;
    }

    .cabinet-service-item{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .cabinet-service-copy{
        flex-basis:calc(100% - 52px);
    }

    .cabinet-service-item > a,
    .cabinet-service-item > button{
        width:100%;
    }

    .cabinet-referral-link-wrap{
        grid-template-columns:1fr;
    }

    .cabinet-referral-link-wrap button{
        width:100%;
    }
}

/* STEP 22: secure password recovery and prelaunch notices */
.password-change-notice{
    position: relative;
    z-index: 120;
    width: min(680px, calc(100% - 24px));
    margin: 8px auto 4px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid rgba(255, 196, 0, .7);
    border-radius: 12px;
    background: rgba(55, 35, 0, .94);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
    color: #fff2b0;
    font: 900 13px/1.3 Nunito, Arial, sans-serif;
    text-align: center;
}

.password-change-notice.hidden{
    display: none !important;
}

.password-change-notice button{
    flex: 0 0 auto;
    border: 0;
    border-radius: 9px;
    padding: 8px 10px;
    background: #ffd400;
    color: #251b00;
    font: 1000 11px/1 Nunito, Arial, sans-serif;
    cursor: pointer;
}

.admin-password-security{
    margin-top: 12px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(116, 174, 255, .35);
    border-radius: 13px;
    background: rgba(11, 22, 46, .78);
}

.admin-password-security > div{
    display: grid;
    gap: 5px;
}

.admin-password-security b{
    color: #fff;
    font-size: 13px;
}

.admin-password-security span{
    color: rgba(255,255,255,.72);
    font-size: 12px;
}

.admin-password-security strong.success{
    color: #76f0ac;
}

.admin-password-security strong.warning{
    color: #ffd56a;
}

.admin-password-security button,
.admin-temp-password button{
    border: 0;
    border-radius: 9px;
    padding: 9px 11px;
    background: #2d79ff;
    color: white;
    font: 900 11px/1 Nunito, Arial, sans-serif;
    cursor: pointer;
}

.admin-temp-password{
    margin-top: 10px;
    padding: 13px;
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 211, 64, .75);
    border-radius: 13px;
    background: rgba(55, 42, 0, .88);
}

.admin-temp-password.hidden{
    display: none !important;
}

.admin-temp-password b{
    color: #ffe779;
    font-size: 12px;
}

.admin-temp-password code{
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.42);
    color: #fff;
    font-size: 15px;
    letter-spacing: .4px;
    user-select: all;
}

.admin-temp-password span{
    grid-column: 1 / -1;
    color: rgba(255,255,255,.72);
    font-size: 11px;
}

.admin-backup-button{
    background: linear-gradient(180deg, #385fa8, #284a86) !important;
}

@media (max-width: 600px){
    .password-change-notice{
        flex-direction: column;
        gap: 8px;
    }

    .admin-password-security{
        align-items: stretch;
        flex-direction: column;
    }

    .admin-temp-password{
        grid-template-columns: 1fr;
    }

    .admin-temp-password span{
        grid-column: auto;
    }
}


/* STEP 23: LEGAL DOCUMENTS AND CONSENTS */
.auth-check a,
.legal-consent-check a,
.packages-legal-check a,
.cabinet-info-card a{
    color:#8feeff;
    text-decoration:underline;
    text-underline-offset:2px;
}

.legal-consent-overlay{
    position:fixed;
    inset:0;
    z-index:1000003;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    overflow:auto;
    background:rgba(2,2,8,.96);
}

.legal-consent-overlay.hidden{ display:none !important; }

.legal-consent-card{
    width:min(430px, 96vw);
    padding:22px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    background:linear-gradient(180deg, rgba(42,20,61,.99), rgba(8,4,16,.99));
    box-shadow:0 0 35px rgba(255,0,210,.25), 0 0 70px rgba(0,210,255,.12);
    color:#fff;
}

.legal-consent-logo{ display:block; width:155px; max-width:65%; margin:0 auto 12px; }
.legal-consent-title{ text-align:center; font:900 20px 'Nunito',Arial,sans-serif; }
.legal-consent-text{ margin:8px 0 15px; color:rgba(255,255,255,.72); text-align:center; font:900 12px/1.4 'Nunito',Arial,sans-serif; }
.legal-consent-check{ display:flex; gap:10px; align-items:flex-start; margin-top:11px; font:900 12px/1.35 'Nunito',Arial,sans-serif; }
.legal-consent-check input{ width:18px; height:18px; flex:0 0 18px; accent-color:#ec00b8; }
.legal-consent-message{ min-height:19px; margin-top:12px; text-align:center; font:900 12px 'Nunito',Arial,sans-serif; }
.legal-consent-message.error{ color:#ff7e7e; }
.legal-consent-message.success{ color:#8cff9d; }
.legal-consent-button{ width:100%; height:50px; margin-top:9px; border:0; border-radius:25px; background:linear-gradient(#ff55dc,#a5007f); color:#fff; font:900 15px 'Nunito',Arial,sans-serif; cursor:pointer; }

.packages-legal-check{
    display:flex;
    gap:9px;
    align-items:flex-start;
    margin:12px 0 4px;
    padding:11px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:13px;
    background:rgba(0,0,0,.22);
    color:rgba(255,255,255,.78);
    font:900 10px/1.35 'Nunito',Arial,sans-serif;
}
.packages-legal-check input{ width:18px; height:18px; flex:0 0 18px; accent-color:#00d8ff; }



@media (max-width:600px){
    .legal-consent-overlay{ align-items:flex-start; padding-top:18px; }
    .legal-consent-card{ padding:18px 16px; }
}

.auth-policy-note,.legal-policy-note{margin:8px 2px 0;color:rgba(255,255,255,.56);font:900 10px/1.35 'Nunito',Arial,sans-serif}.auth-policy-note a,.legal-policy-note a{color:#8feeff}


/* STEP 23.1: компактное принятие документов и документы внутри кабинета */
.legal-action-note{
    margin:12px 0 4px;
    padding:11px 12px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:13px;
    background:rgba(0,0,0,.22);
    color:rgba(255,255,255,.66);
    font:900 10px/1.45 'Nunito',Arial,sans-serif;
}

.legal-action-note a{
    color:#8feeff;
    text-decoration:underline;
    text-underline-offset:2px;
}

.auth-age-check,
.legal-age-only{
    margin-top:12px;
    padding:11px 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:13px;
    background:rgba(255,255,255,.05);
}

.legal-consent-action-note{
    margin-top:10px;
    text-align:left;
}

.packages-legal-note{
    max-width:760px;
    margin:12px auto 4px;
    text-align:center;
}

.cabinet-link-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.cabinet-legal-seller{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin-bottom:15px;
}

.cabinet-legal-seller > div{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
    padding:12px 13px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:13px;
    background:rgba(255,255,255,.035);
}

.cabinet-legal-seller span{
    color:rgba(255,255,255,.48);
    font-size:9px;
    font-weight:1000;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.cabinet-legal-seller b,
.cabinet-legal-seller a{
    overflow-wrap:anywhere;
    color:#fff;
    font-size:11px;
    line-height:1.35;
    text-decoration:none;
}

.cabinet-legal-seller a{ color:#8feeff; }

.cabinet-legal-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.cabinet-legal-links a{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
    padding:13px 14px;
    border:1px solid rgba(91,222,255,.13);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(32,177,218,.07),rgba(255,40,190,.045));
    text-decoration:none;
}

.cabinet-legal-links b{
    color:#8feeff;
    font-size:11px;
    font-weight:1000;
}

.cabinet-legal-links span{
    color:rgba(255,255,255,.58);
    font-size:10px;
    line-height:1.35;
}

@media (max-width:600px){
    .legal-consent-card{
        width:min(390px,96vw);
    }

    .cabinet-legal-seller,
    .cabinet-legal-links{
        grid-template-columns:1fr;
    }
}

/* SNAP ONE-LINE FEED */
.live-feed-dock-head{display:none!important}
.live-feed-dock{height:70px!important;padding:7px 8px!important}
.live-feed-chat{height:54px!important;overflow:hidden!important;padding:0 2px!important}
.live-feed-message{height:52px!important;margin:0!important;align-items:center!important}
.live-feed-loading,.live-feed-empty{height:52px!important}
@media(max-width:768px){.live-feed-dock{height:60px!important;margin-top:5px!important;padding:6px 7px!important}.live-feed-chat{height:48px!important;overflow:hidden!important;padding:0 1px!important}.live-feed-message{height:48px!important;margin:0!important;gap:5px!important;align-items:center!important}.live-feed-message-icon{flex-basis:22px!important;width:22px!important;height:22px!important;font-size:11px!important}.live-feed-bubble{padding:5px 7px!important;font-size:9px!important;line-height:1.15!important}.live-feed-loading,.live-feed-empty{height:48px!important;font-size:9px!important}}

/* SNAP TALL MOBILE MACHINE */
@media (max-width:768px){
  .game{
    transform:scaleY(1.23)!important;
    transform-origin:top center!important;
    margin-bottom:110px!important;
  }
  .snap-narrow-screen .game{
    transform:scale(var(--snap-game-scale,1)) scaleY(1.23)!important;
    margin-bottom:110px!important;
  }
}


/* SNAP BIG BUTTON TEXT */
@media (max-width:768px){

    button:not(#stopButton):not(.cabinet-close):not(.packages-close):not(.prizes-close):not(.activity-close):not(.referrals-close):not(.daily-reward-close):not(.chatnorris-close):not(.admin-close){
        font-size:11px !important;
        font-weight:900 !important;
    }

    .user-bar button{
        font-size:11px !important;
        letter-spacing:-0.2px !important;
    }

    .auth-tab{
        font-size:13px !important;
    }

    .auth-main-button{
        font-size:17px !important;
    }

    .start-button{
        font-size:19px !important;
    }

    .game-mode-button{
        font-size:12px !important;
    }

    .package-buy-button,
    .hold-package-button,
    .hold-finish-button,
    .payment-access-button,
    .payment-confirm-button,
    .payment-cancel-button,
    .connection-retry-button,
    .claim-button,
    .claim-daily-reward-button,
    .copy-referral-button,
    .chatnorris-open-button,
    .chatnorris-packages-button,
    .legal-consent-button{
        font-size:13px !important;
    }

    .cabinet-tab{
        font-size:11px !important;
    }

    .cabinet-action-grid button span{
        font-size:12px !important;
        line-height:1.15 !important;
    }

    .cabinet-mini-button,
    .cabinet-active-game button,
    .cabinet-form button,
    .cabinet-security-card button,
    .cabinet-link-button{
        font-size:11px !important;
    }
}