:root {
  color-scheme: light;
  --bg: #eef2ff;
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.76);
  --glass-soft: rgba(255, 255, 255, 0.4);
  --text: #1e1852;
  --muted: #7c6aaa;
  --line: rgba(255, 255, 255, 0.78);
  --accent: #f472b6;
  --accent-2: #c084fc;
  --danger: #ff4d6d;
  --shadow:
    0 26px 82px rgba(167, 100, 210, 0.18), 0 0 46px rgba(244, 114, 182, 0.16);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(186, 230, 255, 0.88),
      transparent 29%
    ),
    radial-gradient(
      circle at 84% 16%,
      rgba(250, 182, 255, 0.58),
      transparent 32%
    ),
    radial-gradient(
      circle at 78% 78%,
      rgba(167, 243, 208, 0.58),
      transparent 34%
    ),
    linear-gradient(145deg, #dbeafe 0%, #ede9fe 48%, #fce7f3 100%);
  background-attachment: fixed;
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  background: conic-gradient(
    from 120deg at 50% 50%,
    rgba(186, 230, 255, 0.52),
    rgba(250, 182, 255, 0.48),
    rgba(167, 243, 208, 0.44),
    rgba(244, 114, 182, 0.34),
    rgba(186, 230, 255, 0.52)
  );
  filter: blur(38px) saturate(160%);
  animation: shaderFlow 22s linear infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 82%);
}

@keyframes shaderFlow {
  to {
    transform: rotate(360deg);
  }
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0;
}

.hidden {
  display: none !important;
}

.auth-view {
  min-height: calc(100vh - 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  justify-items: center;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 58px;
  line-height: 0.95;
  letter-spacing: 0;
}

.auth-panel,
.pet-panel,
.log-panel,
.admin-panel,
.modal-panel {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.auth-panel {
  width: min(380px, 100%);
  padding: 26px;
}

/* ── 玩法说明 modal ─────────────────────────────────── */
.help-panel {
  width: min(720px, 92vw);
  max-height: 86vh;
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.help-body {
  overflow-y: auto;
  padding-right: 8px;
  line-height: 1.7;
  color: var(--text);
  font-size: 14px;
}
.help-body h3 {
  margin: 18px 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  border-left: 4px solid var(--accent, #6f9bff);
  padding-left: 10px;
}
.help-body h3:first-child {
  margin-top: 4px;
}
.help-body p {
  margin: 6px 0;
}
.help-body ul,
.help-body ol {
  margin: 6px 0 6px 20px;
  padding: 0;
}
.help-body li {
  margin: 4px 0;
}
.help-body pre {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 8px 0;
}
.help-body b {
  color: var(--accent, #6f9bff);
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
}

.tab,
.ghost,
.danger-btn,
.icon-btn,
.user-chip {
  border: 1px solid rgba(255, 255, 255, 0.68);
  color: var(--text);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72),
    rgba(233, 213, 255, 0.42)
  );
  border-radius: 14px;
  min-height: 42px;
  box-shadow:
    0 10px 28px rgba(167, 100, 210, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  transition:
    transform 0.12s,
    box-shadow 0.12s,
    background 0.12s;
}

.tab,
.ghost,
.danger-btn,
.icon-btn,
.primary {
  transition:
    transform 0.12s,
    box-shadow 0.12s,
    filter 0.12s;
}

.tab:active,
.ghost:active,
.danger-btn:active,
.icon-btn:active,
.primary:active {
  transform: scale(0.94);
  filter: brightness(0.96);
}

button.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
  cursor: wait;
}
button.loading::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.55s linear infinite;
  transform: translateY(-50%);
}
@keyframes btn-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

.danger-btn {
  color: var(--danger);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.tab.active {
  background: linear-gradient(
    135deg,
    rgba(253, 219, 236, 0.98),
    rgba(244, 114, 182, 0.88)
  );
  color: #4a0a35;
  border-color: var(--accent);
  font-weight: 800;
}

label {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 14px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--text);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 0 0 1px rgba(167, 100, 210, 0.06);
}

textarea {
  min-height: 160px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.45;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}

.primary {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  padding: 0 18px;
  background: linear-gradient(135deg, #fbcfe8 0%, #f472b6 60%, #a855f7 100%);
  color: #4a0a35;
  font-weight: 800;
  box-shadow:
    0 14px 34px rgba(244, 114, 182, 0.32),
    0 0 30px rgba(251, 207, 232, 0.28);
}

.hint {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 18px;
}

.eyebrow,
.section-label {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 800;
}

.topbar h2 {
  margin-top: 4px;
  font-size: 32px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-chip {
  min-width: 92px;
  padding: 0 14px;
  font-weight: 900;
  color: var(--text);
}

.weather-badge {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 14px;
  padding: 0 14px;
  color: var(--text);
  font-weight: 900;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.82),
      rgba(186, 230, 255, 0.48)
    ),
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.88),
      transparent 40%
    );
  box-shadow:
    0 12px 26px rgba(167, 100, 210, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

.pet-team-head {
  display: grid;
  gap: 10px;
}

.pet-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.compact-input {
  width: 160px;
  min-height: 42px;
}

.icon-btn {
  width: 42px;
  font-size: 26px;
  color: var(--danger);
}

/* === Circular topbar buttons === */
.circ-btn {
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  padding: 0;
  color: var(--text);
  transition:
    background 0.15s,
    box-shadow 0.15s,
    transform 0.12s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
.circ-btn:hover {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}
.circ-btn:active {
  transform: scale(0.92);
}
.circ-btn--danger {
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.35);
}
.circ-btn--danger:hover {
  background: #fff0f0;
}

/* === Map snapshot list === */
.snapshot-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.snapshot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}
.snapshot-name {
  font-weight: 600;
  font-size: 13px;
  flex: 1;
  min-width: 80px;
}
.snapshot-meta {
  font-size: 11px;
  color: var(--muted);
}
.snapshot-btns {
  display: flex;
  gap: 4px;
}
.snapshot-btns .ghost,
.snapshot-btns .danger-btn {
  padding: 2px 8px;
  font-size: 12px;
  min-height: 28px;
}

/* === Low stamina color in stats bar === */
.world-stats-bar .ap-low {
  color: #991b1b;
  font-weight: 700;
}

.ghost-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.85);
  color: #2c3e50;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ghost-btn:hover {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.ghost-btn:active {
  transform: translateY(1px);
  background: #f1f4f8;
}

.map-toolbar {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 60;
  display: flex;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.map-tgl {
  border: 1px solid transparent;
  background: transparent;
  font-size: 16px;
  padding: 4px 7px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.35;
  transition:
    opacity 0.15s,
    background 0.15s,
    border-color 0.15s;
}
.map-tgl:hover {
  background: rgba(0, 0, 0, 0.04);
}
.map-tgl.on {
  opacity: 1;
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.3);
}

/* Overlay hide classes (toggled by toolbar) */
.world.hide-pets .pet-avatar {
  display: none !important;
}
.world.hide-buildings .world-object.type-building {
  display: none !important;
}
.world.hide-plants .world-object.type-plant {
  display: none !important;
}
.world.hide-items .world-object.type-item {
  display: none !important;
}
.world.hide-badges .pet-status-badges {
  display: none !important;
}
.pet-status-badges {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-end;
  z-index: 5;
  pointer-events: none;
}
.pet-status-badge {
  font-size: 11px;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}
.pet-status-badge.sb-injured {
  background: rgba(248, 113, 113, 0.95);
}
.pet-status-badge.sb-hungry {
  background: rgba(251, 191, 36, 0.95);
}
.pet-status-badge.sb-tired {
  background: rgba(148, 163, 184, 0.95);
}
.pet-status-badge.sb-sick {
  background: rgba(168, 85, 247, 0.95);
}
.pet-status-badge.sb-commanded {
  background: rgba(96, 165, 250, 0.95);
}
.pet-status-badge.sb-role {
  background: rgba(34, 197, 94, 0.95);
}

/* Mini tutorial overlay */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}
.tutorial-overlay.hidden {
  display: none;
}
.tutorial-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 22px 24px;
  max-width: 420px;
  width: calc(100% - 40px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(124, 58, 237, 0.25);
}
.tutorial-card h3 {
  margin: 0 0 10px;
  color: #4c1d95;
}
.tutorial-card p {
  margin: 0 0 16px;
  line-height: 1.55;
  color: #334155;
}
.tutorial-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tutorial-foot small {
  color: #94a3b8;
  font-size: 12px;
}
.tutorial-actions {
  display: flex;
  gap: 8px;
}

/* Floating action feedback text */
.float-text {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
  z-index: 25;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.45);
  animation: float-up 1.1s ease-out forwards;
  white-space: nowrap;
}
.float-text.float-damage {
  color: #dc2626;
}
.float-text.float-heal {
  color: #16a34a;
}
.float-text.float-love {
  color: #db2777;
}
.float-text.float-miss {
  color: #6b7280;
  letter-spacing: 1px;
}
.float-text.float-neutral {
  color: #1e3a8a;
}
@keyframes float-up {
  0% {
    transform: translate(-50%, -50%) translateY(0) scale(0.6);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -50%) translateY(-6px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateY(-28px) scale(1);
    opacity: 0;
  }
}

/* Relationship row intimacy bar + interactions */
.relationship {
  cursor: pointer;
  transition: background 0.15s;
}
.relationship:hover {
  background: rgba(124, 58, 237, 0.06);
}
.rel-bar {
  width: 60px;
  height: 5px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
  flex: 0 0 auto;
}
.rel-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.rel-bar-pos {
  background: linear-gradient(90deg, #fbbf24, #f472b6);
}
.rel-bar-neg {
  background: linear-gradient(90deg, #fbbf24, #f87171);
}

/* Pet avatar flash when focused via relationship click */
.pet-avatar.pet-flash {
  animation: pet-flash 1.4s ease-out;
  z-index: 30;
}
@keyframes pet-flash {
  0%,
  100% {
    box-shadow: none;
  }
  20%,
  70% {
    box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.7);
  }
}

/* Rare exploration sites on map */
.rare-site {
  pointer-events: auto;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
  animation: rare-pulse 3s ease-in-out infinite;
  cursor: help;
}
@keyframes rare-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* World mood badge */
.world-mood {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
}
.world-mood.mood-calm {
  background: rgba(74, 222, 128, 0.18);
  color: #166534;
}
.world-mood.mood-alert {
  background: rgba(251, 191, 36, 0.22);
  color: #92400e;
}
.world-mood.mood-danger {
  background: rgba(248, 113, 113, 0.25);
  color: #991b1b;
  animation: mood-pulse 1.5s ease-in-out infinite;
}
@keyframes mood-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
  }
}

/* Objective list */
.objective-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}
.obj-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  font-size: 12px;
}
.obj-item.obj-done {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  opacity: 0.85;
}
.obj-tick {
  font-size: 14px;
  flex: 0 0 auto;
}
.obj-body {
  flex: 1;
  min-width: 0;
}
.obj-label {
  color: #1f2937;
  font-weight: 500;
  margin-bottom: 3px;
}
.obj-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.obj-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  border-radius: 4px;
  transition: width 0.3s;
}
.obj-num {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}
.obj-count {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 600;
}
.obj-item.obj-claimed-state {
  opacity: 0.55;
}
.obj-reward {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(251, 191, 36, 0.2);
  color: #92400e;
  margin-left: 4px;
  font-weight: 600;
}
.obj-claim-btn {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 6px;
  flex: 0 0 auto;
  animation: obj-pulse 1.4s ease-in-out infinite;
}
@keyframes obj-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(124, 58, 237, 0);
  }
}
.obj-claimed {
  font-size: 11px;
  color: #16a34a;
  font-weight: 600;
}

.last-act-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 12px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.25);
  vertical-align: middle;
}

.pet-name-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.pet-name-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pet-name-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pet-name-icon-btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(255, 255, 255, 0.48);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.46;
  transition:
    opacity 0.18s,
    background 0.18s,
    transform 0.18s;
}

