@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SF-Pro-Display-Thin.otf") format("opentype");
  font-weight: 100;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SF-Pro-Display-Light.otf") format("opentype");
  font-weight: 300;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SF-Pro-Display-Regular.otf") format("opentype");
  font-weight: 400;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SF-Pro-Display-Medium.otf") format("opentype");
  font-weight: 500;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SF-Pro-Display-Semibold.otf") format("opentype");
  font-weight: 600;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SF-Pro-Display-Bold.otf") format("opentype");
  font-weight: 700;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SF-Pro-Display-Heavy.otf") format("opentype");
  font-weight: 800;
}

:root {
      --ui-scale: 1.2;
      --inventory-grid-width: 500px;
      --inventory-cell-size: 41.6666667px;
      --nearby-grid-width: 458.3333337px;
      --nearby-grid-shift: 20px;
      --text: #f2f2f2;
      --muted: rgba(255,255,255,.65);
      --line: rgba(255,255,255,.12);
      --shadow: 0 18px 40px rgba(0,0,0,.45);
      --slot: rgba(6,6,8,.74);
      --danger-bg: rgba(180, 34, 34, .92);
      --danger-border: rgba(255, 140, 140, .35);
      --warning-bg: rgba(196, 104, 18, .92);
      --warning-border: rgba(255, 193, 117, .35);
      --success-bg: rgba(29, 128, 73, .92);
      --success-border: rgba(138, 255, 187, .35);
      --valid-slot-bg: rgba(59, 184, 92, .22);
      --valid-slot-border: rgba(129, 255, 163, .8);
    }

    * { box-sizing: border-box; user-select: none; -webkit-user-select: none; }

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
    }

