/* =========================================
   RESET
========================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* =========================================
   FIREFONT
========================================= */

@font-face {
    font-family: "Firefont";
    src: url("assets/firefont.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* =========================================
   BASE
========================================= */

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    font-family: "Firefont", monospace;
    background: #78b84a;
}


/* =========================================
   HOME SCREEN
========================================= */

.home-screen {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}


/* =========================================
   OVERWORLD
========================================= */

.overworld {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-image: url("assets/home-background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* =========================================
   NIGHT MODE
========================================= */

body.night-mode .overworld {
    background-image: url("assets/home-background-night.png");
}


/* =========================================
   OVERWORLD CONTENT
========================================= */

.overworld-content {
    position: absolute;
    top: 0;
    left: 0;

    width: 65%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================
   TRAINER SPRITE
========================================= */

.trainer-sprite {
    position: absolute;

    width: clamp(100px, 10vw, 150px);
    height: auto;

    image-rendering: pixelated;

    transform:
        translateX(-140px)
        translateY(-30px);
}


/* =========================================
   POKÉMON SPRITE
========================================= */

.pokemon-sprite {
    position: absolute;

    width: clamp(80px, 8vw, 125px);
    height: auto;

    image-rendering: pixelated;

    transform:
        translateX(-30px)
        translateY(10px);
}


/* =========================================
   SCREEN FADE
========================================= */

.screen-fade {
    position: fixed;
    inset: 0;

    background: #000000;
    opacity: 0;

    pointer-events: none;
    z-index: 9999;

    transition: opacity 1.2s ease;
}

.screen-fade.active {
    opacity: 1;
}


/* =========================================
   PAGE ENTER FADE
========================================= */

#page-enter-fade {
    position: fixed;
    inset: 0;

    background: #000000;
    opacity: 1;

    z-index: 99999;
    pointer-events: none;

    animation: pageFadeIn 0.9s ease forwards;
}

@keyframes pageFadeIn {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


/* =========================================
   MAIN MENU
========================================= */

.pokemon-menu {
    position: absolute;

    top: clamp(10px, 2vh, 25px);
    right: clamp(10px, 5vw, 20px);

    width: clamp(320px, 28vw, 420px);

    padding: 10px;

    background: #ffffff;

    border: 5px solid #000000;

    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 4px #000000;

    border-radius: 10px;

    z-index: 10;
}


/* =========================================
   MUTE BUTTON
========================================= */

#mute-button,
#night-mode-button {
    position: fixed;

    top: 20px;

    width: 48px;
    height: 48px;

    border: 3px solid #000000;
    border-radius: 6px;

    background: #ffffff;

    font-size: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 100;

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

#mute-button {
    left: 20px;
}

#night-mode-button {
    left: 78px;
}

#mute-button:hover,
#night-mode-button:hover {
    transform: scale(1.1);
}

#mute-button:active,
#night-mode-button:active {
    transform: scale(0.9);
}


/* =========================================
   MENU ITEMS
========================================= */

.menu-item {
    position: relative;

    width: 100%;
    min-height: 55px;

    padding: 10px 12px 10px 42px;

    border: none;
    background: transparent;

    color: #000000;

    font-family: "Firefont", monospace;
    font-size: 35px;
    font-weight: normal;

    text-align: left;
    cursor: pointer;
}

.menu-item.active {
    background: transparent;
    color: #000000;
}


/* =========================================
   MENU POKÉMON CURSOR
========================================= */

.menu-item::before {
    content: "";

    position: absolute;

    left: 14px;
    top: 50%;

    transform:
        translateY(-40%)
        scale(0);

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 11px solid #000000;

    transition: transform 0.08s ease;
}

.menu-item.active::before {
    transform:
        translateY(-50%)
        scale(1);
}


/* =========================================
   MESSAGE BOX
========================================= */

.message-box {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 20px;

    min-height: 75px;

    padding: 15px 20px;

    background: #ffffff;

    border: 5px solid #000000;

    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 4px #000000;

    border-radius: 6px;

    color: #000000;

    z-index: 20;
}

.message-box p {
    font-family: "Firefont", monospace;
    font-size: 30px;
    line-height: 1.5;
    color: #000000;
}


/* =========================================
   GENERIC POPUP
========================================= */

.resume-popup,
.trainer-popup,
.badges-popup,
.pokenav-popup {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.45);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 500;

    transition: opacity 0.15s ease;
}

.resume-popup.active,
.trainer-popup.active,
.badges-popup.active,
.pokenav-popup.active,
.town-map-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================
   RESUME POPUP
========================================= */

.resume-popup-content {
    width: min(520px, 85vw);

    padding: 25px;

    background: #ffffff;

    border: 5px solid #000000;

    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 4px #000000;

    border-radius: 6px;

    text-align: center;
}

.resume-popup-content p {
    margin-bottom: 25px;

    font-family: "Firefont", monospace;

    font-size: clamp(18px, 3vw, 28px);
    line-height: 1.5;

    color: #000000;
}

.resume-popup-buttons {
    display: flex;
    justify-content: center;
    gap: 45px;
}

.resume-popup-buttons button {
    position: relative;

    min-width: 80px;

    padding: 8px 15px;

    border: none;
    outline: none;

    background: transparent;

    color: #000000;

    font-family: "Firefont", monospace;
    font-size: 22px;

    cursor: pointer;
}

.resume-choice::before {
    content: "";

    position: absolute;

    left: -8px;
    top: 50%;

    transform:
        translateY(-50%)
        scale(0);

    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #000000;
}

.resume-choice.active::before {
    transform:
        translateY(-50%)
        scale(1);
}

.resume-choice:hover {
    background: transparent;
    color: #000000;
}

.resume-choice:active {
    transform: none;
}


/* =========================================
   TRAINER CARD
========================================= */

.trainer-card {
    position: relative;

    width: min(620px, 88vw);

    padding: 8px;

    background: #e8e8e8;

    border: 5px solid #555;
    border-radius: 8px;

    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 4px #777;

    color: #222;
}


/* =========================================
   TRAINER HEADER
========================================= */

.trainer-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 5px 10px;
    margin-bottom: 8px;

    background: #eeeeee;

    border-bottom: 2px solid #999;

    font-size: clamp(16px, 2.5vw, 24px);
    color: #777;
}

.trainer-id {
    font-size: clamp(11px, 1.8vw, 17px);
    color: #555;
}


/* =========================================
   TRAINER BODY
========================================= */

.trainer-card-body {
    position: relative;

    min-height: 170px;

    padding: 8px 12px;

    border-bottom: 2px solid #999;
}

.trainer-info {
    width: 72%;
}

.trainer-info p {
    display: flex;
    align-items: flex-start;

    gap: 5px;
    margin-bottom: 13px;

    font-size: clamp(20px, 2vw, 25px);
    line-height: 1.25;
}

.field-label {
    white-space: nowrap;
    color: #555;
}

.field-value {
    color: #222;
}


/* =========================================
   TRAINER CARD SPRITE
========================================= */

.trainer-card-sprite {
    position: absolute;

    right: 20px;
    bottom: 10px;

    width: clamp(120px, 14vw, 160px);
    height: auto;

    image-rendering: pixelated;
}


/* =========================================
   TRAINER DESCRIPTION
========================================= */

.trainer-description {
    min-height: 75px;

    padding: 8px 12px;

    border-bottom: 2px solid #999;
}

.trainer-description-title {
    margin-bottom: 5px;

    font-size: clamp(17px, 2vw, 25px);
    color: #777;
}

.trainer-description p {
    font-size: clamp(18px, 1.8vw, 20px);

    color: #555;

    line-height: 1.4;
    text-align: justify;
}


/* =========================================
   POPUP CLOSE BUTTONS
========================================= */

.trainer-close,
.badges-close,
.pokenav-close {
    display: block;

    margin: 8px auto 2px;

    padding: 5px 20px;

    border: none;
    background: transparent;

    color: #222;

    font-family: "Firefont", monospace;
    font-size: clamp(14px, 2vw, 20px);

    cursor: pointer;
}

.trainer-close::before,
.badges-close::before,
.pokenav-close::before {
    content: "▶";
    margin-right: 7px;
    font-size: 12px;
}

.trainer-close:hover,
.badges-close:hover,
.pokenav-close:hover {
    background: transparent;
}


/* =========================================
   BADGES POPUP
========================================= */

.badges-card {
    width: min(760px, 90vw);

    padding: 8px;

    background: #8b5a2b;

    border: 5px solid #3d2410;
    border-radius: 8px;

    box-shadow:
        inset 0 0 0 2px #c28a4b,
        inset 0 0 0 4px #5a3518;

    color: #24170d;
}


/* =========================================
   BADGES HEADER
========================================= */

.badges-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 5px 10px;
    margin-bottom: 8px;

    background: #a66a32;

    border: 2px solid #5a3518;
    border-bottom: 3px solid #3d2410;

    font-size: clamp(16px, 2.5vw, 24px);
    color: #ffffff;
}

.badges-count {
    font-size: clamp(11px, 1.8vw, 17px);
    color: #f1d2a5;
}


/* =========================================
   BADGES CONTENT
========================================= */

.badges-content {
    display: grid;

    grid-template-columns:
        minmax(220px, 0.9fr)
        minmax(300px, 1.4fr);

    gap: 10px;

    min-height: 320px;
}


/* =========================================
   BADGE LIST
========================================= */

.badge-list {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 6px;

    padding: 6px;

    background: #6f451f;

    border: 2px solid #3d2410;

    overflow-y: auto;
}


/* =========================================
   BADGE SLOT
========================================= */

.badge-slot {
    position: relative;

    min-height: 85px;

    padding: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 3px solid #999;

    background: #eeeeee;

    font-family: "Firefont", monospace;

    cursor: pointer;

    transition: transform 0.12s ease;
}

