/* ─────────────────────────────────────────────
   حياة — عالم بصري أصلي (ليس قوائم، وليس ذا سيمز)
   إضاءة غرف، شارع حيّ، شخصية تمشي، نهار/ليل من ساعات اليوم
   ───────────────────────────────────────────── */

.hayat-modal.hayat-modal-live {
  overflow: hidden;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
}

.hayat-play {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

/* HUD رقيق فوق العالم */
.hayat-modal-live .hayat-hud {
  flex-shrink: 0;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(20, 16, 36, 0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 200, 87, 0.18);
}

.hayat-modal-live .hayat-hud-top { gap: 8px; }
.hayat-modal-live .hayat-who strong { font-size: 14px; }
.hayat-modal-live .hayat-who em { font-size: 11px; }
.hayat-modal-live .hayat-pill {
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(42, 36, 82, 0.7);
}
.hayat-modal-live .hayat-needs { margin-top: 6px; gap: 6px; }
.hayat-modal-live .hayat-need-val { font-size: 10px; }
.hayat-modal-live .hayat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 220, 160, 0.35), transparent 50%),
    linear-gradient(160deg, #3a2a18, #1a1420);
}

/* ── المسرح ── */
.hayat-world {
  position: relative;
  flex: 1;
  min-height: 320px;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 200, 87, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 18px 40px rgba(0, 0, 0, 0.35);
}

.hayat-sky {
  position: absolute;
  inset: 0 0 38% 0;
  z-index: 0;
  pointer-events: none;
  transition: background 0.8s ease;
}
.hayat-sun, .hayat-moon, .hayat-stars, .hayat-haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hayat-sun, .hayat-moon {
  inset: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  filter: blur(0.2px);
}
.hayat-stars {
  opacity: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 28% 40%, #ffe7b0, transparent),
    radial-gradient(1px 1px at 63% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 81% 34%, #cde7ff, transparent),
    radial-gradient(1px 1px at 47% 28%, #fff, transparent);
}
.hayat-haze {
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 180, 90, 0.18), transparent 70%);
}

