* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: #f4f4f4;
  background: #151515;
}

button {
  font: inherit;
  cursor: pointer;
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  background: rgba(0, 0, 0, 0.74);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.day-box,
.money-box {
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  font-weight: bold;
}

.money-container {
  flex-shrink: 0;
  display: flex;
  white-space: nowrap;
  align-items: center;
}

.patrimony-display {
  font-size: 0.85em;
  opacity: 0;
  font-weight: normal;
  margin-right: 15px;
  font-family: 'Patrick Hand', cursive;
  letter-spacing: 0.5px;
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
  display: inline-block;
  transform: translateX(15px);
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.money-container:hover .patrimony-display {
  opacity: 1;
  transform: translateX(0);
}

.screen {
  min-height: 100vh;
  padding: 82px 20px 24px;
}

.main-screen {
  background: linear-gradient(rgba(10, 10, 10, 0.45), rgba(10, 10, 10, 0.75)), radial-gradient(circle at top, #475569, #111827 65%);
}

.main-menu,
.place-screen {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  margin: 12px 0 6px;
  font-size: 42px;
}

#mainTitle {
  font-size: 36px;
}

h2 {
  margin: 0 0 10px;
}

.village-street {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 32px;
  margin: 20px auto 40px;
  padding: 35px 20px 45px;
  background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.6) 75%, rgba(15, 23, 42, 0.9) 100%),
                    url("village_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-bottom: 14px solid #334155; /* Curb stone */
  border-radius: 28px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), inset 0 0 30px rgba(0, 0, 0, 0.6);
  perspective: 1000px;
}

.place-card {
  position: relative;
  width: 215px;
  height: 275px;
  min-height: 275px;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease;
}

/* 3D bounce on hover - Applied to the button in 2D to avoid form-control rendering bugs */
.place-card:hover {
  transform: translateY(-12px) scale(1.04) !important;
}

/* 3D tilt applied to the inner div storefront (100% stable in all browsers) */
.place-card:hover .storefront {
    transform: rotateY(2deg) rotateX(1deg) translateZ(8px);
}

/* Individual neon illumination glows on hover (Bug-free 3D alternative to parent filter) */
.place-card:hover .facade-cyber {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.55), inset 0 0 15px rgba(255, 255, 255, 0.1);
}

.place-card:hover .facade-pmu {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.45), inset 0 0 15px rgba(255, 255, 255, 0.15);
}

