/* Optical placement for the wider Studiverse mascot artwork.
   These rules only calibrate the artwork inside existing layout slots. */

.tw-dashboard.dashboard-page .dashboard-hero-mascot img {
    width: clamp(196px, 15vw, 232px);
    height: auto;
    max-height: none;
}

.stats-tailwind .stats-title-goat {
    right: calc(100% + 14px);
    top: 50%;
    width: clamp(126px, 10vw, 150px);
    height: auto;
    transform: translateY(-50%);
    transform-origin: center;
}

/* Give the upright Lobby pose the same visible desktop height as the wider
   Stats pose. Equal CSS widths would make the Lobby artwork look too large. */
@media (min-width: 1025px) {
    body.tw-dashboard.lobby-force-scroll
        #modeSelection
        .lobby-stage-header {
        margin-bottom: clamp(1.5rem, 1.6vw, 1.85rem) !important;
    }

    body.tw-dashboard.lobby-force-scroll
        #modeSelection
        .lobby-choice-grid {
        margin-top: 0 !important;
    }

    body.tw-dashboard.lobby-force-scroll
        #modeSelection
        .lobby-title-row {
        transform: none !important;
    }

    body.tw-dashboard.lobby-force-scroll
        #modeSelection
        .lobby-title-goat {
        width: clamp(75px, 6vw, 90px) !important;
        height: auto !important;
        transform: none !important;
    }
}

.tw-dashboard.tw-abc .abc-hero-goat {
    left: calc(clamp(185px, 21vw, 340px) - clamp(32px, 2.5vw, 44px));
    top: 50%;
    width: clamp(96px, 7.6vw, 112px);
    height: auto;
    max-width: none;
    max-height: calc(100% - 12px);
    transform: translateY(-50%);
}

body.tw-dashboard.tw-leaderboard .leaderboard-goat-desktop {
    left: clamp(5.4rem, 6.3vw, 6.4rem);
    top: clamp(1rem, 2vw, 1.45rem);
    width: clamp(204px, 14.5vw, 222px);
    height: auto;
    max-width: none;
}

@media (min-width: 769px) and (max-width: 1023px) {
    .tw-dashboard.dashboard-page .dashboard-hero-mascot img {
        width: clamp(150px, 20vw, 178px);
    }

    .stats-tailwind .stats-title-goat {
        right: calc(100% + 10px);
        width: 116px;
    }

    body.tw-dashboard.tw-leaderboard .leaderboard-goat-desktop {
        left: clamp(2.2rem, 5vw, 3rem);
        width: clamp(190px, 24vw, 216px);
    }
}

@media (min-width: 769px) and (max-width: 1372px) {
    .tw-dashboard.tw-abc .abc-hero-goat {
        left: calc(50% - 312px);
    }
}

/* Compact fullscreen laptops (the common 14- to 15.6-inch viewport range) need a
   small optical nudge without changing the three-column hero geometry. */
@media (min-width: 1280px) and (max-width: 1600px) and (max-height: 960px) {
    .tw-homepage .hero {
        --goat-translate-x: 16px;
    }
}

@media (max-width: 768px) {
    .stats-tailwind .stats-title-goat {
        right: calc(100% + 6px);
        top: 50%;
        width: clamp(72px, 20vw, 88px);
        height: auto;
    }

    .tw-dashboard.tw-abc .abc-hero-goat {
        left: clamp(3.2rem, 15vw, 4.1rem);
        width: clamp(70px, 20vw, 84px);
        height: auto;
        max-width: none;
        max-height: calc(100% - 8px);
    }

    body.tw-dashboard.tw-leaderboard .leaderboard-controls-goat-wrap {
        grid-template-columns: clamp(76px, 21.5vw, 90px) minmax(0, 1fr);
    }

    body.tw-dashboard.tw-leaderboard .leaderboard-goat-mobile {
        position: relative;
        z-index: 2;
        width: calc(100% + 4px);
        height: auto;
        max-width: none;
        transform: translateX(-8px);
    }

    .tw-homepage .home-hero-goat {
        right: 0;
        left: 0;
        top: calc(var(--hero-pad-top) * -1 + clamp(38px, 10vw, 44px));
        width: clamp(159.5px, 42.625vw, 181.5px);
        margin-inline: auto;
        transform: none;
    }
}

@media (max-width: 576px) {
    .tw-dashboard.dashboard-page .dashboard-hero-mascot {
        top: 52%;
        right: auto;
        left: clamp(0.25rem, 2vw, 0.55rem);
        transform: translateY(-50%);
    }

    .tw-dashboard.dashboard-page .dashboard-hero-mascot img {
        width: clamp(88px, 25vw, 104px);
        height: auto;
    }
}

