@font-face {
    font-family: 'Reddit';
    src: url('../fonts/RedditMono-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Zen';
    src: url('../fonts/ZenDots-Regular.ttf') format('truetype');
    font-weight: 400; /* or normal */
    font-style: normal;
}

@font-face {
    font-family: 'Orbitron';
    src: url('../fonts/Orbitron-VariableFont_wght.ttf') format('truetype');
    font-weight: 400; /* or normal */
    font-style: normal;
}


:root{
    font-family:'Zen';
    letter-spacing:.03em;
    

    --white: #edecef;
    --black: #000;
    --graywhite:#bebcc2;

    --gray1: #0A0520;
    --gray2: #242630;
    --gray3: #20373F;
    --gray4: #5c676a;
    --gray5: #7e8587;
    --linear3: linear-gradient(135deg, var(--gray2), var(--gray1));
    --radial1: radial-gradient( var(--gray3), var(--gray2), var(--gray1));

    --darkgray1:#080e0ce6;


    --green1: #00D4AC;
    --yellow: #E8FD5F;
    --linear1: linear-gradient(to bottom, var(--green1), var(--yellow));

    --darkpurp: #24174D;
    --darkpurp2:#0A0520D9;
    --purp: #8E70FA;
    --teal: #00D4F5;
    --linear2:linear-gradient(to bottom, var(--purp), var(--teal));

    --glow1: #00D4AC4D;
    --glow2: #00D4AC08;

    

    --star-small: 0.125rem;
    --star-medium: .25rem;
    --star-large: .375rem;


    --panel-bg:#080e0c;
    --panel-bg2:#080e0cf2;
    --panel-cell:#0c1411;
    --panel-bdr:#0c1411;
    --panel-bdr2:#264038;
    --panel-head:#0f1c17;


    /* units */
    --1px: 0.0625rem;
    --2px: 0.125rem;
    --3px:0.188rem;
    --4px: .25rem;


    /* hex colors + alpha */
    /* .04 */
    --light1: #00d4ac0a;
    /* .07 */
    --light2: #00d4ac17;
    /* .2 */
    --light3: #00d4ac33;
    
    --shadow1: #00d4ac99;
    --shadow2:#00d4ac66;
    --shadow3: #00d4ac80;

    --dark1: #24174de6;
    --dark2: #080e0ce6;

    --pale1:#00d4f533;
    --pale2:#00d4f50a;
    --pale3:#00d4f517;


    --drop:#FF4757;
    --drop1: #ff4757b3;
    --drop2: #ff475712;
    --drop3:#ff475733;
    --drop4:#ff475780;
    


}   

html{
    background:var(--radial1);

    cursor:url('../media/crosshair.png'),auto;
    font-size: 1.25em;
}
@media (780px <= width <= 1280px) {
    html{
        font-size:1.375em;
    }
}
@media (width > 1280px) {
    html{
        font-size:1.5em;
    }
}


body{
    height:100%;
    overflow: hidden;
    color:var(--white);
}
/* want to add a scanpulse glitchy animation overlay */
body::after{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1111;
    background: repeating-linear-gradient(
        to bottom,
        /* first stripe is invisible */
        transparent, transparent var(--2px),
        var(--light1) var(--2px),
        var(--light1) var(--4px)
    );

    animation: pulse 4s ease-in-out infinite;


}








/*
Starfield background (Parallax Star Background) adapted from:
https://codepen.io/sarazond/pen/LYGbwj

Original implementation is by Saransh Sinha (sarazond on CodePen) uses Sass functions and box-shadow to generate randomly positioned stars and animate them vertically to simulate parallax motion. 

This version has been rewritten in pure CSS using layered radial-gradients instead of Sass-generated
box-shadows. 
Each radial-gradient is meant to represent a single star rendered as a small circular gradient with a solid center and transparent edges. Star sizes are determined using CSS root variables
to create size variations.
The percentage coordinates are used to position stars relative to the actual viewport.

The animation takes use of vertical transforms to showcase the movement of stars through space.
*/

.starsbg{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:200vh;

    pointer-events:none;

    z-index:-1;

    background-image:
        /* radial-gradient creates circles that fade out towards edges */ 
        /* ()px ()px is the size of the star */
        /* at ()% ()% is position of the star */
        /* white, transparent is color of star to faded out edges */

        radial-gradient(
            var(--star-medium) var(--star-medium) 
            at 15% 25%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-large) var(--star-large) 
            at 10% 20%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-medium) var(--star-medium)
            at 30% 80%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-small) var(--star-small)
            at 35% 95%,
            white, transparent
            ),
        radial-gradient(
            var(--star-small) var(--star-small)
            at 50% 40%,
            white, transparent
            ),
        radial-gradient(
            var(--star-medium) var(--star-medium) 
            at 55% 55%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-large) var(--star-large)
            at 70% 10%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-small) var(--star-small)
            at 75% 35%,
            white, transparent
            ),
        radial-gradient(
            var(--star-medium) var(--star-medium)
            at 90% 60%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-small) var(--star-small)
            at 20% 50%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-small) var(--star-small)
            at 25% 45%,
            white, transparent
            ),
        radial-gradient(
            var(--star-medium) var(--star-medium) 
            at 80% 90%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-small) var(--star-small) 
            at 85% 95%, 
            white, transparent
            );
        
    /* to continuously run, animation set on infinite */
    animation: starSpace 10s linear infinite;

}





