/* ===== SHUGO.GG MAIN STYLES ===== */

/* ===== DRAG PREVENTION ===== */
/* Prevent dragging of images, links, and UI elements */
img,
a,
button,
.btn,
.nav-link,
.nav-brand,
.logo-text,
.feature-card,
.stat-card,
.discord-btn,
.tab-btn,
.filter-btn,
.modal-header,
.equipment-slot,
.item-icon,
.class-icon,
.faction-icon,
.rank-icon,
.search-container,
.leaderboard-row,
.news-card,
.rift-widget,
.footer-credit,
.perf-mode-toggle {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    draggable: false;
}

/* ===== TEXT SELECTION CONTROL ===== */
/* Disable text selection on UI elements */
body,
nav,
.main-nav,
.nav-link,
.nav-brand,
.logo-text,
.logo-tagline,
.site-footer,
.hero-section,
.hero-title,
.hero-subtitle,
.search-container,
.feature-card,
.feature-icon,
.feature-title,
.feature-desc,
.stat-card,
.stat-number,
.stat-label,
.coming-soon-badge,
.discord-btn,
.btn,
button,
.modal-header,
.modal-title,
.tab-btn,
.faction-badge,
.class-badge,
.region-badge,
.server-badge,
.rank-badge,
.stat-item,
.stat-icon,
.info-label,
.equipment-slot,
.slot-label,
.leaderboard-header,
.leaderboard-tabs,
.header-cell,
.filter-group,
.filter-label,
label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow text selection on content that users might want to copy */
.character-name,
.player-name,
.guild-name,
.profile-name,
.stat-value,
.info-value,
.item-name,
.cell-name,
.search-input,
input[type="text"],
input[type="search"],
textarea,
code,
pre,
.selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ===== NO SCROLLBARS - All pages use internal scrolling ===== */
html, body {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== SMOOTH PAGE TRANSITIONS ===== */
body {
    animation: pageLoad 0.3s ease-out;
}

.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 16px;
    background: linear-gradient(180deg, rgba(12, 16, 24, 0.92) 0%, rgba(10, 14, 22, 0.96) 100%);
    border-top: 1px solid rgba(255, 149, 0, 0.16);
    color: rgba(200, 220, 245, 0.72);
    font-size: 0.85em;
    letter-spacing: 0.2px;
    z-index: 900;
    backdrop-filter: blur(12px);
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer a:hover {
    color: #FF9500;
}

.footer-separator {
    opacity: 0.4;
}

.footer-credit {
    background: linear-gradient(90deg, #ff6b9d, #ff9500, #ff6b9d);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: footerGradient 3s ease infinite;
    transition: all 0.3s ease;
}

.footer-credit:hover {
    animation: footerGradient 1s ease infinite, heartPulse 0.6s ease;
}

@keyframes footerGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ===== ANIMATIONS TOGGLE ===== */
.perf-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.perf-mode-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.perf-mode-slider {
    position: relative;
    width: 32px;
    height: 18px;
    background: rgba(100, 120, 140, 0.4);
    border-radius: 9px;
    transition: background 0.2s ease;
    pointer-events: none;
}

.perf-mode-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: rgba(200, 220, 245, 0.8);
    border-radius: 50%;
    transition: transform 0.2s ease;
    pointer-events: none;
}

/* Checked = animations ON (orange active state) */
.perf-mode-toggle input:checked + .perf-mode-slider {
    background: rgba(255, 149, 0, 0.6);
}

.perf-mode-toggle input:checked + .perf-mode-slider::after {
    transform: translateX(14px);
    background: #FF9500;
}

.perf-mode-label {
    font-size: 0.85em;
    color: rgba(200, 220, 245, 0.72);
    transition: color 0.2s ease;
    white-space: nowrap;
}

.perf-mode-toggle:hover .perf-mode-label {
    color: #FF9500;
}

/* ===== ANIMATIONS DISABLED MODE ===== */
/* Global animation and transition disable - use highest specificity */
/* Support both html.animations-disabled (early load) and body.animations-disabled */
html.animations-disabled,
html.animations-disabled *,
html.animations-disabled *::before,
html.animations-disabled *::after,
html body.animations-disabled,
html body.animations-disabled *,
html body.animations-disabled *::before,
html body.animations-disabled *::after {
    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: none !important;
    transition: none !important;
    transition-property: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

/* Hide animated background elements */
html.animations-disabled .hero-bg-effects,
body.animations-disabled .hero-bg-effects {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Disable hero icon floating animation */
html.animations-disabled .hero-icon,
body.animations-disabled .hero-icon {
    animation: none !important;
    filter: drop-shadow(0 0 25px rgba(255, 165, 0, 0.5)) !important;
    transform: none !important;
}

/* Disable logo icon animations */
html.animations-disabled .logo-icon-wrapper,
html.animations-disabled .logo-icon,
html.animations-disabled .nav-logo:hover .logo-icon-wrapper,
body.animations-disabled .logo-icon-wrapper,
body.animations-disabled .logo-icon,
body.animations-disabled .nav-logo:hover .logo-icon-wrapper {
    animation: none !important;
    transform: none !important;
}

/* Remove hover transforms */
html.animations-disabled .discord-btn:hover,
html.animations-disabled .nav-link:hover,
html.animations-disabled .feature-card:hover,
html.animations-disabled .stat-card:hover,
html.animations-disabled .search-result-card:hover,
html.animations-disabled .ranking-row:hover,
html.animations-disabled .item-card:hover,
body.animations-disabled .discord-btn:hover,
body.animations-disabled .nav-link:hover,
body.animations-disabled .feature-card:hover,
body.animations-disabled .stat-card:hover,
body.animations-disabled .search-result-card:hover,
body.animations-disabled .ranking-row:hover,
body.animations-disabled .item-card:hover,
body.animations-disabled .filter-btn:hover,
body.animations-disabled .content-btn:hover,
body.animations-disabled .dropdown-item:hover,
body.animations-disabled .nav-logo:hover,
body.animations-disabled .fav-card:hover,
body.animations-disabled .result-card:hover {
    transform: none !important;
}

/* Simplify backdrop filters for performance */
body.animations-disabled .main-nav,
body.animations-disabled .site-footer,
body.animations-disabled .modal,
body.animations-disabled .character-modal-content,
body.animations-disabled .filter-bar,
body.animations-disabled .leaderboard-fixed-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Disable spinner animation - replace with static loading indicator */
body.animations-disabled .spinner {
    animation: none !important;
    border: 3px solid rgba(255, 149, 0, 0.3) !important;
    border-top-color: #FF9500 !important;
}

/* Disable shimmer/skeleton loading effects */
body.animations-disabled .skeleton,
body.animations-disabled .shimmer,
body.animations-disabled [class*="skeleton"],
body.animations-disabled [class*="shimmer"],
body.animations-disabled .loading-shimmer {
    animation: none !important;
    background-image: none !important;
}

/* Disable pulse effects - status dots, etc */
body.animations-disabled .status-dot,
body.animations-disabled .status-dot.online,
body.animations-disabled .pulse,
body.animations-disabled [class*="pulse"],
body.animations-disabled .reminder-pulse {
    animation: none !important;
}

/* Disable rift widget animations */
body.animations-disabled .rift-floating-widget,
body.animations-disabled .rift-widget-preview,
body.animations-disabled .rift-widget-panel,
body.animations-disabled .rift-preview-icon,
body.animations-disabled .rift-expand-chevron {
    animation: none !important;
    transition: none !important;
}

/* Disable modal animations - ensure visibility works without animations */
html.animations-disabled .modal,
html.animations-disabled .modal-content,
html.animations-disabled .character-modal-content,
html.animations-disabled .modal.show,
html.animations-disabled .modal.closing,
body.animations-disabled .modal,
body.animations-disabled .modal-content,
body.animations-disabled .character-modal-content,
body.animations-disabled .modal.show,
body.animations-disabled .modal.closing {
    animation: none !important;
    transition: none !important;
}

/* Modal must be visible when active, even without animations */
html.animations-disabled .modal.active,
body.animations-disabled .modal.active {
    opacity: 1 !important;
    display: flex !important;
}

/* Modal must be hidden when closing (no animation delay) */
html.animations-disabled .modal.closing,
body.animations-disabled .modal.closing {
    opacity: 0 !important;
    display: none !important;
}

/* Ensure modal content is visible */
html.animations-disabled .modal.active .character-modal-content,
body.animations-disabled .modal.active .character-modal-content {
    opacity: 1 !important;
    transform: none !important;
}

/* Disable tooltip animations */
body.animations-disabled #equipmentTooltip,
body.animations-disabled .tooltip,
body.animations-disabled .tooltip-content {
    animation: none !important;
    transition: none !important;
}

/* Disable shugo easter egg animation */
body.animations-disabled .hero-icon.shugo-bounce,
body.animations-disabled .shugo-speech-bubble {
    animation: none !important;
}

/* Disable image loading animations */
body.animations-disabled img,
body.animations-disabled .img-placeholder,
body.animations-disabled .profile-image,
body.animations-disabled .character-avatar {
    animation: none !important;
}

/* Disable search result animations */
body.animations-disabled .search-results,
body.animations-disabled .search-result-card,
body.animations-disabled .search-results.expanded {
    animation: none !important;
    transition: none !important;
}

/* Disable favorites panel animations */
body.animations-disabled .favorites-panel,
body.animations-disabled .fav-card,
body.animations-disabled .fav-card.removing {
    animation: none !important;
}

/* Disable dropdown animations */
body.animations-disabled .custom-dropdown-menu,
body.animations-disabled .dropdown-menu,
body.animations-disabled .region-dropdown-menu {
    animation: none !important;
    transition: none !important;
}

/* Discord Button (Header) */
.discord-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.2) 0%, rgba(88, 101, 242, 0.12) 100%);
    border: 1px solid rgba(88, 101, 242, 0.4);
    border-radius: 10px;
    color: #99aaf5 !important;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.12);
    flex-shrink: 0;
}

