@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
    --bg:#0b1018;
    --card:rgba(18,24,36,.94);
    --tg:#2aabee;
    --tg-dark:#229ed9;
    --tg-glow:rgba(42,171,238,.32);
    --accent:#22d3a6;
    --text:#f0f4f8;
    --muted:#94a3b8;
    --border:rgba(255,255,255,.09);
    --font:'Outfit',system-ui,sans-serif;
    --tab-h:60px;
    --bar-h:52px;
    --safe-b:env(safe-area-inset-bottom);
    --safe-t:env(safe-area-inset-top);
}

*{margin:0;padding:0;box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    line-height:1.45;
    overscroll-behavior:none;
    -webkit-tap-highlight-color:transparent;
    min-height:100dvh;
}
body.sheet-open{overflow:hidden}

.tg-app{
    min-height:100dvh;
    max-width:100%;
    width:100%;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    position:relative;
}
@media(min-width:520px){
    .tg-app{max-width:480px;box-shadow:0 0 0 1px var(--border),0 24px 80px rgba(0,0,0,.45)}
    body{background:#060a10}
}

.bg-app{
    position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
        radial-gradient(ellipse 70% 50% at 20% 0%,rgba(42,171,238,.18),transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 90%,rgba(34,211,166,.1),transparent 50%);
}

.app-bar{
    position:sticky;top:0;z-index:40;flex-shrink:0;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    min-height:var(--bar-h);
    padding:max(6px,var(--safe-t)) 12px 6px;
    background:rgba(11,16,24,.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
}
.app-brand{display:flex;align-items:center;gap:8px;min-width:0}
.app-logo{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:block;object-fit:cover;box-shadow:0 4px 14px rgba(239,83,80,.25)}
.app-title{font-weight:800;font-size:.95rem;line-height:1.15}
.app-title small{display:block;font-size:.62rem;font-weight:600;color:var(--muted)}
.app-bar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.app-login{
    padding:8px 12px;border-radius:999px;border:1px solid var(--border);
    background:rgba(255,255,255,.04);color:var(--text);text-decoration:none;
    font-size:.76rem;font-weight:700;min-height:36px;display:flex;align-items:center;
}
.app-coins{font-size:.7rem;font-weight:700;color:var(--accent);white-space:nowrap}

.app-main{
    flex:1;display:flex;flex-direction:column;min-height:0;
    position:relative;z-index:1;
    padding:12px 12px calc(var(--tab-h) + var(--safe-b) + 8px);
    overflow:hidden;
}

.tab-panel{display:none;flex-direction:column;min-height:0;animation:fadeIn .2s ease}
.tab-panel.on{display:flex;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tab-panel-fill.on{overflow:hidden}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.hero-card{padding:18px 16px;border-radius:16px;background:var(--card);border:1px solid var(--border);margin-bottom:12px;flex-shrink:0}
.hero-card h1{font-size:1.35rem;font-weight:800;line-height:1.15;margin-bottom:6px}
.hero-card h1 span{color:var(--tg)}
.hero-card p{color:var(--muted);font-size:.88rem;margin-bottom:12px}

.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat-box{padding:12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--border);text-align:center}
.stat-box strong{display:block;font-size:1.25rem;color:var(--tg)}
.stat-box span{font-size:.7rem;color:var(--muted)}

.section-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:14px 0 8px;font-weight:700;flex-shrink:0}

.link-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.link-grid-3{grid-template-columns:repeat(3,1fr)}
.link-tile{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    padding:14px 8px;border-radius:14px;background:var(--card);
    border:1px solid var(--border);text-decoration:none;color:var(--text);
    font-size:.76rem;font-weight:700;min-height:80px;touch-action:manipulation;
}
.link-tile .ico{font-size:1.45rem}
.link-tile-btn{border:none;cursor:pointer;font-family:inherit}
.link-tile:active{transform:scale(.97);background:rgba(42,171,238,.1)}

.feed-list{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.feed-item{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--border);font-size:.78rem}
.feed-item strong{color:var(--tg)}
.muted,.feed-item.muted{color:var(--muted);font-size:.82rem}
.center{text-align:center;padding:16px 8px}

/* Chips / scroll */
.chip-scroll{
    display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:0;
}
.chip-scroll::-webkit-scrollbar{display:none}
.chip{
    flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
    padding:8px 14px;border-radius:999px;border:1px solid var(--border);
    background:rgba(255,255,255,.04);color:var(--muted);
    font-family:inherit;font-size:.76rem;font-weight:700;cursor:pointer;min-height:40px;
}
.chip img{border-radius:6px}
.chip.on{background:rgba(42,171,238,.15);color:var(--tg);border-color:rgba(42,171,238,.35)}

.sub-tabs,.seg-tabs{display:flex;gap:6px;margin-bottom:10px;flex-shrink:0}
.sub-tab,.seg-tab{
    flex:1;padding:10px 8px;border-radius:10px;border:1px solid var(--border);
    background:rgba(255,255,255,.03);color:var(--muted);font-family:inherit;
    font-weight:700;font-size:.76rem;cursor:pointer;min-height:44px;
}
.sub-tab.on,.seg-tab.on{background:rgba(42,171,238,.15);color:var(--tg);border-color:rgba(42,171,238,.35)}

.seg-pane,.shop-pane,.trade-pane{display:none;flex-direction:column;min-height:0}
.seg-pane.on,.shop-pane.on,.trade-pane.on{display:flex;flex:1}

/* Shop */
.shop-card{
    padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--border);
    margin-bottom:8px;border-left:3px solid var(--card-color,var(--tg));touch-action:manipulation;
}
.shop-card-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.shop-ico{font-size:1.35rem}
.shop-card-top strong{display:block;font-size:.92rem}
.shop-card-top small{color:var(--muted);font-size:.7rem}
.shop-card-desc{font-size:.78rem;color:var(--muted);margin-bottom:8px;line-height:1.4}
.shop-foot{display:flex;align-items:center;justify-content:space-between}
.shop-price{font-weight:800;color:var(--accent);font-size:.95rem}
.shop-tap{font-size:.72rem;color:var(--tg);font-weight:700}