/* animation keyframes */

@keyframes starSpace {
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-50%);
    }
}
/* Animation keyframes suggested by Claude AI */
@keyframes pulse {
    /* from start to end at 80% opacity*/
    0%,100%{
        opacity: 80%;
    }
    /* at halfway the opacity lowers*/
    50%{
        opacity:50%;
    }
}

@keyframes blink{
    0%, 100%{
        opacity:1;
    }
    50%{
        opacity:0;
    }
}

/* glitch animations for  */
@keyframes glitch{
    0%, 90%, 100%{
        transform:none;
    }
    92%{
        transform: skewX(1deg) translateX(1%);
    }
    94%{
        transform: skewX(-1deg) translateX(-.75%);
    }
    96%{
        transform: none;
    }
    98%{
        transform: skewX(.5deg);
    }
}
/* for top of the element */
@keyframes glitchUp{
    0%, 88%, 100%{
        opacity:0;
        transform:translateX(0);
    }
    91%{
        opacity:0.7;
        transform: translateX(-3%);
    }
    93%{
        opacity:0.7;
        transform: translateX(3%);
    }
    95%{
        opacity:0;
        transform:translateX(0);
    }
    
}
/* for bottom of the element */
@keyframes glitchDown{
    0%, 88%, 100%{
        opacity:0;
        transform:translateX(0);
    }
    91%{
        opacity:0.7;
        transform: translateX(3%);
    }
    93%{
        opacity:0.7;
        transform: translateX(-3%);
    }
    95%{
        opacity:0;
        transform:translateX(0);
    }
    
}

/* float animation keyframes for channel blocks */
@keyframes float {
    0%   { 
        transform: translate(0, 0); 
    }
    25%  { 
        transform: translate(0.125rem, -0.25rem); 
    }
    50%  { 
        transform: translate(0.188rem, 0.313rem); 
    }
    75%  { 
        transform: translate(0.313rem, 0.125rem); 
    }
    100% { 
        transform: translate(0, 0); 
    }
}

@keyframes promptBlink {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: .2; 
    }
}






/* for hero flash transition */

#hero-flash{
    position:fixed;
    inset:0;
    z-index: 8001;
    background:var(--white);
    opacity:0;
    pointer-events: none;
    transition:opacity .05s ease;
    
}

#hero-flash.on{
    opacity: .9;
}

/* for hero screen */

#hero {
    
    position:fixed;
    inset:0;
    z-index:8000;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background: var(--panel-bg);
    cursor: url('../media/cursor.png'), pointer;
    transition: 
        opacity .9s ease, 
        visibility .9s ease;
}

#hero.leaving {
    opacity: 0;
    visibility:hidden;
    pointer-events:none;
}

