/* Portal pages share the lesson shell, without reserving an empty page-turn rail. */
.classroom-enabled .classroom-portal {
    grid-template-columns: clamp(196px, 15vw, 320px) minmax(0, 1fr);
}
.classroom-portal .classroom-sidebar .navbar { grid-template-columns: 1fr; }
.classroom-portal .classroom-sidebar .nav-item { justify-content: flex-start; padding-inline: 16px; }
.classroom-portal .home-title span { display: block; }
.classroom-enabled .classroom-portal > .content-card { padding: clamp(16px, 2vw, 48px); gap: 20px; }
.classroom-portal button, .classroom-portal [role="button"], .classroom-portal select {
    min-height: 48px;
    touch-action: manipulation;
}
.classroom-portal .toolbar-btn, .classroom-portal .view-mode-btn { min-height: 44px; }
.classroom-portal .settings-description { margin: 0; font-size: 1rem; line-height: 1.65; }

/* Home, rewards and contact: large complete images alongside readable copy. */
.classroom-portal .intro-flex {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(24px, 4vw, 100px);
    margin: 0;
    width: 100%;
}
.classroom-portal .character-box { display: flex; align-items: center; justify-content: center; }
.classroom-portal .bear-img {
    width: 100%;
    height: min(65vh, 850px);
    object-fit: contain;
}
.classroom-portal .speech-bubble {
    max-width: none;
    font-size: 1.4rem;
    padding: clamp(20px, 3vw, 64px);
}

/* The two main choices fill the available area at both 720p and 4K. */
.classroom-portal .card-grid {
    max-width: none;
    gap: clamp(20px, 3vw, 80px);
    height: min(70vh, 1200px);
}
.classroom-portal .card-item {
    min-height: 0;
    padding: clamp(20px, 3vw, 64px);
    gap: 24px;
    justify-content: center;
    background: #edf5fb;
    border: 2px solid #dce8f4;
}
.classroom-portal .card-image { height: min(42vh, 720px); }
.classroom-portal .card-image img { width: 100%; height: 100%; object-fit: contain; }
.classroom-portal .card-text { font-size: 1.5rem; }

/* Course choices, all levels, description and the start button stay together. */
.classroom-portal .course-catalog-content {
    display: grid;
    grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
    align-items: stretch;
    gap: clamp(16px, 2vw, 48px);
    margin: 0;
    min-height: 0;
}
.classroom-portal .course-sidebar {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 2vh, 24px);
    padding: 4px;
    overflow: visible;
    min-height: 0;
}
.classroom-portal .course-item {
    justify-content: center;
    min-height: 0;
    padding: clamp(10px, 1.4vw, 32px);
    gap: clamp(6px, 1vh, 16px);
    touch-action: manipulation;
}
.classroom-portal .course-icon {
    width: clamp(48px, 7vh, 140px);
    height: clamp(48px, 7vh, 140px);
    object-fit: contain;
}
.classroom-portal .course-name { font-size: 1.1rem; }
.classroom-portal .course-description { font-size: .95rem; }
.classroom-portal .difficulty-content {
    min-height: 0;
    height: 100%;
    justify-content: center;
    gap: clamp(12px, 2vh, 32px);
}
.classroom-portal .difficulty-grid {
    gap: clamp(12px, 2vh, 32px);
    padding: 4px;
    flex: 1;
    min-height: 0;
}
.classroom-portal .difficulty-card {
    margin: 0;
    padding: clamp(12px, 1.5vw, 36px);
    min-height: 72px;
    gap: 10px;
    touch-action: manipulation;
}
.classroom-portal .difficulty-level { font-size: 1.1rem; }
.classroom-portal .difficulty-name { font-size: 1.35rem; }
.classroom-portal .difficulty-description-container {
    flex: 0 0 auto;
    margin: 0;
    padding: clamp(12px, 1.2vw, 28px);
    gap: 12px;
}
.classroom-portal .difficulty-description-box { padding: 12px; }
.classroom-portal .selected-difficulty-description { font-size: 1.05rem; }
.classroom-portal .start-course-btn { align-self: stretch; font-size: 1.15rem; min-height: 52px; }

/* Voice settings and the sample share one row instead of a long vertical form. */
.classroom-portal .settings-content {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(16px, 2vw, 40px);
    max-width: none;
    margin: 0;
}
.classroom-portal .settings-content > .settings-description { grid-column: 1 / -1; }
.classroom-portal .voice-settings-panel, .classroom-portal .test-area {
    padding: clamp(16px, 2vw, 40px);
    gap: clamp(14px, 2vh, 28px);
    background: white;
    border: 1px solid #dce8f4;
}
.classroom-portal .voice-selector select { width: 100%; min-height: 48px; font-size: 1rem; }
.classroom-portal .control-panel label, .classroom-portal .voice-selector label,
.classroom-portal .control-value, .classroom-portal .test-area p { font-size: 1.1rem; }
.classroom-portal .voice-button-group { flex-direction: row; flex-wrap: wrap; }
.classroom-portal .voice-button-group button { flex: 1; padding: 12px; font-size: 1rem; }
.classroom-portal .test-area { justify-content: center; }
.classroom-portal .test-area h2 { font-size: 1.4rem; }
.classroom-portal .test-area button { align-self: stretch; font-size: 1.1rem; }

/* A 48px input hit area with a separate visual track, including Firefox. */
.classroom-portal .control-panel input[type="range"] {
    height: 48px;
    margin: 0;
    background: transparent;
    touch-action: pan-y;
}
.classroom-portal .control-panel input[type="range"]::-webkit-slider-runnable-track {
    height: 8px; border-radius: 4px; background: #dce8f4;
}
.classroom-portal .control-panel input[type="range"]::-webkit-slider-thumb {
    width: 32px; height: 32px; margin-top: -12px;
}
.classroom-portal .control-panel input[type="range"]::-moz-range-track {
    height: 8px; border-radius: 4px; background: #dce8f4;
}
.classroom-portal .control-panel input[type="range"]::-moz-range-thumb { width: 32px; height: 32px; }
.classroom-portal .control-panel input[type="range"]:focus-visible { outline: 3px solid #2c4a7c; outline-offset: 3px; }

/* Character choices and the complete video scale together. */
.classroom-portal .director-settings-content {
    grid-template-columns: minmax(200px, .6fr) minmax(0, 1.4fr);
    gap: clamp(16px, 2vw, 48px);
    align-items: center;
    flex: 1;
    min-height: 0;
}
.classroom-portal .character-grid { gap: clamp(12px, 1.5vw, 32px); }
.classroom-portal .character-avatar { height: clamp(100px, 27vh, 500px); padding: 12px; gap: 8px; }
.classroom-portal .character-avatar img {
    width: 100%; height: 100%; max-height: calc(100% - 2rem); aspect-ratio: auto; min-height: 0;
}
.classroom-portal .character-name { font-size: 1rem; line-height: 1.4; }
.classroom-portal .video-playback-area { height: 100%; min-height: 200px; max-height: 75vh; aspect-ratio: auto; }

@media (hover: hover) {
    .classroom-portal .card-item:hover, .classroom-portal .character-avatar:hover,
    .classroom-portal .course-item:hover, .classroom-portal .difficulty-card:hover { transform: none; border-color: #76c893; }
}
@media (hover: none) {
    .classroom-portal .card-item:hover, .classroom-portal .character-avatar:hover,
    .classroom-portal .course-item:hover, .classroom-portal .difficulty-card:hover { transform: none; }
}