/* ---------------------------------- */
/* GLOBAL SETTINGS */
/* ---------------------------------- */

* {
    box-sizing: border-box;

    cursor:
        url("assets/images/wariocursor.png"),
        auto;
}





/* ---------------------------------- */
/* BODY */
/* ---------------------------------- */

body {
    margin: 0;

    background-image:
        url("assets/background/greengrid.jpg"),
        linear-gradient(to bottom, #08111f, #13203f);

    background-attachment: fixed;

    color: white;

    font-family: Verdana, sans-serif;
}





/* ---------------------------------- */
/* HEADER */
/* ---------------------------------- */

header {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    background: rgba(10, 20, 40, 0.9);

    padding: 20px;

    font-size: 32px;

    font-family: 'Orbitron', sans-serif;

    border-bottom: 1px solid #6ee7ff;

    text-shadow:
        0 0 10px #6ee7ff;

    box-shadow:
        0 0 15px rgba(110, 231, 255, 0.2);
}


/* HEADER PETS */

.header-pet {
    width: 60px;

    image-rendering: pixelated;

    filter:
        drop-shadow(0 0 5px #6ee7ff);
}


/* HEADER TITLE */

header h1 {
    margin: 0;

    font-size: 42px;
}





/* ---------------------------------- */
/* MAIN LAYOUT */
/* ---------------------------------- */

.container {
    display: flex;
}





/* ---------------------------------- */
/* SIDEBAR */
/* ---------------------------------- */

.sidebar {
    width: 250px;

    min-height: 100vh;

    padding: 20px;

    background: rgba(10, 20, 40, 0.8);

    border-right: 1px solid #6ee7ff;

    backdrop-filter: blur(10px);
}





/* ---------------------------------- */
/* CONTENT */
/* ---------------------------------- */

.content {
    flex: 1;

    max-width: 1200px;

    padding: 20px;
}





/* ---------------------------------- */
/* PANELS */
/* ---------------------------------- */

.panel {
    background: rgba(15, 25, 45, 0.75);

    border: 1px solid #6ee7ff;

    border-radius: 12px;

    padding: 20px;

    margin-bottom: 20px;

    backdrop-filter: blur(5px);

    transition: 0.3s;

    box-shadow:
        0 0 10px rgba(110, 231, 255, 0.3);
}


/* PANEL HOVER */

.panel:hover {
    transform: translateY(-3px);

    box-shadow:
        0 0 20px rgba(110, 231, 255, 0.5);
}


/* PANEL TITLES */

.panel h2 {
    margin-top: 0;

    color: #6ee7ff;

    font-family: 'Orbitron', sans-serif;

    text-shadow:
        0 0 8px rgba(110, 231, 255, 0.5);
}





/* ---------------------------------- */
/* LISTS */
/* ---------------------------------- */

ul {
    list-style: none;

    padding: 0;

    margin: 0;
}





/* ---------------------------------- */
/* NAVIGATION */
/* ---------------------------------- */

li {
    padding: 12px;

    margin-bottom: 10px;

    border-radius: 8px;

    transition: 0.3s;
}


li:hover {
    background: rgba(110, 231, 255, 0.2);

    transform: translateX(5px);

    cursor: pointer;
}





/* ---------------------------------- */
/* LINKS */
/* ---------------------------------- */

a {
    color: white;

    text-decoration: none;

    display: block;
}





/* ---------------------------------- */
/* AUDIO PLAYER */
/* ---------------------------------- */

audio {
    width: 100%;

    margin-top: 15px;

    filter:
        drop-shadow(0 0 5px #6ee7ff);
}





/* ---------------------------------- */
/* PET FRAME */
/* ---------------------------------- */

.pet-frame {
    border: none;

    display: block;

    margin: auto;

    max-width: 100%;

    filter:
        drop-shadow(0 0 10px #6ee7ff);
}





/* ---------------------------------- */
/* FOOTER */
/* ---------------------------------- */

footer {
    background: rgba(10, 20, 40, 0.9);

    padding: 12px;

    text-align: center;

    color: #6ee7ff;

    border-top: 1px solid #6ee7ff;
}





/* ---------------------------------- */
/* AVATAR GIF */
/* ---------------------------------- */

.avatar-gif {
    width: 100px;

    display: block;

    margin: 0 auto 15px auto;

    border-radius: 12px;

    border: 1px solid #6ee7ff;

    image-rendering: pixelated;

    filter:
        drop-shadow(0 0 10px #6ee7ff);
}





/* ---------------------------------- */
/* ONLINE STATUS */
/* ---------------------------------- */

.online-status {
    display: flex;

    align-items: center;

    gap: 10px;
}


.status-dot {
    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #00ff88;

    box-shadow:
        0 0 10px #00ff88;
}





/* ---------------------------------- */
/* WELCOME GIF */
/* ---------------------------------- */

.welcome-gif {
    width: 200px;

    display: block;

    margin: 20px auto;

    image-rendering: pixelated;

    filter:
        drop-shadow(0 0 10px #6ee7ff);
}





/* ---------------------------------- */
/* ANIME CARDS */
/* ---------------------------------- */

.anime-card {
    margin-bottom: 15px;

    background: rgba(15, 25, 45, 0.6);

    border: 1px solid #6ee7ff;

    border-radius: 10px;

    overflow: hidden;
}


/* SUMMARY BUTTON */

.anime-card summary {
    padding: 15px;

    cursor: pointer;

    color: #6ee7ff;

    font-family: 'Orbitron', sans-serif;

    transition: 0.3s;

    list-style: none;
}


/* SUMMARY HOVER */

.anime-card summary:hover {
    background: rgba(110, 231, 255, 0.15);
}


/* ANIME CONTENT */

.anime-content {
    padding: 15px;

    border-top: 1px solid rgba(110, 231, 255, 0.2);
}





/* ---------------------------------- */
/* IMAGE GALLERY */
/* ---------------------------------- */

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(200px, 1fr));

    gap: 15px;
}


/* GALLERY IMAGES */

.gallery-image {
    width: 100%;

    border-radius: 12px;

    border: 1px solid #6ee7ff;

    image-rendering: pixelated;

    transition: 0.3s;

    filter:
        drop-shadow(0 0 8px #6ee7ff);
}


/* IMAGE HOVER */

.gallery-image:hover {
    transform: scale(1.03);

    box-shadow:
        0 0 20px rgba(110, 231, 255, 0.5);
}





/* ---------------------------------- */
/* ANIME PREVIEW IMAGES */
/* ---------------------------------- */

.anime-preview {
    width: 250px;

    height: 350px;

    object-fit: cover;

    display: block;

    margin: 15px auto;

    border-radius: 12px;

    border: 1px solid #6ee7ff;

    filter:
        drop-shadow(0 0 10px #6ee7ff);

    transition: 0.3s;
}
.panel h2 {
    margin-top: 0;

    color: #6ee7ff;

    font-family: 'Orbitron', sans-serif;

    text-shadow:
        0 0 8px rgba(110, 231, 255, 0.5);

    word-break: break-word;
}
#game-container canvas {
    border: 1px solid #6ee7ff;

    border-radius: 12px;

    display: block;

    margin: auto;

    box-shadow:
        0 0 20px rgba(110, 231, 255, 0.4);
}