/* =========================================================
   COLOUR PALETTE
   ========================================================= */

:root {
    --petz-green: #55b77f;
    --petz-green-dark: #347653;
    --petz-green-light: #bde7cb;

    --petz-white: #ffffff;

    --petz-bg: #d9d9d9;
    --petz-grey: #808080;
    --petz-dark: #303030;
    --petz-black: #111111;

    --petz-soft: #f4fff7;

    --pixel-font:
        "Trebuchet MS",
        Verdana,
        Arial,
        sans-serif;
}


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

* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {
    margin: 0;

    min-height: 100vh;

    background:
        linear-gradient(
            45deg,
            rgba(255,255,255,.25) 25%,
            transparent 25%
        ) 0 0 / 4px 4px,
        #cfcfcf;

    color: var(--petz-black);

    font-family: var(--pixel-font);

    font-size: 14px;
}


/* =========================================================
   MAIN PAGE WRAPPER

   Matches:
       <div class="animal-page">
   ========================================================= */

.animal-page {
    width: min(100% - 24px, 1050px);

    margin: 20px auto 40px;
}


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

   Matches:
       .animal-header
       .animal-header-inner
       .animal-title
       .animal-sparkle
       .animal-subtitle
   ========================================================= */

.animal-header {
    background: var(--petz-white);

    border: 3px solid var(--petz-green-dark);

    box-shadow:
        5px 5px 0 var(--petz-dark),
        inset 0 0 0 2px var(--petz-green-light);

    padding: 14px;

    margin-bottom: 18px;
}


.animal-header-inner {
    border: 2px dashed var(--petz-green);

    padding: 18px 12px;

    text-align: center;
}


.animal-title {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;
}


.animal-title h1 {
    margin: 0;

    color: var(--petz-green-dark);

    font-family:
        "Trebuchet MS",
        Verdana,
        sans-serif;

    font-size:
        clamp(30px, 7vw, 58px);

    font-weight: 900;

    letter-spacing: -2px;

    text-shadow:
        2px 2px 0 var(--petz-green-light);
}


.animal-sparkle {
    color: var(--petz-green);

    font-size: 24px;
}


.animal-subtitle {
    margin: 5px 0 0;

    color: var(--petz-grey);

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;
}


/* =========================================================
   MAIN TWO-COLUMN LAYOUT

   Matches:
       .animal-main
   ========================================================= */

.animal-main {
    display: grid;

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

    gap: 18px;

    align-items: start;
}


/* =========================================================
   MAIN WINDOW

   Matches:
       .animal-window
   ========================================================= */

.animal-window {
    min-width: 0;

    background: var(--petz-white);

    border: 2px solid var(--petz-dark);

    box-shadow:
        4px 4px 0 var(--petz-grey);
}


/* =========================================================
   WINDOW TITLE BAR

   Matches:
       .window-titlebar
       .window-buttons

   The title bar stays visible while the content below
   scrolls.
   ========================================================= */

.window-titlebar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 30px;

    padding: 4px 7px;

    background: var(--petz-green-dark);

    color: var(--petz-white);

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;

    font-weight: bold;
}


.window-buttons {
    letter-spacing: 2px;

    font-size: 11px;
}


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

   MossyNewt-inspired scrolling content area.

   Desktop:
       maximum height of 700px
       internal vertical scrolling

   Mobile:
       scrolling becomes normal page flow
   ========================================================= */

.window-content {
    padding: 18px;

    min-width: 0;

    max-height: 700px;

    overflow-y: auto;

    overflow-x: hidden;

    scrollbar-width: thin;

    scrollbar-color:
        var(--petz-green)
        var(--petz-soft);
}


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

   Uses only colours already present in the
   Calamint palette.
   ========================================================= */

.window-content::-webkit-scrollbar {
    width: 10px;
}


.window-content::-webkit-scrollbar-track {
    background:
        var(--petz-soft);

    border-left:
        1px solid var(--petz-green-light);
}


