/* Responsive CSS for 1544x720 and smaller - Compact UI */
/* This file optimizes the UI for medium to small desktop screens */

/* ULTRA COMPACT MODE for very small screens (mobile landscape 807x389) */
@media (max-width: 850px) and (min-width: 400px) and (max-height: 450px) {

    /* ===== MINIMAP ===== */
    .minimap-container {
        top: 8px !important;
        right: 8px !important;
    }


    /* Minimap Buttons - Extra Small */
    .minimap-button {
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
    }


    .chat-toggle.minimap-button {
        bottom: -4px !important;
        left: 20px !important;
        font-size: 9px !important;
    }

    .chat-toggle.minimap-button img {
        width: 12px !important;
        height: 12px !important;
    }

    .settings-toggle.minimap-button {
        bottom: -4px !important;
        left: 44px !important;
        font-size: 9px !important;
    }

    .settings-toggle.minimap-button img {
        width: 12px !important;
        height: 12px !important;
    }

    .guide-toggle.minimap-button {
        display: none !important;
        /* Hide old guide button */
    }

    /* Menu Dropdown - Mobile */
    .menu-dropdown-container {
        z-index: 99999 !important;
    }

    .menu-dropdown-toggle.minimap-button {
        width: 32px !important;
        height: 32px !important;
        font-size: 8px !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .menu-dropdown-toggle.minimap-button:hover {
        background: transparent !important;
        box-shadow: none !important;
    }

    .menu-dropdown {
        right: 0 !important;
        left: auto !important;
        padding: 3px !important;
        gap: 3px !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    .menu-dropdown-item {
        width: 14px !important;
        height: 14px !important;
        padding: 0 !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3) !important;
    }

    .menu-item-icon {
        font-size: 8px !important;
    }

    .zone-btn.minimap-button {
        top: -8px !important;
        right: -4px !important;
        font-size: 7px !important;
        min-width: 32px !important;
        height: 16px !important;
        padding: 0 4px !important;
    }

    /* ===== LEVEL BAR DROPDOWN ===== */
    .level-bar-toggle {
        width: 32px !important;
        height: 32px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        top: 8px !important;
        left: 8px !important;
    }

    .dropdown-arrow {
        font-size: 8px !important;
    }

    .level-bar-dropdown {
        top: 8px !important;
        left: 45px !important;
    }

    .player-name,
    .level-text {
        font-size: 11px !important;
    }

    .player-count {
        font-size: 9px !important;
    }

    .logout-btn {
        padding: 5px 12px !important;
        font-size: 10px !important;
    }

    /* ===== TIME & GOLD DISPLAY ===== */
    #time-indicator {
        top: 70px !important;
        left: 6px !important;
        min-width: 50px !important;
        height: 22px !important;
        padding: 3px 6px !important;
        font-size: 9px !important;
        border-radius: 6px !important;
    }

    #gold-display {
        top: 92px !important;
        /* 70px + 22px = 92px */
        left: 6px !important;
        min-width: 50px !important;
        height: 22px !important;
        padding: 3px 6px !important;
        border-radius: 6px !important;
    }

    #ruby-display {
        top: 114px !important;
        /* 92px + 22px = 114px */
        left: 6px !important;
        min-width: 50px !important;
        height: 22px !important;
        padding: 3px 6px !important;
        border-radius: 6px !important;
    }

    .gold-display span {
        font-size: 8px !important;
    }

    .gold-display.minimap-button img {
        width: 9px !important;
        height: 9px !important;
    }

    /* ===== NOTIFICATION CONTAINER ===== */
    #notification-container {
        top: 120px !important;
        left: 6px !important;
        max-width: 160px !important;
        font-size: 10px !important;
    }

    /* Commented out to prevent conflict with mobile.css custom skill wheel coordinate maps
    .bottom-actions {
        bottom: 4px !important;
        right: 8px !important;
        gap: 6px !important;
    }

    .attack-btn {
        width: 65px !important;
        height: 65px !important;
        font-size: 22px !important;
        touch-action: manipulation !important;
        transition: transform 0.1s ease !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .attack-btn img {
        width: 40px !important;
        height: 40px !important;
    }

    .auto-attack-toggle {
        width: 45px !important;
        height: 45px !important;
        touch-action: manipulation !important;
        transition: transform 0.1s ease !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .auto-attack-toggle img {
        width: 26px !important;
        height: 26px !important;
    }

    .soru-skill-slot {
        width: 45px !important;
        height: 45px !important;
        touch-action: manipulation !important;
        transition: transform 0.1s ease !important;
    }

    .soru-skill-slot .skill-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .skill-bar-container {
        bottom: 8px !important;
        padding: 4px 8px !important;
        gap: 4px !important;
        border-radius: 10px !important;
        border-width: 1px !important;
    }

    .skill-slot {
        width: 36px !important;
        height: 36px !important;
        border-radius: 6px !important;
        border-width: 1px !important;
    }

    .skill-icon,
    .skill-icon-emoji {
        width: 26px !important;
        height: 26px !important;
        font-size: 20px !important;
    }

    .skill-hotkey {
        font-size: 6px !important;
        padding: 0px 2px !important;
    }

    .skill-cooldown-timer {
        font-size: 10px !important;
    }

    .skill-cooldown-ring {
        width: 32px !important;
        height: 32px !important;
    }
    */

    .skill-name-tooltip {
        bottom: 42px !important;
        font-size: 8px !important;
        padding: 4px 6px !important;
    }

    /* ===== EXPERIENCE BAR ===== */
    .exp-bar-container {
        padding: 0 !important;
    }

    .exp-bar-bg {
        height: 2px !important;
    }

    /* ===== AUTH SCREEN - Ultra Compact Landscape ===== */
    /* Bỏ scroll, chỉ làm nhỏ form */
    #auth-screen {
        overflow: hidden !important;
        align-items: center !important;
    }

    .auth-container {
        margin: 0.2rem auto !important;
        padding: 0.5rem !important;
        margin-top: 0 !important;
        max-width: 85vw !important;
        max-height: 95vh !important;
        overflow-y: auto !important;
    }

    .auth-logo {
        margin-bottom: 0.4rem !important;
    }

    .auth-logo img {
        max-width: 140px !important;
        width: 45% !important;
    }

    .auth-container h1 {
        font-size: 1rem !important;
    }

    .auth-form h2 {
        font-size: 1rem !important;
        margin-bottom: 0.4rem !important;
    }

    /* Input, button và server-select */
    .auth-form input[type="text"],
    .auth-form input[type="password"],
    .auth-form input[type="email"] {
        width: 100% !important;
        height: 38px !important;
        padding: 5px 10px !important;
        font-size: 14px !important;
        margin-bottom: 0.5rem !important;
        background: url('../assets/icon/ui/input.webp') no-repeat center !important;
        background-size: 100% 100% !important;
        background-color: transparent !important;
        box-sizing: border-box !important;
        line-height: normal !important;
    }

    .auth-form input[type="text"]:focus,
    .auth-form input[type="password"]:focus,
    .auth-form input[type="email"]:focus {
        background: url('../assets/icon/ui/inputhover.webp') no-repeat center !important;
        background-size: 100% 100% !important;
    }

    .auth-form button {
        width: 100% !important;
        height: 38px !important;
        padding: 5px 7px !important;
        font-size: 14px !important;
        min-height: 38px !important;
        background: url('../assets/icon/ui/button.webp') no-repeat center !important;
        background-size: 100% 100% !important;
        background-color: transparent !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
    }

    .server-select {
        width: 100% !important;
        height: 38px !important;
        padding: 5px 10px !important;
        padding-right: 28px !important;
        font-size: 14px !important;
        background-image: url('../assets/icon/ui/input.webp'), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat, no-repeat !important;
        background-position: center, right 8px center !important;
        background-size: 100% 100%, 8px 8px !important;
        box-sizing: border-box !important;
    }

    .server-select:focus {
        background-image: url('../assets/icon/ui/inputhover.webp'), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
        background-size: 100% 100%, 8px 8px !important;
    }

    .server-selection label {
        font-size: 0.8rem !important;
        margin-bottom: 0.2rem !important;
    }

    .auth-form p {
        font-size: 0.8rem !important;
        margin-top: 0.2rem !important;
    }

    .auth-form a {
        font-size: 0.8rem !important;
    }

    .remember-me {
        font-size: 0.8rem !important;
        margin-bottom: 0.2rem !important;
    }

    .remember-me label {
        font-size: 0.8rem !important;
    }

    /* Video background is handled by base style to support infinite movement */

    #auth-screen,
    #loading-screen {
        overflow: hidden !important;
    }

    /* ===== INVENTORY PANEL ===== */
    .inventory-panel {
        max-width: 500px !important;
        max-height: 340px !important;
        border-radius: 10px !important;
    }

    .inventory-header {
        padding: 10px 12px !important;
        border-radius: 10px 10px 0 0 !important;
    }

    .inventory-header h3 {
        font-size: 0.95rem !important;
    }

    .inventory-tabs {
        gap: 4px !important;
    }

    .inventory-tab {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 5px !important;
    }

    .close-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 13px !important;
    }

    .inventory-content {
        padding: 12px !important;
        gap: 12px !important;
    }

    /* Equipment Section */
    .equipment-section {
        padding: 8px !important;
        border-radius: 8px !important;
    }

    .equipment-section h4 {
        font-size: 0.9rem !important;
        margin-bottom: 10px !important;
    }

    .character-display {
        padding: 8px !important;
        gap: 4px !important;
        margin: 4px 0 !important;
    }

    .character-display h4 {
        font-size: 0.65rem !important;
    }

    .character-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    .character-name {
        font-size: 0.6rem !important;
    }

    .equipment-grid {
        gap: 4px !important;
    }

    .equipment-slot {
        width: 100% !important;
        min-height: 52px !important;
        padding: 2px !important;
        border-radius: 0 !important;
        border: none !important;
        aspect-ratio: 1 !important;
        box-sizing: border-box !important;
    }

    .slot-label {
        display: none !important;
    }

    .slot-content {
        min-height: 0 !important;
        gap: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .slot-content img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 4px !important;
    }

    .slot-content .item-name {
        display: none !important;
    }

    .empty-slot {
        display: none !important;
    }

    /* Inventory Grid */
    .inventory-grid {
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 2px !important;
        padding: 8px !important;
        max-height: 220px !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .inventory-slot {
        min-height: 36px !important;
        padding: 1px !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .inventory-slot img {
        max-width: 24px !important;
        max-height: 24px !important;
    }

    .inventory-slot .item-count {
        font-size: 14px !important;
        padding: 1px 4px !important;
    }

    .inventory-slot .rarity-indicator {
        width: 4px !important;
        height: 4px !important;
    }

    .equipped-indicator {
        font-size: 7px !important;
        padding: 0px 3px !important;
    }

    .enhancement-level {
        font-size: 7px !important;
        padding: 0px 3px !important;
    }

    .slot-content .equipment-enhancement-badge {
        font-size: 7px !important;
        padding: 0px 3px !important;
        top: -22px !important;
        left: -6px !important;
    }

    /* Weight Display */
    .inventory-header-with-weight h4 {
        font-size: 0.9rem !important;
    }

    .weight-info {
        font-size: 0.7rem !important;
    }

    .weight-bar {
        width: 100px !important;
        height: 4px !important;
    }

    /* Stats Tab */
    .inventory-tab-content[data-tab-content="stats"] .stats-grid {
        gap: 4px !important;
    }

    .inventory-tab-content[data-tab-content="stats"] .stat-item {
        padding: 5px 6px !important;
        gap: 4px !important;
    }

    .inventory-tab-content[data-tab-content="stats"] .stat-icon {
        font-size: 14px !important;
        width: 24px !important;
        height: 24px !important;
    }

    .inventory-tab-content[data-tab-content="stats"] .stat-name {
        font-size: 8px !important;
    }

    .inventory-tab-content[data-tab-content="stats"] .stat-value {
        font-size: 10px !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }



    /* Tooltip */
    .item-tooltip {
        max-width: 180px !important;
        max-height: 260px !important;
        padding: 8px !important;
        border-radius: 6px !important;
    }

    .item-name {
        font-size: 0.75rem !important;
    }

    .item-type {
        font-size: 0.6rem !important;
    }

    .item-description {
        font-size: 0.65rem !important;
        padding: 4px !important;
    }

    .item-weight,
    .item-stats {
        font-size: 0.6rem !important;
        padding: 4px !important;
    }

    .item-actions {
        gap: 4px !important;
        margin-top: 4px !important;
    }

    .item-actions button {
        padding: 4px 7px !important;
        font-size: 0.6rem !important;
        border-radius: 3px !important;
    }

    /* Confirmation Modal */
    .confirm-modal-content,
    .quantity-modal-content {
        max-width: 280px !important;
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .confirm-modal-icon {
        font-size: 36px !important;
        margin-bottom: 10px !important;
    }

    .confirm-modal-title {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }

    .confirm-modal-message {
        font-size: 0.75rem !important;
        margin-bottom: 16px !important;
    }

    .confirm-btn {
        padding: 7px 16px !important;
        font-size: 0.75rem !important;
        border-radius: 7px !important;
    }

    /* Quantity Input */
    .quantity-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
        border-radius: 5px !important;
    }

    .quantity-input {
        width: 60px !important;
        height: 32px !important;
        font-size: 16px !important;
        border-radius: 5px !important;
    }

    .quantity-slider {
        height: 4px !important;
    }

    .quantity-slider::-webkit-slider-thumb,
    .quantity-slider::-moz-range-thumb {
        width: 14px !important;
        height: 14px !important;
    }

    /* Settings Panel */
    .settings-panel {
        width: 320px !important;
        height: 280px !important;
        border-radius: 10px !important;
    }

    .settings-header {
        padding: 10px 12px !important;
    }

    .settings-tab {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
    }

    .setting-item {
        padding: 8px 0 !important;
    }

    .setting-label {
        font-size: 10px !important;
    }

    .setting-label span {
        font-size: 9px !important;
    }

    .toggle-switch {
        width: 40px !important;
        height: 20px !important;
    }

    .toggle-slider:before {
        width: 14px !important;
        height: 14px !important;
    }
}


/* Apply to screens 1544px width and below (excluding mobile) */
@media (max-width: 1644px) and (min-width: 769px) {

    /* ===== MINIMAP ===== */
    .minimap-container {
        top: 10px !important;
        right: 10px !important;
    }

    #minimap-canvas {
        border-width: 2px !important;
    }

    /* Minimap Buttons - Smaller */
    .minimap-button {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }


    .chat-toggle.minimap-button {
        bottom: -6px !important;
        left: 24px !important;
        font-size: 11px !important;
    }

    .chat-toggle.minimap-button img {
        width: 16px !important;
        height: 16px !important;
    }

    .settings-toggle.minimap-button {
        bottom: -6px !important;
        left: 54px !important;
        font-size: 11px !important;
    }

    .settings-toggle.minimap-button img {
        width: 16px !important;
        height: 16px !important;
    }

    .guide-toggle.minimap-button {
        display: none !important;
        /* Hide old guide button */
    }

    /* Menu Dropdown - Tablet */
    .menu-dropdown-container {
        /* left removed */
    }

    .menu-dropdown-toggle.minimap-button {
        width: 38px !important;
        height: 38px !important;
        font-size: 12px !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .menu-dropdown-toggle.minimap-button:hover {
        background: transparent !important;
        box-shadow: none !important;
    }

    .menu-dropdown {
        right: 0 !important;
        left: auto !important;
        padding: 6px !important;
        gap: 6px !important;
    }

    .menu-dropdown-item {
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
    }

    .menu-item-icon {
        font-size: 14px !important;
    }

    .zone-btn.minimap-button {
        top: -10px !important;
        right: -6px !important;
        font-size: 9px !important;
        min-width: 40px !important;
        height: 20px !important;
        padding: 0 5px !important;
    }

    /* ===== LEVEL BAR DROPDOWN ===== */
    .level-bar-toggle {
        width: 40px;
        height: 40px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .dropdown-arrow {
        font-size: 10px;
    }

    .level-bar-dropdown {
        top: 15px;
        left: 65px;
        border-radius: 10px;
    }

    .dropdown-content {
        padding: 10px;
    }

    .player-name,
    .level-text {
        font-size: 13px;
    }

    .player-count {
        font-size: 11px;
    }

    .logout-btn {
        padding: 6px 16px;
        font-size: 11px;
        border-radius: 8px;
    }

    /* ===== TIME & GOLD DISPLAY ===== */
    #time-indicator {
        top: 90px !important;
        left: 8px !important;
        min-width: 60px !important;
        height: 26px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    /* Time, Gold, Ruby: xếp sát nhau theo cột giống các responsive khác */
    #gold-display {
        top: 116px !important;
        /* 90px + 26px = 116px */
        left: 10px !important;
        min-width: 60px !important;
        height: 26px !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
    }

    #ruby-display {
        top: 142px !important;
        /* 116px + 26px = 142px */
        left: 10px !important;
        min-width: 60px !important;
        height: 26px !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
    }

    .gold-display span {
        font-size: 10px !important;
    }

    .gold-display.minimap-button img {
        width: 11px !important;
        height: 11px !important;
    }

    /* ===== NOTIFICATION CONTAINER ===== */
    #notification-container {
        top: 174px !important;
        /* sát dưới ruby-display (146px + ~28px height) */
        left: 8px !important;
        max-width: 200px !important;
    }

    /* Commented out to prevent conflict with mobile.css custom skill wheel coordinate maps
    .bottom-actions {
        bottom: 6px !important;
        right: 12px !important;
        gap: 10px !important;
    }

    .attack-btn {
        width: 60px !important;
        height: 60px !important;
        font-size: 24px !important;
    }

    .attack-btn img {
        width: 36px !important;
        height: 36px !important;
    }

    .skill-bar-container {
        bottom: 12px !important;
        padding: 6px 12px !important;
        gap: 6px !important;
        border-radius: 14px !important;
        border-width: 2px !important;
    }

    .skill-slot {
        width: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
        border-width: 2px !important;
    }
    */

    .skill-icon,
    .skill-icon-emoji {
        width: 32px !important;
        height: 32px !important;
        font-size: 24px !important;
    }

    .skill-hotkey {
        font-size: 7px !important;
        padding: 1px 3px !important;
        bottom: 1px !important;
        right: 1px !important;
    }

    .skill-cooldown-timer {
        font-size: 12px !important;
    }

    .skill-cooldown-ring {
        width: 40px !important;
        height: 40px !important;
    }

    .skill-name-tooltip {
        bottom: 50px !important;
        font-size: 9px !important;
        padding: 5px 8px !important;
        border-radius: 5px !important;
    }

    /* ===== EXPERIENCE BAR ===== */
    .exp-bar-container {
        padding: 0;
    }

    .exp-bar-bg {
        height: 2px;
    }

    /* ===== INVENTORY PANEL ===== */
    .inventory-panel {
        max-width: 650px !important;
        max-height: 550px !important;
        border-radius: 14px !important;
    }

    .inventory-header {
        padding: 14px 18px !important;
        border-radius: 14px 14px 0 0 !important;
    }

    .inventory-header h3 {
        font-size: 1.2rem !important;
    }

    .inventory-tabs {
        gap: 6px !important;
    }

    .inventory-tab {
        padding: 7px 14px !important;
        font-size: 0.8rem !important;
        border-radius: 7px !important;
    }

    .close-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 15px !important;
    }

    .inventory-content {
        padding: 16px !important;
        gap: 16px !important;
    }

    /* Equipment Section */
    .equipment-section {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    .equipment-section h4 {
        font-size: 1.05rem !important;
        margin-bottom: 14px !important;
    }

    .character-display {
        padding: 10px !important;
        gap: 5px !important;
        margin: 6px 0 !important;
    }

    .character-display h4 {
        font-size: 0.75rem !important;
    }

    .character-avatar {
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
    }

    .character-name {
        font-size: 0.7rem !important;
    }

    .equipment-grid {
        gap: 6px !important;
    }

    .equipment-slot {
        width: 100% !important;
        min-height: 50px !important;
        padding: 2px !important;
        border-radius: 0 !important;
        border: none !important;
        aspect-ratio: 1 !important;
        box-sizing: border-box !important;
    }

    .slot-label {
        display: none !important;
    }

    .slot-content {
        min-height: 0 !important;
        gap: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .slot-content img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 4px !important;
    }

    .slot-content .item-name {
        display: none !important;
    }

    .empty-slot {
        display: none !important;
        min-height: 20px !important;
    }

    /* Inventory Grid */
    .inventory-grid {
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 3px !important;
        padding: 10px !important;
        max-height: 320px !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .inventory-slot {
        min-height: 42px !important;
        padding: 2px !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .inventory-slot img {
        max-width: 30px !important;
        max-height: 30px !important;
    }

    .inventory-slot .item-count {
        font-size: 0.65rem;
        padding: 2px 4px;
        top: 1px;
        left: 1px;
    }

    .inventory-slot .rarity-indicator {
        width: 5px;
        height: 5px;
        top: 1px;
        right: 1px;
    }

    .equipped-indicator {
        font-size: 9px;
        padding: 1px 5px;
        bottom: 1px;
    }

    .enhancement-level {
        font-size: 9px;
        padding: 1px 4px;
        top: 1px;
        right: 1px;
    }

    /* Weight Display */
    .inventory-header-with-weight h4 {
        font-size: 1.2rem;
    }

    .weight-info {
        font-size: 0.8rem;
    }

    .weight-bar {
        width: 130px;
        height: 5px;
    }

    /* Stats Tab */
    .inventory-tab-content[data-tab-content="stats"] .stats-grid {
        gap: 6px;
    }

    .inventory-tab-content[data-tab-content="stats"] .stat-item {
        padding: 6px 8px;
        gap: 6px;
        border-radius: 6px;
    }

    .inventory-tab-content[data-tab-content="stats"] .stat-icon {
        font-size: 16px;
        width: 28px;
        height: 28px;
    }

    .inventory-tab-content[data-tab-content="stats"] .stat-name {
        font-size: 10px;
    }

    .inventory-tab-content[data-tab-content="stats"] .stat-value {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .inventory-tab-content[data-tab-content="stats"] .equipped-items {
        padding: 8px;
    }

    .inventory-tab-content[data-tab-content="stats"] .equipped-items h4 {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .inventory-tab-content[data-tab-content="stats"] .equipped-item {
        padding: 5px 0;
    }

    .inventory-tab-content[data-tab-content="stats"] .equipped-label,
    .inventory-tab-content[data-tab-content="stats"] .equipped-name {
        font-size: 10px;
    }

    /* Stat Allocation */
    .stat-allocation-section {
        padding: 12px;
        margin-bottom: 12px;
    }

    .stat-allocation-section h4 {
        font-size: 12px;
    }

    .stat-points-compact {
        gap: 5px;
    }

    .stat-points-compact-label {
        font-size: 10px;
        color: #ffffff;
    }

    .stat-points-compact-value {
        font-size: 14px;
        color: #ffffff;
    }

    .stat-allocation-grid {
        gap: 10px;
    }

    .stat-allocation-item {
        padding: 10px;
        gap: 10px;
        border-radius: 8px;
    }

    .stat-allocation-icon {
        font-size: 26px;
        width: 40px;
        height: 40px;
    }

    .stat-allocation-name {
        font-size: 12px;
    }

    .stat-base-value {
        font-size: 15px;
    }

    .stat-bonus-value {
        font-size: 12px;
    }

    .stat-allocation-note {
        font-size: 10px;
    }

    .stat-allocation-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
        border-radius: 10px;
    }

    /* Skills Tab */
    .skills-section {
        padding: 12px;
        border-radius: 10px;
    }

    .skills-section h4 {
        font-size: 14px;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    .skill-item-tab,
    .innate-skill-item {
        padding: 8px;
        gap: 8px;
        border-radius: 8px;
    }

    .skill-item-icon,
    .innate-skill-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .skill-item-icon img,
    .innate-skill-icon img {
        width: 28px;
        height: 28px;
    }

    .skill-item-name,
    .innate-skill-name {
        font-size: 11px;
    }

    .skill-item-description,
    .innate-skill-description {
        font-size: 9px;
    }

    .skill-stat {
        font-size: 9px;
        padding: 2px 6px;
    }

    .innate-skill-hint {
        font-size: 9px;
    }

    .innate-skill-toggle .toggle-switch {
        width: 42px;
        height: 22px;
    }

    .innate-skill-toggle .toggle-slider:before {
        height: 16px;
        width: 16px;
    }

    .innate-skill-toggle input:checked+.toggle-slider:before {
        transform: translateX(20px);
    }



    /* ===== TOOLTIP ===== */
    .item-tooltip {
        max-width: 220px !important;
        max-height: 320px !important;
        padding: 10px !important;
        border-radius: 8px !important;
    }

    .item-name {
        font-size: 0.85rem !important;
    }

    .item-type {
        font-size: 0.65rem !important;
    }

    .item-description {
        font-size: 0.7rem !important;
        padding: 5px !important;
    }

    .item-weight,
    .item-stats {
        font-size: 0.65rem !important;
        padding: 5px !important;
    }

    .item-actions {
        gap: 5px !important;
        margin-top: 5px !important;
    }

    .item-actions button {
        padding: 5px 9px !important;
        font-size: 0.65rem !important;
        border-radius: 4px !important;
    }

    /* ===== CONFIRMATION MODAL ===== */
    .confirm-modal-content,
    .quantity-modal-content {
        max-width: 320px !important;
        padding: 20px !important;
        border-radius: 14px !important;
    }

    .confirm-modal-icon {
        font-size: 46px !important;
        margin-bottom: 14px !important;
    }

    .confirm-modal-title {
        font-size: 1.15rem !important;
        margin-bottom: 10px !important;
    }

    .confirm-modal-message {
        font-size: 0.85rem !important;
        margin-bottom: 20px !important;
    }

    .confirm-btn {
        padding: 9px 20px !important;
        font-size: 0.85rem !important;
        border-radius: 9px !important;
    }

    /* Quantity Input */
    .quantity-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 18px !important;
        border-radius: 7px !important;
    }

    .quantity-input {
        width: 75px !important;
        height: 38px !important;
        font-size: 18px !important;
        border-radius: 7px !important;
    }

    .quantity-slider {
        height: 5px !important;
    }

    .quantity-slider::-webkit-slider-thumb,
    .quantity-slider::-moz-range-thumb {
        width: 18px !important;
        height: 18px !important;
    }

    /* ===== QUEST TRACKER ===== */
    .quest-tracker-container {
        top: 15px;
        right: 130px;
        width: 220px;
        max-height: 300px;
        border-radius: 12px;
    }

    .quest-tracker-header {
        padding: 10px 12px;
        font-size: 13px;
        border-radius: 12px 12px 0 0;
    }

    .quest-tracker-content {
        padding: 10px;
        gap: 8px;
        max-height: 250px;
        overflow-y: auto;
    }

    .quest-tracker-list,
    .party-tracker-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        pointer-events: auto !important;
        touch-action: pan-y !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.6) transparent;
    }

    .quest-tracker-list::-webkit-scrollbar,
    .party-tracker-list::-webkit-scrollbar {
        width: 3px !important;
        background: transparent !important;
    }

    .quest-tracker-list::-webkit-scrollbar-thumb,
    .party-tracker-list::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.6) !important;
        border-radius: 3px !important;
    }

    .quest-item {
        padding: 10px;
        border-radius: 8px;
        gap: 8px;
    }

    .quest-title {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .quest-progress {
        font-size: 10px;
    }

    /* ===== TRADE MODAL ===== */
    .trade-modal-content {
        max-width: 650px;
        border-radius: 16px;
    }

    .trade-header {
        padding: 16px 20px;
    }

    .trade-header h3 {
        font-size: 1.3rem;
    }

    .trade-body {
        padding: 16px;
    }

    .trade-section {
        padding: 12px;
    }

    .trade-section h4 {
        font-size: 13px;
        margin-bottom: 10px;
    }

    /* Trade items: giới hạn theo chiều dọc, không cần kéo ngang */
    .trade-items {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        padding: 8px;
        max-height: 220px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .trade-item {
        width: 100%;
        aspect-ratio: 1;
        padding: 4px;
    }

    .trade-item img {
        max-width: 28px;
        max-height: 28px;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* ===== SETTINGS MODAL ===== */
    .settings-modal-content {
        max-width: 450px;
        border-radius: 16px;
    }

    .settings-header {
        padding: 16px 20px;
    }

    .settings-header h3 {
        font-size: 1.3rem;
    }

    .settings-body {
        padding: 16px;
    }

    .setting-item {
        padding: 10px 0;
    }

    .setting-label {
        font-size: 12px;
    }


    /* ===== AUTH SCREEN ===== */
    .auth-container {
        max-width: 330px !important;
        padding: 1.4rem !important;
    }

    .auth-logo img {
        max-width: 240px !important;
    }

    .auth-form h2 {
        font-size: 1.3rem !important;
        margin-bottom: 1.1rem !important;
    }

    .auth-form input {
        height: 42px !important;
        font-size: 13px !important;
        padding: 9px 11px !important;
    }

    .auth-form button {
        height: 42px !important;
        font-size: 13px !important;
        padding: 11px !important;
    }

    .remember-me label {
        font-size: 12px !important;
    }

    .remember-me input[type="checkbox"] {
        width: 19px !important;
        height: 19px !important;
        min-width: 19px !important;
        min-height: 19px !important;
    }

    /* ===== WEAPON SELECTION ===== */
    .weapon-selection-container {
        max-width: 480px !important;
        padding: 1.4rem !important;
    }

    .weapon-selection-container h1 {
        font-size: 1.45rem !important;
        margin-bottom: 0.7rem !important;
    }

    .weapon-selection-container p {
        font-size: 0.95rem !important;
        margin-bottom: 1.4rem !important;
    }

    .weapon-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
        gap: 1.1rem !important;
        margin-bottom: 1.4rem !important;
    }

    .weapon-option {
        padding: 0.7rem !important;
        border-radius: 7px !important;
    }

    .weapon-option img {
        width: 60px !important;
        height: 60px !important;
    }

    .weapon-option h3 {
        font-size: 0.95rem !important;
        margin-bottom: 0.35rem !important;
    }

    .weapon-option p {
        font-size: 0.75rem !important;
    }

    #confirm-weapon-btn {
        height: 42px !important;
        padding: 11px 24px !important;
        font-size: 13px !important;
    }

    /* ===== DEAD OVERLAY ===== */
    .death-image {
        width: 350px !important;
        height: 350px !important;
    }

    .respawn-countdown {
        font-size: 2.5rem !important;
        letter-spacing: 3px !important;
    }

    /* ===== SCROLLBAR ===== */
    .inventory-content::-webkit-scrollbar,
    .chat-messages::-webkit-scrollbar,
    .item-tooltip::-webkit-scrollbar,
    .inventory-grid::-webkit-scrollbar {
        width: 6px;
    }

    .inventory-content::-webkit-scrollbar-track,
    .chat-messages::-webkit-scrollbar-track,
    .item-tooltip::-webkit-scrollbar-track,
    .inventory-grid::-webkit-scrollbar-track {
        background: #000000;
    }

    .inventory-content::-webkit-scrollbar-thumb,
    .chat-messages::-webkit-scrollbar-thumb,
    .item-tooltip::-webkit-scrollbar-thumb,
    .inventory-grid::-webkit-scrollbar-thumb {
        background: #000000;
        border-radius: 3px;
    }

    .inventory-content::-webkit-scrollbar-thumb:hover,
    .chat-messages::-webkit-scrollbar-thumb:hover,
    .item-tooltip::-webkit-scrollbar-thumb:hover,
    .inventory-grid::-webkit-scrollbar-thumb:hover {
        background: #1a1a1a;
    }

}

