/* ============================================
   ERA RAID - Responsive Styles
   Media queries for all breakpoints
   ============================================ */

/* ============================================
   SINGLE PLAYER MODE - Desktop Layout
   Combat log on RIGHT, Player HUD on LEFT
   ============================================ */

.mode-singleplayer .combat-log-panel,
#view-combat.mode-singleplayer .combat-log-panel,
#view-combat.mode-singleplayer #combat-log-panel {
    left: auto;
    right: var(--spacing-lg);
}

.mode-singleplayer .player-hud,
#view-combat.mode-singleplayer .player-hud,
#view-combat.mode-singleplayer #combat-player-hud {
    left: var(--spacing-lg);
    right: auto;
    z-index: 100;
}

/* ============================================
   TABLET (768px - 1199px)
   ============================================ */

@media (max-width: 1199px) {
    :root {
        --header-height: 45px;
    }

    /* Header Adjustments */
    .game-header {
        padding: 0 var(--spacing-sm);
    }

    .game-logo {
        font-size: var(--font-md);
        margin-right: var(--spacing-md);
    }

    .game-nav-link {
        padding: 6px 10px;
        font-size: 11px;
    }

    .game-nav-link i {
        font-size: 12px;
    }

    .wallet-indicator {
        padding: 6px 10px;
        font-size: 11px;
    }

    /* Panel Adjustments */
    .meters-panel {
        width: 220px;
    }

    .party-frame {
        width: 190px;
    }

    .combat-log {
        width: 280px;
        height: 160px;
    }

    /* Boss Frame */
    .boss-frame {
        width: 380px;
    }

    /* Action Bar */
    .ability-button {
        width: 58px;
        height: 58px;
    }

    /* Player HUD */
    .player-hud {
        width: 200px;
        bottom: 90px;
    }

    /* Menu Buttons */
    .menu-btn {
        width: 36px;
        height: 36px;
        font-size: var(--font-sm);
    }

    /* Combat Stats Bar */
    .combat-stats-bar {
        gap: 10px;
        padding: 6px 12px;
    }

    .stats-item {
        padding: 3px 8px;
    }

    .boss-nameplate {
        min-width: 240px;
        padding: 8px 16px;
    }

    .boss-nameplate-name {
        font-size: 18px;
    }

    .boss-nameplate-hp {
        height: 22px;
    }

    .boss-nameplate-hp-text {
        font-size: 12px;
    }
}

/* ============================================
   MOBILE LANDSCAPE - Small screens in landscape OR short screens
   Does NOT apply to portrait mode (handled separately)
   ============================================ */