.discord-btn:hover {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.35) 0%, rgba(88, 101, 242, 0.25) 100%);
    border-color: rgba(88, 101, 242, 0.65);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.35);
}

.discord-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Hide mobile Discord button on desktop */
.mobile-discord {
    display: none;
}

/* Mobile credit - hidden on desktop, shown in mobile nav */
.mobile-credit {
    display: none;
}

/* Responsive footer */
@media (max-width: 768px) {
    .site-footer {
        height: auto;
        min-height: 44px;
        flex-wrap: wrap;
        padding: 8px 16px;
        gap: 6px 12px;
        justify-content: center;
        text-align: center;
    }
    
    .footer-separator {
        display: none;
    }
    
    .perf-mode-toggle {
        order: 10;
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }
    
    .footer-credit {
        order: 9;
    }
}

@media (max-width: 480px) {
    .site-footer {
        font-size: 0.75em;
        padding: 8px 12px;
        gap: 4px 8px;
    }
    
    .site-footer > span:first-child {
        width: 100%;
        text-align: center;
    }
    
    .perf-mode-label {
        display: none;
    }
}

@keyframes pageLoad {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== ANIMATED BACKGROUND ===== */
.hero-bg-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    animation: orbFloat 25s ease-in-out infinite;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.bg-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 149, 0, 0.25) 0%, rgba(255, 149, 0, 0.1) 40%, transparent 70%);
    top: -200px;
    left: -150px;
    animation-delay: 0s;
}

.bg-orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(74, 108, 247, 0.2) 0%, rgba(74, 108, 247, 0.08) 40%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation-delay: -8s;
}

.bg-orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(180, 100, 255, 0.15) 0%, rgba(180, 100, 255, 0.06) 40%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -16s;
}

.bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 149, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 149, 0, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
    25% { transform: translate(20px, -15px) scale(1.05); opacity: 0.4; }
    50% { transform: translate(-15px, 20px) scale(0.95); opacity: 0.3; }
    75% { transform: translate(15px, 15px) scale(1.03); opacity: 0.38; }
}

@keyframes glowPulse {
    0%, 100% { filter: drop-shadow(0 0 25px rgba(255, 165, 0, 0.5)); }
    50% { filter: drop-shadow(0 0 40px rgba(255, 165, 0, 0.8)) drop-shadow(0 0 60px rgba(255, 149, 0, 0.4)); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes ripple {
    0% { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(4); opacity: 0; }
}

/* Navigation */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient(180deg, rgba(12, 16, 24, 0.98) 0%, rgba(12, 16, 24, 0.95) 100%);
    border-bottom: 1px solid rgba(255, 149, 0, 0.12);
    backdrop-filter: blur(20px);
    z-index: 1000;
}

.nav-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    overflow: hidden;
}

.nav-brand {
    display: flex;
    align-items: center;
}

/* Hide nav logo on home page since hero has the logo */
.home-page .nav-brand {
    opacity: 0;
    pointer-events: none;
    transition: none;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.15) 0%, rgba(255, 119, 0, 0.08) 100%);
    border: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.nav-logo:hover .logo-icon-wrapper {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.25) 0%, rgba(255, 119, 0, 0.15) 100%);
    box-shadow: 0 4px 20px rgba(255, 149, 0, 0.2);
}

.logo-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.4));
}

.logo-text-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.logo-text {
    font-family: 'Noto Sans', system-ui, -apple-system, sans-serif;
    font-size: 1.25em;
    font-weight: 700;
    color: #FF9500;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.logo-tagline {
    font-size: 0.65em;
    color: rgba(176, 196, 222, 0.5);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
}

.nav-links {
    display: flex;
    gap: 14px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    flex-shrink: 1;
    flex-wrap: nowrap;
    min-width: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 100px;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    color: rgba(200, 220, 245, 0.7);
    font-size: 0.88em;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(180deg, rgba(22, 30, 42, 0.86) 0%, rgba(16, 22, 32, 0.82) 100%);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.24), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.nav-link:hover {
    background: linear-gradient(180deg, rgba(26, 36, 50, 0.9) 0%, rgba(20, 28, 40, 0.86) 100%);
    color: rgba(255, 200, 140, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.nav-link.active {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.18) 0%, rgba(255, 119, 0, 0.12) 100%);
    color: #FF9500;
    border-color: rgba(255, 149, 0, 0.25);
    box-shadow: 0 4px 10px rgba(255, 149, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transform: translateY(-1px);
}

.nav-link.disabled {
    color: rgba(180, 195, 215, 0.45);
    cursor: not-allowed;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.01);
    border-color: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}

.nav-link.disabled:hover {
    background: rgba(255, 255, 255, 0.01);
    color: rgba(180, 195, 215, 0.45);
    transform: none;
}

.coming-soon-badge {
    position: absolute;
    top: -8px;
    right: -6px;
    background: rgba(130, 145, 165, 0.35);
    color: rgba(230, 235, 240, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.65em;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.nav-icon {
    font-size: 1em;
}

/* Hide empty nav-icon spans */
.nav-icon:empty {
    display: none;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: 20px;
}

/* Ensure Discord button comes first visually */
.nav-right .discord-btn {
    order: 1;
}

.nav-right .nav-link {
    order: 2;
}

.nav-right .nav-status {
    order: 3;
}

/* Nav Status Indicator */
.nav-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(20, 28, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-size: 0.75em;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #666;
}

.status-dot.online {
    background: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
    animation: statusPulse 2s ease-in-out infinite;
}

.status-dot.offline {
    background: #ff4444;
}

.status-text {
    color: rgba(200, 220, 245, 0.7);
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Clean background for all pages - NO SCROLLBARS */
.home-page,
.leaderboard-page,
.guild-page,
.items-page {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
    min-height: 100vh;
    height: auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.home-page .hero-section,
.leaderboard-page .leaderboard-container,
.guild-page .guild-layout,
.items-page .items-container {
    padding-bottom: 72px;
}

.home-page {
    padding-top: 64px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

/* Search View container */
#searchView {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-height: calc(100vh - 64px);
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hero Section */
.hero-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 48px 20px 96px;
    padding-top: 16px;
    margin-top: 64px; /* Account for fixed navbar height */
    position: relative;
    min-height: calc(100vh - 64px);
    box-sizing: border-box;
    overflow: hidden;
}

/* Search Mode: shift content to top */
.hero-section.search-mode {
    justify-content: flex-start;
    padding-top: 40px;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin-top: auto;
    margin-bottom: auto; /* Center content vertically using auto margins */
    flex-shrink: 1; /* Allow shrinking when space is tight */
}

.hero-logo {
    text-align: center;
    margin-bottom: min(20px, 3vh);
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 1; /* Allow shrinking when space is tight */
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Search Mode: keep logo visible */
.hero-section.search-mode .hero-logo {
    opacity: 1;
    transform: none;
    max-height: none;
    margin-bottom: 20px;
    pointer-events: auto;
}

/* Hidden state for when results are expanded */
.hero-logo.hidden {
    display: none !important;
}

.hero-icon {
    width: min(80px, 12vh);
    height: min(80px, 12vh);
    display: block;
    margin: 0 auto min(10px, 1.5vh) auto;
    filter: drop-shadow(0 0 25px rgba(255, 165, 0, 0.5));
    animation: float 3s ease-in-out infinite, glowPulse 4s ease-in-out infinite;
}

/* Shugo easter egg bounce animation */
.hero-icon.shugo-bounce {
    animation: shugoBounce 0.4s ease-in-out;
}

@keyframes shugoBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.2) rotate(-10deg); }
    50% { transform: scale(0.9) rotate(5deg); }
    75% { transform: scale(1.1) rotate(-5deg); }
}

/* Shugo speech bubble */
.shugo-speech-bubble {
    position: fixed;
    background: #fff;
    color: #333;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 20px;
    border: 3px solid #FF9500;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    z-index: 10000;
    min-width: 60px;
    text-align: center;
}

.shugo-speech-bubble::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-right-color: #FF9500;
}

.shugo-speech-bubble::after {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #fff;
}

/* Responsive speech bubble - show below icon on mobile */
@media (max-width: 480px) {
    .shugo-speech-bubble {
        font-size: 0.85rem;
        padding: 8px 12px;
    }
}

/* Stretched mode speech bubble - stays visible, positioned below icon */
.stretched-bubble {
    position: fixed;
    z-index: 10001;
    animation: stretchedBubblePop 0.3s ease-out;
    white-space: normal;
    max-width: 200px;
    line-height: 1.3;
}

.stretched-bubble::before {
    left: 50%;
    top: -14px;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom-color: #FF9500;
    border-right-color: transparent;
}

.stretched-bubble::after {
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #fff;
    border-right-color: transparent;
}

@keyframes stretchedBubblePop {
    0% { transform: translateX(-50%) scale(0); opacity: 0; }
    50% { transform: translateX(-50%) scale(1.1); }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* SPA Loading Bar */
.spa-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #FF9500, #FFB84D, #FF9500);
    box-shadow: 0 0 10px rgba(255, 149, 0, 0.7), 0 0 5px rgba(255, 149, 0, 0.5);
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.spa-loading-bar.active {
    opacity: 1;
    animation: spaLoadingProgress 2s ease-out forwards;
}

.spa-loading-bar.complete {
    width: 100% !important;
    animation: none;
    transition: width 0.2s ease, opacity 0.3s ease 0.2s;
}

.spa-loading-bar.complete.fade-out {
    opacity: 0;
}

@keyframes spaLoadingProgress {
    0% { width: 0; }
    20% { width: 25%; }
    50% { width: 50%; }
    80% { width: 75%; }
    95% { width: 90%; }
    100% { width: 95%; }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-6px) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(0deg); }
    75% { transform: translateY(-6px) rotate(2deg); }
}

