:root {
  color-scheme: light;
  --ink: #201b17;
  --muted: #746a60;
  --paper: #f5f0e7;
  --panel: #fffaf0;
  --line: #ded2c0;
  --market: #bc4f2e;
  --moss: #3f755c;
  --night: #293241;
  --gold: #c8943a;
  --bad: #b84538;
  --good: #377f62;
  --shadow: 0 18px 50px rgba(43, 35, 27, .18);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; max-width: 100%; overflow-x: hidden; background: #2b2925; color: var(--ink); font-family: "Iowan Old Style", "Source Han Serif SC", "Songti SC", Georgia, serif; }
button, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #23231f, #44382d 44%, #1f2d2a);
  z-index: -1;
}

.shell { width: 100%; min-height: 100vh; display: grid; place-items: center; padding: 18px; overflow: hidden; }
.phone {
  width: min(430px, calc(100vw - 24px));
  height: min(900px, calc(100vh - 24px));
  background: var(--paper);
  border: 8px solid #171411;
  border-radius: 38px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.phone::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 116px;
  height: 30px;
  border-radius: 20px;
  background: #111;
  z-index: 20;
}

.game-phone { display: block; }

.hud {
  position: absolute;
  z-index: 20;
  top: 48px;
  left: 12px;
  right: 12px;
  width: auto;
  transform: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "top top"
    "tracker clock";
  column-gap: 8px;
  row-gap: 2px;
  padding: 4px 6px 5px;
  background: rgba(255, 248, 231, .92);
  border: 1px solid rgba(35,30,24,.14);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(35,30,24,.16);
  backdrop-filter: blur(6px);
}

.hud-row {
  grid-area: top;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hud-day {
  font-weight: 800;
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
}

.hud-controls {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  max-width: none;
  min-width: 0;
}

.hud-controls select {
  width: 72px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fffdf7;
  color: var(--ink);
  padding: 3px 4px;
  font-size: 10px;
}

.hud-btn {
  min-width: 30px;
  min-height: 24px;
  border: 1px solid rgba(35,30,24,.18);
  border-radius: 7px;
  background: #fffdf7;
  color: var(--ink);
  padding: 3px 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.hud-btn.audio-btn {
  min-width: 24px;
  padding-left: 4px;
  padding-right: 4px;
}

.hud-btn.active {
  background: var(--gold);
  border-color: #1f1a14;
  color: #1f1a14;
}

.hud-tracker {
  grid-area: tracker;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 9px;
  line-height: 1.15;
  color: var(--muted);
  overflow: hidden;
}

.hud-tracker span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-clock {
  grid-area: clock;
  margin-top: 0;
  width: 116px;
  display: grid;
  gap: 2px;
}

.hud-countdown {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.05;
  white-space: nowrap;
}

.hud-countdown b {
  color: var(--ink);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.hud-countdown small {
  margin-left: auto;
  color: var(--muted);
  font-size: 9px;
}

.hud-progress {
  height: 2px;
  overflow: hidden;
  border: 1px solid rgba(35,30,24,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.48);
}

.hud-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--market), var(--gold));
  transition: width .25s linear;
}

.tracker-going,
.tracker-intent {
  color: var(--ink);
  font-weight: 600;
}

.date-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.brand { font-weight: 800; font-size: 14px; letter-spacing: 0; }
.day-pill { border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; background: rgba(255,255,255,.62); font-size: 11px; color: var(--muted); white-space: nowrap; }
.time-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  align-items: center;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.5);
  padding: 6px;
}
.time-copy b { display: block; font-size: 15px; line-height: 1; }
.time-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.time-controls { display: flex; gap: 6px; align-items: center; }
.time-controls select {
  max-width: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--ink);
  padding: 6px 7px;
  font-size: 11px;
}
.time-toggle {
  border: 1px solid #2b241d;
  border-radius: 8px;
  background: #24201b;
  color: #fff8e8;
  padding: 6px 8px;
  font-size: 12px;
  min-width: 44px;
}
.day-progress {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 999px;
  background: rgba(35,30,24,.14);
  overflow: hidden;
}
.day-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--moss), var(--gold));
  transition: width .35s linear;
}
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 6px; }
.stat { background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: 8px; padding: 4px 5px; min-width: 0; }
.stat b { display: block; font-size: 13px; }
.stat span { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; }

.bottom-nav {
  position: absolute;
  z-index: 42;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: rgba(245, 240, 231, .95);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(6px);
  box-shadow: 0 -6px 18px rgba(35,30,24,.1);
}

.bottom-nav button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 2px;
  line-height: 1.2;
  min-height: 44px;
}

.bottom-nav button.active {
  color: var(--market);
  background: rgba(255, 242, 230, .92);
  box-shadow: inset 0 2px 0 var(--market);
}

.event-notice {
  position: absolute;
  z-index: 18;
  left: 12px;
  right: 12px;
  bottom: 58px;
  display: grid;
  gap: 7px;
  border: 2px solid rgba(255, 245, 103, .96);
  border-radius: 6px;
  background: rgba(24, 22, 18, .92);
  box-shadow: 4px 4px 0 rgba(0,0,0,.55), 0 12px 28px rgba(0,0,0,.24);
  color: #fffbd0;
  padding: 8px;
  animation: event-notice-in .24s ease both;
}
.event-notice-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 7px;
}
.event-notice-head > span,
.event-notice-card span {
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.88);
  background: #c8943a;
  color: #201b17;
  font-weight: 950;
}
.event-notice-head > span {
  width: 28px;
  height: 28px;
  font-size: 13px;
}
.event-notice-head b,
.event-notice-head small,
.event-notice-card b,
.event-notice-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-notice-head b {
  display: block;
  color: #fff36b;
  font-size: 13px;
  line-height: 1.15;
}
.event-notice-head small {
  display: block;
  margin-top: 2px;
  color: #fff4ba;
  font-size: 10px;
}
.event-notice-close {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,245,103,.62);
  background: rgba(255,255,255,.08);
  color: #fffbd0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}
.event-notice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.event-notice-card {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 6px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(255,245,103,.62);
  background: rgba(255, 253, 242, .1);
  color: #fffbd0;
  padding: 5px;
  text-align: left;
}
.event-notice-card span {
  grid-row: span 2;
  width: 22px;
  height: 22px;
  font-size: 10px;
}
.event-notice-card b {
  color: #fffdf2;
  font-size: 11px;
  line-height: 1.1;
}
.event-notice-card small {
  color: #fff36b;
  font-size: 9px;
}
.event-notice-open {
  min-height: 28px;
  border: 2px solid #17120d;
  background: #fff36b;
  box-shadow: 2px 2px 0 rgba(0,0,0,.52);
  color: #211912;
  font-size: 12px;
  font-weight: 950;
}
@keyframes event-notice-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.bottom-sheet {
  bottom: 50px;
  z-index: 34;
  max-height: calc(54% - 50px);
}

.bottom-sheet.tall { max-height: calc(72% - 50px); }

.save-slot-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.save-slot-card {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  padding: 9px;
  text-align: left;
}
.save-slot-card.active { border-color: var(--market); box-shadow: inset 0 0 0 1px rgba(188,79,46,.22); background: #fff5e5; }
.save-slot-card.empty { background: rgba(255,253,247,.68); }
.save-slot-card span, .save-manage-card span { display: block; color: var(--muted); font-size: 10px; }
.save-slot-card b, .save-manage-card b { display: block; margin-top: 3px; font-size: 13px; line-height: 1.2; }
.save-slot-card small, .save-manage-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }

.creation { overflow-y: auto; overflow-x: hidden; padding: 32px 14px 18px; }
.creation h1 { margin: 6px 0 6px; font-size: 24px; line-height: 1.08; }
.creation-gallery {
  background:
    linear-gradient(180deg, rgba(255,250,240,.96), rgba(239,230,214,.94)),
    var(--paper);
}
.creation > *,
.creation-hero,
.creation-card,
.points-panel,
.creation-preview-panel,
.creation-row,
.points-grid,
.interest-chip-grid,
.field,
.point-field {
  max-width: 100%;
  min-width: 0;
}
.creation-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 10px;
  align-items: center;
  min-height: 174px;
  margin: 0 -2px 8px;
  padding: 12px 11px 11px;
  border: 1px solid rgba(35,30,24,.14);
  border-radius: 14px;
  background: #fffaf0;
  box-shadow: 0 12px 26px rgba(43,35,27,.12);
}
.creation-copy h1 {
  margin: 8px 0 6px;
  font-size: 22px;
  line-height: 1.05;
}
.creation-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.creation-showcase {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
}
.creation-preview.large {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(41,31,21,.16);
}
.creation-identity {
  display: grid;
  justify-items: center;
  gap: 2px;
  max-width: 126px;
  text-align: center;
}
.creation-identity b {
  max-width: 126px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.creation-identity span {
  max-width: 126px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
}
.creation-quick-stats {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}
.creation-quick-stats span {
  display: grid;
  justify-items: center;
  gap: 1px;
  border: 1px solid rgba(35,30,24,.12);
  border-radius: 8px;
  background: rgba(255,253,247,.82);
  padding: 4px 2px;
  color: var(--muted);
  font-size: 9px;
}
.creation-quick-stats b {
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
}
.creation-card {
  margin-top: 10px;
  border: 1px solid rgba(35,30,24,.14);
  border-radius: 10px;
  background: rgba(255,250,240,.78);
  padding: 9px;
}
.creation-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}
.field { display: grid; gap: 5px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.field input, .field select, .point-field input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--ink);
  padding: 7px 8px;
}
.creation-assets {
  display: grid;
  grid-template-columns: 1fr 86px;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.creation-preview {
  width: 82px;
  height: 82px;
  border-radius: 12px;
  object-fit: cover;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  background: #eadfcd;
  box-shadow: 0 8px 18px rgba(41,31,21,.14);
}
.walk-binding {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--muted);
  font-size: 11px;
}
.hero-walk {
  grid-column: auto;
  min-height: 34px;
  justify-content: center;
}
.creation-walk { width: 42px; height: 42px; flex: 0 0 42px; }
.avatar-strip {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 8px 1px 2px;
}
.avatar-thumb {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdf7;
  padding: 2px;
}
.avatar-thumb.active {
  border-color: var(--market);
  box-shadow: 0 0 0 2px rgba(188,79,46,.18);
}
.avatar-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
  image-rendering: pixelated;
}
.points-panel {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
  padding: 9px;
}
.points-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.points-head span { color: var(--muted); font-size: 12px; }
.points-head span.bad { color: var(--bad); font-weight: 700; }
.points-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.point-field {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}
.point-stepper {
  display: grid;
  grid-template-columns: 34px minmax(36px, 1fr) 34px;
  gap: 5px;
  min-width: 0;
}
.point-field input { min-height: 34px; padding: 4px; text-align: center; font-weight: 800; }
.point-stepper button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(35,30,24,.18);
  border-radius: 8px;
  background: #fff8e8;
  color: var(--ink);
  font-weight: 700;
}
.point-stepper button:disabled {
  opacity: .36;
}
.interest-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.interest-chip {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fffdf7;
  padding: 6px 5px;
  text-align: left;
  color: var(--ink);
}
.interest-chip.active {
  border-color: #1f1a14;
  background: #2a231d;
  color: #fff8e8;
}
.interest-chip b,
.interest-chip span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.interest-chip b { font-size: 12px; }
.interest-chip span {
  margin-top: 2px;
  color: inherit;
  opacity: .66;
  font-size: 10px;
}
.panel-title span {
  float: right;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
}
.home-preview,
.career-preview,
.fixed-money {
  display: grid;
  gap: 4px;
  margin-top: 7px;
  border: 1px solid rgba(35,30,24,.14);
  border-radius: 8px;
  background: rgba(255,250,240,.74);
  padding: 8px;
  color: var(--muted);
  font-size: 11px;
}
.home-preview span,
.career-preview span,
.fixed-money span { display: block; }
.home-preview b,
.career-preview b,
.fixed-money b { color: var(--ink); }
.creation-preview-summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}
.creation-preview-summary b { color: var(--ink); }

