/* ==========================================================================
   NEON STREET 6.0 — Полная визуальная система (Anime / Dark Fantasy / Neon Tokyo)
   Цветовая система: Графитовый (#0b0a16), Тёмно-фиолетовый (#1a1033),
   Розовый неон (#ec4899), Холодный голубой (#38bdf8), Золотой (#fbbf24).
   ========================================================================== */

:root {
  --bg-graphite: #0b0a16;
  --bg-violet-deep: #170f2e;
  --panel-glass: rgba(18, 14, 36, 0.82);
  --panel-glass-strong: rgba(14, 11, 29, 0.92);
  --border-neon: rgba(192, 132, 252, 0.42);
  --border-pink: rgba(236, 72, 153, 0.58);
  --neon-pink: #ec4899;
  --neon-violet: #a855f7;
  --neon-cyan: #38bdf8;
  --neon-gold: #fbbf24;
  --text-main: #f8fafc;
  --text-muted: #b4bcd0;
  --chat-height: clamp(275px, 43dvh, 445px);
  --dock-height: 68px;
  --road-level: 36px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: radial-gradient(circle at 50% 0%, #2a144a 0%, #0d0b1a 60%, #07060e 100%);
  color: var(--text-main);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  user-select: none;
}

/* --- Главный каркас экрана (2.1 ТЗ) --- */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding: 6px 10px calc(var(--dock-height) + 12px);
  gap: 8px;
  position: relative;
}

.app-shell.world-expanded .chat-dock {
  display: none !important;
}

/* --- Верхняя панель (Topbar) --- */
.topbar {
  position: relative !important;
  inset: auto !important;
  height: 54px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px;
  background: linear-gradient(90deg, rgba(22, 15, 44, 0.92), rgba(35, 19, 64, 0.85), rgba(18, 14, 36, 0.92));
  border: 1px solid var(--border-neon);
  border-radius: 16px;
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 30px rgba(5, 4, 15, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 40;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.brand-symbol {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.65);
}

.brand-text strong {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  letter-spacing: 0.6px;
  background: linear-gradient(90deg, #fff, #f9a8d4, #c084fc);
  -webkit-background-clip: text;
  color: transparent;
}

.brand-text small {
  display: block;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #c4b5fd;
  font-weight: 700;
}

.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.35);
  font-size: 12px;
  color: #e2e8f0;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}

.topbar-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 6px;
  border-radius: 999px;
  background: rgba(29, 20, 56, 0.82);
  border: 1px solid rgba(236, 72, 153, 0.45);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.topbar-player:hover {
  transform: translateY(-1px);
  border-color: #f472b6;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.35);
}

.topbar-avatar-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #f472b6;
  background: radial-gradient(circle at 50% 30%, #4c1d95, #0f172a);
  flex-shrink: 0;
}

.topbar-avatar-wrap img {
  width: 100%;
  height: 190%;
  object-fit: cover;
  object-position: center top;
}

.topbar-player-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 155px;
}

.topbar-player-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.lvl-badge {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
  font-weight: 700;
  font-size: 10px;
}

.vip-badge, .vip-pill {
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  color: #1e1b4b;
  font-weight: 800;
  font-size: 10px;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.45);
}

.topbar-xp-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.topbar-xp-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #c084fc, #ec4899);
}

.topbar-rating-row {
  font-size: 10px;
  color: #cbd5e1;
}

.topbar-rating-row b {
  color: #fde047;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.currency-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: rgba(15, 13, 30, 0.85);
  border: 1px solid rgba(168, 85, 247, 0.4);
  font-size: 12px;
}

.currency-pill.crystals b {
  color: #7dd3fc;
}

.currency-pill.coins b {
  color: #fde047;
}

.curr-plus {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.top-icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(192, 132, 252, 0.35);
  background: rgba(25, 18, 48, 0.8);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
  transition: all 0.16s ease;
}

.top-icon-btn:hover {
  border-color: #ec4899;
  background: rgba(168, 85, 247, 0.28);
  transform: translateY(-1px);
}

.badge-count, .dock-badge, .inline-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
}

.inline-badge {
  position: static;
  margin-left: 5px;
}

/* --- Общий чат (верхняя область ~45% высоты экрана) --- */
.chat-dock {
  position: relative !important;
  inset: auto !important;
  height: var(--chat-height);
  min-height: 240px;
  max-height: 46dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(20, 14, 40, 0.90), rgba(14, 11, 29, 0.93));
  border: 1px solid var(--border-neon);
  border-radius: 18px;
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 40px rgba(4, 3, 12, 0.72), 0 0 30px rgba(168, 85, 247, 0.14);
  overflow: hidden;
  z-index: 30;
}

.chat-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  background: linear-gradient(90deg, rgba(88, 28, 135, 0.38), rgba(15, 23, 42, 0.5));
  border-bottom: 1px solid rgba(192, 132, 252, 0.24);
  flex-wrap: wrap;
}

.chat-channels {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.channel-tab {
  padding: 5px 11px;
  border-radius: 10px;
  border: 1px solid rgba(192, 132, 252, 0.22);
  background: rgba(19, 15, 38, 0.65);
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s ease;
}

.channel-tab:hover {
  border-color: rgba(236, 72, 153, 0.5);
  color: #fff;
}

.channel-tab.selected {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.45), rgba(236, 72, 153, 0.42));
  border-color: #f472b6;
  color: #fff;
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.35);
}

.chat-switches {
  display: flex;
  gap: 6px;
  padding: 0 !important;
  border: none !important;
}

.chat-switch {
  padding: 5px 11px !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
}

.chat-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 235px;
  overflow: hidden;
}

.chat-stage.dm-mode {
  grid-template-columns: 230px 1fr 220px;
}

.chat-messages {
  padding: 8px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 9px;
  border-radius: 12px;
  background: rgba(25, 20, 48, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.12);
  transition: background 0.15s ease;
}

.chat-message:hover {
  background: rgba(42, 31, 77, 0.72);
}

.chat-message.penalized-msg {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(69, 10, 10, 0.45);
}

.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(192, 132, 252, 0.6);
  background: #1e1b4b;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.msg-avatar img {
  width: 100%;
  height: 190%;
  object-fit: cover;
  object-position: center top;
}

.msg-body {
  flex: 1;
  min-width: 0;
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 11.5px;
}

.msg-nick-btn {
  background: none;
  border: none;
  padding: 0;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  color: #f8fafc;
}

.msg-nick-btn:hover {
  text-decoration: underline;
}

.msg-rating-pill {
  font-size: 10.5px;
  color: #c4b5fd;
  font-weight: 600;
}

.msg-rating-pill.negative {
  color: #f87171;
}

.msg-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
  opacity: 0.65;
}

.chat-message:hover .msg-actions {
  opacity: 1;
}

.msg-mini-btn {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(192, 132, 252, 0.25);
  color: #cbd5e1;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 10px;
  cursor: pointer;
}

.msg-mini-btn:hover {
  color: #fff;
  border-color: #ec4899;
}

.msg-body p {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: #f1f5f9;
  word-break: break-word;
}

.chat-online-sidebar {
  border-left: 1px solid rgba(192, 132, 252, 0.22);
  background: rgba(12, 9, 26, 0.68);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.online-sidebar-head {
  padding: 7px 9px;
  border-bottom: 1px solid rgba(192, 132, 252, 0.16);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: #cbd5e1;
}

.online-sidebar-head input {
  width: 100%;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(192, 132, 252, 0.28);
  background: rgba(20, 16, 40, 0.85);
  color: #fff;
  font-size: 11px;
}

.online-player-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.online-player-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 10px;
  background: rgba(26, 20, 50, 0.55);
  border: 1px solid transparent;
  cursor: pointer;
  color: #fff;
  text-align: left;
}

.online-player-item:hover {
  border-color: rgba(236, 72, 153, 0.45);
  background: rgba(52, 34, 92, 0.65);
}

.online-player-item img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid #c084fc;
}

.online-player-meta {
  flex: 1;
  min-width: 0;
}

.online-player-meta strong {
  display: block;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.online-player-meta small {
  display: block;
  font-size: 10px;
  color: #a5b4fc;
}

.chat-compose {
  padding: 6px 10px;
  background: rgba(12, 9, 25, 0.88);
  border-top: 1px solid rgba(192, 132, 252, 0.22);
}

.chat-compose form {
  display: flex;
  align-items: center;
  gap: 7px;
}

.compose-quick-emotes {
  display: flex;
  gap: 4px;
}

.quick-emoji-btn {
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(192, 132, 252, 0.28);
  background: rgba(30, 22, 58, 0.8);
  color: #f8fafc;
  font-size: 11.5px;
  cursor: pointer;
}

.quick-emoji-btn:hover {
  border-color: #ec4899;
  background: rgba(168, 85, 247, 0.3);
}

.chat-compose input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(192, 132, 252, 0.34);
  background: rgba(18, 14, 36, 0.92);
  color: #fff;
  font-size: 12.5px;
}

.send-btn {
  padding: 8px 16px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.45);
}

/* --- Игровой мир (Основная сцена под чатом) --- */
.game-main {
  position: relative !important;
  inset: auto !important;
  flex: 1;
  min-height: 290px;
  height: auto !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

.scene {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 290px;
  border-radius: 20px;
  border: 1px solid rgba(236, 72, 153, 0.45);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(4, 3, 14, 0.85), inset 0 0 60px rgba(168, 85, 247, 0.18);
  background: #100b20;
}

.scene[data-location="street"] .back-layer {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(14, 9, 32, 0.18) 0%, rgba(18, 10, 38, 0.12) 65%, rgba(10, 7, 24, 0.62) 100%), url('/backgrounds/neon-street.webp');
  background-size: cover;
  background-position: center 62%;
  transform: translate3d(var(--parallax-back, 0px), 0, 0) scale(1.06);
  transition: background-image 0.4s ease;
}

.scene[data-location="prison"] .back-layer {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(8, 15, 36, 0.35) 0%, rgba(12, 10, 28, 0.65) 100%), url('/backgrounds/prison-cell.webp');
  background-size: cover;
  background-position: center center;
}

.front-layer {
  position: absolute;
  inset: auto 0 0 0;
  height: 76px;
  background: linear-gradient(180deg, rgba(16, 12, 34, 0) 0%, rgba(22, 15, 46, 0.72) 45%, rgba(13, 10, 28, 0.94) 100%);
  border-top: 1px solid rgba(236, 72, 153, 0.28);
  pointer-events: none;
  z-index: 2;
}

.vfx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

.building-layer {
  z-index: 3;
  opacity: 0.42;
  pointer-events: auto;
}

.character-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

/* --- Левый HUD-виджет в сцене (по макетам 1000015270 и 1000015222) --- */
.hud-left-overlay {
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 245px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 16;
  pointer-events: none;
}

.hud-hero-card, .hud-stats-box, .hud-event-card {
  pointer-events: auto;
  background: rgba(18, 13, 38, 0.82);
  border: 1px solid rgba(192, 132, 252, 0.42);
  border-radius: 14px;
  padding: 8px 10px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(5, 4, 15, 0.65);
}

.hud-hero-card {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.hud-hero-portrait {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ec4899;
  background: radial-gradient(circle at 50% 25%, #7e22ce, #0f172a);
  flex-shrink: 0;
}

.hud-hero-portrait img {
  width: 100%;
  height: 195%;
  object-fit: cover;
  object-position: center top;
}

.hud-hero-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.hud-hero-sub {
  font-size: 10.5px;
  color: #cbd5e1;
  margin-top: 2px;
}

.hud-hero-rating {
  font-size: 11px;
  color: #f9a8d4;
  margin-top: 2px;
}

.hud-stats-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}

.hud-stat-row {
  display: flex;
  justify-content: space-between;
  color: #cbd5e1;
}

.hud-stat-row b {
  color: #fff;
}

.hud-event-card {
  margin-top: auto;
  background: linear-gradient(135deg, rgba(68, 16, 74, 0.88), rgba(22, 14, 44, 0.92));
  border-color: rgba(236, 72, 153, 0.55);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #f472b6;
}

.hud-event-card strong {
  font-size: 13.5px;
  color: #fff;
}

.hud-event-card small {
  font-size: 10.5px;
  color: #fde047;
}

.hud-event-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

.hud-action-btn {
  padding: 6px 9px;
  border-radius: 9px;
  border: 1px solid rgba(192, 132, 252, 0.45);
  background: rgba(30, 20, 60, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hud-action-btn.accent {
  background: linear-gradient(90deg, #9333ea, #ec4899);
  border-color: #f472b6;
}

.hud-action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.45);
}

.hud-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Правые кнопки в сцене */
.scene-top-right {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 16;
}

.scene-pill-btn {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(192, 132, 252, 0.4);
  background: rgba(18, 13, 38, 0.82);
  backdrop-filter: blur(12px);
  color: #f8fafc;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.16s ease;
}

.scene-pill-btn:hover, .scene-pill-btn.active {
  border-color: #ec4899;
  background: rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.4);
}

.scene-pill-btn.danger:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.28);
}

/* --- ПОСЛОЙНАЯ 2D-АНИМАЦИЯ ПЕРСОНАЖЕЙ (Раздел 3.4 ТЗ) ---
   Состояния: Idle, Walk, Run, Turn, Emote, Arrest, Prison
   Ноги визуально контактируют с поверхностью + динамическая тень под стопами!
   -------------------------------------------------------------------------- */
.character {
  position: absolute;
  width: 168px;
  height: 272px;
  bottom: 18px !important;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  z-index: 10;
  transition: filter 0.2s ease;
}

.character.self {
  z-index: 14;
}

.character:hover {
  filter: brightness(1.08);
}