.badge-slot:hover {
    background: #ffffff;
}

.badge-slot.active {
    border-color: #ffffff;

    box-shadow:
        inset 0 0 0 2px #ffffff;

    animation:
        badgeHighlight
        0.8s
        steps(1, end)
        infinite;
}

@keyframes badgeHighlight {
    0%,
    100% {
        border-color: #ffffff;

        box-shadow:
            inset 0 0 0 2px #ffffff;
    }

    50% {
        border-color: #222222;

        box-shadow:
            inset 0 0 0 2px #222222;
    }
}


/* =========================================
   BADGE IMAGE
========================================= */

.badge-slot-image {
    width: 55px;
    height: 55px;

    object-fit: contain;

    image-rendering: pixelated;
}


/* =========================================
   LOCKED BADGE
========================================= */

.badge-slot.locked {
    cursor: default;

    background: #c4c4c4;
    border-color: #aaa;
}

.badge-slot.locked .badge-slot-image {
    opacity: 0.25;
    filter: grayscale(1);
}

.badge-slot.locked::after {
    position: absolute;

    bottom: 4px;
    left: 0;
    right: 0;

    text-align: center;

    font-size: 9px;
    color: #777;
}


/* =========================================
   BADGE DISPLAY
========================================= */

.badge-display {
    display: flex;
    flex-direction: column;

    min-width: 0;

    background: #eeeeee;

    border: 3px solid #3d2410;
}


/* =========================================
   LARGE BADGE IMAGE
========================================= */

.badge-display-image {
    flex: 1;

    min-height: 200px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 15px;

    border-bottom: 2px solid #999;
}

.badge-display-image img {
    width: auto;
    height: 250px;

    object-fit: contain;
}


/* =========================================
   BADGE INFORMATION
========================================= */

.badge-display-info {
    padding: 12px;
}

.badge-display-info h2 {
    margin-bottom: 8px;

    font-family: "Firefont", monospace;
    font-size: clamp(15px, 2.5vw, 23px);

    color: #222;
}

.badge-display-info p {
    font-family: "Firefont", monospace;
    font-size: clamp(11px, 1.8vw, 16px);

    line-height: 1.4;

    color: #555;
    text-align: justify;
}


/* =========================================
   POKENAV POPUP
========================================= */
.pokenav-card {
    width: min(850px, 92vw);

    padding: 8px;

    background: #dcecff;

    border: 5px solid #183b70;
    border-radius: 8px;

    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 4px #4778b8;

    color: #102a4c;
}


/* =========================================
   POKENAV HEADER
========================================= */
.pokenav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px 14px;
    margin-bottom: 8px;

    background: #2874c6;

    border-bottom: 4px solid #174f91;

    color: #ffffff;

    font-size: clamp(20px, 3vw, 32px);
}

.pokenav-icon {
    font-size: clamp(25px, 4vw, 42px);
}


/* =========================================
   POKENAV CONTENT
========================================= */
.pokenav-content {
    display: grid;

    grid-template-columns:
        minmax(300px, 1fr)
        minmax(300px, 1fr);

    gap: 18px;

    padding: 12px;

    background:
        radial-gradient(
            #a9c9ed 1.5px,
            transparent 1.5px
        );

    background-size: 10px 10px;
}

/* =========================================
   POKENAV STATUS CIRCLE
========================================= */

.pokenav-icon {
    position: relative;

    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Outer circle */
    border: 3px solid #ffffff;
    border-radius: 50%;

    background: transparent;

    font-size: 0;
}


/* =========================================
   INNER BLINKING CIRCLE
========================================= */

.pokenav-icon::after {
    content: "";

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: #ff0000;

    opacity: 1;

    animation: pokenav-status-blink 1s steps(1, end) infinite;
}


/* =========================================
   RED BLINK
========================================= */

@keyframes pokenav-status-blink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}
/* =========================================
   POKENAV DISPLAY
========================================= */

.pokenav-display {
    min-width: 0;
}


/* =========================================
   POKENAV IMAGE
========================================= */
.pokenav-image img {
    width: 65%;
    height: 65%;

    object-fit: contain;

    image-rendering: pixelated;
}

.pokenav-image {
    height: 300px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef6ff;

    border: 4px solid #315d91;

    box-shadow:
        inset 0 0 0 2px #b8d2ef;
}
.pokenav-image-placeholder {
    width: 75%;
    height: 75%;

    display: flex;
    align-items: center;
    justify-content: center;


    color: #426487;

    font-size: clamp(18px, 3vw, 30px);
}

/* =========================================
   POKENAV INFO
========================================= */

.pokenav-info {
    margin-top: 8px;

    padding: 10px 14px;

    background: #ffffff;

    border: 4px solid #555555;
}

.pokenav-info h2 {
    margin-bottom: 7px;
    text-align: center;
    font-size: clamp(17px, 2.5vw, 26px);
    color: #222222;
}

.pokenav-info a {
    display: block;

    color: #333333;

    font-family: "Firefont", monospace;
    font-size: clamp(25px, 1.7vw, 18px);

    line-height: 1.4;

    text-decoration: underline;
    text-align: center;
    overflow-wrap: anywhere;
}

.pokenav-info a:hover {
    color: #000000;
}


/* =========================================
   POKENAV LIST
========================================= */
.pokenav-list {
    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 10px;

    padding: 8px 0 8px 8px;

    min-width: 0;

    width: calc(100% + 12px);

    margin-right: -12px;
}


/* =========================================
   POKENAV ITEM
========================================= */
.pokenav-item {
    position: relative;

    width: 100%;
    min-height: 58px;

    display: flex;
    align-items: center;

    padding: 8px 14px;

    border: none;

    background: #3d8ed8;

    border-bottom: 5px solid #2164a5;

    color: #ffffff;

    font-family: "Firefont", monospace;
    font-size: clamp(14px, 2vw, 23px);

    text-align: left;

    cursor: pointer;

     transition:
        width 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.18s ease;
}

.pokenav-item.active {
    width: calc(100% + 12px);
    margin-left: -12px;

    background: #5ca8ed;

    z-index: 2;
}
/* =========================================
   POKENAV ICON
========================================= */
.pokenav-color {
    width: 25px;
    height: 25px;

    flex-shrink: 0;

    margin-right: 10px;

    border: none;

    background: transparent;
}


/* =========================================
   POKENAV ICON COLORS
========================================= */

/* =========================================
   POKENAV ICON COLORS
========================================= */

.linkedin-color {
    background: #0a66c2;
}

.gmail-color {
    background: #ea4335;
}

.mobile-color {
    background: #63c74f;
}

.github-color {
    background: #24292e;
}

.showdown-color {
    background: #f5a623;
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 481px) and (max-width: 1024px) {

    .overworld-content {
        width: 58%;
    }

    .pokemon-menu {
        right: 25px;
        width: 34vw;
        max-width: 330px;
    }

    .menu-item {
        min-height: 40px;

        font-size: clamp(
            18px,
            3vw,
            28px
        );
    }

    .trainer-sprite {
        width: 90px;
    }

    .pokemon-sprite {
        width: 100px;
    }
}

/* =========================================
   POKEMON POPUP
========================================= */

.pokemon-popup {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.45);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 500;

    transition: opacity 0.15s ease;
}

.pokemon-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================
   POKEMON CARD
========================================= */

.pokemon-card {
    width: min(800px, 90vw);

    padding: 7px;

    background: #f4d6d6;

    border: 5px solid #7a1111;
    border-radius: 8px;

    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 4px #b52b2b;

    color: #4a1111;
}


/* =========================================
   POKEMON HEADER
========================================= */

.pokemon-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 6px 13px;
    margin-bottom: 7px;

    background: #c62828;

    border-bottom: 4px solid #7a1111;

    color: #ffffff;

    font-size: clamp(19px, 2.8vw, 30px);
}

.pokemon-header-status {
    font-size: clamp(11px, 1.9vw, 17px);
}


/* =========================================
   POKEMON CONTENT
========================================= */

.pokemon-content {
    display: grid;

    grid-template-columns:
        30%
        70%;

    gap: 9px;

    min-height: 400px;

    padding: 7px;

    background:
        radial-gradient(
            #e8aaaa 1.5px,
            transparent 1.5px
        );

    background-size: 10px 10px;
}


/* =========================================
   PARTY LIST
========================================= */

.pokemon-party {
    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 6px;

    padding: 5px;

    background: #a91e1e;

    border: 3px solid #6d1111;
}


/* =========================================
   PARTY ITEM
========================================= */

.pokemon-party-item {
    position: relative;

    width: 100%;
    min-height: 55px;

    display: flex;
    align-items: center;

    padding: 4px 7px;

    border: none;
    border-bottom: 4px solid #6d1111;

    background: #d93636;

    color: #ffffff;

    font-family: "Firefont", monospace;
    font-size: clamp(10px, 1.25vw, 15px);

    text-align: left;

    cursor: pointer;

    transition:
        background 0.12s ease;
}

.pokemon-party-item:hover {
    background: #e95757;
}


/* =========================================
   PARTY IMAGE
========================================= */

.pokemon-party-item img {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    margin-right: 7px;

    object-fit: contain;

    image-rendering: pixelated;
}


/* =========================================
   PARTY INFORMATION
========================================= */

.pokemon-party-info {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
}


/* =========================================
   PARTY NAME
========================================= */

.pokemon-party-name {
    margin-bottom: 2px;

    color: #ffffff;

    font-size: clamp(
        10px,
        1.25vw,
        15px
    );

    line-height: 1.1;
}


/* =========================================
   HP BAR
========================================= */

.pokemon-hp-bar {
    width: 100%;
    height: 7px;

    margin-bottom: 2px;

    background: #4a1111;

    border: 1px solid #ffffff;

    overflow: hidden;
}

.pokemon-hp-fill {
    width: 100%;
    height: 100%;

    background: #f7d02c;
}


