/* полноэкранная сцена, HUD плавает поверх: слева вход (фиолетовый), справа выход (оранжевый) */
:root {
  --bg: #03030a;
  --bg-top: #0d0d17;
  --glass: rgba(14, 15, 28, 0.62);
  --glass-hi: rgba(255, 255, 255, 0.035);
  --text: #ebedf7;
  --muted: #8c91a8;
  --purple: #a85cff;
  --orange: #ff8f2e;
  --cyan: #4cc7ff;
  --red: #ff4757;
  --green: #59ff9e;
  --gold: #ffd84a;
  --font-ui: Bahnschrift, 'Exo 2', 'Segoe UI', Arial, sans-serif;
  --font-num: Bahnschrift, 'Exo 2', 'Segoe UI', Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  user-select: none;
  -webkit-user-select: none;
}

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: var(--bg); }

.panel {
  position: relative;
  background: linear-gradient(to bottom, var(--glass-hi), transparent 50%), var(--glass);
  border: 1.2px solid color-mix(in srgb, var(--accent, var(--purple)) 35%, transparent);
  border-radius: 14px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent, var(--purple)) 12%, transparent);
  backdrop-filter: blur(6px);
}
.purple { --accent: var(--purple); }
.orange { --accent: var(--orange); }
.lbl {
  font-size: 12px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent, var(--purple));
  font-weight: 600;
}

#hud { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
body[data-mode="play"] #hud { opacity: 1; }
#numbers { position: absolute; inset: 0; overflow: hidden; }

#cross { position: absolute; left: 50%; top: 50%; --gap: 8px; transition: opacity 0.15s; }
#cross i { position: absolute; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 0 6px rgba(120, 200, 255, 0.5); transition: transform 0.06s linear; }
#cross .t, #cross .b { width: 2px; height: 9px; left: -1px; }
#cross .l, #cross .r { width: 9px; height: 2px; top: -1px; }
#cross .t { top: calc(-9px - var(--gap)); }
#cross .b { top: var(--gap); }
#cross .l { left: calc(-9px - var(--gap)); }
#cross .r { left: var(--gap); }
#cross b { position: absolute; width: 3px; height: 3px; left: -1.5px; top: -1.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px var(--cyan); }
#cross.hide { opacity: 0; }
#holo { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transition: opacity 0.12s; --hc: var(--cyan); }
#holo.on { opacity: 1; }
#holo.lock { --hc: var(--red); }
#holo .glass { position: absolute; left: -120px; top: -80px; width: 240px; height: 160px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--hc) 60%, transparent); background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--hc) 7%, transparent) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 50%, transparent 45%, color-mix(in srgb, var(--hc) 10%, transparent)); box-shadow: 0 0 22px color-mix(in srgb, var(--hc) 30%, transparent), inset 0 0 26px color-mix(in srgb, var(--hc) 14%, transparent); animation: holoflick 3.2s steps(1) infinite; }
@keyframes holoflick { 0%, 100% { opacity: 1; } 47% { opacity: 0.86; } 48% { opacity: 1; } 81% { opacity: 0.92; } }
#holo .ret { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 1.5px solid var(--hc); box-shadow: 0 0 8px var(--hc); }
#holo .ret::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--hc); box-shadow: 0 0 6px var(--hc); }
#holo .ammo { position: absolute; right: 14px; top: 8px; font-size: 26px; font-weight: 800; color: var(--hc); text-shadow: 0 0 8px var(--hc); font-variant-numeric: tabular-nums; line-height: 1; }
#holo .ammo small { font-size: 12px; font-weight: 600; opacity: 0.7; margin-left: 2px; }
#holo .ammo.low { --hc: var(--orange); }
#holo .arrow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid var(--hc); filter: drop-shadow(0 0 5px var(--hc)); transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(-56px); opacity: 0; }
#holo.seen .arrow { opacity: 1; }
#holo .info { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc); text-shadow: 0 0 6px var(--hc); font-variant-numeric: tabular-nums; }
#holo .brk { position: absolute; left: 0; top: 0; width: var(--s, 30px); height: var(--s, 30px); display: none; background: linear-gradient(var(--red), var(--red)) 0 0 / 9px 2px, linear-gradient(var(--red), var(--red)) 0 0 / 2px 9px, linear-gradient(var(--red), var(--red)) 100% 0 / 9px 2px, linear-gradient(var(--red), var(--red)) 100% 0 / 2px 9px, linear-gradient(var(--red), var(--red)) 0 100% / 9px 2px, linear-gradient(var(--red), var(--red)) 0 100% / 2px 9px, linear-gradient(var(--red), var(--red)) 100% 100% / 9px 2px, linear-gradient(var(--red), var(--red)) 100% 100% / 2px 9px; background-repeat: no-repeat; filter: drop-shadow(0 0 4px var(--red)); }
#holo.inside .brk { display: block; }
#scope { position: absolute; inset: 0; opacity: 0; transition: opacity 0.12s; background: radial-gradient(circle at 50% 50%, transparent 0, transparent min(34vh, 34vw), rgba(2, 6, 4, 0.94) calc(min(34vh, 34vw) + 2px)); }
#scope.on { opacity: 1; }
#scope::before, #scope::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(120, 255, 170, 0.85); box-shadow: 0 0 6px rgba(90, 255, 160, 0.9); }
#scope::before { width: min(68vh, 68vw); height: 1.5px; transform: translate(-50%, -50%); }
#scope::after { width: 1.5px; height: min(68vh, 68vw); transform: translate(-50%, -50%); }
#scope i { position: absolute; left: 50%; top: 50%; width: min(68vh, 68vw); height: min(68vh, 68vw); transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(90, 255, 160, 0.7); box-shadow: 0 0 14px rgba(90, 255, 160, 0.5), inset 0 0 40px rgba(90, 255, 160, 0.15); }
#ring.heat .fg { stroke: var(--orange); filter: drop-shadow(0 0 5px var(--orange)); }

