:root {
  --city-ink: #17334d;
  --city-blue: #0d8fd8;
  --city-teal: #10b9a5;
  --city-coral: #ff6b55;
  --city-yellow: #ffc940;
  --city-cream: #fff8e8;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--city-ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.86), transparent 24rem),
    linear-gradient(145deg, #d9f5ff 0%, #b9e9fb 46%, #a9dff3 100%);
  overflow-x: hidden;
}

.topbar {
  background: rgba(14, 112, 164, .92);
  border-bottom: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 30px rgba(24, 88, 126, .16);
  backdrop-filter: blur(14px);
}

.container {
  width: min(1480px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: 18px clamp(10px, 2vw, 28px) 32px;
  box-sizing: border-box;
}

.city-shell {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 96px);
}

.city-hud {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto 12px;
}

.player-card,
.city-wallet {
  display: flex;
  align-items: center;
  color: var(--city-ink);
  background: rgba(255,255,255,.91);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 30px rgba(20, 91, 130, .18), inset 0 -3px 0 rgba(18, 97, 134, .08);
  backdrop-filter: blur(12px);
}

.player-card {
  position: relative;
  min-width: 230px;
  height: 58px;
  padding: 0 18px 0 7px;
  border-radius: 18px;
  overflow: hidden;
}

.player-avatar {
  width: 48px;
  height: 48px;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 15px;
  background: linear-gradient(150deg, #fff0a8, #ffd45a);
  box-shadow: inset 0 -3px 0 rgba(150, 93, 0, .12);
}

.player-avatar img {
  width: 52px;
  height: auto;
  margin: 3px 0 0 -1px;
}

.player-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.player-copy strong {
  max-width: 180px;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-copy span {
  font-size: 12px;
  color: #597086;
}

.xp-track {
  position: absolute;
  right: 12px;
  bottom: 7px;
  left: 65px;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: #dbe9ef;
}

.xp-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--city-teal), #6bd788);
  transition: width .55s cubic-bezier(.2,.8,.2,1);
}

.city-wallet {
  min-height: 48px;
  gap: 9px;
  padding: 5px 6px 5px 10px;
  border-radius: 17px;
}

.coin-glyph {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #986600;
  font-weight: 900;
  border: 3px solid #f4ad1f;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe775, #ffc229);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), 0 3px 0 #cc8d11;
}

.city-wallet strong {
  min-width: 62px;
  font-size: 18px;
}

.city-shop-button {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #7967d5, #a063c8);
  box-shadow: inset 0 -3px 0 rgba(71, 40, 128, .2);
}

.city-shop-button span { font-size: 17px; }

.city-wallet button {
  min-height: 38px;
  padding: 0 14px;
  color: #fff;
  font-weight: 800;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ff846d, var(--city-coral));
  box-shadow: inset 0 -3px 0 rgba(145, 45, 27, .18);
  cursor: pointer;
}

.city-stage-wrap {
  position: relative;
  max-width: 1180px;
  margin: auto;
  filter: drop-shadow(0 28px 34px rgba(15, 79, 111, .23));
}

.city-stage-wrap::after {
  position: absolute;
  z-index: -2;
  right: 5%;
  bottom: -3%;
  left: 5%;
  height: 14%;
  content: "";
  border-radius: 50%;
  background: rgba(20, 109, 147, .2);
  filter: blur(28px);
}

.city-sky-glow {
  position: absolute;
  z-index: -1;
  inset: -12% -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.68), transparent 67%);
}

.city-stage {
  --parallax-x: 0px;
  --parallax-y: 0px;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,.82);
  border-radius: clamp(20px, 3vw, 38px);
  background: #99daf1;
  box-shadow: inset 0 0 0 1px rgba(25, 80, 107, .12), inset 0 -18px 40px rgba(29, 91, 120, .12);
  transform: perspective(1600px) rotateX(.6deg);
  transform-origin: bottom center;
}

.city-map {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.012) translate3d(var(--parallax-x), var(--parallax-y), 0);
  transition: transform .28s ease-out;
  user-select: none;
  pointer-events: none;
}

.city-hotspot {
  position: absolute;
  z-index: 8;
  display: grid;
  justify-items: center;
  padding: 0;
  color: var(--city-ink);
  border: 0;
  background: transparent;
  filter: drop-shadow(0 6px 6px rgba(22, 55, 72, .25));
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .18s ease, filter .18s ease;
}

