/* =============================================
   GO! Trade - Tycoon Club Inspired Theme
   Royal blue header, white cards, game-style menu
   Premium playful — like a game companion app
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@400;500;600;700;800;900&family=Baloo+2:wght@500;600;700;800&display=swap');
:root {
    /* Tycoon Club Palette */
    --blue:#4A5BD4;--blue-deep:#3845A8;--blue-light:#6B7AE8;--blue-glow:rgba(74,91,212,.15);
    --green:#5CB85C;--green-deep:#449D44;--green-light:#8DD88D;
    --gold:#E8C840;--gold-deep:#D4A820;--gold-light:#F5E080;
    --red:#E85454;--red-light:#FF8888;
    --purple:#8B6FC0;
    /* UI */
    --bg:#F2F3F8;--bg-warm:#ECEEF5;
    --card:#FFFFFF;--card-hover:#FAFBFF;
    --text:#2D2D3D;--text-light:#6B6B80;--text-muted:#9D9DB0;
    --border:rgba(74,91,212,.10);--border-strong:rgba(74,91,212,.18);
    --shadow:rgba(74,91,212,.06);--shadow-strong:rgba(74,91,212,.12);
    /* Gradients */
    --grad-blue:linear-gradient(135deg,#4A5BD4,#3845A8);
    --grad-header:linear-gradient(180deg,#4A5BD4 0%,#3845A8 100%);
    --grad-green:linear-gradient(135deg,#5CB85C,#449D44);
    --grad-gold:linear-gradient(135deg,#E8C840,#D4A820);
    --grad-red:linear-gradient(135deg,#E85454,#D44040);
    --grad-sell:linear-gradient(135deg,#E8C840,#E85454);
    --grad-trade:linear-gradient(135deg,#4A5BD4,#5CB85C);
    --grad-hero:linear-gradient(135deg,#4A5BD4,#8B6FC0,#E8C840);
    /* Sizing */
    --radius:16px;--radius-sm:10px;--radius-lg:22px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-weight:600;-webkit-font-smoothing:antialiased;}
.wrap{position:relative;z-index:1;}

/* ===== HEADER — Royal Blue Game Bar ===== */
.hd{background:var(--grad-header);padding:.5rem 0;position:sticky;top:0;z-index:100;box-shadow:0 4px 20px rgba(56,69,168,.25);}
.hd .c{max-width:1280px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;}
.logo-ico{width:40px;height:40px;background:rgba(255,255,255,.15);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);}
.logo-t{font-family:'Lilita One',cursive;font-size:1.4rem;color:#fff;line-height:1;}
.logo-t span{color:var(--gold);}
.logo-t small{display:block;font-family:'Nunito';font-size:.5rem;color:rgba(255,255,255,.6);letter-spacing:2px;text-transform:uppercase;font-weight:700;}
.hd-acts{display:flex;align-items:center;gap:.35rem;}

/* Header buttons — glass style */
.btn{display:inline-flex;align-items:center;gap:.3rem;padding:.42rem .85rem;border-radius:var(--radius-sm);font-family:'Nunito';font-weight:700;font-size:.72rem;text-decoration:none;border:none;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn-glass{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px);}
.btn-glass:hover{background:rgba(255,255,255,.2);}
.btn-green{background:var(--grad-green);color:#fff;box-shadow:0 3px 12px rgba(92,184,92,.35);}
.btn-gold{background:var(--grad-gold);color:var(--text);box-shadow:0 3px 12px rgba(232,200,64,.35);}
.btn-blue{background:var(--grad-blue);color:#fff;box-shadow:0 3px 12px rgba(74,91,212,.3);}
.btn-red{background:var(--grad-red);color:#fff;box-shadow:0 3px 12px rgba(232,84,84,.25);}
.btn-o{background:var(--card);color:var(--text-light);border:2px solid var(--border-strong);}
.btn-o:hover{border-color:var(--blue);color:var(--blue);}
.btn-s{padding:.35rem .6rem;font-size:.68rem;border-radius:8px;}
.btn-sell{background:var(--grad-sell);color:#fff;}
.btn-trade{background:var(--grad-trade);color:#fff;}
.btn-sky{background:var(--grad-blue);color:#fff;}

/* ===== MOBILE HAMBURGER ===== */
.mob-menu-btn{display:none;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:1.1rem;cursor:pointer;align-items:center;justify-content:center;transition:all .2s;}
.mob-menu-btn:hover{background:rgba(255,255,255,.25);}
@media(max-width:768px){.hd-acts{display:none !important;}.mob-menu-btn{display:flex;}}
@media(min-width:769px){.mob-menu-btn{display:none;}}

/* ===== SLIDE MENU — Game-style right panel ===== */
.mob-nav{display:none;position:fixed;inset:0;z-index:500;background:rgba(45,45,61,.5);backdrop-filter:blur(6px);}
.mob-nav.open{display:block;}
.mob-nav-panel{position:absolute;top:0;right:0;width:300px;max-width:88vw;height:100%;background:var(--card);box-shadow:-8px 0 40px rgba(74,91,212,.2);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.mob-nav.open .mob-nav-panel{transform:translateX(0);}
/* Avatar header */
.mob-nav-head{padding:1.5rem 1rem 1rem;text-align:center;position:relative;}
.mob-nav-head .close-nav{position:absolute;top:.8rem;right:.8rem;width:32px;height:32px;border-radius:50%;background:var(--bg);border:none;color:var(--text-muted);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.mob-nav-head .nav-avatar{width:72px;height:72px;border-radius:50%;margin:0 auto .4rem;background:var(--grad-hero);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;color:#fff;border:3px solid var(--bg);overflow:hidden;box-shadow:0 4px 15px var(--shadow-strong);}
.mob-nav-head .nav-avatar img{width:100%;height:100%;object-fit:cover;}
.mob-nav-head .nav-username{font-family:'Baloo 2';font-size:1.1rem;color:var(--text);}
/* Menu links — icon + label game style */
.mob-nav-links{padding:.3rem 0;}
.mob-nav-links a{display:flex;align-items:center;gap:.7rem;padding:.65rem 1.2rem;text-decoration:none;color:var(--text);font-weight:700;font-size:.82rem;transition:background .2s;border-bottom:1px solid var(--border);}
.mob-nav-links a:hover,.mob-nav-links a:active{background:var(--bg);}
.mob-nav-links a .nav-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.mob-nav-links a.danger{color:var(--red);}
/* Game select section in menu */
.nav-section{padding:.5rem 1.2rem .2rem;font-size:.62rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:800;}
.nav-game-list{padding:0 .5rem .3rem;}
.nav-game-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .7rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--text-light);font-weight:700;font-size:.78rem;transition:all .2s;margin-bottom:.2rem;}
.nav-game-item:hover{background:var(--bg);color:var(--text);}
.nav-game-item.active{background:var(--blue-glow);color:var(--blue);border:1px solid var(--border-strong);}
.nav-game-item .ngi-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;background:var(--bg);flex-shrink:0;overflow:hidden;}
.nav-game-item .ngi-ico img{width:100%;height:100%;object-fit:cover;border-radius:8px;}

/* ===== FILTER BAR ===== */
.filter-bar{max-width:1280px;margin:0 auto;padding:.6rem 1rem .5rem;}
.filter-bar-inner{display:flex;align-items:center;gap:.4rem;flex-wrap:nowrap;}
.filter-bar .f-tabs{flex-shrink:0;}
.filter-bar .f-search{flex:0 1 200px;min-width:100px;}
.filter-bar .f-search input{font-size:.75rem;padding:.4rem .6rem .4rem 1.8rem;background:var(--card);border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Nunito';font-weight:600;outline:none;width:100%;transition:border .2s;}
.filter-bar .f-search input:focus{border-color:var(--blue);}
.filter-bar .f-search input::placeholder{color:var(--text-muted);}
.filter-bar .f-search i{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.68rem;}
.f-search{position:relative;}
.mini-stats{display:flex;gap:.25rem;flex-shrink:0;margin-left:auto;}
.mini-stat{text-align:center;padding:.2rem .4rem;background:var(--card);border-radius:8px;border:2px solid var(--border);min-width:44px;}
.mini-stat .v{font-family:'Baloo 2';font-size:.85rem;font-weight:800;color:var(--blue);line-height:1;}
.mini-stat .l{font-size:.4rem;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);font-weight:700;}
.filter-extras{max-width:1280px;margin:0 auto;padding:0 1rem .4rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;}

/* Tabs */
.f-tabs{display:flex;background:var(--card);border-radius:var(--radius-sm);padding:2px;border:2px solid var(--border);}
.f-tab{padding:.38rem .8rem;border-radius:7px;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.3px;cursor:pointer;transition:all .2s;text-decoration:none;color:var(--text-muted);border:none;background:none;font-family:'Nunito';}
.f-tab.active{background:var(--grad-blue);color:#fff;box-shadow:0 2px 8px rgba(74,91,212,.25);}
.f-tab:hover:not(.active){color:var(--text);background:var(--bg);}

/* Stars filter */
.f-stars{display:flex;gap:.2rem;}
.f-star{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;text-decoration:none;color:var(--text-muted);background:var(--card);border:2px solid var(--border);font-weight:700;transition:all .2s;}
.f-star.active,.f-star:hover{background:var(--grad-gold);color:var(--text);border-color:transparent;}
.f-sel{padding:.4rem .7rem;background:var(--card);border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Nunito';font-size:.75rem;font-weight:600;outline:none;cursor:pointer;}

/* Grid Switcher */
.grid-switcher{display:flex;gap:2px;background:var(--card);border:2px solid var(--border);border-radius:var(--radius-sm);padding:2px;flex-shrink:0;}
.grid-btn{width:28px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:none;color:var(--text-muted);transition:all .15s;}
.grid-btn.active{background:var(--blue);color:#fff;}
.grid-btn:hover:not(.active){background:var(--bg);color:var(--text);}
.grid-btn svg{width:13px;height:13px;fill:currentColor;}

/* Mobile filter */
@media(max-width:768px){
    .filter-bar-inner{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto auto;gap:.3rem;align-items:center;}
    .filter-bar .f-tabs{grid-column:1;grid-row:1;}
    .filter-bar .grid-switcher{grid-column:2;grid-row:1;}
    .filter-bar .f-search{grid-column:1/2;grid-row:2;flex:1;min-width:0;}
    .filter-bar .f-search input{font-size:.7rem;padding:.35rem .5rem .35rem 1.5rem;}
    .mini-stats{grid-column:2/4;grid-row:2;margin-left:0;gap:.15rem;}
    .mini-stat{min-width:34px;padding:.15rem .2rem;border-width:1.5px;}
    .mini-stat .v{font-size:.68rem;}
    .mini-stat .l{font-size:.35rem;}
    .grid-switcher .g3,.grid-switcher .g4{display:none;}
}
@media(max-width:480px){
    .filter-bar .f-tabs{grid-column:1/-1;grid-row:1;justify-content:center;}
    .filter-bar .grid-switcher{grid-column:3;grid-row:2;}
    .filter-bar .f-search{grid-column:1;grid-row:2;}
    .mini-stats{grid-column:2;grid-row:2;}
    .mini-stat{min-width:30px;padding:.1rem .15rem;}.mini-stat .v{font-size:.6rem;}.mini-stat .l{font-size:.32rem;}
    .grid-switcher .g3,.grid-switcher .g4{display:none;}
}

/* ===== GRID ===== */
.listings{max-width:1280px;margin:0 auto;padding:0 1rem 3rem;}
.grid{display:grid;gap:.7rem;transition:all .25s ease;}
.grid.grid-1{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;}
.grid.grid-2{grid-template-columns:repeat(2,1fr);}
.grid.grid-3{grid-template-columns:repeat(3,1fr);}
.grid.grid-4{grid-template-columns:repeat(4,1fr);}

/* ===== CARD — White rounded, big image, bold type ===== */
.cd{background:var(--card);border-radius:var(--radius);border:none;overflow:hidden;transition:all .25s ease;position:relative;cursor:pointer;box-shadow:0 2px 12px var(--shadow);}
.cd:hover{transform:translateY(-3px);box-shadow:0 8px 30px var(--shadow-strong);}
.cd-badge{position:absolute;top:8px;left:8px;z-index:2;padding:.18rem .5rem;border-radius:6px;font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.3px;}
.cd-badge.sell{background:var(--grad-gold);color:var(--text);}
.cd-badge.trade{background:var(--grad-trade);color:#fff;}
.cd-game-badge{position:absolute;top:8px;right:8px;z-index:2;padding:.15rem .4rem;border-radius:6px;font-size:.55rem;font-weight:700;background:rgba(255,255,255,.9);backdrop-filter:blur(4px);color:var(--text-light);border:1px solid var(--border);}
.cd-offers{position:absolute;top:35px;right:8px;z-index:2;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:800;}
.cd-img{width:calc(100% - 12px);aspect-ratio:4/3;overflow:hidden;background:var(--bg);border-bottom:none;display:flex;align-items:center;justify-content:center;margin:6px auto 0;border-radius:var(--radius-sm);border:2px solid var(--border);}
.cd-img img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius-sm);}
.cd-top{padding:.65rem .7rem .35rem;display:flex;align-items:flex-start;gap:.5rem;min-height:65px;}
.cd-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;}
.cd-icon.sticker{background:linear-gradient(135deg,rgba(232,200,64,.12),rgba(139,111,192,.10));border:2px solid rgba(232,200,64,.18);}
.cd-icon.item{background:linear-gradient(135deg,rgba(74,91,212,.10),rgba(92,184,92,.08));border:2px solid rgba(74,91,212,.15);}
.cd-info{flex:1;min-width:0;}
.cd-album{font-size:.58rem;text-transform:uppercase;letter-spacing:.8px;color:var(--blue);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cd-name{font-family:'Baloo 2';font-size:.92rem;font-weight:700;line-height:1.2;margin:.05rem 0 .15rem;color:var(--text);}
.cd-stars{display:flex;gap:1px;}
.cd-rarity{display:inline-block;padding:.08rem .32rem;border-radius:5px;font-size:.52rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-top:.1rem;}
.cd-body{padding:0 .7rem .4rem;}
.cd-price-row{display:flex;align-items:center;justify-content:space-between;}
.cd-price{font-family:'Baloo 2';font-weight:800;font-size:1rem;color:var(--green-deep);}
.cd-qty{font-size:.65rem;color:var(--text-muted);font-weight:700;}
.cd-trade-tag{font-size:.7rem;color:var(--blue);font-weight:700;}
.cd-trade-tag i{margin-right:.2rem;}
.cd-want{background:rgba(74,91,212,.04);border:1px solid rgba(74,91,212,.10);border-radius:8px;padding:.25rem .45rem;margin-top:.25rem;font-size:.65rem;color:var(--text-light);}
.cd-want strong{color:var(--blue);}
.cd-foot{padding:.4rem .7rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg);}
.cd-user{display:flex;align-items:center;gap:.25rem;font-size:.65rem;color:var(--text-light);font-weight:600;}
.cd-user a{color:inherit;text-decoration:none;}.cd-user a:hover{color:var(--blue);}
.cd-avatar{width:20px;height:20px;border-radius:50%;background:var(--grad-blue);display:flex;align-items:center;justify-content:center;font-size:.45rem;font-weight:800;color:#fff;border:1.5px solid var(--card);overflow:hidden;}
.cd-avatar img{width:100%;height:100%;object-fit:cover;}
.cd-contacts{display:flex;gap:.15rem;}
.cd-contacts a{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.55rem;transition:all .2s;text-decoration:none;}
.cd-contacts .discord{background:rgba(88,101,242,.08);color:#5865F2;}
.cd-contacts .messenger{background:rgba(0,132,255,.08);color:#0084FF;}
.cd-comment-badge{display:inline-flex;align-items:center;gap:.12rem;font-size:.58rem;color:var(--text-muted);font-weight:600;}
.cd-comment-badge i{font-size:.52rem;}

/* ===== EMPTY ===== */
.empty{text-align:center;padding:3rem 2rem;grid-column:1/-1;}
.empty-ico{font-size:2.5rem;margin-bottom:.5rem;opacity:.5;}
.empty h3{font-family:'Baloo 2';font-size:1.1rem;margin-bottom:.2rem;color:var(--text-light);}
.empty p{color:var(--text-muted);margin-bottom:1rem;font-size:.82rem;}

/* ===== PAGINATION ===== */
.pag{display:flex;justify-content:center;gap:.25rem;margin-top:1.5rem;}
.pag a,.pag span{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-weight:700;font-size:.72rem;text-decoration:none;transition:all .2s;}
.pag a{background:var(--card);color:var(--text-muted);border:2px solid var(--border);}
.pag a:hover{border-color:var(--blue);color:var(--blue);}
.pag .cur{background:var(--grad-blue);color:#fff;border:none;}

/* ===== MODAL ===== */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(45,45,61,.4);backdrop-filter:blur(6px);z-index:1000;align-items:center;justify-content:center;padding:1rem;}
.modal-bg.on{display:flex;}
.modal{background:var(--card);border-radius:var(--radius-lg);width:100%;max-width:540px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(74,91,212,.2);}
.modal::-webkit-scrollbar{width:3px;}.modal::-webkit-scrollbar-thumb{background:var(--blue-light);border-radius:3px;}
.m-hd{padding:1rem 1rem 0;display:flex;align-items:center;justify-content:space-between;}
.m-hd h2{font-family:'Baloo 2';font-size:1.15rem;color:var(--text);}
.m-hd h2 span{color:var(--blue);}
.m-close{width:32px;height:32px;border-radius:50%;background:var(--bg);border:none;color:var(--text-muted);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.m-close:hover{background:var(--red-light);color:#fff;}
.m-body{padding:1rem;}

/* ===== FORMS ===== */
.fg{margin-bottom:.75rem;}
.fg label{display:block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-light);margin-bottom:.2rem;}
.fg input,.fg select,.fg textarea{width:100%;padding:.5rem .65rem;background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Nunito';font-size:.8rem;font-weight:600;outline:none;transition:border .2s;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue);}
.fg select option{background:var(--card);}
.fg textarea{resize:vertical;min-height:60px;}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.fg-stars{display:flex;gap:.3rem;}
.fg-star{font-size:1.2rem;cursor:pointer;color:rgba(157,157,176,.25);transition:all .2s;}
.fg-star.on{color:var(--gold);text-shadow:0 0 6px rgba(232,200,64,.4);transform:scale(1.05);}
.fg-star:hover{color:var(--gold);transform:scale(1.1);}
.fg-toggle{display:flex;background:var(--bg);border-radius:var(--radius-sm);padding:2px;border:2px solid var(--border);}
.fg-toggle-btn{flex:1;padding:.4rem;text-align:center;border-radius:7px;font-weight:700;font-size:.72rem;cursor:pointer;transition:all .2s;background:none;border:none;color:var(--text-muted);font-family:'Nunito';}
.fg-toggle-btn.on[data-t="sell"]{background:var(--grad-sell);color:#fff;}
.fg-toggle-btn.on[data-t="trade"]{background:var(--grad-trade);color:#fff;}
.fg-sec{font-family:'Baloo 2';font-size:.82rem;margin:.6rem 0 .25rem;padding-top:.6rem;border-top:2px solid var(--border);}
.fg-sec.sell-c{color:var(--gold-deep);}
.fg-sec.trade-c{color:var(--blue);}
.sell-f,.trade-f{display:none;}.sell-f.on,.trade-f.on{display:block;}
.perm-warn{background:rgba(232,84,84,.06);border:2px solid rgba(232,84,84,.12);border-radius:12px;padding:1rem;text-align:center;}
.perm-warn i{font-size:1.1rem;color:var(--red);display:block;margin-bottom:.3rem;}
.perm-warn p{font-size:.78rem;color:var(--text-light);line-height:1.5;}.perm-warn a{color:var(--blue);}
.contact-warn{background:rgba(232,200,64,.06);border:2px solid rgba(232,200,64,.12);border-radius:var(--radius-sm);padding:.5rem;margin-bottom:.6rem;font-size:.72rem;color:var(--text-light);text-align:center;}
.contact-warn a{color:var(--blue);}

/* ===== DETAIL ===== */
.dt-img{border-radius:12px;overflow:hidden;margin-bottom:.8rem;text-align:center;background:var(--bg);padding:1.2rem;border:2px solid var(--border);}
.dt-img .big-ico{font-size:3.5rem;}
.dt-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--border);}
.dt-lbl{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700;}
.dt-val{font-weight:700;font-size:.82rem;}
.dt-contacts{display:flex;gap:.4rem;margin-top:.7rem;}
.dt-contact{display:flex;align-items:center;gap:.3rem;padding:.45rem .7rem;border-radius:var(--radius-sm);text-decoration:none;font-weight:700;font-size:.72rem;transition:all .2s;flex:1;justify-content:center;}
.dt-contact.discord-btn{background:rgba(88,101,242,.06);color:#5865F2;border:2px solid rgba(88,101,242,.12);}
.dt-contact.messenger-btn{background:rgba(0,132,255,.06);color:#0084FF;border:2px solid rgba(0,132,255,.12);}
.dt-want{background:rgba(74,91,212,.04);border:2px solid rgba(74,91,212,.08);border-radius:12px;padding:.6rem;margin-top:.6rem;}
.dt-want .dt-want-lbl{font-size:.6rem;color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:.2rem;}

/* ===== FOOTER ===== */
.ft{text-align:center;padding:1rem;border-top:2px solid var(--border);color:var(--text-muted);font-size:.68rem;font-weight:600;background:var(--card);}
.ft a{color:var(--blue);text-decoration:none;}

/* ===== TOAST ===== */
.toast{position:fixed;top:1rem;right:1rem;z-index:2000;padding:.65rem .9rem;border-radius:var(--radius-sm);font-weight:700;font-size:.75rem;box-shadow:0 6px 20px rgba(74,91,212,.15);transform:translateX(120%);transition:transform .3s ease;}
.toast.show{transform:translateX(0);}.toast.ok{background:var(--green);color:#fff;}.toast.err{background:var(--red);color:#fff;}

/* ===== ALERTS ===== */
.alert{padding:.55rem .8rem;border-radius:var(--radius-sm);margin:1rem 0;font-weight:700;font-size:.75rem;}
.alert-ok{background:rgba(92,184,92,.1);color:var(--green-deep);border:2px solid rgba(92,184,92,.2);}
.alert-err{background:rgba(232,84,84,.08);color:var(--red);border:2px solid rgba(232,84,84,.15);}

/* ===== GAME CHIP BAR (for desktop, hidden on mobile) ===== */
.games-bar{max-width:1280px;margin:0 auto;padding:.5rem 1rem .2rem;}
.games-scroll{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:none;justify-content:center;flex-wrap:wrap;}
.games-scroll::-webkit-scrollbar{display:none;}
.game-chip{display:flex;align-items:center;gap:.35rem;padding:.4rem .85rem;background:var(--card);border:2px solid var(--border);border-radius:10px;cursor:pointer;text-decoration:none;color:var(--text-light);font-weight:700;font-size:.72rem;white-space:nowrap;transition:all .2s;box-shadow:0 1px 4px var(--shadow);}
.game-chip:hover{border-color:var(--blue);color:var(--text);transform:translateY(-1px);}
.game-chip.active{background:var(--grad-blue);color:#fff;border-color:transparent;box-shadow:0 3px 12px rgba(74,91,212,.3);}
.game-chip .gico{font-size:1rem;}
.game-chip-all.active{background:var(--grad-gold);color:var(--text);}
.game-chip-img{width:24px;height:24px;border-radius:6px;object-fit:cover;flex-shrink:0;}

/* RESPONSIVE */
@media(max-width:768px){
    .grid.grid-3,.grid.grid-4{grid-template-columns:repeat(2,1fr);}
    .fg-row{grid-template-columns:1fr;}
    .games-bar{padding:.3rem .5rem .2rem;}
    .game-chip{padding:.35rem .6rem;font-size:.68rem;}
}
@media(max-width:480px){
    .grid.grid-3,.grid.grid-4{grid-template-columns:repeat(2,1fr);}
    .grid.grid-2{grid-template-columns:repeat(2,1fr);}
    .grid.grid-1{grid-template-columns:1fr;}
    /* Compact cards for 2-col mobile */
    .grid.grid-2 .cd-img,.grid.grid-3 .cd-img,.grid.grid-4 .cd-img{aspect-ratio:1/1;}
    .grid.grid-2 .cd-top,.grid.grid-3 .cd-top,.grid.grid-4 .cd-top{padding:.4rem .5rem .2rem;gap:.3rem;min-height:auto;}
    .grid.grid-2 .cd-icon,.grid.grid-3 .cd-icon,.grid.grid-4 .cd-icon{width:30px;height:30px;border-radius:8px;font-size:1rem;}
    .grid.grid-2 .cd-name,.grid.grid-3 .cd-name,.grid.grid-4 .cd-name{font-size:.75rem;}
    .grid.grid-2 .cd-album,.grid.grid-3 .cd-album,.grid.grid-4 .cd-album{font-size:.5rem;letter-spacing:.5px;}
    .grid.grid-2 .cd-body,.grid.grid-3 .cd-body,.grid.grid-4 .cd-body{padding:0 .5rem .3rem;}
    .grid.grid-2 .cd-price,.grid.grid-3 .cd-price,.grid.grid-4 .cd-price{font-size:.82rem;}
    .grid.grid-2 .cd-foot,.grid.grid-3 .cd-foot,.grid.grid-4 .cd-foot{padding:.3rem .5rem;}
    .grid.grid-2 .cd-user,.grid.grid-3 .cd-user,.grid.grid-4 .cd-user{font-size:.58rem;}
    .grid.grid-2 .cd-badge,.grid.grid-3 .cd-badge,.grid.grid-4 .cd-badge{font-size:.48rem;padding:.12rem .35rem;top:5px;left:5px;}
    .grid.grid-2 .cd-game-badge,.grid.grid-3 .cd-game-badge,.grid.grid-4 .cd-game-badge{font-size:.45rem;padding:.1rem .3rem;top:5px;right:5px;}
    .grid.grid-2 .cd-want,.grid.grid-3 .cd-want,.grid.grid-4 .cd-want{font-size:.58rem;padding:.2rem .3rem;}
    .grid.grid-2 .cd-trade-tag,.grid.grid-3 .cd-trade-tag,.grid.grid-4 .cd-trade-tag{font-size:.6rem;}
    .grid.grid-2 .cd-rarity,.grid.grid-3 .cd-rarity,.grid.grid-4 .cd-rarity{font-size:.45rem;}
    .grid.grid-2 .cd-stars img,.grid.grid-3 .cd-stars img,.grid.grid-4 .cd-stars img{width:10px;height:10px;}
}

/* HERO */
.hero{padding:1rem 1rem .6rem;text-align:center;}
.hero h1{font-family:'Lilita One',cursive;font-size:2.2rem;line-height:1.1;margin-bottom:.2rem;}
.hero h1 .t1{color:var(--blue);}
.hero h1 .t2{color:var(--green);}
.hero p{color:var(--text-muted);font-size:.85rem;}
.stats{display:flex;justify-content:center;gap:1rem;margin-top:.7rem;flex-wrap:wrap;}
.stat{text-align:center;background:var(--card);padding:.4rem .7rem;border-radius:var(--radius-sm);border:2px solid var(--border);}
.stat-v{font-family:'Baloo 2';font-size:1.2rem;font-weight:800;color:var(--blue);}
.stat-l{font-size:.5rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:700;}

/* ===== GAME HOVER DROPDOWN IN HEADER (Desktop) ===== */
.hd-game-hover{position:relative;flex-shrink:0;}
.hd-game-btn{gap:.4rem !important;cursor:pointer;}
.hd-game-drop{
    display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
    margin-top:6px;min-width:220px;
    background:var(--card);border:2px solid var(--border);border-radius:var(--radius);
    box-shadow:0 10px 40px var(--shadow-strong);padding:.4rem;z-index:200;
}
.hd-game-drop::before{
    content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);
    border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid var(--card);
}
.hd-game-hover:hover .hd-game-drop{display:block;}
.hgd-item{
    display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;
    border-radius:8px;text-decoration:none;color:var(--text-light);
    font-weight:700;font-size:.78rem;transition:all .15s;white-space:nowrap;
}
.hgd-item:hover{background:var(--bg);color:var(--text);}
.hgd-item.active{background:rgba(74,91,212,.08);color:var(--blue);}
.hgd-ico{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.95rem;background:var(--bg);flex-shrink:0;overflow:hidden;}
.hgd-ico img{width:100%;height:100%;object-fit:cover;border-radius:7px;}
@media(max-width:768px){.hd-game-hover{display:none !important;}}

/* ===== NAV BADGES ===== */
.nav-badge{
    position:absolute;top:-2px;right:-2px;
    background:var(--red);color:#fff;font-size:.5rem;font-weight:800;
    min-width:16px;height:16px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    padding:0 .2rem;border:2px solid rgba(56,69,168,.5);
}
.mob-nav-badge{
    background:var(--red);color:#fff;font-size:.55rem;font-weight:800;
    padding:.05rem .35rem;border-radius:6px;margin-left:auto;
}

/* ===== NOTIFICATION PANEL ===== */
.notif-panel{
    display:none !important;position:fixed;top:52px;right:.5rem;z-index:500;
    width:340px;max-width:92vw;max-height:70vh;
    background:var(--card);border:2px solid var(--border);
    border-radius:var(--radius);box-shadow:0 10px 40px var(--shadow-strong);
    overflow:hidden;
}
.notif-panel.open{display:block !important;}
.notif-hdr{padding:.6rem .8rem;border-bottom:2px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.notif-hdr h3{font-family:'Baloo 2';font-size:.9rem;color:var(--text);}
.notif-mark-read{font-size:.65rem;color:var(--blue);cursor:pointer;font-weight:700;border:none;background:none;font-family:'Nunito';}
.notif-list{max-height:55vh;overflow-y:auto;}
.notif-list::-webkit-scrollbar{width:3px;}.notif-list::-webkit-scrollbar-thumb{background:var(--blue-light);border-radius:3px;}
.notif-item{display:flex;gap:.4rem;padding:.55rem .8rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.notif-item:hover{background:var(--bg);}
.notif-item.unread{background:rgba(74,91,212,.04);}
.notif-item .ni-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:var(--grad-hero);display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:800;color:#fff;overflow:hidden;}
.notif-item .ni-avatar img{width:100%;height:100%;object-fit:cover;}
.ni-body{flex:1;min-width:0;}.ni-text{font-size:.72rem;color:var(--text);line-height:1.3;}.ni-time{font-size:.55rem;color:var(--text-muted);margin-top:.1rem;}
.ni-icon{font-size:.7rem;flex-shrink:0;margin-top:.1rem;}
.ni-icon.comment{color:var(--blue);}.ni-icon.chat{color:var(--green);}.ni-icon.mention{color:var(--gold);}.ni-icon.offer{color:var(--red);}
.notif-empty{text-align:center;padding:1.5rem;color:var(--text-muted);font-size:.78rem;}

/* ===== SLIDE MENU ===== */
.mob-nav{display:none;position:fixed;inset:0;z-index:500;background:rgba(45,45,61,.5);backdrop-filter:blur(6px);}
.mob-nav.open{display:block;}
.mob-nav-panel{position:absolute;top:0;right:0;width:300px;max-width:88vw;height:100%;background:var(--card);box-shadow:-8px 0 40px rgba(74,91,212,.2);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;}
.mob-nav.open .mob-nav-panel{transform:translateX(0);}
.mob-nav-head{padding:1.5rem 1rem 1rem;text-align:center;position:relative;}
.mob-nav-head .close-nav{position:absolute;top:.8rem;right:.8rem;width:32px;height:32px;border-radius:50%;background:var(--bg);border:none;color:var(--text-muted);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.mob-nav-head .nav-avatar{width:72px;height:72px;border-radius:50%;margin:0 auto .4rem;background:var(--grad-hero);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;color:#fff;border:3px solid var(--bg);overflow:hidden;box-shadow:0 4px 15px var(--shadow-strong);}
.mob-nav-head .nav-avatar img{width:100%;height:100%;object-fit:cover;}
.mob-nav-head .nav-username{font-family:'Baloo 2';font-size:1.1rem;color:var(--text);}
.mob-nav-links{padding:.3rem 0;}
.mob-nav-links a{display:flex;align-items:center;gap:.7rem;padding:.65rem 1.2rem;text-decoration:none;color:var(--text);font-weight:700;font-size:.82rem;transition:background .2s;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.3px;}
.mob-nav-links a:hover,.mob-nav-links a:active{background:var(--bg);}
.mob-nav-links a .nav-ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.mob-nav-links a.danger{color:var(--red);}
.nav-section{padding:.6rem 1.2rem .2rem;font-size:.6rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-weight:800;border-top:2px solid var(--border);}
.nav-game-list{padding:0 .6rem .3rem;}
.nav-game-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--text-light);font-weight:700;font-size:.78rem;transition:all .2s;margin-bottom:.15rem;}
.nav-game-item:hover{background:var(--bg);color:var(--text);}
.nav-game-item.active{background:rgba(74,91,212,.08);color:var(--blue);border:1px solid rgba(74,91,212,.15);}
.nav-game-item .ngi-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;background:var(--bg);flex-shrink:0;overflow:hidden;}
.nav-game-item .ngi-ico img{width:100%;height:100%;object-fit:cover;border-radius:8px;}

/* ===== MENTION STYLES ===== */
.mention-drop-comment{position:absolute;bottom:100%;left:0;right:0;background:var(--card);border:2px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 -4px 15px var(--shadow-strong);max-height:150px;overflow-y:auto;display:none;z-index:10;}
.mention-drop-comment.show{display:block;}
.md-opt{display:flex;align-items:center;gap:.35rem;padding:.35rem .5rem;cursor:pointer;font-size:.72rem;font-weight:600;transition:background .12s;}
.md-opt:hover,.md-opt.selected{background:var(--bg);}
.md-opt .mdo-avatar{width:22px;height:22px;border-radius:50%;background:var(--grad-hero);display:flex;align-items:center;justify-content:center;font-size:.4rem;font-weight:800;color:#fff;overflow:hidden;flex-shrink:0;}
.md-opt .mdo-avatar img{width:100%;height:100%;object-fit:cover;}
.comment-text .mention{color:var(--blue);font-weight:700;cursor:pointer;}
.comment-text .mention:hover{text-decoration:underline;}
.cd-online-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.15rem;vertical-align:middle;}
.cd-online-dot.online{background:#4CAF50;}.cd-online-dot.offline{background:#B0B0B0;}