/* Плашка над головой персонажа (как на макетах 1000015270 и 1000015223) */
.character .overhead-tag {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(13, 10, 28, 0.86);
  border: 1px solid color-mix(in srgb, var(--aura, #c084fc) 70%, transparent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), 0 0 12px color-mix(in srgb, var(--aura, #c084fc) 35%, transparent);
  white-space: nowrap;
  text-align: center;
  z-index: 12;
  pointer-events: none;
}

.overhead-crown {
  display: block;
  font-size: 12px;
  line-height: 1;
  margin-bottom: 1px;
  filter: drop-shadow(0 0 6px var(--aura, #fbbf24));
}

.overhead-nick {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
}

.overhead-rating {
  display: block;
  font-size: 9.5px;
  color: var(--aura, #cbd5e1);
  font-weight: 700;
}

/* Динамическая контактная тень под ногами персонажа (Раздел 3.4 ТЗ) */
.character .shadow {
  position: absolute;
  left: 34px;
  width: 100px;
  bottom: 8px;
  height: 16px;
  background: radial-gradient(ellipse at center, rgba(4, 3, 12, 0.88) 0%, rgba(12, 8, 28, 0.55) 50%, transparent 75%);
  filter: blur(2px);
  z-index: 1;
  transform-origin: center center;
}

.character .foot-shadow-left,
.character .foot-shadow-right {
  position: absolute;
  bottom: 10px;
  width: 34px;
  height: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.78);
  filter: blur(1.5px);
  z-index: 2;
  pointer-events: none;
}

.character .foot-shadow-left {
  left: 48px;
}

.character .foot-shadow-right {
  right: 48px;
}

.character .sprite-wrap {
  position: absolute;
  left: 4px;
  bottom: 12px;
  width: 160px;
  height: 254px;
  z-index: 5;
  transform-origin: bottom center;
}

.character .sprite-facing {
  width: 100%;
  height: 100%;
  transform: scaleX(var(--facing, 1));
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center bottom;
}

/* Поворот в сторону движения (Turn state) */
.character.state-turn .sprite-facing {
  filter: drop-shadow(0 0 12px var(--aura, #ec4899));
}

/* Многослойный 2D-риг с мягкими перекрывающимися масками суставов */
.anime-art {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  isolation: isolate;
}

.art-part {
  position: absolute;
  inset: 0;
  display: block;
  background-image: var(--art);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  will-change: transform;
}

/* Задний слой волос/плаща для вторичного колыхания */
.art-back-hair {
  clip-path: polygon(0 8%, 100% 8%, 100% 68%, 0 68%);
  z-index: 1;
  transform-origin: 50% 18%;
  opacity: 0.92;
}

/* Верхняя часть тела (голова, корпус, руки) с мягким переходом на бедрах */
.art-torso {
  clip-path: polygon(0 0, 100% 0, 100% 67%, 0 67%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,0.85) 64%, transparent 67%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,0.85) 64%, transparent 67%);
  z-index: 4;
  transform-origin: 50% 56%;
}

/* Левая и правая ноги с мягким перекрытием от таза до стоп */
.art-left-leg {
  clip-path: polygon(0 54%, 51% 54%, 51% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 54%, rgba(0,0,0,0.75) 59%, #000 64%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 54%, rgba(0,0,0,0.75) 59%, #000 64%, #000 100%);
  z-index: 3;
  transform-origin: 45% 58%;
}

.art-right-leg {
  clip-path: polygon(49% 54%, 100% 54%, 100% 100%, 49% 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 54%, rgba(0,0,0,0.75) 59%, #000 64%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 54%, rgba(0,0,0,0.75) 59%, #000 64%, #000 100%);
  z-index: 2;
  transform-origin: 55% 58%;
}

/* Моргание и мимика (Idle blink layer) */
.art-blink-glow {
  position: absolute;
  top: 12%;
  left: 42%;
  width: 16%;
  height: 4%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.35), transparent 70%);
  z-index: 5;
  pointer-events: none;
  animation: eyeBlinkPulse 4.5s infinite;
}

/* 1) Состояние IDLE: дыхание, моргание, лёгкое движение волос */
.character.state-idle .sprite-wrap {
  animation: idleBreath 3.4s ease-in-out infinite;
}
.character.state-idle .art-torso {
  animation: idleTorsoSway 3.4s ease-in-out infinite;
}
.character.state-idle .art-back-hair {
  animation: idleHairBreeze 4.2s ease-in-out infinite;
}

/* 2) Состояние WALK: поочерёдная постановка ног, движения корпуса, контакт с землёй */
.character.state-walk .sprite-wrap,
.character.is-moving:not(.state-run) .sprite-wrap {
  animation: walkCadence 0.58s linear infinite;
}
.character.state-walk .art-left-leg,
.character.is-moving:not(.state-run) .art-left-leg {
  animation: walkLegLeft 0.58s ease-in-out infinite;
}
.character.state-walk .art-right-leg,
.character.is-moving:not(.state-run) .art-right-leg {
  animation: walkLegRight 0.58s ease-in-out infinite;
}
.character.state-walk .art-torso,
.character.is-moving:not(.state-run) .art-torso {
  animation: walkTorsoSwing 0.58s ease-in-out infinite;
}
.character.state-walk .foot-shadow-left,
.character.is-moving:not(.state-run) .foot-shadow-left {
  animation: footContactLeft 0.58s ease-in-out infinite;
}
.character.state-walk .foot-shadow-right,
.character.is-moving:not(.state-run) .foot-shadow-right {
  animation: footContactRight 0.58s ease-in-out infinite;
}

/* 3) Состояние RUN: ускоренный цикл бега с наклоном и широким шагом */
.character.state-run .sprite-wrap {
  animation: runCadence 0.36s linear infinite;
}
.character.state-run .art-left-leg {
  animation: runLegLeft 0.36s ease-in-out infinite;
}
.character.state-run .art-right-leg {
  animation: runLegRight 0.36s ease-in-out infinite;
}
.character.state-run .art-torso {
  animation: runTorsoLean 0.36s ease-in-out infinite;
}
.character.state-run .art-back-hair {
  animation: runCapeFlow 0.36s ease-in-out infinite;
}

/* 5) Состояние EMOTE: эмоции, жесты, реакции */
.character.state-emote .sprite-wrap {
  animation: emoteJoyJump 0.72s ease-in-out infinite;
}
.character.state-emote .art-torso {
  animation: emoteWaveTorso 0.72s ease-in-out infinite;
}

/* 6) Состояние ARREST: применение способности «Заключение» */
.character.state-arrest .sprite-wrap {
  animation: arrestCastPulse 0.5s ease-in-out infinite alternate;
}
.character.state-arrest::after {
  content: '⛓ ЗАКЛЮЧЕНИЕ ⛓';
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(147, 51, 234, 0.92);
  border: 1px solid #fde047;
  color: #fde047;
  font-size: 10px;
  font-weight: 900;
  z-index: 20;
  box-shadow: 0 0 24px #a855f7;
}

/* 7) Состояние PRISON: отдельная анимация заключённого в камере */
.character.state-prison .sprite-wrap {
  animation: prisonShackledIdle 2.6s ease-in-out infinite;
  filter: saturate(0.82) contrast(1.06);
}
.character.state-prison .prison-chains-fx {
  position: absolute;
  inset: 22% 14% 18%;
  border: 2px dashed rgba(148, 163, 184, 0.65);
  border-radius: 16px;
  z-index: 9;
  pointer-events: none;
}

/* Специальная походка и эффекты для формы 💩 (Рейтинг <= -5000, Раздел 4.3 ТЗ) */
.character.poop-form .sprite-wrap {
  animation: poopWobbleIdle 1.8s ease-in-out infinite;
}
.character.poop-form.is-moving .sprite-wrap {
  animation: poopSquishWalk 0.48s ease-in-out infinite;
}
.stink-cloud {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 204, 22, 0.62) 0%, rgba(77, 124, 15, 0.25) 55%, transparent 75%);
  filter: blur(4px);
  z-index: 7;
  pointer-events: none;
  animation: stinkRise 2.4s ease-out infinite;
}
.stink-cloud.s1 { left: 18%; bottom: 45%; animation-delay: 0s; }
.stink-cloud.s2 { right: 16%; bottom: 55%; animation-delay: -0.8s; }
.stink-cloud.s3 { left: 40%; bottom: 68%; animation-delay: -1.6s; }

.buzzing-fly {
  position: absolute;
  font-size: 12px;
  z-index: 11;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px #000);
  animation: flyOrbit 1.9s linear infinite;
}
.buzzing-fly.f1 { top: 18%; left: 22%; animation-duration: 1.7s; }
.buzzing-fly.f2 { top: 28%; right: 18%; animation-duration: 2.1s; animation-direction: reverse; }
.buzzing-fly.f3 { top: 12%; right: 32%; animation-duration: 1.5s; }

/* --- СИСТЕМА АУР И ЧАСТИЦ ПО РАНГАМ (Раздел 4.2, 4.3 и 5 ТЗ) --- */
/* Положительные ранги: glow-1 (Пробуждённый), glow-2 (Элитный), glow-3 (Мифический), glow-4 (Легендарный) */
.character .aura {
  position: absolute;
  inset: 6px 8px 20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.character.glow-1 .aura,
.character.glow-2 .aura,
.character.glow-3 .aura,
.character.glow-4 .aura {
  opacity: 1;
}

.character.glow-1 .aura {
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.42) 0%, rgba(56, 189, 248, 0.14) 55%, transparent 75%);
  filter: blur(14px);
  animation: auraBreath 2.8s ease-in-out infinite alternate;
}

.character.glow-2 .aura {
  background: radial-gradient(ellipse at center, rgba(192, 132, 252, 0.58) 0%, rgba(168, 85, 247, 0.25) 58%, transparent 78%);
  filter: blur(16px);
  animation: auraBreath 2.2s ease-in-out infinite alternate;
}

.character.glow-3 .aura {
  background: radial-gradient(ellipse at center, rgba(244, 114, 182, 0.68) 0%, rgba(192, 132, 252, 0.35) 55%, transparent 80%);
  filter: blur(16px);
  animation: auraBreath 1.8s ease-in-out infinite alternate;
}

.character.glow-4 .aura {
  background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.82) 0%, rgba(245, 158, 11, 0.45) 48%, rgba(236, 72, 153, 0.22) 68%, transparent 82%);
  filter: blur(15px);
  animation: auraBreath 1.4s ease-in-out infinite alternate;
}

/* Отрицательные ранги: neg-1 (слабая дымка), neg-2 (фиолетово-чёрный дым), neg-3 (тёмная аура + грязь) */
.character.neg-1 .aura {
  opacity: 0.75;
  background: radial-gradient(ellipse at center, rgba(30, 41, 59, 0.75) 0%, rgba(71, 85, 105, 0.35) 55%, transparent 76%);
  filter: blur(14px);
}

.character.neg-2 .aura {
  opacity: 0.92;
  background: radial-gradient(ellipse at center, rgba(15, 7, 28, 0.92) 0%, rgba(126, 34, 206, 0.55) 55%, transparent 78%);
  filter: blur(15px);
  animation: darkSmokePulse 2.4s ease-in-out infinite alternate;
}

.character.neg-3 .aura,
.character.poop-form .aura {
  opacity: 0.95;
  background: radial-gradient(ellipse at center, rgba(26, 46, 5, 0.9) 0%, rgba(101, 163, 13, 0.52) 52%, rgba(63, 63, 70, 0.3) 72%, transparent 82%);
  filter: blur(15px);
  animation: darkSmokePulse 1.9s ease-in-out infinite alternate;
}

/* Энергетическое кольцо под ногами и за спиной для высоких рангов */
.character .ground-sigil {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--aura, #38bdf8);
  box-shadow: 0 0 16px var(--aura, #38bdf8), inset 0 0 12px var(--aura, #38bdf8);
  z-index: 2;
  pointer-events: none;
  animation: sigilPulse 2.2s ease-in-out infinite alternate;
}

/* Визуальное отображение экипировки (костюм, крылья, причёска, питомец, транспорт) */
.tint-indigo .art-part { filter: hue-rotate(18deg) saturate(1.15); }
.tint-crimson .art-part { filter: saturate(1.28) contrast(1.05); }
.tint-sakura .art-part { filter: hue-rotate(-16deg) saturate(1.25) brightness(1.04); }
.tint-gold .art-part { filter: sepia(0.22) saturate(1.35) brightness(1.06); }
.tint-blood .art-part { filter: hue-rotate(-25deg) saturate(1.4) contrast(1.08); }
.tint-celestial .art-part { filter: drop-shadow(0 0 8px #fbbf24) saturate(1.22); }

.character-wings {
  position: absolute;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 56px;
  z-index: 3;
  opacity: 0.9;
  filter: drop-shadow(0 0 16px var(--aura, #f472b6));
  pointer-events: none;
  animation: wingsFlap 2.4s ease-in-out infinite alternate;
}

.character-transport {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 28px;
  z-index: 8;
  filter: drop-shadow(0 0 12px #38bdf8);
  pointer-events: none;
}

.character-emote-bubble {
  position: absolute;
  top: -68px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.65);
  z-index: 20;
  animation: popBubble 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Таймер заключённого прямо над персонажем в тюрьме (Раздел 6.4 ТЗ) */
.character .prisoner-overhead-timer {
  position: absolute;
  top: -62px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #38bdf8;
  color: #7dd3fc;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  z-index: 18;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
}

/* --- Локация «Тюрьма» (Раздел 6.4 ТЗ) --- */
.prison-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 16px;
}

.prison-cold-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 15%, rgba(56, 189, 248, 0.18), rgba(88, 28, 135, 0.28) 55%, rgba(6, 8, 20, 0.62) 100%);
}

.prison-bars {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 68px,
    rgba(15, 23, 42, 0.88) 68px 75px,
    rgba(148, 163, 184, 0.35) 75px 77px,
    rgba(15, 23, 42, 0.92) 77px 82px
  );
  opacity: 0.72;
}

.prison-hud-banner {
  position: relative;
  z-index: 3;
  max-width: 520px;
  padding: 12px 20px;
  border-radius: 16px;
  background: rgba(12, 16, 36, 0.88);
  border: 1px solid rgba(56, 189, 248, 0.55);
  backdrop-filter: blur(14px);
  text-align: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.25);
}

.prison-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #38bdf8;
}

.prison-hud-banner h2 {
  margin: 4px 0;
  font-size: 18px;
}

.prison-hud-banner p {
  margin: 0 0 8px;
  font-size: 11.5px;
  color: #cbd5e1;
}

.prison-timer-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid #38bdf8;
  font-size: 12px;
}

.prison-timer {
  font-family: 'Outfit', monospace;
  font-size: 17px;
  color: #38bdf8;
}

/* --- Нижняя панель навигации (Раздел 2.2 ТЗ) --- */
.bottom-dock {
  position: fixed !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 8px !important;
  height: var(--dock-height);
  display: flex !important;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(24, 16, 48, 0.92), rgba(13, 10, 28, 0.96));
  border: 1px solid rgba(192, 132, 252, 0.48);
  border-radius: 18px;
  backdrop-filter: blur(20px);
  box-shadow: 0 -10px 40px rgba(4, 3, 14, 0.85), 0 0 28px rgba(168, 85, 247, 0.22);
  z-index: 45;
}

.dock-btn {
  position: relative;
  flex: 1;
  max-width: 112px;
  height: 54px;
  border-radius: 13px;
  border: 1px solid transparent;
  background: transparent;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.dock-btn .dock-icon {
  font-size: 19px;
  line-height: 1;
}

.dock-btn small {
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.dock-btn:hover {
  background: rgba(168, 85, 247, 0.2);
  color: #fff;
  border-color: rgba(192, 132, 252, 0.35);
}

.dock-btn.active {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.38), rgba(236, 72, 153, 0.32));
  border-color: #f472b6;
  color: #fff;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.mobile-more-btn {
  display: none !important;
}

/* --- Модальные окна разделов (Персонаж, Магазин, Админка, ЛС и др.) --- */
.action-panel {
  position: fixed !important;
  top: 66px !important;
  bottom: calc(var(--dock-height) + 16px) !important;
  right: 14px !important;
  left: auto !important;
  width: min(920px, calc(100vw - 28px)) !important;
  height: auto !important;
  background: linear-gradient(165deg, rgba(22, 16, 44, 0.95), rgba(12, 10, 26, 0.97)) !important;
  border: 1px solid rgba(236, 72, 153, 0.52) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(22px);
  box-shadow: 0 25px 80px rgba(2, 2, 10, 0.92), 0 0 40px rgba(168, 85, 247, 0.24) !important;
  z-index: 50;
  display: flex;
  flex-direction: column;
  animation: modalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.action-panel.hidden {
  display: none !important;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(192, 132, 252, 0.26);
  background: linear-gradient(90deg, rgba(88, 28, 135, 0.35), transparent);
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-rank-pill {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(30, 22, 58, 0.85);
  border: 1px solid rgba(251, 191, 36, 0.45);
  font-size: 11.5px;
  font-weight: 700;
  color: #fde047;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

/* Карточки в галерее персонажей, магазине и админ-панели */
.char-gallery-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
}

.char-big-stage {
  background: radial-gradient(circle at 50% 45%, rgba(168, 85, 247, 0.32), rgba(15, 12, 32, 0.92) 72%);
  border: 1px solid rgba(236, 72, 153, 0.45);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 410px;
}

.char-big-figure {
  width: 210px;
  height: 310px;
  position: relative;
}

.char-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 10px;
}

.char-select-card {
  background: rgba(25, 19, 48, 0.82);
  border: 1px solid rgba(192, 132, 252, 0.28);
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.16s ease;
  color: #fff;
  text-align: left;
}

.char-select-card:hover, .char-select-card.selected {
  border-color: #f472b6;
  background: linear-gradient(145deg, rgba(112, 26, 117, 0.45), rgba(30, 22, 58, 0.9));
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
}

.char-card-thumb {
  height: 150px;
  background: radial-gradient(circle at 50% 45%, rgba(168, 85, 247, 0.28), rgba(12, 10, 26, 0.85));
  border-radius: 10px;
  overflow: hidden;
}

/* Рамки и редкости товаров магазина (Раздел 8 ТЗ) */
.rarity-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.rarity-common { background: rgba(148, 163, 184, 0.22); color: #cbd5e1; }
.rarity-rare { background: rgba(56, 189, 248, 0.22); color: #38bdf8; }
.rarity-epic { background: rgba(168, 85, 247, 0.26); color: #c084fc; }
.rarity-mythic { background: rgba(236, 72, 153, 0.28); color: #f472b6; }
.rarity-legendary { background: rgba(251, 191, 36, 0.28); color: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }

.admin-tabs-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.admin-table th, .admin-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(192, 132, 252, 0.18);
  text-align: left;
}

.admin-table th {
  color: #c4b5fd;
  font-weight: 700;
}

/* --- KEYFRAMES ДЛЯ ВСЕХ 7 СОСТОЯНИЙ АНИМАЦИИ И АУР --- */
@keyframes idleBreath {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-2px) scaleY(1.012); }
}

@keyframes idleTorsoSway {
  0%, 100% { transform: rotate(-0.5deg) translateY(0); }
  50% { transform: rotate(0.6deg) translateY(-1.5px); }
}

@keyframes idleHairBreeze {
  0%, 100% { transform: skewX(0deg); }
  50% { transform: skewX(1.6deg); }
}

@keyframes eyeBlinkPulse {
  0%, 92%, 100% { opacity: 0.35; transform: scaleY(1); }
  95% { opacity: 0; transform: scaleY(0.1); }
}

@keyframes walkCadence {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-4px); }
  50% { transform: translateY(0.5px); }
  75% { transform: translateY(-4px); }
}

