/* Mobile Responsiveness CSS */
/* Optimized for landscape mobile gaming */

/* ======================================
   CSS Variables
   ====================================== */
:root {
    --mobile-action-btn-size: 48px;
    --mobile-joystick-size: 90px;
    --mobile-hotbar-height: 60px;
    --mobile-header-height: 36px;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ======================================
   Utility Classes
   ====================================== */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none !important;
}

.mobile-item-drag-indicator {
    position: fixed;
    z-index: 100000;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    pointer-events: none;
    transform: translate(-50%, -120%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 210, 70, 0.95);
    border-radius: 8px;
    background: rgba(10, 10, 12, 0.78);
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.75),
        0 0 12px rgba(255, 205, 50, 0.65);
}

.mobile-item-drag-indicator canvas {
    width: 36px;
    height: 36px;
    image-rendering: pixelated;
}

.mobile-item-drag-source {
    opacity: 0.42;
}

.mobile-item-drop-target {
    outline: 2px solid #ffd447 !important;
    box-shadow: 0 0 10px rgba(255, 212, 71, 0.9) !important;
}

.mobile-tap-tile-highlight {
    position: fixed;
    z-index: 9993;
    box-sizing: border-box;
    pointer-events: none;
    transform-origin: center;
    border: 2px solid rgba(255, 224, 92, 0.88);
    background: rgba(255, 219, 72, 0.13);
    box-shadow:
        inset 0 0 8px rgba(255, 238, 145, 0.38),
        0 0 8px rgba(255, 214, 58, 0.48);
    animation: mobile-tap-tile-feedback 520ms ease-out forwards;
}