.hero-title {
    font-size: clamp(1.4em, 4vh, 2.6em);
    font-weight: 700;
    color: #FF9500;
    letter-spacing: 3px;
    margin: 0;
    text-shadow: 0 0 40px rgba(255, 149, 0, 0.4);
    text-transform: none;
}

.hero-subtitle {
    font-size: clamp(0.7em, 1.5vh, 1em);
    color: rgba(200, 220, 245, 0.8);
    margin-top: min(4px, 0.5vh);
    letter-spacing: 1px;
}

/* Hero Search */
.search-container-hero {
    width: 100%;
    max-width: 550px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Search Mode: wider search container */
.hero-section.search-mode .search-container-hero {
    max-width: 650px;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(20, 28, 42, 0.9);
    border: 2px solid rgba(255, 149, 0, 0.3);
    border-radius: 16px;
    padding: 6px 6px 6px 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.search-input-wrapper:focus-within {
    border-color: rgba(255, 149, 0, 0.7);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4), 
        0 0 20px rgba(255, 149, 0, 0.15);
    transform: scale(1.01);
}

.search-prefix {
    font-size: 1.3em;
    margin-right: 12px;
    opacity: 0.8;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s ease, opacity 0.18s ease, color 0.22s ease;
}

.search-prefix.is-clear {
    color: #ffb347;
    transform: rotate(90deg) scale(1.06);
    opacity: 1;
}

.search-prefix.icon-flip {
    animation: iconFlip 220ms ease;
}

@keyframes iconFlip {
    0% { transform: rotate(0deg) scale(0.9); opacity: 0.4; }
    60% { transform: rotate(90deg) scale(1.1); opacity: 1; }
    100% { transform: rotate(90deg) scale(1.06); opacity: 1; }
}

.search-input-hero {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1.1em;
    color: #E0F0FF;
    padding: 12px 0;
}

.search-input-hero::placeholder {
    color: rgba(176, 196, 222, 0.5);
}

.search-clear-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: rgba(200, 220, 245, 0.7);
    font-size: 1.1em;
    cursor: pointer;
    margin-right: 8px;
    transition: all 0.2s ease;
}

.search-clear-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.hero-section.search-mode .search-clear-btn {
    display: flex;
}

.search-btn-hero {
    background: linear-gradient(135deg, #FF9500 0%, #FF7700 100%);
    border: none;
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.search-btn-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.search-btn-hero:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(255, 149, 0, 0.5), 0 0 30px rgba(255, 149, 0, 0.3);
}

.search-btn-hero:hover::before {
    left: 100%;
}

.search-btn-hero:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 15px rgba(255, 149, 0, 0.4);
}

.search-hints {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 0.85em;
    color: rgba(176, 196, 222, 0.5);
    opacity: 1;
    max-height: 30px;
    transition: all 0.3s ease;
}

/* Hide hints in search mode */
.hero-section.search-mode .search-hints {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
}

/* ================= REGION SELECTOR ================= */
.region-selector {
    position: relative;
    display: inline-flex;
}

.region-selector-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(200, 220, 245, 0.85);
    font-size: 0.85em;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.region-selector-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 149, 0, 0.3);
}

.region-dropdown.open + .region-selector-btn,
.region-selector:has(.region-dropdown.open) .region-selector-btn {
    background: rgba(255, 149, 0, 0.1);
    border-color: rgba(255, 149, 0, 0.5);
}

.region-flag {
    font-size: 1em;
    line-height: 1;
}

.region-name {
    font-weight: 500;
}

.region-arrow {
    width: 12px;
    height: 12px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.region-dropdown.open ~ .region-selector-btn .region-arrow,
.region-selector:has(.region-dropdown.open) .region-arrow {
    transform: rotate(180deg);
}

.region-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 140px;
    background: rgba(18, 24, 38, 0.98);
    border: 1px solid rgba(255, 149, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-8px);
    transition: all 0.2s ease;
    z-index: 200;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.region-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.region-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.region-option:hover {
    background: rgba(255, 149, 0, 0.12);
}

.region-option.active {
    background: rgba(255, 149, 0, 0.08);
}

.region-option-flag {
    font-size: 1.1em;
    line-height: 1;
}

.region-option-name {
    flex: 1;
    font-size: 0.9em;
    color: rgba(220, 230, 245, 0.9);
    font-weight: 500;
}

.region-option-check {
    font-size: 0.85em;
    color: #FF9500;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.region-option.active .region-option-check {
    opacity: 1;
}

/* Recent Searches */
.recent-searches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    opacity: 1;
    max-height: 80px;
    transition: all 0.3s ease;
}

.recent-searches:empty {
    display: none;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.85em;
    color: rgba(200, 220, 245, 0.7);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInScale 0.4s ease backwards;
}

.recent-item:nth-child(1) { animation-delay: 0.1s; }
.recent-item:nth-child(2) { animation-delay: 0.15s; }
.recent-item:nth-child(3) { animation-delay: 0.2s; }
.recent-item:nth-child(4) { animation-delay: 0.25s; }
.recent-item:nth-child(5) { animation-delay: 0.3s; }
.recent-item:nth-child(6) { animation-delay: 0.35s; }

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.recent-item:hover {
    background: rgba(255, 149, 0, 0.2);
    border-color: rgba(255, 149, 0, 0.4);
    color: #FF9500;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 149, 0, 0.2);
}

.recent-item:active {
    transform: translateY(0) scale(0.98);
}

.recent-icon {
    font-size: 0.9em;
    opacity: 0.7;
}

.suggestions-label {
    width: 100%;
    text-align: center;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(176, 196, 222, 0.5);
    margin-bottom: 4px;
}

.recent-item mark {
    background: rgba(255, 149, 0, 0.3);
    color: #FFD700;
    padding: 0 2px;
    border-radius: 3px;
}

.recent-item.suggestion-match {
    border-color: rgba(255, 149, 0, 0.25);
    background: rgba(255, 149, 0, 0.08);
}

.no-recent {
    color: rgba(176, 196, 222, 0.4);
    font-size: 0.85em;
    margin: 0;
}

/* Hide recent searches in search mode */
.hero-section.search-mode .recent-searches {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
}

