:root{
    --tgi-purple:#B302B6;
    --tgi-purple-bright:#D45CFF;
    --tgi-black:#08070d;
    --tgi-panel:#14101a;
    --tgi-text:#f7f3fb;
    --tgi-muted:#b9b2c2;
}

/* Base */
body{
    background:var(--tgi-black);
}

#header{
    background:rgba(8,7,13,.95);
    color:#fff;
    border-bottom:1px solid rgba(212,92,255,.18);
}

#header h1,
#header h1 a{
    color:var(--tgi-purple-bright);
}

#header nav ul li a{
    color:#ddd;
}

#header nav ul li a:hover{
    color:#fff;
}

.kicker{
    margin:0 0 .7em 0;
    font-size:.72em;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--tgi-purple-bright);
}

/* Replace the template photography with TGI-owned CSS backgrounds. */
#intro,
#music,
#about{
    background-image:
        radial-gradient(circle at 20% 20%, rgba(179,2,182,.30), transparent 34rem),
        radial-gradient(circle at 80% 75%, rgba(212,92,255,.12), transparent 30rem),
        linear-gradient(135deg, #09070d 0%, #15101c 55%, #09070d 100%) !important;
    background-size:auto !important;
    background-attachment:fixed !important;
    background-position:center !important;
}

#intro .content{
    text-shadow:0 2px 20px rgba(0,0,0,.7);
}

#intro h2{
    line-height:.88;
    letter-spacing:-.04em;
    text-transform:uppercase;
}

#intro h2 span{
    color:var(--tgi-purple-bright);
}

#intro p{
    font-size:1.15em;
}

.tgi-full .box.style2{
    background:rgba(18,14,24,.91);
    color:var(--tgi-text);
    border:1px solid rgba(212,92,255,.18);
    box-shadow:0 18px 55px rgba(0,0,0,.35);
}

.tgi-full .box.style2 h2{
    color:#fff;
}

.tgi-full .box.style2 p{
    color:#d8d0df;
}

.tgi-section{
    padding-top:6em;
    padding-bottom:6em;
}

#games{
    background:#0c0a10;
    color:var(--tgi-text);
}

#games header h2,
#connect header h2{
    color:#fff;
}

#games header > p:last-child,
#connect header > p:last-child{
    color:var(--tgi-muted);
}

#connect{
    background:#110d17;
    color:var(--tgi-text);
}

/* Game cards */
.tgi-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:1.1em;
    margin-top:2.2em;
}

.tgi-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:190px;
    padding:1.5em;
    border-radius:12px;
    text-decoration:none;
    color:#fff !important;
    background:
        linear-gradient(145deg, rgba(179,2,182,.16), transparent 55%),
        #17121e;
    border:1px solid rgba(212,92,255,.16);
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.tgi-card:hover{
    transform:translateY(-4px);
    border-color:var(--tgi-purple-bright);
    box-shadow:0 18px 40px rgba(0,0,0,.34), 0 0 24px rgba(212,92,255,.10);
}

.tgi-card strong{
    display:block;
    font-size:1.35em;
    margin:.2em 0;
}

.tgi-card small{
    color:#bfb6c8;
}

.card-kicker{
    font-size:.65em;
    letter-spacing:.18em;
    font-weight:700;
    color:var(--tgi-purple-bright);
}

/* Smaller link actions */
.mini-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.7em;
    margin-top:1.4em;
}

.mini-actions a{
    display:inline-flex;
    align-items:center;
    gap:.5em;
    padding:.65em .95em;
    border-radius:8px;
    text-decoration:none;
    color:#fff !important;
    background:#21172a;
    border:1px solid rgba(212,92,255,.24);
}

.mini-actions a:hover{
    background:var(--tgi-purple);
}

/* Social buttons */
.social-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1em;
    max-width:900px;
    margin:2.3em auto 0;
}

.zx-social{
    --zx-base:#D45CFF;
    --zx-hover:#00D7FF;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.65em;
    min-height:64px;
    padding:.9em 1em;
    border-radius:10px;
    color:#050505 !important;
    text-decoration:none;
    font-weight:700;
    background:var(--zx-base);
    border:1px solid var(--zx-base);
    box-shadow:0 0 14px color-mix(in srgb, var(--zx-base) 35%, transparent);
    transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.zx-social:hover{
    transform:translateY(-2px);
    background:var(--zx-hover);
    border-color:var(--zx-hover);
    box-shadow:0 0 20px color-mix(in srgb, var(--zx-hover) 55%, transparent);
}

.zx-social .icon:before{
    margin-right:.05em;
}

/* Footer */
#footer{
    background:#08070d;
    color:#948b9b;
}

