/* fonts: no network import (assembly) — vectorz.css maps Anton / Oswald / Roboto onto locally installed faces */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --color-blood: #b91c1c;
    --color-warning: #FFAA00;
    --color-ui-bg: rgba(20, 20, 20, 0.9);
    --color-ui-border: rgba(255, 255, 255, 0.15);
    --color-common: #9d9d9d;
    --color-uncommon: #5cb85c;
    --color-rare: #5bc0de;
    --color-epic: #9b59b6;
    --color-legendary: #f0ad4e;
    --color-gas: #84cc16;
}

body { overflow: hidden; background: #000; font-family: 'Oswald', sans-serif; cursor: crosshair; color: white; user-select: none; }
#game-container { position: relative; width: 100vw; height: 100vh; cursor: crosshair; }
canvas { display: block; cursor: crosshair; }

#hud { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }

* { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

/* --- UTILS --- */
.text-shadow { text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }

/* --- CROSSHAIR --- */
#crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; pointer-events: none; }
#crosshair .dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 0 2px rgba(0,0,0,0.8); }
/* AIM PASS: the four reticle lines, --gap px from the centre (hud.setCrosshair), shown only while a weapon is held */
#crosshair .l { position: absolute; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 2px rgba(0,0,0,0.8); display: none; }
#crosshair.lines .l { display: block; }
#crosshair .l.t  { left: 50%; bottom: calc(50% + var(--gap, 6px)); width: 2px; height: 7px; transform: translateX(-50%); }
#crosshair .l.b  { left: 50%; top:    calc(50% + var(--gap, 6px)); width: 2px; height: 7px; transform: translateX(-50%); }
#crosshair .l.lf { top: 50%;  right:  calc(50% + var(--gap, 6px)); width: 7px; height: 2px; transform: translateY(-50%); }
#crosshair .l.rt { top: 50%;  left:   calc(50% + var(--gap, 6px)); width: 7px; height: 2px; transform: translateY(-50%); }
#crosshair.lines .dot { width: 3px; height: 3px; }

/* --- AIM PASS: the F2 settings screen --- */
#settings-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.45); display: none; z-index: 100; pointer-events: auto; cursor: default; }
#settings-screen.open { display: block; }
.settings-wrapper { position: absolute; top: 50%; left: 40px; width: 760px; display: flex; flex-direction: column; transform: translateY(-50%) scale(0.9); transform-origin: left center; }
.settings-panel { background: rgba(8, 8, 8, 0.88); border: 1px solid rgba(255,255,255,0.08); padding: 22px 28px 20px; }
.settings-row { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.settings-label { font-family: 'Oswald', sans-serif; font-size: 19px; letter-spacing: 1px; text-transform: uppercase; color: #e8e8e8; }
.settings-value { font-family: 'Oswald', sans-serif; font-size: 13px; color: #9a9a9a; margin-top: 4px; letter-spacing: 0.5px; }
.vz-slider { display: flex; align-items: center; gap: 12px; }
.vz-track { position: relative; flex: 1; height: 8px; background: rgba(255,255,255,0.14); border-radius: 4px; }
.vz-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--color-blood, #c03a1f); border-radius: 4px; }
.vz-knob { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin-left: -9px; transform: translateY(-50%); background: #fff; border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,0.9); }
.vz-btn { display: inline-block; min-width: 30px; padding: 5px 12px; text-align: center; font-family: 'Oswald', sans-serif; font-size: 16px; letter-spacing: 1px; color: #ddd; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); user-select: none; }
.vz-btn.hover, .vz-btn.active { background: var(--color-blood, #c03a1f); border-color: var(--color-blood, #c03a1f); color: #fff; }
.settings-choices { display: flex; gap: 10px; }
.settings-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }
.settings-hint { font-family: 'Oswald', sans-serif; font-size: 12px; color: #7f7f7f; margin-top: 12px; letter-spacing: 0.3px; }

/* ============================================
   NEW H1Z1 STYLE HUD
   ============================================ */

/* --- TOP LEFT: REMAIN & KILL FEED --- */
#top-left-hud {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.header-stats {
    display: flex;
    align-items: flex-start;
}

.remain-box {
    position: relative;
}

.remain-count {
    font-family: 'Anton', sans-serif;
    font-size: 60px;
    color: #eee;
    line-height: 0.8;
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 0px #000;
}

/* The red splatter effect behind the number */
.remain-count::before {
    content: '';
    position: absolute;
    top: 5px;
    left: -5px;
    width: 100%;
    height: 80%;
    background: var(--color-blood);
    transform: skew(-10deg) rotate(-5deg);
    z-index: -1;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.remain-label {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-blood);
    text-transform: uppercase;
    margin-left: 5px;
    text-shadow: 1px 1px 0 #000;
    align-self: flex-start;
    margin-top: 5px;
}

/* Score box - NOT IMPLEMENTED YET */
.score-box {
    background: rgba(0,0,0,0.8);
    padding: 2px 8px;
    margin-left: 15px;
    height: fit-content;
    margin-top: 5px;
    border-radius: 2px;
    display: none; /* Hidden - not implemented */
}
.score-val { font-weight: 700; font-size: 20px; }
.score-label { font-size: 10px; color: #ccc; letter-spacing: 1px; }

/* Kill Feed */
#kill-feed {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 10px;
}

.kill-entry {
    background: rgba(40, 40, 40, 0.6);
    color: #ccc;
    padding: 4px 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    width: fit-content;
    border-radius: 2px;
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
    animation: slideIn 0.3s ease;
}
@keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Team List - NOT IMPLEMENTED YET */
.team-list {
    margin-top: 20px;
    display: none; /* Hidden - multiplayer not implemented */
    flex-direction: column;
    gap: 5px;
}
.team-member {
    display: flex;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-shadow: 1px 1px 1px #000;
}
.tm-num {
    background: var(--color-blood);
    color: white;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 12px;
    margin-right: 5px;
    border-radius: 2px;
}
.tm-name { font-weight: 700; margin-right: 5px; }
.tm-hp {
    width: 50px;
    height: 6px;
    background: rgba(0,0,0,0.5);
    margin-left: 5px;
    position: relative;
}
.tm-hp-fill {
    height: 100%;
    background-color: var(--color-blood);
}

/* --- TOP RIGHT: COMPASS & GAS ALERT --- */
#top-right-hud {
    position: absolute;
    top: 20px;
    right: 20px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Server info - NOT IMPLEMENTED */
.server-info {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    color: #aaa;
    margin-bottom: 5px;
    display: none; /* Hidden - not implemented */
}

/* Compass - H1Z1 style with direction + grid */
#compass {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ddd;
    text-shadow: 1px 1px 2px black;
    background: none;
    border: none;
    padding: 0;
    margin-top: 5px;
}
#compass .compass-grid {
    color: #fff;
    font-size: 32px;
    margin-left: 5px;
}

/* Gas Info Display - H1Z1 Style */
#gas-info {
    margin-top: 15px;
    text-align: right;
}

#gas-status {
    font-size: 32px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,1);
    background: linear-gradient(to right, transparent, rgba(132, 204, 22, 0.2));
    padding: 8px 25px;
    transform: skew(-10deg);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

#gas-icon {
    font-size: 32px;
    color: var(--color-gas);
}

#gas-text {
    color: var(--color-gas);
    text-transform: uppercase;
}

#gas-text.spreading {
    animation: gasPulse 0.5s ease-in-out infinite;
}

#gas-text.danger {
    color: #ff4444;
}

