/* DOMINO POKER V18 — DOMINO DISTRICT PREMIUM INTEGRATED
   Généré depuis district-source.css.
   Toutes les règles sont isolées sous #homeView.
*/

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Inter:wght@500;600;700;800&display=swap');

#homeView {
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gold: #f6be4a;
  --gold2: #ffdf7c;
  --panel: rgba(3, 7, 17, .72);
}

#homeView,
#homeView * { box-sizing: border-box; }

#homeView,
#homeView #app {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020611;
}

#homeView button { font: inherit; }

#homeView .hub-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #020611;
}

#homeView .ambient-bg {
  position: absolute;
  inset: -40px;
  z-index: 0;
  background:
    linear-gradient(rgba(0, 6, 20, .26), rgba(0, 4, 15, .52)),
    url('/district-premium/domino-district-premium.png') center / cover no-repeat;
  filter: blur(24px) brightness(.48) saturate(1.15);
  transform: scale(1.08);
}

#homeView .vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.23) 82%, rgba(0,0,0,.50) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), transparent 20%, transparent 77%, rgba(0,0,0,.18));
}

#homeView .viewport {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

#homeView .viewport:active { cursor: grabbing; }

#homeView .stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.008);
  transform-origin: center;
  will-change: transform;
  overflow: hidden;
  box-shadow: 0 0 90px rgba(0,0,0,.6);
}

#homeView .district-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

#homeView .night-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 37%, rgba(255,188,61,.035), transparent 24%),
    linear-gradient(105deg, transparent 33%, rgba(72,136,255,.045) 46%, transparent 57%);
  mix-blend-mode: screen;
  animation: shimmer 8s ease-in-out infinite alternate;
}

@keyframes shimmer {
  from { opacity: .45; transform: translateX(-1%); }
  to { opacity: .9; transform: translateX(1%); }
}/* Hotspots track the original 1536x1024 artwork exactly. */
#homeView .hotspot {
  position: absolute;
  z-index: 20;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 22px;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

#homeView .hotspot span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid transparent;
  background: radial-gradient(circle, rgba(255,198,71,.0), rgba(255,198,71,0));
  transition: .18s ease;
  pointer-events: none;
}

#homeView .hotspot:hover span,
#homeView .hotspot:focus-visible span {
  border-color: rgba(255,220,126,.68);
  background: radial-gradient(circle, rgba(255,190,61,.16), rgba(255,190,61,.03) 55%, transparent 72%);
  box-shadow: 0 0 28px rgba(255,184,52,.26), inset 0 0 24px rgba(255,210,97,.10);
  transform: scale(1.025);
}

#homeView .hotspot:active span { transform: scale(.985); }

#homeView .hotspot.coffre   { left: 7.8%;  top: 14.7%; width: 27.8%; height: 30.2%; }
#homeView .hotspot.casino   { left: 34.7%; top:  8.0%; width: 31.0%; height: 47.2%; }
#homeView .hotspot.tour     { left: 60.6%; top:  7.0%; width: 15.7%; height: 27.5%; }
#homeView .hotspot.boutique { left: 73.7%; top: 22.0%; width: 21.5%; height: 27.8%; }
#homeView .hotspot.social   { left:  6.0%; top: 39.2%; width: 28.0%; height: 25.7%; }
#homeView .hotspot.lab      { left: 70.3%; top: 46.0%; width: 26.0%; height: 25.0%; }
#homeView .hotspot.defense  { left: 24.0%; top: 61.0%; width: 52.5%; height: 28.5%; border-radius: 45%; }

#homeView .glass {
  border: 1px solid rgba(255,205,92,.28);
  background:
    linear-gradient(180deg, rgba(11,16,30,.82), rgba(3,7,15,.76));
  box-shadow:
    0 12px 34px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 24px rgba(255,176,43,.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#homeView .district-title {
  position: absolute;
  z-index: 35;
  left: 18px;
  bottom: 18px;
  padding: 10px 14px 11px;
  border-radius: 14px;
  pointer-events: none;
}

#homeView .district-title small {
  display: block;
  font-size: 7px;
  letter-spacing: .20em;
  color: #d9a83e;
  font-weight: 900;
}

#homeView .district-title strong {
  display: block;
  margin-top: 3px;
  font-family: Orbitron, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  color: #fff2bf;
  text-shadow: 0 0 12px rgba(255,181,42,.28);
}

#homeView .mobile-hint {
  display: none;
  position: absolute;
  z-index: 45;
  left: 50%;
  top: max(80px, calc(env(safe-area-inset-top) + 72px));
  transform: translateX(-50%);
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 9px;
  color: #e8cf97;
  white-space: nowrap;
  pointer-events: none;
  transition: .25s ease;
}

#homeView .mobile-hint.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-4px);
}

#homeView .modal-backdrop {
  position: absolute;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,2,8,.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: .18s ease;
}

#homeView .modal-backdrop.visible { opacity: 1; }
#homeView .modal-backdrop[hidden] { display: none; }

#homeView .modal-card {
  position: relative;
  width: min(430px, 100%);
  padding: 28px 24px 23px;
  border-radius: 24px;
  text-align: center;
  transform: translateY(10px) scale(.98);
  transition: .18s ease;
}

#homeView .modal-backdrop.visible .modal-card {
  transform: translateY(0) scale(1);
}

#homeView .close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: #d4d9e4;
  font-size: 23px;
  cursor: pointer;
}

#homeView .modal-icon {
  font-size: 38px;
  filter: drop-shadow(0 0 13px rgba(255,187,48,.38));
}

#homeView .modal-card small {
  display: block;
  margin-top: 8px;
  color: #d7a848;
  font-weight: 900;
  letter-spacing: .18em;
  font-size: 8px;
}

#homeView .modal-card h2 {
  margin: 5px 0 9px;
  font-family: Orbitron, sans-serif;
  color: #fff0b5;
  font-size: 22px;
  letter-spacing: .06em;
}

#homeView .modal-card p {
  margin: 0 auto 18px;
  max-width: 340px;
  color: #bbc4d7;
  font-size: 12px;
  line-height: 1.6;
}

#homeView .primary {
  width: 100%;
  border: 1px solid #f5bd4b;
  border-radius: 14px;
  padding: 13px;
  background: linear-gradient(135deg, #ffe594, #d89124);
  color: #171006;
  font-weight: 900;
  letter-spacing: .07em;
  font-size: 10px;
  cursor: pointer;
}

#homeView .primary.ack {
  background: rgba(255,255,255,.08);
  color: #d9cba8;
}


@media (max-width: 720px) {
  #homeView .mobile-hint { display: block; }

  #homeView .district-title {
    left: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 8px 10px;
  }

  #homeView .district-title strong { font-size: 9px; }
  #homeView .district-title small { font-size: 5.5px; }

}/* ================================
   DOMINO DISTRICT - PREMIUM HOVER
================================ */
#homeView .hotspot {
  transition: transform .22s ease, filter .22s ease;
}

#homeView .hotspot:hover {
  transform: scale(1.035);
  filter: brightness(1.12);
  z-index: 30;
}

#homeView .hotspot span {
  transition:
    background .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    transform .22s ease;
}

#homeView .hotspot:hover span {
  border-color: rgba(255, 218, 126, .90);

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 200, 73, .22) 0%,
      rgba(255, 174, 34, .10) 45%,
      transparent 72%
    );

  box-shadow:
    0 0 20px rgba(255, 181, 45, .35),
    0 0 50px rgba(255, 153, 30, .18),
    inset 0 0 24px rgba(255, 222, 137, .13);

  transform: scale(1.025);
}

#homeView .hotspot.boutique:hover span {
  border-color: rgba(232, 118, 255, .90);

  background:
    radial-gradient(
      ellipse,
      rgba(214, 81, 255, .22),
      transparent 70%
    );

  box-shadow:
    0 0 28px rgba(220, 69, 255, .38);
}