.hayat-phase-morning .hayat-sky {
  background: linear-gradient(180deg, #7ec8ff 0%, #ffd29a 42%, #f4c27a 100%);
}
.hayat-phase-morning .hayat-sun {
  top: 14%;
  inset-inline-end: 14%;
  background: radial-gradient(circle at 35% 35%, #fff6c8, #ffb347 55%, #ff8a3a);
  box-shadow: 0 0 40px 12px rgba(255, 180, 70, 0.45);
}
.hayat-phase-morning .hayat-moon { opacity: 0; }

.hayat-phase-noon .hayat-sky {
  background: linear-gradient(180deg, #4aa3ff 0%, #87d2ff 40%, #d8f0ff 100%);
}
.hayat-phase-noon .hayat-sun {
  top: 8%;
  inset-inline-start: 46%;
  background: radial-gradient(circle at 35% 35%, #fff, #ffe27a 60%, #ffc857);
  box-shadow: 0 0 50px 16px rgba(255, 230, 120, 0.55);
}
.hayat-phase-noon .hayat-moon { opacity: 0; }

.hayat-phase-dusk .hayat-sky {
  background: linear-gradient(180deg, #2a1b4a 0%, #c45c6a 38%, #ff9a5c 72%, #ffc48a 100%);
}
.hayat-phase-dusk .hayat-sun {
  top: 28%;
  inset-inline-start: 10%;
  background: radial-gradient(circle at 40% 40%, #ffd7a0, #ff7b6b);
  box-shadow: 0 0 36px 10px rgba(255, 110, 80, 0.4);
}
.hayat-phase-dusk .hayat-moon {
  top: 12%;
  inset-inline-end: 16%;
  opacity: 0.55;
  background: radial-gradient(circle at 30% 30%, #f4f0ff, #c9c0e8);
}

.hayat-phase-night .hayat-sky {
  background: linear-gradient(180deg, #0b0a18 0%, #1a1440 55%, #2a1848 100%);
}
.hayat-phase-night .hayat-sun { opacity: 0; }
.hayat-phase-night .hayat-moon {
  top: 10%;
  inset-inline-end: 18%;
  background: radial-gradient(circle at 32% 30%, #fff, #d7def6 60%, #9aa6d4);
  box-shadow: 0 0 28px 8px rgba(200, 220, 255, 0.35);
}
.hayat-phase-night .hayat-stars { opacity: 1; }
.hayat-phase-night .hayat-haze {
  background: radial-gradient(ellipse 70% 40% at 50% 100%, rgba(120, 80, 200, 0.2), transparent 70%);
}

.hayat-place-chip {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 4;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(16, 12, 28, 0.62);
  border: 1px solid rgba(255, 200, 87, 0.28);
  color: #ffe7b0;
  backdrop-filter: blur(8px);
}

.hayat-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hayat-room {
  position: absolute;
  inset: 0;
}

.hw-wall {
  position: absolute;
  inset: 0 0 34% 0;
  background:
    linear-gradient(180deg, rgba(255, 240, 210, 0.1), transparent 22%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.22)),
    linear-gradient(#7a5538, #6a4a32);
}
.hw-beam {
  position: absolute;
  inset: 0 0 auto 0;
  height: 10px;
  background: linear-gradient(#3d2918, #5a3d24);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.hw-lamp {
  position: absolute;
  top: 10px;
  inset-inline-start: 48%;
  width: 14px;
  height: 22px;
  background: radial-gradient(circle at 50% 70%, #ffe08a, #d4882a);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 18px 28px rgba(255, 190, 80, 0.28);
}
.hw-lattice {
  position: absolute;
  top: 18%;
  inset-inline-end: 6%;
  width: 14%;
  height: 28%;
  background:
    repeating-linear-gradient(90deg, rgba(40, 24, 12, 0.4) 0 5px, transparent 5px 12px),
    repeating-linear-gradient(0deg, rgba(40, 24, 12, 0.4) 0 5px, transparent 5px 12px);
  border: 3px solid rgba(80, 48, 22, 0.55);
  border-radius: 4px;
  opacity: 0.55;
}
.hw-window-cut {
  position: absolute;
  top: 16%;
  inset-inline-start: 36%;
  width: 15%;
  height: 26%;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #8ec8ff, #ffe0b0);
  border: 5px solid #3d2918;
  box-shadow: inset 0 0 0 2px #c9a06a, 0 10px 18px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.hw-sash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#3d2918, #3d2918) 50% / 3px 100% no-repeat,
    linear-gradient(#3d2918, #3d2918) 0 50% / 100% 3px no-repeat;
  opacity: 0.7;
}
.hw-window-light {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 60%);
}
.hayat-phase-night .hw-window-cut {
  background: linear-gradient(180deg, #1c2858, #0c1028);
  box-shadow: inset 0 0 16px rgba(120, 180, 255, 0.35), 0 0 24px rgba(255, 190, 80, 0.15);
}
.hayat-phase-dusk .hw-window-cut {
  background: linear-gradient(180deg, #ff9a6a, #ffc48a);
}

.hw-floor {
  position: absolute;
  inset: 66% 0 0 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 22%),
    repeating-linear-gradient(90deg, #9a6c40 0 36px, #875c34 36px 72px);
  box-shadow: inset 0 12px 22px rgba(0, 0, 0, 0.22);
}
.hw-baseboard {
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: #3d2918;
}
.hw-rug {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 48%;
  height: 28%;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, #7a2430 0 10px, #9a3440 10px 20px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.14);
  opacity: 0.85;
}
.hayat-room-kitchen .hw-rug,
.hayat-room-bath .hw-rug,
.hayat-room-office .hw-rug,
.hayat-room-clinic .hw-rug,
.hayat-room-gym .hw-rug { display: none; }

.hayat-tier-0 .hw-wall { background-color: #5a4638; }
.hayat-tier-0 .hw-floor {
  background: repeating-linear-gradient(90deg, #6d5340 0 20px, #5e4636 20px 40px);
}
.hayat-tier-2 .hw-wall, .hayat-tier-3 .hw-wall { background-color: #7a5840; }
.hayat-tier-4 .hw-wall, .hayat-tier-5 .hw-wall {
  background:
    linear-gradient(180deg, rgba(255, 215, 140, 0.12), transparent 40%),
    #8a6244;
}
.hayat-tier-4 .hw-floor, .hayat-tier-5 .hw-floor {
  background: repeating-linear-gradient(90deg, #c4a06a 0 32px, #b08a52 32px 64px);
}

.hayat-room-kitchen .hw-wall { background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 28%),
    #c4a07a; }
.hayat-room-kitchen .hw-floor {
  background: repeating-linear-gradient(90deg, #d8c4a0 0 28px, #c4ae88 28px 56px);
}
.hayat-room-bath .hw-wall {
  background:
    repeating-linear-gradient(90deg, #d8e4ea 0 18px, #c5d4dc 18px 36px);
}
.hayat-room-bath .hw-floor {
  background: repeating-linear-gradient(45deg, #b9c8d0 0 12px, #a8b8c2 12px 24px);
}
.hayat-room-living .hw-wall { background-color: #6b4e38; }
.hayat-room-study .hw-wall { background-color: #3f3a48; }
.hayat-room-cafe .hw-wall { background-color: #4a3428; }
.hayat-room-gym .hw-wall { background-color: #2c3038; }
.hayat-room-clinic .hw-wall { background-color: #d7e6ea; }
.hayat-room-office .hw-wall { background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%),
    #3a4250; }
.hayat-room-office .hw-floor {
  background: repeating-linear-gradient(90deg, #4a4034 0 28px, #3a3228 28px 56px);
}
.hayat-room-uni .hw-wall { background-color: #5a4634; }
.hayat-room-souq .hw-wall { background-color: #7a4a28; }
.hayat-room-park .hw-wall {
  background: linear-gradient(180deg, transparent 20%, rgba(40, 80, 40, 0.15));
}

/* شارع الحي */
.hayat-zone-town .hw-wall {
  background: transparent;
}
.hayat-zone-town .hw-floor {
  inset: 70% 0 0 0;
  background:
    linear-gradient(180deg, #5a5348 0 18%, #3e3a34 18% 28%, #6b5a3e 28%);
}
.hayat-zone-town .hw-rug { display: none; }
.hayat-zone-town .hw-window-cut { display: none; }
.hayat-zone-town .hw-lattice { display: none; }
.hayat-stage.is-street .hayat-room {
  overflow-x: auto;
  overflow-y: hidden;
}
.hw-palms {
  position: absolute;
  inset: auto 0 32% 0;
  height: 28%;
  pointer-events: none;
}
.hw-palms i {
  position: absolute;
  bottom: 0;
  width: 18px;
  height: 100%;
  background:
    linear-gradient(#2a4a24, #1a3018);
  border-radius: 8px 8px 0 0;
  filter: drop-shadow(0 -18px 0 #2f5a28);
}
.hw-palms i:first-child { inset-inline-start: 6%; }
.hw-palms i:last-child { inset-inline-end: 8%; height: 80%; }

/* ── الأثاث (CSS أصيل) ── */
.hw-art, .hw-art i {
  display: block;
  position: relative;
  box-sizing: border-box;
}
.hw-art i { position: absolute; }

.hw-hot {
  position: absolute;
  transform: translateX(50%);
  border: 0;
  background: transparent;
  padding: 0;
  width: 108px;
  min-height: 112px;
  z-index: 2;
  cursor: pointer;
  color: inherit;
}
[dir="rtl"] .hw-hot { transform: translateX(-50%); }
.hw-hot-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #fff8e8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  background: rgba(12, 8, 20, 0.52);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.hw-hot:hover .hw-hot-label,
.hw-hot:focus-visible .hw-hot-label {
  background: rgba(255, 200, 87, 0.28);
  color: #ffe7b0;
}
.hw-hot.hw-hot-bed { width: 140px; min-height: 120px; }
.hw-hot.locked { opacity: 0.55; cursor: not-allowed; }
.hw-hot.is-ghost .hw-art {
  opacity: 0.88;
  filter: none;
  outline: 2px dashed rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
}
.hw-hot.is-ghost .hw-hot-label { border: 1px dashed rgba(255, 255, 255, 0.45); }

.hw-bed { width: 118px; height: 62px; }
.hw-bed-frame {
  inset: 14px 0 0 0;
  background: #4a2e18;
  border-radius: 8px;
  box-shadow: 0 8px 0 #2c1a0e;
}
.hw-bed-mat {
  inset: 8px 8px 12px 8px;
  background: linear-gradient(180deg, #f0e2c4, #d4c09a);
  border-radius: 10px;
}
.hw-bed-pillow {
  inset: 2px auto auto 14px;
  width: 32px; height: 18px;
  background: #f7f1e2;
  border-radius: 10px;
  box-shadow: 22px 0 0 #efe6d2;
}
.hw-bed-cover {
  inset: 22px 10px 14px 10px;
  background: linear-gradient(90deg, #2f6f62, #3d8a78);
  border-radius: 8px;
}
.hw-bed.is-lux .hw-bed-cover { background: linear-gradient(90deg, #7a1e3a, #c45c6a); }
.hw-bed.is-mat { height: 48px; }
.hw-bed.is-mat .hw-bed-frame { background: #3a2a1c; }

.hw-cushion { width: 52px; height: 30px; background: #8b3a3a; border-radius: 16px 16px 10px 10px; box-shadow: 0 8px 0 #5a2222; }
.hw-window-spot { width: 40px; height: 48px; background: rgba(160, 210, 255, 0.25); border: 4px solid #3d2918; border-radius: 8px; }
.hw-lantern { width: 24px; height: 36px; background: radial-gradient(circle at 50% 40%, #ffe08a, #d4882a); border-radius: 8px 8px 5px 5px; box-shadow: 0 0 18px #ffb347; }

.hw-door { width: 40px; height: 72px; }
.hw-door-leaf { inset: 0; background: linear-gradient(90deg, #6b3e22, #8a5530); border-radius: 6px 6px 0 0; box-shadow: inset 0 0 0 3px #3d2414; }
.hw-door-knob { top: 46%; inset-inline-start: 6px; width: 8px; height: 8px; border-radius: 50%; background: #ffc857; }

.hw-fridge { width: 56px; height: 84px; background: linear-gradient(90deg, #e8eef4, #9eacb8); border-radius: 8px; box-shadow: 0 8px 0 #5d6a74, 0 0 0 2px rgba(255,255,255,0.25); }
.hw-fridge-door { inset: 3px 3px 18px 3px; border: 1px solid rgba(255,255,255,0.4); }
.hw-fridge-handle { top: 20%; inset-inline-end: 4px; width: 3px; height: 14px; background: #ffe08a; }

.hw-stove { width: 70px; height: 44px; background: #1c2026; border-radius: 8px; box-shadow: 0 0 10px rgba(255, 120, 50, 0.35); }
.hw-burner { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #6a7078; top: 6px; }
.hw-burner.a { inset-inline-start: 5px; }
.hw-burner.b { inset-inline-end: 5px; box-shadow: 0 0 8px #ff7b3a; }

.hw-table { width: 64px; height: 36px; }
.hw-table-top { inset: 0 0 auto 0; height: 10px; background: #8a5a32; border-radius: 6px; }
.hw-table-leg { inset: 10px 18px 0 18px; background: #5a3a20; }

.hw-sink { width: 32px; height: 22px; background: #dfe8ee; border-radius: 8px; box-shadow: inset 0 6px 0 #bcd0da; }
.hw-shower { width: 26px; height: 46px; }
.hw-shower-head { top: 0; inset-inline-start: 4px; width: 18px; height: 8px; background: #8aa0aa; border-radius: 8px; }
.hw-shower-stream { top: 8px; inset-inline-start: 10px; width: 6px; height: 28px; background: linear-gradient(#9ad8ff, transparent); opacity: 0.7; }
.hw-jacuzzi { width: 46px; height: 22px; background: #7ec8d8; border-radius: 14px; box-shadow: inset 0 8px 0 rgba(255,255,255,0.35); }

.hw-tv { width: 40px; height: 26px; background: #151820; border-radius: 4px; box-shadow: 0 0 12px rgba(110, 200, 255, 0.35); }
.hw-console { width: 28px; height: 12px; background: #2a2452; border-radius: 4px; }
.hw-plants { width: 24px; height: 32px; }
.hw-leaf { width: 14px; height: 18px; background: #2f7a48; border-radius: 50% 0; }
.hw-leaf.a { top: 0; inset-inline-start: 0; }
.hw-leaf.b { top: 8px; inset-inline-end: 0; background: #3d9a5a; }

.hw-pc { width: 40px; height: 32px; }
.hw-pc-screen { inset: 0 2px 10px 2px; background: linear-gradient(#1a3a58, #0c1c2c); border-radius: 3px; box-shadow: inset 0 0 10px #3d9cff; }
.hw-pc-deck { inset: auto 4px 0 4px; height: 8px; background: #2a2e34; }
.hw-library { width: 28px; height: 40px; background:
  repeating-linear-gradient(#8b2e2e 0 7px, #d4a017 7px 9px, #2f4f7a 9px 16px, #3d6b4a 16px 18px); border-radius: 2px; }
.hw-easel { width: 24px; height: 36px; background: linear-gradient(180deg, #f2e6c8 40%, #8a5a32 40%); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hw-piano { width: 42px; height: 18px; background: #1a1420; border-radius: 3px; box-shadow: inset 0 -6px 0 #f4efe2; }
.hw-homegym { width: 36px; height: 16px; background: #2a2e34; border-radius: 8px; box-shadow: -12px 0 0 #444, 12px 0 0 #444; }
.hw-lab { width: 28px; height: 30px; background: #dfe8ee; border: 2px solid #7aa; }

.hw-bldg {
  width: 78px;
  height: 96px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.18);
}
.hw-bldg-home { background: linear-gradient(#c47a4a, #8a4a28); }
.hw-bldg-roof { inset: -10px -4px auto -4px; height: 16px; background: #6b2e1c; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hw-bldg-win {
  width: 10px; height: 12px; background: #ffe7b0; top: 22px; border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 210, 120, 0.5);
}
.hw-bldg-win.a { inset-inline-start: 8px; }
.hw-bldg-win.b { inset-inline-end: 8px; }
.hw-bldg-win.c { top: 40px; inset-inline-start: 22px; }
.hw-bldg-cafe { background: #5a2e22; }
.hw-awning { inset: 10px -4px auto -4px; height: 10px; background: repeating-linear-gradient(90deg, #c45c6a 0 8px, #f4efe2 8px 16px); }
.hw-bldg-gym { background: #2c3540; }
.hw-bldg-clinic { background: #e8f2f4; }
.hw-cross { top: 16px; inset-inline-start: 22px; width: 10px; height: 22px; background: #e24a4a; box-shadow: -6px 6px 0 #e24a4a, 6px 6px 0 #e24a4a; }
.hw-bldg-office { background: #3a4a5c; height: 84px; }
.hw-bldg-uni { background: #7a6248; }
.hw-dome { inset: -12px 8px auto 8px; height: 20px; background: #c9a06a; border-radius: 50% 50% 0 0; }
.hw-bldg-souq { background: #c47a32; height: 56px; }
.hw-bldg-park { background: transparent; box-shadow: none; height: 56px; }
.hw-palm { width: 8px; height: 48px; background: #4a2e14; bottom: 0; }
.hw-palm.a { inset-inline-start: 14px; filter: drop-shadow(0 -14px 0 #2f7a3c); }
.hw-palm.b { inset-inline-end: 10px; height: 40px; filter: drop-shadow(0 -12px 0 #3d9a4a); }

.hw-cart { width: 34px; height: 22px; background: #c45c6a; border-radius: 4px 12px 4px 4px; }
.hw-board { width: 22px; height: 30px; background: #d8c08a; border: 3px solid #5a3a18; }
.hw-seat { width: 56px; height: 36px; background: #6b3e22; border-radius: 10px 10px 4px 4px; box-shadow: 0 8px 0 #3d2214; }
.hw-dine { width: 64px; height: 34px; background: #8a5a32; border-radius: 50%; box-shadow: 0 8px 0 #5a3a20; }
.hw-talk { width: 36px; height: 36px; border-radius: 50%; background: #c77dff; box-shadow: 0 0 12px rgba(199,125,255,0.45); }
.hw-weights { width: 40px; height: 16px; background: #2a2e34; border-radius: 8px; box-shadow: -14px 0 0 #444, 14px 0 0 #444; }
.hw-clinicdesk { width: 36px; height: 22px; background: #e8f2f4; border-top: 6px solid #7aa; }
.hw-checkup { width: 24px; height: 28px; background: #fff; border: 2px solid #7ec8d8; }
.hw-workdesk { width: 72px; height: 36px; background: #4a3a28; border-radius: 6px; box-shadow: 0 8px 0 #2a2014; }
.hw-charts { width: 28px; height: 28px; background: repeating-linear-gradient(#2a8 0 4px, transparent 4px 8px), #1a2430; }
.hw-cabinet { width: 24px; height: 32px; background: #3a4a5c; }
.hw-lecture { width: 40px; height: 24px; background: #6b4e38; }
.hw-stalls { width: 40px; height: 28px; background: #c47a32; }
.hw-estate { width: 28px; height: 32px; background: #8a6244; }
.hw-path { width: 36px; height: 10px; background: #8a7a5c; border-radius: 8px; }
.hw-shade { width: 28px; height: 20px; background: #2f7a3c; border-radius: 50%; }
.hw-meet { width: 22px; height: 22px; border-radius: 50%; background: #6ec8ff; }
.hw-kiosk { width: 26px; height: 32px; background: #2a2452; border-top: 8px solid #ffc857; }

/* شخصية اللاعب */
.hw-char {
  position: absolute;
  bottom: 12%;
  width: 42px;
  height: 78px;
  z-index: 3;
  transform: translateX(50%);
  transition: inset-inline-start 0.35s ease;
  pointer-events: none;
}
[dir="rtl"] .hw-char { transform: translateX(-50%); }
.hw-char[data-facing="end"] { transform: translateX(50%) scaleX(-1); }
[dir="rtl"] .hw-char[data-facing="end"] { transform: translateX(-50%) scaleX(-1); }
.hw-char-shadow {
  position: absolute;
  bottom: -4px;
  left: 2px; right: 2px;
  height: 8px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  filter: blur(2px);
}
.hw-char-body { position: absolute; inset: 0; }
.hw-char-head {
  position: absolute;
  top: 0; left: 9px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3d2b0, #c48a62);
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.08);
}
.hw-char-hair {
  position: absolute;
  top: -3px; left: 8px;
  width: 26px; height: 14px;
  background: #2a1c14;
  border-radius: 12px 12px 2px 2px;
}
.hw-char-torso {
  position: absolute;
  top: 22px; left: 7px;
  width: 28px; height: 28px;
  border-radius: 8px 8px 5px 5px;
}
.hw-char-legs {
  position: absolute;
  top: 48px; left: 10px;
  width: 22px; height: 26px;
  background: #2a2438;
  border-radius: 0 0 5px 5px;
  box-shadow: inset 10px 0 0 rgba(255,255,255,0.06);
}
.hw-char-male .hw-char-torso { background: linear-gradient(180deg, #1f6f62, #145248); }
.hw-char-female .hw-char-torso { background: linear-gradient(180deg, #8a2f4a, #5a1c32); }
.hw-char-female .hw-char-hair { height: 14px; border-radius: 10px 10px 8px 8px; }
.hw-char-female .hw-char-legs { background: #3a1424; }

.hayat-avatar .hw-char-head { position: static; width: 18px; height: 18px; }

.hw-npc-fig {
  width: 32px;
  height: 56px;
}
.hw-npc-fig .hw-char-head { width: 16px; height: 16px; left: 8px; }
.hw-npc-fig .hw-char-torso { top: 16px; left: 6px; width: 20px; height: 18px; }
.hw-npc-fig .hw-char-legs { top: 34px; left: 9px; width: 14px; height: 18px; }
.hw-npc-fig.is-child { transform: scale(0.78); transform-origin: bottom center; }
.hw-hot.is-npc { z-index: 4; }

.hw-encounter {
  position: absolute;
  bottom: 28%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 54px;
  height: 54px;
  pointer-events: none;
}
.hw-encounter i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 125, 255, 0.55), transparent 70%);
  animation: hayatPulse 1.6s ease-in-out infinite;
}
.hw-encounter span {
  position: absolute;
  inset: 10px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(20, 12, 36, 0.72);
  border-radius: 50%;
  border: 1px solid rgba(199, 125, 255, 0.6);
}
@keyframes hayatPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* حدث يظهر داخل العالم لا فوقه ككومة بطاقات */
.hayat-modal-live .hayat-event-box {
  position: absolute;
  inset: 18% 8% auto 8%;
  z-index: 8;
  max-width: 420px;
  margin: 0 auto;
}
.hayat-event-world {
  background: rgba(18, 12, 32, 0.88);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(199, 125, 255, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.hayat-modal-live .hayat-feed {
  position: static;
  inset: auto;
  flex-shrink: 0;
  max-width: none;
  max-height: 4.6em;
  overflow: hidden;
  pointer-events: none;
  z-index: auto;
}
.hayat-modal-live .hayat-feed.is-empty,
.hayat-feed.is-empty {
  display: none;
}
.hayat-modal-live .hayat-feed-row {
  background: rgba(16, 12, 28, 0.7);
  backdrop-filter: blur(8px);
  font-size: 12px;
}

.hayat-create-need {
  text-align: center;
  margin: 4px 0 12px;
}
.hayat-create-need.is-need { color: var(--accent-gold); font-weight: 700; }
.hayat-create-need.is-ready { color: var(--accent-green); font-weight: 700; }

/* شريط العالم — قوائم عميقة تُفتح منه لا كشاشة رئيسية */
.hayat-dock {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  overflow-x: auto;
  padding: 0;
  scrollbar-width: none;
}
.hayat-dock::-webkit-scrollbar { display: none; }
.hayat-dock-btn {
  flex: 1 0 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--text-subtle);
  border-radius: 10px;
  padding: 4px 2px 2px;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.hayat-dock-btn.active {
  color: #14301f;
  background: linear-gradient(180deg, #ffe08a, #ffc857);
  border-color: #ffc857;
}
.hayat-dock-mark {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.85;
}
.hayat-dock-map { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.hayat-dock-skills { border-radius: 50%; }
.hayat-dock-work { clip-path: polygon(15% 20%, 85% 20%, 85% 80%, 15% 80%); }
.hayat-dock-home { clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); }
.hayat-dock-social { border-radius: 50% 50% 50% 0; }
.hayat-dock-legacy { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.hayat-dock-log { border-radius: 2px; }

.hayat-sheet {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 7;
  max-height: 64%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(42, 36, 82, 0.96), rgba(22, 16, 40, 0.98));
  border: 1px solid rgba(255, 200, 87, 0.22);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.4);
}
.hayat-sheet.d-none { display: none; }
.hayat-sheet-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.hayat-sheet-close {
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.hayat-sheet-body {
  overflow-y: auto;
  padding: 12px 14px 16px;
  -webkit-overflow-scrolling: touch;
}

.hayat-map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hayat-map-cell {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: start;
  cursor: pointer;
}
.hayat-map-cell strong { display: block; font-size: 13px; }
.hayat-map-cell em { font-size: 11px; color: var(--text-subtle); font-style: normal; }
.hayat-map-cell.current {
  border-color: #ffc857;
  background: rgba(255, 200, 87, 0.12);
}
.hayat-map-cell.locked { opacity: 0.4; cursor: not-allowed; }

.hayat-person-face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2a1c14;
  overflow: hidden;
}

@media (max-width: 520px) {
  .hayat-world { min-height: 340px; }
  .hw-hot { width: 92px; }
  .hayat-modal-live .hayat-hud-stats { justify-content: flex-start; }
  .hayat-map-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 800px) {
  .hayat-world { min-height: 460px; }
  .hw-hot { width: 120px; }
  .hw-char { width: 48px; height: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-char, .hayat-sky, .hw-encounter i { transition: none; animation: none; }
}