#gas-text.waiting {
    color: #ddd;
}

@keyframes gasPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

#gas-timer {
    font-family: 'Anton', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 0px #000;
    margin-top: 5px;
    text-align: right;
}

#gas-timer.urgent {
    color: #ff4444;
    animation: timerPulse 1s ease-in-out infinite;
}

#gas-timer.spreading {
    color: var(--color-gas);
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Gas Warning - when player is IN the gas */
#gas-warning {
    font-size: 20px;
    color: #ff4444;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,1);
    background: linear-gradient(to right, transparent, rgba(255, 68, 68, 0.4));
    padding: 8px 25px;
    transform: skew(-10deg);
    margin-top: 15px;
    display: none;
    animation: gasWarningPulse 0.5s ease-in-out infinite;
}

@keyframes gasWarningPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

#gas-warning.active { display: block; }


/* --- FPS COUNTER --- */
#fps-counter {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    padding: 5px 10px;
    font-family: 'Oswald', monospace;
    font-size: 14px;
    color: #0f0;
    border-radius: 3px;
    display: none;
}
#fps-counter.active { display: block; }

/* ============================================
   BOTTOM HUD: HOTBAR, HEALTH, AMMO
   ============================================ */

#bottom-hud {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
}

/* --- HOTBAR (Weapon + Quick Slots) --- */
.hotbar {
    display: flex;
    gap: 4px;
    align-items: flex-end;
}

