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

/* ======================================
   CSS Variables
   ====================================== */
:root {
    --mobile-action-btn-size: 44px;
    --mobile-joystick-size: 90px;
    --mobile-hotbar-height: 100px;
    --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;
}

/* ======================================
   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: 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%;
    }

    /* ======================================
       Login Screen — remove min dimensions
       ====================================== */
    #login-wrapper {
        min-width: unset !important;
        min-height: unset !important;
    }

    #login-wrapper #login-inner {
        min-width: unset !important;
        min-height: unset !important;
    }

    /* ======================================
       Account Manager — mobile overrides
       ====================================== */
    /* The card (~500px) is taller than a landscape phone (~375px). With the
       inline justify-content:center and no overflow it was clipped at both
       ends — "Enter Game World" half off-screen, Logout/Delete unreachable.
       Make the wrapper its own scroll container; auto margins on the card
       still center it whenever it fits. */
    #account-manager-wrapper {
        justify-content: flex-start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    #account-manager-wrapper > div {
        padding: 20px 16px !important;
        max-width: 100% !important;
        width: 92% !important;
        border-radius: 8px !important;
        margin: auto !important;
        flex-shrink: 0;
    }

    #account-manager-wrapper h2 {
        font-size: 16px !important;
        margin-bottom: 14px !important;
    }

    #am-play-btn {
        font-size: 15px !important;
        padding: 12px !important;
    }

    #am-character-name {
        font-size: 14px !important;
    }

    /* Pixel font — slightly larger on mobile for readability.
       :not(#am-play-btn) keeps this id+element rule from overriding the
       #am-play-btn size above. */
    #login-wrapper button,
    #account-manager-wrapper button:not(#am-play-btn) {
        font-size: 10px !important;
    }

    #login-wrapper label,
    #login-wrapper .login-divider,
    #login-wrapper span,
    #login-wrapper p {
        font-size: 9px !important;
    }

    /* Game wrapper fills entire screen. Visibility is NOT forced here:
       show/hideGameInterface toggle it inline, and forcing display: flex
       made the mobile HUD (status bars, joystick, equipment) render on top
       of the Account Manager before the player had entered the world. */
    #game-wrapper {
        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 */
    #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 */
    .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;
    }

    /* Desktop chat drag-handle: on mobile the chat is an overlay, and the
       7px handle only took height away from the canvas. */
    #chat-resizer {
        display: none !important;
    }

    /* Canvas takes full space */
    #game-wrapper .main .upper {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .canvas-wrapper {
        width: 100% !important;
        height: 100% !important;
        /* canvas.css sets min-width: 480px / min-height: 352px for desktop.
           min-* beats width/height, so on a 375px phone the wrapper stayed
           480px wide, the canvas's max-width: 100% resolved against it, and
           ~105px of the game world was clipped off-screen in portrait. */
        min-width: 0 !important;
        min-height: 0 !important;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Preserve the canvas 480×352 aspect ratio so sprites don't stretch.
       The canvas grows to fit the wrapper, centered, with pixel-perfect rendering. */
    #screen {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        aspect-ratio: 480 / 352;
        display: block;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: crisp-edges;
    }

    /* Never over 480×352 CSS px on the HD screen (?hd=1, 960×704 inside the same box):
       only there, so the 32 px screen grows on taller phones as before */
    html.hd #screen {
        max-width: min(100%, 480px) !important;
        max-height: min(100%, 352px) !important;
    }

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

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

    /* Modals — responsive on mobile */
    .modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 90vw !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        z-index: 50000 !important;
    }

    .modal .modal-body {
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    /* Login-screen modals are laid out in flow (login.css makes them
       position: relative) inside #login-inner, which already scrolls. The
       centering offsets above then shifted them sideways/up instead of
       centering, and the height caps added a second, nested scroll area. */
    #login-wrapper .modal {
        top: auto !important;
        left: auto !important;
        transform: none !important;
        max-width: 360px !important; /* login.css width; 90vw stretched it to ~730px in landscape */
        max-height: none !important;
        overflow: visible !important;
    }

    #login-wrapper .modal .modal-body {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Settings modal specifically */
    #settings-modal {
        width: 90vw !important;
        max-width: 380px !important;
    }

    /* ☰ menu: the windows/actions that live in the hidden desktop
       .equipment-buttons column (Touch.__bindMobileMenu) */
    #mobile-menu-row {
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 10px;
    }

    #mobile-menu-row button {
        flex: 1 1 30%;
        min-height: 40px;
        font-size: 12px;
        touch-action: manipulation;
    }

    #mobile-menu-row .mobile-menu-logout {
        border-color: #aa3333;
        color: #ff8888;
    }

    /* Mouse control and custom resolution don't apply to touch screens
       (custom resolution would scale the canvas off-screen). */
    #settings-modal .settings-desktop-only {
        display: none !important;
    }

    /* The 5 display checkboxes (~500px) sat on one nowrap row inside a
       ~320px modal: the first and last were clipped off both sides. */
    #settings-modal .checkboxes {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px 0;
    }

    #settings-modal .checkboxes label {
        flex: 1 1 45%;
        min-height: 28px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Spellbook modal */
    #spellbook-list {
        width: auto !important;
        max-width: 85vw !important;
    }

    /* Close button for modals — ensure visible and tappable */
    .modal .close-button-transparent {
        position: absolute !important;
        top: 4px !important;
        right: 8px !important;
        z-index: 50001 !important;
        font-size: 22px !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Add tap-to-close overlay behind modals */
    .modal .modal-footer button {
        min-height: 40px;
        min-width: 80px;
        font-size: 13px;
    }

    /* 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, below equipment */
    #battle-window {
        z-index: 9990 !important;
        top: auto !important;
        bottom: 120px !important;
        right: 5px !important;
        left: auto !important;
        transform: scale(0.8);
        transform-origin: bottom right;
        max-height: 30vh;
    }

    /* 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;
    }

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

    .window .body {
        max-height: 40vh !important;
        overflow-y: auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 2px !important;
    }

    .window .slot {
        width: 32px !important;
        height: 32px !important;
        margin: 1px !important;
        border: 1px solid #444;
        /* Add border to see slots better */
    }

    /* Mobile window resize handle */
    .window > .footer {
        height: 18px !important;
        min-height: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: ns-resize !important;
        touch-action: none !important;
        background: #181818 !important;
        border-top: 1px solid #444 !important;
    }

    .window > .footer::after {
        content: "";
        display: block;
        width: 32px;
        height: 4px;
        background: #888;
        border-radius: 2px;
    }

    #battle-window .battle-window-target-wrapper {
        height: 26px !important;
    }

    #battle-window .battle-window-target-title {
        font-size: 9px !important;
    }

    #battle-window .bar-holder {
        height: 7px !important;
    }

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

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

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

    /* Equipment panel (slots, cap, keys, fight/chase mode) — hidden by
       default on mobile so it doesn't sit on the HUD column; the 🛡 action
       button toggles body.mobile-equipment-open (touch.js). */
    .equipment.wrapper {
        display: none;
        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.mobile-equipment-open .equipment.wrapper {
        display: flex;
    }

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

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

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

    .equipment.wrapper .slot canvas {
        width: 32px !important;
        height: 32px !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) {
    #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) {
    #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;
}

#virtual-joystick {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(40, 40, 40, 0.85) 0%, rgba(20, 20, 20, 0.7) 100%);
    border: 3px solid rgba(100, 100, 100, 0.6);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

#joystick-knob {
    position: absolute;
    width: 45%;
    height: 45%;
    top: 27.5%;
    left: 27.5%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #888 0%, #444 50%, #333 100%);
    border: 2px solid #999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    transition: transform 0.05s ease-out;
}

