body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.bg-xgt { background-color: #009a47; }

body
{
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color:#e3e3e3;
}

.page-header-container
{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:5rem;
    margin-bottom:2rem;
    background-image:linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}
.page-header
{
    background-color:rgb(0,0,0,0.6);
    padding-top:1rem;
    padding-left:2rem;
}
.page-header h1 a
{
    color:#ffffff;
    text-shadow:-2px 2px #4d4d4d;
}

.profile-detail-item
{
    background-color:#d4d4d4;
    margin-right:1.2rem;
    margin-bottom:1.2rem;
    border-radius:0.5rem;
    padding:5px;
}
.profile-detail-item span
{
    display:block;
    font-weight:bold;
    border-bottom:1px solid #e3e3e3;
}

.avatar img
{
    width:100px;
    height:100px;
}

.game-card
{
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    background-color: #ffffff;
    border: 1px solid #dddddd;
    margin-bottom:2rem;
}

.user-card-bg
{
    background-repeat: no-repeat;
    background-position: 100% 3rem;
}
.game-card-container
{
    padding:1rem;
    position: relative;
}
.game-card-cover
{
    display:block;
    height:6rem;
    background-size: cover;
    background-position: 50% 50%;
    background-image:linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}

.game-card-desc
{
    height:11rem;
}
.game-card-desc p
{
    margin-bottom:0px;
    font-size:0.9em;
    margin-bottom:0.5rem;
}

.footer p
{
    font-size:0.8rem;
}

.leader-num
{
    width:100px;
}

.container {
    margin-bottom:1rem;
}

.recent-games {
    margin-bottom: -1.2rem;
}

.game-clip
{
    margin-bottom:2rem;
    position:relative;
}
.game-clip a
{
    display:block;
    height:8rem;
    background-size: cover;
    background-position: 50% 50%;
    background-image:linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.game-clip .time 
{
    position:absolute;
    top:0px;
    right:0px;
}
.game-clip a .play
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color:#ffffff;
    opacity:0.5;
    width:6rem;
    height:6rem;
}
.game-clip a:hover .play
{
    opacity:1.0;
}

.video-fit 
{
    width: 100%;
    height: auto;
}
.nav-link
{
    font-size:1.2rem;
}
.navbar
{
    padding-left:2rem;
    padding-right:2rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05),inset 0 -1px 0 rgba(0,0,0,0.15);
}

/* Reserve space for mobile/sticky bottom ads so footer links remain tappable */
@media (max-width: 991.98px) {
    .footer {
        /* Fallback for browsers without env(safe-area-inset-bottom) */
        padding-bottom: 100px;
        /* On iOS/modern browsers, include safe area inset if present */
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }
}

/* Desktop spacer to keep footer links above bottom-fixed ads */
@media (min-width: 992px) {
    .footer {
        /* Push footer content above sticky bottom ads on desktop */
        margin-bottom: 260px;
    }
}