/* =========================================================
   NepalType Universal Layout Breakpoints (2026 Polish)
   Loaded last in index.html so it overrides all older CSS.
   Targeted Breakpoints:
   1. 320px (Mobile S)
   2. 375px (Mobile M)
   3. 425px (Mobile L)
   4. 768px (Tablet)
   5. 1024px (Small Laptop)
   6. 1440px (Standard Laptop)
   7. 2560px (4K Ultra Wide)
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.glass-header,
.secondary-nav-container,
.app-container,
.main-container {
    max-width: 100%;
    box-sizing: border-box;
}

.glass-header {
    min-width: 0;
}

.header-right,
.header-actions,
.header-left {
    min-width: 0;
}

.nt-signin-btn span,
.nt-user-name,
.stats-nav-btn span {
    white-space: nowrap;
}

.mobile-menu-card {
    max-width: min(360px, calc(100vw - 24px));
}

.lb-tabs-container,
.heatmap-switcher,
.lb-timeframe-tabs {
    flex-wrap: wrap;
}

/* Hide mobile nav trigger on tablets and desktop */
@media (min-width: 768px) {
    .mobile-nav-trigger {
        display: none !important;
    }
}

/* =========================================================
   1. ULTRA WIDE & 4K DISPLAY (>= 1800px)
   ========================================================= */
@media (min-width: 1800px) {
    .glass-header {
        width: min(1800px, calc(100% - 48px)) !important;
        margin: 12px auto !important;
        padding: 12px 24px !important;
    }

    .secondary-nav-container {
        width: min(1750px, calc(100% - 48px)) !important;
        margin: 12px auto !important;
        padding: 12px 20px !important;
    }

    .app-container,
    .main-container,
    #main-typing-area.typing-area-wrapper,
    #shared-stats.stats-bar,
    .keyboard-section {
        max-width: 1750px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #main-typing-area.typing-area-wrapper {
        min-height: 380px !important;
        padding: 24px 32px 56px !important;
    }

    #text-display:not(.hidden) {
        font-size: 2.1rem !important;
        line-height: 1.7 !important;
    }

    .key {
        height: 60px !important;
        font-size: 1.1rem !important;
    }
}

/* =========================================================
   2. STANDARD DESKTOP (1200px - 1799px)
   ========================================================= */
@media (min-width: 1200px) and (max-width: 1799px) {
    .mobile-hamburger,
    .tablet-mode-toggle,
    .tablet-nav-toggle,
    .mobile-nav-trigger {
        display: none !important;
    }

    .desktop-nav {
        display: flex !important;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .input-mode-switcher {
        display: flex !important;
    }

    .glass-header {
        width: min(1420px, calc(100% - 24px)) !important;
        padding: 8px 18px !important;
        gap: 12px;
    }

    .secondary-nav-container {
        width: min(1380px, calc(100% - 24px)) !important;
        flex-wrap: nowrap;
    }

    .secondary-nav-content {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
    }

    .nt-signin-btn {
        height: 38px;
    }
}

/* Compact laptop / small desktop (1200px - 1360px) */
@media (min-width: 1200px) and (max-width: 1360px) {
    .mode-label {
        display: none !important;
    }

    .stats-nav-btn span {
        display: none !important;
    }

    .stats-nav-btn {
        width: 40px !important;
        justify-content: center !important;
        padding: 8px !important;
    }

    .logo {
        font-size: 1.7rem !important;
        padding: 6px 10px !important;
    }
}

/* =========================================================
   3. SMALL LAPTOP & LARGE TABLET (900px - 1199px)
   ========================================================= */
@media (min-width: 900px) and (max-width: 1199px) {
    .mobile-nav-trigger {
        display: none !important;
    }

    .glass-header {
        width: calc(100% - 20px) !important;
        padding: 8px 14px !important;
    }

    .secondary-nav-container {
        width: calc(100% - 20px) !important;
        padding: 8px 14px !important;
    }

    .secondary-nav-content {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    #main-typing-area.typing-area-wrapper {
        width: calc(100% - 20px) !important;
        margin: 10px auto !important;
    }

    /* Expand typing area when keyboard is hidden */
    body.hide-keyboard #main-typing-area.typing-area-wrapper,
    body.hide-keyboard.hide-hands #main-typing-area.typing-area-wrapper {
        min-height: clamp(380px, 56dvh, 520px) !important;
        height: auto !important;
    }

    body.hide-keyboard #text-display,
    body.hide-keyboard.hide-hands #text-display {
        min-height: clamp(280px, 46dvh, 420px) !important;
    }

    #shared-stats.stats-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        width: calc(100% - 20px) !important;
        margin: 10px auto !important;
    }

    #keyboard-section {
        width: calc(100% - 20px) !important;
        margin: 10px auto !important;
    }
}