@keyframes walkLegLeft {
  0%, 100% { transform: rotate(10deg) translateX(3px) translateY(0); }
  25% { transform: rotate(0deg) translateY(-4px); }
  50% { transform: rotate(-10deg) translateX(-3px) translateY(0); }
  75% { transform: rotate(0deg) translateY(-1px); }
}

@keyframes walkLegRight {
  0%, 100% { transform: rotate(-10deg) translateX(-3px) translateY(0); }
  25% { transform: rotate(0deg) translateY(-1px); }
  50% { transform: rotate(10deg) translateX(3px) translateY(0); }
  75% { transform: rotate(0deg) translateY(-4px); }
}

@keyframes walkTorsoSwing {
  0%, 100% { transform: rotate(-1.8deg) translateY(0); }
  50% { transform: rotate(1.8deg) translateY(-1px); }
}

@keyframes footContactLeft {
  0%, 100% { transform: translateX(6px) scale(1.1); opacity: 0.85; }
  50% { transform: translateX(-6px) scale(0.75); opacity: 0.45; }
}

@keyframes footContactRight {
  0%, 100% { transform: translateX(-6px) scale(0.75); opacity: 0.45; }
  50% { transform: translateX(6px) scale(1.1); opacity: 0.85; }
}

@keyframes runCadence {
  0%, 100% { transform: translateY(0) rotate(4deg); }
  25% { transform: translateY(-7px) rotate(5deg); }
  50% { transform: translateY(1px) rotate(4deg); }
  75% { transform: translateY(-7px) rotate(5deg); }
}

@keyframes runLegLeft {
  0%, 100% { transform: rotate(18deg) translateX(6px) translateY(-2px); }
  50% { transform: rotate(-18deg) translateX(-6px) translateY(-4px); }
}

@keyframes runLegRight {
  0%, 100% { transform: rotate(-18deg) translateX(-6px) translateY(-4px); }
  50% { transform: rotate(18deg) translateX(6px) translateY(-2px); }
}

@keyframes runTorsoLean {
  0%, 100% { transform: rotate(3.5deg) translateY(-1px); }
  50% { transform: rotate(5.5deg) translateY(-3px); }
}

@keyframes runCapeFlow {
  0%, 100% { transform: skewX(-4deg); }
  50% { transform: skewX(-8deg); }
}

@keyframes emoteJoyJump {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-14px) scale(1.04); }
  70% { transform: translateY(-4px) scale(0.98); }
}

@keyframes emoteWaveTorso {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(4deg); }
}

@keyframes arrestCastPulse {
  0% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 10px #a855f7); }
  100% { transform: scale(1.05) translateY(-6px); filter: drop-shadow(0 0 26px #fbbf24); }
}

@keyframes prisonShackledIdle {
  0%, 100% { transform: translateY(1px) rotate(-1deg); }
  50% { transform: translateY(3px) rotate(1deg); }
}

@keyframes poopWobbleIdle {
  0%, 100% { transform: scale(1, 1) rotate(-1.5deg); }
  50% { transform: scale(1.05, 0.95) rotate(1.5deg); }
}

@keyframes poopSquishWalk {
  0%, 100% { transform: translateY(0) scale(1.06, 0.94) rotate(-4deg); }
  50% { transform: translateY(-8px) scale(0.94, 1.06) rotate(4deg); }
}

@keyframes stinkRise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  35% { opacity: 0.78; }
  100% { transform: translateY(-75px) scale(1.45); opacity: 0; }
}

@keyframes flyOrbit {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(18px, -10px) rotate(15deg); }
  50% { transform: translate(0, -18px) rotate(0deg); }
  75% { transform: translate(-18px, -8px) rotate(-15deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes auraBreath {
  0% { transform: scale(0.94); opacity: 0.72; }
  100% { transform: scale(1.08); opacity: 1; }
}

@keyframes darkSmokePulse {
  0% { transform: scale(0.95) translateY(2px); }
  100% { transform: scale(1.07) translateY(-5px); }
}

@keyframes sigilPulse {
  0% { transform: scaleX(0.92); opacity: 0.65; }
  100% { transform: scaleX(1.08); opacity: 1; }
}

@keyframes wingsFlap {
  0% { transform: translateX(-50%) scaleX(0.94) translateY(0); }
  100% { transform: translateX(-50%) scaleX(1.08) translateY(-4px); }
}

@keyframes popBubble {
  0% { transform: translateX(-50%) scale(0.4); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Поддержка настройки «Уменьшить анимацию» (Раздел 5.2 ТЗ) */
body.reduce-motion .art-part,
body.reduce-motion .sprite-wrap,
body.reduce-motion .aura,
body.reduce-motion .halo,
body.reduce-motion .particle,
body.reduce-motion .stink-cloud,
body.reduce-motion .buzzing-fly {
  animation: none !important;
}

/* --- АДАПТИВНОСТЬ ПОД ПЛАНШЕТЫ И ТЕЛЕФОНЫ (Раздел 2.2 и 2.3 ТЗ) --- */
@media (max-width: 980px) {
  .chat-stage {
    grid-template-columns: 1fr;
  }
  .chat-online-sidebar {
    display: none;
  }
  .char-gallery-layout {
    grid-template-columns: 1fr;
  }
  .hud-left-overlay {
    width: 205px;
  }
}

@media (max-width: 768px) {
  :root {
    --chat-height: 39dvh;
    --dock-height: 62px;
  }
  .topbar {
    padding: 4px 8px;
    gap: 6px;
  }
  .brand-text small,
  .online-pill,
  .currency-pill.crystals {
    display: none;
  }
  .topbar-player-info {
    min-width: 110px;
  }
  .hud-left-overlay {
    width: 170px;
    top: 8px;
    left: 8px;
    bottom: auto;
  }
  .hud-stats-box {
    display: none;
  }
  .desktop-only {
    display: none !important;
  }
  .mobile-more-btn {
    display: flex !important;
  }
  .action-panel {
    top: 58px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }
}


/* Fix hidden attribute override from base CSS */
[hidden] {
  display: none !important;
}

/* Fix Auth left preview stage so full character + controls fit cleanly */
.auth-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 22px 24px !important;
}
.auth-headline h2 {
  font-size: 28px !important;
  line-height: 1.12 !important;
  margin: 6px 0 !important;
}
.auth-preview {
  min-height: 360px !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.preview-stage {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
}
.preview-stage .preview-character {
  width: 155px !important;
  height: 235px !important;
  margin: 0 auto !important;
}

/* Scale street characters so overhead crown + nickname + rating never clip top of scene */
.character {
  width: 148px !important;
  height: 228px !important;
  bottom: 12px !important;
}
.character .sprite-wrap {
  left: 4px !important;
  bottom: 10px !important;
  width: 140px !important;
  height: 214px !important;
}
.character .overhead-tag {
  top: -30px !important;
  padding: 2px 9px !important;
}
.character .shadow {
  left: 26px !important;
  width: 94px !important;
  bottom: 6px !important;
}

/* Position prison banner at top-right so prisoner in center of cell is 100% visible */
.prison-overlay {
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 14px 18px !important;
}
.prison-hud-banner {
  max-width: 390px !important;
  padding: 10px 16px !important;
  text-align: left !important;
}
.prison-hud-banner h2 {
  font-size: 15.5px !important;
}
.prison-hud-banner p {
  font-size: 11px !important;
  margin-bottom: 6px !important;
}

/* Polish mobile layout (<= 768px) for zero overlap and zero horizontal clipping */
@media (max-width: 768px) {
  .topbar-right .currency-pill,
  .topbar-right #topEventsBtn,
  .topbar-right #topSettingsBtn {
    display: none !important;
  }
  .topbar-player {
    padding: 3px 8px 3px 4px !important;
  }
  .topbar-player-info {
    min-width: 90px !important;
  }
  .compose-quick-emotes {
    display: none !important;
  }
  .chat-compose form {
    gap: 5px !important;
  }
  .send-btn {
    padding: 8px 12px !important;
    font-size: 11.5px !important;
  }
  .hud-left-overlay {
    width: 152px !important;
    top: auto !important;
    bottom: 8px !important;
    left: 8px !important;
    gap: 5px !important;
  }
  .hud-hero-card {
    padding: 5px 7px !important;
  }
  .hud-hero-portrait {
    width: 34px !important;
    height: 34px !important;
  }
  .hud-event-card {
    padding: 6px 8px !important;
  }
  .hud-event-card strong {
    font-size: 11.5px !important;
  }
  .hud-action-btn {
    padding: 4px 6px !important;
    font-size: 10px !important;
  }
  .scene-top-right {
    top: 8px !important;
    right: 8px !important;
    left: 8px !important;
    justify-content: flex-end !important;
    gap: 4px !important;
  }
  .scene-pill-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
  #bottomDock .dock-btn[data-panel="inventory"],
  #bottomDock .dock-btn[data-panel="rating"],
  #bottomDock .dock-btn[data-panel="admin"] {
    display: none !important;
  }
  .bottom-dock {
    padding: 4px 6px !important;
    gap: 2px !important;
  }
  .dock-btn {
    height: 48px !important;
  }
}


/* Ensure 2-column chat stage (Messages left + Online players right) */
.chat-dock .chat-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 245px !important;
  align-items: stretch !important;
  height: 100% !important;
}
.chat-dock .chat-stage.dm-mode {
  grid-template-columns: 220px minmax(0, 1fr) 220px !important;
}
.chat-dock .chat-messages {
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.chat-dock .chat-online-sidebar {
  height: 100% !important;
  min-height: 0 !important;
}
@media (max-width: 768px) {
  .chat-dock .chat-stage {
    grid-template-columns: 1fr !important;
  }
  .chat-dock .chat-online-sidebar {
    display: none !important;
  }
  .hud-hero-card {
    display: none !important;
  }
  .topbar-right #expandWorldBtn {
    display: none !important;
  }
}

/* Override v4 opaque prison overlay so prisoner character and prison-cell.webp background are visible inside the cell */
.prison-overlay {
  background: transparent !important;
  backdrop-filter: none !important;
}
.prison-cold-glow {
  background: radial-gradient(circle at 50% 20%, rgba(56, 189, 248, 0.14), rgba(15, 23, 42, 0.25) 70%) !important;
}
.prison-bars {
  background: repeating-linear-gradient(
    90deg,
    transparent 0 88px,
    rgba(15, 23, 42, 0.72) 88px 94px,
    rgba(148, 163, 184, 0.42) 94px 96px,
    rgba(15, 23, 42, 0.82) 96px 100px
  ) !important;
  opacity: 0.65 !important;
}
.prison-hud-banner {
  margin-top: 38px !important;
}


/* ==========================================================================
   10 СТУПЕНЕЙ ПОВЫШЕНИЯ (+I .. +X) И 10 СТУПЕНЕЙ ПОНИЖЕНИЯ (-I .. -X) РЕЙТИНГА
   С постепенной визуальной мутацией самого персонажа и негативных аур до 💩
   ========================================================================== */

/* --- 10 Положительных ступеней аур (pos-stage-1 .. pos-stage-10) --- */
.character.pos-stage-1 .aura { opacity: 0; }
.character.pos-stage-2 .aura {
  opacity: 0.55;
  background: radial-gradient(ellipse at center, rgba(103, 232, 249, 0.28) 0%, transparent 70%);
  filter: blur(12px);
}
.character.pos-stage-3 .aura {
  opacity: 0.85;
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.45) 0%, rgba(56, 189, 248, 0.15) 58%, transparent 76%);
  filter: blur(14px);
  animation: auraBreath 2.6s ease-in-out infinite alternate;
}
.character.pos-stage-4 .aura {
  opacity: 0.9;
  background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.55) 0%, rgba(56, 189, 248, 0.22) 60%, transparent 78%);
  filter: blur(15px);
  animation: auraBreath 2.3s ease-in-out infinite alternate;
}
.character.pos-stage-5 .aura {
  opacity: 0.95;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.58) 0%, rgba(139, 92, 246, 0.26) 60%, transparent 78%);
  filter: blur(15px);
  animation: auraBreath 2.1s ease-in-out infinite alternate;
}
.character.pos-stage-6 .aura {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(192, 132, 252, 0.66) 0%, rgba(168, 85, 247, 0.32) 60%, transparent 80%);
  filter: blur(16px);
  animation: auraBreath 1.9s ease-in-out infinite alternate;
}
.character.pos-stage-7 .aura {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(232, 121, 249, 0.72) 0%, rgba(192, 132, 252, 0.36) 58%, transparent 80%);
  filter: blur(16px);
  animation: auraBreath 1.7s ease-in-out infinite alternate;
}
.character.pos-stage-8 .aura {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(244, 114, 182, 0.78) 0%, rgba(217, 70, 239, 0.38) 58%, transparent 82%);
  filter: blur(16px);
  animation: auraBreath 1.5s ease-in-out infinite alternate;
}
.character.pos-stage-9 .aura {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(251, 146, 60, 0.82) 0%, rgba(244, 114, 182, 0.42) 55%, transparent 82%);
  filter: blur(15px);
  animation: auraBreath 1.35s ease-in-out infinite alternate;
}
.character.pos-stage-10 .aura {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.90) 0%, rgba(245, 158, 11, 0.50) 48%, rgba(236, 72, 153, 0.25) 68%, transparent 84%);
  filter: blur(15px);
  animation: auraBreath 1.2s ease-in-out infinite alternate;
}

/* --- 10 Отрицательных ступеней: АУРА + ПОСТЕПЕННОЕ ИЗМЕНЕНИЕ САМОГО ПЕРСОНАЖА (neg-stage-1 .. neg-stage-10) --- */
/* Ступень -I (-1..-499): Слабая серая дымка, лёгкое потускнение персонажа */
.character.neg-stage-1 .aura {
  opacity: 0.65;
  background: radial-gradient(ellipse at 50% 75%, rgba(100, 116, 139, 0.55) 0%, transparent 70%);
  filter: blur(12px);
}
.character.neg-stage-1 .art-part {
  filter: saturate(0.78) brightness(0.93);
}

/* Ступень -II (-500..-999): Пепельный туман, выцветшая одежда и лёгкая сутулость */
.character.neg-stage-2 .aura {
  opacity: 0.78;
  background: radial-gradient(ellipse at 50% 65%, rgba(71, 85, 105, 0.72) 0%, rgba(30, 41, 59, 0.35) 58%, transparent 76%);
  filter: blur(13px);
}
.character.neg-stage-2 .art-part {
  filter: saturate(0.55) brightness(0.86) contrast(1.06);
}
.character.neg-stage-2 .sprite-wrap {
  transform: rotate(1.2deg);
}