/* ======================================
   Mobile Hotbar (Center) - Skill slots
   ====================================== */
/* Horizontal scrollable strip — 1 row, 12 slots, scrolls if doesn't fit width */
#mobile-hotbar {
    display: flex;
    flex-direction: row;
    /* Must be allowed to shrink: with flex-shrink 0 the strip kept its full
       width on narrow (portrait) screens and pushed the action-button grid
       off the right edge, leaving 4 of the 6 buttons unreachable. The strip
       already scrolls horizontally, so shrinking just shows fewer slots. */
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    border: 1px solid #444;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

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

.mobile-hotbar-slot {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    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: 28px;
    height: 28px;
    image-rendering: pixelated;
}

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

/* ======================================
   Action Buttons (Right Side)
   ====================================== */
#mobile-actions {
    display: grid;
    grid-template-columns: repeat(3, var(--mobile-action-btn-size));
    gap: 6px;
    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: 20px;
    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.use {
    background: linear-gradient(145deg, #22aa22, #116611);
    border-color: #55ff55;
}

.mobile-action-btn.look {
    background: linear-gradient(145deg, #2255cc, #113388);
    border-color: #5588ff;
}

.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;
}

/* ======================================
   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: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 40vh !important;
        background: rgba(10, 10, 10, 0.98) !important;
        border-top: 2px solid #44dddd !important;
        border-radius: 0 !important;
        z-index: 10000 !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Hide joystick / hotbar / action buttons while the chat overlay is open
       so they don't peek through under the chat box. The user closes the chat
       to resume playing. The chat-toggle button stays visible (it's higher z-index). */
    body.mobile-chat-open #mobile-action-bar,
    body.mobile-chat-open #mobile-npc-replies {
        display: none !important;
    }

    /* Mobile hotbar slot config menu — shown on long-press of a slot */
    #mobile-hotbar-config-modal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 20000;
    }

    .mobile-hotbar-config-box {
        background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
        border: 2px solid #44dddd;
        border-radius: 12px;
        padding: 16px;
        min-width: 240px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-hotbar-config-header {
        color: #44dddd;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 4px;
    }

    .mobile-hotbar-config-btn {
        padding: 12px;
        font-size: 14px;
        border: 1px solid #555;
        border-radius: 6px;
        background: #333;
        color: #eee;
        touch-action: manipulation;
    }

    .mobile-hotbar-config-btn:active {
        transform: scale(0.97);
        background: #444;
    }

    .mobile-hotbar-config-cancel {
        background: #2a1a1a;
        border-color: #884444;
    }

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

    .mobile-chat-active .wrapper-header {
        padding: 4px;
        background: rgba(40, 40, 40, 0.9);
    }

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

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

    .mobile-chat-active #chat-input {
        flex: 1;
        font-size: 16px; /* under 16px iOS zooms the page on focus */
        padding: 8px;
        border-radius: 4px;
    }

    /* Close button in the chat header (the 💬 button is hidden with the
       action bar while the chat is open) */
    #mobile-chat-close {
        min-width: 40px;
        font-size: 18px;
        touch-action: manipulation;
    }
}