#footer a{
    color:#cfc5d5;
}

/* Snark box */
.snark-notice{
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(7,6,11,.84);
    backdrop-filter:blur(4px);
}

.snark-notice.show{display:flex}

.snark-card{
    width:min(430px,92vw);
    padding:28px 24px;
    border:1px solid rgba(212,92,255,.18);
    border-radius:16px;
    background:#12101a;
    box-shadow:0 18px 55px rgba(0,0,0,.45);
    color:#fff;
    text-align:center;
}

.snark-title{
    margin-bottom:8px;
    color:var(--tgi-purple-bright);
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.snark-close{
    --zx-base:#D45CFF;
    --zx-hover:#00D7FF;
    margin-top:18px;
    padding:9px 16px;
    border:1px solid var(--zx-base);
    border-radius:10px;
    background:var(--zx-base);
    color:#050505;
    font:inherit;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 0 14px color-mix(in srgb, var(--zx-base) 42%, transparent);
}

.snark-close:hover{
    background:var(--zx-hover);
    border-color:var(--zx-hover);
    box-shadow:0 0 18px color-mix(in srgb, var(--zx-hover) 55%, transparent);
}

.snark-close:focus{outline:none}

/* Responsive */
@media screen and (max-width: 980px){
    .tgi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .social-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media screen and (max-width: 736px){
    #header h1{
        font-size:.95em;
    }

    #header nav ul li{
        margin-left:.45em;
    }

    #header nav ul li a{
        font-size:.8em;
    }

    .tgi-section{
        padding-top:4.5em;
        padding-bottom:4.5em;
    }

    .tgi-grid,
    .social-grid{
        grid-template-columns:1fr;
    }

    .tgi-card{
        min-height:150px;
    }

    #intro p{
        font-size:1em;
    }
}


/* ------------------------------------------------------------
   TEST IMAGE PASS
   Generated placeholder art for layout testing only.
   ------------------------------------------------------------ */

#intro.has-test-image{
    background:
        linear-gradient(rgba(5,4,10,.38), rgba(5,4,10,.48)),
        url("../../images/hero-retro.png") center center / cover no-repeat !important;
}

#games.has-games-image{
    position:relative;
    background:
        linear-gradient(rgba(8,7,13,.92), rgba(8,7,13,.95)),
        url("../../images/games-arcade.png") center center / cover fixed no-repeat !important;
}

#games.has-games-image .content{
    position:relative;
    z-index:1;
}

#music.has-music-image{
    background:
        linear-gradient(90deg, rgba(7,6,11,.30), rgba(7,6,11,.70)),
        url("../../images/music-studio.png") center center / cover no-repeat !important;
}

#about.has-about-image{
    background:
        linear-gradient(90deg, rgba(7,6,11,.72), rgba(7,6,11,.32)),
        url("../../images/about-retro-tech.png") center center / cover no-repeat !important;
}

#intro .content{
    padding:2em 2.4em;
    border-radius:16px;
    background:rgba(8,7,13,.34);
    backdrop-filter:blur(2px);
}

#music .box.style2,
#about .box.style2{
    backdrop-filter:blur(7px);
}

@media screen and (max-width:736px){
    #games.has-games-image{
        background-attachment:scroll !important;
    }

    #intro.has-test-image,
    #music.has-music-image,
    #about.has-about-image{
        background-position:center center !important;
    }

    #intro .content{
        margin:0 1em;
        padding:1.4em 1.2em;
    }
}





/* Second image test section */
#vibe.has-vibe-image{
    background:
        linear-gradient(90deg, rgba(7,6,11,.26), rgba(7,6,11,.68)),
        url("../../images/arcade-moon-city.png") center center / cover no-repeat !important;
}

#vibe .box.style2{
    backdrop-filter:blur(7px);
}

@media screen and (max-width:736px){
    #vibe.has-vibe-image{
        background-position:center center !important;
    }
}


/* ------------------------------------------------------------
   Scroll badge test: replace the circular down-arrow with the
   uploaded WOMBAT badge image, larger, with a tiny arrow hint.
   ------------------------------------------------------------ */

