/* ============================================
   GRAMIO HUB — CSS
   TON-inspired glassmorphism design system
   ============================================ */

:root{
    --bg:#011135;
    --bg2:#021a54;
    --card:rgba(0,30,80,0.55);
    --border:rgba(77,184,255,0.12);
    --border-hover:rgba(77,184,255,0.28);
    --cyan:#4DB8FF;
    --cyan2:#0098EA;
    --gold:#FFD166;
    --glow:rgba(0,152,234,0.35);
    --text:#f0f8ff;
    --text-2:rgba(180,210,240,0.75);
    --text-3:rgba(120,160,200,0.55);
    --radius:16px;
    --radius-sm:10px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;user-select:none;touch-action:pan-y;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}

/* ========== BG EFFECTS ========== */
.bg-effects{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.grid-overlay{
    position:absolute;inset:0;
    background-image:linear-gradient(rgba(77,184,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(77,184,255,0.04) 1px,transparent 1px);
    background-size:32px 32px;
}
.glow-orb{position:absolute;border-radius:50%;filter:blur(80px)}
.orb-a{width:320px;height:320px;top:-60px;left:-80px;background:rgba(0,100,200,0.18)}
.orb-b{width:260px;height:260px;bottom:60px;right:-60px;background:rgba(0,152,234,0.12)}
.orb-c{width:180px;height:180px;top:40%;left:50%;transform:translate(-50%,-50%);background:rgba(77,184,255,0.06)}
.beam{position:absolute;width:1px;background:linear-gradient(to bottom,transparent,rgba(77,184,255,0.15),transparent);top:0;bottom:0}
.beam-1{left:25%}.beam-2{left:75%}

/* ========== APP SHELL ========== */
#app{
    position:relative;z-index:1;
    display:flex;flex-direction:column;
    justify-content:space-between;
    height:100%;
    padding:0 16px;
    max-width:480px;margin:0 auto;
}

/* ========== GAME SECTION ========== */
.game-section{
    display:flex;flex-direction:column;gap:10px;
    padding-top:12px;
}

.nav{
    display:flex;align-items:center;justify-content:space-between;
}
.nav-brand{display:flex;align-items:center;gap:8px}
.nav-gem{
    width:32px;height:32px;border-radius:9px;overflow:hidden;
    border:1px solid var(--border);
}
.nav-logo-img{width:100%;height:100%;object-fit:cover}
.nav-name{font-size:16px;font-weight:800;letter-spacing:-.5px;color:var(--text)}
.nav-avatar{
    width:34px;height:34px;border-radius:50%;
    background:var(--card);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}
.nav-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.nav-letter{font-size:14px;font-weight:700;color:var(--cyan)}

/* ========== LANG SWITCHER ========== */
.lang-switcher{display:flex;gap:3px;align-items:center;margin:0 6px}
.lang-btn{
    padding:4px 8px;border-radius:7px;
    font-size:10px;font-weight:700;letter-spacing:.3px;
    color:var(--text-3);
    background:transparent;
    border:1px solid rgba(77,184,255,0.1);
    transition:all .18s;cursor:pointer;
    line-height:1;
}
.lang-btn:hover:not(.active){
    color:var(--text-2);
    border-color:rgba(77,184,255,0.25);
}
.lang-btn.active{
    color:var(--cyan);
    background:rgba(77,184,255,0.12);
    border-color:var(--border-hover);
}

/* ========== HERO ========== */
.hero{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    text-align:center;gap:0;
}
.hero-mascot-wrap{
    position:relative;width:108px;height:108px;
    margin-bottom:12px;
}
.mascot-ring{
    position:absolute;inset:-10px;border-radius:50%;
    border:1px solid rgba(77,184,255,0.2);
    animation:ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.04)}}