.pet-title:hover .pet-name-icon-btn,
.pet-name-icon-btn:focus-visible {
  opacity: 1;
}

.pet-name-icon-btn:hover {
  background: rgba(124, 58, 237, 0.12);
  transform: translateY(-1px);
}
.world.show-grid .terrain {
  outline: 1px solid rgba(255, 255, 255, 0.08);
}

/* Non-scrolling frame around the scrollable map. Hosts the map toolbar and
   minimap so they stay pinned to the map's top-right corner instead of
   scrolling away with the map content. */
.world-panel-frame {
  position: relative;
  isolation: isolate;
  width: 100%;
}

.world-panel {
  position: relative;
  width: min(100%, var(--desktop-map-panel-width, 1218px));
  height: var(--desktop-map-panel-height, 918px);
  min-height: unset;
  max-width: var(--desktop-map-panel-width, 1218px);
  display: flex;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: auto;
  box-shadow: var(--shadow);
  background: transparent;
  cursor: default;
  touch-action: none;
  user-select: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.world-panel.dragging,
.world-panel.dragging * {
  cursor: grabbing !important;
}

.world {
  --map-width: 100;
  --map-height: 40;
  --cell-size: 30px;
  --map-padding: 8px;
  --map-padding-total: 16px;
  --map-pixel-width: calc(
    (var(--map-width) * var(--cell-size)) + var(--map-padding-total)
  );
  --map-pixel-height: calc(
    (var(--map-height) * var(--cell-size)) + var(--map-padding-total)
  );
  position: relative;
  width: max(100%, var(--map-pixel-width));
  height: var(--map-pixel-height);
  display: grid;
  grid-template-columns: repeat(var(--map-width), var(--cell-size));
  grid-template-rows: repeat(var(--map-height), var(--cell-size));
  gap: 0;
  padding: var(--map-padding);
  align-items: stretch;
  justify-items: stretch;
  background: #1a2e1a;
  border-radius: 10px;
  contain: layout style;
  transform-origin: 0 0;
}

.world-panel.dragging .world {
  will-change: transform;
}

.world-panel.panning .world {
  contain: layout paint style;
  pointer-events: none;
}

.world-panel.panning .terrain {
  transition: none;
}

/* Minimap overlay: pinned to the top-right of the map frame (below the
   map toolbar), showing the whole world + the current viewport rectangle.
   Mobile only — hidden on desktop where the whole map fits on screen. */
.minimap {
  display: none;
  position: absolute;
  top: 54px;
  right: 14px;
  z-index: 60;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  touch-action: none;
  image-rendering: pixelated;
}

.world-panel-frame .map-toolbar,
.world-panel-frame .minimap {
  pointer-events: auto;
}

@media (max-width: 900px) {
  .minimap {
    display: block;
    top: 50px;
    right: 10px;
  }
}

.terrain {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  cursor: crosshair;
  transition:
    filter 0.12s,
    box-shadow 0.12s;
}

.terrain:hover {
  filter: brightness(1.15) saturate(1.2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
  z-index: 1;
}

@media (hover: none) {
  .terrain:hover {
    filter: none;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
    z-index: auto;
  }
}

/* ── Hand-crafted pixel map tiles (32×32) ───────────────────────────────
   More scene-like tiles: visible paths, reeds, flowers, rock faces and roofs.
*/

/* ── Clean flat terrain tiles ─────────────────────────────────────────── */

.terrain-grass {
  background-color: #5a9e30;
  background-image: linear-gradient(160deg, #68b338 0%, #4e8e28 100%);
}
.terrain-grass:nth-of-type(3n) {
  background-color: #549930;
}
.terrain-grass:nth-of-type(5n) {
  background-color: #60a535;
}

.terrain-plain {
  background-color: #b8c95a;
  background-image: linear-gradient(160deg, #c8d868 0%, #a8b848 100%);
}

.terrain-flower {
  background-color: #62a834;
  background-image: linear-gradient(160deg, #72bc42 0%, #529830 100%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 200, 255, 0.2);
}

.terrain-forest {
  background-color: #1e4e18;
  background-image: linear-gradient(160deg, #264e1e 0%, #163812 100%);
}
.terrain-forest:nth-of-type(3n) {
  background-color: #1a4615;
}

.terrain-town {
  background-color: #b89060;
  background-image: linear-gradient(160deg, #c8a070 0%, #a88050 100%);
}

.terrain-river {
  background-color: #3a8ec8;
  background-image: linear-gradient(180deg, #4aa0dc 0%, #2878b8 100%);
  overflow: hidden;
}

.terrain-water {
  background-color: #1a6aac;
  background-image: linear-gradient(180deg, #2278be 0%, #145898 100%);
  overflow: hidden;
}

.terrain-stone {
  background-color: #7a6a5a;
  background-image: linear-gradient(160deg, #8a7a68 0%, #6c5e50 100%);
}
.terrain-stone:nth-of-type(3n) {
  background-color: #746458;
}

.terrain-castle {
  background-color: #4c4068;
  background-image: linear-gradient(160deg, #584c78 0%, #3c3258 100%);
}

.terrain-bridge {
  background-color: #8c6530;
  background-image: linear-gradient(180deg, #9c7540 0%, #7c5520 100%);
}

.terrain-sand {
  background-color: #e6cb8a;
  background-image: linear-gradient(180deg, #efd79c 0%, #d8b870 100%);
}
.terrain-sand:nth-of-type(5n) {
  background-color: #ecd494;
}

.terrain-desert {
  background-color: #d8aa54;
  background-image: linear-gradient(160deg, #e6bf72 0%, #bd8f42 100%);
}

.terrain-swamp {
  background-color: #4f6b37;
  background-image: linear-gradient(160deg, #5f7a42 0%, #334a2d 100%);
}

.terrain-snow {
  background-color: #dfeaf2;
  background-image: linear-gradient(160deg, #f5fbff 0%, #c8d9e8 100%);
  box-shadow: inset 0 0 0 0.5px rgba(80, 120, 160, 0.18);
}

/* Subtle cell separator on every terrain tile */
.terrain {
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}

/* Water shimmer — keep animation, simplified gradient */
.terrain-river::before,
.terrain-water::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: waterShimmer 2.4s ease-in-out infinite;
}
@keyframes waterShimmer {
  0% {
    background-position: -100% 0;
    opacity: 0.4;
  }
  50% {
    background-position: 100% 0;
    opacity: 0.9;
  }
  100% {
    background-position: 300% 0;
    opacity: 0.4;
  }
}

/* Castle battlement accent */
.terrain-castle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 35%;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(80, 70, 100, 0.6) 0px,
    rgba(80, 70, 100, 0.6) 30%,
    rgba(40, 34, 60, 0.6) 30%,
    rgba(40, 34, 60, 0.6) 50%,
    rgba(80, 70, 100, 0.6) 50%
  );
}

/* Flower terrain dot accent */
.terrain-flower::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 180, 220, 0.55) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 230, 100, 0.45) 1px, transparent 1px);
  background-size:
    40% 40%,
    60% 60%;
  background-position:
    20% 30%,
    65% 65%;
}

/* Town cobblestone grid accent */
.terrain-town::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(100, 70, 40, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 70, 40, 0.18) 1px, transparent 1px);
  background-size: 50% 50%;
}

/* Forest shadow vignette */
.terrain-forest::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 40%,
    rgba(10, 24, 8, 0.35) 100%
  );
}

/* Pixel decor sprites — kept clean */
[class*="terrain-decor-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% 80%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.96;
}
.terrain-decor-tree::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges' viewBox='0 0 16 16'><path fill='%231b4718' d='M6 1h4v2H6zM5 3h6v2H5zM4 5h8v2H4zM5 7h6v2H5z'/><path fill='%233a8a31' d='M7 2h2v1H7zM6 4h4v1H6zM5 6h6v1H5zM6 8h4v1H6z'/><path fill='%23623a1d' d='M7 9h2v5H7z'/></svg>");
}
.terrain-decor-bloom::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges' viewBox='0 0 16 16'><path fill='%23ff7ca9' d='M7 3h2v1H7zM6 4h1v1H6zM9 4h1v1H9zM7 5h2v1H7z'/><path fill='%23ffe16a' d='M7 4h2v1H7z'/><path fill='%23ffffff' d='M3 8h2v1H3zM2 9h1v1H2zM5 9h1v1H5zM3 10h2v1H3z'/><path fill='%23ffd84f' d='M3 9h2v1H3z'/><path fill='%2369b73f' d='M7 6h1v5H7zM3 11h1v3H3z'/></svg>");
}
.terrain-decor-house::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges' viewBox='0 0 16 16'><path fill='%23a33b2c' d='M4 4h8v3H4z'/><path fill='%23d35c48' d='M5 5h6v1H5z'/><path fill='%23d6c39c' d='M4 7h8v5H4z'/><path fill='%23816a47' d='M7 9h2v3H7zM5 8h2v1H5zM9 8h2v1H9z'/></svg>");
}
.terrain-decor-rock::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges' viewBox='0 0 16 16'><path fill='%236f675a' d='M4 4h6v1H4zM3 5h8v1H3zM2 6h10v3H2zM3 9h8v2H3z'/><path fill='%23b8ae9d' d='M5 5h3v1H5zM4 6h2v1H4zM7 7h2v1H7z'/><path fill='%23453f38' d='M2 9h1v1H2zM10 8h2v1h-2zM6 10h2v1H6z'/></svg>");
}
.terrain-decor-wave::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges' viewBox='0 0 16 16'><path fill='%23d6f6ff' d='M1 6h3v1H1zM4 7h3v1H4zM8 6h3v1H8zM11 7h3v1h-3zM2 9h3v1H2zM6 10h3v1H6zM10 9h3v1h-3z'/></svg>");
  background-size: 88% 72%;
}

.pet-avatar {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  min-height: 0;
  transform: none;
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 0;
  border: 0;
  background: transparent;
  padding: 0;
  transition: transform 0.2s ease;
}

@keyframes pet-slide {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(var(--move-tx, 0), var(--move-ty, 0));
  }
}

.pet-avatar.moving {
  animation: none;
  transition: none;
  z-index: 6;
}

.pet-avatar.mine {
  z-index: 5;
}

.map-fx {
  position: absolute;
  width: calc(var(--cell-size) * 0.42);
  height: calc(var(--cell-size) * 0.42);
  margin-left: calc(var(--cell-size) * -0.21);
  margin-top: calc(var(--cell-size) * -0.21);
  pointer-events: none;
  z-index: 7;
  border-radius: 999px;
  animation: mapFxPulse 760ms ease-out forwards;
}

.map-fx.fx-step,
.map-fx.fx-step-end {
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 255, 255, 0.9),
    rgba(255, 236, 170, 0.74) 34%,
    rgba(217, 157, 60, 0.28) 66%,
    transparent 70%
  );
  box-shadow: 0 0 12px rgba(255, 210, 106, 0.48);
}

.map-fx.fx-step-end {
  width: calc(var(--cell-size) * 0.58);
  height: calc(var(--cell-size) * 0.58);
  margin-left: calc(var(--cell-size) * -0.29);
  margin-top: calc(var(--cell-size) * -0.29);
}

.map-fx.fx-hit {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95),
    rgba(255, 78, 78, 0.72) 44%,
    transparent 72%
  );
}

.map-fx.fx-grow {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95),
    rgba(105, 224, 160, 0.72) 45%,
    transparent 72%
  );
}

.map-fx.fx-social {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95),
    rgba(107, 145, 255, 0.68) 45%,
    transparent 72%
  );
}

.map-fx.fx-spark,
.map-fx.fx-pulse {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.92),
    rgba(255, 214, 93, 0.64) 45%,
    transparent 72%
  );
}