/* Favorites Panel - compact collapsed view */
.favorites-panel {
    width: 100%;
    max-width: 450px;
    margin-top: 10px;
    background: rgba(16, 24, 36, 0.85);
    border: 1px solid rgba(255, 149, 0, 0.12);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.favorites-panel .favorites-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.favorites-panel .favorites-title {
    font-size: 0.75em;
    font-weight: 600;
    color: #ffd27f;
}

.favorites-panel .favorites-count {
    font-size: 0.65em;
    color: rgba(220, 230, 245, 0.6);
}

.favorites-panel .favorites-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.favorites-panel .favorite-card {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(22, 30, 44, 0.8);
    border: 1px solid rgba(255, 149, 0, 0.1);
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.favorites-panel .favorite-card:hover {
    border-color: rgba(255, 149, 0, 0.3);
    background: rgba(255, 149, 0, 0.05);
}

/* Drag handle for favorites */
.favorites-panel .favorite-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    font-size: 12px;
    color: rgba(200, 215, 235, 0.3);
    cursor: grab;
    transition: color 0.2s ease;
    letter-spacing: -2px;
    flex-shrink: 0;
}

.favorites-panel .favorite-drag-handle:hover {
    color: rgba(255, 180, 80, 0.7);
}

.favorites-panel .favorite-card:active .favorite-drag-handle {
    cursor: grabbing;
}

/* Dragging states */
.favorites-panel .favorite-card.dragging {
    opacity: 0.5;
    background: rgba(255, 149, 0, 0.1);
    border-color: rgba(255, 149, 0, 0.4);
}

.favorites-panel .favorite-card.drag-placeholder {
    background: rgba(255, 149, 0, 0.05);
    border: 2px dashed rgba(255, 149, 0, 0.25);
    pointer-events: none;
}

.favorites-panel .favorite-name {
    font-size: 0.8em;
    font-weight: 600;
    color: #eaf3ff;
}

.favorites-panel .favorite-meta {
    font-size: 0.65em;
    color: rgba(220, 230, 245, 0.6);
}

.favorites-panel .favorites-show-more {
    padding: 4px 8px;
    font-size: 0.7em;
    margin-top: 4px;
}

/* Expanded favorites panel - restore full styling */
.favorites-panel.expanded {
    max-width: 650px;
    padding: 12px 14px;
    border-radius: 12px;
    margin-top: 16px;
}

.favorites-panel.expanded .favorites-header {
    margin-bottom: 10px;
}

.favorites-panel.expanded .favorites-title {
    font-size: 0.85em;
}

.favorites-panel.expanded .favorites-count {
    font-size: 0.75em;
}

.favorites-panel.expanded .favorites-list {
    gap: 8px;
}

.favorites-panel.expanded .favorite-card {
    gap: 10px;
    border-radius: 10px;
    padding: 8px 10px;
}

.favorites-panel.expanded .favorite-name {
    font-size: 0.9em;
}

.favorites-panel.expanded .favorite-meta {
    font-size: 0.75em;
}

.favorites-panel.expanded .favorites-show-more {
    padding: 8px 12px;
    font-size: 0.8em;
    margin-top: 8px;
}

/* Favorites header actions */
.favorites-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.favorites-delete-all {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.favorites-delete-all:hover {
    background: rgba(220, 53, 69, 0.25);
    border-color: rgba(220, 53, 69, 0.5);
}

/* Confirm Modal */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.15s ease;
}

.confirm-modal {
    background: linear-gradient(145deg, rgba(22, 30, 44, 0.98), rgba(16, 24, 36, 0.98));
    border: 1px solid rgba(255, 149, 0, 0.2);
    border-radius: 16px;
    padding: 24px 28px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: scaleIn 0.2s ease;
}

.confirm-modal-icon {
    font-size: 2.5em;
    margin-bottom: 12px;
}

.confirm-modal-title {
    color: #eaf3ff;
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.confirm-modal-text {
    color: rgba(220, 230, 245, 0.7);
    font-size: 0.9em;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.confirm-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-modal-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-modal-btn.cancel {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(220, 230, 245, 0.8);
}

.confirm-modal-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.confirm-modal-btn.confirm {
    background: linear-gradient(135deg, #dc3545, #c82333);
    border: none;
    color: white;
}

.confirm-modal-btn.confirm:hover {
    background: linear-gradient(135deg, #e04555, #d32d3f);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.kbd-hint {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85em;
    color: rgba(200, 220, 245, 0.7);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

.server-hint {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hint-separator {
    opacity: 0.3;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 5px;
}

.results-count {
    color: rgba(176, 196, 222, 0.7);
    font-size: 0.9em;
}

.results-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(165deg, rgba(25, 32, 48, 0.92) 0%, rgba(16, 20, 32, 0.95) 100%);
    border: 1px solid rgba(74, 108, 247, 0.15);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.result-card:hover {
    border-color: rgba(74, 108, 247, 0.4);
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.result-avatar {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    border: 2px solid rgba(74, 108, 247, 0.3);
    object-fit: cover;
    background: rgba(20, 26, 38, 0.9);
}

.result-info {
    flex: 1;
    min-width: 0;
}

.result-name {
    font-size: 1.1em;
    font-weight: 600;
    color: #D0EAFF;
    margin-bottom: 4px;
}

.result-name .result-class-chip {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

.result-details {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85em;
    color: rgba(176, 196, 222, 0.7);
}

.result-class {
    display: flex;
    align-items: center;
    gap: 6px;
}

.result-class-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.result-level {
    color: rgba(255, 165, 0, 0.8);
}

.result-server {
    color: rgba(100, 180, 255, 0.8);
    font-size: 0.85em;
    padding-left: 4px;
    border-left: 1px solid rgba(100, 140, 200, 0.3);
    margin-left: 4px;
}

.result-il {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.result-il-value {
    font-size: 1.3em;
    font-weight: 700;
    color: #FF9500;
}

.result-il-label {
    font-size: 0.7em;
    color: rgba(176, 196, 222, 0.5);
    text-transform: uppercase;
}

/* Quick Stats */
.quick-stats {
    display: flex;
    gap: 20px;
    margin-top: 50px;
}

.quick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 30px;
    background: rgba(20, 28, 42, 0.6);
    border: 1px solid rgba(255, 149, 0, 0.15);
    border-radius: 12px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.quick-stat:hover {
    border-color: rgba(255, 149, 0, 0.4);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 149, 0, 0.15);
    background: rgba(25, 35, 55, 0.8);
}

.quick-stat:hover .quick-stat-icon {
    transform: scale(1.15);
    animation: quickStatPop 0.4s ease;
}

@keyframes quickStatPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1.15); }
}

.quick-stat-icon {
    font-size: 2em;
    transition: transform 0.3s ease;
}

.quick-stat-label {
    font-size: 0.85em;
    color: rgba(176, 196, 222, 0.7);
}

.quick-stat-link {
    color: #FF9500;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: color 0.2s ease;
}

.quick-stat-link:hover {
    color: #FF9500;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 40px;
    color: rgba(176, 196, 222, 0.6);
}

.no-results-icon {
    font-size: 3em;
    margin-bottom: 15px;
    opacity: 0.5;
}

.no-results-text {
    font-size: 1.1em;
    margin-bottom: 8px;
}

.no-results-hint {
    font-size: 0.9em;
    opacity: 0.7;
}

/* Loading State */
.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    color: rgba(176, 196, 222, 0.7);
}

/* Search Results Dropdown */
.search-results {
    width: 100%;
    max-width: 650px;
    margin-top: 20px;
    background: rgba(20, 28, 40, 0.98);
    border-radius: 16px;
    border: 1px solid rgba(255, 149, 0, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
}

.search-results.active {
    opacity: 1;
    max-height: 50vh;
    overflow-y: auto;
}

/* Expanded search results - smooth grow effect */
.search-results.expanded {
    max-width: 700px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Container doesn't scroll, only the list inside */
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 149, 0, 0.1);
    border-color: rgba(255, 149, 0, 0.35);
}

/* Overlay backdrop - dims background when expanded */
.search-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.search-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Results header (only in expanded mode) */
.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 149, 0, 0.2);
    background: rgba(15, 20, 30, 1);
    flex-shrink: 0; /* Don't shrink header */
}

/* Filters bar */
.search-filters {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(15, 20, 30, 1);
    border-bottom: 1px solid rgba(255, 149, 0, 0.15);
    flex-shrink: 0; /* Don't shrink filters */
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.filter-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(200, 220, 245, 0.7);
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.filter-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 149, 0, 0.3), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.filter-btn:hover::after {
    opacity: 0.5;
}

.filter-btn:active {
    transform: translateY(0) scale(0.97);
}

.filter-btn.active {
    background: rgba(255, 149, 0, 0.25);
    border-color: rgba(255, 149, 0, 0.5);
    color: #FF9500;
    box-shadow: 0 0 15px rgba(255, 149, 0, 0.2);
}

.filter-btn.active::after {
    opacity: 0.3;
}

.filter-btn .filter-icon {
    font-size: 1em;
    transition: transform 0.3s ease;
}

.filter-btn:hover .filter-icon {
    transform: scale(1.15);
}

.filter-select {
    padding: 8px 32px 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: rgba(200, 220, 245, 0.9);
    font-size: 0.85em;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FF9500' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: all 0.2s ease;
    min-width: 140px;
}

.filter-select:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

.filter-select:focus {
    border-color: rgba(255, 149, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.2);
}

.filter-select option {
    background: #1a2233;
    color: #E8F0FF;
    padding: 10px;
}

/* Custom Dropdown Styles */
.custom-dropdown {
    position: relative;
    display: inline-block;
    min-width: 140px;
}

.custom-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: rgba(200, 220, 245, 0.9);
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 32px;
    height: 32px;
    line-height: 1;
}

.custom-dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

.custom-dropdown.open .custom-dropdown-toggle {
    border-color: rgba(255, 149, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-dropdown-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #FF9500;
    transition: transform 0.2s ease;
}

.custom-dropdown.open .custom-dropdown-arrow {
    transform: rotate(180deg);
}

.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(26, 34, 51, 0.98);
    border: 1px solid rgba(255, 149, 0, 0.3);
    border-top: none;
    border-radius: 0 0 12px 12px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.2s ease;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.custom-dropdown.open .custom-dropdown-menu {
    max-height: 240px;
    overflow-y: auto;
    opacity: 1;
    transform: translateY(0);
}

.custom-dropdown-item {
    padding: 10px 14px;
    color: rgba(200, 220, 245, 0.8);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.85em;
}

.custom-dropdown-item:hover {
    background: rgba(255, 149, 0, 0.15);
    color: #FFD700;
}

.custom-dropdown-item.selected {
    background: rgba(255, 149, 0, 0.2);
    color: #FF9500;
}

.custom-dropdown-item:last-child {
    border-radius: 0 0 11px 11px;
}

/* Scrollbar for dropdown menu */
.custom-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.custom-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.custom-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 149, 0, 0.3);
    border-radius: 3px;
}

.custom-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 149, 0, 0.5);
}