#homeView .hotspot.lab:hover span {
  border-color: rgba(75, 175, 255, .90);

  background:
    radial-gradient(
      ellipse,
      rgba(54, 157, 255, .20),
      transparent 70%
    );

  box-shadow:
    0 0 30px rgba(48, 156, 255, .35);
}

#homeView .hotspot.social:hover span {
  border-color: rgba(255, 106, 84, .85);

  background:
    radial-gradient(
      ellipse,
      rgba(255, 80, 65, .16),
      transparent 70%
    );

  box-shadow:
    0 0 28px rgba(255, 81, 61, .28);
}/* =========================================
   DOMINO DISTRICT - CINEMATIC BUILDING FOCUS
========================================= */
#homeView .stage {
  transition:
    filter .38s ease,
    box-shadow .38s ease;
}/* Quand un bâtiment est ciblé */
#homeView .stage.is-focusing .district-art {
  filter:
    brightness(.72)
    saturate(.88)
    contrast(1.04);
  transition: filter .38s ease;
}/* Le bâtiment sélectionné reste mis en valeur */
#homeView .hotspot.is-selected {
  z-index: 60;
}

#homeView .hotspot.is-selected span {
  border-color: rgba(255, 226, 142, .95);

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 207, 93, .26) 0%,
      rgba(255, 168, 31, .12) 46%,
      transparent 72%
    );

  box-shadow:
    0 0 22px rgba(255, 198, 74, .48),
    0 0 60px rgba(255, 153, 27, .32),
    0 0 100px rgba(255, 136, 20, .12),
    inset 0 0 28px rgba(255, 226, 142, .16);

  transform: scale(1.045);
}/* Casino : halo or */
#homeView .hotspot.casino.is-selected span,
#homeView .hotspot.coffre.is-selected span,
#homeView .hotspot.tour.is-selected span {
  border-color: rgba(255, 219, 118, 1);
}/* Boutique : violet */
#homeView .hotspot.boutique.is-selected span {
  border-color: rgba(230, 135, 255, 1);

  background:
    radial-gradient(
      ellipse,
      rgba(198, 82, 255, .28),
      transparent 72%
    );

  box-shadow:
    0 0 30px rgba(213, 91, 255, .55),
    0 0 70px rgba(165, 54, 255, .25);
}/* Cascade Lab : bleu */
#homeView .hotspot.lab.is-selected span {
  border-color: rgba(94, 195, 255, 1);

  background:
    radial-gradient(
      ellipse,
      rgba(61, 169, 255, .26),
      transparent 72%
    );

  box-shadow:
    0 0 30px rgba(68, 174, 255, .55),
    0 0 70px rgba(38, 127, 255, .22);
}/* Social : rouge/orange */
#homeView .hotspot.social.is-selected span {
  border-color: rgba(255, 128, 92, 1);

  background:
    radial-gradient(
      ellipse,
      rgba(255, 92, 65, .24),
      transparent 72%
    );

  box-shadow:
    0 0 30px rgba(255, 95, 60, .48),
    0 0 70px rgba(255, 76, 39, .20);
}/* =========================================
   CASINO PREMIUM OPTIONS
========================================= */
#homeView .modal-options {
  display: grid;
  gap: 10px;
  margin: 16px 0 4px;
}

#homeView .modal-option {
  width: 100%;
  border: 1px solid rgba(255, 203, 94, .18);
  border-radius: 16px;
  padding: 12px 13px;

  display: grid;
  grid-template-columns: 42px 1fr 22px;
  align-items: center;
  gap: 11px;

  color: white;
  background:
    linear-gradient(
      135deg,
      rgba(255, 205, 92, .09),
      rgba(255, 255, 255, .025) 45%,
      rgba(0, 0, 0, .12)
    );

  cursor: pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

#homeView .modal-option:hover {
  transform: translateY(-2px);

  border-color: rgba(255, 211, 105, .58);

  background:
    linear-gradient(
      135deg,
      rgba(255, 207, 91, .18),
      rgba(255, 255, 255, .04) 48%,
      rgba(0, 0, 0, .12)
    );

  box-shadow:
    0 8px 20px rgba(0, 0, 0, .22),
    0 0 22px rgba(255, 180, 43, .10);
}

#homeView .option-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  font-size: 21px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 225, 137, .18),
      rgba(154, 93, 16, .18)
    );

  border: 1px solid rgba(255, 203, 91, .20);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}

#homeView .option-copy {
  min-width: 0;
  text-align: left;
}

#homeView .option-copy strong {
  display: block;

  font-family: Orbitron, sans-serif;

  font-size: 10px;
  letter-spacing: .07em;

  color: #ffe5a0;
}

#homeView .option-copy small {
  display: block;

  margin-top: 4px;

  font-size: 9px;
  line-height: 1.35;

  color: #aab3c7;
}

#homeView .option-arrow {
  font-size: 25px;
  color: #e7b750;

  transition: transform .18s ease;
}

#homeView .modal-option:hover .option-arrow {
  transform: translateX(3px);
}
#homeView .profile-hitbox {
  position: absolute;
  left: 2%;
  top: 2%;
  width: 21%;
  height: 9%;
  z-index: 70;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
}

#homeView .profile-hitbox:hover {
  background: rgba(255, 215, 110, .05);
  box-shadow:
    0 0 18px rgba(255, 200, 80, .18),
    inset 0 0 18px rgba(255, 220, 130, .06);
}/* ===== DOMINO DISTRICT — HUD PREMIUM ===== */
#homeView .district-hud {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 200;
  pointer-events: none;
}

#homeView .hud-profile {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;

  min-width: 245px;
  padding: 10px 14px 10px 10px;

  border-radius: 18px;
  border: 1px solid rgba(255, 211, 105, .42);

  background:
    linear-gradient(
      135deg,
      rgba(22, 18, 12, .96),
      rgba(7, 8, 11, .94)
    );

  box-shadow:
    0 10px 30px rgba(0, 0, 0, .38),
    0 0 20px rgba(255, 190, 60, .10),
    inset 0 1px 0 rgba(255, 235, 170, .08);

  color: white;
  cursor: pointer;
  text-align: left;

  backdrop-filter: blur(12px);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

#homeView .hud-profile:hover {
  transform: translateY(-2px);

  border-color: rgba(255, 218, 120, .75);

  box-shadow:
    0 14px 36px rgba(0, 0, 0, .45),
    0 0 26px rgba(255, 190, 60, .18);
}

#homeView .hud-avatar {
  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  flex: 0 0 54px;

  border-radius: 15px;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255, 223, 130, .28),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #302313,
      #111216
    );

  border: 1px solid rgba(255, 210, 100, .52);

  box-shadow:
    inset 0 0 18px rgba(255, 202, 70, .08),
    0 0 14px rgba(255, 185, 50, .10);

  font-size: 27px;
}

#homeView .hud-player-info {
  flex: 1;
  min-width: 0;
}

#homeView .hud-player-info > strong {
  display: block;

  font-size: 16px;
  font-weight: 1000;

  letter-spacing: .8px;

  color: #fff3ce;

  text-shadow:
    0 0 10px rgba(255, 201, 86, .18);
}

#homeView .hud-level-row {
  margin-top: 6px;
}

#homeView .hud-level-row > span {
  display: block;

  margin-bottom: 5px;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .9px;

  color: #d0a94e;
}

#homeView .hud-xp {
  width: 100%;
  height: 7px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(255, 255, 255, .08);

  border: 1px solid rgba(255, 255, 255, .05);
}

#homeView .hud-xp-fill {
  width: 62%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #b87c21,
      #f0c95d,
      #fff0a6
    );

  box-shadow:
    0 0 12px rgba(255, 204, 80, .32);
}