.window-content::-webkit-scrollbar-thumb {
    background:
        var(--petz-green);

    border:
        2px solid var(--petz-soft);

    border-radius:
        7px;
}


.window-content::-webkit-scrollbar-thumb:hover {
    background:
        var(--petz-green-dark);
}


.window-content::-webkit-scrollbar-thumb:active {
    background:
        var(--petz-green);
}


.window-content::-webkit-scrollbar-corner {
    background:
        var(--petz-soft);
}


/* =========================================================
   WELCOME BOX

   Matches:
       .welcome-box
       .welcome-star
   ========================================================= */

.welcome-box {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

    padding: 10px 12px;

    background: var(--petz-soft);

    border: 2px dotted var(--petz-green);
}


.welcome-star {
    flex: 0 0 auto;

    color: var(--petz-green);

    font-size: 25px;
}


.welcome-box strong {
    color: var(--petz-green-dark);

    font-size: 15px;
}


.welcome-box p {
    margin: 3px 0 0;

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   BREED SECTION

   Matches:
       .breed-section
       .divider
   ========================================================= */

.breed-section {
    width: 100%;
}


.breed-section h2 {
    margin: 0;

    color: var(--petz-green-dark);

    font-family:
        "Courier New",
        monospace;

    font-size: 20px;

    text-align: center;

    text-transform: uppercase;
}


.breed-section h2 span {
    color: var(--petz-green);
}


.divider {
    height: 8px;

    margin: 8px 0 18px;

    border-top:
        2px dotted var(--petz-green);

    border-bottom:
        1px dotted var(--petz-green-light);
}


/* =========================================================
   BREED LIST

   Your JS generates:

       <div id="breedlist">

           <a class="breed-link">
               Breed (number)
           </a>

       </div>
   ========================================================= */

#breedlist {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(150px, 1fr));

    gap: 8px;

    width: 100%;
}


/* =========================================================
   BREED LINKS

   Specifically matches:

       link.className = "breed-link";
   ========================================================= */

#breedlist .breed-link {
    display: block;

    width: 100%;

    padding: 8px 10px;

    background: var(--petz-white);

    border: 2px solid var(--petz-green);

    color: var(--petz-green-dark);

    font-family:
        "Courier New",
        monospace;

    font-size: 13px;

    font-weight: bold;

    line-height: 1.2;

    text-align: center;

    text-decoration: none;

    box-shadow:
        2px 2px 0 var(--petz-green-light);

    cursor: pointer;

    transition:
        background .1s,
        color .1s,
        transform .1s;
}


#breedlist .breed-link::before {
    content: "♡ ";

    color: var(--petz-green);
}


#breedlist .breed-link:hover {
    background: var(--petz-green);

    color: var(--petz-white);

    transform:
        translate(2px, 2px);

    box-shadow: none;
}


#breedlist .breed-link:hover::before {
    color: var(--petz-white);
}


/* =========================================================
   PET VIEWER

   Your JS specifically looks for:

       #content
   ========================================================= */

#content {
    display: block;

    width: 100%;

    min-width: 0;

    margin-top: 24px;

    padding-top: 18px;

    border-top:
        2px dotted var(--petz-green);
}


/* =========================================================
   BREED TITLE GENERATED BY JS

   JS creates:

       <h1>Breed</h1>
   ========================================================= */

#content h1 {
    margin: 0 0 18px;

    color: var(--petz-green-dark);

    font-family:
        "Courier New",
        monospace;

    font-size: 22px;

    font-weight: bold;

    text-align: center;

    text-transform: uppercase;
}


/* =========================================================
   PET GALLERY

   JS creates:

       <div class="pet-gallery">
   ========================================================= */

.pet-gallery {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    width: 100%;

    align-items: flex-start;

    justify-content: center;
}


/* =========================================================
   PET CARD

   JS creates:

       <div class="pet-card">
   ========================================================= */