.results-count {
    color: rgba(200, 220, 245, 0.8);
    font-size: 0.9em;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 100, 100, 0.1);
    border: 1px solid rgba(255, 100, 100, 0.25);
    color: rgba(255, 150, 150, 0.9);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.collapse-btn:hover {
    background: rgba(255, 100, 100, 0.2);
    border-color: rgba(255, 100, 100, 0.5);
    color: #ff6b6b;
    box-shadow: 0 0 12px rgba(255, 100, 100, 0.25);
}

.collapse-btn:active {
    transform: scale(0.97);
}

.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 30px;
    color: rgba(200, 220, 245, 0.8);
    animation: fadeIn 0.3s ease;
}

.search-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 149, 0, 0.2);
    border-top: 3px solid #FF9500;
    border-radius: 50%;
    animation: spinGlow 0.8s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
    box-shadow: 0 0 20px rgba(255, 149, 0, 0.3);
}

@keyframes spinGlow {
    0% { transform: rotate(0deg); box-shadow: 0 0 15px rgba(255, 149, 0, 0.3); }
    50% { box-shadow: 0 0 25px rgba(255, 149, 0, 0.5); }
    100% { transform: rotate(360deg); box-shadow: 0 0 15px rgba(255, 149, 0, 0.3); }
}

.search-loading span {
    animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 30px;
    color: rgba(200, 220, 245, 0.7);
    text-align: center;
    animation: fadeIn 0.4s ease;
}

.search-empty-icon {
    font-size: 2.5em;
    margin-bottom: 12px;
    opacity: 0.6;
    animation: emptyIconBounce 2s ease-in-out infinite;
}

@keyframes emptyIconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.search-empty-hint {
    font-size: 0.85em;
    opacity: 0.6;
    margin-top: 8px;
}

.search-results-list {
    padding: 8px 0;
    background: rgba(20, 28, 40, 1);
}

/* Scrollable results list in expanded mode */
.search-results.expanded .search-results-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
    min-height: 0; /* Required for flex scroll */
}

/* Custom scrollbar for expanded results */
.search-results.expanded .search-results-list::-webkit-scrollbar {
    width: 8px;
}

.search-results.expanded .search-results-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.search-results.expanded .search-results-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 149, 0, 0.6), rgba(255, 100, 0, 0.4));
    border-radius: 4px;
    border: 1px solid rgba(255, 149, 0, 0.3);
}

.search-results.expanded .search-results-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 149, 0, 0.8), rgba(255, 100, 0, 0.6));
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(255, 149, 0, 0.1);
    background: rgba(20, 28, 40, 1);
    overflow: hidden;
    position: relative;
    animation: slideInUp 0.3s ease backwards;
}

.search-result-item:nth-child(1) { animation-delay: 0.05s; }
.search-result-item:nth-child(2) { animation-delay: 0.1s; }
.search-result-item:nth-child(3) { animation-delay: 0.15s; }
.search-result-item:nth-child(4) { animation-delay: 0.2s; }
.search-result-item:nth-child(5) { animation-delay: 0.25s; }

.search-result-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(180deg, #FF9500, #FF7700);
    transform: scaleY(0);
    transition: transform 0.25s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: linear-gradient(90deg, rgba(255, 149, 0, 0.15) 0%, rgba(74, 108, 247, 0.1) 100%);
    transform: translateX(6px);
    box-shadow: -3px 0 15px rgba(255, 149, 0, 0.1);
}

.search-result-item:hover::before {
    transform: scaleY(1);
}

.result-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.fav-toggle {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(20, 28, 40, 0.7);
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.fav-toggle:hover {
    border-color: rgba(255, 149, 0, 0.4);
    color: #ffd27f;
    transform: translateY(-1px);
}

.fav-toggle.active {
    background: linear-gradient(145deg, rgba(255, 149, 0, 0.2), rgba(255, 200, 120, 0.2));
    border-color: rgba(255, 149, 0, 0.55);
    color: #ffd27f;
    box-shadow: 0 6px 16px rgba(255, 149, 0, 0.22);
}

.fav-icon {
    font-size: 1em;
    line-height: 1;
}

.result-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1a2233;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    border: 2px solid rgba(74, 108, 247, 0.3);
    overflow: hidden;
    flex-shrink: 0;
}

.result-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-avatar-icon {
    font-size: 1.4em;
}

.result-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* Allow text truncation */
    overflow: hidden;
}

.result-name {
    color: #E8F0FF;
    font-weight: 600;
    font-size: 1.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-details {
    display: flex;
    gap: 12px;
    font-size: 0.85em;
    color: rgba(200, 220, 245, 0.6);
    flex-wrap: wrap;
}

.result-class {
    color: rgba(200, 220, 245, 0.8);
}

.result-level {
    color: #FFD700;
}

.result-server {
    color: rgba(200, 220, 245, 0.5);
}

.result-guild {
    color: rgba(200, 220, 245, 0.5);
}

.result-power {
    color: #FFD700;
    font-weight: 600;
    font-size: 1.05em;
}

.result-race-badge {
    font-size: 0.75em;
    padding: 4px 0;
    border-radius: 12px;
    font-weight: 500;
    flex-shrink: 0;
    width: 75px;
    text-align: center;
}

.result-race-badge.elyos {
    background: rgba(100, 180, 255, 0.2);
    color: #64B4FF;
}

.result-race-badge.asmodian {
    background: rgba(180, 100, 255, 0.2);
    color: #B464FF;
}

.search-more-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    margin: 8px 12px 12px;
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.15) 0%, rgba(255, 119, 0, 0.1) 100%);
    border: 1px solid rgba(255, 149, 0, 0.3);
    border-radius: 10px;
    color: #FF9500;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideInUp 0.4s ease backwards;
    animation-delay: 0.3s;
    position: relative;
    overflow: hidden;
}

.search-more-hint::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 149, 0, 0.2) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-more-hint:hover {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.25) 0%, rgba(255, 119, 0, 0.2) 100%);
    border-color: rgba(255, 149, 0, 0.6);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 149, 0, 0.3), 0 0 20px rgba(255, 149, 0, 0.15);
}

.search-more-hint:hover::after {
    opacity: 1;
}

.search-more-hint .more-icon {
    font-size: 1.1em;
    transition: transform 0.3s ease;
}

.search-more-hint:hover .more-icon {
    transform: scale(1.2);
}

.search-more-hint .more-arrow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-more-hint:hover .more-arrow {
    transform: translateX(6px);
    animation: arrowBounce 0.6s ease infinite;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateX(6px); }
    50% { transform: translateX(10px); }
}

/* Search Suggestions */
.search-suggestions {
    padding: 8px 0;
}