@keyframes mobile-tap-tile-feedback {
    0% {
        opacity: 0;
        transform: scale(0.76);
    }

    18% {
        opacity: 1;
        transform: scale(0.94);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* ======================================
   Touch Device Detection
   Use max-height for landscape detection
   ====================================== */

/* Landscape mobile: height <= 500px catches most phones in landscape */
@media screen and (max-height: 500px),
screen and (max-width: 768px) {

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: none !important;
    }

    body.game-active .mobile-only {
        display: flex !important;
    }

    /* Body - prevent scrolling and bouncing */
    body {
        overflow: hidden;
        touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* Game wrapper fills entire screen */
    body:not(.game-active) #game-wrapper {
        display: none !important;
    }

    body.game-active #game-wrapper {
        display: flex !important;
        flex-direction: row !important;
        min-width: unset !important;
        min-height: unset !important;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    /* Allow oogwrap to be visible for equipment but hide layout impact */
    body.game-active #game-wrapper .oogwrap {
        display: block !important;
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        overflow: visible;
        pointer-events: none;
        z-index: 9990;
    }

    /* Hide specific desktop elements inside oogwrap */
    .oogwrap .minimap-container,
    .oogwrap .character-status {
        display: none !important;
    }

    /* Ensure equipment wrapper is visible */
    body.game-active .equipment-options-wrapper {
        display: block !important;
        pointer-events: auto;
    }

    /* Main game area - full width/height */
    #game-wrapper .main {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        position: relative;
    }

    /* Hide middle section (desktop hotbar area) */
    #game-wrapper .main .middle {
        display: none !important;
    }

    /*
     * Keep the native 15x11 tile viewport ratio on phones. Stretching both
     * dimensions to 100% turns square SQMs into rectangles: movement then
     * appears faster vertically in portrait and horizontally in landscape.
     */
    #game-wrapper .main .upper {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .canvas-wrapper {
        width: min(100%, 136.363636dvh) !important;
        height: auto !important;
        aspect-ratio: 480 / 352;
        min-width: 0;
        min-height: 0;
        max-height: 100%;
        flex: 0 0 auto;
        position: relative;
    }

    #screen {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

    /* Hide original hotbar */
    .hotbar {
        display: none !important;
    }

    /* Context menus - hide on mobile */
    .contextmenu {
        display: none !important;
    }

    /* Windows positioned on right side for mobile */
    .window {
        pointer-events: auto !important;
        position: fixed !important;
        top: 170px !important;
        left: auto !important;
        right: 5px !important;
        transform: scale(0.85);
        /* Slightly smaller to fit better */
        transform-origin: top right;
        width: 190px !important;
        /* Visual width matches equipment */
        max-width: 60vw;
        max-height: 60vh;
        z-index: 9995;
        overflow: visible;
        font-size: 11px;
    }

    /* Battle window stays on the right side */
    #battle-window {
        z-index: 9990 !important;
        top: 170px !important;
        right: 5px !important;
        left: auto !important;
        width: clamp(126px, 34vw, 142px) !important;
        max-width: calc(100vw - 10px) !important;
        max-height: calc(100dvh - 180px) !important;
        transform: none !important;
        transform-origin: top right;
        overflow: hidden !important;
        border: 1px solid rgba(102, 102, 102, 0.9);
        border-radius: 5px;
        background: rgba(18, 18, 20, 0.96);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.68);
    }

    #battle-window > .header {
        box-sizing: border-box;
        height: 28px !important;
        min-height: 28px;
        padding: 2px 3px !important;
        cursor: default;
    }

    #battle-window > .header > .title {
        min-width: 0;
        padding-left: 5px;
        color: #f1f1f1;
        font-size: 11px;
        white-space: nowrap;
    }

    #battle-window > .header > .symbol-button {
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 0 !important;
        line-height: 20px !important;
        font-size: 13px !important;
    }

    #battle-window > .body {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        grid-auto-rows: unset !important;
        gap: 2px !important;
        box-sizing: border-box;
        width: 100%;
        min-height: 44px !important;
        max-height: calc(100dvh - 212px) !important;
        padding: 3px !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        align-content: unset !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        touch-action: pan-y;
        scrollbar-width: thin;
    }

    #battle-window > .footer {
        display: none !important;
    }

    #battle-window .battle-window-target-wrapper {
        position: relative;
        display: flex;
        flex: 0 0 44px;
        box-sizing: border-box;
        width: 100%;
        height: 44px;
        min-height: 44px;
        margin: 0;
        overflow: hidden;
        border: 1px solid #151515;
        border-left: 3px solid #d3b45d;
        border-radius: 3px;
        background:
            linear-gradient(90deg, rgba(44, 44, 48, 0.98), rgba(25, 25, 28, 0.98)),
            url("/png/bg2.png");
        -webkit-tap-highlight-color: transparent;
    }

    #battle-window .battle-window-player {
        border-left-color: #62bfe8;
    }

    #battle-window .battle-window-targeted {
        border-color: #ff4938;
        border-left-color: #ffcf4c;
        background: linear-gradient(90deg, rgba(91, 38, 28, 0.98), rgba(38, 24, 25, 0.98));
        box-shadow:
            inset 0 0 0 1px rgba(255, 205, 69, 0.65),
            0 0 7px rgba(255, 63, 44, 0.75);
        animation: mobile-battle-target-pulse 1.15s ease-in-out infinite;
    }

    #battle-window .battle-window-targeted::after {
        content: "◆";
        position: absolute;
        top: 1px;
        right: 3px;
        color: #ffd85a;
        font-size: 8px;
        text-shadow: 0 0 4px #ff3a24;
    }

    #battle-window .battle-window-target-canvas {
        display: flex;
        flex: 0 0 36px;
        width: 36px;
        height: 42px;
        align-items: flex-end;
        justify-content: center;
        order: 0;
    }

    #battle-window .battle-window-target-canvas > canvas {
        width: 32px;
        height: 32px;
        image-rendering: pixelated;
    }

    #battle-window .battle-window-target-stats {
        order: 1;
        min-width: 0;
        padding: 3px 4px 3px 1px;
        justify-content: center;
    }

    #battle-window .battle-window-target-title {
        overflow: hidden;
        margin-bottom: 3px;
        color: #f0cf72;
        font-size: 10px;
        line-height: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #battle-window .battle-window-player .battle-window-target-title {
        color: #8edbff;
    }

    #battle-window .battle-window-targeted .battle-window-target-title {
        color: #fff2bb;
    }

    #battle-window .battle-window-bar-wrapper {
        display: block;
    }

    #battle-window .battle-window-target-stats > .battle-window-bar-wrapper + .battle-window-bar-wrapper {
        display: none !important;
    }

    #battle-window .bar-holder {
        box-sizing: border-box;
        height: 10px;
        margin: 0;
        overflow: hidden;
        border-color: #090909;
        border-radius: 3px;
        background: #161616;
    }

    #battle-window .battle-window-target-stats-bar.health {
        background: linear-gradient(180deg, #29d147, #0b8f27);
        transition: width 120ms linear;
    }

    #battle-window .bar-text {
        font-size: 8px;
        line-height: 8px;
    }

    #battle-window .battle-window-empty {
        display: none;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 7px;
        color: #aaa;
        font-size: 9px;
        font-style: italic;
        text-align: center;
    }

    @keyframes mobile-battle-target-pulse {
        0%, 100% {
            box-shadow: inset 0 0 0 1px rgba(255, 205, 69, 0.5), 0 0 4px rgba(255, 63, 44, 0.45);
        }
        50% {
            box-shadow: inset 0 0 0 1px rgba(255, 223, 117, 0.82), 0 0 9px rgba(255, 63, 44, 0.88);
        }
    }

    /* Container windows (backpack, loot, corpse) open on the LEFT side */
    /* Target any window with containerIndex attribute (dynamically created) */
    .window[containerIndex] {
        left: 5px !important;
        right: auto !important;
        top: 50px !important;
        transform-origin: top left;
        /* Four inventory slots fit exactly in one row. Keeping the panel
           narrow also leaves the game canvas unobstructed on phones. */
        width: 146px !important;
        max-width: calc(100vw - 10px) !important;
    }

    .window .header {
        height: 20px !important;
        line-height: 20px !important;
        font-size: 10px !important;
    }

    .window .body {
        max-height: 40vh !important;
        overflow-y: auto !important;
        display: grid;
        grid-template-columns: repeat(4, 32px);
        grid-auto-rows: 32px;
        gap: 2px;
        justify-content: start;
        padding: 2px !important;
    }

    .window .slot {
        width: 32px !important;
        height: 32px !important;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        border: 1px solid #444;
        /* Add border to see slots better */
    }

    /* Larger touch targets */
    .slot {
        width: 36px !important;
        height: 36px !important;
    }

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

    /* Equipment panel - show in top right on mobile */
    .equipment.wrapper {
        position: fixed !important;
        top: 50px !important;
        right: 5px !important;
        left: auto !important;
        z-index: 9998;
        background: rgba(30, 30, 30, 0.95);
        border: 1px solid #555;
        border-radius: 6px;
        padding: 4px;
        transform: scale(0.75);
        transform-origin: top right;
    }

    body.game-active .equipment-options-wrapper {
        display: block !important;
    }

    .equipment-column {
        gap: 2px !important;
    }

    .equipment.wrapper .slot {
        width: 32px !important;
        height: 32px !important;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .equipment.wrapper .slot canvas {
        width: 28px !important;
        height: 28px !important;
    }

    #player-capacity {
        font-size: 10px !important;
        padding: 2px !important;
    }

    .equipment-buttons {
        display: none !important;
    }
}