/* =========================================================
   4. TABLET (768px - 899px)
   ========================================================= */
@media (min-width: 768px) and (max-width: 899px) {
    .mobile-hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text-primary);
        flex-shrink: 0;
    }

    .desktop-nav,
    .input-mode-switcher:not(.active) {
        display: none !important;
    }

    /* Show the toggle trigger at tablet — user taps to open/close the nav panel */
    .mobile-nav-trigger {
        display: flex !important;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        border-radius: 12px;
        justify-content: space-between;
        align-items: center;
        font-size: 0.95rem;
        font-weight: 800;
        text-align: left;
        gap: 8px;
        cursor: pointer;
    }

    .tablet-mode-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 40px;
        min-width: 44px;
        max-width: 150px;
        padding: 0 12px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text-primary);
        font-weight: 700;
        flex-shrink: 0;
    }

    .glass-header {
        width: calc(100% - 16px) !important;
        margin: 6px auto !important;
        padding: 6px 10px !important;
        border-radius: 16px;
        gap: 8px;
        flex-wrap: nowrap !important;
    }

    .logo {
        font-size: 1.45rem !important;
        padding: 4px 8px !important;
    }

    .header-actions {
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    .stats-nav-btn span,
    .nt-user-name {
        display: none !important;
    }

    .stats-nav-btn,
    .mode-right-actions .view-toggle-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }

    #theme-config-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .nt-signin-btn {
        height: 40px;
        padding: 0 10px !important;
        border-radius: 12px;
    }

    .secondary-nav-container {
        width: calc(100% - 16px) !important;
        margin: 0 auto 8px !important;
        padding: 6px 8px !important;
        border-radius: 14px;
        flex-direction: column;
        overflow: visible !important;
    }

    /* Hidden by default — JS adds .active to open it */
    .secondary-nav-content {
        display: none !important;
        flex-direction: column;
        width: 100%;
        gap: 10px;
        padding: 8px 4px 4px;
    }

    .secondary-nav-content.active {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .nav-section-group,
    .view-toggle-group,
    .nav-center-lesson {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .stats-bar,
    #shared-stats.stats-bar {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px 10px !important;
        width: calc(100% - 16px) !important;
        margin: 4px auto 6px !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
    }

    #shared-stats .stats-nav-slot {
        display: none !important;
    }

    #shared-stats .stat-item .label {
        font-size: 0.62rem !important;
    }

    #shared-stats .stat-item .value {
        font-size: 1rem !important;
    }

    #shared-stats #daily-goal-ui,
    #shared-stats #streak-ui {
        grid-column: auto !important;
        padding: 0 !important;
        border: 0 !important;
    }

    #shared-stats #daily-goal-ui {
        grid-column: 1 / span 2 !important;
        grid-row: 1 !important;
    }

    #shared-stats .stat-item:nth-child(3) {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    #shared-stats .stat-item:nth-child(4) {
        grid-column: 4 !important;
        grid-row: 1 !important;
    }

    #shared-stats .stat-item:nth-child(5) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #shared-stats .stat-item:nth-child(6) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    #shared-stats #streak-ui {
        grid-column: 3 / span 2 !important;
        grid-row: 2 !important;
        align-items: flex-start !important;
    }

    #shared-stats #streak-ui > div {
        gap: 8px !important;
    }

    .restart-btn,
    #restart-btn.restart-btn {
        min-height: 30px !important;
        padding: 5px 14px !important;
        font-size: 0.82rem !important;
    }

    .typing-area-wrapper,
    #main-typing-area.typing-area-wrapper {
        width: calc(100% - 16px) !important;
        margin: 0 auto 8px !important;
        padding: 10px 14px 38px !important;
        min-height: clamp(150px, 28dvh, 205px) !important;
        max-height: 225px !important;
        height: clamp(150px, 28dvh, 205px) !important;
        transition: height 0.3s ease, min-height 0.3s ease;
    }

    /* Text display: compact font size so 2-3 lines are visible */
    #text-display:not(.hidden) {
        font-size: clamp(1.15rem, 2.7vw, 1.45rem) !important;
        line-height: 1.45 !important;
        padding: 10px 12px 18px !important;
        min-height: 96px !important;
        max-height: 150px !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Expand lesson typing box smoothly when keyboard is untoggled/hidden on tablet */
    body.hide-keyboard #main-typing-area.typing-area-wrapper,
    body.hide-keyboard.hide-hands #main-typing-area.typing-area-wrapper {
        min-height: clamp(320px, 52dvh, 460px) !important;
        height: auto !important;
    }

    body.hide-keyboard #text-display:not(.hidden),
    body.hide-keyboard.hide-hands #text-display:not(.hidden) {
        min-height: clamp(240px, 42dvh, 380px) !important;
        font-size: clamp(1.4rem, 3.5vw, 1.9rem) !important;
    }

    #keyboard-section,
    .keyboard-section {
        width: calc(100% - 16px) !important;
        margin: 0 auto !important;
        padding: 6px 4px !important;
        overflow: hidden !important;
    }

    body.hide-keyboard .keyboard-section,
    body.hide-keyboard #keyboard-section {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #keyboard-wrapper,
    .keyboard-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 7px !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    #keyboard,
    .keyboard {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }

    .keyboard-row {
        display: flex !important;
        width: 100% !important;
        gap: 3px !important;
        justify-content: space-between !important;
    }

    .key,
    #keyboard .key {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 33px !important;
        border-radius: 5px !important;
        font-size: 0.76rem !important;
    }

    .key-large,
    #keyboard .key-large {
        flex: 1.5 1 0 !important;
        width: auto !important;
    }

    .key-xlarge,
    #keyboard .key-xlarge {
        flex: 2 1 0 !important;
        width: auto !important;
    }

    .key-space,
    #keyboard .key-space {
        flex: 4.5 1 0 !important;
        width: auto !important;
    }
}