.hero-mascot{
    width:100%;height:100%;object-fit:contain;border-radius:50%;
    filter:drop-shadow(0 0 24px var(--glow));
    animation:mascotFloat 3.5s ease-in-out infinite;
}
@keyframes mascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.hero-title{margin-bottom:12px}
.title-gram{
    display:block;font-size:32px;font-weight:900;letter-spacing:-1px;
    color:#fff;
    text-shadow:0 0 28px rgba(0,152,234,0.55), 0 2px 6px rgba(0,0,0,0.5);
    line-height:1.2;
}
.title-game{
    display:block;font-size:15px;font-weight:700;
    color:var(--cyan);letter-spacing:.5px;margin-top:2px;
    opacity:.9;
}
.title-sub{
    display:block;font-size:13px;font-weight:500;
    color:var(--text-2);letter-spacing:2px;margin-top:3px;
}
.title-by{
    display:block;font-size:10px;font-weight:500;
    color:var(--text-3);letter-spacing:.3px;margin-top:6px;
}

.hero-stats{display:flex;gap:8px}
.hs-chip{
    display:flex;align-items:center;gap:5px;
    background:var(--card);border:1px solid var(--border);
    border-radius:20px;padding:5px 12px;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.hs-emoji{font-size:13px}
.hs-val{font-size:13px;font-weight:700;color:var(--text)}

/* ========== CTA ========== */
.cta-section{flex-shrink:0;}
.cta-btn{
    display:block;position:relative;overflow:hidden;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(0,100,200,0.5),rgba(0,152,234,0.3));
    border:1px solid var(--border-hover);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    transition:all .15s;
}
.cta-btn:active{transform:scale(.97)}
.cta-btn::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(77,184,255,0.08),transparent);
    opacity:0;transition:opacity .2s;
}
.cta-btn:hover::before{opacity:1}
.cta-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 16px;gap:12px;
}
.cta-left{display:flex;flex-direction:column;gap:3px}
.cta-title-row{display:flex;align-items:center;gap:8px}
.cta-game-name{font-size:16px;font-weight:800;color:var(--text)}
.cta-live-badge-inline{
    display:flex;align-items:center;gap:4px;
    background:#00e05a;
    border-radius:20px;padding:2px 7px;
    font-size:9px;font-weight:800;color:#06172d;letter-spacing:.5px;
    box-shadow:0 0 10px rgba(0,224,90,0.4);
}
.cta-dot{width:5px;height:5px;border-radius:50%;background:#06172d;animation:dotBlink 1.4s ease-in-out infinite}
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.4}}
.cta-game-desc{font-size:11px;font-weight:500;color:var(--text-2)}
.cta-play-circle{
    width:42px;height:42px;border-radius:50%;
    background:linear-gradient(135deg,var(--cyan2),var(--cyan));
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;color:#fff;
    box-shadow:0 0 18px rgba(0,152,234,0.4);
}

/* ========== QUICK ACTIONS ========== */
.quick-actions{
    display:flex;gap:8px;
    margin-top:6px;
}
.qa-btn{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:12px 8px;border-radius:var(--radius);
    background:var(--card);border:1px solid var(--border);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transition:all .15s;
}
.qa-btn:active{transform:scale(.94);border-color:var(--border-hover)}
.qa-disabled{opacity:.5;pointer-events:none}
.qa-icon{font-size:20px}
.qa-label{font-size:10px;font-weight:600;color:var(--text-2);letter-spacing:.3px}

