:root {
  --district-blue: #087fb6;
  --district-teal: #11b8a4;
  --district-ink: #17334d;
}

.bar-district-shell {
  position: fixed;
  isolation: isolate;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.district-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #8ddaf4;
}

.district-world {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 150vh);
  height: max(100vh, 66.6667vw);
  width: max(100vw, 150dvh);
  height: max(100dvh, 66.6667vw);
  transform: translate(-50%, -50%);
}

.district-world::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(6, 52, 79, .12), transparent 18%),
    linear-gradient(0deg, rgba(7, 48, 67, .1), transparent 18%);
  pointer-events: none;
}

.district-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.district-location {
  color: var(--district-ink);
  text-decoration: none;
}

.district-back {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin-right: 10px;
  place-items: center;
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  border-radius: 13px;
  background: linear-gradient(145deg, #22c9b3, #087fb6);
  box-shadow: inset 0 -4px 0 rgba(0, 74, 105, .18);
}

.district-location .player-copy strong { max-width: 210px; }
.district-location .player-copy span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.district-tools { gap: 7px; }
.district-store-glyph {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  border-radius: 10px;
  background: linear-gradient(145deg, #ffc83e, #ff7a54);
  box-shadow: inset 0 -3px 0 rgba(150, 69, 12, .16);
}

.district-tools strong { min-width: 20px; }
.district-count-label { margin-right: 3px; color: #657987; font-size: 11px; font-weight: 800; }
.district-list-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #ff846d, #ff6b55);
  box-shadow: inset 0 -3px 0 rgba(145,45,27,.18);
}

.district-storefronts {
  position: absolute;
  z-index: 10;
  inset: 0;
}

.district-pool-landmark {
  position:absolute;
  z-index:18;
  top:52%;
  left:50%;
  width:clamp(118px,14vw,205px);
  padding:0;
  color:var(--district-ink);
  border:0;
  background:transparent;
  cursor:pointer;
  transform:translate(-50%,-50%);
  transition:transform .2s ease,filter .2s ease;
}
.district-pool-landmark:hover,.district-pool-landmark:focus-visible{outline:none;filter:drop-shadow(0 12px 9px rgba(4,44,48,.34));transform:translate(-50%,-54%) scale(1.06)}
.district-pool-scene{position:relative;width:100%;display:block;aspect-ratio:1.404;pointer-events:none}
.district-pool-table{position:absolute;z-index:3;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.district-pool-npc{position:absolute;pointer-events:none;transform-origin:bottom center;will-change:transform}
.district-pool-npc img{position:relative;z-index:2;display:block;width:auto;height:clamp(34px,5vw,66px);filter:drop-shadow(0 2px 1px rgba(20,43,51,.3))}
.district-pool-npc-shadow{position:absolute;z-index:1;right:8%;bottom:-1%;left:8%;height:7%;border-radius:50%;background:rgba(18,51,59,.33);filter:blur(1.5px)}
.district-pool-npc-man{z-index:7;top:43%;left:-3%;animation:districtPoolManShot 8s ease-in-out infinite}
.district-pool-npc-woman{z-index:2;top:-13%;right:2%;animation:districtPoolWomanShot 8s ease-in-out infinite}
.district-pool-cue{position:absolute;z-index:6;width:48%;height:2px;border-radius:99px;background:linear-gradient(90deg,#4d240f 0 11%,#d59645 12% 89%,#eef8f5 90%);box-shadow:0 1px rgba(30,20,12,.3);will-change:transform}
.district-pool-cue-man{top:70%;left:9%;transform-origin:left center;animation:districtPoolManCue 8s ease-in-out infinite}
.district-pool-cue-woman{z-index:4;top:29%;right:10%;transform-origin:right center;animation:districtPoolWomanCue 8s ease-in-out infinite}
.district-pool-ball{position:absolute;z-index:5;width:clamp(3px,.34vw,5px);height:clamp(3px,.34vw,5px);border:1px solid rgba(0,39,42,.38);border-radius:50%;box-shadow:inset -1px -1px 1px rgba(0,0,0,.32),inset 1px 1px 1px rgba(255,255,255,.85);will-change:transform}
.district-pool-ball-one{top:55%;left:45%;background:#fff;animation:districtPoolBallOne 8s cubic-bezier(.2,.64,.3,1) infinite}
.district-pool-ball-two{top:44%;left:59%;background:#f04b42;animation:districtPoolBallTwo 8s cubic-bezier(.2,.64,.3,1) infinite}
@keyframes districtPoolManShot{0%,7%,28%,100%{transform:translate(0,0) rotate(0)}11%{transform:translate(5%,2%) rotate(-9deg)}14%{transform:translate(9%,3%) rotate(-12deg)}18%{transform:translate(-2%,-1%) rotate(2deg)}}
@keyframes districtPoolWomanShot{0%,48%,70%,100%{transform:translate(0,0) rotate(0)}53%{transform:translate(-5%,3%) rotate(8deg)}57%{transform:translate(-9%,4%) rotate(11deg)}62%{transform:translate(2%,-1%) rotate(-2deg)}}
@keyframes districtPoolManCue{0%,7%,28%,100%{transform:translate(0,0) rotate(-24deg)}11%{transform:translate(5px,-2px) rotate(-24deg)}14%{transform:translate(9px,-4px) rotate(-24deg)}18%{transform:translate(-3px,1px) rotate(-24deg)}}
@keyframes districtPoolWomanCue{0%,48%,70%,100%{transform:translate(0,0) rotate(-24deg)}53%{transform:translate(-5px,3px) rotate(-24deg)}57%{transform:translate(-9px,5px) rotate(-24deg)}62%{transform:translate(3px,-1px) rotate(-24deg)}}
@keyframes districtPoolBallOne{0%,14%{transform:translate(0,0) rotate(0)}34%,56%{transform:translate(31px,-14px) rotate(540deg)}62%{transform:translate(31px,-14px) rotate(540deg)}86%,100%{transform:translate(3px,2px) rotate(990deg)}}
@keyframes districtPoolBallTwo{0%,14%{transform:translate(0,0) rotate(0)}34%,56%{transform:translate(-18px,11px) rotate(-420deg)}62%{transform:translate(-18px,11px) rotate(-420deg)}86%,100%{transform:translate(4px,-3px) rotate(-810deg)}}

.district-storefront {
  position: absolute;
  top: var(--slot-top);
  left: var(--slot-x);
  width: var(--slot-width);
  height: var(--slot-height);
  padding: 0;
  color: var(--district-ink);
  border: 0;
  border-radius: 13px 13px 5px 5px;
  background: transparent;
  cursor: pointer;
  transform: translateX(-50%);
  transition: transform .18s ease, filter .18s ease;
}

.district-storefront:hover {
  z-index: 12;
  filter: drop-shadow(0 9px 10px rgba(9, 56, 78, .28));
  transform: translateX(-50%) translateY(-4px);
}

.district-storefront:focus-visible {
  z-index: 12;
  outline: none;
  filter: drop-shadow(0 9px 10px rgba(9, 56, 78, .28));
  transform: translateX(-50%) translateY(-4px);
}

.district-storefront:focus-visible .district-store-sign {
  border-radius: 5px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.72);
}

.district-store-sign {
  position: absolute;
  top: var(--sign-top);
  right: 8%;
  left: 8%;
  min-height: 42px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 4px 9px;
  box-sizing: border-box;
  background: linear-gradient(90deg, transparent, rgba(6, 35, 43, .2) 13%, rgba(6, 35, 43, .42) 50%, rgba(6, 35, 43, .2) 87%, transparent);
  filter: drop-shadow(0 2px 1px rgba(255,255,255,.12));
}

.district-store-sign strong {
  max-width: 100%;
  display: -webkit-box;
  overflow: hidden;
  color: #fffdf3;
  font-size: clamp(9px, 1.08vw, 16px);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: .055em;
  text-align: center;
  text-shadow: 0 1px 0 rgba(3, 37, 46, .95), 0 2px 5px rgba(3, 31, 40, .72);
  text-overflow: ellipsis;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.district-store-entry {
  position: absolute;
  bottom: var(--entry-bottom);
  left: 50%;
  padding: 5px 9px;
  color: #fff;
  font-size: clamp(8px, .8vw, 10px);
  font-weight: 900;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(25,191,172,.9), rgba(8,127,174,.92));
  box-shadow: 0 4px 10px rgba(5, 74, 99, .2);
  transform: translateX(-50%);
}

.district-character {
  --character-depth: 1.012;
  z-index: 20;
  left: 50%;
  top: 82%;
  transform: translate(-50%, -50%) scale(var(--character-depth));
  transform-origin: bottom center;
  transition: left var(--walk-duration) linear, top var(--walk-duration) linear, transform var(--walk-duration) linear;
}

.district-moving .district-storefront { pointer-events: none; }

.district-stage-hint {
  position: fixed;
  z-index: 40;
  bottom: max(17px, env(safe-area-inset-bottom));
  left: 50%;
  padding: 7px 13px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 99px;
  background: rgba(14,58,78,.7);
  box-shadow: 0 6px 15px rgba(5, 43, 62, .18);
  backdrop-filter: blur(9px);
  transform: translateX(-50%);
  pointer-events: none;
}

.district-pager {
  position: fixed;
  z-index: 55;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  color: #415e6e;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 15px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(11, 60, 84, .24);
  backdrop-filter: blur(12px);
}

.district-pager[hidden] { display: none; }
.district-pager button { width: 34px; height: 32px; color: #fff; font-size: 18px; border: 0; border-radius: 10px; background: linear-gradient(145deg, #1bc3ad, #087fae); cursor: pointer; }
.district-pager button:disabled { opacity: .35; cursor: default; }

.district-empty {
  position: fixed;
  z-index: 60;
  top: 50%;
  left: 50%;
  width: min(430px, calc(100vw - 32px));
  padding: 24px;
  box-sizing: border-box;
  color: var(--district-ink);
  text-align: center;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 25px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 24px 60px rgba(7, 47, 69, .32);
  backdrop-filter: blur(16px);
  transform: translate(-50%, -50%);
}

.district-empty[hidden] { display: none; }
.district-empty > span { display: grid; width: 58px; height: 58px; margin: -52px auto 12px; place-items: center; color: #fff; font-size: 30px; border: 5px solid #fff; border-radius: 19px; background: linear-gradient(145deg, #ffc943, #ff7458); }
.district-empty h1 { margin: 3px 0 7px; font-size: 27px; }
.district-empty > p:not(.city-kicker) { margin: 0 0 17px; color: #637987; line-height: 1.45; }
.district-empty > div { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

@media (orientation: landscape) and (max-height: 600px) {
  .district-pool-landmark{width:clamp(102px,13vw,150px)}
  .district-location { min-width: 198px; }
  .district-back { width: 36px; height: 36px; margin-right: 7px; font-size: 21px; border-radius: 10px; }
  .district-tools { min-height: 38px; }
  .district-store-glyph { width: 25px; height: 25px; font-size: 15px; }
  .district-tools strong { min-width: 16px; }
  .district-list-button { min-height: 32px; padding-inline: 9px; font-size: 10px; border-radius: 9px; }
  .district-store-sign { min-height: 31px; padding: 2px 5px; }
  .district-store-entry { padding: 3px 6px; }
  .district-stage-hint { bottom: max(8px, env(safe-area-inset-bottom)); padding: 5px 9px; font-size: 9px; }
  .district-pager { right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); }
  .district-pager button { width: 30px; height: 28px; }
  .district-empty { width: min(520px, 78vw); padding: 16px 20px; }
  .district-empty h1 { font-size: 22px; }
  .district-empty > p:not(.city-kicker) { margin-bottom: 10px; font-size: 12px; }
}

@media (max-width: 720px) and (orientation: landscape) {
  .district-count-label { display: none; }
  .district-tools strong { min-width: 20px; }
  .district-list-button { font-size: 0; }
  .district-list-button::after { content: "Lista"; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .district-pool-npc,.district-pool-cue,.district-pool-ball{animation-play-state:paused}
}

.district-loading{position:fixed;z-index:140;inset:0;display:grid;place-items:center;padding:18px;background:rgba(5,37,46,.62);backdrop-filter:blur(12px);transition:opacity .22s ease,visibility .22s ease}.district-loading[hidden]{display:none}.district-loading.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.district-loading-card{display:grid;justify-items:center;gap:8px;width:min(320px,calc(100vw - 36px));padding:24px 20px;color:#173b46;text-align:center;border:3px solid #fff;border-radius:24px;background:linear-gradient(180deg,#fff,#f4fff9);box-shadow:0 28px 70px rgba(0,0,0,.34)}.district-loading-card strong{font-size:17px}.district-loading-card small{color:#6b8190;font-size:11px}