.hero-glow{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 50% 60%, 
                        #00D4AC12 0%, 
                        transparent 70%),
        radial-gradient(ellipse 80% 40% at 50% 100%, 
                        #8E70FA17 0%, 
                        transparent 60%);

}
/* reused star animation from .starsbg */
.hero-stars{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:200vh;

    pointer-events:none;

    z-index:-1;

    background-image:
        /* radial-gradient creates circles that fade out towards edges */ 
        /* ()px ()px is the size of the star */
        /* at ()% ()% is position of the star */
        /* white, transparent is color of star to faded out edges */

        radial-gradient(
            var(--star-medium) var(--star-medium) 
            at 15% 25%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-large) var(--star-large) 
            at 10% 20%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-medium) var(--star-medium)
            at 30% 80%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-small) var(--star-small)
            at 35% 95%,
            white, transparent
            ),
        radial-gradient(
            var(--star-small) var(--star-small)
            at 50% 40%,
            white, transparent
            ),
        radial-gradient(
            var(--star-medium) var(--star-medium) 
            at 55% 55%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-large) var(--star-large)
            at 70% 10%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-small) var(--star-small)
            at 75% 35%,
            white, transparent
            ),
        radial-gradient(
            var(--star-medium) var(--star-medium)
            at 90% 60%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-small) var(--star-small)
            at 20% 50%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-small) var(--star-small)
            at 25% 45%,
            white, transparent
            ),
        radial-gradient(
            var(--star-medium) var(--star-medium) 
            at 80% 90%, 
            white, transparent
            ),
        radial-gradient(
            var(--star-small) var(--star-small) 
            at 85% 95%, 
            white, transparent
            );
        
    /* to continuously run, animation set on infinite */
    animation: starSpace 10s linear infinite;


}

.hero-line{
    position:relative;
    z-index:2;
    width:90vw;
    height:.05rem;
    background: linear-gradient(
        to right,
        transparent 0%,
        #00D4AC33 15%,
        #00D4ACB3 50%,
        #00D4AC33 85%,
        transparent 100%
    );
}
.hero-line.bottom{
    background: linear-gradient(
        to right,
        transparent 0%,
        #E8FD5F26 15%,
        #E8FD5F80 50%,
        #E8FD5F26 85%,
        transparent 100%
    );
}


.hero-inner{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
    padding:2.5rem 0;
    width:90vw;
}
/* TODO add animation */
.hero-eyebrow{
    font-family:'Orbitron';
    font-size: .5rem;
    letter-spacing:.25em;
    color:var(--green1);
    margin-bottom:1.8rem;
    /* opacity:0; */
    text-shadow: 0 0 .75rem var(--shadow1);
}
/* TODO add animation */
.hero-title {
    font-family:'Zen';
    font-size:2rem;
    letter-spacing:.06em;
    line-height:.95;
    text-align:center;
    background-image: linear-gradient(to bottom, var(--green1), var(--yellow));
    color: transparent;
    background-clip: text;
    /* opacity:0; */
    position:relative
}



/* TODO add animation */
.hero-subtitle{
    font-family:'Orbitron';
    font-size:.75rem;
    letter-spacing:.25em;
    color:var(--gray5);
    margin-top:1.4rem;
    text-align:center;
    /* opacity:0; */

}
/* TODO add animation */
.hero-prompt{
    margin-top:3rem;
    font-family:'Orbitron';
    font-size:.65rem;
    letter-spacing:.3em;
    color:var(--white);
    opacity:0;
    animation: promptBlink 1.4s ease infinite;

}