.suggestions-header {
    padding: 8px 18px;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(200, 220, 245, 0.5);
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: rgba(200, 220, 245, 0.8);
}

.suggestion-item:hover {
    background: rgba(255, 149, 0, 0.15);
}

.suggestion-icon {
    opacity: 0.5;
}

/* Recent Searches */
.recent-searches {
    margin-top: 25px;
}

.recent-label {
    font-size: 0.9em;
    color: rgba(200, 220, 245, 0.6);
    margin-bottom: 12px;
    display: block;
}

#recentSearches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 149, 0, 0.1);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(200, 220, 245, 0.7);
    font-size: 0.9em;
}

.recent-item:hover {
    background: rgba(255, 149, 0, 0.2);
    color: #FF9500;
}

.no-recent {
    color: rgba(200, 220, 245, 0.4);
    font-size: 0.9em;
}

/* Notification */
.notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px) scale(0.9);
    padding: 14px 28px;
    border-radius: 12px;
    background: rgba(30, 40, 60, 0.98);
    border: 1px solid rgba(255, 149, 0, 0.3);
    color: #E8F0FF;
    font-size: 0.95em;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 9999;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.notification.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
    animation: notificationBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes notificationBounce {
    0% { transform: translateX(-50%) translateY(-20px) scale(0.9); }
    50% { transform: translateX(-50%) translateY(5px) scale(1.02); }
    100% { transform: translateX(-50%) translateY(0) scale(1); }
}

.notification.warning {
    border-color: rgba(255, 193, 7, 0.5);
    background: rgba(50, 40, 20, 0.95);
}

.notification.error {
    border-color: rgba(220, 53, 69, 0.5);
    background: rgba(50, 20, 20, 0.95);
}

/* ===== RESPONSIVE STYLES ===== */

/* Small height screens (1080p with browser UI, laptops) */
@media (max-height: 800px) {
    .hero-icon {
        font-size: 2.5em;
        margin-bottom: 8px;
    }
    
    .hero-title {
        font-size: 2.2em;
    }
    
    .hero-subtitle {
        font-size: 0.9em;
    }
    
    .hero-logo {
        margin-bottom: 16px;
    }
    
    .search-hints {
        margin-top: 8px;
        font-size: 0.8em;
    }
    
    .recent-searches {
        margin-top: 12px;
    }
}

/* Very small height (small laptops, tablets in landscape) */
@media (max-height: 750px) {
    .hero-icon {
        font-size: 2em;
        margin-bottom: 6px;
    }
    
    .hero-title {
        font-size: 1.8em;
    }
    
    .hero-subtitle {
        display: none;
    }
    
    .hero-logo {
        margin-bottom: 12px;
    }
    
    .search-hints {
        display: none;
    }
    
    .hero-section {
        padding: 24px 20px 60px;
        min-height: auto;
        justify-content: flex-start;
        padding-top: 10vh;
    }
    
    .recent-searches {
        margin-top: 10px;
    }
    
    /* Hide favorites list when it would overflow with footer */
    .favorites-panel:not(.expanded) .favorites-list-wrapper,
    .favorites-panel:not(.expanded) .favorites-search {
        display: none;
    }
    
    .favorites-panel:not(.expanded) .favorites-header {
        cursor: pointer;
        margin-bottom: 0;
    }
    
    /* Optimize search results for shorter screens */
    .search-results {
        margin-top: 12px;
        border-radius: 12px;
    }
    
    .search-results.active {
        max-height: 40vh;
    }
    
    .search-results.expanded {
        max-height: 60vh;
        border-radius: 14px;
    }
    
    .search-results-header {
        padding: 12px 16px;
    }
    
    .search-result-item {
        padding: 10px 14px;
        gap: 10px;
    }
    
    .search-result-icon {
        width: 36px;
        height: 36px;
    }
    
    .search-result-name {
        font-size: 0.9em;
    }
    
    .search-result-meta {
        font-size: 0.75em;
    }
}

/* Extra compact height (phones in landscape, very short screens) */
@media (max-height: 500px) {
    .hero-section {
        padding: 16px 16px 50px;
        padding-top: 5vh;
    }
    
    .hero-icon {
        font-size: 1.6em;
        margin-bottom: 4px;
    }
    
    .hero-title {
        font-size: 1.5em;
        letter-spacing: 2px;
    }
    
    .hero-logo {
        margin-bottom: 10px;
    }
    
    .search-input-wrapper {
        padding: 4px 4px 4px 14px;
    }
    
    .search-input-hero {
        font-size: 0.95em;
        padding: 8px 0;
    }
    
    .search-btn-hero {
        padding: 10px 18px;
        font-size: 0.9em;
    }
    
    .recent-searches {
        margin-top: 8px;
        max-height: 60px;
    }
    
    .recent-item {
        padding: 4px 10px;
        font-size: 0.8em;
    }
    
    .site-footer {
        height: 36px;
        font-size: 0.75em;
    }
    
    /* Compact favorites - hide list and search, keep header and view all button */
    .favorites-panel:not(.expanded) .favorites-list-wrapper,
    .favorites-panel:not(.expanded) .favorites-search {
        display: none;
    }
    
    .favorites-panel:not(.expanded) .favorites-header {
        cursor: pointer;
        margin-bottom: 0;
    }
    
    /* Fullscreen overlay when expanded on short screens */
    .favorites-panel.expanded {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        width: 100%;
        margin: 0;
        border-radius: 0;
        z-index: 999;
        background: rgba(13, 17, 23, 0.98);
        padding: 16px;
        overflow-y: auto;
        border: none;
        border-top: 1px solid rgba(255, 149, 0, 0.2);
    }
    
    .favorites-panel.expanded .favorites-header {
        position: sticky;
        top: -16px;
        background: rgba(13, 17, 23, 0.98);
        padding: 12px 0;
        margin: -16px -16px 12px -16px;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255, 149, 0, 0.15);
    }
    
    .favorites-panel.expanded .favorites-list {
        max-height: none;
    }
}

/* Ultra compact height (very short landscape phones) */
@media (max-height: 400px) {
    .hero-section {
        padding: 10px 14px 40px;
        padding-top: 2vh;
        margin-top: 50px; /* Smaller navbar on ultra compact */
    }
    
    .hero-icon {
        font-size: 1.3em;
        margin-bottom: 2px;
    }
    
    .hero-title {
        font-size: 1.3em;
    }
    
    .hero-logo {
        margin-bottom: 8px;
    }
    
    .search-input-hero {
        font-size: 0.9em;
        padding: 6px 0;
    }
    
    .search-btn-hero {
        padding: 8px 14px;
        font-size: 0.85em;
    }
    
    .recent-searches {
        display: none;
    }
    
    /* Keep compact favorites behavior from 500px breakpoint */
    .favorites-panel.expanded {
        top: 50px; /* Match smaller navbar */
    }
    
    .site-footer {
        height: 32px;
        font-size: 0.7em;
        padding: 0 10px;
    }
    
    .main-nav {
        height: 50px;
    }
    
    .home-page {
        padding-top: 50px;
    }
    
    #searchView {
        min-height: calc(100vh - 50px);
    }
}

