/* --- [ GAME VARIABLES ] --- */
        :root {
            --rpg-green: #88bb22;
            --rpg-text: #000000;
            --rpg-shadow: #808080;
            --hp-green: #00ff00;
            --mp-blue: #00ffff;
        }

        /* --- [ THE CONSOLE BACKGROUND ] --- */
        body {
            background-color: #000000;
            background-size:0.5em;
            image-rendering:pixelated;
            background-image: url("/rocks.png");
            font-family: 'basiic';
            color: var(--rpg-text);
            margin: 0;
        }
        
        ::-webkit-scrollbar-track {
background: url("/sticky.png");
}

/*Shrinking the scrollbar*/
::-webkit-scrollbar {
  width: 10px;
}

/*Removing the horizontal scrollbar*/
::-webkit-scrollbar:horizontal {
  display: none;
}

/*Giving the thumb a gradient*/
::-webkit-scrollbar-thumb {
  background:url(/dark.png);
  box-shadow: 4px 4px 0px rgba(0,0,0,1); /* Outer drop shadow */
  
}
        
.high{
  min-height:400px;
  }

        
/* --- FONTS --- */
@font-face{
  font-family: 'basiic';
  src: url(https://cinni.net/fonts/basiic.ttf);
}

.note-texture{
  background: url("/sticky.png");
  }
.paper-texture{
  background: url("/paper.png");
  }
  .shadow-box{
    box-shadow: 
                4px 4px 0px rgba(0,0,0,1); /* Outer drop shadow */
    }
        /* --- [ THE CLASSIC RPG BOX STYLE ] --- */
        .rpg-box {
            
            border: 4px solid var(--rpg-green);
            border-radius: 6px;
            box-shadow: 
                inset -2px -2px 0px rgba(0,0,0,0.5), /* Inner shadow */
                4px 4px 0px rgba(0,0,0,1); /* Outer drop shadow */
            padding: 15px;
            position: relative;
        }
        
                .note-box {
            box-shadow: 
                4px 4px 0px rgba(0,0,0,1); /* Outer drop shadow */
            padding: 15px;
            position: relative;
        }

        /* --- [ MAIN LAYOUT ] --- */
.main{max-width:900px; min-width:400px;}
.side{max-width:300px;min-width:250px;
 padding: 15px;
            position: relative;
}

  .intro{
    background:url('/lilipads.png');
    background-size:8em;
    border: 4px solid var(--rpg-green);
    border-radius: 6px;
    margin-bottom:0.5em;
    border-style: solid none solid none;

    }
    
    .c-obj {
  display: flex;
  flex-direction: row ;
  align-items: flex-start;
  justify-content: center;
  flex-wrap:wrap ;
      gap: 15px;
       width: 100%;
}  
.c-text{text-align:center}
        /* --- [ LEFT: PORTRAIT & STATS ] --- */
        .avatar-frame {
            width: 100%;
            aspect-ratio: 1/1;
            border: 2px solid var(--rpg-green);
            margin-bottom: 10px;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .profile-pic {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Keeps pixel art crisp, or makes regular photos look slightly retro */
            image-rendering: pixelated; 
        }

        .stat-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .bar-container {
            width: 100%;
            height: 15px;
            background-color: #000;
            border: 2px solid var(--rpg-shadow);
            margin-bottom: 15px;
            position: relative;
        }

        .hp-bar {
            height: 100%;
            background-color: var(--hp-green);
            width: 85%; /* Change this to lower HP */
            box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3);
        }

        .mp-bar {
            height: 100%;
            background-color: var(--mp-blue);
            width: 45%; /* Change this to lower MP */
            box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3);
        }

        /* --- [ RIGHT: QUEST LOG & INVENTORY ] --- */
        h2 {
            margin: 0 0 10px 0;
            font-size: 24px;
            color: var(--rpg-green); /* Classic Frog Green header */
            text-shadow: 2px 2px 0px #000;
            border-bottom: 2px dashed var(--rpg-shadow);
            padding-bottom: 5px;
        }

        p {
            line-height: 1.4;
            margin-top: 0;
        }
.w-full{
  max-width:100%;
  }
  .no-margin{
    margin:0 auto
    }
.w-100{
    width: 100%;
  }
        .inv-item {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
        }
a{
  text-decoration:none;
  color:var(--rpg-text);
  }

a:hover{
   text-shadow: 
                2px 2px 0px #88bb22; 
  }
        /* --- [ MOBILE RESPONSIVENESS ] --- */
        @media (max-width: 1195px) {
          
          .inv {
              margin: 0;
  padding: 0;
flex-wrap:wrap;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.inv-item {
  float: left;
}

.inv-item a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.inv-item a span{display:none;}

.side{
    padding: 15px;
    padding-right:0px;
    padding-left:0px;
    min-width:90%;
            box-shadow: 
                4px 4px 0px rgba(0,0,0,1); /* Outer drop shadow */
            padding: 15px;
}
  }