.pet-card {
    flex: 0 0 auto;

    width: fit-content;

    padding: 10px;

    background: var(--petz-white);

    border: 2px solid var(--petz-green);

    box-shadow:
        3px 3px 0 var(--petz-green-light);

    text-align: center;
}


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

   JS creates:

       <img src="..." alt="...">
   ========================================================= */

.pet-card img {
    display: block;

    width: auto;

    height: auto;

    margin: 0 auto 8px;
}


/* =========================================================
   PET NAME

   JS creates:

       <div class="pet-name">
   ========================================================= */

.pet-name {
    margin-top: 4px;

    color: var(--petz-green-dark);

    font-family:
        "Courier New",
        monospace;

    font-size: 14px;

    font-weight: bold;

    line-height: 1.2;
}


/* =========================================================
   PET GENDER

   JS creates:

       <div class="pet-gender">
   ========================================================= */

.pet-gender {
    margin-top: 5px;

    color: var(--petz-grey);

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    line-height: 1.2;
}


/* =========================================================
   PET BREEDER

   JS creates:

       <div class="pet-breeder">
   ========================================================= */

.pet-breeder {
    margin-top: 5px;

    color: var(--petz-grey);

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    font-style: italic;

    line-height: 1.2;
}


/* =========================================================
   SIDEBAR

   Matches:
       .animal-sidebox
       .sidebox-title
       .sidebox-content
   ========================================================= */

.animal-sidebox {
    background: var(--petz-white);

    border: 2px solid var(--petz-dark);

    box-shadow:
        4px 4px 0 var(--petz-grey);
}


.sidebox-title {
    padding: 7px;

    background: var(--petz-green-dark);

    color: var(--petz-white);

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;

    font-weight: bold;

    text-align: center;
}


.sidebox-content {
    padding: 12px;

    border-top:
        2px solid var(--petz-green);
}


.sidebox-content p {
    margin: 0 0 12px;

    line-height: 1.5;
}


.tiny-text {
    font-family:
        "Courier New",
        monospace;

    font-size: 11px;
}


/* =========================================================
   ONLINE STATUS
   ========================================================= */

.status {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 7px;

    background: var(--petz-soft);

    border: 1px dotted var(--petz-green);

    color: var(--petz-green-dark);

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    font-weight: bold;
}


.status-dot {
    width: 7px;

    height: 7px;

    display: inline-block;

    background: var(--petz-green);

    border:
        1px solid var(--petz-green-dark);

    border-radius: 50%;
}


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

.animal-footer {
    margin-top: 20px;

    padding: 12px;

    background: var(--petz-white);

    border: 2px dashed var(--petz-green);

    color: var(--petz-green-dark);

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    text-align: center;
}


.footer-stars {
    margin-top: 5px;

    color: var(--petz-green);

    letter-spacing: 5px;
}


.footer-small {
    margin-top: 5px;
}


/* =========================================================
   CALAMINT SITE LINKS
   Classic late-90s / early-2000s web styling
   ========================================================= */


/* ---------------------------------------------------------
   NORMAL TEXT LINKS
   --------------------------------------------------------- */

a {
    color: var(--petz-green-dark);

    font-weight: bold;

    text-decoration-line: underline;

    text-decoration-style: dotted;

    text-decoration-color:
        var(--petz-green);

    text-decoration-thickness: 1px;

    text-underline-offset: 2px;

    transition:
        color .1s,
        background-color .1s;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

a:hover {
    color: var(--petz-white);

    background-color:
        var(--petz-green);

    text-decoration: none;
}


/* ---------------------------------------------------------
   VISITED
   --------------------------------------------------------- */

a:visited {
    color: var(--petz-green-dark);
}


a:visited:hover {
    color: var(--petz-white);
}


/* ---------------------------------------------------------
   KEYBOARD FOCUS
   --------------------------------------------------------- */

a:focus-visible {
    outline:
        2px dotted var(--petz-green-dark);

    outline-offset: 3px;
}


/* =========================================================
   SIDEBAR LINKS
   ========================================================= */

.animal-sidebox a {
    color:
        var(--petz-green-dark);
}


.animal-sidebox a:hover {
    color:
        var(--petz-white);

    background:
        var(--petz-green);
}


/* =========================================================
   BREED LINKS
   IMPORTANT:

   These are generated by petz.js and already have their
   own special button-like styling.

   Keep them separate from normal site links.
   ========================================================= */

#breedlist .breed-link {
    color:
        var(--petz-green-dark);

    text-decoration:
        none;
}


