.town-page {
  --town-chat-height: 150px;
  --town-frame-gap: 12px;
  --town-hud-width: clamp(220px, 15vw, 260px);
  --town-viewport-height: clamp(500px, calc(100vh - 250px), 920px);
  width: 100%;
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
  padding: 16px;
  background: #17130e;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

@supports (height: 100dvh) {
  .town-page { --town-viewport-height: clamp(500px, calc(100dvh - 250px), 920px); }
}

.town-page-heading {
  flex: 0 0 auto;
  width: 100%;
  margin: 0 0 6px;
  text-align: center;
}

.town-page-heading h1 {
  margin: 0 0 2px;
  color: var(--text);
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
}

.town-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.town-showroom-button {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid #8d704d;
  border-radius: 5px;
  background: #3b2b1d;
  color: #e8d3ad;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.town-showroom-button:hover,
.town-showroom-button:focus-visible {
  border-color: #bd9866;
  background: #523b27;
  color: #fff2d3;
}

.town-page-heading p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.4;
}

.town-game-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--town-hud-width);
  gap: var(--town-frame-gap);
  width: min(100%, 1720px);
  min-width: 0;
  align-items: stretch;
}

.town-play-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.town-stage {
  position: relative;
  width: 100%;
  height: var(--town-viewport-height);
  min-height: 0;
  overflow: hidden;
  line-height: 0;
  user-select: none;
  touch-action: auto;
  border: 1px solid var(--border);
  background: #090806;
}

.town-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 1536px;
  height: 1024px;
  transform-origin: 0 0;
  will-change: transform;
  visibility: hidden;
}

.town-map,
.town-entities {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.town-map {
  z-index: 0;
  display: block;
  object-fit: fill;
  pointer-events: none;
  transition: opacity 160ms linear;
}

.town-stage.is-map-transitioning .town-map,
.town-stage.is-map-transitioning .town-entities {
  opacity: 0;
}

.town-entities { transition: opacity 160ms linear; }

.town-entities {
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.town-hud {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
  padding: 5px;
  min-width: 0;
  min-height: 0;
  border: 2px solid #5e4227;
  outline: 1px solid #24170d;
  outline-offset: -4px;
  background:
    linear-gradient(90deg, rgba(255, 214, 137, 0.05), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.25)),
    repeating-linear-gradient(0deg, #342315 0, #342315 3px, #2a1b10 4px, #2f2013 8px);
  box-shadow:
    inset 0 0 0 1px rgba(197, 143, 68, 0.34),
    inset 0 0 18px rgba(0, 0, 0, 0.72),
    0 2px 8px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.town-hud::before,
.town-hud::after {
  content: '';
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 8px;
  border: 1px solid #a77b3d;
  background: #4b321d;
  box-shadow: inset 0 0 0 2px #25170c;
  pointer-events: none;
}

.town-hud::before { top: 7px; left: 7px; }
.town-hud::after { right: 7px; bottom: 7px; }

.town-hud-top,
.town-hud-bottom {
  min-height: 0;
  overflow-y: auto;
  border: 1px solid rgba(176, 129, 64, 0.3);
}

.town-hud-top {
  padding: 12px 10px;
  background:
    linear-gradient(135deg, rgba(215, 174, 104, 0.035) 25%, transparent 25%) 0 0 / 7px 7px,
    rgba(15, 12, 9, 0.82);
}

.town-hud-log-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(207, 174, 114, 0.62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.town-hud-log-heading i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(183, 135, 68, 0.48), transparent);
}

.town-hud-bottom {
  display: flex;
  align-items: flex-end;
  padding: 8px;
  background:
    linear-gradient(rgba(221, 183, 112, 0.025), rgba(0, 0, 0, 0.18)),
    rgba(15, 11, 8, 0.88);
}

.town-status-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(112px, 1fr) auto auto;
  width: 100%;
  min-height: 100%;
  min-width: 0;
  border: 1px solid #8f6735;
  outline: 1px solid rgba(30, 18, 9, 0.95);
  outline-offset: -4px;
  background:
    radial-gradient(circle at 18% 10%, rgba(217, 179, 111, 0.09), transparent 38%),
    linear-gradient(135deg, rgba(95, 66, 35, 0.2), transparent 45%),
    #21170e;
  color: var(--text);
  box-shadow:
    inset 0 0 0 3px rgba(59, 38, 19, 0.82),
    inset 0 0 0 4px rgba(208, 155, 76, 0.14),
    inset 0 12px 24px rgba(255, 201, 110, 0.035),
    0 3px 10px rgba(0, 0, 0, 0.46);
  line-height: 1.35;
}

.town-status-panel::before,
.town-status-panel::after {
  content: '◆';
  position: absolute;
  z-index: 2;
  color: #a87839;
  font-size: 7px;
  line-height: 1;
  text-shadow: 0 1px #1a0f08;
  pointer-events: none;
}

.town-status-panel::before { top: 6px; left: 7px; }
.town-status-panel::after { right: 7px; bottom: 6px; }

.town-status-location,
.town-status-broker,
.town-status-character,
.town-status-wallets {
  padding: 11px 12px;
}

.town-status-broker {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: 1px solid rgba(181, 132, 62, 0.38);
  background:
    linear-gradient(180deg, rgba(111, 78, 40, 0.12), transparent),
    rgba(25, 17, 10, 0.32);
}

.town-status-broker h3,
.town-status-wallets h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #d3b578;
  font-size: 9px;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.town-status-broker h3::after,
.town-status-wallets h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(192, 143, 72, 0.5), transparent);
}