/* Landscape mobile (small height AND small width) */
@media (max-height: 500px) and (max-width: 900px) {
    .hero-section {
        justify-content: center;
        padding-top: 0;
    }
    
    .hero-logo {
        flex-direction: row;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .hero-icon {
        margin-bottom: 0;
    }
    
    .hero-title {
        margin: 0;
    }
    
    .search-container-hero {
        max-width: 500px;
    }
}

/* Large tablets and small laptops */
@media (max-width: 1200px) {
    .nav-container {
        padding: 0 16px;
    }
    
    .nav-links {
        gap: 6px;
    }
    
    .nav-link {
        min-width: 100px;
        padding: 8px 16px;
        font-size: 0.84em;
    }
    
    .nav-right {
        margin-left: 16px;
    }
    
    .nav-status .status-text {
        display: none;
    }
    
    .nav-status {
        padding: 6px 8px;
    }
    
    .logo-text {
        font-size: 1.15em;
    }
    
    .logo-tagline {
        font-size: 0.6em;
    }
}

/* Tablet and below */
@media (max-width: 1024px) {
    .nav-links {
        gap: 4px;
    }
    
    .nav-link {
        min-width: 80px;
        padding: 8px 12px;
        font-size: 0.8em;
    }
    
    .coming-soon-badge {
        font-size: 0.55em;
        padding: 2px 5px;
        top: -6px;
        right: -4px;
    }
    
    .nav-right {
        gap: 10px;
        margin-left: 12px;
    }
    
    .nav-status {
        padding: 6px 8px;
        font-size: 0.7em;
    }
    
    .nav-status .status-text {
        display: none;
    }
    
    .discord-btn {
        width: 36px;
        height: 36px;
    }
    
    .discord-icon {
        width: 18px;
        height: 18px;
    }
    
    .logo-text {
        font-size: 1.1em;
    }
    
    .logo-tagline {
        display: none;
    }
    
    .logo-icon-wrapper {
        width: 36px;
        height: 36px;
    }
}

/* Medium tablets - transition zone */
@media (max-width: 900px) {
    .nav-link {
        min-width: 70px;
        padding: 8px 10px;
        font-size: 0.78em;
    }
    
    .nav-links {
        gap: 3px;
    }
    
    .nav-right {
        margin-left: 10px;
    }
    
    .nav-right .nav-link {
        display: none;
    }
    
    .nav-status {
        display: none;
    }
    
    .discord-btn {
        width: 38px;
        height: 38px;
    }
    
    .discord-icon {
        width: 19px;
        height: 19px;
    }
    
    .logo-icon-wrapper {
        width: 34px;
        height: 34px;
    }
    
    .logo-text {
        font-size: 1.05em;
    }
}

/* ===== HAMBURGER MENU TOGGLE ===== */
.nav-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(22, 30, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
}

.nav-menu-toggle:hover {
    background: rgba(255, 149, 0, 0.15);
    border-color: rgba(255, 149, 0, 0.3);
}

.nav-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: rgba(200, 220, 245, 0.8);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.nav-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .main-nav {
        padding: 0;
        height: 54px;
    }
    
    .nav-container {
        padding: 0 12px;
        position: relative;
    }
    
    .nav-brand {
        flex: 1;
        min-width: 0;
    }
    
    .nav-logo {
        gap: 10px;
    }
    
    /* Show hamburger menu button */
    .nav-menu-toggle {
        display: flex;
        flex-shrink: 0;
        margin-left: 12px;
    }
    
    /* Hide nav-links by default, show as dropdown */
    .nav-links {
        position: fixed;
        top: 54px;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, rgba(12, 16, 24, 0.98) 0%, rgba(8, 12, 20, 0.99) 100%);
        border-bottom: 1px solid rgba(255, 149, 0, 0.15);
        flex-direction: column;
        padding: 12px;
        gap: 6px;
        display: none;
        z-index: 999;
        max-height: calc(100vh - 54px);
        max-height: calc(100dvh - 54px);
        overflow-y: auto;
        backdrop-filter: blur(20px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }
    
    .nav-links.mobile-open {
        display: flex;
        animation: slideDown 0.25s ease;
    }
    
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .nav-link {
        width: 100%;
        min-width: auto;
        padding: 14px 16px;
        font-size: 0.92em;
        justify-content: flex-start;
        border-radius: 10px;
    }
    
    .nav-link span:not(.nav-icon):not(.coming-soon-badge) {
        display: inline;
    }
    
    .nav-icon {
        display: none;
    }
    
    .coming-soon-badge {
        position: static;
        margin-left: auto;
        font-size: 0.65em;
    }
    
    .nav-status {
        display: none;
    }
    
    .nav-right {
        display: none;
    }

    /* Mobile Discord button - show in mobile menu */
    .mobile-discord {
        display: none;
    }

    .nav-links.mobile-open .mobile-discord,
    .nav-links .mobile-discord {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 14px 16px;
        margin-top: 10px;
        border-radius: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding-top: 18px;
    }

    /* Mobile credit in nav menu */
    .mobile-credit {
        display: none;
        width: 100%;
        text-align: center;
        padding: 14px 16px;
        margin-top: 6px;
        font-size: 0.85em;
        background: linear-gradient(90deg, #ff6b9d, #ff9500, #ff6b9d);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: footerGradient 3s ease infinite;
    }

    .nav-links.mobile-open .mobile-credit {
        display: block;
    }

    /* Hide footer credit on mobile - shown in nav instead */
    .footer-credit {
        display: none;
    }
    
    .logo-text {
        font-size: 1.1em;
    }
    
    .logo-tagline {
        display: none;
    }
    
    .logo-icon-wrapper {
        width: 34px;
        height: 34px;
    }
    
    .logo-icon {
        width: 24px;
        height: 24px;
    }
    
    .home-page {
        padding-top: 54px;
    }
    
    #searchView {
        min-height: calc(100vh - 54px);
        min-height: calc(100dvh - 54px);
        height: auto;
    }
    
    .hero-section {
        padding: 20px 12px 90px;
        min-height: calc(100vh - 54px);
        min-height: calc(100dvh - 54px);
    }
    
    .hero-logo {
        margin-bottom: 16px;
    }
    
    .hero-icon {
        font-size: 2.2em;
    }
    
    .hero-title {
        font-size: 1.6em;
    }
    
    .hero-subtitle {
        font-size: 0.8em;
    }
    
    .search-container-hero {
        width: 100%;
        max-width: 100%;
    }
    
    .search-input-wrapper {
        padding: 4px 4px 4px 10px;
    }
    
    .search-input-hero {
        font-size: 0.9em;
        padding: 10px 0;
    }
    
    .search-btn-hero {
        padding: 10px 14px;
        font-size: 0.8em;
    }
    
    .search-hints {
        font-size: 0.7em;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .search-results {
        max-height: 50vh;
    }
    
    .search-results.expanded {
        max-height: 70vh;
    }
    
    /* Favorites panel mobile */
    .favorites-panel {
        margin-top: 12px;
        padding: 12px;
    }
    
    .favorites-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .favorite-card {
        padding: 10px;
    }
    
    .favorites-panel.expanded {
        width: calc(100% - 20px);
        top: 55px;
        bottom: 54px;
    }
    
    .favorites-panel.expanded .favorites-list-wrapper {
        flex: 1;
        overflow-y: auto;
    }
    
    .hero-section.search-mode {
        padding-top: 28px;
    }
}

@media (max-width: 480px) {
    .main-nav {
        height: 50px;
    }
    
    .nav-container {
        padding: 0 10px;
    }
    
    .nav-menu-toggle {
        width: 40px;
        height: 40px;
        padding: 9px;
        margin-left: 8px;
    }
    
    .nav-links {
        top: 50px;
        padding: 10px;
        max-height: calc(100vh - 50px);
        max-height: calc(100dvh - 50px);
    }
    
    .nav-link {
        padding: 12px 14px;
        font-size: 0.88em;
    }
    
    .home-page {
        padding-top: 50px;
    }
    
    #searchView {
        min-height: calc(100vh - 50px);
        min-height: calc(100dvh - 50px);
        height: auto;
    }
    
    .logo-icon-wrapper {
        width: 32px;
        height: 32px;
    }
    
    .logo-icon {
        width: 22px;
        height: 22px;
    }
    
    .logo-text {
        font-size: 1em;
    }
    
    .nav-logo {
        gap: 8px;
    }
    
    .hero-section {
        padding: 18px 10px 80px;
        min-height: calc(100vh - 46px);
    }
    
    .hero-logo {
        margin-bottom: 14px;
    }
    
    .hero-icon {
        font-size: 1.8em;
    }
    
    .hero-title {
        font-size: 1.4em;
    }
    
    .hero-subtitle {
        font-size: 0.75em;
    }
    
    .search-input-hero {
        font-size: 0.85em;
        padding: 8px 0;
    }
    
    .search-btn-hero {
        padding: 8px 12px;
        font-size: 0.75em;
    }
    
    .search-prefix {
        font-size: 0.85em;
    }
    
    .search-hints {
        display: flex;
        justify-content: center;
    }
    
    .search-hints .kbd-hint,
    .search-hints .hint-text,
    .search-hints .hint-separator {
        display: none;
    }
    
    .search-hints .region-selector {
        display: block;
    }
    
    .result-card {
        padding: 10px;
        gap: 8px;
    }
    
    .result-avatar {
        width: 38px;
        height: 38px;
    }
    
    .result-name {
        font-size: 0.9em;
    }
    
    .result-il-value {
        font-size: 0.95em;
    }
    
    /* Favorites on small screens */
    .favorites-panel {
        padding: 10px;
    }
    
    .favorites-header {
        margin-bottom: 8px;
    }
    
    .favorites-title {
        font-size: 0.85em;
    }
    
    .favorite-card {
        padding: 8px;
    }
    
    .favorite-name {
        font-size: 0.85em;
    }
    
    .favorite-meta {
        font-size: 0.7em;
    }
    
    .favorites-show-more {
        padding: 8px 12px;
        font-size: 0.75em;
    }
    
    .favorites-panel.expanded {
        top: 50px;
        bottom: 50px;
    }
    
    .favorites-search-input {
        font-size: 0.8em;
    }
}

/* ===== GUILD PAGE ADJUSTMENTS ===== */
.guild-page {
    padding-top: 0;
}

.guild-page .guild-layout {
    max-width: 1400px;
    width: min(1400px, calc(100% - 48px));
    margin: 0 auto;
    padding: 88px 0 56px;
}