#intro .button.style2.down,
.main .button.style2.down.anchored{
    width:104px;
    height:104px;
    min-width:104px;
    min-height:104px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent url("../../images/wombat-badge-scroll.png") center 42% / contain no-repeat !important;
    box-shadow:none !important;
    text-indent:-9999px;
    overflow:visible;
    opacity:1 !important;
    animation:tgiBadgeFloat 2.4s ease-in-out infinite;
    transition:transform .2s ease, filter .2s ease;
    will-change:transform;
    z-index:5;
    position:relative;
    display:inline-block;
}

#intro .button.style2.down:before,
.main .button.style2.down.anchored:before{
    content:"" !important;
    display:none !important;
}

#intro .button.style2.down:after,
.main .button.style2.down.anchored:after{
    content:"↓";
    position:absolute;
    left:50%;
    bottom:-18px;
    transform:translateX(-50%);
    font-size:24px;
    line-height:1;
    color:#f2ecff;
    text-indent:0;
    text-shadow:0 0 10px rgba(210,120,255,.65);
    pointer-events:none;
    opacity:.95;
    animation:tgiArrowHint 7.2s ease forwards;
}

#intro .button.style2.down:hover,
.main .button.style2.down.anchored:hover{
    animation-play-state:paused;
    filter:drop-shadow(0 0 14px rgba(212,92,255,.48));
}

@keyframes tgiBadgeFloat{
    0%, 100%{
        transform:translate3d(0,0,0);
    }
    50%{
        transform:translate3d(0,8px,0);
    }
}

@keyframes tgiArrowHint{
    0%, 78%{
        opacity:.95;
    }
    100%{
        opacity:0;
    }
}

@media screen and (max-width:736px){
    #intro .button.style2.down,
    .main .button.style2.down.anchored{
        width:88px;
        height:88px;
        min-width:88px;
        min-height:88px;
    }

    #intro .button.style2.down:after,
    .main .button.style2.down.anchored:after{
        bottom:-15px;
        font-size:20px;
    }
}

@media (prefers-reduced-motion:reduce){
    #intro .button.style2.down,
    .main .button.style2.down.anchored{
        animation:none;
    }

    #intro .button.style2.down:after,
    .main .button.style2.down.anchored:after{
        animation:none;
        opacity:.95;
    }
}


/* Keep WOMBAT scroll badges centered at the bottom of every full-screen section */
.main.fullscreen{
    position:relative;
}

.main.fullscreen > .button.style2.down.anchored{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    bottom:28px !important;
    margin:0 !important;
    transform:translateX(-50%) !important;
}

@keyframes tgiBadgeFloatCentered{
    0%, 100%{
        transform:translate3d(-50%,0,0);
    }
    50%{
        transform:translate3d(-50%,8px,0);
    }
}

.main.fullscreen > .button.style2.down.anchored{
    animation:tgiBadgeFloatCentered 2.4s ease-in-out infinite;
}

@media screen and (max-width:736px){
    .main.fullscreen > .button.style2.down.anchored{
        bottom:20px !important;
    }
}

@media (prefers-reduced-motion:reduce){
    .main.fullscreen > .button.style2.down.anchored{
        animation:none;
        transform:translateX(-50%) !important;
    }
}


/* WOMBAT badge only on the top hero section.
   Later sections return to the template's normal down-arrow cue. */
.main.fullscreen > .button.style2.down.anchored{
    width:5em !important;
    height:5em !important;
    min-width:5em !important;
    min-height:5em !important;
    padding:0 !important;
    border:0 !important;
    border-radius:100% !important;
    background:rgba(255,255,255,0.05) !important;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,0.5) !important;
    text-indent:-9999px !important;
    overflow:hidden !important;
    filter:none !important;
    animation:none !important;
    left:50% !important;
    right:auto !important;
    bottom:28px !important;
    margin:0 !important;
    transform:translateX(-50%) !important;
}

.main.fullscreen > .button.style2.down.anchored:before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:18px !important;
    height:18px !important;
    margin:-11px 0 0 -9px !important;
    border-right:2px solid rgba(255,255,255,.9) !important;
    border-bottom:2px solid rgba(255,255,255,.9) !important;
    transform:rotate(45deg) !important;
}

.main.fullscreen > .button.style2.down.anchored:after{
    content:"" !important;
    display:none !important;
}