body {
	overflow: hidden;
	background: transparent;
}

    .screen {
      position: relative;
      width: calc(100vw / var(--ui-scale));
      height: calc(100vh / var(--ui-scale));
      min-width: 1600px;
      min-height: 768px;
      transform: scale(var(--ui-scale));
      transform-origin: top left;
      overflow: clip;
    }

    @media (min-width: 1921px) and (min-height: 1081px) {
      :root {
        --ui-scale: 1.5;
      }
    }

    .top-card {
      position: absolute;
      top: 70px;
      height: 118px;
      background: linear-gradient(180deg, rgba(6,6,8,.95), rgba(10,10,12,.88));
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 170px;
    }

    .player-card { left: 38px; width: 500px; }
    .bag-card { left: 574px; width: 500px; }
    .nearby-card {
      left: calc(1090px + var(--nearby-grid-shift));
      width: var(--nearby-grid-width);
    }

    .card-info {
      padding: 22px 26px;
      background: linear-gradient(90deg, rgba(7,7,10,.98), rgba(7,7,10,.92));
    }

    .card-title {
      margin: 0 0 10px;
      font-size: 20px;
      font-weight: 600;
    }

    .card-subtitle {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 14px;
    }

    .card-money,
    .card-weight {
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .tiny-icon {
      width: 18px;
      height: 18px;
      opacity: .72;
    }

    .weight-badge {
      padding: 1px 7px 2px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.05);
      font-weight: 700;
    }

    .left-panel {
      position: absolute;
      left: 97px;
      top: 221px;
      width: 349px;
      height: 660px;
      z-index: 2;
    }

    .silhouette {
      position: absolute;
      inset: 0;
      background: url('../img/player.png') center 48px / 265px auto no-repeat;
      opacity: .14;
      pointer-events: none;
      filter: grayscale(1) brightness(1.55);
    }

    .slot-box {
      position: absolute;
      background: var(--slot);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    .equip-slot.valid-target {
      background: var(--valid-slot-bg) !important;
      border-color: var(--valid-slot-border) !important;
      box-shadow: inset 0 0 0 1px rgba(129, 255, 163, .35), 0 0 18px rgba(90, 255, 140, .18);
    }

    .slot-head { left: 128px; top: 0; width: 94px; height: 94px; }
    .slot-left { left: 18px; top: 110px; width: 94px; height: 94px; }
    .slot-body { left: 128px; top: 110px; width: 94px; height: 94px; }
    .slot-right { left: 238px; top: 110px; width: 94px; height: 94px; }

    .weapon-primary {
      left: 18px;
      top: 222px;
      width: 204px;
      height: 92px;
      background: rgba(6,6,8,.66);
    }

    .weapon-secondary {
      left: 18px;
      top: 328px;
      width: 204px;
      height: 92px;
      background: rgba(6,6,8,.66);
    }

    .ammo-1 { left: 238px; top: 222px; width: 94px; height: 92px; }
    .ammo-2 { left: 238px; top: 328px; width: 94px; height: 92px; }

    .artifacts {
      position: absolute;
      left: 18px;
      top: 434px;
      width: 314px;
      height: 56px;
      display: grid;
      grid-template-columns: repeat(5, 56px);
      column-gap: 8px;
      z-index: 3;
    }

    .quickbar {
      position: absolute;
      left: 18px;
      top: 500px;
      width: 314px;
      height: 56px;
      display: grid;
      grid-template-columns: repeat(5, 56px);
      column-gap: 8px;
      z-index: 3;
    }

    .artifact-slot,
    .quick-slot {
      position: relative;
      width: 56px;
      height: 56px;
      background: var(--slot);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    .quick-index {
      position: absolute;
      bottom: 7px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      color: rgba(255,255,255,.92);
      z-index: 2;
    }

    .status-box {
      position: absolute;
      left: 18px;
      top: 570px;
      width: 314px;
      height: 62px;
      background: var(--slot);
      border: 1px solid var(--line);
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 7px;
      z-index: 3;
    }

    .status-line {
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent 0%, currentColor 10%, currentColor 90%, transparent 100%);
      box-shadow: 0 0 10px currentColor;
    }

    .s-red { color: #cb2026; }
    .s-blue { color: #315ebd; }
    .s-gold { color: #cc8a32; }

    .slot-head::before,
    .slot-left::before,
    .slot-body::before,
    .slot-right::before,
    .weapon-primary::before,
    .weapon-secondary::before,
    .ammo-1::before,
    .ammo-2::before,
    .artifact-slot::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 70%;
      height: 70%;
      transform: translate(-50%, -50%);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      opacity: .9;
      pointer-events: none;
    }

    .slot-head::before { background-image: url('../img/bg_mask.png'); }
    .slot-left::before { background-image: url('../img/bg_detector.png'); }
    .slot-body::before { background-image: url('../img/bg_armor.png'); }
    .slot-right::before { background-image: url('../img/bg_grenade.png'); }
    .weapon-primary::before,
    .weapon-secondary::before { background-image: url('../img/bg_rifle.png'); }
    .ammo-1::before { background-image: url('../img/bg_pistol.png'); }
    .ammo-2::before { background-image: url('../img/bg_knife.png'); }
    .artifact-slot::before { background-image: url('../img/bg_artefact.png'); }

    .filled::before { display: none; }

    .item {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      background: rgba(255,255,255,.02);
      border: 1px solid rgba(255,255,255,.08);
      cursor: grab;
      transition: transform .08s ease;
      overflow: visible;
      isolation: isolate;
    }

    .item.dragging {
      cursor: grabbing;
      transform: scale(1.02);
      z-index: 1000;
      opacity: .92;
    }
    .item.item-frame-1::before,
    .trade-grid-item.item-frame-1::before,
    .trader-item.item-frame-1::before,
    .item.item-frame-2::before,
    .trade-grid-item.item-frame-2::before,
    .trader-item.item-frame-2::before,
    .item.item-frame-3::before,
    .trade-grid-item.item-frame-3::before,
    .trader-item.item-frame-3::before,
    .item.item-frame-1::after,
    .trade-grid-item.item-frame-1::after,
    .trader-item.item-frame-1::after,
    .item.item-frame-2::after,
    .trade-grid-item.item-frame-2::after,
    .trader-item.item-frame-2::after,
    .item.item-frame-3::after,
    .trade-grid-item.item-frame-3::after,
    .trader-item.item-frame-3::after {
      content: '';
      position: absolute;
      pointer-events: none;
      z-index: 0;
      border-radius: 999px;
    }

    .item.item-frame-1::before,
    .trade-grid-item.item-frame-1::before,
    .trader-item.item-frame-1::before,
    .item.item-frame-2::before,
    .trade-grid-item.item-frame-2::before,
    .trader-item.item-frame-2::before,
    .item.item-frame-3::before,
    .trade-grid-item.item-frame-3::before,
    .trader-item.item-frame-3::before {
      left: 20.5%;
      right: 20.5%;
      top: 17%;
      bottom: 17%;
      filter: blur(8px);
      opacity: .26;
      transform: translateZ(0);
    }

    .item.item-frame-1::after,
    .trade-grid-item.item-frame-1::after,
    .trader-item.item-frame-1::after,
    .item.item-frame-2::after,
    .trade-grid-item.item-frame-2::after,
    .trader-item.item-frame-2::after,
    .item.item-frame-3::after,
    .trade-grid-item.item-frame-3::after,
    .trader-item.item-frame-3::after {
      left: 33%;
      right: 33%;
      top: 50%;
      height: 36%;
      transform: translateY(-50%);
      filter: blur(3px);
      opacity: .24;
    }

    .item.item-frame-1::before,
    .trade-grid-item.item-frame-1::before,
    .trader-item.item-frame-1::before {
      background: radial-gradient(ellipse at center, rgba(92, 214, 120, .58) 0%, rgba(92, 214, 120, .34) 38%, rgba(92, 214, 120, .12) 62%, rgba(92, 214, 120, 0) 82%);
    }

    .item.item-frame-1::after,
    .trade-grid-item.item-frame-1::after,
    .trader-item.item-frame-1::after {
      background: linear-gradient(90deg, rgba(92, 214, 120, 0), rgba(92, 214, 120, .78) 50%, rgba(92, 214, 120, 0));
    }

    .item.item-frame-2::before,
    .trade-grid-item.item-frame-2::before,
    .trader-item.item-frame-2::before {
      background: radial-gradient(ellipse at center, rgba(255, 163, 54, .62) 0%, rgba(255, 163, 54, .36) 38%, rgba(255, 163, 54, .13) 62%, rgba(255, 163, 54, 0) 82%);
    }

    .item.item-frame-2::after,
    .trade-grid-item.item-frame-2::after,
    .trader-item.item-frame-2::after {
      background: linear-gradient(90deg, rgba(255, 163, 54, 0), rgba(255, 163, 54, .82) 50%, rgba(255, 163, 54, 0));
    }

    .item.item-frame-3::before,
    .trade-grid-item.item-frame-3::before,
    .trader-item.item-frame-3::before {
      background: radial-gradient(ellipse at center, rgba(230, 66, 66, .62) 0%, rgba(230, 66, 66, .36) 38%, rgba(230, 66, 66, .13) 62%, rgba(230, 66, 66, 0) 82%);
    }

    .item.item-frame-3::after,
    .trade-grid-item.item-frame-3::after,
    .trader-item.item-frame-3::after {
      background: linear-gradient(90deg, rgba(230, 66, 66, 0), rgba(230, 66, 66, .84) 50%, rgba(230, 66, 66, 0));
    }


    .slot-box > .item.item-frame-1::before,
    .slot-box > .item.item-frame-2::before,
    .slot-box > .item.item-frame-3::before,
    .quick-slot > .item.item-frame-1::before,
    .quick-slot > .item.item-frame-2::before,
    .quick-slot > .item.item-frame-3::before,
    .artifact-slot > .item.item-frame-1::before,
    .artifact-slot > .item.item-frame-2::before,
    .artifact-slot > .item.item-frame-3::before {
      left: 22%;
      right: 22%;
      top: 21.5%;
      bottom: 21.5%;
      filter: blur(5px);
      opacity: .14;
    }

    .slot-box > .item.item-frame-1::after,
    .slot-box > .item.item-frame-2::after,
    .slot-box > .item.item-frame-3::after,
    .quick-slot > .item.item-frame-1::after,
    .quick-slot > .item.item-frame-2::after,
    .quick-slot > .item.item-frame-3::after,
    .artifact-slot > .item.item-frame-1::after,
    .artifact-slot > .item.item-frame-2::after,
    .artifact-slot > .item.item-frame-3::after {
      left: 35%;
      right: 35%;
      height: 27%;
      filter: blur(2px);
      opacity: .13;
    }

    .item.trader-sellable {
      cursor: pointer;
      border-color: rgba(118, 228, 196, .5);
      background:
        linear-gradient(135deg, rgba(118, 228, 196, .12), rgba(118, 228, 196, .03) 52%, rgba(22, 28, 31, .02) 52%),
        radial-gradient(circle at 50% 72%, rgba(118, 228, 196, .14), rgba(118, 228, 196, 0) 68%),
        rgba(255,255,255,.02);
      box-shadow:
        inset 0 0 0 1px rgba(118, 228, 196, .14),
        inset 0 -10px 18px rgba(118, 228, 196, .06),
        0 0 0 1px rgba(118, 228, 196, .08);
    }

    .item.trader-sellable::selection {
      background: transparent;
    }

    .item img,
    .trade-grid-item img,
    .trader-item img {
      position: relative;
      z-index: 1;
      max-width: 82%;
      max-height: 82%;
      object-fit: contain;
      pointer-events: none;
      filter: drop-shadow(0 3px 7px rgba(0,0,0,.42));
    }

    .stack,
    .weapon-label,
    .weapon-ammo,
    .ammo-count {
      position: absolute;
      z-index: 2;
      font-size: 12px;
      color: rgba(255,255,255,.92);
      text-shadow: 0 1px 2px rgba(0,0,0,.76);
    }

    .stack,
    .weapon-ammo,
    .ammo-count {
      right: 7px;
      bottom: 6px;
    }

    .weapon-label {
      right: 8px;
      top: 8px;
      width: 54px;
      text-align: right;
      color: rgba(255,255,255,.75);
      line-height: 1.15;
      font-size: 11px;
    }

    .grid-panel {
      position: absolute;
      top: 221px;
      width: var(--inventory-grid-width);
      height: 660px;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(14, 1fr);
      background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)), url('../img/grid_bg.jpg') center/cover no-repeat;
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow);
      overflow: hidden;
      z-index: 1;
      isolation: isolate;
    }

    #gridPanel { left: 574px; }

    .nearby-grid-panel {
      left: calc(1090px + var(--nearby-grid-shift));
      width: var(--nearby-grid-width);
      grid-template-columns: repeat(11, 1fr);
    }

    .grid-cell {
      border-right: 1px solid rgba(255,255,255,.11);
      border-bottom: 1px solid rgba(255,255,255,.11);
    }

    .grid-cell:nth-child(12n) { border-right: none; }

    .nearby-grid-panel .grid-cell:nth-child(12n) { border-right: 1px solid rgba(255,255,255,.11); }
    .nearby-grid-panel .grid-cell:nth-child(11n) { border-right: none; }

    .grid-drop-preview {
      position: absolute;
      display: none;
      pointer-events: none;
      z-index: 2;
      border: 1px dashed rgba(129,255,163,.5);
      background: rgba(129,255,163,.12);
      box-shadow: inset 0 0 0 1px rgba(129,255,163,.14);
    }

    .grid-drop-preview.invalid {
      border-color: rgba(255,120,120,.5);
      background: rgba(255,120,120,.12);
      box-shadow: inset 0 0 0 1px rgba(255,120,120,.14);
    }


    .nearby-drop-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 36px;
      text-align: center;
      background:
        linear-gradient(180deg, rgba(114, 11, 11, .72), rgba(58, 4, 4, .82)),
        rgba(115, 8, 8, .58);
      border: 1px solid rgba(255, 122, 122, .22);
      box-shadow: inset 0 0 0 1px rgba(255, 90, 90, .12), inset 0 0 60px rgba(255, 42, 42, .15);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 4;
      transition: opacity .16s ease, visibility .16s ease;
    }

    .nearby-drop-overlay.visible {
      opacity: 1;
      visibility: visible;
    }

    .nearby-drop-overlay-text {
      max-width: 320px;
      color: rgba(255, 236, 236, .98);
      text-transform: uppercase;
      letter-spacing: .06em;
      font: 700 23px/1.28 "SF Pro Display", Arial, sans-serif;
      text-shadow: 0 2px 10px rgba(0,0,0,.38);
      animation: nearbyDropPulse 1.35s ease-in-out infinite;
      transform-origin: center center;
    }

    @keyframes nearbyDropPulse {
      0%, 100% {
        transform: scale(1);
        opacity: .88;
      }
      50% {
        transform: scale(1.08);
        opacity: 1;
      }
    }

    .nearby-item {
      cursor: grab;
    }

    .nearby-item .stack,
    .nearby-item .weapon-label,
    .nearby-item .weapon-ammo,
    .nearby-item .ammo-count {
      display: none;
    }

    .nearby-amount,
    .nearby-weight {
      position: absolute;
      z-index: 2;
      font: 600 11px/1 "SF Pro Display", Arial, sans-serif;
      color: rgba(255,255,255,.94);
      text-shadow: 0 1px 2px rgba(0,0,0,.82);
      pointer-events: none;
    }

    .nearby-amount {
      right: 7px;
      bottom: 6px;
    }

    .nearby-weight {
      left: 7px;
      bottom: 6px;
      color: rgba(255,255,255,.78);
    }

    .drag-layer {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 999;
    }

    .alerts {
		position: fixed;
		left: 50%;
		bottom: 34px;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		gap: 12px;
		z-index: 2000;
		pointer-events: none;
	}

    .alert {
		position: relative;
		min-width: 360px;
		max-width: 620px;
		padding: 14px 18px 14px 18px;
		background:
			linear-gradient(180deg, rgba(17, 19, 15, .96), rgba(10, 11, 9, .96)),
			rgba(12, 12, 10, .96);
		box-shadow:
			0 10px 28px rgba(0,0,0,.44),
			inset 0 0 0 1px rgba(255,255,255,.03),
			0 0 18px rgba(163, 145, 73, .08);
		color: #d8d2ba;
		font: 600 14px/1.35 "SF Pro Display", Arial, sans-serif;
		letter-spacing: .02em;
		text-align: center;
		opacity: 0;
		transform: translateY(18px);
		animation: alertIn .22s ease forwards;
		overflow: hidden;
	}
	
	.alert::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 4px;
		height: 100%;
		background: rgba(181, 166, 92, .72);
		box-shadow: 0 0 14px rgba(181, 166, 92, .22);
	}

    .alert-danger {
		border-color: rgba(173, 82, 66, .32);
		color: #f0cbc4;
	}

	.alert-danger::before {
		background: rgba(173, 82, 66, .82);
		box-shadow: 0 0 14px rgba(173, 82, 66, .25);
	}

    .alert-warning {
		border-color: rgba(181, 166, 92, .34);
		color: #e2d7aa;
	}

	.alert-warning::before {
		background: rgba(181, 166, 92, .82);
		box-shadow: 0 0 14px rgba(181, 166, 92, .24);
	}

    .alert-success {
		border-color: rgba(97, 138, 94, .34);
		color: #c8e0c4;
	}

	.alert-success::before {
		background: rgba(97, 138, 94, .84);
		box-shadow: 0 0 14px rgba(97, 138, 94, .24);
	}

    @keyframes alertIn
	{
		to {
			opacity: 1;
			transform: translateY(0);
		}
    }

    .context-menu {
		position: fixed;
		z-index: 1200;
		width: 180px;
		min-width: 180px;
		max-width: 242px;
		background: linear-gradient(180deg, rgba(10,10,12,.985), rgba(6,6,8,.975));
		border: 1px solid rgba(255,255,255,.16);
		box-shadow: 0 14px 28px rgba(0,0,0,.48);
		display: none;
		overflow: hidden;
	}

    .context-menu.open {
		display: block;
	}

    .menu-btn {
		width: 100%;
		min-height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(180deg, rgba(12,12,15,.99), rgba(8,8,10,.97));
		border: none;
		color: rgba(255,245,245,.98);
		text-transform: uppercase;
		font: 700 14px / 1 "SF Pro Display", Arial, sans-serif;
		letter-spacing: .01em;
		padding: 14px 18px;
		text-align: center;
		white-space: nowrap;
		border-bottom: 1px solid rgba(255,255,255,.14);
		cursor: pointer;
	}

    .menu-btn:last-child {
		border-bottom: none;
	}
	
	.menu-btn:hover {
		background: linear-gradient(180deg, rgba(18,18,22,.995), rgba(11,11,14,.985));
	}

    .item-tooltip {
      position: fixed;
      width: 320px;
      min-height: 274px;
      background: linear-gradient(180deg, rgba(8,8,10,.985), rgba(13,13,16,.965));
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 20px 40px rgba(0,0,0,.55);
      z-index: 1500;
      display: none;
      padding: 12px 18px 18px;
      color: #d8d8d8;
      pointer-events: none;
      --tier-color: #cfc7c7;
      --tier-color-soft: rgba(255,255,255,.14);
      --tier-glow-color: rgba(255,255,255,.18);
    }

    .item-tooltip.open {
      display: block;
    }

    .tooltip-close {
      position: absolute;
      top: 7px;
      right: 10px;
      background: transparent;
      border: none;
      color: rgba(255,255,255,.9);
      font-size: 22px;
      line-height: 1;
      cursor: default;
      pointer-events: none;
    }
	
	.tooltip-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.tooltip-title {
  font: 700 20px/1.15 "SF Pro Display", Arial, sans-serif;
  color: #fff;
  letter-spacing: .01em;
  text-shadow: 0 0 12px rgba(255,255,255,.08);
}