/* ========== TOURNAMENT BANNER — PILL ========== */
.trn-banner{
    display:flex;align-items:center;gap:7px;
    width:100%;padding:9px 14px;border-radius:30px;
    background:linear-gradient(90deg,rgba(255,215,0,0.07),rgba(0,20,50,0.4));
    border:1px solid rgba(255,215,0,0.2);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    cursor:pointer;position:relative;overflow:hidden;
    transition:border-color .18s, box-shadow .18s, transform .12s;
    box-shadow:0 2px 16px rgba(255,215,0,0.05);text-align:left;
}
.trn-banner::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent 30%,rgba(255,215,0,0.04) 50%,transparent 70%);
    animation:pillSweep 3.5s ease-in-out infinite;pointer-events:none;
}
@keyframes pillSweep{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.trn-banner:hover{border-color:rgba(255,215,0,0.38);box-shadow:0 4px 24px rgba(255,215,0,0.1);transform:translateY(-1px)}
.trn-banner:active{transform:scale(.97)}
.trn-banner-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:#00e05a;box-shadow:0 0 7px rgba(0,224,90,0.8);animation:dotBlink 1.1s ease-in-out infinite}
.trn-banner-text{font-size:9px;font-weight:800;letter-spacing:1.4px;color:#00e05a;text-transform:uppercase;flex-shrink:0}
.trn-banner-sep{color:rgba(255,255,255,0.2);font-size:11px;flex-shrink:0}
.trn-banner-name{font-size:12px;font-weight:700;color:rgba(255,215,0,0.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;letter-spacing:-.1px}
.trn-banner-chevron{font-size:16px;color:rgba(255,215,0,0.4);flex-shrink:0;transition:transform .18s,color .18s;font-weight:300}
.trn-banner:hover .trn-banner-chevron{transform:translateX(3px);color:rgba(255,215,0,0.8)}

/* Tournament status state styles */
.trn-banner--upcoming .trn-banner-dot { background:#FFD166; box-shadow:0 0 7px rgba(255,209,102,0.8); }
.trn-banner--upcoming .trn-banner-text { color:#FFD166; }
.trn-banner--ended .trn-banner-dot { display:none; }
.trn-banner--ended .trn-banner-text { color:var(--text-3); }


/* ============================================================
   TOURNAMENT SHEET
   ============================================================ */
.tm-backdrop{position:fixed;inset:0;z-index:200;background:rgba(2,8,28,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:tmF .18s ease}
@keyframes tmF{from{opacity:0}to{opacity:1}}
.tm-backdrop.hidden,.tm-sheet.hidden{display:none}
.tm-sheet{
    position:fixed;bottom:0;left:0;right:0;z-index:201;
    max-width:480px;margin:0 auto;height:88vh;
    display:flex;flex-direction:column;
    background:linear-gradient(175deg, #0c1a33 0%, #070e20 35%, #050b18 100%);
    border:1px solid rgba(255,209,102,0.1);border-bottom:none;
    border-radius:20px 20px 0 0;overflow:hidden;
    box-shadow:0 -12px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,209,102,0.05);
}
.tm-sheet::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;background:linear-gradient(90deg,transparent 5%,rgba(255,209,102,.35) 50%,transparent 95%);pointer-events:none}
.tm-sheet::after{content:'';position:absolute;top:0;left:0;right:0;height:180px;z-index:0;background:radial-gradient(ellipse at 50% -20%, rgba(255,209,102,0.06) 0%, transparent 70%);pointer-events:none}
.tm-sheet:not(.hidden){animation:tmU .26s cubic-bezier(.15,.85,.2,1)}
@keyframes tmU{from{transform:translateY(45%);opacity:0}to{transform:translateY(0);opacity:1}}
.tm-pill{width:32px;height:3px;border-radius:2px;background:rgba(255,209,102,.15);margin:10px auto 0;flex-shrink:0}

/* head */
.tm-head{display:flex;align-items:center;padding:12px 16px 0;flex-shrink:0}
.tm-live{display:flex;align-items:center;gap:4px;flex-shrink:0;width:50px}
.tm-dot{width:5px;height:5px;border-radius:50%;background:#00e05a;box-shadow:0 0 6px rgba(0,224,90,.7);animation:dB 1.1s ease-in-out infinite;flex-shrink:0}
@keyframes dB{0%,100%{opacity:1}50%{opacity:.3}}
.tm-live span:last-child{font-size:7px;font-weight:800;letter-spacing:1.5px;color:#00e05a;text-transform:uppercase}
.tm-hcenter{flex:1;text-align:center}
.tm-title{display:block;font-size:15px;font-weight:900;color:var(--text);letter-spacing:-.3px;line-height:1}
.tm-sub{display:block;font-size:7.5px;font-weight:600;color:var(--text-3);letter-spacing:1.2px;text-transform:uppercase;margin-top:2px}
.tm-x{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--border);color:var(--text-3);transition:all .15s;flex-shrink:0}
.tm-x:hover{background:rgba(77,184,255,.1);color:var(--text);border-color:var(--border-hover)}

/* ═══ HERO — full-width redesign ═══ */
.tm-hero-full {
    margin: 10px 16px 0;
    flex-shrink: 0;
    background: linear-gradient(160deg, rgba(255,209,102,0.06) 0%, rgba(10,20,50,0.4) 100%);
    border: 1px solid rgba(255,209,102,0.15);
    border-radius: var(--radius);
    padding: 14px 16px 12px;
    position: relative;
    overflow: hidden;
}
.tm-hero-full::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, rgba(255,209,102,.5) 50%, transparent 95%);
}
.tm-hero-full::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,209,102,0.06) 0%, transparent 60%);
    pointer-events: none;
}

/* Countdown section */
.tm-cd-section {
    text-align: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.tm-cd-label {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 8px;
}
.tm-ht-clock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.tm-clock-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 42px;
}
.tm-clock-num {
    font-size: 28px;
    font-weight: 900;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 0 20px rgba(255,209,102,0.4), 0 0 40px rgba(255,209,102,0.15), 0 2px 4px rgba(0,0,0,0.5);
    letter-spacing: -1px;
}
.tm-clock-lbl {
    font-size: 7px;
    font-weight: 800;
    color: rgba(255,209,102,0.4);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.tm-clock-sep {
    font-size: 20px;
    font-weight: 900;
    color: rgba(255,209,102,0.25);
    margin: 0 1px;
    margin-bottom: 10px;
    line-height: 1;
}
.tm-ended {
    display: flex; align-items: center; justify-content: center;
    gap: 5px; padding: 6px; font-size: 13px;
}
.tm-ended-t { font-weight: 800; color: var(--gold); }

/* Prize row: pool centered + badges below */
.tm-pool-center {
    text-align: center;
    border-top: 1px solid rgba(255,209,102,0.1);
    padding-top: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.tm-pool-tag {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 4px;
}
/* Pool */
.tm-pool-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}
.tm-pool-val {
    font-size: 32px;
    font-weight: 900;
    color: var(--cyan);
    line-height: 1;
    text-shadow: 0 0 24px rgba(77,184,255,0.4), 0 0 8px rgba(77,184,255,0.2), 0 1px 3px rgba(0,0,0,0.4);
    letter-spacing: -1px;
}
.tm-pool-currency {
    font-size: 13px;
    font-weight: 800;
    color: rgba(77,184,255,0.6);
    letter-spacing: 0.5px;
    align-self: flex-end;
    margin-bottom: 3px;
}
.tm-pool-usd-val {
    font-size: 10px;
    font-weight: 700;
    color: var(--gold);
    opacity: 0.8;
    align-self: flex-end;
    margin-bottom: 3px;
}
.tm-onchain-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #00e05a;
    opacity: 0.8;
}
.tm-onchain-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #00e05a;
    box-shadow: 0 0 6px rgba(0,224,90,0.6);
    animation: dB 1.1s ease-in-out infinite;
}