.slot {
    width: 60px;
    height: 60px;
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

/* Selected slot with double circle indicator */
.slot.selected {
    overflow: visible;
}

.slot.selected::before {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--color-blood);
    box-shadow:
        0 0 0 4px rgba(0,0,0,0.6),
        0 0 0 6px var(--color-blood),
        0 0 12px var(--color-blood);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.slot-num {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 12px;
    color: #ccc;
    font-weight: bold;
    z-index: 5;
}

.slot-icon {
    font-size: 24px;
    z-index: 1;
    filter: drop-shadow(1px 1px 2px black);
}

/* Item icon images (for weapons, etc.) */
.item-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slot .item-icon-img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

.carrying-grid .inv-slot .item-icon-img,
.equip-slot .item-icon-img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

/* Fist image in hotbar slot */
.slot .slot-icon-img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

.slot-ammo {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 10px;
    font-family: 'Roboto', sans-serif;
    color: #ddd;
    line-height: 1.1;
    text-align: left;
    z-index: 5;
}

.slot.has-item {
    background: url('assets/icons/slotbackground.png') center/cover no-repeat;
}

.slot.empty {
    background: rgba(20, 20, 20, 0.4);
}
.slot.empty .slot-icon {
    opacity: 0.2;
}

/* Quick slot styling (smaller slots for consumables) */
.slot.quick-slot {
    width: 50px;
    height: 50px;
}

/* --- MAIN AMMO COUNTER --- */
.main-ammo {
    margin-top: 5px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    text-shadow: 1px 1px 2px black;
}

.bullet-icon {
    font-size: 12px;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

/* --- HEALTH ROW --- */
.health-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 8px;
    gap: 10px;
}

.health-icon-left {
    filter: drop-shadow(1px 1px 2px black);
    display: flex;
    align-items: center;
}

.health-info-right {
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 1px 1px 2px black;
}

/* Health Bar Container */
.health-container {
    flex-grow: 1;
    min-width: 200px;
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    padding: 2px;
    background-color: rgba(255,255,255,0.3);
    clip-path: polygon(
        0 0,
        100% 0,
        99.2% 20%,
        98.5% 40%,
        98.8% 60%,
        98% 80%,
        97% 100%,
        0 100%
    );
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.health-container::before {
    content: '';
    position: absolute;
    left: 2px; top: 2px; right: 2px; bottom: 2px;
    background: rgba(20, 20, 20, 0.9);
    z-index: 0;
    clip-path: polygon(0 0, 100% 0, 99.2% 20%, 98.5% 40%, 98.8% 60%, 98% 80%, 97% 100%, 0 100%);
}

.hp-bar-fill {
    position: absolute;
    left: 2px; top: 2px; bottom: 2px;
    width: 100%;
    background: linear-gradient(to bottom, #c72222, #801111);
    clip-path: polygon(
        0 0,
        100% 0,
        99.2% 20%,
        98.5% 40%,
        98.8% 60%,
        98% 80%,
        97% 100%,
        0 100%
    );
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.2), inset 0 -2px 5px rgba(0, 0, 0, 0.6);
    z-index: 1;
    transition: width 0.3s ease;
}

.hp-number {
    font-weight: 700;
    font-size: 20px;
}

/* SVG icons */
.hud-svg {
    display: block;
}

/* ============================================
   OLD ELEMENTS (HIDDEN/REPLACED)
   ============================================ */

/* Old status bars - replaced by new health row */
#status-bars { display: none; }

/* Old player count - replaced by remain-box */
#player-count { display: none; }

/* Old weapon HUD - replaced by hotbar */
#weapon-hud { display: none; }
#weapon-slots { display: none; }
#quick-slots { display: none; }

/* ============================================
   INTERACTION & NOTIFICATIONS
   ============================================ */

#interaction-prompt {
    position: absolute;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-ui-bg);
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    border: 1px solid var(--color-warning);
    display: none;
}
#interaction-prompt .key {
    background: var(--color-warning);
    color: #000;
    padding: 2px 8px;
    font-weight: bold;
    margin-right: 5px;
}

#notification {
    position: absolute;
    bottom: 250px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 100, 0, 0.9);
    padding: 10px 25px;
    font-size: 16px;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    color: #fff;
    border-radius: 4px;
    display: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}
#notification.headshot { background: rgba(255, 0, 0, 0.9); animation: headshotPulse 0.3s ease; }
@keyframes headshotPulse { 0% { transform: translateX(-50%) scale(1.3); } 100% { transform: translateX(-50%) scale(1); } }


/* ============================================
   OVERLAYS
   ============================================ */

#gas-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 0%, rgba(0, 100, 0, 0.3) 100%);
    pointer-events: none;
    opacity: 0;
}

/* Damage overlay — Phase F / F7. ui2 turned the full-frame red wash into a directional lobe, but the lobe was 34vh deep
   on a top/bottom hit, so being shot from the front repainted the whole SKY (owner: "it reads as the weather changing
   colour"). It is now the same shape as the gas state's edge vignette: a shallow band anchored on the screen border
   FACING THE SHOOTER, 18vh deep (18vw on a side edge) and transparent by 92 % of that — so nothing of it can reach the
   middle 60 % x 60 % of the frame, which is where the crosshair, the target and the horizon live. Peak alpha on the
   struck edge is 0.48 (0.55 heavy) instead of 0.80, and the fade stays 0.4 s.
   hud.js sets --vz-dmg-x / --vz-dmg-y (the point on the screen border facing the shooter), --vz-dmg-rx / --vz-dmg-ry
   and data-dir. .blood-drops is the faint uniform rim (edge-only, and already clear of the centre box) that every hit
   gets, including one with no attacker (gas / fall / vehicle -> data-dir="none", rim alone). */
#damage-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 50;
    --vz-dmg-x: 50%;
    --vz-dmg-y: 100%;
    --vz-dmg-rx: 70vw;
    --vz-dmg-ry: 18vh;
    --vz-dmg-k: 1;
}
#damage-overlay .blood-vignette {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse calc(var(--vz-dmg-rx) * var(--vz-dmg-k)) calc(var(--vz-dmg-ry) * var(--vz-dmg-k)) at var(--vz-dmg-x) var(--vz-dmg-y),
        rgba(168, 8, 8, 0.48) 0%, rgba(155, 4, 4, 0.30) 26%, rgba(146, 0, 0, 0.13) 54%, rgba(140, 0, 0, 0.035) 78%, transparent 92%);
}
#damage-overlay[data-dir="none"] .blood-vignette { opacity: 0; }
#damage-overlay .blood-drops {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, transparent 68%, rgba(120, 0, 0, 0.05) 88%, rgba(120, 0, 0, 0.11) 100%);
    box-shadow: inset 0 0 40px rgba(120, 0, 0, 0.10);
}
/* a hit with no attacker (gas tick, fall, vehicle) has no lobe, so the rim IS the whole feedback and carries the full
   budget on its own — this is the treatment the owner pointed at in 22_inside_gas.png. It starts at 68 % of the
   corner radius (727 px of 1102), i.e. still clear of the middle 60 % x 60 % box, whose corner is 661 px out. */