/* 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;
        /* Distance from the bottom of the screen to the top of the 3x2
           action grid (bar offset 12 + grid 102), measured at 812x375. The
           hotbar column stacks on top of it. */
        --mobile-landscape-grid-top: calc(114px + var(--safe-area-bottom));
    }

    /* 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;
        /* The bar is only 50px tall here but the joystick (80px) and the
           3x2 action grid (~100px) are taller; centered, they spilled past
           the bottom of a 375px-high screen and the second row of buttons
           (use / attack / chat) was cut off. Anchor everything to the
           bar's bottom edge instead so the overflow goes upward. */
        align-items: flex-end;
    }

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

    /* Compact slots in landscape — also affects horizontal hotbar strip */
    .mobile-hotbar-slot {
        width: 36px !important;
        height: 36px !important;
    }

    .mobile-hotbar-slot canvas {
        width: 24px !important;
        height: 24px !important;
    }

    .mobile-slot-key {
        font-size: 8px;
    }

    #mobile-hotbar .slot {
        width: 32px !important;
        height: 32px !important;
    }

    /* Account Manager: the card is already ~750px wide here but ~520px tall,
       so "Enter Game World" sat below the fold. Two columns — account info
       on the left, purchases + play/logout on the right — fit it on one
       screen. Children are the 7 blocks of the card in index.html
       (title, character, premium status, change password | play button,
       logout/delete row, buy premium); keep this list in sync with it. Play
       sits top right; the Buy Premium block grows when its form opens and
       only pushes the last row. */
    #account-manager-wrapper > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
        align-items: start;
        max-width: 760px !important;
    }

    #account-manager-wrapper > div > :nth-child(1) { grid-column: 1 / -1; }
    #account-manager-wrapper > div > :nth-child(2) { grid-column: 1; grid-row: 2; }
    #account-manager-wrapper > div > :nth-child(3) { grid-column: 1; grid-row: 3; }
    #account-manager-wrapper > div > :nth-child(4) { grid-column: 2; grid-row: 4; }
    #account-manager-wrapper > div > :nth-child(5) { grid-column: 2; grid-row: 2; }
    #account-manager-wrapper > div > :nth-child(6) { grid-column: 2; grid-row: 3; }

    /* 7th block: Change Password (e-mail accounts), under the account info.
       Touch targets of at least 44px (CLAUDE.md §6) in it and in the Buy
       Premium block. */
    #account-manager-wrapper > div > :nth-child(7) { grid-column: 1; grid-row: 4; }
    #am-password-box button,
    #am-password-box input,
    #am-buy-premium button,
    #am-buy-premium input,
    #am-play-btn,
    #am-logout-btn,
    #am-delete-btn {
        min-height: 44px;
    }

    /* ---- Landscape is the primary layout -------------------------------
       Left gutter: windows/containers above the joystick.
       Right gutter: hotbar column above the 3x2 action grid.
       Centre: the canvas, starting below the status bar so nothing covers
       the world. */

    /* Reserve the status bar instead of drawing it over the world. The bar's
       real height is var(--mobile-header-height) (see the @supports rule at
       the end of this file). */
    #game-wrapper .main .upper {
        padding-top: var(--mobile-header-height);
        box-sizing: border-box;
    }

    /* Hotbar: a 3x2 grid in the right gutter, between the minimap and the
       action grid (same 3 columns as that grid). position: fixed takes it
       out of #mobile-action-bar's flex flow, so the joystick and the grid
       keep space-between. Six 44px slots in one column (278px) do not fit
       between the status bar and the action grid on a 375px-tall screen;
       two rows of three (150x102px) fit under the minimap. On very short
       screens the grid scrolls instead of reaching the minimap. */
    #mobile-hotbar {
        position: fixed;
        left: auto;
        right: calc(8px + var(--safe-area-right));
        bottom: calc(var(--mobile-landscape-grid-top) + 4px);
        max-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-landscape-grid-top) - 6px);
        display: grid;
        grid-template-columns: repeat(3, 44px);
        grid-auto-rows: 44px;
        gap: 4px;
        padding: 4px;
        max-width: none;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
    }

    /* 44px touch targets (CLAUDE.md §6); border-box so the 2px border fits
       inside the slot. The 32px canvas is drawn 1:1. */
    .mobile-hotbar-slot {
        width: 44px !important;
        height: 44px !important;
        box-sizing: border-box;
    }

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

    /* Windows (skills, friends, battle, containers) live in the left gutter
       between the status bar and the joystick. Containers get their own top
       from Touch.layoutContainerWindows; other windows take the lower slot. */
    .window {
        top: calc(var(--mobile-header-height) + 122px) !important;
        left: calc(5px + var(--safe-area-left)) !important;
        right: auto !important;
        width: 150px !important;
        transform-origin: top left;
    }

    .window .body {
        max-height: 110px !important;
    }

    #battle-window {
        top: calc(var(--mobile-header-height) + 122px) !important;
        bottom: auto !important;
        left: calc(5px + var(--safe-area-left)) !important;
        right: auto !important;
        transform: scale(0.85);
        transform-origin: top left;
    }

    /* Equipment (when toggled on) floats over the right edge of the world,
       just left of the hotbar column. */
    .equipment.wrapper {
        top: calc(var(--mobile-header-height) + 4px) !important;
        right: calc(56px + var(--safe-area-right)) !important;
    }

    /* Minimap: compact and display-only in the top-right gutter, above the
       hotbar grid (the general mobile block hides it). It shares that
       corner with the equipment panel, so it steps aside while that is open. */
    #game-wrapper .oogwrap .minimap-container {
        display: block !important;
        position: fixed;
        top: calc(var(--mobile-header-height) + 8px);
        right: calc(60px + var(--safe-area-right));
        margin: 0;
        padding: 0;
        transform: scale(0.62);
        transform-origin: top right;
        pointer-events: none;
        z-index: 9990;
    }

    #game-wrapper .oogwrap .minimap-container .button-stack {
        display: none;
    }

    body.mobile-equipment-open #game-wrapper .oogwrap .minimap-container {
        display: none !important;
    }

    /* The 150px hotbar grid would cover the lower part of the equipment
       panel (boots, Keys), so it steps aside too while that is open. */
    body.mobile-equipment-open #mobile-hotbar {
        display: none;
    }

    /* Hotbar slot menu: two columns so its 6 options fit 375px of height */
    .mobile-hotbar-config-box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px;
        width: min(380px, calc(100vw - 24px));
    }

    .mobile-hotbar-config-header,
    .mobile-hotbar-config-cancel {
        grid-column: 1 / -1;
    }

    .mobile-hotbar-config-btn {
        min-height: 44px;
        padding: 8px;
    }
}

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

    :root {
        --mobile-action-btn-size: 44px;
        --mobile-joystick-size: 100px;
    }

    /* Hide chat in portrait too - use chat button overlay */
    #game-wrapper .main .lower {
        display: none !important;
    }

    /* Bottom bar positions - near bottom */
    #mobile-action-bar {
        bottom: 10px;
    }

    /* Landscape is the supported in-game layout: in portrait cover the game
       with a "rotate your phone" prompt. Lives inside #game-wrapper, so the
       login and account screens (still usable upright) never show it.
       z-index: above the HUD (10001), below modals (50000). */
    #game-wrapper #mobile-rotate-overlay {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 30000;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 24px;
        background: rgba(10, 10, 10, 0.94);
        color: #FFFAE6;
        text-align: center;
        touch-action: none;
    }
}