/* Servers */
.server-list{display:flex;flex-direction:column;gap:10px}
.server-card-rich{
    padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--border);
    border-top:3px solid var(--srv-color,var(--accent));
}
.server-card-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.server-logo-mini{width:44px;height:44px;border-radius:11px;object-fit:cover;flex-shrink:0}
.server-info{flex:1;min-width:0}
.server-info strong{display:block;font-size:.9rem}
.server-info small{color:var(--muted);font-size:.72rem}
.server-badge{font-size:.65rem;font-weight:800;padding:4px 8px;border-radius:6px}
.server-badge.on{background:rgba(34,197,94,.15);color:#4ade80}
.server-badge.off{background:rgba(100,116,139,.15);color:var(--muted)}
.server-desc{font-size:.78rem;color:var(--muted);margin-bottom:8px;line-height:1.4}
.server-meta-row{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-bottom:10px}
.server-actions-row{display:flex;gap:8px}
.mob-loading{color:var(--muted);padding:16px;text-align:center;font-size:.85rem}

/* Rules accordion */
.mob-search{
    width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);
    background:rgba(255,255,255,.04);color:var(--text);font-family:inherit;
    font-size:16px;margin-bottom:10px;flex-shrink:0;
}
.rules-acc{
    border:1px solid var(--border);border-radius:12px;margin-bottom:8px;
    background:rgba(255,255,255,.02);overflow:hidden;
}
.rules-acc summary{
    padding:12px 14px;font-weight:700;font-size:.85rem;cursor:pointer;
    list-style:none;display:flex;align-items:center;justify-content:space-between;
}
.rules-acc summary::-webkit-details-marker{display:none}
.rules-acc summary::after{content:'▾';color:var(--muted)}
.rules-acc[open] summary::after{transform:rotate(180deg)}
.rules-acc ul{padding:0 14px 12px 28px}
.rule-li{font-size:.8rem;line-height:1.45;margin-bottom:6px;color:var(--text)}

.team-list{display:flex;flex-direction:column;gap:8px}
.team-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--border)}
.team-av{width:44px;height:44px;border-radius:12px;object-fit:cover;flex-shrink:0}
.team-av.ph{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);font-size:1.2rem}
.team-card strong{display:block;font-size:.88rem}
.team-card small{color:var(--muted);font-size:.72rem}

