/* Mobile Responsiveness CSS
 *
 * The layout is chosen by Touch.updateLayout (Settings > Graphics > Display Mode; Auto follows the screen, see
 * Touch.getLayout): body.mobile-layout is the touch layout of phones and tablets, body.tablet-layout adds its larger tablet
 * variant (see the Tablet section at the end). Without these classes the desktop layout applies.
 *
 * Layout (portrait, from the top; see Touch in client/src/input/touch.js and MobileContainers):
 * - The Containers panel (one tab per opened container) on the left and the Equipment panel on the right (or the window
 *   opened from the menu bar in its place), both as wide as four container slots.
 * - The game screen: it keeps its proportions, is centered in its area and is zoomed until it shows MIN_VISIBLE_TILES columns
 *   (Touch.fitScreen cuts off the columns at the sides).
 * - The health and mana bars.
 * - The controls: the arrows on the left; the attack, Secure Mode and chat buttons and the hotbar on the right.
 * - The menu bar: Settings in the bottom left corner, then the panels and windows.
 * The chat panel opens over the bars, the controls and the menu bar, and can be made taller.
 * In landscape the game screen is centered: the panels and the controls are at its sides, the bars on top, the menu bar below.
 */

/* ======================================
   CSS Variables
   Declared on the body: its classes (mobile-landscape, set by Touch.fitScreen, and tablet-layout) change them together with
   the values derived from them. --mobile-viewport-height (the visible height of the page) is set on the html element by
   Touch.fitScreen
   ====================================== */
body {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --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);

    /* Controls */
    --mobile-slot-size: 46px;
    --mobile-action-btn-size: 46px;
    --mobile-controls-gap: 8px;
    --mobile-controls-padding: 8px;
    --mobile-controls-height: calc(3 * var(--mobile-slot-size) + 2 * var(--mobile-controls-gap));

    /* The status icons sit above the arrows, at the top of the controls: the arrows take the rest of the height */
    --mobile-status-height: 18px;
    --mobile-joystick-size: calc(var(--mobile-controls-height) - var(--mobile-status-height) - 4px);

    /* Bars and the menu bar */
    --mobile-bars-height: 20px;
    --mobile-nav-height: 44px;

    /* Everything below the game screen */
    --mobile-bottom-space: calc(var(--mobile-nav-height) + var(--safe-area-bottom) + var(--mobile-controls-height) +
        2 * var(--mobile-controls-padding) + var(--mobile-bars-height) + 6px);

    /* Panels on top: the Containers panel (left) and the Equipment panel or the window shown in its place (right) have the
       same width (four columns of container slots) */
    --mobile-panel-top: calc(var(--safe-area-top) + 4px);
    --mobile-panel-height: 172px;
    --mobile-panel-title-height: 22px;
    --mobile-tabs-height: 24px;
    --mobile-panel-width: 152px;
    --mobile-containers-width: var(--mobile-panel-width);
}

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

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

/* ======================================
   Mobile Layout (body.mobile-layout, see Touch.updateLayout)
   ====================================== */
body.mobile-layout .desktop-only {
    display: none !important;
}

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

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

/* Text boxes stay usable although the page cannot be selected (the iPhone refuses typing otherwise) */
body.mobile-layout input,
body.mobile-layout textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* Game wrapper fills entire screen. It is shown and hidden by Interface.showGameInterface / hideGameInterface
   (display set on the element): never force it here, or the game controls show on the login screen */
body.mobile-layout #game-wrapper {
    flex-direction: row !important;
    min-width: unset !important;
    min-height: unset !important;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* The columns stay for the windows they hold (containers, battle list, ...) but take no space */
body.mobile-layout #game-wrapper .oogwrap {
    display: block !important;
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 9990;
}

body.mobile-layout .oogwrap .minimap-container,
body.mobile-layout .oogwrap .character-status {
    display: none !important;
}

body.mobile-layout .equipment-options-wrapper {
    display: block !important;
    pointer-events: auto;
}

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

/* The game screen area: everything above the bars */
body.mobile-layout #game-wrapper .main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding-top: var(--safe-area-top);
    padding-bottom: var(--mobile-bottom-space);
}

body.mobile-layout #game-wrapper .main .middle,
body.mobile-layout #chat-resizer,
body.mobile-layout .hotbar {
    display: none !important;
}

body.mobile-layout #game-wrapper .main .upper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* The wrapper fills the area; the game screen inside it is sized by Touch.fitScreen and centered, with the same free
   space above and below it. Columns that do not fit are cut off equally at both sides */
body.mobile-layout .canvas-wrapper {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    position: relative;
    align-items: center !important;
}

/* The size is set by Touch.fitScreen: no desktop scale (Canvas.setScale) */
body.mobile-layout #screen {
    display: block;
    flex: none;
    transform: none !important;
}