.bottom-text {
    position: absolute;
    bottom: 1.7rem;
    left: 2rem;
    right: 2rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

@media (780px <= width <= 1280px) {
    .bottom-text {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

@media (width > 1280px) {
    .bottom-text {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.hero-credit,
.hero-version {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    font-family: 'Orbitron';
    font-size: .7rem;
    letter-spacing: .15em;
    color: var(--gray4);
}


/* hero corner brackets */
/* TODO add animation */
.hero-corner{
    position:absolute;
    z-index:2;
    width:1.25rem;
    height:1.25rem;
    pointer-events:none;
    /* opacity:0; */
}
.hero-corner.tl { 
    top: 16px;    
    left: 16px;  
    border-top:    
    2px solid var(--green1); 
    border-left:  2px solid var(--green1); 
}
.hero-corner.tr { 
    top: 1rem;    
    right: 1rem; 
    border-top: var(--2px) solid var(--green1); 
    border-right: var(--2px) solid var(--green1); 
}
.hero-corner.bl { 
    bottom: 1rem; 
    left: 1rem;  
    border-bottom: var(--2px) solid var(--yellow); 
    border-left:  var(--2px) solid var(--yellow); 
}
.hero-corner.br { 
    bottom: 1rem; 
    right: 1rem; 
    border-bottom: var(--2px) solid var(--yellow); 
    border-right: var(--2px) solid var(--yellow); 
}




#shell {
    position:relative;
    z-index:1;
    width:100vw;
    height:100vh;
    display:flex;
    align-items:stretch;
    justify-content:center;
    padding:.5rem;



    
}
@media (360px <= width <= 780px) {
    #shell {
        padding:.5rem;
        align-items:stretch;
    }
}

@media (780px <= width <= 1280px) {
    #shell {
        padding:1rem;
        align-items:center;
    }
}

@media (width > 1280px) {
    #shell {
        padding:1rem;
        align-items:center;
    }
}


#panel-container{
    display:flex;
    flex-direction:column;
    gap:var(--3px);
    width: 100%;
    height:100%;
    filter:drop-shadow(var(--black));



    
}
@media (360px <= width <= 780px) {
    #panel-container{
        width:100%;
        height:100%;
    }
}

@media (780px <= width <= 1280px) {
    #panel-container{
        width:92vw;
        height:90vh;
    }
}

@media (width > 1280px) {
    #panel-container{
        width:92vw;
        height:90vh;
    }
}

#hud-bar{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:.375rem;
    padding: 0.016rem 0.031rem;
    height: auto;
    background: linear-gradient(to right, var(--dark1), var(--dark2));
    border: .0625rem solid var(--panel-bdr2);
    border-bottom: .125rem solid var(--shadow2);


    
}
@media (360px <= width <= 780px) {
    #hud-bar{
        flex-wrap: wrap;
        height: auto;
        padding: 0.25rem 0.5rem;
        gap: 0.375rem;
    }
}

@media (780px <= width <= 1280px) {
    #hud-bar{
        flex-wrap: nowrap;
        height: 2.25rem;
        padding: 0.3125rem 0.75rem;
        gap: 0.625rem;
    }
}

@media (width > 1280px) {
    #hud-bar{
        flex-wrap: nowrap;
        gap: 0.625rem;
        padding: 0.3125rem 0.75rem;
        height: 2.25rem;
    }
}
.hud-blink{
    font-size: .4rem;
    color:var(--green1);
    animation:blink 1.2s step-end infinite;
}
.hud-title{
    font-family: 'Zen';
    font-size: .75rem;
    font-weight:900;
    letter-spacing:.05em;
    background:linear-gradient(to right, var(--green1), var(--yellow));
    background-clip: text;
    color: transparent;
    animation: glitch 5s infinite;
}
.hud-pipe{
    color:var(--panel-bdr2);
    font-size:.7rem;
}
.hud-stat{
    font-family: 'Orbitron';
    font-size: .45rem;
    letter-spacing: .12em;
    color: var(--gray4);
}
.hud-stat b {
    color: var(--green1);
}
/* pushes TOTAL to far right */
.hud-gap{
    display:none;

}
@media (360px <= width <= 780px) {
    .hud-gap{
        display:none;
    }
}

@media (780px <= width <= 1280px) {
    .hud-gap{
        display:block;
        flex:1;
    }
}

@media (width > 1280px) {
    .hud-gap{
        display:block;
        flex:1;
    }
}


.hud-total{
    font-family: 'Orbitron';
    font-size: .45rem;
    letter-spacing: .12em;
    color: var(--gray4);
}
.hud-total b{
    color:var(--yellow);
    animation:blink 2s step-end infinite;
}







#panels{
    flex:1;
    min-height:0;
    display:flex;
    /* details on top, while inventory on bottom */
    flex-direction:column;
    position:relative;
    /* gap:.12rem; */

}
/* @media (360px <= width <= 780px) {
    #panels{
        flex-direction: column;
    }
} */

