/* Tablet and smaller */
@media (max-width: 1024px) {
    .runes-content { max-width: 100%; padding: 0 10px; }
    .runes-table-container { max-height: 55vh; }
    .spell-builder { padding: 20px 22px; gap: 14px; grid-template-columns: auto 1fr; }
    .spell-builder-button, .spell-builder-clear { grid-column: 1 / -1; }
    .about-content { padding: 40px 50px; }
    .logo { font-size: 3rem; }
    .tagline { font-size: 2.8rem; }
    .first-s { font-size: 4rem; }
    .y-letter { font-size: 4.2rem; }
}

/* Mobile landscape and smaller tablets */
@media (max-width: 768px) {
    body { padding: 15px; }
    .container { padding: 30px 15px; }
    .nav-buttons { top: 15px; right: 15px; gap: 8px; }
    .nav-button { padding: 10px 18px; font-size: 13px; border-radius: 12px; }
    .logo { font-size: 2.5rem; margin-bottom: 15px; }
    .tagline { font-size: 2.4rem; }
    .first-s { font-size: 3.5rem; }
    .pellscr-part, .after-main-y { font-size: 2.4rem; }
    .y-letter { font-size: 3.8rem; }
    .header { margin-bottom: 40px; }
    .inline-group { grid-template-columns: 1fr; gap: 24px; }
    .about-content { padding: 30px 35px; border-radius: 20px; }
    .spell-builder { padding: 18px 20px; gap: 12px; border-radius: 16px; grid-template-columns: 1fr; }
    .spell-builder-label { font-size: 14px; }
    .spell-builder-runes { font-size: 14px; min-height: 44px; }
    .spell-builder-button { width: 100%; padding: 11px 24px; font-size: 13px; }
    .spell-builder-clear { width: 100%; padding: 9px 20px; }
    .runes-controls { gap: 10px; flex-direction: column; width: 100%; }
    .runes-filter { width: 100%; max-width: 300px; padding: 11px 20px; font-size: 13px; }
    .runes-table-container { max-height: 50vh; border-radius: 14px; }
    .runes-table th { padding: 12px 10px; font-size: 10px; }
    .runes-table td { padding: 10px; font-size: 11px; }
    .rune-name { font-size: 12px; }
    .rune-type { font-size: 11px; }
    .rune-runic { font-size: 15px; }
    .rune-description { font-size: 11px; max-width: 250px; }
    .rune-tier { font-size: 10px; padding: 4px 10px; }
    textarea, input { padding: 16px 18px; font-size: 15px; border-radius: 12px; }
    textarea { min-height: 120px; }
    .cast-btn { padding: 18px 32px; font-size: 16px; border-radius: 14px; }
    .result table { font-size: 11px; }
    .result table th, .result table td { padding: 10px 8px; font-size: 10px; }
    .result table th { font-size: 9px; }
    .table-container { max-height: 450px; border-radius: 14px; overflow-x: auto; }
    .about-content p { font-size: 1rem; margin-bottom: 18px; }
}

/* Mobile portrait */
@media (max-width: 480px) {
    body { padding: 10px; }
    .container { padding: 25px 12px; }
    .nav-buttons { top: 12px; right: 12px; gap: 6px; }
    .nav-button { padding: 8px 14px; font-size: 12px; border-radius: 10px; }
    .logo { font-size: 2rem; margin-bottom: 12px; }
    .tagline, .pellscr-part, .after-main-y { font-size: 2rem; }
    .first-s { font-size: 3rem; }
    .y-letter { font-size: 3.2rem; }
    .header { margin-bottom: 30px; }
    .about-content { padding: 25px 28px; border-radius: 18px; }
    .spell-builder { padding: 16px 18px; gap: 10px; border-radius: 14px; }
    .spell-builder-label { font-size: 13px; }
    .spell-builder-runes { font-size: 13px; min-height: 42px; }
    .spell-builder-button { padding: 10px 20px; font-size: 12px; border-radius: 10px; }
    .spell-builder-clear { padding: 8px 18px; font-size: 11px; }
    .runes-filter { padding: 10px 18px; font-size: 12px; border-radius: 10px; }
    .runes-table-container { max-height: 45vh; border-radius: 12px; }
    .runes-table th { padding: 10px 8px; font-size: 9px; }
    .runes-table td { padding: 9px 8px; font-size: 10px; }
    .rune-name { font-size: 11px; }
    .rune-type { font-size: 10px; }
    .rune-runic { font-size: 14px; }
    .rune-description { font-size: 10px; max-width: 200px; }
    .rune-tier { font-size: 9px; padding: 3px 8px; border-radius: 10px; }
    label { font-size: 0.9rem; margin-bottom: 10px; }
    textarea, input { padding: 14px 16px; font-size: 14px; border-radius: 10px; }
    textarea { min-height: 110px; }
    .cast-btn { padding: 16px 28px; font-size: 15px; border-radius: 12px; }
    .result table { font-size: 10px; }
    .result table th, .result table td { padding: 8px 6px; font-size: 9px; }
    .result table th { font-size: 8px; }
    .table-container { max-height: 400px; border-radius: 12px; }
    .about-content p { font-size: 0.95rem; margin-bottom: 16px; }
    .status { padding: 14px 20px; font-size: 0.85rem; border-radius: 14px; }
}

/* Extra small devices */
@media (max-width: 360px) {
    .logo, .tagline, .pellscr-part, .after-main-y { font-size: 1.8rem; }
    .first-s { font-size: 2.6rem; }
    .y-letter { font-size: 2.8rem; }
    .about-content { padding: 20px 22px; }
    .spell-builder { padding: 14px 16px; }
    .runes-table th { padding: 9px 6px; font-size: 8px; }
    .runes-table td { padding: 8px 6px; font-size: 9px; }
}

/* Landscape orientation */
@media (max-height: 600px) and (orientation: landscape) {
    .container { padding: 20px 15px; }
    .header { margin-bottom: 25px; }
    .logo { font-size: 2rem; margin-bottom: 10px; }
    .about-content { padding: 25px 35px; }
    .runes-table-container, .table-container { max-height: 40vh; }
    textarea { min-height: 100px; }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .runes-table, .cast-btn {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}