@media (max-width: 720px) {
  #homeView .district-hud {
    top: 10px;
    left: 10px;
  }

  #homeView .hud-profile {
    min-width: 190px;
    padding: 8px 10px 8px 8px;
    border-radius: 15px;
    gap: 9px;
  }

  #homeView .hud-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 22px;
  }

  #homeView .hud-player-info > strong {
    font-size: 13px;
  }

  #homeView .hud-level-row > span {
    font-size: 8px;
  }
}/* ===== DOMINO DISTRICT HUD — RESSOURCES PREMIUM ===== */
#homeView .district-hud {
  position: fixed;
  top: 16px;
  left: 18px;
  right: 18px;
  z-index: 200;

  display: flex;
  align-items: center;

  pointer-events: none;
}

#homeView .hud-profile {
  position: relative;
  z-index: 3;
}

#homeView .hud-resources {
  position: absolute;
  left: 50%;
  top: 4px;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 18px;

  pointer-events: auto;
}

#homeView .hud-resource {
  appearance: none;
  -webkit-appearance: none;

  width: 190px;
  height: 54px;

  display: grid;
  grid-template-columns: 40px 1fr 34px;
  align-items: center;
  gap: 8px;

  padding: 5px 7px 5px 9px;

  border-radius: 14px;
  border: 1px solid rgba(255, 215, 110, .30);

  background:
    linear-gradient(
      180deg,
      rgba(19, 22, 29, .96),
      rgba(7, 9, 13, .96)
    );

  color: white;
  cursor: pointer;

  box-shadow:
    0 10px 26px rgba(0, 0, 0, .40),
    inset 0 1px 0 rgba(255, 255, 255, .06);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

#homeView .hud-resource:hover {
  transform: translateY(-2px);
}

#homeView .resource-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-size: 21px;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255,255,255,.20),
      rgba(255,255,255,.03) 55%,
      transparent 70%
    );

  border: 1px solid rgba(255,255,255,.10);
}

#homeView .resource-info {
  min-width: 0;
  text-align: left;
}

#homeView .resource-info small {
  display: block;

  margin-bottom: 2px;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: .9px;

  color: rgba(255,255,255,.55);
}

#homeView .resource-info strong {
  display: block;

  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .3px;

  white-space: nowrap;
}

#homeView .resource-plus {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  font-size: 21px;
  font-weight: 900;

  background:
    linear-gradient(
      180deg,
      rgba(57, 60, 69, .95),
      rgba(20, 22, 28, .95)
    );

  border: 1px solid rgba(255, 218, 116, .36);

  color: #ffd86f;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09);
}/* ÉNERGIE */
#homeView .energy-resource {
  border-color: rgba(72, 211, 255, .28);

  box-shadow:
    0 10px 26px rgba(0,0,0,.40),
    0 0 18px rgba(47, 202, 255, .07),
    inset 0 1px 0 rgba(255,255,255,.05);
}

#homeView .energy-resource .resource-icon {
  color: #84e9ff;

  background:
    radial-gradient(
      circle,
      rgba(51, 203, 255, .24),
      rgba(21, 70, 91, .20) 55%,
      transparent 72%
    );

  border-color: rgba(79, 217, 255, .24);

  filter: drop-shadow(0 0 7px rgba(55, 210, 255, .28));
}

#homeView .energy-resource .resource-info strong {
  color: #d7f8ff;
}/* DOMINO COINS */
#homeView .coins-resource {
  border-color: rgba(177, 126, 255, .30);

  box-shadow:
    0 10px 26px rgba(0,0,0,.40),
    0 0 18px rgba(155, 91, 255, .08),
    inset 0 1px 0 rgba(255,255,255,.05);
}

#homeView .coins-resource .resource-icon {
  background:
    radial-gradient(
      circle,
      rgba(165, 103, 255, .26),
      rgba(67, 35, 103, .20) 55%,
      transparent 72%
    );

  border-color: rgba(187, 137, 255, .25);

  filter: drop-shadow(0 0 8px rgba(157, 96, 255, .30));
}

#homeView .coins-resource .resource-info strong {
  color: #ddc9ff;
}/* ===== MOBILE ===== */
@media (max-width: 720px) {

  #homeView .district-hud {
    top: 8px;
    left: 8px;
    right: 8px;
  }

  #homeView .hud-profile {
    min-width: 175px;
  }

  #homeView .hud-resources {
    top: 67px;
    left: 0;

    transform: none;

    gap: 6px;
  }

  #homeView .hud-resource {
    width: 145px;
    height: 44px;

    grid-template-columns: 30px 1fr 26px;

    padding: 4px 5px;
    gap: 5px;

    border-radius: 11px;
  }

  #homeView .resource-icon {
    width: 29px;
    height: 29px;
    font-size: 16px;
  }

  #homeView .resource-info small {
    font-size: 6px;
  }

  #homeView .resource-info strong {
    font-size: 12px;
  }

  #homeView .resource-plus {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 17px;
  }
}/* ===== HUD ACTIONS — DROITE DE L'ÉCRAN ===== */
#homeView .hud-actions {
  position: absolute;
  top: 4px;
  right: 0;

  display: flex;
  align-items: center;
  gap: 9px;

  pointer-events: auto;
}

#homeView .hud-action {
  position: relative;

  min-width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 0 12px;

  border-radius: 13px;

  border: 1px solid rgba(255, 205, 90, .32);

  background:
    linear-gradient(
      180deg,
      rgba(22, 24, 30, .96),
      rgba(8, 10, 14, .96)
    );

  color: #f6e6bb;

  font-size: 17px;
  font-weight: 900;

  cursor: pointer;

  box-shadow:
    0 8px 24px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

#homeView .hud-action:hover {
  transform: translateY(-2px);

  border-color: rgba(255, 215, 110, .70);

  box-shadow:
    0 10px 26px rgba(0,0,0,.45),
    0 0 18px rgba(255, 190, 60, .14);
}

#homeView .hud-menu {
  min-width: 92px;
}

#homeView .hud-menu span {
  font-size: 11px;
  letter-spacing: .7px;
}

#homeView .hud-badge {
  position: absolute;
  top: -6px;
  right: -5px;

  min-width: 18px;
  height: 18px;

  display: grid;
  place-items: center;

  padding: 0 4px;

  border-radius: 999px;

  background: #d83b32;
  color: white;

  border: 2px solid #090b0f;

  font-size: 9px;
  font-weight: 1000;

  box-shadow: 0 3px 10px rgba(220,50,40,.35);
}/* ===== MOBILE ===== */
@media (max-width: 720px) {

  #homeView .hud-actions {
    top: 2px;
    right: 0;
    gap: 5px;
  }

  #homeView .hud-action {
    min-width: 38px;
    width: 38px;
    height: 38px;

    padding: 0;

    border-radius: 10px;

    font-size: 14px;
  }

  #homeView .hud-menu {
    width: 38px;
    min-width: 38px;
  }

  #homeView .hud-menu span {
    display: none;
  }
}/* ========================================
   DOMINO DISTRICT — FONTAINE ANIMÉE V1
======================================== */
#homeView .fountain-fx {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 11%;
  height: 16%;

  transform: translate(-50%, -50%);

  z-index: 15;
  pointer-events: none;
}

#homeView .fountain-glow {
  position: absolute;
  left: 50%;
  bottom: 7%;

  width: 82%;
  height: 30%;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(80, 210, 255, .42) 0%,
      rgba(30, 135, 255, .18) 42%,
      transparent 72%
    );

  filter: blur(5px);

  animation: fountainGlow 2.4s ease-in-out infinite;
}

#homeView .fountain-jet {
  position: absolute;
  left: 50%;
  bottom: 24%;

  width: 6%;
  height: 49%;

  transform-origin: bottom;

  border-radius: 50% 50% 25% 25%;

  background:
    linear-gradient(
      180deg,
      rgba(220, 250, 255, .05),
      rgba(146, 231, 255, .85) 28%,
      rgba(59, 171, 255, .72) 74%,
      transparent
    );

  box-shadow:
    0 0 7px rgba(110, 224, 255, .65),
    0 0 18px rgba(55, 159, 255, .38);

  filter: blur(.5px);

  animation: fountainJet 1.45s ease-in-out infinite alternate;
}