/* =========================================================
   5. MOBILE GENERAL (<= 767px) - 425px, 375px, 320px
   ========================================================= */
@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .app-container {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 100dvh;
        overflow-x: hidden !important;
    }

    .mobile-hamburger {
        display: flex !important;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .desktop-nav,
    .tablet-mode-toggle,
    .input-mode-switcher,
    .header-center,
    .blog-nav-text,
    .stats-nav-btn span,
    .nt-user-name,
    .nt-signin-btn span,
    .nt-chevron {
        display: none !important;
    }

    .glass-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 3000;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border-radius: 0 !important;
        gap: 6px !important;
        min-height: 56px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .logo {
        font-size: 1.2rem !important;
        padding: 0 !important;
        gap: 4px !important;
    }

    .header-left {
        gap: 6px !important;
        flex: 1;
        min-width: 0;
    }

    .header-right,
    .header-actions,
    .mode-right-actions {
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    .nt-signin-btn,
    .stats-nav-btn,
    .mode-right-actions .view-toggle-btn,
    .nt-avatar-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }

    #theme-config-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .mobile-menu-card {
        top: 60px !important;
        left: 10px !important;
        right: 10px;
        width: calc(100vw - 20px) !important;
        max-width: none;
        border-radius: 16px;
    }

    /* Secondary Nav Control Card Mobile */
    .secondary-nav-container {
        width: calc(100% - 12px) !important;
        margin: 6px auto !important;
        padding: 6px 8px !important;
        flex-direction: column;
        border-radius: 14px;
        overflow: visible !important;
    }

    .mobile-nav-trigger {
        display: flex !important;
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 12px;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9rem;
        font-weight: 800;
        text-align: left;
        gap: 8px;
    }

    .secondary-nav-content {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 10px;
        padding: 8px 2px 4px;
    }

    .secondary-nav-content.active {
        display: flex !important;
    }

    .nav-section-group,
    .view-toggle-group,
    .nav-center-lesson {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* Main Typing Box Mobile */
    #main-typing-area.typing-area-wrapper,
    .typing-area-wrapper {
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        margin: 6px auto !important;
        padding: 12px 10px 48px 10px !important;
        border-radius: 14px !important;
        min-height: 220px !important;
        height: auto !important;
        position: relative !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transition: min-height 0.3s ease;
    }

    /* Expand when keyboard is untoggled on mobile */
    body.hide-keyboard #main-typing-area.typing-area-wrapper,
    body.hide-keyboard.hide-hands #main-typing-area.typing-area-wrapper {
        min-height: clamp(320px, 52dvh, 460px) !important;
    }

    body.hide-keyboard #text-display,
    body.hide-keyboard.hide-hands #text-display {
        min-height: clamp(240px, 42dvh, 380px) !important;
    }

    #text-display:not(.hidden) {
        min-height: 160px !important;
        padding: 14px 10px 10px !important;
        border-radius: 12px !important;
        font-size: clamp(1.15rem, 5.2vw, 1.45rem) !important;
        line-height: 1.5 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    #text-display.paragraph-view-mode .layers-container,
    #text-display.line-view-mode .layers-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .learn-mode-bottom-bar {
        position: absolute !important;
        bottom: 6px !important;
        left: 8px !important;
        right: 8px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        z-index: 20 !important;
        pointer-events: none !important;
    }

    .learn-mode-bottom-bar > * {
        pointer-events: auto !important;
    }

    .text-view-toggle {
        max-width: 135px !important;
        padding: 2px !important;
        gap: 2px !important;
    }

    .text-view-btn {
        min-height: 26px !important;
        padding: 3px 8px !important;
        font-size: 0.72rem !important;
    }

    .text-size-btn {
        width: 30px !important;
        height: 26px !important;
        font-size: 0.75rem !important;
    }

    /* Stats Bar Mobile - Clean 2-Column Grid */
    #shared-stats.stats-bar,
    .stats-bar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px 8px !important;
        width: calc(100% - 12px) !important;
        margin: 6px auto !important;
        padding: 10px 10px !important;
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.2) !important;
        box-sizing: border-box !important;
    }

    #shared-stats .stats-nav-slot {
        display: none !important;
    }

    #shared-stats #daily-goal-ui,
    #shared-stats #streak-ui {
        grid-column: 1 / -1 !important;
        padding: 0 !important;
    }

    #shared-stats .stat-item {
        padding: 4px 2px !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    #shared-stats .stat-item .label,
    #shared-stats #daily-goal-ui .label,
    #shared-stats #streak-ui .label {
        font-size: 0.64rem !important;
    }

    #shared-stats .stat-item .value {
        font-size: 1.05rem !important;
    }

    #restart-btn.restart-btn,
    .restart-btn {
        min-width: 80px !important;
        min-height: 32px !important;
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }

    /* VIRTUAL KEYBOARD RESPONSIVE FIX FOR ALL PHONES */
    #keyboard-section,
    .keyboard-section {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 4px !important;
        padding: 4px 2px 12px 2px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    body.hide-keyboard .keyboard-section,
    body.hide-keyboard #keyboard-section {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #keyboard-wrapper,
    .keyboard-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 4px 2px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #keyboard,
    .keyboard {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        box-sizing: border-box !important;
    }

    .keyboard-row {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 2px !important;
        justify-content: space-between !important;
        margin-bottom: 2px !important;
        box-sizing: border-box !important;
    }

    .key,
    #keyboard .key {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: clamp(34px, 8.8vw, 42px) !important;
        border-radius: 5px !important;
        padding: 2px 0 !important;
        box-sizing: border-box !important;
    }

    .key-large,
    #keyboard .key-large {
        flex: 1.5 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .key-xlarge,
    #keyboard .key-xlarge {
        flex: 2 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .key-space,
    #keyboard .key-space {
        flex: 4.5 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .key-label {
        font-size: clamp(6px, 1.8vw, 9px) !important;
        top: 2px !important;
        left: 2px !important;
    }

    .key-nepali {
        font-size: clamp(0.75rem, 2.6vw, 0.95rem) !important;
    }

    .key-shift {
        font-size: clamp(6px, 1.8vw, 9px) !important;
    }

    .hands-container {
        display: none !important;
    }
}