/* Chat — full height mobile */
#tab-chat.tab-panel-fill.on{
    display:flex;flex-direction:column;
    height:calc(100dvh - var(--bar-h) - var(--tab-h) - var(--safe-b) - 24px);
    max-height:calc(100dvh - var(--bar-h) - var(--tab-h) - var(--safe-b) - 24px);
    overflow:hidden;padding-bottom:0;
}
.chat-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-shrink:0}
.chat-select,.mob-select{
    flex:1;padding:10px 12px;border-radius:11px;border:1px solid var(--border);
    background:rgba(255,255,255,.04);color:var(--text);font-family:inherit;font-size:16px;min-height:44px;
}
.chat-nick-btn{
    padding:8px 10px;border-radius:10px;border:1px solid var(--border);
    background:rgba(255,255,255,.04);color:var(--tg);font-family:inherit;
    font-size:.72rem;font-weight:700;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-hint{font-size:.68rem;color:var(--muted);margin-bottom:6px;flex-shrink:0}
.chat-messages{
    flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    display:flex;flex-direction:column;gap:8px;
    padding:10px;border-radius:14px;background:rgba(0,0,0,.2);border:1px solid var(--border);
    margin-bottom:8px;
}
.chat-empty{text-align:center;color:var(--muted);font-size:.82rem;padding:24px 12px;margin:auto}
.chat-msg{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);max-width:88%}
.chat-msg.mine{align-self:flex-end;background:rgba(42,171,238,.12)}
.chat-msg.from-game:not(.mine){align-self:flex-start;border-left:3px solid #22c55e;background:rgba(34,197,94,.1)}
.chat-msg.from-app:not(.mine){border-left:3px solid rgba(42,171,238,.35)}
.chat-msg-head{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--muted);margin-bottom:3px}
.chat-msg-head strong{color:var(--text);font-size:.76rem}
.chat-msg-head span{margin-left:auto}
.chat-msg-body{font-size:.84rem;line-height:1.4;word-break:break-word}
.chat-form{display:flex;gap:8px;flex-shrink:0;padding-bottom:max(4px,var(--safe-b))}
.chat-form input,.mob-input{
    flex:1;padding:12px 14px;border-radius:12px;border:1px solid var(--border);
    background:rgba(255,255,255,.05);color:var(--text);font-family:inherit;font-size:16px;min-height:48px;
}
.chat-send{
    width:48px;min-height:48px;border:none;border-radius:12px;cursor:pointer;flex-shrink:0;
    background:linear-gradient(135deg,var(--tg),var(--tg-dark));color:#fff;font-size:1.1rem;
}