/* Keep the hero WOMBAT badge version intact */
#intro .button.style2.down{
    width:104px;
    height:104px;
    min-width:104px;
    min-height:104px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent url("../../images/wombat-badge-scroll.png") center 42% / contain no-repeat !important;
    box-shadow:none !important;
    text-indent:-9999px;
    overflow:visible;
    opacity:1 !important;
    animation:tgiBadgeFloat 2.4s ease-in-out infinite;
    transition:transform .2s ease, filter .2s ease;
    will-change:transform;
    z-index:5;
    position:relative;
    display:inline-block;
}

#intro .button.style2.down:before{
    content:"" !important;
    display:none !important;
}

#intro .button.style2.down:after{
    content:"↓";
    position:absolute;
    left:50%;
    bottom:-18px;
    transform:translateX(-50%);
    font-size:24px;
    line-height:1;
    color:#f2ecff;
    text-indent:0;
    text-shadow:0 0 10px rgba(210,120,255,.65);
    pointer-events:none;
    opacity:.95;
    animation:tgiArrowHint 7.2s ease forwards;
}

#intro .button.style2.down:hover{
    animation-play-state:paused;
    filter:drop-shadow(0 0 14px rgba(212,92,255,.48));
}

@media screen and (max-width:736px){
    #intro .button.style2.down{
        width:88px;
        height:88px;
        min-width:88px;
        min-height:88px;
    }

    #intro .button.style2.down:after{
        bottom:-15px;
        font-size:20px;
    }

    .main.fullscreen > .button.style2.down.anchored{
        bottom:20px !important;
    }
}


/* ------------------------------------------------------------
   MOBILE LAYOUT FIX
   Tightens the hero and Retro Signal sections for narrow screens.
   ------------------------------------------------------------ */
@media screen and (max-width:736px){

    /* Hero */
    #intro{
        min-height:100svh !important;
        height:auto !important;
        padding-top:4.5em !important;
        padding-bottom:3em !important;
        overflow:hidden;
        background-position:center center !important;
    }

    #intro .content{
        width:calc(100% - 2em) !important;
        max-width:100% !important;
        margin:0 auto !important;
        padding:1.35em 1em 1.8em !important;
        overflow:hidden;
    }

    #intro .kicker{
        font-size:.68em !important;
        letter-spacing:.16em !important;
        line-height:1.55 !important;
        margin-bottom:1.1em !important;
    }

    #intro h2{
        width:100%;
        max-width:100%;
        margin:0 auto .45em !important;
        font-size:clamp(2.7rem, 14vw, 4.15rem) !important;
        line-height:.9 !important;
        letter-spacing:-.045em !important;
        overflow-wrap:normal !important;
        word-break:normal !important;
    }

    #intro h2 span{
        display:block;
        width:100%;
        font-size:.82em;
        white-space:nowrap;
    }

    #intro .content > p{
        max-width:21em !important;
        margin-left:auto !important;
        margin-right:auto !important;
        font-size:1rem !important;
        line-height:1.55 !important;
    }

    #intro footer{
        margin-top:1.45em !important;
    }

    #intro .button.style2.down{
        width:82px !important;
        height:82px !important;
        min-width:82px !important;
        min-height:82px !important;
    }

    /* Retro Signal / second image */
    #vibe{
        min-height:100svh !important;
        height:auto !important;
        padding:4.75em 0 3em !important;
        background-position:center center !important;
    }

    #vibe .content.box.style2{
        width:calc(100% - 2em) !important;
        max-width:34em !important;
        margin:0 auto !important;
        padding:1.55em 1.35em !important;
    }

    #vibe .kicker{
        font-size:.67em !important;
        letter-spacing:.18em !important;
        margin-bottom:0 !important;
    }

    #vibe h2{
        font-size:clamp(1.9rem, 9vw, 2.7rem) !important;
        line-height:1.08 !important;
        margin-bottom:.65em !important;
    }

    #vibe p{
        font-size:.98rem !important;
        line-height:1.55 !important;
        margin-bottom:.9em !important;
    }

    #vibe p:last-of-type{
        margin-bottom:0 !important;
    }

    /* Keep later sections from inheriting oversized desktop spacing */
    .tgi-full .content.box.style2{
        max-width:calc(100% - 2em);
    }
}

@media screen and (max-width:420px){
    #intro h2{
        font-size:clamp(2.35rem, 13vw, 3.35rem) !important;
    }

    #intro h2 span{
        font-size:.80em;
    }

    #intro .content > p{
        font-size:.94rem !important;
    }

    #vibe .content.box.style2{
        padding:1.35em 1.15em !important;
    }

    #vibe h2{
        font-size:clamp(1.75rem, 8.5vw, 2.25rem) !important;
    }

    #vibe p{
        font-size:.92rem !important;
        line-height:1.48 !important;
    }
}