/* ======================================
   Mobile Status Bar (Top)
   ====================================== */
#mobile-status-bar {
    display: none;
    position: fixed;
    top: 0;
    left: var(--safe-area-left);
    right: var(--safe-area-right);
    height: var(--mobile-header-height);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.6));
    border-bottom: 1px solid #444;
    z-index: 10001;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2px 12px;
    box-sizing: border-box;
    gap: 12px;
}

@media screen and (max-height: 500px),
screen and (max-width: 768px) {
    body.game-active #mobile-status-bar {
        display: flex;
    }
}

.mobile-bar-container {
    flex: 1 1 auto;
    max-width: 400px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.mobile-bar {
    flex: 1;
    height: 18px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.mobile-bar-fill {
    height: 100%;
    transition: width 0.2s ease;
}

.mobile-bar-fill.health {
    background: linear-gradient(to bottom, #22cc22, #118811);
}

.mobile-bar-fill.mana {
    background: linear-gradient(to bottom, #3388ff, #2255aa);
}

.mobile-bar-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    line-height: 18px;
    color: white;
    text-shadow: 1px 1px 2px black, -1px -1px 2px black;
    font-weight: bold;
}

#mobile-menu-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 16px;
    flex-shrink: 0;
    min-height: 32px;
    padding: 0;
}

/* ======================================
   Mobile Action Bar (Bottom Overlay)
   Overlay style - doesn't take space from game
   ====================================== */
#mobile-action-bar {
    display: none;
    position: fixed;
    bottom: 15px;
    left: 10px;
    right: 10px;
    height: var(--mobile-hotbar-height);
    background: transparent;
    z-index: 10001;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
    padding-bottom: var(--safe-area-bottom);
    box-sizing: border-box;
    pointer-events: none;
}

#mobile-action-bar>* {
    pointer-events: auto;
}