/* Ступень -III (-1000..-1499): Фиолетово-чёрный дым, мрачный теневой оттенок персонажа */
.character.neg-stage-3 .aura {
  opacity: 0.88;
  background: radial-gradient(ellipse at center, rgba(88, 28, 135, 0.78) 0%, rgba(15, 7, 28, 0.5) 60%, transparent 78%);
  filter: blur(14px);
  animation: darkSmokePulse 2.5s ease-in-out infinite alternate;
}
.character.neg-stage-3 .art-part {
  filter: saturate(0.48) brightness(0.78) hue-rotate(-22deg) contrast(1.12);
}

/* Ступень -IV (-1500..-1999): Угольный смог и копоть, потемневший потрёпанный силуэт */
.character.neg-stage-4 .aura {
  opacity: 0.92;
  background: radial-gradient(ellipse at center, rgba(17, 24, 39, 0.92) 0%, rgba(107, 33, 168, 0.55) 58%, transparent 80%);
  filter: blur(14px);
  animation: darkSmokePulse 2.2s ease-in-out infinite alternate;
}
.character.neg-stage-4 .art-part {
  filter: grayscale(0.55) brightness(0.70) contrast(1.18);
}

/* Ступень -V (-2000..-2499): Ядовито-зелёное свечение, болезненный зелёный оттенок самого героя */
.character.neg-stage-5 .aura {
  opacity: 0.94;
  background: radial-gradient(ellipse at center, rgba(77, 124, 15, 0.78) 0%, rgba(20, 83, 45, 0.45) 60%, transparent 80%);
  filter: blur(14px);
  animation: darkSmokePulse 2.0s ease-in-out infinite alternate;
}
.character.neg-stage-5 .art-part {
  filter: sepia(0.45) hue-rotate(50deg) saturate(1.25) brightness(0.76);
}

/* Ступень -VI (-2500..-2999): Тёмно-бурая грязная аура, пятна грязи на персонаже + 1 муха */
.character.neg-stage-6 .aura {
  opacity: 0.96;
  background: radial-gradient(ellipse at center, rgba(101, 163, 13, 0.75) 0%, rgba(63, 46, 18, 0.58) 58%, transparent 82%);
  filter: blur(15px);
  animation: darkSmokePulse 1.8s ease-in-out infinite alternate;
}
.character.neg-stage-6 .art-part {
  filter: sepia(0.65) hue-rotate(30deg) saturate(1.4) brightness(0.70);
}

/* Ступень -VII (-3000..-3499): Болотные миазмы, персонаж покрыт бурой тиной + 2 мухи */
.character.neg-stage-7 .aura {
  opacity: 0.98;
  background: radial-gradient(ellipse at center, rgba(132, 204, 22, 0.72) 0%, rgba(113, 63, 18, 0.65) 56%, transparent 82%);
  filter: blur(15px);
  animation: darkSmokePulse 1.6s ease-in-out infinite alternate;
}
.character.neg-stage-7 .art-part {
  filter: sepia(0.82) hue-rotate(15deg) saturate(1.6) brightness(0.64) contrast(1.15);
}

/* Ступень -VIII (-3500..-3999): Клубы зловония, фигура персонажа сплющивается и буреет + 3 мухи */
.character.neg-stage-8 .aura {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(161, 98, 7, 0.85) 0%, rgba(101, 163, 13, 0.55) 58%, transparent 84%);
  filter: blur(15px);
  animation: darkSmokePulse 1.4s ease-in-out infinite alternate;
}
.character.neg-stage-8 .art-part {
  filter: sepia(0.95) hue-rotate(-10deg) saturate(1.85) brightness(0.56) contrast(1.2);
}
.character.neg-stage-8 .sprite-facing {
  transform: scaleX(var(--facing, 1)) scaleY(0.91);
}

/* Ступень -IX (-4000..-4999): Полураспад — герой затянут бурой жижей и сквозь него проступает форма 💩 */
.character.neg-stage-9 .aura {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(133, 77, 14, 0.92) 0%, rgba(132, 204, 22, 0.65) 55%, transparent 85%);
  filter: blur(15px);
  animation: darkSmokePulse 1.2s ease-in-out infinite alternate;
}
.character.neg-stage-9 .art-part {
  filter: sepia(1) hue-rotate(-18deg) saturate(2.1) brightness(0.48) contrast(1.25);
}
.character.neg-stage-9 .sprite-facing {
  transform: scaleX(var(--facing, 1)) scaleY(0.85);
}

/* Накладной слой грязевых пятен и частичной мутации для отрицательных ступеней -III .. -IX */
.neg-grime-overlay {
  position: absolute;
  inset: 14% 18% 8%;
  pointer-events: none;
  z-index: 6;
  background:
    radial-gradient(circle at 35% 75%, rgba(113, 63, 18, 0.68) 0 12%, transparent 22%),
    radial-gradient(circle at 68% 62%, rgba(82, 45, 12, 0.65) 0 10%, transparent 20%),
    radial-gradient(circle at 48% 86%, rgba(63, 98, 18, 0.58) 0 16%, transparent 28%);
  filter: blur(1px);
}

.neg-poop-morph-ghost {
  position: absolute;
  inset: 12% 10% 6%;
  background: url('/characters/poop-curse.webp') center bottom / contain no-repeat;
  opacity: 0.48;
  z-index: 7;
  pointer-events: none;
  animation: morphGhostPulse 1.1s ease-in-out infinite alternate;
}

@keyframes morphGhostPulse {
  0% { opacity: 0.28; transform: scale(0.92); }
  100% { opacity: 0.68; transform: scale(1.04); }
}


/* Дополнение для 11 и 12 ступеней (I..XII и -I..-XII по референсу 1000015328.png) */
.character.pos-stage-11 .aura {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.92) 0%, rgba(245, 158, 11, 0.55) 52%, transparent 84%);
  filter: blur(15px);
  animation: auraBreath 1.15s ease-in-out infinite alternate;
}
.character.pos-stage-12 .aura {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(232, 121, 249, 0.78) 42%, rgba(168, 85, 247, 0.45) 68%, transparent 86%);
  filter: blur(15px);
  animation: auraBreath 1.0s ease-in-out infinite alternate;
}

/* Нимб над головой для ступеней VI..XII (как на референсе 1000015328.png) */
.character .head-halo {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--aura, #fbbf24);
  box-shadow: 0 0 12px var(--aura, #fbbf24), inset 0 0 8px var(--aura, #fbbf24);
  z-index: 11;
  pointer-events: none;
}

/* Отрицательные ступени -I .. -VI: фиолетово-пурпурное проклятое свечение и потемнение героя */
.character.neg-stage-1 .aura { opacity: 0.48; background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.35) 0%, transparent 72%); filter: blur(12px); }
.character.neg-stage-2 .aura { opacity: 0.65; background: radial-gradient(ellipse at center, rgba(147, 51, 234, 0.50) 0%, transparent 74%); filter: blur(13px); }
.character.neg-stage-3 .aura { opacity: 0.78; background: radial-gradient(ellipse at center, rgba(126, 34, 206, 0.65) 0%, rgba(15, 7, 28, 0.5) 60%, transparent 76%); filter: blur(14px); }
.character.neg-stage-4 .aura { opacity: 0.88; background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.72) 0%, rgba(59, 7, 100, 0.55) 60%, transparent 78%); filter: blur(14px); }
.character.neg-stage-5 .aura { opacity: 0.94; background: radial-gradient(ellipse at center, rgba(192, 38, 211, 0.80) 0%, rgba(88, 28, 135, 0.60) 60%, transparent 80%); filter: blur(15px); }
.character.neg-stage-6 .aura { opacity: 1.00; background: radial-gradient(ellipse at center, rgba(217, 70, 239, 0.88) 0%, rgba(112, 26, 117, 0.65) 58%, transparent 82%); filter: blur(15px); }

/* Отрицательные ступени -VII .. -IX: грязевые монстры 💩 в фиолетово-багровом проклятом дыму */
.character.neg-stage-7 .aura,
.character.neg-stage-8 .aura,
.character.neg-stage-9 .aura {
  opacity: 0.96;
  background: radial-gradient(ellipse at center, rgba(192, 38, 211, 0.72) 0%, rgba(88, 28, 135, 0.45) 58%, transparent 82%);
  filter: blur(15px);
}
.character.neg-stage-7 .art-part,
.character.neg-stage-8 .art-part,
.character.neg-stage-9 .art-part,
.character.neg-stage-10 .art-part,
.character.neg-stage-11 .art-part,
.character.neg-stage-12 .art-part {
  filter: none !important;
}

/* Отрицательные ступени -X .. -XII: 💩 Говно / Нечистый / Абсолютное дерьмо в ядовито-зелёном пламени с мухами */
.character.neg-stage-10 .aura {
  opacity: 0.95;
  background: radial-gradient(ellipse at center, rgba(132, 204, 22, 0.68) 0%, rgba(63, 98, 18, 0.38) 58%, transparent 82%);
  filter: blur(15px);
}
.character.neg-stage-11 .aura {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(132, 204, 22, 0.85) 0%, rgba(77, 124, 15, 0.52) 58%, transparent 84%);
  filter: blur(15px);
}
.character.neg-stage-12 .aura {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(163, 230, 53, 0.96) 0%, rgba(101, 163, 13, 0.68) 52%, rgba(250, 204, 21, 0.30) 72%, transparent 86%);
  filter: blur(14px);
}

/* Крупные карточки аниме-персонажей в Магазине */
.shop-card.char-shop-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-color: rgba(236, 72, 153, 0.38);
}
.char-shop-Stage {
  height: 175px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 45%, rgba(168, 85, 247, 0.32), rgba(12, 10, 26, 0.92));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.char-shop-Stage .anime-art {
  width: 125px;
  height: 168px;
}


/* Поднимаем нимб точно над макушкой головы персонажа */
.character .head-halo {
  top: -16px !important;
  width: 46px !important;
  height: 12px !important;
}

/* Многоколоночная сетка карточек аниме-героев в Магазине */
.shop-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)) !important;
  gap: 12px !important;
}
.shop-card.char-shop-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  padding: 10px !important;
  background: linear-gradient(155deg, rgba(28, 20, 56, 0.92), rgba(14, 11, 30, 0.96)) !important;
  border: 1px solid rgba(192, 132, 252, 0.38) !important;
  border-radius: 14px !important;
}
.shop-card.char-shop-card:hover {
  border-color: #f472b6 !important;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.3) !important;
}


/* ==========================================================================
   ПОЛНАЯ ПЕРЕРАБОТКА СВЕЧЕНИЯ (АУР) ПО РЕФЕРЕНСАМ 1000015328.png И 1000015223.png
   Убираем простые геометрические овалы. Внедряем контурное свечение силуэта
   + процедурный Canvas-шейдер пламенных языков, молний, дыма, нимбов и мух!
   ========================================================================== */

.character .halo,
.character .aura-crest,
.character .ground-sigil,
.character .head-halo,
.character .stink-cloud,
.character .buzzing-fly,
.character .character-wings {
  display: none !important;
}

.character .aura {
  display: none !important;
}

.character .char-aura-canvas {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 260px;
  height: 310px;
  pointer-events: none;
  z-index: 3;
}

.character .char-aura-front-canvas {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 260px;
  height: 310px;
  pointer-events: none;
  z-index: 7;
}