.map-fx.fx-boom {
  width: calc(var(--cell-size) * 0.95);
  height: calc(var(--cell-size) * 0.95);
  margin-left: calc(var(--cell-size) * -0.475);
  margin-top: calc(var(--cell-size) * -0.475);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.98),
    rgba(255, 170, 40, 0.85) 38%,
    rgba(255, 70, 40, 0.55) 62%,
    transparent 74%
  );
  box-shadow: 0 0 18px rgba(255, 120, 40, 0.7);
  animation: mapFxBoom 620ms ease-out forwards;
}

@keyframes mapFxPulse {
  from {
    opacity: 0.95;
    transform: scale(0.45);
  }
  to {
    opacity: 0;
    transform: scale(1.55);
  }
}

@keyframes mapFxBoom {
  0% {
    opacity: 1;
    transform: scale(0.3);
  }
  40% {
    opacity: 0.95;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* 移动动画中的宠物：浮在其他元素上方，禁止交互防止闪点击 */
.pet-avatar.moving {
  z-index: 20;
  pointer-events: none;
  /* 移动时轻微阴影增加立体感 */
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

/* Own-pet ring — vivid pulsing ring around the pixel portrait */
.pet-avatar.mine .pixel-pet {
  outline: 3px solid rgba(255, 210, 60, 0.92);
  outline-offset: 2px;
  box-shadow:
    0 0 0 5px rgba(255, 210, 60, 0.28),
    0 0 14px rgba(255, 180, 0, 0.55),
    0 0 28px rgba(255, 180, 0, 0.22),
    0 16px 28px rgba(167, 100, 210, 0.16);
  animation: ownPetRing 2.4s ease-in-out infinite;
}

@keyframes ownPetRing {
  0%,
  100% {
    outline-color: rgba(255, 210, 60, 0.92);
    box-shadow:
      0 0 0 5px rgba(255, 210, 60, 0.28),
      0 0 14px rgba(255, 180, 0, 0.55),
      0 0 28px rgba(255, 180, 0, 0.22),
      0 16px 28px rgba(167, 100, 210, 0.16);
  }
  50% {
    outline-color: rgba(255, 140, 30, 0.98);
    box-shadow:
      0 0 0 7px rgba(255, 140, 30, 0.36),
      0 0 22px rgba(255, 120, 0, 0.72),
      0 0 40px rgba(255, 100, 0, 0.28),
      0 16px 28px rgba(167, 100, 210, 0.16);
  }
}

/* Sick indicator overlay on map avatar */
.pet-avatar.sick .pixel-pet {
  filter: saturate(0.4) brightness(0.82) sepia(0.4);
  outline: 2px solid rgba(120, 200, 60, 0.7);
  outline-offset: 1px;
}

/* Starvation warning — red flicker */
.pet-avatar.starving .pixel-pet {
  outline: 2px solid rgba(255, 60, 60, 0.9);
  outline-offset: 2px;
  animation: starvingPulse 0.9s ease-in-out infinite;
}
.pet-avatar.mine.starving .pixel-pet {
  animation: starvingPulse 0.9s ease-in-out infinite;
}

@keyframes starvingPulse {
  0%,
  100% {
    outline-color: rgba(255, 60, 60, 0.9);
    box-shadow: 0 0 8px rgba(255, 60, 60, 0.5);
  }
  50% {
    outline-color: rgba(255, 0, 0, 1);
    box-shadow: 0 0 18px rgba(255, 0, 0, 0.8);
  }
}

/* Dead pet — greyscale, dim, non-interactive */
.pet-avatar.dead {
  pointer-events: auto;
  cursor: help;
  z-index: 1;
}
.pet-avatar.dead .pixel-pet {
  filter: grayscale(1) brightness(0.7) contrast(0.85);
  opacity: 0.45;
  outline: 1px dashed rgba(120, 120, 120, 0.55);
  outline-offset: 1px;
  animation: none !important;
  box-shadow: none !important;
}
.pet-avatar.dead::after {
  content: "†";
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 14px;
  color: rgba(80, 80, 80, 0.8);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

/* Admin pet chip — dead state */
.admin-pet-chip.dead {
  filter: grayscale(1);
  opacity: 0.5;
}

/* Log filter dropdown */
.log-filter-select {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(167, 100, 210, 0.25);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 13px;
  color: #4a3a5a;
  cursor: pointer;
  max-width: 160px;
}
.log-filter-select:hover {
  border-color: rgba(167, 100, 210, 0.55);
}

/* Log filter badge (click-to-clear) */
.log-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  background: rgba(167, 100, 210, 0.14);
  border: 1px solid rgba(167, 100, 210, 0.32);
  border-radius: 999px;
  font-size: 12px;
  color: #4a3a5a;
  max-width: 180px;
}
.log-filter-badge.hidden {
  display: none;
}
.log-refresh {
  background: rgba(167, 100, 210, 0.16);
  border: 1px solid rgba(167, 100, 210, 0.4);
  color: #6a3f8a;
  font-size: 12px;
  animation: logRefreshPulse 1.6s ease-in-out infinite;
}
.log-refresh.hidden {
  display: none;
}
@keyframes logRefreshPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(167, 100, 210, 0.32);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(167, 100, 210, 0);
  }
}
.log-filter-badge > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.log-filter-clear {
  background: rgba(255, 255, 255, 0.55);
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #4a3a5a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.log-filter-clear:hover {
  background: rgba(220, 38, 38, 0.18);
  color: #b91c1c;
}

/* Pet team groups (alive / dead, collapsible) */
.pet-group {
  margin-bottom: 8px;
}
.pet-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(167, 100, 210, 0.08);
  border: 1px solid rgba(167, 100, 210, 0.18);
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  color: #4a3a5a;
  text-align: left;
}
.pet-group-head:hover {
  background: rgba(167, 100, 210, 0.14);
}
.pet-group-arrow {
  display: inline-block;
  transition: transform 0.18s;
}
.pet-group.collapsed .pet-group-arrow {
  transform: rotate(-90deg);
}
.pet-group-count {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
}
.pet-group-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 4px;
}
.pet-group.collapsed .pet-group-body {
  display: none;
}

/* Pet chip showing as the active log filter */
.pet-chip.filtered {
  box-shadow: 0 0 0 2px rgba(167, 100, 210, 0.7);
}

.pet-avatar:hover {
  transform: translateY(-2px);
}

.pet-avatar:not(.acting):not(.dead) {
  animation: petIdle var(--idle-duration, 3.8s) ease-in-out infinite;
  animation-delay: var(--idle-offset, 0s);
}

@keyframes petIdle {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-2px) rotate(-1deg);
  }
  75% {
    transform: translateY(-1px) rotate(1deg);
  }
}

.pet-avatar.acting {
  animation: petAct 1.4s ease-in-out 1;
  animation-delay: var(--action-delay, 0ms);
}

.pet-avatar.action-move {
  animation-name: petMove;
  animation-duration: 1.4s;
}

.pet-avatar.action-attack {
  animation-name: petAttack;
}

.pet-avatar.action-grow {
  animation-name: petGrow;
}

.pet-avatar.action-interact,
.pet-avatar.action-pet_chat,
.pet-avatar.action-owner_chat {
  animation-name: petTalk;
}

.pixel-pet {
  width: 72px;
  height: 72px;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 9), 1fr);
  grid-template-rows: repeat(var(--grid-cols, 9), 1fr);
  gap: 0;
  padding: 8px;
  image-rendering: pixelated;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 16px 28px rgba(167, 100, 210, 0.16),
    0 0 24px color-mix(in srgb, var(--pet-glow), transparent 54%);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}

.pixel-pet i {
  display: block;
  width: 100%;
  height: 100%;
}

.pixel-pet.large {
  width: 112px;
  height: 112px;
  padding: 12px;
  border-radius: 26px;
}

.pixel-pet.tiny {
  width: 34px;
  height: 34px;
  padding: 4px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(71, 95, 124, 0.12);
}

.pixel-pet.map {
  width: 100%;
  height: 100%;
  padding: 2px;
  border-radius: 5px;
  box-shadow: 0 5px 12px rgba(71, 95, 124, 0.18);
}

.pixel-pet.rarity-4,
.pixel-pet.rarity-5 {
  box-shadow:
    0 18px 32px rgba(71, 95, 124, 0.2),
    0 0 34px color-mix(in srgb, var(--pet-glow), transparent 32%);
}

.pixel-pet.img-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pixel-pet.img-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  image-rendering: auto;
}

.edit-avatar-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  padding: 2px 5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
#petPortrait {
  position: relative;
}
#petPortrait:hover .edit-avatar-btn {
  opacity: 1;
}

.pet-hover-info {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  min-width: 74px;
  padding: 5px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.88);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 22px rgba(80, 90, 120, 0.16);
  z-index: 5;
}

.pet-avatar:hover .pet-hover-info {
  opacity: 1;
}

.pet-status-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  max-width: 72px;
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: #24304f;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(31, 42, 68, 0.14);
  z-index: 12;
}

.pet-avatar:hover .pet-status-bubble,
.pet-avatar.has-action .pet-status-bubble {
  opacity: 0;
  pointer-events: none;
}

/* ── Edge-aware tooltip placement: keep it on-screen at map borders ── */
.pet-avatar {
  /* ensure relative anchor for tooltip */
  position: relative;
}
.pet-avatar:hover .pet-hover-info {
  z-index: 50;
}

/* Admin can drag pet avatars to reposition */
body.is-admin .pet-avatar {
  cursor: grab;
}
body.is-admin .pet-avatar:active,
.pet-avatar.admin-dragging {
  cursor: grabbing;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)) brightness(1.1);
  z-index: 60;
  transform: scale(1.08);
  transition: transform 80ms ease;
}
/* Near top edge → flip tooltip BELOW the sprite */
.pet-avatar[data-edge~="top"] .pet-hover-info {
  bottom: auto;
  top: calc(100% + 4px);
}
/* Near left edge → anchor tooltip to left side (no negative overflow) */
.pet-avatar[data-edge~="left"] .pet-hover-info {
  left: 0;
  transform: translateX(0);
}
/* Near right edge → anchor tooltip to right side */
.pet-avatar[data-edge~="right"] .pet-hover-info {
  left: auto;
  right: 0;
  transform: translateX(0);
}
/* Near bottom edge (no specific class needed since default is bottom-above; keep as-is) */
.pet-avatar[data-edge~="bottom"] .pet-hover-info {
  bottom: calc(100% + 4px);
  top: auto;
}

.pet-panel {
  padding: 18px;
  display: grid;
  gap: 18px;
}

.bottom-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  /* social + log hug the top of the right column; the empty pad row absorbs
     any extra height from the taller pet column so the log sits directly
     under the relations/memory/goals card and shifts down as it grows. */
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "pet social"
    "pet log"
    "pet pad";
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.pet-panel {
  grid-area: pet;
}
.social-panel {
  grid-area: social;
}
.log-panel {
  grid-area: log;
}

/* 关系 / 记忆 / 目标：标签切换，避免横向拥挤 */
.social-panel {
  padding: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.72),
      rgba(233, 213, 255, 0.3)
    ),
    radial-gradient(
      circle at 80% 10%,
      rgba(255, 255, 255, 0.55),
      transparent 40%
    );
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.social-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(167, 100, 210, 0.1);
  align-self: flex-start;
}

.social-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.social-tab:hover {
  color: var(--text);
}

.social-tab.active {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(120, 60, 180, 0.16);
}

.social-tab .obj-count {
  font-size: 11px;
  font-weight: 700;
  margin-left: 2px;
}

.social-tab-panels {
  min-width: 0;
}

.social-tab-panel {
  display: none;
}

.social-tab-panel.active {
  display: block;
}

.social-tab-panel .relationships,
.social-tab-panel .memory-list,
.social-tab-panel .objective-list {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.pet-portrait {
  min-height: 132px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.3)
  );
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.pet-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}

.pet-chip-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px;
}

