:root {
  --yt-ink: #102f35;
  --yt-ink-deep: #082126;
  --yt-teal: #0b7f78;
  --yt-teal-bright: #1fc7a1;
  --yt-mint: #bdebd7;
  --yt-amber: #ffc857;
  --yt-coral: #ef765f;
  --yt-cream: #fff8df;
  --yt-paper: #f7f2e3;
  --yt-sky: #9ed9e2;
  --yt-safe-top: env(safe-area-inset-top, 0px);
  --yt-safe-right: env(safe-area-inset-right, 0px);
  --yt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --yt-safe-left: env(safe-area-inset-left, 0px);
  color-scheme: light;
  font-family: Inter, "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html.yt-town-root,
.yt-town-body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--yt-ink-deep);
}

.yt-town-body {
  position: fixed;
  inset: 0;
  color: var(--yt-ink);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.yt-town-skip {
  position: fixed;
  z-index: 1000;
  left: calc(var(--yt-safe-left) + 12px);
  top: -80px;
  padding: 10px 14px;
  border-radius: 0 0 10px 10px;
  color: #fff;
  background: var(--yt-ink-deep);
  font-size: .8rem;
  font-weight: 800;
  text-decoration: none;
}
.yt-town-skip:focus { top: var(--yt-safe-top); }

.yt-town-app {
  --yt-ground-base: #79ba86;
  --yt-ground-deep: rgba(37, 104, 68, .16);
  --yt-water-near: #58adbf;
  --yt-water-far: #348fa9;
  --yt-window-near: #9bd5df;
  --yt-window-far: #4e9fb0;
  --yt-sun-warmth: rgba(255, 247, 184, .34);
  --yt-sun-opacity: .78;
  --yt-grade: rgba(14, 54, 61, 0);
  --yt-grade-opacity: 0;
  --yt-lens-opacity: .28;
  --yt-lamp-glow: .18;
  --yt-light-pool-opacity: .04;
  --yt-headlight-opacity: 0;
  --yt-shadow-x: 12px;
  --yt-shadow-y: 14px;
  --yt-shadow-stretch: 1.08;
  --yt-shadow-blur: 5px;
  --yt-contact-shadow-x: 4px;
  --yt-contact-shadow-y: 5px;
  --yt-sun-x: 42%;
  --yt-sun-y: 18%;
  --yt-light-angle: 132deg;
  --yt-future-opacity: .34;
  --yt-future-glow: rgba(93, 239, 222, .48);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--yt-ground-base);
}

.yt-town-topbar {
  position: relative;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(300px, 520px) minmax(150px, 1fr);
  gap: clamp(12px, 2.2vw, 32px);
  align-items: center;
  min-height: calc(78px + var(--yt-safe-top));
  padding: calc(10px + var(--yt-safe-top)) calc(18px + var(--yt-safe-right)) 10px calc(18px + var(--yt-safe-left));
  color: #fff;
  background:
    linear-gradient(90deg, rgba(8, 33, 38, .99), rgba(16, 57, 61, .96)),
    var(--yt-ink-deep);
  box-shadow: 0 8px 30px rgba(6, 27, 31, .25);
}

.yt-town-identity { display: flex; min-width: 0; align-items: center; gap: 11px; }
.yt-town-identity > div { min-width: 0; }
.yt-town-monogram {
  display: grid;
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 14px 14px 14px 4px;
  color: var(--yt-ink-deep);
  background: var(--yt-amber);
  box-shadow: inset 0 -5px 0 rgba(151, 91, 19, .17), 0 7px 16px rgba(0, 0, 0, .18);
  font: 1000 1.45rem/1 Arial, sans-serif;
  transform: rotate(-3deg);
}
.yt-town-identity p,
.yt-town-identity h1 { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-identity p { color: #91c9c5; font-size: .59rem; font-weight: 900; letter-spacing: .13em; }
.yt-town-identity h1 { margin-top: 2px; font-size: clamp(.95rem, 1.6vw, 1.2rem); font-weight: 1000; letter-spacing: .02em; }

.yt-town-mission {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  align-items: center;
  min-width: 0;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 15px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.yt-town-mission-copy { min-width: 0; }
.yt-town-mission-copy span,
.yt-town-mission-copy strong { display: block; }
.yt-town-mission-copy span { color: #9ed3cf; font-size: .58rem; font-weight: 900; letter-spacing: .11em; }
.yt-town-mission-copy strong { overflow: hidden; margin-top: 1px; font-size: clamp(.76rem, 1.6vw, .94rem); text-overflow: ellipsis; white-space: nowrap; }
.yt-town-mission-copy small { display: block; overflow: hidden; margin-top: 2px; color: #a9c9c7; font-size: .52rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-progress { display: grid; min-width: 84px; grid-template-columns: auto; gap: 4px; }
.yt-town-progress > strong { color: var(--yt-amber); font: 1000 1.05rem/1 Arial, sans-serif; text-align: right; }
.yt-town-progress-track { display: block; width: 84px; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .18); }
.yt-town-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--yt-amber), #fff19b); transition: width .3s ease; }
.yt-town-mission-steps { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 2px 0 0; padding: 0; list-style: none; }
.yt-town-mission-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 6px; height: 2px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.yt-town-mission-steps li { position: relative; display: flex; min-width: 0; align-items: center; gap: 5px; color: #86aaa8; font-size: .46rem; font-weight: 900; }
.yt-town-mission-steps li:nth-child(2) { justify-content: center; }.yt-town-mission-steps li:nth-child(3) { justify-content: flex-end; }
.yt-town-mission-steps i { z-index: 1; display: grid; width: 13px; height: 13px; flex: 0 0 13px; place-items: center; border: 2px solid #5d7d7d; border-radius: 50%; background: #173b40; color: transparent; font: 1000 0/1 Arial, sans-serif; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.yt-town-mission-steps li.is-active { color: #fff; }.yt-town-mission-steps li.is-active i { border-color: var(--yt-amber); background: var(--yt-amber); box-shadow: 0 0 0 4px rgba(255, 200, 87, .12), 0 0 11px rgba(255, 200, 87, .35); }
.yt-town-mission-steps li.is-complete { color: #9ef3dd; }.yt-town-mission-steps li.is-complete i { border-color: #69e4ca; background: #69e4ca; box-shadow: 0 0 9px rgba(105, 228, 202, .35); }
.yt-town-mission-steps li.is-complete i::after { content: "✓"; color: #082c31; font: 1000 8px/1 Arial, sans-serif; }

.yt-town-top-actions { display: flex; min-width: 0; justify-content: flex-end; align-items: center; gap: 8px; }
.yt-town-icon-button,
.yt-town-exit {
  display: grid;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  text-decoration: none;
  cursor: pointer;
}
.yt-town-icon-button { width: 40px; font-weight: 1000; }
.yt-town-map-open span,
.yt-town-goal-open span { font-size: .58rem; font-weight: 1000; letter-spacing: .02em; white-space: nowrap; }
.yt-town-exit { min-width: 70px; padding: 0 12px; font-size: .72rem; font-weight: 900; }
.yt-town-icon-button:hover,
.yt-town-exit:hover { color: #fff; background: rgba(255, 255, 255, .16); }

.yt-town-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  outline: none;
  background: #79bb87;
  touch-action: none;
  isolation: isolate;
}

.yt-town-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.yt-town-3d-canvas {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #92b8c2, #607d79 52%, #263e3f);
  outline: none;
  cursor: grab;
  touch-action: none;
}
.yt-town-app[data-camera-control="dragging"] .yt-town-3d-canvas { cursor: grabbing; }
.yt-town-camera-reticle { position: absolute; z-index: 57; left: 50%; top: 50%; display: block; width: 26px; height: 26px; border: 0; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); transition: opacity .16s ease; }
.yt-town-camera-reticle::before,.yt-town-camera-reticle::after,.yt-town-camera-reticle i::before,.yt-town-camera-reticle i::after { content: ""; position: absolute; width: 6px; height: 6px; border-color: rgba(244, 255, 252, .88); border-style: solid; filter: drop-shadow(0 1px 2px rgba(0, 19, 24, .68)); }
.yt-town-camera-reticle::before { left: 0; top: 0; border-width: 1px 0 0 1px; }
.yt-town-camera-reticle::after { right: 0; top: 0; border-width: 1px 1px 0 0; }
.yt-town-camera-reticle i::before { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.yt-town-camera-reticle i::after { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.yt-town-app[data-camera-mode="pedestrian-first-person"][data-rendering="native-webgl"] .yt-town-camera-reticle { opacity: .72; }
.yt-town-app[data-camera-mode="pedestrian-first-person"][data-camera-control="dragging"] .yt-town-camera-reticle,
.yt-town-app[data-camera-mode="pedestrian-first-person"][data-interior-camera-control="dragging"] .yt-town-camera-reticle { opacity: .36; }
.yt-town-app.is-transitioning .yt-town-camera-reticle,
.yt-town-app[data-conversation="open"] .yt-town-camera-reticle { opacity: 0; }
.yt-town-app[data-rendering="native-webgl"] .yt-town-world {
  opacity: 0;
  pointer-events: none;
}
.yt-town-app[data-rendering="css-fallback"] .yt-town-3d-canvas { display: none; }
.yt-town-interior-stage > .yt-town-3d-canvas {
  z-index: 1;
  background: linear-gradient(180deg, #142f37, #0a2028 58%, #04141b);
}
.yt-town-app.is-interior[data-interior-rendering="native-webgl"] .yt-town-interior-world {
  opacity: 0;
  pointer-events: none;
}
.yt-town-app.is-interior[data-interior-rendering="native-webgl"] .yt-town-interior-atmosphere { opacity: .28; }
.yt-town-app.is-interior[data-interior-rendering="native-webgl"] .yt-town-interior-stage {
  background: radial-gradient(circle at 50% 7%, #193e47, #071a22 58%, #031118);
}
.yt-town-app[data-rendering="native-webgl"] .yt-town-depth-lens {
  background: radial-gradient(ellipse at 50% 0, rgba(225, 247, 247, .08), transparent 44%), linear-gradient(180deg, transparent 55%, rgba(1, 12, 18, .2));
  box-shadow: inset 0 0 100px rgba(1, 14, 20, .22);
}
.yt-town-app[data-rendering="native-webgl"] .yt-town-future-scan { opacity: .16; }

.yt-town-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 1500px;
  height: 920px;
  overflow: hidden;
  transform-origin: 0 0;
  will-change: transform;
  background: #78b987;
}

.yt-town-ground {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8px 8px, rgba(37, 104, 68, .16) 1.2px, transparent 1.5px) 0 0 / 24px 24px,
    linear-gradient(135deg, rgba(255, 255, 255, .035) 25%, transparent 25%) 0 0 / 44px 44px,
    #79ba86;
}
.yt-town-sunlight {
  position: absolute;
  z-index: 45;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(132deg, rgba(255, 250, 202, .2), transparent 32%, transparent 72%, rgba(14, 67, 72, .08));
  mix-blend-mode: soft-light;
}

.yt-town-water {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  width: 205px;
  height: 920px;
  overflow: hidden;
  background:
    repeating-linear-gradient(172deg, transparent 0 30px, rgba(255, 255, 255, .2) 31px 34px, transparent 35px 62px),
    linear-gradient(90deg, #58adbf, #348fa9);
  box-shadow: inset 16px 0 24px rgba(16, 75, 82, .17);
}
.yt-town-water > i { position: absolute; width: 78px; height: 15px; border-top: 3px solid rgba(255, 255, 255, .5); border-radius: 50%; }
.yt-town-water > i:nth-child(1) { left: 28px; top: 105px; }
.yt-town-water > i:nth-child(2) { right: 18px; top: 275px; }
.yt-town-water > i:nth-child(3) { left: 8px; top: 625px; }
.yt-town-water > i:nth-child(4) { right: -5px; top: 800px; }
.yt-town-quay { position: absolute; z-index: 3; left: 1260px; top: 0; width: 35px; height: 920px; background: repeating-linear-gradient(0deg, #e2cf9e 0 38px, #c7b47f 39px 43px); box-shadow: -8px 0 15px rgba(55, 75, 56, .18); }
.yt-town-pier { position: absolute; z-index: 5; left: 1215px; top: 470px; width: 215px; height: 86px; border: 5px solid #684c33; border-radius: 4px; background: repeating-linear-gradient(90deg, #b7834b 0 15px, #91663c 16px 20px); box-shadow: 0 15px 15px rgba(29, 62, 59, .22); }
.yt-town-pier i { position: absolute; bottom: -34px; width: 12px; height: 36px; background: #67482e; }
.yt-town-pier i:nth-child(1) { left: 14px; }.yt-town-pier i:nth-child(2) { left: 96px; }.yt-town-pier i:nth-child(3) { right: 12px; }
.yt-town-container-stack { position: absolute; z-index: 8; left: 1225px; top: 575px; width: 110px; height: 80px; pointer-events: none; }
.yt-town-container-stack i { position: absolute; width: 72px; height: 30px; border: 3px solid rgba(53, 52, 45, .3); border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), 0 7px 9px rgba(39, 62, 55, .16); }
.yt-town-container-stack i:nth-child(1) { left: 0; bottom: 0; background: #e0634b; }
.yt-town-container-stack i:nth-child(2) { left: 37px; bottom: 0; background: #3e8da0; }
.yt-town-container-stack i:nth-child(3) { left: 18px; bottom: 29px; background: #e3a53f; }
.yt-town-ship { position: absolute; left: 48px; top: 710px; width: 125px; height: 48px; border-radius: 7px 12px 36px 25px; background: #f1e8d7; box-shadow: 0 11px 0 -5px rgba(8, 54, 72, .35); transform: rotate(4deg); }
.yt-town-ship::before { content: ""; position: absolute; left: 18px; top: -23px; width: 62px; height: 27px; border-radius: 5px 5px 0 0; background: #e6d8c2; }
.yt-town-ship::after { content: ""; position: absolute; right: 19px; top: 11px; width: 16px; height: 16px; border-radius: 50%; background: #2c778d; box-shadow: -25px 0 #2c778d; }
.yt-town-ship b { position: absolute; left: 42px; top: -42px; width: 5px; height: 22px; background: #785642; }
.yt-town-ship em { position: absolute; left: 47px; top: -42px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 25px solid var(--yt-coral); }

.yt-town-road { position: absolute; z-index: 2; background: #51656a; box-shadow: inset 0 7px 0 rgba(255, 255, 255, .05), inset 0 -7px 0 rgba(8, 37, 41, .11); }
.yt-town-road::after { content: ""; position: absolute; opacity: .8; }
.yt-town-road-main { left: 0; top: 385px; width: 1260px; height: 190px; }
.yt-town-road-main::after { left: 0; right: 0; top: 93px; height: 5px; background: repeating-linear-gradient(90deg, var(--yt-amber) 0 34px, transparent 34px 62px); }
.yt-town-road-cross { left: 660px; top: 0; width: 180px; height: 920px; }
.yt-town-road-cross::after { left: 88px; top: 0; bottom: 0; width: 5px; background: repeating-linear-gradient(0deg, var(--yt-amber) 0 34px, transparent 34px 62px); }
.yt-town-sidewalk { position: absolute; z-index: 4; left: 0; width: 1260px; height: 32px; background: repeating-linear-gradient(90deg, #e6d9b8 0 54px, #c9bb99 55px 57px); box-shadow: 0 4px 8px rgba(42, 65, 56, .15); }
.yt-town-sidewalk-north { top: 353px; }
.yt-town-sidewalk-south { top: 575px; box-shadow: 0 -4px 8px rgba(42, 65, 56, .13); }
.yt-town-crosswalk { position: absolute; z-index: 5; width: 94px; height: 160px; background: repeating-linear-gradient(0deg, rgba(255, 248, 222, .92) 0 14px, transparent 14px 25px); }
.yt-town-crosswalk-center { left: 703px; top: 400px; transform: rotate(90deg); }
.yt-town-crosswalk-port { left: 1150px; top: 400px; transform: rotate(90deg); }

.yt-town-plaza {
  position: absolute;
  z-index: 4;
  left: 535px;
  top: 610px;
  width: 430px;
  height: 250px;
  border: 12px solid #ddca9f;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f7efd8 0 41%, #eadaba 42% 55%, #f7efd8 56% 64%, #ddca9f 65%);
  box-shadow: inset 0 0 25px rgba(112, 87, 45, .11), 0 10px 20px rgba(44, 76, 57, .12);
}
.yt-town-plaza-ring { position: absolute; left: 50%; top: 50%; width: 112px; height: 75px; border: 9px solid #fff7e3; border-radius: 50%; background: #45aabe; box-shadow: inset 0 0 0 10px #62c2cc, 0 7px 0 #a69f8a; transform: translate(-50%, -58%); }
.yt-town-plaza-mark { position: absolute; left: 50%; top: 48%; color: #fff; font: 1000 1.65rem/1 Arial, sans-serif; transform: translate(-50%, -50%); }
.yt-town-plaza small { position: absolute; left: 0; right: 0; bottom: 24px; color: #917d5e; font-size: .64rem; font-weight: 1000; letter-spacing: .2em; text-align: center; }

.yt-town-zone-marker { position: absolute; z-index: 6; width: 180px; height: 42px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .24); border-radius: 4px; color: rgba(16, 47, 53, .55); background: rgba(255, 255, 255, .1); transform: rotate(-3deg); pointer-events: none; }
.yt-town-zone-marker::before { content: ""; position: absolute; left: -20px; top: 50%; width: 220px; border-top: 1px solid currentColor; opacity: .35; }
.yt-town-zone-marker span { position: absolute; left: 50%; top: 50%; padding: 2px 7px; background: #82bf8f; font-size: .48rem; font-weight: 1000; letter-spacing: .16em; white-space: nowrap; transform: translate(-50%, -50%); }
.yt-town-zone-marker-repair { left: 165px; top: 345px; }
.yt-town-zone-marker-design { left: 660px; top: 344px; transform: rotate(2deg); }
.yt-town-zone-marker-port { left: 1070px; top: 350px; color: rgba(255, 255, 255, .48); }

.yt-building {
  position: absolute;
  z-index: 12;
  width: 320px;
  height: 250px;
  padding: 0;
  border: 0;
  color: var(--yt-ink);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  filter: drop-shadow(0 17px 10px rgba(35, 62, 48, .18));
  transition: filter .18s ease, transform .18s ease;
}
.yt-building-repair { left: 110px; top: 85px; --yt-building-main: #db684f; --yt-building-dark: #8f3931; --yt-building-wall: #f3dfb6; --yt-building-metal: #526166; }
.yt-building-design { left: 590px; top: 70px; --yt-building-main: #268798; --yt-building-dark: #124e5d; --yt-building-wall: #d2e8e4; --yt-building-metal: #355d65; }
.yt-building-global { left: 1035px; top: 100px; width: 280px; --yt-building-main: #595c9c; --yt-building-dark: #33366b; --yt-building-wall: #dedcf0; --yt-building-metal: #4d5265; }
.yt-building:hover,
.yt-building.is-destination,
.yt-building.is-near { filter: drop-shadow(0 18px 12px rgba(35, 62, 48, .26)) drop-shadow(0 0 13px rgba(255, 200, 87, .82)); }
.yt-building:hover { transform: translateY(-3px); }
.yt-building-shadow { position: absolute; left: 24px; right: 12px; bottom: 3px; height: 40px; border-radius: 50%; background: rgba(20, 45, 41, .26); transform: skewX(-25deg); filter: blur(3px); }
.yt-building-roof { position: absolute; z-index: 3; left: 3px; top: 0; width: 300px; height: 98px; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--yt-building-main), #fff 12%), var(--yt-building-main)); box-shadow: inset -16px -13px 0 rgba(40, 28, 25, .13); }
.yt-building-repair .yt-building-roof { clip-path: polygon(0 53%, 17% 13%, 34% 53%, 51% 13%, 68% 53%, 85% 13%, 100% 53%, 94% 100%, 6% 100%); }
.yt-building-design .yt-building-roof { height: 91px; clip-path: polygon(5% 28%, 71% 0, 100% 30%, 92% 100%, 4% 100%, 0 51%); background: linear-gradient(145deg, #55adba 0 42%, #237889 43% 72%, #145563); }
.yt-building-global .yt-building-roof { width: 268px; height: 90px; clip-path: polygon(5% 31%, 76% 5%, 100% 29%, 93% 100%, 5% 100%, 0 48%); background: linear-gradient(160deg, #7375af, #4f528d 66%, #363967); }
.yt-building-roof::after { content: ""; position: absolute; left: 20px; right: 17px; bottom: 8px; height: 12px; border-top: 2px solid rgba(255, 255, 255, .32); background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(28, 36, 40, .12)); }
.yt-roof-exhaust { position: absolute; z-index: 2; left: 135px; top: 30px; width: 14px; height: 35px; border-radius: 4px 4px 1px 1px; background: linear-gradient(90deg, #39484c, #778589 48%, #344348); box-shadow: 4px 5px 4px rgba(20, 30, 32, .2); }
.yt-roof-exhaust::before { content: ""; position: absolute; left: -3px; top: -4px; width: 20px; height: 6px; border-radius: 50%; background: #26373b; box-shadow: inset 0 2px #78878a; }
.yt-roof-vent { position: absolute; z-index: 2; left: 169px; top: 43px; width: 32px; height: 18px; border: 3px solid #405258; border-radius: 4px; background: repeating-linear-gradient(0deg, #9eaaac 0 2px, #59696d 2px 4px); box-shadow: 4px 5px 4px rgba(20, 30, 32, .18); }
.yt-roof-rail { position: absolute; z-index: 2; left: 208px; top: 44px; width: 49px; height: 18px; border: 2px solid rgba(234, 245, 241, .7); border-top: 0; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(234, 245, 241, .7) 10px 12px); }
.yt-building-design .yt-roof-exhaust { left: 42px; top: 43px; height: 22px; }.yt-building-design .yt-roof-vent { left: 76px; top: 43px; }.yt-building-design .yt-roof-rail { left: 202px; top: 37px; }
.yt-building-global .yt-roof-exhaust { left: 169px; top: 36px; height: 25px; }.yt-building-global .yt-roof-vent { left: 203px; top: 38px; width: 27px; }.yt-building-global .yt-roof-rail { left: 35px; top: 40px; width: 65px; }
.yt-building-wall { position: absolute; z-index: 2; left: 27px; top: 78px; width: 254px; height: 153px; overflow: visible; border: 5px solid #fff8e8; border-radius: 3px 3px 8px 8px; background: var(--yt-building-wall); box-shadow: inset 0 -18px 0 rgba(78, 66, 49, .09), inset -9px 0 rgba(33, 48, 49, .04); }
.yt-building-design .yt-building-wall { top: 70px; height: 161px; }
.yt-building-global .yt-building-wall { top: 77px; width: 225px; height: 154px; }
.yt-building-wall::after { content: ""; position: absolute; z-index: -1; right: -22px; top: 5px; width: 22px; height: calc(100% - 5px); background: color-mix(in srgb, var(--yt-building-wall), #55585b 18%); clip-path: polygon(0 0, 100% 11%, 100% 100%, 0 100%); }
.yt-building-facade { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: 1px 1px 5px 5px; pointer-events: none; }
.yt-building-facade::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(69, 65, 52, .09) 31px 33px), repeating-linear-gradient(0deg, transparent 0 21px, rgba(255, 255, 255, .24) 21px 22px); }
.yt-building-facade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; border-top: 3px solid #8c8676; background: repeating-linear-gradient(90deg, #b7ae99 0 23px, #9e9583 23px 25px); }
.yt-building-sign { position: absolute; z-index: 3; left: 14px; right: 14px; top: 11px; display: block; padding: 7px 9px 6px; border-left: 4px solid var(--yt-building-main); border-bottom: 1px solid rgba(27, 56, 59, .2); border-radius: 2px; background: rgba(255, 253, 239, .68); box-shadow: 0 3px 8px rgba(24, 43, 42, .08); text-align: left; }
.yt-building-sign small,
.yt-building-sign strong { display: block; }
.yt-building-sign small { color: var(--yt-building-dark); font-size: .49rem; font-weight: 1000; letter-spacing: .14em; }
.yt-building-sign strong { margin-top: 1px; font-size: 1rem; font-weight: 1000; letter-spacing: .01em; }
.yt-building-window { position: absolute; z-index: 2; left: 13px; bottom: 20px; display: flex; gap: 5px; }
.yt-building-window i { position: relative; width: 34px; height: 38px; overflow: hidden; border: 3px solid #f9f5e7; border-radius: 2px; background: linear-gradient(145deg, #9bd5df, #4e9fb0); box-shadow: inset 8px 0 0 rgba(255, 255, 255, .18), 0 2px 3px rgba(27, 52, 51, .13); }
.yt-building-window i::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(233, 248, 243, .62); box-shadow: 0 18px 0 -1px rgba(233, 248, 243, .62); transform: translateX(-50%); }
.yt-building-window i::after { content: ""; position: absolute; left: 10px; bottom: -4px; width: 9px; height: 18px; border-radius: 7px 7px 2px 2px; background: rgba(10, 49, 58, .42); opacity: .22; transform: translateY(9px); transition: opacity .8s ease, transform .8s ease; }
.yt-town-app[data-city-activity="busy"] .yt-building-window i:nth-child(odd)::after,
.yt-town-app[data-city-activity="evening"] .yt-building-window i:nth-child(even)::after { opacity: .72; transform: translateY(0); animation: yt-window-worker 7s ease-in-out infinite alternate; }
@keyframes yt-window-worker { 46% { transform: translate(0, 0); } 54%, 100% { transform: translate(7px, 1px); } }
.yt-building-bay { position: absolute; z-index: 2; left: 128px; bottom: 10px; width: 50px; height: 49px; border: 4px solid var(--yt-building-metal); border-bottom: 0; border-radius: 3px 3px 0 0; background: repeating-linear-gradient(0deg, #aeb7b7 0 6px, #758487 6px 8px); box-shadow: inset 6px 0 rgba(255, 255, 255, .16); }
.yt-building-bay i { position: absolute; left: 7px; bottom: 7px; width: 24px; height: 11px; border-radius: 2px; background: #324b52; box-shadow: inset 6px 0 #b5dadd; }
.yt-building-door { position: absolute; z-index: 4; right: 15px; bottom: 0; width: 45px; height: 66px; border: 5px solid var(--yt-building-dark); border-bottom: 0; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--yt-building-main), #292f31 24%); box-shadow: inset 8px 0 rgba(255, 255, 255, .04), inset -7px 0 rgba(29, 31, 31, .1); transform-origin: 0 50%; transition: transform .42s cubic-bezier(.2, .8, .2, 1), filter .42s ease; }
.yt-building-door::before { content: ""; position: absolute; left: 5px; top: 7px; width: 24px; height: 21px; border: 2px solid rgba(255, 255, 255, .55); background: linear-gradient(145deg, rgba(255, 255, 255, .56), transparent 42%), #6fa6b0; }
.yt-building-door::after { content: ""; position: absolute; left: 5px; bottom: -8px; width: 51px; height: 8px; border-radius: 2px; background: #a69d87; box-shadow: 0 6px 0 #d5c9aa; }
.yt-building-canopy { position: absolute; z-index: 5; right: 5px; bottom: 66px; width: 70px; height: 9px; border-bottom: 3px solid var(--yt-building-dark); background: linear-gradient(90deg, var(--yt-building-main), color-mix(in srgb, var(--yt-building-main), #fff 24%)); box-shadow: 5px 5px 5px rgba(26, 42, 42, .17); transform: skewX(-17deg); }
.yt-building-utility { position: absolute; z-index: 4; left: 21px; top: 142px; width: 13px; height: 68px; border: 3px solid #4e5d60; border-radius: 6px 6px 2px 2px; background: linear-gradient(90deg, #879293, #4c5a5d); box-shadow: 4px 5px 4px rgba(23, 44, 42, .15); }
.yt-building-utility::before { content: ""; position: absolute; left: 2px; top: 5px; width: 3px; height: 43px; border-radius: 3px; background: #293b40; box-shadow: 5px 0 #b1793b; }
.yt-building-utility i { position: absolute; left: -6px; bottom: -8px; width: 21px; height: 13px; border: 3px solid #536164; border-radius: 3px; background: repeating-linear-gradient(0deg, #9ba5a5 0 2px, #59676a 2px 4px); }
.yt-building-utility b { position: absolute; left: 3px; top: -13px; width: 7px; height: 15px; border: 3px solid #4e5d60; border-bottom: 0; border-radius: 8px 8px 0 0; }
.yt-building-design .yt-building-facade::before { background: repeating-linear-gradient(90deg, rgba(238, 255, 252, .2) 0 1px, transparent 1px 38px), linear-gradient(115deg, rgba(255, 255, 255, .37), transparent 48%), linear-gradient(90deg, rgba(45, 124, 138, .12), transparent); }
.yt-building-design .yt-building-window { left: 13px; right: 75px; gap: 2px; }.yt-building-design .yt-building-window i { flex: 1; width: auto; height: 55px; border-width: 2px; border-color: #bdd4d4; border-radius: 0; background: linear-gradient(148deg, rgba(255, 255, 255, .72) 0 14%, transparent 15% 42%, rgba(255, 255, 255, .18) 43% 47%, transparent 48%), linear-gradient(145deg, #77bdc7, #225d6b); }
.yt-building-design .yt-building-bay { left: auto; right: 65px; bottom: 10px; width: 9px; height: 60px; border: 0; background: #387683; box-shadow: 6px 0 #d6eeee; }.yt-building-design .yt-building-bay i { display: none; }
.yt-building-design .yt-building-canopy { right: 3px; width: 78px; background: linear-gradient(90deg, #4fd4c5, #b2fff3); }
.yt-building-design .yt-building-utility { left: 13px; top: 74px; width: 33px; height: 10px; border-width: 2px; border-radius: 2px; background: #355d65; }.yt-building-design .yt-building-utility::before { left: 5px; top: 2px; width: 19px; height: 2px; background: #84d7d2; box-shadow: none; }.yt-building-design .yt-building-utility i,.yt-building-design .yt-building-utility b { display: none; }
.yt-building-global .yt-building-sign { right: 10px; }.yt-building-global .yt-building-window { left: 10px; bottom: 69px; gap: 4px; }.yt-building-global .yt-building-window i { width: 31px; height: 27px; border-width: 2px; }
.yt-building-global .yt-building-bay { left: 10px; bottom: 10px; width: 99px; height: 51px; background: repeating-linear-gradient(0deg, #8c98a3 0 7px, #5a6875 7px 9px); }.yt-building-global .yt-building-bay i { left: 35px; bottom: 8px; width: 28px; }
.yt-building-global .yt-building-door { right: 14px; width: 42px; height: 61px; }.yt-building-global .yt-building-canopy { right: 4px; bottom: 61px; width: 69px; }
.yt-building-global .yt-building-utility { left: 228px; top: 142px; height: 62px; }
.yt-building.is-near .yt-building-door { filter: brightness(1.18) drop-shadow(-7px 2px 4px rgba(5, 25, 30, .25)); transform: perspective(95px) rotateY(-58deg); }
.yt-building-pin { position: absolute; z-index: 7; left: 50%; bottom: -50px; display: grid; width: 38px; height: 38px; place-items: center; border: 4px solid #fff; border-radius: 50% 50% 50% 5px; color: var(--yt-ink-deep); background: var(--yt-amber); box-shadow: 0 8px 15px rgba(22, 48, 43, .22); font-weight: 1000; opacity: 0; transform: translateX(-50%) rotate(-45deg) scale(.7); transition: opacity .18s ease, transform .18s ease; }
.yt-building-pin::after { content: ""; position: absolute; inset: 0; }
.yt-building-pin { line-height: 1; }
.yt-building-pin { text-indent: 0; }
.yt-building.is-destination .yt-building-pin,
.yt-building.is-near .yt-building-pin { opacity: 1; transform: translateX(-50%) rotate(-45deg) scale(1); }
.yt-building.is-destination .yt-building-pin { animation: yt-pin-pulse 1s ease-in-out infinite alternate; }
.yt-building-status { position: absolute; z-index: 8; right: 12px; top: 76px; padding: 5px 9px; border: 3px solid #fff; border-radius: 99px; color: #fff; background: rgba(16, 47, 53, .9); font-size: .59rem; font-weight: 1000; box-shadow: 0 5px 9px rgba(28, 44, 39, .16); }
.yt-building.is-visited .yt-building-status { color: var(--yt-ink-deep); background: var(--yt-mint); }
.yt-building.is-visited .yt-building-status::before { content: "✓ "; }
.yt-building-crane { position: absolute; z-index: 1; right: -30px; top: 23px; width: 13px; height: 168px; background: #e8aa38; box-shadow: 6px 7px 0 rgba(55, 58, 49, .13); }
.yt-building-crane::before { content: ""; position: absolute; right: 0; top: 0; width: 122px; height: 13px; background: repeating-linear-gradient(90deg, #e8aa38 0 14px, #bf7928 14px 18px); }
.yt-building-crane::after { content: ""; position: absolute; left: -13px; bottom: -1px; width: 40px; height: 12px; background: #765333; }
.yt-building-crane i { position: absolute; left: -74px; top: 9px; width: 3px; height: 65px; background: #4e514d; }
.yt-building-crane i::after { content: ""; position: absolute; left: -8px; bottom: -12px; width: 18px; height: 13px; border: 4px solid #4e514d; border-top: 0; border-radius: 0 0 10px 10px; }
@keyframes yt-pin-pulse { to { margin-bottom: 7px; } }

.yt-town-route-line { position: absolute; z-index: 10; height: 5px; border-radius: 99px; background: repeating-linear-gradient(90deg, var(--yt-amber) 0 15px, transparent 15px 25px); filter: drop-shadow(0 2px 1px rgba(63, 44, 14, .35)); transform-origin: 0 50%; pointer-events: none; animation: yt-route-flow .55s linear infinite; }
@keyframes yt-route-flow { to { background-position: 25px 0; } }

.yt-town-streetlight { position: absolute; z-index: 11; width: 9px; height: 73px; border-radius: 5px; background: #304b4c; box-shadow: 7px 11px 7px rgba(29, 51, 43, .19); pointer-events: none; }
.yt-town-streetlight::before { content: ""; position: absolute; left: -13px; top: -7px; width: 35px; height: 12px; border-radius: 8px 8px 4px 4px; background: #263e40; }
.yt-town-streetlight i { position: absolute; left: -7px; top: -4px; width: 23px; height: 14px; border-radius: 50%; background: #fff0a4; box-shadow: 0 0 18px 7px rgba(255, 224, 105, .37); }
.yt-town-streetlight-1 { left: 480px; top: 305px; }.yt-town-streetlight-2 { left: 930px; top: 305px; }.yt-town-streetlight-3 { left: 1050px; top: 615px; }.yt-town-streetlight-4 { left: 430px; top: 630px; }
.yt-town-tree { position: absolute; z-index: 9; width: 50px; height: 67px; border-radius: 52% 48% 45% 55%; background: #25835a; box-shadow: inset -13px -8px 0 #176441, 14px 15px 9px rgba(30, 72, 48, .19); pointer-events: none; }
.yt-town-tree::before { content: ""; position: absolute; left: 16px; top: 9px; width: 21px; height: 19px; border-radius: 50%; background: rgba(106, 197, 110, .45); }
.yt-town-tree::after { content: ""; position: absolute; left: 21px; bottom: -18px; width: 11px; height: 25px; background: #775438; }
.yt-town-tree-1 { left: 38px; top: 82px; }.yt-town-tree-2 { left: 465px; top: 105px; }.yt-town-tree-3 { left: 940px; top: 102px; }.yt-town-tree-4 { left: 225px; top: 655px; }.yt-town-tree-5 { left: 1025px; top: 785px; }.yt-town-tree-6 { left: 1120px; top: 655px; }
.yt-town-bench { position: absolute; z-index: 10; width: 68px; height: 19px; border: 5px solid #76543a; border-left: 0; border-right: 0; background: repeating-linear-gradient(0deg, #c88b4c 0 4px, #9b6838 4px 7px); box-shadow: 8px 8px 5px rgba(31, 58, 46, .18); }
.yt-town-bench::before, .yt-town-bench::after { content: ""; position: absolute; bottom: -13px; width: 6px; height: 12px; background: #5d4837; }
.yt-town-bench::before { left: 6px; }.yt-town-bench::after { right: 6px; }
.yt-town-bench-1 { left: 430px; top: 760px; transform: rotate(-11deg); }.yt-town-bench-2 { left: 1000px; top: 690px; transform: rotate(12deg); }

.yt-town-vehicle {
  --yt-vehicle-paint: #d85f49;
  --yt-vehicle-paint-dark: #8e3833;
  position: absolute;
  z-index: 14;
  left: 0;
  width: 116px;
  height: 51px;
  pointer-events: none;
  transform: translate3d(var(--yt-vehicle-x, 0), 0, 0) scaleX(var(--yt-vehicle-direction, 1));
  transform-origin: 50% 100%;
  will-change: transform;
}
.yt-vehicle-ground-shadow { position: absolute; z-index: 0; left: 4px; right: -7px; bottom: -6px; height: 14px; border-radius: 50%; background: rgba(10, 30, 32, .34); filter: blur(3px); transform: translate(var(--yt-contact-shadow-x), var(--yt-contact-shadow-y)) skewX(-18deg) scaleX(var(--yt-shadow-stretch)); transform-origin: 0 50%; transition: transform .8s ease, opacity .8s ease; }
.yt-vehicle-chassis { position: absolute; z-index: 2; left: 8px; right: 5px; bottom: 7px; height: 9px; border-radius: 4px; background: linear-gradient(180deg, #647176, #202f33 62%); box-shadow: inset 0 2px rgba(255, 255, 255, .2); }
.yt-vehicle-body { position: absolute; z-index: 3; inset: 0 0 8px; filter: drop-shadow(3px 4px 2px rgba(12, 31, 32, .2)); transform-origin: 50% 100%; }
.yt-vehicle-cargo,.yt-vehicle-cab { position: absolute; overflow: hidden; box-shadow: inset 0 2px rgba(255, 255, 255, .23), inset 0 -5px rgba(50, 28, 25, .13); }
.yt-vehicle-cargo { left: 1px; top: 1px; width: 72px; height: 34px; border: 2px solid rgba(255, 242, 225, .56); border-radius: 5px 3px 2px 4px; background: linear-gradient(145deg, rgba(255, 255, 255, .18), transparent 31%), linear-gradient(90deg, var(--yt-vehicle-paint), var(--yt-vehicle-paint-dark)); }
.yt-vehicle-cargo::before { content: ""; position: absolute; inset: 5px 6px 9px; border: 1px solid rgba(255, 255, 255, .34); background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(54, 38, 34, .1) 16px 17px); }
.yt-vehicle-cargo::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 5px; height: 2px; background: rgba(255, 237, 218, .48); }
.yt-vehicle-cab { right: 2px; top: 7px; width: 43px; height: 30px; border-radius: 4px 13px 4px 3px; background: linear-gradient(145deg, color-mix(in srgb, var(--yt-vehicle-paint), #fff 10%), var(--yt-vehicle-paint-dark)); clip-path: polygon(0 0, 70% 0, 100% 39%, 100% 100%, 0 100%); }
.yt-vehicle-windscreen { position: absolute; z-index: 2; right: 5px; top: 4px; width: 22px; height: 13px; overflow: hidden; border: 2px solid rgba(26, 55, 60, .7); border-radius: 2px 7px 2px 2px; background: linear-gradient(145deg, rgba(255, 255, 255, .7) 0 23%, transparent 25%), linear-gradient(135deg, #9fd4db, #345f69); box-shadow: inset -4px -2px rgba(11, 43, 49, .18); }
.yt-vehicle-driver { position: absolute; left: 4px; bottom: -2px; width: 7px; height: 10px; border-radius: 50% 50% 3px 3px; background: linear-gradient(#c98f6d 0 45%, #244d58 46%); box-shadow: 7px 2px 0 -2px rgba(14, 44, 49, .55); }
.yt-vehicle-belt { position: absolute; z-index: 4; left: 3px; right: 2px; bottom: 7px; height: 6px; border-top: 2px solid rgba(255, 255, 255, .34); background: color-mix(in srgb, var(--yt-vehicle-paint-dark), #152d32 25%); }
.yt-vehicle-body > em { position: absolute; z-index: 5; left: 9px; bottom: 14px; color: rgba(255, 255, 255, .86); font: 1000 5px/1 Arial, sans-serif; font-style: normal; letter-spacing: .1em; text-shadow: 0 1px rgba(20, 38, 39, .34); transform: scaleX(var(--yt-vehicle-direction, 1)); }
.yt-vehicle-lights { position: absolute; z-index: 7; inset: 0; }
.yt-vehicle-taillamp,.yt-vehicle-headlamp { position: absolute; top: 24px; width: 6px; height: 7px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 3px; }
.yt-vehicle-taillamp { left: 0; background: #e64e43; box-shadow: 0 0 5px rgba(238, 73, 62, .36); transition: box-shadow .16s ease, filter .16s ease; }
.yt-vehicle-headlamp { right: -1px; background: #fff4b7; box-shadow: 7px 0 18px 7px rgba(255, 228, 151, .45); opacity: var(--yt-headlight-opacity); transition: opacity .8s ease; }
.yt-vehicle-wheel { position: absolute; z-index: 8; bottom: -1px; width: 20px; height: 20px; border: 4px solid #1d2b2f; border-radius: 50%; background: radial-gradient(circle, #d4dcda 0 15%, #687579 17% 35%, #1c292d 37% 100%); box-shadow: inset 0 0 0 2px #586468, 1px 2px 2px rgba(8, 25, 27, .32); }
.yt-vehicle-wheel > i { position: absolute; inset: 4px; border: 1px dashed rgba(235, 242, 238, .74); border-radius: 50%; }
.yt-vehicle-wheel-rear { left: 15px; }.yt-vehicle-wheel-front { right: 13px; }
.yt-town-truck { top: 450px; }
.yt-town-van { --yt-vehicle-direction: -1; --yt-vehicle-paint: #e0ad3f; --yt-vehicle-paint-dark: #a46a25; top: 515px; width: 108px; }
.yt-town-van .yt-vehicle-body { top: 3px; overflow: hidden; border: 2px solid rgba(255, 244, 197, .62); border-radius: 10px 20px 5px 6px; background: linear-gradient(145deg, rgba(255, 255, 255, .26), transparent 28%), linear-gradient(90deg, #e2b348, #bd7f2c); clip-path: polygon(0 12%, 63% 0, 87% 11%, 100% 42%, 100% 100%, 0 100%); }
.yt-town-van .yt-vehicle-cargo { left: 7px; top: 10px; width: 54px; height: 22px; border-color: rgba(114, 75, 29, .37); background: rgba(255, 249, 213, .12); box-shadow: none; }.yt-town-van .yt-vehicle-cargo::before { inset: 4px; border-color: rgba(91, 61, 28, .24); }.yt-town-van .yt-vehicle-cargo::after { display: none; }
.yt-town-van .yt-vehicle-cab { right: 4px; top: 8px; width: 39px; height: 28px; background: transparent; box-shadow: none; }.yt-town-van .yt-vehicle-windscreen { right: 3px; width: 25px; height: 14px; }
.yt-town-van .yt-vehicle-belt { left: 0; right: 0; bottom: 4px; }.yt-town-van .yt-vehicle-body > em { left: 12px; bottom: 10px; color: #523514; font-size: 4.6px; text-shadow: 0 1px rgba(255, 255, 255, .34); }
.yt-town-van .yt-vehicle-lights { inset: 0; }.yt-town-van .yt-vehicle-taillamp { left: -1px; }.yt-town-van .yt-vehicle-headlamp { right: -1px; }.yt-town-van .yt-vehicle-wheel-rear { left: 13px; }.yt-town-van .yt-vehicle-wheel-front { right: 12px; }
.yt-town-shuttle { --yt-vehicle-paint: #1b8e8a; --yt-vehicle-paint-dark: #125661; top: 572px; width: 132px; height: 47px; }
.yt-town-shuttle .yt-vehicle-body { overflow: hidden; border: 2px solid rgba(213, 255, 249, .72); border-radius: 19px 25px 7px 8px; background: linear-gradient(155deg, rgba(255, 255, 255, .19), transparent 27%), linear-gradient(90deg, #17656f, #27a299 72%, #155365); clip-path: polygon(2% 34%, 16% 7%, 77% 0, 94% 16%, 100% 39%, 100% 100%, 0 100%); box-shadow: 0 0 12px rgba(74, 233, 215, .23); }
.yt-town-shuttle .yt-vehicle-cargo { left: 16px; top: 6px; width: 78px; height: 17px; border: 2px solid rgba(196, 255, 248, .62); border-radius: 8px 2px 2px 4px; background: repeating-linear-gradient(90deg, #244e59 0 17px, #86d4d0 18px 20px); box-shadow: inset 9px 0 rgba(255, 255, 255, .13); }.yt-town-shuttle .yt-vehicle-cargo::before,.yt-town-shuttle .yt-vehicle-cargo::after { display: none; }
.yt-town-shuttle .yt-vehicle-cab { right: 5px; top: 7px; width: 34px; height: 27px; background: transparent; box-shadow: none; }.yt-town-shuttle .yt-vehicle-windscreen { right: 1px; width: 24px; height: 14px; }
.yt-town-shuttle .yt-vehicle-belt { bottom: 4px; background: #0d4854; }.yt-town-shuttle .yt-vehicle-body > em { left: 37px; bottom: 9px; color: #d2fff9; font-size: 5.2px; }.yt-town-shuttle .yt-vehicle-wheel { width: 18px; height: 18px; }.yt-town-shuttle .yt-vehicle-wheel-rear { left: 18px; }.yt-town-shuttle .yt-vehicle-wheel-front { right: 15px; }
.yt-town-vehicle[data-sim-state="moving"] .yt-vehicle-wheel { animation: yt-vehicle-wheel-spin .34s linear infinite; }
.yt-town-vehicle[data-sim-state="moving"] .yt-vehicle-body { animation: yt-vehicle-suspension .48s ease-in-out infinite alternate; }
.yt-town-vehicle[data-sim-state="waiting"] { filter: saturate(.9); }
.yt-town-vehicle[data-sim-state="waiting"] .yt-vehicle-taillamp { filter: brightness(1.3); box-shadow: 0 0 0 3px rgba(255, 72, 59, .18), 0 0 10px 3px rgba(255, 72, 59, .7); }
@keyframes yt-vehicle-wheel-spin { to { transform: rotate(1turn); } }
@keyframes yt-vehicle-suspension { to { transform: translateY(-1px) rotate(.15deg); } }

.yt-town-person {
  --yt-human-skin: #d79b74;
  --yt-human-skin-shadow: #b87354;
  --yt-human-hair: #24383d;
  --yt-human-shirt: #e66e55;
  --yt-human-shirt-dark: #a8443c;
  --yt-human-pants: #263f4b;
  --yt-human-shoes: #142d35;
  position: absolute;
  z-index: 18;
  width: 36px;
  height: 67px;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transform-origin: 50% 100%;
  will-change: transform;
}
.yt-human-shadow {
  position: absolute;
  z-index: 0;
  left: 3px;
  bottom: -2px;
  width: 34px;
  height: 10px;
  border-radius: 50%;
  background: rgba(10, 31, 33, .31);
  filter: blur(2px);
  transform: translate(var(--yt-contact-shadow-x), var(--yt-contact-shadow-y)) skewX(-18deg) scaleX(var(--yt-shadow-stretch));
  transform-origin: 0 50%;
}
.yt-human-figure { position: absolute; z-index: 1; inset: 0; transform-origin: 50% 100%; }
.yt-human-legs { position: absolute; z-index: 2; left: 8px; top: 45px; width: 21px; height: 21px; }
.yt-human-legs > i {
  position: absolute;
  top: 0;
  width: 8px;
  height: 18px;
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(90deg, var(--yt-human-pants), #182d35);
  box-shadow: inset 1px 0 rgba(255, 255, 255, .12);
  transform-origin: 50% 1px;
}
.yt-human-legs > i::after { content: ""; position: absolute; left: -1px; bottom: -1px; width: 10px; height: 5px; border-radius: 4px 6px 3px 3px; background: var(--yt-human-shoes); box-shadow: 1px 1px rgba(255, 255, 255, .12); }
.yt-human-legs > i:first-child { left: 1px; }.yt-human-legs > i:last-child { right: 1px; }
.yt-human-torso {
  position: absolute;
  z-index: 4;
  left: 6px;
  top: 22px;
  width: 25px;
  height: 29px;
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(108deg, rgba(255, 255, 255, .2), transparent 28%), linear-gradient(90deg, var(--yt-human-shirt), var(--yt-human-shirt-dark));
  box-shadow: inset 1px 1px rgba(255, 255, 255, .26), inset -2px -2px rgba(10, 35, 40, .13);
}
.yt-human-torso > i { position: absolute; left: 50%; top: 3px; width: 8px; height: 9px; border-right: 2px solid rgba(255, 255, 255, .58); border-bottom: 2px solid rgba(255, 255, 255, .35); transform: translateX(-50%) rotate(45deg); }
.yt-human-torso::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 5px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .28); box-shadow: 0 3px rgba(10, 33, 37, .2); }
.yt-human-arm { position: absolute; z-index: 3; top: 25px; width: 8px; height: 26px; border-radius: 6px; background: linear-gradient(90deg, var(--yt-human-shirt), var(--yt-human-shirt-dark)); transform-origin: 50% 3px; }
.yt-human-arm > i { position: absolute; left: 1px; bottom: -3px; width: 7px; height: 8px; border-radius: 50% 50% 45% 45%; background: linear-gradient(120deg, var(--yt-human-skin), var(--yt-human-skin-shadow)); box-shadow: inset 1px 0 rgba(255, 255, 255, .24); }
.yt-human-arm-left { left: 3px; transform: rotate(5deg); }.yt-human-arm-right { right: 3px; transform: rotate(-5deg); }
.yt-human-neck { position: absolute; z-index: 3; left: 14px; top: 18px; width: 9px; height: 8px; border-radius: 3px; background: var(--yt-human-skin-shadow); }
.yt-human-head {
  position: absolute;
  z-index: 6;
  left: 9px;
  top: 1px;
  width: 19px;
  height: 22px;
  border-radius: 48% 48% 45% 45%;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .34), transparent 22%), linear-gradient(120deg, var(--yt-human-skin), var(--yt-human-skin-shadow));
  box-shadow: inset -2px -1px rgba(94, 48, 36, .12), 0 1px rgba(255, 255, 255, .3);
}
.yt-human-head > i { position: absolute; z-index: 2; left: -1px; right: -1px; top: -3px; height: 10px; border-radius: 12px 12px 5px 4px; background: var(--yt-human-hair); box-shadow: inset 2px 2px rgba(255, 255, 255, .1); }
.yt-human-head > b { position: absolute; z-index: 3; left: 4px; top: 10px; width: 2px; height: 2px; border-radius: 50%; background: #332c2a; box-shadow: 8px 0 #332c2a; }
.yt-human-head > b::after { content: ""; position: absolute; left: 4px; top: 3px; width: 3px; height: 2px; border-right: 1px solid rgba(98, 50, 38, .55); border-bottom: 1px solid rgba(98, 50, 38, .4); transform: rotate(25deg); }
.yt-human-head > em { position: absolute; left: 5px; bottom: 3px; width: 8px; height: 2px; border-bottom: 1px solid rgba(100, 48, 42, .55); border-radius: 50%; }
.yt-human-head::after { content: ""; position: absolute; right: -2px; top: 9px; width: 4px; height: 7px; border-radius: 50%; background: var(--yt-human-skin-shadow); }
.yt-human-gear { position: absolute; z-index: 8; }

.yt-town-person-repair { left: 368px; top: 310px; --yt-human-skin: #c98562; --yt-human-skin-shadow: #9c5f49; --yt-human-shirt: #e96e54; --yt-human-shirt-dark: #b13f3b; --yt-human-pants: #34464b; }
.yt-town-person-repair .yt-human-head::before { content: ""; position: absolute; z-index: 5; left: -3px; top: -5px; width: 25px; height: 9px; border-radius: 11px 11px 3px 3px; background: linear-gradient(#ffd56c, #eaa52e); box-shadow: 0 3px #b87021, inset 0 2px rgba(255, 255, 255, .45); }
.yt-town-person-repair .yt-human-head > i { top: 1px; height: 6px; }
.yt-town-person-repair .yt-human-gear { right: -5px; top: 39px; width: 14px; height: 11px; border: 2px solid #633d2b; border-radius: 3px; background: #e9a63c; box-shadow: inset 0 3px rgba(255, 255, 255, .25); }
.yt-town-person-repair .yt-human-gear::before { content: ""; position: absolute; left: 3px; top: -5px; width: 6px; height: 4px; border: 2px solid #633d2b; border-bottom: 0; border-radius: 3px 3px 0 0; }
.yt-town-person-repair .yt-human-arm-right { animation: yt-human-check-tool 3.8s ease-in-out infinite; }

.yt-town-person-design { left: 846px; top: 296px; --yt-human-skin: #e4ad88; --yt-human-skin-shadow: #bf7c60; --yt-human-hair: #523b35; --yt-human-shirt: #3696a6; --yt-human-shirt-dark: #176275; --yt-human-pants: #273d54; }
.yt-town-person-design .yt-human-head > i { left: -2px; right: 3px; height: 13px; border-radius: 11px 8px 8px 4px; }
.yt-town-person-design .yt-human-arm-left { transform: rotate(-22deg); }.yt-town-person-design .yt-human-arm-right { transform: rotate(22deg); }
.yt-town-person-design .yt-human-gear { left: 9px; top: 33px; width: 19px; height: 14px; border: 2px solid #67efe3; border-radius: 3px; background: linear-gradient(145deg, #103c4c, #1c6677); box-shadow: 0 0 7px rgba(80, 239, 225, .42); animation: yt-human-tablet-glow 2.2s ease-in-out infinite alternate; }
.yt-town-person-design .yt-human-gear::after { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 1px; background: #9ff9ef; box-shadow: 0 3px rgba(159, 249, 239, .55); }

.yt-town-person-port { left: 1208px; top: 328px; --yt-human-skin: #81543f; --yt-human-skin-shadow: #593a31; --yt-human-hair: #171f27; --yt-human-shirt: #6669b5; --yt-human-shirt-dark: #3e3d78; --yt-human-pants: #27354a; }
.yt-town-person-port .yt-human-head::before { content: ""; position: absolute; z-index: 5; left: -2px; top: -4px; width: 22px; height: 7px; border-radius: 8px 8px 2px 2px; background: #f0bc45; box-shadow: 0 2px #a96e22; }
.yt-town-person-port .yt-human-torso::before { content: ""; position: absolute; inset: 4px 3px 7px; border-left: 4px solid #d8ef66; border-right: 4px solid #d8ef66; opacity: .92; }
.yt-town-person-port .yt-human-arm-right { transform: rotate(-54deg); animation: yt-human-radio 4.6s ease-in-out infinite; }
.yt-town-person-port .yt-human-gear { right: 0; top: 24px; width: 6px; height: 12px; border: 1px solid #8ef3e4; border-radius: 2px; background: #152e3d; box-shadow: 0 0 5px rgba(96, 239, 223, .52); }
.yt-town-person-port .yt-human-gear::before { content: ""; position: absolute; left: 2px; top: -5px; width: 1px; height: 5px; background: #8ef3e4; transform: rotate(14deg); transform-origin: 100% 100%; }

.yt-town-person-walker { left: 540px; top: 500px; --yt-human-skin: #d99a6e; --yt-human-skin-shadow: #ad6d51; --yt-human-hair: #26353c; --yt-human-shirt: #efb440; --yt-human-shirt-dark: #bc752a; --yt-human-pants: #34515b; animation: yt-walk-town 22s linear infinite; }
.yt-town-person-walker .yt-human-figure { animation: yt-walker-turn 22s steps(1, end) infinite; }
.yt-town-person-walker .yt-human-legs > i:first-child { animation: yt-human-leg-walk .48s ease-in-out infinite alternate; }.yt-town-person-walker .yt-human-legs > i:last-child { animation: yt-human-leg-walk .48s ease-in-out infinite alternate-reverse; }
.yt-town-person-walker .yt-human-arm-left { animation: yt-human-arm-walk .48s ease-in-out infinite alternate; }.yt-town-person-walker .yt-human-arm-right { animation: yt-human-arm-walk .48s ease-in-out infinite alternate-reverse; }
.yt-town-person-walker .yt-human-gear { left: -3px; top: 31px; width: 12px; height: 18px; border-radius: 3px 3px 5px 5px; background: #3c6f73; box-shadow: inset 2px 0 rgba(255, 255, 255, .24); }
.yt-town-person-walker .yt-human-gear::before { content: ""; position: absolute; left: 3px; top: -7px; width: 7px; height: 10px; border: 2px solid #294b50; border-bottom: 0; border-radius: 6px 6px 0 0; }
@keyframes yt-human-check-tool { 0%, 68%, 100% { transform: rotate(-5deg); } 76%, 88% { transform: rotate(-48deg); } }
@keyframes yt-human-radio { 0%, 65%, 100% { transform: rotate(-8deg); } 72%, 87% { transform: rotate(-62deg); } }
@keyframes yt-human-tablet-glow { to { filter: brightness(1.3); box-shadow: 0 0 11px rgba(80, 239, 225, .7); } }
@keyframes yt-human-leg-walk { from { transform: rotate(12deg) translateY(-1px); } to { transform: rotate(-14deg) translateY(1px); } }
@keyframes yt-human-arm-walk { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
@keyframes yt-walk-town { 0%, 2% { transform: translateX(0); } 47%, 52% { transform: translateX(390px); } 97%, 100% { transform: translateX(0); } }
@keyframes yt-walker-turn { 0%, 49% { transform: scaleX(1); } 50%, 99% { transform: scaleX(-1); } }
.yt-town-app[data-nearby-location="repair"] .yt-town-person-repair .yt-human-figure,
.yt-town-app[data-nearby-location="design"] .yt-town-person-design .yt-human-figure,
.yt-town-app[data-nearby-location="global"] .yt-town-person-port .yt-human-figure { animation: yt-human-notice .7s ease-out both; }
.yt-town-app[data-nearby-location="repair"] .yt-town-person-repair .yt-human-arm-right { animation: yt-human-greet .42s ease-in-out 2 alternate; }
.yt-town-app[data-nearby-location="design"] .yt-town-person-design .yt-human-gear { animation: yt-human-present-tablet .7s ease-out both; }
.yt-town-app[data-nearby-location="global"] .yt-town-person-port .yt-human-arm-left { animation: yt-human-greet .42s ease-in-out 2 alternate; }
@keyframes yt-human-notice { 0% { transform: translateY(0) scale(1); } 42% { transform: translateY(-3px) scale(1.035); } 100% { transform: translateY(-1px) scale(1.015); } }
@keyframes yt-human-greet { from { transform: rotate(-8deg); } to { transform: rotate(-68deg); } }
@keyframes yt-human-present-tablet { from { transform: translateY(2px) rotate(-4deg); } to { transform: translateY(-2px) rotate(2deg); filter: brightness(1.3); } }

.yt-avatar { position: absolute; z-index: 30; left: 730px; top: 645px; width: 46px; height: 64px; pointer-events: none; will-change: left, top; }
.yt-avatar-shadow { position: absolute; z-index: 0; left: 2px; bottom: -1px; width: 42px; height: 12px; border-radius: 50%; background: rgba(20, 51, 44, .27); filter: blur(1px); }
.yt-avatar-figure { position: absolute; z-index: 1; inset: 0; transform-origin: 50% 82%; transition: transform .08s linear; }
.yt-avatar-legs { position: absolute; z-index: 2; left: 12px; top: 42px; width: 23px; height: 21px; }
.yt-avatar-legs > i { position: absolute; top: 0; width: 8px; height: 18px; border-radius: 3px 3px 5px 5px; background: linear-gradient(90deg, #334f5d, #1d3440); box-shadow: inset 1px 0 rgba(255, 255, 255, .13); transform-origin: 50% 1px; }
.yt-avatar-legs > i:first-child { left: 1px; }.yt-avatar-legs > i:last-child { right: 1px; }
.yt-avatar-legs > i > b { position: absolute; left: -1px; bottom: -1px; width: 10px; height: 5px; border-radius: 4px 6px 3px 3px; background: #0f2831; box-shadow: 0 1px rgba(255, 255, 255, .22); }
.yt-avatar-body { position: absolute; z-index: 4; left: 8px; top: 21px; width: 30px; height: 29px; border: 2px solid rgba(255, 255, 255, .88); border-radius: 9px 9px 6px 6px; background: linear-gradient(105deg, rgba(255, 255, 255, .23), transparent 28%), linear-gradient(90deg, var(--yt-coral), #c75347); box-shadow: inset -5px -3px rgba(86, 34, 35, .13), 0 3px rgba(35, 55, 47, .13); }
.yt-avatar-body > i { position: absolute; left: 50%; top: 3px; width: 10px; height: 8px; border-right: 2px solid var(--yt-cream); border-bottom: 2px solid var(--yt-cream); opacity: .78; transform: translateX(-50%) rotate(45deg); }
.yt-avatar-body > b { position: absolute; left: 50%; top: 13px; width: 2px; height: 12px; border-radius: 2px; background: rgba(255, 255, 255, .55); box-shadow: -7px 5px 0 -1px rgba(255, 255, 255, .42), 7px 5px 0 -1px rgba(255, 255, 255, .42); transform: translateX(-50%); }
.yt-avatar-arms { position: absolute; z-index: 3; left: 4px; top: 23px; width: 38px; height: 29px; }
.yt-avatar-arms > i { position: absolute; top: 0; width: 8px; height: 24px; border: 2px solid rgba(255, 255, 255, .72); border-radius: 6px; background: linear-gradient(90deg, var(--yt-coral), #c75347); transform-origin: 50% 3px; }
.yt-avatar-arms > i:first-child { left: 0; transform: rotate(6deg); }.yt-avatar-arms > i:last-child { right: 0; transform: rotate(-6deg); }
.yt-avatar-arms > i > b { position: absolute; left: 0; bottom: -4px; width: 6px; height: 7px; border-radius: 50%; background: linear-gradient(120deg, #dda47d, #b97558); box-shadow: inset 1px 0 rgba(255, 255, 255, .3); }
.yt-avatar-neck { position: absolute; z-index: 3; left: 18px; top: 17px; width: 10px; height: 8px; border-radius: 4px; background: #b9765a; }
.yt-avatar-head { position: absolute; z-index: 6; left: 13px; top: 0; width: 21px; height: 23px; border: 2px solid rgba(255, 255, 255, .92); border-radius: 48% 48% 45% 45%; background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, .32), transparent 23%), linear-gradient(120deg, #e1aa83, #bb775c); box-shadow: inset -2px -1px rgba(93, 46, 37, .12); }
.yt-avatar-head > i { position: absolute; z-index: 2; left: -2px; right: -2px; top: -4px; height: 11px; border-radius: 12px 12px 4px 5px; background: linear-gradient(110deg, #18323b, #0a222b); box-shadow: inset 2px 2px rgba(255, 255, 255, .1); }
.yt-avatar-head > b { position: absolute; z-index: 3; left: 4px; top: 10px; width: 2px; height: 2px; border-radius: 50%; background: #302b29; box-shadow: 8px 0 #302b29; transition: opacity .08s linear; }
.yt-avatar-head > b::after { content: ""; position: absolute; left: 4px; top: 4px; width: 5px; height: 2px; border-bottom: 1px solid rgba(102, 47, 43, .62); border-radius: 50%; }
.yt-avatar-head > em { position: absolute; right: -3px; top: 9px; width: 4px; height: 7px; border-radius: 50%; background: #ba765a; }
.yt-avatar.is-left .yt-avatar-figure { transform: scaleX(-1); }
.yt-avatar[data-heading="north"] .yt-avatar-head > b { opacity: 0; }
.yt-avatar[data-heading="north"] .yt-avatar-head > i { height: 15px; }
.yt-avatar.is-walking .yt-avatar-body { animation: yt-avatar-bob var(--yt-walk-duration, .24s) ease-in-out infinite alternate; }
.yt-avatar.is-walking .yt-avatar-legs > i:first-child { animation: yt-avatar-leg var(--yt-walk-duration, .24s) ease-in-out infinite alternate; }
.yt-avatar.is-walking .yt-avatar-legs > i:last-child { animation: yt-avatar-leg var(--yt-walk-duration, .24s) ease-in-out infinite alternate-reverse; }
.yt-avatar.is-walking .yt-avatar-arms > i:first-child { animation: yt-avatar-arm var(--yt-walk-duration, .24s) ease-in-out infinite alternate-reverse; }
.yt-avatar.is-walking .yt-avatar-arms > i:last-child { animation: yt-avatar-arm var(--yt-walk-duration, .24s) ease-in-out infinite alternate; }
@keyframes yt-avatar-bob { to { transform: translateY(-2px) rotate(.8deg); } }
@keyframes yt-avatar-leg { from { transform: rotate(14deg) translateY(-1px); } to { transform: rotate(-13deg) translateY(1px); } }
@keyframes yt-avatar-arm { from { transform: rotate(17deg); } to { transform: rotate(-17deg); } }
.yt-avatar-name { position: absolute; left: 50%; bottom: -18px; min-width: 38px; padding: 3px 7px; border: 2px solid rgba(255, 255, 255, .88); border-radius: 99px; color: #fff; background: rgba(8, 33, 38, .83); box-shadow: 0 4px 9px rgba(5, 29, 32, .2); font: 1000 .43rem/1 Arial, sans-serif; letter-spacing: .12em; text-align: center; transform: translateX(-50%); }
.yt-town-app[data-avatar-color="teal"] .yt-avatar-body,.yt-town-app[data-avatar-color="teal"] .yt-avatar-arms > i { background-color: #1ea99b; background-image: linear-gradient(90deg, #1ea99b, #11716e); }
.yt-town-app[data-avatar-color="amber"] .yt-avatar-body,.yt-town-app[data-avatar-color="amber"] .yt-avatar-arms > i { background-color: #efad35; background-image: linear-gradient(90deg, #efad35, #b66d22); }
.yt-town-app[data-avatar-color="violet"] .yt-avatar-body,.yt-town-app[data-avatar-color="violet"] .yt-avatar-arms > i { background-color: #7772cb; background-image: linear-gradient(90deg, #7772cb, #4c478d); }

.yt-town-emote { position: absolute; z-index: 38; display: grid; min-width: 48px; min-height: 42px; place-items: center; padding: 7px 10px; border: 3px solid #fff; border-radius: 15px 15px 15px 4px; color: var(--yt-ink-deep); background: var(--yt-amber); box-shadow: 0 10px 18px rgba(5, 29, 32, .25); font-size: .72rem; font-weight: 1000; opacity: 0; pointer-events: none; transform: translate(-50%, 8px) scale(.85); transition: opacity .18s ease, transform .18s ease; }
.yt-town-emote.is-showing { opacity: 1; transform: translate(-50%, 0) scale(1); }
.yt-town-emote::after { content: ""; position: absolute; left: 10px; bottom: -8px; width: 12px; height: 12px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; background: var(--yt-amber); transform: rotate(45deg); }

.yt-town-destination-dock {
  position: absolute;
  z-index: 62;
  left: 50%;
  top: 14px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 9px;
  width: min(720px, calc(100% - 32px));
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 20px;
  color: #fff;
  background: rgba(8, 33, 38, .91);
  box-shadow: 0 15px 38px rgba(5, 29, 32, .26);
  backdrop-filter: blur(13px);
  transform: translateX(-50%);
  pointer-events: none;
}
.yt-town-destination-heading { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 3px 5px; }
.yt-town-destination-heading > span { color: #88c4bf; font-size: .48rem; font-weight: 1000; letter-spacing: .16em; }
.yt-town-destination-heading > strong { margin-top: 1px; font-size: .82rem; font-weight: 1000; }
.yt-town-destination-heading > small { margin-top: 2px; color: var(--yt-amber); font-size: .56rem; font-weight: 900; }
.yt-town-destination-list { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.yt-town-destination-list button {
  --yt-destination-accent: var(--yt-coral);
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 7px 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 13px;
  color: #fff;
  background: rgba(255, 255, 255, .075);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.yt-town-destination-list button:nth-child(2) { --yt-destination-accent: #45b7c5; }
.yt-town-destination-list button:nth-child(3) { --yt-destination-accent: #8f91dc; }
.yt-town-destination-list button::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--yt-destination-accent); opacity: .8; }
.yt-town-destination-list button:hover { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .13); transform: translateY(-1px); }
.yt-town-destination-list button.is-recommended { border-color: var(--yt-amber); background: rgba(255, 200, 87, .14); box-shadow: inset 0 0 0 1px rgba(255, 200, 87, .22); }
.yt-town-destination-list button.is-recommended::after { content: "近い"; position: absolute; right: 5px; top: 4px; padding: 2px 5px; border-radius: 99px; color: var(--yt-ink-deep); background: var(--yt-amber); font-size: .43rem; font-weight: 1000; }
.yt-town-destination-list button.is-visited { color: #c7d7d5; background: rgba(255, 255, 255, .045); }
.yt-town-destination-number { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px 10px 10px 3px; color: var(--yt-ink-deep); background: var(--yt-destination-accent); font: 1000 .64rem/1 Arial, sans-serif; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .09); }
.yt-town-destination-list button > span:last-child { display: grid; min-width: 0; }
.yt-town-destination-list strong { overflow: hidden; padding-right: 20px; font-size: .72rem; font-weight: 1000; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-destination-list small { margin-top: 3px; color: #9fcac6; font-size: .52rem; font-weight: 900; }
.yt-town-destination-list .is-recommended small { color: #ffe4a5; }
.yt-town-destination-list .is-visited small { color: var(--yt-mint); }

.yt-town-route-guide {
  position: absolute;
  z-index: 62;
  left: 50%;
  top: 15px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 48px;
  gap: 9px;
  align-items: center;
  width: min(440px, calc(100% - 32px));
  min-height: 58px;
  padding: 7px 8px 7px 10px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 17px;
  color: #fff;
  background: rgba(8, 33, 38, .9);
  box-shadow: 0 13px 35px rgba(5, 29, 32, .24);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  transition: border-color .18s ease, background .18s ease;
}
.yt-town-route-arrow { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: var(--yt-ink-deep); background: var(--yt-amber); font-size: 1.4rem; font-weight: 1000; transition: transform .16s linear; }
.yt-town-route-copy { display: grid; min-width: 0; grid-template-columns: 1fr auto; gap: 0 8px; }
.yt-town-route-copy > small { grid-column: 1 / -1; color: #a5cfcb; font-size: .54rem; font-weight: 900; letter-spacing: .1em; }
.yt-town-route-guide strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-route-copy > span:not(.yt-town-route-progress) { color: var(--yt-amber); font-size: .68rem; font-weight: 900; white-space: nowrap; }
.yt-town-route-progress { grid-column: 1 / -1; display: block; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.yt-town-route-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--yt-amber), #fff1a1); transition: width .18s linear; }
.yt-town-route-guide button { display: grid; width: 46px; height: 40px; grid-template-rows: 18px auto; place-items: center; padding: 3px; border: 0; border-radius: 10px; color: #fff; background: rgba(255, 255, 255, .1); cursor: pointer; }
.yt-town-route-guide button > span { font-size: 1rem; line-height: 1; }
.yt-town-route-guide button > small { color: #c5dbd9; font-size: .45rem; font-weight: 900; letter-spacing: 0; }
.yt-town-route-guide.is-arrived { border-color: rgba(189, 235, 215, .95); background: rgba(8, 68, 62, .94); }
.yt-town-route-guide.is-arrived .yt-town-route-arrow { color: #07584f; background: var(--yt-mint); }
.yt-town-route-guide.is-arrived .yt-town-route-copy > span:not(.yt-town-route-progress) { color: #dcfff1; }
.yt-town-route-guide.is-arrived .yt-town-route-progress i { background: var(--yt-mint); }

.yt-town-joystick {
  position: absolute;
  z-index: 64;
  left: calc(var(--yt-safe-left) + clamp(15px, 3vw, 34px));
  bottom: calc(var(--yt-safe-bottom) + clamp(15px, 3vw, 32px));
  display: grid;
  width: clamp(122px, 18vw, 146px);
  height: clamp(122px, 18vw, 146px);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  cursor: grab;
  touch-action: none;
}
.yt-town-joystick:active,
.yt-town-joystick.is-active { cursor: grabbing; }
.yt-town-joystick-ring { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .67); border-radius: 50%; background: radial-gradient(circle, rgba(8, 33, 38, .48) 0 23%, rgba(8, 33, 38, .72) 24% 100%); box-shadow: inset 0 0 0 9px rgba(255, 255, 255, .055), 0 13px 32px rgba(5, 29, 32, .3); backdrop-filter: blur(7px); }
.yt-town-joystick-ring::before, .yt-town-joystick-ring::after { content: ""; position: absolute; left: 50%; top: 13px; width: 2px; height: 13px; border-radius: 2px; background: rgba(255, 255, 255, .52); box-shadow: 0 94px rgba(255, 255, 255, .52); transform: translateX(-50%); }
.yt-town-joystick-ring::after { left: 13px; top: 50%; width: 13px; height: 2px; box-shadow: 94px 0 rgba(255, 255, 255, .52); transform: translateY(-50%); }
.yt-town-joystick-ring > i { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .28); border-radius: 50%; transform: translate(-50%, -50%); }
.yt-town-joystick-ring > b { position: absolute; z-index: 2; left: 50%; top: 50%; width: clamp(52px, 7.2vw, 60px); height: clamp(52px, 7.2vw, 60px); border: 3px solid rgba(255, 255, 255, .9); border-radius: 50%; background: linear-gradient(145deg, #1d9b8c, #0b645f); box-shadow: inset -6px -7px 0 rgba(0, 0, 0, .13), 0 9px 19px rgba(0, 0, 0, .28); transform: translate(-50%, -50%); will-change: transform; }
.yt-town-joystick > small { position: absolute; bottom: -1px; color: rgba(255, 255, 255, .72); font-size: .51rem; font-weight: 1000; letter-spacing: .16em; pointer-events: none; }

.yt-town-talk {
  position: absolute;
  z-index: 64;
  right: calc(var(--yt-safe-right) + clamp(15px, 3vw, 34px));
  bottom: calc(var(--yt-safe-bottom) + clamp(18px, 3vw, 35px));
  display: grid;
  width: clamp(104px, 15vw, 124px);
  height: clamp(104px, 15vw, 124px);
  grid-template-rows: 34px auto auto;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 9px;
  border: 3px solid #fff;
  border-radius: 50%;
  color: var(--yt-ink-deep);
  background: var(--yt-amber);
  box-shadow: inset -8px -10px 0 rgba(144, 91, 17, .15), 0 15px 32px rgba(5, 29, 32, .29);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.yt-town-talk:not(:disabled):active { transform: scale(.95); }
.yt-town-talk:disabled { border-color: rgba(255, 255, 255, .62); color: rgba(255, 255, 255, .73); background: rgba(8, 33, 38, .68); box-shadow: 0 11px 25px rgba(5, 29, 32, .2); cursor: not-allowed; opacity: .82; }
.yt-town-talk.is-ready { animation: yt-talk-ready 1s ease-in-out infinite alternate; }
.yt-town-talk.is-ready::after { content: ""; position: absolute; inset: -9px; border: 3px solid rgba(255, 200, 87, .7); border-radius: 50%; pointer-events: none; }
@keyframes yt-talk-ready { to { filter: drop-shadow(0 0 14px rgba(255, 224, 105, .82)); } }
.yt-town-talk-icon { position: relative; display: block; width: 36px; height: 27px; border: 3px solid currentColor; border-radius: 12px; }
.yt-town-talk-icon::after { content: ""; position: absolute; left: 4px; bottom: -7px; width: 9px; height: 9px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: skewY(-35deg); }
.yt-town-talk-icon i { position: absolute; left: 8px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 8px 0 currentColor, 16px 0 currentColor; }
.yt-town-talk strong { font-size: 1rem; font-weight: 1000; }
.yt-town-talk small { overflow: hidden; width: 100%; font-size: .51rem; font-weight: 900; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }

.yt-town-social-dock { position: absolute; z-index: 65; left: 50%; bottom: calc(var(--yt-safe-bottom) + 17px); display: grid; grid-template-columns: repeat(2, 52px); gap: 7px; padding: 5px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 18px; background: rgba(8, 33, 38, .76); box-shadow: 0 11px 28px rgba(5, 29, 32, .24); backdrop-filter: blur(9px); transform: translateX(-50%); }
.yt-town-social-dock button { display: grid; height: 47px; grid-template-rows: 23px auto; place-items: center; padding: 3px; border: 0; border-radius: 12px; color: #fff; background: rgba(255, 255, 255, .09); cursor: pointer; touch-action: manipulation; }
.yt-town-social-dock button:active { background: rgba(255, 255, 255, .18); transform: scale(.95); }
.yt-town-social-dock button > span { color: var(--yt-amber); font-size: 1.12rem; line-height: 1; }
.yt-town-social-dock button:first-child > span { color: var(--yt-coral); }
.yt-town-app[data-avatar-color="teal"] .yt-town-social-dock button:first-child > span { color: #1ea99b; }
.yt-town-app[data-avatar-color="amber"] .yt-town-social-dock button:first-child > span { color: #efad35; }
.yt-town-app[data-avatar-color="violet"] .yt-town-social-dock button:first-child > span { color: #918ceb; }
.yt-town-social-dock small { font-size: .42rem; font-weight: 900; white-space: nowrap; }
.yt-town-social-dock #town-sound-toggle { position: absolute; left: 50%; bottom: calc(100% + 7px); width: 52px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(8, 33, 38, .82); box-shadow: 0 8px 20px rgba(5, 29, 32, .19); transform: translateX(-50%); }
.yt-town-social-dock #town-sound-toggle:active { transform: translateX(-50%) scale(.95); }
.yt-town-social-dock #town-sound-toggle[aria-pressed="true"] { color: #082b31; background: #75ead7; }.yt-town-social-dock #town-sound-toggle[aria-pressed="true"] > span { color: #082b31; text-shadow: 0 0 9px rgba(255, 255, 255, .58); }

.yt-town-avatar-palette {
  position: absolute;
  z-index: 68;
  left: 50%;
  bottom: calc(var(--yt-safe-bottom) + 83px);
  display: grid;
  width: min(430px, calc(100% - 24px));
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 17px;
  color: #fff;
  background: rgba(8, 33, 38, .95);
  box-shadow: 0 14px 32px rgba(5, 29, 32, .3);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}
.yt-town-app[data-avatar-color="coral"] { --yt-avatar-city-x: 0%; --yt-avatar-maker-x: 53.333%; --yt-avatar-row-y: 0%; }
.yt-town-app[data-avatar-color="amber"] { --yt-avatar-city-x: 26.667%; --yt-avatar-maker-x: 80%; --yt-avatar-row-y: 0%; }
.yt-town-app[data-avatar-color="teal"] { --yt-avatar-city-x: 0%; --yt-avatar-maker-x: 53.333%; --yt-avatar-row-y: 60%; }
.yt-town-app[data-avatar-color="violet"] { --yt-avatar-city-x: 26.667%; --yt-avatar-maker-x: 80%; --yt-avatar-row-y: 60%; }
.yt-town-avatar-preview {
  width: 66px;
  height: 94px;
  border: 1px solid rgba(139, 244, 229, .42);
  border-radius: 13px;
  background-color: rgba(255, 255, 255, .045);
  background-image: url("../img/town/youtown-avatar-wardrobe-atlas-v51.webp?v=20260815-v56");
  background-repeat: no-repeat;
  background-size: 1600% 600%;
  box-shadow: inset 0 -14px 20px rgba(0, 13, 18, .32);
}
.yt-town-app[data-avatar-outfit="city"] .yt-town-avatar-preview { background-position: var(--yt-avatar-city-x) var(--yt-avatar-row-y); }
.yt-town-app[data-avatar-outfit="maker"] .yt-town-avatar-preview { background-position: var(--yt-avatar-maker-x) var(--yt-avatar-row-y); }
.yt-town-avatar-editor { display: grid; min-width: 0; gap: 7px; }
.yt-town-avatar-editor > strong { color: #9fcac6; font-size: .48rem; letter-spacing: .12em; }
.yt-town-avatar-row,
.yt-town-outfit-row { display: grid; min-width: 0; grid-template-columns: 38px repeat(4, 42px); gap: 6px; align-items: center; }
.yt-town-avatar-row > span,
.yt-town-outfit-row > span { color: #c1d8d5; font-size: .5rem; font-weight: 1000; }
.yt-town-avatar-row button {
  --avatar-color: var(--yt-coral);
  --avatar-city-x: 0%;
  --avatar-maker-x: 53.333%;
  --avatar-y: 0%;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 11px;
  background-color: var(--avatar-color);
  background-image: url("../img/town/youtown-avatar-wardrobe-atlas-v51.webp?v=20260815-v56");
  background-repeat: no-repeat;
  background-size: 1600% 600%;
  box-shadow: inset 0 -8px 12px rgba(0, 17, 22, .28);
  cursor: pointer;
  touch-action: manipulation;
}
.yt-town-avatar-row button[data-avatar-color="amber"] { --avatar-color: #efad35; --avatar-city-x: 26.667%; --avatar-maker-x: 80%; }
.yt-town-avatar-row button[data-avatar-color="teal"] { --avatar-color: #1ea99b; --avatar-y: 60%; }
.yt-town-avatar-row button[data-avatar-color="violet"] { --avatar-color: #706cc4; --avatar-city-x: 26.667%; --avatar-maker-x: 80%; --avatar-y: 60%; }
.yt-town-app[data-avatar-outfit="city"] .yt-town-avatar-row button { background-position: var(--avatar-city-x) var(--avatar-y); }
.yt-town-app[data-avatar-outfit="maker"] .yt-town-avatar-row button { background-position: var(--avatar-maker-x) var(--avatar-y); }
.yt-town-avatar-row button[aria-pressed="true"],
.yt-town-outfit-row button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px var(--yt-amber); transform: scale(1.04); }
.yt-town-outfit-row { grid-template-columns: 38px repeat(2, minmax(78px, 1fr)); }
.yt-town-outfit-row button { display: grid; min-width: 0; height: 34px; grid-template-columns: 25px minmax(0, 1fr); gap: 4px; align-items: center; padding: 3px 7px 3px 3px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 10px; color: #fff; background: rgba(255, 255, 255, .075); cursor: pointer; touch-action: manipulation; }
.yt-town-outfit-row button i { width: 25px; height: 26px; border-radius: 7px; background-image: url("../img/town/youtown-avatar-wardrobe-atlas-v51.webp?v=20260815-v56"); background-repeat: no-repeat; background-size: 1600% 600%; box-shadow: inset 0 -5px 8px rgba(0, 15, 19, .22); }
.yt-town-outfit-row button[data-avatar-outfit="city"] i { background-position: var(--yt-avatar-city-x) var(--yt-avatar-row-y); }
.yt-town-outfit-row button[data-avatar-outfit="maker"] i { background-position: var(--yt-avatar-maker-x) var(--yt-avatar-row-y); }
.yt-town-outfit-row button small { overflow: hidden; font-size: .49rem; font-weight: 1000; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-avatar-editor > p { margin: 0; color: #7fe8dc; font-size: .49rem; font-weight: 900; }

.yt-town-zone-toast { position: absolute; z-index: 67; left: 50%; bottom: calc(var(--yt-safe-bottom) + 92px); display: grid; min-width: 210px; margin: 0; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .76); border-radius: 15px; color: #fff; background: rgba(8, 33, 38, .9); box-shadow: 0 12px 30px rgba(5, 29, 32, .27); opacity: 0; text-align: center; backdrop-filter: blur(10px); pointer-events: none; transform: translate(-50%, 9px); transition: opacity .18s ease, transform .18s ease; }
.yt-town-zone-toast.is-showing { opacity: 1; transform: translate(-50%, 0); }
.yt-town-zone-toast small { color: var(--yt-amber); font-size: .46rem; font-weight: 1000; letter-spacing: .15em; }
.yt-town-zone-toast strong { margin-top: 1px; font-size: .72rem; }

.yt-town-guide { position: absolute; z-index: 68; left: 50%; bottom: calc(var(--yt-safe-bottom) + 156px); display: grid; width: min(410px, calc(100% - 34px)); min-height: 72px; grid-template-columns: 48px minmax(0, 1fr) 28px; gap: 10px; align-items: center; margin: 0; padding: 9px 8px 9px 10px; border: 1px solid rgba(139, 255, 240, .64); border-radius: 18px 18px 18px 6px; color: #fff; background: linear-gradient(105deg, rgba(5, 34, 41, .96), rgba(9, 55, 60, .91)); box-shadow: 0 0 0 5px rgba(55, 221, 203, .07), 0 16px 35px rgba(4, 28, 33, .3); opacity: 0; backdrop-filter: blur(13px); pointer-events: none; transform: translate(-50%, 10px) scale(.98); transition: opacity .22s ease, transform .22s ease; }
.yt-town-guide.is-visible { opacity: 1; pointer-events: none; transform: translate(-50%, 0) scale(1); }
.yt-town-guide-mark { display: grid; width: 44px; height: 44px; place-items: center; border: 2px solid #fff; border-radius: 14px 14px 14px 4px; color: #082b31; background: var(--yt-amber); box-shadow: 0 5px 15px rgba(0, 0, 0, .18); font: 1000 1.15rem/1 Arial, sans-serif; }
.yt-town-guide > div { min-width: 0; }.yt-town-guide > div small { display: block; overflow: hidden; color: #70eddd; font: 1000 .43rem/1 Arial, sans-serif; letter-spacing: .13em; text-overflow: ellipsis; white-space: nowrap; }.yt-town-guide > div strong { display: block; overflow: hidden; margin-top: 3px; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }.yt-town-guide > div p { overflow: hidden; margin: 3px 0 0; color: #b9d3d1; font-size: .55rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-guide > button { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 9px; color: #c7dcda; background: rgba(255, 255, 255, .08); font-size: .85rem; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.yt-town-guide[data-guide-kind="arrival"] { border-color: rgba(255, 209, 94, .82); }.yt-town-guide[data-guide-kind="arrival"] .yt-town-guide-mark { background: #74ead7; }.yt-town-guide[data-guide-kind="complete"] .yt-town-guide-mark { background: var(--yt-amber); }

.yt-town-transition { position: absolute; z-index: 79; inset: 0; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 54%, transparent 0 22%, rgba(3, 19, 24, .2) 72%, rgba(3, 16, 20, .48)); isolation: isolate; pointer-events: none; }
.yt-town-transition::before,.yt-town-transition::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 50.6%; background: linear-gradient(115deg, rgba(18, 57, 62, .97), rgba(5, 25, 31, .985) 62%, rgba(40, 92, 91, .98)); box-shadow: 0 0 42px rgba(23, 238, 210, .17); will-change: transform; }
.yt-town-transition::before { left: 0; border-right: 1px solid rgba(151, 255, 237, .72); transform-origin: left center; animation: yt-threshold-left .6s cubic-bezier(.72, 0, .24, 1) forwards; }.yt-town-transition::after { right: 0; border-left: 1px solid rgba(151, 255, 237, .72); transform-origin: right center; animation: yt-threshold-right .6s cubic-bezier(.72, 0, .24, 1) forwards; }
.yt-town-transition-grid { position: absolute; z-index: 1; inset: 0; opacity: .46; background: linear-gradient(90deg, transparent 49.8%, rgba(120, 255, 236, .5) 50%, transparent 50.2%), repeating-linear-gradient(90deg, rgba(78, 236, 219, .08) 0 1px, transparent 1px 88px); animation: yt-threshold-grid .6s ease forwards; }
.yt-town-transition > div { position: absolute; z-index: 4; left: 50%; bottom: max(22px, calc(var(--yt-safe-bottom) + 12px)); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 6px 10px; border: 1px solid rgba(125, 238, 220, .38); border-radius: 999px; color: #e9f8f4; background: rgba(5, 29, 34, .52); opacity: 0; backdrop-filter: blur(7px); transform: translate(-50%, 8px); animation: yt-threshold-caption .46s .06s ease forwards; }
.yt-town-transition > div i,.yt-town-transition > div em { display: none; }
.yt-town-transition > div small { color: #7aead9; font: 900 .43rem/1 Arial, sans-serif; letter-spacing: .14em; white-space: nowrap; }.yt-town-transition > div strong { overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-transition.is-leaving > div small::before { content: "RETURNING TO CITY"; font-size: inherit; }.yt-town-transition.is-leaving > div small { font-size: 0; }
@keyframes yt-threshold-left { 0%, 24% { transform: translateX(0); } to { transform: translateX(-102%); } }
@keyframes yt-threshold-right { 0%, 24% { transform: translateX(0); } to { transform: translateX(102%); } }
@keyframes yt-threshold-grid { 0%, 38% { opacity: .46; } to { opacity: 0; transform: scaleX(1.14); } }
@keyframes yt-threshold-caption { 20%, 70% { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -4px); } }

.yt-town-map-backdrop { position: absolute; z-index: 74; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(4, 25, 29, .58); backdrop-filter: blur(5px); cursor: default; }
.yt-town-map-panel { position: absolute; z-index: 75; left: 50%; top: 50%; width: min(660px, calc(100% - 28px)); max-height: calc(100% - 28px); padding: 20px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, .82); border-radius: 24px; color: #fff; background: rgba(8, 33, 38, .96); box-shadow: 0 30px 80px rgba(3, 22, 25, .48); backdrop-filter: blur(17px); touch-action: pan-y; transform: translate(-50%, -50%); }
.yt-town-map-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.yt-town-map-heading span { color: var(--yt-amber); font-size: .52rem; font-weight: 1000; letter-spacing: .16em; }
.yt-town-map-heading h2 { margin: 1px 0 0; font-size: 1.35rem; }
.yt-town-map-heading button { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; color: #fff; background: rgba(255, 255, 255, .08); font-size: 1.15rem; cursor: pointer; }
.yt-town-map-panel > p { margin: 8px 0 13px; color: #b9d0ce; font-size: .68rem; }
.yt-town-mini-map { position: relative; width: 100%; aspect-ratio: 1.75; overflow: hidden; border: 5px solid rgba(255, 255, 255, .82); border-radius: 18px; background: radial-gradient(circle at 5px 5px, rgba(28, 101, 68, .18) 1px, transparent 1.5px) 0 0 / 15px 15px, #7dbe8a; box-shadow: inset 0 0 30px rgba(6, 44, 42, .16); }
.yt-town-mini-map::before { content: ""; position: absolute; z-index: 1; left: 0; right: 13%; top: 42%; height: 22%; background: #52676b; box-shadow: 0 -8px #e2d4b0, 0 8px #e2d4b0; }
.yt-town-mini-map::after { content: ""; position: absolute; z-index: 1; left: 43%; top: 0; width: 15%; height: 100%; background: #52676b; opacity: .92; }
.yt-town-mini-map-water { position: absolute; z-index: 1; right: 0; top: 0; width: 13%; height: 100%; background: repeating-linear-gradient(170deg, #4399af 0 17px, #58adbf 18px 21px); }
.yt-town-mini-map-road { position: absolute; z-index: 2; left: 0; right: 13%; top: 52%; border-top: 3px dashed var(--yt-amber); opacity: .7; }
.yt-town-mini-map button { position: absolute; z-index: 5; left: var(--map-x); top: var(--map-y); display: grid; min-width: 92px; justify-items: center; padding: 0; border: 0; color: var(--yt-ink-deep); background: transparent; cursor: pointer; touch-action: manipulation; transform: translate(-50%, -50%); }
.yt-town-mini-map button i { display: grid; width: 39px; height: 39px; place-items: center; border: 4px solid #fff; border-radius: 50% 50% 50% 6px; color: var(--yt-ink-deep); background: var(--yt-amber); box-shadow: 0 7px 13px rgba(5, 29, 32, .28); font: 1000 .58rem/1 Arial, sans-serif; font-style: normal; transform: rotate(-45deg); }
.yt-town-mini-map button i b { font: inherit; transform: rotate(45deg); }
.yt-town-mini-map button span { margin-top: 5px; padding: 4px 7px; border-radius: 99px; color: #fff; background: rgba(8, 33, 38, .86); font-size: .55rem; font-weight: 1000; white-space: nowrap; }
.yt-town-mini-map button.is-visited i { background: var(--yt-mint); }
.yt-town-mini-map button.is-visited i::after { content: "✓"; font-size: .75rem; transform: rotate(45deg); }
.yt-town-mini-map button.is-visited i { font-size: 0; }
.yt-town-mini-map button.is-selected i { box-shadow: 0 0 0 5px rgba(255, 200, 87, .45), 0 7px 13px rgba(5, 29, 32, .28); }
.yt-town-map-avatar { position: absolute; z-index: 8; left: 50%; top: 78%; width: 24px; height: 24px; border: 4px solid #fff; border-radius: 50%; background: var(--yt-coral); box-shadow: 0 0 0 4px rgba(8, 33, 38, .35), 0 6px 12px rgba(5, 29, 32, .3); transform: translate(-50%, -50%); transition: left .12s linear, top .12s linear; }
.yt-town-map-avatar::after { content: "YOU"; position: absolute; left: 50%; top: 24px; padding: 2px 5px; border-radius: 99px; color: #fff; background: var(--yt-ink-deep); font: 1000 .4rem/1 Arial, sans-serif; transform: translateX(-50%); }
.yt-town-app[data-avatar-color="teal"] .yt-town-map-avatar { background: #1ea99b; }
.yt-town-app[data-avatar-color="amber"] .yt-town-map-avatar { background: #efad35; }
.yt-town-app[data-avatar-color="violet"] .yt-town-map-avatar { background: #706cc4; }
.yt-town-map-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 11px; }
.yt-town-map-legend span { display: inline-flex; align-items: center; gap: 5px; color: #c2d5d3; font-size: .56rem; }
.yt-town-map-legend i { width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--yt-coral); }
.yt-town-app[data-avatar-color="teal"] .yt-town-map-legend span:first-child i { background: #1ea99b; }
.yt-town-app[data-avatar-color="amber"] .yt-town-map-legend span:first-child i { background: #efad35; }
.yt-town-app[data-avatar-color="violet"] .yt-town-map-legend span:first-child i { background: #706cc4; }
.yt-town-map-legend span:nth-child(2) i { background: var(--yt-amber); }
.yt-town-map-legend span:nth-child(3) i { background: var(--yt-mint); }
.yt-town-map-panel > small { display: block; margin-top: 10px; color: #8fb5b1; font-size: .54rem; line-height: 1.5; }

.yt-town-help-panel {
  position: absolute;
  z-index: 70;
  right: calc(var(--yt-safe-right) + 14px);
  top: 14px;
  width: min(340px, calc(100% - 28px));
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 20px;
  color: #fff;
  background: rgba(8, 33, 38, .94);
  box-shadow: 0 20px 50px rgba(5, 29, 32, .32);
  backdrop-filter: blur(14px);
  touch-action: pan-y;
}
.yt-town-help-panel > button { position: absolute; right: 10px; top: 10px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 10px; color: #fff; background: rgba(255, 255, 255, .1); cursor: pointer; }
.yt-town-help-panel > p { margin: 0 0 2px; color: var(--yt-amber); font-size: .56rem; font-weight: 1000; letter-spacing: .15em; }
.yt-town-help-panel h2 { margin: 0; font-size: 1.35rem; }
.yt-town-help-panel ol { display: grid; gap: 8px; margin: 14px 0; padding: 0; list-style: none; counter-reset: guide; }
.yt-town-help-panel li { position: relative; display: grid; padding: 9px 10px 9px 38px; border-radius: 11px; background: rgba(255, 255, 255, .08); counter-increment: guide; }
.yt-town-help-panel li::before { content: counter(guide); position: absolute; left: 10px; top: 50%; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: var(--yt-ink-deep); background: var(--yt-amber); font-size: .64rem; font-weight: 1000; transform: translateY(-50%); }
.yt-town-help-panel li strong { font-size: .75rem; }.yt-town-help-panel li span { color: #b8d2d0; font-size: .62rem; }
.yt-town-help-panel > small { color: #9fc0be; font-size: .6rem; }

.yt-town-announcement { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.yt-town-modal {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(18px + var(--yt-safe-top)) calc(18px + var(--yt-safe-right)) calc(18px + var(--yt-safe-bottom)) calc(18px + var(--yt-safe-left));
}
.yt-town-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(4, 25, 29, .76); backdrop-filter: blur(8px); cursor: default; }
.yt-town-dialog-card,
.yt-town-complete-card {
  position: relative;
  z-index: 1;
  width: min(100%, 650px);
  max-height: min(780px, calc(100dvh - 36px - var(--yt-safe-top) - var(--yt-safe-bottom)));
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 28px;
  background: var(--yt-paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.yt-town-dialog-card { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 0 18px; padding: 30px; }
.yt-town-modal[data-location="repair"] { --yt-dialog-accent: var(--yt-coral); --yt-dialog-accent-dark: #a84437; }
.yt-town-modal[data-location="design"] { --yt-dialog-accent: #45b7c5; --yt-dialog-accent-dark: #1a6071; }
.yt-town-modal[data-location="global"] { --yt-dialog-accent: #8f91dc; --yt-dialog-accent-dark: #3f427d; }
.yt-town-modal-close { position: absolute; z-index: 2; right: 14px; top: 14px; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #ccd5cc; border-radius: 50%; color: var(--yt-ink); background: #fff; font-size: 1.2rem; cursor: pointer; }
.yt-town-dialog-portrait { position: relative; grid-row: 1 / 3; width: 78px; height: 78px; overflow: hidden; border: 5px solid #fff; border-radius: 24px 24px 24px 7px; background: linear-gradient(145deg, color-mix(in srgb, var(--yt-dialog-accent, #45b7c5), #fff 25%), var(--yt-dialog-accent-dark, #24877d)); box-shadow: 0 8px 18px rgba(27, 75, 67, .18); }
.yt-town-dialog-portrait::before { content: ""; position: absolute; left: 23px; top: 14px; width: 31px; height: 31px; border: 4px solid #fff; border-radius: 50%; background: #dda47d; }
.yt-town-dialog-portrait i { position: absolute; z-index: 2; left: 21px; top: 10px; width: 36px; height: 19px; border-radius: 18px 18px 4px 4px; background: var(--yt-ink); }
.yt-town-dialog-portrait b { position: absolute; left: 13px; bottom: -15px; width: 52px; height: 44px; border: 5px solid #fff; border-radius: 20px 20px 5px 5px; background: var(--yt-coral); }
.yt-town-dialog-heading { align-self: end; padding-right: 35px; }
.yt-town-dialog-heading p { margin: 0 0 2px; color: var(--yt-dialog-accent-dark, var(--yt-teal)); font-size: .7rem; font-weight: 1000; }
.yt-town-dialog-heading h2 { margin: 0; font-size: clamp(1.55rem, 4vw, 2.25rem); font-weight: 1000; letter-spacing: -.04em; }
.yt-town-dialog-heading > span { display: inline-flex; margin-top: 7px; padding: 4px 8px; border-radius: 99px; color: var(--yt-dialog-accent-dark, var(--yt-teal)); background: color-mix(in srgb, var(--yt-dialog-accent, var(--yt-mint)), #fff 72%); font-size: .58rem; font-weight: 1000; }
.yt-town-dialog-copy { grid-column: 1 / -1; margin: 22px 0 14px; color: #506164; font-size: .88rem; line-height: 1.8; }
.yt-town-dialog-card ul { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.yt-town-dialog-card li { position: relative; min-height: 62px; padding: 12px 10px 10px 34px; border: 1px solid #d5dacd; border-radius: 13px; background: #fff; font-size: .7rem; font-weight: 900; line-height: 1.5; }
.yt-town-dialog-card li::before { content: "✓"; position: absolute; left: 10px; top: 11px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; color: #fff; background: var(--yt-dialog-accent-dark, var(--yt-teal)); font-size: .58rem; }
.yt-town-dialog-achievement { grid-column: 1 / -1; margin: 0 0 14px; padding: 10px 12px; border-radius: 11px; color: #61430e; background: #ffecac; font-size: .7rem; font-weight: 900; text-align: center; }
.yt-town-dialog-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.yt-town-cta,
.yt-town-dialog-actions button,
.yt-town-complete-actions button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border-radius: 13px;
  font-size: .78rem;
  font-weight: 1000;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.yt-town-cta { border: 1px solid var(--yt-teal); color: #fff; background: var(--yt-teal); box-shadow: 0 8px 18px rgba(11, 127, 120, .2); }
.yt-town-cta:hover { color: #fff; background: #086a65; }
.yt-town-dialog-actions button,
.yt-town-complete-actions button { border: 1px solid #c9d1c9; color: var(--yt-ink); background: #fff; }
.yt-town-dialog-card > small { grid-column: 1 / -1; margin-top: 12px; color: #72807e; font-size: .59rem; line-height: 1.5; text-align: center; }

.yt-town-complete-card { padding: clamp(28px, 6vw, 54px); text-align: center; }
.yt-town-complete-emblem { position: relative; display: grid; width: 94px; height: 94px; margin: 0 auto 20px; place-items: center; border: 8px solid #fff; border-radius: 50%; color: var(--yt-ink-deep); background: var(--yt-amber); box-shadow: 0 12px 0 #d5aa44, 0 20px 35px rgba(60, 48, 24, .18); }
.yt-town-complete-emblem::before, .yt-town-complete-emblem::after { content: ""; position: absolute; z-index: -1; top: 62px; width: 38px; height: 55px; background: var(--yt-coral); }
.yt-town-complete-emblem::before { left: -12px; transform: rotate(20deg); }.yt-town-complete-emblem::after { right: -12px; transform: rotate(-20deg); }
.yt-town-complete-emblem i { font: 1000 2.4rem/1 Arial, sans-serif; font-style: normal; }
.yt-town-complete-card > p:first-of-type { margin: 0 0 6px; color: var(--yt-teal); font-size: .67rem; font-weight: 1000; letter-spacing: .15em; }
.yt-town-complete-card h2 { margin: 0; font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 1000; letter-spacing: -.05em; line-height: 1.22; }
.yt-town-complete-card h2 + p { max-width: 520px; margin: 18px auto 22px; color: #526264; font-size: .84rem; line-height: 1.8; }
.yt-town-complete-actions { display: grid; grid-template-columns: 1.2fr .8fr; gap: 9px; }
.yt-town-complete-card > small { display: block; margin-top: 13px; color: #72807e; font-size: .59rem; }

/* v5: lightweight, locally rendered atmosphere and material depth. */
.yt-town-app[data-atmosphere="dawn"] {
  --yt-future-opacity: .52;
  --yt-ground-base: #6f9f79;
  --yt-ground-deep: rgba(44, 82, 65, .24);
  --yt-water-near: #6e9dab;
  --yt-water-far: #397687;
  --yt-window-near: #ffdca1;
  --yt-window-far: #8aa8ad;
  --yt-sun-warmth: rgba(255, 181, 103, .56);
  --yt-sun-opacity: .88;
  --yt-grade: rgba(39, 62, 75, .27);
  --yt-grade-opacity: .42;
  --yt-lens-opacity: .43;
  --yt-lamp-glow: .72;
  --yt-light-pool-opacity: .44;
  --yt-headlight-opacity: .7;
}
.yt-town-app[data-atmosphere="dusk"] {
  --yt-future-opacity: .76;
  --yt-ground-base: #668b70;
  --yt-ground-deep: rgba(40, 69, 59, .29);
  --yt-water-near: #687f98;
  --yt-water-far: #324f6a;
  --yt-window-near: #ffd478;
  --yt-window-far: #b77552;
  --yt-sun-warmth: rgba(255, 137, 74, .64);
  --yt-sun-opacity: .92;
  --yt-grade: rgba(45, 50, 80, .36);
  --yt-grade-opacity: .58;
  --yt-lens-opacity: .5;
  --yt-lamp-glow: .92;
  --yt-light-pool-opacity: .68;
  --yt-headlight-opacity: .92;
}
.yt-town-app[data-atmosphere="night"] {
  --yt-future-opacity: .95;
  --yt-ground-base: #365d58;
  --yt-ground-deep: rgba(10, 36, 40, .34);
  --yt-water-near: #285e73;
  --yt-water-far: #153d57;
  --yt-window-near: #ffe29a;
  --yt-window-far: #cb7c42;
  --yt-sun-warmth: rgba(147, 185, 219, .15);
  --yt-sun-opacity: .38;
  --yt-grade: rgba(8, 29, 51, .55);
  --yt-grade-opacity: .78;
  --yt-lens-opacity: .67;
  --yt-lamp-glow: 1;
  --yt-light-pool-opacity: .92;
  --yt-headlight-opacity: 1;
}

.yt-town-app[data-atmosphere="dusk"] .yt-town-topbar,
.yt-town-app[data-atmosphere="night"] .yt-town-topbar { background: linear-gradient(90deg, rgba(6, 25, 33, .995), rgba(18, 39, 52, .98)); }
.yt-town-viewport,
.yt-town-world { background-color: var(--yt-ground-base); transition: background-color .8s ease; }
.yt-town-ground {
  background:
    radial-gradient(ellipse at 74% 38%, rgba(255, 255, 255, .07) 0 2px, transparent 3px) 0 0 / 51px 37px,
    radial-gradient(circle at 8px 8px, var(--yt-ground-deep) 1.2px, transparent 1.7px) 0 0 / 24px 24px,
    repeating-linear-gradient(117deg, transparent 0 31px, rgba(25, 91, 59, .035) 32px 34px),
    var(--yt-ground-base);
  transition: background .8s ease;
}
.yt-town-sunlight { z-index: 45; background: none; mix-blend-mode: normal; }
.yt-town-sunlight::before,
.yt-town-sunlight::after { content: ""; position: absolute; inset: 0; transition: background .8s ease, opacity .8s ease; }
.yt-town-sunlight::before {
  background:
    radial-gradient(circle at var(--yt-sun-x) var(--yt-sun-y), var(--yt-sun-warmth), transparent 36%),
    linear-gradient(var(--yt-light-angle), rgba(255, 248, 202, .16), transparent 38%, transparent 73%, rgba(7, 42, 50, .13));
  opacity: var(--yt-sun-opacity);
  mix-blend-mode: soft-light;
}
.yt-town-sunlight::after { background: var(--yt-grade); opacity: var(--yt-grade-opacity); mix-blend-mode: multiply; }

.yt-town-cloud-shadows { position: absolute; z-index: 43; inset: -120px; overflow: hidden; opacity: .14; pointer-events: none; animation: yt-cloud-drift 54s linear infinite alternate; }
.yt-town-cloud-shadows i { position: absolute; width: 360px; height: 120px; border-radius: 50%; background: radial-gradient(ellipse, rgba(19, 58, 53, .48), transparent 68%); transform: rotate(-13deg); }
.yt-town-cloud-shadows i:nth-child(1) { left: 60px; top: 120px; }
.yt-town-cloud-shadows i:nth-child(2) { left: 710px; top: 520px; width: 470px; }
.yt-town-cloud-shadows i:nth-child(3) { left: 1250px; top: 250px; width: 290px; }
.yt-town-app[data-atmosphere="night"] .yt-town-cloud-shadows { opacity: .05; }
@keyframes yt-cloud-drift { to { transform: translate3d(115px, 34px, 0); } }

.yt-town-water {
  background:
    repeating-linear-gradient(172deg, transparent 0 29px, rgba(255, 255, 255, .2) 30px 32px, transparent 33px 61px),
    radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, .15), transparent 35%),
    linear-gradient(90deg, var(--yt-water-near), var(--yt-water-far));
  background-size: auto, 230px 350px, auto;
  transition: background .8s ease;
  animation: yt-water-current 13s linear infinite;
}
.yt-town-water > i { opacity: .62; animation: yt-water-ripple 4.8s ease-in-out infinite alternate; }
.yt-town-water > i:nth-child(2) { animation-delay: -1.7s; }.yt-town-water > i:nth-child(3) { animation-delay: -3.1s; }.yt-town-water > i:nth-child(4) { animation-delay: -4.2s; }
@keyframes yt-water-current { to { background-position: 0 62px, 0 18px, 0 0; } }
@keyframes yt-water-ripple { to { opacity: .28; transform: translateX(17px) scaleX(1.18); } }
.yt-town-ship { animation: yt-ship-float 3.7s ease-in-out infinite alternate; }
.yt-town-ship-wake { position: absolute; z-index: -1; left: -58px; top: 22px; width: 70px; height: 28px; border: 3px solid rgba(255, 255, 255, .48); border-right: 0; border-radius: 50% 0 0 50%; transform: skewX(-20deg); }
@keyframes yt-ship-float { from { transform: translateY(0) rotate(4deg); } to { transform: translateY(4px) rotate(3deg); } }
.yt-town-quay { background: repeating-linear-gradient(0deg, #dfc995 0 37px, #bda875 38px 41px, #ead8aa 42px 43px); box-shadow: -8px 0 17px rgba(30, 55, 50, .24), inset 6px 0 rgba(255, 255, 255, .18); }
.yt-town-pier { background: repeating-linear-gradient(90deg, #b47b43 0 14px, #765031 15px 18px, #c28a4e 19px 21px); box-shadow: var(--yt-shadow-x) var(--yt-shadow-y) 13px rgba(22, 50, 48, .26); }

.yt-town-forklift { position: absolute; z-index: 15; left: 1130px; top: 675px; width: 62px; height: 42px; border: 4px solid #6f4e2f; border-radius: 7px 10px 5px 5px; background: #e1a63b; box-shadow: var(--yt-shadow-x) var(--yt-shadow-y) var(--yt-shadow-blur) rgba(24, 52, 47, .25); pointer-events: none; animation: yt-forklift-shift 9s ease-in-out infinite alternate; }
.yt-town-forklift::before,
.yt-town-forklift::after { content: ""; position: absolute; bottom: -9px; width: 17px; height: 13px; border: 3px solid #9aa29c; border-radius: 50%; background: #273537; }
.yt-town-forklift::before { left: 4px; }.yt-town-forklift::after { right: 4px; }
.yt-town-forklift i { position: absolute; right: 7px; top: -19px; width: 28px; height: 24px; border: 4px solid #614a35; border-bottom: 0; border-radius: 5px 5px 0 0; background: rgba(155, 211, 220, .72); }
.yt-town-forklift b { position: absolute; left: -25px; bottom: -3px; width: 31px; height: 5px; border-radius: 2px; background: #65503a; box-shadow: 0 -21px 0 -1px #65503a; }
@keyframes yt-forklift-shift { to { transform: translateX(70px); } }

.yt-town-road {
  background:
    radial-gradient(circle at 18px 15px, rgba(255, 255, 255, .045) 0 1px, transparent 1.6px) 0 0 / 31px 27px,
    radial-gradient(ellipse at 55px 31px, rgba(13, 31, 34, .09), transparent 13px) 0 0 / 83px 67px,
    repeating-linear-gradient(112deg, transparent 0 42px, rgba(255, 255, 255, .018) 43px 44px),
    #4c5d61;
  box-shadow: inset 0 8px 0 rgba(255, 255, 255, .045), inset 0 -8px 0 rgba(7, 28, 32, .15);
}
.yt-town-road::after { filter: saturate(.86); }
.yt-town-sidewalk {
  background:
    linear-gradient(0deg, rgba(104, 91, 62, .13), transparent 6px, transparent calc(100% - 5px), rgba(255, 255, 255, .24)),
    repeating-linear-gradient(90deg, transparent 0 53px, rgba(119, 105, 76, .32) 54px 56px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 12px),
    #e1d2ad;
}
.yt-town-crosswalk { opacity: .9; filter: drop-shadow(2px 2px rgba(20, 44, 45, .08)); }
.yt-town-road-details { position: absolute; z-index: 6; inset: 0; pointer-events: none; }
.yt-town-manhole { position: absolute; width: 38px; height: 24px; border: 4px solid #334347; border-radius: 50%; background: radial-gradient(circle, #657276 0 18%, #394a4e 20% 42%, #727e80 44% 49%, #38484c 51%); box-shadow: 3px 4px 3px rgba(8, 27, 30, .28), inset 4px 3px rgba(255, 255, 255, .1); }
.yt-town-manhole i { position: absolute; inset: 5px; border: 1px dashed rgba(207, 215, 210, .44); border-radius: 50%; }
.yt-town-manhole-a { left: 520px; top: 465px; }.yt-town-manhole-b { left: 928px; top: 520px; transform: scale(.8); }
.yt-town-drain { position: absolute; width: 61px; height: 11px; border: 2px solid #47565a; border-radius: 3px; background: repeating-linear-gradient(90deg, #27383b 0 4px, #778183 5px 7px); box-shadow: 1px 2px 2px rgba(11, 31, 33, .25); }
.yt-town-drain-a { left: 392px; top: 558px; }.yt-town-drain-b { left: 1090px; top: 391px; }
.yt-town-road-repair { position: absolute; left: 45px; top: 515px; width: 145px; height: 38px; border: 2px solid rgba(28, 43, 46, .16); border-radius: 45%; background: radial-gradient(ellipse, rgba(35, 48, 51, .19), transparent 70%); transform: rotate(-4deg); }

.yt-town-plaza { background: radial-gradient(circle at 52% 44%, rgba(255, 255, 255, .32) 0 1px, transparent 2px) 0 0 / 24px 24px, radial-gradient(circle, #f3ead1 0 41%, #dfceb0 42% 55%, #f4ecd9 56% 64%, #cfbb90 65%); box-shadow: inset 0 0 32px rgba(92, 70, 38, .18), var(--yt-shadow-x) var(--yt-shadow-y) 22px rgba(35, 65, 53, .15); }
.yt-town-plaza-ring { background: radial-gradient(ellipse at 38% 30%, rgba(255, 255, 255, .47), transparent 26%), #45aabe; box-shadow: inset 0 0 0 10px #62c2cc, inset 12px 9px rgba(255, 255, 255, .12), 0 7px 0 #928a78, 0 12px 14px rgba(44, 66, 59, .16); }

.yt-building { filter: drop-shadow(var(--yt-shadow-x) var(--yt-shadow-y) 10px rgba(25, 48, 43, .2)); }
.yt-building:hover,
.yt-building.is-destination,
.yt-building.is-near { filter: drop-shadow(var(--yt-shadow-x) var(--yt-shadow-y) 12px rgba(24, 46, 42, .28)) drop-shadow(0 0 13px rgba(255, 200, 87, .82)); }
.yt-building-shadow { background: rgba(19, 44, 40, .25); filter: blur(var(--yt-shadow-blur)); transform: translate(var(--yt-shadow-x), var(--yt-shadow-y)) skewX(-24deg) scaleX(var(--yt-shadow-stretch)); transform-origin: 8% 50%; transition: transform .8s ease, filter .8s ease; }
.yt-building-roof { background: repeating-linear-gradient(168deg, rgba(255, 255, 255, .08) 0 2px, transparent 3px 19px), linear-gradient(145deg, color-mix(in srgb, var(--yt-building-main), #fff 15%), color-mix(in srgb, var(--yt-building-main), #312f33 7%)); box-shadow: inset -18px -15px 0 rgba(43, 25, 20, .14), inset 0 2px rgba(255, 255, 255, .16); }
.yt-building-wall { background: repeating-linear-gradient(0deg, rgba(110, 94, 70, .045) 0 1px, transparent 1px 18px), linear-gradient(110deg, rgba(255, 255, 255, .19), transparent 42%), var(--yt-building-wall); box-shadow: inset 0 -18px 0 rgba(85, 68, 45, .09), inset -10px 0 rgba(58, 70, 64, .035); }
.yt-building-wall::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 21px; background: linear-gradient(0deg, rgba(80, 70, 49, .11), transparent); pointer-events: none; }
.yt-building-window i { background: linear-gradient(142deg, rgba(255, 255, 255, .72) 0 14%, transparent 15% 43%, rgba(255, 255, 255, .2) 44% 48%, transparent 49%), linear-gradient(145deg, var(--yt-window-near), var(--yt-window-far)); box-shadow: inset 9px 0 0 rgba(255, 255, 255, .11), inset 0 -7px rgba(12, 53, 61, .12), 0 3px 5px rgba(24, 55, 54, .12); transition: background .8s ease, box-shadow .8s ease; }
.yt-town-app[data-atmosphere="dawn"] .yt-building-window i,
.yt-town-app[data-atmosphere="dusk"] .yt-building-window i,
.yt-town-app[data-atmosphere="night"] .yt-building-window i { box-shadow: inset 9px 0 0 rgba(255, 255, 255, .14), inset 0 -7px rgba(111, 62, 25, .12), 0 0 18px rgba(255, 204, 105, .38); }
.yt-building-door { box-shadow: inset 8px 0 rgba(255, 255, 255, .04), inset -7px 0 rgba(29, 31, 31, .1); }

.yt-town-streetlight { box-shadow: var(--yt-shadow-x) var(--yt-shadow-y) var(--yt-shadow-blur) rgba(19, 43, 40, .23); transition: box-shadow .8s ease; }
.yt-town-streetlight i { opacity: var(--yt-lamp-glow); box-shadow: 0 0 26px 8px rgba(255, 221, 101, var(--yt-lamp-glow)); transition: opacity .8s ease, box-shadow .8s ease; }
.yt-town-light-pools { position: absolute; z-index: 46; inset: 0; opacity: var(--yt-light-pool-opacity); pointer-events: none; transition: opacity .8s ease; }
.yt-town-light-pools i { position: absolute; width: 190px; height: 95px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 235, 145, .88), rgba(255, 210, 80, .3) 42%, transparent 70%); mix-blend-mode: screen; animation: yt-light-breathe 2.8s ease-in-out infinite alternate; }
.yt-town-light-pools i:nth-child(1) { left: 392px; top: 326px; }.yt-town-light-pools i:nth-child(2) { left: 844px; top: 326px; animation-delay: -1.2s; }.yt-town-light-pools i:nth-child(3) { left: 965px; top: 634px; animation-delay: -2s; }.yt-town-light-pools i:nth-child(4) { left: 342px; top: 648px; animation-delay: -.6s; }
@keyframes yt-light-breathe { to { opacity: .76; transform: scale(1.04); } }
.yt-town-tree { background: radial-gradient(circle at 36% 24%, #54a968 0 13%, transparent 14%), radial-gradient(circle at 66% 42%, #24784e 0 31%, transparent 32%), radial-gradient(circle at 34% 58%, #2c8b58 0 40%, transparent 41%), #257b51; box-shadow: inset -12px -9px 0 rgba(15, 81, 50, .48), var(--yt-shadow-x) var(--yt-shadow-y) calc(var(--yt-shadow-blur) + 3px) rgba(24, 64, 46, .22); transform-origin: 50% 100%; animation: yt-tree-breeze 4.4s ease-in-out infinite alternate; }
@keyframes yt-tree-breeze { to { transform: rotate(1.2deg); } }
.yt-town-bench { box-shadow: var(--yt-shadow-x) var(--yt-shadow-y) var(--yt-shadow-blur) rgba(27, 51, 44, .21); }

.yt-vehicle-ground-shadow { box-shadow: var(--yt-shadow-x) var(--yt-shadow-y) var(--yt-shadow-blur) rgba(15, 36, 36, .19); }
.yt-vehicle-windscreen { background: linear-gradient(145deg, rgba(255, 255, 255, .76), transparent 38%), linear-gradient(145deg, var(--yt-window-near), var(--yt-window-far)); transition: background .8s ease, box-shadow .8s ease; }
.yt-town-app[data-atmosphere="dawn"] .yt-vehicle-windscreen,
.yt-town-app[data-atmosphere="dusk"] .yt-vehicle-windscreen,
.yt-town-app[data-atmosphere="night"] .yt-vehicle-windscreen { box-shadow: inset -4px -2px rgba(11, 43, 49, .2), 0 0 9px rgba(255, 207, 113, .22); }

.yt-human-shadow { transform: translate(var(--yt-contact-shadow-x), var(--yt-contact-shadow-y)) skewX(-18deg) scaleX(var(--yt-shadow-stretch)); transition: transform .8s ease, filter .8s ease, opacity .8s ease; }
.yt-town-app[data-atmosphere="dusk"] .yt-human-figure,
.yt-town-app[data-atmosphere="night"] .yt-human-figure { filter: drop-shadow(-1px 0 2px rgba(116, 255, 238, calc(var(--yt-lamp-glow) * .52))); }
.yt-avatar-shadow { background: rgba(12, 38, 37, .3); filter: blur(2px); transform: translate(var(--yt-contact-shadow-x), var(--yt-contact-shadow-y)) rotate(var(--yt-avatar-shadow-turn, 0deg)) scaleX(var(--yt-shadow-stretch)) scaleY(.88); transform-origin: 0 0; transition: transform .12s linear; }
.yt-avatar.is-walking .yt-avatar-shadow { animation: yt-avatar-contact var(--yt-walk-duration, .24s) ease-in-out infinite alternate; }
.yt-avatar.is-walking .yt-avatar-body,
.yt-avatar.is-walking .yt-avatar-legs > i,
.yt-avatar.is-walking .yt-avatar-arms > i { animation-duration: var(--yt-walk-duration, .22s); }
@keyframes yt-avatar-contact { to { opacity: .67; transform: translate(var(--yt-contact-shadow-x), var(--yt-contact-shadow-y)) rotate(var(--yt-avatar-shadow-turn, 0deg)) scaleX(var(--yt-shadow-stretch)) scaleY(.75); } }

.yt-town-depth-lens { position: absolute; z-index: 50; inset: 0; background: linear-gradient(180deg, rgba(182, 229, 232, .08), transparent 24% 75%, rgba(3, 28, 31, .06)); box-shadow: inset 0 0 85px rgba(5, 35, 38, var(--yt-lens-opacity)); pointer-events: none; transition: box-shadow .8s ease, background .8s ease; }
.yt-town-app[data-atmosphere="dusk"] .yt-town-depth-lens { background: linear-gradient(180deg, rgba(255, 137, 91, .11), transparent 28% 70%, rgba(10, 25, 43, .16)); }
.yt-town-app[data-atmosphere="night"] .yt-town-depth-lens { background: radial-gradient(circle at 50% 115%, rgba(54, 112, 121, .13), transparent 48%), linear-gradient(180deg, rgba(12, 39, 65, .13), transparent 46%, rgba(3, 21, 35, .2)); }

.yt-town-ambience { position: absolute; z-index: 63; left: calc(var(--yt-safe-left) + 14px); top: 14px; display: grid; min-width: 156px; min-height: 52px; grid-template-columns: 34px auto auto; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 16px; color: #fff; background: rgba(8, 33, 38, .78); box-shadow: 0 12px 28px rgba(5, 29, 32, .2); backdrop-filter: blur(10px); pointer-events: none; }
.yt-town-ambience-icon { position: relative; display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--yt-amber); box-shadow: 0 0 0 5px rgba(255, 200, 87, .1), 0 0 16px rgba(255, 214, 100, .4); }
.yt-town-ambience-icon::before { content: ""; position: absolute; left: 50%; top: -5px; width: 2px; height: 38px; border-radius: 4px; background: rgba(255, 231, 154, .7); box-shadow: 0 0 0 0 transparent; transform: translateX(-50%) rotate(45deg); }
.yt-town-ambience-icon::after { content: ""; position: absolute; left: -5px; top: 50%; width: 38px; height: 2px; border-radius: 4px; background: rgba(255, 231, 154, .7); transform: translateY(-50%) rotate(45deg); }
.yt-town-ambience-icon i { position: absolute; z-index: 2; inset: 0; border-radius: 50%; background: inherit; }
.yt-town-ambience-clock { display: grid; }
.yt-town-ambience-clock small { color: #9bcac6; font-size: .43rem; font-weight: 1000; letter-spacing: .12em; }
.yt-town-ambience-clock strong { margin-top: 1px; font: 1000 .84rem/1 Arial, sans-serif; letter-spacing: .05em; }
.yt-town-ambience-state { align-self: stretch; display: grid; min-width: 76px; align-content: center; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .18); white-space: nowrap; }
.yt-town-ambience-state > strong { color: var(--yt-amber); font-size: .56rem; font-weight: 1000; }.yt-town-ambience-state > small { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: #b8d3d1; font-size: .39rem; font-weight: 900; }.yt-town-ambience-state > small > i { width: 5px; height: 5px; border-radius: 50%; background: #67e5c9; box-shadow: 0 0 7px #67e5c9; animation: yt-live-pulse 1.2s ease-in-out infinite alternate; }
@keyframes yt-live-pulse { to { opacity: .42; transform: scale(.72); } }
.yt-town-app[data-atmosphere="night"] .yt-town-ambience-icon { background: #c7dff0; box-shadow: 0 0 0 5px rgba(188, 220, 240, .08), 0 0 17px rgba(190, 222, 243, .34); }
.yt-town-app[data-atmosphere="night"] .yt-town-ambience-icon::before,
.yt-town-app[data-atmosphere="night"] .yt-town-ambience-icon::after { display: none; }
.yt-town-app[data-atmosphere="night"] .yt-town-ambience-icon i::after { content: ""; position: absolute; right: -2px; top: -3px; width: 25px; height: 25px; border-radius: 50%; background: #183844; }

.yt-town-lighting-control { display: grid; grid-template-columns: minmax(112px, .75fr) minmax(205px, 1.25fr); gap: 12px; align-items: center; margin-top: 12px; padding: 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: rgba(255, 255, 255, .055); }
.yt-town-lighting-control > div:first-child { display: grid; }
.yt-town-lighting-control > div:first-child span { color: var(--yt-amber); font-size: .45rem; font-weight: 1000; letter-spacing: .14em; }
.yt-town-lighting-control > div:first-child strong { margin-top: 1px; font-size: .7rem; }
.yt-town-lighting-control > div:first-child small { margin-top: 2px; color: #9fc0be; font-size: .51rem; }
.yt-town-lighting-control > div:last-child { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 5px; }
.yt-town-lighting-control button { min-height: 38px; padding: 5px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 10px; color: #d8e7e5; background: rgba(255, 255, 255, .07); font-size: .6rem; font-weight: 1000; cursor: pointer; touch-action: manipulation; }
.yt-town-lighting-control button[aria-pressed="true"] { border-color: var(--yt-amber); color: var(--yt-ink-deep); background: var(--yt-amber); box-shadow: 0 4px 12px rgba(255, 200, 87, .2); }

/* v6: near-future civic systems grounded in a working industrial town. */
.yt-town-topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(93, 239, 222, .74), var(--yt-amber), transparent); opacity: .68; }
.yt-town-mission { position: relative; overflow: hidden; }
.yt-town-mission::after { content: ""; position: absolute; left: -36%; bottom: 0; width: 32%; height: 1px; background: linear-gradient(90deg, transparent, #78fff0, transparent); animation: yt-mission-scan 5.5s linear infinite; }
@keyframes yt-mission-scan { to { left: 104%; } }

.yt-town-future-grid { position: absolute; z-index: 7; inset: 0; opacity: var(--yt-future-opacity); background-image: linear-gradient(rgba(87, 230, 214, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(87, 230, 214, .065) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at 52% 50%, #000 0 34%, transparent 76%); pointer-events: none; animation: yt-future-grid-flow 18s linear infinite; transition: opacity .8s ease; }
.yt-town-future-grid i { position: absolute; width: 7px; height: 7px; border: 2px solid rgba(169, 255, 244, .9); border-radius: 50%; background: #1fc7b1; box-shadow: 0 0 13px 4px var(--yt-future-glow); animation: yt-data-node 1.6s ease-in-out infinite alternate; }
.yt-town-future-grid i:nth-child(1) { left: 505px; top: 510px; }.yt-town-future-grid i:nth-child(2) { left: 940px; top: 432px; animation-delay: -.7s; }.yt-town-future-grid i:nth-child(3) { left: 1080px; top: 740px; animation-delay: -1.2s; }
@keyframes yt-future-grid-flow { to { background-position: 80px 80px; } }
@keyframes yt-data-node { to { opacity: .42; transform: scale(.72); } }

.yt-town-smart-lanes { position: absolute; z-index: 8; inset: 0; opacity: var(--yt-future-opacity); pointer-events: none; transition: opacity .8s ease; }
.yt-town-smart-lanes i { position: absolute; left: 0; width: 1260px; height: 3px; background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(83, 234, 218, .82) 21px 45px, transparent 46px 70px); filter: drop-shadow(0 0 5px rgba(74, 233, 215, .62)); animation: yt-smart-lane 1.3s linear infinite; }
.yt-town-smart-lanes i:first-child { top: 421px; }.yt-town-smart-lanes i:nth-child(2) { top: 540px; animation-direction: reverse; }
.yt-town-smart-lanes b { position: absolute; left: 691px; top: 0; width: 3px; height: 920px; background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(83, 234, 218, .65) 23px 48px, transparent 49px 73px); filter: drop-shadow(0 0 5px rgba(74, 233, 215, .55)); animation: yt-smart-lane-vertical 1.4s linear infinite; }
.yt-town-signals { position: absolute; z-index: 23; inset: 0; pointer-events: none; }
.yt-town-signals > span { position: absolute; left: 620px; top: 372px; width: 13px; height: 54px; border: 2px solid rgba(255, 255, 255, .46); border-radius: 6px; background: #15343c; box-shadow: 5px 8px 7px rgba(5, 29, 32, .23); }.yt-town-signals > span:nth-child(2) { left: 802px; top: 555px; transform: rotate(90deg); }.yt-town-signals > span:nth-child(3) { left: 1090px; top: 372px; }
.yt-town-signals i,.yt-town-signals em,.yt-town-signals b { position: absolute; left: 2px; width: 5px; height: 5px; border-radius: 50%; opacity: .13; transition: opacity .18s ease, box-shadow .18s ease; }.yt-town-signals i { top: 7px; background: #ff665a; }.yt-town-signals em { top: 22px; background: #ffd45d; font-style: normal; }.yt-town-signals b { bottom: 7px; background: #65efbd; }
.yt-town-app[data-traffic-phase="pedestrians"] .yt-town-signals i { opacity: 1; box-shadow: 0 0 9px 2px rgba(255, 102, 90, .85); }.yt-town-app[data-traffic-phase="clearing"] .yt-town-signals em { opacity: 1; box-shadow: 0 0 9px 2px rgba(255, 212, 93, .88); }.yt-town-app[data-traffic-phase="vehicles"] .yt-town-signals b { opacity: 1; box-shadow: 0 0 9px 2px rgba(101, 239, 189, .9); }
@keyframes yt-smart-lane { to { background-position: 70px 0; } }
@keyframes yt-smart-lane-vertical { to { background-position: 0 73px; } }

.yt-building-solar { position: absolute; z-index: 5; left: 39px; top: 38px; display: flex; gap: 4px; padding: 4px; border: 2px solid rgba(209, 248, 244, .68); border-radius: 4px; background: rgba(9, 47, 62, .54); box-shadow: 5px 6px 8px rgba(19, 39, 42, .2), inset 0 0 8px rgba(105, 238, 226, .17); transform: skewY(-8deg) rotate(-2deg); }
.yt-building-solar i { width: 26px; height: 20px; border: 1px solid rgba(155, 231, 231, .62); background: linear-gradient(90deg, transparent 47%, rgba(145, 237, 231, .48) 48% 52%, transparent 53%), linear-gradient(0deg, transparent 46%, rgba(145, 237, 231, .4) 47% 52%, transparent 53%), linear-gradient(145deg, #276479, #102f47); box-shadow: inset 4px 3px rgba(255, 255, 255, .1); }
.yt-building-design .yt-building-solar { left: 184px; top: 42px; transform: skewY(8deg) rotate(2deg); }
.yt-building-global .yt-building-solar { left: 33px; top: 43px; }
.yt-building-global .yt-building-solar i { width: 22px; }
.yt-building-wall { border-color: rgba(255, 252, 235, .92); }
.yt-building-design .yt-building-wall { box-shadow: inset 0 -18px 0 rgba(42, 103, 105, .1), inset -10px 0 rgba(58, 70, 64, .035), 0 0 18px rgba(74, 222, 211, .08); }

.yt-town-smart-pylon { position: absolute; z-index: 13; width: 14px; height: 78px; border-radius: 8px 8px 3px 3px; background: linear-gradient(90deg, #1a353d, #49656a 52%, #1b333a); box-shadow: var(--yt-contact-shadow-x) var(--yt-contact-shadow-y) var(--yt-shadow-blur) rgba(12, 40, 39, .25); pointer-events: none; }
.yt-town-smart-pylon::before { content: ""; position: absolute; left: 50%; top: -8px; width: 39px; height: 17px; border: 2px solid rgba(148, 255, 243, .8); border-radius: 50%; background: rgba(15, 70, 75, .86); box-shadow: 0 0 15px 4px var(--yt-future-glow); transform: translateX(-50%); }
.yt-town-smart-pylon i { position: absolute; left: -8px; top: 23px; width: 30px; height: 22px; border: 2px solid rgba(128, 241, 229, .68); border-radius: 5px; background: linear-gradient(135deg, rgba(98, 248, 229, .22), rgba(6, 44, 56, .86)); box-shadow: inset 0 0 8px rgba(86, 240, 224, .25); }
.yt-town-smart-pylon i::after { content: "AIR"; position: absolute; inset: 0; display: grid; place-items: center; color: #b9fff5; font: 1000 .36rem/1 Arial, sans-serif; letter-spacing: .08em; }
.yt-town-smart-pylon b { position: absolute; left: 5px; top: -17px; width: 4px; height: 4px; border-radius: 50%; background: #c9fff8; animation: yt-data-node 1.2s ease-in-out infinite alternate; }
.yt-town-smart-pylon-1 { left: 515px; top: 287px; }.yt-town-smart-pylon-2 { left: 1085px; top: 648px; }

.yt-town-agv { position: absolute; z-index: 16; left: 875px; top: 598px; width: 74px; height: 33px; border: 3px solid rgba(216, 255, 249, .84); border-radius: 18px 19px 8px 8px; background: linear-gradient(145deg, #4ccbbb, #176c72); box-shadow: var(--yt-contact-shadow-x) var(--yt-contact-shadow-y) 8px rgba(10, 37, 38, .29), 0 0 11px rgba(75, 235, 216, .22); pointer-events: none; animation: yt-agv-route 12s ease-in-out infinite alternate; }
.yt-town-agv::before,
.yt-town-agv::after { content: ""; position: absolute; bottom: -7px; width: 16px; height: 10px; border: 3px solid #93a9a8; border-radius: 50%; background: #183136; }
.yt-town-agv::before { left: 9px; }.yt-town-agv::after { right: 9px; }
.yt-town-agv i { position: absolute; left: 10px; top: 8px; width: 28px; height: 12px; border-radius: 8px; background: #b8eeeb; box-shadow: inset 7px 0 rgba(255, 255, 255, .45); }
.yt-town-agv b { position: absolute; right: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #c6fff5; box-shadow: 0 0 11px 5px var(--yt-future-glow); }
.yt-town-agv em { position: absolute; left: 50%; top: -16px; padding: 3px 6px; border: 1px solid rgba(176, 255, 245, .66); border-radius: 99px; color: #d9fff9; background: rgba(8, 49, 59, .8); font: 1000 .38rem/1 Arial, sans-serif; font-style: normal; letter-spacing: .08em; transform: translateX(-50%); }
.yt-town-agv em::after { content: "AGV"; }
@keyframes yt-agv-route { to { transform: translateX(245px); } }

.yt-town-drone { position: absolute; z-index: 44; left: 520px; top: 205px; width: 68px; height: 25px; pointer-events: none; animation: yt-drone-patrol 19s ease-in-out infinite alternate; }
.yt-town-drone b { position: absolute; z-index: 2; left: 22px; top: 5px; width: 28px; height: 17px; border: 3px solid #d5f6f1; border-radius: 11px 11px 7px 7px; background: linear-gradient(145deg, #4daaa8, #1a5362); box-shadow: 0 7px 8px rgba(14, 40, 41, .22), 0 0 10px rgba(78, 238, 221, .27); }
.yt-town-drone b::after { content: ""; position: absolute; left: 9px; bottom: -5px; width: 6px; height: 6px; border-radius: 50%; background: #8dfff0; box-shadow: 0 0 8px 4px var(--yt-future-glow); }
.yt-town-drone i { position: absolute; left: 0; top: 0; width: 21px; height: 8px; border: 2px solid rgba(214, 255, 250, .74); border-radius: 50%; box-shadow: 49px 0 0 -2px rgba(214, 255, 250, .74); animation: yt-rotor .18s linear infinite alternate; }
.yt-town-drone em { position: absolute; z-index: -1; left: 20px; top: 20px; width: 34px; height: 72px; background: linear-gradient(180deg, rgba(99, 255, 234, .2), transparent); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); opacity: var(--yt-future-opacity); }
@keyframes yt-drone-patrol { from { transform: translate3d(-170px, 24px, 0); } to { transform: translate3d(640px, -35px, 0); } }
@keyframes yt-rotor { to { transform: scaleX(.35); } }

.yt-town-route-line { height: 6px; background: repeating-linear-gradient(90deg, #66f8e5 0 12px, var(--yt-amber) 13px 20px, transparent 21px 31px); filter: drop-shadow(0 0 4px rgba(79, 244, 225, .82)) drop-shadow(0 2px 1px rgba(63, 44, 14, .35)); }
.yt-town-route-arrow { box-shadow: 0 0 0 1px rgba(111, 255, 238, .42), 0 0 16px rgba(87, 241, 224, .24); }
.yt-town-future-scan { position: absolute; z-index: 49; left: 0; right: 0; top: -16%; height: 90px; background: linear-gradient(180deg, transparent, rgba(102, 255, 237, .08), transparent); opacity: var(--yt-future-opacity); mix-blend-mode: screen; pointer-events: none; animation: yt-viewport-scan 11s linear infinite; }
@keyframes yt-viewport-scan { to { top: 108%; } }

.yt-town-goal-backdrop { position: absolute; z-index: 76; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(3, 22, 28, .66); backdrop-filter: blur(7px); cursor: default; }
.yt-town-goal-panel { position: absolute; z-index: 77; left: 50%; top: 50%; width: min(650px, calc(100% - 28px)); max-height: calc(100% - 28px); padding: 20px; overflow-y: auto; border: 1px solid rgba(145, 255, 241, .78); border-radius: 24px; color: #fff; background: linear-gradient(145deg, rgba(8, 38, 46, .98), rgba(8, 29, 40, .98)); box-shadow: 0 30px 90px rgba(2, 20, 27, .56), inset 0 0 35px rgba(73, 225, 210, .045); backdrop-filter: blur(18px); touch-action: pan-y; transform: translate(-50%, -50%); }
.yt-town-goal-panel::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #82fff0, var(--yt-amber), transparent); }
.yt-town-goal-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.yt-town-goal-heading span { color: #75eee0; font-size: .52rem; font-weight: 1000; letter-spacing: .17em; }
.yt-town-goal-heading h2 { margin: 2px 0 0; font-size: 1.35rem; }
.yt-town-goal-heading button { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; color: #fff; background: rgba(255, 255, 255, .08); font-size: 1.15rem; cursor: pointer; }
.yt-town-goal-panel > p { margin: 8px 0 14px; color: #b9d3d1; font-size: .68rem; line-height: 1.55; }
.yt-town-goal-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.yt-town-goal-options button { position: relative; display: grid; min-height: 78px; grid-template-columns: 45px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .15); border-radius: 15px; color: #fff; background: rgba(255, 255, 255, .06); text-align: left; cursor: pointer; touch-action: manipulation; }
.yt-town-goal-options button::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: linear-gradient(90deg, #60ecdd, var(--yt-amber)); transition: right .2s ease; }
.yt-town-goal-options button[aria-pressed="true"] { border-color: rgba(113, 255, 238, .78); background: rgba(47, 190, 178, .14); box-shadow: inset 0 0 22px rgba(87, 235, 218, .07), 0 0 16px rgba(72, 230, 213, .08); }
.yt-town-goal-options button[aria-pressed="true"]::after { right: 0; }
.yt-town-goal-options button > span:first-child { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(177, 255, 247, .66); border-radius: 13px 13px 13px 4px; color: var(--yt-ink-deep); background: linear-gradient(145deg, #75eee0, #38aeb0); font: 1000 .59rem/1 Arial, sans-serif; box-shadow: inset 0 -5px rgba(5, 65, 69, .14); }
.yt-town-goal-options button:first-child > span:first-child { background: linear-gradient(145deg, var(--yt-amber), #e49e31); }
.yt-town-goal-options button > span:nth-child(2) { display: grid; min-width: 0; }
.yt-town-goal-options strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-goal-options small { margin-top: 4px; color: #9bbebb; font-size: .53rem; line-height: 1.35; }
.yt-town-goal-options em { padding: 5px 7px; border-radius: 99px; color: var(--yt-amber); background: rgba(255, 255, 255, .08); font: 1000 .58rem/1 Arial, sans-serif; font-style: normal; }
.yt-town-goal-options button.is-complete em { color: var(--yt-ink-deep); background: var(--yt-mint); }
.yt-town-goal-options button.is-complete em::before { content: "✓ "; }
.yt-town-goal-overall { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 9px 11px; border-radius: 11px; color: #bad0ce; background: rgba(255, 255, 255, .055); font-size: .61rem; }
.yt-town-goal-overall strong { color: var(--yt-amber); font: 1000 .78rem/1 Arial, sans-serif; }
.yt-town-goal-panel > small { display: block; margin-top: 9px; color: #86aaa7; font-size: .53rem; line-height: 1.45; }

/* v7: YOUTOWN CITY — a dense illuminated makers crossing and enterable facilities. */
.yt-town-skyline { position: absolute; z-index: 5; left: 0; top: 0; width: 1295px; height: 365px; overflow: hidden; pointer-events: none; }
.yt-town-skyline::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 42, 58, .14), transparent 42%, rgba(7, 31, 37, .11)); }
.yt-town-skyline i { position: absolute; bottom: 0; border: 1px solid rgba(174, 225, 229, .16); background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(132, 213, 218, .13) 23px 25px), repeating-linear-gradient(90deg, rgba(13, 48, 58, .88) 0 18px, rgba(27, 74, 82, .88) 19px 34px), linear-gradient(#1d5968, #113b47); box-shadow: inset -12px 0 rgba(5, 25, 34, .2), 14px 9px 18px rgba(5, 29, 33, .14); }
.yt-town-skyline i::after { content: ""; position: absolute; inset: 13px 10px; background: repeating-linear-gradient(0deg, rgba(255, 221, 116, .72) 0 5px, transparent 6px 22px); opacity: calc(.12 + var(--yt-lamp-glow) * .62); mix-blend-mode: screen; }
.yt-town-skyline i:nth-child(1) { left: -25px; width: 125px; height: 305px; clip-path: polygon(0 8%, 34% 8%, 34% 0, 75% 0, 75% 13%, 100% 13%, 100% 100%, 0 100%); }
.yt-town-skyline i:nth-child(2) { left: 72px; width: 165px; height: 352px; clip-path: polygon(0 13%, 23% 13%, 23% 5%, 74% 5%, 74% 0, 100% 0, 100% 100%, 0 100%); }
.yt-town-skyline i:nth-child(3) { left: 400px; width: 164px; height: 325px; clip-path: polygon(0 15%, 21% 15%, 21% 0, 80% 0, 80% 8%, 100% 8%, 100% 100%, 0 100%); }
.yt-town-skyline i:nth-child(4) { left: 535px; width: 170px; height: 360px; clip-path: polygon(0 6%, 35% 6%, 35% 0, 69% 0, 69% 13%, 100% 13%, 100% 100%, 0 100%); }
.yt-town-skyline i:nth-child(5) { left: 870px; width: 150px; height: 338px; clip-path: polygon(0 9%, 28% 9%, 28% 0, 74% 0, 74% 17%, 100% 17%, 100% 100%, 0 100%); }
.yt-town-skyline i:nth-child(6) { left: 985px; width: 165px; height: 360px; clip-path: polygon(0 17%, 17% 17%, 17% 4%, 72% 4%, 72% 0, 100% 0, 100% 100%, 0 100%); }
.yt-town-skyline i:nth-child(7) { left: 1150px; width: 145px; height: 318px; clip-path: polygon(0 0, 78% 0, 78% 10%, 100% 10%, 100% 100%, 0 100%); }
.yt-town-skyrail { position: absolute; z-index: 7; left: 0; top: 43px; width: 1260px; height: 35px; border-top: 4px solid rgba(39, 85, 94, .92); border-bottom: 7px solid rgba(13, 48, 57, .9); background: linear-gradient(180deg, rgba(125, 207, 210, .23), rgba(11, 48, 56, .74)); box-shadow: 0 9px 18px rgba(4, 25, 31, .2), 0 1px rgba(141, 246, 235, .22); pointer-events: none; }
.yt-town-skyrail::before { content: ""; position: absolute; left: 70px; right: 70px; bottom: -100px; height: 93px; border-left: 9px solid #1d4a54; border-right: 9px solid #1d4a54; opacity: .8; }
.yt-town-skyrail > span { position: absolute; left: -210px; top: -1px; display: flex; width: 188px; height: 27px; align-items: center; gap: 11px; padding: 4px 11px; border: 2px solid rgba(202, 255, 249, .84); border-radius: 13px 4px 4px 13px; color: #e4fffb; background: linear-gradient(90deg, #186e75, #133c4c); box-shadow: 0 0 16px rgba(75, 236, 219, .26); animation: yt-skyrail-loop 22s linear infinite; }
.yt-town-skyrail > span::before,.yt-town-skyrail > span::after { content: ""; width: 32px; height: 12px; border: 1px solid rgba(125, 245, 232, .72); border-radius: 3px; background: rgba(7, 34, 43, .72); box-shadow: 42px 0 0 rgba(7, 34, 43, .72), 84px 0 0 rgba(7, 34, 43, .72); }.yt-town-skyrail > span::after { position: absolute; right: -7px; width: 7px; height: 18px; border: 0; border-radius: 0 5px 5px 0; background: #75ead7; box-shadow: 0 0 10px #75ead7; }
.yt-town-skyrail > span i { display: none; }.yt-town-skyrail > span b { position: absolute; left: 50%; bottom: 1px; font: 1000 5px/1 Arial, sans-serif; letter-spacing: .18em; transform: translateX(-50%); }
@keyframes yt-skyrail-loop { 0% { transform: translateX(0); } 48%, 100% { transform: translateX(1690px); } }

.yt-town-media-canyon { position: absolute; z-index: 11; inset: 0; pointer-events: none; }
.yt-town-media-board { position: absolute; display: grid; align-content: center; overflow: hidden; border: 4px solid rgba(221, 255, 251, .72); border-radius: 7px; color: #fff; background: #103c4a; box-shadow: 0 0 0 5px rgba(5, 23, 31, .5), 0 0 24px rgba(78, 244, 226, .32), 14px 17px 14px rgba(3, 20, 26, .28); text-align: center; transform: perspective(280px) rotateY(var(--yt-board-turn, 0deg)); }
.yt-town-media-board::before { content: ""; position: absolute; inset: -30%; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 255, 255, .08) 5px 6px), linear-gradient(125deg, transparent 20%, rgba(255, 255, 255, .25) 39%, transparent 51%); animation: yt-media-scan 5.5s linear infinite; }
.yt-town-media-board small,
.yt-town-media-board b,
.yt-town-media-board em { position: relative; z-index: 1; display: block; font-style: normal; }
.yt-town-media-board small { font: 1000 9px/1 Arial, sans-serif; letter-spacing: .15em; }
.yt-town-media-board b { margin: 6px 0; font: 1000 27px/.82 Arial, sans-serif; letter-spacing: -.04em; text-shadow: 0 0 13px currentColor; }
.yt-town-media-board em { font: 900 7px/1.25 Arial, sans-serif; letter-spacing: .1em; }
.yt-town-media-board-main { left: 467px; top: 12px; width: 112px; height: 288px; color: #9affef; background: radial-gradient(circle at 70% 16%, rgba(255, 200, 87, .6), transparent 25%), linear-gradient(150deg, #123e63, #0b766f 58%, #122e45); --yt-board-turn: 4deg; }
.yt-town-media-board-main b { color: #fff; font-size: 30px; }
.yt-town-media-board-repair { left: 22px; top: 32px; width: 105px; height: 142px; color: #fff3dc; background: linear-gradient(145deg, #b93c4f, #e66e55); --yt-board-turn: -6deg; }
.yt-town-media-board-design { left: 900px; top: 18px; width: 118px; height: 170px; color: #d9fffb; background: linear-gradient(145deg, #126d82, #31b4b2); --yt-board-turn: 6deg; }
.yt-town-media-board-global { left: 1215px; top: 80px; width: 76px; height: 222px; color: #fff; background: linear-gradient(180deg, #674bb4, #253a76); --yt-board-turn: -5deg; }
.yt-town-media-board-global b { font-size: 18px; writing-mode: vertical-rl; margin: 7px auto; letter-spacing: .06em; }
.yt-town-media-ticker { position: absolute; left: 0; top: 327px; width: 1260px; height: 25px; overflow: hidden; border-top: 2px solid rgba(126, 255, 239, .72); border-bottom: 2px solid rgba(126, 255, 239, .72); color: #fff8c8; background: rgba(5, 30, 38, .94); box-shadow: 0 0 18px rgba(69, 237, 217, .32); font: 1000 10px/21px Arial, sans-serif; letter-spacing: .16em; white-space: nowrap; }
.yt-town-media-ticker i { display: inline-block; min-width: 2200px; font-style: normal; animation: yt-ticker 19s linear infinite; }
.yt-town-searchlights { position: absolute; z-index: 42; inset: 0; overflow: hidden; opacity: calc(.12 + var(--yt-lamp-glow) * .5); mix-blend-mode: screen; pointer-events: none; }
.yt-town-searchlights i { position: absolute; left: 50%; bottom: 500px; width: 170px; height: 520px; background: linear-gradient(0deg, rgba(99, 255, 237, .2), transparent 78%); clip-path: polygon(47% 100%, 53% 100%, 100% 0, 0 0); transform-origin: 50% 100%; animation: yt-searchlight 8s ease-in-out infinite alternate; }
.yt-town-searchlights i:nth-child(2) { left: 20%; animation-delay: -3s; animation-direction: alternate-reverse; }.yt-town-searchlights i:nth-child(3) { left: 82%; animation-delay: -5s; }
@keyframes yt-media-scan { to { transform: translateY(34%); } }
@keyframes yt-ticker { to { transform: translateX(-1080px); } }
@keyframes yt-searchlight { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }

.yt-building-enter-sign { position: absolute; z-index: 9; right: 51px; top: 178px; padding: 3px 6px; border: 1px solid rgba(171, 255, 245, .8); border-radius: 5px; color: #b7fff5; background: rgba(5, 48, 57, .88); box-shadow: 0 0 10px rgba(79, 242, 224, .36); font: 1000 7px/1 Arial, sans-serif; letter-spacing: .12em; opacity: .68; }
.yt-building.is-near .yt-building-enter-sign { color: var(--yt-ink-deep); background: var(--yt-amber); box-shadow: 0 0 16px rgba(255, 212, 96, .82); opacity: 1; animation: yt-enter-sign .8s ease-in-out infinite alternate; }
@keyframes yt-enter-sign { to { transform: translateY(-3px); } }

.yt-town-crowd { position: absolute; z-index: auto; inset: 0; pointer-events: none; }
.yt-citizen {
  --yt-citizen-skin: #c98f6d;
  --yt-citizen-skin-shadow: #9c624c;
  --yt-citizen-hair: #26383e;
  --yt-citizen-shirt: #4c8fa0;
  --yt-citizen-shirt-dark: #2d6675;
  --yt-citizen-pants: #2b414d;
  --yt-citizen-shoes: #132931;
  --yt-citizen-depth: 1;
  position: absolute;
  z-index: 16;
  width: 19px;
  height: 41px;
  opacity: 1;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.yt-citizen-shadow { position: absolute; z-index: 0; left: 1px; bottom: -1px; width: 19px; height: 6px; border-radius: 50%; background: rgba(8, 29, 31, .32); filter: blur(1.2px); transform: translate(var(--yt-contact-shadow-x), var(--yt-contact-shadow-y)) skewX(-20deg) scaleX(var(--yt-shadow-stretch)); transform-origin: 0 50%; transition: transform .8s ease, opacity .8s ease; }
.yt-citizen-figure { position: absolute; z-index: 1; inset: 0; filter: saturate(.96); transform: scaleX(var(--yt-citizen-facing, 1)) scale(var(--yt-citizen-depth)); transform-origin: 50% 100%; }
.yt-citizen-legs { position: absolute; z-index: 2; left: 5px; top: 27px; width: 11px; height: 14px; }
.yt-citizen-legs > i { position: absolute; top: 0; width: 4px; height: 12px; border-radius: 1px 1px 3px 3px; background: linear-gradient(90deg, var(--yt-citizen-pants), #172a34); transform-origin: 50% 1px; }
.yt-citizen-legs > i:first-child { left: 0; }.yt-citizen-legs > i:last-child { right: 0; }
.yt-citizen-legs > i::after { content: ""; position: absolute; left: -1px; bottom: -1px; width: 6px; height: 3px; border-radius: 2px 3px 1px 1px; background: var(--yt-citizen-shoes); }
.yt-citizen-body { position: absolute; z-index: 4; left: 3px; top: 13px; width: 14px; height: 17px; border-radius: 5px 5px 3px 3px; background: linear-gradient(105deg, rgba(255, 255, 255, .24), transparent 28%), linear-gradient(90deg, var(--yt-citizen-shirt), var(--yt-citizen-shirt-dark)); box-shadow: inset 1px 0 rgba(255, 255, 255, .22), inset -1px -1px rgba(10, 30, 35, .14); animation: yt-citizen-breathe 1.8s ease-in-out infinite alternate; }
.yt-citizen-body > i { position: absolute; left: 50%; top: 2px; width: 5px; height: 5px; border-right: 1px solid rgba(255, 255, 255, .65); border-bottom: 1px solid rgba(255, 255, 255, .45); transform: translateX(-50%) rotate(45deg); }
.yt-citizen-arms { position: absolute; z-index: 3; left: 1px; top: 15px; width: 18px; height: 17px; }
.yt-citizen-arms > i { position: absolute; top: 0; width: 4px; height: 15px; border-radius: 3px; background: linear-gradient(90deg, var(--yt-citizen-shirt), var(--yt-citizen-shirt-dark)); transform-origin: 50% 2px; }
.yt-citizen-arms > i:first-child { left: 0; transform: rotate(5deg); }.yt-citizen-arms > i:last-child { right: 0; transform: rotate(-5deg); }
.yt-citizen-arms > i::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 4px; height: 5px; border-radius: 50%; background: var(--yt-citizen-skin-shadow); }
.yt-citizen-head { position: absolute; z-index: 6; left: 6px; top: 1px; width: 9px; height: 13px; border-radius: 48% 48% 44% 44%; background: linear-gradient(120deg, var(--yt-citizen-skin), var(--yt-citizen-skin-shadow)); box-shadow: inset 1px 0 rgba(255, 255, 255, .25); }
.yt-citizen-head > i { position: absolute; z-index: 2; left: -1px; right: -1px; top: -2px; height: 6px; border-radius: 7px 7px 2px 3px; background: var(--yt-citizen-hair); }
.yt-citizen-head > b { position: absolute; z-index: 3; left: 2px; top: 6px; width: 1px; height: 1px; border-radius: 50%; background: #2e2928; box-shadow: 4px 0 #2e2928; }
.yt-citizen-head > b::after { content: ""; position: absolute; left: 2px; top: 3px; width: 3px; height: 2px; border-right: 1px solid rgba(95, 50, 40, .58); border-bottom: 1px solid rgba(95, 50, 40, .46); border-radius: 50%; }
.yt-citizen-item { position: absolute; z-index: 7; }

.yt-citizen:nth-child(1) { left: 590px; top: 405px; z-index: 13; --yt-citizen-depth: .9; }.yt-citizen:nth-child(2) { left: 620px; top: 440px; z-index: 15; --yt-citizen-depth: .95; }.yt-citizen:nth-child(3) { left: 665px; top: 503px; z-index: 13; --yt-citizen-depth: .98; }.yt-citizen:nth-child(4) { left: 785px; top: 423px; z-index: 15; --yt-citizen-depth: .92; }.yt-citizen:nth-child(5) { left: 824px; top: 513px; z-index: 16; --yt-citizen-depth: 1.02; }.yt-citizen:nth-child(6) { left: 1030px; top: 428px; z-index: 15; --yt-citizen-depth: .94; }.yt-citizen:nth-child(7) { left: 1090px; top: 508px; z-index: 16; --yt-citizen-depth: 1.02; }.yt-citizen:nth-child(8) { left: 346px; top: 470px; z-index: 16; --yt-citizen-depth: .98; }
.yt-citizen:nth-child(9) { left: 250px; top: 365px; z-index: 13; --yt-citizen-depth: .86; }.yt-citizen:nth-child(10) { left: 948px; top: 650px; z-index: 20; --yt-citizen-depth: 1.06; }.yt-citizen:nth-child(11) { left: 505px; top: 714px; z-index: 22; --yt-citizen-depth: 1.1; }.yt-citizen:nth-child(12) { left: 1164px; top: 628px; z-index: 20; --yt-citizen-depth: 1.05; }
.yt-citizen-engineer { --yt-citizen-skin: #b97859; --yt-citizen-skin-shadow: #8e5745; --yt-citizen-shirt: #a84f54; --yt-citizen-shirt-dark: #71383f; }
.yt-citizen-engineer .yt-citizen-head::before,.yt-citizen-port .yt-citizen-head::before { content: ""; position: absolute; z-index: 5; left: -2px; top: -3px; width: 13px; height: 5px; border-radius: 7px 7px 2px 2px; background: #f3bd43; box-shadow: 0 1px #a96d22; }
.yt-citizen-engineer .yt-citizen-item { right: -3px; top: 21px; width: 7px; height: 7px; border: 1px solid #3c2d29; border-radius: 2px; background: #e6a23b; }
.yt-citizen-commuter { --yt-citizen-facing: 1; --yt-citizen-skin: #d7a07e; --yt-citizen-skin-shadow: #aa7059; --yt-citizen-hair: #4c302c; --yt-citizen-shirt: #3a7cb2; --yt-citizen-shirt-dark: #28517f; --yt-citizen-pants: #2b3954; }
.yt-citizen-commuter .yt-citizen-item,.yt-citizen-student .yt-citizen-item { left: -2px; top: 16px; width: 7px; height: 13px; border-radius: 3px; background: #244958; box-shadow: inset 1px 0 rgba(255, 255, 255, .2); }
.yt-citizen-courier { --yt-citizen-skin: #e3ad88; --yt-citizen-skin-shadow: #b97a5e; --yt-citizen-shirt: #dc9e38; --yt-citizen-shirt-dark: #a56729; --yt-citizen-pants: #41515c; }
.yt-citizen-courier .yt-citizen-head > i { left: -2px; right: 1px; height: 4px; background: #e7a633; }.yt-citizen-courier .yt-citizen-head > i::after { content: ""; position: absolute; right: -4px; bottom: 0; width: 6px; height: 2px; border-radius: 2px; background: #d29027; }
.yt-citizen-courier .yt-citizen-item { right: -4px; top: 23px; width: 8px; height: 7px; border-radius: 2px; background: #9d5f2d; }
.yt-citizen-designer { --yt-citizen-facing: -1; --yt-citizen-skin: #f0bf99; --yt-citizen-skin-shadow: #c78368; --yt-citizen-hair: #241f25; --yt-citizen-shirt: #725bb0; --yt-citizen-shirt-dark: #493a7c; --yt-citizen-pants: #303855; }
.yt-citizen-designer .yt-citizen-head > i { left: -2px; right: 1px; height: 8px; border-radius: 7px 6px 5px 2px; }
.yt-citizen-designer .yt-citizen-item { right: -2px; top: 16px; width: 5px; height: 8px; border: 1px solid #66e4db; border-radius: 1px; background: #173b49; box-shadow: 0 0 4px rgba(102, 228, 219, .5); }
.yt-citizen-visitor { --yt-citizen-skin: #895c47; --yt-citizen-skin-shadow: #624033; --yt-citizen-hair: #171e25; --yt-citizen-shirt: #33886d; --yt-citizen-shirt-dark: #225d4b; --yt-citizen-pants: #e4d6ba; --yt-citizen-shoes: #493c34; }
.yt-citizen-visitor .yt-citizen-head > i { left: -2px; right: -2px; height: 10px; border-radius: 7px 7px 5px 3px; }
.yt-citizen-visitor .yt-citizen-item { left: -3px; top: 18px; width: 7px; height: 11px; border-radius: 2px 2px 4px 4px; background: #bb7048; }
.yt-citizen-port { --yt-citizen-facing: -1; --yt-citizen-skin: #a66f53; --yt-citizen-skin-shadow: #754a3b; --yt-citizen-shirt: #bd5a42; --yt-citizen-shirt-dark: #803a32; --yt-citizen-pants: #27394a; }
.yt-citizen-port .yt-citizen-body::after { content: ""; position: absolute; left: 2px; right: 2px; top: 8px; height: 3px; background: #d9ef66; box-shadow: 0 0 3px rgba(217, 239, 102, .42); }
.yt-citizen-port .yt-citizen-item { right: -2px; top: 15px; width: 4px; height: 7px; border: 1px solid #8beadd; background: #173640; }
.yt-citizen-technician { --yt-citizen-skin: #d79872; --yt-citizen-skin-shadow: #a96851; --yt-citizen-shirt: #317a91; --yt-citizen-shirt-dark: #24536b; --yt-citizen-pants: #31404b; }
.yt-citizen-technician .yt-citizen-body::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 3px; height: 2px; background: #73e1d5; }.yt-citizen-technician .yt-citizen-item { right: -3px; top: 23px; width: 7px; height: 6px; border-radius: 1px; background: #39484b; box-shadow: inset 0 2px #e2a744; }
.yt-citizen-student { --yt-citizen-facing: 1; --yt-citizen-skin: #e2a982; --yt-citizen-skin-shadow: #b7775d; --yt-citizen-hair: #503533; --yt-citizen-shirt: #8a5ca9; --yt-citizen-shirt-dark: #5e3e7d; --yt-citizen-pants: #374665; }
.yt-citizen-student .yt-citizen-head::after { content: ""; position: absolute; z-index: 4; left: -2px; right: -2px; top: 4px; height: 5px; border: 2px solid #65d8d4; border-top: 0; border-bottom: 0; border-radius: 3px; }
.yt-citizen-inspector { --yt-citizen-facing: -1; --yt-citizen-skin: #a56b50; --yt-citizen-skin-shadow: #754536; --yt-citizen-hair: #232c31; --yt-citizen-shirt: #e9e5da; --yt-citizen-shirt-dark: #aaa99f; --yt-citizen-pants: #30434d; }
.yt-citizen-inspector .yt-citizen-head::before { content: ""; position: absolute; z-index: 5; left: -2px; top: -3px; width: 13px; height: 5px; border-radius: 7px 7px 2px 2px; background: #f2cb55; box-shadow: 0 1px #a87425; }.yt-citizen-inspector .yt-citizen-body::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 6px; border: 1px solid #3a7078; background: #d5f5ef; }.yt-citizen-inspector .yt-citizen-item { right: -4px; top: 18px; width: 7px; height: 11px; border: 1px solid #6e4d31; border-radius: 1px; background: #d7a75c; box-shadow: inset 0 2px rgba(255, 255, 255, .35); }
.yt-citizen-buyer { --yt-citizen-facing: 1; --yt-citizen-skin: #e3ab83; --yt-citizen-skin-shadow: #b9785d; --yt-citizen-hair: #49312d; --yt-citizen-shirt: #354f78; --yt-citizen-shirt-dark: #213551; --yt-citizen-pants: #252f41; }
.yt-citizen-buyer .yt-citizen-body::after { content: ""; position: absolute; left: 6px; top: 4px; width: 2px; height: 11px; background: #d7e1e3; box-shadow: -3px -1px 0 -1px #d7e1e3, 3px -1px 0 -1px #d7e1e3; }.yt-citizen-buyer .yt-citizen-item { right: -2px; top: 17px; width: 5px; height: 8px; border: 1px solid #65ddd3; border-radius: 1px; background: #142f3b; box-shadow: 0 0 5px rgba(101, 221, 211, .5); animation: yt-citizen-phone 2.6s ease-in-out infinite alternate; }.yt-citizen-buyer .yt-citizen-arms > i:last-child { animation: yt-citizen-check-phone 2.6s ease-in-out infinite alternate; }
.yt-citizen-photographer { --yt-citizen-facing: -1; --yt-citizen-skin: #80533f; --yt-citizen-skin-shadow: #59382e; --yt-citizen-hair: #141c23; --yt-citizen-shirt: #4a876a; --yt-citizen-shirt-dark: #2c5d49; --yt-citizen-pants: #37384a; }
.yt-citizen-photographer .yt-citizen-head > i { left: -2px; right: -2px; height: 8px; border-radius: 7px 7px 4px 3px; }.yt-citizen-photographer .yt-citizen-item { left: 4px; top: 20px; width: 12px; height: 8px; border: 2px solid #182b31; border-radius: 2px; background: radial-gradient(circle, #76e6dc 0 18%, #213f47 20% 45%, #111f24 47%); box-shadow: 0 0 4px rgba(92, 230, 218, .3); animation: yt-citizen-camera 5s ease-in-out infinite; }.yt-citizen-photographer .yt-citizen-arms > i:first-child { transform: rotate(-52deg); }.yt-citizen-photographer .yt-citizen-arms > i:last-child { transform: rotate(52deg); }
.yt-citizen-maintenance { --yt-citizen-facing: 1; --yt-citizen-skin: #d5936d; --yt-citizen-skin-shadow: #a6654e; --yt-citizen-hair: #273036; --yt-citizen-shirt: #2b8d88; --yt-citizen-shirt-dark: #17605f; --yt-citizen-pants: #364650; }
.yt-citizen-maintenance .yt-citizen-head::before { content: ""; position: absolute; z-index: 5; left: -2px; top: -3px; width: 13px; height: 5px; border-radius: 7px 7px 2px 2px; background: #eec449; box-shadow: 0 1px #9f7125; }.yt-citizen-maintenance .yt-citizen-body::after { content: ""; position: absolute; left: 2px; right: 2px; top: 8px; height: 3px; background: #d9ef66; box-shadow: 0 0 3px rgba(217, 239, 102, .45); }.yt-citizen-maintenance .yt-citizen-item { right: -5px; top: 20px; width: 3px; height: 13px; border-radius: 2px; background: #526166; transform: rotate(-25deg); }.yt-citizen-maintenance .yt-citizen-item::after { content: ""; position: absolute; left: -2px; top: -3px; width: 7px; height: 5px; border: 2px solid #526166; border-bottom: 0; border-radius: 5px 5px 0 0; }

.yt-citizen:not([data-crossing]) .yt-citizen-head { animation: yt-citizen-look 4.8s ease-in-out infinite alternate; }
.yt-citizen[data-crossing] { opacity: 0; animation: none; }
.yt-citizen[data-crossing-state="moving"] .yt-citizen-legs > i:first-child { animation: yt-citizen-leg .34s ease-in-out infinite alternate; }.yt-citizen[data-crossing-state="moving"] .yt-citizen-legs > i:last-child { animation: yt-citizen-leg .34s ease-in-out infinite alternate-reverse; }
.yt-citizen[data-crossing-state="moving"] .yt-citizen-arms > i:first-child { animation: yt-citizen-arm .34s ease-in-out infinite alternate-reverse; }.yt-citizen[data-crossing-state="moving"] .yt-citizen-arms > i:last-child { animation: yt-citizen-arm .34s ease-in-out infinite alternate; }
.yt-town-app[data-atmosphere="dusk"] .yt-citizen-figure,.yt-town-app[data-atmosphere="night"] .yt-citizen-figure { filter: drop-shadow(-1px 0 1px rgba(112, 255, 239, calc(var(--yt-lamp-glow) * .5))); }
.yt-town-app[data-city-activity="evening"] .yt-citizen:not([data-crossing]) { opacity: .88; }
.yt-town-app[data-traffic-phase="pedestrians"] .yt-citizen[data-crossing="a"] { animation: yt-cross-flow-a 3.7s .08s ease-in-out both; }.yt-town-app[data-traffic-phase="pedestrians"] .yt-citizen[data-crossing="b"] { animation: yt-cross-flow-b 3.85s .22s ease-in-out both; }.yt-town-app[data-traffic-phase="pedestrians"] .yt-citizen[data-crossing="c"] { animation: yt-cross-flow-c 3.65s .36s ease-in-out both; }.yt-town-app[data-traffic-phase="pedestrians"] .yt-citizen[data-crossing="d"] { animation: yt-cross-flow-d 3.8s .15s ease-in-out both; }
@keyframes yt-citizen-breathe { to { transform: translateY(-.8px) scaleY(1.015); } }
@keyframes yt-citizen-look { 0%, 58% { transform: rotate(0); } 72%, 100% { transform: rotate(4deg) translateX(1px); } }
@keyframes yt-citizen-phone { to { filter: brightness(1.45); box-shadow: 0 0 8px rgba(101, 221, 211, .78); transform: translateY(-1px); } }
@keyframes yt-citizen-check-phone { from { transform: rotate(-5deg); } to { transform: rotate(-42deg); } }
@keyframes yt-citizen-camera { 0%, 65%, 100% { filter: brightness(1); transform: translateY(0); } 70% { filter: brightness(2.1); transform: translateY(-1px); } }
@keyframes yt-citizen-leg { from { transform: rotate(17deg); } to { transform: rotate(-18deg); } }
@keyframes yt-citizen-arm { from { transform: rotate(21deg); } to { transform: rotate(-20deg); } }
@keyframes yt-cross-flow-a { 0% { opacity: 0; transform: translate(0, 0); } 8%, 88% { opacity: 1; } 100% { opacity: 0; transform: translate(112px, 76px); } }
@keyframes yt-cross-flow-b { 0% { opacity: 0; transform: translate(0, 0); } 8%, 88% { opacity: 1; } 100% { opacity: 0; transform: translate(-105px, 90px); } }
@keyframes yt-cross-flow-c { 0% { opacity: 0; transform: translate(0, 0); } 8%, 88% { opacity: 1; } 100% { opacity: 0; transform: translate(-158px, 67px); } }
@keyframes yt-cross-flow-d { 0% { opacity: 0; transform: translate(0, 0); } 8%, 88% { opacity: 1; } 100% { opacity: 0; transform: translate(86px, -62px); } }

.yt-town-enter-building { position: absolute; z-index: 66; right: calc(var(--yt-safe-right) + clamp(24px, 4vw, 48px)); bottom: calc(var(--yt-safe-bottom) + clamp(138px, 19vw, 172px)); display: grid; width: 102px; min-height: 58px; grid-template-columns: 35px 1fr; grid-template-rows: 1fr 1fr; gap: 0 6px; align-items: center; padding: 8px 10px; border: 2px solid rgba(255, 255, 255, .62); border-radius: 18px; color: rgba(255, 255, 255, .72); background: rgba(7, 31, 38, .72); box-shadow: 0 12px 28px rgba(5, 29, 32, .24); backdrop-filter: blur(10px); cursor: not-allowed; opacity: .8; touch-action: manipulation; }
.yt-town-enter-building > span { position: relative; grid-row: 1 / 3; display: block; width: 32px; height: 38px; border: 3px solid currentColor; border-bottom-width: 5px; border-radius: 9px 9px 3px 3px; }
.yt-town-enter-building > span::before { content: ""; position: absolute; left: 7px; top: 7px; width: 12px; height: 18px; border: 2px solid currentColor; border-bottom: 0; }
.yt-town-enter-building > span i { position: absolute; right: 4px; top: 18px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.yt-town-enter-building strong { align-self: end; font-size: .82rem; font-weight: 1000; }
.yt-town-enter-building small { align-self: start; overflow: hidden; font-size: .45rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-enter-building.is-ready { border-color: #8effef; color: #062e34; background: linear-gradient(145deg, #86fff0, #37c8bb); box-shadow: 0 0 0 5px rgba(76, 240, 221, .14), 0 14px 32px rgba(4, 32, 37, .31); cursor: pointer; opacity: 1; animation: yt-enter-ready 1s ease-in-out infinite alternate; }
.yt-town-enter-building.is-ready:active { transform: scale(.96); }
@keyframes yt-enter-ready { to { filter: drop-shadow(0 0 12px rgba(112, 255, 238, .68)); } }

.yt-town-interior { position: absolute; z-index: 69; inset: 0; overflow: hidden; color: #fff; background: #071d26; isolation: isolate; touch-action: none; }
.yt-town-interior::before { content: ""; position: absolute; z-index: 20; inset: 0; border: 1px solid rgba(130, 255, 240, .22); box-shadow: inset 0 0 90px rgba(0, 0, 0, .38); pointer-events: none; }
.yt-town-interior-header { position: absolute; z-index: 25; left: calc(var(--yt-safe-left) + 14px); right: calc(var(--yt-safe-right) + 14px); top: 12px; display: grid; min-height: 56px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 9px 8px 14px; border: 1px solid rgba(148, 255, 242, .46); border-radius: 17px; background: rgba(5, 27, 36, .82); box-shadow: 0 14px 35px rgba(0, 0, 0, .25); backdrop-filter: blur(14px); }
.yt-town-interior-header > div:first-child { min-width: 0; }
.yt-town-interior-header > div:first-child span { display: block; color: #78f2e3; font: 1000 .48rem/1 Arial, sans-serif; letter-spacing: .17em; }
.yt-town-interior-header h2 { overflow: hidden; margin: 3px 0 0; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-interior-presence { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; color: #b9d6d4; background: rgba(255, 255, 255, .06); font: 900 .47rem/1 Arial, sans-serif; letter-spacing: .1em; }
.yt-town-interior-presence i { width: 7px; height: 7px; border-radius: 50%; background: #748f90; box-shadow: none; }
.yt-town-interior-presence[data-state="live"] { border-color: rgba(100, 245, 203, .42); color: #dffff6; background: rgba(52, 176, 147, .1); }
.yt-town-interior-presence[data-state="live"] i { background: #64f5cb; box-shadow: 0 0 9px #64f5cb; animation: yt-data-node 1.2s ease-in-out infinite alternate; }
.yt-town-interior-header .yt-town-interior-presence { min-height: 32px; padding: 6px 8px; border-radius: 99px; font: 900 .47rem/1 Arial, sans-serif; letter-spacing: .1em; appearance: none; }
.yt-town-interior-header .yt-town-interior-presence > span { font-size: inherit; }
.yt-town-interior-header button { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 11px; color: #fff; background: rgba(255, 255, 255, .09); font-size: .66rem; cursor: pointer; touch-action: manipulation; }
.yt-town-interior-header button > span { font-size: 1rem; }.yt-town-interior-header button strong { white-space: nowrap; }
.yt-town-interior-stage { position: absolute; inset: 0; overflow: hidden; perspective: 900px; }
.yt-town-room { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 12%, rgba(113, 240, 226, .13), transparent 28%), linear-gradient(180deg, #123744 0 58%, #091f28 59%); }
.yt-town-room::before { content: ""; position: absolute; z-index: 1; left: -8%; right: -8%; bottom: -28%; height: 68%; background: repeating-linear-gradient(90deg, rgba(125, 227, 220, .09) 0 2px, transparent 2px 100px), repeating-linear-gradient(0deg, rgba(125, 227, 220, .09) 0 2px, transparent 2px 78px), linear-gradient(145deg, #153d47, #0a2730); transform: rotateX(58deg); transform-origin: 50% 100%; }
.yt-town-room::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 39%; height: 2px; background: linear-gradient(90deg, transparent, rgba(116, 255, 238, .38), transparent); box-shadow: 0 0 20px rgba(85, 241, 224, .28); }
.yt-town-room-ceiling { position: absolute; z-index: 3; inset: 0 0 auto; height: 35%; background: linear-gradient(180deg, rgba(2, 16, 22, .64), transparent); pointer-events: none; }
.yt-town-room-ceiling i { position: absolute; top: 0; width: 3px; height: 170px; background: linear-gradient(#7efbea, transparent); opacity: .54; transform: rotate(34deg); transform-origin: top; }.yt-town-room-ceiling i:nth-child(1) { left: 18%; }.yt-town-room-ceiling i:nth-child(2) { left: 50%; height: 230px; }.yt-town-room-ceiling i:nth-child(3) { right: 18%; transform: rotate(-34deg); }
.yt-town-room-backwall,
.yt-town-room-design-wall,
.yt-town-room-command-wall { position: absolute; z-index: 4; left: 50%; top: 20%; width: min(68%, 760px); height: 27%; border: 1px solid rgba(147, 255, 243, .28); background: rgba(7, 31, 40, .63); box-shadow: 0 0 30px rgba(39, 214, 200, .08), inset 0 0 30px rgba(44, 210, 195, .04); transform: translateX(-50%); }
.yt-town-room-backwall > span,
.yt-town-room-design-wall > span,
.yt-town-room-command-wall > span { position: absolute; left: 18px; top: 14px; color: #7efbea; font: 1000 .62rem/1 Arial, sans-serif; letter-spacing: .18em; }
.yt-town-room-backwall i { position: absolute; left: 7%; bottom: 12%; width: 24%; height: 46%; border: 4px solid #4b6970; background: repeating-linear-gradient(0deg, #263f47 0 8px, #49616a 9px 12px); box-shadow: 240px 0 0 -3px #1a343d, 240px 0 0 1px #4b6970; }
.yt-town-room-machine { position: absolute; z-index: 8; left: 15%; bottom: 24%; width: 160px; height: 190px; border: 5px solid #516b70; border-radius: 10px 10px 4px 4px; background: linear-gradient(110deg, #1b3b44, #315864); box-shadow: 17px 20px 20px rgba(0, 0, 0, .28), inset 8px 0 rgba(255, 255, 255, .04); }
.yt-town-room-machine > span { position: absolute; left: 20px; right: 20px; top: 24px; height: 96px; border: 4px solid #66828a; background: radial-gradient(circle, rgba(91, 255, 235, .34), transparent 48%), #071f2b; box-shadow: inset 0 0 24px rgba(90, 244, 226, .16); }
.yt-town-room-machine > span i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border: 3px dashed #6af3e2; border-radius: 50%; transform: translate(-50%, -50%); animation: yt-room-rotate-centered 8s linear infinite; }
.yt-town-room-machine b { position: absolute; left: 20px; bottom: 25px; color: #8ffbed; font: 1000 10px/1 Arial, sans-serif; letter-spacing: .13em; }
.yt-town-room-workbench { position: absolute; z-index: 8; left: 40%; right: 12%; bottom: 22%; height: 88px; border-top: 10px solid #a17a4b; background: linear-gradient(90deg, transparent 8%, #324b50 8% 11%, transparent 11% 88%, #324b50 88% 91%, transparent 91%); box-shadow: 0 -4px rgba(222, 181, 109, .28), 14px 20px 19px rgba(0, 0, 0, .22); }
.yt-town-room-workbench i { position: absolute; left: 12%; top: -50px; width: 75px; height: 44px; border: 4px solid #49656c; background: linear-gradient(145deg, #163743, #0b2029); }.yt-town-room-workbench i:nth-child(2) { left: 48%; width: 92px; }
.yt-town-room-workbench b { position: absolute; right: 12%; top: -40px; width: 55px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #12262c 0 20%, #b6a373 22% 41%, #36494c 43% 48%, #c1ae7d 50%); }
.yt-town-room-part { position: absolute; z-index: 9; left: 57%; bottom: 32%; width: 75px; height: 75px; border: 4px solid rgba(144, 255, 242, .65); border-radius: 50%; box-shadow: 0 0 28px rgba(95, 242, 225, .27); animation: yt-room-float 2.8s ease-in-out infinite alternate; }
.yt-town-room-part i { position: absolute; inset: 12px; border: 9px solid #9c8d64; border-radius: 50%; }.yt-town-room-part b { position: absolute; inset: -18px; border: 2px dashed rgba(122, 255, 239, .55); border-radius: 50%; animation: yt-room-rotate 9s linear infinite reverse; }

.yt-town-room-panorama { position: absolute; z-index: 3; left: 5%; right: 5%; top: 10%; height: 37%; overflow: hidden; border: 7px solid #284a56; border-radius: 4px; background: linear-gradient(180deg, #4c8497, #153e56 68%, #183440); box-shadow: inset 0 0 45px rgba(4, 21, 31, .45); }
.yt-town-room-panorama::after { content: "CITY / LIVE"; position: absolute; right: 12px; top: 10px; color: #8ffbed; font: 1000 8px/1 Arial, sans-serif; letter-spacing: .16em; }
.yt-town-room-panorama i { position: absolute; bottom: 0; width: 18%; background: repeating-linear-gradient(0deg, rgba(255, 213, 94, .52) 0 4px, transparent 5px 14px), #163742; }.yt-town-room-panorama i:nth-child(1) { left: 6%; height: 62%; }.yt-town-room-panorama i:nth-child(2) { left: 39%; height: 85%; }.yt-town-room-panorama i:nth-child(3) { right: 8%; height: 70%; }
.yt-town-room-design-wall { left: 24%; top: 20%; width: 30%; height: 24%; transform: none; }
.yt-town-room-design-wall i { position: absolute; left: 9%; bottom: 11%; width: 36%; height: 48%; border: 2px solid #55d9d0; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(93, 238, 224, .22) 13px), repeating-linear-gradient(90deg, transparent 0 12px, rgba(93, 238, 224, .22) 13px); }.yt-town-room-design-wall i:nth-child(3) { left: 54%; }
.yt-town-room-hologram { position: absolute; z-index: 9; left: 50%; bottom: 25%; width: 200px; height: 175px; transform: translateX(-50%); }
.yt-town-room-hologram::before { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 34px; border: 3px solid #68e6db; border-radius: 50%; background: radial-gradient(ellipse, rgba(84, 246, 225, .25), transparent 65%); box-shadow: 0 0 28px rgba(72, 238, 219, .34); }
.yt-town-room-hologram i { position: absolute; left: 50%; top: 12px; width: 92px; height: 108px; border: 5px solid rgba(112, 255, 238, .76); border-radius: 42% 45% 24% 35%; clip-path: polygon(14% 0, 83% 8%, 100% 79%, 67% 100%, 0 83%); box-shadow: inset 0 0 26px rgba(83, 245, 226, .2), 0 0 25px rgba(83, 245, 226, .24); transform: translateX(-50%) rotate(-8deg); animation: yt-room-hologram 5s ease-in-out infinite alternate; }
.yt-town-room-hologram b { position: absolute; left: 50%; top: 5px; width: 130px; height: 130px; border: 2px dashed rgba(120, 255, 240, .43); border-radius: 50%; transform: translateX(-50%) rotateX(64deg); animation: yt-room-rotate-flat 8s linear infinite; }.yt-town-room-hologram em { position: absolute; left: 50%; bottom: -7px; color: #a4fff4; font: 1000 8px/1 Arial, sans-serif; letter-spacing: .12em; white-space: nowrap; transform: translateX(-50%); }
.yt-town-room-desk { position: absolute; z-index: 7; left: 14%; right: 14%; bottom: 17%; height: 64px; border-top: 9px solid #66777c; background: linear-gradient(90deg, transparent 9%, #30474f 9% 12%, transparent 12% 88%, #30474f 88% 91%, transparent 91%); box-shadow: 12px 18px 18px rgba(0, 0, 0, .22); }.yt-town-room-desk i,.yt-town-room-desk b { position: absolute; top: -52px; width: 105px; height: 45px; border: 3px solid #4c6d75; background: linear-gradient(150deg, #1f596a, #09232c); }.yt-town-room-desk i { left: 5%; }.yt-town-room-desk b { right: 5%; }

.yt-town-room-port-window { position: absolute; z-index: 3; left: 4%; right: 4%; top: 10%; height: 39%; overflow: hidden; border: 8px solid #314c5b; background: repeating-linear-gradient(170deg, #2a7790 0 25px, #348ba0 26px 28px); box-shadow: inset 0 0 55px rgba(2, 24, 38, .35); }
.yt-town-room-port-window::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: repeating-linear-gradient(90deg, #a35842 0 70px, #28788b 71px 135px, #d1963e 136px 205px); box-shadow: 0 -8px #8e7148; }.yt-town-room-port-window::after { content: ""; position: absolute; left: 20%; top: 0; width: 7px; height: 100%; background: #314c5b; box-shadow: 300px 0 #314c5b, 610px 0 #314c5b; }
.yt-town-room-port-window i { position: absolute; z-index: 2; left: 12%; top: 18%; width: 125px; height: 38px; border-radius: 5px 13px 25px 18px; background: #e5dfcf; box-shadow: 0 8px rgba(10, 45, 56, .24); }.yt-town-room-port-window i:nth-child(2) { left: auto; right: 12%; top: 30%; transform: scale(.72); }.yt-town-room-port-window b { position: absolute; z-index: 2; left: 46%; bottom: 16%; width: 13px; height: 120px; background: #dda43a; box-shadow: 64px 0 #dda43a; }.yt-town-room-port-window em { position: absolute; z-index: 2; left: 42%; bottom: 45%; width: 135px; height: 10px; background: #dda43a; }
.yt-town-room-command-wall { left: 8%; top: 20%; width: 28%; height: 25%; transform: none; }.yt-town-room-command-wall i { position: absolute; left: 8%; bottom: 10%; width: 23%; height: 44%; border: 2px solid #62e6db; background: linear-gradient(160deg, rgba(80, 237, 221, .3), transparent); }.yt-town-room-command-wall i:nth-child(3) { left: 38%; }.yt-town-room-command-wall i:nth-child(4) { left: 68%; }
.yt-town-room-map-table { position: absolute; z-index: 9; left: 50%; bottom: 22%; width: 300px; height: 120px; border: 6px solid #526c72; border-radius: 50%; background: radial-gradient(circle at 36% 44%, rgba(102, 255, 237, .65) 0 4px, transparent 5px), radial-gradient(circle at 65% 37%, rgba(255, 200, 87, .8) 0 4px, transparent 5px), linear-gradient(145deg, #174e5d, #092931); box-shadow: 0 0 34px rgba(73, 237, 220, .25), 18px 23px 22px rgba(0, 0, 0, .3); transform: translateX(-50%) rotateX(52deg); }
.yt-town-room-map-table::before { content: ""; position: absolute; inset: 14px; border: 2px dashed rgba(116, 255, 239, .58); border-radius: 50%; animation: yt-room-rotate 10s linear infinite; }.yt-town-room-map-table i { position: absolute; left: 31%; top: 32%; width: 36%; height: 36%; border: 2px solid rgba(117, 255, 239, .55); border-radius: 50%; }.yt-town-room-map-table b,.yt-town-room-map-table em { position: absolute; bottom: -90px; width: 17px; height: 95px; background: #425b61; }.yt-town-room-map-table b { left: 25%; }.yt-town-room-map-table em { right: 25%; }

.yt-town-room-hotspot { position: absolute; z-index: 14; display: grid; min-width: 148px; grid-template-columns: 27px 1fr; gap: 0 7px; align-items: center; padding: 8px 10px; border: 1px solid rgba(143, 255, 242, .57); border-radius: 12px; color: #fff; background: rgba(5, 30, 39, .77); box-shadow: 0 11px 25px rgba(0, 0, 0, .24), inset 0 0 18px rgba(74, 238, 220, .04); text-align: left; backdrop-filter: blur(9px); cursor: pointer; touch-action: manipulation; }
.yt-town-room-hotspot > i { position: relative; grid-row: 1 / 3; width: 25px; height: 25px; border: 2px solid #78f2e3; border-radius: 50%; box-shadow: 0 0 10px rgba(91, 246, 228, .32); }.yt-town-room-hotspot > i::before,.yt-town-room-hotspot > i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: #78f2e3; transform: translate(-50%, -50%); }.yt-town-room-hotspot > i::after { transform: translate(-50%, -50%) rotate(90deg); }
.yt-town-room-hotspot strong { align-self: end; font-size: .64rem; }.yt-town-room-hotspot small { align-self: start; color: #9bc6c3; font-size: .45rem; }
.yt-town-room-hotspot:active,.yt-town-room-hotspot.is-inspected { border-color: var(--yt-amber); color: var(--yt-amber); background: rgba(11, 65, 69, .94); transform: scale(.97); }
.yt-town-room-hotspot-a { left: 7%; bottom: 14%; }.yt-town-room-hotspot-b { right: 7%; bottom: 14%; }.yt-town-room-hotspot-c { left: 50%; bottom: 31%; transform: translateX(-50%); }
.yt-town-room-hotspot[data-exhibit-kind="product"] > i { border-radius: 7px; }
.yt-town-room-hotspot[data-exhibit-kind="service"] { border-color: rgba(255, 216, 112, .58); }.yt-town-room-hotspot[data-exhibit-kind="service"] > i { border-color: #ffdf7d; box-shadow: 0 0 10px rgba(255, 213, 93, .3); }.yt-town-room-hotspot[data-exhibit-kind="service"] > i::before,.yt-town-room-hotspot[data-exhibit-kind="service"] > i::after { background: #ffdf7d; }
.yt-town-room-hotspot[data-exhibit-kind="event"] { border-color: rgba(181, 176, 255, .58); }.yt-town-room-hotspot[data-exhibit-kind="event"] > i { border-color: #c6c2ff; border-radius: 6px; box-shadow: 0 0 10px rgba(177, 171, 255, .32); transform: rotate(45deg); }.yt-town-room-hotspot[data-exhibit-kind="event"] > i::before,.yt-town-room-hotspot[data-exhibit-kind="event"] > i::after { background: #c6c2ff; }

.yt-town-interior-guide { position: absolute; z-index: 18; left: 50%; bottom: calc(var(--yt-safe-bottom) + 18px); display: grid; width: min(650px, calc(100% - 30px)); min-height: 86px; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px 11px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 20px; color: #fff; background: rgba(5, 27, 36, .9); box-shadow: 0 20px 48px rgba(0, 0, 0, .34); backdrop-filter: blur(16px); transform: translateX(-50%); }
.yt-town-interior-guide-avatar { position: relative; display: block; width: 58px; height: 58px; overflow: hidden; border: 3px solid rgba(255, 255, 255, .95); border-radius: 18px 18px 18px 5px; background: radial-gradient(circle at 38% 18%, rgba(255, 255, 255, .25), transparent 28%), linear-gradient(145deg, #42b7b2, #154f61); box-shadow: inset 0 0 18px rgba(4, 24, 32, .28), 0 6px 14px rgba(0, 0, 0, .18); }
.yt-town-interior-guide-avatar::before { content: ""; position: absolute; z-index: 3; left: 18px; top: 9px; width: 22px; height: 25px; border: 2px solid rgba(255, 255, 255, .9); border-radius: 48% 48% 44% 44%; background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, .36), transparent 23%), linear-gradient(120deg, #e2aa82, #b97559); box-shadow: inset -2px -1px rgba(94, 46, 37, .12); }
.yt-town-interior-guide-avatar::after { content: ""; position: absolute; z-index: 6; left: 23px; top: 21px; width: 2px; height: 2px; border-radius: 50%; background: #302a29; box-shadow: 8px 0 #302a29, 4px 6px 0 -1px #8b4c46; }
.yt-town-interior-guide-avatar i { position: absolute; z-index: 5; left: 16px; top: 5px; width: 28px; height: 14px; border-radius: 14px 14px 4px 5px; background: linear-gradient(110deg, #12323d, #061f29); box-shadow: inset 3px 2px rgba(255, 255, 255, .1); }
.yt-town-interior-guide-avatar b { position: absolute; z-index: 2; left: 9px; bottom: -10px; width: 40px; height: 35px; border: 3px solid rgba(255, 255, 255, .94); border-radius: 15px 15px 5px 5px; background: linear-gradient(105deg, rgba(255, 255, 255, .2), transparent 30%), linear-gradient(90deg, var(--yt-coral), #bd5045); }
.yt-town-interior-guide-avatar b::before { content: ""; position: absolute; left: 50%; top: 1px; width: 11px; height: 8px; border-right: 2px solid rgba(255, 255, 255, .78); border-bottom: 2px solid rgba(255, 255, 255, .6); transform: translateX(-50%) rotate(45deg); }
.yt-town-interior-guide-avatar b::after { content: "YT"; position: absolute; right: 4px; bottom: 11px; padding: 2px; border-radius: 2px; color: #092d34; background: #7af5e6; font: 1000 4px/1 Arial, sans-serif; letter-spacing: .05em; }
.yt-town-interior-guide > div { min-width: 0; }.yt-town-interior-guide > div small { display: block; color: #7af5e6; font: 1000 .46rem/1 Arial, sans-serif; letter-spacing: .15em; }.yt-town-interior-guide > div strong { display: block; margin-top: 3px; font-size: .78rem; }.yt-town-interior-guide > div p { overflow: hidden; margin: 4px 0 0; color: #bad3d1; font-size: .58rem; line-height: 1.45; text-overflow: ellipsis; }
.yt-town-interior-guide > button { display: grid; min-width: 132px; min-height: 60px; grid-template-columns: 30px 1fr; grid-template-rows: 1fr 1fr; gap: 0 7px; align-items: center; padding: 8px 10px; border: 2px solid #fff; border-radius: 14px; color: #092d34; background: var(--yt-amber); box-shadow: 0 8px 20px rgba(255, 195, 65, .18); text-align: left; cursor: pointer; touch-action: manipulation; }.yt-town-interior-guide > button > span { grid-row: 1 / 3; font: 1000 1rem/1 Arial, sans-serif; }.yt-town-interior-guide > button strong { align-self: end; font-size: .66rem; }.yt-town-interior-guide > button small { align-self: start; font-size: .46rem; font-weight: 900; }
.yt-town-interior-guide > button:active { transform: scale(.97); }
.yt-town-app[data-interior="repair"] .yt-town-interior-guide-avatar { background: radial-gradient(circle at 38% 18%, rgba(255, 255, 255, .24), transparent 28%), linear-gradient(145deg, #ef806a, #943a35); }.yt-town-app[data-interior="repair"] .yt-town-interior-guide-avatar b { background: linear-gradient(90deg, #e66e55, #a83e38); }
.yt-town-app[data-interior="design"] .yt-town-interior-guide-avatar { background: radial-gradient(circle at 38% 18%, rgba(255, 255, 255, .24), transparent 28%), linear-gradient(145deg, #54d4cd, #1c6376); }.yt-town-app[data-interior="design"] .yt-town-interior-guide-avatar b { background: linear-gradient(90deg, #2e8ea0, #175b6c); }
.yt-town-app[data-interior="global"] .yt-town-interior-guide-avatar { background: radial-gradient(circle at 38% 18%, rgba(255, 255, 255, .24), transparent 28%), linear-gradient(145deg, #9694e4, #413d83); }.yt-town-app[data-interior="global"] .yt-town-interior-guide-avatar b { background: linear-gradient(90deg, #696bb8, #41427f); }
.yt-town-app.is-interior .yt-town-joystick,
.yt-town-app.is-interior .yt-town-talk,
.yt-town-app.is-interior .yt-town-enter-building,
.yt-town-app.is-interior .yt-town-social-dock,
.yt-town-app.is-interior .yt-town-avatar-palette,
.yt-town-app.is-interior .yt-town-zone-toast,
.yt-town-app.is-interior .yt-town-guide,
.yt-town-app.is-interior .yt-town-destination-dock,
.yt-town-app.is-interior .yt-town-route-guide,
.yt-town-app.is-interior .yt-town-ambience { display: none; }
@keyframes yt-room-rotate { to { transform: rotate(360deg); } }
@keyframes yt-room-rotate-centered { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes yt-room-rotate-flat { to { transform: translateX(-50%) rotateX(64deg) rotateZ(360deg); } }
@keyframes yt-room-float { to { transform: translateY(-10px) rotate(5deg); } }
@keyframes yt-room-hologram { to { transform: translateX(-50%) rotate(7deg) translateY(-8px); } }

.yt-town-icon-button:focus-visible,
.yt-town-exit:focus-visible,
.yt-building:focus-visible,
.yt-town-destination-dock button:focus-visible,
.yt-town-route-guide button:focus-visible,
.yt-town-joystick:focus-visible,
.yt-town-talk:focus-visible,
.yt-town-enter-building:focus-visible,
.yt-town-social-dock button:focus-visible,
.yt-town-avatar-palette button:focus-visible,
.yt-town-map-panel button:focus-visible,
.yt-town-goal-panel button:focus-visible,
.yt-town-interior button:focus-visible,
.yt-town-guide button:focus-visible,
.yt-town-help-panel button:focus-visible,
.yt-town-modal button:focus-visible,
.yt-town-modal a:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--yt-teal);
}
.yt-town-viewport:focus-visible { box-shadow: inset 0 0 0 4px var(--yt-amber); }
.yt-town-app.is-transitioning .yt-town-topbar { pointer-events: none; }

@media (max-width: 760px) {
  .yt-town-topbar {
    grid-template-columns: minmax(94px, .65fr) minmax(160px, 1.35fr) auto;
    gap: 7px;
    min-height: calc(78px + var(--yt-safe-top));
    padding-left: calc(9px + var(--yt-safe-left));
    padding-right: calc(9px + var(--yt-safe-right));
  }
  .yt-town-monogram { width: 38px; height: 38px; border-radius: 11px 11px 11px 4px; font-size: 1.2rem; }
  .yt-town-identity { gap: 7px; }
  .yt-town-identity p { display: none; }
  .yt-town-identity h1 { max-width: 94px; font-size: .78rem; line-height: 1.2; white-space: normal; }
  .yt-town-mission { gap: 4px 8px; padding: 7px 8px; border-radius: 12px; }
  .yt-town-mission-copy span { font-size: .48rem; }
  .yt-town-mission-copy strong { font-size: .67rem; }
  .yt-town-mission-copy small { display: none; }
  .yt-town-mission-steps { gap: 4px; margin-top: 0; }
  .yt-town-mission-steps::before { left: 15%; right: 15%; top: 5px; }
  .yt-town-mission-steps li { justify-content: center !important; }
  .yt-town-mission-steps li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .yt-town-mission-steps i { width: 11px; height: 11px; flex-basis: 11px; border-width: 1px; }
  .yt-town-progress { min-width: 50px; }
  .yt-town-progress > strong { font-size: .87rem; }
  .yt-town-progress-track { width: 50px; }
  .yt-town-exit { display: none; }
  .yt-town-icon-button { width: 36px; height: 36px; border-radius: 10px; }
  .yt-town-top-actions { gap: 5px; }
  .yt-town-ambience { left: calc(var(--yt-safe-left) + 10px); top: 103px; min-width: 118px; min-height: 44px; grid-template-columns: 28px auto; gap: 6px; padding: 6px 8px; border-radius: 14px; transform: scale(.9); transform-origin: 0 0; }
  .yt-town-app.has-destination .yt-town-ambience { top: 76px; }
  .yt-town-ambience-icon { width: 23px; height: 23px; }
  .yt-town-ambience-icon::before { top: -4px; height: 31px; }.yt-town-ambience-icon::after { left: -4px; width: 31px; }
  .yt-town-ambience-state { display: none; }
  .yt-town-destination-dock { top: 10px; grid-template-columns: 1fr; gap: 5px; width: min(390px, calc(100% - 20px)); padding: 6px; border-radius: 17px; }
  .yt-town-destination-heading { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 7px; padding: 0 4px; }
  .yt-town-destination-heading > span { display: none; }
  .yt-town-destination-heading > strong { font-size: .68rem; }
  .yt-town-destination-heading > small { margin: 0 0 0 auto; font-size: .5rem; }
  .yt-town-destination-list { gap: 5px; }
  .yt-town-destination-list button { min-height: 51px; grid-template-columns: 28px minmax(0, 1fr); gap: 5px; padding: 5px 6px; border-radius: 11px; }
  .yt-town-destination-number { width: 27px; height: 30px; border-radius: 8px 8px 8px 3px; font-size: .56rem; }
  .yt-town-destination-list strong { padding-right: 0; font-size: .6rem; }
  .yt-town-destination-list small { font-size: .48rem; }
  .yt-town-destination-list button.is-recommended::after { display: none; }
  .yt-town-route-guide { top: 10px; width: min(380px, calc(100% - 20px)); min-height: 57px; grid-template-columns: 37px minmax(0, 1fr) 44px; }
  .yt-town-route-arrow { width: 36px; height: 36px; font-size: 1.2rem; }
  .yt-town-route-guide button { width: 42px; height: 39px; }
  .yt-town-joystick { width: clamp(118px, 33vw, 138px); height: clamp(118px, 33vw, 138px); }
  .yt-town-talk { width: clamp(104px, 29vw, 118px); height: clamp(104px, 29vw, 118px); }
  .yt-town-enter-building { right: calc(var(--yt-safe-right) + 19px); bottom: calc(var(--yt-safe-bottom) + 140px); width: 96px; min-height: 55px; border-radius: 16px; }
  .yt-town-social-dock { grid-template-columns: repeat(2, 48px); gap: 4px; padding: 4px; border-radius: 16px; }
  .yt-town-social-dock button { height: 43px; border-radius: 11px; }
  .yt-town-social-dock #town-sound-toggle { width: 48px; }
  .yt-town-avatar-palette { bottom: calc(var(--yt-safe-bottom) + 77px); }
  .yt-town-zone-toast { bottom: calc(var(--yt-safe-bottom) + 84px); }
  .yt-town-guide { bottom: calc(var(--yt-safe-bottom) + 214px); width: min(360px, calc(100% - 24px)); min-height: 68px; grid-template-columns: 42px minmax(0, 1fr) 27px; gap: 8px; padding: 8px; border-radius: 16px 16px 16px 5px; }
  .yt-town-guide-mark { width: 40px; height: 40px; border-radius: 12px 12px 12px 4px; }
  .yt-town-guide > div strong { font-size: .68rem; }.yt-town-guide > div p { display: -webkit-box; max-height: 2.8em; font-size: .51rem; text-overflow: clip; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .yt-town-map-panel { width: min(560px, calc(100% - 18px)); padding: 16px; border-radius: 21px; }
  .yt-town-goal-panel { width: min(620px, calc(100% - 18px)); max-height: calc(100% - 18px); padding: 16px; border-radius: 21px; }
  .yt-town-interior-header { left: calc(var(--yt-safe-left) + 9px); right: calc(var(--yt-safe-right) + 9px); top: 9px; min-height: 52px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; padding: 6px 7px 6px 11px; border-radius: 14px; }
  .yt-town-interior-header h2 { font-size: .82rem; }
  .yt-town-interior-header button { min-height: 38px; padding: 6px 9px; }
  .yt-town-room-backwall,
  .yt-town-room-design-wall,
  .yt-town-room-command-wall { top: 18%; }
  .yt-town-room-machine { left: 7%; bottom: 29%; transform: scale(.82); transform-origin: 0 100%; }
  .yt-town-room-workbench { left: 32%; right: 5%; bottom: 27%; }
  .yt-town-room-part { left: 61%; bottom: 38%; width: 64px; height: 64px; }
  .yt-town-room-hologram { bottom: 30%; transform: translateX(-50%) scale(.82); transform-origin: 50% 100%; }
  .yt-town-room-desk { left: 5%; right: 5%; bottom: 22%; }
  .yt-town-room-map-table { bottom: 27%; width: 270px; transform: translateX(-50%) rotateX(52deg) scale(.86); }
  .yt-town-room-hotspot { min-width: 142px; padding: 7px 8px; }
  .yt-town-room-hotspot-a { left: 4%; bottom: calc(var(--yt-safe-bottom) + 116px); }
  .yt-town-room-hotspot-b { right: 4%; bottom: calc(var(--yt-safe-bottom) + 116px); }
  .yt-town-interior-guide { bottom: calc(var(--yt-safe-bottom) + 9px); width: calc(100% - 18px); min-height: 78px; grid-template-columns: 50px minmax(0, 1fr) 116px; gap: 8px; padding: 8px; border-radius: 17px; }
  .yt-town-interior-guide-avatar { width: 48px; height: 48px; border-width: 2px; border-radius: 15px 15px 15px 5px; transform: scale(.84); transform-origin: 0 50%; }
  .yt-town-interior-guide > div p { max-height: 2.9em; }
  .yt-town-interior-guide > button { min-width: 116px; min-height: 56px; grid-template-columns: 24px 1fr; gap: 0 5px; padding: 7px; }
  .yt-town-interior-guide > button > span { font-size: .8rem; }
  .yt-town-interior-guide > button strong { font-size: .59rem; }
  .yt-town-mini-map { border-width: 4px; border-radius: 15px; }
  .yt-town-mini-map button { min-width: 76px; }
  .yt-town-mini-map button i { width: 35px; height: 35px; }
  .yt-town-mini-map button span { font-size: .49rem; }
  .yt-town-lighting-control { grid-template-columns: minmax(98px, .65fr) minmax(190px, 1.35fr); gap: 7px; margin-top: 9px; padding: 7px; }
  .yt-town-lighting-control button { min-height: 36px; }
  .yt-town-dialog-card { grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; padding: 22px 17px 18px; border-radius: 22px; }
  .yt-town-dialog-portrait { width: 60px; height: 60px; border-width: 4px; border-radius: 18px 18px 18px 6px; }
  .yt-town-dialog-portrait::before { left: 17px; top: 11px; width: 25px; height: 25px; }
  .yt-town-dialog-portrait i { left: 15px; top: 7px; width: 30px; }
  .yt-town-dialog-portrait b { left: 8px; width: 44px; }
  .yt-town-dialog-heading h2 { font-size: 1.35rem; }
  .yt-town-dialog-copy { margin-top: 18px; font-size: .78rem; }
  .yt-town-dialog-card ul { grid-template-columns: 1fr; gap: 6px; }
  .yt-town-dialog-card li { min-height: auto; }
  .yt-town-dialog-actions,
  .yt-town-complete-actions { grid-template-columns: 1fr; }
}

@media (max-width: 480px) and (orientation: portrait) {
  .yt-town-topbar { grid-template-columns: 39px minmax(0, 1fr) auto; }
  .yt-town-identity { gap: 0; }
  .yt-town-identity h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .yt-town-mission { padding-left: 7px; padding-right: 7px; }
  .yt-town-guide { bottom: calc(var(--yt-safe-bottom) + 214px); }
  .yt-town-progress { min-width: 44px; }
  .yt-town-progress-track { width: 44px; }
  .yt-town-modal { align-items: end; padding: calc(10px + var(--yt-safe-top)) calc(8px + var(--yt-safe-right)) calc(8px + var(--yt-safe-bottom)) calc(8px + var(--yt-safe-left)); }
  .yt-town-dialog-card,
  .yt-town-complete-card { max-height: calc(100dvh - 18px - var(--yt-safe-top) - var(--yt-safe-bottom)); border-radius: 23px; }
  .yt-town-talk { right: calc(var(--yt-safe-right) + 15px); bottom: calc(var(--yt-safe-bottom) + 17px); }
  .yt-town-enter-building { right: calc(var(--yt-safe-right) + 21px); bottom: calc(var(--yt-safe-bottom) + 143px); }
  .yt-town-joystick { left: calc(var(--yt-safe-left) + 13px); bottom: calc(var(--yt-safe-bottom) + 14px); }
  .yt-town-interior-presence { display: none; }
  .yt-town-interior-header { grid-template-columns: minmax(0, 1fr) auto; }
  .yt-town-interior-guide { grid-template-columns: 44px minmax(0, 1fr) 108px; gap: 6px; padding: 7px; }
  .yt-town-interior-guide-avatar { margin-left: -3px; transform: scale(.76); }
  .yt-town-interior-guide > button { min-width: 108px; }
  .yt-town-room-hotspot { min-width: 132px; grid-template-columns: 23px 1fr; padding: 6px 7px; }
  .yt-town-room-hotspot > i { width: 22px; height: 22px; }
  .yt-town-room-hotspot strong { font-size: .58rem; }
  .yt-town-room-hotspot small { font-size: .42rem; }
  .yt-town-map-panel { max-height: calc(100% - 16px); padding: 14px; }
  .yt-town-goal-panel { max-height: calc(100% - 16px); padding: 14px; }
  .yt-town-goal-heading h2 { font-size: 1.08rem; }
  .yt-town-goal-heading button { width: 36px; height: 36px; }
  .yt-town-goal-panel > p { margin: 5px 0 9px; font-size: .61rem; }
  .yt-town-goal-options { grid-template-columns: 1fr; gap: 6px; }
  .yt-town-goal-options button { min-height: 59px; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 7px; padding: 7px 8px; border-radius: 12px; }
  .yt-town-goal-options button > span:first-child { width: 36px; height: 36px; border-radius: 10px 10px 10px 4px; font-size: .52rem; }
  .yt-town-goal-options strong { font-size: .65rem; }
  .yt-town-goal-options small { margin-top: 2px; font-size: .49rem; }
  .yt-town-goal-overall { margin-top: 7px; padding: 7px 9px; }
  .yt-town-goal-panel > small { margin-top: 6px; font-size: .49rem; }
  .yt-town-map-heading h2 { font-size: 1.1rem; }
  .yt-town-map-panel > p { margin: 5px 0 9px; }
  .yt-town-mini-map button span { max-width: 82px; overflow: hidden; text-overflow: ellipsis; }
  .yt-town-lighting-control { grid-template-columns: 1fr; gap: 6px; }
  .yt-town-lighting-control > div:first-child { grid-template-columns: auto 1fr; align-items: baseline; gap: 6px; }
  .yt-town-lighting-control > div:first-child strong { font-size: .64rem; }
  .yt-town-lighting-control > div:first-child small { grid-column: 2; margin-top: -3px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .yt-town-topbar { grid-template-columns: minmax(160px, 1fr) minmax(280px, 460px) minmax(90px, 1fr); min-height: calc(58px + var(--yt-safe-top)); padding-top: calc(6px + var(--yt-safe-top)); padding-bottom: 6px; }
  .yt-town-top-actions { gap: 5px; }
  .yt-town-icon-button { width: 36px; height: 36px; border-radius: 10px; }
  .yt-town-exit { display: none; }
  .yt-town-monogram { width: 35px; height: 35px; font-size: 1.1rem; }
  .yt-town-identity p { display: none; }
  .yt-town-mission { padding: 5px 10px; }
  .yt-town-mission-copy small { display: none; }
  .yt-town-mission-steps { margin-top: 0; }
  .yt-town-mission-steps li span { display: none; }
  .yt-town-destination-dock { top: 8px; grid-template-columns: 105px minmax(0, 1fr); gap: 6px; width: min(650px, calc(100% - 190px)); padding: 6px; }
  .yt-town-destination-heading { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-left: 5px; }
  .yt-town-destination-heading > strong { font-size: .65rem; }
  .yt-town-destination-heading > small { margin: 2px 0 0; }
  .yt-town-destination-list button { min-height: 45px; }
  .yt-town-route-guide { top: 8px; }
  .yt-town-joystick { width: min(28vh, 122px); height: min(28vh, 122px); bottom: calc(var(--yt-safe-bottom) + 10px); }
  .yt-town-talk { width: min(26vh, 108px); height: min(26vh, 108px); bottom: calc(var(--yt-safe-bottom) + 12px); }
  .yt-town-enter-building { right: calc(var(--yt-safe-right) + 126px); bottom: calc(var(--yt-safe-bottom) + 14px); width: 92px; min-height: 53px; }
  .yt-town-social-dock { bottom: calc(var(--yt-safe-bottom) + 8px); transform: translateX(-50%) scale(.9); transform-origin: 50% 100%; }
  .yt-town-guide { left: auto; right: calc(var(--yt-safe-right) + 125px); bottom: calc(var(--yt-safe-bottom) + 72px); width: min(340px, calc(100% - 300px)); min-height: 58px; grid-template-columns: 38px minmax(0, 1fr) 25px; gap: 7px; padding: 6px 7px; transform: translateY(9px) scale(.98); }
  .yt-town-guide.is-visible { transform: translateY(0) scale(1); }
  .yt-town-guide-mark { width: 36px; height: 36px; border-radius: 11px 11px 11px 4px; }
  .yt-town-guide > div p { font-size: .48rem; }
  .yt-town-avatar-palette { bottom: calc(var(--yt-safe-bottom) + 67px); }
  .yt-town-zone-toast { bottom: calc(var(--yt-safe-bottom) + 70px); }
  .yt-town-ambience { left: calc(var(--yt-safe-left) + 7px); top: 72px; transform: scale(.78); }
  .yt-town-app.has-destination .yt-town-ambience { top: 67px; }
  .yt-town-map-panel { width: min(590px, calc(100% - 170px)); max-height: calc(100% - 12px); padding: 12px 14px; border-radius: 18px; }
  .yt-town-goal-panel { width: min(650px, calc(100% - 170px)); max-height: calc(100% - 12px); padding: 11px 13px; border-radius: 18px; }
  .yt-town-goal-heading h2 { font-size: .96rem; }
  .yt-town-goal-heading button { width: 33px; height: 33px; }
  .yt-town-goal-panel > p { display: none; }
  .yt-town-goal-options { margin-top: 6px; gap: 5px; }
  .yt-town-goal-options button { min-height: 54px; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px; padding: 6px 7px; border-radius: 11px; }
  .yt-town-goal-options button > span:first-child { width: 32px; height: 32px; border-radius: 9px 9px 9px 3px; font-size: .48rem; }
  .yt-town-goal-options strong { font-size: .6rem; }
  .yt-town-goal-options small { margin-top: 1px; font-size: .45rem; }
  .yt-town-goal-options em { padding: 4px 5px; font-size: .51rem; }
  .yt-town-goal-overall { margin-top: 5px; padding: 6px 8px; }
  .yt-town-goal-panel > small { display: none; }
  .yt-town-map-heading h2 { font-size: 1rem; }
  .yt-town-map-heading button { width: 34px; height: 34px; }
  .yt-town-map-panel > p { display: none; }
  .yt-town-mini-map { margin-top: 7px; aspect-ratio: 2.85; border-width: 3px; }
  .yt-town-mini-map button i { width: 31px; height: 31px; border-width: 3px; }
  .yt-town-mini-map button span { margin-top: 2px; font-size: .45rem; }
  .yt-town-map-legend,
  .yt-town-map-panel > small { display: none; }
  .yt-town-lighting-control { grid-template-columns: 1fr; gap: 4px; margin-top: 5px; padding: 4px; }
  .yt-town-lighting-control > div:first-child { display: none; }
  .yt-town-lighting-control button { min-height: 29px; padding: 3px; font-size: .53rem; }
  .yt-town-help-panel { max-height: calc(100% - 20px); overflow-y: auto; }
  .yt-town-dialog-card { max-height: calc(100dvh - 20px - var(--yt-safe-top) - var(--yt-safe-bottom)); }
  .yt-town-interior-header { left: calc(var(--yt-safe-left) + 7px); right: calc(var(--yt-safe-right) + 7px); top: 6px; min-height: 46px; padding: 5px 6px 5px 10px; }
  .yt-town-interior-header h2 { font-size: .75rem; }
  .yt-town-interior-header button { min-height: 34px; }
  .yt-town-room-backwall,
  .yt-town-room-design-wall,
  .yt-town-room-command-wall { top: 18%; height: 22%; }
  .yt-town-room-machine { left: 9%; bottom: 22%; transform: scale(.58); transform-origin: 0 100%; }
  .yt-town-room-workbench { left: 29%; right: 6%; bottom: 18%; transform: scaleY(.7); transform-origin: 50% 100%; }
  .yt-town-room-part { left: 61%; bottom: 35%; width: 52px; height: 52px; }
  .yt-town-room-hologram { bottom: 18%; transform: translateX(-50%) scale(.6); transform-origin: 50% 100%; }
  .yt-town-room-desk { bottom: 13%; transform: scaleY(.68); transform-origin: 50% 100%; }
  .yt-town-room-map-table { bottom: 15%; width: 240px; transform: translateX(-50%) rotateX(52deg) scale(.7); }
  .yt-town-room-hotspot { min-width: 125px; grid-template-columns: 22px 1fr; padding: 5px 7px; }
  .yt-town-room-hotspot > i { width: 21px; height: 21px; }
  .yt-town-room-hotspot-a { left: 2%; bottom: calc(var(--yt-safe-bottom) + 96px); }
  .yt-town-room-hotspot-b { right: 2%; bottom: calc(var(--yt-safe-bottom) + 96px); }
  .yt-town-interior-guide { bottom: calc(var(--yt-safe-bottom) + 5px); width: min(590px, calc(100% - 220px)); min-height: 63px; grid-template-columns: 43px minmax(0, 1fr) 112px; gap: 7px; padding: 6px 7px; border-radius: 14px; }
  .yt-town-interior-guide-avatar { width: 42px; height: 42px; transform: scale(.7); transform-origin: 0 50%; }
  .yt-town-interior-guide > div p { max-height: 2.8em; margin-top: 2px; font-size: .52rem; }
  .yt-town-interior-guide > button { min-width: 112px; min-height: 48px; }
}

/* v12: vertical makers district — true high-rise massing, street-level lobbies and depth. */
.yt-town-urban-wall {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 1260px;
  height: 352px;
  overflow: hidden;
  pointer-events: none;
  opacity: .82;
  filter: saturate(.82) contrast(.95);
}
.yt-urban-tower {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  border: 1px solid rgba(180, 224, 226, .2);
  background:
    linear-gradient(126deg, rgba(255, 255, 255, .14), transparent 24%),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(6, 33, 40, .44) 16px 18px),
    repeating-linear-gradient(90deg, #426f78 0 13px, #183f49 14px 18px),
    #244f5a;
  box-shadow: inset -13px 0 rgba(3, 25, 32, .23), 10px 9px 20px rgba(4, 25, 29, .18);
}
.yt-urban-tower::before { content: ""; position: absolute; inset: 11px 9px; background: repeating-linear-gradient(0deg, rgba(255, 212, 105, .66) 0 4px, transparent 5px 17px); opacity: calc(.08 + var(--yt-lamp-glow) * .58); mix-blend-mode: screen; }
.yt-urban-tower::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 70%, rgba(3, 20, 27, .27)), linear-gradient(180deg, rgba(138, 231, 230, .08), transparent 55%); }
.yt-urban-tower > i { position: absolute; z-index: 2; left: 10px; right: 10px; top: 10px; height: 2px; background: rgba(117, 234, 219, .3); box-shadow: 0 47px rgba(117, 234, 219, .15), 0 94px rgba(117, 234, 219, .12); }
.yt-urban-tower > b { position: absolute; z-index: 2; left: 50%; top: -10px; width: 4px; height: 31px; border-radius: 3px; background: #375963; box-shadow: 0 0 8px rgba(97, 239, 221, .42); }
.yt-urban-tower-a { left: -22px; width: 112px; height: 286px; clip-path: polygon(0 7%, 63% 7%, 63% 0, 100% 0, 100% 100%, 0 100%); }
.yt-urban-tower-b { left: 438px; width: 101px; height: 325px; clip-path: polygon(0 12%, 22% 12%, 22% 0, 79% 0, 79% 7%, 100% 7%, 100% 100%, 0 100%); }
.yt-urban-tower-c { left: 946px; width: 77px; height: 298px; clip-path: polygon(0 5%, 66% 5%, 66% 0, 100% 10%, 100% 100%, 0 100%); }
.yt-urban-tower-d { left: 130px; width: 78px; height: 335px; clip-path: polygon(0 13%, 18% 13%, 18% 0, 82% 0, 100% 12%, 100% 100%, 0 100%); opacity: .7; }
.yt-urban-tower-e { left: 914px; width: 55px; height: 345px; clip-path: polygon(18% 8%, 42% 8%, 42% 0, 67% 0, 67% 8%, 100% 15%, 100% 100%, 0 100%, 0 15%); opacity: .64; }

.yt-building {
  --yt-building-main: #da6550;
  --yt-building-dark: #713731;
  --yt-building-wall: #d8cbb7;
  --yt-tower-glass: #426f78;
  --yt-tower-glass-dark: #183f49;
  --yt-tower-light: #ffd97d;
  top: 0;
  width: 390px;
  height: 355px;
  overflow: visible;
  filter: drop-shadow(var(--yt-shadow-x) var(--yt-shadow-y) 12px rgba(10, 31, 33, .24));
  transform-origin: 50% 100%;
}
.yt-building-repair { left: 70px; top: 0; width: 390px; --yt-building-main: #d86650; --yt-building-dark: #72362f; --yt-building-wall: #bca88b; --yt-tower-glass: #6d5a51; --yt-tower-glass-dark: #3b3433; --yt-tower-light: #ffd58b; }
.yt-building-design { left: 545px; top: 0; width: 405px; --yt-building-main: #25a79f; --yt-building-dark: #104d58; --yt-building-wall: #a7c7c7; --yt-tower-glass: #3a91a1; --yt-tower-glass-dark: #123f50; --yt-tower-light: #9ff9ec; }
.yt-building-global { left: 985px; top: 0; width: 330px; height: 355px; --yt-building-main: #6765b4; --yt-building-dark: #343568; --yt-building-wall: #b8b9ca; --yt-tower-glass: #5a6d91; --yt-tower-glass-dark: #273450; --yt-tower-light: #b7c8ff; }
.yt-building:hover { transform: translateY(-2px); }
.yt-building:hover,
.yt-building.is-destination,
.yt-building.is-near { filter: drop-shadow(var(--yt-shadow-x) var(--yt-shadow-y) 14px rgba(8, 29, 31, .31)) drop-shadow(0 0 15px rgba(255, 200, 87, .56)); }
.yt-building-shadow { left: 20px; right: 5px; bottom: -3px; height: 35px; background: rgba(8, 29, 30, .34); filter: blur(5px); transform: translate(var(--yt-shadow-x), var(--yt-shadow-y)) skewX(-22deg) scaleX(var(--yt-shadow-stretch)); }

.yt-building-tower-shell { position: absolute; z-index: 2; left: 55px; bottom: 88px; width: 242px; height: 260px; pointer-events: none; }
.yt-building-design .yt-building-tower-shell { left: 63px; width: 267px; height: 274px; }
.yt-building-global .yt-building-tower-shell { left: 33px; width: 222px; height: 252px; }
.yt-building-tower-face {
  position: absolute;
  z-index: 2;
  left: 12px;
  right: 19px;
  top: 26px;
  bottom: 0;
  overflow: hidden;
  border: 2px solid rgba(218, 237, 235, .44);
  background:
    linear-gradient(128deg, rgba(255, 255, 255, .23), transparent 22% 72%, rgba(5, 27, 33, .16)),
    linear-gradient(90deg, var(--yt-tower-glass), var(--yt-tower-glass-dark));
  box-shadow: inset -13px 0 rgba(5, 24, 29, .17), inset 0 4px rgba(255, 255, 255, .11), 9px 9px 12px rgba(5, 28, 31, .2);
  clip-path: polygon(0 4%, 86% 0, 100% 7%, 100% 100%, 0 100%);
}
.yt-building-repair .yt-building-tower-face { left: 5px; right: 26px; top: 35px; border-color: rgba(231, 203, 173, .38); background: linear-gradient(112deg, rgba(255, 255, 255, .14), transparent 27%), repeating-linear-gradient(90deg, rgba(121, 71, 57, .9) 0 19px, rgba(68, 49, 46, .95) 20px 24px), linear-gradient(#755749, #3b3433); clip-path: polygon(0 8%, 15% 8%, 15% 2%, 79% 2%, 79% 0, 100% 7%, 100% 100%, 0 100%); }
.yt-building-design .yt-building-tower-face { left: 8px; right: 22px; top: 19px; border-color: rgba(175, 255, 245, .58); background: linear-gradient(132deg, rgba(255, 255, 255, .36), transparent 24% 69%, rgba(3, 24, 34, .18)), linear-gradient(90deg, #4b9fad, #17495a); clip-path: polygon(10% 7%, 83% 0, 100% 9%, 95% 100%, 0 100%, 3% 19%); }
.yt-building-global .yt-building-tower-face { left: 4px; right: 18px; top: 30px; background: linear-gradient(130deg, rgba(255, 255, 255, .22), transparent 25% 70%, rgba(5, 22, 36, .18)), linear-gradient(90deg, #62769c, #293754); clip-path: polygon(0 10%, 26% 10%, 26% 3%, 76% 3%, 76% 0, 100% 8%, 100% 100%, 0 100%); }
.yt-building-tower-face::before { content: ""; position: absolute; z-index: 1; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 27px, rgba(220, 248, 246, .15) 28px 30px), linear-gradient(107deg, transparent 0 45%, rgba(255, 255, 255, .1) 46% 48%, transparent 49%); }
.yt-building-tower-face::after { content: ""; position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 19px; border-top: 3px solid rgba(218, 240, 237, .36); background: linear-gradient(180deg, rgba(9, 38, 43, .37), rgba(5, 25, 31, .66)); }
.yt-building-floor-grid { position: absolute; z-index: 2; left: 13px; right: 15px; top: 42px; bottom: 25px; display: grid; align-content: stretch; gap: 3px; }
.yt-building-floor-grid > i { position: relative; min-height: 9px; overflow: hidden; border-top: 1px solid rgba(218, 244, 241, .28); border-bottom: 2px solid rgba(7, 30, 37, .48); background: repeating-linear-gradient(90deg, rgba(121, 181, 188, .82) 0 13px, rgba(17, 54, 64, .92) 14px 18px); box-shadow: inset 0 3px rgba(255, 255, 255, .05); }
.yt-building-floor-grid > i::after { content: ""; position: absolute; inset: 2px 4px; background: repeating-linear-gradient(90deg, rgba(255, 217, 120, .92) 0 7px, transparent 8px 24px); opacity: calc(.09 + var(--yt-lamp-glow) * .58); mix-blend-mode: screen; }
.yt-town-app[data-city-activity="busy"] .yt-building-floor-grid > i:nth-child(3n)::after,
.yt-town-app[data-city-activity="evening"] .yt-building-floor-grid > i:nth-child(2n)::after { opacity: calc(.28 + var(--yt-lamp-glow) * .68); animation: yt-tower-office-life 6.2s steps(2, end) infinite alternate; }
.yt-building-repair .yt-building-floor-grid { top: 47px; }.yt-building-repair .yt-building-floor-grid > i { border-color: rgba(230, 207, 183, .25); background: repeating-linear-gradient(90deg, rgba(134, 116, 99, .88) 0 12px, rgba(54, 45, 44, .96) 13px 18px); }
.yt-building-design .yt-building-floor-grid { left: 18px; right: 20px; top: 46px; }.yt-building-design .yt-building-floor-grid > i { background: repeating-linear-gradient(90deg, rgba(92, 173, 182, .88) 0 14px, rgba(15, 59, 72, .95) 15px 19px); }
.yt-building-global .yt-building-floor-grid { top: 50px; }.yt-building-global .yt-building-floor-grid > i { background: repeating-linear-gradient(90deg, rgba(105, 132, 169, .88) 0 13px, rgba(29, 44, 71, .96) 14px 19px); }
.yt-building-vertical-fins { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.yt-building-vertical-fins > i { position: absolute; top: 0; bottom: 17px; width: 4px; background: linear-gradient(90deg, rgba(231, 246, 242, .56), rgba(25, 56, 62, .32)); box-shadow: 2px 0 rgba(4, 25, 31, .19); }
.yt-building-vertical-fins > i:nth-child(1) { left: 24%; }.yt-building-vertical-fins > i:nth-child(2) { left: 52%; }.yt-building-vertical-fins > i:nth-child(3) { left: 78%; }
.yt-building-repair .yt-building-vertical-fins > i { width: 5px; background: linear-gradient(90deg, #8e5948, #3e3432); }
.yt-building-side-face { position: absolute; z-index: 5; right: 0; top: 10px; bottom: 0; width: 24px; background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(9, 27, 34, .36) 18px 20px), linear-gradient(90deg, rgba(32, 58, 63, .4), rgba(7, 26, 33, .72)); clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 100%); }
.yt-building-sky-sign { position: absolute; z-index: 7; left: 16px; top: 14px; display: grid; min-width: 118px; padding: 7px 9px 6px; border: 1px solid rgba(192, 255, 246, .66); border-left: 4px solid var(--yt-building-main); color: #e9fffb; background: rgba(5, 35, 43, .88); box-shadow: 0 0 14px rgba(78, 237, 220, .22); text-align: left; }
.yt-building-sky-sign small { color: var(--yt-tower-light); font: 1000 6px/1 Arial, sans-serif; letter-spacing: .16em; }.yt-building-sky-sign b { margin-top: 3px; font: 1000 14px/.9 Arial, sans-serif; letter-spacing: -.02em; }
.yt-building-design .yt-building-sky-sign { left: auto; right: 21px; top: 20px; border-left-color: #78f7e8; }.yt-building-global .yt-building-sky-sign { top: 24px; min-width: 108px; }
.yt-building-crown { position: absolute; z-index: 4; left: 30px; right: 30px; top: 0; height: 43px; border-bottom: 5px solid var(--yt-building-dark); background: linear-gradient(150deg, rgba(255, 255, 255, .25), rgba(31, 58, 63, .12)), var(--yt-building-main); clip-path: polygon(12% 46%, 32% 46%, 32% 15%, 67% 15%, 67% 0, 78% 0, 78% 46%, 100% 46%, 93% 100%, 4% 100%); box-shadow: 5px 6px 8px rgba(6, 29, 32, .23); }
.yt-building-crown > i { position: absolute; left: 51%; top: 3px; width: 4px; height: 28px; border-radius: 3px; background: #d5e2df; box-shadow: 0 0 9px rgba(117, 234, 216, .5); }
.yt-building-crown > i::before { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; border: 1px solid #dffdf8; border-radius: 50%; background: #72ead8; box-shadow: 0 0 10px #72ead8; transform: translateX(-50%); animation: yt-tower-beacon 1.8s ease-in-out infinite alternate; }
.yt-building-crown > b,.yt-building-crown > em { position: absolute; bottom: 7px; width: 30px; height: 12px; border: 2px solid rgba(223, 244, 240, .62); background: repeating-linear-gradient(0deg, #849394 0 2px, #495b5f 2px 4px); }.yt-building-crown > b { left: 14px; }.yt-building-crown > em { right: 14px; font-style: normal; }
.yt-building-repair .yt-building-crown { left: 17px; right: 34px; height: 51px; clip-path: polygon(0 58%, 15% 16%, 31% 58%, 47% 16%, 63% 58%, 79% 16%, 100% 58%, 94% 100%, 5% 100%); background: linear-gradient(150deg, #b86850, #704037); }.yt-building-repair .yt-building-crown > i { left: 82%; top: 17px; height: 24px; }.yt-building-repair .yt-building-crown > b { left: 56px; bottom: 5px; }.yt-building-repair .yt-building-crown > em { display: none; }
.yt-building-design .yt-building-crown { left: 45px; right: 22px; height: 40px; background: linear-gradient(145deg, #72d5d0, #237a8c); clip-path: polygon(0 62%, 52% 0, 77% 29%, 100% 29%, 94% 100%, 4% 100%); }.yt-building-design .yt-building-crown > i { left: 55%; top: -8px; height: 44px; }.yt-building-design .yt-building-crown > b { left: 99px; bottom: 5px; }.yt-building-design .yt-building-crown > em { display: none; }
.yt-building-global .yt-building-crown { left: 19px; right: 26px; height: 49px; background: linear-gradient(145deg, #7f82c8, #454978); clip-path: polygon(0 55%, 17% 55%, 17% 20%, 48% 20%, 48% 0, 64% 0, 64% 20%, 86% 20%, 100% 52%, 94% 100%, 4% 100%); }.yt-building-global .yt-building-crown > i { left: 53%; top: 3px; }.yt-building-global .yt-building-crown > b { left: 18px; }.yt-building-global .yt-building-crown > em { right: 18px; }
.yt-building-setback { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 83px; border-top: 4px solid rgba(228, 245, 242, .34); background: linear-gradient(145deg, color-mix(in srgb, var(--yt-tower-glass), #fff 8%), var(--yt-tower-glass-dark)); clip-path: polygon(0 17%, 17% 17%, 17% 0, 81% 0, 81% 11%, 100% 11%, 100% 100%, 0 100%); box-shadow: 6px 7px 8px rgba(6, 28, 31, .21); }
.yt-building-setback::before { content: ""; position: absolute; inset: 15px 9px 7px; background: repeating-linear-gradient(90deg, rgba(130, 192, 196, .78) 0 12px, rgba(16, 52, 61, .94) 13px 17px); border-bottom: 5px solid rgba(5, 28, 34, .36); }
.yt-building-setback > i,.yt-building-setback > b { position: absolute; z-index: 2; top: 8px; width: 3px; bottom: 3px; background: rgba(221, 242, 239, .42); }.yt-building-setback > i { left: 35%; }.yt-building-setback > b { left: 68%; }

.yt-building-podium { position: absolute; z-index: 6; left: 20px; bottom: 8px; width: 340px; height: 108px; border: 4px solid rgba(245, 242, 222, .88); border-radius: 3px 3px 7px 7px; background: linear-gradient(110deg, rgba(255, 255, 255, .2), transparent 39%), var(--yt-building-wall); box-shadow: inset 0 -10px rgba(50, 52, 49, .09), 8px 9px 9px rgba(10, 34, 34, .2); }
.yt-building-podium::before { content: ""; position: absolute; z-index: -1; left: -7px; right: -7px; top: -9px; height: 10px; border-bottom: 3px solid var(--yt-building-dark); background: linear-gradient(90deg, var(--yt-building-dark), var(--yt-building-main), var(--yt-building-dark)); box-shadow: 5px 4px 6px rgba(9, 30, 31, .18); }
.yt-building-podium::after { content: ""; position: absolute; z-index: -1; right: -22px; top: 3px; width: 22px; height: 101px; background: color-mix(in srgb, var(--yt-building-wall), #30383b 25%); clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 100%); }
.yt-building-design .yt-building-podium { left: 17px; width: 360px; border-color: rgba(219, 250, 246, .88); background: linear-gradient(115deg, rgba(255, 255, 255, .35), transparent 42%), #a8c8c9; }
.yt-building-global .yt-building-podium { left: 10px; width: 292px; background: linear-gradient(110deg, rgba(255, 255, 255, .21), transparent 40%), #b8b9ca; }
.yt-building-facade { z-index: 0; background: repeating-linear-gradient(90deg, transparent 0 32px, rgba(55, 54, 49, .12) 33px 35px), repeating-linear-gradient(0deg, transparent 0 20px, rgba(255, 255, 255, .19) 21px 22px); }
.yt-building-design .yt-building-facade { background: repeating-linear-gradient(90deg, rgba(236, 255, 252, .14) 0 1px, transparent 1px 35px), linear-gradient(117deg, rgba(255, 255, 255, .28), transparent 45%); }
.yt-building-sign { z-index: 4; left: 12px; right: auto; top: 8px; width: 145px; min-height: 36px; padding: 6px 7px 5px; border: 0; border-left: 4px solid var(--yt-building-main); border-bottom: 1px solid rgba(20, 48, 51, .22); border-radius: 1px; background: rgba(250, 248, 232, .72); box-shadow: 0 3px 5px rgba(15, 36, 37, .08); }
.yt-building-sign small { color: var(--yt-building-dark); font-size: 5.7px; letter-spacing: .12em; }.yt-building-sign strong { margin-top: 2px; font-size: 15px; letter-spacing: 0; }
.yt-building-lobby { position: absolute; z-index: 2; left: 12px; bottom: 9px; display: flex; width: 137px; height: 45px; gap: 3px; padding: 3px; border: 3px solid rgba(238, 243, 231, .84); background: #2a5962; box-shadow: inset 0 -6px rgba(8, 38, 45, .28); }
.yt-building-lobby > i { position: relative; flex: 1; overflow: hidden; border-right: 2px solid rgba(228, 245, 242, .6); background: linear-gradient(144deg, rgba(255, 255, 255, .68) 0 15%, transparent 16% 49%, rgba(255, 255, 255, .14) 50% 54%, transparent 55%), linear-gradient(145deg, var(--yt-window-near), var(--yt-window-far)); }
.yt-building-lobby > i::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 7px; height: 17px; border-radius: 6px 6px 2px 2px; background: rgba(6, 31, 38, .56); opacity: .32; transform: translateX(-50%); }
.yt-town-app[data-city-activity="busy"] .yt-building-lobby > i:nth-child(odd)::after,
.yt-town-app[data-city-activity="evening"] .yt-building-lobby > i:nth-child(even)::after { opacity: .76; animation: yt-window-worker 7s ease-in-out infinite alternate; }
.yt-building-service-bay { position: absolute; z-index: 2; right: 12px; bottom: 8px; width: 103px; height: 48px; border: 4px solid #556368; border-bottom: 0; background: repeating-linear-gradient(0deg, #a8b1b1 0 6px, #677679 6px 8px); box-shadow: inset 8px 0 rgba(255, 255, 255, .14); }
.yt-building-service-bay > i { position: absolute; left: 10px; bottom: 8px; width: 37px; height: 13px; border-radius: 2px; background: #304a51; box-shadow: inset 8px 0 #a9d2d5; }.yt-building-service-bay > b { position: absolute; right: 8px; bottom: 8px; width: 25px; height: 20px; border: 2px solid #5c4c3c; background: repeating-linear-gradient(90deg, #c2914e 0 6px, #8f6436 7px 9px); }
.yt-building-design .yt-building-service-bay { border-color: #397783; background: linear-gradient(145deg, rgba(255, 255, 255, .48), transparent 28%), linear-gradient(145deg, #6db9c1, #1b5868); }.yt-building-design .yt-building-service-bay > i { width: 42px; height: 23px; bottom: 6px; border: 2px solid #72eee0; background: linear-gradient(145deg, #173f50, #267c88); box-shadow: 0 0 8px rgba(78, 238, 222, .35); }.yt-building-design .yt-building-service-bay > b { width: 31px; height: 23px; border-color: #8feade; background: repeating-linear-gradient(0deg, #1b4e5c 0 4px, #3e8d94 5px 7px); }
.yt-building-global .yt-building-service-bay { right: 8px; width: 73px; }.yt-building-global .yt-building-service-bay > i { left: 7px; width: 25px; }.yt-building-global .yt-building-service-bay > b { right: 5px; width: 20px; }
.yt-building-door { z-index: 7; left: 160px; right: auto; bottom: 0; width: 44px; height: 66px; border: 5px solid var(--yt-building-dark); border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(150deg, rgba(255, 255, 255, .16), transparent 35%), color-mix(in srgb, var(--yt-building-main), #243136 28%); box-shadow: inset 9px 0 rgba(255, 255, 255, .05), inset -7px 0 rgba(7, 25, 29, .14); }
.yt-building-door::before { left: 5px; top: 7px; width: 24px; height: 28px; border: 2px solid rgba(225, 255, 249, .64); background: linear-gradient(145deg, rgba(255, 255, 255, .58), transparent 43%), linear-gradient(145deg, #7fb8c0, #315e68); }
.yt-building-door::after { left: -7px; bottom: -9px; width: 59px; height: 9px; background: #9e9785; box-shadow: 0 6px #d5c9aa; }
.yt-building-canopy { z-index: 8; left: 149px; right: auto; bottom: 65px; width: 70px; height: 9px; border-bottom: 3px solid var(--yt-building-dark); background: linear-gradient(90deg, var(--yt-building-main), color-mix(in srgb, var(--yt-building-main), #fff 26%)); box-shadow: 5px 5px 5px rgba(12, 33, 34, .2); transform: skewX(-16deg); }
.yt-building-street-number { position: absolute; z-index: 5; right: 12px; top: 9px; color: rgba(22, 50, 54, .28); font: 1000 31px/.9 Arial, sans-serif; letter-spacing: -.08em; }
.yt-building-global .yt-building-door { left: 160px; }.yt-building-global .yt-building-canopy { left: 149px; }
.yt-building.is-near .yt-building-door { filter: brightness(1.22) drop-shadow(-6px 2px 4px rgba(5, 25, 30, .28)); transform: perspective(100px) rotateY(-58deg); }
.yt-building-status { z-index: 12; right: 20px; top: auto; bottom: 116px; padding: 5px 9px; border-width: 2px; background: rgba(7, 35, 42, .92); }
.yt-building-global .yt-building-status { right: 14px; }
.yt-building-enter-sign { z-index: 13; left: 187px; right: auto; top: auto; bottom: 76px; }
.yt-building-global .yt-building-enter-sign { left: 177px; }
.yt-building-pin { z-index: 14; bottom: -40px; }
.yt-building.is-destination .yt-building-tower-face,
.yt-building.is-near .yt-building-tower-face { border-color: rgba(255, 225, 133, .86); box-shadow: inset -13px 0 rgba(5, 24, 29, .17), inset 0 4px rgba(255, 255, 255, .11), 9px 9px 12px rgba(5, 28, 31, .2), 0 0 18px rgba(255, 204, 86, .28); }
.yt-building.is-destination .yt-building-podium,
.yt-building.is-near .yt-building-podium { border-color: rgba(255, 238, 181, .98); }
.yt-building-global .yt-building-crane { z-index: 1; right: -20px; top: 70px; width: 11px; height: 231px; background: repeating-linear-gradient(0deg, #e2a83e 0 13px, #ad702c 14px 18px); }
.yt-building-global .yt-building-crane::before { right: 0; width: 154px; height: 11px; background: repeating-linear-gradient(90deg, #e4ad43 0 15px, #a96c2a 16px 20px); }.yt-building-global .yt-building-crane::after { left: -17px; width: 44px; }.yt-building-global .yt-building-crane i { left: -103px; top: 8px; height: 92px; }
@keyframes yt-tower-office-life { to { transform: translateX(4px); } }
@keyframes yt-tower-beacon { to { opacity: .35; box-shadow: 0 0 3px #72ead8; } }

/* v13: cinematic vertical city — architectural depth, urban materials and calmer controls. */
.yt-town-app {
  --yt-ground-base: #526d67;
  --yt-ground-deep: rgba(12, 44, 45, .26);
  --yt-water-near: #327b8a;
  --yt-water-far: #174c62;
  --yt-future-opacity: .42;
  background: #132e35;
}
.yt-town-app[data-atmosphere="dawn"] { --yt-ground-base: #4f6662; --yt-ground-deep: rgba(31, 48, 51, .34); }
.yt-town-app[data-atmosphere="dusk"] { --yt-ground-base: #3f5756; --yt-ground-deep: rgba(20, 35, 42, .4); }
.yt-town-app[data-atmosphere="night"] { --yt-ground-base: #273f42; --yt-ground-deep: rgba(6, 23, 30, .52); }
.yt-town-viewport,
.yt-town-world { background-color: var(--yt-ground-base); }
.yt-town-ground {
  background:
    linear-gradient(90deg, transparent 0 49.7%, rgba(180, 218, 207, .055) 49.8% 50.2%, transparent 50.3%) 0 0 / 96px 96px,
    linear-gradient(0deg, transparent 0 49.7%, rgba(180, 218, 207, .045) 49.8% 50.2%, transparent 50.3%) 0 0 / 96px 96px,
    radial-gradient(ellipse at 70% 19%, rgba(196, 236, 226, .11), transparent 31%),
    radial-gradient(circle at 7px 9px, var(--yt-ground-deep) 1px, transparent 1.5px) 0 0 / 19px 19px,
    linear-gradient(145deg, color-mix(in srgb, var(--yt-ground-base), #fff 4%), var(--yt-ground-base));
}
.yt-town-atmospheric-haze {
  position: absolute;
  z-index: 7;
  left: 0;
  top: 0;
  width: 1295px;
  height: 370px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(154, 210, 213, .07), transparent 33%, rgba(21, 52, 57, .14));
  pointer-events: none;
}
.yt-town-atmospheric-haze::before {
  content: "";
  position: absolute;
  left: -80px;
  right: -80px;
  bottom: -14px;
  height: 92px;
  background: linear-gradient(180deg, transparent, rgba(173, 218, 212, .2) 68%, rgba(30, 64, 65, .12));
  filter: blur(10px);
}
.yt-town-atmospheric-haze i { position: absolute; width: 260px; height: 1px; background: linear-gradient(90deg, transparent, rgba(194, 243, 235, .5), transparent); opacity: .42; }
.yt-town-atmospheric-haze i:first-child { left: 98px; top: 172px; }.yt-town-atmospheric-haze i:last-child { right: 126px; top: 232px; width: 340px; }
.yt-town-app[data-atmosphere="night"] .yt-town-atmospheric-haze { background: linear-gradient(180deg, rgba(30, 77, 100, .12), transparent 38%, rgba(6, 27, 36, .28)); }

.yt-town-road {
  background:
    radial-gradient(circle at 8px 11px, rgba(198, 224, 220, .08) 0 1px, transparent 1.5px) 0 0 / 23px 21px,
    linear-gradient(105deg, rgba(255, 255, 255, .045), transparent 26% 72%, rgba(5, 19, 25, .12)),
    #293e44;
  box-shadow: inset 0 6px rgba(255, 255, 255, .035), inset 0 -8px rgba(3, 18, 23, .28);
}
.yt-town-road-main::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 9%, rgba(83, 188, 180, .06) 18%, transparent 32% 65%, rgba(255, 191, 91, .045) 77%, transparent 92%); }
.yt-town-road-main::after,
.yt-town-road-cross::after { opacity: .78; filter: saturate(.7) brightness(.92); }
.yt-town-sidewalk {
  border-top: 1px solid rgba(235, 239, 228, .52);
  border-bottom: 3px solid rgba(18, 43, 46, .38);
  background:
    repeating-linear-gradient(90deg, transparent 0 55px, rgba(28, 48, 49, .22) 56px 58px),
    linear-gradient(180deg, #9da49b, #747e79);
  box-shadow: 0 5px 10px rgba(5, 25, 28, .25);
}
.yt-town-sidewalk-south { box-shadow: 0 -4px 9px rgba(5, 25, 28, .22), 0 5px 10px rgba(5, 25, 28, .16); }
.yt-town-crosswalk { background: repeating-linear-gradient(0deg, rgba(235, 235, 217, .88) 0 14px, transparent 14px 25px); filter: drop-shadow(2px 3px 1px rgba(2, 19, 23, .18)); }
.yt-town-plaza {
  border-color: #747d77;
  background:
    radial-gradient(circle, #bac0b6 0 40%, #89938c 41% 42%, #a8afa5 43% 55%, #747d77 56% 58%, #969f98 59% 64%, #747d77 65%),
    #89938c;
  box-shadow: inset 0 0 34px rgba(16, 38, 38, .26), 0 13px 24px rgba(7, 27, 30, .25);
}
.yt-town-plaza-ring { border-color: #d8ddd2; background: radial-gradient(ellipse at 35% 26%, rgba(255, 255, 255, .46), transparent 23%), #247c89; box-shadow: inset 0 0 0 10px #3d9ca4, inset 13px 8px rgba(255, 255, 255, .09), 0 7px #59645f, 0 13px 18px rgba(8, 29, 31, .25); }
.yt-town-plaza small { color: #424e4c; }
.yt-town-zone-marker { border-color: rgba(207, 238, 229, .16); color: rgba(215, 240, 234, .52); background: rgba(8, 35, 39, .2); }
.yt-town-zone-marker span { color: #b8ccc6; background: rgba(25, 62, 61, .86); }
.yt-town-water { box-shadow: inset 17px 0 30px rgba(3, 26, 37, .38), inset 0 0 70px rgba(90, 203, 211, .08); }
.yt-town-quay { background: repeating-linear-gradient(0deg, #8a8a78 0 38px, #5f675f 39px 43px); box-shadow: -9px 0 17px rgba(4, 28, 31, .32); }

.yt-town-street-reflections { position: absolute; z-index: 9; inset: 0; overflow: hidden; opacity: calc(.18 + var(--yt-lamp-glow) * .48); pointer-events: none; transition: opacity .8s ease; }
.yt-town-street-reflections i { position: absolute; top: 388px; width: 72px; height: 180px; background: linear-gradient(180deg, rgba(95, 243, 224, .7), rgba(66, 209, 199, .18) 30%, transparent 84%); filter: blur(7px); clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%); mix-blend-mode: screen; }
.yt-town-street-reflections i:nth-child(1) { left: 188px; }.yt-town-street-reflections i:nth-child(2) { left: 708px; width: 92px; background: linear-gradient(180deg, rgba(255, 198, 85, .66), rgba(246, 150, 66, .13) 38%, transparent 86%); }.yt-town-street-reflections i:nth-child(3) { left: 1091px; width: 80px; }
.yt-town-street-reflections b { position: absolute; top: 453px; width: 225px; height: 5px; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(116, 240, 224, .55), transparent); filter: blur(2px); }
.yt-town-street-reflections b:nth-of-type(1) { left: 58px; }.yt-town-street-reflections b:nth-of-type(2) { left: 873px; background: linear-gradient(90deg, transparent, rgba(255, 199, 91, .5), transparent); }
.yt-town-app[data-atmosphere="day"] .yt-town-street-reflections { opacity: .21; }

.yt-town-urban-wall { opacity: .9; filter: saturate(.68) contrast(1.04); }
.yt-urban-tower {
  border-color: rgba(165, 211, 214, .18);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .15), transparent 19% 71%, rgba(2, 15, 22, .27)),
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(3, 24, 31, .58) 15px 18px),
    repeating-linear-gradient(90deg, #365f68 0 10px, #17343e 11px 15px),
    #1d414b;
  box-shadow: inset -16px 0 rgba(3, 17, 24, .35), 11px 10px 20px rgba(2, 17, 21, .28);
}
.yt-urban-tower::before { background: repeating-linear-gradient(0deg, rgba(255, 210, 107, .74) 0 3px, transparent 4px 16px); }
.yt-urban-tower-f { left: 348px; width: 58px; height: 255px; clip-path: polygon(0 11%, 22% 11%, 22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%); opacity: .62; }
.yt-urban-tower-g { left: 512px; width: 68px; height: 282px; clip-path: polygon(0 5%, 72% 5%, 72% 0, 100% 9%, 100% 100%, 0 100%); opacity: .68; }
.yt-urban-tower-h { left: 1212px; width: 70px; height: 319px; clip-path: polygon(0 9%, 34% 9%, 34% 0, 78% 0, 100% 8%, 100% 100%, 0 100%); opacity: .72; }

.yt-building { filter: drop-shadow(var(--yt-shadow-x) var(--yt-shadow-y) 16px rgba(3, 20, 24, .34)); }
.yt-building-repair { --yt-building-main: #c65743; --yt-building-dark: #4c2927; --yt-building-wall: #706357; --yt-tower-glass: #6b5a51; --yt-tower-glass-dark: #272b2d; }
.yt-building-design { --yt-building-main: #15968f; --yt-building-dark: #123d48; --yt-building-wall: #4a7175; --yt-tower-glass: #397f8d; --yt-tower-glass-dark: #102f3d; }
.yt-building-global { --yt-building-main: #5b5da4; --yt-building-dark: #292d59; --yt-building-wall: #54596e; --yt-tower-glass: #536887; --yt-tower-glass-dark: #202b45; }
.yt-building-shadow { height: 40px; background: rgba(2, 18, 22, .48); filter: blur(7px); }
.yt-building-tower-shell { perspective: 520px; transform-style: preserve-3d; }
.yt-building-tower-face {
  left: 8px;
  right: 42px;
  border-color: rgba(190, 224, 222, .38);
  background:
    linear-gradient(116deg, rgba(255, 255, 255, .24), transparent 21% 66%, rgba(2, 16, 24, .22)),
    linear-gradient(90deg, var(--yt-tower-glass), var(--yt-tower-glass-dark));
  box-shadow: inset -17px 0 rgba(2, 18, 24, .25), inset 0 3px rgba(255, 255, 255, .11), 9px 11px 17px rgba(2, 19, 24, .3);
  clip-path: polygon(0 5%, 91% 0, 100% 5%, 100% 100%, 0 100%);
}
.yt-building-repair .yt-building-tower-face { left: 5px; right: 49px; background: linear-gradient(115deg, rgba(255, 255, 255, .13), transparent 25% 69%, rgba(2, 14, 19, .26)), repeating-linear-gradient(90deg, #70584d 0 16px, #332f30 17px 22px), #3b3433; }
.yt-building-design .yt-building-tower-face { left: 8px; right: 48px; background: linear-gradient(132deg, rgba(255, 255, 255, .31), transparent 22% 66%, rgba(2, 16, 25, .25)), linear-gradient(90deg, #448b97, #113847); }
.yt-building-global .yt-building-tower-face { left: 4px; right: 43px; background: linear-gradient(130deg, rgba(255, 255, 255, .2), transparent 22% 68%, rgba(2, 14, 27, .28)), linear-gradient(90deg, #586d8f, #222e49); }
.yt-building-tower-face::before { background: repeating-linear-gradient(90deg, transparent 0 21px, rgba(218, 242, 239, .13) 22px 24px), linear-gradient(108deg, transparent 0 38%, rgba(255, 255, 255, .13) 39% 42%, transparent 43%); }
.yt-building-floor-grid { left: 11px; right: 12px; top: 43px; bottom: 43px; gap: 3px; }
.yt-building-floor-grid > i { border-top-color: rgba(213, 239, 237, .2); border-bottom-color: rgba(2, 20, 27, .62); background: repeating-linear-gradient(90deg, rgba(92, 153, 162, .75) 0 10px, rgba(11, 42, 52, .95) 11px 15px); box-shadow: inset 0 3px rgba(255, 255, 255, .04), 0 2px 2px rgba(1, 17, 22, .3); }
.yt-building-floor-grid > i::before { content: ""; position: absolute; inset: 1px auto 1px 43%; width: 1px; background: rgba(214, 239, 235, .18); box-shadow: 37px 0 rgba(214, 239, 235, .12), -37px 0 rgba(214, 239, 235, .12); }
.yt-building-repair .yt-building-floor-grid > i { background: repeating-linear-gradient(90deg, #78675a 0 10px, #332e2d 11px 15px); }
.yt-building-design .yt-building-floor-grid > i { background: repeating-linear-gradient(90deg, #4d939d 0 11px, #123d4b 12px 16px); }
.yt-building-global .yt-building-floor-grid > i { background: repeating-linear-gradient(90deg, #607596 0 10px, #232f4b 11px 16px); }
.yt-building-vertical-fins > i { width: 3px; background: linear-gradient(90deg, rgba(227, 245, 242, .66), rgba(17, 44, 50, .35)); box-shadow: 2px 0 3px rgba(2, 17, 22, .32); }
.yt-building-side-face {
  z-index: 2;
  right: 4px;
  top: 38px;
  bottom: 0;
  width: 42px;
  overflow: hidden;
  border-right: 1px solid rgba(182, 217, 216, .24);
  background: repeating-linear-gradient(0deg, rgba(82, 133, 140, .4) 0 13px, rgba(3, 22, 30, .72) 14px 18px), linear-gradient(100deg, var(--yt-tower-glass-dark), #071c25);
  box-shadow: inset 9px 0 12px rgba(0, 0, 0, .28), 9px 10px 13px rgba(2, 17, 22, .31);
  clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 100%);
}
.yt-building-side-face > i { position: absolute; left: 8px; right: 5px; height: 8px; border-top: 1px solid rgba(203, 232, 229, .14); background: repeating-linear-gradient(90deg, rgba(128, 184, 187, .5) 0 6px, rgba(9, 35, 44, .9) 7px 10px); }
.yt-building-side-face > i:nth-child(1) { top: 24%; }.yt-building-side-face > i:nth-child(2) { top: 42%; }.yt-building-side-face > i:nth-child(3) { top: 61%; }.yt-building-side-face > i:nth-child(4) { top: 79%; }
.yt-building-repair .yt-building-side-face { right: 6px; top: 54px; width: 43px; background: repeating-linear-gradient(0deg, #57463f 0 13px, #211f21 14px 18px); }
.yt-building-design .yt-building-side-face { right: 5px; top: 34px; width: 44px; }.yt-building-global .yt-building-side-face { right: 3px; top: 48px; width: 42px; }
.yt-building-roof-plane { position: absolute; z-index: 3; left: 9px; right: 38px; top: 24px; height: 26px; border-top: 1px solid rgba(232, 247, 243, .42); background: linear-gradient(155deg, rgba(255, 255, 255, .26), transparent 38%), linear-gradient(110deg, var(--yt-building-main), var(--yt-building-dark)); box-shadow: 7px 8px 11px rgba(2, 18, 23, .26); clip-path: polygon(9% 38%, 82% 0, 100% 45%, 92% 100%, 0 100%); }
.yt-building-roof-plane > i,.yt-building-roof-plane > b { position: absolute; top: 9px; width: 29px; height: 10px; border: 1px solid rgba(214, 239, 236, .45); background: repeating-linear-gradient(0deg, #657578 0 2px, #2e4248 3px 5px); }.yt-building-roof-plane > i { left: 31px; }.yt-building-roof-plane > b { right: 30px; }
.yt-building-repair .yt-building-roof-plane { left: 8px; right: 44px; top: 37px; }.yt-building-design .yt-building-roof-plane { left: 13px; right: 43px; top: 18px; }.yt-building-global .yt-building-roof-plane { left: 6px; right: 38px; top: 34px; }
.yt-building-crown { z-index: 6; filter: drop-shadow(5px 7px 5px rgba(2, 18, 23, .3)); }
.yt-building-led-ribbon { position: absolute; z-index: 8; left: 8px; right: 7px; bottom: 21px; height: 15px; overflow: hidden; padding: 4px 8px 0; border-top: 1px solid rgba(144, 255, 241, .52); border-bottom: 1px solid rgba(144, 255, 241, .25); color: #adfff4; background: rgba(2, 26, 34, .9); box-shadow: 0 0 10px rgba(62, 232, 213, .21); font: 1000 5px/1 Arial, sans-serif; letter-spacing: .14em; text-align: right; white-space: nowrap; }
.yt-building-repair .yt-building-led-ribbon { color: #ffdba0; border-color: rgba(255, 191, 99, .48); box-shadow: 0 0 9px rgba(255, 171, 83, .18); }.yt-building-global .yt-building-led-ribbon { color: #c7d3ff; }
.yt-building-sky-sign { min-width: 110px; border-color: rgba(198, 235, 230, .52); border-left-width: 3px; background: rgba(3, 26, 34, .88); box-shadow: 5px 7px 12px rgba(2, 17, 23, .27), 0 0 12px rgba(77, 233, 216, .15); }
.yt-building-setback { border-top-color: rgba(213, 238, 234, .27); background: linear-gradient(145deg, color-mix(in srgb, var(--yt-tower-glass), #fff 5%), var(--yt-tower-glass-dark)); box-shadow: 7px 9px 11px rgba(2, 18, 23, .3); }

.yt-building-podium { border-color: rgba(207, 217, 206, .72); border-width: 3px; background: linear-gradient(112deg, rgba(255, 255, 255, .12), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--yt-building-wall), #fff 8%), var(--yt-building-wall)); box-shadow: inset 0 -13px rgba(3, 22, 26, .16), 9px 11px 13px rgba(2, 19, 23, .31); }
.yt-building-design .yt-building-podium { border-color: rgba(180, 216, 211, .74); background: linear-gradient(115deg, rgba(255, 255, 255, .18), transparent 37%), linear-gradient(180deg, #5c8587, #3c6066); }
.yt-building-global .yt-building-podium { background: linear-gradient(112deg, rgba(255, 255, 255, .14), transparent 36%), linear-gradient(180deg, #666b80, #454a5d); }
.yt-building-podium::before { border-bottom-color: rgba(5, 23, 27, .74); background: linear-gradient(90deg, #152d33, var(--yt-building-main), #152d33); box-shadow: 6px 5px 8px rgba(2, 17, 21, .28); }
.yt-building-podium::after { background: color-mix(in srgb, var(--yt-building-wall), #101d22 45%); }
.yt-building-facade { background: repeating-linear-gradient(90deg, transparent 0 28px, rgba(6, 25, 29, .26) 29px 32px), repeating-linear-gradient(0deg, transparent 0 20px, rgba(221, 237, 230, .11) 21px 22px); }
.yt-building-sign { top: 7px; min-height: 37px; border-left-width: 3px; border-bottom-color: rgba(190, 222, 215, .2); color: #f4faf4; background: rgba(9, 35, 39, .84); box-shadow: 4px 5px 8px rgba(3, 18, 22, .19); }
.yt-building-sign small { color: color-mix(in srgb, var(--yt-building-main), #fff 45%); }.yt-building-sign strong { color: #f3f8f2; text-shadow: 0 1px 1px rgba(0, 0, 0, .28); }
.yt-building-lobby { border-color: rgba(217, 233, 224, .72); background: #173f48; box-shadow: inset 0 -8px rgba(3, 24, 30, .34), 3px 4px 7px rgba(2, 19, 22, .2); }
.yt-building-lobby > i { border-right-color: rgba(213, 234, 229, .46); background: linear-gradient(144deg, rgba(255, 255, 255, .55) 0 12%, transparent 13% 47%, rgba(255, 255, 255, .1) 48% 53%, transparent 54%), linear-gradient(145deg, var(--yt-window-near), var(--yt-window-far)); }
.yt-building-service-bay { border-color: #354b50; background: repeating-linear-gradient(0deg, #728083 0 6px, #48575a 6px 8px); box-shadow: inset 8px 0 rgba(255, 255, 255, .09), 3px 4px 6px rgba(2, 17, 21, .2); }
.yt-building-door { border-color: var(--yt-building-dark); background: linear-gradient(145deg, rgba(255, 255, 255, .16), transparent 32%), linear-gradient(90deg, #28555e, #102f39); box-shadow: inset 8px 0 rgba(255, 255, 255, .04), inset -7px 0 rgba(3, 17, 23, .25), 0 0 14px rgba(82, 226, 212, .17); }
.yt-building-door::after { background: #626b66; box-shadow: 0 6px #9da59b; }
.yt-building-canopy { height: 8px; border-bottom-color: #132f35; box-shadow: 5px 6px 7px rgba(2, 17, 21, .29), 0 0 8px rgba(81, 233, 216, .18); }
.yt-building-street-number { color: rgba(223, 235, 227, .2); text-shadow: 0 1px rgba(0, 0, 0, .22); }
.yt-building-status { border-color: rgba(207, 241, 234, .7); color: #eaf7f3; background: rgba(3, 26, 33, .88); box-shadow: 4px 6px 10px rgba(2, 17, 22, .24); }

.yt-town-vehicle { width: 120px; height: 54px; filter: saturate(.82) contrast(1.04); }
.yt-vehicle-body { filter: drop-shadow(4px 5px 3px rgba(2, 18, 22, .31)); }
.yt-vehicle-cargo { border-color: rgba(224, 231, 221, .45); border-radius: 4px 3px 2px 5px; background: linear-gradient(145deg, rgba(255, 255, 255, .22), transparent 27% 68%, rgba(3, 17, 23, .18)), linear-gradient(90deg, var(--yt-vehicle-paint), var(--yt-vehicle-paint-dark)); }
.yt-vehicle-cab { border-radius: 4px 15px 4px 3px; background: linear-gradient(142deg, rgba(255, 255, 255, .2), transparent 34%), linear-gradient(90deg, color-mix(in srgb, var(--yt-vehicle-paint), #fff 8%), var(--yt-vehicle-paint-dark)); }
.yt-vehicle-windscreen { border-color: rgba(10, 35, 42, .8); background: linear-gradient(145deg, rgba(255, 255, 255, .66), transparent 34%), linear-gradient(145deg, #638f99, #1d4955); }
.yt-vehicle-chassis { background: linear-gradient(180deg, #4c585b, #111e22 66%); }
.yt-vehicle-wheel { border-color: #10191c; background: radial-gradient(circle, #aeb8b7 0 14%, #4a575b 16% 34%, #111b1e 36% 100%); box-shadow: inset 0 0 0 2px #3f4a4e, 2px 3px 3px rgba(2, 15, 18, .45); }
.yt-vehicle-ground-shadow { background: rgba(2, 15, 18, .48); filter: blur(4px); }

.yt-human-figure,
.yt-citizen-figure { filter: saturate(.82) contrast(1.04) drop-shadow(2px 3px 2px rgba(2, 18, 21, .22)); }
.yt-human-head,
.yt-avatar-head { box-shadow: inset -3px -2px rgba(75, 39, 33, .14), inset 2px 2px rgba(255, 255, 255, .17), 0 2px 3px rgba(3, 19, 22, .18); }
.yt-human-torso,
.yt-avatar-body { box-shadow: inset 2px 1px rgba(255, 255, 255, .19), inset -4px -3px rgba(4, 23, 27, .17), 2px 3px 3px rgba(3, 19, 22, .18); }
.yt-avatar-head { border-color: rgba(235, 242, 235, .72); }.yt-avatar-body,.yt-avatar-arms > i { border-color: rgba(235, 242, 235, .68); }

.yt-town-topbar { background: linear-gradient(100deg, rgba(5, 24, 30, .995), rgba(10, 43, 49, .98) 60%, rgba(8, 31, 39, .99)); box-shadow: 0 12px 30px rgba(2, 17, 22, .38); }
.yt-town-mission { border-color: rgba(145, 205, 200, .27); background: linear-gradient(110deg, rgba(255, 255, 255, .075), rgba(92, 225, 209, .035)); box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 7px 18px rgba(2, 17, 21, .18); }
.yt-town-icon-button,.yt-town-exit { border-color: rgba(167, 214, 210, .28); background: rgba(255, 255, 255, .055); }
.yt-town-destination-dock,.yt-town-route-guide,.yt-town-ambience { border-color: rgba(164, 221, 213, .4); background: linear-gradient(115deg, rgba(4, 26, 33, .94), rgba(9, 46, 51, .87)); box-shadow: 0 16px 38px rgba(2, 17, 22, .35), inset 0 1px rgba(255, 255, 255, .06); }
.yt-town-destination-list button { border-color: rgba(159, 210, 205, .17); background: linear-gradient(120deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)); }
.yt-town-destination-number { border-radius: 7px 7px 7px 2px; box-shadow: inset 0 -4px rgba(0, 0, 0, .14), 3px 4px 7px rgba(2, 16, 20, .2); }
.yt-town-joystick-ring { border-color: rgba(192, 231, 224, .58); background: radial-gradient(circle, rgba(21, 91, 84, .7) 0 22%, rgba(4, 25, 31, .77) 23% 67%, rgba(35, 75, 76, .72) 68% 100%); box-shadow: inset 0 0 0 8px rgba(202, 238, 231, .035), inset 0 0 26px rgba(82, 226, 210, .1), 0 15px 34px rgba(2, 16, 20, .38); }
.yt-town-joystick-ring > b { border-color: rgba(234, 247, 240, .84); background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .17), transparent 23%), linear-gradient(145deg, #198e83, #07514f); box-shadow: inset -7px -8px rgba(1, 27, 29, .2), 0 9px 18px rgba(1, 16, 20, .39), 0 0 13px rgba(54, 223, 204, .2); }
.yt-town-talk { border-color: rgba(242, 247, 236, .9); background: linear-gradient(145deg, #ffd16b, #eaa93e); box-shadow: inset -8px -10px rgba(113, 68, 9, .15), 0 16px 34px rgba(2, 16, 20, .4); }
.yt-town-talk:disabled { border-color: rgba(183, 216, 210, .42); background: linear-gradient(145deg, rgba(17, 52, 58, .76), rgba(4, 28, 34, .8)); opacity: .72; }
.yt-town-enter-building { border-color: rgba(169, 215, 208, .4); background: linear-gradient(115deg, rgba(5, 29, 35, .86), rgba(12, 53, 57, .77)); opacity: .65; }
.yt-town-social-dock,.yt-town-guide { border-color: rgba(154, 217, 208, .38); background: linear-gradient(115deg, rgba(4, 26, 33, .92), rgba(9, 48, 52, .84)); box-shadow: 0 15px 34px rgba(2, 17, 22, .34); }
.yt-town-guide { width: min(360px, calc(100% - 34px)); min-height: 58px; grid-template-columns: 39px minmax(0, 1fr) 26px; gap: 8px; padding: 7px; border-radius: 15px 15px 15px 5px; }
.yt-town-guide-mark { width: 36px; height: 36px; border-width: 1px; border-radius: 11px 11px 11px 4px; font-size: .95rem; }
.yt-town-guide > div strong { margin-top: 2px; font-size: .68rem; }.yt-town-guide > div p { margin-top: 2px; font-size: .5rem; }
.yt-town-depth-lens { background: radial-gradient(ellipse at 50% -12%, rgba(177, 226, 224, .09), transparent 45%), linear-gradient(180deg, rgba(10, 35, 43, .08), transparent 36% 71%, rgba(2, 20, 25, .14)); box-shadow: inset 0 0 105px rgba(2, 24, 30, calc(var(--yt-lens-opacity) * .72)); }

@media (max-width: 760px) {
  .yt-town-destination-dock { top: 8px; gap: 4px; width: min(382px, calc(100% - 14px)); padding: 5px; border-radius: 14px; }
  .yt-town-destination-heading { min-height: 12px; gap: 5px; padding: 0 3px; }
  .yt-town-destination-heading > strong { font-size: .62rem; }.yt-town-destination-heading > small { font-size: .45rem; }
  .yt-town-destination-list { gap: 4px; }
  .yt-town-destination-list button { min-height: 42px; grid-template-columns: 25px minmax(0, 1fr); gap: 4px; padding: 4px 5px; border-radius: 9px; }
  .yt-town-destination-number { width: 24px; height: 27px; font-size: .5rem; }
  .yt-town-destination-list strong { font-size: .54rem; }.yt-town-destination-list small { margin-top: 2px; font-size: .42rem; }
  .yt-town-ambience { top: 76px; min-width: 105px; min-height: 38px; padding: 5px 7px; transform: scale(.84); }
  .yt-town-app.has-destination .yt-town-ambience { top: 67px; }
  .yt-town-joystick { width: clamp(116px, 32vw, 128px); height: clamp(116px, 32vw, 128px); }
  .yt-town-talk { width: clamp(100px, 28vw, 110px); height: clamp(100px, 28vw, 110px); }
  .yt-town-enter-building { right: calc(var(--yt-safe-right) + 17px); bottom: calc(var(--yt-safe-bottom) + 130px); width: 91px; min-height: 50px; grid-template-columns: 29px 1fr; padding: 6px 8px; border-radius: 14px; }
  .yt-town-enter-building > span { width: 27px; height: 32px; border-width: 2px; }.yt-town-enter-building > span::before { left: 6px; top: 6px; width: 10px; height: 15px; }.yt-town-enter-building strong { font-size: .73rem; }
  .yt-town-social-dock { bottom: calc(var(--yt-safe-bottom) + 13px); grid-template-columns: repeat(3, 30px); gap: 3px; padding: 3px; border-radius: 13px; }
  .yt-town-social-dock button { width: 30px; height: 34px; grid-template-rows: 1fr; padding: 2px; border-radius: 9px; }
  .yt-town-social-dock button > span { font-size: .94rem; }.yt-town-social-dock small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .yt-town-social-dock #town-sound-toggle { position: relative; left: auto; bottom: auto; width: 30px; border: 0; box-shadow: none; transform: none; }
  .yt-town-social-dock #town-sound-toggle:active { transform: scale(.95); }
  .yt-town-guide { bottom: calc(var(--yt-safe-bottom) + 206px); width: min(310px, calc(100% - 64px)); min-height: 50px; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 7px; padding: 6px; }
  .yt-town-guide-mark { width: 32px; height: 32px; border-radius: 9px 9px 9px 3px; font-size: .82rem; }
  .yt-town-guide > div small { font-size: .39rem; }.yt-town-guide > div strong { font-size: .61rem; }.yt-town-guide > div p { max-height: 1.35em; font-size: .46rem; white-space: nowrap; -webkit-line-clamp: 1; }
  .yt-town-avatar-palette { bottom: calc(var(--yt-safe-bottom) + 57px); }
}

@media (orientation: landscape) and (max-height: 600px) {
  .yt-town-guide { right: calc(var(--yt-safe-right) + 116px); bottom: calc(var(--yt-safe-bottom) + 65px); width: min(310px, calc(100% - 286px)); min-height: 48px; }
  .yt-town-social-dock { grid-template-columns: repeat(3, 30px); transform: translateX(-50%); }
}

/* v14: immersive mission UX — clearer hierarchy and explorable living interiors. */
.yt-town-app { --yt-mission-progress: 0deg; }
.yt-town-mission { grid-template-columns: minmax(0, 1fr) 48px; column-gap: 12px; }
.yt-town-progress { min-width: 44px; justify-items: end; }
.yt-town-progress > strong {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(207, 238, 231, .32);
  border-radius: 50%;
  color: #ffe08a;
  background:
    radial-gradient(circle, #12363b 0 58%, transparent 60%),
    conic-gradient(var(--yt-amber) 0 var(--yt-mission-progress), rgba(193, 225, 220, .15) var(--yt-mission-progress) 360deg);
  box-shadow: inset 0 0 12px rgba(2, 18, 22, .25), 0 0 15px rgba(255, 200, 87, .08);
  font-size: .76rem;
  text-align: center;
}
.yt-town-progress-track { display: none; }
.yt-town-mission-steps { margin-top: 1px; }
.yt-town-destination-dock { overflow: hidden; }
.yt-town-destination-dock::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(104, 245, 226, .65), transparent); opacity: .72; }
.yt-town-destination-list button[aria-pressed="true"] { border-color: #79f1df; background: linear-gradient(120deg, rgba(72, 225, 207, .18), rgba(255, 255, 255, .055)); box-shadow: inset 0 0 0 1px rgba(107, 245, 228, .18), 0 7px 18px rgba(1, 19, 23, .2); }
.yt-town-app.has-destination .yt-building:not(.is-destination) { filter: saturate(.69) brightness(.83) drop-shadow(var(--yt-shadow-x) var(--yt-shadow-y) 12px rgba(3, 20, 24, .28)); }
.yt-town-app.has-destination .yt-building.is-destination { transform: translateY(-3px); }
.yt-building.is-destination .yt-building-status { border-color: #ffdc78; color: #ffe69a; box-shadow: 0 0 0 4px rgba(255, 199, 70, .11), 4px 7px 13px rgba(2, 17, 22, .3); }
.yt-town-enter-building:disabled {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.9);
}
.yt-town-enter-building.is-ready { visibility: visible; opacity: 1; transform: translateY(0) scale(1); }
.yt-town-talk:disabled { opacity: .58; transform: scale(.92); transform-origin: 50% 100%; }
.yt-town-talk.is-ready { transform: scale(1); }

.yt-town-interior { background: radial-gradient(circle at 50% 8%, #164450, #071d26 56%, #04151d); }
.yt-town-interior::before { border-color: rgba(130, 255, 240, .3); box-shadow: inset 0 0 120px rgba(0, 0, 0, .48), inset 0 -30px 70px rgba(1, 14, 20, .4); }
.yt-town-interior-header { grid-template-columns: minmax(0, 1fr) auto auto auto; border-color: rgba(140, 243, 231, .42); background: linear-gradient(110deg, rgba(3, 24, 33, .93), rgba(10, 50, 56, .82)); box-shadow: 0 15px 38px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .06); }
.yt-town-interior-discovery { display: grid; min-width: 104px; grid-template-columns: minmax(48px, 1fr) auto; gap: 2px 7px; align-items: center; padding: 6px 8px; border: 1px solid rgba(131, 230, 218, .24); border-radius: 11px; color: #c2dcd9; background: rgba(255, 255, 255, .055); }
.yt-town-interior-discovery > span { grid-column: 1 / -1; display: block; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.yt-town-interior-discovery > span i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6df3df, #ffe07a); box-shadow: 0 0 8px rgba(109, 243, 223, .55); transition: width .28s ease; }
.yt-town-interior-discovery small { font-size: .42rem; font-weight: 900; letter-spacing: .08em; }.yt-town-interior-discovery strong { color: #8af6e6; font: 1000 .68rem/1 Arial, sans-serif; }
.yt-town-interior-discovery.is-complete { border-color: rgba(255, 216, 108, .66); background: rgba(255, 199, 76, .1); }.yt-town-interior-discovery.is-complete strong { color: #ffe17c; }
.yt-town-interior-stage { perspective: 1050px; background: #061c24; }
.yt-town-room {
  background:
    radial-gradient(ellipse at 50% 8%, rgba(126, 246, 232, .15), transparent 30%),
    linear-gradient(180deg, #153e49 0 45%, #0a2832 46% 58%, #061b24 59%);
}
.yt-town-room::before { left: -18%; right: -18%; bottom: -24%; height: 70%; background: repeating-linear-gradient(90deg, rgba(112, 238, 225, .13) 0 2px, transparent 2px 84px), repeating-linear-gradient(0deg, rgba(112, 238, 225, .11) 0 2px, transparent 2px 62px), radial-gradient(ellipse at 50% 0, rgba(74, 213, 200, .13), transparent 52%), linear-gradient(145deg, #143a44, #061d26); box-shadow: inset 0 24px 35px rgba(1, 15, 20, .35); }
.yt-town-room::after { top: 48%; height: 2px; background: linear-gradient(90deg, transparent 5%, rgba(112, 255, 239, .5), transparent 95%); box-shadow: 0 0 22px rgba(85, 241, 224, .3), 0 86px 0 rgba(85, 241, 224, .1), 0 170px 0 rgba(85, 241, 224, .07); }
.yt-town-interior-atmosphere { position: absolute; z-index: 13; inset: 0; overflow: hidden; pointer-events: none; }
.yt-town-interior-atmosphere > i { position: absolute; top: 70px; width: 2px; height: 190px; background: linear-gradient(rgba(123, 255, 239, .6), transparent); opacity: .28; filter: blur(.4px); transform: rotate(31deg); transform-origin: 50% 0; }
.yt-town-interior-atmosphere > i:nth-child(1) { left: 12%; }.yt-town-interior-atmosphere > i:nth-child(2) { left: 36%; height: 250px; }.yt-town-interior-atmosphere > i:nth-child(3) { right: 34%; height: 240px; transform: rotate(-29deg); }.yt-town-interior-atmosphere > i:nth-child(4) { right: 11%; transform: rotate(-31deg); }
.yt-town-interior-atmosphere > b { position: absolute; left: 8%; right: 8%; bottom: 19%; height: 2px; background: linear-gradient(90deg, transparent, rgba(103, 244, 226, .48), transparent); box-shadow: 0 0 18px rgba(88, 238, 222, .28); }
.yt-town-interior-atmosphere > em { position: absolute; left: -12%; top: 49%; width: 18%; height: 1px; background: linear-gradient(90deg, transparent, #79f7e6, transparent); opacity: .55; animation: yt-interior-scanline 5.8s linear infinite; }
@keyframes yt-interior-scanline { to { left: 108%; } }
.yt-town-room-ceiling { height: 42%; background: repeating-linear-gradient(90deg, transparent 0 84px, rgba(130, 245, 232, .045) 85px 87px), linear-gradient(180deg, rgba(1, 13, 19, .8), transparent); }
.yt-town-room-ceiling::after { content: ""; position: absolute; left: 7%; right: 7%; top: 72px; height: 4px; background: repeating-linear-gradient(90deg, rgba(133, 255, 241, .72) 0 70px, transparent 71px 122px); box-shadow: 0 0 14px rgba(102, 248, 230, .26); opacity: .6; }
.yt-town-room-telemetry { position: absolute; z-index: 11; right: 5%; top: 19%; display: grid; width: 116px; min-height: 76px; grid-template-columns: 1fr 1fr; gap: 4px; padding: 9px; border: 1px solid rgba(120, 247, 231, .42); border-radius: 7px; color: #d8f8f3; background: linear-gradient(145deg, rgba(6, 37, 47, .91), rgba(10, 63, 67, .72)); box-shadow: 8px 12px 20px rgba(0, 0, 0, .25), inset 0 0 18px rgba(91, 240, 222, .06); }
.yt-town-room-telemetry small,.yt-town-room-telemetry strong { grid-column: 1 / -1; }.yt-town-room-telemetry small { color: #75eedf; font: 1000 .42rem/1 Arial, sans-serif; letter-spacing: .14em; }.yt-town-room-telemetry strong { font: 1000 .68rem/1 Arial, sans-serif; letter-spacing: .06em; }
.yt-town-room-telemetry i,.yt-town-room-telemetry b { display: block; height: 16px; border-bottom: 2px solid #6fe8db; background: linear-gradient(135deg, transparent 0 28%, rgba(110, 239, 224, .3) 29% 38%, transparent 39% 55%, rgba(255, 210, 96, .45) 56% 62%, transparent 63%); }
.yt-town-room-telemetry b { border-bottom-color: #ffd76f; opacity: .74; }
.yt-town-room-crew { position: absolute; z-index: 10; right: 16%; bottom: 26%; width: 76px; height: 70px; pointer-events: none; }
.yt-town-room-crew > span { position: absolute; bottom: 0; width: 25px; height: 58px; filter: drop-shadow(5px 7px 4px rgba(0, 0, 0, .3)); transform-origin: 50% 100%; }
.yt-town-room-crew > span:first-child { left: 0; }.yt-town-room-crew > span:last-child { right: 0; transform: scale(.88); }
.yt-town-room-crew > span::before { content: ""; position: absolute; z-index: 3; left: 6px; top: 0; width: 14px; height: 17px; border-radius: 48% 48% 43% 43%; background: linear-gradient(120deg, #dca47e, #a96850); box-shadow: inset -2px -1px rgba(73, 38, 31, .16); }
.yt-town-room-crew > span::after { content: ""; position: absolute; z-index: 4; left: 5px; top: -2px; width: 16px; height: 7px; border-radius: 9px 9px 3px 3px; background: #172f38; }
.yt-town-room-crew i { position: absolute; z-index: 2; left: 3px; top: 16px; width: 20px; height: 24px; border-radius: 7px 7px 3px 3px; background: linear-gradient(100deg, #2b9a96, #155b67); box-shadow: inset 2px 0 rgba(255, 255, 255, .16); }
.yt-town-room-crew b { position: absolute; left: 5px; top: 38px; width: 7px; height: 19px; border-radius: 2px 2px 4px 4px; background: #253c49; box-shadow: 9px 0 #1a303c; }
.yt-town-room-repair .yt-town-room-crew i { background: linear-gradient(100deg, #d76550, #7f3734); }.yt-town-room-global .yt-town-room-crew i { background: linear-gradient(100deg, #6e70bd, #393c78); }
.yt-town-room-design .yt-town-room-crew { right: 10%; }.yt-town-room-global .yt-town-room-crew { left: 16%; right: auto; }
.yt-town-room-hotspot { border-color: rgba(142, 241, 229, .48); background: linear-gradient(115deg, rgba(4, 28, 37, .9), rgba(11, 61, 65, .76)); box-shadow: 0 12px 28px rgba(0, 0, 0, .31), inset 0 1px rgba(255, 255, 255, .05); }
.yt-town-room-hotspot.is-inspected { border-color: rgba(111, 238, 200, .68); color: #a8f4dc; background: rgba(7, 52, 53, .91); transform: none; }
.yt-town-room-hotspot.is-inspected > i::before { width: 9px; height: 5px; border-left: 2px solid #9df4da; border-bottom: 2px solid #9df4da; background: transparent; transform: translate(-50%, -65%) rotate(-45deg); }.yt-town-room-hotspot.is-inspected > i::after { display: none; }
.yt-town-room-hotspot.is-active { border-color: #ffdb6f; color: #ffdf80; background: rgba(11, 65, 69, .96); transform: scale(.97); }
.yt-town-interior-guide { border-color: rgba(163, 228, 220, .48); background: linear-gradient(112deg, rgba(3, 23, 32, .96), rgba(8, 48, 53, .9)); box-shadow: 0 22px 52px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .06); }
.yt-town-complete-card { overflow: hidden; background: radial-gradient(circle at 50% 5%, rgba(255, 214, 104, .22), transparent 34%), linear-gradient(160deg, #fffaf0, #edf3ed); }
.yt-town-complete-card::before { content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; bottom: 0; height: 23%; background: repeating-linear-gradient(90deg, #173c43 0 19px, #0b2931 20px 27px), #12363d; clip-path: polygon(0 48%, 7% 48%, 7% 22%, 13% 22%, 13% 55%, 21% 55%, 21% 8%, 29% 8%, 29% 49%, 39% 49%, 39% 27%, 46% 27%, 46% 52%, 56% 52%, 56% 0, 65% 0, 65% 44%, 73% 44%, 73% 18%, 80% 18%, 80% 51%, 89% 51%, 89% 30%, 95% 30%, 95% 55%, 100% 55%, 100% 100%, 0 100%); opacity: .09; }

@media (max-width: 760px) {
  .yt-town-mission { grid-template-columns: minmax(0, 1fr) 40px; gap: 2px 6px; }
  .yt-town-mission-copy strong { display: -webkit-box; max-height: 2.5em; font-size: .62rem; line-height: 1.25; text-overflow: clip; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .yt-town-progress { min-width: 38px; }.yt-town-progress > strong { width: 38px; height: 38px; font-size: .69rem; }
  .yt-town-interior-header { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
  .yt-town-interior-presence { display: none; }
  .yt-town-interior-discovery { min-width: 76px; grid-template-columns: 1fr auto; padding: 5px 6px; }
  .yt-town-interior-discovery small { font-size: .36rem; }.yt-town-interior-discovery strong { font-size: .6rem; }
  .yt-town-room-telemetry { right: 3%; top: 20%; width: 91px; min-height: 60px; padding: 7px; opacity: .8; transform: scale(.82); transform-origin: 100% 0; }
  .yt-town-room-crew { right: 6%; bottom: 31%; transform: scale(.74); transform-origin: 100% 100%; }.yt-town-room-design .yt-town-room-crew { right: 4%; }.yt-town-room-global .yt-town-room-crew { left: 5%; right: auto; transform-origin: 0 100%; }
  .yt-town-interior-atmosphere > i:nth-child(2),.yt-town-interior-atmosphere > i:nth-child(3) { opacity: .18; }
}

@media (max-width: 480px) and (orientation: portrait) {
  .yt-town-interior-header h2 { font-size: .75rem; }
  .yt-town-interior-discovery { min-width: 66px; }.yt-town-interior-discovery small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .yt-town-interior-discovery strong { grid-column: 1 / -1; text-align: center; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .yt-town-interior-header { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 7px; }
  .yt-town-interior-discovery { min-width: 82px; padding: 4px 6px; }.yt-town-interior-discovery small { font-size: .36rem; }
  .yt-town-room-telemetry { top: 18%; transform: scale(.68); transform-origin: 100% 0; }
  .yt-town-room-crew { bottom: 23%; transform: scale(.62); transform-origin: 100% 100%; }
}

/* v15: spatial city — lightweight 3D depth, parallax architecture and explorable rooms. */
.yt-town-world {
  --yt-depth-far-x: 0px;
  --yt-depth-far-y: 0px;
  --yt-depth-mid-x: 0px;
  --yt-depth-mid-y: 0px;
  --yt-camera-yaw: 0deg;
  --yt-camera-yaw-soft: 0deg;
  --yt-camera-pitch: 0deg;
  --yt-camera-lift: 0px;
  --yt-glass-shift: 0px;
  --yt-road-shift: 0px;
  --yt-city-focus-x: 50%;
  --yt-city-focus-y: 50%;
}

.yt-town-spatial-depth {
  position: absolute;
  z-index: 4;
  left: -130px;
  top: -35px;
  width: 1760px;
  height: 430px;
  overflow: hidden;
  pointer-events: none;
  perspective: 1100px;
  mask-image: linear-gradient(#000 0 76%, transparent 100%);
}
.yt-town-spatial-layer { position: absolute; inset: 0; display: block; transform-style: preserve-3d; will-change: transform; }
.yt-town-spatial-layer > i {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  border: 1px solid rgba(176, 225, 226, .2);
  background:
    linear-gradient(112deg, rgba(226, 255, 250, .12), transparent 24% 68%, rgba(0, 14, 24, .3)),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(137, 217, 217, .14) 16px 18px),
    repeating-linear-gradient(90deg, #153e4d 0 12px, #092b38 13px 18px);
  box-shadow: inset -14px 0 18px rgba(0, 12, 22, .3), 15px 10px 24px rgba(0, 16, 22, .18);
}
.yt-town-spatial-layer > i::before {
  content: "";
  position: absolute;
  inset: 12px 8px;
  background: repeating-linear-gradient(0deg, rgba(255, 218, 112, .58) 0 3px, transparent 4px 16px);
  opacity: calc(.07 + var(--yt-lamp-glow) * .55);
  mix-blend-mode: screen;
}
.yt-town-spatial-layer > i::after { content: ""; position: absolute; left: 13%; top: 0; width: 2px; height: 100%; background: linear-gradient(rgba(112, 244, 228, .42), transparent 65%); box-shadow: 39px 0 rgba(112, 244, 228, .12), 83px 0 rgba(112, 244, 228, .09); }
.yt-town-spatial-layer-far { opacity: .42; filter: saturate(.66) blur(.35px); transform: translate3d(var(--yt-depth-far-x), var(--yt-depth-far-y), -90px) scale(1.055); }
.yt-town-spatial-layer-mid { opacity: .62; filter: saturate(.8); transform: translate3d(var(--yt-depth-mid-x), var(--yt-depth-mid-y), -35px) scale(1.025); }
.yt-town-spatial-layer-far > i:nth-child(1) { left: 18px; width: 104px; height: 245px; clip-path: polygon(0 10%, 58% 10%, 58% 0, 100% 0, 100% 100%, 0 100%); }
.yt-town-spatial-layer-far > i:nth-child(2) { left: 190px; width: 128px; height: 332px; clip-path: polygon(0 8%, 31% 8%, 31% 0, 78% 0, 100% 12%, 100% 100%, 0 100%); }
.yt-town-spatial-layer-far > i:nth-child(3) { left: 365px; width: 92px; height: 280px; clip-path: polygon(0 14%, 18% 14%, 18% 0, 81% 0, 100% 7%, 100% 100%, 0 100%); }
.yt-town-spatial-layer-far > i:nth-child(4) { left: 540px; width: 142px; height: 370px; clip-path: polygon(0 11%, 27% 11%, 27% 3%, 70% 3%, 70% 0, 100% 10%, 100% 100%, 0 100%); }
.yt-town-spatial-layer-far > i:nth-child(5) { left: 748px; width: 108px; height: 292px; clip-path: polygon(0 5%, 74% 5%, 74% 0, 100% 13%, 100% 100%, 0 100%); }
.yt-town-spatial-layer-far > i:nth-child(6) { left: 927px; width: 151px; height: 352px; clip-path: polygon(0 12%, 22% 12%, 22% 0, 80% 0, 80% 7%, 100% 7%, 100% 100%, 0 100%); }
.yt-town-spatial-layer-far > i:nth-child(7) { left: 1140px; width: 91px; height: 267px; clip-path: polygon(0 0, 68% 0, 68% 9%, 100% 9%, 100% 100%, 0 100%); }
.yt-town-spatial-layer-far > i:nth-child(8) { left: 1294px; width: 139px; height: 376px; clip-path: polygon(0 7%, 39% 7%, 39% 0, 74% 0, 100% 13%, 100% 100%, 0 100%); }
.yt-town-spatial-layer-far > i:nth-child(9) { left: 1510px; width: 116px; height: 314px; clip-path: polygon(0 13%, 25% 13%, 25% 3%, 82% 3%, 82% 0, 100% 8%, 100% 100%, 0 100%); }
.yt-town-spatial-layer-mid > i { background: linear-gradient(118deg, rgba(230, 255, 250, .14), transparent 25% 67%, rgba(0, 14, 24, .32)), repeating-linear-gradient(0deg, #28606b 0 13px, #0b303c 14px 17px); }
.yt-town-spatial-layer-mid > i:nth-child(1) { left: 112px; width: 77px; height: 224px; }
.yt-town-spatial-layer-mid > i:nth-child(2) { left: 328px; width: 93px; height: 312px; clip-path: polygon(0 12%, 24% 12%, 24% 0, 76% 0, 100% 9%, 100% 100%, 0 100%); }
.yt-town-spatial-layer-mid > i:nth-child(3) { left: 695px; width: 86px; height: 258px; clip-path: polygon(0 0, 72% 0, 72% 13%, 100% 13%, 100% 100%, 0 100%); }
.yt-town-spatial-layer-mid > i:nth-child(4) { left: 838px; width: 98px; height: 330px; clip-path: polygon(0 10%, 36% 10%, 36% 0, 77% 0, 100% 12%, 100% 100%, 0 100%); }
.yt-town-spatial-layer-mid > i:nth-child(5) { left: 1084px; width: 79px; height: 246px; }
.yt-town-spatial-layer-mid > i:nth-child(6) { left: 1250px; width: 99px; height: 318px; clip-path: polygon(0 7%, 66% 7%, 66% 0, 100% 12%, 100% 100%, 0 100%); }
.yt-town-spatial-layer-mid > i:nth-child(7) { left: 1460px; width: 88px; height: 273px; }

.yt-town-spatial-road { position: absolute; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; perspective: 700px; opacity: calc(.21 + var(--yt-lamp-glow) * .45); }
.yt-town-spatial-road > i { position: absolute; top: 396px; width: 150px; height: 178px; background: linear-gradient(180deg, rgba(118, 255, 238, .42), rgba(50, 190, 184, .07) 44%, transparent 83%); filter: blur(5px); clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); transform: perspective(460px) rotateX(11deg) translateY(var(--yt-camera-lift)); mix-blend-mode: screen; }
.yt-town-spatial-road > i:nth-child(1) { left: 231px; }.yt-town-spatial-road > i:nth-child(2) { left: 681px; width: 205px; background: linear-gradient(180deg, rgba(255, 206, 98, .38), rgba(223, 126, 65, .06) 46%, transparent 84%); }.yt-town-spatial-road > i:nth-child(3) { left: 1080px; }
.yt-town-spatial-road > b { position: absolute; top: 469px; width: 310px; height: 2px; background: linear-gradient(90deg, transparent, rgba(119, 255, 238, .65), transparent); filter: blur(.7px); box-shadow: 0 27px rgba(119, 255, 238, .14), 0 58px rgba(119, 255, 238, .08); transform: translateX(var(--yt-road-shift)); }
.yt-town-spatial-road > b:nth-of-type(1) { left: 28px; }.yt-town-spatial-road > b:nth-of-type(2) { left: 897px; background: linear-gradient(90deg, transparent, rgba(255, 199, 91, .58), transparent); }
.yt-town-spatial-road > em { position: absolute; left: 664px; top: 352px; width: 175px; height: 575px; border-left: 1px solid rgba(104, 240, 224, .1); border-right: 1px solid rgba(104, 240, 224, .1); background: linear-gradient(90deg, transparent, rgba(102, 245, 226, .035), transparent); transform: perspective(720px) rotateY(var(--yt-camera-yaw-soft)); }

.yt-building-repair { --yt-building-yaw: -4deg; --yt-podium-yaw: -1.8deg; }
.yt-building-design { --yt-building-yaw: .8deg; --yt-podium-yaw: .4deg; }
.yt-building-global { --yt-building-yaw: 4.2deg; --yt-podium-yaw: 2deg; }
.yt-building-tower-shell {
  perspective: none;
  transform: perspective(780px) rotateX(calc(-1.2deg + var(--yt-camera-pitch))) rotateY(calc(var(--yt-building-yaw) + var(--yt-camera-yaw-soft))) translate3d(0, var(--yt-camera-lift), 0);
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform .18s ease-out;
}
.yt-building-tower-face { transform: translateZ(12px); backface-visibility: hidden; }
.yt-building-side-face { transform: translateZ(4px); transform-origin: 0 50%; }
.yt-building-roof-plane { transform: translateZ(16px) rotateX(5deg); transform-origin: 50% 100%; }
.yt-building-crown { transform: translateZ(20px); }
.yt-building-setback { transform: translateZ(6px); }
.yt-building-podium { transform: perspective(760px) rotateY(calc(var(--yt-podium-yaw) + var(--yt-camera-yaw-soft))); transform-style: preserve-3d; transform-origin: 50% 100%; transition: transform .18s ease-out; }
.yt-building-glass-volume {
  position: absolute;
  z-index: 7;
  left: 22px;
  right: 53px;
  top: 54px;
  bottom: 25px;
  overflow: hidden;
  border-left: 1px solid rgba(208, 255, 248, .42);
  border-right: 1px solid rgba(118, 222, 214, .18);
  background: linear-gradient(112deg, transparent 0 18%, rgba(226, 255, 252, .16) 19% 22%, transparent 23% 56%, rgba(122, 242, 228, .09) 57% 61%, transparent 62%);
  box-shadow: inset 7px 0 12px rgba(217, 255, 249, .045), 5px 0 12px rgba(0, 11, 18, .11);
  clip-path: polygon(0 3%, 86% 0, 100% 6%, 100% 100%, 0 100%);
  transform: translate3d(var(--yt-glass-shift), 0, 24px);
  mix-blend-mode: screen;
  opacity: .86;
}
.yt-building-repair .yt-building-glass-volume { left: 13px; right: 57px; top: 68px; opacity: .55; }
.yt-building-design .yt-building-glass-volume { left: 30px; right: 58px; top: 49px; }
.yt-building-global .yt-building-glass-volume { left: 15px; right: 48px; top: 64px; }
.yt-building-glass-volume > i { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(203, 255, 248, .52) 20%, rgba(203, 255, 248, .1) 80%, transparent); }.yt-building-glass-volume > i:nth-child(1) { left: 19%; }.yt-building-glass-volume > i:nth-child(2) { left: 51%; }.yt-building-glass-volume > i:nth-child(3) { left: 79%; }
.yt-building-glass-volume > b { position: absolute; left: -30%; top: 18%; width: 160%; height: 13%; background: linear-gradient(90deg, transparent 23%, rgba(255, 255, 255, .18), transparent 69%); transform: rotate(-8deg); }
.yt-building-glass-volume > em { position: absolute; left: 7%; right: 7%; bottom: 7%; height: 2px; background: linear-gradient(90deg, transparent, rgba(106, 255, 237, .52), transparent); box-shadow: 0 0 9px rgba(89, 247, 229, .28); }
.yt-building-entry-plane { position: absolute; z-index: 1; left: 143px; bottom: -28px; width: 83px; height: 45px; overflow: hidden; border: 1px solid rgba(181, 242, 232, .3); background: linear-gradient(180deg, rgba(111, 236, 221, .18), rgba(5, 31, 38, .2)), repeating-linear-gradient(90deg, transparent 0 17px, rgba(157, 238, 228, .14) 18px 19px); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); box-shadow: 0 9px 16px rgba(1, 16, 21, .2); transform: perspective(180px) rotateX(62deg) translateZ(8px); transform-origin: 50% 0; pointer-events: none; }
.yt-building-entry-plane > i { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(rgba(255, 217, 105, .86), transparent); box-shadow: 0 0 8px rgba(255, 205, 82, .38); }.yt-building-entry-plane > b,.yt-building-entry-plane > em { position: absolute; left: 13%; right: 13%; height: 1px; background: rgba(147, 246, 232, .38); }.yt-building-entry-plane > b { top: 39%; }.yt-building-entry-plane > em { top: 71%; }
.yt-building-design .yt-building-entry-plane { left: 154px; }.yt-building-global .yt-building-entry-plane { left: 142px; width: 72px; }
.yt-building.is-destination .yt-building-glass-volume { opacity: 1; filter: brightness(1.18); }.yt-building.is-near .yt-building-entry-plane { border-color: rgba(255, 218, 106, .78); background-color: rgba(255, 200, 72, .13); }

.yt-town-interior-stage { perspective: 1250px; perspective-origin: 50% 45%; }
.yt-town-room {
  --yt-interior-yaw: 0deg;
  transform: perspective(1200px) rotateY(var(--yt-interior-yaw)) scale(1.018);
  transform-style: preserve-3d;
  transform-origin: 50% 48%;
  backface-visibility: hidden;
  transition: transform .52s cubic-bezier(.2, .72, .2, 1);
  will-change: transform;
}
.yt-town-room-depth-shell { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; transform-style: preserve-3d; }
.yt-town-room-depth-shell > i { position: absolute; top: 7%; bottom: 18%; width: 16%; border: 1px solid rgba(133, 244, 230, .14); background: linear-gradient(90deg, rgba(1, 16, 23, .86), rgba(18, 68, 76, .24)); box-shadow: inset 0 0 36px rgba(0, 0, 0, .3); }
.yt-town-room-depth-shell > i:nth-child(1) { left: 0; clip-path: polygon(0 0, 100% 16%, 100% 88%, 0 100%); transform-origin: 0 50%; transform: translateZ(8px) rotateY(5deg); }
.yt-town-room-depth-shell > i:nth-child(2) { right: 0; clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 88%); background: linear-gradient(-90deg, rgba(1, 16, 23, .86), rgba(18, 68, 76, .24)); transform-origin: 100% 50%; transform: translateZ(8px) rotateY(-5deg); }
.yt-town-room-depth-shell > b { position: absolute; left: 12%; right: 12%; top: 0; height: 27%; background: repeating-linear-gradient(90deg, transparent 0 92px, rgba(124, 239, 226, .07) 93px 95px), linear-gradient(180deg, rgba(1, 12, 19, .82), transparent); clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); transform: translateZ(4px) rotateX(-2deg); transform-origin: 50% 0; }
.yt-town-room-depth-shell > em { position: absolute; left: 7%; right: 7%; bottom: -12%; height: 45%; border-top: 1px solid rgba(105, 246, 229, .23); background: radial-gradient(ellipse at 50% 0, rgba(76, 229, 211, .12), transparent 55%); clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%); transform: translateZ(5px) rotateX(5deg); transform-origin: 50% 100%; }
.yt-town-room-telemetry { translate: 0 0 34px; }
.yt-town-room-hotspot { transform: translateZ(46px); transition: transform .24s ease, border-color .2s ease, background-color .2s ease; }
.yt-town-room-hotspot:active,.yt-town-room-hotspot.is-inspected { transform: translateZ(46px) scale(.97); }
.yt-town-room-hotspot.is-active { transform: translateZ(62px) scale(.985); box-shadow: 0 17px 36px rgba(0, 0, 0, .4), 0 0 22px rgba(255, 210, 91, .16); }
.yt-town-room-crew i { animation: yt-room-crew-breathe 2.7s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.yt-town-room-crew > span:last-child i { animation-delay: -1.1s; }
@keyframes yt-room-crew-breathe { to { transform: rotate(1.8deg) translateY(-1px); filter: brightness(1.07); } }

@media (max-width: 760px) {
  .yt-town-spatial-layer-far { opacity: .34; }.yt-town-spatial-layer-mid { opacity: .52; }
  .yt-town-spatial-road { opacity: calc(.16 + var(--yt-lamp-glow) * .34); }
  .yt-building-tower-shell { transition-duration: .12s; }
  .yt-town-room { transform: perspective(980px) rotateY(var(--yt-interior-yaw)) scale(1.025); }
  .yt-town-room-depth-shell > i { width: 12%; }
}

.yt-town-app[data-spatial-mode="static"] .yt-building-tower-shell,
.yt-town-app[data-spatial-mode="static"] .yt-building-podium,
.yt-town-app[data-spatial-mode="static"] .yt-town-room { transition: none; }

/* v16: each facility opens into a continuous, walkable metaverse floor. */
.yt-town-interior-world {
  --yt-interior-parallax-x: 0px;
  --yt-interior-parallax-y: 0px;
  --yt-interior-focus-x: 50%;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 1800px;
  height: max(100%, 520px);
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transform-origin: 0 0;
  will-change: transform;
}
.yt-town-interior-world .yt-town-room { inset: 0; width: 100%; height: 100%; transform: perspective(1500px) rotateY(var(--yt-interior-yaw)) scale(1.003); transform-origin: var(--yt-interior-focus-x) 50%; }
.yt-town-interior-world .yt-town-room::before { left: -4%; right: -4%; }
.yt-town-interior-world .yt-town-room-ceiling i:nth-child(1) { left: 12%; }.yt-town-interior-world .yt-town-room-ceiling i:nth-child(2) { left: 50%; }.yt-town-interior-world .yt-town-room-ceiling i:nth-child(3) { right: 12%; }

.yt-town-room-expanse { --yt-expanse-accent: #6ff2e2; position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.yt-town-room-repair .yt-town-room-expanse { --yt-expanse-accent: #ffc06e; }.yt-town-room-design .yt-town-room-expanse { --yt-expanse-accent: #6ff2e2; }.yt-town-room-global .yt-town-room-expanse { --yt-expanse-accent: #9ea9ff; }
.yt-town-room-expanse::before { content: ""; position: absolute; left: 0; right: 0; top: 8%; height: 40%; background: repeating-linear-gradient(90deg, transparent 0 118px, rgba(174, 244, 237, .08) 119px 121px), repeating-linear-gradient(0deg, transparent 0 44px, rgba(174, 244, 237, .055) 45px 46px); opacity: .8; transform: translate3d(calc(var(--yt-interior-parallax-x) * -.12), calc(var(--yt-interior-parallax-y) * -.2), -30px); }
.yt-town-room-expanse::after { content: ""; position: absolute; left: 0; right: 0; bottom: 13%; height: 12%; border-top: 2px solid color-mix(in srgb, var(--yt-expanse-accent), transparent 62%); border-bottom: 1px solid rgba(255, 255, 255, .07); background: repeating-linear-gradient(90deg, transparent 0 79px, color-mix(in srgb, var(--yt-expanse-accent), transparent 83%) 80px 81px), linear-gradient(180deg, rgba(5, 34, 42, .54), rgba(2, 20, 27, .12)); box-shadow: 0 -10px 30px rgba(3, 19, 26, .38); transform: perspective(520px) rotateX(58deg); transform-origin: 50% 100%; }
.yt-town-room-expanse > span { position: absolute; bottom: 42%; width: 262px; height: 31%; border: 1px solid color-mix(in srgb, var(--yt-expanse-accent), transparent 72%); border-top: 5px solid rgba(184, 233, 226, .24); background: repeating-linear-gradient(90deg, rgba(5, 29, 37, .88) 0 31px, rgba(56, 113, 118, .33) 32px 48px), repeating-linear-gradient(0deg, transparent 0 27px, rgba(184, 239, 232, .12) 28px 30px), linear-gradient(145deg, #163e48, #071f29); box-shadow: 18px 19px 28px rgba(0, 0, 0, .24), inset 0 0 30px rgba(255, 255, 255, .025); opacity: .66; }
.yt-town-room-expanse > span::before { content: "PROCESS CELL"; position: absolute; left: 12px; top: 10px; color: color-mix(in srgb, var(--yt-expanse-accent), #fff 28%); font: 1000 7px/1 Arial, sans-serif; letter-spacing: .18em; }
.yt-town-room-expanse > span::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 12%; height: 3px; background: linear-gradient(90deg, transparent, var(--yt-expanse-accent), transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--yt-expanse-accent), transparent 48%); opacity: .55; }
.yt-town-room-expanse > span:nth-child(1) { left: 2.5%; height: 28%; }.yt-town-room-expanse > span:nth-child(2) { left: 42.8%; bottom: 45%; width: 244px; height: 34%; opacity: .54; }.yt-town-room-expanse > span:nth-child(3) { right: 2.5%; height: 30%; }
.yt-town-room-expanse > i { position: absolute; z-index: 3; top: 31%; width: 390px; height: 20px; border: 1px solid rgba(179, 231, 225, .22); background: repeating-linear-gradient(135deg, rgba(134, 237, 225, .22) 0 2px, transparent 3px 24px), rgba(5, 26, 34, .68); box-shadow: 0 8px 18px rgba(0, 0, 0, .22); transform: perspective(500px) rotateX(8deg); }
.yt-town-room-expanse > i:nth-of-type(1) { left: 18%; }.yt-town-room-expanse > i:nth-of-type(2) { right: 17%; top: 36%; }
.yt-town-room-expanse > b { position: absolute; left: 3%; right: 3%; bottom: 30%; height: 7px; border-top: 1px solid color-mix(in srgb, var(--yt-expanse-accent), transparent 44%); border-bottom: 1px solid rgba(255, 255, 255, .12); background: repeating-linear-gradient(90deg, #193b43 0 78px, #6d8b8c 79px 83px); box-shadow: 0 10px 18px rgba(0, 0, 0, .22), 0 0 12px color-mix(in srgb, var(--yt-expanse-accent), transparent 72%); }
.yt-town-room-expanse > em { position: absolute; left: 50%; top: 42%; width: 330px; height: 210px; border: 1px solid color-mix(in srgb, var(--yt-expanse-accent), transparent 68%); border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--yt-expanse-accent), transparent 72%), transparent 58%); box-shadow: inset 0 0 38px rgba(63, 234, 216, .05), 0 0 34px rgba(0, 0, 0, .18); transform: translateX(-50%); opacity: .58; }

.yt-town-interior-navigation { position: absolute; z-index: 76; left: 50%; top: calc(var(--yt-safe-top) + 80px); display: grid; width: min(540px, calc(100% - 34px)); min-height: 50px; grid-template-columns: minmax(0, 1fr) 150px; gap: 13px; align-items: center; padding: 7px 11px 8px; border: 1px solid rgba(126, 245, 231, .32); border-radius: 14px; color: #eefbf8; background: linear-gradient(110deg, rgba(3, 23, 31, .9), rgba(8, 52, 58, .76)); box-shadow: 0 12px 28px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .06); backdrop-filter: blur(12px); transform: translateX(-50%); pointer-events: none; }
.yt-town-interior-navigation > div { min-width: 0; }.yt-town-interior-navigation small { display: block; overflow: hidden; color: #79eee0; font: 1000 .4rem/1 Arial, sans-serif; letter-spacing: .13em; text-overflow: ellipsis; white-space: nowrap; }.yt-town-interior-navigation strong { display: block; margin-top: 3px; font-size: .72rem; }.yt-town-interior-navigation div > span { display: block; overflow: hidden; margin-top: 2px; color: #a9cbc8; font-size: .47rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-interior-navigation-track { position: relative; display: block; height: 20px; border-top: 1px solid rgba(132, 242, 230, .38); border-bottom: 1px solid rgba(132, 242, 230, .17); background: repeating-linear-gradient(90deg, transparent 0 23px, rgba(134, 239, 226, .22) 24px 25px); }
.yt-town-interior-navigation-track::before,.yt-town-interior-navigation-track::after { position: absolute; bottom: -14px; color: #78c8c1; font: 900 6px/1 Arial, sans-serif; letter-spacing: .1em; }.yt-town-interior-navigation-track::before { content: "WEST"; left: 0; }.yt-town-interior-navigation-track::after { content: "EAST"; right: 0; }
.yt-town-interior-navigation-track > i,.yt-town-interior-navigation-track > em { position: absolute; top: 4px; width: 7px; height: 7px; border: 1px solid #77dfd4; border-radius: 50%; background: #0a3b43; }.yt-town-interior-navigation-track > i { left: 14%; }.yt-town-interior-navigation-track > em { right: 14%; }
.yt-town-interior-navigation-track > b { position: absolute; z-index: 2; left: 50%; top: 50%; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: #ffc857; box-shadow: 0 0 0 4px rgba(255, 200, 87, .15), 0 0 12px rgba(255, 200, 87, .48); transform: translate(-50%, -50%); transition: left .12s linear; }

.yt-town-interior-world .yt-town-room-hotspot { min-width: 164px; bottom: clamp(112px, 16%, 150px); transform: translateZ(46px); }
.yt-town-interior-world .yt-town-room-hotspot-a { left: 238px; right: auto; }.yt-town-interior-world .yt-town-room-hotspot-b { left: 1398px; right: auto; }.yt-town-interior-world .yt-town-room-hotspot-c { left: 818px; right: auto; bottom: clamp(196px, 31%, 286px); transform: translateZ(54px); }
.yt-town-interior-world .yt-town-room-hotspot.is-near { border-color: #ffe07b; color: #ffe594; background: linear-gradient(115deg, rgba(10, 54, 58, .97), rgba(77, 66, 25, .9)); box-shadow: 0 0 0 5px rgba(255, 210, 93, .13), 0 18px 34px rgba(0, 0, 0, .36), 0 0 28px rgba(255, 209, 91, .2); transform: translateZ(62px) translateY(-4px); animation: yt-interior-near 1.15s ease-in-out infinite alternate; }
@keyframes yt-interior-near { to { filter: brightness(1.13); box-shadow: 0 0 0 8px rgba(255, 210, 93, .07), 0 19px 36px rgba(0, 0, 0, .38), 0 0 36px rgba(255, 209, 91, .27); } }

.yt-town-interior-avatar { --yt-interior-avatar-scale: 1; --yt-interior-walk-duration: .24s; position: absolute; z-index: 17; width: 50px; height: 82px; color: #fff; filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, .28)); transform: translate(-50%, -100%) scale(var(--yt-interior-avatar-scale)); transform-origin: 50% 100%; pointer-events: none; will-change: left, top, transform; }
.yt-town-interior-avatar-shadow { position: absolute; z-index: 0; left: 4px; bottom: -2px; width: 43px; height: 13px; border-radius: 50%; background: rgba(0, 10, 15, .48); filter: blur(3px); transform: rotate(-4deg); }
.yt-town-interior-avatar-figure { position: absolute; z-index: 2; left: 6px; bottom: 3px; width: 38px; height: 69px; transform-origin: 50% 100%; transition: transform .12s ease; }
.yt-town-interior-avatar.is-left .yt-town-interior-avatar-figure { transform: rotateY(180deg); }
.yt-town-interior-avatar-head { position: absolute; z-index: 5; left: 10px; top: 0; width: 20px; height: 23px; border: 2px solid rgba(255, 245, 228, .78); border-radius: 48% 48% 43% 43%; background: radial-gradient(circle at 33% 28%, rgba(255, 255, 255, .56), transparent 24%), linear-gradient(120deg, #e4ab83, #b56e53); box-shadow: inset -3px -2px rgba(99, 48, 38, .11); }
.yt-town-interior-avatar-head::before { content: ""; position: absolute; left: -1px; top: -4px; width: 20px; height: 9px; border-radius: 11px 12px 4px 3px; background: linear-gradient(110deg, #183641, #071f29); }
.yt-town-interior-avatar-head::after { content: ""; position: absolute; left: 5px; top: 10px; width: 2px; height: 2px; border-radius: 50%; background: #302a29; box-shadow: 7px 0 #302a29; }
.yt-town-interior-avatar-body { position: absolute; z-index: 3; left: 6px; top: 21px; width: 27px; height: 29px; border: 2px solid rgba(255, 255, 255, .88); border-radius: 9px 9px 5px 5px; background: linear-gradient(105deg, rgba(255, 255, 255, .2), transparent 31%), linear-gradient(90deg, var(--yt-coral), #b94d43); box-shadow: inset -4px 0 rgba(79, 28, 25, .11); }
.yt-town-interior-avatar-body::after { content: "YT"; position: absolute; right: 3px; bottom: 4px; padding: 2px; border-radius: 2px; color: #06313a; background: #8af5e8; font: 1000 4px/1 Arial, sans-serif; }
.yt-town-interior-avatar-legs { position: absolute; z-index: 1; left: 9px; top: 47px; width: 22px; height: 21px; }.yt-town-interior-avatar-legs > i { position: absolute; left: 1px; top: 0; width: 8px; height: 20px; border-radius: 2px 2px 5px 5px; background: linear-gradient(90deg, #284654, #132d3b); transform-origin: 50% 0; }.yt-town-interior-avatar-legs > i:last-child { left: 13px; }
.yt-town-interior-avatar-arms { position: absolute; z-index: 2; left: 1px; top: 25px; width: 37px; height: 25px; }.yt-town-interior-avatar-arms > i { position: absolute; left: 0; top: 0; width: 7px; height: 23px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 5px; background: linear-gradient(90deg, var(--yt-coral), #b94d43); transform-origin: 50% 2px; }.yt-town-interior-avatar-arms > i:last-child { left: 30px; }
.yt-town-interior-avatar > small { position: absolute; z-index: 7; left: 50%; top: -14px; padding: 3px 6px; border: 1px solid rgba(255, 255, 255, .56); border-radius: 99px; color: #dffff9; background: rgba(3, 29, 37, .82); font: 1000 6px/1 Arial, sans-serif; letter-spacing: .14em; transform: translateX(-50%); }
.yt-town-interior-avatar.is-walking .yt-town-interior-avatar-figure { animation: yt-interior-avatar-bob var(--yt-interior-walk-duration) ease-in-out infinite alternate; }.yt-town-interior-avatar.is-walking .yt-town-interior-avatar-legs > i:first-child { animation: yt-interior-avatar-leg var(--yt-interior-walk-duration) ease-in-out infinite alternate; }.yt-town-interior-avatar.is-walking .yt-town-interior-avatar-legs > i:last-child { animation: yt-interior-avatar-leg var(--yt-interior-walk-duration) ease-in-out infinite alternate-reverse; }.yt-town-interior-avatar.is-walking .yt-town-interior-avatar-arms > i:first-child { animation: yt-interior-avatar-arm var(--yt-interior-walk-duration) ease-in-out infinite alternate-reverse; }.yt-town-interior-avatar.is-walking .yt-town-interior-avatar-arms > i:last-child { animation: yt-interior-avatar-arm var(--yt-interior-walk-duration) ease-in-out infinite alternate; }
@keyframes yt-interior-avatar-bob { to { translate: 0 -2px; } } @keyframes yt-interior-avatar-leg { from { transform: rotate(17deg); } to { transform: rotate(-17deg); } } @keyframes yt-interior-avatar-arm { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }
.yt-town-app[data-avatar-color="teal"] .yt-town-interior-avatar-body,.yt-town-app[data-avatar-color="teal"] .yt-town-interior-avatar-arms > i { background: linear-gradient(90deg, #1ea99b, #11716e); }.yt-town-app[data-avatar-color="amber"] .yt-town-interior-avatar-body,.yt-town-app[data-avatar-color="amber"] .yt-town-interior-avatar-arms > i { background: linear-gradient(90deg, #efad35, #b66d22); }.yt-town-app[data-avatar-color="violet"] .yt-town-interior-avatar-body,.yt-town-app[data-avatar-color="violet"] .yt-town-interior-avatar-arms > i { background: linear-gradient(90deg, #7772cb, #4c478d); }

.yt-town-interior-edge-hints { position: absolute; z-index: 72; left: calc(var(--yt-safe-left) + 13px); right: calc(var(--yt-safe-right) + 13px); top: 50%; display: flex; justify-content: space-between; color: rgba(151, 241, 230, .56); font: 1000 7px/1 Arial, sans-serif; letter-spacing: .14em; pointer-events: none; }.yt-town-interior-edge-hints span { padding: 6px 8px; border: 1px solid rgba(132, 234, 222, .18); border-radius: 99px; background: rgba(3, 28, 36, .42); }

.yt-town-interior-action { position: absolute; z-index: 82; right: calc(var(--yt-safe-right) + clamp(18px, 3vw, 34px)); bottom: calc(var(--yt-safe-bottom) + clamp(18px, 3vw, 32px)); display: grid; width: 112px; height: 112px; grid-template-rows: 34px auto auto; place-items: center; align-content: center; gap: 1px; padding: 9px; border: 3px solid rgba(255, 255, 255, .58); border-radius: 50%; color: rgba(255, 255, 255, .7); background: rgba(5, 30, 39, .74); box-shadow: 0 14px 32px rgba(0, 0, 0, .3); backdrop-filter: blur(10px); cursor: not-allowed; opacity: .68; touch-action: manipulation; transition: transform .16s ease, opacity .16s ease, filter .16s ease; }
.yt-town-interior-action > span { display: grid; width: 31px; height: 31px; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: 1.1rem; }.yt-town-interior-action strong { font-size: .88rem; }.yt-town-interior-action small { overflow: hidden; width: 100%; font-size: .45rem; font-weight: 900; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-interior-action.is-ready { border-color: #fff; color: #082d34; background: linear-gradient(145deg, #ffe27e, #ffc34c); box-shadow: inset -8px -9px rgba(151, 91, 10, .12), 0 0 0 6px rgba(255, 205, 86, .13), 0 16px 36px rgba(0, 0, 0, .36); cursor: pointer; opacity: 1; animation: yt-interior-action-ready 1s ease-in-out infinite alternate; }.yt-town-interior-action.is-ready:active { transform: scale(.95); }
@keyframes yt-interior-action-ready { to { filter: drop-shadow(0 0 15px rgba(255, 222, 111, .68)); } }

.yt-town-app.is-interior .yt-town-joystick { z-index: 85; display: grid; }
.yt-town-app.is-interior .yt-town-joystick-ring { border-color: rgba(133, 245, 232, .76); background: radial-gradient(circle, rgba(8, 49, 54, .62) 0 23%, rgba(4, 26, 35, .84) 24% 100%); box-shadow: inset 0 0 0 9px rgba(110, 240, 225, .07), 0 16px 38px rgba(0, 0, 0, .36), 0 0 20px rgba(80, 236, 219, .11); }
.yt-town-app.is-interior .yt-town-joystick > small { color: #a5f7ed; }
.yt-town-app.is-interior .yt-town-interior-guide { z-index: 74; width: min(620px, calc(100% - 300px)); }

@media (max-width: 760px) {
  .yt-town-interior-navigation { top: calc(var(--yt-safe-top) + 70px); width: calc(100% - 20px); min-height: 46px; grid-template-columns: minmax(0, 1fr) 116px; gap: 8px; padding: 6px 9px; }
  .yt-town-interior-navigation small { font-size: .34rem; }.yt-town-interior-navigation strong { font-size: .65rem; }.yt-town-interior-navigation div > span { font-size: .43rem; }
  .yt-town-interior-world .yt-town-room-hotspot { min-width: 148px; }
  .yt-town-interior-action { right: calc(var(--yt-safe-right) + 14px); bottom: calc(var(--yt-safe-bottom) + 15px); width: 108px; height: 108px; }
  .yt-town-app.is-interior .yt-town-interior-guide { bottom: calc(var(--yt-safe-bottom) + 157px); width: calc(100% - 18px); min-height: 74px; }
  .yt-town-interior-edge-hints { display: none; }
}

@media (max-width: 480px) and (orientation: portrait) {
  .yt-town-interior-navigation { grid-template-columns: minmax(0, 1fr) 102px; }
  .yt-town-interior-navigation small { max-width: 180px; }
  .yt-town-app.is-interior .yt-town-interior-guide { grid-template-columns: 42px minmax(0, 1fr) 103px; gap: 6px; padding: 7px; }
  .yt-town-app.is-interior .yt-town-interior-guide > div p { display: -webkit-box; max-height: 2.8em; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .yt-town-app.is-interior .yt-town-interior-guide > button { min-width: 103px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .yt-town-interior-navigation { top: calc(var(--yt-safe-top) + 60px); width: min(470px, calc(100% - 280px)); min-height: 40px; grid-template-columns: minmax(0, 1fr) 112px; padding: 5px 8px; }
  .yt-town-interior-navigation small { display: none; }.yt-town-interior-navigation strong { margin-top: 0; font-size: .62rem; }
  .yt-town-app.is-interior .yt-town-joystick { left: calc(var(--yt-safe-left) + 9px); bottom: calc(var(--yt-safe-bottom) + 9px); }
  .yt-town-interior-action { right: calc(var(--yt-safe-right) + 10px); bottom: calc(var(--yt-safe-bottom) + 10px); width: min(25vh, 100px); height: min(25vh, 100px); }
  .yt-town-app.is-interior .yt-town-interior-guide { bottom: calc(var(--yt-safe-bottom) + 6px); width: min(560px, calc(100% - 260px)); min-height: 60px; }
  .yt-town-interior-world .yt-town-room-hotspot { bottom: 108px; }
}

/* v17: progressive disclosure keeps the city, not the HUD, in focus. */
.yt-town-app[data-hud-mode="arrival"] .yt-town-destination-dock { display: none; }

@media (max-width: 760px), (orientation: landscape) and (max-height: 600px) {
  .yt-town-destination-dock,
  .yt-town-ambience,
  .yt-town-enter-building,
  .yt-town-guide,
  .yt-town-zone-toast { display: none !important; }

  .yt-town-route-guide {
    top: 8px;
    width: min(344px, calc(100% - 30px));
    min-height: 50px;
    grid-template-columns: 34px minmax(0, 1fr) 40px;
    gap: 7px;
    padding: 5px 6px 5px 8px;
    border-radius: 15px;
  }
  .yt-town-route-arrow { width: 32px; height: 32px; border-radius: 10px; font-size: 1.05rem; }
  .yt-town-route-guide button { width: 38px; height: 36px; }
  .yt-town-route-copy > small { font-size: .46rem; }
  .yt-town-route-guide strong { font-size: .69rem; }
  .yt-town-route-copy > span:not(.yt-town-route-progress) { font-size: .57rem; }

  .yt-town-app[data-hud-mode="arrival"] .yt-town-route-guide,
  .yt-town-app[data-hud-mode="route"] .yt-town-social-dock,
  .yt-town-app[data-hud-mode="arrival"] .yt-town-social-dock { display: none !important; }

  .yt-town-talk:disabled {
    width: 76px;
    height: 76px;
    grid-template-rows: 25px auto;
    padding: 7px;
    opacity: .42;
    transform: scale(1);
  }
  .yt-town-talk:disabled .yt-town-talk-icon { width: 28px; height: 21px; border-width: 2px; }
  .yt-town-talk:disabled .yt-town-talk-icon::after { bottom: -5px; border-width: 0 0 2px 2px; }
  .yt-town-talk:disabled .yt-town-talk-icon i { left: 6px; top: 7px; width: 3px; height: 3px; box-shadow: 6px 0 currentColor, 12px 0 currentColor; }
  .yt-town-talk:disabled strong { font-size: .72rem; }
  .yt-town-talk:disabled small { display: none; }
  .yt-town-app[data-hud-mode="arrival"] .yt-town-talk {
    width: clamp(98px, 27vw, 108px);
    height: clamp(98px, 27vw, 108px);
  }
}

/* v20: one clear information layer and three physical controls inside facilities. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 600px) {
  .yt-town-app.is-interior .yt-town-topbar {
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(58px + var(--yt-safe-top));
    padding: calc(6px + var(--yt-safe-top)) calc(9px + var(--yt-safe-right)) 6px calc(9px + var(--yt-safe-left));
  }
  .yt-town-app.is-interior .yt-town-identity,
  .yt-town-app.is-interior .yt-town-top-actions,
  .yt-town-app.is-interior .yt-town-mission-steps,
  .yt-town-app.is-interior .yt-town-interior-navigation { display: none; }
  .yt-town-app.is-interior .yt-town-mission {
    width: 100%;
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 5px;
    padding: 4px 6px 4px 9px;
    border-radius: 12px;
  }
  .yt-town-app.is-interior .yt-town-mission-copy strong {
    display: block;
    overflow: hidden;
    max-height: none;
    font-size: .63rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .yt-town-app.is-interior .yt-town-progress > strong { width: 35px; height: 35px; font-size: .66rem; }
  .yt-town-app.is-interior .yt-town-interior-header {
    left: calc(var(--yt-safe-left) + 7px);
    right: calc(var(--yt-safe-right) + 7px);
    top: 7px;
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px;
    padding: 5px 6px 5px 9px;
    border-radius: 13px;
  }
  .yt-town-app.is-interior .yt-town-interior-header button { min-height: 36px; padding: 5px 8px; }
  .yt-town-app.is-interior .yt-town-interior-guide {
    left: 50%;
    bottom: calc(var(--yt-safe-bottom) + 16px);
    display: block;
    width: 110px;
    min-height: 58px;
    padding: 0;
    border: 0;
    border-radius: 15px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: translateX(-50%);
  }
  .yt-town-app.is-interior .yt-town-interior-guide-avatar { display: none; }
  .yt-town-app.is-interior .yt-town-interior-guide > div {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .yt-town-app.is-interior .yt-town-interior-guide > button {
    width: 110px;
    min-width: 0;
    min-height: 58px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0 5px;
    padding: 7px 8px;
    border-radius: 15px;
    box-shadow: 0 11px 26px rgba(0, 0, 0, .34), 0 0 0 5px rgba(255, 203, 82, .1);
  }
  .yt-town-app.is-interior .yt-town-interior-guide > button > span { font-size: .8rem; }
  .yt-town-app.is-interior .yt-town-interior-guide > button strong { font-size: .56rem; line-height: 1.18; }
  .yt-town-app.is-interior .yt-town-interior-guide > button small { display: none; }
}

/* v22: quiet HUD — show one contextual layer and one primary action at a time. */
.yt-town-ambience,
.yt-town-enter-building,
.yt-town-guide,
.yt-town-zone-toast { display: none !important; }

.yt-town-talk:disabled {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.9);
}
.yt-town-talk.is-ready { visibility: visible; opacity: 1; }
.yt-town-app[data-hud-mode="route"] .yt-town-social-dock,
.yt-town-app[data-hud-mode="arrival"] .yt-town-social-dock { display: none !important; }

@media (max-width: 760px), (orientation: landscape) and (max-height: 600px) {
  .yt-town-mission-steps { display: none; }
}

@media (max-width: 760px) {
  .yt-town-topbar {
    min-height: calc(68px + var(--yt-safe-top));
    padding-top: calc(6px + var(--yt-safe-top));
    padding-bottom: 6px;
  }
  .yt-town-mission { min-height: 52px; padding-top: 5px; padding-bottom: 5px; }
  .yt-town-progress > strong { width: 36px; height: 36px; font-size: .66rem; }
}

.yt-town-experience-control {
  display: grid;
  grid-template-columns: minmax(108px, .5fr) minmax(184px, .8fr) minmax(220px, 1.2fr);
  gap: 8px 12px;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 15px;
  background: rgba(255, 255, 255, .055);
}
.yt-town-experience-control > div:first-child span,
.yt-town-experience-control > div:first-child strong { display: block; }
.yt-town-experience-control > div:first-child span { color: #87cfc6; font-size: .43rem; font-weight: 1000; letter-spacing: .13em; }
.yt-town-experience-control > div:first-child strong { margin-top: 3px; font-size: .68rem; }
.yt-town-camera-view-control { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 5px; align-items: center; }
.yt-town-camera-view-control > span strong,.yt-town-camera-view-control > span small { display: block; }
.yt-town-camera-view-control > span strong { color: #f1fffc; font-size: .54rem; }
.yt-town-camera-view-control > span small { overflow: hidden; margin-top: 2px; color: #8dbcb6; font-size: .4rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-camera-view-control > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.yt-town-camera-view-control button { display: grid; min-width: 0; min-height: 42px; grid-template-columns: 18px minmax(0, 1fr); gap: 4px; place-items: center; padding: 5px 6px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; color: #c8ddda; background: rgba(255, 255, 255, .055); font-size: .46rem; font-weight: 1000; cursor: pointer; touch-action: manipulation; }
.yt-town-camera-view-control button i { position: relative; display: block; width: 16px; height: 13px; border: 1px solid currentColor; border-radius: 8px 8px 5px 5px; opacity: .9; }
.yt-town-camera-view-control button:first-child i::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; background: #113b41; transform: translateX(-50%); }
.yt-town-camera-view-control button:last-child i { height: 10px; border-radius: 50% 0; transform: rotate(45deg); }
.yt-town-camera-view-control button:last-child i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%); }
.yt-town-camera-view-control button[aria-pressed="true"] { border-color: #92f2e0; color: #effffb; background: rgba(66, 211, 188, .2); box-shadow: inset 0 0 0 1px rgba(146, 242, 224, .12); }
.yt-town-camera-view-control button:disabled { cursor: not-allowed; opacity: .38; }
.yt-town-camera-view-control button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.yt-town-map-panel .yt-town-social-dock {
  position: static;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}
.yt-town-map-panel .yt-town-social-dock button,
.yt-town-map-panel .yt-town-social-dock #town-sound-toggle {
  position: static;
  left: auto;
  bottom: auto;
  width: auto;
  min-width: 0;
  height: 42px;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  transform: none;
}
.yt-town-map-panel .yt-town-social-dock button > span { font-size: .9rem; }
.yt-town-map-panel .yt-town-social-dock small { position: static; width: auto; height: auto; overflow: hidden; font-size: .46rem; text-overflow: ellipsis; white-space: nowrap; clip-path: none; }
.yt-town-map-panel .yt-town-avatar-palette {
  position: static;
  grid-column: 1 / -1;
  display: grid;
  width: 100%;
  margin-top: 1px;
  padding: 9px;
  box-shadow: none;
  transform: none;
}
.yt-town-map-panel .yt-town-avatar-palette[hidden] { display: none !important; }

@media (max-width: 760px) {
  .yt-town-experience-control { grid-template-columns: 1fr; gap: 7px; }
  .yt-town-experience-control > div:first-child { display: flex; align-items: baseline; gap: 7px; }
  .yt-town-camera-view-control { grid-template-columns: 72px minmax(0, 1fr); }
}

@media (max-width: 480px) and (orientation: portrait) {
  .yt-town-map-panel .yt-town-avatar-palette { grid-template-columns: 54px minmax(0, 1fr); gap: 8px; }
  .yt-town-map-panel .yt-town-avatar-preview { width: 54px; height: 84px; }
  .yt-town-avatar-row { grid-template-columns: 34px repeat(4, minmax(34px, 1fr)); gap: 5px; }
  .yt-town-avatar-row button { width: 100%; max-width: 40px; height: 40px; }
  .yt-town-outfit-row { grid-template-columns: 34px repeat(2, minmax(72px, 1fr)); gap: 5px; }
}

/* v27: a single contextual HUD surface. The street mission returns after exit. */
.yt-town-app.is-interior { grid-template-rows: minmax(0, 1fr); }
.yt-town-app.is-interior > .yt-town-topbar { display: none; }
.yt-town-app.is-interior > .yt-town-viewport { grid-row: 1; height: 100%; }
.yt-town-app.is-interior .yt-town-interior-header { top: calc(var(--yt-safe-top) + 12px); }

@media (max-width: 760px), (orientation: landscape) and (max-height: 600px) {
  .yt-town-app[data-hud-mode="route"] .yt-town-topbar,
  .yt-town-app[data-hud-mode="arrival"] .yt-town-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    min-height: calc(58px + var(--yt-safe-top));
    padding: calc(5px + var(--yt-safe-top)) calc(7px + var(--yt-safe-right)) 5px calc(7px + var(--yt-safe-left));
  }
  .yt-town-app[data-hud-mode="route"] .yt-town-identity,
  .yt-town-app[data-hud-mode="arrival"] .yt-town-identity,
  .yt-town-app[data-hud-mode="route"] .yt-town-top-actions > :not(.yt-town-online-toggle):not(.yt-town-goal-open):not(.yt-town-map-open),
  .yt-town-app[data-hud-mode="arrival"] .yt-town-top-actions > :not(.yt-town-online-toggle):not(.yt-town-goal-open):not(.yt-town-map-open) { display: none; }
  .yt-town-app[data-hud-mode="route"] .yt-town-top-actions,
  .yt-town-app[data-hud-mode="arrival"] .yt-town-top-actions { display: flex; }
  .yt-town-app[data-hud-mode="route"] .yt-town-mission,
  .yt-town-app[data-hud-mode="arrival"] .yt-town-mission {
    min-height: 46px;
    padding: 4px 6px 4px 9px;
    border-radius: 12px;
  }
  .yt-town-app[data-hud-mode="route"] .yt-town-mission-copy strong,
  .yt-town-app[data-hud-mode="arrival"] .yt-town-mission-copy strong { font-size: .67rem; }
  .yt-town-app[data-hud-mode="route"] .yt-town-progress > strong,
  .yt-town-app[data-hud-mode="arrival"] .yt-town-progress > strong { width: 35px; height: 35px; font-size: .64rem; }
  .yt-town-app.is-interior .yt-town-interior-header { top: calc(var(--yt-safe-top) + 7px); }
}

@media (orientation: landscape) and (max-height: 600px) {
  .yt-town-app.is-interior .yt-town-interior-header {
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }
}

/* v28: the conversation lives beside the 3D room instead of covering it. */
.yt-town-conversation-dock {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 calc(14px + var(--yt-safe-right)) calc(10px + var(--yt-safe-bottom)) calc(14px + var(--yt-safe-left));
  pointer-events: none;
}
.yt-town-conversation-dock .yt-town-dialog-card {
  display: grid;
  width: min(1060px, 100%);
  max-height: min(310px, calc(100dvh - 110px - var(--yt-safe-top) - var(--yt-safe-bottom)));
  grid-template-columns: 68px minmax(160px, .8fr) minmax(280px, 1.5fr) minmax(205px, .72fr);
  grid-template-rows: auto auto auto auto;
  gap: 7px 14px;
  align-items: center;
  padding: 14px 16px 11px;
  overflow-y: auto;
  border-color: rgba(137, 245, 232, .58);
  border-radius: 21px 21px 9px 9px;
  color: #f5fffd;
  background: linear-gradient(108deg, rgba(3, 25, 34, .97), rgba(8, 52, 57, .94));
  box-shadow: 0 -16px 48px rgba(1, 15, 21, .42), inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px) saturate(1.08);
  pointer-events: auto;
  animation: yt-conversation-dock-in .22s ease-out both;
}
.yt-town-conversation-dock .yt-town-modal-close {
  right: 8px;
  top: 8px;
  width: 32px;
  height: 32px;
  border-color: rgba(255, 255, 255, .2);
  color: #eafffc;
  background: rgba(255, 255, 255, .08);
  font-size: .92rem;
}
.yt-town-conversation-dock .yt-town-dialog-portrait {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 64px;
  height: 64px;
  border-width: 3px;
  border-radius: 18px 18px 18px 5px;
}
.yt-town-conversation-dock .yt-town-dialog-portrait::before { left: 18px; top: 11px; width: 25px; height: 25px; border-width: 3px; }
.yt-town-conversation-dock .yt-town-dialog-portrait i { left: 17px; top: 7px; width: 29px; height: 16px; }
.yt-town-conversation-dock .yt-town-dialog-portrait b { left: 10px; bottom: -13px; width: 44px; height: 38px; border-width: 3px; }
.yt-town-conversation-dock .yt-town-dialog-heading { grid-column: 2; grid-row: 1; align-self: center; padding-right: 0; }
.yt-town-conversation-dock .yt-town-dialog-heading p { margin: 0; color: #7bf3e4; font-size: .52rem; letter-spacing: .08em; }
.yt-town-conversation-dock .yt-town-dialog-heading h2 { margin-top: 3px; color: #fff; font-size: clamp(.84rem, 1.5vw, 1.08rem); letter-spacing: -.02em; }
.yt-town-conversation-dock .yt-town-dialog-heading > span { margin-top: 5px; padding: 4px 7px; color: #092e35; background: #8ff5e8; font-size: .5rem; }
.yt-town-conversation-dock .yt-town-dialog-copy {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  margin: 0;
  color: #c5dcda;
  font-size: .7rem;
  line-height: 1.55;
}
.yt-town-conversation-dock .yt-town-dialog-card ul {
  grid-column: 2 / 4;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}
.yt-town-conversation-dock .yt-town-dialog-card li {
  min-height: 34px;
  padding: 7px 7px 6px 26px;
  border-color: rgba(150, 221, 213, .18);
  border-radius: 9px;
  color: #d8ebe8;
  background: rgba(255, 255, 255, .055);
  font-size: .52rem;
  line-height: 1.35;
}
.yt-town-conversation-dock .yt-town-dialog-card li::before { left: 7px; top: 7px; width: 14px; height: 14px; color: #082d34; background: #75ebdd; font-size: .46rem; }
.yt-town-conversation-dock .yt-town-dialog-achievement {
  grid-column: 2 / 4;
  grid-row: 3;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(255, 217, 105, .34);
  border-radius: 9px;
  color: #ffe99e;
  background: rgba(255, 199, 73, .1);
  font-size: .56rem;
}
.yt-town-conversation-dock .yt-town-dialog-actions {
  grid-column: 4;
  grid-row: 1 / 4;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 30px 0 0;
}
.yt-town-conversation-dock .yt-town-dialog-actions .yt-town-cta,
.yt-town-conversation-dock .yt-town-dialog-actions button {
  min-height: 43px;
  padding: 7px 10px;
  border-radius: 11px;
  font-size: .65rem;
}
.yt-town-conversation-dock .yt-town-dialog-actions .yt-town-cta { border-color: rgba(136, 255, 241, .75); color: #082e34; background: linear-gradient(145deg, #8ff7e9, #43c6ba); box-shadow: 0 7px 18px rgba(53, 214, 197, .15); }
.yt-town-conversation-dock .yt-town-dialog-actions button { border-color: rgba(255, 255, 255, .25); color: #fff; background: rgba(255, 255, 255, .08); }
.yt-town-conversation-dock .yt-town-dialog-card > small {
  grid-column: 1 / -1;
  grid-row: 4;
  margin: 0;
  color: #8fb0ad;
  font-size: .45rem;
  line-height: 1.3;
}
.yt-town-app[data-conversation="open"] .yt-town-joystick,
.yt-town-app[data-conversation="open"] .yt-town-interior-action,
.yt-town-app[data-conversation="open"] .yt-town-interior-guide {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
@keyframes yt-conversation-dock-in { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 760px) {
  .yt-town-conversation-dock { padding: 0 calc(6px + var(--yt-safe-right)) calc(5px + var(--yt-safe-bottom)) calc(6px + var(--yt-safe-left)); }
  .yt-town-conversation-dock .yt-town-dialog-card {
    width: 100%;
    max-height: min(46dvh, 360px);
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    gap: 5px 8px;
    padding: 10px 9px 8px;
    border-radius: 17px 17px 7px 7px;
  }
  .yt-town-conversation-dock .yt-town-modal-close { right: 7px; top: 7px; width: 29px; height: 29px; }
  .yt-town-conversation-dock .yt-town-dialog-portrait { grid-column: 1; grid-row: 1; width: 46px; height: 46px; border-width: 2px; border-radius: 14px 14px 14px 4px; }
  .yt-town-conversation-dock .yt-town-dialog-portrait::before { left: 13px; top: 8px; width: 19px; height: 19px; border-width: 2px; }
  .yt-town-conversation-dock .yt-town-dialog-portrait i { left: 12px; top: 5px; width: 22px; height: 12px; }
  .yt-town-conversation-dock .yt-town-dialog-portrait b { left: 7px; bottom: -10px; width: 32px; height: 28px; border-width: 2px; }
  .yt-town-conversation-dock .yt-town-dialog-heading { grid-column: 2; grid-row: 1; padding-right: 31px; }
  .yt-town-conversation-dock .yt-town-dialog-heading p { font-size: .44rem; }
  .yt-town-conversation-dock .yt-town-dialog-heading h2 { margin-top: 2px; font-size: .76rem; }
  .yt-town-conversation-dock .yt-town-dialog-heading > span { margin-top: 3px; padding: 3px 6px; font-size: .43rem; }
  .yt-town-conversation-dock .yt-town-dialog-copy { grid-column: 1 / -1; grid-row: 2; display: -webkit-box; overflow: hidden; max-height: 2.8em; font-size: .58rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .yt-town-conversation-dock .yt-town-dialog-card ul { grid-column: 1 / -1; grid-row: 3; gap: 4px; }
  .yt-town-conversation-dock .yt-town-dialog-card li { min-height: 35px; padding: 6px 4px 5px 19px; font-size: .45rem; }
  .yt-town-conversation-dock .yt-town-dialog-card li::before { left: 4px; top: 6px; width: 12px; height: 12px; font-size: .4rem; }
  .yt-town-conversation-dock .yt-town-dialog-achievement { grid-column: 1 / -1; grid-row: 4; padding: 6px 7px; font-size: .49rem; }
  .yt-town-conversation-dock .yt-town-dialog-actions { grid-column: 1 / -1; grid-row: 5; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0; }
  .yt-town-conversation-dock .yt-town-dialog-actions .yt-town-cta,
  .yt-town-conversation-dock .yt-town-dialog-actions button { min-height: 42px; padding: 6px; font-size: .56rem; }
  .yt-town-conversation-dock .yt-town-dialog-card > small { grid-column: 1 / -1; grid-row: 6; font-size: .4rem; white-space: nowrap; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .yt-town-conversation-dock { padding-right: calc(6px + var(--yt-safe-right)); padding-bottom: calc(4px + var(--yt-safe-bottom)); padding-left: calc(6px + var(--yt-safe-left)); }
  .yt-town-conversation-dock .yt-town-dialog-card {
    max-height: min(48dvh, 186px);
    grid-template-columns: 42px minmax(130px, .65fr) minmax(230px, 1.35fr) minmax(170px, .7fr);
    grid-template-rows: auto auto auto;
    gap: 4px 8px;
    padding: 7px 8px 6px;
    border-radius: 14px 14px 6px 6px;
  }
  .yt-town-conversation-dock .yt-town-dialog-portrait { grid-column: 1; grid-row: 1 / 3; width: 40px; height: 40px; }
  .yt-town-conversation-dock .yt-town-dialog-heading { grid-column: 2; grid-row: 1; padding-right: 0; }
  .yt-town-conversation-dock .yt-town-dialog-heading h2 { font-size: .68rem; }
  .yt-town-conversation-dock .yt-town-dialog-heading > span { margin-top: 2px; }
  .yt-town-conversation-dock .yt-town-dialog-copy { grid-column: 3; grid-row: 1; max-height: 2.7em; font-size: .51rem; }
  .yt-town-conversation-dock .yt-town-dialog-card ul { grid-column: 2 / 4; grid-row: 2; }
  .yt-town-conversation-dock .yt-town-dialog-card li { min-height: 28px; padding-top: 4px; padding-bottom: 3px; font-size: .41rem; }
  .yt-town-conversation-dock .yt-town-dialog-card li::before { top: 5px; }
  .yt-town-conversation-dock .yt-town-dialog-achievement { grid-column: 2 / 4; grid-row: 3; padding: 4px 6px; font-size: .43rem; }
  .yt-town-conversation-dock .yt-town-dialog-actions { grid-column: 4; grid-row: 1 / 4; grid-template-columns: 1fr; gap: 4px; padding: 28px 0 0; }
  .yt-town-conversation-dock .yt-town-dialog-actions .yt-town-cta,
  .yt-town-conversation-dock .yt-town-dialog-actions button { min-height: 35px; font-size: .5rem; }
  .yt-town-conversation-dock .yt-town-dialog-card > small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .yt-town-truck { --yt-vehicle-x: 520px !important; }
  .yt-town-van { --yt-vehicle-x: 900px !important; }
  .yt-town-shuttle { --yt-vehicle-x: 190px !important; }
  .yt-town-cloud-shadows { transform: translate3d(45px, 15px, 0); }
  .yt-town-forklift { transform: translateX(32px); }
  .yt-town-agv { transform: translateX(120px); }
  .yt-town-drone { transform: translate3d(180px, 0, 0); }
  .yt-town-ship { transform: rotate(4deg); }
  .yt-town-media-ticker i { transform: translateX(-360px); }
  .yt-town-searchlights i { transform: rotate(0); }
  .yt-town-room-machine > span i { transform: translate(-50%, -50%); }
  .yt-town-room-hologram b { transform: translateX(-50%) rotateX(64deg); }
  .yt-town-skyrail > span { transform: translateX(720px); }
  .yt-citizen:nth-child(2) { transform: translate(56px, 38px); opacity: 1; }
  .yt-citizen:nth-child(4) { transform: translate(-52px, 45px); opacity: 1; }
  .yt-citizen:nth-child(6) { transform: translate(-79px, 34px); opacity: 1; }
  .yt-citizen:nth-child(8) { transform: translate(43px, -31px); opacity: 1; }
  .yt-town-signals i { opacity: 1; }
  .yt-town-signals b { opacity: .15; }
  .yt-town-spatial-layer-far { transform: translate3d(48px, 10px, -90px) scale(1.055); }
  .yt-town-spatial-layer-mid { transform: translate3d(28px, 6px, -35px) scale(1.025); }
  .yt-building-tower-shell { transform: perspective(780px) rotateX(-1.2deg) rotateY(var(--yt-building-yaw)); }
  .yt-building-podium { transform: perspective(760px) rotateY(var(--yt-podium-yaw)); }
  .yt-building-glass-volume { transform: translate3d(0, 0, 24px); }
  .yt-town-room { transform: perspective(1200px) rotateY(0deg) scale(1.018); }
  .yt-town-room-crew i { animation: none; }
}

@media (prefers-contrast: more) {
  .yt-town-topbar,
  .yt-town-route-guide,
  .yt-town-guide,
  .yt-town-transition,
  .yt-town-help-panel,
  .yt-town-goal-panel,
  .yt-town-interior-guide,
  .yt-town-interior-header { background: #071c20; }
  .yt-building-status,
  .yt-town-talk:disabled { background: #071c20; opacity: 1; }
  .yt-town-room-hotspot { border-width: 2px; background: #071c20; }
}

/* v30: one proximity-bound spatial media console, embedded in the existing facility guide. */
.yt-town-interior-guide-copy { min-width: 0; }
.yt-town-interior-guide.is-exhibit {
  width: min(860px, calc(100% - 300px));
  min-height: 104px;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 9px;
  padding: 7px;
}
.yt-town-interior-guide.is-exhibit > .yt-town-interior-guide-avatar,
.yt-town-interior-guide.is-exhibit > .yt-town-interior-guide-copy { display: none; }
.yt-town-interior-guide.is-exhibit > #town-interior-talk { grid-column: 2; min-width: 128px; min-height: 76px; }

.yt-town-interior-media {
  --yt-media-accent: #68ecdd;
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 88px;
  grid-column: 1;
  grid-template-columns: 126px minmax(0, 1fr) 88px;
  gap: 9px;
  align-items: stretch;
  padding: 5px;
  overflow: hidden;
  border: 1px solid rgba(140, 242, 230, .25);
  border-radius: 14px;
  background: linear-gradient(112deg, rgba(6, 42, 49, .95), rgba(4, 23, 33, .91));
  box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}
.yt-town-interior-media[data-kind="product"] { --yt-media-accent: #ffca65; }
.yt-town-interior-media[data-kind="event"] { --yt-media-accent: #b8a8ff; }
.yt-town-interior-media-screen {
  position: relative;
  min-width: 0;
  min-height: 76px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--yt-media-accent) 58%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(rgba(115, 241, 224, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 241, 224, .08) 1px, transparent 1px),
    radial-gradient(circle at 53% 46%, color-mix(in srgb, var(--yt-media-accent) 25%, transparent), transparent 47%),
    #061e27;
  background-size: 12px 12px, 12px 12px, auto, auto;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .42);
}
.yt-town-interior-media-screen::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: calc(var(--yt-media-progress, 0) * 82% + 5%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--yt-media-accent), transparent);
  box-shadow: 0 0 8px var(--yt-media-accent);
  opacity: .7;
}
.yt-town-interior-media-screen > span {
  position: absolute;
  z-index: 7;
  left: 6px;
  top: 5px;
  display: grid;
  width: 23px;
  height: 17px;
  place-items: center;
  border-radius: 4px;
  color: #06262d;
  background: var(--yt-media-accent);
  font: 1000 .48rem/1 Arial, sans-serif;
}
.yt-town-interior-media-screen > small {
  position: absolute;
  z-index: 7;
  right: 6px;
  top: 7px;
  color: #d7fffa;
  font: 900 .42rem/1 Arial, sans-serif;
  letter-spacing: .08em;
}
.yt-town-interior-media-visual { position: absolute; inset: 18px 9px 10px; perspective: 110px; transform-style: preserve-3d; }
.yt-town-interior-media-visual i,
.yt-town-interior-media-visual b,
.yt-town-interior-media-visual em { position: absolute; display: block; font-style: normal; }
.yt-town-interior-media-visual i {
  left: 50%;
  top: 52%;
  width: 52px;
  height: 30px;
  border: 2px solid var(--yt-media-accent);
  border-radius: 5px;
  box-shadow: inset 0 0 15px color-mix(in srgb, var(--yt-media-accent) 24%, transparent), 0 0 11px color-mix(in srgb, var(--yt-media-accent) 42%, transparent);
  transform: translate(-50%, -50%) rotateX(61deg) rotateZ(-13deg);
}
.yt-town-interior-media-visual b {
  left: 50%;
  top: 51%;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(226, 255, 250, .8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.yt-town-interior-media-visual b::before,
.yt-town-interior-media-visual b::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 1px;
  background: var(--yt-media-accent);
  opacity: .65;
  transform: translate(-50%, -50%) rotate(38deg);
}
.yt-town-interior-media-visual b::after { transform: translate(-50%, -50%) rotate(-38deg); }
.yt-town-interior-media-visual em {
  left: 50%;
  bottom: 1px;
  width: 68px;
  height: 5px;
  border-radius: 50%;
  background: var(--yt-media-accent);
  filter: blur(5px);
  opacity: .34;
  transform: translateX(-50%);
}
.yt-town-interior-media[data-state="playing"] .yt-town-interior-media-visual i { animation: yt-spatial-showreel-object 2.7s linear infinite; }
.yt-town-interior-media[data-state="playing"] .yt-town-interior-media-visual b { animation: yt-spatial-showreel-orbit 1.9s linear infinite; }
.yt-town-interior-media[data-state="playing"] .yt-town-interior-media-screen { box-shadow: inset 0 0 28px color-mix(in srgb, var(--yt-media-accent) 13%, transparent), 0 0 12px color-mix(in srgb, var(--yt-media-accent) 12%, transparent); }
@keyframes yt-spatial-showreel-object { to { transform: translate(-50%, -50%) rotateX(61deg) rotateZ(347deg); } }
@keyframes yt-spatial-showreel-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

.yt-town-interior-media-progress { position: absolute; z-index: 8; left: 6px; right: 6px; bottom: 5px; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.yt-town-interior-media-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--yt-media-accent); box-shadow: 0 0 7px var(--yt-media-accent); }
.yt-town-interior-media-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 3px 0; }
.yt-town-interior-media-copy > small { overflow: hidden; color: var(--yt-media-accent); font: 1000 .42rem/1 Arial, sans-serif; letter-spacing: .12em; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-interior-media-copy > strong { overflow: hidden; margin-top: 5px; color: #fff; font-size: .76rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-interior-media-copy > span { overflow: hidden; margin-top: 3px; color: #a9c9c7; font-size: .48rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-interior-media-copy > .yt-town-interior-media-live { display: flex; align-items: center; gap: 5px; overflow: hidden; margin-top: 4px; color: #91f7df; font: normal 1000 .46rem/1.15 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-interior-media-copy > .yt-town-interior-media-live::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #64f5cb; box-shadow: 0 0 8px rgba(100, 245, 203, .85); }
.yt-town-interior-media-copy > .yt-town-interior-media-live[hidden] { display: none; }
.yt-town-interior-media-copy > p { overflow: hidden; margin: 7px 0 0; color: #edfffc; font-size: .56rem; font-weight: 900; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-interior-media-toggle {
  align-self: stretch;
  min-width: 0;
  min-height: 54px;
  margin-top: 23px;
  padding: 6px 5px;
  border: 1px solid color-mix(in srgb, var(--yt-media-accent) 75%, #fff);
  border-radius: 10px;
  color: #062b31;
  background: var(--yt-media-accent);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--yt-media-accent) 18%, transparent);
  cursor: pointer;
  touch-action: manipulation;
}
.yt-town-interior-media-toggle > span,
.yt-town-interior-media-toggle > strong,
.yt-town-interior-media-toggle > small { display: block; }
.yt-town-interior-media-toggle > span { font: 1000 .86rem/1 Arial, sans-serif; }
.yt-town-interior-media-toggle > strong { margin-top: 4px; font-size: .56rem; }
.yt-town-interior-media-toggle > small { margin-top: 2px; font-size: .37rem; font-weight: 900; }
.yt-town-interior-media[data-state="playing"] .yt-town-interior-media-toggle { color: #eafffb; background: rgba(18, 94, 97, .9); }
.yt-town-interior-media[data-state="complete"] .yt-town-interior-media-toggle { color: #062b31; background: #8ff3bb; }
.yt-town-interior-media-close {
  position: absolute;
  z-index: 12;
  right: 4px;
  top: 4px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: #fff;
  background: rgba(5, 24, 32, .82);
  font-size: .76rem;
  cursor: pointer;
  touch-action: manipulation;
}
.yt-town-interior-media-toggle:active,
.yt-town-interior-media-close:active { transform: scale(.96); }
.yt-town-interior-media-toggle:focus-visible,
.yt-town-interior-media-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.yt-town-tenant-profile-open {
  display: inline-flex;
  width: fit-content;
  min-height: 20px;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--yt-media-accent) 44%, transparent);
  border-radius: 99px;
  color: #dffef8;
  background: rgba(255, 255, 255, .055);
  font-size: .46rem;
  font-weight: 1000;
  letter-spacing: .04em;
  cursor: pointer;
  touch-action: manipulation;
}
.yt-town-tenant-profile-open i { color: var(--yt-media-accent); font-style: normal; }
.yt-town-tenant-profile-open:active { transform: scale(.97); }
.yt-town-tenant-profile-open:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* v52: tenant information lives inside the selected exhibit console. It is
   an inline, data-backed view—not another modal or floating HUD surface. */
.yt-town-tenant-profile[hidden] { display: none !important; }
.yt-town-interior-media[data-view="tenant"] {
  min-height: 154px;
  grid-template-columns: minmax(0, 1fr) !important;
  overflow: visible;
}
.yt-town-interior-media[data-view="tenant"] > .yt-town-interior-media-screen,
.yt-town-interior-media[data-view="tenant"] > .yt-town-interior-media-copy,
.yt-town-interior-media[data-view="tenant"] > .yt-town-interior-media-toggle { display: none !important; }
.yt-town-interior-guide.is-tenant > #town-interior-talk { display: none !important; }
.yt-town-tenant-profile {
  display: grid;
  min-width: 0;
  max-height: min(270px, calc(100dvh - 240px));
  grid-column: 1 / -1;
  grid-template-columns: minmax(138px, .78fr) minmax(180px, 1.14fr) minmax(168px, 1fr);
  gap: 9px 13px;
  align-items: start;
  padding: 9px 31px 8px 9px;
  overflow-y: auto;
  border-radius: 10px;
  color: #edfffb;
  background: linear-gradient(120deg, color-mix(in srgb, var(--yt-media-accent) 7%, rgba(4, 29, 37, .98)), rgba(3, 22, 30, .98));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.yt-town-tenant-profile:focus { outline: none; }
.yt-town-tenant-profile-identity { display: flex; min-width: 0; flex-direction: column; }
.yt-town-tenant-profile-identity > small { color: var(--yt-media-accent); font: 1000 .43rem/1.1 Arial, sans-serif; letter-spacing: .12em; }
.yt-town-tenant-profile-identity > strong { margin-top: 6px; color: #fff; font-size: .84rem; line-height: 1.15; }
.yt-town-tenant-profile-identity > span { width: fit-content; margin-top: 6px; padding: 3px 6px; border-radius: 99px; color: #082c31; background: #8ff3bb; font-size: .42rem; font-weight: 1000; }
.yt-town-tenant-profile-identity > em { margin-top: 6px; color: #adcbc8; font-size: .46rem; font-style: normal; font-weight: 800; line-height: 1.3; }
.yt-town-tenant-profile > p { margin: 0; color: #e8f8f6; font-size: .55rem; font-weight: 750; line-height: 1.55; }
.yt-town-tenant-profile > ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.yt-town-tenant-profile > ul li { position: relative; padding-left: 13px; color: #d5eeeb; font-size: .5rem; font-weight: 850; line-height: 1.35; }
.yt-town-tenant-profile > ul li::before { content: "✓"; position: absolute; left: 0; color: var(--yt-media-accent); }
.yt-town-tenant-profile-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 6px; }
.yt-town-tenant-profile-actions > a,
.yt-town-tenant-profile-actions > button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--yt-media-accent) 55%, transparent); border-radius: 9px; color: #eafffb; background: rgba(255, 255, 255, .06); font-size: .53rem; font-weight: 1000; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.yt-town-tenant-profile-actions > a:nth-child(2) { color: #062b31; background: var(--yt-media-accent); }
.yt-town-tenant-profile-actions > button { margin-left: auto; }
.yt-town-tenant-profile-actions > a:active,
.yt-town-tenant-profile-actions > button:active { transform: scale(.97); }
.yt-town-tenant-profile-actions > a:focus-visible,
.yt-town-tenant-profile-actions > button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.yt-town-tenant-profile-privacy { grid-column: 1 / -1; color: #86aaa7; font-size: .39rem; font-weight: 750; line-height: 1.3; }

/* v49: the in-room WebGL display is the primary exhibit surface. The dock is
   reduced to a quiet transport control instead of duplicating another screen. */
.yt-town-app[data-town-version="v56"] .yt-town-interior-guide.is-exhibit {
  width: min(610px, calc(100% - 300px));
  grid-template-columns: minmax(0, 1fr);
}
.yt-town-app[data-town-version="v56"][data-world-display-state]:not([data-world-display-state="idle"]) .yt-town-interior-media {
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 10px;
}
.yt-town-app[data-town-version="v56"][data-world-display-state]:not([data-world-display-state="idle"]) .yt-town-interior-media::after {
  content: "";
  position: absolute;
  z-index: 14;
  left: 8px;
  bottom: 0;
  width: calc((100% - 16px) * var(--yt-media-progress, 0));
  height: 3px;
  border-radius: 99px;
  background: var(--yt-media-accent);
  box-shadow: 0 0 9px var(--yt-media-accent);
  pointer-events: none;
  transition: width .16s linear;
}
.yt-town-app[data-town-version="v56"][data-world-display-state]:not([data-world-display-state="idle"]) .yt-town-interior-media-screen { display: none; }
.yt-town-app[data-town-version="v56"][data-world-display-state="playing"] .yt-town-interior-media {
  border-color: color-mix(in srgb, var(--yt-media-accent) 58%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 0 18px color-mix(in srgb, var(--yt-media-accent) 11%, transparent);
}

@media (max-width: 760px), (orientation: landscape) and (max-height: 600px) {
  .yt-town-app.is-interior .yt-town-interior-guide.is-exhibit {
    left: calc(var(--yt-safe-left) + 9px);
    right: calc(var(--yt-safe-right) + 9px);
    bottom: calc(var(--yt-safe-bottom) + 137px);
    display: block;
    width: auto;
    min-height: 108px;
    padding: 5px;
    border: 1px solid rgba(139, 238, 226, .34);
    border-radius: 16px;
    background: linear-gradient(112deg, rgba(3, 26, 35, .96), rgba(8, 48, 53, .93));
    box-shadow: 0 18px 38px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
    transform: none;
  }
  .yt-town-app.is-interior .yt-town-interior-guide.is-exhibit > #town-interior-talk { display: none; }
  .yt-town-app.is-interior .yt-town-interior-guide.is-exhibit .yt-town-interior-media {
    display: grid;
    min-height: 96px;
    grid-template-columns: 86px minmax(0, 1fr) 67px;
    gap: 6px;
    padding: 4px;
    border-radius: 12px;
  }
  .yt-town-app.is-interior .yt-town-interior-media-screen { min-height: 86px; }
  .yt-town-app.is-interior .yt-town-interior-media-copy > small { font-size: .36rem; }
  .yt-town-app.is-interior .yt-town-interior-media-copy > strong { margin-top: 4px; font-size: .64rem; }
  .yt-town-app.is-interior .yt-town-interior-media-copy > span { font-size: .4rem; }
  .yt-town-app.is-interior .yt-town-interior-media-copy > .yt-town-interior-media-live { margin-top: 3px; font-size: .4rem; }
  .yt-town-app.is-interior .yt-town-interior-media-copy > p { margin-top: 6px; font-size: .48rem; }
  .yt-town-app.is-interior .yt-town-interior-media-toggle { min-height: 56px; margin-top: 25px; padding: 5px 3px; }
  .yt-town-app.is-interior .yt-town-interior-media-toggle > strong { font-size: .5rem; }
  .yt-town-app.is-interior .yt-town-interior-media-toggle > small { font-size: .33rem; }
  .yt-town-app[data-town-version="v56"].is-interior .yt-town-interior-guide.is-exhibit {
    min-height: 78px;
  }
  .yt-town-app[data-town-version="v56"].is-interior[data-world-display-state]:not([data-world-display-state="idle"]) .yt-town-interior-media {
    min-height: 68px;
    grid-template-columns: minmax(0, 1fr) 68px;
  }
  .yt-town-app[data-town-version="v56"].is-interior .yt-town-interior-media-toggle {
    min-height: 48px;
    margin-top: 17px;
  }
  .yt-town-app.is-interior .yt-town-interior-media[data-view="tenant"] { min-height: 190px; }
  .yt-town-app.is-interior .yt-town-interior-guide.is-exhibit.is-tenant { bottom: calc(var(--yt-safe-bottom) + 166px); }
  .yt-town-app.is-interior .yt-town-tenant-profile {
    max-height: min(260px, calc(100dvh - 272px));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px 10px;
    padding: 9px 28px 8px 8px;
  }
  .yt-town-app.is-interior .yt-town-tenant-profile-identity { grid-column: 1 / -1; }
  .yt-town-app.is-interior .yt-town-tenant-profile-identity > strong { font-size: .76rem; }
  .yt-town-app.is-interior .yt-town-tenant-profile > p { font-size: .53rem; line-height: 1.45; }
  .yt-town-app.is-interior .yt-town-tenant-profile > ul li { font-size: .49rem; }
  .yt-town-app.is-interior .yt-town-tenant-profile-actions > a,
  .yt-town-app.is-interior .yt-town-tenant-profile-actions > button { min-height: 32px; flex: 1 1 auto; padding: 6px 8px; }
  .yt-town-app.is-interior .yt-town-tenant-profile-actions > button { margin-left: 0; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .yt-town-app.is-interior .yt-town-interior-guide.is-exhibit {
    left: 50%;
    right: auto;
    bottom: calc(var(--yt-safe-bottom) + 6px);
    width: min(564px, calc(100% - 280px));
    min-height: 72px;
    padding: 3px;
    transform: translateX(-50%);
  }
  .yt-town-app.is-interior .yt-town-interior-guide.is-exhibit .yt-town-interior-media { min-height: 64px; grid-template-columns: 76px minmax(0, 1fr) 64px; }
  .yt-town-app.is-interior .yt-town-interior-media-screen { min-height: 62px; }
  .yt-town-app.is-interior .yt-town-interior-media-copy > strong { margin-top: 2px; font-size: .58rem; }
  .yt-town-app.is-interior .yt-town-interior-media-copy > span { margin-top: 2px; }
  .yt-town-app.is-interior .yt-town-interior-media-copy > .yt-town-interior-media-live { margin-top: 2px; font-size: .36rem; }
  .yt-town-app.is-interior .yt-town-interior-media-copy > p { margin-top: 3px; font-size: .43rem; }
  .yt-town-app.is-interior .yt-town-interior-media-toggle { min-height: 39px; margin-top: 19px; }
  .yt-town-app.is-interior .yt-town-interior-media-toggle > span { font-size: .68rem; }
  .yt-town-app.is-interior .yt-town-interior-media-toggle > strong { margin-top: 2px; font-size: .45rem; }
  .yt-town-app.is-interior .yt-town-interior-media-toggle > small { display: none; }
  .yt-town-interior-media-close { width: 19px; height: 19px; font-size: .62rem; }
  .yt-town-app.is-interior .yt-town-interior-media[data-view="tenant"] { min-height: 118px; }
  .yt-town-app.is-interior .yt-town-interior-guide.is-exhibit.is-tenant {
    left: 50%;
    top: calc(var(--yt-safe-top) + 70px);
    bottom: auto;
    width: min(620px, calc(100% - 288px));
    transform: translateX(-50%);
  }
  .yt-town-app.is-interior .yt-town-tenant-profile {
    max-height: calc(100dvh - 86px);
    grid-template-columns: 125px minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px 8px;
    padding: 6px 25px 5px 7px;
  }
  .yt-town-app.is-interior .yt-town-tenant-profile-identity { grid-column: auto; }
  .yt-town-app.is-interior .yt-town-tenant-profile-identity > strong { margin-top: 3px; font-size: .65rem; }
  .yt-town-app.is-interior .yt-town-tenant-profile-identity > span,
  .yt-town-app.is-interior .yt-town-tenant-profile-identity > em { margin-top: 3px; }
  .yt-town-app.is-interior .yt-town-tenant-profile > p { font-size: .42rem; line-height: 1.35; }
  .yt-town-app.is-interior .yt-town-tenant-profile > ul { gap: 2px; }
  .yt-town-app.is-interior .yt-town-tenant-profile > ul li { font-size: .39rem; }
  .yt-town-app.is-interior .yt-town-tenant-profile-actions { gap: 4px; }
  .yt-town-app.is-interior .yt-town-tenant-profile-actions > a,
  .yt-town-app.is-interior .yt-town-tenant-profile-actions > button { min-height: 25px; padding: 4px 7px; font-size: .42rem; }
  .yt-town-app.is-interior .yt-town-tenant-profile-privacy { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .yt-town-interior-media[data-state="playing"] .yt-town-interior-media-visual i,
  .yt-town-interior-media[data-state="playing"] .yt-town-interior-media-visual b,
  .yt-town-interior-presence[data-state="live"] i { animation: none; }
  .yt-town-app[data-town-version="v56"] .yt-town-interior-media::after { transition: none; }
}

@media (prefers-contrast: more) {
  .yt-town-interior-guide.is-exhibit,
  .yt-town-interior-media { border-color: #fff; background: #071c20; }
  .yt-town-interior-media-screen { border-color: #fff; }
}

/* v31: quiet street HUD — the world, one objective, and one contextual action. */
.yt-town-destination-dock { display: none !important; }
.yt-town-app[data-hud-mode="arrival"] .yt-town-route-guide { display: none !important; }

@media (max-width: 760px), (orientation: landscape) and (max-height: 600px) {
  .yt-town-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    min-height: calc(58px + var(--yt-safe-top));
    padding: calc(5px + var(--yt-safe-top)) calc(7px + var(--yt-safe-right)) 5px calc(7px + var(--yt-safe-left));
  }
  .yt-town-identity,
  .yt-town-top-actions > :not(.yt-town-online-toggle):not(.yt-town-goal-open):not(.yt-town-map-open) { display: none; }
  .yt-town-top-actions { display: flex; gap: 5px; }
  .yt-town-icon-button { width: 42px; height: 42px; border-radius: 12px; }
  .yt-town-mission {
    min-height: 46px;
    padding: 4px 6px 4px 9px;
    border-radius: 12px;
  }
  .yt-town-mission-copy strong { font-size: .67rem; }
  .yt-town-progress > strong { width: 35px; height: 35px; font-size: .64rem; }
}

/* v43: fallback mirrors the rebuilt flagship block instead of cloning one tower. */
.yt-town-app[data-town-version="v56"] .yt-town-plaza {
  left: 474px;
  top: 620px;
  width: 552px;
  height: 214px;
  border: 10px solid #c9c9bd;
  border-radius: 18px;
  background: repeating-linear-gradient(90deg, rgba(70, 82, 80, .08) 0 1px, transparent 1px 46px), linear-gradient(145deg, #e0e1d8, #bfc5bf);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), var(--yt-shadow-x) var(--yt-shadow-y) 22px rgba(17, 43, 43, .22);
}
.yt-town-app[data-town-version="v56"] .yt-town-plaza-ring {
  left: 68%;
  top: 51%;
  width: 205px;
  height: 68px;
  border: 7px solid #d7dbd1;
  border-radius: 7px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .42), transparent 32%), #287b89;
  box-shadow: inset 0 0 0 8px #3f929b, 0 7px #66706c, 0 13px 16px rgba(8, 29, 31, .2);
}
.yt-town-app[data-town-version="v56"] .yt-town-plaza-mark { left: 28%; color: #c79a34; font-size: 2.2rem; }
.yt-town-app[data-town-version="v56"] .yt-town-plaza small { left: 24px; right: auto; bottom: 31px; color: #3e514f; }

.yt-town-app[data-town-version="v56"] .yt-building-repair .yt-building-tower-shell { left: 18px; bottom: 88px; width: 316px; height: 190px; }
.yt-town-app[data-town-version="v56"] .yt-building-repair .yt-building-tower-face { left: 0; right: 18px; top: 34px; clip-path: polygon(0 13%, 16% 2%, 32% 13%, 48% 2%, 64% 13%, 80% 2%, 100% 13%, 100% 100%, 0 100%); }
.yt-town-app[data-town-version="v56"] .yt-building-repair .yt-building-crown { left: 0; right: 18px; top: 3px; height: 58px; }
.yt-town-app[data-town-version="v56"] .yt-building-repair .yt-building-setback { left: 8px; right: 135px; bottom: 100px; height: 86px; }

.yt-town-app[data-town-version="v56"] .yt-building-design .yt-building-tower-shell { left: 76px; bottom: 87px; width: 248px; height: 520px; }
.yt-town-app[data-town-version="v56"] .yt-building-design .yt-building-tower-face { left: 18px; right: 8px; top: 0; clip-path: polygon(18% 0, 82% 0, 82% 16%, 100% 16%, 100% 43%, 88% 43%, 88% 68%, 100% 68%, 100% 100%, 0 100%, 0 58%, 12% 58%, 12% 28%, 18% 28%); }
.yt-town-app[data-town-version="v56"] .yt-building-design .yt-building-setback { left: -12px; right: 36px; bottom: 0; height: 118px; clip-path: polygon(0 18%, 19% 18%, 19% 0, 78% 0, 78% 12%, 100% 12%, 100% 100%, 0 100%); }
.yt-town-app[data-town-version="v56"] .yt-building-design .yt-building-crown { left: 54px; right: 26px; top: -19px; }

.yt-town-app[data-town-version="v56"] .yt-building-global .yt-building-tower-shell { left: 158px; bottom: 88px; width: 136px; height: 350px; }
.yt-town-app[data-town-version="v56"] .yt-building-global .yt-building-tower-face { left: 0; right: 5px; top: 8px; clip-path: polygon(0 8%, 24% 8%, 24% 0, 78% 0, 100% 7%, 100% 100%, 0 100%); }
.yt-town-app[data-town-version="v56"] .yt-building-global .yt-building-setback { left: -140px; right: 38px; bottom: 0; height: 112px; clip-path: polygon(0 16%, 75% 16%, 75% 0, 100% 0, 100% 100%, 0 100%); }
.yt-town-app[data-town-version="v56"] .yt-building-global .yt-building-crown { left: 14px; right: 10px; }
.yt-town-app[data-town-version="v56"] .yt-building-global .yt-building-podium { left: 3px; width: 306px; }

/* v48: mesh-aligned interior contact without another floating HUD. */
.yt-town-app.is-interior .yt-town-joystick-ring {
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.yt-town-app.is-interior[data-interior-collision]:not([data-interior-collision="free"]) .yt-town-joystick-ring {
  transition: none;
}
.yt-town-app.is-interior[data-interior-collision^="slide-"] .yt-town-joystick-ring {
  border-color: rgba(255, 220, 132, .95);
  box-shadow: inset 0 0 0 9px rgba(255, 202, 91, .09), 0 16px 38px rgba(0, 0, 0, .36), 0 0 22px rgba(255, 193, 76, .2);
}
.yt-town-app.is-interior[data-interior-collision="blocked"] .yt-town-joystick-ring {
  border-color: #ffd478;
  background: radial-gradient(circle, rgba(101, 65, 18, .7) 0 23%, rgba(35, 27, 18, .9) 24% 100%);
  box-shadow: inset 0 0 0 9px rgba(255, 209, 111, .12), 0 16px 38px rgba(0, 0, 0, .36), 0 0 24px rgba(255, 185, 61, .26);
}
.yt-town-app.is-interior[data-interior-collision]:not([data-interior-collision="free"]) .yt-town-joystick > small { color: #ffe2a1; }

@media (prefers-reduced-motion: reduce) {
  .yt-town-app.is-interior .yt-town-joystick-ring { transition: none; }
}

/* v47: opt-in anonymous presence, spatial quick chat and shared exhibit focus. */
.yt-town-interior-presence:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 760px) {
  .yt-town-app.is-interior .yt-town-interior-header { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .yt-town-app.is-interior .yt-town-interior-presence { display: inline-flex; min-width: 48px; min-height: 32px; justify-content: center; padding: 5px 6px; font-size: .4rem; }
}
.yt-town-online-toggle {
  width: 64px;
  grid-template-columns: 12px 1fr;
  gap: 4px;
  padding: 0 7px;
}
.yt-town-online-toggle > i { position: relative; display: block; width: 9px; height: 9px; border: 1px solid rgba(255, 255, 255, .62); border-radius: 50%; background: #718b8b; box-shadow: 0 0 0 3px rgba(255, 255, 255, .04); }
.yt-town-online-toggle > i > b { position: absolute; inset: 2px; border-radius: inherit; background: #b5c3c1; }
.yt-town-online-toggle > span { overflow: hidden; font-size: .5rem; font-weight: 1000; letter-spacing: .025em; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-online-toggle.is-live { border-color: rgba(104, 244, 207, .62); background: rgba(40, 154, 132, .22); }
.yt-town-online-toggle.is-live > i { border-color: #caffee; background: #53e6b9; box-shadow: 0 0 9px rgba(83, 230, 185, .68); }
.yt-town-online-toggle.is-live > i > b { background: #eafff7; }
.yt-town-online-toggle.is-connecting > i { border-color: #ffe39b; background: #eab94a; }

.yt-town-online-panel {
  position: absolute;
  z-index: 78;
  right: calc(var(--yt-safe-right) + 14px);
  top: 12px;
  width: min(370px, calc(100% - var(--yt-safe-left) - var(--yt-safe-right) - 28px));
  max-height: calc(100% - var(--yt-safe-bottom) - 24px);
  padding: 15px;
  overflow-y: auto;
  border: 1px solid rgba(154, 235, 224, .45);
  border-radius: 19px 19px 19px 7px;
  color: #effffc;
  background: linear-gradient(145deg, rgba(5, 29, 36, .975), rgba(8, 50, 54, .95));
  box-shadow: 0 24px 58px rgba(0, 14, 20, .42), inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px);
  overscroll-behavior: contain;
  touch-action: pan-y;
  animation: yt-presence-panel-in .18s ease-out;
}
.yt-town-online-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yt-town-online-panel > header span { display: block; color: #76e8d8; font: 1000 .46rem/1 Arial, sans-serif; letter-spacing: .16em; }
.yt-town-online-panel > header h2 { margin: 3px 0 0; font-size: 1.04rem; }
.yt-town-online-panel > header button { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; color: #fff; background: rgba(255, 255, 255, .07); font-size: 1rem; cursor: pointer; }
.yt-town-online-status { margin: 9px 0 0; padding: 7px 9px; border-radius: 9px; color: #bce0dc; background: rgba(255, 255, 255, .06); font-size: .57rem; font-weight: 800; line-height: 1.45; }
.yt-town-online-offline { margin-top: 12px; }
.yt-town-online-offline > strong { display: block; font-size: .86rem; }
.yt-town-online-offline > p { margin: 5px 0 0; color: #c1d8d5; font-size: .61rem; line-height: 1.55; }
.yt-town-online-offline > ul { display: grid; gap: 4px; margin: 9px 0 11px; padding: 0; color: #a9c8c4; font-size: .53rem; line-height: 1.45; list-style: none; }
.yt-town-online-offline li { position: relative; padding-left: 15px; }
.yt-town-online-offline li::before { content: "✓"; position: absolute; left: 0; color: #6ce2c7; font-weight: 1000; }
.yt-town-online-offline > button { display: grid; width: 100%; min-height: 52px; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; padding: 8px 11px; border: 1px solid #a5fff0; border-radius: 13px; color: #062d31; background: linear-gradient(135deg, #79efd8, #b4f4cf); box-shadow: 0 9px 22px rgba(65, 223, 193, .15); text-align: left; cursor: pointer; touch-action: manipulation; }
.yt-town-online-offline > button > i { width: 10px; height: 10px; border: 3px solid #0a615c; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(10, 97, 92, .1); }
.yt-town-online-offline > button strong,.yt-town-online-offline > button small { display: block; }
.yt-town-online-offline > button strong { font-size: .69rem; }.yt-town-online-offline > button small { margin-top: 2px; color: #276d66; font-size: .48rem; font-weight: 900; }
.yt-town-online-offline > button:disabled { cursor: wait; opacity: .62; }
.yt-town-online-live { display: none; margin-top: 11px; }
.yt-town-online-panel[data-joined="true"] .yt-town-online-offline { display: none; }
.yt-town-online-panel[data-joined="true"] .yt-town-online-live { display: block; }
.yt-town-online-population { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid rgba(106, 232, 205, .28); border-radius: 12px; background: rgba(51, 184, 157, .1); }
.yt-town-online-population > i { position: relative; width: 27px; height: 27px; border: 2px solid #a7f5df; border-radius: 50%; background: linear-gradient(#2b9a8e 0 46%, #17635f 47%); }
.yt-town-online-population > i::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -5px; height: 11px; border-radius: 9px 9px 3px 3px; background: #56d6bd; }
.yt-town-online-population span { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: baseline; }.yt-town-online-population strong { color: #8af0d4; font: 1000 1.25rem/1 Arial, sans-serif; }.yt-town-online-population small { color: #b9d5d1; font-size: .54rem; font-weight: 900; }
.yt-town-online-reactions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.yt-town-online-reactions button { min-height: 52px; padding: 6px 3px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 11px; color: #edfffb; background: rgba(255, 255, 255, .07); cursor: pointer; touch-action: manipulation; }
.yt-town-online-reactions button span,.yt-town-online-reactions button small { display: block; }.yt-town-online-reactions button span { font-size: .9rem; }.yt-town-online-reactions button small { margin-top: 3px; font-size: .45rem; font-weight: 900; }
.yt-town-online-reactions button:disabled { opacity: .45; }
.yt-town-online-quick-chat { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .12); }
.yt-town-online-quick-chat > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.yt-town-online-quick-chat > div:first-child strong { color: #f3fffc; font-size: .61rem; }
.yt-town-online-quick-chat > div:first-child small { color: #8fb6b1; font-size: .44rem; font-weight: 800; text-align: right; }
.yt-town-online-quick-chat > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.yt-town-online-quick-chat button { min-height: 40px; padding: 6px 7px; border: 1px solid rgba(115, 232, 210, .24); border-radius: 10px; color: #eafffa; background: rgba(50, 166, 146, .1); font-size: .51rem; font-weight: 900; line-height: 1.3; cursor: pointer; touch-action: manipulation; }
.yt-town-online-quick-chat button:active { transform: scale(.98); }
.yt-town-online-quick-chat button:disabled { cursor: wait; opacity: .42; }
.yt-town-online-live > p { margin: 9px 0; color: #9fc2be; font-size: .5rem; line-height: 1.5; }
.yt-town-online-live > #town-online-leave { width: 100%; min-height: 38px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; color: #d8ebe8; background: rgba(255, 255, 255, .055); font-size: .56rem; font-weight: 900; cursor: pointer; touch-action: manipulation; }
.yt-town-online-toggle:focus-visible,.yt-town-online-panel button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.yt-town-online-reactions button:active,.yt-town-online-offline > button:active { transform: scale(.98); }
.yt-town-presence-bubbles { position: fixed; z-index: 66; inset: 0; overflow: hidden; pointer-events: none; }
.yt-town-presence-bubble { position: absolute; left: 0; top: 0; max-width: min(230px, calc(100vw - 32px)); padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .84); border-radius: 15px 15px 15px 4px; color: #092d33; background: rgba(246, 255, 252, .94); box-shadow: 0 10px 24px rgba(0, 20, 28, .28); font-size: .66rem; font-weight: 1000; line-height: 1.35; text-align: center; text-wrap: balance; opacity: 0; will-change: transform, opacity; transition: opacity .12s ease; }
.yt-town-presence-bubble.is-visible { opacity: 1; }
.yt-town-presence-bubble::after { content: ""; position: absolute; left: 15px; bottom: -7px; width: 12px; height: 12px; border-right: 1px solid rgba(255, 255, 255, .84); border-bottom: 1px solid rgba(255, 255, 255, .84); background: rgba(246, 255, 252, .94); transform: rotate(45deg); }
.yt-town-presence-bubble[data-appearance="teal"] { border-color: #72e7d0; }.yt-town-presence-bubble[data-appearance="amber"] { border-color: #ffd77c; }.yt-town-presence-bubble[data-appearance="violet"] { border-color: #c3baff; }.yt-town-presence-bubble[data-appearance="coral"] { border-color: #ffb0a3; }
@keyframes yt-presence-panel-in { from { opacity: 0; transform: translateY(-7px) scale(.985); } }

@media (max-width: 760px), (orientation: landscape) and (max-height: 600px) {
  .yt-town-online-toggle { width: 46px; grid-template-columns: 8px 1fr; gap: 3px; padding: 0 4px; }
  .yt-town-online-toggle > i { width: 7px; height: 7px; }.yt-town-online-toggle > i > b { inset: 1px; }
  .yt-town-online-toggle > span { font-size: .37rem; }
  .yt-town-online-panel { right: calc(var(--yt-safe-right) + 7px); top: 7px; width: min(356px, calc(100% - var(--yt-safe-left) - var(--yt-safe-right) - 14px)); max-height: calc(100% - var(--yt-safe-bottom) - 14px); padding: 12px; border-radius: 17px 17px 17px 6px; }
  .yt-town-presence-bubble { max-width: min(188px, calc(100vw - 24px)); padding: 7px 10px; font-size: .58rem; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .yt-town-online-panel { width: min(560px, calc(100% - 180px)); }
  .yt-town-online-offline > ul { grid-template-columns: repeat(3, 1fr); gap: 7px; }
}
@media (prefers-reduced-motion: reduce) { .yt-town-online-panel { animation: none; }.yt-town-presence-bubble { transition: none; } }
@media (prefers-contrast: more) { .yt-town-online-panel { border-color: #fff; background: #061f27; }.yt-town-online-reactions button,.yt-town-online-quick-chat button { border-color: #fff; }.yt-town-presence-bubble { border: 2px solid #00171c; background: #fff; box-shadow: 0 0 0 2px #fff; } }

/* v56: registry-driven exterior shells. Contents and tenants are added later. */
.yt-town-storefront-shells { position: absolute; z-index: 6; inset: 0; overflow: hidden; pointer-events: none; }
.yt-town-storefront-shell {
  --yt-shell-base: #536269;
  --yt-shell-dark: #1f3036;
  --yt-shell-frame: #708489;
  --yt-shell-glass: #32616d;
  --yt-shell-accent: #62d6c7;
  position: absolute;
  left: var(--yt-shell-left);
  top: var(--yt-shell-top);
  width: var(--yt-shell-width);
  height: var(--yt-shell-height);
  filter: drop-shadow(18px 16px 18px rgba(2, 18, 23, .28));
  transform-origin: 50% 100%;
}
.yt-town-storefront-shell[data-palette="copper"] { --yt-shell-base: #78695f; --yt-shell-dark: #302a29; --yt-shell-frame: #9a755e; --yt-shell-glass: #42545a; --yt-shell-accent: #df9c66; }
.yt-town-storefront-shell[data-palette="oxide"] { --yt-shell-base: #6b5650; --yt-shell-dark: #2b292c; --yt-shell-frame: #8c594d; --yt-shell-glass: #394c52; --yt-shell-accent: #d36e55; }
.yt-town-storefront-shell[data-palette="teal"] { --yt-shell-base: #42656a; --yt-shell-dark: #1e3339; --yt-shell-frame: #4f9293; --yt-shell-glass: #255763; --yt-shell-accent: #59d8c7; }
.yt-town-storefront-shell[data-palette="slate"] { --yt-shell-base: #515d66; --yt-shell-dark: #242e38; --yt-shell-frame: #70818e; --yt-shell-glass: #304b5a; --yt-shell-accent: #9bbdc3; }
.yt-town-storefront-shell[data-palette="violet"] { --yt-shell-base: #595d75; --yt-shell-dark: #292d43; --yt-shell-frame: #7d82a1; --yt-shell-glass: #354660; --yt-shell-accent: #a7a9ed; }
.yt-town-storefront-shell[data-palette="marine"] { --yt-shell-base: #3e6170; --yt-shell-dark: #1d3340; --yt-shell-frame: #527f91; --yt-shell-glass: #244b60; --yt-shell-accent: #79bddd; }
.yt-town-storefront-shell > i { position: absolute; inset: 0 0 0 7%; overflow: hidden; border: 1px solid rgba(218, 245, 241, .18); background: linear-gradient(112deg, rgba(255,255,255,.13), transparent 25% 69%, rgba(0,13,20,.26)), repeating-linear-gradient(0deg, transparent 0 27px, var(--yt-shell-frame) 28px 30px), repeating-linear-gradient(90deg, var(--yt-shell-glass) 0 18px, var(--yt-shell-dark) 19px 24px), var(--yt-shell-base); box-shadow: inset 13px 0 rgba(255,255,255,.025), inset -18px 0 rgba(0,12,17,.18); }
.yt-town-storefront-shell > i::before { content: ""; position: absolute; inset: 13px 10px 54px; background: repeating-linear-gradient(0deg, rgba(255,217,132,.62) 0 4px, transparent 5px 28px); opacity: calc(.06 + var(--yt-lamp-glow) * .45); mix-blend-mode: screen; }
.yt-town-storefront-shell > i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; border-top: 5px solid var(--yt-shell-accent); background: linear-gradient(90deg, var(--yt-shell-dark) 0 18%, rgba(218,247,241,.32) 19% 36%, var(--yt-shell-dark) 37% 63%, rgba(218,247,241,.26) 64% 82%, var(--yt-shell-dark) 83%); box-shadow: 0 -9px 16px rgba(0,14,19,.2); }
.yt-town-storefront-shell > b { position: absolute; z-index: 2; left: 2%; right: 4%; top: -9px; height: 18px; border-top: 2px solid rgba(255,255,255,.22); background: linear-gradient(135deg, var(--yt-shell-frame), var(--yt-shell-dark)); clip-path: polygon(3% 35%, 72% 35%, 72% 0, 96% 0, 100% 100%, 0 100%); }
.yt-town-storefront-shell > u { position: absolute; z-index: 3; left: var(--yt-shell-door-left); bottom: 0; display: block; width: var(--yt-shell-door-width); height: 48px; border: 3px solid var(--yt-shell-frame); border-bottom: 5px solid color-mix(in srgb, var(--yt-shell-accent), #fff 18%); background: linear-gradient(112deg, rgba(223,249,244,.5), rgba(17,47,56,.92) 34% 67%, rgba(178,225,219,.3)); box-shadow: inset 0 0 0 1px rgba(220,248,242,.2), 0 -9px 17px rgba(0,13,18,.3); text-decoration: none; }
.yt-town-storefront-shell > u::before { content: ""; position: absolute; left: -12%; right: -12%; top: -12px; height: 8px; border-top: 2px solid rgba(234,255,249,.42); background: var(--yt-shell-accent); box-shadow: 0 5px 9px rgba(0,15,20,.35); }
.yt-town-storefront-shell > u::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--yt-shell-frame); box-shadow: 4px 0 0 rgba(219,246,241,.09); }
.yt-town-storefront-shell > em { position: absolute; z-index: 3; left: 12%; right: 8%; bottom: 55px; display: block; min-height: 30px; padding: 5px 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--yt-shell-accent), #fff 22%); border-left: 5px solid var(--yt-shell-accent); border-radius: 3px; color: #eaf8f5; background: rgba(5, 25, 31, .91); box-shadow: 0 6px 14px rgba(0,14,19,.24), 0 0 12px color-mix(in srgb, var(--yt-shell-accent), transparent 75%); font-style: normal; }
.yt-town-storefront-shell > em small,.yt-town-storefront-shell > em strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-storefront-shell > em small { color: var(--yt-shell-accent); font: 1000 .38rem/1 Arial,sans-serif; letter-spacing: .12em; }
.yt-town-storefront-shell > em strong { margin-top: 4px; font-size: .55rem; letter-spacing: .02em; }
.yt-town-storefront-shell[data-typology="atelier-loft"] > i { clip-path: polygon(0 9%, 16% 9%, 16% 2%, 76% 2%, 76% 0, 100% 7%, 100% 100%, 0 100%); }
.yt-town-storefront-shell[data-typology="vertical-workshop"] > i { clip-path: polygon(11% 0, 86% 0, 86% 13%, 100% 13%, 100% 100%, 0 100%, 0 22%, 11% 22%); }
.yt-town-storefront-shell[data-typology="tower-podium"] > i { clip-path: polygon(18% 0, 81% 0, 81% 11%, 100% 11%, 100% 100%, 0 100%, 0 34%, 18% 34%); }
.yt-town-storefront-shell[data-typology="stepped-studio"] > i { clip-path: polygon(25% 0, 74% 0, 74% 14%, 90% 14%, 90% 30%, 100% 30%, 100% 100%, 0 100%, 0 48%, 11% 48%, 11% 22%, 25% 22%); }
.yt-town-storefront-shell[data-typology="market-hall"] > i { clip-path: polygon(0 13%, 12% 3%, 25% 13%, 38% 3%, 51% 13%, 64% 3%, 77% 13%, 90% 3%, 100% 13%, 100% 100%, 0 100%); }
.yt-town-app[data-city-platform="error"] .yt-town-storefront-shells { display: none; }
@media (prefers-reduced-motion: reduce) { .yt-town-storefront-shell { transition: none; } }

/* v57: each registered exterior now opens into a tenant-neutral base-build space. */
.yt-town-storefront-shell {
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  touch-action: manipulation;
}
.yt-town-app[data-rendering="css-fallback"] .yt-town-storefront-shell { pointer-events: auto; cursor: pointer; }
.yt-town-storefront-shell:is(:focus-visible,.is-destination,.is-near) { outline: 4px solid color-mix(in srgb, var(--yt-shell-accent), #fff 24%); outline-offset: 5px; filter: drop-shadow(18px 16px 18px rgba(2, 18, 23, .28)) drop-shadow(0 0 12px color-mix(in srgb, var(--yt-shell-accent), transparent 38%)); }
.yt-town-storefront-shell.is-near > u { background: linear-gradient(112deg, rgba(225,255,247,.72), color-mix(in srgb, var(--yt-shell-accent), #11333c 55%) 38% 64%, rgba(210,244,239,.5)); box-shadow: inset 0 0 0 1px rgba(238,255,251,.38), 0 0 22px color-mix(in srgb, var(--yt-shell-accent), transparent 25%); }

.yt-town-map-storefronts { display: grid; grid-template-columns: minmax(124px, .34fr) minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 14px; padding: 12px; border: 1px solid rgba(126, 232, 218, .24); border-radius: 16px; background: rgba(255,255,255,.035); }
.yt-town-map-storefronts > div:first-child span,.yt-town-map-storefronts > div:first-child strong,.yt-town-map-storefronts > div:first-child small { display: block; }
.yt-town-map-storefronts > div:first-child span { color: #69e5d6; font: 1000 .43rem/1 Arial,sans-serif; letter-spacing: .14em; }
.yt-town-map-storefronts > div:first-child strong { margin-top: 5px; font-size: .75rem; }
.yt-town-map-storefronts > div:first-child small { margin-top: 4px; color: #90afad; font-size: .49rem; line-height: 1.45; }
#town-map-storefront-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
#town-map-storefront-list button { display: grid; min-width: 0; grid-template-columns: 34px minmax(0,1fr); gap: 1px 7px; align-items: center; padding: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #eafffb; background: rgba(255,255,255,.045); text-align: left; cursor: pointer; touch-action: manipulation; }
#town-map-storefront-list button > span { grid-row: 1 / 3; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; color: #082b31; background: #79dfd0; font: 1000 .48rem/1 Arial,sans-serif; }
#town-map-storefront-list button > strong { overflow: hidden; font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }
#town-map-storefront-list button > small { color: #91b5b2; font-size: .43rem; }
#town-map-storefront-list button:is(.is-selected,:focus-visible) { border-color: #ffd16e; background: rgba(255,205,101,.1); outline: 2px solid rgba(255,209,110,.38); }

.yt-town-room-fitout { --yt-fitout-accent: #69ddce; --yt-fitout-wall: #435b60; background: linear-gradient(180deg,#223a40 0 55%,#172c31 55%); }
.yt-town-room-fitout[data-palette="copper"] { --yt-fitout-accent:#df9c66;--yt-fitout-wall:#655750; }.yt-town-room-fitout[data-palette="oxide"] { --yt-fitout-accent:#d36e55;--yt-fitout-wall:#5e4c49; }.yt-town-room-fitout[data-palette="teal"] { --yt-fitout-accent:#59d8c7;--yt-fitout-wall:#365b60; }.yt-town-room-fitout[data-palette="slate"] { --yt-fitout-accent:#9bbdc3;--yt-fitout-wall:#49575f; }.yt-town-room-fitout[data-palette="violet"] { --yt-fitout-accent:#a7a9ed;--yt-fitout-wall:#50566c; }.yt-town-room-fitout[data-palette="marine"] { --yt-fitout-accent:#79bddd;--yt-fitout-wall:#365969; }
.yt-town-fitout-architecture { position:absolute;z-index:3;inset:0;overflow:hidden;perspective:900px;pointer-events:none; }
.yt-town-fitout-floor { position:absolute;left:-12%;right:-12%;bottom:-25%;height:70%;background:repeating-linear-gradient(90deg,rgba(225,243,239,.1) 0 2px,transparent 2px 112px),repeating-linear-gradient(0deg,rgba(225,243,239,.08) 0 2px,transparent 2px 82px),linear-gradient(145deg,#566365,#263b3f);transform:rotateX(58deg);transform-origin:50% 100%; }
.yt-town-fitout-backwall { position:absolute;left:8%;right:8%;top:12%;height:47%;border:2px solid rgba(230,249,245,.18);background:repeating-linear-gradient(90deg,transparent 0 14%,rgba(255,255,255,.08) 14.2% 14.6%),linear-gradient(180deg,var(--yt-fitout-wall),#26383c);box-shadow:inset 0 -12px 0 rgba(5,20,24,.24); }
.yt-town-fitout-ceiling { position:absolute;left:-5%;right:-5%;top:-19%;height:48%;background:repeating-linear-gradient(90deg,transparent 0 92px,rgba(236,250,247,.13) 93px 96px),repeating-linear-gradient(0deg,#26383c 0 38px,#45595c 40px 43px);transform:perspective(800px) rotateX(-58deg);transform-origin:50% 100%;box-shadow:0 16px 40px rgba(0,0,0,.18); }
.yt-town-fitout-ceiling::after { content:"";position:absolute;left:10%;right:10%;bottom:8%;height:5px;background:repeating-linear-gradient(90deg,var(--yt-fitout-accent) 0 96px,transparent 97px 168px);filter:drop-shadow(0 0 8px var(--yt-fitout-accent));opacity:.78; }
.yt-town-fitout-glazing { position:absolute;left:17%;right:17%;bottom:15%;height:30%;border:5px solid #5e7375;background:linear-gradient(115deg,rgba(222,247,241,.28),rgba(20,54,61,.68) 38% 64%,rgba(178,218,215,.2));box-shadow:inset 140px 0 0 rgba(255,255,255,.04); }
.yt-town-fitout-glazing::after { content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;background:#637b7d; }
.yt-town-fitout-utility { position:absolute;right:10%;top:25%;width:17%;height:32%;border:3px solid #66797b;background:repeating-linear-gradient(0deg,#263b3f 0 23px,#53676a 24px 26px);box-shadow:-9px 0 18px rgba(0,0,0,.18); }
.yt-town-fitout-columns { position:absolute;left:13%;right:13%;top:15%;bottom:8%;border-left:14px solid rgba(105,122,123,.9);border-right:14px solid rgba(105,122,123,.9);box-shadow:14px 9px 12px rgba(0,0,0,.18),-14px 9px 12px rgba(0,0,0,.18); }
.yt-town-fitout-status { position:absolute;z-index:12;left:50%;top:24%;display:grid;width:min(440px,70%);padding:13px 16px;border:1px solid color-mix(in srgb,var(--yt-fitout-accent),#fff 18%);border-left:7px solid var(--yt-fitout-accent);border-radius:6px;color:#f2fffc;background:rgba(6,27,32,.88);box-shadow:0 14px 28px rgba(0,0,0,.26),0 0 20px color-mix(in srgb,var(--yt-fitout-accent),transparent 76%);transform:translateX(-50%); }
.yt-town-fitout-status small { color:var(--yt-fitout-accent);font:1000 .48rem/1 Arial,sans-serif;letter-spacing:.12em; }.yt-town-fitout-status strong { margin-top:7px;font-size:1rem; }.yt-town-fitout-status span { margin-top:5px;color:#b5cecb;font-size:.58rem; }
.yt-town-interior-guide[data-guide-mode="fitout"] { width:min(520px,calc(100% - 30px));grid-template-columns:52px minmax(0,1fr); }
.yt-town-interior-guide[data-guide-mode="fitout"] .yt-town-interior-guide-avatar { width:48px;height:48px;border-radius:13px 13px 13px 4px; }

@media (max-width:760px),(orientation:landscape) and (max-height:600px) {
  .yt-town-map-storefronts { grid-template-columns:1fr;gap:8px;padding:9px; }
  #town-map-storefront-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .yt-town-fitout-status { top:22%;width:min(330px,78%);padding:10px 12px; }.yt-town-fitout-status strong{font-size:.76rem;}
}
@media (prefers-reduced-motion:reduce) { .yt-town-storefront-shell,.yt-town-fitout-architecture * { transition:none!important;animation:none!important; } }

/* v59: 街を最初から全画面に。トップバーは3D空間の上へ重なる薄い操作帯にする。 */
.yt-town-app { position: relative; grid-template-rows: minmax(0, 1fr); }
.yt-town-app > .yt-town-viewport { grid-row: 1; height: 100%; }
.yt-town-app > .yt-town-topbar {
  position: absolute;
  z-index: 70;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 24, 30, .82), rgba(6, 28, 34, .42) 58%, rgba(6, 28, 34, 0));
  box-shadow: none;
}
.yt-town-app > .yt-town-topbar::after { display: none; }
.yt-town-app > .yt-town-topbar > * { pointer-events: auto; }
.yt-town-app[data-hud-overlay="dialog"] > .yt-town-topbar { opacity: 0; visibility: hidden; }
.yt-town-app[data-hud-overlay="dialog"] > .yt-town-topbar > * { pointer-events: none; }
.yt-town-app > .yt-town-topbar .yt-town-mission {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(6, 30, 36, .62);
  backdrop-filter: blur(9px);
}
@media (prefers-contrast: more) {
  .yt-town-app > .yt-town-topbar { background: rgba(4, 20, 26, .96); }
  .yt-town-app > .yt-town-topbar .yt-town-mission { background: rgba(4, 20, 26, .96); }
}
.yt-town-app[data-atmosphere="dusk"] > .yt-town-topbar,
.yt-town-app[data-atmosphere="night"] > .yt-town-topbar { background: linear-gradient(180deg, rgba(4, 18, 26, .84), rgba(8, 26, 34, .44) 58%, rgba(8, 26, 34, 0)); }

/* v59.1: 帯が重なるぶん、街の上寄せHUDを帯の実寸ぶん下げる。 */
.yt-town-app > .yt-town-viewport .yt-town-route-guide { top: calc(var(--yt-town-topbar-space, 78px) + 12px); }
@media (max-width: 760px), (orientation: landscape) and (max-height: 600px) {
  .yt-town-app > .yt-town-viewport .yt-town-route-guide { top: calc(var(--yt-town-topbar-space, 58px) + 8px); }
}

/* v59.3: 街の入口。背後で街を動かしたまま、ここが何なのかを先に伝える。 */
.yt-town-entrance {
  position: absolute;
  z-index: 88;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--yt-safe-top) + 16px) calc(var(--yt-safe-right) + 16px) calc(var(--yt-safe-bottom) + 16px) calc(var(--yt-safe-left) + 16px);
  /* 背後の街は見せる。ここが「歩ける街」だと一目で伝えるため、暗幕は薄くする。 */
  background: linear-gradient(160deg, rgba(4, 21, 27, .46), rgba(5, 28, 34, .3) 55%, rgba(4, 20, 26, .54));
  backdrop-filter: blur(1.5px);
  transition: opacity .3s ease, visibility .3s ease;
}
.yt-town-app[data-entrance="entered"] .yt-town-entrance { opacity: 0; visibility: hidden; pointer-events: none; }
.yt-town-entrance-card {
  display: grid;
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  gap: 10px;
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 24px;
  color: #f2fffb;
  background: linear-gradient(155deg, rgba(6, 32, 39, .95), rgba(8, 46, 50, .92));
  box-shadow: 0 30px 80px rgba(2, 18, 22, .5);
  text-align: left;
}
.yt-town-entrance-kicker { color: var(--yt-mint, #7ef0dc); font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.yt-town-entrance-card h1 { margin: 0; font-size: clamp(1.5rem, 5.4vw, 2.1rem); line-height: 1.2; }
.yt-town-entrance-lead { color: #cfe6e2; font-size: clamp(.78rem, 2.9vw, .92rem); line-height: 1.65; }
.yt-town-entrance-points { display: grid; gap: 7px; margin: 4px 0 2px; padding: 0; list-style: none; }
.yt-town-entrance-points li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 2px 11px;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 13px;
  background: rgba(255, 255, 255, .07);
}
.yt-town-entrance-points li > span { grid-row: 1 / 3; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #06272e; background: var(--yt-amber, #ffc341); font: 1000 .78rem/1 Arial, sans-serif; }
.yt-town-entrance-points li > strong { align-self: end; font-size: .84rem; }
.yt-town-entrance-points li > small { align-self: start; color: #a9cbc7; font-size: .68rem; }
.yt-town-entrance-start {
  min-height: 56px;
  margin-top: 6px;
  border: 0;
  border-radius: 16px;
  color: #06272e;
  background: linear-gradient(120deg, var(--yt-amber, #ffc341), #ffd97a);
  box-shadow: 0 14px 30px rgba(255, 195, 65, .22);
  font-size: 1.02rem;
  font-weight: 1000;
  cursor: pointer;
  touch-action: manipulation;
}
.yt-town-entrance-start:hover { filter: brightness(1.05); }
.yt-town-entrance-start:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.yt-town-entrance-note { color: #9fc2be; font-size: .64rem; line-height: 1.6; }

@media (max-width: 760px), (orientation: landscape) and (max-height: 600px) {
  .yt-town-entrance-card { gap: 7px; padding: 15px; border-radius: 19px; }
  .yt-town-entrance-points li { padding: 6px 9px; }
  .yt-town-entrance-start { min-height: 50px; font-size: .95rem; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .yt-town-entrance-card { width: min(680px, 100%); }
  .yt-town-entrance-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yt-town-entrance-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .yt-town-entrance { transition: none; } }
@media (prefers-contrast: more) { .yt-town-entrance { background: rgba(3, 16, 21, .96); } .yt-town-entrance-card { background: #04141a; } }

/* v59.8: 入口から行き先を選べる一覧。街に入る前に、どんな区画があるか分かる。 */
.yt-town-entrance-spaces { display: grid; gap: 7px; margin-top: 2px; }
.yt-town-entrance-spaces-label { color: #9fc2be; font-size: .6rem; font-weight: 900; letter-spacing: .08em; }
.yt-town-entrance-space-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.yt-town-entrance-space-list > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 11px;
  color: #eafffb;
  background: rgba(255, 255, 255, .07);
  font-size: .68rem;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.yt-town-entrance-space-list > button > span { color: #06272e; background: var(--yt-mint, #7ef0dc); border-radius: 7px; font: 1000 .6rem/1 Arial, sans-serif; padding: 5px 0; text-align: center; }
.yt-town-entrance-space-list > button > strong { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.yt-town-entrance-space-list > button:hover { background: rgba(255, 255, 255, .13); }
.yt-town-entrance-space-list > button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (orientation: landscape) and (max-height: 600px) {
  .yt-town-entrance-spaces { display: none; }
}

/* v59.10: 入口の前に立つと、街へ戻る道が目立つようにする。 */
.yt-town-app[data-interior-exit="near"] #town-interior-exit {
  border-color: var(--yt-amber, #ffc341);
  background: linear-gradient(120deg, rgba(255, 195, 65, .96), rgba(255, 217, 122, .96));
  color: #06272e;
  box-shadow: 0 0 0 4px rgba(255, 195, 65, .22), 0 12px 26px rgba(255, 195, 65, .2);
}
.yt-town-app[data-interior-exit="near"] #town-interior-exit strong { color: #06272e; }
@media (prefers-reduced-motion: no-preference) {
  .yt-town-app[data-interior-exit="near"] #town-interior-exit { transition: background .2s ease, box-shadow .2s ease, color .2s ease; }
}