@media screen and (max-height: 500px),
screen and (max-width: 768px) {
    body.game-active #mobile-action-bar {
        display: flex;
    }
}

/* ======================================
   Virtual Joystick (Left Side)
   ====================================== */
#mobile-joystick-zone {
    width: var(--mobile-joystick-size);
    height: var(--mobile-joystick-size);
    position: relative;
    flex-shrink: 0;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

#virtual-joystick {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(32, 34, 37, 0.98) 0 25%, transparent 26%),
        radial-gradient(circle, rgba(48, 50, 54, 0.94) 0%, rgba(23, 24, 27, 0.96) 68%, rgba(12, 13, 15, 0.98) 100%);
    border: 2px solid rgba(115, 118, 124, 0.72);
    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.58),
        inset 0 1px 2px rgba(255, 255, 255, 0.12),
        inset 0 -4px 9px rgba(0, 0, 0, 0.42);
}

.joystick-arrow {
    position: absolute;
    z-index: 2;
    width: 0;
    height: 0;
    opacity: 0.72;
    filter: drop-shadow(0 1px 1px #000);
    transition: opacity 60ms linear, filter 60ms linear;
}

.joystick-arrow-north {
    top: 12%;
    left: 50%;
    margin-left: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid #a9aaad;
}

.joystick-arrow-east {
    top: 50%;
    right: 12%;
    margin-top: -6px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #a9aaad;
}

.joystick-arrow-south {
    bottom: 12%;
    left: 50%;
    margin-left: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid #a9aaad;
}

.joystick-arrow-west {
    top: 50%;
    left: 12%;
    margin-top: -6px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid #a9aaad;
}

#virtual-joystick[data-direction="north"] .joystick-arrow-north,
#virtual-joystick[data-direction="east"] .joystick-arrow-east,
#virtual-joystick[data-direction="south"] .joystick-arrow-south,
#virtual-joystick[data-direction="west"] .joystick-arrow-west {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85));
}

#joystick-knob {
    position: absolute;
    z-index: 3;
    width: 25%;
    height: 25%;
    top: 37.5%;
    left: 37.5%;
    box-sizing: border-box;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #54565a 0%, #303236 48%, #1b1c1f 100%);
    border: 2px solid #55585d;
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.65),
        inset 0 1px 1px rgba(255, 255, 255, 0.12);
    transition: transform 45ms linear;
}

/* ======================================
   Mobile Hotbar (Center) - Skill slots
   ====================================== */
#mobile-hotbar {
    display: flex;
    flex: 0 0 auto;
    width: 198px;
    box-sizing: border-box;
    gap: 6px;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    border: 1px solid #444;
    max-width: 250px;
    overflow-x: auto;
    scrollbar-width: none;
}