.pet-chip-actions {
  display: flex;
  gap: 3px;
  align-items: center;
}

.pet-kill-btn,
.pet-release-btn,
.pet-fuse-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.24);
  color: #6b7280;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.14;
  filter: grayscale(1);
  transition:
    opacity 0.18s,
    background 0.18s,
    border-color 0.18s,
    color 0.18s,
    filter 0.18s;
  flex-shrink: 0;
}

.pet-chip-wrap:hover .pet-kill-btn,
.pet-chip-wrap:hover .pet-release-btn,
.pet-chip-wrap:hover .pet-fuse-btn,
.pet-kill-btn:focus-visible {
  opacity: 0.82;
  filter: none;
}

.pet-chip-wrap:hover .pet-kill-btn,
.pet-kill-btn:focus-visible {
  border-color: rgba(127, 29, 29, 0.24);
  background: rgba(254, 226, 226, 0.52);
  color: #7f1d1d;
}
.pet-kill-btn:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.2);
}

.pet-chip-wrap:hover .pet-release-btn,
.pet-release-btn:focus-visible {
  border-color: rgba(22, 101, 52, 0.24);
  background: rgba(220, 252, 231, 0.5);
  color: #166534;
}

.pet-chip-wrap:hover .pet-fuse-btn,
.pet-fuse-btn:focus-visible {
  border-color: rgba(91, 33, 182, 0.24);
  background: rgba(237, 233, 254, 0.58);
  color: #5b21b6;
}

@media (hover: none) {
  .pet-kill-btn,
  .pet-release-btn,
  .pet-fuse-btn {
    opacity: 0.32;
  }
}

.pet-forget-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(107, 114, 128, 0.32);
  background: rgba(243, 244, 246, 0.6);
  color: #6b7280;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity 0.18s,
    background 0.18s;
  flex-shrink: 0;
}
.pet-chip-wrap:hover .pet-forget-btn {
  opacity: 1;
}
.pet-forget-btn:hover {
  background: rgba(107, 114, 128, 0.22);
  color: #1f2937;
}

.pet-chip.dead {
  filter: grayscale(1);
  opacity: 0.55;
  cursor: not-allowed;
}
.pet-chip-wrap.dead {
  opacity: 0.85;
}

.pet-chip {
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 16px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--text);
  text-align: left;
  font-weight: 800;
}

.pet-chip.active {
  border-color: rgba(244, 114, 182, 0.58);
  background: rgba(251, 207, 232, 0.52);
}

.pet-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pet-title h3 {
  margin-top: 4px;
  font-size: 26px;
}

.rarity {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 800;
}

.description {
  color: var(--muted);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.career-badge {
  min-height: unset;
  padding: 6px 10px;
  background: linear-gradient(
    135deg,
    rgba(255, 237, 213, 0.8),
    rgba(254, 215, 170, 0.4)
  );
  border-color: rgba(251, 146, 60, 0.3);
}

.career-edit-btn {
  align-self: center;
  padding: 4px 10px;
  font-size: 12px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 8px;
  cursor: pointer;
  color: #6d28d9;
}
.career-edit-btn:hover {
  background: rgba(124, 58, 237, 0.2);
}

/* Building detail modal */
.modal-panel.bld-detail {
  max-width: 460px;
}
.bld-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 6px;
}
.bld-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1f2937;
}
.bld-row b {
  min-width: 64px;
  color: #4c1d95;
  font-weight: 600;
}
.bld-section {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(124, 58, 237, 0.18);
}
.bld-section h4 {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: #4c1d95;
}
.bld-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bld-pet,
.bld-mon {
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.18);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
}
.bld-mon {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.3);
}
.bld-empty {
  color: #94a3b8;
  font-size: 12px;
  font-style: italic;
}
.bld-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.bld-alert-btn,
.bld-upgrade-btn {
  width: 100%;
}
.bld-row.bld-next {
  background: rgba(124, 58, 237, 0.07);
  border-left: 3px solid rgba(124, 58, 237, 0.45);
  padding: 6px 8px;
  border-radius: 6px;
  color: #4c1d95;
}
.bld-row.bld-next b {
  color: #4c1d95;
}

/* Command status rows + set button */
.cmd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  flex-wrap: wrap;
}
.command-set-btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
}
.command-set-btn.active {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.45);
  color: #4c1d95;
}

/* Command-mode visual hint */
body.cmd-mode-on .world {
  cursor: crosshair;
  box-shadow:
    inset 0 0 0 2px rgba(124, 58, 237, 0.35),
    0 0 24px rgba(124, 58, 237, 0.18);
}
body.cmd-mode-on .terrain:hover {
  outline: 1px dashed rgba(124, 58, 237, 0.6);
  outline-offset: -2px;
}

/* Floating contextual command menu */
.cmd-menu {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  max-width: 240px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(76, 29, 149, 0.18);
  overflow: hidden;
}
.cmd-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(124, 58, 237, 0.12);
  color: #4c1d95;
  font-size: 13px;
}
.cmd-menu-close {
  background: transparent;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  color: #6d28d9;
  line-height: 1;
}
.cmd-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 9px 12px;
  font-size: 12.5px;
  cursor: pointer;
  color: #1f2937;
  border-top: 1px solid rgba(124, 58, 237, 0.08);
}
.cmd-menu-item:hover {
  background: rgba(124, 58, 237, 0.08);
}
.cmd-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Role selector modal */
/* Role picker (设置定位) — clickable button list */
.role-pick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 56vh;
  overflow-y: auto;
}
.role-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(124, 58, 237, 0.2);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.role-pick:hover {
  background: rgba(124, 58, 237, 0.06);
}
.role-pick.active {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.55);
}
.role-pick .role-pick-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.role-pick .role-pick-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.role-pick .role-pick-text b {
  font-size: 13px;
  color: #4c1d95;
}
.role-pick .role-pick-text small {
  font-size: 11px;
  color: #4b5563;
  line-height: 1.4;
}

.detail-box {
  min-height: 54px;
  padding: 9px 10px;
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.72),
      rgba(233, 213, 255, 0.38)
    ),
    linear-gradient(
      135deg,
      rgba(219, 234, 254, 0.24),
      rgba(192, 132, 252, 0.12)
    );
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.detail-box small {
  display: block;
  color: rgba(124, 106, 170, 0.82);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}

.detail-box b {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.gender-symbol {
  display: inline-block;
  font-size: 0.78em;
  line-height: 1;
  font-weight: 800;
  vertical-align: 0.08em;
}

.gender-male {
  color: #2f7dff;
  text-shadow: 0 0 8px rgba(47, 125, 255, 0.24);
}

.gender-female {
  color: #e94d5f;
  text-shadow: 0 0 8px rgba(233, 77, 95, 0.22);
}

.detail-box .gender-symbol {
  font-size: 14px;
}

.detail-wide {
  grid-column: span 3;
}

.stats {
  display: grid;
  gap: 10px;
}

.stat {
  display: grid;
  grid-template-columns: 72px 1fr minmax(42px, auto);
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(167, 100, 210, 0.14);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.stat.mood-stat {
  grid-template-columns: 72px 1fr;
}

.mood-emoji {
  font-size: 24px;
}

.stat-details {
  margin-top: 2px;
  border-radius: 12px;
  background: rgba(167, 100, 210, 0.06);
  border: 1px solid rgba(167, 100, 210, 0.14);
  overflow: hidden;
}

.stat-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.stat-details > summary::-webkit-details-marker {
  display: none;
}

.stat-details > summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.15s;
}

.stat-details[open] > summary::before {
  transform: rotate(90deg);
}

.stat-details > summary:hover {
  color: var(--text);
}

.stat-details-body {
  display: grid;
  gap: 10px;
  padding: 4px 12px 12px;
}

.abilities {
  display: grid;
  gap: 8px;
}

.relationship {
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.68);
  color: var(--muted);
  font-size: 13px;
}

/* 技能卡片化：左侧色条按魔法类别区分 */
.ability {
  position: relative;
  padding: 10px 12px 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 2px 8px rgba(120, 60, 180, 0.06);
  color: var(--muted);
  font-size: 13px;
  display: grid;
  gap: 6px;
}

.ability::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 999px;
  background: var(--accent);
}