/* Trade */
.trade-mini-bar{margin-bottom:8px;flex-shrink:0}
.trade-mini-bar input{
    width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);
    background:rgba(255,255,255,.04);color:var(--text);font-family:inherit;font-size:16px;min-height:44px;
}
.trade-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;flex-shrink:0}
.trade-list{display:flex;flex-direction:column;gap:8px;padding-bottom:72px}
.trade-card-mini{
    display:flex;gap:10px;align-items:center;padding:12px;border-radius:14px;
    background:var(--card);border:1px solid var(--border);touch-action:manipulation;
}
.trade-card-mini.tap:active{transform:scale(.98);background:rgba(42,171,238,.08)}
.tcm-icon{font-size:1.5rem;flex-shrink:0}
.tcm-body{min-width:0;flex:1}
.tcm-body strong{display:block;font-size:.86rem;margin-bottom:2px}
.tcm-body small{display:block;color:var(--muted);font-size:.7rem;margin-bottom:3px}
.tcm-price{font-weight:800;color:var(--accent);font-size:.8rem}
.tcm-arrow{color:var(--muted);font-size:1.2rem;flex-shrink:0}
.trade-card-mini{flex-wrap:wrap}
.trade-deal-btns{display:flex;gap:6px;width:100%;margin-top:4px;padding-left:42px}
.trade-deal-btns .btn-mob.sm{flex:1;padding:8px 10px;font-size:.75rem;min-height:36px}
.deal-badge{color:#fbbf24;font-size:.72rem;font-weight:700}
.trade-deal-progress{width:100%;padding-left:42px;margin-top:4px}
.tdp-steps{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:4px}
.tdp-step{font-size:.62rem;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--muted)}
.tdp-step.done{background:rgba(34,211,166,.15);color:#22d3a6}
.tdp-step.on{background:rgba(245,158,11,.2);color:#fbbf24}
.tdp-label{display:block;color:var(--muted);font-size:.68rem;line-height:1.3}
.tdp-escrow{display:block;color:#22d3a6;font-size:.68rem;margin-top:2px}
.deal-seller{background:rgba(34,211,166,.15)!important;color:#22d3a6!important}
.deal-buyer{background:rgba(245,158,11,.15)!important;color:#fbbf24!important}
.deal-cancel{background:rgba(239,68,68,.12)!important;color:#f87171!important}
.fab-trade{
    position:fixed;right:max(16px,calc(50% - 240px + 16px));
    bottom:calc(var(--tab-h) + var(--safe-b) + 12px);
    width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;z-index:35;
    background:linear-gradient(135deg,#f59e0b,#d97706);color:#1c1208;font-size:1.5rem;font-weight:300;
    box-shadow:0 8px 24px rgba(245,158,11,.35);
}
@media(min-width:520px){.fab-trade{right:calc(50% - 240px + 16px)}}

/* Profile / More */
.profile-card{
    display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;
    background:var(--card);border:1px solid var(--border);margin-bottom:12px;flex-shrink:0;
}
.profile-avatar{
    width:48px;height:48px;border-radius:14px;flex-shrink:0;overflow:hidden;
    background:linear-gradient(145deg,var(--tg),var(--tg-dark));
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;
}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-info strong{display:block;font-size:.95rem}
.profile-info small{color:var(--muted);font-size:.74rem}

.rewards-card,.tg-link-card{
    padding:14px;border-radius:14px;background:rgba(42,171,238,.08);
    border:1px solid rgba(42,171,238,.2);margin-bottom:12px;flex-shrink:0;
}
.rewards-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.rewards-sub{font-size:.78rem;color:var(--muted);margin-bottom:10px}
.code-out{font-size:.78rem;color:var(--accent);margin-top:8px;word-break:break-all}

.btn-tg{
    display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
    padding:14px;border-radius:13px;border:none;cursor:pointer;margin-top:12px;
    background:linear-gradient(135deg,var(--tg),var(--tg-dark));
    color:#fff;text-decoration:none;font-weight:800;font-size:.9rem;
    box-shadow:0 8px 24px var(--tg-glow);min-height:48px;
}
.btn-tg svg{width:20px;height:20px;fill:currentColor}
.btn-tg:active{transform:scale(.98)}

.btn-mob{
    display:inline-flex;align-items:center;justify-content:center;
    padding:12px 16px;border-radius:12px;border:1px solid var(--border);
    background:rgba(255,255,255,.05);color:var(--text);
    font-family:inherit;font-weight:700;font-size:.82rem;cursor:pointer;
    text-decoration:none;min-height:44px;touch-action:manipulation;
}
.btn-mob.primary{background:linear-gradient(135deg,var(--accent),#0d9488);color:#042f2e;border-color:transparent}
.btn-mob.sm{flex:1;padding:10px;font-size:.76rem;min-height:40px}
.btn-mob:disabled{opacity:.5;pointer-events:none}
.btn-mob:active{transform:scale(.97)}

.refresh-btn{
    margin-top:8px;width:100%;padding:12px;border-radius:11px;
    border:1px solid var(--border);background:rgba(255,255,255,.04);
    color:var(--muted);font-family:inherit;font-weight:600;font-size:.82rem;cursor:pointer;min-height:44px;
}

/* Bottom nav */
.app-tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    max-width:100%;margin:0 auto;
    display:grid;grid-template-columns:repeat(6,1fr);
    min-height:var(--tab-h);
    padding-bottom:var(--safe-b);
    background:rgba(11,16,24,.96);
    backdrop-filter:blur(16px);
    border-top:1px solid var(--border);
}
@media(min-width:520px){.app-tabs,.fab-trade{max-width:480px}}

.app-tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    border:none;background:transparent;color:var(--muted);
    font-family:inherit;font-size:.52rem;font-weight:700;cursor:pointer;
    padding:6px 2px;min-height:var(--tab-h);touch-action:manipulation;
}
.app-tab .ico{font-size:1.2rem;line-height:1}
.app-tab .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-tab.on{color:var(--tg)}
.app-tab.on .ico{filter:drop-shadow(0 0 6px var(--tg-glow))}

/* Bottom sheets */
.sheet{
    position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;
}
.sheet[hidden]{display:none!important}
.sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.sheet-panel{
    position:relative;width:100%;max-width:480px;max-height:85dvh;overflow-y:auto;
    padding:8px 16px calc(20px + var(--safe-b));
    background:#121824;border-radius:20px 20px 0 0;border:1px solid var(--border);
    animation:slideUp .25s ease;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
.sheet-handle{width:36px;height:4px;border-radius:99px;background:rgba(255,255,255,.2);margin:4px auto 12px}
.sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sheet-head span{font-size:1.6rem}
.sheet-head h3{font-size:1.05rem}
.sheet-sub{font-size:.8rem;color:var(--muted);margin-bottom:10px;line-height:1.4}
.sheet-price{font-size:1.1rem;font-weight:800;color:var(--accent);margin-bottom:12px}
.sheet-list{padding-left:18px;margin-bottom:14px;font-size:.82rem;line-height:1.5;color:var(--muted)}
.sheet-list li{margin-bottom:4px}
.sheet-panel .btn-mob{width:100%}

.toast{
    position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--safe-b) + 16px);
    transform:translateX(-50%) translateY(12px);opacity:0;pointer-events:none;
    z-index:90;padding:10px 16px;border-radius:12px;
    background:rgba(18,24,36,.96);border:1px solid var(--border);
    font-size:.82rem;font-weight:600;transition:.25s ease;max-width:90%;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.in-telegram .install-banner{display:none!important}

@media(max-width:360px){
    .app-tab .lbl{display:none}
    .app-tab .ico{font-size:1.35rem}
}