/* Context menus open by a long press (see Touch): larger options for fingers, never taller than the screen */
body.mobile-layout .contextmenu {
    max-height: calc(100dvh - 8px);
    overflow-y: auto;
}

body.mobile-layout .contextmenu button {
    min-height: 34px;
    font-size: 13px;
}

/* A touch on a slot is handled by Touch (tap, double tap, long press, drag): it never scrolls its window */
body.mobile-layout .slot {
    touch-action: none;
}

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

body.mobile-layout .slot canvas {
    width: 36px !important;
    height: 36px !important;
}

/* Windows opened from the menu bar (stats, friends, battle list, the trade): in the place of the Equipment panel, as large
   as it (Touch.__handleSideWindow keeps one at a time and hides the Equipment panel, body.mobile-side-window) */
body.mobile-layout .window {
    pointer-events: auto !important;
    position: fixed !important;
    top: var(--mobile-panel-top) !important;
    left: auto !important;
    right: calc(4px + var(--safe-area-right)) !important;
    transform: none !important;
    width: var(--mobile-panel-width) !important;
    max-width: none;
    max-height: var(--mobile-panel-height);
    box-sizing: border-box;
    z-index: 9999;
    overflow: hidden;
    font-size: 10px;
    border-radius: 6px;
}

body.mobile-layout #battle-window {
    z-index: 9999 !important;
}

body.mobile-layout .window .header {
    height: var(--mobile-panel-title-height) !important;
    line-height: var(--mobile-panel-title-height) !important;
    font-size: 10px !important;
}

body.mobile-layout .window .body {
    height: auto !important;
    max-height: calc(var(--mobile-panel-height) - var(--mobile-panel-title-height) - 2px) !important;
    overflow-y: auto !important;
    padding: 2px !important;
    touch-action: pan-y;
}

body.mobile-layout.mobile-side-window .equipment.wrapper {
    display: none !important;
}

/* The World Map window (see MapWindow): the square map as large as the panel allows */
body.mobile-layout #map-window .body {
    padding: 0 !important;
    overflow: hidden !important;
    touch-action: none;
}

body.mobile-layout #map-window .world-map {
    width: min(100%, calc(var(--mobile-panel-height) - var(--mobile-panel-title-height) - 2px));
}

/* No coordinates on mobile (as in the World Map modal) */
body.mobile-layout #map-window .world-map-position {
    display: none;
}

body.mobile-layout #map-window .map-modal-zoom button {
    width: 32px;
    height: 32px;
    font-size: 20px;
}

body.mobile-layout .window .slot {
    width: 34px !important;
    height: 34px !important;
    margin: 1px !important;
    border: 1px solid #444;
}

body.mobile-layout .window .slot canvas {
    width: 32px !important;
    height: 32px !important;
}

/* ======================================
   Containers Panel (top left, see MobileContainers)
   ====================================== */