#breedlist .breed-link:hover {
    color:
        var(--petz-white);
}


/* =========================================================
   EXTERNAL RESOURCE LINKS
   ========================================================= */

.animal-sidebox .tiny-text a {
    text-decoration-style:
        dotted;
}


/* =========================================================
   OPTIONAL: LITTLE HEART BEFORE SIDEBAR LINKS
   ========================================================= */

.animal-sidebox p a::before {
    content:
        "♡ ";

    color:
        var(--petz-green);
}


.animal-sidebox p a:hover::before {
    color:
        var(--petz-white);
}


/* Don't add the heart twice to breed links */

#breedlist .breed-link::before {
    content:
        "♡ ";
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .animal-page {
        width:
            min(100% - 12px, 1050px);

        margin-top: 8px;
    }


    .animal-main {
        grid-template-columns: 1fr;
    }


    .animal-sidebox {
        order: -1;
    }


    .animal-title h1 {
        font-size: 36px;
    }


    .window-content {
        padding: 12px;

        /* Let the page scroll normally on mobile */
        max-height: none;

        overflow-y: visible;

        overflow-x: visible;
    }


    #breedlist {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(130px, 1fr)
            );
    }


    .pet-gallery {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(135px, 1fr)
            );

        gap: 10px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .animal-page {
        width:
            calc(100% - 8px);
    }


    .animal-header {
        padding: 8px;
    }


    .animal-header-inner {
        padding:
            14px 6px;
    }


    .animal-title {
        gap: 7px;
    }


    .animal-title h1 {
        font-size: 30px;
    }


    .animal-sparkle {
        font-size: 17px;
    }


    .animal-subtitle {
        font-size: 10px;
    }


    #breedlist {
        grid-template-columns:
            1fr 1fr;

        gap: 6px;
    }


    #breedlist .breed-link {
        padding:
            7px 5px;

        font-size: 11px;
    }


    .welcome-box {
        align-items:
            flex-start;
    }


    .pet-gallery {
        grid-template-columns:
            1fr 1fr;

        gap: 7px;
    }


    .pet-card {
        padding: 7px;
    }


    .pet-name {
        font-size: 12px;
    }


    .pet-gender {
        font-size: 10px;
    }


    .pet-breeder {
        font-size: 9px;
    }
}


/* =========================================================
   LISTS

   General UL / OL styling for Petz / Catz / Dogz pages.
   ========================================================= */


/* =========================================================
   UNORDERED LIST
   ========================================================= */

.window-content ul {
    margin: 12px 0 18px;

    padding: 8px 10px 8px 30px;

    background: var(--petz-soft);

    border:
        1px dotted var(--petz-green);

    font-family:
        "Courier New",
        monospace;

    line-height: 1.5;
}


/* =========================================================
   ORDERED LIST
   ========================================================= */

.window-content ol {
    margin: 12px 0 18px;

    padding: 8px 10px 8px 34px;

    background: var(--petz-soft);

    border:
        1px dotted var(--petz-green);

    font-family:
        "Courier New",
        monospace;

    line-height: 1.5;
}


/* =========================================================
   LIST ITEMS
   ========================================================= */

.window-content li {
    padding: 4px 6px;

    color: var(--petz-dark);
}


/* =========================================================
   CUSTOM UL BULLETS
   ========================================================= */

.window-content ul {
    list-style: none;
}


.window-content ul li {
    position: relative;

    padding-left: 20px;
}