.ability[data-magic="attack"]::before {
  background: linear-gradient(180deg, #ff8a5c, #ff5470);
}
.ability[data-magic="defense"]::before {
  background: linear-gradient(180deg, #5bc0ff, #6a7dff);
}
.ability[data-magic="heal"]::before,
.ability[data-magic="move"]::before {
  background: linear-gradient(180deg, #7be0a0, #3fc28a);
}

.ability-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ability-top strong {
  color: var(--text);
  font-size: 14px;
}

.ability-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(167, 100, 210, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.ability-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ability-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(167, 100, 210, 0.16);
  padding: 2px 8px;
  border-radius: 8px;
}

.ability-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.relationships {
  display: grid;
  gap: 8px;
}

.relationship {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.relationship strong,
.relationship b {
  color: var(--text);
}

.relationship small {
  grid-column: 2 / -1;
  font-size: 11px;
}

.rel-propose-btn {
  grid-column: 2 / -1;
  justify-self: start;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid rgba(236, 72, 153, 0.28);
  background: rgba(244, 114, 182, 0.14);
  color: #9d174d;
  font-size: 11px;
  font-weight: 900;
}

.rel-propose-btn:hover:not(:disabled) {
  background: rgba(244, 114, 182, 0.22);
}

.rel-propose-btn:disabled {
  opacity: 0.55;
}

.relationship.empty {
  grid-template-columns: 1fr;
  color: var(--muted);
}

.relationship.rel-crisis {
  border: 1px solid #e57373;
  background: rgba(229, 115, 115, 0.1);
}

.rel-tags {
  grid-column: 2 / -1;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.rel-tags em {
  font-style: normal;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--muted);
}

.log-panel,
.admin-panel {
  padding: 14px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-actions {
  display: flex;
  gap: 8px;
}

.messages {
  height: 520px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 5px;
  padding-right: 4px;
}

.message {
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.68);
  color: var(--muted);
  line-height: 1.35;
  display: grid;
  gap: 2px;
  font-size: 12px;
}

.message strong {
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.message time {
  color: var(--muted);
  font-size: 10px;
}

.log-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 2px 7px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.tag-move {
  background: #45aaf2;
}
.tag-growth {
  background: #20bf6b;
}
.tag-pet_chat {
  background: #a55eea;
}
.tag-attack {
  background: #eb3b5a;
}
.tag-attack_miss {
  background: #778ca3;
}
.tag-interact {
  background: #f7b731;
}
.tag-play {
  background: #ff9ff3;
}
.tag-groom {
  background: #54a0ff;
}
.tag-share_food {
  background: #ff9f43;
}
.tag-gift {
  background: #feca57;
  color: #5a3a00;
}
.tag-comfort {
  background: #5fb3f9;
}
.tag-snuggle {
  background: #ee5a8a;
}
.tag-marry,
.tag-court {
  background: #f472b6;
}
.tag-marry,
.tag-marriage {
  background: #7c6cff;
}
.tag-weather {
  background: #f472b6;
}
.tag-birth {
  background: #26de81;
}
.tag-death {
  background: #4b6584;
}
.tag-runaway {
  background: #8b5cf6;
}
.tag-release {
  background: #10b981;
}
.tag-adopt {
  background: #06b6d4;
}
.tag-fusion {
  background: #f97316;
}
.tag-care {
  background: #34c09b;
}
.tag-world_event {
  background: #6c5ce7;
}
.tag-world_edit {
  background: #00a8a8;
}
.tag-world_ai {
  background: #5f27cd;
}
.tag-survival {
  background: #f97316;
}
.tag-behavior {
  background: #14b8a6;
}
.tag-log {
  background: #a5b1c2;
}

/* Death message highlight */
.message.msg-death {
  background: rgba(75, 101, 132, 0.12);
  border-color: rgba(75, 101, 132, 0.3);
}

/* In-content highlights — only numbers, pet names, items, buildings, plants, monsters */
.message em.lg-num {
  font-style: normal;
  font-weight: 700;
  color: #fbbf24;
}
.message em.lg-pet {
  font-style: normal;
  font-weight: 700;
  color: #60a5fa;
}
.message em.lg-item {
  font-style: normal;
  font-weight: 700;
  color: #34d399;
}
.message em.lg-building {
  font-style: normal;
  font-weight: 700;
  color: #fb923c;
}
.message em.lg-plant {
  font-style: normal;
  font-weight: 700;
  color: #a3e635;
}
.message em.lg-monster {
  font-style: normal;
  font-weight: 700;
  color: #c084fc;
}

/* Log actor / arrow / target */
.log-actor {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.log-arrow {
  color: var(--muted);
  font-size: 11px;
  flex-shrink: 0;
}

/* Per-pet log card: avatar + name shown once, then merged log lines. */
.message.log-pet-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.log-pet-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.log-pet-avatar .pixel-pet {
  width: 30px;
  height: 30px;
}
.log-pet-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 58, 237, 0.16);
  color: #4c1d95;
  font-weight: 800;
  font-size: 13px;
}
.log-pet-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.log-pet-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.log-pet-head strong {
  color: var(--text);
  font-size: 12px;
}
.log-pet-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.log-pet-lines .log-line {
  display: block;
}
.log-pet-lines .log-line.msg-death {
  color: #b91c1c;
  font-weight: 600;
}

.log-target {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.log-group {
  display: block;
  padding: 8px 8px 10px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.62);
}

.log-group[open] {
  display: grid;
  gap: 5px;
}

.log-group.current {
  border-color: rgba(124, 58, 237, 0.25);
}

.log-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.log-group-head::-webkit-details-marker {
  display: none;
}

.log-group-head::before {
  content: "▸";
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform 0.18s;
}

.log-group[open] > .log-group-head::before {
  transform: rotate(90deg);
}

.log-group-head span {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.log-empty {
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.log-empty-compact {
  padding: 8px;
  font-size: 12px;
}

@keyframes petMove {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  20% {
    transform: translateY(-5px) scale(1.06) rotate(-4deg);
  }
  45% {
    transform: translateY(-9px) scale(1.1) rotate(3deg);
  }
  70% {
    transform: translateY(-3px) scale(1.04) rotate(-2deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes petAct {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes petAttack {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(6px) scale(1.08);
  }
  60% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes petGrow {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.18);
    filter: brightness(1.35);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes petTalk {
  0%,
  100% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(-3px);
  }
  66% {
    transform: translateY(2px);
  }
}

.admin-panel {
  margin-top: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.68),
      rgba(233, 213, 255, 0.36)
    ),
    radial-gradient(
      circle at 85% 10%,
      rgba(255, 255, 255, 0.62),
      transparent 34%
    );
}

/* Admin tabs */
.admin-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(167, 100, 210, 0.14);
  padding-bottom: 4px;
}

.admin-tab-panel {
  display: grid;
  gap: 10px;
}

/* Admin world controls row */
.admin-world-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: rgba(255, 255, 255, 0.42);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.62);
}

.admin-world-controls label {
  margin: 0;
  font-size: 12px;
  min-width: 100px;
}

/* Admin quick-edit modal form */
.admin-quick-form {
  padding: 4px 0;
}
.quick-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.quick-form-grid label {
  margin: 0;
  font-size: 12px;
}

/* Pet care action buttons */
.pet-care-actions {
  display: flex;
  gap: 6px;
  margin: 8px 0 4px;
}
.care-btn {
  flex: 1;
  min-height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s;
}
.care-btn:hover {
  background: rgba(255, 255, 255, 0.82);
  transform: translateY(-1px);
}
.care-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Survival stats (hunger / vitality / money) ──────────────── */
.survival-stats {
  display: grid;
  gap: 5px;
  padding: 10px 0 6px;
}

.survival-row {
  display: grid;
  grid-template-columns: 52px 1fr 36px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.survival-row .s-label {
  color: var(--muted);
  font-size: 11px;
}
.survival-row .s-val {
  font-weight: 700;
  text-align: right;
  font-size: 12px;
}

.s-bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.s-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition:
    width 0.4s ease,
    background 0.3s;
}
.s-bar-fill.hunger {
  background: linear-gradient(90deg, #fb923c, #f59e0b);
}
.s-bar-fill.vitality {
  background: linear-gradient(90deg, #34d399, #10b981);
}

.s-bar-fill.hunger[data-critical] {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  animation: criticalFlash 0.7s ease-in-out infinite;
}
.s-bar-fill.vitality[data-critical] {
  background: linear-gradient(90deg, #a3e635, #65a30d);
}

@keyframes criticalFlash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.money-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  padding: 2px 0;
}

.inventory-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0 2px;
  border-top: 1px solid var(--line);
  margin-top: 3px;
}
.inv-label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.inv-slots {
  display: flex;
  gap: 4px;
}
.inv-slot {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: var(--glass);
}
.inv-slot.empty {
  background: rgba(0, 0, 0, 0.04);
  opacity: 0.5;
}
.inv-slot.filled {
  border-color: rgba(100, 160, 90, 0.55);
  background: rgba(100, 200, 80, 0.1);
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  transition:
    transform 0.12s,
    background 0.12s;
}
button.inv-slot.filled:hover {
  background: rgba(100, 200, 80, 0.25);
  transform: translateY(-2px);
}
button.inv-slot.filled:active {
  transform: translateY(0);
}
button.inv-slot.filled:disabled {
  opacity: 0.5;
  cursor: wait;
}
.inv-slot.inv-equipment {
  border-color: color-mix(in srgb, var(--equip-color, #f8fafc) 76%, #111 24%);
  background: color-mix(in srgb, var(--equip-color, #f8fafc) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--equip-color, #f8fafc) 36%, transparent);
}

/* ── Equipment slots (pet detail) ──────────────────────────── */
.equipment-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0 2px;
  border-top: 1px solid var(--line);
  margin-top: 3px;
}
.equip-slots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.equip-slot {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  background: var(--glass);
}
button.equip-slot {
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.equip-slot.empty {
  background: rgba(0, 0, 0, 0.04);
  opacity: 0.5;
}
.equip-slot.filled {
  border-color: color-mix(in srgb, var(--equip-color, #f8fafc) 78%, #111 22%);
  background: color-mix(in srgb, var(--equip-color, #f8fafc) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--equip-color, #f8fafc) 38%, transparent);
  transition:
    transform 0.12s,
    background 0.12s,
    border-color 0.12s;
}
button.equip-slot.filled:hover {
  background: color-mix(in srgb, var(--equip-color, #f8fafc) 25%, transparent);
  transform: translateY(-1px);
}
button.equip-slot.filled:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}
.equip-slot.filled small {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.equip-slot.filled small span {
  color: var(--equip-color, currentColor);
  font-weight: 800;
  margin-right: 2px;
}

/* Owner-issued direction commands */
.command-actions {
  margin: 8px 0 6px;
  padding: 8px 8px 10px;
  border-radius: 12px;
  background: rgba(120, 160, 255, 0.1);
  border: 1px solid rgba(120, 160, 255, 0.25);
}
.command-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 6px;
  gap: 6px;
  flex-wrap: wrap;
}
.command-status {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}
.command-status .cmd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.45);
  flex-wrap: wrap;
}
.command-status .cmd-row:last-child {
  background: transparent;
  padding: 2px 0 0;
  justify-content: flex-end;
}
.command-status .command-hint {
  color: var(--muted);
  font-style: italic;
}
.command-status b {
  color: #3a4ad8;
}
.command-cancel {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 8px;
  flex-shrink: 0;
}
.command-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.command-btn {
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(120, 160, 255, 0.4);
  background: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    transform 0.1s;
  text-align: center;
}
.command-btn:hover {
  background: rgba(180, 210, 255, 0.78);
  transform: translateY(-1px);
}
.command-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.more-actions {
  margin-top: 8px;
  border-top: 1px dashed rgba(120, 160, 255, 0.3);
  padding-top: 6px;
}
.more-actions > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  padding: 2px 0 6px;
}
.more-actions > summary::-webkit-details-marker {
  display: none;
}
.more-actions > summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.15s;
}
.more-actions[open] > summary::before {
  transform: rotate(90deg);
}
.more-actions > summary:hover {
  color: #3a4ad8;
}

/* Forage action buttons */
.forage-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 6px 0 2px;
}
.forage-btn {
  padding: 6px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    transform 0.1s;
  text-align: center;
}
.forage-btn:hover {
  background: rgba(255, 255, 255, 0.72);
  transform: translateY(-1px);
}
.forage-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.forage-btn.rest {
  grid-column: span 2;
  background: rgba(255, 230, 120, 0.42);
  border-color: rgba(200, 160, 0, 0.3);
}
.forage-btn.rest:hover {
  background: rgba(255, 230, 120, 0.68);
}

/* Sick badge */
.sick-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(120, 200, 60, 0.22);
  border: 1px solid rgba(80, 160, 0, 0.3);
  color: #3d7a00;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
.care-btn {
  flex: 1;
  min-height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s;
}
.care-btn:hover {
  background: rgba(255, 255, 255, 0.82);
  transform: translateY(-1px);
}
.care-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Pet profile popup */
.pet-profile-panel {
  min-width: 320px;
  max-width: 420px;
}
.profile-portrait {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.profile-meta {
  display: grid;
  gap: 6px;
}
.profile-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.profile-label {
  min-width: 44px;
  font-size: 11px;
  color: var(--muted);
}
.profile-bar-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.profile-bar-row .bar {
  height: 8px;
  border-radius: 4px;
}
.profile-bar-row .bar span {
  --bar-color: #4ade80;
  background: var(--bar-color);
}

.profile-inventory {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.profile-inventory .inv-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.profile-inventory .inv-slot {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-size: 18px;
}
.profile-inventory .inv-slot svg {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.profile-inventory .inv-qty {
  position: absolute;
  bottom: 0;
  right: 2px;
  font-size: 10px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  padding: 0 2px;
}
.profile-inventory .inv-empty {
  font-size: 12px;
  color: var(--muted);
}

.pet-fusion-panel {
  width: min(760px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.pet-fusion-body {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding-right: 4px;
}

.fusion-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.fusion-columns section {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.fusion-columns h4 {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

.fusion-columns p,
.fusion-confirm-box p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.fusion-card-list {
  display: grid;
  gap: 8px;
  max-height: 310px;
  overflow: auto;
  padding-right: 2px;
}

.fusion-pet-card {
  width: 100%;
  min-height: 68px;
  border: 1px solid rgba(167, 100, 210, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "avatar main"
    "avatar tags";
  gap: 4px 10px;
  align-items: center;
  padding: 8px 10px;
  color: var(--text);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.fusion-pet-card:hover:not(:disabled),
.fusion-pet-card.selected {
  border-color: rgba(244, 114, 182, 0.62);
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 8px 18px rgba(167, 100, 210, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.fusion-pet-card.selected {
  outline: 2px solid rgba(244, 114, 182, 0.28);
}

.fusion-pet-card:disabled {
  opacity: 0.42;
}

.fusion-pet-avatar {
  grid-area: avatar;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.fusion-pet-main {
  grid-area: main;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.fusion-pet-main b,
.fusion-summary b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fusion-pet-main small,
.fusion-summary small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.fusion-pet-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fusion-pet-tags em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: #6b4aa0;
  background: rgba(192, 132, 252, 0.14);
  border: 1px solid rgba(192, 132, 252, 0.18);
  border-radius: 999px;
  padding: 1px 6px;
}

.fusion-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.fusion-summary div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.fusion-summary span {
  font-size: 11px;
  font-weight: 900;
  color: var(--accent);
}

.fusion-summary strong {
  align-self: center;
  color: var(--muted);
}

.fusion-warning,
.fusion-confirm-box {
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(254, 226, 226, 0.72);
  border: 1px solid rgba(248, 113, 113, 0.28);
  color: #991b1b;
  font-size: 12px;
  line-height: 1.5;
}

.fusion-warning.ok {
  background: rgba(220, 252, 231, 0.68);
  border-color: rgba(74, 222, 128, 0.28);
  color: #166534;
}

.fusion-confirm-box {
  display: grid;
  gap: 6px;
}

.fusion-confirm-box b {
  color: #991b1b;
}

.pet-fusion-actions {
  justify-content: flex-end;
}

@media (max-width: 680px) {
  .pet-fusion-panel {
    width: 96vw;
    max-height: 90vh;
  }

  .fusion-columns {
    grid-template-columns: 1fr;
  }

  .fusion-card-list {
    max-height: 230px;
  }
}

/* Dead pet profile styling */
.profile-portrait.dead {
  filter: grayscale(1) brightness(0.7);
  opacity: 0.7;
}
.death-info {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(60, 30, 30, 0.06),
    rgba(120, 60, 60, 0.1)
  );
  border: 1px solid rgba(200, 80, 80, 0.35);
  display: grid;
  gap: 6px;
}
.death-info .profile-row b {
  color: #a83232;
}
.death-info .death-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

.admin-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-user {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.68);
  overflow: hidden;
}

.admin-user-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  flex-wrap: wrap;
}
.au-name {
  font-size: 13px;
}
.au-name strong {
  font-size: 13px;
}

.admin-user-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.admin-user-pets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px 10px;
  background: rgba(255, 255, 255, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.38);
}

.admin-user-nopets {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.admin-pet-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: 20px;
  border: 1px solid rgba(167, 139, 250, 0.4);
  background: rgba(167, 139, 250, 0.12);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.12s;
  text-align: left;
}
.admin-pet-chip:hover {
  background: rgba(167, 139, 250, 0.26);
}
.admin-pet-chip .apc-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.admin-pet-chip .apc-info > span {
  font-weight: 700;
  font-size: 12px;
}
.apc-edit-hint {
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.15s;
}
.admin-pet-chip:hover .apc-edit-hint {
  opacity: 1;
}
.admin-pet-chip small {
  color: var(--muted);
  font-weight: 400;
  font-size: 10px;
}

.au-meta {
  color: var(--muted);
  font-size: 11px;
}

.admin-user div,
.admin-user span {
  display: initial;
  gap: unset;
}

.admin-user span {
  color: var(--muted);
  font-size: 12px;
}

.admin-editor {
  display: grid;
  gap: 12px;
}

.admin-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-form label {
  margin: 0;
  font-size: 12px;
}

.admin-form .wide {
  grid-column: span 2;
}

.admin-form-section {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.admin-form-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.admin-form-grid label.wide {
  grid-column: span 2;
}

.admin-form-grid input,
.admin-form-grid select {
  font-size: 13px;
}

.ability-editor {
  display: grid;
  gap: 8px;
}

.ability-row {
  display: grid;
  grid-template-columns: 1.4fr 92px 72px 90px 72px 72px;
  gap: 8px;
}

.ability-header-row {
  display: grid;
  grid-template-columns: 1.4fr 92px 72px 90px 72px 72px;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  padding: 0 6px;
}

.ability-header-row span {
  text-align: center;
}

.terrain-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.terrain-tools label {
  margin: 0;
  min-width: 110px;
  font-size: 12px;
}

.terrain-tool {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--text);
  padding: 0 12px;
}

.terrain-tool.active {
  color: #4a0a35;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.admin-terrain-grid .terrain.drag-preview {
  outline: 2px solid #ffd84d;
  outline-offset: -1px;
  box-shadow: 0 0 0 1px rgba(255, 216, 77, 0.6) inset;
}

.admin-terrain-grid {
  --map-width: 100;
  --map-height: 40;
  display: grid;
  grid-template-columns: repeat(var(--map-width), 12px);
  grid-template-rows: repeat(var(--map-height), 12px);
  gap: 1px;
  overflow: auto;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.62);
}

.admin-terrain-grid .terrain {
  border: 0;
  padding: 0;
}

.admin-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(244, 114, 182, 0.22),
      transparent 34%
    ),
    rgba(30, 24, 82, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal-panel {
  width: min(420px, 100%);
  padding: 18px;
}

.modal-panel .panel-head {
  margin-bottom: 16px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: min(520px, calc(100% - 32px));
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  font-weight: 700;
}

/* === Weather particles — absolute inside #world, covers full map === */
#weatherParticles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
  background: transparent;
  border-radius: inherit;
}

.world-stage {
  position: relative;
}

.weather-particle {
  position: absolute;
  top: -20px;
}

/* Rain */
.weather-particle.rain {
  width: 2px;
  height: 16px;
  background: linear-gradient(180deg, transparent, rgba(147, 197, 253, 0.78));
  border-radius: 0 0 2px 2px;
  animation: wpRain linear infinite;
}
/* Storm – faster, angled, blue-indigo (not gray) */
.weather-particle.storm {
  width: 2px;
  height: 24px;
  background: linear-gradient(180deg, transparent, rgba(96, 140, 230, 0.88));
  border-radius: 0 0 2px 2px;
  animation: wpStorm linear infinite;
}
/* Snow */
.weather-particle.snow {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  filter: blur(0.5px);
  animation: wpSnow ease-in-out infinite;
}
/* Mist – large fuzzy blobs drifting across */
.weather-particle.mist {
  width: 100px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  filter: blur(14px);
  top: auto;
  animation: wpMist ease-in-out infinite alternate;
}
/* Starlight – twinkling dots */
.weather-particle.star {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.8),
    0 0 10px rgba(200, 230, 255, 0.5);
  top: auto;
  animation: wpStar ease-in-out infinite alternate;
}
/* Aurora – wide translucent bands */
.weather-particle.aurora {
  width: 240px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    rgba(52, 211, 153, 0.14),
    rgba(167, 139, 250, 0.22),
    rgba(52, 211, 153, 0.1)
  );
  filter: blur(22px);
  top: auto;
  animation: wpAurora ease-in-out infinite alternate;
}
/* Ember – rising sparks for heatwave */
.weather-particle.ember {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(251, 146, 60, 0.85);
  box-shadow: 0 0 5px rgba(239, 68, 68, 0.6);
  top: auto;
  animation: wpEmber ease-in-out infinite;
}
/* Sakura petals */
.weather-particle.sakura {
  width: 7px;
  height: 5px;
  border-radius: 50% 0 50% 0;
  background: rgba(251, 182, 206, 0.82);
  filter: blur(0.4px);
  animation: wpSakura ease-in-out infinite;
}

/* Wind – diagonal streaks */
.weather-particle.wind {
  width: 22px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 225, 255, 0.65),
    transparent
  );
  border-radius: 2px;
  animation: wpWind linear infinite;
}

/* Dusk – warm floating sparks */
.weather-particle.dusk {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 155, 55, 0.85);
  box-shadow: 0 0 6px rgba(255, 120, 30, 0.55);
  top: auto;
  animation: wpDusk ease-in-out infinite;
}

/* Dawn – bright shimmer dots */
.weather-particle.dawn {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 230, 130, 0.92);
  box-shadow: 0 0 8px rgba(255, 200, 80, 0.65);
  animation: wpDawn ease-in-out infinite;
}

/* Cloud – soft drifting puff */
.weather-particle.cloud {
  width: 90px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
  filter: blur(14px);
  top: auto;
  animation: wpCloud ease-in-out infinite alternate;
}

@keyframes wpRain {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  95% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(900px);
    opacity: 0;
  }
}
@keyframes wpStorm {
  0% {
    transform: translate(0, 0) rotate(22deg);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  95% {
    opacity: 0.9;
  }
  100% {
    transform: translate(200px, 900px) rotate(22deg);
    opacity: 0;
  }
}
@keyframes wpSnow {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 0.85;
  }
  45% {
    transform: translateY(420px) translateX(18px) rotate(120deg);
    opacity: 0.7;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(900px) translateX(-14px) rotate(240deg);
    opacity: 0;
  }
}
@keyframes wpMist {
  from {
    transform: translateX(-40px);
    opacity: 0.06;
  }
  to {
    transform: translateX(40px);
    opacity: 0.16;
  }
}
@keyframes wpStar {
  from {
    opacity: 0.08;
    transform: scale(0.7);
  }
  to {
    opacity: 0.98;
    transform: scale(1.5);
  }
}
@keyframes wpAurora {
  from {
    transform: translateX(-60px) scaleX(1);
    opacity: 0.55;
  }
  to {
    transform: translateX(60px) scaleX(1.4);
    opacity: 0.92;
  }
}
@keyframes wpEmber {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  50% {
    transform: translateY(-420px) translateX(14px);
    opacity: 0.65;
  }
  100% {
    transform: translateY(-900px) translateX(-8px);
    opacity: 0;
  }
}
@keyframes wpSakura {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 0.8;
  }
  45% {
    transform: translateY(400px) translateX(24px) rotate(180deg);
    opacity: 0.65;
  }
  100% {
    transform: translateY(900px) translateX(-16px) rotate(360deg);
    opacity: 0;
  }
}
@keyframes wpWind {
  0% {
    transform: translate(0, 0) rotate(-10deg);
    opacity: 0;
  }
  8% {
    opacity: 0.75;
  }
  92% {
    opacity: 0.55;
  }
  100% {
    transform: translate(140px, 320px) rotate(-10deg);
    opacity: 0;
  }
}
@keyframes wpDusk {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  55% {
    transform: translateY(-130px) translateX(12px) scale(1.15);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-300px) translateX(-10px) scale(0.5);
    opacity: 0;
  }
}
@keyframes wpDawn {
  0% {
    transform: translateY(8px) scale(0.5);
    opacity: 0;
  }
  18% {
    opacity: 0.88;
  }
  100% {
    transform: translateY(-320px) scale(1.6);
    opacity: 0;
  }
}
@keyframes wpCloud {
  from {
    transform: translateX(-35px);
    opacity: 0.1;
  }
  to {
    transform: translateX(35px);
    opacity: 0.26;
  }
}

/* === World overlay (day / night / weather cycle) === */
.world-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
  background: transparent;
  transition: background 12s ease;
}

/* === World event badge === */
.world-event-badge {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 14px;
  padding: 0 14px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(255, 200, 100, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 215, 80, 0.72), rgba(255, 140, 30, 0.52)),
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 200, 0.62),
      transparent 40%
    );
  color: #5a2e00;
  box-shadow:
    0 0 18px rgba(255, 180, 30, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  animation: eventPulse 2.4s ease-in-out infinite;
  cursor: help;
}

@keyframes eventPulse {
  0%,
  100% {
    box-shadow:
      0 0 18px rgba(255, 180, 30, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }
  50% {
    box-shadow:
      0 0 34px rgba(255, 180, 30, 0.72),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }
}

/* === Action bubble (persistent speech bubble) === */
.action-bubble {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  z-index: 8;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(180, 140, 255, 0.45);
  border-radius: 10px;
  padding: 3px 5px;
  box-shadow: 0 2px 8px rgba(100, 60, 180, 0.18);
  white-space: nowrap;
  animation: bubbleAppear 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--action-delay, 0ms);
}
/* speech bubble tail */
.action-bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 2px 1px rgba(180, 140, 255, 0.25));
}

@keyframes bubbleAppear {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.5) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
}