body.mobile-layout #mobile-containers {
    position: fixed;
    top: var(--mobile-panel-top);
    left: calc(4px + var(--safe-area-left));
    width: var(--mobile-containers-width);
    height: var(--mobile-panel-height);
    z-index: 9989;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid black;
    border-radius: 6px;
    background: rgba(20, 20, 20, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

/* The window of the selected tab sits in the panel, below the tabs: its header and footer are left out (the tab has the
   title and the close cross), the other windows are hidden */
body.mobile-layout .window[containerIndex] {
    top: calc(var(--mobile-panel-top) + var(--mobile-panel-title-height) + var(--mobile-tabs-height) + 2px) !important;
    left: calc(5px + var(--safe-area-left)) !important;
    right: auto !important;
    width: calc(var(--mobile-containers-width) - 2px) !important;
    max-width: none;
    max-height: none;
    transform: none !important;
    border-radius: 0;
    overflow: visible;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

body.mobile-layout .window[containerIndex]:not(.mobile-selected) {
    display: none !important;
}

body.mobile-layout .window[containerIndex] > .header,
body.mobile-layout .window[containerIndex] > .footer {
    display: none !important;
}

body.mobile-layout .window[containerIndex] > .body {
    height: auto !important;
    max-height: calc(var(--mobile-panel-height) - var(--mobile-panel-title-height) - var(--mobile-tabs-height) - 6px) !important;
    box-shadow: none !important;
    grid-template-columns: repeat(auto-fill, 36px);
}

/* ======================================
   Equipment Panel (top right)
   ====================================== */
body.mobile-layout .equipment.wrapper {
    position: fixed !important;
    top: var(--mobile-panel-top) !important;
    right: calc(4px + var(--safe-area-right)) !important;
    left: auto !important;
    width: var(--mobile-panel-width);
    height: var(--mobile-panel-height);
    box-sizing: border-box;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    z-index: 9998;
    padding: 0 2px 2px;
    border: 1px solid black;
    border-radius: 6px;
    background: rgba(20, 20, 20, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

body.mobile-layout .equipment.wrapper > .mobile-panel-title {
    flex: 0 0 auto;
    width: calc(100% + 4px);
    margin: 0 -2px 3px;
}

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

body.mobile-layout .equipment.wrapper .slot {
    width: 32px !important;
    height: 32px !important;
}

body.mobile-layout .equipment.wrapper .slot canvas {
    width: 32px !important;
    height: 32px !important;
}

body.mobile-layout #player-capacity {
    font-size: 9px !important;
    padding: 2px !important;
}

/* The status icons (the own skull, protection zone, battle, hungry, poisoned, haste, mail, ...; see StatusBar) in a small
   row above the arrows, which leave room for it at the top of the controls */
body.mobile-layout .first-wrapper > .status-bar {
    position: fixed;
    left: calc(8px + var(--safe-area-left));
    bottom: calc(var(--mobile-nav-height) + var(--safe-area-bottom) + var(--mobile-controls-padding) + var(--mobile-controls-height) - var(--mobile-status-height));
    width: auto;
    max-width: var(--mobile-joystick-size);
    min-height: var(--mobile-status-height);
    margin: 0;
    gap: 1px;
    z-index: 10001;
    border-radius: 3px;
    pointer-events: none;
}

body.mobile-layout .first-wrapper > .status-bar:empty {
    display: none;
}

/* ======================================
   Panel Parts (titles, tabs)
   ====================================== */
.mobile-panel-title {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: var(--mobile-panel-title-height);
    padding: 0 0 0 8px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.3px;
    color: var(--color-text-soft);
    background: var(--gradient-surface);
    border-bottom: 1px solid black;
}

/* Minimize button of a panel (see Touch.__togglePanel): as tall as the title, wide enough for a finger */
.mobile-panel-minimize {
    flex: 0 0 auto;
    width: 34px;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-left: 1px solid black;
    background: none;
    color: var(--color-text-soft);
    font-size: 16px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mobile-panel-minimize:active {
    color: var(--color-accent);
}

/* Minimized panels: only the title shows (the window of the selected container and the equipment are hidden) */
body.mobile-layout.mobile-containers-minimized #mobile-containers,
body.mobile-layout.mobile-equipment-minimized .equipment.wrapper {
    height: var(--mobile-panel-title-height) !important;
}

body.mobile-layout.mobile-containers-minimized #mobile-containers > :not(.mobile-panel-title),
body.mobile-layout.mobile-containers-minimized .window[containerIndex] {
    display: none !important;
}

body.mobile-layout.mobile-equipment-minimized .equipment.wrapper > .mobile-panel-title {
    margin-bottom: 0;
}

.mobile-container-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    height: var(--mobile-tabs-height);
    box-sizing: border-box;
    padding: 3px 3px 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--color-accent-dark);
}

.mobile-container-tab {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    max-width: 120px;
    min-height: 0;
    margin: 0;
    padding: 0 3px 0 7px;
    font-size: 10px;
    color: var(--color-text-soft);
    border: 1px solid black;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    background: var(--gradient-surface);
    -webkit-tap-highlight-color: transparent;
}

.mobile-container-tab.selected {
    color: var(--color-accent-text);
    border-color: var(--color-accent);
    background: var(--gradient-accent);
}

/* The container that receives the auto loot (Player.__renderLootTarget) */
.mobile-container-tab[data-loot-target] .mobile-container-tab-title {
    color: var(--color-accent);
}

.mobile-container-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.mobile-container-tab-close {
    font-size: 14px;
    color: var(--color-text-muted);
}

.mobile-panel-empty {
    display: none;
    padding: 12px 8px;
    font-size: 10px;
    font-style: italic;
    text-align: center;
    color: var(--color-text-muted);
}

#mobile-containers.empty .mobile-panel-empty {
    display: block;
}

/* ======================================
   Health and Mana (between the game screen and the controls)
   ====================================== */
#mobile-status-bar {
    display: none;
    position: fixed;
    left: calc(8px + var(--safe-area-left));
    right: calc(8px + var(--safe-area-right));
    bottom: calc(var(--mobile-nav-height) + var(--safe-area-bottom) + var(--mobile-controls-height) + 2 * var(--mobile-controls-padding));
    height: var(--mobile-bars-height);
    z-index: 10001;
    flex-direction: row;
    gap: 8px;
}

.mobile-bar {
    flex: 1 1 0;
    height: 100%;
    background: #1a1a1a;
    border: 1px solid black;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

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

/* Same colors as the health and mana bars of the desktop interface (equipment.css, theme.css) */
.mobile-bar-fill.health {
    background: linear-gradient(to bottom, var(--color-health-top), var(--color-health-bottom));
}

.mobile-bar-fill.mana {
    background: linear-gradient(to bottom, var(--color-mana-top), var(--color-mana-bottom));
}

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

/* ======================================
   Controls (above the menu bar)
   ====================================== */
#mobile-action-bar {
    display: none;
    position: fixed;
    left: calc(8px + var(--safe-area-left));
    right: calc(8px + var(--safe-area-right));
    bottom: calc(var(--mobile-nav-height) + var(--safe-area-bottom) + var(--mobile-controls-padding));
    height: var(--mobile-controls-height);
    z-index: 10001;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

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

#mobile-right-controls {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--mobile-controls-gap);
}