/* ------------------------------------------------------------
   MOBILE CENTERING + REMOVE LATER DOWN ARROWS
   ------------------------------------------------------------ */

/* Hide all anchored down arrows after the opening hero badge */
.main.fullscreen > .button.style2.down.anchored{
    display:none !important;
}

/* Center WOMBAT33R Music and About content cards on mobile */
@media screen and (max-width:736px){

    #music,
    #about{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:4.75em 0 3em !important;
    }

    #music .content.box.style2,
    #about .content.box.style2{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
        float:none !important;
        width:calc(100% - 2em) !important;
        max-width:34em !important;
        margin:0 auto !important;
        padding:1.55em 1.35em !important;
        text-align:center !important;
    }

    #music .mini-actions,
    #about .mini-actions{
        justify-content:center !important;
    }

    #music .kicker,
    #about .kicker{
        text-align:center !important;
    }

    #music header,
    #about header,
    #music p,
    #about p{
        text-align:center !important;
    }
}

@media screen and (max-width:420px){
    #music .content.box.style2,
    #about .content.box.style2{
        padding:1.35em 1.15em !important;
    }
}


/* ------------------------------------------------------------
   MOBILE PORTRAIT-ONLY PRESENTATION
   A normal webpage cannot truly lock browser orientation, so
   landscape is blocked with a rotate-back message.
   ------------------------------------------------------------ */

.rotate-notice{
    display:none;
}

@media screen and (max-width:900px) and (orientation:landscape){
    html,
    body{
        overflow:hidden !important;
        background:#08070d !important;
    }

    body > *:not(.rotate-notice){
        visibility:hidden !important;
    }

    .rotate-notice{
        position:fixed;
        inset:0;
        z-index:99999;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:24px;
        background:
            radial-gradient(circle at 50% 30%, rgba(179,2,182,.18), transparent 28rem),
            #08070d;
        color:#fff;
        text-align:center;
        visibility:visible !important;
    }

    .rotate-card{
        width:min(420px,92vw);
        padding:28px 24px;
        border:1px solid rgba(212,92,255,.24);
        border-radius:16px;
        background:#12101a;
        box-shadow:0 18px 55px rgba(0,0,0,.45);
        font-size:1rem;
        line-height:1.5;
    }

    .rotate-title{
        margin-bottom:8px;
        color:#D45CFF;
        font-weight:700;
        letter-spacing:.14em;
        text-transform:uppercase;
    }
}


/* Mobile-only extra spacing between section kicker and heading */


/* IN THE BEGINNING — mobile gap control
   Change only this padding-bottom value to adjust the gap. */
@media screen and (max-width:736px){
    #vibe .kicker{
        margin-bottom:0 !important;
        padding-bottom:1.5em !important;
    }
}


/* ------------------------------------------------------------
   LATEST FEATURE TEST
   ------------------------------------------------------------ */
.tgi-latest{
    position:relative;
    min-height:72vh;
    display:flex;
    align-items:center;
    background:
        linear-gradient(90deg, rgba(8,7,13,.92) 0%, rgba(8,7,13,.72) 42%, rgba(8,7,13,.28) 100%),
        url("../../images/hero-retro.png") center / cover no-repeat;
    color:#fff;
}

.latest-overlay{
    width:100%;
    padding:6em 5vw;
}

.latest-panel{
    width:min(560px, 100%);
    padding:2.2em 2.25em;
    border:1px solid rgba(212,92,255,.2);
    border-radius:14px;
    background:rgba(18,14,24,.88);
    box-shadow:0 22px 60px rgba(0,0,0,.42);
    backdrop-filter:blur(4px);
}

.latest-panel h2{
    margin:0 0 .15em;
    color:#fff;
    font-size:clamp(2.5rem, 5vw, 4.6rem);
    line-height:.95;
}

.latest-artist{
    margin:0 0 1.1em !important;
    color:var(--tgi-purple-bright) !important;
    font-weight:700;
    letter-spacing:.12em;
}

.latest-panel > p{
    color:#d8d0df;
}

.latest-date{
    margin-top:1.35em !important;
    color:#fff !important;
    font-weight:700;
    letter-spacing:.08em;
}

.latest-actions{
    margin-top:1.25em;
}