.map-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #6f985f;
  cursor: grab;
}
.map-stage.dragging-map { cursor: grabbing; }
.town-map {
  position: absolute;
  left: 0;
  top: 0;
  width: 1480px;
  height: 980px;
  max-width: none;
  background: #d7c799 center / 100% 100% no-repeat;
  overflow: hidden;
  touch-action: none;
  transform-origin: 0 0;
  will-change: transform;
}
.town-map::after { content: ""; position: absolute; inset: 0; background: rgba(245, 240, 231, .04); pointer-events: none; }
.route-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.route-segment {
  position: absolute;
  height: 0;
  border-top: 2px dashed rgba(255, 245, 103, .72);
  transform-origin: 0 50%;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.45));
  animation: route-dash 1s linear infinite;
}
.route-segment.player-route {
  border-top-color: rgba(255, 232, 96, .96);
  border-top-width: 3px;
}
.route-segment.npc-route {
  border-top-color: rgba(255, 245, 103, .42);
  border-top-width: 2px;
  opacity: .62;
}
.route-target {
  position: absolute;
  min-width: 26px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 245, 103, .96);
  border-radius: 999px;
  background: rgba(24, 22, 18, .9);
  color: #fff36b;
  box-shadow: 2px 2px 0 rgba(0,0,0,.55);
  padding: 2px 5px;
  font-size: 9px;
  font-weight: 950;
  text-align: center;
}
.route-target.player-route {
  border-color: #fff36b;
  background: rgba(188,79,46,.94);
  color: #fffdf2;
}
.route-target.npc-route {
  border-color: rgba(255,245,103,.72);
  background: rgba(24,22,18,.68);
  color: rgba(255,243,107,.82);
  opacity: .78;
}
@keyframes route-dash {
  from { opacity: .45; }
  50% { opacity: .95; }
  to { opacity: .45; }
}
.place-pin {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%);
  width: auto;
  min-width: 54px;
  max-width: 122px;
  border: 2px solid rgba(255, 245, 103, .98);
  border-radius: 2px;
  padding: 2px 5px 3px;
  background: rgba(24, 24, 20, .92);
  box-shadow: 3px 3px 0 rgba(0,0,0,.6);
  text-align: center;
  color: #fff36b;
  text-shadow: 1px 1px 0 #000;
  line-height: 1;
}
.place-pin.active { outline: 2px solid #fff; background: rgba(44, 35, 22, .98); }
.place-pin.label-below,
.place-pin.label-left,
.place-pin.label-right,
.place-pin.occupied.label-above,
.place-pin.occupied.label-below,
.place-pin.occupied.label-left,
.place-pin.occupied.label-right { transform: translate(-50%, -50%); }
.place-pin b {
  display: block;
  font-size: 12px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.place-pin span {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  color: #fffbd0;
}

.sprite {
  position: absolute;
  z-index: 10;
  transform: translate(calc(-50% + var(--crowd-x, 0%)), calc(-50% + var(--crowd-y, 0%)));
  border: 0;
  background: transparent;
  padding: 2px 2px 3px;
  width: 46px;
  min-width: 46px;
  min-height: 76px;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 0;
  /* left/top are driven by JS agent runtime; only transform animates for interaction feedback. */
  transition: transform .16s ease;
}
.sprite:active { transform: translate(calc(-50% + var(--crowd-x, 0%)), calc(-50% + var(--crowd-y, 0%))) scale(.94); }
.sprite.active .walk-sprite { filter: drop-shadow(0 0 3px rgba(255, 232, 96, .92)) drop-shadow(0 2px 2px rgba(35, 30, 24, .38)); }
.sprite.player {
  z-index: 12;
  width: 58px;
  min-width: 58px;
}
.sprite.player .walk-sprite {
  filter: drop-shadow(0 0 4px rgba(255, 232, 96, .95)) drop-shadow(0 2px 2px rgba(35,30,24,.44));
}
.sprite-shadow {
  position: absolute;
  left: 50%;
  bottom: 15px;
  width: 38px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(35, 30, 24, .2);
  pointer-events: none;
}
.walk-sprite {
  width: 34px;
  height: 46px;
  background-size: 102px 184px;
  background-position: 0 0;
  image-rendering: pixelated;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 1px rgba(35, 30, 24, .28));
  position: relative;
  z-index: 1;
}
/* Walk_64 sheet layout (parent order): row0=down, row1=left, row2=right, row3=up. */
.sprite.dir-down .walk-sprite { background-position-y: 0; }
.sprite.dir-left .walk-sprite { background-position-y: -46px; }
.sprite.dir-right .walk-sprite { background-position-y: -92px; }
.sprite.dir-up .walk-sprite { background-position-y: -138px; }
.sprite.moving {
  z-index: 13;
  transform: translate(-50%, -50%);
}
.sprite.moving .sprite-shadow {
  transform: translateX(-50%) scaleX(1.18);
  opacity: .8;
}
.sprite.state-work .walk-sprite,
.sprite.state-eat .walk-sprite,
.sprite.state-rest .walk-sprite,
.sprite.state-home .walk-sprite,
.sprite.state-study .walk-sprite,
.sprite.state-play .walk-sprite,
.sprite.state-chat .walk-sprite,
.sprite.state-campaign .walk-sprite,
.sprite.state-recover .walk-sprite,
.sprite.state-shop .walk-sprite,
.sprite.state-idle .walk-sprite { background-color: transparent; border-color: transparent; }
.activity-badge {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(35,30,24,.18);
  border-radius: 999px;
  background: rgba(255,250,240,.94);
  color: var(--ink);
  font-size: 10px;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(35,30,24,.14);
  pointer-events: none;
  opacity: .9;
  transform: scale(1);
  transition: opacity .16s ease, transform .16s ease;
}
.sprite.player .activity-badge,
.sprite.moving .activity-badge,
.sprite.active .activity-badge,
.sprite:focus-visible .activity-badge {
  opacity: .86;
  transform: scale(1);
}
.state-work .activity-badge { background: #f6d7a8; }
.state-eat .activity-badge { background: #ffe083; }
.state-rest .activity-badge,
.state-home .activity-badge { background: #bad8ae; }
.state-study .activity-badge { background: #b9d5ee; }
.state-play .activity-badge { background: #eab7da; }
.state-chat .activity-badge { background: #ead39d; }
.state-campaign .activity-badge { background: #b9d3ff; }
.state-recover .activity-badge { background: #ffbdbd; }
.state-shop .activity-badge { background: #a8e6c5; }
.state-idle .activity-badge { color: var(--muted); background: #e8e4de; }
.sprite-name {
  max-width: 76px;
  padding: 3px 5px 2px;
  border: 1px solid rgba(255, 245, 103, .96);
  border-radius: 2px;
  background: rgba(24, 24, 20, .9);
  box-shadow: 2px 2px 0 rgba(0,0,0,.48);
  color: #fff36b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;
  margin-top: -2px;
  opacity: .94;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, .95),
    1px 0 1px rgba(0, 0, 0, .85),
    -1px 0 1px rgba(0, 0, 0, .85);
}
.sprite.player .sprite-name,
.sprite.active .sprite-name,
.sprite:focus-visible .sprite-name {
  opacity: 1;
}
.player .sprite-name { color: #ffe866; }
.sprite.crowded .sprite-name {
  max-width: 48px;
  font-size: 9px;
}
.sprite.crowded.active .sprite-name,
.sprite.crowded:focus-visible .sprite-name {
  max-width: 58px;
  color: #fffbe6;
}
.sprite.crowded.active .sprite-name::before,
.sprite.crowded:focus-visible .sprite-name::before {
  content: "";
}
.speech-bubble {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 67px;
  max-width: 102px;
  transform: translateX(-50%);
  border: 1px solid rgba(35,30,24,.72);
  border-radius: 3px;
  background: rgba(255,255,255,.94);
  color: #2f2a22;
  box-shadow: 2px 2px 0 rgba(0,0,0,.28);
  padding: 4px 6px 3px;
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: .88;
}
.speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(255,255,255,.94);
  border-bottom: 0;
}
.sprite.idle:not(.player):not(.active) .speech-bubble {
  opacity: .72;
}
.sprite.crowded:not(.active) .speech-bubble {
  display: none;
}
.activity-badge { font-weight: 800; }
.sprite.state-work .walk-sprite,
.sprite.state-eat .walk-sprite,
.sprite.state-rest .walk-sprite,
.sprite.state-home .walk-sprite,
.sprite.state-study .walk-sprite,
.sprite.state-chat .walk-sprite,
.sprite.state-play .walk-sprite { border-color: transparent; }

.player-follow-ring {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 10px;
  width: 46px;
  height: 18px;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 232, 96, .78);
  border-radius: 50%;
  background: rgba(255, 232, 96, .12);
  box-shadow: 0 0 12px rgba(255, 232, 96, .42);
  pointer-events: none;
  animation: player-ring 2.4s ease-in-out infinite;
}
@keyframes player-ring {
  0%, 100% { opacity: .68; transform: translateX(-50%) scaleX(.92); }
  50% { opacity: 1; transform: translateX(-50%) scaleX(1.16); }
}

.map-event-feedback {
  position: absolute;
  z-index: 18;
  transform: translate(-50%, -118%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  width: 218px;
  max-width: 240px;
  border: 1px solid rgba(35,30,24,.2);
  border-radius: 8px;
  padding: 7px 9px 8px 7px;
  background: rgba(255,248,231,.94);
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(35,30,24,.2);
  pointer-events: none;
  animation: event-feedback-pop 4.2s ease both;
}
.map-event-feedback span {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--market);
  color: #fff8e8;
  font-size: 12px;
  font-weight: 700;
}
.map-event-feedback b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.map-event-feedback small {
  grid-column: 2;
  display: block;
  min-width: 0;
  margin-top: -3px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-event-feedback.ambulance_rescue span { background: #4f8f65; }
.map-event-feedback.police_chase span { background: #466aa2; }
.map-event-feedback.mayor_elected span { background: #b67b22; }
.map-event-feedback.storm_disaster span { background: #5b6171; }
.map-event-feedback.basement_anomaly span { background: #6f4d83; }
.map-event-feedback.wedding span,
.map-event-feedback.proposal span,
.map-event-feedback.love_triangle span { background: #bf5c7a; }
.map-event-feedback.referendum span { background: #5a64b8; }
.map-event-feedback.hot_search span,
.map-event-feedback.tower_hot_search span,
.map-event-feedback.rumor span,
.map-event-feedback.gossip_burst span { background: #c45b82; }
@keyframes event-feedback-pop {
  0% { opacity: 0; transform: translate(-50%, -96%) scale(.88); }
  12%, 72% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -138%) scale(1.02); }
}

.map-event-feedback.flash span {
  animation: event-flash 0.55s ease-in-out 3;
}
@keyframes event-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 80, 60, 0); }
  50% { box-shadow: 0 0 0 8px rgba(255, 80, 60, 0.45); }
}

.floater {
  position: absolute;
  z-index: 16;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(35,30,24,.16);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 250, 240, .92);
  color: var(--ink);
  font-size: 11px;
  box-shadow: 0 7px 18px rgba(0,0,0,.12);
  animation: float-pop 1.8s ease both;
  pointer-events: none;
}

.map-event-ticker {
  position: absolute;
  z-index: 17;
  left: 50%;
  top: 142px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  width: min(292px, calc(100% - 48px));
  overflow-x: auto;
  pointer-events: none;
}
.map-event-chip {
  flex: 0 0 auto;
  width: min(250px, calc(100vw - 82px));
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
  min-height: 40px;
  border: 2px solid rgba(255, 245, 103, .98);
  border-radius: 4px;
  background: rgba(24, 24, 20, .88);
  box-shadow: 3px 3px 0 rgba(0,0,0,.58);
  color: #fffbd0;
  padding: 5px 7px;
  text-align: left;
}
.map-event-chip span {
  border-radius: 999px;
  background: #ffe083;
  color: #2f2519;
  padding: 2px 5px;
  font-size: 9px;
  font-weight: 800;
}
.map-event-chip b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.map-event-chip small {
  color: #fff36b;
  font-size: 10px;
  white-space: nowrap;
}
.map-event-chip.strong span { background: #ffc46b; }
.map-event-chip.rumor span { background: #ffb3ca; }
.map-event-chip.hot_search span { background: #ffb277; }
.map-event-chip.elimination span { background: #ff9b9b; }
.map-event-chip.live span { background: #bce4b8; }

.event-cinematic {
  position: absolute;
  z-index: 28;
  inset: 0;
  display: block;
  pointer-events: auto;
  overflow: hidden;
}
.event-cinematic-dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 11, 9, .08), rgba(13, 11, 9, .12) 54%, rgba(13, 11, 9, .35));
  backdrop-filter: none;
  pointer-events: none;
}
.event-map-signal {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -118%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 7px;
  align-items: center;
  width: 192px;
  max-width: 62%;
  border: 2px solid rgba(255, 245, 103, .95);
  border-radius: 4px;
  background: rgba(24, 22, 18, .92);
  color: #fffbd0;
  box-shadow: 4px 4px 0 rgba(0,0,0,.58);
  padding: 6px 8px;
  pointer-events: none;
  animation: event-map-signal 1.8s ease both;
}
.event-map-signal span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,.88);
  background: #c8943a;
  color: #1d160f;
  font-size: 13px;
  font-weight: 950;
}
.event-map-signal b,
.event-map-signal small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-map-signal b {
  color: #fff36b;
  font-size: 13px;
}
.event-map-signal small {
  color: #fff4ba;
  font-size: 10px;
}
.event-burst {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  top: 36%;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #fff6a7;
  text-align: center;
  text-shadow:
    3px 3px 0 #15100b,
    -2px 2px 0 #15100b,
    0 0 12px rgba(0,0,0,.72);
  animation: event-burst-title 1.55s ease both;
  pointer-events: none;
}
.event-burst-kicker {
  border: 3px solid rgba(255, 255, 255, .92);
  background: rgba(24, 20, 16, .9);
  box-shadow: 4px 4px 0 rgba(0,0,0,.65);
  padding: 5px 10px 4px;
  color: #fffdf2;
  font-size: 14px;
  font-weight: 900;
}
.event-burst-title {
  max-width: 92%;
  color: #fff36b;
  font-size: 42px;
  font-weight: 950;
  line-height: .98;
  letter-spacing: 0;
  -webkit-text-stroke: 1px #17120d;
}
.event-burst-place {
  border: 2px solid rgba(255, 245, 103, .95);
  background: rgba(25, 22, 17, .88);
  box-shadow: 3px 3px 0 rgba(0,0,0,.56);
  padding: 3px 10px;
  color: #fffbd0;
  font-size: 15px;
  font-weight: 900;
}
.event-cinematic.card .event-burst,
.event-cinematic.hold .event-burst {
  animation: event-burst-exit .45s ease both;
}
.event-cinematic-card {
  position: absolute;
  z-index: 3;
  left: 18px;
  right: 18px;
  bottom: 58px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  max-height: 44%;
  min-height: 184px;
  overflow: auto;
  border: 4px solid #17120d;
  background: rgba(255, 253, 242, .96);
  box-shadow:
    6px 6px 0 rgba(0,0,0,.72),
    0 16px 42px rgba(0,0,0,.38);
  padding: 10px;
  opacity: 0;
  transform: translateY(34px) scale(.98);
  pointer-events: auto;
}
.event-cinematic.card .event-cinematic-card,
.event-cinematic.hold .event-cinematic-card {
  animation: event-card-enter .48s ease both;
}
.event-cinematic-art {
  position: relative;
  min-width: 0;
}
.event-cinematic-sheet {
  width: 88px;
  height: 88px;
  border: 2px solid #17120d;
  background-color: #eadfcd;
  background-repeat: no-repeat;
  background-size: 800% 100%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28);
  image-rendering: pixelated;
  animation: event-sheet-cycle .72s steps(8) infinite;
}
.event-cinematic-icon {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 2px solid #17120d;
  background: #eadfcd center / 72% 72% no-repeat;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28);
  color: #211912;
  font-size: 34px;
  font-weight: 950;
  image-rendering: pixelated;
}
.event-cinematic-avatar {
  position: absolute;
  left: -4px;
  bottom: -38px;
  width: 54px;
  height: 54px;
  border: 2px solid #17120d;
  background: #fffaf0;
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  image-rendering: pixelated;
}
.event-cinematic-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
}
.event-cinematic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.event-cinematic-meta span {
  border: 1px solid #17120d;
  background: #fff0b8;
  padding: 2px 5px;
  color: #2c241b;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.event-cinematic-copy h2 {
  margin: 0;
  color: #211912;
  font-size: 19px;
  line-height: 1.12;
}
.event-cinematic-copy p {
  margin: 0;
  color: #3e3429;
  font-size: 12px;
  line-height: 1.35;
}
.event-cinematic-result {
  border-left: 5px solid #17120d;
  background: #f2ead9;
  padding: 6px 8px;
  color: #211912;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}
.event-cinematic-effects,
.event-cinematic-reasons {
  display: grid;
  gap: 3px;
  border: 1px dashed rgba(33, 25, 18, .42);
  background: rgba(255, 248, 225, .8);
  padding: 6px;
  color: #56483b;
  font-size: 10px;
  line-height: 1.28;
}
.event-cinematic-effects b,
.event-cinematic-reasons b { color: #211912; }
.event-cinematic-people {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 1px;
}
.event-cinematic-people button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  border: 1px solid #17120d;
  background: #fffdf7;
  color: #211912;
  padding: 3px 6px 3px 3px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.event-cinematic-people img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.event-cinematic-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 2px;
}
.event-cinematic-actions button,
.event-card-actions button {
  min-width: 0;
  border: 2px solid #17120d;
  background: #fff36b;
  box-shadow: 2px 2px 0 rgba(0,0,0,.55);
  color: #211912;
  padding: 5px 4px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.event-card-actions {
  margin-top: 8px;
}
.event-card-actions button {
  background: #fff7ce;
  padding: 5px 8px;
}
.event-cinematic.strong .event-burst-title,
.event-cinematic.referendum .event-burst-title,
.event-cinematic.elimination .event-burst-title { color: #ffd66b; }
.event-cinematic.rumor .event-cinematic-meta span { background: #ffd6e2; }
.event-cinematic.hot_search .event-cinematic-meta span { background: #ffd4a5; }
.event-cinematic.elimination .event-cinematic-card { border-color: #3a1515; }
@keyframes event-map-signal {
  0% { opacity: 0; transform: translate(-50%, -88%) scale(.86); }
  16% { opacity: 1; transform: translate(-50%, -118%) scale(1.08); }
  72% { opacity: 1; transform: translate(-50%, -118%) scale(1); }
  100% { opacity: .88; transform: translate(-50%, -124%) scale(.98); }
}
@keyframes event-burst-title {
  0% { opacity: 0; transform: translateY(-50%) scale(.58); filter: blur(3px); }
  18% { opacity: 1; transform: translateY(-50%) scale(1.08); filter: blur(0); }
  72% { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 1; transform: translateY(-50%) scale(.98); }
}
@keyframes event-burst-exit {
  to { opacity: 0; transform: translateY(-50%) scale(1.16); filter: blur(2px); }
}
@keyframes event-card-enter {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes float-pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.92); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -86%) scale(1); }
}

.intent-layer {
  position: absolute;
  z-index: 11;
  left: 12px;
  right: 12px;
  bottom: 54px;
  pointer-events: none;
}
.intent-toast {
  pointer-events: auto;
  width: min(270px, 78%);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 7px;
  align-items: center;
  margin: 0 auto 7px;
  border: 1px solid rgba(35,30,24,.16);
  border-radius: 999px;
  background: rgba(255,250,240,.94);
  box-shadow: 0 10px 24px rgba(35,30,24,.16);
  backdrop-filter: blur(6px);
  padding: 7px 7px 7px 10px;
}
.intent-toast span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.intent-toast b { min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intent-toast small {
  grid-column: 1 / -1;
  display: none;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}
.toast-cancel {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf7;
  color: var(--muted);
  padding: 4px 8px;
  font-size: 11px;
}
.task-queue-panel {
  pointer-events: auto;
  width: min(292px, calc(100% - 52px));
  max-height: 122px;
  overflow: hidden;
  margin: 0 auto 6px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(35,30,24,.14);
  border-radius: 12px;
  background: rgba(255, 249, 232, .9);
  box-shadow: 0 8px 20px rgba(35,30,24,.14);
  backdrop-filter: blur(7px);
  padding: 6px;
}
.task-queue-head,
.task-row {
  min-width: 0;
  display: grid;
  align-items: center;
}
.task-queue-head {
  grid-template-columns: auto 1fr;
  gap: 8px;
  color: #7a5620;
  font-size: 10px;
  line-height: 1;
}
.task-queue-head b { font-size: 11px; }
.task-queue-head span { justify-self: end; color: var(--muted); }
.task-row {
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 5px;
  min-height: 25px;
  border: 1px solid rgba(35,30,24,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.58);
  padding: 3px 4px;
}
.task-row.current {
  border-color: rgba(200,148,58,.34);
  background: rgba(255,244,213,.82);
}
.task-row i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f2b84b;
  color: #2b241d;
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
}
.task-row div {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.task-row b,
.task-row span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.task-row b { color: var(--ink); font-size: 11px; line-height: 1.05; }
.task-row span { color: var(--muted); font-size: 9px; }
.task-row button {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(35,30,24,.16);
  border-radius: 999px;
  background: #fffdf7;
  color: #7a5620;
  font-size: 14px;
  line-height: 1;
}
.task-row em {
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
  white-space: nowrap;
}
.debug-intent {
  pointer-events: auto;
  position: absolute;
  right: 0;
  bottom: 42px;
}
.debug-intent summary {
  list-style: none;
  border: 1px solid rgba(35,30,24,.14);
  border-radius: 999px;
  background: rgba(255,250,240,.82);
  color: var(--muted);
  padding: 5px 9px;
  font-size: 11px;
}
.debug-intent summary::-webkit-details-marker { display: none; }
.debug-intent[open] {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(35,30,24,.16);
  border-radius: 12px;
  background: rgba(255,250,240,.94);
  padding: 6px;
  box-shadow: 0 10px 24px rgba(35,30,24,.16);
}
.resolve-btn {
  border: 1px solid #2b241d;
  background: #24201b;
  color: #fff8e8;
  border-radius: 10px;
  padding: 7px 10px;
  min-height: 32px;
  font-size: 12px;
}
.resolve-btn:disabled { opacity: .45; cursor: not-allowed; }
.mini-timeline {
  pointer-events: none;
  width: 132px;
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.mini-timeline span {
  border: 1px solid rgba(35,30,24,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.52);
  color: var(--muted);
  font-size: 9px;
  text-align: center;
  padding: 2px 1px;
}
.mini-timeline span.now { border-color: var(--market); background: #fff2df; color: var(--ink); }
.recent-action-strip {
  pointer-events: none;
  width: calc(100% - 22px);
  max-width: 360px;
  margin: 5px auto 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(35,30,24,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  padding: 2px 5px;
}
.recent-action-strip > b {
  flex: 0 0 auto;
  color: #7a5620;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.recent-action-strip > div {
  min-width: 0;
  display: flex;
  gap: 5px;
  overflow: hidden;
}
.recent-action-strip span {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  padding: 2px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-action-strip::-webkit-scrollbar,
.recent-action-strip > div::-webkit-scrollbar { display: none; }

.intent-popover {
  position: absolute;
  z-index: 40;
  transform: translate(-50%, -100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(58px, 1fr));
  gap: 6px;
  min-width: 164px;
  max-width: 220px;
  padding: 7px;
  border: 1px solid rgba(35,30,24,.18);
  border-radius: 12px;
  background: rgba(255,250,240,.98);
  box-shadow: 0 18px 38px rgba(35,30,24,.28);
  backdrop-filter: blur(6px);
}
.intent-popover {
  margin-left: 12px;
  margin-right: 12px;
}
.intent-popover.below {
  transform: translate(-50%, 0);
}
.intent-popover button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf7;
  color: var(--ink);
  padding: 6px 8px;
  font-size: 12px;
  white-space: nowrap;
}
.intent-popover.player { border-color: rgba(188,79,46,.28); }
.intent-popover.npc { border-color: rgba(63,117,92,.28); }
.intent-popover.place { border-color: rgba(200,148,58,.34); }

.bottom-sheet {
  position: absolute;
  z-index: 34;
  left: 0;
  right: 0;
  bottom: 50px;
  max-height: calc(54% - 50px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--line);
  background: rgba(255, 250, 240, .98);
  box-shadow: 0 -18px 44px rgba(35, 30, 24, .22);
  padding: 8px 14px 18px;
}
.bottom-sheet.tall { max-height: 72%; }
.bottom-sheet.event-sheet {
  z-index: 38;
  max-height: calc(78% - 50px);
}
.sheet-handle { width: 42px; height: 4px; border-radius: 999px; background: #cfbea8; margin: 2px auto 10px; }
.sheet-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.sheet-avatar { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; image-rendering: pixelated; border: 1px solid var(--line); background: #eadfcd; }
.place-emblem { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: #eadfcd; border: 1px solid var(--line); font-weight: 800; }
.icon-btn { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: #fff8e8; }
.sub { color: var(--muted); font-size: 13px; line-height: 1.45; }

.sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 12px 0;
}
.sheet-grid div, .info-list div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  padding: 7px;
}
.sheet-grid span, .info-list span { display: block; font-size: 10px; color: var(--muted); }
.sheet-grid b, .info-list b { display: block; margin-top: 3px; font-size: 13px; }
.memory-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.memory-strip span {
  flex: 0 0 auto;
  max-width: 210px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  background: #fffdf7;
  color: var(--muted);
  font-size: 11px;
}
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.action-pill {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  text-align: left;
  padding: 8px;
}
.action-pill b { display: block; font-size: 13px; }
.action-pill span { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); line-height: 1.3; }

.resident-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0 2px;
}
.mini-person {
  flex: 0 0 72px;
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  padding: 7px 4px;
}
.mini-person img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; image-rendering: pixelated; }
.mini-person span { max-width: 64px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.info-list { display: grid; gap: 8px; margin: 12px 0; }
.panel-title { margin: 12px 0 7px; font-weight: 800; font-size: 13px; }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.detail-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  padding: 7px 5px;
  min-width: 0;
}
.detail-grid span { display: block; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-grid b { display: block; margin-top: 3px; font-size: 14px; }
.detail-grid.compact { grid-template-columns: repeat(4, 1fr); }
.stat-bar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
}
.stat-bar-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stat-bar-item {
  min-width: 0;
  border-radius: 4px;
  background: rgba(238, 235, 226, .92);
  padding: 5px 7px 6px;
}
.stat-bar-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 4px;
}
.stat-bar-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4d463b;
  font-size: 12px;
  line-height: 1.1;
}
.stat-bar-head b {
  color: #17130e;
  font-size: 12px;
  line-height: 1;
}
.stat-track {
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: #fffdf7;
  overflow: hidden;
}
.stat-track em {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: #ef4444;
}
.tone-mid .stat-track em { background: #eab308; }
.tone-low .stat-track em { background: #22b855; }
.profile-sheet .panel-title {
  margin-top: 13px;
  font-size: 14px;
}
.log-list { display: grid; gap: 9px; margin-top: 10px; }
.log-card { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; background: #fffdf7; padding: 10px; }
.log-card p { margin: 5px 0; color: var(--muted); font-size: 12px; }
.log-card span { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.auto-life-list { display: grid; gap: 7px; margin-top: 10px; }
.auto-life-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--moss);
  border-radius: 8px;
  background: #fffdf7;
  padding: 8px 9px;
}
.auto-life-card span { display: block; color: var(--muted); font-size: 10px; }
.auto-life-card b { display: block; margin-top: 2px; font-size: 13px; }
.auto-life-card p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.save-slot-list { display: grid; gap: 9px; margin: 12px 0; }
.save-manage-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  padding: 10px;
}
.save-manage-card.active { border-color: var(--market); background: #fff5e5; }
.save-actions { display: grid; gap: 6px; }
.save-actions button {
  min-width: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff8e8;
  padding: 6px 8px;
  color: var(--ink);
  font-size: 12px;
}
.save-actions button:disabled { opacity: .45; cursor: not-allowed; }
.report-kicker { color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.report-event-link {
  margin: 8px 0;
  border: 1px solid rgba(200, 148, 58, .38);
  border-radius: 8px;
  background: #fff7df;
  padding: 7px 8px;
  color: #7a5620;
  font-size: 12px;
  line-height: 1.4;
}
.event-sheet .event-list { margin-top: 12px; }
.event-sheet-status {
  margin-top: 9px;
  border: 1px solid rgba(200, 148, 58, .34);
  border-radius: 8px;
  background: #fff7df;
  color: #7a5620;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 700;
}
.event-list { margin-top: 10px; display: grid; gap: 10px; }
.event-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: #fffdf7;
  padding: 9px;
  box-shadow: 0 9px 22px rgba(43, 35, 27, .08);
}
.event-card.replayable {
  cursor: pointer;
}
.event-card.replayable:active {
  transform: translateY(1px);
  box-shadow: 0 5px 14px rgba(43, 35, 27, .12);
}
.event-card.security { border-left-color: #3d7da0; }
.event-card.medical { border-left-color: #d35d4c; }
.event-card.disaster { border-left-color: #596273; }
.event-card.civic { border-left-color: #c8943a; }
.event-card.resident { border-left-color: #377f62; }
.event-card.strong { border-left-color: #c8943a; }
.event-card.rumor { border-left-color: #c45b82; }
.event-card.hot_search { border-left-color: #d67c2e; }
.event-card.referendum { border-left-color: #5a64b8; }
.event-card.elimination { border-left-color: #a34040; }
.event-art {
  width: 92px;
  aspect-ratio: 1;
  align-self: start;
  border: 1px solid rgba(35,30,24,.2);
  border-radius: 8px;
  background-color: #eadfcd;
  background-repeat: no-repeat;
  background-size: 800% 100%;
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.24);
  animation: event-sheet-cycle 1s steps(8) infinite;
}
.event-art-icon {
  display: grid;
  place-items: center;
  background-position: center;
  background-size: 72% 72%;
  color: #211912;
  font-size: 32px;
  font-weight: 950;
  animation: none;
}
@keyframes event-sheet-cycle {
  from { background-position: 0 0; }
  to { background-position: 114.285% 0; }
}
.event-copy { min-width: 0; }
.event-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.event-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-card h3 { margin: 3px 0 4px; font-size: 16px; line-height: 1.15; }
.event-card p { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.45; }
.event-party-line,
.event-cinematic-party {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 6px;
  border: 1px solid rgba(191, 92, 122, .28);
  border-radius: 999px;
  background: rgba(255, 239, 246, .86);
  padding: 4px 8px;
  color: #8f3156;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.event-result {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.event-rule-block {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding: 7px;
  border: 1px solid rgba(49, 99, 116, .2);
  border-radius: 6px;
  background: rgba(244, 250, 249, .8);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.event-rule-block b {
  color: var(--ink);
  font-size: 11px;
}
.event-rule-block span {
  display: block;
}
.event-rule-block.consequence {
  border-color: rgba(200, 148, 58, .26);
  background: rgba(255, 248, 232, .72);
}
.event-tags, .event-deltas {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.event-tags span, .event-deltas span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff8e8;
  padding: 3px 6px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}
.event-deltas span { color: var(--ink); background: rgba(255,255,255,.72); }
.event-people {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  white-space: normal;
}
.event-person-chip {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff8e8;
  padding: 2px 7px;
  margin: 2px 2px 0 0;
  color: var(--ink);
  font-size: 10px;
  cursor: pointer;
}
.event-person-chip:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.event-locate-place {
  display: inline;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--muted);
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.event-locate-place:hover { color: var(--ink); }
.event-layer, .event-severity {
  display: inline-flex;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
}
.layer-normal { background: #f0ede6; color: #5e5648; }
.layer-strong { background: #fdebd0; color: #7a5620; }
.layer-rumor { background: #ffe0ec; color: #8b3a5a; }
.layer-hot_search { background: #ffe8d6; color: #8a4a18; }
.layer-referendum { background: #e4e6fc; color: #3a458a; }
.layer-elimination { background: #f3d0d0; color: #7a2a2a; }
.severity-low { background: #e9f3e9; color: #3b6e3b; }
.severity-medium { background: #fff4d6; color: #8a6a18; }
.severity-high { background: #fde2e2; color: #8a2a2a; }
.report-rumor {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 200, 210, 0.22);
  color: #7a3a4a;
  font-size: 11px;
}
.report-anchor {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

.btn { border: 1px solid #2b241d; background: #24201b; color: #fff8e8; border-radius: 10px; padding: 10px 12px; min-height: 42px; }
.btn.secondary { background: #fff6e6; color: var(--ink); border-color: var(--line); width: 100%; margin-top: 8px; }
.field { display: grid; gap: 6px; }
.field input, .field select { width: 100%; border: 1px solid var(--line); background: #fffaf0; border-radius: 10px; padding: 11px; color: var(--ink); }
.badge { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; color: var(--muted); font-size: 11px; background: rgba(255,255,255,.5); }
.creation { padding: 36px 18px 22px; display: grid; gap: 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.creation h1 { margin: 0; font-size: 30px; line-height: 1.05; }
.creation #start { position: static; bottom: auto; z-index: 12; box-shadow: none; }

.creation.creation-gallery {
  position: relative;
  isolation: isolate;
  align-content: start;
  gap: 16px;
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 209, 67, .16), transparent 25%),
    linear-gradient(180deg, rgba(18, 18, 21, .98), rgba(25, 24, 25, .96) 48%, rgba(35, 31, 28, .98)),
    #151518;
  color: #f7f3ea;
  font-family: "Trebuchet MS", "Arial Black", "Microsoft YaHei", sans-serif;
}
.creation-icon-cloud {
  position: absolute;
  inset: 18px 14px auto;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px 14px;
  height: 340px;
  overflow: hidden;
  opacity: .34;
  mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 100%);
  pointer-events: none;
}
.creation-icon-cloud span {
  display: grid;
  place-items: center;
  min-width: 0;
  color: #8f919d;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.creation.creation-gallery .badge {
  border-color: rgba(255, 213, 71, .5);
  background: rgba(255, 204, 51, .12);
  color: #ffd64a;
  border-radius: 5px;
  font-family: inherit;
  font-weight: 900;
}
.creation.creation-gallery .creation-hero {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 0;
  min-height: 74px;
  margin: -2px 6px 10px;
  padding: 17px 14px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(28, 28, 31, .86), rgba(18, 18, 21, .72));
  box-shadow: 0 22px 42px rgba(0, 0, 0, .3);
}
.creation.creation-gallery .creation-copy {
  display: grid;
  justify-items: center;
  max-width: 300px;
}
.creation.creation-gallery .creation-copy h1 {
  color: #ffd338;
  margin: 0;
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
  text-wrap: balance;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .28);
}
.creation.creation-gallery .creation-copy p {
  margin: 0;
  color: #d6d3ca;
  font-size: 12px;
  line-height: 1.72;
  text-wrap: pretty;
}
.creation-step-badge {
  display: grid;
  justify-items: center;
  margin: -2px 0 2px;
}
.profile-create-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 12px;
  align-items: start;
}
.profile-create-fields {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.creation-row.compact {
  gap: 8px;
}
.creation.creation-gallery .creation-showcase {
  align-self: start;
  padding: 8px 7px 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
}
.creation.creation-gallery .creation-showcase.in-profile {
  position: sticky;
  top: 8px;
}
.creation.creation-gallery .creation-preview.large {
  width: 82px;
  height: 82px;
}
.creation.creation-gallery .creation-identity {
  max-width: 104px;
}
.creation.creation-gallery .creation-identity b,
.creation.creation-gallery .creation-identity span {
  max-width: 104px;
}
.creation.creation-gallery .save-slot-strip {
  margin-top: 2px;
}
.creation.creation-gallery .creation-preview.large,
.creation.creation-gallery .avatar-thumb.active img {
  outline: 2px solid #ffd338;
  outline-offset: 2px;
}
.creation.creation-gallery .creation-identity b,
.creation.creation-gallery .creation-quick-stats b,
.creation.creation-gallery .home-preview b,
.creation.creation-gallery .career-preview b,
.creation.creation-gallery .fixed-money b,
.creation.creation-gallery .creation-preview-summary b {
  color: #fff8df;
}
.creation.creation-gallery .creation-identity span,
.creation.creation-gallery .creation-copy p,
.creation.creation-gallery .field,
.creation.creation-gallery .panel-title span,
.creation.creation-gallery .points-head span,
.creation.creation-gallery .home-preview,
.creation.creation-gallery .career-preview,
.creation.creation-gallery .fixed-money,
.creation.creation-gallery .creation-preview-summary {
  color: #c9c5bc;
}
.creation.creation-gallery .save-slot-card,
.creation.creation-gallery .creation-card,
.creation.creation-gallery .points-panel,
.creation.creation-gallery .creation-preview-panel {
  border-color: rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(247, 243, 234, .08);
  box-shadow: none;
}
.creation.creation-gallery .save-slot-card.active,
.creation.creation-gallery .avatar-thumb.active,
.creation.creation-gallery .interest-chip.active {
  border-color: #ffd338;
  background: rgba(255, 211, 56, .13);
  color: #fff8df;
  box-shadow: 0 0 0 1px rgba(255, 211, 56, .24);
}
.creation.creation-gallery .save-slot-card b,
.creation.creation-gallery .panel-title,
.creation.creation-gallery .interest-chip b {
  color: #fff8df;
}
.creation.creation-gallery .save-slot-card span,
.creation.creation-gallery .save-slot-card small,
.creation.creation-gallery .interest-chip span {
  color: #bab7b0;
}
.creation.creation-gallery .field input,
.creation.creation-gallery .field select,
.creation.creation-gallery .point-field input {
  border-color: rgba(255, 255, 255, .18);
  border-radius: 7px;
  background: rgba(255, 255, 255, .08);
  color: #fff8df;
}
.creation.creation-gallery .field select {
  color: #fff8df;
}
.creation.creation-gallery .field select option {
  background: #ffffff;
  color: #171411;
}
.creation.creation-gallery .field select option:checked {
  background: #2f73d8;
  color: #ffffff;
}
.creation.creation-gallery .field input::placeholder {
  color: rgba(255, 248, 223, .48);
}
.creation.creation-gallery .avatar-thumb,
.creation.creation-gallery .interest-chip,
.creation.creation-gallery .point-stepper button,
.creation.creation-gallery .home-preview,
.creation.creation-gallery .career-preview,
.creation.creation-gallery .fixed-money {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
}
.creation.creation-gallery .point-stepper button {
  color: #fff8df;
}
.creation.creation-gallery .btn {
  border-color: #ffd338;
  border-radius: 7px;
  background: #ffd338;
  color: #171411;
  font-family: inherit;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(255, 211, 56, .22);
}

@media (max-height: 760px) {
  .phone { height: calc(100vh - 20px); }
  .hud { top: 42px; left: 10px; right: 10px; width: auto; transform: none; padding: 4px 6px; row-gap: 2px; }
  .hud-day { font-size: 10px; }
  .hud-controls { gap: 3px; max-width: none; }
  .hud-controls select { width: 70px; }
  .hud-btn { min-width: 28px; min-height: 23px; padding: 3px 4px; font-size: 9px; }
  .hud-tracker { font-size: 9px; }
  .hud-clock { width: 108px; }
  .hud-countdown { font-size: 9px; }
  .event-burst-title { font-size: 34px; }
  .event-map-signal { width: 176px; }
  .event-cinematic-card { bottom: 54px; min-height: 172px; max-height: 42%; }
  .event-cinematic-copy h2 { font-size: 17px; }
  .event-cinematic-copy p,
  .event-cinematic-result { font-size: 11px; }
}

@media (max-width: 380px) {
  .hud { left: 8px; right: 8px; width: auto; transform: none; padding: 4px 5px; border-radius: 10px; column-gap: 5px; }
  .hud-day { font-size: 10px; }
  .hud-controls { gap: 2px; max-width: none; }
  .hud-controls select { width: 64px; font-size: 9px; padding: 3px; }
  .hud-btn { min-width: 26px; min-height: 22px; padding: 3px 4px; font-size: 9px; }
  .hud-tracker { gap: 4px; font-size: 9px; }
  .hud-clock { width: 102px; }
  .hud-countdown { gap: 4px; font-size: 9px; }
  .hud-countdown b,
  .hud-countdown small { font-size: 9px; }
  .bottom-nav button { font-size: 10px; }
  .place-pin { padding: 2px 4px; }
  .place-pin b { font-size: 11px; }
  .event-cinematic-card {
    left: 12px;
    right: 12px;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }
  .event-cinematic-sheet { width: 76px; height: 76px; }
  .event-cinematic-icon { width: 76px; height: 76px; font-size: 28px; }
  .event-cinematic-avatar { width: 46px; height: 46px; bottom: -32px; }
  .event-cinematic-actions button { font-size: 10px; padding: 5px 2px; }
  .relationship-map { height: 214px; }
  .relation-node { width: 48px; }
  .relation-node img { width: 32px; height: 32px; }
  .relationship-detail-row em { display: none; }
}

@media (min-width: 420px) {
  .hud { left: 14px; right: 14px; width: auto; transform: none; padding: 5px 8px; }
  .hud-controls { max-width: none; }
  .hud-controls select { width: 78px; }
  .hud-btn { min-height: 25px; padding: 3px 6px; font-size: 10px; }
  .bottom-nav button { font-size: 12px; }
}

@media (max-height: 680px) {
  .hud { top: 38px; }
  .hud-tracker { display: none; }
  .hud-clock { margin-top: 4px; }
  .intent-layer { bottom: 50px; }
}

/* Pixel UI sample layer.
   Opt-in only: wrap a prototype section in `.pixel-ui-sample` to preview.
   Safe rollback: delete this block without touching gameplay styles. */
.pixel-ui-sample {
  --px-ink: #241812;
  --px-paper: #f7e7c3;
  --px-panel: #fff4cf;
  --px-dark: #1e1a16;
  --px-line: #6d4b2f;
  --px-shadow: #3a2416;
  --px-gold: #f2b84b;
  --px-red: #c44b3c;
  --px-green: #4f9a65;
  --px-blue: #4f80b8;
  --px-font: "Fusion Pixel 12px", "Zpix", "ark-pixel-12px", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--px-ink);
  font-family: var(--px-font);
}

.pixel-ui-sample .px-button,
.pixel-ui-sample .px-bottom-sheet,
.pixel-ui-sample .px-person-panel,
.pixel-ui-sample .px-avatar-menu,
.pixel-ui-sample .px-event-card,
.pixel-ui-sample .px-hud,
.pixel-ui-sample .px-map-marker {
  border: 2px solid var(--px-line);
  border-radius: 2px;
  background: var(--px-panel);
  box-shadow: 4px 4px 0 var(--px-shadow);
  image-rendering: pixelated;
}

.pixel-ui-sample .px-button {
  min-height: 44px;
  padding: 9px 12px;
  background: var(--px-dark);
  color: var(--px-paper);
  font-weight: 800;
  letter-spacing: 0;
}

.pixel-ui-sample .px-button.secondary {
  background: var(--px-paper);
  color: var(--px-ink);
}

.pixel-ui-sample .px-button.danger {
  border-color: var(--px-red);
}

.pixel-ui-sample .px-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--px-shadow);
}

.pixel-ui-sample .px-hud {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  padding: 8px;
  background: var(--px-dark);
  color: var(--px-paper);
}

.pixel-ui-sample .px-hud-progress {
  grid-column: 1 / -1;
  height: 8px;
  background: var(--px-line);
}

.pixel-ui-sample .px-hud-progress > span {
  display: block;
  width: var(--px-progress, 50%);
  height: 100%;
  background: var(--px-gold);
}

.pixel-ui-sample .px-bottom-sheet {
  padding: 10px;
  border-bottom: 0;
  box-shadow: 0 -4px 0 var(--px-shadow);
}

.pixel-ui-sample .px-person-panel {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 10px;
}

.pixel-ui-sample .px-person-panel img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  image-rendering: pixelated;
}

.pixel-ui-sample .px-avatar-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(68px, 1fr));
  gap: 6px;
  padding: 8px;
  position: relative;
}

.pixel-ui-sample .px-avatar-menu::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -8px;
  width: 12px;
  height: 12px;
  background: var(--px-panel);
  border-right: 2px solid var(--px-line);
  border-bottom: 2px solid var(--px-line);
  transform: rotate(45deg);
}

.pixel-ui-sample .px-event-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  padding: 10px;
  border-left: 8px solid var(--px-gold);
}

.pixel-ui-sample .px-event-card.medical { border-left-color: var(--px-red); }
.pixel-ui-sample .px-event-card.security { border-left-color: var(--px-blue); }
.pixel-ui-sample .px-event-card.disaster { border-left-color: var(--px-line); }

.pixel-ui-sample .px-event-art {
  width: 96px;
  height: 96px;
  background: var(--px-paper) center / cover no-repeat;
  border: 2px solid var(--px-line);
  image-rendering: pixelated;
}

.pixel-ui-sample .px-map-marker {
  min-width: 64px;
  min-height: 44px;
  padding: 6px 8px;
  background: var(--px-paper);
  font-size: 12px;
}

.creation-preview-panel {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, .74);
  padding: 10px;
}
.creation-preview-panel .panel-title {
  margin: 10px 0 6px;
  font-weight: 800;
  font-size: 12px;
  color: var(--muted);
}
.creation-preview-panel .panel-title:first-child {
  margin-top: 0;
}
.creation-preview-panel .sub {
  margin-top: 8px;
  font-size: 10px;
}

@media (max-width: 380px) {
  .creation {
    padding-top: 28px;
  }
  .creation-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .creation.creation-gallery .creation-hero {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    margin: 0 0 12px;
    padding: 16px 14px 17px;
  }
  .creation-copy h1 {
    font-size: 21px;
  }
  .creation.creation-gallery .creation-copy h1 {
    font-size: 31px;
  }
  .creation-copy p {
    font-size: 10.5px;
  }
  .creation-showcase:not(.in-profile) {
    grid-template-columns: 82px 1fr;
    justify-items: start;
    align-items: center;
  }
  .profile-create-grid {
    grid-template-columns: 1fr;
  }
  .creation.creation-gallery .creation-showcase.in-profile {
    position: static;
    grid-template-columns: 92px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
  }
  .creation-preview.large {
    width: 78px;
    height: 78px;
  }
  .creation-showcase.in-profile .creation-preview.large {
    grid-row: span 2;
  }
  .creation-identity {
    justify-items: start;
    text-align: left;
  }
  .creation-quick-stats {
    grid-column: 1 / -1;
  }
  .creation-row,
  .points-grid {
    grid-template-columns: 1fr;
  }
  .interest-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field select[multiple] {
  min-height: 64px;
  padding: 4px;
}
.field select[multiple] option {
  padding: 5px 7px;
  border-radius: 6px;
  margin: 1px 0;
}
.field select[multiple] option:checked {
  background: var(--market);
  color: #fff8e8;
}

.relationship-list {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}
.relationship-row {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  padding: 7px;
}
.relationship-row b {
  font-size: 13px;
}
.relationship-row span {
  font-size: 11px;
  color: var(--muted);
}

.relationship-sheet {
  overflow-x: hidden;
}
.relationship-map {
  position: relative;
  height: 240px;
  margin: 12px 0 10px;
  border: 1px solid rgba(35,30,24,.14);
  border-radius: 12px;
  background:
    linear-gradient(0deg, rgba(255,250,240,.88), rgba(255,250,240,.88)),
    radial-gradient(circle at 50% 50%, rgba(200,148,58,.18), transparent 58%);
  overflow: hidden;
}
.relationship-map::before,
.relationship-map::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed rgba(35,30,24,.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.relationship-map::before { width: 70%; height: 54%; }
.relationship-map::after { width: 46%; height: 34%; }
.relationship-links {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.relation-link {
  fill: none;
  stroke: rgba(116,106,96,.5);
  stroke-width: var(--link-width, 2);
  stroke-linecap: round;
  opacity: var(--link-opacity, .55);
  vector-effect: non-scaling-stroke;
}
.relation-link.friend { stroke: rgba(55,127,98,.72); }
.relation-link.romance { stroke: rgba(198,95,141,.76); }
.relation-link.conflict { stroke: rgba(184,69,56,.74); }
.relation-link.neutral { stroke: rgba(116,106,96,.34); }
.relation-center {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 74px;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--ink);
  text-align: center;
}
.relation-center img,
.relation-node img,
.relationship-detail-row img {
  image-rendering: pixelated;
}
.relation-center img {
  width: 48px;
  height: 48px;
  border: 2px solid #17120d;
  border-radius: 12px;
  background: #eadfcd;
  box-shadow: 3px 3px 0 rgba(0,0,0,.38);
}
.relation-center b,
.relation-node b {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.relation-node {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 56px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
}
.relation-node::before {
  content: "";
  display: none;
  position: absolute;
  left: 50%;
  top: 26px;
  width: var(--relation-width, 34px);
  height: 2px;
  background: rgba(116,106,96,.42);
  transform-origin: left center;
  transform: rotate(0deg);
  z-index: -1;
}
.relation-node img {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(35,30,24,.85);
  border-radius: 10px;
  background: #fffdf7;
}
.relation-node.friend img,
.relationship-detail-row.friend img { border-color: var(--good); }
.relation-node.romance img,
.relationship-detail-row.romance img { border-color: #c65f8d; }
.relation-node.conflict img,
.relationship-detail-row.conflict img { border-color: var(--bad); }
.relation-node.friend::before { background: rgba(55,127,98,.58); }
.relation-node.romance::before { background: rgba(198,95,141,.58); }
.relation-node.conflict::before { background: rgba(184,69,56,.58); }
.relation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
}
.relation-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf7;
  padding: 4px 7px;
}
.relation-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}
.relation-legend i.friend { background: var(--good); }
.relation-legend i.romance { background: #c65f8d; }
.relation-legend i.conflict { background: var(--bad); }
.relationship-list.detailed {
  gap: 8px;
}
.relationship-detail-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  padding: 8px;
  text-align: left;
  color: var(--ink);
}
.relationship-detail-row img {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(35,30,24,.22);
  border-radius: 10px;
  background: #eadfcd;
}
.relationship-detail-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.relationship-detail-row b,
.relationship-detail-row small,
.relationship-detail-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.relationship-detail-row b { font-size: 13px; }
.relationship-detail-row small {
  color: var(--muted);
  font-size: 11px;
}
.relationship-detail-row em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}