@media (780px <= width <= 1280px) {
    #panels{
        flex-direction: row;
    }
}

@media (width > 1280px) {
    #panels{
        flex-direction: row;
    }

}
/* left panel - inventory */
#panel-inv{
    flex:1;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    background:var(--panel-bg);
    border:.0625rem solid var(--panel-bdr2);
    overflow-y:auto;
    
}
@media (360px <= width <= 780px) {
    #panel-inv{
        flex: 1;
    }
}

@media (780px <= width <= 1280px) {
    #panel-inv{
        flex: 58;
        
    }
}

@media (width > 1280px) {
    #panel-inv{
        flex: 58;
        
    }

}
/* right panel - block details */
#panel-detail{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:100;
    height:90vh;
    transform:translateY(calc(100% - 2.75rem));
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    /* flex:0 0 42%; */
    /* min-width:0; */
    display: flex;
    flex-direction:column;
    background:var(--panel-bg);
    border-block-start:.125rem solid var(--panel-bdr2);
    overflow:hidden;

}
#panel-detail.open{
    transform:translateY(0);
}
/* @media (360px <= width <= 780px) {
    #panel-detail{

    }
} */

@media (780px <= width <= 1280px) {
    #panel-detail{
        position:static;
        transform:none;
        transition:none;
        height:auto;
        flex:42;
        border:.0625rem solid var(--panel-bdr2);
    }
}

@media (width > 1280px) {
    #panel-detail{
        position:static;
        transform:none;
        transition:none;
        height:auto;
        flex:42;
        border:.0625rem solid var(--panel-bdr2);
    }
}




/* for pull-tab handle on mobile */
#panel-detail .p-header::before{
    content:'';
    display:block;
    width:2rem;
    height:.2rem;
    background:var(--panel-bdr2);
    border-radius:1rem;
    margin:0 auto .25rem;
}
#panel-detail .p-header{
    cursor:url('../media/cursor.png'),auto;
    /* user-select:none; */
    flex-direction:column;
}
@media (780px <= width <= 1280px) {
    #panel-detail .p-header::before{
        display:none;
    }
    #panel-detail .p-header{
        cursor:url('../media/cursor.png'),auto;
        flex-direction: row;
    }
}

@media (width > 1280px) {
    #panel-detail .p-header::before{
        display:none;
    }
    #panel-detail .p-header{
        cursor:url('../media/cursor.png'),auto;
        flex-direction: row;
    }
}





.p-header{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0.375rem 0.75rem;
    background:var(--panel-head);
    border-bottom:var(--1px) solid var(--panel-bdr2);

}
.p-header h2.ph-label{
    font-family:'Orbitron';
    font-size:.65rem;
    font-weight:600;
    letter-spacing:.22em;
    color:var(--white);
    text-align:center;
    margin:0;
}
@media (780px <= width <= 1280px) {
    .p-header { 
        justify-content: flex-start; 
    }
    .p-header h2.ph-label { 
        text-align: left; 
    }
}
@media (width > 1280px) {
    .p-header { 
        justify-content: flex-start; 
    }
    .p-header h2.ph-label { 
        text-align: left; 
    }
}



nav.filters{
    position:sticky;
    top:0;
    z-index:5;
    backdrop-filter:none;
    background:var(--black);
    border-bottom:.0625 solid var(--panel-bdr);
    box-shadow:none;
    padding: .25rem .375rem;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    flex-shrink:0;

}
nav.filters::-webkit-scrollbar { 
    display: none; 
}

nav.filters ul.filter-list{
    list-style:none;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    /* gap:.05rem; */
    /* width:max-content; */
}

nav.filters ul li{
    font-size:inherit;
    flex-shrink:0;
}



button.filter-toggle{
    background: transparent;
    border:.0625rem solid var(--panel-bdr);
    padding:.3rem .5rem;
    cursor:url('../media/cursor.png'),auto;
    display:flex;
    /* flex-direction:column; */
    align-items:center;
    justify-content:center;
    /* gap: .3rem; */
    transition: border-color 0.12s,
                background .12s,
                opacity.12s;

    border-radius:.0625rem;
    
}
button.filter-toggle:hover{
    border-color:var(--shadow2);
    background: var(--light1);
}