#mobile-rotate-overlay {
    display: none;
}

.mobile-rotate-icon {
    font-size: 56px;
    animation: mobile-rotate-hint 2.4s ease-in-out infinite;
}

.mobile-rotate-title {
    font-size: 18px;
    font-weight: bold;
}

.mobile-rotate-sub {
    font-size: 13px;
    color: #8a7a6a;
}

@keyframes mobile-rotate-hint {
    0%, 30% { transform: rotate(0deg); }
    55%, 85% { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
}

/* ======================================
   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;
    }

    /* -webkit-fill-available keeps the height the page had before the phone was turned (upright 844 px on a screen now 390 px tall: the game
       screen, centred in it, fell under the fold); 100dvh follows the turn. The old value stays for an iOS without dvh (before 15.4) */
    #game-wrapper {
        height: -webkit-fill-available;
        height: 100dvh;
    }
}

/* ======================================
   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;
    }

    /* With statistics off the div is empty, but the background + padding
       above still painted an 8x8 black dot in the top-left corner. */
    #debug-statistics:empty {
        display: none !important;
    }
}

/* ======================================
   Item action sheet + selection hint (src/input/mobile-item-actions.js)
   Outside the phone media queries: tablets and touch laptops use them too.
   Both stay display:none until JS shows them.
   ====================================== */