#damage-overlay[data-dir="none"] .blood-drops {
    background: radial-gradient(ellipse at center, transparent 66%, rgba(122, 0, 0, 0.16) 88%, rgba(122, 0, 0, 0.30) 100%);
    box-shadow: inset 0 0 55px rgba(122, 0, 0, 0.28);
}
#damage-overlay.heavy { --vz-dmg-k: 1.12; }
#damage-overlay.heavy .blood-vignette {
    background: radial-gradient(ellipse calc(var(--vz-dmg-rx) * var(--vz-dmg-k)) calc(var(--vz-dmg-ry) * var(--vz-dmg-k)) at var(--vz-dmg-x) var(--vz-dmg-y),
        rgba(175, 10, 10, 0.55) 0%, rgba(162, 5, 5, 0.36) 26%, rgba(150, 0, 0, 0.16) 54%, rgba(142, 0, 0, 0.045) 78%, transparent 92%);
}
#damage-overlay.heavy .blood-drops {
    background: radial-gradient(ellipse at center, transparent 66%, rgba(130, 0, 0, 0.07) 87%, rgba(130, 0, 0, 0.15) 100%);
    box-shadow: inset 0 0 55px rgba(130, 0, 0, 0.14);
}
#damage-overlay.active {
    opacity: 1;
    animation: damageFlash 0.4s ease-out forwards;
}
#damage-overlay.heavy {
    animation: damageFlashHeavy 0.4s ease-out forwards;
}
@keyframes damageFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes damageFlashHeavy {
    0% { opacity: 1; }
    30% { opacity: 0.9; }
    100% { opacity: 0; }
}
/* Same-build A/B for the F7 measurement: hud.setDamageVariant('legacy') puts data-vzdmg="legacy" on <html> and emits
   the pre-F7 radii, restoring the shipped-before overlay verbatim in the SAME page load. Nothing sets the attribute in
   a normal match, so these five rules never match and cost nothing. */
html[data-vzdmg="legacy"] #damage-overlay .blood-vignette {
    background: radial-gradient(ellipse calc(var(--vz-dmg-rx) * var(--vz-dmg-k)) calc(var(--vz-dmg-ry) * var(--vz-dmg-k)) at var(--vz-dmg-x) var(--vz-dmg-y),
        rgba(165, 0, 0, 0.80) 0%, rgba(150, 0, 0, 0.55) 22%, rgba(140, 0, 0, 0.28) 48%, rgba(130, 0, 0, 0.08) 70%, transparent 86%);
}
html[data-vzdmg="legacy"] #damage-overlay.heavy .blood-vignette {
    background: radial-gradient(ellipse calc(var(--vz-dmg-rx) * var(--vz-dmg-k)) calc(var(--vz-dmg-ry) * var(--vz-dmg-k)) at var(--vz-dmg-x) var(--vz-dmg-y),
        rgba(165, 0, 0, 0.80) 0%, rgba(150, 0, 0, 0.55) 22%, rgba(140, 0, 0, 0.28) 48%, rgba(130, 0, 0, 0.08) 70%, transparent 86%);
}
html[data-vzdmg="legacy"] #damage-overlay .blood-drops {
    background: radial-gradient(ellipse at center, transparent 64%, rgba(120, 0, 0, 0.22) 88%, rgba(120, 0, 0, 0.40) 100%);
    box-shadow: inset 0 0 60px rgba(120, 0, 0, 0.40);
}
html[data-vzdmg="legacy"] #damage-overlay.heavy { --vz-dmg-k: 1.28; animation: damageFlashHeavy 0.5s ease-out forwards; }
html[data-vzdmg="legacy"] #damage-overlay.heavy .blood-drops {
    background: radial-gradient(ellipse at center, transparent 58%, rgba(130, 0, 0, 0.34) 86%, rgba(130, 0, 0, 0.58) 100%);
    box-shadow: inset 0 0 110px rgba(130, 0, 0, 0.55);
}

/* Low health warning effect — FIXES PASS 2026-09-04 (owner: "quand on est très low HP il faudrait une petite bordure
   rouge animée sur les rebords de l'écran"). The old overlay tinted the middle of the frame (a radial gradient reaching
   the centre at 50 %); it is now an EDGE BORDER only: a blurred 3-5 px line hugging the screen edge plus a 40-80 px
   inset ring, both fading to nothing well inside the outer 10 % of the frame (the middle 60 % x 60 % box stays untouched
   — measured in _build/evidence/fixes2/hud/). hud.js updateLowHealthEffect writes --vz-low (0 at 30 HP -> 1 at 1 HP):
   the line thickens, the ring deepens and the heartbeat quickens from 1.4 s to 0.7 s per cycle. Opacity is the only
   animated property (compositor-only on this fixed-size layer). */
#low-health-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 49;
    --vz-low: 0;
    /* the line (blur 6-8 px, 2-5 px thick) and the ring (blur 26-46 px, 4-11 px): both gone within ~60 px of the edge */
    box-shadow:
        inset 0 0 calc(6px + 2px * var(--vz-low)) calc(2px + 3px * var(--vz-low)) rgba(215, 0, 0, calc(0.80 + 0.20 * var(--vz-low))),
        inset 0 0 calc(26px + 20px * var(--vz-low)) calc(4px + 7px * var(--vz-low)) rgba(150, 0, 0, calc(0.38 + 0.34 * var(--vz-low)));
    will-change: opacity;
}
#low-health-overlay.active {
    animation: lowHealthBeat calc(1.4s - 0.7s * var(--vz-low)) ease-in-out infinite;
}
/* lub-dub: two quick beats, then rest */
@keyframes lowHealthBeat {
    0%   { opacity: 0.25; }
    14%  { opacity: 1; }
    28%  { opacity: 0.35; }
    42%  { opacity: 0.85; }
    62%  { opacity: 0.25; }
    100% { opacity: 0.25; }
}