h4.filter-label{
    font-family:'Orbitron';
    font-size:.75rem;
    font-weight:400;
    letter-spacing:.1em;
    color: var(--gray4);
    text-transform:uppercase;
    text-align:center;
    margin:0;
    /* opacity:.5; */
    transition: opacity .12s, color .12s;
    
}



button.filter-toggle[aria-pressed="true"]{
    border-color: var(--shadow2);
    opacity: 1;
}

button.filter-toggle[aria-pressed="false"]{
    border-color: var(--panel-bdr);
    opacity: .5;
}

button.filter-toggle[aria-pressed="true"] h4.filter-label {
    color: var(--green1);
    opacity:1;

    text-shadow: 0 0 0.375rem var(--shadow3);
}


/* ON / OFF switch */
section.filter-switch{
    display:none;
    /* border: var(--1px) solid var(--yellow);
    display:flex;
    flex-direction: row; */
    /* border-radius:0.438rem; */
    /* overflow:hidden; */

}

/* base state of toggles */
section.filter-switch .on,
section.filter-switch .off{
    background: transparent;
    color:var(--white);
    opacity: 0.5;
    padding: 0.15rem .35rem;
    font-family:'Orbitron';
    font-size:.38rem;
    letter-spacing:.05em;
}


/* ON state highlight */
button.filter-toggle[aria-pressed="true"] .filter-switch .on{
    background: var(--linear1);
    color: var(--black);
    font-weight:700;
    opacity:1;
}
/* OFF state highlight */
button.filter-toggle[aria-pressed="false"] .filter-switch .off{
  
    background: var(--linear1);
    color: var(--black);
    opacity: 1;
    /* border-radius:0 0.313rem 0.313rem 0; */
}



/* for actual inventory blocks */
#channel-blocks{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .125rem;
    padding: .125rem;
    list-style: none;

    /* good defaults */
    align-content: start;
    align-items:start;
    /* flex:1;
    min-height:0; */
    /* overflow-y:auto; */
}

/* small screens */
@media (360px <= width <= 780px){
    #channel-blocks{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* medium */
@media (780px <= width <= 1280px){
    #channel-blocks{
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* large */
@media (width > 1280px){
    #channel-blocks{
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* each tile */
.content{
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
}
/* offset animation so it moves randomly */
/* .content:nth-child(2n){
    animation-delay:-2s;
}
.content:nth-child(3n){
    animation-delay:-4s;
}
.content:nth-child(4n){
    animation-delay:-1s;
}
.content:nth-child(5n){
    animation-delay:-3s;
} */

.content:hover{
    border-color:var(--green1);
    background:var(--light1);
    /* transition:scale(1.04%); */
}

/* JS state for when user clicks on certain block */
.content.selected{
    border-color: var(--green1);
    background: var(--light2);
    box-shadow: inset 0 0 0 .0625rem var(--light3);
    /* stop floating when selected */
    animation: none; 
}


/* creating corner brackets for the blocks */
.content::before,
.content::after{
    content:'';
    position:absolute;
    width:.5rem;
    height:.5rem;
    z-index:3;
    opacity:0;
    transition:opacity .2s ease;
    pointer-events:none;
}

.content:hover::before,
.content:hover::after,
.content.selected::before,
.content.selected::after{
    opacity:1;
}

.content::before{
    top: .4rem;
    left: .4rem;
    border-block-start:  0.094rem solid var(--green1);
    border-inline-start: 0.094rem solid var(--green1);
}
.content::after{
    bottom: .4rem;
    right: .4rem;
    border-block-end:  0.094rem solid var(--green1);
    border-inline-end: 0.094rem solid var(--green1);
}

/* for thumbnail images within inventory grid */

.content img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:blur(.0625rem) contrast(130%) saturate(20%);
    transition:filter .25s ease,
                transform .3s ease;
    transform-origin:center;
}

.content:hover img,
.content.selected img{
    filter: contrast(110%) saturate(55%) brightness(.9);
    transform:scale(1.08);
}




.thumb-placeholder{
    width: 100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    text-align: center;
    background:var(--linear3);
    overflow:hidden;

}

.thumb-placeholder p{
    font-family:'Orbitron';
    font-weight:400;
    margin: 0;
    font-size:.5rem;
    line-height: 1.4;

    text-transform: uppercase;
    color:var(--gray4);
    letter-spacing: .05em;
    

    /* breaks super_long_strings.mp3 */
    overflow-wrap:break-word;   
    /* max 4 lines before truncating */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; 

}
.content:hover .thumb-placeholder p,
.content.selected .thumb-placeholder p{
    color: var(--green1);
    text-shadow:0 0 .375rem var(--green1);
}



/* right-side panel for details and channel info */
#detail-scroll{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:.75rem;
    display:flex;
    flex-direction:column;
    gap:.5rem;



}

#state-info{
    display:flex;
    flex-direction:column;
    gap:.5rem;
}
#state-info.gone{
    display:none;
}
.si-sect-label{
    font-family:'Orbitron';
    font-size:.55rem;
    letter-spacing:.2em;
    color:var(--gray4);
    text-transform:uppercase;
    border-block-end:var(--1px) solid var(--panel-bdr);
    padding-block-end: .25rem;
}