#mobile-hotbar::-webkit-scrollbar {
    display: none;
}

.mobile-hotbar-slot {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border: 2px solid #555;
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.mobile-hotbar-slot:active {
    transform: scale(0.95);
    border-color: #888;
}

.mobile-hotbar-slot canvas {
    width: 32px;
    height: 32px;
}

.mobile-slot-key {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 10px;
    color: #999;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
}

.mobile-slot-duration {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    pointer-events: none;
}

/* ======================================
   Action Buttons (Right Side)
   ====================================== */
#mobile-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: flex-end;
}

.mobile-action-btn {
    width: var(--mobile-action-btn-size);
    height: var(--mobile-action-btn-size);
    min-width: var(--mobile-action-btn-size);
    min-height: var(--mobile-action-btn-size);
    border-radius: 50%;
    border: 3px solid;
    color: white;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    padding: 0;
}

.mobile-action-btn:active {
    transform: scale(0.9);
    filter: brightness(1.2);
}

.mobile-action-btn.attack {
    background: linear-gradient(145deg, #cc2222, #881111);
    border-color: #ff5555;
}

.mobile-action-btn.inventory {
    background: linear-gradient(145deg, #aa8833, #775522);
    border-color: #ddaa44;
}

.mobile-action-btn.equipment {
    background: linear-gradient(145deg, #8844aa, #553377);
    border-color: #aa66dd;
}

.mobile-action-btn.chat {
    background: linear-gradient(145deg, #22aaaa, #117777);
    border-color: #44dddd;
}

/* ======================================
   Movable Mobile Controls
   ====================================== */
.mobile-layout-control {
    touch-action: none !important;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-layout-control.mobile-control-positioned {
    transform: translate3d(
        var(--mobile-control-x, 0px),
        var(--mobile-control-y, 0px),
        0
    ) !important;
}

.mobile-layout-control.mobile-control-held,
.mobile-layout-control.mobile-control-dragging {
    z-index: 20050 !important;
    outline: 3px solid #5ffcff;
    outline-offset: 3px;
    filter: brightness(1.3) saturate(1.25);
    box-shadow:
        0 0 8px rgba(95, 252, 255, 0.95),
        0 0 18px rgba(95, 252, 255, 0.72),
        0 4px 12px rgba(0, 0, 0, 0.75) !important;
}

.mobile-layout-control.mobile-control-dragging {
    opacity: 0.92;
    outline-color: #fff178;
    box-shadow:
        0 0 10px rgba(255, 241, 120, 0.95),
        0 0 22px rgba(95, 252, 255, 0.76),
        0 5px 14px rgba(0, 0, 0, 0.8) !important;
}

.mobile-layout-settings-row {
    display: none;
}

@media screen and (max-height: 500px),
screen and (max-width: 768px) {
    .mobile-layout-settings-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    #reset-mobile-controls {
        min-height: 36px;
        padding: 7px 12px;
        color: #dfffff;
        border: 1px solid #44dddd;
        background: rgba(20, 75, 80, 0.75);
        font-weight: bold;
    }
}

/* ======================================
   Mobile Chat Overlay
   ====================================== */
@media screen and (max-height: 500px),
screen and (max-width: 768px) {

    /* Chat is hidden by default on mobile */
    #game-wrapper .main .lower {
        display: none !important;
    }

    /* When chat is active (toggled via JS) */
    #game-wrapper .main .lower.mobile-chat-active {
        display: flex !important;
        position: fixed !important;
        bottom: 70px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-width: 500px !important;
        height: clamp(220px, 44vh, 300px) !important;
        max-height: none !important;
        background: rgba(20, 20, 20, 0.95) !important;
        border: 2px solid #44dddd !important;
        border-radius: 8px !important;
        z-index: 10000 !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #game-wrapper .main .lower.mobile-chat-active.mobile-chat-expanded {
        height: min(68vh, 430px) !important;
    }

    .mobile-chat-active .chatbox-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        min-width: 0;
    }

    #game-wrapper .main .lower .wrapper-header {
        display: flex !important;
        visibility: visible !important;
        flex: 0 0 48px;
        width: 100%;
        min-width: 0;
        padding: 4px;
        box-sizing: border-box;
        gap: 3px;
        align-items: center;
        background: rgba(35, 35, 38, 0.98);
        border-bottom: 1px solid #111;
    }

    #game-wrapper .main .lower .wrapper-header > .symbol-button-long {
        display: flex !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        align-items: center;
        justify-content: center;
        font-size: 24px !important;
        border: 1px solid #555;
        border-radius: 5px;
        background: rgba(15, 15, 17, 0.92);
    }

    #game-wrapper .main .lower .chat-header {
        flex: 1 1 auto;
        min-width: 0;
        height: 40px;
        overflow-x: hidden;
    }

    #game-wrapper .main .lower .channel-header,
    #game-wrapper .main .lower .chat-title {
        min-width: 0;
        height: 40px;
    }

    #game-wrapper .main .lower .chat-title span {
        margin: 0 12px;
        white-space: nowrap;
    }

    .mobile-chat-active #chat-text {
        flex: 1;
        min-height: 92px;
        overflow-y: auto;
    }

    .mobile-chat-active .chat-footer {
        padding: 4px;
        display: flex;
        gap: 4px;
    }

    .mobile-chat-active #chat-input {
        flex: 1;
        font-size: 14px;
        padding: 8px;
        padding-left: 34px;
        border-radius: 4px;
    }

    .mobile-chat-active #chat-input:disabled {
        pointer-events: none;
    }

    .mobile-chat-active .chat-input-wrapper.locked {
        cursor: text;
    }

    #game-wrapper .main .lower #chat-lock-resize {
        color: #7fffff !important;
        border-color: #44dddd !important;
        background: rgba(20, 90, 95, 0.75) !important;
        box-shadow: inset 0 0 8px rgba(60, 230, 235, 0.35);
        text-shadow: 0 0 6px rgba(100, 255, 255, 0.9);
    }
}