/* Specific polish for 320px (Mobile S) */
@media (max-width: 359px) {
    .glass-header {
        height: 50px !important;
        padding: 4px 6px !important;
    }

    .logo,
    .logo span {
        font-size: 1.02rem !important;
    }

    .header-actions {
        gap: 4px !important;
    }

    .stats-nav-btn,
    .theme-toggle-standalone,
    .nt-avatar-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    #text-display:not(.hidden) {
        font-size: 1.15rem !important;
        padding: 10px 6px !important;
    }

    .key,
    #keyboard .key {
        height: 33px !important;
        border-radius: 4px !important;
    }

    .key-nepali {
        font-size: 0.72rem !important;
    }
}

/* =========================================================
   TABLET + SMALL LAPTOP: Keyboard Hide Expansion Fix
   Overrides responsive-mobile.css max-height: 220px cap
   that prevents typing area from growing on 481px-1024px.
   ========================================================= */
@media (min-width: 481px) and (max-width: 1199px) {

    /* Remove the 220px hard cap — let height be natural */
    .typing-area-wrapper,
    #main-typing-area.typing-area-wrapper {
        max-height: none !important;
        height: auto !important;
    }

    /* Remove the 180px text-display cap too */
    .text-display:not(.hidden),
    #text-display:not(.hidden) {
        max-height: none !important;
    }

    /* When keyboard is hidden — smoothly expand typing area */
    body.hide-keyboard .typing-area-wrapper,
    body.hide-keyboard #main-typing-area.typing-area-wrapper,
    body.hide-keyboard.hide-hands .typing-area-wrapper,
    body.hide-keyboard.hide-hands #main-typing-area.typing-area-wrapper {
        min-height: clamp(360px, 58dvh, 540px) !important;
        max-height: none !important;
        height: auto !important;
        flex: 1 1 auto !important;
    }

    /* Expand text display when keyboard is hidden */
    body.hide-keyboard #text-display:not(.hidden),
    body.hide-keyboard.hide-hands #text-display:not(.hidden) {
        min-height: clamp(260px, 46dvh, 420px) !important;
        max-height: none !important;
        font-size: clamp(1.4rem, 3.5vw, 2.2rem) !important;
    }

    /* Collapse keyboard section entirely when untoggled */
    body.hide-keyboard .keyboard-section,
    body.hide-keyboard #keyboard-section {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}