/* channel title */
#channel-title{
    font-family:'Zen';
    font-size:1rem;
    letter-spacing:.05em;
    line-height:1.2;
    text-transform:uppercase;
    background: linear-gradient(to bottom, var(--green1), var(--yellow));
    background-clip: text;
    color: transparent;
    animation:glitch 4s infinite;
    margin:0;
}

/* for channel description and block text content */
.sd-textbox{
    font-family:'Orbitron';
    font-size:.6rem;
    line-height:1.7;
    color:var(--gray5);
    border: var(--1px) solid var(--panel-bdr);
    padding: .45rem;
    background:var(--black);
    margin:0;
    overflow-wrap:break-word;
    word-break:break-word;
}
.sd-textbox.italic{
    font-style:italic;
}

#channel-users{
    font-family: 'Orbitron';
    font-size:.5rem;
    color:var(--gray5);
    line-height:1.8;
    margin:0;
}
#channel-users a{
    color:var(--teal);
    text-decoration:none;
    cursor: url('../media/cursor.png'), pointer;
}
#channel-users a:hover{
    text-shadow: 0 0 0.375rem var(--teal);
}


/* for viewing channel on are.na as link */
.si-channel-link{
    display:flex;
    align-items:center;
    gap:.375rem;
    padding:.315rem .5rem;
    border:var(--1px) solid var(--light3);
    background: var(--light1);
    text-decoration: none;
    transition: background .15s, box-shadow .15s;
    cursor: url('../media/cursor.png'), pointer;
}
.si-channel-link:hover {
    background: var(--light2);
    box-shadow: 0 0 0.625rem var(--light3);
}
.si-channel-link i {
    font-size: .55rem;
    color: var(--green1);
}
.si-channel-link span {
    font-family: 'Orbitron', 'Zen', sans-serif;
    font-size: .42rem;
    letter-spacing: .12em;
    color: var(--green1);
}


/* for total blocks viewed */
.si-stat{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.25rem .44rem;
    border: var(--1px) solid var(--panel-bdr);
    background:var(--black);
}
.si-stat-label{
    font-family:'Orbitron';
    font-size:.5rem;
    letter-spacing:.1em;
    color:var(--gray5);
    margin:0;
}
.si-stat span{
    font-family:'Orbitron';
    font-size:.5rem;
    color:var(--green1);
    text-shadow: 0 0 0.313rem var(--green1);
}







/* For selected block state + details of respective block */
#state-detail{
    display:none;
    flex-direction:column;
    gap:.5rem;

}

#state-detail.show{
    display:flex;
}
/* for block label type */
.sd-category{
    font-family:'Orbitron';
    font-size:.45rem;
    letter-spacing:.1em;
    color:var(--gray4);
    text-transform:uppercase;
    border-block-end:var(--1px) solid var(--panel-bdr);
    padding-block-end:.25rem;
}