@media (max-width: 359px) {
    .stats-tailwind .stats-title-goat {
        right: calc(100% + 2px);
        width: 64px;
    }

    .tw-dashboard.tw-abc .abc-hero-goat {
        left: 2.3rem;
        width: 68px;
    }

    .tw-dashboard.dashboard-page .dashboard-hero-mascot {
        left: 0.2rem;
    }

    .tw-dashboard.dashboard-page .dashboard-hero-mascot img {
        width: 86px;
    }
}

/* Training help artwork is landscape, unlike the retired portrait mascot.
   Match each pose's optical footprint so its visible pixels sit directly
   beneath the help card instead of being centered inside a tall empty slot. */
body.tw-dashboard.tw-quiz-allenamento
    #quizContainer.quiz-container
    .quiz-goat-assistant
    .quiz-goat-assistant__stage,
body.tw-dashboard.tw-quiz-allenamento
    .mobile-goat-area
    .quiz-goat-assistant__stage {
    --quiz-goat-stage-aspect: 1.66;
    --quiz-goat-stage-width: clamp(108px, 8vw, 136px);
    --quiz-goat-stage-max-height: 108px;
    width: min(
        var(--quiz-goat-stage-width),
        calc(var(--quiz-goat-stage-max-height) * var(--quiz-goat-stage-aspect))
    ) !important;
    aspect-ratio: var(--quiz-goat-stage-aspect) / 1 !important;
}

body.tw-dashboard.tw-quiz-allenamento
    #quizContainer.quiz-container
    .quiz-goat-assistant[data-goat-state="theory"]
    .quiz-goat-assistant__stage,
body.tw-dashboard.tw-quiz-allenamento
    .mobile-goat-area[data-goat-state="theory"]
    .quiz-goat-assistant__stage {
    --quiz-goat-stage-aspect: 1.38;
}

/* Suggestion has a much wider source canvas than theory. Give both poses the
   same stage height, then compensate the suggestion artwork proportionally.
   Keeping the shared stage top fixed preserves the optical gap below Help at
   every responsive width. */
body.tw-dashboard.tw-quiz-allenamento
    #quizContainer.quiz-container
    .quiz-goat-assistant[data-goat-state="suggestion"]
    .quiz-goat-assistant__stage,
body.tw-dashboard.tw-quiz-allenamento
    .mobile-goat-area[data-goat-state="suggestion"]
    .quiz-goat-assistant__stage {
    --quiz-goat-stage-aspect: 1.38;
}

body.tw-dashboard.tw-quiz-allenamento
    #quizContainer.quiz-container
    .quiz-goat-assistant[data-goat-state="explanation"]
    .quiz-goat-assistant__stage,
body.tw-dashboard.tw-quiz-allenamento
    .mobile-goat-area[data-goat-state="explanation"]
    .quiz-goat-assistant__stage {
    --quiz-goat-stage-aspect: 1.49;
}

/* Feedback reuses the compact lobby pose. Its source canvas is almost square,
   so the generic landscape stage makes it optically much smaller than the
   learning-tool poses. Give the revealed desktop and mobile idle pose the
   theory reference height and scale without changing their shared placement. */
body.tw-dashboard.tw-quiz-allenamento
    #quizContainer.quiz-container
    .quiz-goat-assistant--desktop[data-goat-state="idle"]
    .quiz-goat-assistant__stage,
body.tw-dashboard.tw-quiz-allenamento
    .mobile-goat-area.is-mobile-goat-visible[data-goat-state="idle"]
    .quiz-goat-assistant__stage {
    --quiz-goat-stage-aspect: 1.38;
}

body.tw-dashboard.tw-quiz-allenamento
    #quizContainer.quiz-container
    .quiz-goat-assistant--desktop
    .quiz-goat-assistant__image[data-goat-state="idle"],
body.tw-dashboard.tw-quiz-allenamento
    .mobile-goat-area.is-mobile-goat-visible
    .quiz-goat-assistant__image[data-goat-state="idle"] {
    width: 94% !important;
    height: 94% !important;
}

/* Theory is the optical reference pose. The suggestion remains optically close
   while sitting 2.5% below its previous size, with a tiny responsive nudge.
   Its proportional top correction keeps the previously calibrated clearance
   stable at every breakpoint without introducing a resting transform. */
body.tw-dashboard.tw-quiz-allenamento
    #quizContainer.quiz-container
    .quiz-goat-assistant__image[data-goat-state="suggestion"],