/* Контурное свечение (Rim Glow), облегающее точный силуэт персонажа */
.character.pos-stage-1 .sprite-wrap {
  filter: drop-shadow(0 0 4px rgba(225, 29, 72, 0.35));
}
.character.pos-stage-2 .sprite-wrap {
  filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.65)) drop-shadow(0 0 10px rgba(147, 51, 234, 0.45));
}
.character.pos-stage-3 .sprite-wrap {
  filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.85)) drop-shadow(0 0 12px rgba(56, 189, 248, 0.65));
}
.character.pos-stage-4 .sprite-wrap {
  filter: drop-shadow(0 0 5px rgba(196, 181, 253, 0.9)) drop-shadow(0 0 14px rgba(139, 92, 246, 0.75));
}
.character.pos-stage-5 .sprite-wrap {
  filter: drop-shadow(0 0 5px rgba(240, 171, 252, 0.95)) drop-shadow(0 0 16px rgba(168, 85, 247, 0.85));
}
.character.pos-stage-6 .sprite-wrap {
  filter: drop-shadow(0 0 6px #f5d0fe) drop-shadow(0 0 16px #d946ef) drop-shadow(0 -4px 24px rgba(217, 70, 239, 0.75));
}
.character.pos-stage-7 .sprite-wrap {
  filter: drop-shadow(0 0 6px #bae6fd) drop-shadow(0 0 16px #3b82f6) drop-shadow(0 -4px 26px rgba(37, 99, 235, 0.8));
}
.character.pos-stage-8 .sprite-wrap {
  filter: drop-shadow(0 0 7px #ffffff) drop-shadow(0 0 18px #38bdf8) drop-shadow(0 -5px 28px rgba(99, 102, 241, 0.88));
}
.character.pos-stage-9 .sprite-wrap {
  filter: drop-shadow(0 0 7px #fce7f3) drop-shadow(0 0 18px #ec4899) drop-shadow(0 -5px 30px rgba(219, 39, 119, 0.9));
}
.character.pos-stage-10 .sprite-wrap {
  filter: drop-shadow(0 0 7px #fef08a) drop-shadow(0 0 18px #f59e0b) drop-shadow(0 -6px 30px rgba(217, 119, 6, 0.92));
}
.character.pos-stage-11 .sprite-wrap {
  filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 20px #fbbf24) drop-shadow(0 -6px 34px rgba(245, 158, 11, 0.96));
}
.character.pos-stage-12 .sprite-wrap {
  filter: drop-shadow(0 0 9px #ffffff) drop-shadow(0 0 22px #f0abfc) drop-shadow(0 -8px 36px rgba(192, 38, 211, 1));
}

/* Контурное свечение для отрицательных ступеней (-I .. -XII) */
.character.neg-stage-1 .sprite-wrap {
  filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.45));
}
.character.neg-stage-2 .sprite-wrap {
  filter: drop-shadow(0 0 6px rgba(147, 51, 234, 0.65)) drop-shadow(0 0 12px rgba(88, 28, 135, 0.5));
}
.character.neg-stage-3 .sprite-wrap {
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.78)) drop-shadow(0 0 15px rgba(107, 33, 168, 0.65));
}
.character.neg-stage-4 .sprite-wrap {
  filter: drop-shadow(0 0 7px rgba(192, 132, 252, 0.85)) drop-shadow(0 0 18px rgba(126, 34, 206, 0.78));
}
.character.neg-stage-5 .sprite-wrap {
  filter: drop-shadow(0 0 7px rgba(232, 121, 249, 0.9)) drop-shadow(0 0 20px rgba(162, 28, 175, 0.85));
}
.character.neg-stage-6 .sprite-wrap {
  filter: drop-shadow(0 0 8px #f5d0fe) drop-shadow(0 0 22px #d946ef) drop-shadow(0 -4px 28px rgba(134, 25, 143, 0.9));
}
/* На ступенях -I..-VI убираем зелёные кляксы, оставляя чистый тёмно-фиолетовый проклятый тон как на референсе */
.character .neg-grime-overlay,
.character .neg-poop-morph-ghost {
  display: none !important;
}
.character.neg-stage-1 .art-part { filter: saturate(0.85) brightness(0.92); }
.character.neg-stage-2 .art-part { filter: saturate(0.78) brightness(0.86) contrast(1.05); }
.character.neg-stage-3 .art-part { filter: saturate(0.72) brightness(0.80) contrast(1.08); }
.character.neg-stage-4 .art-part { filter: saturate(0.68) brightness(0.75) contrast(1.12); }
.character.neg-stage-5 .art-part { filter: saturate(0.65) brightness(0.70) contrast(1.15); }
.character.neg-stage-6 .art-part { filter: saturate(0.62) brightness(0.66) contrast(1.18); }

/* Контурное свечение монстров 💩 (-VII .. -XII) */
.character.neg-stage-7 .sprite-wrap {
  filter: drop-shadow(0 0 6px #e879f9) drop-shadow(0 0 16px rgba(147, 51, 234, 0.8));
}
.character.neg-stage-8 .sprite-wrap {
  filter: drop-shadow(0 0 7px #f0abfc) drop-shadow(0 0 20px rgba(168, 85, 247, 0.88));
}
.character.neg-stage-9 .sprite-wrap {
  filter: drop-shadow(0 0 8px #f5d0fe) drop-shadow(0 0 24px rgba(192, 38, 211, 0.95));
}
.character.neg-stage-10 .sprite-wrap {
  filter: drop-shadow(0 0 7px #bef264) drop-shadow(0 0 18px rgba(101, 163, 13, 0.85));
}
.character.neg-stage-11 .sprite-wrap {
  filter: drop-shadow(0 0 8px #d9f99d) drop-shadow(0 0 22px rgba(132, 204, 22, 0.95));
}
.character.neg-stage-12 .sprite-wrap {
  filter: drop-shadow(0 0 10px #ecfccb) drop-shadow(0 0 26px #84cc16) drop-shadow(0 -6px 34px rgba(163, 230, 53, 1));
}

/* ==========================================================================
   ВСПЛЫВАЮЩИЙ КРУЖОЧЕК СОБЫТИЯ С КРЕСТИКОМ ЗАКРЫТИЯ И КАРТОЧКА ПЕРСОНАЖА / ГАРДЕРОБА
   ========================================================================== */

.event-orb-wrapper {
  position: absolute;
  left: 14px;
  bottom: 16px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
}

.event-orb-wrapper[hidden] {
  display: none !important;
}

.event-orb-circle {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(236, 72, 153, 0.92), rgba(109, 40, 217, 0.94) 62%, rgba(20, 14, 42, 0.98));
  border: 2px solid #f472b6;
  box-shadow: 0 0 22px rgba(236, 72, 153, 0.65), inset 0 0 12px rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.event-orb-circle:hover {
  transform: scale(1.06);
  box-shadow: 0 0 28px rgba(236, 72, 153, 0.9), inset 0 0 14px rgba(255, 255, 255, 0.45);
}

.event-orb-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px dashed rgba(244, 114, 182, 0.72);
  animation: orbSpin 9s linear infinite;
  pointer-events: none;
}

@keyframes orbSpin {
  to { transform: rotate(360deg); }
}

.event-orb-icon {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 6px #fde047);
}

.event-orb-title {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.event-orb-timer {
  font-size: 9.5px;
  font-weight: 800;
  color: #fde047;
  line-height: 1;
}

.event-orb-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: linear-gradient(135deg, #ef4444, #be123c);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
  z-index: 3;
}

.event-orb-close:hover {
  transform: scale(1.1);
  background: #f43f5e;
}

.event-orb-popover {
  position: absolute;
  left: 0;
  bottom: 80px;
  width: 265px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(24, 16, 48, 0.96), rgba(13, 10, 28, 0.98));
  border: 1px solid rgba(236, 72, 153, 0.6);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.8), 0 0 24px rgba(236, 72, 153, 0.3);
  backdrop-filter: blur(14px);
  z-index: 30;
}

.event-orb-popover[hidden] {
  display: none !important;
}

.event-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.event-popover-head strong {
  display: block;
  font-size: 14px;
  color: #fff;
}

.event-popover-close {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(244, 114, 182, 0.45);
  background: rgba(30, 20, 58, 0.9);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.event-popover-desc {
  margin: 0 0 8px;
  font-size: 11.5px;
  color: #cbd5e1;
}

/* Компактная информационная сетка в разделе «Персонаж» */
.char-info-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.char-stat-tile {
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(20, 15, 42, 0.84);
  border: 1px solid rgba(192, 132, 252, 0.28);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.char-stat-tile small {
  font-size: 10.5px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.char-stat-tile strong {
  font-size: 14px;
  color: #f8fafc;
}

.online-reward-banner {
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.16), rgba(168, 85, 247, 0.22));
  border: 1px solid rgba(250, 204, 21, 0.48);
  margin: 10px 0;
}

.online-reward-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  overflow: hidden;
  margin-top: 6px;
}

.online-reward-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fde047, #ec4899);
  transition: width 0.35s ease;
}

/* ==========================================================================
   ОБНОВЛЕНИЕ v6.1:
   1. Опущенное окно чата до центральной линии (с ресайзером высоты)
   2. Кнопка NEON CITY -> Меню покупки и владения городом + Корона владельца
   3. Детализированные иллюстрации и фасады недвижимости на улице и в меню
   4. Продвинутая 6-слойная кинематика ходьбы и бега (с 3D-перспективой шага)
   5. Полноценное меню Настроек (Звук, Масштаб ПК/Мобильный, Графика, FPS)
   ========================================================================== */

:root {
  --chat-height: 44dvh;
  --ui-scale: 1;
}

/* Принудительное удержание высоты чата (чтобы .game-main не сжимал чат) */
.chat-dock {
  flex: 0 0 var(--chat-height) !important;
  height: var(--chat-height) !important;
  min-height: 280px !important;
  max-height: 62dvh !important;
  position: relative !important;
}

.game-main {
  flex: 1 1 0% !important;
  min-height: 210px !important;
  height: auto !important;
}

.scene {
  min-height: 210px !important;
  height: 100% !important;
}

.scene[data-location="street"] .back-layer {
  background-position: center 72% !important;
}

/* Полоска изменения размера чата внизу окна чата */
.chat-resize-bar {
  height: 7px;
  background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.28), rgba(56, 189, 248, 0.28), transparent);
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  touch-action: none;
}

.chat-resize-bar span {
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: rgba(244, 114, 182, 0.75);
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.8);
  transition: transform 0.15s ease, background 0.15s ease;
}

.chat-resize-bar:hover span {
  transform: scaleX(1.25);
  background: #fde047;
}

/* Интерактивная кнопка NEON CITY в верхней панели */
.city-badge-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 5px 12px !important;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.75), rgba(30, 27, 75, 0.9)) !important;
  border: 1.5px solid rgba(244, 114, 182, 0.75) !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.city-badge-btn:hover {
  transform: translateY(-1px) scale(1.03);
  border-color: #fde047 !important;
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.6), 0 0 12px rgba(236, 72, 153, 0.5);
}

.city-owner-mini {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.22);
  border: 1px solid rgba(251, 191, 36, 0.6);
  color: #fde047;
  font-size: 10px;
  font-weight: 800;
}

/* Индикатор FPS в углу сцены */
.fps-hud-pill {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 24;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10, 8, 22, 0.85);
  border: 1px solid rgba(74, 222, 128, 0.55);
  color: #4ade80;
  font-family: 'Outfit', monospace;
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

/* Корона и титул Владельца Города над персонажем на улице */
.city-owner-overhead {
  position: absolute;
  top: -64px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.95), rgba(217, 119, 6, 0.92), rgba(147, 51, 234, 0.92));
  border: 1.5px solid #fde047;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.85), 0 4px 12px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  z-index: 19;
  pointer-events: none;
  animation: ownerCrownFloat 2.1s ease-in-out infinite alternate;
}

.city-owner-crown-icon {
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 0 6px #fef08a);
}

.city-owner-crown-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fef9c3;
  text-transform: uppercase;
}

@keyframes ownerCrownFloat {
  0% { transform: translateX(-50%) translateY(0) scale(1); }
  100% { transform: translateX(-50%) translateY(-4px) scale(1.05); }
}

/* --- НЕДВИЖИМОСТЬ НА УЛИЦЕ И В МЕНЮ (Исправление отображения и иллюстраций) --- */
.building-layer {
  z-index: 4 !important;
  opacity: 0.96 !important;
  pointer-events: auto !important;
}

.building {
  position: absolute;
  bottom: 34px !important;
  border-radius: 16px 16px 4px 4px;
  background: linear-gradient(180deg, rgba(24, 16, 48, 0.92), rgba(13, 10, 28, 0.96)) !important;
  border: 1.5px solid rgba(192, 132, 252, 0.45) !important;
  overflow: visible !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), 0 0 22px rgba(168, 85, 247, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  pointer-events: auto !important;
}

.building:hover {
  transform: translateY(-4px);
  border-color: #f472b6 !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.85), 0 0 28px rgba(236, 72, 153, 0.55) !important;
  z-index: 6;
}

.building.is-property {
  border-width: 2px !important;
}

.building.owned-by-me {
  border-color: #4ade80 !important;
  box-shadow: 0 0 26px rgba(74, 222, 128, 0.45) !important;
}

.building-art-svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

.building .property-floating-card {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(12, 9, 26, 0.92);
  border: 1px solid var(--prop-accent, #f472b6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.75), 0 0 14px color-mix(in srgb, var(--prop-accent, #f472b6) 45%, transparent);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  z-index: 7;
  pointer-events: none;
}

.building .property-floating-card strong {
  font-size: 11px;
  color: #fff;
}

.building .property-floating-card small {
  font-size: 9.5px;
  color: #fde047;
  font-weight: 700;
}

/* Карточки недвижимости с иллюстрациями в модальном окне */
.property-grid-rich {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 14px;
}

.property-card-rich {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(26, 18, 52, 0.94), rgba(14, 11, 28, 0.98));
  border: 1px solid rgba(192, 132, 252, 0.38);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.property-card-rich:hover {
  transform: translateY(-2px);
  border-color: #f472b6;
  box-shadow: 0 14px 34px rgba(236, 72, 153, 0.28);
}

.property-card-rich.highlight-prop {
  border: 2px solid #fde047;
  box-shadow: 0 0 26px rgba(251, 191, 36, 0.45);
}

.property-card-visual {
  height: 148px;
  width: 100%;
  background: radial-gradient(circle at 50% 35%, rgba(168, 85, 247, 0.28), rgba(10, 8, 22, 0.95));
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(192, 132, 252, 0.25);
}

.property-card-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

.property-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(12, 9, 26, 0.85);
  border: 1px solid rgba(244, 114, 182, 0.55);
  font-size: 10px;
  font-weight: 800;
  color: #f9a8d4;
}

.property-card-status {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(12, 9, 26, 0.88);
  font-size: 10px;
  font-weight: 800;
}

.property-card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.property-card-body h4 {
  margin: 0;
  font-size: 15px;
  color: #fff;
}

.property-card-body p {
  margin: 0;
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.4;
}

.property-card-foot {
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(192, 132, 252, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- СИЛЬНО УЛУЧШЕННАЯ ПОСЛОЙНАЯ 2D-АНИМАЦИЯ ПЕРЕДВИЖЕНИЯ (Walk / Run / Turn / Idle) --- */
/* Переопределяем слои .anime-art для плавной суставной кинематики без жёстких швов */
.anime-art .art-back-hair {
  clip-path: polygon(0 4%, 100% 4%, 100% 72%, 0 72%) !important;
  z-index: 1 !important;
  transform-origin: 50% 16% !important;
  transform: rotate(calc(var(--hair-wave, 0deg))) skewX(calc(var(--hair-skew, 0deg)));
}

.anime-art .art-head {
  clip-path: polygon(15% 0%, 85% 0%, 85% 27%, 15% 27%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 21%, transparent 27%);
  mask-image: linear-gradient(180deg, #000 0%, #000 21%, transparent 27%);
  z-index: 6;
  transform-origin: 50% 22%;
  transform: translateY(var(--head-bob, 0px)) rotate(var(--head-tilt, 0deg));
}

.anime-art .art-torso {
  clip-path: polygon(0 0, 100% 0, 100% 64%, 0 64%) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0,0,0,0.82) 60%, transparent 64%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0,0,0,0.82) 60%, transparent 64%) !important;
  z-index: 4 !important;
  transform-origin: 50% 52% !important;
  transform: translateY(var(--torso-y, 0px)) rotate(var(--torso-rot, 0deg)) scaleX(var(--torso-twist, 1));
}

.anime-art .art-front-arm {
  clip-path: polygon(12% 20%, 88% 20%, 92% 62%, 8% 62%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.95) 25%, transparent 68%);
  mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.95) 25%, transparent 68%);
  z-index: 5;
  transform-origin: 50% 26%;
  transform: rotate(var(--arm-swing, 0deg)) translateX(var(--arm-shift, 0px));
}