#hitmark { position: absolute; left: 50%; top: 50%; opacity: 0; }
#hitmark i { position: absolute; width: 2.5px; height: 11px; left: -1.25px; top: -5.5px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); border-radius: 1px; }
#hitmark i:nth-child(1) { transform: rotate(45deg) translateY(-13px); }
#hitmark i:nth-child(2) { transform: rotate(135deg) translateY(-13px); }
#hitmark i:nth-child(3) { transform: rotate(225deg) translateY(-13px); }
#hitmark i:nth-child(4) { transform: rotate(315deg) translateY(-13px); }
#hitmark.crit i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
#hitmark.kill i { background: var(--red); box-shadow: 0 0 10px var(--red); height: 15px; }
#hitmark.on { animation: hit 0.28s ease-out; }
@keyframes hit {
  0% { opacity: 1; transform: scale(1.5); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

#dmgdir { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; overflow: visible; }
#dmgdir path { fill: rgba(255, 50, 70, 0.75); filter: drop-shadow(0 0 6px rgba(255, 40, 60, 0.9)); }

#ring { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; transform: rotate(-90deg); opacity: 0; transition: opacity 0.15s; }
#ring.on { opacity: 1; }
#ring circle { fill: none; stroke-width: 2.6; }
#ring .bg { stroke: rgba(255, 255, 255, 0.12); }
#ring .fg { stroke: var(--cyan); stroke-dasharray: 113.1; stroke-dashoffset: 113.1; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--cyan)); }

#prompt { position: absolute; left: 50%; top: calc(50% + 48px); transform: translateX(-50%); font-size: 15px; letter-spacing: 0.05em; color: var(--text); text-shadow: 0 0 8px rgba(0, 0, 0, 0.9); white-space: nowrap; }
#prompt:empty { display: none; }

#tl { position: absolute; left: max(22px, env(safe-area-inset-left, 0px)); top: max(20px, env(safe-area-inset-top, 0px)); display: flex; gap: 10px; align-items: flex-start; }
.stat { padding: 10px 16px 11px; min-width: 120px; }
.stat .val { font-family: var(--font-num); font-size: 30px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat .sub { font-size: 12px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
#tl .stat.off { display: none; }
#combo { align-self: center; font-size: 22px; font-weight: 800; letter-spacing: 0.12em; color: var(--gold); text-shadow: 0 0 14px rgba(255, 200, 60, 0.7); opacity: 0; }
#combo.pop { animation: combo 1.6s ease-out; }
@keyframes combo {
  0% { opacity: 0; transform: scale(1.8); }
  12% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

#banner { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); text-align: center; opacity: 0; --c: var(--purple); white-space: nowrap; }
#banner .t { font-size: 54px; font-weight: 800; letter-spacing: 0.32em; padding-left: 0.32em; color: var(--text); text-shadow: 0 0 22px var(--c), 0 0 60px var(--c); }
#banner .s { font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--c); margin-top: 4px; }
#banner .t::after { content: ''; display: block; height: 2px; margin: 10px auto 0; width: 60%; background: linear-gradient(90deg, transparent, var(--purple), var(--orange), transparent); }
#banner.show { animation: banner 2.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes banner {
  0% { opacity: 0; transform: translateX(-50%) scale(1.25); letter-spacing: 0.6em; filter: blur(8px); }
  12% { opacity: 1; transform: translateX(-50%) scale(1); filter: blur(0); }
  78% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.96); }
}

#feed { position: absolute; right: max(22px, env(safe-area-inset-right, 0px)); top: max(20px, env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fi { --c: var(--orange); padding: 6px 12px; font-size: 14px; border-radius: 10px; background: var(--glass); border: 1.2px solid color-mix(in srgb, var(--c) 40%, transparent); color: var(--text); animation: slidein 0.25s ease-out; transition: opacity 0.5s, transform 0.5s; }
.fi span { color: var(--c); margin-left: 6px; font-variant-numeric: tabular-nums; }
.fi b { color: var(--gold); }
.fi.out { opacity: 0; transform: translateX(20px); }
@keyframes slidein { from { opacity: 0; transform: translateX(30px); } }

#toasts { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.toast { --c: var(--cyan); font-size: 14px; letter-spacing: 0.06em; padding: 5px 14px; border-radius: 10px; background: var(--glass); border: 1.2px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); text-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); animation: toastin 0.25s cubic-bezier(0.2, 1.4, 0.4, 1); transition: opacity 0.4s, transform 0.4s; white-space: nowrap; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes toastin { from { opacity: 0; transform: translateY(10px) scale(0.9); } }

#vitals { position: absolute; left: max(22px, env(safe-area-inset-left, 0px)); bottom: max(22px, env(safe-area-inset-bottom, 0px)); width: 300px; display: flex; flex-direction: column; gap: 6px; }
.bar { position: relative; height: 22px; border-radius: 7px; background: rgba(8, 9, 18, 0.7); border: 1.2px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
.bar .fill, .bar .chip { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; }
.bar .chip { background: rgba(255, 255, 255, 0.55); }
.bar .num { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 0 4px rgba(0, 0, 0, 0.9); }
.bar.shield .fill { background: linear-gradient(90deg, #1c5fd6, var(--cyan)); box-shadow: 0 0 12px var(--cyan); }
.bar.hp .fill { background: linear-gradient(90deg, #1d9b52, var(--green)); box-shadow: 0 0 12px var(--green); }
#hud.low .bar.hp { border-color: var(--red); animation: lowpulse 0.8s ease-in-out infinite; }
#hud.low .bar.hp .fill { background: linear-gradient(90deg, #a01527, var(--red)); box-shadow: 0 0 12px var(--red); }
@keyframes lowpulse { 50% { box-shadow: 0 0 16px var(--red); } }

#effects { display: flex; gap: 6px; flex-wrap: wrap; min-height: 0; }
.eff { --c: var(--gold); --k: 1; display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 16px; background: var(--glass); border: 1.2px solid color-mix(in srgb, var(--c) 40%, transparent); font-size: 12px; color: var(--c); letter-spacing: 0.05em; }
.eff svg { width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: conic-gradient(color-mix(in srgb, var(--c) 35%, transparent) calc(var(--k) * 360deg), transparent 0); fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#hotbar { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: 8px; }
.slot { --c: transparent; --ic: #fff; position: relative; width: 66px; height: 66px; border-radius: 13px; background: linear-gradient(to bottom, var(--glass-hi), transparent 50%), var(--glass); border: 1.2px solid color-mix(in srgb, var(--c) 45%, rgba(255, 255, 255, 0.08)); transition: transform 0.18s cubic-bezier(0.2, 1.4, 0.4, 1), border-color 0.2s, box-shadow 0.2s; }
.slot .ic { position: absolute; inset: 9px 9px 15px; display: flex; align-items: center; justify-content: center; }
.slot .ic svg { width: 100%; height: 100%; fill: none; stroke: var(--ic); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--ic)); }
.slot .cnt { position: absolute; right: 7px; bottom: 4px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.slot .key { position: absolute; left: 7px; top: 4px; font-size: 10px; color: var(--muted); }
.slot .meter { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 2px; background: var(--cyan); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 6px var(--cyan); }
.slot.empty { opacity: 0.45; }
.slot.sel { transform: translateY(-8px) scale(1.06); border-color: color-mix(in srgb, var(--c) 90%, white); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 14px color-mix(in srgb, var(--c) 18%, transparent); }
.slot.pop { animation: slotpop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes slotpop { from { transform: scale(0.7); } }

#buildbar { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%) translateY(12px); display: flex; gap: 8px; opacity: 0; transition: opacity 0.18s, transform 0.18s; }
#buildbar.on { opacity: 1; transform: translateX(-50%); }
.bp { --c: var(--cyan); position: relative; width: 58px; height: 58px; border-radius: 12px; background: var(--glass); border: 1.2px solid color-mix(in srgb, var(--c) 35%, transparent); display: flex; align-items: center; justify-content: center; }
.bp svg { width: 28px; height: 28px; fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linejoin: round; }
.bp b { position: absolute; left: 6px; top: 3px; font-size: 11px; color: var(--muted); }
.bp span { position: absolute; right: 6px; bottom: 3px; font-size: 11px; font-variant-numeric: tabular-nums; }
.bp.sel { border-color: var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 50%, transparent); transform: translateY(-4px); }
.bp.poor span { color: var(--red); }

#weapon { --accent: var(--orange); position: absolute; right: max(22px, env(safe-area-inset-right, 0px)); bottom: max(22px, env(safe-area-inset-bottom, 0px)); min-width: 220px; padding: 10px 16px 12px; text-align: right; }
#weapon .name { font-size: 12px; letter-spacing: 0.19em; color: var(--orange); min-height: 15px; }
#weapon .ammo { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
#weapon .a { font-size: 44px; font-weight: 700; line-height: 1.05; }
#weapon .b { font-size: 16px; color: var(--muted); margin-left: 6px; }
#weapon .row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tag svg { width: 15px; height: 15px; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linejoin: round; }
.tag b { color: var(--text); font-weight: 600; }
#skills { display: inline-flex; gap: 6px; }
.sk { --c: var(--cyan); --k: 1; position: relative; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(color-mix(in srgb, var(--c) 30%, transparent) calc(var(--k) * 360deg), rgba(255, 255, 255, 0.05) 0); border: 1.2px solid color-mix(in srgb, var(--c) 55%, transparent); transition: box-shadow 0.15s, transform 0.15s; }
.sk svg { width: 16px; height: 16px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sk b { position: absolute; right: -4px; bottom: -4px; font-size: 9px; line-height: 1; padding: 2px 3px; border-radius: 4px; background: var(--bg); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.sk.busy { opacity: 0.55; }
.sk.on { box-shadow: 0 0 12px var(--c); transform: scale(1.12); }

.dnum { position: absolute; left: 0; top: 0; font-family: var(--font-num); font-weight: 800; font-size: 22px; color: #fff; text-shadow: 0 0 2px #000, 0 0 8px rgba(0, 0, 0, 0.8); white-space: nowrap; will-change: transform, opacity; }
.dnum.crit { color: var(--gold); font-size: 27px; text-shadow: 0 0 2px #000, 0 0 12px rgba(255, 200, 40, 0.8); }
.dnum.shield { color: var(--cyan); }
.dnum.heal { color: var(--green); }

#overlay {
  position: fixed;
  inset: 0;
  display: none;
  overflow-y: auto;
  padding-block: max(28px, env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background:
    radial-gradient(ellipse 50% 60% at 0% 50%, rgba(168, 92, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 100% 50%, rgba(255, 143, 46, 0.12), transparent 70%),
    linear-gradient(to bottom, rgba(13, 13, 23, 0.55), rgba(3, 3, 10, 0.78));
}
body[data-mode="menu"] #overlay, body[data-mode="pause"] #overlay, body[data-mode="dead"] #overlay, body[data-mode="error"] #overlay, body[data-mode="shop"] #overlay, body[data-mode="inventory"] #overlay, body[data-mode="pick"] #overlay, body[data-mode="workshop"] #overlay, body[data-mode="market"] #overlay { display: flex; }
.screen { display: none; margin: auto; width: min(880px, 100%); flex-direction: column; align-items: center; gap: 22px; animation: screenin 0.35s ease-out; }
body[data-mode="menu"] .screen.menu, body[data-mode="pause"] .screen.pause, body[data-mode="dead"] .screen.dead, body[data-mode="error"] .screen.error, body[data-mode="shop"] .screen.shop, body[data-mode="inventory"] .screen.inv, body[data-mode="pick"] .screen.pick, body[data-mode="workshop"] .screen.workshop, body[data-mode="market"] .screen.market { display: flex; }
@keyframes screenin { from { opacity: 0; transform: translateY(10px); } }

.logo { text-align: center; }
.logo h1 {
  margin: 0;
  font-size: clamp(40px, 9vw, 86px);
  font-weight: 800;
  letter-spacing: 0.26em;
  padding-left: 0.26em;
  line-height: 1;
  color: var(--text);
  text-shadow: 0 0 24px rgba(168, 92, 255, 0.55), 0 0 70px rgba(255, 143, 46, 0.25);
}
.logo h1::after { content: ''; display: block; height: 2px; margin: 16px auto 0; width: 72%; background: linear-gradient(90deg, transparent, var(--purple), var(--orange), transparent); box-shadow: 0 0 12px rgba(168, 92, 255, 0.6); }
.tagline { margin-top: 12px; font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted); }

h2 { margin: 0; font-size: clamp(34px, 7vw, 58px); font-weight: 800; letter-spacing: 0.28em; padding-left: 0.28em; text-transform: uppercase; text-shadow: 0 0 22px rgba(168, 92, 255, 0.55); text-wrap: balance; text-align: center; }
.dead h2 { text-shadow: 0 0 26px rgba(255, 71, 87, 0.7); }

button {
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  padding: 12px 26px;
  border-radius: 10px;
  border: 1.2px solid rgba(255, 255, 255, 0.16);
  background: var(--glass);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.12s;
}
button:hover { border-color: var(--cyan); box-shadow: 0 0 16px rgba(76, 199, 255, 0.35); background: rgba(30, 34, 60, 0.7); }
button:active { transform: scale(0.97); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button.primary { font-size: 18px; padding: 15px 56px; border-color: color-mix(in srgb, var(--purple) 70%, transparent); background: linear-gradient(90deg, rgba(168, 92, 255, 0.25), rgba(255, 143, 46, 0.2)); box-shadow: 0 0 22px rgba(168, 92, 255, 0.3); }
button.primary:hover { border-color: var(--orange); box-shadow: 0 0 28px rgba(255, 143, 46, 0.4); }
.btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.picker { width: 100%; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.lbl .skillCount { margin-left: 8px; color: var(--text); letter-spacing: 0.08em; display: inline-block; padding: 1px 9px; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--orange) 38%, transparent) var(--k, 0%), rgba(255, 255, 255, 0.06) var(--k, 0%)); }
.skillCount.full { animation: full 0.4s; color: var(--red); }
@keyframes full { 30% { transform: scale(1.3); } }
.mapgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.mapcard, .skchip { --c: var(--purple); font: inherit; text-transform: none; letter-spacing: normal; text-align: left; color: var(--text); background: rgba(8, 9, 18, 0.55); border: 1.2px solid color-mix(in srgb, var(--c) 30%, transparent); border-radius: 12px; }
.mapcard { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px 12px; position: relative; overflow: hidden; }
.mapcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: 0.6; }
.mapcard b { font-size: 15px; letter-spacing: 0.06em; color: var(--c); }
.mapcard span { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.mapcard i { font-style: normal; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, var(--muted)); margin-top: 2px; }
.mapcard.sel, .skchip.sel { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, rgba(8, 9, 18, 0.7)); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 12px color-mix(in srgb, var(--c) 12%, transparent); }
.mapcard:hover, .skchip:hover { border-color: color-mix(in srgb, var(--c) 80%, transparent); background: color-mix(in srgb, var(--c) 8%, rgba(8, 9, 18, 0.7)); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 25%, transparent); }
.skillgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.skchip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; position: relative; }
.skchip svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.skchip span { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; line-height: 1.35; color: var(--muted); min-width: 0; }
.skchip span b { font-size: 13px; color: var(--text); font-weight: 600; }
.skchip.sel span b { color: var(--c); }
.skchip em { position: absolute; right: 8px; top: 7px; font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 5px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.skchip.shake { animation: shake 0.35s; }
.skchip span { padding-right: 24px; }
.skchip .wt { position: absolute; right: 8px; bottom: 6px; font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold); opacity: 0.85; }
.skchip.heavy { opacity: 0.45; }
@keyframes shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.pause .picker { max-width: 880px; }
.cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; width: 100%; }
.cols > * { min-width: 0; }
.keys, .settings { padding: 16px 18px; }
.keys dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 12px 0 0; font-size: 14px; }
.keys dt { color: var(--cyan); font-weight: 600; white-space: nowrap; }
.keys dd { margin: 0; color: var(--text); }
.settings { --accent: var(--orange); display: flex; flex-direction: column; gap: 12px; width: 100%; }
.pause .settings { max-width: 420px; }
.settings label { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.settings output { color: var(--text); font-variant-numeric: tabular-nums; }
.settings input, .settings select { grid-column: 1 / -1; }
.hint { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 60ch; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; pointer-events: auto; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; background: var(--bg); border: 2px solid var(--orange); box-shadow: 0 0 8px var(--orange); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--orange); box-shadow: 0 0 8px var(--orange); }
select { font: inherit; font-size: 14px; color: var(--text); background: rgba(8, 9, 18, 0.8); border: 1.2px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 6px 8px; pointer-events: auto; }

.results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(620px, 100%); }
.results div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 13px; background: var(--glass); border: 1.2px solid rgba(255, 143, 46, 0.3); }
.results span { font-size: 11px; letter-spacing: 0.19em; text-transform: uppercase; color: var(--orange); }
.results b { font-size: 28px; font-variant-numeric: tabular-nums; }
.error p { max-width: 60ch; text-align: center; color: var(--muted); }

/* режимы: счёт команд, подсказка, возрождение, указатели целей, таблички с именами, таблица игроков */
#teambar { --ca: var(--cyan); --cb: var(--red); position: absolute; left: 50%; top: max(18px, env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: none; align-items: center; gap: 14px; }
#teambar.on { display: flex; }
#teambar span { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 12px; background: var(--glass); min-width: 132px; }
#teambar .a { justify-content: flex-end; border: 1.2px solid color-mix(in srgb, var(--ca) 55%, transparent); box-shadow: 0 0 calc((1 - var(--mine)) * 18px) color-mix(in srgb, var(--ca) 40%, transparent); }
#teambar .b { border: 1.2px solid color-mix(in srgb, var(--cb) 55%, transparent); box-shadow: 0 0 calc(var(--mine) * 18px) color-mix(in srgb, var(--cb) 40%, transparent); }
#teambar b { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
#teambar .a b { color: var(--ca); }
#teambar .b b { color: var(--cb); }
#teambar i { font-style: normal; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
#teambar em { font-style: normal; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
#note { position: absolute; left: 50%; top: 78px; transform: translateX(-50%); font-size: 15px; letter-spacing: 0.08em; color: var(--gold); text-shadow: 0 0 10px rgba(255, 200, 60, 0.6), 0 0 3px #000; white-space: nowrap; }
#note:empty { display: none; }
#respawn { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; display: none; }
#respawn.on { display: block; animation: screenin 0.4s ease-out; }
#respawn b { display: block; font-size: 30px; font-weight: 800; letter-spacing: 0.22em; text-shadow: 0 0 20px rgba(255, 71, 87, 0.7); }
#respawn span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); letter-spacing: 0.08em; }
#markers, #tags { position: absolute; inset: 0; overflow: hidden; }
.mk { --c: var(--green); position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; translate: -50% -50%; }
.mk i { width: 14px; height: 14px; transform: rotate(45deg); border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 25%, transparent); box-shadow: 0 0 10px var(--c); }
.mk b { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--c); text-shadow: 0 0 4px #000, 0 0 8px #000; white-space: nowrap; }
.mk span { font-size: 11px; color: var(--text); opacity: 0.8; text-shadow: 0 0 4px #000; font-variant-numeric: tabular-nums; }
.mk.edge { opacity: 0.85; }
.mk.edge i { animation: mkpulse 1s ease-in-out infinite; }
@keyframes mkpulse { 50% { box-shadow: 0 0 18px var(--c); } }
.tag3d { --c: var(--cyan); position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; transform-origin: 50% 100%; }
.tag3d b { font-size: 14px; font-weight: 600; color: var(--c); text-shadow: 0 0 4px #000, 0 0 8px #000; white-space: nowrap; }
.tag3d i { display: block; width: 56px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.55); overflow: hidden; }
.tag3d s { display: block; height: 100%; background: var(--c); transform-origin: left; box-shadow: 0 0 6px var(--c); }
.tag3d.foe b { color: #fff; }
.tag3d.foe s { background: var(--red); }
#board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 18px; min-width: min(460px, 92vw); display: none; }
#board.on { display: block; }
#board table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
#board th { text-align: left; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 8px 8px; }
#board td { padding: 5px 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
#board td:not(:first-child), #board th:not(:first-child) { text-align: right; width: 80px; }
#board td i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); margin-right: 8px; }
#board tr.me td { color: var(--gold); }
#board tr.team td { color: var(--c); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding-top: 12px; border-top: none; }
#board small { color: var(--muted); font-size: 11px; }
.tag.loot { display: none; }
.tag.loot.on { display: inline-flex; }
.tag.loot svg { stroke: var(--purple); }
.tag.money { display: none; color: var(--gold); }
.tag.money.on { display: inline-flex; }
.tag.money b { color: var(--gold); text-shadow: 0 0 8px rgba(255, 200, 60, 0.5); }

/* магазин */
.screen.shop { gap: 16px; }
.shophead { display: flex; align-items: baseline; justify-content: space-between; width: 100%; gap: 16px; flex-wrap: wrap; }
.shophead h2 { padding-left: 0; text-align: left; text-shadow: 0 0 22px rgba(255, 200, 60, 0.45); }
.shopmoney { font-size: 40px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(255, 200, 60, 0.6); }
.shopgrid { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.shopcat { --accent: var(--gold); margin-top: 4px; }
.shoprow { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.shopitem { --c: var(--purple); --ic: #fff; position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; text-transform: none; letter-spacing: normal; font-size: 12px; color: var(--muted); background: rgba(8, 9, 18, 0.6); border: 1.2px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius: 12px; }
.shopitem svg { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--ic); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--ic)); }
.shopitem span { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; min-width: 0; padding-right: 44px; }
.shopitem span b { font-size: 13.5px; color: var(--text); font-weight: 600; }
.shopitem em { position: absolute; right: 10px; top: 9px; font-style: normal; font-size: 15px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.shopitem i { position: absolute; right: 10px; bottom: 7px; font-style: normal; font-size: 10.5px; color: var(--cyan); }
.shopitem:hover { border-color: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 30%, transparent); background: color-mix(in srgb, var(--c) 10%, rgba(8, 9, 18, 0.7)); }
.shopitem.off { opacity: 0.55; }
.shopitem.poor em { color: var(--red); }
.shopitem.shake { animation: shake 0.35s; }

.endsub { margin: -10px 0 0; color: var(--muted); letter-spacing: 0.1em; text-align: center; }
.endsub:empty { display: none; }
.dead.win h2 { text-shadow: 0 0 26px rgba(89, 255, 158, 0.7); }
button:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* меню: режимы, их настройки, сеть */
.mapcard.off { opacity: 0.4; }
.mapcard.off i { color: var(--red); }
.modeopts { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.modeopts:empty { display: none; }
.modeopts label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.modeopts input[type="range"] { width: 140px; }
.modeopts output { color: var(--text); min-width: 22px; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border: 1.2px solid rgba(255, 255, 255, 0.14); border-radius: 9px; overflow: hidden; }
.seg button { border: none; border-radius: 0; padding: 6px 12px; font-size: 12px; letter-spacing: 0.08em; text-transform: none; background: transparent; }
.seg button.sel { background: color-mix(in srgb, var(--orange) 25%, transparent); color: var(--orange); }
.toggle { width: 38px; height: 20px; padding: 0; border-radius: 10px; position: relative; letter-spacing: 0; }
.toggle::after { content: ''; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform 0.15s, background 0.15s; }
.toggle.on { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 20%, transparent); }
.toggle.on::after { transform: translateX(18px); background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.net .netrow { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px; align-items: end; }
.net label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; min-width: 0; }
.net input[type="text"] { font: inherit; font-size: 14px; color: var(--text); background: rgba(8, 9, 18, 0.8); border: 1.2px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 8px 10px; min-width: 0; pointer-events: auto; user-select: text; -webkit-user-select: text; }
.net input[type="text"]:focus { outline: none; border-color: var(--cyan); }
.net button { padding: 9px 16px; font-size: 13px; }
.netstate { margin-left: 8px; letter-spacing: 0.06em; color: var(--muted); }
.netstate.ok { color: var(--green); }
.netstate.bad { color: var(--red); }
.netpeers { display: flex; flex-wrap: wrap; gap: 6px; }
.netpeers:empty { display: none; }
.netpeers span { --c: var(--cyan); font-size: 12.5px; padding: 4px 10px; border-radius: 9px; border: 1.2px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--text); }
.netpeers span b { color: var(--gold); font-weight: 600; margin-left: 4px; }
.hint code { color: var(--cyan); }

@media (max-width: 720px) {
  .net .netrow { grid-template-columns: 1fr 1fr; }
  .cols { grid-template-columns: 1fr; }
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .slot { width: 52px; height: 52px; }
  #vitals { width: 220px; }
  #weapon { min-width: 160px; }
  #weapon .a { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- редактор карт ---------- */
button.mini, .filebtn { font-size: 11.5px; letter-spacing: 0.12em; padding: 7px 12px; border-radius: 8px; }
.lbl button.mini { margin-left: 10px; vertical-align: middle; }
button.mini.hot { border-color: color-mix(in srgb, var(--orange) 70%, transparent); background: rgba(255, 143, 46, 0.18); }
button.mini.dirty::after { content: ' •'; color: var(--orange); }
button.mini.danger.armed { border-color: var(--red); color: var(--red); box-shadow: 0 0 14px rgba(255, 71, 87, 0.35); }
.filebtn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; cursor: pointer; pointer-events: auto;
  text-transform: uppercase; color: var(--text); background: var(--glass); border: 1.2px solid rgba(255, 255, 255, 0.16);
}
.filebtn:hover { border-color: var(--cyan); }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

#editor { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 5; }
body[data-mode="editor"] #editor { display: block; }
#editor .panel { pointer-events: auto; }
.edtop { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; }
.edtop input[type="text"] { font: inherit; font-size: 15px; color: var(--text); background: rgba(8, 9, 18, 0.8); border: 1.2px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 6px 10px; width: 200px; user-select: text; }
.edtop label { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.edgap { flex: 1; }
.edtools { position: absolute; top: 76px; left: 10px; width: 152px; padding: 8px; display: flex; flex-direction: column; gap: 4px; max-height: calc(100% - 136px); overflow-y: auto; }
.edtool { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.05em; text-transform: none; padding: 6px 9px; border-radius: 7px; border-left: 3px solid var(--c, rgba(255, 255, 255, 0.16)); }
.edtool i { font-style: normal; color: var(--muted); font-size: 11px; }
.edtool.sel { border-color: var(--cyan); background: rgba(76, 199, 255, 0.16); }
.edprops { position: absolute; top: 76px; right: 10px; width: 232px; padding: 12px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100% - 136px); overflow-y: auto; }
.edprops label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.edprops input[type="number"] { width: 86px; font: inherit; font-size: 13px; color: var(--text); background: rgba(8, 9, 18, 0.8); border: 1.2px solid rgba(255, 255, 255, 0.14); border-radius: 7px; padding: 4px 6px; user-select: text; }
.edxyz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.edxyz label { flex-direction: column; align-items: stretch; gap: 2px; font-size: 11px; }
.edxyz input[type="number"] { width: 100%; }
.edbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.edinfo p { margin: 6px 0; font-size: 13px; }
.edinfo ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.edhelp { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(1000px, calc(100% - 20px)); text-align: center; font-size: 11.5px; line-height: 1.6; color: var(--muted); background: rgba(5, 6, 14, 0.6); border-radius: 10px; padding: 6px 12px; }
.edlabels span { position: absolute; left: 0; top: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 6px #000, 0 0 2px #000; }
.edio { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100% - 32px)); padding: 16px; display: none; flex-direction: column; gap: 10px; }
.edio.on { display: flex; }
.edio textarea { height: 180px; resize: vertical; font: 12px/1.4 ui-monospace, Consolas, monospace; color: var(--text); background: rgba(8, 9, 18, 0.85); border: 1.2px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 8px; user-select: text; -webkit-user-select: text; }
.edtoast { position: absolute; left: 50%; top: 76px; transform: translateX(-50%); padding: 8px 16px; border-radius: 10px; background: rgba(10, 12, 24, 0.88); border: 1px solid rgba(76, 199, 255, 0.4); font-size: 13px; opacity: 0; pointer-events: none; }
.edtoast.on { animation: edtoast 2.8s ease forwards; }
@keyframes edtoast { 0% { opacity: 0; transform: translate(-50%, -6px); } 8%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@media (max-width: 760px) {
  .edtools { width: 118px; }
  .edprops { width: 188px; }
  .edhelp { display: none; }
}

/* ---------- инвентарь ---------- */
.screen.inv { gap: 16px; width: min(1180px, 100%); }
.screen.pick { gap: 14px; }
.screen.pick > .hint { margin: -6px 0 0; align-self: flex-start; }
.pickgrid { width: 100%; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pickgrid .shopitem { padding: 14px 14px; }
.pickgrid .shopitem em { color: var(--muted); font-size: 13px; }
.invbox { width: 100%; display: flex; gap: 18px; justify-content: center; align-items: flex-start; }
.invmain { display: flex; flex-direction: column; gap: 10px; width: min(560px, 100%); }
.invmain .hint { max-width: 46ch; }
.invrow { display: grid; grid-template-columns: repeat(6, 66px); gap: 10px; }
.invslot { cursor: grab; touch-action: none; }
.invslot.cur { border-color: color-mix(in srgb, var(--c) 90%, white); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 40%, transparent); }
.invslot.empty { cursor: default; opacity: 0.4; }
.invslot:not(.empty):hover { transform: translateY(-3px); border-color: var(--cyan); }
.invslot.lifted { opacity: 0.25; }
.invghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: 0.92; box-shadow: 0 0 24px rgba(76, 199, 255, 0.45); }
.invbottom { display: flex; gap: 12px; align-items: stretch; margin-top: 4px; }
.invdrop { flex: none; width: 200px; display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border: 1.5px dashed rgba(255, 71, 87, 0.45); border-radius: 12px; min-height: 72px; transition: background 0.15s, color 0.15s; }
.invdrop.hot { background: rgba(255, 71, 87, 0.18); color: var(--red); border-color: var(--red); }
.invinfo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.invinfo b { font-size: 15px; font-weight: 700; color: var(--text); }
.invcat { display: none; width: 420px; max-height: min(64vh, 560px); overflow-y: auto; padding: 12px 14px; flex-direction: column; gap: 6px; }
.invbox.wide .invcat { display: flex; }
.invcathead { --accent: var(--green); margin-top: 6px; }
.invcatrow { display: grid; grid-template-columns: repeat(auto-fill, 52px); gap: 8px; }
.catslot { width: 52px; height: 52px; border-radius: 11px; }
.catslot .ic { inset: 8px; }
@media (max-width: 1000px) {
  .invbox { flex-direction: column; align-items: center; }
  .invcat { width: min(560px, 100%); }
}
@media (max-width: 560px) {
  .invrow { grid-template-columns: repeat(6, 48px); gap: 6px; }
  .invrow .slot { width: 48px; height: 48px; }
}

/* аккаунт, добыча матча, мастерская, рынок */
.account { --accent: var(--cyan); }
.accrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.accrow input, .accrow select { font: inherit; font-size: 14px; color: var(--text); background: rgba(8, 9, 18, 0.8); border: 1.2px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 8px 10px; min-width: 0; pointer-events: auto; user-select: text; -webkit-user-select: text; }
.accrow input:focus { outline: none; border-color: var(--cyan); }
.accrow input[type="text"], .accrow input[type="password"] { flex: 1 1 140px; }
.accrow input[type="number"] { width: 96px; }
.accrow label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.accrow button { padding: 9px 16px; font-size: 13px; }
.accrow .coins, .shopmoney.coins { color: var(--gold); font-size: 18px; text-shadow: 0 0 8px rgba(255, 200, 60, 0.45); }
.acchint { flex: 1; font-size: 13px; color: var(--muted); }
.netstate.on { color: var(--cyan); }
#accMsg.bad, #mkMsg.bad { color: var(--red); }

.loot { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.loot .caps { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.capcard { --c: var(--purple); --ic: #fff; position: relative; width: 132px; height: 150px; perspective: 600px; }
.capcard > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; text-align: center; border-radius: 12px; backface-visibility: hidden; transition: transform 0.55s cubic-bezier(.3, 1.4, .5, 1); border: 1.4px solid var(--c); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 28%, transparent), rgba(8, 9, 18, 0.85) 70%); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent); }
.capcard .back { font-size: 42px; font-weight: 800; color: var(--c); text-shadow: 0 0 14px var(--c); }
.capcard .back small, .capcard .face small { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--muted); text-shadow: none; }
.capcard .face { transform: rotateY(180deg); }
.capcard .face svg { width: 40px; height: 40px; fill: none; stroke: var(--ic); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--ic)); }
.capcard .face b { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.capcard.open .back { transform: rotateY(-180deg); }
.capcard.open .face { transform: rotateY(0); }
.lootcoins { color: var(--gold); text-align: center; max-width: none; }

.wsgrid { width: 100%; }
.wscard, .mkrow { --c: var(--purple); --ic: #fff; position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(8, 9, 18, 0.6); border: 1.2px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius: 12px; }
.wscard svg, .mkrow svg { flex: none; width: 32px; height: 32px; fill: none; stroke: var(--ic); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--ic)); }
.wscard span, .mkrow span { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; color: var(--muted); }
.wscard span b, .mkrow span b { font-size: 13.5px; color: var(--text); font-weight: 600; }
.wscard .bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.wscard .bar i { display: block; height: 100%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.wscard.done { border-color: color-mix(in srgb, var(--green) 55%, transparent); }
.wscard.done small { color: var(--green); }
.wscard button, .mkrow button { padding: 8px 14px; font-size: 12.5px; }
.mkbar { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mklist { width: 100%; display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; pointer-events: auto; }
.mkrow em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.mksell { --accent: var(--gold); }