/* Distribution row (horizontal) */
.tm-dist-row {
    display: flex;
    gap: 6px;
    position: relative;
    z-index: 1;
}

/* ═══ MY RANK STICKY BAR ═══ */
.tm-my-rank-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 209, 102, 0.08);
    border: 1px solid rgba(255, 209, 102, 0.2);
    margin: 8px 16px 16px !important;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    flex-shrink: 0;
}
.tm-my-rank-bar.hidden { display: none; }
.tm-my-rank-bar .mr-tag { font-size: 9px; font-weight: 800; color: #000; background: var(--gold); border-radius: 4px; padding: 2px 5px; letter-spacing: 0.5px; }
.tm-my-rank-bar .mr-pos { font-size: 14px; font-weight: 800; color: var(--text); }
.tm-my-rank-bar .mr-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.tm-my-rank-bar .mr-score { font-size: 13px; font-weight: 700; color: var(--gold); }

/* ═══ DISTRIBUTION BADGES ═══ */
.tm-distribution {
    display: flex;
    gap: 6px;
    margin: 8px 16px 0;
    flex-shrink: 0;
}
.tm-dist-badge {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card);
    position: relative;
    overflow: hidden;
    min-width: 68px;
}
.tm-dist-badge::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    opacity: 0.5;
}
.tm-dist-badge.gold {
    border-color: rgba(255, 215, 0, 0.22);
    background: linear-gradient(180deg, rgba(255,215,0,0.06) 0%, rgba(255,215,0,0.01) 100%);
}
.tm-dist-badge.gold::after { background: linear-gradient(90deg, transparent, rgba(255,215,0,0.5), transparent); }
.tm-dist-badge.silver {
    border-color: rgba(192, 210, 230, 0.18);
    background: linear-gradient(180deg, rgba(192,210,230,0.04) 0%, rgba(192,210,230,0.01) 100%);
}
.tm-dist-badge.silver::after { background: linear-gradient(90deg, transparent, rgba(192,210,230,0.35), transparent); }
.tm-dist-badge.bronze {
    border-color: rgba(210, 120, 55, 0.18);
    background: linear-gradient(180deg, rgba(210,120,55,0.05) 0%, rgba(210,120,55,0.01) 100%);
}
.tm-dist-badge.bronze::after { background: linear-gradient(90deg, transparent, rgba(210,120,55,0.4), transparent); }