.anime-art .art-left-leg {
  clip-path: polygon(4% 50%, 54% 50%, 56% 100%, 2% 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 56%, #000 62%, #000 100%) !important;
  mask-image: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 56%, #000 62%, #000 100%) !important;
  z-index: var(--leg-l-z, 3) !important;
  transform-origin: 45% 55% !important;
  transform: translate3d(var(--leg-l-x, 0px), var(--leg-l-y, 0px), 0) rotate(var(--leg-l-rot, 0deg)) scaleY(var(--leg-l-scale, 1));
  filter: brightness(var(--leg-l-bright, 1));
}

.anime-art .art-right-leg {
  clip-path: polygon(46% 50%, 96% 50%, 98% 100%, 44% 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 56%, #000 62%, #000 100%) !important;
  mask-image: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 56%, #000 62%, #000 100%) !important;
  z-index: var(--leg-r-z, 2) !important;
  transform-origin: 55% 55% !important;
  transform: translate3d(var(--leg-r-x, 0px), var(--leg-r-y, 0px), 0) rotate(var(--leg-r-rot, 0deg)) scaleY(var(--leg-r-scale, 1));
  filter: brightness(var(--leg-r-bright, 1));
}

/* Фантомный шлейф при беге (Speed Afterimage) */
.anime-art .art-ghost-trail {
  position: absolute;
  inset: 0;
  background-image: var(--art);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  filter: hue-rotate(25deg) saturate(2) brightness(1.3) blur(1.5px);
  transition: opacity 0.15s ease;
}

.character.state-run.is-moving .art-ghost-trail {
  opacity: 0.42;
  transform: translateX(-14px) scale(0.97);
}

/* Когда работает процедурная 60-FPS кинематика (.proc-kinematics), отключаем старые конфликтующие CSS-keyframes на ногах и корпусе */
.character.proc-kinematics.is-moving .sprite-wrap,
.character.proc-kinematics.is-moving .art-left-leg,
.character.proc-kinematics.is-moving .art-right-leg,
.character.proc-kinematics.is-moving .art-torso,
.character.proc-kinematics.is-moving .art-back-hair {
  animation: none !important;
}

.character.proc-kinematics .sprite-wrap {
  transform: translate3d(0, var(--bob-y, 0px), 0) rotate(var(--body-lean, 0deg)) scale(var(--squash-x, 1), var(--squash-y, 1));
}

/* Улучшенная CSS-анимация для превью и витрины (когда нет JS-движения по координате) */
@keyframes walkCadence {
  0%, 100% { transform: translateY(0px) rotate(3deg) scale(1.02, 0.98); }
  25% { transform: translateY(-7px) rotate(4.5deg) scale(0.99, 1.02); }
  50% { transform: translateY(0px) rotate(3deg) scale(1.02, 0.98); }
  75% { transform: translateY(-7px) rotate(4.5deg) scale(0.99, 1.02); }
}

@keyframes walkLegLeft {
  0%, 100% { transform: translate3d(9px, -2px, 0) rotate(-22deg) scaleY(1.03); filter: brightness(1.08); }
  25% { transform: translate3d(2px, -8px, 0) rotate(-4deg) scaleY(0.96); filter: brightness(1.04); }
  50% { transform: translate3d(-9px, 0px, 0) rotate(20deg) scaleY(0.95); filter: brightness(0.82); }
  75% { transform: translate3d(0px, -1px, 0) rotate(2deg) scaleY(1); filter: brightness(0.95); }
}

@keyframes walkLegRight {
  0%, 100% { transform: translate3d(-9px, 0px, 0) rotate(20deg) scaleY(0.95); filter: brightness(0.82); }
  25% { transform: translate3d(0px, -1px, 0) rotate(2deg) scaleY(1); filter: brightness(0.95); }
  50% { transform: translate3d(9px, -2px, 0) rotate(-22deg) scaleY(1.03); filter: brightness(1.08); }
  75% { transform: translate3d(2px, -8px, 0) rotate(-4deg) scaleY(0.96); filter: brightness(1.04); }
}

@keyframes walkTorsoSwing {
  0%, 100% { transform: translateY(0px) rotate(-3deg) scaleX(0.97); }
  25% { transform: translateY(-2.5px) rotate(0deg) scaleX(1); }
  50% { transform: translateY(0px) rotate(3.5deg) scaleX(0.97); }
  75% { transform: translateY(-2.5px) rotate(0deg) scaleX(1); }
}

@keyframes runCadence {
  0%, 100% { transform: translateY(1px) rotate(9deg) scale(1.04, 0.96); }
  25% { transform: translateY(-11px) rotate(12deg) scale(0.97, 1.04); }
  50% { transform: translateY(1px) rotate(9deg) scale(1.04, 0.96); }
  75% { transform: translateY(-11px) rotate(12deg) scale(0.97, 1.04); }
}

@keyframes runLegLeft {
  0%, 100% { transform: translate3d(14px, -4px, 0) rotate(-34deg) scaleY(1.05); filter: brightness(1.12); }
  25% { transform: translate3d(4px, -12px, 0) rotate(-8deg) scaleY(0.93); filter: brightness(1.05); }
  50% { transform: translate3d(-14px, -2px, 0) rotate(32deg) scaleY(0.92); filter: brightness(0.78); }
  75% { transform: translate3d(-2px, -2px, 0) rotate(4deg) scaleY(1); filter: brightness(0.92); }
}

@keyframes runLegRight {
  0%, 100% { transform: translate3d(-14px, -2px, 0) rotate(32deg) scaleY(0.92); filter: brightness(0.78); }
  25% { transform: translate3d(-2px, -2px, 0) rotate(4deg) scaleY(1); filter: brightness(0.92); }
  50% { transform: translate3d(14px, -4px, 0) rotate(-34deg) scaleY(1.05); filter: brightness(1.12); }
  75% { transform: translate3d(4px, -12px, 0) rotate(-8deg) scaleY(0.93); filter: brightness(1.05); }
}

/* --- СТИЛИ ДЛЯ НОВОГО РАЗДЕЛА «НАСТРОЙКИ» И ПЕРЕКЛЮЧЕНИЯ МАСШТАБА (МОБИЛЬНЫЙ ВИД / ВИД ПК) --- */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.settings-card {
  background: linear-gradient(160deg, rgba(24, 17, 48, 0.92), rgba(14, 11, 28, 0.96));
  border: 1px solid rgba(192, 132, 252, 0.36);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.settings-card h4 {
  margin: 0;
  font-size: 14.5px;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(192, 132, 252, 0.2);
  padding-bottom: 8px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: #e2e8f0;
}

.setting-row small {
  display: block;
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 2px;
}

.setting-select, .setting-input {
  padding: 7px 11px;
  border-radius: 10px;
  background: #141028;
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.setting-range {
  width: 130px;
  accent-color: #ec4899;
  cursor: pointer;
}

/* Принудительный Мобильный вид (при выборе в Настройках даже на большом мониторе) */
body.force-mobile-view .app-shell {
  max-width: 460px !important;
  margin: 0 auto !important;
  border-left: 1px solid rgba(192, 132, 252, 0.35);
  border-right: 1px solid rgba(192, 132, 252, 0.35);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
}

body.force-mobile-view .chat-dock .chat-stage {
  grid-template-columns: 1fr !important;
}

body.force-mobile-view .chat-dock .chat-online-sidebar,
body.force-mobile-view .brand-text small,
body.force-mobile-view .currency-pill.crystals,
body.force-mobile-view .desktop-only {
  display: none !important;
}

body.force-mobile-view .bottom-dock {
  max-width: 440px !important;
  margin: 0 auto !important;
}

/* Принудительный Вид ПК (при выборе в Настройках даже на узком экране) */
body.force-desktop-view .chat-dock .chat-stage {
  grid-template-columns: minmax(0, 1fr) 220px !important;
}

body.force-desktop-view .chat-dock .chat-online-sidebar {
  display: flex !important;
}

body.force-desktop-view .desktop-only {
  display: flex !important;
}

body.force-desktop-view .topbar-right .currency-pill,
body.force-desktop-view .topbar-right #topEventsBtn,
body.force-desktop-view .topbar-right #topSettingsBtn {
  display: inline-flex !important;
}

/* На мобильных экранах кнопка города NEON CITY всегда видна! */
@media (max-width: 768px) {
  :root {
    --chat-height: 43dvh;
  }
  #worldLocationBadge.city-badge-btn {
    display: inline-flex !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
  }
}


/* === VISUAL POLISH v6.2: Zero clipping of owner crown & auras, natural street building blend === */
.character {
  width: 142px !important;
  height: 210px !important;
  bottom: 8px !important;
}
.character .sprite-wrap {
  left: 5px !important;
  bottom: 8px !important;
  width: 132px !important;
  height: 196px !important;
}
.character .overhead-tag {
  top: -24px !important;
  padding: 2px 8px !important;
}
.city-owner-overhead {
  top: -48px !important;
  padding: 2px 8px !important;
}
.character .char-aura-canvas,
.character .char-aura-front-canvas {
  width: 240px !important;
  height: 285px !important;
  bottom: -4px !important;
}
.building {
  background: linear-gradient(180deg, rgba(20, 14, 42, 0.42), rgba(12, 9, 26, 0.68)) !important;
  backdrop-filter: blur(2px);
}
.building .property-floating-card {
  top: -30px !important;
}

/* ==========================================================================
   ОБНОВЛЕНИЕ v6.3 (Итерация 2 по скриншотам 1, 2, 3):
   1. Лаконичный неоновый экран входа: вкладки сверху без обрезки + свайп героев
   2. Компактная шапка окон (.panel-header), компактные Настройки и нижний док
   3. Компактный чат (11–14 сообщений одновременно) + убраны кнопки ходьбы (свайп)
   4. Бесшовная естественная кинематика движения без разрывов спрайта на поясе
   ========================================================================== */

/* --- 1. НЕОНОВЫЙ ЭКРАН ВХОДА СО СВАЙП-КАРУСЕЛЬЮ И ВЕРХНИМИ ВКЛАДКАМИ --- */
.auth-overlay {
  padding: 6px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  background: radial-gradient(circle at 50% 15%, rgba(168, 85, 247, 0.28), rgba(8, 6, 18, 0.96) 72%) !important;
}

.auth-dialog {
  display: flex !important;
  flex-direction: column !important;
  width: min(980px, calc(100vw - 12px)) !important;
  max-width: calc(100vw - 12px) !important;
  max-height: calc(100dvh - 12px) !important;
  border-radius: 22px !important;
  background: linear-gradient(165deg, rgba(22, 14, 44, 0.96), rgba(10, 8, 22, 0.98)) !important;
  border: 1.5px solid rgba(236, 72, 153, 0.62) !important;
  box-shadow: 0 20px 65px rgba(0, 0, 0, 0.9), 0 0 38px rgba(168, 85, 247, 0.32), inset 0 0 24px rgba(236, 72, 153, 0.12) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.auth-top-bar {
  padding: 10px 14px 8px !important;
  background: linear-gradient(90deg, rgba(46, 16, 101, 0.65), rgba(18, 12, 38, 0.92), rgba(83, 24, 67, 0.55));
  border-bottom: 1px solid rgba(192, 132, 252, 0.32);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 15;
  backdrop-filter: blur(14px);
}

.auth-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.auth-logo {
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 0 14px rgba(236, 72, 153, 0.65);
}

.auth-gem {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  font-size: 13px;
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.75);
}

.auth-sub-pill {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #f9a8d4;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(236, 72, 153, 0.14);
  border: 1px solid rgba(236, 72, 153, 0.38);
}

/* Вкладки переключения сверху — всегда ровно в 3 колонки, никогда не выезжают за экран */
.auth-mode-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  width: 100% !important;
}

.auth-mode-tabs .auth-tab {
  min-width: 0 !important;
  width: 100% !important;
  padding: 8px 4px !important;
  border-radius: 11px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: rgba(24, 18, 48, 0.85) !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
  color: #cbd5e1 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.auth-mode-tabs .auth-tab.selected {
  background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
  border-color: #fbcfe8 !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px);
}

.auth-main-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  flex: 1;
  min-height: 0;
}

.auth-dialog[data-mode="login"] .auth-main-grid,
.auth-dialog[data-mode="reset"] .auth-main-grid {
  grid-template-columns: 1fr !important;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.auth-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  background: radial-gradient(circle at 50% 45%, rgba(168, 85, 247, 0.26), rgba(14, 10, 30, 0.65) 72%) !important;
  border-right: 1px solid rgba(192, 132, 252, 0.2);
}

.auth-right {
  padding: 12px 16px 16px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-preview {
  min-height: 0 !important;
  width: 100%;
}

.neon-carousel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.carousel-top-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  flex-wrap: wrap;
}

.carousel-gender-pills {
  display: flex;
  gap: 4px;
}

.carousel-gender-pills .channel-tab {
  padding: 3px 8px !important;
  font-size: 10.5px !important;
  border-radius: 8px !important;
}

.carousel-swipe-badge {
  font-size: 10px;
  font-weight: 800;
  color: #f9a8d4;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(236, 72, 153, 0.16);
  border: 1px solid rgba(236, 72, 153, 0.42);
  animation: pulseBadgeGlow 2s ease-in-out infinite alternate;
}

@keyframes pulseBadgeGlow {
  0% { box-shadow: 0 0 6px rgba(236, 72, 153, 0.25); }
  100% { box-shadow: 0 0 14px rgba(236, 72, 153, 0.65); }
}

.preview-stage.swipe-stage {
  position: relative !important;
  width: 100% !important;
  height: 225px !important;
  min-height: 225px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 50%, rgba(192, 132, 252, 0.22), rgba(10, 8, 24, 0.78) 74%);
  border: 1px solid rgba(192, 132, 252, 0.32);
}

.neon-holo-ring {
  position: absolute;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  border: 1.5px dashed var(--preview-color, #ec4899);
  box-shadow: 0 0 28px var(--preview-color, #ec4899), inset 0 0 22px var(--preview-color, #ec4899);
  opacity: 0.48;
  animation: orbSpin 12s linear infinite;
  pointer-events: none;
}

.swipe-stage .preview-character {
  width: 138px !important;
  height: 205px !important;
  margin: 0 auto !important;
}

.swipe-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 14, 42, 0.9);
  border: 1.5px solid rgba(236, 72, 153, 0.75);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.55);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.swipe-arrow-btn.left { left: 8px; }
.swipe-arrow-btn.right { right: 8px; }

.swipe-arrow-btn:hover {
  transform: translateY(-50%) scale(1.1);
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  box-shadow: 0 0 24px rgba(236, 72, 153, 0.9);
}

