/* Original Vibes artwork, local image fallbacks and restrained presentation. */
.av {
  background: #303b4b url('/assets/art/avatar-person-v1.webp') center / cover no-repeat;
}
.av.av-page {
  background-image: url('/assets/art/avatar-page-v1.webp');
}
.av > img { display: block; }
.cover-none,
[data-theme="light"] .cover-none {
  background: #303b4b url('/assets/art/city-v1.webp') center 52% / cover no-repeat;
}
.cover.cover-none::after,
.ecard-cover.cover-none::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 65%, rgba(0, 0, 0, .12));
}
.cover-edit, .date-chip, .live-chip { z-index: 1; }
.reaction-art {
  display: inline-block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  flex: none;
}
.rp .reaction-art { width: 34px; height: 34px; }
.rp:hover, .rp:focus-visible { transform: translateY(-3px) scale(1.1); }
.rs { width: 24px; height: 24px; }
.rs .reaction-art { width: 20px; height: 20px; }
.act-emoji .reaction-art { width: 22px; height: 22px; }
.av-react .reaction-art { width: 20px; height: 20px; border-radius: 50%; background: var(--panel); }
.hot-meta small .reaction-art { width: 15px; height: 15px; }
.act-react.r3 { color: #edac87; }
.act-react.r4 { color: #bfa8e9; }
.act-react.r5 { color: #78acd5; }
.empty-art { transform: none; border-radius: 20px; background: var(--panel-2); color: var(--text-2); border: 1px solid var(--line); }
.empty-art svg.i { transform: none; }

/* Login: the city is the visual focus, with one clear sign-in action. */
.landing { background: var(--bg); }
.land {
  max-width: 1180px;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .9fr);
  gap: 70px;
  padding: 42px 32px 24px;
  align-items: center;
}
.land-copy { min-width: 0; }
.land .logo-big { font-size: 28px; gap: 11px; }
.land .logo-big .logo-mark { width: 43px; height: 43px; border-radius: 13px; box-shadow: none; }
.land-eyebrow {
  margin-top: 42px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
}
.land-copy h1 {
  font-size: clamp(34px, 4.2vw, 51px);
  line-height: 1.13;
  letter-spacing: -.045em;
  margin: 12px 0 16px;
}
.land-accent { color: #ed8d85; }
[data-theme="light"] .land-accent { color: #ae454c; }
.land-sub { max-width: 510px; font-size: 15px; line-height: 1.75; color: var(--text-2); }
.land-scene {
  position: relative;
  overflow: hidden;
  margin: 28px 0 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  aspect-ratio: 16 / 9;
  background: #303b4b;
}
.land-scene > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 54%; }
.land-scene figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 28px 18px 14px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  background: linear-gradient(transparent, rgba(10, 15, 20, .72));
}
.land-scene figcaption span:last-child { color: #e5ded8; font-size: 10px; font-weight: 500; }
.land-side { min-height: 0; padding-top: 32px; }
.land-card {
  width: 100%;
  max-width: 402px;
  margin: 0;
  padding: 32px 28px 26px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow: none;
  backdrop-filter: none;
}
.land-signin-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  border-radius: 13px;
  background: var(--panel-2);
  color: #ed8d85;
  border: 1px solid var(--line);
}
.land-signin-icon svg { width: 22px; height: 22px; }
.land-card h2 { font-size: 24px; letter-spacing: -.035em; margin-bottom: 10px; }
.land-card > p.muted { font-size: 13px; line-height: 1.8; margin-bottom: 24px; }
.land-signin {
  min-height: 49px;
  height: auto;
  padding: 13px 14px;
  border-radius: 11px;
  background: #da727b;
  border: 1px solid #da727b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}
.land-signin:hover { color: #fff; background: #c9626d; border-color: #c9626d; }
.land-signin:focus-visible { outline: 3px solid #ed8d85; outline-offset: 4px; }
.land-signin .cali-badge { width: 25px; height: 25px; border-radius: 7px; font-size: 10px; }
.land-features { display: flex; flex-wrap: wrap; gap: 11px 16px; margin-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.land-features > span { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-3); font-weight: 500; }
.land-features svg.i { width: 14px; height: 14px; color: var(--text-2); }
.land-small { margin-top: 20px; font-size: 11px; line-height: 1.9; }
.land-small a { color: #ed8d85; }
[data-theme="light"] .land-small a { color: #ae454c; }
.land-roleplay { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; color: var(--text-3); font-size: 10px; }
.land-roleplay svg.i { width: 13px; height: 13px; }
.land-foot { max-width: 1180px; padding: 26px 32px; font-size: 10px; line-height: 1.8; color: var(--text-3); }

@media (max-width: 1000px) {
  .land { gap: 36px; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }
  .land-card { padding: 28px 22px 24px; }
  .land-copy h1 { font-size: 38px; }
}
@media (max-width: 760px) {
  .land { grid-template-columns: 1fr; max-width: 560px; gap: 26px; padding: 28px 24px 12px; }
  .land-eyebrow { margin-top: 30px; }
  .land-copy h1 { font-size: clamp(32px, 7.3vw, 42px); margin: 12px 0 14px; }
  .land-sub { font-size: 14px; }
  .land-scene { margin-top: 22px; aspect-ratio: 2 / 1; border-radius: 15px; }
  .land-side { padding-top: 0; }
  .land-card { max-width: none; padding: 26px 24px; border-radius: 16px; }
  .land-signin-icon { display: none; }
  .land-card h2 { font-size: 23px; }
  .land-card > p.muted { margin-bottom: 20px; }
  .land-features { gap: 10px 16px; }
  .land-foot { max-width: 560px; padding: 20px 24px 26px; }
}
@media (max-width: 360px) {
  .land { padding-left: 18px; padding-right: 18px; }
  .land-card { padding: 24px 18px; }
  .land-signin { font-size: 11px; gap: 7px; }
  .land-scene figcaption { padding-left: 12px; padding-right: 12px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp, .act-emoji { animation: none !important; transition: none !important; }
  .rp:hover, .rp:focus-visible { transform: none; }
}


/* First-visit setup: an explicit character and username, before creation. */
.onboarding-steps { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 20px; color: var(--text-3); font-size: 11px; }
.onboarding-steps b { color: var(--text); font-weight: 700; }
.onboarding-steps .i { width: 13px; height: 13px; }
.join-character { display: flex; align-items: center; gap: 13px; text-align: left; padding: 15px; margin: 23px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.join-character > div { flex: 1; min-width: 0; }
.join-character b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.join-character small { display: block; color: var(--text-3); font-size: 12px; }
.join-character a { color: var(--brand-ink); font-size: 12px; font-weight: 700; }
.join-form { text-align: left; display: flex; flex-direction: column; gap: 18px; }
.join-form .alert { margin: 0; }
.join-form .field small { line-height: 1.7; }
.join-form .input[aria-invalid="true"] { outline: 2px solid var(--danger, #d7727c); outline-offset: -2px; }
.join-note { margin: 0 0 16px; color: var(--text-3); font-size: 11px; line-height: 1.7; }