/* On-screen blood splats — FIXES PASS 2026-09-04 (item 4: "du sang arcade mais réaliste quand on est touché"). Eight
   pooled nodes (hud.js _ensureBloodSplats / _spawnBloodSplats), each an inline splatter SVG; a hit shows 2-4 of them
   on the edge facing the shooter, fading and sliding down a few px over 2 s. Only opacity / transform animate. */
#blood-splats {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 51;
    overflow: hidden;
}
#blood-splats .splat {
    position: absolute;
    width: 120px; height: 120px;
    opacity: 0;
    --vz-splat-rot: 0deg;
    transform: rotate(var(--vz-splat-rot));
    mix-blend-mode: multiply;      /* blood darkens what is behind it (sky, walls) instead of glowing over it */
    will-change: opacity, transform;
}
#blood-splats .splat svg { width: 100%; height: 100%; display: block; }
#blood-splats .splat.show { animation: splatFade 2s ease-out forwards; }
@keyframes splatFade {
    0%   { opacity: 0.92; transform: rotate(var(--vz-splat-rot)) translateY(0) scale(0.92); }
    10%  { opacity: 0.92; transform: rotate(var(--vz-splat-rot)) translateY(1px) scale(1); }
    60%  { opacity: 0.75; transform: rotate(var(--vz-splat-rot)) translateY(6px) scale(1); }
    100% { opacity: 0;    transform: rotate(var(--vz-splat-rot)) translateY(14px) scale(1.02); }
}

/* ============================================
   HIT MARKER
   ============================================ */

#hit-marker {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    opacity: 0;
}
#hit-marker::before, #hit-marker::after { content: ''; position: absolute; background: #fff; }
#hit-marker::before { width: 2px; height: 100%; left: 50%; transform: translateX(-50%) rotate(45deg); }
#hit-marker::after { width: 100%; height: 2px; top: 50%; transform: translateY(-50%) rotate(45deg); }
#hit-marker.show { animation: hitMarker 0.2s ease; }
#hit-marker.headshot::before, #hit-marker.headshot::after { background: #FF0000; }
#hit-marker.headshot { animation: hitMarkerHead 0.3s ease; }
@keyframes hitMarker { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes hitMarkerHead { 0% { opacity: 1; transform: translate(-50%, -50%) scale(2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }

/* ============================================
   SCOPE OVERLAY
   ============================================ */

#scope-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: none; z-index: 10; }
#scope-overlay.active { display: block; }
#scope-overlay .vignette { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.95) 70%); }
#scope-overlay .crosshair-h { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: rgba(0,0,0,0.8); }
#scope-overlay .crosshair-v { position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: rgba(0,0,0,0.8); }
#scope-overlay .center-dot { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: red; border-radius: 50%; transform: translate(-50%, -50%); }
#scope-overlay .zoom-info { position: absolute; bottom: 35%; right: 35%; color: rgba(255,255,255,0.5); font-family: 'Oswald', sans-serif; font-size: 12px; }

/* ============================================
   CAST & RELOAD WHEELS
   ============================================ */

#cast-bar-container, #reload-bar-container {
    position: absolute;
    bottom: 38%;
    right: 43%;
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
#cast-bar-container.active, #reload-bar-container.active { display: flex; }

.loading-wheel {
    width: 36px;
    height: 36px;
    transform: rotate(-90deg);
}

.loading-wheel .wheel-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 10;
}

.loading-wheel .wheel-progress {
    fill: none;
    stroke: #4CAF50;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 251.2;
    stroke-dashoffset: 251.2;
    transition: stroke-dashoffset 0.05s linear;
}

.loading-wheel .wheel-progress.reload {
    stroke: #cc0000;
}

.wheel-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

#cast-bar-name, #reload-bar-name {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

#cast-bar-time, #reload-bar-time {
    font-size: 13px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* ============================================
   EQUIPPED CONSUMABLE
   ============================================ */


/* ============================================
   INVENTORY SYSTEM - H1Z1 STYLE
   ============================================ */

#inventory-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4));
    display: none;
    z-index: 100;
    pointer-events: auto;
    cursor: default;
}
#inventory-screen.open { display: block; }

/* --- INVENTORY WRAPPER --- */
.inventory-wrapper {
    position: absolute;
    top: 50%;
    left: 40px;
    width: 850px;
    display: flex;
    flex-direction: column;
    transform: translateY(-50%) scale(0.9);
    transform-origin: left center;
}

/* --- TABS (HEADER) --- */
.inventory-header {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
}

.inv-tab {
    font-family: 'Anton', sans-serif;
    font-size: 48px;
    text-transform: uppercase;
    cursor: pointer;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    line-height: 1;
}

.inv-tab.active {
    color: var(--color-blood);
    border-bottom: 5px solid #b34700;
}

.inv-tab.inactive {
    color: #888;
    border-bottom: 5px solid transparent;
}
.inv-tab.inactive:hover { color: #aaa; }

/* --- MAIN CONTENT GRID --- */
.inventory-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 20px;
}

/* --- SHARED PANEL STYLES --- */
.inv-panel-header {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    color: #aaa;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 2px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    text-shadow: 1px 1px 2px black;
}

.grunge-box {
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(60,60,60,1);
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    width: 100%;
}

.grunge-box::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid rgba(255,255,255,0.05);
    pointer-events: none;
}