#homeView .jet-1 {
  transform: translateX(-50%);
}

#homeView .jet-2 {
  width: 3%;
  height: 40%;

  opacity: .65;

  animation-delay: -.7s;
}

#homeView .fountain-ring {
  position: absolute;
  left: 50%;
  bottom: 14%;

  width: 48%;
  height: 15%;

  transform: translateX(-50%);

  border-radius: 50%;

  border: 2px solid rgba(95, 216, 255, .65);

  opacity: 0;

  box-shadow:
    0 0 10px rgba(61, 182, 255, .35);

  animation: fountainRipple 2.2s ease-out infinite;
}

#homeView .ring-2 {
  animation-delay: -1.1s;
}

#homeView .fountain-spark {
  position: absolute;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #d9f8ff;

  box-shadow:
    0 0 7px rgba(127, 229, 255, .9);

  opacity: 0;

  animation: fountainSpark 1.8s ease-out infinite;
}

#homeView .spark-1 {
  left: 42%;
  bottom: 42%;
}

#homeView .spark-2 {
  left: 55%;
  bottom: 48%;
  animation-delay: -.6s;
}

#homeView .spark-3 {
  left: 49%;
  bottom: 35%;
  animation-delay: -1.2s;
}

@keyframes fountainGlow {
  0%, 100% {
    opacity: .55;
    transform: translateX(-50%) scale(.92);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes fountainJet {
  from {
    opacity: .60;
    transform: translateX(-50%) scaleY(.88);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scaleY(1.08);
  }
}

@keyframes fountainRipple {
  0% {
    opacity: .75;
    transform: translateX(-50%) scale(.45);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.55);
  }
}

@keyframes fountainSpark {
  0% {
    opacity: 0;
    transform: translate(0, 8px) scale(.5);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(4px, -28px) scale(1.3);
  }
}
#homeView .fountain-fx {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 12%;
  height: 17%;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;
}

#homeView .fountain-glow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 90%;
  height: 32%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(80, 220, 255, .55) 0%,
    rgba(40, 150, 255, .25) 45%,
    transparent 72%
  );
  filter: blur(6px);
  animation: fountainGlow 2s ease-in-out infinite;
}

#homeView .fountain-jet {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: 7px;
  height: 58%;
  transform: translateX(-50%);
  transform-origin: bottom;
  border-radius: 999px;
  background: linear-gradient(
    to top,
    rgba(80, 180, 255, .15),
    rgba(120, 225, 255, .95),
    rgba(235, 255, 255, 1)
  );
  box-shadow:
    0 0 10px rgba(100, 220, 255, .85),
    0 0 22px rgba(50, 165, 255, .55);
  animation: fountainJet 1.1s ease-in-out infinite alternate;
}

#homeView .jet-2 {
  width: 4px;
  height: 48%;
  opacity: .65;
  animation-delay: -.55s;
}

#homeView .fountain-ring {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 42%;
  height: 14%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid rgba(110, 225, 255, .85);
  opacity: 0;
  box-shadow: 0 0 12px rgba(70, 190, 255, .45);
  animation: fountainRipple 1.9s ease-out infinite;
}

#homeView .ring-2 {
  animation-delay: -.95s;
}

#homeView .fountain-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  box-shadow:
    0 0 8px rgba(180, 245, 255, 1),
    0 0 14px rgba(80, 190, 255, .8);
  opacity: 0;
  animation: fountainSpark 1.5s ease-out infinite;
}

#homeView .spark-1 {
  left: 42%;
  bottom: 44%;
}

#homeView .spark-2 {
  left: 55%;
  bottom: 50%;
  animation-delay: -.5s;
}

#homeView .spark-3 {
  left: 49%;
  bottom: 39%;
  animation-delay: -1s;
}

@keyframes fountainGlow {
  0%, 100% {
    opacity: .55;
    transform: translateX(-50%) scale(.9);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes fountainJet {
  from {
    transform: translateX(-50%) scaleY(.82);
    opacity: .7;
  }

  to {
    transform: translateX(-50%) scaleY(1.08);
    opacity: 1;
  }
}

@keyframes fountainRipple {
  0% {
    opacity: .8;
    transform: translateX(-50%) scale(.45);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.65);
  }
}

@keyframes fountainSpark {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(.4);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-32px) scale(1.25);
  }
}/* ========================================
   DOMINO DISTRICT — CASCADES V1
======================================== */
#homeView .waterfall-fx {
  position: absolute;
  z-index: 18;
  pointer-events: none;
  overflow: hidden;

  border-radius: 40% 40% 48% 48%;

  filter:
    drop-shadow(0 0 8px rgba(70, 190, 255, .45))
    drop-shadow(0 0 18px rgba(30, 120, 255, .25));
}/* Grande cascade gauche */
#homeView .waterfall-left {
  left: 9.5%;
  top: 70%;
  width: 7%;
  height: 27%;
  transform: rotate(3deg);
}/* Grande cascade droite */
#homeView .waterfall-right {
  left: 81.5%;
  top: 70%;
  width: 7%;
  height: 28%;
  transform: rotate(-2deg);
}

#homeView .waterfall-flow {
  position: absolute;
  inset: -45% 0 0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(220, 250, 255, .12) 0px,
      rgba(130, 225, 255, .82) 4px,
      rgba(55, 150, 255, .55) 9px,
      rgba(235, 255, 255, .72) 13px,
      rgba(50, 140, 255, .28) 18px
    );

  opacity: .72;

  filter: blur(1px);

  animation: waterfallFlow 1.15s linear infinite;
}

#homeView .waterfall-shine {
  position: absolute;
  left: 28%;
  top: -25%;

  width: 18%;
  height: 135%;

  transform: rotate(5deg);

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(230, 255, 255, .92),
      rgba(120, 220, 255, .40),
      transparent
    );

  filter: blur(3px);

  animation: waterfallShine 2s ease-in-out infinite;
}

#homeView .waterfall-mist {
  position: absolute;

  left: -25%;
  bottom: -7%;

  width: 150%;
  height: 28%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(210, 250, 255, .58),
      rgba(75, 185, 255, .20) 45%,
      transparent 72%
    );

  filter: blur(7px);

  animation: waterfallMist 2.1s ease-in-out infinite alternate;
}

@keyframes waterfallFlow {
  from {
    transform: translateY(-12%);
  }

  to {
    transform: translateY(28%);
  }
}

@keyframes waterfallShine {
  0%, 100% {
    opacity: .28;
    transform: translateX(-8px) rotate(5deg);
  }

  50% {
    opacity: .9;
    transform: translateX(12px) rotate(5deg);
  }
}