body.tw-dashboard.tw-quiz-allenamento
    .mobile-goat-area
    .quiz-goat-assistant__image[data-goat-state="suggestion"] {
    width: 108.2% !important;
    height: 108.2% !important;
    top: -1.85% !important;
    left: clamp(3px, 0.42vw, 7px) !important;
}

/* From tablet upward, reduce only the suggestion artwork by a further 2.5%.
   The proportional top correction holds its upper visible edge in place, so
   the calibrated clearance below the Help card does not change. Phones keep
   the exact 108.2% sizing above. */
@media (min-width: 768px) {
    body.tw-dashboard.tw-quiz-allenamento
        #quizContainer.quiz-container
        .quiz-goat-assistant__image[data-goat-state="suggestion"],
    body.tw-dashboard.tw-quiz-allenamento
        .mobile-goat-area
        .quiz-goat-assistant__image[data-goat-state="suggestion"] {
        width: 105.5% !important;
        height: 105.5% !important;
        top: -3.2% !important;
    }
}

/* Tablet and the compact 14-inch desktop band need one final optical nudge.
   Wide desktop positioning (1367px and above) remains exactly unchanged. */
@media (min-width: 768px) and (max-width: 1366.98px) {
    body.tw-dashboard.tw-quiz-allenamento
        #quizContainer.quiz-container
        .quiz-goat-assistant__image[data-goat-state="suggestion"],
    body.tw-dashboard.tw-quiz-allenamento
        .mobile-goat-area
        .quiz-goat-assistant__image[data-goat-state="suggestion"] {
        left: calc(clamp(3px, 0.42vw, 7px) + 2px) !important;
    }
}

body.tw-dashboard.tw-quiz-allenamento
    #quizContainer.quiz-container
    .quiz-goat-assistant__image[data-goat-state="explanation"],
body.tw-dashboard.tw-quiz-allenamento
    .mobile-goat-area
    .quiz-goat-assistant__image[data-goat-state="explanation"] {
    width: 94% !important;
    height: 94% !important;
}

@media (max-width: 932px) {
    body.tw-dashboard.tw-quiz-allenamento
        .mobile-goat-area.is-mobile-goat-visible {
        --quiz-goat-offset-x: 0px;
        justify-content: flex-start !important;
        padding-left: clamp(16px, 4vw, 20px) !important;
    }

    body.tw-dashboard.tw-quiz-allenamento
        .mobile-goat-area
        .quiz-goat-assistant__stage {
        --quiz-goat-stage-width: clamp(78px, 22vw, 96px);
        --quiz-goat-stage-max-height: 78px;
    }

}

@media (max-width: 374px) {
    body.tw-dashboard.tw-quiz-allenamento
        .mobile-goat-area
        .quiz-goat-assistant__stage {
        --quiz-goat-stage-width: clamp(72px, 24vw, 82px);
        --quiz-goat-stage-max-height: 68px;
    }

}

@media (max-width: 932px) and (orientation: portrait) {
    body.tw-dashboard.tw-quiz-allenamento
        .mobile-goat-area.is-mobile-goat-visible {
        margin-bottom: 38px !important;
    }
}

/* Desktop help artwork: keep a hairline pause below the help surface and move
   the shared stage slightly toward the question column. Suggestion, theory
   and explanation retain their own aspect and scale. */
@media (min-width: 933px) {
    body.tw-dashboard.tw-quiz-allenamento
        #quizContainer.quiz-container:not(.fullscreen-mode)
        .quiz-goat-assistant--desktop,
    body.tw-dashboard.tw-quiz-allenamento
        #quizContainer.quiz-container.fullscreen-mode
        .quiz-goat-assistant--desktop {
        --quiz-goat-offset-x: -170px;
    }
}

@media (min-width: 933px) and (max-width: 1199px) {
    body.tw-dashboard.tw-quiz-allenamento
        #quizContainer.quiz-container:not(.fullscreen-mode)
        .quiz-goat-assistant--desktop {
        --quiz-goat-offset-x: -134px;
    }
}

@media (min-width: 933px) and (max-width: 1920px) and (max-height: 1080px) {
    html:root body.tw-dashboard.tw-quiz-allenamento
        #quizContainer#quizContainer.quiz-container:not(.fullscreen-mode)
        .quiz-learning-tools-stack
        > .quiz-goat-assistant--desktop {
        margin-top: 4px !important;
    }

    html:root body.tw-dashboard.tw-quiz-allenamento
        #quizContainer#quizContainer.quiz-container.fullscreen-mode
        .quiz-learning-tools-stack
        > .quiz-goat-assistant--desktop {
        margin-top: 7px !important;
    }
}