.city-hotspot::after {
  position: absolute;
  z-index: -1;
  top: 31px;
  width: 58px;
  height: 18px;
  content: "";
  border-radius: 50%;
  background: rgba(18, 48, 61, .23);
  filter: blur(5px);
}

.city-hotspot:hover,
.city-hotspot:focus-visible {
  z-index: 12;
  outline: none;
  filter: drop-shadow(0 9px 8px rgba(22, 55, 72, .3));
  transform: translate(-50%, -55%) scale(1.06);
}

.hotspot-home { left: 19%; top: 46%; }
.hotspot-bar { left: 64%; top: 47%; }
.hotspot-lot { left: 58%; top: 19%; }

.player-business {
  position: absolute;
  z-index: -3;
  bottom: 10px;
  left: 50%;
  width: clamp(185px, 21vw, 260px);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 16px 12px rgba(29,58,50,.3));
  transform: translateX(-50%) translateY(14px) scale(.82);
  transform-origin: bottom center;
  transition: opacity .5s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}

.player-business img { width: 100%; height: auto; display: block; }
.hotspot-lot.business-built .player-business { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.hotspot-lot.business-built .hotspot-pin { visibility: hidden; }
.hotspot-lot.business-built { top: 23%; }
.hotspot-lot.business-built strong { margin-top: -2px; color: #075f70; background: rgba(238,255,250,.94); }
.hotspot-lot.business-built small { color: #fff; background: linear-gradient(180deg,#16b79f,#098ba9); }
.business-sparkles { position:absolute; z-index:2; inset:5% 7% auto; height:55%; }
.business-sparkles i { position:absolute; color:#ffe770; font-style:normal; text-shadow:0 2px 5px rgba(102,68,0,.35); animation:businessSparkle 2.2s ease-in-out infinite; }
.business-sparkles i:nth-child(1){left:6%;top:34%;font-size:13px}.business-sparkles i:nth-child(2){right:10%;top:8%;font-size:17px;animation-delay:.7s}.business-sparkles i:nth-child(3){right:0;bottom:2%;font-size:10px;animation-delay:1.35s}

.bar-product-showcase {
  position: absolute;
  z-index: -2;
  bottom: 57px;
  left: 31%;
  width: clamp(112px, 13vw, 168px);
  height: clamp(92px, 10.8vw, 138px);
  display: block;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(8px) scale(.9);
  transition: opacity .35s ease, transform .35s ease;
}

.bar-product-showcase.ready {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.bar-showcase-glow {
  position: absolute;
  right: 8%;
  bottom: 22%;
  left: 8%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,244,168,.96), rgba(255,191,63,.38) 48%, transparent 72%);
  filter: blur(5px);
  animation: showcaseGlow 2.4s ease-in-out infinite;
}

.bar-product-showcase img {
  position: absolute;
  z-index: 2;
  top: -3%;
  left: 36%;
  width: 70%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 8px 7px rgba(24,53,48,.3));
  opacity: 0;
  transform: translateX(-50%) translateY(10px) rotate(-4deg) scale(.86);
  transition: opacity .28s ease, transform .42s cubic-bezier(.2,.8,.2,1);
}

.bar-product-showcase.product-visible img {
  opacity: 1;
  transform: translateX(-50%) translateY(0) rotate(2deg) scale(1);
  animation: showcaseProductFloat 2.5s ease-in-out infinite .42s;
}

.bar-showcase-copy {
  position: absolute;
  z-index: 3;
  right: -4%;
  bottom: 7px;
  left: -4%;
  display: grid;
  justify-items: center;
  padding: 5px 7px 4px;
  color: #173b50;
  line-height: 1.05;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 14px rgba(13,64,82,.22), inset 0 -2px 0 rgba(23,117,142,.07);
  backdrop-filter: blur(8px);
}

.bar-showcase-copy b {
  width: 100%;
  overflow: hidden;
  font-size: clamp(8px, .78vw, 10px);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-showcase-copy em {
  margin-top: 2px;
  color: #ec5c42;
  font-size: clamp(6px, .62vw, 8px);
  font-style: normal;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bar-showcase-dots {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 3px;
  transform: translateY(5px);
}

.bar-showcase-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(23,62,77,.3);
  transition: width .2s ease, background .2s ease;
}

.bar-showcase-dots i.active { width: 9px; border-radius: 99px; background: #ff6c52; }

.hotspot-pin {
  position: relative;
  display: grid;
  width: clamp(38px, 4.4vw, 56px);
  aspect-ratio: 1;
  place-items: center;
  color: #fff;
  font-size: clamp(21px, 2.3vw, 29px);
  font-weight: 900;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 50% 50% 50% 12px;
  background: linear-gradient(145deg, #1ed3bc, #078dba);
  box-shadow: inset 0 -6px 0 rgba(3, 89, 114, .17), 0 4px 0 rgba(9, 78, 102, .18);
  transform: rotate(-45deg);
  animation: markerFloat 2.5s ease-in-out infinite;
}

.hotspot-pin span { transform: rotate(45deg); }
.hotspot-bar .hotspot-pin { visibility: hidden; }
.hotspot-lot .hotspot-pin { color: #765200; background: linear-gradient(145deg, #ffe66a, #ffbd2e); }

.city-hotspot strong,
.city-hotspot small {
  padding: 4px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.city-hotspot strong {
  margin-top: 4px;
  font-size: clamp(11px, 1.45vw, 16px);
  box-shadow: 0 3px 0 rgba(16, 75, 98, .12);
}

.city-hotspot small {
  margin-top: 2px;
  padding-block: 2px;
  color: #647789;
  font-size: clamp(8px, 1vw, 11px);
}

.city-character {
  --walk-duration: 360ms;
  position: absolute;
  z-index: 10;
  left: 49%;
  top: 76%;
  width: clamp(34px, 4.2vw, 54px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left var(--walk-duration) linear, top var(--walk-duration) linear;
}

.city-character img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 2px rgba(20, 43, 51, .28));
  transform-origin: bottom center;
  animation: characterIdle 2.3s ease-in-out infinite;
}

.city-character.walking img { animation: characterWalk .34s steps(2,end) infinite; }
.city-character.walking img.step-a { transform: translateY(-2px) rotate(-4deg) skewX(-1.6deg) scaleX(.98) scaleY(1.025); }
.city-character.walking img.step-b { transform: translateY(1px) rotate(4deg) skewX(1.6deg) scaleX(1.025) scaleY(.97); }

.character-shadow {
  position: absolute;
  z-index: 1;
  right: 10%;
  bottom: -1%;
  left: 10%;
  height: 7%;
  border-radius: 50%;
  background: rgba(18, 51, 59, .34);
  filter: blur(3px);
}

.character-bubble {
  position: absolute;
  z-index: 3;
  bottom: 68%;
  left: 88%;
  min-width: 108px;
  max-width: 126px;
  padding: 6px 8px;
  color: #334a59;
  font-size: clamp(8px, .85vw, 10px);
  font-weight: 700;
  text-align: center;
  border: 2px solid #fff;
  border-radius: 14px 14px 14px 3px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 7px 15px rgba(24, 62, 78, .18);
  transition: opacity .16s ease, transform .16s ease;
}

.city-character.walking .character-bubble {
  opacity: 0;
  transform: translateY(8px) scale(.92);
}

.city-shell.character-moving .city-hotspot,
.city-shell.character-moving .city-dock {
  pointer-events: none;
}

.stage-hint {
  position: absolute;
  z-index: 15;
  bottom: 16px;
  left: 50%;
  padding: 7px 13px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 99px;
  background: rgba(14, 58, 78, .65);
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
  pointer-events: none;
}

.city-quest {
  position: absolute;
  z-index: 30;
  top: 86px;
  right: max(10px, calc((100% - 1180px) / 2 + 14px));
  width: min(330px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 20px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 18px 45px rgba(20, 76, 106, .24);
  backdrop-filter: blur(14px);
  transform: translateY(-12px) scale(.97);
  opacity: 0;
  pointer-events: none;
  transition: .22s ease;
}

.city-quest.open { transform: none; opacity: 1; pointer-events: auto; }

.quest-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  color: #fff;
  background: linear-gradient(135deg, #0a9ab4, #0876b3);
}

.quest-star {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: #a36300;
  font-size: 22px;
  border-radius: 13px;
  background: linear-gradient(145deg, #fff075, #ffc533);
  box-shadow: inset 0 -3px 0 rgba(159, 99, 0, .16);
}

.quest-heading div { display: grid; flex: 1; }
.quest-heading small { font-size: 9px; font-weight: 900; letter-spacing: 1.3px; opacity: .8; }
.quest-heading strong { font-size: 15px; }
.quest-heading button { color: #fff; font-size: 24px; border: 0; background: none; cursor: pointer; }
.city-quest ul { padding: 8px 12px 12px; margin: 0; list-style: none; }
.city-quest li { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #edf2f5; }
.city-quest li:last-child { border: 0; }
.city-quest li > span { display: grid; width: 32px; height: 32px; place-items: center; color: #078cac; border-radius: 10px; background: #e2f8f7; }
.city-quest li div { display: grid; flex: 1; gap: 2px; }
.city-quest li b { font-size: 12px; }
.city-quest li small { color: #789; font-size: 10px; }
.city-quest li i { color: #b7c5cc; font-style: normal; font-weight: 900; }
.city-quest li.done { opacity: .58; }
.city-quest li.done b { text-decoration: line-through; }
.city-quest li.done i::after { content: "✓"; }
.city-quest li.done i { font-size: 0; color: #10a980; }
.city-quest li.done i::after { font-size: 16px; }

.city-dock { display: none; }

.city-modal-backdrop {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(14, 42, 58, .55);
  backdrop-filter: blur(9px);
  opacity: 0;
  transition: opacity .18s ease;
}

.city-modal-backdrop[hidden] { display: none; }
.city-modal-backdrop.open { opacity: 1; }

.city-modal-card {
  position: relative;
  width: min(470px, 100%);
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 28px;
  background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
  box-shadow: 0 30px 70px rgba(4, 36, 53, .35), inset 0 -5px 0 rgba(17, 103, 130, .06);
  transform: translateY(18px) scale(.96);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}

.city-modal-backdrop.open .city-modal-card { transform: none; }
.city-modal-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; color: #607788; font-size: 24px; border: 0; border-radius: 50%; background: #edf4f6; cursor: pointer; }
.city-modal-icon { display: grid; width: 66px; height: 66px; margin: -50px auto 12px; place-items: center; color: #fff; font-size: 34px; font-weight: 900; border: 5px solid #fff; border-radius: 22px; background: linear-gradient(145deg, #20cdb8, #0788b6); box-shadow: 0 12px 24px rgba(5, 108, 139, .28), inset 0 -6px 0 rgba(1, 75, 98, .16); }
.city-kicker { margin: 0 0 4px; color: #0a9bad; font-size: 10px; font-weight: 900; letter-spacing: 1.8px; }
.city-modal-card h2 { margin: 0; color: var(--city-ink); font-size: clamp(24px, 6vw, 32px); }
.city-modal-card p { color: #607181; line-height: 1.55; }
.city-modal-actions { display: flex; justify-content: center; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
.city-action { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 17px; box-sizing: border-box; color: #486171; font: inherit; font-weight: 800; text-decoration: none; border: 1px solid #d9e5e9; border-radius: 14px; background: #f2f7f8; cursor: pointer; }
.city-action.primary { color: #fff; border-color: #078db2; background: linear-gradient(180deg, #15b7c0, #087eb6); box-shadow: inset 0 -4px 0 rgba(2, 71, 105, .18), 0 7px 14px rgba(7, 126, 182, .2); }
.city-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; }
.city-info-grid div { display: grid; gap: 3px; padding: 13px; border-radius: 15px; background: #edf8f7; }
.city-info-grid span { color: #6d858c; font-size: 11px; }
.city-info-grid strong { color: #087f91; font-size: 22px; }
.starter-items { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.starter-items span { padding: 8px 10px; font-size: 12px; border: 1px solid #f3e4b7; border-radius: 11px; background: #fff9e8; }
.starter-kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 16px 0; }
.starter-kit div { display: grid; gap: 6px; padding: 14px 5px 10px; color: #0a94a6; font-size: 27px; border: 1px solid #d8eeee; border-radius: 15px; background: #effafa; }
.starter-kit span { color: #506978; font-size: 11px; font-weight: 800; }
.city-note { padding: 10px; font-size: 12px; border-radius: 12px; background: #fff4d0; }
.city-feature-line { display: flex; align-items: center; gap: 12px; padding: 13px; text-align: left; border-radius: 15px; background: #eaf9f8; }
.city-feature-line > span { display: grid; width: 40px; height: 40px; place-items: center; color: #fff; font-size: 22px; border-radius: 12px; background: #0aaf9f; }
.city-feature-line div { display: grid; gap: 2px; }
.city-feature-line small { color: #66818b; }
.city-feature-line.success { background: #e9f8ed; }
.city-feature-line.success > span { background: #38a963; }

.city-toast {
  position: fixed;
  z-index: 100001;
  bottom: 26px;
  left: 50%;
  max-width: calc(100vw - 32px);
  padding: 11px 17px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 99px;
  background: #174965;
  box-shadow: 0 10px 25px rgba(10, 48, 68, .28);
  transform: translate(-50%, 30px);
  opacity: 0;
  pointer-events: none;
  transition: .25s ease;
}
.city-toast.show { transform: translate(-50%, 0); opacity: 1; }
.city-toast.reward { color: #6b4b00; background: linear-gradient(180deg, #fff08a, #ffc43d); }
.city-toast.error { background: #bb3c3c; }

@keyframes markerFloat { 0%,100% { transform: rotate(-45deg) translate(0,0); } 50% { transform: rotate(-45deg) translate(-3px,-3px); } }
@keyframes characterIdle { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1px) rotate(.4deg); } }
@keyframes characterWalk {
  0% { transform: translateY(1px) rotate(-4deg) skewX(-2deg) scaleX(.97) scaleY(1.03); }
  50% { transform: translateY(-4px) rotate(4deg) skewX(2deg) scaleX(1.035) scaleY(.965); }
  100% { transform: translateY(1px) rotate(-4deg) skewX(-2deg) scaleX(.97) scaleY(1.03); }
}
@keyframes businessSparkle { 0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(22deg)} }
@keyframes showcaseProductFloat { 0%,100% { transform: translateX(-50%) translateY(0) rotate(2deg) scale(1); } 50% { transform: translateX(-50%) translateY(-4px) rotate(-2deg) scale(1.035); } }
@keyframes showcaseGlow { 0%,100% { opacity: .66; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }

@media (max-width: 720px) {
  body { padding-bottom: 72px; }
  .topbar .nav a:not(#navCity), .topbar .nav button:not(#navLogin):not(#navLogout) { display: none !important; }
  .container { padding: 10px 7px 16px; }
  .city-hud { margin: 0 3px 8px; }
  .player-card { min-width: 0; width: 54%; height: 52px; padding-right: 9px; }
  .player-avatar { width: 42px; height: 42px; flex: 0 0 auto; }
  .player-avatar img { width: 46px; }
  .player-copy strong { max-width: 112px; font-size: 13px; }
  .city-wallet { min-height: 42px; }
  .city-wallet strong { min-width: 42px; font-size: 14px; }
  .city-wallet button { width: 36px; min-height: 34px; padding: 0; overflow: hidden; font-size: 0; }
  .city-shop-button { width: 36px; min-height: 34px; justify-content: center; padding: 0; }
  .city-shop-button b { display: none; }
  .city-wallet button::after { content: "★"; font-size: 17px; }
  .coin-glyph { width: 25px; height: 25px; font-size: 12px; border-width: 2px; }
  .city-stage { border-width: 2px; border-radius: 20px; }
  .city-hotspot small { display: none; }
  .city-hotspot strong { padding: 3px 6px; }
  .hotspot-home { left: 19%; top: 45%; }
  .hotspot-bar { left: 64%; top: 46%; }
  .hotspot-lot { left: 58%; top: 18%; }
  .hotspot-lot.business-built { top: 22%; }
  .player-business { bottom: 10px; width: clamp(150px, 23vw, 215px); }
  .character-bubble { display: none; }
  .stage-hint { bottom: 7px; padding: 5px 9px; font-size: 9px; }
  .city-quest { position: fixed; top: 72px; right: 12px; }
  .city-dock {
    position: fixed;
    z-index: 90;
    right: 10px;
    bottom: 8px;
    left: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 20px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 35px rgba(13, 66, 94, .27);
    backdrop-filter: blur(16px);
  }
  .city-dock button { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; color: #536d7b; font-size: 10px; font-weight: 800; border: 0; border-radius: 14px; background: transparent; }
  .city-dock span { font-size: 20px; }
  .city-dock .dock-primary { color: #fff; background: linear-gradient(160deg, #17bfa9, #078cb7); box-shadow: inset 0 -3px 0 rgba(4, 76, 100, .16); }
  .city-modal-card { padding: 22px 16px 18px; border-radius: 24px; }
  .city-action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .city-map { transition: none; }
}

/* Modo jogo: a cidade ocupa todo o visor e os controles flutuam sobre o mapa. */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  padding: 0;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

body > .topbar,
body > #floatingCart,
body > #cartOverlay,
body > #cartDrawer {
  display: none !important;
}

body > .container {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding: 0;
}

.city-shell {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 0;
}

.city-stage-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  filter: none;
}

.city-stage-wrap::after,
.city-sky-glow {
  display: none;
}

.city-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 70px rgba(9, 60, 87, .14);
  transform: none;
}

.city-stage::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(5, 46, 70, .12), transparent 17%),
    linear-gradient(0deg, rgba(5, 46, 70, .1), transparent 16%);
  pointer-events: none;
}

.city-map {
  object-fit: cover;
  object-position: center center;
  transform: scale(1.008) translate3d(var(--parallax-x), var(--parallax-y), 0);
}

.city-hud {
  position: absolute;
  z-index: 40;
  top: max(12px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  left: max(14px, env(safe-area-inset-left));
  max-width: none;
  margin: 0;
  pointer-events: none;
}

.city-hud > * {
  pointer-events: auto;
}

.player-card,
.city-wallet {
  box-shadow: 0 10px 28px rgba(8, 50, 73, .25), inset 0 -3px 0 rgba(18, 97, 134, .08);
}

.city-icon-button {
  width: 38px;
  min-width: 38px;
  padding: 0 !important;
  font-size: 20px !important;
  background: linear-gradient(180deg, #27b9d3, #087db4) !important;
}

.city-icon-button[hidden],
.rotate-fullscreen-button[hidden] {
  display: none !important;
}

.city-quest {
  top: max(82px, calc(env(safe-area-inset-top) + 70px));
  right: max(14px, env(safe-area-inset-right));
}

.stage-hint {
  bottom: max(16px, env(safe-area-inset-bottom));
}

.city-modal-card {
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
}

.rotate-device {
  display: none;
}

@media (orientation: landscape) and (max-height: 600px) {
  .city-hud {
    top: max(7px, env(safe-area-inset-top));
    right: max(9px, env(safe-area-inset-right));
    left: max(9px, env(safe-area-inset-left));
  }

  .player-card {
    width: auto;
    min-width: 178px;
    height: 46px;
    padding-right: 12px;
    border-radius: 14px;
  }

  .player-avatar {
    width: 38px;
    height: 38px;
    margin-right: 8px;
    border-radius: 11px;
  }

  .player-avatar img { width: 42px; }
  .player-copy strong { max-width: 125px; font-size: 12px; }
  .player-copy span { font-size: 10px; }
  .xp-track { right: 9px; bottom: 5px; left: 54px; }

  .city-wallet {
    min-height: 40px;
    gap: 6px;
    padding: 3px 4px 3px 7px;
    border-radius: 14px;
  }

  .coin-glyph { width: 24px; height: 24px; font-size: 11px; border-width: 2px; }
  .city-wallet strong { min-width: 38px; font-size: 14px; }
  .city-wallet button { min-height: 32px; padding-inline: 10px; border-radius: 10px; font-size: 11px; }
  .city-wallet #cityMissionsButton { width: auto; min-width: 64px; overflow: visible; }
  .city-wallet #cityMissionsButton::after { display: none; }
  .city-wallet .city-icon-button { width: 32px; min-width: 32px; font-size: 17px !important; }

  .city-hotspot small { display: none; }
  .city-hotspot strong { padding: 3px 7px; font-size: 11px; }
  .hotspot-pin { width: 38px; font-size: 20px; }
  .hotspot-lot { top: 13%; }
  .hotspot-lot.business-built { top: 18%; }
  .player-business { bottom: 10px; width: 162px; }
  .bar-product-showcase { bottom: 39px; left: 35%; width: 88px; height: 74px; }
  .bar-product-showcase img { top: -4%; left: 33%; width: 68%; height: 70%; }
  .bar-showcase-copy { bottom: 4px; padding: 3px 5px; }
  .bar-showcase-copy b { font-size: 6px; }
  .bar-showcase-copy em { font-size: 5px; }
  .character-bubble { display: none; }
  .stage-hint { display: none; }

  .city-quest {
    top: max(61px, calc(env(safe-area-inset-top) + 54px));
    right: max(9px, env(safe-area-inset-right));
    width: min(300px, calc(100vw - 18px));
  }

  .quest-heading { padding: 10px 12px; }
  .quest-star { width: 32px; height: 32px; font-size: 18px; border-radius: 10px; }
  .city-quest ul { padding: 4px 10px 7px; }
  .city-quest li { padding: 6px 3px; }

  .city-dock {
    position: fixed;
    z-index: 90;
    right: auto;
    bottom: max(7px, env(safe-area-inset-bottom));
    left: 50%;
    display: grid;
    width: min(310px, 48vw);
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 16px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 28px rgba(13, 66, 94, .25);
    backdrop-filter: blur(14px);
    transform: translateX(-50%);
  }

  .city-dock button {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 4px;
    color: #536d7b;
    font-size: 9px;
    font-weight: 800;
    border: 0;
    border-radius: 11px;
    background: transparent;
  }

  .city-dock span { font-size: 16px; }
  .city-dock .dock-primary { color: #fff; background: linear-gradient(160deg, #17bfa9, #078cb7); }

  .city-modal-backdrop { padding: 10px; }
  .city-modal-card { width: min(540px, 86vw); padding: 16px 20px 14px; border-radius: 20px; }
  .city-modal-icon { width: 48px; height: 48px; margin: -33px auto 7px; font-size: 25px; border-width: 4px; border-radius: 16px; }
  .city-modal-card h2 { font-size: 23px; }
  .city-modal-card p { margin-block: 7px; font-size: 12px; line-height: 1.35; }
  .city-info-grid { margin: 8px 0; }
  .city-info-grid div { padding: 8px; }
  .city-info-grid strong { font-size: 17px; }
  .starter-kit { margin: 8px 0; }
  .starter-kit div { padding: 7px 4px 6px; font-size: 19px; }
  .city-modal-actions { margin-top: 9px; }
  .city-action { min-height: 36px; padding: 0 13px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bar-product-showcase img,
  .bar-showcase-glow,
  .business-sparkles i { animation: none !important; }
}

@media (orientation: portrait) and (max-width: 900px) {
  .rotate-device {
    position: fixed;
    z-index: 200000;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 26px;
    padding: max(28px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    background:
      radial-gradient(circle at 50% 30%, rgba(255, 231, 112, .2), transparent 36%),
      linear-gradient(150deg, #0aa99d, #087ab5 72%, #145685);
  }

  .rotate-device > div:last-child { display: grid; justify-items: center; }
  .rotate-device .city-kicker { color: #ffe36c; }
  .rotate-device h1 { margin: 4px 0 7px; font-size: clamp(30px, 9vw, 44px); }
  .rotate-device p:not(.city-kicker) { max-width: 330px; margin: 0; color: rgba(255,255,255,.88); line-height: 1.5; }
  .rotate-device small { max-width: 300px; margin-top: 12px; color: rgba(255,255,255,.66); line-height: 1.4; }

  .rotate-phone {
    position: relative;
    width: 72px;
    height: 126px;
    border: 5px solid #fff;
    border-radius: 16px;
    box-shadow: 0 16px 30px rgba(2, 45, 74, .3);
    animation: rotatePhone 2.8s ease-in-out infinite;
  }

  .rotate-phone::before {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 22px;
    height: 4px;
    content: "";
    border-radius: 99px;
    background: rgba(255,255,255,.8);
    transform: translateX(-50%);
  }

  .rotate-phone span {
    position: absolute;
    inset: 18px 7px 8px;
    border-radius: 8px;
    background: linear-gradient(145deg, #78e1cf, #8bd5f0);
  }

  .rotate-fullscreen-button {
    min-height: 46px;
    margin-top: 20px;
    padding: 0 20px;
    color: #785000;
    font: inherit;
    font-weight: 900;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 15px;
    background: linear-gradient(180deg, #fff17a, #ffc43d);
    box-shadow: inset 0 -4px 0 rgba(169, 102, 0, .15), 0 10px 22px rgba(4, 48, 73, .22);
  }
}

@keyframes rotatePhone {
  0%, 20% { transform: rotate(0deg); }
  48%, 82% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}