@keyframes waterfallMist {
  from {
    opacity: .35;
    transform: scale(.88);
  }

  to {
    opacity: .8;
    transform: scale(1.12);
  }
}/* ========================================
   DOMINO DISTRICT — CASCADES PREMIUM V2
   Reflets uniquement sur l'eau existante
======================================== */
#homeView .waterfall-fx {
  z-index: 18;
  pointer-events: none;
  overflow: hidden;

  background: transparent !important;
  border-radius: 0;

  filter: none;
  opacity: .72;

  mix-blend-mode: screen;
}/* Cascade gauche */
#homeView .waterfall-left {
  left: 7.4%;
  top: 67.5%;

  width: 7.4%;
  height: 27%;

  transform: rotate(3deg);

  clip-path: polygon(
    18% 0%,
    82% 0%,
    94% 28%,
    88% 60%,
    70% 100%,
    26% 100%,
    8% 60%,
    6% 28%
  );
}/* Cascade droite */
#homeView .waterfall-right {
  left: 86.2%;
  top: 67%;

  width: 7.2%;
  height: 27%;

  transform: rotate(-3deg);

  clip-path: polygon(
    16% 0%,
    82% 0%,
    95% 28%,
    91% 62%,
    72% 100%,
    28% 100%,
    8% 62%,
    5% 28%
  );
}/* On ne dessine plus une grosse nappe d'eau */
#homeView .waterfall-flow {
  position: absolute;
  inset: -55% 8% 0;

  background:
    repeating-linear-gradient(
      100deg,
      transparent 0px,
      transparent 10px,
      rgba(210, 250, 255, .08) 12px,
      rgba(235, 255, 255, .42) 14px,
      rgba(100, 210, 255, .10) 17px,
      transparent 22px
    );

  opacity: .65;

  filter: blur(.8px);

  animation: waterfallFlowV2 1.65s linear infinite;
}/* Petit reflet lumineux mobile */
#homeView .waterfall-shine {
  position: absolute;

  left: 20%;
  top: -45%;

  width: 52%;
  height: 80%;

  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255,255,255,.10) 25%,
      rgba(180,240,255,.46) 52%,
      rgba(70,180,255,.16) 72%,
      transparent 100%
    );

  filter: blur(5px);

  opacity: .55;

  animation: waterfallShineV2 2.4s linear infinite;
}/* Brume discrète, pas de gros nuage */
#homeView .waterfall-mist {
  position: absolute;

  left: 10%;
  bottom: 0;

  width: 80%;
  height: 13%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(210, 250, 255, .30),
      rgba(90, 190, 255, .10) 48%,
      transparent 72%
    );

  filter: blur(6px);

  opacity: .42;

  animation: waterfallMistV2 2.8s ease-in-out infinite alternate;
}

@keyframes waterfallFlowV2 {
  from {
    transform: translateY(-18%);
  }

  to {
    transform: translateY(45%);
  }
}

@keyframes waterfallShineV2 {
  from {
    transform: translateY(-10%);
    opacity: .20;
  }

  45% {
    opacity: .65;
  }

  to {
    transform: translateY(175%);
    opacity: .10;
  }
}

@keyframes waterfallMistV2 {
  from {
    transform: scale(.88);
    opacity: .25;
  }

  to {
    transform: scale(1.08);
    opacity: .48;
  }
}/* ===== CASCADES V3 — ON GARDE L'EAU DE L'IMAGE ===== */
#homeView .waterfall-fx {
  background: transparent !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: screen;
}/* SUPPRIME LES TRAITS ARTIFICIELS */
#homeView .waterfall-flow {
  inset: -60% -20% !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(190, 245, 255, .30) 0%,
      rgba(80, 190, 255, .14) 35%,
      transparent 68%
    ) !important;

  opacity: .45 !important;
  filter: blur(12px) !important;

  animation: waterfallSoftFlow 2.8s linear infinite !important;
}/* PLUS DE BANDE BLANCHE */
#homeView .waterfall-shine {
  display: none !important;
}/* BRUME TRÈS DISCRÈTE */
#homeView .waterfall-mist {
  height: 10% !important;
  opacity: .20 !important;
  filter: blur(10px) !important;
}/* UNE LUEUR LARGE DESCEND DANS L'EAU */
@keyframes waterfallSoftFlow {
  0% {
    transform: translateY(-50%);
    opacity: .10;
  }

  35% {
    opacity: .42;
  }

  70% {
    opacity: .26;
  }

  100% {
    transform: translateY(100%);
    opacity: .06;
  }
}/* Désactivation des anciens tests de cascades */
#homeView .waterfall-fx {
  display: none !important;
}
#homeView .water-pixel-fx {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 14;

  pointer-events: none;
}/* ===== DOMINO DISTRICT — TORCHES V1 ===== */
#homeView .torch-fx {
  position: absolute;
  inset: 0;
  z-index: 16;
  pointer-events: none;
}

#homeView .torch {
  position: absolute;
  width: 2.1%;
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,245,180,.70) 0%,
      rgba(255,170,55,.38) 28%,
      rgba(255,90,20,.16) 52%,
      transparent 72%
    );

  filter: blur(3px);

  mix-blend-mode: screen;

  animation: torchFlicker 1.15s ease-in-out infinite alternate;
}/* positions principales */
#homeView .t1 { left: 17.2%; top: 25.0%; }
#homeView .t2 { left: 29.6%; top: 39.2%; }
#homeView .t3 { left: 66.1%; top: 39.8%; }
#homeView .t4 { left: 78.3%; top: 28.0%; }
#homeView .t5 { left: 24.9%; top: 75.2%; }
#homeView .t6 { left: 71.4%; top: 75.3%; }

@keyframes torchFlicker {
  0% {
    opacity: .35;
    transform: scale(.78);
  }

  35% {
    opacity: .72;
    transform: scale(1.06);
  }

  65% {
    opacity: .45;
    transform: scale(.90);
  }

  100% {
    opacity: .82;
    transform: scale(1.15);
  }
}/* ===== ENSEIGNE CASINO — V1 ===== */
#homeView .sign-fx {
  position: absolute;
  pointer-events: none;
  z-index: 16;
}

#homeView .casino-sign-fx {
  left: 43.2%;
  top: 27.1%;

  width: 13.5%;
  height: 6%;

  border-radius: 14px;

 background:
  radial-gradient(
    ellipse at center,
    rgba(255, 240, 165, .58) 0%,
    rgba(255, 195, 70, .38) 27%,
    rgba(255, 125, 20, .16) 52%,
    transparent 76%
  );

  mix-blend-mode: screen;

filter: blur(5px);
animation: casinoSignPulse 1.55s ease-in-out infinite;
}

 @keyframes casinoSignPulse {
  0%, 100% {
    opacity: .18;
    transform: scale(.92);
    filter: blur(5px) brightness(.85);
  }

  45% {
    opacity: .95;
    transform: scale(1.10);
    filter: blur(7px) brightness(1.45);
  }

  60% {
    opacity: .72;
    transform: scale(1.05);
    filter: blur(6px) brightness(1.20);
  }
}/* ===== ENSEIGNE BOUTIQUE — VIOLET ===== */
#homeView .boutique-sign-fx {
  left: 75.5%;
  top: 33.0%;

  width: 11%;
  height: 7%;

  border-radius: 14px;

background:
  radial-gradient(
    ellipse at center,
    rgba(245, 190, 255, .76) 0%,
    rgba(200, 95, 255, .58) 28%,
    rgba(120, 45, 220, .30) 56%,
    transparent 78%
  );
  mix-blend-mode: screen;

  filter: blur(5px);

  animation: boutiqueSignPulse 1.7s ease-in-out infinite;
}

@keyframes boutiqueSignPulse {
  0%, 100% {
    opacity: .20;
    transform: scale(.93);
    filter: blur(5px) brightness(.88) saturate(1.20);
  }

  45% {
    opacity: .98;
    transform: scale(1.09);
    filter: blur(7px) brightness(1.35) saturate(1.45);
  }

  62% {
    opacity: .72;
    transform: scale(1.04);
    filter: blur(6px) brightness(1.10) saturate(1.30);
  }
}/* ===== ENSEIGNE CASCADE LAB — CYAN ===== */
#homeView .lab-sign-fx {
  left: 78.7%;
  top: 65.5%;

  width: 13.2%;
  height: 6.5%;

  border-radius: 14px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(195, 250, 255, .68) 0%,
      rgba(80, 220, 255, .46) 28%,
      rgba(40, 120, 255, .20) 55%,
      transparent 76%
    );

  mix-blend-mode: screen;

  filter: blur(5px);

  animation: labSignPulse 1.6s ease-in-out infinite;
}