/* --- SECTION: EQUIPPED (Top Row, Spans 2 cols) --- */
.equipped-section { grid-column: 1 / span 2; }

.equipped-container {
    height: 320px;
    padding: 10px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 160px 1fr;
    /* FIXES PASS 2026-09-04: the row was `auto` and the silhouette asked for `height: 100%` of it — a circular size Chrome
       resolved to a 648 px row (measured at 1080p: the gear columns were centred 190 px BELOW the 300 px panel). One
       definite row = the panel's content height; the silhouette stretches to it (align-self), the columns stay centred. */
    grid-template-rows: minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

/* Silhouette Center — FIXES PASS 2026-09-04: a DROP TARGET (hud.js onAvatarDrop). .drop-ok while a wearable / weapon /
   quick-slot item is being dragged, .drag-over while the cursor is over it. */
.avatar-silhouette {
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.15;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    height: auto;
    align-self: stretch;
    min-height: 0;
    color: #333;
    position: relative;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}
/* the figure is an inline SVG (index.html) — the 🧍 emoji had no glyph in the UI font and drew a tofu box */
.avatar-silhouette .avatar-glyph { width: 96px; height: 200px; display: block; }
.avatar-silhouette .avatar-glyph svg { width: 100%; height: 100%; display: block; fill: #d8d8d8; }
.avatar-silhouette .avatar-hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 2px; color: var(--color-warning); opacity: 0; transition: opacity 0.15s; }
.avatar-silhouette.drop-ok { opacity: 0.55; border-color: rgba(255, 170, 0, 0.45); background: radial-gradient(circle, rgba(255, 170, 0, 0.12) 0%, transparent 72%); }
.avatar-silhouette.drop-ok .avatar-hint { opacity: 1; }
.avatar-silhouette.drag-over { opacity: 0.9; border-color: var(--color-warning); background: radial-gradient(circle, rgba(255, 170, 0, 0.28) 0%, transparent 75%); }

/* Gear Column Layouts - 2x3 Grid */
.gear-col-left {
    display: grid;
    grid-template-columns: repeat(2, 74px);
    grid-template-rows: repeat(3, 74px);
    gap: 6px;
    justify-content: end;
}

.gear-col-right {
    display: grid;
    grid-template-columns: repeat(2, 74px);
    grid-template-rows: repeat(3, 74px);
    gap: 6px;
    justify-content: start;
}

/* Item Slot Base Style for Equipped */
.equip-slot {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(0,0,0,0.5);
    border: 1px solid #444;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: border-color 0.2s;
    cursor: pointer;
}
.equip-slot:hover {
    border-color: #777;
    background: rgba(40,40,40,0.6);
}

.equip-slot .slot-icon {
    font-size: 26px;
    opacity: 0.4;
    filter: drop-shadow(1px 1px 2px black);
}
.equip-slot.has-item .slot-icon { opacity: 1; }

.equip-slot .slot-idx {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 12px;
    color: var(--color-blood);
    font-weight: bold;
}

.equip-slot .slot-label {
    position: absolute;
    bottom: 2px;
    font-size: 8px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}

.equip-slot .item-name {
    font-size: 8px;
    color: #fff;
    text-align: center;
    margin-top: 2px;
    position: absolute;
    bottom: 2px;
}

/* Weapon slot specific styling */
.equip-slot.weapon-slot { border-color: #555; }
.equip-slot.weapon-slot.has-item {
    border-color: var(--color-rare);
    background: url('assets/icons/slotbackground.png') center/cover no-repeat;
}

/* Equipment slot specific styling */
.equip-slot.has-item {
    border-color: var(--color-uncommon);
    background: url('assets/icons/slotbackground.png') center/cover no-repeat;
}

/* Disabled slots */
.equip-slot.disabled {
    pointer-events: none;
    opacity: 0.3;
}

/* Fist slot with image */
.equip-slot.fist-slot {
    border-color: #666;
    pointer-events: none; /* Always active, can't change */
}
.slot-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 2px;
}

/* Consumable/Nade slots */
.equip-slot.consumable-slot {
    border-color: #555;
}
.equip-slot.consumable-slot.has-item {
    border-color: var(--color-uncommon);
    background: url('assets/icons/slotbackground.png') center/cover no-repeat;
}

/* --- SECTIONS: CARRYING & PROXIMITY (Bottom Row) --- */
.carrying-section { grid-column: 1; }
.proximity-section { grid-column: 2; }

/* Container heights — FIXES PASS 2026-09-04 (owner: "l'inventaire, on ne peut pas scroller ou c'est trop petit"):
   320 -> 380 px (x0.9 = 342 on screen; the whole inventory is 780 px tall in a 1080 px frame). Measured at 1920x1080
   before: the 25-slot military-backpack grid needed 407 px in a 318 px box (rows 4-5 cut) and the grid's own padding
   stuck 30 px out of its container; now all 25 slots fit without scrolling, and the panels clip and scroll cleanly. */
.carrying-grid-container, .proximity-container {
    height: 380px;
}
.carrying-grid-container { overflow: hidden; }

/* CARRYING SPECIFICS */
.carrying-header-info {
    font-size: 16px;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
}

.capacity-bar {
    width: 120px;
    height: 10px;
    background: #222;
    border: 1px solid #555;
    position: relative;
}
.cap-fill {
    height: 100%;
    background: var(--color-blood);
    transition: width 0.3s ease;
}

.carrying-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 10px;
    overflow-y: auto;
    align-content: start;
    height: 100%;
    box-sizing: border-box;   /* FIXES PASS 2026-09-04: the padding used to push the grid 30 px out of its box */
}