.place-card:hover .facade-bank {
  border-color: #f1f5f9 !important;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.place-card:hover .facade-doctor {
  border-color: #2dd4bf !important;
  box-shadow: 0 0 25px rgba(45, 212, 191, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.storefront {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   CYBERCAFÉ STOREFRONT DESIGN (👾 Cyberpunk & Retro High-Tech)
   ========================================================================== */
.roof-cyber {
  width: 226px;
  height: 14px;
  margin: 0 auto -2px;
  background: linear-gradient(90deg, #ec4899, #f43f5e, #ec4899);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.7);
  transform: translateZ(16px);
}

.awning-cyber {
  width: 220px;
  height: 28px;
  margin: 0 auto -3px;
  background: repeating-linear-gradient(45deg, #a21caf 0px, #a21caf 12px, #3b0764 12px, #3b0764 24px);
  border-bottom: 3.5px solid #d946ef;
  border-radius: 4px;
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.65);
  transform: translateZ(28px) rotateX(15deg);
  z-index: 10;
}

.facade-cyber {
  position: relative;
  width: 100%;
  height: 180px;
  background: repeating-linear-gradient(0deg, #181a25 0px, #181a25 14px, #10111a 14px, #10111a 16px); /* Matte dark metal siding panels */
  border: 3px solid #2563eb; /* Modern steel-blue framing */
  border-radius: 0 0 16px 16px;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.35), inset 0 0 25px rgba(0, 0, 0, 0.93);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  transform-style: preserve-3d;
}

/* Beautiful 3D glowing neon accent columns on the sides */
.facade-cyber::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 12px;
  height: 100%;
  background: linear-gradient(90deg, #1d4ed8, #06b6d4);
  border-radius: 4px;
  box-shadow: 4px 0 12px rgba(6, 182, 212, 0.65);
  transform: translateZ(20px);
}

.facade-cyber::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 0;
  width: 12px;
  height: 100%;
  background: linear-gradient(90deg, #1d4ed8, #06b6d4);
  border-radius: 4px;
  box-shadow: -4px 0 12px rgba(6, 182, 212, 0.65);
  transform: translateZ(20px);
}

.sign-cyber {
  font-family: 'Patrick Hand', cursive, sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #e0f2fe;
  text-shadow: 0 0 5px #06b6d4, 0 0 15px #0891b2;
  background: rgba(15, 23, 42, 0.9);
  padding: 2px 12px;
  border-radius: 8px;
  border: 1.5px solid #06b6d4;
  animation: cyberFlicker 3s infinite alternate;
  transform: translateZ(12px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.window-cyber {
  position: relative;
  width: 82px;
  height: 52px;
  background: #020617;
  border: 2px solid #06b6d4;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform: translateZ(6px);
}

.glowing-screen {
  width: 44px;
  height: 30px;
  background: radial-gradient(circle, #a855f7 0%, #1e1b4b 95%);
  border-radius: 3px;
  border: 1.5px solid #c084fc;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
  animation: screenPulse 1.8s infinite ease-in-out;
}

.door-frame-cyber {
  width: 44px;
  height: 65px;
  background: #000000;
  border: 2.5px solid #2563eb;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  position: relative;
  transform-style: preserve-3d;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.95);
  align-self: center;
  transform: translateZ(4px);
}

/* Recessed black rectangle interior */
.door-frame-cyber::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 0;
  background: #12131a;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.9);
}

.door-cyber {
  position: absolute;
  top: -2.5px;
  left: -2.5px;
  width: calc(100% + 5px);
  height: calc(100% + 2.5px);
  background: linear-gradient(180deg, #ec4899 0%, #db2777 100%);
  border: 2.5px solid #f43f5e;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.3);
  transition: transform 0.4s ease, background 0.3s ease;
  transform-origin: left;
  transform: translateZ(8px);
  z-index: 5;
}

/* Neon cyan door handle */
.door-cyber::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: #06b6d4;
  box-shadow: 0 0 8px #06b6d4;
  border-radius: 2px;
}

.place-card:hover .door-cyber {
  transform: rotateY(-55deg) translateZ(8px);
  background: linear-gradient(180deg, #d946ef 0%, #a855f7 100%);
}

/* ==========================================================================
   BAR PMU STOREFRONT DESIGN (🍻 Traditional Tavern Wood Facade)
   ========================================================================== */
.roof-pmu {
  width: 226px;
  height: 14px;
  margin: 0 auto -2px;
  background: linear-gradient(90deg, #d97706, #b45309);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transform: translateZ(16px);
}

.awning-pmu {
  width: 220px;
  height: 28px;
  margin: 0 auto -3px;
  background: repeating-linear-gradient(45deg, #166534 0px, #166534 14px, #f8fafc 14px, #f8fafc 28px);
  border-bottom: 3.5px solid #14532d;
  border-radius: 4px;
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.65);
  transform: translateZ(28px) rotateX(15deg);
  z-index: 10;
}

.facade-pmu {
  position: relative;
  width: 100%;
  height: 180px;
  background: repeating-linear-gradient(0deg, #451a03, #451a03 14px, #361402 14px, #361402 16px); /* Wood Planks! */
  border: 3px solid #854d0e;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 0 20px rgba(180, 83, 9, 0.35), inset 0 0 30px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  transform-style: preserve-3d;
}

/* Beautiful 3D rustic wood pillars on the sides */
.facade-pmu::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  width: 14px;
  height: 100%;
  background: linear-gradient(90deg, #78350f, #451a03);
  border-left: 1.5px solid #92400e;
  border-right: 2px solid #291001;
  border-radius: 2px;
  box-shadow: 4px 0 12px rgba(0,0,0,0.5);
  transform: translateZ(24px);
}

.facade-pmu::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 0;
  width: 14px;
  height: 100%;
  background: linear-gradient(90deg, #451a03, #78350f);
  border-left: 2px solid #291001;
  border-right: 1.5px solid #92400e;
  border-radius: 2px;
  box-shadow: -4px 0 12px rgba(0,0,0,0.5);
  transform: translateZ(24px);
}

.sign-pmu {
  position: relative;
  font-family: 'Patrick Hand', cursive, sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: #fef3c7;
  text-shadow: 0 1px 3px #000, 0 0 8px #f59e0b;
  background: rgba(217, 119, 6, 0.28);
  padding: 2px 14px;
  border-radius: 8px;
  border: 2px solid #ca8a04;
  transform: translateZ(12px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Warm Tavern Lanterns on the sides */
.sign-pmu::before,
.sign-pmu::after {
  content: "💡";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  animation: lanternFlicker 3s infinite alternate ease-in-out;
}
.sign-pmu::before { left: -18px; }
.sign-pmu::after { right: -18px; }

.window-pmu {
  position: relative;
  width: 78px;
  height: 48px;
  background: rgba(254, 243, 199, 0.1);
  border: 2px solid #ca8a04;
  border-radius: 6px;
  box-shadow: inset 0 0 10px rgba(251, 191, 36, 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  transform: translateZ(6px);
}

.dartboard {
  animation: dartboardGlow 2.5s infinite alternate ease-in-out;
}

.door-frame-pmu {
  width: 42px;
  height: 65px;
  background: #000000;
  border: 2.5px solid #854d0e;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  position: relative;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.95);
  align-self: center;
  transform: translateZ(4px);
}

/* Recessed black rectangle interior */
.door-frame-pmu::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 0;
  background: #1c130d;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.9);
}

.door-pmu {
  position: absolute;
  top: -2.5px;
  left: -2.5px;
  width: calc(100% + 5px);
  height: calc(100% + 2.5px);
  background: linear-gradient(180deg, #2b1102 0%, #190a01 100%);
  border: 2.5px solid #3d1b04;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.8);
  transition: transform 0.4s ease, background 0.3s ease;
  transform-origin: left;
  transform: translateZ(8px);
  z-index: 5;
}

/* Elegant brass doorknob */
.door-pmu::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #fef08a 0%, #ca8a04 100%);
  border: 1px solid #a16207;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.place-card:hover .door-pmu {
  transform: rotateY(-55deg) translateZ(8px);
  background: linear-gradient(180deg, #3d1b04 0%, #2b1102 100%);
}

/* ==========================================================================
   BANQUE STOREFRONT DESIGN (🏛️ Greek Neoclassical Temple)
   ========================================================================== */
.pediment-bank {
  width: 232px;
  height: 0;
  margin: 0 auto -2px;
  border-left: 116px solid transparent;
  border-right: 116px solid transparent;
  border-bottom: 28px solid #f1f5f9;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.35));
  z-index: 10;
  position: relative;
  transform: translateZ(24px);
}

/* Elegant gold star inside the pediment */
.pediment-bank::before {
  content: "⭐";
  position: absolute;
  bottom: -28px;
  left: -7px;
  font-size: 14px;
  color: #fbbf24;
  text-shadow: 0 0 4px rgba(251, 191, 36, 0.8);
}

.facade-bank {
  position: relative;
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 50%, #94a3b8 100%); /* Marble texture */
  border: 3px solid #64748b;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.35), inset 0 0 25px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  transform-style: preserve-3d;
}

.column {
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 174px;
  background: linear-gradient(90deg, #f1f5f9 0%, #cbd5e1 50%, #94a3b8 100%);
  border-left: 1px solid #ffffff;
  border-right: 2px solid #475569;
  z-index: 8;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.4);
  transform: translateZ(28px);
}

.column-left { left: 8px; }
.column-right { right: 8px; }

/* Elegant Greek column capitols and bases */
.column::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 20px;
  height: 8px;
  background: #f1f5f9;
  border-bottom: 2px solid #94a3b8;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.column::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -2px;
  width: 20px;
  height: 10px;
  background: #94a3b8;
  border-top: 2px solid #f1f5f9;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.2);
}

.sign-bank {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(251, 191, 36, 0.5);
  background: rgba(15, 23, 42, 0.95);
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid #d97706;
  z-index: 9;
  transform: translateZ(12px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.window-bank {
  position: relative;
  width: 68px;
  height: 46px;
  background: #1e293b;
  border: 2px solid #475569;
  border-radius: 4px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 9;
  transform: translateZ(6px);
}

.bars {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(90deg, transparent, transparent 12px, #ca8a04 12px, #ca8a04 15px);
}

.door-bank {
  width: 42px;
  height: 65px;
  background: linear-gradient(180deg, #fbbf24 0%, #ca8a04 100%);
  border: 2.5px solid #fbbf24;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 0 8px rgba(254, 243, 199, 0.4);
  align-self: center;
  transition: transform 0.4s ease, background 0.3s ease;
  transform-origin: left;
  z-index: 9;
  transform: translateZ(8px);
  position: relative;
}

/* Golden circular vault locking handle wheel */
.door-bank::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border: 2px solid #fbbf24;
  border-radius: 50%;
  background: radial-gradient(circle, #fef3c7 0%, #ca8a04 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Center vault spindle */
.door-bank::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background: #7c2d12;
  border-radius: 50%;
  z-index: 10;
}

.place-card:hover .door-bank {
  transform: rotateY(-36deg) translateZ(8px);
  background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%);
}

/* ==========================================================================
   MÉDECIN CLINIC STOREFRONT DESIGN (🏥 Sterile & Modern Clinique)
   ========================================================================== */
.roof-doctor {
  width: 226px;
  height: 14px;
  margin: 0 auto -2px;
  background: linear-gradient(90deg, #0d9488, #0f766e, #0d9488);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 3px 6px rgba(13, 148, 136, 0.3);
  transform: translateZ(10px);
}

.facade-doctor {
  position: relative;
  width: 100%;
  height: 180px;
  background: linear-gradient(90deg, rgba(13, 148, 136, 0.05) 1px, transparent 1px),
              linear-gradient(180deg, #ffffff 0%, #d5f2ec 100%);
  background-size: 25px 100%;
  border: 3px solid #0d9488;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 0 20px rgba(13, 148, 136, 0.22), inset 0 0 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  transform-style: preserve-3d;
}

/* Beautiful 3D modern clinical pillars on the sides */
.facade-doctor::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  width: 12px;
  height: 100%;
  background: linear-gradient(90deg, #0d9488, #0f766e);
  border-left: 1px solid #14b8a6;
  border-right: 1.5px solid #0f766e;
  border-radius: 2px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
  transform: translateZ(10px);
}

.facade-doctor::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 0;
  width: 12px;
  height: 100%;
  background: linear-gradient(90deg, #0f766e, #0d9488);
  border-left: 1.5px solid #0f766e;
  border-right: 1px solid #14b8a6;
  border-radius: 2px;
  box-shadow: -2px 2px 6px rgba(0,0,0,0.15);
  transform: translateZ(10px);
}

.sign-doctor {
  font-family: 'Patrick Hand', cursive, sans-serif;
  font-size: 17px;
  font-weight: 900;
  color: #0f766e;
  text-shadow: 0 1px 1px #fff;
  background: #ccfbf1;
  padding: 2px 12px;
  border-radius: 8px;
  border: 1.5px solid #0f766e;
  transform: translateZ(5px);
}

.window-doctor {
  position: relative;
  width: 78px;
  height: 48px;
  background: #f0fdfa;
  border: 2.5px solid #0d9488;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(13, 148, 136, 0.3), inset 0 0 10px rgba(13, 148, 136, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  transform: translateZ(6px);
}

.medical-cross {
  color: #0d9488;
  animation: crossPulse 2.0s infinite ease-in-out;
}

.door-doctor {
  width: 42px;
  height: 65px;
  background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,0.15) 40%, rgba(255,255,255,0.15) 60%, transparent 60%) repeat, 
              linear-gradient(180deg, #0d9488 0%, #115e59 100%);
  background-size: 100% 100%, 100% 100%;
  border: 2px solid #14b8a6;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 3px 6px rgba(13, 148, 136, 0.3), inset 0 0 5px rgba(255,255,255,0.2);
  align-self: center;
  transition: transform 0.4s ease, background 0.3s ease;
  transform-origin: left;
  transform: translateZ(6px);
}

.place-card:hover .door-doctor {
  transform: rotateY(-40deg) translateZ(3px);
  background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,0.15) 40%, rgba(255,255,255,0.15) 60%, transparent 60%) repeat, 
              linear-gradient(180deg, #14b8a6 0%, #0d9488 100%);
  background-size: 100% 100%, 100% 100%;
}

/* ==========================================================================
   ANIMATIONS KEYFRAMES
   ========================================================================== */
@keyframes cyberFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 5px #06b6d4, 0 0 15px #0891b2;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
  }
  20%, 24%, 55% {
    text-shadow: none;
    box-shadow: none;
  }
}

@keyframes screenPulse {
  0%, 100% { opacity: 0.75; transform: scale(1.0); }
  50% { opacity: 1.0; transform: scale(1.05); }
}

@keyframes dartboardGlow {
  0%, 100% { filter: drop-shadow(0 0 2px #ca8a04); }
  50% { filter: drop-shadow(0 0 7px #f59e0b); }
}

@keyframes crossPulse {
  0%, 100% { transform: scale(1.0); filter: drop-shadow(0 0 1px rgba(13, 148, 136, 0.4)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 6px #14b8a6); }
}

@keyframes lanternFlicker {
  0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 2px #f59e0b); }
  50% { opacity: 1.0; filter: drop-shadow(0 0 8px #fbbf24); }
}

.next-day-btn,
.back-btn,
.bank-btn,
.beer-btn {
  border: 0;
  border-radius: 999px;
  color: white;
  font-weight: bold;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.next-day-btn {
  padding: 16px 28px;
  background: linear-gradient(45deg, #fbbf24, #f59e0b);
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.8);
  border: 2px solid #fcd34d;
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(251,191,36,0.8), 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: pulseGlow 2s infinite;
}
.next-day-btn:hover {
  transform: scale(1.07);
  box-shadow: 0 0 18px rgba(251,191,36,1), 0 6px 14px rgba(0,0,0,0.5);
}
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 12px rgba(251,191,36,0.8); }
  50% { box-shadow: 0 0 18px rgba(251,191,36,1); }
}

.back-btn {
  padding: 12px 20px;
  background: #334155;
}

.hidden {
  display: none !important;
}

.place-screen {
  position: relative;
  min-height: calc(100vh - 106px);
  padding: 18px 22px 22px;
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.compact-screen {
  min-height: auto;
  padding-bottom: 18px;
}

.cybercafe-screen {
  padding-top: 14px;
  padding-bottom: 14px;
  background:
    linear-gradient(rgba(8, 12, 24, 0.22), rgba(8, 12, 24, 0.72)),
    radial-gradient(circle at 18% 18%, rgba(249, 115, 22, 0.55), transparent 26%),
    radial-gradient(circle at 82% 8%, rgba(250, 204, 21, 0.34), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(20, 184, 166, 0.16), transparent 36%),
    linear-gradient(135deg, #431407, #1e293b 72%);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.18), 0 16px 34px rgba(0, 0, 0, 0.22);
}

.cybercafe-screen h1 {
  margin-bottom: 6px;
}

.pmu-screen {
  min-height: calc(100vh - 106px);
  padding: 24px 22px 28px;
  background: linear-gradient(135deg, #064e3b, #14532d);
}

.cybercafe-screen {
  background: linear-gradient(135deg, #0f172a, #1e1b4b);
}



.bank-screen {
  background: linear-gradient(135deg, #172554, #312e81);
}



.screen-info {
  margin: 0 0 12px;
  color: #d6d6d6;
}

.cybercafe-screen .screen-info {
  margin-bottom: 8px;
  color: #fde68a;
}

.table-wrapper {
  overflow-x: auto;
  margin: 0 auto;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
}

.market-table-wrapper {
  position: relative;
  max-width: 860px;
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.94));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.30), inset 0 0 0 1px rgba(251, 191, 36, 0.26);
}

.grandma-shopping-sticky {
  position: fixed;
  left: -8px;
  /* Dépasse plus */
  top: 180px;
  width: 65px;
  /* Un peu plus large pour compenser le dépassement */
  height: 150px;
  background: #fef08a;
  background-image: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
  border: 1px solid #eab308;
  border-radius: 0 10px 10px 0;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
  z-index: 2000;
  transition: all 1.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  cursor: help;
  display: flex;
  flex-direction: row-reverse;
  transform: rotate(3deg);
  transform-origin: left center;
}

.grandma-shopping-sticky:hover {
  width: 260px;
  left: 0;
  height: auto;
  min-height: 180px;
  padding: 25px;
  border-radius: 0 12px 12px 0;
  transform: rotate(0deg);
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4);
}

.sticky-tab {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 10px 8px;
  font-weight: 900;
  color: #854d0e;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-left: 2px solid rgba(133, 77, 14, 0.2);
}

.grandma-shopping-sticky:hover .sticky-tab {
  display: none;
}

.sticky-content {
  display: none;
  width: 100%;
}

.grandma-shopping-sticky:hover .sticky-content {
  display: block;
}

.sticky-content h3 {
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive, sans-serif;
  color: #713f12;
  margin: 0 0 15px 0;
  font-size: 18px;
  border-bottom: 2px dashed rgba(113, 63, 18, 0.4);
  padding-bottom: 6px;
}

.sticky-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sticky-content li {
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive, sans-serif;
  color: #422006;
  margin-bottom: 8px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: all 0.3s;
}

.sticky-content li.completed span {
  text-decoration: line-through;
  color: #92400e;
}

.sticky-content li.completed {
  opacity: 0.6;
  transform: translateX(5px);
}

.sticky-content li.completed::after {
  content: "✅";
  font-size: 14px;
  margin-left: 10px;
}

/* --- VOYANTE PREDICTIONS STICKY (PARCHEMIN) --- */
.voyante-predictions-sticky {
  position: fixed;
  right: -19px;
  top: 180px;
  width: 65px;
  height: 150px;
  background-color: #1e1b4b;
  /* Base encore plus sombre */
  background-image:
    linear-gradient(rgba(30, 27, 75, 0.6), rgba(30, 27, 75, 0.6)),
    /* Calque pour la transparence et l'obscurité */
    url('parchemin_voyante.png');
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  border: 1px solid #7c3aed;
  border-radius: 12px 0 0 12px;
  box-shadow: -5px 5px 25px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(124, 58, 237, 0.4);
  z-index: 2000;
  transition: all 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  cursor: help;
  display: flex;
  flex-direction: row;
  transform: rotate(-4deg);
  transform-origin: right center;
}

.voyante-predictions-sticky::before {
  content: "☾ ✧ ☽";
  position: absolute;
  top: 8px;
  left: 12px;
  color: #ddd6fe;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.5s;
}

.voyante-predictions-sticky:hover::before {
  opacity: 1;
}

.voyante-predictions-sticky:hover {
  width: 320px;
  right: 0;
  height: auto;
  min-height: 240px;
  padding: 30px 25px;
  border-radius: 15px 0 0 15px;
  transform: rotate(0deg);
  box-shadow: -10px 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(139, 92, 246, 0.3);
}

.voyante-predictions-sticky .sticky-tab {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 12px 10px;
  font-weight: 900;
  color: #ddd6fe;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  background: rgba(46, 16, 101, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-right: 2px solid rgba(139, 92, 246, 0.5);
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.8);
}

.voyante-predictions-sticky:hover .sticky-tab {
  display: none;
}

.voyante-predictions-sticky:hover .sticky-content {
  display: block;
  animation: parchmentUnfold 0.6s ease-out forwards;
}

@keyframes parchmentUnfold {
  from {
    opacity: 0;
    transform: translateZ(9px);
  }

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

.voyante-predictions-sticky .sticky-content h3 {
  font-family: 'Cinzel', serif;
  color: #ddd6fe;
  margin: 0 0 20px 0;
  font-size: 21px;
  border-bottom: 2px solid rgba(139, 92, 246, 0.4);
  padding-bottom: 8px;
  text-align: center;
  text-shadow: 0 0 12px rgba(167, 139, 250, 0.6);
  letter-spacing: 1px;
}

.voyante-predictions-sticky .sticky-content li {
  font-family: 'Cinzel', serif;
  color: #f5f3ff;
  margin-bottom: 15px;
  font-size: 15px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  padding-bottom: 6px;
  position: relative;
  list-style: none;
}

.voyante-predictions-sticky .sticky-content li::before {
  content: "❈";
  position: absolute;
  left: -18px;
  color: #a78bfa;
  font-size: 12px;
}

.prediction-day {
  font-weight: bold;
  color: #c4b5fd;
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.prediction-trend-high {
  color: #f87171;
  font-weight: 800;
  text-shadow: 0 0 5px rgba(248, 113, 113, 0.3);
}

.prediction-trend-low {
  color: #4ade80;
  font-weight: 800;
  text-shadow: 0 0 5px rgba(74, 222, 128, 0.3);
}

table {
  width: 100%;
  border-collapse: collapse;
  color: #111827;
  table-layout: fixed;
}

.market-table th,
.market-table td {
  height: 42px;
  padding: 0 7px;
  border-bottom: 1px solid rgba(180, 83, 9, 0.20);
  text-align: center;
  font-size: 15px;
  vertical-align: middle;
  overflow: hidden;
}

.market-table tbody tr {
  height: 42px;
}

.market-table td:first-child strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-table th:nth-child(1),
.market-table td:nth-child(1) {
  width: 23%;
}

.market-table th:nth-child(2),
.market-table td:nth-child(2) {
  width: 13%;
}

.market-table th:nth-child(3),
.market-table td:nth-child(3) {
  width: 13%;
}

.market-table th:nth-child(4),
.market-table td:nth-child(4) {
  width: 12%;
}

.market-table th:nth-child(5),
.market-table td:nth-child(5),
.market-table th:nth-child(6),
.market-table td:nth-child(6) {
  width: 19.5%;
}

th {
  background: #b45309;
  color: white;
}

.market-table th {
  background: linear-gradient(180deg, #d97706, #92400e);
  color: #fff7ed;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
}

.market-table tbody tr:nth-child(even) {
  background: rgba(254, 243, 199, 0.44);
}

.market-table tbody tr:hover {
  background: rgba(253, 230, 138, 0.42);
}

tr:last-child td {
  border-bottom: 0;
}

.price-cell {
  font-weight: 800;
  color: #7c2d12;
}

.action-cell {
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.action-btn {
  min-width: 42px;
  padding: 6px 7px;
  border: 0;
  border-radius: 9px;
  color: white;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: bold;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 5px 10px rgba(0, 0, 0, 0.18);
}

.buy-btn {
  background: linear-gradient(180deg, #22c55e, #15803d);
}

.sell-btn {
  background: linear-gradient(180deg, #ef4444, #b91c1c);
}

.action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
  filter: none;
  box-shadow: none;
}

.message-box {
  min-height: 24px;
  margin: 9px 0 6px;
  font-weight: bold;
}

.cybercafe-screen .message-box {
  margin: 7px 0 4px;
}

.success {
  color: #86efac;
}

.error {
  color: #fecaca;
}

.place-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.cyber-actions {
  margin-top: 5px;
}

.pmu-actions {
  margin-top: 8px;
}

.bank-actions {
  margin-top: 10px;
}

.shortage-row {
  background: #fee2e2;
  color: #7f1d1d;
}

.shortage-label {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dc2626;
  color: white;
  font-weight: bold;
}

.bank-compact {
  min-height: auto;
  padding-bottom: 18px;
}

.bank-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.bank-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.bank-btn {
  padding: 10px 14px;
  background: #2563eb;
}

.bank-btn.small {
  padding: 8px 12px;
  min-width: 52px;
}

.bank-status {
  min-height: 22px;
  margin: 8px 0 0;
  font-weight: bold;
}

.compact-investments {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.investment-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.16);
  text-align: left;
}

.investment-buttons,
.repay-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.withdraw-all-btn {
  margin-top: 10px;
  width: 100%;
  background: radial-gradient(ellipse at 35% 25%, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.25);
}

.gold-trade-card {
  max-width: 860px;
  margin: 14px auto 0;
}

.gold-trade-card h2 {
  margin-bottom: 8px;
}

.gold-table-wrapper {
  max-width: 100%;
}

.gold-table tbody tr {
  background: rgba(255, 251, 235, 0.92);
}

.gold-table td:first-child strong {
  color: #92400e;
}

.gold-table tbody tr.gold-closed-row {
  background: #111827;
  color: #d1d5db;
  text-align: left;
}

.gold-table tbody tr.gold-closed-row td {
  padding: 12px 14px;
}

.gold-table tbody tr.gold-closed-row strong {
  color: #d1d5db;
}


.pmu-room {
  overflow: hidden;
}

.pmu-stage {
  position: relative;
  height: 420px;
  max-width: 900px;
  margin: 4px auto 0;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(#2f160d 0 44%, #4b2413 45% 58%, #1f130e 59% 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 18px 34px rgba(0, 0, 0, 0.35);
}

.pmu-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 10%, rgba(255, 216, 128, 0.26), transparent 26%), radial-gradient(circle at 75% 12%, rgba(255, 140, 66, 0.18), transparent 25%);
  animation: warmFlicker 7s infinite steps(1);
  pointer-events: none;
}

.pmu-light {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 218, 121, 0.12);
  filter: blur(10px);
  opacity: 0;
  pointer-events: none;
}

.light-one {
  left: 10%;
  top: 12%;
  animation: lightPulse 9s infinite;
}

.light-two {
  right: 12%;
  top: 8%;
  animation: lightPulse 13s infinite 2s;
}

.bar-label {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 6;
  transform: translateX(-50%);
  padding: 14px 34px;
  border-radius: 14px;
  background: rgba(120, 53, 15, 0.88);
  color: #fde68a;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), 0 10px 20px rgba(0, 0, 0, 0.25);
}

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

.bloodstain {
  position: absolute;
  width: 16px;
  height: 8px;
  background: rgba(100, 10, 10, 0.7);
  border-radius: 50%;
  filter: blur(1px);
  z-index: 1;
  pointer-events: none;
  transform: scaleY(0.5);
}

.character {
  position: absolute;
  width: 28px;
  height: 38px;
  image-rendering: pixelated;
  transition: left 6.2s linear, top 2.8s linear;
  pointer-events: auto;
  /* Indispensable pour l'interaction */
}

.character::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  width: 12px;
  height: 12px;
  background: var(--skin, #f5c38b);
  box-shadow: 0 12px var(--shirt, #ef4444), 0 24px var(--pants, #3b82f6), -6px 14px var(--shirt, #ef4444), 6px 14px var(--shirt, #ef4444), -4px 34px var(--pants, #3b82f6), 4px 34px var(--pants, #3b82f6);
}

/* PNJ standards : détails discrets sans modifier leur taille */
.character.npc {
  filter: none;
  opacity: 1;
}

.character.npc::before {
  left: 8px;
  top: 3px;
  width: 12px;
  height: 10px;
  border-radius: 4px 4px 3px 3px;
  background: var(--skin, #f5c38b);
  box-shadow:
    0 10px var(--shirt, #ef4444),
    0 20px var(--shirt, #ef4444),
    -8px 14px 0 -1px var(--shirt, #ef4444),
    8px 14px 0 -1px var(--shirt, #ef4444),
    -8px 15px 0 -1px var(--shirt, #ef4444),
    8px 15px 0 -1px var(--shirt, #ef4444),
    -8px 16px 0 -1px var(--shirt, #ef4444),
    8px 16px 0 -1px var(--shirt, #ef4444),
    -8px 17px 0 -1px var(--shirt, #ef4444),
    8px 17px 0 -1px var(--shirt, #ef4444),
    -8px 18px 0 -1px var(--shirt, #ef4444),
    8px 18px 0 -1px var(--shirt, #ef4444),
    -8px 19px 0 -1px var(--shirt, #ef4444),
    8px 19px 0 -1px var(--shirt, #ef4444),
    -8px 20px 0 -1px var(--shirt, #ef4444),
    8px 20px 0 -1px var(--shirt, #ef4444),
    0 28px var(--pants, #3b82f6),
    -3px 35px 0 -2px var(--pants, #3b82f6),
    3px 35px 0 -2px var(--pants, #3b82f6);
}

.character.npc::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50% 45% 45% 35%;
  background: var(--hair, #3f2415);
  box-shadow:
    4px -2px 0 1px var(--hair, #3f2415),
    9px 0 0 0 var(--hair, #3f2415),
    1px 4px 0 -1px var(--hair, #3f2415),
    10px 4px 0 -1px var(--hair, #3f2415),
    5px 16px 0 -3px var(--accent, #fde68a),
    9px 16px 0 -3px var(--accent, #fde68a),
    3px 24px 0 -3px var(--accent, #fde68a);
}

.character.npc:nth-child(2n)::after {
  left: 6px;
  top: 1px;
  width: 6px;
  height: 5px;
  border-radius: 60% 35% 45% 35%;
  box-shadow:
    5px -2px 0 1px var(--hair, #3f2415),
    10px 1px 0 0 var(--hair, #3f2415),
    2px 5px 0 -1px var(--hair, #3f2415),
    11px 5px 0 -1px var(--hair, #3f2415),
    4px 15px 0 -3px #ffffff,
    10px 15px 0 -3px var(--accent, #fde68a);
}

.character.npc:nth-child(3n)::after {
  left: 8px;
  top: 0;
  width: 4px;
  height: 6px;
  border-radius: 50%;
  box-shadow:
    4px -2px 0 1px var(--hair, #3f2415),
    8px 0 0 0 var(--hair, #3f2415),
    -1px 4px 0 -1px var(--hair, #3f2415),
    9px 5px 0 -1px var(--hair, #3f2415),
    5px 16px 0 -3px var(--accent, #fde68a);
}

.character.npc:nth-child(5n)::before {
  box-shadow:
    0 10px var(--shirt, #ef4444),
    0 20px var(--accent, #fde68a),
    -8px 14px 0 -1px var(--shirt, #ef4444),
    8px 14px 0 -1px var(--shirt, #ef4444),
    -8px 15px 0 -1px var(--shirt, #ef4444),
    8px 15px 0 -1px var(--shirt, #ef4444),
    -8px 16px 0 -1px var(--shirt, #ef4444),
    8px 16px 0 -1px var(--shirt, #ef4444),
    -8px 17px 0 -1px var(--shirt, #ef4444),
    8px 17px 0 -1px var(--shirt, #ef4444),
    -8px 18px 0 -1px var(--shirt, #ef4444),
    8px 18px 0 -1px var(--shirt, #ef4444),
    -8px 19px 0 -1px var(--shirt, #ef4444),
    8px 19px 0 -1px var(--shirt, #ef4444),
    -8px 20px 0 -1px var(--shirt, #ef4444),
    8px 20px 0 -1px var(--shirt, #ef4444),
    0 28px var(--pants, #3b82f6),
    -3px 35px 0 -2px var(--pants, #3b82f6),
    3px 35px 0 -2px var(--pants, #3b82f6);
}

@keyframes bartenderBreathe {

  0%,
  100% {
    transform: scale(1.15) translateY(0);
  }

  50% {
    transform: scale(1.15) translateY(-1px) scaleY(1.04);
  }
}

.character.bartender {
  width: 34px;
  height: 48px;
  z-index: 8;
  margin-top: -4px;
  transform: scale(1.15);
  transform-origin: bottom center;
  transition: transform 0.2s, filter 0.2s;
  animation: bartenderBreathe 3s ease-in-out infinite;
}

/* Tête et corps du Barman */
.character.bartender::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 4px;
  width: 14px;
  height: 12px;
  border-radius: 40% 40% 10% 10%;
  background: #fcd34d;
  /* Peau */
  box-shadow:
    0 12px 0 #ffffff,
    /* Chemise blanche haut */
    0 16px 0 #ffffff,
    /* Chemise blanche bas */
    -4px 14px 0 -1px #111827,
    /* Gilet noir G */
    4px 14px 0 -1px #111827,
    /* Gilet noir D */
    0 10px 0 -4px #dc2626,
    /* Noeud papillon rouge */
    0 24px 0 #111827,
    /* Pantalon noir */
    0 22px 0 1px #374151,
    /* Tablier gris foncé */
    -7px 15px 0 -1px #ffffff,
    /* Manche G */
    7px 15px 0 -1px #ffffff,
    /* Manche D */
    -8px 21px 0 -3px #fcd34d,
    /* Main G */
    8px 21px 0 -3px #fcd34d,
    /* Main D */
    -10px 22px 0 -3px #f8fafc,
    /* Serviette sur le bras gauche */
    -10px 25px 0 -3px #e2e8f0,
    /* Bas de la serviette */
    -5px 36px 0 -2px #000000,
    /* Chaussure G */
    5px 36px 0 -2px #000000;
  /* Chaussure D */
}

/* Cheveux bien peignés */
.character.bartender::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 2px;
  width: 16px;
  height: 5px;
  background: #451a03;
  border-radius: 6px 6px 2px 2px;
  box-shadow:
    -1px 4px 0 -2px #451a03,
    /* Rouflaquette G */
    1px 4px 0 -2px #451a03;
  /* Rouflaquette D */
}

.character.voyante:hover {
  animation: pulseAuraSprite 2.5s ease-in-out infinite alternate;
  transform: translateY(-2px) scale(1.02);
  cursor: pointer;
}

.character.bartender:hover {
  transform: translateY(-2px) scale(1.20);
  filter: brightness(1.05);
  cursor: pointer;
  animation: none;
}

.bartender-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  width: 260px;
  min-height: 240px;
  transform: translate(-50%, -50%);
  padding: 24px 18px 18px;
  border-radius: 18px;
  background: #fff7ed;
  color: #431407;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.close-dialog {
  position: absolute;
  right: 10px;
  top: 8px;
  border: 0;
  background: transparent;
  font-size: 26px;
  font-weight: bold;
  color: #7c2d12;
}

.beer-btn {
  padding: 10px 14px;
  font-size: 14px;
  white-space: nowrap;
  border: 2px solid #fed7aa;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 48%, #dc2626 100%);
  box-shadow: 0 10px 24px rgba(194, 65, 12, 0.32), inset 0 0 0 1px rgba(255, 247, 237, 0.35);
}

.pmu-message {
  min-height: 22px;
  font-weight: bold;
}

.pmu-message.success {
  color: #c2410c;
}

@keyframes warmFlicker {

  0%,
  70%,
  100% {
    opacity: 1;
  }

  72% {
    opacity: 0.82;
  }

  73% {
    opacity: 1;
  }

  91% {
    opacity: 0.9;
  }
}

@keyframes lightPulse {

  0%,
  78%,
  100% {
    opacity: 0;
    transform: scale(0.9);
  }

  80%,
  87% {
    opacity: 1;
    transform: scale(1.12);
  }

  92% {
    opacity: 0.25;
  }
}

@media (max-width: 840px) {

  .places,
  .village-street,
  .bank-grid {
    grid-template-columns: 1fr;
  }

  .village-street {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 25px 10px;
  }

  .place-card {
    min-height: 275px;
  }

  h1 {
    font-size: 34px;
  }

  #mainTitle {
    font-size: 29px;
  }

  .market-table-wrapper {
    max-width: 100%;
  }

  .market-table th,
  .market-table td {
    height: 42px;
    font-size: 14px;
    padding: 0 5px;
  }

  .action-cell {
    flex-wrap: wrap;
  }

  .pmu-stage {
    height: 360px;
  }

  .investment-line {
    flex-direction: column;
    text-align: center;
  }
}

/* Correctif PMU #3 : comptoir en haut, barman derrière le bar, ambiance rouge chaleureuse */
.pmu-stage {
  background:
    radial-gradient(circle at 18% 12%, rgba(239, 68, 68, 0.22), transparent 28%),
    radial-gradient(circle at 82% 10%, rgba(248, 113, 113, 0.18), transparent 24%),
    linear-gradient(#3a130d 0 32%, #5b2215 33% 52%, #24120d 53% 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    inset 0 0 48px rgba(239, 68, 68, 0.16),
    0 18px 34px rgba(0, 0, 0, 0.35);
}

.pmu-stage::before {
  background:
    radial-gradient(circle at 25% 7%, rgba(255, 216, 128, 0.25), transparent 23%),
    radial-gradient(circle at 55% 9%, rgba(248, 113, 113, 0.18), transparent 24%),
    radial-gradient(circle at 78% 13%, rgba(255, 140, 66, 0.20), transparent 25%);
}

.pmu-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(127, 29, 29, 0.12), transparent 25%, rgba(220, 38, 38, 0.10) 55%, transparent 82%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.red-glow {
  left: 40%;
  top: -4%;
  width: 230px;
  height: 150px;
  background: rgba(239, 68, 68, 0.16);
  animation: lightPulse 11s infinite 1s;
}

.bar-counter {
  position: absolute;
  left: 50%;
  top: 21%;
  z-index: 9;
  width: min(76%, 660px);
  height: 108px;
  transform: translateX(-50%);
  border-radius: 10px 10px 18px 18px;
  background: linear-gradient(180deg, #9a5a26 0%, #7c3f17 44%, #4a230f 100%);
  border: 3px solid rgba(42, 20, 9, 0.88);
  box-shadow: inset 0 9px rgba(255, 214, 160, 0.16), inset 0 -12px rgba(35, 16, 7, 0.24), 0 14px 22px rgba(0, 0, 0, 0.34);
}

.bar-counter::before {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: -18px;
  height: 28px;
  border-radius: 12px;
  background: linear-gradient(180deg, #c07935, #7b3c16);
  border: 3px solid rgba(43, 21, 10, 0.84);
  box-shadow: inset 0 6px rgba(255, 255, 255, 0.15);
}

.bar-counter::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50px;
  height: 8px;
  background: repeating-linear-gradient(90deg, rgba(39, 18, 8, 0.22) 0 22px, rgba(255, 230, 180, 0.08) 22px 27px);
}

.bottle,
.glass,
.bar-stain {
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.bottle {
  bottom: 86px;
  width: 14px;
  height: 34px;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(90deg, #166534, #22c55e 45%, #14532d);
  box-shadow: inset 3px 0 rgba(255, 255, 255, 0.22), 0 0 0 2px rgba(15, 23, 42, 0.35);
}

.bottle::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -10px;
  width: 6px;
  height: 10px;
  background: #064e3b;
  border-radius: 2px 2px 0 0;
}

.bottle-a {
  left: 18%;
}

.bottle-b {
  left: 23%;
  height: 30px;
  background: linear-gradient(90deg, #7c2d12, #f97316 48%, #7c2d12);
}

.bottle-c {
  right: 20%;
  height: 36px;
  background: linear-gradient(90deg, #1d4ed8, #60a5fa 48%, #1e3a8a);
}

.glass {
  bottom: 83px;
  width: 16px;
  height: 18px;
  border: 3px solid rgba(219, 234, 254, 0.82);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background: rgba(250, 204, 21, 0.28);
}

.glass-a {
  left: 46%;
}

.glass-b {
  left: 51%;
  background: rgba(251, 146, 60, 0.24);
}

.bar-stain {
  width: 38px;
  height: 12px;
  border-radius: 50%;
  background: rgba(77, 31, 9, 0.35);
}

.stain-a {
  left: 34%;
  top: 42px;
}

.stain-b {
  right: 28%;
  top: 68px;
  width: 28px;
}

.character.bartender::before {
  box-shadow: 0 14px #ffffff, 0 28px #111827, -7px 17px #ffffff, 7px 17px #ffffff, -5px 41px #111827, 5px 41px #111827, -4px 5px #7c2d12, 4px 5px #7c2d12;
}

/* Modifications PMU #1 : comptoir moins massif, mobilier avec zones de circulation, entrées/sorties NPC */
.bar-counter {
  height: 56px;
  top: 20%;
}

.bar-counter::before {
  top: -15px;
  height: 24px;
}

.bar-counter::after {
  top: 28px;
  height: 6px;
}

.bottle {
  bottom: 43px;
  height: 30px;
}

.bottle::before {
  top: -8px;
  height: 8px;
}

.bottle-b {
  height: 27px;
}

.bottle-c {
  height: 32px;
}

.glass {
  bottom: 41px;
  height: 15px;
}

.stain-a {
  top: 21px;
}

.stain-b {
  top: 34px;
}

.pmu-decor {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.pmu-table,
.pmu-chair,
.pmu-rug,
.pmu-dartboard {
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.pmu-table {
  width: 86px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #c0842f 0 12%, #8a4a1c 13% 62%, #4a230f 63% 100%);
  border: 3px solid rgba(39, 18, 8, 0.78);
  box-shadow: inset 0 7px rgba(255, 223, 170, 0.16), 0 10px 12px rgba(0, 0, 0, 0.28);
}

.pmu-table::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 16px;
  width: 16px;
  height: 14px;
  border: 3px solid rgba(219, 234, 254, 0.78);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background: rgba(245, 158, 11, 0.30);
}

.table-left {
  left: 13%;
  top: 61%;
}

.table-right {
  right: 13%;
  top: 62%;
}

.pmu-chair {
  width: 28px;
  height: 26px;
  border-radius: 7px 7px 4px 4px;
  background: linear-gradient(#7c2d12, #451a03);
  border: 2px solid rgba(24, 12, 5, 0.72);
  box-shadow: inset 0 5px rgba(255, 255, 255, 0.08), 0 7px 9px rgba(0, 0, 0, 0.22);
}

.pmu-chair::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: -10px;
  height: 12px;
  border-radius: 5px 5px 1px 1px;
  background: #5f220d;
  border: 2px solid rgba(24, 12, 5, 0.62);
}

.chair-left-a {
  left: 10%;
  top: 56%;
}

.chair-left-b {
  left: 25%;
  top: 73%;
  transform: rotate(180deg);
}

.chair-right-a {
  right: 9%;
  top: 57%;
}

.chair-right-b {
  right: 26%;
  top: 74%;
  transform: rotate(180deg);
}

.pmu-rug {
  left: 42%;
  top: 79%;
  width: 18%;
  height: 9%;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, rgba(127, 29, 29, 0.62) 0 14px, rgba(245, 158, 11, 0.32) 14px 22px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 6px 12px rgba(0, 0, 0, 0.22);
}

.pmu-dartboard {
  right: 10%;
  top: 29%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, #fef3c7 0 12%, #991b1b 13% 27%, #fef3c7 28% 40%, #14532d 41% 58%, #1f2937 59% 100%);
  border: 3px solid rgba(23, 12, 7, 0.82);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.24);
}

@media (max-width: 840px) {
  .bar-counter {
    height: 50px;
  }

  .pmu-table {
    width: 72px;
    height: 40px;
  }

  .pmu-chair {
    width: 24px;
    height: 22px;
  }

  .pmu-dartboard {
    width: 34px;
    height: 34px;
  }
}

/* Modifications PMU #2 : scène plus vivante, zone avant-bar en sol marron, chaises enrichies */
.pmu-stage {
  background:
    radial-gradient(circle at 18% 12%, rgba(239, 68, 68, 0.18), transparent 24%),
    radial-gradient(circle at 82% 10%, rgba(248, 113, 113, 0.14), transparent 22%),
    linear-gradient(#3a130d 0 30%, #5b2215 31% 39%, #4b2413 40% 43%, #24120d 44% 100%);
}

.red-glow {
  top: -6%;
  height: 112px;
  background: rgba(239, 68, 68, 0.12);
}

.pmu-chair {
  width: 34px;
  height: 30px;
  border-radius: 9px 9px 5px 5px;
  background: linear-gradient(180deg, #9a3412 0 45%, #5b2108 46% 100%);
  box-shadow: inset 0 6px rgba(255, 255, 255, 0.10), inset 0 -5px rgba(24, 12, 5, 0.28), 0 8px 10px rgba(0, 0, 0, 0.24);
}

.pmu-chair::before {
  left: 4px;
  right: 4px;
  top: -13px;
  height: 15px;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(#b45309, #6b250b);
}

.pmu-chair::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 5px;
  height: 3px;
  background: rgba(255, 237, 213, 0.28);
  box-shadow: 0 -8px rgba(255, 237, 213, 0.18), -7px 10px #2a1205, 7px 10px #2a1205;
}

.pmu-plant,
.pmu-frame,
.pmu-lamp,
.pmu-crate {
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.pmu-plant {
  width: 54px;
  height: 78px;
  top: 64%;
  z-index: 7;
}

.plant-left {
  left: 2%;
}

.plant-right {
  right: 2%;
}

.pmu-plant::before {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 0;
  width: 24px;
  height: 25px;
  border-radius: 2px 2px 8px 8px;
  background: linear-gradient(to right, #92400e, #713f12);
  box-shadow:
    0 -3px 0 #b45309,
    /* Rebord du pot */
    inset 3px 0 5px rgba(0, 0, 0, 0.2);
  border: 1px solid #451a03;
}

/* Base commune pour le feuillage */
.pmu-plant::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 6px;
  height: 40px;
  background: #14532d;
  border-radius: 4px;
}

/* Plante de gauche : Style Fougère / Tombante (plus compacte) */
.plant-left::after {
  box-shadow:
    -12px -10px 0 4px #15803d,
    -18px 5px 0 2px #166534,
    -22px -20px 0 1px #22c55e,
    10px -8px 0 5px #15803d,
    16px -2px 0 3px #166534,
    0 -30px 0 8px #22c55e,
    -8px -40px 0 4px #4ade80,
    12px -35px 0 2px #15803d;
  border-radius: 50% 50% 10px 10px;
}

/* Plante de droite : Style Cactus / Buisson vertical (plus large) */
.plant-right::after {
  width: 16px;
  /* Élargissement du tronc central */
  height: 50px;
  background: #166534;
  box-shadow:
    -14px -15px 0 4px #15803d,
    14px -12px 0 5px #14532d,
    -22px -30px 0 2px #22c55e,
    22px -28px 0 3px #15803d,
    0 -45px 0 8px #4ade80,
    -12px -55px 0 2px #166534,
    12px -50px 0 3px #22c55e;
  border-radius: 40% 40% 5px 5px;
}

.pmu-frame {
  top: 22%;
  width: 58px;
  height: 34px;
  border: 4px solid #8a4a1c;
  background: linear-gradient(135deg, #facc15 0 28%, #991b1b 29% 60%, #1d4ed8 61% 100%);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.26);
}

.frame-left {
  left: 8%;
}

.frame-right {
  right: 19%;
  width: 46px;
  height: 40px;
}

.pmu-lamp {
  top: 12%;
  width: 28px;
  height: 42px;
  border-radius: 14px 14px 7px 7px;
  background: radial-gradient(circle at 50% 70%, rgba(254, 240, 138, 0.95), rgba(245, 158, 11, 0.68) 54%, rgba(120, 53, 15, 0.92) 56%);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.35);
}

.lamp-left {
  left: 31%;
}

.lamp-right {
  right: 31%;
}

.pmu-crate {
  bottom: 9%;
  width: 42px;
  height: 28px;
  background: repeating-linear-gradient(90deg, #92400e 0 10px, #78350f 10px 14px);
  border: 2px solid rgba(30, 15, 7, 0.78);
  box-shadow: inset 0 7px rgba(255, 255, 255, 0.08), 0 6px 8px rgba(0, 0, 0, 0.24);
}

.crate-left {
  left: 34%;
}

.crate-right {
  right: 35%;
  bottom: 11%;
}

@media (max-width: 840px) {
  .pmu-chair {
    width: 28px;
    height: 25px;
  }

  .pmu-plant {
    width: 44px;
    height: 62px;
  }

  .pmu-frame {
    width: 42px;
    height: 28px;
  }

  .pmu-crate {
    width: 34px;
    height: 24px;
  }
}


/* Ajout PMU : employé FDJ et interface de pari hippique */
.character.fdj-employee {
  width: 36px;
  height: 50px;
  z-index: 8;
  transition: none;
}

.character.fdj-employee::before {
  left: 11px;
  width: 14px;
  height: 14px;
  background: #ffd7a8;
  box-shadow:
    0 14px #16a34a,
    0 28px #ffffff,
    0 35px #dc2626,
    -8px 17px #16a34a,
    8px 17px #16a34a,
    -5px 43px #111827,
    5px 43px #111827,
    -5px 5px #15803d,
    5px 5px #dc2626,
    0 -5px #ffffff;
}

.character.fdj-employee::after {
  content: "PMU";
  position: absolute;
  left: 2px;
  top: 15px;
  padding: 1px 3px;
  border-radius: 4px;
  background: #ffffff;
  color: #15803d;
  font-size: 8px;
  font-weight: 900;
  border: 1px solid #dc2626;
}

.character.fdj-employee:hover {
  transform: translateY(-2px) scale(1.05);
  cursor: pointer;
}

/* ================== FACTEUR NPC ================== */
.character.facteur-npc {
  width: 36px;
  height: 50px;
  z-index: 8;
  transition: transform 0.2s, filter 0.2s;
  transform: scale(0.8);
  transform-origin: bottom center;
  filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.15));
}

.character.facteur-npc::before {
  content: "";
  position: absolute;
  left: 11px;
  width: 14px;
  height: 14px;
  background: #fcd34d;
  box-shadow:
    0 14px 0 0 #facc15,
    /* torse jaune */
    -5px 22px 0 -3px #78350f,
    /* sacoche marron hanche gauche */
    2px 16px 0 -5px #78350f,
    /* sangle sacoche */
    0 28px 0 0 #1e3a8a,
    /* pantalon bleu */
    0 35px 0 0 #fcd34d,
    /* pieds nus (sans chaussures) */
    -8px 17px 0 0 #eab308,
    /* bras gauche jaune foncé */
    -8px 26px 0 -4px #ffffff,
    /* lettre main gauche */
    -8px 26px 0 -5px #ef4444,
    /* tampon rouge sur la lettre */
    8px 17px 0 0 #eab308,
    /* bras droit jaune foncé */
    -5px 43px 0 0 #111827,
    /* ombre pied gauche */
    5px 43px 0 0 #111827,
    /* ombre pied droit */
    -5px 5px 0 0 #1e3a8a,
    /* visière gauche */
    5px 5px 0 0 #1e3a8a,
    /* visière droite */
    0 -5px 0 0 #1e3a8a,
    /* casquette bleue */
    0 -5px 0 -5px #facc15;
  /* logo poste sur casquette */
}

/* Lettre qui tombe */
.character.facteur-npc::after {
  content: "✉️";
  position: absolute;
  left: 18px;
  top: 22px;
  font-size: 14px;
  animation: dropLetter 12s infinite ease-in-out;
  pointer-events: none;
}

.character.facteur-npc:hover {
  transform: scale(0.82) translateY(-1px);
  filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.25));
  cursor: pointer;
}

@keyframes dropLetter {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }

  2% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  12% {
    transform: translateY(18px) rotate(-15deg);
    opacity: 0;
  }

  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
}

.fdj-dialog {
  position: absolute;
  right: 6%;
  top: 48%;
  z-index: 31;
  width: 330px;
  min-height: 330px;
  transform: translateY(-50%);
  padding: 24px 18px 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 85% 8%, rgba(255, 255, 255, 0.48), transparent 22%),
    linear-gradient(145deg, #fefce8 0%, #dcfce7 38%, #16a34a 100%);
  color: #052e16;
  border: 3px solid #facc15;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.48), inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.fdj-dialog h2 {
  margin: 0 0 8px;
  color: #14532d;
  text-shadow: 0 1px #fef3c7;
}

.fdj-horse-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.fdj-horse-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 2px solid rgba(22, 101, 52, 0.32);
  font-weight: 800;
  cursor: pointer;
}

.fdj-horse-option:hover {
  border-color: #dc2626;
  background: #fff7ed;
}

.fdj-bet-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.fdj-bet-btn {
  padding: 9px 11px;
  border: 2px solid #facc15;
  border-radius: 12px;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 45%, #dc2626 100%);
  color: white;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(20, 83, 45, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.fdj-bet-btn:hover {
  transform: translateY(-2px);
  cursor: pointer;
}

.fdj-message {
  min-height: 48px;
  margin-bottom: 0;
  font-weight: 900;
  color: #052e16;
  white-space: pre-line;
}

.fdj-message.success {
  color: #14532d;
}

.fdj-message.error {
  color: #991b1b;
}

@media (max-width: 840px) {
  .fdj-dialog {
    left: 50%;
    right: auto;
    width: 280px;
    transform: translate(-50%, -50%);
  }
}

/* Ajustement demandé : interface du barman plus chaleureuse, bouton conservé */
.bartender-dialog {
  border-radius: 20px;
  background: radial-gradient(circle at 18% 10%, rgba(254, 215, 170, 0.75), transparent 34%), linear-gradient(145deg, #fff7ed 0%, #ffedd5 52%, #fed7aa 100%);
  border: 3px solid #fdba74;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 247, 237, 0.7), 0 0 22px rgba(249, 115, 22, 0.2);
}

.bartender-dialog h2 {
  color: #9a3412;
  text-shadow: 0 1px #ffedd5;
}

.bartender-dialog p {
  color: #7c2d12;
}

.close-dialog {
  background: rgba(255, 237, 213, 0.65);
  border-radius: 50%;
}

.pmu-message {
  padding: 6px 8px;
  border-radius: 10px;
}

.pmu-message.success {
  color: #9a3412;
  background: rgba(255, 237, 213, 0.72);
  border: 1px solid rgba(251, 146, 60, 0.48);
}


/* État ivresse : effets visuels légers au Bar PMU */
.beer-level-display {
  display: none;
}

.is-drunk .pmu-stage {
  filter: saturate(1.32) contrast(1.05);
}

.is-drunk .pmu-stage::before {
  background:
    radial-gradient(circle at 20% 12%, rgba(250, 204, 21, 0.34), transparent 28%),
    radial-gradient(circle at 78% 16%, rgba(244, 63, 94, 0.24), transparent 24%),
    radial-gradient(circle at 50% 68%, rgba(34, 197, 94, 0.16), transparent 36%);
  animation: drunkGlow 4.8s infinite ease-in-out;
}

.is-drunk .bartender-dialog {
  animation: drunkDialog 5.6s infinite ease-in-out;
}

.is-drunk .pmu-decor>span,
.is-drunk .bar-label {
  animation: drunkWiggle 3.9s infinite ease-in-out;
}

.is-drunk .character.npc {
  animation: drunkNpcBob 2.8s infinite ease-in-out;
}

@keyframes drunkGlow {

  0%,
  100% {
    opacity: 0.9;
    transform: scale(1);
  }

  45% {
    opacity: 1;
    transform: scale(1.03);
  }

  70% {
    opacity: 0.78;
    transform: scale(0.99);
  }
}

@keyframes drunkDialog {

  0%,
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(-0.7deg);
  }
}

@keyframes drunkWiggle {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(1px, -1px) rotate(0.8deg);
  }
}

@keyframes drunkNpcBob {

  0%,
  100% {
    margin-top: 0;
  }

  50% {
    margin-top: -2px;
  }
}


/* Ivresse : hallucinations légères hors Bar PMU */
.is-drunk .cybercafe-screen,
.is-drunk .bank-screen,
.is-drunk #grandmaShoppingSticky {
  position: relative;
  filter: saturate(1.18) contrast(1.03);
}

.is-drunk #grandmaShoppingSticky {
  position: fixed;
  /* Keep fixed but pick up filters */
}

.is-drunk .cybercafe-screen::after,
.is-drunk .bank-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(250, 204, 21, 0.16), transparent 24%),
    radial-gradient(circle at 78% 26%, rgba(34, 197, 94, 0.10), transparent 26%),
    radial-gradient(circle at 50% 86%, rgba(244, 63, 94, 0.10), transparent 32%);
  mix-blend-mode: screen;
  animation: drunkInterfaceGlow 5.8s infinite ease-in-out;
}

.is-drunk .market-table-wrapper,
.is-drunk .bank-card,
.is-drunk .fdj-dialog {
  animation: drunkSoftBlur 15s infinite ease-in-out;
}

.is-drunk .market-table th,
.is-drunk .market-table td,
.is-drunk .bank-card,
.is-drunk .fdj-horse-option {
  text-shadow: 0 0 7px rgba(255, 237, 213, 0.28);
}

.is-drunk .fdj-dialog {
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.50), inset 0 0 0 2px rgba(255, 255, 255, 0.45), 0 0 26px rgba(250, 204, 21, 0.34);
}

.is-drunk .fdj-dialog::after {
  content: "✦";
  position: absolute;
  right: 18px;
  top: 12px;
  color: rgba(220, 38, 38, 0.36);
  font-size: 28px;
  pointer-events: none;
  animation: drunkTicketFloat 4.2s infinite ease-in-out;
}

@keyframes drunkInterfaceGlow {

  0%,
  100% {
    opacity: 0.34;
    transform: scale(1);
  }

  45% {
    opacity: 0.62;
    transform: scale(1.015);
  }

  70% {
    opacity: 0.42;
    transform: scale(0.995);
  }
}

@keyframes drunkSoftBlur {

  0%,
  38%,
  64%,
  100% {
    filter: blur(0) saturate(1.05);
  }

  50% {
    filter: blur(1.2px) saturate(1.18);
  }

  56% {
    filter: blur(0.2px) saturate(1.08);
  }
}

@keyframes drunkTicketFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.28;
  }

  50% {
    transform: translateY(5px) rotate(7deg);
    opacity: 0.55;
  }
}

/* Ivresse renforcée : mouvements, lumières mobiles et flous plus visibles */
.is-drunk .pmu-screen,
.is-drunk .cybercafe-screen,
.is-drunk .bank-screen,
.is-drunk #grandmaShoppingSticky {
  overflow: hidden;
  animation: drunkScreenSway 13s infinite ease-in-out;
}

.is-drunk .pmu-screen::before,
.is-drunk .cybercafe-screen::before,
.is-drunk .bank-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 10% 35%, rgba(255, 237, 213, 0.18), transparent 18%),
    radial-gradient(circle at 78% 18%, rgba(250, 204, 21, 0.14), transparent 22%),
    linear-gradient(110deg, transparent 24%, rgba(255, 255, 255, 0.08) 48%, transparent 72%);
  mix-blend-mode: screen;
  animation: drunkMovingLight 14s infinite ease-in-out;
}

.is-drunk .pmu-screen> :not(.bartender-dialog):not(.fdj-dialog):not(.john-dialog):not(.donor-dialog):not(.voyante-dialog):not(.banker-dialog):not(.politician-dialog):not(.grandma-dialog),
.is-drunk .cybercafe-screen>*,
.is-drunk .bank-screen>* {
  position: relative;
  z-index: 2;
}

.is-drunk .bartender-dialog,
.is-drunk .fdj-dialog,
.is-drunk .john-dialog {
  position: absolute;
}

.is-drunk .pmu-stage {
  filter: saturate(1.34) contrast(1.05);
  animation: drunkPmuStageFloat 12s infinite ease-in-out;
}

.is-drunk .market-table-wrapper,
.is-drunk .bank-card,
.is-drunk .fdj-dialog,
.is-drunk .bartender-dialog {
  animation: drunkSoftBlurStrong 16s infinite ease-in-out;
}

.is-drunk .market-table td:nth-child(2),
.is-drunk .market-table td:nth-child(3),
.is-drunk .market-table td:nth-child(4),
.is-drunk .bank-card p,
.is-drunk .fdj-horse-option span {
  animation: drunkLocalBlur 18s infinite ease-in-out;
}

.is-drunk .bank-screen::after,
.is-drunk .cybercafe-screen::after {
  animation: drunkInterfaceGlow 4.8s infinite ease-in-out, drunkOverlayDrift 7.2s infinite linear;
}

@keyframes drunkScreenSway {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  38% {
    transform: translate(0.45px, -0.35px) rotate(0.08deg);
  }

  72% {
    transform: translate(-0.35px, 0.3px) rotate(-0.07deg);
  }
}

@keyframes drunkMovingLight {

  0%,
  22%,
  100% {
    transform: translateX(-6%) translateY(-1%) rotate(0deg);
    opacity: 0.08;
  }

  52% {
    transform: translateX(7%) translateY(3%) rotate(3deg);
    opacity: 0.36;
  }

  70% {
    transform: translateX(2%) translateY(-3%) rotate(-2deg);
    opacity: 0.14;
  }
}

@keyframes drunkPmuStageFloat {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-1px) scale(1.002);
  }

  82% {
    transform: translateY(1px) scale(0.999);
  }
}

@keyframes drunkSoftBlurStrong {

  0%,
  36%,
  66%,
  100% {
    filter: blur(0) saturate(1.08);
  }

  47% {
    filter: blur(1.8px) saturate(1.24) brightness(1.04);
  }

  54% {
    filter: blur(0.3px) saturate(1.12);
  }
}

@keyframes drunkLocalBlur {

  0%,
  40%,
  58%,
  100% {
    filter: blur(0);
  }

  47% {
    filter: blur(1.7px);
  }

  51% {
    filter: blur(0.35px);
  }
}

@keyframes drunkOverlayDrift {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 26px -18px;
  }
}

/* Ajout PMU : John Lelouche, vendeur spécial */
.character.john-lelouche {
  width: 22px;
  height: 30px;
  z-index: 10;
  cursor: pointer;
  transition: left 21.6s ease-in-out, top 2.8s linear;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.38));
  animation: johnWalkBob 0.82s steps(2, end) infinite;
  transform-origin: center bottom;
  transform: scale(1.3);
}

.character.john-lelouche::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 8px;
  height: 8px;
  background: #f5c38b;
  box-shadow:
    0 8px #facc15,
    0 15px #14532d,
    0 22px #111827,
    -5px 10px #22c55e,
    5px 10px #7c3aed,
    -4px 27px #111827,
    4px 27px #111827,
    -3px 3px #1f2937,
    3px 3px #1f2937,
    0 -3px #111827;
}

.character.john-lelouche::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 15px;
  width: 7px;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(135deg, #facc15, #22c55e 52%, #7c3aed);
  border: 1px solid rgba(255, 247, 237, 0.72);
  box-shadow: 10px 4px #3f2a18;
  animation: johnSatchelSwing 0.82s steps(2, end) infinite;
}

.character.john-lelouche:hover {
  transform: translateY(-2px) scale(1.42);
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.46));
}

@keyframes johnWalkBob {

  0%,
  100% {
    margin-top: 0;
  }

  50% {
    margin-top: -2px;
  }
}

@keyframes johnSatchelSwing {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(1px);
  }
}

.john-dialog {
  position: absolute;
  left: 6%;
  top: 50%;
  z-index: 32;
  width: 330px;
  min-height: 300px;
  transform: translateY(-50%);
  padding: 24px 18px 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 10%, rgba(250, 204, 21, 0.42), transparent 27%),
    linear-gradient(145deg, #fef3c7 0%, #dcfce7 46%, #e0e7ff 100%);
  color: #172554;
  border: 3px solid #22c55e;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.50), inset 0 0 0 2px rgba(255, 255, 255, 0.48), 0 0 24px rgba(250, 204, 21, 0.25);
}

.john-dialog h2 {
  margin: 0 0 8px;
  color: #166534;
  text-shadow: 0 1px #fef3c7;
}


.john-offer-box {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 2px dashed rgba(22, 101, 52, 0.45);
  font-weight: 800;
}

.john-offer-box span {
  color: #7c2d12;
}

.john-offer-box em {
  color: #14532d;
  font-style: normal;
}

.john-choice-buttons,
.john-buy-buttons,
.john-special-actions {
  display: flex;
  gap: 9px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.john-special-actions.hidden {
  display: none !important;
}

.john-btn {
  padding: 9px 12px;
  border-radius: 13px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  color: white;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

.john-btn.accept {
  background: linear-gradient(135deg, #16a34a, #22c55e 45%, #facc15);
}

.john-btn.decline {
  background: linear-gradient(135deg, #7c2d12, #dc2626);
}

.john-btn:hover {
  transform: translateY(-2px);
}

.john-message {
  min-height: 34px;
  margin-bottom: 0;
  font-weight: 900;
  color: #172554;
  white-space: pre-line;
}

.john-message.success {
  color: #14532d;
}

.john-message.error {
  color: #991b1b;
}

.is-drunk .john-dialog {
  animation: drunkSoftBlurStrong 16s infinite ease-in-out;
}

.is-drunk .john-dialog::after {
  content: "?";
  position: absolute;
  right: 20px;
  top: 13px;
  color: rgba(124, 58, 237, 0.32);
  font-size: 30px;
  pointer-events: none;
  animation: drunkTicketFloat 4.6s infinite ease-in-out;
}

@media (max-width: 840px) {
  .john-dialog {
    left: 50%;
    width: 280px;
    transform: translate(-50%, -50%);
  }
}

.blackout-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 4s ease-in-out;
}

.blackout-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

/* Blackout Banner */
.blackout-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  text-align: center;
  pointer-events: none;
  animation: blackout-entry 0.8s ease-out forwards;
}

.blackout-banner h1 {
  margin: 0;
  font-size: 80px;
  font-family: 'Georgia', serif;
  text-transform: uppercase;
  letter-spacing: 15px;
  color: #fff;
  opacity: 0;
  animation: blackout-text-fade 1.4s ease-in-out forwards;
}

@keyframes blackout-entry {
  0% {
    transform: translate(-50%, -50%) scale(1.1);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes blackout-text-fade {
  0% {
    opacity: 0;
    letter-spacing: 25px;
    filter: blur(10px);
  }

  20% {
    opacity: 1;
    filter: blur(0);
  }

  80% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    opacity: 0;
    letter-spacing: 10px;
    filter: blur(5px);
  }
}

.macro-alert {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 22px;
  border: 1px solid rgba(248, 113, 113, 0.85);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.98), rgba(239, 68, 68, 0.82), rgba(120, 53, 15, 0.96));
  color: #fee2e2;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 22px rgba(239, 68, 68, 0.55), inset 0 0 12px rgba(254, 202, 202, 0.22);
  animation: crisisBannerPulse 1.8s ease-in-out infinite;
}

.money-box.crisis-money {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.68);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.38), inset 0 0 0 1px rgba(248, 113, 113, 0.45);
}

.major-crisis-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  box-shadow: inset 0 0 54px 18px rgba(185, 28, 28, 0.64), inset 0 0 130px rgba(127, 29, 29, 0.35);
  background:
    radial-gradient(circle at 8% 12%, rgba(248, 113, 113, 0.22), transparent 24%),
    radial-gradient(circle at 92% 82%, rgba(239, 68, 68, 0.22), transparent 28%),
    linear-gradient(90deg, rgba(127, 29, 29, 0.16), transparent 18%, transparent 82%, rgba(127, 29, 29, 0.16));
  animation: crisisLightSweep 4.8s ease-in-out infinite alternate;
}

.major-crisis-active .place-screen,
.major-crisis-active .main-screen {
  box-shadow: inset 0 0 48px rgba(185, 28, 28, 0.32), 0 0 26px rgba(127, 29, 29, 0.18);
}

.major-crisis-active .cybercafe-screen .market-table tbody td:nth-child(1),
.major-crisis-active .cybercafe-screen .market-table tbody td:nth-child(2),
.major-crisis-active .cybercafe-screen .market-table tbody td:nth-child(3),
.major-crisis-active .cybercafe-screen .market-table tbody td:nth-child(1) strong,
.major-crisis-active .cybercafe-screen .market-table .price-cell {
  color: #b91c1c;
  text-shadow: none;
  font-weight: 800;
}

.major-crisis-active .cybercafe-screen .market-table th {
  color: #991b1b;
}

.major-crisis-row.sale-blocked-row td {
  background: rgba(127, 29, 29, 0.16);
}


.major-crisis-active #loanInfo,
.major-crisis-active #loanRateDisplay {
  color: #fca5a5;
  text-shadow: 0 0 10px rgba(127, 29, 29, 0.45);
}

.major-crisis-active .pmu-stage,
.major-crisis-active .bank-card,
.major-crisis-active .market-table-wrapper {
  border-color: rgba(248, 113, 113, 0.45);
  box-shadow: 0 0 28px rgba(185, 28, 28, 0.24), inset 0 0 22px rgba(127, 29, 29, 0.16);
}

@keyframes crisisBannerPulse {

  0%,
  100% {
    filter: brightness(0.95);
  }

  50% {
    filter: brightness(1.25);
  }
}

@keyframes crisisLightSweep {
  0% {
    opacity: 0.62;
    filter: saturate(1.1);
  }

  100% {
    opacity: 0.92;
    filter: saturate(1.45);
  }
}

.exceptional-prosperity-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  box-shadow: inset 0 0 60px 20px rgba(34, 197, 94, 0.50), inset 0 0 140px rgba(187, 247, 208, 0.34);
  background:
    radial-gradient(circle at 10% 14%, rgba(134, 239, 172, 0.28), transparent 25%),
    radial-gradient(circle at 88% 80%, rgba(74, 222, 128, 0.28), transparent 30%),
    linear-gradient(90deg, rgba(187, 247, 208, 0.13), transparent 18%, transparent 82%, rgba(187, 247, 208, 0.13));
  mix-blend-mode: screen;
  animation: prosperityLightSweep 4.8s ease-in-out infinite alternate;
}

.exceptional-prosperity-active .macro-alert {
  border-color: rgba(74, 222, 128, 0.9);
  background: linear-gradient(135deg, rgba(20, 83, 45, 0.98), rgba(34, 197, 94, 0.84), rgba(132, 204, 22, 0.88));
  color: #ecfdf5;
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.68), inset 0 0 12px rgba(220, 252, 231, 0.35);
}

.exceptional-prosperity-active .top-bar,
.exceptional-prosperity-active .place-screen,
.exceptional-prosperity-active .main-screen,
.exceptional-prosperity-active .bank-card,
.exceptional-prosperity-active .bartender-dialog,
.exceptional-prosperity-active .fdj-dialog,
.exceptional-prosperity-active .john-dialog,
.exceptional-prosperity-active .market-table-wrapper {
  box-shadow: 0 0 28px rgba(34, 197, 94, 0.28), inset 0 0 24px rgba(187, 247, 208, 0.18);
}

.exceptional-prosperity-active .place-card,
.exceptional-prosperity-active .next-day-btn,
.exceptional-prosperity-active .back-btn,
.exceptional-prosperity-active .bank-btn,
.exceptional-prosperity-active .beer-btn {
  filter: saturate(1.16) brightness(1.08);
}

.exceptional-prosperity-active .cybercafe-screen .market-table tbody td:nth-child(2) {
  color: #047857;
  font-weight: 900;
  text-shadow: none;
}

.exceptional-prosperity-active #loanInfo,
.exceptional-prosperity-active #loanRateDisplay {
  color: #4ade80;
  text-shadow: 0 0 10px rgba(22, 163, 74, 0.50);
}

@keyframes prosperityLightSweep {
  0% {
    opacity: 0.62;
    filter: saturate(1.1) brightness(1.02);
  }

  100% {
    opacity: 0.92;
    filter: saturate(1.55) brightness(1.10);
  }
}

.locked-good-row td {
  background: #111827 !important;
  color: #6b7280 !important;
}

.locked-good-row td strong,
.locked-good-row .price-cell {
  color: #6b7280 !important;
}

.locked-good-row:hover td {
  background: #111827 !important;
}

.locked-good-cell {
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.2px;
}


/* Ajout PMU : prospecteur de dons */
.character.donor-prospector {
  width: 24px;
  height: 34px;
  z-index: 10;
  cursor: pointer;
  transition: left 8.8s ease-in-out, top 5s linear;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.42));
  animation: donorWalkBob 1.35s steps(2, end) infinite;
  transform-origin: center bottom;
  transform: scale(1.28);
}

.character.donor-prospector::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 3px 3px 4px 4px;
  background: #f7c996;
  box-shadow:
    0 9px #e0f2fe,
    0 16px #14b8a6,
    0 23px #0f172a,
    -5px 11px #fef3c7,
    5px 11px #fef3c7,
    -4px 29px #0f172a,
    4px 29px #0f172a,
    -2px -2px #7c2d12,
    3px -2px #7c2d12,
    0 -4px #0e7490;
}

.character.donor-prospector::after {
  content: "❤";
  position: absolute;
  left: 0;
  top: 15px;
  width: 11px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, #ecfeff, #bbf7d0);
  color: #dc2626;
  border: 1px solid #0891b2;
  font-size: 7px;
  line-height: 10px;
  text-align: center;
  box-shadow: 13px 4px #facc15, 13px 5px 0 1px #0f766e;
  animation: donorSatchelSwing 1.35s steps(2, end) infinite;
}

.character.donor-prospector:hover {
  transform: translateY(-2px) scale(1.32);
  filter: drop-shadow(0 3px 3px rgba(6, 182, 212, 0.15));
}

@keyframes donorWalkBob {

  0%,
  100% {
    margin-top: 0;
  }

  50% {
    margin-top: -1px;
  }
}

@keyframes donorSatchelSwing {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-1px);
  }
}

.donor-dialog {
  position: absolute;
  right: 5%;
  top: 50%;
  z-index: 33;
  width: 342px;
  min-height: 286px;
  transform: translateY(-50%);
  padding: 24px 18px 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 12%, rgba(250, 204, 21, 0.44), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(34, 211, 238, 0.32), transparent 25%),
    linear-gradient(145deg, #ecfeff 0%, #d1fae5 45%, #fef3c7 100%);
  color: #0f172a;
  border: 3px solid #0891b2;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.52), inset 0 0 0 2px rgba(255, 255, 255, 0.62), 0 0 28px rgba(20, 184, 166, 0.30);
}

.donor-dialog h2 {
  margin: 0 0 8px;
  color: #0f766e;
  text-shadow: 0 1px #ecfeff;
}

.donor-dialog p {
  line-height: 1.35;
}

.donor-total-display {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  border: 2px dashed rgba(8, 145, 178, 0.52);
  color: #115e59;
  font-weight: 900;
}

.donor-choice-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.donor-btn {
  padding: 10px 13px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  color: white;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.donor-btn.small-donation {
  background: linear-gradient(135deg, #0891b2, #14b8a6 48%, #84cc16);
}

.donor-btn.big-donation {
  background: linear-gradient(135deg, #0f766e, #22c55e 48%, #facc15);
}

.donor-btn:hover {
  transform: translateY(-2px);
}

.donor-btn:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
  filter: none;
}

.donor-message {
  min-height: 38px;
  margin-bottom: 0;
  font-weight: 900;
  color: #0f172a;
  white-space: pre-line;
}

.donor-message.success {
  color: #047857;
}

.donor-message.error {
  color: #991b1b;
}

.donor-close {
  color: #0f766e;
}

.is-drunk .donor-dialog {
  animation: drunkSoftBlurStrong 16s infinite ease-in-out;
}

.exceptional-prosperity-active .donor-dialog {
  box-shadow: 0 0 28px rgba(34, 197, 94, 0.28), inset 0 0 24px rgba(187, 247, 208, 0.18);
}

@media (max-width: 840px) {
  .donor-dialog {
    right: auto;
    left: 50%;
    width: 286px;
    transform: translate(-50%, -50%);
  }
}


/* Madame Zaga - Voyante Dialog */
.voyante-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 32;
  width: 484px;
  min-height: 272px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  padding: 24px 24px 20px;
  border-radius: 24px;
  background:
    /* Astres et Planètes Mystiques (Violet/Bleu) */
    radial-gradient(circle at 85% 15%, rgba(139, 92, 246, 0.5) 0%, rgba(139, 92, 246, 0.1) 6%, transparent 15%),
    radial-gradient(circle at 10% 85%, rgba(99, 102, 241, 0.4) 0%, rgba(99, 102, 241, 0.1) 8%, transparent 20%),
    /* Nébuleuses Profondes (Violet Sombre) */
    radial-gradient(ellipse at 70% 30%, rgba(109, 40, 217, 0.35) 0%, transparent 45%),
    radial-gradient(ellipse at 30% 70%, rgba(76, 29, 149, 0.45) 0%, transparent 55%),
    /* Étoiles Scintillantes */
    radial-gradient(circle at 15% 25%, #ffffff 1px, transparent 2px),
    radial-gradient(circle at 85% 65%, #ffffff 1.5px, transparent 2.5px),
    radial-gradient(circle at 50% 10%, #e9d5ff 1px, transparent 2px),
    radial-gradient(circle at 10% 60%, #c7d2fe 1.5px, transparent 2px),
    radial-gradient(circle at 35% 45%, rgba(255, 255, 255, 0.7) 0.5px, transparent 1px),
    radial-gradient(circle at 65% 25%, rgba(255, 255, 255, 0.7) 0.5px, transparent 1px),
    radial-gradient(circle at 45% 85%, rgba(255, 255, 255, 0.7) 0.5px, transparent 1px),
    radial-gradient(circle at 90% 40%, rgba(255, 255, 255, 0.7) 0.5px, transparent 1px),
    /* Fond Spatial Violet Intense */
    linear-gradient(135deg, #090514 0%, #171138 40%, #2e1065 100%);
  color: #e0e7ff;
  border: 4px solid #a855f7;
  /* Contour violet clair/magique */
  background-clip: padding-box;
  /* Aura violet sombre et profonde */
  box-shadow:
    0 0 60px 15px rgba(76, 29, 149, 0.7),
    0 25px 50px rgba(0, 0, 0, 0.8),
    inset 0 0 20px rgba(168, 85, 247, 0.5),
    inset 0 0 40px rgba(109, 40, 217, 0.3);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  animation: floatMystic 7s ease-in-out infinite, pulseAuraBox 4s ease-in-out infinite alternate;
}

@keyframes pulseAuraBox {
  0% {
    box-shadow: 0 0 60px 15px rgba(76, 29, 149, 0.7), 0 25px 50px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(168, 85, 247, 0.5);
  }

  100% {
    box-shadow: 0 0 90px 25px rgba(109, 40, 217, 0.85), 0 25px 60px rgba(0, 0, 0, 0.9), inset 0 0 30px rgba(192, 132, 252, 0.6);
  }
}

.voyante-dialog h2 {
  margin: 0 0 12px;
  color: #e9d5ff;
  text-align: center;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 30px;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9);
  letter-spacing: 2px;
}

#voyanteIntro {
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 22px;
  color: #c7d2fe;
}

.voyante-choice-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
}

.voyante-btn {
  flex: 1 1 auto;
  min-width: 90px;
  padding: 12px 18px;
  border: 1px solid rgba(168, 85, 247, 0.5);
  border-radius: 14px;
  font-weight: 900;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.voyante-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}

.voyante-btn:hover::after {
  opacity: 1;
}

.voyante-btn:hover {
  transform: translateY(-1.5px) scale(1.015);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 15px rgba(168, 85, 247, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  border-color: #d8b4fe;
}

.voyante-btn:disabled {
  opacity: 0;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.5);
}

.voyante-btn.small-donation {
  background: linear-gradient(135deg, #4f46e5, #3730a3);
}

.voyante-btn.medium-donation {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.voyante-btn.big-donation {
  background: linear-gradient(135deg, #9333ea, #6b21a8);
  box-shadow: 0 0 18px rgba(147, 51, 234, 0.6);
}

.voyante-message {
  min-height: 40px;
  margin: 10px 0 0;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: #e9d5ff;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

.voyante-close {
  position: absolute;
  right: 14px;
  top: 14px;
  border: 0;
  background: transparent;
  font-size: 28px;
  font-weight: bold;
  color: #e9d5ff;
  text-shadow: 0 0 6px rgba(168, 85, 247, 0.8);
  cursor: pointer;
}

.voyante-close:hover {
  color: #ffffff;
  transform: scale(1.2) rotate(90deg);
  transition: transform 0.3s ease;
}

@keyframes floatMystic {

  0%,
  100% {
    transform: translate(-50%, -50%);
  }

  50% {
    transform: translate(-50%, -50.8%);
  }
}

/* Sprite voyante (zaga) - Aura sombre/violette */
.character.voyante {
  width: 28px;
  height: 38px;
  z-index: 10;
  cursor: pointer;
  transition: left 6.2s linear, top 2.8s linear, transform 0.2s ease;
  /* Aura violette qui pulse */
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.8)) drop-shadow(0 0 14px rgba(76, 29, 149, 0.9));
  animation: floatMysticSprite 3.5s ease-in-out infinite, pulseAuraSprite 2.5s ease-in-out infinite alternate;
}

@keyframes pulseAuraSprite {
  0% {
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.6)) drop-shadow(0 0 12px rgba(76, 29, 149, 0.7));
  }

  100% {
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.9)) drop-shadow(0 0 22px rgba(109, 40, 217, 1));
  }
}

.character.voyante::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  width: 12px;
  height: 10px;
  border-radius: 4px 4px 3px 3px;
  background: #f5c38b;
  box-shadow:
    0 -3px 0 2px #312e81,
    0 -6px 0 0 #4c1d95,
    0 10px #4c1d95,
    0 20px #5b21b6,
    0 25px #2e1065,
    -8px 14px 0 -1px #6d28d9,
    8px 14px 0 -1px #6d28d9;
}

/* Crystal ball */
.character.voyante::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 25px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 3px 3px, #ffffff, #c4b5fd 40%, #5b21b6 80%);
  box-shadow:
    0 0 10px rgba(167, 139, 250, 0.9),
    inset -2px -2px 4px rgba(0, 0, 0, 0.5);
  animation: crystalGlow 2s ease-in-out infinite alternate;
}

@keyframes crystalGlow {
  0% {
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.7), inset -2px -2px 4px rgba(0, 0, 0, 0.5);
    filter: brightness(1);
  }

  100% {
    box-shadow: 0 0 16px rgba(196, 181, 253, 1), inset -2px -2px 4px rgba(0, 0, 0, 0.5);
    filter: brightness(1.3);
  }
}

@keyframes floatMysticSprite {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

/* Sprite de l'Alchimiste Douteuse - Aura verte toxique/violette */
.character.alchimiste {
  width: 28px;
  height: 38px;
  z-index: 10;
  cursor: pointer;
}

.character.alchimiste:hover {
  transform: translateY(-1px) scale(1.02);
}

@keyframes pulseAlchemistAura {
  0% {
    filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.65)) drop-shadow(0 0 10px rgba(124, 58, 237, 0.6));
  }

  100% {
    filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.95)) drop-shadow(0 0 22px rgba(139, 92, 246, 0.95));
  }
}

.character.alchimiste::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  width: 12px;
  height: 10px;
  border-radius: 4px 4px 3px 3px;
  background: #e0a96d;
  /* Teint caramel mystérieux */
  box-shadow:
    0 -3px 0 2px #064e3b,
    /* Capuche vert forêt sombre */
    0 -6px 0 1px #047857,
    /* Sommet de capuche émeraude */
    0 10px #065f46,
    /* Robe supérieure */
    0 20px #047857,
    /* Robe inférieure */
    0 25px #064e3b,
    /* Bas de robe */
    -7px 15px 0 -1px #d97706,
    /* Fiole d'élixir orange sur le flanc gauche */
    7px 15px 0 -1px #7c3aed;
  /* Fiole d'élixir violette sur le flanc droit */
  /* Déplacement de l'aura pour préserver le positionnement de la bulle enfant */
  filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.75)) drop-shadow(0 0 12px rgba(124, 58, 237, 0.7));
  animation: pulseAlchemistAura 3s ease-in-out infinite alternate;
}

/* Fiole Erlenmeyer mystérieuse bouillonnante dans les mains */
.character.alchimiste::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 23px;
  width: 10px;
  height: 12px;
  /* Forme d'Erlenmeyer parfaite */
  clip-path: polygon(35% 0%, 65% 0%, 65% 25%, 100% 100%, 0% 100%, 35% 25%);
  /* Récipient en verre vert translucide + Liquide violet bouillonnant */
  background: linear-gradient(to bottom, rgba(16, 185, 129, 0.4) 40%, #c084fc 40%, #7c3aed 100%);
  /* Contour vert du récipient via drop-shadows cumulés (hack CSS précis) */
  filter: drop-shadow(0.5px 0 0 #10b981) drop-shadow(-0.5px 0 0 #10b981) drop-shadow(0 0.5px 0 #10b981) drop-shadow(0 -0.5px 0 #10b981);
  animation: potionBubbleGlow 2s ease-in-out infinite alternate;
}

@keyframes potionBubbleGlow {
  0% {
    filter: drop-shadow(0.5px 0 0 #10b981) drop-shadow(-0.5px 0 0 #10b981) drop-shadow(0 0.5px 0 #10b981) drop-shadow(0 -0.5px 0 #10b981) brightness(0.95);
    background: linear-gradient(to bottom, rgba(16, 185, 129, 0.4) 48%, #c084fc 48%, #7c3aed 100%);
  }

  100% {
    filter: drop-shadow(0.5px 0 0 #34d399) drop-shadow(-0.5px 0 0 #34d399) drop-shadow(0 0.5px 0 #34d399) drop-shadow(0 -0.5px 0 #34d399) brightness(1.25);
    background: linear-gradient(to bottom, rgba(16, 185, 129, 0.4) 38%, #c084fc 38%, #7c3aed 100%);
  }
}

#potionScreenFilter {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.38;
  display: none;
  transition: background-color 1s ease, opacity 1s ease;
}

/* Bulle de dialogue suspendue au-dessus de sa tête */
.alchemist-speech-bubble {
  position: fixed;
  background: rgba(15, 23, 42, 0.96);
  border: 1.5px solid #10b981;
  border-radius: 8px;
  padding: 8px 12px;
  color: #a7f3d0;
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  line-height: 1.3;
  white-space: normal;
  max-width: 280px;
  width: max-content;
  box-sizing: border-box;
  text-align: center;
  box-shadow:
    0 0 15px rgba(16, 185, 129, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 1000000;
  opacity: 0;
  transform-origin: bottom center;
}

.alchemist-speech-bubble.pop {
  opacity: 1;
  animation: bubblePop 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.alchemist-speech-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #10b981 transparent transparent transparent;
}

.alchemist-speech-bubble::before {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(15, 23, 42, 0.96) transparent transparent transparent;
  z-index: 1;
}

.alchemist-speech-bubble.fade-out {
  opacity: 0;
  transform: scale(0.9) translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

@keyframes bubblePop {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 840px) {
  .voyante-dialog {
    width: 320px;
    min-height: 310px;
    padding: 24px 16px 16px;
  }
}


.voyante-message.error {
  font-size: 13px;
  color: #fda4af;
  text-shadow: 0 0 6px rgba(225, 29, 72, 0.6);
}


/* ==============================
   Marche du village (samedi)
   ============================== */

/* Banniere doree festive */
.market-alert {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 22px;
  white-space: nowrap;
  border: 2px solid #fbbf24;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.95), rgba(217, 119, 6, 0.92), rgba(251, 191, 36, 0.95), rgba(234, 179, 8, 0.92));
  background-size: 300% 100%;
  color: #fefce8;
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 3px rgba(120, 53, 15, 0.8), 0 0 12px rgba(251, 191, 36, 0.5);
  box-shadow:
    0 0 24px rgba(251, 191, 36, 0.65),
    0 0 48px rgba(234, 179, 8, 0.25),
    inset 0 0 14px rgba(254, 243, 199, 0.3);
  animation: marketBannerPulse 1.6s ease-in-out infinite, marketBannerShimmer 3s linear infinite;
  overflow: hidden;
  z-index: 21;
}

.market-alert::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: marketShineSwipe 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes marketBannerPulse {

  0%,
  100% {
    filter: brightness(1);
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    filter: brightness(1.2);
    transform: translate(-50%, -50%) scale(1.03);
  }
}

@keyframes marketBannerShimmer {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }
}

@keyframes marketShineSwipe {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Aura doree sur l'ecran (active tout le samedi, meme avec evenement macro) */
.village-market-active::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 17;
  pointer-events: none;
  box-shadow:
    inset 0 0 60px 18px rgba(251, 191, 36, 0.40),
    inset 0 0 140px rgba(234, 179, 8, 0.22);
  background:
    radial-gradient(circle at 12% 16%, rgba(253, 230, 138, 0.28), transparent 26%),
    radial-gradient(circle at 88% 82%, rgba(251, 191, 36, 0.28), transparent 30%),
    radial-gradient(circle at 50% 6%, rgba(254, 243, 199, 0.18), transparent 22%),
    linear-gradient(90deg, rgba(234, 179, 8, 0.10), transparent 16%, transparent 84%, rgba(234, 179, 8, 0.10));
  mix-blend-mode: screen;
  animation: marketGoldenAura 4.2s ease-in-out infinite alternate;
}

@keyframes marketGoldenAura {
  0% {
    opacity: 0.55;
    filter: saturate(1.1) brightness(1.02);
  }

  100% {
    opacity: 0.88;
    filter: saturate(1.5) brightness(1.12);
  }
}

/* Menus et elements sublimes par l'aura doree */
.village-market-active .top-bar {
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.35), inset 0 0 12px rgba(254, 243, 199, 0.12);
  border-bottom-color: rgba(251, 191, 36, 0.4);
}

.village-market-active .place-screen,
.village-market-active .main-screen {
  box-shadow: inset 0 0 42px rgba(251, 191, 36, 0.18), 0 0 24px rgba(234, 179, 8, 0.12);
}

.village-market-active .next-day-btn {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28), 0 0 16px rgba(251, 191, 36, 0.25);
}

.village-market-active .facade-cyber,
.village-market-active .facade-pmu,
.village-market-active .facade-bank,
.village-market-active .facade-doctor {
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.65), inset 0 0 20px rgba(0, 0, 0, 0.4) !important;
  border-color: #fbbf24 !important;
}

/* Confettis */
.confetti-container {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -12px;
  border-radius: 2px;
  opacity: 0.92;
  animation: confettiFall 3.5s ease-in forwards, confettiSpin 1s linear infinite;
}

@keyframes confettiFall {
  0% {
    top: -12px;
    opacity: 0.95;
  }

  85% {
    opacity: 0.85;
  }

  100% {
    top: 105vh;
    opacity: 0;
  }
}

@keyframes confettiSpin {
  0% {
    transform: rotateZ(0deg) rotateY(0deg);
  }

  25% {
    transform: rotateZ(90deg) rotateY(180deg);
  }

  50% {
    transform: rotateZ(180deg) rotateY(360deg);
  }

  75% {
    transform: rotateZ(270deg) rotateY(180deg);
  }

  100% {
    transform: rotateZ(360deg) rotateY(0deg);
  }
}

@media (max-width: 840px) {
  .market-alert {
    font-size: 12px;
    padding: 8px 16px;
  }
}



/* Village Market Button in Cybercafe */
.village-market-btn,
.back-to-cyber-btn {
  position: relative;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.village-market-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  border-color: #fbbf24;
  animation: pulseGoldButton 2s infinite;
}

.village-market-btn:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.back-to-cyber-btn {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  border-color: #818cf8;
}

.back-to-cyber-btn:hover {
  background: linear-gradient(135deg, #818cf8, #6366f1);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

@keyframes pulseGoldButton {

  0%,
  100% {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  }

  50% {
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.8), 0 0 10px rgba(251, 191, 36, 0.4);
  }
}

/* Banker Sprite - Pixel Art Rework */
.character.banker {
  z-index: 10;
  cursor: pointer;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 4px rgba(17, 24, 39, 0.4));
  animation: pulseDarkAura 4s ease-in-out infinite alternate;
  transition: transform 0.2s;
}

.character.banker:hover {
  transform: translateY(-2px) scale(1.05);
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.2)) brightness(1.02) !important;
}

@keyframes pulseDarkAura {
  0% {
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 2px rgba(17, 24, 39, 0.2));
  }

  100% {
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 8px rgba(17, 24, 39, 0.7));
  }
}

.character.banker::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 7px;
  width: 12px;
  height: 10px;
  border-radius: 4px 4px 3px 3px;
  background: #fbcfe8;
  /* Peau riche */
  box-shadow:
    /* 1. Moustache épaisse (blanche) */
    0px 4px 0 -3px #ffffff,
    -3px 5px 0 -4px #e5e7eb,
    3px 5px 0 -4px #e5e7eb,
    /* 2. Chaîne de montre en or (courbe) */
    2px 14px 0 -4px #fbbf24,
    0px 16px 0 -4px #f59e0b,
    -2px 15px 0 -4px #fbbf24,
    /* 3. Cravate rouge foncé */
    0 8px 0 -3px #991b1b,
    0 11px 0 -4px #dc2626,
    /* 4. Revers du veston bleu nuit */
    -4px 12px 0 -1px #312e81,
    4px 12px 0 -1px #312e81,
    -6px 18px 0 0 #1e1b4b,
    6px 18px 0 0 #1e1b4b,
    /* 5. Gilet intérieur gris */
    0 14px 0 0px #374151,
    /* 6. Col de chemise blanc */
    0 7px 0 -1px #ffffff,
    /* 7. Poignets (blancs) et mains */
    -11px 22px 0 -3px #ffffff,
    11px 22px 0 -3px #ffffff,
    -11px 24px 0 -3px #fbcfe8,
    11px 24px 0 -3px #fbcfe8,
    /* 8. Bras du veston */
    -9px 12px 0 -1px #1e1b4b,
    9px 12px 0 -1px #1e1b4b,
    -10px 17px 0 -2px #1e1b4b,
    10px 17px 0 -2px #1e1b4b,
    /* 9. Reflets sur chaussures cirées */
    -5px 30px 0 -4px #9ca3af,
    3px 30px 0 -4px #9ca3af,
    /* 10. Chaussures noires */
    -4px 31px 0 -2px #000000,
    4px 31px 0 -2px #000000,
    /* 11. Plis du pantalon */
    -3px 26px 0 0 #1e293b,
    3px 26px 0 0 #1e293b,
    /* 12. Pantalon sombre (base) */
    0 25px 0 1px #0f172a,
    /* 13. Veston bleu nuit (base du gros ventre) */
    0 19px 0 2px #1e1b4b,
    /* 14. Cheveux gris sur les tempes */
    -5px -1px 0 -3px #9ca3af,
    5px -1px 0 -3px #9ca3af;
}

.character.banker::after {
  content: "";
  position: absolute;
  left: 14px;
  /* Monocle sur l'œil droit */
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border: 1px solid #fbbf24;
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    /* Chaîne du monocle */
    1px 2px 0 -1px #fbbf24,
    2px 5px 0 -1px #f59e0b,
    /* Reflet soyeux sur le haut du chapeau */
    -7px -13px 0 0 #374151,
    /* Haut du chapeau haut-de-forme */
    -6px -13px 0 1px #1f2937,
    /* Ruban rouge du chapeau */
    -6px -9px 0 1px #991b1b,
    /* Bord du chapeau */
    -6px -6px 0 2px #000000;
}

.cigar {
  position: absolute;
  left: 16px;
  top: 13px;
  width: 6px;
  height: 2px;
  background: #78350f;
  border-radius: 1px;
  transform: rotate(-15deg);
  z-index: 12;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.5);
}

.cigar::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -1px;
  width: 3px;
  height: 3px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 4px #dc2626;
  animation: cigar-glow 2s infinite alternate;
}

@keyframes cigar-glow {
  0% {
    opacity: 0;
    box-shadow: 0 0 2px #dc2626;
  }

  100% {
    opacity: 1;
    box-shadow: 0 0 6px #f87171;
  }
}

.smoke-particle {
  position: absolute;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(200, 200, 200, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: smoke-drift forwards linear;
  filter: blur(2px);
  z-index: 15;
}

@keyframes smoke-drift {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }

  10% {
    opacity: 0;
  }

  100% {
    transform: translate(var(--dx), var(--dy)) scale(3);
    opacity: 0;
  }
}

/* Banker Dialog */
.banker-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #1f2937, #111827);
  border: 3px solid #fbbf24;
  border-radius: 0;
  padding: 24px 18px 18px;
  width: 330px;
  min-height: 220px;
  z-index: 300;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(251, 191, 36, 0.1);
  color: #f3f4f6;
  font-family: 'Georgia', serif;
  text-align: center;
}

.banker-upgrade-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.banker-dialog h2 {
  color: #fbbf24;
  margin: 0 0 16px 0;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid #78350f;
  padding-bottom: 8px;
}

.banker-dialog p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
  color: #d1d5db;
  font-style: italic;
}

.banker-btn {
  padding: 10px 20px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Georgia', serif;
}

.banker-btn.gold-btn,
.banker-btn.ok-btn {
  background: linear-gradient(to bottom, #fbbf24, #d97706);
  border: 1px solid #78350f;
  color: #111827;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3);
}

.banker-btn.gold-btn:hover:not(:disabled),
.banker-btn.ok-btn:hover:not(:disabled) {
  background: linear-gradient(to bottom, #fde68a, #f59e0b);
  transform: translateY(-1px);
}

.banker-btn:disabled {
  background: #374151;
  border-color: #1f2937;
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.stars-layer,
.nebula {
  pointer-events: none !important;
  /* Ces calques ne doivent jamais bloquer les clics */
}

.stars-layer.small {
  background: transparent;
  z-index: 1;
}

.banker-btn.curse-btn {
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
  margin-top: 12px;
}

.banker-btn.curse-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

.banker-close {
  color: #fbbf24;
  opacity: 0.8;
  background: rgba(120, 53, 15, 0.4);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.banker-close:hover {
  color: #fff;
  opacity: 1;
  background: rgba(217, 119, 6, 0.6);
  border-color: #fbbf24;
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}

/* Animations Politicien */
@keyframes politician-float {
  0% {
    transform: translate(-50%, -50%) translateY(0) scale(1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(131, 24, 67, 0.3);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-5px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 50px rgba(131, 24, 67, 0.6);
  }

  100% {
    transform: translate(-50%, -50%) translateY(0) scale(1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(131, 24, 67, 0.3);
  }
}

@keyframes mystic-symbols {
  0% {
    opacity: 0.1;
    transform: rotate(0deg) scale(1);
    filter: blur(2px);
  }

  50% {
    opacity: 0.25;
    transform: rotate(180deg) scale(1.1);
    filter: blur(1px);
  }

  100% {
    opacity: 0.1;
    transform: rotate(360deg) scale(1);
    filter: blur(2px);
  }
}

@keyframes flash-close {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
  }

  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
    filter: brightness(2);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    filter: brightness(0);
  }
}

.flash-close {
  animation: flash-close 0.4s ease-out forwards !important;
}

/* Politician Dialog (Mysterious & Dark) */
.grandma-dialog {
  position: fixed;
  top: 55%;
  /* Descendu un peu */
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #2d1b4d 0%, #4c1d95 100%);
  width: min(90%, 420px);
  padding: 32px;
  border-radius: 24px;
  border: 3px solid #8b5cf6;
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, 0.7),
    inset 0 0 20px rgba(139, 92, 246, 0.2);
  z-index: 9999 !important;
  color: #f1f5f9;
}

.grandma-dialog .close-dialog {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 36px;
  height: 36px;
  background: #78350f;
  /* Couleur bois */
  border: 4px solid #451a03;
  border-radius: 50%;
  color: #fbbf24;
  font-size: 26px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.grandma-dialog .close-dialog:hover {
  transform: rotate(90deg) scale(1.1);
  background: #92400e;
  color: #fff;
}

.grandma-dialog .close-dialog::after {
  /* Simulation des trous d'un bouton de couture */
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #451a03;
  border-radius: 50%;
  box-shadow: 8px 0 0 #451a03, 0 8px 0 #451a03, 8px 8px 0 #451a03;
  top: 10px;
  left: 10px;
  opacity: 0.4;
  pointer-events: none;
}

.grandma-btn.ok-btn {
  background: linear-gradient(to bottom, #8b5cf6, #6d28d9);
  color: white;
  border: 1px solid #a78bfa;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 100%;
  margin-top: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 0 #4c1d95;
}

.grandma-btn.ok-btn:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 5px 0 #4c1d95;
  filter: brightness(1.1);
}

.grandma-btn.ok-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #4c1d95;
}

.politician-dialog {
  position: fixed;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #0f172a 0%, #31111d 50%, #1e1b4b 100%);
  border: 2px solid #831843;
  border-radius: 8px;
  padding: 30px 20px 20px;
  width: 340px;
  min-height: 220px;
  z-index: 300;
  color: #94a3b8;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
  animation: politician-float 4s ease-in-out infinite;
  overflow: hidden;
}

.politician-dialog::before {
  content: "👁 ♆ ✡ ☾ ☥ ♄ 👁 ♆ ✡ ☾ ☥ ♄";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  font-size: 50px;
  color: #ef4444;
  line-height: 2;
  text-align: center;
  word-wrap: break-word;
  pointer-events: none;
  animation: mystic-symbols 40s linear infinite;
  z-index: 0;
}

.politician-dialog::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0.15) 1px,
      transparent 1px,
      transparent 2px);
  pointer-events: none;
  z-index: 1;
}

.politician-dialog h2,
.politician-intro,
.politician-choice-buttons,
.politician-message {
  position: relative;
  z-index: 2;
}

.politician-dialog .close-dialog {
  z-index: 2;
  color: #fca5a5;
  background: rgba(131, 24, 67, 0.3);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.politician-dialog .close-dialog:hover {
  color: #ffffff;
  background: rgba(225, 29, 72, 0.5);
  border-color: #fca5a5;
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 0 10px rgba(225, 29, 72, 0.6);
}

.politician-dialog h2 {
  color: #cbd5e1;
  margin: 0 0 16px 0;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 4px;
  border-bottom: 1px dashed #334155;
  padding-bottom: 8px;
  font-family: 'Georgia', serif;
}

.politician-intro {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
  color: #f1f5f9;
  font-style: italic;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}

.politician-choice-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.politician-btn {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.politician-btn.ok-btn,
.politician-btn.drink-btn {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid #475569;
  color: #cbd5e1;
}

.politician-btn.ok-btn:hover,
.politician-btn.drink-btn:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: #94a3b8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(148, 163, 184, 0.2);
}

.politician-btn.leave-btn {
  background: transparent;
  border: 1px solid #7f1d1d;
  color: #fca5a5;
}

.politician-btn.leave-btn:hover {
  background: rgba(127, 29, 29, 0.3);
  box-shadow: 0 0 10px rgba(127, 29, 29, 0.4);
}

.politician-message {
  margin-top: 15px;
  font-size: 13px;
  font-style: italic;
  color: #94a3b8;
  min-height: 20px;
}

.politician-message.success {
  color: #10b981;
}

.politician-message.error {
  color: #ef4444;
}

/* Crisis Banner */
.crisis-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #7f1d1d 0%, #450a0a 100%);
  color: #fca5a5;
  border: 4px solid #ef4444;
  box-shadow: 0 0 50px rgba(239, 68, 68, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.8);
  padding: 40px 60px;
  text-align: center;
  z-index: 9999;
  border-radius: 12px;
  animation: crisis-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  pointer-events: none;
}

.crisis-banner h1 {
  margin: 0 0 15px 0;
  font-size: 48px;
  font-family: 'Georgia', serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #fff;
  animation: crisis-burn 0.15s ease-in-out infinite alternate;
}

.crisis-banner p {
  margin: 0;
  font-size: 56px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px #ef4444, 0 0 20px #ef4444;
}

.crisis-banner.fade-out {
  animation: crisis-fade 0.5s ease-in forwards;
}

@keyframes crisis-pop {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes crisis-fade {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}

@keyframes crisis-burn {
  0% {
    text-shadow:
      0 -2px 4px #fff,
      0 -6px 12px #fef08a,
      0 -15px 25px #f59e0b,
      0 -30px 45px #ef4444,
      0 -45px 65px #991b1b;
  }

  100% {
    text-shadow:
      0 -4px 8px #fff,
      0 -10px 20px #fde047,
      0 -25px 40px #ea580c,
      0 -50px 70px #dc2626,
      0 -80px 100px #7f1d1d;
  }
}

.banker-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.character.politician {
  z-index: 10;
  animation: depressiveSway 4s ease-in-out infinite alternate;
  transition: filter 0.2s, margin-top 0.2s;
}

.character.politician:hover {
  margin-top: -3px;
  cursor: pointer;
  filter: drop-shadow(0 0 8px rgba(131, 24, 67, 0.7)) brightness(1.15) !important;
  z-index: 20;
}

@keyframes depressiveSway {
  0% {
    transform: translateY(0) rotate(0deg);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  }

  100% {
    transform: translateY(1px) rotate(3deg);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3));
  }
}

.character.politician::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  width: 12px;
  height: 10px;
  border-radius: 4px 4px 3px 3px;
  background: linear-gradient(#e2e8f0, #e2e8f0);
  background-size: 100% 8px;
  background-repeat: no-repeat;
  box-shadow:
    /* Yeux et cernes violacés d'insomniaque */
    1px 3px 0 -4px #000000,
    7px 3px 0 -4px #000000,
    1px 5px 0 -4px #831843,
    7px 5px 0 -4px #831843,
    /* Col chemise (un peu sale/froissé) */
    0 5px 0 -3px #f1f5f9,
    /* Cravate rouge défaite/de travers */
    0 7px 0 -4px #991b1b,
    1px 10px 0 -4px #dc2626,
    2px 13px 0 -4px #991b1b,
    /* Costume gris triste (épaules touchant le menton) */
    -6px 10px 0 -3px #475569,
    6px 10px 0 -3px #475569,
    /* Ombre sous les bras pour le volume */
    -4px 12px 0 -3px #334155,
    4px 12px 0 -3px #334155,
    0 11px 0 1px #475569,
    0 17px 0 1px #334155,
    /* Bras tombants plus visibles */
    -8px 13px 0 -2px #334155,
    8px 13px 0 -2px #334155,
    -8px 17px 0 -2px #334155,
    8px 17px 0 -2px #334155,
    -8px 20px 0 -3px #1e293b,
    8px 20px 0 -3px #1e293b,
    /* Pantalon */
    -3px 24px 0 -1px #1e293b,
    3px 24px 0 -1px #1e293b,
    -3px 30px 0 -2px #1e293b,
    3px 30px 0 -2px #1e293b,
    /* Chaussures fatiguées */
    -4px 34px 0 -2px #0f172a,
    4px 34px 0 -2px #000000;
}

.character.politician::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5e1;
  /* Cheveux grisonnants */
  box-shadow:
    /* Cheveux en désordre */
    7px 0px 0 0 #94a3b8,
    3px -1px 0 1px #cbd5e1,
    -1px 2px 0 -1px #94a3b8,
    9px 2px 0 -1px #94a3b8,
    -3px -2px 0 -1px #94a3b8,
    /* Mèche rebelle */
    /* DÉTAILS DU COSTUME (Pin's, Mouchoir, Boutons, Ceinture) */
    -1px 14px 0 -1px #fbbf24,
    /* Pin's en or sur le revers */
    5px 15px 0 -1px #f8fafc,
    /* Mouchoir de poche blanc */
    2px 18px 0 -1px #0f172a,
    /* Bouton de veste haut */
    3px 21px 0 -1px #0f172a,
    /* Bouton de veste bas (désaxé) */
    2px 26px 0 -1px #94a3b8;
  /* Boucle de ceinture argentée */
}

.character.grandma {
  width: 45px !important;
  height: 35px !important;
  background: rgba(255, 255, 255, 0.01) !important;
  /* Presque invisible mais capte le clic */
  position: absolute;
  transform-origin: bottom center;
  animation: grandmaBreath 4s ease-in-out infinite alternate;
  z-index: 150 !important;
  cursor: pointer !important;
  transition: all 0.3s ease;
  pointer-events: auto !important;
}

.character.grandma * {
  pointer-events: none !important;
  /* On laisse le parent gérer tout le clic sur sa surface totale */
}

/* Corps de la grand-mère (déplacé du parent vers un pseudo-élément pour centrer la hitbox) */
.character.grandma::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  width: 18px;
  height: 24px;
  background: #d8b4fe;
  border-radius: 40% 40% 10% 10%;
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.1),
    -2px 6px 0 -4px #a855f7,
    /* Châle gauche */
    12px 6px 0 -4px #a855f7;
  /* Châle droit */
}

/* Tête (déplacée pour suivre le nouveau corps) */
.grandma-head {
  position: absolute;
  top: -9px;
  left: 14px;
  width: 14px;
  height: 14px;
  background: #f1f5f9;
  border-radius: 50%;
  box-shadow:
    0 -3px 0 -1px #cbd5e1,
    /* Chignon plus fin */
    -3px -1px 0 -1px #cbd5e1,
    /* Côtés plus légers */
    3px -1px 0 -1px #cbd5e1,
    -5px 1px 0 -2px #e2e8f0,
    5px 1px 0 -2px #e2e8f0,
    3px 6px 0 -6px #000,
    /* Oeil G */
    11px 6px 0 -6px #000,
    /* Oeil D */
    2px 5px 0 -4px rgba(0, 0, 0, 0.2),
    /* Monture lunettes G */
    10px 5px 0 -4px rgba(0, 0, 0, 0.2),
    /* Monture lunettes D */
    7px 10px 0 -7px #fca5a5;
  z-index: 10;
}

@keyframes grandmaBreath {
  0% {
    transform: scale(0.99) translateY(0);
  }

  100% {
    transform: scale(1.01) translateY(-1px);
  }
}

.character.grandma:hover {
  filter: drop-shadow(0 0 3px rgba(216, 180, 254, 0.3));
  animation: none;
  transform: scale(1.04) translateY(-1.5px);
  cursor: pointer;
}

/* Le déambulateur */
.character.grandma::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 7px;
  width: 26px;
  height: 14px;
  border: 2px solid #94a3b8;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  z-index: 5;
  pointer-events: none !important;
}

/* Le chariot de course (Caddy) */
.grandma-cart {
  position: absolute;
  width: 12px;
  height: 18px;
  background: #ef4444;
  border-radius: 2px;
  bottom: -2px;
  left: 28px;
  animation: cartJiggle 0.6s ease-in-out infinite alternate;
  box-shadow:
    -2px 2px 0 rgba(0, 0, 0, 0.1),
    2px 16px 0 -7px #334155,
    /* Roues */
    10px 16px 0 -7px #334155,
    3px -10px 0 -4px #d97706,
    /* Une baguette qui dépasse ! */
    6px -12px 0 -4px #d97706,
    4px -4px 0 -3px #22c55e;
  /* Un poireau ? */
  pointer-events: none !important;
}

.grandma-cart::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 2px;
  width: 4px;
  height: 6px;
  border: 2px solid #64748b;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}



@keyframes cartJiggle {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  100% {
    transform: translateY(-3px) rotate(2deg);
  }
}

/* Gargamel the Cat - Ultra Cute & Silky */
.gargamel {
  position: absolute;
  width: 16px;
  height: 11px;
  background: #09090b;
  border-radius: 6px 6px 2px 2px;
  z-index: 15;
  cursor: help;
  animation: catBreathe 4s infinite ease-in-out;
  pointer-events: auto;
}

.gargamel .cat-head {
  position: absolute;
  top: -7px;
  left: 2px;
  width: 12px;
  height: 11px;
  background: #09090b;
  border-radius: 50%;
}

/* Oreilles pointues - Correction pour avoir les deux */
.gargamel .cat-head::before,
.gargamel .cat-head::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 6px solid #09090b;
}

.gargamel .cat-head::before {
  left: 0px;
  transform: rotate(-20deg);
}

.gargamel .cat-head::after {
  right: 0px;
  transform: rotate(20deg);
}

.gargamel .cat-eyes {
  position: absolute;
  top: 4px;
  left: 3px;
  width: 2px;
  height: 2px;
  background: #bef264;
  border-radius: 50%;
  box-shadow: 4px 0 0 #bef264;
  z-index: 2;
  animation: catBlink 6s infinite;
}

/* Petite tache blanche sur le poitrail (déplacée sur le corps) */
.gargamel::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 3px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  z-index: 1;
}

.gargamel .cat-tail {
  position: absolute;
  right: -5px;
  bottom: 1px;
  width: 8px;
  height: 3px;
  background: #09090b;
  border-radius: 0 4px 4px 0;
  transform-origin: left center;
  animation: tailWag 3s infinite ease-in-out;
}

@keyframes catBreathe {

  0%,
  100% {
    transform: scale(1) translateY(0);
  }

  50% {
    transform: scale(1.03, 0.97) translateY(0.2px);
  }
}

@keyframes catBlink {

  0%,
  95%,
  100% {
    transform: scaleY(1);
  }

  97.5% {
    transform: scaleY(0);
  }
}

@keyframes tailWag {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-35deg);
  }
}

/* Gargamel Dialog Bubble */
.gargamel-dialog {
  position: absolute;
  left: 90%;
  top: 80%;
  transform: translate(-50%, -100%);
  margin-left: 8px;
  /* Centre exact par rapport à la largeur de 16px du chat */
  margin-top: -24px;
  /* Remonté pour éviter toute superposition avec la tête du chat */
  z-index: 200;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gargamel-bubble {
  position: relative;
  background: #f8fafc;
  border: 2px solid #09090b;
  border-radius: 12px;
  padding: 6px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  min-width: 80px;
  text-align: center;
  animation: bubblePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Oreilles sur la bulle */
.gargamel-bubble::before,
.gargamel-bubble::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #09090b;
}

.gargamel-bubble::before {
  left: 10px;
  transform: rotate(-15deg);
}

.gargamel-bubble::after {
  right: 10px;
  transform: rotate(15deg);
}

.gargamel-bubble p {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  font-family: 'Outfit', sans-serif;
}

.gargamel-bubble .tail {
  display: none;
}

/* Le chariot de course (Caddy) */
.grandma-cart {
  position: absolute;
  width: 12px;
  height: 18px;
  background: #ef4444;
  border-radius: 2px;
  bottom: -2px;
  left: 28px;
  animation: cartJiggle 0.6s ease-in-out infinite alternate;
  box-shadow:
    -2px 2px 0 rgba(0, 0, 0, 0.1),
    2px 16px 0 -7px #334155,
    /* Roues */
    10px 16px 0 -7px #334155,
    3px -10px 0 -4px #d97706,
    /* Une baguette qui dépasse ! */
    6px -12px 0 -4px #d97706,
    4px -4px 0 -3px #22c55e;
  /* Un poireau ? */
  pointer-events: none !important;
}

.grandma-cart::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 2px;
  width: 4px;
  height: 6px;
  border: 2px solid #64748b;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}



@keyframes cartJiggle {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  100% {
    transform: translateY(-3px) rotate(2deg);
  }
}


/* --- LE HIPPIE (VERSION FINALE - SANS CHEVEUX) --- */
.character.hippie {
  z-index: 2000 !important;
  width: 28px;
  height: 40px;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: absolute;
  animation: hippieFloat 3s ease-in-out infinite alternate;
  background: transparent !important;
  transition: transform 0.2s ease-out;
}

.character.hippie:hover {
  transform: translateY(-4px) scale(1.03) !important;
  animation-play-state: paused;
}

/* Aura tournante du personnage */
.character.hippie::after {
  content: "";
  position: absolute;
  width: 45px;
  height: 45px;
  background: conic-gradient(from 0deg, red, orange, yellow, green, blue, indigo, violet, red);
  filter: blur(15px);
  border-radius: 50%;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: auraRotate 4s linear infinite;
  opacity: 0.2;
  /* Très discret par défaut */
  pointer-events: none;
  transition: all 0.3s ease;
}

.character.hippie:hover::after {
  opacity: 0.9;
  /* Éclatant au survol */
  width: 55px;
  height: 55px;
  filter: blur(12px) brightness(1.4);
}

/* 1. LE CORPS (TIE-DYE PSYCHÉDÉLIQUE) */
.hippie-body {
  position: absolute;
  left: 8px;
  top: 12px;
  width: 12px;
  height: 16px;
  background: linear-gradient(45deg, #f43f5e, #3b82f6, #10b981, #f59e0b);
  background-size: 300% 300%;
  animation: tieDye 4s ease infinite;
  border-radius: 0 0 2px 2px;
  z-index: 5;
  box-shadow:
    -6px 1px #3b82f6, 6px 1px #10b981,
    /* Épaules multicolores */
    -6px 9px #f43f5e, 6px 9px #f59e0b,
    /* Bas des bras multicolores */
    0 16px #4d2c00;
  /* Pantalon sombre (SANS PIEDS ICI) */
}

/* Les petits pieds fins */
.hippie-body::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 3px;
  background: transparent;
  box-shadow: -4px 0 #111827, 4px 0 #111827;
  /* Chaussures fines et discrètes */
}

@keyframes tieDye {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* 2. LA TÊTE (SUR LE CORPS) - SANS CHEVEUX */
.hippie-head {
  position: absolute;
  left: 8px;
  top: 0;
  width: 12px;
  height: 12px;
  background: #f5c38b;
  border-radius: 2px;
  z-index: 10;
}

/* Cheveux blonds très simples et courts */
.hippie-head::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: #fde68a;
  border-radius: 2px 2px 0 0;
  z-index: 12;
}

/* Symboles minuscules sur le torse */
.character.hippie .symbols-mini {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 100;
}

.character.hippie .symbols-mini span:first-child {
  font-size: 6px;
  color: white;
  margin-bottom: -1px;
}

.character.hippie .symbols-mini span:last-child {
  font-size: 9px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

@keyframes hippieFloat {
  0% {
    transform: translateY(0) rotate(-1deg);
  }

  100% {
    transform: translateY(-3px) rotate(1deg);
  }
}


/* --- INTERFACE PSYCHÉDÉLIQUE DU HIPPIE --- */
.hippie-dialog {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 480px !important;
  padding: 45px !important;
  z-index: 5000 !important;
  border-radius: 80px !important;
  text-align: center !important;
  /* overflow: hidden;  <-- SUPPRIMÉ POUR LAISSER PASSER L'AURA */

  /* Fond Psychédélique Opaque */
  background-color: #000 !important;
  background-image: url('hippie_psychedelic_bg.png') !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.8) !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none !important;
  /* On enlève la bordure classique */
}

/* Bordure Arc-en-ciel animée avec arrondis */
.hippie-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 80px;
  padding: 10px;
  /* Épaisseur de la bordure */
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
  background-size: 400% 400%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rainbowFlow 4s linear infinite !important;
  pointer-events: none;
}

/* Aura Multicolore ULTRA-INTENSE */
.hippie-dialog::after {
  content: "";
  position: absolute;
  inset: -80px;
  /* Aura encore plus gigantesque */
  z-index: -2;
  border-radius: 120px;
  background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8f00ff, #ff0000);
  filter: blur(60px) brightness(1.8);
  /* Plus brillant */
  /* Triple animation ultra-psyche */
  animation: auraRotate 5s linear infinite, auraPulse 2s ease-in-out infinite alternate, auraHue 6s linear infinite !important;
  opacity: 1 !important;
  /* Opacité maximale */
  pointer-events: none;
  mix-blend-mode: screen;
  /* Pour un effet de lumière éclatant */
}

@keyframes auraHue {
  0% {
    filter: blur(60px) brightness(1.8) hue-rotate(0deg);
  }

  100% {
    filter: blur(60px) brightness(1.8) hue-rotate(360deg);
  }
}

@keyframes auraRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes auraPulse {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  100% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes rainbowFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.hippie-dialog.hidden {
  display: none !important;
}

@keyframes rainbowBorder {
  0% {
    border-image-source: linear-gradient(0deg, red, orange, yellow, green, blue, indigo, violet);
  }

  25% {
    border-image-source: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  }

  50% {
    border-image-source: linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet);
  }

  75% {
    border-image-source: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet);
  }

  100% {
    border-image-source: linear-gradient(360deg, red, orange, yellow, green, blue, indigo, violet);
  }
}

.hippie-dialog h2 {
  font-family: 'Cinzel', serif;
  color: white;
  text-shadow: 0 0 15px rgba(0, 0, 0, 1), 0 0 10px #9333ea;
  font-size: 32px;
  margin-bottom: 20px;
}

.hippie-intro {
  font-family: 'Outfit', sans-serif;
  color: #1e1b4b;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.85);
  /* Plus opaque pour la lisibilité */
  padding: 20px;
  border-radius: 25px;
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hippie-choice-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px !important;
  /* Écart vertical pour éviter les chevauchements */
  width: 100%;
}

.hippie-btn {
  background: repeating-conic-gradient(from 0deg,
      #ffb3b3 0deg 15deg,
      #b3ffb3 15deg 30deg,
      #b3b3ff 30deg 45deg,
      #ffffb3 45deg 60deg) !important;
  background-size: 150% 150% !important;
  color: #4b0082 !important;
  border: 3px solid #fff !important;
  padding: 10px 25px !important;
  /* Taille réduite */
  border-radius: 30px !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  /* Taille réduite */
  cursor: pointer !important;
  transition: all 0.3s !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 4px 0 #9333ea !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  animation: hippieBtnRotate 5s linear infinite, hippieBtnPulse 2s ease-in-out infinite alternate !important;
}

@keyframes hippieBtnRotate {
  from {
    background-position: 0% 0%;
  }

  to {
    background-position: 100% 100%;
  }
}

@keyframes hippieBtnPulse {
  0% {
    transform: scale(1) rotate(-1deg);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  }

  100% {
    transform: scale(1.1) rotate(1deg);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.8);
  }
}

/* Variantes des boutons Hippie */
.hippie-btn.no-btn {
  background: #1e293b !important;
  /* Ardoise sombre et élégante */
  color: #f1f5f9 !important;
  font-family: 'Outfit', sans-serif !important;
  /* Police moderne et propre */
  border: 2px solid #475569 !important;
  border-radius: 15px !important;
  /* Arrondis plus modernes */
  animation: none !important;
  /* Reste statique par rapport au reste */
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.hippie-btn.no-btn:hover {
  background: #0f172a !important;
  border-color: #94a3b8 !important;
  transform: scale(1.02) !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important;
}

.hippie-btn.blue-pill-btn {
  background: repeating-conic-gradient(from 0deg, #b3e6ff 0deg 15deg, #80d4ff 15deg 30deg, #4db8ff 30deg 45deg) !important;
  color: #002d4d !important;
  border-color: #00d4ff !important;
  box-shadow: 0 0 25px rgba(0, 212, 255, 0.6), 0 4px 0 #005c70 !important;
}

.hippie-btn.red-pill-btn {
  background: repeating-conic-gradient(from 0deg, #ffb3b3 0deg 15deg, #ff8080 15deg 30deg, #ff4d4d 30deg 45deg) !important;
  color: #4d0000 !important;
  border-color: #ff4d4d !important;
  box-shadow: 0 0 25px rgba(255, 77, 77, 0.6), 0 4px 0 #700000 !important;
}

.hippie-btn.hidden {
  display: none !important;
}


/* --- EFFETS DE LA PILLULE BLEUE (HALLUCINATIONS) --- */
.hallu-orb {
  position: fixed;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  filter: blur(35px);
  background: conic-gradient(from 0deg, red, orange, yellow, green, blue, indigo, violet, red) !important;
  animation: orbFloat 8s ease-in-out forwards, auraRotate 3s linear infinite !important;
  opacity: 0.8 !important;
}

@keyframes orbFloat {
  0% {
    transform: scale(0.2) translate(0, 0);
    opacity: 0;
  }

  30% {
    opacity: 0.8;
    transform: scale(1) translate(20px, -20px);
  }

  70% {
    opacity: 0.8;
    transform: scale(1.5) translate(80px, -80px);
  }

  100% {
    transform: scale(2) translate(150px, -150px);
    opacity: 0;
  }
}

.hallu-filter {
  z-index: 9999;
  position: fixed;
  inset: 0;
  animation: filterTrippy 6s ease-in-out forwards;
  pointer-events: none;
  background: transparent !important;
}

@keyframes filterTrippy {
  0% {
    filter: hue-rotate(0deg) contrast(1);
  }

  50% {
    filter: hue-rotate(180deg) contrast(1.2) brightness(1.1);
  }

  100% {
    filter: hue-rotate(360deg) contrast(1);
  }
}

/* --- MODE TRIP INTENSE (JOUR DE LA PILLULE) --- */
body.tripping-hard-mode .next-day-btn,
body.tripping-hard-mode [data-next-day] {
  display: none !important;
}

body.tripping-hard-mode {
  animation: permanentPsyche 15s linear infinite !important;
}

/* Force le curseur fou sur TOUS les éléments pendant le trip */
body.tripping-hard-mode * {
  cursor: var(--trip-cursor, default) !important;
}

@keyframes permanentPsyche {
  0% {
    filter: hue-rotate(0deg) contrast(1.1);
  }

  50% {
    filter: hue-rotate(180deg) contrast(1.3) brightness(1.1);
  }

  100% {
    filter: hue-rotate(360deg) contrast(1.1);
  }
}

/* --- EFFETS SURPRENANTS (PILLULE BLEUE) --- */
.hallu-flash {
  position: fixed;
  inset: 0;
  z-index: 11000;
  pointer-events: none;
  animation: flashFade 0.3s ease-out forwards;
}

@keyframes flashFade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.hallu-glitch {
  animation: glitchShake 0.4s cubic-bezier(.25, .46, .45, .94) both !important;
}

@keyframes glitchShake {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-5px, 5px) skew(5deg);
  }

  40% {
    transform: translate(-5px, -5px) rotate(1deg);
  }

  60% {
    transform: translate(5px, 5px) skew(-5deg);
  }

  80% {
    transform: translate(5px, -5px) rotate(-1deg);
  }

  100% {
    transform: translate(0);
  }
}

.hallu-zoom {
  animation: zoomSurprise 0.8s ease-in-out forwards !important;
}

@keyframes zoomSurprise {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.vortex-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vortex-overlay::before,
.vortex-overlay::after {
  content: "";
  position: absolute;
  width: 300vmax;
  height: 300vmax;
  background: conic-gradient(from 0deg,
      #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff, #ff0000);
  filter: blur(60px) contrast(180%);
  opacity: 0.7;
}

.vortex-overlay::before {
  animation: vortexRotate 4s infinite linear;
}

.vortex-overlay::after {
  animation: vortexRotate 2.5s infinite linear reverse;
  mix-blend-mode: overlay;
  filter: blur(100px) hue-rotate(90deg) contrast(150%);
}

.vortex-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.vortex-core {
  position: relative;
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 50px 20px #fff,
    0 0 100px 50px #ff00ff,
    0 0 200px 100px #00ffff;
  z-index: 100000;
}

.vortex-overlay.active .vortex-core {
  animation: vortexAbsorb 5s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

@keyframes vortexRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes vortexAbsorb {
  0% {
    transform: scale(1);
    filter: brightness(1) blur(0);
  }

  40% {
    transform: scale(20);
    filter: brightness(2) blur(2px);
  }

  80% {
    transform: scale(150);
    filter: brightness(5) blur(10px);
  }

  100% {
    transform: scale(800);
    filter: brightness(20) blur(40px);
  }
}


/* --- ÉCRAN ESPACE / GALAXIE --- */
.space-screen {
  background: radial-gradient(circle at center, #0a0a2a 0%, #000000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 1000;
}

/* Génération d'étoiles via box-shadow */
.stars-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: transparent;
}

.stars-layer.small {
  box-shadow: 445px 334px #FFF, 122px 556px #FFF, 887px 12px #FFF, 456px 998px #FFF, 12px 45px #FFF, 778px 334px #FFF, 223px 887px #FFF, 998px 123px #FFF, 44px 556px #FFF, 123px 12px #FFF, 556px 778px #FFF, 887px 445px #FFF, 12px 223px #FFF, 334px 998px #FFF, 456px 12px #FFF, 778px 123px #FFF, 223px 456px #FFF, 998px 778px #FFF, 445px 44px #FFF, 122px 123px #FFF;
  /* (Répété par JS pour en avoir des centaines) */
  animation: twinkle 4s infinite ease-in-out;
}

.stars-layer.medium {
  width: 2px;
  height: 2px;
  box-shadow: 123px 445px #FFF, 556px 122px #FFF, 12px 887px #FFF, 998px 456px #FFF, 45px 12px #FFF, 334px 778px #FFF, 887px 223px #FFF, 123px 998px #FFF, 556px 44px #FFF, 12px 123px #FFF;
  animation: twinkle 6s infinite ease-in-out -2s;
}

/* Nébuleuses */
.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.25;
  mix-blend-mode: screen;
  pointer-events: none;
}

.nebula-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #7c3aed, transparent);
  top: -10%;
  left: -10%;
  animation: nebulaDrift 20s infinite alternate ease-in-out;
}

.nebula-2 {
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, #0891b2, transparent);
  bottom: -20%;
  right: -10%;
  animation: nebulaDrift 25s infinite alternate-reverse ease-in-out;
}

.nebula-3 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #db2777, transparent);
  top: 30%;
  left: 20%;
  animation: nebulaDrift 30s infinite alternate ease-in-out 2s;
}

.space-content {
  position: relative;
  z-index: 10;
  color: white;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.space-content h1 {
  font-family: 'Cinzel', serif;
  font-size: 80px;
  margin-bottom: 20px;
  letter-spacing: 15px;
  background: linear-gradient(to bottom, #fff, #a5b4fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleGlow 4s infinite alternate;
}

.come-down-btn {
  margin-top: 40px;
  padding: 15px 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: white;
  font-family: 'Patrick Hand', cursive;
  font-size: 22px;
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: all 0.3s;
}

.come-down-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes nebulaDrift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(100px, 50px) scale(1.2);
  }
}

@keyframes titleGlow {
  from {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
  }

  to {
    filter: drop-shadow(0 0 30px rgba(165, 180, 252, 0.8));
  }
}

/* --- HIPPIE GALACTIQUE --- */
.space-hippie-container {
  position: absolute;
  top: 20%;
  /* Remonté pour ne plus toucher la boîte */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  pointer-events: auto;
}

/* On réutilise les styles du hippie sans l'agrandir */
.space-hippie-container .character.hippie {
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.4));
  animation: spaceHippieFloat 6s infinite ease-in-out;
  cursor: pointer;
  pointer-events: auto;
}

@keyframes spaceHippieFloat {

  0%,
  100% {
    transform: translateY(0) rotate(1deg);
  }

  50% {
    transform: translateY(-8px) rotate(-1deg);
  }
}

.space-content {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Force la hauteur totale pour le centrage */
  z-index: 10;
}

#spaceHippieDialog {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  bottom: auto !important;
  /* Annule d'éventuels bottom: 10% */
  width: 650px !important;
  max-width: 95% !important;
  background: rgba(0, 0, 0, 0.95) !important;
  border: 2px solid #7c3aed !important;
  box-shadow: 0 0 60px rgba(124, 58, 237, 0.6) !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 40px 60px 40px !important;
  margin: 0 !important;
}

.space-dialog .hippie-avatar {
  display: none !important;
  /* On l'enlève car le perso est juste au dessus */
}

.space-dialog p {
  font-size: 20px;
  line-height: 1.5;
  color: #ddd6fe;
  text-align: center;
  width: 100%;
}

.space-dialog .dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.space-dialog .dialog-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
  pointer-events: auto !important;
  /* Force la zone à recevoir les clics */
  z-index: 105;
}

.space-dialog .hippie-btn {
  animation: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 10000 !important;
  /* Priorité absolue sur le reste */
}

.hippie-btn {
  background: #7c3aed;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: 'Patrick Hand', cursive;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
}

.hippie-btn:hover {
  background: #8b5cf6;
  transform: scale(1.05);
}

#spaceHippieDialog.hidden {
  display: none !important;
  /* Force la disparition même face aux styles d'ID */
}

/* --- ENTITÉ DIVINE --- */
.god-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 200px;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 5s ease-in-out;
}

.god-character {
  width: 40px;
  height: 80px;
  background: white;
  border-radius: 10px;
  position: relative;
  box-shadow:
    0 0 50px 20px #fff,
    0 0 100px 60px rgba(255, 255, 255, 0.8),
    0 0 200px 120px rgba(255, 255, 255, 0.4);
  filter: brightness(2) blur(1px);
  animation: godPulse 4s infinite alternate ease-in-out;
}

.god-character::before {
  content: "";
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 40px 10px #fff;
}

@keyframes godPulse {
  0% {
    transform: scale(1);
    filter: brightness(1.5) blur(1px);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.1);
    filter: brightness(3) blur(3px);
    opacity: 1;
  }
}

.god-container.hidden {
  display: none;
  opacity: 0;
}

.god-container.clickable {
  pointer-events: auto !important;
  cursor: pointer;
}

.god-container.clickable:hover .god-character {
  filter: brightness(4) blur(4px);
  transform: scale(1.1);
}

/* --- INTERFACE DIVINE --- */
.god-dialog-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 200;
  pointer-events: none;
}

.god-text {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  color: white;
  text-align: center;
  max-width: 800px;
  line-height: 1.8;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  padding: 40px;
}

.god-text.visible {
  opacity: 1;
}

.god-actions {
  margin-top: 50px;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.god-actions.visible {
  opacity: 1;
}

.god-exit-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  padding: 15px 40px;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.5s;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.god-exit-btn:hover {
  background: white;
  color: black;
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.8);
  transform: scale(1.05);
}

/* --- FONDU AU BLANC (RETOUR SUR TERRE) --- */
.whiteout-overlay {
  position: fixed;
  inset: 0;
  background: white;
  z-index: 1000000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 16s linear;
}

.whiteout-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Sprite de la fée - Fée clochette rose discrète avec ailes et aura */
.character.fee {
  width: 10px;
  height: 14px;
  background: #ec4899;
  /* Robe rose de la fée */
  border-radius: 3px 3px 5px 5px;
  box-shadow:
    0 -7px 0 #fbcfe8,
    /* Tête rose clair */
    0 -11px 0 #db2777,
    /* Chignon rose fuchsia */
    0 0 8px 3px rgba(236, 72, 153, 0.95),
    /* Aura rose très intense proche */
    0 0 16px 8px rgba(253, 224, 71, 0.85),
    /* Aura jaune intense proche */
    0 0 32px 16px rgba(244, 114, 182, 0.55),
    /* Aura rose intermédiaire */
    0 0 50px 25px rgba(254, 240, 138, 0.3),
    /* Halo jaune s'estompant */
    0 0 70px 40px rgba(251, 207, 232, 0.12);
  /* Halo rose très doux lointain */
  animation: floatFairy 1.2s ease-in-out infinite alternate;
  transition: margin-top 0.3s ease;
}

.character.fee:hover {
  margin-top: -3px;
}

.character.fee::before {
  content: "";
  position: absolute;
  left: -12px;
  top: -4px;
  width: 12px;
  height: 12px;
  background: rgba(254, 215, 226, 0.85);
  /* Ailes de fée rose translucide */
  box-shadow: 0 0 4px rgba(244, 114, 182, 0.6);
  border-radius: 90% 10% 90% 90%;
  transform-origin: right bottom;
  animation: flutterLeft 0.12s ease-in-out infinite alternate;
}

.character.fee::after {
  content: "";
  position: absolute;
  right: -12px;
  top: -4px;
  width: 12px;
  height: 12px;
  background: rgba(254, 215, 226, 0.85);
  /* Ailes de fée rose translucide */
  box-shadow: 0 0 4px rgba(244, 114, 182, 0.6);
  border-radius: 10% 90% 90% 90%;
  transform-origin: left bottom;
  animation: flutterRight 0.12s ease-in-out infinite alternate;
}

@keyframes floatFairy {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-5px);
  }
}

@keyframes flutterLeft {
  0% {
    transform: rotate(-10deg) scaleX(0.7);
  }

  100% {
    transform: rotate(15deg) scaleX(1.1);
  }
}

@keyframes flutterRight {
  0% {
    transform: rotate(10deg) scaleX(0.7);
  }

  100% {
    transform: rotate(-15deg) scaleX(1.1);
  }
}

/* Écran de blocage pour mobiles */
#blocker-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #1e1b4b 0%, #030712 100%);
  color: #f3f4f6;
  display: none;
  /* Contrôlé par JavaScript */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
  z-index: 999999;
  font-family: 'Patrick Hand', cursive, sans-serif;
}

#blocker-mobile .blocker-content {
  max-width: 480px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 40px 32px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  animation: blockerFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#blocker-mobile .blocker-icon {
  font-size: 72px;
  margin-bottom: 20px;
  animation: blockerPulse 2s infinite ease-in-out;
}

#blocker-mobile h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#blocker-mobile p {
  font-size: 18px;
  line-height: 1.6;
  color: #d1d5db;
  margin-bottom: 12px;
}

#blocker-mobile .blocker-sub {
  font-size: 14px;
  color: #9ca3af;
  margin-top: 20px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 16px;
}

@keyframes blockerFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes blockerPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* --- Gameplay Ivre Tremblements --- */
@keyframes drunk-wobble {
  0% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(0px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(2px, 1px) rotate(-2deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(2px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.drunk-button-effect {
  animation: drunk-wobble 4.5s infinite alternate ease-in-out;
  transition: transform 0.8s ease-in-out;
}

.drunk-button-effect:hover {
  animation-duration: 3s;
}

/* ==========================================================================
   L'ANALYSTE PMU CHARACTER & TERMINAL SYSTEM
   ========================================================================== */
.character.analyst {
  --shirt: #090d16;
  --pants: #090d16;
  --skin: #ffd5b5;
  --hair: #2c1a11;
  cursor: pointer;
  transform: scale(1.20) !important; /* 20% plus grand par défaut pour une carrure noble et bien visible */
  transform-origin: bottom center; /* Ancrage parfait des pieds au sol */
  transition: transform 0.25s ease-out;
  margin-top: 2px;
  margin-left: 2px;
}

.character.analyst:hover {
  transform: translateY(-1px) scale(1.25) !important; /* Mouvement vertical minimal à 1px, et zoom de survol très élégant (+5% de plus qu'à l'état de repos) */
}

/* Tête arrondie premium avec coupe courte ultra-classique intégrée (cheveux bruns en haut, peau en bas, sans aucun bug de dédoublement !) */
.character.analyst::before {
  content: "" !important;
  position: absolute;
  left: 8px;
  top: 0;
  width: 12px;
  height: 12px;
  /* Dégradé bicolore net : les 4px du haut représentent les cheveux bruns, le bas la peau. Épouse parfaitement la tête ronde ! */
  background: linear-gradient(to bottom, #2c1a11 4px, #ffd5b5 4px) !important;
  border-radius: 50% !important; /* Tête bien ronde */
  z-index: 4;
  border: none !important;
  box-shadow: none !important; /* Strictement aucune ombre de cheveux pour éliminer définitivement tout dédoublement */
}

/* Corps rigoureusement rectangulaire, sans aucune forme de boule pour le torse et les membres */
.character.analyst::after {
  content: "";
  position: absolute;
  left: 8px; /* Parfaitement aligné sous la tête */
  top: 12px;
  width: 12px; /* Largeur normale de 12px */
  height: 12px; /* Hauteur du torse */
  background: #111827; /* Veste noire rectangulaire */
  border-radius: 0; /* Strictement rectangulaire, sans bords arrondis pour éviter l'effet de boule ! */
  z-index: 3;
  border: none;
  box-shadow:
    0 12px 0 0 #111827,            /* Bas du costume/pantalon (12px de large) */
    -5px 2px 0 -4px #111827,       /* Bras gauche svelte (4px de large) */
    5px 2px 0 -4px #111827,        /* Bras droit svelte (4px de large) */
    -5px 8px 0 -4px #ffd5b5,       /* Main gauche svelte */
    5px 8px 0 -4px #ffd5b5,        /* Main droite svelte */
    -3px 18px 0 -4px #05070c,      /* Jambe gauche svelte (4px de large) */
    3px 18px 0 -4px #05070c,       /* Jambe droite svelte (4px de large) */
    -3px 22px 0 -4px #1e293b,      /* Chaussure gauche svelte (4px de large, très discrète) */
    3px 22px 0 -4px #1e293b;       /* Chaussure droite svelte (4px de large, très discrète) */
}

/* Cravate rouge soignée, hauteur doublée et pointe triangulaire au bas (comme une vraie cravate) */
.analyst-tie {
  position: absolute;
  left: 12px; /* Centrée parfaitement sur son torse de 12px */
  top: 12px;
  width: 4px;
  height: 16px; /* Taille verticale doublée (16px) */
  background: #dc2626;
  z-index: 5;
  /* Forme de cravate classique : nœud serré (2px), corps large (4px) et pointe triangulaire en bas */
  clip-path: polygon(25% 0%, 75% 0%, 100% 15%, 100% 80%, 50% 100%, 0% 80%, 0% 15%);
}

.analyst-tie::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0;
  width: 4px;
  height: 2px;
  background: #ffffff; /* Col de chemise blanc épuré parfaitement ajusté */
  z-index: -1;
}

/* Lunettes de soleil Ray-Ban classiques (branches ultra-fines et verres uniquement) */
.analyst-glasses {
  position: absolute;
  left: 8px; /* Calé sur la tête de 12px */
  top: 5px;
  width: 12px;
  height: 3px;
  background: transparent; /* Sans aucune grosse monture noire ! */
  z-index: 8;
}

/* Fines branches transversales et pont métallique */
.analyst-glasses::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 12px;
  height: 1px;
  background: #0f172a; /* Ligne fine noire pour les branches */
}

/* Les deux verres de lunettes vert bouteille G-15 de Ray-Ban */
.analyst-glasses::after {
  content: "";
  position: absolute;
  left: 2px; /* Laisse 2px de branche visible à gauche */
  top: 0;
  width: 3px;
  height: 3px;
  background: #052e16; /* Vert bouteille très foncé */
  border-radius: 1px; /* Légèrement arrondi */
  box-shadow: 5px 0 0 #052e16; /* Deuxième verre, laisse 2px de branche visible à droite et le pont au centre */
}

/* Grande Mallette de Diplomate (style rétro épuré, parfaitement alignée) */
.analyst-briefcase {
  position: absolute;
  left: -2px; /* Calée idéalement sous la main gauche */
  top: 28px;
  width: 12px;
  height: 8px;
  background: #374151; /* Couleur gris diplomat classique */
  border: 1px solid #111827;
  border-radius: 1px;
  z-index: 6;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

/* Poignée tenue par la main */
.analyst-briefcase::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -3px;
  width: 4px;
  height: 2px;
  border: 1px solid #111827;
  border-bottom: none;
  background: #ffd5b5; /* Illusion d'une main tenant la poignée */
}

/* Serrures de la mallette */
.analyst-briefcase::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 2px;
  height: 2px;
  background: #fbbf24; /* Latch doré */
  box-shadow: 6px 0 0 #fbbf24;
}

.character.analyst:hover .analyst-briefcase {
  transform: rotate(-7deg) translateY(-1px);
}

/* Mèche de cheveux dynamique ultra-classique (mèche frontale qui bouge de manière asynchrone) */
.analyst-hair-lock {
  position: absolute;
  left: 11px; /* Alignée sur son front */
  top: 1px; /* Intégrée parfaitement dans la ligne de sa coupe de cheveux */
  width: 5px;
  height: 3px;
  background: #2c1a11;
  border-radius: 1px;
  z-index: 6;
  transform-origin: top center; /* Rotation pivotante fluide depuis le haut */
}

/* Dialogue papier millimétré */
.analyst-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 35;
  width: 320px;
  min-height: 240px;
  transform: translate(-50%, -50%);
  padding: 24px 20px 20px 20px; /* Padding intérieur équilibré et symétrique */
  border-radius: 16px;
  background-color: #fcfdfd; /* Couleur papier blanc/bleuté premium */
  background-image: 
    /* Grille de carreaux bleus royal renforcée (opacité de 0.65 et épaisseur de 1.2px pour une visibilité optimale) */
    linear-gradient(rgba(37, 99, 235, 0.65) 1.2px, transparent 1.2px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.65) 1.2px, transparent 1.2px);
  background-size: 16px 16px, 16px 16px;
  background-position: 0 4px, 0 4px;
  background-repeat: repeat, repeat;
  color: #0f172a;
  border: 3px solid #1e40af;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.analyst-dialog h2 {
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  font-size: 1.3em;
  margin: 0 0 12px 0;
  text-align: center;
  color: #1e3a8a;
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 6px;
  font-weight: bold;
}

.analyst-dialog p {
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  font-size: 1.02em;
  line-height: 1.45;
  margin-bottom: 16px;
  text-align: center; /* Centrage des dialogues */
  font-weight: bold;
}

.analyst-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analyst-message {
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  font-size: 0.85em; /* Police légèrement diminuée pour une intégration parfaite */
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

.analyst-message.error {
  color: #b91c1c;
}

.analyst-message.success {
  color: #15803d;
}

/* Boutons épurés style mathématique */
.analyst-btn {
  width: 100%;
  margin: 2px 0;
  padding: 8px 12px;
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  font-size: 0.85em;
  font-weight: bold;
  border: 2px solid #1e3a8a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.analyst-btn.accept {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  color: #ffffff;
  border-color: #60a5fa;
  box-shadow: 0 4px 10px rgba(30, 58, 138, 0.35);
}

.analyst-btn.accept:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: scale(1.02);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.5);
}

.analyst-btn.decline {
  background: linear-gradient(135deg, #64748b, #475569);
  color: #ffffff;
  border-color: #94a3b8;
  box-shadow: 0 4px 10px rgba(71, 85, 105, 0.3);
}

.analyst-btn.decline:hover {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  transform: scale(1.02);
  box-shadow: 0 6px 14px rgba(100, 116, 139, 0.45);
}

/* Modale Graphique Historique */
.price-chart-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
}

.price-chart-content {
  background: #0f172a;
  border: 2px solid #3b82f6;
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  padding: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
  position: relative;
}

.price-chart-header {
  position: relative;
  display: block; /* Changé de flex à block pour un centrage optimal */
  text-align: center;
  margin-bottom: 16px;
  border-bottom: 1px solid #1e293b;
  padding-bottom: 10px;
}

.price-chart-header h2 {
  font-family: 'Cinzel', serif;
  margin: 0 auto;
  color: #60a5fa;
  font-size: 1.4em;
  text-align: center; /* Centrage horizontal parfait du titre */
}

.price-chart-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%); /* Centrage vertical du bouton de fermeture à droite */
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

.price-chart-close:hover {
  color: #ef4444;
}

.price-chart-body {
  width: 100%;
  height: 300px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
  padding: 8px;
  border: 1px solid #1e293b;
}
/* ========================================================
   PORTAL RETURN BUTTON (LEFT-ALIGNED & DISCRETE)
   ======================================================== */
.main-menu {
  position: relative;
  padding-bottom: 70px;
}

.portal-return-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 15px;
  left: 25px; /* Snapped to the left with a clean 25px breathing room */
  padding: 8px 18px;
  background: rgba(10, 10, 12, 0.7);
  border: 1px solid rgba(0, 255, 204, 0.25);
  border-radius: 6px;
  color: rgba(226, 232, 240, 0.65);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

.portal-return-btn:hover {
  color: #00ffcc;
  border-color: #00ffcc;
  background: rgba(0, 255, 204, 0.06);
  box-shadow: 0 0 15px rgba(0, 255, 204, 0.4);
  transform: translateY(-2px); /* Simplified: no more X-axis translation needed */
}

.portal-return-btn span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.portal-return-btn:hover span {
  transform: scale(1.02);
}