/* Note: All UI elements are now 15-25% smaller for compact display on 1544x720 and similar resolutions */

/* MOBILE LANDSCAPE - wider screens (850-1200px width, low height) */
/* Covers devices like 1103x431, typical mobile landscape in Capacitor WebView */
/* MUST be AFTER the 1644px query to take CSS cascade priority */
@media (max-width: 1200px) and (min-width: 851px) and (max-height: 550px) {}

/* GLOBAL LANDSCAPE OVERRIDE FOR MOBILE-LIKE SCREENS MAPPING ALL WIDTHS */
@media (max-height: 500px) and (orientation: landscape) {

    /* Màn hình điện thoại xoay ngang - chỉnh nhỏ lại để không đè nút Soru/Attack */
    .quest-tracker {
        right: 2px !important;
        top: 60px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        max-height: 110px !important;
        /* Extremely compact to prevent overlapping skill wheel! */
        transform: scale(0.85) !important;
        transform-origin: top right !important;
        overflow: visible !important;
        background: rgba(0, 0, 0, 0.45) !important;
        border-radius: 6px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 4px !important;
    }

    .quest-tracker.collapsed {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        box-shadow: none !important;
    }

    .quest-tracker-list,
    .party-tracker-list {
        gap: 2px !important;
        max-height: 75px !important;
        /* Compact scrolling height */
        overflow-y: auto !important;
        pointer-events: auto !important;
        touch-action: pan-y !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(0, 0, 0, 0.6) transparent !important;
    }

    /* Compact tabs */
    .quest-tracker-tabs {
        margin-bottom: 4px !important;
        gap: 2px !important;
    }

    .quest-tab {
        padding: 3px 2px !important;
        font-size: 9px !important;
    }

    /* Compact quest items */
    .quest-tracker-item {
        padding: 2px 0 2px 4px !important;
    }

    .quest-text-header {
        font-size: 10px !important;
        padding-bottom: 1px !important;
    }

    .quest-text-description {
        font-size: 8.5px !important;
        margin: 3px 0 !important;
        line-height: 1.1 !important;
    }

    .quest-text-task {
        font-size: 9px !important;
        margin-bottom: 2px !important;
        gap: 3px !important;
    }

    .quest-icon-frame-tiny {
        width: 10px !important;
        height: 10px !important;
        margin-right: 2px !important;
    }

    .quest-icon-inner-tiny {
        font-size: 6px !important;
    }

    .quest-text-diamond {
        width: 8px !important;
        height: 8px !important;
    }

    .quest-tracker-progress {
        height: 6px !important;
        border-radius: 2px !important;
    }

    .quest-tracker-progress-text {
        font-size: 7px !important;
    }

    .quest-submit-item-btn {
        font-size: 8px !important;
        padding: 2px 6px !important;
    }

    .quest-tracker-list::-webkit-scrollbar,
    .party-tracker-list::-webkit-scrollbar {
        width: 3px !important;
        background: transparent !important;
    }

    .quest-tracker-list::-webkit-scrollbar-thumb,
    .party-tracker-list::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3) !important;
        border-radius: 3px !important;
    }

    .first-topup-btn.minimap-button,
    .recharge-milestone-btn-icon.minimap-button,
    .inventory-btn.minimap-button {
        width: 45px !important;
        height: 45px !important;
    }

    .auth-container {
        margin: 0.2rem auto !important;
        padding: 0.8rem 1.2rem !important;
        max-width: 450px !important;
        width: 85vw !important;
        max-height: 95vh !important;
        overflow-y: auto !important;
        transform: scale(0.9) !important;
        transform-origin: center center !important;
    }

    .auth-logo {
        margin-bottom: 0.3rem !important;
    }

    .auth-logo img {
        max-width: 130px !important;
    }

    .auth-container h1 {
        font-size: 1rem !important;
    }

    .auth-form h2 {
        font-size: 1rem !important;
        margin-bottom: 0.4rem !important;
    }

    .auth-form input[type="text"],
    .auth-form input[type="password"],
    .auth-form input[type="email"] {
        height: 38px !important;
        font-size: 14px !important;
        margin-bottom: 0.5rem !important;
    }

    .auth-form button {
        height: 38px !important;
        font-size: 14px !important;
    }

    .server-select {
        height: 38px !important;
        font-size: 14px !important;
    }

    .auth-form p,
    .auth-form a,
    .remember-me label {
        font-size: 0.8rem !important;
    }


}