@media screen and (max-height: 500px) and (orientation: landscape) {
    #game-wrapper .main .lower.mobile-chat-active {
        height: min(220px, calc(100dvh - 76px)) !important;
    }

    #game-wrapper .main .lower.mobile-chat-active.mobile-chat-expanded {
        top: 8px !important;
        bottom: 8px !important;
        height: auto !important;
        max-height: none !important;
    }
}

/*
 * Keep the composer visible above Android/iOS software keyboards.
 * Android keyboard accessory bars are not always included in visualViewport,
 * so the focused composer is deliberately pinned below the mobile status bar
 * instead of being aligned to the reported bottom edge.
 */
@media screen and (max-height: 500px),
screen and (max-width: 768px) {
    #game-wrapper .main .lower.mobile-chat-active.mobile-chat-keyboard-open,
    #game-wrapper .main .lower.mobile-chat-active:focus-within {
        position: fixed !important;
        top: var(
            --mobile-chat-viewport-top,
            calc(var(--mobile-header-height, 32px) + 4px)
        ) !important;
        bottom: auto !important;
        left: var(--mobile-chat-viewport-center-x, 50%) !important;
        width: min(calc(var(--mobile-chat-viewport-width, 100vw) - 8px), 500px) !important;
        height: var(--mobile-chat-viewport-height, 52px) !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: translateX(-50%) !important;
        box-sizing: border-box !important;
        z-index: 10002 !important;
    }

    #game-wrapper .main .lower.mobile-chat-keyboard-open .chatbox-wrapper,
    #game-wrapper .main .lower.mobile-chat-active:focus-within .chatbox-wrapper {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #game-wrapper .main .lower.mobile-chat-keyboard-open #chat-text,
    #game-wrapper .main .lower.mobile-chat-active:focus-within #chat-text {
        display: none !important;
        min-height: 0 !important;
    }

    #game-wrapper .main .lower.mobile-chat-keyboard-open .chat-footer,
    #game-wrapper .main .lower.mobile-chat-active:focus-within .chat-footer {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: stretch !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 4px !important;
        box-sizing: border-box !important;
        background: rgba(20, 20, 22, 0.99) !important;
    }

    #game-wrapper .main .lower.mobile-chat-keyboard-open #chat-input-wrapper,
    #game-wrapper .main .lower.mobile-chat-active:focus-within #chat-input-wrapper {
        min-height: 40px !important;
    }

    #game-wrapper .main .lower.mobile-chat-keyboard-open #chat-input,
    #game-wrapper .main .lower.mobile-chat-active:focus-within #chat-input {
        display: block !important;
        height: auto !important;
        min-height: 40px !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        line-height: 20px !important;
        color: #ffff66 !important;
        caret-color: white !important;
        -webkit-user-select: text !important;
        user-select: text !important;
        touch-action: manipulation;
    }

    #game-wrapper .main .lower.mobile-chat-keyboard-open #chat-say-loudness,
    #game-wrapper .main .lower.mobile-chat-active:focus-within #chat-say-loudness {
        flex: 0 0 38px !important;
        min-width: 38px !important;
    }

    #game-wrapper .main .lower.mobile-chat-keyboard-open #send-chat-message,
    #game-wrapper .main .lower.mobile-chat-active:focus-within #send-chat-message {
        flex: 0 0 58px !important;
        min-width: 58px !important;
        font-size: 12px !important;
    }

    /*
     * While typing, the input always has priority over the channel toolbar.
     * Its inline display fallback is left intact; zero sizing avoids a stale
     * PWA stylesheet re-exposing the header over the composer.
     */
    #game-wrapper .main .lower.mobile-chat-keyboard-open .wrapper-header,
    #game-wrapper .main .lower.mobile-chat-active:focus-within .wrapper-header {
        flex: 0 0 0 !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Menu button in action bar */