/* ===== RESPONSIVE NAV ===== */
/* Guild page specific mobile adjustments */
@media (max-width: 768px) {
    .guild-page .guild-layout {
        width: min(1400px, calc(100% - 24px));
        padding-top: 60px;
        padding-bottom: 48px;
    }
    
    /* Coming soon card responsive */
    .coming-soon-card {
        padding: 24px 20px !important;
        margin: 0 12px !important;
    }
    
    .coming-soon-card h1 {
        font-size: 1.5em !important;
    }
    
    .coming-soon-card p {
        font-size: 0.9em !important;
    }
    
    .coming-soon-card > div:last-child {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .coming-soon-card .btn-refresh {
        width: 100% !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .guild-page .guild-layout {
        width: 100%;
        padding: 50px 8px 48px;
    }
    
    .coming-soon-card {
        padding: 20px 16px !important;
        margin: 0 8px !important;
        border-radius: 12px !important;
    }
    
    .coming-soon-card > div:first-child {
        font-size: 0.95em !important;
    }
    
    .coming-soon-card h1 {
        font-size: 1.3em !important;
        margin-bottom: 10px !important;
    }
    
    .coming-soon-card p {
        font-size: 0.85em !important;
        margin-bottom: 14px !important;
    }
}

/* Very small phones (iPhone SE, Galaxy S mini, etc.) */
@media (max-width: 360px) {
    .main-nav {
        height: 46px;
    }
    
    .nav-container {
        padding: 0 8px;
    }
    
    .nav-menu-toggle {
        width: 36px;
        height: 36px;
        padding: 8px;
        margin-left: 6px;
    }
    
    .nav-links {
        top: 46px;
        padding: 8px;
        max-height: calc(100vh - 46px);
        max-height: calc(100dvh - 46px);
    }
    
    .nav-link {
        padding: 10px 12px;
        font-size: 0.84em;
    }
    
    .home-page {
        padding-top: 46px;
    }
    
    #searchView {
        min-height: calc(100vh - 46px);
        min-height: calc(100dvh - 46px);
    }
    
    .logo-icon-wrapper {
        width: 28px;
        height: 28px;
    }
    
    .logo-icon {
        width: 18px;
        height: 18px;
    }
    
    .logo-text {
        font-size: 0.9em;
    }
    
    .nav-logo {
        gap: 6px;
    }
    
    .hero-section {
        padding: 14px 8px 70px;
        min-height: calc(100vh - 44px);
    }
    
    .hero-icon {
        font-size: 1.5em;
    }
    
    .hero-title {
        font-size: 1.2em;
    }
    
    .hero-subtitle {
        font-size: 0.7em;
    }
    
    .search-input-wrapper {
        padding: 3px 3px 3px 8px;
    }
    
    .search-input-hero {
        font-size: 0.8em;
        padding: 7px 0;
    }
    
    .search-btn-hero {
        padding: 7px 10px;
        font-size: 0.7em;
    }
    
    .search-prefix {
        font-size: 0.75em;
    }
    
    .result-card {
        padding: 8px;
        gap: 6px;
    }
    
    .result-avatar {
        width: 32px;
        height: 32px;
    }
    
    .result-name {
        font-size: 0.8em;
    }
    
    .result-il-value {
        font-size: 0.85em;
    }
    
    .site-footer {
        height: 36px;
        font-size: 0.7em;
        gap: 6px;
    }
    
    .favorites-panel {
        padding: 8px;
    }
    
    .favorites-title {
        font-size: 0.8em;
    }
    
    .favorite-card {
        padding: 6px;
    }
    
    .favorite-name {
        font-size: 0.8em;
    }
    
    .favorite-meta {
        font-size: 0.65em;
    }
    
    .guild-page .guild-layout {
        padding: 48px 6px 44px;
    }
    
    .coming-soon-card {
        padding: 16px 12px !important;
        margin: 0 6px !important;
    }
    
    .coming-soon-card h1 {
        font-size: 1.1em !important;
    }
    
    .coming-soon-card p {
        font-size: 0.8em !important;
    }
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .main-nav {
        height: 44px;
    }
    
    .home-page {
        padding-top: 44px;
    }
    
    #searchView {
        min-height: calc(100vh - 44px);
        min-height: calc(100dvh - 44px);
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
    }
    
    .hero-section {
        padding: 10px 24px 40px;
        min-height: calc(100vh - 44px - 32px);
        min-height: calc(100dvh - 44px - 32px);
        height: auto;
        flex-direction: column !important;
        flex-wrap: nowrap;
        justify-content: center !important;
        align-items: center !important;
        gap: 16px;
        overflow: visible;
    }
    
    .hero-content {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 32px;
        max-width: 100%;
        width: auto !important;
        flex-wrap: nowrap;
        margin: 0 auto;
    }
    
    .hero-logo {
        margin-bottom: 0 !important;
        flex-shrink: 0;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px;
        text-align: left;
        width: auto !important;
    }
    
    .hero-icon {
        width: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        flex-shrink: 0;
        display: block !important;
    }
    
    .hero-title {
        font-size: 1.3em !important;
        margin: 0 !important;
        white-space: nowrap;
    }
    
    .hero-subtitle {
        display: none !important;
    }
    
    .search-container-hero {
        max-width: 350px;
        flex: 0 1 auto;
        min-width: 250px;
        width: auto !important;
    }
    
    .search-input-wrapper {
        padding: 3px 3px 3px 10px;
    }
    
    .search-input-hero {
        font-size: 0.85em;
        padding: 6px 0;
    }
    
    .search-btn-hero {
        padding: 8px 14px;
        font-size: 0.8em;
    }
    
    .search-hints {
        display: none !important;
    }
    
    .recent-searches {
        display: none !important;
    }
    
    .search-results {
        max-height: calc(100vh - 150px);
        max-height: calc(100dvh - 150px);
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
    }
    
    .site-footer {
        height: 32px;
        font-size: 0.7em;
        padding: 0 10px;
    }
    
    .favorites-panel {
        display: none !important;
    }
    
    .guild-page .guild-layout {
        padding-top: 50px;
        padding-bottom: 36px;
    }
    
    /* Rift widget compact in landscape */
    .rift-floating-widget {
        bottom: 36px;
    }
    
    /* Hide floating logo and daevanion summary in landscape */
    .modal-floating-logo,
    .daevanion-effects-summary {
        display: none !important;
    }
}

/* Extra short landscape (phones with very small height) */
@media (max-height: 400px) and (orientation: landscape) {
    .main-nav {
        height: 40px;
    }
    
    .home-page {
        padding-top: 40px;
    }
    
    #searchView {
        min-height: calc(100vh - 40px);
        min-height: calc(100dvh - 40px);
    }
    
    .hero-section {
        padding: 6px 20px 32px;
        min-height: calc(100vh - 40px - 28px);
        min-height: calc(100dvh - 40px - 28px);
    }
    
    .hero-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    .hero-title {
        font-size: 1.1em !important;
    }
    
    .search-container-hero {
        max-width: 320px;
        min-width: 220px;
    }
    
    .search-input-hero {
        font-size: 0.8em;
        padding: 5px 0;
    }
    
    .search-btn-hero {
        padding: 6px 10px;
        font-size: 0.75em;
    }
    
    .site-footer {
        height: 28px;
        font-size: 0.65em;
    }
    
    .rift-floating-widget {
        bottom: 32px;
    }
}

/* Ultra short landscape (very cramped screens - hide logo) */
@media (max-height: 320px) and (orientation: landscape) {
    .hero-section {
        padding: 4px 16px 24px;
        min-height: calc(100vh - 40px - 24px);
        min-height: calc(100dvh - 40px - 24px);
    }
    
    /* Hide hero logo on very cramped screens */
    .hero-logo {
        display: none !important;
    }
    
    .search-container-hero {
        max-width: 450px;
        min-width: 280px;
    }
    
    .search-input-hero {
        font-size: 0.85em;
        padding: 6px 0;
    }
    
    .search-btn-hero {
        padding: 8px 14px;
        font-size: 0.8em;
    }
    
    .site-footer {
        height: 24px;
        font-size: 0.6em;
    }
    
    .rift-floating-widget {
        display: none;
    }
}

/* Wide landscape (tablets in landscape) */
@media (max-height: 500px) and (min-width: 900px) and (orientation: landscape) {
    .hero-content {
        gap: 40px;
    }
    
    .search-container-hero {
        max-width: 450px;
    }
    
    .hero-icon {
        width: 56px;
        height: 56px;
    }
    
    .hero-title {
        font-size: 1.4em;
    }
    
    /* Show logo on wider tablets even in landscape */
    .hero-logo {
        display: flex;
    }
}