@media screen and (max-width:736px){
    .tgi-latest{
        min-height:auto;
        background-position:center;
    }

    .latest-overlay{
        padding:4.5em 1em;
    }

    .latest-panel{
        width:100%;
        padding:1.65em 1.35em;
        text-align:center;
    }

    .latest-panel h2{
        font-size:clamp(2.25rem, 11vw, 3.2rem);
    }

    .latest-actions{
        justify-content:center;
    }
}


/* ------------------------------------------------------------
   LATEST PANEL — stronger floating / pop-out treatment
   ------------------------------------------------------------ */
#latest .latest-panel{
    position:relative;
    background:rgba(18,14,24,.94);
    border:1px solid rgba(212,92,255,.28);
    box-shadow:
        0 28px 70px rgba(0,0,0,.58),
        0 0 34px rgba(179,2,182,.10);
    transform:translateY(-4px);
}

#latest .latest-panel:before{
    content:"";
    position:absolute;
    inset:10px;
    border:1px solid rgba(255,255,255,.035);
    border-radius:10px;
    pointer-events:none;
}

@media screen and (max-width:736px){
    #latest .latest-panel{
        transform:none;
        box-shadow:
            0 20px 48px rgba(0,0,0,.5),
            0 0 24px rgba(179,2,182,.08);
    }
}


/* ------------------------------------------------------------
   LATEST — use the same floating panel treatment as Music/About
   ------------------------------------------------------------ */
#latest{
    background-image:
        linear-gradient(90deg, rgba(8,7,13,.30), rgba(8,7,13,.10)),
        url("../../images/hero-retro.png") !important;
    background-size:cover !important;
    background-position:center !important;
    background-attachment:fixed !important;
}

#latest .content.box.style2{
    background:rgba(18,14,24,.91);
    color:var(--tgi-text);
    border:1px solid rgba(212,92,255,.18);
    box-shadow:0 18px 55px rgba(0,0,0,.35);
}

#latest h2{
    color:#fff;
}

#latest p{
    color:#d8d0df;
}

#latest .latest-artist{
    color:var(--tgi-purple-bright) !important;
    font-weight:700;
    letter-spacing:.12em;
    margin-top:.2em;
}

#latest .latest-date{
    color:#fff !important;
    font-weight:700;
    letter-spacing:.08em;
}

@media screen and (max-width:736px){
    #latest{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:4.75em 0 3em !important;
        background-attachment:scroll !important;
    }

    #latest .content.box.style2{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
        float:none !important;
        width:calc(100% - 2em) !important;
        max-width:34em !important;
        margin:0 auto !important;
        padding:1.55em 1.35em !important;
        text-align:center !important;
    }

    #latest .mini-actions{
        justify-content:center !important;
    }
}


/* ------------------------------------------------------------
   LATEST ARTWORK PANEL
   ------------------------------------------------------------ */
#latest .latest-with-art{
    display:flex;
    flex-direction:column;
    gap:.7rem;
}

#latest .latest-art{
    margin:0;
    width:100%;
}

#latest .latest-art img{
    display:block;
    width:100%;
    max-width:350px;
    margin:0 auto;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 36px rgba(0,0,0,.35), 0 0 0 1px rgba(212,92,255,.08);
    background:#09070e;
}

#latest .latest-with-art header,
#latest .latest-with-art > p,
#latest .latest-with-art .mini-actions{
    width:100%;
}

@media screen and (max-width:736px){
    #latest .latest-art img{
        max-width:100%;
    }
}


/* ------------------------------------------------------------
   LATEST — final mobile centering
   ------------------------------------------------------------ */
@media screen and (max-width:736px){
    #latest .content.box.style2.latest-with-art{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
    }

    #latest .latest-art{
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        width:100% !important;
        margin:0 auto .35rem !important;
        text-align:center !important;
    }

    #latest .latest-art img{
        display:block !important;
        width:min(350px, 100%) !important;
        max-width:350px !important;
        height:auto !important;
        margin:0 auto !important;
    }

    #latest .latest-with-art header,
    #latest .latest-with-art > p{
        width:100% !important;
        margin-left:auto !important;
        margin-right:auto !important;
        text-align:center !important;
    }

    #latest .mini-actions{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    #latest .mini-actions a{
        width:auto !important;
        min-width:0 !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}


/* Heart on Fire latest panel platform message */
#latest .latest-platforms{
    margin-top:1.15em !important;
    margin-bottom:0 !important;
    color:#fff !important;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:none;
}

@media screen and (max-width:736px){
    #latest .latest-platforms{
        text-align:center !important;
    }
}