/* for the actual block's title */
.sd-name{
    font-family:'Orbitron';
    font-size:.95rem;
    letter-spacing:.07em;
    color:var(--graywhite);
    line-height:1.4;
    overflow-wrap:break-word;
    word-break:break-word;
}
/* for source url link from js */
.sd-link{
    display:flex;
    align-items:center;
    gap:.375rem;
    padding:.32rem .5rem;
    border: var(--1px) solid var(--pale1);
    background: var(--pale2);
    text-decoration: none;
    color:var(--teal);
    font-family:'Orbitron';
    font-size:.42rem;
    letter-spacing:.06em;
    overflow:hidden;
    margin-block-end:.2rem;
    transition:background .15s;
    cursor: url('../media/cursor.png'), pointer;
}
.sd-link span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sd-link:hover{
    color:var(--pale3);
}


/* stats that hold preview and the type, date added, and index of block */
.sd-stats{
    display:flex;
    flex-direction:column;
    gap:0;
    border:var(--1px) solid var(--panel-bdr);
    background:var(--black);
    overflow:hidden;
}








/* for previewing the media within panel */
.sd-preview{
    width:100%;
    /* overflow:hidden; */
    border-block-end: var(--1px) solid var(--panel-bdr);
    background:var(--black);
    display:flex;
    align-items:center;
    justify-content:center;
    /* min-height:5rem; */
    margin-block-end:.1rem;
}
.sd-preview-img{
    width:100%;
    display:block;
    /* filter:saturate(35%) brightness(.8) contrast(120%); */
    /* transition:filter .2s; */

}
.sd-preview-img:hover{
    filter:none;
}

.sd-preview video{
    width:100%;
    display:block;
    
}
.sd-preview audio{
    width:100%;
    display:block;
    padding:.75rem;
    min-height: 3rem;
    box-sizing: border-box;
}
.sd-embed-wrap{
    width:100%;
    aspect-ratio: 16/9;
}
.sd-embed-wrap iframe{
    width:100%;
    height:100%;
    display:block;
    border:none;
}



/* for the block's metadata info */
.sd-stat-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.4rem .44rem;
    border-block-end: var(--1px) solid var(--panel-bdr);
}

.sd-stat-row:last-child{
    border-block-end:none;
}

.sd-stat-cat{
    font-family:'Orbitron';
    font-size:.45rem;
    letter-spacing:.1em;
    color:var(--gray4);
}
.sd-stat-value{
    font-family:'Orbitron';
    font-size:.5rem;
    letter-spacing:.1em;
    color:var(--graywhite);
}




/* for equip and drop buttons */
#detail-actions{
    flex-shrink:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.125rem;
    padding:.125rem;
    background:var(--panel-bdr2);
}


#btn-equip,
#btn-drop{
    font-family:'Orbitron';
    font-size:.58rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    padding:.65rem;
    border:var(--1px) solid var(--panel-bdr);
    background:var(--darkgray1);
    color:var(--gray4);
    cursor: url('../media/cursor.png'), pointer;
    transition:all .15s;
    text-align:center;
}

/* specifically for the Equip button */
#btn-equip{
    color:var(--green1);
    border-color:var(--light3);
    background: var(--light2);
}
#btn-equip:hover{
    box-shadow:0 0 0.75rem var(--light3);
    background: var(--light3);
}


/* specifically for the Drop button */
#btn-drop{
    color:var(--drop1);
    border-color: var(--drop3);
}
#btn-drop:hover{
    background: var(--drop2);
    border-color: var(--drop4);
    color: var(--drop);
}

/* I was not sure how to target this element from JS through CSS, so I asked Claude AI to help me structure the element label. */
#detail-actions:has(#btn-drop[style*="display: none"]) {
    grid-template-columns: 1fr;
}








/* styling for toast notifications (temporary mini notifs) */
#toast{
    position:fixed;
    bottom:2.25rem;
    left:50%;
    transform: translateX(-50%) translateY(0.75rem);
    font-family:'Orbitron';
    font-size:.48rem;
    letter-spacing:.14em;
    background:var(--panel-bg2);
    border:var(--1px) solid var(--green1);
    color:var(--green1);
    padding:.45rem 1.1rem;
    box-shadow:0 0 0.875rem var(--light3);
    opacity:0;
    transition: opacity .2s,
                transform .2s;
    z-index:9998;
    pointer-events:none;
}

/* js adds class show */
#toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}