*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#090a0d;overscroll-behavior:none}
body{width:100%;height:100%;min-height:100%;margin:0;padding:0;overflow:hidden;background:#090a0d;color:#f4efe5;font-family:Arial,Helvetica,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
button{-webkit-appearance:none;appearance:none;font:inherit;color:inherit;border:0;outline:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
button:focus{outline:none}
button:active{transform:scale(.97)}
#app{width:100%;height:100%;min-height:100%;position:relative;overflow:hidden;background:radial-gradient(circle at 50% -10%,rgba(230,200,145,.11),transparent 34%),radial-gradient(circle at 10% 90%,rgba(150,120,70,.07),transparent 30%),#090a0d}
.screen{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.hidden{display:none!important}

.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle,rgba(231,205,153,.1),transparent 28%),#090a0d}
.loading-orb{width:92px;height:92px;border:1px solid rgba(231,205,153,.5);border-radius:50%;display:grid;place-items:center;font-size:42px;margin-bottom:28px;box-shadow:0 0 60px rgba(231,205,153,.08);animation:orb 2.5s ease-in-out infinite}
.loading-title{font-size:clamp(16px,2vw,24px);letter-spacing:.24em;text-align:center;font-weight:700}
.loading-subtitle{margin-top:10px;color:#88847b;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.loading-bar{width:min(360px,75vw);height:3px;background:#22231f;margin-top:28px;overflow:hidden}
.loading-bar span{display:block;width:0;height:100%;background:#e5c98f;transition:width .15s ease}

.menu-shell{width:min(1180px,100%);height:100%;margin:auto;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,34px)}
.menu-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.eyebrow{color:#938d81;font-size:10px;font-weight:700;letter-spacing:.22em}
h1{margin:8px 0 0;font-size:clamp(30px,5vw,68px);line-height:.9;letter-spacing:-.055em}
h1 span{color:#e5c98f}
.money-card{min-width:150px;padding:16px 20px;border:1px solid rgba(229,201,143,.16);background:rgba(255,255,255,.025)}
.money-card small,.game-stats small{display:block;color:#77736b;font-size:9px;letter-spacing:.18em;margin-bottom:5px}
.money-card strong{font-size:clamp(18px,2vw,26px)}
.menu-main{width:min(820px,100%)}
.progress-card{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);padding:17px 19px}
.progress-top,.progress-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px}
.progress-top{color:#8e8a82;font-size:10px;letter-spacing:.16em}
.progress-top strong{color:#eee8dd}
.progress-track{height:5px;background:#24251f;margin:13px 0}
.progress-track span{display:block;height:100%;width:1%;background:#e5c98f;transition:width .4s ease}
.progress-bottom{color:#68655f;font-size:10px}
.mode-title{margin:20px 0 9px;color:#77736b;font-size:10px;letter-spacing:.17em}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mode-btn{min-height:88px;padding:12px;text-align:left;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);transition:.2s}
.mode-btn.active{border-color:rgba(229,201,143,.55);background:rgba(229,201,143,.07)}
.mode-icon{display:block;font-size:20px;margin-bottom:10px}
.mode-btn b{display:block;font-size:11px;letter-spacing:.08em}
.mode-btn small{display:block;color:#77736b;font-size:9px;margin-top:5px}
.menu-actions{display:grid;grid-template-columns:2fr 1fr 1fr;gap:9px;margin-top:10px}
.primary-btn,.secondary-btn,.reward-btn{min-height:54px;padding:0 18px;font-size:11px;font-weight:700;letter-spacing:.13em;transition:.2s}
.primary-btn{color:#17150f;background:#e5c98f}
.primary-btn:hover{background:#f2dca9}
.secondary-btn{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);color:#c4beb2}
.reward-btn{color:#17150f;background:#d6b76e;margin-bottom:9px}

.game-shell{width:100%;height:100%;min-height:100%;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.game-header{flex:0 0 auto;min-height:56px;display:flex;align-items:center;gap:12px;max-width:1400px;width:100%;margin:auto}
.icon-btn{width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);color:#aaa49a}
.shift-info{min-width:78px}
.shift-info span{display:block;font-size:17px;font-weight:700}
.shift-info small{color:#706c64;font-size:8px;letter-spacing:.13em}
.game-stats{margin-left:auto;display:flex;gap:clamp(12px,2vw,32px)}
.game-stats div{text-align:right}
.game-stats b{font-size:clamp(12px,1.5vw,18px)}

.game-main{width:min(1400px,100%);flex:1 1 auto;min-height:0;margin:auto;display:flex;flex-direction:column;justify-content:center;gap:clamp(7px,1.3vh,16px)}

.event-banner{width:100%;padding:8px 12px;text-align:center;border:1px solid rgba(229,201,143,.3);background:linear-gradient(90deg,rgba(229,201,143,.04),rgba(229,201,143,.11),rgba(229,201,143,.04));color:#e5c98f;font-size:9px;font-weight:700;letter-spacing:.16em;animation:eventPulse 1.4s ease-in-out infinite alternate}

.customer-area{position:relative}
.customer-card{min-height:145px;display:grid;grid-template-columns:auto 1fr minmax(150px,260px);align-items:center;gap:clamp(12px,2vw,28px);padding:clamp(14px,2vw,25px);border:1px solid rgba(229,201,143,.13);background:linear-gradient(120deg,rgba(255,255,255,.035),rgba(255,255,255,.015));position:relative;overflow:hidden}
.customer-card:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(229,201,143,.035),transparent);transform:translateX(-100%);animation:shine 5s linear infinite}
.customer-card.success{animation:success .28s ease}
.customer-card.shake{animation:shake .3s ease}
.customer-avatar{width:72px;height:72px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(229,201,143,.2);background:rgba(229,201,143,.05);font-size:34px}
.customer-line{display:flex;justify-content:space-between;gap:10px;color:#79756c;font-size:9px;letter-spacing:.12em}
.customer-name{margin-top:7px;font-size:clamp(16px,2vw,23px);font-weight:700}
.order-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.order-item{display:flex;align-items:center;gap:5px;min-height:30px;padding:4px 8px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);font-size:10px;transition:.18s}
.order-item.received{border-color:rgba(229,201,143,.55);background:rgba(229,201,143,.08)}
.order-icon{font-size:17px}
.order-count{color:#e5c98f}
.patience-wrap{width:100%}
.patience-label{display:flex;justify-content:space-between;color:#706c64;font-size:9px;letter-spacing:.12em;margin-bottom:7px}
.patience-label b{color:#e5c98f}
.patience{height:7px;background:#24231f;overflow:hidden}
.patience span{display:block;width:100%;height:100%;background:#e5c98f;transition:width .15s linear}

.shelf-title{display:flex;align-items:center;justify-content:space-between;color:#8c887f;font-size:10px;letter-spacing:.18em}
.shelf-title small{color:#595650;font-size:9px;letter-spacing:.06em}
.products{width:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.product{position:relative;min-width:0;min-height:108px;padding:12px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.075);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));overflow:hidden;transition:.18s}
.product:active{transform:scale(.96)}
.product:hover{border-color:rgba(229,201,143,.35);transform:translateY(-2px)}
.product-icon{font-size:clamp(25px,3vw,38px);filter:drop-shadow(0 7px 9px rgba(0,0,0,.35));position:relative;z-index:2}
.product-name{font-size:10px;color:#b5b0a7;position:relative;z-index:2}
.product-price{color:#67635c;font-size:8px;position:relative;z-index:2}
.product.picked{border-color:#e5c98f;animation:picked .18s ease}
.product.hinted{border-color:#e5c98f;box-shadow:0 0 0 1px rgba(229,201,143,.2),0 0 28px rgba(229,201,143,.25);animation:hintPulse .8s ease-in-out infinite alternate}
.product.hinted .product-name{color:#e5c98f}
.product-glow{position:absolute;width:70px;height:70px;border-radius:50%;background:rgba(229,201,143,.04);filter:blur(12px)}

.game-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bonus-btn{min-height:54px;display:flex;align-items:center;gap:10px;text-align:left;padding:8px 13px;border:1px solid rgba(229,201,143,.13);background:rgba(229,201,143,.035)}
.bonus-btn>span{width:30px;height:30px;display:grid;place-items:center;color:#e5c98f;border:1px solid rgba(229,201,143,.2);border-radius:50%;flex:0 0 auto}
.bonus-btn b{display:block;font-size:9px;letter-spacing:.12em}
.bonus-btn small{display:block;color:#66635d;font-size:8px;margin-top:3px}

.hint-status{position:absolute;top:8px;right:8px;z-index:5;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(229,201,143,.35);background:rgba(10,10,9,.92);color:#e5c98f;font-size:9px;letter-spacing:.12em}
.hint-status span:first-child{animation:star 1s infinite}

.overlay{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:rgba(3,4,5,.82);backdrop-filter:blur(16px)}
.modal{width:min(440px,100%);max-height:calc(100dvh - 30px);overflow:hidden;padding:clamp(22px,4vw,38px);text-align:center;border:1px solid rgba(229,201,143,.18);background:radial-gradient(circle at 50% 0,rgba(229,201,143,.08),transparent 45%),#101114;box-shadow:0 30px 100px rgba(0,0,0,.5)}
.wide-modal{width:min(760px,100%)}
.modal-icon,.result-icon{width:64px;height:64px;margin:0 auto 17px;display:grid;place-items:center;border:1px solid rgba(229,201,143,.3);border-radius:50%;color:#e5c98f;font-size:24px}
.result-icon.fail{color:#d77777;border-color:rgba(215,119,119,.35)}
.modal h2{margin:8px 0 20px;font-size:clamp(25px,5vw,38px);letter-spacing:-.04em}
.modal .secondary-btn,.modal .primary-btn{width:100%;margin-top:8px}
.modal-text{color:#858078;font-size:12px;line-height:1.5}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 15px}
.result-stats div{padding:13px 5px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}
.result-stats span{display:block;color:#69655e;font-size:8px;letter-spacing:.12em;margin-bottom:5px}
.result-stats b{font-size:13px}
.close-btn{position:absolute;top:14px;right:14px;width:35px;height:35px;background:rgba(255,255,255,.04);color:#858078;font-size:22px}
.upgrade-list,.achievement-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:60vh;overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin}
.upgrade-card,.achievement-card{display:flex;align-items:center;gap:10px;padding:13px;text-align:left;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}
.upgrade-icon,.achievement-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border:1px solid rgba(229,201,143,.15);color:#e5c98f}
.upgrade-info{min-width:0;flex:1}
.upgrade-info b,.achievement-card b{display:block;font-size:10px;letter-spacing:.06em}
.upgrade-info p,.achievement-card p{margin:5px 0;color:#66635d;font-size:8px;line-height:1.35}
.upgrade-level{color:#e5c98f;font-size:8px}
.buy-btn{min-width:75px;min-height:34px;background:#e5c98f;color:#17150f;font-size:8px;font-weight:700}
.buy-btn:disabled{opacity:.3}
.achievement-card{opacity:.4}
.achievement-card.unlocked{opacity:1;border-color:rgba(229,201,143,.2)}
.achievement-card.unlocked .achievement-icon{background:rgba(229,201,143,.08)}
.toast{position:absolute;left:50%;bottom:max(25px,env(safe-area-inset-bottom));z-index:100;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:11px 16px;border:1px solid rgba(229,201,143,.28);background:rgba(12,13,15,.94);color:#e5c98f;font-size:9px;font-weight:700;letter-spacing:.1em;white-space:nowrap;transition:.25s}
.toast.show{transform:translate(-50%,0);opacity:1}

@keyframes orb{0%,100%{transform:scale(1) rotate(0deg);box-shadow:0 0 40px rgba(229,201,143,.06)}50%{transform:scale(1.06) rotate(8deg);box-shadow:0 0 70px rgba(229,201,143,.16)}}
@keyframes shine{0%{transform:translateX(-100%)}25%,100%{transform:translateX(100%)}}
@keyframes success{50%{transform:scale(1.008);border-color:rgba(229,201,143,.45)}}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@keyframes picked{50%{transform:scale(.94)}}
@keyframes hintPulse{from{box-shadow:0 0 10px rgba(229,201,143,.1)}to{box-shadow:0 0 32px rgba(229,201,143,.38)}}
@keyframes star{50%{transform:rotate(20deg) scale(1.15)}}
@keyframes eventPulse{from{opacity:.65}to{opacity:1}}

@media(max-width:700px){
.menu-shell{justify-content:center}
h1{font-size:clamp(29px,9vw,45px)}
.money-card{min-width:115px;padding:12px}
.money-card strong{font-size:15px}
.mode-grid{grid-template-columns:repeat(3,1fr)}
.mode-btn{min-height:75px;padding:9px}
.mode-icon{font-size:16px;margin-bottom:6px}
.mode-btn b{font-size:8px}
.mode-btn small{font-size:7px}
.menu-actions{grid-template-columns:1fr 1fr}
.menu-actions .primary-btn{grid-column:1/-1}
.customer-card{grid-template-columns:auto 1fr;min-height:130px}
.customer-avatar{width:55px;height:55px;font-size:27px}
.patience-wrap{grid-column:1/-1}
.customer-line{font-size:7px}
.customer-name{font-size:15px}
.products{grid-template-columns:repeat(4,1fr);gap:6px}
.product{min-height:83px;padding:7px 3px}
.product-icon{font-size:26px}
.product-name{font-size:8px}
.product-price{font-size:7px}
.game-footer{grid-template-columns:1fr 1fr}
.bonus-btn{min-height:47px;padding:6px 8px}
.bonus-btn b{font-size:7px}
.bonus-btn small{font-size:6px}
.upgrade-list,.achievement-list{grid-template-columns:1fr;max-height:58vh}
}

@media(max-width:374px){
.menu-shell{padding-left:14px;padding-right:14px;gap:12px}
.menu-header{gap:8px}
.money-card{min-width:98px}
.progress-card{padding:12px}
.progress-bottom{font-size:8px}
.mode-btn{min-height:68px}
.mode-btn small{display:none}
.primary-btn,.secondary-btn,.reward-btn{min-height:47px;font-size:9px}
.game-shell{padding-left:7px;padding-right:7px}
.game-header{gap:6px}
.game-stats{gap:8px}
.game-stats small{font-size:7px}
.game-stats b{font-size:10px}
.customer-card{padding:9px;gap:8px}
.customer-avatar{width:46px;height:46px;font-size:23px}
.order-list{gap:4px}
.order-item{padding:3px 5px;font-size:8px}
.shelf-title small{display:none}
.product{min-height:75px}
.product-icon{font-size:23px}
.event-banner{font-size:7px;padding:6px}
}

@media(max-height:600px) and (orientation:landscape){
.menu-shell{justify-content:flex-start;padding-top:max(8px,env(safe-area-inset-top));gap:8px}
h1{font-size:28px}
.mode-title{margin:8px 0 5px}
.mode-btn{min-height:52px}
.mode-icon{display:none}
.menu-actions{margin-top:5px}
.primary-btn,.secondary-btn{min-height:39px}
.game-main{gap:5px}
.customer-card{min-height:88px;padding:8px 12px;grid-template-columns:auto 1fr minmax(130px,220px)}
.customer-avatar{width:48px;height:48px;font-size:23px}
.customer-name{font-size:13px;margin-top:3px}
.order-list{margin-top:5px}
.order-item{min-height:24px;padding:2px 5px}
.products{grid-template-columns:repeat(6,1fr)}
.product{min-height:57px;padding:3px}
.product-icon{font-size:21px}
.product-name{font-size:7px}
.product-price{display:none}
.bonus-btn{min-height:38px}
.bonus-btn>span{width:23px;height:23px}
.event-banner{padding:4px;font-size:7px}
}

@media(min-width:701px) and (min-height:650px){
.game-main{gap:14px}
.products{grid-template-columns:repeat(6,1fr)}
.product{min-height:120px}
}

@media(min-width:1200px){
.menu-shell{width:min(1200px,92vw)}
.game-main,.game-header{width:min(1500px,92vw)}
.products{grid-template-columns:repeat(6,1fr);gap:12px}
.product{min-height:132px}
.customer-card{min-height:170px}
}

@media(min-width:1800px){
.game-main,.game-header{width:min(1700px,88vw)}
.product{min-height:150px}
.product-icon{font-size:44px}
}

@media(min-width:2500px){
.game-main,.game-header{width:min(1900px,82vw)}
.product{min-height:170px}
.customer-card{min-height:200px}
}

@media(hover:hover){
.primary-btn:hover,.reward-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.secondary-btn:hover,.bonus-btn:hover,.icon-btn:hover{border-color:rgba(229,201,143,.25);background:rgba(255,255,255,.065)}
}

@media(prefers-reduced-motion:reduce){
*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

@supports(padding:max(0px)){
.screen{padding-bottom:env(safe-area-inset-bottom)}
}
@media(max-width:700px){
    #shopOverlay,
    #achievementsOverlay{
        overflow-y:auto;
        overflow-x:hidden;
        align-items:flex-start;
        justify-content:center;
        padding:12px;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
    }

    #shopOverlay .modal,
    #achievementsOverlay .modal{
        width:100%;
        max-width:760px;
        height:auto;
        max-height:none;
        margin:auto 0;
        overflow:visible;
    }

    #shopOverlay .upgrade-list,
    #achievementsOverlay .achievement-list{
        width:100%;
        height:auto;
        max-height:none;
        overflow:visible;
        grid-template-columns:1fr;
    }
}

@media(max-width:400px){
    #shopOverlay,
    #achievementsOverlay{
        padding:8px;
    }

    #shopOverlay .modal,
    #achievementsOverlay .modal{
        padding:20px 14px;
        border-radius:18px;
    }
}

@media(max-height:600px) and (orientation:landscape){
    #shopOverlay,
    #achievementsOverlay{
        align-items:flex-start;
        padding:8px;
    }

    #shopOverlay .modal,
    #achievementsOverlay .modal{
        margin:0 auto;
        padding:20px 18px;
    }
}