/* ======================================
   Arrows (left): the arrow of the walked direction lights up (see Touch.__highlightDirection)
   ====================================== */
/* At the bottom of the controls: the status icons are above it */
#mobile-joystick-zone {
    width: var(--mobile-joystick-size);
    height: var(--mobile-joystick-size);
    max-height: 100%;
    aspect-ratio: 1;
    position: relative;
    flex-shrink: 0;
    align-self: flex-end;
    touch-action: none;
}

#virtual-joystick {
    --dpad-radius: calc(var(--mobile-joystick-size) * 0.32);
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 45, 45, 0.85) 0%, rgba(15, 15, 15, 0.8) 100%);
    border: 2px solid rgba(120, 120, 120, 0.5);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

/* The play_arrow icon points east: each arrow is turned to its direction and pushed out from the center */
.dpad-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: calc(var(--mobile-joystick-size) * 0.3);
    color: rgba(255, 255, 255, 0.75);
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--dpad-radius));
    transition: color 0.08s;
}

.dpad-arrow[data-direction="east"] { --angle: 0deg; }
.dpad-arrow[data-direction="south"] { --angle: 90deg; }
.dpad-arrow[data-direction="west"] { --angle: 180deg; }
.dpad-arrow[data-direction="north"] { --angle: -90deg; }

.dpad-arrow.active {
    color: var(--color-accent);
    text-shadow: 0 0 8px var(--color-accent-glow);
}

/* The center of the pad */
#joystick-knob {
    position: absolute;
    width: 24%;
    height: 24%;
    top: 38%;
    left: 38%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #666 0%, #3a3a3a 55%, #242424 100%);
    border: 1px solid #777;
    pointer-events: none;
}

/* ======================================
   Combat Buttons (attack the nearest monster, Secure Mode, chat)
   ====================================== */
#mobile-actions {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-controls-gap);
    flex-shrink: 0;
}

.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);
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: radial-gradient(circle, rgba(35, 35, 35, 0.9) 0%, rgba(12, 12, 12, 0.85) 100%);
    color: white;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    padding: 0;
}

.mobile-action-btn:active {
    transform: scale(0.9);
    border-color: var(--color-accent);
}

.mobile-action-btn .material-icons {
    font-size: 22px;
    pointer-events: none;
}

.mobile-action-btn.attack {
    color: var(--color-danger);
}

/* Secure Mode, like the desktop button (fight-mode.css): on (unmarked players are protected) the white open hand; off (they
   can be attacked) the red fist on a dark red background */
.mobile-action-btn.secure {
    color: white;
}

.mobile-action-btn.secure.secure-off {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: linear-gradient(to bottom, #1c1c1c, var(--color-danger-dark));
}

.mobile-action-btn.secure svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.mobile-action-btn.secure .secure-off-icon,
.mobile-action-btn.secure.secure-off .secure-on-icon {
    display: none;
}

.mobile-action-btn.secure.secure-off .secure-off-icon {
    display: block;
}

/* Channels with unread messages (see Touch.__renderChatBadge) */
.mobile-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    box-sizing: border-box;
    padding: 0 4px;
    border: 1px solid black;
    border-radius: 8px;
    background: var(--color-danger);
    color: white;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    line-height: 14px;
    text-align: center;
    pointer-events: none;
}

.mobile-badge:empty {
    display: none;
}

/* Fight mode button (the last cell of the hotbar): the icon of the selected mode (copied from the desktop fight mode buttons),
   in the colors of the desktop buttons: red Full Attack, green Full Defense (fight-mode.css) */
.mobile-action-btn.fight {
    width: var(--mobile-slot-size);
    height: var(--mobile-slot-size);
    min-width: var(--mobile-slot-size);
    min-height: var(--mobile-slot-size);
    color: var(--color-accent-text);
}

.mobile-action-btn.fight[data-mode="offensive"] {
    color: white;
    border-color: var(--color-danger);
    background: linear-gradient(145deg, var(--color-danger-dark), var(--color-danger-darker));
}

.mobile-action-btn.fight[data-mode="defensive"] {
    color: white;
    border-color: var(--color-success);
    background: var(--color-success-dark);
}

.mobile-action-btn.fight svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

/* Chasing the attacked creature (long press of the fight mode button): a running mark on the button */
.mobile-action-btn.fight.chasing::after {
    content: "directions_run";
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    border: 1px solid black;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-darker);
    font-family: "Material Icons";
    font-size: 13px;
    line-height: 18px;
    text-align: center;
}

