/* ================================================================
   tree-styles.css — Billion USDT DApp v5.0
   Mobile-first, GPU-composited, no backdrop-filter on mobile
   ================================================================ */

/* ── TREE SLOTS ── */
.tree-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    will-change: transform;
    contain: layout style;
    position: relative;
    overflow: hidden;
}
.tree-slot.empty {
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.1);
    color: rgba(255,255,255,.2);
}
.tree-slot.filled {
    background: linear-gradient(135deg,rgba(0,242,255,.14),rgba(0,114,255,.14));
    border: 1px solid rgba(0,242,255,.35);
    color: #00f2ff;
    transition: transform .18s ease, border-color .18s ease;
}
@media(hover:hover){
    .tree-slot.filled:hover{
        border-color: rgba(0,242,255,.7);
        box-shadow: 0 0 10px rgba(0,242,255,.2);
        transform: scale(1.06);
    }
}
.tree-slot.filled.purple {
    background: linear-gradient(135deg,rgba(168,85,247,.14),rgba(109,40,217,.14));
    border: 1px solid rgba(168,85,247,.35);
    color: #c084fc;
}
@media(hover:hover){
    .tree-slot.filled.purple:hover{
        border-color: rgba(168,85,247,.7);
        box-shadow: 0 0 10px rgba(168,85,247,.2);
        transform: scale(1.06);
    }
}
.slot-id   { font-size: 9px; font-weight: 800; line-height: 1; }
.slot-empty{ font-size: 15px; opacity: .22; line-height: 1; }

/* ── Disable hover animations on touch ── */
@media(hover:none){
    .tree-slot.filled:hover,
    .tree-slot.filled.purple:hover{ transform:none; box-shadow:none; }
}

/* ── ROADMAP SCROLL ── */
.rscroll{ -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scrollbar-width:none; }
.rscroll::-webkit-scrollbar{ display:none; }
.rcard{ scroll-snap-align:start; }
@media(hover:hover){ .rcard:hover{ transform:translateY(-3px); transition:transform .22s ease; } }
@media(hover:none){ .rcard{ transition:none!important; transform:none!important; } }

/* ── TELEGRAM BLINK BUTTON ── */
.blink-btn {
    background: linear-gradient(90deg,#0088cc,#00c6ff);
    position: relative; overflow: hidden;
    animation: bglow 2s ease-in-out infinite;
}
.blink-btn::after {
    content:''; position:absolute; top:-50%; left:-60%;
    width:25%; height:200%;
    background:rgba(255,255,255,.14);
    transform:skewX(-20deg);
    animation:shimmer 2s infinite;
}
@keyframes bglow{ 0%,100%{box-shadow:0 0 8px rgba(0,136,204,.35)} 50%{box-shadow:0 0 22px rgba(0,198,255,.8)} }
@keyframes shimmer{ 0%{left:-60%} 100%{left:150%} }

/* ── LEVEL CARD ACTIVE GLOW ── */
@keyframes aglow   { 0%,100%{box-shadow:0 0 6px rgba(0,242,255,.1)}  50%{box-shadow:0 0 20px rgba(0,242,255,.3)} }
@keyframes aglow-p { 0%,100%{box-shadow:0 0 6px rgba(168,85,247,.1)} 50%{box-shadow:0 0 20px rgba(168,85,247,.3)} }

/* ── SCROLLBAR (desktop) ── */
@media(min-width:769px){
    ::-webkit-scrollbar{ width:5px; height:5px; }
    ::-webkit-scrollbar-track{ background:rgba(255,255,255,.03); }
    ::-webkit-scrollbar-thumb{ background:rgba(0,242,255,.18); border-radius:3px; }
    ::-webkit-scrollbar-thumb:hover{ background:rgba(0,242,255,.38); }
}