.carrying-grid .inv-slot {
    aspect-ratio: 1;
    width: 100%;
    background: rgba(0,0,0,0.5);
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s;
}
.carrying-grid .inv-slot:hover {
    border-color: #777;
    background: rgba(40,40,40,0.6);
}
.carrying-grid .inv-slot.has-item {
    border-color: var(--color-common);
    background: url('assets/icons/slotbackground.png') center/cover no-repeat;
}
.carrying-grid .inv-slot.rarity-common { border-color: var(--color-common); }
.carrying-grid .inv-slot.rarity-uncommon { border-color: var(--color-uncommon); }
.carrying-grid .inv-slot.rarity-rare { border-color: var(--color-rare); }
.carrying-grid .inv-slot.rarity-epic { border-color: var(--color-epic); }

.carrying-grid .inv-slot .item-icon {
    font-size: 22px;
    filter: drop-shadow(1px 1px 2px black);
}

.stack-count {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 1px black;
}

.ammo-type-label {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #ffcc00;
    text-shadow: 1px 1px 1px black;
    z-index: 5;
}

/* PROXIMITY SPECIFICS */
.proximity-container {
    background: rgba(10, 10, 10, 0.9);
    display: flex;
    flex-direction: column;
    font-family: 'Oswald', sans-serif;
    overflow-y: auto;
}

.proximity-container.empty {
    justify-content: center;
    align-items: center;
    color: #333;
    font-size: 24px;
    text-transform: uppercase;
}

#nearby-loot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    overflow-y: auto;
}

.loot-item {
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid #444;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.loot-item:hover {
    border-color: var(--color-warning);
    background: rgba(60, 60, 60, 0.8);
}
.loot-item .loot-icon { font-size: 24px; }
.loot-item .loot-info { flex: 1; }
.loot-item .loot-name { font-size: 12px; color: #fff; font-weight: bold; }
.loot-item .loot-desc { font-size: 10px; color: rgba(255,255,255,0.6); }


/* Custom Scrollbar for inventory */
.carrying-grid::-webkit-scrollbar,
.proximity-container::-webkit-scrollbar,
#nearby-loot::-webkit-scrollbar { width: 6px; }
.carrying-grid::-webkit-scrollbar-track,
.proximity-container::-webkit-scrollbar-track,
#nearby-loot::-webkit-scrollbar-track { background: #111; }
.carrying-grid::-webkit-scrollbar-thumb,
.proximity-container::-webkit-scrollbar-thumb,
#nearby-loot::-webkit-scrollbar-thumb { background: #444; border: 1px solid #222; }
.carrying-grid::-webkit-scrollbar-thumb:hover,
.proximity-container::-webkit-scrollbar-thumb:hover,
#nearby-loot::-webkit-scrollbar-thumb:hover { background: #555; }

/* Drag-over states for new inventory */
.equip-slot.drag-over,
.carrying-grid .inv-slot.drag-over {
    border-color: var(--color-warning) !important;
    background: rgba(255, 170, 0, 0.2) !important;
}

/* ============================================
   LOADING & END SCREENS
   ============================================ */

#loading-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; cursor: default; }
#loading-screen h1 { font-family: 'Oswald', sans-serif; font-size: 72px; color: var(--color-blood); text-transform: uppercase; letter-spacing: 10px; text-shadow: 0 0 30px rgba(185, 28, 28, 0.5); }
#loading-screen .subtitle { font-size: 18px; color: rgba(255,255,255,0.5); letter-spacing: 5px; margin: 20px 0 50px; }
#loading-bar-container { width: 400px; height: 4px; background: rgba(255,255,255,0.1); }
#loading-bar { height: 100%; background: var(--color-blood); width: 0%; transition: width 0.3s ease; }
#loading-text { margin-top: 20px; font-size: 14px; color: rgba(255,255,255,0.5); }
#start-button { margin-top: 30px; padding: 15px 50px; font-family: 'Oswald', sans-serif; font-size: 24px; text-transform: uppercase; background: var(--color-blood); color: #fff; border: none; cursor: pointer; pointer-events: auto; display: none; }
#start-button:hover { background: #d62828; }

#death-screen, #victory-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 100; cursor: default; }
/* ui2 (critic: 'opaque crimson, world lost' / 'near-black, nothing visible'): the scene stays visible under both screens.
   Death: a red wash capped at ~40 % in the centre with a darker rim, plus #game-canvas.vz-dead (a CSS filter on the
   canvas, hud.js) for the slight desaturation. Victory: NO dark fill — only a light rim vignette; the text sits on a
   translucent card (.end-card, wrapped by hud.js) so it stays readable over the lit scene. */
#death-screen { background: radial-gradient(ellipse at center, rgba(120, 0, 0, 0.30) 0%, rgba(95, 0, 0, 0.38) 55%, rgba(35, 0, 0, 0.62) 100%); }
#victory-screen { background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.18) 80%, rgba(0, 0, 0, 0.42) 100%); }
#game-canvas.vz-dead { filter: saturate(0.5) brightness(0.92); }
#death-screen h1, #victory-screen h1 { font-family: 'Oswald', sans-serif; font-size: 72px; text-transform: uppercase; letter-spacing: 10px; }
#death-screen h1 { color: #fff; }
#victory-screen h1 { color: gold; text-shadow: 0 0 50px rgba(255, 215, 0, 0.5); }
#victory-screen .subtitle { font-size: 36px; color: #fff; margin-top: 20px; }
.stats { margin-top: 20px; font-size: 24px; color: rgba(255,255,255,0.8); }
#respawn-button { margin-top: 40px; padding: 15px 50px; font-family: 'Oswald', sans-serif; font-size: 20px; text-transform: uppercase; background: #fff; color: var(--color-blood); border: none; cursor: pointer; pointer-events: auto; }

/* ============================================
   CUSTOM CURSOR & DRAG
   ============================================ */

#custom-cursor {
    position: absolute;
    width: 24px; height: 24px;
    pointer-events: none;
    z-index: 500;
    display: none;
}
#custom-cursor::before, #custom-cursor::after {
    content: '';
    position: absolute;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.8);
}
#custom-cursor::before { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); }
#custom-cursor::after { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); }
#custom-cursor .cursor-dot {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 4px; height: 4px;
    background: #FF4444;
    border-radius: 50%;
}