/* =========================================
   HP TEXT
========================================= */

.pokemon-hp-text {
    font-family: "Firefont", monospace;

    font-size: clamp(
        8px,
        0.95vw,
        11px
    );

    color: #ffffff;

    text-align: right;
}


/* =========================================
   ACTIVE PARTY ITEM
========================================= */

.pokemon-party-item.active {
    background: #e95757;

    border-bottom-color: #7a1111;

    transform: none;
}


/* =========================================
   POKEMON CURSOR
========================================= */

.pokemon-party-item.active::before {
    display:none;

    position: absolute;

    left: -16px;
    top: 50%;

    transform: translateY(-50%);

    color: #7a1111;

    font-size: 14px;

    z-index: 5;
}


/* =========================================
   POKEMON SUMMARY
========================================= */

.pokemon-summary {
    display: flex;
    flex-direction: column;

    min-width: 0;

    background: #fff5f5;

    border: 3px solid #7a1111;

    overflow: hidden;
    margin: 0 10px 0 0;
}


/* =========================================
   SUMMARY HEADER
========================================= */

.pokemon-summary-header {
    padding: 6px 11px;

    background: #ffffff;

    border-bottom: 3px solid #7a1111;

    font-size: clamp(
        17px,
        2.3vw,
        26px
    );

    color: #7a1111;
}


/* =========================================
   LARGE POKEMON
========================================= */

.pokemon-summary-image {
    height: 155px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f8dede;

    border-bottom: 3px solid #7a1111;
}

.pokemon-summary-image img {
    width: 140px;
    height: 140px;

    object-fit: contain;

    image-rendering: pixelated;
}


/* =========================================
   SUMMARY SECTION
========================================= */

.pokemon-summary-section {
    padding: 8px 12px;

    background: #ffffff;

    border-bottom: 2px solid #e4b5b5;
}


/* =========================================
   LABEL
========================================= */

.pokemon-label {
    margin-right: 8px;

    color: #7a1111;

    font-size: clamp(
        13px,
        1.5vw,
        18px
    );
}


/* =========================================
   TYPE — LABEL + VALUE SAME LINE
========================================= */


.pokemon-summary-section:has(.pokemon-types) {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pokemon-types {
    display: flex;

    gap: 5px;

    flex-wrap: wrap;
}

.pokemon-type {
    display: inline-flex;

    min-width: 70px;

    justify-content: center;

    padding: 4px 10px;

    border-radius: 3px;

    color: #ffffff;

    font-family: "Firefont", monospace;

    font-size: clamp(
        11px,
        1.2vw,
        15px
    );

    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.35);
}

.pokemon-close {
    display: block;

    width: 180px;
    margin: 2px auto 2px;
    padding: 7px 12px;

    background: #c62828;

    border: 3px solid #7a1111;
    border-top: 3px solid #ffffff;

    color: #ffffff;

    font-family: "Firefont", monospace;
    font-size: clamp(11px, 1.3vw, 15px);

    cursor: pointer;
}

.pokemon-close:hover {
    background: #e95757;
}

.pokemon-close:active {
    transform: translateY(2px);
}
/* =========================================
   ABILITY / DESCRIPTION
   LABEL ON TOP, VALUE BELOW
========================================= */

.pokemon-summary-section h2 {
    margin-bottom: 5px;

    font-size: clamp(
        14px,
        1.8vw,
        20px
    );

    color: #4a1111;
}


/* =========================================
   DESCRIPTION TEXT
========================================= */

.pokemon-summary-section p,
.pokemon-nature p {
    font-size: clamp(
        16px,
        1.4vw,
        18px
    );

    line-height: 1.4;

    color: #552222;
}


/* =========================================
   NATURE
========================================= */

.pokemon-nature {
    flex-shrink: 0;

    padding: 8px 12px;

    background: #fff5f5;
}

.pokemon-nature .pokemon-label {
    display: block;

    margin-bottom: 5px;

    font-weight: bold;
}
/* =========================================
   MOBILE
========================================= */
/* =========================================
   POKEDEX
   ORANGE POKEMON EMERALD THEME
========================================= */

.projects-popup {
    position: fixed;
    inset: 0;

    z-index: 9000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(20, 10, 0, 0.78);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.projects-popup.active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* =========================================
   POKEDEX CARD
========================================= */

.projects-card {

    width: min(950px, 94vw);

    height: min(620px, 90vh);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #fff4df 0%,
            #ffdca6 45%,
            #f7b45c 100%
        );

    border: 5px solid #7a3100;

    border-radius: 12px;

    box-shadow:
        0 0 0 3px #ff8c1a,
        0 12px 0 #572000,
        0 18px 30px rgba(0, 0, 0, 0.45);

    font-family:
        "Firefont",
        monospace;
}


/* =========================================
   HEADER
========================================= */

.projects-header {

    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0 22px;

    color: #fff8ec;

    background:
        linear-gradient(
            180deg,
            #e85d04,
            #b83b00
        );

    border-bottom:
        4px solid #7a3100;

    text-shadow:
        2px 2px #682000;

    font-size: 25px;
}


/* =========================================
   CONTENT
========================================= */

.projects-content {

    flex: 1;

    min-height: 0;

    display: grid;

    grid-template-columns:
        42% 58%;

    gap: 0;

    overflow: hidden;
}


/* =========================================
   LEFT CAROUSEL
========================================= */

.projects-carousel {

    position: relative;

    height: 100%;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    perspective: 900px;

    background:
        linear-gradient(
            180deg,
            #ffe8c4,
            #ffc36e
        );

    border-right:
        4px solid #9a3c00;
}


/* =========================================
   PROJECT SLIDES
========================================= */

.project-slide {

    position: absolute;

    left: 50%;

    width: 76%;

    height: 46%;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translate(-50%, 0)
        scale(0.68)
        rotateX(12deg);

    opacity: 0;

    filter:
        blur(1px);

    transition:
        transform 0.45s
            cubic-bezier(
                0.22,
                1,
                0.36,
                1
            ),
        opacity 0.45s ease,
        filter 0.45s ease;

    pointer-events: none;
}


/* PREVIOUS */

.project-slide.previous {

    transform:
        translate(
            -50%,
            -78%
        )
        scale(0.72)
        rotateX(18deg);

    opacity: 0.42;

    filter:
        blur(0.5px);

    z-index: 1;

    pointer-events: auto;
}


/* ACTIVE */

.project-slide.active {

    transform:
        translate(
            -50%,
            0
        )
        scale(1)
        rotateX(0deg);

    opacity: 1;

    filter:
        none;

    z-index: 3;

    pointer-events: auto;
}


/* NEXT */

.project-slide.next {

    transform:
        translate(
            -50%,
            78%
        )
        scale(0.72)
        rotateX(-18deg);

    opacity: 0.42;

    filter:
        blur(0.5px);

    z-index: 1;

    pointer-events: auto;
}


/* =========================================
   ICON FRAME
========================================= */

.project-icon {

    width: 190px;
    height: 190px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 18px;

    background:
        rgba(255, 247, 230, 0.8);

    border:
        4px solid #a94500;

    border-radius: 14px;

    box-shadow:
        inset 0 0 0 3px #ffd28a,
        0 7px 0 #7a3100,
        0 10px 15px
            rgba(80, 30, 0, 0.25);
}


.project-icon img {

    width: 100%;
    height: 100%;

    object-fit: contain;

}


/* =========================================
   ROLL EFFECT
========================================= */