.tag-world_event {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
}

/* === Round badge === */
.round-badge {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 14px;
  padding: 0 12px;
  font-weight: 900;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.44);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* === World stats bar === */
.world-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 13px;
  color: var(--muted);
  min-height: 40px;
}

.world-stats-bar b {
  color: var(--text);
  font-weight: 900;
}

.world-stats-bar span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.world-stats-bar span::after {
  content: "·";
  margin-left: 10px;
  opacity: 0.4;
}

.world-stats-bar span:last-child::after {
  content: none;
}

/* === Memory list === */
.memory-list {
  display: grid;
  gap: 5px;
}

.memory-item {
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.memory-item.empty {
  color: rgba(124, 106, 170, 0.5);
  font-style: italic;
}

/* === XP progress row === */
.xp-bar span {
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
}

/* === Legendary & epic shimmer === */
.pixel-pet.rarity-5 {
  animation: legendaryShimmer 3s ease-in-out infinite;
}

@keyframes legendaryShimmer {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 6px var(--pet-glow));
  }
  50% {
    filter: brightness(1.22) drop-shadow(0 0 16px var(--pet-glow));
  }
}

.pixel-pet.rarity-4 {
  animation: epicPulse 4s ease-in-out infinite;
}

@keyframes epicPulse {
  0%,
  100% {
    box-shadow:
      0 18px 32px rgba(71, 95, 124, 0.2),
      0 0 20px color-mix(in srgb, var(--pet-glow), transparent 44%);
  }
  50% {
    box-shadow:
      0 18px 32px rgba(71, 95, 124, 0.2),
      0 0 36px color-mix(in srgb, var(--pet-glow), transparent 22%);
  }
}