#mobile-menu-btn.mobile-action-btn {
    background: linear-gradient(145deg, #555, #333);
    border-color: #888;
    font-size: 18px;
}

/* ======================================
   Landscape Specific Optimizations
   ====================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {

    :root {
        --mobile-action-btn-size: 44px;
        --mobile-joystick-size: 80px;
        --mobile-hotbar-height: 50px;
        --mobile-header-height: 32px;
    }

    /* Compact status bar */
    #mobile-status-bar {
        height: 28px;
    }

    .mobile-bar {
        height: 16px;
    }

    .mobile-bar-text {
        font-size: 10px;
        line-height: 16px;
    }

    #mobile-menu-btn {
        width: 28px;
        height: 28px;
        min-height: 28px;
        font-size: 14px;
    }

    /* Joystick positioning - higher for landscape */
    #mobile-action-bar {
        bottom: 12px;
        left: 8px;
        right: 8px;
    }

    /* Smaller touch targets in compact landscape */
    .mobile-action-btn {
        font-size: 16px;
    }

    #mobile-hotbar {
        width: 164px;
        gap: 4px;
        padding: 4px 6px;
    }

    .mobile-hotbar-slot {
        width: 34px;
        height: 34px;
    }

    .mobile-hotbar-slot canvas {
        width: 28px;
        height: 28px;
    }

    /* The desktop-sized hotkey editor is taller than many landscape phones.
       Keep the entire window inside the visual viewport and scroll only its
       central list. This also keeps the text editor visible above the Android
       software keyboard. */
    #hotbar-config-modal {
        position: fixed !important;
        top: 6px !important;
        left: 50% !important;
        width: min(540px, calc(100vw - 16px)) !important;
        height: min(344px, calc(100dvh - 12px)) !important;
        max-width: none !important;
        max-height: calc(100dvh - 12px) !important;
        transform: translateX(-50%) !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    #hotbar-config-modal .modal-header {
        height: 24px;
        box-sizing: border-box;
        padding: 3px 28px 3px 6px;
        font-size: 14px;
        line-height: 18px;
    }

    #hotbar-config-modal .modal-body {
        display: flex;
        flex-direction: column;
        height: calc(100% - 24px);
        min-height: 0;
        padding: 6px;
        box-sizing: border-box;
        overflow: hidden;
    }

    #hotbar-config-modal .hotbar-config-tabs {
        flex: 0 0 auto;
        gap: 4px;
        margin-bottom: 5px;
    }

    #hotbar-config-modal .hotbar-config-tabs button {
        height: 30px;
        min-width: 0;
        margin: 0;
        padding: 3px 2px;
        font-size: 11px;
    }

    #hotbar-config-modal .hotbar-config-content {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #hotbar-config-modal .hotbar-config-item-row,
    #hotbar-config-modal .hotbar-config-spell-row {
        min-height: 38px;
        gap: 8px;
        padding: 3px 4px;
        box-sizing: border-box;
        font-size: 12px;
    }

    #hotbar-config-modal .hotbar-config-item-row canvas,
    #hotbar-config-modal .hotbar-config-spell-row canvas {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
    }

    #hotbar-config-modal .hotbar-config-modes h3 {
        margin: 2px 0 5px;
        font-size: 13px;
    }

    #hotbar-config-modal .hotbar-config-modes button,
    #hotbar-config-modal .hotbar-config-text button {
        margin: 4px 0;
        padding: 7px;
    }

    #hotbar-config-modal .hotbar-config-text input {
        height: 32px;
        margin-bottom: 5px;
        padding: 6px;
        font-size: 14px;
    }

    #hotbar-config-modal hr {
        flex: 0 0 1px;
        margin: 4px;
    }

    #hotbar-config-modal .hotbar-config-footer {
        flex: 0 0 auto;
        min-height: 27px;
    }

    #hotbar-config-modal .hotbar-config-empty {
        min-height: 80px;
    }
}