.swipe-slide-next {
  animation: swipeSlideNext 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.swipe-slide-prev {
  animation: swipeSlidePrev 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes swipeSlideNext {
  0% { opacity: 0.2; transform: translateX(38px) scale(0.92); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes swipeSlidePrev {
  0% { opacity: 0.2; transform: translateX(-38px) scale(0.92); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

.carousel-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 2px 0;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(192, 132, 252, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
}

.carousel-dot.active {
  width: 22px;
  background: linear-gradient(90deg, #ec4899, #38bdf8);
  box-shadow: 0 0 10px #ec4899;
}

.preview-copy {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  text-align: center;
}

.preview-title-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.preview-title-line strong {
  font-size: 14.5px !important;
  color: #fff;
}

.preview-title-line strong span {
  color: #f472b6;
}

.preview-tag-pill {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
  font-size: 9.5px;
  font-weight: 700;
}

.preview-desc-line {
  font-size: 11px !important;
  color: #cbd5e1 !important;
  margin: 2px 0 5px !important;
  line-height: 1.3 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-anim-pills {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.auth-intro-block.compact h3 {
  font-size: 17px !important;
  margin: 0 0 2px !important;
}

.auth-intro-block.compact p {
  font-size: 11.5px !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}

.creator-form.compact-top {
  margin-top: 4px !important;
}

.creator-form .form-field {
  margin-bottom: 8px !important;
}

.creator-form .form-field label {
  margin-bottom: 3px !important;
  font-size: 11px !important;
}

.creator-form .form-field input {
  padding: 9px 11px !important;
  font-size: 12.5px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(192, 132, 252, 0.38) !important;
  background: rgba(15, 11, 30, 0.9) !important;
}

.neon-pulse-btn {
  width: 100%;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #38bdf8) !important;
  background-size: 200% 200% !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.4px;
  box-shadow: 0 0 22px rgba(236, 72, 153, 0.55) !important;
  animation: neonBtnFlow 4s ease infinite;
}

@keyframes neonBtnFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 860px) {
  .auth-main-grid {
    grid-template-columns: 1fr !important;
  }
  .auth-left {
    border-right: none !important;
    border-bottom: 1px solid rgba(192, 132, 252, 0.2);
    padding: 8px 10px !important;
  }
  .auth-right {
    padding: 10px 12px 14px !important;
  }
  .preview-stage.swipe-stage {
    height: 195px !important;
    min-height: 195px !important;
  }
  .swipe-stage .preview-character {
    width: 124px !important;
    height: 184px !important;
  }
  .auth-sub-pill {
    display: none;
  }
}

/* --- 2. КОМПАКТНАЯ ШАПКА МОДАЛЬНЫХ ОКОН, КОМПАКТНЫЕ НАСТРОЙКИ И ИСПРАВЛЕННЫЙ НИЖНИЙ ДОК --- */
.panel-header {
  padding: 8px 12px !important;
  min-height: 44px !important;
  max-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.panel-header .panel-kicker {
  display: none !important;
}

.panel-header h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.panel-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.panel-rank-pill {
  padding: 3px 8px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

.close-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.panel-content {
  padding: 10px 12px !important;
}

/* Компактные карточки в Настройках */
.settings-grid.compact-settings {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 8px !important;
}

.compact-settings .settings-card {
  padding: 8px 10px !important;
  gap: 5px !important;
  border-radius: 12px !important;
}

.compact-settings .settings-card h4 {
  font-size: 12.5px !important;
  padding-bottom: 4px !important;
  margin: 0 !important;
}

.compact-settings .setting-row {
  min-height: 24px !important;
  padding: 1px 0 !important;
  font-size: 11.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  cursor: pointer;
}

.compact-settings .setting-row input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: #ec4899;
  flex-shrink: 0;
}

.compact-settings .setting-select {
  padding: 3px 7px !important;
  font-size: 11px !important;
  border-radius: 7px !important;
}

.compact-settings .setting-range {
  width: 95px !important;
  height: 5px !important;
}

.compact-settings .compact-btn {
  padding: 5px 8px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}

.settings-mini-stats {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(14, 10, 28, 0.85);
  border: 1px solid rgba(192, 132, 252, 0.22);
  font-size: 10.5px;
  font-weight: 700;
  color: #cbd5e1;
}

.settings-quick-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

/* Нижняя панель навигации — жёсткая защита от выезда кнопки Настройки/Ещё за экран */
.bottom-dock {
  left: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
  width: auto !important;
  max-width: calc(100vw - 12px) !important;
  height: 54px !important;
  padding: 3px 4px !important;
  gap: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.bottom-dock .dock-btn {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  padding: 2px 1px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  gap: 1px !important;
  overflow: hidden !important;
}

.bottom-dock .dock-btn .dock-icon {
  font-size: 16px !important;
  line-height: 1 !important;
}

.bottom-dock .dock-btn small {
  font-size: 8.5px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
}

@media (max-width: 540px) {
  .panel-rank-pill {
    display: none !important;
  }
}

/* --- 3. КОМПАКТНЫЙ ЧАТ (ВМЕЩАЕТ 11–14 СООБЩЕНИЙ ОДНОВРЕМЕННО) + СВАЙП СЦЕНЫ --- */
.walk-controls, #walkControlsBar {
  display: none !important;
}

.scene {
  touch-action: pan-y;
  cursor: grab;
}

.scene:active {
  cursor: grabbing;
}

.chat-dock {
  --chat-height: 45dvh;
  flex: 0 0 var(--chat-height) !important;
  height: var(--chat-height) !important;
  min-height: 275px !important;
}

.chat-dock .chat-messages {
  padding: 4px 6px !important;
  gap: 2px !important;
}

.chat-message.compact-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 6px !important;
  min-height: 20px !important;
  border-radius: 6px !important;
  background: rgba(22, 16, 44, 0.55) !important;
  border: 1px solid rgba(192, 132, 252, 0.12) !important;
  margin: 0 !important;
}

.chat-message.compact-row .msg-avatar {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  border-radius: 50% !important;
  border-width: 1px !important;
  font-size: 9px !important;
}

.chat-message.compact-row .msg-body {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 100% !important;
  width: 100% !important;
}

.msg-inline-line {
  flex: 1;
  min-width: 0;
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: #f1f5f9;
  word-break: break-word;
}

.msg-sys-tag {
  color: #f472b6;
  font-size: 11px;
  margin-right: 3px;
}

.chat-message.compact-row .msg-nick-btn {
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-right: 3px;
}

.chat-message.compact-row .msg-rating-pill {
  font-size: 9.5px !important;
  color: #c4b5fd;
  margin-right: 2px;
}

.msg-text-inline {
  color: #f8fafc;
}

.msg-right-meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  color: #94a3b8;
  flex-shrink: 0;
}

.msg-mini-btn.icon-only {
  padding: 0 4px !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
  opacity: 0.65;
}

.chat-compose {
  padding: 4px 6px !important;
}

.chat-compose input {
  padding: 5px 9px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
  height: 28px !important;
}

.chat-compose .send-btn {
  padding: 5px 11px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  height: 28px !important;
}

.quick-emoji-btn {
  padding: 3px 6px !important;
  font-size: 10.5px !important;
}

/* --- 4. БЕСШОВНАЯ И ПЛАВНАЯ 2D-АНИМАЦИЯ ПЕРЕДВИЖЕНИЯ (БЕЗ РАЗРЫВОВ НА ПОЯСЕ И ГРУДИ) --- */
.anime-art .art-front-arm,
.anime-art .art-head {
  display: none !important;
}

/* Цельный верхний слой от макушки до 72% высоты (голова, плечи, руки, талия, юбка/плащ — 100% без швов!) */
.anime-art .art-torso {
  clip-path: polygon(0 0, 100% 0, 100% 74%, 0 74%) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 69%, rgba(0,0,0,0.92) 72%, transparent 74%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 69%, rgba(0,0,0,0.92) 72%, transparent 74%) !important;
  z-index: 4 !important;
  transform-origin: 50% 60% !important;
  transform: translateY(var(--torso-y, 0px)) rotate(var(--torso-rot, 0deg)) !important;
}

/* Левая и правая голень/ботинок (63%..100%) плавно шагают из-под цельного подола/корпуса */
.anime-art .art-left-leg {
  clip-path: polygon(2% 63%, 51% 63%, 52% 100%, 2% 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 63%, #000 67%, #000 100%) !important;
  mask-image: linear-gradient(180deg, transparent 63%, #000 67%, #000 100%) !important;
  z-index: var(--leg-l-z, 3) !important;
  transform-origin: 45% 67% !important;
  transform: translate3d(var(--leg-l-x, 0px), var(--leg-l-y, 0px), 0) rotate(var(--leg-l-rot, 0deg)) !important;
  filter: none !important;
}

.anime-art .art-right-leg {
  clip-path: polygon(49% 63%, 98% 63%, 98% 100%, 48% 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 63%, #000 67%, #000 100%) !important;
  mask-image: linear-gradient(180deg, transparent 63%, #000 67%, #000 100%) !important;
  z-index: var(--leg-r-z, 2) !important;
  transform-origin: 55% 67% !important;
  transform: translate3d(var(--leg-r-x, 0px), var(--leg-r-y, 0px), 0) rotate(var(--leg-r-rot, 0deg)) !important;
  filter: none !important;
}

.character .shadow {
  transform: scaleX(var(--shadow-scale, 1));
}

.character .foot-shadow-left {
  transform: translateX(var(--foot-l-x, 0px));
}

.character .foot-shadow-right {
  transform: translateX(var(--foot-r-x, 0px));
}

/* Для превью и витрины (где нет JS-перемещения по координате) — чистая бесшовная анимация шага/бега */
@keyframes walkCadence {
  0%, 100% { transform: translateY(0px) rotate(2.2deg); }
  25% { transform: translateY(-4.5px) rotate(3.2deg); }
  50% { transform: translateY(0px) rotate(2.2deg); }
  75% { transform: translateY(-4.5px) rotate(3.2deg); }
}

@keyframes walkLegLeft {
  0%, 100% { transform: translate3d(5px, 0px, 0) rotate(-8deg); }
  25% { transform: translate3d(1px, -5.5px, 0) rotate(-2deg); }
  50% { transform: translate3d(-5px, 0px, 0) rotate(8deg); }
  75% { transform: translate3d(-1px, 0px, 0) rotate(1deg); }
}

@keyframes walkLegRight {
  0%, 100% { transform: translate3d(-5px, 0px, 0) rotate(8deg); }
  25% { transform: translate3d(-1px, 0px, 0) rotate(1deg); }
  50% { transform: translate3d(5px, 0px, 0) rotate(-8deg); }
  75% { transform: translate3d(1px, -5.5px, 0) rotate(-2deg); }
}

@keyframes walkTorsoSwing {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50% { transform: translateY(-1.5px) rotate(1deg); }
}

@keyframes runCadence {
  0%, 100% { transform: translateY(0.5px) rotate(5.5deg); }
  25% { transform: translateY(-7.5px) rotate(7deg); }
  50% { transform: translateY(0.5px) rotate(5.5deg); }
  75% { transform: translateY(-7.5px) rotate(7deg); }
}

@keyframes runLegLeft {
  0%, 100% { transform: translate3d(8px, -1px, 0) rotate(-13deg); }
  25% { transform: translate3d(2px, -9px, 0) rotate(-4deg); }
  50% { transform: translate3d(-8px, 0px, 0) rotate(13deg); }
  75% { transform: translate3d(-2px, 0px, 0) rotate(2deg); }
}

@keyframes runLegRight {
  0%, 100% { transform: translate3d(-8px, 0px, 0) rotate(13deg); }
  25% { transform: translate3d(-2px, 0px, 0) rotate(2deg); }
  50% { transform: translate3d(8px, -1px, 0) rotate(-13deg); }
  75% { transform: translate3d(2px, -9px, 0) rotate(-4deg); }
}


/* === HOTFIX v6.4: Mobile Chat 11+ rows with zero overlap, Mobile Auth zero clip, Pivot-Locked Seamless Legs === */

/* 1. Исправление наложения строк в компактном чате (flex-shrink: 0 + чёткая высота строки) */
.chat-dock .chat-messages {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  padding: 4px 6px !important;
  overflow-y: auto !important;
}

.chat-message.compact-row {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  height: auto !important;
  min-height: 20px !important;
  padding: 2px 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 6px !important;
  background: rgba(20, 15, 40, 0.62) !important;
  border: 1px solid rgba(192, 132, 252, 0.12) !important;
  overflow: hidden !important;
}

.chat-message.compact-row .msg-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.chat-message.compact-row .msg-inline-line {
  font-size: 11px !important;
  line-height: 1.22 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

/* При наведении или тапе на сообщение длинный текст раскрывается полностью */
.chat-message.compact-row:hover .msg-inline-line,
.chat-message.compact-row:active .msg-inline-line {
  white-space: normal !important;
  overflow: visible !important;
}

/* 2. Исправление экрана входа на телефоне (никакой обрезки сверху или у кнопки Восстановление) */
.auth-mode-tabs .auth-tab {
  font-size: 11px !important;
  padding: 7px 2px !important;
  letter-spacing: -0.2px !important;
}

.auth-main-grid {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

@media (min-width: 861px) {
  .auth-dialog[data-mode="register"] .auth-main-grid {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
  }
}

.auth-left, .auth-right {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
}

.auth-left:after {
  display: none !important;
}

/* 3. Масштаб персонажей на улице для мобильного экрана, чтобы плашка ника над головой никогда не обрезалась */
@media (max-width: 768px) {
  .chat-dock {
    --chat-height: 47dvh !important;
    min-height: 295px !important;
  }
  .character {
    width: 116px !important;
    height: 172px !important;
    bottom: 6px !important;
  }
  .character .sprite-wrap {
    left: 4px !important;
    bottom: 6px !important;
    width: 108px !important;
    height: 160px !important;
  }
  .character .char-aura-canvas,
  .character .char-aura-front-canvas {
    width: 195px !important;
    height: 230px !important;
    bottom: -4px !important;
  }
  .character .overhead-tag {
    top: -20px !important;
    padding: 1px 6px !important;
  }
  .overhead-nick {
    font-size: 10px !important;
  }
  .overhead-rating {
    font-size: 8.5px !important;
  }
  .city-owner-overhead {
    top: -40px !important;
    padding: 1px 6px !important;
  }
}

/* 4. Бесшовное крепление ног к корпусу в точке y=62% (только rotate + scaleY без смещения точки стыка!) */
.anime-art .art-torso {
  clip-path: polygon(0 0, 100% 0, 100% 68%, 0 68%) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 63%, rgba(0,0,0,0.95) 66%, transparent 68%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 63%, rgba(0,0,0,0.95) 66%, transparent 68%) !important;
  z-index: 4 !important;
  transform-origin: 50% 58% !important;
  transform: translateY(var(--torso-y, 0px)) rotate(var(--torso-rot, 0deg)) !important;
}

.anime-art .art-left-leg {
  clip-path: polygon(0% 58%, 51% 58%, 52% 100%, 0% 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 58%, #000 62%, #000 100%) !important;
  mask-image: linear-gradient(180deg, transparent 58%, #000 62%, #000 100%) !important;
  z-index: var(--leg-l-z, 3) !important;
  transform-origin: 45% 62% !important;
  transform: rotate(var(--leg-l-rot, 0deg)) scaleY(var(--leg-l-scale, 1)) !important;
  filter: none !important;
}

.anime-art .art-right-leg {
  clip-path: polygon(49% 58%, 100% 58%, 100% 100%, 48% 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 58%, #000 62%, #000 100%) !important;
  mask-image: linear-gradient(180deg, transparent 58%, #000 62%, #000 100%) !important;
  z-index: var(--leg-r-z, 2) !important;
  transform-origin: 55% 62% !important;
  transform: rotate(var(--leg-r-rot, 0deg)) scaleY(var(--leg-r-scale, 1)) !important;
  filter: none !important;
}

@keyframes walkLegLeft {
  0%, 100% { transform: rotate(-10deg) scaleY(0.98); }
  25% { transform: rotate(-2deg) scaleY(0.92); }
  50% { transform: rotate(10deg) scaleY(1); }
  75% { transform: rotate(2deg) scaleY(0.99); }
}

@keyframes walkLegRight {
  0%, 100% { transform: rotate(10deg) scaleY(1); }
  25% { transform: rotate(2deg) scaleY(0.99); }
  50% { transform: rotate(-10deg) scaleY(0.98); }
  75% { transform: rotate(-2deg) scaleY(0.92); }
}

@keyframes runLegLeft {
  0%, 100% { transform: rotate(-16deg) scaleY(0.96); }
  25% { transform: rotate(-4deg) scaleY(0.89); }
  50% { transform: rotate(16deg) scaleY(1); }
  75% { transform: rotate(3deg) scaleY(0.98); }
}

@keyframes runLegRight {
  0%, 100% { transform: rotate(16deg) scaleY(1); }
  25% { transform: rotate(3deg) scaleY(0.98); }
  50% { transform: rotate(-16deg) scaleY(0.96); }
  75% { transform: rotate(-4deg) scaleY(0.89); }
}

/* === MICRO-POLISH v6.5: 100% single-screen mobile auth + 12 full chat rows on mobile === */
@media (max-width: 768px) {
  .auth-top-bar {
    padding: 7px 10px 6px !important;
    gap: 5px !important;
  }
  .auth-logo {
    font-size: 15.5px !important;
  }
  .carousel-top-controls {
    justify-content: center !important;
    gap: 4px !important;
  }
  .carousel-swipe-badge {
    display: none !important;
  }
  .preview-stage.swipe-stage {
    height: 156px !important;
    min-height: 156px !important;
  }
  .swipe-stage .preview-character {
    width: 102px !important;
    height: 150px !important;
  }
  .neon-holo-ring {
    width: 136px !important;
    height: 136px !important;
  }
  .preview-desc-line {
    display: none !important;
  }
  .auth-intro-block.compact h3 {
    font-size: 14.5px !important;
  }
  .auth-intro-block.compact p {
    display: none !important;
  }
  .creator-form .form-field {
    margin-bottom: 5px !important;
  }
  .creator-form .form-field input {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
  .neon-pulse-btn {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }
  /* 12 сообщений в чате на мобильном экране + максимум места под текст */
  .chat-dock .chat-messages {
    padding: 3px 5px !important;
    gap: 1.5px !important;
  }
  .chat-message.compact-row {
    min-height: 18px !important;
    padding: 1.5px 5px !important;
    gap: 4px !important;
  }
  .chat-message.compact-row .msg-avatar {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }
  .chat-message.compact-row .msg-inline-line {
    font-size: 10.5px !important;
    line-height: 1.15 !important;
  }
  .chat-message.compact-row .msg-mini-btn.icon-only {
    display: none !important;
  }
  .chat-message.compact-row:hover .msg-mini-btn.icon-only {
    display: inline-block !important;
  }
}


/* === ОБНОВЛЕНИЕ ЧАТА: ПЕРЕНОС ТЕКСТА НА НОВУЮ СТРОКУ + СЧЁТЧИК 200 СИМВОЛОВ === */
.chat-message.compact-row {
  align-items: flex-start !important;
  height: auto !important;
  min-height: 22px !important;
  padding: 3px 7px !important;
  overflow: visible !important;
}

.chat-message.compact-row .msg-avatar {
  margin-top: 1px !important;
}

.chat-message.compact-row .msg-body {
  align-items: flex-start !important;
  overflow: visible !important;
}

.chat-message.compact-row .msg-inline-line {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.34 !important;
}

.chat-message.compact-row .msg-text-inline {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.chat-message.compact-row .msg-right-meta {
  margin-top: 1px !important;
  align-self: flex-start !important;
}

.chat-char-count {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 700;
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 768px) {
  .chat-char-count {
    font-size: 9.5px;
  }
}



/* ==========================================================================
   ФИНАЛЬНОЕ ОБНОВЛЕНИЕ v6.5 (ПО 4 ПУНКТАМ ФИДБЕКА ПОЛЬЗОВАТЕЛЯ):
   1) Плавная 60-FPS анимация бега и ходьбы (без рывков камеры, без промежуточных
      остановок на 25%/75%, без медленного CPU ctx.filter blur и без двоения)
   2) Экран входа (auth-overlay) заполняет экран без пустых полей сверху и снизу,
      а персонаж в карусели виден целиком с макушки до обуви
   3) Анимированный спичбабл (облачко речи с эффектом печатающегося текста)
      появляется над персонажем при отправке сообщения в чат
   4) На главном экране в мобильной версии уменьшен масштаб персонажей и зданий,
      чтобы помещалось больше героев и окружения улицы
   ========================================================================== */

/* --- 1. АППАРАТНОЕ СГЛАЖИВАНИЕ АУР И ИДЕАЛЬНО ПЛАВНЫЙ БЕГ / ШАГ --- */
.character .char-aura-canvas {
  filter: blur(1.6px);
  will-change: transform;
}
.character .char-aura-front-canvas {
  filter: blur(0.5px);
  will-change: transform;
}

/* Отключаем двоение силуэта (.art-ghost-trail), создававшее визуальную рябь при беге */
.anime-art .art-ghost-trail,
.anime-art .art-head,
.anime-art .art-front-arm {
  display: none !important;
}

/* Плавные гармонические (0% -> 50% -> 100%) CSS-анимации для превью (Экран входа, Профиль, Витрина аур)
   Без промежуточных точек 25%/75%, чтобы ease-in-out никогда не тормозил ногу посреди маха! */
@keyframes walkCadence {
  0%, 100% { transform: translate3d(0, 0px, 0) rotate(2deg); }
  50% { transform: translate3d(0, -3.5px, 0) rotate(3deg); }
}

@keyframes walkLegLeft {
  0%, 100% { transform: rotate(-8.5deg) scaleY(0.98); }
  50% { transform: rotate(8.5deg) scaleY(1); }
}

@keyframes walkLegRight {
  0%, 100% { transform: rotate(8.5deg) scaleY(1); }
  50% { transform: rotate(-8.5deg) scaleY(0.98); }
}

@keyframes walkTorsoSwing {
  0%, 100% { transform: translate3d(0, 0px, 0) rotate(-0.8deg); }
  50% { transform: translate3d(0, -1.2px, 0) rotate(0.8deg); }
}

@keyframes runCadence {
  0%, 100% { transform: translate3d(0, 0px, 0) rotate(5deg); }
  50% { transform: translate3d(0, -5px, 0) rotate(6.5deg); }
}

@keyframes runLegLeft {
  0%, 100% { transform: rotate(-13deg) scaleY(0.95); }
  50% { transform: rotate(13deg) scaleY(1); }
}

@keyframes runLegRight {
  0%, 100% { transform: rotate(13deg) scaleY(1); }
  50% { transform: rotate(-13deg) scaleY(0.95); }
}

@keyframes runTorsoLean {
  0%, 100% { transform: translate3d(0, 0px, 0) rotate(1.2deg); }
  50% { transform: translate3d(0, -1.8px, 0) rotate(2.4deg); }
}

@keyframes runCapeFlow {
  0%, 100% { transform: rotate(-2deg) skewX(-2.5deg); }
  50% { transform: rotate(-4.5deg) skewX(-5deg); }
}

.character.state-walk:not(.proc-kinematics) .sprite-wrap {
  animation: walkCadence 0.42s ease-in-out infinite !important;
}
.character.state-walk:not(.proc-kinematics) .art-left-leg {
  animation: walkLegLeft 0.84s ease-in-out infinite !important;
}
.character.state-walk:not(.proc-kinematics) .art-right-leg {
  animation: walkLegRight 0.84s ease-in-out infinite !important;
}
.character.state-walk:not(.proc-kinematics) .art-torso {
  animation: walkTorsoSwing 0.84s ease-in-out infinite !important;
}

.character.state-run:not(.proc-kinematics) .sprite-wrap {
  animation: runCadence 0.29s ease-in-out infinite !important;
}
.character.state-run:not(.proc-kinematics) .art-left-leg {
  animation: runLegLeft 0.58s ease-in-out infinite !important;
}
.character.state-run:not(.proc-kinematics) .art-right-leg {
  animation: runLegRight 0.58s ease-in-out infinite !important;
}
.character.state-run:not(.proc-kinematics) .art-torso {
  animation: runTorsoLean 0.58s ease-in-out infinite !important;
}
.character.state-run:not(.proc-kinematics) .art-back-hair {
  animation: runCapeFlow 0.58s ease-in-out infinite !important;
}

/* --- 2. ЭКРАН ВХОДА / РЕГИСТРАЦИИ: БЕЗ ПУСТЫХ ПОЛЕЙ СВЕРХУ И СНИЗУ + ПЕРСОНАЖ ВИДЕН ЦЕЛИКОМ --- */
.auth-overlay {
  padding: 6px !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.auth-dialog {
  min-height: calc(100dvh - 12px) !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.auth-main-grid {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
}

@media (min-width: 861px) {
  .auth-dialog[data-mode="register"] .auth-main-grid {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    align-items: center !important;
  }
}

/* Увеличиваем окно превью и масштабируем внутренний .sprite-wrap так, чтобы персонаж помещался ЦЕЛИКОМ с запасом над головой! */
.preview-stage.swipe-stage {
  height: 248px !important;
  min-height: 248px !important;
  padding: 14px 44px 10px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.swipe-stage .preview-character {
  width: 132px !important;
  height: 214px !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  margin: 0 auto !important;
  position: relative !important;
}

.swipe-stage .preview-character .sprite-wrap {
  left: 5px !important;
  bottom: 8px !important;
  width: 122px !important;
  height: 192px !important;
}

.swipe-stage .preview-character .char-aura-canvas,
.swipe-stage .preview-character .char-aura-front-canvas {
  width: 210px !important;
  height: 240px !important;
  bottom: -4px !important;
}

.swipe-stage .preview-character .shadow {
  left: 24px !important;
  width: 84px !important;
  bottom: 4px !important;
}

@media (max-width: 768px) {
  .auth-overlay {
    padding: 4px !important;
  }
  .auth-dialog {
    width: calc(100vw - 8px) !important;
    min-height: calc(100dvh - 8px) !important;
    border-radius: 18px !important;
  }
  .preview-stage.swipe-stage {
    height: 224px !important;
    min-height: 224px !important;
    padding: 12px 42px 8px !important;
  }
  .swipe-stage .preview-character {
    width: 120px !important;
    height: 196px !important;
  }
  .swipe-stage .preview-character .sprite-wrap {
    left: 4px !important;
    bottom: 6px !important;
    width: 112px !important;
    height: 176px !important;
  }
  .swipe-stage .preview-character .char-aura-canvas,
  .swipe-stage .preview-character .char-aura-front-canvas {
    width: 190px !important;
    height: 220px !important;
    bottom: -4px !important;
  }
  .swipe-stage .preview-character .shadow {
    left: 20px !important;
    width: 80px !important;
    bottom: 4px !important;
  }
  .neon-holo-ring {
    width: 165px !important;
    height: 165px !important;
  }
}

/* --- 3. АНИМИРОВАННЫЙ СПИЧБАБЛ С ПЕЧАТАЮЩИМСЯ ТЕКСТОМ НАД ПЕРСОНАЖЕМ --- */
#characterLayer .character {
  width: 104px !important;
  height: 158px !important;
  bottom: 6px !important;
}
#characterLayer .character .sprite-wrap {
  left: 3px !important;
  bottom: 5px !important;
  width: 98px !important;
  height: 148px !important;
}
#characterLayer .character .char-aura-canvas,
#characterLayer .character .char-aura-front-canvas {
  width: 168px !important;
  height: 196px !important;
  bottom: -4px !important;
}
#characterLayer .character .shadow {
  left: 16px !important;
  width: 72px !important;
  bottom: 3px !important;
}
#characterLayer .character .overhead-tag {
  top: -22px !important;
  padding: 2px 8px !important;
}
#characterLayer .character .city-owner-overhead {
  top: -44px !important;
}

.character-speech-bubble {
  position: absolute;
  bottom: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  min-width: 105px;
  max-width: 215px;
  padding: 6px 12px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(20, 14, 44, 0.96), rgba(40, 20, 74, 0.96));
  border: 1.5px solid #f472b6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 18px rgba(236, 72, 153, 0.6);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.32;
  text-align: center;
  word-break: break-word;
  white-space: normal;
  z-index: 32;
  pointer-events: none;
  animation: speechBubblePop 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, speechBubbleFloat 2.2s ease-in-out 0.26s infinite alternate;
}

.character.city-owner-char .character-speech-bubble {
  bottom: calc(100% + 40px);
  border-color: #fde047;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 20px rgba(251, 191, 36, 0.65);
}

.character-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #f472b6;
}

.character.city-owner-char .character-speech-bubble::after {
  border-top-color: #fde047;
}

.speech-bubble-caret {
  display: inline-block;
  width: 2px;
  height: 11px;
  margin-left: 2px;
  vertical-align: -1px;
  background: #f472b6;
  animation: caretBlink 0.5s steps(2) infinite;
}

.speech-bubble-caret.done {
  display: none;
}

.character-speech-bubble.fading-out {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px) scale(0.92);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

@keyframes speechBubblePop {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.45); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0px) scale(1); }
}

@keyframes speechBubbleFloat {
  0% { transform: translateX(-50%) translateY(0px); }
  100% { transform: translateX(-50%) translateY(-4px); }
}

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

/* --- 4. УМЕНЬШЕННЫЙ МАСШТАБ НА ГЛАВНОМ ЭКРАНЕ В МОБИЛЬНОЙ ВЕРСИИ (БОЛЬШЕ ПЕРСОНАЖЕЙ И ОКРУЖЕНИЯ) --- */
@media (max-width: 768px) {
  .scene[data-location="street"] .back-layer {
    background-size: 100% 100% !important;
    background-position: center bottom !important;
    transform: translate3d(var(--parallax-back, 0px), 0, 0) scale(1) !important;
  }
  .front-layer {
    height: 38px !important;
  }
  .ground-line {
    bottom: 28px !important;
  }
  #characterLayer .character {
    width: 82px !important;
    height: 124px !important;
    bottom: 5px !important;
  }
  #characterLayer .character .sprite-wrap {
    left: 3px !important;
    bottom: 5px !important;
    width: 76px !important;
    height: 114px !important;
  }
  #characterLayer .character .char-aura-canvas,
  #characterLayer .character .char-aura-front-canvas {
    width: 136px !important;
    height: 162px !important;
    bottom: -3px !important;
  }
  #characterLayer .character .shadow {
    left: 14px !important;
    width: 54px !important;
    height: 8px !important;
    bottom: 2px !important;
  }
  #characterLayer .character .foot-shadow-left,
  #characterLayer .character .foot-shadow-right {
    width: 16px !important;
    height: 5px !important;
    bottom: 3px !important;
  }
  #characterLayer .character .overhead-tag {
    top: -19px !important;
    padding: 1px 5px !important;
    transform: translateX(-50%) scale(0.8) !important;
  }
  #characterLayer .character .city-owner-overhead {
    top: -36px !important;
    padding: 1px 5px !important;
    transform: translateX(-50%) scale(0.78) !important;
  }
  #characterLayer .character .character-speech-bubble {
    bottom: calc(100% + 18px) !important;
    width: max-content !important;
    min-width: 96px !important;
    max-width: 168px !important;
    padding: 5px 10px !important;
    font-size: 10.5px !important;
    border-radius: 11px !important;
  }
  #characterLayer .character.city-owner-char .character-speech-bubble {
    bottom: calc(100% + 36px) !important;
  }
  .building {
    bottom: 18px !important;
  }
  .building .property-floating-card {
    top: -22px !important;
    padding: 2px 6px !important;
    transform: translateX(-50%) scale(0.8) !important;
  }
  .event-orb-wrapper {
    left: 8px !important;
    bottom: 8px !important;
  }
  .event-orb-circle {
    width: 46px !important;
    height: 46px !important;
  }
  .event-orb-icon {
    font-size: 13px !important;
  }
  .event-orb-title, .event-orb-timer {
    font-size: 7px !important;
  }
}

