/* ============================================
   KD Essence — Mobile UX Polish
   Loaded after premium-3d-ui.css
   ============================================ */

/* --- BASE TOUCH IMPROVEMENTS --- */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

button, a, [role="button"], .premium-btn, .academic-card, .answer-option {
    touch-action: manipulation;
}

/* Min touch target 44px */
.premium-btn, .answer-option, .bottom-nav a {
    min-height: 44px;
}

/* --- TYPOGRAPHY SCALE --- */
@media (max-width: 480px) {
    .premium-title { font-size: 28px; }
    .progress-percent { font-size: 48px; }
    .progress-side .k { font-size: 42px; }
    .section-title { font-size: 22px; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
}

/* --- PAGE BODY --- */
@media (max-width: 640px) {
    .page-body { padding: 14px 12px 100px; }
    .premium-page { padding: 14px 12px 100px; }
    .premium-page-header { padding: 1rem 0 .75rem; }
    .premium-page-header h1 { font-size: 1.5rem; }
}

/* --- CARDS & PANELS --- */
@media (max-width: 640px) {
    .premium-panel {
        border-radius: 16px;
        padding: .9rem 1rem;
    }
    .premium-card { border-radius: 20px; }
    .premium-hero { padding: 16px 14px; }
    .premium-grid.two {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .premium-grid {
        gap: 10px;
    }
}

/* --- HOME HERO --- */
@media (max-width: 480px) {
    .home-top-grid {
        gap: 10px;
    }
    .brand-crest {
        width: 64px;
        height: 64px;
        border-radius: 18px;
    }
    .brand-crest:after { display: none !important; }
    .hero-avatar {
        width: 46px;
        height: 46px;
    }
    .hero-icon-btn {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }
    .greeting { font-size: 13px; }
    .greeting-sub { font-size: 12px; }
}

/* --- PROGRESS PANEL --- */
@media (max-width: 640px) {
    .progress-panel { padding: 18px 16px; border-radius: 22px; }
    .progress-grid { gap: 14px; }
    .progress-bar { max-width: 100%; }
    .books-stack { width: 140px; height: 110px; }
    .trophy { width: 60px; height: 68px; top: 6px; }
    .trophy:before { font-size: 20px; top: 14px; }
    .book { height: 22px; }
    .book.b1 { width: 90px; }
    .book.b2 { width: 100px; }
    .book.b3 { width: 88px; }
    .medal-chip { width: 40px; height: 40px; font-size: 16px; right: 8px; }
}

/* --- ACADEMIC CARDS --- */
@media (max-width: 640px) {
    .academic-card {
        border-radius: 16px;
        padding: .85rem 1rem;
        gap: 10px;
    }
    .academic-card-visual {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }
    .academic-card-title { font-size: .95rem; }
    .academic-card-text { font-size: .8rem; }
    .academic-mini-pill { font-size: .7rem; padding: 3px 8px; }
    .academic-go { font-size: 1.2rem; }
}

/* --- EXERCISE PAGE --- */
@media (max-width: 640px) {
    .question-slide { padding: .9rem 1rem; }
    .answer-option {
        padding: .65rem .9rem;
        border-radius: 10px;
        font-size: .88rem;
    }
    #btn-prev, #btn-next, #btn-submit {
        padding: .6rem 1.2rem;
        font-size: .88rem;
    }
}

/* --- RESULT PAGE --- */
@media (max-width: 640px) {
    .stat-value { font-size: 2.2rem; }
    .favorite-item { flex-direction: column; gap: .5rem; }
}

/* --- DOWNLOAD BANNER --- */
@media (max-width: 640px) {
    .download-banner {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
    }
    .download-icon-box { height: 64px; }
    .update-btn {
        display: block;
        text-align: center;
        padding: 12px;
    }
}

/* --- BOTTOM NAV --- */
@media (max-width: 640px) {
    .bottom-nav { padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
    .bottom-nav a { padding: 8px 4px; border-radius: 14px; font-size: 11px; }
    .bottom-nav a .nav-icon { font-size: 16px; margin-bottom: 3px; }
}

/* --- NOTIFICATION PANEL --- */
@media (max-width: 640px) {
    .notification-panel {
        width: calc(100vw - 24px);
        right: -12px;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* --- FORMS & INPUTS --- */
@media (max-width: 640px) {
    input[type="radio"], input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }
    select, input[type="text"], input[type="email"], textarea {
        font-size: 16px; /* Prevents iOS zoom */
    }
}

/* --- TABLES (admin) --- */
@media (max-width: 640px) {
    .admin-table-wrap { font-size: .8rem; }
    .admin-table thead th { font-size: 10px; padding: 0 8px 8px; }
    .admin-table tbody td { padding: 10px 8px; }
}

/* --- SAFE AREA (notch/island) --- */
@supports (padding-top: env(safe-area-inset-top)) {
    .topbar { padding-top: env(safe-area-inset-top); }
}