/* === Event splash (marriage / birth) === */
.event-splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: splashFade 3.2s ease forwards;
}

.event-splash.hidden {
  display: none;
}

@keyframes splashFade {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.event-splash-content {
  text-align: center;
  padding: 32px 48px;
  border-radius: 32px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.86),
    rgba(253, 219, 236, 0.72)
  );
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 32px 80px rgba(167, 100, 210, 0.28),
    0 0 60px rgba(244, 114, 182, 0.22);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.event-splash-emoji {
  font-size: 56px;
  display: block;
  margin-bottom: 12px;
  animation: splashBounce 0.5s ease 0.3s both;
}

@keyframes splashBounce {
  0% {
    transform: scale(0.4);
  }
  70% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

.event-splash-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 6px;
}

.event-splash-desc {
  font-size: 14px;
  color: var(--muted);
  max-width: 320px;
}

/* ── Level-up flash ─────────────────────────────────────── */
@keyframes levelUpPop {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  20% {
    transform: translateY(-18px) scale(1.2);
    opacity: 1;
  }
  80% {
    transform: translateY(-28px) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translateY(-40px) scale(0.85);
    opacity: 0;
  }
}

.level-up-pop {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  color: #fbbf24;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  animation: levelUpPop 1.8s ease-out forwards;
}

/* ── Attack damage flash on world map ───────────────────── */
@keyframes damageFlash {
  0% {
    background: rgba(255, 60, 60, 0);
  }
  25% {
    background: rgba(255, 60, 60, 0.45);
  }
  100% {
    background: rgba(255, 60, 60, 0);
  }
}

.pet-avatar.taking-damage {
  animation: damageFlash 0.55s ease-out forwards;
}

/* ── Mood sparkline ─────────────────────────────────────── */
.mood-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
  padding: 2px 0;
}

.mood-sparkline-bar {
  flex: 1;
  min-width: 4px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, #f472b6, #c084fc);
  opacity: 0.8;
  transition: height 0.3s ease;
}

/* ── Pet detail mood history row ───────────────────────── */
.stat.sparkline-stat {
  gap: 8px;
}

.stat.sparkline-stat .mood-sparkline {
  flex: 1;
}

/* ── Floating hearts on interaction ───────────────────── */
@keyframes heartFloat {
  0% {
    transform: translateY(0) scale(0.6) rotate(-12deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-60px) scale(1.1) rotate(14deg);
    opacity: 0;
  }
}

.heart-float {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  font-size: 14px;
  animation: heartFloat 1.4s ease-out forwards;
}

/* ── World event world-overlay themed tints ─────────────── */
.world-overlay.event-meteor_shower {
  background: radial-gradient(
    ellipse at 80% 5%,
    rgba(255, 200, 50, 0.12) 0%,
    transparent 55%
  ) !important;
}
.world-overlay.event-full_moon {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(200, 200, 255, 0.16) 0%,
    transparent 60%
  ) !important;
}
.world-overlay.event-magic_surge {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(148, 100, 255, 0.13) 0%,
    transparent 70%
  ) !important;
}
.world-overlay.event-healing_rain {
  background: linear-gradient(
    to bottom,
    rgba(100, 200, 150, 0.1),
    transparent 80%
  ) !important;
}
.world-overlay.event-carnival {
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 100, 200, 0.07),
    rgba(100, 200, 255, 0.07),
    rgba(200, 255, 100, 0.07),
    rgba(255, 200, 100, 0.07),
    rgba(255, 100, 200, 0.07)
  ) !important;
}
.world-overlay.event-thunder_festival {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(100, 100, 255, 0.15) 0%,
    rgba(50, 0, 80, 0.08) 60%,
    transparent 90%
  ) !important;
}

/* ── Pet mood color indicators ──────────────────────────── */
.pet-avatar[data-mood="happy"] .pixel-pet {
  filter: brightness(1.08) saturate(1.2);
}
.pet-avatar[data-mood="sad"] .pixel-pet {
  filter: brightness(0.82) saturate(0.6);
}
.pet-avatar[data-mood="angry"] .pixel-pet {
  filter: brightness(1.05) hue-rotate(5deg) saturate(1.3);
}
.pet-avatar[data-mood="excited"] .pixel-pet {
  filter: brightness(1.12) saturate(1.4);
}

/* ── Stage-based pet appearance ─────────────────────────── */
.pixel-pet[data-stage="成长期"] {
  filter: saturate(1.18) brightness(1.05);
}
.pixel-pet[data-stage="成熟期"] {
  filter: saturate(1.35) brightness(1.1);
  animation: maturePulse 3.5s ease-in-out infinite;
}
@keyframes maturePulse {
  0%,
  100% {
    filter: saturate(1.35) brightness(1.1) drop-shadow(0 0 5px var(--pet-glow));
  }
  50% {
    filter: saturate(1.5) brightness(1.2) drop-shadow(0 0 14px var(--pet-glow));
  }
}

/* ── Action points badge ─────────────────────────────────── */
.ap-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.22),
    rgba(245, 158, 11, 0.16)
  );
  border: 1px solid rgba(251, 191, 36, 0.38);
  color: #92400e;
  cursor: default;
  user-select: none;
  transition: background 0.3s;
}

.ap-badge.low {
  background: linear-gradient(
    135deg,
    rgba(255, 100, 100, 0.22),
    rgba(220, 38, 38, 0.14)
  );
  border-color: rgba(220, 38, 38, 0.35);
  color: #991b1b;
}

.time-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    rgba(99, 179, 237, 0.22),
    rgba(49, 130, 206, 0.14)
  );
  border: 1px solid rgba(99, 179, 237, 0.38);
  color: #1a365d;
  cursor: default;
  user-select: none;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── NL pet creation ─────────────────────────────────────── */
.nl-desc {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--glass);
  font-size: 13px;
  color: var(--text);
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.nl-desc:focus {
  outline: none;
  border-color: var(--accent-2);
}

.modal-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.5;
}

.create-choice-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.create-choice-grid label {
  display: grid;
  gap: 5px;
}

.create-desc {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.avatar-upload-panel {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.avatar-upload-preview {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid rgba(167, 100, 210, 0.18);
  background: rgba(255, 255, 255, 0.58);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.avatar-upload-preview:empty::before {
  content: "预览";
  color: var(--muted);
  font-size: 11px;
}

.avatar-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Pixel Pet Editor ─────────────────────────────────────── */
.pixel-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pixel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.pixel-tools {
  display: flex;
  gap: 6px;
}

.pixel-tool-btn {
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.13s;
}
.pixel-tool-btn.active {
  background: linear-gradient(
    135deg,
    rgba(192, 132, 252, 0.35),
    rgba(244, 114, 182, 0.25)
  );
  border-color: rgba(167, 100, 210, 0.55);
  color: #5b21b6;
  font-weight: 600;
}

.pixel-toolbar-right {
  display: flex;
  gap: 6px;
}

.pixel-action-btn {
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.38);
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
}
.pixel-action-btn:hover {
  background: rgba(255, 255, 255, 0.62);
  color: var(--text);
}

.pixel-workspace {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* 16×16 at 14px per cell = 224px */
#pixelCanvas {
  display: grid;
  grid-template-columns: repeat(16, 14px);
  grid-template-rows: repeat(16, 14px);
  gap: 0;
  border: 1.5px solid rgba(167, 100, 210, 0.28);
  border-radius: 10px;
  overflow: hidden;
  cursor: crosshair;
  flex-shrink: 0;
  /* Checkerboard for transparent background */
  background: repeating-conic-gradient(
      rgba(0, 0, 0, 0.07) 0% 25%,
      transparent 0% 50%
    )
    0 0 / 14px 14px;
  user-select: none;
}

.px-cell {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  transition: outline 0.05s;
}
.px-cell:hover {
  outline: 1px solid rgba(124, 58, 237, 0.55);
  outline-offset: -1px;
}

.pixel-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.pixel-current-swatch {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid rgba(167, 100, 210, 0.4);
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.pixel-current-swatch.px-eraser {
  background: repeating-conic-gradient(
      rgba(0, 0, 0, 0.12) 0% 25%,
      transparent 0% 50%
    )
    0 0 / 10px 10px;
}

.pixel-preview-wrap {
  display: flex;
  justify-content: center;
}

.pixel-preview-label {
  font-size: 10px;
  color: var(--muted);
  margin: 0;
  text-align: center;
}

.pixel-palette {
  display: grid;
  grid-template-columns: repeat(8, 28px);
  gap: 5px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.38);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.62);
}

.px-swatch {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.1s,
    border-color 0.1s;
  padding: 0;
  outline: none;
}
.px-swatch:hover {
  transform: scale(1.18);
}
.px-swatch.selected {
  border-color: #7c3aed;
  transform: scale(1.22);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3);
}
.px-swatch.px-eraser {
  background: repeating-conic-gradient(
      rgba(0, 0, 0, 0.12) 0% 25%,
      transparent 0% 50%
    )
    0 0 / 10px 10px !important;
  border-color: rgba(0, 0, 0, 0.15);
}

.modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.accent-btn {
  background: linear-gradient(
    135deg,
    rgba(192, 132, 252, 0.18),
    rgba(244, 114, 182, 0.14)
  ) !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
  color: var(--accent-2) !important;
}

/* ── Object placement modal ──────────────────────────────── */
.place-modal-panel {
  max-width: 560px !important;
  width: 94vw;
}

.place-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.place-tab {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--line);
  background: var(--glass-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s;
}

.place-tab.active,
.place-tab:hover {
  background: linear-gradient(
    135deg,
    rgba(192, 132, 252, 0.22),
    rgba(244, 114, 182, 0.16)
  );
  border-color: rgba(192, 132, 252, 0.4);
  color: var(--text);
}

.place-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 2px;
}

.place-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--glass-soft);
  cursor: pointer;
  text-align: center;
  transition: all 0.18s;
  user-select: none;
}

.place-card:hover {
  background: var(--glass-strong);
}

.place-card.selected {
  border-color: var(--accent-2);
  background: linear-gradient(
    135deg,
    rgba(192, 132, 252, 0.18),
    rgba(244, 114, 182, 0.1)
  );
}

.place-card-icon {
  font-size: 22px;
  line-height: 1;
}
.place-card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.place-card-size {
  font-size: 10px;
  color: var(--muted);
}
.place-card-ap {
  font-size: 10px;
  color: #92400e;
  font-weight: 700;
}
.place-card-effect {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
}