.window-content ul li::before {
    content: "♡";

    position: absolute;

    left: 0;

    top: 4px;

    color: var(--petz-green);

    font-size: 13px;

    font-weight: bold;
}


/* =========================================================
   LIST ITEM HOVER
   ========================================================= */

.window-content ul li:hover,
.window-content ol li:hover {
    background: var(--petz-white);

    color: var(--petz-green-dark);
}


/* =========================================================
   NESTED LISTS
   ========================================================= */

.window-content li ul,
.window-content li ol {
    margin: 5px 0 5px;

    padding-top: 3px;

    padding-bottom: 3px;

    background: var(--petz-white);
}


/* Nested hearts become stars */

.window-content li ul li::before {
    content: "✦";

    color: var(--petz-green);
}


/* =========================================================
   LIST LINKS
   ========================================================= */

.window-content li a {
    color: var(--petz-green-dark);

    font-weight: bold;

    text-decoration:
        underline;

    text-decoration-style:
        dotted;

    text-decoration-thickness:
        1px;
}


.window-content li a:hover {
    background: var(--petz-green);

    color: var(--petz-white);

    text-decoration: none;
}


/* =========================================================
   ORDERED LIST NUMBERS
   ========================================================= */

.window-content ol li::marker {
    color: var(--petz-green-dark);

    font-weight: bold;
}


/* =========================================================
   SPECIAL COMPACT LIST
   ========================================================= */

.petz-list-compact {
    margin: 0 !important;

    padding:
        4px !important;

    background:
        transparent !important;

    border:
        0 !important;
}


.petz-list-compact li {
    padding:
        5px 6px 5px 22px !important;

    border-bottom:
        1px dotted var(--petz-green-light);
}


.petz-list-compact li:last-child {
    border-bottom:
        0;
}


/* =========================================================
   SIDEBAR LISTS
   ========================================================= */

.sidebox-content ul,
.sidebox-content ol {
    margin:
        8px 0 12px;

    padding-left:
        24px;

    font-family:
        "Courier New",
        monospace;

    font-size:
        11px;

    line-height:
        1.5;
}


.sidebox-content ul {
    list-style:
        none;

    padding-left:
        0;
}


.sidebox-content ul li {
    position:
        relative;

    padding:
        3px 4px 3px 18px;
}


.sidebox-content ul li::before {
    content:
        "♡";

    position:
        absolute;

    left:
        0;

    color:
        var(--petz-green);
}


.sidebox-content li a {
    color:
        var(--petz-green-dark);

    font-weight:
        bold;

    text-decoration:
        none;
}


.sidebox-content li a:hover {
    color:
        var(--petz-green);

    text-decoration:
        underline;
}


/* =========================================================
   LIST DIVIDER / SECTION LABEL
   ========================================================= */

.petz-list-heading {
    margin-top:
        8px;

    padding:
        4px 6px;

    background:
        var(--petz-green-dark);

    color:
        var(--petz-white);

    font-family:
        "Courier New",
        monospace;

    font-size:
        11px;

    font-weight:
        bold;

    text-transform:
        uppercase;
}


/* =========================================================
   MOBILE LIST ADJUSTMENTS
   ========================================================= */

@media (max-width: 420px) {

    .window-content ul,
    .window-content ol {
        margin:
            10px 0 14px;

        padding:
            6px 6px 6px 28px;

        font-size:
            12px;
    }


    .window-content ul li {
        padding-left:
            18px;
    }


    .sidebox-content ul,
    .sidebox-content ol {
        font-size:
            10px;
    }
}


/* =========================================================
   VERY SMALL SCREENS

   Keep the gallery usable on tiny phones.
   ========================================================= */

@media (max-width: 300px) {

    .pet-gallery {
        grid-template-columns:
            1fr;
    }


    #breedlist {
        grid-template-columns:
            1fr;
    }
}


/* =========================================================
   END OF CALAMINT PETZ / CATZ / DOGZ STYLESHEET
   ========================================================= */