.tooltip-item-id {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font: 700 12px/1 "SF Pro Display", Arial, sans-serif;

  color: var(--tier-color);
  box-shadow: 0 0 14px color-mix(in srgb, var(--tier-color) 22%, transparent);
}


    .tooltip-image-wrap {
      width: 100%;
      height: 74px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 4px;
      margin-bottom: 8px;
    }

    .tooltip-image {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
    }

    .tooltip-divider {
      height: 1px;
      background: linear-gradient(90deg, rgba(0,0,0,0), var(--tier-color-soft), rgba(0,0,0,0));
      margin: 6px 0 12px;
      box-shadow: 0 0 14px var(--tier-glow-color);
    }

    .tooltip-description {
      font-size: 13px;
      line-height: 1.45;
      color: rgba(255,255,255,.62);
      min-height: 82px;
      margin-bottom: 14px;
    }

    .tooltip-tier-line {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
      color: var(--tier-color);
      font: 700 14px/1.2 "SF Pro Display", Arial, sans-serif;
      text-transform: uppercase;
      letter-spacing: .02em;
    }

    .tooltip-tier-label,
    .tooltip-tier-value {
      color: var(--tier-color);
    }

    .tooltip-desc-body {
      color: rgba(255,255,255,.66);
      white-space: normal;
    }

    .tooltip-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      align-items: start;
    }

    .tooltip-stat-label {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255,255,255,.92);
      margin-bottom: 7px;
      letter-spacing: .03em;
    }

    .tooltip-stat-value {
      font-size: 20px;
      color: #d8c26c;
      line-height: 1.1;
      word-break: break-word;
    }

    .tooltip-mag {
      font-size: 12px;
      color: rgba(255,255,255,.82);
      line-height: 1.25;
    }


    .inventory-drop-layer {
      position: fixed;
      inset: 0;
      z-index: 1900;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 28px;
    }

    .inventory-drop-layer.open {
      display: flex;
    }

    .inventory-drop-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.56);
      backdrop-filter: blur(4px);
    }

    .inventory-drop-dialog {
      position: relative;
      z-index: 1;
      width: min(460px, calc(100vw - 48px));
      display: none;
      padding: 24px 24px 22px;
      background: linear-gradient(180deg, rgba(12,12,14,.985), rgba(6,6,8,.975));
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 22px 44px rgba(0,0,0,.48);
    }

    .inventory-drop-dialog.open {
      display: block;
      animation: inventoryDropDialogIn .18s ease;
    }

    @keyframes inventoryDropDialogIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
    }

    .inventory-drop-dialog-text {
      color: rgba(255,245,245,.98);
      text-transform: uppercase;
      letter-spacing: .03em;
      font: 700 18px/1.34 "SF Pro Display", Arial, sans-serif;
      text-align: center;
    }

    .inventory-drop-dialog-divider {
      width: 100%;
      height: 1px;
      margin: 18px 0 16px;
      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0));
    }

    .inventory-drop-qty-box {
      display: grid;
      gap: 10px;
      justify-items: center;
      margin-bottom: 18px;
    }

    .inventory-drop-qty-input {
      width: 168px;
      height: 54px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.12);
      color: #fff;
      text-align: center;
      font: 700 24px/1 "SF Pro Display", Arial, sans-serif;
      outline: none;
    }

    .inventory-drop-qty-input:focus {
      border-color: rgba(255, 122, 122, .45);
      box-shadow: 0 0 0 1px rgba(255, 122, 122, .18), 0 0 18px rgba(255, 122, 122, .1);
    }

    .inventory-drop-qty-max {
      color: rgba(255,255,255,.64);
      font: 500 13px/1.2 "SF Pro Display", Arial, sans-serif;
    }

    .inventory-drop-dialog-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .inventory-drop-dialog-btn {
      min-height: 46px;
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(18,18,22,.995), rgba(11,11,14,.985));
      color: rgba(255,245,245,.98);
      text-transform: uppercase;
      font: 700 14px/1 "SF Pro Display", Arial, sans-serif;
      letter-spacing: .03em;
      cursor: pointer;
      transition: transform .12s ease, border-color .12s ease, background .12s ease;
    }

    .inventory-drop-dialog-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.18);
      background: linear-gradient(180deg, rgba(22,22,26,.995), rgba(13,13,16,.985));
    }

    .inventory-drop-dialog-btn-danger {
      border-color: rgba(173, 82, 66, .52);
      background: linear-gradient(180deg, rgba(122, 24, 24, .98), rgba(86, 15, 15, .98));
      box-shadow:
        inset 0 0 0 1px rgba(255, 142, 142, .08),
        0 0 18px rgba(122, 24, 24, .18);
    }

    .inventory-drop-dialog-btn-danger:hover {
      border-color: rgba(209, 107, 107, .62);
      background: linear-gradient(180deg, rgba(146, 32, 32, .99), rgba(102, 18, 18, .99));
      box-shadow:
        inset 0 0 0 1px rgba(255, 170, 170, .1),
        0 0 22px rgba(146, 32, 32, .22);
    }

