/* GAME_CLIENT: единая квадратная сетка, тёмная кожа и бронзовая окантовка. */
.voxel-aim-crosshair { position: absolute; z-index: 8; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 1px 2px #000); }
.voxel-aim-crosshair::before, .voxel-aim-crosshair::after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 1px; background: rgba(255,244,215,.96); transform: translate(-50%,-50%); }
.voxel-aim-crosshair::before { width: 22px; height: 2px; }
.voxel-aim-crosshair::after { width: 2px; height: 22px; }
.voxel-aim-crosshair[hidden] { display: none; }
.voxel-aim-crosshair--mining { width: 26px; height: 26px; }
.voxel-aim-crosshair--mining::before { width: 26px; height: 26px; background: #fff; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 3C10 2 18 7 21 14L17 11 13 8 7 4ZM11 7 14 10 5 22 2 19Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.voxel-aim-crosshair--mining::after { display: none; }

.voxel-inventory-hud {
    --cell: 52px;
    position: absolute;
    z-index: 12;
    left: 50%;
    bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 50px);
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
    color: #f3e8ce;
    pointer-events: none;
    font: 12px/1.35 system-ui, sans-serif;
}
.voxel-inventory-hud[hidden] { display: none; }
.voxel-inventory-panel { display: flex; gap: 9px; align-items: center; pointer-events: auto; }
.voxel-inventory-slots, .voxel-dialog-hotbar, .voxel-dialog-grid { display: grid; grid-template-columns: repeat(9, var(--cell)); gap: 4px; }
.voxel-inventory-slots {
    padding: 6px;
    border: 1px solid #79532e;
    background: linear-gradient(#302419, #191510);
    box-shadow: 0 5px 20px #0009, inset 0 1px #d3a46c44;
}
.voxel-inventory-slot {
    appearance: none;
    box-sizing: border-box;
    position: relative;
    width: var(--cell);
    height: var(--cell);
    min-width: var(--cell);
    min-height: 0;
    aspect-ratio: 1;
    padding: 3px;
    border: 1px solid #85603b;
    border-radius: 0;
    background: linear-gradient(145deg, #292219, #15130f);
    color: #f5e7cb;
    box-shadow: inset 1px 1px 2px #000b, inset -1px -1px #d2a16a18;
    cursor: pointer;
    touch-action: none;
}
.voxel-inventory-slot:hover, .voxel-inventory-slot:focus-visible { border-color: #e1b46d; outline: 1px solid #e1b46d; outline-offset: 1px; }
.voxel-inventory-slot.selected { border-color: #ffd38a; box-shadow: 0 0 0 2px #be853e, inset 0 0 14px #d6993a25; }
.voxel-inventory-slot:disabled { cursor: wait; }
.voxel-item-icon {
    display: block;
    width: 100%;
    height: 100%;
    background-size: 400% 200%;
    background-repeat: no-repeat;
    pointer-events: none;
}
.voxel-item-icon.exhausted { filter: grayscale(1) brightness(.55); }
.voxel-slot-count { position: absolute; bottom: 4px; right: 4px; font-weight: 800; font-size: 13px; text-shadow: 1px 1px #000, -1px -1px #000; pointer-events: none; }
.voxel-slot-key { position: absolute; top: 2px; left: 4px; color: #c4aa82; font-size: 10px; text-shadow: 0 1px 2px #000; pointer-events: none; }
.voxel-slot-empty { font-size: 10px; color: #ae9879; pointer-events: none; }
.voxel-slot-fuel { position: absolute; bottom: 1px; left: 3px; right: 3px; height: 2px; background: linear-gradient(to right,#dfa949 var(--fuel),#100e0b var(--fuel)); pointer-events: none; }
.voxel-inventory-open { flex: 0 0 auto; width: 34px; height: 40px; padding: 0; border: 1px solid #947049; border-radius: 2px; color: #f6dfb5; background: #241d15; cursor: pointer; font: bold 15px Georgia,serif; }
.voxel-hotbar-status { text-align: center; color: #ffcf84; text-shadow: 0 1px 3px #000; min-height: 0; }
.voxel-hotbar-status:empty { display: none; }
.voxel-inventory-dialog {
    --cell: 54px;
    position: fixed;
    inset: 0;
    margin: auto;
    height: max-content;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px);
    padding: 20px 24px 14px;
    overflow: auto;
    color: #f2e5ca;
    border: 2px solid #916132;
    border-radius: 3px;
    background: radial-gradient(ellipse at 50% 0, #3d2b1c55, transparent 65%), #1d1914;
    box-shadow: 0 0 0 3px #17120d, 0 0 0 4px #5a3c23, 0 20px 80px #000c, inset 0 1px #dfb06b44;
    font: 13px/1.45 system-ui,sans-serif;
}
.voxel-inventory-dialog::backdrop { background: #080705c4; backdrop-filter: blur(2px); }
.voxel-inventory-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid #825d333f; }
.voxel-inventory-dialog h2 { margin: 0; font: bold 28px/1.2 Georgia,serif; color: #f3dfb5; }
.voxel-inventory-dialog header button { padding: 8px 12px; border: 1px solid #85613b; background: #30251a; color: #e9d4af; cursor: pointer; }
.voxel-inventory-dialog h3 { margin: 10px 0 7px; color: #bd9968; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.voxel-dialog-equipment { display: flex; align-items: center; justify-content: center; gap: 34px; padding: 13px 0 4px; }
.voxel-dialog-equipment label { display: flex; flex-direction: column; align-items: center; gap: 7px; color: #bda682; font-size: 11px; }
.voxel-equipment-character { width: 82px; height: 100px; color: #b8884b; filter: drop-shadow(0 2px 8px #0009); opacity: .7; }
.voxel-equipment-character svg { width: 100%; height: 100%; }
.voxel-dialog-hotbar { padding-top: 5px; border-top: 1px solid #80592e55; }
.voxel-dialog-selection { min-height: 20px; margin: 13px 0 0; color: #ddbf8d; font-size: 12px; }
.voxel-dialog-status { min-height: 1.45em; margin: 3px 0; color: #ffce81; text-align: center; }
.voxel-dialog-status:empty { visibility: hidden; }
.voxel-dialog-guide { margin: 5px 0 0; color: #9c8b73; font-size: 10px; }
.voxel-inventory-drag-ghost { position: fixed; z-index: 100; width: 48px; height: 48px; pointer-events: none; filter: drop-shadow(0 3px 5px #000b); }
.voxel-inventory-drag-ghost[hidden] { display: none; }
.voxel-inventory-dialog .drop-valid { outline: 2px solid #bce299; outline-offset: 1px; }
.voxel-inventory-dialog .drop-invalid { outline: 2px solid #d87b60; outline-offset: 1px; }
@media (max-width: 700px) {
    .voxel-inventory-hud { --cell: 42px; max-width: calc(100% - 12px); }
    .voxel-inventory-slots {
        box-sizing: content-box;
        width: calc(var(--cell) * 4 + 12px);
        max-width: calc(100vw - 110px);
        grid-template-columns: repeat(9, var(--cell));
        grid-template-rows: var(--cell);
        overflow-x: auto;
        overflow-y: hidden;
        direction: rtl;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        padding: 5px;
    }
    .voxel-inventory-slots .voxel-inventory-slot { touch-action: pan-x; scroll-snap-align: start; }
    .voxel-inventory-panel { gap: 6px; }
    .voxel-inventory-dialog { --cell: min(48px, calc((100vw - 80px) / 9)); padding: 13px 14px; }
    .voxel-dialog-grid, .voxel-dialog-hotbar { gap: 3px; }
    .voxel-inventory-dialog h2 { font-size: 23px; }
    .voxel-dialog-equipment { gap: 25px; }
    .voxel-slot-count { font-size: 11px; right: 2px; bottom: 3px; }
    .voxel-dialog-guide { max-width: 340px; }
}
@media (max-height: 520px) {
    .voxel-inventory-dialog { --cell: min(40px, calc((100vw - 80px) / 9)); padding: 8px 14px; }
    .voxel-inventory-dialog header { padding-bottom: 6px; }
    .voxel-inventory-dialog h2 { font-size: 21px; }
    .voxel-dialog-equipment { padding: 5px 0 0; }
    .voxel-equipment-character { width: 44px; height: 55px; }
    .voxel-dialog-selection { margin-top: 6px; }
    .voxel-inventory-dialog h3 { margin: 5px 0 3px; }
    .voxel-inventory-hud { --cell: 38px; bottom: 7px; }
}