/* Frontend build: 20260730-story-media-live-commit-cache-v2 */
:root {
  color-scheme: dark;
  --bg: #07080b;
  --surface: #0f1118;
  --surface-2: #151823;
  --surface-3: #1d2130;
  --line: #292f3d;
  --line-soft: rgba(255, 255, 255, 0.08);
  --text: #f3f4f8;
  --muted: #989ead;
  --soft: #c7ccd6;
  --accent: #7c4dff;
  --accent-2: #4f7cff;
  --warm: #e5b76b;
  --danger: #ff7474;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
}

/* TRYVA site-native dialog layer: replaces browser alert/confirm/prompt UI. */
body.site-dialog-open {
  overflow: hidden !important;
}

.site-dialog-backdrop {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top, 0px))
    max(18px, env(safe-area-inset-right, 0px))
    max(18px, env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px));
  background: rgba(4, 3, 8, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-dialog-backdrop.hidden {
  display: none !important;
}

.site-dialog-card {
  position: relative;
  width: min(100%, 470px);
  max-height: min(86dvh, 680px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 27px;
  border: 1px solid rgba(173, 142, 255, 0.22);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(124, 77, 255, 0.13), transparent 46%),
    #121019;
  color: #f2eefb;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52);
  outline: none;
}

.site-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  color: #a9a1b8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.site-dialog-close:hover,
.site-dialog-close:focus-visible {
  border-color: rgba(173, 142, 255, 0.4);
  color: #fff;
  outline: none;
}

.site-dialog-kicker {
  margin: 0 48px 8px 0;
  color: #9f86ee;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.site-dialog-card h2 {
  margin: 0 48px 12px 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.site-dialog-card > p {
  margin: 0;
  color: #bdb5ca;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.site-dialog-input-wrap {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.site-dialog-input-wrap.hidden {
  display: none !important;
}

.site-dialog-input-wrap > span {
  color: #cfc7dc;
  font-size: 12px;
  font-weight: 700;
}

.site-dialog-input-wrap input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  background: #0c0b11;
  color: #f3effb;
  font: inherit;
  font-size: 16px;
  outline: none;
}

.site-dialog-input-wrap input:focus {
  border-color: rgba(151, 116, 255, 0.68);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.14);
}

.site-dialog-input-wrap input[readonly] {
  color: #d8ccff;
  cursor: text;
}

.site-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 25px;
}

.site-dialog-actions button {
  min-width: 96px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

.site-dialog-cancel {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: #c4bdcf;
}

.site-dialog-cancel.hidden {
  display: none !important;
}

.site-dialog-confirm {
  border: 0;
  background: linear-gradient(135deg, #7655e8, #9f6dff);
  color: #fff;
}

.site-dialog-confirm.is-danger {
  background: linear-gradient(135deg, #9d3457, #d94f6f) !important;
}

.site-dialog-actions button:hover {
  filter: brightness(1.08);
}

.site-dialog-actions button:focus-visible {
  outline: 2px solid rgba(190, 164, 255, 0.82);
  outline-offset: 2px;
}

@media (max-width: 599px) {
  .site-dialog-backdrop {
    align-items: end;
    padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px));
  }

  .site-dialog-card {
    width: 100%;
    max-height: min(82dvh, 620px);
    padding: 23px 18px 18px;
    border-radius: 19px;
  }

  .site-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-dialog-actions button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }

  .site-dialog-cancel.hidden + .site-dialog-confirm {
    grid-column: 1 / -1;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 72% 14%, rgba(76, 98, 164, 0.18), transparent 34%),
    linear-gradient(180deg, #08090d 0%, #06070a 100%);
  color: var(--text);
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Segoe UI", system-ui, sans-serif;
}

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

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.nav-shell {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 28px 18px;
  border-right: 1px solid var(--line-soft);
  background: rgba(8, 9, 13, 0.88);
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 44px;
  font-size: 20px;
  font-weight: 800;
}

.brand-logo {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  color: #08090d;
  font-weight: 900;
}

.nav-menu {
  display: grid;
  gap: 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--soft);
  text-align: left;
  font-weight: 750;
}

.nav-item.active {
  background: rgba(124, 77, 255, 0.22);
  border-color: rgba(124, 77, 255, 0.22);
  color: #fff;
}

.nav-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: inherit;
}

.nav-spacer {
  flex: 1;
}

.credit-card,
.engine-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(21, 24, 35, 0.76);
  color: var(--soft);
}

.engine-card {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.workspace {
  min-width: 0;
  padding: 42px 48px 120px;
}

.chat-active {
  overflow: hidden;
}

.chat-active .workspace {
  height: 100vh;
  overflow: hidden;
  padding-bottom: 42px;
}

.view {
  min-width: 0;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.page-head h1 {
  margin: 0;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: 0;
}

.page-head p,
.section-head p {
  margin: 9px 0 0;
  color: var(--muted);
}

.head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(390px, 34vw);
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(19, 21, 30, 0.92);
  color: var(--muted);
}

.search-box input {
  width: 100%;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: 0;
}

.ghost-button,
.primary-button,
.secondary-button,
.tool-button,
.mini-button,
.round-button,
.user-form button {
  min-height: 44px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0 16px;
  background: rgba(18, 20, 29, 0.82);
  color: var(--text);
  font-weight: 800;
}

.ghost-button {
  border-color: rgba(124, 77, 255, 0.58);
}

.primary-button {
  min-width: 210px;
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}

.primary-button:disabled {
  cursor: not-allowed;
  background: #272b36;
  color: #777f90;
}

.secondary-button,
.tool-button {
  background: var(--surface-3);
}

.danger {
  border-color: rgba(255, 116, 116, 0.34);
  color: #ffe4e4;
}

.mode-bar {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 34px;
  padding: 5px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(15, 17, 24, 0.88);
}

.mode-tab {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 0 22px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.mode-tab.active {
  background: rgba(124, 77, 255, 0.32);
  color: #fff;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-head h2 {
  margin: 0;
  font-size: 22px;
}

.subtle-pill {
  padding: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--muted);
}

.character-grid,
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.character-tile,
.create-card,
.builder-panel,
.create-form,
.preview-panel,
.chat-panel,
.insight-panel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(17, 19, 27, 0.84);
  box-shadow: var(--shadow);
}

.insight-panel {
  max-height: calc(100vh - 84px);
  overflow: auto;
}

.character-tile {
  display: grid;
  grid-template-rows: auto minmax(216px, auto);
  min-width: 0;
  overflow: hidden;
}

.character-tile.selected {
  border-color: rgba(124, 77, 255, 0.72);
}

.tile-art {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), transparent 44%),
    #202331;
}

.tile-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.tile-art span {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #d9ddff;
  font-size: 30px;
  font-weight: 900;
}

.tile-body {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  position: relative;
  z-index: 1;
  min-width: 0;
  background: rgba(17, 19, 27, 0.96);
}

.tile-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.tile-title h3 {
  margin: 0;
  font-size: 19px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 2026 visual-novel platform refresh */
:root {
  --bg: #05060b;
  --surface: rgba(12, 14, 22, 0.82);
  --surface-2: rgba(18, 21, 34, 0.84);
  --surface-3: rgba(27, 30, 48, 0.86);
  --line: rgba(142, 151, 178, 0.18);
  --line-soft: rgba(220, 225, 255, 0.09);
  --text: #f7f4ff;
  --muted: #9ba1b4;
  --soft: #cdd1df;
  --accent: #7a42ff;
  --accent-2: #b246ff;
  --accent-blue: #2f9bff;
  --warm: #f1c873;
  --rose: #ff628d;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
}

body {
  background:
    radial-gradient(circle at 82% 4%, rgba(111, 64, 255, 0.24), transparent 30%),
    radial-gradient(circle at 50% 110%, rgba(26, 111, 255, 0.14), transparent 36%),
    linear-gradient(180deg, #070911 0%, #030409 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, black, transparent 86%);
  pointer-events: none;
}

.app-shell {
  grid-template-columns: 268px minmax(0, 1fr);
}

.nav-shell {
  padding: 28px 18px 22px;
  background:
    radial-gradient(circle at 70% 6%, rgba(124, 77, 255, 0.2), transparent 28%),
    rgba(5, 7, 13, 0.92);
  backdrop-filter: blur(22px);
}

.brand-logo {
  border-radius: 8px;
  background: linear-gradient(145deg, #af66ff, #6d45ff);
  color: #fff;
  box-shadow: 0 14px 32px rgba(124, 77, 255, 0.28);
}

.nav-item {
  min-height: 56px;
  border-radius: 8px;
  font-size: 16px;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.nav-item:hover {
  transform: translateX(2px);
  background: rgba(255, 255, 255, 0.045);
}

.nav-item.active {
  border-color: rgba(139, 94, 255, 0.42);
  background: linear-gradient(135deg, rgba(118, 69, 255, 0.52), rgba(65, 48, 138, 0.58));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 32px rgba(124, 77, 255, 0.18);
}

.engine-card {
  min-height: 74px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(24, 27, 43, 0.94), rgba(14, 17, 29, 0.94));
}

.workspace {
  padding: 32px 42px 112px;
}

.page-head {
  align-items: center;
  margin-bottom: 28px;
}

.page-head h1 {
  font-size: clamp(42px, 4vw, 60px);
  font-weight: 850;
}

.page-head p {
  color: #c0c3d0;
  font-size: 16px;
}

.head-actions {
  gap: 14px;
}

.search-box {
  width: min(520px, 38vw);
  min-height: 56px;
  border-radius: 8px;
  background: rgba(10, 12, 20, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.ghost-button,
.primary-button,
.secondary-button,
.tool-button,
.mini-button,
.round-button {
  border-radius: 8px;
}

.primary-button {
  min-height: 56px;
  background:
    linear-gradient(135deg, rgba(158, 79, 255, 0.98), rgba(92, 53, 226, 0.98)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
  box-shadow: 0 18px 40px rgba(118, 69, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.primary-button.selected,
.primary-button:hover:not(:disabled) {
  filter: brightness(1.08);
}

.ghost-button {
  min-height: 56px;
  border-color: rgba(139, 94, 255, 0.52);
  background: rgba(14, 16, 27, 0.72);
}

.section-head h2 {
  font-size: 23px;
}

.play-view .character-section {
  margin-top: 12px;
}

.character-grid {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 18px;
}

.character-tile {
  position: relative;
  display: grid;
  grid-template-rows: minmax(330px, 1fr);
  min-height: 0;
  aspect-ratio: 4 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(12, 14, 24, 0.78);
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.character-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(162, 100, 255, 0.5);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.46), 0 0 36px rgba(124, 77, 255, 0.13);
}

.character-tile.selected {
  border-color: rgba(164, 85, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(105, 202, 255, 0.42), 0 0 44px rgba(124, 77, 255, 0.28);
}

.tile-art {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  padding: 0;
  background:
    radial-gradient(circle at 52% 20%, rgba(194, 174, 255, 0.32), transparent 35%),
    linear-gradient(135deg, rgba(54, 62, 92, 0.76), rgba(12, 14, 24, 0.98));
}

.tile-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 4, 9, 0.02) 0%, rgba(3, 4, 9, 0.12) 35%, rgba(3, 4, 9, 0.82) 100%),
    linear-gradient(90deg, rgba(3, 4, 9, 0.14), transparent 45%);
}

.tile-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.04);
}

.tile-body {
  position: relative;
  z-index: 2;
  align-content: end;
  padding: 18px;
  background: transparent;
}

.tile-title h3 {
  font-size: 28px;
  line-height: 1;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.48);
}

.tile-actions {
  position: absolute;
  right: 14px;
  top: 16px;
  z-index: 5;
}

.tile-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  padding: 7px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff5c92, #8a54ff);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.tile-heart {
  position: absolute;
  top: 14px;
  right: 62px;
  z-index: 6;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(8, 10, 18, 0.42);
  color: #fff;
  backdrop-filter: blur(12px);
}

.add-card-button {
  border-radius: 50%;
  background: rgba(13, 15, 25, 0.62);
  backdrop-filter: blur(12px);
}

.tile-meta {
  color: rgba(248, 246, 255, 0.78);
  font-size: 15px;
}

.tile-summary {
  min-height: 48px;
  color: rgba(246, 244, 255, 0.88);
  -webkit-line-clamp: 2;
}

.tag-chip {
  border-color: rgba(147, 95, 255, 0.36);
  background: rgba(93, 53, 201, 0.32);
  color: #e6dcff;
}

.tile-mini-stats {
  display: flex;
  gap: 18px;
  margin-top: 2px;
  color: rgba(244, 244, 252, 0.72);
  font-size: 12px;
}

.selection-tray {
  position: sticky;
  bottom: 20px;
  z-index: 15;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 24vw);
  gap: 18px;
  margin-top: 34px;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(13, 16, 27, 0.86);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(24px);
}

.selection-tray p {
  margin: 0 0 10px;
  color: #fff;
  font-weight: 900;
}

.selected-list {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}

.selected-pill {
  min-height: 56px;
  padding: 0 14px 0 8px;
  border-radius: 8px;
  background: rgba(29, 32, 52, 0.9);
}

.selected-pill img {
  width: 38px;
  height: 38px;
  margin-right: 8px;
  border-radius: 50%;
  object-fit: cover;
}

.empty-selection {
  color: rgba(218, 221, 235, 0.62);
}

.empty-slot {
  display: grid;
  width: 118px;
  height: 56px;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 28px;
}

.character-detail-view {
  padding-bottom: 80px;
}

.detail-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 0.88fr) minmax(440px, 1.12fr);
  min-height: min(720px, calc(100vh - 120px));
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background:
    radial-gradient(circle at 82% 22%, rgba(188, 144, 255, 0.22), transparent 28%),
    linear-gradient(90deg, rgba(5, 6, 12, 0.98) 0%, rgba(5, 6, 12, 0.86) 42%, rgba(5, 6, 12, 0.22) 68%, rgba(5, 6, 12, 0.12) 100%);
  box-shadow: var(--shadow);
}

.detail-copy {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(34px, 5vw, 70px);
}

.detail-badge {
  width: fit-content;
  padding: 8px 13px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8e5cff, #5f3bd9);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.detail-copy h1 {
  margin: 0;
  font-size: clamp(58px, 7vw, 104px);
  line-height: 0.96;
}

#detailMeta {
  margin: -6px 0 0;
  color: #e2e2ec;
  font-size: 20px;
}

.detail-copy blockquote {
  margin: 10px 0 0;
  color: #c69cff;
  font-size: 21px;
  font-weight: 850;
}

#detailSummary {
  max-width: 560px;
  margin: 0;
  color: #d8d9e3;
  line-height: 1.8;
}

.detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 560px;
  margin-top: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(12, 14, 24, 0.62);
}

.detail-stats span {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-right: 1px solid var(--line-soft);
}

.detail-stats span:last-child {
  border-right: 0;
}

.detail-stats strong {
  font-size: 26px;
}

.detail-stats small {
  color: var(--muted);
}

.detail-safe-note {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  padding: 14px 16px;
  border: 1px solid rgba(142, 86, 255, 0.28);
  border-radius: 8px;
  background: rgba(104, 60, 222, 0.14);
  color: #d9d0ff;
}

.detail-safe-note p {
  margin: 0;
}

.detail-actions {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 12px;
  max-width: 760px;
  margin-top: 12px;
}

.detail-art {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5, 6, 12, 0.94) 0%, rgba(5, 6, 12, 0.18) 30%, rgba(5, 6, 12, 0.02) 100%),
    radial-gradient(circle at 55% 38%, rgba(209, 181, 255, 0.26), transparent 42%);
}

.detail-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--detail-bg, radial-gradient(circle at 70% 30%, rgba(180, 145, 255, 0.22), transparent 34%));
}

.detail-art img {
  position: absolute;
  right: max(4vw, 30px);
  bottom: -8%;
  z-index: 2;
  width: min(56vw, 650px);
  height: 112%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 26px 42px rgba(0, 0, 0, 0.58));
}

.detail-quote-card {
  position: absolute;
  right: 13%;
  bottom: 10%;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  max-width: 360px;
  padding: 18px 22px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(9, 11, 19, 0.7);
  color: #f4f0ff;
  backdrop-filter: blur(18px);
}

.detail-quote-card span {
  color: var(--accent);
  font-size: 34px;
  font-weight: 900;
}

.detail-quote-card p {
  margin: 0;
  line-height: 1.55;
}

.related-section {
  margin-top: 26px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
}

.related-grid .character-tile {
  min-height: 280px;
}

.modal-backdrop {
  align-items: stretch;
  justify-items: center;
  padding: 34px;
}

.start-modal {
  width: min(1180px, 100%);
  align-self: center;
  padding: 28px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 18%, rgba(124, 77, 255, 0.18), transparent 36%),
    rgba(10, 12, 20, 0.98);
}

.modal-head h2 {
  margin: 0;
  font-size: 32px;
}

.start-modal::before {
  content: "그룹 루트 설정";
  display: block;
  margin: -4px 0 2px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  opacity: 0.56;
}

.user-profile-box,
.simulation-options,
.start-options,
.start-modal label {
  border-radius: 8px;
}

.mode-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.mode-tab {
  min-height: 50px;
}

.modal-start-button {
  position: static;
  width: 100%;
  margin: 8px 0 0;
  border-radius: 8px;
}

.chat-active .workspace {
  padding: 26px 34px;
}

.chat-view {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
}

.chat-panel,
.insight-panel {
  border-radius: 8px;
  background: rgba(9, 11, 20, 0.82);
  backdrop-filter: blur(18px);
}

.chat-header {
  min-height: 84px;
  background: rgba(8, 10, 18, 0.88);
}

.chat-header h2 {
  font-size: 24px;
}

.controls {
  display: flex;
  gap: 10px;
}

.tool-button {
  min-height: 48px;
  background: rgba(22, 25, 40, 0.86);
}

.vn-stage {
  min-height: 0;
  background-position: center;
}

.vn-scene-haze {
  background:
    linear-gradient(180deg, rgba(2, 3, 7, 0.08) 0%, rgba(2, 3, 7, 0.06) 42%, rgba(2, 3, 7, 0.62) 100%),
    linear-gradient(90deg, rgba(4, 5, 10, 0.66) 0%, transparent 20%, transparent 80%, rgba(4, 5, 10, 0.66) 100%);
}

.vn-character {
  bottom: -52%;
  width: clamp(260px, 34vw, 520px);
  height: 152%;
  opacity: 0.66;
  filter: saturate(0.82) brightness(0.66);
  transition:
    opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vn-character.speaking {
  opacity: 1;
  filter: saturate(1.04) brightness(1.04);
  transform: translate3d(-50%, 4%, 0) scale(1.055);
  animation: speaker-bloom 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vn-nameplate {
  bottom: 24%;
  background: rgba(8, 10, 18, 0.82);
}

.vn-bubble {
  width: clamp(280px, 28vw, 430px);
  padding: 20px 22px;
  border-radius: 8px;
  border-color: rgba(181, 153, 255, 0.28);
  background:
    radial-gradient(circle at 96% 8%, rgba(156, 91, 255, 0.24), transparent 18%),
    rgba(12, 14, 24, 0.82);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.vn-bubble::before {
  content: "✦";
  position: absolute;
  top: -12px;
  right: 18px;
  color: #a56bff;
  font-size: 28px;
  text-shadow: 0 0 22px rgba(124, 77, 255, 0.8);
}

.vn-bubble strong {
  color: #a988ff;
  font-size: 17px;
}

.vn-bubble-text {
  font-size: clamp(16px, 1.08vw, 20px);
  line-height: 1.72;
}

.action-line {
  margin-top: 4px;
  color: #b79cff;
  font-size: 0.92em;
}

.vn-user-bubble {
  right: 22px;
  bottom: 22px;
  border-radius: 8px;
}

.vn-narrative {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 68;
  display: grid;
  gap: 14px;
  width: min(880px, calc(100% - 80px));
  padding: 24px 32px;
  border: 1px solid rgba(244, 239, 255, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(10, 12, 20, 0.86), rgba(10, 12, 20, 0.66)),
    radial-gradient(circle at 98% 0%, rgba(241, 200, 115, 0.16), transparent 24%);
  color: #f4f0ff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
  animation: narrative-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vn-narrative strong {
  color: #b99aff;
  font-size: 20px;
}

.vn-narrative p {
  display: grid;
  gap: 8px;
  margin: 0;
  color: rgba(247, 244, 255, 0.92);
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.78;
}

.user-form {
  grid-template-columns: 88px minmax(0, 1fr) 58px;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(6, 8, 15, 0.8);
}

.user-form input {
  height: 58px;
  border-radius: 8px;
  border-color: rgba(139, 94, 255, 0.26);
  background: rgba(10, 12, 20, 0.9);
  padding: 0 18px;
  font-size: 16px;
}

.input-mode-btn {
  min-height: 58px;
  border-radius: 8px;
}

.user-form button[type="submit"] {
  width: 58px;
  min-width: 58px;
  border-radius: 8px;
  font-size: 20px;
}

.insight-panel {
  padding: 14px;
}

.insight-tabs {
  justify-content: space-around;
  margin: 0 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(8, 10, 18, 0.66);
}

.insight-tabs button {
  flex: 1;
  border-bottom-width: 3px;
}

.insight-block,
.message {
  border-radius: 8px;
  background: rgba(20, 23, 37, 0.76);
}

.insight-block h3 {
  color: #b99aff;
}

.insight-messages {
  gap: 14px;
}

.message {
  width: 100%;
  max-width: 100%;
  padding: 16px;
  background: rgba(28, 32, 49, 0.84);
}

.message.system {
  border-color: rgba(241, 200, 115, 0.26);
  background: rgba(241, 200, 115, 0.1);
}

.speaker {
  color: #a988ff;
  font-size: 13px;
}

@keyframes speaker-bloom {
  0% {
    transform: translate3d(-50%, 8%, 0) scale(0.992);
  }
  52% {
    transform: translate3d(-50%, 3.3%, 0) scale(1.07);
  }
  100% {
    transform: translate3d(-50%, 4%, 0) scale(1.055);
  }
}

@keyframes narrative-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 14px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}


@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .nav-shell {
    position: static;
    height: auto;
  }

  .workspace {
    padding: 24px 16px 110px;
  }

  .page-head,
  .head-actions,
  .selection-tray,
  .detail-actions {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    width: 100%;
  }

  .character-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }

  .detail-copy {
    padding: 28px;
  }

  .detail-copy h1 {
    font-size: 56px;
  }
}

/* V5.34.59 — the chat-log tab has exactly one vertical scroll owner.
   The outer insight pane used to scroll independently from #messages, which
   left the final card partly below the visible bottom even at scrollHeight. */
body.chat-active #chatLogPanel {
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
}

body.chat-active #chatLogPanel > .insight-messages {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding-bottom: 24px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.add-card-button,
.round-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.round-button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 8px;
}

.add-card-button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 9, 13, 0.5);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.add-card-button .symbol {
  font-size: 22px;
  line-height: 1;
}

.add-card-button.selected {
  border-color: rgba(124, 77, 255, 0.72);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 10px 24px rgba(124, 77, 255, 0.28);
}

.add-card-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.2);
}

.add-card-button.selected:hover {
  border-color: rgba(124, 77, 255, 0.82);
}

.mini-card-button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 12px;
}

.mini-card-button:hover {
  color: #fff;
  border-color: rgba(124, 77, 255, 0.48);
}

.tile-meta,
.tile-summary {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.tile-summary {
  display: -webkit-box;
  min-height: 66px;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #bfc4cf;
}

.tile-tags,
.trait-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag-chip,
.trait-list span {
  padding: 6px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
}

.builder-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  margin-top: 28px;
  padding: 18px;
}

.builder-main,
.builder-side,
.simulation-options {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--soft);
  font-weight: 800;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #0b0d13;
  color: var(--text);
  outline: 0;
}

input,
select {
  height: 44px;
  padding: 0 12px;
}

textarea {
  resize: vertical;
  padding: 12px;
  line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(124, 77, 255, 0.72);
}

.range-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

input[type="range"] {
  height: 28px;
  padding: 0;
  accent-color: var(--accent);
}

.simulation-options {
  padding: 12px;
  border: 1px solid rgba(229, 183, 107, 0.24);
  border-radius: 8px;
  background: rgba(229, 183, 107, 0.07);
}

.estimate-box {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--warm);
}

.estimate-box.warning {
  border-color: rgba(255, 116, 116, 0.42);
  color: #ffd0d0;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3, 4, 7, 0.72);
  backdrop-filter: blur(14px);
}

.start-modal {
  display: grid;
  width: min(760px, 100%);
  max-height: min(840px, calc(100vh - 44px));
  gap: 18px;
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(13, 15, 22, 0.98);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.55);
}

.modal-start-button {
  position: sticky;
  bottom: -22px;
  z-index: 3;
  margin: 0 -22px -22px;
  border-radius: 0;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.modal-head h2,
.modal-head p {
  margin: 0;
}

.modal-head h2 {
  font-size: 26px;
}

.modal-head p {
  margin-top: 8px;
  color: var(--muted);
}

.start-options {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr);
  gap: 14px;
}

.user-profile-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  /* 색을 직접 적지 않고 공용 선 색을 쓴다. 값이 바뀔 때 여기만 남지 않게. */
  border: 1px solid var(--tryva-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.compact-section h3,
.compact-section p {
  margin: 0;
}

.compact-section p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.tone-samples {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(124, 77, 255, 0.16);
  border-radius: 8px;
  background: rgba(124, 77, 255, 0.045);
}

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

.tone-sample-card {
  display: grid;
  gap: 8px;
}

.tone-sample-card span {
  color: var(--text);
  font-weight: 850;
}

.tone-sample-card small {
  color: var(--muted);
  line-height: 1.4;
}

.tone-sample-card textarea {
  min-height: 72px;
  resize: vertical;
}

.speed-label {
  display: block;
  margin-top: 6px;
  color: var(--warm);
  font-size: 13px;
}

.modal-start-button {
  justify-self: stretch;
}

.selection-tray {
  position: fixed;
  left: 300px;
  right: 40px;
  bottom: 22px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(11, 13, 19, 0.88);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(16px);
}

.selection-tray p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.empty-selection {
  color: var(--muted);
}

.selected-pill {
  min-height: 34px;
  border: 1px solid rgba(124, 77, 255, 0.42);
  border-radius: 8px;
  padding: 0 10px;
  background: rgba(124, 77, 255, 0.13);
  color: #fff;
}



.create-card {
  display: grid;
  min-height: 372px;
  place-items: center;
  padding: 20px;
  color: var(--soft);
  text-align: center;
  border-style: dashed;
}

.create-card span {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  font-size: 34px;
}

.create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
}

.create-form {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.form-section {
  display: grid;
  gap: 6px;
  padding-bottom: 4px;
}

.form-section h2,
.form-section p {
  margin: 0;
}

.form-section h2 {
  font-size: 20px;
}

.form-section p {
  color: var(--muted);
  line-height: 1.45;
}

.optional-section {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.optional-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.optional-fields > label:nth-child(-n + 2) {
  grid-column: 1 / -1;
}

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

.upload-field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

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

.mini-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.magic-result {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(124, 77, 255, 0.4);
  border-radius: 8px;
  background: rgba(124, 77, 255, 0.08);
}

.magic-result pre {
  margin: 0;
  white-space: pre-wrap;
  color: var(--soft);
  font-family: inherit;
  line-height: 1.55;
}

.magic-actions,
.chance-row,
.controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chance-row span {
  flex: 0 0 90px;
  color: var(--soft);
  font-weight: 800;
}

.chance-row strong {
  flex: 0 0 44px;
  color: var(--warm);
}

.field-help {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.preview-panel {
  position: sticky;
  top: 30px;
  align-self: start;
  padding: 22px;
}

.avatar-stage {
  display: grid;
  height: 360px;
  place-items: center;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.11), transparent 40%),
    #1b2030;
  font-size: 42px;
  color: var(--soft);
  overflow: hidden;
}

.avatar-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.avatar-upload-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.avatar-upload-button {
  width: 100%;
  justify-content: center;
}

.avatar-upload-actions small {
  color: var(--muted);
  font-size: 12px;
}

.preview-panel h2 {
  margin: 0;
  font-size: 30px;
}

.preview-panel p {
  color: var(--muted);
  line-height: 1.55;
}

.chat-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  height: calc(100vh - 84px);
  min-height: 0;
}

.chat-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(360px, 1fr) auto auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.chat-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 10, 17, 0.96);
  z-index: 2;
}

.chat-header h2 {
  margin: 0;
  font-size: 18px;
}

.chat-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.vn-stage {
  --scene-base: radial-gradient(circle at 50% 16%, rgba(124, 77, 255, 0.2), transparent 32%),
    linear-gradient(180deg, rgba(15, 18, 31, 0.96), rgba(4, 6, 11, 0.98));
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: var(--scene-base);
  isolation: isolate;
}

.vn-stage::before,
.vn-stage::after {
  content: none;
  background-image: var(--scene-bg-incoming, var(--scene-bg-active, var(--scene-base)));
  opacity: 0;
}
.vn-stage.is-bg-transitioning::after {
  content: "";
  animation: tryva-background-in var(--scene-bg-duration, 320ms) ease-out both;
}
.vn-stage.is-bg-transitioning[data-background-transition="time"]::before {
  animation: tryva-background-out var(--scene-bg-duration) ease-in both;
}
.vn-stage.is-bg-transitioning[data-background-transition="time"]::after {
  animation-name: tryva-background-time-in;
}
@keyframes tryva-background-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes tryva-background-out {
  0% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes tryva-background-time-in {
  0%, 40% { opacity: 0; }
  100% { opacity: 1; }
}

.vn-scene-haze {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(3, 5, 10, 0.88), transparent 28%, transparent 72%, rgba(3, 5, 10, 0.88)),
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.42)),
    radial-gradient(ellipse at 50% 100%, rgba(124, 77, 255, 0.2), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 96px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .vn-stage.is-bg-transitioning::before,
  .vn-stage.is-bg-transitioning::after { animation-duration: 1ms !important; }
}

/* ============================================================
   V3.28.42 — shared story asset detail + canonical related cards
   ============================================================ */
body.story-asset-detail-active .workspace {
  overflow: hidden !important;
}
body.story-asset-detail-active #storyAssetDetailView.story-asset-detail-view {
  min-height: 0 !important;
  margin: 0 !important;
}
.story-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 640px;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.story-detail-art {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(800px 520px at 50% 28%, rgba(139, 96, 224, .22), transparent 64%),
    linear-gradient(145deg, #252034, #12101a 72%);
}
.story-detail-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: storyDetailMediaIn 420ms var(--tryva-ease-out, ease-out) both;
}
.story-detail-art-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, transparent 70%, rgba(15,13,21,.48) 100%),
    linear-gradient(180deg, rgba(9,8,14,.18), transparent 32%, rgba(9,8,14,.92) 100%);
  pointer-events: none;
}
.story-detail-art-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  z-index: 0;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: rgba(229, 217, 255, .9);
}
.story-detail-art-placeholder.hidden { display: none; }
.story-detail-art-placeholder span {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  border: 1px solid rgba(190, 157, 255, .24);
  border-radius: 28px;
  background: rgba(116, 73, 194, .16);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
  font-size: 42px;
}
.story-detail-art-placeholder small {
  color: rgba(222, 211, 241, .62);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
}
.story-detail-back {
  position: absolute;
  z-index: 4;
  top: 26px;
  left: 28px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: rgba(12,10,18,.6);
  backdrop-filter: blur(14px);
  color: #eee9f7;
  cursor: pointer;
}
.story-detail-identity {
  position: absolute;
  z-index: 3;
  right: 44px;
  bottom: 46px;
  left: 44px;
  animation: storyDetailIdentityIn 380ms 70ms var(--tryva-ease-out, ease-out) both;
}
.story-detail-identity > span {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 6px 11px;
  border: 1px solid rgba(193, 160, 255, .28);
  border-radius: 9px;
  background: rgba(104, 64, 177, .26);
  color: #cfb9f9;
  font-size: 11px;
  font-weight: 800;
}
.story-detail-identity h1 {
  max-width: 820px;
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.045em;
  text-shadow: 0 4px 24px rgba(0,0,0,.55);
}
.story-detail-identity p {
  margin: 12px 0 0;
  color: rgba(232, 226, 240, .7);
  font-size: 13px;
}
.story-detail-copy {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 38px 36px 126px;
  border-left: 1px solid rgba(255,255,255,.07);
  overflow: auto;
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(112, 69, 189, .1), transparent 68%),
    rgba(15,13,21,.985);
  scrollbar-width: thin;
  scrollbar-color: rgba(138, 100, 210, .34) transparent;
  animation: storyDetailRailIn 360ms var(--tryva-ease-out, ease-out) both;
}
.story-detail-loading {
  display: grid;
  min-height: 62vh;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: #91899f;
  font-size: 13px;
}
.story-detail-loading.hidden,
.story-detail-content.hidden { display: none; }
.story-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}
.story-detail-head > div { flex: 1; min-width: 0; }
.story-detail-head span {
  color: #9172ca;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
}
.story-detail-head h2 {
  margin: 7px 0 0;
  color: #f4f1f8;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.story-detail-summary {
  margin: 0 0 24px;
  color: #c5bdcf;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
}
.story-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 9px;
  margin-bottom: 30px;
}
.story-detail-stats > div {
  display: flex;
  min-width: 0;
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  flex-direction: column;
  justify-content: center;
  background: rgba(255,255,255,.025);
}
.story-detail-stats span { color: #81798e; font-size: 10px; }
.story-detail-stats strong { margin-top: 6px; overflow: hidden; color: #e9e3f0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.story-detail-sections { display: grid; gap: 24px; }
.story-detail-section { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.075); }
.story-detail-section h3 { margin: 0 0 12px; color: #e9e4ef; font-size: 15px; }
.story-detail-section > p { margin: 0; color: #aaa2b5; font-size: 13px; line-height: 1.76; white-space: pre-wrap; }
.story-detail-section.is-compact > p { color: #c5b6df; font-weight: 700; }
.story-detail-list { display: grid; gap: 9px; }
.story-detail-list article {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.story-detail-list article > span { color: #8e70c6; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.story-detail-list article > strong { color: #ddd6e7; font-size: 13px; }
.story-detail-list article > p { margin: 0; color: #948c9f; font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; }
.story-detail-actions {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  display: flex;
  width: 640px;
  gap: 10px;
  padding: 18px 36px 22px;
  border-top: 1px solid rgba(255,255,255,.075);
  background: rgba(15,13,21,.97);
  backdrop-filter: blur(16px);
}
.story-detail-actions button { min-height: 52px; }
.story-detail-actions .ghost-button { min-width: 122px; }
.story-detail-actions .primary-button { flex: 1; }
@keyframes storyDetailMediaIn { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: scale(1); } }
@keyframes storyDetailRailIn { from { opacity: 0; transform: translate3d(12px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes storyDetailIdentityIn { from { opacity: 0; transform: translate3d(0,9px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

/* The detail rail now renders the exact Explore card component. Only its
   dimensions are compacted for the three-column recommendation slot. */
body.detail-active .character-detail-view .related-grid > .catalog-card.detail-related-catalog-card {
  width: auto !important;
  height: 154px !important;
  min-height: 154px !important;
  border-radius: 12px !important;
}
body.detail-active .character-detail-view .detail-related-catalog-card .catalog-card-copy { padding: 11px !important; }
body.detail-active .character-detail-view .detail-related-catalog-card .catalog-card-copy h3 { font-size: 13px !important; }
body.detail-active .character-detail-view .detail-related-catalog-card .catalog-card-copy > p { margin: 3px 0 0 !important; font-size: 9.5px !important; }
body.detail-active .character-detail-view .detail-related-catalog-card .catalog-card-badge { left: 9px !important; top: 9px !important; }
body.detail-active .character-detail-view .detail-related-catalog-card .catalog-card-heart { right: 8px !important; top: 8px !important; width: 27px !important; height: 27px !important; }
body.detail-active .character-detail-view .detail-related-catalog-card .catalog-card-hover { padding: 10px !important; }

@media (max-width: 1100px) {
  .story-detail-hero { grid-template-columns: minmax(0,1fr) 520px; }
  .story-detail-actions { width: 520px; }
}
@media (max-width: 900px) {
  .story-detail-hero { display: block; height: auto; min-height: 100dvh; }
  .story-detail-art { height: 46dvh; min-height: 340px; }
  .story-detail-identity { right: 22px; bottom: 26px; left: 22px; }
  .story-detail-identity h1 { font-size: 34px; }
  .story-detail-copy { min-height: 54dvh; padding: 26px 18px 122px; overflow: visible; }
  .story-detail-actions { position: fixed; width: 100%; padding: 14px 18px 18px; }
}
@media (max-width: 560px) {
  .story-detail-back { top: 18px; left: 18px; }
  .story-detail-stats { grid-template-columns: 1fr; }
  body.detail-active .character-detail-view .related-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  body.detail-active .character-detail-view .related-grid > .catalog-card.detail-related-catalog-card:last-child { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .story-detail-cover,
  .story-detail-copy,
  .story-detail-identity { animation: none !important; }
}

.vn-character {
  position: absolute;
  left: calc(var(--stage-x) * 1%);
  bottom: -50%;
  z-index: calc(10 + var(--stage-i));
  width: clamp(190px, 30vw, 390px);
  height: 150%;
  transform: translate3d(-50%, 9%, 0) scale(0.965);
  transform-origin: center bottom;
  opacity: 0.94;
  filter: saturate(0.96) brightness(0.94) blur(0);
  transition: opacity 560ms cubic-bezier(0.16, 1, 0.3, 1), transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 560ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

.vn-character.speaking {
  z-index: 32;
  opacity: 1;
  filter: saturate(1.06) brightness(1.04) blur(0);
  transform: translate3d(-50%, 6%, 0) scale(1.03);
  animation: speaker-pop 420ms cubic-bezier(0.18, 0.9, 0.22, 1.15);
}

.vn-standing {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 28px 32px rgba(0, 0, 0, 0.54));
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.vn-background-loading {
  position: absolute;
  inset: 0;
  z-index: 48;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 12, 0.42);
  backdrop-filter: blur(8px);
}

.vn-background-loading-card {
  display: grid;
  gap: 8px;
  min-width: 260px;
  max-width: min(420px, calc(100% - 32px));
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(10, 12, 18, 0.82);
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.vn-background-loading-card span {
  color: rgba(244, 243, 255, 0.74);
  font-size: 13px;
}

.vn-background-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 2px;
  border: 3px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(229, 183, 107, 0.92);
  border-radius: 50%;
  animation: bg-spin 900ms linear infinite;
}

.vn-standin {
  position: absolute;
  left: 50%;
  bottom: 40%;
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: rgba(124, 77, 255, 0.16);
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  transform: translateX(-50%);
}

.vn-nameplate {
  position: absolute;
  left: 50%;
  bottom: 25%;
  max-width: 86%;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(5, 7, 12, 0.7);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.vn-bubble,
.vn-user-bubble {
  position: absolute;
  z-index: 70;
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(12, 14, 22, 0.9);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
}

.vn-bubble {
  top: calc(var(--bubble-y) * 1%);
  left: calc(var(--bubble-x) * 1%);
  width: clamp(220px, 25vw, 360px);
  max-height: 198px;
  transform: translate(-50%, -50%);
  animation: bubble-pop 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vn-bubble::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: rgba(12, 14, 22, 0.9);
  transform: rotate(45deg);
}

.vn-bubble.tail-left::after {
  left: -8px;
  top: calc(50% - 7px);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.vn-bubble.tail-right::after {
  right: -8px;
  top: calc(50% - 7px);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.vn-bubble.tail-bottom::after {
  left: calc(50% - 7px);
  bottom: -8px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.vn-user-bubble {
  --user-bubble-transform: translateX(0);
  z-index: 76;
  right: 18px;
  bottom: 16px;
  width: min(420px, calc(100% - 36px));
  border-color: rgba(124, 77, 255, 0.4);
  background: rgba(90, 57, 205, 0.38);
  transform: var(--user-bubble-transform);
  animation: user-bubble-pop 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vn-user-bubble::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-right: 1px solid rgba(124, 77, 255, 0.4);
  border-bottom: 1px solid rgba(124, 77, 255, 0.4);
  background: rgba(90, 57, 205, 0.38);
  transform: rotate(45deg);
}

.vn-bubble strong,
.vn-user-bubble strong {
  color: var(--warm);
  font-size: 12px;
}

.vn-user-bubble strong {
  color: #e7deff;
}

.vn-bubble-text,
.vn-user-bubble > span,
.message-text {
  display: grid;
  gap: 5px;
  color: #f4f3ff;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.segment-line {
  display: block;
}

.speech-line {
  color: #f4f3ff;
}

.action-line {
  color: #b8a6ff;
  font-size: 13px;
  line-height: 1.5;
}

.typing-cursor {
  display: inline-block;
  width: 0.55em;
  color: rgba(255, 255, 255, 0.78);
  animation: cursor-blink 720ms steps(2, end) infinite;
}

@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

@keyframes bg-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes speaker-pop {
  0% {
    transform: translate3d(-50%, 9%, 0) scale(0.972);
  }
  58% {
    transform: translate3d(-50%, 5.2%, 0) scale(1.045);
  }
  100% {
    transform: translate3d(-50%, 6%, 0) scale(1.03);
  }
}

@keyframes bubble-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 10px)) scale(0.96);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.018);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes user-bubble-pop {
  0% {
    opacity: 0;
    transform: var(--user-bubble-transform) translateY(8px) scale(0.98);
  }
  60% {
    opacity: 1;
    transform: var(--user-bubble-transform) translateY(0) scale(1.012);
  }
  100% {
    opacity: 1;
    transform: var(--user-bubble-transform) translateY(0) scale(1);
  }
}

.chat-log-drawer {
  min-height: 0;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(7, 9, 15, 0.76);
}

.chat-log-drawer summary {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 18px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  user-select: none;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 190px;
  min-height: 132px;
  padding: 14px 18px 18px;
  overflow: auto;
  overscroll-behavior: contain;
  user-select: text;
}

.message {
  width: fit-content;
  max-width: min(720px, 86%);
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(30, 34, 48, 0.9);
  user-select: text;
}

.message.user {
  align-self: flex-end;
  border-color: rgba(124, 77, 255, 0.45);
  background: rgba(124, 77, 255, 0.26);
}

.message.system {
  max-width: 100%;
  border-color: rgba(229, 183, 107, 0.24);
  background: rgba(229, 183, 107, 0.08);
}

.message.npc {
  border-color: rgba(139, 109, 255, 0.28);
  background: rgba(22, 24, 40, 0.92);
}

.speaker {
  margin-bottom: 5px;
  color: var(--warm);
  font-size: 12px;
  font-weight: 900;
}

.message.user .speaker {
  color: #d7ccff;
}

.message-text {
  overflow-wrap: anywhere;
}

.user-form {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 48px;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--line-soft);
}

.input-mode-btn {
  min-height: 48px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--soft);
  font-weight: 800;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.input-mode-btn.active {
  border-color: rgba(229, 183, 107, 0.42);
  background: rgba(229, 183, 107, 0.16);
  color: #ffe7b3;
}

.user-form button[type="submit"] {
  display: grid;
  width: 48px;
  min-width: 48px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.stage-fullscreen-exit {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 80;
  display: none;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(8, 10, 17, 0.74);
  color: #fff;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

body.stage-fullscreen {
  overflow: hidden;
}

body.stage-fullscreen .app-shell {
  display: block;
  min-height: 100vh;
  background: #03050a;
}

body.stage-fullscreen .nav-shell,
body.stage-fullscreen .chat-header,
body.stage-fullscreen .insight-panel,
body.stage-fullscreen .selection-tray {
  display: none;
}

body.stage-fullscreen .workspace {
  height: 100vh;
  padding: 0;
  overflow: hidden;
}

body.stage-fullscreen .chat-view {
  display: block;
  height: 100vh;
}

body.stage-fullscreen .chat-view.hidden {
  display: none;
}

body.stage-fullscreen .chat-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: #03050a;
}

body.stage-fullscreen .vn-stage {
  min-height: 0;
  border: 0;
}

body.stage-fullscreen .vn-character {
  bottom: -54%;
  width: clamp(270px, 22vw, 468px);
  height: 150%;
  transform: translate3d(-50%, 6%, 0) scale(1);
}

body.stage-fullscreen .vn-character.speaking {
  transform: translate3d(-50%, 4%, 0) scale(1.04);
}

body.stage-fullscreen .vn-bubble {
  width: clamp(260px, 21vw, 400px);
  max-height: 214px;
}

body.stage-fullscreen .vn-narrative {
  bottom: 14%;
  width: min(980px, calc(100vw - 80px));
}

body.stage-fullscreen .vn-user-bubble {
  --user-bubble-transform: translateX(50%);
  right: 50%;
  bottom: 96px;
  width: min(640px, calc(100vw - 48px));
}

body.stage-fullscreen .user-form {
  z-index: 70;
  width: min(900px, calc(100vw - 40px));
  margin: 0 auto 24px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(8, 10, 17, 0.78);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
}

body.stage-fullscreen .stage-fullscreen-exit {
  display: inline-grid;
  place-items: center;
}

.insight-panel {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 84px);
  padding: 16px;
  overflow: auto;
}

.insight-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.insight-tabs button {
  min-height: 42px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}

.insight-tabs button.active {
  border-color: var(--accent);
  color: #fff;
}

.insight-pane {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.insight-pane.hidden {
  display: none;
}

.insight-messages {
  max-height: none;
  min-height: calc(100vh - 190px);
  padding: 0;
  overflow: auto;
}

.insight-messages .message {
  max-width: 100%;
}

.room-meta,
.memory-list {
  display: grid;
  gap: 14px;
}

.insight-block {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(9, 11, 16, 0.52);
}

.insight-block h3,
.insight-block p {
  margin: 0;
}

.insight-block h3 {
  font-size: 15px;
}

.insight-block p,
.insight-block li {
  color: var(--muted);
  line-height: 1.55;
}

.insight-block ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.event-memory {
  border-color: rgba(229, 183, 107, 0.26);
  background: rgba(229, 183, 107, 0.07);
}


@media (max-width: 860px) {
  .page-head,
  .head-actions,
  .builder-panel,
  .create-layout,
  .chat-view,
  .start-options,
  .tone-sample-grid,
  .optional-fields {
    grid-template-columns: 1fr;
  }

  .page-head,
  .head-actions {
    display: grid;
  }

  .search-box {
    width: 100%;
  }

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

  .selection-tray {
    display: grid;
  }

  .chat-panel,
  .insight-panel {
    min-height: 70vh;
  }

  .chat-panel {
    grid-template-rows: auto minmax(320px, 1fr) auto auto;
  }

  .chat-header {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .controls {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .vn-stage {
    min-height: 320px;
  }

  .vn-character {
    bottom: -30%;
    width: clamp(128px, 38vw, 210px);
    height: 128%;
    transform: translate3d(-50%, 5.5%, 0) scale(0.95);
  }

  .vn-character.speaking {
    transform: translate3d(-50%, 3%, 0) scale(1.015);
  }

  .vn-nameplate {
    bottom: 28%;
  }

  .vn-bubble {
    top: calc(var(--bubble-y) * 1%);
    left: clamp(112px, calc(var(--bubble-x) * 1%), calc(100% - 112px));
    width: min(224px, 58vw);
    max-height: 156px;
    padding: 10px 12px;
  }

  .vn-user-bubble {
    right: 12px;
    bottom: 12px;
    width: min(280px, calc(100% - 24px));
    padding: 10px 12px;
  }

  body.stage-fullscreen .vn-character {
    bottom: -54%;
    width: clamp(208px, 44vw, 325px);
    height: 150%;
    transform: translate3d(-50%, 6%, 0) scale(1);
  }

  body.stage-fullscreen .vn-character.speaking {
    transform: translate3d(-50%, 4%, 0) scale(1.03);
  }

  body.stage-fullscreen .vn-bubble {
    left: clamp(130px, calc(var(--bubble-x) * 1%), calc(100% - 130px));
    width: min(260px, 64vw);
  }

  body.stage-fullscreen .vn-user-bubble {
    bottom: 88px;
  }

  .messages {
    max-height: 170px;
  }

  .insight-messages {
    min-height: 46vh;
  }
}

/* 2026 final surface pass: apply polish to the actual rendered class names */
:root {
  --violet-1: #9d6bff;
  --violet-2: #6d39e8;
  --violet-3: #3a1b73;
  --ink-0: #03050b;
  --ink-1: #080b14;
  --ink-2: #111423;
  --glass: rgba(13, 16, 28, 0.72);
  --glass-strong: rgba(15, 18, 32, 0.92);
  --hairline: rgba(255, 255, 255, 0.105);
}

body {
  background:
    radial-gradient(circle at 82% 4%, rgba(114, 74, 255, 0.2), transparent 28%),
    radial-gradient(circle at 34% -12%, rgba(84, 63, 178, 0.2), transparent 30%),
    linear-gradient(180deg, #050713 0%, #03050b 100%);
}

.workspace {
  background:
    linear-gradient(90deg, rgba(6, 8, 15, 0.94), rgba(6, 8, 15, 0.55) 62%, rgba(46, 24, 86, 0.18)),
    radial-gradient(circle at 86% 10%, rgba(111, 63, 255, 0.18), transparent 32%);
}

.page-head h1 {
  font-size: clamp(42px, 4.6vw, 74px);
  line-height: 0.9;
}

.primary-button,
.ghost-button,
.secondary-button,
.tool-button,
.mode-tab,
.route-preset-card {
  border-radius: 12px;
}

.character-grid {
  align-items: stretch;
}

.character-tile {
  display: block;
  min-height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 15px;
  background: #0a0d18;
}

.character-tile .tile-art {
  inset: 0;
  z-index: 0;
}

.character-tile .tile-art::after {
  background:
    radial-gradient(circle at 28% 10%, rgba(163, 121, 255, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(2, 4, 10, 0.04) 0%, rgba(2, 4, 10, 0.18) 42%, rgba(2, 4, 10, 0.94) 100%);
}

.character-tile .tile-art img {
  transform: scale(1.13);
  filter: saturate(1.03) contrast(1.02);
}

.character-tile .tile-body {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  display: grid;
  gap: 7px;
  min-height: 154px;
  padding: 20px 20px 18px;
  background: linear-gradient(180deg, transparent, rgba(4, 5, 11, 0.38) 8%, rgba(4, 5, 11, 0.92) 78%);
}

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

.tile-title h3 {
  margin: 0;
  font-size: clamp(31px, 2.2vw, 42px);
  letter-spacing: 0;
}

.tile-actions {
  position: absolute;
  top: 15px;
  right: 15px;
}

.tile-heart {
  right: 62px;
}

.add-card-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}

.add-card-button.selected {
  border-color: rgba(196, 165, 255, 0.58);
  background: linear-gradient(135deg, var(--violet-1), var(--violet-2));
  box-shadow: 0 12px 26px rgba(111, 57, 232, 0.36);
}

.tile-summary {
  display: -webkit-box;
  min-height: 44px;
  margin: 0;
  overflow: hidden;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tile-mini-stats {
  display: none;
}

.selection-tray {
  border-color: rgba(157, 107, 255, 0.24);
}

.route-selected-panel,
.route-preset-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(19, 22, 38, 0.92), rgba(10, 12, 22, 0.74));
}

.route-selected-panel {
  grid-template-columns: minmax(160px, 0.28fr) minmax(0, 1fr);
  align-items: center;
}

.route-selected-panel strong,
.route-preset-panel h3 {
  color: #fff;
}

.route-selected-panel p,
.route-preset-panel p {
  margin: 4px 0 0;
  color: rgba(216, 217, 231, 0.68);
}

.route-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.route-character-chip {
  display: flex;
  min-width: 168px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(157, 107, 255, 0.25);
  border-radius: 999px;
  background: rgba(116, 71, 255, 0.11);
}

.route-character-chip img,
.route-character-chip > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.route-character-chip strong,
.route-character-chip small {
  display: block;
}

.route-character-chip small {
  margin-top: 2px;
  color: rgba(221, 222, 238, 0.64);
}

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

.route-preset-card {
  display: grid;
  gap: 6px;
  min-height: 108px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  text-align: left;
}

.route-preset-card span {
  color: rgba(218, 219, 235, 0.66);
  line-height: 1.45;
}

.route-preset-card.active,
.route-preset-card:hover {
  border-color: rgba(166, 116, 255, 0.62);
  background: linear-gradient(135deg, rgba(111, 57, 232, 0.28), rgba(255, 255, 255, 0.04));
  box-shadow: 0 0 24px rgba(111, 57, 232, 0.12);
}

.modal-backdrop {
  padding: 32px;
  backdrop-filter: blur(18px);
}

.start-modal {
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(135, 85, 255, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(15, 18, 32, 0.98), rgba(6, 8, 15, 0.96));
}

.start-modal label textarea,
.start-modal label input,
.start-modal label select {
  border-radius: 12px;
}

.modal-start-button {
  min-height: 62px;
  font-size: 18px;
}



.library-view .create-card {
  min-height: 360px;
  border-radius: 16px;
  border-color: rgba(157, 107, 255, 0.34);
  background: linear-gradient(145deg, rgba(112, 62, 255, 0.12), rgba(10, 12, 22, 0.76));
}

.create-view .page-head,
.library-view .page-head {
  margin-bottom: 26px;
}

.create-layout {
  align-items: start;
}

.create-form,
.preview-panel {
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(15, 18, 32, 0.88), rgba(8, 10, 18, 0.76));
}

.create-form {
  padding: 22px;
}

.create-form label input,
.create-form label textarea,
.create-form label select {
  border-radius: 12px;
}

.preview-panel {
  position: sticky;
  top: 26px;
  overflow: hidden;
  min-height: 620px;
}

.avatar-stage {
  min-height: 360px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 20%, rgba(162, 121, 255, 0.28), transparent 44%),
    linear-gradient(180deg, rgba(31, 35, 58, 0.78), rgba(9, 10, 18, 0.98));
}

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

.avatar-upload-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.preview-panel h2 {
  font-size: 44px;
}

.chat-header .controls .tool-button {
  min-height: 48px;
  padding: 0 18px;
}

.vn-stage {
  background-color: #060813;
}

.speech-line,
.action-line {
  display: block;
}

.speech-line + .speech-line,
.action-line + .speech-line,
.speech-line + .action-line {
  margin-top: 8px;
}

.action-line {
  color: #b99bff;
  font-size: 0.92em;
  font-style: normal;
}

.action-line::before {
  content: "✦ ";
  color: #8d69ff;
}

.messages .action-line {
  margin-top: 4px;
}


@media (max-width: 900px) {
  .route-selected-panel,
  .route-preset-grid {
    grid-template-columns: 1fr;
  }

  .library-view .library-grid,
  .character-grid {
    grid-template-columns: 1fr;
  }
}

/* 2026 design polish pass: stronger VN platform composition */
.character-grid {
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 18px;
}

.character-tile {
  min-height: 344px;
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(8, 10, 18, 0.92)),
    rgba(11, 13, 24, 0.82);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
}

.character-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 18% 0%, rgba(133, 86, 255, 0.35), transparent 42%),
    linear-gradient(180deg, rgba(2, 4, 10, 0.06) 0%, rgba(2, 4, 10, 0.18) 38%, rgba(2, 4, 10, 0.88) 100%);
  pointer-events: none;
}

.character-tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 58%;
  background: linear-gradient(180deg, transparent, rgba(5, 6, 12, 0.94) 70%, #05070d 100%);
  pointer-events: none;
}

.tile-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  opacity: 0.9;
}

.tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.08);
  filter: saturate(0.98) contrast(1.02);
}

.tile-content {
  position: absolute;
  inset: auto 18px 18px;
  z-index: 3;
  display: grid;
  gap: 8px;
  min-height: 132px;
  justify-content: stretch;
  align-content: end;
}

.tile-name {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 2.1vw, 40px);
  line-height: 0.94;
  letter-spacing: 0;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.46);
}

.tile-meta {
  color: rgba(245, 246, 255, 0.82);
  font-size: 15px;
  font-weight: 750;
}

.tile-description {
  display: -webkit-box;
  max-width: 92%;
  margin: 0;
  overflow: hidden;
  color: rgba(239, 236, 255, 0.82);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tile-tags {
  margin-top: 4px;
}

.tile-tags span {
  border-radius: 7px;
  background: rgba(117, 65, 242, 0.32);
  color: #eaddff;
  font-size: 12px;
}

.tile-mini-stats {
  margin-top: 4px;
  color: rgba(229, 223, 255, 0.74);
}

.tile-badge {
  z-index: 4;
  top: 16px;
  left: 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff5d93, #8d5cff);
  color: #fff;
}

.tile-heart,
.select-toggle {
  z-index: 4;
  background: rgba(8, 10, 18, 0.44);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
}

.select-toggle {
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #fff;
  font-size: 22px;
}

.character-tile.selected .select-toggle {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 12px 28px rgba(119, 71, 255, 0.34);
}

.character-tile.selected {
  border-color: rgba(167, 104, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(142, 94, 255, 0.5), 0 0 34px rgba(129, 75, 255, 0.36), 0 24px 60px rgba(0, 0, 0, 0.42);
}

.selection-tray {
  min-height: 126px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(23, 26, 42, 0.9), rgba(9, 10, 20, 0.92)),
    rgba(8, 10, 18, 0.86);
}

.selection-tray strong {
  display: block;
  margin-bottom: 5px;
  font-size: 18px;
}

.selected-list {
  min-width: 42%;
}

.empty-slot {
  display: grid;
  width: 160px;
  height: 74px;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  color: rgba(255,255,255,0.52);
  font-size: 32px;
}

.selected-pill {
  min-height: 46px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
}

.selected-pill img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.selection-tray .primary-button {
  min-width: 280px;
  min-height: 58px;
  border-radius: 14px;
  font-size: 17px;
}

.detail-hero {
  min-height: calc(100vh - 104px);
  padding: clamp(42px, 5vw, 76px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(4, 6, 13, 0.98) 0%, rgba(5, 7, 14, 0.95) 35%, rgba(7, 8, 16, 0.34) 58%, rgba(7, 8, 16, 0.08) 100%),
    radial-gradient(circle at 80% 18%, rgba(160, 103, 255, 0.18), transparent 38%),
    rgba(5, 6, 12, 0.88);
}

.detail-copy {
  max-width: 560px;
  z-index: 2;
}

.detail-copy h1 {
  font-size: clamp(56px, 6vw, 100px);
  line-height: 0.92;
}

.detail-copy blockquote {
  margin-top: 24px;
  color: #d8b6ff;
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 850;
}

.detail-art {
  position: absolute;
  inset: 0 0 0 38%;
  min-height: 100%;
  border: 0;
  background:
    linear-gradient(90deg, rgba(5, 6, 12, 0.94), transparent 35%),
    radial-gradient(circle at 70% 34%, rgba(151, 106, 255, 0.14), transparent 45%);
}

.detail-art img {
  position: absolute;
  right: 3%;
  bottom: -4%;
  width: min(48vw, 720px);
  height: 108%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.52));
}

.detail-quote-card {
  right: 13%;
  bottom: 12%;
  z-index: 2;
  width: min(360px, 32vw);
}

.related-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
}

.related-grid .character-tile {
  min-height: 210px;
}

.related-grid .tile-content {
  min-height: 86px;
}

.related-grid .tile-name {
  font-size: 24px;
}

.chat-view {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 24px;
}

.chat-panel {
  border-radius: 18px;
  background: rgba(5, 7, 13, 0.84);
}

.chat-header {
  min-height: 88px;
  padding: 20px 22px;
  background: linear-gradient(180deg, rgba(12, 15, 26, 0.98), rgba(8, 10, 17, 0.9));
}

.vn-stage {
  min-height: min(650px, calc(100vh - 246px));
}

.vn-character {
  opacity: 0.9;
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.18, 1), opacity 0.45s ease, filter 0.45s ease;
}

.vn-character.speaking {
  opacity: 1;
  animation: speaker-bloom 0.52s cubic-bezier(0.2, 0.9, 0.18, 1);
}

.vn-bubble {
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(19, 21, 34, 0.96), rgba(9, 10, 18, 0.9));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(142, 94, 255, 0.13);
}

.vn-bubble.speaking {
  animation: bubble-pop 0.34s cubic-bezier(0.18, 0.9, 0.2, 1);
}

.vn-narrative {
  left: 50%;
  bottom: 74px;
  width: min(820px, calc(100% - 72px));
  padding: 26px 34px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(14, 16, 28, 0.78), rgba(7, 8, 14, 0.7));
  box-shadow: 0 18px 48px rgba(0,0,0,0.36), inset 0 0 0 1px rgba(255,255,255,0.14);
  backdrop-filter: blur(18px);
}

.vn-narrative strong {
  color: #b68bff;
  font-size: 22px;
}

.vn-narrative p {
  margin-top: 12px;
  color: rgba(255,255,255,0.88);
  font-size: 20px;
  line-height: 1.7;
}

.user-form {
  margin: 0 18px 18px;
  border-color: rgba(132, 82, 255, 0.48);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(132, 82, 255, 0.12), 0 16px 46px rgba(0,0,0,0.34);
}

.insight-panel {
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: rgba(7, 9, 17, 0.82);
}

.message {
  border-radius: 14px;
  background: rgba(22, 25, 40, 0.72);
}

@keyframes bubble-pop {
  0% { opacity: 0; transform: translate3d(var(--bubble-pop-x, 0), 10px, 0) scale(0.96); }
  100% { opacity: 1; transform: translate3d(var(--bubble-pop-x, 0), 0, 0) scale(1); }
}


@media (max-width: 860px) {
  .character-grid {
    grid-template-columns: 1fr;
  }

  .character-tile {
    min-height: 320px;
  }

  .selection-tray .primary-button {
    min-width: 0;
    width: 100%;
  }

  .empty-slot {
    width: 100%;
  }

  .detail-hero {
    min-height: auto;
    padding: 28px;
  }

  .detail-art {
    position: relative;
    inset: auto;
    min-height: 420px;
  }

  .detail-art img {
    right: 50%;
    width: min(92vw, 440px);
    transform: translateX(50%);
  }
}

/* 2026 interaction fix: the selection tray must never cover character cards. */
.play-view {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 48px);
}

.play-view .character-section {
  position: relative;
  z-index: 1;
}

.play-view .selection-tray {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2;
  width: 100%;
}

.add-card-button.selected {
  border-color: rgba(197, 163, 255, 0.72);
  background:
    linear-gradient(135deg, rgba(151, 83, 255, 0.98), rgba(93, 64, 245, 0.98)),
    rgba(117, 65, 242, 0.72);
  color: #fff;
  box-shadow: 0 14px 34px rgba(126, 78, 255, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* 2026 detail polish: darker, more cinematic proportions from the mockups. */
body {
  background:
    radial-gradient(circle at 86% 0%, rgba(89, 44, 190, 0.28), transparent 32%),
    radial-gradient(circle at 18% 18%, rgba(24, 32, 58, 0.38), transparent 34%),
    #02040a;
}

.workspace {
  background:
    radial-gradient(circle at 84% 4%, rgba(82, 43, 177, 0.22), transparent 30%),
    linear-gradient(180deg, #03050b 0%, #060713 56%, #03040a 100%);
}

.character-grid {
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 20px;
}

.character-tile {
  min-height: 352px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(5, 6, 13, 0.98)),
    #070912;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.character-tile:hover {
  z-index: 5;
  transform: translateY(-7px) scale(1.026);
  border-color: rgba(174, 110, 255, 0.72);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.58), 0 0 44px rgba(124, 77, 255, 0.22);
}

.character-tile .tile-art {
  background:
    radial-gradient(circle at 48% 24%, rgba(203, 183, 255, 0.35), transparent 34%),
    linear-gradient(135deg, rgba(53, 57, 82, 0.68), rgba(6, 7, 15, 0.98));
}

.character-tile .tile-art img {
  object-fit: cover;
  object-position: center 42%;
  transform: scale(0.92);
  filter: saturate(0.98) contrast(1.04) brightness(0.9);
  transition: transform 220ms ease, filter 220ms ease;
}

.character-tile:hover .tile-art img {
  transform: scale(0.98);
  filter: saturate(1.05) contrast(1.05) brightness(0.98);
}

.character-tile::before {
  background:
    radial-gradient(circle at 17% 0%, rgba(132, 83, 255, 0.24), transparent 44%),
    linear-gradient(180deg, rgba(1, 3, 9, 0.08) 0%, rgba(1, 3, 9, 0.22) 36%, rgba(1, 3, 9, 0.9) 100%);
}

.character-tile::after {
  height: 64%;
  background: linear-gradient(180deg, transparent, rgba(3, 4, 10, 0.78) 48%, #03040a 100%);
}

.tile-body {
  padding: 19px 20px 18px;
}

.detail-selection-strip {
  position: sticky;
  top: 18px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(143, 94, 255, 0.26);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(17, 20, 36, 0.84), rgba(7, 8, 17, 0.9));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

.detail-selection-strip strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
}

.detail-selection-strip p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.detail-selected-list {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
}

.detail-selected-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: max-content;
  padding: 6px 9px 6px 6px;
  border: 1px solid rgba(151, 100, 255, 0.36);
  border-radius: 999px;
  color: #fff;
  background: rgba(113, 67, 230, 0.22);
}

.detail-selected-chip img,
.detail-selected-chip > span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.detail-selected-chip strong {
  font-size: 13px;
}

.detail-selected-chip em {
  color: #cfc4ff;
  font-style: normal;
}

.detail-empty-slot {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 22px;
}

.detail-selection-strip .primary-button {
  min-height: 42px;
  min-width: 150px;
  border-radius: 12px;
}

.detail-hero {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(3, 4, 10, 0.99) 0%, rgba(3, 4, 10, 0.92) 37%, rgba(10, 8, 23, 0.72) 55%, rgba(38, 21, 80, 0.3) 100%),
    #03050b;
}

.detail-art {
  inset: 0 0 0 36%;
}

.detail-art::before {
  background:
    linear-gradient(90deg, rgba(3, 4, 10, 0.78) 0%, rgba(3, 4, 10, 0.18) 38%, rgba(3, 4, 10, 0.08) 100%),
    radial-gradient(circle at 66% 38%, rgba(161, 104, 255, 0.18), transparent 40%);
}

.detail-art img {
  right: -1%;
  bottom: -14%;
  width: min(57vw, 860px);
  height: 126%;
  object-fit: cover;
  object-position: center 18%;
  transform: none;
  filter: saturate(1.02) contrast(1.03) drop-shadow(0 28px 70px rgba(0, 0, 0, 0.58));
}

.detail-quote-card {
  right: min(10vw, 180px);
  bottom: 14%;
}


@media (max-width: 860px) {
  .character-tile .tile-art img {
    transform: scale(0.96);
  }

  .character-tile:hover .tile-art img {
    transform: scale(1.02);
  }

  .detail-selection-strip {
    position: relative;
    top: auto;
  }

  .detail-art img {
    right: 50%;
    bottom: -18%;
    width: min(110vw, 560px);
    height: 122%;
    transform: translateX(50%);
    object-position: center 16%;
  }
}

/* 2026-06-08 v4: card/detail image ratios tuned to the preferred mockups. */
.workspace {
  background:
    radial-gradient(circle at 82% 0%, rgba(92, 52, 205, 0.2), transparent 28%),
    linear-gradient(180deg, #02030a 0%, #050611 58%, #02030a 100%) !important;
}

.play-view .page-head h1 {
  font-size: clamp(56px, 5.6vw, 82px);
  line-height: 0.92;
}

.character-grid {
  grid-template-columns: repeat(4, minmax(275px, 1fr)) !important;
  gap: 22px !important;
}

.character-tile {
  min-height: 368px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(4, 5, 12, 0.98)),
    #050711 !important;
}

.character-tile:hover {
  transform: translateY(-9px) scale(1.035) !important;
  box-shadow:
    0 38px 86px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(154, 99, 255, 0.42),
    0 0 48px rgba(126, 78, 255, 0.24) !important;
}

.character-tile .tile-art {
  display: grid !important;
  place-items: center !important;
  padding: 14px 14px 84px !important;
  background:
    radial-gradient(circle at 50% 33%, rgba(255, 255, 255, 0.1), transparent 34%),
    linear-gradient(145deg, rgba(30, 32, 43, 0.78), rgba(5, 6, 13, 0.98)) !important;
}

.character-tile .tile-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(0.98) !important;
  filter: saturate(1.02) contrast(1.04) brightness(0.84) !important;
}

.character-tile:hover .tile-art img {
  transform: scale(1.055) !important;
  filter: saturate(1.08) contrast(1.05) brightness(0.96) !important;
}

.character-tile::before {
  background:
    linear-gradient(180deg, rgba(1, 2, 8, 0.02) 0%, rgba(1, 2, 8, 0.14) 42%, rgba(1, 2, 8, 0.88) 100%) !important;
}

.character-tile::after {
  height: 50% !important;
  background: linear-gradient(180deg, transparent 0%, rgba(3, 4, 10, 0.76) 54%, #02030a 100%) !important;
}

.tile-body {
  padding: 0 20px 18px !important;
}

.tile-title h3 {
  font-size: clamp(31px, 2.4vw, 44px) !important;
  letter-spacing: 0 !important;
}

.selection-tray {
  min-height: 112px !important;
}

.selected-list {
  min-width: 0 !important;
}

.empty-slot {
  width: 132px !important;
  height: 62px !important;
}

.selected-pill + .empty-slot {
  opacity: 0.9;
}

.character-detail-view {
  padding-bottom: 44px;
}

.detail-selection-strip {
  max-width: 980px;
  margin-bottom: 18px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
}

.detail-hero {
  min-height: min(760px, calc(100vh - 124px)) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(90deg, #02030a 0%, rgba(2, 3, 10, 0.98) 31%, rgba(4, 5, 13, 0.78) 48%, rgba(53, 29, 105, 0.28) 100%),
    #02030a !important;
}

.detail-copy {
  z-index: 5;
  max-width: 610px;
}

.detail-art {
  position: absolute !important;
  inset: 0 0 0 42% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 66% 35%, rgba(149, 101, 255, 0.24), transparent 38%),
    linear-gradient(90deg, rgba(2, 3, 10, 0.7), rgba(38, 22, 82, 0.28)) !important;
}

.detail-art::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(2, 3, 10, 0.9) 0%, rgba(2, 3, 10, 0.38) 28%, rgba(2, 3, 10, 0.03) 74%),
    radial-gradient(circle at 66% 38%, rgba(177, 118, 255, 0.18), transparent 42%) !important;
}

.detail-art img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 19% !important;
  transform: scale(1.08) translateX(2%) !important;
  filter:
    saturate(1.04)
    contrast(1.04)
    brightness(0.92)
    drop-shadow(0 28px 72px rgba(0, 0, 0, 0.62)) !important;
}

.detail-quote-card {
  right: 11% !important;
  bottom: 11% !important;
  z-index: 6 !important;
}

@media (max-width: 1420px) {
  .character-grid {
    grid-template-columns: repeat(2, minmax(275px, 1fr)) !important;
  }
}


/* 2026-06-09: final visual fit pass for mockup parity. */
.workspace {
  background:
    radial-gradient(circle at 86% 0%, rgba(66, 34, 153, 0.16), transparent 28%),
    linear-gradient(180deg, #010209 0%, #03040c 58%, #010209 100%) !important;
}

.character-grid {
  grid-template-columns: repeat(4, minmax(300px, 1fr)) !important;
  gap: 24px !important;
}

.character-tile {
  min-height: 346px !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(2, 3, 10, 0.98)),
    #050611 !important;
}

.character-tile:hover {
  transform: translateY(-8px) scale(1.025) !important;
}

.character-tile .tile-art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    linear-gradient(145deg, rgba(19, 22, 34, 0.92), rgba(3, 4, 10, 0.98)) !important;
}

.character-tile .tile-art img {
  position: absolute !important;
  left: 50% !important;
  top: 46% !important;
  width: 116% !important;
  height: 116% !important;
  object-fit: cover !important;
  object-position: center 28% !important;
  transform: translate(-50%, -50%) scale(1) !important;
  filter: saturate(1.02) contrast(1.04) brightness(0.8) !important;
}

.character-tile:hover .tile-art img {
  transform: translate(-50%, -50%) scale(1.06) !important;
  filter: saturate(1.05) contrast(1.04) brightness(0.92) !important;
}

.character-tile::before {
  background:
    linear-gradient(180deg, rgba(2, 3, 10, 0) 0%, rgba(2, 3, 10, 0.12) 34%, rgba(2, 3, 10, 0.9) 100%) !important;
}

.character-tile::after {
  height: 52% !important;
  background:
    linear-gradient(180deg, transparent 0%, rgba(2, 3, 10, 0.7) 58%, #02030a 100%) !important;
}

.tile-body {
  padding: 0 22px 18px !important;
}

.detail-hero {
  min-height: min(760px, calc(100vh - 128px)) !important;
  background:
    linear-gradient(90deg, #02030a 0%, rgba(2, 3, 10, 0.99) 30%, rgba(2, 3, 10, 0.86) 46%, rgba(2, 3, 10, 0.18) 76%, rgba(2, 3, 10, 0.08) 100%),
    #02030a !important;
}

.detail-art {
  inset: 0 0 0 43% !important;
  background: linear-gradient(90deg, rgba(2, 3, 10, 0.2), rgba(8, 9, 16, 0.04)) !important;
}

.detail-art::before {
  background:
    linear-gradient(90deg, rgba(2, 3, 10, 0.96) 0%, rgba(2, 3, 10, 0.52) 24%, rgba(2, 3, 10, 0.08) 66%, rgba(2, 3, 10, 0.02) 100%) !important;
}

.detail-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 22% !important;
  transform: scale(1.22) translateX(5%) !important;
  filter: saturate(1.02) contrast(1.03) brightness(0.9) drop-shadow(0 28px 72px rgba(0, 0, 0, 0.62)) !important;
}

.detail-quote-card {
  right: 12% !important;
  bottom: 10% !important;
}

@media (max-width: 1420px) {
  .character-grid {
    grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
  }
}


/* 2026-06-09: detail hero mockup pass. Image becomes the right-side scene, not a separate panel. */
.detail-hero {
  display: block !important;
  min-height: min(790px, calc(100vh - 116px)) !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #02030a !important;
}

.detail-copy {
  position: relative !important;
  z-index: 5 !important;
  width: min(44%, 640px) !important;
  min-height: min(790px, calc(100vh - 116px)) !important;
  align-content: center !important;
  padding: clamp(48px, 5vw, 86px) clamp(34px, 4vw, 64px) !important;
}

.detail-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background: #02030a !important;
}

.detail-art img {
  position: absolute !important;
  top: 0 !important;
  right: -2% !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 1 !important;
  width: 66% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 13% !important;
  transform: scale(1.16) !important;
  transform-origin: center top !important;
  filter: saturate(1.03) contrast(1.04) brightness(0.88) drop-shadow(0 28px 76px rgba(0, 0, 0, 0.64)) !important;
}

.detail-art::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background:
    linear-gradient(90deg, #02030a 0%, rgba(2, 3, 10, 0.98) 25%, rgba(2, 3, 10, 0.76) 42%, rgba(2, 3, 10, 0.24) 62%, rgba(2, 3, 10, 0.05) 82%, rgba(2, 3, 10, 0.18) 100%),
    linear-gradient(180deg, rgba(2, 3, 10, 0.2) 0%, transparent 34%, rgba(2, 3, 10, 0.58) 100%) !important;
  pointer-events: none !important;
}

.detail-art::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  background:
    radial-gradient(circle at 73% 22%, rgba(255, 255, 255, 0.08), transparent 28%),
    radial-gradient(circle at 73% 78%, rgba(0, 0, 0, 0.32), transparent 42%) !important;
  pointer-events: none !important;
}

.detail-quote-card {
  z-index: 6 !important;
  right: min(13vw, 210px) !important;
  bottom: 10% !important;
}


@media (max-width: 860px) {
  .detail-hero {
    display: grid !important;
  }

  .detail-copy {
    width: 100% !important;
    min-height: auto !important;
  }

  .detail-art {
    position: relative !important;
    min-height: 560px !important;
  }

  .detail-art img {
    right: 50% !important;
    width: min(118vw, 680px) !important;
    transform: translateX(50%) scale(1.08) !important;
    object-position: center 14% !important;
  }
}

/* 2026-06-09: design-refresh-v8. Strong visual pass matching the darker Tryva mockups. */
:root {
  --v8-bg: #03040a;
  --v8-panel: rgba(13, 15, 26, 0.76);
  --v8-line: rgba(151, 126, 255, 0.18);
  --v8-line-strong: rgba(154, 95, 255, 0.5);
  --v8-purple: #7c3ff2;
  --v8-purple-2: #9b5cff;
  --v8-text: #f6f3ff;
  --v8-muted: rgba(224, 222, 238, 0.66);
}

body {
  background:
    radial-gradient(circle at 88% 0%, rgba(92, 42, 181, 0.18), transparent 34%),
    radial-gradient(circle at 14% 4%, rgba(95, 63, 180, 0.12), transparent 30%),
    linear-gradient(180deg, #03040a 0%, #02030a 100%) !important;
  color: var(--v8-text) !important;
}

.app-shell {
  background: transparent !important;
}

.sidebar {
  background:
    radial-gradient(circle at 0% 0%, rgba(123, 67, 255, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(18, 13, 38, 0.96), rgba(3, 4, 10, 0.96)) !important;
  border-right-color: rgba(162, 135, 255, 0.16) !important;
}

.play-view {
  min-height: calc(100vh - 34px) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 48px 56px 36px !important;
  gap: 28px !important;
  background:
    radial-gradient(circle at 86% 14%, rgba(91, 45, 181, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(3, 4, 10, 0.86), rgba(3, 4, 10, 0.98)) !important;
}

.page-head {
  align-items: start !important;
  gap: 24px !important;
  margin: 0 0 8px !important;
}

.play-view .page-head h1 {
  margin: 0 0 12px !important;
  font-size: clamp(46px, 4.2vw, 64px) !important;
  line-height: 0.96 !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.play-view .page-head p {
  margin: 0 !important;
  color: rgba(236, 232, 255, 0.8) !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
}

.head-actions {
  gap: 16px !important;
}

.search-box,
.head-actions .primary-button,
.outline-button,
.primary-button {
  border-radius: 12px !important;
}

.search-box {
  min-height: 58px !important;
  background: rgba(8, 9, 18, 0.8) !important;
  border: 1px solid rgba(172, 154, 255, 0.2) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04) !important;
}

.character-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.character-tile {
  min-height: 388px !important;
  border-radius: 17px !important;
  background: rgba(9, 10, 18, 0.82) !important;
  border: 1px solid rgba(185, 174, 255, 0.18) !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease, background 240ms ease !important;
}

.character-tile:hover {
  transform: translateY(-9px) scale(1.028) !important;
  border-color: rgba(167, 108, 255, 0.78) !important;
  box-shadow:
    0 0 0 1px rgba(74, 189, 255, 0.24),
    0 0 42px rgba(128, 72, 255, 0.38),
    0 28px 78px rgba(0, 0, 0, 0.56) !important;
}

.character-tile .tile-art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(218, 208, 255, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(2, 3, 10, 0.92)) !important;
}

.character-tile .tile-art img {
  position: absolute !important;
  left: 50% !important;
  top: 9px !important;
  width: 104% !important;
  height: 76% !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: translateX(-50%) scale(1) !important;
  opacity: 0.92 !important;
  filter: saturate(1.04) contrast(1.04) brightness(0.9) !important;
  transition: transform 300ms ease, filter 300ms ease, opacity 300ms ease !important;
}

.character-tile:hover .tile-art img {
  transform: translateX(-50%) scale(1.075) !important;
  opacity: 1 !important;
  filter: saturate(1.08) contrast(1.05) brightness(0.96) !important;
}

.character-tile::before {
  background:
    linear-gradient(180deg, rgba(2, 3, 10, 0.02) 0%, rgba(2, 3, 10, 0.08) 42%, rgba(2, 3, 10, 0.9) 100%) !important;
  opacity: 1 !important;
}

.character-tile::after {
  height: 54% !important;
  background:
    linear-gradient(180deg, transparent 0%, rgba(3, 4, 10, 0.62) 42%, rgba(3, 4, 10, 0.98) 100%) !important;
}

.character-tile .tile-body {
  inset: auto 0 0 !important;
  padding: 0 24px 24px !important;
  z-index: 4 !important;
}

.tile-title h3 {
  font-size: clamp(32px, 2.25vw, 42px) !important;
  line-height: 1 !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

.tile-title span,
.tile-body p {
  color: rgba(239, 236, 255, 0.82) !important;
}

.tile-body p {
  min-height: 48px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.tag-list span {
  border-radius: 7px !important;
  background: rgba(103, 52, 208, 0.58) !important;
  border-color: rgba(178, 138, 255, 0.24) !important;
  color: rgba(245, 239, 255, 0.9) !important;
}

.selection-tray,
.play-view .selection-tray {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  width: 100% !important;
  margin: auto 0 0 !important;
  min-height: 132px !important;
  border-radius: 18px !important;
  padding: 24px 28px !important;
  background:
    linear-gradient(135deg, rgba(19, 21, 36, 0.88), rgba(9, 10, 18, 0.74)),
    radial-gradient(circle at 92% 100%, rgba(103, 57, 218, 0.18), transparent 32%) !important;
  border: 1px solid rgba(148, 104, 255, 0.36) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42) !important;
}

.selection-tray .selected-list {
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)) !important;
  max-width: 540px !important;
}

.selection-tray .empty-slot {
  min-height: 66px !important;
  border-radius: 13px !important;
}

.selection-tray .primary-button {
  min-height: 60px !important;
  min-width: 300px !important;
  border-radius: 13px !important;
  font-size: 18px !important;
  font-weight: 760 !important;
}

.detail-selection-strip {
  display: none !important;
}

.detail-view {
  padding: 42px 44px 42px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(87, 43, 169, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(3, 4, 10, 0.98), rgba(2, 3, 10, 1)) !important;
}

.detail-hero {
  position: relative !important;
  display: block !important;
  min-height: min(760px, calc(100vh - 112px)) !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: #02030a !important;
  border: 1px solid rgba(178, 160, 255, 0.16) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 28px 90px rgba(0, 0, 0, 0.55) !important;
}

.detail-copy {
  position: relative !important;
  z-index: 6 !important;
  width: min(43%, 620px) !important;
  min-height: min(760px, calc(100vh - 112px)) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(46px, 5vw, 86px) clamp(38px, 4vw, 70px) !important;
}

.detail-copy h1 {
  font-size: clamp(68px, 6vw, 104px) !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
  font-weight: 780 !important;
  margin: 16px 0 16px !important;
}

.detail-meta {
  font-size: 21px !important;
  color: rgba(244, 241, 255, 0.8) !important;
}

.detail-quote {
  margin: 30px 0 18px !important;
  color: #d4a7ff !important;
  font-size: clamp(24px, 2.4vw, 36px) !important;
  line-height: 1.32 !important;
  font-weight: 760 !important;
}

.detail-summary {
  max-width: 620px !important;
  color: rgba(240, 237, 255, 0.84) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

.detail-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  background: #02030a !important;
}

.detail-art img {
  position: absolute !important;
  right: -1.5% !important;
  top: -5% !important;
  width: 64% !important;
  height: 108% !important;
  object-fit: cover !important;
  object-position: center 18% !important;
  transform: scale(1.04) !important;
  transform-origin: center top !important;
  opacity: 0.92 !important;
  filter: saturate(1.03) contrast(1.05) brightness(0.88) !important;
}

.detail-art::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  background:
    linear-gradient(90deg, #02030a 0%, rgba(2, 3, 10, 0.98) 31%, rgba(2, 3, 10, 0.72) 45%, rgba(2, 3, 10, 0.18) 61%, rgba(2, 3, 10, 0.02) 78%, rgba(2, 3, 10, 0.28) 100%),
    linear-gradient(180deg, rgba(2, 3, 10, 0.18) 0%, rgba(2, 3, 10, 0.04) 48%, rgba(2, 3, 10, 0.54) 100%) !important;
  pointer-events: none !important;
}

.detail-art::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 255, 255, 0.08), transparent 26%),
    radial-gradient(circle at 74% 80%, rgba(0, 0, 0, 0.28), transparent 42%) !important;
  pointer-events: none !important;
}

.detail-quote-card {
  position: absolute !important;
  z-index: 7 !important;
  right: min(12vw, 210px) !important;
  bottom: clamp(30px, 7vw, 92px) !important;
  width: min(360px, 34vw) !important;
  border-radius: 16px !important;
  background: rgba(7, 8, 16, 0.78) !important;
  border: 1px solid rgba(205, 190, 255, 0.16) !important;
  backdrop-filter: blur(18px) !important;
}

.mode-bar,
.route-preset-panel,
.route-selected-panel,
#simulationOptions {
  display: none !important;
}

.start-modal::before {
  content: none !important;
  display: none !important;
}

.start-modal {
  width: min(720px, calc(100vw - 42px)) !important;
  background: rgba(9, 10, 18, 0.94) !important;
  border-color: rgba(164, 113, 255, 0.28) !important;
}

.room-input-locked #userInput {
  cursor: wait !important;
  background: rgba(18, 18, 26, 0.72) !important;
}

.room-input-locked #submitBtn,
.room-input-locked #stepBtn,
.room-input-locked #autoBtn {
  opacity: 0.48 !important;
  pointer-events: none !important;
}

/* 2026-06-09 final visual pass: match the reference direction, overriding older experiments. */
:root {
  --surface-0: #03040a;
  --surface-1: #070812;
  --surface-2: #0b0d17;
  --surface-3: #101322;
  --line-soft: rgba(255, 255, 255, 0.09);
  --text-strong: #f7f4ff;
  --text-soft: #d8d4e8;
  --text-dim: #9b96ad;
  --violet-a: #7c3cff;
  --violet-b: #a855f7;
}

body {
  background:
    radial-gradient(circle at 86% 12%, rgba(87, 45, 171, 0.22), transparent 28%),
    radial-gradient(circle at 6% 0%, rgba(75, 49, 151, 0.14), transparent 26%),
    linear-gradient(180deg, #050611 0%, #02030a 100%) !important;
  color: var(--text-strong) !important;
}

.workspace {
  background:
    linear-gradient(90deg, rgba(2, 3, 9, 0.98), rgba(5, 6, 15, 0.96) 42%, rgba(12, 8, 31, 0.92) 100%) !important;
}

.play-view {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 76px) !important;
  gap: 28px !important;
}

.play-view .page-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 720px) !important;
  align-items: start !important;
  gap: 32px !important;
  margin: 0 !important;
}

.play-view .page-head h1 {
  margin: 0 0 6px !important;
  font-size: clamp(42px, 4.2vw, 62px) !important;
  line-height: 0.95 !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

.play-view .page-head p {
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--text-soft) !important;
}

.head-actions {
  align-self: start !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
}

.search-box,
.ghost-button,
.primary-button,
.secondary-button {
  border-radius: 13px !important;
}

.search-box {
  min-height: 58px !important;
  background: rgba(8, 9, 18, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 54px rgba(0,0,0,0.18) !important;
}

.ghost-button {
  min-height: 58px !important;
  padding-inline: 26px !important;
  border-color: rgba(147, 100, 255, 0.7) !important;
  background: linear-gradient(135deg, rgba(117, 59, 255, 0.24), rgba(56, 36, 104, 0.22)) !important;
  color: #fff !important;
  font-weight: 760 !important;
}

.character-section {
  margin-top: 0 !important;
}

.character-section .section-head {
  margin-bottom: 18px !important;
}

.character-section h2 {
  font-size: 27px !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
}

.character-section p {
  color: var(--text-dim) !important;
  font-size: 15px !important;
}

.character-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
  gap: 26px !important;
}

.character-tile {
  min-height: 378px !important;
  border-radius: 17px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(18, 20, 32, 0.86), rgba(6, 7, 14, 0.96)) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34) !important;
  transform-origin: center bottom !important;
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    border-color 260ms ease,
    box-shadow 260ms ease,
    filter 260ms ease !important;
}

.character-tile:hover {
  transform: translateY(-10px) scale(1.032) !important;
  border-color: rgba(155, 103, 255, 0.84) !important;
  box-shadow:
    0 0 0 1px rgba(126, 208, 255, 0.18),
    0 0 34px rgba(132, 79, 255, 0.32),
    0 32px 76px rgba(0, 0, 0, 0.52) !important;
}

.character-tile.selected {
  border-color: rgba(171, 103, 255, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(122, 206, 255, 0.44),
    0 0 42px rgba(145, 76, 255, 0.4),
    0 26px 74px rgba(0, 0, 0, 0.48) !important;
}

.character-tile .tile-art {
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 72% !important;
  display: grid !important;
  place-items: start center !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)),
    radial-gradient(circle at 48% 28%, rgba(198, 184, 255, 0.24), transparent 48%) !important;
}

.character-tile .tile-art img {
  position: static !important;
  width: 104% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  opacity: 0.98 !important;
  filter: saturate(1.02) contrast(1.02) brightness(0.86) !important;
  transform: translateY(4px) scale(1) !important;
  transition:
    transform 280ms cubic-bezier(.2,.8,.2,1),
    filter 260ms ease,
    opacity 260ms ease !important;
}

.character-tile:hover .tile-art img {
  transform: translateY(0) scale(1.055) !important;
  filter: saturate(1.06) contrast(1.04) brightness(0.98) !important;
}

.character-tile::before {
  background:
    linear-gradient(180deg, rgba(2, 3, 10, 0.04) 0%, rgba(2, 3, 10, 0.16) 40%, rgba(2, 3, 10, 0.9) 100%) !important;
}

.character-tile::after {
  height: 56% !important;
  background:
    linear-gradient(180deg, rgba(3,4,10,0) 0%, rgba(3,4,10,0.62) 38%, rgba(3,4,10,0.98) 100%) !important;
}

.character-tile .tile-body {
  inset: auto 0 0 !important;
  padding: 0 25px 24px !important;
}

.character-tile .tile-title h3 {
  font-size: 39px !important;
  line-height: 0.98 !important;
  font-weight: 840 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.72) !important;
}

.character-tile .tile-meta {
  font-size: 15px !important;
  font-weight: 720 !important;
  color: rgba(246, 244, 255, 0.86) !important;
}

.character-tile .tile-summary {
  max-width: 96% !important;
  font-size: 15px !important;
  line-height: 1.54 !important;
  color: rgba(238, 234, 255, 0.83) !important;
}

.tile-tags span {
  border-radius: 7px !important;
  background: rgba(104, 62, 199, 0.56) !important;
  border-color: rgba(179, 136, 255, 0.24) !important;
  color: rgba(239, 231, 255, 0.95) !important;
}

.add-card-button {
  background: rgba(9, 10, 18, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.add-card-button.selected {
  background: linear-gradient(135deg, var(--violet-a), var(--violet-b)) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 12px 28px rgba(126, 72, 255, 0.36) !important;
}

.selection-tray,
.play-view .selection-tray {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  margin: auto 0 0 !important;
  min-height: 122px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 26px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(133, 91, 255, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(17, 18, 31, 0.94), rgba(8, 9, 18, 0.9)),
    radial-gradient(circle at 100% 100%, rgba(123, 67, 255, 0.18), transparent 36%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 70px rgba(0, 0, 0, 0.36) !important;
}

.selection-tray p {
  font-size: 15px !important;
  font-weight: 760 !important;
  color: rgba(247,244,255,0.96) !important;
}

.selection-tray .selected-list {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  max-width: none !important;
}

.empty-selection {
  color: var(--text-dim) !important;
  font-size: 15px !important;
}

.selection-tray .empty-slot {
  width: 132px !important;
  min-height: 66px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
  font-size: 32px !important;
  color: rgba(255,255,255,0.58) !important;
  border: 1px dashed rgba(255,255,255,0.24) !important;
  background: rgba(255,255,255,0.025) !important;
}

.selected-pill {
  min-height: 66px !important;
  padding: 9px 14px !important;
  border-radius: 14px !important;
  background: rgba(102, 61, 207, 0.24) !important;
  border: 1px solid rgba(172, 119, 255, 0.38) !important;
  color: #fff !important;
}

.selected-pill img {
  width: 42px !important;
  height: 42px !important;
}

.selection-tray .primary-button {
  min-width: 300px !important;
  min-height: 62px !important;
  font-size: 18px !important;
  font-weight: 820 !important;
  background: linear-gradient(135deg, #9a4cff, #6d32df) !important;
  box-shadow: 0 18px 54px rgba(117, 62, 255, 0.34) !important;
}

.selection-tray .primary-button:disabled {
  background: rgba(45, 48, 62, 0.82) !important;
  box-shadow: none !important;
  color: rgba(255,255,255,0.48) !important;
}

.detail-selection-strip {
  display: none !important;
}

.character-detail-view {
  padding-top: 18px !important;
}

.detail-hero {
  position: relative !important;
  display: block !important;
  min-height: min(770px, calc(100vh - 130px)) !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: #04050c !important;
  box-shadow: 0 36px 120px rgba(0,0,0,0.54) !important;
}

.detail-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(2,3,8,1) 0%, rgba(2,3,8,0.96) 27%, rgba(2,3,8,0.72) 43%, rgba(2,3,8,0.28) 61%, rgba(2,3,8,0.05) 100%),
    radial-gradient(circle at 72% 48%, rgba(137, 82, 255, 0.18), transparent 38%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.detail-copy {
  position: relative !important;
  z-index: 4 !important;
  width: min(48%, 620px) !important;
  min-height: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(48px, 5vw, 82px) 0 clamp(44px, 4vw, 70px) clamp(44px, 5vw, 78px) !important;
}

.detail-badge {
  width: fit-content !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #8d48ff, #b251ff) !important;
  color: #fff !important;
  box-shadow: 0 12px 34px rgba(132, 72, 255, 0.32) !important;
}

.detail-copy h1 {
  font-size: clamp(64px, 6vw, 96px) !important;
  line-height: 0.92 !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
  margin: 22px 0 12px !important;
}

.detail-copy blockquote {
  color: #d9b6ff !important;
  font-size: clamp(25px, 2vw, 34px) !important;
  font-weight: 820 !important;
  line-height: 1.35 !important;
  margin: 34px 0 22px !important;
}

.detail-copy > p,
.detail-summary {
  font-size: 16px !important;
  line-height: 1.78 !important;
  color: rgba(245,241,255,0.86) !important;
}

.detail-stats {
  max-width: 560px !important;
  background: rgba(9, 10, 18, 0.5) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.detail-safe-note {
  max-width: 560px !important;
  background: rgba(93, 49, 176, 0.2) !important;
  border-color: rgba(155, 104, 255, 0.28) !important;
}

.detail-actions {
  max-width: 700px !important;
}

.detail-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 74% 38%, rgba(166, 111, 255, 0.28), transparent 38%),
    linear-gradient(90deg, transparent 0%, rgba(122, 76, 255, 0.12) 100%) !important;
}

.detail-art::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background:
    linear-gradient(90deg, #04050c 0%, rgba(4,5,12,0.9) 32%, rgba(4,5,12,0.4) 52%, rgba(4,5,12,0.05) 84%),
    linear-gradient(180deg, rgba(2,3,8,0.22), rgba(2,3,8,0.55)) !important;
  pointer-events: none !important;
}

.detail-art img {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 64% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center 18% !important;
  opacity: 0.98 !important;
  filter: saturate(1.04) contrast(1.03) brightness(0.88) !important;
  transform: none !important;
}

.detail-quote-card {
  z-index: 5 !important;
  right: clamp(72px, 8vw, 180px) !important;
  bottom: clamp(60px, 7vw, 120px) !important;
  width: min(390px, 30vw) !important;
  border-radius: 15px !important;
  background: rgba(7, 8, 15, 0.68) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  backdrop-filter: blur(14px) !important;
}

.mode-bar,
.route-preset-panel,
.route-selected-panel,
#simulationOptions {
  display: none !important;
}

.start-modal .modal-card h2 {
  font-size: 28px !important;
}

.room-input-locked #userInput::placeholder {
  color: rgba(227, 215, 255, 0.75) !important;
}


@media (max-width: 860px) {
  .character-grid {
    grid-template-columns: 1fr !important;
  }

  .selection-tray,
  .play-view .selection-tray {
    grid-template-columns: 1fr !important;
  }

  .detail-hero {
    min-height: auto !important;
  }

  .detail-copy {
    width: 100% !important;
    min-height: 620px !important;
    padding: 34px !important;
  }

  .detail-art img {
    width: 120% !important;
    right: -36% !important;
    opacity: 0.42 !important;
  }
}


@media (max-width: 900px) {
  .play-view {
    padding: 32px 22px !important;
  }

  .character-grid {
    grid-template-columns: 1fr !important;
  }

  .detail-copy {
    width: 100% !important;
    min-height: auto !important;
    padding: 34px 28px !important;
  }

  .detail-art {
    position: relative !important;
    min-height: 560px !important;
  }

  .detail-art img {
    right: 50% !important;
    top: 0 !important;
    width: min(110vw, 620px) !important;
    height: 100% !important;
    transform: translateX(50%) scale(1.04) !important;
    object-position: center 16% !important;
  }

  .detail-quote-card {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: 0 24px 24px !important;
  }
}

/* 2026-06-09 v9: Play/detail composition correction */
.view.hidden,
.character-detail-view.hidden,
.play-view.hidden {
  display: none !important;
}

body.play-active .workspace {
  padding-bottom: 190px !important;
}

body.detail-active .workspace {
  padding: 28px clamp(34px, 4vw, 58px) 80px !important;
}

body:not(.play-active) .selection-tray,
.character-detail-view .selection-tray,
.detail-selection-strip {
  display: none !important;
}

.play-view {
  min-height: calc(100vh - 70px) !important;
  padding-bottom: 0 !important;
}

.play-view .page-head {
  align-items: start !important;
  margin-bottom: 38px !important;
  gap: 28px !important;
}

.play-view .page-head h1 {
  font-size: clamp(46px, 3.4vw, 62px) !important;
  line-height: 1.02 !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  margin: 0 0 12px !important;
}

.play-view .page-head p {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: rgba(236, 232, 250, 0.78) !important;
}

.character-grid {
  grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
  gap: 28px !important;
}

.character-tile {
  height: 392px !important;
  min-height: 392px !important;
  border-radius: 18px !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: #070813 !important;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.34) !important;
  transform-origin: center bottom !important;
  transition:
    transform 260ms cubic-bezier(0.18, 0.9, 0.28, 1),
    border-color 240ms ease,
    box-shadow 240ms ease !important;
}

.character-tile:hover {
  transform: translateY(-9px) scale(1.025) !important;
  border-color: rgba(156, 91, 255, 0.7) !important;
  box-shadow: 0 30px 90px rgba(69, 35, 160, 0.34) !important;
}

.character-tile.selected {
  border-color: rgba(154, 85, 255, 0.9) !important;
  box-shadow: 0 0 0 1px rgba(140, 82, 255, 0.34), 0 28px 86px rgba(98, 45, 222, 0.32) !important;
}

.character-tile .tile-art {
  inset: 0 !important;
  height: 100% !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(206, 194, 255, 0.26), transparent 42%),
    linear-gradient(180deg, rgba(32, 34, 52, 0.95), rgba(6, 7, 15, 0.98)) !important;
}

.character-tile .tile-art img {
  position: absolute !important;
  left: 50% !important;
  top: 10px !important;
  width: 118% !important;
  height: 72% !important;
  object-fit: contain !important;
  object-position: center top !important;
  opacity: 1 !important;
  filter: saturate(1.03) contrast(1.03) brightness(1) !important;
  transform: translateX(-50%) scale(1) !important;
  transition: transform 320ms cubic-bezier(0.18, 0.9, 0.28, 1) !important;
}

.character-tile:hover .tile-art img {
  transform: translateX(-50%) scale(1.065) !important;
}

.character-tile::before {
  display: none !important;
}

.character-tile::after,
.character-tile .tile-art::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 !important;
  height: 60% !important;
  background: linear-gradient(180deg, rgba(5, 6, 14, 0) 0%, rgba(5, 6, 14, 0.54) 38%, rgba(5, 6, 14, 0.98) 100%) !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

.character-tile .tile-body {
  padding: 0 24px 24px !important;
}

.character-tile .tile-title h3 {
  font-size: clamp(34px, 2.25vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.character-tile .tile-meta {
  font-size: 15px !important;
  color: rgba(250, 246, 255, 0.82) !important;
  margin-top: 8px !important;
}

.character-tile .tile-summary {
  font-size: 14px !important;
  line-height: 1.55 !important;
  max-width: 94% !important;
  color: rgba(243, 239, 252, 0.78) !important;
}

body.play-active .selection-tray,
body.play-active .play-view .selection-tray {
  position: fixed !important;
  left: calc(268px + clamp(36px, 4vw, 64px)) !important;
  right: clamp(28px, 4vw, 64px) !important;
  bottom: 24px !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: 1fr minmax(230px, 330px) !important;
  gap: 22px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 18px 22px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(155, 93, 255, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(19, 21, 34, 0.94), rgba(12, 13, 23, 0.96)),
    radial-gradient(circle at 78% 12%, rgba(118, 65, 255, 0.25), transparent 36%) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}

.selection-tray p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  margin-bottom: 10px !important;
}

.selection-tray .selected-list {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 54px !important;
}

.selection-tray .empty-selection {
  color: rgba(222, 216, 238, 0.64) !important;
  font-size: 14px !important;
}

.selection-tray .empty-slot {
  width: 108px !important;
  height: 54px !important;
  border-radius: 14px !important;
  border: 1px dashed rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

.selection-tray .primary-button {
  height: 58px !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #9b4eff, #622fea) !important;
  box-shadow: 0 20px 62px rgba(121, 64, 255, 0.36) !important;
}

.character-detail-view {
  position: relative !important;
  min-height: calc(100vh - 60px) !important;
  padding: 20px 0 72px !important;
}

.detail-hero {
  position: relative !important;
  display: block !important;
  min-height: min(800px, calc(100vh - 110px)) !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #03040a !important;
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.58) !important;
  isolation: isolate !important;
}

.detail-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, #03040a 0%, rgba(3, 4, 10, 0.99) 24%, rgba(3, 4, 10, 0.92) 37%, rgba(3, 4, 10, 0.58) 50%, rgba(3, 4, 10, 0.12) 64%, rgba(3, 4, 10, 0) 74%),
    linear-gradient(180deg, rgba(3, 4, 10, 0.08), rgba(3, 4, 10, 0.22) 100%) !important;
}

.detail-copy {
  position: relative !important;
  z-index: 6 !important;
  width: min(46%, 620px) !important;
  min-height: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(54px, 5vw, 92px) 0 clamp(46px, 4vw, 74px) clamp(58px, 5.2vw, 96px) !important;
}

.detail-copy h1 {
  font-size: clamp(64px, 6vw, 96px) !important;
  line-height: 0.92 !important;
  font-weight: 840 !important;
  letter-spacing: 0 !important;
}

.detail-copy blockquote {
  color: #dfb7ff !important;
  font-size: clamp(25px, 2vw, 34px) !important;
  line-height: 1.36 !important;
  font-weight: 820 !important;
}

.detail-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 78% 35%, rgba(144, 91, 255, 0.2), transparent 32%),
    linear-gradient(90deg, transparent 0%, rgba(139, 89, 255, 0.08) 100%) !important;
}

.detail-art::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, #03040a 0%, rgba(3, 4, 10, 0.96) 29%, rgba(3, 4, 10, 0.62) 43%, rgba(3, 4, 10, 0.16) 56%, rgba(3, 4, 10, 0) 67%) !important;
}

.detail-art::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 86% 17%, rgba(255, 255, 255, 0.07), transparent 22%),
    linear-gradient(180deg, rgba(3, 4, 10, 0) 0%, rgba(3, 4, 10, 0.1) 72%, rgba(3, 4, 10, 0.38) 100%) !important;
}

.detail-art img {
  position: absolute !important;
  right: -8vw !important;
  top: auto !important;
  bottom: -14vh !important;
  width: min(62vw, 1060px) !important;
  height: 122% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: 1 !important;
  filter: saturate(1.06) contrast(1.04) brightness(1) !important;
  transform: none !important;
  z-index: 2 !important;
}

.detail-quote-card {
  z-index: 8 !important;
  right: clamp(68px, 8vw, 180px) !important;
  bottom: clamp(54px, 6vw, 104px) !important;
  background: rgba(8, 9, 17, 0.72) !important;
  backdrop-filter: blur(18px) !important;
}


@media (max-width: 900px) {
  body.play-active .workspace,
  body.detail-active .workspace {
    padding: 28px 22px 170px !important;
  }

  .character-grid {
    grid-template-columns: 1fr !important;
  }

  body.play-active .selection-tray,
  body.play-active .play-view .selection-tray {
    left: 18px !important;
    right: 18px !important;
    grid-template-columns: 1fr !important;
  }

  .detail-hero {
    min-height: auto !important;
  }

  .detail-copy {
    width: 100% !important;
    min-height: 520px !important;
    padding: 34px 28px !important;
  }

  .detail-art {
    position: relative !important;
    min-height: 560px !important;
  }

  .detail-art img {
    right: 50% !important;
    bottom: -12vh !important;
    width: min(120vw, 700px) !important;
    height: 118% !important;
    transform: translateX(50%) !important;
  }
}

/* 2026-06-10 compact polish: reduce oversized Play/detail surfaces and keep start modal usable. */
body.play-active .workspace {
  padding-bottom: 132px !important;
}

.play-view {
  gap: 22px !important;
}

.play-view .page-head {
  margin-bottom: 24px !important;
}

.play-view .page-head h1 {
  font-size: 48px !important;
  line-height: 1 !important;
  font-weight: 720 !important;
  margin-bottom: 8px !important;
}

.play-view .page-head p,
.character-section p {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(226, 221, 240, 0.7) !important;
}

.head-actions {
  grid-template-columns: minmax(260px, 520px) auto !important;
}

.search-box {
  min-height: 48px !important;
  border-radius: 13px !important;
}

.ghost-button,
.head-actions .ghost-button {
  min-height: 48px !important;
  padding-inline: 22px !important;
  font-size: 15px !important;
  font-weight: 680 !important;
}

.character-section h2 {
  font-size: 24px !important;
  font-weight: 720 !important;
}

.character-grid {
  grid-template-columns: repeat(4, minmax(224px, 1fr)) !important;
  gap: 22px !important;
}

.character-tile {
  height: 352px !important;
  min-height: 352px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(17, 18, 30, 0.94), rgba(5, 6, 13, 0.98)) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34) !important;
}

.character-tile:hover {
  transform: translateY(-6px) scale(1.015) !important;
  box-shadow: 0 24px 70px rgba(71, 43, 142, 0.3) !important;
}

.character-tile .tile-art {
  inset: 10px 12px auto !important;
  height: 214px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 26%, rgba(218, 211, 245, 0.68), transparent 48%),
    linear-gradient(180deg, rgba(230, 224, 246, 0.9), rgba(141, 123, 176, 0.26)) !important;
}

.character-tile .tile-art img {
  top: 0 !important;
  width: 112% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  filter: saturate(1.02) contrast(1.02) brightness(0.96) !important;
}

.character-tile::after,
.character-tile .tile-art::after {
  height: 58% !important;
  background: linear-gradient(180deg, rgba(5, 6, 14, 0) 0%, rgba(5, 6, 14, 0.7) 44%, rgba(5, 6, 14, 0.99) 100%) !important;
}

.character-tile .tile-body {
  padding: 0 18px 18px !important;
}

.character-tile .tile-title h3 {
  font-size: 31px !important;
  font-weight: 720 !important;
  line-height: 1.02 !important;
}

.character-tile .tile-meta {
  font-size: 13px !important;
  font-weight: 650 !important;
  margin-top: 5px !important;
}

.character-tile .tile-summary {
  font-size: 13px !important;
  line-height: 1.48 !important;
  max-width: 100% !important;
}

.tile-tags {
  gap: 6px !important;
}

.tile-tags span {
  min-height: 28px !important;
  padding: 6px 9px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.tile-badge {
  top: 16px !important;
  left: 18px !important;
  min-height: 28px !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.tile-heart {
  top: 16px !important;
  right: 18px !important;
  width: 34px !important;
  height: 34px !important;
}

.add-card-button {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
}

body.play-active .selection-tray,
body.play-active .play-view .selection-tray {
  left: 300px !important;
  right: 32px !important;
  width: auto !important;
  max-width: none !important;
  bottom: 18px !important;
  z-index: 30 !important;
  grid-template-columns: minmax(0, 1fr) 230px !important;
  min-height: 96px !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  gap: 16px !important;
}

body.modal-open .selection-tray,
body.modal-open .play-view .selection-tray {
  display: none !important;
}

.selection-tray p {
  margin-bottom: 8px !important;
  font-size: 13px !important;
}

.selection-tray .selected-list {
  min-height: 46px !important;
  gap: 8px !important;
  overflow: hidden !important;
}

.selection-tray .empty-slot {
  width: 96px !important;
  height: 46px !important;
  min-height: 46px !important;
  font-size: 25px !important;
}

.selected-pill {
  min-height: 46px !important;
  padding: 7px 11px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.selected-pill img {
  width: 32px !important;
  height: 32px !important;
}

.selection-tray .primary-button {
  min-width: 0 !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 13px !important;
  font-size: 16px !important;
  font-weight: 720 !important;
}

.modal-backdrop {
  z-index: 300 !important;
  padding: 26px !important;
  align-items: center !important;
}

.start-modal {
  max-height: min(820px, calc(100vh - 52px)) !important;
  width: min(760px, calc(100vw - 52px)) !important;
  overflow: auto !important;
  padding: 24px !important;
}

.modal-start-button {
  position: sticky !important;
  bottom: 0 !important;
  min-height: 54px !important;
  font-size: 16px !important;
  font-weight: 720 !important;
  z-index: 2 !important;
}

.character-detail-view {
  padding: 16px 0 40px !important;
}

.detail-hero {
  height: min(720px, calc(100vh - 96px)) !important;
  min-height: 620px !important;
  border-radius: 22px !important;
}

.detail-copy {
  width: min(43%, 560px) !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 34px 0 30px clamp(42px, 4.5vw, 72px) !important;
  justify-content: center !important;
  gap: 10px !important;
}

.detail-copy h1 {
  font-size: clamp(50px, 4.5vw, 72px) !important;
  font-weight: 760 !important;
  margin: 12px 0 4px !important;
}

.detail-copy blockquote {
  margin: 14px 0 10px !important;
  font-size: clamp(20px, 1.55vw, 25px) !important;
  font-weight: 720 !important;
}

.detail-copy > p,
.detail-summary {
  font-size: 14px !important;
  line-height: 1.68 !important;
}

.detail-stats,
.detail-safe-note {
  max-width: 470px !important;
}

.detail-stats {
  margin-top: 4px !important;
}

.detail-stats span {
  padding: 14px 16px !important;
}

.detail-stats strong {
  font-size: 24px !important;
}

.detail-stats small {
  font-size: 12px !important;
}

.detail-safe-note {
  padding: 12px 14px !important;
}

.detail-safe-note p {
  font-size: 13px !important;
}

.detail-actions {
  max-width: 560px !important;
  grid-template-columns: 0.85fr 1fr 1fr !important;
  gap: 10px !important;
}

.detail-actions .primary-button,
.detail-actions .secondary-button {
  min-height: 50px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.detail-art img {
  right: -2vw !important;
  top: -9% !important;
  bottom: auto !important;
  width: min(56vw, 900px) !important;
  height: 118% !important;
  object-fit: cover !important;
  object-position: center 2% !important;
}

.detail-art::before {
  background: linear-gradient(90deg, #03040a 0%, rgba(3, 4, 10, 0.96) 28%, rgba(3, 4, 10, 0.66) 42%, rgba(3, 4, 10, 0.2) 56%, rgba(3, 4, 10, 0) 70%) !important;
}

.detail-quote-card {
  right: clamp(42px, 5vw, 110px) !important;
  bottom: clamp(34px, 4vw, 72px) !important;
  width: min(330px, 27vw) !important;
}

.detail-selection-strip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  max-width: 560px !important;
  margin-top: 6px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(155, 93, 255, 0.34) !important;
  background: rgba(12, 13, 24, 0.72) !important;
  backdrop-filter: blur(16px) !important;
}

.detail-selection-strip > div:first-child {
  grid-column: 1 / -1 !important;
}

.detail-selection-strip strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

.detail-selection-strip p {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  color: rgba(226, 221, 240, 0.68) !important;
}

.detail-selected-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.detail-selected-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 5px 9px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(155, 93, 255, 0.36) !important;
  background: rgba(95, 56, 182, 0.24) !important;
  color: #fff !important;
}

.detail-selected-chip img,
.detail-selected-chip > span {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.detail-selected-chip em {
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.detail-empty-slot {
  display: inline-grid !important;
  place-items: center !important;
  width: 58px !important;
  min-height: 36px !important;
  border: 1px dashed rgba(255, 255, 255, 0.22) !important;
  border-radius: 11px !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

.detail-selection-strip .primary-button {
  min-width: 138px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}


@media (max-width: 900px) {
  .head-actions {
    grid-template-columns: 1fr !important;
  }

  body.play-active .selection-tray,
  body.play-active .play-view .selection-tray {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    grid-template-columns: 1fr !important;
  }

  .detail-copy {
    width: 100% !important;
  }

  .detail-selection-strip,
  .detail-actions {
    max-width: none !important;
  }

  .detail-art img {
    right: 50% !important;
    top: -4% !important;
    width: min(112vw, 680px) !important;
    height: 112% !important;
    transform: translateX(50%) !important;
    opacity: 0.48 !important;
  }
}
/* ===== Tryva Play visual polish v2.1: main screen ratio/card/detail alignment ===== */
body.play-active,
body.detail-active,
body.chat-active {
  background:
    radial-gradient(circle at 78% 4%, rgba(88, 48, 170, 0.22), transparent 30%),
    linear-gradient(180deg, #05060a 0%, #030408 100%) !important;
}

.nav-shell {
  background:
    radial-gradient(circle at 34% 0%, rgba(124, 77, 255, 0.19), transparent 28%),
    rgba(5, 7, 13, 0.94) !important;
}

.workspace {
  padding: 28px 40px 118px !important;
}

.page-head {
  align-items: flex-start !important;
  margin-bottom: 24px !important;
}

.page-head h1 {
  font-size: 44px !important;
  line-height: 0.96 !important;
  letter-spacing: -0.035em !important;
}

.page-head p {
  margin-top: 10px !important;
  color: rgba(222, 225, 238, 0.72) !important;
  font-size: 14px !important;
}

.head-actions {
  margin-top: 4px !important;
  display: grid !important;
  grid-template-columns: minmax(380px, 520px) 188px !important;
  gap: 14px !important;
}

.search-box {
  height: 56px !important;
  border-radius: 12px !important;
  background: rgba(8, 10, 18, 0.68) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

.search-box input {
  height: 100% !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.head-actions .ghost-button,
#quickCreateBtn {
  min-height: 56px !important;
  border-radius: 12px !important;
  border-color: rgba(158, 100, 255, 0.68) !important;
  background: linear-gradient(135deg, rgba(128, 75, 255, 0.92), rgba(96, 49, 213, 0.96)) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 840 !important;
  box-shadow: 0 18px 44px rgba(102, 57, 214, 0.24) !important;
}

.play-view .character-section {
  margin-top: 4px !important;
}

.section-head {
  margin-bottom: 14px !important;
}

.section-head h2 {
  font-size: 24px !important;
  letter-spacing: -0.025em !important;
}

.section-head p {
  margin-top: 6px !important;
  color: rgba(216, 220, 235, 0.64) !important;
  font-size: 14px !important;
}

.character-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 278px)) !important;
  justify-content: start !important;
  gap: 22px !important;
  align-items: stretch !important;
}

.character-tile {
  min-height: 346px !important;
  height: 346px !important;
  grid-template-rows: 1fr !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.095) !important;
  background: rgba(10, 12, 21, 0.86) !important;
  transform-origin: center center !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.035) !important;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, filter 200ms ease !important;
}

.character-tile:hover,
.character-tile:focus-visible {
  transform: translateY(-5px) scaleX(1.045) !important;
  border-color: rgba(156, 91, 255, 0.88) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.52), 0 0 42px rgba(132, 74, 255, 0.25), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  z-index: 4 !important;
}

.character-tile.selected {
  border-color: rgba(151, 87, 255, 0.98) !important;
  box-shadow: 0 0 0 1px rgba(108, 197, 255, 0.3), 0 0 42px rgba(137, 83, 255, 0.32), 0 24px 62px rgba(0,0,0,0.52) !important;
}

.tile-art {
  inset: 0 !important;
  padding: 0 !important;
  background: #0b0d15 !important;
}

.tile-art::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 56% 23%, rgba(182, 150, 255, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(5, 6, 12, 0.0) 0%, rgba(5, 6, 12, 0.0) 42%, rgba(5, 6, 12, 0.46) 64%, rgba(5, 6, 12, 0.94) 100%) !important;
  pointer-events: none !important;
}

.tile-art::after {
  z-index: 2 !important;
  background:
    linear-gradient(180deg, transparent 0%, transparent 48%, rgba(3, 4, 10, 0.48) 69%, rgba(3, 4, 10, 0.96) 100%),
    linear-gradient(90deg, rgba(3,4,10,0.2), transparent 35%, transparent 68%, rgba(3,4,10,0.12)) !important;
}

.tile-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  transform: none !important;
  filter: saturate(1.02) contrast(1.02) brightness(0.92) !important;
}

.character-tile:hover .tile-art img {
  transform: scale(1.015) !important;
}

.tile-body {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  align-content: end !important;
  gap: 8px !important;
  padding: 0 17px 17px !important;
  background: transparent !important;
}

.tile-title {
  display: block !important;
}

.tile-title h3 {
  margin: 0 !important;
  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  color: rgba(255, 255, 255, 0.97) !important;
}

.tile-meta {
  margin: 0 !important;
  color: rgba(231, 229, 244, 0.78) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
}

.tile-summary {
  margin: 2px 0 0 !important;
  min-height: 36px !important;
  max-width: 86% !important;
  color: rgba(240, 236, 250, 0.82) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 2 !important;
}

.tile-tags {
  gap: 7px !important;
  margin-top: 4px !important;
}

.tag-chip,
.trait-list span {
  padding: 6px 9px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(155, 101, 255, 0.28) !important;
  background: rgba(63, 37, 139, 0.58) !important;
  color: rgba(218, 206, 255, 0.86) !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  letter-spacing: -0.01em !important;
}

.tile-badge {
  top: 13px !important;
  left: 13px !important;
  z-index: 5 !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #ff5f96 0%, #975cff 100%) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 26px rgba(128, 72, 255, 0.26) !important;
}

.tile-heart {
  top: 13px !important;
  right: 13px !important;
  width: 34px !important;
  height: 34px !important;
  background: rgba(9, 11, 20, 0.42) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.tile-actions {
  right: 14px !important;
  top: auto !important;
  bottom: 19px !important;
  z-index: 6 !important;
}

.add-card-button {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: rgba(9, 11, 20, 0.58) !important;
  backdrop-filter: blur(14px) !important;
}

.add-card-button:hover {
  background: rgba(110, 67, 226, 0.7) !important;
  border-color: rgba(166, 109, 255, 0.66) !important;
}

.tile-mini-stats {
  display: none !important;
}

.genre-rail {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 22px 0 0 !important;
}

.genre-rail button {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 11px !important;
  align-items: center !important;
  min-height: 70px !important;
  padding: 13px 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(28, 31, 48, 0.86), rgba(15, 17, 28, 0.86)) !important;
  color: rgba(244, 241, 255, 0.9) !important;
  text-align: left !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.genre-rail button span {
  grid-row: 1 / 3 !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(126, 78, 255, 0.16) !important;
}

.genre-rail button strong {
  font-size: 14px !important;
  font-weight: 870 !important;
}

.genre-rail button small {
  color: rgba(214, 210, 232, 0.58) !important;
  font-size: 12px !important;
}

.play-rail-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr) !important;
  gap: 32px !important;
  margin-top: 26px !important;
}

.mini-rail-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

.mini-rail-head h2 {
  margin: 0 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
}

.mini-rail-head button {
  border: 0 !important;
  background: transparent !important;
  color: #b48cff !important;
  font-weight: 800 !important;
}

.avatar-rail {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 88px !important;
}

.avatar-rail-item {
  display: grid !important;
  justify-items: center !important;
  gap: 7px !important;
  width: 70px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(248, 246, 255, 0.88) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.avatar-rail-image {
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(154, 101, 255, 0.26) !important;
  border-radius: 50% !important;
  background: rgba(52, 41, 88, 0.55) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28) !important;
}

.avatar-rail-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 22% !important;
}

.selection-tray,
.play-view .selection-tray {
  grid-template-columns: minmax(0, 1fr) 316px !important;
  gap: 18px !important;
  margin-top: 24px !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
  border-color: rgba(142, 82, 255, 0.36) !important;
  background: rgba(12, 14, 24, 0.82) !important;
}

.selection-tray p {
  margin-bottom: 8px !important;
  font-size: 14px !important;
}

.selected-list {
  min-height: 54px !important;
}

.empty-slot {
  width: 96px !important;
  height: 50px !important;
  border-radius: 14px !important;
}

.selection-tray .primary-button,
#startBtn {
  min-height: 58px !important;
  border-radius: 14px !important;
  font-size: 19px !important;
  letter-spacing: -0.02em !important;
}

/* Card preview inside Create should use the same crop language as Play cards. */
.preview-panel {
  border-radius: 18px !important;
  border-color: rgba(151, 91, 255, 0.24) !important;
  background: rgba(12, 14, 24, 0.74) !important;
}

.avatar-stage {
  border-radius: 16px !important;
  background: rgba(11, 13, 22, 0.72) !important;
}

.avatar-stage img {
  object-fit: cover !important;
  object-position: center 18% !important;
}

@media (max-width: 1500px) {
  .character-grid {
    grid-template-columns: repeat(4, minmax(0, 250px)) !important;
    gap: 18px !important;
  }
  .character-tile { height: 328px !important; min-height: 328px !important; }
  .head-actions { grid-template-columns: minmax(320px, 450px) 176px !important; }
  .genre-rail { grid-template-columns: repeat(5, minmax(150px, 1fr)) !important; overflow-x: auto !important; padding-bottom: 3px !important; }
}


/* ===== Tryva Play main screen correction v3.0 =====
   Purpose: keep profile-card images clean, tighten top layout, reduce card width,
   and restore the visual balance from the reference mockup. AI model settings untouched. */

body.play-active .workspace {
  padding: 22px clamp(34px, 3.6vw, 54px) 132px !important;
}

.play-view {
  gap: 0 !important;
}

.play-view .page-head {
  display: grid !important;
  grid-template-columns: minmax(430px, 1fr) minmax(520px, 700px) !important;
  align-items: start !important;
  gap: 28px !important;
  margin: 0 0 24px !important;
}

.play-view .page-head h1 {
  margin: 0 0 8px !important;
  font-size: clamp(42px, 3.1vw, 54px) !important;
  line-height: 0.98 !important;
  font-weight: 820 !important;
  letter-spacing: -0.035em !important;
}

.play-view .page-head p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.42 !important;
  color: rgba(226, 221, 240, 0.72) !important;
}

.play-view .head-actions {
  margin-top: 2px !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) 190px !important;
  gap: 14px !important;
  width: 100% !important;
}

.play-view .search-box {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 13px !important;
  background: rgba(7, 8, 15, 0.72) !important;
  border: 1px solid rgba(187, 174, 255, 0.17) !important;
}

.play-view .search-box input {
  color: rgba(232, 228, 244, 0.82) !important;
  font-size: 14px !important;
}

.play-view .head-actions .ghost-button,
#quickCreateBtn {
  min-height: 52px !important;
  border-radius: 13px !important;
  padding-inline: 18px !important;
  background: linear-gradient(135deg, #8654ff 0%, #5d31d8 100%) !important;
  border: 1px solid rgba(178, 136, 255, 0.46) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 820 !important;
  box-shadow: 0 18px 46px rgba(103, 58, 216, 0.28) !important;
}

.play-view .character-section {
  margin-top: 4px !important;
}

.play-view .section-head {
  margin-bottom: 14px !important;
}

.play-view .section-head h2 {
  margin: 0 !important;
  font-size: 25px !important;
  line-height: 1.12 !important;
  font-weight: 840 !important;
  letter-spacing: -0.035em !important;
}

.play-view .section-head p {
  margin-top: 6px !important;
  font-size: 14px !important;
  color: rgba(212, 209, 229, 0.63) !important;
}

/* Normal cards are deliberately narrower. Only hover/selected gives a wider feel. */
.play-view .character-grid,
#characterGrid.character-grid {
  grid-template-columns: repeat(4, 248px) !important;
  justify-content: start !important;
  align-items: stretch !important;
  gap: 20px !important;
  overflow: visible !important;
}

.play-view .character-tile,
#characterGrid .character-tile {
  position: relative !important;
  width: 248px !important;
  height: 344px !important;
  min-height: 344px !important;
  grid-template-rows: none !important;
  border-radius: 17px !important;
  overflow: hidden !important;
  border: 1px solid rgba(180, 169, 246, 0.13) !important;
  background: linear-gradient(180deg, rgba(12, 14, 25, 0.98), rgba(5, 6, 13, 1)) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255,255,255,0.035) !important;
  transform-origin: center bottom !important;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;
}

.play-view .character-tile:hover,
.play-view .character-tile:focus-visible,
#characterGrid .character-tile:hover,
#characterGrid .character-tile:focus-visible {
  transform: translateY(-6px) scaleX(1.06) !important;
  border-color: rgba(153, 93, 255, 0.78) !important;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.54), 0 0 46px rgba(129, 77, 255, 0.22) !important;
  z-index: 8 !important;
}

.play-view .character-tile.selected,
#characterGrid .character-tile.selected {
  border-color: rgba(153, 92, 255, 0.96) !important;
  box-shadow: 0 0 0 1px rgba(99, 205, 255, 0.28), 0 0 48px rgba(129, 77, 255, 0.28), 0 26px 72px rgba(0,0,0,0.5) !important;
}

/* Main cards: use the clean profile image as a contained top portrait, not the detail/standing scene. */
.play-view .character-tile .tile-art,
#characterGrid .character-tile .tile-art {
  position: absolute !important;
  inset: 10px 10px auto 10px !important;
  height: 212px !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(16, 17, 27, 0.9) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

.play-view .character-tile .tile-art::before,
#characterGrid .character-tile .tile-art::before {
  content: none !important;
  display: none !important;
}

.play-view .character-tile .tile-art img,
#characterGrid .character-tile .tile-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  transform: none !important;
  filter: saturate(1.02) contrast(1.02) brightness(0.92) !important;
}

.play-view .character-tile:hover .tile-art img,
#characterGrid .character-tile:hover .tile-art img {
  transform: scale(1.018) !important;
}

.play-view .character-tile::before,
#characterGrid .character-tile::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(5, 6, 14, 0) 0%, rgba(5, 6, 14, 0.08) 42%, rgba(5, 6, 14, 0.72) 67%, rgba(5, 6, 14, 0.99) 100%) !important;
}

.play-view .character-tile::after,
.play-view .character-tile .tile-art::after,
#characterGrid .character-tile::after,
#characterGrid .character-tile .tile-art::after {
  content: none !important;
  display: none !important;
}

.play-view .character-tile .tile-body,
#characterGrid .character-tile .tile-body {
  position: absolute !important;
  z-index: 4 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: grid !important;
  align-content: end !important;
  gap: 7px !important;
  padding: 0 15px 15px !important;
  background: transparent !important;
}

.play-view .character-tile .tile-title,
#characterGrid .character-tile .tile-title {
  display: block !important;
  min-width: 0 !important;
}

.play-view .character-tile .tile-title h3,
#characterGrid .character-tile .tile-title h3 {
  margin: 0 !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 860 !important;
  letter-spacing: -0.04em !important;
  color: rgba(255,255,255,0.98) !important;
  text-shadow: 0 8px 24px rgba(0,0,0,0.55) !important;
}

.play-view .character-tile .tile-meta,
#characterGrid .character-tile .tile-meta {
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.32 !important;
  font-weight: 620 !important;
  color: rgba(226, 223, 241, 0.74) !important;
}

.play-view .character-tile .tile-summary,
#characterGrid .character-tile .tile-summary {
  margin: 2px 0 0 !important;
  max-width: 82% !important;
  min-height: 34px !important;
  max-height: 38px !important;
  font-size: 12.5px !important;
  line-height: 1.42 !important;
  color: rgba(239, 234, 249, 0.76) !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

.play-view .character-tile .tile-tags,
#characterGrid .character-tile .tile-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 2px !important;
  max-width: 82% !important;
}

.play-view .character-tile .tile-tags span,
#characterGrid .character-tile .tile-tags span,
.play-view .tag-chip {
  min-height: 24px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(133, 92, 223, 0.24) !important;
  background: rgba(44, 28, 98, 0.74) !important;
  color: rgba(211, 200, 250, 0.88) !important;
  font-size: 11px !important;
  font-weight: 720 !important;
}

.play-view .tile-badge,
#characterGrid .tile-badge {
  top: 15px !important;
  left: 15px !important;
  z-index: 6 !important;
  min-height: 26px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 820 !important;
}

.play-view .tile-heart,
#characterGrid .tile-heart {
  top: 15px !important;
  right: 15px !important;
  z-index: 7 !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(8, 9, 16, 0.34) !important;
  border-color: rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(12px) !important;
}

.play-view .tile-actions,
#characterGrid .tile-actions {
  position: absolute !important;
  right: 14px !important;
  bottom: 15px !important;
  top: auto !important;
  z-index: 8 !important;
}

.play-view .add-card-button,
#characterGrid .add-card-button {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 10px !important;
  background: rgba(9, 10, 18, 0.66) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  color: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(12px) !important;
}

.play-view .add-card-button:hover,
#characterGrid .add-card-button:hover {
  background: rgba(109, 69, 232, 0.78) !important;
  border-color: rgba(174, 124, 255, 0.68) !important;
}

.play-view .tile-mini-stats,
#characterGrid .tile-mini-stats {
  display: none !important;
}

.play-view .genre-rail {
  grid-template-columns: repeat(5, minmax(145px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.play-view .genre-rail button {
  min-height: 66px !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, rgba(25, 28, 43, 0.82), rgba(13, 15, 25, 0.86)) !important;
  border-color: rgba(255,255,255,0.09) !important;
}

.play-view .play-rail-row {
  margin-top: 24px !important;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.7fr) !important;
  gap: 30px !important;
}

body.play-active .selection-tray,
body.play-active .play-view .selection-tray {
  left: calc(var(--nav-width, 268px) + clamp(34px, 3.6vw, 54px)) !important;
  right: clamp(34px, 3.6vw, 54px) !important;
  bottom: 18px !important;
  grid-template-columns: minmax(0, 1fr) 250px !important;
  min-height: 92px !important;
  padding: 14px 18px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(143, 88, 255, 0.34) !important;
  background: rgba(12, 14, 24, 0.88) !important;
  backdrop-filter: blur(22px) !important;
}

.selection-tray .primary-button,
#startBtn {
  min-height: 52px !important;
  height: 52px !important;
  border-radius: 13px !important;
  font-size: 16px !important;
  font-weight: 780 !important;
}

@media (max-width: 1500px) {
  .play-view .character-grid,
  #characterGrid.character-grid {
    grid-template-columns: repeat(4, 230px) !important;
    gap: 18px !important;
  }

  .play-view .character-tile,
  #characterGrid .character-tile {
    width: 230px !important;
    height: 330px !important;
    min-height: 330px !important;
  }

  .play-view .character-tile .tile-art,
  #characterGrid .character-tile .tile-art {
    height: 202px !important;
  }
}


/* 2026-06-11 main Play-only refinement: card image unification + reveal hover. */
.play-view {
  --play-card-base: clamp(238px, 17vw, 304px);
  --play-card-open: clamp(318px, 24vw, 414px);
}

.play-view.workspace,
.workspace:has(.play-view:not(.hidden)) {
  padding-top: 22px !important;
}

.play-view .page-head {
  align-items: flex-start !important;
  margin-bottom: 24px !important;
}

.play-view .page-head h1 {
  font-size: clamp(42px, 3.6vw, 58px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.035em !important;
}

.play-view .page-head p {
  margin-top: 8px !important;
  font-size: 14px !important;
  color: rgba(201, 204, 219, 0.76) !important;
}

.play-view .head-actions {
  padding-top: 4px !important;
}

.play-view .search-box {
  width: min(520px, 34vw) !important;
  min-height: 52px !important;
  border-radius: 12px !important;
  background: rgba(6, 8, 15, 0.88) !important;
}

.play-view .ghost-button {
  min-height: 52px !important;
  border-radius: 12px !important;
}

.play-view .character-section {
  margin-top: 4px !important;
}

.play-view .section-head {
  margin-bottom: 14px !important;
}

.play-view .section-head h2 {
  font-size: 24px !important;
  line-height: 1.1 !important;
}

.play-view .section-head p {
  margin-top: 8px !important;
  font-size: 14px !important;
  color: rgba(204, 207, 222, 0.7) !important;
}

.play-view .character-grid {
  display: flex !important;
  align-items: stretch !important;
  gap: 18px !important;
  overflow: visible !important;
  grid-template-columns: none !important;
}

.play-view .character-tile {
  flex: 0 0 var(--play-card-base) !important;
  width: var(--play-card-base) !important;
  min-width: 0 !important;
  max-width: var(--play-card-open) !important;
  min-height: 382px !important;
  height: 382px !important;
  transform: none !important;
  overflow: hidden !important;
  border-radius: 17px !important;
  background: #050711 !important;
  transition:
    flex-basis 260ms cubic-bezier(.2,.75,.2,1),
    width 260ms cubic-bezier(.2,.75,.2,1),
    border-color 200ms ease,
    box-shadow 200ms ease,
    background 200ms ease !important;
}

.play-view .character-tile:hover {
  flex-basis: var(--play-card-open) !important;
  width: var(--play-card-open) !important;
  transform: none !important;
  border-color: rgba(170, 103, 255, 0.82) !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(154, 99, 255, 0.36),
    0 0 42px rgba(126, 78, 255, 0.2) !important;
}

.play-view .character-tile.selected {
  border-color: rgba(177, 107, 255, 0.95) !important;
}

.play-view .character-tile .tile-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: var(--play-card-open) !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 46% 17%, rgba(178, 149, 255, 0.16), transparent 36%),
    linear-gradient(145deg, rgba(17, 20, 33, 0.82), rgba(4, 5, 12, 0.98)) !important;
}

.play-view .character-tile .tile-art::after {
  display: none !important;
}

.play-view .character-tile .tile-art img {
  display: block !important;
  width: var(--play-card-open) !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  transform: none !important;
  image-rendering: auto !important;
  filter: saturate(1.04) contrast(1.03) brightness(0.9) !important;
  transition: filter 200ms ease !important;
}

.play-view .character-tile:hover .tile-art img {
  transform: none !important;
  filter: saturate(1.08) contrast(1.04) brightness(0.98) !important;
}

.play-view .character-tile::before {
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(1, 2, 8, 0.02) 0%, rgba(1, 2, 8, 0.08) 36%, rgba(1, 2, 8, 0.76) 100%),
    linear-gradient(90deg, rgba(2, 3, 8, 0.12), transparent 48%) !important;
}

.play-view .character-tile::after {
  z-index: 2 !important;
  height: 42% !important;
  background: linear-gradient(180deg, transparent 0%, rgba(3, 4, 10, 0.7) 48%, #02030a 100%) !important;
}

.play-view .tile-body {
  position: absolute !important;
  inset: auto 17px 17px !important;
  z-index: 3 !important;
  display: grid !important;
  gap: 6px !important;
  min-height: auto !important;
  padding: 0 !important;
  background: transparent !important;
}

.play-view .tile-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
}

.play-view .tile-title h3 {
  margin: 0 !important;
  font-size: clamp(25px, 1.75vw, 34px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 9px 24px rgba(0, 0, 0, 0.52) !important;
}

.play-view .tile-meta {
  font-size: 12.5px !important;
  font-weight: 760 !important;
  color: rgba(237, 238, 248, 0.76) !important;
}

.play-view .tile-summary {
  max-width: min(260px, calc(var(--play-card-open) - 54px)) !important;
  min-height: 36px !important;
  margin: 4px 0 0 !important;
  color: rgba(235, 232, 247, 0.74) !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
  -webkit-line-clamp: 2 !important;
}

.play-view .tile-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 7px !important;
  max-width: 100% !important;
}

.play-view .tile-tags span,
.play-view .tag-chip {
  border: 1px solid rgba(124, 86, 209, 0.32) !important;
  border-radius: 7px !important;
  background: rgba(51, 34, 117, 0.62) !important;
  color: rgba(216, 205, 255, 0.86) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  padding: 7px 9px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.play-view .tile-badge {
  top: 14px !important;
  left: 14px !important;
  z-index: 4 !important;
  padding: 7px 9px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  background: linear-gradient(135deg, rgba(255, 91, 148, 0.96), rgba(133, 82, 255, 0.96)) !important;
}

.play-view .tile-heart {
  top: 13px !important;
  right: 14px !important;
  width: 34px !important;
  height: 34px !important;
  background: rgba(7, 8, 15, 0.42) !important;
}

.play-view .tile-actions {
  position: absolute !important;
  right: 14px !important;
  bottom: 18px !important;
  top: auto !important;
  z-index: 5 !important;
}

.play-view .add-card-button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(8, 10, 18, 0.54) !important;
  backdrop-filter: blur(10px) !important;
}

.play-view .genre-rail {
  margin-top: 20px !important;
}

.play-view .selection-tray {
  margin-top: 28px !important;
  min-height: 104px !important;
}


@media (max-width: 860px) {
  .play-view .page-head {
    gap: 18px !important;
  }

  .play-view .character-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .play-view .character-tile,
  .play-view .character-tile:hover {
    width: 100% !important;
    max-width: none !important;
    flex-basis: auto !important;
  }

  .play-view .character-tile .tile-art,
  .play-view .character-tile .tile-art img {
    width: 100% !important;
  }
}

/* === Tryva ownership + inline edit + card crop editor patch === */
.character-detail-view .inline-edit-btn,
.tag-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 10px;
  border-radius: 999px;
  border: 1px solid rgba(159, 115, 255, 0.28);
  background: rgba(93, 55, 174, 0.18);
  color: #c9b8ff;
  font-size: 13px;
  cursor: pointer;
  vertical-align: middle;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.character-detail-view .inline-edit-btn:hover,
.tag-edit-btn:hover {
  border-color: rgba(170, 129, 255, 0.72);
  background: rgba(112, 67, 218, 0.36);
  transform: translateY(-1px);
}
.inline-edit-form,
.meta-edit-form {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  width: min(100%, 720px);
}
#detailSummary .inline-edit-form,
#detailSample .inline-edit-form {
  display: flex;
  flex-wrap: wrap;
}
.inline-edit-input {
  width: min(100%, 560px);
  border: 1px solid rgba(162, 126, 255, 0.32);
  border-radius: 12px;
  background: rgba(7, 9, 18, 0.72);
  color: #f7f4ff;
  padding: 10px 12px;
  font: inherit;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
textarea.inline-edit-input { resize: vertical; min-height: 78px; }
.inline-save-btn,
.inline-cancel-btn {
  border: 1px solid rgba(162, 126, 255, 0.25);
  border-radius: 11px;
  padding: 9px 12px;
  font-weight: 800;
  cursor: pointer;
}
.inline-save-btn {
  background: linear-gradient(135deg, #7b42ff, #5e32d2);
  color: white;
}
.inline-cancel-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #b9b3c9;
}
.detail-image-edit-btn {
  position: absolute;
  right: 28px;
  bottom: 124px;
  z-index: 5;
  border: 1px solid rgba(170, 129, 255, 0.38);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(13, 10, 25, 0.72);
  color: #e7dcff;
  font-weight: 900;
  backdrop-filter: blur(14px);
  cursor: pointer;
}
.detail-image-edit-btn.hidden { display: none; }
.tile-photo-edit {
  position: absolute;
  top: 12px;
  right: 48px;
  z-index: 12;
  width: 31px;
  height: 31px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 10, 18, 0.54);
  color: #eaddff;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(14px);
}
.tile-photo-edit:hover {
  border-color: rgba(174, 136, 255, 0.75);
  background: rgba(91, 49, 188, 0.5);
}
#characterGrid .character-tile .tile-art img,
.play-view .character-tile .tile-art img,
.crop-editor-preview .character-tile .tile-art img,
.library-grid .character-tile .tile-art img {
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 12%) !important;
  transform: scale(var(--card-crop-zoom, 1)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 12%) !important;
  transition: filter 0.18s ease !important;
}
#characterGrid .character-tile:hover .tile-art img,
.play-view .character-tile:hover .tile-art img,
.library-grid .character-tile:hover .tile-art img {
  transform: scale(var(--card-crop-zoom, 1)) !important;
}
.crop-editor-card {
  width: min(920px, calc(100vw - 42px));
}
.crop-editor-body {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 24px;
  align-items: stretch;
}
.crop-editor-preview {
  min-height: 380px;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 0%, rgba(111, 70, 230, 0.16), rgba(8, 10, 18, 0.58));
  border: 1px solid rgba(159, 115, 255, 0.18);
}
.crop-editor-preview .character-tile {
  width: 280px !important;
  min-width: 280px !important;
  height: 360px !important;
  pointer-events: none;
}
.crop-editor-controls {
  display: grid;
  gap: 16px;
  align-content: start;
}
.crop-editor-controls label {
  display: grid;
  gap: 8px;
  color: #d6cee9;
  font-weight: 800;
}
.crop-editor-controls input[type="file"] {
  border: 1px dashed rgba(159, 115, 255, 0.35);
  border-radius: 14px;
  padding: 12px;
  color: #bcb4cc;
  background: rgba(255, 255, 255, 0.04);
}
.crop-editor-controls input[type="range"] {
  width: 100%;
  accent-color: #8b5cff;
}
.crop-editor-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .crop-editor-body { grid-template-columns: 1fr; }
}

/* === Tryva v6: fix inline edit, library cards, and photo editor modal === */
.character-detail-view .editable-value {
  display: inline;
}

.character-detail-view #detailName.editing-inline,
.character-detail-view #detailQuote.editing-inline,
.character-detail-view #detailSummary.editing-inline,
.character-detail-view #detailSample.editing-inline,
.character-detail-view #detailMeta.editing-inline,
.character-detail-view #detailTags.editing-inline {
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

.character-detail-view #detailName.editing-inline .inline-edit-form,
.character-detail-view #detailQuote.editing-inline .inline-edit-form,
.character-detail-view #detailSummary.editing-inline .inline-edit-form,
.character-detail-view #detailSample.editing-inline .inline-edit-form,
.character-detail-view #detailMeta.editing-inline .meta-edit-form,
.character-detail-view #detailTags.editing-inline .tag-inline-editor {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: min(100%, 680px) !important;
  max-width: 100% !important;
}

.character-detail-view #detailName.editing-inline .inline-edit-form {
  align-items: center !important;
}

.character-detail-view .inline-edit-input,
.character-detail-view .tag-edit-input {
  flex: 1 1 260px !important;
  min-width: 180px !important;
  max-width: 560px !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 9px 12px !important;
  border-radius: 11px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: rgba(248, 245, 255, 0.96) !important;
  background: rgba(8, 9, 18, 0.86) !important;
  border: 1px solid rgba(162, 126, 255, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 0 0 3px rgba(124, 77, 255, 0.12) !important;
}

.character-detail-view textarea.inline-edit-input {
  flex-basis: 100% !important;
  width: 100% !important;
  min-height: 86px !important;
  resize: vertical !important;
}

.character-detail-view .inline-save-btn,
.character-detail-view .inline-cancel-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 58px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  text-orientation: mixed !important;
}

.character-detail-view .inline-edit-btn,
.character-detail-view .tag-edit-btn {
  flex: 0 0 auto !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin-left: 8px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  opacity: 0.9 !important;
}

.character-detail-view #detailName .inline-edit-btn {
  transform: translateY(-4px) !important;
}

.character-detail-view #detailTags.tag-editing {
  display: block !important;
}

.character-detail-view #detailTags .tag-inline-editor {
  margin-top: 4px !important;
}

/* Photo editor modal must behave like the existing start modal, not an unstyled ghost div. */
#cardImageEditorModal.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px !important;
  background: rgba(3, 4, 10, 0.72) !important;
  backdrop-filter: blur(18px) !important;
}

#cardImageEditorModal.hidden {
  display: none !important;
}

#cardImageEditorModal .crop-editor-card {
  width: min(920px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 64px) !important;
  overflow: auto !important;
  border-radius: 22px !important;
  border: 1px solid rgba(160, 117, 255, 0.25) !important;
  background:
    radial-gradient(circle at 86% 0%, rgba(133, 91, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(15, 17, 30, 0.98), rgba(6, 7, 14, 0.98)) !important;
  box-shadow: 0 32px 120px rgba(0, 0, 0, 0.64) !important;
}

#cardImageEditorModal .modal-head {
  padding: 22px 24px 16px !important;
}

#cardImageEditorModal .modal-head h2 {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 22px !important;
  letter-spacing: -0.035em !important;
}

#cardImageEditorModal .modal-head p {
  margin: 6px 0 0 !important;
  color: rgba(221, 214, 238, 0.66) !important;
  font-size: 13px !important;
}

.crop-editor-body {
  padding: 0 24px 24px !important;
  display: grid !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  gap: 24px !important;
}

.crop-editor-preview {
  min-height: 420px !important;
  align-content: center !important;
}

.crop-editor-preview .character-tile {
  width: 280px !important;
  height: 360px !important;
  min-height: 360px !important;
  pointer-events: none !important;
}

.crop-editor-controls {
  padding-top: 4px !important;
}

.crop-editor-controls label {
  font-size: 13px !important;
  color: rgba(232, 226, 246, 0.86) !important;
}

.crop-help {
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(153, 113, 255, 0.2) !important;
  border-radius: 13px !important;
  color: rgba(216, 207, 235, 0.7) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

/* Library cards are management cards. They should not inherit the Play hover/reveal mess. */


.library-view .character-tile {
  position: relative !important;
  display: block !important;
  height: 344px !important;
  min-height: 344px !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(177, 161, 235, 0.14) !important;
  background: linear-gradient(180deg, rgba(14, 16, 28, 0.98), rgba(5, 6, 12, 1)) !important;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  transform: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

.library-view .character-tile:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(158, 100, 255, 0.62) !important;
  box-shadow: 0 26px 74px rgba(0, 0, 0, 0.46), 0 0 40px rgba(122, 79, 255, 0.14) !important;
}

.library-view .character-tile .tile-art {
  position: absolute !important;
  inset: 10px 10px auto 10px !important;
  width: auto !important;
  height: 190px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(184, 156, 255, 0.18), transparent 44%),
    linear-gradient(145deg, rgba(19, 22, 36, 0.94), rgba(8, 9, 18, 0.98)) !important;
}

.library-view .character-tile .tile-art img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 16%) !important;
  transform: scale(var(--card-crop-zoom, 1)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 16%) !important;
  filter: saturate(1.04) contrast(1.03) brightness(0.92) !important;
}

.library-view .character-tile::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent 38%, rgba(4, 5, 12, 0.86) 70%, rgba(3, 4, 10, 1) 100%) !important;
}

.library-view .character-tile::after,
.library-view .character-tile .tile-art::after,
.library-view .character-tile .tile-art::before {
  content: none !important;
  display: none !important;
}

.library-view .character-tile .tile-body {
  position: absolute !important;
  z-index: 3 !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  display: grid !important;
  gap: 7px !important;
  padding: 0 !important;
  background: transparent !important;
}

.library-view .character-tile .tile-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 8px !important;
}

.library-view .character-tile .tile-title h3 {
  margin: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 880 !important;
  letter-spacing: -0.035em !important;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

.library-view .character-tile .tile-meta {
  color: rgba(224, 219, 239, 0.72) !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

.library-view .character-tile .tile-summary {
  margin: 1px 0 0 !important;
  min-height: 34px !important;
  max-height: 36px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  color: rgba(236, 231, 248, 0.72) !important;
  font-size: 12.2px !important;
  line-height: 1.42 !important;
}

.library-view .character-tile .tile-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 3px !important;
}

.library-view .character-tile .tile-tags span {
  padding: 5px 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(124, 86, 209, 0.26) !important;
  background: rgba(43, 29, 96, 0.72) !important;
  color: rgba(214, 202, 255, 0.86) !important;
  font-size: 10.5px !important;
  font-weight: 780 !important;
}

.library-view .character-tile .tile-badge {
  position: absolute !important;
  z-index: 5 !important;
  top: 15px !important;
  left: 15px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
}

.library-view .character-tile .tile-heart,
.library-view .character-tile .tile-photo-edit {
  top: 15px !important;
  z-index: 6 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: rgba(7, 8, 14, 0.48) !important;
  backdrop-filter: blur(12px) !important;
}

.library-view .character-tile .tile-heart { right: 15px !important; }
.library-view .character-tile .tile-photo-edit { right: 51px !important; }

.library-view .character-tile .tile-actions {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 4 !important;
}

.library-view .character-tile .add-card-button {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 10px !important;
}


@media (max-width: 900px) {
  
  .crop-editor-body {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-06-11 v7: manual card-crop editor + tighter Play/Library card proportions */


.play-view #characterGrid .character-tile {
  --card-base-w: 248px;
  --card-hover-w: 318px;






  border-radius: 17px !important;
  background: #060711 !important;
  transition: flex-basis 240ms cubic-bezier(.18,.9,.24,1), width 240ms cubic-bezier(.18,.9,.24,1), transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
  transform: none !important;
}

.play-view #characterGrid .character-tile:hover,
.play-view #characterGrid .character-tile.selected {
  

  transform: translateY(-4px) !important;
  border-color: rgba(157, 91, 255, .78) !important;
  box-shadow: 0 24px 72px rgba(74, 38, 170, .34), 0 0 0 1px rgba(157, 91, 255, .22) inset !important;
}

.play-view #characterGrid .character-tile .tile-art {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--card-hover-w) !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(42, 37, 62, .82), rgba(7,8,17,.98)) !important;
}

.play-view #characterGrid .character-tile .tile-art img,
.library-view .character-tile .tile-art img,
.crop-card-frame .crop-card-inner > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transition: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.play-view #characterGrid .character-tile:hover .tile-art img,
.play-view #characterGrid .character-tile.selected .tile-art img {
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
}

.play-view #characterGrid .character-tile::after,
.play-view #characterGrid .character-tile .tile-art::after {
  height: 52% !important;
  background: linear-gradient(180deg, rgba(4,5,12,0) 0%, rgba(4,5,12,.58) 45%, rgba(4,5,12,.98) 100%) !important;
}

.play-view #characterGrid .character-tile .tile-body {
  width: min(220px, calc(100% - 30px)) !important;
  padding: 0 15px 16px !important;
  z-index: 5 !important;
}

.play-view #characterGrid .character-tile:hover .tile-body,
.play-view #characterGrid .character-tile.selected .tile-body {
  width: 252px !important;
}

.play-view #characterGrid .tile-title h3,
.library-view .character-tile .tile-title h3 {
  font-size: 28px !important;
  line-height: .98 !important;
  letter-spacing: -.02em !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.play-view #characterGrid .character-tile .tile-meta,
.library-view .character-tile .tile-meta {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  margin: 5px 0 0 !important;
  color: rgba(232, 226, 248, .76) !important;
}

.play-view #characterGrid .character-tile .tile-summary,
.library-view .character-tile .tile-summary {
  min-height: 32px !important;
  margin: 16px 0 12px !important;
  max-width: 210px !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: rgba(239, 234, 250, .74) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.tag-list,
.tile-tags {
  gap: 7px !important;
}

.tag-chip,
.tag-list span {
  border-radius: 7px !important;
  padding: 5px 9px !important;
  background: rgba(79, 45, 158, .62) !important;
  border: 1px solid rgba(168, 128, 255, .22) !important;
  color: rgba(214, 197, 255, .9) !important;
  font-size: 11.5px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
}

.play-view .page-head {
  margin-top: -12px !important;
  margin-bottom: 28px !important;
}

.play-view .page-head h1 {
  font-size: clamp(46px, 3.1vw, 58px) !important;
}

/* Library management cards: keep them tidy and stop the text from escaping like it pays rent. */

.library-view .character-tile {
  height: 330px !important;
  min-height: 330px !important;
  width: 100% !important;
  overflow: hidden !important;
}
.library-view .character-tile .tile-art {
  inset: 10px 10px auto 10px !important;
  height: 178px !important;
  width: auto !important;
}
.library-view .character-tile .tile-body {
  inset: auto 0 0 0 !important;
  padding: 0 16px 16px !important;
  width: auto !important;
  z-index: 4 !important;
}
.library-view .character-tile .tile-summary {
  max-width: 100% !important;
  margin-top: 12px !important;
}
.library-view .character-tile .add-card-button {
  width: 30px !important;
  height: 30px !important;
}
.library-view .tile-photo-edit,
.library-view .tile-heart {
  top: 12px !important;
  width: 30px !important;
  height: 30px !important;
  z-index: 14 !important;
}
.library-view .tile-photo-edit { right: 48px !important; }
.library-view .tile-heart { right: 12px !important; }

/* Direct crop editor */
.direct-crop-editor {
  width: min(1120px, calc(100vw - 44px)) !important;
  max-height: min(860px, calc(100vh - 48px)) !important;
  overflow: auto !important;
  padding: 30px 34px 26px !important;
}
.crop-modal-head small {
  display: inline-block;
  margin-bottom: 7px;
  color: rgba(184, 150, 255, .92);
  font-weight: 850;
  letter-spacing: .02em;
}
.crop-modal-head h2 {
  margin: 0 !important;
  font-size: 28px !important;
}
.crop-modal-head p {
  margin-top: 8px !important;
  max-width: 720px;
}
.direct-crop-body {
  display: grid !important;
  grid-template-columns: minmax(260px, 340px) 1fr !important;
  gap: 28px !important;
  align-items: start !important;
}
.crop-source-panel,
.crop-work-panel {
  border: 1px solid rgba(160, 117, 255, .18);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(14, 16, 30, .74), rgba(7, 8, 16, .78));
  padding: 18px;
}
.crop-source-head,
.crop-work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.crop-source-head strong,
.crop-work-head strong {
  color: rgba(255,255,255,.92);
  font-size: 15px;
}
.crop-work-head span {
  color: rgba(217, 205, 245, .58);
  font-size: 12px;
}
.crop-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(166, 128, 255, .32);
  background: rgba(105, 64, 220, .24);
  color: rgba(235, 226, 255, .92);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.crop-file-button input {
  display: none;
}
.crop-source-image {
  display: grid;
  place-items: center;
  min-height: 390px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.035);
  border: 1px dashed rgba(174, 138, 255, .24);
}
.crop-source-image img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.crop-source-image span {
  color: rgba(230, 220, 255, .5);
  font-size: 13px;
}
.crop-card-frame {
  position: relative;
  overflow: hidden;
  border-radius: 17px;
  background: #050611;
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 18px 62px rgba(0,0,0,.34);
}
.crop-card-frame-hover {
  width: 318px;
  height: 354px;
}
#cropDragFrame {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
#cropDragFrame.dragging {
  cursor: grabbing;
  border-color: rgba(168, 107, 255, .78);
  box-shadow: 0 0 0 1px rgba(159, 91, 255, .28), 0 24px 90px rgba(86, 45, 191, .32);
}
.crop-card-frame-normal {
  width: 248px;
  height: 354px;
}
.crop-card-frame .crop-card-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.crop-card-frame .crop-card-inner > img {
  position: absolute;
  inset: 0;
  filter: saturate(1.03) contrast(1.03) brightness(.96);
}
.crop-card-gradient {
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(5,6,14,0), rgba(5,6,14,.6) 42%, rgba(5,6,14,.98));
  pointer-events: none;
}
.crop-card-copy {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 15px;
  z-index: 2;
  color: white;
}
.crop-card-copy em {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, #d65cff, #7649ff);
  color: white;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}
.crop-card-copy strong {
  display: block;
  font-size: 28px;
  line-height: .95;
  letter-spacing: -.02em;
}
.crop-card-copy small {
  display: block;
  margin-top: 5px;
  color: rgba(232,226,248,.74);
  font-size: 12.5px;
}
.crop-card-copy p {
  margin: 14px 0 10px;
  max-width: 210px;
  color: rgba(239,234,250,.74);
  font-size: 12.5px;
  line-height: 1.45;
}
.crop-tool-row {
  display: flex;
  gap: 10px;
  margin: 16px 0 18px;
}
.crop-tool-row button {
  min-height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(174, 138, 255, .22);
  background: rgba(255,255,255,.045);
  color: rgba(237,230,255,.9);
  font-weight: 800;
  cursor: pointer;
}
.crop-tool-row button:hover {
  border-color: rgba(174, 138, 255, .55);
  background: rgba(103, 61, 220, .22);
}
.crop-mini-previews {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.crop-mini-previews > div > span {
  display: block;
  margin-bottom: 8px;
  color: rgba(220, 210, 246, .66);
  font-size: 12px;
  font-weight: 800;
}
.crop-mini-previews .crop-card-frame {
  transform: scale(.52);
  transform-origin: top left;
  margin-right: -118px;
  margin-bottom: -170px;
  pointer-events: none;
}
.direct-crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
.direct-crop-actions button {
  min-width: 126px !important;
}


/* 2026-06-11 v8: fixed card frame system + hover tag reveal. Stop letting text/content resize the cards, because apparently CSS wants to live feral. */
:root {
  --tryva-card-w: 218px;
  --tryva-card-hover-w: 280px;
  --tryva-card-h: 302px;
  --tryva-card-radius: 14px;
  --tryva-card-aspect-ratio: 218 / 302;
  --tryva-card-hover-aspect-ratio: 280 / 302;
}

/* Play cards: one fixed frame. Hover only reveals width, never changes height or image scale. */

.play-view #characterGrid .character-tile {
  position: relative !important;







  border-radius: var(--tryva-card-radius) !important;

  transition: flex-basis 220ms cubic-bezier(.18,.9,.24,1), width 220ms cubic-bezier(.18,.9,.24,1), transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}
.play-view #characterGrid .character-tile:hover,
.play-view #characterGrid .character-tile.selected {
  

  transform: translateY(-4px) !important;
}
.play-view #characterGrid .character-tile .tile-art {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--tryva-card-hover-w) !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}
.play-view #characterGrid .character-tile .tile-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
}
.play-view #characterGrid .character-tile .tile-body {
  position: absolute !important;
  left: 15px !important;
  right: auto !important;
  bottom: 15px !important;
  width: 216px !important;
  padding: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
.play-view #characterGrid .character-tile:hover .tile-body,
.play-view #characterGrid .character-tile.selected .tile-body {
  width: 286px !important;
}
.play-view #characterGrid .tile-actions,
.play-view #characterGrid .tile-heart,
.play-view #characterGrid .tile-photo-edit,
.play-view #characterGrid .tile-badge {
  pointer-events: auto !important;
}

/* Library cards use the same fixed card frame. The create card must not be some bloated furniture item. */

.library-view .create-card,
.library-view .character-tile {
  width: var(--tryva-card-w) !important;
  height: var(--tryva-card-h) !important;
  min-height: var(--tryva-card-h) !important;
  max-height: var(--tryva-card-h) !important;
  border-radius: var(--tryva-card-radius) !important;
  overflow: hidden !important;
}
.library-view .character-tile .tile-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}
.library-view .character-tile .tile-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
}
.library-view .character-tile .tile-body {
  position: absolute !important;
  left: 15px !important;
  right: 15px !important;
  bottom: 15px !important;
  width: auto !important;
  padding: 0 !important;
  z-index: 5 !important;
}
.library-view .create-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}
.library-view .create-card span {
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(170,135,255,.22) !important;
}

/* Fixed typography so names/descriptions do not shove the whole layout around like they own the lease. */
.play-view #characterGrid .tile-title,
.library-view .character-tile .tile-title {
  min-height: 31px !important;
  align-items: flex-end !important;
}
.play-view #characterGrid .tile-title h3,
.library-view .character-tile .tile-title h3,
.crop-card-copy strong {
  font-size: 27px !important;
  line-height: .96 !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.play-view #characterGrid .tile-meta,
.library-view .character-tile .tile-meta,
.crop-card-copy small {
  height: 17px !important;
  font-size: 12px !important;
  line-height: 17px !important;
  margin: 4px 0 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.play-view #characterGrid .tile-summary,
.library-view .character-tile .tile-summary,
.crop-card-copy p {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 14px 0 10px !important;
  max-width: 100% !important;
  font-size: 12.5px !important;
  line-height: 18px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Tags: never show half-cut tags. Compact shows 2. Hover/reveal shows hidden ones. */
.tile-tags,
.crop-card-copy .tile-tags,
.crop-card-copy .preview-tags {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  height: 24px !important;
  max-height: 24px !important;
}
.tile-tags .tag-chip,
.crop-card-copy .tag-chip {
  flex: 0 0 auto !important;
  max-width: 96px !important;
  height: 23px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 7px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: rgba(63, 36, 126, .72) !important;
  border: 1px solid rgba(165, 122, 255, .24) !important;
  color: rgba(213, 197, 255, .92) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}
.tile-tags .reveal-tag {
  display: none !important;
}
.play-view #characterGrid .character-tile:hover .tile-tags .reveal-tag,
.play-view #characterGrid .character-tile.selected .tile-tags .reveal-tag,
.library-view .character-tile:hover .tile-tags .reveal-tag,
.crop-card-copy .preview-tags.expanded .reveal-tag,
.crop-card-frame-hover .preview-tags .reveal-tag {
  display: inline-flex !important;
}
.play-view #characterGrid .character-tile:hover .tile-tags,
.play-view #characterGrid .character-tile.selected .tile-tags {
  width: 286px !important;
}
.play-view #characterGrid .character-tile .tile-tags {
  width: 216px !important;
}
.library-view .character-tile .tile-tags {
  width: 218px !important;
}
.crop-card-copy .preview-tags.compact .reveal-tag {
  display: none !important;
}
.crop-card-copy .preview-tags.expanded .tag-chip {
  max-width: 92px !important;
}

/* Crop editor frame sizes match the actual card system. */
.crop-card-frame-hover {
  width: var(--tryva-card-hover-w) !important;
  height: var(--tryva-card-h) !important;
}
.crop-card-frame-normal {
  width: var(--tryva-card-w) !important;
  height: var(--tryva-card-h) !important;
}
.crop-card-copy {
  left: 15px !important;
  right: auto !important;
  bottom: 15px !important;
  width: 216px !important;
}
.crop-card-frame-hover .crop-card-copy {
  width: 286px !important;
}
.crop-mini-previews .crop-card-frame {
  transform: scale(.54) !important;
  transform-origin: top left !important;
  margin-right: -116px !important;
  margin-bottom: -164px !important;
}

@media (max-width: 900px) {
  :root {
    --tryva-card-w: 224px;
    --tryva-card-hover-w: 284px;
    --tryva-card-h: 336px;
    --tryva-card-aspect-ratio: 224 / 336;
    --tryva-card-hover-aspect-ratio: 284 / 336;
  }
  
}

/* 2026-06-11 v9: keep Play main untouched; make Library + crop-editor previews use the exact same card frame/reveal geometry as the Play main card. */
/* Library: same normal card window as Play, with a hover-width image layer clipped by the normal card frame. */

.library-view .create-card,
.library-view .character-tile {
  position: relative !important;
  width: var(--tryva-card-w) !important;
  min-width: var(--tryva-card-w) !important;
  max-width: var(--tryva-card-w) !important;
  height: var(--tryva-card-h) !important;
  min-height: var(--tryva-card-h) !important;
  max-height: var(--tryva-card-h) !important;
  border-radius: var(--tryva-card-radius) !important;
  overflow: hidden !important;
}
.library-view .character-tile .tile-art {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--tryva-card-hover-w) !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}
.library-view .character-tile .tile-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
}
.library-view .character-tile .tile-body {
  position: absolute !important;
  left: 15px !important;
  right: auto !important;
  bottom: 15px !important;
  width: 216px !important;
  padding: 0 !important;
  z-index: 5 !important;
}
.library-view .character-tile:hover .tile-body {
  width: 216px !important;
}
.library-view .character-tile .tile-tags {
  width: 216px !important;
}
.library-view .character-tile:hover .tile-tags {
  width: 216px !important;
}
.library-view .character-tile:hover .tile-tags .reveal-tag {
  display: none !important;
}
.library-view .tile-photo-edit,
.library-view .tile-heart {
  top: 12px !important;
  z-index: 18 !important;
}
.library-view .tile-photo-edit { right: 48px !important; }
.library-view .tile-heart { right: 12px !important; }

/* Crop editor: normal preview must be a clipped normal-width window over a hover-width image, exactly like Play main before hover. */
.crop-card-frame-normal .crop-card-inner {
  width: var(--tryva-card-hover-w) !important;
  height: 100% !important;
}
.crop-card-frame-normal .crop-card-inner > img {
  width: var(--tryva-card-hover-w) !important;
  height: 100% !important;
}
.crop-card-frame-hover .crop-card-inner {
  width: var(--tryva-card-hover-w) !important;
  height: 100% !important;
}
.crop-card-frame-hover .crop-card-inner > img,
#cropDragFrame .crop-card-inner > img {
  width: var(--tryva-card-hover-w) !important;
  height: 100% !important;
}
.crop-card-frame-normal .crop-card-copy {
  width: 216px !important;
}
.crop-card-frame-hover .crop-card-copy,
#cropDragFrame .crop-card-copy {
  width: 286px !important;
}

/* Keep editor mini previews visually consistent and stop them looking like a different card species. */
.crop-mini-previews .crop-card-frame-normal,
.crop-mini-previews .crop-card-frame-hover {
  border-radius: var(--tryva-card-radius) !important;
}
.crop-mini-previews .crop-card-frame {
  box-shadow: 0 10px 38px rgba(0,0,0,.35) !important;
}

/* 2026-06-11 v10: Library cards must behave exactly like Play main cards. Main Play stays untouched. */


.library-view .create-card,
.library-view .character-tile {
  flex: 0 0 var(--tryva-card-w) !important;
  width: var(--tryva-card-w) !important;
  min-width: var(--tryva-card-w) !important;
  max-width: var(--tryva-card-hover-w) !important;
  height: var(--tryva-card-h) !important;
  min-height: var(--tryva-card-h) !important;
  max-height: var(--tryva-card-h) !important;
  border-radius: var(--tryva-card-radius) !important;
  overflow: hidden !important;
}

.library-view .character-tile {
  transition:
    flex-basis 260ms cubic-bezier(.2,.75,.2,1),
    width 260ms cubic-bezier(.2,.75,.2,1),
    border-color 200ms ease,
    box-shadow 200ms ease,
    background 200ms ease !important;
}

.library-view .character-tile:hover {
  flex-basis: var(--tryva-card-hover-w) !important;
  width: var(--tryva-card-hover-w) !important;
  min-width: var(--tryva-card-hover-w) !important;
  max-width: var(--tryva-card-hover-w) !important;
  transform: none !important;
  z-index: 20 !important;
  border-color: rgba(170, 103, 255, 0.82) !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(154, 99, 255, 0.36),
    0 0 42px rgba(126, 78, 255, 0.2) !important;
}

.library-view .character-tile .tile-art {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--tryva-card-hover-w) !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 46% 17%, rgba(178, 149, 255, 0.16), transparent 36%),
    linear-gradient(145deg, rgba(17, 20, 33, 0.82), rgba(4, 5, 12, 0.98)) !important;
}

.library-view .character-tile .tile-art img {
  display: block !important;
  width: var(--tryva-card-hover-w) !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  filter: saturate(1.04) contrast(1.03) brightness(0.9) !important;
  transition: filter 200ms ease !important;
}

.library-view .character-tile:hover .tile-art img {
  filter: saturate(1.08) contrast(1.04) brightness(0.98) !important;
}

.library-view .character-tile::before {
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(1, 2, 8, 0.02) 0%, rgba(1, 2, 8, 0.08) 36%, rgba(1, 2, 8, 0.76) 100%),
    linear-gradient(90deg, rgba(2, 3, 8, 0.12), transparent 48%) !important;
}

.library-view .character-tile::after {
  z-index: 2 !important;
  height: 42% !important;
  background: linear-gradient(180deg, transparent 0%, rgba(3, 4, 10, 0.7) 48%, #02030a 100%) !important;
}

.library-view .character-tile .tile-body {
  position: absolute !important;
  left: 15px !important;
  right: auto !important;
  bottom: 15px !important;
  width: 216px !important;
  padding: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.library-view .character-tile:hover .tile-body {
  width: 286px !important;
}

.library-view .character-tile .tile-tags {
  width: 216px !important;
}

.library-view .character-tile:hover .tile-tags {
  width: 286px !important;
}

.library-view .character-tile:hover .tile-tags .reveal-tag {
  display: inline-flex !important;
}

.library-view .character-tile .tile-actions,
.library-view .character-tile .tile-heart,
.library-view .character-tile .tile-photo-edit,
.library-view .character-tile .tile-badge {
  pointer-events: auto !important;
}

.library-view .tile-photo-edit,
.library-view .tile-heart {
  top: 12px !important;
  z-index: 18 !important;
}
.library-view .tile-photo-edit { right: 48px !important; }
.library-view .tile-heart { right: 12px !important; }

.library-view .character-tile .tile-actions {
  position: absolute !important;
  right: 14px !important;
  bottom: 18px !important;
  top: auto !important;
  z-index: 18 !important;
}

.library-view .character-tile .add-card-button {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

.library-view .create-card {
  flex: 0 0 var(--tryva-card-w) !important;
  width: var(--tryva-card-w) !important;
  min-width: var(--tryva-card-w) !important;
  max-width: var(--tryva-card-w) !important;
}

.library-view .create-card:hover {
  flex-basis: var(--tryva-card-w) !important;
  width: var(--tryva-card-w) !important;
  min-width: var(--tryva-card-w) !important;
  max-width: var(--tryva-card-w) !important;
}

/* 2026-06-11 v11: final sync. Library and crop editor must use the same visible card frame as Play. */


.library-view .create-card,
.library-view .character-tile {
  flex: 0 0 var(--tryva-card-w) !important;
  width: var(--tryva-card-w) !important;
  min-width: var(--tryva-card-w) !important;
  max-width: none !important;
  height: var(--tryva-card-h) !important;
  min-height: var(--tryva-card-h) !important;
  max-height: var(--tryva-card-h) !important;
  border-radius: var(--tryva-card-radius) !important;
  overflow: hidden !important;
}

.library-view .character-tile {
  background: #050711 !important;
  transform: translateY(0) !important;
  transition:
    flex-basis 220ms cubic-bezier(.18,.9,.24,1),
    width 220ms cubic-bezier(.18,.9,.24,1),
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease !important;
}

.library-view .character-tile:hover,
.library-view .character-tile:focus-visible,
.library-view .character-tile.selected {
  flex-basis: var(--tryva-card-hover-w) !important;
  width: var(--tryva-card-hover-w) !important;
  min-width: var(--tryva-card-hover-w) !important;
  transform: translateY(-4px) !important;
  z-index: 20 !important;
}

.library-view .character-tile .tile-art {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--tryva-card-hover-w) !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background: #050711 !important;
}

.library-view .character-tile .tile-art img {
  display: block !important;
  width: var(--tryva-card-hover-w) !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  filter: saturate(1.04) contrast(1.03) brightness(0.9) !important;
  transition: filter 200ms ease !important;
}

.library-view .character-tile:hover .tile-art img,
.library-view .character-tile:focus-visible .tile-art img,
.library-view .character-tile.selected .tile-art img {
  filter: saturate(1.08) contrast(1.04) brightness(0.98) !important;
}

.library-view .character-tile::before {
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(1, 2, 8, 0.02) 0%, rgba(1, 2, 8, 0.08) 36%, rgba(1, 2, 8, 0.76) 100%),
    linear-gradient(90deg, rgba(2, 3, 8, 0.12), transparent 48%) !important;
}

.library-view .character-tile::after,
.library-view .character-tile .tile-art::after,
.library-view .character-tile .tile-art::before {
  display: none !important;
  content: none !important;
}

.library-view .character-tile .tile-body {
  position: absolute !important;
  left: 15px !important;
  right: auto !important;
  bottom: 15px !important;
  width: 216px !important;
  padding: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
  background: transparent !important;
}

.library-view .character-tile:hover .tile-body,
.library-view .character-tile:focus-visible .tile-body,
.library-view .character-tile.selected .tile-body {
  width: 286px !important;
}

.library-view .character-tile .tile-title {
  display: block !important;
  min-height: 31px !important;
}

.library-view .character-tile .tile-title h3 {
  margin: 0 !important;
  font-size: 27px !important;
  line-height: .96 !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,0.98) !important;
  text-shadow: 0 8px 24px rgba(0,0,0,0.55) !important;
}

.library-view .character-tile .tile-meta {
  height: 17px !important;
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  line-height: 17px !important;
  font-weight: 620 !important;
  color: rgba(226, 223, 241, 0.74) !important;
}

.library-view .character-tile .tile-summary {
  width: 216px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 14px 0 10px !important;
  font-size: 12.5px !important;
  line-height: 18px !important;
  color: rgba(239, 234, 249, 0.76) !important;
}

.library-view .character-tile:hover .tile-summary,
.library-view .character-tile:focus-visible .tile-summary,
.library-view .character-tile.selected .tile-summary {
  width: 286px !important;
}

.library-view .character-tile .tile-tags {
  width: 216px !important;
}

.library-view .character-tile:hover .tile-tags,
.library-view .character-tile:focus-visible .tile-tags,
.library-view .character-tile.selected .tile-tags {
  width: 286px !important;
}

.library-view .character-tile:hover .tile-tags .reveal-tag,
.library-view .character-tile:focus-visible .tile-tags .reveal-tag,
.library-view .character-tile.selected .tile-tags .reveal-tag {
  display: inline-flex !important;
}

.library-view .character-tile .tile-actions,
.library-view .character-tile .tile-heart,
.library-view .character-tile .tile-photo-edit,
.library-view .character-tile .tile-badge {
  pointer-events: auto !important;
}

.library-view .tile-photo-edit,
.library-view .tile-heart {
  top: 12px !important;
  z-index: 18 !important;
}

.library-view .tile-photo-edit { right: 48px !important; }
.library-view .tile-heart { right: 12px !important; }

.library-view .character-tile .tile-actions {
  position: absolute !important;
  right: 14px !important;
  bottom: 18px !important;
  top: auto !important;
  z-index: 18 !important;
}

.library-view .character-tile .add-card-button {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 10px !important;
}

.library-view .create-card,
.library-view .create-card:hover {
  flex-basis: var(--tryva-card-w) !important;
  width: var(--tryva-card-w) !important;
  min-width: var(--tryva-card-w) !important;
  max-width: var(--tryva-card-w) !important;
  transform: none !important;
}

.crop-card-frame {
  border-radius: var(--tryva-card-radius) !important;
  overflow: hidden !important;
}

.crop-card-frame-normal {
  width: var(--tryva-card-w) !important;
  height: var(--tryva-card-h) !important;
}

.crop-card-frame-hover,
#cropDragFrame {
  width: var(--tryva-card-hover-w) !important;
  height: var(--tryva-card-h) !important;
}

.crop-card-frame-normal .crop-card-inner,
.crop-card-frame-hover .crop-card-inner,
#cropDragFrame .crop-card-inner {
  position: relative !important;
  width: var(--tryva-card-hover-w) !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #050711 !important;
}

.crop-card-frame-normal .crop-card-inner > img,
.crop-card-frame-hover .crop-card-inner > img,
#cropDragFrame .crop-card-inner > img {
  display: block !important;
  width: var(--tryva-card-hover-w) !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
}

.crop-card-copy {
  left: 15px !important;
  right: auto !important;
  bottom: 15px !important;
  width: 216px !important;
}

.crop-card-frame-hover .crop-card-copy,
#cropDragFrame .crop-card-copy {
  width: 286px !important;
}

.crop-card-copy strong {
  letter-spacing: 0 !important;
}

.detail-quote-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(360px, 28vw) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: rgba(235, 224, 255, 0.96) !important;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.62) !important;
}

.detail-quote-card > span {
  color: rgba(151, 93, 255, 0.92) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 38px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.detail-quote-card p,
.detail-quote-card .editable-value {
  margin: 0 !important;
  font-family: "Noto Serif KR", "Malgun Gothic", serif !important;
  font-size: clamp(20px, 2vw, 31px) !important;
  line-height: 1.5 !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  color: rgba(230, 211, 255, 0.98) !important;
}

.detail-quote-card .inline-edit-btn {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  vertical-align: middle !important;
  margin-left: 8px !important;
}

/* 2026-06-12 crop editor face guide + Library card viewport correction. Main Play cards stay untouched. */
.library-view .character-tile .tile-art {
  left: calc((var(--tryva-card-w) - var(--tryva-card-hover-w)) / 2) !important;
  transition: left 220ms cubic-bezier(.18,.9,.24,1) !important;
}

.library-view .character-tile:hover .tile-art,
.library-view .character-tile:focus-visible .tile-art,
.library-view .character-tile.selected .tile-art {
  left: 0 !important;
}

.library-view .character-tile .tile-art img {
  transform-origin: center center !important;
}

#cropDragFrame .crop-card-inner > img,
.crop-card-frame-normal .crop-card-inner > img,
.crop-card-frame-hover .crop-card-inner > img {
  transform-origin: center center !important;
}

#cropDragFrame .crop-card-inner {
  isolation: isolate !important;
}

.crop-face-guide {
  position: absolute !important;
  left: 50% !important;
  top: 31% !important;
  z-index: 4 !important;
  width: 86px !important;
  height: 122px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  border: 1.5px solid rgba(231, 218, 255, 0.68) !important;
  border-radius: 50% / 56% !important;
  background:
    radial-gradient(ellipse at center, rgba(190, 153, 255, 0.1) 0%, rgba(132, 92, 255, 0.045) 52%, transparent 72%) !important;
  box-shadow:
    0 0 0 1px rgba(126, 91, 255, 0.18),
    0 0 34px rgba(142, 95, 255, 0.2),
    inset 0 0 28px rgba(255, 255, 255, 0.055) !important;
  opacity: 0.72 !important;
}

.crop-face-guide::before,
.crop-face-guide::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
}

.crop-face-guide::before {
  left: 50% !important;
  top: -22px !important;
  bottom: -22px !important;
  width: 1px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, transparent, rgba(232, 222, 255, 0.42) 22%, rgba(232, 222, 255, 0.42) 78%, transparent) !important;
}

.crop-face-guide::after {
  left: 15% !important;
  right: 15% !important;
  top: 42% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(232, 222, 255, 0.38), transparent) !important;
}

.crop-face-guide span {
  position: absolute !important;
  left: 50% !important;
  top: 42% !important;
  width: 44px !important;
  height: 14px !important;
  transform: translate(-50%, -50%) !important;
  border-top: 1px solid rgba(232, 222, 255, 0.34) !important;
  border-radius: 999px !important;
}

.crop-face-guide em {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 9px) !important;
  transform: translateX(-50%) !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  background: rgba(8, 9, 17, 0.56) !important;
  color: rgba(238, 231, 255, 0.72) !important;
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
  backdrop-filter: blur(8px) !important;
}

#cropDragFrame.dragging .crop-face-guide,
.character-wizard .cw-create-crop-frame.dragging .crop-face-guide {
  opacity: 0.9 !important;
  border-color: rgba(255, 244, 255, 0.84) !important;
  box-shadow:
    0 0 0 1px rgba(169, 118, 255, 0.3),
    0 0 44px rgba(161, 103, 255, 0.3),
    inset 0 0 30px rgba(255, 255, 255, 0.07) !important;
}

/* 2026-06-13 v10: pan with object-position and zoom from the same focal point, so zoom adds real drag range without exposing empty edges. */
.library-view .character-tile .tile-art img,
#cropDragFrame .crop-card-inner > img,
.crop-card-frame-normal .crop-card-inner > img,
.crop-card-frame-hover .crop-card-inner > img {
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: translate(var(--card-pan-x, 0%), var(--card-pan-y, 0%)) scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 50%) !important;
}

/* 2026-06-13 v11: Library cards use the same image window as Play. Hover expands the card frame, not the image. */
.library-view .character-tile .tile-art,
.library-view .character-tile:hover .tile-art,
.library-view .character-tile:focus-visible .tile-art,
.library-view .character-tile.selected .tile-art {
  position: absolute !important;
  display: block !important;
  inset: 0 auto auto 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--tryva-card-hover-w) !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
}

.library-view .character-tile .tile-art img,
.library-view .character-tile:hover .tile-art img,
.library-view .character-tile:focus-visible .tile-art img,
.library-view .character-tile.selected .tile-art img {
  position: absolute !important;
  display: block !important;
  inset: 0 auto auto 0 !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  bottom: auto !important;
  width: var(--tryva-card-hover-w) !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: translate(0, 0) scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transition: filter 200ms ease !important;
}

.library-view .character-tile .tile-tags,
.library-view .character-tile:hover .tile-tags,
.library-view .character-tile:focus-visible .tile-tags,
.library-view .character-tile.selected .tile-tags {
  height: auto !important;
  min-height: 25px !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 2px !important;
  align-items: flex-start !important;
}

.library-view .character-tile .tile-tags .tag-chip,
.library-view .character-tile .tile-tags span {
  height: 24px !important;
  padding-top: 0 !important;
  padding-bottom: 1px !important;
  line-height: 1 !important;
}

/* 2026-06-13 v13: VN play stage polish. Speaking character stays alive; idle characters recede. */
.chat-view .vn-stage {
  background-position: center 48% !important;
}

.chat-view .vn-scene-haze {
  background:
    linear-gradient(180deg, rgba(2, 3, 7, 0.03) 0%, rgba(2, 3, 7, 0.08) 44%, rgba(2, 3, 7, 0.68) 100%),
    linear-gradient(90deg, rgba(4, 5, 10, 0.7) 0%, transparent 24%, transparent 76%, rgba(4, 5, 10, 0.7) 100%) !important;
}

.chat-view .vn-stage.has-speaker .vn-character:not(.speaking) {
  opacity: 0.42 !important;
  filter: grayscale(0.38) saturate(0.54) brightness(0.52) contrast(0.9) blur(0.2px) !important;
  transform: translate3d(-50%, 9%, 0) scale(0.955) !important;
}

.chat-view .vn-character.speaking {
  z-index: 36 !important;
  opacity: 1 !important;
  filter: saturate(1.06) brightness(1.04) contrast(1.02) !important;
  transform: translate3d(-50%, 4.5%, 0) scale(1.035) !important;
}

.chat-view .vn-bubble,
.chat-view .vn-user-bubble {
  gap: 7px !important;
  padding: 14px 17px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(186, 163, 255, 0.2) !important;
  background:
    linear-gradient(145deg, rgba(17, 20, 33, 0.94), rgba(8, 10, 18, 0.88)) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 0 1px rgba(123, 82, 230, 0.08) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
}

.chat-view .vn-bubble {
  width: clamp(230px, 22vw, 340px) !important;
  max-height: 168px !important;
  transform: translate(-50%, -50%) !important;
}

.chat-view .vn-bubble::after,
.chat-view .vn-user-bubble::after {
  content: none !important;
  display: none !important;
}

.chat-view .vn-bubble::before {
  top: -10px !important;
  right: 15px !important;
  font-size: 22px !important;
  color: rgba(168, 112, 255, 0.96) !important;
  text-shadow: 0 0 18px rgba(130, 84, 255, 0.65) !important;
}

.chat-view .vn-bubble strong,
.chat-view .vn-user-bubble strong {
  font-size: 12.5px !important;
  line-height: 1.1 !important;
  font-weight: 760 !important;
  color: rgba(180, 139, 255, 0.95) !important;
}

.chat-view .vn-bubble-text,
.chat-view .vn-user-bubble > span {
  display: block !important;
  gap: 0 !important;
  font-size: clamp(14px, 0.92vw, 16px) !important;
  line-height: 1.56 !important;
  font-weight: 520 !important;
  letter-spacing: 0 !important;
  color: rgba(246, 243, 255, 0.92) !important;
}

.chat-view .speech-line {
  color: rgba(248, 245, 255, 0.94) !important;
}

.chat-view .action-line {
  margin-top: 5px !important;
  font-size: 0.9em !important;
  line-height: 1.45 !important;
  font-weight: 520 !important;
  color: rgba(185, 151, 255, 0.82) !important;
}

.chat-view .vn-narrative {
  bottom: clamp(46px, 7%, 74px) !important;
  width: min(780px, calc(100% - 126px)) !important;
  padding: 20px 28px !important;
  gap: 11px !important;
  border-radius: 18px !important;
  border-color: rgba(239, 233, 255, 0.26) !important;
  background:
    linear-gradient(135deg, rgba(16, 18, 30, 0.74), rgba(7, 8, 15, 0.66)) !important;
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
}

.chat-view .vn-narrative strong {
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
  color: rgba(187, 144, 255, 0.96) !important;
}

.chat-view .vn-narrative p {
  margin: 0 !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1.68 !important;
  font-weight: 520 !important;
  color: rgba(247, 244, 255, 0.9) !important;
}

/* 2026-06-13 v14: character detail editor. Keep Play cards and card-crop editor untouched. */
body.detail-active .workspace {
  padding: 38px 36px 132px !important;
  overflow-x: hidden !important;
}

.character-detail-view {
  min-height: calc(100vh - 76px) !important;
  padding: 0 !important;
}

.character-detail-view .detail-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(430px, 0.92fr) minmax(620px, 1.42fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: min(720px, calc(100vh - 118px)) !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background:
    radial-gradient(circle at 80% 15%, rgba(130, 83, 255, 0.18), transparent 31%),
    linear-gradient(90deg, rgba(4, 5, 12, 0.98) 0%, rgba(5, 6, 13, 0.95) 39%, rgba(8, 8, 16, 0.44) 56%, rgba(6, 7, 14, 0.12) 100%) !important;
  box-shadow: none !important;
}

.character-detail-view .detail-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(4, 5, 12, 0.94) 0%, rgba(4, 5, 12, 0.82) 35%, rgba(4, 5, 12, 0.08) 60%, transparent 100%) !important;
}

.character-detail-view .detail-copy {
  position: relative !important;
  z-index: 5 !important;
  width: min(560px, 100%) !important;
  padding: clamp(44px, 6vh, 78px) 0 44px clamp(48px, 5vw, 92px) !important;
  align-self: start !important;
}

.character-detail-view .detail-badge {
  margin-bottom: 16px !important;
  padding: 7px 13px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #9f43ff, #6e3df0) !important;
  color: white !important;
  box-shadow: 0 12px 34px rgba(126, 68, 255, 0.26) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.character-detail-view .detail-copy h1 {
  margin: 0 0 8px !important;
  color: rgba(255, 255, 255, 0.98) !important;
  font-size: clamp(52px, 5.8vw, 82px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
}

.character-detail-view #detailMeta {
  margin: 0 0 18px !important;
  color: rgba(231, 227, 241, 0.86) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}

.character-detail-view #detailQuote {
  display: none !important;
}

.character-detail-view #detailSummary {
  width: min(520px, 100%) !important;
  min-height: 96px !important;
  margin: 22px 0 20px !important;
  color: rgba(237, 233, 246, 0.88) !important;
  font-size: 16px !important;
  line-height: 1.78 !important;
  font-weight: 520 !important;
}

.character-detail-view #detailTags {
  margin: 0 0 24px !important;
}

.character-detail-view .detail-stats {
  width: min(500px, 100%) !important;
  margin: 0 0 16px !important;
  border-radius: 10px !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(5, 6, 14, 0.46) !important;
}

.character-detail-view .detail-safe-note {
  width: min(500px, 100%) !important;
  min-height: 54px !important;
  margin: 0 0 22px !important;
  border-radius: 9px !important;
  border-color: rgba(153, 99, 255, 0.36) !important;
  background: rgba(62, 33, 118, 0.24) !important;
}

.character-detail-view .detail-actions {
  display: grid !important;
  grid-template-columns: 0.82fr 1.18fr 1.18fr !important;
  gap: 10px !important;
  width: min(500px, 100%) !important;
  margin: 0 !important;
}

.character-detail-view .detail-actions .primary-button,
.character-detail-view .detail-actions .secondary-button {
  height: 58px !important;
  min-height: 58px !important;
  border-radius: 11px !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.character-detail-view .detail-actions .secondary-button {
  background: rgba(16, 18, 28, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(244, 239, 255, 0.9) !important;
}

.character-detail-view .detail-art {
  position: relative !important;
  z-index: 1 !important;
  min-height: inherit !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.character-detail-view .detail-art::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 -32% !important;
  z-index: 2 !important;
  width: 58% !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(4, 5, 12, 0.98), rgba(4, 5, 12, 0.78) 42%, transparent 100%) !important;
}

.character-detail-view .detail-art::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, transparent 45%, rgba(2, 3, 8, 0.34) 100%),
    radial-gradient(circle at 72% 48%, transparent 0%, rgba(0, 0, 0, 0.18) 72%) !important;
}

.character-detail-view .detail-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 58% 42% !important;
  transform: none !important;
  filter: saturate(1.04) contrast(1.04) brightness(0.96) !important;
}

.character-detail-view .detail-image-edit-btn {
  display: none !important;
}

.character-detail-view .detail-quote-card {
  position: absolute !important;
  z-index: 7 !important;
  left: var(--quote-x, 63%) !important;
  top: var(--quote-y, 64%) !important;
  width: var(--quote-w, 31%) !important;
  min-width: 230px !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 17px 20px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(12, 10, 20, 0.64) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  cursor: move !important;
  user-select: none !important;
  touch-action: none !important;
  pointer-events: auto !important;
}

.character-detail-view .detail-quote-card.moving,
.character-detail-view .detail-quote-card.resizing,
.character-detail-view .detail-quote-card:hover {
  border-color: rgba(168, 112, 255, 0.58) !important;
  background: rgba(16, 12, 28, 0.76) !important;
}

.character-detail-view .detail-quote-card .quote-mark {
  color: rgba(125, 57, 255, 0.96) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: calc(var(--quote-font, 24px) * 1.42) !important;
  line-height: 0.8 !important;
  font-weight: 800 !important;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
}

.character-detail-view .detail-quote-card p,
.character-detail-view .detail-quote-card #detailSample {
  margin: 0 !important;
  color: rgba(222, 203, 255, 0.96) !important;
  font-family: "Noto Serif KR", "Batang", "Malgun Gothic", serif !important;
  font-size: var(--quote-font, 24px) !important;
  line-height: 1.45 !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.72) !important;
  overflow-wrap: anywhere !important;
}

.character-detail-view .detail-quote-edit-btn {
  position: absolute !important;
  right: 12px !important;
  top: -14px !important;
  bottom: auto !important;
  z-index: 10 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(184, 143, 255, 0.48) !important;
  background: rgba(25, 17, 44, 0.9) !important;
  color: rgba(229, 213, 255, 0.98) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32) !important;
}

.character-detail-view .detail-quote-card:not(.editable-quote) .detail-quote-edit-btn,
.character-detail-view .detail-quote-edit-btn.hidden {
  display: none !important;
}

.character-detail-view .quote-resize-handle {
  position: absolute !important;
  z-index: 9 !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(244, 236, 255, 0.9) !important;
  background: #8d4dff !important;
  box-shadow: 0 0 0 3px rgba(8, 6, 16, 0.7), 0 0 18px rgba(143, 83, 255, 0.56) !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  transition: opacity 0.16s ease !important;
}

.character-detail-view .detail-quote-card:hover .quote-resize-handle,
.character-detail-view .detail-quote-card.resizing .quote-resize-handle {
  opacity: 1 !important;
}

.character-detail-view .quote-resize-handle.nw { left: -6px !important; top: -6px !important; cursor: nwse-resize !important; }
.character-detail-view .quote-resize-handle.ne { right: -6px !important; top: -6px !important; cursor: nesw-resize !important; }
.character-detail-view .quote-resize-handle.sw { left: -6px !important; bottom: -6px !important; cursor: nesw-resize !important; }
.character-detail-view .quote-resize-handle.se { right: -6px !important; bottom: -6px !important; cursor: nwse-resize !important; }

.character-detail-view .detail-quote-card.quote-editing {
  width: min(430px, 44%) !important;
  cursor: default !important;
}

.character-detail-view .detail-quote-card.quote-editing #detailSample {
  grid-column: 1 / -1 !important;
}

.character-detail-view .detail-quote-input {
  width: 100% !important;
  min-height: 110px !important;
  resize: vertical !important;
  border-radius: 11px !important;
  border: 1px solid rgba(162, 126, 255, 0.48) !important;
  background: rgba(4, 5, 11, 0.86) !important;
  color: rgba(248, 244, 255, 0.96) !important;
  padding: 12px 13px !important;
  font-family: "Noto Serif KR", "Malgun Gothic", serif !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  outline: none !important;
}

.character-detail-view .detail-quote-edit-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.character-detail-view .detail-quote-card button,
.character-detail-view .detail-quote-card textarea,
.character-detail-view .detail-quote-edit-actions,
.character-detail-view .detail-quote-edit-actions * {
  pointer-events: auto !important;
}

.character-detail-view .detail-selection-strip {
  position: fixed !important;
  left: 296px !important;
  right: 36px !important;
  bottom: 18px !important;
  z-index: 60 !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(190px, 268px) !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 106px !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(143, 91, 255, 0.42) !important;
  background: rgba(17, 18, 29, 0.94) !important;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(18px) !important;
}

.character-detail-view .detail-selection-strip strong {
  display: block !important;
  margin: 0 0 8px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.character-detail-view .detail-selection-strip p {
  margin: 0 !important;
  color: rgba(203, 197, 218, 0.7) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 560 !important;
}

.character-detail-view .detail-selected-list {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  padding: 2px 2px 4px !important;
}

.character-detail-view .detail-selected-list .empty-selection {
  color: rgba(205, 198, 218, 0.68) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

.character-detail-view .detail-selected-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex: 0 0 auto !important;
  min-width: 132px !important;
  height: 58px !important;
  padding: 8px 12px 8px 8px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(162, 126, 255, 0.5) !important;
  background: rgba(71, 43, 135, 0.44) !important;
  color: white !important;
}

.character-detail-view .detail-selected-chip img,
.character-detail-view .detail-selected-chip > span {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.character-detail-view .detail-selected-chip strong {
  min-width: 0 !important;
  font-size: 14px !important;
  font-weight: 860 !important;
}

.character-detail-view .detail-selected-chip em {
  margin-left: auto !important;
  color: rgba(226, 216, 255, 0.78) !important;
  font-style: normal !important;
}

.character-detail-view .detail-empty-slot {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 88px !important;
  width: 88px !important;
  height: 58px !important;
  border-radius: 13px !important;
  border: 1px dashed rgba(255, 255, 255, 0.22) !important;
  color: rgba(232, 226, 246, 0.72) !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

.character-detail-view .detail-selection-strip .primary-button {
  width: 100% !important;
  height: 58px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.character-detail-view .detail-selection-strip .primary-button:disabled {
  background: rgba(63, 65, 82, 0.82) !important;
  color: rgba(236, 233, 244, 0.5) !important;
  box-shadow: none !important;
}

.character-detail-view .related-section {
  margin-top: 32px !important;
}


/* 2026-06-13 v20: hard reset broken detail composition from accumulated styles. */
body.detail-active {
  overflow-x: hidden !important;
}

body.detail-active .workspace {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 30px 42px 132px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.detail-active .character-detail-view {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.detail-active .character-detail-view .detail-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(390px, 0.78fr) minmax(720px, 1.55fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  height: min(720px, calc(100vh - 112px)) !important;
  min-height: 640px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background:
    radial-gradient(circle at 82% 14%, rgba(126, 83, 255, 0.19), transparent 30%),
    linear-gradient(90deg, #04050c 0%, #04050c 35%, rgba(6, 6, 14, 0.7) 48%, rgba(6, 6, 14, 0.08) 100%) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

body.detail-active .character-detail-view .detail-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(4, 5, 12, 0.98) 0%, rgba(4, 5, 12, 0.92) 30%, rgba(4, 5, 12, 0.5) 45%, rgba(4, 5, 12, 0.08) 62%, transparent 78%),
    linear-gradient(180deg, rgba(4, 5, 12, 0.02), rgba(4, 5, 12, 0.28) 100%) !important;
}

body.detail-active .character-detail-view .detail-copy {
  position: relative !important;
  z-index: 6 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(44px, 5.4vh, 70px) 0 32px clamp(44px, 4.6vw, 76px) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

body.detail-active .character-detail-view .detail-copy h1 {
  max-width: 360px !important;
  margin: 0 0 8px !important;
  font-size: clamp(52px, 4.8vw, 76px) !important;
  line-height: 0.98 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.detail-active .character-detail-view #detailSummary {
  width: min(440px, 100%) !important;
  min-height: 126px !important;
  max-height: none !important;
  margin: 22px 0 18px !important;
  overflow: visible !important;
}

body.detail-active .character-detail-view .detail-art {
  position: relative !important;
  z-index: 1 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

body.detail-active .character-detail-view .detail-art::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 -1px !important;
  z-index: 4 !important;
  width: 42% !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(4, 5, 12, 0.98) 0%, rgba(4, 5, 12, 0.7) 38%, rgba(4, 5, 12, 0.18) 70%, transparent 100%) !important;
}

body.detail-active .character-detail-view .detail-art::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(3, 4, 10, 0.02) 0%, transparent 46%, rgba(3, 4, 10, 0.33) 100%),
    radial-gradient(circle at 70% 46%, transparent 0%, rgba(0, 0, 0, 0.16) 76%) !important;
}

body.detail-active .character-detail-view .detail-art img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 56% 18% !important;
  transform: none !important;
}

body.detail-active .character-detail-view .detail-selection-strip {
  position: fixed !important;
  left: 304px !important;
  right: 42px !important;
  top: auto !important;
  bottom: 18px !important;
  z-index: 90 !important;
  display: grid !important;
  grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) minmax(190px, 270px) !important;
  align-items: center !important;
  gap: 18px !important;
  width: auto !important;
  max-width: none !important;
  min-height: 104px !important;
  height: 104px !important;
  max-height: 104px !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  overflow: hidden !important;
  transform: none !important;
}

body.detail-active .character-detail-view .detail-quote-card {
  z-index: 8 !important;
}

body.detail-active .character-detail-view .quote-resize-handle {
  opacity: 0.68 !important;
}

body.detail-active .character-detail-view .detail-quote-card:hover .quote-resize-handle,
body.detail-active .character-detail-view .detail-quote-card.resizing .quote-resize-handle {
  opacity: 1 !important;
}


/* 2026-06-13 v19: emergency detail layout reset.
   The older stacked detail styles left a giant card shell over the page; neutralize it here. */
body.detail-active .workspace {
  position: relative !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 42px 42px 138px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
}

.character-detail-view,
.character-detail-view:not(.hidden) {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

.character-detail-view .detail-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(390px, 0.84fr) minmax(720px, 1.45fr) !important;
  width: 100% !important;
  max-width: none !important;
  height: min(720px, calc(100vh - 128px)) !important;
  min-height: 640px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background:
    radial-gradient(circle at 83% 14%, rgba(132, 88, 255, 0.2), transparent 30%),
    linear-gradient(90deg, #05060d 0%, #05060d 34%, rgba(8, 7, 16, 0.68) 49%, rgba(8, 7, 16, 0.08) 100%) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

.character-detail-view .detail-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(3, 4, 10, 0.96) 0%, rgba(3, 4, 10, 0.9) 29%, rgba(3, 4, 10, 0.35) 50%, rgba(3, 4, 10, 0) 69%) !important;
}

.character-detail-view .detail-copy {
  position: relative !important;
  z-index: 5 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(46px, 6vh, 72px) 0 34px clamp(44px, 4.8vw, 78px) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

.character-detail-view .detail-art {
  position: relative !important;
  z-index: 1 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}

.character-detail-view .detail-art img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 56% 42% !important;
  transform: none !important;
}

.character-detail-view .detail-selection-strip {
  position: fixed !important;
  left: 304px !important;
  right: 42px !important;
  bottom: 18px !important;
  top: auto !important;
  z-index: 80 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 104px !important;
  margin: 0 !important;
  transform: none !important;
}


/* 2026-06-13 v21: final detail correction after v19 order conflict. */
body.detail-active .workspace {
  padding: 30px 42px 148px !important;
}

body.detail-active .character-detail-view,
body.detail-active .character-detail-view:not(.hidden) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.detail-active .character-detail-view .detail-hero {
  display: grid !important;
  grid-template-columns: minmax(390px, 0.78fr) minmax(720px, 1.55fr) !important;
  height: min(720px, calc(100vh - 112px)) !important;
  min-height: 640px !important;
  background:
    radial-gradient(circle at 82% 14%, rgba(126, 83, 255, 0.19), transparent 30%),
    linear-gradient(90deg, #04050c 0%, #04050c 35%, rgba(6, 6, 14, 0.7) 48%, rgba(6, 6, 14, 0.08) 100%) !important;
}

body.detail-active .character-detail-view .detail-hero::before {
  z-index: 3 !important;
  background:
    linear-gradient(90deg, rgba(4, 5, 12, 0.98) 0%, rgba(4, 5, 12, 0.92) 30%, rgba(4, 5, 12, 0.5) 45%, rgba(4, 5, 12, 0.08) 62%, transparent 78%),
    linear-gradient(180deg, rgba(4, 5, 12, 0.02), rgba(4, 5, 12, 0.28) 100%) !important;
}

body.detail-active .character-detail-view .detail-copy {
  z-index: 6 !important;
  grid-column: 1 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: clamp(44px, 5.4vh, 70px) 0 32px clamp(44px, 4.6vw, 76px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.detail-active .character-detail-view .detail-actions {
  display: grid !important;
  grid-template-columns: minmax(118px, 0.82fr) minmax(180px, 1.18fr) minmax(180px, 1.18fr) !important;
  gap: 10px !important;
  width: min(500px, 100%) !important;
  max-width: 500px !important;
}

body.detail-active .character-detail-view .detail-actions .primary-button,
body.detail-active .character-detail-view .detail-actions .secondary-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 16px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

body.detail-active .character-detail-view .detail-art {
  grid-column: 2 !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(4, 5, 12, 0.48), rgba(5, 5, 12, 0.12)) !important;
}

body.detail-active .character-detail-view .detail-art::before {
  content: "" !important;
  position: absolute !important;
  inset: -24px !important;
  z-index: 1 !important;
  width: auto !important;
  pointer-events: none !important;
  background: var(--detail-image-bg, none) center / cover no-repeat !important;
  filter: blur(16px) saturate(0.76) brightness(0.58) !important;
  opacity: 0.42 !important;
  transform: scale(1.06) !important;
}

body.detail-active .character-detail-view .detail-art::after {
  z-index: 2 !important;
  background:
    linear-gradient(90deg, rgba(4, 5, 12, 0.98) 0%, rgba(4, 5, 12, 0.74) 23%, rgba(4, 5, 12, 0.18) 46%, transparent 70%),
    linear-gradient(180deg, rgba(3, 4, 10, 0.02) 0%, transparent 46%, rgba(3, 4, 10, 0.33) 100%),
    radial-gradient(circle at 70% 46%, transparent 0%, rgba(0, 0, 0, 0.16) 76%) !important;
}

body.detail-active .character-detail-view .detail-art img {
  inset: auto -1% -10% auto !important;
  width: min(66%, 660px) !important;
  height: 118% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  z-index: 3 !important;
}

body.detail-active .character-detail-view .detail-selection-strip {
  left: 304px !important;
  right: 42px !important;
  bottom: 18px !important;
  height: 104px !important;
  max-height: 104px !important;
  overflow: hidden !important;
}

body.detail-active .character-detail-view .related-section {
  padding-bottom: 132px !important;
}

body.detail-active .character-detail-view .quote-resize-handle {
  opacity: 0.68 !important;
}


/* 2026-06-13 v23: detail page repair.
   Keep the card-photo editor untouched; this only fixes the public character detail composition. */
html,
body {
  overflow-x: hidden;
}

body.detail-active .app-shell {
  grid-template-columns: 268px minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body.detail-active .workspace {
  width: 100% !important;
  max-width: calc(100vw - 268px) !important;
  min-width: 0 !important;
  padding: 30px 42px 150px !important;
  overflow: visible !important;
}

body.detail-active .character-detail-view {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body.detail-active .character-detail-view .detail-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(440px, 0.8fr) minmax(680px, 1.24fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  height: min(720px, calc(100vh - 112px)) !important;
  min-height: 650px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 78% 16%, rgba(123, 82, 255, 0.2), transparent 33%),
    linear-gradient(90deg, #03040a 0%, #03040a 39%, rgba(6, 6, 14, 0.72) 51%, rgba(7, 7, 16, 0.18) 100%) !important;
}

body.detail-active .character-detail-view .detail-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(3, 4, 10, 0.99) 0%, rgba(3, 4, 10, 0.96) 31%, rgba(3, 4, 10, 0.66) 44%, rgba(3, 4, 10, 0.22) 57%, transparent 74%),
    linear-gradient(180deg, rgba(3, 4, 10, 0.04) 0%, transparent 52%, rgba(3, 4, 10, 0.18) 100%) !important;
}

body.detail-active .character-detail-view .detail-copy {
  position: relative !important;
  z-index: 8 !important;
  grid-column: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 520px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 44px 0 44px clamp(46px, 4.2vw, 76px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.detail-active .character-detail-view .detail-copy h1 {
  margin: 10px 0 8px !important;
  font-size: clamp(54px, 4.6vw, 78px) !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

body.detail-active .character-detail-view #detailSummary {
  width: min(470px, 100%) !important;
  min-height: 76px !important;
  margin: 22px 0 22px !important;
  color: rgba(244, 244, 252, 0.9) !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
}

body.detail-active .character-detail-view .detail-art {
  position: relative !important;
  z-index: 1 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #05060d !important;
}

body.detail-active .character-detail-view .detail-art::before {
  content: "" !important;
  position: absolute !important;
  inset: -18px -18px -18px -30% !important;
  z-index: 1 !important;
  width: auto !important;
  pointer-events: none !important;
  background: var(--detail-image-bg, none) center 12% / cover no-repeat !important;
  filter: blur(18px) saturate(0.75) brightness(0.46) !important;
  opacity: 0.58 !important;
  transform: scale(1.04) !important;
}

body.detail-active .character-detail-view .detail-art::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(3, 4, 10, 0.95) 0%, rgba(3, 4, 10, 0.62) 22%, rgba(3, 4, 10, 0.16) 44%, transparent 63%),
    linear-gradient(180deg, rgba(3, 4, 10, 0.04) 0%, transparent 50%, rgba(3, 4, 10, 0.3) 100%) !important;
}

body.detail-active .character-detail-view .detail-art img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 12% !important;
  transform: none !important;
}

body.detail-active .character-detail-view .detail-quote-card {
  z-index: 7 !important;
  min-width: 260px !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background:
    radial-gradient(circle at 88% 16%, rgba(133, 83, 255, 0.18), transparent 36%),
    rgba(12, 11, 20, 0.82) !important;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.44) !important;
  backdrop-filter: blur(18px) !important;
  cursor: move !important;
}

body.detail-active .character-detail-view .detail-quote-card p,
body.detail-active .character-detail-view .detail-quote-card #detailSample {
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

body.detail-active .character-detail-view .quote-resize-handle {
  z-index: 12 !important;
  width: 13px !important;
  height: 13px !important;
  opacity: 0.75 !important;
  pointer-events: auto !important;
}

body.detail-active .character-detail-view .detail-actions {
  width: min(500px, 100%) !important;
  margin-top: 18px !important;
}

body.detail-active .character-detail-view .detail-selection-strip {
  position: fixed !important;
  left: 310px !important;
  right: 42px !important;
  bottom: 18px !important;
  z-index: 90 !important;
  display: grid !important;
  grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) minmax(190px, 270px) !important;
  align-items: center !important;
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  padding: 18px 20px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(14, 15, 25, 0.96) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(18px) !important;
}

body.detail-active .character-detail-view .related-section {
  padding-bottom: 150px !important;
}



/* 2026-06-13 v24: detail quote text-only mode and no related-character shelf. */
body.detail-active .character-detail-view .related-section {
  display: none !important;
}

body.detail-active .character-detail-view .detail-quote-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 230px !important;
  height: var(--quote-h, auto) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  cursor: move !important;
}

body.detail-active .character-detail-view .detail-quote-card:hover,
body.detail-active .character-detail-view .detail-quote-card.moving,
body.detail-active .character-detail-view .detail-quote-card.resizing {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.detail-active .character-detail-view .detail-quote-card .quote-mark {
  color: rgba(137, 75, 255, 0.98) !important;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.72) !important;
}

body.detail-active .character-detail-view .detail-quote-card p,
body.detail-active .character-detail-view .detail-quote-card #detailSample {
  color: rgba(228, 208, 255, 0.98) !important;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.82), 0 0 18px rgba(107, 65, 255, 0.18) !important;
}

body.detail-active .character-detail-view .quote-resize-handle {
  border-color: rgba(226, 211, 255, 0.86) !important;
  background: rgba(124, 77, 255, 0.88) !important;
  box-shadow: 0 0 0 3px rgba(6, 5, 13, 0.62), 0 0 18px rgba(126, 77, 255, 0.52) !important;
}

body.detail-active .character-detail-view .detail-quote-edit-btn {
  right: -28px !important;
  top: -18px !important;
}
/* 2026-06-14: scoped five-step character creation wizard. */
.character-wizard {
  --cw-panel: rgba(14, 16, 28, 0.9);
  --cw-panel-strong: rgba(18, 20, 35, 0.96);
  --cw-border: rgba(167, 134, 255, 0.15);
  --cw-border-strong: rgba(139, 86, 255, 0.52);
  --cw-muted: #959aaf;
  --cw-soft: #c9cce0;
  --cw-purple: #8f55ff;
  --cw-purple-2: #6f3dff;
  max-width: 1500px;
  margin: 0 auto;
}

.character-wizard .cw-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.character-wizard .cw-page-head h1 {
  margin: 0 0 8px;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.character-wizard .cw-page-head p {
  margin: 0;
  color: var(--cw-muted);
  font-size: 14px;
}

.character-wizard .cw-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px;
  border: 1px solid var(--cw-border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 19, 34, 0.93), rgba(10, 11, 22, 0.94));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
}

.character-wizard .cw-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #a3a7b7;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.character-wizard .cw-step:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.025);
}

.character-wizard .cw-step > span {
  grid-row: 1 / 3;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  font-weight: 850;
}

.character-wizard .cw-step strong {
  font-size: 13px;
  color: inherit;
}

.character-wizard .cw-step small {
  overflow: hidden;
  color: #73788d;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-wizard .cw-step.active {
  border-color: var(--cw-border-strong);
  background: linear-gradient(135deg, rgba(126, 72, 255, 0.19), rgba(89, 47, 211, 0.08));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(186, 153, 255, 0.08), 0 12px 30px rgba(79, 39, 174, 0.13);
}

.character-wizard .cw-step.active > span {
  border-color: rgba(186, 146, 255, 0.9);
  background: linear-gradient(145deg, #8f55ff, #5b2fce);
  box-shadow: 0 0 22px rgba(130, 76, 255, 0.42);
}

.character-wizard .cw-step.complete > span {
  border-color: rgba(73, 205, 143, 0.38);
  color: #83dfb1;
}

.character-wizard .cw-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 18px;
  align-items: start;
}

.character-wizard .cw-main,
.character-wizard .cw-preview-panel {
  min-width: 0;
}

.character-wizard .cw-step-panel {
  display: none;
  padding: 26px;
  border: 1px solid var(--cw-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(120, 70, 255, 0.07), transparent 30%),
    linear-gradient(180deg, var(--cw-panel-strong), var(--cw-panel));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
}

.character-wizard .cw-step-panel.active {
  display: block;
  animation: cw-panel-in 180ms ease both;
}

@keyframes cw-panel-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.character-wizard .cw-panel-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.character-wizard .cw-panel-icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(149, 98, 255, 0.38);
  border-radius: 13px;
  background: rgba(126, 73, 255, 0.16);
  color: #b899ff;
  font-size: 20px;
  font-weight: 900;
}

.character-wizard .cw-panel-head h2,
.character-wizard .cw-panel-head p,
.character-wizard .cw-section-title-row h3,
.character-wizard .cw-section-title-row p {
  margin: 0;
}

.character-wizard .cw-panel-head h2 {
  margin-bottom: 4px;
  font-size: 21px;
}

.character-wizard .cw-panel-head p,
.character-wizard .cw-section-title-row p {
  color: var(--cw-muted);
  font-size: 13px;
  line-height: 1.55;
}

.character-wizard input,
.character-wizard textarea,
.character-wizard select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  outline: none;
  background: rgba(5, 7, 14, 0.64);
  color: #f5f3ff;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.character-wizard input,
.character-wizard select {
  min-height: 48px;
  padding: 0 15px;
}

.character-wizard textarea {
  padding: 15px;
  line-height: 1.7;
  resize: vertical;
}

.character-wizard input:focus,
.character-wizard textarea:focus,
.character-wizard select:focus {
  border-color: rgba(150, 99, 255, 0.74);
  background: rgba(8, 9, 18, 0.92);
  box-shadow: 0 0 0 3px rgba(120, 68, 255, 0.11);
}

.character-wizard .cw-field-list {
  display: grid;
  gap: 10px;
}

.character-wizard .cw-field-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.52fr) minmax(260px, 1fr);
  gap: 22px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.017);
}

.character-wizard .cw-field-label {
  display: grid;
  gap: 4px;
}

.character-wizard .cw-field-label strong,
.character-wizard .cw-writing-card > span strong {
  color: #f3f1ff;
  font-size: 14px;
}

.character-wizard em,
.character-wizard .cw-field-label i,
.character-wizard .cw-writing-card i {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(132, 78, 255, 0.18);
  color: #bda3ff;
  font-size: 10px;
  font-style: normal;
}

.character-wizard .cw-field-label i,
.character-wizard .cw-writing-card i {
  background: rgba(255, 255, 255, 0.05);
  color: #9096a9;
}

.character-wizard .cw-field-label small,
.character-wizard .cw-writing-card > span small {
  color: #7f8498;
  font-size: 11px;
  line-height: 1.5;
}

.character-wizard .cw-info-box,
.character-wizard .cw-status-box,
.character-wizard .cw-adjustment-note {
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid rgba(142, 92, 255, 0.19);
  border-radius: 13px;
  background: rgba(106, 62, 220, 0.075);
}

.character-wizard .cw-info-box strong,
.character-wizard .cw-status-box strong,
.character-wizard .cw-adjustment-note strong {
  font-size: 13px;
}

.character-wizard .cw-info-box p,
.character-wizard .cw-status-box p,
.character-wizard .cw-adjustment-note p {
  margin: 5px 0 0;
  color: #969caf;
  font-size: 12px;
  line-height: 1.55;
}

.character-wizard .cw-writing-card {
  position: relative;
  display: grid;
  gap: 11px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.018);
}

.character-wizard .cw-writing-card > span {
  display: grid;
  gap: 5px;
}

.character-wizard .cw-writing-card .cw-count {
  position: static;
  display: block;
  align-self: auto;
  justify-self: end;
  width: max-content;
  margin: 6px 2px 0 auto;
  color: #81798f;
  font-size: 10.5px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.character-wizard .cw-magic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(137, 85, 255, 0.25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(125, 73, 255, 0.095), rgba(74, 47, 146, 0.04));
}

.character-wizard .cw-magic-row strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.character-wizard .cw-magic-row p {
  margin: 0;
  color: var(--cw-muted);
  font-size: 12px;
}

.character-wizard .cw-magic-button {
  flex: 0 0 auto;
  border-color: rgba(154, 105, 255, 0.42);
  color: #d4c3ff;
}

.character-wizard .cw-magic-result {
  margin-top: 14px;
  border-color: rgba(150, 98, 255, 0.28);
  background: rgba(8, 9, 17, 0.78);
}

.character-wizard .cw-magic-result pre {
  max-height: 330px;
  overflow: auto;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.65;
}

.character-wizard .cw-section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}

.character-wizard .cw-section-title-row h3 {
  margin-bottom: 4px;
  font-size: 16px;
}

.character-wizard .cw-section-title-row h3 span {
  color: #767c91;
  font-size: 11px;
  font-weight: 600;
}

.character-wizard .cw-samples-card,
.character-wizard .cw-feedback-card,
.character-wizard .cw-stage-preview {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.017);
}

.character-wizard .cw-inline-actions,
.character-wizard .cw-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.character-wizard .cw-sample-list {
  display: grid;
  gap: 10px;
}

.character-wizard .cw-sample-item {
  display: grid;
  grid-template-columns: minmax(190px, 0.55fr) minmax(260px, 1fr);
  gap: 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 13px;
  background: rgba(3, 4, 10, 0.3);
}

.character-wizard .cw-sample-title {
  display: flex;
  align-items: center;
  gap: 11px;
}

.character-wizard .cw-sample-title > span {
  display: grid;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 10px;
  background: rgba(135, 80, 255, 0.14);
  color: #b89bff;
  font-weight: 850;
}

.character-wizard .cw-sample-title div,
.character-wizard .cw-sample-item label {
  display: grid;
  gap: 4px;
}

.character-wizard .cw-sample-title strong,
.character-wizard .cw-sample-item label > span {
  font-size: 13px;
}

.character-wizard .cw-sample-title small {
  color: #848a9c;
  font-size: 11px;
  line-height: 1.45;
}

.character-wizard .cw-test-scenarios,
.character-wizard .cw-feedback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.character-wizard .cw-test-scenarios button,
.character-wizard .cw-feedback-chips button {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: #afb3c2;
  font-size: 12px;
}

.character-wizard .cw-test-scenarios button.active,
.character-wizard .cw-feedback-chips button.active {
  border-color: rgba(151, 101, 255, 0.65);
  background: rgba(127, 73, 255, 0.22);
  color: #fff;
}

.character-wizard .cw-chat-simulator {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(4, 5, 12, 0.46);
}

.character-wizard .cw-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.character-wizard .cw-chat-head div {
  display: grid;
  gap: 3px;
}

.character-wizard .cw-chat-head strong {
  font-size: 14px;
}

.character-wizard .cw-chat-head small,
.character-wizard .cw-chat-head > span {
  color: #7f8598;
  font-size: 10px;
}

.character-wizard .cw-chat-body {
  display: grid;
  gap: 15px;
  min-height: 270px;
  padding: 22px;
  align-content: center;
}

.character-wizard .cw-chat-message {
  max-width: 72%;
}

.character-wizard .cw-chat-message small {
  display: block;
  margin-bottom: 5px;
  color: #8e94a8;
  font-size: 10px;
}

.character-wizard .cw-chat-message p {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #171a27;
  color: #e5e6ed;
  font-size: 13px;
  line-height: 1.6;
}

.character-wizard .cw-chat-message.user {
  justify-self: end;
  text-align: right;
}

.character-wizard .cw-chat-message.user p {
  border-bottom-right-radius: 4px;
  background: linear-gradient(135deg, #7741df, #5828b8);
  color: #fff;
  text-align: left;
}

.character-wizard .cw-chat-message.character p {
  border-bottom-left-radius: 4px;
}

.character-wizard .cw-test-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 9px;
  padding: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.character-wizard .cw-test-input-row button {
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cw-purple), var(--cw-purple-2));
  color: white;
  font-size: 20px;
  font-weight: 900;
}

.character-wizard .cw-feedback-card {
  margin-top: 14px;
}

.character-wizard .cw-feedback-card h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.character-wizard .cw-adjustment-note {
  margin-top: 8px;
}

.character-wizard .cw-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.character-wizard .cw-image-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.017);
}

.character-wizard .cw-image-card-head h3,
.character-wizard .cw-image-card-head p {
  margin: 0;
}

.character-wizard .cw-image-card-head h3 {
  margin-bottom: 4px;
  font-size: 15px;
}

.character-wizard .cw-image-card-head p {
  color: #7d8397;
  font-size: 11px;
}

.character-wizard .cw-upload-stage {
  display: grid;
  width: 100%;
  min-height: 310px;
  margin: 14px 0 11px;
  place-items: center;
  align-content: center;
  gap: 8px;
  overflow: hidden;
  border: 1px dashed rgba(159, 112, 255, 0.3);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 25%, rgba(126, 74, 255, 0.1), transparent 35%),
    rgba(3, 4, 10, 0.42);
  color: #aa8ef2;
}

.character-wizard .cw-upload-stage.standing {
  min-height: 420px;
}

.character-wizard .cw-upload-stage span {
  font-size: 34px;
  font-weight: 300;
}

.character-wizard .cw-upload-stage small {
  color: #8e82aa;
}

.character-wizard .cw-upload-stage img {
  width: 100%;
  height: 100%;
  max-height: 430px;
  object-fit: contain;
}

.character-wizard .cw-image-card > small {
  display: block;
  margin-top: 9px;
  color: #767c90;
  font-size: 10px;
}

.character-wizard .danger-text {
  color: #ff8d96;
}

.character-wizard .cw-stage-preview {
  margin-top: 14px;
}

.character-wizard .cw-stage-preview-canvas {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(180px, 0.7fr) minmax(260px, 1fr);
  align-items: end;
  min-height: 290px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(12, 11, 36, 0.22), rgba(7, 6, 18, 0.84)),
    radial-gradient(circle at 70% 20%, rgba(91, 65, 165, 0.5), transparent 30%),
    linear-gradient(135deg, #171234, #080913 60%, #18102f);
}

.character-wizard .cw-stage-profile {
  align-self: stretch;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  padding: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(5, 6, 13, 0.36);
  text-align: center;
}

.character-wizard .cw-mini-avatar,
.character-wizard .cw-preview-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(157, 111, 255, 0.7);
  border-radius: 50%;
  background: rgba(126, 75, 255, 0.11);
  color: #ad91f3;
}

.character-wizard .cw-mini-avatar {
  width: 76px;
  height: 76px;
  font-size: 26px;
}

.character-wizard .cw-mini-avatar img,
.character-wizard .cw-mini-avatar video,
.character-wizard .cw-preview-avatar img,
.character-wizard .cw-preview-avatar video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.character-wizard .cw-stage-profile small {
  color: #9298ab;
  font-size: 10px;
}

.character-wizard .cw-standing-preview {
  display: grid;
  align-self: stretch;
  place-items: end center;
  min-height: 270px;
  color: #76708e;
}

.character-wizard .cw-standing-preview img {
  width: 100%;
  height: 100%;
  max-height: 285px;
  object-fit: contain;
  object-position: center bottom;
}

.character-wizard .cw-stage-dialogue {
  margin: 0 18px 20px 0;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(8, 9, 18, 0.83);
  backdrop-filter: blur(10px);
}

.character-wizard .cw-stage-dialogue strong {
  color: #c6afff;
  font-size: 12px;
}

.character-wizard .cw-stage-dialogue p {
  margin: 6px 0 0;
  color: #e6e5ee;
  font-size: 13px;
  line-height: 1.55;
}

.character-wizard .cw-preview-panel {
  position: sticky;
  top: 18px;
  padding: 18px;
  border: 1px solid var(--cw-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 5%, rgba(118, 67, 255, 0.11), transparent 26%),
    linear-gradient(180deg, rgba(18, 20, 34, 0.96), rgba(10, 11, 21, 0.96));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.character-wizard .cw-preview-head,
.character-wizard .cw-preview-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.character-wizard .cw-preview-head h2,
.character-wizard .cw-preview-section h3 {
  margin: 0;
}

.character-wizard .cw-preview-head h2 {
  font-size: 16px;
}

.character-wizard .cw-preview-head span {
  color: #72d5aa;
  font-size: 10px;
}

.character-wizard .cw-preview-hero {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 15px;
  padding: 24px 14px;
  border: 1px solid rgba(154, 110, 255, 0.16);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 25%, rgba(120, 72, 255, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(20, 18, 50, 0.55), rgba(8, 8, 18, 0.5));
  text-align: center;
}

.character-wizard .cw-preview-avatar {
  width: 104px;
  height: 104px;
  font-size: 34px;
}

.character-wizard .cw-preview-hero h2 {
  margin: 4px 0 0;
  font-size: 25px;
}

.character-wizard .cw-preview-hero p {
  margin: 0;
  color: #a3a7b8;
  font-size: 12px;
}

.character-wizard .cw-preview-section {
  margin-top: 12px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.018);
}

.character-wizard .cw-preview-section h3 {
  margin-bottom: 10px;
  font-size: 13px;
}

.character-wizard .cw-preview-traits {
  display: grid;
  gap: 7px;
}

.character-wizard .cw-preview-traits span {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #c3c6d4;
  font-size: 11px;
  line-height: 1.4;
}

.character-wizard .cw-preview-traits span::before {
  content: "✦";
  margin-right: 7px;
  color: #9b6cff;
}

.character-wizard .cw-preview-dialogue .cw-preview-section-head span {
  color: #84749f;
  font-size: 10px;
}

.character-wizard .cw-preview-dialogue > p {
  margin: 0;
  padding: 11px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(126, 71, 255, 0.23), rgba(91, 45, 188, 0.16));
  color: #e5ddff;
  font-size: 12px;
  line-height: 1.55;
}

.character-wizard .cw-footer {
  grid-column: 1 / -1;
  position: sticky;
  bottom: 12px;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(200px, 360px);
  gap: 10px;
  align-items: center;
  margin-top: 0;
  padding: 10px;
  border: 1px solid rgba(149, 103, 255, 0.16);
  border-radius: 15px;
  background: rgba(11, 12, 22, 0.9);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px);
}

.character-wizard .cw-footer-spacer {
  min-width: 0;
  color: #747a8e;
  font-size: 11px;
}

.character-wizard .cw-footer .primary-button {
  width: 100%;
  min-height: 46px;
  background: linear-gradient(135deg, #955bff, #6234e6);
  box-shadow: 0 12px 32px rgba(94, 51, 201, 0.24);
}



@media (max-width: 680px) {
  .character-wizard .cw-page-head {
    display: grid;
  }

  .character-wizard .cw-step-panel {
    padding: 18px;
  }

  .character-wizard .cw-field-row {
    padding: 12px;
  }

  .character-wizard .cw-magic-row,
  .character-wizard .cw-section-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .character-wizard .cw-footer {
    grid-template-columns: 1fr 1fr;
  }

  .character-wizard .cw-footer-spacer {
    display: none;
  }
}

/* Scenario/world controls use the character-card control contract:
   wishlist at the top-right, owner edit immediately to its left. */
.tryva-unified-story-card .tryva-unified-story-card-wishlist,
.tryva-unified-story-card .tryva-unified-story-card-edit {
  position: absolute !important;
  z-index: 6 !important;
  top: 11px !important;
  display: grid !important;
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  min-height: 29px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(15,13,22,.62) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.16) !important;
  font: inherit !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: center !important;
  transition: transform 150ms ease, color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
}

.tryva-unified-story-card .tryva-unified-story-card-wishlist {
  right: 11px !important;
}

.tryva-unified-story-card .tryva-unified-story-card-edit {
  right: 48px !important;
  background: rgba(15,13,22,.68) !important;
}

.tryva-unified-story-card .tryva-unified-story-card-wishlist.is-wishlisted {
  background: linear-gradient(145deg, rgba(177,70,199,.94), rgba(112,62,221,.94)) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(157,63,202,.34) !important;
}

.tryva-unified-story-card .tryva-unified-story-card-wishlist:hover,
.tryva-unified-story-card .tryva-unified-story-card-wishlist:focus-visible {
  background: rgba(28,22,39,.82) !important;
  color: #fff !important;
  transform: translateY(-1px) scale(1.08) !important;
  box-shadow: 0 9px 24px rgba(0,0,0,.24) !important;
}

.tryva-unified-story-card .tryva-unified-story-card-wishlist.is-wishlisted:hover,
.tryva-unified-story-card .tryva-unified-story-card-wishlist.is-wishlisted:focus-visible {
  background: linear-gradient(145deg, rgba(193,79,211,.98), rgba(126,73,231,.98)) !important;
}

.tryva-unified-story-card .tryva-unified-story-card-edit:hover,
.tryva-unified-story-card .tryva-unified-story-card-edit:focus-visible {
  background: rgba(124,92,255,.74) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.tryva-unified-story-card .tryva-unified-story-card-status {
  right: 52px !important;
}

.tryva-unified-story-card.has-owner-controls .tryva-unified-story-card-status {
  right: 88px !important;
}

.story-detail-owner-tools {
  position: absolute;
  z-index: 24;
  top: 18px;
  right: 18px;
}

.story-detail-owner-tools.hidden {
  display: none !important;
}

/* Story detail editing uses the same edit-menu contract as character detail. */
.story-detail-owner-tools {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.story-detail-owner-tools .detail-edit-session-tools {
  position: relative;
  pointer-events: auto;
}

.story-detail-owner-tools .detail-edit-session-tools.hidden {
  display: none !important;
}

.story-detail-owner-tools .detail-edit-session-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.story-detail-owner-tools .detail-edit-session-tools button {
  width: auto;
  min-width: 88px;
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(177,139,255,.22);
  border-radius: 10px;
  background: rgba(29,22,41,.82);
  color: #eee9f7;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.story-detail-owner-tools .detail-edit-session-tools .detail-save-edit {
  border-color: rgba(160,120,255,.48);
  background: linear-gradient(135deg, #8459e8, #6640c6);
  color: #fff;
}

.story-detail-cover-edit {
  position: absolute !important;
  z-index: 5 !important;
  top: 78px !important;
  right: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1px solid rgba(176,137,255,.32) !important;
  border-radius: 12px !important;
  background: rgba(29,22,41,.78) !important;
  color: #eadfff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
  cursor: pointer !important;
  backdrop-filter: blur(12px) !important;
}

.story-detail-cover-edit.hidden {
  display: none !important;
}

.story-detail-cover-edit svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.story-detail-edit-mode #storyAssetDetailTitle[contenteditable="true"],
.story-detail-edit-mode #storyAssetDetailSummary[contenteditable="true"] {
  border-radius: 10px;
  outline: 1px solid rgba(174,137,255,.34);
  background: rgba(24,18,35,.58);
  box-shadow: 0 0 0 4px rgba(126,82,211,.08);
}

.story-detail-edit-mode #storyAssetDetailTitle[contenteditable="true"] {
  padding: 5px 8px;
}

.story-detail-edit-mode #storyAssetDetailSummary[contenteditable="true"] {
  min-height: 112px;
  padding: 12px 13px;
}

/* Character wizard v2: clearer sample prompts and one-source image editor. */
.character-wizard .cw-sample-prompt {
  display: grid;
  gap: 5px;
  margin-top: 5px;
}

.character-wizard .cw-sample-prompt em {
  color: #9385bd;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.character-wizard .cw-sample-prompt p {
  margin: 0;
  color: #e8e8f1;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.character-wizard .cw-shared-image-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 17px 18px;
  border: 1px solid rgba(159, 112, 255, 0.18);
  border-radius: 15px;
  background:
    radial-gradient(circle at 12% 20%, rgba(126, 74, 255, 0.09), transparent 30%),
    rgba(255, 255, 255, 0.018);
}

.character-wizard .cw-shared-image-upload h3,
.character-wizard .cw-shared-image-upload p {
  margin: 0;
}

.character-wizard .cw-shared-image-upload h3 {
  margin-bottom: 5px;
  font-size: 16px;
}

.character-wizard .cw-shared-image-upload p,
.character-wizard .cw-shared-image-upload > small {
  color: #858b9e;
  font-size: 11px;
  line-height: 1.55;
}

.character-wizard .cw-shared-image-upload > small {
  grid-column: 1 / -1;
  padding-top: 3px;
}

.character-wizard .cw-shared-upload-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.character-wizard .cw-shared-upload-actions button {
  min-height: 40px;
}

.character-wizard .cw-image-editor-grid {
  align-items: stretch;
}

.character-wizard .cw-image-editor-grid .cw-image-card {
  display: flex;
  flex-direction: column;
}

.character-wizard .cw-create-crop-frame {
  position: relative;
  display: grid;
  width: 100%;
  margin: 14px 0 12px;
  place-items: center;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  border: 1px solid rgba(167, 122, 255, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.018) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.018) 75%),
    #070812;
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  color: #777d91;
}

.character-wizard .cw-create-crop-frame.profile {
  width: min(100%, var(--tryva-card-hover-w));
  aspect-ratio: 318 / 354;
  margin: 14px auto 12px;
}

.character-wizard .cw-create-crop-frame.standing {
  width: min(100%, 300px);
  aspect-ratio: 66 / 118;
  margin: 14px auto 12px;
}

.character-wizard .cw-create-crop-frame.dragging {
  cursor: grabbing;
  border-color: rgba(167, 111, 255, 0.75);
  box-shadow: 0 0 0 2px rgba(142, 82, 255, 0.12), 0 18px 45px rgba(0,0,0,0.28);
}

.character-wizard .cw-create-crop-frame > span {
  padding: 24px;
  color: #777d91;
  font-size: 12px;
  text-align: center;
}

.character-wizard .cw-create-crop-frame img {
  width: auto;
  height: auto;
  max-width: none;
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}

.character-wizard .cw-crop-tools {
  display: grid;
  grid-template-columns: auto minmax(62px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}

.character-wizard .cw-crop-tools button,
.character-wizard .cw-crop-tools strong {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 10px;
  background: rgba(255,255,255,0.024);
  color: #bec2d0;
  font-size: 11px;
}

.character-wizard .cw-crop-tools button {
  padding: 0 12px;
  cursor: pointer;
}

.character-wizard .cw-crop-tools button:hover {
  border-color: rgba(160, 107, 255, 0.48);
  color: #fff;
}

.character-wizard .cw-crop-tools strong {
  display: grid;
  place-items: center;
  color: #a98eff;
}

.character-wizard .cw-real-preview-grid {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.character-wizard .cw-real-preview-section {
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 15px;
  background: rgba(3,4,10,0.38);
}

.character-wizard .cw-real-preview-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.character-wizard .cw-real-preview-label strong {
  font-size: 13px;
}

.character-wizard .cw-real-preview-label span {
  color: #888ea1;
  font-size: 10px;
}

.character-wizard .cw-library-card-preview {
  display: grid;
  place-items: center;
  min-height: 370px;
}

.character-wizard .cw-actual-character-card {
  position: relative;
  width: 232px;
  height: 326px;
  overflow: hidden;
  border: 1px solid rgba(180,169,246,0.13);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(12,14,25,0.98), rgba(5,6,13,1));
  box-shadow: 0 20px 52px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.035);
}

.character-wizard .cw-actual-character-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,6,14,0) 0%, rgba(5,6,14,0.08) 42%, rgba(5,6,14,0.72) 67%, rgba(5,6,14,0.99) 100%);
}

.character-wizard .cw-actual-card-badge {
  position: absolute;
  z-index: 6;
  top: 15px;
  left: 15px;
  padding: 5px 8px;
  border: 1px solid rgba(157,111,255,0.34);
  border-radius: 999px;
  background: rgba(19,13,45,0.72);
  color: #d3c3ff;
  font-size: 9px;
  font-weight: 800;
}

.character-wizard .cw-actual-card-art {
  position: absolute;
  inset: 10px 10px auto 10px;
  height: 201px;
  overflow: hidden;
  border-radius: 14px;
  background: #11131d;
}

.character-wizard .cw-actual-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}

.character-wizard .cw-actual-card-art > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #8c72c8;
  font-size: 46px;
}

.character-wizard .cw-actual-card-body {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 6px;
  padding: 0 14px 14px;
}

.character-wizard .cw-actual-card-body h3,
.character-wizard .cw-actual-card-body p {
  margin: 0;
}

.character-wizard .cw-actual-card-body h3 {
  color: #fff;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.character-wizard .cw-actual-card-meta {
  color: rgba(226,223,241,0.72);
  font-size: 11px;
  font-weight: 620;
}

.character-wizard .cw-actual-card-summary {
  display: -webkit-box;
  max-height: 35px;
  overflow: hidden;
  color: rgba(239,234,249,0.76);
  font-size: 11px;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.character-wizard .cw-actual-card-tags,
.character-wizard .cw-actual-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.character-wizard .cw-actual-card-tags span,
.character-wizard .cw-actual-detail-tags span {
  padding: 4px 7px;
  border: 1px solid rgba(133,92,223,0.24);
  border-radius: 7px;
  background: rgba(44,28,98,0.72);
  color: rgba(211,200,250,0.88);
  font-size: 9px;
  font-weight: 720;
}

.character-wizard .cw-detail-window-preview {
  min-height: 370px;
}

.character-wizard .cw-actual-detail-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 0.78fr) minmax(0, 1.55fr);
  min-height: 370px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 17px;
  background:
    radial-gradient(circle at 82% 14%, rgba(126, 83, 255, 0.19), transparent 30%),
    linear-gradient(90deg, #04050c 0%, #04050c 35%, rgba(6, 6, 14, 0.7) 48%, rgba(6, 6, 14, 0.08) 100%);
  isolation: isolate;
}

.character-wizard .cw-actual-detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, #03040a 0%, rgba(3,4,10,0.98) 36%, rgba(3,4,10,0.78) 49%, rgba(3,4,10,0.16) 67%, transparent 78%);
}

.character-wizard .cw-actual-detail-copy {
  position: relative;
  z-index: 5;
  grid-column: 1;
  display: flex;
  width: auto;
  min-width: 0;
  min-height: 370px;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0 28px 34px;
}

.character-wizard .cw-actual-detail-copy > span {
  align-self: flex-start;
  padding: 5px 8px;
  border: 1px solid rgba(157,111,255,0.3);
  border-radius: 999px;
  color: #c6b1ff;
  font-size: 9px;
  font-weight: 800;
}

.character-wizard .cw-actual-detail-copy h2,
.character-wizard .cw-actual-detail-copy p,
.character-wizard .cw-actual-detail-copy blockquote {
  margin: 0;
}

.character-wizard .cw-actual-detail-copy h2 {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(35px, 4vw, 54px);
  line-height: 0.94;
}

.character-wizard .cw-actual-detail-copy small {
  margin-top: 8px;
  color: #9197a9;
  font-size: 10px;
}

.character-wizard .cw-actual-detail-copy blockquote {
  margin-top: 20px;
  color: #dfb7ff;
  font-size: 17px;
  font-weight: 780;
  line-height: 1.38;
}

.character-wizard .cw-actual-detail-copy > p {
  margin-top: 13px;
  color: #b9bdca;
  font-size: 11px;
  line-height: 1.6;
}

.character-wizard .cw-actual-detail-tags {
  margin-top: 13px;
}

.character-wizard .cw-actual-detail-actions {
  display: flex;
  gap: 7px;
  margin-top: 19px;
}

.character-wizard .cw-actual-detail-actions button {
  min-height: 33px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  background: rgba(255,255,255,0.035);
  color: #cdd0dc;
  font-size: 9px;
}

.character-wizard .cw-actual-detail-actions button:last-child {
  border-color: transparent;
  background: linear-gradient(135deg, #8a4cf4, #5f2bd1);
  color: #fff;
}

.character-wizard .cw-actual-detail-art {
  position: relative;
  z-index: 1;
  grid-column: 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 370px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(4, 5, 12, 0.48), rgba(5, 5, 12, 0.12));
}

.character-wizard .cw-actual-detail-art img {
  position: absolute;
  inset: auto -1% -10% auto;
  z-index: 3;
  width: min(66%, 660px);
  height: 118%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: center bottom;
  will-change: auto;
}

.character-wizard .cw-actual-detail-art > span {
  position: absolute;
  right: 17%;
  top: 50%;
  color: #6f658a;
  font-size: 12px;
}


@media (max-width: 780px) {
  .character-wizard .cw-shared-image-upload {
    grid-template-columns: 1fr;
  }

  .character-wizard .cw-shared-upload-actions {
    justify-content: flex-start;
  }

  .character-wizard .cw-image-editor-grid {
    grid-template-columns: 1fr;
  }

  .character-wizard .cw-actual-detail-hero {
    grid-template-columns: 1fr;
  }

  .character-wizard .cw-actual-detail-copy,
  .character-wizard .cw-actual-detail-art {
    grid-column: 1;
  }

  .character-wizard .cw-actual-detail-copy {
    width: auto;
    padding-left: 22px;
  }
}

/* Create wizard only: mirror the real character detail screen in its preview. */
.character-wizard .cw-detail-window-preview {
  min-height: 0;
}

.character-wizard .cw-main-detail-preview {
  --cw-detail-image-bg: none;
  position: relative;
  display: grid;
  grid-template-columns: 39% 61%;
  width: 100%;
  min-height: 320px;
  aspect-ratio: 2.18 / 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 17px;
  background:
    radial-gradient(circle at 82% 14%, rgba(126, 83, 255, 0.19), transparent 30%),
    linear-gradient(90deg, #04050c 0%, #04050c 35%, rgba(6, 6, 14, 0.7) 48%, rgba(6, 6, 14, 0.08) 100%);
  isolation: isolate;
}

.character-wizard .cw-main-detail-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 5, 12, 0.99) 0%, rgba(4, 5, 12, 0.95) 29%, rgba(4, 5, 12, 0.56) 43%, rgba(4, 5, 12, 0.1) 62%, transparent 77%),
    linear-gradient(180deg, rgba(4, 5, 12, 0.02), rgba(4, 5, 12, 0.22) 100%);
}

.character-wizard .cw-main-detail-copy {
  position: relative;
  z-index: 7;
  grid-column: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 25px 0 22px 28px;
}

.character-wizard .cw-main-detail-badge {
  align-self: flex-start;
  padding: 5px 9px;
  border: 1px solid rgba(157, 111, 255, 0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, #9654ff, #6e35dd);
  color: #fff;
  font-size: 9px;
  font-weight: 850;
}

.character-wizard .cw-main-detail-copy h2,
.character-wizard .cw-main-detail-copy p {
  margin: 0;
}

.character-wizard .cw-main-detail-copy h2 {
  margin-top: 15px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(32px, 4.1vw, 48px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-wizard .cw-main-detail-copy > small {
  margin-top: 10px;
  color: rgba(226, 226, 235, 0.78);
  font-size: 10px;
  font-weight: 700;
}

.character-wizard .cw-main-detail-summary {
  display: -webkit-box;
  max-width: 92%;
  margin-top: 23px !important;
  overflow: hidden;
  color: rgba(237, 237, 243, 0.86);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.character-wizard .cw-main-detail-tags {
  display: flex;
  max-width: 94%;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 17px;
  overflow: hidden;
}

.character-wizard .cw-main-detail-tags span {
  padding: 4px 7px;
  border: 1px solid rgba(134, 91, 223, 0.27);
  border-radius: 5px;
  background: rgba(63, 37, 119, 0.78);
  color: rgba(231, 221, 255, 0.92);
  font-size: 8px;
  font-weight: 760;
  white-space: nowrap;
}

.character-wizard .cw-main-detail-stats {
  display: grid;
  width: min(96%, 300px);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(8, 9, 17, 0.44);
}

.character-wizard .cw-main-detail-stats > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 11px 9px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.character-wizard .cw-main-detail-stats > span:last-child {
  border-right: 0;
}

.character-wizard .cw-main-detail-stats strong {
  color: #fff;
  font-size: 17px;
  line-height: 1;
}

.character-wizard .cw-main-detail-stats small {
  color: rgba(211, 212, 224, 0.68);
  font-size: 7px;
}

.character-wizard .cw-main-detail-safe {
  display: flex;
  width: min(96%, 300px);
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding: 9px 11px;
  border: 1px solid rgba(151, 91, 255, 0.46);
  border-radius: 7px;
  background: rgba(64, 31, 115, 0.42);
  color: rgba(231, 224, 248, 0.82);
}

.character-wizard .cw-main-detail-safe span {
  color: #c4a1ff;
  font-size: 10px;
}

.character-wizard .cw-main-detail-safe p {
  overflow: hidden;
  font-size: 7px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-wizard .cw-main-detail-actions {
  display: grid;
  width: min(96%, 300px);
  grid-template-columns: 0.8fr 1fr 1fr;
  gap: 7px;
  margin-top: 12px;
}

.character-wizard .cw-main-detail-actions button {
  min-width: 0;
  min-height: 32px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(15, 16, 27, 0.82);
  color: rgba(224, 225, 234, 0.9);
  font-size: 8px;
  font-weight: 760;
  white-space: nowrap;
}

.character-wizard .cw-main-detail-actions button:nth-child(2),
.character-wizard .cw-main-detail-actions button:nth-child(3) {
  border-color: transparent;
  background: linear-gradient(135deg, #914eff, #642cda);
  color: #fff;
}

.character-wizard .cw-main-detail-art {
  position: relative;
  z-index: 1;
  grid-column: 2;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #05060d;
}

.character-wizard .cw-main-detail-art::before {
  content: "";
  position: absolute;
  inset: -18px -18px -18px -24%;
  z-index: 1;
  pointer-events: none;
  background: var(--cw-detail-image-bg, none) center / cover no-repeat;
  filter: blur(13px) saturate(0.76) brightness(0.56);
  opacity: 0.52;
  transform: scale(1.06);
}

.character-wizard .cw-main-detail-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 5, 12, 0.88) 0%, rgba(4, 5, 12, 0.52) 19%, rgba(4, 5, 12, 0.1) 43%, transparent 68%),
    linear-gradient(180deg, rgba(3, 4, 10, 0.02) 0%, transparent 48%, rgba(3, 4, 10, 0.3) 100%);
}

.character-wizard .cw-main-detail-art > img {
  position: absolute;
  inset: auto -1% -10% auto;
  z-index: 2;
  display: block;
  width: min(66%, 660px);
  height: 118%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
}

.character-wizard .cw-main-detail-art > span {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 28%;
  color: #716985;
  font-size: 11px;
}

.character-wizard .cw-main-detail-quote {
  position: absolute;
  z-index: 6;
  left: 8%;
  bottom: 15%;
  display: flex;
  width: 48%;
  align-items: center;
  gap: 7px;
  color: rgba(227, 212, 255, 0.72);
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.72);
}

.character-wizard .cw-main-detail-quote span {
  color: rgba(139, 73, 255, 0.9);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
}

.character-wizard .cw-main-detail-quote p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-family: "Noto Serif KR", "Malgun Gothic", serif;
  font-size: clamp(14px, 1.75vw, 22px);
  font-weight: 790;
  line-height: 1.36;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 780px) {
  .character-wizard .cw-main-detail-preview {
    min-width: 620px;
    min-height: 284px;
  }

  .character-wizard .cw-detail-window-preview {
    overflow-x: auto;
  }
}

/* 2026-06-14 create wizard only: description image editor and detail preview parity. */
.character-wizard .cw-create-crop-frame.standing {
  width: min(100%, 430px);
  height: 537px;
  aspect-ratio: auto;
  margin: 14px auto 12px;
}

.character-wizard .cw-create-crop-frame.standing .cw-standing-face-guide {
  left: 50% !important;
  top: 25% !important;
  width: 86px !important;
  height: 122px !important;
}

.character-wizard .cw-main-detail-preview {
  position: relative;
  display: block;
  min-height: 0;
  aspect-ratio: 2.28 / 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 16%, rgba(123, 82, 255, 0.2), transparent 33%),
    linear-gradient(90deg, #03040a 0%, #03040a 39%, rgba(6, 6, 14, 0.72) 51%, rgba(7, 7, 16, 0.18) 100%);
}

.character-wizard .cw-main-detail-preview::before {
  background:
    linear-gradient(90deg, rgba(3, 4, 10, 0.99) 0%, rgba(3, 4, 10, 0.96) 31%, rgba(3, 4, 10, 0.66) 44%, rgba(3, 4, 10, 0.22) 57%, transparent 74%),
    linear-gradient(180deg, rgba(3, 4, 10, 0.04) 0%, transparent 52%, rgba(3, 4, 10, 0.18) 100%);
}

.character-wizard .cw-main-detail-copy {
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(39%, 330px);
  max-width: 330px;
  height: 100%;
  padding: 22px 0 22px 28px;
}

.character-wizard .cw-main-detail-copy h2 {
  margin-top: 11px;
  font-size: clamp(30px, 3.4vw, 42px);
}

.character-wizard .cw-main-detail-copy > small {
  margin-top: 7px;
}

.character-wizard .cw-main-detail-summary {
  width: min(92%, 300px);
  margin-top: 14px !important;
  line-height: 1.45;
}

.character-wizard .cw-main-detail-tags {
  margin-top: 10px;
}

.character-wizard .cw-main-detail-stats {
  width: min(96%, 300px);
  margin-top: 11px;
}

.character-wizard .cw-main-detail-stats > span {
  padding: 7px 9px 6px;
}

.character-wizard .cw-main-detail-safe {
  width: min(96%, 300px);
  margin-top: 7px;
  padding: 7px 9px;
}

.character-wizard .cw-main-detail-actions {
  margin-top: 8px;
}

.character-wizard .cw-main-detail-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.character-wizard .cw-main-detail-art::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: 1;
  pointer-events: none;
  background: var(--cw-detail-image-bg, none) center / cover no-repeat;
  filter: blur(16px) saturate(0.76) brightness(0.58);
  opacity: 0.42;
  transform: scale(1.06);
}

.character-wizard .cw-main-detail-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 5, 12, 0.98) 0%, rgba(4, 5, 12, 0.74) 23%, rgba(4, 5, 12, 0.18) 46%, transparent 70%),
    linear-gradient(180deg, rgba(3, 4, 10, 0.02) 0%, transparent 46%, rgba(3, 4, 10, 0.33) 100%),
    radial-gradient(circle at 70% 46%, transparent 0%, rgba(0, 0, 0, 0.16) 76%);
}

.character-wizard .cw-main-detail-art > img {
  position: absolute;
  inset: auto -1% -10% auto;
  z-index: 3;
  display: block;
  width: min(66%, 660px);
  height: 118%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
}

@media (max-width: 780px) {
  .character-wizard .cw-create-crop-frame.standing {
    width: 100%;
    max-width: 430px;
    height: 537px;
  }
}

/* 2026-06-15 create wizard only: render the real detail hero inside an isolated, scaled viewport. */
.character-wizard .cw-detail-window-preview {
  min-height: 0;
  overflow: hidden;
}

.character-wizard .cw-live-detail-preview {
  position: relative;
  width: 100%;
  min-height: 1px;
  overflow: hidden;
  background: #03040a;
}

.character-wizard .cw-live-detail-scale,
.character-wizard .cw-live-detail-offset {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.character-wizard .cw-live-detail-frame {
  display: block;
  max-width: none;
  border: 0;
  background: #03040a;
  pointer-events: none;
}

/* 2026-06-15 character management/navigation pass.
   Keep the existing cards and detail hero intact; only tighten Play layout and add the new surfaces. */

/* Sidebar recent rooms */
.sidebar-recent {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  min-height: 0;
}

.sidebar-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 9px;
}

.sidebar-recent-head h2 {
  margin: 0;
  color: rgba(230, 228, 240, 0.58);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.025em;
}

.sidebar-recent-list {
  display: grid;
  gap: 3px;
  max-height: min(300px, 34vh);
  overflow-y: auto;
  scrollbar-width: thin;
}

.sidebar-recent-empty {
  margin: 0;
  padding: 10px 7px;
  color: rgba(212, 210, 225, 0.42);
  font-size: 11px;
  line-height: 1.45;
}

.sidebar-recent-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 6px 7px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}

.sidebar-recent-item:hover,
.sidebar-recent-item:focus-visible {
  background: rgba(135, 87, 244, 0.12);
  outline: none;
  transform: translateX(2px);
}

.recent-room-art {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
}

.recent-room-avatar,
.recent-room-fallback {
  position: absolute;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 2px solid #090a12;
  border-radius: 999px;
  background: linear-gradient(135deg, #7040dc, #25144c);
  color: #fff;
  font-size: 11px;
  font-weight: 820;
}

.recent-room-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recent-room-avatar.avatar-1 { left: 0; top: 2px; z-index: 3; }
.recent-room-avatar.avatar-2 { left: 9px; top: 2px; z-index: 2; }
.recent-room-avatar.avatar-3 { left: 15px; top: 7px; z-index: 1; width: 28px; height: 28px; }
.recent-room-fallback { inset: 2px auto auto 0; }

.recent-room-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.recent-room-copy strong {
  overflow: hidden;
  color: rgba(247, 245, 253, 0.88);
  font-size: 12.5px;
  font-weight: 680;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-room-copy small {
  color: rgba(205, 202, 219, 0.46);
  font-size: 10px;
}

/* Play density and typography, following the provided reference rather than inventing another oversized landing page. */
body.play-active .workspace {
  padding-top: 14px !important;
}

.play-view .page-head {
  align-items: center !important;
  margin: 0 0 16px !important;
}

.play-view .page-head h1 {
  margin: 0 0 5px !important;
  font-size: clamp(34px, 2.45vw, 42px) !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

.play-view .page-head p {
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: rgba(214, 213, 226, 0.66) !important;
}

.play-view .head-actions {
  align-self: center !important;
  padding-top: 0 !important;
}

.play-view .search-box,
.play-view .head-actions .ghost-button,
#quickCreateBtn {
  min-height: 48px !important;
  height: 48px !important;
}

.play-view .character-section {
  margin-top: 0 !important;
}

.play-view .section-head {
  align-items: end !important;
  margin-bottom: 11px !important;
}

.play-view .section-head h2 {
  font-size: 21px !important;
  font-weight: 760 !important;
  letter-spacing: -0.025em !important;
}

.play-view .section-head p {
  margin-top: 4px !important;
  font-size: 12.5px !important;
}

.section-more-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 4px;
  border: 0;
  background: transparent;
  color: rgba(190, 135, 255, 0.9);
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
}

.section-more-button span {
  font-size: 19px;
  line-height: 0.7;
}

.section-more-button:hover,
.section-more-button:focus-visible {
  color: #d8b6ff;
  outline: none;
}

.play-view .genre-rail {
  margin-top: 14px !important;
}

.play-view .play-rail-row.play-rail-row-single {
  grid-template-columns: minmax(0, 1fr) !important;
  margin-top: 18px !important;
}

.play-view .play-rail-row-single .mini-rail-block {
  max-width: 760px;
}

.play-view .mini-rail-head h2 {
  font-size: 18px !important;
  font-weight: 740 !important;
}

/* Full character catalogue */
body.all-characters-active .workspace {
  padding: 20px clamp(30px, 3.5vw, 54px) 70px !important;
}

.all-characters-view {
  width: 100%;
  min-height: calc(100vh - 40px);
}

.all-characters-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  align-items: center !important;
  gap: 28px;
  margin-bottom: 18px !important;
}

.all-characters-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.all-characters-heading-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.all-characters-title-row h1 {
  margin: 0 0 6px;
  font-size: 34px !important;
  font-weight: 740 !important;
  letter-spacing: -0.035em !important;
}

.all-character-count {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(230, 223, 250, 0.82);
  font-size: 11px;
  font-weight: 720;
}

.all-characters-title-row p {
  margin: 0 !important;
  color: rgba(217, 212, 231, 0.58) !important;
  font-size: 12px !important;
}

.compact-back-button {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 11px;
  background: rgba(11, 12, 21, 0.72);
  color: rgba(244, 240, 255, 0.86);
  font-size: 24px;
  cursor: pointer;
}

.all-character-search {
  width: 100%;
  height: 46px !important;
  min-height: 46px !important;
}

.all-character-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.all-character-toolbar button {
  min-height: 33px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(12, 13, 23, 0.72);
  color: rgba(216, 213, 229, 0.68);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.all-character-toolbar button.active {
  border-color: rgba(165, 103, 255, 0.5);
  background: rgba(112, 60, 220, 0.28);
  color: #f3eaff;
}



.all-character-grid .catalog-character-tile {
  position: relative !important;
  width: 100% !important;
  height: 340px !important;
  min-height: 340px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(180deg, rgba(19, 18, 31, 0.98), rgba(9, 10, 19, 0.98)) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

.all-character-grid .catalog-character-tile:hover,
.all-character-grid .catalog-character-tile:focus-visible {
  transform: translateY(-4px) !important;
  border-color: rgba(164, 113, 255, 0.34) !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.38) !important;
}

.all-character-grid .catalog-character-tile .tile-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.all-character-grid .catalog-character-tile .tile-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transition: transform 180ms ease !important;
}

.all-character-grid .catalog-character-tile:hover .tile-art img {
  transform: scale(calc(var(--card-crop-zoom, 1.05) + 0.02)) !important;
}

.all-character-grid .catalog-character-tile::after,
.all-character-grid .catalog-character-tile .tile-art::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 54%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 7, 12, 0) 0%, rgba(6, 7, 12, 0.34) 28%, rgba(6, 7, 12, 0.84) 72%, rgba(6, 7, 12, 0.98) 100%);
}

.all-character-grid .catalog-character-tile .tile-body {
  position: absolute !important;
  inset: auto 0 0 !important;
  z-index: 4 !important;
  display: grid;
  gap: 10px;
  padding: 0 14px 14px !important;
}

.all-character-grid .catalog-character-tile .compact-title {
  display: grid;
  gap: 4px;
}

.all-character-grid .catalog-character-tile .tile-title h3 {
  margin: 0;
  font-size: 23px !important;
  font-weight: 780 !important;
  line-height: 1.02 !important;
}

.all-character-grid .catalog-character-tile .tile-meta {
  margin: 0 !important;
  color: rgba(239, 233, 248, 0.78) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.all-character-grid .catalog-character-tile .tile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}

.all-character-grid .catalog-character-tile .tile-tags span {
  padding: 6px 9px !important;
  border-radius: 10px !important;
  background: rgba(122, 76, 224, 0.22) !important;
  color: rgba(244, 237, 255, 0.9) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  border: 1px solid rgba(169, 121, 255, 0.18) !important;
}

.all-character-grid .catalog-character-tile .tile-badge {
  top: 12px !important;
  left: 12px !important;
  z-index: 6 !important;
}

.all-character-grid .catalog-character-tile .tile-heart {
  top: 12px !important;
  right: 12px !important;
  z-index: 6 !important;
}

.all-character-grid .catalog-character-tile .catalog-hover-panel {
  position: absolute;
  inset: auto 10px 10px 10px;
  z-index: 5;
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(13, 13, 21, 0.68), rgba(10, 11, 18, 0.96));
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.all-character-grid .catalog-character-tile:hover .catalog-hover-panel,
.all-character-grid .catalog-character-tile:focus-visible .catalog-hover-panel,
.all-character-grid .catalog-character-tile.selected .catalog-hover-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.all-character-grid .catalog-character-tile .catalog-summary {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: rgba(238, 232, 246, 0.88);
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.all-character-grid .catalog-character-tile .catalog-hover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.all-character-grid .catalog-character-tile .catalog-detail-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 243, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.all-character-grid .catalog-character-tile .add-card-button {
  position: static !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
}


.all-character-empty {
  margin: 70px 0;
  color: rgba(215, 211, 228, 0.5);
  text-align: center;
}

/* Owner controls on the existing detail page */
body.detail-active .character-detail-view .detail-image-edit-button {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 12 !important;
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
  background: rgba(7, 8, 15, 0.68) !important;
  color: rgba(250, 247, 255, 0.92) !important;
  font-size: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(14px) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

body.detail-active .character-detail-view .detail-image-edit-button:hover {
  border-color: rgba(182, 126, 255, 0.58) !important;
  background: rgba(91, 48, 183, 0.46) !important;
}

body.detail-active .character-detail-view .detail-image-edit-button.hidden {
  display: none !important;
}

.detail-owner-tools {
  position: absolute;
  top: 3px;
  right: 0;
  z-index: 22;
  width: auto;
  margin: 0;
}

.detail-owner-tools button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(236, 126, 145, 0.18);
  border-radius: 999px;
  background: rgba(45, 18, 27, 0.22);
  color: rgba(236, 153, 168, 0.76);
  font-size: 11px;
  font-weight: 720;
  cursor: pointer;
}

.detail-owner-tools button:hover {
  border-color: rgba(255, 140, 160, 0.42);
  background: rgba(83, 25, 40, 0.34);
  color: #ffadbb;
}





























.character-wizard .cw-create-crop-frame.standing .crop-face-guide,
.character-wizard .cw-create-crop-frame.standing .cw-standing-face-guide {
  display: none !important;
}



@media (max-width: 680px) {
  
  .sidebar-recent { display: none; }
}

/* Remove the old nested Play padding so the page title aligns with the brand row. */
body.play-active .play-view {
  padding: 12px 0 36px !important;
}



















@media (max-width: 720px) {
  .catalog-character-card { grid-template-rows: 200px auto; min-height: 300px; }
  .catalog-card-copy { padding: 12px; }
  .catalog-card-heading h3 { font-size: 17px; }
}

/* Chat room exit: explicit, low-noise control. Does not affect other views. */
.chat-view .room-leave-button {
  border-color: rgba(171, 128, 255, 0.24) !important;
  background: rgba(83, 48, 143, 0.16) !important;
  color: rgba(230, 216, 255, 0.88) !important;
}

.chat-view .room-leave-button:hover,
.chat-view .room-leave-button:focus-visible {
  border-color: rgba(176, 126, 255, 0.48) !important;
  background: rgba(103, 55, 184, 0.27) !important;
  color: #f3eaff !important;
}

.chat-view .room-leave-button:disabled {
  cursor: wait;
  opacity: 0.56;
}




/* 2026-06-16: stable detail summary, media menu, chat sprite workflow. */
/* Full catalogue must respect the crop saved in Create. No screen-specific forced horizontal shift. */
.all-characters-view .all-character-grid .catalog-character-tile.builtin-owned .tile-art img,
.all-characters-view .all-character-grid .catalog-character-tile.builtin-owned:hover .tile-art img,
.all-characters-view .all-character-grid .catalog-character-tile.builtin-owned:focus-visible .tile-art img,
.all-characters-view .all-character-grid .catalog-character-tile.builtin-owned.selected .tile-art img,
.all-characters-view .all-character-grid .catalog-character-tile.owned:not(.builtin-owned) .tile-art img,
.all-characters-view .all-character-grid .catalog-character-tile.owned:not(.builtin-owned):hover .tile-art img,
.all-characters-view .all-character-grid .catalog-character-tile.owned:not(.builtin-owned):focus-visible .tile-art img,
.all-characters-view .all-character-grid .catalog-character-tile.owned:not(.builtin-owned).selected .tile-art img {
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
}

.all-characters-view .all-character-grid .catalog-character-tile:hover .tile-art img,
.all-characters-view .all-character-grid .catalog-character-tile:focus-visible .tile-art img,
.all-characters-view .all-character-grid .catalog-character-tile.selected .tile-art img {
  transform: scale(calc(var(--card-crop-zoom, 1.05) + 0.02)) !important;
}

/* Only the description text scrolls. The edit icon stays pinned at the upper-right. */
body.detail-active .character-detail-view #detailSummary.detail-summary-shell {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: min(470px, 100%) !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 18px 0 16px !important;
  padding: 0 30px 0 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.detail-active .character-detail-view #detailSummary .detail-summary-scroll {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: clamp(176px, 22vh, 238px);
  padding: 0 8px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: rgba(244, 244, 252, 0.9);
  font-size: 15px;
  line-height: 1.72;
  outline: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

body.detail-active .character-detail-view #detailSummary .detail-summary-scroll:hover,
body.detail-active .character-detail-view #detailSummary .detail-summary-scroll:focus-visible,
body.detail-active .character-detail-view #detailSummary .detail-summary-scroll.is-scrolling {
  scrollbar-color: rgba(157, 111, 244, 0.45) transparent;
}

body.detail-active .character-detail-view #detailSummary .detail-summary-scroll::-webkit-scrollbar { width: 5px; }
body.detail-active .character-detail-view #detailSummary .detail-summary-scroll::-webkit-scrollbar-track { background: transparent; }
body.detail-active .character-detail-view #detailSummary .detail-summary-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: transparent; }
body.detail-active .character-detail-view #detailSummary .detail-summary-scroll:hover::-webkit-scrollbar-thumb,
body.detail-active .character-detail-view #detailSummary .detail-summary-scroll:focus-visible::-webkit-scrollbar-thumb,
body.detail-active .character-detail-view #detailSummary .detail-summary-scroll.is-scrolling::-webkit-scrollbar-thumb { background: rgba(157, 111, 244, 0.42); }

body.detail-active .character-detail-view #detailSummary .detail-summary-edit-button {
  position: absolute !important;
  top: -4px !important;
  right: 2px !important;
  z-index: 4 !important;
  margin: 0 !important;
}

body.detail-active .character-detail-view #detailSummary.editing-inline {
  height: auto !important;
  max-height: none !important;
  padding-right: 0 !important;
}

body.detail-active .character-detail-view #detailSummary.editing-inline .inline-edit-form {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: end !important;
  gap: 8px !important;
}

body.detail-active .character-detail-view #detailSummary.editing-inline textarea.inline-edit-input {
  min-height: 200px !important;
  max-height: 260px !important;
  resize: vertical !important;
}

/* Compact owner media menu on the existing image, without changing the hero. */
body.detail-active .character-detail-view .detail-media-edit-control {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 14;
}

body.detail-active .character-detail-view .detail-media-edit-control.hidden { display: none !important; }
body.detail-active .character-detail-view .detail-media-edit-control .detail-image-edit-button {
  position: static !important;
  inset: auto !important;
}

.detail-media-edit-menu {
  position: absolute;
  top: 46px;
  right: 0;
  width: 270px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 15px;
  background: rgba(11, 12, 20, 0.94);
  box-shadow: 0 24px 60px rgba(0,0,0,0.48);
  backdrop-filter: blur(18px);
}

.detail-media-edit-menu.hidden { display: none !important; }
.detail-media-edit-menu > button {
  display: grid;
  width: 100%;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #f4efff;
  text-align: left;
  cursor: pointer;
}
.detail-media-edit-menu > button:hover { background: rgba(137, 85, 239, 0.14); }
.detail-media-edit-menu > button > span { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:rgba(137,85,239,0.17); color:#c7a8ff; }
.detail-media-edit-menu strong, .detail-media-edit-menu small { display:block; }
.detail-media-edit-menu strong { font-size:12px; }
.detail-media-edit-menu small { margin-top:3px; color:rgba(220,216,232,0.56); font-size:10px; }

/* Create: third, full-width image category for transparent conversation sprites. */
.character-wizard .cw-chat-sprite-card {
  margin-top: 14px;
  padding: 18px;
  border-color: rgba(154, 109, 255, 0.13);
  background:
    radial-gradient(circle at 90% 10%, rgba(123, 72, 224, 0.10), transparent 30%),
    rgba(255, 255, 255, 0.018);
}
.character-wizard .cw-chat-sprite-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.character-wizard .cw-title-with-badge { display:flex; align-items:center; gap:9px; }
.character-wizard .cw-title-with-badge span { padding:4px 8px; border-radius:999px; background:rgba(140,88,244,.14); color:#bda2f7; font-size:9px; font-weight:800; }
.character-wizard .cw-chat-sprite-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.character-wizard .cw-chat-sprite-actions button { min-height:36px; padding:0 12px; font-size:11px; }
.character-wizard .cw-chat-sprite-editor { display:grid; grid-template-columns:minmax(260px, 0.9fr) minmax(230px, 0.65fr); gap:18px; margin-top:15px; }
.character-wizard .cw-chat-sprite-frame,
.chat-sprite-editor-frame {
  position:relative;
  min-height:420px;
  overflow:hidden;
  border:1px dashed rgba(159,112,255,.30);
  border-radius:15px;
  background:#0c0d15;
  cursor:grab;
  touch-action:none;
}
.character-wizard .cw-chat-sprite-frame.dragging,
.chat-sprite-editor-frame.dragging { cursor:grabbing; }
.cw-transparent-grid {
  position:absolute;
  inset:0;
  background-color:#11131d;
  background-image:linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.035) 75%);
  background-size:24px 24px;
  background-position:0 0,0 12px,12px -12px,-12px 0;
}
.character-wizard .cw-chat-sprite-frame img,
.chat-sprite-editor-frame img { position:absolute; left:50%; top:50%; z-index:2; max-width:76%; max-height:92%; transform-origin:center center; filter:drop-shadow(0 20px 24px rgba(0,0,0,.45)); user-select:none; pointer-events:none; }
.cw-chat-sprite-empty,
.chat-sprite-editor-empty { position:absolute; inset:0; z-index:1; display:grid; place-items:center; color:rgba(200,190,220,.46); font-size:12px; }
.character-wizard .cw-chat-sprite-side { display:flex; flex-direction:column; justify-content:center; gap:14px; }
.character-wizard .cw-chat-sprite-side > small { color:#a791d4; font-size:11px; font-weight:700; }
.character-wizard .cw-chat-sprite-help,
.chat-sprite-editor-note { padding:14px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(8,9,16,.42); }
.character-wizard .cw-chat-sprite-help strong,
.chat-sprite-editor-note strong { color:#eee8fb; font-size:12px; }
.character-wizard .cw-chat-sprite-help p,
.chat-sprite-editor-note p { margin:5px 0 0; color:#7d8397; font-size:10px; line-height:1.55; }
.character-wizard .cw-chat-sprite-tools { justify-content:flex-start; }

/* Conversation sprite editor. */
.chat-sprite-editor-modal { width:min(980px, calc(100vw - 44px)) !important; padding:28px 30px 24px !important; }
.chat-sprite-editor-head small { color:#b591ff; font-size:10px; font-weight:800; text-transform:uppercase; }
.chat-sprite-editor-head h2 { margin:5px 0 3px; }
.chat-sprite-editor-head p { margin:0; color:rgba(220,216,232,.58); font-size:11px; }
.chat-sprite-editor-body { display:grid; grid-template-columns:minmax(320px, 1fr) minmax(230px, .62fr); gap:20px; margin-top:18px; }
.chat-sprite-editor-frame { min-height:560px; }
.chat-sprite-editor-side { display:flex; flex-direction:column; justify-content:center; gap:14px; }
.chat-sprite-editor-upload { display:grid; gap:8px; }
.chat-sprite-editor-tools { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; }
.chat-sprite-editor-tools button:last-child { grid-column:1 / -1; }

/* Runtime sprite transform uses saved values and never reuses the detail crop. */
.vn-standing {
  transform: translateX(calc(-50% + var(--sprite-x, 0%))) translateY(var(--sprite-y, 0%)) scale(var(--sprite-scale-x, var(--sprite-scale, 1)), var(--sprite-scale-y, var(--sprite-scale, 1))) !important;
  transform-origin: center bottom !important;
}


/* Final polish for the transparent-sprite editor. */
.chat-sprite-editor-modal {
  max-height: calc(100vh - 48px) !important;
  overflow-y: auto !important;
}
.chat-sprite-editor-modal .icon-button {
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(18,19,30,.82) !important;
  color: rgba(243,239,255,.88) !important;
}
.chat-sprite-editor-tools button {
  min-height: 40px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 11px !important;
  background: rgba(18,20,32,.88) !important;
  color: rgba(239,234,250,.88) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}
.chat-sprite-editor-tools button:hover {
  border-color: rgba(157,111,244,.42) !important;
  background: rgba(105,62,190,.20) !important;
}
.chat-sprite-editor-tools strong {
  display: grid;
  min-width: 70px;
  place-items: center;
  color: #c6a8ff;
  font-size: 12px;
}
.chat-sprite-editor-modal .modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
.chat-sprite-editor-modal .modal-actions .primary-button,
.chat-sprite-editor-modal .modal-actions .secondary-button {
  min-width: 126px !important;
}
@media (max-height: 820px) {
  .chat-sprite-editor-frame { min-height: 420px; }
}

/* 2026-06-20: guided dialogue-sprite placement with true in-game preview. */
.character-wizard .cw-chat-sprite-editor {
  grid-template-columns: minmax(320px, 1fr) minmax(340px, 0.84fr);
  align-items: stretch;
}

.chat-sprite-editor-body {
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 0.84fr);
  align-items: stretch;
}

.character-wizard .cw-chat-sprite-frame,
.chat-sprite-editor-frame {
  min-height: 560px;
  background:
    radial-gradient(circle at 50% 9%, rgba(133, 81, 239, 0.13), transparent 36%),
    linear-gradient(180deg, rgba(11, 13, 23, 0.96), rgba(6, 8, 14, 0.98));
}

.character-wizard .cw-chat-sprite-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 0;
}

.chat-sprite-editor-side {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 0;
}

.character-wizard .cw-chat-sprite-side > small,
.chat-sprite-editor-side > small {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 20px;
  color: #c9b4ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.character-wizard .cw-chat-sprite-side > small::before,
.chat-sprite-editor-side > small::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212, 144, 255, 0.98), rgba(117, 86, 240, 0.96));
  box-shadow: 0 0 0 4px rgba(129, 76, 236, 0.14);
}

.cw-chat-sprite-preview-card,
.chat-sprite-editor-preview-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(127, 79, 230, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(13, 15, 26, 0.95), rgba(9, 11, 19, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.cw-chat-sprite-preview-head,
.chat-sprite-editor-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.cw-chat-sprite-preview-head strong,
.chat-sprite-editor-preview-head strong {
  color: #f5f0ff;
  font-size: 13px;
  font-weight: 800;
}

.cw-chat-sprite-preview-head span,
.chat-sprite-editor-preview-head span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(168, 118, 255, 0.18);
  border-radius: 999px;
  background: rgba(109, 69, 196, 0.14);
  color: rgba(220, 206, 255, 0.8);
  font-size: 10px;
  font-weight: 800;
}

.chat-sprite-stage-preview {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(103, 60, 201, 0.12), transparent 34%),
    rgba(5, 7, 13, 0.98);
}

.chat-sprite-preview-chrome {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
}

.chat-sprite-preview-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(10, 12, 20, 0.86);
  color: rgba(232, 225, 250, 0.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.chat-sprite-preview-viewport {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(5, 7, 12, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.chat-sprite-preview-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
}

.chat-sprite-preview-caption {
  color: rgba(203, 195, 222, 0.64);
  font-size: 11px;
  line-height: 1.55;
}

.chat-sprite-game-preview-context {
  display: block !important;
  width: 960px;
  height: 640px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.chat-sprite-game-preview-context .vn-stage-shell {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
}

.chat-sprite-game-preview-context .vn-stage {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  border-bottom: 0 !important;
  background-position: center 48% !important;
  cursor: default !important;
}

.chat-sprite-game-preview-context .vn-dialogue-box,
.chat-sprite-game-preview-context .vn-scene-card {
  animation: none !important;
}

.chat-sprite-game-preview-context .vn-character,
.chat-sprite-game-preview-context .vn-character.speaking {
  animation: none !important;
}

.cw-transparent-grid {
  z-index: 0;
}

.chat-sprite-guide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.chat-sprite-guide-center-line {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(178, 127, 255, 0.04), rgba(178, 127, 255, 0.92) 18%, rgba(178, 127, 255, 0.92) 82%, rgba(178, 127, 255, 0.04));
  box-shadow: 0 0 0 1px rgba(109, 74, 177, 0.06), 0 0 12px rgba(140, 95, 243, 0.18);
}

.chat-sprite-guide-baseline {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 90%;
  border-top: 2px dashed rgba(255, 199, 119, 0.72);
}

.chat-sprite-guide-baseline span {
  position: absolute;
  right: 0;
  top: -24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 196, 96, 0.15);
  color: rgba(255, 222, 168, 0.9);
  font-size: 10px;
  font-weight: 800;
}

/* 머리 크기 기준 타원. 크기 기준이지 위치 기준이 아니다. 키가 다르면 머리가
   놓이는 높이도 달라야 하므로 여기에 머리를 밀어 넣는 것이 아니라, 발은 발
   기준선에 맞추고 머리 크기만 이 타원과 같아지게 배율을 조절한다.
   폭·높이는 chatSpriteGuideMarkup 이 인라인으로 넣는다(기준 캐릭터에서 역산). */
.chat-sprite-guide-head {
  position: absolute;
  left: 50%;
  top: 6%;
  width: auto;
  transform: translateX(-50%);
  border: 1px dashed rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: none;
}

.chat-sprite-guide-head span {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.34);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.chat-sprite-guide-ruler {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 86px;
}

.chat-sprite-guide-tick {
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1px solid rgba(193, 177, 232, 0.18);
}

.chat-sprite-guide-tick::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 18px;
  border-top: 1px solid rgba(223, 217, 238, 0.64);
}

.chat-sprite-guide-tick.major::after {
  width: 28px;
  border-top-width: 2px;
  border-top-color: rgba(240, 235, 251, 0.86);
}

.chat-sprite-guide-tick span {
  position: absolute;
  left: 0;
  top: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(8, 10, 16, 0.78);
  color: rgba(236, 231, 247, 0.82);
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.character-wizard .cw-chat-sprite-frame img,
.chat-sprite-editor-frame img {
  z-index: 3;
  max-width: 82%;
  max-height: 94%;
}


/* 2026-06-16 final catalogue image rule:
   use the finished Create card image exactly once. No second crop, pan or zoom. */
body.all-characters-active .all-character-grid .catalog-character-tile .catalog-tile-art {
  background-color: #090a12 !important;
  background-image: var(--catalog-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body.all-characters-active .all-character-grid .catalog-character-tile .catalog-tile-art > img,
body.all-characters-active .all-character-grid .catalog-character-tile:hover .catalog-tile-art > img,
body.all-characters-active .all-character-grid .catalog-character-tile:focus-visible .catalog-tile-art > img,
body.all-characters-active .all-character-grid .catalog-character-tile.selected .catalog-tile-art > img,
body.all-characters-active .all-character-grid .catalog-character-tile.owned .catalog-tile-art > img,
body.all-characters-active .all-character-grid .catalog-character-tile.builtin-owned .catalog-tile-art > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  transform-origin: center center !important;
}

/* The hero used to disable pointer events. Keep the artwork passive, but make the
   owner media control and every item inside its popover explicitly interactive. */
body.detail-active .character-detail-view .detail-media-edit-control,
body.detail-active .character-detail-view .detail-media-edit-control *,
body.detail-active .character-detail-view .detail-media-edit-menu,
body.detail-active .character-detail-view .detail-media-edit-menu > button {
  pointer-events: auto !important;
}

body.detail-active .character-detail-view .detail-media-edit-menu {
  z-index: 40 !important;
}

/* 2026-06-16: isolated full-catalogue cards.
   These classes intentionally do not reuse character-tile/tile-art/tile-body,
   so Play and Library card rules cannot affect the catalogue. */


body.all-characters-active .catalog-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 340px;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 18px;
  background: #090a12;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  outline: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body.all-characters-active .catalog-card:hover,
body.all-characters-active .catalog-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(166, 112, 255, 0.34);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.38);
}

body.all-characters-active .catalog-card.selected {
  border-color: rgba(156, 94, 255, 0.78);
  box-shadow: 0 0 0 1px rgba(156, 94, 255, 0.35), 0 18px 36px rgba(65, 31, 126, 0.28);
}

body.all-characters-active .catalog-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #090a12;
}

body.all-characters-active .catalog-card-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%);
  transform: translate(var(--card-pan-x, 0px), var(--card-pan-y, 0px)) scale(var(--card-crop-zoom, 1));
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 50%);
  filter: none;
}

body.all-characters-active .catalog-card-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: radial-gradient(circle at 50% 30%, rgba(126, 76, 219, 0.26), rgba(8, 9, 16, 0.96) 72%);
  color: rgba(244, 238, 255, 0.9);
  font-size: 54px;
  font-weight: 780;
}

body.all-characters-active .catalog-card-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 7, 12, 0.02) 0%, rgba(6, 7, 12, 0.08) 42%, rgba(6, 7, 12, 0.68) 72%, rgba(6, 7, 12, 0.98) 100%),
    linear-gradient(90deg, rgba(6, 7, 12, 0.06), transparent 45%);
}

body.all-characters-active .catalog-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(233, 77, 188, 0.94), rgba(151, 71, 234, 0.94));
  color: white;
  font-size: 11px;
  font-weight: 780;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(107, 42, 178, 0.2);
}

body.all-characters-active .catalog-card-heart {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 4;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(11, 12, 20, 0.58);
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  cursor: pointer;
  backdrop-filter: blur(9px);
}

body.all-characters-active .catalog-card-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 5px;
  padding: 0 14px 14px;
  pointer-events: none;
}

body.all-characters-active .catalog-card-copy h3 {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

body.all-characters-active .catalog-card-copy > p {
  margin: 0;
  overflow: hidden;
  color: rgba(241, 236, 248, 0.78);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.all-characters-active .catalog-card-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-height: 27px;
  margin-top: 5px;
  overflow: hidden;
}

body.all-characters-active .catalog-card-tags span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(166, 116, 255, 0.2);
  border-radius: 9px;
  background: rgba(102, 61, 185, 0.24);
  color: rgba(245, 238, 255, 0.9);
  font-size: 10px;
  font-weight: 690;
  line-height: 1;
  backdrop-filter: blur(8px);
}

body.all-characters-active .catalog-card-hover {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 5;
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(14, 14, 24, 0.76), rgba(9, 10, 17, 0.96));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  backdrop-filter: blur(14px);
  transition: opacity 160ms ease, transform 160ms ease;
}

body.all-characters-active .catalog-card:hover .catalog-card-copy,
body.all-characters-active .catalog-card:focus-visible .catalog-card-copy,
body.all-characters-active .catalog-card.selected .catalog-card-copy {
  opacity: 0;
}

body.all-characters-active .catalog-card:hover .catalog-card-hover,
body.all-characters-active .catalog-card:focus-visible .catalog-card-hover,
body.all-characters-active .catalog-card.selected .catalog-card-hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.all-characters-active .catalog-card-hover > p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: rgba(240, 235, 248, 0.88);
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.all-characters-active .catalog-card-hover > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.all-characters-active .catalog-card-detail,
body.all-characters-active .catalog-card-add {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 11px;
  color: rgba(250, 247, 255, 0.94);
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}

body.all-characters-active .catalog-card-detail {
  flex: 1;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.06);
}

body.all-characters-active .catalog-card-add {
  flex: 0 0 38px;
  width: 38px;
  padding: 0;
  background: linear-gradient(135deg, rgba(139, 76, 244, 0.92), rgba(105, 52, 209, 0.92));
  font-size: 20px;
}

body.all-characters-active .catalog-card-add.selected {
  background: rgba(77, 42, 139, 0.9);
}


@media (max-width: 780px) {
  
  body.all-characters-active .catalog-card {
    height: 310px;
    min-height: 310px;
  }
  body.all-characters-active .catalog-card-copy h3 {
    font-size: 20px;
  }
}

/* Shared image-management menu used by both Library cards and the detail page. */
.character-media-menu {
  position: fixed;
  z-index: 2400;
  width: min(292px, calc(100vw - 24px));
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 17px;
  background:
    radial-gradient(circle at 88% 0%, rgba(133, 79, 238, 0.18), transparent 36%),
    rgba(10, 11, 19, 0.97);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  pointer-events: auto;
}

.character-media-menu.hidden { display: none !important; }

.character-media-menu-head {
  display: grid;
  gap: 2px;
  padding: 7px 9px 8px;
}

.character-media-menu-head small {
  color: rgba(177, 143, 244, 0.78);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.character-media-menu-head strong {
  color: rgba(248, 245, 255, 0.94);
  font-size: 13px;
  font-weight: 780;
}

.character-media-menu > button {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f5f0ff;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  transition: background 140ms ease, transform 140ms ease;
}

.character-media-menu > button:hover,
.character-media-menu > button:focus-visible {
  background: rgba(134, 84, 235, 0.15);
  outline: none;
  transform: translateX(2px);
}

.character-media-menu-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(178, 133, 255, 0.15);
  border-radius: 11px;
  background: rgba(131, 79, 228, 0.16);
  color: #c9aeff;
  font-size: 16px;
}

.character-media-menu > button div {
  min-width: 0;
}

.character-media-menu > button strong,
.character-media-menu > button small {
  display: block;
}

.character-media-menu > button strong {
  color: rgba(248, 245, 255, 0.96);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
}

.character-media-menu > button small {
  margin-top: 4px;
  overflow: hidden;
  color: rgba(219, 214, 230, 0.56);
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Full catalogue uses the exact same card photo and crop values as Play and Library. */
body.all-characters-active .catalog-card-image {
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
}

/* 2026-06-16: polished character profile, deletable rooms, and real wishlist. */

/* Keep every primary action visible. The middle profile copy is the only flexible row. */
body.detail-active .character-detail-view .detail-hero {
  height: clamp(650px, calc(100vh - 112px), 760px) !important;
  min-height: 650px !important;
}

body.detail-active .character-detail-view .detail-copy {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(112px, 1fr) auto auto auto auto !important;
  align-content: stretch !important;
  justify-content: initial !important;
  gap: 0 !important;
  padding-top: 34px !important;
  padding-bottom: 30px !important;
}

body.detail-active .character-detail-view .detail-copy h1 {
  margin: 8px 0 7px !important;
  font-size: clamp(48px, 4vw, 68px) !important;
}

body.detail-active .character-detail-view #detailQuote:empty {
  display: none !important;
}

body.detail-active .character-detail-view #detailSummary.detail-summary-shell {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 16px 0 12px !important;
  overflow: hidden !important;
}

body.detail-active .character-detail-view #detailSummary .detail-summary-scroll {
  position: relative;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 0 11px 4px 17px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-left: 1px solid rgba(166, 112, 255, 0.19);
}

body.detail-active .character-detail-view .detail-summary-label {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  margin: 0 0 12px;
  padding: 1px 8px 7px 0;
  background: linear-gradient(90deg, #03040a 74%, rgba(3, 4, 10, 0));
  color: rgba(177, 137, 250, 0.76);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1;
}

body.detail-active .character-detail-view .detail-summary-label i {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #a36dff, rgba(163, 109, 255, 0.18));
  box-shadow: 0 0 12px rgba(147, 89, 255, 0.35);
}

body.detail-active .character-detail-view .detail-summary-prose {
  display: grid;
  gap: 0;
}

body.detail-active .character-detail-view .detail-summary-prose p {
  margin: 0;
  color: rgba(224, 222, 235, 0.72);
  font-size: 14.5px;
  font-weight: 520;
  line-height: 1.72;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}

body.detail-active .character-detail-view .detail-summary-prose p:first-child {
  color: rgba(246, 243, 252, 0.91);
}

body.detail-active .character-detail-view .detail-summary-prose p + p {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

body.detail-active .character-detail-view #detailTags {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

body.detail-active .character-detail-view .detail-stats {
  flex: none !important;
  margin: 0 0 10px !important;
}

body.detail-active .character-detail-view .detail-safe-note {
  flex: none !important;
  margin: 0 0 12px !important;
}

body.detail-active .character-detail-view .detail-actions {
  align-self: end !important;
  flex: none !important;
  margin-top: 0 !important;
}

body.detail-active .character-detail-view #detailSummary.editing-inline {
  min-height: 0 !important;
  overflow: visible !important;
}

body.detail-active .character-detail-view #detailSummary.editing-inline textarea.inline-edit-input {
  min-height: 142px !important;
  max-height: 190px !important;
}

/* Sidebar room rows: the open target stays roomy; delete only appears when needed. */
.sidebar-recent-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  transition: background 150ms ease, transform 150ms ease !important;
}

.sidebar-recent-item:hover,
.sidebar-recent-item:focus-within {
  background: rgba(135, 87, 244, 0.12) !important;
  transform: translateX(2px) !important;
}

.sidebar-recent-open {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 6px 4px 6px 7px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.sidebar-recent-open:focus-visible,
.sidebar-recent-delete:focus-visible {
  outline: 1px solid rgba(170, 118, 255, 0.62);
  outline-offset: -2px;
}

.sidebar-recent-delete {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(224, 218, 236, 0.42);
  font-size: 17px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.88);
  cursor: pointer;
  transition: opacity 140ms ease, transform 140ms ease, color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.sidebar-recent-item:hover .sidebar-recent-delete,
.sidebar-recent-item:focus-within .sidebar-recent-delete {
  opacity: 1;
  transform: scale(1);
}

.sidebar-recent-delete:hover {
  border-color: rgba(255, 120, 145, 0.2);
  background: rgba(213, 64, 94, 0.13);
  color: rgba(255, 173, 190, 0.92);
}

/* Heart buttons now mean wishlist, consistently across every card surface. */
.tile-heart,
.catalog-card-heart {
  transition: transform 150ms ease, color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
}

.tile-heart:hover,
.catalog-card-heart:hover {
  transform: scale(1.06) !important;
}

.tile-heart.is-wishlisted,
body.all-characters-active .catalog-card-heart.is-wishlisted {
  border-color: rgba(235, 117, 205, 0.48) !important;
  background: linear-gradient(145deg, rgba(177, 70, 199, 0.92), rgba(112, 62, 221, 0.92)) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(157, 63, 202, 0.34) !important;
}

.all-character-toolbar [data-character-filter="wishlist"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#wishlistFilterCount {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(244, 237, 255, 0.82);
  font-size: 9px;
  font-weight: 800;
}

.all-character-toolbar [data-character-filter="wishlist"].active #wishlistFilterCount {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

@media (max-height: 760px) and (min-width: 1121px) {
  body.detail-active .character-detail-view .detail-copy {
    padding-top: 26px !important;
    padding-bottom: 24px !important;
  }
  body.detail-active .character-detail-view .detail-copy h1 {
    font-size: clamp(44px, 3.5vw, 60px) !important;
  }
  body.detail-active .character-detail-view .detail-summary-prose p {
    font-size: 13.5px !important;
    line-height: 1.62 !important;
  }
}

/* Constrain the hero's only grid row. Without this, CSS Grid expands the row to
   the description's min-content height and merely clips the buttons afterward. */
body.detail-active .character-detail-view .detail-hero {
  grid-template-rows: minmax(0, 1fr) !important;
}

body.detail-active .character-detail-view .detail-copy {
  box-sizing: border-box !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Leave a real gap above the fixed selection tray instead of letting it cover
   the hero's action row. Long bios scroll in the profile row, not by growing the hero. */
body.detail-active .character-detail-view .detail-hero {
  height: clamp(620px, calc(100vh - 190px), 680px) !important;
  min-height: 620px !important;
}

body.detail-active .character-detail-view .detail-copy {
  grid-template-rows: auto auto auto minmax(92px, 1fr) auto auto auto auto !important;
}


/* 2026-06-17: one real selection tray shared by Play and character detail. */
#globalSelectionTray.selection-tray {
  display: none !important;
}

body.play-active #globalSelectionTray.selection-tray,
body.detail-active #globalSelectionTray.selection-tray {
  position: fixed !important;
  display: grid !important;
  left: calc(var(--nav-width, 268px) + clamp(34px, 3.6vw, 54px)) !important;
  right: clamp(34px, 3.6vw, 54px) !important;
  bottom: 18px !important;
  z-index: 90 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 92px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  grid-template-columns: minmax(0, 1fr) 250px !important;
  align-items: center !important;
  gap: 18px !important;
  border: 1px solid rgba(143, 88, 255, 0.34) !important;
  border-radius: 17px !important;
  background: rgba(12, 14, 24, 0.88) !important;
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.46) !important;
  backdrop-filter: blur(22px) !important;
}

body.modal-open #globalSelectionTray.selection-tray,
body.chat-active #globalSelectionTray.selection-tray,
body.all-characters-active #globalSelectionTray.selection-tray {
  display: none !important;
}

#globalSelectionTray .selected-list {
  min-width: 0 !important;
  min-height: 46px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  overscroll-behavior-inline: contain !important;
}

#globalSelectionTray .selected-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#globalSelectionTray .primary-button,
#globalSelectionTray #startBtn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  height: 52px !important;
  border-radius: 13px !important;
  font-size: 16px !important;
  font-weight: 780 !important;
}

/* The old detail-only copy is gone. Keep stale cached markup from resurfacing. */
.character-detail-view .detail-selection-strip {
  display: none !important;
}

body.detail-active .character-detail-view {
  padding-bottom: 126px !important;
}

/* Keep the three detail actions inside the copy column at every desktop width. */
body.detail-active .character-detail-view .detail-actions {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.11fr) minmax(0, 1.11fr) !important;
  width: min(500px, 100%) !important;
  max-width: 100% !important;
  gap: 8px !important;
  overflow: visible !important;
}

body.detail-active .character-detail-view .detail-actions .primary-button,
body.detail-active .character-detail-view .detail-actions .secondary-button {
  min-width: 0 !important;
  padding-inline: 10px !important;
  font-size: clamp(13px, 0.92vw, 15px) !important;
}

/* Hearts change in place; the hovered card must not collapse on click. */
.tile-heart,
.catalog-card-heart {
  transform-origin: center !important;
  will-change: transform;
}

.tile-heart:active,
.catalog-card-heart:active,
.tile-heart.is-wishlisted:hover,
.catalog-card-heart.is-wishlisted:hover {
  transform: scale(1.06) !important;
}

@media (max-width: 900px) {
  body.play-active #globalSelectionTray.selection-tray,
  body.detail-active #globalSelectionTray.selection-tray {
    left: 14px !important;
    right: 14px !important;
    bottom: 12px !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  body.detail-active .character-detail-view {
    padding-bottom: 170px !important;
  }
}


/* 2026-06-17: explicit auto-play state feedback. */
#autoBtn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 112px !important;
  overflow: hidden !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease, opacity 160ms ease !important;
}

#autoBtn .auto-state-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: scale(0.65);
}

#autoBtn .auto-state-icon {
  width: 14px;
  flex: 0 0 14px;
  text-align: center;
  font-size: 12px;
  line-height: 1;
}

#autoBtn .auto-state-label {
  white-space: nowrap;
}

#autoBtn[data-state="paused"] {
  color: var(--text-strong, #f7f4ff) !important;
}

#autoBtn[data-state="playing"] {
  border-color: rgba(172, 121, 255, 0.82) !important;
  background: linear-gradient(135deg, rgba(99, 54, 201, 0.96), rgba(142, 74, 220, 0.94)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(184, 137, 255, 0.18), 0 0 22px rgba(124, 60, 255, 0.34) !important;
}

#autoBtn[data-state="playing"] .auto-state-dot {
  opacity: 1;
  animation: tryva-auto-pulse 1.05s ease-in-out infinite;
}

#autoBtn[data-state="playing"]:not(:disabled):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 1px rgba(205, 169, 255, 0.24), 0 0 28px rgba(124, 60, 255, 0.46) !important;
}

#autoBtn[data-state="starting"],
#autoBtn[data-state="stopping"] {
  border-color: rgba(168, 134, 232, 0.52) !important;
  background: rgba(66, 48, 104, 0.88) !important;
  color: #eee8ff !important;
  cursor: wait !important;
  opacity: 1 !important;
}

#autoBtn[data-state="starting"] .auto-state-icon,
#autoBtn[data-state="stopping"] .auto-state-icon {
  animation: tryva-auto-spin 0.8s linear infinite;
}

#autoBtn[data-state="starting"] .auto-state-dot,
#autoBtn[data-state="stopping"] .auto-state-dot {
  opacity: 0.45;
}

@keyframes tryva-auto-pulse {
  0%, 100% { opacity: 0.42; transform: scale(0.72); }
  50% { opacity: 1; transform: scale(1.14); }
}

@keyframes tryva-auto-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #autoBtn,
  #autoBtn .auto-state-dot,
  #autoBtn .auto-state-icon {
    animation: none !important;
    transition: none !important;
  }
}

/* 2026-06-17: honest turn state feedback and overlap prevention. */
#autoBtn[data-state="responding"] {
  border-color: rgba(120, 181, 255, 0.68) !important;
  background: linear-gradient(135deg, rgba(39, 83, 142, 0.94), rgba(72, 61, 155, 0.92)) !important;
  color: #f4f8ff !important;
  box-shadow: 0 0 0 1px rgba(138, 190, 255, 0.16), 0 0 22px rgba(71, 118, 214, 0.28) !important;
}

#autoBtn[data-state="responding"] .auto-state-icon {
  animation: tryva-auto-spin 0.8s linear infinite;
}

#autoBtn[data-state="responding"] .auto-state-dot {
  opacity: 1;
  animation: tryva-auto-pulse 1.05s ease-in-out infinite;
}

#autoBtn[data-state="waiting"] {
  border-color: rgba(148, 154, 177, 0.32) !important;
  background: rgba(42, 45, 58, 0.72) !important;
  color: rgba(235, 237, 247, 0.78) !important;
  opacity: 1 !important;
}

#autoBtn[data-state="waiting"] .auto-state-dot {
  opacity: 0.55;
}

#autoBtn[data-state="error"] {
  border-color: rgba(255, 119, 139, 0.72) !important;
  background: linear-gradient(135deg, rgba(126, 42, 66, 0.94), rgba(91, 42, 79, 0.94)) !important;
  color: #fff2f5 !important;
  box-shadow: 0 0 0 1px rgba(255, 146, 162, 0.12), 0 0 18px rgba(184, 48, 84, 0.24) !important;
}

#autoBtn[data-state="error"]:not(:disabled):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 1px rgba(255, 169, 182, 0.2), 0 0 24px rgba(184, 48, 84, 0.34) !important;
}

body.room-turn-busy #userForm button[type="submit"] {
  cursor: wait !important;
  opacity: 0.55 !important;
}

/* 2026-06-17 VN presentation v2 */
.tool-button.reading-control.active,
.tool-button.reading-control[aria-pressed="true"] {
  border-color: rgba(161, 116, 255, 0.62);
  background: rgba(107, 68, 206, 0.24);
  color: #efe8ff;
}

.chat-view .vn-stage.has-speaker .vn-character:not(.speaking),
.chat-view .vn-character.inactive,
body.stage-fullscreen .chat-view .vn-stage.has-speaker .vn-character:not(.speaking) {
  opacity: 1 !important;
  filter: none !important;
  transform: translate3d(-50%, 6%, 0) scale(1) !important;
}

.chat-view .vn-character.speaking,
body.stage-fullscreen .chat-view .vn-character.speaking {
  z-index: 36 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translate3d(-50%, 6%, 0) scale(1) !important;
  animation: none !important;
}

.chat-view .vn-character {
  transition:
    left 420ms cubic-bezier(.2,.76,.2,1),
    transform 220ms ease !important;
  will-change: auto;
  filter: none !important;
}

.chat-view .vn-standing {
  filter: none !important;
}

.chat-view .vn-character::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 17%;
  z-index: -1;
  width: 78%;
  height: 56%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(154, 119, 255, 0.18), transparent 68%);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 220ms ease;
  pointer-events: none;
}

.chat-view .vn-character.speaking::before {
  opacity: 1;
}

.chat-view .vn-bubble,
.chat-view .vn-user-bubble,
.chat-view .vn-narrative,
.chat-view .typing-cursor,
.chat-view .vn-background-loading {
  display: none !important;
}

.vn-background-status {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 78;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(8, 10, 17, 0.68);
  color: rgba(244, 243, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: none;
  pointer-events: none;
}

.vn-background-status.is-error {
  color: rgba(255, 211, 211, 0.88);
}

.vn-background-status .vn-background-spinner {
  width: 13px;
  height: 13px;
  margin: 0;
  border-width: 2px;
}

.vn-dialogue-box,
.vn-scene-card {
  position: absolute;
  z-index: 72;
  color: #f6f4ff;
  cursor: pointer;
  user-select: none;
  animation: vn-presentation-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vn-dialogue-box {
  left: var(--tryva-vn-dialogue-inset, clamp(18px, 4vw, 58px));
  right: var(--tryva-vn-dialogue-inset, clamp(18px, 4vw, 58px));
  bottom: clamp(16px, 3.2vh, 34px);
  min-height: 116px;
  padding: 26px 34px 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(110deg, rgba(12, 14, 23, 0.95), rgba(20, 17, 35, 0.88));
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.42);
  backdrop-filter: none;
}

.vn-dialogue-box.is-narration {
  left: var(--tryva-vn-narration-inset, clamp(34px, 8vw, 130px));
  right: var(--tryva-vn-narration-inset, clamp(34px, 8vw, 130px));
  min-height: 96px;
  border-color: rgba(214, 199, 255, 0.16);
  background: rgba(11, 13, 21, 0.9);
  text-align: center;
}

.vn-dialogue-box.is-npc {
  border-color: rgba(139, 109, 255, 0.32);
}

.vn-dialogue-name {
  position: absolute;
  left: 26px;
  top: -17px;
  min-width: 108px;
  padding: 9px 18px;
  border: 1px solid rgba(207, 187, 255, 0.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(91, 57, 184, 0.96), rgba(57, 39, 118, 0.96));
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.vn-scene-card {
  left: 50%;
  top: 50%;
  width: min(720px, calc(100% - 64px));
  max-height: min(62%, 440px);
  padding: 34px 38px 32px;
  border: 1px solid rgba(229, 218, 255, 0.2);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(11, 13, 22, 0.95), rgba(24, 20, 39, 0.91));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.52);
  transform: translate(-50%, -50%);
  text-align: center;
  backdrop-filter: none;
  overflow: auto;
  animation-name: vn-scene-card-in;
}

.vn-scene-card > strong {
  display: block;
  margin-bottom: 16px;
  color: #d9c8ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.vn-presentation-text {
  display: grid;
  gap: 7px;
  min-height: 1.6em;
  color: #f6f4ff;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.72;
  overflow-wrap: anywhere;
}

.vn-scene-card .vn-presentation-text {
  font-size: clamp(17px, 1.65vw, 22px);
  line-height: 1.8;
}

.vn-presentation-text .action-line {
  margin-top: 4px;
  color: #b9a7ed;
  font-size: 0.82em;
}

.vn-advance-indicator {
  position: absolute;
  right: 20px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(238, 232, 255, 0.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  animation: vn-advance-pulse 1.4s ease-in-out infinite;
}

.vn-scene-card .vn-advance-indicator {
  right: 24px;
  bottom: 16px;
}

.vn-advance-indicator b {
  color: rgba(229, 211, 255, 0.92);
  font-size: 16px;
  line-height: 1;
}

.vn-stage-waiting {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 70;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(8, 10, 17, 0.68);
  color: rgba(244, 243, 255, 0.68);
  font-size: 12px;
  font-weight: 800;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.vn-stage:focus-visible {
  outline: 2px solid rgba(160, 119, 255, 0.8);
  outline-offset: -3px;
}

.vn-stage.is-advancing .vn-dialogue-box,
.vn-stage.is-advancing .vn-scene-card {
  pointer-events: none;
  opacity: 0.82;
}

body.stage-fullscreen .vn-dialogue-box {
  left: max(34px, calc((100vw - 1120px) / 2));
  right: max(34px, calc((100vw - 1120px) / 2));
  bottom: 104px;
}

body.stage-fullscreen .vn-scene-card {
  width: min(860px, calc(100vw - 80px));
}

@keyframes vn-presentation-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes vn-scene-card-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(0.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes vn-advance-pulse {
  0%, 100% { opacity: 0.48; transform: translateY(0); }
  50% { opacity: 0.92; transform: translateY(2px); }
}

@media (max-width: 900px) {
  .tool-button.reading-control {
    padding-inline: 9px;
    font-size: 11px;
  }

  .chat-view .vn-character,
  .chat-view .vn-stage.has-speaker .vn-character:not(.speaking),
  .chat-view .vn-character.speaking,
  body.stage-fullscreen .chat-view .vn-character,
  body.stage-fullscreen .chat-view .vn-character.speaking {
    transform: translate3d(-50%, 6%, 0) scale(1) !important;
  }

  .vn-dialogue-box,
  .vn-dialogue-box.is-narration {
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-height: 104px;
    padding: 24px 18px 22px;
    border-radius: 16px;
  }

  .vn-dialogue-name {
    left: 16px;
    top: -15px;
    min-width: 90px;
    padding: 7px 14px;
  }

  .vn-scene-card {
    width: calc(100% - 28px);
    max-height: 70%;
    padding: 26px 20px 28px;
    border-radius: 18px;
  }

  .vn-presentation-text,
  .vn-scene-card .vn-presentation-text {
    font-size: 15px;
    line-height: 1.65;
  }

  .vn-advance-indicator {
    right: 14px;
    bottom: 8px;
  }

  body.stage-fullscreen .vn-dialogue-box {
    left: 14px;
    right: 14px;
    bottom: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vn-character,
  .vn-character::before,
  .vn-dialogue-box,
  .vn-scene-card,
  .vn-advance-indicator,
  .vn-background-spinner {
    animation: none !important;
    transition: none !important;
  }
}

.stage-reading-controls {
  position: absolute;
  top: 102px;
  right: 18px;
  z-index: 84;
  display: flex;
  gap: 7px;
  pointer-events: auto;
}

.stage-reading-controls .tool-button {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(8, 10, 17, 0.72);
  backdrop-filter: blur(12px);
}

body.stage-fullscreen .stage-reading-controls {
  top: 16px;
  right: 72px;
}

@media (max-width: 900px) {
  .stage-reading-controls {
    top: 96px;
    right: 10px;
  }
}

/* VN v2 stage shell: anchors reading controls to the stage, not the variable-height header. */
.vn-stage-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.vn-stage-shell > .vn-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.vn-stage-shell > .stage-reading-controls {
  top: 12px;
  right: 14px;
}

body.stage-fullscreen .vn-stage-shell {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

body.stage-fullscreen .vn-stage-shell > .stage-reading-controls {
  top: 16px;
  right: 72px;
}

/* Keep room controls readable instead of crushing every Korean label into vertical text. */
.chat-header .controls {
  min-width: 0;
  flex-wrap: nowrap;
}

.chat-header .controls .tool-button {
  white-space: nowrap;
  padding-inline: clamp(10px, 1.05vw, 18px);
}

@media (max-width: 1500px) {
  .chat-active .workspace {
    padding-inline: 22px;
  }

  .chat-view {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 330px);
    gap: 16px;
  }

  .chat-header {
    gap: 10px;
    padding: 14px 16px;
  }

  .chat-header .controls {
    gap: 7px;
  }

  .chat-header .controls .tool-button {
    min-height: 42px;
    padding-inline: 10px;
    font-size: 12px;
  }
}


@media (max-width: 900px) {
  .vn-stage-shell > .stage-reading-controls {
    top: 10px;
    right: 10px;
  }
}

body.stage-fullscreen .vn-stage-shell {
  position: relative;
  inset: auto;
  z-index: auto;
}

/* 2026-06-17 VN presentation v3 repair */
.reading-auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 9px 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(8, 10, 17, 0.76);
  color: rgba(244, 241, 255, 0.78);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.reading-auto-toggle:hover,
.reading-auto-toggle:focus-visible {
  border-color: rgba(174, 137, 255, 0.48);
  color: #f6f1ff;
  outline: none;
}

.reading-auto-toggle.active {
  border-color: rgba(167, 123, 255, 0.58);
  background: rgba(89, 54, 176, 0.3);
  color: #f8f4ff;
}

.reading-auto-label {
  white-space: nowrap;
}

.reading-toggle {
  position: relative;
  width: 31px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background 180ms ease;
}

.reading-toggle i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.26);
  transition: transform 180ms ease, background 180ms ease;
}

.reading-toggle[data-enabled="true"] {
  background: rgba(139, 89, 255, 0.82);
}

.reading-toggle[data-enabled="true"] i {
  transform: translateX(13px);
  background: #fff;
}

.vn-startup-loading {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(5, 7, 13, 0.78), rgba(5, 7, 13, 0.9));
  color: #f4f0ff;
  text-align: center;
  backdrop-filter: blur(8px);
}

.vn-startup-loading strong {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.vn-startup-loading small {
  color: rgba(233, 226, 255, 0.62);
  font-size: 12px;
  font-weight: 750;
}

.vn-startup-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(181, 143, 255, 0.94);
  border-radius: 50%;
  animation: vn-startup-spin 780ms linear infinite;
}

@keyframes vn-startup-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .reading-auto-toggle {
    min-height: 34px;
    padding: 6px 8px 6px 11px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reading-auto-toggle,
  .reading-toggle,
  .reading-toggle i,
  .vn-startup-spinner {
    transition: none !important;
    animation: none !important;
  }
}


/* 2026-06-17 VN presentation v4 refinements */
.stage-fullscreen-exit {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 13px;
  z-index: 1202;
}

.stage-fullscreen-exit svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.stage-fullscreen .vn-stage-shell > .stage-reading-controls {
  top: 18px;
  left: 18px;
  right: auto;
  z-index: 1201;
}

body.stage-fullscreen .vn-background-status {
  top: 18px;
  right: 76px;
}

.vn-dialogue-box.is-player {
  left: auto;
  right: var(--tryva-vn-dialogue-inset, clamp(18px, 4vw, 58px));
  width: var(--tryva-vn-player-width, min(620px, calc(100% - 76px)));
  min-height: 96px;
  padding: 24px 28px 30px;
  border-color: rgba(159, 121, 255, 0.3);
  background: linear-gradient(118deg, rgba(37, 24, 72, 0.94), rgba(18, 15, 31, 0.91));
  text-align: right;
}

.vn-dialogue-box.is-player .vn-dialogue-name {
  left: auto;
  right: 24px;
  background: linear-gradient(135deg, rgba(128, 77, 229, 0.98), rgba(76, 45, 151, 0.98));
}

.vn-dialogue-box.is-player .vn-presentation-text {
  justify-items: end;
}

.vn-player-waiting {
  position: absolute;
  right: 22px;
  bottom: 10px;
  color: rgba(229, 220, 255, 0.55);
  font-size: 11px;
  font-weight: 750;
}

body.stage-fullscreen .vn-dialogue-box.is-player {
  left: auto;
  right: max(34px, calc((100vw - 1120px) / 2));
  width: min(700px, calc(100vw - 80px));
}

@media (max-width: 900px) {
  body.stage-fullscreen .vn-stage-shell > .stage-reading-controls {
    top: 12px;
    left: 12px;
  }

  body.stage-fullscreen .stage-fullscreen-exit {
    top: 12px;
    right: 12px;
  }

  body.stage-fullscreen .vn-background-status {
    top: 62px;
    right: 12px;
  }

  .vn-dialogue-box.is-player,
  body.stage-fullscreen .vn-dialogue-box.is-player {
    left: 52px;
    right: 12px;
    width: auto;
  }
}

/* 2026-06-18 VN presentation v5: stable copy selection and clearer live state. */
.brand-mark {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.brand-mark:hover .brand-logo,
.brand-mark:focus-visible .brand-logo {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(184, 145, 255, 0.24), 0 8px 22px rgba(100, 55, 205, 0.24);
}

.brand-mark:focus-visible {
  outline: 1px solid rgba(171, 127, 255, 0.52);
  outline-offset: 7px;
  border-radius: 10px;
}

.brand-logo {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.room-live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
  color: rgba(226, 220, 240, 0.68) !important;
  white-space: nowrap;
}

.room-live-status::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: rgba(179, 168, 201, 0.58);
  box-shadow: 0 0 0 3px rgba(179, 168, 201, 0.08);
}

.room-live-status[data-tone="generating"]::before,
.room-live-status[data-tone="typing"]::before {
  background: rgba(171, 124, 255, 0.96);
  box-shadow: 0 0 0 4px rgba(144, 91, 255, 0.12);
  animation: tryva-room-status-pulse 1.15s ease-in-out infinite;
}

.room-live-status[data-tone="ready"]::before {
  background: rgba(119, 220, 176, 0.9);
  box-shadow: 0 0 0 3px rgba(119, 220, 176, 0.1);
}

.room-live-status[data-tone="error"] {
  color: rgba(255, 193, 204, 0.88) !important;
}

.room-live-status[data-tone="error"]::before {
  background: rgba(255, 111, 138, 0.94);
  box-shadow: 0 0 0 3px rgba(255, 111, 138, 0.11);
}

@keyframes tryva-room-status-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

.insight-panel,
.insight-pane,
.insight-block p,
.insight-block li,
.insight-messages .message-text {
  user-select: text;
}

.insight-block p,
.insight-block li,
.insight-messages .message-text {
  cursor: text;
}

.vn-compose-waiting {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 5vh, 54px);
  z-index: 74;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  width: min(390px, calc(100% - 36px));
  padding: 15px 18px;
  border: 1px solid rgba(207, 187, 255, 0.18);
  border-radius: 16px;
  background: rgba(10, 12, 20, 0.82);
  color: #f4f0ff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.vn-compose-waiting strong,
.vn-compose-waiting small {
  grid-column: 2;
}

.vn-compose-waiting strong {
  font-size: 13px;
  font-weight: 900;
}

.vn-compose-waiting small {
  color: rgba(228, 220, 244, 0.58);
  font-size: 11px;
  font-weight: 700;
}

.vn-compose-spinner {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.13);
  border-top-color: rgba(178, 139, 255, 0.94);
  border-radius: 50%;
  animation: vn-startup-spin 760ms linear infinite;
}

.vn-stage.is-typing {
  cursor: default;
}

.vn-stage.can-advance {
  cursor: pointer;
}


@media (prefers-reduced-motion: reduce) {
  .room-live-status::before,
  .vn-compose-spinner {
    animation: none !important;
  }
}

/* ===== Google account + sidebar footer ===== */
.sidebar-footer {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-utility-links {
  display: grid;
  gap: 4px;
}

.sidebar-utility-button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(225, 225, 239, 0.68);
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  transition: background 160ms ease, color 160ms ease;
}

.sidebar-utility-button:hover {
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.92);
}

.sidebar-utility-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: rgba(195, 184, 237, 0.78);
  font-size: 15px;
}

.account-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(119, 72, 242, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(17, 19, 28, 0.82);
  color: #fff;
  text-align: left;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.account-card:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 101, 255, 0.35);
  background:
    linear-gradient(135deg, rgba(119, 72, 242, 0.16), rgba(255, 255, 255, 0.035)),
    rgba(17, 19, 28, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.04);
}

.account-avatar,
.settings-account-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(154, 102, 255, 0.92), rgba(91, 47, 191, 0.96));
  background-position: center;
  background-size: cover;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 7px 20px rgba(87, 44, 180, 0.25);
}

.account-avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.account-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.account-copy strong,
.account-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-copy strong {
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  font-weight: 720;
}

.account-copy small {
  color: rgba(204, 203, 220, 0.58);
  font-size: 10.5px;
  font-weight: 520;
}

.account-card.is-signed-in .account-copy small {
  color: rgba(180, 157, 246, 0.82);
}

.account-chevron {
  color: rgba(214, 205, 239, 0.46);
  font-size: 20px;
  line-height: 1;
}

.account-modal-backdrop {
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3, 4, 10, 0.72);
  backdrop-filter: blur(18px);
}

.account-modal {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  border: 1px solid rgba(166, 137, 255, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -15%, rgba(126, 72, 245, 0.25), transparent 42%),
    linear-gradient(180deg, rgba(18, 18, 31, 0.98), rgba(8, 9, 15, 0.99));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.045);
  color: #fff;
}

.login-modal {
  padding: 38px 36px 32px;
  text-align: center;
}

.account-modal-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.account-modal-brand-logo {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(111, 56, 218, 0.34));
}

.account-modal h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.03em;
}

.login-modal > p {
  max-width: 330px;
  margin: 12px auto 24px;
  color: rgba(225, 224, 237, 0.68);
  font-size: 13px;
  line-height: 1.65;
}

.account-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.68);
  font-size: 20px;
}

.account-modal-close:hover {
  background: rgba(255, 255, 255, 0.075);
  color: #fff;
}

.google-login-slot {
  display: flex;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}

.google-login-disabled {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.45);
}

.account-modal-hint {
  margin: 16px 0 0 !important;
  color: rgba(203, 200, 218, 0.48) !important;
  font-size: 11px !important;
}

.settings-modal,
.help-modal {
  padding: 28px;
}

.account-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-right: 66px;
}

.account-modal-head span {
  display: block;
  margin-bottom: 6px;
  color: rgba(169, 137, 248, 0.78);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-section {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
}

.settings-section + .settings-section {
  margin-top: 12px;
}

.settings-section h3 {
  margin: 0 0 14px;
  font-size: 13px;
}

.settings-account-panel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.settings-account-avatar {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.settings-account-panel > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.settings-account-panel strong,
.settings-account-panel small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-account-panel strong {
  font-size: 13px;
}

.settings-account-panel small {
  color: rgba(220, 218, 231, 0.55);
  font-size: 11px;
}

.settings-sync-badge {
  padding: 6px 9px;
  border: 1px solid rgba(139, 99, 241, 0.22);
  border-radius: 999px;
  background: rgba(119, 72, 228, 0.11);
  color: rgba(197, 177, 255, 0.88);
  font-size: 10px;
  font-weight: 700;
}

.settings-primary-button,
.settings-danger-button {
  width: 100%;
  min-height: 42px;
  border-radius: 11px;
  font-weight: 700;
}

.settings-primary-button {
  border: 1px solid rgba(139, 94, 255, 0.45);
  background: linear-gradient(135deg, rgba(127, 69, 240, 0.95), rgba(97, 48, 198, 0.95));
  color: #fff;
}

.settings-danger-button {
  border: 1px solid rgba(255, 108, 134, 0.24);
  background: rgba(255, 74, 110, 0.06);
  color: rgba(255, 151, 170, 0.9);
}

.settings-danger-button:hover {
  background: rgba(255, 74, 110, 0.11);
}

.settings-note-section p {
  margin: 0;
  color: rgba(220, 218, 231, 0.58);
  font-size: 11.5px;
  line-height: 1.65;
}

.help-list {
  display: grid;
  gap: 10px;
}

.help-list article {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}

.help-list strong {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
}

.help-list p {
  margin: 0;
  color: rgba(220, 218, 231, 0.58);
  font-size: 11.5px;
  line-height: 1.6;
}

body.account-dialog-open {
  overflow: hidden;
}

@media (max-height: 760px) {
  .nav-shell {
    padding-top: 18px;
    padding-bottom: 14px;
  }
  .brand-mark {
    margin-bottom: 22px;
  }
  .sidebar-footer {
    gap: 8px;
  }
  .account-card {
    min-height: 58px;
  }
}

@media (max-width: 860px) {
  .account-modal-backdrop {
    align-items: end;
    padding: 12px;
  }
  .account-modal {
    width: 100%;
    border-radius: 20px 20px 14px 14px;
  }
}

/* Tryva v3.0: do not flash hardcoded built-in characters before server catalog sync. */
.catalog-loading-state {
  grid-column: 1 / -1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(235, 231, 248, 0.82);
  text-align: center;
}
.catalog-loading-state strong { font-size: 14px; }
.catalog-loading-state small { color: rgba(213, 207, 233, 0.58); font-size: 12px; }
.catalog-loading-state button {
  margin-top: 4px;
  border: 1px solid rgba(160, 132, 255, 0.35);
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(122, 86, 220, 0.15);
  color: #eee9ff;
  cursor: pointer;
}
.catalog-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(185, 157, 255, 0.9);
  border-radius: 50%;
  animation: tryvaCatalogSpin 0.75s linear infinite;
}
.catalog-error-state > span:first-child {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 110, 130, 0.12);
  color: #ff9cad;
  font-weight: 800;
}
.catalog-loading-rail { color: rgba(213, 207, 233, 0.55); font-size: 12px; }
@keyframes tryvaCatalogSpin { to { transform: rotate(360deg); } }

/* Tryva v3.0 final: maintenance and catalog boot states. */
.maintenance-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 8, 18, 0.86);
  backdrop-filter: blur(16px);
}
.maintenance-overlay.hidden { display: none; }
.maintenance-overlay section {
  width: min(440px, 100%);
  padding: 28px;
  border: 1px solid rgba(171, 145, 255, 0.28);
  border-radius: 20px;
  background: rgba(24, 20, 38, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  text-align: center;
}
.maintenance-overlay strong { display: block; margin-bottom: 10px; font-size: 20px; }
.maintenance-overlay p { margin: 0; color: rgba(226, 221, 241, 0.72); line-height: 1.6; }
/* V3.4 room-scoped administrator error logs */
.room-error-log-toolbar {
  display: flex;
  gap: 8px;
  padding: 10px 10px 0;
}

.room-error-log-toolbar button {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
}

.room-error-logs-text {
  box-sizing: border-box;
  width: calc(100% - 20px);
  min-height: 420px;
  margin: 10px;
  padding: 12px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(8, 10, 16, 0.94);
  color: #f3f3f3;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre;
  overflow: auto;
}

/* V3.5 streamed actor draft */
.vn-dialogue-box.is-streaming {
  /* Keep the same anchored dialogue-box geometry while text streams in. */
}

.vn-streaming-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  opacity: 0.62;
  user-select: none;
}

.vn-streaming-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  animation: vn-stream-pulse 0.9s ease-in-out infinite alternate;
}

.vn-stream-placeholder {
  opacity: 0.58;
}

@keyframes vn-stream-pulse {
  from { opacity: 0.3; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}


/* 2026-06-20 v3.8: refine dialogue sprite guide + preview fidelity. */
.character-wizard .cw-chat-sprite-main,
.chat-sprite-editor-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
}

.character-wizard .cw-chat-sprite-editor {
  grid-template-columns: minmax(360px, 1fr) minmax(340px, 0.78fr);
}

.chat-sprite-editor-body {
  grid-template-columns: minmax(360px, 1fr) minmax(340px, 0.78fr);
}

.character-wizard .cw-chat-sprite-frame,
.chat-sprite-editor-frame {
  min-height: 580px;
}

.character-wizard .cw-chat-sprite-tools,
.chat-sprite-editor-tools {
  grid-template-columns: 1fr auto 1fr auto;
  align-self: start;
}

.character-wizard .cw-chat-sprite-tools button:last-child,
.chat-sprite-editor-tools button:last-child {
  grid-column: auto;
}

.character-wizard .cw-chat-sprite-side,
.chat-sprite-editor-side {
  grid-template-rows: auto minmax(0, 1fr);
}

.chat-sprite-stage-preview {
  aspect-ratio: 1.48 / 1;
  min-height: 0;
}

.chat-sprite-preview-viewport {
  min-height: 0;
  aspect-ratio: 1.48 / 1;
}

.chat-sprite-preview-badge {
  display: none;
}

.chat-sprite-preview-chrome {
  gap: 8px;
}

.chat-sprite-preview-caption {
  display: none;
}

.chat-sprite-game-preview-context {
  width: 1120px;
  height: 760px;
}

.chat-sprite-live-preview-shell {
  display: grid;
  grid-template-rows: 56px 1fr 74px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(6, 8, 15, 0.96), rgba(2, 4, 10, 0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.chat-sprite-live-preview-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(7,9,18,.96), rgba(5,7,15,.92));
}

.chat-sprite-live-preview-title {
  color: #f4f1ff;
  font-size: 16px;
  font-weight: 800;
}

.chat-sprite-live-preview-actions {
  display: flex;
  gap: 8px;
}

.chat-sprite-live-preview-actions span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(22,24,36,.86);
  color: rgba(241,237,250,.88);
  font-size: 12px;
  font-weight: 800;
}

.chat-sprite-live-preview-shell .chat-view {
  padding: 0 !important;
}

.chat-sprite-live-preview-shell .vn-stage-shell {
  border-radius: 0;
}

.chat-sprite-live-preview-shell .vn-stage {
  height: 100% !important;
  min-height: 0 !important;
}

.chat-sprite-live-preview-shell .vn-dialogue-box {
  bottom: 30px !important;
}

.chat-sprite-live-preview-inputbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(5,7,14,.92), rgba(2,4,10,.98));
}

.chat-sprite-live-preview-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(17,20,31,.88);
  color: #f6f3ff;
  font-size: 13px;
  font-weight: 800;
}

.chat-sprite-live-preview-input {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(122, 94, 255, 0.22);
  border-radius: 16px;
  background: rgba(5,7,14,.96);
  color: rgba(188, 181, 208, 0.54);
  font-size: 13px;
}

.chat-sprite-live-preview-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c4fff, #a35bff);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(123, 76, 248, 0.28);
}

.chat-sprite-guide-center-line {
  top: 0;
  bottom: 0;
}

.chat-sprite-guide-baseline {
  top: 95%;
}

.chat-sprite-guide-ruler {
  left: 12px;
}

.chat-sprite-guide-tick span {
  min-width: 56px;
}


/* 2026-06-20 v4.0: revert v3.9 scale behavior, keep v3.8 footing, improve preview fidelity. */
.character-wizard .cw-chat-sprite-frame,
.chat-sprite-editor-frame {
  min-height: 580px;
}

.chat-sprite-stage-preview,
.chat-sprite-preview-viewport {
  aspect-ratio: 1.38 / 1;
}

.chat-sprite-preview-scale-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
}

.chat-sprite-play-preview {
  width: 100%;
  height: 100%;
  padding: 16px;
  background:
    radial-gradient(circle at 50% -10%, rgba(135, 95, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(7, 9, 17, 0.98), rgba(3, 4, 10, 1));
}

.chat-sprite-preview-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.chat-sprite-preview-panel .chat-header {
  min-height: 84px;
  padding: 18px 20px;
}

.chat-sprite-preview-panel .chat-header .controls .tool-button,
.chat-sprite-preview-panel .stage-reading-controls .reading-auto-toggle,
.chat-sprite-preview-panel .round-button,
.chat-sprite-preview-user-form .input-mode-btn,
.chat-sprite-preview-user-form button[type="submit"] {
  pointer-events: none;
}

.chat-sprite-preview-panel .vn-stage-shell {
  min-height: 0;
}

.chat-sprite-preview-vn-stage {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(15, 18, 29, 0.58), rgba(5, 7, 14, 0.1)),
    linear-gradient(180deg, rgba(11, 14, 24, 1), rgba(5, 7, 14, 1));
  background-position: center center;
  cursor: default !important;
}

.chat-sprite-preview-panel .vn-scene-haze {
  opacity: 0.82;
}

.chat-sprite-preview-panel .vn-dialogue-box,
.chat-sprite-preview-panel .vn-scene-card,
.chat-sprite-preview-panel .vn-character,
.chat-sprite-preview-panel .vn-character.speaking {
  animation: none !important;
}

.chat-sprite-preview-user-form {
  margin: 0 18px 18px !important;
}

.chat-sprite-preview-user-form input {
  pointer-events: none;
}

.chat-sprite-guide-center-line {
  top: 0;
  bottom: 0;
}

.chat-sprite-guide-baseline {
  top: 95%;
}

.chat-sprite-guide-ruler {
  left: 12px;
  width: 94px;
}

.chat-sprite-guide-tick::after {
  width: 16px;
}

.chat-sprite-guide-tick.major::after {
  width: 26px;
}

.chat-sprite-guide-tick span {
  left: 20px;
  min-width: 58px;
  justify-content: flex-start;
  padding-left: 10px;
}


/* 2026-06-20 v4.2: calibrate ruler to the unchanged 100% sprite placement. */
.character-wizard .cw-chat-sprite-editor,
.chat-sprite-editor-body {
  grid-template-columns: minmax(430px, 0.95fr) minmax(500px, 1.15fr);
  align-items: start;
}

.character-wizard .cw-chat-sprite-frame,
.chat-sprite-editor-frame {
  min-height: 850px;
}

.character-wizard .cw-chat-sprite-frame img,
.chat-sprite-editor-frame img {
  top: auto;
  bottom: 28px;
  width: auto;
  height: 545px;
  max-width: calc(100% - 120px);
  max-height: none;
  transform-origin: center bottom;
}

.chat-sprite-guide-center-line {
  top: 0;
  bottom: 0;
}

.chat-sprite-guide-baseline {
  top: auto !important;
  bottom: 28px;
}

.chat-sprite-guide-ruler {
  left: 12px;
  width: 112px;
}

.chat-sprite-guide-tick {
  top: auto;
}

.chat-sprite-guide-tick::after {
  width: 18px;
}

.chat-sprite-guide-tick.major::after {
  width: 28px;
}

.chat-sprite-guide-tick span {
  left: 28px;
  min-width: 62px;
  justify-content: flex-start;
  padding-left: 10px;
}

.character-wizard .cw-chat-sprite-side,
.chat-sprite-editor-side {
  min-height: 850px;
}

.cw-chat-sprite-preview-card,
.chat-sprite-editor-preview-card {
  height: 850px;
  padding: 12px;
}

.chat-sprite-stage-preview {
  min-height: 0;
  height: 790px;
  aspect-ratio: auto;
}

.chat-sprite-preview-chrome {
  padding: 8px;
  gap: 8px;
}

.chat-sprite-preview-viewport {
  min-height: 0;
  aspect-ratio: 1.37 / 1;
}

.chat-sprite-preview-badge {
  min-height: 22px;
  padding-inline: 9px;
}

.chat-sprite-preview-caption {
  font-size: 10px;
  line-height: 1.45;
}

.chat-sprite-play-preview {
  padding: 10px;
}


/* v4.2 preview sizing correction: use the full right column instead of a centered narrow card. */
.character-wizard .cw-chat-sprite-side,
.chat-sprite-editor-side {
  justify-content: stretch;
  align-content: start;
  min-height: 0;
  width: 100%;
}

.cw-chat-sprite-preview-card,
.chat-sprite-editor-preview-card {
  width: 100%;
  height: 650px;
  align-self: start;
}

.chat-sprite-stage-preview {
  width: 100%;
  height: 590px;
}

.chat-sprite-preview-chrome {
  grid-template-rows: minmax(0, 1fr);
}

.chat-sprite-preview-badge,
.chat-sprite-preview-caption {
  display: none !important;
}

.chat-sprite-preview-viewport {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* Fit the real Create content width without shrinking the calibrated left frame. */
.character-wizard .cw-chat-sprite-editor,
.chat-sprite-editor-body {
  grid-template-columns: minmax(480px, 1fr) minmax(400px, 0.92fr);
}

/* Keep the preview compact and fully occupied instead of leaving a tall empty well. */
.cw-chat-sprite-preview-card,
.chat-sprite-editor-preview-card {
  height: auto;
}

.chat-sprite-stage-preview {
  height: auto;
  aspect-ratio: 1.37 / 1;
}

.chat-sprite-preview-viewport {
  height: 100%;
  aspect-ratio: auto;
}

/* 2026-06-20 v4.3: dedicated exact-runtime in-game preview. */
.character-wizard .cw-chat-sprite-editor,
.chat-sprite-editor-body {
  grid-template-columns: minmax(520px, 0.9fr) minmax(220px, 0.45fr);
  align-items: start;
}

.character-wizard .cw-chat-sprite-side.compact,
.chat-sprite-editor-side.compact {
  display: flex;
  min-height: 0;
  height: auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
}

.cw-chat-sprite-runtime-section,
.chat-sprite-runtime-section {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 79, 228, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(13, 15, 26, 0.96), rgba(8, 10, 18, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.cw-chat-sprite-runtime-head,
.chat-sprite-runtime-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cw-chat-sprite-runtime-head > div,
.chat-sprite-runtime-head > div {
  min-width: 0;
}

.cw-chat-sprite-runtime-head strong,
.chat-sprite-runtime-head strong {
  display: block;
  color: #f5f1ff;
  font-size: 14px;
  font-weight: 850;
}

.cw-chat-sprite-runtime-head p,
.chat-sprite-runtime-head p {
  margin: 4px 0 0;
  color: rgba(211, 204, 229, 0.62);
  font-size: 11px;
  line-height: 1.5;
}

.cw-chat-sprite-runtime-head > span,
.chat-sprite-runtime-head > span {
  flex: 0 0 auto;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(167, 118, 255, 0.2);
  border-radius: 999px;
  background: rgba(107, 67, 191, 0.14);
  color: rgba(221, 209, 255, 0.82);
  font-size: 10px;
  font-weight: 800;
}

.chat-sprite-runtime-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1667 / 900;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: #05070d;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
}

.chat-sprite-runtime-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.chat-sprite-runtime-iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1667px;
  height: 900px;
  border: 0;
  background: #05070d;
  transform-origin: center center;
  pointer-events: none;
}

.chat-sprite-editor-modal {
  width: min(1260px, calc(100vw - 44px)) !important;
}

.chat-sprite-runtime-section.modal-runtime-section {
  margin-top: 18px;
}

.sprite-preview-frame-root,
body.sprite-preview-frame {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background: #05070d;
}

body.sprite-preview-frame .maintenance-overlay,
body.sprite-preview-frame .modal-backdrop,
body.sprite-preview-frame #globalSelectionTray,
body.sprite-preview-frame #stageExitFullscreenBtn {
  display: none !important;
}

body.sprite-preview-frame .app-shell {
  width: 100%;
  height: 100vh;
  min-height: 0;
}

body.sprite-preview-frame .workspace {
  min-height: 0;
  height: 100vh;
}

body.sprite-preview-frame .chat-view {
  height: 100%;
  min-height: 0;
}

body.sprite-preview-frame .chat-panel,
body.sprite-preview-frame .insight-panel,
body.sprite-preview-frame .nav-shell {
  pointer-events: none !important;
}



/* 2026-06-20 v4.6: trim unused space above the 200cm ruler line. */
.character-wizard .cw-chat-sprite-frame,
.chat-sprite-editor-frame {
  min-height: 810px;
  height: 810px;
}

.character-wizard .cw-chat-sprite-side,
.chat-sprite-editor-side {
  min-height: 810px;
}

.cw-chat-sprite-preview-card,
.chat-sprite-editor-preview-card {
  height: 810px;
}

.chat-sprite-stage-preview {
  height: 750px;
}



/* 2026-06-20 v4.6.2: final compressed 10cm ruler and 2m + ~20cm top allowance. */
.character-wizard .cw-chat-sprite-frame,
.chat-sprite-editor-frame {
  min-height: 720px;
  height: 720px;
}
.character-wizard .cw-chat-sprite-side,
.chat-sprite-editor-side {
  min-height: 720px;
}
.cw-chat-sprite-preview-card,
.chat-sprite-editor-preview-card {
  height: 720px;
}
.chat-sprite-stage-preview {
  height: 660px;
}

/* 2026-06-20 v4.7: split image setup / dialogue placement, smooth sprite transforms. */
.character-wizard .cw-stepper {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.character-wizard[data-active-step="5"] .cw-shell {
  grid-template-columns: minmax(0, 1fr);
}

.character-wizard[data-active-step="5"] .cw-preview-panel {
  display: none;
}

.character-wizard .cw-chat-sprite-upload-card {
  margin-top: 16px;
}

.character-wizard .cw-chat-sprite-upload-summary {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(8,10,18,.42);
}

.character-wizard .cw-chat-sprite-upload-thumb {
  display: grid;
  place-items: center;
  width: 110px;
  height: 136px;
  overflow: hidden;
  border: 1px dashed rgba(158,111,255,.26);
  border-radius: 12px;
  background:
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.03) 25%, transparent 25%),
    #0c0e16;
  background-size: 18px 18px;
}

.character-wizard .cw-chat-sprite-upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.character-wizard .cw-chat-sprite-upload-thumb span,
.character-wizard .cw-chat-sprite-upload-summary p {
  color: #858aa0;
  font-size: 11px;
  line-height: 1.55;
}

.character-wizard .cw-chat-sprite-upload-summary strong {
  color: #ede7fb;
  font-size: 12px;
}

.character-wizard .cw-dialogue-sprite-layout-grid {
  display: grid;
  grid-template-columns: minmax(430px, .9fr) minmax(560px, 1.1fr);
  gap: 22px;
  align-items: start;
}

.character-wizard .cw-dialogue-sprite-editor-column {
  min-width: 0;
}

.character-wizard .cw-chat-sprite-layout-card {
  margin-top: 0;
}

.character-wizard .cw-chat-sprite-runtime-sticky {
  position: sticky;
  top: 18px;
  align-self: start;
  min-width: 0;
}

.character-wizard .cw-chat-sprite-runtime-sticky .chat-sprite-runtime-preview {
  min-height: 470px;
}

.character-wizard .cw-chat-sprite-control-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.cw-sprite-ratio-lock {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(18,20,32,.78);
  color: #c9c2d9;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.cw-sprite-ratio-lock input {
  accent-color: #8d59ff;
}

.cw-sprite-axis-controls {
  display: grid;
  gap: 8px;
}

.cw-sprite-axis-row {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) 38px 66px 38px;
  gap: 7px;
  align-items: center;
}

.cw-sprite-axis-row > span {
  color: #8f94a8;
  font-size: 11px;
  font-weight: 750;
}

.cw-sprite-axis-row button,
.cw-sprite-axis-row strong {
  display: grid;
  min-height: 36px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(18,20,32,.82);
  color: #ede9f6;
  font-size: 11px;
}

.cw-sprite-axis-row button {
  cursor: pointer;
}

.cw-sprite-axis-row button:hover {
  border-color: rgba(155,108,255,.36);
  background: rgba(111,67,205,.16);
}

.chat-sprite-transform-box {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 4;
  transform-origin: center bottom;
  will-change: transform;
  touch-action: none;
  contain: layout style;
}

.character-wizard .cw-chat-sprite-frame .chat-sprite-transform-box img,
.chat-sprite-editor-frame .chat-sprite-transform-box img,
.direct-sprite-placement-board .chat-sprite-transform-box img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center bottom;
  transform: none !important;
  filter: drop-shadow(0 20px 24px rgba(0,0,0,.45));
  pointer-events: none;
  user-select: none;
}

.chat-sprite-resize-handle {
  position: absolute;
  z-index: 8;
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(248,245,255,.96);
  border-radius: 50%;
  background: #8954ef;
  box-shadow: 0 0 0 3px rgba(12,13,21,.75), 0 5px 16px rgba(0,0,0,.42);
  pointer-events: auto;
  touch-action: none;
}

.chat-sprite-resize-handle.left {
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) scale(calc(1 / var(--sprite-total-scale-x, 1)), calc(1 / var(--sprite-total-scale-y, 1)));
  cursor: ew-resize;
}

.chat-sprite-resize-handle.right {
  right: 0;
  top: 50%;
  transform: translate(50%, -50%) scale(calc(1 / var(--sprite-total-scale-x, 1)), calc(1 / var(--sprite-total-scale-y, 1)));
  cursor: ew-resize;
}

.chat-sprite-resize-handle.top {
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%) scale(calc(1 / var(--sprite-total-scale-x, 1)), calc(1 / var(--sprite-total-scale-y, 1)));
  cursor: ns-resize;
}

.chat-sprite-resize-handle.bottom {
  left: 50%;
  bottom: var(--sprite-visible-bottom-gap, 0px);
  transform: translate(-50%, 50%) scale(calc(1 / var(--sprite-total-scale-x, 1)), calc(1 / var(--sprite-total-scale-y, 1)));
  cursor: ns-resize;
}

.character-wizard .cw-chat-sprite-frame.dragging .chat-sprite-transform-box,
.character-wizard .cw-chat-sprite-frame.resizing .chat-sprite-transform-box,
.chat-sprite-editor-frame.dragging .chat-sprite-transform-box,
.chat-sprite-editor-frame.resizing .chat-sprite-transform-box {
  transition: none !important;
}

.character-wizard .cw-chat-sprite-frame.resizing,
.chat-sprite-editor-frame.resizing {
  cursor: default;
}

.chat-sprite-editor-main {
  min-width: 0;
}

.chat-sprite-editor-main .modal-ratio-lock {
  margin-top: 10px;
}

.chat-sprite-editor-main .modal-axis-controls {
  margin-top: 10px;
}

.vn-standing {
  transform: translateX(calc(-50% + var(--sprite-x, 0%))) translateY(var(--sprite-y, 0%)) scale(var(--sprite-scale-x, var(--sprite-scale, 1)), var(--sprite-scale-y, var(--sprite-scale, 1))) !important;
}

/* Creator states and generated variants always use automatic full-body fit. */

@media (max-width: 720px) {
  .character-wizard .cw-stepper {
    grid-template-columns: 1fr 1fr;
  }

  .character-wizard .cw-chat-sprite-upload-summary {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .character-wizard .cw-chat-sprite-upload-thumb {
    width: 82px;
    height: 108px;
  }

  .cw-sprite-axis-row {
    grid-template-columns: minmax(64px, 1fr) 36px 58px 36px;
  }
}

/* 2026-06-20 v4.8: edit sessions, history, height metadata and guide polish. */
.cw-height-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.cw-height-input-wrap em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.cw-history-tools {
  display: inline-flex;
  gap: 8px;
}

.cw-history-tools button {
  min-width: 76px;
}

.cw-history-tools button:disabled,
.detail-edit-session-tools button:disabled {
  opacity: .38;
  cursor: default;
}

/* Height guide: labels stay clean while guide lines continue behind the center line. */
.chat-sprite-guide-ruler {
  right: 0 !important;
  width: auto !important;
  z-index: 1 !important;
}

.chat-sprite-guide-tick {
  right: 0 !important;
  width: auto !important;
  border-top: 0 !important;
  z-index: 1 !important;
}

.chat-sprite-guide-tick::before {
  content: "";
  position: absolute;
  left: 104px;
  right: 0;
  top: -1px;
  border-top: 1px solid rgba(193, 177, 232, .2);
  z-index: 0;
}

.chat-sprite-guide-tick.major::before {
  border-top-color: rgba(208, 190, 246, .28);
}

.chat-sprite-guide-tick span {
  z-index: 2 !important;
}

.chat-sprite-guide-center-line {
  z-index: 3 !important;
}

.character-wizard .cw-chat-sprite-upload-card {
  margin-bottom: 16px;
}

/* Detail edit entry and explicit save/cancel session. */
.detail-owner-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-edit-session-tools {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.detail-owner-tools .detail-edit-entry,
.detail-owner-tools .detail-save-edit,
.detail-owner-tools .detail-cancel-edit,
.detail-owner-tools #detailUndoBtn,
.detail-owner-tools #detailRedoBtn {
  border-color: rgba(154, 112, 255, .34);
  background: rgba(52, 34, 96, .34);
  color: rgba(235, 225, 255, .94);
}

.detail-owner-tools .detail-edit-entry:hover,
.detail-owner-tools .detail-save-edit:hover,
.detail-owner-tools .detail-cancel-edit:hover,
.detail-owner-tools #detailUndoBtn:hover,
.detail-owner-tools #detailRedoBtn:hover {
  border-color: rgba(176, 139, 255, .62);
  background: rgba(91, 57, 166, .46);
  color: #fff;
}

.detail-owner-tools .detail-save-edit {
  background: linear-gradient(135deg, rgba(124,77,255,.86), rgba(153,91,255,.86));
}

.detail-owner-tools .detail-delete-edit {
  border-color: rgba(236, 126, 145, .18);
  background: rgba(45, 18, 27, .22);
  color: rgba(236, 153, 168, .76);
}

/* Quote box is genuinely resizable on all four sides, not just padded into submission. */
body.detail-active .character-detail-view .detail-quote-card {
  min-width: 140px !important;
  max-width: none !important;
  max-height: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

body.detail-active .character-detail-view .detail-quote-card #detailSample {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.character-detail-view .quote-resize-handle.n {
  left: 50% !important;
  top: -6px !important;
  transform: translateX(-50%) !important;
  cursor: ns-resize !important;
}

.character-detail-view .quote-resize-handle.s {
  left: 50% !important;
  bottom: -6px !important;
  transform: translateX(-50%) !important;
  cursor: ns-resize !important;
}

.character-detail-view .quote-resize-handle.e {
  right: -6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: ew-resize !important;
}

.character-detail-view .quote-resize-handle.w {
  left: -6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: ew-resize !important;
}

@media (max-width: 760px) {
  .detail-owner-tools {
    position: relative;
    top: auto;
    right: auto;
    flex-wrap: wrap;
    margin: 8px 0 14px;
  }

  .detail-edit-session-tools {
    flex-wrap: wrap;
  }

  .cw-footer {
    gap: 8px;
  }

  .cw-history-tools {
    order: 3;
    width: 100%;
  }
}

/* Keep context-specific legacy creator rules from changing this shared panel. */
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel > .cw-info-box {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 18px !important;
  padding: 15px 17px !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel > .cw-image-card:not(.hidden) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 18px !important;
  padding: 22px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.018) !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel > .creator-attribution-card {
  border-color: rgba(148,111,255,.20) !important;
  background: linear-gradient(145deg,rgba(34,28,54,.72),rgba(18,20,28,.92)) !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel .cw-public-settings-fields {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  column-gap: 22px !important;
  row-gap: 18px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel .cw-field-row,
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel .cw-field-row:first-child,
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel .cw-field-row:last-child {
  display: grid !important;
  grid-column: auto !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel .cw-field-label {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel .cw-field-label small {
  display: none !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel .cw-field-row textarea,
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel .cw-field-row select {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--tryva-line,rgba(255,255,255,.09)) !important;
  border-radius: 11px !important;
  background: var(--tryva-surface-2,#181621) !important;
  color: #eeeaf6 !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel .creator-attribution-options {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel .creator-attribution-option {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 92px !important;
  margin: 0 !important;
  padding: 16px !important;
}
@media (max-width: 760px) {
  body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel .cw-public-settings-fields,
  body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel .creator-attribution-options {
    grid-template-columns: minmax(0,1fr) !important;
  }
  body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .creator-confirm-publish-panel > .cw-image-card:not(.hidden) {
    padding: 18px !important;
  }
}

/* V5.1 creator profile and attribution system */
.creator-profile-view {
  max-width: 1500px;
  margin: 0 auto;
  padding: 38px 46px 80px;
}

.creator-profile-page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.creator-profile-page-head > div span,
.creator-profile-edit-head span {
  display: block;
  margin-bottom: 5px;
  color: rgba(181, 159, 255, 0.82);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.creator-profile-page-head h1,
.creator-profile-edit-head h2 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -0.03em;
}

.creator-profile-back {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: #f4f0ff;
  font-size: 28px;
  line-height: 1;
}

.creator-profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  min-height: 232px;
  padding: 34px 38px;
  overflow: hidden;
  border: 1px solid rgba(155, 119, 255, 0.22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 10%, rgba(136, 93, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(35, 26, 58, 0.97), rgba(15, 17, 27, 0.97) 56%, rgba(22, 18, 38, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35), inset 0 1px rgba(255, 255, 255, 0.04);
}

.creator-profile-hero::after {
  content: "";
  position: absolute;
  inset: auto -90px -150px auto;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(112, 70, 255, 0.08);
  filter: blur(2px);
  pointer-events: none;
}

.creator-profile-avatar {
  position: relative;
  z-index: 1;
  display: grid;
  width: 138px;
  height: 138px;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(183, 157, 255, 0.48);
  border-radius: 50%;
  background: linear-gradient(145deg, #30244a, #161922);
  box-shadow: 0 16px 48px rgba(60, 28, 130, 0.38), 0 0 0 8px rgba(124, 77, 255, 0.08);
  color: #e8dfff;
  font-size: 38px;
  font-weight: 900;
}

.creator-profile-avatar.has-image,
.creator-detail-avatar.has-image,
.creator-byline-avatar.has-image,
.creator-attribution-preview i.has-image {
  background-position: center;
  background-size: cover;
  color: transparent;
}

.creator-profile-main-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.creator-profile-title-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.creator-profile-title-line h2 {
  margin: 0 0 6px;
  font-size: clamp(30px, 3vw, 43px);
  letter-spacing: -0.055em;
}

.creator-profile-title-line p {
  margin: 0;
  color: #b7a4f2;
  font-size: 15px;
  font-weight: 750;
}

.creator-profile-bio {
  max-width: 760px;
  margin: 22px 0 0;
  color: #c9c7d3;
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-wrap;
}

.creator-profile-edit-button {
  min-width: 118px;
  padding: 11px 17px;
  border: 1px solid rgba(158, 119, 255, 0.48);
  border-radius: 12px;
  background: rgba(124, 77, 255, 0.12);
  color: #e9e2ff;
  font-weight: 800;
}

.creator-profile-stat {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 150px;
  place-items: center;
  padding: 22px 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.creator-profile-stat span {
  color: #aaa7b6;
  font-size: 12px;
  font-weight: 750;
}

.creator-profile-stat strong {
  margin-top: 7px;
  color: #f5f0ff;
  font-size: 36px;
  letter-spacing: -0.04em;
}

.creator-profile-character-section {
  margin-top: 34px;
}

.creator-profile-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}

.creator-profile-section-head h2 {
  margin: 0;
  font-size: 23px;
}

.creator-profile-section-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.creator-profile-section-head > span {
  display: grid;
  min-width: 34px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.16);
  color: #c9b7ff;
  font-size: 12px;
  font-weight: 900;
}



.creator-profile-character-card {
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: #11131b;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.creator-profile-character-card:hover {
  transform: translateY(-4px);
  border-color: rgba(151, 116, 255, 0.45);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34);
}

.creator-profile-character-card button {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.creator-profile-character-art {
  height: 235px;
  overflow: hidden;
  background: linear-gradient(145deg, #1d1f2b, #12141a);
}

.creator-profile-character-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-profile-character-copy {
  padding: 17px 18px 19px;
}

.creator-profile-character-copy h3 {
  margin: 0 0 5px;
  font-size: 18px;
}

.creator-profile-character-copy p {
  margin: 0;
  color: #9d9aa8;
  font-size: 12px;
}

.creator-profile-empty {
  padding: 72px 20px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}

.creator-byline {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #aaa0c8;
  font-size: 11px;
  font-weight: 750;
  text-align: left;
}

.creator-byline[data-creator-handle]:hover {
  color: #d4c5ff;
}

.creator-byline-avatar {
  display: grid;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(189, 164, 255, 0.32);
  border-radius: 50%;
  background: #272134;
  color: #c8b7f8;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.catalog-card-copy .creator-byline,
.character-tile .creator-byline {
  margin-top: 9px;
}

.creator-detail-panel {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(100%, 330px);
  margin: 12px 0 2px;
  padding: 10px 12px;
  border: 1px solid rgba(160, 123, 255, 0.18);
  border-radius: 13px;
  background: rgba(124, 77, 255, 0.075);
  color: #e9e5f2;
  text-align: left;
}

.creator-detail-panel:hover {
  border-color: rgba(164, 127, 255, 0.42);
  background: rgba(124, 77, 255, 0.12);
}

.creator-detail-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #292238;
  color: #d5c5ff;
  font-size: 12px;
  font-weight: 900;
}

.creator-detail-panel span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.creator-detail-panel small {
  color: #8f899d;
  font-size: 10px;
}

.creator-detail-panel strong {
  overflow: hidden;
  margin-top: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-detail-panel em {
  color: #aa97e7;
  font-size: 22px;
  font-style: normal;
}

.creator-profile-edit-backdrop {
  z-index: 10020;
  padding: 30px;
  background: rgba(3, 4, 8, 0.76);
  backdrop-filter: blur(14px);
}

.creator-profile-edit-modal {
  position: relative;
  width: min(920px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border: 1px solid rgba(158, 121, 255, 0.25);
  border-radius: 24px;
  background:
    radial-gradient(circle at 6% 0%, rgba(124, 77, 255, 0.13), transparent 30%),
    linear-gradient(145deg, #151621, #0f1118 65%);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.62);
}

.creator-profile-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.creator-profile-edit-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 34px;
  padding: 30px;
}

.creator-avatar-editor-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.025);
}

.creator-avatar-editor-column h3 {
  align-self: stretch;
  margin: 0 0 20px;
  font-size: 15px;
}

.creator-avatar-editor-frame {
  position: relative;
  width: 190px;
  height: 190px;
  overflow: hidden;
  border: 2px solid rgba(173, 139, 255, 0.45);
  border-radius: 50%;
  background:
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%),
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%),
    #10121a;
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  box-shadow: 0 0 0 8px rgba(124, 77, 255, 0.07);
  touch-action: none;
}

.creator-avatar-editor-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  transform-origin: center;
  user-select: none;
  pointer-events: none;
}

.creator-avatar-editor-frame > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #777584;
  font-size: 12px;
}

.creator-avatar-change-button {
  margin-top: 22px;
  padding: 10px 18px;
  border: 1px solid rgba(159, 124, 255, 0.35);
  border-radius: 11px;
  background: rgba(124, 77, 255, 0.1);
  color: #e7dfff;
  font-weight: 800;
}

.creator-avatar-zoom-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
}

.creator-avatar-zoom-row button,
.creator-avatar-zoom-row strong {
  min-width: 36px;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: #191b25;
  color: #ddd7ed;
}

.creator-avatar-zoom-row strong {
  display: grid;
  min-width: 58px;
  place-items: center;
  font-size: 11px;
}

.creator-avatar-editor-column > p {
  margin: 13px 0 0;
  color: #777584;
  font-size: 10px;
}

.creator-profile-fields {
  display: grid;
  align-content: start;
  gap: 18px;
}

.creator-profile-fields label {
  display: grid;
  gap: 8px;
}

.creator-profile-fields label > span,
.creator-visibility-field legend {
  color: #d7d3df;
  font-size: 12px;
  font-weight: 800;
}

.creator-profile-fields input,
.creator-profile-fields textarea,
.creator-handle-field {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: #0d0f16;
  color: #f3f2f7;
  outline: none;
}

.creator-profile-fields input,
.creator-profile-fields textarea {
  padding: 13px 14px;
}

.creator-profile-fields input:focus,
.creator-profile-fields textarea:focus,
.creator-handle-field:focus-within {
  border-color: rgba(153, 112, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.11);
}

.creator-handle-field {
  display: flex;
  align-items: center;
  padding-left: 14px;
}

.creator-handle-field b {
  color: #8e83a9;
}

.creator-handle-field input {
  border: 0;
  background: transparent;
  box-shadow: none !important;
}

.creator-profile-fields small {
  color: #777584;
  font-size: 10px;
}

#creatorHandleHint[data-state="available"] { color: #76d8a3; }
#creatorHandleHint[data-state="unavailable"] { color: #ff8f9b; }

.creator-visibility-field {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.creator-visibility-field legend {
  width: 100%;
  margin-bottom: 2px;
}

.creator-visibility-field label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
}

.creator-visibility-field input { width: auto; }

.creator-profile-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 28px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.settings-profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.settings-secondary-button {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #dedbe6;
  font-weight: 800;
}

.creator-attribution-card {
  border-color: rgba(148, 111, 255, 0.2);
  background: linear-gradient(145deg, rgba(34, 28, 54, 0.72), rgba(18, 20, 28, 0.92));
}

.creator-attribution-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.creator-attribution-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.creator-attribution-option.selected {
  border-color: rgba(151, 111, 255, 0.62);
  background: rgba(124, 77, 255, 0.095);
  box-shadow: inset 0 0 0 1px rgba(124, 77, 255, 0.12);
}

.creator-attribution-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.creator-attribution-radio {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.23);
  border-radius: 50%;
}

.creator-attribution-option.selected .creator-attribution-radio {
  border: 5px solid #8d61ff;
  background: #fff;
}

.creator-attribution-copy {
  display: grid;
  gap: 5px;
}

.creator-attribution-copy strong { font-size: 13px; }
.creator-attribution-copy small { color: #8f8b9a; font-size: 10px; line-height: 1.5; }

.creator-attribution-preview {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 160px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  color: #c4b6eb;
}

.creator-attribution-preview i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #30263f;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.creator-attribution-preview em {
  overflow: hidden;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .creator-profile-view { padding: 26px 20px 70px; }
  .creator-profile-hero { grid-template-columns: auto minmax(0, 1fr); padding: 27px; }
  .creator-profile-stat { grid-column: 1 / -1; grid-template-columns: 1fr auto; width: 100%; border-top: 1px solid rgba(255,255,255,.08); border-left: 0; }
  .creator-profile-edit-body { grid-template-columns: 1fr; }
  .creator-attribution-options { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .creator-profile-hero { grid-template-columns: 1fr; text-align: center; }
  .creator-profile-avatar { width: 112px; height: 112px; margin: 0 auto; }
  .creator-profile-title-line { display: grid; justify-content: stretch; }
  .creator-profile-edit-button { width: 100%; }
  .creator-profile-bio { margin-left: auto; margin-right: auto; }
  .creator-profile-edit-backdrop { padding: 10px; }
  .creator-profile-edit-modal { width: 100%; border-radius: 18px; }
  .creator-profile-edit-body { padding: 20px; }
  
  .creator-profile-character-art { height: 190px; }
  .creator-attribution-option { grid-template-columns: auto minmax(0, 1fr); }
  .creator-attribution-preview { grid-column: 2; }
}

/* V5.2 stability and editing UX overrides. Keep these last so older cumulative patches cannot move or squeeze them again. */
body.detail-active .character-detail-view .detail-hero {
  height: clamp(700px, calc(100vh - 118px), 820px) !important;
  min-height: 700px !important;
}

body.detail-active .character-detail-view .detail-copy {
  grid-template-rows: auto auto auto auto auto minmax(138px, 1fr) auto auto auto auto !important;
  padding-top: 38px !important;
  padding-bottom: 34px !important;
}

body.detail-active .character-detail-view .creator-detail-panel {
  margin: 10px 0 4px !important;
}

body.detail-active .character-detail-view .detail-art img.animated-gif-image {
  object-position: var(--detail-gif-x, 50%) var(--detail-gif-y, 50%) !important;
  transform: scale(var(--detail-gif-zoom, 1)) !important;
  transform-origin: var(--detail-gif-x, 50%) var(--detail-gif-y, 50%) !important;
}

.detail-owner-tools .detail-full-edit-entry {
  border-color: rgba(171, 139, 255, .2);
  background: rgba(14, 15, 25, .72);
  color: rgba(222, 214, 243, .86);
}

body.stage-fullscreen .vn-stage-shell > .stage-reading-controls {
  top: 18px !important;
  left: auto !important;
  right: 76px !important;
  z-index: 1201;
}


@media (max-width: 900px) {
  body.stage-fullscreen .vn-stage-shell > .stage-reading-controls {
    top: 12px !important;
    left: auto !important;
    right: 64px !important;
  }
}

/* V5.3 context routing, detail preview, and global selection tray. Keep last. */
body.detail-active .character-detail-view .detail-copy {
  /* detailQuote is empty/hidden in the current layout, so the profile summary is
     the fifth visible row. Giving the sixth row the flexible height left a large
     blank area while the actual description stayed two lines tall. */
  grid-template-rows: auto auto auto auto minmax(138px, 1fr) auto auto auto auto !important;
}

body.detail-active .character-detail-view #detailSummary.detail-summary-shell {
  align-self: stretch !important;
  box-sizing: border-box !important;
  min-height: 138px !important;
  height: 100% !important;
  max-height: 100% !important;
  margin-top: 14px !important;
  margin-bottom: 12px !important;
}

body.detail-active .character-detail-view #detailSummary .detail-summary-scroll {
  box-sizing: border-box !important;
  min-height: 138px !important;
  height: 100% !important;
  max-height: 100% !important;
}

body.play-active #globalSelectionTray.selection-tray,
body.library-active #globalSelectionTray.selection-tray,
body.all-characters-active #globalSelectionTray.selection-tray,
body.detail-active #globalSelectionTray.selection-tray {
  display: grid !important;
}

body.modal-open #globalSelectionTray.selection-tray,
body.chat-active #globalSelectionTray.selection-tray {
  display: none !important;
}

body.library-active .library-view,
body.all-characters-active .all-characters-view {
  padding-bottom: 132px !important;
}


@media (max-width: 900px) {
  body.play-active #globalSelectionTray.selection-tray,
  body.library-active #globalSelectionTray.selection-tray,
  body.all-characters-active #globalSelectionTray.selection-tray,
  body.detail-active #globalSelectionTray.selection-tray {
    left: 14px !important;
    right: 14px !important;
    bottom: 12px !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  body.library-active .library-view,
  body.all-characters-active .all-characters-view {
    padding-bottom: 176px !important;
  }

}

/* V5.3.1 detail controls, real global tray portal, and tag spacing. Keep last. */
body.detail-active .character-detail-view #detailTags.tile-tags {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: min(470px, 100%) !important;
  min-height: 30px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  gap: 7px !important;
  overflow: visible !important;
}

body.detail-active .character-detail-view #detailTags .detail-tags-content {
  display: flex !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.detail-active .character-detail-view #detailTags .detail-tags-content .tag-chip {
  flex: 0 0 auto !important;
  max-width: 132px !important;
}

body.detail-active .character-detail-view #detailTags .tag-edit-btn {
  position: static !important;
  inset: auto !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin: 0 0 0 2px !important;
  transform: none !important;
}

body.detail-active .character-detail-view #detailTags .tag-edit-btn:hover,
body.detail-active .character-detail-view #detailTags .tag-edit-btn:focus-visible {
  transform: translateY(-1px) !important;
}

/* The tray is mounted directly under body at runtime, outside every hidden .view. */
body > #globalSelectionTray.selection-tray {
  position: fixed !important;
}

body.play-active > #globalSelectionTray.selection-tray,
body.library-active > #globalSelectionTray.selection-tray,
body.all-characters-active > #globalSelectionTray.selection-tray,
body.detail-active > #globalSelectionTray.selection-tray {
  display: grid !important;
}

body.modal-open > #globalSelectionTray.selection-tray,
body.chat-active > #globalSelectionTray.selection-tray,
body.creator-profile-active > #globalSelectionTray.selection-tray {
  display: none !important;
}


/* V5.3.1 final geometry correction: Library/All Characters previously only
   toggled display, so the tray inherited an in-flow top position. */
body.play-active > #globalSelectionTray.selection-tray,
body.library-active > #globalSelectionTray.selection-tray,
body.all-characters-active > #globalSelectionTray.selection-tray,
body.detail-active > #globalSelectionTray.selection-tray {
  position: fixed !important;
  display: grid !important;
  left: calc(var(--nav-width, 268px) + clamp(34px, 3.6vw, 54px)) !important;
  right: clamp(34px, 3.6vw, 54px) !important;
  top: auto !important;
  bottom: 18px !important;
  z-index: 90 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 92px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  grid-template-columns: minmax(0, 1fr) 250px !important;
  align-items: center !important;
  gap: 18px !important;
  border: 1px solid rgba(143, 88, 255, 0.34) !important;
  border-radius: 17px !important;
  background: rgba(12, 14, 24, 0.88) !important;
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.46) !important;
  backdrop-filter: blur(22px) !important;
}

body.detail-active .character-detail-view .detail-actions {
  grid-template-columns: minmax(190px, 1.22fr) minmax(135px, 0.89fr) minmax(135px, 0.89fr) !important;
}

@media (max-width: 900px) {
  body.play-active > #globalSelectionTray.selection-tray,
  body.library-active > #globalSelectionTray.selection-tray,
  body.all-characters-active > #globalSelectionTray.selection-tray,
  body.detail-active > #globalSelectionTray.selection-tray {
    left: 14px !important;
    right: 14px !important;
    top: auto !important;
    bottom: 12px !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  body.detail-active .character-detail-view .detail-actions {
    grid-template-columns: 1fr !important;
  }
}

/* V5.5 media and Library integration */
.library-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 22px;
  flex-wrap: wrap;
}
.library-toolbar button {
  border: 1px solid rgba(159, 137, 255, 0.24);
  background: rgba(21, 18, 42, 0.62);
  color: rgba(243, 240, 255, 0.72);
  border-radius: 999px;
  padding: 9px 15px;
  font: inherit;
  cursor: pointer;
}
.library-toolbar button.active {
  border-color: rgba(179, 157, 255, 0.72);
  background: rgba(112, 83, 214, 0.28);
  color: #fff;
}
.library-toolbar button span { margin-left: 5px; opacity: .72; }
.library-empty { text-align: center; padding: 40px 12px; color: rgba(240, 236, 255, .55); }
.tile-art video,
.detail-art video,
.vn-standing:is(video),
.chat-sprite-transform-box video,
.create-crop-media:is(video),
.chat-sprite-upload-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tile-art video {
  object-fit: cover;
  transform: var(--card-image-transform, none);
  transform-origin: center;
}
.character-tile:hover .tile-art video { transform: var(--card-image-transform-hover, var(--card-image-transform, none)); }
.detail-art video { object-fit: contain; }
.vn-standing:is(video) { pointer-events: none; }
.chat-sprite-transform-media { width: 100%; height: 100%; object-fit: contain; }
.tile-art video,
.crop-card-inner > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%);
  transform: translate(var(--card-pan-x, 0%), var(--card-pan-y, 0%)) scale(var(--card-crop-zoom, 1.05));
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 50%);
}
.detail-art video {
  position: absolute;
  right: -2vw;
  top: -9%;
  bottom: auto;
  width: min(56vw, 900px);
  height: 118%;
  max-width: none;
  object-fit: cover;
  object-position: center 2%;
}
.creator-profile-character-art video,
.catalog-card-image:is(video),
.avatar-rail-image video,
.recent-room-avatar video,
.selected-pill-media,
.selected-preview-media,
.related-character-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* V5.5.2 media upload feedback and playback recovery */
.tryva-toast-region {
  position: fixed;
  right: 22px;
  top: 22px;
  z-index: 25000;
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 32px));
  pointer-events: none;
}
.tryva-toast {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(171, 151, 255, 0.42);
  border-radius: 14px;
  background: rgba(18, 17, 31, 0.96);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
  color: #f3f0ff;
  line-height: 1.45;
  pointer-events: auto;
  animation: tryva-toast-in 180ms ease-out;
}
.tryva-toast-error { border-color: rgba(255, 112, 132, 0.5); }
.tryva-toast-success { border-color: rgba(100, 224, 171, 0.48); }
.tryva-toast button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
}
.tryva-toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: 180ms ease; }
@keyframes tryva-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.media-upload-status {
  margin: 7px 0 0;
  min-height: 1.35em;
  color: var(--muted, #aaa4bf);
  font-size: 12px;
  line-height: 1.35;
}
.media-upload-status.is-busy { color: #c8bcff; }
.media-upload-status.is-error { color: #ff91a4; }
.media-upload-status.is-success { color: #83e2b5; }
.crop-file-button.is-uploading,
.crop-file-button:has(input:disabled) { opacity: 0.66; cursor: progress; pointer-events: none; }
.media-playback-failed { opacity: 0.18 !important; }
.media-playback-error {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: min(86%, 320px);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(24, 20, 36, 0.9);
  color: #ffd5dc;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
@media (max-width: 700px) {
  .tryva-toast-region { top: 12px; right: 12px; width: calc(100vw - 24px); }
}

/* V5.7 detail actions. */
body.detail-active .character-detail-view .detail-copy,
body.detail-active .character-detail-view .detail-actions {
  min-width: 0 !important;
  overflow: visible !important;
}
body.detail-active .character-detail-view .detail-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}
body.detail-active .character-detail-view #detailAddBtn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
body.detail-active .character-detail-view #detailAddBtn {
  border: 1px solid rgba(175, 143, 255, .32) !important;
  background: rgba(60, 43, 98, .46) !important;
  color: rgba(242, 237, 255, .9) !important;
}
/* V5.7 media source controls */
.media-source-toolbar {
  align-items: center !important;
  margin-bottom: 10px !important;
}
.media-source-heading {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.media-source-heading strong {
  font-size: 15px !important;
  color: rgba(255,255,255,.96) !important;
}
.media-source-heading span {
  color: rgba(210, 201, 232, .55);
  font-size: 11px;
  line-height: 1.3;
}
.media-replace-button {
  flex: 0 0 auto;
  gap: 7px;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border-color: rgba(185, 151, 255, .42) !important;
  background: linear-gradient(145deg, rgba(116, 72, 220, .36), rgba(65, 44, 121, .38)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.media-replace-button:hover,
.media-replace-button:focus-within {
  transform: translateY(-1px);
  border-color: rgba(205, 180, 255, .68) !important;
  background: linear-gradient(145deg, rgba(132, 82, 242, .48), rgba(76, 49, 143, .46)) !important;
}
.crop-source-panel > .media-upload-status{
  margin: 0 0 10px !important;
}

@media (max-width: 620px) {
  body.detail-active .character-detail-view .detail-actions {
    grid-template-columns: 1fr !important;
  }
  .media-source-toolbar {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .media-replace-button { width: 100%; }
}


/* V5.8 full-edit, safer destructive actions, and consistent controls. */
.cw-stacked-input { display:grid; gap:8px; width:min(100%, 360px); }
.cw-two-column-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.detail-edit-session-tools .detail-save-edit,
.detail-edit-session-tools .detail-cancel-edit,
.detail-owner-tools .detail-edit-entry { min-width:112px; min-height:38px; justify-content:center; }
.detail-danger-zone { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:14px 0 20px; padding:14px 16px; border:1px solid rgba(236,126,145,.25); border-radius:14px; background:rgba(45,18,27,.22); }
.detail-danger-zone > span { display:grid; gap:3px; }
.detail-danger-zone small { color:rgba(236,190,198,.68); }
.detail-danger-zone .detail-delete-edit { min-width:126px; min-height:38px; border:1px solid rgba(236,126,145,.42); background:rgba(125,35,53,.24); color:#ffd7df; border-radius:10px; }
.detail-copy-link { opacity:.88; }
.detail-admin-manage { border-color:rgba(255,197,94,.42)!important; color:#ffe0a0!important; }
@media (max-width:760px){ .cw-two-column-settings{grid-template-columns:1fr}.detail-danger-zone{align-items:flex-start;flex-direction:column}.detail-danger-zone .detail-delete-edit{width:100%} }

.admin-dashboard-modal{width:min(900px,calc(100vw - 30px));max-height:min(86vh,900px);overflow:auto}.admin-stats-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:16px}.admin-stats-summary>div{display:grid;gap:4px;padding:14px;border:1px solid rgba(154,112,255,.22);border-radius:12px;background:rgba(52,34,96,.25)}.admin-stats-summary strong{font-size:22px}.admin-stats-summary span{font-size:12px;color:var(--muted)}.admin-stats-summary small{font-size:10px;line-height:1.35;color:rgba(231,222,255,.72);word-break:keep-all}.admin-dashboard-head,.admin-character-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.admin-character-list{display:grid;gap:8px;max-height:430px;overflow:auto}.admin-character-row{padding:12px;border:1px solid rgba(154,112,255,.18);border-radius:10px}.admin-character-row>div:first-child{display:grid;gap:3px}.admin-character-row small{color:var(--muted)}.admin-character-row button{margin-left:6px}@media(max-width:700px){.admin-stats-summary{grid-template-columns:repeat(2,1fr)}}

.detail-moderation-notice{padding:9px 12px;margin:8px 0 12px;border:1px solid rgba(236,126,145,.3);border-radius:10px;background:rgba(65,23,35,.3);color:#ffd5dd;font-size:13px;font-weight:700}


/* V5.10.0: functional categories, canonical animated media, readable cards and stable modal footer. */
.genre-rail button:disabled,
.genre-rail button.is-empty { opacity: .42; cursor: default; filter: saturate(.4); }
.genre-rail button:not(:disabled) { cursor: pointer; }
.genre-rail button:not(:disabled):hover { transform: translateY(-2px); border-color: rgba(173,120,255,.42); }
.cw-category-field { border: 1px solid rgba(157,116,255,.18); }
.cw-category-field legend { display: grid; gap: 5px; padding: 0; }
.cw-category-field legend small { color: var(--muted); font-weight: 500; }
.cw-category-options { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.cw-category-options label { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.035); cursor: pointer; }
.cw-category-options input { accent-color: #9d6cff; }

/* Images and videos must use exactly the same crop on normal and expanded cards. */
.tile-art > img, .tile-art > video,
.catalog-card-media > img, .catalog-card-media > video,
.all-character-grid .catalog-character-tile .tile-art > img,
.all-character-grid .catalog-character-tile .tile-art > video {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: translate(var(--card-pan-x, 0px), var(--card-pan-y, 0px)) scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transition: transform 180ms ease !important;
}
.character-tile:hover .tile-art > img, .character-tile:hover .tile-art > video,
.character-tile.selected .tile-art > img, .character-tile.selected .tile-art > video,
.catalog-card:hover .catalog-card-media > img, .catalog-card:hover .catalog-card-media > video,
.all-character-grid .catalog-character-tile:hover .tile-art > img,
.all-character-grid .catalog-character-tile:hover .tile-art > video {
  transform: translate(var(--card-pan-x, 0px), var(--card-pan-y, 0px)) scale(calc(var(--card-crop-zoom, 1.05) + .02)) !important;
}

/* Guaranteed contrast on white or bright artwork, without canvas sampling or CORS work. */
.character-tile .tile-art::after,
.catalog-card .catalog-card-shade,
.all-character-grid .catalog-character-tile .tile-art::after {
  background: linear-gradient(180deg, rgba(4,5,10,.02) 0%, rgba(4,5,10,.12) 38%, rgba(4,5,10,.72) 72%, rgba(4,5,10,.96) 100%) !important;
}
.character-tile .tile-title h3, .catalog-card-copy h3 { color: #fff !important; text-shadow: 0 2px 9px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); }
.character-tile .tile-meta, .character-tile .tile-summary, .catalog-card-copy p { color: rgba(255,255,255,.9) !important; text-shadow: 0 2px 7px rgba(0,0,0,.9); opacity: 1 !important; }

.character-tile.name-medium .tile-title h3, .catalog-card.name-medium .catalog-card-copy h3 { font-size: 23px !important; }
.character-tile.name-long .tile-title h3, .catalog-card.name-long .catalog-card-copy h3 { font-size: 20px !important; letter-spacing: -.025em; }
.character-tile.name-xlong .tile-title h3, .catalog-card.name-xlong .catalog-card-copy h3 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px !important; letter-spacing: -.035em; }

.start-modal { display: flex !important; flex-direction: column !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 0 !important; }
.start-modal > :not(.start-modal-footer) { margin-left: 24px; margin-right: 24px; }
.start-modal > .modal-head { margin-top: 24px; }
.start-modal > .start-modal-footer { position: sticky; bottom: 0; z-index: 5; margin: 18px 0 0 !important; padding: 14px 24px 24px; background: linear-gradient(180deg, rgba(9,10,18,0), rgba(9,10,18,.96) 30%); }
/* Expanded persona controls must remain fully clickable. The sticky action bar
   otherwise covers the bottom of the save row on shorter desktop/tablet views. */
.start-modal:has(#userProfileFields:not(.hidden)) > .start-modal-footer { position: static; }
.start-modal .modal-start-button { position: static !important; width: 100% !important; margin: 0 !important; min-height: 56px !important; }


/* V5.11.0: focused detail editing and stable preview controls. */
.detail-danger-zone {
  display: flex !important;
  justify-content: flex-end !important;
  margin: 10px 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.detail-danger-zone .detail-delete-edit {
  width: auto !important;
  min-width: 126px !important;
  min-height: 38px !important;
  border: 1px solid rgba(236,126,145,.42) !important;
  background: rgba(125,35,53,.24) !important;
  color: #ffd7df !important;
  border-radius: 10px !important;
}
.character-detail-view .quote-resize-handle.n,
.character-detail-view .quote-resize-handle.s {
  left: 50% !important;
  width: 24px !important;
  height: 10px !important;
  margin-left: -12px !important;
  border-radius: 8px !important;
  cursor: ns-resize !important;
}
.character-detail-view .quote-resize-handle.n { top: -5px !important; }
.character-detail-view .quote-resize-handle.s { bottom: -5px !important; }
.character-detail-view .quote-resize-handle.e,
.character-detail-view .quote-resize-handle.w {
  top: 50% !important;
  width: 10px !important;
  height: 24px !important;
  margin-top: -12px !important;
  border-radius: 8px !important;
  cursor: ew-resize !important;
}
.character-detail-view .quote-resize-handle.e { right: -5px !important; }
.character-detail-view .quote-resize-handle.w { left: -5px !important; }
.character-detail-view .quote-resize-handle.nw,
.character-detail-view .quote-resize-handle.ne,
.character-detail-view .quote-resize-handle.sw,
.character-detail-view .quote-resize-handle.se {
  width: 14px !important;
  height: 14px !important;
  background: #b775ff !important;
  box-shadow: 0 0 0 3px rgba(8,6,16,.76), 0 0 20px rgba(183,117,255,.7) !important;
}
.character-wizard .cw-magic-row-primary { margin: 0 0 16px !important; }
.detail-image-live-preview-wrap { margin-top: 18px; }
.detail-image-live-preview-label { display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; color:rgba(235,228,249,.78); font-size:12px; font-weight:800; }
.detail-image-live-preview-label span { color:rgba(211,208,225,.5); font-size:10px; font-weight:600; }
.detail-image-live-preview {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(180px,.92fr);
  min-height:260px;
  overflow:hidden;
  border:1px solid rgba(159,116,255,.2);
  border-radius:16px;
  background:linear-gradient(145deg,#070811,#11121d);
}
.detail-image-live-art { position:relative; min-height:260px; overflow:hidden; background:#05060d; }
.detail-image-live-art img,.detail-image-live-art video { position:absolute; left:50%; top:50%; max-width:none; transform-origin:center center; }
.detail-image-live-copy { display:flex; flex-direction:column; justify-content:center; gap:10px; padding:22px; background:linear-gradient(135deg,rgba(22,20,35,.98),rgba(8,9,16,.98)); }
.detail-image-live-copy small { color:#a88cf2; font-size:10px; font-weight:900; letter-spacing:.12em; }
.detail-image-live-copy strong { color:#fff; font-size:24px; line-height:1.15; }
.detail-image-live-copy p { margin:0; color:rgba(237,233,245,.74); font-size:12px; line-height:1.65; }
.cw-direct-detail-preview { width:100%; overflow:hidden; border-radius:18px; background:#03040a; }
.cw-direct-detail-preview .character-detail-view { display:block !important; min-height:0 !important; padding:0 !important; }
.cw-direct-detail-preview .detail-owner-tools,
.cw-direct-detail-preview .detail-danger-zone,
.cw-direct-detail-preview .detail-selection-strip,
.cw-direct-detail-preview .related-section { display:none !important; }
.cw-direct-detail-preview .detail-hero { margin:0 !important; }
@media (max-width:760px){
  .detail-danger-zone { align-items:flex-end !important; }
  .detail-danger-zone .detail-delete-edit { width:auto !important; }
  .detail-image-live-preview { grid-template-columns:1fr; }
  .detail-image-live-art { min-height:230px; }
}

/* V5.15.0: reliable animated cards, actual detail preview, clean tags and category selector. */
.tile-art > video,
.catalog-card-media > video,
.creator-profile-character-art > video,
.crop-card-inner > video,
.create-crop-frame > video {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #090b12;
}

/* The detail tag wrapper must not inherit the long purple tile background. */
body.detail-active .character-detail-view #detailTags,
body.detail-active .character-detail-view #detailTags .detail-tags-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.detail-active .character-detail-view #detailTags::before,
body.detail-active .character-detail-view #detailTags::after,
body.detail-active .character-detail-view #detailTags .detail-tags-content::before,
body.detail-active .character-detail-view #detailTags .detail-tags-content::after { content: none !important; display: none !important; }

/* Category choices are compact cards, not a row of default browser checkboxes. */
.cw-category-field { padding: 18px !important; border-radius: 18px !important; background: linear-gradient(145deg, rgba(23,20,38,.92), rgba(11,12,22,.88)) !important; }
.cw-category-options { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px !important; }
.cw-category-options label {
  position: relative; display: grid !important; grid-template-columns: 38px minmax(0,1fr) 22px; align-items: center !important;
  gap: 10px !important; min-height: 68px !important; padding: 11px 12px !important; border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.08) !important; background: rgba(255,255,255,.025) !important;
  transition: border-color .16s ease, background .16s ease, transform .16s ease !important;
}
.cw-category-options label:hover { transform: translateY(-1px); border-color: rgba(166,126,255,.38) !important; background: rgba(116,78,206,.1) !important; }
.cw-category-options input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
.cw-category-options .cw-category-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:rgba(145,102,244,.14); font-size:20px; }
.cw-category-options label > span:nth-of-type(2) { display:grid; gap:3px; min-width:0; }
.cw-category-options label > span:nth-of-type(2) strong { color:#f7f3ff; font-size:13px; line-height:1.2; }
.cw-category-options label > span:nth-of-type(2) small { color:rgba(223,217,237,.55); font-size:10px; line-height:1.3; }
.cw-category-options label > i { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid rgba(255,255,255,.13); color:transparent; font-style:normal; font-size:11px; }
.cw-category-options label:has(input:checked) { border-color:rgba(166,126,255,.72) !important; background:linear-gradient(135deg,rgba(112,72,206,.24),rgba(64,43,119,.16)) !important; box-shadow:0 0 0 1px rgba(157,116,255,.08) inset; }
.cw-category-options label:has(input:checked) > i { border-color:#a882ff; background:#8f63e8; color:#fff; }

/* Use a real cloned detail screen inside the image editor. */
.detail-image-live-preview { display:block !important; min-height:430px !important; max-height:520px; overflow:auto !important; padding:0 !important; background:#03040a !important; }
.detail-editor-actual-preview { min-width: 900px; transform-origin: top left; zoom: .58; }
.detail-editor-actual-preview .character-detail-view { display:block !important; min-height:auto !important; padding:28px !important; }
.detail-editor-actual-preview .detail-hero { margin:0 !important; }
.detail-editor-actual-preview .detail-actions,
.detail-editor-actual-preview .detail-safe-note,
.detail-editor-actual-preview .detail-stats { pointer-events:none; }
@media (max-width:900px) {
  .cw-category-options { grid-template-columns:1fr !important; }
  .detail-editor-actual-preview { zoom:.48; }
}

/* V5.16.1: keep the proven V5.15 detail-screen image geometry.
   Only card rails and the editor preview receive new layout rules. */
.avatar-rail-image > img,
.avatar-rail-image > video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: translate(var(--card-pan-x, 0px), var(--card-pan-y, 0px)) scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
}

/* The full detail preview sits below both editor columns and renders the real
   detail page in its own desktop viewport{
  width: min(1320px, calc(100vw - 36px)) !important;
}
.detail-image-live-preview-wrap {
  width: 100%;
  margin-top: 22px;
}
.detail-image-live-preview {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(159,116,255,.2);
  border-radius: 16px;
  background: #03040a !important;
}
.detail-editor-preview-viewport {
  position: relative;
  width: 100%;
  min-height: 280px;
  overflow: hidden;
  background: #03040a;
}
.detail-editor-preview-scale {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
}
.detail-editor-preview-offset {
  position: absolute;
  left: 0;
  top: 0;
}
.detail-editor-preview-frame {
  display: block;
  width: 1600px;
  height: 1000px;
  border: 0;
  background: #03040a;
  pointer-events: none;
}

/* Keep the already-playing card video visible until the detail video has
   decoded and sought to the matching frame. This prevents a black flash. */
body.detail-active .character-detail-view .detail-art .detail-video-transition-placeholder {
  position: absolute !important;
  right: -2vw !important;
  top: -9% !important;
  bottom: auto !important;
  z-index: 2 !important;
  width: min(56vw, 900px) !important;
  height: 118% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center 2% !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: opacity 160ms ease !important;
}
body.detail-active .character-detail-view .detail-art .detail-video-transition-placeholder.is-leaving {
  opacity: 0 !important;
}
body.detail-active .character-detail-view .detail-art video#detailImage {
  z-index: 2 !important;
}

/* A fixed scrim is deterministic for images, GIFs and videos, unlike canvas brightness sampling. */
.character-tile .tile-art::after,
.catalog-card .catalog-card-shade,
.crop-card-inner::after,
.creator-profile-character-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3,4,9,.04) 0%, rgba(3,4,9,.12) 38%, rgba(3,4,9,.78) 73%, rgba(3,4,9,.97) 100%) !important;
}
.character-tile .tile-content,
.catalog-card .catalog-card-copy,
.crop-card-copy,
.creator-profile-character-copy {
  position: relative;
  z-index: 3;
  text-shadow: 0 2px 10px rgba(0,0,0,.96), 0 0 3px rgba(0,0,0,.9);
}
.character-tile .tile-title h3,
.character-tile .tile-meta,
.character-tile .tile-summary,
.catalog-card-copy h3,
.catalog-card-copy p,
.crop-card-copy strong,
.crop-card-copy small,
.creator-profile-character-copy h3,
.creator-profile-character-copy p { color: #fff !important; opacity: 1 !important; }

.detail-quote-card[hidden] { display: none !important; }
.detail-quote-card.quote-disabled {
  display: grid !important;
  place-items: center !important;
  min-height: 64px !important;
  border-style: dashed !important;
  background: rgba(15,13,26,.64) !important;
}
.detail-quote-add-btn,
.detail-quote-remove-btn {
  border: 1px solid rgba(183,117,255,.42);
  border-radius: 10px;
  background: rgba(22,17,38,.88);
  color: #f3eaff;
  cursor: pointer;
}
.detail-quote-add-btn { padding: 10px 14px; font-weight: 800; }
.detail-quote-remove-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 8;
  width: 28px;
  height: 28px;
  font-size: 20px;
  line-height: 1;
}

.video-seeking-continuity { opacity: 0 !important; }
video:not(.video-seeking-continuity) { transition: opacity 140ms ease; }

.vn-character-media-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vn-character-media-stack > .vn-standing,
.vn-character-media-stack > .vn-standin {
  z-index: 1;
}
.vn-character.is-ai-visual-pending .vn-nameplate {
  animation: tryva-ai-visual-pending 1.4s ease-in-out infinite;
}
@keyframes tryva-ai-visual-pending {
  0%, 100% { box-shadow: 0 0 0 rgba(151, 105, 255, 0); }
  50% { box-shadow: 0 0 18px rgba(151, 105, 255, .3); }
}

/* Motion is owned by one cancellable Web Animation per sprite transition. */
.chat-view .vn-character.is-stage-leaving {
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .vn-character.is-ai-visual-pending .vn-nameplate { animation: none !important; }
}

.emotion-media-editor-modal { width: min(980px, calc(100vw - 30px)); max-height: min(90vh, 920px); }
.emotion-media-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 4px 0 18px;
}
.emotion-media-slot {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(164,124,255,.2);
  border-radius: 15px;
  background: rgba(16,15,27,.78);
}
.emotion-media-slot.is-uploading { opacity: .58; pointer-events: none; }
.emotion-media-preview-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(145deg,#080910,#151222);
}
.emotion-media-preview { width: 100%; height: 100%; object-fit: contain; }
.emotion-media-empty { color: rgba(232,226,244,.46); font-size: 12px; }
.emotion-media-slot-copy { display: grid; gap: 3px; }
.emotion-media-slot-copy strong { color: #fff; }
.emotion-media-slot-copy small { color: rgba(226,218,240,.56); }
.emotion-media-slot-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.emotion-media-slot-actions > * {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 7px;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.emotion-media-upload { display: grid; place-items: center; cursor: pointer; }
.visual-asset-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 2px 8px; border-top: 1px solid rgba(164,124,255,.14);
}
.visual-asset-section-head > div { display: grid; gap: 3px; }
.visual-asset-section-head strong { color: #fff; }
.visual-asset-section-head small { color: rgba(226,218,240,.58); }
.visual-asset-fields { display: grid; gap: 8px; }
.visual-asset-fields input, .visual-asset-fields select {
  width: 100%; min-width: 0; padding: 9px 10px; border-radius: 9px;
  border: 1px solid rgba(164,124,255,.24); background: rgba(7,7,13,.78); color: #fff;
}
.visual-asset-meta { display: flex; justify-content: space-between; gap: 8px; color: rgba(226,218,240,.58); font-size: 12px; }
.visual-asset-empty-copy { grid-column: 1/-1; margin: 4px 0 18px; padding: 18px; text-align: center; color: rgba(226,218,240,.5); border: 1px dashed rgba(164,124,255,.2); border-radius: 14px; }
.create-visual-asset-section { display: grid; gap: 10px; }
.create-visual-asset-section .visual-asset-section-head { border-top: 0; padding-top: 0; }
.create-visual-asset-section .visual-asset-section-head h3 { margin: 0; color: #fff; }
.create-visual-asset-grid { padding-bottom: 0; }
@media (max-width: 780px) { .emotion-media-slot-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px) { .emotion-media-slot-grid { grid-template-columns: 1fr; } }
.detail-quote-card.quote-disabled[hidden] { display: none !important; }

/* Library story assets: use the same dark glass/card language as character cards. */
.library-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.library-story-create-group {
  position: relative;
}

.library-story-create-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  display: grid;
  width: min(310px, calc(100vw - 32px));
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(181, 145, 255, .22);
  border-radius: 16px;
  background: rgba(12, 10, 22, .96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(24px);
}

.library-story-create-menu.hidden { display: none !important; }

.library-story-create-menu button {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  padding: 11px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: rgba(248, 245, 255, .96);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.library-story-create-menu button:hover,
.library-story-create-menu button:focus-visible {
  background: rgba(139, 85, 255, .16);
  transform: translateX(2px);
  outline: none;
}

.library-story-create-menu button > span {
  grid-row: 1 / 3;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(181, 145, 255, .22);
  border-radius: 10px;
  background: rgba(135, 84, 246, .12);
  color: #d8c1ff;
  font-size: 18px;
}

.library-story-create-menu strong { font-size: 13px; }
.library-story-create-menu small { color: rgba(224, 216, 240, .58); font-size: 11px; }

.library-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 1px 14px;
  scrollbar-width: none;
}

.library-toolbar::-webkit-scrollbar { display: none; }

.library-toolbar button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.library-toolbar button span {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(235, 229, 248, .68);
  font-size: 11px;
}

.library-toolbar button.active span {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

.library-status {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid rgba(161, 121, 244, .2);
  border-radius: 12px;
  background: rgba(22, 17, 37, .58);
  color: rgba(233, 227, 246, .72);
  font-size: 12px;
}

.library-status.hidden { display: none !important; }
.library-status.is-error { border-color: rgba(255, 116, 145, .28); color: #ffc4d0; }
.library-status button { margin-left: auto; border: 0; background: none; color: #d8c1ff; font-weight: 750; cursor: pointer; }

body.library-active #libraryView .library-story-card {
  position: relative;
  flex: 0 0 var(--tryva-card-w) !important;
  width: var(--tryva-card-w) !important;
  min-width: var(--tryva-card-w) !important;
  height: var(--tryva-card-h) !important;
  min-height: var(--tryva-card-h) !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .095);
  border-radius: var(--tryva-card-radius);
  background: rgba(8, 9, 17, .94);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
}

body.library-active #libraryView .library-story-card:hover {
  transform: translateY(-4px);
  border-color: rgba(156, 91, 255, .6);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .48), 0 0 34px rgba(132, 74, 255, .16);
}

.library-story-art {
  position: relative;
  height: 61%;
  overflow: hidden;
  background: #0d0d18;
}

.library-story-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 9, 17, .96) 100%);
  pointer-events: none;
}

.library-story-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease, filter 260ms ease;
}

.library-story-card:hover .library-story-art > img { transform: scale(1.035); filter: saturate(1.06) brightness(1.03); }

.library-story-placeholder {
  display: grid;
  height: 100%;
  place-content: center;
  justify-items: center;
  gap: 8px;
  background:
    radial-gradient(circle at 52% 30%, rgba(144, 89, 255, .3), transparent 36%),
    linear-gradient(145deg, #171126, #090a13 74%);
  color: rgba(239, 232, 255, .72);
}

.type-world .library-story-placeholder { background: radial-gradient(circle at 52% 30%, rgba(72, 161, 221, .28), transparent 36%), linear-gradient(145deg, #101b28, #090a13 74%); }
.type-lorebook .library-story-placeholder { background: radial-gradient(circle at 52% 30%, rgba(217, 137, 74, .24), transparent 36%), linear-gradient(145deg, #251911, #090a13 74%); }
.library-story-placeholder span { color: #e5d4ff; font-size: 44px; line-height: 1; }
.library-story-placeholder small { font-size: 11px; letter-spacing: .02em; }

.library-story-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.library-story-badges span {
  min-height: 26px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: rgba(8, 8, 15, .68);
  color: rgba(255, 255, 255, .9);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  backdrop-filter: blur(12px);
}

.library-story-badges .library-story-type {
  border-color: rgba(180, 136, 255, .28);
  background: rgba(118, 67, 221, .68);
}

.library-story-copy {
  display: grid;
  align-content: start;
  gap: 7px;
  height: 39%;
  padding: 1px 15px 14px;
}

.library-story-copy h3 {
  overflow: hidden;
  margin: 0;
  color: rgba(255, 255, 255, .97);
  font-size: 20px;
  line-height: 1.18;
  font-weight: 820;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-story-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: rgba(228, 222, 240, .68);
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.library-story-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  color: rgba(212, 204, 229, .45);
  font-size: 10px;
}

.library-story-meta button {
  min-height: 28px;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid rgba(174, 129, 255, .28);
  border-radius: 8px;
  background: rgba(129, 79, 224, .16);
  color: rgba(232, 220, 255, .92);
  font: inherit;
  font-weight: 780;
  cursor: pointer;
}

.library-story-meta button:hover {
  border-color: rgba(190, 151, 255, .62);
  background: rgba(137, 83, 238, .3);
  color: #fff;
}

.library-story-meta button:disabled { opacity: .55; cursor: wait; }

.library-view .library-create-card small {
  display: block;
  margin-top: 7px;
  color: rgba(222, 214, 239, .48);
  font-size: 11px;
  font-weight: 550;
}

.library-view .library-grid.tryva-story-home-grid > .story-library-create-card {
  box-sizing: border-box;
  width: var(--tryva-story-card-width);
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: var(--tryva-story-card-aspect-ratio);
  align-content: center;
  justify-items: center;
}

@media (max-width: 760px) {
  .library-view .page-head { align-items: flex-start !important; }
  .library-head-actions { width: 100%; justify-content: flex-start; }
  .library-head-actions > button,
  .library-story-create-group { flex: 1; }
  .library-story-create-group > button { width: 100%; }
  .library-story-create-menu { right: auto; left: 0; }
  body.library-active #libraryView .library-story-card {
    flex-basis: calc(50% - 9px) !important;
    width: calc(50% - 9px) !important;
    min-width: 0 !important;
  }
}

@media (max-width: 460px) {
  .library-head-actions { display: grid; grid-template-columns: 1fr 1.15fr; }
  .library-head-actions .ghost-button,
  .library-head-actions .primary-button { min-height: 44px !important; padding-inline: 11px !important; font-size: 13px !important; }
  .library-toolbar { margin-inline: -2px; }
  .library-toolbar button { min-height: 38px; padding-inline: 11px; }
  .library-story-copy h3 { font-size: 17px; }
  .library-story-copy p { font-size: 11px; }
}


/* V5.16.2: creator-profile character cards use the saved card crop for images and video. */
.creator-profile-character-art {
  position: relative;
}
.creator-profile-character-art > img,
.creator-profile-character-art > video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: translate(var(--card-pan-x, 0px), var(--card-pan-y, 0px)) scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transition: transform 180ms ease !important;
}
.creator-profile-character-card:hover .creator-profile-character-art > img,
.creator-profile-character-card:hover .creator-profile-character-art > video {
  transform: translate(var(--card-pan-x, 0px), var(--card-pan-y, 0px)) scale(calc(var(--card-crop-zoom, 1.05) + .02)) !important;
}

/* V5.17.0: stable VN layers prevent portraits/videos from remounting when only the text changes. */
.vn-background-status-layer,
.vn-character-layer,
.vn-presentation-layer {
  display: contents;
}

/* Compact upper-left generation indicator. It is no longer a second dialogue box. */
.vn-compose-waiting {
  left: 14px !important;
  right: auto !important;
  top: 14px !important;
  bottom: auto !important;
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 8px 11px !important;
  border-radius: 999px !important;
  transform: none !important;
  background: rgba(8, 10, 17, 0.72) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(10px) !important;
}

.vn-compose-waiting strong {
  grid-column: auto !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.vn-compose-waiting small {
  display: none !important;
}

.vn-compose-waiting .vn-compose-spinner {
  grid-row: auto !important;
  width: 13px !important;
  height: 13px !important;
  border-width: 2px !important;
}

/* V5.18.0: authoritative wizard/editor media geometry. Keep this block last. */
.character-wizard .cw-stepper {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
.character-wizard[data-active-step="5"] .cw-shell,
.character-wizard[data-active-step="6"] .cw-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}
.character-wizard[data-active-step="5"] .cw-preview-panel,
.character-wizard[data-active-step="6"] .cw-preview-panel {
  display: none !important;
}

/* The crop window and exported bitmap now share the same aspect ratio. */
.character-wizard .cw-create-crop-frame.profile {
  width: min(100%, var(--tryva-card-hover-w, 318px)) !important;
  height: auto !important;
  aspect-ratio: 318 / 354 !important;
}
.character-wizard .cw-create-crop-frame.standing{
  width: min(100%, 360px) !important;
  height: auto !important;
  aspect-ratio: 1290 / 1611 !important;
  min-height: 0 !important;
}
.character-wizard .cw-create-crop-frame > img,
.character-wizard .cw-create-crop-frame > video{
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
}

/* Card preview above, full-width real detail preview below. */
.character-wizard .cw-real-preview-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
}
.character-wizard .cw-real-preview-section,
.character-wizard .cw-real-preview-section.wide,
.character-wizard .cw-detail-window-preview {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}
.character-wizard .cw-library-card-preview {
  min-height: 385px !important;
}
.character-wizard .cw-live-detail-preview {
  position: relative !important;
  width: 100% !important;
  min-height: 300px;
  overflow: hidden !important;
  border-radius: 16px;
  background: #03040a;
}
.character-wizard .cw-live-detail-scale,
.character-wizard .cw-live-detail-offset {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
}
.character-wizard .cw-live-detail-frame {
  display: block;
  width: 1600px;
  height: 1000px;
  border: 0;
  background: #03040a;
  pointer-events: none;
}

/* Direct card editor uses exactly the same viewport as the saved card. */
.card-image-editor-modal #cropDragFrame,
.card-image-editor-modal .crop-card-frame-hover {
  width: var(--tryva-card-hover-w, 318px) !important;
  height: var(--tryva-card-h, 354px) !important;
  aspect-ratio: 318 / 354 !important;
}
.card-image-editor-modal #cropDragFrame .crop-card-inner > img,
.card-image-editor-modal #cropDragFrame .crop-card-inner > video,
.card-image-editor-modal .crop-card-frame .crop-card-inner > img,
.card-image-editor-modal .crop-card-frame .crop-card-inner > video {
  width: var(--tryva-card-hover-w, 318px) !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}





.detail-image-live-preview-wrap,
.detail-image-live-preview {
  width: 100% !important;
  min-width: 0 !important;
}
.detail-image-live-preview {
  display: block !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.detail-editor-preview-viewport {
  position: relative !important;
  width: 100% !important;
  min-height: 300px;
  overflow: hidden !important;
}
.detail-editor-preview-scale,
.detail-editor-preview-offset {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  transform-origin: top left !important;
}
.detail-editor-preview-frame {
  display: block !important;
  width: 1600px !important;
  height: 1000px !important;
  border: 0 !important;
  zoom: 1 !important;
  transform: none;
  background: #03040a;
  pointer-events: none;
}

/* Dynamic detail media follows the same saved focal point shown in the editor. */
body.detail-active .character-detail-view .detail-art video#detailImage,
body.detail-active .character-detail-view .detail-art img.animated-gif-image {
  object-position: var(--detail-gif-x, 50%) var(--detail-gif-y, 50%) !important;
  transform: scale(var(--detail-gif-zoom, 1)) !important;
  transform-origin: var(--detail-gif-x, 50%) var(--detail-gif-y, 50%) !important;
}

/* The edit modal and wizard use one full-body coordinate system. */
.character-wizard .cw-chat-sprite-frame,
.chat-sprite-editor-frame,
.character-wizard .cw-emotion-sprite-frame {
  position: relative !important;
  width: 100% !important;
  height: 720px !important;
  min-height: 720px !important;
  overflow: hidden !important;
}
.chat-sprite-editor-modal {
  width: min(1260px, calc(100vw - 32px)) !important;
}
.chat-sprite-editor-body {
  grid-template-columns: minmax(520px, 1fr) minmax(250px, 340px) !important;
  gap: 22px !important;
}
.chat-sprite-editor-frame .chat-sprite-transform-box > img,
.chat-sprite-editor-frame .chat-sprite-transform-box > video,
.direct-sprite-placement-board .chat-sprite-transform-box > img,
.direct-sprite-placement-board .chat-sprite-transform-box > video,
.character-wizard .cw-emotion-sprite-frame .chat-sprite-transform-box > img,
.character-wizard .cw-emotion-sprite-frame .chat-sprite-transform-box > video {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
}

/* Dedicated, roomy emotion-media step. */
.character-wizard .cw-emotion-step-card,
.character-wizard .cw-emotion-layout-card {
  padding: 20px !important;
}
.character-wizard .cw-emotion-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.character-wizard .cw-emotion-layout-grid {
  grid-template-columns: minmax(500px, .92fr) minmax(600px, 1.08fr) !important;
  gap: 24px !important;
  align-items: start;
}
.character-wizard .cw-emotion-layout-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.character-wizard .cw-emotion-sprite-frame {
  background:
    linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%),
    linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.025) 75%),
    #080a12 !important;
  background-position: 0 0, 12px 12px !important;
  background-size: 24px 24px !important;
}

@media (max-width: 720px) {
  .character-wizard .cw-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .character-wizard .cw-emotion-slot-grid { grid-template-columns: 1fr; }
  .character-wizard .cw-chat-sprite-frame,
  .chat-sprite-editor-frame,
  .character-wizard .cw-emotion-sprite-frame { height: 620px !important; min-height: 620px !important; }
}

/* Base full-body ghost in step 7 makes height/foot alignment differences visible before saving. */
.character-wizard .cw-emotion-sprite-frame .emotion-base-reference {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 3;
  transform-origin: center bottom;
  opacity: .18;
  filter: grayscale(.2) saturate(.5);
  pointer-events: none;
  border-bottom: 2px dashed rgba(115, 209, 255, .72);
}
.character-wizard .cw-emotion-sprite-frame .emotion-base-reference > img,
.character-wizard .cw-emotion-sprite-frame .emotion-base-reference > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.character-wizard .cw-emotion-sprite-frame .emotion-base-reference > span {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(4, 16, 25, .72);
  color: rgba(174, 229, 255, .9);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.character-wizard .cw-emotion-sprite-frame .chat-sprite-transform-box { z-index: 5; }

/* Image setup needs the full wizard width; the generic side preview only squeezed the real previews. */
.character-wizard[data-active-step="4"] .cw-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}
.character-wizard[data-active-step="4"] .cw-preview-panel {
  display: none !important;
}

.character-wizard .cw-emotion-slot-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(8,10,18,.62);
}
.character-wizard .cw-emotion-slot-card.active {
  border-color: rgba(157,105,255,.7);
  box-shadow: inset 0 0 0 1px rgba(157,105,255,.18), 0 10px 28px rgba(65,35,135,.18);
}
.character-wizard .cw-emotion-slot-select {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.character-wizard .cw-emotion-slot-preview {
  display: grid;
  place-items: center;
  width: 78px;
  height: 96px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background:
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%),
    #0b0d16;
  background-size: 16px 16px;
}
.character-wizard .cw-emotion-slot-preview > img,
.character-wizard .cw-emotion-slot-preview > video,
.character-wizard .cw-emotion-slot-media {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}
.character-wizard .cw-emotion-slot-empty {
  color: rgba(230,222,244,.42);
  font-size: 10px;
}
.character-wizard .cw-emotion-slot-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.character-wizard .cw-emotion-slot-copy strong {
  color: #f4efff;
  font-size: 12px;
}
.character-wizard .cw-emotion-slot-copy small {
  color: rgba(220,212,236,.56);
  font-size: 10px;
  line-height: 1.45;
}
.character-wizard .cw-emotion-slot-upload {
  align-self: center;
  min-width: 56px;
  min-height: 38px;
  padding: 0 10px !important;
}
@media (max-width: 760px) {
  .character-wizard .cw-emotion-slot-card { grid-template-columns: 1fr; }
  .character-wizard .cw-emotion-slot-upload { width: 100%; }
}


/* V5.18.0 final sizing guard: direct modal children use the available content width{
  box-sizing: border-box;
}





/* V5.19.0: one media geometry for real surfaces and editors. */
.tryva-cover-media,
.tryva-detail-media,
.detail-video-transition-placeholder {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-cover-width, 100%) !important;
  height: var(--tryva-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}
.tryva-detail-media { opacity: 0; transition: opacity 120ms ease; }
.tryva-detail-media.is-media-ready { opacity: 1; }
.detail-art.is-media-loading::before { opacity: .48; }

.simple-media-editor { width: min(980px, calc(100vw - 32px)) !important; }
.simple-media-toolbar { display:flex; align-items:center; gap:14px; margin:16px 0; min-height:42px; }
.simple-media-toolbar .media-upload-status { margin:0; }
.simple-card-editor-stage { display:grid; place-items:center; padding:18px; border:1px solid rgba(159,116,255,.16); border-radius:20px; background:rgba(5,6,13,.72); }
.simple-card-editor-stage #cropDragFrame {
  width: var(--tryva-editor-card-w, var(--tryva-card-w, 218px)) !important;
  height: var(--tryva-editor-card-h, var(--tryva-card-h, 302px)) !important;
  margin: 0 !important;
}
.simple-media-controls { justify-content:center !important; margin:14px 0 0 !important; }

.simple-detail-media-editor { width:min(1440px, calc(100vw - 24px)) !important; max-height:calc(100vh - 20px) !important; overflow:auto !important; }
.simple-detail-live-preview { position:relative; width:100%; min-height:320px; overflow:hidden; border:1px solid rgba(159,116,255,.17); border-radius:20px; background:#03040a; }
.direct-detail-preview-scale { position:absolute; left:0; top:0; transform-origin:top left; }
.direct-detail-preview-canvas { position:absolute; left:0; top:0; width:var(--tryva-detail-preview-width, 1600px); transform-origin:top left; }
.tryva-detail-preview-clone { display:block !important; width:var(--tryva-detail-preview-width, 1600px) !important; min-height:0 !important; padding:0 !important; margin:0 !important; }
.tryva-detail-preview-clone .detail-hero { cursor:default; }
.simple-detail-live-preview #detailImageDragFrame { cursor:grab; touch-action:none; user-select:none; }
.simple-detail-live-preview #detailImageDragFrame.dragging { cursor:grabbing; outline:2px solid rgba(171,108,255,.72); outline-offset:-2px; }
.simple-detail-media-editor .direct-crop-actions { position:sticky; bottom:0; z-index:5; background:linear-gradient(180deg, transparent, rgba(9,10,18,.97) 34%); }

.character-wizard .cw-detail-window-preview { width:100% !important; min-width:0 !important; overflow:hidden !important; }
.character-wizard .cw-detail-window-preview .direct-detail-preview-scale { position:absolute; left:0; top:0; transform-origin:top left; }
.character-wizard .cw-detail-window-preview .direct-detail-preview-canvas { position:absolute; left:0; top:0; width:var(--tryva-detail-preview-width, 1600px); }

@media (max-width: 760px) {
  .simple-media-toolbar { align-items:flex-start; flex-direction:column; }
  .simple-detail-media-editor { width:calc(100vw - 12px) !important; padding:18px 12px !important; }
  .simple-card-editor-stage #cropDragFrame {
    width: min(var(--tryva-editor-card-w, var(--tryva-card-w, 218px)), 86vw) !important;
    height: auto !important;
    aspect-ratio: var(--tryva-card-aspect-ratio, 218 / 302);
  }
}



/* V5.20.0: actual detail, editor preview, photos, GIFs and videos share one exact geometry. */
body.detail-active .character-detail-view .detail-art > #detailImage.tryva-detail-media,
body.detail-active .character-detail-view .detail-art > img#detailImage.tryva-detail-media,
body.detail-active .character-detail-view .detail-art > video#detailImage.tryva-detail-media,
body.detail-active .character-detail-view .detail-art > .detail-video-transition-placeholder.tryva-detail-media,
.tryva-detail-preview-clone .detail-art > .tryva-detail-media,
.simple-detail-live-preview .detail-art > .tryva-detail-media {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-cover-width, 100%) !important;
  height: var(--tryva-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}

/* Keep the entire real detail hero visible inside the editor on desktop and tablet. */
.simple-detail-live-preview {
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}


/* V5.20.0: the one card editor surface behaves like the actual normal/hover card. */
.simple-card-editor-stage { gap: 10px; }
.simple-card-editor-viewport {
  width: var(--tryva-card-w, 248px);
  height: var(--tryva-card-h, 354px);
  overflow: hidden;
  border-radius: var(--tryva-card-radius, 18px);
  transition: width 180ms cubic-bezier(.2,.75,.2,1), box-shadow 180ms ease;
  outline: none;
}
.simple-card-editor-viewport:hover,
.simple-card-editor-viewport:focus,
.simple-card-editor-viewport:focus-within {
  width: var(--tryva-card-hover-w, 318px);
  box-shadow: 0 22px 52px rgba(0,0,0,.45), 0 0 0 1px rgba(159,116,255,.36);
}
.simple-card-editor-viewport #cropDragFrame {
  width: var(--tryva-card-hover-w, 318px) !important;
  min-width: var(--tryva-card-hover-w, 318px) !important;
  height: var(--tryva-card-h, 354px) !important;
}
.simple-card-editor-hint {
  color: rgba(226,218,241,.58);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

/* V5.20.0 final specificity guard: legacy image-only detail rules must not override shared geometry. */
html body .simple-detail-media-editor .simple-detail-live-preview
.tryva-detail-preview-clone.character-detail-view
#detailImageDragFrame.detail-art > img.tryva-detail-media.tryva-cover-media,
html body .simple-detail-media-editor .simple-detail-live-preview
.tryva-detail-preview-clone.character-detail-view
#detailImageDragFrame.detail-art > video.tryva-detail-media.tryva-cover-media,
html body .character-wizard .cw-detail-window-preview
.tryva-detail-preview-clone.character-detail-view
.detail-art > img.tryva-detail-media.tryva-cover-media,
html body .character-wizard .cw-detail-window-preview
.tryva-detail-preview-clone.character-detail-view
.detail-art > video.tryva-detail-media.tryva-cover-media {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-cover-width, 100%) !important;
  height: var(--tryva-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}

/* Do not let the modal flex column crush the fitted real detail preview. */
.simple-detail-media-editor .simple-detail-live-preview {
  flex: 0 0 auto !important;
}

/* V5.21.0 responsive stability: iPad-first, phone-safe, media geometry untouched. */
:root {
  --tryva-app-height: 100vh;
  --tryva-safe-top: env(safe-area-inset-top, 0px);
  --tryva-safe-right: env(safe-area-inset-right, 0px);
  --tryva-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tryva-safe-left: env(safe-area-inset-left, 0px);
}
@supports (height: 100dvh) {
  :root { --tryva-app-height: 100dvh; }
}
html, body { min-height: var(--tryva-app-height); }
.app-shell { min-height: var(--tryva-app-height) !important; }
.nav-shell { height: var(--tryva-app-height) !important; padding-bottom: max(18px, var(--tryva-safe-bottom)) !important; }
.chat-active .workspace { height: var(--tryva-app-height) !important; }
.mobile-nav-toggle,
.mobile-nav-backdrop { display: none; }


@media (max-width: 900px) {
  body { overflow-x: hidden; }
  .app-shell { display: block !important; min-width: 0 !important; }
  .workspace {
    width: 100% !important;
    min-width: 0 !important;
    padding: calc(68px + var(--tryva-safe-top)) 16px calc(98px + var(--tryva-safe-bottom)) !important;
  }
  .chat-active .workspace { padding: max(8px, var(--tryva-safe-top)) 8px max(8px, var(--tryva-safe-bottom)) !important; }

  .mobile-nav-toggle {
    position: fixed;
    z-index: 1300;
    top: max(12px, calc(var(--tryva-safe-top) + 8px));
    left: max(12px, calc(var(--tryva-safe-left) + 8px));
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border: 1px solid rgba(180, 156, 255, .28);
    border-radius: 13px;
    background: rgba(10, 11, 20, .94);
    color: #fff;
    box-shadow: 0 14px 38px rgba(0,0,0,.38);
    backdrop-filter: blur(14px);
  }
  .chat-active .mobile-nav-toggle { display: none; }
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1190;
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    background: rgba(1, 2, 7, .66);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
  }
  .nav-shell {
    position: fixed !important;
    z-index: 1200;
    inset: 0 auto 0 0;
    width: min(84vw, 320px) !important;
    max-width: calc(100vw - 48px);
    height: var(--tryva-app-height) !important;
    padding: max(22px, calc(var(--tryva-safe-top) + 14px)) 18px max(18px, calc(var(--tryva-safe-bottom) + 12px)) !important;
    transform: translate3d(-104%, 0, 0);
    transition: transform 210ms cubic-bezier(.2,.8,.2,1);
    box-shadow: 24px 0 70px rgba(0,0,0,.48);
    overflow-y: auto;
  }
  body.mobile-nav-open .nav-shell { transform: translate3d(0, 0, 0); }
  body.mobile-nav-open .mobile-nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  body.mobile-nav-open { overflow: hidden; }

  .page-head,
  .cw-page-head,
  .all-characters-head,
  .creator-profile-page-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .page-head h1 { font-size: clamp(36px, 9vw, 48px) !important; }
  .head-actions { width: 100% !important; grid-template-columns: minmax(0, 1fr) auto !important; }
  .all-character-search { width: 100% !important; }
  .all-character-toolbar,
  .cw-stepper,
  .insight-tabs {
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .all-character-toolbar > *,
  .cw-stepper > *,
  .insight-tabs > * { flex: 0 0 auto; }

  .chat-view {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) minmax(170px, 30dvh) !important;
    height: calc(var(--tryva-app-height) - max(16px, var(--tryva-safe-top)) - max(16px, var(--tryva-safe-bottom))) !important;
    gap: 8px !important;
  }
  .chat-panel { min-height: 0 !important; }
  .chat-header .controls { grid-column: 1 / -1; }
  .chat-header .tool-button { padding-inline: 10px !important; }
  .vn-stage { min-height: 260px !important; }
  .vn-bubble,
  .vn-user-bubble,
  .vn-narrative { max-width: calc(100% - 24px) !important; }
  .insight-panel { min-height: 0 !important; max-height: 30dvh !important; overflow: hidden !important; }
  .insight-pane { min-height: 0 !important; overflow: auto !important; }

  .detail-owner-tools,
  .detail-edit-session-tools,
  .detail-actions,
  .detail-selection-strip,
  .cw-footer,
  .magic-actions,
  .direct-crop-actions { flex-wrap: wrap !important; }
  .detail-owner-tools > *,
  .detail-edit-session-tools > *,
  .detail-actions > * { flex: 1 1 150px; min-width: 0 !important; }
  .detail-hero { min-height: auto !important; padding: 28px 22px !important; }
  .detail-art { min-height: clamp(420px, 58dvh, 620px) !important; }
  .detail-copy h1 { font-size: clamp(44px, 12vw, 72px) !important; }

  .character-wizard .cw-shell { grid-template-columns: minmax(0, 1fr) !important; }
  .character-wizard .cw-preview-panel { position: static !important; width: 100% !important; }
  .cw-field-row,
  .cw-two-column-settings,
  .cw-media-layout,
  .cw-dialogue-layout,
  .cw-emotion-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .cw-stepper { display: flex !important; padding-bottom: 8px; }
  .cw-step { min-width: 150px !important; }
  .cw-footer { position: sticky !important; bottom: 0 !important; z-index: 20; background: rgba(7,8,14,.96) !important; }

  body.play-active .selection-tray,
  body.play-active .play-view .selection-tray {
    left: max(10px, var(--tryva-safe-left)) !important;
    right: max(10px, var(--tryva-safe-right)) !important;
    bottom: max(10px, var(--tryva-safe-bottom)) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

@media (max-width: 560px) {
  .workspace { padding-inline: 12px !important; }
  .head-actions { grid-template-columns: minmax(0, 1fr) !important; }
  .head-actions .ghost-button,
  #quickCreateBtn { width: 100% !important; }
  .character-grid,
  .all-character-grid,
  .creator-profile-character-grid,
  .library-grid,
  .related-grid { grid-template-columns: minmax(0, 1fr) !important; }

  .chat-header { grid-template-columns: 44px minmax(0, 1fr) !important; padding: 10px !important; }
  .chat-header .controls { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chat-header .controls .tool-button { min-width: 0 !important; font-size: 12px !important; padding: 0 6px !important; }
  .user-form { grid-template-columns: auto minmax(0, 1fr) 48px !important; gap: 6px !important; padding-inline: 8px !important; }
  .input-mode-btn { min-width: 58px !important; padding-inline: 8px !important; font-size: 12px !important; }
  .vn-bubble,
  .vn-user-bubble { width: calc(100% - 20px) !important; }

  .modal-backdrop { padding: 0 !important; }
  .modal-backdrop > section,
  .start-modal,
  .simple-media-editor,
  .simple-detail-media-editor {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: var(--tryva-app-height) !important;
    max-height: var(--tryva-app-height) !important;
    border-radius: 0 !important;
    padding-bottom: var(--tryva-safe-bottom) !important;
  }
  .modal-head { position: sticky; top: 0; z-index: 10; background: rgba(8,9,16,.96); }
  .simple-card-editor-viewport,
  .simple-card-editor-viewport:hover,
  .simple-card-editor-viewport:focus,
  .simple-card-editor-viewport:focus-within { width: min(318px, calc(100vw - 32px)) !important; }

  body.play-active .selection-tray,
  body.play-active .play-view .selection-tray {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .selection-tray .primary-button { width: 100% !important; min-width: 0 !important; }
}


@media (max-width: 900px) {
  .character-wizard .cw-footer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    gap: 8px !important;
  }
  .character-wizard .cw-footer-spacer {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .character-wizard #wizardNextBtn,
  .character-wizard #saveCharacterBtn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .character-wizard #wizardPrevBtn,
  .character-wizard .cw-history-tools {
    width: 100% !important;
    min-width: 0 !important;
  }
  .character-wizard .cw-history-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .character-wizard .cw-history-tools > button { min-width: 0 !important; padding-inline: 8px !important; }
}

/* V5.21.1: keep the unified card editor intact; only restore its copy anchor and remove editor-only scrims. */
.card-image-editor-modal #cropDragFrame .crop-card-copy {
  position: absolute !important;
  left: 15px !important;
  right: auto !important;
  bottom: 15px !important;
  z-index: 3 !important;
}
.card-image-editor-modal #cropDragFrame .crop-card-gradient {
  display: none !important;
  background: none !important;
}
.card-image-editor-modal #cropDragFrame .crop-card-inner::after {
  content: none !important;
  display: none !important;
  background: none !important;
}


/* V5.21.2: compact, contained create-step-5 previews. Actual card/detail renderers stay unchanged. */
.character-wizard .cw-stage-preview .cw-real-preview-grid {
  display: grid !important;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.58fr) !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.065) !important;
  border-radius: 16px !important;
  background: rgba(3,4,10,0.38) !important;
}
.character-wizard .cw-stage-preview .cw-real-preview-section,
.character-wizard .cw-stage-preview .cw-real-preview-section.wide {
  min-width: 0 !important;
  padding: 0 18px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.character-wizard .cw-stage-preview .cw-real-preview-section.wide {
  border-left: 1px solid rgba(255,255,255,0.065) !important;
}
.character-wizard .cw-stage-preview .cw-real-preview-label {
  margin-bottom: 8px !important;
}
.character-wizard #wizardLibraryCardPreview {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 292px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.character-wizard #wizardLibraryCardPreview .cw-wizard-hover-card-preview {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) scale(.78) !important;
  transform-origin: center center !important;
}
.character-wizard #wizardLibraryCardPreview .crop-card-copy {
  position: absolute !important;
  left: 15px !important;
  right: auto !important;
  top: auto !important;
  bottom: 15px !important;
  z-index: 3 !important;
  transform: none !important;
}
.character-wizard #wizardDetailPreview {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 300px !important;
  overflow: hidden !important;
  contain: layout paint !important;
  isolation: isolate !important;
  pointer-events: none !important;
  border-radius: 14px !important;
  background: #03040a !important;
}
.character-wizard #wizardDetailPreview .direct-detail-preview-scale,
.character-wizard #wizardDetailPreview .direct-detail-preview-canvas {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  transform-origin: top left !important;
}
@media (max-width: 640px) {
  .character-wizard .cw-stage-preview .cw-real-preview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px !important;
  }
  .character-wizard .cw-stage-preview .cw-real-preview-section,
  .character-wizard .cw-stage-preview .cw-real-preview-section.wide {
    padding: 0 !important;
  }
  .character-wizard .cw-stage-preview .cw-real-preview-section.wide {
    padding-top: 14px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.065) !important;
  }
  .character-wizard #wizardLibraryCardPreview {
    height: 286px !important;
  }
  .character-wizard #wizardLibraryCardPreview .cw-wizard-hover-card-preview {
    transform: translate(-50%, -50%) scale(.75) !important;
  }
}

/* V5.22.0: one media geometry for real cards, wizard previews and editors. */
html body .character-tile .tile-art > img.tryva-card-cover-media,
html body .character-tile .tile-art > video.tryva-card-cover-media,
html body .catalog-card .catalog-card-media > img.tryva-card-cover-media,
html body .catalog-card .catalog-card-media > video.tryva-card-cover-media {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-card-cover-width, 100%) !important;
  height: var(--tryva-card-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-card-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
  transition: filter 160ms ease !important;
  will-change: transform;
}

/* Library hover/focus must not replace the saved crop with legacy full-frame rules. */
html body .library-view .character-tile:hover .tile-art > img.tryva-card-cover-media,
html body .library-view .character-tile:hover .tile-art > video.tryva-card-cover-media,
html body .library-view .character-tile:focus-visible .tile-art > img.tryva-card-cover-media,
html body .library-view .character-tile:focus-visible .tile-art > video.tryva-card-cover-media,
html body .library-view .character-tile.selected .tile-art > img.tryva-card-cover-media,
html body .library-view .character-tile.selected .tile-art > video.tryva-card-cover-media {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-card-cover-width, 100%) !important;
  height: var(--tryva-card-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-card-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}

.character-wizard #wizardLibraryCardPreview .tryva-card-preview-scale {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  transform-origin: center center !important;
  pointer-events: none !important;
}
.character-wizard #wizardLibraryCardPreview .tryva-card-preview-context {
  display: block !important;
  width: max-content !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
.character-wizard #wizardLibraryCardPreview .character-tile {
  margin: 0 !important;
  flex: none !important;
  pointer-events: none !important;
}

/* The same detail-page rules are dynamically mirrored into this isolated context. */
.tryva-detail-preview-context {
  position: relative !important;
  overflow: hidden !important;
  background: #03040a !important;
  isolation: isolate;
}
.tryva-detail-preview-context .tryva-detail-preview-clone {
  margin: 0 !important;
}

/*
 * Calibrated against 0Yf6L-Photoroom.png at 220% / Y 89.291.
 * The visible head begins on the 160 cm guide and the visible feet end 73.53%
 * below the board, so the foot guide belongs at that same off-canvas point.
 */
.chat-sprite-guide-baseline {
  top: auto !important;
  bottom: -73.53% !important;
}
.chat-sprite-transform-box,
.emotion-base-reference {
  transform-origin: center bottom !important;
  will-change: transform;
}
.chat-sprite-resize-handle.bottom {
  cursor: move !important;
}

.chat-view .vn-character,
body.stage-fullscreen .chat-view .vn-character,
.sprite-preview-frame .vn-character {
  left: calc(var(--stage-x) * 1%) !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  transform: translate3d(-50%, 0, 0) !important;
  transform-origin: center bottom !important;
  overflow: visible !important;
}
.chat-view .vn-stage.has-speaker .vn-character:not(.speaking),
.chat-view .vn-character.inactive,
body.stage-fullscreen .chat-view .vn-stage.has-speaker .vn-character:not(.speaking),
.chat-view .vn-character.speaking,
body.stage-fullscreen .chat-view .vn-character.speaking,
.sprite-preview-frame .vn-character,
.sprite-preview-frame .vn-character.speaking,
.sprite-preview-frame .vn-character.inactive {
  transform: translate3d(-50%, 0, 0) !important;
}
.chat-view .vn-standing,
body.stage-fullscreen .chat-view .vn-standing,
.sprite-preview-frame .vn-standing {
  position: absolute !important;
  left: calc(50% + var(--sprite-x, 0%)) !important;
  top: auto !important;
  right: auto !important;
  bottom: calc((100% * 28 / 720) - var(--sprite-y, 0%)) !important;
  width: auto !important;
  height: calc(100% * 545 / 720) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(-50%) scale(var(--sprite-scale-x, var(--sprite-scale, 1)), var(--sprite-scale-y, var(--sprite-scale, 1))) !important;
  transform-origin: center bottom !important;
  transition: filter 180ms ease, opacity 160ms ease !important;
  will-change: left, bottom, transform;
}
.chat-view .vn-character::before,
.sprite-preview-frame .vn-character::before {
  width: 34% !important;
  max-width: 620px;
}
.chat-view .vn-nameplate,
.sprite-preview-frame .vn-nameplate {
  display: none !important;
}

#detailImageDragFrame .tryva-detail-media,
#detailImageDragFrame > img,
#detailImageDragFrame > video {
  will-change: transform;
  transition: opacity 120ms ease !important;
}
html body .card-image-editor-modal #cropDragFrame .crop-card-inner > img.tryva-card-cover-media,
html body .card-image-editor-modal #cropDragFrame .crop-card-inner > video.tryva-card-cover-media {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-card-cover-width, 100%) !important;
  height: var(--tryva-card-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-card-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
  transition: none !important;
}

/* V5.22.0: keep the real card's logical canvas intact inside the compact preview.
   Tablet/phone card-grid rules use width:100%, which otherwise collapses inside
   the scaled max-content preview wrapper. Only the wizard preview is fixed. */
.character-wizard #wizardLibraryCardPreview .tryva-card-preview-context,
.character-wizard #wizardLibraryCardPreview .character-tile {
  width: 248px !important;
  min-width: 248px !important;
  max-width: 248px !important;
}
.character-wizard #wizardLibraryCardPreview .character-tile {
  flex: 0 0 248px !important;
}


/* V5.23.0: one real detail surface for actual view, edit modal and creation wizard. */
.tryva-detail-preview-context,
.character-wizard #wizardDetailPreview,
.simple-detail-live-preview {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.character-wizard #wizardLibraryCardPreview {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
.character-wizard .cw-real-preview-section,
.character-wizard .cw-real-preview-section.wide {
  background: transparent !important;
}
.character-wizard #wizardDetailPreview,
.character-wizard #wizardLibraryCardPreview {
  max-width: 100% !important;
  min-width: 0 !important;
}


#detailImageDragFrame{
  pointer-events: auto !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
}
#detailImageDragFrame.dragging{
  cursor: grabbing !important;
  outline: 2px solid rgba(171,108,255,.72) !important;
  outline-offset: -2px !important;
}
#detailImageDragFrame::before,
#detailImageDragFrame::after,
#detailImageDragFrame .detail-quote-card{
  pointer-events: none !important;
}
/* The preview host ends exactly at the rendered card/detail edge, so no false
   black area can be mistaken for movable image space. */
.character-wizard .cw-real-preview-grid {
  align-items: start !important;
}
.character-wizard #wizardLibraryCardPreview,
.character-wizard #wizardDetailPreview {
  justify-self: center !important;
}

/* Restored neutral in-game full-body composition. Custom saved layouts remain unchanged. */
.chat-view .vn-standing,
body.stage-fullscreen .chat-view .vn-standing,
.sprite-preview-frame .vn-standing {
  transition: filter 180ms ease, opacity 160ms ease !important;
}
/* V5.34.72.21: character, world and scenario creation use one canonical
   detail-crop surface. This selector deliberately outranks the dynamically
   cloned public-detail rules that set transform:none on ordinary detail images. */
html body .tryva-shared-detail-media-surface
.tryva-detail-preview-clone.character-detail-view
.detail-art.tryva-shared-detail-crop-surface > img.tryva-detail-media.tryva-cover-media,
html body .tryva-shared-detail-media-surface
.tryva-detail-preview-clone.character-detail-view
.detail-art.tryva-shared-detail-crop-surface > video.tryva-detail-media.tryva-cover-media,
html body .tryva-shared-detail-media-surface
.detail-art.tryva-shared-detail-crop-surface > img.tryva-detail-media.tryva-cover-media,
html body .tryva-shared-detail-media-surface
.detail-art.tryva-shared-detail-crop-surface > video.tryva-detail-media.tryva-cover-media {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: var(--tryva-cover-width, 100%) !important;
  height: var(--tryva-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
  transition: opacity 120ms ease !important;
  will-change: transform;
  pointer-events: none !important;
  user-select: none !important;
}

/* The compact previews themselves define the visible boundary. Do not draw a
   second dark canvas behind them, because it looks like additional movable
   image space even though it is not part of either real surface. */
.character-wizard .cw-stage-preview .cw-real-preview-grid {
  gap: 24px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.character-wizard .cw-stage-preview .cw-real-preview-section,
.character-wizard .cw-stage-preview .cw-real-preview-section.wide {
  padding: 0 !important;
  overflow: visible !important;
}
.character-wizard .cw-stage-preview .cw-real-preview-section.wide {
  border-left: 0 !important;
}
@media (max-width: 640px) {
  .character-wizard .cw-stage-preview .cw-real-preview-grid {
    gap: 18px !important;
  }
  .character-wizard .cw-stage-preview .cw-real-preview-section.wide {
    padding-top: 0 !important;
    border-top: 0 !important;
  }
}

/* v5.26 completed batch: the real dialogue stage is the sprite editor. */
.integrated-runtime-editor {
  display: grid;
  gap: 16px;
}
.integrated-runtime-controls {
  margin-top: 0;
}
.editable-runtime-preview .chat-sprite-runtime-iframe {
  pointer-events: auto;
}
.integrated-runtime-modal-body .chat-sprite-editor-main {
  display: grid;
  gap: 14px;
}
.integrated-runtime-modal-body .chat-sprite-editor-side {
  align-self: start;
}
body.runtime-sprite-editor-active .chat-panel,
body.runtime-sprite-editor-active .vn-stage,
body.runtime-sprite-editor-active .vn-character-layer,
body.runtime-sprite-editor-active .vn-character,
body.runtime-sprite-editor-active .vn-standing {
  pointer-events: auto !important;
}
.runtime-sprite-editor-stage {
  touch-action: none;
  cursor: grab;
}
.runtime-sprite-editor-stage.dragging {
  cursor: grabbing;
}
.runtime-sprite-editor-stage .chat-sprite-guide-overlay {
  z-index: 40;
  pointer-events: none;
}
.runtime-sprite-edit-box {
  position: absolute;
  z-index: 60;
  border: 2px solid rgba(177, 136, 255, 0.92);
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(12, 13, 21, 0.72), 0 0 28px rgba(126, 76, 230, 0.22);
  pointer-events: none;
  touch-action: none;
}
.runtime-sprite-edit-box.hidden {
  display: none !important;
}
.runtime-sprite-move-surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.runtime-sprite-editor-stage.dragging .runtime-sprite-move-surface {
  cursor: grabbing;
}
.runtime-sprite-edit-box .chat-sprite-resize-handle {
  z-index: 3;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}
.runtime-sprite-edit-box .chat-sprite-resize-handle.right {
  transform: translate(50%, -50%);
}
.runtime-sprite-edit-box .chat-sprite-resize-handle.bottom {
  bottom: 0;
  transform: translate(-50%, 50%);
  cursor: ns-resize !important;
}
.runtime-sprite-edit-box .chat-sprite-resize-handle.left,
.runtime-sprite-edit-box .chat-sprite-resize-handle.right {
  top: 50%;
}
.runtime-sprite-edit-box .chat-sprite-resize-handle.top {
  top: 0;
}
@media (max-width: 760px) {
  .integrated-runtime-editor { gap: 12px; }
  .editable-runtime-preview { border-radius: 13px; }
}

/* V5.26.1: explicit scene continuation without storing an empty user message. */
.user-form {
  grid-template-columns: 88px 96px minmax(0, 1fr) 48px;
}

.next-progress-btn {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(139, 94, 255, 0.34);
  border-radius: 999px;
  background: rgba(115, 78, 214, 0.12);
  color: #e8deff;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, opacity .18s ease;
}
.next-progress-btn:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(167, 126, 255, 0.68);
  background: rgba(115, 78, 214, 0.24);
}
.next-progress-btn:disabled {
  cursor: default;
  opacity: .42;
}
.next-progress-btn[aria-busy="true"] {
  cursor: wait;
}

@media (max-width: 720px) {
  .user-form {
    grid-template-columns: auto auto minmax(0, 1fr) 48px !important;
    gap: 6px !important;
    padding-inline: 8px !important;
  }
  .next-progress-btn {
    min-width: 0;
    padding-inline: 10px;
    font-size: 12px;
  }
}

/* V5.26.4: remote contact controls for offscreen characters. */
.user-form {
  position: relative;
  grid-template-columns: 88px 96px 70px minmax(0, 1fr) 48px;
}

.contact-btn {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(108, 192, 255, 0.3);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(75, 154, 220, 0.17), rgba(54, 111, 176, 0.1));
  color: #d9efff;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}
.contact-btn:not(:disabled):hover,
.contact-btn[aria-expanded="true"] {
  transform: translateY(-1px);
  border-color: rgba(119, 207, 255, 0.66);
  background: linear-gradient(180deg, rgba(75, 154, 220, 0.3), rgba(54, 111, 176, 0.18));
}
.contact-btn:disabled {
  cursor: default;
  opacity: .42;
}

.contact-menu {
  position: absolute;
  z-index: 80;
  left: 112px;
  bottom: calc(100% + 10px);
  width: min(360px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid rgba(157, 139, 221, 0.3);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(20, 22, 36, 0.98), rgba(10, 12, 22, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  animation: contact-menu-rise .18s ease-out both;
}
.contact-menu::after {
  content: "";
  position: absolute;
  left: 142px;
  bottom: -7px;
  width: 13px;
  height: 13px;
  border-right: 1px solid rgba(157, 139, 221, 0.3);
  border-bottom: 1px solid rgba(157, 139, 221, 0.3);
  background: #0d0f1b;
  transform: rotate(45deg);
}
@keyframes contact-menu-rise {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.contact-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.contact-menu-head > div {
  display: grid;
  gap: 3px;
}
.contact-menu-head strong {
  color: #f5f1ff;
  font-size: 15px;
}
.contact-menu-head span {
  color: rgba(220, 215, 239, 0.58);
  font-size: 12px;
}
.contact-menu-head > button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(238, 234, 250, 0.72);
  font-size: 20px;
  line-height: 1;
}
.contact-menu-head > button:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
.contact-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.contact-mode-options button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(236, 232, 248, 0.74);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.contact-mode-options button span { font-size: 17px; }
.contact-mode-options button b { font-size: 13px; }
.contact-mode-options button:hover,
.contact-mode-options button.active {
  border-color: rgba(139, 104, 255, 0.56);
  background: rgba(116, 79, 224, 0.18);
  color: #f4efff;
}
.contact-character-list {
  display: grid;
  gap: 7px;
  max-height: 230px;
  overflow-y: auto;
}
.contact-character-list > p {
  margin: 0;
  padding: 13px 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(218, 212, 235, 0.56);
  font-size: 12px;
  text-align: center;
}
.contact-character-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 7px 10px 7px 7px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
  color: #f3efff;
  text-align: left;
}
.contact-character-option:hover {
  border-color: rgba(120, 195, 255, 0.38);
  background: rgba(78, 142, 202, 0.12);
}
.contact-character-avatar {
  display: block;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: #171924;
}
.contact-character-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-character-option > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.contact-character-option b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.contact-character-option small { color: rgba(215, 210, 233, 0.52); font-size: 11px; }
.contact-character-option i { color: rgba(215, 210, 233, 0.5); font-size: 20px; font-style: normal; }

@media (max-width: 720px) {
  .user-form {
    grid-template-columns: 54px 66px 50px minmax(0, 1fr) 44px !important;
  }
  .input-mode-btn,
  .next-progress-btn,
  .contact-btn {
    min-width: 0;
    padding-inline: 7px;
    font-size: 11px;
  }
  .contact-menu {
    right: 8px;
    left: 8px;
    width: auto;
  }
  .contact-menu::after { left: 132px; }
}

/* V5.29 relationship and fear summary */
.relationship-summary-block { gap: 12px; }
.relationship-summary-list { display: grid; gap: 10px; }
.relationship-summary-card {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 10px;
  background: rgba(24, 21, 39, 0.58);
}
.relationship-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.relationship-summary-head strong { color: #f4f0ff; font-size: 14px; }
.relationship-summary-head span { color: var(--muted); font-size: 11px; text-align: right; }
.relationship-metric-list { display: grid; gap: 7px; }
.relationship-metric-row {
  display: grid;
  grid-template-columns: 44px minmax(72px, 1fr) 38px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}
.relationship-metric-row strong { color: #ddd5ff; text-align: right; font-variant-numeric: tabular-nums; }
.relationship-metric-track {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.relationship-metric-track::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 1px;
  background: rgba(244, 240, 255, 0.72);
  transform: translateX(-0.5px);
  z-index: 2;
}
.relationship-metric-track i {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(128, 96, 255, 0.7), rgba(205, 176, 255, 0.92));
}
.relationship-metric-track i.negative {
  background: linear-gradient(90deg, rgba(205, 176, 255, 0.92), rgba(128, 96, 255, 0.7));
}

/* V5.30 composer: use the full remaining width unless the optional contact control is visible. */
.user-form {
  grid-template-columns: 88px minmax(260px, 1fr) 48px;
}
.user-form.has-contact {
  grid-template-columns: 88px 70px minmax(260px, 1fr) 48px;
}
.user-form input,
.user-form textarea { width: 100%; min-width: 0; }
@media (max-width: 720px) {
  .user-form { grid-template-columns: 54px minmax(0, 1fr) 44px !important; }
  .user-form.has-contact { grid-template-columns: 54px 50px minmax(0, 1fr) 44px !important; }
}

/* V5.29 selected character media parity */
.selected-pill,
.detail-selected-chip {
  overflow: hidden;
}
.selected-pill-media,
.selected-preview-media {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 8px 0 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  overflow: hidden !important;
}
.detail-selected-chip .selected-preview-media {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin-right: 0 !important;
  border-radius: 12px !important;
}

/* v5.29.0: quick-edit card typography is the single source of truth.
   Text geometry only. Card/media geometry intentionally remains untouched. */
.character-tile .tile-body,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-body {
  position: absolute !important;
  left: 15px !important;
  right: auto !important;
  bottom: 15px !important;
  width: 216px !important;
  padding: 0 !important;
  z-index: 5 !important;
  background: transparent !important;
}
.character-tile:hover .tile-body,
.character-tile:focus-visible .tile-body,
.character-tile.selected .tile-body,
.character-wizard #wizardLibraryCardPreview .character-tile:hover .tile-body,
.character-wizard #wizardLibraryCardPreview .character-tile.selected .tile-body {
  width: 286px !important;
}
.character-tile .tile-title,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-title {
  display: block !important;
  min-height: 31px !important;
  align-items: initial !important;
}
.character-tile .tile-title h3,
.character-tile.name-medium .tile-title h3,
.character-tile.name-long .tile-title h3,
.character-tile.name-xlong .tile-title h3,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-title h3 {
  margin: 0 !important;
  max-width: 100% !important;
  font-size: 27px !important;
  line-height: .96 !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.character-tile .tile-meta,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-meta {
  height: 17px !important;
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  line-height: 17px !important;
  font-weight: 620 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.character-tile .tile-summary,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-summary {
  width: 216px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 14px 0 10px !important;
  font-size: 12.5px !important;
  line-height: 18px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.character-tile:hover .tile-summary,
.character-tile:focus-visible .tile-summary,
.character-tile.selected .tile-summary,
.character-wizard #wizardLibraryCardPreview .character-tile:hover .tile-summary,
.character-wizard #wizardLibraryCardPreview .character-tile.selected .tile-summary {
  width: 286px !important;
}
.character-tile .tile-tags,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-tags {
  width: 216px !important;
}
.character-tile:hover .tile-tags,
.character-tile:focus-visible .tile-tags,
.character-tile.selected .tile-tags,
.character-wizard #wizardLibraryCardPreview .character-tile:hover .tile-tags,
.character-wizard #wizardLibraryCardPreview .character-tile.selected .tile-tags {
  width: 286px !important;
}

/* v5.30.1: restore the proven v5.26 full-body placement editor.
   The modal keeps its dedicated visible placement board; the live stage is only
   the preview surface inside that board, never a replacement for the editor UI. */

/* V5.30.0: stable auto-growing composer without changing the established visual language. */
.user-form { align-items: end; }
.user-form textarea#userInput {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-height: 140px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(13, 15, 27, 0.88);
  color: inherit;
  font: inherit;
  line-height: 1.45;
  resize: none;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: thin;
  outline: none;
}
.user-form textarea#userInput:focus {
  border-color: rgba(157, 116, 255, 0.58);
  box-shadow: 0 0 0 3px rgba(119, 76, 224, 0.12);
}
.user-form textarea#userInput::placeholder { color: rgba(220, 215, 239, 0.45); }
.room-input-locked textarea#userInput { cursor: wait !important; background: rgba(18, 18, 26, 0.72) !important; }

/* v210 · standard OOC composer affordance */
.user-form .composer-star-btn {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  border: 1px solid var(--tryva-line) !important;
  border-radius: 50% !important;
  background: var(--tryva-surface-2) !important;
  color: #f1ecff !important;
  font: 700 22px/1 system-ui, sans-serif !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2) !important;
}
.user-form .composer-star-btn:hover:not(:disabled),
.user-form .composer-star-btn:focus-visible {
  border-color: rgba(139, 109, 255, 0.82) !important;
  background: rgba(139, 109, 255, 0.18) !important;
  outline: none !important;
}
.user-form .composer-star-btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.42 !important;
}
@media (max-width: 720px) {
  .user-form textarea#userInput { min-height: 44px; padding: 11px 13px; border-radius: 14px; }
}

/* v5.31.0: 131 typography parity. Fast-edit copy is the source of truth.
   The card frame and media geometry are deliberately untouched. */
.character-tile .tile-copy-stack,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-copy-stack {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.96), 0 0 3px rgba(0,0,0,.9) !important;
  pointer-events: none !important;
}
.character-tile .tile-copy-stack .tile-title,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-copy-stack .tile-title {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.character-tile .tile-copy-stack .tile-title h3,
.character-tile.name-medium .tile-copy-stack .tile-title h3,
.character-tile.name-long .tile-copy-stack .tile-title h3,
.character-tile.name-xlong .tile-copy-stack .tile-title h3,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-copy-stack .tile-title h3 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 27px !important;
  line-height: .96 !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.character-tile .tile-copy-stack .tile-meta,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-copy-stack .tile-meta {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  color: rgba(232,226,248,.74) !important;
  font-size: 12px !important;
  line-height: 17px !important;
  font-weight: 620 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.character-tile .tile-copy-stack .tile-summary,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-copy-stack .tile-summary {
  display: -webkit-box !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 14px 0 10px !important;
  padding: 0 !important;
  color: rgba(239,234,250,.74) !important;
  font-size: 12.5px !important;
  line-height: 18px !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.character-tile .tile-copy-stack .tile-tags,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-copy-stack .tile-tags {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
.character-tile .tile-body > .creator-byline,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-body > .creator-byline {
  position: absolute !important;
  left: 0 !important;
  bottom: 145px !important;
  z-index: 7 !important;
  margin: 0 !important;
  max-width: 180px !important;
  pointer-events: auto !important;
}
.character-tile .tile-copy-stack .tile-actions,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-copy-stack .tile-actions {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 8 !important;
  pointer-events: auto !important;
}

/* v5.31.0: 132 direct, large, aspect-safe full-body placement boards. */
.direct-sprite-placement-host {
  position: relative;
  width: 100%;
  min-width: 0;
}
.direct-sprite-placement-board {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(135,93,255,.13), transparent 34%),
    linear-gradient(180deg, #0d101a 0%, #070910 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 22px 54px rgba(0,0,0,.34) !important;
  touch-action: none !important;
  cursor: grab !important;
}
.direct-sprite-placement-board.dragging { cursor: grabbing !important; }
.wizard-direct-sprite-host {
  height: clamp(520px, 60vw, 720px);
  min-height: 520px;
  margin-top: 14px;
}
.chat-sprite-editor-modal {
  width: min(1320px, calc(100vw - 36px)) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: auto !important;
}
.chat-sprite-editor-body.integrated-runtime-modal-body {
  grid-template-columns: minmax(0, 1fr) 230px !important;
  align-items: start !important;
}
.chat-sprite-editor-main { min-width: 0 !important; }
.chat-sprite-editor-main .direct-sprite-placement-host {
  height: min(72vh, 760px);
  min-height: 560px;
}
.chat-sprite-editor-side.compact {
  min-height: 0 !important;
  justify-content: flex-start !important;
  padding-top: 2px !important;
}
.chat-sprite-editor-tools {
  grid-template-columns: 1fr auto 1fr 1fr 1fr !important;
  align-items: center !important;
}
.chat-sprite-editor-tools button:last-child { grid-column: auto !important; }
.cw-sprite-ratio-lock.is-static {
  cursor: default !important;
  color: rgba(222,214,242,.78) !important;
  border-color: rgba(142,104,255,.22) !important;
  background: rgba(105,69,187,.11) !important;
}
.chat-sprite-resize-handle.nw,
.chat-sprite-resize-handle.ne,
.chat-sprite-resize-handle.sw,
.chat-sprite-resize-handle.se {
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  cursor: nwse-resize !important;
}
.chat-sprite-resize-handle.nw { left: 0; top: 0; transform: translate(-50%,-50%) scale(calc(1 / var(--sprite-total-scale-x, 1)), calc(1 / var(--sprite-total-scale-y, 1))); }
.chat-sprite-resize-handle.ne { right: 0; top: 0; transform: translate(50%,-50%) scale(calc(1 / var(--sprite-total-scale-x, 1)), calc(1 / var(--sprite-total-scale-y, 1))); cursor: nesw-resize !important; }
.chat-sprite-resize-handle.sw { left: 0; bottom: var(--sprite-visible-bottom-gap, 0px); transform: translate(-50%,50%) scale(calc(1 / var(--sprite-total-scale-x, 1)), calc(1 / var(--sprite-total-scale-y, 1))); cursor: nesw-resize !important; }
.chat-sprite-resize-handle.se { right: 0; bottom: var(--sprite-visible-bottom-gap, 0px); transform: translate(50%,50%) scale(calc(1 / var(--sprite-total-scale-x, 1)), calc(1 / var(--sprite-total-scale-y, 1))); }
.direct-sprite-placement-board .chat-sprite-transform-box {
  cursor: grab;
}
.direct-sprite-placement-board.resizing .chat-sprite-transform-box,
.direct-sprite-placement-board.dragging .chat-sprite-transform-box { transition: none !important; }
@media (max-width: 900px) {
  .chat-sprite-editor-body.integrated-runtime-modal-body { grid-template-columns: 1fr !important; }
  .chat-sprite-editor-main .direct-sprite-placement-host { height: min(64vh, 620px); min-height: 430px; }
  .wizard-direct-sprite-host { height: 520px; min-height: 460px; }
  .chat-sprite-editor-tools { grid-template-columns: 1fr auto 1fr !important; }
  .chat-sprite-editor-tools button:nth-of-type(3),
  .chat-sprite-editor-tools button:nth-of-type(4) { grid-column: auto !important; }
}

/* v5.31.0: narration and dialogue share one stable box geometry. */
.vn-dialogue-box.is-narration,
.vn-dialogue-box.is-streaming.is-narration {
  left: clamp(18px, 4vw, 58px);
  right: clamp(18px, 4vw, 58px);
  bottom: clamp(16px, 3.2vh, 34px);
  width: auto;
  min-height: 116px;
  padding: 26px 34px 24px;
  border-color: rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(110deg, rgba(12, 14, 23, 0.95), rgba(20, 17, 35, 0.88));
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.42);
  text-align: left;
  transform: none;
}
.vn-dialogue-box.is-narration .vn-presentation-text,
.vn-dialogue-box.is-streaming.is-narration .vn-presentation-text {
  text-align: left;
}
@media (max-width: 900px) {
  .vn-dialogue-box.is-narration,
  .vn-dialogue-box.is-streaming.is-narration {
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-height: 104px;
    padding: 24px 18px 22px;
    border-radius: 16px;
  }
}
.vn-dialogue-box.is-narration .speech-line,
.vn-dialogue-box.is-streaming.is-narration .vn-stream-text-content {
  white-space: pre-line;
}
/* 131 final specificity lock: copy rhythm only, never card/media geometry. */
.play-view #characterGrid .character-tile .tile-copy-stack,
.library-view .character-tile .tile-copy-stack,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-copy-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}
.play-view #characterGrid .character-tile .tile-copy-stack .tile-title,
.library-view .character-tile .tile-copy-stack .tile-title,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-copy-stack .tile-title {
  flex: 0 0 26px !important;
  width: 100% !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.play-view #characterGrid .character-tile .tile-copy-stack .tile-meta,
.library-view .character-tile .tile-copy-stack .tile-meta,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-copy-stack .tile-meta {
  flex: 0 0 17px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
}
.play-view #characterGrid .character-tile .tile-copy-stack .tile-summary,
.library-view .character-tile .tile-copy-stack .tile-summary,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-copy-stack .tile-summary {
  flex: 0 0 36px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 14px 0 10px !important;
  padding: 0 !important;
}
.play-view #characterGrid .character-tile .tile-copy-stack .tile-tags,
.library-view .character-tile .tile-copy-stack .tile-tags,
.character-wizard #wizardLibraryCardPreview .character-tile .tile-copy-stack .tile-tags {
  flex: 0 0 24px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* v5.31.0: the streaming status is an overlay, never a layout row. */
.vn-dialogue-box.is-streaming .vn-streaming-label {
  position: absolute;
  right: 20px;
  bottom: 10px;
  margin: 0;
  pointer-events: none;
}

/* v5.32.0: edit the full-body media on the exact play-stage geometry. */
.wizard-runtime-sprite-host,
.editor-runtime-sprite-host {
  width: 100%;
  aspect-ratio: 1667 / 900;
  min-height: 430px;
}
.wizard-runtime-sprite-host { max-height: min(68vh, 720px); }
.editor-runtime-sprite-host { min-height: min(68vh, 720px); }
.chat-sprite-editor-main .editor-runtime-sprite-host { flex: 1 1 auto; }
body.sprite-preview-frame.stage-fullscreen:not(.story-presentation-preview-frame) .user-form,
body.sprite-preview-frame.stage-fullscreen:not(.story-presentation-preview-frame) .stage-reading-controls,
body.sprite-preview-frame.stage-fullscreen:not(.story-presentation-preview-frame) .stage-fullscreen-exit,
body.sprite-preview-frame.stage-fullscreen:not(.story-presentation-preview-frame) .selection-tray { display: none !important; }
body.sprite-preview-frame.stage-fullscreen .chat-panel { min-height: 100vh !important; }
body.sprite-preview-frame.stage-fullscreen .vn-stage-shell,
body.sprite-preview-frame.stage-fullscreen .vn-stage { height: 100vh !important; min-height: 100vh !important; }
.runtime-sprite-edit-box .chat-sprite-resize-handle.nw { left: -10px; top: -10px; }
.runtime-sprite-edit-box .chat-sprite-resize-handle.ne { right: -10px; top: -10px; }
.runtime-sprite-edit-box .chat-sprite-resize-handle.sw { left: -10px; bottom: -10px; }
.runtime-sprite-edit-box .chat-sprite-resize-handle.se { right: -10px; bottom: -10px; }
.runtime-sprite-edit-box .chat-sprite-resize-handle.nw,
.runtime-sprite-edit-box .chat-sprite-resize-handle.ne,
.runtime-sprite-edit-box .chat-sprite-resize-handle.sw,
.runtime-sprite-edit-box .chat-sprite-resize-handle.se {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
@media (max-width: 760px) {
  .wizard-runtime-sprite-host,
  .editor-runtime-sprite-host { min-height: 300px; }
}

/* =================================================================
   TRYVA v5.34.55 — Claude design implementation
   Visual-only integration. Existing IDs, media geometry and app logic retained.
================================================================= */
:root {
  --tryva-bg:#0b0a11;
  --tryva-sidebar:#100e17;
  --tryva-surface:#14121c;
  --tryva-surface-2:#16131f;
  --tryva-surface-3:#181522;
  --tryva-line:rgba(255,255,255,.06);
  --tryva-line-strong:rgba(255,255,255,.10);
  --tryva-text:#eceaf3;
  --tryva-soft:#cfc7e0;
  --tryva-muted:#8a8299;
  --tryva-dim:#6f6880;
  --tryva-accent:#8b6dff;
  --tryva-accent-2:#6a3fd6;
  --tryva-accent-soft:#cbbcff;
  --tryva-gradient:linear-gradient(100deg,#8b6dff,#6a3fd6);
  --tryva-sidebar-width:236px;
  --tryva-tray-height:74px;
}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0;background:var(--tryva-bg);color:var(--tryva-text);font-family:"Pretendard",system-ui,sans-serif}
body{overflow:hidden}
body::before{display:none!important}
button,input,textarea,select{font:inherit}
button{color:inherit}
.hidden{display:none!important}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* shell */
.app-shell{display:grid!important;grid-template-columns:var(--tryva-sidebar-width) minmax(0,1fr)!important;width:100%;height:100vh;min-height:0;background:var(--tryva-bg)!important}
.workspace{position:relative!important;min-width:0!important;min-height:0!important;height:100vh!important;overflow:hidden!important;background:var(--tryva-bg)!important;padding:0!important}
.view{width:100%;height:100%;min-height:0;overflow:auto;background:var(--tryva-bg)}
body.play-active .workspace,body.library-active .workspace,body.all-characters-active .workspace,body.recent-active .workspace{padding-bottom:var(--tryva-tray-height)!important}
body.detail-active .app-shell{display:grid!important;grid-template-columns:var(--tryva-sidebar-width) minmax(0,1fr)!important}
body.detail-active .nav-shell{display:flex!important}

/* sidebar */
.nav-shell{position:relative!important;inset:auto!important;width:var(--tryva-sidebar-width)!important;height:100vh!important;min-height:0!important;padding:22px 16px 16px!important;display:flex!important;flex-direction:column!important;gap:0!important;background:var(--tryva-sidebar)!important;border:0!important;border-right:1px solid var(--tryva-line)!important;border-radius:0!important;box-shadow:none!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:30}
.brand-mark{display:flex!important;align-items:center!important;gap:11px!important;width:100%!important;min-height:0!important;margin:0!important;padding:4px 8px 22px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--tryva-text)!important;text-align:left!important;cursor:pointer}
.brand-logo-box{display:flex!important;align-items:center!important;justify-content:center!important;width:42px!important;height:42px!important;min-width:42px!important;border-radius:0!important;overflow:visible!important;background:transparent!important;box-shadow:none!important}
.brand-logo-img{display:block;width:114%!important;height:114%!important;object-fit:contain!important;filter:drop-shadow(0 2px 8px rgba(0,0,0,.16))!important}
.brand-logo-fallback{display:none!important}
.brand-name,.tryva-brand-name{font-family:"Playfair Display",serif!important;font-size:23px!important;font-weight:600!important;line-height:1!important;letter-spacing:.14em!important;color:#fff!important}
#brandHomeBtn .tryva-brand-copy{display:flex!important;align-items:flex-end!important;gap:5px!important}
#brandHomeBtn .tryva-version-badge{font-family:"Pretendard",sans-serif!important;font-size:11px!important;font-weight:800!important;color:rgba(219,211,238,.72)!important;letter-spacing:.01em!important;margin-bottom:1px!important}
.nav-menu,.nav-utility{display:flex!important;flex-direction:column!important;gap:3px!important;margin:0!important;padding:0!important}
.nav-menu-secondary{margin-top:3px!important}
.nav-item,.nav-util{display:flex!important;align-items:center!important;gap:13px!important;width:100%!important;min-height:42px!important;margin:0!important;padding:10px 13px!important;border:0!important;border-radius:11px!important;background:transparent!important;color:#9a92ad!important;font-size:14.5px!important;font-weight:500!important;text-align:left!important;cursor:pointer!important;box-shadow:none!important}
.nav-item:hover,.nav-util:hover{background:rgba(255,255,255,.035)!important;color:#d8d2e4!important}
.nav-item.active{background:linear-gradient(100deg,rgba(124,92,255,.20),rgba(124,92,255,.05))!important;color:#fff!important;font-weight:600!important}
.nav-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:22px!important;min-width:22px!important;font-size:16px!important;color:inherit!important}
.nav-chevron{margin-left:auto;color:var(--tryva-dim)}
.nav-divider{height:1px!important;min-height:1px!important;margin:18px 6px!important;background:rgba(255,255,255,.06)!important;border:0!important}
.nav-spacer{flex:1 1 auto;min-height:16px}
.pro-upsell-card{display:block!important;margin:0 0 12px!important;padding:16px!important;border:1px solid rgba(124,92,255,.22)!important;border-radius:16px!important;background:linear-gradient(150deg,rgba(124,92,255,.18),rgba(90,48,168,.10))!important;box-shadow:none!important}
.pro-upsell-card.is-dormant{display:none!important}
.pro-upsell-title{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-size:14px;font-weight:700}.pro-upsell-icon{color:#e8c66a}.pro-upsell-desc{margin:0 0 12px!important;color:#a59cba!important;font-size:12px!important;line-height:1.5!important}.pro-upsell-btn{width:100%;padding:9px!important;border:0!important;border-radius:10px!important;background:var(--tryva-gradient)!important;color:#fff!important;font-size:13px!important;font-weight:600!important;cursor:pointer}
.sidebar-point-card{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;height:72px!important;min-height:72px!important;margin:0 0 12px!important;padding:0 16px!important;border:1px solid rgba(124,92,255,.22)!important;border-radius:16px!important;background:linear-gradient(150deg,rgba(124,92,255,.15),rgba(90,48,168,.08))!important;box-shadow:none!important}
.sidebar-point-label{color:#aaa2ba!important;font-size:12.5px!important;font-weight:600!important;letter-spacing:-.01em!important}
.sidebar-point-balance{color:#fff!important;font-size:18px!important;font-weight:800!important;line-height:1!important;letter-spacing:-.02em!important;font-variant-numeric:tabular-nums!important}

/* Point shop navigation and shell */
.nav-menu-point-store{margin:0!important}
.nav-menu-point-store .nav-icon{font-size:12px!important;font-weight:900!important}
.point-shop-view{width:min(100%,1040px);margin:0 auto;padding:52px 42px 90px}
.point-shop-head{margin:0 0 26px}
.point-shop-head>span{display:block;margin:0 0 7px;color:#8f83bd;font-size:11px;font-weight:800;letter-spacing:.16em}
.point-shop-head h1{margin:0;color:#f4f1fa;font-size:30px;font-weight:800;letter-spacing:-.04em}
.point-shop-balance-card{display:flex;align-items:center;justify-content:space-between;min-height:108px;padding:0 28px;border:1px solid rgba(124,92,255,.23);border-radius:20px;background:linear-gradient(145deg,rgba(124,92,255,.16),rgba(50,34,80,.12));box-shadow:0 18px 48px rgba(0,0,0,.16)}
.point-shop-balance-card span{color:#aaa2ba;font-size:14px;font-weight:650}
.point-shop-balance-card strong{color:#fff;font-size:28px;font-weight:850;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.point-shop-empty{display:flex;align-items:center;justify-content:center;min-height:180px;margin-top:18px;border:1px dashed rgba(255,255,255,.09);border-radius:20px;color:#716a80;font-size:13px;font-weight:600}
.point-admin-panel{margin-top:22px}
.point-admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 26px;border:1px solid rgba(137,105,255,.22);border-radius:20px;background:linear-gradient(150deg,rgba(95,68,166,.16),rgba(24,19,36,.74))}
.point-admin-head span,.point-admin-history-card header span{display:block;margin-bottom:5px;color:#9985e8;font-size:10px;font-weight:850;letter-spacing:.16em}
.point-admin-head h2,.point-admin-history-card h3{margin:0;color:#f7f4fc;letter-spacing:-.035em}
.point-admin-head h2{font-size:23px}.point-admin-head p{margin:7px 0 0;color:#91899e;font-size:12px;line-height:1.5}
.point-admin-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:16px;margin-top:16px}
.point-admin-card,.point-admin-history-card{border:1px solid rgba(255,255,255,.085);border-radius:20px;background:rgba(17,14,24,.74);box-shadow:0 16px 42px rgba(0,0,0,.14)}
.point-admin-card{padding:22px}.point-admin-field{display:grid;gap:8px}.point-admin-field>span{color:#b7afc3;font-size:12px;font-weight:750}
.point-admin-field input{width:100%;height:44px;padding:0 13px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(7,6,11,.62);color:#f5f1fb;font:inherit;font-size:13px;outline:none}
.point-admin-field input:focus{border-color:rgba(139,103,255,.65);box-shadow:0 0 0 3px rgba(124,92,255,.12)}
.point-admin-search-status{min-height:18px;margin:9px 2px;color:#746d7e;font-size:11px}
.point-admin-search-results{display:grid;gap:8px;max-height:330px;overflow:auto}
.point-admin-user-result{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid rgba(255,255,255,.075);border-radius:13px;background:rgba(255,255,255,.025);color:inherit;text-align:left;cursor:pointer}
.point-admin-user-result:hover,.point-admin-user-result.is-selected{border-color:rgba(137,105,255,.42);background:rgba(124,92,255,.09)}
.point-admin-user-avatar,.point-admin-target-avatar{display:grid;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(145deg,#6d54bd,#302245);color:#fff;font-weight:850;background-position:center;background-size:cover}
.point-admin-user-avatar{width:38px;height:38px;font-size:13px}.point-admin-user-copy{min-width:0}.point-admin-user-copy strong,.point-admin-user-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.point-admin-user-copy strong{color:#eee9f5;font-size:12px}.point-admin-user-copy small{margin-top:3px;color:#777080;font-size:10px}
.point-admin-user-balance{color:#c9bfdf;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.point-admin-target{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:18px;padding:14px;border:1px solid rgba(137,105,255,.2);border-radius:15px;background:rgba(124,92,255,.07)}
.point-admin-target.empty{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.point-admin-target-avatar{width:48px;height:48px;font-size:16px}.point-admin-target-copy{min-width:0}.point-admin-target-copy strong,.point-admin-target-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.point-admin-target-copy strong{color:#f1edf7;font-size:13px}.point-admin-target-copy small{margin-top:4px;color:#81798a;font-size:10.5px}
.point-admin-target-balance{text-align:right}.point-admin-target-balance span{display:block;color:#756d7e;font-size:9.5px}.point-admin-target-balance strong{display:block;margin-top:3px;color:#fff;font-size:17px;font-variant-numeric:tabular-nums}
.point-admin-quick-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:9px 0 16px}.point-admin-quick-amounts button{height:34px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.035);color:#9990a5;font-size:10.5px;font-weight:750;cursor:pointer}.point-admin-quick-amounts button:hover{border-color:rgba(137,105,255,.35);color:#d8d0e8}
.point-admin-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.point-admin-actions button{min-height:43px;border-radius:12px}.point-admin-operation-status{min-height:18px;margin:10px 2px 0;color:#81798b;font-size:11px}.point-admin-operation-status.is-error{color:#e48e99}.point-admin-operation-status.is-success{color:#91d4ab}
.point-admin-history-card{margin-top:16px;padding:20px 22px}.point-admin-history-card>header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px}.point-admin-history-card h3{font-size:17px}.point-admin-history{display:grid;gap:8px}.point-admin-history-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 12px;border:1px solid rgba(255,255,255,.065);border-radius:12px;background:rgba(255,255,255,.022)}
.point-admin-history-kind{display:grid;place-items:center;min-width:48px;height:26px;border-radius:999px;font-size:10px;font-weight:850}.point-admin-history-row.is-grant .point-admin-history-kind{background:rgba(69,172,112,.14);color:#91d4ab}.point-admin-history-row.is-revoke .point-admin-history-kind{background:rgba(208,82,101,.14);color:#e397a3}
.point-admin-history-copy{min-width:0}.point-admin-history-copy strong,.point-admin-history-copy small{display:block}.point-admin-history-copy strong{color:#ddd7e6;font-size:11.5px}.point-admin-history-copy small{margin-top:3px;color:#756e7d;font-size:9.8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.point-admin-history-amount{text-align:right}.point-admin-history-amount strong{display:block;color:#f2edf8;font-size:12px;font-variant-numeric:tabular-nums}.point-admin-history-amount small{display:block;margin-top:3px;color:#77707e;font-size:9.5px}.point-admin-empty-state{padding:20px;border:1px dashed rgba(255,255,255,.08);border-radius:13px;color:#716a79;font-size:11px;text-align:center}
@media (max-width:760px){.point-shop-view{padding:34px 18px 70px}.point-shop-head h1{font-size:25px}.point-shop-balance-card{min-height:92px;padding:0 20px}.point-shop-balance-card strong{font-size:23px}.point-admin-head{padding:20px;align-items:stretch;flex-direction:column}.point-admin-grid{grid-template-columns:1fr}.point-admin-card{padding:18px}.point-admin-quick-amounts{grid-template-columns:repeat(2,1fr)}.point-admin-target{grid-template-columns:44px minmax(0,1fr)}.point-admin-target-avatar{width:44px;height:44px}.point-admin-target-balance{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;text-align:left;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}.point-admin-target-balance strong{margin:0}.point-admin-history-row{grid-template-columns:auto minmax(0,1fr)}.point-admin-history-amount{grid-column:2;text-align:left;display:flex;gap:8px;align-items:center}.point-admin-history-amount small{margin:0}}
.account-card{display:flex!important;align-items:center!important;gap:11px!important;width:100%!important;min-height:58px!important;margin:0!important;padding:9px 8px!important;border:1px solid var(--tryva-line)!important;border-radius:13px!important;background:rgba(255,255,255,.03)!important;box-shadow:none!important;text-align:left!important;cursor:pointer}
.account-avatar{display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;min-width:38px!important;border-radius:11px!important;background-color:#7d5cc4!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;color:#fff!important;overflow:hidden!important}.account-avatar:not(.has-image){background-image:linear-gradient(140deg,#c8b6ff,#7d5cc4)!important}.account-avatar img{width:100%;height:100%;object-fit:cover}.account-copy{display:flex!important;flex:1!important;min-width:0!important;flex-direction:column!important}.account-copy strong{font-size:13.5px!important;color:#fff!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-copy small{font-size:11.5px!important;color:#7d7591!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-chevron{color:var(--tryva-dim)}
.sidebar-recent{display:none!important}
.mobile-nav-toggle,.mobile-nav-backdrop{display:none}

/* home */
.play-view{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.tryva-home-header{display:flex;align-items:center;gap:18px;flex:0 0 auto;padding:18px 26px}
.tryva-global-search{display:flex!important;align-items:center!important;gap:11px!important;flex:1 1 520px!important;max-width:760px!important;min-height:46px!important;margin:0!important;padding:12px 16px!important;border:1px solid var(--tryva-line)!important;border-radius:13px!important;background:var(--tryva-surface-2)!important;box-shadow:none!important}
.search-box span{color:var(--tryva-dim)}.search-box input{width:100%;min-width:0;border:0!important;outline:0!important;background:transparent!important;color:var(--tryva-soft)!important;font-size:14px!important}.search-box input::placeholder{color:#6f6880}.tryva-global-search kbd{padding:2px 7px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:transparent;color:var(--tryva-dim);font-size:11px;font-family:inherit}
.tryva-header-spacer{flex:1}.tryva-create-button{display:flex;align-items:center;gap:8px;padding:12px 20px;border:0;border-radius:12px;background:var(--tryva-gradient);box-shadow:0 8px 20px rgba(124,92,255,.3);color:#fff;font-size:14px;font-weight:600;cursor:pointer}.tryva-icon-button{width:44px;height:44px;border:1px solid var(--tryva-line);border-radius:12px;background:var(--tryva-surface-2);color:#9a92ad;font-size:16px;cursor:pointer}
.tryva-home-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;flex:1;min-height:0;padding:4px 26px 0}.tryva-home-main{min-width:0;overflow-y:auto;padding:0 0 28px}.tryva-welcome-copy h1{margin:8px 0 6px;font-size:27px;font-weight:800;letter-spacing:-.01em}.tryva-welcome-copy h1 span{color:#a98cff}.tryva-welcome-copy p{margin:0 0 20px;color:#8a8299;font-size:14.5px}
.tryva-featured-hero{position:relative;height:252px;margin-bottom:30px;border:1px solid var(--tryva-line);border-radius:20px;overflow:hidden;background:linear-gradient(110deg,#1a1426 0%,#241a3a 38%,#3a2b5e 60%,#5b3f86 100%);cursor:pointer}.tryva-featured-media{position:absolute;inset:0}.tryva-featured-hero-media{position:absolute!important;right:0!important;top:0!important;width:61%!important;height:100%!important;object-fit:cover!important;object-position:center 30%!important;transform:none!important}.tryva-featured-fallback{position:absolute;right:12%;top:50%;transform:translateY(-50%);font-size:110px;font-weight:800;color:rgba(255,255,255,.12)}.tryva-featured-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,10,18,.96) 25%,rgba(12,10,18,.72) 49%,rgba(12,10,18,.06) 79%),radial-gradient(120% 140% at 78% 30%,rgba(150,110,220,.38),transparent 55%)}.tryva-featured-copy{position:absolute;z-index:2;left:34px;top:28px;right:42%}.tryva-featured-copy>span{display:inline-block;margin-bottom:12px;padding:5px 12px;border-radius:8px;background:rgba(124,92,255,.28);color:#d6c6ff;font-size:11.5px;font-weight:700}.tryva-featured-copy h2{margin:0 0 10px;font-size:36px;line-height:1.05;font-weight:800;letter-spacing:-.01em}.tryva-featured-copy p{display:-webkit-box;max-width:470px;margin:0 0 16px;overflow:hidden;color:#c4bdd4;font-size:13.5px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2}.tryva-featured-copy button{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border:1px solid rgba(255,255,255,.18);border-radius:11px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);color:#fff;font-size:14px;font-weight:600;cursor:pointer}.tryva-featured-copy button:disabled{opacity:.45;cursor:default}.tryva-hero-dots{position:absolute;right:24px;bottom:20px;display:flex;gap:7px}.tryva-hero-dots i{width:7px;height:4px;border-radius:3px;background:rgba(255,255,255,.25)}.tryva-hero-dots i:first-child{width:22px;background:#a98cff}
.character-section,.play-rail-row{margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.section-head,.mini-rail-head{display:flex!important;align-items:center!important;justify-content:space-between!important;margin:0 0 16px!important;padding:0!important}.section-head h2,.mini-rail-head h2{margin:0!important;color:#fff!important;font-size:19px!important;font-weight:700!important}.section-head p{display:none!important}.section-more-button,.mini-rail-head button{border:0!important;background:transparent!important;color:#8a82a0!important;font-size:13px!important;cursor:pointer}
.character-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;margin:0 0 32px!important}
.character-tile{position:relative!important;display:block!important;width:auto!important;height:278px!important;min-width:0!important;margin:0!important;padding:0!important;border:1px solid var(--tryva-line)!important;border-radius:16px!important;overflow:hidden!important;background:#171622!important;box-shadow:none!important;cursor:pointer!important;isolation:isolate}
.character-tile:hover{transform:translateY(-2px)!important;border-color:rgba(124,92,255,.35)!important;box-shadow:0 16px 34px rgba(0,0,0,.28)!important}.character-tile .tile-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;border-radius:0!important;overflow:hidden!important;background:linear-gradient(160deg,#3a4a6b,#171622)!important}.character-tile .tile-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,9,15,.96) 100%);pointer-events:none}.character-tile .tile-media,.character-tile .tryva-card-cover-media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important}.character-tile .tile-body{position:absolute!important;z-index:3!important;left:0!important;right:0!important;bottom:0!important;display:block!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:14px!important;border:0!important;background:transparent!important;color:#fff!important}.character-tile .tile-copy-stack{display:block!important;width:100%!important;height:auto!important}.character-tile .tile-title{display:flex!important;align-items:center!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important}.character-tile .tile-title h3{max-width:calc(100% - 40px)!important;margin:0!important;color:#fff!important;font-size:17px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.character-tile .tile-actions{margin-left:auto}.character-tile .tile-meta{height:auto!important;min-height:0!important;margin:8px 42px 0 0!important;color:#8d85a0!important;font-size:11.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.character-tile .tile-summary{display:-webkit-box!important;width:auto!important;height:34px!important;min-height:0!important;margin:5px 0 8px!important;overflow:hidden!important;color:#b8b1c6!important;font-size:12px!important;line-height:1.42!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important}.character-tile .tile-tags,.character-tile .creator-byline{display:none!important}.tile-badge{position:absolute!important;z-index:4!important;left:12px!important;top:12px!important;padding:4px 10px!important;border:0!important;border-radius:7px!important;background:rgba(124,92,255,.32)!important;color:#d6c6ff!important;font-size:11px!important;font-weight:700!important}.tile-heart{position:absolute!important;z-index:5!important;right:12px!important;top:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:30px!important;padding:0!important;border:0!important;border-radius:50%!important;background:rgba(15,13,22,.62)!important;color:#fff!important;font-size:14px!important;cursor:pointer!important}.tile-heart.is-wishlisted{color:#d9caff!important;background:rgba(96,66,166,.72)!important}.tile-photo-edit{position:absolute!important;z-index:6!important;right:48px!important;top:12px!important;width:30px!important;height:30px!important;border:0!important;border-radius:50%!important;background:rgba(15,13,22,.62)!important;color:#fff!important}.add-card-button{position:absolute!important;right:14px!important;bottom:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:30px!important;min-width:30px!important;margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:var(--tryva-gradient)!important;color:#fff!important;box-shadow:none!important}.add-card-button.selected{background:rgba(255,255,255,.16)!important}.add-card-button .symbol{font-size:16px!important}
.tryva-story-section{margin-bottom:30px}.genre-rail{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin:0!important;padding:0!important;overflow:visible!important}.genre-rail button{position:relative!important;display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;min-height:70px!important;padding:12px 14px!important;border:1px solid var(--tryva-line)!important;border-radius:14px!important;background:var(--tryva-surface-2)!important;color:#fff!important;text-align:left!important;cursor:pointer!important}.genre-rail button>span{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:rgba(124,92,255,.13);font-size:20px}.genre-rail button strong{display:block;font-size:13.5px}.genre-rail button small{display:block;margin-left:auto;color:#8a82a0;font-size:10.5px}.genre-rail button:hover{border-color:rgba(124,92,255,.3)!important;background:#191624!important}
.play-rail-row{margin-top:0!important}.mini-rail-block{padding:0!important;border:0!important;background:transparent!important}.avatar-rail{display:flex!important;align-items:center!important;gap:10px!important;overflow-x:auto!important}.avatar-rail-item{display:flex!important;align-items:center!important;gap:10px!important;min-width:150px!important;padding:10px 14px!important;border:1px solid var(--tryva-line)!important;border-radius:13px!important;background:var(--tryva-surface-2)!important;color:#fff!important;text-align:left!important}.avatar-rail-image{width:36px!important;height:36px!important;min-width:36px!important;border-radius:50%!important;overflow:hidden!important}.avatar-rail-image img,.avatar-rail-image video{width:100%!important;height:100%!important;object-fit:cover!important}.avatar-rail-item strong{font-size:13.5px!important}
.tryva-home-rail{display:flex;min-height:0;padding:0 0 6px;overflow:hidden;flex-direction:column;gap:14px}.tryva-rail-card{padding:16px 18px;border:1px solid var(--tryva-line);border-radius:18px;background:var(--tryva-surface)}.tryva-rail-card>strong{display:block;margin-bottom:12px;font-size:15.5px}.tryva-recent-card{display:flex;flex:1 1 auto;min-height:170px;flex-direction:column}.tryva-rail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.tryva-rail-head strong{font-size:15.5px}.tryva-rail-head button{border:0;background:transparent;color:#8a82a0;font-size:12px;cursor:pointer}.tryva-home-recent-list{display:flex;min-height:0;overflow-y:auto;flex:1;flex-direction:column;gap:8px}.tryva-home-recent-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;width:100%;padding:5px 0;border:0;background:transparent;text-align:left;cursor:pointer}.tryva-home-recent-art{position:relative;display:block;width:38px;height:38px;border-radius:11px;overflow:hidden;background:#221d2e}.tryva-home-recent-art .recent-room-avatar{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important}.tryva-home-recent-art .recent-room-avatar:not(:first-child){display:none!important}.tryva-home-recent-art img,.tryva-home-recent-art video{width:100%!important;height:100%!important;object-fit:cover!important}.tryva-home-recent-copy{display:flex;min-width:0;flex-direction:column}.tryva-home-recent-copy strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.tryva-home-recent-copy small{overflow:hidden;color:#8a82a0;font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}.tryva-home-recent-item time{color:#7d7591;font-size:10.5px}.tryva-home-recent-empty{margin:auto;color:#7d7591;font-size:12px}.tryva-keywords{display:flex;flex-wrap:wrap;gap:9px}.tryva-keywords button{padding:7px 13px;border:1px solid rgba(124,92,255,.2);border-radius:9px;background:rgba(124,92,255,.12);color:#bdb3d4;font-size:12.5px;cursor:pointer}.tryva-guide-card,.tryva-create-card{position:relative;overflow:hidden}.tryva-guide-card{background:linear-gradient(150deg,rgba(124,92,255,.16),rgba(90,48,168,.06))}.tryva-guide-card strong,.tryva-create-card strong{margin-bottom:7px}.tryva-guide-card p,.tryva-create-card p{max-width:180px;margin:0 0 14px;color:#a59cba;font-size:12.5px;line-height:1.55}.tryva-guide-card button,.tryva-create-card button{position:relative;z-index:1;padding:9px 16px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.10);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer}.tryva-create-card button{border-color:rgba(124,92,255,.24);background:rgba(124,92,255,.16);color:#cbbcff}.tryva-create-card>span{position:absolute;right:18px;top:17px;color:#a98cff;font-size:29px;opacity:.45}

/* selection tray */
.selection-tray{position:fixed!important;z-index:60!important;left:var(--tryva-sidebar-width)!important;right:0!important;bottom:0!important;display:none!important;align-items:center!important;gap:16px!important;width:auto!important;height:var(--tryva-tray-height)!important;min-height:var(--tryva-tray-height)!important;margin:0!important;padding:0 26px!important;border:0!important;border-top:1px solid var(--tryva-line)!important;border-radius:0!important;background:var(--tryva-sidebar)!important;box-shadow:none!important}
body.play-active .selection-tray,body.library-active .selection-tray,body.all-characters-active .selection-tray,body.recent-active .selection-tray{display:flex!important}.selection-tray>div{display:flex!important;align-items:center!important;gap:16px!important;flex:1!important;min-width:0!important}.selection-tray>div>p{width:150px!important;margin:0!important;color:#9a92ad!important;font-size:13px!important}.selected-list{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important;overflow-x:auto!important}.selected-pill{display:flex!important;align-items:center!important;gap:8px!important;min-width:max-content!important;padding:7px 12px 7px 8px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:11px!important;background:#1a1726!important;color:#fff!important;font-size:13px!important}.selected-pill-media{width:28px!important;height:28px!important;border-radius:8px!important;object-fit:cover!important}.empty-selection{color:#6f6880!important;font-size:12px!important}.empty-slot{display:flex!important;align-items:center!important;justify-content:center!important;width:42px!important;height:42px!important;border:1px dashed rgba(255,255,255,.18)!important;border-radius:11px!important;color:#6f6880!important}.selection-tray .primary-button{min-width:190px!important;padding:14px 30px!important;border:0!important;border-radius:13px!important;background:var(--tryva-gradient)!important;box-shadow:0 8px 22px rgba(124,92,255,.34)!important;color:#fff!important;font-size:15px!important;font-weight:700!important}.selection-tray .primary-button:disabled{opacity:.4;box-shadow:none!important}

/* explore */
.all-characters-view{padding:0!important;overflow:hidden!important}.all-characters-head{display:flex!important;align-items:flex-start!important;gap:20px!important;margin:0!important;padding:22px 30px 8px!important;border:0!important;background:transparent!important}.all-characters-title-row{display:none!important}.all-character-search{display:flex!important;align-items:center!important;gap:12px!important;width:min(880px,100%)!important;max-width:none!important;min-height:50px!important;padding:14px 18px!important;border:1px solid rgba(124,92,255,.22)!important;border-radius:14px!important;background:var(--tryva-surface-2)!important}.all-character-search span{color:#a98cff!important;font-size:17px!important}.all-character-search input{font-size:15px!important}.all-character-toolbar{display:flex!important;align-items:center!important;gap:9px!important;margin:0!important;padding:10px 30px 14px!important;border:0!important;background:transparent!important;overflow-x:auto!important}.all-character-toolbar button,.library-toolbar button{padding:8px 16px!important;border:1px solid var(--tryva-line-soft)!important;border-radius:11px!important;background:var(--tryva-surface-2)!important;color:#bdb3d4!important;font-size:13px!important;white-space:nowrap!important}.all-character-toolbar button.active,.library-toolbar button.active{border-color:transparent!important;background:var(--tryva-gradient)!important;color:#fff!important}.all-character-grid{margin:0!important;padding:14px 30px 28px!important;}.catalog-card{position:relative!important;display:block!important;width:auto!important;height:236px!important;margin:0!important;padding:0!important;border:1px solid var(--tryva-line)!important;border-radius:15px!important;overflow:hidden!important;background:#15131e!important;box-shadow:none!important;cursor:pointer!important}.catalog-card:hover{transform:translateY(-2px)!important;border-color:rgba(124,92,255,.32)!important}.catalog-card-media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important}.catalog-card-media img,.catalog-card-media video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}.catalog-card-shade{position:absolute!important;inset:0!important;background:linear-gradient(180deg,transparent 38%,rgba(10,9,15,.96))!important}.catalog-card-badge{position:absolute!important;z-index:3!important;left:11px!important;top:11px!important;padding:3px 9px!important;border-radius:6px!important;background:rgba(124,92,255,.32)!important;color:#d6c6ff!important;font-size:10px!important;font-weight:700!important}.catalog-card-heart{position:absolute!important;z-index:4!important;right:11px!important;top:11px!important;display:flex!important;align-items:center!important;justify-content:center!important;width:29px!important;height:29px!important;border:0!important;border-radius:50%!important;background:rgba(15,13,22,.62)!important;color:#fff!important}.catalog-card-copy{position:absolute!important;z-index:3!important;left:0!important;right:0!important;bottom:0!important;padding:13px!important}.catalog-card-copy h3{margin:0!important;color:#fff!important;font-size:15px!important}.catalog-card-copy p{margin:4px 0 7px!important;overflow:hidden!important;color:#aaa3bb!important;font-size:11.5px!important;line-height:1.4!important;text-overflow:ellipsis!important;white-space:nowrap!important}.catalog-card-tags,.catalog-card-copy .creator-byline{display:none!important}.catalog-card-hover{position:absolute!important;z-index:5!important;inset:auto 0 0!important;display:none!important;padding:13px!important;background:rgba(12,10,18,.94)!important}.catalog-card:hover .catalog-card-hover{display:block!important}.catalog-card-hover p{display:-webkit-box;margin:0 0 10px;overflow:hidden;color:#c4bdd4;font-size:11.5px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:2}.catalog-card-hover>div{display:flex;gap:8px}.catalog-card-detail{flex:1;padding:7px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.07);color:#fff;font-size:11px}.catalog-card-add{width:31px;border:0;border-radius:8px;background:var(--tryva-gradient);color:#fff}.all-character-empty{padding:40px;color:#8a82a0;text-align:center}

/* library */
.library-view{padding:0!important;overflow:hidden!important}.library-view>.page-head{display:flex!important;align-items:flex-start!important;margin:0!important;padding:26px 32px 0!important;border:0!important;background:transparent!important}.library-view>.page-head h1{margin:0 0 4px!important;color:#fff!important;font-size:26px!important;font-weight:800!important}.library-view>.page-head p{margin:0 0 18px!important;color:#8a82a0!important;font-size:14px!important}.library-view>.page-head .ghost-button{margin-left:auto;padding:10px 16px;border:1px solid rgba(124,92,255,.24);border-radius:11px;background:rgba(124,92,255,.13);color:#cbbcff}.library-toolbar{display:flex!important;align-items:center!important;gap:6px!important;margin:0 32px!important;padding:0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;background:transparent!important}.library-toolbar button{margin-right:12px!important;padding:11px 4px!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important;color:#8a82a0!important;font-size:14px!important}.library-toolbar button.active{border-bottom-color:#8b6dff!important;background:transparent!important;color:#fff!important}.library-grid{margin:0!important;padding:22px 32px 28px!important;}.create-card{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:12px!important;height:282px!important;border:1.5px dashed rgba(124,92,255,.4)!important;border-radius:16px!important;background:rgba(124,92,255,.06)!important;color:#cbbcff!important}.create-card span{display:flex!important;align-items:center!important;justify-content:center!important;width:54px!important;height:54px!important;border-radius:16px!important;background:var(--tryva-gradient)!important;box-shadow:0 8px 20px rgba(124,92,255,.34)!important;color:#fff!important;font-size:26px!important}.create-card strong{font-size:15px!important}.library-empty{padding:30px;color:#8a82a0;text-align:center}

/* recent conversations */
.recent-conversations-view{padding:0!important;overflow:hidden!important}.recent-page-head{display:flex;align-items:center;gap:24px;padding:32px 34px 18px}.recent-page-head>div{flex:1}.recent-page-head h1{margin:0 0 5px;font-size:27px}.recent-page-head p{margin:0;color:#8a82a0;font-size:14px}.recent-search{display:flex!important;align-items:center!important;gap:10px!important;width:390px!important;padding:12px 15px!important;border:1px solid var(--tryva-line)!important;border-radius:13px!important;background:var(--tryva-surface-2)!important}.recent-filter-row{display:flex;gap:8px;padding:0 34px 16px;border-bottom:1px solid var(--tryva-line)}.recent-filter-row button{padding:8px 15px;border:1px solid var(--tryva-line);border-radius:10px;background:var(--tryva-surface-2);color:#9a92ad}.recent-filter-row button.active{border-color:rgba(124,92,255,.28);background:rgba(124,92,255,.14);color:#fff}.recent-page-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-content:start!important;gap:14px!important;height:calc(100% - 142px)!important;padding:22px 34px 30px!important;overflow-y:auto!important}.recent-page-list .sidebar-recent-item:not(.hidden){position:relative!important;display:block!important;min-height:128px!important;padding:0!important;border:1px solid var(--tryva-line)!important;border-radius:16px!important;background:var(--tryva-surface)!important;overflow:hidden!important}.recent-page-list .sidebar-recent-open{display:flex!important;align-items:center!important;gap:14px!important;width:100%!important;height:100%!important;min-height:128px!important;padding:18px!important;border:0!important;background:transparent!important;text-align:left!important}.recent-page-list .recent-room-art{position:relative!important;width:70px!important;height:86px!important;min-width:70px!important;border-radius:13px!important;overflow:hidden!important;background:#221d2e!important}.recent-page-list .recent-room-avatar{position:absolute!important;width:52px!important;height:70px!important;border:2px solid #14121c!important;border-radius:11px!important;overflow:hidden!important}.recent-page-list .recent-room-avatar.avatar-1{left:0!important;top:8px!important}.recent-page-list .recent-room-avatar.avatar-2{right:0!important;bottom:0!important}.recent-page-list .recent-room-avatar.avatar-3{display:none!important}.recent-page-list .recent-room-media{width:100%!important;height:100%!important;object-fit:cover!important}.recent-page-list .recent-room-copy{display:flex!important;min-width:0!important;flex-direction:column!important;gap:6px!important}.recent-page-list .recent-room-copy strong{font-size:15px!important}.recent-page-list .recent-room-copy small{color:#8a82a0!important;font-size:12px!important}.recent-page-list .sidebar-recent-delete{position:absolute!important;right:10px!important;top:10px!important;width:28px!important;height:28px!important;border:0!important;border-radius:9px!important;background:rgba(255,255,255,.05)!important;color:#8a82a0!important}.sidebar-recent-empty{grid-column:1/-1;padding:60px;color:#8a82a0;text-align:center}

/* Retired public-detail prototype.
   Kept outside the active cascade while old preview snapshots are phased out;
   styles-detail-dialog.css is the sole public-detail layout owner. */
@media (min-width: 999999px) {
/* detail */
.character-detail-view{position:relative!important;display:block!important;padding:0!important;overflow:hidden!important;background:#0b0a11!important}.character-detail-view.hidden{display:none!important}.detail-hero{display:grid!important;grid-template-columns:minmax(0,1fr) 640px!important;width:100%!important;height:100vh!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#0b0a11!important;box-shadow:none!important;overflow:hidden!important}.detail-art{position:relative!important;grid-column:1!important;grid-row:1!important;width:auto!important;height:100%!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;background:linear-gradient(165deg,#3a4a6b 0%,#2a2440 45%,#14111d 100%)!important;overflow:hidden!important}.detail-art::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(10,9,15,.34) 0%,transparent 24%,transparent 50%,rgba(10,9,15,.96) 100%);pointer-events:none}.tryva-detail-media{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important}.detail-copy{grid-column:2!important;grid-row:1!important;width:auto!important;height:100%!important;min-width:0!important;margin:0!important;padding:34px 36px 120px!important;border:0!important;border-left:1px solid var(--tryva-line)!important;border-radius:0!important;background:var(--tryva-sidebar)!important;overflow-y:auto!important}.detail-badge{display:inline-block!important;margin:0 0 12px!important;padding:5px 12px!important;border:0!important;border-radius:8px!important;background:rgba(124,92,255,.3)!important;color:#d6c6ff!important;font-size:12px!important;font-weight:700!important}.detail-copy h1{margin:0 0 8px!important;color:#fff!important;font-size:34px!important;font-weight:800!important;letter-spacing:-.02em!important}.detail-copy>p#detailMeta{margin:0 0 20px!important;color:#9a92ad!important;font-size:14px!important}.creator-detail-panel{display:flex!important;align-items:center!important;gap:11px!important;width:100%!important;margin:0 0 22px!important;padding:12px 14px!important;border:1px solid var(--tryva-line)!important;border-radius:14px!important;background:var(--tryva-surface-3)!important;color:#fff!important}.creator-detail-avatar{width:42px!important;height:42px!important;border-radius:50%!important}.creator-detail-panel small{color:#8a82a0!important}.detail-copy blockquote{margin:0 0 22px!important;padding:14px 16px!important;border:1px solid var(--tryva-line)!important;border-radius:4px 16px 16px 16px!important;background:var(--tryva-surface-3)!important;color:#cfc7e0!important;font-size:13.5px!important;line-height:1.65!important}.detail-summary-shell{margin:0 0 24px!important;padding:0!important;border:0!important;background:transparent!important;color:#bdb6cc!important;font-size:14px!important;line-height:1.7!important}.detail-copy .tile-tags{display:flex!important;flex-wrap:wrap!important;gap:9px!important;height:auto!important;margin:0 0 26px!important}.detail-copy .tag-chip{padding:7px 14px!important;border:1px solid rgba(124,92,255,.2)!important;border-radius:10px!important;background:rgba(124,92,255,.12)!important;color:#bdb3d4!important;font-size:13px!important}.detail-stats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important;margin:0 0 26px!important}.detail-stats>span{display:flex!important;align-items:flex-start!important;flex-direction:column!important;padding:15px 16px!important;border:1px solid var(--tryva-line)!important;border-radius:14px!important;background:var(--tryva-surface-3)!important}.detail-stats strong{font-size:22px!important}.detail-stats small{margin-top:3px;color:#8a82a0!important;font-size:12px!important}.detail-safe-note{display:none!important}.detail-actions{position:absolute!important;z-index:15!important;right:0!important;bottom:0!important;display:grid!important;grid-template-columns:54px 1fr 1.2fr!important;gap:12px!important;width:640px!important;padding:18px 36px 22px!important;border-top:1px solid var(--tryva-line)!important;background:var(--tryva-sidebar)!important}.detail-actions button{min-width:0!important;height:54px!important;border-radius:14px!important}.detail-preview-button{padding:0!important;border:1px solid var(--tryva-line)!important;background:#1a1726!important}.detail-preview-button-copy,.detail-preview-button-arrow{display:none!important}.detail-preview-button-icon{margin:auto!important}.detail-actions .primary-button{border:0!important;background:var(--tryva-gradient)!important;color:#fff!important}.detail-start-button{box-shadow:0 10px 26px rgba(124,92,255,.34)!important}.detail-owner-tools{position:absolute!important;z-index:22!important;right:26px!important;top:24px!important;display:flex!important;gap:8px!important}.detail-owner-tools button,.detail-danger-zone button{padding:9px 12px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:10px!important;background:rgba(15,13,22,.68)!important;color:#fff!important}.detail-danger-zone{position:absolute!important;z-index:22!important;left:26px!important;bottom:24px!important}.detail-media-edit-control{z-index:12!important}.detail-quote-card{position:absolute!important;z-index:5!important;left:40px!important;right:40px!important;bottom:38px!important;max-width:620px!important;padding:14px 18px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:14px!important;background:rgba(15,13,22,.58)!important;backdrop-filter:blur(8px)!important}.related-section{display:none!important}
}

/* create wizard */
.character-wizard{display:flex!important;flex-direction:column!important;padding:0!important;overflow:hidden!important;background:var(--tryva-bg)!important}.cw-page-head{display:flex!important;align-items:center!important;gap:20px!important;min-height:80px!important;margin:0!important;padding:18px 28px!important;border:0!important;border-bottom:1px solid var(--tryva-line)!important;background:var(--tryva-sidebar)!important}.cw-page-head h1{margin:0!important;font-size:21px!important}.cw-page-head p{margin:3px 0 0!important;color:#8a82a0!important;font-size:12px!important}.cw-page-head .secondary-button{border:1px solid var(--tryva-line)!important;border-radius:11px!important;background:var(--tryva-surface-2)!important;color:#cfc7e0!important}.cw-progress{margin-left:auto!important}.cw-main{display:grid!important;grid-template-columns:minmax(0,1fr) 380px!important;gap:0!important;flex:1!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}.cw-step-panel{height:100%!important;min-height:0!important;padding:28px 34px 110px!important;overflow-y:auto!important;background:var(--tryva-bg)!important}.cw-panel-head{margin-bottom:24px!important}.cw-panel-head h2{font-size:23px!important}.cw-panel-head p{color:#8a82a0!important}.cw-field-list,.cw-image-card,.cw-samples-card,.cw-info-box,.cw-public-settings-card,.creator-attribution-card{border:1px solid var(--tryva-line)!important;border-radius:16px!important;background:var(--tryva-surface)!important;box-shadow:none!important}.cw-field-list{padding:20px!important}.cw-field-list label>span,.cw-image-card h3{color:#eceaf3!important}.cw-field-list input,.cw-field-list textarea,.cw-field-list select,.cw-samples-card textarea{border:1px solid var(--tryva-line)!important;border-radius:11px!important;background:var(--tryva-surface-2)!important;color:#eceaf3!important}.cw-preview-panel{position:relative!important;right:auto!important;top:auto!important;width:auto!important;height:100%!important;max-height:none!important;margin:0!important;padding:24px!important;border:0!important;border-left:1px solid var(--tryva-line)!important;border-radius:0!important;background:var(--tryva-sidebar)!important;overflow-y:auto!important}.cw-preview-head h2{font-size:16px!important}.cw-preview-hero,.cw-preview-section,.cw-status-box{border:1px solid var(--tryva-line)!important;border-radius:14px!important;background:var(--tryva-surface-3)!important}.cw-footer{position:absolute!important;z-index:20!important;left:0!important;right:380px!important;bottom:0!important;display:flex!important;align-items:center!important;gap:10px!important;height:80px!important;margin:0!important;padding:14px 34px!important;border:0!important;border-top:1px solid var(--tryva-line)!important;background:rgba(11,10,17,.96)!important}.cw-footer .primary-button{border:0!important;border-radius:12px!important;background:var(--tryva-gradient)!important;color:#fff!important}.cw-footer .secondary-button{border:1px solid var(--tryva-line)!important;border-radius:11px!important;background:var(--tryva-surface-2)!important;color:#cfc7e0!important}

/* chat */
.chat-view{display:grid!important;grid-template-columns:minmax(0,1fr) 356px!important;height:100vh!important;padding:0!important;overflow:hidden!important;background:#0a090e!important}.chat-panel{display:flex!important;min-width:0!important;min-height:0!important;flex-direction:column!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#0a090e!important;overflow:hidden!important}.chat-header{display:flex!important;align-items:center!important;gap:14px!important;min-height:70px!important;padding:14px 20px!important;border:0!important;border-bottom:1px solid var(--tryva-line)!important;background:var(--tryva-sidebar)!important}.chat-header h2{margin:0!important;font-size:17px!important}.chat-header p{margin:2px 0 0!important;color:#8a82a0!important;font-size:11.5px!important}.chat-header .round-button,.chat-header .tool-button{border:1px solid var(--tryva-line)!important;border-radius:11px!important;background:var(--tryva-surface-2)!important;color:#cfc7e0!important}.chat-header .controls{margin-left:auto!important}.vn-stage-shell{position:relative!important;flex:1!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important}.vn-stage{width:100%!important;height:100%!important;min-height:0!important;border-radius:0!important}.user-form{display:flex!important;align-items:flex-end!important;gap:9px!important;margin:0!important;padding:13px 18px 17px!important;border:0!important;border-top:1px solid var(--tryva-line)!important;background:var(--tryva-sidebar)!important}.user-form textarea{min-height:46px!important;max-height:130px!important;padding:12px 15px!important;border:1px solid var(--tryva-line)!important;border-radius:13px!important;background:var(--tryva-surface-2)!important;color:#eceaf3!important}.user-form>button:last-child{width:46px!important;height:46px!important;border:0!important;border-radius:13px!important;background:var(--tryva-gradient)!important;color:#fff!important}.input-mode-btn,.contact-btn{height:46px!important;border:1px solid var(--tryva-line)!important;border-radius:11px!important;background:var(--tryva-surface-2)!important;color:#cfc7e0!important}.insight-panel{display:flex!important;min-width:0!important;min-height:0!important;flex-direction:column!important;margin:0!important;padding:0!important;border:0!important;border-left:1px solid var(--tryva-line)!important;border-radius:0!important;background:var(--tryva-sidebar)!important}.insight-tabs{display:flex!important;gap:0!important;padding:16px 16px 0!important;border-bottom:1px solid var(--tryva-line)!important}.insight-tabs button{padding:10px 12px!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important;color:#8a82a0!important;font-size:12px!important}.insight-tabs button.active{border-bottom-color:#8b6dff!important;color:#fff!important}.insight-pane{flex:1!important;min-height:0!important;padding:16px!important;overflow-y:auto!important}.room-meta,.memory-list,.messages{color:#cfc7e0!important}.room-error-logs-text{width:100%!important;height:calc(100% - 40px)!important;border:1px solid var(--tryva-line)!important;border-radius:10px!important;background:#0c0b11!important;color:#bdb6cc!important}

/* creator profile */
.creator-profile-view{padding:28px 34px!important}.creator-profile-page-head,.creator-profile-hero,.creator-profile-character-section{max-width:1180px;margin-left:auto!important;margin-right:auto!important}.creator-profile-hero{border:1px solid var(--tryva-line)!important;border-radius:18px!important;background:var(--tryva-surface)!important}

/* settings/help/login modals keep existing behavior, use Claude visual language */
.modal-backdrop{background:rgba(5,4,8,.72)!important;backdrop-filter:blur(10px)!important}.account-modal,.start-modal,.creator-profile-edit-modal{border:1px solid var(--tryva-line)!important;border-radius:18px!important;background:var(--tryva-sidebar)!important;color:#eceaf3!important;box-shadow:0 30px 80px rgba(0,0,0,.45)!important}.settings-modal{width:min(900px,calc(100vw - 40px))!important;max-height:86vh!important}.settings-section,.settings-account-panel,.help-list article{border:1px solid var(--tryva-line)!important;border-radius:14px!important;background:var(--tryva-surface)!important}.account-modal-close{border:1px solid var(--tryva-line)!important;background:var(--tryva-surface-2)!important;color:#cfc7e0!important}.primary-button{background:var(--tryva-gradient)!important;color:#fff!important}

/* responsive */
@media (max-width:900px){
  :root{--tryva-sidebar-width:0px;--tryva-tray-height:68px}body{overflow:hidden}.app-shell{display:block!important}.workspace{height:100dvh!important}.mobile-nav-toggle{position:fixed;z-index:101;left:12px;top:12px;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--tryva-line);border-radius:12px;background:rgba(16,14,23,.92);color:#fff}.mobile-nav-backdrop{position:fixed;z-index:98;inset:0;display:none;border:0;background:rgba(0,0,0,.56)}body.mobile-nav-open .mobile-nav-backdrop{display:block}.nav-shell{position:fixed!important;z-index:100!important;left:0!important;top:0!important;width:246px!important;transform:translateX(-105%);transition:transform .2s ease}body.mobile-nav-open .nav-shell{transform:translateX(0)}body.chat-active .nav-shell,body.detail-active .nav-shell{display:flex!important}.tryva-home-header{padding:12px 14px 12px 64px}.tryva-global-search{min-width:0!important}.tryva-header-spacer,.tryva-icon-button{display:none}.tryva-create-button{padding:11px 13px;font-size:0}.tryva-create-button::after{content:"＋";font-size:18px}.tryva-home-layout{padding:0 14px}.tryva-welcome-copy h1{font-size:23px}.tryva-featured-hero{height:230px}.tryva-featured-copy{left:22px;right:28%;top:24px}.tryva-featured-copy h2{font-size:29px}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.character-grid .character-tile:nth-child(4){display:block!important}.genre-rail{grid-template-columns:repeat(2,minmax(0,1fr))!important}.selection-tray{left:0!important;padding:0 12px!important}.selection-tray>div>p{display:none!important}.selection-tray .primary-button{min-width:150px!important;padding:12px 16px!important}.all-characters-head{padding:14px 14px 8px 64px!important}.all-character-toolbar{padding-left:14px!important;padding-right:14px!important}.all-character-grid{padding:12px 14px 22px!important;}.library-view>.page-head{padding:18px 14px 0 64px!important}.library-toolbar{margin:0 14px!important}.library-grid{padding:18px 14px 24px!important;}.recent-page-head{padding:20px 14px 14px 64px}.recent-search{width:280px!important}.recent-filter-row{padding-left:14px;padding-right:14px}.recent-page-list{padding-left:14px!important;padding-right:14px!important}.detail-hero{grid-template-columns:1fr!important;grid-template-rows:44vh minmax(0,1fr)!important;height:100dvh!important}.detail-art{grid-column:1!important;grid-row:1!important}.detail-copy{grid-column:1!important;grid-row:2!important;padding:24px 20px 112px!important;border-left:0!important}.detail-actions{left:0!important;right:0!important;width:100%!important;padding:14px 18px!important}.detail-owner-tools{right:12px!important;top:12px!important}.detail-quote-card{left:18px!important;right:18px!important;bottom:18px!important}.cw-main{display:block!important;overflow-y:auto!important}.cw-step-panel{height:auto!important;min-height:100%!important;padding:24px 16px 100px!important}.cw-preview-panel{display:none!important}.cw-footer{right:0!important;padding:12px 16px!important}.chat-view{grid-template-columns:1fr!important}.insight-panel{position:fixed!important;z-index:80!important;right:0!important;top:0!important;width:min(88vw,360px)!important;height:100dvh!important;transform:translateX(100%);transition:transform .2s}.chat-view.show-insight .insight-panel{transform:translateX(0)}}
@media (max-width:620px){
  .tryva-home-header{gap:8px}.tryva-global-search kbd{display:none}.tryva-welcome-copy h1{font-size:21px}.tryva-welcome-copy p{font-size:13px}.tryva-featured-hero{height:218px}.tryva-featured-hero-media{width:72%!important;opacity:.72}.tryva-featured-copy{right:15px}.tryva-featured-copy h2{font-size:27px}.tryva-featured-copy p{max-width:78%;font-size:12.5px}.character-grid{gap:11px!important}.character-tile{height:244px!important}.character-tile .tile-title h3{font-size:15px!important}.character-tile .tile-summary{font-size:11.5px!important}.genre-rail{grid-template-columns:1fr!important}.catalog-card{height:220px!important}.library-grid .character-tile,.create-card{height:246px!important}.recent-page-head{display:block}.recent-search{width:100%!important;margin-top:14px}.recent-page-list{grid-template-columns:1fr!important}.detail-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}.detail-stats strong{font-size:18px!important}.detail-copy h1{font-size:28px!important}.selection-tray .selected-list{max-width:calc(100vw - 165px)}.selection-tray .primary-button{min-width:138px!important;font-size:13px!important}}

/* Retired full-screen character-detail composition. */
@media (min-width: 999999px) {
/* Claude character-detail composition. Strong selectors intentionally beat the
   legacy detail-specific cascade without touching its event or media logic. */
body.detail-active .workspace{padding:0!important}
body.detail-active .selection-tray{display:none!important}
body.detail-active .character-detail-view{
  position:relative!important;inset:auto!important;display:block!important;
  width:100%!important;max-width:none!important;height:100vh!important;min-height:0!important;
  margin:0!important;padding:0!important;overflow:hidden!important;background:#0b0a11!important;
}
body.detail-active .character-detail-view.hidden{display:none!important}
body.detail-active .character-detail-view .detail-hero{
  position:relative!important;display:grid!important;
  grid-template-columns:minmax(0,1fr) 640px!important;grid-template-rows:100%!important;
  width:100%!important;max-width:none!important;height:100vh!important;min-height:0!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:#0b0a11!important;box-shadow:none!important;overflow:hidden!important;
}
body.detail-active .character-detail-view .detail-hero::before{display:none!important}
body.detail-active .character-detail-view .detail-art{
  position:relative!important;grid-column:1!important;grid-row:1!important;
  width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  overflow:hidden!important;background:linear-gradient(165deg,#3a4a6b 0%,#2a2440 45%,#14111d 100%)!important;
}
body.detail-active .character-detail-view .detail-art::before{
  content:""!important;display:block!important;position:absolute!important;z-index:2!important;inset:0!important;
  background:linear-gradient(180deg,rgba(10,9,15,.34) 0%,transparent 23%,transparent 52%,rgba(10,9,15,.97) 100%)!important;
  pointer-events:none!important;
}
body.detail-active .character-detail-view .detail-art::after{
  content:"";position:absolute;z-index:1;inset:0;
  background:radial-gradient(70% 55% at 52% 30%,rgba(180,160,235,.23),transparent 64%);
  pointer-events:none;
}
body.detail-active .character-detail-view .tryva-detail-media{
  position:absolute!important;z-index:0!important;inset:0!important;width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;margin:0!important;object-fit:cover!important;border-radius:0!important;
}
body.detail-active .character-detail-view .detail-copy{
  position:relative!important;grid-column:2!important;grid-row:1!important;display:block!important;
  width:100%!important;max-width:none!important;height:100%!important;min-width:0!important;min-height:0!important;
  margin:0!important;padding:34px 36px 112px!important;border:0!important;border-left:1px solid var(--tryva-line)!important;
  border-radius:0!important;background:var(--tryva-sidebar)!important;overflow-x:hidden!important;overflow-y:auto!important;
}
body.detail-active .character-detail-view .detail-identity{
  position:absolute!important;z-index:6!important;left:40px!important;right:40px!important;bottom:38px!important;
  width:auto!important;color:#fff!important;pointer-events:auto!important;
}
body.detail-active .character-detail-view .detail-identity-badges{display:flex!important;align-items:center!important;gap:8px!important;margin:0 0 12px!important}
body.detail-active .character-detail-view .detail-badge{
  position:static!important;display:inline-flex!important;align-items:center!important;width:auto!important;height:auto!important;
  margin:0!important;padding:5px 12px!important;border:0!important;border-radius:8px!important;
  background:rgba(124,92,255,.32)!important;color:#ddd0ff!important;font-size:12px!important;font-weight:700!important;
}
body.detail-active .character-detail-view .detail-moderation-notice{position:static!important;margin:0!important;padding:5px 10px!important;border-radius:8px!important;font-size:11px!important}
body.detail-active .character-detail-view .detail-identity h1,
body.detail-active .character-detail-view #detailName{
  position:static!important;width:auto!important;margin:0 0 7px!important;padding:0!important;
  color:#fff!important;font-size:48px!important;line-height:1.06!important;font-weight:800!important;letter-spacing:-.035em!important;
  text-shadow:0 4px 22px rgba(0,0,0,.35)!important;
}
body.detail-active .character-detail-view .detail-identity #detailMeta{
  position:static!important;margin:0!important;padding:0!important;color:#c8c1d5!important;font-size:14px!important;
}
body.detail-active .character-detail-view .detail-owner-tools{
  position:absolute!important;z-index:22!important;left:auto!important;right:26px!important;top:24px!important;bottom:auto!important;
  display:flex!important;align-items:center!important;gap:8px!important;width:auto!important;margin:0!important;padding:0!important;
  background:transparent!important;border:0!important;
}
body.detail-active .character-detail-view .detail-owner-tools.hidden{display:none!important}
body.detail-active .character-detail-view .detail-owner-tools button,
body.detail-active .character-detail-view .detail-danger-zone button{
  width:auto!important;height:42px!important;margin:0!important;padding:9px 13px!important;border:1px solid rgba(255,255,255,.12)!important;
  border-radius:11px!important;background:rgba(15,13,22,.66)!important;backdrop-filter:blur(8px)!important;color:#fff!important;font-size:12px!important;
}
body.detail-active .character-detail-view .detail-danger-zone{position:absolute!important;z-index:22!important;left:26px!important;bottom:148px!important}
body.detail-active .character-detail-view:not(.detail-edit-mode) .detail-quote-card{display:none!important}
body.detail-active .character-detail-view.detail-edit-mode .detail-quote-card{z-index:12!important}
body.detail-active .character-detail-view .detail-media-edit-control{position:absolute!important;z-index:15!important;right:26px!important;bottom:138px!important}

body.detail-active .character-detail-view .detail-stats{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;
  width:100%!important;height:auto!important;margin:0 0 26px!important;padding:0!important;
}
body.detail-active .character-detail-view .detail-stats>span{
  display:flex!important;align-items:flex-start!important;justify-content:center!important;flex-direction:column!important;
  min-width:0!important;min-height:80px!important;margin:0!important;padding:14px 16px!important;
  border:1px solid var(--tryva-line)!important;border-radius:14px!important;background:var(--tryva-surface-3)!important;
}
body.detail-active .character-detail-view .detail-stats strong{margin:0!important;color:#f4f1fa!important;font-size:22px!important;line-height:1.1!important;font-weight:800!important}
body.detail-active .character-detail-view .detail-stats strong em{color:#8a8299!important;font-size:12px!important;font-style:normal!important;font-weight:600!important}
body.detail-active .character-detail-view .detail-stats small{margin-top:5px!important;color:#8a8299!important;font-size:12px!important}
body.detail-active .character-detail-view .detail-info-section{display:block!important;margin:0 0 25px!important;padding:0!important;border:0!important;background:transparent!important}
body.detail-active .character-detail-view .detail-info-section h2,
body.detail-active .character-detail-view .related-section .section-head h2{
  margin:0 0 12px!important;color:#f0edf6!important;font-size:15.5px!important;line-height:1.2!important;font-weight:700!important;
}
body.detail-active .character-detail-view .detail-summary-shell{
  display:block!important;width:auto!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;
  background:transparent!important;color:#bbb4c8!important;font-size:14px!important;line-height:1.72!important;overflow:visible!important;
}
body.detail-active .character-detail-view .detail-summary-shell p{margin:0 0 8px!important}
body.detail-active .character-detail-view .detail-summary-shell p:last-child{margin-bottom:0!important}
body.detail-active .character-detail-view .detail-tag-section.hidden,
body.detail-active .character-detail-view .detail-tag-section:has(#detailTags.hidden){display:none!important}
body.detail-active .character-detail-view #detailTags{
  display:flex!important;flex-wrap:wrap!important;gap:9px!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;
  background:transparent!important;border:0!important;
}
body.detail-active .character-detail-view #detailTags.hidden{display:none!important}
body.detail-active .character-detail-view #detailTags .tag-chip{
  display:inline-flex!important;align-items:center!important;width:auto!important;height:auto!important;margin:0!important;padding:7px 14px!important;
  border:1px solid rgba(124,92,255,.2)!important;border-radius:10px!important;background:rgba(124,92,255,.12)!important;
  color:#bdb3d4!important;font-size:13px!important;
}
body.detail-active .character-detail-view .detail-greeting-row{display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;gap:12px!important;align-items:start!important}
body.detail-active .character-detail-view .detail-greeting-avatar{display:block!important;width:40px!important;height:40px!important;border-radius:11px!important;background:linear-gradient(140deg,#66577d,#302941)!important}
body.detail-active .character-detail-view #detailQuote{
  display:block!important;position:relative!important;width:auto!important;min-height:0!important;max-height:none!important;
  margin:0!important;padding:14px 16px!important;border:1px solid var(--tryva-line)!important;border-radius:4px 15px 15px 15px!important;
  background:var(--tryva-surface-3)!important;color:#cfc8d9!important;font-size:13.5px!important;line-height:1.62!important;font-style:normal!important;overflow:visible!important;
}
body.detail-active .character-detail-view .creator-detail-panel{
  display:flex!important;align-items:center!important;gap:11px!important;width:100%!important;min-height:70px!important;
  margin:0 0 25px!important;padding:12px 14px!important;border:1px solid var(--tryva-line)!important;border-radius:14px!important;
  background:var(--tryva-surface-3)!important;color:#fff!important;text-align:left!important;
}
body.detail-active .character-detail-view .creator-detail-panel.hidden{display:none!important}
body.detail-active .character-detail-view .creator-detail-avatar{display:flex!important;align-items:center!important;justify-content:center!important;width:42px!important;height:42px!important;min-width:42px!important;border-radius:50%!important;background:linear-gradient(140deg,#c8b6ff,#7d5cc4)!important}
body.detail-active .character-detail-view .creator-detail-panel>span:nth-child(2){display:flex!important;flex:1!important;min-width:0!important;flex-direction:column!important}
body.detail-active .character-detail-view .creator-detail-panel small{color:#8a8299!important;font-size:11px!important}
body.detail-active .character-detail-view .creator-detail-panel strong{color:#eceaf3!important;font-size:13px!important}
body.detail-active .character-detail-view .creator-detail-panel em{margin-left:auto;color:#8a8299;font-style:normal}
body.detail-active .character-detail-view .related-section{
  display:block!important;width:100%!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;
}
body.detail-active .character-detail-view .related-section.hidden{display:none!important}
body.detail-active .character-detail-view .related-section .section-head{display:block!important;margin:0 0 12px!important;padding:0!important}
body.detail-active .character-detail-view .related-grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;width:100%!important;margin:0!important;padding:0!important;
}
body.detail-active .character-detail-view .detail-related-card{
  position:relative!important;display:block!important;min-width:0!important;height:136px!important;margin:0!important;padding:0!important;
  border:1px solid var(--tryva-line)!important;border-radius:12px!important;overflow:hidden!important;background:#191622!important;color:#fff!important;text-align:left!important;cursor:pointer!important;
}
body.detail-active .character-detail-view .detail-related-art{position:absolute!important;inset:0!important;display:block!important;overflow:hidden!important;background:linear-gradient(160deg,#4a3d5b,#17141e)!important}
body.detail-active .character-detail-view .detail-related-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(11,9,16,.95) 100%)}
body.detail-active .character-detail-view .detail-related-media{width:100%!important;height:100%!important;object-fit:cover!important}
body.detail-active .character-detail-view .detail-related-fallback{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;color:rgba(255,255,255,.42)!important;font-size:42px!important}
body.detail-active .character-detail-view .detail-related-card strong{position:absolute!important;z-index:2!important;left:11px!important;right:9px!important;bottom:25px!important;overflow:hidden!important;color:#fff!important;font-size:13px!important;white-space:nowrap!important;text-overflow:ellipsis!important}
body.detail-active .character-detail-view .detail-related-card small{position:absolute!important;z-index:2!important;left:11px!important;right:9px!important;bottom:9px!important;overflow:hidden!important;color:#8f879f!important;font-size:9.5px!important;white-space:nowrap!important;text-overflow:ellipsis!important}
body.detail-active .character-detail-view .detail-safe-note{display:none!important}
body.detail-active .character-detail-view .detail-actions{
  position:absolute!important;z-index:20!important;left:auto!important;right:0!important;top:auto!important;bottom:0!important;
  display:grid!important;grid-template-columns:54px 128px minmax(0,1fr)!important;gap:12px!important;
  width:640px!important;height:auto!important;margin:0!important;padding:18px 36px 22px!important;
  border:0!important;border-top:1px solid var(--tryva-line)!important;border-radius:0!important;background:rgba(16,14,23,.98)!important;
}
body.detail-active .character-detail-view .detail-actions button{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;height:54px!important;margin:0!important;border-radius:14px!important;font-size:13px!important}
body.detail-active .character-detail-view #detailAddBtn{border:1px solid rgba(124,92,255,.36)!important;background:rgba(124,92,255,.12)!important;color:#cdbfff!important}
body.detail-active .character-detail-view #detailAddBtn.selected{background:rgba(124,92,255,.28)!important}
body.detail-active .character-detail-view .detail-start-button{border:0!important;background:var(--tryva-gradient)!important;color:#fff!important;box-shadow:0 10px 26px rgba(124,92,255,.28)!important}

@media (max-width:900px){
  body.detail-active .character-detail-view{height:100dvh!important;overflow:auto!important}
  body.detail-active .character-detail-view .detail-hero{display:block!important;height:auto!important;min-height:100dvh!important;overflow:visible!important}
  body.detail-active .character-detail-view .detail-art{height:46dvh!important;min-height:340px!important}
  body.detail-active .character-detail-view .detail-copy{height:auto!important;min-height:54dvh!important;padding:24px 18px 104px!important;border-left:0!important;border-top:1px solid var(--tryva-line)!important;overflow:visible!important}
  body.detail-active .character-detail-view .detail-identity{left:20px!important;right:20px!important;bottom:20px!important}
  body.detail-active .character-detail-view .detail-identity h1,body.detail-active .character-detail-view #detailName{font-size:34px!important}
  body.detail-active .character-detail-view .detail-owner-tools{right:12px!important;top:12px!important;max-width:calc(100% - 130px)!important;overflow-x:auto!important}
  body.detail-active .character-detail-view .detail-actions{position:fixed!important;left:0!important;right:0!important;width:100%!important;padding:12px 16px!important;grid-template-columns:48px 108px minmax(0,1fr)!important}
}
@media (max-width:560px){
  body.detail-active .character-detail-view .detail-stats{gap:7px!important}
  body.detail-active .character-detail-view .detail-stats>span{min-height:68px!important;padding:10px!important}
  body.detail-active .character-detail-view .detail-stats strong{font-size:18px!important}
  body.detail-active .character-detail-view .related-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  body.detail-active .character-detail-view .detail-related-card{height:112px!important}
  body.detail-active .character-detail-view .detail-actions{grid-template-columns:44px 96px minmax(0,1fr)!important;gap:8px!important;padding:10px!important}
  body.detail-active .character-detail-view .detail-actions button{height:48px!important;font-size:12px!important}
}
body.detail-active .workspace{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
body.detail-active > #globalSelectionTray.selection-tray{display:none!important}
body.detail-active .character-detail-view #detailSummary.detail-summary-shell,
body.detail-active .character-detail-view #detailSummary.detail-summary-shell .detail-summary-scroll{
  width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;
}
body.detail-active .character-detail-view #detailSummary .detail-summary-scroll::before,
body.detail-active .character-detail-view #detailSummary .detail-summary-scroll::after,
body.detail-active .character-detail-view #detailSummary .detail-summary-label{display:none!important}
body.detail-active .character-detail-view #detailSummary .detail-summary-prose{margin:0!important;padding:0!important;border:0!important}
body.detail-active .character-detail-view .detail-actions{grid-template-rows:54px!important;align-items:center!important;height:95px!important;min-height:95px!important}
body.detail-active .character-detail-view #detailAddBtn{grid-column:2!important;grid-row:1!important;width:100%!important;height:54px!important}

}
/* Claude create workspace: same seven real steps, reorganised into the supplied
   full-screen composition rather than deleting four working setup stages. */
body.create-active .nav-shell{display:none!important}
body.create-active .app-shell{grid-template-columns:minmax(0,1fr)!important}
body.create-active .workspace{width:100%!important;max-width:none!important;height:100vh!important;padding:0!important;overflow:hidden!important}
body.create-active .create-view{
  position:relative!important;display:block!important;width:100%!important;height:100vh!important;margin:0!important;padding:86px 0 0!important;
  overflow:hidden!important;background:#0b0a11!important;
}
body.create-active .create-view.hidden{display:none!important}
body.create-active .cw-page-head{
  position:absolute!important;z-index:40!important;left:0!important;right:0!important;top:0!important;display:block!important;height:86px!important;
  margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid var(--tryva-line)!important;background:#0d0b13!important;
}
body.create-active .cw-page-head>div{position:absolute!important;left:112px!important;top:27px!important}
body.create-active .cw-page-head h1{margin:0!important;color:#f0edf5!important;font-size:18px!important;font-weight:700!important}
body.create-active .cw-page-head p{display:none!important}
body.create-active #backToPlayBtn{
  position:absolute!important;left:30px!important;top:26px!important;width:auto!important;height:42px!important;margin:0!important;padding:0 14px!important;
  border:1px solid var(--tryva-line-strong)!important;border-radius:11px!important;background:var(--tryva-surface-2)!important;color:#cfc8da!important;font-size:13px!important;
}
body.create-active #backToPlayBtn::before{content:"‹ ";}
body.create-active .cw-stepper{
  position:absolute!important;z-index:42!important;left:330px!important;right:300px!important;top:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
  gap:0!important;width:auto!important;height:86px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important;
}
body.create-active .cw-step{
  position:relative!important;display:grid!important;grid-template-columns:28px auto!important;grid-template-rows:28px!important;align-items:center!important;gap:8px!important;
  flex:1 1 0!important;min-width:0!important;height:48px!important;margin:0!important;padding:10px 14px!important;border:0!important;border-radius:0!important;
  background:transparent!important;color:#777083!important;box-shadow:none!important;text-align:left!important;
}
body.create-active .cw-step:not(:last-child)::after{content:"";position:absolute;right:-4px;top:50%;width:15px;height:1px;background:rgba(255,255,255,.10)}
body.create-active .cw-step>span{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border-radius:50%!important;background:#201d2b!important;color:#80798d!important;font-size:12px!important}
body.create-active .cw-step strong{overflow:hidden!important;color:inherit!important;font-size:12.5px!important;font-weight:600!important;white-space:nowrap!important;text-overflow:ellipsis!important}
body.create-active .cw-step small{display:none!important}
body.create-active .cw-step.active{background:transparent!important;color:#eeeaf5!important}
body.create-active .cw-step.active>span{background:var(--tryva-gradient)!important;color:#fff!important;box-shadow:0 5px 14px rgba(124,92,255,.28)!important}
body.create-active .cw-shell{position:relative!important;display:block!important;width:100%!important;height:calc(100vh - 86px)!important;margin:0!important;padding:0!important;overflow:hidden!important}
body.create-active .cw-main{display:grid!important;grid-template-columns:minmax(0,1fr) 392px!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important}
body.create-active .cw-step-panel{
  grid-column:1!important;grid-row:1!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:34px 44px 112px!important;
  border:0!important;border-radius:0!important;background:#0b0a11!important;overflow-y:auto!important;
}
body.create-active .cw-step-panel:not(.active){display:none!important}
body.create-active .cw-panel-head{max-width:760px!important;margin:0 0 24px!important;padding:0 0 18px!important;border-bottom:1px solid var(--tryva-line)!important}
body:is(.create-active,.story-asset-create-active) .cw-panel-icon{display:none!important}
body.create-active .cw-panel-head h2{margin:0 0 5px!important;font-size:22px!important}
body.create-active .cw-panel-head p{font-size:13px!important;color:#8a8299!important}
body.create-active .cw-field-list,body.create-active .cw-writing-card,body.create-active .cw-magic-row,body.create-active .cw-samples-card,body.create-active .cw-shared-image-upload,body.create-active .cw-image-grid,body.create-active .cw-sprite-editor,body.create-active .cw-emotion-layout{max-width:760px!important}
body.create-active .cw-field-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px!important}
body.create-active .cw-field-row{
  display:block!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;
}
body.create-active .cw-field-row:first-child,body.create-active .cw-field-row:last-child{grid-column:1/-1!important}
body.create-active .cw-field-label{display:block!important;margin:0 0 8px!important}
body.create-active .cw-field-label strong{display:block!important;color:#e8e4ef!important;font-size:13px!important}
body.create-active .cw-field-label small{display:none!important}
body.create-active .cw-field-row input,body.create-active .cw-field-row select,body.create-active .cw-writing-card textarea,body.create-active .cw-writing-card input{
  width:100%!important;min-height:46px!important;padding:11px 14px!important;border:1px solid var(--tryva-line-strong)!important;border-radius:11px!important;
  background:var(--tryva-surface-2)!important;color:#eceaf3!important;box-shadow:none!important;
}
body.create-active .cw-preview-panel{
  position:absolute!important;z-index:4!important;right:0!important;top:0!important;bottom:0!important;display:block!important;width:392px!important;height:100%!important;
  margin:0!important;padding:28px!important;border:0!important;border-left:1px solid var(--tryva-line)!important;border-radius:0!important;background:#100e17!important;overflow-y:auto!important;
}
body.create-active .cw-preview-head{margin:0 0 18px!important}.cw-preview-head h2{font-size:13px!important;color:#9a92ad!important}.cw-preview-head span{font-size:10px!important}
body.create-active .cw-preview-hero{min-height:420px!important;margin:0 0 18px!important;padding:0 18px 22px!important;border:1px solid var(--tryva-line)!important;border-radius:17px!important;background:linear-gradient(160deg,#435577,#1a1724)!important;justify-content:flex-end!important;overflow:hidden!important}
body.create-active .cw-preview-avatar{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:transparent!important;color:rgba(255,255,255,.34)!important;font-size:58px!important}
body.create-active .cw-preview-hero h2,body.create-active .cw-preview-hero p{position:relative!important;z-index:2!important;text-align:left!important;width:100%!important}
body.create-active .cw-preview-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(12,10,18,.96) 100%);pointer-events:none}
body.create-active .cw-preview-section,body.create-active .cw-status-box{border:1px solid var(--tryva-line)!important;border-radius:14px!important;background:var(--tryva-surface)!important}
body.create-active .cw-footer{
  position:fixed!important;z-index:50!important;left:0!important;right:392px!important;bottom:0!important;display:flex!important;align-items:center!important;gap:10px!important;
  height:80px!important;margin:0!important;padding:12px 44px!important;border:0!important;border-top:1px solid var(--tryva-line)!important;background:rgba(13,11,19,.98)!important;
}
body.create-active .cw-footer button{height:48px!important;border-radius:11px!important}
body.create-active #wizardNextBtn,body.create-active #saveCharacterBtn{min-width:230px!important;margin-left:auto!important}
body.create-active .cw-footer-spacer{display:none!important}
@media(max-width:820px){
  body.create-active .create-view{padding-top:72px!important}body.create-active .cw-page-head{height:72px!important}body.create-active .cw-page-head>div{left:64px!important;top:22px!important}body.create-active #backToPlayBtn{left:12px!important;top:15px!important;width:42px!important;padding:0!important;font-size:0!important}body.create-active #backToPlayBtn::before{content:"‹";font-size:20px!important}
  body.create-active .cw-stepper{left:210px!important;right:10px!important;height:72px!important;justify-content:flex-end!important}body.create-active .cw-step{display:none!important}body.create-active .cw-step.active{display:grid!important;flex:0 0 150px!important}
  body.create-active .cw-shell{height:calc(100dvh - 72px)!important}body.create-active .cw-main{display:block!important}body.create-active .cw-preview-panel{display:none!important}body.create-active .cw-step-panel{padding:24px 16px 96px!important}body.create-active .cw-footer{right:0!important;padding:10px 14px!important;height:70px!important}body.create-active .cw-field-list{grid-template-columns:1fr!important}body.create-active .cw-field-row{grid-column:1!important}
}

/* Settings uses the same compact, blurred modal treatment as Help. */
body.settings-screen-open #settingsModal.modal-backdrop{
  position:fixed!important;z-index:1600!important;inset:0!important;display:grid!important;place-items:center!important;
  padding:22px!important;background:rgba(3,4,10,.72)!important;backdrop-filter:blur(18px)!important;
}
body.settings-screen-open #settingsModal.hidden{display:none!important}
body.settings-screen-open #settingsModal .settings-modal{
  position:relative!important;width:min(480px,calc(100vw - 32px))!important;max-width:480px!important;height:auto!important;max-height:min(82vh,720px)!important;
  margin:0!important;padding:28px!important;border:1px solid var(--tryva-line-strong)!important;border-radius:20px!important;
  background:var(--tryva-sidebar)!important;box-shadow:0 30px 90px rgba(0,0,0,.55)!important;overflow-y:auto!important;
}
body.settings-screen-open #settingsModal .account-modal-head{display:flex!important;align-items:flex-start!important;margin:0 0 22px!important;padding-right:42px!important;border:0!important}
body.settings-screen-open #settingsModal .account-modal-head span{display:block!important}
body.settings-screen-open #settingsModal .account-modal-head h2{margin:0!important;font-size:25px!important}
body.settings-screen-open #settingsModal .account-modal-close{position:absolute!important;right:16px!important;top:16px!important;width:36px!important;height:36px!important}
body.settings-screen-open #settingsModal .settings-modal::before{display:none!important}
body.settings-screen-open #settingsModal .settings-section{max-width:none!important;margin:0!important;padding:18px!important;border:1px solid var(--tryva-line)!important;border-radius:15px!important;background:var(--tryva-surface)!important}
body.settings-screen-open #settingsModal .settings-section+.settings-section{margin-top:12px!important}
body.settings-screen-open #settingsModal .settings-section h3{margin:0 0 14px!important;font-size:14px!important}
body.settings-screen-open #settingsModal .settings-account-panel{min-height:72px!important;padding:12px!important;border:1px solid var(--tryva-line)!important;background:var(--tryva-surface-2)!important}
body.settings-screen-open #settingsModal .settings-primary-button,body.settings-screen-open #settingsModal .settings-danger-button{min-height:44px!important;border-radius:10px!important}
@media(max-width:560px){
  body.settings-screen-open #settingsModal.modal-backdrop{padding:14px!important}
  body.settings-screen-open #settingsModal .settings-modal{width:100%!important;max-height:88vh!important;padding:22px 18px!important}
}

/* Claude layout containment fixes: legacy responsive padding must not push full-screen chat or settings outside the viewport. */
body.chat-active .workspace{padding:0!important}
body.chat-active .chat-view{height:100dvh!important}
body.settings-screen-open #globalSelectionTray{display:none!important}

body.play-active.settings-screen-open #globalSelectionTray.selection-tray{display:none!important}


/* ================================================================
   TRYVA v5.34.54 design follow-up 1 — navigation, creation and tray
================================================================ */
.story-view{display:block!important;width:100%!important;height:100%!important;background:var(--tryva-bg)!important}
.story-view.hidden{display:none!important}

/* Creation uses the available canvas instead of leaving a dead column. */
body.create-active .cw-main{grid-template-columns:minmax(0,1fr) 348px!important}
body.create-active .cw-preview-panel{width:348px!important;padding:24px!important}
body.create-active .cw-step-panel{padding-left:36px!important;padding-right:36px!important}
body.create-active .cw-panel-head,
body.create-active .cw-field-list,
body.create-active .cw-writing-card,
body.create-active .cw-magic-row,
body.create-active .cw-samples-card,
body.create-active .cw-shared-image-upload,
body.create-active .cw-image-grid,
body.create-active .cw-sprite-editor,
body.create-active .cw-emotion-layout{width:100%!important;max-width:1080px!important}
body.create-active .cw-footer{right:348px!important;padding:12px 36px!important;gap:10px!important}
body.create-active #wizardPrevBtn{min-width:126px!important;padding-inline:18px!important;white-space:nowrap!important}
body.create-active .cw-history-tools{display:flex!important;gap:8px!important}
body.create-active #wizardUndoBtn,
body.create-active #wizardRedoBtn{position:relative!important;width:46px!important;min-width:46px!important;padding:0!important;font-size:0!important}
body.create-active #wizardUndoBtn::before{content:"↶";font-size:19px!important}
body.create-active #wizardRedoBtn::before{content:"↷";font-size:19px!important}
body.create-active #wizardNextBtn,
body.create-active #saveCharacterBtn{min-width:260px!important;max-width:420px!important;white-space:nowrap!important}
@media(max-width:820px){
  body.create-active .cw-footer{right:0!important;padding:10px 14px!important}
  body.create-active #wizardPrevBtn{min-width:104px!important}
  body.create-active #wizardNextBtn,body.create-active #saveCharacterBtn{min-width:0!important;max-width:none!important;flex:1!important}
}
body.detail-active .character-detail-view>.detail-owner-tools{position:absolute!important;z-index:82!important;left:auto!important;right:26px!important;top:24px!important;display:flex!important;align-items:center!important;gap:8px!important;pointer-events:auto!important}
body.detail-active .character-detail-view>.detail-owner-tools.hidden{display:none!important}
body.detail-active .character-detail-view>.detail-danger-zone{position:absolute!important;z-index:82!important;left:26px!important;bottom:148px!important;pointer-events:auto!important}
body.detail-active .character-detail-view>.detail-danger-zone.hidden{display:none!important}
@media(max-width:900px){
  body.detail-active .character-detail-view>.detail-owner-tools{right:12px!important;top:12px!important;max-width:calc(100% - 130px)!important;overflow-x:auto!important}
}

/* One shared selected-character tray across catalogue and detail pages. */
body.detail-active{--tryva-sidebar-width:236px}
body.detail-active>.selection-tray,
body.detail-active>#globalSelectionTray.selection-tray{display:flex!important;left:0!important}
.selection-tray{transition:transform .22s ease!important;overflow:visible!important}
.selection-tray-toggle{position:absolute!important;left:50%!important;top:-26px!important;display:flex!important;align-items:center!important;justify-content:center!important;width:58px!important;height:27px!important;transform:translateX(-50%)!important;border:1px solid var(--tryva-line-strong)!important;border-bottom:0!important;border-radius:11px 11px 0 0!important;background:var(--tryva-sidebar)!important;color:#a89fbb!important;cursor:pointer!important}
.selection-tray-toggle span{display:block;transition:transform .22s ease!important}
body.selection-tray-collapsed>#globalSelectionTray.selection-tray{transform:translateY(calc(100% + 1px))!important}
body.selection-tray-collapsed>#globalSelectionTray .selection-tray-toggle{top:-27px!important}
body.selection-tray-collapsed>#globalSelectionTray .selection-tray-toggle span{transform:rotate(180deg)!important}
body.detail-active:not(.selection-tray-has-selection)>#globalSelectionTray.selection-tray{transform:translateY(calc(100% + 1px))!important}
body.detail-active:not(.selection-tray-has-selection)>#globalSelectionTray .selection-tray-toggle span{transform:rotate(180deg)!important}
body.detail-active .character-detail-view .detail-actions{bottom:0!important}
body.detail-active.selection-tray-has-selection:not(.selection-tray-collapsed) .character-detail-view .detail-actions{bottom:var(--tryva-tray-height)!important}

/* Use the far-right edge more efficiently on wide screens. */
@media(min-width:1321px){
  .tryva-home-layout{grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding-left:26px!important;padding-right:14px!important}
  .all-characters-head,.all-character-toolbar,.library-view>.page-head,.recent-page-head{padding-right:18px!important}
  .all-character-grid,.library-grid,.recent-page-list{padding-right:18px!important}
}

/* Keep the primary navigation reachable while the compact Settings dialog is open. */
@media (min-width: 821px){
  body.settings-screen-open #settingsModal.modal-backdrop{
    left:var(--tryva-sidebar-width)!important;
  }
}

/* ================================================================
   TRYVA v5.34.54 design follow-up 2 — creation workspace actually
   consumes the full left canvas instead of leaving a 760px island.
================================================================ */
@media (min-width:821px){
  body.create-active .cw-main{
    grid-template-columns:minmax(0,1fr) clamp(360px,23vw,420px)!important;
  }
  body.create-active .cw-preview-panel{
    width:clamp(360px,23vw,420px)!important;
    padding:28px 30px!important;
  }
  body.create-active .cw-step-panel{
    padding-left:clamp(36px,4vw,72px)!important;
    padding-right:clamp(36px,4vw,72px)!important;
  }
  body.create-active .cw-footer{
    right:clamp(360px,23vw,420px)!important;
    padding-left:clamp(36px,4vw,72px)!important;
    padding-right:clamp(36px,4vw,72px)!important;
  }
  body.create-active .cw-panel-head,
  body.create-active .cw-field-list,
  body.create-active .cw-writing-card,
  body.create-active .cw-magic-row,
  body.create-active .cw-magic-result,
  body.create-active .cw-samples-card,
  body.create-active .cw-feedback-card,
  body.create-active .cw-stage-preview,
  body.create-active .cw-shared-image-upload,
  body.create-active .cw-image-grid,
  body.create-active .cw-image-editor-grid,
  body.create-active .cw-real-preview-grid,
  body.create-active .cw-sprite-editor,
  body.create-active .cw-emotion-layout,
  body.create-active .cw-two-column-settings,
  body.create-active .cw-category-field,
  body.create-active .cw-info-box,
  body.create-active .cw-status-box,
  body.create-active .cw-adjustment-note{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
  body.create-active .cw-field-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:22px!important;
    row-gap:18px!important;
  }
  body.create-active .cw-field-row:first-child,
  body.create-active .cw-field-row:last-child{
    grid-column:auto!important;
  }
  body.create-active .cw-writing-card,
  body.create-active .cw-magic-row,
  body.create-active .cw-samples-card,
  body.create-active .cw-category-field{
    margin-left:0!important;
    margin-right:0!important;
  }
}
@media (min-width:1500px){
  body.create-active .cw-step-panel{
    padding-left:64px!important;
    padding-right:64px!important;
  }
}

/* ================================================================
   TRYVA v5.34.54 design follow-up 3
   - make the creator use the real full viewport
   - restore one shared selection tray on detail
   - move detail owner controls out of the stats
   - bring the rounded home rail closer to the right edge
================================================================ */

/* 2. The hidden navigation must not leave its old 1500px ceiling behind. */
@media (min-width:821px){
  body.create-active .create-view.character-wizard{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
  body.create-active .cw-shell,
  body.create-active .cw-main{
    width:100%!important;
    max-width:none!important;
  }
}

/* 6. Keep the original button events, but place owner controls over the image instead of inside the info rail. */
body.detail-active .character-detail-view{
  --detail-info-width:640px;
}
@media (min-width:901px){
  body.detail-active .character-detail-view>.detail-owner-tools{
    left:auto!important;
    right:calc(var(--detail-info-width) + 26px)!important;
    top:20px!important;
    max-width:min(580px,calc(100vw - var(--detail-info-width) - 140px))!important;
    justify-content:flex-end!important;
    flex-wrap:wrap!important;
    gap:7px!important;
  }
  body.detail-active .character-detail-view>.detail-owner-tools button{
    min-height:38px!important;
    padding:8px 12px!important;
    white-space:nowrap!important;
  }
  body.detail-active .character-detail-view.detail-edit-mode .detail-owner-tools{
    max-width:min(720px,calc(100vw - var(--detail-info-width) - 140px))!important;
  }
}

/* Soften the hard split between artwork and the information rail. */
@media (min-width:901px){
  body.detail-active .character-detail-view .detail-hero::after{
    content:""!important;
    position:absolute!important;
    z-index:5!important;
    top:0!important;
    bottom:0!important;
    right:var(--detail-info-width)!important;
    width:clamp(230px,17vw,310px)!important;
    background:
      radial-gradient(145% 72% at 100% -6%, rgba(104,48,148,.30) 0%, rgba(78,36,111,.17) 34%, rgba(37,24,52,.07) 54%, rgba(16,14,23,0) 72%),
      linear-gradient(90deg,
        rgba(11,10,17,0) 0%,
        rgba(11,10,17,.04) 8%,
        rgba(11,10,17,.11) 18%,
        rgba(11,10,17,.24) 31%,
        rgba(11,10,17,.43) 45%,
        rgba(12,10,18,.62) 59%,
        rgba(13,11,20,.79) 72%,
        rgba(15,12,22,.91) 84%,
        rgba(16,13,23,.98) 95%,
        var(--tryva-sidebar) 100%)!important;
    pointer-events:none!important;
  }
  body.detail-active .character-detail-view .detail-copy{
    border-left:0!important;
  }
}

/* 7 + 9. The detail page uses the exact same shared tray geometry as Home. */
body.play-active>#globalSelectionTray.selection-tray,
body.detail-active>#globalSelectionTray.selection-tray{
  position:fixed!important;
  display:grid!important;
  left:calc(var(--nav-width,268px) + clamp(34px,3.6vw,54px))!important;
  right:clamp(34px,3.6vw,54px)!important;
  top:auto!important;
  bottom:18px!important;
  width:auto!important;
  max-width:none!important;
  min-height:92px!important;
  height:auto!important;
  margin:0!important;
  padding:14px 18px!important;
  grid-template-columns:minmax(0,1fr) 250px!important;
  align-items:center!important;
  gap:18px!important;
  border:1px solid rgba(143,88,255,.34)!important;
  border-radius:17px!important;
  background:rgba(12,14,24,.88)!important;
  box-shadow:0 20px 58px rgba(0,0,0,.46)!important;
  backdrop-filter:blur(22px)!important;
  overflow:visible!important;
}
body.detail-active>#globalSelectionTray>div{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  flex:1 1 auto!important;
  min-width:0!important;
}
body.detail-active>#globalSelectionTray>div>p{
  display:block!important;
  width:150px!important;
  flex:0 0 150px!important;
  margin:0!important;
  color:#9a92ad!important;
  font-size:13px!important;
  white-space:nowrap!important;
}
body.detail-active>#globalSelectionTray .selected-list{
  display:flex!important;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  align-items:center!important;
  gap:10px!important;
  overflow-x:auto!important;
}
body.detail-active>#globalSelectionTray #startBtn{
  width:100%!important;
  min-width:0!important;
  min-height:52px!important;
  height:52px!important;
  padding:14px 30px!important;
  border-radius:13px!important;
  font-size:15px!important;
}
body.detail-active:not(.selection-tray-collapsed)>#globalSelectionTray.selection-tray{transform:none!important}
body.detail-active.selection-tray-collapsed>#globalSelectionTray.selection-tray{transform:translateY(calc(100% + 1px))!important}
body.detail-active .character-detail-view .detail-actions{grid-template-columns:minmax(190px,1fr) minmax(150px,.9fr)!important}
body.detail-active .character-detail-view #detailAddBtn{grid-column:2!important}

/* 10. Close the unused right gutter, but keep breathing room for rounded cards. */
@media (min-width:1321px){
  body.play-active .workspace{
    padding-right:26px!important;
  }
  body.play-active .tryva-home-header{
    padding-right:12px!important;
  }
  body.play-active .tryva-home-layout{
    padding-right:12px!important;
  }
}

@media (max-width:900px){
  body.play-active>#globalSelectionTray.selection-tray,
  body.detail-active>#globalSelectionTray.selection-tray{
    left:14px!important;
    right:14px!important;
    bottom:12px!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    min-height:0!important;
  }
  body.detail-active>#globalSelectionTray>div>p{display:none!important}
  body.detail-active>#globalSelectionTray #startBtn{width:100%!important;min-width:0!important}
  body.detail-active .character-detail-view .detail-actions{grid-template-columns:1fr 1fr!important}
}

/* Keep the two remaining detail actions above the shared tray while it is open. */
body.detail-active:not(.selection-tray-has-selection):not(.selection-tray-collapsed) .character-detail-view .detail-actions,
body.detail-active.selection-tray-has-selection:not(.selection-tray-collapsed) .character-detail-view .detail-actions{
  bottom:110px!important;
}
body.detail-active.selection-tray-collapsed .character-detail-view .detail-actions{
  bottom:0!important;
}
@media(max-width:900px){
  body.detail-active:not(.selection-tray-has-selection):not(.selection-tray-collapsed) .character-detail-view .detail-actions,
  body.detail-active.selection-tray-has-selection:not(.selection-tray-collapsed) .character-detail-view .detail-actions{
    bottom:154px!important;
  }
}

/* ================================================================
   TRYVA v5.34.54 detail polish 5
   Scope: shared selection tray + character detail information rail.
================================================================ */

/* One canonical tray geometry. Detail may only change collapsed state,
   never the bar's dimensions or its internal layout. */
body.play-active > #globalSelectionTray.selection-tray,
body.detail-active > #globalSelectionTray.selection-tray {
  box-sizing: border-box !important;
  position: fixed !important;
  z-index: 90 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 250px !important;
  align-items: center !important;
  gap: 18px !important;
  left: calc(var(--nav-width, 268px) + clamp(34px, 3.6vw, 54px)) !important;
  right: clamp(34px, 3.6vw, 54px) !important;
  top: auto !important;
  bottom: 18px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 92px !important;
  min-height: 92px !important;
  max-height: 92px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  overflow: visible !important;
  border: 1px solid rgba(143, 88, 255, .34) !important;
  border-radius: 17px !important;
  background: rgba(12, 14, 24, .88) !important;
  box-shadow: 0 20px 58px rgba(0, 0, 0, .46) !important;
  backdrop-filter: blur(22px) !important;
  transform: none !important;
}
body.play-active > #globalSelectionTray > div,
body.detail-active > #globalSelectionTray > div {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  flex: 1 1 auto !important;
}
body.play-active > #globalSelectionTray > div > p,
body.detail-active > #globalSelectionTray > div > p {
  display: block !important;
  flex: 0 0 150px !important;
  width: 150px !important;
  margin: 0 !important;
  color: #9a92ad !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}
body.play-active > #globalSelectionTray .selected-list,
body.detail-active > #globalSelectionTray .selected-list {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
body.play-active > #globalSelectionTray #startBtn,
body.detail-active > #globalSelectionTray #startBtn {
  box-sizing: border-box !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 !important;
  padding: 0 30px !important;
  border-radius: 13px !important;
  font-size: 15px !important;
}
body.selection-tray-collapsed > #globalSelectionTray.selection-tray {
  transform: translateY(calc(100% + 1px)) !important;
}
body.detail-active:not(.selection-tray-collapsed) > #globalSelectionTray.selection-tray,
body.play-active:not(.selection-tray-collapsed) > #globalSelectionTray.selection-tray {
  transform: none !important;
}

/* Retired character-detail rail polish. The shared dialog owns these controls. */
@media (min-width: 999999px) {
/* Back and admin are one restrained utility group on the artwork. */
body.detail-active .character-detail-view .detail-top-left-controls {
  position: absolute !important;
  z-index: 30 !important;
  left: 26px !important;
  top: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  pointer-events: auto !important;
}
body.detail-active .character-detail-view .detail-top-left-controls .detail-admin-manage {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 11px !important;
  background: rgba(15, 13, 22, .58) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
  color: rgba(245, 241, 251, .92) !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}
body.detail-active .character-detail-view .detail-top-left-controls .detail-admin-manage {
  border-color: rgba(158, 112, 255, .22) !important;
  background: rgba(80, 45, 126, .28) !important;
  color: rgba(225, 208, 255, .82) !important;
}
body.detail-active .character-detail-view .detail-top-left-controls .detail-admin-manage:hover {
  border-color: rgba(187, 154, 255, .36) !important;
  background: rgba(41, 31, 57, .68) !important;
  color: #fff !important;
}

/* The right rail keeps the existing photo shading and boundary blend, then adds
   only a restrained top-to-bottom purple atmosphere. */
body.detail-active .character-detail-view .detail-copy {
  padding-top: 34px !important;
  background:
    radial-gradient(120% 62% at 52% -8%, rgba(104, 48, 148, .20) 0%, rgba(78, 36, 111, .09) 42%, transparent 72%),
    linear-gradient(180deg, rgba(39, 20, 56, .30) 0%, rgba(25, 17, 36, .16) 42%, rgba(16, 14, 23, 1) 88%) !important;
}

/* One edit icon, with the two existing edit actions revealed as a small
   fading menu. IDs remain unchanged, so the original edit functions remain. */
body.detail-active .character-detail-view > .detail-owner-tools {
  position: absolute !important;
  z-index: 34 !important;
  left: auto !important;
  right: 26px !important;
  top: 22px !important;
  bottom: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  width: auto !important;
  max-width: min(570px, calc(100vw - 720px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}
body.detail-active .character-detail-view > .detail-owner-tools.hidden {
  display: none !important;
}
body.detail-active .character-detail-view .detail-edit-session-tools {
  position: relative !important;
  pointer-events: auto !important;
}
body.detail-active .character-detail-view .detail-edit-session-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}
body.detail-active .character-detail-view .detail-edit-session-tools.hidden {
  display: none !important;
}
body.detail-active .character-detail-view .detail-edit-session-tools button {
  width: auto !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 10px !important;
  background: rgba(24, 19, 34, .82) !important;
  color: rgba(238, 232, 247, .9) !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
}
body.detail-active .character-detail-view .detail-edit-session-tools .detail-save-edit {
  border-color: rgba(154, 109, 255, .30) !important;
  background: rgba(112, 66, 180, .54) !important;
  color: #fff !important;
}

/* Open statistics: no outer card, no individual boxes, no dividers. */
body.detail-active .character-detail-view .detail-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: clamp(18px, 2.1vw, 34px) !important;
  width: 100% !important;
  height: auto !important;
  margin: 48px 0 30px !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
}
body.detail-active .character-detail-view .detail-stats > .detail-stat {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  gap: 11px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.detail-active .character-detail-view .detail-stat-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 31px !important;
  width: 31px !important;
  height: 31px !important;
  color: rgba(169, 132, 230, .72) !important;
}
body.detail-active .character-detail-view .detail-stat-icon svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body.detail-active .character-detail-view .detail-stat-rating .detail-stat-icon {
  color: rgba(201, 167, 255, .88) !important;
}
body.detail-active .character-detail-view .detail-stat-rating .detail-stat-icon svg {
  fill: rgba(174, 129, 238, .16) !important;
}
body.detail-active .character-detail-view .detail-stat-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}
body.detail-active .character-detail-view .detail-stats .detail-stat-copy strong {
  margin: 0 !important;
  color: rgba(247, 243, 252, .96) !important;
  font-size: 21px !important;
  line-height: 1 !important;
  font-weight: 780 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
}
body.detail-active .character-detail-view .detail-stats .detail-stat-copy small {
  margin: 0 !important;
  color: rgba(158, 150, 174, .70) !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  body.play-active > #globalSelectionTray.selection-tray,
  body.detail-active > #globalSelectionTray.selection-tray {
    left: 14px !important;
    right: 14px !important;
    bottom: 12px !important;
    grid-template-columns: minmax(0, 1fr) 138px !important;
    gap: 10px !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    padding: 10px 12px !important;
  }
  body.play-active > #globalSelectionTray > div > p,
  body.detail-active > #globalSelectionTray > div > p {
    display: none !important;
  }
  body.play-active > #globalSelectionTray #startBtn,
  body.detail-active > #globalSelectionTray #startBtn {
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
  body.detail-active .character-detail-view .detail-top-left-controls {
    left: 64px !important;
    top: 12px !important;
  }
  body.detail-active .character-detail-view .detail-top-left-controls .detail-admin-manage {
    height: 38px !important;
    padding: 0 11px !important;
  }
  body.detail-active .character-detail-view > .detail-owner-tools {
    right: 12px !important;
    top: 12px !important;
    max-width: calc(100vw - 170px) !important;
  }
  body.detail-active .character-detail-view .detail-copy {
    padding-top: 24px !important;
  }
  body.detail-active .character-detail-view .detail-stats {
    margin-top: 44px !important;
    gap: 12px !important;
  }
  body.detail-active .character-detail-view .detail-stats > .detail-stat {
    gap: 7px !important;
  }
  body.detail-active .character-detail-view .detail-stat-icon {
    flex-basis: 24px !important;
    width: 24px !important;
    height: 24px !important;
  }
  body.detail-active .character-detail-view .detail-stat-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  body.detail-active .character-detail-view .detail-stats .detail-stat-copy strong {
    font-size: 18px !important;
  }
}

@media (max-width: 560px) {
  body.detail-active .character-detail-view .detail-admin-manage {
    font-size: 0 !important;
    width: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
  }
  body.detail-active .character-detail-view .detail-admin-manage::before {
    content: "⚙" !important;
    font-size: 14px !important;
  }
  body.detail-active .character-detail-view .detail-stats {
    gap: 8px !important;
    padding-inline: 0 !important;
  }
  body.detail-active .character-detail-view .detail-stats > .detail-stat {
    gap: 5px !important;
  }
  body.detail-active .character-detail-view .detail-stats .detail-stat-copy strong {
    font-size: 16px !important;
  }
  body.detail-active .character-detail-view .detail-stats .detail-stat-copy small {
    font-size: 9.5px !important;
  }
}

/* Legacy .detail-stats span rules also target the nested icon/copy spans.
   Reset them so no divider-like borders survive inside the open statistics. */
body.detail-active .character-detail-view .detail-stats .detail-stat-icon,
body.detail-active .character-detail-view .detail-stats .detail-stat-copy {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
}

/* ===================== C_UI_BATCH_v53454 ===================== */

/* [16][20] 카드 + 버튼: 우하단 배치 + 평소 회색→호버 보라, 홈/라이브러리/탐색 통일 */
.character-tile .tile-actions,
.catalog-card .tile-actions {
  position: absolute !important;
  top: auto !important;
  bottom: 14px !important;
  right: 14px !important;
  left: auto !important;
  z-index: 6 !important;
}
.add-card-button {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.82) !important;
  box-shadow: none !important;
}
.add-card-button:hover {
  background: linear-gradient(135deg, rgba(124,77,255,0.95), rgba(150,110,220,0.95)) !important;
  border-color: rgba(150,110,255,0.85) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(124,77,255,0.34) !important;
  transform: translateY(-1px) !important;
}

/* [20] 카드 하단 글/버튼 짤림 방지 (살짝 위로) */
.character-tile .tile-body { padding-bottom: 24px !important; }

/* [22] 상세 왼쪽 그라데이션 옅게 */
body.detail-active .character-detail-view {
  --detail-rail-skin:
    radial-gradient(120% 62% at 52% -8%, rgba(104,48,148,0.12) 0%, rgba(78,36,111,0.05) 42%, transparent 72%),
    linear-gradient(180deg, rgba(39,20,56,0.18) 0%, rgba(25,17,36,0.09) 42%, rgba(16,14,23,0.82) 88%) !important;
}

/* [12] 로그 툴바 버튼 컴팩트 (가로, 작게) */
.room-error-log-toolbar { gap: 6px !important; padding: 8px 10px 4px !important; flex-wrap: nowrap !important; align-items: center !important; }
.room-error-log-toolbar button {
  padding: 5px 11px !important; font-size: 12px !important; border-radius: 8px !important;
  line-height: 1.4 !important; white-space: nowrap !important; min-height: 0 !important;
  background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.14) !important;
}

/* [18] 스크롤바 깔끔하게 (얇고 은은, 호버시 보라) */
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08) !important; border-radius: 8px !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(150,110,255,0.38) !important; }
::-webkit-scrollbar-track { background: transparent !important; }

/* [24] 라이브러리 카드 호버 부드럽게 (홈과 동일 감) */
.library-view .character-tile {
  transition: transform .26s cubic-bezier(.22,.61,.36,1), border-color .26s ease, box-shadow .26s ease !important;
}

/* [17] 홈 히어로 왼쪽 보라 선 제거 */
.tryva-featured-hero { border-left: 0 !important; }

/* [15] 홈 히어로 사진 보이는 위치 아래로 (값 1개로 조절 가능) */
.tryva-featured-hero-media { object-position: center 46% !important; }


/* ===================== C_UI_11_14_v53454 ===================== */
/* [11] Keep the normal chat composer visibly above the viewport edge. */
body.chat-active:not(.stage-fullscreen) .chat-panel {
  padding-bottom: 0 !important;
}
body.chat-active:not(.stage-fullscreen) .user-form {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 14px 14px !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  background: rgba(16,14,23,.96) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
}

/* [12] Error/actor log tools: compact horizontal controls in the free right side. */
.room-error-log-toolbar {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
}
.room-error-log-toolbar button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#actorOutputLogPanel .room-error-logs-text,
#errorLogPanel .room-error-logs-text {
  height: calc(100% - 43px) !important;
}

/* [13][14] Fullscreen composer is centered and roomy; Live Scene slides down only at the top edge. */
.fullscreen-header-reveal-zone { display: none; }
body.stage-fullscreen .chat-panel {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0,1fr) auto !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.stage-fullscreen .fullscreen-header-reveal-zone {
  position: fixed !important;
  z-index: 10012 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: block !important;
  height: 22px !important;
  background: transparent !important;
}
body.stage-fullscreen .chat-header {
  position: fixed !important;
  z-index: 10011 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  min-height: 70px !important;
  transform: translateY(calc(-100% - 4px)) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform .18s ease-out, opacity .16s ease-out, visibility 0s linear .18s !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.30) !important;
}
body.stage-fullscreen .fullscreen-header-reveal-zone:hover + .chat-header,
body.stage-fullscreen .chat-header:hover,
body.stage-fullscreen .chat-header:focus-within {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: transform .18s ease-out, opacity .16s ease-out, visibility 0s !important;
}
body.stage-fullscreen .vn-stage-shell {
  grid-row: 1 !important;
  min-height: 0 !important;
}
body.stage-fullscreen .user-form {
  position: relative !important;
  z-index: 70 !important;
  grid-row: 2 !important;
  box-sizing: border-box !important;
  width: min(1120px, calc(100vw - 112px)) !important;
  max-width: 1120px !important;
  margin: 0 auto 28px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 18px !important;
  background: rgba(11,10,17,.84) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(18px) !important;
}
body.stage-fullscreen .user-form textarea {
  min-width: 0 !important;
  width: 100% !important;
}
@media (max-width: 900px) {
  body.chat-active:not(.stage-fullscreen) .user-form { margin: 0 10px 10px !important; }
  body.stage-fullscreen .user-form {
    width: calc(100vw - 28px) !important;
    margin-bottom: 14px !important;
  }
}


/* ===================== C_UI_15_18_v53454 ===================== */
/* [15] Reuse the saved card crop, then lower only this featured rendering. */
.tryva-featured-media {
  overflow: hidden !important;
}
.tryva-featured-media > .tryva-featured-hero-media.tryva-card-cover-media {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: calc(50% + clamp(16px, 2.2vh, 24px)) !important;
  width: var(--tryva-card-cover-width, 100%) !important;
  height: var(--tryva-card-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-card-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center !important;
}

/* [16][20] Place the add control against the card itself, not the zero-size nested wrapper. */
.character-tile .tile-actions,
.library-view .character-tile .tile-actions,
.play-view #characterGrid .character-tile .tile-actions {
  position: static !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}
.character-tile .add-card-button,
.library-view .character-tile .add-card-button,
.play-view #characterGrid .character-tile .add-card-button {
  position: absolute !important;
  z-index: 18 !important;
  right: 15px !important;
  bottom: 17px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 11px !important;
  background: rgba(20,19,27,.76) !important;
  color: rgba(244,241,249,.84) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(10px) !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}
.character-tile .add-card-button:hover,
.library-view .character-tile .add-card-button:hover,
.play-view #characterGrid .character-tile .add-card-button:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(171,126,255,.72) !important;
  background: linear-gradient(135deg, rgba(121,76,228,.96), rgba(151,103,236,.96)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(113,67,212,.34) !important;
}
.character-tile .add-card-button.selected,
.library-view .character-tile .add-card-button.selected,
.play-view #characterGrid .character-tile .add-card-button.selected {
  border-color: rgba(168,126,255,.38) !important;
  background: rgba(100,65,155,.62) !important;
  color: #fff !important;
}
.character-tile .tile-body,
.play-view #characterGrid .character-tile .tile-body,
.library-view .character-tile .tile-body {
  bottom: 26px !important;
}

/* [17] No accent strip or inset glow on the featured hero's left edge. */
.tryva-featured-hero {
  border-left-color: transparent !important;
  box-shadow: none !important;
}
.tryva-featured-hero::before,
.tryva-featured-hero::after {
  border-left: 0 !important;
  box-shadow: none !important;
}

/* [18] Scrollbars stay visually absent until hover or active scrolling. */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
*:hover,
*.is-scrolling {
  scrollbar-color: rgba(150,110,235,.42) transparent;
}
::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-clip: padding-box !important;
  transition: background-color .18s ease !important;
}
*:hover::-webkit-scrollbar-thumb,
*.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(150,110,235,.36) !important;
  background-clip: padding-box !important;
}
*:hover::-webkit-scrollbar-thumb:hover,
*.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: rgba(169,130,245,.62) !important;
  background-clip: padding-box !important;
}

/* [24] Library uses the same expansion curve and visual motion as Home. */
.library-view .character-tile {
  min-width: var(--tryva-card-w) !important;
  transition:
    flex-basis 220ms cubic-bezier(.18,.9,.24,1),
    width 220ms cubic-bezier(.18,.9,.24,1),
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease !important;
}
.library-view .character-tile:hover,
.library-view .character-tile:focus-visible,
.library-view .character-tile.selected {
  min-width: var(--tryva-card-w) !important;
  transform: translateY(-4px) !important;
}
.library-view .character-tile .tile-art > img,
.library-view .character-tile .tile-art > video,
.library-view .character-tile:hover .tile-art > img,
.library-view .character-tile:hover .tile-art > video,
.library-view .character-tile:focus-visible .tile-art > img,
.library-view .character-tile:focus-visible .tile-art > video {
  transition: none !important;
  filter: saturate(1.04) contrast(1.03) brightness(.92) !important;
}


/* ===================== C_UI_22_25_v53454 ===================== */
/* [15] Standing/detail crops use their saved layout; the featured-only offset remains visual. */
.tryva-featured-media > .tryva-featured-hero-media.tryva-cover-media {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: calc(50% + clamp(16px, 2.2vh, 24px)) !important;
  width: var(--tryva-cover-width, 100%) !important;
  height: var(--tryva-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center !important;
}

/* [22] Lighten only the broad artwork shading; keep the right-rail seam untouched. */
body.detail-active .character-detail-view .detail-art::before {
  background: linear-gradient(180deg,
    rgba(10,9,15,.16) 0%,
    rgba(10,9,15,.04) 24%,
    transparent 42%,
    transparent 61%,
    rgba(10,9,15,.76) 100%) !important;
}
body.detail-active .character-detail-view .detail-art::after {
  background: radial-gradient(70% 55% at 52% 30%, rgba(180,160,235,.11), transparent 66%) !important;
}

/* [23] Featured action now matches the neutral add control language. */
#featuredHeroStartBtn {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(30,29,38,.72) !important;
  color: rgba(247,244,251,.88) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.16) !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}
#featuredHeroStartBtn:hover,
#featuredHeroStartBtn:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(173,132,255,.70) !important;
  background: linear-gradient(135deg, rgba(120,76,226,.96), rgba(151,104,236,.96)) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(111,67,210,.32) !important;
}
#featuredHeroStartBtn.selected {
  border-color: rgba(167,127,243,.30) !important;
  background: rgba(92,61,137,.48) !important;
  color: rgba(235,224,255,.92) !important;
}

/* Preserve the original right-weighted featured composition while using the saved crop. */
.tryva-featured-media {
  left: 39% !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: auto !important;
}
@media (max-width: 620px) {
  .tryva-featured-media { left: 28% !important; }
}

/* Card action wrapper owns the card-corner coordinates; the button stays in-flow inside it. */
.character-tile .tile-actions,
.library-view .character-tile .tile-actions,
.play-view #characterGrid .character-tile .tile-actions {
  position: absolute !important;
  z-index: 18 !important;
  right: 15px !important;
  bottom: 17px !important;
  left: auto !important;
  top: auto !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
}
.character-tile .tile-actions .add-card-button,
.library-view .character-tile .tile-actions .add-card-button,
.play-view #characterGrid .character-tile .tile-actions .add-card-button {
  position: static !important;
  inset: auto !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
}

/* Retired fixed-rail offsets from the pre-dialog character detail. */
@media (min-width: 999999px) {
/* ===================== C_UI_20_DETAIL_RAISE_v53454 ===================== */
/* [20] Raise the detail identity and bottom actions without changing their functions. */
@media (min-width: 901px) {
  body.detail-active .character-detail-view .detail-identity {
    bottom: 64px !important;
  }
  body.detail-active.selection-tray-collapsed .character-detail-view .detail-actions {
    bottom: 14px !important;
  }
  body.detail-active:not(.selection-tray-collapsed) .character-detail-view .detail-actions {
    bottom: 124px !important;
  }
}
@media (max-width: 900px) {
  body.detail-active .character-detail-view .detail-identity {
    bottom: 34px !important;
  }
  body.detail-active.selection-tray-collapsed .character-detail-view .detail-actions {
    bottom: 10px !important;
  }
  body.detail-active:not(.selection-tray-collapsed) .character-detail-view .detail-actions {
    bottom: 98px !important;
  }
}
/* Preserve a small visual gap above the open shared selection tray. */
@media (min-width: 901px) {
  body.detail-active:not(.selection-tray-has-selection):not(.selection-tray-collapsed) .character-detail-view .detail-actions,
  body.detail-active.selection-tray-has-selection:not(.selection-tray-collapsed) .character-detail-view .detail-actions {
    bottom: 124px !important;
  }
}
@media (max-width: 900px) {
  body.detail-active:not(.selection-tray-has-selection):not(.selection-tray-collapsed) .character-detail-view .detail-actions,
  body.detail-active.selection-tray-has-selection:not(.selection-tray-collapsed) .character-detail-view .detail-actions {
    bottom: 110px !important;
  }
}
}

/* =================================================================
   TRYVA C_UI_HOME_DISCOVERY_ADMIN_v53454 · 2026-06-30
   Final overrides for items 12, 14, 15, 18, 19, 21, 25, 26 and 27.
================================================================= */

/* [12] Logs: keep the compact controls, remove the stacked dead space. */
#actorOutputLogPanel:not(.hidden),
#errorLogPanel:not(.hidden) {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  padding: 12px !important;
  overflow: hidden !important;
}
#actorOutputLogPanel .room-error-log-toolbar,
#errorLogPanel .room-error-log-toolbar {
  flex: 0 0 auto !important;
  min-height: 28px !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  gap: 6px !important;
}
#actorOutputLogPanel .room-error-log-toolbar button,
#errorLogPanel .room-error-log-toolbar button {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
}
#actorOutputLogPanel .room-error-logs-text,
#errorLogPanel .room-error-logs-text {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  resize: none !important;
}

/* [14] Auto advance lives in the Live Scene header and follows its reveal motion. */
.chat-header .controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.chat-header .controls .reading-auto-toggle {
  min-height: 42px !important;
  padding: 0 10px 0 12px !important;
  border-color: var(--tryva-line) !important;
  border-radius: 11px !important;
  background: var(--tryva-surface-2) !important;
  color: #cfc7e0 !important;
  backdrop-filter: none !important;
}
.chat-header .controls .reading-auto-toggle.active {
  border-color: rgba(151, 111, 244, .55) !important;
  background: rgba(105, 67, 190, .34) !important;
  color: #fff !important;
}
@media (max-width: 560px) {
  .chat-header .controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .chat-header .controls .reading-auto-toggle,
  .chat-header .controls .tool-button {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

/* [15] The home hero uses only its administrator-owned banner crop. */
.tryva-featured-media > .tryva-featured-hero-media.tryva-cover-media,
.tryva-featured-media > .tryva-featured-hero-media.tryva-home-banner-media {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  width: var(--tryva-cover-width, 100%) !important;
  height: var(--tryva-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center !important;
}

/* [18] Scrollbars are visible only while the element is actually scrolling. */
* {
  scrollbar-width: thin !important;
  scrollbar-color: transparent transparent !important;
}
*.is-scrolling {
  scrollbar-color: rgba(150,110,235,.42) transparent !important;
}
::-webkit-scrollbar-thumb,
*:hover::-webkit-scrollbar-thumb,
*:focus-visible::-webkit-scrollbar-thumb {
  background: transparent !important;
  background-clip: padding-box !important;
}
*.is-scrolling::-webkit-scrollbar-thumb,
*.is-scrolling:hover::-webkit-scrollbar-thumb {
  background: rgba(150,110,235,.38) !important;
  background-clip: padding-box !important;
}
*.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: rgba(169,130,245,.62) !important;
}
body.detail-active .character-detail-view #detailSummary .detail-summary-scroll:hover::-webkit-scrollbar-thumb,
body.detail-active .character-detail-view #detailSummary .detail-summary-scroll:focus-visible::-webkit-scrollbar-thumb {
  background: transparent !important;
}
body.detail-active .character-detail-view #detailSummary .detail-summary-scroll.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(157,111,244,.42) !important;
}

/* [19] Do not let the fallback gradient overwrite a real creator photo. */
body.detail-active .character-detail-view .creator-detail-avatar {
  background-color: #292238 !important;
  background-image: linear-gradient(140deg,#c8b6ff,#7d5cc4) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
body.detail-active .character-detail-view .creator-detail-avatar.has-image {
  background-color: transparent !important;
  background-image: var(--creator-avatar-image) !important;
}

/* [25] Home no longer reserves space for a search box. */
.tryva-home-header .tryva-header-spacer { flex: 1 1 auto !important; }

/* [26][27] New characters reuse the exact recommendation card component. */
.new-character-grid {
  width: 100% !important;
  margin: 0 !important;
}
.home-recommendation-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 170px;
  place-items: center;
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 16px;
  color: var(--tryva-muted);
  background: rgba(255,255,255,.018);
  font-size: 13px;
  text-align: center;
}

/* Administrator-only recommendation and banner crop editor. */
.admin-character-row.is-home-recommended {
  border-color: rgba(151,111,244,.48) !important;
  background: rgba(105,67,190,.13) !important;
}
.home-banner-editor-modal {
  width: min(1040px, calc(100vw - 32px)) !important;
  max-height: min(90dvh, 880px) !important;
  overflow: auto !important;
}
.home-banner-editor-body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr);
  gap: 18px;
  padding: 18px;
}
.home-banner-editor-preview {
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: #0d0b13;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.home-banner-editor-preview.is-dragging { cursor: grabbing; }
.home-banner-editor-media {
  position: absolute;
  left: 39%;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
.home-banner-editor-preview-media.tryva-cover-media {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--tryva-cover-width, 100%) !important;
  height: var(--tryva-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center !important;
  pointer-events: none !important;
}
.home-banner-editor-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d8ccff;
  font-size: 70px;
  font-weight: 900;
  background: linear-gradient(145deg,#30244a,#161922);
}
.home-banner-editor-safe-copy {
  position: absolute;
  z-index: 3;
  inset: 0 54% 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 34px;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(9,8,14,.93),rgba(9,8,14,.56) 66%,transparent);
}
.home-banner-editor-safe-copy small { color: #bba6ff; font-weight: 850; }
.home-banner-editor-safe-copy strong { font-size: clamp(28px, 4vw, 48px); }
.home-banner-editor-safe-copy span { color: rgba(255,255,255,.42); font-size: 12px; }
.home-banner-editor-controls {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 4px 0;
}
.home-banner-editor-controls > label:not(.home-banner-toggle) {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
}
.home-banner-editor-controls input[type="number"] {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--tryva-line-strong);
  border-radius: 10px;
  background: var(--tryva-surface-2);
  color: var(--tryva-text);
}
.home-banner-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(151,111,244,.24);
  border-radius: 12px;
  background: rgba(105,67,190,.10);
}
.home-banner-editor-controls p {
  margin: 0;
  color: var(--tryva-muted);
  font-size: 12px;
  line-height: 1.6;
}
.home-banner-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.home-banner-editor-actions button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--tryva-line-strong);
  border-radius: 10px;
  background: var(--tryva-surface-2);
}
@media (max-width: 760px) {
  .home-banner-editor-body { grid-template-columns: 1fr; }
  .home-banner-editor-preview { min-height: 0; aspect-ratio: 2 / 1; }
  .home-banner-editor-safe-copy { inset: 0 40% 0 0; padding: 22px; }
}
@media (max-width: 620px) {
  .home-banner-editor-media { left: 28%; }
}

/* Account entry: one compact surface, shared buttons, no nested scroll areas. */
#loginModal { overflow-y: auto; align-items: center; padding: 24px 16px !important; }
#loginModal .login-modal { width: min(440px, 100%) !important; min-height: 0 !important; max-height: calc(100dvh - 48px) !important; overflow-y: auto; padding: 32px; text-align: left; border-radius: 20px; }
#loginModal .account-modal-brand { justify-content: flex-start; margin-bottom: 22px; }
#loginModal .account-modal-brand-logo { width: 38px; height: 38px; object-fit: contain; }
#loginModal h2 { font-family: "Pretendard", system-ui, sans-serif; margin: 0 0 8px; font-size: 24px; letter-spacing: -.6px; }
#loginModal #authFormDescription { color: #a7a3b4; margin: 0 0 24px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
#emailAuthForm { display: grid; gap: 14px; }
#loginModal .auth-field { display: grid; gap: 8px; color: #dedbe8; font-size: 13px; font-weight: 600; }
#loginModal .auth-field input { box-sizing: border-box; width: 100%; min-width: 0; height: 46px; border: 1px solid #36313f; border-radius: 10px; background: #14121c; color: #f3f0fa; padding: 0 13px; font: inherit; font-size: 16px; outline: none; transition: border-color .15s; }
#loginModal .auth-field input:focus { border-color: #a88be4; box-shadow: 0 0 0 3px rgb(153 111 228 / 12%); }
#loginModal .auth-field input::placeholder { color: #77717f; font-size: 13px; font-weight: 400; }
#loginModal .auth-field input:read-only { color: #a7a3b4; }
#loginModal .auth-password-input { position: relative; display: flex; }
#loginModal .auth-password-input input { padding-right: 58px; }
#loginModal .auth-password-input button { position: absolute; right: 8px; top: 0; height: 46px; }
#loginModal .auth-text-button { appearance: none; border: 0; border-radius: 5px; background: transparent; color: #baa0ef; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 6px; cursor: pointer; }
#loginModal .auth-text-button:hover { color: #e3d4ff; }
#loginModal .auth-text-button:focus-visible { outline: 2px solid #a88be4; outline-offset: 3px; }
#loginModal button:disabled { opacity: .5; cursor: default; }
#loginModal .auth-form-links { display: flex; justify-content: flex-end; margin-top: -6px; }
#loginModal .auth-password-help { font-size: 12px; color: #a7a3b4; margin: -4px 0 0; line-height: 1.6; }
#loginModal .auth-message { margin: 0 0 16px; color: #c4b6df; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
#loginModal .auth-message:empty { display: none; }
#loginModal .auth-message.is-error { color: #f2a2aa; }
#loginModal #authSubmitBtn { width: 100%; min-height: 46px; border-radius: 10px; font-size: 14px; }
#loginModal .auth-divider { display: flex; align-items: center; gap: 14px; color: #898292; font-size: 11px; margin: 22px 0 18px; }
#loginModal .auth-divider::before, #loginModal .auth-divider::after { content: ''; flex: 1; height: 1px; background: #302b39; }
#loginModal .google-login-slot { min-height: 44px; margin: 0; display: flex; justify-content: center; color-scheme: light; }
/* Match the embedded document's color scheme so Chrome keeps its canvas transparent.
   Google owns the button and focus ring; do not crop or overlay the iframe. */
#loginModal .google-login-slot iframe { color-scheme: light; border: 0; }
#loginModal .account-modal-hint { margin: 8px 0 0; text-align: center; font-size: 12px; }
#loginModal .account-modal-hint:empty { display: none; }
#loginModal #authGoogleRetryBtn { display: block; margin: 8px auto 0; }
#loginModal .auth-mode-footer { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 22px 0 0; color: #a7a3b4; font-size: 12px; }
@media (max-width: 480px) {
  #loginModal { padding: 16px 12px !important; }
  #loginModal .login-modal { padding: 26px 22px !important; max-height: calc(100dvh - 32px) !important; border-radius: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #loginModal .auth-field input { transition: none; }
}
/* ===================== TRYVA ADMIN HOME SPLIT PATCH 2 · 2026-06-30 ===================== */

/* Recommendation and new-character rails use one identical card frame. */
.play-view #newCharacterRail.character-grid {






  margin: 0 0 32px !important;

}
.play-view #newCharacterRail .character-tile {
  --card-base-w: var(--tryva-card-w, 248px);
  --card-hover-w: var(--tryva-card-hover-w, 318px);
  position: relative !important;







  border-radius: var(--tryva-card-radius, 18px) !important;

  background: #060711 !important;
  transition: flex-basis 220ms cubic-bezier(.18,.9,.24,1), width 220ms cubic-bezier(.18,.9,.24,1), transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}
.play-view #newCharacterRail .character-tile:hover,
.play-view #newCharacterRail .character-tile:focus-visible,
.play-view #newCharacterRail .character-tile.selected {
  

  transform: translateY(-4px) !important;
  border-color: rgba(157,91,255,.78) !important;
  box-shadow: 0 24px 72px rgba(74,38,170,.34), 0 0 0 1px rgba(157,91,255,.22) inset !important;
}
.play-view #newCharacterRail .character-tile .tile-art {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--card-hover-w) !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(42,37,62,.82), rgba(7,8,17,.98)) !important;
}
.play-view #newCharacterRail .character-tile .tile-art > img,
.play-view #newCharacterRail .character-tile .tile-art > video {
  width: var(--tryva-card-cover-width, 100%) !important;
  height: var(--tryva-card-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
}
.play-view #newCharacterRail .character-tile .tile-body {
  position: absolute !important;
  left: 15px !important;
  right: auto !important;
  bottom: 26px !important;
  width: 216px !important;
  padding: 0 !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
.play-view #newCharacterRail .character-tile:hover .tile-body,
.play-view #newCharacterRail .character-tile:focus-visible .tile-body,
.play-view #newCharacterRail .character-tile.selected .tile-body {
  width: 286px !important;
}
.play-view #newCharacterRail .character-tile .tile-copy-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}
.play-view #newCharacterRail .character-tile .tile-copy-stack .tile-title {
  flex: 0 0 26px !important;
  width: 100% !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.play-view #newCharacterRail .character-tile .tile-title h3 {
  font-size: 28px !important;
  line-height: .98 !important;
  letter-spacing: -.02em !important;
  font-weight: 800 !important;
}
.play-view #newCharacterRail .character-tile .tile-copy-stack .tile-meta {
  flex: 0 0 17px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}
.play-view #newCharacterRail .character-tile .tile-copy-stack .tile-summary {
  flex: 0 0 36px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 210px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 14px 0 10px !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}
.play-view #newCharacterRail .character-tile .tile-copy-stack .tile-tags {
  flex: 0 0 24px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.play-view #newCharacterRail .tile-actions,
.play-view #newCharacterRail .tile-heart,
.play-view #newCharacterRail .tile-photo-edit,
.play-view #newCharacterRail .tile-badge {
  pointer-events: auto !important;
}

/* Character-detail admin manager. */
.admin-character-manager-modal {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-height: min(92dvh, 920px) !important;
  overflow: hidden !important;
}
.admin-character-manager-modal .account-modal-head b {
  color: #d8c8ff;
  font: inherit;
}
.admin-character-manager-body {
  display: grid;
  gap: 16px;
  padding: 18px;
  overflow-y: auto;
}
.admin-manager-section {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}
.admin-manager-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.admin-manager-section-head small {
  display: block;
  margin-bottom: 4px;
  color: #a98aef;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}
.admin-manager-section-head h3 { margin: 0; font-size: 18px; }
.admin-home-availability,
.admin-banner-source-label {
  margin: 0;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(160,108,58,.15);
  color: #d7b88e;
  font-size: 11px;
}
.admin-banner-source-label {
  background: rgba(117,82,179,.17);
  color: #cdbbff;
}
.admin-home-feature-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 160px;
  gap: 10px 14px;
  align-items: stretch;
}
.admin-feature-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 74px;
  padding: 14px 68px 14px 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(14,13,21,.66);
  cursor: pointer;
}
.admin-feature-card-copy { display: grid; gap: 5px; }
.admin-feature-card-copy strong { font-size: 14px; }
.admin-feature-card-copy small { color: var(--tryva-muted); font-size: 11.5px; line-height: 1.45; }
.admin-feature-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.admin-feature-card i {
  position: absolute;
  right: 15px;
  width: 42px;
  height: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  transition: background .16s ease, border-color .16s ease;
}
.admin-feature-card i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d8d4df;
  transition: transform .16s ease, background .16s ease;
}
.admin-feature-card:has(input:checked) {
  border-color: rgba(159,112,244,.5);
  background: rgba(101,63,176,.14);
}
.admin-feature-card input:checked + i {
  border-color: rgba(165,119,247,.72);
  background: rgba(127,76,222,.82);
}
.admin-feature-card input:checked + i::after { transform: translateX(18px); background: #fff; }
.admin-feature-card:has(input:disabled) { opacity: .48; cursor: not-allowed; }
.admin-order-field {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(14,13,21,.48);
}
.admin-order-field span { color: var(--tryva-muted); font-size: 11px; }
.admin-order-field input,
.admin-moderation-fields textarea {
  width: 100%;
  border: 1px solid var(--tryva-line-strong);
  border-radius: 10px;
  background: var(--tryva-surface-2);
  color: var(--tryva-text);
}
.admin-order-field input { min-height: 38px; padding: 7px 9px; }
.admin-order-field input:disabled { opacity: .5; }
.admin-banner-editor-section .home-banner-editor-body {
  grid-template-columns: minmax(0,1.7fr) minmax(255px,.65fr);
  padding: 0;
}
.admin-banner-image-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.admin-banner-image-actions button,
.admin-layout-reset {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  color: var(--tryva-text);
}
.admin-banner-image-actions button:hover,
.admin-layout-reset:hover {
  border-color: rgba(165,119,247,.6);
  background: rgba(115,72,196,.16);
}
.admin-banner-image-actions button:disabled { opacity: .42; cursor: not-allowed; }
.admin-layout-reset { justify-self: start; }
.admin-status-card-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.admin-status-card {
  position: relative;
  display: block;
  min-height: 108px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(14,13,21,.54);
  cursor: pointer;
}
.admin-status-card input { position: absolute; opacity: 0; }
.admin-status-card span { display: grid; gap: 8px; }
.admin-status-card b { font-size: 14px; }
.admin-status-card small { color: var(--tryva-muted); font-size: 11.5px; line-height: 1.5; }
.admin-status-card:has(input:checked) { box-shadow: 0 0 0 1px currentColor inset; }
.admin-status-card.status-active:has(input:checked) { border-color: rgba(78,190,132,.7); color: #9ae2ba; background: rgba(42,126,82,.12); }
.admin-status-card.status-suspended:has(input:checked) { border-color: rgba(213,157,70,.72); color: #e6c07e; background: rgba(139,91,30,.13); }
.admin-status-card.status-deleted:has(input:checked) { border-color: rgba(216,91,108,.72); color: #eba0ad; background: rgba(139,43,60,.13); }
.admin-moderation-fields {
  display: grid;
  grid-template-columns: minmax(220px,.65fr) minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
  margin-top: 12px;
}
.admin-moderation-fields > label { display: grid; gap: 7px; }
.admin-moderation-fields > label > span,
.admin-visibility-field legend { color: var(--tryva-muted); font-size: 11px; }
.admin-moderation-fields textarea { min-height: 92px; padding: 10px; resize: vertical; }
.admin-visibility-field {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.admin-visibility-field legend { grid-column: 1/-1; margin-bottom: 1px; }
.admin-visibility-field label { position: relative; }
.admin-visibility-field input { position: absolute; opacity: 0; }
.admin-visibility-field span {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.admin-visibility-field label:has(input:checked) span {
  border-color: rgba(158,111,242,.66);
  background: rgba(106,65,184,.18);
  color: #d7c7ff;
}
.admin-character-manager-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(10,9,15,.94);
}
.admin-character-manager-actions button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: var(--tryva-text);
}
.admin-character-manager-actions .settings-primary-button { background: var(--tryva-gradient); border-color: transparent; }
@media (max-width: 820px) {
  .admin-home-feature-grid { grid-template-columns: 1fr; }
  .admin-status-card-grid { grid-template-columns: 1fr; }
  .admin-moderation-fields { grid-template-columns: 1fr; }
  .admin-banner-editor-section .home-banner-editor-body { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .admin-character-manager-body { padding: 12px; }
  .admin-manager-section { padding: 14px; }
  .admin-manager-section-head { display: grid; }
  .admin-banner-image-actions { grid-template-columns: 1fr; }
  .admin-character-manager-actions { position: sticky; bottom: 0; }
}

/* ===================== TRYVA CARD HOVER + ADMIN SCROLL PATCH 3 · 2026-06-30 ===================== */

/* New-character cards must preserve the same saved crop before, during and after hover.
   Older Play hover rules reset transform to none, which moved normalized cover media away
   from its stored center/pan position. Use the exact fixed-frame crop behavior as recommendations. */
.play-view #newCharacterRail .character-tile .tile-art > img.tryva-card-cover-media,
.play-view #newCharacterRail .character-tile .tile-art > video.tryva-card-cover-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transition: filter 160ms ease !important;
}
.play-view #newCharacterRail .character-tile:hover .tile-art > img.tryva-card-cover-media,
.play-view #newCharacterRail .character-tile:hover .tile-art > video.tryva-card-cover-media,
.play-view #newCharacterRail .character-tile:focus-visible .tile-art > img.tryva-card-cover-media,
.play-view #newCharacterRail .character-tile:focus-visible .tile-art > video.tryva-card-cover-media,
.play-view #newCharacterRail .character-tile.selected .tile-art > img.tryva-card-cover-media,
.play-view #newCharacterRail .character-tile.selected .tile-art > video.tryva-card-cover-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
}

/* The admin manager is a three-row shell. Constrain the middle row so it becomes the
   actual scroll container instead of letting the outer overflow:hidden clip the form. */
.admin-character-manager-modal {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: min(92dvh, 920px) !important;
  max-height: min(92dvh, 920px) !important;
  overflow: hidden !important;
}
.admin-character-manager-modal > .account-modal-head {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px 64px 16px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.admin-character-manager-modal > .admin-character-manager-body {
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}
.admin-character-manager-modal > .admin-character-manager-actions {
  position: relative !important;
  z-index: 2 !important;
  flex: 0 0 auto !important;
  padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
}
@media (max-height: 640px) {
  .admin-character-manager-modal {
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }
}

/* =================================================================
   TRYVA HOME BANNER PREVIEW MATCH PATCH 4 · 2026-06-30
   The admin crop preview uses the exact responsive aspect ratio of the
   real home hero instead of a fixed 4:1 approximation.
================================================================= */
.home-banner-editor-preview {
  min-height: 150px !important;
}

/* =================================================================
   TRYVA HOME BANNER TRUE MIRROR PATCH 5 · 2026-06-30
   The administrator preview is the same featured-hero DOM rendered at
   the real home hero's exact pixel dimensions, then uniformly scaled.
================================================================= */
.home-banner-editor-preview {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #0d0b13 !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
}
.home-banner-editor-preview.is-dragging {
  cursor: grabbing !important;
}
.home-banner-editor-stage.tryva-featured-hero {
  position: absolute !important;
  z-index: 1 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform-origin: 0 0 !important;
  pointer-events: none !important;
  cursor: inherit !important;
}
.home-banner-editor-stage .tryva-featured-copy button {
  pointer-events: none !important;
}
.home-banner-editor-stage .tryva-hero-dots {
  pointer-events: none !important;
}

/* Measure the real hidden Home layout without allowing it to flash on screen. */
html.tryva-home-geometry-measuring #playView {
  display: block !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===================== C_CSS_BATCH2 (claude-fix13) ===================== */

/* [33] 내 프로필 캐릭터 카드: 4/1 납작비율 탓에 머리끝만 보이던 것 → 정상 비율 */
.creator-profile-character-card { aspect-ratio: auto !important; }
.creator-profile-character-art { height: 248px !important; }

/* [27] 홈/라이브러리 하트도 탐색처럼 부드럽게 (transition 통일) */
.tile-heart {
  transition: transform 150ms ease, color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
  transform-origin: center !important;
  will-change: transform;
}

/* [26] 상세 진입 시 사진/영상 로드 깜빡임을 화면 페이드인으로 가림 */
@keyframes tryvaDetailEnter { from { opacity: 0; transform: scale(.992); } to { opacity: 1; transform: none; } }
body.detail-active .character-detail-view { animation: tryvaDetailEnter .34s cubic-bezier(.22,.61,.36,1) both; }

/* =================================================================
   TRYVA C_UI_MEDIA_HEART_CAROUSEL_PROFILE · 2026-06-30
   Items 26, 27, 28, 31 and 33. Final scoped overrides.
================================================================= */

/* [31] Real home-banner carousel: autoplay, arrows, dots, drag and swipe. */
.tryva-featured-hero.tryva-hero-carousel {
  isolation: isolate !important;
  touch-action: pan-y !important;
  user-select: none !important;
  cursor: grab !important;
  outline: none !important;
}
.tryva-featured-hero.tryva-hero-carousel.is-dragging { cursor: grabbing !important; }
.tryva-featured-hero.tryva-hero-carousel:focus-visible {
  box-shadow: 0 0 0 2px rgba(164,122,255,.46), 0 22px 56px rgba(0,0,0,.34) !important;
}
.tryva-hero-viewport {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}
.tryva-hero-track {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  will-change: transform !important;
  transform: translate3d(0,0,0);
}
.tryva-hero-slide {
  position: relative !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: linear-gradient(110deg,#171220 0%,#241a38 44%,#4b3672 100%) !important;
}
.tryva-hero-slide::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: linear-gradient(90deg, rgba(13,11,19,.22), rgba(13,11,19,.02)), var(--tryva-hero-poster) !important;
  background-repeat: no-repeat !important;
  background-position: center, right center !important;
  background-size: cover, 61% 100% !important;
  filter: saturate(.82) brightness(.72) blur(1px) !important;
  transform: scale(1.012) !important;
}
.tryva-hero-slide .tryva-featured-media {
  z-index: 1 !important;
}
.tryva-hero-slide .tryva-featured-shade {
  z-index: 2 !important;
}
.tryva-hero-slide .tryva-featured-hero-media {
  opacity: 0 !important;
  transition: opacity 220ms ease !important;
}
.tryva-hero-slide .tryva-featured-hero-media.is-media-ready {
  opacity: 1 !important;
}
.tryva-featured-copy {
  z-index: 5 !important;
  pointer-events: none !important;
}
.tryva-featured-copy > button { pointer-events: auto !important; }
.tryva-featured-copy.is-copy-entering {
  animation: tryvaHeroCopyIn 360ms cubic-bezier(.22,.72,.2,1) both !important;
}
@keyframes tryvaHeroCopyIn {
  from { opacity: .2; transform: translate3d(10px,4px,0); filter: blur(2px); }
  to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); }
}
.tryva-hero-dots.hidden { display: none !important; }
.tryva-hero-dots {
  z-index: 8 !important;
  right: 24px !important;
  bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  background: rgba(10,9,15,.24) !important;
  backdrop-filter: blur(12px) !important;
}
.tryva-hero-dots button {
  display: grid !important;
  width: 14px !important;
  height: 14px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  cursor: pointer !important;
}
.tryva-hero-dots button span {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.34) !important;
  transition: width 200ms ease, background 200ms ease, box-shadow 200ms ease !important;
}
.tryva-hero-dots button.active { width: 28px !important; }
.tryva-hero-dots button.active span {
  width: 22px !important;
  background: linear-gradient(90deg,#a98cff,#7d5bea) !important;
  box-shadow: 0 0 14px rgba(155,118,255,.48) !important;
}
.tryva-hero-dots button:focus-visible {
  outline: 1px solid rgba(205,184,255,.8) !important;
  outline-offset: 2px !important;
}
.tryva-featured-hero.is-sliding .tryva-featured-copy { pointer-events: none !important; }

/* [26] Detail entry uses a real media-ready veil instead of a fixed blind fade. */
body.detail-active .character-detail-view { animation: none !important; }
.character-detail-view.detail-entry-animate {
  animation: tryvaDetailShellIn 300ms cubic-bezier(.22,.72,.2,1) both !important;
}
@keyframes tryvaDetailShellIn {
  from { opacity: 0; transform: translate3d(0,5px,0) scale(.994); }
  to { opacity: 1; transform: none; }
}
.detail-media-loading-cover {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(8,7,13,.05), rgba(8,7,13,.28)),
    var(--detail-entry-preview),
    linear-gradient(145deg,#17131f,#29203a 58%,#111018) !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 300ms ease, visibility 0s linear 300ms !important;
}
.detail-media-loading-cover::before {
  content: "" !important;
  position: absolute !important;
  inset: -20% !important;
  background: linear-gradient(112deg, transparent 34%, rgba(255,255,255,.08) 47%, transparent 60%) !important;
  transform: translateX(-55%) !important;
  animation: tryvaDetailLoadingSheen 1.25s ease-in-out infinite !important;
}
@keyframes tryvaDetailLoadingSheen {
  0% { transform: translateX(-55%); opacity: .2; }
  55% { opacity: .8; }
  100% { transform: translateX(55%); opacity: .1; }
}
.detail-media-loading-glow {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 65% 34%, rgba(166,121,255,.16), transparent 40%) !important;
}
.detail-media-loading-mark {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center !important;
  border: 1px solid rgba(218,199,255,.22) !important;
  border-radius: 14px !important;
  background: rgba(15,12,22,.34) !important;
  color: rgba(232,219,255,.74) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(12px) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  transform: translate(-50%,-50%) !important;
  animation: tryvaDetailMarkPulse 1.1s ease-in-out infinite alternate !important;
}
.detail-media-loading-mark .tryva-loading-brand-image {
  width: 25px !important;
  height: 25px !important;
  opacity: .82;
  filter: drop-shadow(0 0 10px rgba(190, 155, 255, .28));
}
@keyframes tryvaDetailMarkPulse {
  from { opacity: .54; transform: translate(-50%,-50%) scale(.96); }
  to { opacity: .94; transform: translate(-50%,-50%) scale(1); }
}
.character-detail-view.detail-entry-ready:not(.detail-entry-fallback) .detail-media-loading-cover {
  opacity: 0 !important;
  visibility: hidden !important;
}
.character-detail-view.detail-entry-fallback .detail-media-loading-cover {
  opacity: 1 !important;
  visibility: visible !important;
}
.character-detail-view.detail-entry-ready .detail-media-loading-cover::before,
.character-detail-view.detail-entry-ready .detail-media-loading-mark {
  animation: none !important;
  opacity: 0 !important;
}

/* [27][28] Home, Library and Explore use the same heart interaction language. */
.tile-heart,
.catalog-card-heart,
body.all-characters-active .catalog-card-heart {
  display: grid !important;
  width: 29px !important;
  min-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(15,13,22,.62) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(10px) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: center !important;
  transition: transform 150ms ease, color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
  will-change: transform !important;
}
.tile-heart:hover,
.catalog-card-heart:hover,
.tile-heart:focus-visible,
.catalog-card-heart:focus-visible,
.tile-heart:active,
.catalog-card-heart:active {
  background: rgba(28,22,39,.82) !important;
  color: #fff !important;
  transform: translateY(-1px) scale(1.08) !important;
  box-shadow: 0 9px 24px rgba(0,0,0,.24) !important;
}
.tile-heart.is-wishlisted,
.catalog-card-heart.is-wishlisted,
body.all-characters-active .catalog-card-heart.is-wishlisted {
  background: linear-gradient(145deg, rgba(177,70,199,.94), rgba(112,62,221,.94)) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(157,63,202,.34) !important;
}
.tile-heart.is-wishlisted:hover,
.catalog-card-heart.is-wishlisted:hover {
  background: linear-gradient(145deg, rgba(193,79,211,.98), rgba(126,73,231,.98)) !important;
  transform: translateY(-1px) scale(1.08) !important;
}
.tile-heart.is-heart-popping,
.catalog-card-heart.is-heart-popping {
  animation: tryvaHeartPop 340ms cubic-bezier(.2,.85,.24,1) both !important;
}
@keyframes tryvaHeartPop {
  0% { transform: scale(.86); }
  42% { transform: scale(1.18); }
  72% { transform: scale(.98); }
  100% { transform: scale(1); }
}
.library-view .character-tile.is-wishlist-removing {
  pointer-events: none !important;
  animation: tryvaWishlistCardOut 190ms ease both !important;
}
@keyframes tryvaWishlistCardOut {
  to { opacity: 0; transform: translateY(-3px) scale(.97); }
}

/* [33] Creator-profile cards are the same full card component, never a squeezed custom strip. */

.creator-profile-character-grid .character-tile {
  --profile-card-base-w: 248px;
  --profile-card-hover-w: 318px;
  position: relative !important;
  
  
  
  
  
  
  
  overflow: hidden !important;
  border: 1px solid rgba(180,169,246,.13) !important;
  border-radius: 18px !important;
  background: #060711 !important;
  box-shadow: 0 20px 52px rgba(0,0,0,.38) !important;
  transition: flex-basis 220ms cubic-bezier(.18,.9,.24,1), width 220ms cubic-bezier(.18,.9,.24,1), transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}
.creator-profile-character-grid .character-tile:hover,
.creator-profile-character-grid .character-tile:focus-visible,
.creator-profile-character-grid .character-tile.selected {
  
  
  transform: translateY(-4px) !important;
  border-color: rgba(157,91,255,.78) !important;
  box-shadow: 0 24px 72px rgba(74,38,170,.34), 0 0 0 1px rgba(157,91,255,.22) inset !important;
  z-index: 7 !important;
}
.creator-profile-character-grid .character-tile .tile-art {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--profile-card-hover-w) !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg,rgba(42,37,62,.82),rgba(7,8,17,.98)) !important;
}
.creator-profile-character-grid .character-tile .tile-art > img.tryva-card-cover-media,
.creator-profile-character-grid .character-tile .tile-art > video.tryva-card-cover-media,
.creator-profile-character-grid .character-tile:hover .tile-art > img.tryva-card-cover-media,
.creator-profile-character-grid .character-tile:hover .tile-art > video.tryva-card-cover-media {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-card-cover-width,100%) !important;
  height: var(--tryva-card-cover-height,100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-card-cover-transform,translate(-50%,-50%)) !important;
  transform-origin: center !important;
  transition: none !important;
}
.creator-profile-character-grid .character-tile .tile-body {
  position: absolute !important;
  z-index: 5 !important;
  left: 15px !important;
  right: 15px !important;
  bottom: 26px !important;
  padding: 0 !important;
  pointer-events: none !important;
}
.creator-profile-character-grid .character-tile .tile-body button,
.creator-profile-character-grid .character-tile .tile-actions,
.creator-profile-character-grid .character-tile .tile-heart { pointer-events: auto !important; }
.creator-profile-character-grid .character-tile .tile-title h3 {
  font-size: 28px !important;
  line-height: .98 !important;
  font-weight: 800 !important;
}
.creator-profile-character-grid .character-tile .tile-summary {
  max-width: 210px !important;
  margin-top: 14px !important;
}
.creator-profile-character-grid .character-tile:hover .tile-summary,
.creator-profile-character-grid .character-tile.selected .tile-summary { max-width: 280px !important; }

@media (max-width: 900px) {
  
}
@media (max-width: 620px) {
  .tryva-hero-dots { right: 14px !important; bottom: 12px !important; }
  
  .creator-profile-character-grid .character-tile,
  .creator-profile-character-grid .character-tile:hover,
  .creator-profile-character-grid .character-tile:focus-visible,
  .creator-profile-character-grid .character-tile.selected {
    --profile-card-base-w: 100%;
    --profile-card-hover-w: 100%;
    
    
    
    
  }
}
@media (prefers-reduced-motion: reduce) {
  .tryva-hero-track,
  .tryva-featured-copy,
  .detail-media-loading-cover,
  .character-detail-view.detail-entry-animate,
  .tile-heart,
  .catalog-card-heart { animation: none !important; transition-duration: 1ms !important; }
}

/* [27] Final specificity lock: Home, Library and Explore hearts must be visually identical. */
body .play-view #characterGrid .character-tile .tile-heart,
body .play-view #newCharacterRail .character-tile .tile-heart,
body .library-view #libraryGrid .character-tile .tile-heart,
body .all-characters-view #allCharacterGrid .catalog-card .catalog-card-heart,
body.all-characters-active #allCharacterGrid .catalog-card .catalog-card-heart {
  display: grid !important;
  width: 29px !important;
  min-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(15,13,22,.62) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(10px) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: center !important;
  transition: transform 150ms ease, color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
}
body .play-view #characterGrid .character-tile .tile-heart:hover,
body .play-view #newCharacterRail .character-tile .tile-heart:hover,
body .library-view #libraryGrid .character-tile .tile-heart:hover,
body .all-characters-view #allCharacterGrid .catalog-card .catalog-card-heart:hover,
body.all-characters-active #allCharacterGrid .catalog-card .catalog-card-heart:hover,
body .play-view #characterGrid .character-tile .tile-heart:focus-visible,
body .play-view #newCharacterRail .character-tile .tile-heart:focus-visible,
body .library-view #libraryGrid .character-tile .tile-heart:focus-visible,
body .all-characters-view #allCharacterGrid .catalog-card .catalog-card-heart:focus-visible,
body.all-characters-active #allCharacterGrid .catalog-card .catalog-card-heart:focus-visible {
  background: rgba(28,22,39,.82) !important;
  color: #fff !important;
  transform: translateY(-1px) scale(1.08) !important;
  box-shadow: 0 9px 24px rgba(0,0,0,.24) !important;
}
body .play-view #characterGrid .character-tile .tile-heart.is-wishlisted,
body .play-view #newCharacterRail .character-tile .tile-heart.is-wishlisted,
body .library-view #libraryGrid .character-tile .tile-heart.is-wishlisted,
body .all-characters-view #allCharacterGrid .catalog-card .catalog-card-heart.is-wishlisted,
body.all-characters-active #allCharacterGrid .catalog-card .catalog-card-heart.is-wishlisted {
  background: linear-gradient(145deg, rgba(177,70,199,.94), rgba(112,62,221,.94)) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(157,63,202,.34) !important;
}


/* TRYVA PATCH 11: operating-manager save button reliability and visible feedback */
.admin-character-manager-actions {
  align-items: center !important;
  isolation: isolate !important;
  pointer-events: auto !important;
}
.admin-character-manager-actions > button {
  flex: 0 0 auto !important;
  width: auto !important;
  pointer-events: auto !important;
}
.admin-character-manager-actions .settings-primary-button {
  min-width: 154px !important;
  width: auto !important;
}
.admin-character-manager-actions .settings-primary-button[aria-busy="true"] {
  cursor: wait !important;
  opacity: .78 !important;
}
.admin-manager-save-status {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 auto 0 0 !important;
  color: rgba(210,204,222,.68) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-align: left !important;
}
.admin-manager-save-status:empty { display: none !important; }
.admin-manager-save-status.is-loading { color: #cbbaff !important; }
.admin-manager-save-status.is-success { color: #9de1b9 !important; }
.admin-manager-save-status.is-error { color: #f0a1ad !important; }
@media (max-width: 560px) {
  .admin-character-manager-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .admin-manager-save-status {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .admin-character-manager-actions > button {
    width: 100% !important;
  }
}

/* =================================================================
   TRYVA PATCH 17 · UNIFIED NATIVE VIEW SCROLL · 2026-07-01
   Scope: Home / Explore / Library only.
   One native vertical scroller per view. No wheel interception, no nested
   catalogue scroller, and no card or typography scaling.
================================================================= */

/* The visible selection tray is fixed over the page. Reserve only the space
   that is actually visible: its small handle while collapsed, its complete
   frame plus breathing room while expanded. */
body.play-active,
body.all-characters-active,
body.library-active {
  --tryva-active-tray-clearance: 128px;
}
body.selection-tray-collapsed.play-active,
body.selection-tray-collapsed.all-characters-active,
body.selection-tray-collapsed.library-active {
  --tryva-active-tray-clearance: 46px;
}

/* Remove the old shell-level tray reservation. The active view now owns the
   exact bottom clearance, so the top and bottom cannot become separate dead
   regions. */
body.play-active .app-shell > .workspace,
body.all-characters-active .app-shell > .workspace,
body.library-active .app-shell > .workspace {
  padding: 0 !important;
}

/* One native scroll surface. All visible header, spacing and card content is
   inside this element, so wheel/touch input has the same feel everywhere. */
body.play-active #playView.play-view,
body.all-characters-active #allCharactersView.all-characters-view,
body.library-active #libraryView.library-view {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-bottom: var(--tryva-active-tray-clearance) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Home keeps its existing visual geometry. The outer view scrolls; the main
   column no longer creates a second scroll context. */
body.play-active #playView.play-view {
  display: block !important;
  padding-top: 0 !important;
  padding-left: clamp(34px, 3.6vw, 54px) !important;
  padding-right: clamp(34px, 3.6vw, 54px) !important;
}
body.play-active #playView .tryva-home-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  background: var(--tryva-bg) !important;
}
body.play-active #playView .tryva-home-layout {
  min-height: 0 !important;
  height: auto !important;
  align-items: start !important;
}
body.play-active #playView .tryva-home-main {
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}
body.play-active #playView .tryva-home-rail {
  position: sticky !important;
  top: 86px !important;
  align-self: start !important;
  height: calc(100dvh - 86px - var(--tryva-active-tray-clearance)) !important;
  max-height: calc(100dvh - 86px - var(--tryva-active-tray-clearance)) !important;
  min-height: 0 !important;
}

/* Explore and Library use the view as the sole scroll surface. Their grids
   expand naturally; fixed card dimensions, gaps and image crops stay intact. */
body.all-characters-active #allCharactersView.all-characters-view,
body.library-active #libraryView.library-view {
  display: block !important;
  padding-top: 0 !important;
}
body.all-characters-active #allCharactersView.all-characters-view {
  padding-left: clamp(30px, 3.5vw, 54px) !important;
  padding-right: clamp(30px, 3.5vw, 54px) !important;
}
body.library-active #libraryView.library-view {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* Filters remain easy to reach while the title area can leave naturally.
   This is still the same native view scroll, not a second scroll layer. */
body.all-characters-active #allCharactersView > .all-character-toolbar,
body.library-active #libraryView > .library-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 16 !important;
  background: var(--tryva-bg) !important;
}

/* Expanded state must explicitly cancel the shared collapsed transform for
   Explore and Library as well as Home. */
body.play-active:not(.selection-tray-collapsed) > #globalSelectionTray.selection-tray,
body.all-characters-active:not(.selection-tray-collapsed) > #globalSelectionTray.selection-tray,
body.library-active:not(.selection-tray-collapsed) > #globalSelectionTray.selection-tray {
  transform: none !important;
}

@media (min-width: 1321px) {
  body.play-active #playView.play-view {
    padding-right: 26px !important;
  }
}

@media (max-width: 900px) {
  body.play-active,
  body.all-characters-active,
  body.library-active {
    --tryva-active-tray-clearance: 154px;
  }
  body.selection-tray-collapsed.play-active,
  body.selection-tray-collapsed.all-characters-active,
  body.selection-tray-collapsed.library-active {
    --tryva-active-tray-clearance: 42px;
  }
  body.play-active #playView .tryva-home-rail {
    position: static !important;
    height: auto !important;
    max-height: none !important;
  }
}


/* =================================================================
   TRYVA PATCH 18 · COMPACT TOP EDGE · 2026-07-01
   Scope: top edge only for Home / Explore / Library.
   Bottom tray clearance, scroll ownership, card geometry and horizontal
   spacing remain exactly as defined by Patch 17.
================================================================= */
body.play-active,
body.all-characters-active,
body.library-active {
  --tryva-view-top-inset: 12px;
}

/* Explore and Library keep a deliberate 12px design inset, but no outer
   dead strip above their first real control or title. */
body.all-characters-active #allCharactersView > .all-characters-head {
  padding-top: var(--tryva-view-top-inset) !important;
}
body.library-active #libraryView > .page-head {
  padding-top: var(--tryva-view-top-inset) !important;
}

/* On desktop the Home action buttons occupy only the top-right corner instead
   of reserving an empty full-width row. The main column can therefore begin
   at the same top edge without changing any card, type or horizontal sizing. */
@media (min-width: 1051px) {
  body.play-active #playView > .tryva-home-header {
    position: sticky !important;
    inset: 0 auto auto auto !important;
    z-index: 22 !important;
    width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 -56px auto !important;
    padding: var(--tryva-view-top-inset) 12px 0 0 !important;
    overflow: visible !important;
    background: transparent !important;
    transform: none !important;
  }
  body.play-active #playView > .tryva-home-header > .tryva-header-spacer {
    display: none !important;
  }
  body.play-active #playView > .tryva-home-layout {
    margin-top: 0 !important;
  }
}

/* Tablet/mobile keeps the safe single-column flow, while reducing only the
   top inset. No controls are overlaid on narrow content. */
@media (max-width: 900px) {
  body.play-active #playView > .tryva-home-header {
    padding-top: var(--tryva-view-top-inset) !important;
  }
}

@media (min-width: 1051px) {
  /* Preserve the existing right-rail start line while the main column uses the
     reclaimed top space. This prevents the floating actions from touching the
     first rail card. */
  body.play-active #playView .tryva-home-rail {
    margin-top: 80px !important;
  }
}

/* =================================================================
   TRYVA PATCH 19 · FOCUSED UI POLISH · 2026-07-01
   Scope: 34, 36, 38, 39, 41, 42 only.
   Creator AI, multi-character turn policy and Explore redesign are untouched.
================================================================= */

/* [38] Keep the quick-edit photo control in the same place and size, but give
   it enough contrast to survive bright photos and the existing hero gradient. */
body.detail-active .character-detail-view .detail-image-edit-button,
body.detail-active .character-detail-view .detail-media-edit-control .detail-image-edit-button {
  border-color: rgba(255, 255, 255, 0.52) !important;
  background: rgba(4, 5, 12, 0.94) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.96), 0 0 9px rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.58),
    0 10px 28px rgba(0, 0, 0, 0.62),
    0 0 18px rgba(120, 82, 226, 0.18) !important;
  backdrop-filter: blur(10px) saturate(1.15) !important;
}
body.detail-active .character-detail-view .detail-image-edit-button:hover,
body.detail-active .character-detail-view .detail-image-edit-button:focus-visible,
body.detail-active .character-detail-view .detail-media-edit-control .detail-image-edit-button:hover,
body.detail-active .character-detail-view .detail-media-edit-control .detail-image-edit-button:focus-visible {
  border-color: rgba(214, 185, 255, 0.9) !important;
  background: rgba(72, 38, 148, 0.94) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.64),
    0 12px 30px rgba(0, 0, 0, 0.66),
    0 0 24px rgba(149, 92, 255, 0.42) !important;
}

/* [39] The removed top-right Home actions must not leave an 80px reservation.
   Only the right rail moves upward; the main column geometry stays untouched. */
@media (min-width: 1051px) {
  body.play-active #playView .tryva-home-rail {
    margin-top: 0 !important;
    top: var(--tryva-view-top-inset, 12px) !important;
    height: calc(100dvh - var(--tryva-view-top-inset, 12px) - var(--tryva-active-tray-clearance)) !important;
    max-height: calc(100dvh - var(--tryva-view-top-inset, 12px) - var(--tryva-active-tray-clearance)) !important;
  }
}

/* [42] Library hover is visual, not structural. The card keeps its exact flex
   footprint, so the last card never jumps to the next row. */
.library-view .character-tile,
.library-view .character-tile:hover,
.library-view .character-tile:focus-visible,
.library-view .character-tile.selected {
  flex: 0 0 var(--tryva-card-w) !important;
  flex-basis: var(--tryva-card-w) !important;
  width: var(--tryva-card-w) !important;
  min-width: var(--tryva-card-w) !important;
  max-width: var(--tryva-card-w) !important;
}
.library-view .character-tile {
  overflow: hidden !important;
  transform: translateY(0) !important;
  transition:
    transform 180ms cubic-bezier(.2,.78,.22,1),
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease !important;
}
.library-view .character-tile:hover,
.library-view .character-tile:focus-visible {
  transform: translateY(-4px) !important;
  z-index: 20 !important;
  border-color: rgba(170, 112, 255, 0.82) !important;
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.54),
    0 0 0 1px rgba(164, 106, 255, 0.28),
    0 0 28px rgba(126, 78, 255, 0.18) !important;
}
.library-view .character-tile.selected:not(:hover):not(:focus-visible) {
  transform: translateY(0) !important;
}
.library-view .character-tile:hover .tile-body,
.library-view .character-tile:focus-visible .tile-body,
.library-view .character-tile.selected .tile-body,
.library-view .character-tile:hover .tile-summary,
.library-view .character-tile:focus-visible .tile-summary,
.library-view .character-tile.selected .tile-summary,
.library-view .character-tile:hover .tile-tags,
.library-view .character-tile:focus-visible .tile-tags,
.library-view .character-tile.selected .tile-tags {
  width: 216px !important;
}

/* Keep the pencil monochrome and solid instead of letting an emoji-style glyph
   inherit a low-contrast colored rendering on some browsers. */
body.detail-active .character-detail-view .detail-image-edit-button {
  font-size: 0 !important;
}
body.detail-active .character-detail-view .detail-image-edit-button::before {
  content: "✎" !important;
  display: block !important;
  color: #ffffff !important;
  font-family: Arial, "Noto Sans", sans-serif !important;
  font-size: 19px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000000, 0 0 10px rgba(255, 255, 255, 0.34) !important;
}

/* =================================================================
   TRYVA PATCH 20 · MEDIA + DETAIL POLISH · 2026-07-01
   Scope: 38, 43–52 only. Card geometry, typography scale and the unified
   native view scroll introduced in Patch 17 remain unchanged.
================================================================= */

/* [38] One real SVG pencil, with a solid high-contrast surface. The legacy
   pseudo glyph is explicitly disabled so the control can never render twice. */
body.detail-active .character-detail-view .detail-image-edit-button::before,
body.detail-active .character-detail-view .detail-image-edit-button::after {
  content: none !important;
  display: none !important;
}
body.detail-active .character-detail-view .detail-image-edit-button,
body.detail-active .character-detail-view .detail-media-edit-control .detail-image-edit-button {
  display: grid !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 2px solid rgba(255,255,255,.82) !important;
  border-radius: 12px !important;
  background: #090a12 !important;
  color: #c084fc !important;
  font-size: 0 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.7) !important;
  backdrop-filter: none !important;
}
body.detail-active .character-detail-view .detail-image-edit-button svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 1px 1px #000) !important;
  pointer-events: none !important;
}
body.detail-active .character-detail-view .detail-image-edit-button:hover,
body.detail-active .character-detail-view .detail-image-edit-button:focus-visible {
  border-color: #fff !important;
  background: #5d35b5 !important;
  color: #eadcff !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.72), 0 0 0 3px rgba(157,111,244,.24) !important;
  transform: translateY(-1px) !important;
}

/* [46][47] The creator side preview is an identity card, not a second fake
   editor. It stays compact, uses the real card media, and leaves step 5's
   full-size card/detail previews untouched. */
body.create-active .cw-preview-panel {
  padding: 22px !important;
  background:
    radial-gradient(120% 65% at 50% -5%, rgba(111,74,190,.12), transparent 58%),
    #0e0d14 !important;
  scrollbar-gutter: stable !important;
}
body.create-active .cw-preview-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 0 2px !important;
}
body.create-active .cw-preview-head small {
  color: rgba(185,172,211,.62) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
body.create-active .cw-preview-head h2 {
  margin: 3px 0 0 !important;
  color: #f4f0fb !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
}
body.create-active .cw-preview-head > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(146,109,229,.22) !important;
  border-radius: 999px !important;
  background: rgba(89,58,157,.12) !important;
  color: #bca8eb !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
}
body.create-active .cw-preview-hero {
  position: relative !important;
  display: flex !important;
  min-height: 286px !important;
  height: 286px !important;
  margin: 0 0 12px !important;
  padding: 0 18px 18px !important;
  border: 1px solid rgba(190,171,235,.18) !important;
  border-radius: 18px !important;
  background: #17131f !important;
  box-shadow: 0 20px 44px rgba(0,0,0,.28) !important;
  isolation: isolate !important;
  overflow: hidden !important;
}
body.create-active .cw-preview-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, rgba(8,7,13,.04) 26%, rgba(8,7,13,.34) 58%, rgba(8,7,13,.96) 100%) !important;
  pointer-events: none !important;
}
body.create-active .cw-preview-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: radial-gradient(circle at 76% 18%, rgba(164,118,255,.14), transparent 42%) !important;
  pointer-events: none !important;
}
body.create-active .cw-preview-avatar {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(150deg,#282139,#111019) !important;
  color: rgba(255,255,255,.22) !important;
  font-size: 54px !important;
  overflow: hidden !important;
}
body.create-active .cw-preview-avatar > img,
body.create-active .cw-preview-avatar > video,
body.create-active .cw-preview-avatar .create-preview-avatar-media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}
body.create-active .cw-preview-hero h2,
body.create-active .cw-preview-hero p {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  text-align: left !important;
}
body.create-active .cw-preview-hero h2 {
  margin: auto 0 5px !important;
  color: #fff !important;
  font-size: 25px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.72) !important;
}
body.create-active .cw-preview-hero p {
  margin: 0 !important;
  color: rgba(239,234,247,.72) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
body.create-active .cw-preview-section,
body.create-active .cw-status-box {
  margin: 0 0 10px !important;
  padding: 15px !important;
  border: 1px solid rgba(183,164,224,.12) !important;
  border-radius: 14px !important;
  background: rgba(24,21,32,.76) !important;
  box-shadow: none !important;
}
body.create-active .cw-preview-section h3,
body.create-active .cw-status-box strong {
  color: #e9e4f1 !important;
  font-size: 12px !important;
}
body.create-active .cw-preview-traits {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 11px !important;
}
body.create-active .cw-preview-traits > span {
  max-width: 100% !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(167,132,235,.14) !important;
  border-radius: 9px !important;
  background: rgba(105,73,168,.10) !important;
  color: rgba(225,216,241,.78) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}
body.create-active .cw-preview-dialogue p {
  margin: 11px 0 0 !important;
  padding: 11px 12px !important;
  border-left: 2px solid rgba(151,106,244,.58) !important;
  border-radius: 0 9px 9px 0 !important;
  background: rgba(8,7,13,.35) !important;
  color: rgba(239,234,247,.82) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}
body.create-active .cw-status-box p {
  margin: 6px 0 0 !important;
  color: rgba(180,171,195,.7) !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

body:is(.create-active,.story-asset-create-active) .cw-media-split-intro {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 16px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(151,112,230,.16) !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(86,57,151,.12), rgba(22,19,31,.72)) !important;
}
body:is(.create-active,.story-asset-create-active) .cw-media-split-intro strong {
  display: block !important;
  margin-bottom: 3px !important;
  color: #eae4f4 !important;
  font-size: 13px !important;
}
body:is(.create-active,.story-asset-create-active) .cw-media-split-intro p {
  margin: 0 !important;
  color: rgba(180,171,195,.72) !important;
  font-size: 11px !important;
}
body.create-active .cw-image-editor-grid {
  align-items: start !important;
}
body.create-active .cw-split-media-card {
  min-width: 0 !important;
  overflow: hidden !important;
}
body.create-active .cw-split-media-actions {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto auto !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 12px 0 !important;
}
body.create-active .cw-split-media-actions > button {
  min-height: 40px !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}
body.create-active .cw-split-media-actions > small {
  grid-column: 1 / -1 !important;
  min-height: 17px !important;
  color: rgba(181,171,197,.68) !important;
  font-size: 10px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* [49] Dedicated seam blend between the copy panel and the banner media.
   It adds no click layer and leaves the existing global shade intact. */
.tryva-featured-media::before {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: clamp(92px, 22%, 238px) !important;
  background: linear-gradient(90deg, rgba(10,9,15,.98) 0%, rgba(10,9,15,.78) 28%, rgba(10,9,15,.30) 68%, transparent 100%) !important;
  pointer-events: none !important;
}

/* [50] Quote remains visible as character content, but quick edit no longer
   exposes a second quote editor/resizer over the artwork. */
body.detail-active .character-detail-view.detail-edit-mode .detail-quote-add-btn,
body.detail-active .character-detail-view.detail-edit-mode .detail-quote-remove-btn,
body.detail-active .character-detail-view.detail-edit-mode .detail-quote-edit-btn,
body.detail-active .character-detail-view.detail-edit-mode .quote-resize-handle {
  display: none !important;
}
body.detail-active .character-detail-view.detail-edit-mode .detail-quote-card {
  cursor: default !important;
}

/* [51] Detail starts at the real viewport edge. No negative transform or visual
   crop is used, so both the art and copy columns retain their exact geometry. */
body.detail-active .app-shell,
body.detail-active .workspace,
body.detail-active #characterDetailView,
body.detail-active #characterDetailView > .detail-hero {
  top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.detail-active #characterDetailView {
  inset-block-start: 0 !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
}

/* [52] Long descriptions disclose in place. There is no nested scrollbar;
   lower sections stay stable and the reader can opt into the full text. */
body.detail-active .character-detail-view #detailSummary {
  position: relative !important;
  padding-bottom: 0 !important;
}
body.detail-active .character-detail-view #detailSummary .detail-summary-content {
  position: relative !important;
  max-height: none !important;
  overflow: visible !important;
  transition: max-height 220ms ease !important;
}
body.detail-active .character-detail-view #detailSummary .detail-summary-content.is-collapsed {
  max-height: 214px !important;
  overflow: hidden !important;
}
body.detail-active .character-detail-view #detailSummary .detail-summary-content.is-collapsed::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 58px !important;
  background: linear-gradient(180deg, transparent, rgba(15,13,21,.96) 88%) !important;
  pointer-events: none !important;
}
body.detail-active .character-detail-view #detailSummary .detail-summary-prose {
  max-height: none !important;
  overflow: visible !important;
}
body.detail-active .character-detail-view #detailSummary .detail-summary-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 76px !important;
  min-height: 34px !important;
  margin: 10px 0 0 !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(165,130,229,.24) !important;
  border-radius: 9px !important;
  background: rgba(92,60,155,.12) !important;
  color: #c9b8eb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease !important;
}
body.detail-active .character-detail-view #detailSummary .detail-summary-toggle:hover,
body.detail-active .character-detail-view #detailSummary .detail-summary-toggle:focus-visible {
  border-color: rgba(184,149,250,.54) !important;
  background: rgba(111,72,190,.24) !important;
  color: #fff !important;
}
body.detail-active .character-detail-view #detailSummary .detail-summary-toggle.hidden,
body.detail-active .character-detail-view.detail-edit-mode #detailSummary .detail-summary-toggle {
  display: none !important;
}
@media (max-width: 900px) {
  body.detail-active .character-detail-view #detailSummary .detail-summary-content.is-collapsed {
    max-height: 188px !important;
  }
}

/* =================================================================
   TRYVA V5.34.54 PATCH21 · banner seam + transient position indicator
   The right-hand artwork is no longer darkened by a global radial veil.
   A single broad cross-fade spans the real copy/media boundary so no hard
   vertical edge remains, while the untouched right side keeps source color.
================================================================= */
.tryva-featured-media::before {
  content: none !important;
  display: none !important;
}
.tryva-hero-slide .tryva-featured-media,
.tryva-hero-slide .tryva-featured-hero-media,
.tryva-hero-slide .tryva-featured-hero-media.is-media-ready {
  filter: none !important;
}
.tryva-hero-slide::before {
  background-image: var(--tryva-hero-poster) !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 61% 100% !important;
  filter: saturate(.96) brightness(.94) blur(.35px) !important;
}
.tryva-featured-shade,
.tryva-hero-slide .tryva-featured-shade {
  background: linear-gradient(90deg,
    rgba(10,9,15,.995) 0%,
    rgba(10,9,15,.995) 27%,
    rgba(10,9,15,.975) 34%,
    rgba(10,9,15,.91) 39%,
    rgba(10,9,15,.78) 44%,
    rgba(10,9,15,.59) 49%,
    rgba(10,9,15,.39) 54%,
    rgba(10,9,15,.22) 59%,
    rgba(10,9,15,.10) 64%,
    rgba(10,9,15,.035) 69%,
    rgba(10,9,15,0) 74%) !important;
}
.tryva-hero-dots {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(0,5px,0) scale(.96) !important;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.22,.72,.2,1), visibility 0s linear 260ms !important;
}
.tryva-hero-dots.is-indicator-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) scale(1) !important;
  transition-delay: 0s !important;
}
.tryva-hero-dots.indicator-no-transition {
  transition: none !important;
}
.tryva-hero-dots.hidden {
  display: none !important;
}

/* =================================================================
   TRYVA V5.34.54 PATCH21 · creator media workspace
   The duplicate right-side preview and stage preview are removed. Step 5 now
   uses the same 318×354 real card surface as quick edit and keeps both media
   placement frames visible before a file is selected.
================================================================= */
body.create-active .cw-main {
  grid-template-columns: minmax(0,1fr) !important;
}
body.create-active .cw-preview-panel {
  display: none !important;
}
body.create-active .cw-footer {
  right: 0 !important;
}
body.create-active #createView .story-asset-step-panel[data-step-panel="4"] {
  max-width: 1240px !important;
  margin-inline: auto !important;
}
body.create-active #profileCropFrame.cw-create-crop-frame.profile {
  width: min(100%, var(--tryva-card-hover-w,318px)) !important;
  height: var(--tryva-card-h,354px) !important;
  aspect-ratio: 318 / 354 !important;
  margin: 16px auto 14px !important;
  padding: 0 !important;
  border-radius: var(--tryva-card-radius,14px) !important;
  overflow: hidden !important;
  background: #111019 !important;
  cursor: grab !important;
}
body.create-active #profileCropFrame.dragging {
  cursor: grabbing !important;
}
body.create-active #profileCropFrame .crop-card-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}
body.create-active #profileCropFrame .crop-card-inner > img,
body.create-active #profileCropFrame .crop-card-inner > video {
  max-width: none !important;
  max-height: none !important;
}
body.create-active #profileCropFrame.is-empty-placement .crop-card-inner {
  background: linear-gradient(145deg,rgba(43,34,60,.86),rgba(14,13,20,.98)) !important;
}


body.create-active .cw-empty-placement {
  display: grid !important;
  max-width: 310px !important;
  justify-items: center !important;
  gap: 8px !important;
  text-align: center !important;
  pointer-events: none !important;
}
body.create-active .cw-empty-placement > span {
  display: grid !important;
  width: 52px !important;
  height: 52px !important;
  place-items: center !important;
  border: 1px solid rgba(177,143,242,.32) !important;
  border-radius: 15px !important;
  background: rgba(111,72,190,.14) !important;
  color: #b99aee !important;
  font-size: 22px !important;
}
body.create-active .cw-empty-placement > strong {
  color: #e8e1f3 !important;
  font-size: 14px !important;
}
body.create-active .cw-empty-placement > p {
  margin: 0 !important;
  color: rgba(186,177,201,.68) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}
@media (max-width: 760px) {
  body.create-active #profileCropFrame.cw-create-crop-frame.profile {
    height: auto !important;
    aspect-ratio: 318 / 354 !important;
  }
  
}

/* =================================================================
   TRYVA V5.34.54 PATCH21 · detail edge and long-copy clearance
   The detail view fills its workspace while preserving the shared app shell.
   The copy rail reserves the real fixed action-bar height so expanded prose,
   first greeting and creator content can all scroll completely above it.
================================================================= */
body.detail-active #characterDetailView.character-detail-view {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.detail-active #characterDetailView.character-detail-view > .detail-hero {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.detail-active .character-detail-view .detail-copy {
  padding-bottom: 168px !important;
  scroll-padding-bottom: 168px !important;
}
body.detail-active .character-detail-view #detailGreeting,
body.detail-active .character-detail-view .creator-detail-panel,
body.detail-active .character-detail-view .related-section {
  scroll-margin-bottom: 150px !important;
}
@media (max-width: 900px) {
  body.detail-active .character-detail-view .detail-copy {
    padding-bottom: 150px !important;
    scroll-padding-bottom: 150px !important;
  }
  body.detail-active .character-detail-view .detail-copy::after {
    content: "" !important;
    display: block !important;
    height: 40px !important;
  }
  body.detail-active .character-detail-view #detailGreeting,
  body.detail-active .character-detail-view .creator-detail-panel,
  body.detail-active .character-detail-view .related-section {
    scroll-margin-bottom: 132px !important;
  }
}

/* Shared card/detail videos reveal on an already-decoded frame. Do not add a
   second opacity tween after the continuity veil is removed. */
video[data-shared-video-key] {
  transition: none !important;
}
video[data-shared-video-key]:not(.video-seeking-continuity) {
  opacity: 1 !important;
  visibility: visible !important;
}
body.detail-active .character-detail-view .detail-greeting-section {
  scroll-margin-bottom: 150px !important;
}
@media (max-width: 900px) {
  body.detail-active .character-detail-view .detail-greeting-section {
    scroll-margin-bottom: 132px !important;
  }
}

/* The detail action dock is a viewport control, not scrolling prose. Its fixed
   geometry plus the copy rail clearance keeps greeting/creator content visible. */
@media (min-width: 901px) {
  body.detail-active .character-detail-view .detail-actions {
    position: fixed !important;
    left: auto !important;
    right: 0 !important;
    bottom: 14px !important;
    width: var(--detail-info-width,640px) !important;
  }
}
@media (max-width: 900px) {
  body.detail-active .character-detail-view .detail-actions {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 10px !important;
    width: 100% !important;
  }
}


/* =================================================================
   TRYVA V5.34.54 PATCH22 · only #46 and #49
   #46: creator card placement is the same real quick-edit card surface.
   #49: the banner media itself fades into the left panel; no painted seam.
================================================================= */

/* #46 — no imitation card. The creator uses the exact quick-edit viewport,
   frame, copy, hover expansion and controls. Creator-only selectors may place
   the shared component, but may not restyle its card internals. */
body.create-active .cw-create-card-editor-stage {
  width: 100% !important;
  margin: 16px 0 0 !important;
}
body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport {
  width: var(--tryva-card-w, 248px) !important;
  height: var(--tryva-card-h, 354px) !important;
  overflow: hidden !important;
  border-radius: var(--tryva-card-radius, 18px) !important;
  transition: width 180ms cubic-bezier(.2,.75,.2,1), box-shadow 180ms ease !important;
}
body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport:hover,
body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport:focus,
body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport:focus-within {
  width: var(--tryva-card-hover-w, 318px) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,.45), 0 0 0 1px rgba(159,116,255,.36) !important;
}
body.create-active #profileCropFrame.cw-create-crop-frame.profile {
  width: var(--tryva-card-hover-w, 318px) !important;
  min-width: var(--tryva-card-hover-w, 318px) !important;
  height: var(--tryva-card-h, 354px) !important;
  aspect-ratio: 318 / 354 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--tryva-card-radius, 18px) !important;
  background: #050611 !important;
  cursor: grab !important;
}
body.create-active #profileCropFrame.dragging {
  cursor: grabbing !important;
  border-color: rgba(168,107,255,.78) !important;
  box-shadow: 0 0 0 1px rgba(159,91,255,.28), 0 24px 90px rgba(86,45,191,.32) !important;
}
body.create-active #profileCropFrame .crop-card-inner {
  position: relative !important;
  inset: auto !important;
  width: var(--tryva-card-hover-w, 318px) !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background: #050711 !important;
}
body.create-active #profileCropFrame .crop-card-inner > img,
body.create-active #profileCropFrame .crop-card-inner > video {
  max-width: none !important;
  max-height: none !important;
}
body.create-active #profileCropFrame .crop-card-copy {
  position: absolute !important;
  left: 15px !important;
  right: auto !important;
  bottom: 15px !important;
  width: 286px !important;
  z-index: 3 !important;
}
body.create-active #profileCropFrame .crop-card-gradient {
  display: none !important;
  background: none !important;
}
body.create-active #profileCropFrame .crop-card-inner::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
body.create-active .cw-split-media-card[data-media-kind="profile"] > .cw-crop-tools.simple-media-controls {
  justify-content: center !important;
  margin: 14px 0 0 !important;
}
@media (max-width: 760px) {
  body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport {
    width: min(var(--tryva-card-w, 248px), 86vw) !important;
  }
  body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport:hover,
  body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport:focus,
  body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport:focus-within {
    width: min(var(--tryva-card-hover-w, 318px), 86vw) !important;
  }
}

/* #49 — preserve the current right image. The image alpha fades into the
   existing left banner background, so the join is physically blended rather
   than covered by another dark rectangle. */
.tryva-hero-slide::before {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  transform: none !important;
}
.tryva-hero-slide .tryva-featured-media {
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.06) 6%,
    rgba(0,0,0,.20) 15%,
    rgba(0,0,0,.46) 27%,
    rgba(0,0,0,.74) 40%,
    rgba(0,0,0,.93) 52%,
    #000 64%) !important;
  mask-image: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.06) 6%,
    rgba(0,0,0,.20) 15%,
    rgba(0,0,0,.46) 27%,
    rgba(0,0,0,.74) 40%,
    rgba(0,0,0,.93) 52%,
    #000 64%) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

/* PATCH22 #46 final renderer parity: these declarations are identical to the
   quick-edit cover surface and only lift its media geometry above old wizard
   image rules. */
body.create-active #profileCropFrame.cw-create-crop-frame.profile {
  border: 1px solid rgba(255,255,255,.13) !important;
}
html body.create-active #profileCropFrame .crop-card-inner > img.tryva-card-cover-media,
html body.create-active #profileCropFrame .crop-card-inner > video.tryva-card-cover-media {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-card-cover-width, 100%) !important;
  height: var(--tryva-card-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-card-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}
body.create-active .cw-split-media-card[data-media-kind="profile"] > .cw-crop-tools.simple-media-controls {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 14px 0 0 !important;
}
body.create-active .cw-split-media-card[data-media-kind="profile"] > .cw-crop-tools.simple-media-controls > button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 0 12px !important;
}


/* PATCH22 #46 shared surface class. The creator does not register as the quick
   modal's legacy query target, but both surfaces use this single geometry and
   hover contract. */
.tryva-shared-card-editor-stage {
  display: grid !important;
  place-items: center !important;
  gap: 10px !important;
  padding: 18px !important;
  border: 1px solid rgba(159,116,255,.16) !important;
  border-radius: 20px !important;
  background: rgba(5,6,13,.72) !important;
}
.tryva-shared-card-editor-viewport {
  width: var(--tryva-card-w,248px) !important;
  height: var(--tryva-card-h,354px) !important;
  overflow: hidden !important;
  border-radius: var(--tryva-card-radius,18px) !important;
  transition: width 180ms cubic-bezier(.2,.75,.2,1), box-shadow 180ms ease !important;
  outline: none !important;
}
.tryva-shared-card-editor-viewport:hover,
.tryva-shared-card-editor-viewport:focus,
.tryva-shared-card-editor-viewport:focus-within {
  width: var(--tryva-card-hover-w,318px) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,.45), 0 0 0 1px rgba(159,116,255,.36) !important;
}
@media (hover:none) {
  .tryva-shared-card-editor-viewport:focus {
    width: var(--tryva-card-hover-w,318px) !important;
  }
}
@media (max-width:760px) {
  .tryva-shared-card-editor-viewport {
    width: min(var(--tryva-card-w,248px),86vw) !important;
  }
  .tryva-shared-card-editor-viewport:hover,
  .tryva-shared-card-editor-viewport:focus,
  .tryva-shared-card-editor-viewport:focus-within {
    width: min(var(--tryva-card-hover-w,318px),86vw) !important;
  }
}

/* v5.34.55 patch35.6.9m1m2r: direct sprite boards keep the real VN dialogue box as a placement reference. */
.direct-sprite-placement-board {
  container-type: size;
}

.direct-sprite-placement-board .direct-sprite-dialogue-box {
  left: 3.48cqw !important;
  right: 3.48cqw !important;
  bottom: 3.2cqh !important;
  min-height: 12.9cqh !important;
  padding: 2.9cqh 2.04cqw 2.66cqh !important;
  border-radius: 1.2cqw !important;
  pointer-events: none !important;
  cursor: default !important;
  animation: none !important;
  z-index: 72 !important;
  text-align: left !important;
}

.direct-sprite-placement-board .direct-sprite-dialogue-box .vn-dialogue-name {
  left: 1.56cqw !important;
  top: -1.9cqh !important;
  min-width: 6.5cqw !important;
  padding: 1cqh 1.08cqw !important;
  border-radius: .72cqw !important;
  font-size: clamp(10px, .84cqw, 14px) !important;
  line-height: 1.1 !important;
}

.direct-sprite-placement-board .direct-sprite-dialogue-box .vn-presentation-text {
  font-size: clamp(11px, 1.2cqw, 20px) !important;
  line-height: 1.72 !important;
}

.direct-sprite-placement-board .direct-sprite-dialogue-box .vn-advance-indicator {
  display: none !important;
}

.direct-sprite-placement-board.is-readonly,
.direct-sprite-placement-board.is-readonly .chat-sprite-transform-box {
  cursor: default !important;
}

.direct-sprite-placement-board.is-readonly .chat-sprite-resize-handle {
  display: none !important;
}

/* v5.34.55 patch35.6.9m1m2s: sprite fallback order cleanup is JS-only; direct board styles intentionally unchanged. */

/* v5.34.55 patch35.6.9m1m2t: direct sprite previews use the fullscreen VN stage geometry, not an approximate editor box. */
.direct-sprite-placement-board.is-fullscreen-reference {
  aspect-ratio: 1667 / 900 !important;
  container-type: size;
}

/* Fullscreen dialogue parity, scaled from the real stage-fullscreen values:
   viewport 1667x900, dialogue width 1120, side gutter 273.5, bottom 104. */
.direct-sprite-placement-board.is-fullscreen-reference .direct-sprite-dialogue-box {
  left: 16.4067cqw !important;
  right: 16.4067cqw !important;
  bottom: 11.5556cqh !important;
  min-height: 12.8889cqh !important;
  padding: 2.8889cqh 2.0396cqw 2.6667cqh !important;
  border-radius: 1.1998cqw !important;
  pointer-events: none !important;
  cursor: default !important;
  animation: none !important;
  z-index: 72 !important;
  text-align: left !important;
}

.direct-sprite-placement-board.is-fullscreen-reference .direct-sprite-dialogue-box .vn-dialogue-name {
  left: 1.5597cqw !important;
  top: -1.8889cqh !important;
  min-width: 6.4787cqw !important;
  padding: 1cqh 1.0798cqw !important;
  border-radius: 0.7199cqw !important;
  font-size: 0.8398cqw !important;
  line-height: 1.1 !important;
}

.direct-sprite-placement-board.is-fullscreen-reference .direct-sprite-dialogue-box .vn-presentation-text {
  font-size: 1.1998cqw !important;
  line-height: 1.72 !important;
}

.direct-sprite-placement-board.is-fullscreen-reference .direct-sprite-dialogue-box .vn-advance-indicator {
  display: none !important;
}

/* The create wizard should show the same fullscreen coordinate system, but not as a giant slab that hides under the sticky footer. */
.character-wizard .wizard-runtime-sprite-host {
  width: min(100%, 1040px) !important;
  max-width: 1040px !important;
  aspect-ratio: 1667 / 900 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-inline: auto !important;
}

.character-wizard .cw-chat-sprite-layout-card.integrated-runtime-editor {
  overflow: visible !important;
  padding-bottom: 18px !important;
}

.character-wizard .cw-chat-sprite-control-panel.integrated-runtime-controls {
  margin-top: 12px !important;
}

/* The edit modal uses the same fullscreen-reference surface while staying inside the viewport. */
.chat-sprite-editor-main .editor-runtime-sprite-host {
  width: min(100%, 1040px) !important;
  max-width: 1040px !important;
  aspect-ratio: 1667 / 900 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 270px) !important;
  margin-inline: auto !important;
}

@media (max-width: 760px) {
  .character-wizard .wizard-runtime-sprite-host,
  .chat-sprite-editor-main .editor-runtime-sprite-host {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }
}

/* v5.34.55 patch35.6.9m1m2u: emotion placement is unified with the base full-body placement board. */
.character-wizard[data-active-step="6"] .cw-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}

.character-wizard[data-active-step="6"] .cw-preview-panel {
  display: none !important;
}

.character-wizard .cw-emotion-layout-card.integrated-runtime-editor {
  overflow: visible !important;
  padding-bottom: 18px !important;
}

.character-wizard .emotion-runtime-sprite-host {
  width: min(100%, 1040px) !important;
  max-width: 1040px !important;
  aspect-ratio: 1667 / 900 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-inline: auto !important;
}

.direct-sprite-placement-board .chat-sprite-ghost-box {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 3;
  transform-origin: center bottom;
  will-change: transform;
  opacity: .2;
  filter: grayscale(.18) saturate(.55) drop-shadow(0 20px 24px rgba(0,0,0,.34));
  pointer-events: none;
  contain: layout style;
}

.direct-sprite-placement-board .chat-sprite-ghost-box > img,
.direct-sprite-placement-board .chat-sprite-ghost-box > video {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
  pointer-events: none;
  user-select: none;
}

.direct-sprite-placement-board .chat-sprite-ghost-box > span {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(4, 16, 25, .72);
  color: rgba(174, 229, 255, .9);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

.direct-sprite-placement-board .chat-sprite-ghost-box + .chat-sprite-transform-box {
  z-index: 5;
}

@media (max-width: 760px) {
  .character-wizard .emotion-runtime-sprite-host {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }
}

/* v5.34.55 patch35.6.9m1m2v: create wizard sprite boards fit above the sticky footer without changing placement math. */
.character-wizard[data-active-step="5"] .cw-step-panel.active,
.character-wizard[data-active-step="6"] .cw-step-panel.active {
  padding-bottom: 128px !important;
}

.character-wizard[data-active-step="5"] .cw-chat-sprite-layout-card.integrated-runtime-editor,
.character-wizard[data-active-step="6"] .cw-emotion-layout-card.integrated-runtime-editor {
  padding: 16px !important;
  padding-bottom: 14px !important;
}

.character-wizard[data-active-step="5"] .cw-chat-sprite-runtime-head,
.character-wizard[data-active-step="6"] .cw-chat-sprite-runtime-head {
  margin-bottom: 10px !important;
}

.character-wizard[data-active-step="5"] .wizard-runtime-sprite-host,
.character-wizard[data-active-step="6"] .emotion-runtime-sprite-host {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  margin-inline: auto !important;
}

.character-wizard[data-active-step="5"] .cw-chat-sprite-control-panel.integrated-runtime-controls,
.character-wizard[data-active-step="6"] .cw-chat-sprite-control-panel.integrated-runtime-controls {
  margin-top: 8px !important;
  gap: 8px !important;
}

@media (max-height: 860px) {
  .character-wizard[data-active-step="5"] .wizard-runtime-sprite-host,
  .character-wizard[data-active-step="6"] .emotion-runtime-sprite-host {
    width: min(100%, 820px) !important;
    max-width: 820px !important;
  }

  .character-wizard[data-active-step="5"] .cw-step-panel.active,
  .character-wizard[data-active-step="6"] .cw-step-panel.active {
    padding-top: 18px !important;
    padding-bottom: 132px !important;
  }

  .character-wizard[data-active-step="5"] .cw-panel-head,
  .character-wizard[data-active-step="6"] .cw-panel-head {
    margin-bottom: 14px !important;
  }
}

@media (max-height: 780px) {
  .character-wizard[data-active-step="5"] .wizard-runtime-sprite-host,
  .character-wizard[data-active-step="6"] .emotion-runtime-sprite-host {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
  }

  .character-wizard[data-active-step="5"] .cw-image-card,
  .character-wizard[data-active-step="6"] .cw-image-card {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

/* ================================================================
   TRYVA v5.34.55 patch35.6.9m1m2w — mobile responsive shell
   Mobile/tablet-only override layer. Desktop rules above remain the source of truth.
================================================================ */
@media (max-width: 900px) {
  :root {
    --tryva-sidebar-width: 0px !important;
    --tryva-mobile-gutter: clamp(12px, 3.6vw, 22px);
    --tryva-mobile-radius: 18px;
    --tryva-mobile-header-height: 56px;
    --tryva-mobile-footer-height: 76px;
    --tryva-mobile-safe-top: env(safe-area-inset-top, 0px);
    --tryva-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .app-shell {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .workspace {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: var(--tryva-app-height, 100dvh) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  body:not(.chat-active):not(.detail-active):not(.create-active) .workspace {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .view,
  .tryva-home-view,
  .all-characters-view,
  .library-view,
  .recent-page,
  .character-detail-view,
  .create-view,
  .chat-view {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  button,
  input,
  select,
  textarea {
    max-width: 100%;
    font: inherit;
  }

  button,
  .primary-button,
  .secondary-button,
  .ghost-button,
  .tool-button,
  .round-button,
  .icon-button {
    min-height: 42px;
    touch-action: manipulation;
  }

  textarea,
  input,
  select {
    font-size: 16px !important;
  }

  /* Keep the existing PC side navigation as a mobile drawer, never as a fixed column. */
  .mobile-nav-toggle {
    position: fixed !important;
    z-index: 1400 !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid var(--tryva-line) !important;
    border-radius: 14px !important;
    background: rgba(16, 14, 23, .92) !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px) !important;
  }

  .mobile-nav-backdrop {
    position: fixed !important;
    z-index: 1390 !important;
    inset: 0 !important;
    display: none !important;
    border: 0 !important;
    background: rgba(3, 4, 10, .62) !important;
    backdrop-filter: blur(4px) !important;
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    display: block !important;
  }

  .nav-shell {
    position: fixed !important;
    z-index: 1401 !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(276px, 82vw) !important;
    height: var(--tryva-app-height, 100dvh) !important;
    max-height: var(--tryva-app-height, 100dvh) !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    padding-top: max(18px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-nav-open .nav-shell {
    transform: translateX(0) !important;
  }

  body:not(.mobile-nav-open) .nav-shell {
    pointer-events: none !important;
  }

  /* Common page header containment. Page-specific composition comes in later patches. */
  .tryva-home-header,
  .all-characters-head,
  .library-view > .page-head,
  .recent-page-head {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    padding-left: calc(var(--tryva-mobile-gutter) + 48px) !important;
    padding-right: var(--tryva-mobile-gutter) !important;
  }

  .tryva-global-search,
  .recent-search,
  .library-toolbar,
  .all-character-toolbar {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .tryva-home-layout,
  .all-character-grid,
  .library-grid,
  .recent-page-list,
  .all-character-toolbar,
  .library-toolbar,
  .recent-filter-row {
    max-width: 100vw !important;
    min-width: 0 !important;
    padding-left: var(--tryva-mobile-gutter) !important;
    padding-right: var(--tryva-mobile-gutter) !important;
  }

  .tryva-home-layout {
    display: block !important;
    overflow: visible !important;
  }

  .tryva-home-main,
  .tryva-home-rail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tryva-home-rail {
    margin-top: 18px !important;
  }

  .character-grid,
  .all-character-grid,
  .library-grid,
  .creator-profile-character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .character-tile,
  .creator-profile-character-card,
  .library-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .selection-tray {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 10px var(--tryva-mobile-gutter) max(10px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 10px !important;
  }

  .selection-tray > div {
    gap: 10px !important;
  }

  .selection-tray > div > p {
    display: none !important;
  }

  .selected-list {
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .selection-tray .primary-button {
    min-width: 132px !important;
    white-space: nowrap !important;
  }

  .modal-backdrop,
  body.settings-screen-open #settingsModal.modal-backdrop {
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: max(12px, env(safe-area-inset-top, 0px)) var(--tryva-mobile-gutter) max(12px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal,
  .modal-card,
  .settings-modal,
  .account-modal,
  .chat-sprite-editor-modal,
  .media-crop-modal,
  .admin-modal {
    width: min(100%, 640px) !important;
    max-width: calc(100vw - (var(--tryva-mobile-gutter) * 2)) !important;
    max-height: calc(var(--tryva-app-height, 100dvh) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.chat-active .workspace,
  body.detail-active .workspace,
  body.create-active .workspace {
    height: var(--tryva-app-height, 100dvh) !important;
    max-height: var(--tryva-app-height, 100dvh) !important;
    overflow: hidden !important;
  }
}

@media (max-width: 640px) {
  :root {
    --tryva-mobile-gutter: 12px;
    --tryva-mobile-radius: 16px;
  }

  .tryva-home-header,
  .all-characters-head,
  .library-view > .page-head,
  .recent-page-head {
    padding-left: 64px !important;
    padding-right: 12px !important;
  }

  .character-grid,
  .all-character-grid,
  .library-grid,
  .creator-profile-character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .tryva-featured-hero {
    border-radius: 18px !important;
  }

  .genre-rail {
    grid-template-columns: 1fr !important;
  }

  .selection-tray {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .selection-tray .primary-button {
    min-width: 112px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .modal,
  .modal-card,
  .settings-modal,
  .account-modal,
  .chat-sprite-editor-modal,
  .media-crop-modal,
  .admin-modal {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    border-radius: 18px !important;
  }
}

/* ================================================================
   TRYVA v5.34.55 patch35.6.9m1m2x — mobile creator/editor layout
   Mobile/tablet-only creator assembly. Desktop rules above stay untouched.
================================================================ */
@media (max-width: 900px) {
  body.create-active {
    --tryva-creator-bottom-bar: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  body.create-active .workspace {
    height: var(--tryva-app-height, 100dvh) !important;
    max-height: var(--tryva-app-height, 100dvh) !important;
    overflow: hidden !important;
  }

  body.create-active .create-view.character-wizard {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--tryva-app-height, 100dvh) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) var(--tryva-mobile-gutter) 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    background: radial-gradient(circle at 50% -18%, rgba(124,92,255,.24), transparent 42%), #0b0a11 !important;
  }

  body.create-active .cw-page-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 0 0 52px !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.create-active .cw-page-head h1 {
    margin: 0 !important;
    font-size: clamp(20px, 5.2vw, 28px) !important;
    line-height: 1.12 !important;
  }

  body.create-active .cw-page-head p {
    display: none !important;
  }

  body.create-active .cw-page-head .ghost-button,
  body.create-active #backToPlayBtn {
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  body.create-active .cw-stepper {
    position: sticky !important;
    top: 0 !important;
    z-index: 34 !important;
    display: flex !important;
    width: calc(100% + (var(--tryva-mobile-gutter) * 2)) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 calc(var(--tryva-mobile-gutter) * -1) 12px !important;
    padding: 8px var(--tryva-mobile-gutter) 10px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(11,10,17,.98), rgba(11,10,17,.86)) !important;
    backdrop-filter: blur(16px) !important;
    scrollbar-width: none;
  }

  body.create-active .cw-stepper::-webkit-scrollbar {
    display: none;
  }

  body.create-active .cw-step {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 112px !important;
    max-width: 150px !important;
    min-height: 56px !important;
    padding: 9px 11px !important;
    border-radius: 14px !important;
    gap: 7px !important;
  }

  body.create-active .cw-step span {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 12px !important;
  }

  body.create-active .cw-step strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  body.create-active .cw-step small {
    display: none !important;
  }

  body.create-active .cw-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 calc(var(--tryva-creator-bottom-bar) + 18px) !important;
    overflow: visible !important;
  }

  body.create-active .cw-main {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    gap: 14px !important;
  }

  body.create-active .cw-step-panel {
    order: 1 !important;
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px 0 calc(var(--tryva-creator-bottom-bar) + 20px) !important;
    overflow: visible !important;
  }

  body.create-active .cw-step-panel.active {
    display: block !important;
  }

  body.create-active .cw-preview-panel {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 14px !important;
    padding: 16px !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: var(--tryva-mobile-radius) !important;
    background: rgba(18,16,26,.76) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.24) !important;
  }

  body.create-active .cw-preview-head {
    margin-bottom: 12px !important;
  }

  body.create-active .cw-preview-head small,
  body.create-active .cw-preview-head > span,
  body.create-active .cw-preview-section:nth-of-type(n/**/+3),
  body.create-active .cw-status-box p {
    display: none !important;
  }

  body.create-active .cw-preview-hero {
    min-height: 132px !important;
    border-radius: 16px !important;
  }

  body.create-active .cw-preview-avatar {
    width: 78px !important;
    height: 78px !important;
    border-radius: 18px !important;
  }

  body.create-active .cw-preview-hero h2 {
    font-size: 20px !important;
  }

  body.create-active .cw-preview-hero p,
  body.create-active .cw-preview-dialogue p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body.create-active .cw-panel-head,
  body.create-active .cw-field-list,
  body.create-active .cw-writing-card,
  body.create-active .cw-magic-row,
  body.create-active .cw-magic-result,
  body.create-active .cw-samples-card,
  body.create-active .cw-feedback-card,
  body.create-active .cw-stage-preview,
  body.create-active .cw-shared-image-upload,
  body.create-active .cw-image-grid,
  body.create-active .cw-image-editor-grid,
  body.create-active .cw-real-preview-grid,
  body.create-active .cw-sprite-editor,
  body.create-active .cw-emotion-layout,
  body.create-active .cw-chat-sprite-layout-card,
  body.create-active .cw-emotion-layout-card,
  body.create-active .cw-two-column-settings,
  body.create-active .cw-category-field,
  body.create-active .cw-info-box,
  body.create-active .cw-status-box,
  body.create-active .cw-adjustment-note {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.create-active .cw-panel-head,
  body.create-active .cw-writing-card,
  body.create-active .cw-magic-row,
  body.create-active .cw-samples-card,
  body.create-active .cw-feedback-card,
  body.create-active .cw-shared-image-upload,
  body.create-active .cw-category-field,
  body.create-active .cw-info-box,
  body.create-active .cw-status-box,
  body.create-active .cw-chat-sprite-layout-card.integrated-runtime-editor,
  body.create-active .cw-emotion-layout-card.integrated-runtime-editor {
    border-radius: var(--tryva-mobile-radius) !important;
    background: rgba(18,16,26,.78) !important;
    border-color: rgba(255,255,255,.1) !important;
  }

  body.create-active .cw-panel-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    padding: 14px !important;
  }

  body.create-active .cw-panel-head h2 {
    margin: 0 !important;
    font-size: 18px !important;
  }

  body.create-active .cw-panel-head p {
    margin-top: 3px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body.create-active .cw-field-list,
  body.create-active .cw-two-column-settings,
  body.create-active .cw-image-editor-grid,
  body.create-active .cw-real-preview-grid,
  body.create-active .cw-emotion-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.create-active .cw-field-row,
  body.create-active .cw-writing-card,
  body.create-active .cw-category-field {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  body.create-active .cw-writing-card textarea {
    min-height: 128px !important;
  }

  body.create-active .cw-writing-card.compact textarea {
    min-height: 96px !important;
  }

  body.create-active .cw-magic-row,
  body.create-active .cw-samples-card,
  body.create-active .cw-feedback-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  body.create-active .cw-magic-row .secondary-button,
  body.create-active .cw-magic-button {
    width: 100% !important;
  }

  body.create-active .cw-image-grid,
  body.create-active .cw-split-media-actions,
  body.create-active .cw-category-options {
    grid-template-columns: 1fr !important;
  }

  body.create-active .cw-split-media-card,
  body.create-active .cw-image-card {
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }

  body.create-active[data-active-step="5"] .cw-preview-panel,
  body.create-active[data-active-step="6"] .cw-preview-panel,
  .character-wizard[data-active-step="5"] .cw-preview-panel,
  .character-wizard[data-active-step="6"] .cw-preview-panel {
    display: none !important;
  }

  body.create-active .cw-chat-sprite-runtime-head,
  body.create-active .cw-chat-sprite-control-panel.integrated-runtime-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.create-active .cw-chat-sprite-runtime-head {
    align-items: start !important;
  }

  body.create-active .cw-chat-sprite-runtime-head > span {
    justify-self: start !important;
  }

  body.create-active .wizard-runtime-sprite-host,
  body.create-active .emotion-runtime-sprite-host {
    width: 100% !important;
    max-width: min(100%, calc((var(--tryva-app-height, 100dvh) - 260px) * 1.8522)) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-inline: auto !important;
  }

  body.create-active .cw-chat-sprite-control-panel.integrated-runtime-controls .cw-crop-tools,
  body.create-active .cw-crop-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  body.create-active .cw-crop-tools > button,
  body.create-active .cw-crop-tools > strong {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
    min-height: 42px !important;
    text-align: center !important;
  }

  body.create-active .cw-crop-tools > strong {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.create-active .cw-footer {
    position: sticky !important;
    z-index: 60 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: calc(100% + (var(--tryva-mobile-gutter) * 2)) !important;
    min-width: 0 !important;
    margin: 0 calc(var(--tryva-mobile-gutter) * -1) !important;
    padding: 10px var(--tryva-mobile-gutter) calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    background: linear-gradient(180deg, rgba(13,11,20,.72), rgba(13,11,20,.98)) !important;
    backdrop-filter: blur(18px) !important;
  }

  body.create-active .cw-footer .cw-history-tools {
    display: flex !important;
    gap: 6px !important;
  }

  body.create-active #wizardPrevBtn {
    flex: 0 0 auto !important;
    min-width: 84px !important;
    padding-inline: 12px !important;
  }

  body.create-active #wizardNextBtn,
  body.create-active #saveCharacterBtn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.create-active #wizardUndoBtn,
  body.create-active #wizardRedoBtn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .chat-sprite-editor-modal {
    width: min(100%, 720px) !important;
    max-width: calc(100vw - (var(--tryva-mobile-gutter) * 2)) !important;
    max-height: calc(var(--tryva-app-height, 100dvh) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    border-radius: var(--tryva-mobile-radius) !important;
  }

  .chat-sprite-editor-head {
    padding: 14px !important;
  }

  .chat-sprite-editor-head p {
    display: none !important;
  }

  .chat-sprite-editor-body.integrated-runtime-modal-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    max-height: calc(var(--tryva-app-height, 100dvh) - 174px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .chat-sprite-editor-main,
  .chat-sprite-editor-side {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .chat-sprite-editor-main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .chat-sprite-editor-side.compact {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .chat-sprite-editor-upload {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .chat-sprite-editor-upload > button,
  .chat-sprite-editor-tools > button {
    width: 100% !important;
  }

  .chat-sprite-editor-main .editor-runtime-sprite-host {
    width: 100% !important;
    max-width: min(100%, calc((var(--tryva-app-height, 100dvh) - 300px) * 1.8522)) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin-inline: auto !important;
  }

  .chat-sprite-editor-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .chat-sprite-editor-tools > button,
  .chat-sprite-editor-tools > strong {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
  }

  .chat-sprite-editor-modal .modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(180deg, rgba(13,11,20,.72), rgba(13,11,20,.98)) !important;
    backdrop-filter: blur(18px) !important;
  }
}

@media (max-width: 640px) {
  body.create-active {
    --tryva-creator-bottom-bar: calc(74px + env(safe-area-inset-bottom, 0px));
  }

  body.create-active .create-view.character-wizard {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.create-active .cw-page-head {
    padding-left: 52px !important;
  }

  body.create-active .cw-step {
    min-width: 96px !important;
    min-height: 50px !important;
    padding: 8px 9px !important;
  }

  body.create-active .cw-step strong {
    font-size: 11px !important;
  }

  body.create-active .cw-panel-head,
  body.create-active .cw-writing-card,
  body.create-active .cw-field-row,
  body.create-active .cw-magic-row,
  body.create-active .cw-samples-card,
  body.create-active .cw-feedback-card,
  body.create-active .cw-category-field,
  body.create-active .cw-chat-sprite-layout-card.integrated-runtime-editor,
  body.create-active .cw-emotion-layout-card.integrated-runtime-editor {
    padding: 12px !important;
    border-radius: 15px !important;
  }

  body.create-active .cw-preview-panel {
    display: none !important;
  }

  body.create-active .wizard-runtime-sprite-host,
  body.create-active .emotion-runtime-sprite-host,
  .chat-sprite-editor-main .editor-runtime-sprite-host {
    max-width: 100% !important;
  }

  body.create-active .cw-crop-tools > button,
  body.create-active .cw-crop-tools > strong,
  .chat-sprite-editor-tools > button,
  .chat-sprite-editor-tools > strong {
    flex-basis: 100% !important;
  }

  body.create-active .cw-footer {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.create-active #wizardPrevBtn {
    min-width: 64px !important;
    padding-inline: 10px !important;
  }

  body.create-active #wizardUndoBtn,
  body.create-active #wizardRedoBtn {
    width: 40px !important;
    min-width: 40px !important;
  }

  .chat-sprite-editor-modal {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    border-radius: 18px !important;
  }

  .chat-sprite-editor-body.integrated-runtime-modal-body {
    padding: 12px !important;
  }
}

/* ================================================================
   TRYVA v5.34.55 patch35.6.9m1m2y — mobile chat/browse/detail layout
   Final mobile shell layer for player-facing screens. Desktop rules stay untouched.
================================================================ */
@media (max-width: 900px) {
  /* Home / explore / library: reuse the PC card language, rebuild the page as a clean mobile feed. */
  body:not(.create-active):not(.chat-active):not(.detail-active) .play-view,
  body:not(.create-active):not(.chat-active):not(.detail-active) .tryva-home-layout,
  body:not(.create-active):not(.chat-active):not(.detail-active) .all-characters-view,
  body:not(.create-active):not(.chat-active):not(.detail-active) .library-view,
  body:not(.create-active):not(.chat-active):not(.detail-active) .recent-conversations-view {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .tryva-home-layout,
  .all-characters-view,
  .library-view,
  .recent-conversations-view {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .tryva-welcome-copy,
  .tryva-featured-hero,
  .character-section,
  .tryva-story-section,
  .tryva-rail-card,
  .all-character-toolbar,
  .library-toolbar,
  .recent-filter-row {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tryva-welcome-copy {
    padding: 14px var(--tryva-mobile-gutter) 8px !important;
  }

  .tryva-welcome-copy h1,
  .all-characters-title-row h1,
  .creator-profile-title-line h1,
  .recent-page-head h1 {
    font-size: clamp(25px, 7.4vw, 42px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.04em !important;
  }

  .tryva-featured-hero,
  .home-banner-editor-stage {
    min-height: clamp(250px, 46dvh, 420px) !important;
    height: auto !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .tryva-featured-copy {
    width: min(100%, 460px) !important;
    padding: clamp(20px, 5vw, 34px) !important;
  }

  .tryva-featured-copy h2,
  .tryva-featured-copy h3 {
    font-size: clamp(26px, 8vw, 48px) !important;
    line-height: 1.02 !important;
  }

  .tryva-home-rail,
  .mini-rail-block,
  .tryva-rail-card {
    width: 100% !important;
  }

  .section-head,
  .tryva-rail-head,
  .mini-rail-head,
  .creator-profile-section-head {
    align-items: center !important;
    gap: 10px !important;
  }

  .section-head h2,
  .tryva-rail-head h2,
  .mini-rail-head h2,
  .creator-profile-section-head h2 {
    font-size: clamp(18px, 5.2vw, 24px) !important;
    line-height: 1.12 !important;
  }

  .character-grid,
  .new-character-grid,
  .all-character-grid,
  .library-grid,
  .creator-profile-character-grid,
  .related-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .character-tile,
  .creator-profile-character-card,
  .library-card {
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .all-character-toolbar,
  .library-toolbar,
  .recent-filter-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .all-character-toolbar > *,
  .library-toolbar > *,
  .recent-filter-row > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .search-box,
  .tryva-global-search,
  .recent-search,
  .all-character-search {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .genre-rail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .play-rail-row,
  .play-rail-row-single {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Detail: keep the PC visual language, but convert the hero into a scrollable mobile poster card. */
  body.detail-active .workspace {
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--tryva-app-height, 100dvh) !important;
    max-height: var(--tryva-app-height, 100dvh) !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) var(--tryva-mobile-gutter) calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body.detail-active .character-detail-view,
  body.detail-active .character-detail-view:not(.hidden) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body.detail-active .character-detail-view .detail-top-left-controls{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 14 !important;
    width: auto !important;
    margin: 0 0 12px !important;
  }

  body.detail-active .character-detail-view .detail-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 78% 8%, rgba(132, 88, 255, 0.28), transparent 34%),
      linear-gradient(180deg, rgba(6, 6, 14, 0.42) 0%, #05060d 58%, #05060d 100%) !important;
  }

  body.detail-active .character-detail-view .detail-hero::before {
    background:
      linear-gradient(180deg, rgba(3,4,10,.04) 0%, rgba(3,4,10,.08) 44%, rgba(3,4,10,.92) 100%) !important;
  }

  body.detail-active .character-detail-view .detail-art {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: clamp(360px, 62dvh, 620px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(4,5,12,.24), rgba(4,5,12,.9)) !important;
  }

  body.detail-active .character-detail-view .detail-art::before {
    inset: -18px !important;
    z-index: 1 !important;
    width: auto !important;
    background: var(--detail-image-bg, none) center / cover no-repeat !important;
    filter: blur(18px) saturate(.76) brightness(.52) !important;
    opacity: .5 !important;
    transform: scale(1.08) !important;
  }

  body.detail-active .character-detail-view .detail-art::after {
    z-index: 2 !important;
    background:
      linear-gradient(180deg, rgba(4,5,12,.02) 0%, rgba(4,5,12,.08) 48%, rgba(4,5,12,.92) 100%),
      radial-gradient(circle at 70% 42%, transparent 0%, rgba(0,0,0,.22) 72%) !important;
  }

  body.detail-active .character-detail-view .detail-art img {
    inset: auto 0 -5% 0 !important;
    width: 100% !important;
    height: 104% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    z-index: 3 !important;
  }

  body.detail-active .character-detail-view .detail-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px clamp(16px, 4.4vw, 26px) 22px !important;
    background: linear-gradient(180deg, rgba(7,7,16,.94), rgba(7,7,16,.98)) !important;
  }

  body.detail-active .character-detail-view .detail-copy h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 10vw, 58px) !important;
    line-height: .98 !important;
  }

  body.detail-active .character-detail-view #detailSummary,
  body.detail-active .character-detail-view #detailQuote,
  body.detail-active .character-detail-view #detailMeta,
  body.detail-active .character-detail-view #detailTags {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.detail-active .character-detail-view .detail-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.detail-active .character-detail-view .detail-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  body.detail-active .character-detail-view .detail-actions .primary-button,
  body.detail-active .character-detail-view .detail-actions .secondary-button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
  }

  body.detail-active .character-detail-view .detail-selection-strip {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 120 !important;
    width: 100vw !important;
    height: auto !important;
    max-height: min(38dvh, 260px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px var(--tryva-mobile-gutter) calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow-y: auto !important;
    border-radius: 18px 18px 0 0 !important;
  }

  body.detail-active .character-detail-view .detail-selected-list {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.detail-active .character-detail-view .related-section {
    padding-bottom: 132px !important;
  }

  /* Chat: prioritize the VN stage and composer. The desktop insight rail is hidden on mobile. */
  body.chat-active .workspace {
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--tryva-app-height, 100dvh) !important;
    max-height: var(--tryva-app-height, 100dvh) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.chat-active .chat-view {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100vw !important;
    height: var(--tryva-app-height, 100dvh) !important;
    max-height: var(--tryva-app-height, 100dvh) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #09080e !important;
  }

  body.chat-active .chat-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    width: 100% !important;
    height: var(--tryva-app-height, 100dvh) !important;
    max-height: var(--tryva-app-height, 100dvh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body.chat-active .chat-header {
    min-height: calc(54px + env(safe-area-inset-top, 0px)) !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px 56px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  body.chat-active .chat-header > .round-button:first-child {
    position: absolute !important;
    left: 10px !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  body.chat-active .chat-header h2 {
    font-size: 15px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.chat-active .chat-header p {
    max-width: 100% !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.chat-active .chat-header .controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.chat-active .chat-header .tool-button {
    flex: 0 0 auto !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
  }

  body.chat-active .chat-header .auto-state-label {
    display: none !important;
  }

  body.chat-active .vn-stage-shell {
    min-height: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  body.chat-active .vn-stage {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }

  body.chat-active .vn-character {
    width: clamp(180px, 55vw, 340px) !important;
  }

  body.chat-active .vn-bubble {
    width: min(86vw, 340px) !important;
    max-height: min(34dvh, 190px) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  body.chat-active .vn-user-bubble {
    right: 10px !important;
    bottom: 10px !important;
    width: min(86vw, 360px) !important;
  }

  body.chat-active .messages,
  body.chat-active .chat-log-drawer {
    display: none !important;
  }

  body.chat-active .user-form {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) 46px !important;
    gap: 8px !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    background: rgba(12,10,18,.98) !important;
    backdrop-filter: blur(16px) !important;
  }

  body.chat-active .user-form.has-contact {
    grid-template-columns: auto auto minmax(0, 1fr) 46px !important;
  }

  body.chat-active .input-mode-btn,
  body.chat-active .contact-btn,
  body.chat-active .user-form button[type="submit"] {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  body.chat-active .input-mode-btn {
    font-size: 12px !important;
  }

  body.chat-active .user-form textarea#userInput,
  body.chat-active .user-form input#userInput {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    max-height: 118px !important;
    padding: 12px 13px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
  }

  body.chat-active .contact-menu {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-height: min(48dvh, 360px) !important;
    overflow-y: auto !important;
  }

  body.chat-active .insight-panel {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .tryva-featured-hero,
  .home-banner-editor-stage {
    min-height: clamp(220px, 42dvh, 340px) !important;
    border-radius: 18px !important;
  }

  .tryva-featured-copy {
    padding: 18px !important;
  }

  .tryva-featured-copy p,
  .tryva-rail-card p,
  .section-head p {
    font-size: 12px !important;
  }

  .character-grid,
  .new-character-grid,
  .all-character-grid,
  .library-grid,
  .creator-profile-character-grid,
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .genre-rail {
    grid-template-columns: 1fr !important;
  }

  body.detail-active .workspace {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.detail-active .character-detail-view .detail-hero {
    border-radius: 18px !important;
  }

  body.detail-active .character-detail-view .detail-art {
    height: clamp(330px, 58dvh, 520px) !important;
  }

  body.detail-active .character-detail-view .detail-copy {
    padding: 16px 14px 20px !important;
  }

  body.detail-active .character-detail-view .detail-stats {
    grid-template-columns: 1fr !important;
  }

  body.detail-active .character-detail-view .detail-selection-strip {
    max-height: min(44dvh, 300px) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.chat-active .chat-header {
    padding-right: 8px !important;
  }

  body.chat-active .chat-header .tool-button {
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
  }

  body.chat-active .chat-header .tool-button span:not(.auto-state-dot):not(.auto-state-icon) {
    display: none !important;
  }

  body.chat-active .vn-character {
    width: clamp(170px, 62vw, 300px) !important;
  }

  body.chat-active .vn-bubble,
  body.chat-active .vn-user-bubble {
    width: min(90vw, 330px) !important;
    font-size: 12.5px !important;
  }

  body.chat-active .user-form {
    grid-template-columns: 42px minmax(0, 1fr) 44px !important;
    gap: 7px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.chat-active .user-form.has-contact {
    grid-template-columns: 42px 42px minmax(0, 1fr) 44px !important;
  }

  body.chat-active .input-mode-btn,
  body.chat-active .contact-btn,
  body.chat-active .user-form button[type="submit"] {
    width: 42px !important;
    min-width: 42px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}


/* ================================================================
   TRYVA v5.34.55 patch35.6.9m1m2z — mobile creator/chat polish
   Hotfix over m1m2y. Desktop rules and sprite coordinate math stay untouched.
================================================================ */
@media (max-width: 640px) {
  /* Creator step 6/7: make the existing fullscreen-ratio board use the whole phone width
     without changing its internal 1667:900 coordinate system. */
  body.create-active[data-active-step="5"] .cw-step-panel,
  body.create-active[data-active-step="6"] .cw-step-panel,
  .character-wizard[data-active-step="5"] .cw-step-panel,
  .character-wizard[data-active-step="6"] .cw-step-panel {
    padding-top: 6px !important;
    padding-bottom: calc(var(--tryva-creator-bottom-bar, 74px) + 8px) !important;
  }

  body.create-active[data-active-step="5"] .cw-panel-head,
  body.create-active[data-active-step="6"] .cw-panel-head,
  .character-wizard[data-active-step="5"] .cw-panel-head,
  .character-wizard[data-active-step="6"] .cw-panel-head {
    margin-bottom: 8px !important;
    padding: 10px 12px !important;
  }

  body.create-active[data-active-step="5"] .cw-panel-head p,
  body.create-active[data-active-step="6"] .cw-panel-head p,
  .character-wizard[data-active-step="5"] .cw-panel-head p,
  .character-wizard[data-active-step="6"] .cw-panel-head p {
    display: none !important;
  }

  body.create-active[data-active-step="5"] .cw-chat-sprite-layout-card.integrated-runtime-editor,
  body.create-active[data-active-step="6"] .cw-emotion-layout-card.integrated-runtime-editor,
  .character-wizard[data-active-step="5"] .cw-chat-sprite-layout-card.integrated-runtime-editor,
  .character-wizard[data-active-step="6"] .cw-emotion-layout-card.integrated-runtime-editor {
    width: calc(100vw - 12px) !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw + 6px) !important;
    margin-right: calc(50% - 50vw + 6px) !important;
    padding: 8px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  body.create-active[data-active-step="5"] .cw-chat-sprite-runtime-head,
  body.create-active[data-active-step="6"] .cw-chat-sprite-runtime-head,
  .character-wizard[data-active-step="5"] .cw-chat-sprite-runtime-head,
  .character-wizard[data-active-step="6"] .cw-chat-sprite-runtime-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  body.create-active[data-active-step="5"] .cw-chat-sprite-runtime-head p,
  body.create-active[data-active-step="6"] .cw-chat-sprite-runtime-head p,
  body.create-active[data-active-step="5"] .cw-chat-sprite-runtime-head small,
  body.create-active[data-active-step="6"] .cw-chat-sprite-runtime-head small,
  .character-wizard[data-active-step="5"] .cw-chat-sprite-runtime-head p,
  .character-wizard[data-active-step="6"] .cw-chat-sprite-runtime-head p,
  .character-wizard[data-active-step="5"] .cw-chat-sprite-runtime-head small,
  .character-wizard[data-active-step="6"] .cw-chat-sprite-runtime-head small {
    display: none !important;
  }

  body.create-active[data-active-step="5"] .wizard-runtime-sprite-host,
  body.create-active[data-active-step="6"] .emotion-runtime-sprite-host,
  .character-wizard[data-active-step="5"] .wizard-runtime-sprite-host,
  .character-wizard[data-active-step="6"] .emotion-runtime-sprite-host {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }

  body.create-active[data-active-step="5"] .cw-chat-sprite-control-panel.integrated-runtime-controls,
  body.create-active[data-active-step="6"] .cw-chat-sprite-control-panel.integrated-runtime-controls,
  .character-wizard[data-active-step="5"] .cw-chat-sprite-control-panel.integrated-runtime-controls,
  .character-wizard[data-active-step="6"] .cw-chat-sprite-control-panel.integrated-runtime-controls {
    gap: 8px !important;
    margin-top: 8px !important;
  }

  body.create-active[data-active-step="5"] .cw-crop-tools,
  body.create-active[data-active-step="6"] .cw-crop-tools,
  .character-wizard[data-active-step="5"] .cw-crop-tools,
  .character-wizard[data-active-step="6"] .cw-crop-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.create-active[data-active-step="5"] .cw-crop-tools > button,
  body.create-active[data-active-step="6"] .cw-crop-tools > button,
  body.create-active[data-active-step="5"] .cw-crop-tools > strong,
  body.create-active[data-active-step="6"] .cw-crop-tools > strong,
  .character-wizard[data-active-step="5"] .cw-crop-tools > button,
  .character-wizard[data-active-step="6"] .cw-crop-tools > button,
  .character-wizard[data-active-step="5"] .cw-crop-tools > strong,
  .character-wizard[data-active-step="6"] .cw-crop-tools > strong {
    flex: none !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
  }

  body.create-active[data-active-step="5"] .cw-crop-tools > strong,
  body.create-active[data-active-step="6"] .cw-crop-tools > strong,
  .character-wizard[data-active-step="5"] .cw-crop-tools > strong,
  .character-wizard[data-active-step="6"] .cw-crop-tools > strong {
    grid-column: 1 / -1 !important;
  }

  /* Chat: keep the mobile VN stage centered and prevent desktop sprite offsets from
     pushing a character off the phone viewport. */
  body.chat-active .chat-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }

  body.chat-active .chat-header {
    min-height: calc(50px + env(safe-area-inset-top, 0px)) !important;
    padding-top: calc(7px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 7px !important;
  }

  body.chat-active .chat-header .controls {
    max-width: 48vw !important;
  }

  body.chat-active .vn-stage-shell,
  body.chat-active .vn-stage {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.chat-active .chat-view .vn-character,
  body.chat-active .vn-character,
  body.chat-active .chat-view .vn-character.speaking,
  body.chat-active .vn-character.speaking,
  body.chat-active .chat-view .vn-character.inactive,
  body.chat-active .vn-character.inactive {
    left: calc(var(--stage-x, 50) * 1%) !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  body.chat-active .chat-view .vn-standing,
  body.chat-active .vn-standing {
    left: calc(50% + var(--sprite-x, 0%)) !important;
    bottom: calc((100% * 28 / 720) - var(--sprite-y, 0%)) !important;
    max-width: 92vw !important;
    max-height: min(78dvh, 88%) !important;
  }

  body.chat-active .vn-dialogue-box {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    min-height: 94px !important;
    padding: 24px 16px 16px !important;
    border-radius: 16px !important;
  }

  body.chat-active .vn-dialogue-name,
  body.chat-active .vn-speaker-name {
    left: 16px !important;
    top: -16px !important;
    min-width: 86px !important;
    padding: 8px 14px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }

  body.chat-active .vn-presentation-text,
  body.chat-active .vn-dialogue-text {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 390px) {
  body.create-active[data-active-step="5"] .cw-chat-sprite-layout-card.integrated-runtime-editor,
  body.create-active[data-active-step="6"] .cw-emotion-layout-card.integrated-runtime-editor,
  .character-wizard[data-active-step="5"] .cw-chat-sprite-layout-card.integrated-runtime-editor,
  .character-wizard[data-active-step="6"] .cw-emotion-layout-card.integrated-runtime-editor {
    width: calc(100vw - 8px) !important;
    margin-left: calc(50% - 50vw + 4px) !important;
    margin-right: calc(50% - 50vw + 4px) !important;
    padding: 6px !important;
  }

  body.chat-active .chat-header .controls {
    max-width: 42vw !important;
  }

  body.chat-active .vn-dialogue-box {
    left: 10px !important;
    right: 10px !important;
  }
}


/* ================================================================
   TRYVA v5.34.55 patch35.6.9m1m2za — sprite reference visibility
   Scope: common create/edit direct sprite board shell only.
   It does not change saved placement math, x/y/scale values, fallback, or server logic.
================================================================ */
.character-wizard .wizard-runtime-sprite-host,
.character-wizard .emotion-runtime-sprite-host,
.chat-sprite-editor-main .editor-runtime-sprite-host {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1667 / 900 !important;
}

.character-wizard .wizard-runtime-sprite-host > .direct-sprite-placement-board,
.character-wizard .emotion-runtime-sprite-host > .direct-sprite-placement-board,
.chat-sprite-editor-main .editor-runtime-sprite-host > .direct-sprite-placement-board {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1667 / 900 !important;
  box-sizing: border-box !important;
}

.direct-sprite-placement-board.is-fullscreen-reference > .chat-sprite-guide-overlay {
  z-index: 7 !important;
}

.direct-sprite-placement-board.is-fullscreen-reference > .cw-transparent-grid {
  z-index: 0 !important;
}

.direct-sprite-placement-board.is-fullscreen-reference > .chat-sprite-transform-box,
.direct-sprite-placement-board.is-fullscreen-reference > .chat-sprite-ghost-box {
  z-index: 5 !important;
}

.direct-sprite-placement-board.is-fullscreen-reference > .direct-sprite-dialogue-box {
  z-index: 72 !important;
}

.direct-sprite-placement-board.is-fullscreen-reference .chat-sprite-guide-baseline {
  opacity: 1 !important;
  visibility: visible !important;
}


/* m1m2zzza: tablet/iPad-specific m1m2zb home/recent layer removed; PC baseline is authoritative. */

/* PATCH 35.6.9m1m2zd5 - mobile paint cost trim
   Keep desktop/PC visuals untouched.  On narrow touch layouts, reduce the
   most expensive blur/shadow layers that stack during scroll. */
@media (max-width: 900px) {
  .app-shell,
  .mobile-nav-surface,
  .selection-tray,
  .character-detail-panel,
  .tryva-side-panel,
  .recent-page-shell,
  .cw-shell,
  .cw-step-panel,
  .cw-preview-panel,
  .account-modal,
  .settings-panel,
  .help-panel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .character-tile,
  .catalog-card,
  .recent-room-card,
  .tryva-featured-hero,
  .tryva-side-card,
  .cw-step-panel,
  .cw-preview-panel {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26) !important;
  }
}

@media (max-width: 640px) {
  .character-tile,
  .catalog-card,
  .recent-room-card,
  .tryva-featured-hero,
  .tryva-side-card {
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22) !important;
  }
}

/* V5.34.55 Patch 35.6.9m1m2zs: stage time captions. */
.vn-time-caption {
  position: absolute;
  left: 50%;
  bottom: clamp(142px, 17vh, 196px);
  z-index: 73;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  max-width: min(560px, calc(100% - 44px));
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid rgba(170, 138, 255, 0.42);
  border-radius: 999px;
  background: linear-gradient(112deg, rgba(17, 15, 30, 0.82), rgba(31, 25, 52, 0.74));
  color: rgba(246, 244, 255, 0.94);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  animation: vn-time-caption-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vn-time-caption > i {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(174, 138, 255, 0.96);
  box-shadow: 0 0 18px rgba(174, 138, 255, 0.54);
}

.vn-time-caption > span {
  min-width: 0;
  overflow: hidden;
  color: rgba(244, 241, 255, 0.96);
  font-size: clamp(16px, 1.24vw, 24px);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vn-time-jump-layer {
  position: absolute;
  inset: 0;
  z-index: 73;
  display: grid;
  place-items: center;
  padding: 28px;
  background: radial-gradient(circle at 50% 45%, rgba(15, 12, 28, 0.18), rgba(0, 0, 0, 0.24) 58%, rgba(0, 0, 0, 0.36));
  pointer-events: none;
  user-select: none;
  animation: vn-time-jump-scrim-in 280ms ease both;
}

.vn-time-jump-card {
  width: min(640px, calc(100% - 32px));
  min-height: 156px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  padding: 30px 42px 28px;
  border: 1px solid rgba(188, 150, 255, 0.58);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(14, 12, 27, 0.92), rgba(28, 23, 46, 0.84));
  box-shadow: 0 34px 94px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
  color: #fff;
  text-align: center;
  transform: translateY(-5vh);
  animation: vn-time-jump-card-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vn-time-jump-card > strong {
  color: rgba(255, 255, 255, 0.98);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.vn-time-jump-card > span {
  color: rgba(226, 218, 248, 0.9);
  font-size: clamp(17px, 1.55vw, 24px);
  font-weight: 750;
  line-height: 1.35;
}

.vn-time-jump-card > i {
  width: min(300px, 58%);
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(169, 130, 255, 0.72), transparent);
}

body.stage-fullscreen .vn-time-caption {
  bottom: 232px;
}

body.stage-fullscreen .vn-time-jump-card {
  transform: translateY(-4vh);
}

@keyframes vn-time-caption-in {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.985); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes vn-time-jump-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vn-time-jump-card-in {
  from { opacity: 0; transform: translateY(calc(-5vh + 10px)) scale(0.985); }
  to { opacity: 1; transform: translateY(-5vh) scale(1); }
}

@media (max-width: 900px) {
  .vn-time-caption {
    bottom: 130px;
    min-height: 38px;
    max-width: calc(100% - 24px);
    padding: 0 16px;
    gap: 9px;
  }

  .vn-time-caption > i {
    width: 8px;
    height: 8px;
  }

  .vn-time-caption > span {
    font-size: 13px;
  }

  .vn-time-jump-layer {
    padding: 18px;
  }

  .vn-time-jump-card {
    min-height: 128px;
    padding: 24px 24px 22px;
    border-radius: 22px;
  }

  body.stage-fullscreen .vn-time-caption {
    bottom: 182px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vn-time-caption,
  .vn-time-jump-layer,
  .vn-time-jump-card {
    animation: none !important;
    transition: none !important;
  }
}

/* Patch 35.6.9m1m2zzl/zzm: manual room title editing + non-invasive chat-sprite quality UI. */
.chat-title-block{
  min-width:0!important;
  flex:1 1 auto!important;
}
.chat-title-row{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}
.chat-title-row h2{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.room-title-edit-button{
  flex:0 0 auto!important;
  height:24px!important;
  padding:0 8px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.06)!important;
  color:#a99fd0!important;
  font-size:11px!important;
  line-height:22px!important;
  cursor:pointer!important;
}
.room-title-edit-button:hover,
.room-title-edit-button:focus-visible{
  border-color:rgba(139,109,255,.35)!important;
  color:#fff!important;
}
.sidebar-recent-title-edit{
  position:absolute!important;
  right:42px!important;
  top:10px!important;
  width:28px!important;
  height:28px!important;
  border:0!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.05)!important;
  color:#8a82a0!important;
  opacity:0!important;
  cursor:pointer!important;
  transition:opacity .16s ease, background .16s ease, color .16s ease!important;
}
.sidebar-recent-item:hover .sidebar-recent-title-edit,
.sidebar-recent-item:focus-within .sidebar-recent-title-edit{
  opacity:1!important;
}
.sidebar-recent-title-edit:hover,
.sidebar-recent-title-edit:focus-visible{
  background:rgba(139,109,255,.14)!important;
  color:#fff!important;
}
.recent-page-list .sidebar-recent-title-edit{
  right:44px!important;
}

/* ================================================================
   TRYVA PATCH35.6.9m1m2zzp · room title touch + iPad banner position
   Scope: do not touch character card media placement.
================================================================ */
.sidebar-recent-title-edit{
  z-index: 6 !important;
  pointer-events: auto !important;
}
.room-title-edit-button{
  min-width: 44px !important;
  min-height: 30px !important;
  touch-action: manipulation !important;
}


/* ================================================================
   TRYVA PATCH35.6.9m1m2zzq · iPad/touch card preview + video controls guard
   Scope: cards/catalog/recent video controls only; detail poster placement is next patch.
================================================================ */
.character-tile video,
.catalog-card video,
.avatar-rail-item video,
.recent-room-art video,
.tryva-home-recent-art video,
.sidebar-recent-item video,
.tryva-home-recent-item video,
.creator-profile-character-card video {
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
.character-tile video::-webkit-media-controls,
.character-tile video::-webkit-media-controls-panel,
.character-tile video::-webkit-media-controls-start-playback-button,
.character-tile video::-webkit-media-controls-play-button,
.catalog-card video::-webkit-media-controls,
.catalog-card video::-webkit-media-controls-panel,
.catalog-card video::-webkit-media-controls-start-playback-button,
.catalog-card video::-webkit-media-controls-play-button,
.avatar-rail-item video::-webkit-media-controls,
.avatar-rail-item video::-webkit-media-controls-panel,
.avatar-rail-item video::-webkit-media-controls-start-playback-button,
.avatar-rail-item video::-webkit-media-controls-play-button,
.recent-room-art video::-webkit-media-controls,
.recent-room-art video::-webkit-media-controls-panel,
.recent-room-art video::-webkit-media-controls-start-playback-button,
.recent-room-art video::-webkit-media-controls-play-button,
.tryva-home-recent-art video::-webkit-media-controls,
.tryva-home-recent-art video::-webkit-media-controls-panel,
.tryva-home-recent-art video::-webkit-media-controls-start-playback-button,
.tryva-home-recent-art video::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}

/* Patch 35.6.9 m1m2zzr: detail video poster/fallback uses the exact same crop geometry as the real detail media. */
body.detail-active .character-detail-view .detail-art > .detail-video-poster-fallback.tryva-detail-media,
.tryva-detail-preview-clone .detail-art > .detail-video-poster-fallback.tryva-detail-media,
.simple-detail-live-preview .detail-art > .detail-video-poster-fallback.tryva-detail-media {
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 140ms ease !important;
}
body.detail-active .character-detail-view .detail-art > .detail-video-poster-fallback.tryva-detail-media.is-media-ready,
.tryva-detail-preview-clone .detail-art > .detail-video-poster-fallback.tryva-detail-media.is-media-ready,
.simple-detail-live-preview .detail-art > .detail-video-poster-fallback.tryva-detail-media.is-media-ready {
  opacity: 1 !important;
}
body.detail-active .character-detail-view .detail-art > .detail-video-poster-fallback.tryva-detail-media.is-leaving,
.tryva-detail-preview-clone .detail-art > .detail-video-poster-fallback.tryva-detail-media.is-leaving,
.simple-detail-live-preview .detail-art > .detail-video-poster-fallback.tryva-detail-media.is-leaving {
  opacity: 0 !important;
}
body.detail-active .character-detail-view .detail-art > video#detailImage.tryva-detail-media {
  z-index: 3 !important;
}
html body.detail-active .character-detail-view .detail-art > img.detail-video-poster-fallback.tryva-detail-media.tryva-cover-media,
html body .tryva-detail-preview-clone .detail-art > img.detail-video-poster-fallback.tryva-detail-media.tryva-cover-media,
html body .simple-detail-live-preview .detail-art > img.detail-video-poster-fallback.tryva-detail-media.tryva-cover-media {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-cover-width, 100%) !important;
  height: var(--tryva-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}

/* TRYVA PATCH35.6.9m1m2zzs · iPad media/recent-room stability */
.recent-room-avatar .recent-room-media,
.tryva-home-recent-art .recent-room-media,
.recent-page-list .recent-room-media {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: translate(var(--card-pan-x, 0px), var(--card-pan-y, 0px)) scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 50%) !important;
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
.recent-room-avatar video,
.tryva-home-recent-art video,
.recent-page-list .recent-room-media:is(video) {
  display: none !important;
}
.character-detail-view .detail-art video,
.character-detail-modal .detail-art video {
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
.character-detail-view .detail-art video::-webkit-media-controls,
.character-detail-view .detail-art video::-webkit-media-controls-panel,
.character-detail-view .detail-art video::-webkit-media-controls-start-playback-button,
.character-detail-view .detail-art video::-webkit-media-controls-play-button,
.character-detail-modal .detail-art video::-webkit-media-controls,
.character-detail-modal .detail-art video::-webkit-media-controls-panel,
.character-detail-modal .detail-art video::-webkit-media-controls-start-playback-button,
.character-detail-modal .detail-art video::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}


/* TRYVA PATCH35.6.9m1m2zzt · iPad layout/chat viewport stability */
:root {
  --tryva-visual-height: var(--tryva-app-height, 100dvh);
  --tryva-visual-width: 100vw;
  --tryva-visual-offset-top: 0px;
  --tryva-keyboard-offset: 0px;
}



body.stage-fullscreen .chat-panel {
  height: var(--tryva-visual-height) !important;
  min-height: var(--tryva-visual-height) !important;
  padding-top: var(--tryva-safe-top) !important;
  padding-bottom: max(0px, var(--tryva-safe-bottom)) !important;
}

body.stage-fullscreen .fullscreen-header-reveal-zone {
  height: max(24px, calc(var(--tryva-safe-top) + 14px)) !important;
}

body.stage-fullscreen .stage-fullscreen-exit {
  top: max(14px, calc(var(--tryva-safe-top) + 8px)) !important;
  right: max(14px, calc(var(--tryva-safe-right) + 8px)) !important;
}

body.stage-fullscreen .user-form {
  margin-bottom: max(16px, calc(var(--tryva-safe-bottom) + 12px)) !important;
}

body.stage-fullscreen.is-visual-keyboard-open .user-form {
  margin-bottom: max(8px, var(--tryva-safe-bottom)) !important;
}


/* Patch 35.6.9m1m2zzu: iPad performance / creator / admin polish */
html {
  -webkit-tap-highlight-color: transparent;
}

.character-tile,
.catalog-card,
.avatar-rail-item,
.recent-room-card,
.sidebar-recent-item,
.tryva-home-recent-item,
.tryva-hero-slide,
.tryva-featured-hero,
.tile-art,
.catalog-card-media,
.recent-room-art,
.tryva-home-recent-art,
.detail-art,
.home-banner-editor-preview,
.card-image-editor-modal #cropDragFrame,
.direct-sprite-placement-board,
.chat-sprite-transform-box {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.messages,
.message,
.bubble,
.room-error-logs-text,
textarea,
input,
.create-field textarea,
.create-field input {
  -webkit-user-select: text;
  user-select: text;
}

#actorOutputLogPanel .room-error-logs-text,
#errorLogPanel .room-error-logs-text,
.insight-pane,
.admin-character-list,
.admin-character-manager-modal,
.home-banner-editor-controls,
.card-image-editor-modal{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


/* Patch 35.6.9m1m2zzu: creator keyboard/footer and crop handle polish */


/* TRYVA PATCH35.6.9m1m2zzv · right-rail removal and iPad PC-scale layout fix
   Scope: Home rail removal, iPad card ratio/touch hover parity, banner/detail media frame fixes,
   and in-game title edit button removal. No server/API changes. */
/* The site no longer has a Home right rail. All viewports consume the same
   single content track owned by styles-system.css. */
.tryva-home-rail,
body.play-active #playView .tryva-home-rail {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* TRYVA PATCH35.6.9m1m2zzza · PC baseline lock: iPad/tablet custom layer removed. Mobile will be reimplemented later. */
/* PATCH35.6.9m1m2zzzc: PC-first fixes.  Home character rails become one
   horizontal carousel structure; mobile/tablet implementation is deferred. */
.tryva-home-card-carousel {
  position: relative !important;
  width: min(100%, calc((var(--tryva-card-w, 248px) * 4.5) + (18px * 4))) !important;
  max-width: min(100%, calc((var(--tryva-card-w, 248px) * 4.5) + (18px * 4))) !important;
  padding: 10px 0 24px !important;
  overflow: visible !important;
}
.tryva-home-card-carousel > .character-grid,
.play-view .tryva-home-card-carousel > #characterGrid.character-grid,
.play-view .tryva-home-card-carousel > #newCharacterRail.character-grid {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(var(--tryva-card-h, 354px) + 28px) !important;
  margin: 0 !important;
  padding: 8px 0 26px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
}
.tryva-home-card-carousel > .character-grid::-webkit-scrollbar { display: none !important; }


.tryva-home-card-carousel::before,
.tryva-home-card-carousel::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 14px;
  width: 76px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.tryva-home-card-carousel::before {
  left: 0;
  background: linear-gradient(90deg, rgba(8,9,15,.58), rgba(8,9,15,0));
}
.tryva-home-card-carousel::after {
  right: 0;
  background: linear-gradient(270deg, rgba(8,9,15,.58), rgba(8,9,15,0));
}
.tryva-home-card-carousel.has-overflow:not(.at-start)::before,
.tryva-home-card-carousel.has-overflow:not(.at-end)::after { opacity: 1; }
.tryva-home-card-arrow {
  position: absolute !important;
  z-index: 8 !important;
  top: calc(50% - 8px) !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 999px !important;
  background: rgba(5,6,11,.72) !important;
  color: rgba(255,255,255,.96) !important;
  font-size: 31px !important;
  line-height: 1 !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.46) !important;
  backdrop-filter: blur(12px) !important;
  transform: translateY(-50%) !important;
}
.tryva-home-card-arrow-left { left: 10px !important; }
.tryva-home-card-arrow-right { right: 10px !important; }
.tryva-home-card-arrow[hidden] { display: none !important; }
.tryva-home-card-arrow:disabled { opacity: 0 !important; pointer-events: none !important; }

/* Recent conversations: no fake filters and no hard visual clipping. */
.recent-filter-row { display: none !important; }
.tryva-home-recent-list,
.recent-page-list,
#recentRoomList,
#homeRecentRoomList {
  max-height: none !important;
  overflow: visible !important;
}

/* Custom room-title editor.  Native prompt was politely escorted out. */
.room-title-edit-modal { width: min(460px, calc(100vw - 28px)) !important; }
.room-title-edit-body { display: grid; gap: 12px; padding: 18px; }
.room-title-edit-body label { display: grid; gap: 8px; color: rgba(235,230,255,.82); font-weight: 760; }
.room-title-edit-body input {
  width: 100%; min-height: 46px; border: 1px solid rgba(151,111,244,.28); border-radius: 12px;
  padding: 0 13px; background: rgba(9,11,18,.86); color: #fff; outline: none;
}
.room-title-edit-body input:focus { border-color: rgba(178,137,255,.72); box-shadow: 0 0 0 3px rgba(124,77,255,.16); }
.room-title-edit-body p { margin: 0; color: rgba(190,181,214,.7); font-size: 12.5px; line-height: 1.55; }
.room-title-edit-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 18px; }
.room-title-edit-actions button { min-height: 42px; padding: 0 15px; border-radius: 11px; }

/* Drag-and-drop upload affordance for existing media inputs. */
.tryva-drop-upload-zone { position: relative; }
.tryva-drop-upload-zone.is-drag-over { outline: 2px dashed rgba(178,137,255,.82) !important; outline-offset: 4px; }
.tryva-drop-upload-zone.is-drag-over::before {
  content: "파일을 놓으면 교체";
  position: absolute; z-index: 60; inset: 10px; display: grid; place-items: center;
  border-radius: inherit; background: rgba(7,8,14,.72); color: #fff; font-weight: 850;
  pointer-events: none; backdrop-filter: blur(8px);
}

/* PATCH35.6.9m1m2zzzc-verify: PC carousel is PC-only; touch/tablet keeps the
   PC-baseline list without forcing the new carousel experiment. */
/* Recent Conversations must grow downward instead of dying quietly after a few
   rows.  The old view-level overflow:hidden was the actual little guillotine. */
.recent-conversations-view {
  overflow: auto !important;
}
.recent-page-list,
#recentRoomList {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}


/* PATCH35.6.9m1m2zzzd · rebuild PC core fixes */
.play-view .tryva-home-card-carousel {
  position: relative !important;
  width: min(100%, calc((var(--tryva-card-w, 248px) * 4.5) + (18px * 4))) !important;
  max-width: min(100%, calc((var(--tryva-card-w, 248px) * 4.5) + (18px * 4))) !important;
  overflow: visible !important;
  padding: 10px 44px 24px 0 !important;
}
.play-view .tryva-home-card-carousel > .character-grid,
.play-view .tryva-home-card-carousel > #characterGrid.character-grid,
.play-view .tryva-home-card-carousel > #newCharacterRail.character-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  align-items: flex-start !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(var(--tryva-card-h, 354px) + 28px) !important;
  margin: 0 !important;
  padding: 8px 0 26px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
}
.play-view .tryva-home-card-carousel > .character-grid::-webkit-scrollbar { display: none !important; }
.play-view .tryva-home-card-carousel .character-tile {
  flex: 0 0 var(--tryva-card-w, 248px) !important;
  width: var(--tryva-card-w, 248px) !important;
  max-width: var(--tryva-card-w, 248px) !important;
  scroll-snap-align: start !important;
}
.play-view .tryva-home-card-arrow {
  position: absolute !important;
  top: 45% !important;
  z-index: 9 !important;
  width: 38px !important;
  height: 64px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 999px !important;
  background: rgba(9, 7, 18, .72) !important;
  color: #fff !important;
  backdrop-filter: blur(10px) !important;
  cursor: pointer !important;
}
.play-view .tryva-home-card-arrow-left { left: -18px !important; }
.play-view .tryva-home-card-arrow-right { right: 2px !important; }
.play-view .tryva-home-card-arrow[hidden] { display: none !important; }

.recent-conversations-view { overflow: auto !important; }
.recent-filter-row { display: none !important; }
.recent-page-list {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-content: start !important;
  padding-bottom: 64px !important;
}
.room-title-edit-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.room-title-edit-button[hidden] {
  display: none !important;
}
.room-title-edit-modal {
  width: min(420px, calc(100vw - 32px)) !important;
}
.room-title-edit-body {
  padding: 18px 20px 4px !important;
}
.room-title-edit-body label {
  display: grid !important;
  gap: 8px !important;
  color: #d8d2f5 !important;
  font-size: 13px !important;
}
.room-title-edit-body input {
  width: 100% !important;
  border: 1px solid var(--tryva-line) !important;
  border-radius: 12px !important;
  padding: 12px 13px !important;
  background: var(--tryva-surface-2) !important;
  color: #fff !important;
}
.room-title-edit-body p {
  margin: 10px 0 0 !important;
  color: #9188ad !important;
  font-size: 12px !important;
}
.room-title-edit-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 16px 20px 20px !important;
}
.detail-quote-card,
.detail-quote-add-btn,
.detail-quote-edit-btn,
.detail-quote-remove-btn,
.detail-quote-input,
.detail-quote-edit-actions,
[data-action="add-detail-quote"],
[data-action="detail-quote-edit"],
[data-action="save-detail-quote"],
[data-action="cancel-detail-quote"],
[data-action="remove-detail-quote"],
[data-action="detail-quote-resize"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.tryva-specific-drop-zone {
  position: relative !important;
}
.tryva-specific-drop-zone::after {
  content: "파일을 여기에 놓아 교체" !important;
  position: absolute !important;
  inset: 14px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 40 !important;
  border: 2px dashed rgba(167, 139, 250, .8) !important;
  border-radius: 18px !important;
  background: rgba(11, 8, 24, .72) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  pointer-events: none !important;
}
.tryva-specific-drop-zone.is-drag-over::after {
  display: flex !important;
}


/* PATCH35.6.9m1m2zzze · home carousel width/fade/step correction
   - Recommendation and new-character rails keep the same carousel geometry.
   - Arrow navigation moves one card at a time.
   - Right fade mirrors the left fade and no longer relies on a padded black strip. */
.play-view .play-rail-row.play-rail-row-single {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}
.play-view .play-rail-row-single .mini-rail-block {
  width: min(100%, calc((var(--tryva-card-w, 248px) * 4.5) + (18px * 4))) !important;
  max-width: min(100%, calc((var(--tryva-card-w, 248px) * 4.5) + (18px * 4))) !important;
}
.play-view .tryva-home-card-carousel,
.play-view .play-rail-row-single .tryva-home-card-carousel {
  width: min(100%, calc((var(--tryva-card-w, 248px) * 4.5) + (18px * 4))) !important;
  max-width: min(100%, calc((var(--tryva-card-w, 248px) * 4.5) + (18px * 4))) !important;
  padding: 10px 0 24px !important;
  overflow: visible !important;
}
.play-view .tryva-home-card-carousel::before,
.play-view .tryva-home-card-carousel::after {
  top: 0 !important;
  bottom: 14px !important;
  width: 76px !important;
  opacity: 0;
  pointer-events: none !important;
}
.play-view .tryva-home-card-carousel::before {
  left: 0 !important;
  right: auto !important;
  background: linear-gradient(90deg, rgba(8,9,15,.58), rgba(8,9,15,0)) !important;
}
.play-view .tryva-home-card-carousel::after {
  left: auto !important;
  right: 0 !important;
  background: linear-gradient(270deg, rgba(8,9,15,.58), rgba(8,9,15,0)) !important;
}
.play-view .tryva-home-card-carousel.has-overflow:not(.at-start)::before,
.play-view .tryva-home-card-carousel.has-overflow:not(.at-end)::after {
  opacity: 1 !important;
}
.play-view .tryva-home-card-arrow-left {
  left: 10px !important;
}
.play-view .tryva-home-card-arrow-right {
  right: 10px !important;
}


/* PATCH35.6.9m1m2zzzf · cache bust + 5-card home carousel
   - Both recommendation and new-character rails show five full cards and the sixth card fading/peeking.
   - The previous one-card arrow step remains unchanged.
   - Core asset URLs are version-busted in index.html for mobile browsers. */
.play-view .tryva-home-card-carousel,
.play-view .play-rail-row-single .tryva-home-card-carousel,
.play-view .play-rail-row-single .mini-rail-block {
  width: min(100%, calc((var(--tryva-card-w, 248px) * 5.5) + (18px * 5))) !important;
  max-width: min(100%, calc((var(--tryva-card-w, 248px) * 5.5) + (18px * 5))) !important;
}
.play-view .tryva-home-card-carousel > .character-grid,
.play-view .tryva-home-card-carousel > #characterGrid.character-grid,
.play-view .tryva-home-card-carousel > #newCharacterRail.character-grid {
  gap: 18px !important;
  padding-right: 0 !important;
}
.play-view .tryva-home-card-carousel .character-tile,
.play-view .tryva-home-card-carousel > #characterGrid .character-tile,
.play-view .tryva-home-card-carousel > #newCharacterRail .character-tile {
  flex: 0 0 var(--tryva-card-w, 248px) !important;
  width: var(--tryva-card-w, 248px) !important;
  min-width: var(--tryva-card-w, 248px) !important;
  max-width: var(--tryva-card-w, 248px) !important;
}


/* PATCH35.6.9m1m2zzzg · reclaim hidden PC home rail for 5-card carousel
   The old right rail is hidden, but PC still reserved its 312px track plus gap.
   Reclaim that dead track so the visible home column can actually fit five full
   cards and the sixth fade/peek. */
@media (min-width: 1051px) and (hover: hover) and (pointer: fine) {
  body.play-active #playView .tryva-home-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  body.play-active #playView .tryva-home-main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  body.play-active #playView .character-section,
  body.play-active #playView .play-rail-row,
  body.play-active #playView .play-rail-row-single,
  body.play-active #playView .play-rail-row-single .mini-rail-block,
  body.play-active #playView .tryva-home-card-carousel {
    max-width: calc((var(--tryva-card-w, 248px) * 5.5) + (18px * 5)) !important;
  }
}


/* PATCH35.6.9m1m2zzzh · PC home carousel baseline for every viewport
   No separate iPad/mobile carousel branch.  The home character rails use the
   same PC card surface and horizontal carousel everywhere. */
body.play-active #playView .tryva-home-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
body.play-active #playView .tryva-home-main {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
}
body.play-active #playView .tryva-home-rail {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.play-active #playView .character-section,
body.play-active #playView .play-rail-row,
body.play-active #playView .play-rail-row-single,
body.play-active #playView .play-rail-row-single .mini-rail-block,
body.play-active #playView .tryva-home-card-carousel {
  width: min(100%, calc((var(--tryva-card-w, 248px) * 5.5) + (18px * 5))) !important;
  max-width: min(100%, calc((var(--tryva-card-w, 248px) * 5.5) + (18px * 5))) !important;
  min-width: 0 !important;
}
body.play-active #playView .tryva-home-card-carousel {
  position: relative !important;
  padding: 10px 0 24px !important;
  overflow: visible !important;
}
body.play-active #playView .tryva-home-card-carousel > .character-grid,
body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 0 26px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-inline: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
body.play-active #playView .tryva-home-card-carousel > .character-grid::-webkit-scrollbar {
  display: none !important;
}
body.play-active #playView .tryva-home-card-carousel .character-tile,
body.play-active #playView .tryva-home-card-carousel > #characterGrid .character-tile,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail .character-tile {
  flex: 0 0 var(--tryva-card-w, 248px) !important;
  width: var(--tryva-card-w, 248px) !important;
  min-width: var(--tryva-card-w, 248px) !important;
  max-width: var(--tryva-card-w, 248px) !important;
  scroll-snap-align: start !important;
}


/* PATCH35.6.9m1m2zzzn · Small room id badge for diagnostics */
.room-id-badge {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 2600;
  min-width: 0;
  max-width: min(160px, 44vw);
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(8, 7, 18, 0.56);
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.room-id-badge:hover,
.room-id-badge:focus-visible {
  opacity: 0.96;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(16, 13, 34, 0.78);
  transform: translateY(-1px);
}
.room-id-badge[data-copied="true"] {
  color: rgba(210, 255, 230, 0.92);
  border-color: rgba(105, 255, 170, 0.22);
}
.room-id-badge.hidden {
  display: none;
}
body.stage-fullscreen .room-id-badge {
  bottom: max(8px, env(safe-area-inset-bottom));
  right: max(8px, env(safe-area-inset-right));
}
@media (max-width: 720px) {
  .room-id-badge {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 3px 7px;
    font-size: 9px;
    opacity: 0.55;
  }
}

/* The in-game room title remains read-only. Destructive room actions live in
   the status panel instead of consuming a separate stage toolbar row. */
.room-title-edit-button { display: none !important; }


/* PATCH35.6.9m1m2zzzx · PC site parity on every device, mobile UI deferred
   Mobile/tablet-specific layouts are intentionally suppressed for now.  The
   service keeps the PC shell as the single source of truth until core features
   stop behaving like a haunted vending machine. */
:root {
  --tryva-desktop-site-width: 1440px !important;
  --tryva-sidebar-width: 236px !important;
}

html,
body {
  width: auto !important;
  min-width: var(--tryva-desktop-site-width) !important;
  max-width: none !important;
  overflow-x: auto !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

body.mobile-nav-open {
  overflow: auto !important;
}

.mobile-nav-toggle,
.mobile-nav-backdrop {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.app-shell {
  display: grid !important;
  grid-template-columns: var(--tryva-sidebar-width) minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: var(--tryva-desktop-site-width) !important;
  max-width: none !important;
  overflow: visible !important;
}

.nav-shell {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: var(--tryva-sidebar-width) !important;
  min-width: var(--tryva-sidebar-width) !important;
  max-width: var(--tryva-sidebar-width) !important;
  height: var(--tryva-app-height, 100vh) !important;
  max-height: none !important;
  transform: none !important;
  transition: none !important;
  pointer-events: auto !important;
}

.workspace {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

body:not(.chat-active):not(.detail-active):not(.create-active) .workspace {
  overflow-y: auto !important;
  overflow-x: visible !important;
}

@media (max-width: 900px), (max-width: 760px), (max-width: 680px), (max-width: 620px) {
  :root {
    --tryva-desktop-site-width: 1440px !important;
    --tryva-sidebar-width: 236px !important;
  }

  html,
  body {
    width: auto !important;
    min-width: var(--tryva-desktop-site-width) !important;
    max-width: none !important;
    overflow-x: auto !important;
  }

  .mobile-nav-toggle,
  .mobile-nav-backdrop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .app-shell {
    display: grid !important;
    grid-template-columns: var(--tryva-sidebar-width) minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: var(--tryva-desktop-site-width) !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .nav-shell {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: var(--tryva-sidebar-width) !important;
    min-width: var(--tryva-sidebar-width) !important;
    max-width: var(--tryva-sidebar-width) !important;
    height: var(--tryva-app-height, 100vh) !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto !important;
  }

  body:not(.chat-active):not(.detail-active):not(.create-active) .workspace {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
  }
}

/* PATCH35.7 V3.3 · iPad browser gesture guard
   Keep normal one-finger scrolling and pinch zoom, but stop double-tap page zoom
   and root overscroll from handing control to the browser pull-to-refresh gesture. */
html,
body {
  touch-action: manipulation;
  overscroll-behavior-y: none;
}

/* ============================================================
   EXPLORE REDESIGN (탐색) — 2026-07-12 · r2 버튼/간격 개편
   형태 언어: ① 세그먼트 트랙(성별·랭킹 기간) ② 고스트 캡슐(필터·정렬·분류)
   ③ 보라 틴트 캡슐(적용 칩) ④ 면 버튼(적용/더보기). 간격 리듬 재조정.
   카드(catalog-card)는 기존 디자인 유지.
   ============================================================ */

.all-characters-view { position: relative; }

.explore-head { margin-bottom: 4px; }
.explore-title { margin: 6px 0 22px; font-size: 31px; font-weight: 800; letter-spacing: -0.015em; }
.explore-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--line-soft); }
.explore-tab {
  appearance: none; background: none; border: 0; padding: 0 2px 14px; cursor: pointer;
  color: var(--muted); font-size: 15.5px; font-weight: 600; position: relative;
  transition: color .15s ease;
}
.explore-tab:hover { color: var(--soft); }
.explore-tab.active { color: var(--text); }
.explore-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px;
  border-radius: 2px; background: linear-gradient(90deg, #9a6bff, #6d3ef0);
}
.explore-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.explore-pane { padding-top: 28px; }

/* ---------- 검색 ---------- */
.explore-search-wrap { position: relative; margin-bottom: 26px; }
.explore-search {
  display: flex; align-items: center; gap: 13px; height: 56px; padding: 0 20px;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); border-radius: 16px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.explore-search:focus-within {
  background: var(--surface);
  border-color: rgba(154, 107, 255, 0.75);
  box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.13);
}
.explore-search-icon { color: var(--muted); font-size: 19px; }
.explore-search input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font-size: 15.5px; }
.explore-search input::placeholder { color: var(--muted); }
.explore-search input::-webkit-search-cancel-button { display: none; }
.explore-search-clear { appearance: none; background: none; border: 0; color: var(--muted); font-size: 19px; cursor: pointer; padding: 4px; border-radius: 50%; }
.explore-search-clear:hover { color: var(--text); }

/* 자동완성 */
.explore-suggest {
  position: absolute; z-index: 60; top: calc(100% + 10px); left: 0; right: 0;
  background: #12131d; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 22px 24px 16px;
  display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 28px;
}
.explore-suggest-col h4 { margin: 0 0 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.explore-suggest-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.explore-suggest-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  appearance: none; background: none; border: 0; border-radius: 11px; padding: 7px 9px;
  color: var(--text); cursor: pointer;
}
.explore-suggest-item:hover { background: rgba(124, 77, 255, 0.12); }
.explore-suggest-thumb {
  width: 34px; height: 34px; border-radius: 10px; overflow: hidden; flex: none;
  background: var(--surface-3); display: grid; place-items: center; color: var(--muted); font-weight: 700;
}
.explore-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.explore-suggest-thumb.is-round { border-radius: 50%; }
.explore-suggest-glyph {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: rgba(124, 77, 255, 0.13); color: #b9a4ff; font-size: 15px; font-weight: 700;
}
.explore-suggest-copy { min-width: 0; }
.explore-suggest-copy strong { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.explore-suggest-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.explore-suggest-copy .is-verified { color: #7ea0ff; margin-left: 4px; }
.explore-suggest-more {
  appearance: none; background: none; border: 0; cursor: pointer; margin-top: 13px; padding: 7px 10px;
  color: #a88dff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
}
.explore-suggest-more:hover { background: rgba(124, 77, 255, 0.12); }
.explore-suggest-empty { color: var(--muted); font-size: 13px; padding: 6px 9px; }

/* ---------- 형태 ①: 세그먼트 트랙 (성별 · 랭킹 기간) ---------- */
.explore-gender-toolbar, .explore-segment {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
}
.explore-gender-toolbar button, .explore-segment button {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  padding: 9px 23px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 600;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.explore-gender-toolbar button:hover, .explore-segment button:hover { color: var(--text); }
.explore-gender-toolbar button.active, .explore-segment button.active {
  background: linear-gradient(135deg, #8b5cf6, #6a3df0);
  color: #fff; box-shadow: 0 4px 16px rgba(124, 77, 255, 0.35);
}
.explore-gender-toolbar button:focus-visible, .explore-segment button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.explore-segment button[data-rank-period="live"].active {
  display: inline-flex; align-items: center; gap: 8px;
}
.explore-segment button[data-rank-period="live"].active::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  animation: exploreLivePulse 2s ease-out infinite;
}
.explore-gender-toolbar button.hidden { display: none; }

/* ---------- 형태 ②: 고스트 캡슐 (필터 · 정렬) ---------- */
.explore-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.explore-controls-right { display: flex; align-items: center; gap: 10px; }
.explore-filter-btn, .explore-sort-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  height: 45px; padding: 0 21px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line);
  color: var(--soft); font-size: 14px; font-weight: 600;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.explore-filter-btn:hover, .explore-sort-btn:hover {
  border-color: rgba(154, 107, 255, 0.55); background: rgba(124, 77, 255, 0.07); color: var(--text);
}
.explore-filter-btn.is-open, .explore-sort-btn.is-open {
  border-color: rgba(154, 107, 255, 0.8); background: rgba(124, 77, 255, 0.12); color: var(--text);
}
.explore-filter-icon { color: #a88dff; }
.explore-filter-count {
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: linear-gradient(135deg, #8b5cf6, #6a3df0); color: #fff; font-size: 12px; font-weight: 700;
}
.explore-sort { position: relative; }
.explore-sort-caret { color: var(--muted); transition: transform .15s ease; }
.explore-sort-btn.is-open .explore-sort-caret { transform: rotate(180deg); }
.explore-sort-menu {
  position: absolute; z-index: 55; top: calc(100% + 9px); right: 0; min-width: 186px;
  margin: 0; padding: 8px; list-style: none;
  background: #171826; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow);
}
.explore-sort-menu button {
  appearance: none; width: 100%; text-align: left; cursor: pointer; background: none; border: 0;
  padding: 10px 36px 10px 14px; border-radius: 10px; color: var(--soft); font-size: 14px; position: relative;
}
.explore-sort-menu button:hover { background: rgba(124, 77, 255, 0.12); color: var(--text); }
.explore-sort-menu button.is-active { background: rgba(124, 77, 255, 0.2); color: var(--text); font-weight: 700; }
.explore-sort-menu button.is-active::after { content: "✓"; position: absolute; right: 13px; color: #b9a4ff; }

/* ---------- 형태 ③: 보라 틴트 캡슐 (적용 칩) ---------- */
.explore-chips-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.explore-chip {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 12px 9px 17px; border-radius: 999px;
  background: rgba(124, 77, 255, 0.1); border: 1px solid rgba(154, 107, 255, 0.35);
  color: #cabaff; font-size: 13.5px; font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.explore-chip:hover { background: rgba(124, 77, 255, 0.17); border-color: rgba(154, 107, 255, 0.55); }
.explore-chip span[aria-hidden] {
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.09); color: #cabaff; font-size: 10.5px; line-height: 1;
}
.explore-chip:hover span[aria-hidden] { background: rgba(255, 255, 255, 0.16); color: #fff; }
.explore-chip-reset {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; color: var(--muted); font-size: 13.5px; font-weight: 600;
  padding: 9px 12px; border-radius: 999px;
}
.explore-chip-reset:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }



/* ---------- 랭킹 ---------- */
.explore-rank-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.explore-rank-updated { color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.explore-rank-dot { color: #8b5cf6; font-size: 9px; }
.explore-rank-info { opacity: 0.8; }

/* 분류: 아이콘 탭 — 세그먼트 트랙(기간)과 형태·색 완전 분리.
   분류별 고유 색: 종합 골드 / 급상승 로즈 / 대화 블루 / 위시리스트 핑크 */
.explore-rank-categories { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 30px; }
.explore-rank-categories button {
  --erc: #b9a4ff;
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 10px; border-radius: 12px; background: transparent; border: 0;
  color: var(--muted); font-size: 13.5px; font-weight: 600; position: relative;
  transition: color .15s ease, background .15s ease;
}
.explore-rank-categories button[data-rank-category="overall"] { --erc: #e8be5c; }
.explore-rank-categories button[data-rank-category="rising"] { --erc: #ff6b8a; }
.explore-rank-categories button[data-rank-category="talk"] { --erc: #5f8dff; }
.explore-rank-categories button[data-rank-category="wishlist"] { --erc: #ff7d9c; }
.erc-icon {
  width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, 0.05); color: var(--muted);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.explore-rank-categories button:hover { color: var(--soft); background: rgba(255, 255, 255, 0.035); }
.explore-rank-categories button:hover .erc-icon { color: var(--erc); }
.explore-rank-categories button.active { color: var(--text); }
.explore-rank-categories button.active .erc-icon {
  background: color-mix(in srgb, var(--erc) 20%, transparent);
  color: var(--erc);
  box-shadow: 0 0 14px color-mix(in srgb, var(--erc) 35%, transparent);
}
.explore-rank-categories button.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--erc), transparent); opacity: 0.85;
}
.explore-rank-categories button:focus-visible { outline: 2px solid var(--erc); outline-offset: 2px; }

.explore-rank-podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 22px; align-items: stretch; margin-bottom: 30px; }
.explore-rank-podium-card {
  position: relative; overflow: hidden; border-radius: 18px; min-height: 220px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: flex-end;
  transition: transform .16s ease, border-color .16s ease;
}
.explore-rank-podium-card:hover { transform: translateY(-3px); border-color: rgba(124, 77, 255, 0.55); }
.explore-rank-podium-card.is-first {
  border-color: rgba(232, 190, 92, 0.75);
  box-shadow: 0 0 0 1px rgba(232, 190, 92, 0.35), 0 14px 48px rgba(212, 164, 60, 0.18);
}
.explore-rank-podium-media { position: absolute; inset: 0; }
.explore-rank-podium-media img, .explore-rank-podium-media video, .explore-rank-podium-cover { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.explore-rank-podium-media .explore-rank-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-size: 52px; font-weight: 800; color: rgba(255,255,255,0.16); }
.explore-rank-podium-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 8, 12, 0.94) 26%, rgba(7, 8, 12, 0.42) 58%, rgba(7, 8, 12, 0.05) 100%);
}
.explore-rank-podium-copy { position: relative; z-index: 2; padding: 21px 23px; width: 100%; }
.explore-rank-podium-crown { font-size: 22px; line-height: 1; color: #ecc766; margin-bottom: 2px; text-shadow: 0 2px 14px rgba(236, 199, 102, 0.55); }
.explore-rank-podium-number { font-size: 62px; line-height: 0.95; font-weight: 800; letter-spacing: -0.02em; color: #b9a4ff; text-shadow: 0 4px 22px rgba(124, 77, 255, 0.35); }
.explore-rank-podium-card.is-first .explore-rank-podium-number {
  font-size: 74px;
  background: linear-gradient(180deg, #f6dc9a 12%, #d9a83f 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 4px 18px rgba(217, 168, 63, 0.4));
}
.explore-rank-podium-card.is-third .explore-rank-podium-number { color: #e7a1b6; text-shadow: 0 4px 22px rgba(231, 161, 182, 0.3); }
.explore-rank-podium-name { margin-top: 12px; font-size: 19px; font-weight: 800; }
.explore-rank-podium-desc { margin-top: 5px; color: var(--soft); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.explore-rank-podium-score { margin-top: 11px; display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; }
.explore-rank-flame { color: #a88dff; }
.explore-rank-heart {
  position: absolute; z-index: 3; top: 14px; right: 14px; width: 35px; height: 35px; border-radius: 50%;
  appearance: none; cursor: pointer; border: 0; background: rgba(10, 10, 16, 0.55); color: #fff; font-size: 16px;
  display: grid; place-items: center; backdrop-filter: blur(4px);
  transition: background .15s ease;
}
.explore-rank-heart:hover { background: rgba(124, 77, 255, 0.6); }
.explore-rank-heart.is-wishlisted { color: #ff7d9c; }

.explore-rank-table-head {
  display: grid; grid-template-columns: 84px 1fr 170px 110px; gap: 12px; align-items: center;
  padding: 10px 22px; color: var(--muted); font-size: 13px; font-weight: 600;
}
.explore-rank-rows { border: 1px solid var(--line); border-radius: 17px; overflow: hidden; background: rgba(15, 17, 24, 0.55); }
.explore-rank-row {
  display: grid; grid-template-columns: 84px 1fr 170px 110px; gap: 12px; align-items: center;
  width: 100%; text-align: left; appearance: none; background: none; border: 0; cursor: pointer;
  padding: 14px 22px; border-top: 1px solid var(--line-soft); color: var(--text);
}
.explore-rank-row:first-child { border-top: 0; }
.explore-rank-row:hover { background: rgba(124, 77, 255, 0.07); }
.explore-rank-row-rank { font-size: 21px; font-weight: 800; color: var(--soft); }
.explore-rank-row-main { display: flex; align-items: center; gap: 15px; min-width: 0; }
.explore-rank-row-thumb {
  width: 66px; height: 46px; border-radius: 11px; overflow: hidden; flex: none;
  background: var(--surface-3); display: grid; place-items: center; color: var(--muted); font-weight: 700;
}
.explore-rank-row-thumb img, .explore-rank-row-thumb video { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.explore-rank-row-copy { display: flex; align-items: baseline; gap: 13px; min-width: 0; }
.explore-rank-row-copy strong { font-size: 16px; font-weight: 800; white-space: nowrap; }
.explore-rank-row-copy small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.explore-rank-row-score { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; }
.explore-rank-delta { font-size: 14px; font-weight: 800; }
.explore-rank-delta.is-up { color: #ff6b8a; }
.explore-rank-delta.is-down { color: #5f8dff; }
.explore-rank-delta.is-new { color: #7ea0ff; letter-spacing: 0.04em; }

/* ---------- 필터 슬라이드 패널 ---------- */
.explore-filter-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(4, 5, 9, 0.55); backdrop-filter: blur(2px); }
.explore-filter-panel {
  position: fixed; z-index: 301; top: 0; right: 0; bottom: 0; width: min(430px, 92vw);
  background: #101120; border-left: 1px solid var(--line); border-radius: 20px 0 0 20px;
  display: flex; flex-direction: column; box-shadow: -24px 0 70px rgba(0, 0, 0, 0.5);
  transform: translateX(14px); opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.explore-filter-panel.is-open { transform: translateX(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .explore-filter-panel { transition: none; } }
.explore-filter-head { display: flex; align-items: center; justify-content: space-between; padding: 25px 30px 16px; }
.explore-filter-head h2 { margin: 0; font-size: 21px; font-weight: 800; }
.explore-filter-close {
  appearance: none; cursor: pointer; background: none; border: 0; color: var(--muted); font-size: 17px;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
}
.explore-filter-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.explore-filter-body { flex: 1; overflow-y: auto; padding: 6px 30px 22px; }
.explore-facet { margin-bottom: 27px; }
.explore-facet h3 { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; color: var(--soft); letter-spacing: 0.01em; }
.explore-facet-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.explore-facet-chips button {
  appearance: none; cursor: pointer; padding: 9px 17px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); color: var(--soft);
  font-size: 13.5px; font-weight: 600;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.explore-facet-chips button:hover { border-color: rgba(154, 107, 255, 0.5); color: var(--text); }
.explore-facet-chips button.is-selected {
  background: linear-gradient(135deg, #8b5cf6, #6a3df0); border-color: transparent; color: #fff;
  box-shadow: 0 3px 12px rgba(124, 77, 255, 0.3);
}
.explore-facet-chips button.is-selected:not(.is-all)::before { content: "✓ "; font-size: 12px; }
.explore-facet-search {
  display: flex; align-items: center; gap: 9px; margin-bottom: 13px; padding: 0 15px; height: 42px;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); border-radius: 999px;
}
.explore-facet-search:focus-within { border-color: rgba(154, 107, 255, 0.6); }
.explore-facet-search span { color: var(--muted); }
.explore-facet-search input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font-size: 14px; }
.explore-filter-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 30px; border-top: 1px solid var(--line-soft);
}
.explore-filter-reset {
  appearance: none; cursor: pointer; background: none; border: 0; color: var(--soft);
  font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-radius: 999px;
}
.explore-filter-reset:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.explore-filter-apply {
  appearance: none; cursor: pointer; flex: 1; max-width: 262px; height: 50px; border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #6a3df0); border: 0; color: #fff; font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 22px rgba(124, 77, 255, 0.3);
  transition: filter .15s ease, transform .12s ease;
}
.explore-filter-apply:hover { filter: brightness(1.08); }
.explore-filter-apply:active { transform: scale(0.985); }

@media (max-width: 1100px) {
  .explore-suggest { grid-template-columns: 1fr 1fr; }
  .explore-rank-podium { grid-template-columns: 1fr; }
  .explore-rank-podium-card.is-first { order: -1; }
  .explore-rank-table-head { grid-template-columns: 56px 1fr 120px 76px; padding: 10px 14px; }
  .explore-rank-row { grid-template-columns: 56px 1fr 120px 76px; padding: 12px 14px; }
}
@media (max-width: 640px) {
  .explore-controls-row { align-items: stretch; flex-direction: column; }
  .explore-controls-right { justify-content: flex-end; }
  .explore-suggest { grid-template-columns: 1fr; }
  .explore-gender-toolbar, .explore-segment { flex-wrap: wrap; border-radius: 22px; }
}

/* ============================================================
   EXPLORE r3 — 모션·분위기 레이어 (디자인 효과 전용, 로직 무관)
   ============================================================ */

@keyframes exploreLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes exploreFadeUp {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes exploreCrownFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes exploreGoldSheen {
  0%, 55% { transform: translateX(-130%) skewX(-18deg); }
  75%, 100% { transform: translateX(240%) skewX(-18deg); }
}
@keyframes exploreDotBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* 패널 전환: 탭 바뀔 때 부드럽게 떠오름 (display 전환 시 자동 재생) */
.explore-pane:not(.hidden) { animation: none; }
.explore-rank-podium-card { animation: exploreFadeUp 0.45s ease both; }
.explore-rank-podium-card:nth-child(1) { animation-delay: 0.08s; }
.explore-rank-podium-card:nth-child(2) { animation-delay: 0s; }
.explore-rank-podium-card:nth-child(3) { animation-delay: 0.14s; }
.explore-rank-row { animation: exploreFadeUp 0.38s ease both; }
.explore-rank-row:nth-child(1) { animation-delay: 0.16s; }
.explore-rank-row:nth-child(2) { animation-delay: 0.21s; }
.explore-rank-row:nth-child(3) { animation-delay: 0.26s; }
.explore-rank-row:nth-child(4) { animation-delay: 0.31s; }
.explore-rank-row:nth-child(5) { animation-delay: 0.36s; }
.explore-rank-row:nth-child(6) { animation-delay: 0.41s; }
.explore-rank-row:nth-child(n + 7) { animation-delay: 0.46s; }

/* 랭킹 무대 조명: 포디움 뒤 은은한 보라 광원 */
#exploreRankingPane { position: relative; }
#exploreRankingPane::before {
  content: ""; position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  width: min(760px, 80%); height: 300px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(124, 77, 255, 0.13), transparent 65%);
}
#exploreRankingPane > * { position: relative; z-index: 1; }

/* 1위: 골드 시닝(광택 스윕) + 왕관 플로팅 */
.explore-rank-podium-card.is-first::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(246, 220, 154, 0.14) 50%, transparent 62%);
  animation: exploreGoldSheen 5.5s ease-in-out infinite;
}
.explore-rank-podium-crown { animation: exploreCrownFloat 3.2s ease-in-out infinite; display: inline-block; }

/* 실시간 업데이트 점 호흡 */
.explore-rank-dot { animation: exploreDotBreath 2.4s ease-in-out infinite; display: inline-block; }

/* 순위표 호버 마이크로 모션 */
.explore-rank-row { transition: background .15s ease; }
.explore-rank-row:hover .explore-rank-row-rank { color: #b9a4ff; }
.explore-rank-row:hover .explore-rank-delta.is-up { transform: translateY(-1.5px); }
.explore-rank-row:hover .explore-rank-delta.is-down { transform: translateY(1.5px); }
.explore-rank-delta { transition: transform .15s ease; display: inline-block; }

/* 검색 아이콘·더보기 마이크로 모션 */
.explore-search:focus-within .explore-search-icon { color: #a88dff; }

/* 필터 패널: 스크롤바 + 페이셋 등장 */
.explore-filter-body { scrollbar-width: thin; scrollbar-color: rgba(124, 77, 255, 0.35) transparent; }
.explore-filter-body::-webkit-scrollbar { width: 6px; }
.explore-filter-body::-webkit-scrollbar-thumb { background: rgba(124, 77, 255, 0.3); border-radius: 999px; }
.explore-filter-body::-webkit-scrollbar-track { background: transparent; }
.explore-filter-panel.is-open .explore-facet { animation: exploreFadeUp 0.32s ease both; }
.explore-filter-panel.is-open .explore-facet:nth-child(1) { animation-delay: 0.03s; }
.explore-filter-panel.is-open .explore-facet:nth-child(2) { animation-delay: 0.06s; }
.explore-filter-panel.is-open .explore-facet:nth-child(3) { animation-delay: 0.09s; }
.explore-filter-panel.is-open .explore-facet:nth-child(4) { animation-delay: 0.12s; }
.explore-filter-panel.is-open .explore-facet:nth-child(5) { animation-delay: 0.15s; }
.explore-filter-panel.is-open .explore-facet:nth-child(6) { animation-delay: 0.18s; }
.explore-filter-panel.is-open .explore-facet:nth-child(7) { animation-delay: 0.21s; }

/* 사이드바 현재 위치: 보라 인디케이터 바 + 은은한 글로우 (전역 소품) */
.nav-menu .nav-item { position: relative; }
.nav-menu .nav-item.active::before {
  content: ""; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 58%; border-radius: 3px;
  background: linear-gradient(180deg, #9a6bff, #6d3ef0);
  box-shadow: 0 0 12px rgba(124, 77, 255, 0.55);
}

/* 모션 최소화 환경: 전부 정지 */
@media (prefers-reduced-motion: reduce) {
  .explore-pane:not(.hidden),
  .all-character-grid > .catalog-card,
  .explore-rank-podium-card,
  .explore-rank-row,
  .explore-filter-panel.is-open .explore-facet{ animation: none; }
  .explore-rank-podium-card.is-first::before,
  .explore-rank-podium-crown,
  .explore-rank-dot,
  .explore-segment button[data-rank-period="live"].active::before { animation: none; }
}

/* ============================================================
   SITE MOTION LAYER r4 — 홈/라이브러리/최근 대화 진입 연출
   (전부 표시용. 로직·마크업 무관. reduced-motion 시 정지)
   ============================================================ */

/* 뷰 전환: 투명도만 페이드 (transform 금지 — 내부 fixed 요소 보호)
   fill-mode 없음: 채워진(filled) 애니메이션은 재생이 끝나도 요소를 스태킹
   컨텍스트로 유지시켜{ animation: exploreFadeUp 0.44s ease both; }

/* 환영 문구: 이름에 보라 그라데이션 잉크 */
#playWelcomeName {
  background: linear-gradient(100deg, #cabaff 8%, #9a6bff 55%, #7ea0ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 장르 레일: 순차 등장 + 호버 리프트, 이모지 살짝 확대 */
.genre-rail button { transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.genre-rail button:hover { transform: translateY(-2px); }
.genre-rail button span { display: inline-block; transition: transform .16s ease; }
.genre-rail button:hover span { transform: scale(1.12); }

/* 섹션 더보기 화살표 넛지 */
.section-more-button span, #newCharactersMoreBtn { transition: transform .15s ease; }
.section-more-button:hover span { transform: translateX(2px); display: inline-block; }

/* 히어로 시작 버튼: 호버 글로우 + 프레스 */
#featuredHeroStartBtn { transition: filter .15s ease, transform .12s ease, box-shadow .15s ease; }
#featuredHeroStartBtn:hover { filter: brightness(1.07); box-shadow: 0 8px 26px rgba(124, 77, 255, 0.35); }
#featuredHeroStartBtn:active { transform: scale(0.985); }

/* ---------- 라이브러리 ---------- */
/* 툴바를 탐색과 같은 세그먼트 트랙 언어로 통일
   (기존 컴팩트 스킨이 !important 밑줄 탭을 강제하므로 동일 강도로 덮음) */
.library-view .library-toolbar {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  padding: 5px !important; margin: 4px 32px 24px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 999px !important;
}
.library-view .library-toolbar button {
  border: 0 !important; background: transparent !important; color: var(--muted) !important;
  border-radius: 999px !important; padding: 9px 21px !important; margin: 0 !important;
  font-size: 14px !important; font-weight: 600;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.library-view .library-toolbar button:hover { color: var(--text) !important; background: transparent !important; }
.library-view .library-toolbar button.active {
  background: linear-gradient(135deg, #8b5cf6, #6a3df0) !important; border: 0 !important;
  color: #fff !important; box-shadow: 0 4px 16px rgba(124, 77, 255, 0.35);
}
.library-view .library-toolbar button span {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin-left: 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: rgba(255, 255, 255, 0.08); color: inherit;
}
.library-view .library-toolbar button.active span { background: rgba(255, 255, 255, 0.2); }

/* ---------- 페이지 헤더 공통: 타이틀 아래 보라 스파크 라인 ---------- */
.library-view .page-head h1, .recent-page-head h1 { position: relative; display: inline-block; }
.library-view .page-head h1::after, .recent-page-head h1::after {
  content: ""; position: absolute; left: 1px; bottom: -7px; height: 3px; width: 34px;
  border-radius: 3px; background: linear-gradient(90deg, #9a6bff, rgba(124, 77, 255, 0));
}

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion: reduce) {
  .view:not(.hidden):not(.chat-view),
  .character-grid > *,
  .library-grid > *{ animation: none; }
  .genre-rail button:hover, .genre-rail button:hover span { transform: none; }
}

/* V3.20.5 — restore only the original hover width expansion on Home and Library cards. */
@media (hover: hover) and (pointer: fine) {
  

  .library-view .character-tile:hover {
    flex: 0 0 var(--tryva-card-hover-w, 318px) !important;
    flex-basis: var(--tryva-card-hover-w, 318px) !important;
    width: var(--tryva-card-hover-w, 318px) !important;
    min-width: var(--tryva-card-hover-w, 318px) !important;
    max-width: var(--tryva-card-hover-w, 318px) !important;
  }
}

/* V3.20.6 — keep the restored Home/Library hover size, restore only its smooth width transition. */
@media (hover: hover) and (pointer: fine) {
  body.play-active #playView .tryva-home-card-carousel > #characterGrid .character-tile,
  body.play-active #playView .tryva-home-card-carousel > #newCharacterRail .character-tile,
  .library-view .character-tile {
    min-width: var(--tryva-card-w, 248px) !important;
    max-width: none !important;
  }

  body.play-active #playView .tryva-home-card-carousel > #characterGrid .character-tile,
  body.play-active #playView .tryva-home-card-carousel > #newCharacterRail .character-tile {
    transition:
      flex-basis 220ms cubic-bezier(.18,.9,.24,1),
      width 220ms cubic-bezier(.18,.9,.24,1),
      transform 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease !important;
  }

  .library-view .character-tile {
    transition:
      flex-basis 220ms cubic-bezier(.18,.9,.24,1),
      width 220ms cubic-bezier(.18,.9,.24,1),
      transform 180ms cubic-bezier(.2,.78,.22,1),
      border-color 180ms ease,
      box-shadow 180ms ease,
      background 180ms ease !important;
  }

  body.play-active #playView .tryva-home-card-carousel > #characterGrid .character-tile:hover,
  body.play-active #playView .tryva-home-card-carousel > #newCharacterRail .character-tile:hover,
  .library-view .character-tile:hover {
    min-width: var(--tryva-card-w, 248px) !important;
    max-width: none !important;
  }
}

/* V3.20.7 — Library only: reserve exactly one hover-width delta so a row never rewraps on hover. */
@media (hover: hover) and (pointer: fine) {
  body.library-active #libraryView > #libraryGrid.library-grid {
    --tryva-library-hover-reserve: calc(
      var(--tryva-card-hover-w, 318px) - var(--tryva-card-w, 248px)
    );

  }
}

/* ============================================================
   V3.20.9 — HOME COMPACT DISCOVERY CARDS / EXPLORE FULL-SIZE CARDS
   Scope: Home character rails + Explore browse cards only.
   Banner, story rail, Library, Profile and server logic stay untouched.
   ============================================================ */

body.play-active #playView {
  --tryva-home-card-w: 232px;
  --tryva-home-card-hover-w: 292px;
  --tryva-home-card-h: 198px;
  --tryva-home-card-gap: 18px;
}

/* Home: keep the existing carousel behavior, but use the lighter card scale from the approved concept. */
body.play-active #playView .character-section,
body.play-active #playView .play-rail-row,
body.play-active #playView .play-rail-row-single,
body.play-active #playView .play-rail-row-single .mini-rail-block,
body.play-active #playView .tryva-home-card-carousel {
  width: min(100%, calc((var(--tryva-home-card-w) * 5.5) + (var(--tryva-home-card-gap) * 5))) !important;
  max-width: min(100%, calc((var(--tryva-home-card-w) * 5.5) + (var(--tryva-home-card-gap) * 5))) !important;
}

body.play-active #playView .tryva-home-card-carousel > .character-grid,
body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid {
  gap: var(--tryva-home-card-gap) !important;
  min-height: calc(var(--tryva-home-card-h) + 34px) !important;
  padding-top: 8px !important;
  padding-bottom: 26px !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile,
body.play-active #playView .tryva-home-card-carousel > #characterGrid .character-tile,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail .character-tile {
  --card-base-w: var(--tryva-home-card-w);
  --card-hover-w: var(--tryva-home-card-hover-w);
  flex: 0 0 var(--tryva-home-card-w) !important;
  flex-basis: var(--tryva-home-card-w) !important;
  width: var(--tryva-home-card-w) !important;
  min-width: var(--tryva-home-card-w) !important;
  max-width: none !important;
  height: var(--tryva-home-card-h) !important;
  min-height: var(--tryva-home-card-h) !important;
  max-height: var(--tryva-home-card-h) !important;
  border-radius: 15px !important;
  background: #070811 !important;
  overflow: hidden !important;
  transition:
    flex-basis 220ms cubic-bezier(.18,.9,.24,1),
    width 220ms cubic-bezier(.18,.9,.24,1),
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile:hover,
body.play-active #playView .tryva-home-card-carousel .character-tile:focus-visible,
body.play-active #playView .tryva-home-card-carousel .character-tile.selected,
body.play-active #playView .tryva-home-card-carousel > #characterGrid .character-tile:hover,
body.play-active #playView .tryva-home-card-carousel > #characterGrid .character-tile:focus-visible,
body.play-active #playView .tryva-home-card-carousel > #characterGrid .character-tile.selected,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail .character-tile:hover,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail .character-tile:focus-visible,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail .character-tile.selected {
  flex: 0 0 var(--tryva-home-card-hover-w) !important;
  flex-basis: var(--tryva-home-card-hover-w) !important;
  width: var(--tryva-home-card-hover-w) !important;
  min-width: var(--tryva-home-card-w) !important;
  max-width: none !important;
  transform: translateY(-3px) !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile .tile-art,
body.play-active #playView .tryva-home-card-carousel > #characterGrid .character-tile .tile-art,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail .character-tile .tile-art {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--tryva-home-card-hover-w) !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile::after,
body.play-active #playView .tryva-home-card-carousel .character-tile .tile-art::after {
  height: 72% !important;
  background: linear-gradient(180deg, rgba(4,5,12,0) 0%, rgba(4,5,12,.16) 24%, rgba(4,5,12,.76) 68%, rgba(4,5,12,.98) 100%) !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile .tile-body {
  position: absolute !important;
  left: 13px !important;
  right: auto !important;
  bottom: 12px !important;
  width: calc(var(--tryva-home-card-w) - 58px) !important;
  padding: 0 !important;
  z-index: 5 !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile:hover .tile-body,
body.play-active #playView .tryva-home-card-carousel .character-tile:focus-visible .tile-body,
body.play-active #playView .tryva-home-card-carousel .character-tile.selected .tile-body {
  width: calc(var(--tryva-home-card-hover-w) - 58px) !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile .tile-copy-stack {
  display: grid !important;
  gap: 3px !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile .tile-title h3 {
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(255,255,255,.98) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile.name-medium .tile-title h3 { font-size: 18px !important; }
body.play-active #playView .tryva-home-card-carousel .character-tile.name-long .tile-title h3 { font-size: 16px !important; }
body.play-active #playView .tryva-home-card-carousel .character-tile.name-xlong .tile-title h3 { font-size: 14px !important; }

body.play-active #playView .tryva-home-card-carousel .character-tile .tile-meta {
  margin: 1px 0 0 !important;
  overflow: hidden !important;
  color: rgba(229,224,243,.72) !important;
  font-size: 10.8px !important;
  font-weight: 620 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile .tile-summary {
  display: -webkit-box !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: 29px !important;
  margin: 3px 0 0 !important;
  overflow: hidden !important;
  color: rgba(239,235,249,.72) !important;
  font-size: 10.6px !important;
  line-height: 1.35 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile .tile-tags,
body.play-active #playView .tryva-home-card-carousel .character-tile .creator-byline {
  display: none !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile .tile-badge {
  left: 10px !important;
  top: 10px !important;
  min-height: 0 !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(190,157,255,.18) !important;
  border-radius: 7px !important;
  background: rgba(111,63,210,.62) !important;
  color: rgba(235,226,255,.94) !important;
  font-size: 9.5px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile .tile-heart {
  top: 9px !important;
  right: 9px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 13px !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile .tile-actions {
  right: 10px !important;
  bottom: 10px !important;
}

body.play-active #playView .tryva-home-card-carousel .character-tile .add-card-button {
  right: 10px !important;
  bottom: 10px !important;
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  min-height: 29px !important;
}

/* Explore: inherit the former Home card scale for deliberate, information-rich browsing. */
@media (min-width: 901px) {


  body.all-characters-active #allCharacterGrid .catalog-card {






    border-radius: var(--tryva-card-radius, 18px) !important;
  }

  body.all-characters-active #allCharacterGrid .catalog-card-media > img,
  body.all-characters-active #allCharacterGrid .catalog-card-media > video {
    object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
    transform: scale(var(--card-crop-zoom, 1.05)) !important;
    transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  }

  body.all-characters-active #allCharacterGrid .catalog-card-shade {
    background: linear-gradient(180deg, transparent 34%, rgba(7,8,15,.18) 52%, rgba(7,8,15,.96) 100%) !important;
  }

  body.all-characters-active #allCharacterGrid .catalog-card-copy {
    padding: 15px !important;
  }

  body.all-characters-active #allCharacterGrid .catalog-card-copy h3 {
    font-size: 26px !important;
    font-weight: 840 !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
  }

  body.all-characters-active #allCharacterGrid .catalog-card-copy p {
    margin: 6px 0 9px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }



  body.all-characters-active #allCharacterGrid .catalog-card-tags span {
    min-height: 22px !important;
    padding: 4px 8px !important;
    border-radius: 7px !important;
    font-size: 10.5px !important;
  }

  body.all-characters-active #allCharacterGrid .catalog-card-copy .creator-byline {
    display: none !important;
  }
}


/* V3.20.10 — HOME VISUAL CONTINUITY / STATIC STORY SHOWCASE / SAVED CROP PARITY
   Scope: Home background, Home banner blend, Home/Explore media display and the
   visual-only Home story showcase. Persisted crop values and banner dimensions
   remain untouched. */

/* One continuous Home atmosphere. Components sit on the same page background
   instead of painting separate black slabs over each section. */
body.play-active {
  background: var(--tryva-app-ground, #0c0c11) !important;
  background-color: var(--tryva-app-ground, #0c0c11) !important;
}
body.play-active .app-shell,
body.play-active .workspace,
body.play-active #playView.play-view,
body.play-active #playView .tryva-home-layout,
body.play-active #playView .tryva-home-main,
body.play-active #playView .character-section,
body.play-active #playView .tryva-story-section,
body.play-active #playView .play-rail-row,
body.play-active #playView .mini-rail-block {
  background: transparent !important;
}
body.play-active .nav-shell {
  background:
    linear-gradient(180deg, rgba(14, 13, 29, .90) 0%, rgba(9, 9, 21, .82) 100%) !important;
  border-right-color: rgba(171, 144, 255, .10) !important;
  box-shadow: 20px 0 58px rgba(16, 10, 40, .12) !important;
  backdrop-filter: blur(18px) saturate(1.04) !important;
}

/* The banner remains exactly 252px high. A soft full-bleed copy of the same
   still image fills the left side, while the real administrator-positioned
   media stays above it and keeps its saved crop values. */
body.play-active #featuredCharacterHero.tryva-featured-hero {
  height: 252px !important;
  min-height: 252px !important;
  max-height: 252px !important;
  background: rgba(14, 12, 29, .48) !important;
  border-color: rgba(183, 157, 255, .17) !important;
  box-shadow: 0 22px 60px rgba(1, 1, 10, .24) !important;
}
body.play-active #featuredCharacterHero .tryva-hero-slide::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -24px !important;
  z-index: 0 !important;
  background-image: var(--tryva-hero-poster) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  opacity: .84 !important;
  filter: blur(15px) saturate(.86) brightness(.56) !important;
  transform: scale(1.08) !important;
  pointer-events: none !important;
}
body.play-active #featuredCharacterHero .tryva-hero-slide .tryva-featured-media {
  z-index: 1 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 10%, rgba(0,0,0,.34) 25%, rgba(0,0,0,.72) 42%, #000 60%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 10%, rgba(0,0,0,.34) 25%, rgba(0,0,0,.72) 42%, #000 60%) !important;
}
body.play-active #featuredCharacterHero .tryva-featured-shade,
body.play-active #featuredCharacterHero .tryva-hero-slide .tryva-featured-shade {
  z-index: 2 !important;
  background:
    linear-gradient(90deg,
      rgba(7, 7, 17, .42) 0%,
      rgba(8, 8, 19, .31) 24%,
      rgba(9, 8, 20, .18) 43%,
      rgba(10, 9, 22, .06) 61%,
      transparent 76%) !important;
}
body.play-active #featuredCharacterHero .tryva-featured-copy {
  background: transparent !important;
}

/* Home card art follows the live card width, including the existing hover
   expansion. ResizeObserver then recalculates the same saved ratio against the
   visible frame instead of laying out a 292px image inside a 232px clipped card. */
body.play-active #playView .tryva-home-card-carousel .character-tile .tile-art,
body.play-active #playView #characterGrid .character-tile .tile-art,
body.play-active #playView #newCharacterRail .character-tile .tile-art {
  width: 100% !important;
  max-width: none !important;
}

/* Lift the normalized JS cover geometry over older object-position/scale rules.
   This is display-only: profile_crop_* and legacy card_crop_* storage are not
   written, transformed or migrated. */
html body.play-active #playView #characterGrid .character-tile .tile-art > img.tryva-card-cover-media,
html body.play-active #playView #characterGrid .character-tile .tile-art > video.tryva-card-cover-media,
html body.play-active #playView #newCharacterRail .character-tile .tile-art > img.tryva-card-cover-media,
html body.play-active #playView #newCharacterRail .character-tile .tile-art > video.tryva-card-cover-media,
html body.play-active #playView #characterGrid .character-tile:hover .tile-art > img.tryva-card-cover-media,
html body.play-active #playView #characterGrid .character-tile:hover .tile-art > video.tryva-card-cover-media,
html body.play-active #playView #newCharacterRail .character-tile:hover .tile-art > img.tryva-card-cover-media,
html body.play-active #playView #newCharacterRail .character-tile:hover .tile-art > video.tryva-card-cover-media,
html body.all-characters-active #allCharacterGrid .catalog-card .catalog-card-media > img.tryva-card-cover-media,
html body.all-characters-active #allCharacterGrid .catalog-card .catalog-card-media > video.tryva-card-cover-media {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-card-cover-width, 100%) !important;
  height: var(--tryva-card-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-card-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}

/* Function-free story showcase, shaped like the chosen visual reference. */
body.play-active #playView .tryva-story-showcase-section {
  margin: 2px 0 34px !important;
}
body.play-active #playView .tryva-story-showcase-section .section-head {
  margin-bottom: 14px !important;
}
body.play-active #playView .tryva-story-showcase-more {
  
  
  
  color: rgba(211, 202, 232, .64) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  pointer-events: none !important;
  user-select: none !important;
}
body.play-active #playView .tryva-story-showcase-more b {
  color: rgba(196, 169, 255, .76) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
}

body.play-active #playView .tryva-story-showcase-card {
  position: relative !important;
  isolation: isolate !important;
  
  
  
  
  padding: 17px 19px !important;
  
  border: 1px solid rgba(191, 168, 255, .14) !important;
  border-radius: 17px !important;
  background-color: rgba(14, 13, 27, .74) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 16px 38px rgba(1,1,9,.18) !important;
  color: #fff !important;
  pointer-events: none !important;
  user-select: none !important;
}
body.play-active #playView .tryva-story-showcase-card::before,
body.play-active #playView .tryva-story-showcase-card::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
}
body.play-active #playView .tryva-story-showcase-card::before {
  inset: 0 !important;
  z-index: -2 !important;
  background: var(--tryva-story-art) !important;
}
body.play-active #playView .tryva-story-showcase-card::after {
  inset: 0 !important;
  z-index: -1 !important;
  background: linear-gradient(180deg, rgba(5,6,15,.02) 8%, rgba(5,6,15,.20) 42%, rgba(5,6,15,.92) 100%) !important;
}
body.play-active #playView .tryva-story-showcase-card.is-cosmic {
  --tryva-story-art:
    radial-gradient(circle at 76% 42%, rgba(189, 150, 255, .48) 0 3%, transparent 3.6%),
    radial-gradient(circle at 78% 46%, rgba(77, 103, 191, .92) 0 18%, rgba(26, 35, 83, .80) 19%, transparent 33%),
    radial-gradient(ellipse at 78% 50%, rgba(202, 168, 255, .34) 0 29%, transparent 31%),
    linear-gradient(115deg, #11152d 0%, #192a4c 52%, #21152f 100%);
}
body.play-active #playView .tryva-story-showcase-card.is-legacy {
  --tryva-story-art:
    linear-gradient(90deg, transparent 0 60%, rgba(12, 9, 24, .52) 60%),
    conic-gradient(from 224deg at 72% 78%, transparent 0 10%, rgba(169, 142, 222, .34) 11% 13%, transparent 14% 100%),
    radial-gradient(circle at 76% 25%, rgba(186, 164, 255, .30), transparent 24%),
    linear-gradient(132deg, #171329 0%, #262041 48%, #090d1c 100%);
}
body.play-active #playView .tryva-story-showcase-card.is-neon {
  --tryva-story-art:
    linear-gradient(90deg, transparent 0 44%, rgba(255, 43, 161, .22) 45% 46%, transparent 47% 58%, rgba(64, 202, 255, .22) 59% 60%, transparent 61%),
    linear-gradient(0deg, transparent 0 38%, rgba(93, 75, 214, .22) 39% 40%, transparent 41% 67%, rgba(238, 74, 198, .16) 68% 69%, transparent 70%),
    radial-gradient(circle at 77% 34%, rgba(210, 67, 216, .26), transparent 28%),
    linear-gradient(125deg, #0b1426 0%, #15142f 48%, #29122e 100%);
}
body.play-active #playView .tryva-story-showcase-card > div {
  min-width: 0 !important;
}
body.play-active #playView .tryva-story-showcase-tags {
  position: absolute !important;
  left: 17px !important;
  top: 15px !important;
  color: rgba(213, 194, 255, .70) !important;
  font-size: 9.5px !important;
  font-weight: 720 !important;
  letter-spacing: .01em !important;
}
body.play-active #playView .tryva-story-showcase-card h3 {
  margin: 0 0 5px !important;
  color: rgba(255,255,255,.97) !important;
  font-size: 21px !important;
  font-weight: 820 !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
}
body.play-active #playView .tryva-story-showcase-card p {
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(224, 218, 237, .68) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* V3.20.10 crop-frame specificity correction: beat the V3.20.9 fixed hover-width
   frame selectors without changing the card or its stored media layout. */
body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile .tile-art,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile .tile-art {
  width: 100% !important;
  max-width: none !important;
}


/* ============================================================
   V3.20.11 — SIX-CARD DISCOVERY DENSITY / FIXED HOME MEDIA FRAME
   Scope: Explore browse grid, Home character rails, Home story CTA only.
   Stored crop/pan/zoom data and Library/Profile layouts remain untouched.
   ============================================================ */

/* Home: six complete compact cards, then a restrained preview of card seven. */
body.play-active #playView .character-section,
body.play-active #playView .play-rail-row,
body.play-active #playView .play-rail-row-single,
body.play-active #playView .play-rail-row-single .mini-rail-block,
body.play-active #playView .tryva-home-card-carousel {
  width: min(100%, calc((var(--tryva-home-card-w) * 6.35) + (var(--tryva-home-card-gap) * 6))) !important;
  max-width: min(100%, calc((var(--tryva-home-card-w) * 6.35) + (var(--tryva-home-card-gap) * 6))) !important;
}

/* Keep the media frame at the collapsed-card width while the shell expands.
   This preserves the exact crop frame and prevents photos/videos from zooming on hover. */
body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile .tile-art,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile .tile-art {
  width: var(--tryva-home-card-w) !important;
  min-width: var(--tryva-home-card-w) !important;
  max-width: var(--tryva-home-card-w) !important;
}

/* Explore: exactly six columns on full desktop while retaining safe responsive fallbacks. */
@media (min-width: 1600px) {


}

@media (min-width: 1280px) and (max-width: 1599px) {


}

@media (min-width: 901px) and (max-width: 1279px) {


}

/* The showcase cards remain placeholders; only the section-level CTA navigates. */
body.play-active #playView .tryva-story-showcase-more {
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
  transition: color 160ms ease, transform 160ms ease !important;
}
body.play-active #playView .tryva-story-showcase-more:hover,
body.play-active #playView .tryva-story-showcase-more:focus-visible {
  color: rgba(239, 232, 255, .94) !important;
  transform: translateX(2px) !important;
}
body.play-active #playView .tryva-story-showcase-more:focus-visible {
  outline: 1px solid rgba(180, 143, 255, .55) !important;
  outline-offset: 5px !important;
  border-radius: 7px !important;
}

/* ============================================================
   V3.21 NOIR PASS — 비주얼 아이덴티티 (PC)
   ① 필름 그레인 + 비네트  ② 의미 색 토큰  ③ 디스플레이 타이포
   ④ 폴백 아트  ⑤ 형태 언어 전파(버튼·검색·스텝퍼)  전부 표시용.
   ============================================================ */

:root {
  --sig-gold: #e8be5c;    /* 특별·1위·프리미엄 */
  --sig-rose: #ff6b8a;    /* 상승·열기 */
  --sig-blue: #5f8dff;    /* 신규·정보 */
  --sig-pink: #ff7d9c;    /* 위시·애정 */
  --font-serif-kr: "Noto Serif KR", "Nanum Myeongjo", serif;
  --font-display: "Playfair Display", Georgia, serif;
}

/* ---------- ① 필름 그레인 + 비네트 ---------- */
html::after {
  content: ""; position: fixed; inset: 0; z-index: 2147482000; pointer-events: none;
  background: radial-gradient(ellipse 118% 96% at 50% 42%, transparent 64%, rgba(2, 2, 6, 0.34) 100%);
}
body::after {
  content: ""; position: fixed; inset: -8%; z-index: 2147482001; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.04; mix-blend-mode: overlay;
}

/* ---------- ② 의미 색 적용 ---------- */
/* 배지: NEW=블루 / 인기=로즈 / 내 캐릭터·공식=골드 / 나머지=브랜드 보라 유지 */
[data-badge="NEW"] {
  background: rgba(95, 141, 255, 0.2) !important;
  color: #a7c0ff !important;
  border-color: rgba(95, 141, 255, 0.4) !important;
}
[data-badge="인기"] {
  background: rgba(255, 107, 138, 0.18) !important;
  color: #ffb3c4 !important;
  border-color: rgba(255, 107, 138, 0.38) !important;
}
[data-badge="공식"], [data-badge="내 캐릭터"] {
  background: rgba(232, 190, 92, 0.16) !important;
  color: #f0d391 !important;
  border-color: rgba(232, 190, 92, 0.36) !important;
}
/* 위시리스트 활성 하트: 핑크 통일 */
.catalog-card-heart.is-wishlisted, .tile-heart.is-wishlisted { color: var(--sig-pink) !important; }
/* Pro 카드: 골드 프리미엄 */
.pro-upsell-card { border-color: rgba(232, 190, 92, 0.34) !important; }
.pro-upsell-card > span:first-child, .pro-upsell-card strong span { color: var(--sig-gold); }

/* ---------- ③ 디스플레이 타이포 ---------- */
h1, h2, h3 { letter-spacing: -0.015em; }
/* 랭킹 숫자: 세리프 디스플레이 (숫자 전용이라 라틴 세리프 안전) */
.explore-rank-podium-number { font-family: var(--font-display); font-weight: 600; font-style: italic; letter-spacing: 0; }
.explore-rank-row-rank { font-family: var(--font-display); font-weight: 600; }
/* 시네마틱 인용: 배너 서브카피·상세 인용 카드에 한글 세리프 */
#featuredHeroSummary { font-family: var(--font-serif-kr); font-weight: 600; letter-spacing: 0; line-height: 1.55; }
.detail-quote-card p { font-family: var(--font-serif-kr) !important; font-weight: 600 !important; line-height: 1.65 !important; letter-spacing: 0 !important; }

/* ---------- ④ 폴백 아트 (이미지 없는 카드가 구멍처럼 보이지 않게) ---------- */
.catalog-card-fallback, .explore-rank-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 18%, rgba(124, 77, 255, 0.2), transparent 46%),
    radial-gradient(circle at 76% 84%, rgba(95, 141, 255, 0.1), transparent 44%),
    linear-gradient(165deg, #17141f 0%, #0c0a12 100%);
}
.catalog-card-fallback::after, .explore-rank-fallback::after {
  content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px;
}
.catalog-card-fallback, .explore-rank-fallback, .explore-suggest-thumb {
  font-family: var(--font-serif-kr);
}
.catalog-card-fallback { font-size: 54px; font-weight: 700; }
.catalog-card-fallback, .explore-rank-fallback {
  color: transparent;
  -webkit-text-stroke: 1px rgba(202, 186, 255, 0.4);
}

/* ---------- ⑤ 형태 언어 전파 ---------- */
/* 고스트 버튼 → 고스트 캡슐 (전역) */
.ghost-button {
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ghost-button:hover {
  border-color: rgba(154, 107, 255, 0.55) !important;
  background: rgba(124, 77, 255, 0.08) !important;
}
/* 프라이머리 버튼 → 그라데이션 캡슐 + 프레스 (전역) */
.primary-button {
  border-radius: 999px !important;
  background: linear-gradient(135deg, #8b5cf6, #6a3df0) !important;
  box-shadow: 0 6px 22px rgba(124, 77, 255, 0.28);
  transition: filter .15s ease, transform .12s ease;
}
.primary-button:hover:not(:disabled) { filter: brightness(1.08); }
.primary-button:active:not(:disabled) { transform: scale(0.985); }
.primary-button:disabled { box-shadow: none; }
/* 제작 위저드 스텝퍼: 번호 타일 점등 */
.cw-step span {
  border-radius: 10px !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.cw-step.active span {
  background: linear-gradient(135deg, #8b5cf6, #6a3df0) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(124, 77, 255, 0.45);
}
/* 최근 대화 검색: 탐색 검색과 동일한 포커스 링 언어 */
.recent-search {
  border-radius: 999px !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.recent-search:focus-within {
  border-color: rgba(154, 107, 255, 0.75) !important;
  box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.13);
}
/* 상세 액션 버튼: 캡슐 통일 */
.detail-actions button { border-radius: 999px !important; }

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion: reduce) {
}

/* ============================================================
   V3.21 NOIR PASS — 전 뷰 전파 (상세 · 위저드 · 모달 · 최근 대화 ·
   채팅 헤더 · 트레이). 각 뷰 스킨의 !important 반경을 동일 강도
   + 뷰 특이도로 덮는다. 전부 표시용.
   ============================================================ */

/* ---------- 프라이머리/세컨더리 캡슐 통일 (뷰 스킨 특이도 대응) ---------- */
.primary-button,
.selection-tray .primary-button,
.detail-actions .primary-button,
.cw-footer .primary-button,
.account-modal .primary-button,
.start-modal .primary-button {
  border-radius: 999px !important;
  background: linear-gradient(135deg, #8b5cf6, #6a3df0) !important;
}
.detail-start-button { box-shadow: 0 10px 26px rgba(124, 92, 255, 0.34) !important; }
.secondary-button,
.cw-page-head .secondary-button,
.cw-footer .secondary-button {
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  transition: border-color .15s ease, background .15s ease;
}
.secondary-button:hover,
.cw-footer .secondary-button:hover {
  border-color: rgba(154, 107, 255, 0.55) !important;
  background: rgba(124, 77, 255, 0.08) !important;
}

/* ---------- 상세 뷰: 시네마 무대 ---------- */
.detail-copy h1 { position: relative !important; }
.detail-copy h1::after {
  content: ""; position: absolute; left: 2px; bottom: -9px; height: 3px; width: 42px;
  border-radius: 3px; background: linear-gradient(90deg, #9a6bff, rgba(124, 77, 255, 0));
}
.detail-badge { border-radius: 999px !important; }
.detail-copy .tag-chip { border-radius: 999px !important; } .detail-owner-tools button, .detail-danger-zone button { border-radius: 999px !important; }
/* 스탯 숫자: 랭킹 숫자와 같은 세리프 디스플레이 */
.detail-stats strong { font-family: var(--font-display) !important; font-weight: 600 !important; font-style: italic; }
.detail-stats > span { transition: border-color .15s ease, transform .15s ease; }
.detail-stats > span:hover { border-color: rgba(154, 107, 255, 0.45) !important; transform: translateY(-2px); }
/* 대사 인용: 세리프 + 골드 룰 (영화 자막의 인장) */
.detail-quote-card { border-left: 2px solid rgba(232, 190, 92, 0.55) !important; }
.detail-quote-card span { color: var(--sig-gold) !important; font-family: var(--font-display); font-style: italic; }
.detail-copy blockquote {
  font-family: var(--font-serif-kr) !important;
  border-left: 2px solid rgba(232, 190, 92, 0.45) !important;
  border-radius: 4px 16px 16px 4px !important;
}

/* ---------- 제작 위저드 ---------- */
.cw-field-list input:focus, .cw-field-list textarea:focus, .cw-field-list select:focus,
.cw-samples-card textarea:focus {
  border-color: rgba(154, 107, 255, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.13);
  outline: none;
}
.cw-progress { font-family: var(--font-display); font-style: italic; }

/* ---------- 모달 ---------- */
.account-modal-close, .round-button {
  border-radius: 50% !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.account-modal-close:hover, .round-button:hover {
  border-color: rgba(154, 107, 255, 0.5) !important;
  background: rgba(124, 77, 255, 0.12) !important;
}

/* ---------- 최근 대화 목록 ---------- */
.sidebar-recent-item, .recent-page-list > * { transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.recent-page-list .sidebar-recent-item:hover { background: rgba(124, 77, 255, 0.07); transform: translateX(3px); }
.recent-page-head h1 { position: relative; display: inline-block; }

/* ---------- 채팅 헤더 (라이트 터치: 형태만) ---------- */
.chat-header .tool-button { border-radius: 999px !important; transition: border-color .15s ease, background .15s ease; }
.chat-header .tool-button:hover:not(.danger) { border-color: rgba(154, 107, 255, 0.5) !important; background: rgba(124, 77, 255, 0.1) !important; }
.chat-header .tool-button.danger { border-radius: 999px !important; }

/* ---------- 트레이: 시작 버튼 프레스 ---------- */
.selection-tray .primary-button { transition: filter .15s ease, transform .12s ease !important; }
.selection-tray .primary-button:active:not(:disabled) { transform: scale(0.985); }

/* ---------- 페이지 타이틀 스파크 라인 일반화 ---------- */
.creator-profile-view .page-head h1 { position: relative; display: inline-block; }
.creator-profile-view .page-head h1::after {
  content: ""; position: absolute; left: 1px; bottom: -7px; height: 3px; width: 34px;
  border-radius: 3px; background: linear-gradient(90deg, #9a6bff, rgba(124, 77, 255, 0));
}

/* ---------- 특이도 부스트: body 스코프 스킨(0,3,x) 대응 ---------- */
body[class] .selection-tray .primary-button,
body .selection-tray .primary-button {
  border-radius: 999px !important;
  background: linear-gradient(135deg, #8b5cf6, #6a3df0) !important;
}
body.detail-active .character-detail-view .detail-actions button,
body.detail-active .detail-actions .primary-button,
body.detail-active .detail-start-button {
  border-radius: 999px !important;
}
body.detail-active .detail-actions .primary-button {
  background: linear-gradient(135deg, #8b5cf6, #6a3df0) !important;
}
body.detail-active .character-detail-view .detail-copy .tag-chip,
body.detail-active .detail-copy .tag-chip {
  border-radius: 999px !important;
}
body.detail-active .character-detail-view .detail-badge { border-radius: 999px !important; }
body.detail-active .detail-owner-tools button,
body.detail-active .detail-danger-zone button { border-radius: 999px !important; }
body.detail-active .character-detail-view .detail-quote-card {
  border-left: 2px solid rgba(232, 190, 92, 0.55) !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}
body.detail-active .character-detail-view .detail-quote-card span {
  color: var(--sig-gold) !important;
}
body.detail-active .character-detail-view .detail-copy blockquote {
  font-family: var(--font-serif-kr) !important;
  border-left: 2px solid rgba(232, 190, 92, 0.45) !important;
  border-radius: 4px 16px 16px 4px !important;
}

/* ---------- 최종 특이도 매치 (ID 스코프 스킨 대응) ---------- */
#globalSelectionTray #startBtn,
body[class] > #globalSelectionTray #startBtn,
body.play-active > #globalSelectionTray #startBtn,
body.detail-active > #globalSelectionTray #startBtn,
body.library-active > #globalSelectionTray #startBtn,
body.all-characters-active > #globalSelectionTray #startBtn,
body.recent-active > #globalSelectionTray #startBtn {
  border-radius: 999px !important;
  background: linear-gradient(135deg, #8b5cf6, #6a3df0) !important;
}
body.detail-active .character-detail-view #detailTags .tag-chip {
  border-radius: 999px !important;
}

/* ---------- 배지 의미색 특이도 부스트 (뷰 스킨 대응) ---------- */
.tile-badge[data-badge="NEW"], .catalog-card-badge[data-badge="NEW"],
body[class] #playView .tile-badge[data-badge="NEW"],
body[class] .character-tile .tile-badge[data-badge="NEW"],
body[class] .catalog-card .catalog-card-badge[data-badge="NEW"] {
  background: rgba(95, 141, 255, 0.2) !important;
  color: #a7c0ff !important;
  border-color: rgba(95, 141, 255, 0.4) !important;
}
.tile-badge[data-badge="인기"], .catalog-card-badge[data-badge="인기"],
body[class] #playView .tile-badge[data-badge="인기"],
body[class] .character-tile .tile-badge[data-badge="인기"],
body[class] .catalog-card .catalog-card-badge[data-badge="인기"] {
  background: rgba(255, 107, 138, 0.18) !important;
  color: #ffb3c4 !important;
  border-color: rgba(255, 107, 138, 0.38) !important;
}
.tile-badge[data-badge="공식"], .tile-badge[data-badge="내 캐릭터"],
.catalog-card-badge[data-badge="공식"], .catalog-card-badge[data-badge="내 캐릭터"],
body[class] .character-tile .tile-badge[data-badge="공식"],
body[class] .character-tile .tile-badge[data-badge="내 캐릭터"],
body[class] .catalog-card .catalog-card-badge[data-badge="공식"],
body[class] .catalog-card .catalog-card-badge[data-badge="내 캐릭터"] {
  background: rgba(232, 190, 92, 0.16) !important;
  color: #f0d391 !important;
  border-color: rgba(232, 190, 92, 0.36) !important;
}

/* 배지 의미색: 홈 캐러셀 ID 스코프(1,4,0) 스킨을 상회 */
body.play-active #playView .tryva-home-card-carousel .character-tile .tile-badge[data-badge="NEW"] {
  background: rgba(95, 141, 255, 0.22) !important; color: #a7c0ff !important;
}
body.play-active #playView .tryva-home-card-carousel .character-tile .tile-badge[data-badge="인기"] {
  background: rgba(255, 107, 138, 0.2) !important; color: #ffb3c4 !important;
}
body.play-active #playView .tryva-home-card-carousel .character-tile .tile-badge[data-badge="공식"],
body.play-active #playView .tryva-home-card-carousel .character-tile .tile-badge[data-badge="내 캐릭터"] {
  background: rgba(232, 190, 92, 0.18) !important; color: #f0d391 !important;
}
/* Story asset creation entry points: the existing Create utility expands in place. */
#createMenuGroup.nav-create-group {
  width: 100%;
}
#createMenuToggle .nav-chevron {
  transition: transform 160ms ease, color 160ms ease;
}
#createMenuToggle.is-open .nav-chevron {
  color: #cdbdff !important;
  transform: rotate(90deg);
}
#createSubmenu.nav-create-submenu {
  display: grid;
  gap: 3px;
  margin: 4px 0 7px 20px;
  padding: 4px 0 4px 10px;
  border-left: 1px solid rgba(139, 109, 255, .27);
}
#createSubmenu.nav-create-submenu.hidden {
  display: none !important;
}
#createSubmenu.nav-create-submenu [data-create-kind] {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8f879f;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
#createSubmenu.nav-create-submenu [data-create-kind]:hover,
#createSubmenu.nav-create-submenu [data-create-kind]:focus-visible {
  background: rgba(139, 109, 255, .11);
  color: #eee9fb;
  transform: translateX(2px);
  outline: none;
}
#createSubmenu.nav-create-submenu [data-create-kind] > span {
  color: #9278e8;
  font-size: 14px;
  text-align: center;
}
#createSubmenu.nav-create-submenu [data-create-kind] > strong {
  font-size: 13.5px;
  font-weight: 580;
}

#storyAssetCreateView.story-asset-create-view {
  min-height: 100vh;
  padding: 0;
  background: var(--tryva-bg, #0b0a11);
  color: #eeeaf6;
  overflow: hidden;
}
#storyAssetCreateView.story-asset-create-view.hidden {
  display: none !important;
}
.story-asset-create-head {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 88px;
  padding: 17px 30px;
  border-bottom: 1px solid var(--tryva-line, rgba(255,255,255,.08));
  background: var(--tryva-sidebar, #111019);
}
.story-asset-create-head > div { flex: 1; }
.story-asset-create-head span {
  color: #9177eb;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
}
.story-asset-create-head h1 { margin: 3px 0 2px; font-size: 22px; }
.story-asset-create-head p { margin: 0; color: #8f879f; font-size: 12.5px; }
.story-asset-create-main {
  display: grid;
  grid-template-columns: 230px minmax(420px, 1fr) 340px;
  grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - 88px);
  min-height: 0;
}
/* 그리드 아이템의 기본 min-height:auto는 아이템이 내용보다 작아지는 것을
   막는다. 그래서 열에 overflow-y:auto를 줘도 열 자체가 내용 높이까지
   늘어나 버리고, 넘칠 것이 없으니 스크롤바도 생기지 않는다. 0으로 낮춰야
   각 열이 그리드 높이에 갇히고 그 안에서 스크롤이 만들어진다. */
.story-asset-create-main > * {
  min-height: 0;
  min-width: 0;
}
.story-asset-create-steps {
  padding: 28px 18px;
  border-right: 1px solid var(--tryva-line, rgba(255,255,255,.08));
  background: var(--tryva-sidebar, #111019);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#storyAssetStepList {
  display: grid;
  gap: 7px;
}
#storyAssetStepList > button {
  display: grid;
  grid-template-columns: 34px 1fr;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #8f879f;
  text-align: left;
  cursor: pointer;
}
#storyAssetStepList > button:hover,
#storyAssetStepList > button:focus-visible { background: rgba(139,109,255,.07); color: #dcd5eb; outline: none; }
#storyAssetStepList > button.active { border-color: rgba(139,109,255,.24); background: rgba(139,109,255,.10); color: #eeeaf6; }
#storyAssetStepList > button span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: #24202f;
  color: #9d8bc6;
  font-weight: 750;
}
#storyAssetStepList > button.active span { background: linear-gradient(135deg,#7656e8,#9d72ff); color: white; }
#storyAssetStepList > button strong { font-size: 13px; }
#storyAssetStepList > button small { margin-top: 3px; color: #8f879f; font-size: 10.5px; }
.story-asset-create-next { margin: 20px 8px; color: #7f778e; }
.story-asset-create-next span { font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.story-asset-create-next p { margin: 6px 0 0; font-size: 12px; line-height: 1.55; }
.story-asset-create-form {
  padding: 34px 38px 110px;
  overflow-y: auto;
}
.story-asset-form-intro { margin-bottom: 25px; }
.story-asset-form-intro h2 { margin: 0 0 6px; font-size: 23px; }
.story-asset-form-intro p { margin: 0; color: #8f879f; font-size: 13px; }
.story-asset-step-panel > label,
.story-asset-step-panel > .world-editor-only > label,
.story-asset-step-panel > .lorebook-editor-only > label,
.world-rule-card > label {
  display: grid;
  gap: 9px;
  margin-bottom: 20px;
}
.story-asset-step-panel label > span { color: #d8d2e4; font-size: 13px; font-weight: 650; }
.story-asset-step-panel label > span b { margin-left: 5px; color: #9b80f6; font-size: 10px; }
.story-asset-create-form input,
.story-asset-create-form textarea,
.story-asset-create-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--tryva-line, rgba(255,255,255,.09));
  border-radius: 11px;
  outline: 0;
  background: var(--tryva-surface-2, #181621);
  color: #eeeaf6;
  font: inherit;
}
.story-asset-create-form textarea { resize: vertical; line-height: 1.6; }
.story-asset-create-form input:focus,
.story-asset-create-form textarea:focus,
.story-asset-create-form select:focus { border-color: rgba(139,109,255,.68); box-shadow: 0 0 0 3px rgba(139,109,255,.10); }
.story-asset-create-status { min-height: 22px; color: #a99ec0; font-size: 12px; }
.story-asset-create-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.story-asset-create-actions .primary-button { min-width: 132px; padding: 12px 20px; border-radius: 11px; }
.story-asset-create-preview {
  padding: 31px 27px;
  border-left: 1px solid var(--tryva-line, rgba(255,255,255,.08));
  background: var(--tryva-sidebar, #111019);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.story-asset-create-preview > span { color: #7f778e; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.story-asset-create-preview h2 { margin: 14px 0 8px; font-size: 20px; overflow-wrap: anywhere; }
.story-asset-create-preview p { min-height: 70px; margin: 0 0 18px; color: #9b93aa; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.story-asset-create-preview small { display: inline-flex; padding: 6px 10px; border: 1px solid rgba(139,109,255,.22); border-radius: 999px; background: rgba(139,109,255,.09); color: #b8a7ea; }

.story-asset-step-panel.hidden { display: none !important; }
.story-inline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.story-inline-head > div { min-width: 0; }
.story-field-grid { display: grid; gap: 15px; margin-bottom: 20px; }
.story-field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-field-grid > label { display: grid; gap: 8px; min-width: 0; }
.world-rules-editor { display: grid; gap: 15px; }
.world-rule-card { padding: 19px; border: 1px solid rgba(255,255,255,.085); border-radius: 15px; background: rgba(255,255,255,.025); }
.world-rule-card > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.world-rule-card > header strong { color: #e7e0f3; font-size: 13px; }
.world-rule-card > header button { border: 0; background: transparent; color: #907f9f; cursor: pointer; }
.world-rule-card > header button:hover { color: #e59bad; }
.story-check-line { display: flex !important; align-items: center; gap: 9px !important; color: #a59caf; font-size: 12px; }
.story-check-line input { width: auto; }
.story-empty-note { margin: 0; padding: 18px; border: 1px dashed rgba(255,255,255,.09); border-radius: 12px; color: #81798f; font-size: 12px; line-height: 1.55; }
.story-list-add-row { display: flex; justify-content: flex-start; margin-top: 15px; }
.story-secret-field { padding: 17px; border: 1px solid rgba(190,107,137,.20); border-radius: 13px; background: rgba(190,107,137,.045); }
.story-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.story-check-grid label,
.story-permission-list label { display: flex; align-items: center; gap: 9px; min-height: 43px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.075); border-radius: 11px; background: rgba(255,255,255,.02); color: #b8afc5; font-size: 12px; cursor: pointer; }
.story-check-grid input,
.story-permission-list input,
.world-lorebook-option > input { width: auto; accent-color: #8b6dff; }
.story-permission-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 22px; }
.world-lorebook-options { display: grid; gap: 10px; }
.world-lorebook-option { display: grid; grid-template-columns: auto minmax(0,1fr) 105px; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; background: rgba(255,255,255,.02); }
.world-lorebook-option > span { display: grid; gap: 3px; min-width: 0; }
.world-lorebook-option strong { color: #ddd6e8; font-size: 12.5px; overflow-wrap: anywhere; }
.world-lorebook-option small { color: #82798f; font-size: 10.5px; overflow-wrap: anywhere; }
.world-lorebook-option select { padding: 8px 9px; }
#lorebookWorldOptions .world-lorebook-option { grid-template-columns: auto minmax(0,1fr); }
.story-subfield-label { display: block; margin: 0 0 9px; color: #d8d2e4; font-size: 13px; font-weight: 650; }
.lore-activation-group { display: grid; gap: 10px; }
.lore-activation-group > header { margin-bottom: 5px; }
.lore-activation-row {
  display: grid;
  grid-template-columns: minmax(145px,1.1fr) minmax(100px,.7fr) minmax(160px,1.4fr) 72px auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
}
.lore-activation-row input,
.lore-activation-row select { min-width: 0; padding: 9px 10px; }
.lore-activation-row > button { border: 0; background: transparent; color: #907f9f; cursor: pointer; }
.lore-budget-card .story-check-line { margin-bottom: 0; }
.world-validation-result details { margin-top: 14px; }
.world-validation-result summary { cursor: pointer; color: #b8afc5; }

/* Character maker: reuse the story-asset three-column editing frame on desktop. */
@media (min-width: 901px) {
  body.create-active { overflow: auto !important; }
  body.create-active #createView.character-wizard {
    display: block !important;
    max-width: none !important;
    min-height: calc(100dvh - 44px) !important;
    margin: 0 !important;
    padding: 22px 24px 34px !important;
    overflow: visible !important;
    background: transparent !important;
  }
  body.create-active .character-wizard .cw-page-head {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 18px !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.create-active .character-wizard .cw-page-head h1 { font-size: 25px !important; }
  body.create-active .character-wizard .cw-shell {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 235px minmax(0, 1fr) 310px !important;
    grid-template-rows: minmax(620px, calc(100dvh - 195px)) auto !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 690px !important;
    overflow: hidden !important;
    border: 1px solid var(--tryva-line) !important;
    border-radius: 18px !important;
    background: var(--tryva-surface) !important;
  }
  body.create-active .character-wizard .cw-step-column {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    min-width: 0 !important;
    padding: 20px 14px !important;
    overflow-y: auto !important;
    border-right: 1px solid var(--tryva-line) !important;
    background: var(--tryva-sidebar) !important;
  }
  body.create-active .character-wizard .cw-stepper {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  body.create-active .character-wizard .cw-step {
    grid-template-columns: 29px minmax(0, 1fr) !important;
    min-height: 56px !important;
    padding: 8px 9px !important;
    border-radius: 11px !important;
  }
  body.create-active .character-wizard .cw-step > span { width: 29px !important; height: 29px !important; border-radius: 8px !important; }
  body.create-active .character-wizard .cw-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    background: var(--tryva-bg) !important;
  }
  body.create-active .character-wizard .cw-step-panel,
  body.create-active .character-wizard .cw-step-panel.active {
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 30px 34px 46px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--tryva-bg) !important;
    box-shadow: none !important;
  }
  body.create-active .character-wizard .cw-preview-panel {
    position: relative !important;
    inset: auto !important;
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 25px 22px !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-left: 1px solid var(--tryva-line) !important;
    border-radius: 0 !important;
    background: var(--tryva-sidebar) !important;
  }
  body.create-active .character-wizard .cw-footer {
    position: static !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 13px 28px !important;
    border: 0 !important;
    border-top: 1px solid var(--tryva-line) !important;
    background: rgba(11,10,17,.96) !important;
  }
}

.character-clone-note { color: #8f879f; font-size: 11px; }
.character-clone-note { margin: 0 0 20px; }
.character-world-position-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.character-world-position-grid label,.character-story-long-field { display: grid; gap: 7px; }
.character-world-position-grid label > span,.character-story-long-field > span { color: #cfc7dc; font-size: 12px; }
.character-story-long-field { margin-top: 13px; }
.character-lore-knowledge-editor { display: grid; gap: 8px; }
.character-knowledge-row { display: grid; grid-template-columns: minmax(0,1fr) 145px minmax(120px,.8fr); gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--tryva-line); border-radius: 11px; background: var(--tryva-surface-2); }
.character-knowledge-row > span { display: grid; gap: 2px; min-width: 0; }
.character-knowledge-row strong { color: #ddd6e8; font-size: 12px; }
.character-knowledge-row small { color: #81798f; font-size: 10px; overflow-wrap: anywhere; }
.cw-preview-eyebrow { color: #8f7eb4; font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.cw-preview-hero { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 13px; align-items: center; margin: 15px 0; padding: 14px; }
.create-preview-avatar { display: grid; place-items: center; width: 72px; height: 86px; overflow: hidden; border: 1px solid var(--tryva-line); border-radius: 12px; background: var(--tryva-surface-2); color: #7e7391; font-size: 22px; }
.create-preview-avatar > * { width: 100%; height: 100%; object-fit: cover; }
.cw-preview-hero h2 { margin: 0 0 5px; font-size: 17px; }
.cw-preview-hero p { margin: 0; color: #8f879f; font-size: 11px; line-height: 1.5; }
.cw-preview-section { margin-top: 12px; padding: 14px; }
.cw-preview-section h3,.cw-preview-section > span { margin: 0 0 9px; color: #d8d2e4; font-size: 12px; }
.cw-preview-section > p { margin: 0; color: #aaa1b7; font-size: 11.5px; line-height: 1.55; }
.cw-preview-traits { display: grid; gap: 7px; }
.cw-preview-traits > span { padding: 7px 9px; border-radius: 8px; background: rgba(139,109,255,.07); color: #b9aec8; font-size: 11px; }
.world-validation-result { min-height: 150px; padding: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.025); color: #9e95aa; font-size: 12.5px; }
.world-validation-result p { margin: 0; }
.world-validation-result .validation-ok { color: #9fd5b5; }
.world-validation-result ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.world-validation-result li { display: grid; gap: 3px; padding: 10px 12px; border-radius: 9px; background: rgba(217,98,122,.07); }
.world-validation-result li.warning { background: rgba(219,170,80,.07); }
.world-validation-result li strong { color: #d98fa1; font-size: 10px; }
.world-validation-result li.warning strong { color: #d6b36b; }
.world-publish-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }
.world-preview-meta { display: grid; gap: 12px; margin: 24px 0 0; }
.world-preview-meta.hidden { display: none; }
.world-preview-meta div { padding: 12px; border: 1px solid rgba(255,255,255,.065); border-radius: 11px; background: rgba(255,255,255,.02); }
.world-preview-meta dt { color: #716a7d; font-size: 10px; }
.world-preview-meta dd { margin: 5px 0 0; color: #aaa1b7; font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }

@media (max-width: 1180px) and (min-width: 901px) {
  .story-asset-create-main { grid-template-columns: 205px minmax(400px, 1fr) 290px; }
  .story-asset-create-form { padding-inline: 28px; }
}

/* ============================================================
   V3.21.1 — CARD CONTRACT UNIFICATION
   Home = fixed compact discovery card.
   Explore + Library = one shared full-size catalog card.
   Create/Edit = the same full-size card itself is the crop surface.
   No persisted crop/pan/zoom value is changed here.
   ============================================================ */

/* Home: remove width expansion entirely. Keep only a restrained lift, border and shadow. */
@media (hover: hover) and (pointer: fine) {
  

  body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile,
  body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile {
    transition:
      transform 180ms cubic-bezier(.2,.78,.22,1),
      border-color 180ms ease,
      box-shadow 180ms ease,
      filter 180ms ease !important;
  }

  body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile:hover,
  body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile:focus-visible,
  body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile:hover,
  body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile:focus-visible {
    transform: translateY(-3px) !important;
    border-color: rgba(154, 107, 255, .44) !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.34), 0 0 0 1px rgba(154,107,255,.12) !important;
    filter: brightness(1.025) !important;
  }
}

body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile .tile-art,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile .tile-art,
body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile:hover .tile-art,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile:hover .tile-art {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile .tile-body,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile .tile-body,
body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile:hover .tile-body,
body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile:focus-visible .tile-body,
body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile.selected .tile-body,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile:hover .tile-body,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile:focus-visible .tile-body,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile.selected .tile-body {
  width: calc(var(--tryva-home-card-w, 232px) - 58px) !important;
}

/* Library: remove the legacy expandable character-tile contract and use the exact catalog grid/card contract. */
body.library-active #libraryView > #libraryGrid.library-grid {
  --tryva-library-hover-reserve: 0px !important;







  padding: 22px 32px 28px !important;
}

body.library-active #libraryView > #libraryGrid.library-grid .catalog-card,
body.library-active #libraryView > #libraryGrid.library-grid .create-card {
  
  
  
  
  
  
  border-radius: var(--tryva-card-radius, 18px) !important;
}

body.library-active #libraryView > #libraryGrid.library-grid .catalog-card {
  transition: transform 180ms cubic-bezier(.2,.78,.22,1), border-color 180ms ease, box-shadow 180ms ease !important;
}

body.library-active #libraryView > #libraryGrid.library-grid .catalog-card:hover,
body.library-active #libraryView > #libraryGrid.library-grid .catalog-card:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(124,92,255,.32) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.24) !important;
}

body.library-active #libraryView > #libraryGrid.library-grid .catalog-card-edit {
  position: absolute !important;
  z-index: 6 !important;
  top: 11px !important;
  right: 48px !important;
  display: grid !important;
  
  
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(15,13,22,.68) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: background 150ms ease, transform 150ms ease !important;
}
body.library-active #libraryView > #libraryGrid.library-grid .catalog-card-edit:hover,
body.library-active #libraryView > #libraryGrid.library-grid .catalog-card-edit:focus-visible {
  background: rgba(124,92,255,.74) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

@media (min-width: 1600px) {

}
@media (min-width: 1280px) and (max-width: 1599px) {

}
@media (min-width: 901px) and (max-width: 1279px) {

}
@media (max-width: 900px) {
  body.library-active #libraryView > #libraryGrid.library-grid {


    padding-left: var(--tryva-mobile-gutter, 14px) !important;
    padding-right: var(--tryva-mobile-gutter, 14px) !important;
  }
  
}

/* Create/Edit: the actual full-size catalog card is the editor surface. No separate framed placement board and no expansion state. */
.tryva-shared-card-editor-stage,
body.create-active .cw-create-card-editor-stage,
.card-image-editor-modal .tryva-shared-card-editor-stage {
  display: grid !important;
  width: 100% !important;
  place-items: center !important;
  gap: 9px !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.tryva-shared-card-editor-viewport,
body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport,
.card-image-editor-modal .tryva-shared-card-editor-viewport,
.tryva-shared-card-editor-viewport:hover,
.tryva-shared-card-editor-viewport:focus,
.tryva-shared-card-editor-viewport:focus-within,
body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport:hover,
body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport:focus,
body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport:focus-within {
  width: var(--tryva-card-w, 248px) !important;
  min-width: var(--tryva-card-w, 248px) !important;
  max-width: var(--tryva-card-w, 248px) !important;
  height: var(--tryva-card-h, 354px) !important;
  min-height: var(--tryva-card-h, 354px) !important;
  max-height: var(--tryva-card-h, 354px) !important;
  overflow: visible !important;
  border-radius: var(--tryva-card-radius, 18px) !important;
  box-shadow: none !important;
  transition: none !important;
}

body.create-active #profileCropFrame.cw-create-crop-frame.profile,
.card-image-editor-modal #cropDragFrame,
body.create-active #profileCropFrame.cw-create-crop-frame.profile:hover,
.card-image-editor-modal #cropDragFrame:hover {
  width: var(--tryva-card-w, 248px) !important;
  min-width: var(--tryva-card-w, 248px) !important;
  max-width: var(--tryva-card-w, 248px) !important;
  height: var(--tryva-card-h, 354px) !important;
  min-height: var(--tryva-card-h, 354px) !important;
  max-height: var(--tryva-card-h, 354px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--tryva-line, rgba(255,255,255,.10)) !important;
  border-radius: var(--tryva-card-radius, 18px) !important;
  background: #15131e !important;
  box-shadow: none !important;
  cursor: grab !important;
}
body.create-active #profileCropFrame.dragging,
.card-image-editor-modal #cropDragFrame.dragging {
  cursor: grabbing !important;
  border-color: rgba(154,107,255,.72) !important;
  box-shadow: 0 0 0 3px rgba(124,77,255,.14), 0 18px 42px rgba(0,0,0,.30) !important;
}

body.create-active #profileCropFrame .crop-card-inner,
.card-image-editor-modal #cropDragFrame .crop-card-inner,
.catalog-card-editor-surface {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: #15131e !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: inherit !important;
}

html body.create-active #profileCropFrame .crop-card-inner > img.tryva-card-cover-media,
html body.create-active #profileCropFrame .crop-card-inner > video.tryva-card-cover-media,
html body .card-image-editor-modal #cropDragFrame .crop-card-inner > img.tryva-card-cover-media,
html body .card-image-editor-modal #cropDragFrame .crop-card-inner > video.tryva-card-cover-media {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-card-cover-width, 100%) !important;
  height: var(--tryva-card-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-card-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}

body.create-active #profileCropFrame .catalog-card-shade,
.card-image-editor-modal #cropDragFrame .catalog-card-shade,
.catalog-card-editor-surface .catalog-card-shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  background: linear-gradient(180deg, transparent 34%, rgba(7,8,15,.18) 52%, rgba(7,8,15,.96) 100%) !important;
  pointer-events: none !important;
}

body.create-active #profileCropFrame .catalog-card-copy,
.card-image-editor-modal #cropDragFrame .catalog-card-copy,
.catalog-card-editor-surface .catalog-card-copy {
  position: absolute !important;
  z-index: 4 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  padding: var(--tryva-card-copy-padding, 12px) !important;
  pointer-events: none !important;
}
body.create-active #profileCropFrame .catalog-card-copy h3,
.card-image-editor-modal #cropDragFrame .catalog-card-copy h3,
.catalog-card-editor-surface .catalog-card-copy h3 {
  margin: 0 !important;
  color: #fff !important;
  font-size: var(--tryva-card-name-size, 21px) !important;
  font-weight: var(--tryva-card-name-weight, 840) !important;
  line-height: var(--tryva-card-name-line-height, 1) !important;
  letter-spacing: var(--tryva-card-name-letter-spacing, -.035em) !important;
}
body.create-active #profileCropFrame .catalog-card-copy > p,
.card-image-editor-modal #cropDragFrame .catalog-card-copy > p,
.catalog-card-editor-surface .catalog-card-copy > p {
  margin: var(--tryva-card-meta-margin, 5px 0 7px) !important;
  overflow: hidden !important;
  color: #aaa3bb !important;
  font-size: var(--tryva-card-meta-size, 11.5px) !important;
  line-height: var(--tryva-card-meta-line-height, 1.35) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.create-active #profileCropFrame .catalog-card-tags,
.card-image-editor-modal #cropDragFrame .catalog-card-tags,
.catalog-card-editor-surface .catalog-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--tryva-card-tag-gap, 5px) !important;
}
body.create-active #profileCropFrame .catalog-card-tags span,
.card-image-editor-modal #cropDragFrame .catalog-card-tags span,
.catalog-card-editor-surface .catalog-card-tags span {
  min-height: var(--tryva-card-tag-min-height, 20px) !important;
  padding: var(--tryva-card-tag-padding, 3px 7px) !important;
  border-radius: 7px !important;
  font-size: var(--tryva-card-tag-size, 9.5px) !important;
}
body.create-active #profileCropFrame .crop-editor-badge,
.card-image-editor-modal #cropDragFrame .crop-editor-badge {
  position: absolute !important;
  z-index: 5 !important;
  left: 11px !important;
  top: 11px !important;
}
body.create-active #profileCropFrame .crop-face-guide,
.card-image-editor-modal #cropDragFrame .crop-face-guide {
  z-index: 6 !important;
}
.simple-card-editor-hint {
  max-width: 310px !important;
  margin: 0 !important;
  color: #8f879f !important;
  text-align: center !important;
}

/* Hidden/legacy final wizard preview also uses the same catalog card contract if it is shown later. */
.character-wizard #wizardLibraryCardPreview .catalog-card {
  width: var(--tryva-card-w, 248px) !important;
  min-width: var(--tryva-card-w, 248px) !important;
  max-width: var(--tryva-card-w, 248px) !important;
  height: var(--tryva-card-h, 354px) !important;
  min-height: var(--tryva-card-h, 354px) !important;
  max-height: var(--tryva-card-h, 354px) !important;
}

@media (max-width: 760px) {
  .tryva-shared-card-editor-viewport,
  body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport,
  .card-image-editor-modal .tryva-shared-card-editor-viewport,
  body.create-active #profileCropFrame.cw-create-crop-frame.profile,
  .card-image-editor-modal #cropDragFrame {
    width: min(var(--tryva-card-w, 248px), 86vw) !important;
    min-width: min(var(--tryva-card-w, 248px), 86vw) !important;
    max-width: min(var(--tryva-card-w, 248px), 86vw) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--tryva-card-aspect-ratio, 218 / 302) !important;
  }
}

/* Library full-card visual parity with Explore. */
@media (min-width: 901px) {
  body.library-active #libraryGrid .catalog-card-shade {
    background: linear-gradient(180deg, transparent 34%, rgba(7,8,15,.18) 52%, rgba(7,8,15,.96) 100%) !important;
  }
  body.library-active #libraryGrid .catalog-card-copy {
    padding: 15px !important;
  }
  body.library-active #libraryGrid .catalog-card-copy h3 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 840 !important;
    line-height: 1 !important;
    letter-spacing: -.035em !important;
  }
  body.library-active #libraryGrid .catalog-card-copy p {
    margin: 6px 0 9px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  body.library-active #libraryGrid .catalog-card-tags span {
    min-height: 22px !important;
    padding: 4px 8px !important;
    border-radius: 7px !important;
    font-size: 10.5px !important;
  }
  body.library-active #libraryGrid .catalog-card-copy .creator-byline {
    display: none !important;
  }
}

html body.library-active #libraryGrid .catalog-card .catalog-card-media > img.tryva-card-cover-media,
html body.library-active #libraryGrid .catalog-card .catalog-card-media > video.tryva-card-cover-media {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-card-cover-width, 100%) !important;
  height: var(--tryva-card-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-card-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}

/* Complete Library interaction parity with Explore's full card. */
body.library-active #libraryGrid .catalog-card.selected {
  border-color: rgba(156,94,255,.78) !important;
  box-shadow: 0 0 0 1px rgba(156,94,255,.35), 0 18px 36px rgba(65,31,126,.28) !important;
}
body.library-active #libraryGrid .catalog-card-copy {


  pointer-events: none !important;
  transition: opacity 160ms ease !important;
}
body.library-active #libraryGrid .catalog-card-hover {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  left: 10px !important;
  z-index: 5 !important;


  padding: 13px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg,rgba(14,14,24,.76),rgba(9,10,17,.96)) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.30) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  backdrop-filter: blur(14px) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}
body.library-active #libraryGrid .catalog-card:hover .catalog-card-copy,
body.library-active #libraryGrid .catalog-card:focus-visible .catalog-card-copy,
body.library-active #libraryGrid .catalog-card.selected .catalog-card-copy,
body.library-active #libraryGrid .catalog-card.is-touch-expanded .catalog-card-copy {
  opacity: 0 !important;
}
body.library-active #libraryGrid .catalog-card:hover .catalog-card-hover,
body.library-active #libraryGrid .catalog-card:focus-visible .catalog-card-hover,
body.library-active #libraryGrid .catalog-card.selected .catalog-card-hover,
body.library-active #libraryGrid .catalog-card.is-touch-expanded .catalog-card-hover {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
body.library-active #libraryGrid .catalog-card-hover > p {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(240,235,248,.88) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}
body.library-active #libraryGrid .catalog-card-hover > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
body.library-active #libraryGrid .catalog-card-detail,
body.library-active #libraryGrid .catalog-card-add {

  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 11px !important;
  color: rgba(250,247,255,.94) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  cursor: pointer !important;
}
body.library-active #libraryGrid .catalog-card-detail {

  padding: 0 14px !important;
  background: rgba(255,255,255,.06) !important;
}
body.library-active #libraryGrid .catalog-card-add {


  padding: 0 !important;
  background: linear-gradient(135deg,rgba(139,76,244,.92),rgba(105,52,209,.92)) !important;
  font-size: 20px !important;
}
body.library-active #libraryGrid .catalog-card-add.selected {
  background: rgba(77,42,139,.90) !important;
}

/* Final unconditional Home fixed-width guard: touch selection/focus and environments
   without a fine-pointer media feature must never resurrect the legacy expansion. */
body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile,
body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile:hover,
body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile:focus-visible,
body.play-active #playView .tryva-home-card-carousel > #characterGrid.character-grid .character-tile.selected,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile:hover,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile:focus-visible,
body.play-active #playView .tryva-home-card-carousel > #newCharacterRail.character-grid .character-tile.selected {
  
  
  
  
  
  transition: transform 180ms cubic-bezier(.2,.78,.22,1), border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

/* Editor hard stop: the editable card itself never lifts or expands on hover. */
#cropDragFrame,
#cropDragFrame:hover,
#cropDragFrame:focus-within {
  width: var(--tryva-card-w, 248px) !important;
  min-width: var(--tryva-card-w, 248px) !important;
  max-width: var(--tryva-card-w, 248px) !important;
  height: var(--tryva-card-h, 354px) !important;
  min-height: var(--tryva-card-h, 354px) !important;
  max-height: var(--tryva-card-h, 354px) !important;
}
.catalog-card-editor-surface,
.catalog-card-editor-surface:hover,
.catalog-card-editor-surface:focus,
.catalog-card-editor-surface:focus-visible {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* ============================================================
   V3.21.2 — CREATOR PROFILE CARD PARITY + CROP GUIDE REMOVAL
   Creator profile = the same fixed full-size catalog card contract.
   Create/Edit = no face oval, crosshair, label or guide divider.
   ============================================================ */

/* The editor must show only the real card. Legacy guide markup is disabled as a hard guard. */
body.create-active #profileCropFrame .crop-face-guide,
.card-image-editor-modal #cropDragFrame .crop-face-guide,
.catalog-card-editor-surface .crop-face-guide,
.crop-face-guide {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Creator profile character area can use the same six/five/three/two-column contract. */
body.creator-profile-active .creator-profile-character-section {
  width: 100% !important;
  max-width: none !important;
}



body.creator-profile-active #creatorProfileCharacterGrid .catalog-card {
  position: relative !important;
  isolation: isolate !important;







  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: var(--tryva-card-radius, 18px) !important;
  background: #090a12 !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;
  cursor: pointer !important;
  outline: none !important;
  transition: transform 180ms cubic-bezier(.2,.78,.22,1), border-color 180ms ease, box-shadow 180ms ease !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card:hover,
body.creator-profile-active #creatorProfileCharacterGrid .catalog-card:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(124,92,255,.32) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.24) !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card.selected {
  border-color: rgba(156,94,255,.78) !important;
  box-shadow: 0 0 0 1px rgba(156,94,255,.35), 0 18px 36px rgba(65,31,126,.28) !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  background: #090a12 !important;
}

html body.creator-profile-active #creatorProfileCharacterGrid .catalog-card .catalog-card-media > img.tryva-card-cover-media,
html body.creator-profile-active #creatorProfileCharacterGrid .catalog-card .catalog-card-media > video.tryva-card-cover-media {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-card-cover-width, 100%) !important;
  height: var(--tryva-card-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-card-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-shade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent 34%, rgba(7,8,15,.18) 52%, rgba(7,8,15,.96) 100%) !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 4 !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-heart {
  position: absolute !important;
  top: 11px !important;
  right: 11px !important;
  z-index: 6 !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-edit {
  position: absolute !important;
  z-index: 6 !important;
  top: 11px !important;
  right: 48px !important;




  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(15,13,22,.68) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: background 150ms ease, transform 150ms ease !important;
}
body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-edit:hover,
body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-edit:focus-visible {
  background: rgba(124,92,255,.74) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-copy {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 3 !important;


  padding: 15px !important;
  pointer-events: none !important;
  transition: opacity 160ms ease !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-copy h3 {
  margin: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 840 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-copy > p {
  margin: 6px 0 9px !important;
  overflow: hidden !important;
  color: rgba(241,236,248,.78) !important;
  font-size: 12.5px !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}



body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-tags span {
  flex: 0 0 auto !important;
  min-height: 22px !important;
  padding: 4px 8px !important;
  border-radius: 7px !important;
  font-size: 10.5px !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-hover {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  left: 10px !important;
  z-index: 5 !important;


  padding: 13px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg,rgba(14,14,24,.76),rgba(9,10,17,.96)) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.30) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  backdrop-filter: blur(14px) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card:hover .catalog-card-copy,
body.creator-profile-active #creatorProfileCharacterGrid .catalog-card:focus-visible .catalog-card-copy,
body.creator-profile-active #creatorProfileCharacterGrid .catalog-card.selected .catalog-card-copy,
body.creator-profile-active #creatorProfileCharacterGrid .catalog-card.is-touch-expanded .catalog-card-copy {
  opacity: 0 !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card:hover .catalog-card-hover,
body.creator-profile-active #creatorProfileCharacterGrid .catalog-card:focus-visible .catalog-card-hover,
body.creator-profile-active #creatorProfileCharacterGrid .catalog-card.selected .catalog-card-hover,
body.creator-profile-active #creatorProfileCharacterGrid .catalog-card.is-touch-expanded .catalog-card-hover {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-hover > p {
  display: -webkit-box !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(240,235,248,.88) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-hover > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-detail,
body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-add {

  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 11px !important;
  color: rgba(250,247,255,.94) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  cursor: pointer !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-detail {

  padding: 0 14px !important;
  background: rgba(255,255,255,.06) !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-add {


  padding: 0 !important;
  background: linear-gradient(135deg,rgba(139,76,244,.92),rgba(105,52,209,.92)) !important;
  font-size: 20px !important;
}

body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-add.selected {
  background: rgba(77,42,139,.90) !important;
}

@media (min-width: 1600px) {

}
@media (min-width: 1280px) and (max-width: 1599px) {

}
@media (min-width: 901px) and (max-width: 1279px) {

}
@media (max-width: 900px) {


  body.creator-profile-active #creatorProfileCharacterGrid .catalog-card-copy h3 {
    font-size: 20px !important;
  }
}
/* V3.24.0: writing-first world/lorebook creator. */
.story-asset-composer {
  max-width: 860px;
  margin: 0 auto;
}
.story-asset-composer > * + * {
  margin-top: 24px;
}
.story-kind-basic {
  display: grid;
  gap: 18px;
}

/* The form kind is the single owner of creator-only visibility. This keeps
   direct-route boot, step changes and final confirmation on the same contract. */
#storyAssetCreateView #storyAssetCreateForm:not(.world-maker-active) .world-editor-only,
#storyAssetCreateView #storyAssetCreateForm:not(.lorebook-maker-active) .lorebook-editor-only,
#storyAssetCreateView #storyAssetCreateForm:not(.scenario-maker-active) .scenario-editor-only {
  display: none !important;
}
.story-kind-basic > label,
.story-link-block > label,
.story-setting-section > label,
.story-advanced-details > label {
  display: grid;
  gap: 9px;
  margin: 0;
}
.story-advanced-field {
  display: none !important;
}
.story-setting-section,
.story-link-block,
.story-publish-card {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background: rgba(255,255,255,.018);
}
.story-setting-section > * + *,
.story-link-block > * + * {
  margin-top: 18px;
}
.story-section-title,
.story-inline-copy {
  display: grid;
  gap: 5px;
}
.story-section-title strong,
.story-inline-copy strong {
  color: #e6e0ef;
  font-size: 15px;
}
.story-section-title p,
.story-inline-copy p,
.story-details-help {
  margin: 0;
  color: #8f879f;
  font-size: 12px;
  line-height: 1.55;
}
.story-inline-copy i,
.story-subfield-label i {
  margin-left: 5px;
  color: #8d8498;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}
.story-advanced-details {
  margin-top: 18px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  background: rgba(255,255,255,.018);
  overflow: hidden;
}
.story-advanced-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 13px 15px;
  color: #cfc7dc;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.story-advanced-details > summary::-webkit-details-marker { display: none; }
.story-advanced-details > summary::after {
  content: "＋";
  color: #8e7fb1;
  font-size: 15px;
  font-weight: 500;
}
.story-advanced-details[open] > summary {
  border-bottom: 1px solid rgba(255,255,255,.065);
  background: rgba(139,109,255,.04);
}
.story-advanced-details[open] > summary::after { content: "−"; }
.story-advanced-details > :not(summary) {
  margin-left: 15px;
  margin-right: 15px;
}
.story-advanced-details > :last-child { margin-bottom: 16px; }
.story-advanced-details > .story-field-grid,
.story-advanced-details > .story-permission-list,
.story-advanced-details > .world-rules-editor,
.story-advanced-details > .world-validation-result,
.story-advanced-details > .story-details-help,
.story-advanced-details > button,
.story-advanced-details > .story-inline-head {
  margin-top: 15px;
}
.story-card-details {
  margin-top: 6px;
  background: rgba(0,0,0,.08);
}
.story-simple-card > label {
  margin-bottom: 16px;
}
.story-simple-card > label:last-of-type {
  margin-bottom: 0;
}
.story-cover-field {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.018);
}
.story-cover-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.story-cover-upload-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  margin: 0 !important;
  cursor: pointer;
}
.story-cover-preview {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 150px;
  max-height: 260px;
  border: 1px dashed rgba(255,255,255,.09);
  border-radius: 13px;
  overflow: hidden;
  background: rgba(0,0,0,.16);
  color: #7f778e;
  font-size: 12px;
}
.story-cover-preview.has-image { border-style: solid; }
.story-cover-preview img {
  display: block;
  width: 100%;
  height: min(260px, 28vw);
  min-height: 170px;
  object-fit: cover;
}
.story-cover-status {
  min-height: 17px;
  margin: 0;
  color: #9e94ad;
  font-size: 11px;
}
.story-cover-link-details { margin-top: 0; }
.story-cover-link-details > label { margin-top: 14px; }
.story-always-active {
  margin: 4px 0 0 !important;
  padding: 11px 12px;
  border: 1px solid rgba(139,109,255,.14);
  border-radius: 11px;
  background: rgba(139,109,255,.045);
}
.story-publish-card {
  display: grid;
  gap: 18px;
}
.story-publish-card .world-publish-actions {
  margin-top: 0;
}
.story-asset-create-form .story-subfield-label {
  color: #d8d2e4;
}
.story-asset-create-preview .world-preview-meta {
  margin-top: 24px;
}
.story-asset-create-preview .world-preview-meta div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.story-asset-create-preview .world-preview-meta dt {
  color: #81798f;
  font-size: 11px;
}
.story-asset-create-preview .world-preview-meta dd {
  margin: 0;
  color: #c9c0d7;
  font-size: 11px;
  text-align: right;
}

@media (max-width: 1080px) {
  .story-asset-create-main {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .story-asset-create-preview { display: none; }
}

@media (max-width: 760px) {
  #storyAssetCreateView.story-asset-create-view { overflow: visible; }
  .story-asset-create-head {
    min-height: 76px;
    padding: 14px 17px;
  }
  .story-asset-create-main {
    display: block;
    height: auto;
  }
  /* 블록 레이아웃에서는 페이지 자체가 스크롤한다. 열마다 스크롤 컨테이너를
     두면 sticky 단계 목록이 갇히므로 되돌린다. */
  .story-asset-create-steps,
  .story-asset-create-preview {
    overflow-y: visible;
  }
  .story-asset-create-steps {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  #storyAssetStepList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  #storyAssetStepList > button {
    grid-template-columns: 24px 1fr;
    padding: 8px;
  }
  #storyAssetStepList > button span {
    width: 22px;
    height: 22px;
  }
  #storyAssetStepList > button small,
  .story-asset-create-next { display: none; }
  .story-asset-create-form {
    padding: 22px 15px 86px;
    overflow: visible;
  }
  .story-field-grid.two,
  .story-check-grid,
  .story-permission-list {
    grid-template-columns: 1fr;
  }
  .story-setting-section,
  .story-link-block,
  .story-publish-card { padding: 16px; }
  .story-inline-head { align-items: center; }
  .story-inline-head .ghost-button { flex: 0 0 auto; }
  .story-asset-create-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 18px -15px -86px;
    padding: 12px 15px;
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(17,16,25,.96);
    backdrop-filter: blur(14px);
  }
  .story-cover-preview img { height: 210px; }
}

/* Compact scenario maker: keep runtime structure, hide implementation noise. */
.scenario-world-mode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
  margin: 12px 0 16px;
  padding: 0;
  border: 0;
}
.scenario-world-mode > label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
  cursor: pointer;
}
.scenario-world-mode > label:has(input:checked) {
  border-color: rgba(139,109,255,.54);
  background: rgba(139,109,255,.075);
}
.scenario-world-mode input { margin-top: 3px; }
.scenario-world-mode span { display: grid; gap: 3px; min-width: 0; }
.scenario-world-mode strong { color: #ddd6e9; font-size: 12px; }
.scenario-world-mode small { color: #898093; font-size: 10px; line-height: 1.4; }
.scenario-embedded-world {
  display: grid;
  gap: 16px;
  margin-top: 14px;
  padding: 18px;
  border: 1px solid rgba(139,109,255,.18);
  border-radius: 14px;
  background: rgba(139,109,255,.035);
}
.scenario-embedded-world.hidden { display: none !important; }
.scenario-scene-card,
.scenario-compact-card { scroll-margin-top: 18px; }
.scenario-editor-only .story-advanced-details .story-inline-head {
  padding-top: 4px;
}
.scenario-editor-only .story-advanced-details .world-rules-editor:empty {
  display: none;
}

/* Story selection and scenario start flow. */
.story-view {
  overflow: auto;
  padding: 34px 38px 120px;
}
.story-library-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1420px;
  margin: 0 auto 24px;
}
.story-library-head > div:first-child > span {
  color: #8d72ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.story-library-head h1 { margin: 7px 0 5px; color: #f5f1fb; font-size: clamp(27px, 3vw, 40px); }
.story-library-head p { margin: 0; color: #958da3; font-size: 13px; }
.story-library-tools { display: flex; align-items: center; gap: 10px; }
.story-library-tools label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(340px, 32vw);
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: #827a8e;
}
.story-library-tools input { width: 100%; padding: 12px 0; border: 0; outline: 0; background: transparent; color: #eee8f5; }
.story-library-status,
.story-library-empty { max-width: 1420px; margin: 0 auto 16px; color: #8c8498; font-size: 12px; }
.story-library-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 410px);
  gap: 22px;
  max-width: 1420px;
  margin: 0 auto;
  align-items: start;
}
.story-library-layout:has(.story-scenario-detail.hidden) { grid-template-columns: 1fr; }

.story-scenario-card {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background: #17151f;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.story-scenario-card:hover,
.story-scenario-card.is-selected { transform: translateY(-2px); border-color: rgba(139,109,255,.5); background: #1b1826; }
.story-scenario-cover { display: grid; place-items: center; height: 178px; overflow: hidden; background: radial-gradient(circle at 30% 20%, #392b62, #15131d 72%); color: #796b91; font-size: 30px; }
.story-scenario-cover img { width: 100%; height: 100%; object-fit: cover; }
.story-scenario-card-copy { display: grid; gap: 8px; padding: 15px; }
.story-scenario-card-copy strong { color: #eee9f5; font-size: 16px; }
.story-scenario-card-copy p { min-height: 36px; margin: 0; color: #9a92a5; font-size: 12px; line-height: 1.55; }
.story-scenario-card-meta { display: flex; gap: 7px; flex-wrap: wrap; color: #746d7f; font-size: 10px; }
.story-scenario-card-meta span { padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.04); }
.story-scenario-detail {
  position: sticky;
  top: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 18px;
  background: #17151f;
  box-shadow: 0 20px 55px rgba(0,0,0,.25);
}
.story-scenario-detail-cover { height: 210px; background: radial-gradient(circle at 25% 10%, #49367b, #17151f 70%); }
.story-scenario-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.story-scenario-detail-body { display: grid; gap: 16px; padding: 20px; }
.story-scenario-detail-body h2 { margin: 0; color: #f1ecf7; font-size: 23px; }
.story-scenario-detail-body > p { margin: -8px 0 0; color: #a199ac; font-size: 12px; line-height: 1.65; }
.story-scenario-detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.story-scenario-detail-meta div { padding: 10px; border-radius: 10px; background: rgba(255,255,255,.035); }
.story-scenario-detail-meta span { display: block; margin-bottom: 4px; color: #746c80; font-size: 9px; }
.story-scenario-detail-meta strong { color: #cfc7d9; font-size: 11px; font-weight: 650; }
.story-scenario-detail-section { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.story-scenario-detail-section strong { color: #cfc7d9; font-size: 11px; }
.story-scenario-detail-section p { margin: 7px 0 0; white-space: pre-wrap; color: #968e9f; font-size: 11px; line-height: 1.6; }
.story-scenario-detail-actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.story-scenario-detail-actions .primary-button { min-height: 44px; }

body.story-active > #globalSelectionTray.selection-tray { display: flex !important; }
.selected-story-scenario {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 310px;
  min-width: 230px;
  padding-right: 16px;
  border-right: 1px solid rgba(255,255,255,.07);
}
.selected-story-scenario.hidden { display: none !important; }
.selected-story-scenario img,
.selected-story-scenario .selected-story-placeholder { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; object-fit: cover; background: #292239; }
.selected-story-scenario-copy { min-width: 0; flex: 1; }
.selected-story-scenario-copy small { display: block; color: #776e83; font-size: 9px; }
.selected-story-scenario-copy strong { display: block; overflow: hidden; color: #dcd5e6; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.selected-story-scenario button { border: 0; background: transparent; color: #82798f; cursor: pointer; }

.story-start-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(139,109,255,.22);
  border-radius: 14px;
  background: rgba(139,109,255,.045);
}
.story-start-panel.hidden { display: none !important; }
.story-start-scenario-summary { display: flex; align-items: center; gap: 13px; }
.story-start-scenario-summary img,
.story-start-scenario-summary .story-start-cover-placeholder { width: 62px; height: 62px; flex: 0 0 62px; border-radius: 12px; object-fit: cover; background: #2b2440; }
.story-start-scenario-summary h3 { margin: 0 0 5px; color: #ebe5f3; font-size: 16px; }
.story-start-scenario-summary p { margin: 0; color: #91899c; font-size: 11px; line-height: 1.45; }
.story-start-section-head strong { color: #d9d1e4; font-size: 12px; }
.story-start-section-head p { margin: 4px 0 0; color: #81798d; font-size: 10px; }
.story-start-slot-assignments { display: grid; gap: 10px; }
.story-start-slot-card { display: grid; grid-template-columns: minmax(130px,.7fr) minmax(180px,1fr); gap: 10px; padding: 12px; border-radius: 11px; background: rgba(0,0,0,.17); }
.story-start-character { display: flex; align-items: center; gap: 9px; min-width: 0; }
.story-start-character img,
.story-start-character span { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; object-fit: cover; background: #2a2534; }
.story-start-character strong { overflow: hidden; color: #d8d1e0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.story-start-slot-fields { display: grid; gap: 8px; }
.story-start-slot-fields select,
.story-start-slot-fields input { width: 100%; padding: 9px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: #111019; color: #cbc3d5; font-size: 10px; }
.story-start-public-info { padding: 12px; border-radius: 10px; background: rgba(255,255,255,.035); color: #9c94a6; font-size: 11px; line-height: 1.6; white-space: pre-wrap; }

@media (max-width: 1050px) {
  .story-library-layout { grid-template-columns: 1fr; }
  .story-scenario-detail { position: static; }
  .selected-story-scenario { max-width: 220px; min-width: 180px; }
}

@media (max-width: 760px) {
  .story-view { padding: 76px 14px 105px; }
  .story-library-head { display: grid; align-items: start; }
  .story-library-tools { width: 100%; }
  .story-library-tools label { min-width: 0; flex: 1; }
  
  .story-scenario-cover { height: 132px; }
  .story-scenario-card-copy { padding: 12px; }
  .selected-story-scenario { display: none !important; }
  .story-start-slot-card { grid-template-columns: 1fr; }
}

/* ============================================================
   V3.23.2 — CHARACTER MAKER TRUE STORY-ASSET LAYOUT PARITY
   Desktop character creation now uses the same page frame as
   World/Lorebook/Scenario creation: persistent app sidebar,
   88px editor header, edge-to-edge 3-column workspace, left steps,
   scrollable center editor, right preview. No floating/rounded outer card.
   ============================================================ */
@media (min-width: 901px) {
  body.create-active {
    overflow: hidden !important;
  }

  /* Use the real shared app-sidebar width. Remove the stale 268px gap. */
  body.create-active .nav-shell {
    display: flex !important;
  }
  body.create-active .app-shell {
    grid-template-columns: var(--tryva-sidebar-width) minmax(0, 1fr) !important;
  }
  body.create-active .workspace {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Same edge-to-edge page canvas as storyAssetCreateView. */
  body.create-active #createView.character-wizard {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: var(--tryva-bg, #0b0a11) !important;
  }
  body.create-active #createView.character-wizard.hidden {
    display: none !important;
  }

  /* Same header contract as .story-asset-create-head. */
  body.create-active #createView.character-wizard .cw-page-head {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 17px 30px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tryva-line, rgba(255,255,255,.08)) !important;
    background: var(--tryva-sidebar, #111019) !important;
  }
  body.create-active #createView.character-wizard .cw-page-head > div {
    position: static !important;
    inset: auto !important;
    order: 1 !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  body.create-active #createView.character-wizard .cw-page-head > div::before {
    content: "CHARACTER" !important;
    display: block !important;
    margin: 0 !important;
    color: #9177eb !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    letter-spacing: .16em !important;
  }
  body.create-active #createView.character-wizard .cw-page-head h1 {
    margin: 3px 0 2px !important;
    color: #eeeaf6 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }
  body.create-active #createView.character-wizard .cw-page-head p {
    display: block !important;
    margin: 0 !important;
    color: #8f879f !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
  body.create-active #createView.character-wizard #backToPlayBtn {
    position: static !important;
    inset: auto !important;
    order: 2 !important;
    width: auto !important;
    height: auto !important;
    min-height: 40px !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 9px 16px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  body.create-active #createView.character-wizard #backToPlayBtn::before {
    content: "" !important;
  }

  /* Same three-column viewport frame as .story-asset-create-main. */
  body.create-active #createView.character-wizard .cw-shell {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 230px minmax(420px, 1fr) 340px !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: calc(100vh - 88px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Left steps: same sidebar surface, spacing and active-state grammar. */
  body.create-active #createView.character-wizard .cw-step-column {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 28px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-right: 1px solid var(--tryva-line, rgba(255,255,255,.08)) !important;
    background: var(--tryva-sidebar, #111019) !important;
  }
  body.create-active #createView.character-wizard .cw-stepper {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.create-active #createView.character-wizard .cw-step {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: #8f879f !important;
    text-align: left !important;
    box-shadow: none !important;
  }
  body.create-active #createView.character-wizard .cw-step::before,
  body.create-active #createView.character-wizard .cw-step::after {
    content: none !important;
    display: none !important;
  }
  body.create-active #createView.character-wizard .cw-step:hover,
  body.create-active #createView.character-wizard .cw-step:focus-visible {
    background: rgba(139,109,255,.07) !important;
    color: #dcd5eb !important;
    outline: none !important;
  }
  body.create-active #createView.character-wizard .cw-step.active {
    border-color: rgba(139,109,255,.24) !important;
    background: rgba(139,109,255,.10) !important;
    color: #eeeaf6 !important;
  }
  body.create-active #createView.character-wizard .cw-step > span {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    display: grid !important;
    place-items: center !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    border-radius: 8px !important;
    background: #24202f !important;
    color: #9d8bc6 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
  }
  body.create-active #createView.character-wizard .cw-step.active > span {
    background: linear-gradient(135deg,#7656e8,#9d72ff) !important;
    color: #fff !important;
  }
  body.create-active #createView.character-wizard .cw-step strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  body.create-active #createView.character-wizard .cw-step small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    margin-top: 3px !important;
    overflow: hidden !important;
    color: #8f879f !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Center editor: same uninterrupted scrolling canvas as story asset form. */
  body.create-active #createView.character-wizard .cw-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--tryva-bg, #0b0a11) !important;
  }
  body.create-active #createView.character-wizard .cw-step-panel,
  body.create-active #createView.character-wizard .cw-step-panel.active {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 34px 38px 48px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--tryva-bg, #0b0a11) !important;
    box-shadow: none !important;
    animation: none !important;
  }
  body.create-active #createView.character-wizard .cw-step-panel:not(.active) {
    display: none !important;
  }
  body.create-active #createView.character-wizard .cw-panel-head {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 25px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.create-active #createView.character-wizard .cw-panel-icon {
    display: none !important;
  }
  body.create-active #createView.character-wizard .cw-panel-head h2 {
    margin: 0 0 6px !important;
    font-size: 23px !important;
  }
  body.create-active #createView.character-wizard .cw-panel-head p {
    margin: 0 !important;
    color: #8f879f !important;
    font-size: 13px !important;
  }

  /* Right preview: same full-height side surface as story asset preview. */
  body.create-active #createView.character-wizard .cw-preview-panel {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 31px 27px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-left: 1px solid var(--tryva-line, rgba(255,255,255,.08)) !important;
    border-radius: 0 !important;
    background: var(--tryva-sidebar, #111019) !important;
    box-shadow: none !important;
  }
  body.create-active #createView.character-wizard .cw-preview-eyebrow {
    color: #7f778e !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .13em !important;
  }

  /* Actions stay in the center column and never fall below the viewport. */
  body.create-active #createView.character-wizard .cw-footer {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 13px 38px !important;
    gap: 10px !important;
    border: 0 !important;
    border-top: 1px solid var(--tryva-line, rgba(255,255,255,.08)) !important;
    border-radius: 0 !important;
    background: rgba(11,10,17,.96) !important;
    box-shadow: none !important;
  }
  body.create-active #createView.character-wizard .cw-footer button {
    height: 48px !important;
    border-radius: 11px !important;
  }
  body.create-active #createView.character-wizard .cw-footer-spacer {
    display: none !important;
  }
  body.create-active #createView.character-wizard #wizardNextBtn,
  body.create-active #createView.character-wizard #saveCharacterBtn {
    min-width: 230px !important;
    margin-left: auto !important;
  }
}

/* Same compact desktop column adjustment used by the other makers. */
@media (min-width: 901px) and (max-width: 1180px) {
  body.create-active #createView.character-wizard .cw-shell {
    grid-template-columns: 205px minmax(400px, 1fr) 290px !important;
  }
  body.create-active #createView.character-wizard .cw-step-panel,
  body.create-active #createView.character-wizard .cw-step-panel.active {
    padding-right: 28px !important;
    padding-left: 28px !important;
  }
  body.create-active #createView.character-wizard .cw-preview-panel {
    padding-right: 23px !important;
    padding-left: 23px !important;
  }
  body.create-active #createView.character-wizard .cw-footer {
    padding-right: 28px !important;
    padding-left: 28px !important;
  }
}

/* ================================================================
   V3.23.5 — CHARACTER MAKER USES THE ACTUAL STORY-ASSET LAYOUT
   The character maker now shares the same header / 3-column frame /
   center scroll surface / right preview / in-flow action row contract.
   No character field, save payload, crop value or story asset data changes.
================================================================ */
@media (min-width: 901px) {
  body.create-active .nav-shell {
    display: flex !important;
  }
  body.create-active .app-shell {
    grid-template-columns: var(--tryva-sidebar-width, 236px) minmax(0, 1fr) !important;
  }
  body.create-active .workspace {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body.create-active #createView.character-wizard.story-asset-create-view {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: var(--tryva-bg, #0b0a11) !important;
  }
  body.create-active #createView.character-wizard.story-asset-create-view.hidden {
    display: none !important;
  }

  /* Exact same top header contract as the other asset makers. */
  body.create-active #createView .cw-page-head.story-asset-create-head {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
    min-height: 88px !important;
    height: 88px !important;
    margin: 0 !important;
    padding: 17px 30px !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tryva-line, rgba(255,255,255,.08)) !important;
    border-radius: 0 !important;
    background: var(--tryva-sidebar, #111019) !important;
    box-shadow: none !important;
  }
  body.create-active #createView .cw-page-head.story-asset-create-head > div {
    position: static !important;
    inset: auto !important;
    order: 1 !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  body.create-active #createView .cw-page-head.story-asset-create-head > div::before {
    content: none !important;
    display: none !important;
  }
  body.create-active #createView .cw-page-head.story-asset-create-head span {
    display: block !important;
    color: #9177eb !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    letter-spacing: .16em !important;
  }
  body.create-active #createView .cw-page-head.story-asset-create-head h1 {
    margin: 3px 0 2px !important;
    color: #eeeaf6 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }
  body.create-active #createView .cw-page-head.story-asset-create-head p {
    display: block !important;
    margin: 0 !important;
    color: #8f879f !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
  body.create-active #createView .cw-page-head.story-asset-create-head #backToPlayBtn {
    position: static !important;
    inset: auto !important;
    order: 2 !important;
    width: auto !important;
    height: auto !important;
    min-height: 40px !important;
    margin: 0 0 0 auto !important;
    padding: 9px 16px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  body.create-active #createView .cw-page-head.story-asset-create-head #backToPlayBtn::before {
    content: none !important;
    display: none !important;
  }

  /* Outer frame is literally the same three-column grid. */
  body.create-active #createView #characterForm.cw-shell.story-asset-create-main {
    position: static !important;
    display: grid !important;
    grid-template-columns: 230px minmax(420px, 1fr) 340px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: calc(100vh - 88px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Left step rail. */
  body.create-active #createView .cw-step-column.story-asset-create-steps {
    position: static !important;
    inset: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 28px 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-right: 1px solid var(--tryva-line, rgba(255,255,255,.08)) !important;
    border-radius: 0 !important;
    background: var(--tryva-sidebar, #111019) !important;
    box-shadow: none !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  body.create-active #createView .cw-stepper {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.create-active #createView .cw-step {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: #8f879f !important;
    text-align: left !important;
    box-shadow: none !important;
  }
  body.create-active #createView .cw-step::before,
  body.create-active #createView .cw-step::after {
    content: none !important;
    display: none !important;
  }
  body.create-active #createView .cw-step:hover,
  body.create-active #createView .cw-step:focus-visible {
    background: rgba(139,109,255,.07) !important;
    color: #dcd5eb !important;
    outline: none !important;
  }
  body.create-active #createView .cw-step.active {
    border-color: rgba(139,109,255,.24) !important;
    background: rgba(139,109,255,.10) !important;
    color: #eeeaf6 !important;
  }
  body.create-active #createView .cw-step > span {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    display: grid !important;
    place-items: center !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    border-radius: 8px !important;
    background: #24202f !important;
    color: #9d8bc6 !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
  }
  body.create-active #createView .cw-step.active > span {
    background: linear-gradient(135deg,#7656e8,#9d72ff) !important;
    color: #fff !important;
  }
  body.create-active #createView .cw-step strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  body.create-active #createView .cw-step small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    margin-top: 3px !important;
    overflow: hidden !important;
    color: #8f879f !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Center column is now the same single scrolling form surface. */
  body.create-active #createView .cw-main.story-asset-create-form {
    position: static !important;
    inset: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    display: block !important;
    align-self: stretch !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 34px 38px 110px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--tryva-bg, #0b0a11) !important;
    box-shadow: none !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  body.create-active #createView .cw-step-panel,
  body.create-active #createView .cw-step-panel.active {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
  }
  body.create-active #createView .cw-step-panel:not(.active) {
    display: none !important;
  }
  body.create-active #createView .cw-panel-head {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 25px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.create-active #createView .cw-panel-icon {
    display: none !important;
  }
  body.create-active #createView .cw-panel-head h2 {
    margin: 0 0 6px !important;
    font-size: 23px !important;
  }
  body.create-active #createView .cw-panel-head p {
    margin: 0 !important;
    color: #8f879f !important;
    font-size: 13px !important;
  }

  /* Action row follows the content exactly like .story-asset-create-actions. */
  body.create-active #createView .cw-footer.story-asset-create-actions {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    gap: 9px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.create-active #createView .cw-footer.story-asset-create-actions button {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 11px 16px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  body.create-active #createView .cw-footer.story-asset-create-actions #wizardNextBtn,
  body.create-active #createView .cw-footer.story-asset-create-actions #saveCharacterBtn {
    min-width: 132px !important;
    margin-left: 0 !important;
    padding: 12px 20px !important;
  }
  body.create-active #createView .cw-footer.story-asset-create-actions #wizardUndoBtn,
  body.create-active #createView .cw-footer.story-asset-create-actions #wizardRedoBtn {
    width: auto !important;
    min-width: 0 !important;
    font-size: 13px !important;
  }
  body.create-active #createView .cw-footer.story-asset-create-actions #wizardUndoBtn::before,
  body.create-active #createView .cw-footer.story-asset-create-actions #wizardRedoBtn::before {
    content: none !important;
    display: none !important;
  }
  body.create-active #createView .cw-footer-spacer {
    display: none !important;
  }
  body.create-active #createView .cw-history-tools {
    display: flex !important;
    gap: 9px !important;
  }

  /* Right preview is the same third-column surface. */
  body.create-active #createView .cw-preview-panel.story-asset-create-preview {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 31px 27px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-left: 1px solid var(--tryva-line, rgba(255,255,255,.08)) !important;
    border-radius: 0 !important;
    background: var(--tryva-sidebar, #111019) !important;
    box-shadow: none !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body.create-active #createView #characterForm.cw-shell.story-asset-create-main {
    grid-template-columns: 205px minmax(400px, 1fr) 290px !important;
  }
  body.create-active #createView .cw-main.story-asset-create-form {
    padding-right: 28px !important;
    padding-left: 28px !important;
  }
}

/* ================================================================
   V3.23.6 — CHARACTER MAKER FULL STORY-ASSET VISUAL PARITY
   The character maker keeps its fields and media editors, but uses the
   same typography, form rhythm, controls, action row, and preview surface
   as the world / lorebook / scenario makers.
================================================================ */
@media (min-width: 901px) {
  body.create-active #createView .cw-panel-head.story-asset-form-intro {
    display: block !important;
  }
  body.create-active #createView .cw-panel-head.story-asset-form-intro > div:last-child {
    display: block !important;
    width: 100% !important;
  }

  body.create-active #createView .cw-field-list.story-field-grid.two {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 15px !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.create-active #createView .cw-field-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.create-active #createView .cw-field-label {
    display: block !important;
    min-width: 0 !important;
  }
  body.create-active #createView .cw-field-label strong,
  body.create-active #createView .cw-writing-card > span strong,
  body.create-active #createView .cw-section-title-row h3,
  body.create-active #createView .cw-image-card-head h3 {
    color: #d8d2e4 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
  }
  body.create-active #createView .cw-field-label small {
    display: none !important;
  }
  body.create-active #createView .cw-field-label em,
  body.create-active #createView .cw-writing-card em {
    margin-left: 5px !important;
    color: #9b80f6 !important;
    font-size: 10px !important;
    font-style: normal !important;
  }
  body.create-active #createView .cw-field-label i,
  body.create-active #createView .cw-writing-card i,
  body.create-active #createView .cw-image-card-head span,
  body.create-active #createView .cw-section-title-row h3 span {
    margin-left: 5px !important;
    color: #8f879f !important;
    font-size: 10px !important;
    font-style: normal !important;
  }

  body.create-active #createView .cw-main input:not([type="file"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body.create-active #createView .cw-main textarea,
  body.create-active #createView .cw-main select {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid var(--tryva-line, rgba(255,255,255,.09)) !important;
    border-radius: 11px !important;
    outline: 0 !important;
    background: var(--tryva-surface-2, #181621) !important;
    color: #eeeaf6 !important;
    font: inherit !important;
    box-shadow: none !important;
  }
  body.create-active #createView .cw-main textarea {
    resize: vertical !important;
    line-height: 1.6 !important;
  }
  body.create-active #createView .cw-main input:focus,
  body.create-active #createView .cw-main textarea:focus,
  body.create-active #createView .cw-main select:focus {
    border-color: rgba(139,109,255,.68) !important;
    box-shadow: 0 0 0 3px rgba(139,109,255,.10) !important;
  }
  body.create-active #createView .cw-stacked-input {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
  }
  body.create-active #createView .cw-height-input-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.create-active #createView .cw-writing-card {
    display: grid !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.create-active #createView .cw-writing-card > span {
    display: grid !important;
    gap: 4px !important;
  }
  body.create-active #createView .cw-writing-card > span small,
  body.create-active #createView .cw-image-card-head p,
  body.create-active #createView .cw-section-title-row p {
    margin: 0 !important;
    color: #8f879f !important;
    font-size: 11.5px !important;
    line-height: 1.55 !important;
  }
  body.create-active #createView .cw-count {
    position: static !important;
    justify-self: end !important;
    width: max-content !important;
    margin: 6px 2px 0 auto !important;
    color: #81798f !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums;
  }
  body.create-active #createView .cw-two-column-settings {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 15px !important;
    margin: 0 0 20px !important;
  }

  body.create-active #createView .cw-magic-row,
  body.create-active #createView .cw-media-split-intro,
  body.create-active #createView .cw-samples-card,
  body.create-active #createView .cw-image-card:not(.integrated-runtime-editor) {
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 22px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.018) !important;
    box-shadow: none !important;
  }
  body.create-active #createView .cw-magic-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
  }
  body.create-active #createView .cw-magic-row strong {
    color: #e6e0ef !important;
    font-size: 14px !important;
  }
  body.create-active #createView .cw-magic-row p {
    margin: 5px 0 0 !important;
    color: #8f879f !important;
    font-size: 11.5px !important;
  }
  body.create-active #createView .cw-image-card-head,
  body.create-active #createView .cw-section-title-row {
    margin-bottom: 17px !important;
  }

  body.create-active #createView .cw-main .secondary-button,
  body.create-active #createView .cw-main .ghost-button {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 38px !important;
    padding: 9px 13px !important;
    border: 1px solid var(--tryva-line, rgba(255,255,255,.09)) !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #b8afc5 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }
  body.create-active #createView .cw-main .secondary-button:hover,
  body.create-active #createView .cw-main .ghost-button:hover {
    border-color: rgba(139,109,255,.32) !important;
    background: rgba(139,109,255,.07) !important;
    color: #e3dcef !important;
  }

  body.create-active #createView .cw-footer.story-asset-create-actions .cw-history-tools {
    display: none !important;
  }
  body.create-active #createView .cw-footer.story-asset-create-actions #wizardPrevBtn,
  body.create-active #createView .cw-footer.story-asset-create-actions #wizardNextBtn {
    min-width: 0 !important;
    padding: 9px 16px !important;
    border: 1px solid var(--tryva-line, rgba(255,255,255,.09)) !important;
    background: transparent !important;
    color: #b8afc5 !important;
  }
  body.create-active #createView .cw-footer.story-asset-create-actions #saveCharacterBtn {
    min-width: 132px !important;
    padding: 12px 20px !important;
  }

  body.create-active #createView .cw-preview-hero {
    margin: 14px 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.create-active #createView .cw-preview-hero h2 {
    margin: 0 0 6px !important;
    font-size: 20px !important;
  }
  body.create-active #createView .cw-preview-hero p {
    min-height: 0 !important;
    margin: 0 !important;
    color: #9b93aa !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
  body.create-active #createView .cw-preview-section,
  body.create-active #createView .cw-status-box {
    margin: 0 !important;
    padding: 12px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.create-active #createView .cw-preview-section h3,
  body.create-active #createView .cw-preview-section > span,
  body.create-active #createView .cw-status-box strong {
    color: #81798f !important;
    font-size: 11px !important;
  }
  body.create-active #createView .cw-preview-section > p,
  body.create-active #createView .cw-status-box p {
    min-height: 0 !important;
    margin: 6px 0 0 !important;
    color: #c9c0d7 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
  body.create-active #createView .cw-preview-traits {
    display: grid !important;
    gap: 0 !important;
  }
  body.create-active #createView .cw-preview-traits > span {
    padding: 7px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #c9c0d7 !important;
    font-size: 11px !important;
  }
}

/* ================================================================
   V3.23.7 — CHARACTER MAKER SHARES THE REAL ASSET-MAKER DOM
   Only character-specific fields stay custom. The surrounding layout is
   the same story-asset header / grid / steps / form / preview / actions.
================================================================ */
#createView.story-asset-create-view {
  min-height: 100vh;
  padding: 0;
  background: var(--tryva-bg, #0b0a11);
  color: #eeeaf6;
  overflow: hidden;
}
#createView.story-asset-create-view.hidden {
  display: none !important;
}
#createView .story-asset-create-step-list {
  display: grid;
  gap: 7px;
}
#createView .story-asset-create-step-list > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #8f879f;
  text-align: left;
  cursor: pointer;
}
#createView .story-asset-create-step-list > button:hover,
#createView .story-asset-create-step-list > button:focus-visible {
  background: rgba(139,109,255,.07);
  color: #dcd5eb;
  outline: none;
}
#createView .story-asset-create-step-list > button.active {
  border-color: rgba(139,109,255,.24);
  background: rgba(139,109,255,.10);
  color: #eeeaf6;
}
#createView .story-asset-create-step-list > button > span {
  grid-column: 1;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: #24202f;
  color: #9d8bc6;
  font-size: 12px;
  font-weight: 750;
}
#createView .story-asset-create-step-list > button.active > span {
  background: linear-gradient(135deg,#7656e8,#9d72ff);
  color: #fff;
}
#createView .story-asset-create-step-list > button > strong {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#createView .story-asset-create-step-list > button > small {
  grid-column: 2;
  grid-row: 2;
  margin-top: 3px;
  overflow: hidden;
  color: #8f879f;
  font-size: 10.5px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#createView #characterForm.story-asset-create-form {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
#createView [data-step-panel] {
  display: none;
}
#createView [data-step-panel].active {
  display: block;
}
/* 캐릭터 제작(#createView)에서는 이 아이콘을 숨겨 왔다. 세계관·시나리오도
   같은 헤더를 쓰므로 같은 화면 규칙을 적용한다. */
:is(#createView,#storyAssetCreateView) .story-asset-form-intro .cw-panel-icon {
  display: none !important;
}
:is(#createView,#storyAssetCreateView) .story-asset-form-intro > div:last-child {
  display: block;
}
#createView .story-asset-create-actions {
  align-items: center;
}
#createView .story-asset-create-preview {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* ================================================================
   v5.34.72.16 — ONE CONFIRM / PUBLISH COMPONENT
   Character, world, scenario, and lorebook creators share this exact
   component. This block intentionally does not target any media editor.
================================================================ */
.creator-confirm-publish-panel > .story-asset-form-intro {
  display: block !important;
  width: 100% !important;
  margin: 0 0 25px !important;
  padding: 0 !important;
}
.creator-confirm-publish-panel > .story-asset-form-intro .cw-panel-icon {
  display: none !important;
}
.creator-confirm-publish-panel > .story-asset-form-intro > div:last-child {
  display: block !important;
  width: 100% !important;
}
.creator-confirm-publish-panel > .story-asset-form-intro h2 {
  margin: 0 0 6px !important;
  color: #eeeaf6 !important;
  font-size: 23px !important;
  line-height: 1.25 !important;
}
.creator-confirm-publish-panel > .story-asset-form-intro p {
  margin: 0 !important;
  color: #8f879f !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.creator-confirm-publish-panel > .cw-info-box {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 18px !important;
  padding: 15px 17px !important;
  border: 1px solid rgba(142,92,255,.19) !important;
  border-radius: 13px !important;
  background: rgba(106,62,220,.075) !important;
  box-shadow: none !important;
}
.creator-confirm-publish-panel > .cw-info-box strong {
  color: #e6e0ef !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.creator-confirm-publish-panel > .cw-info-box p {
  margin: 5px 0 0 !important;
  color: #969caf !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}
.creator-confirm-publish-panel > .cw-image-card:not(.hidden) {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 18px !important;
  padding: 22px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.018) !important;
  box-shadow: none !important;
}
.creator-confirm-publish-panel > .creator-attribution-card {
  border-color: rgba(148,111,255,.20) !important;
  background: linear-gradient(145deg,rgba(34,28,54,.72),rgba(18,20,28,.92)) !important;
}
.creator-confirm-publish-panel .cw-image-card-head {
  display: block !important;
  margin: 0 0 17px !important;
}
.creator-confirm-publish-panel .cw-title-with-badge {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.creator-confirm-publish-panel .cw-image-card-head h3 {
  margin: 0 !important;
  color: #d8d2e4 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}
.creator-confirm-publish-panel .cw-title-with-badge > span {
  margin: 0 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(140,88,244,.14) !important;
  color: #bda2f7 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}
.creator-confirm-publish-panel .cw-image-card-head p {
  margin: 5px 0 0 !important;
  color: #8f879f !important;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
}
.creator-confirm-publish-panel .cw-public-settings-fields {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  column-gap: 22px !important;
  row-gap: 18px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 20px !important;
  border: 1px solid var(--tryva-line,rgba(255,255,255,.09)) !important;
  border-radius: 16px !important;
  background: var(--tryva-surface,#12101a) !important;
  box-shadow: none !important;
}
.creator-confirm-publish-panel .cw-field-row,
.creator-confirm-publish-panel .cw-field-row:first-child,
.creator-confirm-publish-panel .cw-field-row:last-child {
  display: grid !important;
  grid-column: auto !important;
  grid-template-columns: minmax(0,1fr) !important;
  align-items: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.creator-confirm-publish-panel .cw-field-label {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.creator-confirm-publish-panel .cw-field-label strong {
  display: block !important;
  color: #d8d2e4 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}
.creator-confirm-publish-panel .cw-field-label strong i {
  margin-left: 5px !important;
  color: #8f879f !important;
  font-size: 10px !important;
  font-style: normal !important;
}
.creator-confirm-publish-panel .cw-field-label small {
  display: none !important;
}
.creator-confirm-publish-panel .cw-field-row textarea,
.creator-confirm-publish-panel .cw-field-row select {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--tryva-line,rgba(255,255,255,.09)) !important;
  border-radius: 11px !important;
  outline: 0 !important;
  background: var(--tryva-surface-2,#181621) !important;
  color: #eeeaf6 !important;
  font: inherit !important;
  box-shadow: none !important;
}
.creator-confirm-publish-panel .cw-field-row textarea {
  resize: vertical !important;
  line-height: 1.6 !important;
}
.creator-confirm-publish-panel .cw-field-row textarea:focus,
.creator-confirm-publish-panel .cw-field-row select:focus {
  border-color: rgba(139,109,255,.68) !important;
  box-shadow: 0 0 0 3px rgba(139,109,255,.10) !important;
}
.creator-confirm-publish-panel .creator-attribution-options {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
}
.creator-confirm-publish-panel .creator-attribution-option {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 92px !important;
  margin: 0 !important;
  padding: 16px !important;
}
.creator-confirm-publish-panel .story-reuse-toggle {
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 15px 16px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.025) !important;
}
.creator-confirm-publish-panel .story-reuse-toggle input {
  width: auto !important;
  margin: 2px 0 0 !important;
  accent-color: #8b6dff !important;
}
.creator-confirm-publish-panel .story-reuse-toggle > span {
  display: grid !important;
  gap: 4px !important;
}
.creator-confirm-publish-panel .story-reuse-toggle strong {
  color: #d8d2e4 !important;
  font-size: 13px !important;
}
.creator-confirm-publish-panel .story-reuse-toggle small {
  color: #8f879f !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}
.creator-confirm-publish-panel > .story-canon-compile-panel:not(.hidden) {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 13px !important;
}
.creator-confirm-publish-panel > .story-canon-compile-panel .cw-image-card-head {
  grid-column: 1 !important;
  margin: 0 !important;
}
.creator-confirm-publish-panel > .story-canon-compile-panel > button {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 40px !important;
  padding: 9px 14px !important;
  white-space: nowrap !important;
}
.creator-confirm-publish-panel > .story-canon-compile-panel .world-canon-compile-result {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}
.creator-confirm-publish-panel > .story-canon-compile-panel .world-canon-compile-result p {
  margin: 0 !important;
}

@media (max-width: 760px) {
  .creator-confirm-publish-panel .cw-public-settings-fields,
  .creator-confirm-publish-panel .creator-attribution-options {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .creator-confirm-publish-panel > .cw-image-card:not(.hidden) {
    padding: 18px !important;
  }
  .creator-confirm-publish-panel > .story-canon-compile-panel:not(.hidden) {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .creator-confirm-publish-panel > .story-canon-compile-panel > button {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
  }
}

/* V3.26 — character background writing first; existing assets are optional links */
.character-story-settings-card {
  display: grid;
  gap: 14px;
  margin: 4px 0 18px;
  padding: 18px;
  border: 1px solid rgba(139,109,255,.22);
  border-radius: 16px;
  background: linear-gradient(145deg,rgba(139,109,255,.055),rgba(255,255,255,.018));
}
.character-story-settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.character-story-settings-head > div { min-width: 0; }
.character-story-settings-head h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 5px; color: #e5dff0; font-size: 15px; }
.character-story-settings-head h3 span { padding: 3px 7px; border-radius: 999px; background: rgba(139,109,255,.12); color: #ab99ef; font-size: 10px; font-style: normal; }
.character-story-settings-head p { margin: 0; color: #8f879f; font-size: 11.5px; line-height: 1.55; }
#characterStoryLinkStatus { flex: 0 0 auto; margin-top: 1px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.035); color: #8f879f; font-size: 10.5px; font-style: normal; white-space: nowrap; }
#characterStoryLinkStatus.linked { border-color: rgba(139,109,255,.34); background: rgba(139,109,255,.11); color: #c7b9f6; }
.character-story-link-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 2px; }
.character-story-link-toolbar > div { display: grid; gap: 3px; min-width: 0; }
.character-story-link-toolbar strong { color: #d8d1e3; font-size: 12.5px; }
.character-story-link-toolbar small { color: #81798f; font-size: 10.5px; line-height: 1.45; }
.character-story-link-toolbar button { flex: 0 0 auto; min-height: 34px; padding: 7px 11px !important; }
.character-story-lore-toolbar { margin-top: 2px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.065); }
.character-story-selected-assets { display: flex; flex-wrap: wrap; gap: 8px; min-height: 22px; }
.character-story-selected-assets > p { margin: 0; color: #756d82; font-size: 10.5px; line-height: 1.5; }
.character-story-asset-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 8px 7px 10px; border: 1px solid rgba(139,109,255,.25); border-radius: 999px; background: rgba(139,109,255,.08); }
.character-story-asset-chip strong { max-width: 260px; overflow: hidden; color: #cfc5e2; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.character-story-asset-chip button { padding: 2px 5px; border: 0; border-radius: 999px; background: transparent; color: #887d99; font-size: 10px; cursor: pointer; }
.character-story-asset-chip button:hover { background: rgba(255,255,255,.06); color: #d9d1e6; }
.character-world-writing-field { margin: 0 !important; }
.character-world-writing-field textarea { min-height: 176px; resize: vertical; }
.character-story-advanced-fields { border-top: 1px solid rgba(255,255,255,.065); }
.character-story-advanced-fields.hidden { display: none; }
.character-story-advanced-fields > summary { padding: 14px 2px 0; color: #aaa0b8; font-size: 11.5px; font-weight: 700; cursor: pointer; list-style-position: inside; }
.character-story-advanced-fields[open] > summary { color: #c8b9ed; }
.character-story-advanced-body { display: grid; gap: 14px; padding-top: 13px; }
body.character-story-picker-open { overflow: hidden !important; }
.character-story-picker-backdrop { z-index: 1900; display: grid; place-items: center; padding: 24px; background: rgba(5,4,8,.76) !important; backdrop-filter: blur(9px); }
.character-story-picker-backdrop.hidden { display: none !important; }
.character-story-picker-modal { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; width: min(620px,calc(100vw - 40px)); max-height: min(720px,calc(100vh - 48px)); overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: #100e16; box-shadow: 0 28px 90px rgba(0,0,0,.5); }
.character-story-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 20px 13px; }
.character-story-picker-head > div { min-width: 0; }
.character-story-picker-head span { color: #76688e; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.character-story-picker-head h2 { margin: 4px 0 5px; color: #eee9f5; font-size: 18px; }
.character-story-picker-head p { margin: 0; color: #8f879f; font-size: 11px; line-height: 1.5; }
.character-story-picker-search { display: grid; gap: 6px; padding: 0 20px 14px; }
.character-story-picker-search > span { color: #9d93aa; font-size: 10px; }
.character-story-picker-search input { width: 100%; }
.character-story-picker-list-wrap { min-height: 180px; overflow-y: auto; padding: 0 20px 18px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.character-story-picker-list-wrap .character-story-asset-options { display: grid; gap: 8px; }
.character-story-picker-list-wrap .character-story-asset-options.hidden { display: none; }
.character-story-picker-list-wrap .character-story-asset-options > p { margin: 0; padding: 18px 4px; color: #81798f; font-size: 11px; }
.character-story-asset-row { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.025); cursor: pointer; }
.character-story-asset-row:hover { border-color: rgba(139,109,255,.25); background: rgba(139,109,255,.055); }
.character-story-asset-row:has(input:checked) { border-color: rgba(139,109,255,.42); background: rgba(139,109,255,.1); }
.character-story-asset-row.filtered-out { display: none; }
.character-story-asset-row strong { color: #e2dce9; font-size: 12px; }
.character-story-picker-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 20px 18px; border-top: 1px solid rgba(255,255,255,.065); }
.character-world-position-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.character-world-position-grid label,.character-story-long-field { display: grid; gap: 7px; }
.character-world-position-grid label > span,.character-story-long-field > span { color: #cfc7dc; font-size: 12px; }
.character-story-long-field { margin-top: 13px; }
.character-lore-knowledge-editor { display: grid; gap: 8px; }
.character-lore-knowledge-editor > p { margin: 0; padding: 14px; color: #8f879f; font-size: 12px; }
.character-knowledge-row { display: grid; grid-template-columns: minmax(0,1fr) 145px minmax(120px,.8fr); gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--tryva-line); border-radius: 11px; background: var(--tryva-surface-2); }
.character-knowledge-row > span { display: grid; gap: 2px; min-width: 0; }
.character-knowledge-row strong { color: #ddd6e8; font-size: 12px; }
.character-knowledge-row small { color: #81798f; font-size: 10px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .character-story-settings-card { padding: 14px; }
  .character-story-settings-head { display: grid; }
  #characterStoryLinkStatus { justify-self: start; }
  .character-story-link-toolbar { align-items: flex-start; }
  .character-story-link-toolbar > div { padding-top: 4px; }
  .character-world-position-grid { grid-template-columns: 1fr; }
  .character-knowledge-row { grid-template-columns: 1fr; }
  .character-story-picker-backdrop { padding: 10px; }
  .character-story-picker-modal { width: 100%; max-height: calc(100vh - 20px); border-radius: 16px; }
}
.scenario-required-flags { display: grid; gap: 8px; margin-top: 12px; }
.scenario-required-flags > span { color: #cfc7dc; font-size: 12px; }
.scenario-required-flags .story-check-line { margin: 0; }

/* V3.27 — 글쓰기 우선 제작 UI */
.story-asset-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.story-asset-picker {
  border: 1px solid var(--tryva-line);
  border-radius: 14px;
  background: var(--tryva-surface-2);
  overflow: hidden;
}
.story-asset-picker > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 12px 14px;
  color: #ddd6e8;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.story-asset-picker > summary::-webkit-details-marker { display: none; }
.story-asset-picker > summary::after { content: "연결"; color: #a99bc4; font-size: 11px; font-weight: 600; }
.story-asset-picker[open] > summary::after { content: "닫기"; }
.story-asset-picker-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}
.story-asset-picker-body > input[type="search"] { width: 100%; }
.story-asset-picker-options {
  display: grid;
  gap: 8px;
  max-height: 270px;
  overflow: auto;
  padding-right: 3px;
}
.story-selected-chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 35px;
  margin-top: 9px;
}
.story-selected-chip-list:empty::before {
  content: "연결된 항목이 없습니다.";
  color: #80788e;
  font-size: 12px;
}
.story-asset-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 9px 7px 11px;
  border: 1px solid rgba(139,109,255,.28);
  border-radius: 999px;
  background: rgba(139,109,255,.09);
  color: #ddd5ed;
  font-size: 12px;
}
.story-asset-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-asset-chip button {
  width: 21px;
  height: 21px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #bcb2cc;
  cursor: pointer;
}
.story-asset-chip button:hover { background: rgba(255,255,255,.15); color: #fff; }
.world-lorebook-option.filtered-out,
.story-asset-picker-options .filtered-out { display: none !important; }
.story-advanced-details,
.story-permission-details,
.character-advanced-details {
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: rgba(255,255,255,.018);
}
.story-advanced-details > summary,
.story-permission-details > summary,
.character-advanced-details > summary {
  padding: 13px 14px;
  color: #bdb4ca;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.story-advanced-details[open] > summary,
.story-permission-details[open] > summary,
.character-advanced-details[open] > summary { border-bottom: 1px solid rgba(255,255,255,.06); }
.story-advanced-details > :not(summary),
.story-permission-details > :not(summary),
.character-advanced-details > :not(summary) { margin-left: 14px; margin-right: 14px; }
.story-advanced-details > :last-child,
.story-permission-details > :last-child,
.character-advanced-details > :last-child { margin-bottom: 14px; }
.story-reuse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid var(--tryva-line);
  border-radius: 13px;
  background: var(--tryva-surface-2);
}
.story-reuse-toggle > span { display: grid; gap: 3px; }
.story-reuse-toggle strong { color: #ddd6e8; font-size: 13px; }
.story-reuse-toggle small { color: #898091; font-size: 11px; }
.scenario-ending-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  border: 0;
}
.scenario-ending-mode legend { margin-bottom: 10px; color: #ddd6e8; font-size: 13px; font-weight: 800; }
.scenario-ending-mode label {
  display: block;
  position: relative;
  min-width: 0;
  cursor: pointer;
}
.scenario-ending-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.scenario-ending-mode label > span {
  display: grid;
  gap: 5px;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--tryva-line);
  border-radius: 13px;
  background: var(--tryva-surface-2);
}
.scenario-ending-mode label > span strong { color: #dcd5e7; font-size: 13px; }
.scenario-ending-mode label > span small { color: #8e8599; font-size: 11px; line-height: 1.5; }
.scenario-ending-mode input:checked + span {
  border-color: rgba(139,109,255,.55);
  background: rgba(139,109,255,.11);
  box-shadow: inset 0 0 0 1px rgba(139,109,255,.12);
}
.character-lore-preset-row {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.character-lore-preset-row > span { color: #cfc7dc; font-size: 12px; }
.character-lore-knowledge-editor.is-preset-hidden { display: none; }
.user-profile-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid var(--tryva-line);
  /* 시작 모달의 다른 요소가 전부 8px 이다. 여기만 12px 이면 겹쳐 놓았을 때
     모서리가 어긋나 보인다. */
  border-radius: 8px;
  background: var(--tryva-surface-2);
}
.user-profile-summary-row strong { min-width: 0; overflow: hidden; color: #ddd6e8; text-overflow: ellipsis; white-space: nowrap; }
.user-profile-summary-row button { flex: 0 0 auto; }
#userProfileFields.hidden { display: none !important; }
.character-detail-actions .detail-start-button,
#startChatBtn { flex: 1 1 auto; }
#addCharacterBtn.detail-secondary-action {
  flex: 0 0 auto;
  min-width: auto;
  background: transparent;
  color: #b8afc5;
  border-color: rgba(255,255,255,.12);
}
.story-world-description-note { margin-top: 0; }
.story-world-description-note p { margin: 5px 0 0; color: #8e8599; font-size: 12px; line-height: 1.55; }

@media (max-width: 760px) {
  .story-asset-link-grid,
  .scenario-ending-mode { grid-template-columns: 1fr; }
  .story-reuse-toggle,
  .user-profile-summary-row { align-items: flex-start; }
}

/* V3.27 actual picker markup */
.story-asset-picker-details {
  margin-top: 9px;
  border: 1px solid var(--tryva-line);
  border-radius: 13px;
  background: var(--tryva-surface-2);
  overflow: hidden;
}
.story-asset-picker-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 11px 13px;
  color: #d6cede;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.story-asset-picker-details > summary::-webkit-details-marker { display: none; }
.story-asset-picker-details > summary::after { content: "열기"; color: #9389a3; font-size: 10px; }
.story-asset-picker-details[open] > summary::after { content: "닫기"; }
.story-asset-picker-details > .story-asset-search {
  display: grid;
  gap: 6px;
  padding: 0 12px 10px;
}
.story-asset-picker-details > .story-asset-search > span { color: #948a9f; font-size: 11px; }
.story-asset-picker-details > .world-lorebook-options {
  max-height: 270px;
  overflow: auto;
  margin: 0 12px 12px;
}
.story-asset-picker-block { display: grid; gap: 9px; }
.story-asset-picker-block .story-selected-chip-list,
.scenario-background-block .story-selected-chip-list { margin-top: 5px; }
.story-inline-copy { display: grid; gap: 4px; }
.story-inline-copy strong { color: #ddd6e8; font-size: 13px; }
.story-inline-copy i,
.story-subfield-label i,
label > span i { color: #8e849a; font-size: 10px; font-style: normal; font-weight: 600; }
.story-inline-copy p { margin: 0; color: #8e8599; font-size: 11px; line-height: 1.5; }
.story-conditional-field.hidden { display: none !important; }
.story-selected-chip-list > p { margin: 0; color: #80788e; font-size: 12px; }
#detailAddBtn.detail-group-add-button {
  flex: 0 0 auto;
  min-width: auto;
  background: transparent;
  color: #b8afc5;
  border-color: rgba(255,255,255,.12);
}
.lore-simple-activation {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}
.lore-simple-activation > label { display: grid; gap: 7px; }
.lore-simple-activation > label > span { color: #cfc7dc; font-size: 12px; }

/* V3.28 creator clarity and scenario cast roles */
#createSubmenu.nav-create-submenu [data-create-kind].active {
  position: relative;
  background: rgba(139,109,255,.16);
  color: #f2edff;
  box-shadow: inset 0 0 0 1px rgba(157,114,255,.24);
}
#createSubmenu.nav-create-submenu [data-create-kind].active::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg,#a881ff,#7044ed);
  box-shadow: 0 0 10px rgba(139,109,255,.55);
}
#createMenuLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#storyAssetStepList > button,
#createView .story-asset-create-step-list > button {
  grid-template-columns: 34px minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
}
#storyAssetStepList > button > span,
#createView .story-asset-create-step-list > button > span {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 27px !important;
  text-align: center !important;
}

.story-form-guidance {
  margin: 0 0 22px;
  padding: 15px 17px;
  border: 1px solid rgba(139,109,255,.16);
  border-radius: 13px;
  background: rgba(139,109,255,.055);
  color: #aaa0b9;
  font-size: 12.5px;
  line-height: 1.65;
}
.story-publish-basics { padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 28px; }

.lorebook-maker-active .story-public-summary-field,
.lorebook-maker-active .story-public-cover-field,
.lorebook-maker-active .story-public-visibility-field {
  display: none;
}

.lore-entry-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.story-create-linked-asset {
  width: fit-content;
}

.story-readonly-chip-list .story-asset-chip-readonly {
  padding-right: 12px;
}
.scenario-character-pick-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}
.scenario-character-pick-row > label { display: grid; gap: 8px; }
.scenario-character-pick-row > button { min-height: 43px; white-space: nowrap; }
.scenario-role-toggles { display: grid; gap: 9px; margin: 5px 0 16px; }
.scenario-character-role-card > label { margin-bottom: 17px; }
.scenario-related-character-field {
  display: grid;
  gap: 9px;
  margin: 4px 0 18px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.scenario-related-character-field legend {
  padding: 0 5px;
  color: #ddd6e7;
  font-size: 12px;
  font-weight: 800;
}
.scenario-related-character-field legend i { color: #857d91; font-style: normal; font-weight: 600; }
.scenario-related-character-field > p { margin: 0; color: #8f879f; font-size: 11px; line-height: 1.5; }
.scenario-related-character-options { display: flex; flex-wrap: wrap; gap: 8px; }
.scenario-related-character-options label { position: relative; display: inline-flex; cursor: pointer; }
.scenario-related-character-options input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
}
.scenario-related-character-options span {
  pointer-events: none;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(10,8,14,.55);
  color: #a9a1b6;
  font-size: 11px;
  font-weight: 700;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.scenario-related-character-options input:checked + span {
  border-color: rgba(162,117,255,.68);
  background: rgba(131,81,235,.2);
  color: #f0eaff;
}
.scenario-related-character-options input:focus-visible + span {
  outline: 2px solid rgba(162,117,255,.62);
  outline-offset: 2px;
}
.scenario-related-character-empty { margin: 0 !important; }
.scenario-detail-role-list { display: grid; gap: 8px; margin: 9px 0 0; padding: 0; list-style: none; }
.scenario-detail-role-list li { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.025); }
.scenario-detail-role-list strong { color: #dcd4e8; font-size: 12px; }
.scenario-detail-role-list span { color: #8f879f; font-size: 11px; }

@media (max-width: 700px) {
  .scenario-character-pick-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
}

/* ============================================================
   V3.28.2 — character media editor fixes
   - Keep editor-only card shading smooth, without a hard mid-card seam.
   - Give the detail-image placement surface the full form width.
   - Hide runtime chat CTA inside the quick detail-media editor only.
   ============================================================ */

body.create-active #profileCropFrame .catalog-card-shade.crop-card-gradient,
.card-image-editor-modal #cropDragFrame .catalog-card-shade.crop-card-gradient {
  inset: auto 0 0 !important;
  width: 100% !important;
  height: 48% !important;
  background: linear-gradient(
    180deg,
    rgba(7,8,15,0) 0%,
    rgba(7,8,15,.08) 30%,
    rgba(7,8,15,.46) 68%,
    rgba(7,8,15,.94) 100%
  ) !important;
}

body.create-active #createView .story-asset-step-panel[data-step-panel="4"] .cw-image-editor-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
}
body.create-active #createView .story-asset-step-panel[data-step-panel="4"]
  .cw-split-media-card[data-media-kind="standing"] {
  width: 100% !important;
}


.simple-detail-live-preview .tryva-detail-preview-clone .detail-start-button {
  display: none !important;
}

/* ============================================================
   V3.28.41 — unified motion and surface polish
   Visual-only except for the detail media-ready gate in app.js.
   ============================================================ */
:root {
  --tryva-motion-fast: 150ms;
  --tryva-motion-base: 240ms;
  --tryva-motion-slow: 420ms;
  --tryva-ease-out: cubic-bezier(.22, .72, .2, 1);
  --tryva-ease-soft: cubic-bezier(.2, .66, .24, 1);
  --tryva-focus-ring: 0 0 0 3px rgba(139, 109, 255, .18);
}

/* Detail entry: keep unfinished video frames behind the prepared cover. */
body.detail-active #characterDetailView .detail-media-loading-cover {
  z-index: 4 !important;
  transition:
    opacity var(--tryva-motion-slow) var(--tryva-ease-out),
    visibility 0s linear var(--tryva-motion-slow) !important;
}
body.detail-active #characterDetailView .tryva-detail-media {
  transition: opacity 460ms var(--tryva-ease-out) !important;
}
body.detail-active #characterDetailView video#detailImage.tryva-detail-media,
body.detail-active #characterDetailView video#detailImage.tryva-detail-media.is-media-ready {
  opacity: 0 !important;
}
body.detail-active #characterDetailView video#detailImage.tryva-detail-media.is-media-ready.is-video-playing {
  opacity: 1 !important;
}
body.detail-active #characterDetailView .detail-video-poster-fallback.tryva-detail-media {
  transition: opacity 360ms var(--tryva-ease-out) !important;
}

/* The artwork and information rail arrive as one composed screen. */
body.detail-active #characterDetailView.detail-entry-pending .detail-copy,
body.detail-active #characterDetailView.detail-entry-pending .detail-identity,
body.detail-active #characterDetailView.detail-entry-pending .detail-actions {
  opacity: 0 !important;
}
body.detail-active #characterDetailView.detail-entry-pending .detail-copy {
  transform: translate3d(12px, 0, 0) !important;
}
body.detail-active #characterDetailView.detail-entry-pending .detail-identity {
  transform: translate3d(0, 8px, 0) !important;
}
body.detail-active #characterDetailView.detail-entry-ready .detail-copy {
  animation: tryvaDetailRailIn 360ms var(--tryva-ease-out) both !important;
}
body.detail-active #characterDetailView.detail-entry-ready .detail-identity {
  animation: tryvaDetailIdentityIn 380ms 60ms var(--tryva-ease-out) both !important;
}
body.detail-active #characterDetailView.detail-entry-ready .detail-actions {
  animation: tryvaDetailActionsIn 320ms 90ms var(--tryva-ease-out) both !important;
}
@keyframes tryvaDetailRailIn {
  from { opacity: 0; transform: translate3d(12px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes tryvaDetailIdentityIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes tryvaDetailActionsIn {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Shared shell depth without changing any geometry. */
.nav-shell {
  background:
    radial-gradient(150% 72% at 20% -8%, rgba(126, 86, 218, .11), transparent 54%),
    linear-gradient(180deg, rgba(17, 15, 28, .985), rgba(11, 10, 19, .99)) !important;
  box-shadow: 16px 0 44px rgba(2, 2, 8, .14) !important;
}
.workspace {
  background:
    radial-gradient(900px 560px at 70% 0%, rgba(102, 66, 180, .055), transparent 68%),
    var(--tryva-bg) !important;
}

/* One interaction rhythm for navigation and controls. */
.nav-item,
.nav-util,
.primary-button,
.secondary-button,
.ghost-button,
.tool-button,
.round-button,
.icon-button,
.explore-tab,
.explore-filter-btn,
.explore-sort-btn {
  transition:
    color var(--tryva-motion-fast) ease,
    background-color var(--tryva-motion-fast) ease,
    border-color var(--tryva-motion-fast) ease,
    box-shadow var(--tryva-motion-fast) ease,
    filter var(--tryva-motion-fast) ease,
    transform var(--tryva-motion-fast) var(--tryva-ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover,
  .nav-util:hover { transform: translate3d(2px, 0, 0) !important; }
  .primary-button:hover:not(:disabled),
  .secondary-button:hover:not(:disabled),
  .ghost-button:hover:not(:disabled),
  .tool-button:hover:not(:disabled),
  .round-button:hover:not(:disabled) { transform: translate3d(0, -1px, 0) !important; }
}
.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.ghost-button:active:not(:disabled),
.tool-button:active:not(:disabled),
.round-button:active:not(:disabled),
.icon-button:active:not(:disabled) {
  transform: scale(.975) !important;
  transition-duration: 70ms !important;
}

/* Cards keep their layout but gain consistent depth and media reveal. */
.character-tile,
.catalog-card,
.recent-room-card,
.creator-profile-character-card,
.library-story-card,
.story-scenario-card {
  transition:
    transform var(--tryva-motion-base) var(--tryva-ease-out),
    width var(--tryva-motion-base) var(--tryva-ease-out),
    border-color var(--tryva-motion-fast) ease,
    box-shadow var(--tryva-motion-base) ease !important;
}
.character-tile img,
.character-tile video,
.catalog-card img,
.catalog-card video,
.creator-profile-character-card img,
.creator-profile-character-card video {
  transition: opacity 300ms ease, filter 360ms ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .character-tile:hover,
  .catalog-card:hover,
  .recent-room-card:hover,
  .creator-profile-character-card:hover,
  .library-story-card:hover,
  .story-scenario-card:hover {
    border-color: rgba(158, 119, 244, .34) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28), 0 0 0 1px rgba(143, 100, 232, .07) !important;
  }
}

/* Dialogs and drawers no longer appear in a single hard frame. */
.modal-backdrop:not(.hidden),
.account-modal-backdrop:not(.hidden),
.creator-profile-edit-backdrop:not(.hidden) {
  animation: tryvaBackdropIn 190ms ease-out !important;
}
.modal-backdrop:not(.hidden) > section,
.modal-backdrop:not(.hidden) > div,
.account-modal-backdrop:not(.hidden) > section,
.account-modal-backdrop:not(.hidden) > div,
.creator-profile-edit-backdrop:not(.hidden) > section,
.creator-profile-edit-backdrop:not(.hidden) > div {
  animation: tryvaDialogIn 260ms var(--tryva-ease-out) !important;
}
@keyframes tryvaBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes tryvaDialogIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.988); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Inputs and keyboard focus share the same restrained violet feedback. */
input,
textarea,
select,
.search-box,
.tryva-global-search,
.recent-search,
.explore-search {
  transition: border-color var(--tryva-motion-fast) ease, box-shadow var(--tryva-motion-fast) ease, background-color var(--tryva-motion-fast) ease !important;
}
input:focus,
textarea:focus,
select:focus,
.search-box:focus-within,
.tryva-global-search:focus-within,
.recent-search:focus-within,
.explore-search:focus-within {
  border-color: rgba(158, 119, 244, .58) !important;
  box-shadow: var(--tryva-focus-ring) !important;
  outline: none !important;
}
:where(button, a, [role="button"], input, textarea, select):focus-visible {
  outline: 2px solid rgba(196, 169, 255, .78) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  body.detail-active #characterDetailView *,
  .modal-backdrop,
  .account-modal-backdrop,
  .creator-profile-edit-backdrop,
  .nav-item,
  .nav-util,
  .primary-button,
  .secondary-button,
  .ghost-button,
  .tool-button,
  .round-button,
  .icon-button,
  .character-tile,
  .catalog-card,
  .recent-room-card,
  .creator-profile-character-card,
  .library-story-card,
  .story-scenario-card {
    animation: none !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* V3 visual asset library: creator/generated grouping, image lightbox and form-state help. */
.visual-asset-grid {
  align-items: start;
}
.visual-asset-origin-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(164,124,255,.16);
  border-radius: 18px;
  background: rgba(10,9,17,.42);
}
.visual-asset-origin-section + .visual-asset-origin-section {
  margin-top: 6px;
}
.visual-asset-origin-section.is-generated-section {
  border-color: rgba(102,188,255,.2);
  background: linear-gradient(145deg, rgba(13,18,29,.66), rgba(9,10,18,.48));
}
.visual-asset-origin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.visual-asset-origin-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.visual-asset-origin-head strong {
  color: #fff;
  font-size: 15px;
  letter-spacing: -.01em;
}
.visual-asset-origin-head small {
  color: rgba(226,218,240,.56);
  line-height: 1.45;
}
.visual-asset-origin-head > span {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(164,124,255,.2);
  border-radius: 999px;
  color: rgba(238,232,249,.78);
  background: rgba(18,16,29,.82);
  font-size: 12px;
}
.visual-asset-origin-grid {
  padding: 0;
}
.visual-asset-origin-grid .visual-asset-empty-copy {
  margin: 0;
}
.visual-asset-card.is-generated-asset {
  border-color: rgba(102,188,255,.25);
  box-shadow: inset 0 1px 0 rgba(138,210,255,.04);
}
.emotion-media-preview-frame {
  position: relative;
}
.visual-asset-zoom-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  color: #fff;
  background: rgba(6,6,10,.72);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.visual-asset-zoom-button:hover,
.visual-asset-zoom-button:focus-visible {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(190,160,255,.62);
  background: rgba(30,23,48,.9);
  outline: none;
}
.visual-asset-zoom-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.visual-asset-kind-control {
  display: block;
  min-width: 0;
}
.visual-asset-kind-select-shell {
  position: relative;
  min-width: 0;
}
.visual-asset-kind-select-shell > select {
  width: 100%;
  padding-right: 42px;
}
.visual-form-help-wrap {
  position: absolute;
  top: 5px;
  right: 30px;
  bottom: 5px;
  display: none;
  place-items: center;
  z-index: 2;
}
.visual-asset-kind-control.is-form-selected .visual-form-help-wrap {
  display: inline-grid;
}
.visual-form-help-button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(190,160,255,.34);
  border-radius: 50%;
  color: rgba(239,234,250,.82);
  background: rgba(20,17,31,.9);
  font-size: 13px;
  font-weight: 800;
  cursor: help;
}
.visual-form-help-button:hover,
.visual-form-help-button:focus-visible,
.visual-form-help-wrap.is-open .visual-form-help-button {
  color: #fff;
  border-color: rgba(190,160,255,.72);
  background: rgba(112,72,185,.4);
  outline: none;
}
.visual-form-help-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 30;
  width: min(330px, calc(100vw - 48px));
  padding: 11px 12px;
  border: 1px solid rgba(190,160,255,.28);
  border-radius: 12px;
  color: rgba(246,242,252,.92);
  background: rgba(10,9,17,.97);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  font-size: 12px;
  line-height: 1.55;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px) scale(.98);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.visual-form-help-tooltip::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 100%;
  border: 6px solid transparent;
  border-top-color: rgba(10,9,17,.97);
}
.visual-form-help-wrap:hover .visual-form-help-tooltip,
.visual-form-help-wrap:focus-within .visual-form-help-tooltip,
.visual-form-help-wrap.is-open .visual-form-help-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.visual-asset-lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(3,3,6,.7);
  backdrop-filter: blur(14px) saturate(.78);
  -webkit-backdrop-filter: blur(14px) saturate(.78);
  opacity: 0;
  transition: opacity .16s ease;
}
.visual-asset-lightbox.hidden {
  display: none !important;
}
.visual-asset-lightbox.is-visible {
  opacity: 1;
}
.visual-asset-lightbox-media-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(92vw, 1100px);
  height: 88vh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.5));
  transform: scale(.97);
  transition: transform .18s ease;
  touch-action: none;
}
.visual-asset-lightbox.is-visible .visual-asset-lightbox-media-wrap {
  transform: scale(1);
}
.visual-asset-lightbox-media {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 14px;
  background: transparent;
  transform-origin: center center;
  transition: transform .08s linear;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
  will-change: transform;
}
.visual-asset-lightbox-media.is-zoomed {
  cursor: grab;
}
.visual-asset-lightbox-media.is-dragging {
  cursor: grabbing;
  transition: none;
}
.visual-asset-lightbox.is-video .visual-asset-lightbox-media-wrap {
  width: auto;
  height: auto;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  overflow: visible;
  touch-action: auto;
}
.visual-asset-lightbox.is-video .visual-asset-lightbox-media {
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  cursor: default;
}
.visual-asset-lightbox-toolbar {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(8,8,12,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 36px rgba(0,0,0,.34);
  transform: translateX(-50%);
}
.visual-asset-lightbox-toolbar button {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: rgba(255,255,255,.9);
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.visual-asset-lightbox-toolbar button:hover,
.visual-asset-lightbox-toolbar button:focus-visible {
  color: #fff;
  background: rgba(122,86,192,.38);
  outline: none;
}
.visual-asset-lightbox-toolbar button:disabled {
  opacity: .34;
  cursor: default;
  background: transparent;
}
.visual-asset-lightbox-toolbar span {
  min-width: 52px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.visual-asset-lightbox-toolbar .visual-asset-lightbox-reset {
  min-width: auto;
  font-size: 12px;
  font-weight: 700;
}
.visual-asset-lightbox.is-video .visual-asset-lightbox-toolbar {
  display: none;
}
.visual-asset-lightbox-close {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: #fff;
  background: rgba(8,8,12,.68);
  backdrop-filter: blur(12px);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}
.visual-asset-lightbox-close:hover,
.visual-asset-lightbox-close:focus-visible {
  border-color: rgba(190,160,255,.7);
  background: rgba(39,29,61,.9);
  outline: none;
}
@media (max-width: 780px) {
  .visual-asset-origin-section { padding: 12px; }
  .visual-asset-lightbox { padding: 18px; }
  .visual-asset-lightbox-media-wrap { width: 94vw; height: 84vh; }
  .visual-asset-lightbox.is-video .visual-asset-lightbox-media,
  .visual-asset-lightbox.is-video .visual-asset-lightbox-media-wrap { max-width: 94vw; max-height: 84vh; }
}
@media (max-width: 520px) {
  .visual-asset-origin-head { align-items: flex-start; }
  .visual-asset-origin-head > span { min-width: 36px; }
  .visual-form-help-tooltip {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: auto;
    transform-origin: bottom center;
  }
  .visual-form-help-tooltip::after { display: none; }
  .visual-asset-lightbox { padding: 12px; }
  .visual-asset-lightbox-toolbar { bottom: max(12px, env(safe-area-inset-bottom)); }
  .visual-asset-lightbox-close {
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .visual-asset-lightbox,
  .visual-asset-lightbox-media-wrap,
  .visual-asset-lightbox-media,
  .visual-asset-zoom-button,
  .visual-form-help-tooltip { transition: none !important; }
}

/* Home character rails keep the original flex-nowrap carousel. Only the card
   component is shared with Explore; desktop shows one exact six-card page. */
body.play-active #playView .character-section,
body.play-active #playView .play-rail-row,
body.play-active #playView .play-rail-row-single,
body.play-active #playView .play-rail-row-single .mini-rail-block,
body.play-active #playView .tryva-home-card-carousel {
  width: 100% !important;
  max-width: 100% !important;
}

body.play-active #playView .tryva-home-card-carousel > .home-catalog-rail {
  
  
  
  
  
  
  
  
  margin: 0 !important;
  padding: 8px 0 26px !important;
  
  
  
  
  
}



body.play-active #playView .home-catalog-rail > .catalog-card {
  
  
  
  
  
  
  
  border-radius: var(--tryva-card-radius, 18px) !important;
  
}

body.play-active #playView .home-catalog-rail .catalog-card-media > img,
body.play-active #playView .home-catalog-rail .catalog-card-media > video {
  object-position: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
  transform: scale(var(--card-crop-zoom, 1.05)) !important;
  transform-origin: var(--card-crop-x, 50%) var(--card-crop-y, 18%) !important;
}

body.play-active #playView .home-catalog-rail .catalog-card-shade {
  background: linear-gradient(180deg, transparent 34%, rgba(7,8,15,.18) 52%, rgba(7,8,15,.96) 100%) !important;
}

body.play-active #playView .home-catalog-rail .catalog-card-copy {
  padding: 15px !important;
}

body.play-active #playView .home-catalog-rail .catalog-card-copy h3 {
  font-size: 26px !important;
  font-weight: 840 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

body.play-active #playView .home-catalog-rail .catalog-card-copy p {
  margin: 6px 0 9px !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

body.play-active #playView .home-catalog-rail .catalog-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body.play-active #playView .home-catalog-rail .catalog-card-tags span {
  min-height: 22px !important;
  padding: 4px 8px !important;
  border-radius: 7px !important;
  font-size: 10.5px !important;
}

body.play-active #playView .home-catalog-rail .catalog-card-copy .creator-byline {
  display: none !important;
}

html body.play-active #playView .home-catalog-rail .catalog-card .catalog-card-media > img.tryva-card-cover-media,
html body.play-active #playView .home-catalog-rail .catalog-card .catalog-card-media > video.tryva-card-cover-media {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-card-cover-width, 100%) !important;
  height: var(--tryva-card-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-card-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}

@media (min-width: 901px) {
  body.play-active #playView .character-section,
  body.play-active #playView .play-rail-row,
  body.play-active #playView .play-rail-row-single,
  body.play-active #playView .play-rail-row-single .mini-rail-block,
  body.play-active #playView .tryva-home-card-carousel {
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
  }

  /* The old 18px gaps occupied 90px across one six-card page. Reducing them
     to 12px saves 30px; narrowing the shell by the same amount keeps every
     card at its previous width while preserving a centered six-card page. */
  body.play-active #playView .tryva-home-card-carousel {
    width: calc(100% - 38px) !important;
    max-width: calc(100% - 38px) !important;
    margin-inline: auto !important;
  }

  /* Match the ID-level legacy rail selectors so their old 18px gap cannot
     override the six-card page's 12px width calculation. */

}

@media (max-width: 900px) {
  



  body.play-active #playView .home-catalog-rail > .catalog-card {
    
    
    
    
    
    
    
    border-radius: 15px !important;
  }

  body.play-active #playView .home-catalog-rail .catalog-card-copy {
    padding: 13px !important;
  }

  body.play-active #playView .home-catalog-rail .catalog-card-copy h3 {
    font-size: 15px !important;
  }

  body.play-active #playView .home-catalog-rail .catalog-card-copy p {
    margin: 4px 0 7px !important;
    font-size: 11.5px !important;
  }

  body.play-active #playView .home-catalog-rail .catalog-card-tags,
  body.play-active #playView .home-catalog-rail .catalog-card-copy .creator-byline {
    display: none !important;
  }
}

@media (max-width: 520px) {
  

  
}

/* Home section actions share the story showcase's restrained text-link shape.
   The old recommendation-specific button treatment is intentionally not reused. */
body.play-active #playView .home-section-more-button {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 6px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(211, 202, 232, .68) !important;
  font: inherit !important;
  font-size: 12.5px !important;
  font-weight: 680 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: color 160ms ease !important;
}

body.play-active #playView .home-section-more-button > span {
  display: inline-block !important;
  color: rgba(196, 169, 255, .8) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: .7 !important;
  transition: transform 160ms ease, color 160ms ease !important;
}

body.play-active #playView .home-section-more-button:hover,
body.play-active #playView .home-section-more-button:focus-visible {
  color: rgba(241, 235, 255, .96) !important;
  outline: none !important;
}

body.play-active #playView .home-section-more-button:hover > span,
body.play-active #playView .home-section-more-button:focus-visible > span {
  color: rgba(218, 197, 255, .96) !important;
  transform: translateX(2px) !important;
}

body.play-active #playView .home-section-more-button:focus-visible {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

/* Tryva ORIGINAL is a separate official mark. Context badges live with the
   character name instead of competing for the artwork's top-left corner. */
.character-tile .tryva-original-mark,
.catalog-card .tryva-original-mark {
  position: absolute !important;
  z-index: 7 !important;
  top: -4px !important;
  left: -3px !important;
  display: block !important;
  width: min(155px, calc(100% - 8px)) !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: none !important;
}

.character-tile .tile-status-badge,
.catalog-card .catalog-card-status-badge,
.tryva-unified-story-card .catalog-card-status-badge {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 18px !important;
  margin: 0 0 6px !important;
  padding: 3px 7px !important;
  border: 1px solid rgba(155, 126, 231, .34) !important;
  border-radius: 4px !important;
  background: rgba(124, 92, 255, .24) !important;
  color: #d6c6ff !important;
  font-size: 9.5px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: none !important;
}

.character-tile .tile-status-badge[data-badge="NEW"],
.catalog-card .catalog-card-status-badge[data-badge="NEW"],
.tryva-unified-story-card .catalog-card-status-badge[data-badge="NEW"] {
  border-color: #7a42ff !important;
  background: #7a42ff !important;
  color: #fff !important;
}

.character-tile .tile-status-badge[data-badge="내 캐릭터"],
.catalog-card .catalog-card-status-badge[data-badge="내 캐릭터"],
.tryva-unified-story-card .catalog-card-status-badge[data-badge="내 시나리오"],
.tryva-unified-story-card .catalog-card-status-badge[data-badge="내 세계관"],
.tryva-unified-story-card .catalog-card-status-badge[data-badge="내 로어북"] {
  border-color: rgba(255, 255, 255, .1) !important;
  border-left: 2px solid #9b6cff !important;
  background: rgba(13, 11, 20, .82) !important;
  color: #f7f3ff !important;
}

.character-tile .tile-status-badge[data-badge="비공개"],
.catalog-card .catalog-card-status-badge[data-badge="비공개"],
.tryva-unified-story-card .catalog-card-status-badge[data-badge="비공개"] {
  border-color: rgba(255, 255, 255, .1) !important;
  border-left: 2px solid #7788aa !important;
  background: rgba(13, 11, 20, .82) !important;
  color: #dce4f4 !important;
}

.character-tile .tile-status-badge[data-badge="임시저장"],
.catalog-card .catalog-card-status-badge[data-badge="임시저장"],
.tryva-unified-story-card .catalog-card-status-badge[data-badge="임시저장"] {
  border-color: rgba(255, 255, 255, .1) !important;
  border-left: 2px solid #d69a48 !important;
  background: rgba(13, 11, 20, .82) !important;
  color: #ffe1b2 !important;
}

/* One creator navigation contract.
   Character, world, scenario and lorebook forms use the same action row,
   dimensions and alignment; creator-specific button IDs no longer own layout. */
html body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) :is(#characterForm,#storyAssetCreateForm) > .story-asset-create-status {
  display:block!important;width:100%!important;min-height:22px!important;margin:0!important;padding:0!important;
  color:#a99ec0!important;font-size:12px!important;line-height:1.5!important
}
html body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) :is(#characterForm,#storyAssetCreateForm) > .story-asset-create-actions {
  position:static!important;inset:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:9px!important;
  width:100%!important;height:auto!important;min-height:44px!important;margin:20px 0 0!important;padding:0!important;overflow:visible!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important
}
html body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) :is(#characterForm,#storyAssetCreateForm) > .story-asset-create-actions > button {
  position:static!important;inset:auto!important;flex:0 0 auto!important;width:auto!important;max-width:none!important;height:44px!important;min-height:44px!important;
  margin:0!important;padding:0 18px!important;border-radius:11px!important;font-size:13px!important;font-weight:650!important;line-height:1!important;white-space:nowrap!important;transform:none!important
}
html body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) :is(#characterForm,#storyAssetCreateForm) > .story-asset-create-actions > :is(#wizardPrevBtn,#wizardNextBtn,#storyAssetPrevStepBtn,#storyAssetNextStepBtn) {
  min-width:96px!important;border:1px solid var(--tryva-line,rgba(255,255,255,.09))!important;background:transparent!important;color:#b8afc5!important
}
html body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) :is(#characterForm,#storyAssetCreateForm) > .story-asset-create-actions > :is(#saveCharacterBtn,#publishStoryAssetBtn) {
  min-width:132px!important;padding:0 20px!important
}
html body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) :is(#characterForm,#storyAssetCreateForm) > .story-asset-create-actions > button.hidden {display:none!important}
@media(max-width:760px){
  html body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) :is(#characterForm,#storyAssetCreateForm) > .story-asset-create-actions > button{flex:1 1 0!important;min-width:0!important;padding-inline:12px!important}
}

.character-tile .tile-status-badge[data-badge="선택됨"],
.catalog-card .catalog-card-status-badge[data-badge="선택됨"] {
  border-color: rgba(183, 151, 255, .44) !important;
  background: rgba(132, 91, 232, .32) !important;
  color: #eadfff !important;
}

body.play-active #playView .home-catalog-rail .catalog-card-status-badge {
  
  margin-bottom: 7px !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
}

.admin-home-feature-grid .admin-original-feature-card {
  grid-column: 1 / -1;
}

/* V3.28.5 — one public card surface for creation and quick edit.
   The real rendered catalog card supplies the DOM and visual rules; these
   declarations only give both editor hosts the measured public-card box. */
:root {
  --tryva-editor-card-w: var(--tryva-card-w, 218px);
  --tryva-editor-card-h: var(--tryva-card-h, 302px);
  --tryva-editor-card-radius: var(--tryva-card-radius, 14px);
  --tryva-editor-card-border: 1px solid rgba(255, 255, 255, .085);
  --tryva-editor-card-background: #090a12;
  --tryva-editor-card-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

.tryva-shared-card-editor-viewport,
body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport,
.card-image-editor-modal .tryva-shared-card-editor-viewport,
.tryva-shared-card-editor-viewport:hover,
.tryva-shared-card-editor-viewport:focus,
.tryva-shared-card-editor-viewport:focus-within,
body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport:hover,
body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport:focus,
body.create-active .cw-create-card-editor-stage .simple-card-editor-viewport:focus-within {
  width: var(--tryva-editor-card-w) !important;
  min-width: var(--tryva-editor-card-w) !important;
  max-width: var(--tryva-editor-card-w) !important;
  height: var(--tryva-editor-card-h) !important;
  min-height: var(--tryva-editor-card-h) !important;
  max-height: var(--tryva-editor-card-h) !important;
  overflow: visible !important;
  border-radius: var(--tryva-editor-card-radius) !important;
}

body.create-active #profileCropFrame.cw-create-crop-frame.profile,
.card-image-editor-modal #cropDragFrame,
body.create-active #profileCropFrame.cw-create-crop-frame.profile:hover,
.card-image-editor-modal #cropDragFrame:hover,
#cropDragFrame,
#cropDragFrame:hover,
#cropDragFrame:focus-within {
  width: var(--tryva-editor-card-w) !important;
  min-width: var(--tryva-editor-card-w) !important;
  max-width: var(--tryva-editor-card-w) !important;
  height: var(--tryva-editor-card-h) !important;
  min-height: var(--tryva-editor-card-h) !important;
  max-height: var(--tryva-editor-card-h) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--tryva-editor-card-radius) !important;
  background: transparent !important;
}

body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface,
.card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: var(--tryva-editor-card-border) !important;
  border-radius: inherit !important;
  background: var(--tryva-editor-card-background) !important;
  box-shadow: var(--tryva-editor-card-shadow) !important;
  transform: none !important;
  cursor: grab !important;
}

body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-media,
.card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy,
.card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy {
  opacity: 1 !important;
}

body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-hover,
.card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-hover {
  display: none !important;
}

body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface *,
.card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface * {
  pointer-events: none !important;
}

/* The shared real-detail preview must retain its real logical height while the
   fitted clone is measured. A hidden template must never collapse it to 1px. */
.simple-detail-live-preview .direct-detail-preview-scale,
.character-wizard .cw-detail-window-preview .direct-detail-preview-scale {
  display: block !important;
  min-width: 1px !important;
  min-height: 1px !important;
}

.simple-detail-live-preview .direct-detail-preview-canvas,
.character-wizard .cw-detail-window-preview .direct-detail-preview-canvas,
.simple-detail-live-preview .tryva-detail-preview-clone,
.character-wizard .cw-detail-window-preview .tryva-detail-preview-clone {
  display: block !important;
  min-height: 640px !important;
}

.simple-detail-live-preview .tryva-detail-preview-clone .detail-hero,
.character-wizard .cw-detail-window-preview .tryva-detail-preview-clone .detail-hero {
  display: grid !important;
  width: 100% !important;
  height: min(720px, calc(100vh - 112px)) !important;
  min-height: 640px !important;
}

/* V3.28.6 — the creator and quick editor inherit the measured public card's
   exact copy metrics. Card shape parity without copy-position parity is not
   considered a shared surface. */
body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-shade,
.card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-shade {
  background: var(--tryva-editor-shade-background) !important;
}

body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy,
.card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy {
  bottom: var(--tryva-editor-copy-bottom, 0px) !important;
  padding: var(--tryva-editor-copy-padding, 15px) !important;
}

body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-status-badge,
.card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-status-badge {
  min-height: var(--tryva-editor-badge-min-height, 18px) !important;
  margin: var(--tryva-editor-badge-margin, 0 0 7px) !important;
  padding: var(--tryva-editor-badge-padding, 3px 7px) !important;
  font-size: var(--tryva-editor-badge-font-size, 10px) !important;
  font-weight: var(--tryva-editor-badge-font-weight, 760) !important;
  line-height: var(--tryva-editor-badge-line-height, 1) !important;
}

body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy h3,
.card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy h3 {
  margin: var(--tryva-editor-name-margin, 0) !important;
  font-size: var(--tryva-editor-name-font-size, 26px) !important;
  font-weight: var(--tryva-editor-name-font-weight, 840) !important;
  line-height: var(--tryva-editor-name-line-height, 1) !important;
  letter-spacing: var(--tryva-editor-name-letter-spacing, -.035em) !important;
}

body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy > p,
.card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy > p {
  margin: var(--tryva-editor-meta-margin, 6px 0 9px) !important;
  font-size: var(--tryva-editor-meta-font-size, 12.5px) !important;
  line-height: var(--tryva-editor-meta-line-height, 1.35) !important;
}

/* Quick edit uses the public detail hero's captured height and scales only as
   needed to fit horizontally. It must not apply a second, shorter height cap. */
.simple-detail-live-preview .tryva-detail-preview-clone .detail-hero {
  height: var(--tryva-detail-preview-height, min(720px, calc(100vh - 112px))) !important;
  min-height: var(--tryva-detail-preview-height, 640px) !important;
}
/* v5.34.72.151 — one desktop card-copy contract for every public surface.
   Mobile keeps its own established override below. */
:root {
  --tryva-card-copy-padding: 12px;
  --tryva-card-status-margin: 0 0 6px;
  --tryva-card-status-min-height: 17px;
  --tryva-card-status-padding: 3px 6px;
  --tryva-card-status-size: 9px;
  --tryva-card-name-size: 21px;
  --tryva-card-name-weight: 840;
  --tryva-card-name-line-height: 1;
  --tryva-card-name-letter-spacing: -.035em;
  --tryva-card-meta-margin: 5px 0 7px;
  --tryva-card-meta-size: 11.5px;
  --tryva-card-meta-line-height: 1.35;
  --tryva-card-tag-gap: 5px;
  --tryva-card-tag-min-height: 20px;
  --tryva-card-tag-padding: 3px 7px;
  --tryva-card-tag-size: 9.5px;
  --tryva-card-original-mark-width: 132px;
}

html body.play-active #playView .home-catalog-rail .catalog-card-copy,
html body.all-characters-active #allCharacterGrid .catalog-card-copy,
html body.library-active #libraryGrid.tryva-character-explore-grid .catalog-card-copy,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy,
html .card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: auto !important;
  gap: 0 !important;
  padding: var(--tryva-card-copy-padding) !important;
}

html body.play-active #playView .home-catalog-rail .catalog-card-status-badge,
html body.all-characters-active #allCharacterGrid .catalog-card-status-badge,
html body.library-active #libraryGrid.tryva-character-explore-grid .catalog-card-status-badge,
html body.library-active #libraryGrid.tryva-story-home-grid .tryva-unified-story-card .catalog-card-status-badge,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-status-badge,
html .card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-status-badge {
  min-height: var(--tryva-card-status-min-height) !important;
  margin: var(--tryva-card-status-margin) !important;
  padding: var(--tryva-card-status-padding) !important;
  font-size: var(--tryva-card-status-size) !important;
}

html body.play-active #playView .home-catalog-rail .catalog-card-copy h3,
html body.all-characters-active #allCharacterGrid .catalog-card-copy h3,
html body.library-active #libraryGrid.tryva-character-explore-grid .catalog-card-copy h3,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy h3,
html .card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy h3 {
  margin: 0 !important;
  font-size: var(--tryva-card-name-size) !important;
  font-weight: var(--tryva-card-name-weight) !important;
  line-height: var(--tryva-card-name-line-height) !important;
  letter-spacing: var(--tryva-card-name-letter-spacing) !important;
}

html body.play-active #playView .home-catalog-rail .catalog-card-copy > p,
html body.all-characters-active #allCharacterGrid .catalog-card-copy > p,
html body.library-active #libraryGrid.tryva-character-explore-grid .catalog-card-copy > p,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy > p,
html .card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-copy > p {
  margin: var(--tryva-card-meta-margin) !important;
  font-size: var(--tryva-card-meta-size) !important;
  line-height: var(--tryva-card-meta-line-height) !important;
}

html body.play-active #playView .home-catalog-rail .catalog-card-tags,
html body.all-characters-active #allCharacterGrid .catalog-card-tags,
html body.library-active #libraryGrid.tryva-character-explore-grid .catalog-card-tags,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-tags,
html .card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--tryva-card-tag-gap) !important;
  min-height: var(--tryva-card-tag-min-height) !important;
  margin: 0 !important;
  overflow: visible !important;
}

html body.play-active #playView .home-catalog-rail .catalog-card-tags span,
html body.all-characters-active #allCharacterGrid .catalog-card-tags span,
html body.library-active #libraryGrid.tryva-character-explore-grid .catalog-card-tags span,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-tags span,
html .card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-tags span {
  min-height: var(--tryva-card-tag-min-height) !important;
  padding: var(--tryva-card-tag-padding) !important;
  border-radius: 7px !important;
  font-size: var(--tryva-card-tag-size) !important;
}

html body.all-characters-active #allCharacterGrid .catalog-card-shade,
html body.library-active #libraryGrid.tryva-character-explore-grid .catalog-card-shade,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-shade,
html .card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-shade {
  background: linear-gradient(180deg, transparent 34%, rgba(7,8,15,.18) 52%, rgba(7,8,15,.96) 100%) !important;
}

/* The quick detail editor is a uniformly scaled copy of the live detail hero.
   Its logical height comes from the live viewport and must never inherit the
   historical 520/640/720px editor caps. */
.simple-detail-media-editor #detailImageLivePreview.simple-detail-live-preview {
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  contain: none !important;
}

.simple-detail-media-editor #detailImageLivePreview .direct-detail-preview-scale,
.simple-detail-media-editor #detailImageLivePreview .direct-detail-preview-canvas,
.simple-detail-media-editor #detailImageLivePreview .tryva-detail-preview-clone {
  min-height: var(--tryva-detail-preview-height, 100vh) !important;
  max-height: none !important;
}

.simple-detail-media-editor #detailImageLivePreview .tryva-detail-preview-clone .detail-hero {
  height: var(--tryva-detail-preview-height, 100vh) !important;
  min-height: var(--tryva-detail-preview-height, 100vh) !important;
  max-height: var(--tryva-detail-preview-height, 100vh) !important;
}

.simple-detail-media-editor #detailImageLivePreview video.tryva-detail-media {
  display: block !important;
  visibility: visible !important;
}

@media (max-width: 900px) {
  :root {
    --tryva-card-copy-padding: 13px;
    --tryva-card-status-margin: 0 0 7px;
    --tryva-card-status-min-height: 18px;
    --tryva-card-status-padding: 3px 7px;
    --tryva-card-status-size: 10px;
    --tryva-card-name-size: 15px;
    --tryva-card-meta-margin: 4px 0 7px;
    --tryva-card-meta-size: 11.5px;
    --tryva-card-original-mark-width: 155px;
  }

  html body.play-active #playView .home-catalog-rail .catalog-card-tags,
  html body.all-characters-active #allCharacterGrid .catalog-card-tags,
  html body.library-active #libraryGrid.tryva-character-explore-grid .catalog-card-tags,
  html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface .catalog-card-tags,
  html .card-image-editor-modal #cropDragFrame > .catalog-card.catalog-card-editor-surface .catalog-card-tags {
    display: none !important;
  }
}

/* Creation card photo editor parity.
   Home and the creation surface deliberately share each declaration in the
   same rule so older creator-only rules cannot move one copy stack or mark
   independently. */
html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface.tryva-public-card-contract .catalog-card-copy {
  position: absolute !important;
  z-index: 4 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: auto !important;
  gap: 0 !important;
  padding: var(--tryva-card-copy-padding) !important;
  opacity: 1 !important;
}

html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-status-badge,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface.tryva-public-card-contract .catalog-card-status-badge {
  min-height: var(--tryva-card-status-min-height) !important;
  margin: var(--tryva-card-status-margin) !important;
  padding: var(--tryva-card-status-padding) !important;
  font-size: var(--tryva-card-status-size) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
}

html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy h3,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface.tryva-public-card-contract .catalog-card-copy h3 {
  margin: 0 !important;
  font-size: var(--tryva-card-name-size) !important;
  font-weight: var(--tryva-card-name-weight) !important;
  line-height: var(--tryva-card-name-line-height) !important;
  letter-spacing: var(--tryva-card-name-letter-spacing) !important;
}

html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy > p,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface.tryva-public-card-contract .catalog-card-copy > p {
  margin: var(--tryva-card-meta-margin) !important;
  font-size: var(--tryva-card-meta-size) !important;
  line-height: var(--tryva-card-meta-line-height) !important;
}

html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-tags,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface.tryva-public-card-contract .catalog-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--tryva-card-tag-gap) !important;
  min-height: var(--tryva-card-tag-min-height) !important;
  margin: 0 !important;
  overflow: visible !important;
}

html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-tags span,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface.tryva-public-card-contract .catalog-card-tags span {
  min-height: var(--tryva-card-tag-min-height) !important;
  padding: var(--tryva-card-tag-padding) !important;
  border-radius: 7px !important;
  font-size: var(--tryva-card-tag-size) !important;
}

html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-shade,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface.tryva-public-card-contract .catalog-card-shade {
  background: linear-gradient(180deg, transparent 34%, rgba(7,8,15,.18) 52%, rgba(7,8,15,.96) 100%) !important;
}

html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract > .tryva-original-mark,
html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface.tryva-public-card-contract > .tryva-original-mark {
  position: absolute !important;
  z-index: 7 !important;
  top: -4px !important;
  left: -3px !important;
  display: block !important;
  width: min(var(--tryva-card-original-mark-width), calc(100% - 8px)) !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: none !important;
}

@media (max-width: 900px) {
  html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy,
  html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface.tryva-public-card-contract .catalog-card-copy {
    padding: 13px !important;
  }

  html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy h3,
  html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface.tryva-public-card-contract .catalog-card-copy h3 {
    font-size: 15px !important;
  }

  html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-copy > p,
  html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface.tryva-public-card-contract .catalog-card-copy > p {
    margin: 4px 0 7px !important;
    font-size: 11.5px !important;
  }

  html body.play-active #playView .home-catalog-rail > .catalog-card.tryva-public-card-contract .catalog-card-tags,
  html body.create-active #profileCropFrame > .catalog-card.catalog-card-editor-surface.tryva-public-card-contract .catalog-card-tags {
    display: none !important;
  }
}

/* Creation structure cleanup: shared AI button shell for world/scenario makers. */
#storyAssetCreateForm .story-asset-ai-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(137, 85, 255, .25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(125, 73, 255, .095), rgba(74, 47, 146, .04));
}

#storyAssetCreateForm .story-asset-ai-row > div {
  min-width: 0;
}

#storyAssetCreateForm .story-asset-ai-row strong {
  display: block;
  margin-bottom: 4px;
  color: #f3f1ff;
  font-size: 13px;
}

#storyAssetCreateForm .story-asset-ai-row p {
  margin: 0;
  color: #7f8498;
  font-size: 12px;
  line-height: 1.5;
}

#storyAssetCreateForm .story-asset-ai-button {
  flex: 0 0 auto;
  border-color: rgba(154, 105, 255, .42);
  color: #d4c3ff;
}

#storyAssetCreateForm .story-world-description-field {
  display: grid;
  gap: 9px;
  margin: 0;
}

@media (max-width: 700px) {
  #storyAssetCreateForm .story-asset-ai-row {
    align-items: stretch;
    flex-direction: column;
  }

  #storyAssetCreateForm .story-asset-ai-button {
    width: 100%;
  }
}
.creator-ai-conflicts {
  margin: 10px 0 16px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 184, 77, 0.36);
  border-radius: 12px;
  background: rgba(255, 158, 44, 0.08);
  color: var(--text-primary, #f4f1ff);
}

.creator-ai-conflicts > strong {
  display: block;
  margin-bottom: 8px;
  color: #ffc977;
}

.creator-ai-conflicts ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.creator-ai-conflicts li {
  display: grid;
  gap: 2px;
}

.creator-ai-conflicts li b {
  color: #ffd9a0;
  font-size: 12px;
}

.creator-ai-conflicts li span {
  color: var(--text-secondary, #c8c2d8);
  line-height: 1.5;
}

/* Scenario/world media uses the same normalized placement contract as the
   character card and detail editors. */
.tryva-unified-story-card > .tryva-unified-story-card-cover.tryva-cover-media,
.tryva-unified-story-card:hover > .tryva-unified-story-card-cover.tryva-cover-media,
.tryva-unified-story-card:focus-visible > .tryva-unified-story-card-cover.tryva-cover-media,
.story-detail-art > .story-detail-cover.tryva-cover-media,
.tryva-story-detail-preview-clone .story-detail-art > .story-detail-cover.tryva-cover-media {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-cover-width, 100%) !important;
  height: var(--tryva-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}

.card-image-editor-modal #cropDragFrame > .tryva-unified-story-card {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  transform: none !important;
  pointer-events: none !important;
}

.tryva-story-detail-preview-context .story-detail-copy,
.tryva-story-detail-preview-context .story-detail-art-shade,
.tryva-story-detail-preview-context .story-detail-identity {
  pointer-events: none !important;
}

/* Public scenario/world discovery: real published assets on Home + Explore. */
body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) .tryva-story-showcase-card {
  appearance: none !important;
  
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: auto !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) .tryva-story-showcase-card:hover,
body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) .tryva-story-showcase-card:focus-visible {
  transform: translateY(-3px) !important;
  border-color: rgba(179, 145, 255, .42) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 20px 44px rgba(1,1,9,.30), 0 0 0 1px rgba(137,95,255,.08) !important;
}
body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) .tryva-story-showcase-card:focus-visible {
  outline: 2px solid rgba(165, 126, 255, .8) !important;
  outline-offset: 3px !important;
}
body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) .tryva-story-showcase-card.type-world {
  --tryva-story-art:
    radial-gradient(circle at 82% 26%, rgba(76, 216, 200, .23), transparent 29%),
    linear-gradient(128deg, #10182a 0%, #172d35 52%, #15152a 100%);
}
body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) .tryva-story-showcase-card.type-scenario {
  --tryva-story-art:
    radial-gradient(circle at 80% 28%, rgba(170, 112, 255, .29), transparent 30%),
    linear-gradient(128deg, #171329 0%, #282044 52%, #111425 100%);
}
body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) .tryva-story-showcase-cover {
  position: absolute !important;
  z-index: -2 !important;
  inset: 0 !important;
  
  
  object-fit: cover !important;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .3s ease !important;
}
body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) .tryva-story-showcase-card:hover .tryva-story-showcase-cover {
  transform: scale(1.035) !important;
  filter: saturate(1.06) !important;
}
.tryva-public-story-loading,
.tryva-public-story-empty {
  grid-column: 1 / -1;
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(191, 168, 255, .10);
  border-radius: 17px;
  background: rgba(14, 13, 27, .42);
  color: #9f97af;
  font-size: 12px;
}
.tryva-public-story-empty {
  flex-direction: column;
  text-align: center;
}
.tryva-public-story-empty strong { color: #c8c0d5; font-size: 13px; }
.tryva-public-story-empty span { color: #777082; }
.tryva-public-story-empty button {
  padding: 7px 11px;
  border: 1px solid rgba(157, 126, 255, .28);
  border-radius: 9px;
  background: rgba(132, 91, 255, .12);
  color: #cbbaff;
  cursor: pointer;
}

.explore-story-grid {
  
  
  
  
  padding-bottom: 32px;
}
.explore-story-card {
  appearance: none;
  position: relative;
  display: grid;
  min-width: 0;
  width: var(--tryva-card-w, 248px);
  min-width: var(--tryva-card-w, 248px);
  max-width: var(--tryva-card-w, 248px);
  height: var(--tryva-card-h, 354px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--tryva-line, rgba(255,255,255,.08));
  border-radius: 15px;
  background: #15131e;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.explore-story-card:hover,
.explore-story-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(154,107,255,.42);
  box-shadow: 0 18px 38px rgba(0,0,0,.24);
}
.explore-story-card:focus-visible {
  outline: 2px solid rgba(154,107,255,.8);
  outline-offset: 3px;
}
.explore-story-card-media {
  position: relative;
  display: block;
  height: 222px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 30%, rgba(154,107,255,.23), transparent 28%),
    linear-gradient(135deg, #1b1730, #111522);
}
.explore-story-card.type-world .explore-story-card-media {
  background:
    radial-gradient(circle at 72% 30%, rgba(70,202,183,.20), transparent 28%),
    linear-gradient(135deg, #132630, #15172b);
}
.explore-story-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(12,10,18,.72));
  pointer-events: none;
}
.explore-story-card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.explore-story-card:hover .explore-story-card-media > img { transform: scale(1.04); }
.explore-story-card-placeholder {
  display: grid;
  height: 100%;
  place-items: center;
  color: rgba(216,201,255,.56);
  font-size: 38px;
}
.explore-story-kind {
  position: absolute;
  z-index: 2;
  left: 11px;
  top: 11px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 7px;
  background: rgba(18,14,29,.66);
  color: #d6c6ff;
  font-size: 10px;
  font-weight: 750;
  backdrop-filter: blur(8px);
}
.explore-story-card.type-world .explore-story-kind { color: #b5eee5; }
.explore-story-card-copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 7px;
  padding: 14px;
}
.explore-story-card-copy > strong {
  overflow: hidden;
  color: #f2eef8;
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.explore-story-card-copy > span {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  color: #a9a1b7;
  font-size: 11.5px;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.explore-story-card-copy > small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6f6879;
  font-size: 10px;
}
.explore-story-card-copy > small b { color: #9b86cc; font-weight: 650; }
.explore-story-card-copy > small i { font-style: normal; }
.explore-public-story-loading { min-height: 354px; }

@media (max-width: 900px) {
  .explore-tabs { gap: 20px; overflow-x: auto; }
  
  .explore-story-card {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}
@media (max-width: 680px) {
  
  
  .explore-story-card { height: 270px; }
  .explore-story-card-media { height: 154px; }
}

@media (max-width: 430px) {
  
}

/* Published scenario/world cards: preserve existing widths, increase only height,
   and keep the cover visible behind a shallow readability gradient. */
body.play-active #playView .tryva-story-showcase-card {
  
  padding: 17px 19px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
body.play-active #playView .tryva-story-showcase-card::after {
  background: transparent !important;
}
.public-story-card-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(7,7,14,.08) 74%, rgba(7,7,14,.64) 100%);
  pointer-events: none;
}
.public-story-card-placeholder {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 72% 30%, rgba(154,107,255,.23), transparent 28%),
    linear-gradient(135deg, #1b1730, #111522);
  color: rgba(216,201,255,.56);
  font-size: 38px;
}
.type-world > .public-story-card-placeholder {
  background:
    radial-gradient(circle at 72% 30%, rgba(70,202,183,.20), transparent 28%),
    linear-gradient(135deg, #132630, #15172b);
}
body.play-active #playView .tryva-story-showcase-card .public-story-card-copy {
  min-width: 0;
  padding-right: 80px;
}
.public-story-card-action {
  position: absolute;
  z-index: 4;
  right: 14px;
  bottom: 14px;
  min-width: 42px;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: rgba(17,14,27,.66);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.public-story-card-action:hover,
.public-story-card-action:focus-visible {
  border-color: rgba(193,169,255,.62);
  background: rgba(112,75,205,.78);
}
.type-world .public-story-card-action {
  border-radius: 50%;
  color: #d9fff8;
  font-size: 20px;
  line-height: 1;
}

.explore-story-card {
  display: block;
  height: calc(var(--tryva-card-h, 354px) + 26px);
  isolation: isolate;
}
.explore-story-card > .public-story-card-cover {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.explore-story-card:hover > .public-story-card-cover { transform: scale(1.035); }
.explore-story-card > .public-story-card-shade { z-index: -1; }
.explore-story-card > .public-story-card-placeholder { z-index: -2; }
.explore-story-card .public-story-card-copy {
  position: absolute;
  left: 15px;
  right: 72px;
  bottom: 16px;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.explore-story-card .public-story-card-copy > strong {
  overflow: hidden;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.explore-story-card .public-story-card-copy > span {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(244,240,250,.78);
  font-size: 11.5px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.explore-story-card .explore-story-kind {
  left: 12px;
  top: 12px;
}
.explore-story-card .public-story-card-action {
  right: 13px;
  bottom: 14px;
}

.world-character-picker-modal {
  width: min(900px, calc(100vw - 28px));
  max-height: min(780px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: #15131d;
  box-shadow: 0 28px 80px rgba(0,0,0,.48);
}
.world-character-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-height: 590px;
  padding: 18px;
  overflow: auto;
}
.world-character-picker-card {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 0 0 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: #1b1823;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.world-character-picker-card.is-selected {
  border-color: rgba(145,110,255,.76);
  box-shadow: 0 0 0 2px rgba(145,110,255,.18);
}
.world-character-picker-art {
  display: block;
  height: 190px;
  overflow: hidden;
  background: #0f0e15;
}
.world-character-picker-art img { width: 100%; height: 100%; object-fit: cover; }
.world-character-picker-art > span { display: grid; height: 100%; place-items: center; font-size: 34px; color: #a99bc1; }
.world-character-picker-card > span:nth-child(2) { display: grid; gap: 3px; padding: 0 11px; }
.world-character-picker-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.world-character-picker-card small { overflow: hidden; color: #9991a6; text-overflow: ellipsis; white-space: nowrap; }
.world-character-picker-card > b {
  position: absolute;
  right: 9px;
  top: 9px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: rgba(16,13,24,.72);
  color: #fff;
}
.world-character-picker-card.is-selected > b { background: #7856d8; }
.world-character-picker-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.world-character-picker-actions span { color: #9d95a9; font-size: 12px; }
.story-start-slot-fixed { grid-template-columns: minmax(130px,.7fr) minmax(180px,1fr); }
.story-start-fixed-role { display: grid; align-content: center; gap: 5px; }
.story-start-fixed-role span { color: #8e8799; font-size: 10px; }
.story-start-fixed-role strong { color: #e9e4ef; font-size: 13px; }
.selected-pill-fixed,
.detail-selected-chip-fixed { cursor: default; }

@media (max-width: 760px) {
  .world-character-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explore-story-card { height: 296px; }
}

/* Explore and Library are two views over the same card collections. Keep
   their collection box model identical so responsive card geometry cannot
   drift when a Library-specific legacy rule changes. */
html body.all-characters-active #allCharactersView #allCharacterGrid.tryva-card-collection--character,
html body.library-active #libraryView #libraryGrid.tryva-card-collection--character {
  padding: 14px 0 28px !important;
}

html body.all-characters-active #allCharactersView #exploreStoryGrid.tryva-card-collection--story,
html body.library-active #libraryView #libraryGrid.tryva-card-collection--story {
  padding: 0 0 32px !important;
}

@media (min-width: 681px) and (max-width: 900px) {
  html body.all-characters-active #allCharactersView #allCharacterGrid.tryva-card-collection--character,
  html body.library-active #libraryView #libraryGrid.tryva-card-collection--character {
    padding: 12px 0 22px !important;
  }
}

/* Scenario/world card parity: one visual contract across Home, Explore,
   Library and Story. Each surface keeps its existing width and column count. */
.tryva-unified-story-card {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 17px !important;
  background: #15131e !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 38px rgba(1,1,9,.22) !important;
  color: #fff !important;
  text-align: left !important;
  cursor: pointer !important;
}

.tryva-unified-story-card::before,
.tryva-unified-story-card::after {
  display: none !important;
  content: none !important;
}

.tryva-unified-story-card .tryva-unified-story-card-cover {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .28s ease !important;
}

.tryva-unified-story-card:hover .tryva-unified-story-card-cover,
.tryva-unified-story-card:focus-visible .tryva-unified-story-card-cover {
  transform: scale(1.035) !important;
  filter: saturate(1.05) !important;
}

.tryva-unified-story-card .tryva-unified-story-card-placeholder {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 72% 28%, rgba(154,107,255,.25), transparent 29%),
    linear-gradient(135deg, #1b1730, #111522) !important;
  color: rgba(223,210,255,.56) !important;
  font-size: 42px !important;
}

.tryva-unified-story-card.type-world .tryva-unified-story-card-placeholder {
  background:
    radial-gradient(circle at 72% 28%, rgba(70,202,183,.22), transparent 29%),
    linear-gradient(135deg, #132630, #15172b) !important;
  color: rgba(202,246,239,.58) !important;
}

.tryva-unified-story-card .tryva-unified-story-card-shade {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 58%,
    rgba(7,7,14,.05) 70%,
    rgba(7,7,14,.43) 88%,
    rgba(7,7,14,.66) 100%
  ) !important;
  pointer-events: none !important;
}

.tryva-unified-story-card .tryva-unified-story-card-kind,
.tryva-unified-story-card .tryva-unified-story-card-status {
  position: absolute !important;
  z-index: 3 !important;
  top: 14px !important;
  display: inline-flex !important;
  min-height: 26px !important;
  align-items: center !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 8px !important;
  background: rgba(17,14,27,.58) !important;
  color: #e3d7ff !important;
  font-size: 10px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  backdrop-filter: blur(8px) !important;
}

.tryva-unified-story-card .tryva-unified-story-card-kind {
  left: 14px !important;
}

.tryva-unified-story-card.type-world .tryva-unified-story-card-kind {
  color: #d1fff7 !important;
}

.tryva-unified-story-card .tryva-unified-story-card-status {
  right: 14px !important;
  color: rgba(255,255,255,.82) !important;
}

.tryva-unified-story-card .tryva-unified-story-card-copy {
  position: absolute !important;
  z-index: 3 !important;
  left: 16px !important;
  right: 88px !important;
  bottom: 16px !important;
  display: grid !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  gap: 6px !important;
  padding: 0 !important;
}

.tryva-unified-story-card .tryva-unified-story-card-copy :is(h3, strong) {
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: rgba(255,255,255,.98) !important;
  font-size: 19px !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tryva-unified-story-card .tryva-unified-story-card-copy :is(p, span:not(.catalog-card-status-badge)) {
  display: -webkit-box !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: rgba(244,240,250,.78) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.tryva-unified-story-card .tryva-unified-story-card-copy small {
  overflow: hidden !important;
  color: rgba(224,216,235,.56) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tryva-unified-story-card :is(.public-story-card-action, .tryva-unified-story-card-action) {
  position: absolute !important;
  z-index: 4 !important;
  right: 14px !important;
  bottom: 14px !important;
  min-width: 44px !important;
  min-height: 36px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255,255,255,.23) !important;
  border-radius: 10px !important;
  background: rgba(17,14,27,.64) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
}

.tryva-unified-story-card :is(.public-story-card-action, .tryva-unified-story-card-action):hover,
.tryva-unified-story-card :is(.public-story-card-action, .tryva-unified-story-card-action):focus-visible {
  border-color: rgba(193,169,255,.65) !important;
  background: rgba(112,75,205,.82) !important;
}

.tryva-unified-story-card.type-world .public-story-card-action {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  color: #d9fff8 !important;
  font-size: 20px !important;
}

/* Home keeps its current three-column width and gains a visibly taller scene. */
body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card {
  display: block !important;






  padding: 0 !important;
  align-items: initial !important;
}

body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card::before,
body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card::after {
  display: none !important;
  content: none !important;
}

body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card .tryva-unified-story-card-cover {
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
}

body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card:hover .tryva-unified-story-card-cover,
body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card:focus-visible .tryva-unified-story-card-cover {
  transform: scale(1.035) !important;
}

body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card .tryva-unified-story-card-shade {
  z-index: 1 !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 58%,
    rgba(7,7,14,.05) 70%,
    rgba(7,7,14,.43) 88%,
    rgba(7,7,14,.66) 100%
  ) !important;
}

body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card .tryva-unified-story-card-kind {
  left: 14px !important;
  top: 14px !important;
}

body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card .tryva-unified-story-card-copy {
  position: absolute !important;
  z-index: 3 !important;
  left: 16px !important;
  right: 88px !important;
  bottom: 16px !important;
  display: grid !important;
  width: auto !important;
  height: auto !important;
  gap: 6px !important;
  padding: 0 !important;
}

body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card .tryva-unified-story-card-copy h3 {
  margin: 0 !important;
  font-size: 19px !important;
  line-height: 1.15 !important;
}

body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card .tryva-unified-story-card-copy p {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(244,240,250,.78) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* Explore keeps the existing catalog-card width. */


/* Library keeps its existing grid/column contract; only scenario and world
   cards adopt the shared full-cover appearance. */
body.library-active #libraryView > #libraryGrid.library-grid > .library-story-card.tryva-unified-story-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--tryva-card-h, 354px) !important;
  min-height: var(--tryva-card-h, 354px) !important;
  max-height: var(--tryva-card-h, 354px) !important;
}

body.library-active #libraryView > #libraryGrid.library-grid > .library-story-card.tryva-unified-story-card:hover,
body.library-active #libraryView > #libraryGrid.library-grid > .library-story-card.tryva-unified-story-card:focus-visible {
  transform: translateY(-3px) !important;
}

/* Story keeps the current auto-fill widths and uses the same 354px scene card. */
#storyScenarioGrid > .story-scenario-card.tryva-unified-story-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--tryva-card-h, 354px) !important;
  min-height: var(--tryva-card-h, 354px) !important;
  max-height: var(--tryva-card-h, 354px) !important;
}

#storyScenarioGrid > .story-scenario-card.tryva-unified-story-card:hover,
#storyScenarioGrid > .story-scenario-card.tryva-unified-story-card:focus-visible,
#storyScenarioGrid > .story-scenario-card.tryva-unified-story-card.is-selected {
  transform: translateY(-3px) !important;
  border-color: rgba(154,107,255,.48) !important;
  background: #15131e !important;
}

@media (max-width: 680px) {


}

/* Scenario/world cards — one rendered geometry for every surface.
   Containers keep their existing columns and widths; the card itself no
   longer accepts Home/Explore/Library/Story-specific visual overrides. */
:root {
  /* One logical scenario/world card box. Public grids keep responsive columns;
     create and quick-edit previews inherit this same box directly. */
  --tryva-story-card-width: 378px;
  --tryva-story-card-height: 302px;
  --tryva-story-card-radius: 14px;
  --tryva-story-card-aspect-ratio: 378 / 302;
  --tryva-story-grid-gap: 18px;
}

.tryva-unified-story-card,
html body.play-active #playView :is(#homeStoryShowcase, #homeWorldShowcase) > .tryva-unified-story-card,
html body.all-characters-active #allCharactersView #exploreStoryGrid > .tryva-unified-story-card,
html body.library-active #libraryView > #libraryGrid.library-grid > .tryva-unified-story-card,
html body.story-active #storyView #storyScenarioGrid > .tryva-unified-story-card {
  appearance: none !important;
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--tryva-story-card-height) !important;
  min-height: var(--tryva-story-card-height) !important;
  max-height: var(--tryva-story-card-height) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--tryva-story-card-radius) !important;
  background: #15131e !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 38px rgba(1,1,9,.22) !important;
  color: #fff !important;
  text-align: left !important;
  cursor: pointer !important;
  transform: none !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

.tryva-unified-story-card:hover,
.tryva-unified-story-card:focus-visible {
  border-color: rgba(179,145,255,.42) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 20px 44px rgba(1,1,9,.30), 0 0 0 1px rgba(137,95,255,.08) !important;
  transform: translateY(-3px) !important;
}

.tryva-unified-story-card.is-selected {
  border-color: rgba(154,107,255,.62) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 20px 44px rgba(1,1,9,.30), 0 0 0 2px rgba(137,95,255,.18) !important;
}

.tryva-unified-story-card .tryva-unified-story-card-cover,
.tryva-unified-story-card .tryva-unified-story-card-placeholder {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

.tryva-unified-story-card .tryva-unified-story-card-cover {
  transform: none !important;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .28s ease !important;
}

.tryva-unified-story-card:hover .tryva-unified-story-card-cover,
.tryva-unified-story-card:focus-visible .tryva-unified-story-card-cover {
  filter: saturate(1.05) !important;
  transform: scale(1.035) !important;
}

.tryva-unified-story-card .tryva-unified-story-card-placeholder {
  display: grid !important;
  place-items: center !important;
}

.tryva-unified-story-card .tryva-unified-story-card-shade {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 58%,
    rgba(7,7,14,.05) 70%,
    rgba(7,7,14,.43) 88%,
    rgba(7,7,14,.66) 100%
  ) !important;
  pointer-events: none !important;
}

.tryva-unified-story-card .tryva-unified-story-card-kind,
.tryva-unified-story-card .tryva-unified-story-card-status {
  position: absolute !important;
  z-index: 3 !important;
  top: 14px !important;
  display: inline-flex !important;
  min-height: 26px !important;
  align-items: center !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 8px !important;
  background: rgba(17,14,27,.58) !important;
  font-size: 10px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  backdrop-filter: blur(8px) !important;
}

.tryva-unified-story-card .tryva-unified-story-card-kind {
  left: 14px !important;
}

.tryva-unified-story-card .tryva-unified-story-card-status {
  right: 14px !important;
}

.tryva-unified-story-card .tryva-unified-story-card-copy {
  position: absolute !important;
  z-index: 3 !important;
  left: 16px !important;
  right: 88px !important;
  bottom: 16px !important;
  display: grid !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  gap: 6px !important;
  padding: 0 !important;
}

.tryva-unified-story-card .tryva-unified-story-card-copy h3 {
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: rgba(255,255,255,.98) !important;
  font-size: 19px !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tryva-unified-story-card .tryva-unified-story-card-copy p {
  display: -webkit-box !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: rgba(244,240,250,.78) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.tryva-unified-story-card .tryva-unified-story-card-action {
  position: absolute !important;
  z-index: 4 !important;
  right: 14px !important;
  bottom: 14px !important;
  min-width: 44px !important;
  min-height: 36px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255,255,255,.23) !important;
  border-radius: 10px !important;
  background: rgba(17,14,27,.64) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
}

/* 세계관 카드는 캐릭터 카드와 같은 +/− 어포던스를 쓴다. 라벨이 기호 하나뿐이라
   정사각에 가깝게 잡고 글자를 키운다. */
.tryva-unified-story-card .tryva-unified-story-card-action.tryva-unified-story-card-action-add {
  min-width: 36px !important;
  padding: 8px 10px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

/* 선택 트레이의 세계관 칩. 캐릭터 칩과 나란히 서되 앞자리라는 게 보이도록
   보라 계열로 구분한다. */
.selected-pill.selected-pill-world {
  gap: 7px;
  border: 1px solid rgba(139, 109, 255, .46);
  background: rgba(60, 44, 104, .72);
}
.selected-pill.selected-pill-world .selected-pill-world-tag {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(139, 109, 255, .28);
  color: #cdbcff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
}
.detail-selected-chip.detail-selected-chip-world {
  border: 1px solid rgba(139, 109, 255, .46);
  background: rgba(60, 44, 104, .72);
}
.detail-selected-chip.detail-selected-chip-world > span {
  background: rgba(139, 109, 255, .32);
  color: #cdbcff;
}

/* Scenario/world layout parity: Home is the single visual source.
   The other story-only surfaces use Home's four-column rail and spacing;
   the mixed Library/character grids keep their character-card layout. */




@media (max-width: 680px) {

}

@media (min-width: 681px) and (max-width: 900px) {
  :root { --tryva-story-surface-gap: 14px; }

}

/* Library uses the Explore tab shell and the same final card contracts.
   Only management actions differ; card markup, geometry and copy styling do not. */
body.library-active #libraryView.library-view {
  padding: 0 clamp(30px, 3.5vw, 54px) var(--tryva-active-tray-clearance, 0px) !important;
}

body.library-active #libraryView > .library-explore-head {
  display: block !important;
  margin: 0 0 4px !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.library-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

body.library-active #libraryView .library-title-row > .explore-title {
  margin: 6px 0 22px !important;
}

body.library-active #libraryView .library-create-button {
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid rgba(154,107,255,.24);
  border-radius: 10px;
  background: rgba(124,77,255,.10);
  color: #d7caff;
  font-size: 12px;
  font-weight: 720;
}

body.library-active #libraryView > .library-explore-head > .library-tabs {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body.library-active #libraryView > #libraryGrid.library-grid {





  margin: 0 !important;
  padding: 28px 0 28px !important;

}

/* Library Explorer: one shared folder surface for characters, scenarios and
   worlds.  Source cards keep their normal card contracts beneath this row. */
.library-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.library-active #libraryView .library-new-folder-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(154, 107, 255, .24);
  border-radius: 10px;
  background: rgba(124, 77, 255, .08);
  color: #d9cefb;
  font-size: 12px;
  font-weight: 720;
}

body.library-active #libraryView .library-new-folder-button:hover,
body.library-active #libraryView .library-new-folder-button:focus-visible {
  border-color: rgba(174, 137, 255, .5);
  background: rgba(124, 77, 255, .17);
  outline: none;
}

body.library-active #libraryView .library-new-folder-button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.library-new-folder-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.library-explorer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  margin-top: 8px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(225, 216, 255, .1);
}

.library-breadcrumbs {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.library-breadcrumbs::-webkit-scrollbar { display: none; }

.library-breadcrumbs > span {
  flex: 0 0 auto;
  color: rgba(221, 212, 245, .38);
  font-size: 16px;
}

.library-breadcrumbs > button {
  flex: 0 0 auto;
  max-width: 220px;
  min-height: 30px;
  padding: 5px 9px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: rgba(232, 226, 248, .7);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-breadcrumbs > button:hover,
.library-breadcrumbs > button:focus-visible,
.library-breadcrumbs > button[aria-current="page"] {
  border-color: rgba(154, 107, 255, .2);
  background: rgba(154, 107, 255, .09);
  color: #f0eaff;
  outline: none;
}

.library-breadcrumbs > button.is-library-drop-target {
  border-color: rgba(172, 139, 255, .82);
  background: rgba(124, 77, 255, .24);
  box-shadow: 0 0 0 2px rgba(124, 77, 255, .14);
}

.library-explorer-hint {
  flex: 0 0 auto;
  color: rgba(213, 205, 233, .46);
  font-size: 11px;
}

body.library-active #libraryView #libraryGrid > .library-folder-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 148px));
  align-items: start;
  justify-content: start;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(225, 216, 255, .08);
}

.library-folder-tile {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  width: 148px;
  min-width: 0;
  min-height: 74px;
  padding: 11px 10px;
  overflow: hidden;
  border: 1px solid rgba(225, 216, 255, .11);
  border-radius: 11px;
  background: #19161f;
  color: #eee9fb;
  cursor: default;
  user-select: none;
  transition: border-color .12s ease, background-color .12s ease;
}

.library-folder-tile:hover,
.library-folder-tile:focus-visible,
.library-folder-tile.is-library-selected {
  border-color: rgba(163, 127, 255, .52);
  background: #24202e;
  box-shadow: none;
  outline: none;
}

.library-folder-tile:active { background-color: #2b2536; }

.library-folder-icon {
  grid-row: 1 / 3;
  width: 44px;
  height: 38px;
  color: #b79bff;
}

.library-folder-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: rgba(124, 77, 255, .28);
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.library-folder-tile > strong,
.library-folder-tile > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-folder-tile > strong {
  align-self: end;
  font-size: 12px;
  line-height: 1.35;
}

.library-folder-tile > small {
  align-self: start;
  color: rgba(216, 207, 238, .47);
  font-size: 10px;
  line-height: 1.4;
}

.library-folder-tile.is-library-drop-target {
  border-color: rgba(188, 162, 255, .88) !important;
  background-color: rgba(124, 77, 255, .12) !important;
  box-shadow: none !important;
}

[data-library-node].is-library-dragging {
  opacity: .46;

}

.library-context-menu {
  position: fixed;
  z-index: 1600;
  display: grid;
  width: 170px;
  padding: 6px;
  border: 1px solid rgba(225, 216, 255, .16);
  border-radius: 10px;
  background: rgba(18, 15, 28, .98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .48);
  backdrop-filter: blur(16px);
}

.library-context-menu > button {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #e8e2f6;
  font: inherit;
  font-size: 12px;
  text-align: left;
}

.library-context-menu > button:hover,
.library-context-menu > button:focus-visible {
  background: rgba(154, 107, 255, .13);
  outline: none;
}

.library-context-menu > button.is-danger { color: #ff9eaa; }
.library-context-menu > button.is-danger:hover,
.library-context-menu > button.is-danger:focus-visible { background: rgba(211, 58, 77, .14); }

@media (min-width: 1600px) {

}

@media (min-width: 1280px) and (max-width: 1599px) {

}

@media (min-width: 901px) and (max-width: 1279px) {

}



@media (max-width: 900px) {
  body.library-active #libraryView.library-view {
    padding-right: var(--tryva-mobile-gutter, 14px) !important;
    padding-left: var(--tryva-mobile-gutter, 14px) !important;
  }
  .library-explorer-hint { display: none; }
  body.library-active #libraryView #libraryGrid > .library-folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 132px));
  }
  .library-folder-tile { width: 132px; }
}


/* Scenario/world split media is resolved last so later shared-card rules
   cannot reset the saved crop transform. */
html .tryva-unified-story-card > .tryva-unified-story-card-cover.tryva-cover-media,
html .tryva-unified-story-card:hover > .tryva-unified-story-card-cover.tryva-cover-media,
html .tryva-unified-story-card:focus-visible > .tryva-unified-story-card-cover.tryva-cover-media,
html body.story-asset-detail-active .story-detail-art > .story-detail-cover.tryva-cover-media,
html .tryva-story-detail-preview-clone .story-detail-art > .story-detail-cover.tryva-cover-media {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-cover-width, 100%) !important;
  height: var(--tryva-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
}

/* Scenario/world quick media editors use the actual story surfaces.
   The card editor uses one fixed story-card geometry on every entry path instead
   of inheriting either a page column width or the character-card 248x354 frame. */
html .card-image-editor-modal.story-asset-card-image-editor .tryva-shared-card-editor-viewport,
html .card-image-editor-modal.story-asset-card-image-editor .tryva-shared-card-editor-viewport:hover,
html .card-image-editor-modal.story-asset-card-image-editor .tryva-shared-card-editor-viewport:focus,
html .card-image-editor-modal.story-asset-card-image-editor .tryva-shared-card-editor-viewport:focus-within,
html .card-image-editor-modal.story-asset-card-image-editor #cropDragFrame,
html .card-image-editor-modal.story-asset-card-image-editor #cropDragFrame:hover,
html .card-image-editor-modal.story-asset-card-image-editor #cropDragFrame:focus-within {
  width: var(--tryva-story-editor-card-w, var(--tryva-story-card-width)) !important;
  min-width: var(--tryva-story-editor-card-w, var(--tryva-story-card-width)) !important;
  max-width: var(--tryva-story-editor-card-w, var(--tryva-story-card-width)) !important;
  height: var(--tryva-story-editor-card-h, var(--tryva-story-card-height)) !important;
  min-height: var(--tryva-story-editor-card-h, var(--tryva-story-card-height)) !important;
  max-height: var(--tryva-story-editor-card-h, var(--tryva-story-card-height)) !important;
  aspect-ratio: auto !important;
  border-radius: var(--tryva-story-editor-card-radius, var(--tryva-story-card-radius)) !important;
}

html .card-image-editor-modal.story-asset-card-image-editor #cropDragFrame > .tryva-unified-story-card {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  border-radius: inherit !important;
}

/* Scenario/world public details and their media editor previews fade into the
   same warm-black base used by Home instead of a separate blue-black slab. */
html body.story-asset-detail-active #storyAssetDetailView .story-detail-art-shade,
html .tryva-story-detail-preview-context .tryva-story-detail-preview-clone .story-detail-art-shade {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background:
    linear-gradient(90deg, rgba(8, 10, 14, .80) 0%, rgba(8, 10, 14, .34) 38%, transparent 72%),
    linear-gradient(180deg,
      transparent 30%,
      rgba(12, 12, 17, .02) 44%,
      rgba(12, 12, 17, .08) 57%,
      rgba(12, 12, 17, .18) 68%,
      rgba(12, 12, 17, .34) 78%,
      rgba(12, 12, 17, .54) 87%,
      rgba(12, 12, 17, .78) 94%,
      var(--tryva-app-ground, #0c0c11) 100%) !important;
  pointer-events: none !important;
}

/* Story creator wrapper only switches scenario/world visibility.
   It must not paint an extra panel behind the real card/detail editors. */
.story-creator-media-tools {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.story-creator-media-tools.hidden {
  display: none !important;
}

.story-creator-media-menu.character-media-menu {
  position: static;
  z-index: auto;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 15px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.story-creator-media-menu.character-media-menu > button {
  min-width: 0;
}

@media (max-width: 720px) {
  .story-creator-media-menu.character-media-menu {
    grid-template-columns: 1fr;
  }
}


/* =================================================================
   TRYVA v5.34.63 · scenario/world creator inline media placement
   The interaction contract mirrors character creation. The rendered card
   remains the real scenario/world card, never the character-card surface.
================================================================= */
.story-creator-inline-media-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 30px !important;
  margin-top: 4px !important;
}

.story-creator-inline-media-card {
  min-width: 0 !important;
  padding: 22px !important;
}

.story-creator-inline-media-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

.story-creator-inline-media-actions > .primary-button {
  width: 100% !important;
}

.story-creator-inline-media-actions > small {
  grid-column: 1 / -1 !important;
  min-height: 18px !important;
  color: rgba(219, 214, 230, .62) !important;
  font-size: 11px !important;
}

.story-creator-card-editor-stage {
  width: 100% !important;
  margin: 18px 0 0 !important;
}

.story-creator-card-editor-viewport {
  /* 캐릭터 카드 편집(#profileCropFrame)과 같은 규격. 뒤에 깔리는 편집 판이
     화면마다 다른 너비로 보이지 않게 맞춘다. */
  width: min(100%, var(--tryva-story-card-width)) !important;
  height: var(--tryva-story-card-height) !important;
  max-height: var(--tryva-story-card-height) !important;
  aspect-ratio: var(--tryva-story-card-aspect-ratio) !important;
  margin: 16px auto 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--tryva-story-card-radius) !important;
  background: #15131e !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.30) !important;
  outline: none !important;
  touch-action: none !important;
}

.story-creator-card-editor-viewport:focus,
.story-creator-card-editor-viewport:focus-within {
  border-color: rgba(179,145,255,.48) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.34), 0 0 0 2px rgba(137,95,255,.16) !important;
}

.story-creator-card-crop-frame,
.story-creator-card-crop-frame > .tryva-unified-story-card {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border-radius: inherit !important;
}

.story-creator-card-crop-frame > .tryva-unified-story-card,
.story-creator-card-crop-frame > .tryva-unified-story-card:hover,
.story-creator-card-crop-frame > .tryva-unified-story-card:focus-visible {
  cursor: grab !important;
  transform: none !important;
}

.story-creator-card-crop-frame > .tryva-unified-story-card.dragging {
  cursor: grabbing !important;
}

.story-creator-card-crop-frame > .tryva-unified-story-card > .tryva-unified-story-card-cover.tryva-cover-media,
.story-creator-card-crop-frame > .tryva-unified-story-card:hover > .tryva-unified-story-card-cover.tryva-cover-media,
.story-creator-card-crop-frame > .tryva-unified-story-card:focus-visible > .tryva-unified-story-card-cover.tryva-cover-media {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--tryva-cover-width, 100%) !important;
  height: var(--tryva-cover-height, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center !important;
  filter: none !important;
  transform: var(--tryva-cover-transform, translate(-50%, -50%)) !important;
  transform-origin: center center !important;
  transition: none !important;
  pointer-events: none !important;
  user-select: none !important;
}

.story-creator-inline-crop-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 14px 0 0 !important;
}

.story-creator-inline-crop-tools > button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 0 12px !important;
}

.story-creator-inline-crop-tools > strong {
  min-width: 56px !important;
  color: #b891ff !important;
  font-size: 12px !important;
  text-align: center !important;
}

@media (max-width: 720px) {
  .story-creator-inline-media-card {
    padding: 16px !important;
  }
  .story-creator-inline-media-actions {
    grid-template-columns: 1fr 1fr !important;
  }
  .story-creator-inline-media-actions > .primary-button,
  .story-creator-inline-media-actions > small {
    grid-column: 1 / -1 !important;
  }
  .story-creator-card-editor-stage {
    padding: 12px !important;
  }
  .story-creator-inline-crop-tools {
    flex-wrap: wrap !important;
  }
}


/* v5.34.66 — scenario/world image placement parity and stable quick editing. */
.story-creator-card-editor-stage {
  display: grid !important;
  place-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.story-creator-card-editor-viewport,
.story-creator-card-editor-viewport:hover,
.story-creator-card-editor-viewport:focus,
.story-creator-card-editor-viewport:focus-within {
  width: min(var(--tryva-story-card-width), 100%) !important;
  height: var(--tryva-story-card-height) !important;
  min-height: var(--tryva-story-card-height) !important;
  max-height: var(--tryva-story-card-height) !important;
  aspect-ratio: var(--tryva-story-card-aspect-ratio) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: var(--tryva-story-card-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  touch-action: none !important;
}

@media (max-width: 720px) {
  .story-creator-card-editor-viewport,
  .story-creator-card-editor-viewport:hover,
  .story-creator-card-editor-viewport:focus,
  .story-creator-card-editor-viewport:focus-within {
    width: min(var(--tryva-story-card-width), 86vw) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--tryva-story-card-aspect-ratio) !important;
  }
}

.card-image-editor-modal.story-asset-card-image-editor .tryva-unified-story-card-cover,
.card-image-editor-modal.story-asset-card-image-editor .tryva-cover-media{
  animation: none !important;
  transition: none !important;
}

.crop-tool-row.simple-media-controls,
.story-creator-inline-crop-tools,
.cw-crop-tools.crop-tool-row.simple-media-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.crop-tool-row.simple-media-controls > strong,
.story-creator-inline-crop-tools > strong,
.cw-crop-tools.crop-tool-row.simple-media-controls > strong {
  min-width: 56px !important;
  color: #b891ff !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* v5.34.68 Living Canon phase 1 */
#storyAssetCreateForm .story-world-description-count {
  justify-self: end;
  color: #858094;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
#storyAssetCreateForm .story-world-description-count.over-limit {
  color: #e7899e;
  font-weight: 700;
}
#storyAssetCreateForm .story-canon-compile-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(154, 105, 255, .16);
  border-radius: 13px;
  background: rgba(112, 78, 190, .045);
}
#storyAssetCreateForm .story-canon-compile-panel > div:first-child {
  display: grid;
  gap: 4px;
}
#storyAssetCreateForm .story-canon-compile-panel strong {
  color: #e4ddef;
  font-size: 13px;
}
#storyAssetCreateForm .story-canon-compile-panel p,
#storyAssetCreateForm .story-canon-compile-panel small {
  margin: 0;
  color: #91899f;
  font-size: 11px;
  line-height: 1.5;
}
#storyAssetCreateForm .world-canon-compile-result {
  grid-column: 1 / -1;
  min-height: 20px;
}
#storyAssetCreateForm .world-canon-compile-result .validation-ok { color: #9fd5b5; }
#storyAssetCreateForm .world-canon-compile-result .validation-warning { color: #d6b36b; }
#storyAssetCreateForm .world-canon-compile-result .validation-error { color: #e7899e; }
@media (max-width: 700px) {
  #storyAssetCreateForm .story-canon-compile-panel { grid-template-columns: 1fr; }
  #storyAssetCreateForm .story-canon-compile-panel > button { width: 100%; }
  #storyAssetCreateForm .world-canon-compile-result { grid-column: 1; }
}

/* v5.34.72.17 — one media-editor shell across character/world/scenario.
   Target-specific card/detail previews remain intact. Crop coordinates,
   zoom/pan controls and persisted placement fields are deliberately untouched. */
body.story-asset-create-active #storyAssetCreateView .story-creator-media-intro {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 16px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(151,112,230,.16) !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(86,57,151,.12), rgba(22,19,31,.72)) !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-media-intro strong {
  display: block !important;
  margin-bottom: 3px !important;
  color: #eae4f4 !important;
  font-size: 13px !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-media-intro p {
  margin: 0 !important;
  color: rgba(180,171,195,.72) !important;
  font-size: 11px !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 18px !important;
  width: 100% !important;
  margin-top: 0 !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-card {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 16px !important;
  overflow: hidden !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-card .cw-image-card-head h3,
body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-card .cw-image-card-head p {
  margin: 0 !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-card .cw-image-card-head h3 {
  margin-bottom: 4px !important;
  color: #eceaf3 !important;
  font-size: 15px !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-card .cw-image-card-head p {
  color: #7d8397 !important;
  font-size: 11px !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-actions > button {
  min-height: 40px !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-actions > .primary-button {
  width: 100% !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-actions > small {
  grid-column: 1 / -1 !important;
  min-height: 17px !important;
  overflow: hidden !important;
  color: rgba(181,171,197,.68) !important;
  font-size: 10px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-card-editor-stage {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 14px 0 0 !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-card-editor-viewport {
  box-sizing: border-box !important;
  max-width: 100% !important;
}
body.story-asset-create-active #storyAssetCreateView .story-creator-card-crop-frame {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .cw-empty-placement {
  display: grid !important;
  max-width: 310px !important;
  justify-items: center !important;
  gap: 8px !important;
  text-align: center !important;
  pointer-events: none !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .cw-empty-placement > span {
  display: grid !important;
  width: 52px !important;
  height: 52px !important;
  place-items: center !important;
  border: 1px solid rgba(177,143,242,.32) !important;
  border-radius: 15px !important;
  background: rgba(111,72,190,.14) !important;
  color: #b99aee !important;
  font-size: 22px !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .cw-empty-placement > strong {
  color: #e8e1f3 !important;
  font-size: 14px !important;
}
body:is(.create-active,.story-asset-create-active) :is(#createView,#storyAssetCreateView) .cw-empty-placement > p {
  margin: 0 !important;
  color: rgba(186,177,201,.68) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}
body.create-active #createView #profileCropFrame.is-empty-placement,
body.story-asset-create-active #storyAssetCreateView .story-creator-card-editor-viewport.is-empty-placement {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  padding: 24px !important;
  overflow: hidden !important;
  border: 1px dashed rgba(167,132,235,.34) !important;
  background:
    linear-gradient(rgba(21,18,29,.84),rgba(21,18,29,.84)),
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%),
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%) !important;
  background-position: 0 0,0 0,12px 12px !important;
  background-size: auto,24px 24px,24px 24px !important;
}
@media (max-width: 720px) {
  body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-actions {
    grid-template-columns: 1fr 1fr !important;
  }
  body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-actions > .primary-button,
  body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-actions > small {
    grid-column: 1 / -1 !important;
  }
}

/* v5.34.72.19 — keep the normal three-column creator frame and give the
   scenario/world media step the same full-width work area as character step 5.
   Only the detail placement card is normalized; story card shapes stay intact. */
@media (min-width: 901px) {
  body.story-asset-create-active #storyAssetCreateView.story-media-step-active .story-asset-create-main {
    grid-template-columns: 230px minmax(0, 1fr) !important;
  }
  body.story-asset-create-active #storyAssetCreateView.story-media-step-active .story-asset-create-preview {
    display: none !important;
  }
  body.story-asset-create-active #storyAssetCreateView #storyAssetCreateForm > .story-asset-step-panel[data-story-step="4"].world-editor-only,
  body.story-asset-create-active #storyAssetCreateView #storyAssetCreateForm > .story-asset-step-panel[data-story-step="5"].scenario-editor-only {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin-inline: auto !important;
  }
  body.story-asset-create-active #storyAssetCreateView.story-media-step-active .story-creator-inline-media-card[data-media-kind="card"] {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
}




@media (max-width: 900px) {
  
}

/* v5.34.72.20 — canonical creator media shells.
   Character, world and scenario mount the same detail-editor DOM and receive
   this single visual contract. Story card previews keep their own shape,
html body.story-asset-create-active #storyAssetCreateView
  .story-creator-inline-media-card[data-media-kind="card"] {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 18px !important;
  padding: 22px !important;
  overflow: hidden !important;
  contain: layout paint !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.018) !important;
  box-shadow: none !important;
}

html body.story-asset-create-active #storyAssetCreateView
  .story-creator-inline-media-card[data-media-kind="card"] > .cw-image-card-head {
  margin: 0 0 17px !important;
}

html body.story-asset-create-active #storyAssetCreateView
  .story-creator-inline-media-card[data-media-kind="card"] > .cw-image-card-head h3 {
  margin: 0 0 4px !important;
  color: #d8d2e4 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

html body.story-asset-create-active #storyAssetCreateView
  .story-creator-inline-media-card[data-media-kind="card"] > .cw-image-card-head p {
  margin: 0 !important;
  color: #8f879f !important;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
}

html body.story-asset-create-active #storyAssetCreateView
  .story-creator-inline-media-card[data-media-kind="card"] > .story-creator-inline-media-actions {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 0 14px !important;
}

html body.story-asset-create-active #storyAssetCreateView
  .story-creator-inline-media-card[data-media-kind="card"] > .story-creator-inline-media-actions > button {
  min-height: 40px !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

html body.story-asset-create-active #storyAssetCreateView
  .story-creator-inline-media-card[data-media-kind="card"] > .story-creator-inline-media-actions > .primary-button {
  width: 100% !important;
}

html body.story-asset-create-active #storyAssetCreateView
  .story-creator-inline-media-card[data-media-kind="card"] > .story-creator-inline-media-actions > small {
  grid-column: 1 / -1 !important;
  min-height: 17px !important;
  overflow: hidden !important;
  color: rgba(181,171,197,.68) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}





html body.story-asset-create-active #storyAssetCreateView .story-creator-inline-media-grid {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 18px !important;
  width: 100% !important;
}
@media (max-width: 720px) {
  
  html body.story-asset-create-active #storyAssetCreateView
    .story-creator-inline-media-card[data-media-kind="card"] {
    padding: 16px !important;
  }
  
  html body.story-asset-create-active #storyAssetCreateView
    .story-creator-inline-media-card[data-media-kind="card"] > .story-creator-inline-media-actions {
    grid-template-columns: 1fr 1fr !important;
  }
  
  html body.story-asset-create-active #storyAssetCreateView
    .story-creator-inline-media-card[data-media-kind="card"] > .story-creator-inline-media-actions > .primary-button,
  html body.story-asset-create-active #storyAssetCreateView
    .story-creator-inline-media-card[data-media-kind="card"] > .story-creator-inline-media-actions > small {
    grid-column: 1 / -1 !important;
  }
  
}

/* Final story-side specificity lock for the canonical shared editor. */
@media (min-width: 901px) {
  html body.story-asset-create-active #storyAssetCreateView #storyAssetCreateForm {
    scrollbar-gutter: stable !important;
  }
}







/* Story creator placement is the real public detail page{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  place-items: start !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  background: #0b0d12 !important;
}

/* v5.34.72.24 — one quick-edit media trigger across character, scenario and
   world details. The trigger sits in the same artwork-relative position and
   always renders above every image shade and hero seam. */
html body.detail-active .character-detail-view .detail-art > .detail-media-edit-control {
  position: absolute !important;
  z-index: 30 !important;
  top: 78px !important;
  right: 26px !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
}

html body.detail-active .character-detail-view .detail-art > .detail-media-edit-control.hidden {
  display: none !important;
}

html body.detail-active .character-detail-view .detail-art > .detail-media-edit-control > .tryva-detail-media-edit-trigger {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  box-sizing: border-box !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border: 2px solid rgba(255,255,255,.82) !important;
  border-radius: 12px !important;
  background: #090a12 !important;
  color: #c084fc !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.70) !important;
  backdrop-filter: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

html body.detail-active .character-detail-view .detail-art > .detail-media-edit-control > .tryva-detail-media-edit-trigger svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 1px 1px #000) !important;
  pointer-events: none !important;
}

html body.detail-active .character-detail-view .detail-art > .detail-media-edit-control > .tryva-detail-media-edit-trigger:hover,
html body.detail-active .character-detail-view .detail-art > .detail-media-edit-control > .tryva-detail-media-edit-trigger:focus-visible {
  border-color: rgba(214,185,255,.96) !important;
  background: #24143f !important;
  color: #e4c7ff !important;
  outline: none !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.74), 0 0 0 1px rgba(0,0,0,.70), 0 0 22px rgba(149,92,255,.34) !important;
}

@media (max-width: 900px) {
  html body.detail-active .character-detail-view .detail-art > .detail-media-edit-control {
    top: 72px !important;
    right: 18px !important;
  }
}

/* v5.34.72.25 — shared quick-edit controls, library deletion and story title/admin parity. */
html body.detail-active .character-detail-view > .detail-hero {
  position: relative !important;
}

html body.detail-active .character-detail-view > .detail-hero > #detailMediaEditControl {
  position: absolute !important;
  z-index: 30 !important;
  top: 52px !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
}
/* 설명 칸(640px) 위가 아니라 이미지 위에 놓는다. 세계관·시나리오와 같은 기준이다.
   예전에는 이 버튼이 .detail-art 안에 있어서 right:26px 이 이미지 오른쪽 끝
   기준이었다. 지금은 .detail-hero 직계 자식이므로 설명 칸 너비를 더해야
   같은 자리에 온다. */
html body.detail-active .character-detail-view > .detail-hero > #detailMediaEditControl { right: 666px !important; }
html body.detail-active .character-detail-view > .detail-hero > #detailMediaEditControl.hidden { display: none !important; }
html body.detail-active .character-detail-view > .detail-hero > #detailMediaEditControl > .tryva-detail-media-edit-trigger {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  box-sizing: border-box !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border: 2px solid rgba(255,255,255,.82) !important;
  border-radius: 12px !important;
  background: #090a12 !important;
  color: #c084fc !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.72), 0 0 0 1px rgba(0,0,0,.70) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
html body.detail-active .character-detail-view > .detail-hero > #detailMediaEditControl svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
@media (max-width: 900px) {
  html body.detail-active .character-detail-view > .detail-hero > #detailMediaEditControl {
    top: 48px !important;
    right: 18px !important;
  }
}

body.story-asset-detail-active #storyAssetDetailView > .story-detail-top-left-controls {
  z-index: 40 !important;
}
.story-detail-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.story-detail-title-row > h1 { min-width: 0 !important; }
.story-detail-title-row > .inline-edit-btn {
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}
.story-detail-title-inline-editor {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: min(100%, 560px) !important;
}
.story-detail-title-inline-editor input {
  min-width: 0 !important;
  flex: 1 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(172,128,255,.42) !important;
  border-radius: 10px !important;
  background: rgba(8,7,14,.86) !important;
  color: #fff !important;
  font: inherit !important;
}
.story-detail-title-inline-editor button {
  min-height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

body.library-active #libraryView .library-delete-toggle {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 12px !important;
}
body.library-active #libraryView .library-delete-toggle svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body.library-active #libraryView .library-delete-toggle.is-active {
  border-color: rgba(255,98,128,.55) !important;
  background: rgba(117,27,50,.34) !important;
  color: #ff8aa6 !important;
}
.library-delete-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 8px 0 0 !important;
  padding: 11px 14px !important;
  border: 1px solid rgba(255,102,134,.23) !important;
  border-radius: 12px !important;
  background: rgba(72,20,37,.20) !important;
}
.library-delete-bar.hidden { display: none !important; }
.library-delete-bar > div { display: flex !important; gap: 8px !important; }
.library-delete-bar .danger-button {
  padding: 8px 13px !important;
  border: 1px solid rgba(255,107,137,.48) !important;
  border-radius: 9px !important;
  background: rgba(155,37,65,.44) !important;
  color: #ffd7e0 !important;
}
.library-delete-selectable { position: relative !important; }
.library-delete-selector {
  position: absolute !important;
  z-index: 30 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 12px !important;
  border: 2px solid transparent !important;
  border-radius: inherit !important;
  background: rgba(7,5,12,.18) !important;
  color: #fff !important;
  cursor: pointer !important;
  text-align: right !important;
}
.library-delete-selector > span {
  display: inline-grid !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  border-radius: 50% !important;
  background: rgba(9,8,14,.72) !important;
}
.library-delete-selector.is-selected {
  border-color: rgba(255,95,132,.86) !important;
  background: rgba(118,23,48,.26) !important;
}
.library-delete-selector.is-selected > span {
  border-color: #ff8ba6 !important;
  background: #c93660 !important;
}

body.library-active #libraryGrid .tryva-unified-story-card-edit.catalog-card-edit {


  font-size: 16px !important;
  line-height: 1 !important;
  writing-mode: horizontal-tb !important;
}

.story-asset-admin-modal { width: min(520px, calc(100vw - 28px)) !important; }
.story-asset-admin-body {
  display: grid !important;
  gap: 12px !important;
  padding: 18px 22px !important;
}
.story-asset-admin-body label { display: grid !important; gap: 7px !important; }
.story-asset-admin-body select {
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  background: #15121d !important;
  color: #fff !important;
}
.story-asset-admin-body p { min-height: 18px !important; color: #ff92a9 !important; }

/* v5.34.72.25 final parity lock: story detail uses the exact character
   top-left utility group instead of leaving it in normal document flow. */
body.story-asset-detail-active #storyAssetDetailView > .story-detail-top-left-controls {
  position: absolute !important;
  z-index: 40 !important;
  left: 26px !important;
  top: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  pointer-events: auto !important;
}
body.story-asset-detail-active #storyAssetDetailView > .story-detail-top-left-controls .detail-admin-manage {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 11px !important;
  background: rgba(15,13,22,.58) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  color: rgba(245,241,251,.92) !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}
body.story-asset-detail-active #storyAssetDetailView > .story-detail-top-left-controls .detail-admin-manage {
  border-color: rgba(158,112,255,.22) !important;
  background: rgba(80,45,126,.28) !important;
  color: rgba(225,208,255,.82) !important;
}
body.story-asset-detail-active #storyAssetDetailView > .story-detail-top-left-controls .detail-admin-manage:hover {
  border-color: rgba(187,154,255,.36) !important;
  background: rgba(41,31,57,.68) !important;
  color: #fff !important;
}
@media (max-width: 900px) {
  body.story-asset-detail-active #storyAssetDetailView > .story-detail-top-left-controls {
    left: 64px !important;
    top: 12px !important;
  }
  body.story-asset-detail-active #storyAssetDetailView > .story-detail-top-left-controls .detail-admin-manage {
    height: 38px !important;
    padding: 0 11px !important;
  }
}

/* v5.34.72.27 · related character cards keep the public character-card portrait ratio */
body.detail-active .character-detail-view .related-grid > .catalog-card.detail-related-catalog-card {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 218 / 302 !important;
  align-self: start !important;
}


/* v5.34.72.28 — story official mark uses the exact character-card contract. */
.tryva-unified-story-card > .tryva-original-mark {
  position: absolute !important;
  z-index: 7 !important;
  top: -4px !important;
  left: -3px !important;
  display: block !important;
  width: min(var(--tryva-card-original-mark-width), calc(100% - 8px)) !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: none !important;
}

/* Sidebar account avatar follows the circular avatar contract used elsewhere. */
.account-avatar,
.account-avatar.has-image,
.account-avatar img {
  border-radius: 50% !important;
}


/* v5.34.72.29 unified creator text limits */
/* v5.34.72.30: character counters use the exact world/scenario/lore flow contract. */
#storyAssetCreateForm label > .cw-count.story-field-count,
#storyAssetCreateForm .story-field-count,
#createView label > .cw-count.story-field-count,
#createView .story-field-count {
  position: static !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  display: block !important;
  align-self: auto !important;
  justify-self: end !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 6px 2px 0 auto !important;
  transform: none !important;
  color: #81798f !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
#storyAssetCreateForm .cw-count.story-field-count.over-limit,
#createView .cw-count.story-field-count.over-limit {
  color: #e7899e !important;
  font-weight: 700;
}

/* v5.34.72.32: point prices are displayed directly in each model option. */

/* v5.34.72.34 · character creator voice clone */
.character-voice-card {
  display: grid;
  gap: 18px;
}

.character-voice-card-head {
  align-items: flex-start;
}

.character-voice-price-line {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
  color: var(--muted, #777);
  font-size: 12px;
}

.character-voice-price-line strong {
  color: var(--accent, #8b5cf6);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.character-voice-empty,
.character-voice-source,
.character-voice-active {
  border: 1px dashed rgba(139, 92, 246, .35);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(139, 92, 246, .065), rgba(127, 127, 127, .025));
  padding: 24px;
}

.character-voice-empty {
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
}

.character-voice-empty.hidden,
.character-voice-source.hidden,
.character-voice-active.hidden {
  display: none !important;
}

.character-voice-upload-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(139, 92, 246, .13);
  color: var(--accent, #8b5cf6);
  font-size: 25px;
  font-weight: 800;
}

.character-voice-empty > strong {
  margin-top: 2px;
  font-size: 17px;
}

.character-voice-empty > p,
.character-voice-active-head p,
.character-voice-file-copy small {
  margin: 0;
  color: var(--muted, #777);
  font-size: 13px;
  line-height: 1.55;
}

.character-voice-source,
.character-voice-active {
  display: grid;
  gap: 15px;
  border-style: solid;
}

.character-voice-file-copy {
  display: grid;
  gap: 3px;
}

.character-voice-file-copy > span {
  color: var(--muted, #777);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.character-voice-file-copy > strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-voice-audio {
  width: 100%;
  min-height: 42px;
  accent-color: var(--accent, #8b5cf6);
}

.character-voice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.character-voice-active-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.character-voice-active-head > div {
  display: grid;
  gap: 3px;
}

.character-voice-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .13);
}

.character-voice-operation-status {
  min-height: 20px;
  margin: -4px 2px 0;
  color: var(--muted, #777);
  font-size: 13px;
  line-height: 1.5;
}

.character-voice-operation-status:empty {
  display: none;
}

.character-voice-operation-status[data-kind="success"] {
  color: #15803d;
}

.character-voice-operation-status[data-kind="error"] {
  color: #dc2626;
}

.character-voice-operation-status[data-kind="working"] {
  color: var(--accent, #8b5cf6);
}

.character-voice-guide {
  margin: 0;
}

.voice-clone-consent-backdrop {
  z-index: 2600;
  padding: 24px;
  overflow: auto;
}

.voice-clone-consent-modal {
  width: min(960px, 100%);
  max-height: min(820px, calc(100dvh - 48px));
  margin: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line, rgba(127, 127, 127, .2));
  border-radius: 24px;
  background: var(--surface, #fff);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .24);
}

.voice-clone-consent-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 23px 25px 19px;
  border-bottom: 1px solid var(--line, rgba(127, 127, 127, .16));
}

.voice-clone-consent-head > div {
  display: grid;
  gap: 4px;
}

.voice-clone-consent-head span {
  color: var(--accent, #8b5cf6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}

.voice-clone-consent-head h2,
.voice-clone-consent-head p {
  margin: 0;
}

.voice-clone-consent-head h2 {
  font-size: 22px;
}

.voice-clone-consent-head p {
  color: var(--muted, #777);
  font-size: 13px;
}

.voice-clone-consent-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
}

.voice-clone-consent-list {
  min-width: 0;
  padding: 18px;
  overflow: auto;
  border-right: 1px solid var(--line, rgba(127, 127, 127, .16));
}

.voice-clone-consent-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px 13px;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

.voice-clone-consent-row + .voice-clone-consent-row {
  margin-top: 7px;
}

.voice-clone-consent-row:hover,
.voice-clone-consent-row.is-detail-active {
  border-color: rgba(139, 92, 246, .24);
  background: rgba(139, 92, 246, .06);
}

.voice-clone-consent-row input {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--accent, #8b5cf6);
}

.voice-clone-consent-row > span {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.voice-clone-consent-row em {
  flex: 0 0 auto;
  margin-top: 1px;
  border-radius: 5px;
  padding: 2px 5px;
  background: rgba(220, 38, 38, .1);
  color: #dc2626;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.voice-clone-consent-row strong {
  min-width: 0;
  font-size: 13px;
  line-height: 1.55;
}

.voice-clone-consent-row button {
  border: 0;
  padding: 5px 0 5px 8px;
  background: transparent;
  color: var(--accent, #8b5cf6);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.voice-clone-terms-detail {
  min-width: 0;
  padding: 24px;
  overflow: auto;
  background: rgba(127, 127, 127, .035);
}

.voice-clone-terms-detail > span {
  color: var(--accent, #8b5cf6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.voice-clone-terms-detail h3 {
  margin: 9px 0 12px;
  font-size: 17px;
}

.voice-clone-terms-detail p {
  margin: 0;
  color: var(--text-soft, #555);
  font-size: 13px;
  line-height: 1.85;
  white-space: pre-line;
}

.voice-clone-consent-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 24px;
  border-top: 1px solid var(--line, rgba(127, 127, 127, .16));
}

.voice-clone-consent-actions > small {
  color: var(--muted, #777);
  font-size: 12px;
  line-height: 1.45;
}

.voice-clone-consent-actions > div {
  display: flex;
  gap: 9px;
  flex: 0 0 auto;
}

body.voice-clone-consent-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .character-voice-card-head {
    gap: 12px;
  }

  .character-voice-empty,
  .character-voice-source,
  .character-voice-active {
    padding: 18px;
  }

  .character-voice-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .character-voice-actions button {
    width: 100%;
  }

  .voice-clone-consent-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .voice-clone-consent-modal {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
  }

  .voice-clone-consent-head {
    padding: 19px 18px 15px;
  }

  .voice-clone-consent-layout {
    display: block;
    overflow: auto;
  }

  .voice-clone-consent-list {
    padding: 12px;
    overflow: visible;
    border-right: 0;
  }

  .voice-clone-consent-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
  }

  .voice-clone-consent-row button {
    grid-column: 2;
    justify-self: start;
    padding-left: 0;
  }

  .voice-clone-terms-detail {
    margin: 0 12px 14px;
    padding: 18px;
    border: 1px solid var(--line, rgba(127, 127, 127, .16));
    border-radius: 14px;
  }

  .voice-clone-consent-actions {
    display: grid;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  }

  .voice-clone-consent-actions > div {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
  }
}

/* ============================================================
   음성 단계 — 디자인/클론 방식 선택과 디자인 패널
   ============================================================ */
.voice-method-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.voice-method-card {
  display: block;
  padding: 20px 18px;
  border: 1px solid var(--tryva-line);
  border-radius: 16px;
  background: var(--tryva-surface-3);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.voice-method-card:hover,
.voice-method-card:focus-visible {
  border-color: rgba(124, 92, 255, .5);
  background: rgba(124, 92, 255, .1);
  transform: translateY(-2px);
}
.voice-method-icon {
  display: block;
  margin-bottom: 10px;
  color: #a98cff;
  font-size: 22px;
}
.voice-method-card strong { display: block; margin-bottom: 6px; font-size: 16px; }
.voice-method-card p { margin: 0 0 10px; color: #aaa3bb; font-size: 13px; line-height: 1.55; }
.voice-method-card em { color: #8f87a4; font-size: 12px; font-style: normal; }

.character-voice-design-field { display: block; margin: 0 0 12px; }
.character-voice-design-field > span {
  display: block;
  margin-bottom: 7px;
  color: #cfc7e0;
  font-size: 13px;
}
.character-voice-design-field > span i {
  margin-left: 6px;
  color: #8f87a4;
  font-size: 12px;
  font-style: normal;
}
.character-voice-design-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--tryva-line);
  border-radius: 12px;
  background: var(--tryva-surface-2);
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}
.character-voice-design-field textarea.is-invalid { border-color: rgba(255, 106, 106, .6); }

.character-voice-design-translate { display: flex; gap: 10px; margin: 0 0 10px; }
.character-voice-design-translate input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--tryva-line);
  border-radius: 12px;
  background: var(--tryva-surface-2);
  color: #fff;
  font-size: 14px;
}
.character-voice-design-translate button { white-space: nowrap; }

.character-voice-design-hint { margin: 0 0 14px; color: #8f87a4; font-size: 12.5px; line-height: 1.6; }

.character-voice-design-previews { display: grid; gap: 10px; margin-top: 14px; }
.character-voice-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--tryva-line);
  border-radius: 13px;
  background: var(--tryva-surface-2);
}
.character-voice-preview-row strong { display: block; margin-bottom: 7px; font-size: 13.5px; }
.character-voice-preview-row audio { height: 34px; max-width: 260px; }

@media (max-width: 620px) {
  .character-voice-design-translate { flex-direction: column; }
  .character-voice-preview-row { flex-direction: column; align-items: stretch; }
  .character-voice-preview-row audio { max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .voice-method-card { transition: none; }
  .voice-method-card:hover, .voice-method-card:focus-visible { transform: none; }
}

/* ============================================================
   보이스 탭 · 관리자 로그 하위 탭 · 시작 모달 음성 스위치
   ============================================================ */
.insight-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--tryva-line-soft);
}
.insight-subtabs button {
  padding: 6px 12px;
  border: 1px solid var(--tryva-line-soft);
  border-radius: 9px;
  background: var(--tryva-surface-2);
  color: #a49cba;
  font-size: 12px;
}
.insight-subtabs button.active {
  border-color: transparent;
  background: rgba(124, 92, 255, .24);
  color: #d6c6ff;
}

.room-voice-block { display: grid; gap: 16px; padding: 4px 2px; }
.room-voice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.room-voice-row strong { display: block; margin-bottom: 4px; font-size: 14px; }
.room-voice-row p { margin: 0; color: #8f87a4; font-size: 12px; line-height: 1.5; }
.room-voice-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.room-voice-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.room-voice-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--tryva-surface-2);
  border: 1px solid var(--tryva-line);
  transition: background .18s ease, border-color .18s ease;
  pointer-events: none;
}
.room-voice-switch span::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8f87a4;
  transform: translateY(-50%);
  transition: transform .18s ease, background .18s ease;
}
.room-voice-switch input:checked + span { background: rgba(124, 92, 255, .34); border-color: rgba(124, 92, 255, .5); }
.room-voice-switch input:checked + span::after { transform: translate(20px, -50%); background: #d6c6ff; }
.room-voice-switch input:disabled + span { opacity: .45; }

.room-voice-field { display: block; }
.room-voice-field > span { display: block; margin-bottom: 6px; color: #cfc7e0; font-size: 13px; }
.room-voice-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tryva-line);
  border-radius: 11px;
  background: var(--tryva-surface-2);
  color: #fff;
  font-size: 13.5px;
}

.room-voice-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.room-voice-field-heading > span { color: #cfc7e0; font-size: 13px; }
.room-voice-field-heading output { color: #d9ccff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.room-voice-speed-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.room-voice-speed-control input[type="range"] {
  width: 100%; height: 24px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; accent-color: #9b7cff;
}
.room-voice-speed-control input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: linear-gradient(90deg, rgba(124, 92, 255, .28), rgba(155, 124, 255, .78)); border: 1px solid rgba(186, 164, 255, .18); }
.room-voice-speed-control input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin-top: -7px; border-radius: 50%; border: 2px solid #eee8ff; background: #9b7cff; box-shadow: 0 0 0 4px rgba(124, 92, 255, .15); }
.room-voice-speed-control input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: rgba(124, 92, 255, .45); border: 1px solid rgba(186, 164, 255, .18); }
.room-voice-speed-control input[type="range"]::-moz-range-progress { height: 5px; border-radius: 999px; background: #9b7cff; }
.room-voice-speed-control input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #eee8ff; background: #9b7cff; box-shadow: 0 0 0 4px rgba(124, 92, 255, .15); }
.room-voice-speed-control input[type="range"]:focus-visible { outline: 2px solid rgba(155, 124, 255, .55); outline-offset: 4px; border-radius: 999px; }
.room-voice-speed-reset { min-width: 44px; height: 28px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 8px; background: rgba(255, 255, 255, .035); color: #a79fba; font: inherit; font-size: 11.5px; cursor: pointer; }
.room-voice-speed-reset:hover { color: #e4dbf8; border-color: rgba(155, 124, 255, .38); background: rgba(124, 92, 255, .10); }
.room-voice-speed-scale { display: flex; justify-content: space-between; margin: 2px 54px 0 0; color: #70697f; font-size: 10.5px; line-height: 1; }
.room-voice-cast > span { display: block; margin-bottom: 6px; color: #cfc7e0; font-size: 13px; }
.room-voice-cast p { margin: 0; color: #a49cba; font-size: 13px; line-height: 1.6; }

/* 재생 로그: 최근 항목이 위로 쌓이고, 길어지면 이 블록만 스크롤한다 */
.room-voice-log { margin: 8px 0 0; padding: 0; list-style: none; max-height: 190px; overflow-y: auto; }
.room-voice-log:empty { display: none; }
.room-voice-log li { display: flex; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); color: #a49cba; font-size: 12.5px; line-height: 1.5; }
.room-voice-log li:first-child { border-top: 0; }
.room-voice-log li time { flex: 0 0 auto; color: #7d7591; font-variant-numeric: tabular-nums; }
.room-voice-log li b { flex: 0 0 auto; color: #cfc7e0; font-weight: 600; }
.room-voice-log li span { flex: 1 1 auto; }
.room-voice-log li.is-ok span { color: #86e0b0; }
.room-voice-log li.is-silent span { color: #e8b48a; }

@media (prefers-reduced-motion: reduce) {
  .room-voice-switch span, .room-voice-switch span::after { transition: none; }
}

/* 현재 보이스 카드 · 방식 되돌리기 버튼 정렬 */
.character-voice-card-head { align-items: flex-start; }
/* 헤드 우측 버튼은 제목 baseline 보다 살짝 아래에 놓아 시선이 제목에 먼저 가게 한다 */
.character-voice-card-head > button,
#charVoiceDesignBackBtn,
#charVoiceCloneBackBtn { align-self: flex-start; margin-top: 10px; }

.character-voice-current { margin: 0 0 18px; }
.character-voice-current-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.character-voice-current-head > div:first-child { display: flex; align-items: flex-start; gap: 10px; }
.character-voice-current-head strong { display: block; margin-bottom: 3px; font-size: 15px; }
.character-voice-current-head p { margin: 0; color: #8f87a4; font-size: 12.5px; line-height: 1.5; }
.character-voice-current-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: #6ee7a5;
  box-shadow: 0 0 8px rgba(110, 231, 165, .55);
}
.character-voice-current-badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(124, 92, 255, .22);
  color: #d6c6ff;
  font-size: 11.5px;
  font-weight: 700;
}
.character-voice-current-audio { width: 100%; height: 36px; margin-bottom: 12px; }
.character-voice-current-audio.hidden { display: none; }

/* Shared Home story rail geometry moved to css/styles-system.css. */

/* v5.34.72.38: standard browser links without changing card geometry. */
.character-tile,
.catalog-card,
.tryva-unified-story-card {
  position: relative !important;
  isolation: isolate !important;
}

.tryva-card-primary-link {
  position: absolute !important;
  z-index: 8 !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.tryva-card-primary-link:focus-visible {
  outline: 2px solid rgba(180, 145, 255, .92) !important;
  outline-offset: -3px !important;
}

.character-tile .tile-body,
.catalog-card .catalog-card-copy,
.catalog-card .catalog-card-hover,
.tryva-unified-story-card .tryva-unified-story-card-copy {
  z-index: 9 !important;
  pointer-events: none !important;
}

.character-tile :is(button, a.creator-byline),
.catalog-card :is(button, a.creator-byline),
.tryva-unified-story-card :is(button, a:not(.tryva-card-primary-link)) {
  position: relative;
  z-index: 10 !important;
  pointer-events: auto !important;
}

.character-tile > :is(.tile-heart, .tile-photo-edit, .tile-actions, .tile-badge, .tryva-original-mark),
.catalog-card > :is(.catalog-card-heart, .catalog-card-edit, .catalog-card-badge, .catalog-card-status-badge, .tryva-original-mark),
.tryva-unified-story-card > :is(.tryva-unified-story-card-wishlist, .tryva-unified-story-card-edit, .tryva-unified-story-card-action, .tryva-original-mark) {
  z-index: 10 !important;
}

.creator-byline:is(a) {
  color: inherit;
  text-decoration: none;
}


/* v5.34.72.39: direct routes and standard navigation links without home-first flashing. */
.route-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  background:
    radial-gradient(520px 320px at 50% 42%, rgba(119, 76, 218, .14), transparent 72%),
    #0b0912;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, visibility 150ms ease;
}
body.route-booting .route-boot-screen {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.route-boot-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #fff;
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(169, 126, 255, .34));
}
.tryva-loading-brand-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.route-boot-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(228, 219, 255, .15);
  border-top-color: rgba(228, 219, 255, .82);
  border-radius: 50%;
  animation: tryvaRouteBootSpin 760ms linear infinite;
}
body.route-booting {
  overflow: hidden !important;
}
body.route-booting > :not(.route-boot-screen) {
  visibility: hidden !important;
}
body.route-boot-ready .route-boot-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.brand-mark,
.nav-item {
  font-family: inherit;
  text-decoration: none !important;
}
@keyframes tryvaRouteBootSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .route-boot-screen { transition: none; }
  .route-boot-spinner { animation-duration: 1400ms; }
}


/* V5.34.72.44: never expose provisional character-card crop geometry.
   The frame participates in the final grid immediately, but its media remains
   invisible until JS has measured that final frame and installed the saved crop. */
html body .character-tile .tile-art > img.tryva-card-cover-media,
html body .character-tile .tile-art > video.tryva-card-cover-media,
html body .catalog-card .catalog-card-media > img.tryva-card-cover-media,
html body .catalog-card .catalog-card-media > video.tryva-card-cover-media {
  opacity: 0 !important;
  transition: filter 160ms ease !important;
}
html body .character-tile .tile-art > img.tryva-card-cover-media.is-media-ready,
html body .character-tile .tile-art > video.tryva-card-cover-media.is-media-ready,
html body .catalog-card .catalog-card-media > img.tryva-card-cover-media.is-media-ready,
html body .catalog-card .catalog-card-media > video.tryva-card-cover-media.is-media-ready {
  opacity: 1 !important;
}


/* V5.34.72.53: show a passive microphone marker on cards with an active voice.
   It shares the wishlist control's right edge and footprint, but sits one row lower. */
.tile-voice-badge,
.catalog-card-voice-badge {
  position: absolute !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(15,13,22,.62) !important;
  color: rgba(244,239,255,.96) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(10px) !important;
  pointer-events: none !important;
}
.tile-voice-badge {
  right: 12px !important;
  top: 48px !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
}
.catalog-card-voice-badge {
  right: 11px !important;
  top: 46px !important;
  width: 29px !important;
  min-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
}
.tile-voice-badge svg,
.catalog-card-voice-badge svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body.play-active #playView .tryva-home-card-carousel .character-tile .tile-voice-badge {
  right: 9px !important;
  top: 43px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
}
body.detail-active .character-detail-view .detail-related-catalog-card .catalog-card-voice-badge {
  right: 8px !important;
  top: 41px !important;
  width: 27px !important;
  min-width: 27px !important;
  height: 27px !important;
  min-height: 27px !important;
}

/* v5.34.72.57: creator-authored story presentation + real-play replay preview */
.story-presentation-card-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;margin-top:14px;padding:14px 15px;border:1px solid rgba(150,109,255,.18);border-radius:14px;background:rgba(81,49,132,.08)}
.story-presentation-card-row>div{min-width:0}.story-presentation-card-row strong{display:block;font-size:14px}.story-presentation-card-row p{margin:4px 0 0;color:var(--muted,#aaa);font-size:12px;line-height:1.5}.story-presentation-state{font-size:11px;color:var(--muted,#999);white-space:nowrap}.story-presentation-state.is-set{color:#cbb7ff}
.story-presentation-editor-backdrop{z-index:7600}.story-presentation-editor-modal{width:min(1180px,calc(100vw - 36px));height:min(820px,calc(100vh - 36px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(174,137,255,.24);border-radius:22px;background:#0d0a13;box-shadow:0 32px 100px rgba(0,0,0,.62)}
.story-presentation-editor-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:20px 22px 16px;border-bottom:1px solid rgba(255,255,255,.08)}.story-presentation-editor-head span{display:block;color:#a988ff;font-size:10px;font-weight:800;letter-spacing:.16em}.story-presentation-editor-head h2{margin:5px 0 4px;font-size:20px}.story-presentation-editor-head p{margin:0;color:#999;font-size:12px}
.story-presentation-editor-body{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(420px,1.1fr);gap:0;min-height:0;flex:1}.story-presentation-code-pane,.story-presentation-preview-pane{min-height:0;padding:18px}.story-presentation-code-pane{display:grid;grid-template-rows:auto minmax(130px,1fr) auto minmax(160px,1.25fr) auto;gap:8px;border-right:1px solid rgba(255,255,255,.07)}
.story-presentation-code-head,.story-presentation-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.story-presentation-code-head small,.story-presentation-preview-head small{color:#777;font-size:11px}.story-presentation-code-pane textarea{width:100%;min-height:0;resize:none;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#08070c;color:#eee;padding:13px 14px;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;tab-size:2}.story-presentation-code-pane textarea:focus{outline:none;border-color:rgba(163,124,255,.56);box-shadow:0 0 0 3px rgba(128,80,255,.09)}
.story-presentation-variable-help{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding-top:4px}.story-presentation-variable-help strong{font-size:11px;color:#aaa;margin-right:2px}.story-presentation-variable-help code{padding:4px 6px;border-radius:6px;background:rgba(153,110,255,.1);color:#cbb7ff;font-size:10px}
.story-presentation-preview-pane{display:flex;flex-direction:column;gap:12px}.story-presentation-preview-head>div:first-child{display:flex;flex-direction:column;gap:3px}.story-presentation-preview-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.story-presentation-preview-frame{position:relative;min-height:0;flex:1;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#05070d;box-shadow:0 18px 48px rgba(0,0,0,.28)}.story-presentation-preview-frame .chat-sprite-runtime-viewport{position:absolute;inset:0;overflow:hidden}.story-presentation-preview-frame .chat-sprite-runtime-iframe{position:absolute;left:50%;top:50%;display:block;width:1667px;height:900px;border:0;background:#05070d;transform-origin:center center;pointer-events:none}.story-presentation-preview-frame:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;background:#05070d}.story-presentation-preview-frame:fullscreen .chat-sprite-runtime-viewport{inset:0}.story-presentation-preview-frame:fullscreen .chat-sprite-runtime-iframe{pointer-events:none}
.story-presentation-editor-actions{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:14px 18px;border-top:1px solid rgba(255,255,255,.08)}
.story-presentation-runtime{position:fixed;inset:0;z-index:9000;background:transparent!important;background-color:transparent!important}.story-presentation-runtime.is-preparing{pointer-events:none}.story-presentation-runtime iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent!important;background-color:transparent!important;color-scheme:normal;opacity:0}.story-presentation-runtime iframe.is-ready{opacity:1}.story-presentation-runtime-chrome{position:absolute;z-index:2;top:max(16px,env(safe-area-inset-top));left:18px;pointer-events:none}.story-presentation-runtime-chrome span{display:inline-flex;padding:5px 8px;border-radius:7px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);color:rgba(255,255,255,.7);font-size:9px;font-weight:800;letter-spacing:.18em}.story-presentation-runtime-actions{position:absolute;z-index:3;left:50%;bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px));transform:translateX(-50%)}.story-presentation-runtime-actions button{min-width:132px;box-shadow:0 10px 35px rgba(0,0,0,.4)}.story-presentation-runtime.is-preview .story-presentation-runtime-actions{display:none!important}
@media(max-width:860px){.story-presentation-editor-modal{width:calc(100vw - 16px);height:calc(100vh - 16px);border-radius:16px}.story-presentation-editor-body{grid-template-columns:1fr;overflow:auto}.story-presentation-code-pane{min-height:520px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.story-presentation-preview-pane{min-height:420px}.story-presentation-preview-head{align-items:flex-start}.story-presentation-preview-actions{flex-wrap:wrap;justify-content:flex-end}.story-presentation-card-row{grid-template-columns:1fr auto}.story-presentation-state{grid-column:2}.story-presentation-editor-actions{grid-template-columns:auto 1fr auto auto}}

/* v5.34.72.58: story-presentation preview is the real fullscreen play stage, not a presentation-only canvas. */
body.sprite-preview-frame.story-presentation-preview-frame {
  background: #05070d;
}
body.sprite-preview-frame.story-presentation-preview-frame.stage-fullscreen .user-form {
  display: none !important;
}
body.sprite-preview-frame.story-presentation-preview-frame.stage-fullscreen .stage-reading-controls,
body.sprite-preview-frame.story-presentation-preview-frame.stage-fullscreen .stage-fullscreen-exit {
  pointer-events: none !important;
}
body.sprite-preview-frame.story-presentation-preview-frame #stageExitFullscreenBtn {
  display: inline-grid !important;
  pointer-events: none !important;
}
body.sprite-preview-frame.story-presentation-preview-frame .story-presentation-runtime {
  /* The authored presentation is only the top layer. The real VN stage stays mounted underneath. */
  background: transparent !important;
}


/* v5.34.72.61 — creator-authored scenario intro.  The editor deliberately
   exposes only concrete story controls: text, speaker, visible cast, position,
   and expression. */
.scenario-intro-section{border:1px solid rgba(155,118,255,.17);border-radius:16px;background:rgba(91,57,145,.06)}
.scenario-intro-summary-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}.scenario-intro-summary-row>div{min-width:0}.scenario-intro-summary-row strong{display:block;font-size:14px}.scenario-intro-summary-row p{margin:3px 0 0;color:#8f879f;font-size:12px}
.scenario-intro-editor-backdrop{z-index:7590}.scenario-intro-editor-modal{width:min(1240px,calc(100vw - 36px));height:min(850px,calc(100vh - 36px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(174,137,255,.24);border-radius:22px;background:#0d0a13;box-shadow:0 32px 100px rgba(0,0,0,.62)}
.scenario-intro-editor-body{display:grid;grid-template-columns:minmax(430px,.95fr) minmax(430px,1.05fr);min-height:0;flex:1}.scenario-intro-block-pane{min-height:0;display:flex;flex-direction:column;padding:18px;border-right:1px solid rgba(255,255,255,.07)}
.scenario-intro-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.scenario-intro-toolbar>div:first-child{display:flex;flex-direction:column;gap:3px}.scenario-intro-toolbar small{color:#81798d;font-size:11px}.scenario-intro-toolbar>div:last-child{display:flex;gap:7px}
.scenario-intro-block-list{display:flex;flex-direction:column;gap:12px;overflow:auto;padding-right:4px}.scenario-intro-block-card{padding:15px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.025)}.scenario-intro-block-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.scenario-intro-block-card>header>div{display:flex;align-items:center;gap:8px}.scenario-intro-block-card>header b{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(139,92,246,.15);color:#c7adff;font-size:11px}.scenario-intro-block-card>header strong{font-size:14px}.scenario-intro-block-card>header button{border:0;background:transparent;color:#91899c;cursor:pointer;padding:4px 6px}.scenario-intro-block-card>header button:hover:not(:disabled){color:#d8c9ff}.scenario-intro-block-card>header button:disabled{opacity:.28;cursor:default}.scenario-intro-block-card>label{display:grid;gap:7px;margin-top:11px}.scenario-intro-block-card textarea,.scenario-intro-block-card select{width:100%}
.scenario-intro-layout{margin-top:13px;border-top:1px solid rgba(255,255,255,.07);padding-top:11px}.scenario-intro-layout summary{cursor:pointer;font-weight:700;font-size:12px}.scenario-intro-layout>p{margin:7px 0 10px;color:#81798d;font-size:11px;line-height:1.5}.scenario-intro-cast-row{display:grid;grid-template-columns:minmax(150px,1fr) 140px;gap:9px;align-items:end;padding:8px 0;border-top:1px solid rgba(255,255,255,.05)}.scenario-intro-cast-row:first-child{border-top:0}.scenario-intro-cast-row>label:not(.story-check-line){display:grid;gap:4px}.scenario-intro-cast-row>label>span{font-size:10px;color:#81798d}.scenario-intro-cast-row .story-check-line{align-self:center;margin:0}
.scenario-intro-preview-pane{min-height:0}.scenario-intro-preview-pane .chat-sprite-runtime-iframe{pointer-events:none}
@media(max-width:900px){.scenario-intro-editor-modal{width:calc(100vw - 16px);height:calc(100vh - 16px);border-radius:16px}.scenario-intro-editor-body{grid-template-columns:1fr;overflow:auto}.scenario-intro-block-pane{min-height:520px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.scenario-intro-preview-pane{min-height:430px}.scenario-intro-cast-row{grid-template-columns:1fr 1fr}.scenario-intro-cast-row>.story-check-line{grid-column:1/-1}.scenario-intro-summary-row{align-items:flex-start;flex-direction:column}}

/* v5.34.72.75 · scenario episode base background + optional card-title hiding */
.scenario-episode-background-field {
  display: grid;
  gap: 10px;
  margin: 2px 0 4px;
}
.scenario-episode-background-drop {
  position: relative;
  width: min(100%, 680px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(177, 154, 236, .42);
  border-radius: 14px;
  background: rgba(16, 13, 27, .72);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.scenario-episode-background-drop > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.scenario-episode-background-drop > span {
  display: grid;
  gap: 4px;
  place-items: center;
  color: rgba(225, 218, 246, .72);
  text-align: center;
  pointer-events: none;
}
.scenario-episode-background-drop > span b { color: #f2edff; font-size: 14px; }
.scenario-episode-background-drop > span small { font-size: 12px; }
.scenario-episode-background-drop:hover,
.scenario-episode-background-drop.is-drag-over {
  border-color: rgba(184, 145, 255, .92);
  box-shadow: 0 0 0 3px rgba(128, 82, 220, .13);
  background: rgba(25, 18, 43, .84);
}
.scenario-episode-background-drop.is-drag-over::after {
  content: "여기에 놓아 시작 배경으로 사용";
  position: absolute;
  inset: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(198, 169, 255, .92);
  border-radius: 12px;
  background: rgba(10, 7, 20, .76);
  color: #fff;
  font-weight: 800;
  pointer-events: none;
}
.scenario-episode-background-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.scenario-intro-player-tag-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:1px}.scenario-intro-player-tag-row>span{margin-right:2px;color:#81798d;font-size:10px}.scenario-intro-player-tag-row button{padding:4px 7px;border:1px solid rgba(153,110,255,.18);border-radius:7px;background:rgba(153,110,255,.08);color:#cbb7ff;font-size:10px;cursor:pointer}.scenario-intro-player-tag-row button:hover{border-color:rgba(173,139,255,.36);background:rgba(153,110,255,.14);color:#e2d7ff}

/* Keep speaking state on the parent; entrance/exit only animate its media stack. */
.chat-view .vn-character {
  transition: left 300ms ease-out, transform 240ms ease-out !important;
}
@media (prefers-reduced-motion: reduce) {
  .chat-view .vn-character { transition: none !important; }
}

/* v5.34.72.92 · scenario start privacy + intro presentation reuse */
.story-start-slot-assignments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.story-start-name-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(157,107,255,.22);
  border-radius: 999px;
  background: rgba(116,71,255,.09);
  color: #ded6e9;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.route-selected-list > .story-start-name-chip {
  min-height: 32px;
  padding: 7px 11px;
}
.scenario-intro-presentation-block .story-presentation-card-row {
  margin: 0;
}
.scenario-intro-presentation-row {
  grid-template-columns: minmax(0,1fr) auto auto;
}
@media (max-width: 760px) {
  .scenario-intro-presentation-row { grid-template-columns: 1fr; }
}

/* v5.34.72.101 - intro reorder stability + VN textbox continuity */
.scenario-intro-block-list{scroll-behavior:auto}
.vn-stage.is-advancing .vn-dialogue-box,
.vn-stage.is-advancing .vn-scene-card{
  pointer-events:none;
  opacity:1;
}


/* v5.34.72.119 — one authored-presentation mount and one 1667x900 logical
   fullscreen stage for creator preview and real play. The logical canvas only
   activates in fullscreen/sprite-preview modes, so ordinary chat sizing is
   untouched. */
.vn-stage-shell {
  background: #05070d !important;
}
.vn-stage-runtime-canvas {
  --tryva-vn-dialogue-inset: clamp(18px, 4vw, 58px);
  --tryva-vn-narration-inset: clamp(34px, 8vw, 130px);
  --tryva-vn-player-width: min(620px, calc(100% - 76px));
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #05070d;
  transform-origin: center center;
}
.vn-stage-runtime-canvas > .vn-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.vn-stage-runtime-canvas > .story-presentation-runtime {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9000 !important;
}
body.stage-fullscreen .vn-stage-runtime-canvas,
body.sprite-preview-frame .vn-stage-runtime-canvas {
  --tryva-vn-dialogue-inset: 58px;
  --tryva-vn-narration-inset: 130px;
  --tryva-vn-player-width: 700px;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 1667px !important;
  height: 900px !important;
  transform: translate(-50%, -50%) scale(var(--tryva-stage-logical-scale, 1)) !important;
}

/* Fullscreen real play and creator preview both use the same 1667x900 logical
   VN typography/box geometry. These rules intentionally override outer-window
   media queries; the canvas itself is the responsive unit and is scaled as one. */
body.stage-fullscreen .vn-stage-runtime-canvas .vn-dialogue-box {
  left: var(--tryva-vn-dialogue-inset) !important;
  right: var(--tryva-vn-dialogue-inset) !important;
  bottom: 104px !important;
  min-height: 116px !important;
  padding: 26px 34px 24px !important;
  border-radius: 20px !important;
}
body.stage-fullscreen .vn-stage-runtime-canvas .vn-dialogue-box.is-narration {
  left: var(--tryva-vn-narration-inset) !important;
  right: var(--tryva-vn-narration-inset) !important;
  min-height: 96px !important;
}
body.stage-fullscreen .vn-stage-runtime-canvas .vn-dialogue-box.is-player {
  left: auto !important;
  right: var(--tryva-vn-dialogue-inset) !important;
  width: var(--tryva-vn-player-width) !important;
}
body.stage-fullscreen .vn-stage-runtime-canvas .vn-dialogue-name {
  left: 26px !important;
  top: -17px !important;
  min-width: 108px !important;
  padding: 9px 18px !important;
}
body.stage-fullscreen .vn-stage-runtime-canvas .vn-scene-card {
  width: 860px !important;
  max-height: 440px !important;
  padding: 34px 38px 32px !important;
  border-radius: 24px !important;
}
body.stage-fullscreen .vn-stage-runtime-canvas .vn-presentation-text {
  font-size: 20px !important;
  line-height: 1.72 !important;
}
body.stage-fullscreen .vn-stage-runtime-canvas .vn-scene-card .vn-presentation-text {
  font-size: 22px !important;
  line-height: 1.8 !important;
}
body.stage-fullscreen .vn-stage-runtime-canvas .vn-advance-indicator {
  right: 20px !important;
  bottom: 12px !important;
}
body.stage-fullscreen .vn-stage-runtime-canvas .vn-scene-card .vn-advance-indicator {
  right: 24px !important;
  bottom: 16px !important;
}

/* The sandboxed authored HTML/CSS presentation now covers this same logical
   canvas, not the browser viewport outside the fullscreen target. */
.vn-stage-runtime-canvas .story-presentation-runtime iframe {
  width: 100% !important;
  height: 100% !important;
}

/* Room-owned gallery for generated backgrounds and integrated service scenes. */
.room-generated-images-entry {
  display: block;
}
.room-generated-images-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: #ece8f5;
  background: rgba(255,255,255,.035);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.room-generated-images-open:hover,
.room-generated-images-open:focus-visible {
  border-color: rgba(151,119,255,.62);
  background: rgba(130,93,230,.1);
  outline: none;
}
.room-generated-images-open:active { transform: translateY(1px); }
.room-generated-images-open > span:first-child { display: grid; gap: 3px; min-width: 0; }
.room-generated-images-open strong { font-size: 14px; }
.room-generated-images-open small { color: var(--muted); font-size: 11.5px; }
.room-generated-images-open-arrow { color: #a995df; font-size: 25px; line-height: 1; }
.room-generated-images-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3600;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(5,4,8,.76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.room-generated-images-backdrop.hidden { display: none; }
.room-generated-images-panel {
  display: flex;
  flex-direction: column;
  width: min(1080px, 96vw);
  max-height: min(90vh, 940px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  color: #ece8f5;
  background: var(--panel, #17151d);
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
}
.room-generated-images-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.room-generated-images-header span {
  display: block;
  margin-bottom: 4px;
  color: rgba(226,217,245,.48);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
}
.room-generated-images-header h3 { margin: 0; font-size: 20px; }
.room-generated-images-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: rgba(255,255,255,.08);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.room-generated-images-close:hover,
.room-generated-images-close:focus-visible { background: rgba(143,104,239,.25); outline: none; }
.room-generated-images-body {
  min-height: 0;
  padding: 18px 22px 24px;
  overflow-y: auto;
}
.room-generated-images-filters {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
}
.room-generated-images-filters button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: #a9a2b7;
  background: rgba(255,255,255,.035);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.room-generated-images-filters button span { color: #80788f; font-size: 11px; }
.room-generated-images-filters button.active {
  border-color: rgba(157,123,255,.65);
  color: #fff;
  background: rgba(128,89,225,.2);
}
.room-generated-images-filters button.active span { color: #c5b4fa; }
.room-generated-images-status:empty { display: none; }
.room-generated-images-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.room-generated-images-status p { margin: 0; color: #aaa2b8; font-size: 12px; }
.room-generated-images-status p.is-error { color: #e6a2a2; }
.room-generated-images-status button {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: inherit;
  background: rgba(255,255,255,.05);
  cursor: pointer;
}
.room-generated-images-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.room-generated-image-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.028);
}
.room-generated-image-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  background: #0a0910;
}
.room-generated-image-preview .emotion-media-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.room-generated-image-copy {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 6px 9px;
  padding: 11px 12px 12px;
}
.room-generated-image-copy strong {
  min-width: 0;
  overflow: hidden;
  color: #e8e3ef;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-generated-image-copy small {
  grid-column: 1 / -1;
  color: #81798e;
  font-size: 10.5px;
}
.room-generated-image-kind {
  padding: 3px 6px;
  border-radius: 5px;
  color: #c9baff;
  background: rgba(133,94,236,.18);
  font-size: 10px;
  font-weight: 750;
}
.room-generated-image-kind.is-scene { color: #9edbe8; background: rgba(55,163,184,.16); }
.room-generated-images-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 56px 18px;
  color: #81798e;
  text-align: center;
}
@media (max-width: 760px) {
  .room-generated-images-backdrop { align-items: end; padding: 0; }
  .room-generated-images-panel { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .room-generated-images-header { padding: 17px 18px; }
  .room-generated-images-body { padding: 14px 14px calc(20px + env(safe-area-inset-bottom)); }
  .room-generated-images-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}
@media (max-width: 430px) {
  .room-generated-images-grid { grid-template-columns: 1fr; }
}


/* v5.34.72.124: generated asset details show every actual provider reference. */
.generated-visual-detail-backdrop { position: fixed; inset: 0; z-index: 3400; display: grid; place-items: center; padding: 28px; background: rgba(8,8,12,.72); backdrop-filter: blur(12px); }
.generated-visual-detail-backdrop.hidden { display: none; }
.generated-visual-detail-panel { width: min(1040px,96vw); max-height: min(88vh,920px); overflow: auto; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: var(--panel,#17171d); box-shadow: 0 28px 80px rgba(0,0,0,.45); }
.generated-visual-detail-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid rgba(255,255,255,.1); background: inherit; }
.generated-visual-detail-header span { display:block; margin-bottom:4px; font-size:11px; letter-spacing:.16em; opacity:.55; }
.generated-visual-detail-header h3 { margin:0; font-size:20px; }
.generated-visual-detail-close { width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:inherit; font-size:25px; cursor:pointer; }
.generated-visual-detail-body { display:grid; gap:22px; padding:22px; }
.generated-visual-detail-section { display:grid; gap:12px; }
.generated-visual-detail-section-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.generated-visual-detail-section-head > span { font-size:12px; opacity:.6; }
.generated-visual-reference-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.generated-visual-reference-card { min-width:0; padding:10px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.035); }
.generated-visual-reference-label { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:12px; }
.generated-visual-reference-label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.55; }
.generated-visual-reference-preview { aspect-ratio:2/3; min-height:0; border-radius:10px; overflow:hidden; }
.generated-visual-reference-preview .emotion-media-preview { width:100%; height:100%; object-fit:contain; }
.generated-visual-prompt { margin:0; padding:14px; max-height:320px; overflow:auto; border:1px solid rgba(255,255,255,.09); border-radius:12px; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.55; background:rgba(0,0,0,.16); }
.generated-visual-detail-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.generated-visual-detail-meta > div { min-width:0; padding:11px 12px; border-radius:10px; background:rgba(255,255,255,.035); }
.generated-visual-detail-meta span { display:block; margin-bottom:4px; font-size:11px; opacity:.55; }
.generated-visual-detail-meta strong { display:block; overflow-wrap:anywhere; font-size:13px; }

/* -- 빈 선택 바 숨김 -------------------------------------------------------
   아무것도 고르지 않았으면 트레이를 화면 밖으로 내린다. 빈 + 슬롯과 비활성
   Play 버튼만 든 바가 목록 아래를 계속 가리고 있었다. 숨김은 접기와 같은
   transform 방식을 쓰되, 접기와 달리 다시 꺼낼 이유가 없으므로 토글 손잡이까지
   같이 감춘다. 손잡이를 남기면 아무것도 안 걸린 빈 바가 다시 올라온다.

   트레이 관련 규칙 중 가장 뒤에 두는 이유가 있다. 앞쪽(22462줄 부근)에 두었더니 뒤에 오는
       body.detail-active:not(.selection-tray-collapsed)>#globalSelectionTray.selection-tray
       { transform: none !important }
   이 같은 속성을 덮어써서 상세 화면에서만 빈 바가 도로 올라왔다. 그 규칙은
   클래스가 하나 더 많아 우선순위도 높다. 그래서 detail/story 변형을 따로 적어
   우선순위를 맞추고 순서로 확실히 이긴다. 이 아래에 트레이 규칙을 덧붙이지 말 것. */
/* 클래스를 세 번 반복해 우선순위를 (1,4,1) 로 올린다. 화면 종류마다
       body.play-active:not(.selection-tray-collapsed)   > ...{transform:none!important}
       body.detail-active:not(.selection-tray-collapsed) > ...{transform:none!important}
   같은 쌍둥이 규칙이 있고, 이들은 클래스가 셋(view + :not 인자 + selection-tray)이라
   (1,3,1) 이다. 평범하게 쓴 (1,2,1) 규칙은 뒤에 두어도 진다. 실측으로 확인했다:
   규칙은 파싱되고 선택자도 매칭되는데 computed transform 이 none 이었다.
   화면 클래스를 하나씩 나열하는 방법도 있지만 새 화면이 생기면 조용히 새는 쪽이라
   개수로 이기게 둔다. */
/* 100% + 1px 로는 모자란다. 트레이는 화면 바닥에 붙어 있지 않고 18px 정도 띄워져
   있어서, 자기 높이(92px)만 내리면 아래쪽이 17px 남아 바가 그대로 보인다. 실측으로
   확인했다. 바닥 여백과 그림자까지 확실히 덮도록 여유를 준다. */
body.selection-tray-empty.selection-tray-empty.selection-tray-empty > #globalSelectionTray.selection-tray {
  transform: translateY(calc(100% + 48px)) !important;
}
body.selection-tray-empty.selection-tray-empty.selection-tray-empty > #globalSelectionTray .selection-tray-toggle {
  display: none !important;
}
/* 트레이가 차지하던 자리도 같이 걷는다. 안 걷으면 목록 밑에 빈 띠가 남는다. */
body.selection-tray-empty.play-active .workspace,
body.selection-tray-empty.library-active .workspace,
body.selection-tray-empty.all-characters-active .workspace,
body.selection-tray-empty.recent-active .workspace { padding-bottom: 0 !important; }
.generated-visual-detail-empty { margin:0; padding:18px; text-align:center; opacity:.68; }
@media (max-width:640px) { .generated-visual-detail-backdrop { padding:10px; } .generated-visual-detail-panel { width:100%; max-height:94vh; border-radius:16px; } .generated-visual-reference-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .generated-visual-detail-meta { grid-template-columns:1fr; } }


/* v5.34.72.29 · 방 정원 표시. 예전에는 인원을 몇이든 고를 수 있고 방 생성에서
   앞부분만 조용히 잘렸다. 고르는 화면에서 현재 인원과 상한을 같이 보여 준다. */
.selection-cast-count,
.story-list-count {
  margin-left: 6px;
  color: rgba(181, 171, 197, .62);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
}
.story-list-count { margin-left: 10px; }
.selection-cast-count.at-limit,
.story-list-count.at-limit {
  color: #ffb4a2;
}
.story-list-add-row > .ghost-button[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* 페르소나 — 방을 시작할 때 "내가 누구인지"를 고른다.
   주변(.user-profile-box, .start-model-field)과 같은 선·면·여백을 쓴다.
   강조색이나 그림자를 새로 만들지 않는다. 시작 화면에 서로 다른 카드가
   여러 종류로 보이면 그것만으로 화면이 산만해진다. */
.persona-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.persona-chip-row.hidden { display: none; }
.persona-chip {
  padding: 6px 11px;
  border: 1px solid var(--tryva-line);
  /* 알약 모양은 이 화면에서 혼자만 튄다. 주변과 같은 8px 을 쓴다. */
  border-radius: 8px;
  background: transparent;
  color: #a79eb6;
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.persona-chip:hover { color: #ddd6e8; border-color: var(--tryva-line-strong); }
.persona-chip[aria-pressed="true"] {
  border-color: var(--tryva-line-strong);
  background: var(--tryva-surface-2);
  color: #f0ebf7;
}
.persona-form-grid { gap: 10px; }
.persona-description-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.persona-description-field > span { color: #cfc7dc; font-size: 12.5px; }
.persona-description-field > span > i {
  margin-left: 4px;
  color: #7e768d;
  font-size: 11.5px;
  font-style: normal;
}
.persona-description-field textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  line-height: 1.6;
}
.persona-count {
  color: #7e768d;
  font-size: 11.5px;
  text-align: right;
}
.persona-count.is-near { color: #b9a8d6; }
.persona-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
}
.persona-actions #personaDeleteBtn { margin-right: auto; }
.persona-actions button { padding: 8px 14px; font-size: 13px; }


.story-detail-page-quick-editor {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  background: var(--tryva-app-ground, #0c0c11);
}
.story-detail-page-quick-editor.hidden { display: none !important; }
.story-detail-page-quick-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.story-detail-page-quick-toolbar > div { display: grid; gap: 3px; }
.story-detail-page-quick-toolbar > .story-detail-page-quick-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.story-detail-page-package-import.is-drag-over {
  border-color: rgba(177, 139, 255, .72) !important;
  background: rgba(124, 77, 255, .20) !important;
  color: #fff !important;
}
.story-detail-page-drop-zone { position: relative; }
.story-detail-page-drop-zone.is-drag-over::after {
  content: "HTML · CSS · ZIP · 이미지 파일 놓기";
  position: absolute;
  z-index: 250;
  inset: 0;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(183, 145, 255, .84);
  border-radius: inherit;
  background: rgba(20, 14, 32, .88);
  color: #f6f1ff;
  font-size: 15px;
  font-weight: 780;
  letter-spacing: -.01em;
  pointer-events: none;
}
.story-detail-page-quick-toolbar strong { color: #f0ecf5; font-size: 14px; }
.story-detail-page-quick-toolbar small { color: #958da0; font-size: 11px; }
.story-detail-page-quick-code { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.story-detail-page-quick-code label { display: flex; flex-direction: column; min-width: 0; min-height: 340px; }
.story-detail-page-quick-code label + label { border-left: 1px solid rgba(255, 255, 255, .09); }
.story-detail-page-quick-code label > span { padding: 9px 12px; color: #a49bad; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.story-detail-page-quick-code textarea { box-sizing: border-box; flex: 1 1 auto; width: 100%; min-height: 300px; resize: vertical; padding: 14px 16px; border: 0; border-radius: 0; background: #0b0d12; color: #ddd8e6; font: 12.5px/1.58 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; outline: none; tab-size: 2; }
.story-detail-page-quick-code textarea:focus { background: #0d0f15; box-shadow: inset 0 0 0 1px rgba(167, 117, 255, .24); }
.story-detail-page-quick-preview { box-sizing: border-box; width: 100%; min-width: 0; overflow: visible; padding: 24px; background: #0b0d12; }

/* Creator detail-page code editor lives directly inside its own wizard step. */
.story-detail-page-inline-editor {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin-top: 18px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 15px;
  background: var(--tryva-app-ground, #0c0c11);
}
.story-detail-page-editor-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: #12141b;
}
.story-detail-page-width-guide {
  margin-right: auto;
  color: #958da0;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.story-detail-page-asset-status { display: grid; gap: 9px; padding: 11px 14px; border-bottom: 1px solid rgba(255, 255, 255, .09); background: #0e1016; color: #aaa3b4; font-size: 11px; }
.story-detail-page-asset-status.has-missing { background: rgba(77, 53, 21, .13); }
.story-detail-page-asset-status > p { margin: 0; color: #817a89; }
.story-detail-page-asset-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story-detail-page-asset-summary strong { color: #d9d4e1; font-size: 12px; }
.story-detail-page-asset-summary span { color: #938a9e; }
.story-detail-page-asset-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.story-detail-page-asset-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 7px; background: rgba(255,255,255,.025); }
.story-detail-page-asset-list code { overflow: hidden; color: #c9c2d2; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.story-detail-page-asset-list .is-connected > span { color: #80c9a2; }
.story-detail-page-asset-list .is-missing > span { color: #d5a46b; }
.story-detail-page-asset-list button { padding: 3px 6px; border: 0; background: transparent; color: #91899d; font-size: 10px; cursor: pointer; }
.story-detail-page-editor-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(360px, 42vh) auto; min-height: 0; overflow: visible; flex: 1 1 auto; }
.story-detail-page-code-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(360px, 42vh); min-height: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.story-detail-page-code-column label { display: flex; flex-direction: column; min-height: 0; }
.story-detail-page-code-column label + label { border-left: 1px solid rgba(255, 255, 255, .09); }
.story-detail-page-code-column label > span { flex: 0 0 auto; padding: 8px 12px; color: #a49bad; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.story-detail-page-code-column textarea { box-sizing: border-box; flex: 1 1 auto; width: 100%; min-height: 0; resize: none; padding: 14px 16px; border: 0; border-radius: 0; background: #0b0d12; color: #ddd8e6; font: 12.5px/1.58 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; outline: none; tab-size: 2; }
.story-detail-page-code-column textarea:focus { background: #0d0f15; box-shadow: inset 0 0 0 1px rgba(167, 117, 255, .24); }
.story-detail-page-preview-column { display: grid; place-items: start center; min-width: 0; overflow: visible; padding: 24px; background: #0b0d12; }
.story-detail-page-preview-frame { box-sizing: border-box; width: 100%; min-width: 0; min-height: 0; height: auto; padding: 0; overflow: visible; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: #0b0d12; }
.story-detail-page-preview-frame > [data-story-detail-page-live-preview] { max-width: 100%; overflow: visible; }

@media (max-width: 839px) {
  .story-detail-page-inline-editor { min-height: 0; overflow: visible; border-right: 0; border-left: 0; border-radius: 0; }
  .story-detail-page-editor-toolbar { align-items: stretch; padding: 10px; }
  .story-detail-page-editor-toolbar > button { flex: 1 1 100%; }
  .story-detail-page-editor-body { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
  .story-detail-page-code-column { grid-template-columns: 1fr; grid-template-rows: auto auto; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
  .story-detail-page-code-column label + label { border-top: 1px solid rgba(255, 255, 255, .09); border-left: 0; }
  .story-detail-page-code-column label { min-height: 300px; }
  .story-detail-page-code-column textarea { min-height: 260px; resize: vertical; }
  .story-detail-page-preview-column { overflow: visible; padding: 12px 0 0; }
  .story-detail-page-preview-frame { width: 100%; min-height: auto; padding: 0; border-right: 0; border-left: 0; border-radius: 0; }
  .story-detail-page-quick-toolbar { align-items: stretch; flex-direction: column; }
  .story-detail-page-quick-toolbar > .story-detail-page-quick-actions { justify-content: stretch; }
  .story-detail-page-quick-toolbar > .story-detail-page-quick-actions > button { flex: 1 1 auto; }
  .story-detail-page-asset-list { grid-template-columns: 1fr; }
  .story-detail-page-quick-code { grid-template-columns: 1fr; }
  .story-detail-page-quick-code label + label { border-top: 1px solid rgba(255, 255, 255, .09); border-left: 0; }
  .story-detail-page-quick-preview { padding: 12px 0 0; }
}

/* v5.34.72.210 · room runtime performance
   Keep transition animation on the media stack, but do not continuously
   allocate filtered compositor layers for every standing character. */
.chat-view .vn-character,
body.stage-fullscreen .chat-view .vn-character,
.chat-view .vn-standing,
body.stage-fullscreen .chat-view .vn-standing {
  filter: none !important;
  will-change: auto !important;
}

.chat-view .vn-character.inactive,
body.stage-fullscreen .chat-view .vn-character.inactive {
  opacity: 1 !important;
  filter: none !important;
}

.chat-view .vn-character.speaking,
body.stage-fullscreen .chat-view .vn-character.speaking {
  opacity: 1 !important;
  filter: none !important;
}

.chat-view .vn-background-status,
.chat-view .vn-dialogue-box,
.chat-view .vn-scene-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* v5.34.72.216 · steady-frame room compositor fix
   The final desktop room panels already paint opaque/non-overlapping surfaces.
   A legacy 18px backdrop blur therefore changed no visible pixels, but forced
   Chrome to recompose nearly the whole room for the always-running advance
   indicator and every typing update. Keep the visuals and remove only that
   redundant full-height backdrop sampling. */
body.chat-active .chat-view > .chat-panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (min-width: 901px) {
  body.chat-active .chat-view > .insight-panel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* v5.34.72.217 · creator visual-slot ownership */
.create-visual-asset-grid .visual-asset-slot-drop-zone {
  position: relative;
  cursor: copy;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.create-visual-asset-grid .visual-asset-slot-drop-zone.is-drag-over {
  border-color: rgba(157, 105, 255, .9) !important;
  background-color: rgba(122, 78, 214, .14) !important;
  box-shadow: inset 0 0 0 2px rgba(157, 105, 255, .32);
}
.create-visual-asset-grid .visual-asset-slot-drop-zone.is-drag-over::after {
  content: "이 슬롯에 넣기";
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(9, 8, 14, .82);
  color: #f4efff;
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}
.create-visual-asset-grid .emotion-media-slot-actions.is-single-action {
  grid-template-columns: 1fr;
}
.create-visual-asset-grid .emotion-media-slot-actions > .secondary-button {
  min-height: 42px;
}
#createEmotionLayoutEditor.hidden { display: none !important; }
#createEmotionLayoutEditor.create-emotion-layout-backdrop {
  z-index: 420 !important;
  padding: 24px !important;
  background: rgba(4, 4, 8, .74) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}
#createEmotionLayoutEditor .create-emotion-layout-modal {
  display: grid;
  width: min(1120px, calc(100vw - 48px));
  max-width: none !important;
  max-height: calc(100dvh - 48px);
  gap: 12px;
  overflow: auto !important;
  padding: 18px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 18px !important;
  background: #111016 !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .58) !important;
}
#createEmotionLayoutEditor .create-emotion-layout-head {
  margin: 0 !important;
}
#createEmotionLayoutEditor .create-emotion-layout-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
#createEmotionLayoutEditor .create-emotion-layout-head-actions > span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(167, 118, 255, .2);
  border-radius: 999px;
  background: rgba(107, 67, 191, .14);
  color: rgba(221, 209, 255, .82);
  font-size: 10px;
  font-weight: 800;
}
#createEmotionLayoutEditor .emotion-runtime-sprite-host {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 1667 / 900 !important;
  overflow: hidden !important;
}
#createEmotionLayoutEditor .emotion-runtime-sprite-host > .direct-sprite-placement-board {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1667 / 900 !important;
  box-sizing: border-box !important;
}
#createEmotionLayoutEditor .cw-chat-sprite-control-panel {
  margin-top: 0 !important;
}
#createEmotionLayoutEditor .cw-emotion-layout-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#createEmotionLayoutEditor .cw-emotion-layout-actions > button {
  width: 100%;
  min-height: 42px;
}
@media (max-width: 760px) {
  #createEmotionLayoutEditor.create-emotion-layout-backdrop {
    padding: 10px !important;
  }
  #createEmotionLayoutEditor .create-emotion-layout-modal {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 12px !important;
    border-radius: 14px !important;
  }
  #createEmotionLayoutEditor .create-emotion-layout-head-actions > span {
    display: none;
  }
}

/* v5.34.72.218 · character creator draft controls */
#createView .story-asset-create-actions .character-draft-status {
  min-width: 0;
  margin-right: auto;
  color: rgba(211, 204, 229, .62);
  font-size: 11px;
  line-height: 1.35;
}

/* v219: one progress surface for character, world, lorebook and scenario creators. */
.story-asset-create-preview.creator-progress-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 24px 18px 20px;
  background: #0d0c15;
  color: #f1eef8;
}
.creator-progress-panel .creator-progress-head h2 {
  margin: 0;
  color: #f5f2fb;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.creator-progress-panel .creator-progress-head p,
.creator-progress-panel .creator-progress-identity small,
.creator-progress-panel .creator-progress-item small,
.creator-progress-panel .creator-progress-summary p,
.creator-progress-panel .creator-progress-summary > small {
  min-height: 0;
  margin: 0;
}
.creator-progress-panel .creator-progress-head p {
  margin-top: 6px;
  color: #847d98;
  font-size: 11px;
  line-height: 1.5;
}
.creator-progress-identity {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #252137;
  border-radius: 13px;
  background: #151321;
}
.creator-progress-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 64px;
  overflow: hidden;
  border: 1px solid #302a45;
  border-radius: 11px;
  background: #211c31;
  color: #bdaaff;
  font-size: 20px;
  font-weight: 800;
}
.creator-progress-avatar img { width: 100%; height: 100%; object-fit: cover; }
.creator-progress-identity > div:nth-child(2) { min-width: 0; }
.creator-progress-identity strong { display: block; overflow: hidden; color: #f4f1fa; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.creator-progress-identity small { display: block; margin-top: 5px; overflow: hidden; color: #8c849e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.creator-progress-identity em {
  padding: 5px 7px;
  border: 1px solid #373047;
  border-radius: 999px;
  color: #91899f;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.creator-progress-identity em.is-ready { border-color: rgba(139, 102, 255, .48); background: rgba(116, 75, 255, .13); color: #c7b8ff; }
.creator-progress-list { display: grid; gap: 7px; }
.creator-progress-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid #28243a;
  border-radius: 12px;
  background: #13111d;
  color: inherit;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.creator-progress-item:hover { border-color: #51436f; background: #171421; transform: translateY(-1px); }
.creator-progress-item.is-current { border-color: #6848a4; background: linear-gradient(135deg, rgba(91, 52, 155, .2), rgba(24, 18, 39, .96)); box-shadow: inset 0 0 0 1px rgba(146, 100, 255, .08); }
.creator-progress-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: #28243a;
  color: #aaa2ba;
  font-size: 10px;
  font-weight: 900;
}
.creator-progress-item.is-current .creator-progress-number { background: linear-gradient(135deg, #8257ff, #6842e6); color: #fff; box-shadow: 0 4px 14px rgba(113, 70, 255, .3); }
.creator-progress-item.is-complete .creator-progress-number { background: rgba(118, 80, 232, .18); color: #bba6ff; }
.creator-progress-copy { min-width: 0; }
.creator-progress-copy strong { display: block; overflow: hidden; color: #e9e5f2; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.creator-progress-copy small { display: block; margin-top: 4px; overflow: hidden; color: #777083; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.creator-progress-item b { color: #9e82ff; font-size: 9px; font-weight: 800; white-space: nowrap; }
.creator-progress-item > i { color: #696273; font-size: 13px; font-style: normal; }
.creator-progress-item.is-complete > i { color: #a684ff; }
.creator-progress-summary {
  margin-top: auto;
  padding: 14px;
  border: 1px solid #4c347a;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(65, 41, 104, .22), rgba(19, 16, 29, .96));
}
.creator-progress-summary-line { display: flex; align-items: center; justify-content: space-between; color: #9d83ec; font-size: 10px; }
.creator-progress-summary-line strong { color: #efe9ff; font-size: 15px; }
.creator-progress-bar { height: 5px; margin: 10px 0 12px; overflow: hidden; border-radius: 999px; background: #302b3d; }
.creator-progress-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7448ed, #b68cff); transition: width .2s ease; }
.creator-progress-summary p { color: #ded7eb; font-size: 11px; line-height: 1.45; }
.creator-progress-draft { display: block; margin-top: 8px !important; color: #81798e !important; font-size: 9px !important; line-height: 1.45 !important; }
.creator-progress-draft.is-error { color: #e69b9b !important; }

@media (max-width: 920px) {
  .story-asset-create-preview.creator-progress-panel { display: none; }
}
#createView .story-asset-create-actions #saveCharacterDraftBtn {
  min-width: 96px;
}
@media (max-width: 760px) {
  #createView .story-asset-create-actions {
    flex-wrap: wrap;
  }
  #createView .story-asset-create-actions .character-draft-status {
    flex: 1 0 100%;
    order: -1;
  }
}

/* v5.34.72.220 · atomic first layout and creator control parity */
body.play-active #playView .tryva-home-card-carousel .home-character-card-skeleton {
  flex: 0 0 var(--tryva-home-card-w) !important;
  width: var(--tryva-home-card-w) !important;
  min-width: var(--tryva-home-card-w) !important;
  max-width: var(--tryva-home-card-w) !important;
  height: var(--tryva-home-card-h) !important;
  min-height: var(--tryva-home-card-h) !important;
  max-height: var(--tryva-home-card-h) !important;
  aspect-ratio: auto !important;
}
body.play-active #playView .home-character-card-skeleton .tile-art,
body.play-active #playView .home-character-card-skeleton .tryva-card-skeleton-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The emotion placement dialog lives beside, not inside, .character-wizard.
   Consume the same control component explicitly instead of falling back to
   unstyled browser buttons. */
#createEmotionLayoutEditor .cw-crop-tools {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}
#createEmotionLayoutEditor .cw-crop-tools > button,
#createEmotionLayoutEditor .cw-crop-tools > strong {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 10px;
  background: rgba(255,255,255,.024);
  color: #bec2d0;
  font-size: 11px;
}
#createEmotionLayoutEditor .cw-crop-tools > button {
  padding: 0 12px;
  cursor: pointer;
}
#createEmotionLayoutEditor .cw-crop-tools > button:hover {
  border-color: rgba(160,107,255,.48);
  color: #fff;
}
#createEmotionLayoutEditor .cw-crop-tools > strong {
  display: grid;
  min-width: 70px;
  place-items: center;
  color: #a98eff;
}

/* Character navigation follows the exact story/world/scenario action row:
   equal Previous/Next buttons and a distinct wider publish action only. */
#createView .story-asset-create-actions #wizardPrevBtn,
#createView .story-asset-create-actions #wizardNextBtn {
  box-sizing: border-box;
  width: auto !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 1px solid var(--tryva-line, rgba(255,255,255,.09)) !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #b8afc5 !important;
}
#createView .story-asset-create-actions #saveCharacterBtn {
  min-width: 132px !important;
}

/* Never use a differently cropped image as the detail-entry veil. The real
   image/video remains hidden until its saved geometry is committed. */
body.detail-active #characterDetailView .detail-media-loading-cover {
  background:
    linear-gradient(180deg, rgba(8,7,13,.05), rgba(8,7,13,.28)),
    linear-gradient(145deg,#17131f,#29203a 58%,#111018) !important;
}

@media (max-width: 760px) {
  #createEmotionLayoutEditor .cw-crop-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #createEmotionLayoutEditor .cw-crop-tools > strong {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .library-folder-tile { transition: none; }
}

/* Two existing native scroll screens share one clipped transition shell. */
html body.catalog-flow-active .app-shell > .workspace {
  height: var(--tryva-app-height, 100dvh) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html body.catalog-flow-active #catalogFlow {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
html body #catalogFlow.hidden { display: none !important; }
html body.catalog-flow-active #catalogFlow > :is(#playView, #allCharactersView) {
  display: block !important;
  grid-area: 1 / 1;
  z-index: 0;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  margin: 0 !important;
  padding-inline: clamp(24px, 3.5vw, 54px) !important;
  padding-bottom: var(--tryva-active-tray-clearance, 32px) !important;
  background: var(--tryva-app-ground, #0c0c11) !important;
}
html body #catalogFlow:not([data-catalog-transition])[data-catalog-view="playView"] > #allCharactersView,
html body #catalogFlow:not([data-catalog-transition])[data-catalog-view="allCharactersView"] > #playView {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
html body #catalogFlow[data-catalog-view="playView"] > #playView,
html body #catalogFlow[data-catalog-view="allCharactersView"] > #allCharactersView { z-index: 1; }
html body.catalog-flow-active #allCharactersView > .explore-head { padding-top: 28px; }
@media (max-width: 760px) {
  html body.catalog-flow-active #catalogFlow > :is(#playView, #allCharactersView) {
    padding-inline: 16px !important;
  }
}
/* TRYVA document help center. The application sidebar remains the global shell;
   this file owns only the document navigation, article and in-page contents. */
body.help-active .workspace {
  overflow: visible;
}

#helpBtn.active {
  color: #f0e8ff;
  background: rgba(153, 99, 242, .12);
}

.help-docs-view {
  min-height: 100vh;
  padding: 0;
  color: #eae7ef;
  background: #0c0c11;
}

.help-docs-shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 820px) 208px;
  align-items: start;
  width: min(100%, 1380px);
  min-height: 100vh;
  margin: 0 auto;
}

.help-docs-navigation,
.help-docs-toc {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(174, 132, 255, .28) transparent;
}

.help-docs-navigation {
  padding: 38px 25px 56px 8px;
  border-right: 1px solid rgba(255, 255, 255, .075);
}

.help-docs-brand {
  display: block;
  margin: 0 10px 28px;
}

.help-docs-brand small {
  display: block;
  margin-bottom: 7px;
  color: #8f879a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.help-docs-brand strong {
  display: block;
  color: #f3eff8;
  font-size: 18px;
  letter-spacing: -.025em;
}

.help-docs-navigation nav > section + section { margin-top: 24px; }

.help-docs-navigation h2 {
  margin: 0 10px 8px;
  color: #81798b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.help-docs-navigation a,
.help-docs-navigation button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 37px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  color: #aaa3b2;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
}

.help-docs-navigation a:hover { color: #f0eaf7; background: rgba(255, 255, 255, .045); }
.help-docs-navigation a.active {
  color: #f3ebff;
  background: rgba(156, 103, 255, .13);
  box-shadow: inset 2px 0 #a36cff;
}
.help-docs-mobile-head,
.help-docs-mobile-nav { display: none; }

.help-docs-article {
  min-width: 0;
  padding: 52px 64px 120px;
}

.help-docs-article-head {
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.help-docs-article h1 {
  margin: 0;
  color: #f4f1f7;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.17;
  letter-spacing: -.045em;
}


.help-docs-section {
  scroll-margin-top: 28px;
  margin-top: 62px;
}

.help-docs-section:first-of-type { margin-top: 0; }

.help-docs-section h2 {
  margin: 0 0 18px;
  color: #f0edf3;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -.035em;
}

.help-docs-section h3 {
  margin: 34px 0 11px;
  color: #ddd7e3;
  font-size: 17px;
  letter-spacing: -.02em;
}

.help-docs-section p,
.help-docs-section li {
  color: #aaa3af;
  font-size: 14px;
  line-height: 1.85;
  word-break: keep-all;
}

.help-docs-section p { margin: 0 0 15px; }
.help-docs-section ul,
.help-docs-section ol { margin: 13px 0 18px; padding-left: 22px; }
.help-docs-section li + li { margin-top: 7px; }
.help-docs-section strong { color: #e5dfe9; }
.help-docs-section code {
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 5px;
  color: #d7c5f6;
  background: rgba(255, 255, 255, .045);
  font-size: .9em;
}

.help-docs-toc {
  padding: 51px 7px 60px 25px;
}

.help-docs-toc strong {
  display: block;
  margin-bottom: 13px;
  color: #aaa2b2;
  font-size: 11px;
}

.help-docs-toc a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 1px solid rgba(255, 255, 255, .085);
  color: #736d79;
  font-size: 11px;
  line-height: 1.45;
  text-decoration: none;
}

.help-docs-toc a:hover,
.help-docs-toc a.active { border-left-color: #9e6ce6; color: #c5b7d7; }

@media (max-width: 1240px) {
  .help-docs-shell { grid-template-columns: 224px minmax(0, 820px); width: min(100%, 1070px); }
  .help-docs-toc { display: none; }
}

@media (max-width: 820px) {
  .help-docs-shell { display: block; min-height: 0; }
  .help-docs-navigation { display: none; }
  .help-docs-mobile-head {
    position: sticky;
    z-index: 5;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(12, 12, 17, .94);
    backdrop-filter: blur(14px);
  }
  .help-docs-mobile-head strong { font-size: 13px; }
  .help-docs-mobile-head button {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #cfc7d7;
    background: rgba(255, 255, 255, .04);
  }
  .help-docs-mobile-nav {
    position: sticky;
    z-index: 4;
    top: 54px;
    display: none;
    padding: 12px 16px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: #111017;
  }
  .help-docs-mobile-nav.is-open { display: grid; gap: 5px; }
  .help-docs-mobile-nav a {
    padding: 9px 10px;
    border-radius: 7px;
    color: #aca4b4;
    font-size: 12px;
    text-decoration: none;
  }
  .help-docs-mobile-nav a.active { color: #eadfff; background: rgba(151, 96, 240, .12); }
  .help-docs-article { padding: 37px 22px 90px; }
  .help-docs-article h1 { font-size: 31px; }
  .help-docs-section { margin-top: 50px; }
  .help-docs-section h2 { font-size: 23px; }
  .help-docs-section p,
  .help-docs-section li { word-break: normal; }
}

@media (max-width: 520px) {
  .help-docs-article { padding-inline: 16px; }
  .help-docs-article h1 { font-size: 28px; }
}

/* v5.34.72.223 site-wide document registry */
.help-docs-search { display: grid; grid-template-columns: 1fr 32px; gap: 5px; margin: 0 8px 24px; }
.help-docs-search input { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; color: #e8e3ed; background: #15141a; }
.help-docs-search button { display: grid; place-items: center; min-height: 36px; padding: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; }
.help-docs-navigation h3, .help-docs-mobile-nav h3 { margin: 0 10px 8px; color: #81798b; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.help-docs-article-head nav { display: flex; gap: 8px; margin-bottom: 19px; color: #88808f; font-size: 12px; }
.help-docs-article-head nav a { color: #b39ad9; text-decoration: none; }
.help-docs-article-head > p { margin: 0 0 11px; color: #9d70e8; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.help-docs-article-head > div { max-width: 690px; margin-top: 17px; color: #b6afbc; font-size: 16px; line-height: 1.75; }
.help-docs-article-head > small { display: block; margin-top: 17px; color: #817b86; font-size: 11px; }
.help-docs-link-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.help-docs-link-grid a { display: flex; flex-direction: column; gap: 5px; padding: 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; color: inherit; background: rgba(255,255,255,.025); text-decoration: none; }
.help-docs-link-grid a:hover { border-color: rgba(160,106,238,.4); background: rgba(151,96,240,.07); }
.help-docs-link-grid span { color: #8f8896; font-size: 12px; }
.help-callout { display: flex; gap: 12px; margin: 18px 0; padding: 15px 16px; border-left: 2px solid #9e6ce6; color: #aaa3af; background: rgba(255,255,255,.025); font-size: 13px; line-height: 1.65; }
.help-callout strong { flex: 0 0 auto; }
.help-docs-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 70px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09); }
.help-docs-pagination a { display: flex; flex-direction: column; gap: 5px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; color: #dcd5e4; text-decoration: none; }
.help-docs-pagination a:last-child { text-align: right; }
.help-docs-pagination small { color: #81798b; }
.help-docs-search-results { display: grid; gap: 11px; margin-top: 28px; }
.help-docs-search-results > a { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; color: inherit; background: rgba(255,255,255,.025); text-decoration: none; }
.help-docs-search-results > a:hover { border-color: rgba(160,106,238,.4); }
.help-docs-search-results small { color: #9d70e8; }
.help-docs-search-results span, .help-docs-empty span, .help-docs-toc > span { color: #8f8896; font-size: 13px; line-height: 1.6; }
.help-docs-empty { display: flex; flex-direction: column; gap: 7px; padding: 28px; text-align: center; }
@media (max-width: 560px) {
  .help-docs-link-grid, .help-docs-pagination { grid-template-columns: 1fr; }
  .help-docs-pagination a:last-child { text-align: left; }
}