/* ======================================
   Hotbar (right): the first slots of the desktop hotbar (see Touch.__renderHotbar); tap uses a slot, a long press edits it
   ====================================== */
#mobile-hotbar {
    display: grid;
    grid-template-columns: repeat(3, var(--mobile-slot-size));
    gap: var(--mobile-controls-gap);
}

.mobile-hotbar-slot {
    width: var(--mobile-slot-size);
    height: var(--mobile-slot-size);
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(35, 35, 35, 0.9) 0%, rgba(12, 12, 12, 0.85) 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.mobile-hotbar-slot:active {
    transform: scale(0.92);
    border-color: var(--color-accent);
}

.mobile-hotbar-slot canvas {
    width: calc(var(--mobile-slot-size) * 0.68);
    height: calc(var(--mobile-slot-size) * 0.68);
    border-radius: 4px;
    image-rendering: pixelated;
    pointer-events: none;
}

/* Number of the slot below its right side, colored by the content like the key on the desktop hotbar (hotbar.css) */
.mobile-slot-key {
    position: absolute;
    right: -3px;
    bottom: -3px;
    font-size: 10px;
    font-weight: bold;
    color: var(--color-hotbar-key-empty);
    text-shadow: 1px 1px 1px black, -1px -1px 1px black;
    pointer-events: none;
}

.mobile-hotbar-slot[data-content="spell"] .mobile-slot-key {
    color: white;
}

.mobile-hotbar-slot[data-content="text"] .mobile-slot-key {
    color: var(--color-hotbar-key-text);
}

.mobile-hotbar-slot[data-content="object"] .mobile-slot-key {
    color: var(--color-hotbar-key-object);
}

/* Carried amount of an object (dimmed when none is carried) */
.mobile-slot-count {
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 1px black, -1px -1px 1px black;
    pointer-events: none;
}

.mobile-slot-count.empty {
    color: var(--color-text-dim);
}

/* Remaining cooldown of a spell */
.mobile-slot-duration {
    position: absolute;
    font-size: 10px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black, -1px -1px 2px black;
    pointer-events: none;
}

/* ======================================
   Menu Bar (bottom): Settings in the corner, then the panels and windows (see Touch.__handleNavButton)
   ====================================== */
#mobile-nav-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--mobile-nav-height) + var(--safe-area-bottom));
    box-sizing: border-box;
    padding: 0 calc(4px + var(--safe-area-right)) var(--safe-area-bottom) calc(4px + var(--safe-area-left));
    z-index: 10001;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    background: linear-gradient(to bottom, #2a2a2a, #141414);
    border-top: 1px solid black;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
}

.mobile-nav-btn {
    flex: 1 1 0;
    min-width: 30px;
    height: calc(var(--mobile-nav-height) - 8px);
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--color-text-soft);
    font-size: 22px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-btn:active {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Settings: the framed button in the bottom left corner */
.mobile-nav-btn.settings {
    flex: 0 0 auto;
    width: calc(var(--mobile-nav-height) - 4px);
    margin-right: 4px;
    border-color: black;
    background: var(--gradient-surface);
    box-shadow: var(--shadow-raised);
    color: white;
}

.mobile-nav-btn.logout {
    color: var(--color-danger);
}

/* What the button opens is shown (its window, modal or the Equipment panel, see Touch.__renderNavButtons) */
.mobile-nav-btn.selected {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: var(--gradient-accent);
    box-shadow: 0 0 6px var(--color-accent-glow);
}

/* ======================================
   Choosing a Target (use-with crosshair)
   Mouse.setCursor sets body[data-cursor="use-with"] while a rune, a tool, a trade
   or a hotbar slot waits for its target: touches have no cursor, so a hint shows it
   ====================================== */
#mobile-use-with-hint {
    display: none;
    position: fixed;
    bottom: calc(var(--mobile-bottom-space) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10002;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--color-accent);
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 10px var(--color-accent-glow);
    color: var(--color-accent-text);
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

#mobile-use-with-hint > .material-icons {
    font-size: 18px;
}

#mobile-use-with-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 1px solid black;
    border-radius: 50%;
    background: var(--gradient-surface);
    color: white;
    font-size: 18px;
    touch-action: manipulation;
}

body.mobile-layout[data-cursor="use-with"] #mobile-use-with-hint {
    display: flex;
}

/* ======================================
   Dragged Item (see Touch.__showDragGhost)
   Drawn above the finger so the finger does not hide it
   ====================================== */
#mobile-drag-ghost {
    display: none;
    position: fixed;
    width: 44px;
    height: 44px;
    margin: -64px 0 0 -22px;
    z-index: 100000;
    pointer-events: none;
    box-sizing: border-box;
    border: 1px solid var(--color-accent);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 8px var(--color-accent-glow);
    image-rendering: pixelated;
}

/* ======================================
   Chat Panel (opened by the chat button, see Touch.__setChatOpen)
   It covers the bars, the controls and the menu bar; the arrow next to the text box makes it taller
   ====================================== */