.projects-carousel.roll-up
.project-slide.active {

    animation:
        pokedex-roll-up
        0.43s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.projects-carousel.roll-down
.project-slide.active {

    animation:
        pokedex-roll-down
        0.43s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


@keyframes pokedex-roll-up {

    0% {

        transform:
            translate(
                -50%,
                0
            )
            scale(1)
            rotateX(0deg);

        opacity: 1;

    }

    45% {

        transform:
            translate(
                -50%,
                -34%
            )
            scale(0.88)
            rotateX(18deg);

        opacity: 0.55;

    }

    100% {

        transform:
            translate(
                -50%,
                0
            )
            scale(1)
            rotateX(0deg);

        opacity: 1;

    }

}


@keyframes pokedex-roll-down {

    0% {

        transform:
            translate(
                -50%,
                0
            )
            scale(1)
            rotateX(0deg);

        opacity: 1;

    }

    45% {

        transform:
            translate(
                -50%,
                34%
            )
            scale(0.88)
            rotateX(-18deg);

        opacity: 0.55;

    }

    100% {

        transform:
            translate(
                -50%,
                0
            )
            scale(1)
            rotateX(0deg);

        opacity: 1;

    }

}


/* =========================================
   RIGHT INFORMATION
========================================= */

.project-information {

    min-width: 0;

    overflow-y: auto;

    padding:
        28px 28px 22px;

    color: #4c2000;

    background:
        rgba(255, 248, 235, 0.88);
}


/* =========================================
   PROJECT TITLE
========================================= */

.project-title {

    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 12px;


    border-bottom:
        3px solid #d86600;
}


.project-number {

    color: #c44a00;

    font-size: 20px;

    white-space: nowrap;
}


.project-title h2 {

    margin: 0;

    color: #7d2f00;

    font-size: 30px;

    line-height: 1.5;
}


/* =========================================
   BRIEF
========================================= */

.project-brief {

    margin:
        8px 0 10px;

    color: #713400;

    font-size: 23px;

    line-height: 2;
    text-align: justify;
}


/* =========================================
   PROJECT SECTIONS
========================================= */

.project-section {

    margin-bottom: 20px;
}


.project-section h3 {

    margin-bottom: 10px;

    color: #a33c00;

    font-size: 18px;
}


.project-section p {

    color: #522400;

    font-family:
        "Firefont",
        monospace;

    font-size: 18px;

    line-height: 2.15;
    text-align: justify;
}


/* =========================================
   TECH STACK
========================================= */

.project-tech {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.project-tech span {

    padding:
        7px 9px;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            #ef7217,
            #bd4300
        );

    border:
        2px solid #8a3000;

    border-radius: 4px;

    box-shadow:
        0 3px 0 #672200;

    font-size: 15px;

    line-height: 1.3;
}


/* =========================================
   VIEW PROJECT
========================================= */

.project-view-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-top: 3px;

    min-height: 35px;

    padding:
        10px 16px;

    color: #fff8ec;

    background:
        linear-gradient(
            180deg,
            #ed7014,
            #ae3800
        );

    border:
        3px solid #702600;

    border-radius: 5px;

    box-shadow:
        0 5px 0 #5a1e00;

    text-decoration: none;

    font-family:
        "Firefont",
        monospace;

    font-size: 9px;

    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        filter 0.12s ease;
}


.project-view-button:hover {

    filter:
        brightness(1.12);

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 0 #5a1e00;
}


.project-view-button:active {

    transform:
        translateY(3px);

    box-shadow:
        0 2px 0 #5a1e00;
}


/* =========================================
   CLOSE
========================================= */

.projects-close {

    align-self: center;

    margin:
        12px 0 16px;

    min-width: 130px;

    padding:
        11px 16px;

    color: #fff;

    background:
        #a83b00;

    border:
        3px solid #672000;

    box-shadow:
        0 4px 0 #542000;

    border-radius: 4px;

    font-family:
        "Firefont",
        monospace;

    font-size: 20px;

    cursor: pointer;
}


.projects-close:hover {

    background:
        #c94e00;
}


.projects-close:active {

    transform:
        translateY(3px);

    box-shadow:
        0 1px 0 #542000;
}


/* =========================================
   SCROLLBAR
========================================= */

.project-information::-webkit-scrollbar {

    width: 8px;
}


.project-information::-webkit-scrollbar-track {

    background:
        #f3c27c;
}


.project-information::-webkit-scrollbar-thumb {

    background:
        #b74700;

    border:
        2px solid #f3c27c;
}

/* =========================================
   POKEDEX VIEW PROJECT BUTTON
========================================= */

.project-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;

    margin-top: 14px;

    padding: 8px 14px;

    min-width: 145px;

    background: #f39c12;
    color: #1a1a1a;

    border: 2px solid #1a1a1a;

    font-family: "Firefont", monospace;
    font-size: 20px;

    text-decoration: none;

    cursor: pointer;

    image-rendering: pixelated;

    transition:
        background-color 0.12s ease,
        transform 0.12s ease,
        box-shadow 0.12s ease;
}


/* =========================================
   HOVER
========================================= */

.project-view-button:hover {
    background: #ffb52e;

    transform:
        translateY(-2px);

    box-shadow:
        3px 3px 0 #1a1a1a;
}


/* =========================================
   ACTIVE / CLICK
========================================= */

.project-view-button:active {
    transform:
        translateY(1px);

    box-shadow:
        1px 1px 0 #1a1a1a;
}


/* =========================================
   FOCUS
========================================= */

.project-view-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}


/* =========================================
   PIXEL ARROW
========================================= */

.project-view-button::before {
    content: "▶";

    margin-right: 7px;

    font-size: 7px;
}


/* =========================================
   DISABLED / NO LINK
========================================= */

.project-view-button.disabled {
    background: #777;
    color: #ccc;

    cursor: default;

    pointer-events: none;

    box-shadow: none;
}
/* =========================================
   TOWN MAP POPUP
========================================= */

.town-map-popup {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.55);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 500;

    transition:
        opacity 0.15s ease;
}

.town-map-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================
   TOWN MAP CARD
========================================= */

.town-map-card {
    width: min(1250px, 96vw);
    height: min(850px, 94vh);

    padding: 8px;

    display: flex;
    flex-direction: column;

    background: #e8e8e8;

    border: 5px solid #333;

    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 4px #777;

    border-radius: 8px;

    color: #111;

    font-family: "Firefont", monospace;

    overflow: hidden;
}


/* =========================================
   HEADER
========================================= */

.town-map-header {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px 14px;

    margin-bottom: 8px;

    background: #eeeeee;

    border-bottom: 3px solid #777;

    font-size: clamp(
        18px,
        2.5vw,
        30px
    );
}

.town-map-controls {
    display: flex;

    gap: 20px;

    font-size: clamp(
        9px,
        1.1vw,
        13px
    );

    color: #555;
}


/* =========================================
   MAP + INFO
========================================= */

.town-map-content {
    flex: 1;

    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(300px, 0.9fr);

    gap: 8px;
}


/* =========================================
   MAP STAGE
========================================= */

.town-map-stage {
    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background: #74b9df;

    border: 3px solid #222;

    border-radius: 5px;
}


/* =========================================
   SVG MAP
========================================= */

.town-map-svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    pointer-events: none;
}


/* Water base */

.town-map-water {
    fill: #72b8df;
}


/* Land */

.town-map-land {
    fill: #82c95a;

    stroke: #477d35;

    stroke-width: 4;
}


/* Routes */

.town-map-route {
    fill: none;

    stroke: #f3d66b;

    stroke-width: 18;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* River */

.town-map-river {
    fill: none;

    stroke: #4d9ed1;

    stroke-width: 20;

    stroke-linecap: round;
}


/* Mountains */

.town-map-mountain {
    fill: #98754c;

    stroke: #654a31;

    stroke-width: 3;
}


/* Trees */

.town-map-trees circle {
    fill: #327f3b;

    stroke: #245c2b;

    stroke-width: 3;
}


/* =========================================
   TOWN POINT
========================================= */

.town-point {
    position: absolute;

    transform:
        translate(-50%, -50%);

    width: 125px;

    padding: 0;

    border: none;

    background: transparent;

    color: #ffffff;

    font-family: "Firefont", monospace;

    cursor: pointer;

    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =========================================
   POINT MARKER
========================================= */

.town-point-marker {
    width: 25px;
    height: 25px;

    border-radius: 50%;

    background: #e84b36;

    border: 3px solid #ffffff;

    box-shadow:
        0 0 0 2px #222;

    transition:
        transform 0.12s ease;
}


/* =========================================
   POINT NUMBER
========================================= */

.town-point-number {
    margin-top: 4px;

    padding: 2px 2px;

    background: #111;

    font-size: 11px;

    line-height: 1;
}


/* =========================================
   POINT LABEL
========================================= */

.town-point-label {
    margin-top: 3px;

    max-width: 125px;

    padding: 4px 5px;

    background: #111;

    font-size: 13spx;

    line-height: 1.25;

    text-align: center;
}


/* Hover */

.town-point:hover
.town-point-marker {
    transform: scale(1.15);
}


/* =========================================
   ACTIVE POINT
========================================= */

.town-point.active
.town-point-marker {
    animation:
        townPointPulse
        0.8s
        ease-in-out
        infinite alternate;
}

@keyframes townPointPulse {

    from {
        transform: scale(0.88);
    }

    to {
        transform: scale(1.15);
    }
}


/* =========================================
   MOVING CURSOR
========================================= */

.town-cursor {
    position: absolute;

    width: 62px;
    height: 62px;

    transform:
        translate(-50%, -50%);

    pointer-events: none;

    z-index: 30;

    transition:
        left 0.16s steps(3),
        top 0.16s steps(3);

    animation:
        townCursorPulse
        0.65s
        ease-in-out
        infinite alternate;
}


/* Four corner brackets */

.town-cursor span {
    position: absolute;

    width: 18px;
    height: 18px;
}


/* Top-left */

.town-cursor span:nth-child(1) {
    top: 0;
    left: 0;

    border-top: 5px solid #ffffff;
    border-left: 5px solid #ffffff;
}


/* Top-right */

.town-cursor span:nth-child(2) {
    top: 0;
    right: 0;

    border-top: 5px solid #ffffff;
    border-right: 5px solid #ffffff;
}


/* Bottom-left */

.town-cursor span:nth-child(3) {
    bottom: 0;
    left: 0;

    border-bottom: 5px solid #ffffff;
    border-left: 5px solid #ffffff;
}


/* Bottom-right */

.town-cursor span:nth-child(4) {
    bottom: 0;
    right: 0;

    border-bottom: 5px solid #ffffff;
    border-right: 5px solid #ffffff;
}


@keyframes townCursorPulse {

    from {
        transform:
            translate(-50%, -50%)
            scale(0.82);

        opacity: 0.65;
    }

    to {
        transform:
            translate(-50%, -50%)
            scale(1.08);

        opacity: 1;
    }
}


/* =========================================
   ACHIEVEMENT PANEL
========================================= */

.town-achievement {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 12px;

    background: #dcebc9;

    border: 3px solid #4f6740;

    overflow: hidden;
}


/* =========================================
   ACHIEVEMENT HEADER
========================================= */

.town-achievement-header {
    display: flex;
    align-items: center;

    gap: 10px;

    padding-bottom: 10px;

    border-bottom: 2px dashed #66775e;
}


.town-achievement-header > span {
    flex-shrink: 0;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #222;

    color: #ffffff;

    font-size: 13px;
}


.town-achievement-header h2 {
    font-size: clamp(
        13px,
        1.5vw,
        20px
    );

    line-height: 1.35;
}


/* =========================================
   IMAGE
========================================= */

.town-achievement-image {
    width: 100%;

    height: 200px;

    margin-top: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    
    background:
        repeating-linear-gradient(
            45deg,
            #e8e8e8 0px,
            #e8e8e8 4px,
            #dedede 4px,
            #dedede 8px
        );

    border: 3px solid #666;

    overflow: hidden;
}


.town-achievement-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    


    display: none;
}


#town-image-placeholder {
    text-align: center;

    color: #777;

    font-size: clamp(
        12px,
        1.5vw,
        18px
    );

    line-height: 1.5;
}