/* Item action sheet — tap an item in the equipment or a container */
#mobile-item-sheet {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    align-items: center;
    justify-content: center;
    z-index: 20000;
}

.mobile-item-sheet-box {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border: 2px solid #44dddd;
    border-radius: 12px;
    padding: 10px;
    width: min(340px, calc(100vw - 24px));
}

.mobile-item-sheet-title {
    color: #44dddd;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 8px;
}

.mobile-item-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.mobile-item-sheet-grid button {
    min-height: 44px;
    padding: 4px;
    font-size: 13px;
    border: 1px solid #555;
    border-radius: 6px;
    background: #333;
    color: #eee;
    touch-action: manipulation;
}

.mobile-item-sheet-grid button:active {
    background: #444;
}

.mobile-item-sheet-grid .mobile-item-sheet-cancel {
    background: #2a1a1a;
    border-color: #884444;
}

/* Banner while waiting for the second tap (destination, hotkey item, target) */
#mobile-select-hint {
    position: fixed;
    top: calc(var(--mobile-header-height, 0px) + 6px);
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 24px);
    align-items: center;
    gap: 10px;
    padding: 4px 4px 4px 12px;
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid #ffd54a;
    border-radius: 8px;
    color: #ffd54a;
    font-size: 13px;
    z-index: 10002;
    pointer-events: auto;
}

