/* ============================================================
   RESPONSIVE — Mobile-first, then tablet, then desktop
   ============================================================ */

/* ===== BASE MOBILE (default — vertical stack) ===== */

/* Welcome screen special: Toota is the hero on mobile */
.screen-welcome-active .character-panel {
    max-height: none;
    padding-top: 12dvh;
}

/* ===== SMALL MOBILE (up to 480px) ===== */
@media (max-width: 480px) {
    .split-layout {
        flex-direction: column;
        gap: 0;
    }
    .character-panel {
        min-height: auto;
        max-height: 52dvh;
        padding: 1rem 0.5rem 0;
    }
    .toota-character {
        height: 36dvh;
        max-height: 280px;
    }
    .screens-container {
        flex: 1;
        padding: 0.3rem 0.8rem;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    .top-bar {
        padding: 0.3rem 0.5rem 0.2rem;
        gap: 0.3rem;
        max-width: 100%;
        overflow: visible;
    }
    .top-bar-row-1 {
        gap: 0.3rem;
        flex-wrap: nowrap;
    }
    .top-bar-row-2 {
        justify-content: center;
    }
    .pill-btn {
        width: 44px; height: 44px;
        font-size: 1.15rem;
        flex-shrink: 0;
    }
    .pill-box {
        padding: 0.3rem 0.6rem;
        font-size: 1.05rem;
        flex-shrink: 0;
        min-height: 44px;
    }
    .top-bar-controls {
        gap: 0.35rem;
        flex-shrink: 0;
    }
    .category-pill {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        font-size: 0.95rem;
        padding: 0.2rem 0.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .music-vol-group {
        padding: 0.15rem 0.4rem 0.15rem 0.25rem;
    }
    .music-vol-slider {
        width: 55px;
    }
    .speech-bubble {
        max-width: 95%;
        margin-top: 0.5rem;
        margin-bottom: 0.8rem;
    }
    .speech-inner {
        padding: 0.65rem 1rem;
        font-size: 1.2rem;
        line-height: 1.6;
    }
    .speech-tail { width: 16px; height: 10px; }

    /* Welcome card tighter */
    #screen-welcome {
        justify-content: center;
        padding-top: 1rem;
    }
    .welcome-card {
        padding: 0.2rem 1rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .title { font-size: 2.2rem; margin-bottom: 0.2rem; }
    .subtitle { font-size: 1rem; margin-bottom: 0.6rem; }
    .welcome-subtitle-panel {
        padding: 0.5rem 1rem;
        margin-bottom: 0.8rem;
    }
    .btn-primary {
        padding: 0.7rem 1.8rem;
        font-size: 1.2rem;
        min-height: 56px;
    }

    /* Menu */
    .menu-grid {
        gap: 0.7rem;
        padding: 0 0.3rem 0.5rem;
    }
    .activity-card {
        width: calc(50% - 0.35rem);
        min-height: 105px;
    }
    .card-icon { font-size: 1.8rem; }
    .card-label { font-size: 1rem; }
    .card-inner { padding: 0.7rem 0.4rem; gap: 0.1rem; }

    /* Answer cards */
    .activity-container { gap: 0.8rem; }
    .answer-options-grid { gap: 0.7rem; }
    .answer-card {
        min-height: 85px; min-width: 85px;
        max-width: 140px;
        padding: 4px;
    }
    .answer-inner {
        min-height: 77px;
        padding: 0.5rem;
    }
    .answer-text { font-size: 2.2rem; }

    /* Wardrobe */
    .wardrobe-card { width: 125px; }
    .wardrobe-img-wrapper { height: 95px; }
    .wardrobe-label { font-size: 1rem; }
    .wardrobe-card-inner { padding: 0.7rem; }
    .wardrobe-title { font-size: 1.6rem; margin-bottom: 1rem; }

    /* Reward */
    .reward-card { padding: 1.2rem 1rem; border-radius: 28px; }
    .reward-title { font-size: 2.2rem; }
    .reward-subtitle { font-size: 1.3rem; margin: 0.5rem 0; }
    .reward-stars { font-size: 1.8rem; letter-spacing: 3px; margin: 0.8rem 0; }
    .reward-stats { font-size: 1.1rem; margin-bottom: 1rem; }

    /* Decorations subtler */
    .bg-decor { opacity: 0.2; }
    .b-star1 { width: 28px; }
    .b-balloon1 { width: 38px; }
    .b-candy1 { width: 32px; }
    .b-flower1 { width: 28px; }
    .b-block1 { width: 32px; }
    .b-star2 { width: 22px; }
    .b-candy2 { width: 20px; }
    .b-block2 { width: 28px; }
    .scene-curtain { display: none; }
    .scene-bunting { height: 18px; opacity: 0.25; }
    .scene-rug { height: 50px; }

    /* Toast */
    .feedback-toast { bottom: 12%; }
    .toast-inner { padding: 0.5rem 1.2rem; font-size: 1.1rem; }
}

/* ===== MEDIUM MOBILE (481–767) ===== */
@media (min-width: 481px) and (max-width: 767px) {
    .split-layout { flex-direction: column; }
    .character-panel {
        min-height: auto;
        max-height: 50dvh;
        padding: 1rem 1rem 0;
    }
    .toota-character {
        height: 38dvh;
        max-height: 300px;
    }
    .screens-container {
        padding: 0.5rem 1rem;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .speech-bubble { margin-top: 0.5rem; margin-bottom: 0.6rem; }
    .speech-inner { font-size: 1.2rem; line-height: 1.6; }
    .activity-container { gap: 1rem; }
    .answer-card { min-height: 100px; max-width: 160px; }
}

/* ===== TABLET PORTRAIT (768px+) ===== */
@media (min-width: 768px) {
    .split-layout {
        flex-direction: row-reverse; /* RTL: Toota on visual left, content on visual right */
    }
    .character-panel {
        flex: 0 0 38%;
        max-width: 38%;
        min-height: auto;
        max-height: none;
        justify-content: center;
        padding: 1rem;
        border-left: 3px dashed rgba(247, 163, 183, 0.2);
    }
    .toota-character {
        height: 42vh;
        max-height: 420px;
    }
    .screens-container {
        flex: 1;
        padding: 1rem 1.5rem;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        justify-content: center;
    }
    .menu-grid { gap: 1rem; }
    .activity-card {
        width: calc(50% - 0.5rem);
        min-height: 135px;
    }
    .answer-card {
        min-height: 120px;
        max-width: 170px;
    }
    .speech-bubble { margin-bottom: 1rem; }
}

/* ===== TABLET LANDSCAPE / SMALL DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
    .app-shell {
        max-width: 1200px;
        margin: 2vh auto;
        border-radius: 40px;
        border: 4px solid rgba(255,255,255,0.8);
        box-shadow: 0 20px 80px rgba(107, 68, 42, 0.08);
        background: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(20px);
        min-height: 94vh;
        overflow: hidden;
    }
    .character-panel {
        flex: 0 0 35%;
        max-width: 35%;
    }
    .toota-character {
        height: 50vh;
        max-height: 500px;
    }
    .activity-card {
        width: calc(33.333% - 0.7rem);
        min-height: 150px;
    }
    .answer-card {
        min-height: 140px;
        max-width: 190px;
    }
    .answer-text { font-size: 3.5rem; }
}

/* ===== LARGE DESKTOP (1366px+) ===== */
@media (min-width: 1366px) {
    .toota-character {
        height: 55vh;
        max-height: 550px;
    }
    .answer-text { font-size: 4rem; }
}

/* ============================================================
   FINAL RESPONSIVE POLISH OVERRIDES
   ============================================================ */
@media (max-width: 480px) {
    .app-shell {
        min-height: 100dvh;
    }

    .top-bar {
        padding: calc(6px + env(safe-area-inset-top)) 8px 4px;
    }

    .top-bar-row-1 {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        gap: 6px;
    }

    .top-bar-controls {
        gap: 5px;
    }

    .pill-btn {
        width: 42px;
        height: 42px;
        border-width: 2px;
        font-size: 1.05rem;
    }

    .pill-box {
        min-width: 64px;
        min-height: 42px;
        padding: 0.24rem 0.48rem;
        border-width: 2px;
        font-size: 0.98rem;
    }

    .category-pill {
        min-width: 0;
        max-width: 100%;
        padding: 0.2rem 0.45rem;
        border-width: 2px;
        font-size: 0.86rem;
        line-height: 1.25;
    }

    .music-vol-group {
        min-height: 32px;
        padding: 0.12rem 0.42rem;
        border-width: 2px;
    }

    .music-vol-slider {
        width: min(30vw, 104px);
        min-width: 74px;
    }

    .character-panel {
        max-height: none;
        padding: 0.45rem 0.5rem 0;
    }

    .screen-welcome-active .character-panel {
        padding-top: clamp(14px, 4dvh, 30px);
    }

    .screen-welcome-active .toota-character {
        height: min(42dvh, 302px);
        max-height: 302px;
    }

    .screen-menu-active .toota-character,
    .screen-mode-select-active .toota-character {
        height: min(29dvh, 214px);
        max-height: 214px;
    }

    .screen-learn-active .toota-character,
    .screen-activity-active .toota-character {
        height: min(23dvh, 166px);
        max-height: 166px;
    }

    .screen-reward-active .toota-character,
    .screen-wardrobe-active .toota-character {
        height: min(27dvh, 198px);
        max-height: 198px;
    }

    .speech-bubble {
        max-width: calc(100vw - 22px);
        margin-top: 0.24rem;
        margin-bottom: 0.45rem;
        padding: 5px;
        border-radius: 28px 28px 28px 16px;
    }

    .speech-inner {
        min-height: auto;
        padding: 0.52rem 0.82rem;
        border-width: 2px;
        border-radius: 23px 23px 23px 12px;
        font-size: clamp(1.03rem, 5vw, 1.24rem);
        line-height: 1.55;
    }

    .speech-accent-left,
    .speech-accent-right {
        font-size: 0.82rem;
    }

    .screens-container {
        padding: 0.2rem 0.72rem 0.55rem;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .screen {
        padding-top: 0.2rem;
    }

    .welcome-card {
        padding: 0.25rem 0.35rem 0.9rem;
        border-radius: 28px;
    }

    .title {
        font-size: clamp(2rem, 11vw, 2.7rem);
        margin-bottom: 0.24rem;
    }

    .subtitle {
        margin-bottom: 0;
        font-size: clamp(0.98rem, 4.6vw, 1.1rem);
        line-height: 1.55;
    }

    .welcome-subtitle-panel {
        max-width: 100%;
        margin-bottom: 0.85rem;
        padding: 0.5rem 0.78rem;
        border-width: 2px;
        border-radius: 24px;
    }

    .btn-primary {
        width: min(100%, 310px);
        min-width: 0;
        min-height: 54px;
        padding: 0.66rem 1.3rem;
        border-width: 2px;
        white-space: nowrap;
    }

    .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        padding: 0 0 0.65rem;
    }

    .activity-card {
        width: 100%;
        min-width: 0;
        min-height: 116px;
    }

    .card-inner {
        padding: 0.7rem 0.4rem;
        border-width: 2px;
    }

    .card-icon {
        min-height: 46px;
        font-size: clamp(1.7rem, 8vw, 2.3rem);
    }

    .card-label {
        font-size: clamp(0.98rem, 4.4vw, 1.15rem);
        line-height: 1.25;
    }

    .card-accent {
        width: 24px;
        height: 24px;
        top: 7px;
        left: 8px;
        font-size: 0.72rem;
    }

    .mode-select-container {
        width: 100%;
        gap: 0.85rem;
        padding: 0.85rem;
        border-width: 2px;
        border-radius: 28px;
    }

    .mode-buttons {
        max-width: 100%;
        gap: 0.75rem;
    }

    .btn-mode {
        min-height: 82px;
        padding: 0.85rem 0.95rem;
        border-width: 2px;
    }

    .mode-icon {
        font-size: 1.7rem;
    }

    .learn-container {
        padding: 0.1rem 0 0.45rem;
    }

    .learn-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.62rem;
        padding: 0.18rem;
    }

    .learn-card {
        min-height: 124px;
        padding: 0.45rem;
        border-width: 2px;
    }

    .learn-card-inner {
        gap: 0.24rem;
    }

    .learn-text-visual {
        font-size: clamp(2.32rem, 13vw, 3.35rem);
    }

    .learn-color-visual {
        width: clamp(54px, 18vw, 72px);
        height: clamp(54px, 18vw, 72px);
    }

    .learn-shape-visual svg,
    .learn-animal-visual {
        width: clamp(62px, 19vw, 82px);
        height: clamp(62px, 19vw, 82px);
    }

    .learn-card-label {
        font-size: clamp(0.86rem, 3.8vw, 1rem);
        line-height: 1.28;
    }

    .activity-container {
        gap: 0.72rem;
    }

    .answer-options-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.52rem;
    }

    .answer-card {
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 108px;
        padding: 4px;
    }

    .answer-inner {
        padding: 0.38rem;
        border-width: 2px;
        gap: 0.18rem;
    }

    .answer-text {
        font-size: clamp(2.2rem, 13vw, 3rem);
    }

    .answer-label {
        font-size: clamp(0.76rem, 3.7vw, 0.98rem);
        line-height: 1.22;
    }

    .answer-color-dot {
        width: clamp(44px, 17vw, 62px);
    }

    .answer-inner svg {
        width: clamp(54px, 18vw, 76px);
    }

    .animal-card-img {
        width: clamp(54px, 18vw, 76px);
        height: clamp(54px, 18vw, 76px);
    }

    .example-strip {
        padding: 0.48rem 0.75rem;
        border-width: 2px;
        font-size: 0.98rem;
        line-height: 1.4;
    }

    .reward-card {
        width: 100%;
        padding: 1rem 0.72rem;
        border-width: 2px;
        border-radius: 28px;
    }

    .reward-title {
        font-size: clamp(2.05rem, 11vw, 2.8rem);
        line-height: 1.12;
    }

    .reward-subtitle {
        font-size: clamp(1.12rem, 5.2vw, 1.36rem);
    }

    .reward-stars {
        font-size: clamp(1.55rem, 8vw, 2.1rem);
        letter-spacing: 2px;
    }

    .reward-stats {
        max-width: 100%;
        font-size: 0.96rem;
        line-height: 1.4;
    }

    .wardrobe-container {
        width: 100%;
    }

    .wardrobe-title {
        margin-bottom: 0.8rem;
        font-size: clamp(1.42rem, 6.8vw, 1.85rem);
        line-height: 1.2;
    }

    .wardrobe-options {
        flex-wrap: nowrap;
        gap: 0.65rem;
    }

    .wardrobe-card {
        width: min(44vw, 150px);
    }

    .wardrobe-card-inner {
        padding: 0.58rem;
        border-width: 2px;
    }

    .wardrobe-img-wrapper {
        height: clamp(92px, 27vw, 126px);
        margin-bottom: 0.45rem;
    }

    .wardrobe-label {
        font-size: clamp(0.88rem, 3.9vw, 1.02rem);
        line-height: 1.25;
    }

    .feedback-toast {
        bottom: calc(10% + env(safe-area-inset-bottom));
    }
}

@media (max-width: 360px) and (max-height: 640px) {
    .screen-menu-active .toota-character,
    .screen-mode-select-active .toota-character {
        height: min(24dvh, 164px);
    }

    .screen-learn-active .toota-character,
    .screen-activity-active .toota-character,
    .screen-reward-active .toota-character,
    .screen-wardrobe-active .toota-character {
        height: min(20dvh, 132px);
    }

    .speech-inner {
        padding: 0.42rem 0.68rem;
        font-size: 1rem;
    }

    .activity-card {
        min-height: 100px;
    }

    .answer-card {
        min-height: 94px;
    }

    .learn-card {
        min-height: 108px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .screen-welcome-active .character-panel {
        padding-top: clamp(16px, 5dvh, 42px);
    }

    .screen-menu-active .toota-character,
    .screen-mode-select-active .toota-character {
        height: min(31dvh, 260px);
    }

    .screen-learn-active .toota-character,
    .screen-activity-active .toota-character {
        height: min(25dvh, 210px);
    }

    .menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 720px;
    }

    .activity-card {
        width: 100%;
        min-width: 0;
        min-height: 136px;
    }

    .learn-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .answer-options-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .answer-card {
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 136px;
    }
}

@media (min-width: 768px) {
    .split-layout {
        align-items: stretch;
    }

    .character-panel {
        flex: 0 0 min(38%, 540px);
        max-width: min(38%, 540px);
        border-left: none;
    }

    .screens-container {
        min-width: 0;
        justify-content: center;
    }

    .speech-bubble {
        margin-inline: auto;
    }

    .screen-welcome-active .character-panel {
        flex-basis: min(42%, 610px);
        max-width: min(42%, 610px);
        padding-top: 1rem;
    }

    .menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 820px;
    }

    .mode-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 640px;
    }

    .answer-options-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .activity-card,
    .answer-card {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (min-width: 1024px) {
    .app-shell {
        max-width: 1680px;
        min-height: 100dvh;
        margin: 0 auto;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        backdrop-filter: none;
        overflow: hidden;
    }

    .top-bar {
        padding-top: calc(14px + env(safe-area-inset-top));
    }

    .character-panel {
        flex: 0 0 36%;
        max-width: 36%;
        padding: clamp(1rem, 2vw, 2rem);
    }

    .toota-character {
        height: clamp(420px, 58dvh, 660px);
        max-height: 660px;
    }

    .screens-container {
        padding: clamp(1rem, 2vw, 2.4rem);
        padding-bottom: calc(clamp(1rem, 2vw, 2.4rem) + env(safe-area-inset-bottom));
    }

    .screen-welcome-active .toota-character,
    .screen-reward-active .toota-character {
        height: clamp(470px, 65dvh, 720px);
        max-height: 720px;
    }

    .menu-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: min(100%, 1040px);
        max-width: 1040px;
    }

    .activity-card {
        width: 100%;
        min-width: 0;
        min-height: clamp(172px, 24dvh, 260px);
    }

    .activity-container {
        width: min(100%, 860px);
        max-width: 860px;
    }

    .answer-options-grid {
        width: min(100%, 840px);
        max-width: 840px;
    }

    .answer-card {
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: clamp(178px, 27dvh, 282px);
    }

    .learn-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@media (min-width: 1366px) {
    .menu-grid {
        max-width: 1120px;
    }

    .answer-options-grid {
        max-width: 900px;
    }

    .learn-cards-grid {
        max-width: 1120px;
    }

    .speech-inner {
        font-size: clamp(1.45rem, 2vw, 2rem);
    }
}

@media (max-height: 560px) and (orientation: landscape) {
    .app-shell {
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .top-bar {
        padding-top: calc(5px + env(safe-area-inset-top));
        padding-bottom: 2px;
    }

    .top-bar-row-2 {
        display: none;
    }

    .split-layout {
        flex-direction: row-reverse;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .character-panel {
        flex: 0 0 31%;
        max-width: 31%;
        padding: 0.25rem 0.45rem;
        justify-content: center;
    }

    .toota-character,
    .screen-welcome-active .toota-character,
    .screen-reward-active .toota-character {
        height: min(58dvh, 330px);
        max-height: 330px;
    }

    .speech-bubble {
        margin-bottom: 0.25rem;
    }

    .speech-inner {
        min-height: auto;
        padding: 0.4rem 0.72rem;
        font-size: clamp(0.95rem, 2.6vw, 1.15rem);
        line-height: 1.35;
    }

    .screens-container {
        padding: 0.25rem 0.8rem 0.45rem;
    }

    .title {
        font-size: clamp(2rem, 6vw, 3.1rem);
    }

    .welcome-subtitle-panel {
        margin-bottom: 0.7rem;
    }

    .menu-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .activity-card {
        width: 100%;
        min-width: 0;
        min-height: 108px;
    }

    .answer-card {
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 118px;
    }

    .learn-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    }

    .learn-card {
        min-height: 104px;
    }
}

/* Mobile-only Toota prominence tuning */
@media (max-width: 480px) {
    .screen-welcome-active .character-panel {
        padding-top: 0;
        padding-bottom: 0;
    }

    .screen-welcome-active .toota-character {
        height: clamp(245px, 38dvh, 300px);
        max-height: 300px;
    }

    .screen-welcome-active .screens-container {
        flex: 0 0 auto;
        margin-top: clamp(10px, 1.8dvh, 18px);
        padding-top: 0;
    }

    .screen-welcome-active .split-layout {
        justify-content: center;
        padding-block: clamp(18px, 4dvh, 36px) calc(22px + env(safe-area-inset-bottom));
    }

    .screen-welcome-active #screen-welcome {
        justify-content: center;
        padding-top: 0;
    }

    .screen-welcome-active .welcome-card {
        padding-top: 0;
    }

    .screen-activity-active .character-panel {
        padding-top: 0.12rem;
        padding-bottom: 0;
    }

    .screen-activity-active .speech-bubble {
        margin-bottom: 0.2rem;
    }

    .screen-activity-active .toota-character {
        height: clamp(190px, 34dvh, 270px);
        max-height: 270px;
    }

    .screen-activity-active[data-choice-count="2"] .toota-character,
    .screen-activity-active[data-choice-count="3"] .toota-character {
        height: clamp(220px, 39dvh, 310px);
        max-height: 310px;
    }

    .screen-activity-active[data-choice-count="4"] .toota-character {
        height: clamp(205px, 36dvh, 290px);
        max-height: 290px;
    }

    .screen-activity-active[data-choice-count="5"] .toota-character,
    .screen-activity-active[data-choice-count="6"] .toota-character {
        height: clamp(178px, 31dvh, 250px);
        max-height: 250px;
    }

    .screen-activity-active .screens-container {
        padding-top: 0;
    }

    .screen-activity-active .activity-container {
        gap: 0.58rem;
    }
}

@media (max-width: 360px) and (max-height: 640px) {
    .screen-welcome-active .screens-container {
        margin-top: clamp(6px, 1dvh, 12px);
    }

    .screen-welcome-active .split-layout {
        padding-block: clamp(10px, 2dvh, 18px) calc(14px + env(safe-area-inset-bottom));
    }

    .screen-welcome-active .toota-character {
        height: clamp(210px, 36dvh, 250px);
        max-height: 250px;
    }

    .screen-activity-active .toota-character {
        height: clamp(168px, 31dvh, 210px);
        max-height: 210px;
    }

    .screen-activity-active[data-choice-count="2"] .toota-character,
    .screen-activity-active[data-choice-count="3"] .toota-character {
        height: clamp(184px, 35dvh, 230px);
        max-height: 230px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .screen-welcome-active .character-panel {
        padding-top: 0;
        padding-bottom: 0;
    }

    .screen-welcome-active .screens-container {
        flex: 0 0 auto;
        margin-top: clamp(12px, 2dvh, 22px);
        padding-top: 0;
    }

    .screen-welcome-active .split-layout {
        justify-content: center;
        padding-block: clamp(20px, 4dvh, 42px) calc(24px + env(safe-area-inset-bottom));
    }

    .screen-welcome-active #screen-welcome {
        justify-content: center;
        padding-top: 0;
    }

    .screen-activity-active .character-panel {
        padding-top: 0.15rem;
        padding-bottom: 0;
    }

    .screen-activity-active .speech-bubble {
        margin-bottom: 0.2rem;
    }

    .screen-activity-active .toota-character {
        height: clamp(230px, 36dvh, 320px);
        max-height: 320px;
    }

    .screen-activity-active[data-choice-count="2"] .toota-character,
    .screen-activity-active[data-choice-count="3"] .toota-character {
        height: clamp(260px, 43dvh, 380px);
        max-height: 380px;
    }

    .screen-activity-active[data-choice-count="4"] .toota-character {
        height: clamp(240px, 39dvh, 340px);
        max-height: 340px;
    }

    .screen-activity-active[data-choice-count="5"] .toota-character,
    .screen-activity-active[data-choice-count="6"] .toota-character {
        height: clamp(215px, 34dvh, 300px);
        max-height: 300px;
    }

    .screen-activity-active .screens-container {
        padding-top: 0;
    }
}