body.mobile-layout #game-wrapper .main .lower {
    display: none !important;
}

body.mobile-layout #game-wrapper .main .lower.mobile-chat-active {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: calc(var(--mobile-viewport-height, 100dvh) - var(--mobile-bottom-space)) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    box-sizing: border-box;
    padding-bottom: var(--safe-area-bottom);
    background: rgba(18, 18, 18, 0.97) !important;
    border-top: 1px solid var(--color-accent) !important;
    z-index: 10003 !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition: top 0.15s ease-out;
}

body.mobile-layout #game-wrapper .main .lower.mobile-chat-active.mobile-chat-expanded {
    top: calc(var(--safe-area-top) + 30dvh) !important;
}

/* Messages on top, the channel tabs below them, then the text box (like the chat of phone games) */
body.mobile-layout .mobile-chat-active .chatbox-wrapper {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: auto !important;
}

body.mobile-layout .mobile-chat-active #chat-text {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow-y: auto;
    touch-action: pan-y;
}

body.mobile-layout .mobile-chat-active #chat-text-area {
    font-size: 13px;
}

body.mobile-layout .mobile-chat-active .wrapper-header {
    order: 2;
    padding: 4px;
    background: rgba(30, 30, 30, 0.95);
    overflow-x: auto;
    touch-action: pan-x;
}

body.mobile-layout .mobile-chat-active .chat-footer {
    order: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
}

/* 16px keeps the iPhone from zooming in when the text box gets the focus */
body.mobile-layout .mobile-chat-active #chat-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    padding: 8px;
    border-radius: 6px;
}

/* The lock, the resize lock and the channel arrows are for the keyboard and mouse of the desktop */
body.mobile-layout #chat-lock,
body.mobile-layout #chat-lock-resize,
body.mobile-layout #left-channel,
body.mobile-layout #right-channel {
    display: none !important;
}

body.mobile-layout #mobile-chat-expand,
body.mobile-layout #mobile-chat-close {
    flex: 0 0 auto;
    font-size: 24px;
}

body.mobile-layout #mobile-chat-close {
    color: var(--color-error);
}

/* ======================================
   Login Screen: the background fills the screen, the buttons are centered and as large as a finger needs,
   the modals (Enter Game, Create Account, character list, ...) stay inside the screen
   ====================================== */
body.mobile-layout #login-wrapper,
body.mobile-layout #login-wrapper #login-inner {
    min-width: 0;
    min-height: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* The background image covers the whole screen (its sides or its top and bottom are cut off) */
body.mobile-layout #login-wrapper #login-inner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.mobile-layout #login-wrapper #login-inner .login-settings {
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(280px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 14px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

body.mobile-layout #login-wrapper #login-inner .login-settings button {
    width: 100%;
    height: 44px;
    margin: 0;
    font-size: 15px;
    border-radius: 6px;
}

/* Enter Game is the main action */
body.mobile-layout #login-wrapper #login-inner .login-settings #login-info {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background-image: var(--gradient-accent);
}

/* While a modal is opened only the modal shows (Modal.show sets display: block on it) */
body.mobile-layout #login-wrapper #login-inner:has(> .modal-wrapper > .modal[style*="display: block"]) .login-settings,
body.mobile-layout #login-wrapper #login-inner:has(> .modal-wrapper > .modal[style*="display: block"]) .login-quick {
    visibility: hidden;
}

/* The sound button and the version in the corners, clear of the notch */
body.mobile-layout #login-wrapper #login-inner .login-sound {
    top: calc(8px + var(--safe-area-top));
    right: calc(8px + var(--safe-area-right));
}

body.mobile-layout #login-wrapper #login-inner .login-version {
    top: calc(4px + var(--safe-area-top));
    left: calc(8px + var(--safe-area-left));
    font-size: 10px;
}

/* TEMPORARY (testing only): the quick login buttons in a row at the bottom (see quick-login.js) */
body.mobile-layout #login-wrapper #login-inner .login-quick {
    top: auto;
    right: auto;
    bottom: calc(12px + var(--safe-area-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: min(280px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 8px;
    border-radius: 8px;
}

body.mobile-layout #login-wrapper #login-inner .login-quick button {
    flex: 1 1 40%;
    width: auto;
    height: 34px;
    margin: 0;
}

/* Login modals: inside the screen, scrolled when they are taller */
body.mobile-layout #login-wrapper .modal {
    max-width: calc(100vw - 16px - var(--safe-area-left) - var(--safe-area-right));
    max-height: calc(100dvh - 16px - var(--safe-area-top) - var(--safe-area-bottom));
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
}

body.mobile-layout #login-wrapper .login-form {
    width: min(260px, calc(100vw - 48px));
}

body.mobile-layout #login-wrapper .character-list {
    width: min(300px, calc(100vw - 48px));
}