@keyframes labSignPulse {
  0%, 100% {
    opacity: .18;
    transform: scale(.92);
    filter: blur(5px) brightness(.85);
  }

  45% {
    opacity: .98;
    transform: scale(1.10);
    filter: blur(7px) brightness(1.55);
  }

  62% {
    opacity: .72;
    transform: scale(1.04);
    filter: blur(6px) brightness(1.22);
  }
}/* ===== ENSEIGNE SOCIAL — ROUGE / ORANGE ===== */
#homeView .social-sign-fx {
  left: 13.5%;
  top: 55.0%;

  width: 12.5%;
  height: 7%;

  border-radius: 14px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 120, 110, .76) 0%,
      rgba(255, 60, 55, .56) 30%,
      rgba(170, 10, 30, .30) 58%,
      transparent 78%
    );

  mix-blend-mode: screen;

  filter: blur(5px);

  animation: socialSignPulse 1.65s ease-in-out infinite;
}
@keyframes socialSignPulse {
  0%, 100% {
    opacity: .20;
    transform: scale(.93);
    filter: blur(5px) brightness(.88) saturate(1.35);
  }

  45% {
    opacity: .98;
    transform: scale(1.09);
    filter: blur(7px) brightness(1.28) saturate(1.55);
  }

  62% {
    opacity: .72;
    transform: scale(1.04);
    filter: blur(6px) brightness(1.08) saturate(1.42);
  }
}/* ===== ENSEIGNE COFFRE — OR CHAUD ===== */
#homeView .coffre-sign-fx {
  left: 15.5%;
  top: 20.0%;

  width: 11.5%;
  height: 6.5%;

  border-radius: 14px;

  background:
  radial-gradient(
    ellipse at center,
    rgba(255, 238, 170, .72) 0%,
    rgba(255, 178, 55, .50) 24%,
    rgba(225, 115, 18, .28) 48%,
    rgba(105, 45, 5, .10) 66%,
    transparent 80%
  );

  mix-blend-mode: screen;

  filter: blur(5px);

  animation: coffreSignPulse 1.95s ease-in-out infinite;
}

@keyframes coffreSignPulse {
  0%, 100% {
    opacity: .22;
    transform: scale(.94);
    filter: blur(5px) brightness(.80) saturate(1.10);
  }

  42% {
    opacity: .92;
    transform: scale(1.08);
    filter: blur(7px) brightness(1.32) saturate(1.30);
  }

  58% {
    opacity: .76;
    transform: scale(1.04);
    filter: blur(6px) brightness(1.12) saturate(1.18);
  }
}/* ===== ENSEIGNE TOUR — BLANC DORÉ ===== */
#homeView .tour-sign-fx {
  left: 62.8%;
  top: 13.5%;

  width: 11.8%;
  height: 6.5%;

  border-radius: 14px;

 background:
  radial-gradient(
    ellipse at center,
    rgba(255, 255, 248, .82) 0%,
    rgba(255, 239, 190, .58) 24%,
    rgba(255, 210, 120, .30) 48%,
    rgba(185, 135, 55, .12) 66%,
    transparent 80%
  );

  mix-blend-mode: screen;

  filter: blur(5px);

  animation: tourSignPulse 1.85s ease-in-out infinite;
}

@keyframes tourSignPulse {
  0%, 100% {
    opacity: .20;
    transform: scale(.94);
    filter: blur(5px) brightness(.92) saturate(.92);
  }

  42% {
    opacity: 1;
    transform: scale(1.09);
    filter: blur(7px) brightness(1.62) saturate(1.02);
  }

  58% {
    opacity: .78;
    transform: scale(1.04);
    filter: blur(6px) brightness(1.25) saturate(.96);
  }
}/* =====================================================
   POST MATCH — DOMINO DISTRICT
===================================================== */
#homeView .postmatch-backdrop {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: auto;

  background:
    radial-gradient(circle at 50% 18%, rgba(255, 191, 70, .16), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(100, 35, 0, .22), transparent 40%),
    rgba(2, 5, 12, .88);

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

#homeView .postmatch-backdrop[hidden] {
  display: none;
}

#homeView .postmatch-card {
  position: relative;
  width: min(590px, 100%);
  padding: 30px 30px 26px;

  border: 1px solid rgba(255, 214, 116, .34);
  border-radius: 30px;

  color: white;
  text-align: center;

  background:
    linear-gradient(
      145deg,
      rgba(28, 23, 18, .97),
      rgba(8, 10, 17, .98) 45%,
      rgba(15, 9, 5, .98)
    );

  box-shadow:
    0 35px 100px rgba(0, 0, 0, .72),
    0 0 65px rgba(255, 177, 50, .10),
    inset 0 1px rgba(255,255,255,.06);

  overflow: hidden;
}

#homeView .postmatch-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(circle at 50% -5%, rgba(255, 215, 105, .20), transparent 35%),
    linear-gradient(115deg, transparent 20%, rgba(255,255,255,.025) 50%, transparent 80%);
}

#homeView .postmatch-card::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 213, 102, .95),
    transparent
  );

  box-shadow: 0 0 20px rgba(255, 194, 70, .85);
}

#homeView .postmatch-close {
  position: absolute;
  z-index: 5;
  right: 16px;
  top: 14px;

  width: 36px;
  height: 36px;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;

  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.045);

  font-size: 22px;
  cursor: pointer;
}

#homeView .postmatch-crown {
  position: relative;
  z-index: 2;

  margin-top: 2px;
  font-size: 55px;
  line-height: 1;

  filter:
    drop-shadow(0 0 10px rgba(255, 215, 95, .72))
    drop-shadow(0 0 28px rgba(255, 150, 20, .28));

  animation: postCrown 2.2s ease-in-out infinite;
}

@keyframes postCrown {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 0 10px rgba(255, 215, 95, .55))
      drop-shadow(0 0 24px rgba(255, 150, 20, .20));
  }

  50% {
    transform: translateY(-4px) scale(1.06);
    filter:
      drop-shadow(0 0 15px rgba(255, 225, 125, .95))
      drop-shadow(0 0 34px rgba(255, 150, 20, .38));
  }
}

#homeView .postmatch-eyebrow {
  position: relative;
  z-index: 2;

  display: block;
  margin-top: 10px;

  font-family: Orbitron, sans-serif;
  font-size: 9px;
  font-weight: 900;

  letter-spacing: .28em;
  color: #d6ab51;
}

#homeView .postmatch-title {
  position: relative;
  z-index: 2;

  margin: 5px 0 0;

  font-family: Orbitron, sans-serif;
  font-size: clamp(34px, 7vw, 55px);
  line-height: 1;

  letter-spacing: .06em;

  background: linear-gradient(
    180deg,
    #fffbe8,
    #ffe09a 42%,
    #c68624 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter: drop-shadow(0 4px 12px rgba(0,0,0,.55));
}

#homeView .postmatch-player {
  position: relative;
  z-index: 2;

  margin-top: 12px;

  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .13em;

  color: #fff4cf;
}

#homeView .postmatch-subtitle {
  position: relative;
  z-index: 2;

  margin: 5px 0 18px;

  color: rgba(255,255,255,.58);
  font-size: 11px;
}/* REWARDS */
#homeView .postmatch-rewards {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

  margin: 0 0 17px;
}

#homeView .postmatch-reward {
  padding: 14px 8px 12px;

  border: 1px solid rgba(255, 212, 111, .14);
  border-radius: 17px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 222, 132, .07),
      rgba(255,255,255,.025)
    );

  box-shadow:
    inset 0 1px rgba(255,255,255,.04),
    0 8px 25px rgba(0,0,0,.24);
}

#homeView .postmatch-reward span {
  display: block;
  font-size: 22px;
}

#homeView .postmatch-reward strong {
  display: block;
  margin-top: 3px;

  font-family: Orbitron, sans-serif;
  font-size: 19px;

  color: #ffe5a4;
}