.place-event-config {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.place-event-loc-info {
  font-size: 12px;
  color: var(--muted);
}
.place-card-loc {
  font-size: 10px;
  color: #b45309;
  background: rgba(251, 191, 36, 0.18);
  padding: 1px 6px;
  border-radius: 8px;
  align-self: flex-start;
}
.place-event-pending-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.place-event-pending-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
}
.pending-event-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 6px;
  align-items: center;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
}
.pending-event-icon {
  font-size: 16px;
}
.pending-event-name {
  font-weight: 600;
}
.pending-event-meta {
  color: var(--muted);
  font-size: 11px;
}
.pending-event-cancel {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}
.pending-event-cancel:hover {
  background: rgba(220, 38, 38, 0.22);
}
.pending-event-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ap-cost-display {
  font-size: 13px;
  color: #92400e;
  font-weight: 700;
  margin-right: auto;
}

/* ── World objects on map ─────────────────────────────────── */
.world-object {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 3px;
  z-index: 2;
  pointer-events: all;
  cursor: pointer;
  transition: opacity 0.2s;
  opacity: 0.88;
}

.world-object:hover {
  opacity: 1;
  z-index: 3;
}

.world-object.type-building {
  background: rgba(251, 191, 36, 0.22);
  border: 1px solid rgba(251, 191, 36, 0.45);
}

.world-object.type-item {
  background: rgba(96, 165, 250, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.38);
}

.world-object.type-plant {
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.35);
}

.world-object-tooltip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text);
  pointer-events: none;
  display: none;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.world-object:hover .world-object-tooltip {
  display: block;
}

/* ── Scheduled-event markers (admin-placed timed events) ───── */
.scheduled-event-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 55;
  cursor: pointer;
  pointer-events: all;
  font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(244, 114, 182, 0.55));
  animation: schedEvPulse 1.6s ease-in-out infinite;
}
.scheduled-event-marker .sched-ev-icon {
  pointer-events: none;
}
.scheduled-event-marker .sched-ev-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  max-width: 240px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(244, 114, 182, 0.45);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 11px;
  color: #1f2937;
  line-height: 1.4;
  display: none;
  z-index: 60;
  box-shadow: 0 6px 18px rgba(76, 29, 149, 0.18);
  white-space: normal;
  text-align: left;
}
.scheduled-event-marker .sched-ev-tooltip b {
  display: block;
  font-size: 12px;
  color: #4c1d95;
  margin-bottom: 2px;
}
.scheduled-event-marker .sched-ev-tooltip small {
  display: block;
  color: #4b5563;
  margin-bottom: 4px;
}
.scheduled-event-marker .sched-ev-tooltip em {
  display: block;
  font-style: normal;
  color: #6b21a8;
  font-size: 10px;
}
.scheduled-event-marker:hover .sched-ev-tooltip {
  display: block;
}
@keyframes schedEvPulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(244, 114, 182, 0.55));
  }
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 0 10px rgba(244, 114, 182, 0.85));
  }
}

/* ── Wild monsters ─────────────────────────────────────────── */
.world-monster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 3;
  pointer-events: all;
  cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.65));
}
.world-monster.tier-4,
.world-monster.tier-5 {
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.85));
}
.world-monster.tier-6,
.world-monster.tier-7 {
  font-size: 19px;
  filter: drop-shadow(0 0 7px rgba(185, 28, 28, 0.9));
}
.world-monster.tier-8,
.world-monster.tier-9,
.world-monster.tier-10 {
  font-size: 21px;
  filter: drop-shadow(0 0 9px rgba(147, 51, 234, 0.9));
}
.world-monster.tier-11,
.world-monster.tier-12 {
  font-size: 24px;
  filter: drop-shadow(0 0 11px rgba(245, 158, 11, 0.95));
}
/* 世界 BOSS：更大、金色光环与脉冲 */
.world-monster.boss {
  font-size: 26px;
  z-index: 4;
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.95));
  animation: bossPulse 1.8s ease-in-out infinite;
}
.world-monster.boss .monster-tooltip {
  border-color: #fbbf24;
  color: #fde68a;
}
@keyframes bossPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}
.world-monster .monster-icon {
  line-height: 1;
}
.world-monster .monster-hp {
  position: absolute;
  bottom: -3px;
  left: 10%;
  width: 80%;
  height: 3px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  overflow: hidden;
}
.world-monster .monster-hp > span {
  display: block;
  height: 100%;
  transition: width 0.3s;
}
.world-monster .monster-tooltip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--glass-strong);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 7px;
  font-size: 11px;
  color: var(--text);
  pointer-events: none;
  display: none;
  z-index: 20;
}
.world-monster:hover .monster-tooltip {
  display: block;
}

/* ── Admin full message log ───────────────────────────────── */
.admin-log-row {
  display: grid;
  grid-template-columns: 90px 64px 130px 40px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 12px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-log-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.admin-log-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.admin-log-tag {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  padding: 1px 5px;
  text-align: center;
}
.admin-log-actor {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-log-round {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.admin-log-content {
  color: var(--text);
  word-break: break-word;
}

/* ── Pixel sprite render inside world objects + place cards ── */
.world-object .pixel-sprite,
.place-card-icon .pixel-sprite {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.place-card-icon {
  width: 28px;
  height: 28px;
}
.place-card-icon .pixel-sprite {
  width: 28px;
  height: 28px;
}
.place-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.emoji-pixel {
  display: inline-block;
  font-feature-settings: normal;
  /* keep emoji rendering, but visually match pixel sprites */
  filter: contrast(1.05) saturate(1.1);
}
.world-object .emoji-pixel {
  line-height: 1;
}

/* ── Map click cursor ─────────────────────────────────────── */
.world.placing-mode {
  cursor: crosshair;
}

/* ── Object level superscript on map ────────────────────── */
.obj-level-sup {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 8px;
  font-weight: 800;
  background: #7c3aed;
  color: #fff;
  border-radius: 6px;
  padding: 1px 3px;
  line-height: 1.2;
  pointer-events: none;
}

/* Own-object indicator */
.world-object.own-object {
  box-shadow: 0 0 0 1.5px rgba(167, 139, 250, 0.7);
}
.world-object.own-object:hover {
  box-shadow:
    0 0 0 2px rgba(167, 139, 250, 1),
    0 0 8px rgba(167, 139, 250, 0.5);
}

/* ── Object action popup ─────────────────────────────────── */
.obj-action-popup {
  position: fixed;
  z-index: 120;
  min-width: 180px;
  background: var(--glass-strong, rgba(255, 255, 255, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  padding: 10px 12px 12px;
  box-shadow: 0 8px 32px rgba(100, 80, 180, 0.18);
  backdrop-filter: blur(14px);
}

.obj-action-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}

.obj-level-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.obj-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
}
.obj-dot.filled {
  background: #7c3aed;
  border-color: #5b21b6;
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.5);
}

/* Building durability bar */
.obj-durability {
  margin-bottom: 10px;
}
.obj-durability .dur-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.obj-durability .dur-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.obj-durability .dur-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.obj-durability .dur-label {
  font-size: 11px;
}

/* Damaged buildings on world map */
.world-object.dur-damaged {
  filter: brightness(0.85) sepia(0.2);
}
.world-object.dur-critical {
  filter: brightness(0.7) sepia(0.4) hue-rotate(-15deg);
  animation: dur-shake 1.6s infinite ease-in-out;
}
@keyframes dur-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, 0);
  }
  75% {
    transform: translate(1px, 0);
  }
}

.obj-action-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.obj-btn {
  width: 100%;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

/* ── Log filter "only mine" button active state ──────────── */
button.ghost.active {
  background: rgba(167, 139, 250, 0.22);
  border-color: rgba(167, 139, 250, 0.6);
  color: #6d28d9;
}
button.ghost.active:hover {
  background: rgba(167, 139, 250, 0.35);
}

/* ── Scheduled event badge ───────────────────────────────── */
.scheduled-event-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.scheduled-event-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--glass-soft);
  border: 1px solid var(--line);
  color: var(--muted);
}

.scheduled-event-item .evt-round {
  font-weight: 700;
  color: var(--text);
  margin-left: auto;
}

/* ── Map placement hint bar ──────────────────────────────── */
#placementHint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-strong);
  border: 1.5px solid var(--accent-2);
  border-radius: 24px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  z-index: 100;
  pointer-events: none;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(192, 132, 252, 0.22);
}

@media (max-width: 900px) {
  .auth-view,
  .bottom-grid {
    grid-template-columns: 1fr;
  }

  .bottom-grid {
    grid-template-rows: auto;
    grid-template-areas:
      "pet"
      "social"
      "log";
  }

  .social-tab-panel .relationships,
  .social-tab-panel .memory-list,
  .social-tab-panel .objective-list {
    max-height: 300px;
  }

  .auth-view {
    align-content: center;
    gap: 28px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    width: auto;
  }

  .top-actions {
    display: flex;
  }

  .compact-input {
    width: 100%;
    grid-column: 1 / -1;
  }

  .pet-controls {
    grid-template-columns: 1fr 1fr;
  }

  .icon-btn {
    width: 42px;
  }

  .admin-user {
    flex-direction: column;
  }

  .admin-user-head {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-user-controls {
    justify-content: flex-end;
  }

  .world-panel {
    min-height: unset;
    height: var(--mobile-map-panel-height, 460px);
    max-height: none;
    border-radius: 16px;
    overscroll-behavior: contain;
    scrollbar-width: none;
    touch-action: pan-y;
  }

  .world-panel::-webkit-scrollbar {
    display: none;
  }

  .world-stats-bar {
    flex-wrap: nowrap;
    gap: 6px;
    min-height: 34px;
    margin-bottom: 8px;
    padding: 6px 8px;
    border-radius: 14px;
    font-size: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .world-stats-bar::-webkit-scrollbar {
    display: none;
  }

  .world-stats-bar .stats-optional {
    display: none;
  }

  .world-stats-bar span {
    flex: 0 0 auto;
  }

  .world-stats-bar span::after {
    content: none;
  }

  .map-toolbar {
    top: 6px;
    right: 8px;
    gap: 2px;
    padding: 3px 4px;
    border-radius: 10px;
  }

  .map-tgl {
    padding: 3px 5px;
    font-size: 14px;
    border-radius: 7px;
  }

  .world {
    --map-padding: 4px;
    --map-padding-total: 8px;
    grid-template-columns: repeat(var(--map-width), var(--cell-size));
    grid-template-rows: repeat(var(--map-height), var(--cell-size));
    gap: 0;
  }

  .world-panel.panning .terrain::before,
  .world-panel.panning .terrain::after,
  .world-panel.panning [class*="terrain-decor-"]::after {
    display: none;
  }

  .description {
    grid-template-columns: 1fr;
  }

  .detail-wide {
    grid-column: auto;
  }

  .admin-form {
    grid-template-columns: 1fr 1fr;
  }

  .ability-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Idle layer UI ─────────────────────────────────────────── */
.idle-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(192, 132, 252, 0.16);
  border: 1px solid rgba(192, 132, 252, 0.3);
  font-size: 12px;
}
.idle-chip-event {
  background: rgba(244, 114, 182, 0.18);
  border-color: rgba(244, 114, 182, 0.35);
}
.idle-pet-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
}
.idle-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}
.idle-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.idle-field > span {
  font-weight: 600;
  color: #4c1d95;
}
.idle-field select,
.idle-field input {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(124, 58, 237, 0.35);
  background: #ffffff;
  color: #1f2937;
  font-size: 13px;
  appearance: auto;
  -webkit-appearance: menulist;
}
.idle-field select option {
  background: #ffffff;
  color: #1f2937;
}
.idle-event-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.idle-event-card[data-prio="S"] {
  border-color: rgba(244, 114, 182, 0.55);
}
.idle-event-card[data-prio="A"] {
  border-color: rgba(192, 132, 252, 0.5);
}
.idle-event-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.idle-event-narrative {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.idle-event-opts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.idle-muted {
  font-size: 12px;
  color: var(--muted);
}
.idle-offline-summary {
  line-height: 1.6;
  margin: 0;
}
.idle-offline-list {
  margin: 4px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}