/* 16px keeps the iPhone from zooming in when a text box gets the focus */
body.mobile-layout #login-wrapper input {
    font-size: 16px;
}

body.mobile-layout #login-wrapper .modal .modal-footer button {
    min-height: 36px;
    padding: 6px 16px;
    font-size: 13px;
}

body.mobile-layout #login-wrapper .modal-header {
    cursor: default;
}

/* ======================================
   Modals: always inside the screen, scrolled when they are taller (game menu, settings, NPC, trade, ...)
   ====================================== */
body.mobile-layout .game-modal-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 30000;
}

body.mobile-layout .game-modal-wrapper .modal {
    max-width: calc(100vw - 12px - var(--safe-area-left) - var(--safe-area-right)) !important;
    max-height: calc(100dvh - 12px - var(--safe-area-top) - var(--safe-area-bottom)) !important;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
}

/* Modals are not dragged on mobile */
body.mobile-layout .game-modal-wrapper .modal-header {
    cursor: default;
}

/* The World Map shows no coordinates on mobile */
body.mobile-layout #map-modal .map-modal-wrapper > span {
    display: none;
}

/* Larger zoom buttons for fingers */
body.mobile-layout #map-modal .map-modal-zoom button {
    width: 36px;
    height: 36px;
    font-size: 22px;
}

/* ======================================
   Landscape (body.mobile-landscape, set by Touch.fitScreen; not the orientation media query, which turns to landscape when
   the keyboard of the phone opens)
   The game screen is centered: the panels on top and the controls at the bottom of its sides, the bars on top of it and
   the menu bar below it
   ====================================== */
body.mobile-landscape {
    --mobile-slot-size: 40px;
    --mobile-action-btn-size: 40px;
    --mobile-controls-gap: 6px;
    --mobile-bars-height: 14px;
    --mobile-nav-height: 34px;
    --mobile-bottom-space: 0px;
    --mobile-panel-height: calc(var(--mobile-viewport-height, 100dvh) - var(--safe-area-top) - var(--mobile-controls-height) - 3 * var(--mobile-controls-padding));
    --mobile-side-width: max(160px, calc((100vw - 1.364 * var(--mobile-viewport-height, 100dvh)) / 2 - 8px));
    --mobile-containers-width: var(--mobile-side-width);
}

body.mobile-landscape #game-wrapper .main {
    padding-bottom: 0;
}

body.mobile-landscape .equipment.wrapper {
    height: auto;
    max-height: var(--mobile-panel-height);
}

body.mobile-landscape #mobile-status-bar {
    top: calc(var(--safe-area-top) + 3px);
    bottom: auto;
    left: calc(var(--mobile-side-width) + 12px);
    right: calc(var(--mobile-side-width) + 12px);
}

body.mobile-landscape .mobile-bar-text {
    font-size: 9px;
}

body.mobile-landscape #mobile-action-bar {
    bottom: calc(var(--safe-area-bottom) + var(--mobile-controls-padding));
}

/* The status icons stay above the arrows (no menu bar below the controls at the sides) */
body.mobile-landscape .first-wrapper > .status-bar {
    bottom: calc(var(--safe-area-bottom) + var(--mobile-controls-padding) + var(--mobile-controls-height) - var(--mobile-status-height));
}

/* The menu bar under the middle of the game screen */
body.mobile-landscape #mobile-nav-bar {
    left: 50%;
    right: auto;
    width: min(380px, calc(100vw - 2 * var(--mobile-side-width) - 24px));
    transform: translateX(-50%);
    border: 1px solid black;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: rgba(20, 20, 20, 0.88);
}

body.mobile-landscape .mobile-nav-btn {
    font-size: 18px;
}

body.mobile-landscape #mobile-use-with-hint {
    bottom: calc(var(--mobile-nav-height) + var(--safe-area-bottom) + 8px);
}

/* The chat opens between the controls */
body.mobile-landscape #game-wrapper .main .lower.mobile-chat-active {
    left: calc(var(--mobile-side-width) + 12px) !important;
    right: calc(var(--mobile-side-width) + 12px) !important;
    top: calc(0.4 * var(--mobile-viewport-height, 100dvh)) !important;
    border: 1px solid var(--color-accent) !important;
    border-radius: 8px 8px 0 0 !important;
}

body.mobile-landscape #game-wrapper .main .lower.mobile-chat-active.mobile-chat-expanded {
    top: calc(var(--safe-area-top) + 4px) !important;
}

/* Narrow phones in portrait: smaller controls so both sides fit next to each other (the width does not change with the keyboard) */
@media screen and (max-width: 380px) {

    body:not(.mobile-landscape) {
        --mobile-slot-size: 42px;
        --mobile-action-btn-size: 42px;
        --mobile-controls-gap: 6px;
    }
}