/* ======================================
   Portrait Mode (Phone Upright)
   ====================================== */
@media screen and (max-width: 768px) and (orientation: portrait) {

    :root {
        --mobile-action-btn-size: 42px;
        --mobile-joystick-size: 96px;
    }

    /* Show chat in portrait */
    #game-wrapper .main .lower {
        display: block !important;
        max-height: 80px;
        flex: 0 0 auto;
    }

    /* Bottom bar positions */
    #mobile-action-bar {
        bottom: 90px;
        left: 8px;
        right: 8px;
        height: 96px;
        display: grid !important;
        grid-template-columns: var(--mobile-joystick-size) minmax(0, 1fr);
        grid-template-rows: 44px 44px;
        column-gap: 8px;
        row-gap: 6px;
        align-items: center;
        justify-content: initial;
    }

    #mobile-joystick-zone {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: end;
    }

    #mobile-hotbar {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        width: 156px;
        max-width: 100%;
        gap: 4px;
        padding: 4px 6px;
        overflow: hidden;
    }

    .mobile-hotbar-slot {
        width: 34px;
        height: 34px;
    }

    .mobile-hotbar-slot canvas {
        width: 28px;
        height: 28px;
    }

    #mobile-actions {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        gap: 6px;
    }

    .mobile-action-btn {
        border-width: 2px;
        font-size: 17px;
    }
}

/* ======================================
   iOS Safari / Notch Support
   ====================================== */
@supports (padding: env(safe-area-inset-top)) {
    #mobile-status-bar {
        padding-top: env(safe-area-inset-top);
        height: calc(var(--mobile-header-height) + env(safe-area-inset-top));
    }
}

/* Prevent iOS rubber banding */
@supports (-webkit-touch-callout: none) {

    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    #game-wrapper {
        height: -webkit-fill-available;
    }
}

/* ======================================
   Debug Statistics - Make Smaller on Mobile
   ====================================== */
@media screen and (max-height: 500px),
screen and (max-width: 768px) {
    #debug-statistics {
        font-size: 8px !important;
        top: 40px !important;
        left: 4px !important;
        max-width: 200px;
        background: rgba(0, 0, 0, 0.7);
        padding: 4px;
        border-radius: 4px;
    }
}