.tm-badge-title {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-3);
    margin-bottom: 3px;
    line-height: 1;
}
.tm-badge-amt {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-2);
    line-height: 1;
    white-space: nowrap;
}
.tm-dist-badge.gold .tm-badge-amt { color: var(--gold); }
.tm-dist-badge.silver .tm-badge-amt { color: rgba(200,218,240,0.9); }
.tm-dist-badge.bronze .tm-badge-amt { color: rgba(225,150,80,0.9); }

/* ═══ ACCORDION & RULES ═══ */
.tm-info-accordion {
    margin: 8px 16px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.01);
    overflow: hidden;
    flex-shrink: 0;
}
.tm-info-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text-2);
    transition: background-color 0.15s;
}
.tm-info-trigger:hover {
    background: rgba(255, 255, 255, 0.02);
}
.tm-info-trigger-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tm-info-icon {
    color: var(--gold);
}
.tm-info-arrow {
    display: flex;
    align-items: center;
    color: var(--text-3);
    transition: transform 0.2s ease;
}
.tm-info-arrow.open {
    transform: rotate(180deg);
}
/* Accordion collapses by default — only open on user tap */
.tm-info-content {
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.15);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.tm-info-content.open {
    max-height: 600px; /* large enough for content */
}
.tm-info-inner {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tm-info-text {
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--text-2);
    margin: 0;
}
.tm-info-text b {
    color: var(--text);
    font-weight: 700;
}

/* Prize distribution rows inside accordion */
.tm-prize-dist {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 4px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.tm-prize-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    background: rgba(255,255,255,0.02);
}
.tm-prize-row b { color: var(--text); }
.tm-prize-pct {
    margin-left: auto;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.tm-prize-row.gold   { background: rgba(255,209,102,0.06); }
.tm-prize-row.gold   .tm-prize-pct { color: var(--gold); }
.tm-prize-row.silver { background: rgba(192,210,230,0.04); }
.tm-prize-row.silver .tm-prize-pct { color: #c0d2e6; }
.tm-prize-row.bronze { background: rgba(200,130,60,0.04); }
.tm-prize-row.bronze .tm-prize-pct { color: #c88c50; }

/* Wallet card in accordion */
.tm-wallet-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 209, 102, 0.15);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 4px;
}
.tm-wallet-card:hover {
    border-color: rgba(255, 209, 102, 0.3);
    background: rgba(255, 209, 102, 0.03);
}
.tm-wallet-lbl {
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-3);
    margin-bottom: 3px;
    transition: color 0.15s;
}
.tm-wallet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tm-wallet-address {
    font-size: 10.5px;
    font-family: 'Courier New', monospace;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.tm-wallet-copy-ico {
    display: flex;
    align-items: center;
    color: var(--text-3);
    flex-shrink: 0;
}
.tm-wallet-card:hover .tm-wallet-copy-ico {
    color: var(--gold);
}

/* ═══ CTA BUTTON — warm gold accent ═══ */
.tm-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 16px 0;
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.08), rgba(200, 150, 40, 0.12));
    border: 1px solid rgba(255, 209, 102, 0.2);
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 209, 102, 0.06);
}
.tm-cta:hover {
    border-color: rgba(255, 209, 102, 0.4);
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.12), rgba(200, 150, 40, 0.18));
    box-shadow: inset 0 1px 0 rgba(255, 209, 102, 0.12), 0 0 12px rgba(255, 209, 102, 0.08);
}
.tm-cta:active {
    transform: scale(0.98);
}
.tm-cta-ico {
    font-size: 11px;
    flex-shrink: 0;
}
.tm-cta-t {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.5px;
}