/* =========================================
   DESCRIPTION
========================================= */

.town-achievement-description {
    margin-top: 14px;

    overflow-y: auto;
}


.town-achievement-description h3 {
    font-size: 15px;
}


.town-description-line {
    margin:
        5px 0 12px;

    border-top: 2px dashed #66775e;
}


.town-achievement-description p {
    font-size: clamp(
        11px,
        1.3vw,
        16px
    );
    text-align: justify;

    line-height: 1.6;

    color: #333;
}


/* =========================================
   FOOTER
========================================= */

.town-map-footer {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 8px;

    padding: 8px 12px;

    background: #eeeeee;

    border-top: 3px solid #777;

    font-size: clamp(
        9px,
        1.2vw,
        14px
    );
}


.town-map-close {
    padding:
        5px 16px;

    border: none;

    background: transparent;

    font-family:
        "Firefont",
        monospace;

    font-size: clamp(
        12px,
        1.4vw,
        17px
    );

    cursor: pointer;
}


.town-map-close::before {
    content: "▶";

    margin-right: 7px;

    font-size: 10px;
}

/* =========================================
   COMMENTS POPUP
========================================= */

.comments-popup {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.65);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease;
}


.comments-popup.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================
   COMMENTS CARD
========================================= */

.comments-card {
    width: min(900px, 92vw);
    height: min(720px, 90vh);

    display: flex;
    flex-direction: column;

    background: #f8f8f8;

    border: 6px solid #222;

    box-shadow:
        8px 8px 0 #111;

    font-family:
        "Firefont",
        monospace;

    overflow: hidden;
}


/* =========================================
   HEADER
========================================= */

.comments-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 12px 15px;

    background: #d8d8d8;

    border-bottom: 4px solid #222;
}


.comments-header h2 {
    margin: 0;

    font-size: 25px;

    line-height: 1.4;
}


.comments-close {
    width: 38px;
    height: 32px;

    padding: 0;

    border: 3px solid #222;

    background: #eeeeee;

    font-family:
        "Firefont",
        monospace;

    font-size: 20px;

    cursor: pointer;
}


.comments-close:hover {
    background: #cfcfcf;
}


.comments-close:active {
    transform: translate(
        2px,
        2px
    );
}


/* =========================================
   CONTENT
========================================= */

.comments-content {
    flex: 1;

    min-height: 0;

    display: grid;

    grid-template-columns:
        1.2fr
        0.8fr;

    gap: 12px;

    padding: 12px;

    overflow: hidden;
}


/* =========================================
   COMMENTS LIST
========================================= */

.comments-list-section {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    border: 4px solid #222;

    background: #eeeeee;
}


.comments-section-title {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 9px 10px;

    background: #d0d0d0;

    border-bottom: 4px solid #222;

    font-size: 20px;
}


.comments-count {
    min-width: 30px;

    padding: 4px 5px;

    text-align: center;

    background: #222;

    color: #fff;

    font-size: 15px;
}


/* =========================================
   COMMENT LIST
========================================= */

.comments-list {
    flex: 1;

    min-height: 0;

    padding: 8px;

    overflow-y: auto;
}


/* SCROLLBAR */

.comments-list::-webkit-scrollbar {
    width: 10px;
}


.comments-list::-webkit-scrollbar-track {
    background: #d0d0d0;

    border-left: 2px solid #222;
}


.comments-list::-webkit-scrollbar-thumb {
    background: #555;

    border: 2px solid #222;
}


/* =========================================
   EMPTY STATE
========================================= */

.comments-empty {
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 25px;

    text-align: center;

    font-size: 20px;

    line-height: 2;

    color: #555;
}

.comment-item {
    display: grid;

    grid-template-columns:
        64px
        1fr;

    gap: 10px;

    margin-bottom: 8px;

    padding: 9px;

    background: #ffffff;

    border: 3px solid #222;

    box-shadow:
        3px 3px 0 #999;

    position: relative;
}


.comment-avatar-display {
    width: 56px;
    height: 56px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #d8d8d8;

    border: 3px solid #222;

    overflow: hidden;
}


.comment-avatar-display img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.comment-body {
    min-width: 0;

    padding-right: 80px;
}


.comment-name {
    margin-bottom: 6px;

    font-size: 15px;

    word-break: break-word;
}


.comment-text {
    margin: 0;

    font-family:
        "Firefont",
        monospace;

    font-size: 13px;

    line-height: 1.8;

    word-break: break-word;

    white-space: pre-wrap;
}


.comment-date {
    position: absolute;

    top: 8px;
    right: 9px;

    margin: 0;

    font-size: 11px;

    color: #777;
}
/* =========================================
   FORM
========================================= */

.comments-form {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 10px;

    border: 4px solid #222;

    background: #eeeeee;

    overflow-y: auto;
}


.comment-field {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.comment-field label,
.comment-avatar-section > label {
    font-size: 15px;
}


/* =========================================
   INPUTS
========================================= */

#comment-name,
#comment-text {
    width: 100%;

    border: 3px solid #222;

    background: #fff;

    border-radius: 0;

    outline: none;

    font-family:
        "Firefont",
        monospace;

    font-size: 15px;

    color: #222;
}


#comment-name {
    height: 38px;

    padding: 7px;
}


#comment-text {
    height: 120px;

    padding: 8px;

    resize: none;

    line-height: 1.7;
}


#comment-name:focus,
#comment-text:focus {
    background: #fffff0;

    box-shadow:
        3px 3px 0 #555;
}


#comment-name::placeholder,
#comment-text::placeholder {
    color: #999;

    opacity: 1;
}


/* =========================================
   CHARACTER COUNT
========================================= */

.comment-character-count {
    align-self: flex-end;

    font-size: 15px;

    color: #666;
}

/* =========================================
   AVATARS
========================================= */

.comment-avatar-section {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.comment-avatars {
    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 5px;
}


.comment-avatar {
    aspect-ratio: 1;

    min-width: 0;

    padding: 3px;

    border: 3px solid #222;

    background: #d8d8d8;

    cursor: pointer;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}


.comment-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    border: none;
    outline: none;

    /* Keeps pixel-art avatars crisp */
    image-rendering: pixelated;

    pointer-events: none;
}


/* =========================================
   INACTIVE AVATAR
========================================= */

.comment-avatar:not(.active) {
    opacity: 1;
}

.comment-avatar:not(.active) img {
    opacity: 1;

    filter: none;

    transform: none;
}


/* =========================================
   ACTIVE AVATAR
========================================= */

.comment-avatar.active {
    background: #fff;
}

.comment-avatar.active img {
    opacity: 1;

    filter: none;

    transform: none;
}


.comment-avatar:hover {
    background: #c5c5c5;
}


.comment-avatar:active {
    transform: translate(
        1px,
        1px
    );
}


/* =========================================
   ERROR
========================================= */

.comment-error {
    min-height: 16px;

    font-size: 15px;

    line-height: 1.5;

    text-align: center;

    color: #a00000;
}


/* =========================================
   LEAVE COMMENT BUTTON
========================================= */

.leave-comment-button {
    width: 100%;

    min-height: 44px;

    margin-top: auto;

    padding: 8px;

    border: 4px solid #222;

    background: #d8d8d8;

    font-family:
        "Firefont",
        monospace;

    font-size: 15px;

    cursor: pointer;
}


.leave-comment-button:hover {
    background: #c5c5c5;
}


.leave-comment-button:active {
    transform: translate(
        3px,
        3px
    );

    box-shadow: none;
}


.leave-comment-button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


/* =========================================
   FOOTER
========================================= */