#homeView .postmatch-reward small {
  display: block;
  margin-top: 3px;

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .17em;
  color: rgba(255,255,255,.45);
}/* PILLAGE */
#homeView .postmatch-pillage {
  position: relative;
  z-index: 2;

  padding: 17px;

  border: 1px solid rgba(255, 109, 66, .26);
  border-radius: 22px;

  background:
    radial-gradient(circle at 50% 0%, rgba(255, 100, 30, .12), transparent 55%),
    linear-gradient(
      145deg,
      rgba(70, 21, 9, .30),
      rgba(18, 8, 7, .66)
    );

  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 12px 35px rgba(0,0,0,.28);
}

#homeView .postmatch-pillage > small {
  display: block;

  font-family: Orbitron, sans-serif;
  font-size: 8px;
  font-weight: 900;

  letter-spacing: .24em;
  color: #ff9f6b;
}

#homeView .pillage-target {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  margin-top: 12px;
}

#homeView .pillage-avatar {
  display: grid;
  place-items: center;

  width: 47px;
  height: 47px;

  border: 1px solid rgba(255, 181, 105, .28);
  border-radius: 50%;

  font-size: 25px;

  background:
    radial-gradient(circle, rgba(255, 160, 80, .13), rgba(0,0,0,.40));
}

#homeView .pillage-target div {
  text-align: left;
}

#homeView .pillage-target strong {
  display: block;

  font-size: 13px;
  letter-spacing: .08em;

  color: #fff0dd;
}

#homeView .pillage-target div span {
  display: block;
  margin-top: 2px;

  font-size: 9px;
  color: rgba(255,255,255,.48);
}

#homeView .pillage-value {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: 13px 0;
  padding: 10px 12px;

  border-radius: 12px;

  background: rgba(0,0,0,.25);
}

#homeView .pillage-value span {
  font-size: 9px;
  color: rgba(255,255,255,.55);
}

#homeView .pillage-value strong {
  font-size: 16px;
  color: #ffd981;
}

#homeView .postmatch-pillage-btn {
  width: 100%;
  min-height: 48px;

  border: 1px solid rgba(255, 201, 106, .55);
  border-radius: 14px;

  color: #321400;

  font-family: Orbitron, sans-serif;
  font-size: 10px;
  font-weight: 1000;

  letter-spacing: .08em;

  background:
    linear-gradient(
      180deg,
      #ffe69e,
      #f6a734 55%,
      #c96816
    );

  box-shadow:
    0 8px 25px rgba(255, 112, 20, .18),
    inset 0 1px rgba(255,255,255,.55);

  cursor: pointer;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

#homeView .postmatch-pillage-btn:hover {
  transform: translateY(-2px);

  filter: brightness(1.10);

  box-shadow:
    0 12px 32px rgba(255, 112, 20, .30),
    0 0 22px rgba(255, 181, 65, .16);
}/* FOOTER ACTIONS */
#homeView .postmatch-actions {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 10px;

  margin-top: 15px;
}

#homeView .postmatch-secondary,
#homeView .postmatch-primary {
  min-height: 45px;
  border-radius: 13px;

  font-family: Orbitron, sans-serif;
  font-size: 8px;
  font-weight: 900;

  letter-spacing: .06em;

  cursor: pointer;
}

#homeView .postmatch-secondary {
  border: 1px solid rgba(255,255,255,.13);

  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.045);
}

#homeView .postmatch-primary {
  border: 1px solid rgba(255, 215, 120, .32);

  color: #fff2c6;

  background:
    linear-gradient(
      180deg,
      rgba(190, 126, 35, .30),
      rgba(80, 47, 9, .48)
    );

  box-shadow: inset 0 1px rgba(255,255,255,.06);
}/* MOBILE */
@media (max-width: 620px) {

  #homeView .postmatch-backdrop {
    padding: 12px;
    align-items: start;
  }

  #homeView .postmatch-card {
    margin-top: 10px;
    padding: 24px 16px 18px;
    border-radius: 22px;
  }

  #homeView .postmatch-crown {
    font-size: 45px;
  }

  #homeView .postmatch-title {
    font-size: 36px;
  }

  #homeView .postmatch-player {
    font-size: 15px;
  }

  #homeView .postmatch-rewards {
    gap: 6px;
  }

  #homeView .postmatch-reward {
    padding: 11px 4px;
  }

  #homeView .postmatch-reward strong {
    font-size: 15px;
  }

  #homeView .postmatch-pillage {
    padding: 13px;
  }

  #homeView .postmatch-actions {
    grid-template-columns: 1fr;
  }
}
#homeView .postmatch-test {
  position: fixed;
  z-index: 120;
  right: 18px;
  bottom: 18px;

  padding: 12px 16px;

  border: 1px solid rgba(255, 213, 110, .45);
  border-radius: 14px;

  color: #fff1c2;
  background: rgba(20, 14, 8, .88);

  font-family: Orbitron, sans-serif;
  font-size: 8px;
  font-weight: 900;

  cursor: pointer;

  box-shadow:
    0 10px 30px rgba(0,0,0,.40),
    0 0 18px rgba(255,180,50,.12);
}/* ===== POST MATCH — DESKTOP BOOST ===== */
@media (min-width: 900px) {

  #homeView .postmatch-card {
    width: min(680px, 100%);
    padding: 36px 36px 30px;
  }

  #homeView .postmatch-crown {
    font-size: 62px;
  }

  #homeView .postmatch-title {
    font-size: 60px;
  }

  #homeView .postmatch-player {
    font-size: 21px;
  }

  #homeView .postmatch-subtitle {
    font-size: 12px;
    margin-bottom: 22px;
  }

  #homeView .postmatch-reward {
    padding: 17px 10px 15px;
  }

  #homeView .postmatch-reward span {
    font-size: 26px;
  }

  #homeView .postmatch-reward strong {
    font-size: 23px;
  }

  #homeView .postmatch-reward small {
    font-size: 8px;
  }

  #homeView .postmatch-pillage {
    padding: 20px;
  }

  #homeView .postmatch-pillage > small {
    font-size: 9px;
  }

  #homeView .pillage-avatar {
    width: 54px;
    height: 54px;
    font-size: 29px;
  }

  #homeView .pillage-target strong {
    font-size: 15px;
  }

  #homeView .pillage-target div span {
    font-size: 10px;
  }

  #homeView .pillage-value span {
    font-size: 10px;
  }

  #homeView .pillage-value strong {
    font-size: 19px;
  }

  #homeView .postmatch-pillage-btn {
    min-height: 54px;
    font-size: 11px;
  }

  #homeView .postmatch-secondary,
#homeView .postmatch-primary {
    min-height: 49px;
    font-size: 9px;
  }
}/* ===== PILLAGE ANIMATION ===== */
#homeView .postmatch-pillage.pillaged {
  animation: pillageSuccess .65s ease;
  border-color: rgba(255, 211, 103, .65);
  box-shadow:
    0 0 32px rgba(255, 172, 40, .20),
    inset 0 1px rgba(255,255,255,.05);
}

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

  35% {
    transform: scale(1.025);
    filter: brightness(1.28);
  }

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

#homeView .postmatch-pillage-btn:disabled {
  cursor: default;
  color: #fff2c7;

  background:
    linear-gradient(
      180deg,
      #b98936,
      #704514
    );

  filter: none;
}

#homeView .pillage-coin {
  position: absolute;
  z-index: 20;

  left: 50%;
  bottom: 45px;

  font-size: 21px;
  font-style: normal;

  pointer-events: none;

  animation: pillageCoinBurst 1.25s cubic-bezier(.17,.67,.28,1) forwards;
}

@keyframes pillageCoinBurst {
  0% {
    opacity: 0;
    transform:
      translate(-50%, 0)
      scale(.5)
      rotate(0deg);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--x)),
        var(--y)
      )
      scale(1.15)
      rotate(var(--r));
  }
}
/* DOMINO DISTRICT — mode plein écran uniquement sur l'accueil */
body.district-home-active {
  overflow: hidden !important;
}