/* ═══ MODAL LAYOUT — static top + scroll zone ═══ */
.tm-static {
    flex-shrink: 0;
    overflow: hidden;
    /* Cap height so leaderboard always has room on small screens (390x667) */
    max-height: 52vh;
    overflow-y: auto;
    /* subtle bottom separator */
    border-bottom: 1px solid rgba(255,209,102,0.06);
}
.tm-scroll-zone {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 24px;
    -webkit-overflow-scrolling: touch;
    /* subtle inner top shadow to indicate scroll */
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.15);
}
/* lb header inside static */
.tm-lb-hd{display:flex;align-items:center;gap:5px;padding:10px 18px 4px;flex-shrink:0;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-3)}
.tm-lb-list{display:flex;flex-direction:column;gap:3px;padding:4px 16px 16px}
.tm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 0;gap:3px;color:var(--text-3)}

/* rows */
.tm-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--border);transition:border-color .12s}
.tm-row:first-child{background:rgba(255,209,102,.05);border-color:rgba(255,209,102,.16)}
.tm-row:nth-child(2){background:rgba(192,210,230,.03);border-color:rgba(192,210,230,.1)}
.tm-row:nth-child(3){background:rgba(200,130,60,.035);border-color:rgba(200,140,60,.1)}
.tm-row.is-me{background:rgba(77,184,255,.06);border-color:rgba(77,184,255,.22)}
.tm-row-rank{font-size:15px;width:26px;text-align:center;flex-shrink:0;font-variant-numeric:tabular-nums}
.rank-gold{color:var(--gold)}.rank-silver{color:#aec4d8}.rank-bronze{color:#c87030}
.tm-row-score{font-size:11px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}
.tm-row-unit{font-size:8px;font-weight:600;color:var(--text-3);margin-left:2px}


/* ========== SECTION DIVIDER ========== */
.section-divider{
    height:1px;
    background:linear-gradient(90deg, transparent, var(--border), transparent);
    margin:6px 0;
    flex-shrink:0;
}

/* ========== PROJECT SECTION ========== */
.project-section{
    display:flex;flex-direction:column;gap:10px;
    padding-bottom:28px;
}
.project-section .footer{padding:2px 0 0}

/* ========== FOOTER ========== */
.footer{
    flex-shrink:0;text-align:center;
    padding:4px 0 16px;
    font-size:12px;font-weight:500;color:var(--text-3);
}
.footer-author{
    color:var(--cyan);opacity:.85;font-weight:600;
    transition:opacity .15s;
}
.footer-author:hover{opacity:1}

/* ========== SOCIAL LINKS ========== */
.social-links{
    display:flex;gap:12px;justify-content:center;
    flex-shrink:0;
    margin-bottom:6px;
}
.social-btn{
    width:54px;height:54px;
    display:flex;align-items:center;justify-content:center;
    border-radius:16px;
    background:var(--card);border:1px solid var(--border);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    color:var(--text-2);
    transition:all .15s;cursor:pointer;
}
.social-btn svg{color:var(--cyan);opacity:.8}
.social-btn:hover{border-color:var(--border-hover);background:rgba(77,184,255,0.08);transform:translateY(-2px)}
.social-btn:active{transform:scale(.88)}

/* ========== CA BAR ========== */
.ca-bar{
    display:flex;align-items:center;gap:10px;
    background:linear-gradient(135deg,rgba(0,80,180,0.45),rgba(0,30,80,0.6));
    border:1px solid rgba(77,184,255,0.35);
    border-radius:14px;padding:12px 14px;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    cursor:pointer;transition:all .18s;
    box-shadow:0 0 16px rgba(0,152,234,0.15), inset 0 1px 0 rgba(77,184,255,0.1);
}
.ca-bar:hover{
    border-color:rgba(77,184,255,0.6);
    box-shadow:0 0 24px rgba(0,152,234,0.28), inset 0 1px 0 rgba(77,184,255,0.15);
}
.ca-bar:active{transform:scale(.97)}
.ca-badge{
    font-size:10px;font-weight:800;letter-spacing:.6px;
    color:#fff;background:linear-gradient(135deg,var(--cyan2),var(--cyan));
    border-radius:6px;padding:3px 7px;flex-shrink:0;
    box-shadow:0 2px 8px rgba(0,152,234,0.35);
}
.ca-addr{
    flex:1;font-size:12px;font-weight:500;
    color:var(--text);font-family:'Courier New',monospace;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    letter-spacing:.3px;
}
.ca-copy-ico{display:flex;align-items:center;color:rgba(77,184,255,0.6);flex-shrink:0;transition:color .15s}
.ca-bar:hover .ca-copy-ico{color:var(--cyan)}
.ca-check{color:#00e05a!important}

/* ========== OVERLAY / DRAWER ========== */
.overlay{
    position:fixed;inset:0;background:rgba(0,8,32,0.7);z-index:100;
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.drawer{
    position:fixed;bottom:0;left:0;right:0;z-index:101;
    background:linear-gradient(180deg,var(--bg2),var(--bg));
    border-top:1px solid var(--border);
    border-radius:20px 20px 0 0;
    padding:0 16px 32px;
    max-height:80vh;
    display:flex;flex-direction:column;
    animation:slideUp .28s cubic-bezier(.2,.8,.2,1);
}
#lb-panel{
    height:80vh;
    height:min(80vh, calc(100dvh - 12px));
    overflow:hidden;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.drawer-pill{
    width:36px;height:4px;background:var(--border);border-radius:2px;
    margin:12px auto 0;
}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:12px 0 8px}
.drawer-top h2{font-size:17px;font-weight:800}
.drawer-x{
    width:30px;height:30px;border-radius:50%;
    background:rgba(255,255,255,0.07);
    font-size:13px;color:var(--text-2);
}

/* ========== TABS ========== */
.tab-row{display:flex;gap:6px;margin-bottom:12px;flex-shrink:0}
.tab{
    flex:1;padding:8px 8px;border-radius:10px;
    font-size:11px;font-weight:600;color:var(--text-2);
    background:rgba(255,255,255,0.04);border:1px solid var(--border);
    transition:all .15s;
}
.tab.active{background:rgba(77,184,255,0.12);border-color:var(--border-hover);color:var(--cyan)}

/* ========== LEADERBOARD ========== */
.top3{display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:12px 0 16px;flex-shrink:0}
.t3-item{display:flex;flex-direction:column;align-items:center;gap:5px}
.t3-item.first{order:2}
.t3-item.second{order:1}
.t3-item.third{order:3}
.t3-crown{font-size:16px}
.t3-avatar{
    border-radius:50%;object-fit:cover;
    border:2px solid var(--border);
    background:var(--card);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;
}
.t3-item.first .t3-avatar{width:52px;height:52px;border-color:var(--gold)}
.t3-item.second .t3-avatar,.t3-item.third .t3-avatar{width:42px;height:42px}
.t3-name{font-size:11px;font-weight:600;color:var(--text-2);max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.t3-score{font-size:12px;font-weight:800;color:var(--text)}
.t3-medal{font-size:13px}
.lb-scroll{overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.lb-list{display:flex;flex-direction:column;gap:6px}
.lb-row{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:12px;
    background:rgba(255,255,255,0.03);border:1px solid var(--border);
}
.lb-pos{width:24px;font-size:12px;font-weight:800;color:var(--text-3);text-align:center;flex-shrink:0}
.lb-avatar{
    width:34px;height:34px;border-radius:50%;
    background:var(--card);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;color:var(--cyan);flex-shrink:0;
    overflow:hidden;
}
.lb-avatar img{width:100%;height:100%;object-fit:cover}
.lb-name{flex:1;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-username{font-size:10px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-info{flex:1;min-width:0}
.lb-score{font-size:13px;font-weight:700;color:var(--cyan)}
.lb-row.is-me{
    background:rgba(77,184,255,0.08);border-color:var(--border-hover);
}
.lb-you-tag{font-size:8px;font-weight:800;color:var(--cyan);background:rgba(77,184,255,0.15);border-radius:4px;padding:2px 5px;letter-spacing:.5px;margin-left:4px;flex-shrink:0}
.lb-loading{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.skel{height:50px;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.04) 75%);background-size:200% 100%;animation:shimmer 1.2s infinite}
/* Skeleton row for tournament leaderboard loading state */
.tm-skel-row{height:46px;border-radius:10px;margin:3px 16px;background:linear-gradient(90deg,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.07) 50%,rgba(255,255,255,0.03) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.my-rank{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:12px;margin-top:8px;
    background:rgba(77,184,255,0.08);border:1px solid var(--border-hover);
}
.mr-tag{font-size:9px;font-weight:800;color:var(--cyan);background:rgba(77,184,255,0.15);border-radius:4px;padding:2px 5px;letter-spacing:.5px}
.mr-pos{font-size:14px;font-weight:800}
.mr-name{flex:1;font-size:13px;font-weight:600}
.mr-score{font-size:13px;font-weight:700;color:var(--cyan)}

/* ========== INFO CARDS ========== */
.info-cards{display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.ic{
    display:flex;gap:12px;align-items:flex-start;
    padding:14px;border-radius:14px;
    background:rgba(255,255,255,0.03);border:1px solid var(--border);
}
.ic-emoji{font-size:24px;flex-shrink:0}
.ic-body h3{font-size:14px;font-weight:700;margin-bottom:4px}
.ic-body p{font-size:12px;color:var(--text-2);line-height:1.5}

/* =============================================
   TAB PANELS — swipeable strip inside drawer
   ============================================= */
.tab-panels-wrap{
    flex:1;
    min-height:0;
    overflow:hidden;
    position:relative;
}
/* The horizontal strip: 2 panels side by side */
.tab-panels-strip{
    position:absolute;
    left:0;
    top:0;
    display:flex;
    flex-direction:row;
    width:200%; /* 2 panels × 100% */
    height:100%;
    min-height:0;
    will-change:transform;
    transition:transform 0.32s cubic-bezier(0.25,0.46,0.45,0.94);
}
.tab-panel{
    width:50%;
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    flex-shrink:0;
}
/* Override old tab layout — panels now handle their own scroll */
.tab-panel .lb-scroll{overflow-y:auto;flex:1;min-height:0}
.tab-panel .my-rank{flex-shrink:0}

/* =============================================
   TOURNAMENT TAB STYLES
   ============================================= */
/* Tournament name banner at top of panel */
.trn-info{
    padding:10px 0 6px;
    border-bottom:1px solid var(--border);
    margin-bottom:10px;
    flex-shrink:0;
}
.trn-name{
    font-size:14px;font-weight:800;color:var(--gold);
    display:flex;align-items:center;gap:6px;
}
.trn-name::before{content:'⚔️';font-size:13px}
.trn-cd-row{
    font-size:11px;color:var(--text-3);margin-top:3px;
    display:flex;align-items:center;gap:6px;
}
.trn-cd-live{
    display:inline-flex;align-items:center;gap:4px;
    color:#00e05a;font-weight:700;font-size:10px;
}
.trn-cd-live-dot{
    width:4px;height:4px;border-radius:50%;background:#00e05a;
    animation:dotBlink 1s ease-in-out infinite;
}
.trn-cd-time{
    font-family:monospace;font-weight:700;
    color:var(--gold);font-size:12px;
    letter-spacing:.5px;
}

/* Empty state */
.trn-empty{
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;flex:1;
    padding:30px 20px;
}
.trn-empty-icon{font-size:36px;margin-bottom:10px}
.trn-empty-text{font-size:14px;font-weight:700;margin-bottom:4px;text-align:center}
.trn-empty-sub{font-size:12px;color:var(--text-3);text-align:center}