.comments-footer {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    padding: 7px 10px;

    background: #d0d0d0;

    border-top: 4px solid #222;

    font-size: 15px;
}
@media (max-width: 480px) {

    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body {
        background: #000000;
    }


    /* =====================================
       HOME SCREEN
    ===================================== */

    .home-screen {
        position: relative;

        width: 100%;
        height: 100dvh;

        padding: 6px;

        display: flex;
        flex-direction: column;

        gap: 6px;

        overflow: hidden;

        background-image:
            url("assets/home-background-mobile.png");

        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }


    /* =====================================
       MOBILE NIGHT MODE
    ===================================== */

    .overworld {
        position: relative;
        inset: auto;

        width: 100%;
        height: auto;

        flex: 1;
        min-height: 0;

        background: transparent;
        border-radius: 6px;
    }

    body.night-mode .overworld {
        background-image: none;
        background-color: transparent;
    }

    body.night-mode .home-screen {
        background-image:
            url("assets/home-background-mobile-night.png");
    }


    /* =====================================
       OVERWORLD CONTENT
    ===================================== */

    .overworld-content {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 100%;
    }


    /* =====================================
       MOBILE TRAINER
    ===================================== */

    .trainer-sprite {
        width: clamp(70px, 28vw, 140px);

        transform:
            translateX(-35px)
            translateY(50px);
    }


    /* =====================================
       MOBILE POKÉMON
    ===================================== */

    .pokemon-sprite {
        width: clamp(70px, 22vw, 110px);

        transform:
            translateX(55px)
            translateY(80px);
    }


    /* =====================================
       MESSAGE BOX
    ===================================== */

    .message-box {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;

        min-height: 0;

        padding: 7px 10px;
        margin: 0;

        flex-shrink: 0;

        background: #ffffff;

        border: 5px solid #000000;

        box-shadow:
            inset 0 0 0 2px #ffffff,
            inset 0 0 0 4px #000000;

        border-radius: 6px;

        z-index: 20;
    }

    .message-box p {
        font-size: clamp(
            15px,
            4.4vw,
            21px
        );

        line-height: 1.3;

        overflow-wrap: break-word;
    }


    /* =====================================
       MAIN MENU
    ===================================== */

    .pokemon-menu {
        position: relative;

        top: auto;
        right: auto;

        width: 100%;
        max-width: none;

        height: clamp(
            250px,
            44dvh,
            390px
        );

        flex-shrink: 0;

        padding: 6px;
        margin: 0;

        background: #ffffff;

        border: 5px solid #000000;

        box-shadow:
            inset 0 0 0 2px #ffffff,
            inset 0 0 0 4px #000000;

        border-radius: 6px;

        overflow: hidden;

        z-index: 10;
    }

    .menu-inner {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: 100%;
    }

    .menu-item {
        flex: 1;

        min-height: 0;

        padding:
            2px
            5px
            2px
            36px;

        font-size: clamp(
            16px,
            min(5vw, 3.8dvh),
            23px
        );

        line-height: 1;

        white-space: nowrap;
        overflow: hidden;

        background: transparent;
        color: #000000;
    }

    .menu-item.active {
        background: transparent;
        color: #000000;
    }

    .menu-item::before {
        left: 9px;
        top: 50%;

        transform:
            translateY(-50%)
            scale(0);

        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 10px solid #000000;

        transition: none;
    }

    .menu-item.active::before {
        transform:
            translateY(-50%)
            scale(1);
    }


    /* =====================================
       POPUP OVERLAY
    ===================================== */

    .resume-popup,
    .trainer-popup,
    .badges-popup,
    .pokenav-popup,
    .town-map-popup {
        padding: 12px;
    }

/* =====================================
   MOBILE POKEDEX
===================================== */

.projects-card {
    width: 96%;
    max-width: 430px;

    height: 94dvh;

    display: flex;
    flex-direction: column;

    padding: 10px;

    overflow: hidden;
}


/* =====================================
   HEADER
===================================== */

.projects-header {
    flex-shrink: 0;

    width: 100%;

    padding: 8px 6px;

    font-size: 16px;
}


/* =====================================
   CONTENT
===================================== */

.projects-content {
    width: 100%;

    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 8px;
}


/* =====================================
   MOBILE PROJECT CAROUSEL
===================================== */

.projects-carousel {
    order: 1;

    width: 100%;
    height: 145px;

    flex-shrink: 0;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* =====================================
   PROJECT SLIDES
===================================== */

.project-slide {
    position: absolute;

    top: 50%;

    width: 92px;
    height: 92px;

    transform:
        translate(-50%, -50%);

    transition:
        left 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease,
        filter 0.25s ease;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* =====================================
   PREVIOUS
===================================== */

.project-slide.previous {

    left: 18%;

    opacity: 0.45;

    transform:
        translate(-50%, -50%)
        scale(0.72);

    filter: blur(0.4px);

    z-index: 1;
}


/* =====================================
   ACTIVE
===================================== */

.project-slide.active {

    left: 50%;

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);

    filter: none;

    z-index: 3;
}


/* =====================================
   NEXT
===================================== */

.project-slide.next {

    left: 82%;

    opacity: 0.45;

    transform:
        translate(-50%, -50%)
        scale(0.72);

    filter: blur(0.4px);

    z-index: 1;
}


/* =====================================
   ICON FRAME
===================================== */

.project-icon {

    width: 88px;
    height: 88px;

    padding: 8px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.project-icon img {

    width: 100%;
    height: 100%;

    object-fit: contain;

}


/* =====================================
   PROJECT INFORMATION
===================================== */

.project-information {

    order: 2;

    width: 100%;

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding:
        12px 12px 14px;
}


/* =====================================
   PROJECT TITLE
===================================== */

.project-title {

    gap: 6px;

    margin-bottom: 8px;
}

.project-title h2 {

    font-size: 20px;

    line-height: 1.3;
}

.project-number {

    font-size: 16px;
}


/* =====================================
   BRIEF
===================================== */

.project-brief {

    font-size: 17px;

    line-height: 1.6;
    text-align: justify;

    margin-bottom: 10px;
}


/* =====================================
   SECTIONS
===================================== */

.project-section {

    margin-top: 10px;
}

.project-section h3 {

    font-size: 17px;

    margin-bottom: 6px;
}


/* =====================================
   TECH STACK
===================================== */

.project-tech {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;
}

.project-tech span {

    padding:
        4px 6px;

    font-size: 17px;
}


/* =====================================
   DESCRIPTION
===================================== */

.project-description p {

    font-size: 17px;

    line-height: 1.7;
    text-align: justify;
}


/* =====================================
   VIEW PROJECT
===================================== */

.project-view-button {

    min-width: 125px;

    padding:
        7px 10px;

    font-size: 12px;
}


/* =====================================
   CLOSE BUTTON
===================================== */

.projects-close {

    flex-shrink: 0;

    margin-top: 7px;

    padding:
        8px 14px;

    font-size: 13px;
}
/* =====================================
   MOBILE POKEDEX HORIZONTAL ROLL
===================================== */

.projects-carousel.roll-up
.project-slide.active {

    animation:
        mobile-pokedex-next
        0.43s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.projects-carousel.roll-down
.project-slide.active {

    animation:
        mobile-pokedex-previous
        0.43s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* NEXT — MOVE LEFT */

@keyframes mobile-pokedex-next {

    0% {

        transform:
            translate(-50%, -50%)
            scale(1);

        opacity: 1;
    }

    45% {

        transform:
            translate(
                -90%,
                -50%
            )
            scale(0.88);

        opacity: 0.55;
    }

    100% {

        transform:
            translate(-50%, -50%)
            scale(1);

        opacity: 1;
    }
}


/* PREVIOUS — MOVE RIGHT */

@keyframes mobile-pokedex-previous {

    0% {

        transform:
            translate(-50%, -50%)
            scale(1);

        opacity: 1;
    }

    45% {

        transform:
            translate(
                -10%,
                -50%
            )
            scale(0.88);

        opacity: 0.55;
    }

    100% {

        transform:
            translate(-50%, -50%)
            scale(1);

        opacity: 1;
    }
}
    /* =====================================
       RESUME
    ===================================== */

    .resume-popup-content {
        width: calc(100% - 30px);
        padding: 18px 14px;
    }

    .resume-popup-content p {
        margin-bottom: 18px;

        font-size: clamp(
            16px,
            5vw,
            22px
        );

        line-height: 1.4;
    }

    .resume-popup-buttons {
        gap: 30px;
    }

    .resume-popup-buttons button {
        min-width: 70px;

        padding: 6px 10px;

        font-size: clamp(
            16px,
            4.5vw,
            22px
        );
    }


    /* =====================================
       TRAINER CARD
    ===================================== */

    .trainer-card {
        width: calc(100% - 24px);
        padding: 6px;
    }

    .trainer-card-header {
        padding: 4px 7px;

        font-size: clamp(
            16px,
            4vw,
            20px
        );
    }

    .trainer-id {
        font-size: clamp(
            10px,
            2.8vw,
            13px
        );
    }

    .trainer-card-body {
        min-height: 120px;
        padding: 7px;
    }

    .trainer-info {
        width: 72%;
    }

    .trainer-info p {
        margin-bottom: 10px;

        font-size: clamp(
            16px,
            3vw,
            18px
        );

        line-height: 1.2;
    }

    .trainer-card-sprite {
        right: 10px;
        bottom: 10px;

        width: clamp(
            110px,
            30vw,
            140px
        );
    }

    .trainer-description {
        min-height: 65px;
        padding: 6px 8px;
    }

    .trainer-description-title {
        font-size: clamp(
            14px,
            3vw,
            18px
        );
    }

    .trainer-description p {
        font-size: clamp(
            16px,
            2.8vw,
            18px
        );

        text-align: justify;
    }

    .trainer-close {
        font-size: clamp(
            11px,
            3.5vw,
            16px
        );

        padding: 4px 15px;
    }


    /* =====================================
       BADGES MOBILE
       
       TOP:
       Large badge display

       BOTTOM:
       Horizontal badge boxes

       NO RISE ANIMATION
    ===================================== */

    .badges-card {
        width: min(94vw, 520px);

        max-height: 92dvh;

        display: flex;
        flex-direction: column;

        padding: 5px;

        border-width: 4px;
        border-radius: 6px;

        overflow: hidden;
    }

    .badges-header {
        flex-shrink: 0;

        padding: 5px 7px;
        margin-bottom: 5px;

        border-width: 2px;

        font-size: clamp(
            15px,
            4.2vw,
            20px
        );
    }

    .badges-count {
        font-size: clamp(
            9px,
            2.8vw,
            13px
        );
    }


    /* =====================================
       BADGES CONTENT
    ===================================== */

    .badges-content {
        display: flex;
        flex-direction: column;

        gap: 8px;

        width: 100%;

        flex: 1;
        min-height: 0;

        height: auto;
    }


    /* =====================================
       BADGE DISPLAY — TOP
    ===================================== */

    .badge-display {
        order: 1;

        width: 100%;

        flex: 1;
        min-height: 0;

        display: flex;
        flex-direction: column;

        overflow: hidden;

        border-width: 2px;
    }

    .badge-display-image {
        width: 100%;

        flex: 1;

        min-height: 150px;

        padding: 8px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .badge-display-image img {
        width: auto;

        max-width: 75%;
        max-height: 180px;

        height: auto;

        object-fit: contain;
    }

    .badge-display-info {
        width: 100%;

        padding: 7px 10px;

        text-align: center;

        flex-shrink: 0;
    }

    .badge-display-info h2 {
        margin-bottom: 4px;

        font-size: clamp(
            18px,
            3.5vw,
            20px
        );

        line-height: 1.2;
    }

    .badge-display-info p {
        font-size: clamp(
            16px,
            2.7vw,
            18px
        );

        line-height: 1.3;

        overflow-wrap: break-word;
    }


    /* =====================================
       BADGE LIST — BOTTOM
       
       Horizontal square boxes.
       No rise animation.
    ===================================== */

    .badge-list {
        order: 2;

        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(4, 1fr);

        gap: 5px;

        padding: 6px;

        flex-shrink: 0;

        overflow: hidden;

        border-width: 2px;

        background: #6f451f;
    }

    .badge-slot {
        width: 100%;

        aspect-ratio: 1 / 1;

        min-width: 0;
        min-height: 0;

        padding: 3px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-width: 2px;

        transform: translateY(0);

        transition:
            transform 0.12s ease,
            background 0.12s ease;
    }
    .badge-slot.active {
        transform: none;

        box-shadow:
            inset 0 0 0 1px #ffffff;

        animation:
            badgeHighlight
            0.8s
            steps(1, end)
            infinite;
    }

    .badge-slot-image {
        width: 70%;
        height: 70%;

        object-fit: contain;
    }

    .badge-slot.locked::after {
        bottom: 2px;
        font-size: 6px;
    }

    .badges-close {
        flex-shrink: 0;

        margin: 5px auto 1px;

        padding: 3px 12px;

        font-size: clamp(
            11px,
            3.5vw,
            16px
        );
    }

    .badges-close::before {
        margin-right: 5px;
        font-size: 9px;
    }


    /* =====================================
       POKENAV MOBILE
       
       TOP:
       Large image/display

       MIDDLE:
       Contact information

       BOTTOM:
       Square icon boxes
    ===================================== */

    .pokenav-card {
        width: min(94vw, 520px);

        max-height: 92dvh;

        display: flex;
        flex-direction: column;

        padding: 5px;

        border-width: 4px;

        overflow: hidden;
    }

    .pokenav-header {
        flex-shrink: 0;

        padding: 5px 8px;
        margin-bottom: 5px;

        border-bottom-width: 3px;

        font-size: clamp(
            17px,
            5vw,
            24px
        );
    }

    /* =====================================
   POKENAV STATUS CIRCLE — MOBILE
===================================== */

.pokenav-icon {
    width: 27px;
    height: 27px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    font-size: 0;
}

.pokenav-icon::after {
    width: 16px;
    height: 16px;
}


    /* =====================================
       POKENAV CONTENT
    ===================================== */

    .pokenav-content {
        display: flex;
        flex-direction: column;

        gap: 8px;

        width: 100%;

        padding: 6px;

        flex: 1;
        min-height: 0;
    }


    /* =====================================
       POKENAV DISPLAY — TOP
    ===================================== */
    .pokenav-image img {
            width: auto;
            height: 100px;

            object-fit: contain;
        }
    .pokenav-display {
        order: 1;

        width: 100%;

        flex: 1;

        min-height: 0;

        display: flex;
        flex-direction: column;

        overflow: hidden;
    }

    .pokenav-image {
        width: 100%;

        flex: 1;

        min-height: 170px;

        height: auto;

        border-width: 3px;
    }

    .pokenav-image-placeholder {
        width: 85%;
        height: 80%;

        min-height: 0;

        border-width: 3px;

        font-size: 16px;
    }


    /* =====================================
       POKENAV INFORMATION
    ===================================== */

    .pokenav-info {
        width: 100%;

        margin-top: 5px;

        padding: 7px 8px;

        border-width: 3px;

        text-align: center;

        flex-shrink: 0;
    }

    .pokenav-info h2 {
        margin-bottom: 4px;

        font-size: clamp(
            18px,
            3.5vw,
            20px
        );
    }

    .pokenav-info a {
        font-size: clamp(
            18px,
            2.5vw,
            20px
        );

        line-height: 1.3;
    }


    /* =====================================
       POKENAV ICON LIST — BOTTOM
       
       Five square icons:
       ■ ■ ■ ■ ■
    ===================================== */

    .pokenav-list {
        order: 2;

        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(5, 1fr);

        gap: 6px;

        padding: 5px;

        flex-shrink: 0;

        animation:
            pokenav-list-rise
            0.35s
            ease-out;
    }


    /* =====================================
       POKENAV ITEM
    ===================================== */
/* =====================================
   POKENAV ITEM — MOBILE
===================================== */
/* =====================================
   POKENAV ICON — MOBILE CENTERING
===================================== */

.pokenav-item {
    width: 100%;
    aspect-ratio: 1 / 1;

    min-width: 0;
    min-height: 0;

    padding: 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0;

    text-align: center;

    background: #3d8ed8;

    border: none;
    border-bottom: 3px solid #2164a5;

    font-size: 0;

    transform: translateY(0);
}

.pokenav-item.active {
    width: 100%;
    aspect-ratio: 1 / 1;

    margin: 0;

    transform: translateY(-7px);

    background: #5ca8ed;

    border: none;
    border-bottom: 3px solid #2164a5;
}

/* =====================================
   POKENAV COLOR ICON
===================================== */

.pokenav-color {
    display: block;

    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    margin: 0;
    padding: 0;

    flex: 0 0 16px;

    border: 2px solid #ffffff;

    box-sizing: border-box;

    object-fit: contain;
}

    /* =====================================
       POKENAV CLOSE
    ===================================== */

    .pokenav-close {
        flex-shrink: 0;

        margin: 5px auto 1px;

        padding: 3px 14px;

        font-size: clamp(
            10px,
            3.5vw,
            16px
        );
    }


    /* =====================================
       POKENAV LIST RISE
    ===================================== */

    @keyframes pokenav-list-rise {
        from {
            transform: translateY(25px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}


/* =========================================
   VERY SHORT MOBILE
========================================= */

@media (max-width: 480px) and (max-height: 650px) {

    .home-screen {
        padding: 5px;
        gap: 5px;
    }


    /* =====================================
       DESCRIPTION
    ===================================== */

    .message-box {
        padding: 5px 8px;
    }

    .message-box p {
        font-size: clamp(
            14px,
            4.2vw,
            18px
        );

        line-height: 1.2;
    }


    /* =====================================
       MENU
    ===================================== */

    .pokemon-menu {
        height: clamp(
            235px,
            47dvh,
            310px
        );

        padding: 5px;
    }

    .menu-item {
        padding:
            1px
            4px
            1px
            32px;

        font-size: clamp(
            15px,
            min(4.8vw, 3.5dvh),
            19px
        );
    }

    .menu-item::before {
        left: 7px;

        border-top-width: 6px;
        border-bottom-width: 6px;
        border-left-width: 9px;
    }


    /* =====================================
       SPRITES
    ===================================== */

    .trainer-sprite {
        width: 95px;
    }

    .pokemon-sprite {
        width: 70px;
    }


    /* =====================================
       POKENAV
    ===================================== */

    .pokenav-display {
        min-height: 190px;
    }

    .pokenav-image {
        min-height: 130px;
    }

    .pokenav-list {
        gap: 4px;
        padding: 4px;
    }

    .pokenav-item {
        min-width: 0;
    }

    .pokenav-color {
        min-width: 16px;
        min-height: 16px;
    }


    /* =====================================
       BADGES
    ===================================== */

    .badge-display {
        min-height: 210px;
    }

    .badge-display-image {
        min-height: 130px;
    }

    .badge-display-image img {
        max-height: 130px;
    }

    .badge-list {
        gap: 4px;
        padding: 5px;
    }
}


/* =========================================
   LARGE DESKTOP
========================================= */

@media (min-width: 1440px) {

    .overworld-content {
        width: 68%;
    }

    .pokemon-menu {
        width: 350px;
    }

    .message-box {
        left: 40px;
        right: 40px;
        bottom: 30px;
    }
}

/* =========================================
   POKEMON PARTY — MOBILE
========================================= */

@media (max-width: 700px) {

    /* -----------------------------------------
       POPUP
    ----------------------------------------- */
 .pokenav-item {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 7px;

        text-align: center;
    }

    .pokenav-color {
    width: 16px;
    height: 16px;

    flex-shrink: 0;

    margin: 0 auto;

    border: none;

    display: block;
}
    .pokemon-popup {
        padding: 10px;
    }

    .pokemon-card {
        width: min(96vw, 500px);
        padding: 5px;

        max-height: 94vh;
        overflow-y: auto;
    }


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

    .pokemon-header {
        padding: 6px 10px;
        margin-bottom: 5px;

        font-size: clamp(16px, 5vw, 22px);
    }

    .pokemon-header-status {
        font-size: clamp(10px, 3vw, 14px);
    }


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

    .pokemon-content {
        display: flex;
        flex-direction: column;

        gap: 6px;

        min-height: 0;
        padding: 5px;
    }


    /* -----------------------------------------
       SUMMARY — TOP
    ----------------------------------------- */

    .pokemon-summary {
        order: 1;

        width: 100%;

        border-width: 3px;
    }

    .pokemon-summary-header {
        padding: 5px 9px;

        font-size: clamp(16px, 5vw, 22px);
    }


    /* -----------------------------------------
       LARGE POKEMON IMAGE
    ----------------------------------------- */

    .pokemon-summary-image {
        height: 125px;
    }

    .pokemon-summary-image img {
        width: 110px;
        height: 110px;
    }


    /* -----------------------------------------
       SUMMARY INFORMATION
    ----------------------------------------- */

    .pokemon-summary-section {
        padding: 7px 10px;
    }

    .pokemon-summary-section h2 {
        margin-bottom: 4px;

        font-size: clamp(13px, 3.8vw, 18px);
    }

    .pokemon-summary-section p,
    .pokemon-nature p {
        font-size: clamp(16px, 3vw, 18px);
        line-height: 1.4;
    }

    .pokemon-label {
        font-size: clamp(12px, 3.2vw, 16px);
    }


    /* -----------------------------------------
       TYPE
    ----------------------------------------- */

    .pokemon-summary-section:has(.pokemon-types) {
        display: flex;
        align-items: center;

        gap: 6px;
        flex-wrap: nowrap;
    }

    .pokemon-types {
        flex-wrap: wrap;
        gap: 4px;
    }


    /* -----------------------------------------
       NATURE
    ----------------------------------------- */

    .pokemon-nature {
        padding: 7px 10px;
    }

    .pokemon-nature .pokemon-label {
        display: block;
        margin-bottom: 4px;

        font-weight: bold;
    }


    /* -----------------------------------------
       PARTY — MOVE TO BOTTOM
    ----------------------------------------- */
.pokemon-party {
    order: 2;

    width: 100%;

    display: grid;
    grid-template-columns: repeat(6, 1fr);

    gap: 3px;

    padding: 4px;

    background: #a91e1e;
    border: 3px solid #6d1111;
}


/* -----------------------------------------
   PARTY ITEM
----------------------------------------- */

.pokemon-party-item {
    min-height: 0;

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 3px 1px;

    border: 2px solid transparent;
    border-bottom: 3px solid #6d1111;

    background: #d93636;

    text-align: center;
}


/* -----------------------------------------
   POKEMON ICON
----------------------------------------- */

.pokemon-party-item img {
    width: 30px;
    height: 30px;

    margin: 0;

    object-fit: contain;
    image-rendering: pixelated;
}


/* -----------------------------------------
   POKEMON NAME
----------------------------------------- */

.pokemon-party-name {
    display: block;

    margin-top: 2px;
    margin-bottom: 0;

    font-size: clamp(6px, 1.8vw, 9px);

    line-height: 1;
    text-align: center;
}


    /* -----------------------------------------
       REMOVE HP ON MOBILE
    ----------------------------------------- */

    .pokemon-hp-bar,
    .pokemon-hp-text {
        display: none;
    }


    /* -----------------------------------------
       ACTIVE POKEMON
    ----------------------------------------- */

    .pokemon-party-item.active {
        background: #e95757;

        border: 2px solid #ffffff;
        border-bottom: 3px solid #7a1111;

        transform: none;
    }

    .pokemon-party-item.active::before {
        content: "▶";

        position: absolute;

        left: 50%;
        top: -10px;

        transform: translateX(-50%);

        color: #7a1111;

        font-size: 10px;
    }


    /* -----------------------------------------
       CLOSE BUTTON
    ----------------------------------------- */

    .pokemon-close {
        width: 150px;

        margin: 2px auto 2px;
        padding: 6px 10px;

        font-size: clamp(10px, 3vw, 13px);
    }
    /* =====================================
   POKENAV ICON — FORCE TRUE CENTER
===================================== */

.pokenav-item {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    min-width: 0;
    min-height: 0;

    padding: 0;

    display: block;

    font-size: 0;
    text-align: center;

    background: #3d8ed8;

    border: none;
    border-bottom: 3px solid #2164a5;

    transform: translateY(0);
}

.pokenav-item.active {
    margin: 0;

    transform: translateY(-7px);

    background: #5ca8ed;

    border: none;
    border-bottom: 3px solid #2164a5;
}


/* =====================================
   POKENAV ICON
   EXACT CENTER
===================================== */

.pokenav-item .pokenav-color {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    margin: 0;
    padding: 0;

    transform: translate(-50%, -50%);

    display: block;

    flex: none;



    box-sizing: border-box;
}

}
/* =========================================
   TOWN MAP — MOBILE
========================================= */

@media (max-width: 768px) {
 .town-point {
        z-index: 20;
        pointer-events: auto;
        touch-action: manipulation;
    }

    .town-cursor {
        pointer-events: none;
        z-index: 5;
    }
    .town-map-popup {
        padding: 7px;
    }


    .town-map-card {
        width: 98vw;
        height: 96dvh;

        padding: 5px;

        border-width: 4px;
    }


    /* HEADER */

    .town-map-header {
        padding:
            6px 8px;

        margin-bottom: 5px;

        font-size: 15px;
    }


    .town-map-controls {
        display: none;
    }


    /* CONTENT */

    .town-map-content {
        display: flex;
        flex-direction: column;

        gap: 5px;

        overflow: hidden;
    }


    /* MAP */

    .town-map-stage {
        width: 100%;

        height: 52%;

        flex-shrink: 0;
    }


    /* SMALLER POINTS */

    .town-point {
        width: 72px;
    }


    .town-point-marker {
        width: 18px;
        height: 18px;

        border-width: 2px;
    }


    .town-point-number {
        margin-top: 2px;

        padding:
            2px 4px;

        font-size: 7px;
    }


    .town-point-label {
        max-width: 75px;

        padding:
            3px 3px;

        font-size: 10px;

        line-height: 1.2;
    }


    /* CURSOR */

    .town-cursor {
        width: 45px;
        height: 45px;
    }


    .town-cursor span {
        width: 13px;
        height: 13px;
    }


    .town-cursor span:nth-child(1) {
        border-width: 3px;
    }

    .town-cursor span:nth-child(2) {
        border-width: 3px;
    }

    .town-cursor span:nth-child(3) {
        border-width: 3px;
    }

    .town-cursor span:nth-child(4) {
        border-width: 3px;
    }

/* =========================================
   INFORMATION — MOBILE
========================================= */

.town-achievement {
    flex: 1;

    min-height: 0;

    padding: 7px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto 1fr;

    gap: 7px;
}


/* HEADER */

.town-achievement-header {
    grid-column: 1 / -1;

    padding-bottom: 5px;

    gap: 7px;
}


/* IMAGE — LEFT HALF */
.town-achievement-image {
    grid-column: 1;
    grid-row: 2;

    width: 100%;
    height: 100%;

    min-height: 100px;

    margin-top: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        repeating-linear-gradient(
            45deg,
            #e8e8e8 0px,
            #e8e8e8 4px,
            #dedede 4px,
            #dedede 8px
        );

    border: 2px solid #222;

    overflow: hidden;
}


/* IMAGE ITSELF */

.town-achievement-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}
/* PLACEHOLDER */

#town-image-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 8px;
}


/* DESCRIPTION — RIGHT HALF */

.town-achievement-description {
    grid-column: 2;

    grid-row: 2;

    margin-top: 0;

    padding-left: 3px;

    overflow-y: auto;
}


    /* DESCRIPTION */

    .town-achievement-description {
        margin-top: 0;

        padding-left: 3px;

        overflow-y: auto;
    }


    .town-achievement-description h3 {
        font-size: 15px;
    }


    .town-description-line {
        margin:
            3px 0 6px;
    }


    .town-achievement-description p {
        font-size: 14px;
        text-align: justify;
        line-height: 1.5;
    }


    /* FOOTER */

    .town-map-footer {
        margin-top: 5px;

        padding:
            5px 7px;

        font-size: 7px;
    }


    .town-map-close {
        padding:
            4px 8px;

        font-size: 9px;
    }

}
.town-cursor {
    pointer-events: none;
}
.town-point {
    position: absolute;
    z-index: 10;
    cursor: pointer;
    touch-action: manipulation;
}

/* =========================================
   COMMENTS — MOBILE
========================================= */

@media (max-width: 768px) {

    .comments-popup {
        padding: 7px;
    }


    .comments-card {
        width: 98vw;
        height: 96dvh;

        border-width: 4px;

        box-shadow:
            5px 5px 0 #111;
    }


    /* HEADER */

    .comments-header {
        padding: 7px 8px;

        border-bottom-width: 3px;
    }


    .comments-header h2 {
        font-size: 18px;
    }


    .comments-close {
        width: 30px;
        height: 26px;

        border-width: 2px;

        font-size: 18px;
    }


    /* CONTENT */

    .comments-content {
        display: flex;
        flex-direction: column;

        gap: 7px;

        padding: 7px;

        overflow: hidden;
    }


    /* COMMENTS */

    .comments-list-section {
        flex: 1;

        min-height: 0;

        border-width: 3px;
    }


    .comments-section-title {
        padding: 6px 7px;

        border-bottom-width: 3px;

        font-size: 18px;
    }


    .comments-count {
        min-width: 24px;

        padding: 3px;

        font-size: 18px;
    }


    .comments-list {
        padding: 5px;
    }


    /* COMMENT */

    .comment-item {
        grid-template-columns:
            48px
            1fr;

        gap: 7px;

        margin-bottom: 6px;

        padding: 6px;

        border-width: 2px;

        box-shadow:
            2px 2px 0 #999;
    }


    .comment-avatar-display {
        width: 42px;
        height: 42px;

        border-width: 2px;
    }


    .comment-name {
        margin-bottom: 4px;

        font-size: 15px;
    }


    .comment-text {
        font-size: 15px;

        line-height: 1.7;
    }


    .comment-date {
        margin-top: 5px;

        font-size: 15px;
    }


    .comments-empty {
        padding: 15px;

        font-size: 15px;

        line-height: 1.8;
    }


    /* FORM */

    .comments-form {
        flex: 0 0 auto;

        gap: 6px;

        padding: 7px;

        border-width: 3px;

        overflow: visible;
    }


    .comment-field {
        gap: 4px;
    }


    .comment-field label,
    .comment-avatar-section > label {
        font-size: 15px;
    }


    #comment-name {
        height: 32px;

        padding: 6px;

        border-width: 2px;

        font-size: 15px;
    }


    #comment-text {
        height: 65px;

        padding: 6px;

        border-width: 2px;

        font-size: 15px;
    }


    .comment-character-count {
        font-size: 5px;
    }


    /* AVATARS */

    .comment-avatars {
        grid-template-columns:
            repeat(6, 1fr);

        gap: 4px;
    }


    .comment-avatar {
        padding: 2px;

        border-width: 2px;
    }



    /* ERROR */

    .comment-error {
        min-height: 12px;

        font-size: 15px;
    }


    /* BUTTON */

    .leave-comment-button {
        min-height: 36px;

        padding: 6px;

        border-width: 3px;

        font-size: 15px;
    }


    /* FOOTER */

    .comments-footer {
        padding: 5px 7px;

        border-top-width: 3px;

        font-size: 8px;
    }

}