.town-status-broker-content {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: center;
  padding-top: 8px;
}

.town-status-broker-empty {
  margin: 0;
  color: #a99878;
  font-size: 10px;
  line-height: 1.5;
}

.town-status-broker-order {
  width: 100%;
  min-width: 0;
}

.town-status-broker-order[hidden] { display: none; }

.town-status-broker-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.town-status-broker-title strong {
  min-width: 0;
  overflow: hidden;
  color: #fff0c8;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.town-status-broker-title span {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-left: 2px solid #a87839;
  background: rgba(11, 8, 5, 0.48);
  color: #d8bd87;
  font-size: 9px;
  font-weight: 700;
}

.town-status-broker-order[data-status='OPEN'] .town-status-broker-title span { color: #91c99a; }
.town-status-broker-order[data-status='SETTLED'] .town-status-broker-title span { color: #e5c270; }
.town-status-broker-order[data-status='CANCELLED'] .town-status-broker-title span,
.town-status-broker-order[data-status='FAILED'] .town-status-broker-title span { color: #b9aa91; }

.town-status-broker-order p {
  margin: 8px 0 2px;
  overflow-wrap: anywhere;
  color: #f5dfb5;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.town-status-broker-order small {
  display: block;
  overflow: hidden;
  color: #ad9a78;
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.town-status-location {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid rgba(181, 132, 62, 0.48);
  background: linear-gradient(180deg, rgba(125, 83, 39, 0.34), rgba(48, 30, 16, 0.2));
  color: #e0c48e;
  font-size: 11px;
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.48);
}

.town-status-map {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.town-status-coordinates {
  flex: 0 0 auto;
  color: #b9a98d;
  font-variant-numeric: tabular-nums;
}

.town-status-character {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-bottom: 1px solid rgba(181, 132, 62, 0.38);
  background: rgba(82, 55, 30, 0.09);
}

.town-status-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 8px;
}

.town-status-player {
  overflow: hidden;
  color: #fff0c8;
  font-size: 16px;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #080503;
  white-space: nowrap;
}

.town-status-level {
  padding: 2px 5px;
  border: 1px solid rgba(184, 137, 69, 0.42);
  background: rgba(24, 15, 8, 0.68);
  color: #e1bd75;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.town-status-growth-title { margin-top: 3px; color: #b99b68; font-size: 10px; }
.town-status-character.growth-elite,
.town-status-character.growth-legend { box-shadow: inset 0 0 0 1px rgba(225, 189, 117, 0.2); }
.town-status-character.growth-legend .town-status-level { color: #ffe39a; text-shadow: 0 0 7px rgba(255, 210, 96, 0.55); }

.town-status-vitals {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.town-status-vital {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 30px;
  align-items: center;
  column-gap: 5px;
  color: #d4b778;
  font-size: 10px;
  font-weight: 700;
}

.town-status-vital strong {
  justify-self: stretch;
  color: #f7ead0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.town-status-vital i {
  display: block;
  height: 9px;
  padding: 1px;
  overflow: hidden;
  border: 1px solid #17100a;
  background: #080605;
  box-shadow:
    0 0 0 1px rgba(159, 112, 53, 0.34),
    inset 0 1px 3px rgba(0, 0, 0, 0.9);
}

.town-status-vital i b {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
}

.town-status-vital-hp i b { background: linear-gradient(90deg, #6f231e, #b54d3e); }
.town-status-vital-mp i b { background: linear-gradient(90deg, #244963, #4182aa); }

.town-status-wallets {
  display: grid;
  gap: 9px;
  background:
    repeating-linear-gradient(0deg, rgba(225, 198, 143, 0.018) 0 1px, transparent 1px 4px),
    rgba(105, 76, 40, 0.08);
}

.town-status-wallet-row {
  display: grid;
  grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding-left: 7px;
  border-left: 2px solid rgba(170, 122, 58, 0.42);
}

.town-status-wallet-row span {
  color: #bca577;
  font-size: 10px;
}

.town-status-wallet-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #fff0c7;
  font-size: clamp(11px, 0.76vw, 13px);
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-shadow: 0 1px 1px #080503;
}

@media (min-width: 901px) {
  body:has(.town-page) .cw { display: none; }
}

.town-npc {
  --npc-width: 60px;
  --npc-height: 80px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--npc-width);
  height: var(--npc-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: normal;
  transform: translate3d(0, 0, 0) translate(-50%, -100%);
  pointer-events: auto;
  touch-action: manipulation;
}

.town-mobile-joystick,
.town-mobile-actions,
.town-mobile-game-start,
.town-mobile-game-exit,
.town-mobile-orientation-hint { display: none; }

.town-mobile-joystick {
  width: 112px;
  height: 112px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(10, 10, 15, 0.26);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.24);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.town-mobile-joystick.is-active { background: rgba(10, 10, 15, 0.34); }

.town-mobile-joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.36);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%) translate(var(--joystick-x, 0), var(--joystick-y, 0));
  pointer-events: none;
}

@supports (backdrop-filter: blur(2px)) {
  .town-mobile-joystick { backdrop-filter: blur(2px); }
}

.town-npc-sprite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

.town-npc-name {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(20, 14, 8, 0.82);
  color: #fff8df;
  font-size: clamp(10px, calc(var(--npc-width) * 0.2), 14px);
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.town-npc:hover .town-npc-sprite,
.town-npc:focus-visible .town-npc-sprite {
  filter: brightness(1.12) drop-shadow(0 0 3px rgba(255, 220, 135, 0.8));
}

.town-npc:focus-visible { outline: 2px solid #f1c875; outline-offset: 2px; }

.town-ambient-npc {
  --ambient-npc-width: 60px;
  --ambient-npc-height: 80px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ambient-npc-width);
  height: var(--ambient-npc-height);
  transform: translate3d(0, 0, 0) translate(-50%, -100%);
  pointer-events: none;
}

.town-ambient-npc::after {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 1px;
  width: 34px;
  height: 8px;
  border-radius: 50%;
  background: rgba(25, 16, 9, 0.34);
  filter: blur(1px);
  transform: translateX(-50%);
  content: '';
}

.town-ambient-npc-sprite {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  filter: saturate(0.78) contrast(1.08) sepia(0.08) drop-shadow(0 3px 1px rgba(30, 18, 9, 0.42));
  animation: town-ambient-idle 3.2s steps(2, jump-none) infinite;
}

.town-ambient-npc-wanderer .town-ambient-npc-sprite {
  filter: saturate(0.68) contrast(1.12) hue-rotate(-5deg) drop-shadow(0 3px 1px rgba(18, 16, 28, 0.5));
  animation-delay: -1.3s;
}

.town-ambient-npc-name {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100% + 3px);
  padding: 3px 7px 2px;
  border: 1px solid rgba(173, 132, 76, 0.72);
  border-radius: 2px;
  background: linear-gradient(#3d2b1a, #24180f);
  box-shadow: inset 0 1px rgba(255, 229, 177, 0.12), 0 2px 3px rgba(0, 0, 0, 0.34);
  color: #f0d9aa;
  font-family: ui-monospace, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: 0 1px #120b06;
  white-space: nowrap;
  transform: translateX(-50%);
}

.town-ambient-npc-wanderer .town-ambient-npc-name {
  border-color: rgba(119, 112, 151, 0.75);
  background: linear-gradient(#302b3c, #1c1926);
  color: #ddd3ec;
}

.town-ambient-npc-bubble {
  --ambient-bubble-shift-x: 0px;
  --ambient-bubble-tail-x: 50%;
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(100% + 14px);
  width: max-content;
  min-width: min(150px, calc(100vw - 32px));
  max-width: min(280px, calc(100vw - 32px));
  padding: 8px 12px;
  border: 1px solid rgba(220, 190, 140, 0.35);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(40, 32, 24, 0.78), rgba(22, 18, 15, 0.72));
  box-shadow: inset 0 1px rgba(255, 229, 177, 0.08), 0 4px 10px rgba(8, 5, 3, 0.34);
  color: #f5ead8;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  transform: translateX(-50%) translateX(var(--ambient-bubble-shift-x));
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.town-ambient-npc-bubble[hidden] { display: none; }
.town-ambient-npc-bubble::after {
  position: absolute;
  left: var(--ambient-bubble-tail-x);
  bottom: -6px;
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(220, 190, 140, 0.35);
  border-bottom: 1px solid rgba(220, 190, 140, 0.35);
  background: rgba(22, 18, 15, 0.76);
  transform: translateX(-50%) rotate(45deg);
  content: '';
}

.town-npc-monologue {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(100% + 31px);
  width: max-content;
  max-width: min(230px, 52vw);
  padding: 7px 9px;
  border: 1px solid rgba(225, 193, 130, 0.72);
  border-radius: 6px;
  background: rgba(25, 18, 12, 0.92);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.42);
  color: #fff2d1;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  word-break: keep-all;
  transform: translateX(-50%);
  pointer-events: none;
}

.town-npc-monologue::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(225, 193, 130, 0.72);
  border-bottom: 1px solid rgba(225, 193, 130, 0.72);
  background: rgba(25, 18, 12, 0.92);
  transform: translateX(-50%) rotate(45deg);
}

@keyframes town-ambient-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .town-ambient-npc-sprite { animation: none; }
}

@media (max-width: 900px) {
  .town-ambient-npc-bubble {
    min-width: min(150px, calc(100vw - 24px));
    max-width: min(220px, calc(100vw - 24px));
    padding: 7px 9px;
    font-size: 12px;
    line-height: 1.4;
  }
}

.collision-debug-panel {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: #211b14;
  color: #f5ead5;
  font-size: 13px;
  line-height: 1.4;
}

.collision-debug-panel button {
  padding: 5px 9px;
  border: 1px solid #77654f;
  border-radius: 5px;
  background: #352b20;
  color: inherit;
  cursor: pointer;
}

.collision-debug-panel button:hover,
.collision-debug-panel button.is-active {
  border-color: #f1c875;
  background: #5a452b;
}

.collision-paint-modes {
  display: inline-flex;
  gap: 4px;
}

.collision-debug-status.is-error {
  color: #ff8c8c;
}

.collision-debug-panel button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.collision-save-dialog {
  border: 1px solid #9b805c;
  border-radius: 9px;
  background: #211b14;
  color: #f5ead5;
}

.collision-save-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

.collision-save-dialog form div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.collision-cell-readout {
  flex-basis: 100%;
  color: #e5d8bf;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.collision-debug-grid {
  position: absolute;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(var(--collision-cols, 48), 1fr);
  grid-template-rows: repeat(var(--collision-rows, 32), 1fr);
  cursor: crosshair;
  line-height: normal;
  touch-action: none;
}

.collision-cell {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(28, 210, 80, 0.22);
}

.collision-cell[data-value="1"] {
  background: rgba(235, 46, 46, 0.26);
}

.collision-cell[data-value="2"] {
  background: rgba(42, 113, 255, 0.27);
}

.collision-cell.is-player-cell {
  outline: 3px solid #fff36a;
  outline-offset: -3px;
}

.collision-cell.is-portal-cell {
  position: relative;
  background: rgba(163, 75, 255, 0.55);
  box-shadow: inset 0 0 0 2px #f4c8ff;
}

.collision-cell.is-portal-cell::after {
  content: 'P';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: clamp(8px, 1vw, 15px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #2b0735;
}

.town-player {
  --player-width: 60px;
  --player-height: 80px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--player-width);
  height: var(--player-height);
  transform: translate3d(0, 0, 0) translate(-50%, -100%);
  will-change: transform;
}

.town-player-sprite {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
}

.player-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  vertical-align: top;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

.player-layer[hidden] {
  display: none;
}

.town-player {
  --body-z: 10;
  --armor-z: 20;
  --head-z: 30;
  --shield-z: 40;
  --weapon-z: 50;
}

.town-player.direction-down,
.town-player.direction-left,
.town-player.direction-right {
  --body-z: 10;
  --armor-z: 20;
  --head-z: 30;
  --shield-z: 40;
  --weapon-z: 50;
}

.town-player.direction-up {
  --body-z: 10;
  --armor-z: 20;
  --head-z: 30;
  --shield-z: 5;
  --weapon-z: 5;
}

.player-body {
  z-index: var(--body-z);
}
.player-armor { z-index: var(--armor-z); }
.player-head { z-index: var(--head-z); }
.player-shield { z-index: var(--shield-z); }
.player-weapon { z-index: var(--weapon-z); }
.player-layered-weaponBack { z-index: 5; }
.player-layered-body { z-index: 10; }
.player-layered-clothes { z-index: 20; }
.player-layered-hair { z-index: 30; }
.player-layered-hat { z-index: 40; }
.player-layered-weaponFront { z-index: 50; }

/* Direction classes are the extension points for future front/back equipment order. */

.town-player-name {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  z-index: 100;
  max-width: 160px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(20, 14, 8, 0.78);
  color: #fff8df;
  font-size: clamp(10px, calc(var(--player-width) * 0.2), 14px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateX(-50%);
}

.town-chat-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 34px);
  z-index: 110;
  width: max-content;
  max-width: 210px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  background: rgba(20, 20, 20, 0.48);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  transform: translateX(-50%);
  pointer-events: none;
}

.town-chat-bubble::before,
.town-chat-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  border-style: solid;
  transform: translateX(-50%);
}

.town-chat-bubble::before { border-width: 8px 7px 0; border-color: rgba(255, 255, 255, 0.15) transparent transparent; }
.town-chat-bubble::after { margin-top: -3px; border-width: 7px 5px 0; border-color: rgba(20, 20, 20, 0.48) transparent transparent; }
.town-chat-bubble[hidden] { display: none; }

.town-chat-form {
  display: flex;
  gap: 7px;
  width: 100%;
  padding: 7px 9px 8px;
  border-top: 1px solid var(--border);
  line-height: normal;
}

.town-chat-form[hidden] { display: none; }

.town-chat-panel {
  display: flex;
  flex: 0 0 var(--town-chat-height);
  flex-direction: column;
  min-width: 0;
  height: var(--town-chat-height);
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(10, 10, 10, 0.74);
  color: var(--text);
  line-height: normal;
}

.town-chat-log {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.town-chat-row {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
  gap: 6px;
  min-height: 18px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 18px;
}

.town-chat-time { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.town-chat-name { color: #d9bd82; font-weight: 700; white-space: nowrap; }
.town-chat-message { min-width: 0; overflow-wrap: anywhere; }

.town-chat-input {
  min-height: 36px;
  border: 1px solid #806846;
  font: inherit;
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 4px;
  background: rgba(255, 249, 224, 0.96);
  color: #24190e;
  font-size: 14px;
  outline: none;
}

.town-chat-send {
  flex: 0 0 auto;
  min-width: 58px;
  border: 1px solid #806846;
  border-radius: 4px;
  background: #4c321d;
  color: #fff0c9;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.town-chat-send:hover,
.town-chat-send:focus-visible { border-color: #e3b85f; }
.town-chat-send:disabled { cursor: wait; opacity: 0.65; }

.town-chat-input:focus { border-color: #e3b85f; box-shadow: inset 0 0 0 1px #e3b85f; }
.town-chat-input[readonly] { opacity: 0.75; }

.town-chat-status {
  flex: 0 0 auto;
  min-height: 0;
  padding: 0 10px;
  color: #fff1c7;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  line-height: normal;
}

.town-chat-status:not(:empty) { padding-top: 3px; }

.town-portal-prompt {
  position: absolute;
  left: 50%;
  bottom: 12%;
  z-index: 230;
  width: min(360px, calc(100% - 24px));
  padding: 14px 16px 12px;
  border: 2px solid #6e4d28;
  border-radius: 5px;
  background: rgba(255, 246, 213, 0.97);
  box-shadow: 3px 4px 0 rgba(30, 18, 8, 0.45);
  color: #2d1d0d;
  line-height: normal;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: auto;
}

.town-portal-prompt[hidden],
.town-portal-status[hidden] { display: none; }

.town-portal-prompt p {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
}

.town-portal-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.town-portal-actions button {
  min-width: 86px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #76552f;
  border-radius: 4px;
  background: #efe0b9;
  color: #2d1d0d;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.town-portal-actions button:focus-visible,
.town-portal-actions button:hover {
  outline: 2px solid #b67627;
  outline-offset: 1px;
  background: #fff2cc;
}

.town-portal-status {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 225;
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  border: 1px solid rgba(240, 204, 132, 0.8);
  border-radius: 4px;
  background: rgba(31, 22, 14, 0.9);
  color: #fff1c7;
  font-size: 13px;
  font-weight: 800;
  line-height: normal;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.town-npc-dialogue {
  position: absolute;
  left: 50%;
  bottom: 5%;
  z-index: 240;
  width: 460px;
  max-width: min(92vw, 520px, calc(100% - 24px));
  max-height: calc(100% - 16px);
  border: 2px solid #8d6a39;
  border-radius: 4px;
  background: rgba(27, 19, 12, 0.96);
  box-shadow: inset 0 0 0 2px rgba(229, 190, 112, 0.18), 3px 5px 0 rgba(0, 0, 0, 0.45);
  color: #f8edcf;
  line-height: normal;
  transform: translateX(-50%);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}

.town-npc-dialogue[hidden] { display: none; }

.town-npc-dialogue-header {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 52px 9px 12px;
  border-bottom: 1px solid #72542e;
  background: rgba(91, 59, 29, 0.72);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.town-npc-dialogue.is-dragging,
.town-npc-dialogue.is-dragging .town-npc-dialogue-header { cursor: grabbing; }
.town-npc-dialogue.is-dragging { user-select: none; }

.town-npc-dialogue-header h2 { margin: 0; color: #ffe4a3; font-size: 16px; line-height: 1.3; }
.town-npc-dialogue-close {
  position: absolute;
  top: 50%;
  right: 3px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: #f8edcf;
  cursor: pointer;
  transform: translateY(-50%);
  touch-action: manipulation;
}
.town-npc-dialogue-close span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(229, 190, 112, 0.42);
  border-radius: 4px;
  background: rgba(20, 13, 8, 0.46);
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
}
.town-npc-dialogue-close:hover span,
.town-npc-dialogue-close:focus-visible span { border-color: #d8a64e; background: rgba(91, 61, 35, 0.82); }
.town-npc-dialogue-close:active span { background: rgba(116, 76, 42, 0.92); transform: scale(0.95); }
.town-npc-dialogue-body { min-height: 0; padding: 11px 12px 10px; overflow-y: auto; }
.town-npc-dialogue-body > p { margin: 0 0 10px; font-size: clamp(13px, 1.35vw, 15px); line-height: 1.55; }

.town-npc-dialogue-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.town-npc-dialogue-action {
  display: block;
  width: 100%;
  min-height: 35px;
  padding: 6px 10px;
  border: 1px solid #a37a3f;
  border-radius: 3px;
  background: #4c321d;
  color: #fff0c9;
  font: inherit;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.town-npc-dialogue-action:hover { background: #5b3d23; }
.town-npc-dialogue-action:focus-visible { outline: 2px solid #d8a64e; outline-offset: 1px; background: #674526; }
.town-npc-dialogue-action:disabled { cursor: wait; opacity: 0.48; }

.town-npc-broker-panel { margin: 0 0 9px; }
.town-npc-broker-panel[hidden] { display: none; }
.town-npc-broker-info,
.town-npc-broker-result {
  display: grid;
  grid-template-columns: minmax(90px, 0.7fr) minmax(0, 1.3fr);
  gap: 4px 10px;
  margin: 0;
  padding: 8px 9px;
  border: 1px solid rgba(163, 122, 63, 0.75);
  background: rgba(12, 8, 5, 0.42);
  font-size: 13px;
  line-height: 1.35;
}
.town-npc-broker-info dt,
.town-npc-broker-result dt { color: #cdbb91; }
.town-npc-broker-info dd,
.town-npc-broker-result dd { margin: 0; color: #fff0c9; font-weight: 800; text-align: right; }
.town-npc-broker-field { display: block; margin-top: 7px; color: #dbc99f; font-size: 13px; line-height: 1.4; }
.town-npc-broker-input-wrap { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.town-npc-broker-input {
  min-width: 0;
  width: 100%;
  height: 34px;
  padding: 5px 8px;
  border: 1px solid #8d6a39;
  border-radius: 3px;
  background: #181008;
  color: #fff0c9;
  font: inherit;
  text-align: right;
}
.town-npc-broker-input:focus-visible { outline: 2px solid #d8a64e; outline-offset: 1px; }
.town-npc-broker-input:disabled { opacity: 0.5; }
.town-npc-broker-quick-amounts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}
.town-npc-broker-quick {
  min-width: 0;
  padding: 5px 3px;
  border: 1px solid rgba(163, 122, 63, 0.85);
  border-radius: 3px;
  background: #3b2818;
  color: #ffe7b3;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.town-npc-broker-quick:hover:not(:disabled) { background: #5b3d23; }
.town-npc-broker-quick:focus-visible { outline: 2px solid #d8a64e; outline-offset: 1px; }
.town-npc-broker-quick:disabled { cursor: wait; opacity: 0.48; }
.town-npc-broker-market {
  margin-top: 6px;
  padding: 7px 9px;
  border-left: 3px solid #b88943;
  background: rgba(76, 50, 29, 0.48);
}
.town-npc-broker-market-status { display: block; color: #ffe4a3; font-size: 12px; }
.town-npc-broker-market-copy { margin: 3px 0 0; color: #d7c39b; font-size: 11px; line-height: 1.45; }
.town-npc-broker-message,
.town-npc-broker-comment { margin: 6px 0 0; color: #e9d39f; font-size: 12px; line-height: 1.45; }
.town-npc-broker-message:empty { display: none; }
.town-npc-broker-message.is-error { color: #ffbd9c; }
.town-npc-broker-result { margin-top: 7px; border-top-style: dashed; border-bottom-style: dashed; }
.town-npc-broker-comment { color: #ffe4a3; }
.town-npc-broker-notice { margin: 5px 0 0; color: #bcae8f; font-size: 11px; line-height: 1.4; }
.town-npc-broker-confirm {
  margin-top: 7px;
  padding: 8px;
  border: 1px solid #c08b42;
  background: rgba(24, 16, 8, 0.9);
  color: #f4dfb1;
  font-size: 12px;
  line-height: 1.45;
}
.town-npc-broker-confirm p { margin: 0; }
.town-npc-broker-confirm-actions { display: flex; gap: 6px; margin-top: 7px; }
.town-npc-broker-confirm-button {
  flex: 1;
  padding: 6px;
  border: 1px solid #b88943;
  border-radius: 3px;
  background: #5b3d23;
  color: #fff0c9;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.town-npc-broker-confirm-button.is-secondary { background: #302218; color: #d3c4a4; }
.town-npc-broker-confirm-button:disabled { cursor: wait; opacity: 0.5; }
.town-npc-broker-order {
  margin: 0 0 6px;
  padding: 8px 9px;
  border: 1px solid rgba(163, 122, 63, 0.72);
  background: rgba(12, 8, 5, 0.45);
  color: #ffe4a3;
  font-size: 12px;
}
.town-npc-broker-order p { margin: 3px 0 0; color: #d7c39b; line-height: 1.45; }
.town-npc-broker-cancel { width: 100%; margin-top: 7px; }
.town-npc-broker-pnl { font-weight: 800; }
.town-npc-broker-pnl.is-profit { color: var(--town-success, #d8d39a); }
.town-npc-broker-pnl.is-loss { color: var(--town-danger, #e1aa91); }

@media (max-width: 900px) {
  .town-page {
    min-height: 0;
    padding: 12px 0 0;
    overflow: visible;
  }

  .town-page-heading {
    width: calc(100% - 24px);
    margin-bottom: 8px;
  }

  .town-game-frame { display: block; width: 100%; }
  .town-play-column { gap: 7px; }
  .town-stage {
    width: 100%;
    max-width: 100%;
    height: clamp(300px, min(62svh, 72vw), 600px);
    border-right: 0;
    border-left: 0;
  }
  .town-chat-panel { border-right: 0; border-left: 0; }
  .town-hud { display: none; }

  .town-chat-bubble { max-width: 170px; font-size: 12px; }
  .town-npc-dialogue { bottom: 3%; width: calc(100% - 16px); max-width: calc(100% - 16px); }
  .town-npc-dialogue-header { padding: 6px 10px; }
  .town-npc-dialogue-body { padding: 9px 10px 8px; }
  .town-npc-dialogue-body > p { margin-bottom: 8px; line-height: 1.45; }
  .town-npc-dialogue-action { min-height: 38px; }
  .town-npc-monologue { max-width: min(190px, 58vw); font-size: 10px; }
}

body.town-mobile-capable .town-mobile-game-start {
  display: block;
  min-width: 160px;
  min-height: 48px;
  margin: 4px auto 10px;
  padding: 10px 18px;
  border: 1px solid rgba(216, 166, 78, 0.8);
  border-radius: 8px;
  background: #4c321c;
  color: #fff0c9;
  font: 800 15px/1.2 system-ui, sans-serif;
}

html.town-mobile-scroll-lock,
html.town-mobile-scroll-lock body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.town-mobile-scroll-lock body {
  position: fixed;
  top: var(--town-mobile-scroll-top, 0);
  left: 0;
  width: 100%;
}

body.town-mobile-game-mode .site-header,
body.town-mobile-game-mode .season-bar,
body.town-mobile-game-mode .ft,
body.town-mobile-game-mode .cw,
body.town-mobile-game-mode .town-page-heading,
body.town-mobile-game-mode .town-mobile-game-start { display: none !important; }

body.town-mobile-game-mode .town-page {
  width: 100%;
  min-height: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
}

body.town-mobile-game-mode .town-game-frame {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: block;
  width: 100vw;
  max-width: none;
  height: var(--town-mobile-height, 100svh);
  margin: 0;
  overflow: hidden;
  background: #000;
}

body.town-mobile-game-mode .town-play-column {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

body.town-mobile-game-mode .town-stage {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  border: 0;
  touch-action: none;
}

body.town-mobile-game-mode .town-hud { display: none; }

body.town-mobile-game-mode .town-mobile-joystick {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 220;
  display: block;
  touch-action: none;
}

body.town-mobile-game-mode .town-mobile-actions {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 220;
  display: flex;
  touch-action: none;
}

.town-mobile-action-button {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(10, 10, 15, 0.38);
  color: #fff;
  font: 800 14px/1 system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body.town-mobile-game-mode .town-mobile-game-exit {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 250;
  display: block;
  min-width: 54px;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(10, 10, 15, 0.55);
  color: #fff;
  font: 700 13px/1 system-ui, sans-serif;
  touch-action: manipulation;
}

body.town-mobile-game-mode .town-chat-panel {
  position: absolute;
  z-index: 210;
  top: calc(max(10px, env(safe-area-inset-top)) + 46px);
  right: max(10px, env(safe-area-inset-right));
  width: min(360px, 45vw);
  height: 108px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(9, 8, 6, 0.62);
  touch-action: pan-y;
}

body.town-mobile-game-mode .town-chat-log { min-height: 0; }
body.town-mobile-game-mode .town-chat-input,
body.town-mobile-game-mode .town-chat-send,
body.town-mobile-game-mode .town-npc-dialogue,
body.town-mobile-game-mode .town-npc-dialogue-body { touch-action: pan-y; }

body.town-mobile-game-mode .town-npc-dialogue {
  left: 50%;
  top: 50%;
  bottom: auto;
  width: min(84vw, 340px);
  max-width: min(84vw, 340px);
  max-height: 62%;
  transform: translate(-50%, -50%);
}

body.town-mobile-game-mode .town-npc-dialogue-header {
  min-height: 44px;
  padding: 9px 50px 8px 10px;
  cursor: default;
}
body.town-mobile-game-mode .town-npc-dialogue-header h2 { font-size: 15px; }
body.town-mobile-game-mode .town-npc-dialogue-body { padding: 7px 8px 8px; }
body.town-mobile-game-mode .town-npc-dialogue-body > p {
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.4;
}
body.town-mobile-game-mode .town-npc-dialogue-actions { gap: 4px; }
body.town-mobile-game-mode .town-npc-dialogue-action {
  min-height: 44px;
  padding: 5px 8px;
  font-size: 12px;
}
body.town-mobile-game-mode .town-npc-broker-panel { margin-bottom: 6px; }
body.town-mobile-game-mode .town-npc-broker-info,
body.town-mobile-game-mode .town-npc-broker-result,
body.town-mobile-game-mode .town-npc-broker-order { padding: 6px 7px; font-size: 12px; }

@media (orientation: landscape) {
  body.town-mobile-game-mode .town-npc-dialogue {
    left: auto;
    right: max(92px, calc(env(safe-area-inset-right) + 84px));
    width: min(42vw, 330px);
    max-width: min(42vw, 330px);
    max-height: min(72%, calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px));
    transform: translateY(-50%);
  }
}

@media (orientation: portrait) {
  body.town-mobile-game-mode .town-mobile-orientation-hint {
    position: absolute;
    z-index: 225;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    display: block;
    max-width: calc(100% - 150px);
    margin: 0;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(10, 10, 15, 0.5);
    color: rgba(255, 255, 255, 0.86);
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    transform: translateX(-50%);
  }

  body.town-mobile-game-mode .town-chat-panel {
    top: calc(max(10px, env(safe-area-inset-top)) + 54px);
    right: 12px;
    width: min(360px, calc(100vw - 24px));
    height: 104px;
  }
}

@supports (height: 100dvh) {
  body.town-mobile-game-mode .town-game-frame { height: var(--town-mobile-height, 100dvh); }
}

@media (prefers-reduced-motion: reduce) {
  .town-world { will-change: auto; }
}
.town-character-select { position: absolute; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(15, 10, 7, .82); }
.town-character-select-card { width: min(420px, 100%); padding: 22px; border: 2px solid #a9783c; border-radius: 12px; background: #f7ecd5; color: #2c1b10; text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,.45); }
.town-character-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.town-character-options button { display: grid; justify-items: center; gap: 6px; padding: 12px; border: 2px solid #9d815e; border-radius: 10px; background: #fffaf0; cursor: pointer; }
.town-character-options button.is-selected { border-color: #8b3d18; background: #f7d9ac; box-shadow: 0 0 0 2px #8b3d18 inset; }
.town-character-options img { width: 60px; height: 80px; image-rendering: pixelated; object-fit: fill; }
.town-character-select-help { margin: 10px 0 12px; padding: 0 12px; text-align: center; line-height: 1.5; white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
.town-character-select-submit { min-width: 140px; padding: 10px 18px; }
.town-character-select-status { min-height: 1.4em; margin-bottom: 0; }