body{color:#15171b;background:#fff}
.navbar-brand{letter-spacing:.08em}
.hero{background:linear-gradient(180deg,#f5f6ff,#fff)}
.hero-card{background:#111318;color:#fff}
.game-tile{display:block;border:1px solid #e7e7ec;border-radius:14px;padding:18px;background:#fff;transition:.15s}
.game-tile:hover,.listing-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.08)}
.listing-card{border:1px solid #ececf1;border-radius:16px;transition:.15s}
.spec{border:1px solid #ececf1;border-radius:12px;padding:12px;height:100%}
.spec span{display:block;font-size:.75rem;color:#7b7e88}
.gallery-img{height:460px;object-fit:contain;background:#101216}
.preserve{white-space:pre-line}
.detail-buy{position:sticky;top:86px}
.stat-card{border:1px solid #ececf1;border-radius:16px;padding:20px}
.dropdown-menu{min-width:150px}

.dynamic-box{border:1px dashed #ccd0dd;border-radius:14px;padding:18px;background:#fafbff}.fee-box{border-radius:14px;padding:18px;background:#111318;color:#fff}.fee-box span{display:block;font-size:.8rem;opacity:.7}.fee-box strong{display:block;font-size:1.15rem;margin-top:4px}.fee-mini{background:#f7f7fa;border-radius:12px;padding:12px}.fee-mini div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}

.trade-steps{display:flex;gap:0;overflow-x:auto;padding-bottom:8px}
.trade-step{min-width:120px;position:relative;padding-top:28px;padding-right:18px;color:#8a8f99;font-size:.86rem}
.trade-step:before{content:"";position:absolute;left:9px;right:-9px;top:9px;height:3px;background:#e3e6ec}
.trade-step:last-child:before{right:auto;width:0}
.trade-dot{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#d9dde5;border:4px solid white;box-shadow:0 0 0 1px #d9dde5}
.trade-step.active{color:#15171b}
.trade-step.active:before{background:#198754}
.trade-step.active .trade-dot{background:#198754;box-shadow:0 0 0 1px #198754}
.note-item{border-bottom:1px solid #ececf1;padding:10px 0}
.note-item:last-child{border-bottom:0}


/* ============================================================
   GameAccX V4.9 Brand Assets
   ============================================================ */
.gameaccx-brand{
    display:flex;
    align-items:center;
    padding-top:4px;
    padding-bottom:4px;
    margin-right:22px;
    text-decoration:none;
}

.gameaccx-logo{
    display:block;
    width:auto;
    height:48px;
    max-width:290px;
    object-fit:contain;
}

@media (max-width: 991.98px){
    .gameaccx-logo{
        height:42px;
        max-width:235px;
    }
}

@media (max-width: 575.98px){
    .gameaccx-logo{
        height:36px;
        max-width:190px;
    }
    .navbar .container{
        gap:8px;
    }
}

/* Logo asset already contains its own brand artwork.
   Keep navbar sufficiently dark for cyan / purple contrast. */
.navbar.bg-dark{
    background:#090d1a !important;
}


/* ============================================================
   GameAccX V5.0 - Popular Games visual marketplace
   ============================================================ */
.game-poster-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
}
.game-poster-card{
    display:block;
    overflow:hidden;
    border:1px solid #e6e8ef;
    border-radius:16px;
    background:#fff;
    color:#15171b;
    text-decoration:none;
    transition:.18s ease;
    box-shadow:0 6px 18px rgba(20,25,40,.04);
}
.game-poster-card:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 34px rgba(15,20,45,.13);
}
.game-poster-media{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:#111525;
}
.game-poster-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .25s ease;
}
.game-poster-card:hover .game-poster-media img{
    transform:scale(1.035);
}
.game-poster-overlay{
    position:absolute;
    inset:35% 0 0;
    background:linear-gradient(180deg,transparent,rgba(5,8,18,.92));
}
.game-poster-title{
    position:absolute;
    left:13px;
    right:13px;
    bottom:12px;
    color:#fff;
    font-weight:800;
    line-height:1.12;
    text-shadow:0 2px 6px rgba(0,0,0,.65);
}
.game-poster-stats{
    display:flex;
    gap:8px;
    padding:11px 12px 4px;
    font-size:.72rem;
    font-weight:800;
}
.sell-stat{color:#198754}
.buy-stat{color:#7c3aed}
.game-poster-go{
    margin:5px 12px 11px;
    padding:5px 8px;
    text-align:center;
    background:#f4f6fb;
    border-radius:9px;
    color:#4f5668;
}
.market-panel{
    border:1px solid #e7e9f0;
    border-radius:18px;
    padding:18px;
    background:#fff;
    box-shadow:0 8px 25px rgba(20,25,40,.04);
}
.latest-row{
    display:flex;
    gap:12px;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #edf0f5;
    color:#15171b;
    text-decoration:none;
}
.latest-row:last-child{border-bottom:0}
.latest-row img{
    width:74px;
    height:58px;
    border-radius:10px;
    object-fit:cover;
    flex:0 0 auto;
}
.latest-main{min-width:0;flex:1}
.latest-title{
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.latest-meta{
    color:#858b98;
    font-size:.78rem;
    margin-top:3px;
}
.latest-price{
    font-weight:800;
    color:#198754;
    white-space:nowrap;
    text-align:right;
}
.latest-budget{
    font-weight:800;
    color:#7c3aed;
    white-space:nowrap;
    text-align:right;
}
.latest-budget span{
    font-size:.76rem;
    color:#8d64e8;
}

@media (max-width:1199.98px){
    .game-poster-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:767.98px){
    .game-poster-grid{
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        padding-bottom:8px;
    }
    .game-poster-card{
        min-width:180px;
        scroll-snap-align:start;
    }
    .latest-row img{width:62px;height:54px}
}

/* GameAccX V5.5 Facebook Importer */
.fb-image-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}
.fb-image-choice{
    position:relative;
    border:1px solid #e0e4eb;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    background:#f7f8fb;
}
.fb-image-choice input{
    position:absolute;
    z-index:2;
    top:8px;
    left:8px;
    width:20px;
    height:20px;
}
.fb-image-choice img{
    display:block;
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
}
@media(max-width:767.98px){
    .fb-image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