/* Mobile header - hide nav link text on all mobile devices */
@media (max-width: 767px) {
    .game-nav-link span {
        display: none; /* Hide text, show only icons */
    }

    .game-nav-link {
        padding: 4px 8px;
    }

    /* ========== MOBILE COMBAT LAYOUT FIX ========== */

    /* Top menu - position at top right, above stats bar */
    .top-menu,
    #combat-top-menu {
        position: fixed !important;
        top: calc(var(--header-height) + 4px) !important;
        right: 8px !important;
        left: auto !important;
        transform: none !important;
        z-index: 200 !important;
        flex-direction: row !important;
        gap: 4px !important;
        padding: 4px 6px !important;
        background: rgba(13, 13, 18, 0.95) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Combat stats bar - below top menu */
    .combat-stats-bar,
    #combat-boss-frame {
        position: fixed !important;
        top: calc(var(--header-height) + 44px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        max-width: calc(100% - 16px) !important;
        z-index: 150 !important;
    }

    /* Boss nameplate - below combat stats bar with proper spacing */
    .boss-nameplate {
        min-width: 160px !important;
        padding: 6px 12px 10px !important;
    }

    .boss-nameplate-name {
        font-size: 14px !important;
    }

    .boss-nameplate-hp {
        height: 16px !important;
    }

    .boss-nameplate-hp-text {
        font-size: 10px !important;
    }

    /* Player nameplate - smaller on mobile */
    .player-nameplate {
        min-width: 140px !important;
        padding: 6px 12px 10px !important;
    }

    .player-nameplate-name {
        font-size: 12px !important;
    }

    .player-nameplate-hp {
        height: 14px !important;
    }

    .player-nameplate-hp-text {
        font-size: 9px !important;
    }

    /* Boss sprite - more to the left */
    .boss-sprite-container {
        left: 25% !important;
        top: 45% !important;
    }

    .boss-sprite-wrapper {
        transform: scale(1.8) !important;
    }

    /* Player sprite - more to the right */
    .player-sprite-container {
        left: 75% !important;
        top: 47% !important;
    }

    .player-sprite-wrapper {
        transform: scale(1.5) !important;
    }

    /* Player HUD - full width bottom bar style */
    .player-hud,
    #combat-player-hud {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 105px !important;
        width: auto !important;
        padding: 8px 12px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        background: rgba(13, 13, 18, 0.95) !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .player-hud .player-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .player-hud .player-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
    }

    .player-hud .player-details {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .player-hud .player-name {
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .player-hud .player-class,
    .player-hud .player-level {
        font-size: 9px !important;
        display: inline !important;
    }

    .player-hud .player-class::after {
        content: ' · ' !important;
    }

    .player-hud .health-bar.player-health {
        flex: 1 !important;
        height: 18px !important;
        min-width: 100px !important;
    }

    .player-hud .health-bar-text {
        font-size: 10px !important;
    }

    /* Boss abilities frame - move up to avoid overlap */
    .boss-frame-bottom,
    #combat-boss-abilities-frame {
        bottom: 200px !important;
        padding: 4px 10px !important;
    }

    .boss-frame-bottom .boss-abilities {
        gap: 4px !important;
    }

    .boss-ability {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 767px) and (orientation: landscape), (max-height: 500px) {
    :root {
        --header-height: 40px;
        --spacing-lg: 12px;
        --spacing-xl: 16px;
    }

    /* Ensure game content is visible */
    .game-container,
    .game-header {
        display: flex !important;
    }

    /* Header Compact */
    .game-header {
        padding: 0 var(--spacing-xs);
        gap: var(--spacing-xs);
    }

    .game-logo {
        font-size: 13px;
        margin-right: var(--spacing-sm);
    }

    .game-nav-link {
        padding: 4px 8px;
        font-size: 10px;
        gap: 4px;
    }

    .game-nav-link span {
        display: none; /* Hide text, show only icons */
    }

    .game-nav-link i {
        font-size: 12px;
    }

    .wallet-indicator {
        padding: 4px 8px;
        font-size: 10px;
        gap: 6px;
    }

    .wallet-indicator .wallet-key {
        font-size: 9px;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wallet-indicator .logout-btn {
        padding: 2px 6px;
        font-size: 9px;
    }

    /* Combat Stats Bar - Mobile Landscape */
    .combat-stats-bar {
        top: calc(var(--header-height) + 4px);
        gap: 6px;
        padding: 4px 10px;
        border-radius: 30px;
    }

    .stats-item {
        padding: 2px 6px;
        gap: 4px;
    }

    .stats-level .stats-icon {
        font-size: 12px;
    }

    .stats-level .stats-value {
        font-size: 12px;
    }

    .stats-level .stats-divider,
    .stats-level .stats-max {
        font-size: 10px;
    }

    .stats-level .stats-best {
        font-size: 9px;
        padding-left: 4px;
        margin-left: 4px;
    }

    .block-mini-circle {
        width: 24px;
        height: 24px;
    }

    .block-mini-svg {
        width: 24px;
        height: 24px;
    }

    .block-mini-text {
        font-size: 9px;
    }

    .block-mini-label {
        font-size: 8px;
    }

    .block-mini-number {
        font-size: 10px;
    }

    .block-mini-proc {
        font-size: 9px;
        padding: 1px 4px;
    }

    .stats-timer-value {
        font-size: 13px;
    }

    .stats-timer-label {
        font-size: 8px;
    }

    /* Boss Frame Bottom - Mobile */
    .boss-frame-bottom {
        bottom: 160px;
        padding: 4px 8px;
    }

    .boss-frame-bottom .boss-abilities {
        gap: var(--spacing-xs);
    }

    .boss-frame-bottom .boss-ability {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    /* Boss Sprite - Mobile */
    .boss-sprite-container {
        top: 40%;
    }

    .boss-sprite-wrapper {
        transform: scale(2);
    }

    .boss-nameplate {
        min-width: 200px;
        padding: 6px 12px;
        gap: 4px;
    }

    .boss-nameplate-name {
        font-size: 16px;
    }

    .boss-nameplate-hp {
        height: 20px;
    }

    .boss-nameplate-hp-text {
        font-size: 11px;
    }

    /* Legacy Boss Frame - Compact mobile layout using CSS Grid */
    .boss-frame {
        top: calc(var(--header-height) + 4px);
        width: calc(100% - 16px);
        padding: 6px 10px;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto;
        gap: 3px 8px;
        align-items: center;
    }

    /* Row 1: Status spans full width */
    .boss-status {
        grid-column: 1 / -1;
        font-size: 8px;
        margin-bottom: 0;
        text-align: center;
    }

    /* Row 2: Name (left) + Level/Tier (right) */
    .boss-name {
        grid-column: 1;
        font-size: 13px;
        margin-bottom: 0;
        text-align: left;
    }

    .boss-level {
        grid-column: 2;
        grid-row: 2;
        font-size: 9px;
        margin-bottom: 0;
        padding: 2px 6px;
        white-space: nowrap;
    }

    .boss-tier {
        grid-column: 2;
        grid-row: 2;
        font-size: 9px;
        margin-bottom: 0;
        padding: 2px 6px;
        white-space: nowrap;
    }

    /* Row 3: Health bar full width */
    .boss-frame .health-bar {
        grid-column: 1 / -1;
        height: 16px;
    }

    .health-bar-text {
        font-size: 10px;
    }

    /* Row 4: Abilities (left) + Block timer (right) */
    .boss-abilities {
        grid-column: 1;
        margin-top: 0;
        gap: 3px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .boss-ability {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }

    /* Block timer inline on right */
    .block-timer-inline {
        grid-column: 2;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
    }

    .block-timer-inline .block-timer-circle {
        width: 26px;
        height: 26px;
    }

    .block-timer-inline .block-timer-text {
        font-size: 9px;
    }

    /* Enrage timer full width */
    .enrage-timer {
        grid-column: 1 / -1;
        font-size: 9px;
        padding: 2px 6px;
        margin-top: 0;
    }

    /* Action Bar - above XP bar (36px) */
    .action-bar {
        bottom: 40px;
        padding: var(--spacing-sm);
        gap: var(--spacing-xs);
    }

    .ability-button {
        width: 52px;
        height: 52px;
    }

    .cooldown-text {
        font-size: var(--font-lg);
    }

    .keybind-label {
        font-size: 8px;
    }

    /* Party Frame - Compact */
    .party-frame {
        top: calc(var(--header-height) + 100px);
        left: var(--spacing-sm);
        width: 160px;
        max-height: 280px;
    }

    .party-title {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 10px;
    }

    .party-list {
        padding: var(--spacing-xs);
    }

    .party-member {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }

    .member-class {
        width: 22px;
        height: 22px;
        min-width: 22px;
        font-size: 10px;
    }

    .member-name {
        font-size: 11px;
    }

    .member-level {
        font-size: 9px;
    }

    .member-health-bar {
        height: 10px;
    }

    .member-health-text {
        font-size: 7px;
    }

    /* Meters Panel - Compact */
    .meters-panel {
        top: calc(var(--header-height) + 100px);
        right: var(--spacing-sm);
        width: 160px;
    }

    .meters-title {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 10px;
    }

    .meter-tab {
        padding: var(--spacing-xs);
        font-size: 9px;
    }

    .meter-entries {
        max-height: 200px;
        padding: var(--spacing-xs);
    }

    .meter-entry {
        gap: var(--spacing-xs);
    }

    .meter-rank {
        width: 16px;
        font-size: 9px;
    }

    .meter-bar-container {
        height: 18px;
    }

    .meter-name, .meter-value {
        font-size: 9px;
    }

    /* Hide Combat Log on Mobile */
    .combat-log,
    .combat-log-panel,
    #combat-log-panel {
        display: none !important;
        visibility: hidden !important;
    }

    /* Player HUD - Compact, above action bar */
    .player-hud {
        left: var(--spacing-sm);
        width: 180px;
        bottom: 110px;
        padding: var(--spacing-sm);
    }

    .player-avatar {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .player-name {
        font-size: var(--font-sm);
    }

    .player-class, .player-level {
        font-size: 9px;
    }

    .player-health {
        height: 16px;
    }

    /* Top Menu */
    .top-menu {
        top: calc(var(--header-height) + var(--spacing-sm));
        right: var(--spacing-sm);
        gap: var(--spacing-xs);
    }

    .menu-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    /* Show Mobile Toggles */
    .mobile-toggles {
        display: flex;
    }

    /* Main Menu View */
    .menu-container {
        padding: var(--spacing-md);
    }

    .character-card {
        padding: var(--spacing-lg);
    }

    .character-avatar {
        width: 60px;
        height: 60px;
    }

    .character-name {
        font-size: var(--font-lg);
    }

    .menu-buttons {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .class-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .class-card {
        padding: var(--spacing-md);
    }

    .class-icon {
        font-size: 2rem;
    }

    /* Mode Select */
    .mode-cards {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .mode-card {
        padding: var(--spacing-lg);
    }

    .mode-icon {
        font-size: 2.5rem;
    }

    /* Character View */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .inventory-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .equipment-slots {
        order: 1;
    }

    .inventory-bag {
        order: 2;
    }

    /* Single Player View - Reorganized Layout */

    /* Player Status: Bottom-left, compact horizontal layout */
    .sp-player-status {
        left: var(--spacing-sm);
        bottom: 75px;
        width: auto;
        min-width: 140px;
        padding: 8px 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        text-align: left;
    }

    .sp-player-status .player-avatar {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 1rem;
        margin: 0;
    }

    .sp-player-status .player-info {
        flex: 1;
        min-width: 0;
    }

    .sp-player-status .player-name {
        font-size: 10px;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sp-player-status .health-bar {
        height: 14px;
    }

    .sp-player-status .health-bar-text {
        font-size: 9px;
    }

    /* Boss Frame */
    .boss-frame.solo-boss {
        width: calc(100% - 24px);
        padding: var(--spacing-sm);
    }

    .boss-frame.solo-boss .boss-name {
        font-size: 14px;
    }

    .boss-frame.solo-boss .boss-abilities {
        gap: var(--spacing-xs);
    }

    .boss-frame.solo-boss .boss-ability {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    /* Block Timer - Top Right (next to boss frame area) */
    .block-timer-panel {
        top: calc(var(--header-height) + 10px);
        left: auto;
        right: var(--spacing-sm);
        width: 70px;
        padding: 6px;
    }

    .block-timer-title {
        font-size: 9px;
        margin-bottom: 2px;
    }

    .block-timer-number {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .block-timer-circle {
        width: 40px;
        height: 40px;
        margin-bottom: 4px;
    }

    .block-timer-text {
        font-size: 12px;
    }

    .block-timer-proc {
        font-size: 8px;
        margin-bottom: 2px;
    }

    .block-timer-result {
        font-size: 9px;
        min-height: 14px;
    }

    /* Combat Log - Hidden on tablet, toggle to show */
    .sp-combat-log {
        display: none;
    }

    /* Action Bar */
    #sp-action-bar {
        gap: var(--spacing-xs);
    }

    .potion-btn {
        width: 44px;
        height: 44px;
    }

    .auto-play-btn {
        width: 44px;
        height: 44px;
        font-size: 10px;
    }
}

/* ============================================
   MOBILE LANDSCAPE (height-based detection)
   Targets phones in landscape by screen height
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {

    /* ========== LOADING SCREEN ========== */
    .loading-content {
        padding: 10px !important;
    }

    .loading-logo {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 8px !important;
    }

    .loading-title {
        font-size: 1.3rem !important;
        margin-bottom: 4px !important;
    }

    .loading-subtitle {
        font-size: 0.8rem !important;
        margin-bottom: 10px !important;
    }

    .loading-bar-container {
        width: 180px !important;
        height: 6px !important;
        margin-bottom: 8px !important;
    }

    .loading-text {
        font-size: 0.75rem !important;
    }

    /* ========== MAIN MENU / CHARACTER SCREEN ========== */
    /* (Scrolling happens on #view-mainmenu — see game-layout.css. An
       overflow-y here is inert: this element is never height-bound.) */
    .menu-container {
        padding: 10px !important;
    }

    .character-display {
        padding: 8px !important;
    }

    .character-card {
        padding: 10px !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .character-avatar {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
        margin: 0 !important;
    }

    .character-info {
        flex: 1 !important;
        text-align: left !important;
    }

    .character-name {
        font-size: 1rem !important;
        margin-bottom: 2px !important;
    }

    .character-class,
    .character-level {
        font-size: 0.7rem !important;
    }

    .character-stats {
        display: none !important; /* Hide stats on mobile */
    }

    .xp-bar-container {
        height: 36px !important;
        margin-top: 6px !important;
        padding: 4px 8px !important;
    }

    .xp-bar-track {
        height: 12px !important;
    }

    .xp-bar-info {
        margin-top: 2px !important;
    }

    .xp-level {
        font-size: 10px !important;
    }

    .xp-text {
        font-size: 9px !important;
    }

    .xp-percent {
        font-size: 10px !important;
    }

    .menu-buttons {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .menu-buttons .btn {
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
    }

    /* Character Creation */
    .character-creation {
        padding: 10px !important;
    }

    .creation-title {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }

    .class-cards {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    .class-card {
        padding: 8px !important;
    }

    .class-icon {
        font-size: 1.3rem !important;
        margin-bottom: 4px !important;
    }

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

    .class-desc {
        display: none !important;
    }

    .creation-form {
        margin-top: 10px !important;
        gap: 8px !important;
    }

    .char-name-input {
        padding: 8px !important;
        font-size: 0.85rem !important;
    }

    /* Mode Select - only apply when active */
    #view-modeselect.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 5px !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    .mode-select-container {
        padding: 6px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .mode-select-container h2.mode-title,
    .mode-select-container .mode-title {
        font-size: 0.85rem !important;
        margin-bottom: 4px !important;
        margin-top: 0 !important;
        flex-shrink: 0 !important;
    }

    .mode-cards {
        flex-direction: row !important;
        gap: 6px !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .mode-card {
        padding: 6px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }

    .mode-icon {
        font-size: 1.3rem !important;
        margin-bottom: 3px !important;
    }

    .mode-name {
        font-size: 0.8rem !important;
        margin-bottom: 2px !important;
    }

    .mode-desc {
        display: none !important;
    }

    .mode-features {
        display: none !important;
    }

    .mode-card .btn {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
        margin-top: 3px !important;
    }

    /* Mode Select Back Button - Compact at bottom */
    .mode-select-container .btn-back {
        margin-top: 4px !important;
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
        align-self: center !important;
        flex-shrink: 0 !important;
    }

    /* ========== CHARACTER VIEW ========== */
    #view-character.active {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 5px !important;
        overflow: hidden !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    .character-view-container {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px !important;
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* Scroll indicator */
    .character-view-container::after {
        content: '↓ Scroll for more' !important;
        position: fixed !important;
        bottom: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: rgba(0, 0, 0, 0.8) !important;
        color: #ffd700 !important;
        padding: 4px 12px !important;
        border-radius: 12px !important;
        font-size: 10px !important;
        z-index: 100 !important;
        animation: scrollBounce 1.5s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    @keyframes scrollBounce {
        0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
        50% { transform: translateX(-50%) translateY(-4px); opacity: 0.7; }
    }

    /* Hide scroll indicator when scrolled */
    .character-view-container.scrolled::after {
        display: none !important;
    }

    .character-view-header {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
        padding: 0 !important;
    }

    .character-view-header .btn-back {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
    }

    .character-view-header .view-title {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    .character-view-tabs {
        display: flex !important;
        gap: 4px !important;
        margin-bottom: 8px !important;
    }

    .character-view-tabs .tab-btn {
        padding: 5px 12px !important;
        font-size: 0.7rem !important;
        flex: 1 !important;
    }

    /* Stats Tab - Horizontal layout */
    #tab-stats .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .stats-column {
        padding: 6px !important;
        background: rgba(0,0,0,0.3) !important;
        border-radius: 6px !important;
    }

    .stats-title {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
        padding-bottom: 3px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

    .attribute-row,
    .stats-column .stat-row {
        font-size: 0.65rem !important;
        padding: 2px 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        gap: 4px !important;
    }

    .attr-buttons {
        display: flex !important;
        gap: 2px !important;
    }

    .attr-btn {
        min-width: 22px !important;
        height: 18px !important;
        font-size: 9px !important;
        padding: 0 3px !important;
    }

    .points-available {
        padding: 4px 8px !important;
        font-size: 0.65rem !important;
        margin-top: 6px !important;
    }

    .points-icon {
        font-size: 0.8rem !important;
    }

    .points-label {
        font-size: 0.6rem !important;
    }

    .points-count {
        font-size: 0.7rem !important;
    }

    /* Inventory Tab - Compact grid */
    #tab-inventory .inventory-layout {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        gap: 8px !important;
    }

    .equipment-slots {
        width: auto !important;
    }

    .slots-title,
    .bag-title {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
    }

    .slots-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
    }

    .equip-slot {
        width: 32px !important;
        height: 32px !important;
    }

    .inventory-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)) !important;
        gap: 3px !important;
    }

    .inventory-slot {
        width: 28px !important;
        height: 28px !important;
    }

    /* ========== RAID MODE ========== */

    /* Raid Top Menu - Top Right */
    #view-raid .top-menu,
    .top-menu {
        top: calc(var(--header-height) + 5px) !important;
        right: 8px !important;
        left: auto !important;
        transform: none !important;
        gap: 3px !important;
        padding: 3px 5px !important;
        background: rgba(13, 13, 18, 0.9) !important;
        border-radius: 5px !important;
    }

    /* Raid Boss Frame */
    .boss-frame {
        top: calc(var(--header-height) + 5px) !important;
        width: calc(100% - 120px) !important;
        max-width: 350px !important;
        padding: 5px 8px !important;
    }

    .boss-frame .boss-status {
        font-size: 7px !important;
    }

    .boss-frame .boss-name {
        font-size: 11px !important;
    }

    .boss-frame .boss-tier {
        font-size: 8px !important;
    }

    .boss-frame .health-bar {
        height: 14px !important;
    }

    .boss-frame .health-bar-text {
        font-size: 8px !important;
    }

    /* Boss abilities - centered */
    .boss-frame .boss-abilities {
        margin-top: 3px !important;
        gap: 2px !important;
        grid-column: 1 / -1 !important;
        justify-content: center !important;
    }

    .boss-frame .boss-ability {
        width: 18px !important;
        height: 18px !important;
        font-size: 8px !important;
    }

    /* Block timer - full width in raid */
    .boss-frame .block-timer-inline {
        grid-column: 1 / -1 !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* Raid Party Frame */
    .party-frame {
        top: calc(var(--header-height) + 60px) !important;
        left: 5px !important;
        width: 110px !important;
        max-height: calc(100vh - 140px) !important;
    }

    .party-title {
        padding: 3px 6px !important;
        font-size: 8px !important;
    }

    .party-member {
        padding: 3px !important;
        gap: 4px !important;
    }

    .member-class {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        font-size: 8px !important;
    }

    .member-name {
        font-size: 8px !important;
    }

    .member-level {
        display: none !important;
    }

    .member-health-bar {
        height: 6px !important;
    }

    .member-health-text {
        display: none !important;
    }

    /* Raid Combat Log - Hidden or very small */
    .combat-log {
        display: none !important;
    }

    /* Raid Meters Panel */
    .meters-panel {
        top: calc(var(--header-height) + 60px) !important;
        right: 5px !important;
        width: 100px !important;
        max-height: calc(100vh - 140px) !important;
    }

    .meters-title {
        padding: 3px 6px !important;
        font-size: 8px !important;
    }

    .meter-tabs {
        gap: 2px !important;
    }

    .meter-tab {
        padding: 2px 4px !important;
        font-size: 7px !important;
    }

    .meter-entry {
        padding: 2px !important;
    }

    .meter-rank {
        font-size: 7px !important;
        width: 12px !important;
    }

    .meter-name {
        font-size: 7px !important;
    }

    .meter-value {
        font-size: 7px !important;
    }

    .meter-bar-container {
        height: 12px !important;
    }

    /* Raid Player HUD - move to RIGHT side to avoid party frame overlap */
    .mode-raid .player-hud,
    #view-combat.mode-raid .player-hud {
        left: auto !important;
        right: 5px !important;
        bottom: 105px !important;
        width: 100px !important;
        padding: 5px !important;
    }

    .mode-raid .player-hud .player-avatar {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.8rem !important;
    }

    .mode-raid .player-hud .player-name {
        font-size: 9px !important;
    }

    .mode-raid .player-hud .player-class,
    .mode-raid .player-hud .player-level {
        font-size: 7px !important;
    }

    .mode-raid .player-hud .health-bar {
        height: 10px !important;
    }

    /* ========== SINGLE PLAYER VIEW ========== */

    /* Single Player mode - Player HUD on left, above action bar */
    .mode-singleplayer .player-hud,
    #view-combat.mode-singleplayer .player-hud {
        left: 5px !important;
        right: auto !important;
        bottom: 105px !important;
        width: 120px !important;
        padding: 6px !important;
    }

    .mode-singleplayer .player-hud .player-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.9rem !important;
    }

    .mode-singleplayer .player-hud .player-name {
        font-size: 10px !important;
    }

    .mode-singleplayer .player-hud .player-class,
    .mode-singleplayer .player-hud .player-level {
        font-size: 8px !important;
    }

    .mode-singleplayer .player-hud .health-bar {
        height: 12px !important;
    }

    /* Single Player Top Menu - Top Right (not centered) */
    #view-singleplayer .top-menu {
        top: calc(var(--header-height) + 5px) !important;
        right: 8px !important;
        left: auto !important;
        transform: none !important;
    }

    /* Player Status: Bottom-left corner, very compact */
    .sp-player-status {
        left: 8px !important;
        bottom: 65px !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        min-width: 100px !important;
        max-width: 140px !important;
        padding: 5px 8px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .sp-player-status .player-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    .sp-player-status .player-name {
        font-size: 9px !important;
        margin-bottom: 2px !important;
        display: none !important; /* Hide name on very small screens */
    }

    .sp-player-status .health-bar {
        height: 10px !important;
        min-width: 60px !important;
    }

    .sp-player-status .health-bar-text {
        font-size: 7px !important;
    }

    /* Block Timer: Right side, above action bar */
    .block-timer-panel {
        top: auto !important;
        bottom: 115px !important;
        left: auto !important;
        right: 8px !important;
        width: 55px !important;
        padding: 4px !important;
    }

    .block-timer-title {
        font-size: 7px !important;
        margin-bottom: 1px !important;
    }

    .block-timer-number {
        font-size: 8px !important;
        margin-bottom: 2px !important;
    }

    .block-timer-circle {
        width: 30px !important;
        height: 30px !important;
        margin: 0 auto 2px !important;
    }

    .block-timer-text {
        font-size: 10px !important;
    }

    .block-timer-proc {
        display: none !important;
    }

    .block-timer-result {
        font-size: 6px !important;
        min-height: 10px !important;
    }

    /* Combat Log: Hidden */
    .sp-combat-log {
        display: none !important;
    }

    /* Top Menu: Top right position */
    .top-menu {
        position: fixed !important;
        top: calc(var(--header-height) + 3px) !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        z-index: 100 !important;
        gap: 4px !important;
        padding: 3px 6px !important;
        background: rgba(13, 13, 18, 0.85) !important;
        border-radius: 6px !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }

    .menu-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
        padding: 0 !important;
        min-width: 24px !important;
    }

    .menu-btn i {
        font-size: 10px !important;
    }

    /* Boss Frame: Compact, below menu strip */
    .boss-frame.solo-boss {
        top: calc(var(--header-height) + 35px) !important;
        width: calc(100% - 20px) !important;
        max-width: 380px !important;
        padding: 5px 8px !important;
    }

    .boss-frame.solo-boss .boss-status {
        font-size: 7px !important;
        margin-bottom: 2px !important;
    }

    .boss-frame.solo-boss .boss-level {
        font-size: 8px !important;
    }

    .boss-frame.solo-boss .boss-name {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }

    .boss-frame.solo-boss .health-bar {
        height: 14px !important;
    }

    .boss-frame.solo-boss .health-bar-text {
        font-size: 8px !important;
    }

    .boss-frame.solo-boss .boss-abilities {
        margin-top: 3px !important;
        padding-top: 3px !important;
        gap: 2px !important;
    }

    .boss-frame.solo-boss .boss-ability {
        width: 20px !important;
        height: 20px !important;
        font-size: 9px !important;
    }

    .boss-frame.solo-boss .enrage-timer {
        font-size: 8px !important;
        padding: 2px 5px !important;
        margin-top: 3px !important;
    }

    /* Action Bar: Compact at bottom, above XP bar (36px) */
    .action-bar {
        bottom: 40px !important;
        padding: 6px 10px !important;
        gap: 5px !important;
    }

    .ability-button {
        width: 42px !important;
        height: 42px !important;
    }

    .ability-icon {
        font-size: 1rem !important;
    }

    .ability-name {
        display: none !important;
    }

    .keybind-label {
        font-size: 7px !important;
        bottom: 1px !important;
        right: 2px !important;
    }

    .cooldown-text {
        font-size: 14px !important;
    }

    /* Potion & Auto-play smaller */
    .potion-btn,
    .auto-play-btn {
        width: 38px !important;
        height: 38px !important;
    }

    .auto-play-btn .auto-icon {
        font-size: 1rem !important;
    }
}


/* ============================================
   MOBILE PORTRAIT (< 480px) Landscape Mode
   ============================================ */

@media (max-width: 480px) and (orientation: landscape) {
    :root {
        --header-height: 36px;
    }

    /* Ultra Compact Header */
    .game-header {
        padding: 0 4px;
    }

    .game-logo {
        font-size: 11px;
        margin-right: var(--spacing-xs);
    }

    .game-nav-link {
        padding: 3px 6px;
    }

    .game-nav-link i {
        font-size: 10px;
    }

    .wallet-indicator {
        padding: 3px 6px;
    }

    .wallet-indicator .wallet-key {
        display: none;
    }

    .wallet-indicator .status-dot {
        width: 6px;
        height: 6px;
    }

    /* Boss Frame */
    .boss-frame {
        width: calc(100% - 16px);
        padding: var(--spacing-xs);
    }

    .boss-name {
        font-size: 13px;
    }

    .boss-tier {
        display: none;
    }

    .health-bar {
        height: 18px;
    }

    .boss-abilities {
        display: flex;
        gap: 4px;
        margin-top: var(--spacing-xs);
    }

    .boss-ability {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    /* Action Bar */
    .ability-button {
        width: 44px;
        height: 44px;
    }

    .ability-icon {
        font-size: 1rem;
    }

    .ability-name {
        display: none;
    }

    /* Hide Player HUD */
    .player-hud {
        display: none;
    }

    /* Single Player - Ultra Compact Horizontal Layout */
    .sp-player-status {
        left: 4px;
        bottom: 56px;
        width: auto;
        min-width: 100px;
        max-width: 130px;
        padding: 4px 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .sp-player-status .player-avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.9rem;
        margin: 0;
    }

    .sp-player-status .player-name {
        font-size: 9px;
        margin-bottom: 2px;
    }

    .sp-player-status .health-bar {
        height: 12px;
    }

    .sp-player-status .health-bar-text {
        font-size: 8px;
    }

    /* Block Timer - Ultra Compact, Top Right */
    .block-timer-panel {
        top: calc(var(--header-height) + 8px);
        left: auto;
        right: 4px;
        width: 55px;
        padding: 4px;
    }

    .block-timer-title {
        font-size: 7px;
        margin-bottom: 1px;
    }

    .block-timer-number {
        font-size: 8px;
        margin-bottom: 2px;
    }

    .block-timer-circle {
        width: 32px;
        height: 32px;
        margin-bottom: 2px;
    }

    .block-timer-text {
        font-size: 10px;
    }

    .block-timer-proc {
        display: none;
    }

    .block-timer-result {
        font-size: 7px;
        min-height: 12px;
    }

    /* Combat Log - Hidden */
    .sp-combat-log {
        display: none;
    }

    /* Potion & Auto-play Buttons */
    .potion-btn,
    .auto-play-btn {
        width: 36px;
        height: 36px;
        font-size: 9px;
    }

    .potion-btn .btn-label,
    .auto-play-btn .btn-label {
        display: none;
    }

    /* Ultra Compact Party Frame */
    .party-frame {
        width: 140px;
        max-height: 220px;
    }

    .party-title {
        display: none;
    }

    .member-class {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 9px;
    }

    .member-name {
        font-size: 10px;
    }

    .member-level {
        display: none;
    }

    /* Ultra Compact Meters */
    .meters-panel {
        width: 130px;
    }

    .meters-title {
        display: none;
    }

    .meter-tab {
        padding: 3px;
        font-size: 8px;
    }

    .meter-bar-container {
        height: 16px;
    }

    /* Menu Buttons */
    .menu-btn {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    .toggle-btn {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    /* Loading Screen */
    .loading-logo {
        width: 100px;
        height: 100px;
    }

    .loading-title {
        font-size: 2rem;
    }

    .loading-subtitle {
        font-size: 1rem;
    }

    .loading-bar-container {
        width: 200px;
    }

    /* Main Menu */
    .character-card {
        padding: var(--spacing-md);
    }

    .character-avatar {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .class-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xs);
    }

    .class-card {
        padding: var(--spacing-sm);
    }

    .class-icon {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-xs);
    }

    .class-name {
        font-size: var(--font-sm);
    }

    .class-desc {
        display: none;
    }

    /* Buttons */
    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-sm);
    }

    .btn-large {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-md);
    }
}

/* ============================================
   VERY SMALL SCREENS (< 360px)
   ============================================ */

@media (max-width: 360px) and (orientation: landscape) {
    /* Action Bar Full Width */
    .action-bar {
        width: calc(100% - 16px);
        justify-content: center;
    }

    .ability-button {
        width: 44px;
        height: 44px;
    }

    /* Hide Side Panels */
    .party-frame,
    .meters-panel {
        display: none;
    }

    /* Show Mobile Toggles for Panels */
    .mobile-toggles {
        display: flex;
    }

    /* Boss Frame Minimal */
    .boss-frame {
        padding: 4px var(--spacing-sm);
    }

    .boss-status {
        font-size: 8px;
        margin-bottom: 2px;
    }

    .boss-name {
        font-size: 12px;
        margin-bottom: 2px;
    }

    .health-bar {
        height: 16px;
    }

    .health-bar-text {
        font-size: 9px;
    }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp text and borders on high DPI */
    .game-panel,
    .boss-frame,
    .party-frame,
    .meters-panel,
    .combat-log,
    .action-bar {
        border-width: 0.5px;
    }

    .health-bar {
        border-width: 0.5px;
    }
}

/* ============================================
   LARGE SCREENS (> 1920px)
   ============================================ */

@media (min-width: 1921px) {
    :root {
        --font-xs: 12px;
        --font-sm: 14px;
        --font-md: 16px;
        --font-lg: 18px;
        --font-xl: 24px;
        --font-xxl: 28px;
    }

    /* Larger UI Elements */
    .boss-frame {
        width: 500px;
        padding: var(--spacing-lg);
    }

    .health-bar {
        height: 28px;
    }

    .ability-button {
        width: 72px;
        height: 72px;
    }

    .party-frame {
        width: 260px;
    }

    .meters-panel {
        width: 300px;
    }

    .combat-log {
        width: 380px;
        height: 220px;
    }

    .player-hud {
        width: 280px;
        bottom: 110px;
    }

    .player-avatar {
        width: 56px;
        height: 56px;
    }

    .menu-btn {
        width: 48px;
        height: 48px;
        font-size: var(--font-lg);
    }
}

/* ============================================
   4K DISPLAYS (> 2560px)
   ============================================ */

@media (min-width: 2561px) {
    :root {
        --font-xs: 14px;
        --font-sm: 16px;
        --font-md: 18px;
        --font-lg: 22px;
        --font-xl: 28px;
        --font-xxl: 36px;
        --spacing-lg: 20px;
        --spacing-xl: 32px;
    }

    .boss-frame {
        width: 600px;
    }

    .health-bar {
        height: 32px;
    }

    .ability-button {
        width: 80px;
        height: 80px;
    }

    .cooldown-text {
        font-size: var(--font-xxl);
    }

    .party-frame {
        width: 300px;
    }

    .meters-panel {
        width: 340px;
    }

    .combat-log {
        width: 440px;
        height: 260px;
    }

    .player-hud {
        width: 320px;
        bottom: 130px;
    }
}


/* ============================================
   PANEL VISIBILITY TOGGLES (Mobile - all orientations)
   ============================================ */

@media (max-width: 767px), (max-height: 600px) {
    /* Hide panels by default on mobile - toggle to show */
    .party-frame.mobile-hidden,
    .meters-panel.mobile-hidden {
        display: none !important;
    }

    .party-frame.mobile-visible,
    .meters-panel.mobile-visible {
        display: block !important;
    }

    /* Toggle button active state */
    .toggle-btn.active {
        background: var(--accent-blue, #4a9eff) !important;
        border-color: var(--accent-blue, #4a9eff) !important;
    }

    /* Mobile toggles styling - horizontal row at top left */
    .mobile-toggles {
        position: fixed !important;
        top: calc(var(--header-height, 40px) + 8px);
        bottom: auto;
        left: 8px;
        display: flex;
        flex-direction: row;
        gap: 6px;
        z-index: 100;
    }

    .toggle-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(20, 20, 30, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
    }

    .toggle-btn:hover {
        background: rgba(40, 40, 60, 0.95);
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* Boss frame - shifted down to avoid top menu overlap */
    .boss-frame {
        top: calc(var(--header-height, 40px) + 50px) !important;
    }

    /* Party Frame - below boss frame, left side */
    .party-frame {
        position: fixed !important;
        top: calc(var(--header-height, 40px) + 420px) !important;
        left: 5px !important;
        width: 140px !important;
        max-height: calc(100vh - 520px) !important;
        padding: 5px !important;
        overflow-y: auto !important;
        z-index: 50 !important;
    }

    .party-title {
        font-size: 9px !important;
        padding: 3px 5px !important;
    }

    .party-member {
        padding: 3px !important;
        gap: 3px !important;
    }

    .member-class {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        font-size: 9px !important;
    }

    .member-name {
        font-size: 8px !important;
    }

    .member-level {
        display: none !important;
    }

    .member-health-bar {
        height: 5px !important;
    }

    .member-health-text {
        display: none !important;
    }

    /* Meters Panel - below boss frame, right side */
    .meters-panel {
        position: fixed !important;
        top: calc(var(--header-height, 40px) + 420px) !important;
        right: 5px !important;
        left: auto !important;
        width: 130px !important;
        max-height: calc(100vh - 520px) !important;
        padding: 5px !important;
        overflow-y: auto !important;
        z-index: 50 !important;
    }

    .meters-title {
        font-size: 8px !important;
        padding: 3px 5px !important;
    }

    .meters-tabs {
        gap: 2px !important;
        padding: 3px !important;
    }

    .meter-tab {
        padding: 3px 4px !important;
        font-size: 7px !important;
    }

    .meter-entry {
        padding: 3px !important;
    }

    .meter-rank {
        font-size: 7px !important;
        width: 12px !important;
    }

    .meter-name {
        font-size: 7px !important;
    }

    .meter-value {
        font-size: 7px !important;
    }

    .meter-bar-container {
        height: 10px !important;
    }

    /* Raid Player HUD - hidden on mobile (player in party frame) */
    .mode-raid .player-hud {
        display: none !important;
    }

    /* Combat Log - hidden on mobile raid */
    .mode-raid .combat-log-panel {
        display: none !important;
    }
}

/* ============================================
   SHORT VIEWPORTS (landscape phones)
   The +420px panel geometry above is portrait math: on a 390-500px tall
   screen it puts the panels below the fold with a zero max-height. The
   party frame is the ONLY place the player's character and the raid
   queue status appear on mobile, so anchor the panels under the boss
   stats bar instead (same geometry the landscape block used before the
   portrait rules started winning on source order).
   ============================================ */

@media (max-height: 600px) {
    .party-frame {
        top: calc(var(--header-height, 40px) + 60px) !important;
        left: 5px !important;
        width: 130px !important;
        max-height: calc(100vh - var(--header-height, 40px) - 70px) !important;
    }

    .meters-panel {
        top: calc(var(--header-height, 40px) + 60px) !important;
        right: 5px !important;
        left: auto !important;
        width: 130px !important;
        max-height: calc(100vh - var(--header-height, 40px) - 70px) !important;
    }
}

/* ============================================
   VERY SMALL PORTRAIT SCREENS (320px-375px width)
   Ultra-compact combat UI for small phones
   ============================================ */

@media (max-width: 375px) and (orientation: portrait) {
    /* Combat stats bar - ultra compact */
    .combat-stats-bar,
    #combat-boss-frame {
        top: calc(var(--header-height) + 36px) !important;
        padding: 4px 8px !important;
        gap: 6px !important;
        max-width: calc(100% - 12px) !important;
    }

    .stats-item {
        padding: 2px 5px !important;
        gap: 3px !important;
    }

    .stats-level .stats-icon {
        font-size: 10px !important;
    }

    .stats-level .stats-value {
        font-size: 10px !important;
    }

    .stats-level .stats-divider,
    .stats-level .stats-max {
        font-size: 9px !important;
    }

    .stats-level .stats-best {
        display: none !important; /* Hide "Best:" on very small screens */
    }

    .block-mini-circle {
        width: 20px !important;
        height: 20px !important;
    }

    .block-mini-svg {
        width: 20px !important;
        height: 20px !important;
    }

    .block-mini-text {
        font-size: 8px !important;
    }

    .block-mini-label {
        display: none !important;
    }

    .block-mini-number {
        font-size: 9px !important;
    }

    .block-mini-proc {
        font-size: 8px !important;
        padding: 1px 3px !important;
    }

    .stats-timer-value {
        font-size: 11px !important;
    }

    .stats-timer-label {
        font-size: 7px !important;
    }

    /* Action bar - smaller abilities for very small screens */
    .action-bar {
        bottom: 36px !important;
        padding: 5px 8px !important;
        gap: 4px !important;
    }

    .ability-button {
        width: 44px !important;
        height: 44px !important;
    }

    .ability-icon {
        font-size: 0.95rem !important;
    }

    .keybind-label {
        font-size: 6px !important;
        bottom: 0px !important;
        right: 1px !important;
    }

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

    /* Potion & Auto-play - smaller */
    .potion-btn,
    .auto-play-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .auto-play-btn .auto-icon {
        font-size: 0.9rem !important;
    }

    .potion-btn .btn-label,
    .auto-play-btn .btn-label {
        display: none !important;
    }

    /* Player HUD - more compact */
    .player-hud,
    #combat-player-hud {
        bottom: 95px !important;
        padding: 6px 10px !important;
        gap: 8px !important;
    }

    .player-hud .player-avatar {
        width: 28px !important;
        height: 28px !important;
    }

    .player-hud .player-name {
        font-size: 10px !important;
    }

    .player-hud .player-class,
    .player-hud .player-level {
        font-size: 8px !important;
    }

    .player-hud .health-bar.player-health {
        height: 16px !important;
        min-width: 80px !important;
    }

    .player-hud .health-bar-text {
        font-size: 9px !important;
    }

    /* Boss abilities frame - move up more */
    .boss-frame-bottom,
    #combat-boss-abilities-frame {
        bottom: 190px !important;
        padding: 3px 8px !important;
    }

    .boss-ability {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    /* Top menu - smaller buttons */
    .top-menu,
    #combat-top-menu {
        top: calc(var(--header-height) + 2px) !important;
        padding: 3px 5px !important;
        gap: 3px !important;
    }

    .menu-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
    }

    /* Boss/Player nameplates - smaller */
    .boss-nameplate {
        min-width: 140px !important;
        padding: 5px 10px 8px !important;
    }

    .boss-nameplate-name {
        font-size: 12px !important;
    }

    .boss-nameplate-hp {
        height: 14px !important;
    }

    .boss-nameplate-hp-text {
        font-size: 9px !important;
    }

    .player-nameplate {
        min-width: 120px !important;
        padding: 5px 10px 8px !important;
    }

    .player-nameplate-name {
        font-size: 10px !important;
    }

    .player-nameplate-hp {
        height: 12px !important;
    }

    .player-nameplate-hp-text {
        font-size: 8px !important;
    }

    /* XP bar - thinner */
    .xp-bar-container {
        height: 32px !important;
        padding: 3px 6px !important;
    }

    .xp-bar-track {
        height: 10px !important;
    }

    .xp-level,
    .xp-text,
    .xp-percent {
        font-size: 8px !important;
    }
}

/* ============================================
   MOBILE PORTRAIT - Narrow screens (<420px width)
   For small phones in portrait mode (iPhone SE, etc.)
   ============================================ */

@media (max-width: 420px) and (orientation: portrait) {
    :root {
        --header-height: 40px;
    }

    /* Mode Select View - fit in viewport */
    #view-modeselect {
        padding: 8px !important;
        overflow: hidden !important;
    }

    .mode-select-container {
        padding: 8px !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

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

    .mode-cards {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        flex: 1 !important;
        min-height: 0 !important;
    }

    .mode-card {
        flex: 1 !important;
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .mode-icon {
        font-size: 2rem !important;
        margin-bottom: 6px !important;
    }

    .mode-name {
        font-size: 0.9rem !important;
        margin-bottom: 4px !important;
    }

    .mode-desc {
        font-size: 0.7rem !important;
        margin-bottom: 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .mode-features {
        display: none !important;
    }

    .mode-card .btn {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }

    .mode-select-container .btn-back {
        margin-top: 8px !important;
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
        flex-shrink: 0 !important;
    }

    /* Main menu view - enable scrolling, remove centering */
    #view-mainmenu {
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding: 8px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Main menu container - full width, scrollable */
    .menu-container {
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* Character Creation - compact layout that fits viewport */
    .character-creation:not(.hidden) {
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .creation-title {
        font-size: 0.95rem !important;
        margin-bottom: 8px !important;
    }

    /* Class cards - 2x2 grid, very compact */
    .class-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .class-card {
        padding: 8px 4px !important;
        min-height: auto !important;
    }

    .class-icon {
        font-size: 1.3rem !important;
        margin-bottom: 2px !important;
    }

    .class-name {
        font-size: 0.7rem !important;
        margin-bottom: 0 !important;
    }

    .class-desc {
        display: none !important; /* Hide descriptions to save space */
    }

    /* Character creation form - compact */
    .creation-form {
        margin-top: 8px !important;
        gap: 8px !important;
        padding-bottom: 10px !important;
    }

    .char-name-input {
        padding: 10px !important;
        font-size: 0.9rem !important;
        width: 100% !important;
        max-width: none !important;
    }

    .creation-form .btn {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
        width: 100% !important;
    }

    /* Character Display - compact */
    .character-display {
        padding: 8px !important;
    }

    .character-card {
        padding: 10px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

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

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

    .character-class,
    .character-level {
        font-size: 0.7rem !important;
    }

    .character-stats {
        display: none !important; /* Hide on very narrow screens */
    }

    .xp-bar-container {
        height: 28px !important;
        margin-top: 6px !important;
    }

    .menu-buttons {
        flex-direction: column !important;
        gap: 6px !important;
        margin-top: 10px !important;
    }

    .menu-buttons .btn {
        width: 100% !important;
        padding: 10px 16px !important;
    }

    /* Header - ultra compact */
    .game-header {
        padding: 0 4px !important;
    }

    .game-logo {
        font-size: 11px !important;
        margin-right: 4px !important;
    }

    .game-nav-link {
        padding: 4px 6px !important;
    }

    .game-nav-link i {
        font-size: 12px !important;
    }

    .game-nav-link span {
        display: none !important;
    }

    .wallet-indicator {
        padding: 4px 6px !important;
        font-size: 9px !important;
    }

    .wallet-indicator .wallet-key {
        max-width: 50px !important;
    }

    .wallet-indicator .logout-btn {
        padding: 2px 5px !important;
        font-size: 8px !important;
    }
}

/* Very short portrait screens (low height < 700px) */
@media (max-height: 700px) and (orientation: portrait) {
    /* Main menu view - enable scrolling */
    #view-mainmenu {
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding: 6px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .menu-container {
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* Character Creation - compact for short screens */
    .character-creation {
        padding: 6px !important;
    }

    .creation-title {
        font-size: 0.9rem !important;
        margin-bottom: 6px !important;
    }

    .class-cards {
        gap: 5px !important;
        margin-bottom: 8px !important;
    }

    .class-card {
        padding: 6px 4px !important;
    }

    .class-icon {
        font-size: 1.2rem !important;
        margin-bottom: 2px !important;
    }

    .class-name {
        font-size: 0.65rem !important;
    }

    .class-desc {
        display: none !important;
    }

    .creation-form {
        margin-top: 6px !important;
        gap: 6px !important;
    }

    .char-name-input {
        padding: 8px !important;
        font-size: 0.85rem !important;
    }

    .creation-form .btn {
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================
   DESCENT (Phase A Task 9b): the Tidecaller's card and the locked Raid and Solo cards on small screens
   ============================================ */

/* Landscape phones: the four classes keep their row of four, and the Tidecaller's card runs under them as one compact line: the icon,
   the ribbon over the name over the stat line, then the caption */
@media (max-height: 500px) and (orientation: landscape) {
    #character-creation .class-card-descent {
        grid-template-columns: auto auto 1fr;
        grid-template-areas:
            "icon ribbon caption"
            "icon name caption"
            "icon meta caption";
        column-gap: var(--spacing-md);
    }

    #character-creation .class-card-descent .class-caption {
        display: flex;
        align-items: center;
        align-self: stretch;
        margin: 0 0 0 var(--spacing-xs);
        padding: 0 0 0 var(--spacing-md);
        border-top: none;
        border-left: 1px solid var(--border-dark);
    }
}

/* Narrow portrait phones: the feature card keeps some side room */
@media (max-width: 420px) and (orientation: portrait) {
    #character-creation .class-card-descent {
        padding: 10px 12px !important;
    }
}

/* Descent Phase A Task 11c (the 9b carries): on phones every mode-select button, the Dungeon's included, and Back are 44 px targets (they
   were 30 px tall on a 390 px phone) */
@media (max-width: 767px), (max-height: 500px) {
    .mode-card .btn,
    .mode-select-container .btn-back {
        min-height: 44px !important;
    }
}

/* ...and the Tidecaller's role line reads on a portrait phone: its feature card has the room the four small cards lack */
@media (max-width: 767px) and (orientation: portrait), (max-height: 700px) and (orientation: portrait) {
    #character-creation .class-card-descent .class-desc {
        display: block !important;
        margin: 2px 0 0;
        font-size: 12px;
        line-height: 1.4;
        color: var(--text-secondary);
    }
}

/* C1 client follow-up (Task 24's F7, older than C1): on a phone and a landscape phone the main menu's buttons, the header's nav links and
   Logout are 44 px targets. The header's targets grow through padding and minimum sizes, never larger icons or words; the header is 44 px
   tall to hold them; the nav links abut and the logo never shrinks (C1 client final round, re-review R-4: never an ellipsis; a narrow
   portrait phone shows the brand's crest instead of the name), so six links, the wallet's dot and Logout fit a 360 px phone. The main menu
   view scrolls (game-layout.css), so the taller buttons never clip a landscape phone. */
@media (max-width: 420px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (max-height: 500px) {
    :root {
        --header-height: 44px;
    }
}

@media (max-width: 767px), (max-height: 500px) {
    .menu-buttons .btn {
        min-height: 44px !important;
    }

    .game-nav {
        gap: 0 !important;
        min-width: 0;
    }

    .game-logo {
        flex: none;
        white-space: nowrap;
    }

    .game-nav-link {
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background: transparent;
        border-color: transparent;
    }

    .wallet-indicator {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-width: 0;
        background: transparent;
        flex-shrink: 0;
    }

    .wallet-indicator .logout-btn {
        min-height: 44px;
        min-width: 44px;
        border-color: transparent;
    }
}

/* re-review R-4: on a narrow portrait phone the logo is the brand's compact mark, its crest (the favicon's 96 px art at 24 px); the name stays
   in the markup for a screen reader. The wallet key gives way on every portrait phone, and in landscape the key the server already shortened
   gets no second ellipsis. The crest runs to 426 px: from 421 to 426 the full name's links overlapped the wallet's dot (last check nit 2) */
@media (max-width: 426px) and (orientation: portrait) {
    .game-logo {
        width: 24px;
        height: 24px;
        margin-right: 0 !important;
        font-size: 0 !important;
        color: transparent;
        background-image: url("/images/favicon-96x96.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}

@media (max-width: 767px) and (orientation: portrait) {
    .wallet-indicator .wallet-key {
        display: none !important;
    }

    /* B2 Task 18 follow-up (F15): an account with no wallet key shows "Connected" beside the dot, and the wallet kept its 6 px side
       padding; at 360 px the dot and the word ran 8 and 37 px into the Chests and Marketplace links. The word gives way like the key, for
       the eye only (a screen reader still reads it), and the wallet, transparent and borderless here, keeps no side padding */
    .wallet-indicator > span:not(.wallet-key) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .wallet-indicator {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 767px) and (orientation: landscape), (max-height: 500px) {
    .wallet-indicator .wallet-key {
        max-width: none;
        text-overflow: clip;
    }
}

/* ============================================
   PRINT STYLES (Disable)
   ============================================ */

@media print {
    body {
        display: none;
    }
}