*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#d9d4cc;font-family:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:#1d2230;user-select:none;-webkit-user-select:none;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer;border:0}
#game{position:fixed;inset:0;width:100%;height:100%;display:block}
#bubbles,#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#fx{z-index:15}

/* ---------- world bubbles ---------- */
.bb{position:absolute;left:0;top:0;pointer-events:auto;transform-origin:50% 100%;will-change:transform;white-space:nowrap}
.bb.hide{display:none}
.bub{background:#f4f4f6;border-radius:14px;padding:7px 13px 8px;box-shadow:0 4px 0 rgba(0,0,0,.12),0 8px 18px rgba(0,0,0,.18);text-align:center;font-weight:900;position:relative;line-height:1.1}
.bub:after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:#f4f4f6}
.bub small{display:block;font-size:13px;color:#2a2f3c;font-weight:900}
.bub b{display:block;font-size:20px;margin-top:2px}
.bub b i{font-style:normal;margin-right:5px}
.bub.no b{color:#a0a4ac}
.bub.ok b{color:#14904a}
.bub.deal{background:#fff;animation:pop .5s cubic-bezier(.3,1.8,.5,1) both}
.bub.deal b{font-size:22px;color:#14904a}
.bub.deal:after{border-top-color:#fff}
.bub.gold{background:linear-gradient(#ffe68a,#ffc93c);animation:pulse 1s ease-in-out infinite}
.bub.gold:after{border-top-color:#ffc93c}
.bub.mgr{background:#eef5ff}.bub.mgr:after{border-top-color:#eef5ff}
.bub.exp{background:#fff7e6}.bub.exp:after{border-top-color:#fff7e6}
.chip{background:rgba(29,34,48,.78);color:#fff;border-radius:10px;padding:3px 7px 4px;font-size:11px;font-weight:800;display:flex;align-items:center;gap:5px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.chip .bar{width:34px;height:5px;background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden}
.chip .bar div{height:100%;background:#4ee38a;border-radius:3px}
.chip.idle{background:rgba(190,50,50,.85)}
.chip em{font-style:normal;opacity:.8}
@keyframes pop{from{transform:scale(.3)}to{transform:scale(1)}}
@keyframes pulse{50%{filter:brightness(1.12);box-shadow:0 0 0 6px rgba(255,201,60,.35),0 8px 18px rgba(0,0,0,.2)}}

.hand{position:fixed;font-size:64px;pointer-events:none;z-index:31;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));animation:tap 1.1s ease-in-out infinite;transform-origin:30% 10%}
@keyframes tap{0%,100%{transform:translate(0,0) rotate(-12deg)}45%{transform:translate(-4px,-14px) rotate(-12deg)}60%{transform:translate(0,0) rotate(-12deg) scale(.92)}}
.float{position:absolute;font-weight:900;font-size:18px;color:#14904a;text-shadow:0 2px 0 #fff,0 0 6px #fff;animation:rise 1.3s ease-out forwards;pointer-events:none;white-space:nowrap}
.float.lost{color:#8a8f99;font-size:13px}
@keyframes rise{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-60px)}}
.coin{position:absolute;font-size:22px;pointer-events:none;transition:transform .7s cubic-bezier(.5,-0.3,.7,1),opacity .7s}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud>*{pointer-events:auto}
.top{position:absolute;left:0;right:0;top:0;padding:calc(10px + env(safe-area-inset-top)) 10px 0;display:flex;gap:10px;align-items:flex-start;pointer-events:none}
.top>*{pointer-events:auto}
.card{background:linear-gradient(120deg,#2b2f37,#1d2027 60%,#2e333c);color:#fff;border-radius:14px;padding:9px 16px 10px;min-width:210px;box-shadow:0 8px 20px rgba(0,0,0,.35);position:relative;overflow:hidden}
.card:before{content:"";position:absolute;right:14px;bottom:14px;width:30px;height:20px;background:radial-gradient(circle at 35% 50%,#eb001b 9px,transparent 10px),radial-gradient(circle at 65% 50%,#f79e1b 9px,transparent 10px);opacity:.95}
.card-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;opacity:.85;letter-spacing:.5px}
.card small{display:block;font-size:13px;font-weight:800;margin-top:6px}
.card b{display:block;font-size:30px;font-weight:900;letter-spacing:.5px;line-height:1.05}
.card .rate{font-size:12px;color:#7ee6a6;font-weight:800}
.card.bump b{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.07);color:#b9ffd2}}
.side{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;max-width:330px}
.pill{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);border-radius:12px;padding:6px 10px;font-size:13px;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.15);text-align:left}
.pill i{font-style:normal;font-size:16px}
.pill>div{flex:1;min-width:0}
.pill.leads.warn{background:#ffe2e0;color:#a31d16}
.pill .bar{height:6px;background:#e3e6ea;border-radius:3px;margin-top:3px;overflow:hidden}
.pill .bar div{height:100%;background:linear-gradient(90deg,#3cc46e,#8be06a);width:0}
.pill.camp{background:#2563eb;color:#fff}
.icon{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.92);font-size:18px;box-shadow:0 3px 10px rgba(0,0,0,.15);flex:none}
.top .icon{margin-left:auto}
#toasts{position:absolute;left:50%;top:calc(130px + env(safe-area-inset-top));transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:92%}
.toast{background:rgba(29,34,48,.92);color:#fff;padding:9px 16px;border-radius:12px;font-weight:800;font-size:14px;animation:tin .3s;box-shadow:0 6px 16px rgba(0,0,0,.25);text-align:center}
.toast.good{background:#139250}.toast.gold{background:#d18a00}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}}
.tabs{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));display:flex;gap:4px;background:rgba(255,255,255,.95);padding:5px;border-radius:18px;box-shadow:0 6px 20px rgba(0,0,0,.22);max-width:calc(100% - 16px)}
.tabs button{background:none;border-radius:13px;padding:6px 0 5px;width:62px;font-size:11px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:1px;position:relative;color:#3a4050}
.tabs button i{font-style:normal;font-size:21px;line-height:1.1}
.tabs button.on{background:#1d2230;color:#fff}
.tabs button .dot{position:absolute;top:3px;right:9px;width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px #fff}

/* ---------- sheet ---------- */
#sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(78px + env(safe-area-inset-bottom));width:min(560px,calc(100% - 16px));max-height:min(58vh,560px);background:#fbfbfc;border-radius:20px;box-shadow:0 14px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;z-index:20;animation:sup .22s ease-out}
@keyframes sup{from{opacity:0;transform:translate(-50%,20px)}}
#sheet header{display:flex;align-items:center;gap:10px;padding:12px 12px 8px 16px;border-bottom:1px solid #eceef1}
#sheet header>div{flex:1}
#sheet header b{font-size:19px;font-weight:900;display:block}
#sheet header small{font-size:12.5px;color:#666c78;font-weight:700}
#sheet-body{overflow:auto;padding:10px 12px 14px;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;background:#fff;box-shadow:0 1px 0 #e6e8ec,0 2px 8px rgba(0,0,0,.04);margin-bottom:8px}
.row.dim{opacity:.55}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:23px;flex:none;background:#eef1f5;position:relative}
.ico .lv{position:absolute;bottom:-4px;right:-5px;background:#1d2230;color:#fff;font-size:10px;font-weight:900;border-radius:7px;padding:1px 5px}
.info{flex:1;min-width:0}
.info b{display:block;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info small{display:block;font-size:12px;color:#646a76;font-weight:700;line-height:1.3}
.info small.g{color:#14904a}
.btn{background:#22c55e;color:#fff;font-weight:900;font-size:13px;padding:8px 11px;border-radius:11px;box-shadow:0 3px 0 #15803d;min-width:72px;line-height:1.1}
.btn small{display:block;font-size:10.5px;opacity:.9;font-weight:800}
.btn.alt{background:#3b82f6;box-shadow:0 3px 0 #1d4ed8}
.btn.gray{background:#e5e7eb;color:#4b5563;box-shadow:0 3px 0 #c5c9cf}
.btn:disabled,.btn.off{background:#d6d9de;color:#8b919b;box-shadow:0 3px 0 #bfc3c9;cursor:default}
.btn:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.btns{display:flex;gap:5px}
.note{font-size:12.5px;color:#596070;font-weight:700;padding:4px 6px 10px;line-height:1.4}
.hdr{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.8px;color:#8a909b;margin:10px 4px 6px}
.meter{height:10px;border-radius:5px;background:#e5e8ec;overflow:hidden;margin:4px 0}
.meter div{height:100%;background:linear-gradient(90deg,#3cc46e,#8be06a)}
.meter.red div{background:linear-gradient(90deg,#ef4444,#f97316)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.stat-grid div{background:#fff;border-radius:12px;padding:8px 10px;box-shadow:0 1px 0 #e6e8ec}
.stat-grid small{display:block;font-size:11px;color:#7a808b;font-weight:800}
.stat-grid b{font-size:16px;font-weight:900}
.cand{display:flex;gap:10px;align-items:center}
.av{width:44px;height:44px;border-radius:50%;flex:none;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(0,0,0,.06)}
.av i{position:absolute;left:8px;right:8px;top:7px;height:24px;border-radius:50%}
.av u{position:absolute;left:7px;right:7px;top:4px;height:10px;border-radius:12px 12px 3px 3px}
.av s{position:absolute;left:4px;right:4px;bottom:-12px;height:22px;border-radius:50%}
.tag{display:inline-block;background:#eef2ff;color:#3949ab;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:900;margin-right:4px}
.tag.t{background:#fef3c7;color:#92400e}

/* ---------- modal + title ---------- */
#modal{position:fixed;inset:0;background:rgba(15,18,26,.55);display:grid;place-items:center;z-index:40;padding:16px}
.mcard{background:#fbfbfc;border-radius:22px;padding:20px 18px 16px;width:min(400px,100%);box-shadow:0 20px 50px rgba(0,0,0,.4);text-align:center;animation:pop .35s cubic-bezier(.3,1.5,.5,1);max-height:90vh;overflow:auto}
.mcard h2{margin:4px 0 6px;font-size:22px;font-weight:900}
.mcard p{margin:6px 0 12px;font-size:14px;color:#4b5160;font-weight:700;line-height:1.45}
.mcard .big-ico{font-size:52px;line-height:1}
.mcard .amount{font-size:34px;font-weight:900;color:#14904a;margin:6px 0}
.mcard .col{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.mcard .btn{font-size:16px;padding:12px}
.mcard ul{text-align:left;font-size:14px;font-weight:700;color:#3d4351;padding-left:20px;line-height:1.5;margin:8px 0}
#title{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;z-index:35;background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.35),rgba(20,24,34,.55));padding:20px}
#title .logo{text-align:center;color:#fff;font-weight:900;font-size:clamp(40px,10vw,74px);line-height:.95;letter-spacing:1px;text-shadow:0 5px 0 #1d2230,0 10px 30px rgba(0,0,0,.45)}
#title .logo span{color:#ffd23f}
#title .logo small{display:block;font-size:15px;letter-spacing:4px;text-transform:uppercase;margin-bottom:8px;text-shadow:0 2px 6px rgba(0,0,0,.5)}
#title .logo em{display:block;font-style:normal;font-size:clamp(15px,3.6vw,20px);margin-top:14px;letter-spacing:0;text-shadow:0 2px 8px rgba(0,0,0,.6)}
#title .col{display:flex;flex-direction:column;gap:10px;width:min(300px,90%)}
#title .col button{background:rgba(255,255,255,.95);padding:13px;border-radius:16px;font-weight:900;font-size:16px;box-shadow:0 5px 0 rgba(0,0,0,.25)}
#title .col .primary{background:#22c55e;color:#fff;font-size:22px;box-shadow:0 5px 0 #15803d}
#title .foot{color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.6);margin:0}
#title .foot a{color:#fff}
#ios-install{position:fixed;left:10px;right:10px;bottom:calc(90px + env(safe-area-inset-bottom));background:#1d2230;color:#fff;border-radius:14px;padding:12px 40px 12px 14px;z-index:45;font-size:14px;display:flex;flex-direction:column;gap:3px}
#ios-install i{font-style:normal;font-weight:900}
#ios-install button{position:absolute;right:8px;top:8px;background:none;color:#fff;font-size:16px}
[hidden]{display:none!important}
@media (max-width:520px){
  .card{min-width:0;padding:8px 12px 9px}.card b{font-size:25px}.card:before{display:none}
  .tabs button{width:52px;font-size:10px}.tabs button i{font-size:19px}
  .pill{font-size:12px;padding:5px 8px}
  .bub b{font-size:17px}.bub small{font-size:12px}
  .chip{padding:2px 5px;font-size:10px;gap:3px}.chip .bar{width:22px;height:4px}.chip em{display:none}
}
@media (max-height:500px){#sheet{max-height:62vh}.top{padding-top:6px}}