/* ===== Animated inventory visibility ===== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.5)),
    url('../img/bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 0;
}

.screen {
  position: relative;
  z-index: 1;
  opacity: 1;
  transform:
    scale(var(--ui-scale))
    translateY(0)
    scale(1);
  transform-origin: top left;
  transition:
    opacity .18s ease,
    transform .18s ease;
}

.drag-layer,
.alerts,
.context-menu,
.item-tooltip {
  transition:
    opacity .15s ease,
    transform .15s ease;
}

.drag-layer,
.alerts {
  opacity: 1;
}

.context-menu.open,
.item-tooltip.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* закрытое состояние */
body.inventory-hidden::before {
  opacity: 0;
}

body.inventory-hidden .screen,
body.inventory-hidden .drag-layer,
body.inventory-hidden .alerts {
  opacity: 0;
  pointer-events: none;
}

body.inventory-hidden .screen {
  transform:
    scale(var(--ui-scale))
    translateY(42px)
    scale(.94);
}

/* чтобы меню и тултип тоже не зависали визуально */
body.inventory-hidden .context-menu,
body.inventory-hidden .item-tooltip {
  opacity: 0;
  transform: translateY(10px) scale(.96);
  pointer-events: none;
}

/* служебный класс: после завершения анимации реально убираем из потока взаимодействия */
body.inventory-gone .screen,
body.inventory-gone .drag-layer,
body.inventory-gone .alerts,
body.inventory-gone .context-menu,
body.inventory-gone .item-tooltip {
  visibility: hidden;
  pointer-events: none;
}
body.inventory-hidden .inventory-drop-layer,
body.inventory-gone .inventory-drop-layer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}