#mobile-select-hint button {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: #333;
    color: #eee;
    font-size: 16px;
    touch-action: manipulation;
}

.slot.mobile-slot-selected {
    outline: 2px solid #ffd54a;
    outline-offset: -2px;
}

/* ======================================
   Touch targets of at least 44px (CLAUDE.md §6). transform: scale() on the
   windows and the equipment panel shrank slots to 24-29px and the window
   buttons to 15px; here they get real sizes instead.
   ====================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {

    .window,
    .window[containerIndex],
    #battle-window,
    .equipment.wrapper {
        transform: none !important;
    }

    .window .slot,
    .window .slot canvas,
    .equipment.wrapper .slot,
    .equipment.wrapper .slot canvas {
        width: 44px !important;
        height: 44px !important;
    }

    /* The slot frames and equipment silhouettes are 32px images */
    .window .slot,
    .equipment.wrapper .slot {
        background-size: 100% 100% !important;
    }

    /* Three slots per row fit the 150px left gutter; two rows show (the
       second window shows one, see Touch.layoutContainerWindows) */
    .window .body {
        max-height: 94px !important;
    }

    /* Header and its close / minimize buttons at a real 44px */
    .window .header {
        height: 44px !important;
        line-height: 44px !important;
    }

    .window > .header > button {
        min-width: 44px !important;
        height: 44px !important;
    }

    /* The fight-mode / Keys buttons of the equipment panel are drawn small:
       their touch box grows 44px wide to the right (outside the panel),
       never up or down, where it would take the taps of the button or
       slot next to it */
    .equipment.wrapper button::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: max(100%, 44px);
        height: 100%;
    }

    .equipment.wrapper button {
        position: relative;
    }

    /* Outfit window: the colour grid has 19 columns, so 44px squares do not
       fit 812px; 26px instead of 12px (smaller only on phones narrower than
       ~800px, so the left column keeps 176px). Arrows, rotate,
       Head/Body/Legs/Feet, the addons, ✕ and Cancel/Confirm get 44px.
       Stacked, it was ~410px tall and scrolled in 375px; in two columns
       (preview over the outfit/mount arrows | colours, then addons and
       Cancel/Confirm on one row) it is ~345px and fits 360px phones too. */
    #outfit-modal {
        max-height: calc(100vh - 8px) !important;
    }

    #outfit-modal .modal-header {
        line-height: 24px; /* 44px tall, like the ✕ */
    }

    #outfit-modal .close-button-transparent {
        top: 0 !important;
        right: 0 !important;
        width: 44px !important;
        max-width: none;
        height: 44px !important;
    }

    #outfit-modal .modal-body {
        max-height: none !important;
        display: grid;
        grid-template-columns: minmax(176px, 1fr) auto auto;
        grid-template-areas:
            "preview picker picker"
            "select  picker picker"
            "checks  checks footer";
        gap: 4px 6px;
        padding: 4px 6px;
    }

    /* The preview and the colours become cells of the grid above */
    #outfit-modal .modal-body > .change-outfit-wrapper {
        display: contents;
    }

    #outfit-modal .outfit-canvas-wrapper {
        grid-area: preview;
        justify-self: center;
    }

    #outfit-modal .outfit-color-picker-wrapper {
        grid-area: picker;
    }

    #outfit-modal .outfit-color-picker-wrapper .outfit-button-row button {
        margin: 1px 2px;
    }

    #outfit-modal .change-outfit {
        grid-area: select;
        flex-direction: column;
        justify-content: flex-end;
    }

    #outfit-modal .change-outfit-inner {
        flex: 0 0 auto;
    }

    #outfit-modal .change-outfit-inner button {
        margin: 2px 1px;
    }

    #outfit-modal .change-outfit-inner span {
        min-width: 0;
        font-size: 11px;
        text-align: center;
    }

    #outfit-modal .checkboxes {
        grid-area: checks;
        justify-content: flex-start;
    }

    #outfit-modal .checkboxes label {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    #outfit-modal .modal-body > hr {
        display: none;
    }

    #outfit-modal .modal-footer {
        grid-area: footer;
        white-space: nowrap;
    }

    #outfit-modal .modal-footer button {
        min-height: 44px;
        margin: 0 2px;
    }

    .outfit-color-picker-row > button {
        width: clamp(16px, calc((90vw - 196px) / 19 - 2px), 26px) !important;
        height: clamp(16px, calc((90vw - 196px) / 19 - 2px), 26px) !important;
        margin: 1px !important;
    }

    .change-outfit-inner button,
    #rotate-outfit,
    .outfit-color-picker-wrapper .outfit-button-row button {
        min-width: 44px;
        min-height: 44px;
    }

    .change-outfit-inner button,
    #rotate-outfit {
        font-size: 20px;
    }

    /* Count slider of "Move some…" / Ctrl+drag */
    #item-amount {
        min-height: 44px;
    }

    /* World map: the canvas keeps its 256px (its click math is in canvas
       pixels); the header ✕ closes it, so the footer goes and the window
       may use the whole height to fit 375px */
    #map-modal .modal-footer {
        display: none;
    }

    #map-modal {
        max-height: calc(100vh - 8px) !important;
    }

    #map-modal .modal-body {
        max-height: none !important;
    }

    #map-modal-canvas {
        touch-action: none;
    }

}

/* Quick replies to an NPC (mobile-npc-replies.js): over the bottom of the
   world, between the joystick and the action buttons */
#mobile-npc-replies {
    position: fixed;
    bottom: calc(6px + var(--safe-area-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    max-width: min(460px, calc(100vw - 340px));
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid #555;
    border-radius: 8px;
    z-index: 10001;
}

#mobile-npc-replies button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid #666;
    border-radius: 6px;
    background: #2b2b2b;
    color: #ffd54a;
    font-size: 15px;
    touch-action: manipulation;
}

/* iOS zooms into any text field or select under 16px when it gets focus
   and the page stays zoomed (chat, hotbar text, private channel, names...) */
@media screen and (max-height: 500px), screen and (max-width: 768px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]),
    select,
    textarea {
        font-size: 16px !important;
    }
}