/* Final tablet visible-keyboard fit: keep all keyboard rows reachable. */
@media (min-width: 768px) and (max-width: 899px) {
    body:not(.hide-keyboard) #main-typing-area.typing-area-wrapper {
        min-height: clamp(145px, 26dvh, 195px) !important;
        height: clamp(145px, 26dvh, 195px) !important;
        max-height: 205px !important;
        margin-bottom: 7px !important;
        padding: 10px 14px 36px !important;
    }

    body:not(.hide-keyboard) #text-display:not(.hidden) {
        min-height: clamp(88px, 17dvh, 128px) !important;
        max-height: 140px !important;
        padding: 8px 12px 16px !important;
        font-size: clamp(1.1rem, 2.45vw, 1.35rem) !important;
        line-height: 1.4 !important;
    }

    body:not(.hide-keyboard) #shared-stats.stats-bar {
        margin-top: 6px !important;
        margin-bottom: 8px !important;
        padding: 9px 14px !important;
        gap: 5px 10px !important;
    }

    body:not(.hide-keyboard) #keyboard-section.keyboard-section {
        display: flex !important;
        justify-content: center !important;
        width: calc(100% - 16px) !important;
        padding: 4px 0 10px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    body:not(.hide-keyboard) #keyboard-wrapper.keyboard-container {
        width: min(100%, 624px) !important;
        margin: 0 auto !important;
        padding: 6px !important;
    }

    body:not(.hide-keyboard) #keyboard.keyboard {
        gap: 3px !important;
    }

    body:not(.hide-keyboard) #keyboard.keyboard > div,
    body:not(.hide-keyboard) .keyboard-row {
        gap: 3px !important;
    }

    body:not(.hide-keyboard) #keyboard .key {
        height: 31px !important;
        font-size: 0.72rem !important;
    }
}

/* 1024px laptop fit: bring the hand guide back without crowding the keyboard. */
@media (min-width: 1024px) and (max-width: 1199px) {
    body:not(.hide-keyboard):not(.hide-hands) #keyboard-section.keyboard-section {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        gap: clamp(8px, 1.1vw, 14px) !important;
        width: calc(100% - 20px) !important;
        max-width: 1000px !important;
        margin: 8px auto 0 !important;
        padding: 4px 0 10px !important;
        overflow: visible !important;
    }

    body:not(.hide-keyboard):not(.hide-hands) #keyboard-wrapper.keyboard-container {
        flex: 0 1 630px !important;
        max-width: 630px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 7px !important;
        gap: 4px !important;
    }

    body:not(.hide-keyboard):not(.hide-hands) #keyboard.keyboard,
    body:not(.hide-keyboard):not(.hide-hands) #keyboard.keyboard > div,
    body:not(.hide-keyboard):not(.hide-hands) .keyboard-row {
        gap: 3px !important;
    }

    body:not(.hide-keyboard):not(.hide-hands) #keyboard .key {
        height: 33px !important;
        min-width: 0 !important;
        border-radius: 6px !important;
        font-size: 0.76rem !important;
    }

    body:not(.hide-keyboard):not(.hide-hands) #keyboard-section .hand {
        display: flex !important;
        visibility: visible !important;
        opacity: 0.96 !important;
        flex: 0 0 135px !important;
        width: 135px !important;
        height: 148px !important;
        margin: 0 0 2px !important;
        padding-bottom: 18px !important;
        border-radius: 28px 28px 16px 16px !important;
        transform: scale(0.82) !important;
        transform-origin: bottom center !important;
    }

    body:not(.hide-keyboard):not(.hide-hands) #keyboard-section .finger {
        width: 24px !important;
        min-width: 24px !important;
    }

    body:not(.hide-keyboard):not(.hide-hands) #keyboard-section .finger-name-display {
        font-size: 0.8rem !important;
        top: -52px !important;
    }
}