/* ======================================
   Typing (body.mobile-typing, see Touch.__handleFocusChange): the keyboard of the phone takes half of the screen, so the
   panels on top of the game screen and the status icons are hidden and the game stays visible above the chat
   ====================================== */
body.mobile-layout.mobile-typing #mobile-containers,
body.mobile-layout.mobile-typing .window,
body.mobile-layout.mobile-typing .equipment.wrapper,
body.mobile-layout.mobile-typing .first-wrapper > .status-bar,
body.mobile-layout.mobile-typing #mobile-use-with-hint {
    display: none !important;
}

/* ======================================
   Tablet (body.tablet-layout, together with body.mobile-layout; see Touch.getLayout)
   The mobile layout with larger panels, slots, controls and texts for the larger screen; Touch.fitScreen shows the whole
   game screen (TABLET_MIN_VISIBLE_TILES) instead of cutting off its sides
   ====================================== */
body.tablet-layout {
    --mobile-slot-size: 58px;
    --mobile-action-btn-size: 58px;
    --mobile-controls-gap: 10px;
    --mobile-controls-padding: 12px;
    --mobile-status-height: 22px;
    --mobile-bars-height: 24px;
    --mobile-nav-height: 54px;
    --mobile-panel-top: calc(var(--safe-area-top) + 8px);
    --mobile-panel-height: 236px;
    --mobile-panel-title-height: 28px;
    --mobile-tabs-height: 30px;
    --mobile-panel-width: 200px;
}

/* Landscape tablets: the panels as tall as the side next to the controls (as in the phone landscape layout) */
body.tablet-layout.mobile-landscape {
    --mobile-slot-size: 52px;
    --mobile-action-btn-size: 52px;
    --mobile-controls-gap: 8px;
    --mobile-bars-height: 18px;
    --mobile-nav-height: 44px;
    --mobile-panel-height: calc(var(--mobile-viewport-height, 100dvh) - var(--mobile-panel-top) - var(--mobile-controls-height) - 3 * var(--mobile-controls-padding));
    --mobile-side-width: max(212px, calc((100vw - 1.364 * var(--mobile-viewport-height, 100dvh)) / 2 - 12px));
}

body.tablet-layout .slot,
body.tablet-layout .slot canvas {
    width: 46px !important;
    height: 46px !important;
}

body.tablet-layout .window .slot {
    width: 44px !important;
    height: 44px !important;
}

body.tablet-layout .window .slot canvas {
    width: 42px !important;
    height: 42px !important;
}

body.tablet-layout .window[containerIndex] > .body {
    grid-template-columns: repeat(auto-fill, 46px);
}

body.tablet-layout .equipment.wrapper .slot,
body.tablet-layout .equipment.wrapper .slot canvas {
    width: 42px !important;
    height: 42px !important;
}

body.tablet-layout .equipment-column {
    gap: 3px !important;
}

body.tablet-layout #player-capacity {
    font-size: 11px !important;
}

body.tablet-layout .window {
    font-size: 12px;
}

body.tablet-layout .window .header {
    font-size: 12px !important;
}

body.tablet-layout .mobile-panel-title,
body.tablet-layout .mobile-container-tab {
    font-size: 12px;
}

body.tablet-layout .mobile-container-tab {
    max-width: 150px;
}

body.tablet-layout .mobile-panel-minimize {
    width: 40px;
    font-size: 20px;
}

body.tablet-layout .mobile-bar-text {
    font-size: 13px;
}

body.tablet-layout .mobile-action-btn .material-icons {
    font-size: 28px;
}

body.tablet-layout .mobile-action-btn.secure svg {
    width: 30px;
    height: 30px;
}

body.tablet-layout .mobile-action-btn.fight svg {
    width: 26px;
    height: 26px;
}

body.tablet-layout .mobile-slot-key,
body.tablet-layout .mobile-slot-duration {
    font-size: 12px;
}

body.tablet-layout .mobile-slot-count {
    font-size: 11px;
}

body.tablet-layout .mobile-nav-btn {
    font-size: 26px;
}

body.tablet-layout.mobile-landscape #mobile-nav-bar {
    width: min(520px, calc(100vw - 2 * var(--mobile-side-width) - 24px));
}

body.tablet-layout.mobile-landscape .mobile-bar-text {
    font-size: 11px;
}

body.tablet-layout .contextmenu button {
    min-height: 40px;
    font-size: 15px;
}

body.tablet-layout #mobile-use-with-hint {
    font-size: 14px;
}

/* Prevent iOS rubber banding. The height of #game-wrapper is set by Touch.fitScreen (the visible height of the page):
   -webkit-fill-available made it shorter than the screen on the iPhone */
@supports (-webkit-touch-callout: none) {

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

/* ======================================
   Debug Statistics - Make Smaller on Mobile
   ====================================== */
body.mobile-layout #debug-statistics {
    font-size: 8px !important;
    top: 4px !important;
    left: 4px !important;
    max-width: 200px;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px;
    border-radius: 4px;
}