body.district-home-active .topbar {
  display: none !important;
}

body.district-home-active .main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100dvh !important;
}

body.district-home-active #homeView {
  width: 100% !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   CONVOI BLINDÉ • MODAL ARCADE LARGE
   Uniquement pendant la phase de poursuite.
   ========================================================= */

#homeView .modal-card.convoy-arcade-modal {
  width: min(760px, calc(100vw - 40px));
  max-height: 96vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 20px 16px;
}

#homeView .modal-card.convoy-arcade-modal .modal-icon {
  font-size: 28px;
}

#homeView .modal-card.convoy-arcade-modal h2 {
  margin: 2px 0 4px;
  font-size: 21px;
}

#homeView .modal-card.convoy-arcade-modal > p {
  margin-bottom: 7px;
  max-width: none;
  font-size: 10px;
  line-height: 1.35;
}

#homeView .modal-card.convoy-arcade-modal .modal-options {
  margin-top: 5px;
}

@media (min-width: 721px) {
  #homeView .modal-card.convoy-arcade-modal {
    width: min(780px, calc(100vw - 48px));
  }

  #homeView .modal-card.convoy-arcade-modal .convoy-stage {
    width: min(100%, 610px);
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  #homeView .modal-card.convoy-arcade-modal {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    padding: 13px 9px 10px;
    border-radius: 18px;
  }

  #homeView .modal-card.convoy-arcade-modal .modal-icon {
    font-size: 24px;
  }

  #homeView .modal-card.convoy-arcade-modal h2 {
    font-size: 18px;
  }

  #homeView .modal-card.convoy-arcade-modal > p {
    font-size: 9px;
    margin-bottom: 5px;
  }

  #homeView .modal-card.convoy-arcade-modal .convoy-controls {
    width: 94%;
  }
}

@media (max-width: 390px) {
  #homeView .modal-card.convoy-arcade-modal {
    width: calc(100vw - 6px);
    padding-inline: 6px;
  }
}


/* =========================================================
   CONVOI BLINDÉ • MOBILE IMMERSIF + SWIPE
   ========================================================= */

@media (max-width: 720px) {

  #homeView .modal-backdrop.convoy-arcade-backdrop {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }

  #homeView
  .modal-backdrop.convoy-arcade-backdrop
  .modal-card.convoy-arcade-modal {
    width: 100vw !important;
    max-width: none !important;

    height: 100vh !important;
    height: 100dvh !important;

    max-height: none !important;

    margin: 0 !important;

    padding:
      env(safe-area-inset-top)
      0
      env(safe-area-inset-bottom)
      0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    overflow: hidden !important;

    display: flex;
    flex-direction: column;

    background: #030711;
  }

  /* On retire le header classique du modal */
  #homeView
  .modal-card.convoy-arcade-modal
  > .modal-icon,

  #homeView
  .modal-card.convoy-arcade-modal
  > small,

  #homeView
  .modal-card.convoy-arcade-modal
  > h2,

  #homeView
  .modal-card.convoy-arcade-modal
  > p {
    display: none !important;
  }

  #homeView
  .modal-card.convoy-arcade-modal
  .close {
    position: absolute;

    top:
      max(
        8px,
        calc(env(safe-area-inset-top) + 5px)
      );

    right:
      max(
        8px,
        calc(env(safe-area-inset-right) + 5px)
      );

    z-index: 80;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: rgba(3,7,17,.76);

    border:
      1px solid rgba(255,255,255,.18);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  #homeView
  .modal-card.convoy-arcade-modal
  .modal-options {
    flex: 1;
    min-height: 0;

    margin: 0 !important;

    display: block;
  }

  #homeView
  .modal-card.convoy-arcade-modal
  .convoy-arcade-shell {
    width: 100%;
    height: 100%;

    max-width: none;

    margin: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
  }

  #homeView
  .modal-card.convoy-arcade-modal
  .convoy-stage {
    flex: 1;

    width: 100%;
    height: auto;

    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    border: 0;
    border-radius: 0;

    touch-action: none;

    cursor: default;
  }

  /* HUD flottant sous le bouton fermer */
  #homeView
  .modal-card.convoy-arcade-modal
  .convoy-hud {
    top:
      max(
        52px,
        calc(env(safe-area-inset-top) + 52px)
      );

    left:
      max(
        8px,
        env(safe-area-inset-left)
      );

    right:
      max(
        8px,
        env(safe-area-inset-right)
      );

    gap: 5px;
  }

  #homeView
  .modal-card.convoy-arcade-modal
  .convoy-hud-card {
    padding: 6px 6px;
    border-radius: 10px;

    background: rgba(2,7,18,.72);
  }

  #homeView
  .modal-card.convoy-arcade-modal
  .convoy-hud-card small {
    font-size: 7px;
  }

  #homeView
  .modal-card.convoy-arcade-modal
  .convoy-hud-card strong {
    font-size: 11px;
  }

  /* Le fourgon a davantage d'espace devant */
  #homeView
  .modal-card.convoy-arcade-modal
  .convoy-van {
    top: 22%;
    width: 24%;
  }

  /* Voiture basse, proche du pouce */
  #homeView
  .modal-card.convoy-arcade-modal
  .convoy-player {
    width: 23%;

    bottom:
      max(
        5%,
        calc(env(safe-area-inset-bottom) + 18px)
      );
  }

  #homeView
  .modal-card.convoy-arcade-modal
  .convoy-obstacle {
    width: 16%;
  }

  /* Sur téléphone : plus aucune flèche */
  #homeView
  .modal-card.convoy-arcade-modal
  .convoy-controls {
    display: none !important;
  }

  #homeView
  .modal-card.convoy-arcade-modal
  .convoy-key-hint {
    display: none !important;
  }

  /* Le feedback texte ne prend plus d'espace hors route */
  #homeView
  .modal-card.convoy-arcade-modal
  .convoy-event {
    position: absolute;

    z-index: 45;

    left: 50%;
    bottom:
      max(
        8px,
        calc(env(safe-area-inset-bottom) + 8px)
      );

    transform: translateX(-50%);

    width: min(86%, 360px);

    margin: 0;

    padding: 6px 9px;

    background: rgba(3,7,17,.72);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    pointer-events: none;
  }
}



/* =========================================================
   MOBILE • SCROLL MODALS DOMINO DISTRICT
   N'affecte PAS le Convoi immersif
   ========================================================= */
@media (max-width: 720px) {

  #homeView .modal-backdrop:not(.convoy-arcade-backdrop) {
    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;
    touch-action: pan-y;

    -webkit-overflow-scrolling: touch;
  }

  #homeView .modal-card:not(.convoy-arcade-modal) {
    max-height: calc(100dvh - 24px);

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;
    touch-action: pan-y;

    -webkit-overflow-scrolling: touch;
  }

}


/* =========================================================
   MOBILE • PERFORMANCE OUVERTURE BÂTIMENTS
   Allège uniquement les effets coûteux sur téléphone.
   Convoi immersif non concerné.
   ========================================================= */
@media (max-width: 720px) {

  /* Évite de recalculer un filtre sur toute l'image District */
  #homeView .stage.is-focusing .district-art {
    filter: none !important;
    transition: none !important;
  }

  /* Le blur plein écran est coûteux sur GPU mobile */
  #homeView .modal-backdrop:not(.convoy-arcade-backdrop) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    background: rgba(0, 2, 8, .82);
  }

  /* Halo sélectionné plus léger mais toujours visible */
  #homeView .hotspot.is-selected span {
    box-shadow:
      0 0 18px rgba(255, 198, 74, .42),
      0 0 38px rgba(255, 153, 27, .20),
      inset 0 0 18px rgba(255, 226, 142, .12);
  }

}