#dragged-item {
    position: absolute;
    width: 60px; height: 60px;
    background: rgba(40, 40, 40, 0.95);
    border: 2px solid var(--color-warning);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 400;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
#dragged-item .item-icon { font-size: 24px; }
#dragged-item .item-count { font-size: 11px; color: #fff; }

/* ============================================
   CONTEXT MENU
   ============================================ */

#context-menu {
    position: absolute;
    background: var(--color-ui-bg);
    border: 2px solid var(--color-ui-border);
    min-width: 150px;
    display: none;
    z-index: 300;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
#context-menu.visible { display: block; }
.context-option {
    padding: 10px 15px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
}
.context-option:hover, .context-option.hover { background: rgba(255, 170, 0, 0.3); }
.context-option .option-icon { font-size: 16px; }
.context-option.disabled { opacity: 0.4; pointer-events: none; }
.context-separator { height: 1px; background: var(--color-ui-border); margin: 5px 0; }

/* Quick slot highlight when assigning */
@keyframes quickSlotPulse { 0%, 100% { box-shadow: 0 0 5px var(--color-warning); } 50% { box-shadow: 0 0 15px var(--color-warning); } }

/* Inventory slot hover states for drag */
.inv-slot.drag-over { border-color: var(--color-warning) !important; background: rgba(255, 170, 0, 0.2) !important; }
.equip-slot.drag-over { border-color: var(--color-warning) !important; background: rgba(255, 170, 0, 0.2) !important; }

/* Loot item hover state */
.loot-item.hover { background: rgba(255, 170, 0, 0.2); }
.proximity-container.drag-over {
    border-color: var(--color-blood) !important;
    background: rgba(200, 50, 50, 0.3) !important;
    box-shadow: inset 0 0 20px rgba(200, 50, 50, 0.5);
}

/* ============================================
   DEBUG WHEELS
   ============================================ */

#weapon-wheel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.85);
    border: 3px solid rgba(255, 255, 255, 0.3);
    display: none;
    z-index: 1000;
}
#weapon-wheel.active { display: block; }
.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(139, 0, 0, 0.8);
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    color: #fff;
    z-index: 10;
}
.wheel-segment {
    position: absolute;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(50, 50, 50, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.15s ease;
}
.wheel-segment:hover, .wheel-segment.selected {
    background: rgba(139, 0, 0, 0.8);
    border-color: #fff;
    transform: scale(1.1);
}
.wheel-segment[data-index="0"] { top: 10px; left: 50%; transform: translateX(-50%); }
.wheel-segment[data-index="1"] { top: 60px; right: 15px; }
.wheel-segment[data-index="2"] { bottom: 40px; right: 25px; }
.wheel-segment[data-index="3"] { bottom: 40px; left: 25px; }
.wheel-segment[data-index="4"] { top: 60px; left: 15px; }
.wheel-segment.selected[data-index="0"] { transform: translateX(-50%) scale(1.1); }
.segment-label {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}

.debug-wheel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.85);
    border: 3px solid rgba(255, 255, 255, 0.3);
    display: none;
    z-index: 1000;
}
.debug-wheel.active { display: block; }

#consumables-wheel { border-color: rgba(76, 175, 80, 0.5); }
.consumable-center { background: rgba(76, 175, 80, 0.8) !important; }
#consumables-wheel .wheel-segment:hover,
#consumables-wheel .wheel-segment.selected {
    background: rgba(76, 175, 80, 0.8);
}

#ammo-wheel { border-color: rgba(255, 152, 0, 0.5); }
.ammo-center { background: rgba(255, 152, 0, 0.8) !important; }
#ammo-wheel .wheel-segment:hover,
#ammo-wheel .wheel-segment.selected {
    background: rgba(255, 152, 0, 0.8);
}