/* То же уменьшение масштаба при выборе «Мобильный вид» в Настройках */
body.force-mobile-view .scene[data-location="street"] .back-layer {
  background-size: 100% 100% !important;
  background-position: center bottom !important;
  transform: translate3d(var(--parallax-back, 0px), 0, 0) scale(1) !important;
}
body.force-mobile-view .front-layer {
  height: 38px !important;
}
body.force-mobile-view #characterLayer .character {
  width: 82px !important;
  height: 124px !important;
  bottom: 5px !important;
}
body.force-mobile-view #characterLayer .character .sprite-wrap {
  left: 3px !important;
  bottom: 5px !important;
  width: 76px !important;
  height: 114px !important;
}
body.force-mobile-view #characterLayer .character .char-aura-canvas,
body.force-mobile-view #characterLayer .character .char-aura-front-canvas {
  width: 136px !important;
  height: 162px !important;
  bottom: -3px !important;
}
body.force-mobile-view #characterLayer .character .overhead-tag {
  top: -19px !important;
  padding: 1px 5px !important;
  transform: translateX(-50%) scale(0.8) !important;
}
body.force-mobile-view #characterLayer .character .city-owner-overhead {
  top: -36px !important;
  padding: 1px 5px !important;
  transform: translateX(-50%) scale(0.78) !important;
}
body.force-mobile-view .building {
  bottom: 18px !important;
}


/* ==========================================================================
   ОБНОВЛЕНИЕ v6.3:
   1. Реальные аниме-иллюстрации построек 3 уровней (малые приватные дома,
      средние особняки, огромные замки гильдий) + вход внутрь со своим интерьером!
   2. Меню «Города и Перемещение» по кнопке NEON CITY (Топ популярных городов,
      переход по вводу названия, создание/покупка своего города без домов).
   ========================================================================== */

.scene[data-location="interior"] .back-layer {
  position: absolute;
  inset: 0;
  background-size: cover !important;
  background-position: center center !important;
  transform: none !important;
  transition: background-image 0.35s ease;
}

.scene[data-location="interior"] .building-layer {
  display: none !important;
}

.interior-overlay {
  position: absolute;
  top: 10px;
  left: 14px;
  right: 14px;
  z-index: 22;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.interior-overlay[hidden] {
  display: none !important;
}

.interior-hud-banner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 16px;
  background: rgba(14, 10, 30, 0.90);
  border: 1.5px solid rgba(244, 114, 182, 0.65);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 22px rgba(236, 72, 153, 0.3);
  backdrop-filter: blur(14px);
  max-width: 760px;
  width: 100%;
  flex-wrap: wrap;
}

.interior-thumb {
  width: 58px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #f472b6;
  flex-shrink: 0;
}

.interior-hud-meta {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.interior-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #f472b6;
  text-transform: uppercase;
}

.interior-hud-meta strong {
  font-size: 14px;
  color: #fff;
}

.interior-hud-meta small {
  font-size: 11px;
  color: #fde047;
}

.interior-hud-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Постройки на улице с реальными аниме-иллюстрациями и разным масштабом по уровню */
.building.is-property {
  border-radius: 16px 16px 6px 6px !important;
  overflow: visible !important;
  background: rgba(12, 9, 26, 0.85) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.85), 0 0 24px color-mix(in srgb, var(--prop-accent, #f472b6) 40%, transparent) !important;
}

.building-photo-wrap {
  width: 100%;
  height: 100%;
  border-radius: 14px 14px 4px 4px;
  overflow: hidden;
  position: relative;
}

.building-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.building:hover .building-photo-wrap img {
  transform: scale(1.05);
}

.building-enter-pill {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.92), rgba(236, 72, 153, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75);
}

/* Превью экстерьера + миниатюра интерьера на карточках построек в меню */
.property-card-visual {
  height: 172px !important;
}

.property-card-visual img.prop-ext-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prop-int-preview {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 86px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid #fde047;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85);
  background: #090714;
}

.prop-int-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prop-int-preview span {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(10, 8, 22, 0.86);
  color: #fde047;
  font-size: 8.5px;
  font-weight: 800;
  text-align: center;
  padding: 1px 2px;
}

/* Сетка популярных городов в окне «Города и Перемещение» */
.cities-top-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 12px;
}

.city-select-card {
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(28, 20, 56, 0.94), rgba(14, 11, 28, 0.98));
  border: 1.5px solid rgba(192, 132, 252, 0.38);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.city-select-card:hover {
  transform: translateY(-2px);
  border-color: #f472b6;
  box-shadow: 0 10px 26px rgba(236, 72, 153, 0.28);
}

.city-select-card.active-city {
  border-color: #4ade80;
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.28);
}

/* Компактное расположение баннера интерьера справа вверху, чтобы не перекрывать таблички над головами */
.interior-overlay {
  justify-content: flex-end !important;
  top: 8px !important;
  right: 12px !important;
  left: 12px !important;
}
.interior-hud-banner {
  max-width: 620px !important;
  padding: 6px 12px !important;
}